+
{page === 'overview' ? tr('你的财富全貌，从这里开始。') : page === 'settings' @@ -1666,7 +1666,12 @@ export default function App() { > {page === 'account' && ( <> -
- {tr('收入')}：{day.complete ? money(day.income, base) : tr('缺少汇率')} ·{' '} +
+ + {tr('收入')}：{day.complete ? money(day.income, base) : tr('缺少汇率')} + {tr('支出')}：{day.complete ? money(day.expense, base) : tr('缺少汇率')} diff --git a/apps/web/src/locales/en.json b/apps/web/src/locales/en.json index ae8901b..63454b5 100644 --- a/apps/web/src/locales/en.json +++ b/apps/web/src/locales/en.json @@ -674,5 +674,6 @@ "页面分类": "Page sections", "当天有记账记录": "Records today", "显示当天有记录": "Show today’s recorded accounts", - "隐藏当天有记录": "Hide today’s recorded accounts" + "隐藏当天有记录": "Hide today’s recorded accounts", + "计算说明": "Calculation notes" } diff --git a/apps/web/src/locales/zh-Hant.json b/apps/web/src/locales/zh-Hant.json index e5b5e2d..e79e847 100644 --- a/apps/web/src/locales/zh-Hant.json +++ b/apps/web/src/locales/zh-Hant.json @@ -674,5 +674,6 @@ "页面分类": "頁面分類", "当天有记账记录": "當天有記賬記錄", "显示当天有记录": "顯示當天有記錄", - "隐藏当天有记录": "隱藏當天有記錄" + "隐藏当天有记录": "隱藏當天有記錄", + "计算说明": "計算說明" } diff --git a/apps/web/src/style.css b/apps/web/src/style.css index 5a31f5a..ead4712 100644 --- a/apps/web/src/style.css +++ b/apps/web/src/style.css @@ -3315,3 +3315,238 @@ html[data-input='pointer'] .position-card { transform: none; } } + +/* Account toolbar: compact controls, with the filter next to the mode switch. */ +.account-tools-browse { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 10px; + padding-bottom: 16px; + border-bottom: 1px solid var(--line); +} +.account-tools-browse select { + width: auto; + flex: 0 1 240px; + min-width: 0; + margin: 0; +} +.account-tools-browse button { + margin: 0; +} +.account-tools-browse button:last-child { + margin-left: auto; +} +.calendar-explanation { + margin-bottom: 16px; + color: var(--muted); + font-size: 0.8125rem; +} +.calendar-explanation summary { + cursor: pointer; + width: fit-content; +} +.calendar-explanation p { + margin: 8px 0 0; +} +.calendar-legend { + display: flex; + gap: 16px; + color: var(--muted); + font-size: 0.75rem; + margin: 0 0 12px; +} +.calendar-legend span, +.calendar-dots { + display: flex; + align-items: center; + gap: 5px; +} +.calendar-legend i, +.calendar-dots i { + width: 5px; + height: 5px; + border-radius: 50%; + flex-shrink: 0; +} +.income-dot { + background: var(--positive); +} +.expense-dot { + background: var(--negative); +} +.incomplete-dot { + background: var(--muted); +} +.calendar-dots { + display: none; +} +.calendar-day.selected { + outline: 2px solid var(--accent); + outline-offset: -2px; +} +.calendar-totals { + display: flex; + flex-wrap: wrap; + gap: 8px 20px; +} +.calendar-totals span { + overflow-wrap: anywhere; +} +@media (max-width: 700px) { + .account-tools-browse { + display: flex; + gap: 8px; + } + .account-tools-browse select { + flex: 1 1 140px; + width: auto; + } + .account-tools-browse button:last-child { + margin-left: 0; + } + .sidebar { + left: max(12px, env(safe-area-inset-left, 0px)); + right: max(12px, env(safe-area-inset-right, 0px)); + bottom: max(12px, env(safe-area-inset-bottom, 0px)); + width: auto; + border: 1px solid #ffffff99; + border-radius: 32px; + padding: 0; + background: rgb(255 255 255 / 68%); + backdrop-filter: blur(24px) saturate(180%); + -webkit-backdrop-filter: blur(24px) saturate(180%); + box-shadow: + 0 8px 32px #00000012, + inset 0 1px 0 #ffffffaa; + } + .primary-nav { + min-height: 64px; + padding: 5px; + gap: 3px; + } + .primary-nav button { + min-height: 54px; + border-radius: 26px; + } + .primary-nav button.active { + background: rgb(0 122 255 / 12%); + } + main { + padding-bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px)); + } + .calendar-panel { + padding: 16px 12px; + } + .calendar-panel > .panel-title { + gap: 8px; + } + .calendar-panel h2 { + font-size: 1rem; + } + .calendar-panel input[type='month'] { + flex: 0 1 170px; + min-width: 0; + padding: 8px; + } + .calendar-grid { + gap: 4px; + } + .weekday { + padding: 8px 0; + font-size: 0.75rem; + color: var(--muted); + } + .calendar-day { + min-height: 56px; + padding: 6px 0; + gap: 4px; + align-items: center; + justify-content: center; + background: transparent; + border: 0; + border-radius: 12px; + } + .calendar-day strong { + font-size: 0.875rem; + line-height: 1.5; + font-weight: 500; + } + .calendar-day.today strong { + color: var(--accent); + font-weight: 700; + } + .calendar-day.selected { + background: var(--accent); + outline: none; + color: white; + } + .calendar-day.selected strong { + color: white; + } + .calendar-day.selected .calendar-dots i { + box-shadow: 0 0 0 1px #ffffff88; + } + .calendar-day:disabled { + opacity: 0.4; + } + .calendar-amount { + display: none; + } + .calendar-dots { + display: flex; + justify-content: center; + min-height: 5px; + } + .calendar-detail { + margin-top: 16px; + padding-top: 16px; + } + .calendar-detail .panel-title { + flex-wrap: wrap; + gap: 8px; + } + .calendar-detail h3 { + font-size: 0.9375rem; + } +} +@media (max-width: 700px) and (prefers-color-scheme: dark) { + .sidebar { + background: rgb(28 28 30 / 72%); + border-color: #ffffff22; + box-shadow: + 0 8px 32px #00000055, + inset 0 1px 0 #ffffff12; + } + .primary-nav button.active { + background: rgb(10 132 255 / 20%); + } +} +@media (max-width: 700px) and (prefers-reduced-transparency: reduce), + (max-width: 700px) and (prefers-contrast: more) { + .sidebar { + background: var(--surface); + backdrop-filter: none; + -webkit-backdrop-filter: none; + border-color: var(--line); + } +} +@media (max-width: 700px) and (forced-colors: active) { + .sidebar { + background: Canvas; + border: 1px solid CanvasText; + backdrop-filter: none; + } + .calendar-day.selected { + outline: 2px solid Highlight; + } +} + +html[data-input='pointer'] .calendar-day { + transition: none; + transform: none; +} + +.calendar-page-description { + display: none; +} diff --git a/docs/update-glass-calendar-2026-10-08.md b/docs/update-glass-calendar-2026-10-08.md new file mode 100644 index 0000000..31068d6 --- /dev/null +++ b/docs/update-glass-calendar-2026-10-08.md @@ -0,0 +1,28 @@ +# 账户工具栏、毛玻璃底栏和手机日历 + +完成时间：2026-10-08 13:02（UTC+8）。 + +继续采用原作者 emilkowalski/skills 的 apple-design、emil-design-eng、mobile-native、review-animations 和 break-ui 适用规范，来源和读取版本见 [设计规范说明](update-mobile-navigation-2026-10-07.md)。本次沿用现有 React/CSS 与浏览器原生控件，无新增依赖，无数据库结构和金额计算变更。 + +## 改动 + +| Before | After | Why | +| ------------------------------------------ | ------------------------------------------------------------------ | ------------------------------------ | +| 快速记账、全宽分组选择框、分组排序各占一行 | 桌面工具栏单行：模式按钮、紧凑选择框、右侧排序；手机按可用宽度换行 | 减少空白与纵向堆叠 | +| 手机底栏贴满屏幕底边 | 四入口悬浮圆角胶囊，半透明背景、24px 毛玻璃、细描边和柔和阴影 | 参考用户图二，保留内容层次与入口辨识 | +| 手机日期格子显示完整金额并任意断行 | 手机日期格子仅显示日期、收入/支出小点；选中日期在下方显示完整收支 | 七列布局保持稳定，金额不丢失 | +| 重复日历标题与常驻长说明 | 月份选择与可展开的计算说明，隐藏日历页通用副标题 | 更快看到整月日期 | + +底栏使用安全区距离，页面预留滚动空间；深色模式使用深色透明背景。减少透明度或高对比度时回退实色，系统强制颜色时使用系统背景/边框。底栏保留四个入口、当前页状态与键盘焦点。未增加折射装饰或导航切换动画。 + +手机日历的今天以蓝色字标识、选中日期以蓝底标识；绿/红点对应收入/支出，灰点对应缺少汇率。屏幕阅读器可读完整日期、收支和缺少汇率状态；点击后显示完整金额，桌面仍保留格内金额。原有月份范围、未来日期禁用、隐藏资产范围和收支计算规则不变。日期选择为高频操作，立即响应，无额外位移动效。 + +## 验证与边界 + +- 前端 TypeScript 检查与生产构建通过。 +- 多语言和快速记账相关单元测试 7 项通过。 +- 复用并扩展 scripts/check-mobile-ui.cjs，以虚构数据验证桌面工具栏单行、手机日历大额收支、点击日期后的完整金额、毛玻璃背景，以及 320/390/430px 日历、浅色/深色、200% 文字；保留原有六种尺寸和空/单条/1,000 条账户回归。 +- 减少透明度、高对比度、键盘、原生弹窗和 Toast 回归通过；无横向溢出或浏览器脚本错误。截图仅存本地预览目录，docs 无图片。 +- review-animations：**Approve（代码与浏览器范围）**。仅增加静态布局和视觉材料，日期按钮无过渡。实体 iOS Safari 的模糊渲染、安全区及软键盘仍需硬件验证。 + +保留可复用浏览器回归脚本，没有新增临时脚本。仅本地提交，不推送、不部署。 diff --git a/scripts/check-mobile-ui.cjs b/scripts/check-mobile-ui.cjs index 08a30dd..37b1940 100644 --- a/scripts/check-mobile-ui.cjs +++ b/scripts/check-mobile-ui.cjs @@ -84,8 +84,8 @@ let accounts = ['日常账户', '储蓄账户', '信用卡'].map((name, index) = body = { items: Array.from({ length: 31 }, (_, i) => ({ date: day.slice(0, 7) + '-' + String(i + 1).padStart(2, '0'), - income: '0', - expense: '0', + income: i === 2 ? '160501.27' : '0', + expense: i === 2 ? '897.82' : '0', complete: true, })), baseCurrency: 'CNY', @@ -121,6 +121,22 @@ let accounts = ['日常账户', '储蓄账户', '信用卡'].map((name, index) = await nav.getByRole('button', { name: '账号', exact: true }).click(); await page.getByRole('heading', { name: '日常账户', exact: true }).waitFor(); await checkWidth('accounts'); + await page.setViewportSize({ width: 1440, height: 900 }); + const toolbar = await page.locator('.account-tools-browse').evaluate((el) => { + const r = el.getBoundingClientRect(); + return { + height: r.height, + widths: [...el.children] + .filter((x) => !x.hidden) + .map((x) => x.getBoundingClientRect().width), + }; + }); + assert.ok(toolbar.height < 100, 'browse controls should share one row on desktop'); + await page.screenshot({ + path: path.join(output, 'worthpath-desktop-toolbar.png'), + fullPage: true, + }); + await page.setViewportSize({ width: 390, height: 844 }); await page.screenshot({ path: path.join(output, 'worthpath-mobile-accounts.png'), fullPage: true, @@ -171,6 +187,36 @@ let accounts = ['日常账户', '储蓄账户', '信用卡'].map((name, index) = await nav.getByRole('button', { name: '日历', exact: true }).click(); await page.locator('.calendar-day').first().waitFor(); await checkWidth('calendar'); + const activeDay = page + .locator('.calendar-day') + .filter({ has: page.locator('.income-dot') }) + .first(); + await activeDay.click(); + assert.ok((await page.locator('.calendar-totals').textContent()).includes('160,501.27')); + assert.equal(await activeDay.locator('.calendar-amount').first().isVisible(), false); + assert.equal( + await page + .locator('.sidebar') + .evaluate((el) => getComputedStyle(el).backdropFilter.includes('blur')), + true, + ); + for (const scheme of ['light', 'dark']) { + await page.emulateMedia({ colorScheme: scheme }); + for (const width of [320, 390, 430]) { + await page.setViewportSize({ width, height: 844 }); + await checkWidth('calendar ' + scheme + ' ' + width); + assert.ok( + await page + .locator('.calendar-grid') + .evaluate((el) => el.getBoundingClientRect().height < 500), + ); + await page.evaluate(() => (document.documentElement.style.fontSize = '200%')); + await checkWidth('calendar large text'); + await page.evaluate(() => (document.documentElement.style.fontSize = '')); + } + } + await page.emulateMedia({ colorScheme: 'light' }); + await page.setViewportSize({ width: 390, height: 844 }); await page.screenshot({ path: path.join(output, 'worthpath-mobile-calendar.png'), fullPage: true, diff --git a/update.md b/update.md index 5530b64..2ab4206 100644 --- a/update.md +++ b/update.md @@ -110,3 +110,5 @@ - ~~手机端主导航改为总览、日历、账号、设置四项，合并独立资产/债务与定时/管理员入口，并应用开源设计 skill~~ — 已完成并验证：2026-10-07 17:41（UTC+8），见 docs/update-mobile-navigation-2026-10-07.md - ~~优化滚动条UI~~ — 已完成并验证：2026-10-07 18:06（UTC+8），见 docs/update-mobile-navigation-2026-10-07.md - ~~严格按照原作者仓库 apple-design 及适用的其他设计 skill 更新 Apple 风格 UI~~ — 已完成并验证：2026-10-07 18:06（UTC+8），见 docs/update-mobile-navigation-2026-10-07.md + +- ~~优化账户页工具栏 UI、手机底栏采用悬浮毛玻璃效果、改善手机日历显示~~ — 已完成并验证：2026-10-08 13:02（UTC+8），见 docs/update-glass-calendar-2026-10-08.md