93 lines
19 KiB
Python
93 lines
19 KiB
Python
import os
|
||
from pathlib import Path
|
||
|
||
# 定义项目根目录（脚本所在目录下的 asset-assistant-system）
|
||
PROJECT_ROOT = Path(__file__).parent / "asset-assistant-system"
|
||
|
||
# 定义需要创建的目录列表
|
||
DIRECTORIES = [
|
||
"dist",
|
||
"src/assets/css",
|
||
"src/assets/css/components",
|
||
"src/assets/js/config",
|
||
"src/assets/js/core",
|
||
"src/assets/js/components",
|
||
"src/assets/icons",
|
||
"src/pages/modules",
|
||
"src/template"
|
||
]
|
||
|
||
# 定义需要创建的文件列表（路径: 文件初始内容）
|
||
FILES = {
|
||
# CSS 文件
|
||
"src/assets/css/dark-theme.css": "/* 暗夜模式主题样式 */\nbody.dark-theme {\n background-color: #1e1e1e;\n color: #f5f5f5;\n}\n",
|
||
"src/assets/css/common.css": "/* 通用样式 */\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Arial', sans-serif;\n}\n\n.container {\n width: 100%;\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 20px;\n}\n",
|
||
|
||
# JS 配置文件
|
||
"src/assets/js/config/menu.js": "/* 菜单配置 */\nexport const menuConfig = [\n {\n path: '/dashboard',\n name: '数据概览',\n icon: 'dashboard',\n auth: true\n },\n {\n path: '/asset-list',\n name: '资产列表',\n icon: 'assets',\n auth: true\n }\n];\n",
|
||
"src/assets/js/config/theme.js": "/* 主题配置 */\nexport const themeConfig = {\n defaultTheme: 'light',\n darkThemeClass: 'dark-theme',\n themeStorageKey: 'asset_system_theme'\n};\n",
|
||
"src/assets/js/config/system.js": "/* 系统配置 */\nexport const systemConfig = {\n appName: '资产辅助系统',\n version: '1.0.0',\n baseUrl: '/',\n timeout: 5000\n};\n",
|
||
|
||
# JS 核心功能
|
||
"src/assets/js/core/auth.js": "/* 权限验证 */\nimport { systemConfig } from '../config/system.js';\n\nexport const Auth = {\n // 检查是否登录\n isLogin() {\n return localStorage.getItem('token') !== null;\n },\n // 登录\n login(token) {\n localStorage.setItem('token', token);\n },\n // 退出登录\n logout() {\n localStorage.removeItem('token');\n window.location.href = `${systemConfig.baseUrl}login.html`;\n }\n};\n",
|
||
"src/assets/js/core/loader.js": "/* 加载器 */\nexport const Loader = {\n show() {\n const loader = document.createElement('div');\n loader.id = 'app-loader';\n loader.style.cssText = `\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(255,255,255,0.8);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 9999;\n `;\n loader.innerHTML = '<div>加载中...</div>';\n document.body.appendChild(loader);\n },\n hide() {\n const loader = document.getElementById('app-loader');\n if (loader) loader.remove();\n }\n};\n",
|
||
"src/assets/js/core/message.js": "/* 消息提示 */\nexport const Message = {\n success(content) {\n this.showMessage(content, 'success');\n },\n error(content) {\n this.showMessage(content, 'error');\n },\n showMessage(content, type) {\n const message = document.createElement('div');\n message.style.cssText = `\n position: fixed;\n top: 20px;\n right: 20px;\n padding: 10px 20px;\n border-radius: 4px;\n color: white;\n z-index: 9998;\n transition: all 0.3s;\n `;\n message.style.backgroundColor = type === 'success' ? '#4CAF50' : '#f44336';\n message.textContent = content;\n document.body.appendChild(message);\n setTimeout(() => message.remove(), 3000);\n }\n};\n",
|
||
"src/assets/js/core/router.js": "/* 路由管理 */\nimport { Auth } from './auth.js';\nimport { systemConfig } from '../config/system.js';\n\nexport const Router = {\n // 跳转页面\n push(path) {\n // 验证权限\n if (path !== '/login' && !Auth.isLogin()) {\n window.location.href = `${systemConfig.baseUrl}login.html`;\n return;\n }\n window.location.href = `${systemConfig.baseUrl}${path.startsWith('/') ? path.slice(1) : path}`;\n },\n // 获取当前路径\n getCurrentPath() {\n return window.location.pathname.replace(systemConfig.baseUrl, '');\n }\n};\n",
|
||
|
||
# JS 组件
|
||
"src/assets/js/components/sidebar.js": "/* 侧边栏组件 */\nimport { menuConfig } from '../config/menu.js';\nimport { Router } from '../core/router.js';\n\nexport function renderSidebar() {\n const sidebar = document.createElement('div');\n sidebar.className = 'sidebar';\n \n // 渲染菜单\n const menuHtml = menuConfig.map(item => `\n <div class=\"menu-item\" onclick=\"Router.push('${item.path}')\">\n <i class=\"icon-${item.icon}\"></i>\n <span>${item.name}</span>\n </div>\n `).join('');\n \n sidebar.innerHTML = menuHtml;\n return sidebar;\n}\n",
|
||
"src/assets/js/components/header.js": "/* 顶部导航组件 */\nimport { systemConfig } from '../config/system.js';\nimport { Auth } from '../core/auth.js';\nimport { themeConfig } from '../config/theme.js';\n\nexport function renderHeader() {\n const header = document.createElement('div');\n header.className = 'header';\n \n header.innerHTML = `\n <div class=\"app-name\">${systemConfig.appName}</div>\n <div class=\"header-actions\">\n <button onclick=\"toggleTheme()\">切换主题</button>\n <button onclick=\"Auth.logout()\">退出登录</button>\n </div>\n `;\n \n return header;\n}\n\n// 主题切换函数\nfunction toggleTheme() {\n const body = document.body;\n if (body.classList.contains(themeConfig.darkThemeClass)) {\n body.classList.remove(themeConfig.darkThemeClass);\n localStorage.setItem(themeConfig.themeStorageKey, 'light');\n } else {\n body.classList.add(themeConfig.darkThemeClass);\n localStorage.setItem(themeConfig.themeStorageKey, 'dark');\n }\n}\n",
|
||
"src/assets/js/components/loading.js": "/* 加载动画组件 */\nexport function renderLoading() {\n const loading = document.createElement('div');\n loading.className = 'loading';\n loading.innerHTML = `\n <div class=\"spinner\"></div>\n <div class=\"loading-text\">加载中...</div>\n `;\n return loading;\n}\n",
|
||
|
||
# 应用入口
|
||
"src/assets/js/app.js": "/* 应用入口 */\nimport { renderHeader } from './components/header.js';\nimport { renderSidebar } from './components/sidebar.js';\nimport { Auth } from './core/auth.js';\nimport { Router } from './core/router.js';\nimport { themeConfig } from './config/theme.js';\n\n// 初始化应用\nfunction initApp() {\n // 检查登录状态\n if (!Auth.isLogin() && window.location.pathname.indexOf('login.html') === -1) {\n Router.push('/login.html');\n return;\n }\n \n // 初始化主题\n initTheme();\n \n // 渲染公共组件（非登录页）\n if (window.location.pathname.indexOf('login.html') === -1) {\n renderCommonComponents();\n }\n}\n\n// 初始化主题\nfunction initTheme() {\n const savedTheme = localStorage.getItem(themeConfig.themeStorageKey) || themeConfig.defaultTheme;\n if (savedTheme === 'dark') {\n document.body.classList.add(themeConfig.darkThemeClass);\n }\n}\n\n// 渲染公共组件（头部和侧边栏）\nfunction renderCommonComponents() {\n const header = renderHeader();\n const sidebar = renderSidebar();\n \n document.body.appendChild(header);\n document.body.appendChild(sidebar);\n \n // 创建主内容区域\n const mainContent = document.createElement('div');\n mainContent.className = 'main-content';\n document.body.appendChild(mainContent);\n}\n\n// 页面加载完成后初始化\nwindow.addEventListener('DOMContentLoaded', initApp);\n",
|
||
|
||
# HTML 页面
|
||
"src/pages/login.html": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>资产辅助系统 - 登录</title>\n <link rel=\"stylesheet\" href=\"../assets/css/common.css\">\n <link rel=\"stylesheet\" href=\"../assets/css/dark-theme.css\">\n</head>\n<body>\n <div class=\"container\">\n <div class=\"login-form\">\n <h2>资产辅助系统</h2>\n <div class=\"form-group\">\n <label>用户名</label>\n <input type=\"text\" id=\"username\" placeholder=\"请输入用户名\">\n </div>\n <div class=\"form-group\">\n <label>密码</label>\n <input type=\"password\" id=\"password\" placeholder=\"请输入密码\">\n </div>\n <button onclick=\"handleLogin()\">登录</button>\n </div>\n </div>\n\n <script type=\"module\">\n import { Auth } from '../assets/js/core/auth.js';\n import { Router } from '../assets/js/core/router.js';\n import { Message } from '../assets/js/core/message.js';\n\n function handleLogin() {\n const username = document.getElementById('username').value;\n const password = document.getElementById('password').value;\n\n if (!username || !password) {\n Message.error('用户名和密码不能为空');\n return;\n }\n\n // 模拟登录验证\n if (username === 'admin' && password === '123456') {\n Auth.login('mock-token-123456');\n Message.success('登录成功');\n setTimeout(() => Router.push('index.html'), 1000);\n } else {\n Message.error('用户名或密码错误');\n }\n }\n </script>\n</body>\n</html>",
|
||
"src/pages/index.html": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>资产辅助系统 - 主页</title>\n <link rel=\"stylesheet\" href=\"../assets/css/common.css\">\n <link rel=\"stylesheet\" href=\"../assets/css/dark-theme.css\">\n <style>\n .header { height: 60px; background: #2c3e50; color: white; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }\n .sidebar { width: 200px; height: calc(100vh - 60px); background: #34495e; position: fixed; left: 0; top: 60px; }\n .menu-item { color: white; padding: 15px 20px; cursor: pointer; transition: background 0.3s; }\n .menu-item:hover { background: #2c3e50; }\n .main-content { margin-left: 200px; padding: 20px; min-height: calc(100vh - 60px); }\n </style>\n</head>\n<body>\n <!-- 公共组件会通过 app.js 自动渲染 -->\n <div class=\"main-content\">\n <h1>欢迎使用资产辅助系统</h1>\n <p>请选择左侧菜单进行操作</p>\n </div>\n\n <script type=\"module\" src=\"../assets/js/app.js\"></script>\n</body>\n</html>",
|
||
"src/pages/modules/dashboard.html": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>数据概览 - 资产辅助系统</title>\n <link rel=\"stylesheet\" href=\"../../assets/css/common.css\">\n <link rel=\"stylesheet\" href=\"../../assets/css/dark-theme.css\">\n <style>\n .dashboard-cards { display: flex; gap: 20px; margin-top: 20px; }\n .card { flex: 1; padding: 20px; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }\n .dark-theme .card { background: #2c3e50; color: white; }\n </style>\n</head>\n<body>\n <div class=\"main-content\">\n <h2>数据概览</h2>\n <div class=\"dashboard-cards\">\n <div class=\"card\">\n <h3>总资产数</h3>\n <p>1,286</p>\n </div>\n <div class=\"card\">\n <h3>在线设备</h3>\n <p>952</p>\n </div>\n <div class=\"card\">\n <h3>待处理工单</h3>\n <p>36</p>\n </div>\n </div>\n </div>\n\n <script type=\"module\" src=\"../../assets/js/app.js\"></script>\n</body>\n</html>",
|
||
"src/pages/modules/asset-list.html": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>资产列表 - 资产辅助系统</title>\n <link rel=\"stylesheet\" href=\"../../assets/css/common.css\">\n <link rel=\"stylesheet\" href=\"../../assets/css/dark-theme.css\">\n <style>\n .asset-table { width: 100%; border-collapse: collapse; margin-top: 20px; }\n .asset-table th, .asset-table td { padding: 12px; text-align: left; border-bottom: 1px solid #eee; }\n .dark-theme .asset-table th, .dark-theme .asset-table td { border-bottom-color: #34495e; }\n .asset-table th { background: #f5f5f5; }\n .dark-theme .asset-table th { background: #34495e; }\n .btn { padding: 6px 12px; border: none; border-radius: 4px; cursor: pointer; }\n .btn-detail { background: #3498db; color: white; }\n </style>\n</head>\n<body>\n <div class=\"main-content\">\n <h2>资产列表</h2>\n <table class=\"asset-table\">\n <thead>\n <tr>\n <th>资产ID</th>\n <th>资产名称</th>\n <th>资产类型</th>\n <th>状态</th>\n <th>操作</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>ASSET-001</td>\n <td>服务器-Web01</td>\n <td>服务器</td>\n <td>运行中</td>\n <td><button class=\"btn btn-detail\" onclick=\"goToDetail('ASSET-001')\">查看详情</button></td>\n </tr>\n <tr>\n <td>ASSET-002</td>\n <td>交换机-SW02</td>\n <td>网络设备</td>\n <td>运行中</td>\n <td><button class=\"btn btn-detail\" onclick=\"goToDetail('ASSET-002')\">查看详情</button></td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <script type=\"module\">\n import { Router } from '../../assets/js/core/router.js';\n window.goToDetail = function(assetId) {\n Router.push(`asset-detail.html?id=${assetId}`);\n }\n </script>\n <script type=\"module\" src=\"../../assets/js/app.js\"></script>\n</body>\n</html>",
|
||
"src/pages/modules/asset-detail.html": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>资产详情 - 资产辅助系统</title>\n <link rel=\"stylesheet\" href=\"../../assets/css/common.css\">\n <link rel=\"stylesheet\" href=\"../../assets/css/dark-theme.css\">\n <style>\n .asset-detail { margin-top: 20px; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }\n .dark-theme .asset-detail { background: #2c3e50; }\n .detail-item { margin-bottom: 15px; display: flex; }\n .detail-label { width: 120px; font-weight: bold; }\n .btn-back { margin-top: 20px; padding: 8px 16px; background: #3498db; color: white; border: none; border-radius: 4px; cursor: pointer; }\n </style>\n</head>\n<body>\n <div class=\"main-content\">\n <h2>资产详情</h2>\n <div class=\"asset-detail\">\n <div class=\"detail-item\">\n <div class=\"detail-label\">资产ID：</div>\n <div id=\"asset-id\">--</div>\n </div>\n <div class=\"detail-item\">\n <div class=\"detail-label\">资产名称：</div>\n <div id=\"asset-name\">--</div>\n </div>\n <div class=\"detail-item\">\n <div class=\"detail-label\">资产类型：</div>\n <div id=\"asset-type\">--</div>\n </div>\n <div class=\"detail-item\">\n <div class=\"detail-label\">购买日期：</div>\n <div>2024-01-15</div>\n </div>\n <div class=\"detail-item\">\n <div class=\"detail-label\">状态：</div>\n <div style=\"color: #27ae60;\">运行中</div>\n </div>\n </div>\n <button class=\"btn-back\" onclick=\"goBack()\">返回列表</button>\n </div>\n\n <script type=\"module\">\n import { Router } from '../../assets/js/core/router.js';\n\n // 获取资产ID参数\n function getAssetId() {\n const params = new URLSearchParams(window.location.search);\n return params.get('id') || '';\n }\n\n // 初始化详情数据\n function initDetail() {\n const assetId = getAssetId();\n if (!assetId) return;\n\n document.getElementById('asset-id').textContent = assetId;\n \n // 模拟根据ID获取资产名称和类型\n const assetMap = {\n 'ASSET-001': { name: '服务器-Web01', type: '服务器' },\n 'ASSET-002': { name: '交换机-SW02', type: '网络设备' }\n };\n\n const asset = assetMap[assetId] || { name: '未知资产', type: '未知类型' };\n document.getElementById('asset-name').textContent = asset.name;\n document.getElementById('asset-type').textContent = asset.type;\n }\n\n function goBack() {\n Router.push('asset-list.html');\n }\n\n // 初始化\n initDetail();\n </script>\n <script type=\"module\" src=\"../../assets/js/app.js\"></script>\n</body>\n</html>",
|
||
|
||
# 根目录文件
|
||
".gitignore": "# 依赖\nnode_modules/\n.pnp/\n.pnp.js\n\n# 构建产物\ndist/\n\n# 环境变量\n.env\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\n# 日志\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# 编辑器配置\n.idea/\n.vscode/\n*.swp\n*.swo\n\n# 操作系统文件\n.DS_Store\nThumbs.db",
|
||
"index.html": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>资产辅助系统</title>\n <!-- 自动跳转到登录页 -->\n <meta http-equiv=\"refresh\" content=\"0;url=src/pages/login.html\">\n</head>\n<body>\n <p>正在跳转到登录页... 如果没有自动跳转，请<a href=\"src/pages/login.html\">点击这里</a></p>\n</body>\n</html>",
|
||
"package.json": "{\n \"name\": \"asset-assistant-system\",\n \"version\": \"1.0.0\",\n \"description\": \"资产辅助管理系统\",\n \"main\": \"index.html\",\n \"scripts\": {\n \"dev\": \"serve\",\n \"build\": \"echo '构建脚本待实现'\",\n \"test\": \"echo '测试脚本待实现'\"\n },\n \"keywords\": [\"asset\", \"management\", \"system\"],\n \"author\": \"\",\n \"license\": \"MIT\",\n \"devDependencies\": {\n \"serve\": \"^14.2.3\"\n }\n}"
|
||
}
|
||
|
||
def create_project_structure():
|
||
"""创建项目目录结构和文件"""
|
||
try:
|
||
# 1. 创建根目录
|
||
PROJECT_ROOT.mkdir(exist_ok=True)
|
||
print(f"✅ 创建项目根目录: {PROJECT_ROOT}")
|
||
|
||
# 2. 创建所有子目录
|
||
for dir_path in DIRECTORIES:
|
||
full_dir_path = PROJECT_ROOT / dir_path
|
||
full_dir_path.mkdir(parents=True, exist_ok=True)
|
||
print(f"✅ 创建目录: {full_dir_path}")
|
||
|
||
# 3. 创建所有文件并写入初始内容
|
||
for file_path, content in FILES.items():
|
||
full_file_path = PROJECT_ROOT / file_path
|
||
# 确保文件所在目录存在（防止遗漏）
|
||
full_file_path.parent.mkdir(parents=True, exist_ok=True)
|
||
# 写入文件内容
|
||
with open(full_file_path, 'w', encoding='utf-8') as f:
|
||
f.write(content)
|
||
print(f"✅ 创建文件: {full_file_path}")
|
||
|
||
print("\n🎉 项目结构创建完成！")
|
||
print(f"📁 项目路径: {PROJECT_ROOT}")
|
||
print("\n💡 后续操作建议:")
|
||
print(" 1. 进入项目目录: cd asset-assistant-system")
|
||
print(" 2. 安装依赖: npm install")
|
||
print(" 3. 启动开发服务器: npm run dev")
|
||
print(" 4. 访问: http://localhost:3000")
|
||
|
||
except Exception as e:
|
||
print(f"\n❌ 创建项目结构时出错: {e}")
|
||
|
||
if __name__ == "__main__":
|
||
create_project_structure() |