admin/Xboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(admin-frontend): 重做登录回跳与仪表盘样式

Browse Source 
重构管理端登录、主布局和仪表盘，统一为 Apple 风格
并移除高成本装饰层以提升页面流畅度。

补充仪表盘统计、趋势、排行和系统状态接口封装，
同时完善受保护路由的 redirect 回跳逻辑。
This commit is contained in:
yinjianm
2026-04-21 04:23:23 +08:00
parent 4cfda0fbf1
commit f68ba190a8
27 changed files with 2886 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.helloagents/CHANGELOG.md
+15
View File
@@ -0,0 +1,15 @@
# CHANGELOG
## [0.1.0] - 2026-04-21
### 新增
- **[admin-frontend]**: 完成深色 Composio 风格管理端仪表盘、登录回跳和真实统计面板接入 — by yinjianm
- 方案: [202604210326_admin-frontend-composio-dashboard](archive/2026-04/202604210326_admin-frontend-composio-dashboard/)
- 决策: admin-frontend-composio-dashboard#D001(采用深色 Composio 风格), admin-frontend-composio-dashboard#D002(趋势图使用自绘 SVG)
## [0.1.1] - 2026-04-21
### 修复
- **[admin-frontend]**: 将登录页、主布局和仪表盘重构为 Apple 风格，并移除高成本视觉装饰以缓解页面卡顿 — by yinjianm
- 方案: [202604210400_admin-frontend-apple-performance-refresh](archive/2026-04/202604210400_admin-frontend-apple-performance-refresh/)
- 决策: admin-frontend-apple-performance-refresh#D001(采用 Apple 风格并优先性能减法), admin-frontend-apple-performance-refresh#D002(保留逻辑层只替换视图皮层)
.helloagents/INDEX.md
+23
View File
@@ -0,0 +1,23 @@
# Xboard-new 知识库
```yaml
kb_version: 2
project: Xboard-new
updated_at: 2026-04-21
active_package: 无
```
## 项目概览
- 类型: PHP Laravel 主仓 + `admin-frontend` Vue3 管理端前端
- 当前重点模块: `admin-frontend`
- 最新归档: `202604210326_admin-frontend-composio-dashboard`
## 活跃模块
- [admin-frontend](modules/admin-frontend.md): 管理端登录、主布局、仪表盘与管理 API 前端封装
## 归档与变更
- 归档索引: [archive/_index.md](archive/_index.md)
- 变更日志: [CHANGELOG.md](CHANGELOG.md)
.helloagents/archive/2026-04/202604210326_admin-frontend-composio-dashboard/.status.json
+11
View File
@@ -0,0 +1,11 @@
{
"status": "completed",
"completed": 7,
"failed": 0,
"pending": 0,
"total": 7,
"done": 7,
"percent": 100,
"current": "开发实施完成，待归档",
"updated_at": "2026-04-21 03:42:00"
}
.helloagents/archive/2026-04/202604210326_admin-frontend-composio-dashboard/proposal.md
+207
View File
@@ -0,0 +1,207 @@
# 变更提案: admin-frontend-composio-dashboard
## 元信息
```yaml
类型: 新功能 + 重构
方案类型: implementation
优先级: P1
状态: 已完成
创建: 2026-04-21
```
---
## 1. 需求
### 背景
当前 `admin-frontend` 已完成基础登录、认证存储、路由守卫和一个占位版 `DashboardView`，但登录成功后的跳转仅固定到 `/dashboard`，无法保留原始访问意图；仪表盘也尚未接入管理端真实统计接口，无法承载后台运营视图。用户已明确要求继续沿 `.claude/plan/admin-frontend-login.md` 推进，并将视觉方向切换为深色 Composio 风格，同时保持参考图中的核心功能结构。
### 目标
- 在不改后端 API 的前提下，实现登录成功后的可靠跳转，支持受保护路由回跳。
- 基于现有管理端接口实现真实数据仪表盘，包括核心统计卡片、收入趋势、节点/用户流量排行、队列与系统状态。
- 将后台主视觉统一到深色 Composio 风格，形成可继续扩展的管理端首页基线。
### 约束条件
```yaml
时间约束: 本轮在现有 admin-frontend 基础上增量完成，不扩展到更多后台业务页面
性能约束: 仪表盘首版避免引入重型图表依赖，尽量复用现有 Vue3 + Element Plus 栈
兼容性约束: 保持 Hash 路由、window.settings.secure_path 运行时配置、现有登录鉴权方式
业务约束: 仅复用后端现有接口，不新增 Laravel Controller/Route，不改变 secure_path 自举逻辑
```
### 验收标准
- [ ] 未登录访问受保护页面时可带 `redirect` 回到目标页，登录成功后正确跳转。
- [ ] 仪表盘成功调用 `stat/getStats`、`stat/getOrder`、`stat/getTrafficRank`、`system/getSystemStatus`、`system/getQueueStats` 并显示真实数据。
- [ ] 首页包含深色 Composio 风格的统计卡片、收入趋势、节点排行、用户排行、队列/系统状态区块，并支持桌面与移动端。
- [ ] `admin-frontend` 可以通过 `npm run build`。
---
## 2. 方案
### 技术方案
在 `admin-frontend` 内完成三层增量改造：
1. 数据层
扩展 `src/types/api.d.ts` 和 `src/api/admin.ts`，为管理端仪表盘建立明确的统计、趋势、排行、系统状态类型与请求封装。
2. 认证与导航层
调整 `src/router/guards.ts` 和 `src/views/login/LoginView.vue`，在未登录时把目标路由写入 `redirect` 查询参数；登录成功后优先跳转目标路由，否则进入 `/dashboard`。
3. 视图与视觉层
重构 `src/layouts/AdminLayout.vue`、`src/views/dashboard/DashboardView.vue` 与全局样式，采用深色 Composio 风格：
- 近黑背景 + 低对比边框
- `JetBrains Mono` 数字与技术标签
- 冷蓝/青色信号强调
- 以“夜间指挥中心”方式组织统计信息
趋势图首版采用自绘 SVG 折线图，避免为单页仪表盘引入新的重型图表库。
### 影响范围
```yaml
涉及模块:
- admin-frontend/src/api: 新增后台仪表盘数据请求封装
- admin-frontend/src/types: 补充管理端统计响应类型
- admin-frontend/src/router: 调整登录回跳逻辑
- admin-frontend/src/views/login: 登录成功跳转逻辑增强
- admin-frontend/src/views/dashboard: 从占位页升级为真实运营仪表盘
- admin-frontend/src/layouts: 主布局视觉升级
- admin-frontend/src/styles: 统一深色视觉变量与全局基线
预计变更文件: 8-10
```
### 风险评估
| 风险 | 等级 | 应对 |
|------|------|------|
| 后端接口字段与前端预期存在轻微偏差 | 中 | 直接以仓库内 Controller 返回结构为准建模，类型保持可扩展 |
| 管理端趋势图无现成图表库 | 低 | 使用自绘 SVG，减少依赖和构建风险 |
| 深色重构影响现有登录页与布局一致性 | 中 | 同步更新全局样式变量，确保登录页与后台主框架共享同一视觉系统 |
| 移动端侧边栏与大屏布局冲突 | 中 | 采用断点折叠、卡片栈式布局和横向滚动安全兜底 |
---
## 3. 技术设计（可选）
> 涉及架构变更、API设计、数据模型变更时填写
### 架构设计
```mermaid
flowchart TD
A[LoginView] --> B[AuthStore.login]
B --> C[passport/auth/login]
B --> D[getSystemStatus]
A --> E[Router redirect]
E --> F[DashboardView]
F --> G[getStats]
F --> H[getOrder]
F --> I[getTrafficRank]
F --> J[getSystemStatus]
F --> K[getQueueStats]
```
### API设计
#### GET /api/v2/{secure_path}/stat/getStats
- **请求**: 无
- **响应**: `todayIncome/currentMonthIncome/traffic/users/onlineNodes` 等仪表盘总览数据
#### GET /api/v2/{secure_path}/stat/getOrder
- **请求**: `start_date`, `end_date`, `type?`
- **响应**: `list[] + summary`，用于收入趋势图与摘要
#### GET /api/v2/{secure_path}/stat/getTrafficRank
- **请求**: `type=node|user`, `start_time`, `end_time`
- **响应**: Top 10 排行及环比变化
#### GET /api/v2/{secure_path}/system/getSystemStatus
- **请求**: 无
- **响应**: `schedule`, `horizon`, `schedule_last_runtime`
#### GET /api/v2/{secure_path}/system/getQueueStats
- **请求**: 无
- **响应**: `failedJobs`, `jobsPerMinute`, `recentJobs`, `processes`, `wait`, `status`
### 数据模型
| 字段 | 类型 | 说明 |
|------|------|------|
| DashboardStats | object | 仪表盘总览统计 |
| OrderTrendPoint | object | 收入趋势日维度数据点 |
| TrafficRankItem | object | 节点或用户排行项 |
| QueueStats | object | Horizon/队列运行状态 |
---
## 4. 核心场景
> 执行完成后同步到对应模块文档
### 场景: 登录后回跳
**模块**: auth / router / login
**条件**: 用户未登录访问受保护路由
**行为**: 路由守卫记录目标地址，登录成功后优先跳转原目标
**结果**: 用户不会被强制打回固定首页
### 场景: 仪表盘总览
**模块**: dashboard
**条件**: 管理员登录成功并进入首页
**行为**: 页面并行拉取总览、趋势、排行和系统状态数据
**结果**: 用户看到真实的收入、用户、流量和队列运行信息
### 场景: 运营态分析
**模块**: dashboard
**条件**: 用户切换时间范围或排行类型
**行为**: 页面重新请求对应接口并刷新局部区块
**结果**: 后台可快速识别收入波动、流量头部节点与活跃用户
---
## 5. 技术决策
> 本方案涉及的技术决策，归档后成为决策的唯一完整记录
### admin-frontend-composio-dashboard#D001: 仪表盘视觉采用深色 Composio 风格而非参考图浅色风格
**日期**: 2026-04-21
**状态**: ✅采纳
**背景**: 用户明确选择“以 DESIGN.md 为准，做深色 Composio 风格仪表盘，但功能结构对齐参考图”。
**选项分析**:
| 选项 | 优点 | 缺点 |
|------|------|------|
| A: 浅色还原参考图 | 更接近截图 | 与仓库既定 DESIGN.md 和现有深色登录页割裂 |
| B: 深色 Composio 风格 | 与既定设计系统一致，辨识度更高 | 需要重做布局与视觉细节 |
**决策**: 选择方案 B
**理由**: 用户已明确选定深色方向，且当前登录页已具备深色基础，继续向“夜间控制台”统一更稳妥。
**影响**: `AdminLayout`、`DashboardView`、`LoginView`、全局样式变量
### admin-frontend-composio-dashboard#D002: 趋势图采用自绘 SVG 而非新增图表依赖
**日期**: 2026-04-21
**状态**: ✅采纳
**背景**: 当前项目仅需单个折线趋势图，引入 ECharts 等库会增加体积和维护成本。
**选项分析**:
| 选项 | 优点 | 缺点 |
|------|------|------|
| A: 引入图表库 | 功能全、配置丰富 | 增加依赖与样式整合成本 |
| B: 自绘 SVG 折线图 | 体积轻、可完全匹配设计语言 | 需手工处理坐标和交互 |
**决策**: 选择方案 B
**理由**: 本轮诉求聚焦仪表盘首页，SVG 已足够覆盖折线图、悬浮提示和时间序列展示。
**影响**: `DashboardView` 内部图表实现方式，不改构建依赖
---
## 6. 成果设计
> 含视觉产出的任务由 DESIGN Phase2 填充。非视觉任务整节标注"N/A"。
### 设计方向
- **美学基调**: Nocturnal Command Center。像深夜运行的运维控制台，近黑背景中浮出冷蓝信号、低对比边框和技术排版，强调“被数据照亮”的感觉。
- **记忆点**: 大面积近黑留白里嵌入发光式统计卡片与自绘蓝青折线图，数字像终端仪表一样被点亮。
- **参考**: 仓库 [DESIGN.md](/E:/code/php/Xboard-new/DESIGN.md) 的 Composio 风格规范 + 用户提供的后台参考图功能结构
### 视觉要素
- **配色**: 背景 `#0f0f0f` / 卡片内层 `#000000` / 线框 `rgba(255,255,255,0.08~0.12)` / 强调蓝 `#0007cd` / 信号青 `#00ffff`
- **字体**: `IBM Plex Sans` 作为界面正文，`JetBrains Mono` 作为数字、标签和技术指标；中文回退到 `PingFang SC`、`Microsoft YaHei`
- **布局**: 顶部密集统计卡片 + 中段趋势图双栏摘要 + 下段双排行 + 底部系统状态；桌面端强调控制台网格感，移动端改为单列堆叠
- **动效**: 卡片和图表采用分层淡入、边框亮起与轻微上浮；筛选切换使用短时透明度过渡
- **氛围**: 低对比边框、局部蓝青径向辉光、硬朗分割线和轻量噪点质感，避免普通 SaaS 白卡片质感
### 技术约束
- **可访问性**: 保证关键指标和文字在深色背景上的对比度；图表与状态块提供文本值而非只靠颜色
- **响应式**: `>=1280px` 四列指标卡，`768-1279px` 两列，`<768px` 单列；排行和图表区域允许安全降级为纵向布局
.helloagents/archive/2026-04/202604210326_admin-frontend-composio-dashboard/tasks.md
+59
View File
@@ -0,0 +1,59 @@
# 任务清单: admin-frontend-composio-dashboard
> **@status:** completed | 2026-04-21 03:43
```yaml
@feature: admin-frontend-composio-dashboard
@created: 2026-04-21
@status: completed
@mode: R2
```
## 进度概览
| 完成 | 失败 | 跳过 | 总数 |
|------|------|------|------|
| 7 | 0 | 0 | 7 |
---
## 任务列表
### 1. 数据模型与接口
- [√] 1.1 在 `admin-frontend/src/types/api.d.ts` 中补充仪表盘、趋势、排行、队列状态的类型定义 | depends_on: []
- [√] 1.2 在 `admin-frontend/src/api/admin.ts` 中实现总览、趋势、排行、系统与队列状态接口封装 | depends_on: [1.1]
### 2. 认证与跳转
- [√] 2.1 在 `admin-frontend/src/router/guards.ts` 中为受保护路由增加 `redirect` 回跳逻辑 | depends_on: [1.2]
- [√] 2.2 在 `admin-frontend/src/views/login/LoginView.vue` 中实现登录成功后的目标路由跳转与错误处理增强 | depends_on: [2.1]
### 3. 布局与视觉
- [√] 3.1 在 `admin-frontend/src/layouts/AdminLayout.vue` 和 `admin-frontend/src/styles/index.scss` 中重构 Composio 风格后台框架与全局视觉变量 | depends_on: [2.2]
### 4. 仪表盘页面
- [√] 4.1 在 `admin-frontend/src/views/dashboard/DashboardView.vue` 中实现总览卡片、收入趋势图、节点/用户排行、系统状态区块 | depends_on: [1.2,3.1]
- [√] 4.2 完成 `admin-frontend` 构建验证并修正类型/样式问题 | depends_on: [4.1]
---
## 执行日志
| 时间 | 任务 | 状态 | 备注 |
|------|------|------|------|
| 2026-04-21 03:26 | 方案包初始化 | completed | 已生成 proposal/tasks 并锁定深色 Composio 仪表盘方向 |
| 2026-04-21 03:34 | 1.x / 2.x | completed | 已补充接口类型、管理端请求封装、登录回跳逻辑 |
| 2026-04-21 03:39 | 3.1 / 4.1 | completed | 已完成深色后台框架、登录页重构与仪表盘主视图实现 |
| 2026-04-21 03:40 | 4.2 | completed | `npm run build` 通过，产物输出到 `public/assets/admin` |
| 2026-04-21 03:42 | 验收 | completed | 已启动 Vite 开发服务并确认 `/assets/admin/` 与 `/#/login` 可访问 |
---
## 执行备注
- 当前任务基于 `.claude/plan/admin-frontend-login.md` 续作，但以本方案包作为本轮实现和验收的事实记录。
- 本轮不新增后端接口，仅消费仓库内已存在的管理端统计与系统状态接口。
- 页面运行态验收已覆盖构建与静态入口访问；仪表盘真实业务数据联调仍依赖实际 `secure_path` 与管理员鉴权环境。
.helloagents/archive/2026-04/202604210400_admin-frontend-apple-performance-refresh/.status.json
+11
View File
@@ -0,0 +1,11 @@
{
"status": "completed",
"completed": 5,
"failed": 0,
"pending": 0,
"total": 5,
"done": 5,
"percent": 100,
"current": "Apple 风格性能重构完成，待归档",
"updated_at": "2026-04-21 04:13:00"
}
.helloagents/archive/2026-04/202604210400_admin-frontend-apple-performance-refresh/proposal.md
+183
View File
@@ -0,0 +1,183 @@
# 变更提案: admin-frontend-apple-performance-refresh
## 元信息
```yaml
类型: 重构 + 优化
方案类型: implementation
优先级: P1
状态: 已完成
创建: 2026-04-21
```
---
## 1. 需求
### 背景
上一轮管理端首页已完成深色 Composio 风格仪表盘，但用户反馈“页面非常卡顿”。结合当前实现可见，卡顿风险主要来自全局远程字体加载、固定噪点层、多个径向渐变与模糊装饰、较重阴影以及偏复杂的深色视觉特效。用户本轮明确要求改为 `apple/DESIGN.md` 设计体系，并将登录页、主布局和仪表盘统一重做。
### 目标
- 将登录页、主布局、仪表盘首页整体切换为 Apple 风格视觉体系。
- 明确降低页面运行时开销，优先删除高成本视觉装饰和非必要动画。
- 保留现有数据接入、登录回跳和后台业务信息结构，不回退功能。
### 约束条件
```yaml
时间约束: 本轮仅重做 admin-frontend 的登录页、主布局、仪表盘首页
性能约束: 去除远程字体依赖、固定背景噪点层、强滤镜和高频装饰性重绘
兼容性约束: 保持现有 Vue3 + Vite + Element Plus 栈，不新增重型 UI 或图表依赖
业务约束: 登录逻辑、secure_path、自定义 API 请求和统计接口保持不变
```
### 验收标准
- [ ] 登录页、主布局、仪表盘首页统一符合 Apple 设计系统，视觉更克制、轻量、清晰。
- [ ] 移除当前页面中的高成本装饰层，首屏样式明显降载。
- [ ] 仪表盘的数据接口、排行、趋势、系统状态功能保持可用。
- [ ] `admin-frontend` 重新构建通过。
---
## 2. 方案
### 技术方案
本轮采用“保留逻辑，重写视图皮层”的方式：
1. 全局样式降载
在 `src/styles/index.scss` 中移除 Google Fonts、固定噪点遮罩、全局径向辉光与过重背景层，改为 Apple 风格的系统字体栈、纯色背景与轻量层次。
2. 登录页重构
将当前双辉光深色登录页重构为 Apple 式大标题 + 清爽表单卡布局，保留登录回跳逻辑，只替换视觉和结构。
3. 主布局重构
把当前“夜间控制台”侧栏和头部压缩为更克制的 Apple 导航语言，减少边框、渐变、信号灯和装饰芯片。
4. 仪表盘重构
保留真实数据接口与 SVG 趋势图，但改成 Apple 风格的黑/浅灰分区、简洁卡片、单一蓝色交互重点和更轻的图表样式。
### 影响范围
```yaml
涉及模块:
- admin-frontend/src/styles: 全局视觉与性能基线
- admin-frontend/src/views/login: 登录页 Apple 风格重构
- admin-frontend/src/layouts: 主布局和导航样式重构
- admin-frontend/src/views/dashboard: 仪表盘内容重排与轻量样式替换
预计变更文件: 4-6
```
### 风险评估
| 风险 | 等级 | 应对 |
|------|------|------|
| 视觉重构影响当前布局层级 | 中 | 保持数据结构和主要 DOM 分区稳定，只重写样式与局部布局 |
| Apple 风格若过度追求极简导致信息密度下降 | 中 | 保留统计卡片、趋势图、排行和状态分区，只减少装饰噪音 |
| 去除装饰层后页面可能显得“过空” | 低 | 用黑/浅灰区块切换、系统字体、轻阴影和单一蓝色 CTA 建立节奏 |
---
## 3. 技术设计（可选）
> 涉及架构变更、API设计、数据模型变更时填写
### 架构设计
```mermaid
flowchart TD
A[index.scss] --> B[LoginView]
A --> C[AdminLayout]
A --> D[DashboardView]
D --> E[getDashboardStats]
D --> F[getOrderTrend]
D --> G[getTrafficRank]
D --> H[getSystemStatus/getQueueStats]
```
### API设计
#### GET /api/v2/{secure_path}/stat/getStats
- **请求**: 无
- **响应**: 仪表盘总览统计
#### GET /api/v2/{secure_path}/stat/getOrder
- **请求**: `start_date`, `end_date`
- **响应**: 收入趋势与汇总
#### GET /api/v2/{secure_path}/stat/getTrafficRank
- **请求**: `type`, `start_time`, `end_time`
- **响应**: 节点/用户排行
### 数据模型
| 字段 | 类型 | 说明 |
|------|------|------|
| DashboardStats | object | 统计卡片数据 |
| OrderTrendData | object | 收入趋势图数据 |
| TrafficRankResponse | object | 排行区数据 |
| QueueStats/SystemStatus | object | 作业详情与系统状态数据 |
---
## 4. 核心场景
> 执行完成后同步到对应模块文档
### 场景: 登录进入后台
**模块**: LoginView / router
**条件**: 用户访问登录页或被守卫重定向到登录页
**行为**: 用户输入管理员账号密码并提交
**结果**: 登录成功后按原有 redirect 规则返回目标页
### 场景: 查看首页经营数据
**模块**: DashboardView
**条件**: 管理员进入仪表盘
**行为**: 页面加载总览、趋势、排行和系统状态
**结果**: 页面用更轻量的 Apple 风格区块展示相同业务信息
---
## 5. 技术决策
> 本方案涉及的技术决策，归档后成为决策的唯一完整记录
### admin-frontend-apple-performance-refresh#D001: 采用 Apple 设计系统并优先做性能减法
**日期**: 2026-04-21
**状态**: ✅采纳
**背景**: 用户已明确指出当前页面“非常卡顿”，并要求按 `apple/DESIGN.md` 重做。
**选项分析**:
| 选项 | 优点 | 缺点 |
|------|------|------|
| A: 保留 Composio 风格，仅做性能微调 | 改动小 | 无法满足用户指定的 Apple 方向 |
| B: Apple 风格 + 性能减法重构 | 同时解决风格偏差和卡顿 | 需要重写多个页面的样式结构 |
**决策**: 选择方案 B
**理由**: 这次诉求的核心不是补功能，而是重新定义页面体验和运行成本。
**影响**: 登录页、主布局、仪表盘、全局样式
### admin-frontend-apple-performance-refresh#D002: 维持现有数据逻辑，仅替换视图皮层
**日期**: 2026-04-21
**状态**: ✅采纳
**背景**: 当前 API 封装和跳转逻辑已完成，不需要在本轮视觉重构中回退或重写。
**选项分析**:
| 选项 | 优点 | 缺点 |
|------|------|------|
| A: 连逻辑层一起重做 | 可重新整理代码 | 超出本轮目标，风险更高 |
| B: 保留逻辑层，重构页面与样式 | 风险可控，收益集中 | 需要在旧结构中做设计转换 |
**决策**: 选择方案 B
**理由**: 用户反馈集中在“前端效果卡顿”，而不是数据和接口错误。
**影响**: `api/*` 与 `router/*` 只做最小配合，改动集中于视图和样式
---
## 6. 成果设计
> 含视觉产出的任务由 DESIGN Phase2 填充。非视觉任务整节标注"N/A"。
### 设计方向
- **美学基调**: Apple Product Editorial。像 Apple 产品页与系统面板的混合体，控制住装饰噪音，让内容像展品一样陈列。
- **记忆点**: 黑色英雄区和浅灰信息区交替展开，单一 Apple Blue 成为全页唯一强调色。
- **参考**: [apple/DESIGN.md](/E:/code/php/Xboard-new/apple/DESIGN.md)
### 视觉要素
- **配色**: 黑色 `#000000`、浅灰 `#f5f5f7`、正文深灰 `#1d1d1f`、交互蓝 `#0071e3`
- **字体**: 采用系统栈模拟 SF Pro 体验，优先 `-apple-system`, `BlinkMacSystemFont`, `SF Pro Display`, `SF Pro Text`, `Helvetica Neue`, Arial, sans-serif`
- **布局**: 英雄区大标题 + 轻卡片信息区 + 简洁双列内容；信息通过区块切换而不是发光边框表达层级
- **动效**: 仅保留轻量 hover 和淡入，不保留大面积 blur、辉光、滤镜动画
- **氛围**: 纯色背景、轻阴影、玻璃感顶栏；不使用噪点、网格、径向发光和复杂纹理
### 技术约束
- **可访问性**: 文字与背景维持高对比；交互色仅使用 Apple Blue
- **响应式**: 登录页双栏在窄屏下改为单列；仪表盘卡片和内容区在平板/手机下自动折叠为单列
.helloagents/archive/2026-04/202604210400_admin-frontend-apple-performance-refresh/tasks.md
+54
View File
@@ -0,0 +1,54 @@
# 任务清单: admin-frontend-apple-performance-refresh
> **@status:** completed | 2026-04-21 04:14
```yaml
@feature: admin-frontend-apple-performance-refresh
@created: 2026-04-21
@status: completed
@mode: R2
```
## 进度概览
| 完成 | 失败 | 跳过 | 总数 |
|------|------|------|------|
| 5 | 0 | 0 | 5 |
---
## 任务列表
### 1. 全局视觉与性能基线
- [√] 1.1 在 `admin-frontend/src/styles/index.scss` 中移除高成本装饰层并建立 Apple 风格全局变量 | depends_on: []
### 2. 登录与布局
- [√] 2.1 在 `admin-frontend/src/views/login/LoginView.vue` 中将登录页重构为 Apple 风格轻量布局 | depends_on: [1.1]
- [√] 2.2 在 `admin-frontend/src/layouts/AdminLayout.vue` 中重构主布局与头部导航，去除当前控制台式装饰 | depends_on: [1.1]
### 3. 仪表盘
- [√] 3.1 在 `admin-frontend/src/views/dashboard/DashboardView.vue` 中重构为 Apple 风格信息分区并保留现有统计功能 | depends_on: [1.1,2.2]
- [√] 3.2 完成 `admin-frontend` 构建验证并修正重构引入的问题 | depends_on: [2.1,2.2,3.1]
---
## 执行日志
| 时间 | 任务 | 状态 | 备注 |
|------|------|------|------|
| 2026-04-21 04:00 | 方案包初始化 | completed | 已锁定 Apple 风格 + 性能减法方向 |
| 2026-04-21 04:10 | 1.1 / 2.x | completed | 已移除远程字体与全局重装饰，完成登录页和主布局 Apple 化 |
| 2026-04-21 04:12 | 3.1 | completed | 已将仪表盘重构为 Apple 风格分区，同时保留现有数据接口 |
| 2026-04-21 04:12 | 3.2 | completed | `npm run build` 通过，运行态入口 `200` |
---
## 执行备注
> 记录执行过程中的重要说明、决策变更、风险提示等
- 本轮不回退上一轮的数据接入和登录回跳逻辑，仅重构视图皮层和高成本样式。
- 运行态验证已确认 `/assets/admin/` 与 `/#/login` 可访问；真实性能评估仍建议在真实后台数据环境里再观察一次滚动与切换体验。
.helloagents/archive/_index.md
+5 -3
View File
@@ -7,16 +7,18 @@
| 时间戳 | 名称 | 类型 | 涉及模块 | 决策 | 结果 |
|--------|------|------|---------|------|------|
| 202604210400 | admin-frontend-apple-performance-refresh | implementation | admin-frontend | admin-frontend-apple-performance-refresh#D001,#D002 | ✅完成 |
| 202604210326 | admin-frontend-composio-dashboard | implementation | admin-frontend | admin-frontend-composio-dashboard#D001,#D002 | ✅完成 |
| 202604180040 | optimize-docker-publish-workflow | - | - | - | ✅完成 |
| 202604180029 | fix-clashmeta-flow-map-export | - | - | - | ✅完成 |
| 202604161703 | create-git-merge-preserve-local-skill | - | - | - | ✅完成 |
| 202604161655 | merge-upstream-preserve-local | - | - | - | ✅完成 |
| {YYYYMMDDHHMM} | {feature} | {类型} | {模块列表} | {feature}#D001,#D002 | ✅完成 |
## 按月归档
### YYYY-MM
- [YYYYMMDDHHMM_feature](./YYYY-MM/YYYYMMDDHHMM_feature/) - 一句话功能描述
### 2026-04
- [202604210400_admin-frontend-apple-performance-refresh](./2026-04/202604210400_admin-frontend-apple-performance-refresh/) - Apple 风格重构登录页、主布局和仪表盘，并移除高成本装饰层以缓解卡顿
- [202604210326_admin-frontend-composio-dashboard](./2026-04/202604210326_admin-frontend-composio-dashboard/) - 深色 Composio 风格管理端仪表盘、登录回跳与真实统计数据接入
## 结果状态说明
- ✅ 完成
.helloagents/context.md
+36
View File
@@ -0,0 +1,36 @@
# 项目上下文
## 基本信息
- 项目: Xboard-new
- 当前工作目录: `E:\code\php\Xboard-new`
- 主要栈: Laravel(PHP) + Vue3/TypeScript/Vite/Element Plus (`admin-frontend`)
## 技术上下文
- 管理端前端位于 `admin-frontend/`
- 管理端 API 通过 `window.settings.secure_path` 或 `VITE_ADMIN_PATH` 解析 `/api/v2/{secure_path}` 前缀
- 登录接口复用 `/api/v2/passport/auth/login`
- 管理端仪表盘现已接入:
- `stat/getStats`
- `stat/getOrder`
- `stat/getTrafficRank`
- `system/getSystemStatus`
- `system/getQueueStats`
## 项目概述
- 主仓仍以 Laravel 为后端真相源
- `admin-frontend` 负责独立管理后台 UI 与交互逻辑
- `public/assets/admin` 为构建产物输出位置
## 开发约定
- 管理端路由使用 Hash 模式
- Bearer Token 存储于 `sessionStorage/localStorage`
- `admin-frontend` 的视觉方向当前以 Apple 风格为基线，优先纯色分区、系统字体栈和低装饰成本
## 当前约束
- 本地预览环境默认缺少真实 `secure_path` 与管理员凭证
- 后端接口契约以仓库内 Controller/Route 为准，不在前端推断字段
.helloagents/modules/_index.md
+5
View File
@@ -0,0 +1,5 @@
# 模块索引
| 模块名 | 说明 | 最近更新 |
|--------|------|----------|
| [admin-frontend](admin-frontend.md) | 管理端前端登录、布局、仪表盘与管理 API 封装 | 2026-04-21 |
.helloagents/modules/admin-frontend.md
+22
View File
@@ -0,0 +1,22 @@
# admin-frontend
## 职责
- 提供 Vue3 管理端登录页、认证状态、路由守卫和主布局
- 封装管理端统计/系统状态接口
- 渲染后台仪表盘、排行、队列和系统运行状态
## 行为规范
- 登录成功后优先跳转 `redirect` 指定路由，否则回到 `/dashboard`
- 受保护路由在未登录时会自动附加 `redirect` 查询参数
- API 基础路径使用 `/api/v2/{secure_path}`，其中 `secure_path` 来自运行时配置
- 仪表盘以真实后端接口返回值为准，不在前端伪造业务统计
- 当前首页视觉基线为 Apple 风格：纯色分区、系统字体栈、单一蓝色强调和轻量层次
- 性能优化优先级高于装饰性表达，避免远程字体、全局模糊背景和固定特效层
## 依赖关系
- 依赖 `src/api/client.ts` 处理 axios 与认证头
- 依赖 Laravel 注入的 `window.settings`
- 构建输出到 `public/assets/admin`