feat(admin-frontend): 新增系统与订阅管理后台页面

扩展管理端侧边栏与路由，新增系统配置真实页面、订阅套餐
管理页、节点管理页及多个结构化占位页

补齐前端 API、类型与工具层，并增强仪表盘刷新、趋势切换、
失败作业详情与流量排行 limit 联动能力

同步后端 traffic rank limit 支持与知识库归档、设计约束、
验证配置及视觉验收产物

.helloagents/plan/202604232325_admin-frontend-subscription-plan-management/.status.json

@@ -0,0 +1,11 @@
+{
+  "status": "completed",
+  "completed": 6,
+  "failed": 0,
+  "pending": 0,
+  "total": 6,
+  "done": 6,
+  "percent": 100,
+  "current": "套餐管理页面与订阅管理侧边栏已完成，等待用户验收",
+  "updated_at": "2026-04-23 23:56:00"
+}

.helloagents/plan/202604232325_admin-frontend-subscription-plan-management/proposal.md

@@ -0,0 +1,108 @@
+# 变更提案: admin-frontend-subscription-plan-management
+
+## 元信息
+```yaml
+类型: 新功能
+方案类型: implementation
+优先级: P1
+状态: 执行中
+创建: 2026-04-23
+```
+
+---
+
+## 1. 需求
+
+### 背景
+当前 `admin-frontend` 已具备仪表盘、用户管理与工单管理，但左侧信息架构仍缺少“订阅管理”业务分组。用户本轮明确要求参考 `apple/DESIGN.md` 和提供的后台截图，为管理端新增“订阅管理”侧边栏，并优先完整交付“套餐管理”页面；其余“订单管理 / 优惠券管理 / 礼品卡管理”本轮只保留菜单入口，不展开页面实现。
+
+### 目标
+- 在管理端侧边栏新增“订阅管理”分组，补齐“套餐管理 / 订单管理 / 优惠券管理 / 礼品卡管理”入口层级。
+- 完整实现“套餐管理”页面，包括列表、搜索、分页、排序编辑、显隐/新购/续费开关、编辑抽屉和描述预览。
+- 页面风格延续当前 Apple 化后台：黑色首屏、白色工作区、单一蓝色强调、克制交互。
+
+### 约束条件
+```yaml
+范围约束: 仅完整实现“套餐管理”；其余 3 个子菜单只保留入口，不新增业务页
+技术约束: 继续使用 Vue3 + TypeScript + Element Plus + Vite，不新增重型富文本或拖拽依赖
+业务约束: 后端接口沿用现有 `/plan/*` 与 `/server/group/fetch`，不改 Laravel API
+视觉约束: 遵循 `apple/DESIGN.md` 与 `.helloagents/DESIGN.md`，保持与现有后台同一视觉家族
+```
+
+### 验收标准
+- [ ] 左侧导航新增“订阅管理”分组，且“套餐管理”可进入真实页面。
+- [ ] 套餐管理页支持真实套餐列表读取、本地搜索/分页、显隐/新购/续费切换、编辑、删除与排序保存。
+- [ ] 套餐编辑抽屉支持名称、标签、权限组、流量、限速、设备限制、容量限制、价格、描述与强制更新用户套餐等核心字段。
+- [ ] 套餐描述区域支持 Markdown 编辑与预览，保留“使用模板”快捷入口。
+- [ ] `admin-frontend` 构建通过，并同步检查 `public/assets/admin` 子模块产物状态。
+
+---
+
+## 2. 方案
+
+### 技术方案
+1. 扩展 `src/types/api.d.ts` 与 `src/api/admin.ts`，补齐套餐、权限组、排序与保存所需类型及请求封装。
+2. 在 `src/utils/plans.ts` 中集中处理套餐价格映射、标签输入、Markdown 渲染、表单模型转换和统计展示。
+3. 新增 `src/views/subscriptions/PlansView.vue` 与 `PlanEditorDrawer.vue`：
+   - `PlansView` 负责黑色首屏、列表工具栏、表格、分页、排序编辑和行内操作。
+   - `PlanEditorDrawer` 负责套餐创建/编辑表单、标签输入、价格矩阵、说明模板与预览。
+4. 在 `src/layouts/AdminLayout.vue` 与 `src/router/index.ts` 中新增“订阅管理”菜单分组与 `/subscriptions/plans` 路由；其余菜单入口本轮以禁用状态保留。
+
+### 影响范围
+```yaml
+涉及模块:
+  - admin-frontend/src/router
+  - admin-frontend/src/layouts
+  - admin-frontend/src/api
+  - admin-frontend/src/types
+  - admin-frontend/src/utils
+  - admin-frontend/src/views/subscriptions
+预计变更文件: 6-9
+```
+
+### 风险评估
+| 风险 | 等级 | 应对 |
+|------|------|------|
+| 后端套餐保存字段是弱约束，前端容易传入无效价格结构 | 中 | 在 `utils/plans.ts` 中统一清洗价格、标签和空值，再提交 |
+| 菜单层级新增后，移动端折叠与激活态可能混乱 | 中 | 继续复用现有 `ElMenu` 分组模式，仅新增一个独立业务域 |
+| `public/assets/admin` 为子模块产物目录，构建后状态可能只在子模块可见 | 中 | 验收阶段同时检查根仓与子模块状态，按双层发布事实给证据 |
+
+---
+
+## 3. 成果设计
+
+### 设计方向
+- **美学基调**: Apple Admin Commerce。像 Apple 系统设置中的“订阅与计费”面板，强调运营效率与价格结构的清晰表达。
+- **记忆点**: 黑色首屏承载“订阅套餐”标题，正文进入大块白色工作台；价格矩阵与说明编辑区在抽屉中像系统级面板一样纵向展开。
+- **参考**: 用户提供的侧边栏、套餐列表与编辑弹窗截图 + `apple/DESIGN.md`
+
+### 视觉要素
+- **配色**: 背景 `#f5f5f7`、工作区 `#ffffff`、标题 `#1d1d1f`、强调蓝 `#0071e3`、危险红 `#c93428`
+- **排版**: 继续使用系统字体栈，大标题压缩行高，表格列标题和辅助文案维持轻量层级
+- **布局**: 首屏标题区 + 列表工作台 + 抽屉式编辑器；描述编辑区采用工具栏 + 文本区 / 预览区双模式
+- **状态**: 未实现的订阅菜单项以禁用态保留，明确表达“入口已规划，功能稍后接入”
+
+---
+
+## 4. 技术决策
+
+### admin-frontend-subscription-plan-management#D001: 本轮只完整实现套餐管理，其余订阅菜单先保留禁用入口
+**日期**: 2026-04-23
+**状态**: ✅采纳
+**背景**: 用户在确认环节明确选择“先完成订阅管理侧边栏 + 套餐管理完整页面，其余 3 个子项先只保留菜单入口”。
+**决策**: “订单管理 / 优惠券管理 / 礼品卡管理”不新增页面，只在侧边栏展示禁用入口与即将开放提示。
+**理由**: 确保信息架构先到位，同时避免范围蔓延到多个后台模块。
+
+### admin-frontend-subscription-plan-management#D002: 套餐说明编辑采用轻量 Markdown 编辑器 + 预览，不引入富文本依赖
+**日期**: 2026-04-23
+**状态**: ✅采纳
+**背景**: 参考图包含富文本工具条，但当前前端没有现成富文本编辑器，且本轮不适合引入重量级依赖。
+**决策**: 使用自定义轻量工具条 + `textarea` + Markdown/HTML 预览模式实现说明编辑。
+**理由**: 可覆盖截图中的主要录入与预览场景，并保持依赖与性能成本可控。
+
+### admin-frontend-subscription-plan-management#D003: 套餐排序采用本地排序编辑对话框，而不是拖拽依赖
+**日期**: 2026-04-23
+**状态**: ✅采纳
+**背景**: 页面需要“编辑排序”，但当前项目未引入拖拽库。
+**决策**: 使用轻量排序对话框，通过“上移 / 下移”重排本地列表后调用 `/plan/sort` 保存。
+**理由**: 足够满足后台排序需求，并且不引入新的交互依赖和维护成本。

.helloagents/plan/202604232325_admin-frontend-subscription-plan-management/tasks.md

@@ -0,0 +1,56 @@
+# 任务清单: admin-frontend-subscription-plan-management
+
+> **@status:** completed | 2026-04-23 23:56
+
+```yaml
+@feature: admin-frontend-subscription-plan-management
+@created: 2026-04-23
+@status: completed
+@mode: R3
+```
+
+## 进度概览
+
+| 完成 | 失败 | 跳过 | 总数 |
+|------|------|------|------|
+| 6 | 0 | 0 | 6 |
+
+---
+
+## 任务列表
+
+### 1. 数据层
+
+- [√] 1.1 在 `admin-frontend/src/types/api.d.ts` 中补齐套餐管理、权限组、价格映射与保存载荷类型 | depends_on: []
+- [√] 1.2 在 `admin-frontend/src/api/admin.ts` 中新增套餐与权限组相关请求封装 | depends_on: [1.1]
+- [√] 1.3 新增 `admin-frontend/src/utils/plans.ts`，集中处理价格、表单、Markdown 与排序辅助逻辑 | depends_on: [1.1]
+
+### 2. 套餐管理视图
+
+- [√] 2.1 新增 `admin-frontend/src/views/subscriptions/PlanEditorDrawer.vue`，实现套餐创建/编辑抽屉、标签输入、价格矩阵与说明预览 | depends_on: [1.2,1.3]
+- [√] 2.2 新增 `admin-frontend/src/views/subscriptions/PlansView.vue`，实现列表、搜索、分页、状态开关、删除与排序编辑 | depends_on: [1.2,1.3,2.1]
+
+### 3. 导航与验收
+
+- [√] 3.1 在 `admin-frontend/src/router/index.ts` 与 `admin-frontend/src/layouts/AdminLayout.vue` 中补齐“订阅管理”分组和套餐管理入口 | depends_on: [2.2]
+- [√] 3.2 运行 `admin-frontend` 构建验证，并检查根仓与 `public/assets/admin` 子模块状态 | depends_on: [3.1]
+
+---
+
+## 执行日志
+
+| 时间 | 任务 | 状态 | 备注 |
+|------|------|------|------|
+| 2026-04-23 23:25 | 方案包初始化 | completed | 已确认订阅管理仅完整实现套餐管理，其余子菜单本轮只保留入口 |
+| 2026-04-23 23:39 | 1.1 / 1.2 / 1.3 | completed | 已补齐套餐类型、API 与 `utils/plans.ts`，完成价格、说明与排序辅助逻辑 |
+| 2026-04-23 23:48 | 2.1 / 2.2 / 3.1 | completed | 已完成套餐管理页、编辑抽屉、订阅管理侧边栏与禁用入口文案 |
+| 2026-04-23 23:56 | 3.2 | completed | `npm run build` 通过；浏览器直连 `#/subscriptions/plans` 因缺少本地登录态被重定向到 `/login`，已补代码级视觉自检与子模块状态检查 |
+
+---
+
+## 执行备注
+
+> 记录执行过程中的重要说明、决策变更、风险提示等
+
+- 当前工作树存在其他未提交变更，实施过程中已避免覆盖与本轮无关的现有修改。
+- `public/assets/admin` 为构建产物子模块，构建后已确认根仓显示 `m public/assets/admin`，子模块内部为新旧产物替换状态。

.helloagents/plan/202604232330_admin-frontend-queue-error-details/.status.json

@@ -0,0 +1,11 @@
+{
+  "status": "completed",
+  "completed": 6,
+  "failed": 0,
+  "pending": 0,
+  "total": 6,
+  "done": 6,
+  "percent": 100,
+  "current": "失败作业详情入口、弹窗与构建验证已完成",
+  "updated_at": "2026-04-23 23:38:00"
+}

.helloagents/plan/202604232330_admin-frontend-queue-error-details/proposal.md

@@ -0,0 +1,96 @@
+# 变更提案: admin-frontend-queue-error-details
+
+## 元信息
+```yaml
+类型: 功能增强
+方案类型: implementation
+优先级: P1
+状态: 已完成
+创建: 2026-04-23
+```
+
+---
+
+## 1. 需求
+
+### 背景
+当前 `admin-frontend` 仪表盘“作业详情”面板仅展示队列概览指标，管理员无法直接查看失败作业的具体报错内容。排查队列异常时，需要额外进入后端或 Horizon 页面，链路过长。
+
+### 目标
+- 在 `admin-frontend` 仪表盘“作业详情”面板新增“查看报错详情”入口。
+- 点击后弹出失败作业详情弹窗，集中展示失败作业列表、报错摘要、失败时间与队列信息。
+- 保持 `apple/DESIGN.md` 约束：纯色分区、单一蓝色强调、低噪音交互。
+
+### 约束条件
+```yaml
+范围约束: 仅调整 admin-frontend 仪表盘与失败作业弹窗，不改动 Laravel 后端接口行为
+视觉约束: 延续 Apple 风格，避免高饱和告警面板和复杂多列控制区
+技术约束: 复用现有 Element Plus / axios 能力，不新增第三方依赖
+业务约束: 前端需兼容 Horizon 失败作业字段可能存在的格式差异
+```
+
+### 验收标准
+- [ ] “作业详情”面板新增“查看报错详情”按钮，并符合当前仪表盘视觉基线。
+- [ ] 点击按钮后可打开弹窗，展示失败作业总数、失败作业列表、报错摘要、失败时间和队列名。
+- [ ] 当失败作业为空时，有明确空状态提示；加载失败时有明确错误反馈。
+- [ ] `admin-frontend` 构建通过，产物成功输出到 `public/assets/admin`。
+
+---
+
+## 2. 方案
+
+### 技术方案
+1. 在 `src/api/admin.ts` 中新增失败作业接口封装，并在 `src/types/api.d.ts` 中补充失败作业响应类型。
+2. 新建 `src/views/dashboard/QueueFailedJobsDialog.vue`，负责弹窗数据加载、失败作业列表渲染、分页与空状态/错误态处理。
+3. 在 `src/views/dashboard/DashboardView.vue` 的“作业详情”面板增加“查看报错详情”按钮，并管理弹窗打开状态。
+
+### 影响范围
+```yaml
+涉及模块:
+  - admin-frontend/src/views/dashboard/DashboardView.vue
+  - admin-frontend/src/views/dashboard/QueueFailedJobsDialog.vue
+  - admin-frontend/src/api/admin.ts
+  - admin-frontend/src/types/api.d.ts
+  - admin-frontend/src/env.d.ts
+  - public/assets/admin (构建产物输出)
+预计变更文件: 5-7
+```
+
+### 风险评估
+| 风险 | 等级 | 应对 |
+|------|------|------|
+| Horizon 返回字段在不同版本存在差异 | 中 | 前端按多字段兜底提取任务名、队列名和失败时间 |
+| 报错文本过长导致弹窗密度过高 | 中 | 默认展示摘要，长文本采用可换行容器，不在主面板直接展开 |
+| 构建产物写入子模块后状态不易观察 | 中 | 构建后同时检查根仓和 `public/assets/admin` 子模块状态 |
+
+---
+
+## 3. 成果设计
+
+### 设计方向
+- **美学基调**: 黑色作业面板内保留克制的 Apple 风格，弹窗内部以浅灰层次承载错误列表。
+- **交互模式**: 主面板只增加一个低干扰入口按钮，详细信息集中放入弹窗，避免仪表盘直接堆叠错误文本。
+- **记忆点**: 通过“概览指标 + 详情弹窗”的双层结构，把队列异常从“只看数量”提升到“可直接定位报错”。
+
+### 视觉要素
+- **配色**: 继续使用 `#0071e3` 作为交互强调，错误摘要使用低饱和红色辅助标签，不破坏整体黑白基调。
+- **排版**: 弹窗头部保持 Apple 风格大标题，内容区采用信息块 + 列表节奏，不做复杂表单式布局。
+- **状态**: 提供加载态、空状态、异常态和分页态，确保操作反馈完整。
+
+---
+
+## 4. 技术决策
+
+### admin-frontend-queue-error-details#D001: 使用弹窗承载失败作业详情而非直接在仪表盘展开
+**日期**: 2026-04-23
+**状态**: ✅采纳
+**背景**: 用户要求“添加查看详情报错按钮，并点击后添加弹窗显示所有报错”。
+**决策**: 主面板只提供入口按钮，失败作业详情统一放在弹窗内展示。
+**理由**: 更符合当前 Apple 风格的克制表达，也避免仪表盘信息密度失控。
+
+### admin-frontend-queue-error-details#D002: 前端兼容式解析 Horizon 失败作业字段
+**日期**: 2026-04-23
+**状态**: ✅采纳
+**背景**: 后端直接透传 Horizon 失败作业记录，字段可能因版本和 payload 结构不同而有差异。
+**决策**: 前端通过多字段兜底函数提取任务名、队列名、失败时间与报错摘要。
+**理由**: 在不改动后端接口的前提下，提高界面健壮性，减少联调阻塞。

.helloagents/plan/202604232330_admin-frontend-queue-error-details/tasks.md

@@ -0,0 +1,54 @@
+# 任务清单: admin-frontend-queue-error-details
+
+> **@status:** completed | 2026-04-23 23:38
+
+```yaml
+@feature: admin-frontend-queue-error-details
+@created: 2026-04-23
+@status: completed
+@mode: R2
+```
+
+## 进度概览
+
+| 完成 | 失败 | 跳过 | 总数 |
+|------|------|------|------|
+| 6 | 0 | 0 | 6 |
+
+---
+
+## 任务列表
+
+### 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/views/dashboard/QueueFailedJobsDialog.vue`，实现失败作业弹窗、摘要和分页 | depends_on: [1.2]
+- [√] 2.2 在 `admin-frontend/src/views/dashboard/DashboardView.vue` 中接入“查看报错详情”按钮与弹窗状态 | depends_on: [2.1]
+
+### 3. 验证与产物
+
+- [√] 3.1 运行 `admin-frontend` 构建验证，确认类型检查和 Vite 构建通过 | depends_on: [2.2]
+- [√] 3.2 复核根仓与 `public/assets/admin` 子模块状态，确保产物变更可见 | depends_on: [3.1]
+
+---
+
+## 执行日志
+
+| 时间 | 任务 | 状态 | 备注 |
+|------|------|------|------|
+| 2026-04-23 23:30 | 方案包初始化 | completed | 用户确认采用“失败作业列表 + 报错摘要 + 失败时间 + 队列名”方案 |
+| 2026-04-23 23:37 | 接口与弹窗实现 | completed | 已接入失败作业类型、API、弹窗组件和仪表盘入口 |
+| 2026-04-23 23:38 | 构建与产物复核 | completed | 补齐 `src/env.d.ts` 后完成 clean typecheck，`npm run build` 通过，`public/assets/admin` 子模块产生新产物变更 |
+
+---
+
+## 执行备注
+
+> 记录执行过程中的重要说明、决策变更、风险提示等
+
+- 当前仓存在历史占位方案包 `202604210515_admin-frontend-ticket-management`，本轮单独创建精确方案包，避免任务边界混淆。
+- 浏览器自动化实例当前被占用，本轮以代码审查 + 构建产物复核代替登录态页面截图验收。