4.1 KiB
4.1 KiB
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:
useThemeColorfromheroui-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 天
数据来自新增的
trendSummaryuseMemo(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 统计也跟随筛选条件变化 - 移除未使用的
useThemeColorimport(统一走 classNamebg-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: 日期行下方新增
activeFilterLabelschip 行(分类/成员/类型/备注),溢出省略号 - analysis: 折线图修复:Line 移除 chartBounds 传参、开启 connectMissingData={true}