fish/asset_assistant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add

Browse Source
This commit is contained in:
vipg
2025-11-12 17:24:55 +08:00
parent 8159f03e8c
commit 6dd4a9a41a
16 changed files with 0 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/asset-assistant-system/assets/css/common.css Normal file
View File

@@ -0,0 +1,14 @@
/* 通用样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

86
frontend/asset-assistant-system/assets/css/dark-theme.css Normal file
View File

@@ -0,0 +1,86 @@
/* 基础变量定义 */
: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;
}

48
frontend/asset-assistant-system/assets/js/app.js Normal file
View File

@@ -0,0 +1,48 @@
/* 应用入口 */
import { renderHeader } from './components/header.js';
import { renderSidebar } from './components/sidebar.js';
import { Auth } from './core/auth.js';
import { Router } from './core/router.js';
import { themeConfig } from './config/theme.js';
// 初始化应用
function initApp() {
// 检查登录状态
if (!Auth.isLogin() && window.location.pathname.indexOf('login.html') === -1) {
Router.push('/login.html');
return;
}
// 初始化主题
initTheme();
// 渲染公共组件（非登录页）
if (window.location.pathname.indexOf('login.html') === -1) {
renderCommonComponents();
}
}
// 初始化主题
function initTheme() {
const savedTheme = localStorage.getItem(themeConfig.themeStorageKey) || themeConfig.defaultTheme;
if (savedTheme === 'dark') {
document.body.classList.add(themeConfig.darkThemeClass);
}
}
// 渲染公共组件（头部和侧边栏）
function renderCommonComponents() {
const header = renderHeader();
const sidebar = renderSidebar();
document.body.appendChild(header);
document.body.appendChild(sidebar);
// 创建主内容区域
const mainContent = document.createElement('div');
mainContent.className = 'main-content';
document.body.appendChild(mainContent);
}
// 页面加载完成后初始化
window.addEventListener('DOMContentLoaded', initApp);

31
frontend/asset-assistant-system/assets/js/components/header.js Normal file
View File

@@ -0,0 +1,31 @@
/* 顶部导航组件 */
import { systemConfig } from '../config/system.js';
import { Auth } from '../core/auth.js';
import { themeConfig } from '../config/theme.js';
export function renderHeader() {
const header = document.createElement('div');
header.className = 'header';
header.innerHTML = `
<div class="app-name">${systemConfig.appName}</div>
<div class="header-actions">
<button onclick="toggleTheme()">切换主题</button>
<button onclick="Auth.logout()">退出登录</button>
</div>
`;
return header;
}
// 主题切换函数
function toggleTheme() {
const body = document.body;
if (body.classList.contains(themeConfig.darkThemeClass)) {
body.classList.remove(themeConfig.darkThemeClass);
localStorage.setItem(themeConfig.themeStorageKey, 'light');
} else {
body.classList.add(themeConfig.darkThemeClass);
localStorage.setItem(themeConfig.themeStorageKey, 'dark');
}
}

94
frontend/asset-assistant-system/assets/js/components/loading.js Normal file
View File

@@ -0,0 +1,94 @@
/**
* 全局加载动画组件
*/
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>
`);

177
frontend/asset-assistant-system/assets/js/components/sidebar.js Normal file
View File

@@ -0,0 +1,177 @@
/**
* 侧边栏菜单组件
*/
window.Sidebar = {
/**
* 初始化侧边栏
* @param {jQuery} container - 容器元素
*/
init(container) {
this.container = container;
this.collapse = localStorage.getItem(SystemConfig.menuCollapseKey) === 'true';
this.renderMenu();
this.bindEvents();
this.updateCollapseState();
},
/**
* 渲染菜单
*/
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>
`);

19
frontend/asset-assistant-system/assets/js/config/menu.js Normal file
View File

@@ -0,0 +1,19 @@
/**
* 系统菜单配置（支持多级菜单）
*/
window.MenuConfig = [
{
id: 'settings',
icon: '⚙️',
title: '系统设置',
url: 'modules/settings.html',
children: [
{
id: 'country',
icon: '🌎',
title: '国家管理',
url: 'modules/country.html'
}
]
}
];

24
frontend/asset-assistant-system/assets/js/config/system.js Normal file
View File

@@ -0,0 +1,24 @@
/**
* 系统核心配置
*/
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);
}

6
frontend/asset-assistant-system/assets/js/config/theme.js Normal file
View File

@@ -0,0 +1,6 @@
/* 主题配置 */
export const themeConfig = {
defaultTheme: 'light',
darkThemeClass: 'dark-theme',
themeStorageKey: 'asset_system_theme'
};

87
frontend/asset-assistant-system/assets/js/core/auth.js Normal file
View File

@@ -0,0 +1,87 @@
/**
* 权限验证核心模块
*/
window.Auth = {
/**
* 获取Token
*/
getToken() {
return localStorage.getItem(SystemConfig.tokenKey);
},
/**
* 设置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);
},
/**
* 移除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() {
this.removeToken();
window.location.href = '../pages/login.html';
}
};

25
frontend/asset-assistant-system/assets/js/core/loader.js Normal file
View File

@@ -0,0 +1,25 @@
/* 加载器 */
export const Loader = {
show() {
const loader = document.createElement('div');
loader.id = 'app-loader';
loader.style.cssText = `
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
`;
loader.innerHTML = '<div>加载中...</div>';
document.body.appendChild(loader);
},
hide() {
const loader = document.getElementById('app-loader');
if (loader) loader.remove();
}
};

121
frontend/asset-assistant-system/assets/js/core/message.js Normal file
View File

@@ -0,0 +1,121 @@
/**
* 全局消息提示组件
*/
window.Message = {
/**
* 消息容器初始化
*/
init() {
let container = $('#message-container');
if (!container.length) {
container = $('<div id="message-container" class="message-container"></div>');
$('body').append(container);
}
return container;
},
/**
* 创建消息元素（修复 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;
},
/**
* 显示消息
* @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;
z-index: 9999;
max-width: 300px;
}
</style>
`);

19
frontend/asset-assistant-system/assets/js/core/router.js Normal file
View File

@@ -0,0 +1,19 @@
/* 路由管理 */
import { Auth } from './auth.js';
import { systemConfig } from '../config/system.js';
export const Router = {
// 跳转页面
push(path) {
// 验证权限
if (path !== '/login' && !Auth.isLogin()) {
window.location.href = `${systemConfig.baseUrl}login.html`;
return;
}
window.location.href = `${systemConfig.baseUrl}${path.startsWith('/') ? path.slice(1) : path}`;
},
// 获取当前路径
getCurrentPath() {
return window.location.pathname.replace(systemConfig.baseUrl, '');
}
};