From f5277b087b3d834aed785e334142543ffbd1bf84 Mon Sep 17 00:00:00 2001 From: vipg Date: Wed, 12 Nov 2025 16:50:19 +0800 Subject: [PATCH] add --- .../src/assets/css/dark-theme.css | 89 +++++++- .../src/assets/js/components/loading.js | 104 +++++++++- .../src/assets/js/components/sidebar.js | 194 ++++++++++++++++-- .../src/assets/js/config/menu.js | 77 ++++++- .../src/assets/js/config/system.js | 29 ++- .../src/assets/js/core/auth.js | 95 +++++++-- .../src/assets/js/core/message.js | 137 +++++++++++-- .../src/pages/index.html | 189 +++++++++++++++-- .../src/pages/login.html | 127 +++++++++--- .../src/pages/modules/dashboard.html | 81 +++++--- 10 files changed, 964 insertions(+), 158 deletions(-) diff --git a/frontend/asset-assistant-system/src/assets/css/dark-theme.css b/frontend/asset-assistant-system/src/assets/css/dark-theme.css index 2db1143..2622fd2 100644 --- a/frontend/asset-assistant-system/src/assets/css/dark-theme.css +++ b/frontend/asset-assistant-system/src/assets/css/dark-theme.css @@ -1,5 +1,86 @@ -/* 暗夜模式主题样式 */ -body.dark-theme { - background-color: #1e1e1e; - color: #f5f5f5; +/* 基础变量定义 */ +:root { + --primary-color: #1E88E5; /* 主色调（金融蓝） */ + --secondary-color: #263238; /* 次要色调 */ + --bg-color: #121212; /* 背景色 */ + --bg-light-color: #1E1E1E; /* 浅色背景 */ + --text-primary: #E0E0E0; /* 主要文字色 */ + --text-secondary: #9E9E9E; /* 次要文字色 */ + --border-color: #333333; /* 边框色 */ + --hover-color: #2D2D2D; /* hover色 */ + --active-color: #1976D2; /* 激活色 */ + --success-color: #4CAF50; /* 成功色 */ + --error-color: #F44336; /* 错误色 */ + --info-color: #2196F3; /* 信息色 */ } + +/* 全局样式重置 */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body.dark-theme { + background-color: var(--bg-color); + color: var(--text-primary); + font-family: 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif; +} + +/* 通用组件样式 */ +.container { + width: 100%; + height: 100%; +} + +/* 按钮样式 */ +.btn { + background-color: var(--primary-color); + color: white; + border: none; + padding: 8px 16px; + border-radius: 4px; + cursor: pointer; + transition: all 0.3s ease; +} + +.btn:hover { + background-color: var(--active-color); +} + +.btn-success { + background-color: var(--success-color); +} + +.btn-error { + background-color: var(--error-color); +} + +.btn-info { + background-color: var(--info-color); +} + +/* 输入框样式 */ +.input { + background-color: var(--bg-light-color); + border: 1px solid var(--border-color); + color: var(--text-primary); + padding: 8px 12px; + border-radius: 4px; + width: 100%; + transition: border 0.3s ease; +} + +.input:focus { + outline: none; + border-color: var(--primary-color); +} + +/* 卡片样式 */ +.card { + background-color: var(--bg-light-color); + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); + padding: 20px; + margin-bottom: 20px; +} \ No newline at end of file diff --git a/frontend/asset-assistant-system/src/assets/js/components/loading.js b/frontend/asset-assistant-system/src/assets/js/components/loading.js index eb6d948..30e089f 100644 --- a/frontend/asset-assistant-system/src/assets/js/components/loading.js +++ b/frontend/asset-assistant-system/src/assets/js/components/loading.js @@ -1,10 +1,94 @@ -/* 加载动画组件 */ -export function renderLoading() { - const loading = document.createElement('div'); - loading.className = 'loading'; - loading.innerHTML = ` - -
加载中...
- `; - return loading; -} +/** + * 全局加载动画组件 + */ +window.Loading = { + /** + * 初始化加载容器 + */ + init() { + let container = $('#loading-container'); + if (!container.length) { + container = $('
'); + const loadingHtml = ` +
+ + `; + container.html(loadingHtml); + $('body').append(container); + } + return container; + }, + + /** + * 显示加载动画 + * @param {string} text - 加载提示文本 + */ + show(text = '加载中...') { + const container = this.init(); + container.find('.loading-text').text(text); + container.css('display', 'flex'); + }, + + /** + * 隐藏加载动画 + */ + hide() { + const container = $('#loading-container'); + if (container.length) { + container.css('display', 'none'); + } + } +}; + +// 添加加载动画样式 +$('head').append(` + +`); \ No newline at end of file diff --git a/frontend/asset-assistant-system/src/assets/js/components/sidebar.js b/frontend/asset-assistant-system/src/assets/js/components/sidebar.js index af3febb..e23d00b 100644 --- a/frontend/asset-assistant-system/src/assets/js/components/sidebar.js +++ b/frontend/asset-assistant-system/src/assets/js/components/sidebar.js @@ -1,19 +1,177 @@ -/* 侧边栏组件 */ -import { menuConfig } from '../config/menu.js'; -import { Router } from '../core/router.js'; +/** + * 侧边栏菜单组件 + */ +window.Sidebar = { + /** + * 初始化侧边栏 + * @param {jQuery} container - 容器元素 + */ + init(container) { + this.container = container; + this.collapse = localStorage.getItem(SystemConfig.menuCollapseKey) === 'true'; + this.renderMenu(); + this.bindEvents(); + this.updateCollapseState(); + }, -export function renderSidebar() { - const sidebar = document.createElement('div'); - sidebar.className = 'sidebar'; - - // 渲染菜单 - const menuHtml = menuConfig.map(item => ` -
- - ${item.name} -
- `).join(''); - - sidebar.innerHTML = menuHtml; - return sidebar; -} + /** + * 渲染菜单 + */ + renderMenu() { + const menuHtml = this.generateMenuHtml(MenuConfig); + this.container.html(menuHtml); + }, + + /** + * 生成菜单HTML（递归处理多级菜单） + * @param {array} menuList - 菜单列表 + * @returns {string} - 菜单HTML + */ + generateMenuHtml(menuList) { + let html = ''; + return html; + }, + + /** + * 绑定事件 + */ + bindEvents() { + // 菜单折叠/展开 + this.container.on('click', '.menu-toggle', (e) => { + const $toggle = $(e.currentTarget); + const $subMenu = $toggle.closest('.menu-item').find('.sub-menu'); + + this.collapse = !this.collapse; + localStorage.setItem(SystemConfig.menuCollapseKey, this.collapse); + + $toggle.text(this.collapse ? '+' : '-'); + $subMenu.toggleClass('hidden', this.collapse); + this.updateCollapseState(); + }); + + // 菜单项点击（无链接时展开子菜单） + this.container.on('click', '.menu-title:not(.has-children)', (e) => { + const $title = $(e.currentTarget); + const $link = $title.siblings('.menu-link'); + if ($link.length) { + $link[0].click(); + } + }); + }, + + /** + * 更新折叠状态样式 + */ + updateCollapseState() { + $('.sidebar').toggleClass('collapsed', this.collapse); + $('.main-content').toggleClass('sidebar-collapsed', this.collapse); + } +}; + +// 添加侧边栏样式 +$('head').append(` + +`); \ No newline at end of file diff --git a/frontend/asset-assistant-system/src/assets/js/config/menu.js b/frontend/asset-assistant-system/src/assets/js/config/menu.js index 17e3e0c..22b880b 100644 --- a/frontend/asset-assistant-system/src/assets/js/config/menu.js +++ b/frontend/asset-assistant-system/src/assets/js/config/menu.js @@ -1,15 +1,70 @@ -/* 菜单配置 */ -export const menuConfig = [ +/** + * 系统菜单配置（支持多级菜单） + */ +window.MenuConfig = [ { - path: '/dashboard', - name: '数据概览', - icon: 'dashboard', - auth: true + id: 'dashboard', + icon: '📊', + title: '数据概览', + url: 'modules/dashboard.html', + children: [] }, { - path: '/asset-list', - name: '资产列表', - icon: 'assets', - auth: true + id: 'asset', + icon: '💎', + title: '资产管理', + url: '', + children: [ + { + id: 'asset-list', + icon: '📋', + title: '资产列表', + url: 'modules/asset-list.html', + children: [] + }, + { + id: 'asset-detail', + icon: '🔍', + title: '资产详情', + url: 'modules/asset-detail.html', + children: [] + } + ] + }, + { + id: 'transaction', + icon: '💱', + title: '交易记录', + url: 'modules/transaction.html', + children: [] + }, + { + id: 'report', + icon: '📈', + title: '报表分析', + url: '', + children: [ + { + id: 'report-daily', + icon: '📅', + title: '日报表', + url: 'modules/report-daily.html', + children: [] + }, + { + id: 'report-monthly', + icon: '📆', + title: '月报表', + url: 'modules/report-monthly.html', + children: [] + } + ] + }, + { + id: 'settings', + icon: '⚙️', + title: '系统设置', + url: 'modules/settings.html', + children: [] } -]; +]; \ No newline at end of file diff --git a/frontend/asset-assistant-system/src/assets/js/config/system.js b/frontend/asset-assistant-system/src/assets/js/config/system.js index f9f091f..b9c0d57 100644 --- a/frontend/asset-assistant-system/src/assets/js/config/system.js +++ b/frontend/asset-assistant-system/src/assets/js/config/system.js @@ -1,7 +1,24 @@ -/* 系统配置 */ -export const systemConfig = { - appName: '资产辅助系统', - version: '1.0.0', - baseUrl: '/', - timeout: 5000 +/** + * 系统核心配置 + */ +window.SystemConfig = { + // 接口基础路径（实际项目替换为真实接口地址） + baseApi: 'https://api.asset-management.com', + // Token存储键名 + tokenKey: 'asset_management_token', + // Token过期时间（单位：小时） + tokenExpire: 24, + // 页面加载失败重试次数 + retryCount: 2, + // 消息提示默认时长（单位：毫秒） + messageDuration: 3000, + // 菜单折叠状态存储键名 + menuCollapseKey: 'asset_menu_collapse', + // 是否开启调试模式 + debug: true }; + +// 打印调试信息 +if (SystemConfig.debug) { + console.log('系统配置初始化完成：', SystemConfig); +} \ No newline at end of file diff --git a/frontend/asset-assistant-system/src/assets/js/core/auth.js b/frontend/asset-assistant-system/src/assets/js/core/auth.js index dfa1769..f37ce75 100644 --- a/frontend/asset-assistant-system/src/assets/js/core/auth.js +++ b/frontend/asset-assistant-system/src/assets/js/core/auth.js @@ -1,18 +1,87 @@ -/* 权限验证 */ -import { systemConfig } from '../config/system.js'; +/** + * 权限验证核心模块 + */ +window.Auth = { + /** + * 获取Token + */ + getToken() { + return localStorage.getItem(SystemConfig.tokenKey); + }, -export const Auth = { - // 检查是否登录 - isLogin() { - return localStorage.getItem('token') !== null; + /** + * 设置Token + * @param {string} token - 认证令牌 + */ + setToken(token) { + localStorage.setItem(SystemConfig.tokenKey, token); + // 设置过期时间（可选） + const expireTime = new Date().getTime() + SystemConfig.tokenExpire * 60 * 60 * 1000; + localStorage.setItem(`${SystemConfig.tokenKey}_expire`, expireTime); }, - // 登录 - login(token) { - localStorage.setItem('token', token); + + /** + * 移除Token + */ + removeToken() { + localStorage.removeItem(SystemConfig.tokenKey); + localStorage.removeItem(`${SystemConfig.tokenKey}_expire`); }, - // 退出登录 + + /** + * 验证Token是否有效 + */ + isValidToken() { + const token = this.getToken(); + if (!token) return false; + + // 验证过期时间 + const expireTime = localStorage.getItem(`${SystemConfig.tokenKey}_expire`); + if (expireTime && new Date().getTime() > expireTime) { + this.removeToken(); + return false; + } + + return true; + }, + + /** + * 登录验证拦截 + * 未登录自动跳转到登录页 + */ + checkLogin() { + if (!this.isValidToken()) { + window.location.href = '../pages/login.html'; + } + }, + + /** + * 登录请求 + * @param {string} username - 用户名 + * @param {string} password - 密码 + * @returns {Promise} - 登录结果 + */ + login(username, password) { + return new Promise((resolve, reject) => { + // 模拟接口请求（实际项目替换为真实接口） + setTimeout(() => { + // 简单验证（实际项目需要后端验证） + if (username && password) { + const token = `TOKEN_${new Date().getTime()}_${username}`; + this.setToken(token); + resolve({ success: true, token, message: '登录成功' }); + } else { + reject({ success: false, message: '账号或密码不能为空' }); + } + }, 800); + }); + }, + + /** + * 退出登录 + */ logout() { - localStorage.removeItem('token'); - window.location.href = `${systemConfig.baseUrl}login.html`; + this.removeToken(); + window.location.href = '../pages/login.html'; } -}; +}; \ No newline at end of file diff --git a/frontend/asset-assistant-system/src/assets/js/core/message.js b/frontend/asset-assistant-system/src/assets/js/core/message.js index 4912bd7..be25e28 100644 --- a/frontend/asset-assistant-system/src/assets/js/core/message.js +++ b/frontend/asset-assistant-system/src/assets/js/core/message.js @@ -1,26 +1,121 @@ -/* 消息提示 */ -export const Message = { - success(content) { - this.showMessage(content, 'success'); +/** + * 全局消息提示组件 + */ +window.Message = { + /** + * 消息容器初始化 + */ + init() { + let container = $('#message-container'); + if (!container.length) { + container = $('
'); + $('body').append(container); + } + return container; }, - error(content) { - this.showMessage(content, 'error'); + + /** + * 创建消息元素（修复 CSS 变量引用问题） + * @param {string} content - 消息内容 + * @param {string} type - 消息类型（success/error/info） + * @returns {jQuery} - 消息元素 + */ + createMessage(content, type) { + // 存储 CSS 变量名，而非直接使用 var() + const typeMap = { + success: { icon: '✓', cssVar: '--success-color' }, + error: { icon: '✗', cssVar: '--error-color' }, + info: { icon: 'i', cssVar: '--info-color' } + }; + const config = typeMap[type] || typeMap.info; + + // 关键：通过 JS 获取 CSS 变量的实际值 + const rootElement = document.documentElement; + const computedStyle = getComputedStyle(rootElement); + const themeColor = computedStyle.getPropertyValue(config.cssVar).trim(); // 解析 CSS 变量 + + const message = $(` +
+ ${config.icon} + ${content} +
+ `); + + // 设置样式（使用解析后的 CSS 变量值） + message.css({ + backgroundColor: computedStyle.getPropertyValue('--bg-light-color').trim(), + borderLeft: `4px solid ${themeColor}`, + color: computedStyle.getPropertyValue('--text-primary').trim(), + padding: '12px 16px', + borderRadius: '4px', + boxShadow: '0 2px 8px rgba(0,0,0,0.3)', + marginBottom: '8px', + display: 'flex', + alignItems: 'center', + animation: 'messageFadeIn 0.3s ease' + }); + + message.find('.message-icon').css({ + color: themeColor, + marginRight: '8px', + fontWeight: 'bold' + }); + + return message; }, - showMessage(content, type) { - const message = document.createElement('div'); - message.style.cssText = ` + + /** + * 显示消息 + * @param {string} content - 消息内容 + * @param {string} type - 消息类型（success/error/info） + * @param {number} duration - 显示时长（毫秒） + */ + show(content, type = 'info', duration = SystemConfig.messageDuration) { + const container = this.init(); + const message = this.createMessage(content, type); + + container.append(message); + + // 自动关闭 + setTimeout(() => { + message.css({ animation: 'messageFadeOut 0.3s ease' }); + setTimeout(() => { + message.remove(); + }, 300); + }, duration); + }, + + // 快捷方法 + success(content, duration) { + this.show(content, 'success', duration); + }, + + error(content, duration) { + this.show(content, 'error', duration); + }, + + info(content, duration) { + this.show(content, 'info', duration); + } +}; + +// 添加动画样式 +$('head').append(` + +`); \ No newline at end of file diff --git a/frontend/asset-assistant-system/src/pages/index.html b/frontend/asset-assistant-system/src/pages/index.html index 0205b47..e4641ca 100644 --- a/frontend/asset-assistant-system/src/pages/index.html +++ b/frontend/asset-assistant-system/src/pages/index.html @@ -3,24 +3,187 @@ - 资产辅助系统 - 主页 - + 资产管理系统 - 主页 + + + + + + + + + + + - - -
-

欢迎使用资产辅助系统

-

请选择左侧菜单进行操作

+ +
+ + + + +
+ +
+ + +
+ + +
+
+ +
+
+
- + \ No newline at end of file diff --git a/frontend/asset-assistant-system/src/pages/login.html b/frontend/asset-assistant-system/src/pages/login.html index dcd1764..bc3df11 100644 --- a/frontend/asset-assistant-system/src/pages/login.html +++ b/frontend/asset-assistant-system/src/pages/login.html @@ -3,49 +3,110 @@ - 资产辅助系统 - 登录 - + 资产管理系统 - 登录 + + + + + + + + + + - -
-