add
This commit is contained in:
vipg
@@ -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;
|
||||
}
|
||||
@@ -1,10 +1,94 @@
|
||||
/* 加载动画组件 */
|
||||
export function renderLoading() {
|
||||
const loading = document.createElement('div');
|
||||
loading.className = 'loading';
|
||||
loading.innerHTML = `
|
||||
<div class="spinner"></div>
|
||||
<div class="loading-text">加载中...</div>
|
||||
`;
|
||||
return loading;
|
||||
}
|
||||
/**
|
||||
* 全局加载动画组件
|
||||
*/
|
||||
window.Loading = {
|
||||
/**
|
||||
* 初始化加载容器
|
||||
*/
|
||||
init() {
|
||||
let container = $('#loading-container');
|
||||
if (!container.length) {
|
||||
container = $('<div id="loading-container" class="loading-container"></div>');
|
||||
const loadingHtml = `
|
||||
<div class="loading-mask"></div>
|
||||
<div class="loading-spinner">
|
||||
<div class="spinner"></div>
|
||||
<div class="loading-text">加载中...</div>
|
||||
</div>
|
||||
`;
|
||||
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(`
|
||||
<style>
|
||||
.loading-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 99999;
|
||||
}
|
||||
.loading-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
.loading-spinner {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
z-index: 1;
|
||||
}
|
||||
.spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 4px solid rgba(30, 136, 229, 0.3);
|
||||
border-top: 4px solid var(--primary-color);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.loading-text {
|
||||
color: var(--text-primary);
|
||||
font-size: 16px;
|
||||
}
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
`);
|
||||
@@ -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 => `
|
||||
<div class="menu-item" onclick="Router.push('${item.path}')">
|
||||
<i class="icon-${item.icon}"></i>
|
||||
<span>${item.name}</span>
|
||||
</div>
|
||||
`).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 = '<ul class="sidebar-menu">';
|
||||
|
||||
menuList.forEach(menu => {
|
||||
const hasChildren = menu.children && menu.children.length > 0;
|
||||
const isActive = window.location.pathname.includes(menu.url);
|
||||
|
||||
html += `<li class="menu-item ${hasChildren ? 'has-children' : ''} ${isActive ? 'active' : ''}" data-id="${menu.id}">`;
|
||||
|
||||
// 菜单标题
|
||||
html += `<div class="menu-title">`;
|
||||
html += `<span class="menu-icon">${menu.icon}</span>`;
|
||||
html += `<span class="menu-text">${menu.title}</span>`;
|
||||
if (hasChildren) {
|
||||
html += `<span class="menu-toggle ${this.collapse ? 'collapsed' : ''}">${this.collapse ? '+' : '-'}</span>`;
|
||||
}
|
||||
html += `</div>`;
|
||||
|
||||
// 子菜单
|
||||
if (hasChildren) {
|
||||
html += `<ul class="sub-menu ${this.collapse ? 'hidden' : ''}">`;
|
||||
html += this.generateMenuHtml(menu.children);
|
||||
html += `</ul>`;
|
||||
} else if (menu.url) {
|
||||
// 菜单项链接
|
||||
html += `<a href="${menu.url}" class="menu-link"></a>`;
|
||||
}
|
||||
|
||||
html += `</li>`;
|
||||
});
|
||||
|
||||
html += '</ul>';
|
||||
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(`
|
||||
<style>
|
||||
.sidebar {
|
||||
width: 240px;
|
||||
height: 100%;
|
||||
background-color: var(--bg-light-color);
|
||||
border-right: 1px solid var(--border-color);
|
||||
transition: width 0.3s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
.sidebar.collapsed {
|
||||
width: 60px;
|
||||
}
|
||||
.sidebar-menu {
|
||||
list-style: none;
|
||||
}
|
||||
.menu-item {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.menu-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
.menu-title:hover {
|
||||
background-color: var(--hover-color);
|
||||
}
|
||||
.menu-item.active .menu-title {
|
||||
background-color: var(--active-color);
|
||||
}
|
||||
.menu-icon {
|
||||
margin-right: 12px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.menu-text {
|
||||
flex: 1;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
.sidebar.collapsed .menu-text {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.menu-toggle {
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
.sub-menu {
|
||||
list-style: none;
|
||||
background-color: var(--bg-color);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.sub-menu.hidden {
|
||||
display: none;
|
||||
}
|
||||
.menu-link {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.main-content {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
transition: margin-left 0.3s ease;
|
||||
}
|
||||
.main-content.sidebar-collapsed {
|
||||
margin-left: -180px;
|
||||
}
|
||||
</style>
|
||||
`);
|
||||
@@ -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: []
|
||||
}
|
||||
];
|
||||
];
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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';
|
||||
}
|
||||
};
|
||||
};
|
||||
@@ -1,26 +1,121 @@
|
||||
/* 消息提示 */
|
||||
export const Message = {
|
||||
success(content) {
|
||||
this.showMessage(content, 'success');
|
||||
/**
|
||||
* 全局消息提示组件
|
||||
*/
|
||||
window.Message = {
|
||||
/**
|
||||
* 消息容器初始化
|
||||
*/
|
||||
init() {
|
||||
let container = $('#message-container');
|
||||
if (!container.length) {
|
||||
container = $('<div id="message-container" class="message-container"></div>');
|
||||
$('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 = $(`
|
||||
<div class="message message-${type}">
|
||||
<span class="message-icon">${config.icon}</span>
|
||||
<span class="message-content">${content}</span>
|
||||
</div>
|
||||
`);
|
||||
|
||||
// 设置样式（使用解析后的 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(`
|
||||
<style>
|
||||
@keyframes messageFadeIn {
|
||||
from { opacity: 0; transform: translateY(-10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes messageFadeOut {
|
||||
from { opacity: 1; transform: translateY(0); }
|
||||
to { opacity: 0; transform: translateY(-10px); }
|
||||
}
|
||||
.message-container {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
padding: 10px 20px;
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
z-index: 9998;
|
||||
transition: all 0.3s;
|
||||
`;
|
||||
message.style.backgroundColor = type === 'success' ? '#4CAF50' : '#f44336';
|
||||
message.textContent = content;
|
||||
document.body.appendChild(message);
|
||||
setTimeout(() => message.remove(), 3000);
|
||||
}
|
||||
};
|
||||
z-index: 9999;
|
||||
max-width: 300px;
|
||||
}
|
||||
</style>
|
||||
`);
|
||||
@@ -3,24 +3,187 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>资产辅助系统 - 主页</title>
|
||||
<link rel="stylesheet" href="../assets/css/common.css">
|
||||
<title>资产管理系统 - 主页</title>
|
||||
<!-- 引入外部依赖 -->
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
||||
<!-- 引入自定义配置和组件 -->
|
||||
<script src="../assets/js/config/system.js"></script>
|
||||
<script src="../assets/js/config/menu.js"></script>
|
||||
<script src="../assets/js/core/auth.js"></script>
|
||||
<script src="../assets/js/core/message.js"></script>
|
||||
<script src="../assets/js/core/loading.js"></script>
|
||||
<script src="../assets/js/components/sidebar.js"></script>
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" href="../assets/css/dark-theme.css">
|
||||
<link rel="stylesheet" href="../assets/css/common.css">
|
||||
<style>
|
||||
.header { height: 60px; background: #2c3e50; color: white; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }
|
||||
.sidebar { width: 200px; height: calc(100vh - 60px); background: #34495e; position: fixed; left: 0; top: 60px; }
|
||||
.menu-item { color: white; padding: 15px 20px; cursor: pointer; transition: background 0.3s; }
|
||||
.menu-item:hover { background: #2c3e50; }
|
||||
.main-content { margin-left: 200px; padding: 20px; min-height: calc(100vh - 60px); }
|
||||
.app-container {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
.header {
|
||||
height: 60px;
|
||||
background-color: var(--bg-light-color);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.logo-icon {
|
||||
font-size: 24px;
|
||||
color: var(--primary-color);
|
||||
margin-right: 10px;
|
||||
}
|
||||
.logo-text {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.username {
|
||||
margin-right: 15px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.logout-btn {
|
||||
background-color: var(--error-color);
|
||||
}
|
||||
.logout-btn:hover {
|
||||
background-color: #D32F2F;
|
||||
}
|
||||
.content-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.main-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
.page-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 公共组件会通过 app.js 自动渲染 -->
|
||||
<div class="main-content">
|
||||
<h1>欢迎使用资产辅助系统</h1>
|
||||
<p>请选择左侧菜单进行操作</p>
|
||||
<body class="dark-theme">
|
||||
<div class="app-container">
|
||||
<!-- 侧边栏 -->
|
||||
<div class="sidebar" id="sidebar"></div>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="content-wrapper">
|
||||
<!-- 顶部导航 -->
|
||||
<div class="header">
|
||||
<div class="logo">
|
||||
<span class="logo-icon">💎</span>
|
||||
<span class="logo-text">资产管理系统</span>
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<span class="username" id="username">管理员</span>
|
||||
<button class="btn logout-btn" id="logout-btn">退出登录</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 页面内容容器 -->
|
||||
<div class="main-content">
|
||||
<div class="page-container" id="page-container">
|
||||
<!-- 页面内容将通过路由加载 -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module" src="../assets/js/app.js"></script>
|
||||
<script>
|
||||
// 初始化前验证登录状态
|
||||
Auth.checkLogin();
|
||||
|
||||
$(document).ready(() => {
|
||||
// 初始化侧边栏
|
||||
Sidebar.init($('#sidebar'));
|
||||
|
||||
// 初始化页面加载（默认加载数据概览）
|
||||
const defaultUrl = 'modules/dashboard.html';
|
||||
loadPage(defaultUrl);
|
||||
|
||||
// 退出登录事件
|
||||
$('#logout-btn').on('click', () => {
|
||||
if (confirm('确定要退出登录吗？')) {
|
||||
Auth.logout();
|
||||
}
|
||||
});
|
||||
|
||||
// 菜单链接点击事件（拦截默认跳转，实现AJAX加载）
|
||||
$('#sidebar').on('click', '.menu-link', (e) => {
|
||||
e.preventDefault();
|
||||
const url = $(e.currentTarget).attr('href');
|
||||
if (url) {
|
||||
loadPage(url);
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 加载页面内容
|
||||
* @param {string} url - 页面URL
|
||||
*/
|
||||
function loadPage(url) {
|
||||
const container = $('#page-container');
|
||||
|
||||
try {
|
||||
Loading.show('加载页面中...');
|
||||
|
||||
// 加载页面内容
|
||||
container.load(url, (response, status, xhr) => {
|
||||
Loading.hide();
|
||||
|
||||
if (status === 'success') {
|
||||
// 更新浏览器历史记录
|
||||
history.pushState({ url }, '', url);
|
||||
Message.success('页面加载成功');
|
||||
} else {
|
||||
// 错误处理和重试
|
||||
container.html(`
|
||||
<div class="error-page card">
|
||||
<h3 style="color: var(--error-color); margin-bottom: 15px;">页面加载失败</h3>
|
||||
<p>错误信息: ${xhr.statusText}</p>
|
||||
<button class="btn btn-info" id="retry-btn" data-url="${url}">重试</button>
|
||||
</div>
|
||||
`);
|
||||
Message.error(`页面加载失败: ${xhr.statusText}`);
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
Loading.hide();
|
||||
Message.error('页面加载异常，请重试');
|
||||
console.error('页面加载错误:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 重试按钮事件
|
||||
$(document).on('click', '#retry-btn', (e) => {
|
||||
const url = $(e.currentTarget).data('url');
|
||||
loadPage(url);
|
||||
});
|
||||
|
||||
// 监听浏览器前进后退事件
|
||||
window.addEventListener('popstate', (e) => {
|
||||
if (e.state && e.state.url) {
|
||||
loadPage(e.state.url);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -3,49 +3,110 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>资产辅助系统 - 登录</title>
|
||||
<link rel="stylesheet" href="../assets/css/common.css">
|
||||
<title>资产管理系统 - 登录</title>
|
||||
<!-- 引入外部依赖 -->
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
||||
<!-- 引入自定义配置和组件 -->
|
||||
<script src="../assets/js/config/system.js"></script>
|
||||
<script src="../assets/js/core/auth.js"></script>
|
||||
<script src="../assets/js/core/message.js"></script>
|
||||
<script src="../assets/js/core/loading.js"></script>
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" href="../assets/css/dark-theme.css">
|
||||
<link rel="stylesheet" href="../assets/css/common.css">
|
||||
<style>
|
||||
.login-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
padding: 20px;
|
||||
}
|
||||
.login-card {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
background-color: var(--bg-light-color);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
|
||||
padding: 30px;
|
||||
}
|
||||
.login-header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.login-title {
|
||||
font-size: 24px;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.login-desc {
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.form-label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
font-size: 16px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="login-form">
|
||||
<h2>资产辅助系统</h2>
|
||||
<div class="form-group">
|
||||
<label>用户名</label>
|
||||
<input type="text" id="username" placeholder="请输入用户名">
|
||||
<body class="dark-theme">
|
||||
<div class="login-container">
|
||||
<div class="login-card">
|
||||
<div class="login-header">
|
||||
<h2 class="login-title">资产管理系统</h2>
|
||||
<p class="login-desc">金融资产一站式管理平台</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>密码</label>
|
||||
<input type="password" id="password" placeholder="请输入密码">
|
||||
</div>
|
||||
<button onclick="handleLogin()">登录</button>
|
||||
<form id="login-form">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="username">用户名</label>
|
||||
<input type="text" id="username" class="input" placeholder="请输入用户名" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="password">密码</label>
|
||||
<input type="password" id="password" class="input" placeholder="请输入密码" required>
|
||||
</div>
|
||||
<button type="submit" class="btn login-btn">登录</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
import { Auth } from '../assets/js/core/auth.js';
|
||||
import { Router } from '../assets/js/core/router.js';
|
||||
import { Message } from '../assets/js/core/message.js';
|
||||
|
||||
function handleLogin() {
|
||||
const username = document.getElementById('username').value;
|
||||
const password = document.getElementById('password').value;
|
||||
|
||||
<script>
|
||||
// 登录表单提交事件
|
||||
$('#login-form').on('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const username = $('#username').val().trim();
|
||||
const password = $('#password').val().trim();
|
||||
|
||||
if (!username || !password) {
|
||||
Message.error('用户名和密码不能为空');
|
||||
Message.error('账号和密码不能为空');
|
||||
return;
|
||||
}
|
||||
|
||||
// 模拟登录验证
|
||||
if (username === 'admin' && password === '123456') {
|
||||
Auth.login('mock-token-123456');
|
||||
Message.success('登录成功');
|
||||
setTimeout(() => Router.push('index.html'), 1000);
|
||||
} else {
|
||||
Message.error('用户名或密码错误');
|
||||
|
||||
try {
|
||||
Loading.show('正在登录...');
|
||||
const result = await Auth.login(username, password);
|
||||
Message.success(result.message);
|
||||
setTimeout(() => {
|
||||
window.location.href = 'index.html';
|
||||
}, 1000);
|
||||
} catch (error) {
|
||||
Message.error(error.message || '登录失败，请重试');
|
||||
} finally {
|
||||
Loading.hide();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,36 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>数据概览 - 资产辅助系统</title>
|
||||
<link rel="stylesheet" href="../../assets/css/common.css">
|
||||
<link rel="stylesheet" href="../../assets/css/dark-theme.css">
|
||||
<style>
|
||||
.dashboard-cards { display: flex; gap: 20px; margin-top: 20px; }
|
||||
.card { flex: 1; padding: 20px; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
|
||||
.dark-theme .card { background: #2c3e50; color: white; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="main-content">
|
||||
<div class="dashboard-container">
|
||||
<div class="page-header">
|
||||
<h2>数据概览</h2>
|
||||
<div class="dashboard-cards">
|
||||
<div class="card">
|
||||
<h3>总资产数</h3>
|
||||
<p>1,286</p>
|
||||
<p class="page-desc">实时监控您的资产状况</p>
|
||||
</div>
|
||||
|
||||
<div class="stats-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 30px;">
|
||||
<div class="stat-card card">
|
||||
<div class="stat-header">
|
||||
<h3>总资产估值</h3>
|
||||
<span class="stat-icon" style="color: var(--primary-color); font-size: 20px;">💰</span>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>在线设备</h3>
|
||||
<p>952</p>
|
||||
<div class="stat-value" style="font-size: 24px; font-weight: bold; margin: 15px 0;">¥ 12,580,450.00</div>
|
||||
<div class="stat-trend" style="color: var(--success-color);">
|
||||
<span>↑ 2.3%</span>
|
||||
<span style="color: var(--text-secondary); font-size: 12px; margin-left: 5px;">较上月</span>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>待处理工单</h3>
|
||||
<p>36</p>
|
||||
</div>
|
||||
|
||||
<div class="stat-card card">
|
||||
<div class="stat-header">
|
||||
<h3>可用现金</h3>
|
||||
<span class="stat-icon" style="color: var(--success-color); font-size: 20px;">💵</span>
|
||||
</div>
|
||||
<div class="stat-value" style="font-size: 24px; font-weight: bold; margin: 15px 0;">¥ 3,245,680.00</div>
|
||||
<div class="stat-trend" style="color: var(--success-color);">
|
||||
<span>↑ 1.8%</span>
|
||||
<span style="color: var(--text-secondary); font-size: 12px; margin-left: 5px;">较上月</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card card">
|
||||
<div class="stat-header">
|
||||
<h3>投资资产</h3>
|
||||
<span class="stat-icon" style="color: var(--info-color); font-size: 20px;">📈</span>
|
||||
</div>
|
||||
<div class="stat-value" style="font-size: 24px; font-weight: bold; margin: 15px 0;">¥ 9,334,770.00</div>
|
||||
<div class="stat-trend" style="color: var(--success-color);">
|
||||
<span>↑ 2.5%</span>
|
||||
<span style="color: var(--text-secondary); font-size: 12px; margin-left: 5px;">较上月</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-container card">
|
||||
<h3>资产分布</h3>
|
||||
<div style="height: 300px; margin-top: 20px; display: flex; justify-content: center; align-items: center; border: 1px dashed var(--border-color); border-radius: 8px;">
|
||||
<p style="color: var(--text-secondary);">图表区域（实际项目可集成ECharts/Chart.js）</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module" src="../../assets/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
<script>
|
||||
// 页面加载完成后执行
|
||||
$(document).ready(() => {
|
||||
console.log('数据概览页面加载完成');
|
||||
// 实际项目中可在此初始化图表、加载数据等
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user