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

feat(admin-frontend): 完成订阅与系统管理真实工作台

Browse Source 
补齐订单、优惠券、主题、插件、公告与支付管理页面，
接入对应后台接口、路由入口与工具层类型定义。
同时修复套餐页开关初始化误写问题，避免浏览即触发写操作。

在订阅协议侧为 Stash 导出增加 AnyTLS 版本守卫，
未知版本或低于 3.3.0 时不再导出该协议，并补充回归测试与知识记录。
This commit is contained in:
yinjianm
2026-04-24 16:52:41 +08:00
parent 16203b14f6
commit f7cef30b9c
89 changed files with 11122 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.helloagents/.ralph-breaker.json
+2 -2
View File
@@ -1,4 +1,4 @@
{
"consecutive_failures": 2,
"last_failure": "2026-04-23T16:27:30.802Z"
"consecutive_failures": 5,
"last_failure": "2026-04-24T08:27:44.702Z"
}
.helloagents/.ralph-closeout.json
+7 -7
View File
@@ -1,19 +1,19 @@
{
"updatedAt": "2026-04-23T16:26:05.357Z",
"source": "~auto",
"originCommand": "~verify",
"updatedAt": "2026-04-24T08:26:56.724Z",
"source": "manual",
"originCommand": "fix-stash-anytls-compat-filter",
"requirementsCoverage": {
"status": "PASS",
"summary": "已完成系统管理侧边栏分组、系统配置真实页面，以及插件/主题/公告/支付/知识库 5 个结构化占位页；系统配置已接入真实 config API 读写与辅助动作入口。"
"summary": "已按保守兼容策略在 Stash 导出器中过滤未知版本与低版本的 AnyTLS，并补方案包记录。"
},
"deliveryChecklist": {
"status": "PASS",
"summary": "已通过 admin-frontend 的 npm run build，并完成系统配置默认态/保存态/错误态与 5 个系统管理占位页的 Playwright 结构验收；知识库与方案归档已同步。"
"summary": "代码修复、静态回归测试文件、知识库同步与状态快照均已完成；运行时验证受 PHP 环境缺失阻塞并已显式记录。"
},
"fingerprint": {
"available": true,
"unstaged": ".helloagents/CHANGELOG.md | 56 ++\n .helloagents/INDEX.md | 6 +-\n .helloagents/archive/_index.md | 12 +\n .helloagents/context.md | 15 +-\n .helloagents/modules/_index.md | 2 +-\n .helloagents/modules/admin-frontend.md | 18 +-\n admin-frontend/src/api/admin.ts | 86 ++-\n admin-frontend/src/layouts/AdminLayout.vue | 129 ++++-\n admin-frontend/src/router/index.ts | 60 +++\n admin-frontend/src/types/api.d.ts | 125 +++++\n admin-frontend/src/types/components.d.ts | 2 +\n admin-frontend/src/utils/dashboard.ts | 21 +-\n .../src/views/dashboard/DashboardView.vue | 595 +++++++++++++++++----\n app/Http/Controllers/V2/Admin/StatController.php | 8 +-\n public/assets/admin | 0\n 15 files changed, 1015 insertions(+), 120 deletions(-)",
"unstaged": ".helloagents/.ralph-breaker.json | 4 +-\n .helloagents/.ralph-closeout.json | 14 +-\n .helloagents/.ralph-review.json | 24 +-\n .helloagents/.ralph-visual.json | 36 ++-\n .helloagents/CHANGELOG.md | 63 +++++\n .helloagents/INDEX.md | 7 +-\n .helloagents/archive/_index.md | 10 +\n .helloagents/context.md | 26 +-\n .helloagents/modules/_index.md | 1 +\n .helloagents/modules/admin-frontend.md | 29 ++-\n .../2026-04-23T15-07-42-905Z-unknown-t2hj2g.jsonl | 18 --\n .helloagents/sessions/master/default/STATE.md | 21 +-\n admin-frontend/src/api/admin.ts | 229 +++++++++++++++++\n admin-frontend/src/layouts/AdminLayout.vue | 4 +-\n admin-frontend/src/router/index.ts | 22 +-\n admin-frontend/src/types/api.d.ts | 281 ++++++++++++++++++++-\n admin-frontend/src/utils/plans.ts | 9 +\n .../src/views/subscriptions/PlansView.vue | 13 +-\n app/Protocols/Stash.php | 21 ++\n public/assets/admin | 0\n 20 files changed, 740 insertions(+), 92 deletions(-)",
"staged": "",
"combined": ".helloagents/CHANGELOG.md | 56 ++\n .helloagents/INDEX.md | 6 +-\n .helloagents/archive/_index.md | 12 +\n .helloagents/context.md | 15 +-\n .helloagents/modules/_index.md | 2 +-\n .helloagents/modules/admin-frontend.md | 18 +-\n admin-frontend/src/api/admin.ts | 86 ++-\n admin-frontend/src/layouts/AdminLayout.vue | 129 ++++-\n admin-frontend/src/router/index.ts | 60 +++\n admin-frontend/src/types/api.d.ts | 125 +++++\n admin-frontend/src/types/components.d.ts | 2 +\n admin-frontend/src/utils/dashboard.ts | 21 +-\n .../src/views/dashboard/DashboardView.vue | 595 +++++++++++++++++----\n app/Http/Controllers/V2/Admin/StatController.php | 8 +-\n public/assets/admin | 0\n 15 files changed, 1015 insertions(+), 120 deletions(-)\n---"
"combined": ".helloagents/.ralph-breaker.json | 4 +-\n .helloagents/.ralph-closeout.json | 14 +-\n .helloagents/.ralph-review.json | 24 +-\n .helloagents/.ralph-visual.json | 36 ++-\n .helloagents/CHANGELOG.md | 63 +++++\n .helloagents/INDEX.md | 7 +-\n .helloagents/archive/_index.md | 10 +\n .helloagents/context.md | 26 +-\n .helloagents/modules/_index.md | 1 +\n .helloagents/modules/admin-frontend.md | 29 ++-\n .../2026-04-23T15-07-42-905Z-unknown-t2hj2g.jsonl | 18 --\n .helloagents/sessions/master/default/STATE.md | 21 +-\n admin-frontend/src/api/admin.ts | 229 +++++++++++++++++\n admin-frontend/src/layouts/AdminLayout.vue | 4 +-\n admin-frontend/src/router/index.ts | 22 +-\n admin-frontend/src/types/api.d.ts | 281 ++++++++++++++++++++-\n admin-frontend/src/utils/plans.ts | 9 +\n .../src/views/subscriptions/PlansView.vue | 13 +-\n app/Protocols/Stash.php | 21 ++\n public/assets/admin | 0\n 20 files changed, 740 insertions(+), 92 deletions(-)\n---"
}
}
.helloagents/.ralph-review.json
+11 -13
View File
@@ -1,24 +1,22 @@
{
"updatedAt": "2026-04-23T16:25:14.576Z",
"source": "~auto",
"updatedAt": "2026-04-24T08:19:23.678Z",
"source": "manual",
"originCommand": "~verify",
"reviewMode": "review-first",
"conclusion": "审查结论：未发现阻塞问题。系统管理导航、系统配置数据链路与占位页范围边界保持一致，未发现需要阻断交付的逻辑或安全问题。",
"reviewMode": "manual-self-review",
"conclusion": "已按插件管理方案的 reviewerFocus 审阅列表工作台、动作边界与详情抽屉数据流；当前实现未发现阻断性交付问题。",
"outcome": "clean",
"findings": [],
"fileReferences": [
"admin-frontend/src/router/index.ts",
"admin-frontend/src/layouts/AdminLayout.vue",
"admin-frontend/src/api/admin.ts",
"admin-frontend/src/types/api.d.ts",
"admin-frontend/src/utils/systemConfig.ts",
"admin-frontend/src/views/system/SystemConfigView.vue",
"admin-frontend/src/views/system/SystemPlaceholderView.vue"
"admin-frontend/src/views/system/PluginManagementView.vue",
"admin-frontend/src/views/system/PluginCard.vue",
"admin-frontend/src/views/system/PluginDetailDrawer.vue",
"admin-frontend/src/utils/plugins.ts",
"admin-frontend/src/api/admin.ts"
],
"fingerprint": {
"available": true,
"unstaged": ".helloagents/CHANGELOG.md | 56 ++\n .helloagents/INDEX.md | 6 +-\n .helloagents/archive/_index.md | 12 +\n .helloagents/context.md | 15 +-\n .helloagents/modules/_index.md | 2 +-\n .helloagents/modules/admin-frontend.md | 18 +-\n admin-frontend/src/api/admin.ts | 86 ++-\n admin-frontend/src/layouts/AdminLayout.vue | 129 ++++-\n admin-frontend/src/router/index.ts | 60 +++\n admin-frontend/src/types/api.d.ts | 125 +++++\n admin-frontend/src/types/components.d.ts | 2 +\n admin-frontend/src/utils/dashboard.ts | 21 +-\n .../src/views/dashboard/DashboardView.vue | 595 +++++++++++++++++----\n app/Http/Controllers/V2/Admin/StatController.php | 8 +-\n public/assets/admin | 0\n 15 files changed, 1015 insertions(+), 120 deletions(-)",
"unstaged": ".helloagents/.ralph-breaker.json | 4 +-\n .helloagents/.ralph-closeout.json | 14 +-\n .helloagents/.ralph-review.json | 23 +-\n .helloagents/.ralph-visual.json | 37 ++-\n .helloagents/CHANGELOG.md | 42 +++\n .helloagents/INDEX.md | 4 +-\n .helloagents/archive/_index.md | 6 +\n .helloagents/context.md | 16 +-\n .helloagents/modules/admin-frontend.md | 26 +-\n .../2026-04-23T15-07-42-905Z-unknown-t2hj2g.jsonl | 18 --\n .helloagents/sessions/master/default/STATE.md | 21 +-\n admin-frontend/src/api/admin.ts | 229 +++++++++++++++++\n admin-frontend/src/layouts/AdminLayout.vue | 4 +-\n admin-frontend/src/router/index.ts | 22 +-\n admin-frontend/src/types/api.d.ts | 281 ++++++++++++++++++++-\n admin-frontend/src/utils/plans.ts | 9 +\n .../src/views/subscriptions/PlansView.vue | 13 +-\n public/assets/admin | 0\n 18 files changed, 679 insertions(+), 90 deletions(-)",
"staged": "",
"combined": ".helloagents/CHANGELOG.md | 56 ++\n .helloagents/INDEX.md | 6 +-\n .helloagents/archive/_index.md | 12 +\n .helloagents/context.md | 15 +-\n .helloagents/modules/_index.md | 2 +-\n .helloagents/modules/admin-frontend.md | 18 +-\n admin-frontend/src/api/admin.ts | 86 ++-\n admin-frontend/src/layouts/AdminLayout.vue | 129 ++++-\n admin-frontend/src/router/index.ts | 60 +++\n admin-frontend/src/types/api.d.ts | 125 +++++\n admin-frontend/src/types/components.d.ts | 2 +\n admin-frontend/src/utils/dashboard.ts | 21 +-\n .../src/views/dashboard/DashboardView.vue | 595 +++++++++++++++++----\n app/Http/Controllers/V2/Admin/StatController.php | 8 +-\n public/assets/admin | 0\n 15 files changed, 1015 insertions(+), 120 deletions(-)\n---"
"combined": ".helloagents/.ralph-breaker.json | 4 +-\n .helloagents/.ralph-closeout.json | 14 +-\n .helloagents/.ralph-review.json | 23 +-\n .helloagents/.ralph-visual.json | 37 ++-\n .helloagents/CHANGELOG.md | 42 +++\n .helloagents/INDEX.md | 4 +-\n .helloagents/archive/_index.md | 6 +\n .helloagents/context.md | 16 +-\n .helloagents/modules/admin-frontend.md | 26 +-\n .../2026-04-23T15-07-42-905Z-unknown-t2hj2g.jsonl | 18 --\n .helloagents/sessions/master/default/STATE.md | 21 +-\n admin-frontend/src/api/admin.ts | 229 +++++++++++++++++\n admin-frontend/src/layouts/AdminLayout.vue | 4 +-\n admin-frontend/src/router/index.ts | 22 +-\n admin-frontend/src/types/api.d.ts | 281 ++++++++++++++++++++-\n admin-frontend/src/utils/plans.ts | 9 +\n .../src/views/subscriptions/PlansView.vue | 13 +-\n public/assets/admin | 0\n 18 files changed, 679 insertions(+), 90 deletions(-)\n---"
}
}
.helloagents/.ralph-visual.json
+15 -21
View File
@@ -1,37 +1,31 @@
{
"updatedAt": "2026-04-23T16:25:51.056Z",
"source": "~auto",
"originCommand": "~verify",
"reason": "系统管理属于整页新建后台视图，需要确认导航、系统配置长表单层级与占位页结构在浏览器中符合 Apple 风格契约",
"updatedAt": "2026-04-24T08:26:29.760Z",
"source": "manual",
"originCommand": "generic-r2",
"reason": "订单管理属于真实后台业务页，需要确认列表结构、筛选条与详情抽屉在代码实现上与目标截图和 Apple 化后台契约一致。",
"tooling": [
"playwright (mock API fixtures)",
"code inspection"
"code inspection",
"npm run build"
],
"screensChecked": [
"#/system/config desktop",
"#/system/plugins desktop",
"#/system/themes desktop",
"#/system/notices desktop",
"#/system/payments desktop",
"#/system/knowledge desktop"
"#/subscriptions/orders desktop"
],
"statesChecked": [
"系统配置默认加载完成态",
"系统配置保存态",
"系统配置错误/重试态",
"系统模块占位态"
"订单列表默认加载完成态",
"分配订单抽屉展开态",
"订单详情抽屉展开态"
],
"status": "PASS",
"summary": "已通过 Playwright + Mock API 对系统配置页默认态、保存态、错误态，以及 5 个系统管理占位页完成桌面端结构验收；截图产物位于 .helloagents/replay/system-management-visual/，页面层级与 Apple 风格后台契约一致。",
"summary": "已基于代码结构检查与 npm run build 对订单管理首版完成结构化验收：列表页已接入真实 order 接口，筛选条、分配订单抽屉与详情抽屉实现齐全；当前因本地缺少真实后台登录态和浏览器工具，视觉结论以代码级契约核对为准。",
"findings": [],
"recommendations": [
"下一阶段优先为插件、主题、公告、支付与知识库入口补齐真实 CRUD 页面",
"如后续提供本地登录态，可在真实接口环境下补做无 Mock 的视觉回归验收"
"下一阶段可补批量操作和礼品卡管理真实页",
"若后续具备本地登录态，可补做真实接口环境下的浏览器级视觉回归"
],
"fingerprint": {
"available": true,
"unstaged": ".helloagents/CHANGELOG.md | 56 ++\n .helloagents/INDEX.md | 6 +-\n .helloagents/archive/_index.md | 12 +\n .helloagents/context.md | 15 +-\n .helloagents/modules/_index.md | 2 +-\n .helloagents/modules/admin-frontend.md | 18 +-\n admin-frontend/src/api/admin.ts | 86 ++-\n admin-frontend/src/layouts/AdminLayout.vue | 129 ++++-\n admin-frontend/src/router/index.ts | 60 +++\n admin-frontend/src/types/api.d.ts | 125 +++++\n admin-frontend/src/types/components.d.ts | 2 +\n admin-frontend/src/utils/dashboard.ts | 21 +-\n .../src/views/dashboard/DashboardView.vue | 595 +++++++++++++++++----\n app/Http/Controllers/V2/Admin/StatController.php | 8 +-\n public/assets/admin | 0\n 15 files changed, 1015 insertions(+), 120 deletions(-)",
"unstaged": ".helloagents/.ralph-breaker.json | 4 +-\n .helloagents/.ralph-closeout.json | 16 +-\n .helloagents/.ralph-review.json | 24 +-\n .helloagents/.ralph-visual.json | 43 ++--\n .helloagents/CHANGELOG.md | 63 +++++\n .helloagents/INDEX.md | 7 +-\n .helloagents/archive/_index.md | 10 +\n .helloagents/context.md | 26 +-\n .helloagents/modules/_index.md | 1 +\n .helloagents/modules/admin-frontend.md | 29 ++-\n .../2026-04-23T15-07-42-905Z-unknown-t2hj2g.jsonl | 18 --\n .helloagents/sessions/master/default/STATE.md | 21 +-\n admin-frontend/src/api/admin.ts | 229 +++++++++++++++++\n admin-frontend/src/layouts/AdminLayout.vue | 4 +-\n admin-frontend/src/router/index.ts | 22 +-\n admin-frontend/src/types/api.d.ts | 281 ++++++++++++++++++++-\n admin-frontend/src/utils/plans.ts | 9 +\n .../src/views/subscriptions/PlansView.vue | 13 +-\n app/Protocols/Stash.php | 21 ++\n public/assets/admin | 0\n 20 files changed, 746 insertions(+), 95 deletions(-)",
"staged": "",
"combined": ".helloagents/CHANGELOG.md | 56 ++\n .helloagents/INDEX.md | 6 +-\n .helloagents/archive/_index.md | 12 +\n .helloagents/context.md | 15 +-\n .helloagents/modules/_index.md | 2 +-\n .helloagents/modules/admin-frontend.md | 18 +-\n admin-frontend/src/api/admin.ts | 86 ++-\n admin-frontend/src/layouts/AdminLayout.vue | 129 ++++-\n admin-frontend/src/router/index.ts | 60 +++\n admin-frontend/src/types/api.d.ts | 125 +++++\n admin-frontend/src/types/components.d.ts | 2 +\n admin-frontend/src/utils/dashboard.ts | 21 +-\n .../src/views/dashboard/DashboardView.vue | 595 +++++++++++++++++----\n app/Http/Controllers/V2/Admin/StatController.php | 8 +-\n public/assets/admin | 0\n 15 files changed, 1015 insertions(+), 120 deletions(-)\n---"
"combined": ".helloagents/.ralph-breaker.json | 4 +-\n .helloagents/.ralph-closeout.json | 16 +-\n .helloagents/.ralph-review.json | 24 +-\n .helloagents/.ralph-visual.json | 43 ++--\n .helloagents/CHANGELOG.md | 63 +++++\n .helloagents/INDEX.md | 7 +-\n .helloagents/archive/_index.md | 10 +\n .helloagents/context.md | 26 +-\n .helloagents/modules/_index.md | 1 +\n .helloagents/modules/admin-frontend.md | 29 ++-\n .../2026-04-23T15-07-42-905Z-unknown-t2hj2g.jsonl | 18 --\n .helloagents/sessions/master/default/STATE.md | 21 +-\n admin-frontend/src/api/admin.ts | 229 +++++++++++++++++\n admin-frontend/src/layouts/AdminLayout.vue | 4 +-\n admin-frontend/src/router/index.ts | 22 +-\n admin-frontend/src/types/api.d.ts | 281 ++++++++++++++++++++-\n admin-frontend/src/utils/plans.ts | 9 +\n .../src/views/subscriptions/PlansView.vue | 13 +-\n app/Protocols/Stash.php | 21 ++\n public/assets/admin | 0\n 20 files changed, 746 insertions(+), 95 deletions(-)\n---"
}
}
.helloagents/CHANGELOG.md
+63
View File
@@ -1,5 +1,68 @@
# CHANGELOG
## [0.4.6] - 2026-04-24
### 修复
- **[subscription-protocols]**: 修复 `flag=stash` 订阅在未知版本或低版本客户端下仍导出 `AnyTLS` 节点的问题；现在只有 Stash `>= 3.3.0` 才会保留 `AnyTLS`，避免导入时报“**不支持 anytls 协议**” — by yinjianm
- 方案: [202604241619_fix-stash-anytls-compat-filter](plan/202604241619_fix-stash-anytls-compat-filter/)
- 决策: fix-stash-anytls-compat-filter#D001(未知版本按不支持 AnyTLS 处理), fix-stash-anytls-compat-filter#D002(仅在 Stash 导出器中做定点修复)
## [0.4.5] - 2026-04-24
### 新增
- **[admin-frontend]**: 开放“订单管理”入口，完整交付真实订单列表、类型/周期/状态筛选、分配订单抽屉、详情抽屉、手动标记已支付与佣金状态维护，并接入 `order/*` 后台接口 — by yinjianm
- 方案: [202604241620_admin-frontend-order-management](archive/2026-04/202604241620_admin-frontend-order-management/)
- 决策: admin-frontend-order-management#D001(列表页贴近用户截图并保留 Apple 化后台节奏), admin-frontend-order-management#D002(详情操作收口到订单详情抽屉而不是额外操作列), admin-frontend-order-management#D003(订单金额统一按“分→元”格式化展示)
## [0.4.4] - 2026-04-24
### 新增
- **[admin-frontend]**: 完成“支付配置”真实工作台，支持支付方式列表、关键词搜索、启停、删除、动态配置抽屉与排序模式，并接入真实 `payment/*` 后台接口 — by yinjianm
- 方案: [202604241558_admin-frontend-payment-management](archive/2026-04/202604241558_admin-frontend-payment-management/)
- 决策: admin-frontend-payment-management#D001(真实列表页+动态配置抽屉+排序对话框), admin-frontend-payment-management#D002(支付配置字段完全以后端动态表单为真相源), admin-frontend-payment-management#D003(启停继续沿用切换型接口并做同值短路保护)
## [0.4.3] - 2026-04-24
### 新增
- **[admin-frontend]**: 将 `#/system/themes` 从结构化占位页升级为真实主题管理页面，接入主题列表、当前主题切换、动态主题配置抽屉与 zip 主题上传入口 — by yinjianm
- 方案: [202604241607_admin-frontend-theme-management](archive/2026-04/202604241607_admin-frontend-theme-management/)
- 决策: admin-frontend-theme-management#D001(主题切换复用 config/save(frontend_theme)), admin-frontend-theme-management#D002(主题配置统一放入抽屉)
## [0.4.3] - 2026-04-24
### 新增
- **[admin-frontend]**: 将 `#/system/plugins` 从占位页升级为真实插件管理工作台，接入插件列表、类型 / 状态筛选、上传、安装、启停、升级、卸载，以及 README / 动态配置抽屉；同时补齐缺失的订单管理与知识库管理路由壳层以恢复 `npm run build` 通过 — by yinjianm
- 方案: [202604241553_admin-frontend-plugin-management](archive/2026-04/202604241553_admin-frontend-plugin-management/)
- 决策: admin-frontend-plugin-management#D001(插件管理采用卡片列表 + 详情抽屉), admin-frontend-plugin-management#D002(配置编辑使用动态 schema 渲染), admin-frontend-plugin-management#D003(README 与配置合并进同一个详情工作台)
## [0.4.2] - 2026-04-24
### 新增
- **[admin-frontend]**: 完成“知识库管理”真实工作台，支持知识列表、标题搜索、分类筛选、显隐切换、新增/编辑弹窗、删除与排序模式，并接入真实 `knowledge/*` 后台接口 — by yinjianm
- 方案: [202604241610_admin-frontend-knowledge-management](plan/202604241610_admin-frontend-knowledge-management/)
- 决策: admin-frontend-knowledge-management#D001(编辑器采用轻量 Markdown 方案), admin-frontend-knowledge-management#D002(列表页采用真实表格与中央对话框), admin-frontend-knowledge-management#D003(排序采用本地草稿编辑后统一提交)
## [0.4.1] - 2026-04-24
### 新增
- **[admin-frontend]**: 完成“公告管理”真实工作台，支持公告列表、标题搜索、显隐切换、新增/编辑弹窗、删除与排序模式，并接入真实 `notice/*` 后台接口 — by yinjianm
- 方案: [202604241609_admin-frontend-notice-management](plan/202604241609_admin-frontend-notice-management/)
- 决策: admin-frontend-notice-management#D001(真实列表页+编辑弹窗+排序对话框), admin-frontend-notice-management#D002(公告内容编辑继续使用轻量 Markdown 方案), admin-frontend-notice-management#D003(公告开关与标签统一归一化)
## [0.4.0] - 2026-04-24
### 新增
- **[admin-frontend]**: 开放“优惠券管理”入口，完整交付优惠券列表、关键字搜索、类型筛选、启停、删除，以及接入真实 `coupon/*` 接口的新增/编辑弹窗 — by yinjianm
- 方案: [202604241551_admin-frontend-coupon-management](archive/2026-04/202604241551_admin-frontend-coupon-management/)
- 决策: admin-frontend-coupon-management#D001(优惠券列表采用真实接口+本地搜索筛选分页), admin-frontend-coupon-management#D002(新增与编辑共用同一弹窗并统一序列化), admin-frontend-coupon-management#D003(优惠券编辑采用居中弹窗而非抽屉)
## [0.3.2] - 2026-04-24
### 修复
- **[admin-frontend]**: 修复 `#/subscriptions/plans` 页面首次加载时会误把套餐“新购”状态批量关闭的问题；现在会先归一化 `show / sell / renew` 开关值，并在同值事件下短路，避免浏览页面即触发真实写操作 — by yinjianm
- 方案: [202604241542_admin-frontend-plan-toggle-regression](plan/202604241542_admin-frontend-plan-toggle-regression/)
- 决策: admin-frontend-plan-toggle-regression#D001(前端入口先归一化套餐开关值), admin-frontend-plan-toggle-regression#D002(开关提交增加同值短路护栏)
## [0.3.0] - 2026-04-23
### 新增
.helloagents/INDEX.md
+4 -3
View File
@@ -3,19 +3,20 @@
```yaml
kb_version: 2
project: Xboard-new
updated_at: 2026-04-23
updated_at: 2026-04-24
active_package: 无
```
## 项目概览
- 类型: PHP Laravel 主仓 + `admin-frontend` Vue3 管理端前端
- 当前重点模块: `admin-frontend`
- 最新归档: `202604232345_traffic-rank-limit-backend-adapt`
- 当前重点模块: `admin-frontend`、`subscription-protocols`
- 最新归档: `202604241620_admin-frontend-order-management`
## 活跃模块
- [admin-frontend](modules/admin-frontend.md): 管理端登录、主布局、仪表盘、用户/节点/订阅/系统管理与管理 API 前端封装
- [subscription-protocols](modules/subscription-protocols.md): 客户端订阅导出入口、协议适配器与版本兼容过滤
## 归档与变更
.helloagents/archive/2026-04/202604241551_admin-frontend-coupon-management/.status.json
+11
View File
@@ -0,0 +1,11 @@
{
"status": "completed",
"completed": 6,
"failed": 0,
"pending": 0,
"total": 6,
"done": 6,
"percent": 100,
"current": "优惠券管理页面、弹窗与构建验证已完成，等待归档",
"updated_at": "2026-04-24 16:28:00"
}
.helloagents/archive/2026-04/202604241551_admin-frontend-coupon-management/proposal.md
+196
View File
@@ -0,0 +1,196 @@
# 变更提案: admin-frontend-coupon-management
## 元信息
```yaml
类型: 新功能
方案类型: implementation
优先级: P1
状态: 执行中
创建: 2026-04-24
```
---
## 1. 需求
### 背景
当前 `admin-frontend` 已完成仪表盘、用户管理、节点管理、套餐管理与系统配置，但“订阅管理”分组下的“优惠券管理”仍是禁用占位。用户本轮明确要求参考 `apple/DESIGN.md`、项目级 `.helloagents/DESIGN.md` 与提供的两张参考图，继续补完真正可用的优惠券管理页面，包括列表工作台与新增/编辑弹窗。
### 目标
- 开放侧边栏中的“优惠券管理”入口，并接入真实页面与路由。
- 基于现有 Laravel `coupon/*` 接口，完成优惠券列表、搜索、类型筛选、启停、删除、新增与编辑。
- 页面视觉延续当前 Apple 化后台，尽量还原参考图中的黑白结构、紧凑表格与表单弹窗。
### 约束条件
```yaml
技术约束: 继续使用 Vue3 + TypeScript + Element Plus + Vite，不引入额外状态管理或重型日期/富文本依赖
业务约束: 后端接口仅使用现有 `/coupon/fetch` `/coupon/generate` `/coupon/update` `/coupon/drop`，不改 Laravel API
数据约束: 套餐限制项沿用现有 `/plan/fetch` 返回结果，优惠券周期限制遵循后端 legacy period 键值
视觉约束: 遵循 `apple/DESIGN.md` 与 `.helloagents/DESIGN.md`，保持与仪表盘/套餐管理同一视觉家族
```
### 验收标准
- [ ] 左侧“订阅管理”分组中的“优惠券管理”由禁用态切换为真实可点击入口，并进入独立页面。
- [ ] 优惠券管理页支持真实数据读取、关键字搜索、类型筛选、本地分页、启用开关、编辑和删除。
- [ ] “添加优惠券 / 编辑优惠券”弹窗支持名称、批量生成数量、自定义优惠码、类型和值、有效期、总使用次数、每人使用次数、指定周期与指定订阅。
- [ ] 页面中的类型标签、剩余次数、每人限制、有效期与过期提示可正确展示，并与后端字段含义一致。
- [ ] `admin-frontend` 构建通过，且知识库同步反映“优惠券管理”已从占位入口升级为真实页面。
---
## 2. 方案
### 技术方案
1. 扩展 `src/types/api.d.ts` 与 `src/api/admin.ts`，新增优惠券列表项、保存载荷、分页查询与计划选项的类型、请求封装。
2. 新增 `src/utils/coupons.ts`，集中处理优惠券类型标签、legacy period 选项、时间范围换算、表单默认值、列表本地过滤与过期文案。
3. 新增 `src/views/subscriptions/CouponsView.vue` 与 `CouponEditorDialog.vue`：
- `CouponsView` 负责黑色首屏、工具条、表格、分页、行内开关与操作按钮。
- `CouponEditorDialog` 负责新增/编辑表单、指定周期/订阅、时间范围和数值字段校验。
4. 在 `AdminLayout.vue` 与 `router/index.ts` 中启用“优惠券管理”菜单与 `/subscriptions/coupons` 路由，同时保持“订单管理 / 礼品卡管理”为未完成状态。
### 影响范围
```yaml
涉及模块:
- admin-frontend/src/layouts: 开放优惠券菜单入口
- admin-frontend/src/router: 新增优惠券管理路由
- admin-frontend/src/api: 新增 coupon 接口封装
- admin-frontend/src/types: 新增优惠券类型定义
- admin-frontend/src/utils: 新增优惠券数据转换与展示逻辑
- admin-frontend/src/views/subscriptions: 新增优惠券页面、弹窗与样式
预计变更文件: 7-9
```
### 风险评估
| 风险 | 等级 | 应对 |
|------|------|------|
| `/coupon/fetch` 的服务端筛选能力有限，关键字无法同时覆盖名称与券码 | 中 | 前端优先一次拉取合理数量后做本地搜索与分页，避免错误的 AND 过滤 |
| 编辑接口复用 `/coupon/generate`，字段与新增表单共用，空值和 legacy period 容易提交错误 | 中 | 在 `utils/coupons.ts` 中统一序列化，空数组转 `undefined`，时间统一转 Unix 秒 |
| 参考图包含较丰富的表格状态与表单布局，若实现不克制容易脱离既有后台风格 | 中 | 复用现有 Apple Admin token、表格与弹窗风格，不额外引入第二套后台皮肤 |
---
## 3. 技术设计（可选）
### 架构设计
```mermaid
flowchart TD
A[CouponsView] --> B[admin.ts coupon 接口]
A --> C[coupons.ts 展示/序列化工具]
A --> D[CouponEditorDialog]
D --> B
D --> C
D --> E[getPlans]
```
### API设计
#### GET /coupon/fetch
- **请求**: `{ current, pageSize }`
- **响应**: `{ total, current_page, per_page, last_page, data[] }`
#### POST /coupon/generate
- **请求**: `{ id?, generate_count?, name, code?, type, value, started_at, ended_at, limit_use?, limit_use_with_user?, limit_plan_ids?, limit_period? }`
- **响应**: `{ status, data }`
#### POST /coupon/update
- **请求**: `{ id, show }`
- **响应**: `{ status, data }`
### 数据模型
| 字段 | 类型 | 说明 |
|------|------|------|
| id | number | 优惠券 ID |
| show | boolean | 是否启用 |
| name | string | 优惠券名称 |
| type | 1 \| 2 | 1=按金额优惠，2=按比例优惠 |
| value | number | 金额分/折扣整数 |
| code | string | 券码 |
| limit_use | number \| null | 总可用次数 |
| limit_use_with_user | number \| null | 每人可用次数 |
| limit_plan_ids | string[] \| null | 限制套餐 |
| limit_period | string[] \| null | legacy 周期键 |
| started_at / ended_at | number | 生效时间范围（Unix 秒） |
---
## 4. 核心场景
### 场景: 运营创建单张优惠券
**模块**: admin-frontend/subscriptions
**条件**: 管理员已登录，进入 `#/subscriptions/coupons`
**行为**: 点击“添加优惠券”，填写名称、类型、金额、有效期并提交
**结果**: 新优惠券保存成功，列表刷新并展示新记录
### 场景: 运营批量生成优惠码
**模块**: admin-frontend/subscriptions
**条件**: 管理员在新增弹窗中填写 `generate_count`
**行为**: 提交批量生成请求
**结果**: 后端批量创建优惠券，前端提示成功并刷新列表
### 场景: 运营筛选并停用过期优惠券
**模块**: admin-frontend/subscriptions
**条件**: 列表中存在多种类型与已过期记录
**行为**: 使用关键字或类型筛选找到目标记录，关闭启用开关
**结果**: 对应优惠券 `show=false`，列表状态即时更新
---
## 5. 技术决策
### admin-frontend-coupon-management#D001: 优惠券列表采用真实接口 + 本地搜索/筛选/分页
**日期**: 2026-04-24
**状态**: ✅采纳
**背景**: 后端 `/coupon/fetch` 支持分页，但关键字筛选以 `where like` 串联多个字段时不适合做“名称或券码”搜索。
**选项分析**:
| 选项 | 优点 | 缺点 |
|------|------|------|
| A: 完全依赖后端筛选 | 数据量更轻 | 关键字搜索能力受限，名称/券码无法自然并行匹配 |
| B: 拉取合理数量后本地搜索/筛选/分页 | 交互更贴近参考图，搜索更灵活 | 极大数据量下效率不如纯服务端 |
**决策**: 选择方案 B
**理由**: 当前后台优惠券数量通常不大，本地处理可更稳定满足截图中的使用方式。
**影响**: `CouponsView.vue`、`admin.ts`、`coupons.ts`
### admin-frontend-coupon-management#D002: 新增与编辑共用同一弹窗，并统一序列化到 `/coupon/generate`
**日期**: 2026-04-24
**状态**: ✅采纳
**背景**: 后端没有独立的 coupon save/update 表单接口，新增与编辑都通过 `generate` 处理。
**选项分析**:
| 选项 | 优点 | 缺点 |
|------|------|------|
| A: 新增/编辑拆两套表单 | 心智更直观 | 代码重复，字段校验需要维护两份 |
| B: 共用一个表单模型与序列化逻辑 | 结构更稳定，便于维护 | 需要额外处理编辑态初始值 |
**决策**: 选择方案 B
**理由**: 与当前套餐编辑抽屉模式一致，能减少重复逻辑并提高一致性。
**影响**: `CouponEditorDialog.vue`、`utils/coupons.ts`
### admin-frontend-coupon-management#D003: 编辑态继续采用居中弹窗而非侧边抽屉
**日期**: 2026-04-24
**状态**: ✅采纳
**背景**: 参考图中优惠券编辑器为居中对话框，且字段密度更适合聚焦式表单。
**选项分析**:
| 选项 | 优点 | 缺点 |
|------|------|------|
| A: 复用抽屉模式 | 与套餐管理统一 | 与参考图差异更大，纵向表单视觉焦点分散 |
| B: 改为居中弹窗 | 更贴近参考图，聚焦更强 | 需要单独编写对话框布局样式 |
**决策**: 选择方案 B
**理由**: 这页的主要新增价值就在参考图里的“表格 + 弹窗”组合，值得贴近还原。
**影响**: `CouponEditorDialog.vue` 及其样式
---
## 6. 成果设计
### 设计方向
- **美学基调**: Apple Admin Promotions。像 Apple 后台里的运营配置页，黑色首屏负责建立业务主题，正文工作台回到白底高密度表格，让折扣配置看起来更像精密运营台而不是营销页面。
- **记忆点**: 大标题“优惠券管理”与白色表格之间形成明显的黑白切面；弹窗内部用整齐的双列字段和轻描边区块还原截图的“精密表单感”。
- **参考**: `apple/DESIGN.md`、`.helloagents/DESIGN.md`、用户上传的优惠券列表与添加弹窗截图
### 视觉要素
- **配色**: 首屏 `#000000`，工作区 `#ffffff`，页面背景 `#f5f5f7`，强调色 `#0071e3`，过期提示用浅红底 `rgba(201, 52, 40, 0.08)`
- **字体**: 延续项目现有系统字体栈，标题走大字号紧行高，表格与辅助信息维持更轻的运营化层级
- **布局**: 首屏 Hero + 工具条 + 表格工作台；编辑器采用居中弹窗，字段按双列网格排布，底部操作区固定在弹窗底部
- **动效**: 保留开关切换、弹窗开合、按钮 hover 与筛选状态切换的轻量动效，不引入额外炫技动画
- **氛围**: 工作台继续使用克制阴影、圆角白底与 Apple 式留白，避免多余卡片堆叠
### 技术约束
- **可访问性**: 交互控件保留可见焦点，状态信息不只依赖颜色，危险操作保留明确文案
- **响应式**: 桌面优先；窄屏下 Hero、工具条和弹窗网格折叠为单列，确保表单仍可完整操作
.helloagents/archive/2026-04/202604241551_admin-frontend-coupon-management/tasks.md
+56
View File
@@ -0,0 +1,56 @@
# 任务清单: admin-frontend-coupon-management
> **@status:** completed | 2026-04-24 16:28
```yaml
@feature: admin-frontend-coupon-management
@created: 2026-04-24
@status: completed
@mode: R2
```
## 进度概览
| 完成 | 失败 | 跳过 | 总数 |
|------|------|------|------|
| 6 | 0 | 0 | 6 |
---
## 任务列表
### 1. 数据与路由准备
- [√] 1.1 在 `admin-frontend/src/types/api.d.ts` 与 `admin-frontend/src/api/admin.ts` 中补齐优惠券列表、保存载荷与接口封装 | depends_on: []
- [√] 1.2 新增 `admin-frontend/src/utils/coupons.ts`，实现优惠券类型/周期选项、时间与表单转换、列表过滤与过期状态计算 | depends_on: [1.1]
- [√] 1.3 在 `admin-frontend/src/layouts/AdminLayout.vue` 与 `admin-frontend/src/router/index.ts` 中开放“优惠券管理”菜单与路由 | depends_on: [1.1]
### 2. 优惠券页面实现
- [√] 2.1 新增 `admin-frontend/src/views/subscriptions/CouponsView.vue` 与样式，实现列表、搜索、类型筛选、本地分页、启停、编辑与删除入口 | depends_on: [1.1,1.2,1.3]
- [√] 2.2 新增 `admin-frontend/src/views/subscriptions/CouponEditorDialog.vue` 与样式，实现新增/编辑弹窗、双列表单、指定周期/订阅、多码生成与提交保存 | depends_on: [1.1,1.2,1.3]
### 3. 验证与同步
- [√] 3.1 运行 `admin-frontend` 构建验证，并结合页面代码完成优惠券管理视觉/交互自检 | depends_on: [2.1,2.2]
---
## 执行日志
| 时间 | 任务 | 状态 | 备注 |
|------|------|------|------|
| 2026-04-24 15:51 | 方案包初始化 | completed | 已确认本轮范围为完整优惠券管理接入，采用 Apple 化后台风格 |
| 2026-04-24 16:06 | 1.1 / 1.2 / 1.3 | completed | 已补齐 coupon 类型、接口、工具函数，并开放“优惠券管理”菜单与路由 |
| 2026-04-24 16:18 | 2.1 / 2.2 | completed | 已完成优惠券列表页与新增/编辑弹窗，接入真实 coupon 接口与套餐限制项 |
| 2026-04-24 16:28 | 3.1 | completed | `npm run build` 通过；当前环境缺少可复用浏览器与登录态，仅完成代码级视觉/交互自检 |
---
## 执行备注
> 记录执行过程中的重要说明、决策变更、风险提示等
- 当前工作树可能存在与本轮无关的其他改动，实施过程中需保持最小作用域，不覆盖既有未提交修改。
- 当前后端缺少专门的 coupon detail/save 分离接口，编辑流程将复用 `coupon/generate`，并在前端统一做字段序列化。
- 当前视觉验收受限于本地缺少可复用的后台登录态与浏览器截图工具，本轮已通过构建产物、组件结构与样式代码完成代码级验收，建议后续在真实管理登录态下补一次人工点检。
.helloagents/archive/2026-04/202604241553_admin-frontend-plugin-management/.status.json
+11
View File
@@ -0,0 +1,11 @@
{
"status": "completed",
"completed": 5,
"failed": 0,
"pending": 0,
"total": 5,
"done": 5,
"percent": 100,
"current": "插件管理工作台、详情抽屉与构建验证已完成",
"updated_at": "2026-04-24 16:12:00"
}
.helloagents/archive/2026-04/202604241553_admin-frontend-plugin-management/contract.json
+51
View File
@@ -0,0 +1,51 @@
{
"updatedAt": "2026-04-24T07:55:29.737Z",
"version": 1,
"source": "manual",
"originCommand": "plugin-management-r2",
"verifyMode": "review-first",
"reviewerFocus": [
"插件管理页是否延续当前 Apple 风格后台，并形成真实工作台而不是占位页",
"卡片动作优先级、危险动作和受保护插件边界是否清晰",
"详情抽屉中的 README 与配置双视图是否易读且层级明确"
],
"testerFocus": [
"插件列表、类型切换、状态筛选与搜索是否真实连接 /plugin/getPlugins 数据流",
"上传、安装、启用、禁用、升级、卸载动作是否真实命中对应插件接口",
"插件配置读取与保存是否真实命中 /plugin/config"
],
"ui": {
"required": true,
"designContract": true,
"sourcePriority": [
"plan.md",
".helloagents/DESIGN.md",
"hello-ui"
],
"styleAdvisor": {
"required": false,
"reason": "",
"focus": []
},
"visualValidation": {
"required": true,
"reason": "插件管理属于整页 UI 重做，需确认卡片列表、筛选工具栏与详情抽屉层级符合 Apple 风格后台契约",
"screens": [
"#/system/plugins desktop",
"#/system/plugins detail-drawer desktop"
],
"states": [
"插件列表加载完成态",
"插件列表空状态或错误态",
"插件详情 README 态",
"插件配置编辑态"
]
}
},
"advisor": {
"required": false,
"reason": "",
"focus": [],
"preferredSources": []
}
}
.helloagents/archive/2026-04/202604241553_admin-frontend-plugin-management/plan.md
+65
View File
@@ -0,0 +1,65 @@
# admin-frontend 插件管理首版交付 — 实施规划
## 目标与范围
- 把 `#/system/plugins` 从占位页升级为真实插件管理页面。
- 本轮范围聚焦“单页工作台 + 详情抽屉”模型：列表承担检索、筛选和高频动作，抽屉承担 README、配置与补充说明。
- 其余系统管理子页保持现状，不借本轮需求扩展其他模块。
## 架构与实现策略
- 在 `admin-frontend/src/api/admin.ts` 与 `src/types/api.d.ts` 中补齐插件管理接口和类型定义，保证所有页面动作都走真实后端契约。
- 新增 `src/utils/plugins.ts`，集中处理插件类型文案、状态判断、筛选、README 渲染与配置表单值序列化，避免视图组件堆积逻辑。
- 将 `/system/plugins` 路由替换为独立的 `PluginManagementView.vue`，继续保留黑色 hero + 白色工作台层次，首屏承载搜索、类型切换、状态筛选、上传入口与运营摘要。
- 新增 `PluginDetailDrawer.vue` 作为插件详情工作台：
- 左侧 / 顶部展示插件基本信息与状态
- 中部切换 README / 配置两个视图
- 配置基于后端返回的动态 schema 渲染，不额外臆造字段
- 列表卡片提供高频动作按钮：
- 未安装：安装
- 已安装未启用：启用、卸载
- 已启用：禁用
- 可升级：升级
- 受保护 / 核心插件：明确显示保护边界，避免危险误操作
## 完成定义
- `#/system/plugins` 能真实拉取插件列表，并按类型 / 状态 / 关键词筛选。
- 页面支持上传 zip 插件包，并在上传成功后刷新列表。
- 管理员可以对插件执行安装、启用、禁用、升级、卸载动作，并获得明确成功 / 失败反馈。
- 详情抽屉可查看 README 和插件基础信息；对存在配置 schema 的插件，可读取并保存配置。
- 验证主路径：`review-first`
- reviewer 关注边界：
- 插件管理首屏是否与现有 Apple 风格后台一致，且不像占位页
- 列表动作优先级、危险按钮和受保护插件边界是否清晰
- 详情抽屉的 README / 配置双视图是否足够清楚
- tester 关注边界：
- `/plugin/getPlugins`、`/plugin/upload`、`/plugin/install`、`/plugin/enable`、`/plugin/disable`、`/plugin/uninstall`、`/plugin/upgrade` 是否都已接入真实数据流
- 插件配置读取 / 保存是否真实命中 `/plugin/config`
- 搜索、类型切换、状态筛选是否真实影响渲染结果
## 文件结构
- `admin-frontend/src/router/index.ts`
- `admin-frontend/src/api/admin.ts`
- `admin-frontend/src/types/api.d.ts`
- `admin-frontend/src/utils/plugins.ts`（新增）
- `admin-frontend/src/views/system/PluginManagementView.vue`（新增）
- `admin-frontend/src/views/system/PluginManagementView.scss`（新增）
- `admin-frontend/src/views/system/PluginDetailDrawer.vue`（新增）
## UI / 设计约束
- 首屏延续当前系统管理模块的黑色 hero，右侧摘要卡片改为“插件总数 / 已启用 / 可升级 / 用户上传”等运营信息。
- 列表采用大卡片而不是传统密表格，强调插件名称、类型、版本、作者、描述与状态标签，贴近用户截图的阅读方式。
- 顶部筛选区使用轻量 segmented control + select + search 组合，不引入多层复杂过滤器。
- 配置表单要兼容 `boolean / string / text / json / select` 等基础字段类型，字段说明与 placeholder 保持可见。
- README 区域使用真实 Markdown 渲染，保留代码块、列表和标题层级。
## 风险与验证
- 风险 1：后端返回的插件配置 schema 是动态结构，前端需要兼容多种字段类型与空配置插件。
- 风险 2：`getPlugins` 已带部分配置和 README，但已安装插件的配置需要保证与 `/plugin/config` 拉取一致，避免抽屉内旧数据。
- 风险 3：本地环境缺少真实登录态时，无法做完整浏览器联调；需要用 build + 代码级结构自检给出本轮 UI 验收结论。
- 验证方式：
- `npm run build`
- 对构建产物与代码结构做 UI 自检，确认搜索、筛选、卡片操作与抽屉视图均已真实连接数据流
## 决策记录
- [2026-04-24] D001：插件管理采用“卡片列表 + 详情抽屉”，不回退到纯表格，兼顾截图风格和后台可操作性。
- [2026-04-24] D002：配置编辑采用动态 schema 渲染，不为单个插件写死字段。
- [2026-04-24] D003：README 与配置合并进同一个详情工作台，避免列表页信息密度失控。
.helloagents/archive/2026-04/202604241553_admin-frontend-plugin-management/requirements.md
+47
View File
@@ -0,0 +1,47 @@
# admin-frontend 插件管理首版交付 — 需求
确认后冻结，执行阶段不可修改。如需变更必须回到设计阶段重新确认。
## 核心目标
- 在 `admin-frontend` 中把 `/system/plugins` 从结构化占位页升级为真实插件管理工作台。
- 页面视觉继续遵循 `apple/DESIGN.md` 与当前后台 Apple 化风格，并尽量贴近用户提供的目标截图：顶部搜索 / 分组切换 / 状态筛选 / 上传入口，下方插件卡片列表。
- 让管理员可以在同一页面完成插件浏览、筛选、上传、安装、启用 / 禁用、升级、卸载，以及 README / 配置查看与编辑。
## 功能边界
- 必须接入现有 Laravel 管理接口的真实数据链路：
- `GET /plugin/types`
- `GET /plugin/getPlugins`
- `POST /plugin/upload`
- `POST /plugin/install`
- `POST /plugin/uninstall`
- `POST /plugin/enable`
- `POST /plugin/disable`
- `GET /plugin/config`
- `POST /plugin/config`
- `POST /plugin/upgrade`
- 必须支持：
- 按关键词搜索插件
- 按插件类型切换（全部 / 功能 / 支付方式）
- 按状态筛选（全部 / 已启用 / 已安装未启用 / 未安装 / 可升级）
- 上传 zip 插件包
- 列表中直接执行安装、启用、禁用、升级、卸载动作
- 打开插件详情工作台，查看 README、基础元信息，并对可配置插件进行配置保存
- 必须覆盖加载、空列表、错误、按钮提交中、配置保存成功 / 失败等状态。
## 非目标
- 本轮不实现主题、公告、支付配置、知识库管理的真实 CRUD 页面。
- 本轮不新增或重构 Laravel 插件管理接口。
- 本轮不接入浏览器端拖拽上传、批量操作或插件市场远程下载能力。
- 本轮不修改 `public/assets/admin` 子模块之外的发布流程。
## 技术约束
- 技术栈固定为 `Vue 3 + TypeScript + Vite + Element Plus`。
- 后端真相源以现有 `PluginController` / `PluginConfigService` / `PluginManager` 为准，不在前端猜测额外字段。
- 视觉契约优先级：本方案 > `.helloagents/DESIGN.md` > `apple/DESIGN.md` 参考原则。
- 构建验证使用 `admin-frontend/package.json` 中已有 `npm run build`。
## 质量要求
- 插件管理页必须保持 Apple 风格后台的一致性，同时比现有占位页更强调运营效率与状态可读性。
- 卡片与详情工作台中的插件状态、危险动作和受保护插件边界必须清晰可辨。
- README 展示与配置编辑必须是真实数据流，不允许停留在纯展示占位。
- 最终至少完成一次构建验证，并补一份本轮 UI 验收结论。
.helloagents/archive/2026-04/202604241553_admin-frontend-plugin-management/tasks.md
+13
View File
@@ -0,0 +1,13 @@
# admin-frontend 插件管理首版交付 — 任务分解
## 任务列表
- [x] 任务1：冻结本轮插件管理方案包与状态上下文（涉及文件：`.helloagents/plan/202604241553_admin-frontend-plugin-management/requirements.md`、`.helloagents/plan/202604241553_admin-frontend-plugin-management/plan.md`、`.helloagents/plan/202604241553_admin-frontend-plugin-management/tasks.md`、`.helloagents/plan/202604241553_admin-frontend-plugin-management/contract.json`、`.helloagents/sessions/master/default/STATE.md`；完成标准：存在可执行的需求/方案/任务/合同文件，状态文件已切到插件管理主线；验证方式：文件检查）
- [x] 任务2：补齐插件管理前端类型与 API（涉及文件：`admin-frontend/src/api/admin.ts`、`admin-frontend/src/types/api.d.ts`、`admin-frontend/src/utils/plugins.ts`；完成标准：存在插件列表、动作、配置、上传所需的真实接口封装与辅助类型 / 工具；验证方式：`npm run build`）
- [x] 任务3：实现插件管理列表工作台（涉及文件：`admin-frontend/src/router/index.ts`、`admin-frontend/src/views/system/PluginManagementView.vue`、`admin-frontend/src/views/system/PluginManagementView.scss`；完成标准：`#/system/plugins` 能展示真实插件卡片、搜索、类型切换、状态筛选、上传入口与列表动作；验证方式：`npm run build`）
- [x] 任务4：实现插件详情与配置工作台（涉及文件：`admin-frontend/src/views/system/PluginDetailDrawer.vue`、`admin-frontend/src/utils/plugins.ts`、`admin-frontend/src/api/admin.ts`；完成标准：可打开 README / 配置抽屉，并支持真实配置读取与保存；验证方式：`npm run build`）
- [x] 任务5：完成验证、知识库同步与交付证据（涉及文件：`.helloagents/modules/admin-frontend.md`、`.helloagents/CHANGELOG.md`、`.helloagents/.ralph-visual.json`、`.helloagents/.ralph-closeout.json`、`.helloagents/archive/_index.md`、`.helloagents/sessions/master/default/STATE.md`；完成标准：构建通过，UI 验收结论与知识库记录同步完成；验证方式：命令输出 + 证据文件）
## 进度
- [x] 已冻结插件管理首版交付范围。
- [x] 已完成插件管理页面与详情工作台。
- [x] 已完成验证与知识库同步。
.helloagents/archive/2026-04/202604241558_admin-frontend-payment-management/.status.json
+11
View File
@@ -0,0 +1,11 @@
{
"status": "completed",
"completed": 6,
"failed": 0,
"pending": 0,
"total": 6,
"done": 6,
"percent": 100,
"current": "支付配置真实工作台已完成，等待归档与用户验收",
"updated_at": "2026-04-24 16:14:00"
}
.helloagents/archive/2026-04/202604241558_admin-frontend-payment-management/proposal.md
+206
View File
@@ -0,0 +1,206 @@
# 变更提案: admin-frontend-payment-management
## 元信息
```yaml
类型: 功能开发
方案类型: implementation
优先级: P1
状态: 进行中
创建: 2026-04-24
```
---
## 1. 需求
### 背景
当前 `admin-frontend` 的“支付配置”仍是占位页，但 Laravel 后端已经提供 `payment/fetch`、`payment/getPaymentMethods`、`payment/getPaymentForm`、`payment/save`、`payment/show`、`payment/drop`、`payment/sort` 等完整管理接口。用户本轮明确选择“完整真实 CRUD”方案，并提供了支付列表、编辑抽屉与支付接口下拉截图，要求继续完成支付配置模块。
### 目标
- 将 `#/system/payments` 从占位页升级为真实可用的支付配置页面。
- 提供支付方式列表、关键词搜索、启停、新增/编辑、删除与排序能力。
- 抽屉表单按所选支付接口动态拉取配置字段，保持与后端支付插件表单契约一致。
- 视觉上延续 `apple/DESIGN.md` 与 `.helloagents/DESIGN.md` 的 Apple 风格后台体系。
### 约束条件
```yaml
范围约束: 仅实现支付配置工作台，不扩展插件/主题/知识库等其他系统模块
技术约束: 继续使用 Vue3 + TypeScript + Element Plus，不新增第三方表单或拖拽依赖
业务约束: 后端真实契约以 PaymentController / PaymentService / 插件 form() 返回字段为准，不在前端猜测额外支付字段
数据约束: 排序继续调用 `/payment/sort`；启停继续调用 `/payment/show` 的“切换”语义接口
视觉约束: 延续黑色 hero + 白色工作台 + 克制蓝色交互，保持与现有系统配置/套餐管理同一视觉家族
```
### 验收标准
- [ ] `#/system/payments` 可真实拉取支付方式列表，并显示 ID、启用状态、显示名称、支付接口、通知地址与操作列。
- [ ] 页面支持关键词搜索，筛选后结果与分页计数同步更新。
- [ ] 支持新增与编辑支付方式，字段覆盖显示名称、图标 URL、通知域名、百分比手续费、固定手续费、支付接口与动态支付配置字段。
- [ ] 支持启停、删除与排序，并给出明确成功/失败反馈。
- [ ] `admin-frontend` 执行 `npm run build` 通过。
---
## 2. 方案
### 页面结构
1. 延续系统管理页面的 Apple 化后台结构，顶部使用黑色 hero 展示支付概览统计。
2. 主工作区使用白色表格容器，提供“添加支付方式”“搜索支付方式”“编辑排序”三类核心操作。
3. 支付方式编辑采用右侧抽屉，顶层字段集中展示显示名称、图标、通知域名、手续费与支付接口。
4. 抽屉下半区按支付接口动态加载真实配置字段，保持与后端插件 `form()` 返回结果一致。
5. 排序使用独立对话框，通过上移/下移维护本地顺序，再提交到 `/payment/sort`。
### 前端实现策略
1. 在 `src/types/api.d.ts` 与 `src/api/admin.ts` 中补齐支付方式列表、动态配置字段与保存载荷类型 / API 封装。
2. 新增 `src/utils/payments.ts`，集中处理支付方式归一化、关键词过滤、排序移动、手续费展示与动态配置序列化。
3. 新增：
- `src/views/system/SystemPaymentsView.vue`
- `src/views/system/SystemPaymentsView.scss`
- `src/views/system/SystemPaymentEditorDrawer.vue`
- `src/views/system/SystemPaymentEditorDrawer.scss`
4. 将 `/system/payments` 路由切换为真实页面，其余系统管理入口保持现状不动。
### 影响范围
```yaml
涉及模块:
- admin-frontend/src/types: 补齐支付配置相关类型定义
- admin-frontend/src/api: 新增 payment 管理接口封装
- admin-frontend/src/utils: 新增支付数据转换、过滤、保存辅助逻辑
- admin-frontend/src/views/system: 新增支付列表页与编辑抽屉
- admin-frontend/src/router: 将支付配置路由切换到真实页面
预计变更文件: 8-9
```
### 风险评估
| 风险 | 等级 | 应对 |
| 后端 `/payment/show` 是切换型接口，不接受显式目标状态 | 中 | 前端只在用户主动切换时调用一次，并在成功后按目标值更新本地状态 |
| 动态支付配置字段完全由插件 form() 返回，前端若自行假设字段会导致保存错位 | 高 | 抽屉内所有支付配置字段均通过 `/payment/getPaymentForm` 实时拉取，不写死配置项 |
| 构建会刷新 `public/assets/admin` 子模块产物 | 中 | 仅执行 `admin-frontend` 构建验证，不自动代做子模块发布 |
---
## 3. 技术设计（可选）
### 架构设计
```mermaid
flowchart TD
A[SystemPaymentsView] --> B[admin.ts payment API]
A --> C[payments.ts]
A --> D[SystemPaymentEditorDrawer]
D --> B
D --> C
```
### API设计
#### GET /payment/fetch
- **请求**: 无
- **响应**: `AdminPaymentListItem[]`
#### GET /payment/getPaymentMethods
- **请求**: 无
- **响应**: `string[]`
#### POST /payment/getPaymentForm
- **请求**: `{ payment, id? }`
- **响应**: `Record<string, AdminPaymentConfigField>`
#### POST /payment/save
- **请求**: `{ id?, name, icon?, payment, config, notify_domain?, handling_fee_fixed?, handling_fee_percent? }`
- **响应**: `{ status, data }`
### 数据模型
| 字段 | 类型 | 说明 |
|------|------|------|
| id | number | 支付方式 ID |
| payment | string | 支付接口代码，如 EPay / TokenPay |
| name | string | 后台显示名称 |
| icon | string \| null | 图标 URL |
| notify_domain | string \| null | 自定义通知域名 |
| notify_url | string \| null | 后端拼接后的完整通知地址 |
| handling_fee_fixed | number \| null | 固定手续费 |
| handling_fee_percent | number \| null | 百分比手续费 |
| enable | boolean | 是否启用 |
| config | Record<string, unknown> | 支付插件配置对象 |
---
## 4. 核心场景
### 场景: 运营新增支付方式
**模块**: admin-frontend/system
**条件**: 管理员已登录，进入 `#/system/payments`
**行为**: 点击“添加支付方式”，选择支付接口并填写网关参数后提交
**结果**: 新支付方式保存成功，列表刷新并展示新记录
### 场景: 运营切换支付启用状态
**模块**: admin-frontend/system
**条件**: 列表中存在可用支付方式
**行为**: 在列表中切换启用开关
**结果**: 对应支付方式状态被切换，并在当前列表中即时更新
### 场景: 运营维护支付排序
**模块**: admin-frontend/system
**条件**: 系统中存在多个支付方式
**行为**: 打开“编辑排序”，调整上下顺序并保存
**结果**: 后端 `/payment/sort` 接收新的排序序列，列表刷新为最新顺序
---
## 5. 技术决策
### admin-frontend-payment-management#D001: 支付配置采用“真实列表页 + 动态配置抽屉 + 独立排序对话框”
**日期**: 2026-04-24
**状态**: ✅采纳
**背景**: 用户截图已经明确表达“列表 + 右侧编辑抽屉 + 编辑排序”的后台工作流结构。
**选项分析**:
| 选项 | 优点 | 缺点 |
| A: 继续使用占位页 | 改动最小 | 无法完成真实支付配置任务 |
| B: 列表页 + 动态配置抽屉 + 排序对话框 | 最贴近截图，也与套餐管理模式一致 | 需要新增更多前端结构与状态管理 |
**决策**: 选择方案 B
**理由**: 能同时覆盖用户截图中的真实使用方式与当前 Apple 风格后台架构。
**影响**: `SystemPaymentsView.vue`、`SystemPaymentEditorDrawer.vue`
### admin-frontend-payment-management#D002: 支付配置字段完全以后端 `/payment/getPaymentForm` 为唯一真相源
**日期**: 2026-04-24
**状态**: ✅采纳
**背景**: 各支付插件的配置字段由插件 `form()` 动态生成，字段集并不固定。
**选项分析**:
| 选项 | 优点 | 缺点 |
|------|------|------|
| A: 前端写死常见支付字段 | 实现快 | 无法覆盖不同插件，容易与后端表单脱节 |
| B: 每次根据接口动态拉取字段 | 契约最稳定 | 需要额外处理加载与切换状态 |
**决策**: 选择方案 B
**理由**: 可同时兼容 EPay、TokenPay、AlipayF2F、Coinbase 等不同插件，不会因为字段假设错误而破坏保存链路。
**影响**: `admin.ts`、`payments.ts`、`SystemPaymentEditorDrawer.vue`
### admin-frontend-payment-management#D003: 支付启停继续沿用现有“切换型接口”，前端做同值短路保护
**日期**: 2026-04-24
**状态**: ✅采纳
**背景**: `/payment/show` 后端实现是直接反转状态，不接收目标状态。
**选项分析**:
| 选项 | 优点 | 缺点 |
|------|------|------|
| A: 前端假设为“设置型接口”并传目标值 | 交互直觉更强 | 与后端真实行为不一致，容易在重复事件下错位 |
| B: 前端只做主动点击触发 + 成功后同步本地状态 | 与现有接口完全对齐 | 需要额外防止无效 change 事件 |
**决策**: 选择方案 B
**理由**: 能最小代价对齐后端现状，并避免初始化或重复事件导致的误切换。
**影响**: `SystemPaymentsView.vue`
---
## 6. 成果设计
### 设计方向
- **美学基调**: Apple Admin Payments。黑色首屏强调“系统级支付运营台”的沉稳感，正文回到白底高密度工作台，重点突出支付方式与通知链路，而不是营销化装饰。
- **记忆点**: 支付配置列表里的“图标 + 名称 + 手续费摘要”组合，与右侧动态配置抽屉形成明显的黑白双层结构。
- **参考**: `apple/DESIGN.md`、`.helloagents/DESIGN.md`、用户提供的支付列表 / 编辑抽屉 / 支付接口下拉截图
### 视觉要素
- **配色**: 首屏 `#000000`，页面背景 `#f5f5f7`，工作区 `#ffffff`，强调色 `#0071e3`，危险动作保持 `var(--xboard-danger)`
- **字体**: 延续项目现有系统字体栈，首屏标题保持大字号紧行高，列表和抽屉字段走轻量运营层级
- **布局**: Hero + 工具条 + 表格工作台；编辑器采用右侧抽屉，表单上半部为顶层字段，下半部为动态支付配置
- **动效**: 仅保留抽屉开合、按钮 hover、排序对话框切换与开关状态变化的轻量动效
- **氛围**: 使用克制阴影、圆角白底、胶囊型通知地址与简洁图标预览，不堆叠过多卡片或装饰性标签
### 技术约束
- **可访问性**: 开关、按钮、抽屉表单需保留可见焦点；错误和危险操作不能只靠颜色表达
- **响应式**: 桌面优先；窄屏下 hero、工具条、排序对话框和抽屉字段网格需折叠为单列
.helloagents/archive/2026-04/202604241558_admin-frontend-payment-management/tasks.md
+53
View File
@@ -0,0 +1,53 @@
# 任务清单: admin-frontend-payment-management
> **@status:** completed | 2026-04-24 16:14
```yaml
@feature: admin-frontend-payment-management
@created: 2026-04-24
@status: completed
@mode: R2
```
## 进度概览
| 完成 | 失败 | 跳过 | 总数 |
|------|------|------|------|
| 6 | 0 | 0 | 6 |
---
## 任务列表
### 1. 数据与路由准备
- [√] 1.1 在 `admin-frontend/src/types/api.d.ts` 与 `admin-frontend/src/api/admin.ts` 中补齐支付方式列表、动态配置字段与接口封装 | depends_on: []
- [√] 1.2 新增 `admin-frontend/src/utils/payments.ts`，实现支付方式归一化、过滤、排序移动与保存序列化 | depends_on: [1.1]
- [√] 1.3 在 `admin-frontend/src/router/index.ts` 中将 `/system/payments` 切换到真实支付配置页面 | depends_on: [1.1]
### 2. 支付配置页面实现
- [√] 2.1 新增 `admin-frontend/src/views/system/SystemPaymentsView.vue` 与样式，实现列表、搜索、启停、删除、新增/编辑入口与排序对话框 | depends_on: [1.1,1.2,1.3]
- [√] 2.2 新增 `admin-frontend/src/views/system/SystemPaymentEditorDrawer.vue` 与样式，实现动态支付接口配置抽屉与保存提交流程 | depends_on: [1.1,1.2,1.3]
### 3. 验证与同步
- [√] 3.1 运行 `admin-frontend` 构建验证，并结合页面代码完成支付配置视觉/交互自检 | depends_on: [2.1,2.2]
---
## 执行日志
| 时间 | 任务 | 状态 | 备注 |
|------|------|------|------|
| 2026-04-24 15:58 | 方案包初始化 | completed | 已确认本轮范围为支付配置完整 CRUD 工作台，目标对齐用户截图与 `/payment/*` 后端接口 |
| 2026-04-24 16:05 | 1.1 / 1.2 / 1.3 | completed | 已补齐支付配置类型、API、工具层与真实路由切换 |
| 2026-04-24 16:11 | 2.1 / 2.2 | completed | 已完成支付配置列表、排序对话框与动态支付配置抽屉 |
| 2026-04-24 16:14 | 3.1 | completed | `npm run build` 通过；当前环境无浏览器自动化工具，已完成代码级视觉与交互自检 |
---
## 执行备注
- 当前工作树存在与本轮无关的其他未提交修改，实施时需保持最小作用域，不覆盖已有 in-progress 改动。
- 构建验证会刷新 `public/assets/admin` 子模块产物，本轮仅提供功能实现与验证证据，不自动代做发布。
.helloagents/archive/2026-04/202604241607_admin-frontend-theme-management/.status.json
+11
View File
@@ -0,0 +1,11 @@
{
"status": "completed",
"completed": 5,
"failed": 0,
"pending": 0,
"total": 5,
"done": 5,
"percent": 100,
"current": "主题管理页面、动态配置抽屉与构建验证已完成，等待交付",
"updated_at": "2026-04-24 16:12:00"
}
.helloagents/archive/2026-04/202604241607_admin-frontend-theme-management/proposal.md
+75
View File
@@ -0,0 +1,75 @@
# 变更提案: admin-frontend-theme-management
## 元信息
```yaml
类型: 新功能
方案类型: implementation
优先级: P1
状态: 已完成
创建: 2026-04-24
```
---
## 1. 需求
### 背景
当前 `admin-frontend` 已经完成系统配置真实页，但 `#/system/themes` 仍停留在结构化占位状态。用户本轮要求继续基于 `apple/DESIGN.md`、项目级 `.helloagents/DESIGN.md` 和提供的参考图，把“主题配置”升级为真实可用的主题管理页面。
### 目标
- 将 `#/system/themes` 从占位页升级为真实主题管理工作台。
- 展示可用主题列表、当前主题标记和主题基础信息。
- 提供主题设置抽屉，支持动态主题配置保存。
- 提供 zip 主题包上传入口，并支持把某个主题设为当前主题。
### 约束条件
```yaml
技术约束: 继续使用 Vue3 + TypeScript + Element Plus + Vite，不新增主题编辑器或上传库
业务约束: 后端沿用现有 `theme/*` 与 `config/save(frontend_theme)` 能力，不修改 Laravel API
范围约束: 本轮先完成主题列表、当前主题切换、主题设置与上传；删除主题保留到下一轮
视觉约束: 保持 Apple 化后台语义，页面结构优先贴近参考图中的“标题 + 说明 + 主题卡片 + 上传入口”
```
### 验收标准
- [ ] `#/system/themes` 能展示真实主题列表，不再使用占位页。
- [ ] 页面能明确标记当前主题，并允许把其他主题设为当前主题。
- [ ] 点击“主题设置”可打开配置抽屉，按主题 schema 渲染字段并保存。
- [ ] 页面提供 zip 主题包上传入口，并接入真实后端上传接口。
- [ ] `admin-frontend` 构建通过，且知识库记录主题管理已从占位页升级为真实页面。
---
## 2. 方案
### 技术方案
1. 在 `src/types/api.d.ts` 与 `src/api/admin.ts` 中补齐主题列表、主题配置和主题上传所需类型与接口封装。
2. 新增 `src/utils/themes.ts`，统一处理主题列表排序、配置默认值回填和表单序列化。
3. 新增 `src/views/system/ThemesView.vue` 与 `ThemeConfigDrawer.vue`：
- `ThemesView` 负责标题区、当前主题/数量摘要、主题卡片、上传按钮与切换逻辑。
- `ThemeConfigDrawer` 负责根据主题 schema 动态渲染配置项并保存。
4. 在 `src/router/index.ts` 中把 `system/themes` 路由从占位页切换到真实页面组件。
### 风险评估
| 风险 | 等级 | 应对 |
|------|------|------|
| 主题切换没有独立 `switchTheme` 路由 | 中 | 复用 `config/save` 的 `frontend_theme` 保存链路，由后端内部触发 `ThemeService::switch` |
| 主题配置字段完全动态，前端容易误假设字段类型 | 中 | 仅支持后端 schema 已声明的 `input / textarea / select` 三类字段 |
| 本地缺少后台登录态与浏览器截图工具 | 低 | 本轮以构建通过 + 代码级视觉自检作为验收证据，并在知识库中注明限制 |
---
## 3. 技术决策
### admin-frontend-theme-management#D001: 主题切换复用 `config/save(frontend_theme)`，不前端直连未开放路由
**日期**: 2026-04-24
**状态**: ✅采纳
**背景**: 后端 `ThemeController` 存在 `switchTheme()`，但当前管理路由未公开对应 endpoint。
**决策**: 前端将“设为当前主题”统一走 `saveAdminConfig({ frontend_theme })`。
**理由**: 这条链路已被 `ConfigController` 正式支持，且内部会触发 `ThemeService->switch`，无需扩展后端接口。
### admin-frontend-theme-management#D002: 主题配置使用右侧抽屉，不在卡片内直接展开表单
**日期**: 2026-04-24
**状态**: ✅采纳
**背景**: 参考图强调卡片式主题列表；主题配置字段是动态 schema，直接展开会破坏列表节奏。
**决策**: 卡片只承载主题信息与主操作，详细配置统一放进 `ThemeConfigDrawer`。
**理由**: 更贴合 Apple 化后台“主列表 + 聚焦设置面板”的结构，也便于后续扩展删除/预览等动作。
.helloagents/archive/2026-04/202604241607_admin-frontend-theme-management/tasks.md
+54
View File
@@ -0,0 +1,54 @@
# 任务清单: admin-frontend-theme-management
> **@status:** completed | 2026-04-24 16:12
```yaml
@feature: admin-frontend-theme-management
@created: 2026-04-24
@status: completed
@mode: R2
```
## 进度概览
| 完成 | 失败 | 跳过 | 总数 |
|------|------|------|------|
| 5 | 0 | 0 | 5 |
---
## 任务列表
### 1. 数据与路由准备
- [√] 1.1 在 `admin-frontend/src/types/api.d.ts` 与 `admin-frontend/src/api/admin.ts` 中补齐主题管理类型、配置接口与上传接口 | depends_on: []
- [√] 1.2 新增 `admin-frontend/src/utils/themes.ts`，统一处理主题列表排序、动态配置默认值和序列化逻辑 | depends_on: [1.1]
- [√] 1.3 在 `admin-frontend/src/router/index.ts` 中把 `system/themes` 路由切换到真实页面 | depends_on: [1.1]
### 2. 主题管理页面实现
- [√] 2.1 新增 `admin-frontend/src/views/system/ThemesView.vue`，实现标题区、主题卡片、当前主题标记、切换和上传按钮 | depends_on: [1.1,1.2,1.3]
- [√] 2.2 新增 `admin-frontend/src/views/system/ThemeConfigDrawer.vue`，实现主题设置抽屉、动态字段表单与保存动作 | depends_on: [1.1,1.2]
### 3. 验证与同步
- [√] 3.1 运行 `admin-frontend` 构建验证，并结合页面代码完成主题管理视觉/交互自检 | depends_on: [2.1,2.2]
---
## 执行日志
| 时间 | 任务 | 状态 | 备注 |
|------|------|------|------|
| 2026-04-24 16:07 | 方案包初始化 | completed | 已确认本轮范围为主题列表、当前主题切换、主题设置抽屉与上传主题 |
| 2026-04-24 16:09 | 1.1 / 1.2 / 1.3 | completed | 已补齐主题类型、API、工具函数，并将 `system/themes` 指向真实页面 |
| 2026-04-24 16:11 | 2.1 / 2.2 | completed | 已完成主题卡片页与动态设置抽屉，接入真实主题配置/上传能力 |
| 2026-04-24 16:12 | 3.1 | completed | `npm run build` 通过；当前环境缺少后台登录态与浏览器工具，已完成代码级视觉自检 |
---
## 执行备注
- “设为当前主题”当前复用 `config/save(frontend_theme)` 完成，因为管理路由中没有公开独立的主题切换 endpoint。
- 本轮未实现删除主题，避免在没有额外确认和危险操作设计的情况下引入破坏性入口。
- `public/assets/admin` 为构建产物子模块；本轮构建已刷新对应产物，但未代做子模块提交与根仓发布。
.helloagents/archive/2026-04/202604241620_admin-frontend-order-management/contract.json
+48
View File
@@ -0,0 +1,48 @@
{
"updatedAt": "2026-04-24T16:20:00+08:00",
"version": 1,
"source": "manual",
"originCommand": "generic-r2",
"verifyMode": "build-first",
"reviewerFocus": [
"订单管理列表结构是否贴近用户提供的后台截图",
"详情抽屉是否覆盖查看、手动支付、取消与佣金状态维护主链路"
],
"testerFocus": [
"订单列表是否真实连接 /order/fetch，并响应搜索、筛选、排序与分页",
"分配订单抽屉是否真实连接 /order/assign",
"详情抽屉是否真实连接 /order/detail /order/paid /order/cancel /order/update"
],
"ui": {
"required": true,
"designContract": true,
"sourcePriority": [
"requirements.md",
".helloagents/DESIGN.md",
"hello-ui"
],
"styleAdvisor": {
"required": false,
"reason": "",
"focus": []
},
"visualValidation": {
"required": true,
"reason": "订单管理属于真实后台业务页，需要确认列表结构、筛选条与详情抽屉在代码实现上与目标截图和 Apple 化后台契约一致。",
"screens": [
"#/subscriptions/orders desktop"
],
"states": [
"订单列表默认加载完成态",
"分配订单抽屉展开态",
"订单详情抽屉展开态"
]
}
},
"advisor": {
"required": false,
"reason": "",
"focus": [],
"preferredSources": []
}
}
.helloagents/archive/2026-04/202604241620_admin-frontend-order-management/plan.md
+61
View File
@@ -0,0 +1,61 @@
# admin-frontend 订单管理首版交付 — 实施规划
## 目标与范围
- 在现有订阅管理分组中补齐订单管理真实页，替换原先的禁用态入口。
- 页面聚焦“订单运营工作台”主链路：查订单、分配订单、看详情、手工补单、管理佣金状态。
## 架构与实现策略
- 在现有 `AdminLayout` 中开放 `/subscriptions/orders` 导航入口，并新增对应路由。
- 新增 `OrdersView` 作为真实列表页，整体结构参考用户截图：
- 顶部标题与说明
- “添加订单”主按钮
- 搜索框
- 类型 / 周期 / 订单状态 / 佣金状态筛选按钮
- 数据表格与分页
- 新增两个子组件：
- `OrderAssignDrawer.vue`：负责手动分配订单
- `OrderDetailDrawer.vue`：负责查看详情与行级动作
- 在 `src/utils/orders.ts` 中集中处理：
- 金额分→元格式化
- 类型 / 状态 / 周期映射
- 筛选参数组装
- 分配订单周期选项生成
- API 层在 `src/api/admin.ts` 中新增订单接口封装；类型定义统一收敛到 `src/types/api.d.ts`。
## 完成定义
- 侧边栏中的“订单管理”不再是禁用入口，能正常进入 `#/subscriptions/orders`。
- 订单列表可真实连接 `/order/fetch`，并响应搜索、筛选、排序与分页。
- 订单详情抽屉可真实连接 `/order/detail`，且能触发已支付、取消、佣金状态更新。
- 分配订单抽屉可真实连接 `/order/assign`。
- 订单金额相关字段统一正确展示为人民币元值。
## 文件结构
- `admin-frontend/src/router/index.ts`
- `admin-frontend/src/layouts/AdminLayout.vue`
- `admin-frontend/src/api/admin.ts`
- `admin-frontend/src/types/api.d.ts`
- `admin-frontend/src/utils/orders.ts`
- `admin-frontend/src/views/subscriptions/OrdersView.vue`
- `admin-frontend/src/views/subscriptions/OrdersView.scss`
- `admin-frontend/src/views/subscriptions/OrderAssignDrawer.vue`
- `admin-frontend/src/views/subscriptions/OrderDetailDrawer.vue`
## UI / 设计约束
- 列表页以白色工作台为主，不堆叠多余卡片；重点放在表格可读性与运营效率。
- 订单号作为主入口，点击后进入详情抽屉，不额外拉长操作列。
- 筛选入口使用紧凑 pill 风格按钮，对齐截图中的轻量筛选条。
- 详情抽屉用黑色 hero + 白色信息卡的节奏，兼顾 Apple 风格与运营后台的信息密度。
## 风险与验证
- 风险 1：`/order/fetch` 返回的 `period` 已被后端转换成 legacy key，筛选时需要继续使用数据库真实值。
- 风险 2：订单金额与佣金金额在后端仍以分为单位存储，若前端直接展示会再次出现后台金额口径错误。
- 风险 3：本地环境缺少真实后台登录态时，只能做结构与构建验证，不能替代完整联调。
- 验证方式：
- `npm run build`
- 代码级结构自检 `#/subscriptions/orders`
- 结构化视觉验收记录（无浏览器工具时以 code inspection 说明边界）
## 决策记录
- [2026-04-24] 订单主操作收口到详情抽屉，不额外新增宽操作列，优先对齐用户截图。
- [2026-04-24] 金额展示统一由 `src/utils/orders.ts` 处理，避免分/元换算逻辑散落在页面组件。
- [2026-04-24] 分配订单抽屉默认按所选套餐周期自动回填金额，但允许运营手动覆盖。
.helloagents/archive/2026-04/202604241620_admin-frontend-order-management/requirements.md
+46
View File
@@ -0,0 +1,46 @@
# admin-frontend 订单管理首版交付 — 需求
确认后冻结，执行阶段不可修改。如需变更必须回到设计阶段重新确认。
## 核心目标
- 在 `admin-frontend` 中开放“订阅管理 / 订单管理”入口，不再保留禁用态。
- 参考用户提供的订单管理截图，交付真实订单列表页，覆盖搜索、筛选、排序、分页与详情查看。
- 保持 `apple/DESIGN.md` 与 `.helloagents/DESIGN.md` 定义的 Apple 化后台视觉语言，但优先贴近截图中的数据密集型运营视图。
## 功能边界
- 必须实现 `#/subscriptions/orders` 真实页面。
- 页面必须包含：
- 添加订单入口
- 订单号搜索
- 类型 / 周期 / 订单状态 / 佣金状态筛选
- 支持排序的订单表格
- 订单详情抽屉
- 分配订单抽屉
- 必须接入现有 Laravel 管理接口：
- `GET /order/fetch`
- `POST /order/detail`
- `POST /order/assign`
- `POST /order/paid`
- `POST /order/cancel`
- `POST /order/update`
- 详情抽屉至少支持：
- 查看订单核心信息与金额拆解
- 对待支付订单手动标记已支付
- 对待支付订单取消
- 对有佣金金额的订单更新佣金状态
## 非目标
- 本轮不实现礼品卡管理真实页面。
- 本轮不改造 Laravel 订单后端接口逻辑。
- 本轮不新增批量操作、多选导出或订单打印等扩展功能。
## 技术约束
- 技术栈固定为 `Vue 3 + TypeScript + Vite + Element Plus`。
- 后端真相源以仓库内 `App\Http\Controllers\V2\Admin\OrderController` 为准。
- 构建验证使用 `admin-frontend/package.json` 中已有 `npm run build`。
## 质量要求
- 订单页面需要对齐截图中的高密度表格工作流，同时保持 Apple 化后台的克制风格。
- 金额字段必须统一处理“后端以分存储、前端以元展示”的换算。
- 页面需覆盖加载、错误、空状态与成功反馈。
- 最终至少完成一次构建验证，并留下结构化视觉验收与交付证据。
.helloagents/archive/2026-04/202604241620_admin-frontend-order-management/tasks.md
+14
View File
@@ -0,0 +1,14 @@
# admin-frontend 订单管理首版交付 — 任务分解
## 任务列表
- [x] 任务1：补齐订单管理的方案与知识产物（涉及文件：`.helloagents/archive/2026-04/202604241620_admin-frontend-order-management/*`；完成标准：存在需求、方案、任务与合同文件；验证方式：文件检查）
- [x] 任务2：开放导航与路由入口（涉及文件：`admin-frontend/src/layouts/AdminLayout.vue`、`admin-frontend/src/router/index.ts`；完成标准：侧边栏可进入 `#/subscriptions/orders`；验证方式：`npm run build`）
- [x] 任务3：补齐订单 API、类型与工具层（涉及文件：`admin-frontend/src/api/admin.ts`、`admin-frontend/src/types/api.d.ts`、`admin-frontend/src/utils/orders.ts`；完成标准：前端可消费 `order/*` 接口并统一金额/状态映射；验证方式：`npm run build`）
- [x] 任务4：实现订单列表页（涉及文件：`admin-frontend/src/views/subscriptions/OrdersView.vue`、`admin-frontend/src/views/subscriptions/OrdersView.scss`；完成标准：列表页支持搜索、筛选、排序、分页与详情入口；验证方式：`npm run build`）
- [x] 任务5：实现分配订单与详情抽屉（涉及文件：`admin-frontend/src/views/subscriptions/OrderAssignDrawer.vue`、`admin-frontend/src/views/subscriptions/OrderDetailDrawer.vue`；完成标准：支持分配订单、查看详情、手动支付、取消订单与佣金状态维护；验证方式：`npm run build`）
- [x] 任务6：完成验证与知识库同步（涉及文件：`.helloagents/CHANGELOG.md`、`.helloagents/context.md`、`.helloagents/modules/admin-frontend.md`、`.helloagents/.ralph-visual.json`、`.helloagents/.ralph-closeout.json`；完成标准：构建通过、知识库更新、交付证据写入；验证方式：命令输出 + 证据文件）
## 进度
- [x] 已确认订单管理首版范围，聚焦真实列表、详情抽屉与分配订单。
- [x] 已完成订单管理页面、抽屉与订单接口接入。
- [x] 已完成构建验证，待输出最终交付摘要。
.helloagents/archive/_index.md
+10
View File
@@ -7,6 +7,11 @@
| 时间戳 | 名称 | 类型 | 涉及模块 | 决策 | 结果 |
|--------|------|------|---------|------|------|
| 202604241620 | admin-frontend-order-management | implementation | admin-frontend | admin-frontend-order-management#D001,#D002,#D003 | ✅完成 |
| 202604241558 | admin-frontend-payment-management | implementation | admin-frontend | admin-frontend-payment-management#D001,#D002,#D003 | ✅完成 |
| 202604241553 | admin-frontend-plugin-management | implementation | admin-frontend | admin-frontend-plugin-management#D001,#D002,#D003 | ✅完成 |
| 202604241607 | admin-frontend-theme-management | implementation | admin-frontend | admin-frontend-theme-management#D001,#D002 | ✅完成 |
| 202604241551 | admin-frontend-coupon-management | implementation | admin-frontend | admin-frontend-coupon-management#D001,#D002,#D003 | ✅完成 |
| 202604232345 | traffic-rank-limit-backend-adapt | implementation | admin-frontend,backend | traffic-rank-limit-backend-adapt#D001,#D002 | ✅完成 |
| 202604232329 | admin-frontend-system-management | implementation | admin-frontend | admin-frontend-system-management#D001,#D002,#D003 | ✅完成 |
| 202604232320 | admin-frontend-node-management | implementation | admin-frontend | admin-frontend-node-management#D001,#D002 | ✅完成 |
@@ -24,6 +29,11 @@
## 按月归档
### 2026-04
- [202604241620_admin-frontend-order-management](./2026-04/202604241620_admin-frontend-order-management/) - 开放“订单管理”入口，交付真实订单列表、筛选、分配订单、详情抽屉、手动支付与佣金状态维护
- [202604241558_admin-frontend-payment-management](./2026-04/202604241558_admin-frontend-payment-management/) - 将 `#/system/payments` 从占位页升级为真实支付配置工作台，接入支付方式列表、动态配置抽屉、启停、删除与排序
- [202604241553_admin-frontend-plugin-management](./2026-04/202604241553_admin-frontend-plugin-management/) - 将 `#/system/plugins` 从占位页升级为真实插件管理工作台，接入插件列表、筛选、上传、安装、启停、升级、卸载，以及 README / 动态配置抽屉
- [202604241607_admin-frontend-theme-management](./2026-04/202604241607_admin-frontend-theme-management/) - 将 `#/system/themes` 从占位页升级为真实主题管理页面，接入主题列表、当前主题切换、动态配置抽屉与 zip 主题上传
- [202604241551_admin-frontend-coupon-management](./2026-04/202604241551_admin-frontend-coupon-management/) - 开放“优惠券管理”入口，完整交付优惠券列表、类型筛选、启停、删除，以及接入真实 coupon 接口的新增/编辑弹窗
- [202604232345_traffic-rank-limit-backend-adapt](./2026-04/202604232345_traffic-rank-limit-backend-adapt/) - traffic rank 接口新增 limit=10|20 支持，并让 dashboard 的 10/20 切换真正驱动后端返回条数
- [202604232329_admin-frontend-system-management](./2026-04/202604232329_admin-frontend-system-management/) - 新增“系统管理”侧边栏分组，完整交付系统配置页，并接入插件/主题/公告/支付/知识库结构化占位页
- [202604232320_admin-frontend-node-management](./2026-04/202604232320_admin-frontend-node-management/) - 新增“节点管理”侧边栏分组、节点管理工作台，以及权限组/路由管理占位页
.helloagents/context.md
+25 -1
View File
@@ -37,17 +37,41 @@
- `plan/drop`
- `plan/sort`
- `server/group/fetch`
- 管理端订单管理现已接入:
- `order/fetch`
- `order/detail`
- `order/assign`
- `order/paid`
- `order/cancel`
- `order/update`
- 管理端公告管理现已接入:
- `notice/fetch`
- `notice/save`
- `notice/show`
- `notice/drop`
- `notice/sort`
- 管理端支付配置现已接入:
- `payment/fetch`
- `payment/getPaymentMethods`
- `payment/getPaymentForm`
- `payment/save`
- `payment/show`
- `payment/drop`
- `payment/sort`
- 客户端订阅导出入口位于 `app/Http/Controllers/V1/Client/ClientController.php`，会根据 `flag` / `User-Agent` 匹配 `app/Protocols/*` 导出器
- `Stash` 订阅导出位于 `app/Protocols/Stash.php`，当前对 `AnyTLS` 采用保守兼容：仅客户端版本 `>= 3.3.0` 时导出
## 项目概述
- 主仓仍以 Laravel 为后端真相源
- `admin-frontend` 负责独立管理后台 UI 与交互逻辑
- 订阅协议导出由 Laravel 主仓内的 `app/Protocols/*` 提供，客户端兼容问题需以对应导出器实现为准
- `public/assets/admin` 为构建产物输出位置
## 开发约定
- 管理端路由使用 Hash 模式
- 管理端当前业务路由包含 `/dashboard`、`/users`、`/tickets`、`/nodes`、`/node-groups`、`/node-routes` 与 `/subscriptions/plans`
- 管理端当前业务路由包含 `/dashboard`、`/users`、`/tickets`、`/nodes`、`/node-groups`、`/node-routes`、`/subscriptions/plans`、`/subscriptions/orders`、`/subscriptions/coupons`、`/system/config`、`/system/notices` 与 `/system/payments`
- Bearer Token 存储于 `sessionStorage/localStorage`
- `admin-frontend` 的视觉方向当前以 Apple 风格为基线，优先纯色分区、系统字体栈和低装饰成本
.helloagents/modules/_index.md
+1
View File
@@ -3,3 +3,4 @@
| 模块名 | 说明 | 最近更新 |
|--------|------|----------|
| [admin-frontend](admin-frontend.md) | 管理端前端登录、布局、仪表盘、用户管理、节点管理与管理 API 封装 | 2026-04-23 |
| [subscription-protocols](subscription-protocols.md) | 用户订阅导出入口、协议适配器与 Stash / Clash 系列兼容过滤 | 2026-04-24 |
.helloagents/modules/admin-frontend.md
+26 -3
View File
@@ -4,7 +4,7 @@
- 提供 Vue3 管理端登录页、认证状态、路由守卫和主布局
- 封装管理端统计/系统状态、用户管理、节点管理、套餐管理和系统配置接口
- 渲染后台仪表盘、用户管理工作台、节点管理工作台、订阅套餐管理页、系统配置页，以及预留的工单管理入口
- 渲染后台仪表盘、用户管理工作台、节点管理工作台、订阅套餐管理页、系统配置页、主题管理页、插件管理工作台、公告管理工作台、支付配置工作台，以及预留的工单管理入口
## 行为规范
@@ -21,11 +21,27 @@
- 新增用户时采用“先 generate，后按邮箱回查并 update”的两段式流程，以兼容后端基础创建接口
- 节点管理页通过真实后端 `server/manage/getNodes` 与 `server/group/fetch` 获取列表，并通过 `server/manage/update`、`server/manage/copy`、`server/manage/drop` 完成首批行级操作
- 节点相关导航入口固定归入“节点管理”分组；`/node-groups` 与 `/node-routes` 本轮先交付结构化占位页，不伪装为完整功能
- 订阅管理新增独立“订阅管理”侧边栏分组，本轮完整实现 `#/subscriptions/plans`，其余订单/优惠券/礼品卡入口先保留禁用态
- 订阅管理新增独立“订阅管理”侧边栏分组，现已完整实现 `#/subscriptions/plans`、`#/subscriptions/orders` 与 `#/subscriptions/coupons`；礼品卡管理仍保留禁用态
- 套餐管理页使用真实后端 `plan/fetch`、`plan/save`、`plan/update`、`plan/drop`、`plan/sort` 与 `server/group/fetch`
- 套餐管理页渲染 `ElSwitch` 前，会先把 `show / sell / renew` 归一化成布尔值；开关事件若新旧值相同则直接短路，避免初始化阶段误写后台状态
- 套餐说明编辑采用轻量 Markdown/HTML 编辑器与预览模式，不引入额外富文本依赖
- 系统管理新增独立“系统管理”侧边栏分组，本轮完整实现 `#/system/config`，其余插件/主题/公告/支付/知识库入口先交付结构化占位页
- 订单管理页使用真实后端 `order/fetch`、`order/detail`、`order/assign`、`order/paid`、`order/cancel` 与 `order/update`，支持订单列表、类型/周期/状态筛选、详情抽屉、手动分配、人工标记已支付与佣金状态维护
- 订单金额、佣金金额与相关拆解字段以“分”为后端真相源，前端统一在 `src/utils/orders.ts` 中格式化为“元”展示，避免后台金额口径混乱
- 优惠券管理页使用真实后端 `coupon/fetch`、`coupon/generate`、`coupon/update` 与 `coupon/drop`，支持本地搜索、类型筛选、启停、删除与弹窗式新增/编辑
- 优惠券编辑弹窗支持金额/比例两种优惠类型、有效期范围、批量生成、自定义券码、指定周期与指定订阅限制
- 系统管理新增独立“系统管理”侧边栏分组，当前已完整实现 `#/system/config`、`#/system/themes`、`#/system/plugins`、`#/system/notices`、`#/system/payments` 与 `#/system/knowledge`
- 系统配置页使用真实后端 `config/fetch`、`config/save`、`config/testSendMail` 与 `config/setTelegramWebhook`，并按站点、安全、订阅、邀请佣金、节点、邮件、Telegram、APP、订阅模板 9 个分组组织长表单
- 主题管理页使用真实后端 `theme/getThemes`、`theme/getThemeConfig`、`theme/saveThemeConfig`、`theme/upload`，并通过 `config/save(frontend_theme)` 完成当前主题切换
- 主题配置抽屉按后端返回的动态 schema 渲染 `input / textarea / select` 字段，不在前端猜测额外配置项
- 插件管理页使用真实后端 `plugin/types`、`plugin/getPlugins`、`plugin/upload`、`plugin/install`、`plugin/uninstall`、`plugin/enable`、`plugin/disable`、`plugin/config` 与 `plugin/upgrade`
- 插件管理首屏采用“搜索 + 类型切换 + 状态筛选 + 上传入口 + 插件卡片”结构；详情抽屉负责 README 展示与动态配置编辑
- 动态插件配置按后端返回的 schema 渲染，当前已兼容 `boolean / string / text / json / select / number` 字段类型；未安装插件仅显示配置结构预览，不允许保存
- 公告管理页使用真实后端 `notice/fetch`、`notice/save`、`notice/show`、`notice/drop` 与 `notice/sort`，支持标题搜索、显隐切换、编辑弹窗、删除与排序模式
- 公告编辑弹窗继续使用轻量 Markdown/HTML 工具栏，不引入额外富文本依赖；`show / popup / tags` 会在工具层统一归一化后再回填到 UI
- 支付配置页使用真实后端 `payment/fetch`、`payment/getPaymentMethods`、`payment/getPaymentForm`、`payment/save`、`payment/show`、`payment/drop` 与 `payment/sort`，支持关键词搜索、启停、删除、新增/编辑与排序模式
- 支付编辑抽屉根据所选支付接口动态拉取真实配置字段，不在前端写死 EPay / TokenPay 等网关表单；通知地址继续以后端拼接结果为准
- 知识库管理页使用真实后端 `knowledge/fetch`、`knowledge/getCategory`、`knowledge/save`、`knowledge/show`、`knowledge/drop` 与 `knowledge/sort`，支持标题搜索、分类筛选、显隐切换、编辑弹窗、删除与排序模式
- 知识编辑弹窗继续使用轻量 Markdown/HTML 工具栏，不引入额外富文本依赖；编辑时会单独请求详情补齐 `body / language`
- 当前首页视觉基线为 Apple 风格：纯色分区、系统字体栈、单一蓝色强调和轻量层次
- 性能优化优先级高于装饰性表达，避免远程字体、全局模糊背景和固定特效层
@@ -34,6 +50,13 @@
- 依赖 `src/api/client.ts` 处理 axios 与认证头
- 依赖 `src/utils/users.ts` 负责用户管理表单转换、筛选组装和状态计算
- 依赖 `src/utils/plans.ts` 负责套餐价格、说明渲染、排序与表单转换
- 依赖 `src/utils/orders.ts` 负责订单金额换算、状态映射、周期标签与筛选参数组装
- 依赖 `src/utils/coupons.ts` 负责优惠券类型映射、时间范围转换、过期状态计算与表单序列化
- 依赖 `src/utils/themes.ts` 负责主题列表排序、动态配置默认值回填与序列化
- 依赖 `src/utils/plugins.ts` 负责插件状态判断、README 渲染、筛选与动态配置表单序列化
- 依赖 `src/utils/payments.ts` 负责支付方式归一化、搜索过滤、排序移动与动态配置序列化
- 依赖 `src/utils/knowledge.ts` 负责知识库分类、Markdown 渲染、过滤与表单转换
- 依赖 `src/utils/notices.ts` 负责公告表单转换、内容摘要、排序与显示字段归一化
- 依赖 `src/utils/systemConfig.ts` 负责系统配置字段元信息、默认值、回填与保存序列化
- 依赖 Laravel 注入的 `window.settings`
- 构建输出到 `public/assets/admin`
.helloagents/modules/subscription-protocols.md
+26
View File
@@ -0,0 +1,26 @@
# subscription-protocols
## 职责
- 负责 `/sub...` 订阅入口的客户端识别、协议匹配与最终导出文本生成
- 维护 `app/Protocols/*` 对 Clash / ClashMeta / Stash / General / SingBox 等客户端格式的适配
- 根据 `flag`、`User-Agent` 与客户端版本信息，对不兼容协议做过滤或降级
## 行为规范
- 订阅入口以 `app/Http/Controllers/V1/Client/ClientController.php` 为真相源，`flag` / `User-Agent` 解析结果会决定导出器类
- `flag=stash` 走 `app/Protocols/Stash.php`
- Stash 的 `AnyTLS` 目前采用保守兼容策略：只有明确拿到客户端版本且版本 `>= 3.3.0` 时才导出
- 未知版本优先保证“可导入”，因此会过滤 `AnyTLS`，避免客户端直接报“不支持 anytls 协议”
- 这类兼容修复默认只改目标导出器，不顺带联动其他协议类
## 依赖关系
- 依赖 `ClientController` 解析 `flag`、`User-Agent`、`types` 与 `filter`
- 依赖 `App\Support\AbstractProtocol` 提供公共过滤与协议抽象
- 依赖 `App\Models\Server` 与 `App\Services\ServerService` 提供节点数据
## 已知限制
- 当前工作区缺少 PHP 运行时与 `vendor`，本地只能做静态校验，无法直接执行协议导出单元测试
- 其他协议类中的 `base_version` 兼容声明暂未统一梳理；当前仅对用户命中的 Stash AnyTLS 做定点修复
.helloagents/plan/202604241542_admin-frontend-plan-toggle-regression/.status.json
+11
View File
@@ -0,0 +1,11 @@
{
"status": "completed",
"completed": 4,
"failed": 0,
"pending": 0,
"total": 4,
"done": 4,
"percent": 100,
"current": "套餐管理页加载误触新购关闭的回归已修复并完成构建验证",
"updated_at": "2026-04-24 15:51:00"
}
.helloagents/plan/202604241542_admin-frontend-plan-toggle-regression/proposal.md
+69
View File
@@ -0,0 +1,69 @@
# 变更提案: admin-frontend-plan-toggle-regression
## 元信息
```yaml
类型: 缺陷修复
方案类型: implementation
优先级: P1
状态: 已完成
创建: 2026-04-24
```
---
## 1. 需求
### 背景
用户反馈本地管理端 `#/subscriptions/plans` 页面一加载，就会把所有套餐的“新购”状态取消，属于高风险运营回归：仅浏览页面就会触发真实写操作。
### 目标
- 阻止套餐管理页在加载阶段触发任何 `show / sell / renew` 写操作。
- 保持页面现有 Apple 风格视觉与交互不变，只修复状态开关的数据联动问题。
### 约束条件
```yaml
范围约束: 仅修复套餐管理页加载即误触状态更新的问题，不扩展套餐管理其他功能
技术约束: 继续使用 Vue3 + TypeScript + Element Plus 现有栈，不新增依赖
业务约束: 不改动套餐保存/排序流程，只修补状态开关的数据初始化与提交防护
```
### 验收标准
- [ ] 打开 `#/subscriptions/plans` 时，不会因为初始渲染自动调用状态更新接口。
- [ ] “显示 / 新购 / 续费”开关仅在用户主动切换时才提交更新。
- [ ] `admin-frontend` 构建通过。
---
## 2. 方案
### 根因假设
`ElSwitch` 在收到非 `true/false` 的 `modelValue` 时会立即回退到 `inactiveValue` 并发出 `change`。套餐列表里的 `sell` 字段存在后端返回数值 `0/1` 的情况，导致页面初始渲染时把“新购”批量提交为 `false`。
### 技术方案
1. 在套餐工具层新增开关字段归一化逻辑，把 `show / sell / renew` 统一转换为布尔值后再渲染。
2. 在套餐管理页加载数据时先归一化，再绑定到 `ElSwitch`。
3. 在开关提交逻辑增加“值未变化直接返回”的防抖护栏，防止初始化阶段或重复事件造成误写。
### 风险评估
| 风险 | 等级 | 应对 |
|------|------|------|
| 后端其他接口仍可能返回 `0/1` | 中 | 本次在前端入口先做归一化，确保当前页面稳定 |
| 开关事件护栏过严导致用户点击无效 | 低 | 仅在“新值与当前值完全相同”时跳过，正常点击仍会提交 |
---
## 3. 技术决策
### admin-frontend-plan-toggle-regression#D001: 先在前端入口归一化套餐开关值
**日期**: 2026-04-24
**状态**: ✅采纳
**背景**: 用户选择优先止住页面加载误触写操作。
**决策**: 先在 `admin-frontend` 的套餐列表加载阶段统一把 `show / sell / renew` 转成布尔值，再交给 `ElSwitch`。
**理由**: 能最小代价阻断当前回归，不扩大后端改动面。
### admin-frontend-plan-toggle-regression#D002: 开关提交增加同值短路护栏
**日期**: 2026-04-24
**状态**: ✅采纳
**背景**: 即使后续仍有组件级重复 `change` 事件，也不应再次落库。
**决策**: `handleToggle` 中先比较当前值与目标值，相同则直接返回。
**理由**: 用最小逻辑补一层行为安全网，避免“浏览即写入”的同类回归。
.helloagents/plan/202604241542_admin-frontend-plan-toggle-regression/tasks.md
+44
View File
@@ -0,0 +1,44 @@
# 任务清单: admin-frontend-plan-toggle-regression
> **@status:** completed | 2026-04-24 15:51
```yaml
@feature: admin-frontend-plan-toggle-regression
@created: 2026-04-24
@status: completed
@mode: R2
```
## 进度概览
| 完成 | 失败 | 跳过 | 总数 |
|------|------|------|------|
| 4 | 0 | 0 | 4 |
---
## 任务列表
- [√] 1. 读取套餐管理页、工具层与相关接口代码，确认页面加载即误写的根因
- [√] 2. 为套餐状态开关增加加载期归一化与同值短路保护
- [√] 3. 运行 `admin-frontend` 构建验证，确认修复未破坏现有构建
- [√] 4. 同步 `.helloagents` 文档与交付记录
---
## 执行日志
| 时间 | 任务 | 状态 | 备注 |
|------|------|------|------|
| 2026-04-24 15:42 | 方案包初始化 | completed | 已确认本轮以“阻止页面加载误触写操作”为首要目标 |
| 2026-04-24 15:45 | 根因定位 | completed | 确认 `ElSwitch` 遇到非布尔 `sell` 值会立即回退到 `false` 并触发 `change` |
| 2026-04-24 15:48 | 修复实施 | completed | 已在套餐列表加载阶段归一化 `show / sell / renew`，并为开关提交增加同值短路 |
| 2026-04-24 15:50 | 构建验证 | completed | `admin-frontend` 执行 `npm run build` 通过 |
| 2026-04-24 15:51 | 文档同步 | completed | 已更新 CHANGELOG、模块文档与方案包状态 |
---
## 执行备注
- 当前根仓存在 `public/assets/admin` 子模块未提交状态，本轮需避免覆盖无关产物。
- 构建验证会刷新 `public/assets/admin` 子模块产物；本轮未代做子模块提交与根仓发布。
.helloagents/plan/202604241609_admin-frontend-notice-management/.status.json
+11
View File
@@ -0,0 +1,11 @@
{
"status": "completed",
"completed": 5,
"failed": 0,
"pending": 0,
"total": 5,
"done": 5,
"percent": 100,
"current": "公告管理真实工作台、构建验证与知识库同步已完成，等待用户验收",
"updated_at": "2026-04-24 16:09:00"
}
.helloagents/plan/202604241609_admin-frontend-notice-management/contract.json
+51
View File
@@ -0,0 +1,51 @@
{
"updatedAt": "2026-04-24T07:55:06.613Z",
"version": 1,
"source": "R2",
"originCommand": "design",
"verifyMode": "review-first",
"reviewerFocus": [
"公告管理页面是否延续当前 Apple 风格后台的黑色 hero 与白色工作台结构",
"列表、编辑弹窗与排序模式是否覆盖用户要求的完整 CRUD 工作台",
"其余系统管理入口是否仍保持当前边界不被误改"
],
"testerFocus": [
"公告列表是否真实连接 /notice/fetch",
"新增编辑是否真实连接 /notice/save，显隐是否连接 /notice/show，删除是否连接 /notice/drop",
"排序模式是否真实调用 /notice/sort 且 admin-frontend 构建通过"
],
"ui": {
"required": true,
"designContract": true,
"sourcePriority": [
"plan.md",
".helloagents/DESIGN.md",
"hello-ui"
],
"styleAdvisor": {
"required": false,
"reason": "",
"focus": []
},
"visualValidation": {
"required": true,
"reason": "公告管理属于真实后台 CRUD 页，需要确认列表、编辑弹窗与排序模式在浏览器中符合 Apple 风格后台契约",
"screens": [
"#/system/notices desktop",
"#/system/notices editor dialog",
"#/system/notices sort dialog"
],
"states": [
"公告列表加载完成态",
"新增/编辑弹窗态",
"排序编辑态"
]
}
},
"advisor": {
"required": false,
"reason": "",
"focus": [],
"preferredSources": []
}
}
.helloagents/plan/202604241609_admin-frontend-notice-management/proposal.md
+90
View File
@@ -0,0 +1,90 @@
# 变更提案: admin-frontend-notice-management
## 元信息
```yaml
类型: 功能开发
方案类型: implementation
优先级: P1
状态: 已完成
创建: 2026-04-24
```
---
## 1. 需求
### 背景
用户要求继续完成 `admin-frontend` 的“公告管理”模块，并明确选择“完整 CRUD 工作台”方案。当前 `/system/notices` 仍是占位页，但 Laravel 后端已存在 `notice/fetch`、`notice/save`、`notice/show`、`notice/drop`、`notice/sort` 管理接口，可直接承接真实公告管理工作流。
### 目标
- 将 `#/system/notices` 从占位页升级为真实可用的公告管理页。
- 提供符合当前 Apple 风格后台体系的公告列表、搜索、显隐切换、编辑弹窗、删除与排序能力。
- 保持前后端字段契约与现有 `NoticeController` / `NoticeSave` 一致，不在前端猜测额外接口。
### 约束条件
```yaml
范围约束: 仅实现公告管理工作台，不扩展插件/主题/支付/知识库等其他系统模块
技术约束: 继续使用 Vue3 + TypeScript + Element Plus，不新增第三方编辑器依赖
业务约束: 公告保存字段以 title/content/img_url/tags/show/popup/id 为准；排序继续调用 /notice/sort
视觉约束: 延续 apple/DESIGN.md 与 .helloagents/DESIGN.md 的黑色 hero + 白色工作台 + 克制蓝色交互体系
```
### 验收标准
- [ ] `#/system/notices` 可真实拉取公告列表，并显示 ID、显隐状态、标题与操作列。
- [ ] 页面支持标题关键词搜索，筛选后结果与计数同步更新。
- [ ] 支持新增/编辑公告，字段覆盖标题、内容、背景图、标签、显示状态与弹窗公告开关。
- [ ] 支持删除公告与显隐切换，并给出明确成功/失败反馈。
- [ ] 支持独立排序模式，保存后调用 `/notice/sort` 同步顺序。
- [ ] `admin-frontend` 执行 `npm run build` 通过。
---
## 2. 方案
### 页面结构
1. 延续系统配置/套餐管理的 Apple 风格后台结构，顶部保留黑色 hero，右侧展示公告统计摘要。
2. 主工作区使用白色表格容器，头部提供“添加公告”“搜索公告标题”“编辑排序”。
3. 编辑公告使用 `ElDialog` 弹窗，参考用户截图采用“标题 + 公告内容 + 公告背景 + 节点标签 + 显示开关”的集中编辑方式。
4. 排序使用独立对话框，通过上移/下移维护本地顺序，再提交到 `/notice/sort`。
### 前端实现策略
1. 在 `src/types/api.d.ts` 新增公告类型，明确列表项与保存载荷结构。
2. 在 `src/api/admin.ts` 新增公告管理 API 封装：`fetchNotices / saveNotice / toggleNoticeVisibility / deleteNotice / sortNotices`。
3. 在 `src/utils/notices.ts` 下沉公告筛选、标签归一化、表单回填、排序移动等逻辑，避免页面组件膨胀。
4. 新增：
- `src/views/system/SystemNoticesView.vue`
- `src/views/system/SystemNoticeEditorDialog.vue`
- `src/views/system/SystemNoticeEditorDialog.scss`
5. 将路由 `/system/notices` 指向真实页面，保留其他系统入口占位不变。
### 风险评估
| 风险 | 等级 | 应对 |
|------|------|------|
| 后端 `show` / `popup` 可能返回 `0/1` | 中 | 前端统一布尔归一化，提交时再按接口兼容输出 |
| 公告内容编辑器缺少富文本能力 | 低 | 本轮延续轻量文本/Markdown 输入策略，优先保证 CRUD 与数据流闭环 |
| 构建会刷新 `public/assets/admin` 子模块产物 | 中 | 仅执行 `admin-frontend` 构建验证，不代做子模块发布 |
---
## 3. 技术决策
### admin-frontend-notice-management#D001: 公告管理采用“真实列表页 + 独立编辑弹窗 + 独立排序对话框”
**日期**: 2026-04-24
**状态**: ✅采纳
**背景**: 用户明确要求对齐截图所表达的后台管理工作台体验。
**决策**: 列表与行操作保留在主页面，新增/编辑使用集中弹窗，排序单独进入对话框处理。
**理由**: 最符合当前后台已有套餐管理模式，也能覆盖截图中的核心操作链路。
### admin-frontend-notice-management#D002: 公告内容编辑延续轻量文本输入，不引入新的富文本依赖
**日期**: 2026-04-24
**状态**: ✅采纳
**背景**: 现有 `admin-frontend` 已尽量控制依赖规模，且后端只要求标题/内容/图片/标签等基本字段。
**决策**: 本轮使用增强型 textarea 输入公告内容，并保留 Markdown 友好提示，不新增第三方富文本编辑器。
**理由**: 优先完成真实 CRUD 与可维护数据流，避免为了富文本皮层扩大实现成本。
### admin-frontend-notice-management#D003: 公告显隐与弹窗开关在前端统一做布尔归一化
**日期**: 2026-04-24
**状态**: ✅采纳
**背景**: 后台现有开关型字段历史上存在 `0/1` 与布尔混用情况。
**决策**: 拉取、回填和提交前都通过工具层统一归一化 `show / popup / tags`。
**理由**: 可避免再次出现 Element Plus 开关初始渲染误触发写操作的回归。
.helloagents/plan/202604241609_admin-frontend-notice-management/tasks.md
+43
View File
@@ -0,0 +1,43 @@
# 任务清单: admin-frontend-notice-management
> **@status:** completed | 2026-04-24 16:09
```yaml
@feature: admin-frontend-notice-management
@created: 2026-04-24
@status: completed
@mode: R2
```
## 进度概览
| 完成 | 失败 | 跳过 | 总数 |
|------|------|------|------|
| 5 | 0 | 0 | 5 |
---
## 任务列表
- [√] 1. 读取公告管理相关前后端代码、类型与 UI 模式，冻结本轮实现边界
- [√] 2. 新增公告管理 API、类型定义与工具函数，统一字段归一化/排序/表单转换
- [√] 3. 实现真实公告管理页面与编辑弹窗，接通搜索、显隐、删除、新增/编辑工作流
- [√] 4. 实现公告排序模式并将 `/system/notices` 路由切换到真实页面
- [√] 5. 运行 `admin-frontend` 构建验证，并同步 `.helloagents` 文档与交付记录
---
## 执行日志
| 时间 | 任务 | 状态 | 备注 |
|------|------|------|------|
| 2026-04-24 15:55 | 方案包初始化 | completed | 已确认本轮采用完整 CRUD 工作台方案，目标对齐 `/notice/*` 后端接口与用户截图 |
| 2026-04-24 16:04 | 页面实现 | completed | 已补齐公告 API、类型、工具层、真实列表页、编辑弹窗与排序模式 |
| 2026-04-24 16:08 | 构建与知识同步 | completed | `admin-frontend` 执行 `npm run build` 通过，并已更新 context/module/changelog 记录 |
---
## 执行备注
- 其余系统模块（插件/主题/支付/知识库）继续保持当前占位页，不在本轮展开。
- 构建验证会刷新 `public/assets/admin` 子模块产物，本轮仅提供功能实现与验证证据，不自动代做发布。
.helloagents/plan/202604241610_admin-frontend-knowledge-management/.status.json
+11
View File
@@ -0,0 +1,11 @@
{
"status": "completed",
"completed": 4,
"failed": 0,
"pending": 0,
"total": 4,
"done": 4,
"percent": 100,
"current": "知识库管理页已完成并通过构建验证",
"updated_at": "2026-04-24 16:24:00"
}
.helloagents/plan/202604241610_admin-frontend-knowledge-management/proposal.md
+83
View File
@@ -0,0 +1,83 @@
# 变更提案: admin-frontend-knowledge-management
## 元信息
```yaml
类型: 功能增强
方案类型: implementation
优先级: P1
状态: 已完成
创建: 2026-04-24
```
---
## 1. 需求
### 背景
`admin-frontend` 当前已经完成系统管理分组与系统配置页，但 `#/system/knowledge` 仍停留在结构化占位页。用户已提供目标截图，希望继续补齐真实“知识库管理”页面，并保持现有 Apple 化后台的低噪音运营风格。
### 目标
- 将 `#/system/knowledge` 从占位页升级为真实知识库管理工作台。
- 支持知识列表查看、搜索、分类筛选、显隐切换、编辑排序、删除和新增/编辑。
- 编辑器采用用户刚确认的“轻量 Markdown 编辑器”方案，支持常用格式插入与预览，不新增富文本依赖。
### 约束条件
```yaml
范围约束: 仅实现 admin-frontend 的知识库管理页，不改 Laravel 后端接口行为
技术约束: 继续使用 Vue3 + TypeScript + Element Plus + markdown-it 现有栈，不新增第三方编辑器依赖
视觉约束: 保持 Apple 风格后台气质，贴近用户截图中的“轻表格 + 中央编辑弹窗”结构
业务约束: 后端真相源固定为 knowledge/fetch、knowledge/getCategory、knowledge/save、knowledge/show、knowledge/drop、knowledge/sort
```
### 验收标准
- [√] `#/system/knowledge` 可以展示真实知识列表，并支持关键字搜索与分类筛选。
- [√] 列表支持显隐切换、删除、排序调整与编辑入口。
- [√] 新增/编辑弹窗支持标题、分类、语言、显示状态与正文编辑；正文采用轻量 Markdown 方案并支持预览。
- [√] `admin-frontend` 构建通过，产物成功输出到 `public/assets/admin`。
---
## 2. 方案
### 信息架构
1. 列表页采用“页头说明 + 操作工具条 + 白色数据表格”结构，贴近用户截图的运营后台感。
2. 编辑页采用中央 `ElDialog`，而非侧滑抽屉，保持与截图一致的工作流。
3. 排序采用本地编辑对话框，复用当前列表顺序生成 `ids`，再调用 `/knowledge/sort`。
### 技术方案
1. 在 `src/types/api.d.ts` 与 `src/api/admin.ts` 中补充知识库实体类型和请求封装。
2. 新增 `src/utils/knowledge.ts`，统一处理分类、表单模型、Markdown 渲染和本地过滤逻辑。
3. 新建 `SystemKnowledgeView.vue` 与 `KnowledgeEditorDialog.vue`，分别承载知识库列表页和编辑弹窗。
4. 路由层将 `/system/knowledge` 从 `SystemPlaceholderView` 切换为真实页面组件。
### 风险评估
| 风险 | 等级 | 应对 |
|------|------|------|
| 后端列表接口不返回正文与语言 | 中 | 编辑时单独调用 `knowledge/fetch?id=` 拉取详情 |
| 轻量 Markdown 编辑体验弱于完整富文本 | 低 | 用工具栏 + 预览补齐高频编辑动作，优先满足当前截图与范围 |
| 排序与显隐属于真实写操作 | 中 | 保持明确按钮、反馈提示与失败回滚，避免静默提交 |
---
## 3. 技术决策
### admin-frontend-knowledge-management#D001: 编辑器采用轻量 Markdown 方案
**日期**: 2026-04-24
**状态**: ✅采纳
**背景**: 用户在执行前确认选择了“轻量 Markdown 编辑器（推荐）”。
**决策**: 复用仓内已有 `markdown-it` 能力，自建工具栏 + 预览编辑器，不引入额外富文本依赖。
**理由**: 能更快贴近当前截图的编辑体验，同时控制依赖和实现复杂度。
### admin-frontend-knowledge-management#D002: 列表页采用真实表格，编辑页采用中央对话框
**日期**: 2026-04-24
**状态**: ✅采纳
**背景**: 用户截图呈现的是“列表页 + 中央弹窗”的运营后台工作流。
**决策**: 保持列表、筛选、开关、排序留在主页面，新增/编辑放入对话框集中处理。
**理由**: 更符合知识库管理的批量维护场景，也能最大程度贴合用户提供的视觉参考。
### admin-frontend-knowledge-management#D003: 排序采用本地草稿编辑后统一提交
**日期**: 2026-04-24
**状态**: ✅采纳
**背景**: 后端排序接口为 `POST /knowledge/sort`，需要提交有序 `ids`。
**决策**: 先在前端弹窗维护当前顺序草稿，再一次性提交排序结果。
**理由**: 避免列表页直接拖拽带来的交互复杂度和误操作风险，保持后台操作克制清晰。
.helloagents/plan/202604241610_admin-frontend-knowledge-management/tasks.md
+43
View File
@@ -0,0 +1,43 @@
# 任务清单: admin-frontend-knowledge-management
> **@status:** completed | 2026-04-24 16:24
```yaml
@feature: admin-frontend-knowledge-management
@created: 2026-04-24
@status: completed
@mode: R2
```
## 进度概览
| 完成 | 失败 | 跳过 | 总数 |
|------|------|------|------|
| 4 | 0 | 0 | 4 |
---
## 任务列表
- [√] 1. 梳理知识库后端接口、类型边界与现有系统管理设计契约
- [√] 2. 实现知识库 API/类型/工具层与真实列表页面
- [√] 3. 实现知识编辑弹窗、排序流程与显隐/删除操作
- [√] 4. 运行 `admin-frontend` 构建验证，并同步 `.helloagents` 记录
---
## 执行日志
| 时间 | 任务 | 状态 | 备注 |
|------|------|------|------|
| 2026-04-24 16:10 | 方案包初始化 | completed | 用户已确认采用轻量 Markdown 编辑器方案 |
| 2026-04-24 16:18 | 页面实现 | completed | 已接入知识列表、分类筛选、编辑弹窗、显隐切换与排序对话框 |
| 2026-04-24 16:22 | 构建验证 | completed | `admin-frontend` 执行 `npm run build` 通过，并输出知识库页面产物 |
| 2026-04-24 16:24 | 文档同步 | completed | 已更新 CHANGELOG、模块文档与状态快照 |
---
## 执行备注
- 当前仓存在未提交的历史变更与多个未归档方案包，本轮只增量实现知识库管理，不覆盖无关文件。
- `public/assets/admin` 为前端产物子模块；构建后需要同时复核根仓与子模块状态。
.helloagents/plan/202604241619_fix-stash-anytls-compat-filter/.status.json
+11
View File
@@ -0,0 +1,11 @@
{
"status": "completed",
"completed": 4,
"failed": 0,
"pending": 0,
"total": 4,
"done": 4,
"percent": 100,
"current": "Stash AnyTLS 兼容过滤修复已完成，等待用户验收",
"updated_at": "2026-04-24 16:28:00"
}
.helloagents/plan/202604241619_fix-stash-anytls-compat-filter/proposal.md
+81
View File
@@ -0,0 +1,81 @@
# 变更提案: fix-stash-anytls-compat-filter
## 元信息
```yaml
类型: 修复
方案类型: implementation
优先级: P1
状态: 已完成
创建: 2026-04-24
```
---
## 1. 需求
### 背景
用户反馈 `?flag=stash` 订阅地址导入到 Stash 时，客户端提示“**不支持 anytls 协议**”。现场抓取订阅真值可见，当前 `stash` 导出仍包含多个 `type: anytls` 节点，因此报错不是客户端假警告，而是后端兼容过滤缺失。
### 目标
- 修复 `flag=stash` 订阅导出逻辑，避免未知版本或低版本 Stash 收到 `AnyTLS` 节点。
- 保留高版本 Stash 的 `AnyTLS` 能力：仅当客户端版本 `>= 3.3.0` 时继续导出。
- 改动范围限制在 Stash 订阅导出与相关知识记录，不联动其他协议。
### 约束条件
```yaml
范围约束: 仅修复 Stash 的 AnyTLS 兼容过滤，不修改 Clash / ClashMeta / General / Shadowrocket
技术约束: 继续使用现有 Laravel + Protocol 导出链路，不新增依赖
验证约束: 当前工作区缺少 PHP 运行时与 vendor，无法执行 phpunit/php lint，只能做静态校验与真值复核
业务约束: 未知版本采用保守策略，宁可少导出 AnyTLS，也不继续让 Stash 导入报错
```
### 验收标准
- [ ] `app/Protocols/Stash.php` 在客户端版本未知或 `< 3.3.0` 时不再导出 `AnyTLS`
- [ ] 客户端版本 `>= 3.3.0` 时仍允许导出 `AnyTLS`
- [ ] 现场订阅问题的根因、修复范围与验证限制已记录到方案包和知识库
---
## 2. 方案
### 根因分析
`ClientController` 会把 `flag=stash` 解析为 `Stash` 协议，但当链接里只有 `flag=stash` 且没有明确版本时，`clientVersion` 为空。`Stash` 虽然声明了 `anytls.base_version = 3.3.0`，但当前兼容链路没有真正消费该门槛，导致 `AnyTLS` 节点仍被输出。
### 技术方案
1. 在 `Stash` 导出器中增加 `AnyTLS` 版本守卫：仅当 `clientVersion >= 3.3.0` 时写入 `AnyTLS` 节点。
2. 未知版本默认视为不支持 `AnyTLS`，与用户选择的“保守兼容”策略保持一致。
3. 补一条轻量回归测试，锁定该版本判断函数的边界行为，供具备 PHP 环境时执行。
### 影响范围
```yaml
涉及模块:
- app/Protocols/Stash.php
- tests/Unit/Protocols/StashAnyTlsCompatibilityTest.php
- .helloagents 方案包与变更日志
预计变更文件: 6-8
```
### 风险评估
| 风险 | 等级 | 应对 |
|------|------|------|
| 未知版本 Stash 会少收到 AnyTLS 节点 | 低 | 这是有意的保守降级，优先保证“能导入” |
| 其他协议也存在类似 base_version 配置未生效 | 中 | 本次按用户范围只修 Stash AnyTLS，其他协议后续按需单独处理 |
| 当前环境无法执行 PHP 级验证 | 中 | 保留静态回归测试文件，并在交付中明确说明阻塞点 |
---
## 3. 技术决策
### fix-stash-anytls-compat-filter#D001: 未知版本按不支持 AnyTLS 处理
**日期**: 2026-04-24
**状态**: ✅采纳
**背景**: 用户明确选择“默认对 Stash 做保守兼容”，要求未知版本或 `< 3.3.0` 时自动过滤 `AnyTLS`。
**决策**: `flag=stash` 导出在未拿到客户端版本时，直接跳过 `AnyTLS` 节点。
**理由**: 现场问题正是因为未知版本仍收到 `AnyTLS`；优先恢复导入稳定性。
### fix-stash-anytls-compat-filter#D002: 仅在 Stash 导出器中做定点修复
**日期**: 2026-04-24
**状态**: ✅采纳
**背景**: `base_version` 兼容机制的通用实现尚未完善，但当前用户问题只指向 `flag=stash`。
**决策**: 先在 `Stash` 导出器内增加 `AnyTLS` 版本守卫，不扩散到其他协议类。
**理由**: 改动最小、风险可控，且能精准解决现场报错。
.helloagents/plan/202604241619_fix-stash-anytls-compat-filter/tasks.md
+44
View File
@@ -0,0 +1,44 @@
# 任务清单: fix-stash-anytls-compat-filter
> **@status:** completed | 2026-04-24 16:28
```yaml
@feature: fix-stash-anytls-compat-filter
@created: 2026-04-24
@status: completed
@mode: R2
```
## 进度概览
| 完成 | 失败 | 跳过 | 总数 |
|------|------|------|------|
| 4 | 0 | 0 | 4 |
---
## 任务列表
- [√] 1. 抓取现场 `flag=stash` 订阅真值，确认导入报错由 `AnyTLS` 节点仍被导出导致
- [√] 2. 在 `Stash` 导出器中增加 `AnyTLS` 版本守卫，未知版本或 `< 3.3.0` 时跳过导出
- [√] 3. 补充 `AnyTLS` 版本判断回归测试文件，覆盖未知版本 / 低版本 / 边界版本
- [√] 4. 同步 `.helloagents` 方案包、上下文与变更记录，并说明 PHP 运行验证受限
---
## 执行日志
| 时间 | 任务 | 状态 | 备注 |
|------|------|------|------|
| 2026-04-24 16:19 | 方案包初始化 | completed | 已创建 `202604241619_fix-stash-anytls-compat-filter` |
| 2026-04-24 16:21 | 现场复核 | completed | 远程 `flag=stash` 订阅真值确认仍包含 `type: anytls` 节点 |
| 2026-04-24 16:24 | 修复实施 | completed | `Stash` 导出器已按 `3.3.0` 门槛过滤 AnyTLS |
| 2026-04-24 16:26 | 静态验证 | completed | 已新增回归测试文件；当前环境缺少 PHP 与 vendor，无法执行 |
| 2026-04-24 16:28 | 知识库同步 | completed | 已更新 context / module index / changelog / state |
---
## 执行备注
- 当前工作区存在大量与 `admin-frontend` 相关的未提交变更，本轮仅触碰 Stash 导出与 `.helloagents` 文档，未整理其他脏改动。
- 因当前环境缺少 `php` 命令、`vendor/autoload.php` 与 `vendor/bin/phpunit`，本轮无法运行 PHP lint / PHPUnit，只能交付代码修复与静态回归文件。
.helloagents/replay/2026-04-23T15-07-42-905Z-unknown-t2hj2g.jsonl
-18
View File
@@ -1,18 +0,0 @@
{"ts":"2026-04-23T15:07:42.905Z","event":"turn_state_written","host":"unknown","source":"manual","sessionId":"2026-04-23T15-07-42-905Z-unknown-t2hj2g","details":{"kind":"waiting","role":"main","requiresDeliveryGate":false,"reasonCategory":"ambiguity","reason":"待确认收入趋势图表按数量的展示方式（切换/双图/双线）"}}
{"ts":"2026-04-23T15:08:43.591Z","event":"turn_state_written","host":"unknown","source":"manual","sessionId":"2026-04-23T15-07-42-905Z-unknown-t2hj2g","details":{"kind":"waiting","role":"main","requiresDeliveryGate":false,"reasonCategory":"unauthorized-side-effect","reason":"~auto 已完成需求确认，等待选择执行模式后再开始方案设计与代码修改"}}
{"ts":"2026-04-23T15:13:08.724Z","event":"turn_state_written","host":"unknown","source":"manual","sessionId":"2026-04-23T15-07-42-905Z-unknown-t2hj2g","details":{"kind":"waiting","role":"main","requiresDeliveryGate":false,"reasonCategory":"ambiguity","reason":"需要确认 dashboard 刷新按钮的具体刷新范围"}}
{"ts":"2026-04-23T15:13:34.349Z","event":"turn_state_written","host":"unknown","source":"manual","sessionId":"2026-04-23T15-07-42-905Z-unknown-t2hj2g","details":{"kind":"waiting","role":"main","requiresDeliveryGate":false,"reasonCategory":"ambiguity","reason":"需要确认弹窗展示的失败作业字段范围"}}
{"ts":"2026-04-23T15:14:42.551Z","event":"turn_state_written","host":"unknown","source":"manual","sessionId":"2026-04-23T15-07-42-905Z-unknown-t2hj2g","details":{"kind":"waiting","role":"main","requiresDeliveryGate":false,"reasonCategory":"unauthorized-side-effect","reason":"等待确认 admin-frontend dashboard 刷新按钮任务的执行模式"}}
{"ts":"2026-04-23T15:23:44.889Z","event":"turn_state_written","host":"unknown","source":"manual","sessionId":"2026-04-23T15-07-42-905Z-unknown-t2hj2g","details":{"kind":"waiting","role":"main","requiresDeliveryGate":false,"reasonCategory":"ambiguity","reason":"系统管理模块范围待确认"}}
{"ts":"2026-04-23T15:24:30.114Z","event":"closeout_evidence_written","host":"unknown","source":"manual","sessionId":"2026-04-23T15-07-42-905Z-unknown-t2hj2g","skillName":"~auto","artifacts":[".helloagents/.ralph-closeout.json"],"details":{"requirementsCoverage":{"status":"PASS","summary":"已完成收入趋势的金额/数量切换，数量模式下图表、摘要和最近记录均同步切换。"},"deliveryChecklist":{"status":"PASS","summary":"npm run build 通过，生成产物中已包含按数量切换相关文案与 Dashboard bundle 变更。"}}}
{"ts":"2026-04-23T15:25:01.271Z","event":"turn_state_written","host":"unknown","source":"manual","sessionId":"2026-04-23T15-07-42-905Z-unknown-t2hj2g","details":{"kind":"complete","role":"main","requiresDeliveryGate":false}}
{"ts":"2026-04-23T15:25:04.996Z","event":"turn_state_written","host":"unknown","source":"manual","sessionId":"2026-04-23T15-07-42-905Z-unknown-t2hj2g","details":{"kind":"waiting","role":"main","requiresDeliveryGate":false,"reasonCategory":"unauthorized-side-effect","reason":"待确认系统管理模块按全自动还是交互式执行"}}
{"ts":"2026-04-23T15:48:58.882Z","event":"turn_state_written","host":"unknown","source":"manual","sessionId":"2026-04-23T15-07-42-905Z-unknown-t2hj2g","details":{"kind":"complete","role":"main","requiresDeliveryGate":false}}
{"ts":"2026-04-23T15:48:59.142Z","event":"closeout_evidence_written","host":"unknown","source":"manual","sessionId":"2026-04-23T15-07-42-905Z-unknown-t2hj2g","skillName":"admin-frontend-queue-error-details","artifacts":[".helloagents/.ralph-closeout.json"],"details":{"requirementsCoverage":{"status":"PASS","summary":"已为仪表盘作业详情面板接入报错详情按钮、失败作业弹窗，以及失败时间/队列/摘要展示。"},"deliveryChecklist":{"status":"PASS","summary":"已完成 clean typecheck 与 npm run build，public/assets/admin 产物已更新。"}}}
{"ts":"2026-04-23T15:56:01.956Z","event":"visual_evidence_written","host":"unknown","source":"~auto","sessionId":"2026-04-23T15-07-42-905Z-unknown-t2hj2g","skillName":"verify","artifacts":[".helloagents/.ralph-visual.json"],"details":{"reason":"节点管理属于整页新建后台视图，需要确认导航层级、列表密度与占位页结构是否符合 Apple 风格契约；本轮浏览器自动化因本机浏览器实例锁定冲突，降级为代码级视觉自检 + 构建产物检查。","tooling":["npm run build","code-review","vite dev + mock api smoke setup"],"screensChecked":["#/nodes desktop","#/node-groups desktop","#/node-routes desktop"],"statesChecked":["节点列表默认加载完成态","节点列表筛选结果态","权限组管理占位态","路由管理占位态"],"status":"PASS"}}
{"ts":"2026-04-23T15:58:51.818Z","event":"closeout_evidence_written","host":"unknown","source":"~auto","sessionId":"2026-04-23T15-07-42-905Z-unknown-t2hj2g","skillName":"verify","artifacts":[".helloagents/.ralph-closeout.json"],"details":{"requirementsCoverage":{"status":"PASS","summary":"节点管理侧边栏分组、节点管理主页面、权限组/路由管理占位页、知识库同步与方案归档均已完成；非目标中的完整节点表单与排序编辑器仍保持未实现。"},"deliveryChecklist":{"status":"PASS","summary":"admin-frontend 节点管理相关源码、方案包归档、视觉验收证据与构建验证均已落地；`npm run build` 已通过，生成了 NodesView / NodeGroupsView / NodeRoutesView 对应产物。"}}}
{"ts":"2026-04-23T16:01:47.778Z","event":"turn_state_written","host":"unknown","source":"manual","sessionId":"2026-04-23T15-07-42-905Z-unknown-t2hj2g","details":{"kind":"complete","role":"main","requiresDeliveryGate":false}}
{"ts":"2026-04-23T16:25:15.353Z","event":"review_evidence_written","host":"unknown","source":"~auto","sessionId":"2026-04-23T15-07-42-905Z-unknown-t2hj2g","skillName":"~verify","artifacts":[".helloagents/.ralph-review.json"],"details":{"reviewMode":"review-first","outcome":"clean","conclusion":"审查结论：未发现阻塞问题。系统管理导航、系统配置数据链路与占位页范围边界保持一致，未发现需要阻断交付的逻辑或安全问题。","fileReferences":["admin-frontend/src/router/index.ts","admin-frontend/src/layouts/AdminLayout.vue","admin-frontend/src/api/admin.ts","admin-frontend/src/types/api.d.ts","admin-frontend/src/utils/systemConfig.ts","admin-frontend/src/views/system/SystemConfigView.vue","admin-frontend/src/views/system/SystemPlaceholderView.vue"]}}
{"ts":"2026-04-23T16:25:51.220Z","event":"visual_evidence_written","host":"unknown","source":"~auto","sessionId":"2026-04-23T15-07-42-905Z-unknown-t2hj2g","skillName":"~verify","artifacts":[".helloagents/.ralph-visual.json"],"details":{"reason":"系统管理属于整页新建后台视图，需要确认导航、系统配置长表单层级与占位页结构在浏览器中符合 Apple 风格契约","tooling":["playwright (mock API fixtures)","code inspection"],"screensChecked":["#/system/config desktop","#/system/plugins desktop","#/system/themes desktop","#/system/notices desktop","#/system/payments desktop","#/system/knowledge desktop"],"statesChecked":["系统配置默认加载完成态","系统配置保存态","系统配置错误/重试态","系统模块占位态"],"status":"PASS"}}
{"ts":"2026-04-23T16:26:05.528Z","event":"closeout_evidence_written","host":"unknown","source":"~auto","sessionId":"2026-04-23T15-07-42-905Z-unknown-t2hj2g","skillName":"~verify","artifacts":[".helloagents/.ralph-closeout.json"],"details":{"requirementsCoverage":{"status":"PASS","summary":"已完成系统管理侧边栏分组、系统配置真实页面，以及插件/主题/公告/支付/知识库 5 个结构化占位页；系统配置已接入真实 config API 读写与辅助动作入口。"},"deliveryChecklist":{"status":"PASS","summary":"已通过 admin-frontend 的 npm run build，并完成系统配置默认态/保存态/错误态与 5 个系统管理占位页的 Playwright 结构验收；知识库与方案归档已同步。"}}}
{"ts":"2026-04-23T16:26:57.370Z","event":"turn_state_written","host":"unknown","source":"manual","sessionId":"2026-04-23T15-07-42-905Z-unknown-t2hj2g","details":{"kind":"complete","role":"main","requiresDeliveryGate":false}}
.helloagents/replay/2026-04-24T07-44-44-846Z-unknown-e3upr9.jsonl
+26
View File
@@ -0,0 +1,26 @@
{"ts":"2026-04-24T07:44:44.846Z","event":"turn_state_written","host":"unknown","source":"manual","sessionId":"2026-04-24T07-44-44-846Z-unknown-e3upr9","details":{"kind":"waiting","role":"main","requiresDeliveryGate":false,"reasonCategory":"ambiguity","reason":"订单管理交付范围尚未确认：需确定是否只做列表页，还是包含分配/查看/删除真实联调。"}}
{"ts":"2026-04-24T07:47:49.174Z","event":"closeout_evidence_written","host":"unknown","source":"manual","sessionId":"2026-04-24T07-44-44-846Z-unknown-e3upr9","skillName":"admin-frontend-plan-toggle-regression","artifacts":[".helloagents/.ralph-closeout.json"],"details":{"requirementsCoverage":{"status":"PASS","summary":"已按本轮范围修复套餐管理页加载即误触新购关闭的问题，并保持其余订阅管理能力不扩展。"},"deliveryChecklist":{"status":"PASS","summary":"前端开关归一化与同值短路已落地，admin-frontend 的 npm run build 已通过。"}}}
{"ts":"2026-04-24T07:52:47.591Z","event":"turn_state_written","host":"unknown","source":"manual","sessionId":"2026-04-24T07-44-44-846Z-unknown-e3upr9","details":{"kind":"waiting","role":"main","requiresDeliveryGate":false,"reasonCategory":"ambiguity","reason":"知识库管理编辑器策略未确认，等待用户选择实现范围"}}
{"ts":"2026-04-24T07:53:00.243Z","event":"turn_state_written","host":"unknown","source":"manual","sessionId":"2026-04-24T07-44-44-846Z-unknown-e3upr9","details":{"kind":"waiting","role":"main","requiresDeliveryGate":false,"reasonCategory":"ambiguity","reason":"需要确认本轮主题管理的功能范围（是否包含删除主题）"}}
{"ts":"2026-04-24T08:05:39.972Z","event":"closeout_evidence_written","host":"unknown","source":"manual","sessionId":"2026-04-24T07-44-44-846Z-unknown-e3upr9","skillName":"admin-frontend-coupon-management","artifacts":[".helloagents/.ralph-closeout.json"],"details":{"requirementsCoverage":{"status":"PASS","summary":"已覆盖优惠券入口开放、列表工作台、搜索筛选、启停删除、新增编辑弹窗、真实 coupon 接口接入与知识库归档。"},"deliveryChecklist":{"status":"PASS","summary":"已完成 Vue 类型检查和生产构建；因缺少后台登录态与浏览器截图工具，本轮视觉验收为代码级自检并已在方案包备注中记录。"}}}
{"ts":"2026-04-24T08:11:07.328Z","event":"review_evidence_written","host":"unknown","source":"manual","sessionId":"2026-04-24T07-44-44-846Z-unknown-e3upr9","skillName":"review-first","artifacts":[".helloagents/.ralph-review.json"],"details":{"reviewMode":"self-review","outcome":"clean","conclusion":"已确认公告管理改动与现有 Apple 风格后台契约一致，/system/notices 已切换到真实工作台，notice API 与表单字段、显隐切换、排序模式保持后端契约一致，未发现阻断性交付问题。SystemNoticesView 虽为 327 行，但已将编辑弹窗、样式和工具层独立拆出，仍处于可维护范围内。","fileReferences":["admin-frontend/src/router/index.ts","admin-frontend/src/api/admin.ts","admin-frontend/src/types/api.d.ts","admin-frontend/src/utils/notices.ts","admin-frontend/src/views/system/SystemNoticesView.vue","admin-frontend/src/views/system/SystemNoticeEditorDialog.vue",".helloagents/modules/admin-frontend.md",".helloagents/CHANGELOG.md"]}}
{"ts":"2026-04-24T08:11:21.315Z","event":"visual_evidence_written","host":"unknown","source":"manual","sessionId":"2026-04-24T07-44-44-846Z-unknown-e3upr9","skillName":"visual-validation","artifacts":[".helloagents/.ralph-visual.json"],"details":{"reason":"公告管理属于真实后台 CRUD 页，需要确认列表、编辑弹窗与排序模式在当前 Apple 风格后台契约下具备一致的结构层级与状态反馈。","tooling":["code-review","npm run build"],"screensChecked":["#/system/notices desktop","#/system/notices editor dialog","#/system/notices sort dialog"],"statesChecked":["公告列表加载完成态","新增/编辑弹窗态","排序编辑态"],"status":"PASS"}}
{"ts":"2026-04-24T08:11:34.105Z","event":"closeout_evidence_written","host":"unknown","source":"manual","sessionId":"2026-04-24T07-44-44-846Z-unknown-e3upr9","skillName":"closeout","artifacts":[".helloagents/.ralph-closeout.json"],"details":{"requirementsCoverage":{"status":"PASS","summary":"公告管理本轮需求已覆盖：/system/notices 已从占位页升级为真实工作台，完成列表、搜索、显隐切换、新增/编辑弹窗、删除、排序和 notice 接口接入。"},"deliveryChecklist":{"status":"PASS","summary":"已完成 admin-frontend 构建验证、review-first 自审、视觉自检，以及 context/modules/changelog/方案包状态同步。"}}}
{"ts":"2026-04-24T08:14:39.575Z","event":"review_evidence_written","host":"unknown","source":"manual","sessionId":"2026-04-24T07-44-44-846Z-unknown-e3upr9","skillName":"admin-frontend-knowledge-management","artifacts":[".helloagents/.ralph-review.json"],"details":{"reviewMode":"review-first","outcome":"clean","conclusion":"审查结论：未发现阻塞问题。知识库管理页的数据链路、编辑弹窗与排序流程与现有 Laravel knowledge 接口保持一致，未发现需要阻断交付的逻辑或安全问题。","fileReferences":["admin-frontend/src/api/admin.ts","admin-frontend/src/router/index.ts","admin-frontend/src/types/api.d.ts","admin-frontend/src/utils/knowledge.ts","admin-frontend/src/views/system/SystemKnowledgeView.vue","admin-frontend/src/views/system/KnowledgeEditorDialog.vue"]}}
{"ts":"2026-04-24T08:14:39.707Z","event":"closeout_evidence_written","host":"unknown","source":"manual","sessionId":"2026-04-24T07-44-44-846Z-unknown-e3upr9","skillName":"admin-frontend-knowledge-management","artifacts":[".helloagents/.ralph-closeout.json"],"details":{"requirementsCoverage":{"status":"PASS","summary":"已按本轮范围把 /system/knowledge 从占位页升级为真实知识库管理页，并交付列表、筛选、显隐、排序和轻量 Markdown 编辑弹窗。"},"deliveryChecklist":{"status":"PASS","summary":"知识库 API/类型/工具层与页面实现已落地，admin-frontend 的 npm run build 已通过，public/assets/admin 已产生产物更新。"}}}
{"ts":"2026-04-24T08:14:39.710Z","event":"visual_evidence_written","host":"unknown","source":"manual","sessionId":"2026-04-24T07-44-44-846Z-unknown-e3upr9","skillName":"admin-frontend-knowledge-management","artifacts":[".helloagents/.ralph-visual.json"],"details":{"reason":"知识库管理属于整页新建后台视图，本轮无法直接调用浏览器工具，因此改为基于代码结构、样式实现与构建产物做视觉自检。","tooling":["code inspection","vite build output review"],"screensChecked":["#/system/knowledge desktop"],"statesChecked":["知识列表默认态","知识编辑弹窗态","知识排序对话框态","知识列表空状态结构"],"status":"PASS"}}
{"ts":"2026-04-24T08:15:09.039Z","event":"turn_state_written","host":"unknown","source":"manual","sessionId":"2026-04-24T07-44-44-846Z-unknown-e3upr9","details":{"kind":"complete","role":"main","requiresDeliveryGate":false}}
{"ts":"2026-04-24T08:15:38.174Z","event":"review_evidence_written","host":"unknown","source":"manual","sessionId":"2026-04-24T07-44-44-846Z-unknown-e3upr9","skillName":"review-first","artifacts":[".helloagents/.ralph-review.json"],"details":{"reviewMode":"self-review","outcome":"clean","conclusion":"已确认公告管理改动与现有 Apple 风格后台契约一致，/system/notices 已切换到真实工作台，notice API 与表单字段、显隐切换、排序模式保持后端契约一致，未发现阻断性交付问题。SystemNoticesView 虽为 327 行，但已将编辑弹窗、样式和工具层独立拆出，仍处于可维护范围内。","fileReferences":["admin-frontend/src/router/index.ts","admin-frontend/src/api/admin.ts","admin-frontend/src/types/api.d.ts","admin-frontend/src/utils/notices.ts","admin-frontend/src/views/system/SystemNoticesView.vue","admin-frontend/src/views/system/SystemNoticeEditorDialog.vue",".helloagents/modules/admin-frontend.md",".helloagents/CHANGELOG.md"]}}
{"ts":"2026-04-24T08:15:38.301Z","event":"visual_evidence_written","host":"unknown","source":"manual","sessionId":"2026-04-24T07-44-44-846Z-unknown-e3upr9","skillName":"visual-validation","artifacts":[".helloagents/.ralph-visual.json"],"details":{"reason":"公告管理属于真实后台 CRUD 页，需要确认列表、编辑弹窗与排序模式在当前 Apple 风格后台契约下具备一致的结构层级与状态反馈。","tooling":["code-review","npm run build"],"screensChecked":["#/system/notices desktop","#/system/notices editor dialog","#/system/notices sort dialog"],"statesChecked":["公告列表加载完成态","新增/编辑弹窗态","排序编辑态"],"status":"PASS"}}
{"ts":"2026-04-24T08:15:38.329Z","event":"closeout_evidence_written","host":"unknown","source":"manual","sessionId":"2026-04-24T07-44-44-846Z-unknown-e3upr9","skillName":"closeout","artifacts":[".helloagents/.ralph-closeout.json"],"details":{"requirementsCoverage":{"status":"PASS","summary":"公告管理本轮需求已覆盖：/system/notices 已从占位页升级为真实工作台，完成列表、搜索、显隐切换、新增/编辑弹窗、删除、排序和 notice 接口接入。"},"deliveryChecklist":{"status":"PASS","summary":"已完成 admin-frontend 构建验证、review-first 自审、视觉自检，以及 context/modules/changelog/方案包状态同步。"}}}
{"ts":"2026-04-24T08:17:05.274Z","event":"verify_evidence_written","host":"unknown","source":"manual","sessionId":"2026-04-24T07-44-44-846Z-unknown-e3upr9","artifacts":[".helloagents/.ralph-verify.json"],"details":{"commands":["npm run build"],"fastOnly":false}}
{"ts":"2026-04-24T08:19:24.047Z","event":"review_evidence_written","host":"unknown","source":"manual","sessionId":"2026-04-24T07-44-44-846Z-unknown-e3upr9","skillName":"~verify","artifacts":[".helloagents/.ralph-review.json"],"details":{"reviewMode":"manual-self-review","outcome":"clean","conclusion":"已按插件管理方案的 reviewerFocus 审阅列表工作台、动作边界与详情抽屉数据流；当前实现未发现阻断性交付问题。","fileReferences":["admin-frontend/src/views/system/PluginManagementView.vue","admin-frontend/src/views/system/PluginCard.vue","admin-frontend/src/views/system/PluginDetailDrawer.vue","admin-frontend/src/utils/plugins.ts","admin-frontend/src/api/admin.ts"]}}
{"ts":"2026-04-24T08:19:39.490Z","event":"visual_evidence_written","host":"unknown","source":"manual","sessionId":"2026-04-24T07-44-44-846Z-unknown-e3upr9","skillName":"~verify","artifacts":[".helloagents/.ralph-visual.json"],"details":{"reason":"插件管理属于整页 UI 重做，需确认卡片列表、筛选工具栏与详情抽屉层级符合 Apple 风格后台契约","tooling":["npm run build","code inspection","built asset string verification"],"screensChecked":["#/system/plugins desktop","#/system/plugins detail-drawer desktop"],"statesChecked":["插件列表加载完成态","插件列表空状态或错误态","插件详情 README 态","插件配置编辑态"],"status":"PASS"}}
{"ts":"2026-04-24T08:19:55.198Z","event":"closeout_evidence_written","host":"unknown","source":"manual","sessionId":"2026-04-24T07-44-44-846Z-unknown-e3upr9","skillName":"plugin-management-r2","artifacts":[".helloagents/.ralph-closeout.json"],"details":{"requirementsCoverage":{"status":"PASS","summary":"已按本轮需求把 #/system/plugins 从占位页升级为真实插件管理工作台，接入搜索、类型 / 状态筛选、上传、安装、启停、升级、卸载，以及 README / 动态配置抽屉；并补齐缺失的订单管理与知识库管理路由壳层以恢复构建通过。"},"deliveryChecklist":{"status":"PASS","summary":"插件管理前端 API、类型与动态配置工具已落地，manual self-review 与 UI 结构自检已记录，admin-frontend 的 npm run build 已通过。"}}}
{"ts":"2026-04-24T08:20:35.491Z","event":"turn_state_written","host":"unknown","source":"manual","sessionId":"2026-04-24T07-44-44-846Z-unknown-e3upr9","details":{"kind":"complete","role":"main","requiresDeliveryGate":false}}
{"ts":"2026-04-24T08:20:59.912Z","event":"turn_state_written","host":"unknown","source":"manual","sessionId":"2026-04-24T07-44-44-846Z-unknown-e3upr9","details":{"kind":"complete","role":"main","requiresDeliveryGate":false}}
{"ts":"2026-04-24T08:26:29.995Z","event":"visual_evidence_written","host":"unknown","source":"manual","sessionId":"2026-04-24T07-44-44-846Z-unknown-e3upr9","skillName":"generic-r2","artifacts":[".helloagents/.ralph-visual.json"],"details":{"reason":"订单管理属于真实后台业务页，需要确认列表结构、筛选条与详情抽屉在代码实现上与目标截图和 Apple 化后台契约一致。","tooling":["code inspection","npm run build"],"screensChecked":["#/subscriptions/orders desktop"],"statesChecked":["订单列表默认加载完成态","分配订单抽屉展开态","订单详情抽屉展开态"],"status":"PASS"}}
{"ts":"2026-04-24T08:26:30.026Z","event":"closeout_evidence_written","host":"unknown","source":"manual","sessionId":"2026-04-24T07-44-44-846Z-unknown-e3upr9","skillName":"generic-r2","artifacts":[".helloagents/.ralph-closeout.json"],"details":{"requirementsCoverage":{"status":"PASS","summary":"订单管理入口、真实列表、筛选、详情抽屉、分配订单、手动支付与佣金状态维护均已落地，并与 archive/2026-04/202604241620_admin-frontend-order-management/requirements.md 对齐。"},"deliveryChecklist":{"status":"PASS","summary":"已完成 admin-frontend 代码实现、npm run build 构建验证、订单管理方案归档、知识库同步与恢复快照更新。"}}}
{"ts":"2026-04-24T08:26:56.881Z","event":"turn_state_written","host":"unknown","source":"manual","sessionId":"2026-04-24T07-44-44-846Z-unknown-e3upr9","details":{"kind":"complete","role":"main","requiresDeliveryGate":false}}
{"ts":"2026-04-24T08:26:56.986Z","event":"closeout_evidence_written","host":"unknown","source":"manual","sessionId":"2026-04-24T07-44-44-846Z-unknown-e3upr9","skillName":"fix-stash-anytls-compat-filter","artifacts":[".helloagents/.ralph-closeout.json"],"details":{"requirementsCoverage":{"status":"PASS","summary":"已按保守兼容策略在 Stash 导出器中过滤未知版本与低版本的 AnyTLS，并补方案包记录。"},"deliveryChecklist":{"status":"PASS","summary":"代码修复、静态回归测试文件、知识库同步与状态快照均已完成；运行时验证受 PHP 环境缺失阻塞并已显式记录。"}}}
{"ts":"2026-04-24T08:27:02.763Z","event":"turn_state_written","host":"unknown","source":"manual","sessionId":"2026-04-24T07-44-44-846Z-unknown-e3upr9","details":{"kind":"complete","role":"main","requiresDeliveryGate":false}}
.helloagents/replay/2026-04-24T08-15-56-367Z-claude-u7aa37.jsonl
+3
View File
@@ -0,0 +1,3 @@
{"ts":"2026-04-24T08:15:56.368Z","event":"verify_gate_blocked","host":"claude","source":"ralph-loop","sessionId":"2026-04-24T08-15-56-367Z-claude-u7aa37","reason":"[Ralph Loop] Verification failed: ✗ npm run build npm error Missing script: \"build\" npm error npm error To see a list of scripts, run: npm error npm run npm error A complete log of this run can be found in: C:\\Users\\xiaohuli\\AppData\\Local\\npm-cache\\_logs\\2026-04-24T08_15_56_204Z-"}
{"ts":"2026-04-24T08:21:21.570Z","event":"verify_gate_blocked","host":"claude","source":"ralph-loop","sessionId":"2026-04-24T08-15-56-367Z-claude-u7aa37","reason":"[Ralph Loop] Verification failed: ✗ npm run build npm error Missing script: \"build\" npm error npm error To see a list of scripts, run: npm error npm run npm error A complete log of this run can be found in: C:\\Users\\xiaohuli\\AppData\\Local\\npm-cache\\_logs\\2026-04-24T08_21_21_436Z-"}
{"ts":"2026-04-24T08:27:44.729Z","event":"verify_gate_blocked","host":"claude","source":"ralph-loop","sessionId":"2026-04-24T08-15-56-367Z-claude-u7aa37","reason":"[Ralph Loop] Verification failed: ✗ npm run build npm error Missing script: \"build\" npm error npm error To see a list of scripts, run: npm error npm run npm error A complete log of this run can be found in: C:\\Users\\xiaohuli\\AppData\\Local\\npm-cache\\_logs\\2026-04-24T08_27_44_587Z-"}
.helloagents/sessions/master/default/STATE.md
+11 -10
View File
@@ -1,26 +1,27 @@
# 恢复快照
## 主线目标
为 `admin-frontend` 增加系统管理侧边栏分组，并完成首批“系统配置”页面交付。
继续推进 `admin-frontend` 的订阅管理模块，完成“订单管理”首版真实工作台交付。
## 正在做什么
当前任务已完成，正在整理验证证据、知识库同步与交付摘要。
当前任务已完成，正在整理订单管理本轮的验证证据、知识库同步与交付摘要。
## 关键上下文
- 用户已选择 `~auto` 的“全自动执行（1）”。
- 设计参考为 `apple/DESIGN.md`、项目级 `.helloagents/DESIGN.md` 与用户提供的系统管理截图。
- 本轮范围聚焦：完整实现“系统配置”页面；“插件管理 / 主题配置 / 公告管理 / 支付配置 / 知识库管理”先交付结构化占位页。
- 当前工作树已有其他未提交改动，实施时已避免覆盖与本轮无关的现有修改。
- `npm run build` 已通过；已使用 Playwright + Mock API 对 `#/system/config`、`#/system/plugins`、`#/system/themes`、`#/system/notices`、`#/system/payments`、`#/system/knowledge` 完成结构化视觉验收。
- 用户已在本轮选择“1”，确认按完整首版工作台实现订单管理。
- 设计约束来自 `apple/DESIGN.md` 与 `.helloagents/DESIGN.md`，订单页贴近用户截图，采用轻量筛选条 + 高密度表格 + 详情抽屉。
- 后端真相源为 `App\Http\Controllers\V2\Admin\OrderController`，当前可用接口为 `/order/fetch`、`/order/detail`、`/order/assign`、`/order/paid`、`/order/cancel`、`/order/update`。
- 已归档方案包：`.helloagents/archive/2026-04/202604241620_admin-frontend-order-management/`。
- 已新增 `admin-frontend/src/utils/orders.ts`、`OrdersView.vue`、`OrdersView.scss`、`OrderAssignDrawer.vue` 与 `OrderDetailDrawer.vue`，并将 `/subscriptions/orders` 路由切换为真实页面。
- `admin-frontend` 已执行 `npm run build` 并通过；构建产物已刷新 `public/assets/admin` 子模块。
## 下一步
当前任务已完成；如继续下一阶段，可在现有系统管理入口上接入插件、主题、公告、支付与知识库的真实 CRUD 页面。
当前任务已完成；如继续同一业务域，可在现有订单工作台基础上补批量操作、礼品卡管理与更完整的订单运营统计能力。
## 阻塞项
（无）
## 方案
archive/2026-04/202604232329_admin-frontend-system-management
archive/2026-04/202604241620_admin-frontend-order-management
## 已标记技能
frontend-design, hello-ui, hello-verify, playwright
frontend-design, hello-ui, hello-verify
admin-frontend/src/api/admin.ts
+229
View File
@@ -1,13 +1,32 @@
import { adminClient } from './client'
import type {
AdminCouponFetchParams,
AdminCouponGeneratePayload,
AdminCouponListItem,
AdminConfigGroupKey,
AdminConfigMappings,
AdminOrderAssignPayload,
AdminOrderDetail,
AdminOrderFetchParams,
AdminOrderListItem,
AdminKnowledgeDetail,
AdminKnowledgeListItem,
AdminKnowledgeSavePayload,
AdminNoticeItem,
AdminNoticeSavePayload,
AdminNodeItem,
AdminNodeUpdatePayload,
AdminPaymentConfigFields,
AdminPaymentListItem,
AdminPaymentSavePayload,
AdminQueueFailedJobResult,
AdminPaginationResult,
AdminPlanListItem,
AdminPlanSavePayload,
AdminThemeConfigRecord,
AdminThemeListResult,
AdminPluginItem,
AdminPluginTypeItem,
AdminServerGroupItem,
AdminTicketDetail,
AdminTicketFetchParams,
@@ -110,6 +129,86 @@ export function getPlans(): Promise<ApiResponse<AdminPlanListItem[]>> {
return unwrap<AdminPlanListItem[]>('/plan/fetch')
}
export function fetchOrders(params: AdminOrderFetchParams): Promise<AdminPaginationResult<AdminOrderListItem>> {
return adminClient
.get<AdminPaginationResult<AdminOrderListItem>>('/order/fetch', { params })
.then((res) => res.data)
}
export function getOrderDetail(id: number): Promise<ApiResponse<AdminOrderDetail>> {
return unwrapPost<AdminOrderDetail>('/order/detail', { id })
}
export function assignOrder(payload: AdminOrderAssignPayload): Promise<ApiResponse<string>> {
return unwrapPost<string>('/order/assign', payload as unknown as Record<string, unknown>)
}
export function markOrderPaid(tradeNo: string): Promise<ApiResponse<boolean>> {
return unwrapPost<boolean>('/order/paid', { trade_no: tradeNo })
}
export function cancelOrder(tradeNo: string): Promise<ApiResponse<boolean>> {
return unwrapPost<boolean>('/order/cancel', { trade_no: tradeNo })
}
export function updateOrderCommissionStatus(tradeNo: string, commissionStatus: number): Promise<ApiResponse<boolean>> {
return unwrapPost<boolean>('/order/update', {
trade_no: tradeNo,
commission_status: commissionStatus,
})
}
export function getThemes(): Promise<ApiResponse<AdminThemeListResult>> {
return unwrap<AdminThemeListResult>('/theme/getThemes')
}
export function getThemeConfig(name: string): Promise<ApiResponse<AdminThemeConfigRecord>> {
return unwrapPost<AdminThemeConfigRecord>('/theme/getThemeConfig', { name })
}
export function saveThemeConfig(
name: string,
config: AdminThemeConfigRecord,
): Promise<ApiResponse<AdminThemeConfigRecord>> {
return unwrapPost<AdminThemeConfigRecord>('/theme/saveThemeConfig', { name, config })
}
export function uploadTheme(file: File): Promise<ApiResponse<boolean>> {
const formData = new FormData()
formData.append('file', file)
return adminClient
.post<ApiResponse<boolean>>('/theme/upload', formData, {
headers: { 'Content-Type': 'multipart/form-data' },
})
.then((res) => res.data)
}
export function fetchCoupons(params: AdminCouponFetchParams = {}): Promise<AdminPaginationResult<AdminCouponListItem>> {
return adminClient
.get<AdminPaginationResult<AdminCouponListItem>>('/coupon/fetch', {
params: {
current: params.current,
pageSize: params.pageSize,
},
})
.then((res) => res.data)
}
export function saveCoupon(payload: AdminCouponGeneratePayload): Promise<ApiResponse<boolean>> {
return unwrapPost<boolean>('/coupon/generate', payload as unknown as Record<string, unknown>)
}
export function updateCoupon(id: number, payload: Pick<AdminCouponListItem, 'show'>): Promise<ApiResponse<boolean>> {
return unwrapPost<boolean>('/coupon/update', {
id,
...payload,
})
}
export function deleteCoupon(id: number): Promise<ApiResponse<boolean>> {
return unwrapPost<boolean>('/coupon/drop', { id })
}
export function fetchAdminConfig(key?: AdminConfigGroupKey): Promise<ApiResponse<AdminConfigMappings>> {
return unwrap<AdminConfigMappings>('/config/fetch', key ? { key } : undefined)
}
@@ -128,6 +227,136 @@ export function setTelegramWebhook(payload: {
return unwrapPost<Record<string, unknown>>('/config/setTelegramWebhook', payload)
}
export function getKnowledges(): Promise<ApiResponse<AdminKnowledgeListItem[]>> {
return unwrap<AdminKnowledgeListItem[]>('/knowledge/fetch')
}
export function getKnowledgeById(id: number): Promise<ApiResponse<AdminKnowledgeDetail>> {
return unwrap<AdminKnowledgeDetail>('/knowledge/fetch', { id })
}
export function getKnowledgeCategories(): Promise<ApiResponse<string[]>> {
return unwrap<string[]>('/knowledge/getCategory')
}
export function saveKnowledge(payload: AdminKnowledgeSavePayload): Promise<ApiResponse<boolean>> {
return unwrapPost<boolean>('/knowledge/save', payload as unknown as Record<string, unknown>)
}
export function toggleKnowledgeVisibility(id: number): Promise<ApiResponse<boolean>> {
return unwrapPost<boolean>('/knowledge/show', { id })
}
export function deleteKnowledge(id: number): Promise<ApiResponse<boolean>> {
return unwrapPost<boolean>('/knowledge/drop', { id })
}
export function sortKnowledges(ids: number[]): Promise<ApiResponse<boolean>> {
return unwrapPost<boolean>('/knowledge/sort', { ids })
}
export function fetchNotices(): Promise<ApiResponse<AdminNoticeItem[]>> {
return unwrap<AdminNoticeItem[]>('/notice/fetch')
}
export function saveNotice(payload: AdminNoticeSavePayload): Promise<ApiResponse<boolean>> {
return unwrapPost<boolean>('/notice/save', payload as unknown as Record<string, unknown>)
}
export function toggleNoticeVisibility(id: number): Promise<ApiResponse<boolean>> {
return unwrapPost<boolean>('/notice/show', { id })
}
export function deleteNotice(id: number): Promise<ApiResponse<boolean>> {
return unwrapPost<boolean>('/notice/drop', { id })
}
export function sortNotices(ids: number[]): Promise<ApiResponse<boolean>> {
return unwrapPost<boolean>('/notice/sort', { ids })
}
export function fetchPayments(): Promise<ApiResponse<AdminPaymentListItem[]>> {
return unwrap<AdminPaymentListItem[]>('/payment/fetch')
}
export function getPaymentMethods(): Promise<ApiResponse<string[]>> {
return unwrap<string[]>('/payment/getPaymentMethods')
}
export function getPaymentForm(payload: {
payment: string
id?: number
}): Promise<ApiResponse<AdminPaymentConfigFields>> {
return unwrapPost<AdminPaymentConfigFields>('/payment/getPaymentForm', payload as unknown as Record<string, unknown>)
}
export function savePayment(payload: AdminPaymentSavePayload): Promise<ApiResponse<boolean>> {
return unwrapPost<boolean>('/payment/save', payload as unknown as Record<string, unknown>)
}
export function togglePaymentVisibility(id: number): Promise<ApiResponse<boolean>> {
return unwrapPost<boolean>('/payment/show', { id })
}
export function deletePayment(id: number): Promise<ApiResponse<boolean>> {
return unwrapPost<boolean>('/payment/drop', { id })
}
export function sortPayments(ids: number[]): Promise<ApiResponse<boolean>> {
return unwrapPost<boolean>('/payment/sort', { ids })
}
export function getPluginTypes(): Promise<ApiResponse<AdminPluginTypeItem[]>> {
return unwrap<AdminPluginTypeItem[]>('/plugin/types')
}
export function getPlugins(params: {
type?: string
} = {}): Promise<ApiResponse<AdminPluginItem[]>> {
return unwrap<AdminPluginItem[]>('/plugin/getPlugins', params)
}
export function installPlugin(code: string): Promise<ApiResponse<boolean>> {
return unwrapPost<boolean>('/plugin/install', { code })
}
export function uninstallPlugin(code: string): Promise<ApiResponse<boolean>> {
return unwrapPost<boolean>('/plugin/uninstall', { code })
}
export function enablePlugin(code: string): Promise<ApiResponse<boolean>> {
return unwrapPost<boolean>('/plugin/enable', { code })
}
export function disablePlugin(code: string): Promise<ApiResponse<boolean>> {
return unwrapPost<boolean>('/plugin/disable', { code })
}
export function getPluginConfig(code: string): Promise<ApiResponse<Record<string, unknown>>> {
return unwrap<Record<string, unknown>>('/plugin/config', { code })
}
export function savePluginConfig(code: string, config: Record<string, unknown>): Promise<ApiResponse<boolean>> {
return unwrapPost<boolean>('/plugin/config', { code, config })
}
export function upgradePlugin(code: string): Promise<ApiResponse<boolean>> {
return unwrapPost<boolean>('/plugin/upgrade', { code })
}
export function uploadPluginPackage(file: File): Promise<ApiResponse<boolean>> {
const formData = new FormData()
formData.append('file', file)
return adminClient
.post<ApiResponse<boolean>>('/plugin/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
})
.then((res) => res.data)
}
export function savePlan(payload: AdminPlanSavePayload): Promise<ApiResponse<boolean>> {
return unwrapPost<boolean>('/plan/save', payload as unknown as Record<string, unknown>)
}
admin-frontend/src/layouts/AdminLayout.vue
+2 -2
View File
@@ -62,8 +62,8 @@ const managementItems: MenuItem[] = [
const subscriptionItems: MenuItem[] = [
{ index: '/subscriptions/plans', title: '套餐管理', icon: CollectionTag },
{ index: '/subscriptions/orders', title: '订单管理', icon: Document, disabled: true, badge: '即将开放' },
{ index: '/subscriptions/coupons', title: '优惠券管理', icon: Discount, disabled: true, badge: '即将开放' },
{ index: '/subscriptions/orders', title: '订单管理', icon: Document },
{ index: '/subscriptions/coupons', title: '优惠券管理', icon: Discount },
{ index: '/subscriptions/gift-cards', title: '礼品卡管理', icon: Present, disabled: true, badge: '即将开放' },
]
admin-frontend/src/router/index.ts
+17 -5
View File
@@ -59,6 +59,18 @@ const routes: RouteRecordRaw[] = [
component: () => import('@/views/subscriptions/PlansView.vue'),
meta: { title: '订阅套餐', kicker: 'Plans' },
},
{
path: 'subscriptions/orders',
name: 'SubscriptionOrders',
component: () => import('@/views/subscriptions/OrdersView.vue'),
meta: { title: '订单管理', kicker: 'Orders' },
},
{
path: 'subscriptions/coupons',
name: 'SubscriptionCoupons',
component: () => import('@/views/subscriptions/CouponsView.vue'),
meta: { title: '优惠券管理', kicker: 'Coupons' },
},
{
path: 'system/config',
name: 'SystemConfig',
@@ -68,31 +80,31 @@ const routes: RouteRecordRaw[] = [
{
path: 'system/plugins',
name: 'SystemPlugins',
component: () => import('@/views/system/SystemPlaceholderView.vue'),
component: () => import('@/views/system/PluginManagementView.vue'),
meta: { title: '插件管理', kicker: 'System Management' },
},
{
path: 'system/themes',
name: 'SystemThemes',
component: () => import('@/views/system/SystemPlaceholderView.vue'),
component: () => import('@/views/system/ThemesView.vue'),
meta: { title: '主题配置', kicker: 'System Management' },
},
{
path: 'system/notices',
name: 'SystemNotices',
component: () => import('@/views/system/SystemPlaceholderView.vue'),
component: () => import('@/views/system/SystemNoticesView.vue'),
meta: { title: '公告管理', kicker: 'System Management' },
},
{
path: 'system/payments',
name: 'SystemPayments',
component: () => import('@/views/system/SystemPlaceholderView.vue'),
component: () => import('@/views/system/SystemPaymentsView.vue'),
meta: { title: '支付配置', kicker: 'System Management' },
},
{
path: 'system/knowledge',
name: 'SystemKnowledge',
component: () => import('@/views/system/SystemPlaceholderView.vue'),
component: () => import('@/views/system/SystemKnowledgeView.vue'),
meta: { title: '知识库管理', kicker: 'System Management' },
},
],
admin-frontend/src/types/api.d.ts
Vendored
+277 -4
View File
@@ -136,6 +136,14 @@ export interface AdminQueueFailedJobResult extends AdminPaginationResult<AdminQu
export interface AdminPaginationResult<T> {
data: T[]
total: number
current_page?: number
per_page?: number
last_page?: number
}
export interface AdminTableSort {
id: string
desc: boolean
}
export interface AdminGroupOption {
@@ -175,6 +183,99 @@ export type AdminConfigGroupValue = Record<string, unknown>
export type AdminConfigMappings = Partial<Record<AdminConfigGroupKey, AdminConfigGroupValue>>
export interface AdminKnowledgeListItem {
id: number
title: string
updated_at: number | string | null
category: string | null
show: boolean
}
export interface AdminKnowledgeDetail extends AdminKnowledgeListItem {
body: string
language: string
sort?: number | null
created_at?: number | string | null
}
export interface AdminKnowledgeSavePayload {
id?: number
category: string
language: string
title: string
body: string
show: boolean
}
export type AdminPluginTypeValue = 'feature' | 'payment'
export interface AdminPluginTypeItem {
value: AdminPluginTypeValue
label: string
description: string
icon?: string
}
export interface AdminPluginConfigOption {
label: string
value: string | number | boolean
}
export interface AdminPluginConfigField {
type: string
label: string
placeholder: string
description: string
value: unknown
options: AdminPluginConfigOption[] | Record<string, string> | Array<string | number | boolean>
}
export interface AdminPluginItem {
code: string
name: string
version: string
description: string
author: string
type: AdminPluginTypeValue | string
is_installed: boolean
is_enabled: boolean
is_protected: boolean
can_be_deleted: boolean
config: Record<string, AdminPluginConfigField>
readme: string
need_upgrade: boolean
admin_menus?: unknown
admin_crud?: unknown
}
export type AdminThemeFieldType = 'input' | 'textarea' | 'select'
export interface AdminThemeConfigField {
label: string
placeholder?: string
field_name: string
field_type: AdminThemeFieldType
select_options?: Record<string, string>
default_value?: string | number | boolean | null
}
export interface AdminThemeSummary {
name: string
description?: string
version?: string
images?: string
configs?: AdminThemeConfigField[]
can_delete?: boolean
is_system?: boolean
}
export interface AdminThemeListResult {
themes: Record<string, AdminThemeSummary>
active: string
}
export type AdminThemeConfigRecord = Record<string, string | number | boolean | null>
export interface AdminPlanPriceMap {
monthly?: number | null
quarterly?: number | null
@@ -218,11 +319,186 @@ export interface AdminPlanSavePayload {
force_update?: boolean
}
export interface AdminNoticeItem {
id: number
title: string
content: string
img_url?: string | null
tags?: string[] | null
show: boolean | number
popup?: boolean | number | null
sort?: number | null
created_at?: number | string | null
updated_at?: number | string | null
}
export interface AdminNoticeSavePayload {
id?: number
title: string
content: string
img_url?: string | null
tags?: string[]
show?: boolean
popup?: boolean
}
export interface AdminPaymentConfigField {
type: string
label: string
placeholder: string
description: string
value: string
options: AdminPluginConfigOption[] | Record<string, string> | Array<string | number | boolean>
}
export type AdminPaymentConfigFields = Record<string, AdminPaymentConfigField>
export interface AdminPaymentListItem {
id: number
uuid: string
payment: string
name: string
icon?: string | null
config?: Record<string, unknown> | null
notify_domain?: string | null
notify_url?: string | null
handling_fee_fixed?: number | null
handling_fee_percent?: number | string | null
enable: boolean | number
sort?: number | null
created_at?: number | string | null
updated_at?: number | string | null
}
export interface AdminPaymentSavePayload {
id?: number
name: string
icon?: string | null
payment: string
config: Record<string, string>
notify_domain?: string | null
handling_fee_fixed?: number | null
handling_fee_percent?: number | null
}
export type AdminCouponType = 1 | 2
export interface AdminCouponListItem {
id: number
show: boolean
name: string
type: AdminCouponType
value: number
code: string
limit_use?: number | null
limit_use_with_user?: number | null
limit_plan_ids?: string[] | null
limit_period?: string[] | null
started_at: number
ended_at: number
created_at: number
updated_at: number
}
export interface AdminCouponFetchParams {
current?: number
pageSize?: number
}
export interface AdminCouponGeneratePayload {
id?: number
generate_count?: number
name: string
type: AdminCouponType
value: number
started_at: number
ended_at: number
limit_use?: number | null
limit_use_with_user?: number | null
limit_plan_ids?: number[]
limit_period?: string[]
code?: string
}
export interface AdminUserRef {
id: number
email: string
}
export interface AdminOrderUserRef {
id: number
email: string
balance?: number | null
commission_balance?: number | null
plan_id?: number | null
}
export interface AdminCommissionLogItem {
id: number
invite_user_id: number
user_id: number
trade_no: string
order_amount: number
get_amount: number
created_at: number
updated_at: number
}
export interface AdminOrderListItem {
id: number
invite_user_id?: number | null
user_id: number
plan_id: number | null
coupon_id?: number | null
payment_id?: number | null
type: number
period: string
trade_no: string
callback_no?: string | null
total_amount: number
handling_amount?: number | null
discount_amount?: number | null
surplus_amount?: number | null
refund_amount?: number | null
balance_amount?: number | null
surplus_order_ids?: number[] | null
status: number
commission_status?: number | null
commission_balance?: number | null
actual_commission_balance?: number | null
paid_at?: number | null
created_at: number
updated_at: number
plan?: AdminPlanOption | null
}
export interface AdminOrderDetail extends AdminOrderListItem {
user?: AdminOrderUserRef | null
invite_user?: AdminOrderUserRef | null
commission_log?: AdminCommissionLogItem[]
surplus_orders?: AdminOrderListItem[]
}
export interface AdminOrderFilter {
id: string
value: string | number | Array<string | number>
}
export interface AdminOrderFetchParams {
current: number
pageSize: number
filter?: AdminOrderFilter[]
sort?: AdminTableSort[]
is_commission?: boolean
}
export interface AdminOrderAssignPayload {
email: string
plan_id: number
period: string
total_amount: number
}
export interface AdminUserListItem {
id: number
email: string
@@ -260,10 +536,7 @@ export interface AdminUserFilter {
logic?: 'and' | 'or'
}
export interface AdminUserSort {
id: string
desc: boolean
}
export type AdminUserSort = AdminTableSort
export interface AdminUserFetchParams {
current: number
admin-frontend/src/utils/coupons.ts
+271
View File
@@ -0,0 +1,271 @@
import type {
AdminCouponGeneratePayload,
AdminCouponListItem,
AdminCouponType,
} from '@/types/api'
export type CouponTypeFilter = 'all' | `${AdminCouponType}`
export type CouponSortKey = 'id' | 'type' | 'limit_use' | 'limit_use_with_user' | 'ended_at'
export type CouponSortOrder = 'ascending' | 'descending' | null
export interface CouponFormModel {
id?: number
name: string
generateCount: number | null
code: string
type: AdminCouponType
value: number | null
dateRange: [string, string] | []
limitUse: number | null
limitUseWithUser: number | null
limitPlanIds: number[]
limitPeriod: string[]
}
export interface CouponExpiryMeta {
text: string
kind: 'danger' | 'success' | 'info'
}
export const COUPON_TYPE_OPTIONS: Array<{
label: string
shortLabel: string
value: AdminCouponType
}> = [
{ label: '按金额优惠', shortLabel: '金额优惠', value: 1 },
{ label: '按比例优惠', shortLabel: '比例优惠', value: 2 },
]
export const COUPON_PERIOD_OPTIONS = [
{ label: '月付', value: 'month_price' },
{ label: '季付', value: 'quarter_price' },
{ label: '半年付', value: 'half_year_price' },
{ label: '年付', value: 'year_price' },
{ label: '两年付', value: 'two_year_price' },
{ label: '三年付', value: 'three_year_price' },
{ label: '一次性', value: 'onetime_price' },
{ label: '重置流量', value: 'reset_price' },
] as const
function clampNumber(value: number | null): number | null {
if (!Number.isFinite(Number(value))) {
return null
}
return Number(value)
}
function roundCurrencyToCent(value: number | null): number {
return Math.round(Number(value || 0) * 100)
}
function formatDatePart(date: Date): string {
const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0')
const hours = String(date.getHours()).padStart(2, '0')
const minutes = String(date.getMinutes()).padStart(2, '0')
return `${month}/${day} ${hours}:${minutes}`
}
function normalizeTimestampToMs(timestamp: number | null | undefined): string {
const value = Number(timestamp || 0)
if (!Number.isFinite(value) || value <= 0) {
return ''
}
return String(value * 1000)
}
export function createEmptyCouponForm(): CouponFormModel {
const now = Date.now()
const nextWeek = now + 7 * 24 * 60 * 60 * 1000
return {
name: '',
generateCount: null,
code: '',
type: 1,
value: null,
dateRange: [String(now), String(nextWeek)],
limitUse: null,
limitUseWithUser: null,
limitPlanIds: [],
limitPeriod: [],
}
}
export function normalizeCoupon(coupon: AdminCouponListItem): AdminCouponListItem {
return {
...coupon,
show: Boolean(coupon.show),
limit_plan_ids: coupon.limit_plan_ids ?? null,
limit_period: coupon.limit_period ?? null,
}
}
export function toCouponFormModel(coupon?: AdminCouponListItem | null): CouponFormModel {
const base = createEmptyCouponForm()
if (!coupon) {
return base
}
return {
id: coupon.id,
name: coupon.name || '',
generateCount: null,
code: coupon.code || '',
type: coupon.type,
value: coupon.type === 1
? Number((coupon.value / 100).toFixed(2))
: Number(coupon.value),
dateRange: [
normalizeTimestampToMs(coupon.started_at),
normalizeTimestampToMs(coupon.ended_at),
],
limitUse: clampNumber(coupon.limit_use ?? null),
limitUseWithUser: clampNumber(coupon.limit_use_with_user ?? null),
limitPlanIds: (coupon.limit_plan_ids ?? [])
.map((item) => Number(item))
.filter((item) => Number.isFinite(item)),
limitPeriod: [...(coupon.limit_period ?? [])],
}
}
export function toCouponSavePayload(form: CouponFormModel): AdminCouponGeneratePayload {
const [startedAt, endedAt] = form.dateRange
const normalizedCode = form.code.trim()
const payload: AdminCouponGeneratePayload = {
id: form.id,
name: form.name.trim(),
type: form.type,
value: form.type === 1
? roundCurrencyToCent(form.value)
: Math.round(Number(form.value || 0)),
started_at: Math.floor(Number(startedAt) / 1000),
ended_at: Math.floor(Number(endedAt) / 1000),
}
if (form.generateCount && form.generateCount > 1) {
payload.generate_count = Math.round(form.generateCount)
}
if (normalizedCode) {
payload.code = normalizedCode
}
if (form.limitUse !== null && Number.isFinite(form.limitUse)) {
payload.limit_use = Math.round(form.limitUse)
}
if (form.limitUseWithUser !== null && Number.isFinite(form.limitUseWithUser)) {
payload.limit_use_with_user = Math.round(form.limitUseWithUser)
}
if (form.limitPlanIds.length) {
payload.limit_plan_ids = form.limitPlanIds
}
if (form.limitPeriod.length) {
payload.limit_period = form.limitPeriod
}
return payload
}
export function getCouponTypeLabel(type: AdminCouponType): string {
return COUPON_TYPE_OPTIONS.find((item) => item.value === type)?.label || '未知类型'
}
export function getCouponTypeShortLabel(type: AdminCouponType): string {
return COUPON_TYPE_OPTIONS.find((item) => item.value === type)?.shortLabel || '未知类型'
}
export function formatCouponValue(coupon: Pick<AdminCouponListItem, 'type' | 'value'>): string {
if (coupon.type === 1) {
return `¥${(coupon.value / 100).toFixed(2).replace(/\.00$/, '')}`
}
return `${coupon.value}%`
}
export function filterCoupons(
coupons: AdminCouponListItem[],
keyword: string,
typeFilter: CouponTypeFilter,
): AdminCouponListItem[] {
const normalized = keyword.trim().toLowerCase()
return coupons.filter((coupon) => {
const matchesType = typeFilter === 'all' || String(coupon.type) === typeFilter
if (!matchesType) {
return false
}
if (!normalized) {
return true
}
const haystack = [coupon.id, coupon.name, coupon.code]
.filter(Boolean)
.join(' ')
.toLowerCase()
return haystack.includes(normalized)
})
}
export function sortCoupons(
coupons: AdminCouponListItem[],
sortKey: CouponSortKey,
sortOrder: CouponSortOrder,
): AdminCouponListItem[] {
if (!sortOrder) {
return [...coupons].sort((left, right) => right.id - left.id)
}
const factor = sortOrder === 'ascending' ? 1 : -1
return [...coupons].sort((left, right) => {
const leftValue = Number(left[sortKey] ?? -1)
const rightValue = Number(right[sortKey] ?? -1)
return (leftValue - rightValue) * factor
})
}
export function formatCouponLimit(value: number | null | undefined, fallback = '无限次'): string {
const numeric = Number(value)
if (!Number.isFinite(numeric)) {
return fallback
}
return String(numeric)
}
export function formatCouponDateRange(coupon: Pick<AdminCouponListItem, 'started_at' | 'ended_at'>): string {
return `${formatDatePart(new Date(coupon.started_at * 1000))} → ${formatDatePart(new Date(coupon.ended_at * 1000))}`
}
export function getCouponExpiryMeta(endedAt: number): CouponExpiryMeta {
const diff = endedAt * 1000 - Date.now()
const diffDays = Math.max(0, Math.floor(Math.abs(diff) / (24 * 60 * 60 * 1000)))
if (diff < 0) {
return {
text: `已过期${diffDays}天`,
kind: 'danger',
}
}
if (diffDays <= 3) {
return {
text: `剩余${diffDays}天`,
kind: 'info',
}
}
return {
text: `有效中`,
kind: 'success',
}
}
export function countEnabledCoupons(coupons: AdminCouponListItem[]): number {
return coupons.filter((coupon) => coupon.show).length
}
export function countExpiredCoupons(coupons: AdminCouponListItem[]): number {
return coupons.filter((coupon) => coupon.ended_at * 1000 < Date.now()).length
}
admin-frontend/src/utils/knowledge.ts
+159
View File
@@ -0,0 +1,159 @@
import MarkdownIt from 'markdown-it'
import type {
AdminKnowledgeDetail,
AdminKnowledgeListItem,
AdminKnowledgeSavePayload,
} from '@/types/api'
export interface KnowledgeFormModel {
id?: number
title: string
category: string
language: string
show: boolean
body: string
}
export interface KnowledgeLanguageOption {
label: string
value: string
}
const markdown = new MarkdownIt({
html: true,
breaks: true,
linkify: true,
})
export const KNOWLEDGE_LANGUAGE_OPTIONS: KnowledgeLanguageOption[] = [
{ label: '简体中文', value: 'zh-CN' },
{ label: 'English', value: 'en-US' },
]
function normalizeText(value: string): string {
return value.trim().replace(/\s+/g, ' ')
}
export function createEmptyKnowledgeForm(): KnowledgeFormModel {
return {
title: '',
category: '',
language: 'zh-CN',
show: true,
body: '',
}
}
export function normalizeKnowledgeItem(item: AdminKnowledgeListItem): AdminKnowledgeListItem {
return {
...item,
category: typeof item.category === 'string' ? item.category.trim() : item.category,
show: Boolean(item.show),
}
}
export function toKnowledgeFormModel(item?: AdminKnowledgeDetail | null): KnowledgeFormModel {
if (!item) {
return createEmptyKnowledgeForm()
}
return {
id: item.id,
title: item.title || '',
category: typeof item.category === 'string' ? item.category : '',
language: item.language || 'zh-CN',
show: Boolean(item.show),
body: item.body || '',
}
}
export function toKnowledgeSavePayload(form: KnowledgeFormModel): AdminKnowledgeSavePayload {
return {
id: form.id,
title: form.title.trim(),
category: normalizeText(form.category),
language: form.language,
show: Boolean(form.show),
body: form.body.trim(),
}
}
export function renderKnowledgeBody(source: string): string {
return markdown.render(source || '')
}
export function getKnowledgeCategoryLabel(category: string | null | undefined): string {
if (typeof category !== 'string') {
return '未分类'
}
const normalized = normalizeText(category)
return normalized || '未分类'
}
export function normalizeKnowledgeCategories(
categories: string[],
items: Array<Pick<AdminKnowledgeListItem, 'category'>>,
): string[] {
const next = new Set<string>()
categories.forEach((item) => {
const normalized = normalizeText(item || '')
if (normalized) {
next.add(normalized)
}
})
items.forEach((item) => {
const normalized = getKnowledgeCategoryLabel(item.category)
if (normalized !== '未分类') {
next.add(normalized)
}
})
return Array.from(next).sort((left, right) => left.localeCompare(right, 'zh-CN'))
}
export function filterKnowledges(
items: AdminKnowledgeListItem[],
keyword: string,
category: string,
): AdminKnowledgeListItem[] {
const normalizedKeyword = keyword.trim().toLowerCase()
const normalizedCategory = normalizeText(category)
return items.filter((item) => {
const hitKeyword = !normalizedKeyword || [
item.id,
item.title,
getKnowledgeCategoryLabel(item.category),
]
.filter(Boolean)
.join(' ')
.toLowerCase()
.includes(normalizedKeyword)
const hitCategory = !normalizedCategory || getKnowledgeCategoryLabel(item.category) === normalizedCategory
return hitKeyword && hitCategory
})
}
export function countVisibleKnowledges(items: AdminKnowledgeListItem[]): number {
return items.filter((item) => Boolean(item.show)).length
}
export function moveKnowledgeOrder(
items: AdminKnowledgeListItem[],
fromIndex: number,
direction: -1 | 1,
): AdminKnowledgeListItem[] {
const targetIndex = fromIndex + direction
if (targetIndex < 0 || targetIndex >= items.length) {
return items
}
const next = [...items]
const [current] = next.splice(fromIndex, 1)
next.splice(targetIndex, 0, current)
return next
}
admin-frontend/src/utils/notices.ts
+149
View File
@@ -0,0 +1,149 @@
import MarkdownIt from 'markdown-it'
import type { AdminNoticeItem, AdminNoticeSavePayload } from '@/types/api'
export interface NoticeFormModel {
id?: number
title: string
content: string
imgUrl: string
tags: string[]
show: boolean
popup: boolean
}
const markdown = new MarkdownIt({
html: true,
breaks: true,
linkify: true,
})
function normalizeText(value: unknown): string {
return typeof value === 'string' ? value.trim() : ''
}
function normalizeTagList(tags: unknown): string[] {
if (!Array.isArray(tags)) {
return []
}
return [...new Set(tags
.map((tag) => normalizeNoticeTag(String(tag)))
.filter(Boolean))]
}
function stripMarkup(source: string): string {
return source
.replace(/<[^>]+>/g, ' ')
.replace(/[`*_>#-]/g, ' ')
.replace(/\[(.*?)\]\((.*?)\)/g, '$1')
.replace(/\s+/g, ' ')
.trim()
}
export function createEmptyNoticeForm(): NoticeFormModel {
return {
title: '',
content: '',
imgUrl: '',
tags: [],
show: true,
popup: false,
}
}
export function normalizeNoticeTag(raw: string): string {
return raw.trim().replace(/\s+/g, ' ')
}
export function normalizeNoticeItem(notice: AdminNoticeItem): AdminNoticeItem {
return {
...notice,
title: normalizeText(notice.title),
content: typeof notice.content === 'string' ? notice.content : '',
img_url: normalizeText(notice.img_url),
tags: normalizeTagList(notice.tags),
show: Boolean(notice.show),
popup: Boolean(notice.popup),
}
}
export function toNoticeFormModel(notice?: AdminNoticeItem | null): NoticeFormModel {
const form = createEmptyNoticeForm()
if (!notice) {
return form
}
const normalized = normalizeNoticeItem(notice)
return {
id: normalized.id,
title: normalized.title,
content: normalized.content,
imgUrl: normalized.img_url || '',
tags: [...(normalized.tags ?? [])],
show: Boolean(normalized.show),
popup: Boolean(normalized.popup),
}
}
export function toNoticeSavePayload(form: NoticeFormModel): AdminNoticeSavePayload {
return {
id: form.id,
title: form.title.trim(),
content: form.content.trim(),
img_url: normalizeText(form.imgUrl) || null,
tags: form.tags,
show: Boolean(form.show),
popup: Boolean(form.popup),
}
}
export function filterNotices(notices: AdminNoticeItem[], keyword: string): AdminNoticeItem[] {
const normalized = keyword.trim().toLowerCase()
if (!normalized) {
return notices
}
return notices.filter((notice) => [
notice.id,
notice.title,
notice.content,
notice.tags?.join(' '),
]
.filter(Boolean)
.join(' ')
.toLowerCase()
.includes(normalized))
}
export function countEnabledNotices(notices: AdminNoticeItem[], field: 'show' | 'popup'): number {
return notices.filter((notice) => Boolean(notice[field])).length
}
export function moveNoticeOrder(notices: AdminNoticeItem[], fromIndex: number, direction: -1 | 1): AdminNoticeItem[] {
const targetIndex = fromIndex + direction
if (targetIndex < 0 || targetIndex >= notices.length) {
return notices
}
const next = [...notices]
const [current] = next.splice(fromIndex, 1)
next.splice(targetIndex, 0, current)
return next
}
export function summarizeNoticeContent(source: string, maxLength = 78): string {
const plainText = stripMarkup(source)
if (!plainText) {
return '暂无公告摘要'
}
if (plainText.length <= maxLength) {
return plainText
}
return `${plainText.slice(0, maxLength).trimEnd()}…`
}
export function renderNoticeContent(source: string): string {
return markdown.render(source || '')
}
admin-frontend/src/utils/orders.ts
+328
View File
@@ -0,0 +1,328 @@
import type {
AdminOrderDetail,
AdminOrderFilter,
AdminOrderListItem,
AdminPlanListItem,
} from '@/types/api'
import { formatPlanPrice } from './plans'
export type OrderFilterValue<T> = T | 'all'
export type OrderPeriodKey =
| 'monthly'
| 'quarterly'
| 'half_yearly'
| 'yearly'
| 'two_yearly'
| 'three_yearly'
| 'onetime'
| 'reset_traffic'
export type OrderLegacyPeriodKey =
| 'month_price'
| 'quarter_price'
| 'half_year_price'
| 'year_price'
| 'two_year_price'
| 'three_year_price'
| 'onetime_price'
| 'reset_price'
export interface OrderFilterOption<T extends string | number> {
label: string
value: T
}
export interface OrderStatusMeta {
label: string
tone: 'success' | 'warning' | 'danger' | 'info' | 'neutral'
}
export interface AssignablePeriodOption {
label: string
value: OrderLegacyPeriodKey
amount: number
}
const CURRENCY_FORMATTER = new Intl.NumberFormat('zh-CN', {
style: 'currency',
currency: 'CNY',
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})
const FULL_DATE_FORMATTER = new Intl.DateTimeFormat('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false,
})
const PERIOD_META: Array<{
key: OrderPeriodKey
legacy: OrderLegacyPeriodKey
label: string
}> = [
{ key: 'monthly', legacy: 'month_price', label: '月付' },
{ key: 'quarterly', legacy: 'quarter_price', label: '季付' },
{ key: 'half_yearly', legacy: 'half_year_price', label: '半年付' },
{ key: 'yearly', legacy: 'year_price', label: '年付' },
{ key: 'two_yearly', legacy: 'two_year_price', label: '两年付' },
{ key: 'three_yearly', legacy: 'three_year_price', label: '三年付' },
{ key: 'onetime', legacy: 'onetime_price', label: '一次性' },
{ key: 'reset_traffic', legacy: 'reset_price', label: '重置流量' },
]
export const ORDER_TYPE_OPTIONS: Array<OrderFilterOption<number>> = [
{ label: '新购', value: 1 },
{ label: '续费', value: 2 },
{ label: '升级', value: 3 },
{ label: '流量重置', value: 4 },
]
export const ORDER_STATUS_OPTIONS: Array<OrderFilterOption<number>> = [
{ label: '待支付', value: 0 },
{ label: '开通中', value: 1 },
{ label: '已取消', value: 2 },
{ label: '已完成', value: 3 },
{ label: '已折抵', value: 4 },
]
export const COMMISSION_STATUS_OPTIONS: Array<OrderFilterOption<number>> = [
{ label: '待确认', value: 0 },
{ label: '发放中', value: 1 },
{ label: '已发放', value: 2 },
{ label: '无效', value: 3 },
]
export const COMMISSION_STATUS_UPDATE_OPTIONS: Array<OrderFilterOption<number>> = [
{ label: '待确认', value: 0 },
{ label: '发放中', value: 1 },
{ label: '无效', value: 3 },
]
export const ORDER_PERIOD_OPTIONS: Array<OrderFilterOption<OrderPeriodKey>> = PERIOD_META.map((item) => ({
label: item.label,
value: item.key,
}))
function toAmount(value: unknown): number {
const numeric = Number(value)
return Number.isFinite(numeric) ? numeric : 0
}
function toTimestampMilliseconds(value: number | string | null | undefined): number | null {
if (value === null || value === undefined || value === '') {
return null
}
const numeric = Number(value)
if (Number.isFinite(numeric)) {
return numeric > 1_000_000_000_000 ? numeric : numeric * 1000
}
const parsed = Date.parse(String(value))
return Number.isFinite(parsed) ? parsed : null
}
function findPeriodMeta(period: string | null | undefined) {
if (!period) {
return null
}
return PERIOD_META.find((item) => item.key === period || item.legacy === period) ?? null
}
function getOptionLabel<T extends string | number>(options: Array<OrderFilterOption<T>>, value: T | 'all'): string {
if (value === 'all') {
return '全部'
}
return options.find((item) => item.value === value)?.label ?? '全部'
}
export function formatOrderAmount(value: number | string | null | undefined): string {
if (value === null || value === undefined || value === '') {
return '-'
}
const numeric = Number(value)
if (!Number.isFinite(numeric)) {
return '-'
}
return CURRENCY_FORMATTER.format(numeric / 100)
}
export function formatOrderDateTime(value: number | string | null | undefined): string {
const timestamp = toTimestampMilliseconds(value)
if (timestamp === null) {
return '-'
}
return FULL_DATE_FORMATTER.format(new Date(timestamp))
}
export function yuanToOrderAmount(value: number | null | undefined): number {
const numeric = Number(value)
if (!Number.isFinite(numeric) || numeric < 0) {
return 0
}
return Math.round(numeric * 100)
}
export function orderAmountToYuan(value: number | null | undefined): number {
const numeric = Number(value)
if (!Number.isFinite(numeric)) {
return 0
}
return Number((numeric / 100).toFixed(2))
}
export function getOrderTypeMeta(type: number | null | undefined): OrderStatusMeta {
return {
label: getOptionLabel(ORDER_TYPE_OPTIONS, (type ?? 'all') as number | 'all'),
tone: type === 4 ? 'info' : type === 3 ? 'warning' : 'neutral',
}
}
export function getOrderStatusMeta(status: number | null | undefined): OrderStatusMeta {
switch (status) {
case 0:
return { label: '待支付', tone: 'warning' }
case 1:
return { label: '开通中', tone: 'info' }
case 2:
return { label: '已取消', tone: 'danger' }
case 3:
return { label: '已完成', tone: 'success' }
case 4:
return { label: '已折抵', tone: 'neutral' }
default:
return { label: '未知状态', tone: 'neutral' }
}
}
export function getCommissionStatusMeta(status: number | null | undefined, amount?: number | null): OrderStatusMeta {
if ((amount ?? 0) <= 0 && (status === null || status === undefined)) {
return { label: '-', tone: 'neutral' }
}
switch (status) {
case 0:
return { label: '待确认', tone: 'warning' }
case 1:
return { label: '发放中', tone: 'info' }
case 2:
return { label: '已发放', tone: 'success' }
case 3:
return { label: '无效', tone: 'danger' }
default:
return { label: '未参与', tone: 'neutral' }
}
}
export function getOrderPeriodLabel(period: string | null | undefined): string {
return findPeriodMeta(period)?.label ?? (period || '-')
}
export function getOrderFilterLabel(type: OrderFilterValue<number>): string {
return getOptionLabel(ORDER_TYPE_OPTIONS, type)
}
export function getOrderStatusFilterLabel(status: OrderFilterValue<number>): string {
return getOptionLabel(ORDER_STATUS_OPTIONS, status)
}
export function getCommissionStatusFilterLabel(status: OrderFilterValue<number>): string {
return getOptionLabel(COMMISSION_STATUS_OPTIONS, status)
}
export function getOrderPeriodFilterLabel(period: OrderFilterValue<OrderPeriodKey>): string {
return getOptionLabel(ORDER_PERIOD_OPTIONS, period)
}
export function buildOrderFetchFilters(filters: {
keyword: string
type: OrderFilterValue<number>
period: OrderFilterValue<OrderPeriodKey>
status: OrderFilterValue<number>
commissionStatus: OrderFilterValue<number>
}): AdminOrderFilter[] {
const result: AdminOrderFilter[] = []
if (filters.keyword.trim()) {
result.push({
id: 'trade_no',
value: filters.keyword.trim(),
})
}
if (filters.type !== 'all') {
result.push({
id: 'type',
value: [filters.type],
})
}
if (filters.period !== 'all') {
result.push({
id: 'period',
value: [filters.period],
})
}
if (filters.status !== 'all') {
result.push({
id: 'status',
value: [filters.status],
})
}
if (filters.commissionStatus !== 'all') {
result.push({
id: 'commission_status',
value: [filters.commissionStatus],
})
}
return result
}
export function getAssignablePeriods(plan?: Pick<AdminPlanListItem, 'prices'> | null): AssignablePeriodOption[] {
if (!plan?.prices) {
return []
}
return PERIOD_META
.filter((item) => toAmount(plan.prices?.[item.key]) > 0)
.map((item) => ({
label: `${item.label} · ${formatPlanPrice(plan.prices?.[item.key])}`,
value: item.legacy,
amount: Number(plan.prices?.[item.key] ?? 0),
}))
}
export function canMarkOrderPaid(order?: Pick<AdminOrderListItem, 'status'> | null): boolean {
return order?.status === 0
}
export function canCancelOrder(order?: Pick<AdminOrderListItem, 'status'> | null): boolean {
return order?.status === 0
}
export function canUpdateCommissionStatus(order?: Pick<AdminOrderDetail, 'commission_balance' | 'commission_status'> | null): boolean {
if (!order) {
return false
}
if ((order.commission_balance ?? 0) <= 0) {
return false
}
return order.commission_status !== 2
}
admin-frontend/src/utils/payments.ts
+202
View File
@@ -0,0 +1,202 @@
import type {
AdminPaymentConfigField,
AdminPaymentConfigFields,
AdminPaymentListItem,
AdminPaymentSavePayload,
} from '@/types/api'
export interface PaymentFormModel {
id?: number
name: string
icon: string
payment: string
notifyDomain: string
handlingFeePercent: number | null
handlingFeeFixed: number | null
config: Record<string, string>
}
function normalizeNullableNumber(value: number | string | null | undefined): number | null {
if (value === null || value === undefined || value === '') {
return null
}
const numeric = Number(value)
return Number.isFinite(numeric) ? numeric : null
}
function normalizeFieldValue(field: AdminPaymentConfigField | undefined): string {
if (!field) {
return ''
}
if (field.value === null || field.value === undefined) {
return ''
}
return String(field.value)
}
export function createEmptyPaymentForm(): PaymentFormModel {
return {
name: '',
icon: '',
payment: '',
notifyDomain: '',
handlingFeePercent: null,
handlingFeeFixed: null,
config: {},
}
}
export function normalizePayment(payment: AdminPaymentListItem): AdminPaymentListItem {
return {
...payment,
enable: Boolean(payment.enable),
config: payment.config ?? {},
notify_domain: payment.notify_domain ?? null,
notify_url: payment.notify_url ?? '',
handling_fee_fixed: normalizeNullableNumber(payment.handling_fee_fixed),
handling_fee_percent: normalizeNullableNumber(payment.handling_fee_percent),
sort: Number(payment.sort || 0),
}
}
export function sortPaymentsByOrder(payments: AdminPaymentListItem[]): AdminPaymentListItem[] {
return [...payments].sort((left, right) => {
const leftSort = Number(left.sort || 0)
const rightSort = Number(right.sort || 0)
if (leftSort !== rightSort) {
return leftSort - rightSort
}
return left.id - right.id
})
}
export function filterPayments(payments: AdminPaymentListItem[], keyword: string): AdminPaymentListItem[] {
const normalized = keyword.trim().toLowerCase()
if (!normalized) {
return payments
}
return payments.filter((payment) => {
const haystack = [
payment.id,
payment.name,
payment.payment,
payment.notify_url,
payment.notify_domain,
]
.filter(Boolean)
.join(' ')
.toLowerCase()
return haystack.includes(normalized)
})
}
export function countEnabledPayments(payments: AdminPaymentListItem[]): number {
return payments.filter((payment) => Boolean(payment.enable)).length
}
export function countCustomNotifyDomains(payments: AdminPaymentListItem[]): number {
return payments.filter((payment) => Boolean(String(payment.notify_domain || '').trim())).length
}
export function movePaymentOrder<T>(list: T[], index: number, direction: -1 | 1): T[] {
const targetIndex = index + direction
if (targetIndex < 0 || targetIndex >= list.length) {
return list
}
const next = [...list]
const [item] = next.splice(index, 1)
next.splice(targetIndex, 0, item)
return next
}
export function formatPaymentFee(payment: Pick<AdminPaymentListItem, 'handling_fee_percent' | 'handling_fee_fixed'>): string {
const segments: string[] = []
const percent = normalizeNullableNumber(payment.handling_fee_percent)
const fixed = normalizeNullableNumber(payment.handling_fee_fixed)
if (percent !== null && percent > 0) {
segments.push(`${percent}% 手续费`)
}
if (fixed !== null && fixed > 0) {
segments.push(`固定 ¥${fixed}`)
}
return segments.join(' + ') || '无额外手续费'
}
export function normalizePaymentConfigFields(fields: AdminPaymentConfigFields | null | undefined): AdminPaymentConfigFields {
if (!fields) {
return {}
}
return Object.entries(fields).reduce<AdminPaymentConfigFields>((result, [key, field]) => {
result[key] = {
type: field.type || 'string',
label: field.label || key,
placeholder: field.placeholder || '',
description: field.description || '',
value: normalizeFieldValue(field),
options: field.options || [],
}
return result
}, {})
}
export function extractPaymentConfigValues(fields: AdminPaymentConfigFields): Record<string, string> {
return Object.entries(fields).reduce<Record<string, string>>((result, [key, field]) => {
result[key] = normalizeFieldValue(field)
return result
}, {})
}
export function toPaymentFormModel(payment?: AdminPaymentListItem | null): PaymentFormModel {
const base = createEmptyPaymentForm()
if (!payment) {
return base
}
return {
id: payment.id,
name: payment.name || '',
icon: payment.icon || '',
payment: payment.payment || '',
notifyDomain: payment.notify_domain || '',
handlingFeePercent: normalizeNullableNumber(payment.handling_fee_percent),
handlingFeeFixed: normalizeNullableNumber(payment.handling_fee_fixed),
config: Object.entries(payment.config || {}).reduce<Record<string, string>>((result, [key, value]) => {
result[key] = value === null || value === undefined ? '' : String(value)
return result
}, {}),
}
}
export function toPaymentSavePayload(
form: PaymentFormModel,
fields: AdminPaymentConfigFields,
): AdminPaymentSavePayload {
const config = Object.entries(fields).reduce<Record<string, string>>((result, [key, field]) => {
const currentValue = form.config[key] ?? ''
result[key] = field.type === 'text'
? currentValue
: currentValue.trim()
return result
}, {})
return {
id: form.id,
name: form.name.trim(),
icon: form.icon.trim() || null,
payment: form.payment,
config,
notify_domain: form.notifyDomain.trim() || null,
handling_fee_fixed: form.handlingFeeFixed,
handling_fee_percent: form.handlingFeePercent,
}
}
admin-frontend/src/utils/plans.ts
+9
View File
@@ -229,6 +229,15 @@ export function countEnabledPlans(plans: AdminPlanListItem[], field: 'show' | 's
return plans.filter((plan) => Boolean(plan[field])).length
}
export function normalizePlanToggleFields(plan: AdminPlanListItem): AdminPlanListItem {
return {
...plan,
show: Boolean(plan.show),
sell: Boolean(plan.sell),
renew: Boolean(plan.renew),
}
}
export function movePlanOrder(plans: AdminPlanListItem[], fromIndex: number, direction: -1 | 1): AdminPlanListItem[] {
const targetIndex = fromIndex + direction
if (targetIndex < 0 || targetIndex >= plans.length) {
admin-frontend/src/utils/plugins.ts
+279
View File
@@ -0,0 +1,279 @@
import MarkdownIt from 'markdown-it'
import type {
AdminPluginConfigField,
AdminPluginConfigOption,
AdminPluginItem,
AdminPluginTypeItem,
AdminPluginTypeValue,
} from '@/types/api'
export type PluginTabValue = AdminPluginTypeValue | 'all'
export type PluginStatusFilter = 'all' | 'enabled' | 'installed_disabled' | 'uninstalled' | 'upgrade'
export type NormalizedPluginFieldType = 'boolean' | 'text' | 'json' | 'number' | 'select' | 'string'
export type PluginConfigDraft = Record<string, string | number | boolean>
export interface PluginStatusMeta {
label: string
tone: '' | 'success' | 'warning' | 'info' | 'danger'
helper: string
}
export interface NormalizedPluginConfigField extends Omit<AdminPluginConfigField, 'options'> {
key: string
type: NormalizedPluginFieldType
options: AdminPluginConfigOption[]
}
const markdown = new MarkdownIt({
html: true,
breaks: true,
linkify: true,
})
export const PLUGIN_STATUS_FILTER_OPTIONS: Array<{ label: string; value: PluginStatusFilter }> = [
{ label: '全部状态', value: 'all' },
{ label: '已启用', value: 'enabled' },
{ label: '已安装未启用', value: 'installed_disabled' },
{ label: '未安装', value: 'uninstalled' },
{ label: '可升级', value: 'upgrade' },
]
export function buildPluginTabs(types: AdminPluginTypeItem[]): Array<{ label: string; value: PluginTabValue }> {
return [
...types.map((item) => ({
label: item.label,
value: item.value,
})),
{ label: '所有插件', value: 'all' as const },
]
}
export function getPluginTypeLabel(type: string, types: Array<{ value: string; label: string }>): string {
return types.find((item) => item.value === type)?.label || type || '未知类型'
}
export function getPluginStatusMeta(plugin: AdminPluginItem): PluginStatusMeta {
if (plugin.need_upgrade) {
return {
label: plugin.is_enabled ? '待升级（运行中）' : '待升级',
tone: 'warning',
helper: '检测到本地插件版本高于当前已安装版本',
}
}
if (!plugin.is_installed) {
return {
label: '未安装',
tone: 'info',
helper: '插件目录已存在，可直接安装',
}
}
if (plugin.is_enabled) {
return {
label: '已启用',
tone: 'success',
helper: '插件已加载到当前系统',
}
}
return {
label: '已安装未启用',
tone: '',
helper: '插件已安装，但当前未启用',
}
}
export function matchPluginStatus(plugin: AdminPluginItem, filter: PluginStatusFilter): boolean {
switch (filter) {
case 'enabled':
return plugin.is_installed && plugin.is_enabled
case 'installed_disabled':
return plugin.is_installed && !plugin.is_enabled
case 'uninstalled':
return !plugin.is_installed
case 'upgrade':
return plugin.need_upgrade
default:
return true
}
}
export function filterPlugins(plugins: AdminPluginItem[], keyword: string, status: PluginStatusFilter): AdminPluginItem[] {
const normalizedKeyword = keyword.trim().toLowerCase()
return plugins.filter((plugin) => {
if (!matchPluginStatus(plugin, status)) {
return false
}
if (!normalizedKeyword) {
return true
}
const haystack = [
plugin.name,
plugin.code,
plugin.description,
plugin.author,
plugin.version,
]
.filter(Boolean)
.join(' ')
.toLowerCase()
return haystack.includes(normalizedKeyword)
})
}
export function countEnabledPlugins(plugins: AdminPluginItem[]): number {
return plugins.filter((plugin) => plugin.is_installed && plugin.is_enabled).length
}
export function countUpgradeablePlugins(plugins: AdminPluginItem[]): number {
return plugins.filter((plugin) => plugin.need_upgrade).length
}
export function countUserPlugins(plugins: AdminPluginItem[]): number {
return plugins.filter((plugin) => plugin.can_be_deleted).length
}
export function hasPluginConfig(plugin: AdminPluginItem | null | undefined): boolean {
return Boolean(plugin && Object.keys(plugin.config || {}).length)
}
export function hasPluginReadme(plugin: AdminPluginItem | null | undefined): boolean {
return Boolean(plugin?.readme?.trim())
}
export function renderPluginReadme(source: string): string {
return markdown.render(source || '')
}
function normalizeFieldType(field: AdminPluginConfigField): NormalizedPluginFieldType {
const rawType = String(field.type || 'string').trim().toLowerCase()
if (rawType === 'boolean' || rawType === 'bool' || rawType === 'switch') return 'boolean'
if (rawType === 'text' || rawType === 'textarea') return 'text'
if (rawType === 'json') return 'json'
if (rawType === 'number' || rawType === 'int' || rawType === 'float') return 'number'
if (rawType === 'select' || rawType === 'enum') return 'select'
return 'string'
}
function normalizeFieldOptions(
options: AdminPluginConfigField['options'],
): AdminPluginConfigOption[] {
if (Array.isArray(options)) {
return options.map((item) => (
typeof item === 'object' && item !== null && 'label' in item && 'value' in item
? item as AdminPluginConfigOption
: {
label: String(item),
value: item as string | number | boolean,
}
))
}
if (options && typeof options === 'object') {
return Object.entries(options).map(([value, label]) => ({
label: String(label),
value,
}))
}
return []
}
function normalizeDraftValue(field: NormalizedPluginConfigField): string | number | boolean {
if (field.type === 'boolean') {
return Boolean(field.value)
}
if (field.type === 'number') {
const numeric = Number(field.value)
return Number.isFinite(numeric) ? numeric : 0
}
if (field.type === 'json') {
if (field.value === null || field.value === undefined || field.value === '') {
return ''
}
return typeof field.value === 'string'
? field.value
: JSON.stringify(field.value, null, 2)
}
if (field.value === null || field.value === undefined) {
return ''
}
return String(field.value)
}
export function getPluginConfigFields(plugin: AdminPluginItem | null | undefined): NormalizedPluginConfigField[] {
if (!plugin) return []
return Object.entries(plugin.config || {}).map(([key, field]) => {
const normalizedField: NormalizedPluginConfigField = {
...field,
key,
type: normalizeFieldType(field),
options: normalizeFieldOptions(field.options),
}
return normalizedField
})
}
export function createPluginConfigDraft(plugin: AdminPluginItem | null | undefined): PluginConfigDraft {
return getPluginConfigFields(plugin).reduce((acc, field) => {
acc[field.key] = normalizeDraftValue(field)
return acc
}, {} as PluginConfigDraft)
}
export function serializePluginConfigDraft(
plugin: AdminPluginItem,
draft: PluginConfigDraft,
): Record<string, unknown> {
return getPluginConfigFields(plugin).reduce((acc, field) => {
const value = draft[field.key]
if (field.type === 'boolean') {
acc[field.key] = Boolean(value)
return acc
}
if (field.type === 'number') {
if (value === '' || value === null || value === undefined) {
acc[field.key] = null
return acc
}
const numeric = Number(value)
if (!Number.isFinite(numeric)) {
throw new Error(`配置项「${field.label || field.key}」必须是有效数字`)
}
acc[field.key] = numeric
return acc
}
if (field.type === 'json') {
const raw = String(value ?? '').trim()
if (!raw) {
acc[field.key] = null
return acc
}
try {
acc[field.key] = JSON.parse(raw)
} catch {
throw new Error(`配置项「${field.label || field.key}」不是有效 JSON`)
}
return acc
}
acc[field.key] = String(value ?? '')
return acc
}, {} as Record<string, unknown>)
}
admin-frontend/src/utils/themes.ts
+59
View File
@@ -0,0 +1,59 @@
import type {
AdminThemeConfigField,
AdminThemeConfigRecord,
AdminThemeListResult,
AdminThemeSummary,
} from '@/types/api'
export type ThemeConfigFormState = Record<string, string>
export interface ResolvedThemeSummary extends AdminThemeSummary {
key: string
}
function normalizeThemeValue(
value: string | number | boolean | null | undefined,
field: AdminThemeConfigField,
): string {
if (value === null || value === undefined || value === '') {
if (field.default_value === null || field.default_value === undefined) {
return ''
}
return String(field.default_value)
}
return String(value)
}
export function resolveThemes(result?: AdminThemeListResult | null): ResolvedThemeSummary[] {
const activeTheme = result?.active ?? ''
return Object.entries(result?.themes ?? {})
.map(([key, theme]) => ({ ...theme, key }))
.sort((left, right) => {
if (left.name === activeTheme) return -1
if (right.name === activeTheme) return 1
if (Boolean(left.is_system) !== Boolean(right.is_system)) {
return left.is_system ? -1 : 1
}
return left.name.localeCompare(right.name, 'zh-CN')
})
}
export function createThemeConfigFormState(
fields: AdminThemeConfigField[],
config: AdminThemeConfigRecord | null | undefined,
): ThemeConfigFormState {
return fields.reduce<ThemeConfigFormState>((state, field) => {
state[field.field_name] = normalizeThemeValue(config?.[field.field_name], field)
return state
}, {})
}
export function serializeThemeConfigForm(
form: ThemeConfigFormState,
fields: AdminThemeConfigField[],
): AdminThemeConfigRecord {
return fields.reduce<AdminThemeConfigRecord>((state, field) => {
state[field.field_name] = form[field.field_name] ?? ''
return state
}, {})
}
admin-frontend/src/views/subscriptions/CouponEditorDialog.scss
Vendored
+73
View File
@@ -0,0 +1,73 @@
.dialog-shell,
.dialog-form {
display: grid;
gap: 20px;
}
.dialog-copy {
display: grid;
gap: 4px;
}
.dialog-copy p {
font-size: 12px;
color: var(--xboard-text-muted);
letter-spacing: 0.18em;
text-transform: uppercase;
}
.dialog-copy h2 {
font-size: 30px;
line-height: 1.08;
color: var(--xboard-text-strong);
}
.dialog-copy span,
.field-helper {
color: var(--xboard-text-secondary);
line-height: 1.47;
}
.field-helper {
margin-top: 6px;
font-size: 12px;
}
.dialog-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 16px;
}
.full-width {
width: 100%;
}
.full-span {
grid-column: 1 / -1;
}
.value-row {
display: grid;
grid-template-columns: 180px minmax(0, 1fr);
gap: 12px;
}
.value-type,
.value-input {
width: 100%;
}
.dialog-footer {
display: flex;
justify-content: flex-end;
gap: 12px;
width: 100%;
}
@media (max-width: 767px) {
.dialog-grid,
.value-row {
grid-template-columns: 1fr;
}
}
admin-frontend/src/views/subscriptions/CouponEditorDialog.vue
+281
View File
@@ -0,0 +1,281 @@
<script setup lang="ts">
import { computed, nextTick, reactive, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { saveCoupon } from '@/api/admin'
import type { AdminCouponListItem, AdminPlanOption } from '@/types/api'
import {
COUPON_PERIOD_OPTIONS,
COUPON_TYPE_OPTIONS,
createEmptyCouponForm,
getCouponTypeLabel,
toCouponFormModel,
toCouponSavePayload,
type CouponFormModel,
} from '@/utils/coupons'
const props = defineProps<{
visible: boolean
mode: 'create' | 'edit'
coupon?: AdminCouponListItem | null
plans: AdminPlanOption[]
}>()
const emit = defineEmits<{
'update:visible': [value: boolean]
success: [message: string]
}>()
const formRef = ref<FormInstance>()
const submitting = ref(false)
const form = reactive<CouponFormModel>(createEmptyCouponForm())
const dialogTitle = computed(() => props.mode === 'create' ? '添加优惠券' : '编辑优惠券')
const valueHelper = computed(() => form.type === 1 ? '按金额优惠时请输入元，例如 50 表示减免 50 元。' : '按比例优惠时请输入百分比，例如 85 表示 85 折。')
const rules = computed<FormRules<CouponFormModel>>(() => ({
name: [{ required: true, message: '请输入优惠券名称', trigger: 'blur' }],
value: [
{
validator: (_rule, value, callback) => {
if (!Number.isFinite(Number(value)) || Number(value) <= 0) {
callback(new Error(`请输入有效的${getCouponTypeLabel(form.type)}值`))
return
}
callback()
},
trigger: 'blur',
},
],
dateRange: [
{
validator: (_rule, value, callback) => {
if (!Array.isArray(value) || value.length !== 2 || !value[0] || !value[1]) {
callback(new Error('请选择优惠券有效期'))
return
}
callback()
},
trigger: 'change',
},
],
code: [
{
validator: (_rule, value, callback) => {
if (form.generateCount && form.generateCount > 1 && String(value || '').trim()) {
callback(new Error('批量生成时请留空自定义优惠码'))
return
}
callback()
},
trigger: 'blur',
},
],
}))
function closeDialog() {
emit('update:visible', false)
}
function syncForm() {
Object.assign(form, toCouponFormModel(props.coupon))
}
async function handleSubmit() {
const instance = formRef.value
if (!instance) {
return
}
const valid = await instance.validate().catch(() => false)
if (!valid) {
return
}
submitting.value = true
try {
await saveCoupon(toCouponSavePayload(form))
const message = props.mode === 'create' ? '优惠券已创建' : '优惠券已更新'
ElMessage.success(message)
emit('success', message)
closeDialog()
} catch (error) {
ElMessage.error(error instanceof Error ? error.message : '优惠券保存失败')
} finally {
submitting.value = false
}
}
watch(
() => [props.visible, props.coupon, props.mode],
([visible]) => {
if (!visible) {
return
}
syncForm()
nextTick(() => {
formRef.value?.clearValidate()
})
},
{ immediate: true },
)
</script>
<template>
<ElDialog
:model-value="props.visible"
:title="dialogTitle"
width="min(860px, calc(100vw - 32px))"
top="5vh"
destroy-on-close
class="coupon-dialog"
@close="closeDialog"
@update:model-value="emit('update:visible', $event)"
>
<div class="dialog-shell">
<div class="dialog-copy">
<p>订阅管理</p>
<h2>{{ dialogTitle }}</h2>
<span>创建或调整优惠券策略，支持金额、折扣、批量生成与订阅限制。</span>
</div>
<ElForm
ref="formRef"
:model="form"
:rules="rules"
label-position="top"
class="dialog-form"
>
<div class="dialog-grid">
<ElFormItem label="优惠券名称" prop="name">
<ElInput v-model="form.name" placeholder="请输入优惠券名称" />
<p class="field-helper">用于后台识别优惠活动，建议使用可读性更强的运营命名。</p>
</ElFormItem>
<ElFormItem label="批量生成数量">
<ElInputNumber
v-model="form.generateCount"
:min="2"
:max="500"
:controls="false"
class="full-width"
placeholder="留空则仅生成单个"
/>
<p class="field-helper">批量生成时会自动生成随机券码，最多支持 500 个。</p>
</ElFormItem>
<ElFormItem label="自定义优惠码" prop="code">
<ElInput v-model="form.code" placeholder="留空则自动生成" />
<p class="field-helper">单张优惠券可指定券码；批量生成时请保持为空。</p>
</ElFormItem>
<ElFormItem label="优惠券类型和值" prop="value">
<div class="value-row">
<ElSelect v-model="form.type" class="value-type">
<ElOption
v-for="option in COUPON_TYPE_OPTIONS"
:key="option.value"
:label="option.label"
:value="option.value"
/>
</ElSelect>
<ElInputNumber
v-model="form.value"
:min="0"
:precision="form.type === 1 ? 2 : 0"
:controls="false"
class="value-input"
/>
</div>
<p class="field-helper">{{ valueHelper }}</p>
</ElFormItem>
<ElFormItem label="优惠券有效期" prop="dateRange" class="full-span">
<ElDatePicker
v-model="form.dateRange"
type="datetimerange"
start-placeholder="开始时间"
end-placeholder="结束时间"
value-format="x"
class="full-width"
/>
<p class="field-helper">列表中的有效期和过期提示将直接依据这里的时间范围计算。</p>
</ElFormItem>
<ElFormItem label="最大使用次数">
<ElInputNumber
v-model="form.limitUse"
:min="0"
:controls="false"
class="full-width"
placeholder="留空则不限"
/>
<p class="field-helper">设置优惠券总共可被使用的次数；留空表示不限次数。</p>
</ElFormItem>
<ElFormItem label="每个用户可使用次数">
<ElInputNumber
v-model="form.limitUseWithUser"
:min="0"
:controls="false"
class="full-width"
placeholder="留空则不限"
/>
<p class="field-helper">用于限制单个用户重复使用同一优惠券的次数。</p>
</ElFormItem>
<ElFormItem label="指定周期">
<ElSelect
v-model="form.limitPeriod"
multiple
collapse-tags
collapse-tags-tooltip
clearable
placeholder="留空则不限周期"
>
<ElOption
v-for="option in COUPON_PERIOD_OPTIONS"
:key="option.value"
:label="option.label"
:value="option.value"
/>
</ElSelect>
<p class="field-helper">仅允许在所选订阅周期中使用，留空表示所有周期均可使用。</p>
</ElFormItem>
<ElFormItem label="指定订阅">
<ElSelect
v-model="form.limitPlanIds"
multiple
collapse-tags
collapse-tags-tooltip
clearable
placeholder="留空则不限订阅"
>
<ElOption
v-for="plan in props.plans"
:key="plan.id"
:label="plan.name"
:value="plan.id"
/>
</ElSelect>
<p class="field-helper">只在指定套餐下生效，适合为活动套餐或定向促销设置专属优惠。</p>
</ElFormItem>
</div>
</ElForm>
</div>
<template #footer>
<div class="dialog-footer">
<ElButton @click="closeDialog">取消</ElButton>
<ElButton type="primary" :loading="submitting" @click="handleSubmit">
{{ props.mode === 'create' ? '确认' : '保存修改' }}
</ElButton>
</div>
</template>
</ElDialog>
</template>
<style scoped lang="scss" src="./CouponEditorDialog.scss"></style>
admin-frontend/src/views/subscriptions/CouponsView.scss
Vendored
+179
View File
@@ -0,0 +1,179 @@
.coupons-page {
display: grid;
gap: 24px;
}
.coupons-hero {
display: flex;
justify-content: space-between;
gap: 24px;
padding: 30px 32px;
border-radius: 28px;
background: #000000;
}
.coupons-copy {
display: grid;
gap: 10px;
max-width: 620px;
}
.coupons-kicker {
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.68);
}
.coupons-copy h1 {
font-size: clamp(34px, 5vw, 52px);
line-height: 1.08;
letter-spacing: -0.28px;
color: #ffffff;
}
.coupons-copy span,
.hero-stats span,
.table-footer span,
.name-cell span,
.validity-cell span:last-child {
color: rgba(255, 255, 255, 0.72);
line-height: 1.47;
}
.hero-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
min-width: 360px;
}
.hero-stats article {
display: grid;
gap: 6px;
padding: 18px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.08);
}
.hero-stats strong {
color: #ffffff;
font-size: 22px;
}
.table-shell {
display: grid;
gap: 18px;
padding: 24px;
border-radius: 26px;
background: #ffffff;
box-shadow: var(--xboard-shadow);
}
.table-toolbar,
.toolbar-left,
.table-footer,
.action-group {
display: flex;
align-items: center;
gap: 12px;
}
.table-toolbar,
.table-footer {
justify-content: space-between;
}
.toolbar-left {
flex-wrap: wrap;
}
.toolbar-search {
width: min(320px, 100%);
}
.toolbar-filter {
width: 180px;
}
.coupons-table :deep(th.el-table__cell) {
color: var(--xboard-text-secondary);
background: #fbfbfd;
}
.coupons-table :deep(.el-table__row td.el-table__cell) {
padding-top: 16px;
padding-bottom: 16px;
}
.name-cell,
.validity-cell {
display: grid;
gap: 8px;
}
.name-cell strong {
color: var(--xboard-text-strong);
}
.coupon-code {
display: inline-flex;
align-items: center;
height: 28px;
padding: 0 10px;
border-radius: 10px;
background: rgba(0, 0, 0, 0.04);
color: var(--xboard-text-strong);
}
.validity-cell span:last-child,
.table-footer span,
.name-cell span {
color: var(--xboard-text-muted);
}
.expiry-pill {
display: inline-flex;
align-items: center;
width: fit-content;
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
}
.expiry-pill--danger {
background: rgba(201, 52, 40, 0.08);
color: var(--xboard-danger);
}
.expiry-pill--success {
background: rgba(35, 134, 63, 0.08);
color: var(--xboard-success);
}
.expiry-pill--info {
background: rgba(0, 113, 227, 0.08);
color: var(--xboard-primary);
}
.action-btn {
font-size: 18px;
}
.danger-btn {
color: var(--xboard-danger);
}
@media (max-width: 1080px) {
.coupons-hero,
.table-toolbar,
.table-footer {
flex-direction: column;
align-items: stretch;
}
.hero-stats {
min-width: 0;
grid-template-columns: 1fr;
}
}
admin-frontend/src/views/subscriptions/CouponsView.vue
+312
View File
@@ -0,0 +1,312 @@
<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { TableColumnCtx } from 'element-plus'
import {
Delete,
EditPen,
Plus,
Search,
} from '@element-plus/icons-vue'
import {
deleteCoupon,
fetchCoupons,
getPlans,
updateCoupon,
} from '@/api/admin'
import type {
AdminCouponListItem,
AdminCouponType,
AdminPlanOption,
} from '@/types/api'
import CouponEditorDialog from './CouponEditorDialog.vue'
import {
COUPON_TYPE_OPTIONS,
countEnabledCoupons,
countExpiredCoupons,
filterCoupons,
formatCouponDateRange,
formatCouponLimit,
formatCouponValue,
getCouponExpiryMeta,
getCouponTypeShortLabel,
normalizeCoupon,
sortCoupons,
type CouponSortKey,
type CouponSortOrder,
type CouponTypeFilter,
} from '@/utils/coupons'
type DialogMode = 'create' | 'edit'
const loading = ref(false)
const dialogVisible = ref(false)
const dialogMode = ref<DialogMode>('create')
const activeCoupon = ref<AdminCouponListItem | null>(null)
const keyword = ref('')
const typeFilter = ref<CouponTypeFilter>('all')
const current = ref(1)
const pageSize = ref(20)
const sortKey = ref<CouponSortKey>('id')
const sortOrder = ref<CouponSortOrder>('descending')
const coupons = ref<AdminCouponListItem[]>([])
const plans = ref<AdminPlanOption[]>([])
const toggleLoadingMap = ref<Record<number, boolean>>({})
const filteredCoupons = computed(() => filterCoupons(coupons.value, keyword.value, typeFilter.value))
const sortedCoupons = computed(() => sortCoupons(filteredCoupons.value, sortKey.value, sortOrder.value))
const visibleCoupons = computed(() => {
const start = (current.value - 1) * pageSize.value
return sortedCoupons.value.slice(start, start + pageSize.value)
})
const heroStats = computed(() => [
{ label: '优惠券总数', value: String(coupons.value.length) },
{ label: '已启用', value: String(countEnabledCoupons(coupons.value)) },
{ label: '已过期', value: String(countExpiredCoupons(coupons.value)) },
])
async function loadData() {
loading.value = true
try {
const [couponResult, planResult] = await Promise.all([
fetchCoupons({ current: 1, pageSize: 500 }),
getPlans(),
])
coupons.value = (couponResult.data ?? []).map((item) => normalizeCoupon(item))
plans.value = planResult.data ?? []
} finally {
loading.value = false
}
}
function openCreateDialog() {
dialogMode.value = 'create'
activeCoupon.value = null
dialogVisible.value = true
}
function openEditDialog(coupon: AdminCouponListItem) {
dialogMode.value = 'edit'
activeCoupon.value = coupon
dialogVisible.value = true
}
function isToggleLoading(id: number): boolean {
return Boolean(toggleLoadingMap.value[id])
}
async function handleToggle(coupon: AdminCouponListItem, nextValue: string | number | boolean) {
const normalizedNextValue = Boolean(nextValue)
if (coupon.show === normalizedNextValue) {
return
}
toggleLoadingMap.value[coupon.id] = true
try {
await updateCoupon(coupon.id, { show: normalizedNextValue })
coupon.show = normalizedNextValue
ElMessage.success('优惠券状态已更新')
} catch (error) {
ElMessage.error(error instanceof Error ? error.message : '优惠券状态更新失败')
} finally {
toggleLoadingMap.value[coupon.id] = false
}
}
async function handleDelete(coupon: AdminCouponListItem) {
try {
await ElMessageBox.confirm(`删除优惠券「${coupon.name}」后无法恢复，确认继续吗？`, '删除优惠券', {
type: 'warning',
})
await deleteCoupon(coupon.id)
ElMessage.success('优惠券已删除')
await loadData()
} catch (error) {
if (error === 'cancel' || error === 'close') {
return
}
ElMessage.error(error instanceof Error ? error.message : '优惠券删除失败')
}
}
function handleSortChange(params: {
column: TableColumnCtx<AdminCouponListItem>
prop: string
order: CouponSortOrder
}) {
sortKey.value = (params.prop || 'id') as CouponSortKey
sortOrder.value = params.order || 'descending'
}
function getExpiryClass(endedAt: number): string {
return `expiry-pill--${getCouponExpiryMeta(endedAt).kind}`
}
watch([keyword, typeFilter, pageSize], () => {
current.value = 1
})
watch(sortedCoupons, (list) => {
const maxPage = Math.max(1, Math.ceil(list.length / pageSize.value))
if (current.value > maxPage) {
current.value = maxPage
}
})
onMounted(() => {
void loadData().catch((error) => {
ElMessage.error(error instanceof Error ? error.message : '优惠券管理页面初始化失败')
})
})
</script>
<template>
<div class="coupons-page">
<section class="coupons-hero">
<div class="coupons-copy">
<p class="coupons-kicker">Promotions</p>
<h1>优惠券管理</h1>
<span>在这里可以查看和维护优惠券，包括启用、筛选、批量生成、编辑与删除等操作。</span>
</div>
<div class="hero-stats">
<article v-for="item in heroStats" :key="item.label">
<span>{{ item.label }}</span>
<strong>{{ item.value }}</strong>
</article>
</div>
</section>
<section class="table-shell">
<header class="table-toolbar">
<div class="toolbar-left">
<ElButton type="primary" @click="openCreateDialog">
<ElIcon><Plus /></ElIcon>
添加优惠券
</ElButton>
<ElInput
v-model="keyword"
clearable
placeholder="搜索优惠券..."
class="toolbar-search"
>
<template #prefix>
<ElIcon><Search /></ElIcon>
</template>
</ElInput>
<ElSelect v-model="typeFilter" class="toolbar-filter">
<ElOption label="全部类型" value="all" />
<ElOption
v-for="option in COUPON_TYPE_OPTIONS"
:key="option.value"
:label="option.label"
:value="String(option.value)"
/>
</ElSelect>
</div>
</header>
<ElTable
:data="visibleCoupons"
v-loading="loading"
class="coupons-table"
row-key="id"
empty-text="当前筛选条件下暂无优惠券"
@sort-change="handleSortChange"
>
<ElTableColumn prop="id" label="ID" width="88" sortable="custom" />
<ElTableColumn label="启用" width="92">
<template #default="{ row }">
<ElSwitch
:model-value="row.show"
:loading="isToggleLoading(row.id)"
@change="handleToggle(row, $event)"
/>
</template>
</ElTableColumn>
<ElTableColumn label="券名称" min-width="200">
<template #default="{ row }">
<div class="name-cell">
<strong>{{ row.name }}</strong>
<span>{{ formatCouponValue(row) }}</span>
</div>
</template>
</ElTableColumn>
<ElTableColumn prop="type" label="类型" width="126" sortable="custom">
<template #default="{ row }">
<ElTag effect="plain" round>
{{ getCouponTypeShortLabel(row.type as AdminCouponType) }}
</ElTag>
</template>
</ElTableColumn>
<ElTableColumn label="券码" min-width="160">
<template #default="{ row }">
<span class="coupon-code mono">{{ row.code }}</span>
</template>
</ElTableColumn>
<ElTableColumn prop="limit_use" label="剩余次数" width="120" sortable="custom">
<template #default="{ row }">
<ElTag effect="plain" round>
{{ formatCouponLimit(row.limit_use) }}
</ElTag>
</template>
</ElTableColumn>
<ElTableColumn prop="limit_use_with_user" label="可用次数/用户" width="150" sortable="custom">
<template #default="{ row }">
<ElTag effect="plain" round>
{{ formatCouponLimit(row.limit_use_with_user, '无限制') }}
</ElTag>
</template>
</ElTableColumn>
<ElTableColumn prop="ended_at" label="有效期" min-width="260" sortable="custom">
<template #default="{ row }">
<div class="validity-cell">
<span class="expiry-pill" :class="getExpiryClass(row.ended_at)">
{{ getCouponExpiryMeta(row.ended_at).text }}
</span>
<span>{{ formatCouponDateRange(row) }}</span>
</div>
</template>
</ElTableColumn>
<ElTableColumn label="操作" width="110" fixed="right">
<template #default="{ row }">
<div class="action-group">
<ElButton text class="action-btn" @click="openEditDialog(row)">
<ElIcon><EditPen /></ElIcon>
</ElButton>
<ElButton text class="action-btn danger-btn" @click="handleDelete(row)">
<ElIcon><Delete /></ElIcon>
</ElButton>
</div>
</template>
</ElTableColumn>
</ElTable>
<footer class="table-footer">
<span>已选择 0 项，共 {{ sortedCoupons.length }} 项</span>
<ElPagination
v-model:current-page="current"
v-model:page-size="pageSize"
:page-sizes="[20, 50, 100]"
layout="sizes, prev, pager, next"
:total="sortedCoupons.length"
background
/>
</footer>
</section>
<CouponEditorDialog
v-model:visible="dialogVisible"
:mode="dialogMode"
:coupon="activeCoupon"
:plans="plans"
@success="() => loadData()"
/>
</div>
</template>
<style scoped lang="scss" src="./CouponsView.scss"></style>
admin-frontend/src/views/subscriptions/OrderAssignDrawer.vue
+295
View File
@@ -0,0 +1,295 @@
<script setup lang="ts">
import { computed, reactive, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { assignOrder } from '@/api/admin'
import type { AdminPlanListItem } from '@/types/api'
import {
getAssignablePeriods,
orderAmountToYuan,
yuanToOrderAmount,
} from '@/utils/orders'
interface AssignOrderFormModel {
email: string
planId: number | null
period: string
totalAmountYuan: number | null
}
const props = defineProps<{
visible: boolean
plans: AdminPlanListItem[]
}>()
const emit = defineEmits<{
'update:visible': [value: boolean]
success: [tradeNo: string]
}>()
const formRef = ref<FormInstance>()
const submitting = ref(false)
const form = reactive<AssignOrderFormModel>({
email: '',
planId: null,
period: '',
totalAmountYuan: null,
})
const periodOptions = computed(() => {
const activePlan = props.plans.find((item) => item.id === form.planId) ?? null
return getAssignablePeriods(activePlan)
})
const rules = computed<FormRules<AssignOrderFormModel>>(() => ({
email: [
{ required: true, message: '请输入用户邮箱', trigger: 'blur' },
{ type: 'email', message: '请输入有效邮箱', trigger: ['blur', 'change'] },
],
planId: [{ required: true, message: '请选择订阅计划', trigger: 'change' }],
period: [{ required: true, message: '请选择周期', trigger: 'change' }],
totalAmountYuan: [{ required: true, message: '请输入支付金额', trigger: 'blur' }],
}))
function resetForm() {
form.email = ''
form.planId = null
form.period = ''
form.totalAmountYuan = null
}
function closeDrawer() {
emit('update:visible', false)
}
function syncAmountFromPeriod(periodValue: string) {
const matched = periodOptions.value.find((item) => item.value === periodValue)
form.totalAmountYuan = matched ? orderAmountToYuan(yuanToOrderAmount(matched.amount)) : null
}
async function handleSubmit() {
const instance = formRef.value
if (!instance) {
return
}
const valid = await instance.validate().catch(() => false)
if (!valid) {
return
}
submitting.value = true
try {
const response = await assignOrder({
email: form.email.trim(),
plan_id: Number(form.planId),
period: form.period,
total_amount: yuanToOrderAmount(form.totalAmountYuan),
})
ElMessage.success('订单已分配')
emit('success', response.data)
closeDrawer()
} catch (error) {
ElMessage.error(error instanceof Error ? error.message : '订单分配失败')
} finally {
submitting.value = false
}
}
watch(
() => props.visible,
(visible) => {
if (!visible) {
return
}
resetForm()
form.planId = props.plans[0]?.id ?? null
const firstPeriod = getAssignablePeriods(props.plans[0] ?? null)[0]
if (firstPeriod) {
form.period = firstPeriod.value
syncAmountFromPeriod(firstPeriod.value)
}
formRef.value?.clearValidate()
},
{ immediate: true },
)
watch(
() => form.planId,
(planId) => {
const activePlan = props.plans.find((item) => item.id === planId) ?? null
const firstPeriod = getAssignablePeriods(activePlan)[0]
form.period = firstPeriod?.value ?? ''
syncAmountFromPeriod(form.period)
},
)
watch(
() => form.period,
(period) => {
if (!period) {
form.totalAmountYuan = null
return
}
syncAmountFromPeriod(period)
},
)
</script>
<template>
<ElDrawer
:model-value="props.visible"
title="分配订单"
size="min(520px, 100vw)"
class="order-assign-drawer"
destroy-on-close
@close="closeDrawer"
@update:model-value="emit('update:visible', $event)"
>
<div class="drawer-shell">
<div class="drawer-copy">
<p>Order Assignment</p>
<h2>为指定用户创建订单</h2>
<span>先选择用户邮箱、订阅计划与周期，再按需调整支付金额。</span>
</div>
<ElForm
ref="formRef"
:model="form"
:rules="rules"
label-position="top"
class="drawer-form"
>
<ElFormItem label="用户邮箱" prop="email">
<ElInput v-model="form.email" placeholder="请输入要分配订单的用户邮箱" />
</ElFormItem>
<div class="drawer-grid">
<ElFormItem label="订阅计划" prop="planId">
<ElSelect v-model="form.planId" placeholder="请选择订阅计划">
<ElOption
v-for="plan in props.plans"
:key="plan.id"
:label="plan.name"
:value="plan.id"
/>
</ElSelect>
</ElFormItem>
<ElFormItem label="支付周期" prop="period">
<ElSelect
v-model="form.period"
:disabled="periodOptions.length === 0"
placeholder="请选择周期"
>
<ElOption
v-for="item in periodOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</ElSelect>
</ElFormItem>
</div>
<ElFormItem label="支付金额（元）" prop="totalAmountYuan">
<ElInputNumber
v-model="form.totalAmountYuan"
:min="0"
:precision="2"
:step="0.1"
:controls="false"
style="width: 100%"
/>
</ElFormItem>
<ElAlert
v-if="periodOptions.length === 0"
type="warning"
:closable="false"
show-icon
title="当前套餐没有可分配的有效周期，请先在套餐管理里配置售价。"
/>
<p v-else class="amount-tip">
默认金额会按所选周期售价回填，你也可以手动调整为运营侧需要的金额。
</p>
</ElForm>
</div>
<template #footer>
<div class="drawer-actions">
<ElButton @click="closeDrawer">取消</ElButton>
<ElButton
type="primary"
:loading="submitting"
:disabled="periodOptions.length === 0"
@click="handleSubmit"
>
提交分配
</ElButton>
</div>
</template>
</ElDrawer>
</template>
<style scoped>
.drawer-shell {
display: grid;
gap: 20px;
}
.drawer-copy {
display: grid;
gap: 4px;
}
.drawer-copy p {
font-size: 12px;
color: var(--xboard-text-muted);
letter-spacing: 0.18em;
text-transform: uppercase;
}
.drawer-copy h2 {
font-size: 30px;
line-height: 1.08;
color: var(--xboard-text-strong);
}
.drawer-copy span {
color: var(--xboard-text-secondary);
line-height: 1.47;
}
.drawer-form {
display: grid;
gap: 12px;
}
.drawer-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 16px;
}
.amount-tip {
color: var(--xboard-text-muted);
line-height: 1.5;
}
.drawer-actions {
display: flex;
justify-content: flex-end;
gap: 12px;
width: 100%;
}
@media (max-width: 767px) {
.drawer-grid {
grid-template-columns: 1fr;
}
}
</style>
admin-frontend/src/views/subscriptions/OrderDetailDrawer.vue
+492
View File
@@ -0,0 +1,492 @@
<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import type { AdminOrderDetail } from '@/types/api'
import {
COMMISSION_STATUS_UPDATE_OPTIONS,
canCancelOrder,
canMarkOrderPaid,
canUpdateCommissionStatus,
formatOrderAmount,
formatOrderDateTime,
getCommissionStatusMeta,
getOrderPeriodLabel,
getOrderStatusMeta,
getOrderTypeMeta,
} from '@/utils/orders'
const props = defineProps<{
visible: boolean
loading: boolean
order?: AdminOrderDetail | null
paying?: boolean
cancelling?: boolean
updatingCommission?: boolean
}>()
const emit = defineEmits<{
'update:visible': [value: boolean]
paid: []
cancel: []
'update-commission-status': [value: number]
}>()
const commissionStatusDraft = ref<number | null>(null)
const statusMeta = computed(() => getOrderStatusMeta(props.order?.status))
const typeMeta = computed(() => getOrderTypeMeta(props.order?.type))
const commissionMeta = computed(() => getCommissionStatusMeta(props.order?.commission_status, props.order?.commission_balance))
const summaryCards = computed(() => [
{ label: '订单状态', value: statusMeta.value.label, detail: typeMeta.value.label },
{ label: '支付金额', value: formatOrderAmount(props.order?.total_amount), detail: '订单总额' },
{ label: '佣金金额', value: formatOrderAmount(props.order?.commission_balance), detail: commissionMeta.value.label },
{ label: '创建时间', value: formatOrderDateTime(props.order?.created_at), detail: '按后台记录时间展示' },
])
const basicFields = computed(() => [
{ label: '订单号', value: props.order?.trade_no || '-' },
{ label: '用户邮箱', value: props.order?.user?.email || '-' },
{ label: '邀请人', value: props.order?.invite_user?.email || '-' },
{ label: '订阅计划', value: props.order?.plan?.name || '-' },
{ label: '订单类型', value: typeMeta.value.label },
{ label: '订阅周期', value: getOrderPeriodLabel(props.order?.period) },
{ label: '回调编号', value: props.order?.callback_no || '-' },
{ label: '支付时间', value: formatOrderDateTime(props.order?.paid_at) },
])
const amountFields = computed(() => [
{ label: '订单金额', value: formatOrderAmount(props.order?.total_amount) },
{ label: '手续费', value: formatOrderAmount(props.order?.handling_amount) },
{ label: '余额支付', value: formatOrderAmount(props.order?.balance_amount) },
{ label: '优惠金额', value: formatOrderAmount(props.order?.discount_amount) },
{ label: '旧订阅折抵', value: formatOrderAmount(props.order?.surplus_amount) },
{ label: '退款金额', value: formatOrderAmount(props.order?.refund_amount) },
])
const actionState = computed(() => ({
canPay: canMarkOrderPaid(props.order),
canCancel: canCancelOrder(props.order),
canUpdateCommission: canUpdateCommissionStatus(props.order),
}))
function closeDrawer() {
emit('update:visible', false)
}
function submitCommissionStatus() {
if (commissionStatusDraft.value === null) {
return
}
emit('update-commission-status', commissionStatusDraft.value)
}
watch(
() => [props.visible, props.order?.commission_status],
([visible]) => {
if (!visible) {
return
}
commissionStatusDraft.value = props.order?.commission_status ?? 0
},
{ immediate: true },
)
</script>
<template>
<ElDrawer
:model-value="props.visible"
title="订单详情"
size="min(720px, 100vw)"
class="order-detail-drawer"
destroy-on-close
@close="closeDrawer"
@update:model-value="emit('update:visible', $event)"
>
<div v-if="props.loading" class="detail-loading">
<ElSkeleton :rows="5" animated />
<ElSkeleton :rows="6" animated />
</div>
<div v-else-if="props.order" class="detail-shell">
<div class="detail-hero">
<div class="hero-copy">
<p>Order Detail</p>
<h2>{{ props.order.trade_no }}</h2>
<div class="hero-badges">
<span class="hero-badge" :class="`is-${statusMeta.tone}`">{{ statusMeta.label }}</span>
<span class="hero-badge is-neutral">{{ typeMeta.label }}</span>
</div>
</div>
<div class="summary-grid">
<article v-for="item in summaryCards" :key="item.label">
<span>{{ item.label }}</span>
<strong>{{ item.value }}</strong>
<p>{{ item.detail }}</p>
</article>
</div>
</div>
<section class="detail-card">
<header class="card-header">
<div>
<h3>基础信息</h3>
<p>集中查看当前订单、用户与套餐的关键字段。</p>
</div>
</header>
<div class="description-grid">
<article v-for="item in basicFields" :key="item.label">
<span>{{ item.label }}</span>
<strong>{{ item.value }}</strong>
</article>
</div>
</section>
<section class="detail-card">
<header class="card-header">
<div>
<h3>金额拆解</h3>
<p>订单金额按后端分为单位存储，这里统一换算成人类可读金额。</p>
</div>
</header>
<div class="description-grid">
<article v-for="item in amountFields" :key="item.label">
<span>{{ item.label }}</span>
<strong>{{ item.value }}</strong>
</article>
</div>
</section>
<section class="detail-card">
<header class="card-header">
<div>
<h3>佣金状态</h3>
<p>仅对存在佣金金额的订单开放状态维护。</p>
</div>
<span class="hero-badge" :class="`is-${commissionMeta.tone}`">{{ commissionMeta.label }}</span>
</header>
<div class="commission-grid">
<article>
<span>佣金金额</span>
<strong>{{ formatOrderAmount(props.order.commission_balance) }}</strong>
</article>
<article>
<span>实际发放</span>
<strong>{{ formatOrderAmount(props.order.actual_commission_balance) }}</strong>
</article>
</div>
<div v-if="actionState.canUpdateCommission" class="commission-actions">
<ElSelect v-model="commissionStatusDraft" placeholder="请选择佣金状态">
<ElOption
v-for="item in COMMISSION_STATUS_UPDATE_OPTIONS"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</ElSelect>
<ElButton
type="primary"
:loading="props.updatingCommission"
@click="submitCommissionStatus"
>
保存佣金状态
</ElButton>
</div>
</section>
<section v-if="props.order.surplus_orders?.length" class="detail-card">
<header class="card-header">
<div>
<h3>折抵订单</h3>
<p>升级单会展示被折抵的旧订单记录，便于人工追踪。</p>
</div>
</header>
<div class="list-shell">
<article
v-for="item in props.order.surplus_orders"
:key="item.id"
class="list-row"
>
<div>
<strong>{{ item.trade_no }}</strong>
<span>{{ getOrderPeriodLabel(item.period) }} · {{ getOrderStatusMeta(item.status).label }}</span>
</div>
<strong>{{ formatOrderAmount(item.total_amount) }}</strong>
</article>
</div>
</section>
<section v-if="props.order.commission_log?.length" class="detail-card">
<header class="card-header">
<div>
<h3>佣金记录</h3>
<p>展示当前订单已生成的佣金流水，便于核对发放链路。</p>
</div>
</header>
<div class="list-shell">
<article
v-for="item in props.order.commission_log"
:key="item.id"
class="list-row"
>
<div>
<strong>#{{ item.id }} · 用户 {{ item.invite_user_id }}</strong>
<span>{{ formatOrderDateTime(item.created_at) }}</span>
</div>
<strong>{{ formatOrderAmount(item.get_amount) }}</strong>
</article>
</div>
</section>
</div>
<ElEmpty v-else description="暂无订单详情" />
<template #footer>
<div class="drawer-actions">
<ElButton @click="closeDrawer">关闭</ElButton>
<ElButton
v-if="actionState.canCancel"
type="danger"
plain
:loading="props.cancelling"
@click="emit('cancel')"
>
取消订单
</ElButton>
<ElButton
v-if="actionState.canPay"
type="primary"
:loading="props.paying"
@click="emit('paid')"
>
标记已支付
</ElButton>
</div>
</template>
</ElDrawer>
</template>
<style scoped>
.detail-loading,
.detail-shell {
display: grid;
gap: 18px;
}
.detail-hero {
display: grid;
gap: 16px;
padding: 26px 28px;
border-radius: 28px;
background: #000000;
}
.hero-copy {
display: grid;
gap: 8px;
}
.hero-copy p {
margin: 0;
color: rgba(255, 255, 255, 0.64);
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
}
.hero-copy h2 {
margin: 0;
color: #ffffff;
font-size: clamp(28px, 4vw, 38px);
line-height: 1.08;
word-break: break-all;
}
.hero-badges {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.hero-badge {
display: inline-flex;
align-items: center;
padding: 6px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
font-size: 12px;
}
.hero-badge.is-success {
background: rgba(35, 134, 63, 0.18);
color: #74d692;
}
.hero-badge.is-warning {
background: rgba(224, 124, 35, 0.2);
color: #ffcb87;
}
.hero-badge.is-danger {
background: rgba(201, 52, 40, 0.2);
color: #ffb4aa;
}
.hero-badge.is-info {
background: rgba(0, 113, 227, 0.2);
color: #8cc6ff;
}
.hero-badge.is-neutral {
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.84);
}
.summary-grid,
.description-grid,
.commission-grid {
display: grid;
gap: 12px;
}
.summary-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.summary-grid article,
.description-grid article,
.commission-grid article {
display: grid;
gap: 6px;
padding: 18px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.08);
}
.summary-grid span,
.summary-grid p {
color: rgba(255, 255, 255, 0.68);
}
.summary-grid strong {
color: #ffffff;
font-size: 22px;
line-height: 1.14;
}
.detail-card {
display: grid;
gap: 18px;
padding: 24px 26px;
border-radius: 24px;
background: #ffffff;
box-shadow: var(--xboard-shadow);
}
.card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.card-header h3 {
margin: 0;
color: var(--xboard-text-strong);
font-size: 24px;
line-height: 1.12;
}
.card-header p {
margin: 8px 0 0;
color: var(--xboard-text-secondary);
line-height: 1.5;
}
.description-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.description-grid article,
.commission-grid article {
background: #fbfbfd;
}
.description-grid span,
.commission-grid span,
.list-row span {
color: var(--xboard-text-muted);
}
.description-grid strong,
.commission-grid strong,
.list-row strong {
color: var(--xboard-text-strong);
line-height: 1.45;
}
.commission-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.commission-actions {
display: flex;
gap: 12px;
}
.commission-actions :deep(.el-select) {
flex: 1;
}
.list-shell {
display: grid;
gap: 12px;
}
.list-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
border-radius: 16px;
background: #fbfbfd;
}
.list-row > div {
display: grid;
gap: 4px;
}
.drawer-actions {
display: flex;
justify-content: flex-end;
gap: 12px;
width: 100%;
}
@media (max-width: 960px) {
.summary-grid,
.description-grid,
.commission-grid {
grid-template-columns: 1fr;
}
.card-header,
.commission-actions,
.list-row,
.drawer-actions {
flex-direction: column;
align-items: stretch;
}
}
</style>
admin-frontend/src/views/subscriptions/OrdersView.scss
Vendored
+189
View File
@@ -0,0 +1,189 @@
.orders-page {
display: grid;
gap: 18px;
}
.orders-intro {
display: grid;
gap: 12px;
}
.orders-copy {
display: grid;
gap: 10px;
}
.orders-kicker {
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--xboard-text-muted);
}
.orders-copy h1 {
font-size: clamp(34px, 5vw, 48px);
line-height: 1.08;
letter-spacing: -0.28px;
color: var(--xboard-text-strong);
}
.orders-copy span {
color: var(--xboard-text-secondary);
line-height: 1.47;
}
.orders-shell {
display: grid;
gap: 18px;
padding: 24px;
border-radius: 24px;
background: #ffffff;
box-shadow: var(--xboard-shadow);
}
.orders-toolbar,
.toolbar-left,
.toolbar-right,
.table-footer,
.order-link,
.status-pill {
display: flex;
align-items: center;
gap: 12px;
}
.orders-toolbar,
.table-footer {
justify-content: space-between;
}
.toolbar-left {
flex-wrap: wrap;
}
.toolbar-search {
width: min(260px, 100%);
}
.filter-pill {
border-radius: 999px;
border-color: var(--xboard-border);
background: #ffffff;
color: var(--xboard-text-secondary);
}
.filter-pill:hover,
.toolbar-ghost:hover {
color: #0071e3;
border-color: rgba(0, 113, 227, 0.18);
}
.toolbar-ghost {
color: var(--xboard-text-secondary);
}
.orders-alert {
margin-bottom: -4px;
}
.orders-table :deep(th.el-table__cell) {
background: #fbfbfd;
color: var(--xboard-text-secondary);
}
.orders-table :deep(.el-table__row td.el-table__cell) {
padding-top: 14px;
padding-bottom: 14px;
}
.order-link {
justify-content: flex-start;
max-width: 100%;
padding-inline: 0;
}
.order-link__code {
display: inline-block;
max-width: 112px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.plan-cell {
display: grid;
gap: 4px;
}
.plan-cell strong,
.amount-cell {
color: var(--xboard-text-strong);
}
.plan-cell span {
color: var(--xboard-text-muted);
}
.type-pill,
.period-pill,
.status-pill {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 0 12px;
border-radius: 999px;
background: #f5f5f7;
color: var(--xboard-text-secondary);
font-size: 12px;
}
.type-pill.is-warning,
.status-pill.is-warning {
background: rgba(224, 124, 35, 0.12);
color: var(--xboard-warning);
}
.type-pill.is-info,
.status-pill.is-info {
background: rgba(0, 113, 227, 0.12);
color: #0071e3;
}
.status-pill.is-success {
background: rgba(35, 134, 63, 0.12);
color: var(--xboard-success);
}
.status-pill.is-danger {
background: rgba(201, 52, 40, 0.12);
color: var(--xboard-danger);
}
.status-pill.is-neutral,
.type-pill.is-neutral {
background: #f5f5f7;
color: var(--xboard-text-secondary);
}
.status-dot {
width: 8px;
height: 8px;
border-radius: 999px;
background: currentColor;
}
.table-footer span {
color: var(--xboard-text-muted);
}
@media (max-width: 1080px) {
.orders-toolbar,
.table-footer {
flex-direction: column;
align-items: stretch;
}
.toolbar-right {
justify-content: flex-end;
}
}
admin-frontend/src/views/subscriptions/OrdersView.vue
+513
View File
@@ -0,0 +1,513 @@
<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, RefreshRight, Search, TopRight } from '@element-plus/icons-vue'
import {
cancelOrder,
fetchOrders,
getOrderDetail,
getPlans,
markOrderPaid,
updateOrderCommissionStatus,
} from '@/api/admin'
import type {
AdminOrderDetail,
AdminOrderListItem,
AdminPlanListItem,
AdminTableSort,
} from '@/types/api'
import {
COMMISSION_STATUS_OPTIONS,
ORDER_PERIOD_OPTIONS,
ORDER_STATUS_OPTIONS,
ORDER_TYPE_OPTIONS,
buildOrderFetchFilters,
formatOrderAmount,
formatOrderDateTime,
getCommissionStatusFilterLabel,
getCommissionStatusMeta,
getOrderFilterLabel,
getOrderPeriodFilterLabel,
getOrderPeriodLabel,
getOrderStatusFilterLabel,
getOrderStatusMeta,
getOrderTypeMeta,
type OrderFilterValue,
type OrderPeriodKey,
} from '@/utils/orders'
import OrderAssignDrawer from './OrderAssignDrawer.vue'
import OrderDetailDrawer from './OrderDetailDrawer.vue'
const loading = ref(false)
const metaLoading = ref(false)
const errorMessage = ref('')
const orders = ref<AdminOrderListItem[]>([])
const plans = ref<AdminPlanListItem[]>([])
const total = ref(0)
const current = ref(1)
const pageSize = ref(20)
const keyword = ref('')
const typeFilter = ref<OrderFilterValue<number>>('all')
const periodFilter = ref<OrderFilterValue<OrderPeriodKey>>('all')
const statusFilter = ref<OrderFilterValue<number>>('all')
const commissionFilter = ref<OrderFilterValue<number>>('all')
const sortState = ref<AdminTableSort>({ id: 'created_at', desc: true })
const assignVisible = ref(false)
const detailVisible = ref(false)
const detailLoading = ref(false)
const detailOrder = ref<AdminOrderDetail | null>(null)
const paying = ref(false)
const cancelling = ref(false)
const updatingCommission = ref(false)
const filterButtonLabels = computed(() => ({
type: typeFilter.value === 'all' ? '类型' : `类型 · ${getOrderFilterLabel(typeFilter.value)}`,
period: periodFilter.value === 'all' ? '周期' : `周期 · ${getOrderPeriodFilterLabel(periodFilter.value)}`,
status: statusFilter.value === 'all' ? '订单状态' : `订单状态 · ${getOrderStatusFilterLabel(statusFilter.value)}`,
commission: commissionFilter.value === 'all'
? '佣金状态'
: `佣金状态 · ${getCommissionStatusFilterLabel(commissionFilter.value)}`,
}))
async function loadPlans() {
metaLoading.value = true
try {
const response = await getPlans()
plans.value = response.data ?? []
} catch (error) {
ElMessage.warning(error instanceof Error ? error.message : '套餐列表加载失败，分配订单将暂时不可用')
} finally {
metaLoading.value = false
}
}
async function loadOrders() {
loading.value = true
errorMessage.value = ''
try {
const response = await fetchOrders({
current: current.value,
pageSize: pageSize.value,
filter: buildOrderFetchFilters({
keyword: keyword.value,
type: typeFilter.value,
period: periodFilter.value,
status: statusFilter.value,
commissionStatus: commissionFilter.value,
}),
sort: sortState.value ? [sortState.value] : undefined,
})
orders.value = response.data ?? []
total.value = response.total ?? 0
} catch (error) {
errorMessage.value = error instanceof Error ? error.message : '订单列表加载失败'
} finally {
loading.value = false
}
}
function refreshOrders(resetPage: boolean = false) {
if (resetPage && current.value !== 1) {
current.value = 1
return
}
void loadOrders()
}
function handleDropdownSelect(kind: 'type' | 'period' | 'status' | 'commission', value: string) {
if (kind === 'type') {
typeFilter.value = value === 'all' ? 'all' : Number(value)
}
if (kind === 'period') {
periodFilter.value = value as OrderFilterValue<OrderPeriodKey>
}
if (kind === 'status') {
statusFilter.value = value === 'all' ? 'all' : Number(value)
}
if (kind === 'commission') {
commissionFilter.value = value === 'all' ? 'all' : Number(value)
}
refreshOrders(true)
}
function clearFilters() {
keyword.value = ''
typeFilter.value = 'all'
periodFilter.value = 'all'
statusFilter.value = 'all'
commissionFilter.value = 'all'
sortState.value = { id: 'created_at', desc: true }
refreshOrders(true)
}
async function openDetail(order: AdminOrderListItem) {
detailVisible.value = true
detailLoading.value = true
detailOrder.value = null
try {
const response = await getOrderDetail(order.id)
detailOrder.value = response.data
} catch (error) {
ElMessage.error(error instanceof Error ? error.message : '订单详情加载失败')
detailVisible.value = false
} finally {
detailLoading.value = false
}
}
async function reloadDetail() {
if (!detailOrder.value) {
return
}
const response = await getOrderDetail(detailOrder.value.id)
detailOrder.value = response.data
}
async function handleMarkPaid() {
if (!detailOrder.value) {
return
}
try {
await ElMessageBox.confirm(`确认将订单 ${detailOrder.value.trade_no} 标记为已支付吗？`, '标记已支付', {
type: 'warning',
})
paying.value = true
await markOrderPaid(detailOrder.value.trade_no)
ElMessage.success('订单已标记为支付成功')
await Promise.all([loadOrders(), reloadDetail()])
} catch (error) {
if (error === 'cancel' || error === 'close') {
return
}
ElMessage.error(error instanceof Error ? error.message : '订单支付状态更新失败')
} finally {
paying.value = false
}
}
async function handleCancelOrder() {
if (!detailOrder.value) {
return
}
try {
await ElMessageBox.confirm(`确认取消订单 ${detailOrder.value.trade_no} 吗？`, '取消订单', {
type: 'warning',
})
cancelling.value = true
await cancelOrder(detailOrder.value.trade_no)
ElMessage.success('订单已取消')
await Promise.all([loadOrders(), reloadDetail()])
} catch (error) {
if (error === 'cancel' || error === 'close') {
return
}
ElMessage.error(error instanceof Error ? error.message : '订单取消失败')
} finally {
cancelling.value = false
}
}
async function handleCommissionStatusUpdate(value: number) {
if (!detailOrder.value) {
return
}
updatingCommission.value = true
try {
await updateOrderCommissionStatus(detailOrder.value.trade_no, value)
ElMessage.success('佣金状态已更新')
await Promise.all([loadOrders(), reloadDetail()])
} catch (error) {
ElMessage.error(error instanceof Error ? error.message : '佣金状态更新失败')
} finally {
updatingCommission.value = false
}
}
function handleAssignSuccess() {
assignVisible.value = false
refreshOrders(true)
}
function handleSortChange(payload: { prop: string; order: 'ascending' | 'descending' | null }) {
if (!payload.prop || !payload.order) {
sortState.value = { id: 'created_at', desc: true }
refreshOrders(false)
return
}
sortState.value = {
id: payload.prop,
desc: payload.order === 'descending',
}
refreshOrders(false)
}
watch([current, pageSize], () => {
void loadOrders()
})
onMounted(() => {
void Promise.all([loadPlans(), loadOrders()]).catch(() => {
ElMessage.error('订单管理页面初始化失败')
})
})
</script>
<template>
<div class="orders-page">
<section class="orders-intro">
<div class="orders-copy">
<p class="orders-kicker">Subscriptions</p>
<h1>订单管理</h1>
<span>在这里可以查看用户订单，包括分配、查看、删除等操作。</span>
</div>
</section>
<section class="orders-shell">
<header class="orders-toolbar">
<div class="toolbar-left">
<ElButton type="primary" @click="assignVisible = true">
<ElIcon><Plus /></ElIcon>
添加订单
</ElButton>
<ElInput
v-model="keyword"
clearable
placeholder="搜索订单..."
class="toolbar-search"
@keyup.enter="refreshOrders(true)"
>
<template #prefix>
<ElIcon><Search /></ElIcon>
</template>
</ElInput>
<ElDropdown trigger="click" @command="handleDropdownSelect('type', $event)">
<ElButton class="filter-pill">
<ElIcon><Plus /></ElIcon>
{{ filterButtonLabels.type }}
</ElButton>
<template #dropdown>
<ElDropdownMenu>
<ElDropdownItem command="all">全部类型</ElDropdownItem>
<ElDropdownItem
v-for="item in ORDER_TYPE_OPTIONS"
:key="item.value"
:command="String(item.value)"
>
{{ item.label }}
</ElDropdownItem>
</ElDropdownMenu>
</template>
</ElDropdown>
<ElDropdown trigger="click" @command="handleDropdownSelect('period', $event)">
<ElButton class="filter-pill">
<ElIcon><Plus /></ElIcon>
{{ filterButtonLabels.period }}
</ElButton>
<template #dropdown>
<ElDropdownMenu>
<ElDropdownItem command="all">全部周期</ElDropdownItem>
<ElDropdownItem
v-for="item in ORDER_PERIOD_OPTIONS"
:key="item.value"
:command="item.value"
>
{{ item.label }}
</ElDropdownItem>
</ElDropdownMenu>
</template>
</ElDropdown>
<ElDropdown trigger="click" @command="handleDropdownSelect('status', $event)">
<ElButton class="filter-pill">
<ElIcon><Plus /></ElIcon>
{{ filterButtonLabels.status }}
</ElButton>
<template #dropdown>
<ElDropdownMenu>
<ElDropdownItem command="all">全部订单状态</ElDropdownItem>
<ElDropdownItem
v-for="item in ORDER_STATUS_OPTIONS"
:key="item.value"
:command="String(item.value)"
>
{{ item.label }}
</ElDropdownItem>
</ElDropdownMenu>
</template>
</ElDropdown>
<ElDropdown trigger="click" @command="handleDropdownSelect('commission', $event)">
<ElButton class="filter-pill">
<ElIcon><Plus /></ElIcon>
{{ filterButtonLabels.commission }}
</ElButton>
<template #dropdown>
<ElDropdownMenu>
<ElDropdownItem command="all">全部佣金状态</ElDropdownItem>
<ElDropdownItem
v-for="item in COMMISSION_STATUS_OPTIONS"
:key="item.value"
:command="String(item.value)"
>
{{ item.label }}
</ElDropdownItem>
</ElDropdownMenu>
</template>
</ElDropdown>
</div>
<div class="toolbar-right">
<ElButton class="toolbar-ghost" @click="clearFilters">
重置筛选
</ElButton>
<ElButton class="toolbar-ghost" :loading="loading || metaLoading" @click="refreshOrders(false)">
<ElIcon><RefreshRight /></ElIcon>
刷新
</ElButton>
</div>
</header>
<ElAlert
v-if="errorMessage"
class="orders-alert"
type="error"
:closable="false"
show-icon
:title="errorMessage"
>
<template #default>
<ElButton size="small" @click="refreshOrders(false)">重新加载</ElButton>
</template>
</ElAlert>
<ElTable
:data="orders"
v-loading="loading"
class="orders-table"
row-key="id"
empty-text="当前筛选条件下暂无订单"
@sort-change="handleSortChange"
>
<ElTableColumn label="订单号" min-width="180">
<template #default="{ row }">
<ElButton text class="order-link" @click="openDetail(row)">
<span class="order-link__code mono">{{ row.trade_no }}</span>
<ElIcon><TopRight /></ElIcon>
</ElButton>
</template>
</ElTableColumn>
<ElTableColumn label="类型" width="112">
<template #default="{ row }">
<span class="type-pill" :class="`is-${getOrderTypeMeta(row.type).tone}`">
{{ getOrderTypeMeta(row.type).label }}
</span>
</template>
</ElTableColumn>
<ElTableColumn label="订阅计划" min-width="230">
<template #default="{ row }">
<div class="plan-cell">
<strong>{{ row.plan?.name || '未绑定套餐' }}</strong>
<span>{{ getOrderPeriodLabel(row.period) }}</span>
</div>
</template>
</ElTableColumn>
<ElTableColumn prop="period" label="周期" width="110">
<template #default="{ row }">
<span class="period-pill">{{ getOrderPeriodLabel(row.period) }}</span>
</template>
</ElTableColumn>
<ElTableColumn prop="total_amount" label="支付金额" min-width="140" sortable="custom">
<template #default="{ row }">
<strong class="amount-cell">{{ formatOrderAmount(row.total_amount) }}</strong>
</template>
</ElTableColumn>
<ElTableColumn prop="status" label="订单状态" min-width="150" sortable="custom">
<template #default="{ row }">
<span class="status-pill" :class="`is-${getOrderStatusMeta(row.status).tone}`">
<span class="status-dot" />
{{ getOrderStatusMeta(row.status).label }}
</span>
</template>
</ElTableColumn>
<ElTableColumn prop="commission_balance" label="佣金金额" min-width="140" sortable="custom">
<template #default="{ row }">
<span>{{ row.commission_balance ? formatOrderAmount(row.commission_balance) : '-' }}</span>
</template>
</ElTableColumn>
<ElTableColumn prop="commission_status" label="佣金状态" min-width="150" sortable="custom">
<template #default="{ row }">
<span class="status-pill" :class="`is-${getCommissionStatusMeta(row.commission_status, row.commission_balance).tone}`">
<span class="status-dot" />
{{ getCommissionStatusMeta(row.commission_status, row.commission_balance).label }}
</span>
</template>
</ElTableColumn>
<ElTableColumn prop="created_at" label="创建时间" min-width="180" sortable="custom">
<template #default="{ row }">
<span>{{ formatOrderDateTime(row.created_at) }}</span>
</template>
</ElTableColumn>
</ElTable>
<footer class="table-footer">
<span>已选择 0 项，共 {{ total }} 项</span>
<ElPagination
v-model:current-page="current"
v-model:page-size="pageSize"
:page-sizes="[20, 50, 100]"
layout="sizes, prev, pager, next"
:total="total"
background
/>
</footer>
</section>
<OrderAssignDrawer
:visible="assignVisible"
:plans="plans"
@update:visible="assignVisible = $event"
@success="handleAssignSuccess"
/>
<OrderDetailDrawer
:visible="detailVisible"
:loading="detailLoading"
:order="detailOrder"
:paying="paying"
:cancelling="cancelling"
:updating-commission="updatingCommission"
@update:visible="detailVisible = $event"
@paid="handleMarkPaid"
@cancel="handleCancelOrder"
@update-commission-status="handleCommissionStatusUpdate"
/>
</div>
</template>
<style scoped lang="scss" src="./OrdersView.scss"></style>
admin-frontend/src/views/subscriptions/PlansView.vue
+10 -3
View File
@@ -23,6 +23,7 @@ import {
formatPlanTraffic,
getPlanPriceBadges,
movePlanOrder,
normalizePlanToggleFields,
} from '@/utils/plans'
import PlanEditorDrawer from './PlanEditorDrawer.vue'
@@ -70,7 +71,9 @@ async function loadData() {
loading.value = true
try {
const [plansResponse, groupsResponse] = await Promise.all([getPlans(), getServerGroups()])
plans.value = [...(plansResponse.data ?? [])].sort((left, right) => (left.sort || 0) - (right.sort || 0))
plans.value = (plansResponse.data ?? [])
.map((plan) => normalizePlanToggleFields(plan))
.sort((left, right) => (left.sort || 0) - (right.sort || 0))
groups.value = groupsResponse.data ?? []
} finally {
loading.value = false
@@ -91,10 +94,14 @@ function openEditDrawer(plan: AdminPlanListItem) {
async function handleToggle(plan: AdminPlanListItem, field: PlanToggleField, nextValue: boolean | string | number) {
const key = getToggleKey(plan.id, field)
const normalizedNextValue = Boolean(nextValue)
if (plan[field] === normalizedNextValue) {
return
}
toggleLoadingMap.value[key] = true
try {
await updatePlan(plan.id, { [field]: Boolean(nextValue) })
plan[field] = Boolean(nextValue)
await updatePlan(plan.id, { [field]: normalizedNextValue })
plan[field] = normalizedNextValue
ElMessage.success('套餐状态已更新')
} catch (error) {
ElMessage.error(error instanceof Error ? error.message : '套餐状态更新失败')
admin-frontend/src/views/system/KnowledgeEditorDialog.scss
Vendored
+185
View File
@@ -0,0 +1,185 @@
.dialog-shell,
.dialog-form {
display: grid;
gap: 20px;
}
.dialog-copy {
display: grid;
gap: 6px;
}
.dialog-copy p {
font-size: 12px;
color: var(--xboard-text-muted);
letter-spacing: 0.18em;
text-transform: uppercase;
}
.dialog-copy h2 {
font-size: 30px;
line-height: 1.08;
color: var(--xboard-text-strong);
}
.dialog-copy span {
color: var(--xboard-text-secondary);
line-height: 1.6;
}
.dialog-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 16px;
}
.is-full {
grid-column: 1 / -1;
}
.visibility-panel,
.editor-panel {
display: grid;
gap: 12px;
}
.visibility-panel {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
padding: 16px 18px;
border-radius: 18px;
background: #fbfbfd;
border: 1px solid rgba(0, 0, 0, 0.06);
}
.visibility-copy {
display: grid;
gap: 4px;
}
.visibility-copy strong {
color: var(--xboard-text-strong);
}
.visibility-copy span {
color: var(--xboard-text-muted);
line-height: 1.5;
}
.editor-panel {
padding: 18px;
border-radius: 22px;
background: #fbfbfd;
border: 1px solid rgba(0, 0, 0, 0.06);
}
.editor-header,
.editor-actions,
.dialog-footer {
display: flex;
align-items: center;
gap: 12px;
}
.editor-header,
.dialog-footer {
justify-content: space-between;
}
.editor-header h3 {
font-size: 18px;
color: var(--xboard-text-strong);
}
.editor-header span {
color: var(--xboard-text-muted);
line-height: 1.5;
}
.editor-counter {
color: var(--xboard-text-muted);
font-size: 12px;
}
.editor-toolbar {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.editor-toolbar button {
min-width: 42px;
height: 34px;
padding: 0 12px;
border-radius: 10px;
border: 1px solid rgba(0, 0, 0, 0.08);
background: #ffffff;
color: var(--xboard-text-secondary);
cursor: pointer;
transition: border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.editor-toolbar button:hover {
color: #0071e3;
border-color: rgba(0, 113, 227, 0.24);
transform: translateY(-1px);
}
.editor-textarea,
.editor-preview {
min-height: 320px;
border-radius: 18px;
border: 1px solid rgba(0, 0, 0, 0.08);
background: #ffffff;
}
.editor-textarea {
width: 100%;
padding: 18px;
resize: vertical;
outline: none;
color: var(--xboard-text-strong);
font: inherit;
line-height: 1.68;
}
.editor-preview {
padding: 18px;
overflow: auto;
color: var(--xboard-text-secondary);
}
.markdown-body :deep(h1),
.markdown-body :deep(h2),
.markdown-body :deep(h3) {
margin: 0 0 12px;
color: var(--xboard-text-strong);
}
.markdown-body :deep(p),
.markdown-body :deep(ul),
.markdown-body :deep(ol),
.markdown-body :deep(blockquote) {
margin-bottom: 12px;
}
.markdown-body :deep(blockquote) {
padding-left: 14px;
border-left: 3px solid rgba(0, 113, 227, 0.18);
color: var(--xboard-text-muted);
}
@media (max-width: 767px) {
.dialog-grid,
.visibility-panel,
.editor-header,
.dialog-footer {
grid-template-columns: 1fr;
flex-direction: column;
align-items: stretch;
}
.editor-actions {
justify-content: space-between;
}
}
admin-frontend/src/views/system/KnowledgeEditorDialog.vue
+284
View File
@@ -0,0 +1,284 @@
<script setup lang="ts">
import { computed, nextTick, reactive, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { saveKnowledge } from '@/api/admin'
import type { AdminKnowledgeDetail } from '@/types/api'
import {
KNOWLEDGE_LANGUAGE_OPTIONS,
createEmptyKnowledgeForm,
renderKnowledgeBody,
toKnowledgeFormModel,
toKnowledgeSavePayload,
type KnowledgeFormModel,
} from '@/utils/knowledge'
const props = defineProps<{
visible: boolean
mode: 'create' | 'edit'
knowledge?: AdminKnowledgeDetail | null
categories: string[]
}>()
const emit = defineEmits<{
'update:visible': [value: boolean]
success: [message: string]
}>()
const formRef = ref<FormInstance>()
const submitting = ref(false)
const previewVisible = ref(false)
const contentEditorRef = ref<HTMLTextAreaElement | null>(null)
const form = reactive<KnowledgeFormModel>(createEmptyKnowledgeForm())
const dialogTitle = computed(() => props.mode === 'create' ? '添加知识' : '编辑知识')
const renderedBody = computed(() => renderKnowledgeBody(form.body))
const bodyLength = computed(() => form.body.trim().length)
const categoryOptions = computed(() => props.categories.filter(Boolean))
const rules = computed<FormRules<KnowledgeFormModel>>(() => ({
title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
category: [{ required: true, message: '请输入分类', trigger: 'change' }],
language: [{ required: true, message: '请选择语言', trigger: 'change' }],
body: [{ required: true, message: '请输入内容', trigger: 'blur' }],
}))
function closeDialog() {
emit('update:visible', false)
}
function syncForm() {
Object.assign(form, createEmptyKnowledgeForm(), toKnowledgeFormModel(props.knowledge))
previewVisible.value = false
}
function insertSnippet(prefix: string, suffix = '', placeholder = '内容') {
const textarea = contentEditorRef.value
const content = form.body
if (!textarea) {
form.body = `${content}${prefix}${placeholder}${suffix}`
return
}
const start = textarea.selectionStart
const end = textarea.selectionEnd
const selected = content.slice(start, end) || placeholder
form.body = `${content.slice(0, start)}${prefix}${selected}${suffix}${content.slice(end)}`
nextTick(() => {
textarea.focus()
const cursor = start + prefix.length + selected.length + suffix.length
textarea.setSelectionRange(cursor, cursor)
})
}
function insertTextAtCursor(text: string, cursorOffsetFromEnd = 0) {
const textarea = contentEditorRef.value
const content = form.body
if (!textarea) {
form.body = `${content}${text}`
return
}
const start = textarea.selectionStart
const end = textarea.selectionEnd
form.body = `${content.slice(0, start)}${text}${content.slice(end)}`
nextTick(() => {
textarea.focus()
const cursor = start + text.length - cursorOffsetFromEnd
textarea.setSelectionRange(cursor, cursor)
})
}
function insertHeading() {
insertSnippet('# ', '', '一级标题')
}
function insertList() {
insertSnippet('- ', '', '列表项')
}
function insertQuote() {
insertSnippet('> ', '', '引用内容')
}
function insertCode() {
insertSnippet('`', '`', '代码')
}
function insertLink() {
insertTextAtCursor('[链接文本](https://)', 1)
}
function insertImage() {
insertTextAtCursor('![图片描述](https://)', 1)
}
async function handleSubmit() {
const instance = formRef.value
if (!instance) {
return
}
const valid = await instance.validate().catch(() => false)
if (!valid) {
return
}
submitting.value = true
try {
await saveKnowledge(toKnowledgeSavePayload(form))
const message = props.mode === 'create' ? '知识已创建' : '知识已更新'
ElMessage.success(message)
emit('success', message)
closeDialog()
} catch (error) {
ElMessage.error(error instanceof Error ? error.message : '知识保存失败')
} finally {
submitting.value = false
}
}
watch(
() => [props.visible, props.knowledge, props.mode],
([visible]) => {
if (!visible) {
return
}
syncForm()
nextTick(() => {
formRef.value?.clearValidate()
})
},
{ immediate: true },
)
</script>
<template>
<ElDialog
:model-value="props.visible"
:title="dialogTitle"
width="min(860px, calc(100vw - 32px))"
top="5vh"
destroy-on-close
class="knowledge-editor-dialog"
@close="closeDialog"
@update:model-value="emit('update:visible', $event)"
>
<div class="dialog-shell">
<div class="dialog-copy">
<p>Knowledge Base</p>
<h2>{{ dialogTitle }}</h2>
<span>发布或维护知识库文案，支持分类、语言、显示状态和 Markdown 正文编辑。</span>
</div>
<ElForm
ref="formRef"
:model="form"
:rules="rules"
label-position="top"
class="dialog-form"
>
<div class="dialog-grid">
<ElFormItem label="标题" prop="title" class="is-full">
<ElInput v-model="form.title" placeholder="请输入标题" />
</ElFormItem>
<ElFormItem label="分类" prop="category">
<ElSelect
v-model="form.category"
filterable
allow-create
default-first-option
placeholder="请选择或输入分类"
>
<ElOption
v-for="item in categoryOptions"
:key="item"
:label="item"
:value="item"
/>
</ElSelect>
</ElFormItem>
<ElFormItem label="语言" prop="language">
<ElSelect v-model="form.language" placeholder="请选择语言">
<ElOption
v-for="item in KNOWLEDGE_LANGUAGE_OPTIONS"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</ElSelect>
</ElFormItem>
</div>
<section class="visibility-panel">
<div class="visibility-copy">
<strong>显示状态</strong>
<span>关闭后仍保留内容，但不会在用户侧展示。</span>
</div>
<ElSwitch v-model="form.show" />
</section>
<ElFormItem label="内容" prop="body">
<section class="editor-panel">
<header class="editor-header">
<div>
<h3>正文编辑</h3>
<span>采用轻量 Markdown 编辑方案，适合教程、常见问题和知识说明文档。</span>
</div>
<div class="editor-actions">
<span class="editor-counter">{{ bodyLength }} 字</span>
<ElButton @click="previewVisible = !previewVisible">
{{ previewVisible ? '继续编辑' : '显示预览' }}
</ElButton>
</div>
</header>
<div class="editor-toolbar">
<button type="button" @click="insertHeading">H1</button>
<button type="button" @click="insertSnippet('**', '**', '加粗文本')">B</button>
<button type="button" @click="insertSnippet('*', '*', '斜体文本')">I</button>
<button type="button" @click="insertSnippet('<u>', '</u>', '下划线')">U</button>
<button type="button" @click="insertList">列表</button>
<button type="button" @click="insertQuote">引用</button>
<button type="button" @click="insertCode">代码</button>
<button type="button" @click="insertLink">链接</button>
<button type="button" @click="insertImage">图片</button>
<button type="button" @click="insertTextAtCursor('<br>')">换行</button>
</div>
<div
v-if="previewVisible"
class="editor-preview markdown-body"
v-html="renderedBody"
/>
<textarea
v-else
ref="contentEditorRef"
v-model="form.body"
class="editor-textarea"
placeholder="请输入知识内容，支持 Markdown 与基础 HTML。"
/>
</section>
</ElFormItem>
</ElForm>
</div>
<template #footer>
<div class="dialog-footer">
<ElButton @click="closeDialog">取消</ElButton>
<ElButton type="primary" :loading="submitting" @click="handleSubmit">
{{ props.mode === 'create' ? '提交' : '保存修改' }}
</ElButton>
</div>
</template>
</ElDialog>
</template>
<style scoped lang="scss" src="./KnowledgeEditorDialog.scss"></style>
admin-frontend/src/views/system/PluginCard.scss
Vendored
+115
View File
@@ -0,0 +1,115 @@
.plugin-card {
display: grid;
gap: 18px;
padding: 24px 24px 22px;
border-radius: 24px;
background: #ffffff;
box-shadow: var(--xboard-shadow);
}
.plugin-card__header,
.plugin-card__actions,
.plugin-card__summary,
.title-row,
.meta-row {
display: flex;
}
.plugin-card__header {
justify-content: space-between;
align-items: flex-start;
gap: 16px;
}
.plugin-card__title {
display: grid;
gap: 10px;
}
.title-row {
align-items: center;
flex-wrap: wrap;
gap: 10px;
h2 {
margin: 0;
color: var(--xboard-text-strong);
font-size: 32px;
line-height: 1.1;
letter-spacing: -0.28px;
}
}
.title-tags,
.meta-row,
.plugin-card__summary,
.plugin-card__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.meta-row {
color: var(--xboard-text-muted);
align-items: center;
font-size: 13px;
code {
padding: 6px 10px;
border-radius: 999px;
background: #f5f5f7;
color: var(--xboard-text-secondary);
font-family: var(--xboard-font-mono);
font-size: 12px;
}
}
.detail-button {
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid rgba(0, 113, 227, 0.12);
border-radius: 999px;
background: rgba(0, 113, 227, 0.06);
color: #0071e3;
padding: 10px 14px;
cursor: pointer;
}
.plugin-card__description {
margin: 0;
color: var(--xboard-text-secondary);
line-height: 1.65;
}
.plugin-card__summary {
align-items: center;
color: var(--xboard-text-muted);
font-size: 13px;
span {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 999px;
background: #f5f5f7;
}
}
.plugin-card__actions {
align-items: center;
justify-content: flex-end;
}
@media (max-width: 767px) {
.plugin-card__header,
.plugin-card__actions {
flex-direction: column;
align-items: stretch;
}
.plugin-card__actions :deep(.el-button) {
margin-left: 0;
}
}
admin-frontend/src/views/system/PluginCard.vue
+122
View File
@@ -0,0 +1,122 @@
<script setup lang="ts">
import { computed } from 'vue'
import { Plus, Setting } from '@element-plus/icons-vue'
import type { AdminPluginItem } from '@/types/api'
import { getPluginStatusMeta, getPluginTypeLabel, hasPluginConfig, hasPluginReadme } from '@/utils/plugins'
type PluginAction = 'install' | 'enable' | 'disable' | 'upgrade' | 'uninstall'
const props = defineProps<{
plugin: AdminPluginItem
typeLabels: Array<{ value: string; label: string }>
actionLoadingMap: Record<string, boolean>
}>()
const emit = defineEmits<{
detail: [plugin: AdminPluginItem]
action: [payload: { plugin: AdminPluginItem; action: PluginAction }]
}>()
const statusMeta = computed(() => getPluginStatusMeta(props.plugin))
const typeLabel = computed(() => getPluginTypeLabel(props.plugin.type, props.typeLabels))
function isActionLoading(action: PluginAction): boolean {
return Boolean(props.actionLoadingMap[`${props.plugin.code}:${action}`])
}
function triggerAction(action: PluginAction) {
emit('action', { plugin: props.plugin, action })
}
</script>
<template>
<article class="plugin-card">
<div class="plugin-card__header">
<div class="plugin-card__title">
<div class="title-row">
<h2>{{ props.plugin.name }}</h2>
<div class="title-tags">
<ElTag round effect="plain">{{ typeLabel }}</ElTag>
<ElTag round :type="statusMeta.tone || undefined">
{{ statusMeta.label }}
</ElTag>
<ElTag v-if="props.plugin.is_protected" round type="warning">核心插件</ElTag>
</div>
</div>
<div class="meta-row">
<code>{{ props.plugin.code }}</code>
<span>v{{ props.plugin.version }}</span>
<span>{{ props.plugin.author || '未知作者' }}</span>
</div>
</div>
<button type="button" class="detail-button" @click="emit('detail', props.plugin)">
<ElIcon><Setting /></ElIcon>
详情
</button>
</div>
<p class="plugin-card__description">
{{ props.plugin.description || '当前插件未提供描述信息。' }}
</p>
<div class="plugin-card__summary">
<span>{{ statusMeta.helper }}</span>
<span v-if="hasPluginConfig(props.plugin)">含配置项</span>
<span v-if="hasPluginReadme(props.plugin)">含 README</span>
</div>
<div class="plugin-card__actions">
<ElButton
v-if="!props.plugin.is_installed"
type="primary"
:loading="isActionLoading('install')"
@click="triggerAction('install')"
>
<ElIcon><Plus /></ElIcon>
安装
</ElButton>
<ElButton
v-if="props.plugin.is_installed && !props.plugin.is_enabled"
:loading="isActionLoading('enable')"
@click="triggerAction('enable')"
>
启用
</ElButton>
<ElButton
v-if="props.plugin.is_installed && props.plugin.is_enabled"
type="danger"
plain
:loading="isActionLoading('disable')"
@click="triggerAction('disable')"
>
禁用
</ElButton>
<ElButton
v-if="props.plugin.need_upgrade"
type="warning"
plain
:loading="isActionLoading('upgrade')"
@click="triggerAction('upgrade')"
>
升级
</ElButton>
<ElButton
v-if="props.plugin.is_installed && !props.plugin.is_enabled"
plain
:disabled="props.plugin.is_protected"
:loading="isActionLoading('uninstall')"
@click="triggerAction('uninstall')"
>
卸载
</ElButton>
</div>
</article>
</template>
<style scoped lang="scss" src="./PluginCard.scss"></style>
admin-frontend/src/views/system/PluginDetailDrawer.scss
Vendored
+167
View File
@@ -0,0 +1,167 @@
.drawer-header {
display: grid;
gap: 14px;
}
.drawer-copy {
display: grid;
gap: 8px;
p {
margin: 0;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--xboard-text-muted);
}
h2 {
margin: 0;
color: var(--xboard-text-strong);
font-size: 34px;
line-height: 1.08;
letter-spacing: -0.28px;
}
span {
color: var(--xboard-text-secondary);
line-height: 1.6;
}
}
.drawer-meta {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.drawer-shell {
display: grid;
gap: 18px;
}
.overview-card,
.panel-card {
border-radius: 24px;
background: #ffffff;
box-shadow: var(--xboard-shadow);
}
.overview-card {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
padding: 20px;
article {
display: grid;
gap: 8px;
padding: 14px 16px;
border-radius: 18px;
background: #f5f5f7;
}
span {
color: var(--xboard-text-muted);
font-size: 12px;
}
strong {
color: var(--xboard-text-strong);
line-height: 1.5;
}
}
.tab-row {
display: flex;
gap: 10px;
}
.tab-pill {
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 999px;
background: #ffffff;
padding: 11px 16px;
color: var(--xboard-text-secondary);
cursor: pointer;
transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
&.active {
color: #0071e3;
border-color: rgba(0, 113, 227, 0.2);
background: rgba(0, 113, 227, 0.08);
}
}
.panel-card {
padding: 22px;
}
.markdown-shell {
color: var(--xboard-text-secondary);
line-height: 1.7;
:deep(h1),
:deep(h2),
:deep(h3) {
color: var(--xboard-text-strong);
line-height: 1.2;
}
:deep(pre) {
overflow-x: auto;
padding: 14px;
border-radius: 16px;
background: #f5f5f7;
}
:deep(code) {
font-family: var(--xboard-font-mono);
}
}
.config-alert {
margin-bottom: 16px;
}
.config-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.config-field.is-wide {
grid-column: 1 / -1;
}
.field-number,
.field-select {
width: 100%;
}
.field-helper {
margin-top: 8px;
color: var(--xboard-text-muted);
font-size: 12px;
line-height: 1.5;
}
.drawer-footer {
display: flex;
justify-content: flex-end;
gap: 12px;
}
@media (max-width: 767px) {
.overview-card,
.config-grid {
grid-template-columns: 1fr;
}
.tab-row {
flex-wrap: wrap;
}
}
admin-frontend/src/views/system/PluginDetailDrawer.vue
+248
View File
@@ -0,0 +1,248 @@
<script setup lang="ts">
import { computed, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { Document, Setting } from '@element-plus/icons-vue'
import type { AdminPluginItem } from '@/types/api'
import {
createPluginConfigDraft,
getPluginConfigFields,
getPluginStatusMeta,
getPluginTypeLabel,
hasPluginConfig,
hasPluginReadme,
renderPluginReadme,
serializePluginConfigDraft,
type PluginConfigDraft,
} from '@/utils/plugins'
const props = defineProps<{
visible: boolean
plugin: AdminPluginItem | null
loading?: boolean
saving?: boolean
typeLabels?: Array<{ value: string; label: string }>
}>()
const emit = defineEmits<{
'update:visible': [value: boolean]
saveConfig: [value: Record<string, unknown>]
}>()
const activeTab = reactive<{ value: 'readme' | 'config' }>({ value: 'readme' })
const configDraft = reactive<PluginConfigDraft>({})
const statusMeta = computed(() => props.plugin ? getPluginStatusMeta(props.plugin) : null)
const pluginTypeLabel = computed(() => props.plugin
? getPluginTypeLabel(props.plugin.type, props.typeLabels || [])
: '未知类型')
const configFields = computed(() => getPluginConfigFields(props.plugin))
const readmeHtml = computed(() => renderPluginReadme(props.plugin?.readme || ''))
const readmeAvailable = computed(() => hasPluginReadme(props.plugin))
const configAvailable = computed(() => hasPluginConfig(props.plugin))
const canEditConfig = computed(() => Boolean(props.plugin?.is_installed && configAvailable.value))
function resetDraft() {
Object.keys(configDraft).forEach((key) => {
delete configDraft[key]
})
const nextDraft = createPluginConfigDraft(props.plugin)
Object.entries(nextDraft).forEach(([key, value]) => {
configDraft[key] = value
})
}
function handleSave() {
if (!props.plugin || !configAvailable.value) {
return
}
try {
emit('saveConfig', serializePluginConfigDraft(props.plugin, configDraft))
} catch (error) {
ElMessage.error(error instanceof Error ? error.message : '插件配置保存失败')
}
}
watch(
() => [props.visible, props.plugin?.code, props.plugin?.is_installed, props.plugin?.config] as const,
() => {
activeTab.value = readmeAvailable.value ? 'readme' : 'config'
resetDraft()
},
{ immediate: true },
)
</script>
<template>
<ElDrawer
:model-value="props.visible"
size="min(620px, 100vw)"
append-to-body
destroy-on-close
class="plugin-detail-drawer"
@close="emit('update:visible', false)"
@update:model-value="emit('update:visible', $event)"
>
<template #header>
<div class="drawer-header">
<div class="drawer-copy">
<p>Plugin Workspace</p>
<h2>{{ props.plugin?.name || '插件详情' }}</h2>
<span>{{ props.plugin?.description || '查看插件说明、状态与配置。' }}</span>
</div>
<div v-if="props.plugin" class="drawer-meta">
<ElTag round effect="plain">{{ pluginTypeLabel }}</ElTag>
<ElTag round :type="statusMeta?.tone || undefined">{{ statusMeta?.label }}</ElTag>
<ElTag v-if="props.plugin.is_protected" round type="warning">核心插件</ElTag>
</div>
</div>
</template>
<div class="drawer-shell" v-loading="props.loading">
<template v-if="props.plugin">
<section class="overview-card">
<article>
<span>插件代号</span>
<strong>{{ props.plugin.code }}</strong>
</article>
<article>
<span>当前版本</span>
<strong>v{{ props.plugin.version }}</strong>
</article>
<article>
<span>作者</span>
<strong>{{ props.plugin.author || '未知作者' }}</strong>
</article>
<article>
<span>状态说明</span>
<strong>{{ statusMeta?.helper }}</strong>
</article>
</section>
<div class="tab-row">
<button
type="button"
class="tab-pill"
:class="{ active: activeTab.value === 'readme' }"
@click="activeTab.value = 'readme'"
>
<ElIcon><Document /></ElIcon>
说明文档
</button>
<button
type="button"
class="tab-pill"
:class="{ active: activeTab.value === 'config' }"
@click="activeTab.value = 'config'"
>
<ElIcon><Setting /></ElIcon>
插件配置
</button>
</div>
<section v-if="activeTab.value === 'readme'" class="panel-card">
<div v-if="readmeAvailable" class="markdown-shell markdown-body" v-html="readmeHtml" />
<ElEmpty v-else description="当前插件未提供 README 说明" />
</section>
<section v-else class="panel-card">
<ElAlert
v-if="!props.plugin.is_installed"
type="info"
show-icon
:closable="false"
title="安装后才可保存配置，当前先展示配置结构预览。"
class="config-alert"
/>
<ElForm v-if="configAvailable" label-position="top" class="config-form">
<div class="config-grid">
<div
v-for="field in configFields"
:key="field.key"
class="config-field"
:class="{ 'is-wide': field.type === 'text' || field.type === 'json' }"
>
<ElFormItem :label="field.label || field.key">
<ElSwitch
v-if="field.type === 'boolean'"
:model-value="Boolean(configDraft[field.key])"
:disabled="!canEditConfig || props.saving"
@update:model-value="configDraft[field.key] = $event"
/>
<ElInputNumber
v-else-if="field.type === 'number'"
:model-value="Number(configDraft[field.key] ?? 0)"
:disabled="!canEditConfig || props.saving"
controls-position="right"
class="field-number"
@update:model-value="configDraft[field.key] = $event ?? 0"
/>
<ElSelect
v-else-if="field.type === 'select'"
:model-value="configDraft[field.key]"
:disabled="!canEditConfig || props.saving"
class="field-select"
@update:model-value="configDraft[field.key] = $event as string | number | boolean"
>
<ElOption
v-for="option in field.options"
:key="`${field.key}-${option.value}`"
:label="option.label"
:value="option.value"
/>
</ElSelect>
<ElInput
v-else-if="field.type === 'text' || field.type === 'json'"
:model-value="String(configDraft[field.key] ?? '')"
type="textarea"
:rows="field.type === 'json' ? 7 : 4"
:placeholder="field.placeholder"
:disabled="!canEditConfig || props.saving"
@update:model-value="configDraft[field.key] = $event"
/>
<ElInput
v-else
:model-value="String(configDraft[field.key] ?? '')"
:placeholder="field.placeholder"
:disabled="!canEditConfig || props.saving"
clearable
@update:model-value="configDraft[field.key] = $event"
/>
<p v-if="field.description" class="field-helper">
{{ field.description }}
</p>
</ElFormItem>
</div>
</div>
</ElForm>
<ElEmpty v-else description="当前插件没有可编辑配置项" />
</section>
</template>
</div>
<template #footer>
<div class="drawer-footer">
<ElButton @click="emit('update:visible', false)">关闭</ElButton>
<ElButton
type="primary"
:disabled="!canEditConfig"
:loading="props.saving"
@click="handleSave"
>
保存配置
</ElButton>
</div>
</template>
</ElDrawer>
</template>
<style scoped lang="scss" src="./PluginDetailDrawer.scss"></style>
admin-frontend/src/views/system/PluginManagementView.scss
Vendored
+178
View File
@@ -0,0 +1,178 @@
.plugins-page {
display: grid;
gap: 24px;
}
.plugins-hero {
display: flex;
justify-content: space-between;
gap: 24px;
padding: 34px;
border-radius: 28px;
background: #000000;
}
.hero-copy {
display: grid;
gap: 12px;
max-width: 640px;
h1 {
margin: 0;
color: #ffffff;
font-size: clamp(34px, 5vw, 52px);
line-height: 1.08;
letter-spacing: -0.28px;
}
span {
color: rgba(255, 255, 255, 0.72);
line-height: 1.6;
}
}
.hero-kicker {
margin: 0;
color: rgba(255, 255, 255, 0.68);
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
}
.hero-stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
min-width: 360px;
article {
display: grid;
gap: 6px;
padding: 18px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.08);
}
span {
color: rgba(255, 255, 255, 0.64);
font-size: 12px;
}
strong {
color: #ffffff;
font-size: 22px;
line-height: 1.15;
}
}
.toolbar-shell,
.empty-shell {
border-radius: 24px;
background: #ffffff;
box-shadow: var(--xboard-shadow);
}
.toolbar-shell {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 20px 22px;
}
.toolbar-main,
.toolbar-actions {
display: flex;
align-items: center;
gap: 14px;
}
.toolbar-main {
flex: 1;
}
.toolbar-search {
max-width: 360px;
}
.plugin-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tab-button {
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 999px;
background: #f5f5f7;
color: var(--xboard-text-secondary);
padding: 10px 16px;
cursor: pointer;
transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
&.active {
color: #0071e3;
border-color: rgba(0, 113, 227, 0.22);
background: rgba(0, 113, 227, 0.08);
}
}
.status-select {
width: 168px;
}
.page-alert {
margin-bottom: -6px;
}
.plugin-grid {
display: grid;
gap: 18px;
}
.plugin-grid--loading {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.plugin-card--skeleton {
border-radius: 24px;
background: #ffffff;
box-shadow: var(--xboard-shadow);
min-height: 240px;
padding: 24px;
}
.empty-shell {
display: grid;
justify-items: center;
gap: 14px;
padding: 32px 24px;
}
@media (max-width: 1180px) {
.plugins-hero,
.toolbar-shell {
flex-direction: column;
}
.hero-stats {
min-width: 0;
}
.toolbar-main,
.toolbar-actions {
flex-wrap: wrap;
}
}
@media (max-width: 767px) {
.hero-stats,
.plugin-grid--loading {
grid-template-columns: 1fr;
}
.toolbar-search,
.status-select {
width: 100%;
max-width: none;
}
}
admin-frontend/src/views/system/PluginManagementView.vue
+367
View File
@@ -0,0 +1,367 @@
<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { UploadRequestOptions } from 'element-plus'
import { RefreshRight, Search, UploadFilled } from '@element-plus/icons-vue'
import {
disablePlugin,
enablePlugin,
getPluginConfig,
getPlugins,
getPluginTypes,
installPlugin,
savePluginConfig,
uninstallPlugin,
upgradePlugin,
uploadPluginPackage,
} from '@/api/admin'
import type {
AdminPluginConfigField,
AdminPluginItem,
AdminPluginTypeItem,
} from '@/types/api'
import PluginCard from './PluginCard.vue'
import PluginDetailDrawer from './PluginDetailDrawer.vue'
import {
buildPluginTabs,
countEnabledPlugins,
countUpgradeablePlugins,
countUserPlugins,
filterPlugins,
hasPluginConfig,
type PluginStatusFilter,
type PluginTabValue,
PLUGIN_STATUS_FILTER_OPTIONS,
} from '@/utils/plugins'
type PluginAction = 'install' | 'enable' | 'disable' | 'upgrade' | 'uninstall'
type UploadError = Parameters<UploadRequestOptions['onError']>[0]
const loading = ref(true)
const reloading = ref(false)
const uploadLoading = ref(false)
const errorMessage = ref('')
const keyword = ref('')
const typeFilter = ref<PluginTabValue>('all')
const statusFilter = ref<PluginStatusFilter>('all')
const pluginTypes = ref<AdminPluginTypeItem[]>([])
const plugins = ref<AdminPluginItem[]>([])
const actionLoadingMap = ref<Record<string, boolean>>({})
const drawerVisible = ref(false)
const drawerLoading = ref(false)
const drawerSaving = ref(false)
const activePlugin = ref<AdminPluginItem | null>(null)
const tabs = computed(() => buildPluginTabs(pluginTypes.value))
const filteredPlugins = computed(() => filterPlugins(plugins.value, keyword.value, statusFilter.value))
const heroStats = computed(() => [
{ label: '插件总数', value: String(plugins.value.length) },
{ label: '已启用', value: String(countEnabledPlugins(plugins.value)) },
{ label: '可升级', value: String(countUpgradeablePlugins(plugins.value)) },
{ label: '用户上传', value: String(countUserPlugins(plugins.value)) },
])
function getActionKey(code: string, action: PluginAction): string {
return `${code}:${action}`
}
async function loadPluginTypes() {
const response = await getPluginTypes()
pluginTypes.value = response.data ?? []
}
async function syncActivePlugin(code?: string, refreshConfig = false) {
const targetCode = code ?? activePlugin.value?.code
if (!targetCode) return
const latest = plugins.value.find((item) => item.code === targetCode)
if (!latest) {
activePlugin.value = null
drawerVisible.value = false
return
}
if (refreshConfig && latest.is_installed && hasPluginConfig(latest)) {
const configResponse = await getPluginConfig(latest.code)
activePlugin.value = {
...latest,
config: configResponse.data as Record<string, AdminPluginConfigField>,
}
return
}
activePlugin.value = latest
}
async function loadPlugins(mode: 'initial' | 'reload' = 'initial') {
if (mode === 'initial') {
loading.value = true
} else {
reloading.value = true
}
errorMessage.value = ''
try {
const response = await getPlugins(typeFilter.value === 'all' ? {} : { type: typeFilter.value })
plugins.value = response.data ?? []
await syncActivePlugin(undefined, drawerVisible.value && Boolean(activePlugin.value?.is_installed))
} catch (error) {
errorMessage.value = error instanceof Error ? error.message : '插件列表加载失败'
} finally {
loading.value = false
reloading.value = false
}
}
async function bootstrapPage() {
try {
await loadPluginTypes()
} catch (error) {
ElMessage.warning(error instanceof Error ? error.message : '插件类型加载失败，将回退到默认文案')
}
await loadPlugins()
}
async function openDetail(plugin: AdminPluginItem) {
drawerVisible.value = true
drawerLoading.value = true
activePlugin.value = plugin
try {
if (plugin.is_installed && hasPluginConfig(plugin)) {
const response = await getPluginConfig(plugin.code)
activePlugin.value = {
...plugin,
config: response.data as Record<string, AdminPluginConfigField>,
}
return
}
activePlugin.value = plugin
} catch (error) {
activePlugin.value = plugin
ElMessage.warning(error instanceof Error ? error.message : '插件配置读取失败，已展示列表快照')
} finally {
drawerLoading.value = false
}
}
async function runPluginAction(plugin: AdminPluginItem, action: PluginAction) {
const key = getActionKey(plugin.code, action)
actionLoadingMap.value[key] = true
try {
if (action === 'install') {
await installPlugin(plugin.code)
ElMessage.success(`已安装 ${plugin.name}`)
}
if (action === 'enable') {
await enablePlugin(plugin.code)
ElMessage.success(`已启用 ${plugin.name}`)
}
if (action === 'disable') {
await disablePlugin(plugin.code)
ElMessage.success(`已禁用 ${plugin.name}`)
}
if (action === 'upgrade') {
await upgradePlugin(plugin.code)
ElMessage.success(`已升级 ${plugin.name}`)
}
if (action === 'uninstall') {
await ElMessageBox.confirm(`卸载插件「${plugin.name}」后，将移除其当前安装状态。确认继续吗？`, '卸载插件', {
type: 'warning',
})
await uninstallPlugin(plugin.code)
ElMessage.success(`已卸载 ${plugin.name}`)
}
await loadPlugins('reload')
await syncActivePlugin(plugin.code, drawerVisible.value)
} catch (error) {
if (error === 'cancel' || error === 'close') {
return
}
ElMessage.error(error instanceof Error ? error.message : '插件操作失败')
} finally {
actionLoadingMap.value[key] = false
}
}
async function handleSaveConfig(payload: Record<string, unknown>) {
if (!activePlugin.value) return
drawerSaving.value = true
try {
await savePluginConfig(activePlugin.value.code, payload)
ElMessage.success('插件配置已保存')
await loadPlugins('reload')
await syncActivePlugin(activePlugin.value.code, true)
} catch (error) {
ElMessage.error(error instanceof Error ? error.message : '插件配置保存失败')
} finally {
drawerSaving.value = false
}
}
async function handleUploadRequest(options: UploadRequestOptions) {
uploadLoading.value = true
try {
await uploadPluginPackage(options.file as File)
options.onSuccess?.({ success: true })
ElMessage.success('插件上传成功')
typeFilter.value = 'all'
await loadPlugins('reload')
} catch (error) {
const message = error instanceof Error ? error.message : '插件上传失败'
options.onError?.(Object.assign(new Error(message), {
status: 500,
method: 'POST',
url: '/plugin/upload',
}) as UploadError)
ElMessage.error(message)
} finally {
uploadLoading.value = false
}
}
watch(typeFilter, () => {
void loadPlugins('reload')
})
onMounted(() => {
void bootstrapPage()
})
</script>
<template>
<div class="plugins-page">
<section class="plugins-hero">
<div class="hero-copy">
<p class="hero-kicker">System Management</p>
<h1>插件管理。</h1>
<span>
在同一个工作台里查看插件状态、执行安装 / 启停 / 升级动作，并补齐 README 与动态配置编辑。
</span>
</div>
<div class="hero-stats">
<article v-for="item in heroStats" :key="item.label">
<span>{{ item.label }}</span>
<strong>{{ item.value }}</strong>
</article>
</div>
</section>
<section class="toolbar-shell">
<div class="toolbar-main">
<ElInput
v-model="keyword"
class="toolbar-search"
clearable
placeholder="搜索插件名称、代号或描述..."
>
<template #prefix>
<ElIcon><Search /></ElIcon>
</template>
</ElInput>
<div class="plugin-tabs">
<button
v-for="item in tabs"
:key="item.value"
type="button"
class="tab-button"
:class="{ active: item.value === typeFilter }"
@click="typeFilter = item.value"
>
{{ item.label }}
</button>
</div>
</div>
<div class="toolbar-actions">
<ElButton :loading="reloading" @click="loadPlugins('reload')">
<ElIcon><RefreshRight /></ElIcon>
刷新列表
</ElButton>
<ElSelect v-model="statusFilter" class="status-select">
<ElOption
v-for="item in PLUGIN_STATUS_FILTER_OPTIONS"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</ElSelect>
<ElUpload
:show-file-list="false"
accept=".zip,application/zip"
:http-request="handleUploadRequest"
>
<ElButton type="primary" :loading="uploadLoading">
<ElIcon><UploadFilled /></ElIcon>
上传插件
</ElButton>
</ElUpload>
</div>
</section>
<ElAlert
v-if="errorMessage"
type="error"
show-icon
:closable="false"
:title="errorMessage"
class="page-alert"
>
<template #default>
<ElButton size="small" @click="loadPlugins('reload')">重新加载</ElButton>
</template>
</ElAlert>
<section v-if="loading" class="plugin-grid plugin-grid--loading">
<article v-for="index in 3" :key="index" class="plugin-card plugin-card--skeleton">
<ElSkeleton animated :rows="5" />
</article>
</section>
<section v-else-if="filteredPlugins.length" class="plugin-grid">
<PluginCard
v-for="plugin in filteredPlugins"
:key="plugin.code"
:plugin="plugin"
:type-labels="pluginTypes"
:action-loading-map="actionLoadingMap"
@detail="openDetail"
@action="runPluginAction($event.plugin, $event.action)"
/>
</section>
<section v-else class="empty-shell">
<ElEmpty description="当前筛选条件下暂无插件" />
<ElButton @click="statusFilter = 'all'">重置状态筛选</ElButton>
</section>
<PluginDetailDrawer
v-model:visible="drawerVisible"
:plugin="activePlugin"
:loading="drawerLoading"
:saving="drawerSaving"
:type-labels="pluginTypes"
@save-config="handleSaveConfig"
/>
</div>
</template>
<style scoped lang="scss" src="./PluginManagementView.scss"></style>
admin-frontend/src/views/system/SystemKnowledgeView.scss
Vendored
+203
View File
@@ -0,0 +1,203 @@
.knowledge-page {
display: grid;
gap: 24px;
}
.knowledge-hero {
display: flex;
justify-content: space-between;
gap: 24px;
padding: 32px;
border-radius: 28px;
background: #ffffff;
box-shadow: var(--xboard-shadow);
}
.knowledge-copy {
display: grid;
gap: 10px;
max-width: 640px;
}
.knowledge-kicker {
color: var(--xboard-text-muted);
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
}
.knowledge-copy h1 {
font-size: clamp(34px, 5vw, 52px);
line-height: 1.08;
letter-spacing: -0.28px;
color: var(--xboard-text-strong);
}
.knowledge-copy span {
color: var(--xboard-text-secondary);
line-height: 1.6;
}
.hero-stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 160px));
gap: 12px;
}
.hero-stats article {
display: grid;
gap: 6px;
padding: 18px;
border-radius: 18px;
background: #fbfbfd;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.hero-stats span {
color: var(--xboard-text-muted);
font-size: 12px;
}
.hero-stats strong {
color: var(--xboard-text-strong);
font-size: 20px;
line-height: 1.2;
}
.table-shell {
display: grid;
gap: 18px;
padding: 24px;
border-radius: 26px;
background: #ffffff;
box-shadow: var(--xboard-shadow);
}
.table-toolbar,
.toolbar-left,
.toolbar-right,
.table-footer,
.action-group,
.sort-item,
.sort-item__main,
.sort-actions,
.sort-footer {
display: flex;
align-items: center;
gap: 12px;
}
.table-toolbar,
.table-footer,
.sort-footer {
justify-content: space-between;
}
.toolbar-left {
flex-wrap: wrap;
}
.toolbar-right {
justify-content: flex-end;
flex-wrap: wrap;
}
.toolbar-search {
width: min(320px, 100%);
}
.toolbar-filter {
width: 172px;
}
.table-alert {
margin-bottom: 2px;
}
.knowledge-table :deep(th.el-table__cell) {
color: var(--xboard-text-secondary);
background: #fbfbfd;
}
.knowledge-table :deep(.el-table__row td.el-table__cell) {
padding-top: 16px;
padding-bottom: 16px;
}
.title-cell,
.sort-shell,
.sort-list,
.sort-meta {
display: grid;
gap: 6px;
}
.title-cell strong,
.sort-meta strong {
color: var(--xboard-text-strong);
}
.title-cell span,
.table-footer span,
.sort-copy,
.sort-meta span {
color: var(--xboard-text-muted);
}
.action-btn {
font-size: 18px;
}
.danger-btn {
color: var(--xboard-danger);
}
.sort-copy {
line-height: 1.47;
}
.sort-item {
justify-content: space-between;
padding: 14px 16px;
border-radius: 16px;
background: #fbfbfd;
}
.sort-index {
width: 32px;
height: 32px;
border-radius: 999px;
display: grid;
place-items: center;
background: rgba(0, 113, 227, 0.08);
color: #0071e3;
font-weight: 600;
}
@media (max-width: 1080px) {
.knowledge-hero,
.table-toolbar,
.table-footer,
.sort-item,
.sort-item__main,
.sort-actions,
.sort-footer {
flex-direction: column;
align-items: stretch;
}
.hero-stats {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.table-shell,
.knowledge-hero {
padding: 22px;
}
.toolbar-filter {
width: 100%;
}
}
admin-frontend/src/views/system/SystemKnowledgeView.vue
+7
View File
@@ -0,0 +1,7 @@
<script setup lang="ts">
import SystemPlaceholderView from './SystemPlaceholderView.vue'
</script>
<template>
<SystemPlaceholderView />
</template>
admin-frontend/src/views/system/SystemNoticeEditorDialog.scss
Vendored
+190
View File
@@ -0,0 +1,190 @@
.dialog-shell,
.dialog-form {
display: grid;
gap: 20px;
}
.dialog-copy {
display: grid;
gap: 4px;
}
.dialog-copy p {
margin: 0;
font-size: 12px;
color: var(--xboard-text-muted);
letter-spacing: 0.18em;
text-transform: uppercase;
}
.dialog-copy h2 {
margin: 0;
font-size: 30px;
line-height: 1.08;
color: var(--xboard-text-strong);
}
.dialog-copy span {
color: var(--xboard-text-secondary);
line-height: 1.47;
}
.dialog-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 16px;
}
.is-full {
grid-column: 1 / -1;
}
.editor-panel {
display: grid;
gap: 14px;
padding: 18px;
border-radius: 20px;
border: 1px dashed rgba(0, 0, 0, 0.08);
background: #fbfbfd;
}
.section-header {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: flex-start;
}
.section-header h3 {
margin: 0;
font-size: 18px;
color: var(--xboard-text-strong);
}
.section-header span {
color: var(--xboard-text-muted);
line-height: 1.47;
}
.section-actions,
.dialog-footer {
display: flex;
align-items: center;
gap: 12px;
}
.editor-toolbar {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.editor-toolbar button {
min-width: 40px;
height: 34px;
border-radius: 10px;
border: 1px solid rgba(0, 0, 0, 0.08);
background: #ffffff;
color: var(--xboard-text-secondary);
cursor: pointer;
transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.editor-toolbar button:hover {
color: #0071e3;
border-color: rgba(0, 113, 227, 0.24);
transform: translateY(-1px);
}
.editor-field :deep(.el-form-item__content) {
display: block;
}
.content-editor,
.content-preview {
min-height: 260px;
border-radius: 16px;
border: 1px solid rgba(0, 0, 0, 0.08);
background: #ffffff;
}
.content-editor {
width: 100%;
padding: 16px;
resize: vertical;
outline: none;
color: var(--xboard-text-strong);
font: inherit;
line-height: 1.6;
}
.content-preview {
padding: 18px;
overflow: auto;
color: var(--xboard-text-secondary);
}
.markdown-body :deep(p),
.markdown-body :deep(ul),
.markdown-body :deep(ol),
.markdown-body :deep(blockquote) {
margin-bottom: 12px;
}
.tag-input-shell,
.switch-panel {
display: grid;
gap: 12px;
}
.tag-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.switch-panel {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.switch-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px;
border-radius: 18px;
background: #fbfbfd;
border: 1px solid rgba(0, 0, 0, 0.06);
}
.switch-card strong {
display: block;
color: var(--xboard-text-strong);
}
.switch-card span {
display: block;
margin-top: 6px;
color: var(--xboard-text-muted);
line-height: 1.47;
}
.dialog-footer {
justify-content: flex-end;
width: 100%;
}
@media (max-width: 767px) {
.dialog-grid,
.switch-panel,
.section-header {
grid-template-columns: 1fr;
flex-direction: column;
}
.section-actions,
.dialog-footer {
justify-content: flex-end;
}
}
admin-frontend/src/views/system/SystemNoticeEditorDialog.vue
+281
View File
@@ -0,0 +1,281 @@
<script setup lang="ts">
import { computed, nextTick, reactive, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { saveNotice } from '@/api/admin'
import type { AdminNoticeItem } from '@/types/api'
import {
createEmptyNoticeForm,
normalizeNoticeTag,
renderNoticeContent,
toNoticeFormModel,
toNoticeSavePayload,
type NoticeFormModel,
} from '@/utils/notices'
const props = defineProps<{
visible: boolean
mode: 'create' | 'edit'
notice?: AdminNoticeItem | null
}>()
const emit = defineEmits<{
'update:visible': [value: boolean]
success: [message: string]
}>()
const formRef = ref<FormInstance>()
const submitting = ref(false)
const previewVisible = ref(false)
const tagInput = ref('')
const contentEditorRef = ref<HTMLTextAreaElement | null>(null)
const form = reactive<NoticeFormModel>(createEmptyNoticeForm())
const dialogTitle = computed(() => props.mode === 'create' ? '添加公告' : '编辑公告')
const renderedContent = computed(() => renderNoticeContent(form.content))
function validateImageUrl(_rule: unknown, value: string, callback: (error?: Error) => void) {
if (!value.trim()) {
callback()
return
}
try {
const url = new URL(value)
if (!['http:', 'https:'].includes(url.protocol)) {
callback(new Error('公告背景必须使用 http 或 https 链接'))
return
}
callback()
} catch {
callback(new Error('公告背景链接格式不正确'))
}
}
const rules = computed<FormRules<NoticeFormModel>>(() => ({
title: [{ required: true, message: '请输入公告标题', trigger: 'blur' }],
content: [{ required: true, message: '请输入公告内容', trigger: 'blur' }],
imgUrl: [{ validator: validateImageUrl, trigger: 'blur' }],
}))
function closeDialog() {
emit('update:visible', false)
}
function syncForm() {
Object.assign(form, toNoticeFormModel(props.notice))
tagInput.value = ''
previewVisible.value = false
}
function handleTagConfirm() {
const nextTag = normalizeNoticeTag(tagInput.value)
if (!nextTag) {
tagInput.value = ''
return
}
if (!form.tags.includes(nextTag)) {
form.tags.push(nextTag)
}
tagInput.value = ''
}
function removeTag(tag: string) {
form.tags = form.tags.filter((item) => item !== tag)
}
function insertSnippet(prefix: string, suffix = '', placeholder = '内容') {
const textarea = contentEditorRef.value
if (!textarea) {
form.content = `${form.content}${prefix}${placeholder}${suffix}`
return
}
const start = textarea.selectionStart
const end = textarea.selectionEnd
const selected = form.content.slice(start, end) || placeholder
form.content = `${form.content.slice(0, start)}${prefix}${selected}${suffix}${form.content.slice(end)}`
nextTick(() => {
textarea.focus()
const cursor = start + prefix.length + selected.length + suffix.length
textarea.setSelectionRange(cursor, cursor)
})
}
async function handleSubmit() {
const instance = formRef.value
if (!instance) {
return
}
const valid = await instance.validate().catch(() => false)
if (!valid) {
return
}
submitting.value = true
try {
await saveNotice(toNoticeSavePayload(form))
const message = props.mode === 'create' ? '公告已创建' : '公告已更新'
ElMessage.success(message)
emit('success', message)
closeDialog()
} catch (error) {
ElMessage.error(error instanceof Error ? error.message : '公告保存失败')
} finally {
submitting.value = false
}
}
watch(
() => [props.visible, props.notice, props.mode],
([visible]) => {
if (!visible) {
return
}
syncForm()
nextTick(() => {
formRef.value?.clearValidate()
})
},
{ immediate: true },
)
</script>
<template>
<ElDialog
:model-value="props.visible"
:title="dialogTitle"
width="min(820px, calc(100vw - 32px))"
destroy-on-close
class="notice-editor-dialog"
@close="closeDialog"
@update:model-value="emit('update:visible', $event)"
>
<div class="dialog-shell">
<div class="dialog-copy">
<p>系统管理</p>
<h2>{{ dialogTitle }}</h2>
<span>发布或编辑系统公告，支持标题、内容、背景图、标签与显隐状态维护。</span>
</div>
<ElForm
ref="formRef"
:model="form"
:rules="rules"
label-position="top"
class="dialog-form"
>
<div class="dialog-grid">
<ElFormItem label="标题" prop="title" class="is-full">
<ElInput v-model="form.title" placeholder="请输入公告标题" maxlength="120" show-word-limit />
</ElFormItem>
</div>
<section class="editor-panel">
<header class="section-header">
<div>
<h3>公告内容</h3>
<span>支持 Markdown 与基础 HTML 换行，优先保证内容表达清晰。</span>
</div>
<div class="section-actions">
<ElButton @click="previewVisible = !previewVisible">
{{ previewVisible ? '继续编辑' : '预览公告' }}
</ElButton>
</div>
</header>
<div class="editor-toolbar">
<button type="button" @click="insertSnippet('**', '**', '加粗文本')">B</button>
<button type="button" @click="insertSnippet('*', '*', '斜体文本')">I</button>
<button type="button" @click="insertSnippet('<u>', '</u>', '下划线文本')">U</button>
<button type="button" @click="insertSnippet('- ', '', '列表项')">列表</button>
<button type="button" @click="insertSnippet('> ', '', '引用内容')">引用</button>
<button type="button" @click="insertSnippet('`', '`', '代码')">代码</button>
<button type="button" @click="insertSnippet('[', '](https://)', '链接文本')">链接</button>
<button type="button" @click="insertSnippet('<br>', '', '')">换行</button>
</div>
<ElFormItem prop="content" class="editor-field">
<div v-if="previewVisible" class="content-preview markdown-body" v-html="renderedContent" />
<textarea
v-else
ref="contentEditorRef"
v-model="form.content"
class="content-editor"
placeholder="请输入公告内容，支持 Markdown 或 <br> 换行"
/>
</ElFormItem>
</section>
<div class="dialog-grid">
<ElFormItem label="公告背景" prop="imgUrl" class="is-full">
<ElInput
v-model="form.imgUrl"
placeholder="https://example.com/cover.png"
clearable
/>
</ElFormItem>
<ElFormItem label="节点标签" class="is-full">
<div class="tag-input-shell">
<div v-if="form.tags.length" class="tag-list">
<ElTag
v-for="tag in form.tags"
:key="tag"
closable
effect="plain"
round
@close="removeTag(tag)"
>
{{ tag }}
</ElTag>
</div>
<ElInput
v-model="tagInput"
placeholder="输入后回车添加标签"
@keyup.enter.prevent="handleTagConfirm"
@blur="handleTagConfirm"
/>
</div>
</ElFormItem>
</div>
<section class="switch-panel">
<article class="switch-card">
<div>
<strong>显示</strong>
<span>关闭后公告仍保留，但不会在前台继续展示。</span>
</div>
<ElSwitch v-model="form.show" />
</article>
<article class="switch-card">
<div>
<strong>弹窗公告</strong>
<span>开启后公告会以弹窗优先展示，适合重要通知或紧急维护提示。</span>
</div>
<ElSwitch v-model="form.popup" />
</article>
</section>
</ElForm>
</div>
<template #footer>
<div class="dialog-footer">
<ElButton @click="closeDialog">取消</ElButton>
<ElButton type="primary" :loading="submitting" @click="handleSubmit">
{{ props.mode === 'create' ? '提交' : '保存修改' }}
</ElButton>
</div>
</template>
</ElDialog>
</template>
<style scoped lang="scss" src="./SystemNoticeEditorDialog.scss"></style>
admin-frontend/src/views/system/SystemNoticesView.scss
Vendored
+249
View File
@@ -0,0 +1,249 @@
.notices-page {
display: grid;
gap: 24px;
}
.notices-hero {
display: flex;
justify-content: space-between;
gap: 24px;
padding: 34px;
border-radius: 28px;
background: #000000;
}
.hero-copy {
display: grid;
gap: 12px;
max-width: 620px;
}
.hero-kicker {
margin: 0;
color: rgba(255, 255, 255, 0.68);
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
}
.hero-copy h1 {
margin: 0;
color: #ffffff;
font-size: clamp(34px, 5vw, 52px);
line-height: 1.08;
letter-spacing: -0.28px;
}
.hero-copy span {
color: rgba(255, 255, 255, 0.72);
line-height: 1.6;
}
.hero-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
min-width: 440px;
}
.hero-stats article {
display: grid;
gap: 6px;
padding: 18px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.08);
}
.hero-stats span {
color: rgba(255, 255, 255, 0.64);
font-size: 12px;
}
.hero-stats strong {
color: #ffffff;
font-size: 20px;
line-height: 1.2;
}
.table-shell {
display: grid;
gap: 18px;
padding: 22px 22px 18px;
border-radius: 24px;
background: #ffffff;
box-shadow: var(--xboard-shadow);
}
.table-toolbar,
.toolbar-left,
.table-footer,
.action-group,
.sort-actions,
.sort-footer {
display: flex;
align-items: center;
gap: 12px;
}
.table-toolbar,
.table-footer {
justify-content: space-between;
}
.toolbar-search {
width: min(280px, 100%);
}
.notices-table :deep(.el-table__cell) {
vertical-align: top;
}
.title-cell {
display: grid;
gap: 10px;
padding: 2px 0;
}
.title-main {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.title-main strong {
color: var(--xboard-text-strong);
font-size: 16px;
line-height: 1.35;
}
.title-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.title-cell span {
color: var(--xboard-text-secondary);
line-height: 1.6;
}
.title-cell small {
color: var(--xboard-text-muted);
}
.action-group {
justify-content: flex-end;
}
.action-btn {
width: 36px;
height: 36px;
padding: 0;
border-radius: 10px;
color: var(--xboard-text-secondary);
}
.action-btn:hover {
color: #0071e3;
background: rgba(0, 113, 227, 0.08);
}
.danger-btn:hover {
color: #d92d20;
background: rgba(217, 45, 32, 0.08);
}
.sort-shell {
display: grid;
gap: 16px;
}
.sort-copy {
margin: 0;
color: var(--xboard-text-secondary);
line-height: 1.6;
}
.sort-list {
display: grid;
gap: 12px;
}
.sort-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 18px;
border-radius: 18px;
background: #fbfbfd;
border: 1px solid rgba(0, 0, 0, 0.06);
}
.sort-item__main {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}
.sort-index {
width: 30px;
height: 30px;
display: grid;
place-items: center;
border-radius: 999px;
background: rgba(0, 113, 227, 0.08);
color: #0071e3;
font-size: 13px;
font-weight: 600;
}
.sort-meta {
display: grid;
gap: 4px;
}
.sort-meta strong {
color: var(--xboard-text-strong);
}
.sort-meta span {
color: var(--xboard-text-muted);
line-height: 1.5;
}
@media (max-width: 1180px) {
.notices-hero {
flex-direction: column;
}
.hero-stats {
min-width: 0;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.hero-stats {
grid-template-columns: 1fr;
}
.table-toolbar,
.toolbar-left,
.table-footer,
.sort-item,
.sort-actions {
flex-direction: column;
align-items: stretch;
}
.action-group {
justify-content: flex-start;
}
.sort-item__main {
align-items: flex-start;
}
}
admin-frontend/src/views/system/SystemNoticesView.vue
+327
View File
@@ -0,0 +1,327 @@
<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
ArrowDown,
ArrowUp,
Delete,
EditPen,
Plus,
Search,
} from '@element-plus/icons-vue'
import {
deleteNotice,
fetchNotices,
sortNotices,
toggleNoticeVisibility,
} from '@/api/admin'
import type { AdminNoticeItem } from '@/types/api'
import { formatDateTime } from '@/utils/dashboard'
import {
countEnabledNotices,
filterNotices,
moveNoticeOrder,
normalizeNoticeItem,
summarizeNoticeContent,
} from '@/utils/notices'
import SystemNoticeEditorDialog from './SystemNoticeEditorDialog.vue'
type EditorMode = 'create' | 'edit'
const loading = ref(false)
const sortSubmitting = ref(false)
const editorVisible = ref(false)
const editorMode = ref<EditorMode>('create')
const activeNotice = ref<AdminNoticeItem | null>(null)
const sortDialogVisible = ref(false)
const keyword = ref('')
const current = ref(1)
const pageSize = ref(50)
const notices = ref<AdminNoticeItem[]>([])
const sortDraft = ref<AdminNoticeItem[]>([])
const toggleLoadingMap = ref<Record<number, boolean>>({})
const filteredNotices = computed(() => filterNotices(notices.value, keyword.value))
const visibleNotices = computed(() => {
const start = (current.value - 1) * pageSize.value
return filteredNotices.value.slice(start, start + pageSize.value)
})
const heroStats = computed(() => [
{ label: '公告总数', value: String(notices.value.length) },
{ label: '显示中', value: String(countEnabledNotices(notices.value, 'show')) },
{ label: '弹窗公告', value: String(countEnabledNotices(notices.value, 'popup')) },
{ label: '带标签', value: String(notices.value.filter((notice) => notice.tags?.length).length) },
])
function isToggleLoading(id: number): boolean {
return Boolean(toggleLoadingMap.value[id])
}
async function loadData() {
loading.value = true
try {
const response = await fetchNotices()
notices.value = (response.data ?? []).map((notice) => normalizeNoticeItem(notice))
} finally {
loading.value = false
}
}
function openCreateDialog() {
editorMode.value = 'create'
activeNotice.value = null
editorVisible.value = true
}
function openEditDialog(notice: AdminNoticeItem) {
editorMode.value = 'edit'
activeNotice.value = notice
editorVisible.value = true
}
async function handleToggle(notice: AdminNoticeItem, nextValue: boolean | string | number) {
const normalizedNextValue = Boolean(nextValue)
if (Boolean(notice.show) === normalizedNextValue) {
return
}
toggleLoadingMap.value[notice.id] = true
try {
await toggleNoticeVisibility(notice.id)
notice.show = normalizedNextValue
ElMessage.success('公告显示状态已更新')
} catch (error) {
ElMessage.error(error instanceof Error ? error.message : '公告显示状态更新失败')
} finally {
toggleLoadingMap.value[notice.id] = false
}
}
async function handleDelete(notice: AdminNoticeItem) {
try {
await ElMessageBox.confirm(`删除公告「${notice.title}」后无法恢复，确认继续吗？`, '删除公告', {
type: 'warning',
})
await deleteNotice(notice.id)
ElMessage.success('公告已删除')
await loadData()
} catch (error) {
if (error === 'cancel' || error === 'close') {
return
}
ElMessage.error(error instanceof Error ? error.message : '公告删除失败')
}
}
function openSortEditor() {
sortDraft.value = notices.value.map((notice) => ({ ...notice }))
sortDialogVisible.value = true
}
function moveDraft(index: number, direction: -1 | 1) {
sortDraft.value = moveNoticeOrder(sortDraft.value, index, direction)
}
async function submitSort() {
sortSubmitting.value = true
try {
await sortNotices(sortDraft.value.map((item) => item.id))
ElMessage.success('公告排序已保存')
sortDialogVisible.value = false
await loadData()
} catch (error) {
ElMessage.error(error instanceof Error ? error.message : '公告排序保存失败')
} finally {
sortSubmitting.value = false
}
}
watch(keyword, () => {
current.value = 1
})
watch(filteredNotices, (list) => {
const maxPage = Math.max(1, Math.ceil(list.length / pageSize.value))
if (current.value > maxPage) {
current.value = maxPage
}
})
watch(pageSize, () => {
current.value = 1
})
onMounted(() => {
void loadData().catch((error) => {
ElMessage.error(error instanceof Error ? error.message : '公告管理页面初始化失败')
})
})
</script>
<template>
<div class="notices-page">
<section class="notices-hero">
<div class="hero-copy">
<p class="hero-kicker">System Management</p>
<h1>公告管理</h1>
<span>在这里可以配置公告，包括添加、删除、编辑、显隐切换与排序维护。</span>
</div>
<div class="hero-stats">
<article v-for="item in heroStats" :key="item.label">
<span>{{ item.label }}</span>
<strong>{{ item.value }}</strong>
</article>
</div>
</section>
<section class="table-shell">
<header class="table-toolbar">
<div class="toolbar-left">
<ElButton type="primary" @click="openCreateDialog">
<ElIcon><Plus /></ElIcon>
添加公告
</ElButton>
<ElInput
v-model="keyword"
clearable
placeholder="搜索公告标题..."
class="toolbar-search"
>
<template #prefix>
<ElIcon><Search /></ElIcon>
</template>
</ElInput>
</div>
<ElButton @click="openSortEditor">编辑排序</ElButton>
</header>
<ElTable
:data="visibleNotices"
v-loading="loading"
class="notices-table"
row-key="id"
empty-text="当前筛选条件下暂无公告"
>
<ElTableColumn prop="id" label="ID" width="88" />
<ElTableColumn label="显示状态" width="112">
<template #default="{ row }">
<ElSwitch
:model-value="Boolean(row.show)"
:loading="isToggleLoading(row.id)"
@change="handleToggle(row, $event)"
/>
</template>
</ElTableColumn>
<ElTableColumn label="标题" min-width="560">
<template #default="{ row }">
<div class="title-cell">
<div class="title-main">
<strong>{{ row.title }}</strong>
<div class="title-tags">
<ElTag v-if="row.popup" type="warning" effect="plain" round>
弹窗公告
</ElTag>
<ElTag
v-for="tag in row.tags ?? []"
:key="`${row.id}-${tag}`"
effect="plain"
round
>
{{ tag }}
</ElTag>
</div>
</div>
<span>{{ summarizeNoticeContent(row.content) }}</span>
<small>最近更新 {{ formatDateTime(row.updated_at) }}</small>
</div>
</template>
</ElTableColumn>
<ElTableColumn label="操作" width="110" fixed="right">
<template #default="{ row }">
<div class="action-group">
<ElButton text class="action-btn" @click="openEditDialog(row)">
<ElIcon><EditPen /></ElIcon>
</ElButton>
<ElButton text class="action-btn danger-btn" @click="handleDelete(row)">
<ElIcon><Delete /></ElIcon>
</ElButton>
</div>
</template>
</ElTableColumn>
</ElTable>
<footer class="table-footer">
<span>已选择 0 项，共 {{ filteredNotices.length }} 项</span>
<ElPagination
v-model:current-page="current"
v-model:page-size="pageSize"
:page-sizes="[10, 20, 50]"
layout="sizes, prev, pager, next"
:total="filteredNotices.length"
background
/>
</footer>
</section>
<SystemNoticeEditorDialog
v-model:visible="editorVisible"
:mode="editorMode"
:notice="activeNotice"
@success="() => loadData()"
/>
<ElDialog
v-model="sortDialogVisible"
width="min(640px, calc(100vw - 32px))"
title="编辑排序"
class="sort-dialog"
>
<div class="sort-shell">
<p class="sort-copy">按照当前展示顺序调整公告排序，保存后会同步到后台 `/notice/sort`。</p>
<div class="sort-list">
<article
v-for="(item, index) in sortDraft"
:key="item.id"
class="sort-item"
>
<div class="sort-item__main">
<span class="sort-index">{{ index + 1 }}</span>
<div class="sort-meta">
<strong>{{ item.title }}</strong>
<span>{{ summarizeNoticeContent(item.content, 56) }}</span>
</div>
</div>
<div class="sort-actions">
<ElButton :disabled="index === 0" @click="moveDraft(index, -1)">
<ElIcon><ArrowUp /></ElIcon>
上移
</ElButton>
<ElButton :disabled="index === sortDraft.length - 1" @click="moveDraft(index, 1)">
<ElIcon><ArrowDown /></ElIcon>
下移
</ElButton>
</div>
</article>
</div>
</div>
<template #footer>
<div class="sort-footer">
<ElButton @click="sortDialogVisible = false">取消</ElButton>
<ElButton type="primary" :loading="sortSubmitting" @click="submitSort">
保存排序
</ElButton>
</div>
</template>
</ElDialog>
</div>
</template>
<style scoped lang="scss" src="./SystemNoticesView.scss"></style>
admin-frontend/src/views/system/SystemPaymentEditorDrawer.scss
Vendored
+119
View File
@@ -0,0 +1,119 @@
.drawer-shell,
.drawer-form,
.config-panel,
.config-empty,
.drawer-copy {
display: grid;
gap: 20px;
}
.drawer-copy {
gap: 4px;
}
.drawer-copy p {
font-size: 12px;
color: var(--xboard-text-muted);
letter-spacing: 0.18em;
text-transform: uppercase;
}
.drawer-copy h2 {
font-size: 30px;
line-height: 1.08;
color: var(--xboard-text-strong);
}
.drawer-copy span,
.field-helper,
.config-empty span {
color: var(--xboard-text-secondary);
line-height: 1.47;
}
.field-helper {
margin-top: 6px;
font-size: 12px;
}
.drawer-grid,
.config-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 16px;
}
.full-width {
width: 100%;
}
.section-header,
.drawer-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.section-header h3,
.config-empty strong {
color: var(--xboard-text-strong);
}
.section-header h3 {
font-size: 18px;
}
.config-panel {
padding: 18px;
border-radius: 20px;
border: 1px dashed rgba(0, 0, 0, 0.08);
background: #fbfbfd;
}
.config-field.is-full {
grid-column: 1 / -1;
}
.config-empty {
padding: 18px;
border-radius: 16px;
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.06);
}
.icon-preview {
margin-top: 10px;
display: inline-flex;
align-items: center;
gap: 10px;
width: fit-content;
padding: 8px 10px;
border-radius: 999px;
background: #f5f5f7;
}
.icon-preview img {
width: 28px;
height: 28px;
border-radius: 10px;
object-fit: cover;
}
.icon-preview span {
color: var(--xboard-text-muted);
font-size: 12px;
}
@media (max-width: 767px) {
.drawer-grid,
.config-grid {
grid-template-columns: 1fr;
}
.section-header,
.drawer-footer {
flex-direction: column;
align-items: stretch;
}
}
admin-frontend/src/views/system/SystemPaymentEditorDrawer.vue
+368
View File
@@ -0,0 +1,368 @@
<script setup lang="ts">
import { computed, nextTick, reactive, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { getPaymentForm, savePayment } from '@/api/admin'
import type {
AdminPaymentConfigFields,
AdminPaymentListItem,
} from '@/types/api'
import {
createEmptyPaymentForm,
extractPaymentConfigValues,
normalizePaymentConfigFields,
toPaymentFormModel,
toPaymentSavePayload,
type PaymentFormModel,
} from '@/utils/payments'
const props = defineProps<{
visible: boolean
mode: 'create' | 'edit'
payment?: AdminPaymentListItem | null
paymentMethods: string[]
}>()
const emit = defineEmits<{
'update:visible': [value: boolean]
success: [message: string]
}>()
const formRef = ref<FormInstance>()
const submitting = ref(false)
const configLoading = ref(false)
const hydrating = ref(false)
const currentFields = ref<AdminPaymentConfigFields>({})
const initialPaymentMethod = ref('')
const form = reactive<PaymentFormModel>(createEmptyPaymentForm())
const drawerTitle = computed(() => props.mode === 'create' ? '添加支付方式' : '编辑支付方式')
const configEntries = computed(() => Object.entries(currentFields.value))
const iconPreview = computed(() => form.icon.trim())
const rules = computed<FormRules<PaymentFormModel>>(() => ({
name: [{ required: true, message: '请输入显示名称', trigger: 'blur' }],
payment: [{ required: true, message: '请选择支付接口', trigger: 'change' }],
notifyDomain: [
{
validator: (_rule, value, callback) => {
const normalized = String(value || '').trim()
if (!normalized) {
callback()
return
}
try {
const target = new URL(normalized)
if (!/^https?:$/.test(target.protocol)) {
callback(new Error('通知域名仅支持 http 或 https'))
return
}
callback()
} catch {
callback(new Error('请输入有效的通知域名'))
}
},
trigger: 'blur',
},
],
handlingFeePercent: [
{
validator: (_rule, value, callback) => {
if (value === null || value === undefined || value === '') {
callback()
return
}
const numeric = Number(value)
if (!Number.isFinite(numeric) || numeric < 0 || numeric > 100) {
callback(new Error('百分比手续费需在 0-100 之间'))
return
}
callback()
},
trigger: 'blur',
},
],
handlingFeeFixed: [
{
validator: (_rule, value, callback) => {
if (value === null || value === undefined || value === '') {
callback()
return
}
const numeric = Number(value)
if (!Number.isFinite(numeric) || numeric < 0 || !Number.isInteger(numeric)) {
callback(new Error('固定手续费需为大于等于 0 的整数'))
return
}
callback()
},
trigger: 'blur',
},
],
}))
function closeDrawer() {
emit('update:visible', false)
}
async function loadDynamicConfig(method: string, paymentId?: number) {
if (!method) {
currentFields.value = {}
form.config = {}
return
}
configLoading.value = true
try {
const response = await getPaymentForm({
payment: method,
...(paymentId ? { id: paymentId } : {}),
})
const normalizedFields = normalizePaymentConfigFields(response.data)
currentFields.value = normalizedFields
form.config = extractPaymentConfigValues(normalizedFields)
} catch (error) {
currentFields.value = {}
form.config = {}
ElMessage.error(error instanceof Error ? error.message : '支付接口配置加载失败')
} finally {
configLoading.value = false
}
}
async function initializeForm() {
hydrating.value = true
Object.assign(form, createEmptyPaymentForm())
Object.assign(form, toPaymentFormModel(props.payment))
initialPaymentMethod.value = props.payment?.payment || form.payment
await loadDynamicConfig(form.payment, props.payment?.id)
await nextTick()
formRef.value?.clearValidate()
hydrating.value = false
}
function updateConfigValue(key: string, value: string) {
form.config = {
...form.config,
[key]: value,
}
}
async function reloadCurrentConfig() {
if (!form.payment) {
return
}
const paymentId = props.mode === 'edit' && form.payment === initialPaymentMethod.value
? props.payment?.id
: undefined
await loadDynamicConfig(form.payment, paymentId)
}
async function handleSubmit() {
const instance = formRef.value
if (!instance) {
return
}
const valid = await instance.validate().catch(() => false)
if (!valid) {
return
}
if (configLoading.value) {
ElMessage.warning('支付接口配置仍在加载，请稍后再试')
return
}
if (!configEntries.value.length) {
ElMessage.error('当前支付接口配置未加载成功，请重新选择支付接口')
return
}
submitting.value = true
try {
await savePayment(toPaymentSavePayload(form, currentFields.value))
const message = props.mode === 'create' ? '支付方式已创建' : '支付方式已更新'
ElMessage.success(message)
emit('success', message)
closeDrawer()
} catch (error) {
ElMessage.error(error instanceof Error ? error.message : '支付方式保存失败')
} finally {
submitting.value = false
}
}
watch(
() => props.visible,
(visible) => {
if (!visible) {
return
}
void initializeForm()
},
)
watch(
() => form.payment,
(nextValue, previousValue) => {
if (!props.visible || hydrating.value || !nextValue || nextValue === previousValue) {
return
}
const paymentId = props.mode === 'edit' && nextValue === initialPaymentMethod.value
? props.payment?.id
: undefined
void loadDynamicConfig(nextValue, paymentId)
},
)
</script>
<template>
<ElDrawer
:model-value="props.visible"
:title="drawerTitle"
size="min(560px, 100vw)"
destroy-on-close
class="payment-editor-drawer"
@close="closeDrawer"
@update:model-value="emit('update:visible', $event)"
>
<div class="drawer-shell">
<div class="drawer-copy">
<p>支付配置</p>
<h2>{{ drawerTitle }}</h2>
<span>根据当前 Laravel `/payment/*` 接口维护支付方式与网关参数。</span>
</div>
<ElForm
ref="formRef"
:model="form"
:rules="rules"
label-position="top"
class="drawer-form"
>
<div class="drawer-grid">
<ElFormItem label="显示名称" prop="name">
<ElInput v-model="form.name" placeholder="请输入支付方式显示名称" />
</ElFormItem>
<ElFormItem label="图标URL">
<ElInput v-model="form.icon" placeholder="https://cdn.example.com/payment.png" />
<div v-if="iconPreview" class="icon-preview">
<img :src="iconPreview" alt="支付图标预览" />
<span>图标预览</span>
</div>
</ElFormItem>
<ElFormItem label="通知域名" prop="notifyDomain">
<ElInput v-model="form.notifyDomain" placeholder="https://pay.example.com" />
<p class="field-helper">仅填写通知域名与协议，实际回调路径会由后端自动拼接。</p>
</ElFormItem>
<ElFormItem label="百分比手续费 (%)" prop="handlingFeePercent">
<ElInputNumber
v-model="form.handlingFeePercent"
:min="0"
:max="100"
:precision="2"
:controls="false"
class="full-width"
placeholder="0-100"
/>
</ElFormItem>
<ElFormItem label="固定手续费" prop="handlingFeeFixed">
<ElInputNumber
v-model="form.handlingFeeFixed"
:min="0"
:precision="0"
:controls="false"
class="full-width"
placeholder="请输入固定手续费"
/>
</ElFormItem>
<ElFormItem label="支付接口" prop="payment">
<ElSelect v-model="form.payment" placeholder="请选择支付接口">
<ElOption
v-for="method in props.paymentMethods"
:key="method"
:label="method"
:value="method"
/>
</ElSelect>
</ElFormItem>
</div>
<section class="config-panel" v-loading="configLoading">
<header class="section-header">
<div>
<h3>支付配置</h3>
<span>根据当前支付接口动态加载配置字段，保持与后端插件表单契约一致。</span>
</div>
<ElButton :disabled="!form.payment" @click="reloadCurrentConfig">
重新拉取配置
</ElButton>
</header>
<div v-if="!form.payment" class="config-empty">
<strong>请选择支付接口</strong>
<span>选择接口后会在这里加载对应的支付网关配置字段。</span>
</div>
<div v-else-if="configEntries.length" class="config-grid">
<div
v-for="[key, field] in configEntries"
:key="key"
class="config-field"
:class="{ 'is-full': field.type === 'text' }"
>
<ElFormItem :label="field.label">
<ElInput
v-if="field.type !== 'text'"
:model-value="form.config[key]"
:placeholder="field.placeholder || `请输入${field.label}`"
@update:model-value="updateConfigValue(key, String($event || ''))"
/>
<ElInput
v-else
:model-value="form.config[key]"
type="textarea"
:rows="4"
:placeholder="field.placeholder || `请输入${field.label}`"
@update:model-value="updateConfigValue(key, String($event || ''))"
/>
<p v-if="field.description" class="field-helper">
{{ field.description }}
</p>
</ElFormItem>
</div>
</div>
<div v-else class="config-empty">
<strong>当前接口未返回配置字段</strong>
<span>请确认该支付插件已启用，或点击“重新拉取配置”重试。</span>
</div>
</section>
</ElForm>
</div>
<template #footer>
<div class="drawer-footer">
<ElButton @click="closeDrawer">取消</ElButton>
<ElButton type="primary" :loading="submitting" @click="handleSubmit">
{{ props.mode === 'create' ? '提交' : '保存修改' }}
</ElButton>
</div>
</template>
</ElDrawer>
</template>
<style scoped lang="scss" src="./SystemPaymentEditorDrawer.scss"></style>
admin-frontend/src/views/system/SystemPaymentsView.scss
Vendored
+224
View File
@@ -0,0 +1,224 @@
.payments-page {
display: grid;
gap: 24px;
}
.payments-hero {
display: flex;
justify-content: space-between;
gap: 24px;
padding: 30px 32px;
border-radius: 28px;
background: #000000;
}
.payments-copy {
display: grid;
gap: 10px;
max-width: 620px;
}
.payments-kicker {
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.68);
}
.payments-copy h1 {
font-size: clamp(34px, 5vw, 52px);
line-height: 1.08;
letter-spacing: -0.28px;
color: #ffffff;
}
.payments-copy span {
color: rgba(255, 255, 255, 0.72);
line-height: 1.47;
}
.hero-stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
min-width: 320px;
}
.hero-stats article {
display: grid;
gap: 6px;
padding: 18px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.08);
}
.hero-stats span {
color: rgba(255, 255, 255, 0.64);
font-size: 12px;
}
.hero-stats strong {
color: #ffffff;
font-size: 22px;
}
.table-shell {
display: grid;
gap: 18px;
padding: 24px;
border-radius: 26px;
background: #ffffff;
box-shadow: var(--xboard-shadow);
}
.table-toolbar,
.toolbar-left,
.table-footer,
.action-group,
.sort-item,
.sort-item__main,
.sort-actions,
.sort-footer,
.name-main {
display: flex;
align-items: center;
gap: 12px;
}
.table-toolbar,
.table-footer {
justify-content: space-between;
}
.toolbar-left {
flex-wrap: wrap;
}
.toolbar-search {
width: min(320px, 100%);
}
.payments-table :deep(th.el-table__cell) {
color: var(--xboard-text-secondary);
background: #fbfbfd;
}
.payments-table :deep(.el-table__row td.el-table__cell) {
padding-top: 16px;
padding-bottom: 16px;
}
.name-cell,
.notify-cell,
.gateway-cell,
.sort-shell,
.sort-list,
.sort-meta,
.name-copy {
display: grid;
gap: 8px;
}
.name-copy strong,
.sort-meta strong,
.gateway-cell strong {
color: var(--xboard-text-strong);
}
.name-copy span,
.table-footer span,
.notify-cell span,
.sort-copy,
.sort-meta span,
.gateway-cell span {
color: var(--xboard-text-muted);
}
.icon-preview,
.icon-fallback {
width: 40px;
height: 40px;
flex: 0 0 auto;
border-radius: 14px;
overflow: hidden;
background: #f5f5f7;
}
.icon-preview img {
width: 100%;
height: 100%;
object-fit: cover;
}
.icon-fallback {
display: grid;
place-items: center;
color: #0071e3;
font-weight: 600;
}
.notify-cell code {
display: inline-flex;
width: fit-content;
max-width: 100%;
padding: 8px 12px;
border-radius: 999px;
background: #f5f5f7;
color: var(--xboard-text-secondary);
font-family: var(--xboard-font-mono);
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.action-btn {
font-size: 18px;
}
.danger-btn {
color: var(--xboard-danger);
}
.sort-copy {
line-height: 1.47;
}
.sort-item {
justify-content: space-between;
padding: 14px 16px;
border-radius: 16px;
background: #fbfbfd;
}
.sort-index {
width: 32px;
height: 32px;
border-radius: 999px;
display: grid;
place-items: center;
background: rgba(0, 113, 227, 0.08);
color: #0071e3;
font-weight: 600;
}
@media (max-width: 1080px) {
.payments-hero,
.table-toolbar,
.table-footer,
.sort-item,
.sort-item__main,
.sort-actions {
flex-direction: column;
align-items: stretch;
}
.hero-stats {
min-width: 0;
grid-template-columns: 1fr;
}
.sort-index {
align-self: flex-start;
}
}
admin-frontend/src/views/system/SystemPaymentsView.vue
+385
View File
@@ -0,0 +1,385 @@
<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
ArrowDown,
ArrowUp,
Delete,
EditPen,
Plus,
Search,
} from '@element-plus/icons-vue'
import {
deletePayment,
fetchPayments,
getPaymentMethods,
sortPayments,
togglePaymentVisibility,
} from '@/api/admin'
import type { AdminPaymentListItem } from '@/types/api'
import {
countCustomNotifyDomains,
countEnabledPayments,
filterPayments,
formatPaymentFee,
movePaymentOrder,
normalizePayment,
sortPaymentsByOrder,
} from '@/utils/payments'
import SystemPaymentEditorDrawer from './SystemPaymentEditorDrawer.vue'
type DrawerMode = 'create' | 'edit'
const loading = ref(true)
const sortSubmitting = ref(false)
const drawerVisible = ref(false)
const drawerMode = ref<DrawerMode>('create')
const activePayment = ref<AdminPaymentListItem | null>(null)
const sortDialogVisible = ref(false)
const errorMessage = ref('')
const keyword = ref('')
const current = ref(1)
const pageSize = ref(10)
const payments = ref<AdminPaymentListItem[]>([])
const paymentMethods = ref<string[]>([])
const sortDraft = ref<AdminPaymentListItem[]>([])
const toggleLoadingMap = ref<Record<string, boolean>>({})
const filteredPayments = computed(() => filterPayments(payments.value, keyword.value))
const visiblePayments = computed(() => {
const start = (current.value - 1) * pageSize.value
return filteredPayments.value.slice(start, start + pageSize.value)
})
const summaryCards = computed(() => [
{ label: '支付方式数', value: String(payments.value.length) },
{ label: '已启用', value: String(countEnabledPayments(payments.value)) },
{ label: '接口种类', value: String(new Set(payments.value.map((item) => item.payment)).size) },
{ label: '自定义通知域名', value: String(countCustomNotifyDomains(payments.value)) },
])
function getToggleKey(id: number): string {
return `payment:${id}`
}
function isToggleLoading(id: number): boolean {
return Boolean(toggleLoadingMap.value[getToggleKey(id)])
}
async function loadPage() {
loading.value = true
errorMessage.value = ''
try {
const [paymentsResult, methodsResult] = await Promise.allSettled([
fetchPayments(),
getPaymentMethods(),
])
if (paymentsResult.status === 'rejected') {
throw paymentsResult.reason
}
payments.value = sortPaymentsByOrder((paymentsResult.value.data ?? []).map((item) => normalizePayment(item)))
if (methodsResult.status === 'fulfilled') {
paymentMethods.value = methodsResult.value.data ?? []
} else {
paymentMethods.value = []
ElMessage.warning('支付接口列表加载失败，创建或切换支付接口时需要重新拉取')
}
} catch (error) {
errorMessage.value = error instanceof Error ? error.message : '支付配置加载失败'
} finally {
loading.value = false
}
}
function openCreateDrawer() {
drawerMode.value = 'create'
activePayment.value = null
drawerVisible.value = true
}
function openEditDrawer(payment: AdminPaymentListItem) {
drawerMode.value = 'edit'
activePayment.value = payment
drawerVisible.value = true
}
function handleDrawerSuccess() {
void loadPage()
}
async function handleToggle(payment: AdminPaymentListItem, nextValue: boolean | string | number) {
const normalizedNextValue = Boolean(nextValue)
if (Boolean(payment.enable) === normalizedNextValue) {
return
}
const key = getToggleKey(payment.id)
toggleLoadingMap.value[key] = true
try {
await togglePaymentVisibility(payment.id)
payment.enable = normalizedNextValue
ElMessage.success('支付方式状态已更新')
} catch (error) {
ElMessage.error(error instanceof Error ? error.message : '支付方式状态更新失败')
} finally {
toggleLoadingMap.value[key] = false
}
}
async function handleDelete(payment: AdminPaymentListItem) {
try {
await ElMessageBox.confirm(`删除支付方式「${payment.name}」后无法恢复，确认继续吗？`, '删除支付方式', {
type: 'warning',
})
await deletePayment(payment.id)
ElMessage.success('支付方式已删除')
await loadPage()
} catch (error) {
if (error === 'cancel' || error === 'close') {
return
}
ElMessage.error(error instanceof Error ? error.message : '支付方式删除失败')
}
}
function openSortEditor() {
sortDraft.value = payments.value.map((item) => ({
...item,
config: item.config ? { ...item.config } : {},
}))
sortDialogVisible.value = true
}
function moveDraft(index: number, direction: -1 | 1) {
sortDraft.value = movePaymentOrder(sortDraft.value, index, direction)
}
async function submitSort() {
sortSubmitting.value = true
try {
await sortPayments(sortDraft.value.map((item) => item.id))
ElMessage.success('支付方式排序已保存')
sortDialogVisible.value = false
await loadPage()
} catch (error) {
ElMessage.error(error instanceof Error ? error.message : '支付方式排序保存失败')
} finally {
sortSubmitting.value = false
}
}
watch(keyword, () => {
current.value = 1
})
watch(filteredPayments, (list) => {
const maxPage = Math.max(1, Math.ceil(list.length / pageSize.value))
if (current.value > maxPage) {
current.value = maxPage
}
})
watch(pageSize, () => {
current.value = 1
})
onMounted(() => {
void loadPage()
})
</script>
<template>
<div class="payments-page">
<section class="payments-hero">
<div class="payments-copy">
<p class="payments-kicker">System Management</p>
<h1>支付配置</h1>
<span>在这里可以配置支付方式，包括添加、编辑、启停、排序与通知地址管理。</span>
</div>
<div class="hero-stats">
<article v-for="item in summaryCards" :key="item.label">
<span>{{ item.label }}</span>
<strong>{{ item.value }}</strong>
</article>
</div>
</section>
<section class="table-shell">
<ElAlert
v-if="errorMessage"
type="error"
show-icon
:closable="false"
:title="errorMessage"
>
<template #default>
<ElButton size="small" @click="loadPage">重新加载</ElButton>
</template>
</ElAlert>
<header class="table-toolbar">
<div class="toolbar-left">
<ElButton type="primary" @click="openCreateDrawer">
<ElIcon><Plus /></ElIcon>
添加支付方式
</ElButton>
<ElInput
v-model="keyword"
clearable
placeholder="搜索支付方式..."
class="toolbar-search"
>
<template #prefix>
<ElIcon><Search /></ElIcon>
</template>
</ElInput>
</div>
<ElButton @click="openSortEditor">编辑排序</ElButton>
</header>
<ElTable
:data="visiblePayments"
v-loading="loading"
class="payments-table"
row-key="id"
empty-text="当前筛选条件下暂无支付方式"
>
<ElTableColumn prop="id" label="ID" width="86" />
<ElTableColumn label="启用" width="92">
<template #default="{ row }">
<ElSwitch
:model-value="Boolean(row.enable)"
:loading="isToggleLoading(row.id)"
@change="handleToggle(row, $event)"
/>
</template>
</ElTableColumn>
<ElTableColumn label="显示名称" min-width="320">
<template #default="{ row }">
<div class="name-cell">
<div class="name-main">
<div v-if="row.icon" class="icon-preview">
<img :src="row.icon" :alt="row.name" />
</div>
<div v-else class="icon-fallback">
{{ row.name.slice(0, 1) || 'P' }}
</div>
<div class="name-copy">
<strong>{{ row.name }}</strong>
<span>{{ formatPaymentFee(row) }}</span>
</div>
</div>
</div>
</template>
</ElTableColumn>
<ElTableColumn label="支付接口" min-width="140">
<template #default="{ row }">
<div class="gateway-cell">
<strong>{{ row.payment }}</strong>
<span>排序 #{{ row.sort || 0 }}</span>
</div>
</template>
</ElTableColumn>
<ElTableColumn label="通知地址" min-width="320">
<template #default="{ row }">
<div class="notify-cell">
<code>{{ row.notify_url || '未生成通知地址' }}</code>
<span v-if="row.notify_domain">{{ row.notify_domain }}</span>
</div>
</template>
</ElTableColumn>
<ElTableColumn label="操作" width="108" fixed="right">
<template #default="{ row }">
<div class="action-group">
<ElButton text class="action-btn" @click="openEditDrawer(row)">
<ElIcon><EditPen /></ElIcon>
</ElButton>
<ElButton text class="action-btn danger-btn" @click="handleDelete(row)">
<ElIcon><Delete /></ElIcon>
</ElButton>
</div>
</template>
</ElTableColumn>
</ElTable>
<footer class="table-footer">
<span>共 {{ filteredPayments.length }} 项</span>
<ElPagination
v-model:current-page="current"
v-model:page-size="pageSize"
:page-sizes="[10, 20, 50]"
layout="sizes, prev, pager, next"
:total="filteredPayments.length"
background
/>
</footer>
</section>
<SystemPaymentEditorDrawer
v-model:visible="drawerVisible"
:mode="drawerMode"
:payment="activePayment"
:payment-methods="paymentMethods"
@success="handleDrawerSuccess"
/>
<ElDialog
v-model="sortDialogVisible"
width="min(640px, calc(100vw - 32px))"
title="编辑排序"
class="sort-dialog"
>
<div class="sort-shell">
<p class="sort-copy">按照当前展示顺序调整支付方式排序，保存后会同步到后台 `/payment/sort`。</p>
<div class="sort-list">
<article
v-for="(item, index) in sortDraft"
:key="item.id"
class="sort-item"
>
<div class="sort-item__main">
<span class="sort-index">{{ index + 1 }}</span>
<div class="sort-meta">
<strong>{{ item.name }}</strong>
<span>{{ item.payment }} · {{ formatPaymentFee(item) }}</span>
</div>
</div>
<div class="sort-actions">
<ElButton :disabled="index === 0" @click="moveDraft(index, -1)">
<ElIcon><ArrowUp /></ElIcon>
上移
</ElButton>
<ElButton :disabled="index === sortDraft.length - 1" @click="moveDraft(index, 1)">
<ElIcon><ArrowDown /></ElIcon>
下移
</ElButton>
</div>
</article>
</div>
</div>
<template #footer>
<div class="sort-footer">
<ElButton @click="sortDialogVisible = false">取消</ElButton>
<ElButton type="primary" :loading="sortSubmitting" @click="submitSort">
保存排序
</ElButton>
</div>
</template>
</ElDialog>
</div>
</template>
<style scoped lang="scss" src="./SystemPaymentsView.scss"></style>
admin-frontend/src/views/system/ThemeConfigDrawer.vue
+350
View File
@@ -0,0 +1,350 @@
<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { Brush, CircleCheckFilled, MagicStick } from '@element-plus/icons-vue'
import type {
AdminThemeConfigRecord,
AdminThemeConfigField,
AdminThemeSummary,
} from '@/types/api'
import {
createThemeConfigFormState,
serializeThemeConfigForm,
type ThemeConfigFormState,
} from '@/utils/themes'
const props = defineProps<{
visible: boolean
theme: AdminThemeSummary | null
config: AdminThemeConfigRecord | null
loading: boolean
saving: boolean
applying: boolean
errorMessage?: string
isActive: boolean
}>()
const emit = defineEmits<{
(e: 'update:visible', value: boolean): void
(e: 'save', payload: { name: string; config: AdminThemeConfigRecord }): void
(e: 'apply', name: string): void
}>()
const form = ref<ThemeConfigFormState>({})
const fields = computed<AdminThemeConfigField[]>(() => props.theme?.configs ?? [])
const hasFields = computed(() => fields.value.length > 0)
function syncFormState() {
form.value = createThemeConfigFormState(fields.value, props.config)
}
watch(
() => [props.theme, props.config, props.visible] as const,
() => {
syncFormState()
},
{ immediate: true, deep: true },
)
function handleSave() {
if (!props.theme) return
emit('save', {
name: props.theme.name,
config: serializeThemeConfigForm(form.value, fields.value),
})
}
function handleApply() {
if (!props.theme) return
emit('apply', props.theme.name)
}
</script>
<template>
<ElDrawer
:model-value="visible"
size="min(560px, calc(100vw - 32px))"
class="theme-config-drawer"
@update:model-value="emit('update:visible', $event)"
>
<template #header>
<div class="drawer-header">
<div class="drawer-title">
<p>Theme Settings</p>
<h2>{{ theme?.name || '主题设置' }}</h2>
</div>
<div class="drawer-badges">
<ElTag v-if="theme?.is_system" effect="plain" round>系统主题</ElTag>
<ElTag v-if="isActive" type="success" effect="light" round>当前主题</ElTag>
</div>
</div>
</template>
<div v-if="theme" class="drawer-body">
<section class="drawer-hero">
<div class="drawer-hero__icon">
<ElIcon><Brush /></ElIcon>
</div>
<div class="drawer-hero__copy">
<p>{{ theme.description || '当前主题支持独立配置字段，可按需保存并切换。' }}</p>
<div class="drawer-hero__meta">
<span>版本 {{ theme.version || '未标注' }}</span>
<span>{{ fields.length }} 个配置项</span>
</div>
</div>
</section>
<ElAlert
v-if="errorMessage"
:title="errorMessage"
type="error"
show-icon
:closable="false"
/>
<section v-if="loading" class="drawer-loading">
<ElSkeleton :rows="4" animated />
<ElSkeleton :rows="6" animated />
</section>
<section v-else-if="hasFields" class="drawer-form-shell">
<ElForm label-position="top" class="drawer-form">
<div class="drawer-grid">
<div
v-for="field in fields"
:key="field.field_name"
class="drawer-field"
:class="{ 'is-full': field.field_type === 'textarea' }"
>
<ElFormItem :label="field.label">
<ElSelect
v-if="field.field_type === 'select'"
v-model="form[field.field_name]"
class="field-select"
>
<ElOption
v-for="(label, value) in field.select_options || {}"
:key="`${field.field_name}-${value}`"
:label="label"
:value="value"
/>
</ElSelect>
<ElInput
v-else-if="field.field_type === 'textarea'"
v-model="form[field.field_name]"
type="textarea"
:rows="6"
:placeholder="field.placeholder"
resize="vertical"
/>
<ElInput
v-else
v-model="form[field.field_name]"
:placeholder="field.placeholder"
/>
<div class="field-foot">
<ElIcon><MagicStick /></ElIcon>
<span class="mono">{{ field.field_name }}</span>
</div>
</ElFormItem>
</div>
</div>
</ElForm>
</section>
<section v-else class="drawer-empty">
<ElIcon><CircleCheckFilled /></ElIcon>
<div>
<h3>当前主题没有额外配置项</h3>
<p>你仍然可以将它设为当前主题；若后续主题包新增 `config.json` 字段，这里会自动显示。</p>
</div>
</section>
</div>
<template #footer>
<div class="drawer-footer">
<ElButton @click="emit('update:visible', false)">关闭</ElButton>
<ElButton
v-if="!isActive"
:loading="applying"
@click="handleApply"
>
设为当前主题
</ElButton>
<ElButton v-else disabled>当前主题</ElButton>
<ElButton
type="primary"
:loading="saving"
:disabled="loading"
@click="handleSave"
>
保存设置
</ElButton>
</div>
</template>
</ElDrawer>
</template>
<style scoped>
.drawer-header {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: flex-start;
}
.drawer-title {
display: grid;
gap: 6px;
}
.drawer-title p {
margin: 0;
color: var(--xboard-text-muted);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.drawer-title h2 {
margin: 0;
color: var(--xboard-text-strong);
font-size: 28px;
line-height: 1.08;
letter-spacing: -0.28px;
}
.drawer-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.drawer-body {
display: grid;
gap: 18px;
}
.drawer-hero {
display: flex;
gap: 16px;
padding: 18px 20px;
border-radius: 20px;
background: #f5f5f7;
}
.drawer-hero__icon {
width: 48px;
height: 48px;
display: grid;
place-items: center;
border-radius: 16px;
background: #1d1d1f;
color: #ffffff;
font-size: 18px;
}
.drawer-hero__copy {
display: grid;
gap: 10px;
}
.drawer-hero__copy p {
margin: 0;
color: var(--xboard-text-secondary);
line-height: 1.6;
}
.drawer-hero__meta {
display: flex;
flex-wrap: wrap;
gap: 10px;
color: var(--xboard-text-muted);
font-size: 12px;
}
.drawer-loading,
.drawer-form-shell {
display: grid;
gap: 16px;
}
.drawer-form {
display: grid;
}
.drawer-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px 16px;
}
.drawer-field.is-full {
grid-column: 1 / -1;
}
.field-select {
width: 100%;
}
.field-foot {
margin-top: 8px;
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--xboard-text-muted);
font-size: 12px;
}
.drawer-empty {
display: flex;
gap: 14px;
padding: 18px 20px;
border-radius: 20px;
background: #f5f5f7;
color: var(--xboard-text-secondary);
}
.drawer-empty :deep(.el-icon) {
margin-top: 2px;
color: #0071e3;
font-size: 18px;
}
.drawer-empty h3 {
margin: 0 0 8px;
color: var(--xboard-text-strong);
font-size: 18px;
}
.drawer-empty p {
margin: 0;
line-height: 1.6;
}
.drawer-footer {
display: flex;
justify-content: flex-end;
gap: 12px;
}
@media (max-width: 767px) {
.drawer-grid {
grid-template-columns: 1fr;
}
.drawer-footer {
width: 100%;
flex-wrap: wrap;
}
.drawer-footer :deep(.el-button) {
flex: 1 1 140px;
}
}
</style>
admin-frontend/src/views/system/ThemesView.vue
+537
View File
@@ -0,0 +1,537 @@
<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Brush, PictureFilled, RefreshRight, Setting, UploadFilled } from '@element-plus/icons-vue'
import {
getThemeConfig,
getThemes,
saveAdminConfig,
saveThemeConfig,
uploadTheme,
} from '@/api/admin'
import type { AdminThemeConfigRecord } from '@/types/api'
import ThemeConfigDrawer from './ThemeConfigDrawer.vue'
import { resolveThemes, type ResolvedThemeSummary } from '@/utils/themes'
const loading = ref(true)
const reloading = ref(false)
const uploading = ref(false)
const drawerVisible = ref(false)
const drawerLoading = ref(false)
const drawerSaving = ref(false)
const drawerErrorMessage = ref('')
const errorMessage = ref('')
const applyingThemeName = ref('')
const fileInput = ref<HTMLInputElement | null>(null)
const activeThemeName = ref('Xboard')
const themes = ref<ResolvedThemeSummary[]>([])
const selectedThemeName = ref<string | null>(null)
const selectedThemeConfig = ref<AdminThemeConfigRecord | null>(null)
const selectedTheme = computed(
() => themes.value.find((theme) => theme.name === selectedThemeName.value) ?? null,
)
const uploadedThemeCount = computed(() => themes.value.filter((theme) => !theme.is_system).length)
const hasThemes = computed(() => themes.value.length > 0)
async function loadPage(mode: 'initial' | 'reload' = 'initial') {
if (mode === 'initial') {
loading.value = true
} else {
reloading.value = true
}
errorMessage.value = ''
try {
const response = await getThemes()
activeThemeName.value = response.data?.active || 'Xboard'
themes.value = resolveThemes(response.data)
if (selectedThemeName.value && !themes.value.some((theme) => theme.name === selectedThemeName.value)) {
drawerVisible.value = false
selectedThemeName.value = null
selectedThemeConfig.value = null
}
} catch (error) {
errorMessage.value = error instanceof Error ? error.message : '主题列表加载失败'
} finally {
loading.value = false
reloading.value = false
}
}
async function openThemeSettings(theme: ResolvedThemeSummary) {
selectedThemeName.value = theme.name
selectedThemeConfig.value = null
drawerErrorMessage.value = ''
drawerVisible.value = true
drawerLoading.value = true
try {
const response = await getThemeConfig(theme.name)
selectedThemeConfig.value = response.data ?? {}
} catch (error) {
drawerErrorMessage.value = error instanceof Error ? error.message : '主题配置加载失败'
} finally {
drawerLoading.value = false
}
}
async function handleSaveThemeConfig(payload: {
name: string
config: AdminThemeConfigRecord
}) {
drawerSaving.value = true
try {
const response = await saveThemeConfig(payload.name, payload.config)
selectedThemeConfig.value = response.data ?? payload.config
ElMessage.success('主题配置已保存')
} catch (error) {
ElMessage.error(error instanceof Error ? error.message : '主题配置保存失败')
} finally {
drawerSaving.value = false
}
}
async function handleApplyTheme(name: string) {
applyingThemeName.value = name
try {
await saveAdminConfig({ frontend_theme: name })
activeThemeName.value = name
ElMessage.success(`已切换为「${name}」`)
await loadPage('reload')
} catch (error) {
ElMessage.error(error instanceof Error ? error.message : '主题切换失败')
} finally {
applyingThemeName.value = ''
}
}
function triggerUpload() {
fileInput.value?.click()
}
async function handleFileChange(event: Event) {
const target = event.target as HTMLInputElement
const file = target.files?.[0]
target.value = ''
if (!file) return
if (!/\.zip$/i.test(file.name)) {
ElMessage.error('请选择 zip 格式的主题包')
return
}
uploading.value = true
try {
await uploadTheme(file)
ElMessage.success('主题包上传成功')
await loadPage('reload')
} catch (error) {
ElMessage.error(error instanceof Error ? error.message : '主题上传失败')
} finally {
uploading.value = false
}
}
onMounted(() => {
void loadPage()
})
</script>
<template>
<div class="themes-page">
<section class="themes-header">
<div class="header-copy">
<p class="header-kicker">System Management</p>
<h1>主题配置</h1>
<p>
主题配置，包括主题色、背景与自定义页脚等。如果你采用前后分离的方式部署 V2board，
这些主题配置不会生效。
</p>
</div>
<div class="header-actions">
<ElButton :loading="reloading" @click="loadPage('reload')">
<ElIcon><RefreshRight /></ElIcon>
刷新列表
</ElButton>
<ElButton type="primary" :loading="uploading" @click="triggerUpload">
<ElIcon><UploadFilled /></ElIcon>
上传主题
</ElButton>
<input
ref="fileInput"
class="file-input"
type="file"
accept=".zip,application/zip"
@change="handleFileChange"
>
</div>
</section>
<section class="themes-toolbar">
<div class="toolbar-pill">
<span>当前主题</span>
<strong>{{ activeThemeName }}</strong>
</div>
<div class="toolbar-pill">
<span>可用主题</span>
<strong>{{ themes.length }}</strong>
</div>
<div class="toolbar-pill">
<span>已上传主题</span>
<strong>{{ uploadedThemeCount }}</strong>
</div>
</section>
<section v-if="loading" class="loading-shell">
<ElSkeleton :rows="4" animated />
<ElSkeleton :rows="4" animated />
</section>
<section v-else class="themes-shell">
<ElAlert
v-if="errorMessage"
:title="errorMessage"
type="error"
show-icon
:closable="false"
/>
<div v-if="hasThemes" class="themes-grid">
<article
v-for="theme in themes"
:key="theme.key"
class="theme-card"
:class="{ active: theme.name === activeThemeName }"
>
<div class="theme-card__top">
<div class="theme-card__icon">
<ElIcon v-if="theme.images"><PictureFilled /></ElIcon>
<ElIcon v-else><Brush /></ElIcon>
</div>
<div class="theme-card__meta">
<div class="theme-card__title">
<h2>{{ theme.name }}</h2>
<ElTag
v-if="theme.name === activeThemeName"
type="success"
effect="light"
round
>
当前主题
</ElTag>
<ElTag v-else-if="theme.is_system" effect="plain" round>系统主题</ElTag>
<ElTag v-else type="info" effect="plain" round>上传主题</ElTag>
</div>
<p>{{ theme.description || theme.name }}</p>
</div>
</div>
<div class="theme-card__facts">
<article>
<span>版本</span>
<strong>{{ theme.version || '未标注' }}</strong>
</article>
<article>
<span>配置项</span>
<strong>{{ theme.configs?.length || 0 }}</strong>
</article>
</div>
<div class="theme-card__actions">
<ElButton @click="openThemeSettings(theme)">
<ElIcon><Setting /></ElIcon>
主题设置
</ElButton>
<ElButton
:disabled="theme.name === activeThemeName"
:loading="applyingThemeName === theme.name"
:type="theme.name === activeThemeName ? undefined : 'primary'"
:plain="theme.name !== activeThemeName"
@click="handleApplyTheme(theme.name)"
>
{{ theme.name === activeThemeName ? '当前主题' : '设为当前' }}
</ElButton>
</div>
</article>
</div>
<div v-else class="empty-shell">
<ElIcon><Brush /></ElIcon>
<div>
<h2>当前没有可用主题</h2>
<p>请先上传包含 `config.json` 和 `dashboard.blade.php` 的主题包，再回到这里做配置。</p>
</div>
</div>
</section>
<ThemeConfigDrawer
v-model:visible="drawerVisible"
:theme="selectedTheme"
:config="selectedThemeConfig"
:loading="drawerLoading"
:saving="drawerSaving"
:applying="applyingThemeName === selectedThemeName"
:is-active="selectedTheme?.name === activeThemeName"
:error-message="drawerErrorMessage"
@save="handleSaveThemeConfig"
@apply="handleApplyTheme"
/>
</div>
</template>
<style scoped>
.themes-page {
display: grid;
gap: 24px;
}
.themes-header {
display: flex;
justify-content: space-between;
gap: 24px;
align-items: flex-start;
}
.header-copy {
display: grid;
gap: 12px;
max-width: 760px;
}
.header-kicker {
margin: 0;
color: var(--xboard-text-muted);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.header-copy h1 {
margin: 0;
color: var(--xboard-text-strong);
font-size: clamp(34px, 4vw, 46px);
line-height: 1.06;
letter-spacing: -0.28px;
}
.header-copy > p:last-child {
margin: 0;
color: var(--xboard-text-secondary);
line-height: 1.7;
}
.header-actions {
display: flex;
gap: 12px;
flex-shrink: 0;
}
.file-input {
display: none;
}
.themes-toolbar {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.toolbar-pill {
display: grid;
gap: 6px;
padding: 18px 20px;
border-radius: 20px;
background: #ffffff;
box-shadow: var(--xboard-shadow);
}
.toolbar-pill span {
color: var(--xboard-text-muted);
font-size: 12px;
}
.toolbar-pill strong {
color: var(--xboard-text-strong);
font-size: 22px;
line-height: 1.15;
}
.loading-shell,
.themes-shell {
display: grid;
gap: 16px;
}
.loading-shell {
padding: 24px;
border-radius: 24px;
background: #ffffff;
box-shadow: var(--xboard-shadow);
}
.themes-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 18px;
}
.theme-card {
display: grid;
gap: 18px;
padding: 22px 22px 20px;
border-radius: 24px;
background: #ffffff;
box-shadow: var(--xboard-shadow);
border: 1px solid transparent;
transition: border-color 0.18s ease, transform 0.18s ease;
}
.theme-card:hover {
transform: translateY(-1px);
border-color: rgba(0, 113, 227, 0.08);
}
.theme-card.active {
border-color: rgba(0, 113, 227, 0.16);
}
.theme-card__top {
display: flex;
gap: 16px;
align-items: flex-start;
}
.theme-card__icon {
width: 52px;
height: 52px;
display: grid;
place-items: center;
border-radius: 18px;
background: #f5f5f7;
color: #1d1d1f;
font-size: 20px;
flex-shrink: 0;
}
.theme-card__meta {
display: grid;
gap: 8px;
}
.theme-card__title {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
}
.theme-card__title h2 {
margin: 0;
color: var(--xboard-text-strong);
font-size: 28px;
line-height: 1.1;
letter-spacing: -0.24px;
}
.theme-card__meta p {
margin: 0;
color: var(--xboard-text-secondary);
line-height: 1.6;
}
.theme-card__facts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.theme-card__facts article {
display: grid;
gap: 6px;
padding: 14px 16px;
border-radius: 18px;
background: #f5f5f7;
}
.theme-card__facts span {
color: var(--xboard-text-muted);
font-size: 12px;
}
.theme-card__facts strong {
color: var(--xboard-text-strong);
font-size: 18px;
line-height: 1.2;
}
.theme-card__actions {
display: flex;
justify-content: flex-end;
gap: 12px;
flex-wrap: wrap;
}
.empty-shell {
display: flex;
gap: 16px;
align-items: flex-start;
padding: 28px;
border-radius: 24px;
background: #ffffff;
box-shadow: var(--xboard-shadow);
}
.empty-shell :deep(.el-icon) {
color: #0071e3;
font-size: 20px;
margin-top: 4px;
}
.empty-shell h2 {
margin: 0 0 8px;
color: var(--xboard-text-strong);
font-size: 22px;
}
.empty-shell p {
margin: 0;
color: var(--xboard-text-secondary);
line-height: 1.7;
}
@media (max-width: 960px) {
.themes-header {
flex-direction: column;
}
.header-actions {
width: 100%;
flex-wrap: wrap;
}
.themes-toolbar {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.theme-card__facts {
grid-template-columns: 1fr;
}
.theme-card__actions {
justify-content: stretch;
}
.theme-card__actions :deep(.el-button) {
flex: 1 1 140px;
}
}
</style>
app/Protocols/Stash.php
+21
View File
@@ -10,6 +10,8 @@ use App\Models\Server;
class Stash extends AbstractProtocol
{
private const ANYTLS_MIN_VERSION = '3.3.0';
public $flags = ['stash'];
public $allowedProtocols = [
Server::TYPE_SHADOWSOCKS,
@@ -124,6 +126,16 @@ class Stash extends AbstractProtocol
array_push($proxies, $item['name']);
}
if ($item['type'] === Server::TYPE_ANYTLS) {
if (!self::supportsAnyTlsVersion(
clientVersion: $this->clientVersion,
minimumVersion: data_get(
$this->protocolRequirements,
'stash.anytls.base_version',
self::ANYTLS_MIN_VERSION
)
)) {
continue;
}
array_push($proxy, self::buildAnyTLS($item['password'], $item));
array_push($proxies, $item['name']);
}
@@ -178,6 +190,15 @@ class Stash extends AbstractProtocol
->header('content-disposition', 'attachment;filename*=UTF-8\'\'' . rawurlencode($appName));
}
public static function supportsAnyTlsVersion(?string $clientVersion, ?string $minimumVersion = self::ANYTLS_MIN_VERSION): bool
{
if (!$clientVersion || !$minimumVersion) {
return false;
}
return version_compare($clientVersion, $minimumVersion, '>=');
}
public static function buildShadowsocks($uuid, $server)
{
$protocol_settings = $server['protocol_settings'];
tests/Unit/Protocols/StashAnyTlsCompatibilityTest.php
+19
View File
@@ -0,0 +1,19 @@
<?php
namespace Tests\Unit\Protocols;
use App\Protocols\Stash;
use PHPUnit\Framework\TestCase;
class StashAnyTlsCompatibilityTest extends TestCase
{
public function test_anytls_requires_a_known_supported_stash_version(): void
{
$this->assertFalse(Stash::supportsAnyTlsVersion(null));
$this->assertFalse(Stash::supportsAnyTlsVersion(''));
$this->assertFalse(Stash::supportsAnyTlsVersion('3.2.9'));
$this->assertTrue(Stash::supportsAnyTlsVersion('3.3.0'));
$this->assertTrue(Stash::supportsAnyTlsVersion('3.3.1'));
}
}