feat: refine account toolbar and mobile glass calendar UI

README.md

@@ -242,3 +242,5 @@ git config remote.pushDefault github
 # 需要同步多个远程时手动执行
 'github','gitee','wyh','cy' | ForEach-Object { git push $_ main }
 ```
+
+账户工具栏、悬浮毛玻璃底栏与紧凑手机日历已更新，金额在日期详情中完整显示；详见 [界面更新与验收](docs/update-glass-calendar-2026-10-08.md)。

apps/web/src/App.tsx

@@ -1213,7 +1213,7 @@ export default function App() {
                 )}
                 {p ? p.name : tr(labels[page])}
               </h1>
-              <p className="muted">
+              <p className={page === 'calendar' ? 'calendar-page-description' : 'muted'}>
                 {page === 'overview'
                   ? tr('你的财富全貌，从这里开始。')
                   : page === 'settings'
@@ -1666,7 +1666,12 @@ export default function App() {
               >
                 {page === 'account' && (
                   <>
-                    <div className="actions account-tools">
+                    <div
+                      className={
+                        'actions account-tools ' +
+                        (quickMode ? 'account-tools-quick' : 'account-tools-browse')
+                      }
+                    >
                       <button
                         className={quickMode ? 'primary' : 'secondary'}
                         aria-pressed={quickMode}

apps/web/src/Calendar.tsx

@@ -68,7 +68,7 @@ export function Calendar({
   return (
     <section className="panel calendar-panel">
       <div className="panel-title">
-        <h2>{tr('收支日历')}</h2>
+        <h2>{tr('月份')}</h2>
         <input
           aria-label={tr('月份')}
           type="month"
@@ -85,9 +85,22 @@ export function Calendar({
           }}
         />
       </div>
-      <p className="muted">
-        {tr('按账户余额变动估算；转账、借贷本金、初始余额和估值不计入。负债账户按相反方向计算。')}
-      </p>
+      <details className="calendar-explanation">
+        <summary>{tr('计算说明')}</summary>
+        <p className="muted">
+          {tr('按账户余额变动估算；转账、借贷本金、初始余额和估值不计入。负债账户按相反方向计算。')}
+        </p>
+      </details>
+      <div className="calendar-legend" aria-hidden="true">
+        <span>
+          <i className="income-dot" />
+          {tr('收入')}
+        </span>
+        <span>
+          <i className="expense-dot" />
+          {tr('支出')}
+        </span>
+      </div>
       <div className="calendar-grid">
         {['一', '二', '三', '四', '五', '六', '日'].map((v) => (
           <span key={v} className="weekday">
@@ -101,19 +114,28 @@ export function Calendar({
           <button
             key={d.date}
             disabled={d.date > today()}
-            aria-label={d.date}
+            aria-label={`${d.date} · ${tr('收入')} ${money(d.income, base)} · ${tr('支出')} ${money(d.expense, base)}${!d.complete ? ' · ' + tr('缺少汇率') : ''}`}
             aria-pressed={d.date === selected}
-            className={'calendar-day ' + (d.date === selected ? 'selected' : '')}
+            className={
+              'calendar-day ' +
+              (d.date === selected ? 'selected ' : '') +
+              (d.date === today() ? 'today' : '')
+            }
             onClick={() => setSelected(d.date)}
           >
             <strong>{Number(d.date.slice(-2))}</strong>
             {Number(d.income) > 0 && (
-              <small className="income-text">+{money(d.income, base)}</small>
+              <small className="calendar-amount income-text">+{money(d.income, base)}</small>
             )}
             {Number(d.expense) > 0 && (
-              <small className="danger-text">−{money(d.expense, base)}</small>
+              <small className="calendar-amount danger-text">−{money(d.expense, base)}</small>
             )}
-            {!d.complete && <small>{tr('缺少汇率')}</small>}
+            <span className="calendar-dots" aria-hidden="true">
+              {Number(d.income) > 0 && <i className="income-dot" />}
+              {Number(d.expense) > 0 && <i className="expense-dot" />}
+              {!d.complete && <i className="incomplete-dot" />}
+            </span>
+            {!d.complete && <small className="calendar-amount">{tr('缺少汇率')}</small>}
           </button>
         ))}
       </div>
@@ -133,8 +155,10 @@ export function Calendar({
           </button>
         </div>
         {day && (
-          <p>
-            {tr('收入')}：{day.complete ? money(day.income, base) : tr('缺少汇率')} ·{' '}
+          <p className="calendar-totals">
+            <span className="income-text">
+              {tr('收入')}：{day.complete ? money(day.income, base) : tr('缺少汇率')}
+            </span>
             <span className="danger-text">
               {tr('支出')}：{day.complete ? money(day.expense, base) : tr('缺少汇率')}
             </span>

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"
 }

apps/web/src/locales/zh-Hant.json

@@ -674,5 +674,6 @@
   "页面分类": "頁面分類",
   "当天有记账记录": "當天有記賬記錄",
   "显示当天有记录": "顯示當天有記錄",
-  "隐藏当天有记录": "隱藏當天有記錄"
+  "隐藏当天有记录": "隱藏當天有記錄",
+  "计算说明": "計算說明"
 }

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;
+}

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 的模糊渲染、安全区及软键盘仍需硬件验证。
+
+保留可复用浏览器回归脚本，没有新增临时脚本。仅本地提交，不推送、不部署。

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,

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