Files
workspace/code/app/.workbuddy/memory/2026-06-27.md
T
2026-06-28 21:56:23 +08:00

4.1 KiB
Raw Blame History

2026-06-27

EmptyStatus loading 状态改用主题色

  • 修改文件:app-rn/src/components/EmptyStatus.tsx
  • LoadingVisual 中三处颜色改为主题色(accent = oklch(0.76 0.12 170),对应祖母绿 #10B981):
    • 脉冲圆背景:bg-foreground/10 → bg-accent/10
    • 内圆背景:bg-foreground/5 → bg-accent/5
    • 加载图标颜色:color="#111827" → color={accentColor}(通过 useThemeColor("accent") 获取)
  • 新增 import:useThemeColor from heroui-native
  • 参考:项目中 tabbar.tsx、DateTimeRange.tsx、tools/index.tsx 均使用 useThemeColor("accent") 获取主题色实际值

记账 home 列表样式优化

  • 修改文件:app-rn/src/app/finance/(tabs)/home/index.tsx
  • 列表不贴边:SectionView 的 contentContainerStyle 增加 paddingHorizontal: 16,白色列表项两侧留 16px 间距
  • 日期单行:section header 日期从「MM月DD日 + YYYY年」两行改为 YYYY年MM月DD日 一行
  • 收支单行:section header 收支合计从两行改为一行 -¥支出 +¥收入,去掉「支出/收入」文字标签
  • 列表项简化:移除金额下方的「收入/支出」子标签(+/- 符号已表达类型),同时删除不再使用的 getCategoryTypeLabel 函数

记账统计页(analysis)优化

  • 修改文件:app-rn/src/app/finance/(tabs)/analysis/index.tsx
  • 收支趋势图增加数值显示:在图表下方新增 3 个白色卡片小条:
    • 支出峰值:金额 + 峰值日期
    • 收入峰值:金额 + 峰值日期
    • 日均支出:金额 + 共 N 天 数据来自新增的 trendSummary useMemo(maxExpense/maxIncome/对应 day、totalExpense/totalIncome、nonZeroDays)
  • 筛选条件扩展:FilterState 加上 categoryId / memberId / type / keyword,新增 loadFilterOptions 一次性加载 b_finance_category(status=1)和 b_family_member(join b_user 取 nickname)作为下拉选项
  • 使用 BottomSheet 筛选:照搬 home 模式,标题「筛选分析」+ 重置 + 日期范围 + 收支类型(全部/支出/收入)+ 成员 chips + 分类 chips + 备注关键词 + 取消/应用;筛选 chips 选中态用主题色 bg-accent/10 border-accent + text-accent
  • 筛选按钮改用主题色:原本 bg-gray-900 → bg-accent(home 页和 analysis 页同步)
  • 移除「分析范围」字样:直接显示日期范围文本(与 home 保持一致)
  • SQL 增加过滤:categoryId → f.category_id = ?、memberId → f.create_by = ?、type → c.type = ?、keyword → coalesce(f.remark,'') like ?;trend/category/member 统计也跟随筛选条件变化
  • 移除未使用的 useThemeColor import(统一走 className bg-accent)

统计页趋势图坐标轴修复 + 成员统计移除

  • 修改文件:app-rn/src/app/finance/(tabs)/analysis/index.tsx
  • 趋势图坐标轴标签显示修复:
    • 下载 Inter-Regular.ttf(299KB)到 app-rn/src/assets/fonts/
    • 通过 useFont 加载字体并传入 CartesianChart 的 axisOptions.font
    • 调整 chartPadding 给轴标签留空间
  • 移除成员统计区块,保留 filter 中的成员筛选
  • 分类展示用列表 + 进度条(CategoryRow 组件)

统计页趋势图改回折线 + 自定义 SVG 饼图

  • 删除字体文件 app-rn/src/assets/fonts/Inter-Regular.ttf 和 useFont 引用(用户要求不加载字体)
  • 趋势图改为双折线图:支出(#FB7185)+ 收入(#10B981),X 轴日期(MM/DD),Y 轴金额
  • 用 react-native-svg 自定义 CategoryPieChart 组件
  • 分类占比图例百分比按饼图自身总额计算

Home 刷新按钮 + 分析页筛选标签

  • home: 日期行新增刷新按钮(RotateCcwIcon),点击调用 handleRefresh
  • home: 分类/备注 chip 行移到日期行下方、合计卡片上方
  • home: chip 文本追加 numberOfLines={1} 防溢出
  • analysis: 日期行新增刷新按钮(替代原 reset 按钮,reset 仍在 BottomSheet 中可用)
  • analysis: 日期行下方新增 activeFilterLabels chip 行(分类/成员/类型/备注),溢出省略号
  • analysis: 折线图修复:Line 移除 chartBounds 传参、开启 connectMissingData={true}