游铛铛-管理端原型图.md 55 KB
游铛铛管理端原型图设计
一、登录界面
┌─────────────────────────────────────────────────────────────┐
│ │
│ [游铛铛 Logo] │
│ │
│ 游铛铛管理后台 │
│ │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 管理员登录 │ │
│ │ │ │
│ │ 用户名: [________________________] │ │
│ │ │ │
│ │ 密码: [________________________] [👁️] │ │
│ │ │ │
│ │ ☑️ 记住密码 │ │
│ │ │ │
│ │ [ 登录 ] │ │
│ │ │ │
│ │ [忘记密码？] │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
├─────────────────────────────────────────────────────────────┤
│ © 2024 游铛铛 版权所有 │
└─────────────────────────────────────────────────────────────┘
登录界面功能说明：
- 顶部区域：产品Logo、产品名称
- 登录表单：
- 用户名输入框
- 密码输入框（支持显示/隐藏）
- 记住密码复选框
- 登录按钮
- 忘记密码链接
- 底部区域：版权信息
二、主布局界面
┌─────────────────────────────────────────────────────────────────────────────┐
│ [游铛铛 Logo] 游铛铛管理后台 │ 管理员：admin │ [退出] [个人设置] │
├──────────┬──────────────────────────────────────────────────────────────────┤
│ │ │
│ ┌─────┐ │ ┌────────────────────────────────────────────────────────────┐ │
│ │ 用 │ │ │ │ │
│ │ 户 │ │ │ 当前页面内容区域 │ │
│ │ 管 │ │ │ │ │
│ │ 理 │ │ │ 根据左侧菜单点击，动态加载对应的页面内容 │ │
│ ├─────┤ │ │ │ │
│ │ 软 │ │ │ │ │
│ │ 件 │ │ │ │ │
│ │ 管 │ │ │ │ │
│ │ 理 │ │ │ │ │
│ ├─────┤ │ │ │ │
│ │ 卡 │ │ │ │ │
│ │ 密 │ │ │ │ │
│ │ 管 │ │ │ │ │
│ │ 理 │ │ │ │ │
│ ├─────┤ │ │ │ │
│ │ 密 │ │ │ │ │
│ │ 钥 │ │ │ │ │
│ │ 管 │ │ │ │ │
│ │ 理 │ │ │ │ │
│ ├─────┤ │ │ │ │
│ │ 日 │ │ │ │ │
│ │ 志 │ │ │ │ │
│ │ 管 │ │ │ │ │
│ │ 理 │ │ │ │ │
│ ├─────┤ │ │ │ │
│ │ 公 │ │ │ │ │
│ │ 告 │ │ │ │ │
│ │ 管 │ │ │ │ │
│ │ 理 │ │ │ │ │
│ ├─────┤ │ │ │ │
│ │ 管 │ │ │ │ │
│ │ 理 │ │ │ │ │
│ │ 员 │ │ │ │ │
│ │ 管 │ │ │ │ │
│ │ 理 │ │ │ │ │
│ │ │ │ │ │ │
│ └─────┘ │ └────────────────────────────────────────────────────────────┘ │
│ │ │
│ 左侧 │ 右侧内容区域（路由页面） │
│ 菜单 │ │
└──────────┴──────────────────────────────────────────────────────────────────┘
主布局界面功能说明：
2.1 头部区域
- 左侧：产品Logo + 产品名称
- 中间：当前登录管理员用户名
- 右侧：退出按钮 + 个人设置按钮
2.2 内容区域
左侧菜单（固定宽度，可折叠）：
- 用户管理
- 软件管理
- 卡密管理
- 密钥管理
- 日志管理
- 公告管理
- 管理员管理
右侧内容区域（动态加载）：
- 点击左侧菜单项，在右侧加载对应的页面内容
- 支持路由导航，浏览器前进/后退功能
三、各功能模块详细界面
3.1 用户管理模块
┌─────────────────────────────────────────────────────────────┐
│ 用户管理 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 搜索: [________________________] [搜索] [重置] │
│ │
│ 筛选: [注册时间 ▼] [有效期状态 ▼] [机器码 ▼] │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 用户列表 │ │
│ │ │ │
│ │ ┌───────────────────────────────────────────────┐ │ │
│ │ │ 用户名 邮箱 注册时间 机器码 │ │ │
│ │ │ 有效期 │ │ │
│ │ ├───────────────────────────────────────────────┤ │ │
│ │ │ testuser test@qq.com 2024-01-15 ABC123 │ │ │
│ │ │ 2024-12-31 23:59:59 │ │ │
│ │ │ [查看详情] [禁用] [删除] │ │ │
│ │ ├───────────────────────────────────────────────┤ │ │
│ │ │ user001 user@qq.com 2024-01-10 XYZ789 │ │ │
│ │ │ 已过期 │ │ │
│ │ │ [查看详情] [启用] [删除] │ │ │
│ │ └───────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ 共 156 条记录 [上一页] [1] [2] [3] ... [下一页] │ │
│ │ │ │
│ │ [导出Excel] │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 用户详情（弹窗） │ │
│ │ │ │
│ │ 用户名: testuser │ │
│ │ 邮箱: test@qq.com │ │
│ │ 注册时间: 2024-01-15 10:30:00 │ │
│ │ 机器码: ABC123-DEF456-GHI789 │ │
│ │ 当前有效期: 2024-12-31 23:59:59 │ │
│ │ 状态: 正常 │ │
│ │ │ │
│ │ 卡密激活记录: │ │
│ │ 日期 卡密 天数 到期时间 │ │
│ │ 2024-01-15 XXXX-XXXX-XXXX 30天 2024-02-14 │ │
│ │ │ │
│ │ [ 关闭 ] │ │
│ └─────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
3.2 软件管理模块
┌─────────────────────────────────────────────────────────────┐
│ 软件管理 │
├─────────────────────────────────────────────────────────────┤
│ │
│ [+ 添加软件] │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 软件列表 │ │
│ │ │ │
│ │ ┌───────────────────────────────────────────────┐ │ │
│ │ │ 软件名称 特征码 收费基数 │ │ │
│ │ │ 状态 创建时间 操作 │ │ │
│ │ ├───────────────────────────────────────────────┤ │ │
│ │ │ Buff扫货 buff-xp-steam-sh ¥10.00/天 │ │ │
│ │ │ 启用 2024-01-01 10:00:00 [编辑] [删除] │ │ │
│ │ ├───────────────────────────────────────────────┤ │ │
│ │ │ Steam选品 steam-xp-select ¥8.00/天 │ │ │
│ │ │ 启用 2024-01-02 11:00:00 [编辑] [删除] │ │ │
│ │ ├───────────────────────────────────────────────┤ │ │
│ │ │ 测试软件 test-software-001 ¥5.00/天 │ │ │
│ │ │ 禁用 2024-01-03 12:00:00 [编辑] [删除] │ │ │
│ │ └───────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 添加/编辑软件（弹窗） │ │
│ │ │ │
│ │ 软件名称: [________________________] │ │
│ │ │ │
│ │ 特征码: [________________________] │ │
│ │ （如：buff-xp-steam-sh） │ │
│ │ │ │
│ │ 收费基数: [____] 元/天 │ │
│ │ │ │
│ │ 状态: ○ 启用 ○ 禁用 │ │
│ │ │ │
│ │ 备注: [________________________] │ │
│ │ [________________________] │ │
│ │ │ │
│ │ [ 保存 ] [ 取消 ] │ │
│ └─────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
3.3 卡密管理模块
3.3.1 卡密生成
┌─────────────────────────────────────────────────────────────┐
│ 卡密管理 > 卡密生成 │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 生成卡密 │ │
│ │ │ │
│ │ 选择软件: [Buff扫货 (buff-xp-steam-sh) ▼] │ │
│ │ │ │
│ │ 天数: [____] 天 │ │
│ │ │ │
│ │ 折扣: [____] % （0-100，100表示无折扣） │ │
│ │ │ │
│ │ 生成数量: [____] 张 │ │
│ │ │ │
│ │ 说明: │ │
│ │ - 天数：卡密激活后的有效天数 │ │
│ │ - 折扣：实际价格 = 收费基数 × 天数 × (1 - 折扣%) │ │
│ │ - 批量生成：最多一次生成1000张 │ │
│ │ │ │
│ │ [ 生成卡密 ] │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 生成结果 │ │
│ │ │ │
│ │ 成功生成 50 张卡密 │ │
│ │ │ │
│ │ ┌───────────────────────────────────────────────┐ │ │
│ │ │ XXXX-XXXX-XXXX-XXXX │ │ │
│ │ │ YYYY-YYYY-YYYY-YYYY │ │ │
│ │ │ ZZZZ-ZZZZ-ZZZZ-ZZZZ │ │ │
│ │ │ ... │ │ │
│ │ └───────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ [复制全部] [导出Excel] [导出TXT] │ │
│ └─────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
3.3.2 卡密列表
┌─────────────────────────────────────────────────────────────┐
│ 卡密管理 > 卡密列表 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 搜索: [________________________] [搜索] [重置] │
│ │
│ 筛选: [软件 ▼] [状态 ▼] [生成时间 ▼] │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 卡密列表 │ │
│ │ │ │
│ │ ┌───────────────────────────────────────────────┐ │ │
│ │ │ 卡密 软件 天数 折扣 状态 │ │ │
│ │ │ 生成时间 激活用户 激活时间 到期时间 │ │ │
│ │ ├───────────────────────────────────────────────┤ │ │
│ │ │ XXXX-XXXX-XXXX Buff扫货 30天 0% 已激活 │ │ │
│ │ │ 2024-01-15 testuser 2024-01-16 │ │ │
│ │ │ 2024-01-15 10:00:00 2024-01-16 15:30:00 │ │ │
│ │ │ 到期: 2024-02-15 15:30:00 │ │ │
│ │ │ [查看详情] [禁用] [删除] │ │ │
│ │ ├───────────────────────────────────────────────┤ │ │
│ │ │ YYYY-YYYY-YYYY Buff扫货 7天 10% 未激活 │ │ │
│ │ │ 2024-01-20 - - │ │ │
│ │ │ 2024-01-20 11:00:00 - │ │ │
│ │ │ 到期: - │ │ │
│ │ │ [查看详情] [激活] [删除] │ │ │
│ │ └───────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ 共 1250 条记录 [上一页] [1] [2] [3] ... [下一页] │ │
│ │ │ │
│ │ [导出Excel] [批量删除] │ │
│ └─────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
3.4 密钥管理模块
┌─────────────────────────────────────────────────────────────┐
│ 密钥管理 │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 当前密钥 │ │
│ │ │ │
│ │ 公钥: │ │
│ │ ┌───────────────────────────────────────────────┐ │ │
│ │ │ -----BEGIN PUBLIC KEY----- │ │ │
│ │ │ MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA...│ │ │
│ │ │ ... │ │ │
│ │ │ -----END PUBLIC KEY----- │ │ │
│ │ └───────────────────────────────────────────────┘ │ │
│ │ [复制] [下载] │ │
│ │ │ │
│ │ 私钥: │ │
│ │ ┌───────────────────────────────────────────────┐ │ │
│ │ │ -----BEGIN PRIVATE KEY----- │ │ │
│ │ │ MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEA...│ │ │
│ │ │ ... │ │ │
│ │ │ -----END PRIVATE KEY----- │ │ │
│ │ └───────────────────────────────────────────────┘ │ │
│ │ [复制] [下载] [显示/隐藏] │ │
│ │ │ │
│ │ 创建时间: 2024-01-15 10:00:00 │ │
│ │ 到期时间: 2024-01-25 10:00:00 │ │
│ │ 剩余天数: 5 天 │ │
│ │ │ │
│ │ [ 立即更新密钥 ] │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 更新周期配置 │ │
│ │ │ │
│ │ 更新周期: [____] 天 （默认：10天） │ │
│ │ │ │
│ │ 说明: │ │
│ │ - 系统将根据此周期自动生成新密钥 │ │
│ │ - 旧密钥将保留在历史记录中 │ │
│ │ - 建议周期：7-30天 │ │
│ │ │ │
│ │ [ 保存配置 ] │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 历史密钥记录 │ │
│ │ │ │
│ │ ┌───────────────────────────────────────────────┐ │ │
│ │ │ 创建时间 到期时间 状态 │ │ │
│ │ ├───────────────────────────────────────────────┤ │ │
│ │ │ 2024-01-05 2024-01-15 已过期 │ │ │
│ │ │ 10:00:00 10:00:00 [查看] [删除] │ │ │
│ │ ├───────────────────────────────────────────────┤ │ │
│ │ │ 2023-12-26 2024-01-05 已过期 │ │ │
│ │ │ 10:00:00 10:00:00 [查看] [删除] │ │ │
│ │ └───────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ [上一页] [1] [2] [3] ... [下一页] │ │
│ └─────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
3.5 日志管理模块
┌─────────────────────────────────────────────────────────────┐
│ 日志管理 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 搜索: [________________________] [搜索] [重置] │
│ │
│ 筛选: │
│ 时间范围: [2024-01-01] 至 [2024-01-31] │
│ 用户: [________________________] │
│ 接口: [________________________] │
│ 状态: [全部 ▼] [成功] [失败] │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 日志列表 │ │
│ │ │ │
│ │ ┌───────────────────────────────────────────────┐ │ │
│ │ │ 时间 用户 接口 状态 │ │ │
│ │ │ IP地址 请求参数 响应结果 │ │ │
│ │ ├───────────────────────────────────────────────┤ │ │
│ │ │ 2024-01-20 testuser /api/login 成功 │ │ │
│ │ │ 15:30:00 192.168.1.100 │ │ │
│ │ │ 请求: {"username":"testuser",...} │ │ │
│ │ │ 响应: {"code":200,"data":{...}} │ │ │
│ │ │ [查看详情] │ │ │
│ │ ├───────────────────────────────────────────────┤ │ │
│ │ │ 2024-01-20 user001 /api/heartbeat 成功│ │ │
│ │ │ 15:29:45 192.168.1.101 │ │ │
│ │ │ 请求: {"token":"xxx"} │ │ │
│ │ │ 响应: {"code":200,"data":{...}} │ │ │
│ │ │ [查看详情] │ │ │
│ │ ├───────────────────────────────────────────────┤ │ │
│ │ │ 2024-01-20 testuser /api/register 失败│ │ │
│ │ │ 15:28:30 192.168.1.100 │ │ │
│ │ │ 请求: {"username":"testuser",...} │ │ │
│ │ │ 响应: {"code":400,"msg":"用户名已存在"} │ │ │
│ │ │ [查看详情] │ │ │
│ │ └───────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ 共 15680 条记录 [上一页] [1] [2] [3] ... [下一页] │ │
│ │ │ │
│ │ [导出Excel] [导出CSV] [清空日志] │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 日志详情（弹窗） │ │
│ │ │ │
│ │ 时间: 2024-01-20 15:30:00 │ │
│ │ 用户: testuser │ │
│ │ 接口: /api/login │ │
│ │ IP地址: 192.168.1.100 │ │
│ │ 状态: 成功 │ │
│ │ │ │
│ │ 请求参数: │ │
│ │ { │ │
│ │ "username": "testuser", │ │
│ │ "password": "***", │ │
│ │ "machine_code": "ABC123" │ │
│ │ } │ │
│ │ │ │
│ │ 响应结果: │ │
│ │ { │ │
│ │ "code": 200, │ │
│ │ "msg": "登录成功", │ │
│ │ "data": { │ │
│ │ "token": "xxx", │ │
│ │ "expires_at": "2024-12-31 23:59:59" │ │
│ │ } │ │
│ │ } │ │
│ │ │ │
│ │ [ 关闭 ] │ │
│ └─────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
3.6 公告管理模块
┌─────────────────────────────────────────────────────────────┐
│ 公告管理 │
├─────────────────────────────────────────────────────────────┤
│ │
│ [+ 发布公告] │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 公告列表 │ │
│ │ │ │
│ │ ┌───────────────────────────────────────────────┐ │ │
│ │ │ 标题 状态 发布时间 操作 │ │ │
│ │ ├───────────────────────────────────────────────┤ │ │
│ │ │ 欢迎使用游铛铛 v1.0.0 启用 2024-01-15 │ │ │
│ │ │ 10:00:00 [编辑][禁用]│ │ │
│ │ │ [查看详情] │ │ │
│ │ ├───────────────────────────────────────────────┤ │ │
│ │ │ 功能更新通知 启用 2024-01-10 │ │ │
│ │ │ 09:00:00 [编辑][禁用]│ │ │
│ │ │ [查看详情] │ │ │
│ │ ├───────────────────────────────────────────────┤ │ │
│ │ │ 系统维护通知 禁用 2024-01-05 │ │ │
│ │ │ 14:00:00 [编辑][启用]│ │ │
│ │ │ [查看详情] │ │ │
│ │ └───────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ [上一页] [1] [2] [3] ... [下一页] │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 发布/编辑公告（弹窗） │ │
│ │ │ │
│ │ 标题: [________________________] │ │
│ │ │ │
│ │ 类型: ○ 系统公告 ○ 功能更新 ○ 维护通知 │ │
│ │ │ │
│ │ 内容: │ │
│ │ ┌───────────────────────────────────────────────┐ │ │
│ │ │ │ │ │
│ │ │ [富文本编辑器] │ │ │
│ │ │ │ │ │
│ │ │ │ │ │
│ │ └───────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ 状态: ○ 启用 ○ 禁用 │ │
│ │ │ │
│ │ 发布时间: [2024-01-20] [15:30:00] │ │
│ │ │ │
│ │ [ 保存 ] [ 取消 ] │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 公告详情（弹窗） │ │
│ │ │ │
│ │ 标题: 欢迎使用游铛铛 v1.0.0 │ │
│ │ 类型: 系统公告 │ │
│ │ 发布时间: 2024-01-15 10:00:00 │ │
│ │ 状态: 启用 │ │
│ │ │ │
│ │ 内容: │ │
│ │ ┌───────────────────────────────────────────────┐ │ │
│ │ │ 欢迎使用游铛铛！本版本主要更新： │ │ │
│ │ │ 1. 优化扫货功能，提升扫描速度 │ │ │
│ │ │ 2. 修复已知bug，提升稳定性 │ │ │
│ │ │ 3. 新增Steam账号绑定功能 │ │ │
│ │ │ │ │ │
│ │ │ 如有问题，请联系客服。 │ │ │
│ │ └───────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ [ 关闭 ] │ │
│ └─────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
3.7 管理员管理模块
┌─────────────────────────────────────────────────────────────┐
│ 管理员管理 │
├─────────────────────────────────────────────────────────────┤
│ │
│ [+ 添加管理员] │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 管理员列表 │ │
│ │ │ │
│ │ ┌───────────────────────────────────────────────┐ │ │
│ │ │ 用户名 角色 状态 创建时间 操作 │ │ │
│ │ ├───────────────────────────────────────────────┤ │ │
│ │ │ admin 超级管理员 启用 2024-01-01 │ │ │
│ │ │ 10:00:00 [编辑][禁用] │ │ │
│ │ │ [查看详情] [重置密码] [删除] │ │ │
│ │ ├───────────────────────────────────────────────┤ │ │
│ │ │ manager01 普通管理员 启用 2024-01-05 │ │ │
│ │ │ 11:00:00 [编辑][禁用] │ │ │
│ │ │ [查看详情] [重置密码] [删除] │ │ │
│ │ ├───────────────────────────────────────────────┤ │ │
│ │ │ manager02 普通管理员 禁用 2024-01-10 │ │ │
│ │ │ 12:00:00 [编辑][启用] │ │ │
│ │ │ [查看详情] [重置密码] [删除] │ │ │
│ │ └───────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ [上一页] [1] [2] [3] ... [下一页] │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 添加/编辑管理员（弹窗） │ │
│ │ │ │
│ │ 用户名: [________________________] │ │
│ │ │ │
│ │ 密码: [________________________] [👁️] │ │
│ │ （编辑时留空则不修改） │ │
│ │ │ │
│ │ 角色: ○ 超级管理员 ○ 普通管理员 │ │
│ │ │ │
│ │ 权限: ☑️ 用户管理 ☑️ 软件管理 ☑️ 卡密管理 │ │
│ │ ☑️ 密钥管理 ☑️ 日志管理 ☑️ 公告管理 │ │
│ │ ☑️ 管理员管理 │ │
│ │ （超级管理员拥有所有权限） │ │
│ │ │ │
│ │ 状态: ○ 启用 ○ 禁用 │ │
│ │ │ │
│ │ 备注: [________________________] │ │
│ │ [________________________] │ │
│ │ │ │
│ │ [ 保存 ] [ 取消 ] │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 管理员详情（弹窗） │ │
│ │ │ │
│ │ 用户名: admin │ │
│ │ 角色: 超级管理员 │ │
│ │ 状态: 启用 │ │
│ │ 创建时间: 2024-01-01 10:00:00 │ │
│ │ 最后登录: 2024-01-20 15:30:00 │ │
│ │ 登录IP: 192.168.1.100 │ │
│ │ │ │
│ │ 权限列表: │ │
│ │ ☑️ 用户管理 ☑️ 软件管理 ☑️ 卡密管理 │ │
│ │ ☑️ 密钥管理 ☑️ 日志管理 ☑️ 公告管理 │ │
│ │ ☑️ 管理员管理 │ │
│ │ │ │
│ │ 操作日志: │ │
│ │ 时间 操作 │ │
│ │ 2024-01-20 15:30:00 登录系统 │ │
│ │ 2024-01-20 14:20:00 生成卡密（50张） │ │
│ │ 2024-01-20 13:10:00 编辑软件配置 │ │
│ │ │ │
│ │ [ 关闭 ] │ │
│ └─────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
四、界面交互说明
4.1 路由导航
- 菜单导航：点击左侧菜单项，右侧内容区域加载对应页面
- 浏览器导航：支持浏览器前进/后退功能
- 路由守卫：未登录用户自动跳转到登录页
4.2 权限控制
- 菜单显示：根据管理员权限动态显示/隐藏菜单项
- 操作按钮：根据权限显示/隐藏操作按钮
- API拦截：前端拦截无权限的API请求
4.3 数据操作
- 列表分页：所有列表支持分页显示
- 搜索筛选：支持多条件组合搜索和筛选
- 批量操作：支持批量删除、批量导出等操作
- 实时刷新：关键数据支持自动刷新
4.4 表单验证
- 前端验证：所有表单提交前进行前端验证
- 错误提示：验证失败时显示明确的错误信息
- 成功反馈：操作成功时显示成功提示
4.5 弹窗管理
- 模态弹窗：重要操作使用模态弹窗确认
- 表单弹窗：添加/编辑操作使用弹窗表单
- 详情弹窗：查看详情使用弹窗展示
五、界面设计规范
5.1 颜色方案
- 主色调：蓝色系（#1890FF）
- 辅助色：灰色系（#F5F5F5）
- 强调色：红色（#FF4D4F，用于警告/删除）
- 成功色：绿色（#52C41A）
- 警告色：橙色（#FA8C16）
5.2 字体规范
- 标题：18-20px，加粗
- 副标题：16px，加粗
- 正文：14px，常规
- 辅助文字：12px，灰色
5.3 间距规范
- 外边距：16px、24px、32px
- 内边距：12px、16px、24px
- 组件间距：8px、16px、24px
5.4 布局规范
- 左侧菜单宽度：200px（可折叠）
- 头部高度：64px
- 内容区域最小宽度：1200px
- 表格列宽：根据内容自适应
5.5 响应式设计
- 最小尺寸：1280×720px
- 推荐尺寸：1920×1080px
- 移动端：暂不支持移动端访问
5.6 组件规范
- 按钮：主要按钮、次要按钮、文字按钮
- 表格：支持排序、筛选、分页
- 表单：统一的表单样式和验证规则
- 弹窗：统一的弹窗样式和交互
六、技术实现建议
6.1 UI组件库
- Ant Design（React）或 Element Plus（Vue 3）
- 使用组件库的标准组件，保持界面一致性
6.2 状态管理
- Redux（React）或 Pinia（Vue 3）
- 管理用户登录状态、权限信息等全局状态
6.3 路由管理
- React Router（React）或 Vue Router（Vue 3）
- 配置路由守卫，实现权限控制
6.4 HTTP请求
- Axios
- 统一请求拦截器，处理token、错误等
6.5 数据表格
- Ant Design Table 或 Element Plus Table
- 支持排序、筛选、分页、导出等功能
6.6 富文本编辑器
- Quill 或 TinyMCE
- 用于公告管理的内容编辑
七、安全考虑
7.1 登录安全
- 密码加密传输（HTTPS）
- 登录失败次数限制
- 验证码机制（可选）
7.2 权限安全
- 前端路由权限控制
- 后端API权限验证
- 敏感操作二次确认
7.3 数据安全
- 敏感信息脱敏显示（如密码、密钥）
- 操作日志记录
- 数据备份机制
八、性能优化
8.1 列表优化
- 虚拟滚动（大数据量）
- 分页加载
- 数据缓存
8.2 请求优化
- 请求防抖/节流
- 接口缓存
- 批量操作
8.3 渲染优化
- 组件懒加载
- 路由懒加载
- 图片懒加载
九、后续扩展
9.1 功能扩展
- 数据统计图表
- 操作日志审计
- 系统配置管理
- 消息通知中心
9.2 体验优化
- 快捷键支持
- 主题切换
- 国际化支持
- 移动端适配