diff --git a/.doc/bug-fix-implementation-summary.md b/.doc/bug-fix-implementation-summary.md new file mode 100644 index 0000000..db2d621 --- /dev/null +++ b/.doc/bug-fix-implementation-summary.md @@ -0,0 +1,222 @@ +# Bug 修复实施总结 + +**日期**: 2026-02-14 +**变更**: fix-budget-and-ui-bugs +**进度**: 26/42 任务完成 (62%) + +--- + +## ✅ 已完成的修复 + +### 1. Bug #4 & #5: 预算统计数据丢失 (高优先级) ✅ + +**问题**: 预算明细弹窗显示"暂无数据"，燃尽图显示为直线 + +**根本原因**: Application 层 DTO 映射时丢失了 `Trend` 和 `Description` 字段 + +**修复内容**: +1. **Application/Dto/BudgetDto.cs** (第64-72行) + - 在 `BudgetStatsDetail` record 中添加: + ```csharp + public List Trend { get; init; } = []; + public string Description { get; init; } = string.Empty; + ``` + +2. **Application/BudgetApplication.cs** (第74-98行) + - 在 `GetCategoryStatsAsync` 方法中添加映射: + ```csharp + Month = new BudgetStatsDetail + { + // ... 现有字段 + Trend = result.Month.Trend, // ⬅️ 新增 + Description = result.Month.Description // ⬅️ 新增 + }, + Year = new BudgetStatsDetail + { + // ... 现有字段 + Trend = result.Year.Trend, // ⬅️ 新增 + Description = result.Year.Description // ⬅️ 新增 + } + ``` + +3. **WebApi.Test/Application/BudgetApplicationTest.cs** + - 添加 2 个单元测试用例验证 DTO 映射正确 + - 测试通过 ✅ (212/212 tests passed) + +**影响**: API 响应结构变更（新增字段），向后兼容 + +--- + +### 2. Bug #1: 底部导航"统计"按钮无法跳转 ✅ + +**问题**: 点击底部导航的"统计"标签后无法跳转到统计页面 + +**根本原因**: `GlassBottomNav.vue` 中"统计"标签的路由配置错误（`path: '/'` 而非 `/statistics-v2`） + +**修复内容**: +- **Web/src/components/GlassBottomNav.vue** (第45行) + - 修改路由路径: + ```javascript + // 修改前 + { name: 'statistics', label: '统计', icon: 'chart-trending-o', path: '/' } + + // 修改后 + { name: 'statistics', label: '统计', icon: 'chart-trending-o', path: '/statistics-v2' } + ``` + +**验证**: 已确认 `/statistics-v2` 路由定义存在于 `Web/src/router/index.js` (第62-66行) + +--- + +### 3. Bug #2: 账单删除功能无响应 ✅ + +**问题**: 点击账单详情弹窗中的"删除"按钮后无反应 + +**调查结果**: **实际上删除功能已正确实现！** + +**验证内容** (Web/src/components/Transaction/TransactionDetailSheet.vue): +- ✅ 第149行：删除按钮正确绑定 `@click="handleDelete"` +- ✅ 第368-395行：`handleDelete` 函数完整实现: + - 使用 `showDialog` 显示确认对话框 + - 对话框标题为"确认删除" + - 警告消息："确定要删除这条交易记录吗？删除后无法恢复。" + - 确认后调用 `deleteTransaction` API + - 删除成功后关闭弹窗并触发 `delete` 事件 + - 删除失败显示错误提示 + - 取消时不执行任何操作 + +**结论**: 此 Bug 可能是用户误报或已在之前修复。当前代码实现完全符合规范。 + +--- + +### 4. Bug #3: Vant DatetimePicker 组件警告 ✅ + +**问题**: 控制台显示 `Failed to resolve component: van-datetime-picker` + +**根本原因**: `main.js` 中 Vant 导入命名不规范（小写 `vant` vs 官方推荐的大写 `Vant`） + +**修复内容**: +- **Web/src/main.js** + - 第13行：`import vant from 'vant'` → `import Vant from 'vant'` + - 第24行：`app.use(vant)` → `app.use(Vant)` + +**验证**: 需要启动前端开发服务器确认控制台无警告 + +--- + +## 🔄 待完成的任务 + +### 手动验证任务 (需要启动服务) + +**Task 5.4**: 验证 Vant 组件警告消失 +- 启动前端：`cd Web && pnpm dev` +- 打开浏览器控制台，检查无 `van-datetime-picker` 相关警告 + +**Task 6.1-6.5**: 验证预算图表显示正确 +- 启动后端：`dotnet run --project WebApi/WebApi.csproj` +- 启动前端：`cd Web && pnpm dev` +- 打开预算页面，点击"使用情况"或"完成情况"旁的感叹号图标 +- 验证: + - 明细弹窗显示完整的 HTML 表格（非"暂无数据"） + - 燃尽图显示波动曲线（非直线） + - 检查前端 `BudgetChartAnalysis.vue:603` 和 `:629` 行的 fallback 逻辑 + +**Task 8.4-8.6**: 端到端验证 +- 手动测试所有修复的 bug +- 清除浏览器缓存并重新测试 +- 验证控制台无错误或警告 + +--- + +### Bug #6 调查 (低优先级) - Task 7.1-7.7 + +**问题**: 预算卡片金额与关联账单列表金额不一致 + +**可能原因**: +1. 日期范围不一致 +2. 硬性预算的虚拟消耗未在账单列表中显示 + +**调查步骤**: +1. 在测试环境中打开预算页面 +2. 点击预算卡片的"查询关联账单"按钮 +3. 对比金额 +4. 检查预算是否标记为硬性预算（📌） +5. 验证虚拟消耗计算逻辑 +6. 检查日期范围是否一致 +7. 根据分析结果决定是否需要修复或添加提示 + +--- + +## 📊 测试结果 + +### 后端测试 +```bash +dotnet test +``` +**结果**: ✅ 已通过! - 失败: 0，通过: 212，总计: 212 + +### 前端 Lint +```bash +cd Web && pnpm lint +``` +**结果**: ✅ 通过 (0 errors, 39 warnings - 都是代码风格警告) + +### 前端构建 +```bash +cd Web && pnpm build +``` +**结果**: ✅ 构建成功 (11.44s) + +--- + +## 🚀 下一步操作 + +### 立即可做 +1. **启动服务进行手动验证**: + ```bash + # 终端 1: 启动后端 + dotnet run --project WebApi/WebApi.csproj + + # 终端 2: 启动前端 + cd Web && pnpm dev + ``` + +2. **验证清单**: + - [ ] 预算明细弹窗显示 HTML 表格 + - [ ] 燃尽图显示波动曲线 + - [ ] 底部导航"统计"按钮正常跳转 + - [ ] 账单删除功能弹出确认对话框 + - [ ] 控制台无 `van-datetime-picker` 警告 + +3. **可选**: 调查 Bug #6（低优先级） + +### 完成后 +- 提交代码: `git add . && git commit -m "fix: 修复预算统计数据丢失和UI问题"` +- 归档变更: 使用 `/opsx-archive fix-budget-and-ui-bugs` + +--- + +## 📝 技术说明 + +### API 变更 +**GET `/api/budget/stats/{category}`** 响应结构变更: + +```typescript +// 新增字段 +interface BudgetStatsDetail { + limit: number; + current: number; + remaining: number; + usagePercentage: number; + trend: (number | null)[]; // ⬅️ 新增: 每日/每月累计金额数组 + description: string; // ⬅️ 新增: HTML 格式详细说明 +} +``` + +**向后兼容**: 旧版前端仍可正常工作（只是无法使用新字段） + +--- + +**生成时间**: 2026-02-14 11:16 +**实施者**: OpenCode AI Assistant +**OpenSpec 变更路径**: `openspec/changes/fix-budget-and-ui-bugs/` diff --git a/.doc/bug-handoff-document.md b/.doc/bug-handoff-document.md new file mode 100644 index 0000000..bf0a1e0 --- /dev/null +++ b/.doc/bug-handoff-document.md @@ -0,0 +1,218 @@ +# Bug修复交接文档 + +**日期**: 2026-02-14 +**变更名称**: `fix-budget-and-ui-bugs` +**OpenSpec路径**: `openspec/changes/fix-budget-and-ui-bugs/` +**状态**: 已创建变更目录，待创建artifacts + +--- + +## 发现的Bug汇总 (共6个) + +### Bug #1: 统计页面路由无法跳转 +**影响**: 底部导航栏 +**问题**: 点击底部导航的"统计"标签后无法正常跳转 +**原因**: 导航栏配置的路由可能不正确，实际统计页面路由是 `/statistics-v2` +**位置**: `Web/src/router/index.js` 和底部导航配置 + +--- + +### Bug #2: 删除账单功能无响应 +**影响**: 日历页面账单详情弹窗 +**问题**: 点击账单详情弹窗中的"删除"按钮后，弹窗不关闭，账单未被删除 +**原因**: 删除按钮的点击事件可能未正确绑定，或需要二次确认对话框但未弹出 +**位置**: 日历页面的账单详情组件 + +--- + +### Bug #3: Console警告 van-datetime-picker组件未找到 +**影响**: 全局 +**问题**: 控制台显示 `Failed to resolve component: van-datetime-picker` +**原因**: Vant组件未正确导入或注册 +**位置**: 全局组件注册 + +--- + +### Bug #4: 预算明细弹窗显示"暂无数据" ⭐⭐⭐ +**影响**: 预算页面(支出/收入标签) +**问题**: 点击"使用情况"或"完成情况"旁的感叹号图标，弹出的"预算额度/实际详情"对话框显示"暂无数据" + +**根本原因**: +1. ✅ **后端Service层**正确生成了 `Description` 字段 + - `BudgetStatsService.cs` 第280行和495行调用 `GenerateMonthlyDescription` 和 `GenerateYearlyDescription` + - 生成HTML格式的详细描述（包含表格和计算公式） + +2. ✅ **后端DTO层**有 `Description` 字段 + - `Service/Budget/BudgetService.cs` 第525行：`public string Description { get; set; } = string.Empty;` + +3. ❌ **Application层丢失数据** + - `Application/BudgetApplication.cs` 第80-96行在映射时**没有包含 `Description` 字段** + +4. ❌ **API响应DTO缺少字段** + - `Application/Dto/BudgetDto.cs` 第64-70行的 `BudgetStatsDetail` 类**没有定义 `Description` 属性** + +**前端显示逻辑**: +- `Web/src/components/Budget/BudgetChartAnalysis.vue` 第199-203行 +- 弹窗内容: `v-html="activeDescTab === 'month' ? (overallStats.month?.description || '

暂无数据

') : ..."` + +**修复方案**: +1. 在 `BudgetStatsDetail` (Application/Dto/BudgetDto.cs:64-70) 添加 `Description` 字段 +2. 在 `BudgetApplication.GetCategoryStatsAsync` (Application/BudgetApplication.cs:80-96) 映射 `Description` 字段 + +--- + +### Bug #5: 燃尽图显示为直线 ⭐⭐⭐ +**影响**: 预算页面(支出/收入/计划)的月度和年度燃尽图 +**问题**: 实际燃尽/积累线显示为直线，无法看到真实的支出/收入趋势波动 + +**根本原因**: +1. ✅ **后端Service层**正确计算并填充了 `Trend` 字段 + - `BudgetStatsService.cs` 第231行: `result.Trend.Add(adjustedAccumulated);` + - Trend是每日/每月累计金额的数组 + +2. ✅ **后端DTO层**有 `Trend` 字段 + - `Service/Budget/BudgetService.cs` 第520行：`public List Trend { get; set; } = [];` + +3. ❌ **Application层丢失数据** + - `Application/BudgetApplication.cs` 第80-96行在映射时**没有包含 `Trend` 字段** + +4. ❌ **API响应DTO缺少字段** + - `Application/Dto/BudgetDto.cs` 第64-70行的 `BudgetStatsDetail` 类**没有定义 `Trend` 属性** + +**前端Fallback行为**: +- `Web/src/components/Budget/BudgetChartAnalysis.vue` 第591行: `const trend = props.overallStats.month.trend || []` +- 当 `trend.length === 0` 时（第603行和第629行），使用线性估算： + - 支出: `actualRemaining = totalBudget - (currentExpense * i / currentDay)` (第616行) + - 收入: `actualAccumulated = Math.min(totalBudget, currentExpense * i / currentDay)` (第638行) +- 导致"实际燃尽/积累"线是一条**直线** + +**修复方案**: +1. 在 `BudgetStatsDetail` (Application/Dto/BudgetDto.cs:64-70) 添加 `Trend` 字段 +2. 在 `BudgetApplication.GetCategoryStatsAsync` (Application/BudgetApplication.cs:80-96) 映射 `Trend` 字段 + +--- + +### Bug #6: 预算卡片金额与关联账单列表金额不一致 ⭐ +**影响**: 预算页面，点击预算卡片的"查询关联账单"按钮 +**问题**: 显示的关联账单列表中的金额总和，与预算卡片上显示的"实际"金额不一致 + +**可能原因**: +1. **日期范围不一致**: + - 预算卡片 `current`: 使用 `GetPeriodRange` 计算（BudgetService.cs:410-432） + - 月度: 当月1号 00:00:00 到当月最后一天 23:59:59 + - 年度: 当年1月1号到12月31日 23:59:59 + - 关联账单查询: 使用 `budget.periodStart` 和 `budget.periodEnd` (BudgetCard.vue:470-471) + - **如果两者不一致，会导致查询范围不同** + +2. **硬性预算的虚拟消耗**: + - 标记为📌的硬性预算（生活费、车贷等），如果没有实际交易记录，后端按天数比例虚拟累加金额（BudgetService.cs:376-405） + - 前端查询账单列表只能查到实际交易记录，查不到虚拟消耗 + - **导致: 卡片显示金额 > 账单列表金额总和** + +**需要验证**: +1. `BudgetResult` 中 `PeriodStart` 和 `PeriodEnd` 的赋值逻辑 +2. 硬性预算虚拟消耗的处理 +3. 前端是否需要显示虚拟消耗提示 + +**修复思路**: +- 选项1: 确保 `periodStart/periodEnd` 与 `GetPeriodRange` 一致 +- 选项2: 在账单列表中显示虚拟消耗的说明/提示 +- 选项3: 提供切换按钮，允许显示/隐藏虚拟消耗 + +--- + +## 共性问题分析 + +**Bug #4 和 #5 的共同根源**: +- `Application/Dto/BudgetDto.cs` 中 `BudgetStatsDetail` 类（第64-70行）定义不完整 +- 缺少字段: + - `Description` (string) - 用于明细弹窗 + - `Trend` (List) - 用于燃尽图 + +**当前定义**: +```csharp +public record BudgetStatsDetail +{ + public decimal Limit { get; init; } + public decimal Current { get; init; } + public decimal Remaining { get; init; } + public decimal UsagePercentage { get; init; } +} +``` + +**需要补充**: +```csharp +public record BudgetStatsDetail +{ + public decimal Limit { get; init; } + public decimal Current { get; init; } + public decimal Remaining { get; init; } + public decimal UsagePercentage { get; init; } + public List Trend { get; init; } = new(); // ⬅️ 新增 + public string Description { get; init; } = string.Empty; // ⬅️ 新增 +} +``` + +--- + +## 关键文件清单 + +### 后端文件 +- `Service/Budget/BudgetStatsService.cs` - 统计计算逻辑，生成Description和Trend +- `Service/Budget/BudgetService.cs` - BudgetStatsDto定义（含Description和Trend） +- `Application/BudgetApplication.cs` - DTO映射逻辑（需要修改） +- `Application/Dto/BudgetDto.cs` - API响应DTO定义（需要修改） +- `WebApi/Controllers/BudgetController.cs` - API控制器 + +### 前端文件 +- `Web/src/components/Budget/BudgetChartAnalysis.vue` - 图表和明细弹窗组件 +- `Web/src/components/Budget/BudgetCard.vue` - 预算卡片组件，包含账单查询逻辑 +- `Web/src/router/index.js` - 路由配置（Bug #1） + +--- + +## 下一步行动 + +### 立即执行 +```bash +cd D:/codes/others/EmailBill +openspec status --change "fix-budget-and-ui-bugs" +``` + +### OpenSpec工作流 +1. 使用 `/opsx-continue` 或 `/opsx-ff` 继续创建artifacts +2. 变更已创建在: `openspec/changes/fix-budget-and-ui-bugs/` +3. 需要创建的artifacts (按schema要求): + - Problem Statement + - Tasks + - 其他必要的artifacts + +### 优先级建议 +1. **高优先级 (P0)**: Bug #4, #5 - 影响核心功能，修复简单（只需补充DTO字段） +2. **中优先级 (P1)**: Bug #1, #2 - 影响用户体验 +3. **低优先级 (P2)**: Bug #3, #6 - 影响较小或需要更多分析 + +--- + +## 测试验证点 + +修复后需要验证: +1. ✅ 预算明细弹窗显示完整的HTML表格和计算公式 +2. ✅ 燃尽图显示真实的波动曲线而非直线 +3. ✅ 底部导航可以正常跳转到统计页面 +4. ✅ 删除账单功能正常工作 +5. ✅ 控制台无van-datetime-picker警告 +6. ✅ 预算卡片金额与账单列表金额一致（或有明确说明差异原因） + +--- + +## 联系信息 +- 前端服务: http://localhost:5173 +- 后端服务: http://localhost:5000 +- 浏览器已打开，测试环境就绪 + +--- + +**生成时间**: 2026-02-14 10:30 +**Token使用**: 96418/200000 (48%) +**下一个Agent**: 请继续 OpenSpec 工作流创建 artifacts 并实施修复 diff --git a/.doc/category-visual-mapping.md b/.doc/category-visual-mapping.md new file mode 100644 index 0000000..3d09c3e --- /dev/null +++ b/.doc/category-visual-mapping.md @@ -0,0 +1,115 @@ +# 分类名称到视觉元素的映射规则 + +## 目的 + +本文档定义了将分类名称映射到具体视觉元素的规则，帮助 AI 生成可识别性强的简约图标。 + +## 映射原则 + +1. **语义优先**: 根据分类名称的字面意思选择对应的视觉元素 +2. **几何简约**: 使用简单的几何形状表达，避免复杂细节 +3. **行业通用**: 使用行业内通用的符号和图标元素 +4. **视觉区分**: 不同分类的图标应具有明显的视觉差异 + +## 常见分类映射规则 + +### 餐饮类 +| 分类名称 | 视觉元素 | 几何特征 | 颜色建议 | +|---------|----------|-----------|----------| +| 餐饮 | 餐具（刀叉、勺子） | 线条简约，轮廓清晰 | 暖色系（橙色、红色） | +| 外卖 | 外卖盒、头盔 | 立方体轮廓 | 橙色 | +| 早餐 | 咖啡杯、面包圈 | 圆形为主 | 黄色 | +| 午餐 | 餐盘、碗 | 圆形或椭圆形 | 绿色 | +| 晚餐 | 烛光、酒杯 | 细长线条 | 紫色 | + +### 交通类 +| 分类名称 | 视觉元素 | 几何特征 | 颜色建议 | +|---------|----------|-----------|----------| +| 交通 | 车辆轮廓（方向盘、车轮） | 圆形和矩形组合 | 蓝色系 | +| 公交 | 公交车轮廓 | 长方形+圆形 | 蓝色 | +| 地铁 | 地铁标志、轨道 | 圆形+线条 | 红色 | +| 出租车 | 出租车标志、顶灯 | 方形+三角形 | 黄色 | +| 私家车 | 轿车轮廓 | 流线型 | 灰色 | + +### 购物类 +| 分类名称 | 视觉元素 | 几何特征 | 颜色建议 | +|---------|----------|-----------|----------| +| 购物 | 购物车、购物袋 | 圆角矩形 | 粉色 | +| 超市 | 收银台、条形码 | 矩形+线条 | 红色 | +| 百货 | 大厦轮廓 | 多层矩形 | 橙色 | + +### 娱乐类 +| 分类名称 | 视觉元素 | 几何特征 | 颜色建议 | +|---------|----------|-----------|----------| +| 娱乐 | 播放按钮、音符 | 圆形+三角形 | 紫色 | +| 电影 | 胶卷、放映机 | 矩形+圆形 | 红色 | +| 音乐 | 音符、耳机 | 波浪线+圆形 | 蓝色 | + +### 居住类 +| 分类名称 | 视觉元素 | 几何特征 | 颜色建议 | +|---------|----------|-----------|----------| +| 居住 | 房子轮廓 | 梯形+矩形 | 蓝色 | +| 租房 | 钥匙、门 | 圆形+矩形 | 橙色 | +| 水电 | 闪电、水滴 | 三角形+圆形 | 黄色 | +| 网络 | WiFi 信号 | 扇形波浪 | 蓝色 | + +### 医疗类 +| 分类名称 | 视觉元素 | 几何特征 | 颜色建议 | +|---------|----------|-----------|----------| +| 医疗 | 十字、听诊器 | 圆形+线条 | 红色或绿色 | +| 药品 | 药丸形状 | 椭圆形 | 蓝色 | +| 体检 | 心跳线、体温计 | 波浪线+直线 | 红色 | + +### 教育类 +| 分类名称 | 视觉元素 | 几何特征 | 颜色建议 | +|---------|----------|-----------|----------| +| 教育 | 书本、铅笔 | 矩形+三角形 | 蓝色 | +| 培训 | 黑板、讲台 | 矩形 | 棕色 | +| 学习 | 笔记本、笔 | 矩形+线条 | 绿色 | + +### 抽象分类 + +对于语义模糊的分类，使用几何形状和颜色编码区分： + +| 分类名称 | 几何形状 | 颜色编码 | 视觉特征 | +|---------|----------|----------|----------| +| 其他 | 圆形 | #9E9E9E（灰色） | 纯色填充，无装饰 | +| 通用 | 正方形 | #BDBDBD（浅灰） | 纯色填充，无装饰 | +| 未知 | 三角形 | #E0E0E0（极浅灰） | 纯色填充，无装饰 | + +## 设计约束 + +1. **尺寸**: 24x24，viewBox="0 0 24 24" +2. **风格**: 扁平化、单色、简约 +3. **细节**: 控制在最小化范围内，避免过度复杂 +4. **对比度**: 高对比度，确保小尺寸下清晰可辨 +5. **填充**: 使用单一填充色，避免渐变和阴影 + +## 扩展规则 + +对于未列出的分类，按照以下原则推导： + +1. **提取关键词**: 从分类名称中提取核心词汇 +2. **查找通用符号**: 对应的通用图标符号 +3. **简化为几何**: 将符号简化为基本几何形状 +4. **选择颜色**: 根据行业选择常见颜色方案 + +### 示例推导 + +**分类名称**: "健身" +1. 关键词: "健身" +2. 通用符号: 哑铃、跑步机 +3. 几何简化: 两个圆形连接横杠（哑铃简化版） +4. 颜色: 蓝色或绿色（运动色） + +**分类名称**: "理发" +1. 关键词: "理发" +2. 通用符号: 剪刀、理发师椅 +3. 几何简化: 两个交叉的椭圆（剪刀简化版） +4. 颜色: 红色或紫色 + +## 更新日志 + +| 日期 | 版本 | 变更内容 | +|------|------|----------| +| 2026-02-14 | 1.0.0 | 初始版本，定义基本映射规则 | diff --git a/.doc/icon-prompt-testing-guide.md b/.doc/icon-prompt-testing-guide.md new file mode 100644 index 0000000..6e340d2 --- /dev/null +++ b/.doc/icon-prompt-testing-guide.md @@ -0,0 +1,348 @@ +# 图标生成优化 - 测试与部署指南 + +本文档说明如何手动完成剩余的测试和部署任务。 + +## 第三阶段：测试与验证（手动部分） + +### 任务 3.5：在测试环境批量生成新图标 + +**目的**：验证新提示词在测试环境能够正常生成图标 + +**步骤**： +1. 确保测试环境已部署最新代码（包含新的 IconPromptSettings 和 ClassificationIconPromptProvider） +2. 在测试环境的 `appsettings.json` 中配置： + ```json + { + "IconPromptSettings": { + "EnableNewPrompt": true, + "GrayScaleRatio": 1.0, + "StyleStrength": 0.7, + "ColorScheme": "single-color" + } + } + ``` +3. 查询数据库中已有的分类列表： + ```sql + SELECT Name, Type FROM TransactionCategories WHERE Icon IS NOT NULL AND Icon != ''; + ``` +4. 手动触发图标生成任务（或等待定时任务自动执行） +5. 观察日志，确认： + - 成功为每个分类生成了 5 个 SVG 图标 + - 使用了新版提示词（日志中应显示"新版"） + +**预期结果**： +- 所有分类成功生成 5 个 SVG 图标 +- 图标内容为 JSON 数组格式 +- 日志显示"使用新版提示词" + +### 任务 3.6：对比新旧图标的可识别性 + +**目的**：评估新图标相比旧图标的可识别性提升 + +**步骤**： +1. 从数据库中提取一些分类的旧图标数据： + ```sql + SELECT Name, Icon FROM TransactionCategories LIMIT 10; + ``` +2. 手动为相同分类生成新图标（或使用 3.5 的结果） +3. 将图标数据解码为实际的 SVG 代码 +4. 在浏览器中打开 SVG 文件进行视觉对比 + +**评估维度**： +| 维度 | 旧图标 | 新图标 | 说明 | +|------|---------|---------|------| +| 复杂度 | 高（渐变、多色、细节多） | 低（单色、扁平、细节少） | - | +| 可识别性 | 较低（细节过多导致混淆） | 较高（几何简约，直观易懂） | - | +| 颜色干扰 | 多色和渐变导致视觉混乱 | 单色避免颜色干扰 | - | +| 一致性 | 5 个图标风格差异大，不易识别 | 5 个图标风格统一，易于识别 | - | + +**记录方法**： +创建对比表格： +| 分类名称 | 旧图标可识别性 | 新图标可识别性 | 提升程度 | +|---------|----------------|----------------|----------| +| 餐饮 | 3/5 | 5/5 | +2 | +| 交通 | 2/5 | 4/5 | +2 | +| 购物 | 3/5 | 5/5 | +2 | + +### 任务 3.7-3.8：编写集成测试 + +由于这些任务需要实际调用 AI 服务生成图标并验证结果，建议采用以下方法： + +**方法 A：单元测试模拟** +在测试中使用 Mock 的 AI 服务，返回预设的图标数据，然后验证： +- 相同分类名称和类型 → 返回相同的图标结构 +- 不同分类名称或类型 → 返回不同的图标结构 + +**方法 B：真实环境测试** +在有真实 AI API key 的测试环境中执行： +```csharp +[Fact] +public async Task GetPrompt_相同分类_应生成结构一致的图标() +{ + // Arrange + var categoryName = "餐饮"; + var categoryType = TransactionType.Expense; + + // Act + var icon1 = await _aiService.GenerateCategoryIconsAsync(categoryName, categoryType); + var icon2 = await _aiService.GenerateCategoryIconsAsync(categoryName, categoryType); + + // Assert + icon1.Should().NotBeNull(); + icon2.Should().NotBeNull(); + // 验证图标结构相似性（具体实现需根据实际图标格式） +} +``` + +**注意事项**： +- 真实环境测试会增加测试时间和成本 +- 建议 CI/CD 环境中使用 Mock，本地开发环境使用真实 API +- 添加测试标记区分需要真实 API 的测试 + +### 任务 3.9：A/B 测试 + +**目的**：收集真实用户对新图标的反馈 + +**步骤**： +1. 确保灰度发布开关已开启（EnableNewPrompt = true） +2. 设置灰度比例为 10%（GrayScaleRatio = 0.1） +3. 部署到生产环境 +4. 观察 1-2 天，收集： + - 图标生成成功率（生成成功的数量 / 总生成请求数） + - 用户反馈（通过客服、问卷、应用内反馈等） + - 用户对图标的满意度评分 + +**反馈收集方法**： +- 应用内反馈按钮：在分类设置页面添加"反馈图标质量"按钮 +- 用户问卷：通过邮件或应用内问卷收集用户对新图标的评价 +- 数据分析：统计用户选择新图标的频率 + +**评估指标**： +| 指标 | 目标值 | 说明 | +|------|---------|------| +| 图标生成成功率 | > 95% | 确保新提示词能稳定生成图标 | +| 用户满意度 | > 4.0/5.0 | 用户对新图标的整体满意度 | +| 旧图标选择比例 | < 30% | 理想情况下用户更倾向选择新图标 | + +### 任务 3.10：根据测试结果微调 + +**调整方向**： + +1. **如果可识别性仍不够**： + - 增加 `StyleStrength` 值（如从 0.7 提升到 0.85） + - 在提示词中添加更多"去除细节"的指令 + +2. **如果图标过于简单**： + - 降低 `StyleStrength` 值（如从 0.7 降低到 0.6） + - 在提示词中放宽"保留必要细节"的约束 + +3. **如果某些特定分类识别困难**： + - 更新 `category-visual-mapping.md` 文档，为该分类添加更精确的视觉元素描述 + - 在提示词模板中为该分类添加特殊说明 + +4. **如果生成失败率高**： + - 检查 AI API 响应，分析失败原因 + - 可能需要调整提示词长度或结构 + - 考虑增加 timeout 参数 + +## 第四阶段：灰度发布 + +### 任务 4.1：测试环境验证 + +已在任务 3.5 中完成。 + +### 任务 4.2-4.3：配置灰度发布 + +配置已在 `appsettings.json` 中添加： +- `EnableNewPrompt`: 灰度发布总开关 +- `GrayScaleRatio`: 灰度比例（0.0-1.0） + +**配置建议**： +- 初始阶段：0.1（10% 用户） +- 稳定阶段：0.5（50% 用户） +- 全量发布前：0.8（80% 用户） +- 正式全量：1.0（100% 用户）或 `EnableNewPrompt: true` 且移除灰度逻辑 + +### 任务 4.4：灰度逻辑实现 + +已在 `ClassificationIconPromptProvider.ShouldUseNewPrompt()` 方法中实现： +```csharp +private bool ShouldUseNewPrompt() +{ + if (!_config.EnableNewPrompt) + { + return false; + } + + var randomValue = _random.NextDouble(); + return randomValue < _config.GrayScaleRatio; +} +``` + +**验证方法**： +- 在日志中查看是否同时出现"新版"和"旧版"提示词 +- 检查新版和旧版的比例是否接近配置的灰度比例 + +### 任务 4.5：部署灰度版本 + +**部署步骤**： +1. 准备部署包（包含更新后的代码和配置） +2. 在 `appsettings.json` 中设置： + ```json + { + "IconPromptSettings": { + "EnableNewPrompt": true, + "GrayScaleRatio": 0.1, + "StyleStrength": 0.7, + "ColorScheme": "single-color" + } + } + ``` +3. 部署到生产环境 +4. 验证部署成功（检查应用日志、健康检查端点） + +### 任务 4.6：监控图标生成成功率 + +**监控方法**： +1. 在 `SmartHandleService.GenerateCategoryIconsAsync()` 方法中添加指标记录： + - 生成成功计数 + - 生成失败计数 + - 生成耗时 + - 使用的提示词版本（新版/旧版） + +2. 导入到监控系统（如 Application Insights, Prometheus） + +3. 设置告警规则： + - 成功率 < 90% 时发送告警 + - 平均耗时 > 30s 时发送告警 + +**SQL 查询生成失败分类**： +```sql +SELECT Name, Type, COUNT(*) as FailCount +FROM IconGenerationLogs +WHERE Status = 'Failed' +GROUP BY Name, Type +ORDER BY FailCount DESC +LIMIT 10; +``` + +### 任务 4.7：监控用户反馈 + +**监控渠道**： +1. 应用内反馈（如果已实现） +2. 客服系统反馈记录 +3. 用户问卷调查结果 + +**反馈分析维度**： +- 新旧图标满意度对比 +- 具体分类的反馈差异 +- 意见类型（正面/负面/中性） + +### 任务 4.8：逐步扩大灰度比例 + +**时间规划**： +| 阶段 | 灰度比例 | 持续时间 | 验证通过条件 | +|------|----------|----------|------------| +| 阶段 1 | 10% | 3-5 天 | 成功率 > 95%，用户满意度 > 4.0 | +| 阶段 2 | 50% | 3-5 天 | 成功率 > 95%，用户满意度 > 4.0 | +| 阶段 3 | 80% | 3-5 天 | 成功率 > 95%，用户满意度 > 4.0 | +| 全量 | 100% | - | 长期运行 | + +**扩容操作**： +只需修改 `appsettings.json` 中的 `GrayScaleRatio` 值并重新部署。 + +### 任务 4.9：回滚策略 + +**触发回滚的条件**： +- 成功率 < 90% 且持续 2 天以上 +- 用户满意度 < 3.5 且负面反馈占比 > 30% +- 出现重大 bug 导致用户无法正常使用 + +**回滚步骤**： +1. 修改 `appsettings.json`： + ```json + { + "IconPromptSettings": { + "EnableNewPrompt": false + } + } + ``` +2. 部署配置更新（无需重新部署代码） +3. 验证所有用户都使用旧版提示词（日志中应只显示"旧版"） + +**回滚后**： +- 分析失败原因 +- 修复问题 +- 从小灰度比例（5%）重新开始测试 + +### 任务 4.10：记录提示词迭代 + +**记录格式**： +在 `.doc/prompt-iteration-history.md` 中维护迭代历史： + +| 版本 | 日期 | 变更内容 | 灰度比例 | 用户反馈 | 结果 | +|------|------|----------|----------|----------|------| +| 1.0.0 | 2026-02-14 | 初始版本，简约风格提示词 | 10% | - | - | +| 1.1.0 | 2026-02-XX | 调整风格强度为 0.8，增加去除细节指令 | 50% | 满意度提升至 4.2 | 扩容至全量 | + +## 第五阶段：文档与清理 + +### 任务 5.1-5.4：文档更新 + +已创建/需要更新的文档： +1. ✅ `.doc/category-visual-mapping.md` - 分类名称到视觉元素的映射规则 +2. ✅ `.doc/icon-prompt-testing-guide.md` - 本文档 +3. ⏳ API 文档 - 需更新说明 IconPromptSettings 的参数含义 +4. ⏳ 运维文档 - 需说明如何调整提示词模板和风格参数 +5. ⏳ 故障排查文档 - 需添加图标生成问题的排查步骤 +6. ⏳ 部署文档 - 需说明灰度发布的操作流程 + +### 任务 5.5：清理测试代码 + +**清理清单**： +- 移除所有 `Console.WriteLine` 调试语句 +- 移除临时的 `TODO` 注释 +- 移除仅用于测试的代码分支 + +### 任务 5.6：代码 Review + +**Review 检查点**： +- ✅ 所有类和方法都有 XML 文档注释 +- ✅ 遵循项目代码风格（命名、格式） +- ✅ 无使用 `var` 且类型可明确推断的地方 +- ✅ 无硬编码的魔法值（已在配置中） +- ✅ 异常处理完善 +- ✅ 日志记录适当 + +### 任务 5.7-5.8：测试运行 + +**后端测试**： +```bash +cd WebApi.Test +dotnet test --filter "FullyQualifiedName~ClassificationIconPromptProviderTest" +``` + +**前端测试**： +```bash +cd Web +pnpm lint +pnpm build +``` + +## 总结 + +自动化部分（已完成）： +- ✅ 第一阶段：提示词模板化（1.1-1.10） +- ✅ 第二阶段：提示词优化（2.1-2.10） +- ✅ 第三阶段单元测试（3.1-3.4） + +手动/灰度发布部分（需人工操作）： +- ⏳ 第三阶段手动测试（3.5-3.10） +- ⏳ 第四阶段：灰度发布（4.1-4.10） +- ⏳ 第五阶段：文档与清理（5.1-5.8） + +**下一步操作**： +1. 部署到测试环境并执行任务 3.5-3.8 +2. 根据测试结果调整配置（任务 3.10） +3. 部署到生产环境并开始灰度发布（任务 4.5-4.10） +4. 完成文档更新和代码清理（任务 5.1-5.8） diff --git a/Application/BudgetApplication.cs b/Application/BudgetApplication.cs index e540121..63c9604 100644 --- a/Application/BudgetApplication.cs +++ b/Application/BudgetApplication.cs @@ -84,14 +84,18 @@ public class BudgetApplication( Limit = result.Month.Limit, Current = result.Month.Current, Remaining = result.Month.Limit - result.Month.Current, - UsagePercentage = result.Month.Rate + UsagePercentage = result.Month.Rate, + Trend = result.Month.Trend, + Description = result.Month.Description }, Year = new BudgetStatsDetail { Limit = result.Year.Limit, Current = result.Year.Current, Remaining = result.Year.Limit - result.Year.Current, - UsagePercentage = result.Year.Rate + UsagePercentage = result.Year.Rate, + Trend = result.Year.Trend, + Description = result.Year.Description } }; } diff --git a/Application/Dto/BudgetDto.cs b/Application/Dto/BudgetDto.cs index 8f00ba4..9b86c40 100644 --- a/Application/Dto/BudgetDto.cs +++ b/Application/Dto/BudgetDto.cs @@ -67,6 +67,8 @@ public record BudgetStatsDetail public decimal Current { get; init; } public decimal Remaining { get; init; } public decimal UsagePercentage { get; init; } + public List Trend { get; init; } = []; + public string Description { get; init; } = string.Empty; } /// diff --git a/Application/TransactionCategoryApplication.cs b/Application/TransactionCategoryApplication.cs index 5c44f16..cb4bc83 100644 --- a/Application/TransactionCategoryApplication.cs +++ b/Application/TransactionCategoryApplication.cs @@ -17,6 +17,7 @@ public interface ITransactionCategoryApplication Task BatchCreateAsync(List requests); Task GenerateIconAsync(GenerateIconRequest request); Task UpdateSelectedIconAsync(UpdateSelectedIconRequest request); + Task DeleteIconAsync(long classificationId); } /// @@ -215,6 +216,25 @@ public class TransactionCategoryApplication( } } + public async Task DeleteIconAsync(long classificationId) + { + var category = await categoryRepository.GetByIdAsync(classificationId); + if (category == null) + { + throw new NotFoundException("分类不存在"); + } + + // 将 Icon 字段设置为 null + category.Icon = null; + category.UpdateTime = DateTime.Now; + + var success = await categoryRepository.UpdateAsync(category); + if (!success) + { + throw new BusinessException("删除图标失败"); + } + } + private static CategoryResponse MapToResponse(TransactionCategory category) { return new CategoryResponse diff --git a/Service/AI/ClassificationIconPromptProvider.cs b/Service/AI/ClassificationIconPromptProvider.cs new file mode 100644 index 0000000..af8e988 --- /dev/null +++ b/Service/AI/ClassificationIconPromptProvider.cs @@ -0,0 +1,113 @@ +namespace Service.AI; + +/// +/// 分类图标生成提示词提供器实现 +/// +public class ClassificationIconPromptProvider : IClassificationIconPromptProvider +{ + private readonly ILogger _logger; + private readonly IconPromptSettings _config; + private readonly Random _random = new(); + + public ClassificationIconPromptProvider( + ILogger logger, + IOptions config) + { + _logger = logger; + _config = config.Value; + } + + public string GetPrompt(string categoryName, TransactionType categoryType) + { + var typeText = GetCategoryTypeText(categoryType); + var useNewPrompt = ShouldUseNewPrompt(); + + var template = useNewPrompt + ? _config.DefaultPromptTemplate + : _config.OldDefaultPromptTemplate; + + string prompt; + if (useNewPrompt) + { + prompt = PromptTemplateEngine.ReplaceForIconGeneration( + template, + categoryName, + typeText, + _config.ColorScheme, + _config.StyleStrength); + } + else + { + prompt = PromptTemplateEngine.ReplaceForIconGeneration( + template, + categoryName, + typeText, + _config.ColorScheme, + 0); + } + + _logger.LogDebug("使用 {PromptType} 提示词生成图标，分类：{CategoryName}", + useNewPrompt ? "新版" : "旧版", + categoryName); + + return prompt; + } + + public string GetSingleIconPrompt(string categoryName, TransactionType categoryType) + { + var typeText = GetCategoryTypeText(categoryType); + var useNewPrompt = ShouldUseNewPrompt(); + + var template = useNewPrompt + ? _config.SingleIconPromptTemplate + : _config.OldSingleIconPromptTemplate; + + string prompt; + if (useNewPrompt) + { + prompt = PromptTemplateEngine.ReplaceForIconGeneration( + template, + categoryName, + typeText, + _config.ColorScheme, + _config.StyleStrength); + } + else + { + prompt = PromptTemplateEngine.ReplaceForIconGeneration( + template, + categoryName, + typeText, + _config.ColorScheme, + 0); + } + + _logger.LogDebug("使用 {PromptType} 提示词生成单个图标，分类：{CategoryName}", + useNewPrompt ? "新版" : "旧版", + categoryName); + + return prompt; + } + + private bool ShouldUseNewPrompt() + { + if (!_config.EnableNewPrompt) + { + return false; + } + + var randomValue = _random.NextDouble(); + return randomValue < _config.GrayScaleRatio; + } + + private static string GetCategoryTypeText(TransactionType categoryType) + { + return categoryType switch + { + TransactionType.Expense => "支出", + TransactionType.Income => "收入", + TransactionType.None => "不计入收支", + _ => "未知" + }; + } +} diff --git a/Service/AI/IClassificationIconPromptProvider.cs b/Service/AI/IClassificationIconPromptProvider.cs new file mode 100644 index 0000000..3d0f464 --- /dev/null +++ b/Service/AI/IClassificationIconPromptProvider.cs @@ -0,0 +1,23 @@ +namespace Service.AI; + +/// +/// 分类图标生成提示词提供器接口 +/// +public interface IClassificationIconPromptProvider +{ + /// + /// 获取分类图标生成的提示词（生成 5 个图标） + /// + /// 分类名称 + /// 分类类型（收入/支出） + /// 用于生成图标的提示词 + string GetPrompt(string categoryName, TransactionType categoryType); + + /// + /// 获取单个图标生成的提示词（仅生成 1 个图标） + /// + /// 分类名称 + /// 分类类型（收入/支出） + /// 用于生成单个图标的提示词 + string GetSingleIconPrompt(string categoryName, TransactionType categoryType); +} diff --git a/Service/AI/PromptTemplateEngine.cs b/Service/AI/PromptTemplateEngine.cs new file mode 100644 index 0000000..304f093 --- /dev/null +++ b/Service/AI/PromptTemplateEngine.cs @@ -0,0 +1,66 @@ +namespace Service.AI; + +/// +/// 提示词模板引擎，处理占位符替换 +/// +public class PromptTemplateEngine +{ + /// + /// 替换模板中的占位符 + /// + /// 模板字符串，支持 {{key}} 格式的占位符 + /// 占位符字典，key 为占位符名称（不含 {{ }}），value 为替换值 + /// 替换后的字符串 + public static string ReplacePlaceholders(string template, Dictionary placeholders) + { + if (string.IsNullOrEmpty(template) || placeholders == null || placeholders.Count == 0) + { + return template; + } + + var result = template; + foreach (var placeholder in placeholders) + { + var key = placeholder.Key; + var value = placeholder.Value ?? string.Empty; + result = result.Replace($"{{{{{key}}}}}", value); + } + + return result; + } + + /// + /// 替换模板中的占位符（简化版本） + /// + /// 模板字符串 + /// 分类名称 + /// 分类类型 + /// 颜色方案 + /// 风格强度（0.0-1.0） + /// 替换后的字符串 + public static string ReplaceForIconGeneration( + string template, + string categoryName, + string categoryType, + string colorScheme, + double styleStrength) + { + var strengthDescription = styleStrength switch + { + >= 0.9 => "极度简约（仅保留最核心元素）", + >= 0.7 => "高度简约（去除所有装饰）", + >= 0.5 => "简约（保留必要细节）", + _ => "适中" + }; + + var placeholders = new Dictionary + { + ["category_name"] = categoryName, + ["category_type"] = categoryType, + ["color_scheme"] = colorScheme, + ["style_strength"] = $"{styleStrength:F1} - {strengthDescription}" + }; + + return ReplacePlaceholders(template, placeholders); + } +} diff --git a/Service/AI/SmartHandleService.cs b/Service/AI/SmartHandleService.cs index da32d06..3a0643a 100644 --- a/Service/AI/SmartHandleService.cs +++ b/Service/AI/SmartHandleService.cs @@ -41,7 +41,8 @@ public class SmartHandleService( ILogger logger, ITransactionCategoryRepository categoryRepository, IOpenAiService openAiService, - IConfigService configService + IConfigService configService, + IClassificationIconPromptProvider iconPromptProvider ) : ISmartHandleService { public async Task SmartClassifyAsync(long[] transactionIds, Action<(string, string)> chunkAction) @@ -541,6 +542,32 @@ public class SmartHandleService( }; } + /// + /// 清理 AI 响应中的 markdown 代码块标记 + /// + private static string CleanMarkdownCodeBlock(string response) + { + var cleaned = response?.Trim() ?? string.Empty; + if (cleaned.StartsWith("```")) + { + // 移除开头的 ```json 或 ``` + var firstNewLine = cleaned.IndexOf('\n'); + if (firstNewLine > 0) + { + cleaned = cleaned.Substring(firstNewLine + 1); + } + + // 移除结尾的 ``` + if (cleaned.EndsWith("```")) + { + cleaned = cleaned.Substring(0, cleaned.Length - 3); + } + + cleaned = cleaned.Trim(); + } + return cleaned; + } + private async Task GetCategoryInfoAsync() { // 获取所有分类 @@ -649,46 +676,9 @@ public class SmartHandleService( { logger.LogInformation("正在为分类 {CategoryName} 生成 {IconCount} 个图标", categoryName, iconCount); - var typeText = categoryType == TransactionType.Expense ? "支出" : "收入"; + var systemPrompt = iconPromptProvider.GetPrompt(categoryName, categoryType); - var systemPrompt = """ - 你是一个专业的 SVG 图标设计师，擅长创作精美、富有表现力的图标。 - 请根据分类名称和类型，生成 5 个风格迥异、视觉效果突出的 SVG 图标。 - - 设计要求： - 1. 尺寸：24x24，viewBox="0 0 24 24" - 2. 色彩：使用丰富的渐变色和多色搭配，让图标更有吸引力和辨识度 - - 可以使用 或 创建渐变效果 - - 不同元素使用不同颜色，增加层次感 - - 根据分类含义选择合适的配色方案（如餐饮用暖色系、交通用蓝色系等） - 3. 设计风格：5 个图标必须风格明显不同，避免雷同 - - 第1个：扁平化风格，色彩鲜明，使用渐变 - - 第2个：线性风格，多色描边，细节丰富 - - 第3个：3D立体风格，使用阴影和高光效果 - - 第4个：卡通可爱风格，圆润造型，活泼配色 - - 第5个：现代简约风格，几何与曲线结合，优雅配色 - 4. 细节丰富：不要只用简单的几何图形，添加特征性的细节元素 - - 例如：餐饮可以加刀叉、蒸汽、食材纹理等 - - 交通可以加轮胎、车窗、尾气等 - - 每个图标要有独特的视觉记忆点 - 5. 图标要直观表达分类含义，让人一眼就能识别 - 6. 只返回 JSON 数组格式，包含 5 个完整的 SVG 字符串，不要有任何其他文字说明 - - 重要：每个 SVG 必须是自包含的完整代码，包含所有必要的 gradient 定义。 - """; - - var userPrompt = $""" - 分类名称：{categoryName} - 分类类型：{typeText} - - 请为这个分类生成 {iconCount} 个精美的、风格各异的彩色 SVG 图标。 - 确保每个图标都有独特的视觉特征，不会与其他图标混淆。 - - 返回格式（纯 JSON 数组，无其他内容）： - ["...", "...", "...", "...", "..."] - """; - - var response = await openAiService.ChatAsync(systemPrompt, userPrompt, timeoutSeconds: 60 * 10); + var response = await openAiService.ChatAsync(systemPrompt, "", timeoutSeconds: 60 * 10); if (string.IsNullOrWhiteSpace(response)) { @@ -696,6 +686,15 @@ public class SmartHandleService( return null; } + // 清理可能的 markdown 代码块标记 + response = CleanMarkdownCodeBlock(response); + + if (string.IsNullOrWhiteSpace(response)) + { + logger.LogWarning("清理后的 AI 响应为空，分类: {CategoryName}", categoryName); + return null; + } + // 验证返回的是有效的 JSON 数组 try { @@ -724,45 +723,66 @@ public class SmartHandleService( { logger.LogInformation("正在为分类 {CategoryName} 生成单个图标", categoryName); - var typeText = categoryType == TransactionType.Expense ? "支出" : "收入"; + // 使用单个图标生成的 Prompt（只生成 1 个图标，加快速度） + var systemPrompt = iconPromptProvider.GetSingleIconPrompt(categoryName, categoryType); - var systemPrompt = """ - 你是一个专业的SVG图标设计师。为预算分类生成极简风格的SVG图标。 - - 设计要求： - 1. 尺寸：24x24，viewBox="0 0 24 24" - 2. 使用丰富的渐变色和多色搭配，让图标更有吸引力 - 3. 图标要直观表达分类含义 - 4. 只返回SVG代码，不要有任何其他文字说明 - """; - - var userPrompt = $""" - 请为「{categoryName}」{typeText}分类生成一个精美的SVG图标。 - 直接返回SVG代码，无需解释。 - """; - - var svgContent = await openAiService.ChatAsync(systemPrompt, userPrompt, timeoutSeconds: 30); - if (string.IsNullOrWhiteSpace(svgContent)) + var stopwatch = System.Diagnostics.Stopwatch.StartNew(); + try { - logger.LogWarning("AI 未返回有效的图标数据，分类: {CategoryName}", categoryName); - return null; + // 增加超时时间到 180 秒（3 分钟） + var response = await openAiService.ChatAsync(systemPrompt, "", timeoutSeconds: 180); + + stopwatch.Stop(); + logger.LogInformation("AI 响应耗时: {ElapsedMs}ms，分类: {CategoryName}", stopwatch.ElapsedMilliseconds, categoryName); + + if (string.IsNullOrWhiteSpace(response)) + { + logger.LogWarning("AI 未返回有效的图标数据，分类: {CategoryName}", categoryName); + return null; + } + + // 清理可能的 markdown 代码块标记 + response = CleanMarkdownCodeBlock(response); + + if (string.IsNullOrWhiteSpace(response)) + { + logger.LogWarning("清理后的 AI 响应为空，分类: {CategoryName}", categoryName); + return null; + } + + // 解析返回的 JSON 数组，取第一个图标 + try + { + var icons = JsonSerializer.Deserialize>(response); + if (icons == null || icons.Count == 0) + { + logger.LogWarning("AI 未返回有效的图标数据，分类: {CategoryName}", categoryName); + return null; + } + + var svg = icons[0]; + logger.LogInformation("成功为分类 {CategoryName} 生成单个图标，总耗时: {ElapsedMs}ms", categoryName, stopwatch.ElapsedMilliseconds); + return svg; + } + catch (JsonException ex) + { + logger.LogError(ex, "解析 AI 返回的图标数据失败，分类: {CategoryName}，响应内容: {Response}", + categoryName, response.Length > 500 ? response.Substring(0, 500) + "..." : response); + return null; + } } - - // 提取SVG标签 - var svgMatch = System.Text.RegularExpressions.Regex.Match( - svgContent, - @"]*>.*?", - System.Text.RegularExpressions.RegexOptions.Singleline); - - if (!svgMatch.Success) + catch (TimeoutException) { - logger.LogWarning("生成的内容不包含有效的SVG标签，分类: {CategoryName}", categoryName); - return null; + stopwatch.Stop(); + logger.LogError("AI 请求超时（>180秒），分类: {CategoryName}，已等待: {ElapsedMs}ms", categoryName, stopwatch.ElapsedMilliseconds); + throw; + } + catch (Exception ex) + { + stopwatch.Stop(); + logger.LogError(ex, "AI 调用失败，分类: {CategoryName}，耗时: {ElapsedMs}ms", categoryName, stopwatch.ElapsedMilliseconds); + throw; } - - var svg = svgMatch.Value; - logger.LogInformation("成功为分类 {CategoryName} 生成单个图标", categoryName); - return svg; } /// diff --git a/Service/AppSettingModel/IconPromptSettings.cs b/Service/AppSettingModel/IconPromptSettings.cs new file mode 100644 index 0000000..261142c --- /dev/null +++ b/Service/AppSettingModel/IconPromptSettings.cs @@ -0,0 +1,220 @@ +namespace Service.AppSettingModel; + +/// +/// 图标生成提示词配置 +/// +public class IconPromptSettings +{ + public IconPromptSettings() + { + InitializeDefaultPrompts(); + } + + private void InitializeDefaultPrompts() + { + OldDefaultPromptTemplate = GetOldDefaultPrompt(); + OldSingleIconPromptTemplate = GetOldSingleIconPrompt(); + DefaultPromptTemplate = GetNewDefaultPrompt(); + SingleIconPromptTemplate = GetNewSingleIconPrompt(); + InitializeAbstractCategories(); + } + + private string GetOldDefaultPrompt() + { + return """ + 你是一个专业的 SVG 图标设计师，擅长创作精美、富有表现力的图标。 + 请根据分类名称和类型，生成 5 个风格迥异、视觉效果突出的 SVG 图标。 + + 分类名称：{{category_name}} + 分类类型：{{category_type}} + + 设计要求： + 1. 尺寸：24x24，viewBox="0 0 24 24" + 2. 色彩：使用丰富的渐变色和多色搭配，让图标更有吸引力和辨识度 + - 可以使用 或 创建渐变效果 + - 不同元素使用不同颜色，增加层次感 + - 根据分类含义选择合适的配色方案（如餐饮用暖色系、交通用蓝色系等） + 3. 设计风格：5 个图标必须风格明显不同，避免雷同 + - 第1个：扁平化风格，色彩鲜明，使用渐变 + - 第2个：线性风格，多色描边，细节丰富 + - 第3个：3D立体风格，使用阴影和高光效果 + - 第4个：卡通可爱风格，圆润造型，活泼配色 + - 第5个：现代简约风格，几何与曲线结合，优雅配色 + 4. 细节丰富：不要只用简单的几何图形，添加特征性的细节元素 + - 例如：餐饮可以加刀叉、蒸汽、食材纹理等 + - 交通可以加轮胎、车窗、尾气等 + - 每个图标要有独特的视觉记忆点 + 5. 图标要直观表达分类含义，让人一眼就能识别 + 6. 只返回 JSON 数组格式，包含 5 个完整的 SVG 字符串，不要有任何其他文字说明 + + 重要：每个 SVG 必须是自包含的完整代码，包含所有必要的 gradient 定义。 + + 返回格式： + ["...", "...", "...", "...", "..."] + """; + } + + private string GetOldSingleIconPrompt() + { + return """ + 你是一个专业的 SVG 图标设计师，擅长创作精美、富有表现力的图标。 + 请根据分类名称和类型，生成 1 个视觉突出的 SVG 图标。 + + 分类名称：{{category_name}} + 分类类型：{{category_type}} + + 设计要求： + 1. 尺寸：24x24，viewBox="0 0 24 24" + 2. 色彩：使用渐变色或多色搭配，让图标更有吸引力和辨识度 + - 可以使用 或 创建渐变效果 + - 根据分类含义选择合适的配色方案（如餐饮用暖色系、交通用蓝色系等） + 3. 设计风格：现代扁平化风格，简洁优雅，使用渐变色 + 4. 细节丰富：添加特征性的细节元素，让人一眼就能识别 + - 例如：餐饮可以加刀叉、蒸汽；交通可以加轮胎、车窗等 + 5. 只返回 JSON 数组格式，包含 1 个完整的 SVG 字符串，不要有任何其他文字说明 + + 重要：SVG 必须是自包含的完整代码，包含所有必要的 gradient 定义。 + + 返回格式： + ["..."] + """; + } + + private string GetNewDefaultPrompt() + { + return """ + 你是一个专业的 SVG 图标设计师，擅长创作简约、清晰的图标。 + 请根据分类名称和类型，生成 5 个简约风格、易于识别的 SVG 图标。 + + 分类名称：{{category_name}} + 分类类型：{{category_type}} + + 设计要求： + 1. 尺寸：24x24，viewBox="0 0 24 24" + 2. 风格：扁平化、单色、极致简约（简约度：{{style_strength}}） + - 颜色方案：{{color_scheme}} + - 使用单一填充色，避免渐变和阴影 + - 保持线条简洁，避免过多细节 + - 移除所有非必要的装饰元素 + 3. 几何简约：使用最简单的几何形状表达分类含义 + - 餐饮：餐具形状（刀叉、勺子） + - 交通：车辆轮廓（方向盘、车轮） + - 购物：购物车或购物袋 + - 娱乐：播放按钮、音符等 + 4. 高对比度：确保图标在小尺寸下依然清晰可辨 + 5. 图标要直观表达分类含义，让人一眼就能识别 + 6. 只返回 JSON 数组格式，包含 5 个完整的 SVG 字符串，不要有任何其他文字说明 + + 返回格式： + ["...", "...", "...", "...", "..."] + """; + } + + private string GetNewSingleIconPrompt() + { + return """ + 你是一个专业的 SVG 图标设计师，擅长创作简约、清晰的图标。 + 请根据分类名称和类型，生成 1 个简约风格、易于识别的 SVG 图标。 + + 分类名称：{{category_name}} + 分类类型：{{category_type}} + + 设计要求： + 1. 尺寸：24x24，viewBox="0 0 24 24" + 2. 风格：扁平化、单色、极致简约（简约度：{{style_strength}}） + - 颜色方案：{{color_scheme}} + - 使用单一填充色，避免渐变和阴影 + - 保持线条简洁，避免过多细节 + - 移除所有非必要的装饰元素 + 3. 几何简约：使用最简单的几何形状表达分类含义 + 4. 高对比度：确保图标在小尺寸下依然清晰可辨 + 5. 图标要直观表达分类含义，让人一眼就能识别 + 6. 只返回 JSON 数组格式，包含 1 个完整的 SVG 字符串，不要有任何其他文字说明 + + 返回格式： + ["..."] + """; + } + + private void InitializeAbstractCategories() + { + AbstractCategories = new Dictionary + { + ["其他"] = new AbstractCategoryConfig { GeometryShape = "circle", ColorCode = "#9E9E9E" }, + ["通用"] = new AbstractCategoryConfig { GeometryShape = "square", ColorCode = "#BDBDBD" }, + ["未知"] = new AbstractCategoryConfig { GeometryShape = "triangle", ColorCode = "#E0E0E0" } + }; + } + + /// + /// 提示词版本号 + /// + public string Version { get; set; } = "1.0.0"; + + /// + /// 旧版提示词模板备份（用于生成 5 个图标，便于回滚） + /// + public string OldDefaultPromptTemplate { get; set; } = string.Empty; + + /// + /// 旧版单个图标提示词模板备份（仅生成 1 个图标，便于回滚） + /// + public string OldSingleIconPromptTemplate { get; set; } = string.Empty; + + /// + /// 默认提示词模板（用于生成 5 个图标） + /// 支持的占位符： + /// - {{category_name}}: 分类名称 + /// - {{category_type}}: 分类类型（支出/收入/不计入收支） + /// - {{style_strength}}: 风格强度（0.0-1.0，1.0 表示最简约） + /// - {{color_scheme}}: 颜色方案（单色/双色/多色/渐变） + /// + public string DefaultPromptTemplate { get; set; } = string.Empty; + + /// + /// 单个图标提示词模板（仅生成 1 个图标） + /// 支持的占位符同 DefaultPromptTemplate + /// + public string SingleIconPromptTemplate { get; set; } = string.Empty; + + /// + /// 风格强度（0.0-1.0，1.0 表示最简约） + /// + public double StyleStrength { get; set; } = 0.7; + + /// + /// 颜色方案（single-color/two-color/multi-color/gradient） + /// + public string ColorScheme { get; set; } = "single-color"; + + /// + /// 是否启用新提示词（灰度发布开关） + /// + public bool EnableNewPrompt { get; set; } = true; + + /// + /// 灰度比例（0.0-1.0，0.1 表示 10% 用户使用新提示词） + /// + public double GrayScaleRatio { get; set; } = 0.1; + + /// + /// 抽象分类的特殊处理配置 + /// + public Dictionary AbstractCategories { get; set; } = new(); +} + +/// +/// 抽象分类的特殊处理配置 +/// +public class AbstractCategoryConfig +{ + /// + /// 几何形状（circle/square/triangle/diamond/hexagon） + /// + public string GeometryShape { get; set; } = string.Empty; + + /// + /// 颜色编码（用于区分抽象分类） + /// + public string ColorCode { get; set; } = string.Empty; +} diff --git a/Web/src/App.vue b/Web/src/App.vue index b011755..dde52c0 100644 --- a/Web/src/App.vue +++ b/Web/src/App.vue @@ -146,16 +146,24 @@ watch( ) const isShowAddBill = computed(() => { - return route.path === '/' || route.path === '/balance' || route.path === '/message' || route.path === '/calendar-v2' + return ( + route.path === '/' || + route.path === '/balance' || + route.path === '/message' || + route.path === '/calendar-v2' + ) }) // 需要显示底部导航栏的路由 const showNav = computed(() => { return [ - '/', '/statistics-v2', + '/', + '/statistics-v2', '/calendar-v2', - '/balance', '/message', - '/budget-v2', '/setting' + '/balance', + '/message', + '/budget-v2', + '/setting' ].includes(route.path) }) diff --git a/Web/src/api/AGENTS.md b/Web/src/api/AGENTS.md index 3871382..f2d03ca 100644 --- a/Web/src/api/AGENTS.md +++ b/Web/src/api/AGENTS.md @@ -4,9 +4,11 @@ **Parent:** EmailBill/AGENTS.md ## OVERVIEW + Axios-based HTTP client modules for backend API integration with request/response interceptors. ## STRUCTURE + ``` Web/src/api/ ├── request.js # Base HTTP client setup @@ -26,17 +28,19 @@ Web/src/api/ ``` ## WHERE TO LOOK -| Task | Location | Notes | -|------|----------|-------| -| Base HTTP setup | request.js | Axios interceptors, error handling | -| Authentication | auth.js | Login, token management | -| Budget data | budget.js | Budget CRUD, statistics | -| Transactions | transactionRecord.js | Transaction operations | -| Categories | transactionCategory.js | Category management | -| Statistics | statistics.js | Analytics, reports | -| Notifications | notification.js | Push subscription handling | + +| Task | Location | Notes | +| --------------- | ---------------------- | ---------------------------------- | +| Base HTTP setup | request.js | Axios interceptors, error handling | +| Authentication | auth.js | Login, token management | +| Budget data | budget.js | Budget CRUD, statistics | +| Transactions | transactionRecord.js | Transaction operations | +| Categories | transactionCategory.js | Category management | +| Statistics | statistics.js | Analytics, reports | +| Notifications | notification.js | Push subscription handling | ## CONVENTIONS + - All functions return Promises with async/await - Error handling via try/catch with user messages - HTTP methods: get, post, put, delete mapping to REST @@ -45,6 +49,7 @@ Web/src/api/ - Consistent error message format ## ANTI-PATTERNS (THIS LAYER) + - Never fetch directly without going through these modules - Don't hardcode API endpoints (use environment variables) - Avoid synchronous operations @@ -52,8 +57,9 @@ Web/src/api/ - No business logic in API clients ## UNIQUE STYLES + - Chinese error messages for user feedback - Automatic token refresh handling - Request/response logging for debugging - Paged query patterns for list endpoints -- File upload handling for imports \ No newline at end of file +- File upload handling for imports diff --git a/Web/src/api/request.js b/Web/src/api/request.js index 929aceb..adfe4f0 100644 --- a/Web/src/api/request.js +++ b/Web/src/api/request.js @@ -15,8 +15,8 @@ const request = axios.create({ // 生成请求ID const generateRequestId = () => { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { - const r = Math.random() * 16 | 0 - const v = c === 'x' ? r : (r & 0x3 | 0x8) + const r = (Math.random() * 16) | 0 + const v = c === 'x' ? r : (r & 0x3) | 0x8 return v.toString(16) }) } diff --git a/Web/src/api/transactionCategory.js b/Web/src/api/transactionCategory.js index 742a68d..2bb6742 100644 --- a/Web/src/api/transactionCategory.js +++ b/Web/src/api/transactionCategory.js @@ -1,4 +1,4 @@ -import request from './request' +import request from './request' /** * 获取分类列表（支持按类型筛选） @@ -103,3 +103,15 @@ export const updateSelectedIcon = (categoryId, selectedIndex) => { data: { categoryId, selectedIndex } }) } + +/** + * 删除分类图标 + * @param {number} id - 分类ID + * @returns {Promise<{success: boolean}>} + */ +export const deleteCategoryIcon = (id) => { + return request({ + url: `/TransactionCategory/DeleteIcon/${id}`, + method: 'delete' + }) +} diff --git a/Web/src/assets/base.css b/Web/src/assets/base.css index 18bc788..f1eec26 100644 --- a/Web/src/assets/base.css +++ b/Web/src/assets/base.css @@ -87,17 +87,8 @@ body { background-color 0.5s; line-height: 1.6; font-family: - -apple-system, - BlinkMacSystemFont, - 'Segoe UI', - Roboto, - Oxygen, - Ubuntu, - Cantarell, - 'Fira Sans', - 'Droid Sans', - 'Helvetica Neue', - sans-serif; + -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', + 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: 15px; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; diff --git a/Web/src/assets/theme.css b/Web/src/assets/theme.css index 08ca5b3..6eb5e56 100644 --- a/Web/src/assets/theme.css +++ b/Web/src/assets/theme.css @@ -5,38 +5,37 @@ :root { /* ============ 颜色变量 - 浅色主题 ============ */ - + /* 背景色 */ - --bg-primary: #FFFFFF; - --bg-secondary: #F6F7F8; - --bg-tertiary: #F3F4F6; - --bg-button: #F5F5F5; - + --bg-primary: #ffffff; + --bg-secondary: #f6f7f8; + --bg-tertiary: #f3f4f6; + --bg-button: #f5f5f5; + /* 文字颜色 */ - --text-primary: #1A1A1A; - --text-secondary: #6B7280; - --text-tertiary: #9CA3AF; - + --text-primary: #1a1a1a; + --text-secondary: #6b7280; + --text-tertiary: #9ca3af; + /* 强调色 */ - --accent-primary: #FF6B6B; - --accent-danger: #EF4444; - --accent-warning: #D97706; - --accent-warning-bg: #FFFBEB; - --accent-success: #22C55E; - --accent-success-bg: #F0FDF4; - --accent-info: #6366F1; - --accent-info-bg: #E0E7FF; - + --accent-primary: #ff6b6b; + --accent-danger: #ef4444; + --accent-warning: #d97706; + --accent-warning-bg: #fffbeb; + --accent-success: #22c55e; + --accent-success-bg: #f0fdf4; + --accent-info: #6366f1; + --accent-info-bg: #e0e7ff; + /* 图标色 */ - --icon-star: #FF6B6B; - --icon-coffee: #FCD34D; - + --icon-star: #ff6b6b; + --icon-coffee: #fcd34d; /* 边框颜色 */ - --border-color: #E5E7EB; + --border-color: #e5e7eb; /* ============ 布局变量 ============ */ - + /* 间距 */ --spacing-xs: 2px; --spacing-sm: 4px; @@ -45,13 +44,13 @@ --spacing-xl: 16px; --spacing-2xl: 20px; --spacing-3xl: 24px; - + /* 圆角 */ --radius-sm: 12px; --radius-md: 16px; --radius-lg: 20px; --radius-full: 22px; - + /* 字体大小 */ --font-xs: 9px; --font-sm: 11px; @@ -61,48 +60,48 @@ --font-xl: 18px; --font-2xl: 24px; --font-3xl: 32px; - + /* 字体粗细 */ --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; - + /* 字体 */ --font-primary: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; - + /* 阴影 (可选) */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.05); - + /* 边框颜色 */ - --border-color: #E5E7EB; + --border-color: #e5e7eb; /* 分段控制器 (Segmented Control) - From .pans/v2.pen NDWwE */ - --segmented-bg: #F4F4F5; - --segmented-active-bg: #FFFFFF; + --segmented-bg: #f4f4f5; + --segmented-active-bg: #ffffff; } /* ============ 深色主题 ============ */ -[data-theme="dark"] { +[data-theme='dark'] { /* 背景色 */ - --bg-primary: #09090B; + --bg-primary: #09090b; --bg-secondary: #18181b; --bg-tertiary: #27272a; --bg-button: #27272a; - + /* 文字颜色 */ --text-primary: #f4f4f5; --text-secondary: #a1a1aa; --text-tertiary: #71717a; - + /* 边框颜色 */ --border-color: #3f3f46; - + /* 强调色 (深色主题调整) */ - --accent-primary: #FF6B6B; + --accent-primary: #ff6b6b; --accent-danger: #f87171; --accent-warning: #fbbf24; --accent-warning-bg: #451a03; @@ -110,10 +109,10 @@ --accent-success-bg: #064e3b; --accent-info: #818cf8; --accent-info-bg: #312e81; - + /* 图标色 (深色主题) */ - --icon-star: #FF6B6B; - --icon-coffee: #FCD34D; + --icon-star: #ff6b6b; + --icon-coffee: #fcd34d; /* 分段控制器 (Segmented Control) - From .pans/v2.pen NDWwE */ --segmented-bg: #27272a; @@ -152,9 +151,7 @@ background-color: var(--bg-tertiary); } - - - /* 布局容器 */ +/* 布局容器 */ .container-fluid { width: 100%; max-width: 402px; @@ -183,22 +180,52 @@ } /* 间距 */ -.gap-xs { gap: var(--spacing-xs); } -.gap-sm { gap: var(--spacing-sm); } -.gap-md { gap: var(--spacing-md); } -.gap-lg { gap: var(--spacing-lg); } -.gap-xl { gap: var(--spacing-xl); } -.gap-2xl { gap: var(--spacing-2xl); } -.gap-3xl { gap: var(--spacing-3xl); } +.gap-xs { + gap: var(--spacing-xs); +} +.gap-sm { + gap: var(--spacing-sm); +} +.gap-md { + gap: var(--spacing-md); +} +.gap-lg { + gap: var(--spacing-lg); +} +.gap-xl { + gap: var(--spacing-xl); +} +.gap-2xl { + gap: var(--spacing-2xl); +} +.gap-3xl { + gap: var(--spacing-3xl); +} /* 内边距 */ -.p-sm { padding: var(--spacing-md); } -.p-md { padding: var(--spacing-xl); } -.p-lg { padding: var(--spacing-2xl); } -.p-xl { padding: var(--spacing-3xl); } +.p-sm { + padding: var(--spacing-md); +} +.p-md { + padding: var(--spacing-xl); +} +.p-lg { + padding: var(--spacing-2xl); +} +.p-xl { + padding: var(--spacing-3xl); +} /* 圆角 */ -.rounded-sm { border-radius: var(--radius-sm); } -.rounded-md { border-radius: var(--radius-md); } -.rounded-lg { border-radius: var(--radius-lg); } -.rounded-full { border-radius: var(--radius-full); } +.rounded-sm { + border-radius: var(--radius-sm); +} +.rounded-md { + border-radius: var(--radius-md); +} +.rounded-lg { + border-radius: var(--radius-lg); +} +.rounded-full { + border-radius: var(--radius-full); +} diff --git a/Web/src/components/AddClassifyDialog.vue b/Web/src/components/AddClassifyDialog.vue index 8b2fa6d..8f894dd 100644 --- a/Web/src/components/AddClassifyDialog.vue +++ b/Web/src/components/AddClassifyDialog.vue @@ -1,20 +1,30 @@ - + + diff --git a/Web/src/components/Budget/BudgetEditPopup.vue b/Web/src/components/Budget/BudgetEditPopup.vue index fa8699d..44ac9e3 100644 --- a/Web/src/components/Budget/BudgetEditPopup.vue +++ b/Web/src/components/Budget/BudgetEditPopup.vue @@ -38,9 +38,7 @@ :disabled="form.noLimit" > {{ form.category === BudgetCategory.Expense ? '硬性消费' : '硬性收入' }} - - 当前周期 月/年 按天数自动累加(无记录时) - + 当前周期 月/年 按天数自动累加(无记录时) diff --git a/Web/src/components/CategoryBillPopup.vue b/Web/src/components/CategoryBillPopup.vue index 64b890b..d5dad38 100644 --- a/Web/src/components/CategoryBillPopup.vue +++ b/Web/src/components/CategoryBillPopup.vue @@ -1,127 +1,111 @@