feat: add interactive component examples

2026-07-09 01:16:47 +08:00
parent 357747dd17
commit 76cda6b49c
8 changed files with 337 additions and 64 deletions
@@ -66,7 +66,7 @@ frontend/src
 - `frontend/src/modules/image-optimizer/`：放已接入的商品图片 AI 优化样例页面。
 - `frontend/src/modules/logs/`：目标目录，放审计日志和运行日志页面。
 - `frontend/src/modules/statistics/`：放统计卡片和趋势图。
- `frontend/src/modules/components-demo/`：目标目录，放常用组件示例。
+- `frontend/src/modules/components-demo/`：放已接入的常用组件示例页。
 - `frontend/src/components/template/`：放当前模块占位页共享壳。
 - `frontend/src/components/`：通用展示组件和组合控件。
 - `frontend/src/utils/`：国际化、主题、OS、热键等工具函数。
@@ -46,7 +46,7 @@

 | ID | 任务 | 依赖 | 验收要点 | 状态 |
 | --- | --- | --- | --- | --- |
-| T-030 | 建立常用组件示例页 | T-012 | 输入框、多选框、下拉框、多行文本、表格、筛选、分页、状态标签有可运行示例 | TODO |
+| T-030 | 建立常用组件示例页 | T-012 | 输入框、多选框、下拉框、多行文本、表格、筛选、分页、状态标签有可运行示例 | DONE |
 | T-031 | 文档化 Wails bindings 生成流程 | T-012 | README 或技术栈文档说明 `wails3 generate bindings` 的使用、失败处理和版本要求 | TODO |
 | T-032 | 补充 Windows 打包验证文档 | T-031 | `wails3 package` 前置条件、输出目录和常见失败处理写入 README 或 docs | TODO |
 | T-033 | 完成一次模板 smoke 清单 | T-023 | 登录、设置、业务样例、日志、统计、组件示例、托盘、热键都按清单验证并记录结果 | TODO |
@@ -6,7 +6,7 @@

 项目处于可复用桌面应用模板的 Phase 2 业务样例与日志统计收尾阶段。目标已经从迁移后的基础工程调整为“Windows-first、可扩展到其他平台的桌面端应用模板”。

-当前代码已从迁移后的 Wails/Vue/SQLite 基线推进到主应用路由骨架、登录 provider 边界、统一设置 schema、主窗口状态恢复、商品图片 AI 优化页面、日志服务边界和 P0 数据统计阶段，已具备设置、多语言、主题、本地配置、热键、托盘、OCR 示例、模板级模块入口、本地登录能力、本地模拟图片优化任务能力、业务样例页面、审计日志、运行日志和 P0 统计查询能力。统计页面仍是骨架，尚未展示真实统计数据。
+当前代码已从迁移后的 Wails/Vue/SQLite 基线推进到主应用路由骨架、登录 provider 边界、统一设置 schema、主窗口状态恢复、商品图片 AI 优化页面、日志服务边界、P0 数据统计和常用组件示例阶段，已具备设置、多语言、主题、本地配置、热键、托盘、OCR 示例、模板级模块入口、本地登录能力、本地模拟图片优化任务能力、业务样例页面、组件示例页、审计日志、运行日志和 P0 统计查询能力。统计页面仍是骨架，尚未展示真实统计数据。

 ## 已确认事实

@@ -44,6 +44,7 @@
 - 已实现 AuditLogService：`Record`、`List`，登录、设置变更和图片任务创建会写入 `audit_logs`。
 - 已实现 AppLogService：`Record`、`List`，图片任务创建失败和服务内部错误会写入 `app_logs`。
 - 已实现 MetricsService：`GetDashboardMetrics`、`GetProcessingTrend`，可查询今日处理量、成功率、平均耗时、失败数、今日审计日志数和最近 N 天趋势。
+- 已实现常用组件示例页：输入框、多选框、下拉框、多行文本、表格、筛选、分页和状态标签都有可运行示例。

 ## 当前命令

@@ -203,9 +204,16 @@ wails3 build
 - WebView 文件选择器不返回绝对路径时，页面会提示用户粘贴绝对路径。
 - `go test ./...`、`npm run build`、`go build -o bin\cmbone.exe .` 和 `cmd /c build.bat` 通过。

+同日完成常用组件示例页：
+
+- `frontend/src/modules/components-demo/ComponentsDemoPage.vue` 从静态骨架改为可交互示例。
+- 表单区支持输入框、多选框、下拉框和多行文本，并实时展示当前值。
+- 表格区支持关键字、分类、状态筛选，展示分页和状态标签。
+- `go test ./...`、`npm run build`、`go build -o bin\cmbone.exe .` 和 `cmd /c build.bat` 通过。
+
 ## 下一步

-从 [`06-tasks.md`](06-tasks.md) 领取第一个 `TODO` 任务。目前建议先做 `T-030`：建立常用组件示例页。
+从 [`06-tasks.md`](06-tasks.md) 领取第一个 `TODO` 任务。目前建议先做 `T-031`：文档化 Wails bindings 生成流程。

 ## 当前 blocker

@@ -97,7 +97,7 @@
 | `frontend/src/modules/logs/LogsPage.vue` | 日志页骨架 | 审计日志和运行日志入口 |
 | `frontend/src/modules/statistics/StatisticsPage.vue` | 统计页骨架 | P0 指标和 7 天趋势入口 |
 | `frontend/src/modules/settings/SettingsPage.vue` | 设置页 | 复用存量设置组件，并展示后端统一设置 schema |
-| `frontend/src/modules/components-demo/ComponentsDemoPage.vue` | 组件示例骨架 | 常用表单、筛选、表格和状态标签 |
+| `frontend/src/modules/components-demo/ComponentsDemoPage.vue` | 组件示例页 | 输入框、多选框、下拉框、多行文本、表格、筛选、分页和状态标签 |
 | `frontend/src/pages/Home/Index.vue` | 第二窗口入口 | OCR 示例页面 |
 | `frontend/src/utils/ThemeManager.ts` | 主题工具 | 主题切换和持久化协作 |
 | `frontend/src/utils/i18n.ts` | 国际化工具 | 语言资源和切换 |
@@ -30,7 +30,7 @@
 | `#/logs` | 操作日志 | 后端审计日志和运行日志服务已接入；页面列表待后续扩展 |
 | `#/statistics` | 数据统计 | 后端 `MetricsService` 已接入趋势、成功率、耗时和失败任务；页面展示待后续扩展 |
 | `#/settings` | 设置中心 | 已接入统一设置 schema，窗口配置已用于主窗口尺寸恢复 |
-| `#/components` | 组件示例 | `T-030` 扩充输入框、多选框、下拉框、多行文本、表格、筛选、分页 |
+| `#/components` | 组件示例 | 已接入输入框、多选框、下拉框、多行文本、表格、筛选、分页和状态标签 |

 ## 主窗口布局