dsh-design-studio 0.9.0 → 0.11.0

package/gallery-seed/d/orderg-x__pocket-ledger/08e9e40834f9/app.css

@@ -0,0 +1,79 @@
+* { box-sizing: border-box; }
+html, body { height: 100%; margin: 0; }
+body {
+  font: var(--fs-md)/1.5 var(--font);
+  color: var(--text);
+  background: var(--bg);
+  overflow: hidden;
+  font-variant-numeric: tabular-nums;
+  -webkit-font-smoothing: antialiased;
+}
+a { color: inherit; text-decoration: none; }
+button { font: inherit; color: inherit; }
+svg.i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
+.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
+.mono { font-family: var(--mono); font-size: var(--fs-sm); }
+.muted { color: var(--muted); }
+.in { color: var(--accent-ink); }
+:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
+
+.win { display: grid; grid-template-columns: 232px minmax(0, 1fr); height: 100vh; }
+
+.side { background: var(--side); border-right: 1px solid var(--side-line); display: flex; flex-direction: column; padding: 52px 12px 12px; overflow: auto; }
+.brand { display: flex; align-items: center; gap: var(--space-2); padding: 0 8px; height: 32px; margin-bottom: var(--space-3); }
+.brand .logo { width: 24px; height: 24px; border-radius: var(--radius-sm); background: var(--primary); color: var(--on); display: grid; place-items: center; }
+.brand b { font-size: var(--fs-lg); font-weight: 600; }
+.brand .book { margin-left: auto; display: flex; align-items: center; gap: 2px; color: var(--muted); font-size: var(--fs-sm); }
+.side h3 { margin: var(--space-4) 8px var(--space-1); font-size: var(--fs-sm); font-weight: 500; color: var(--muted); }
+.nav { display: flex; flex-direction: column; gap: 2px; }
+.nav a, .nav span.item { display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 8px; border-radius: var(--radius-sm); color: var(--text); transition: background .15s var(--ease); }
+.nav a:hover, .nav span.item:hover { background: rgba(15, 23, 42, .05); }
+.nav .on { background: rgba(36, 87, 245, .11); font-weight: 600; }
+.nav .on svg { color: var(--primary); }
+.nav svg { color: var(--muted); }
+.nav .count { margin-left: auto; font-size: var(--fs-sm); color: var(--muted); font-weight: 400; }
+.nav .flag { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); color: var(--danger); font-weight: 500; }
+.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
+.acct { display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 8px; border-radius: var(--radius-sm); }
+.acct svg { color: var(--muted); }
+.acct .num { margin-left: auto; }
+.net { margin: var(--space-2) 8px 0; padding-top: var(--space-2); border-top: 1px solid var(--side-line); display: flex; justify-content: space-between; color: var(--muted); }
+.net b { color: var(--text); font-weight: 600; }
+.side-foot { margin-top: auto; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 8px 0; color: var(--muted); font-size: var(--fs-sm); }
+.side-foot .ok { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
+.side-foot .gear { margin-left: auto; width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--radius-sm); }
+.side-foot .gear:hover { background: rgba(15, 23, 42, .05); }
+
+.main { display: flex; flex-direction: column; min-width: 0; height: 100vh; }
+.toolbar { height: 52px; flex: none; display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-4) 0 var(--space-5); border-bottom: 1px solid var(--line); background: var(--surface); }
+.toolbar h1 { margin: 0; font-size: var(--fs-lg); font-weight: 600; white-space: nowrap; }
+.toolbar .sub { color: var(--muted); white-space: nowrap; }
+.spacer { flex: 1; }
+.month { display: flex; align-items: center; gap: 2px; margin-left: var(--space-2); }
+.month b { font-weight: 500; padding: 0 6px; white-space: nowrap; }
+.ib { width: 28px; height: 28px; border-radius: var(--radius-sm); border: 0; background: transparent; display: grid; place-items: center; color: var(--muted); cursor: default; flex: none; }
+.ib:hover { background: var(--hover); color: var(--text); }
+.search { display: flex; align-items: center; gap: var(--space-2); width: 220px; height: 28px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); color: var(--muted); }
+.search span { flex: 1; white-space: nowrap; }
+kbd { font: 500 11px/1 var(--font); color: var(--muted); padding: 3px 5px; border-radius: var(--radius-xs); background: var(--surface); border: 1px solid var(--line); }
+.btn { height: 28px; padding: 0 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: default; flex: none; transition: background .15s var(--ease); }
+.btn:hover { background: var(--hover); }
+.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on); font-weight: 500; }
+.btn.primary:hover { background: var(--primary-hover); }
+.btn.primary kbd { background: rgba(8, 20, 70, .28); border-color: transparent; color: var(--on); }
+.btn.danger { color: var(--danger); }
+
+.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }
+.card-h { display: flex; align-items: center; gap: var(--space-2); height: 44px; padding: 0 var(--space-4); }
+.card-h h2 { margin: 0; font-size: var(--fs-md); font-weight: 600; white-space: nowrap; }
+.card-h .more { margin-left: auto; color: var(--link); display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 0 4px; margin-right: -4px; border-radius: var(--radius-xs); white-space: nowrap; }
+.card-h .more:hover { text-decoration: underline; }
+.tag { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: var(--radius-xs); background: var(--bg); border: 1px solid var(--line); font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
+.tag.warn { background: var(--danger-soft); border-color: transparent; color: var(--danger); font-weight: 500; }
+.tag.good { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); font-weight: 500; }
+
+.statusbar { position: sticky; bottom: 0; height: 24px; flex: none; display: flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-4); border-top: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; }
+.statusbar .ok { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
+.statusbar .ok i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
+
+@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

package/gallery-seed/d/orderg-x__pocket-ledger/08e9e40834f9/design.json

@@ -0,0 +1,51 @@
+{
+  "format": 1,
+  "type": "template",
+  "title": {
+    "zh": "小账本",
+    "en": "Pocket Ledger"
+  },
+  "description": {
+    "zh": "冷灰蓝、信息密的个人记账桌面软件：总览看本月收支、分类和预算，流水表格配右侧详情",
+    "en": "A dense, cool gray-blue personal finance desktop app: a monthly overview with categories and budgets, and an entries table with a detail panel"
+  },
+  "kind": "desktop",
+  "screens": [
+    {
+      "file": "overview.html",
+      "title": {
+        "zh": "总览",
+        "en": "Overview"
+      }
+    },
+    {
+      "file": "entries.html",
+      "title": {
+        "zh": "流水",
+        "en": "Entries"
+      }
+    }
+  ],
+  "style": "tech",
+  "categories": [
+    "finance"
+  ],
+  "tags": [
+    "dashboard",
+    "chart",
+    "data-dense",
+    "list",
+    "detail",
+    "report"
+  ],
+  "lang": "zh",
+  "license": "CC0-1.0",
+  "author": {
+    "login": "orderg-x",
+    "id": 271418316
+  },
+  "ai": {
+    "generated": true,
+    "tool": "dsh-design-studio@0.11.0"
+  }
+}

package/gallery-seed/d/orderg-x__pocket-ledger/08e9e40834f9/entries.html

@@ -0,0 +1,161 @@
+<!doctype html>
+<html lang="zh">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="dsh-design" content="desktop">
+<title>流水 · 小账本</title>
+<link rel="stylesheet" href="tokens.css">
+<link rel="stylesheet" href="app.css">
+<style>
+.filters { height: 44px; flex: none; display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-4) 0 var(--space-5); border-bottom: 1px solid var(--line); background: var(--surface); }
+.seg { display: inline-flex; padding: 2px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); }
+.seg span { height: 22px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: var(--radius-xs); color: var(--muted); white-space: nowrap; }
+.seg .on { background: var(--surface); color: var(--text); font-weight: 500; box-shadow: var(--shadow); }
+.chip { height: 28px; display: inline-flex; align-items: center; gap: 4px; padding: 0 8px 0 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); white-space: nowrap; flex: none; }
+.chip:hover { background: var(--hover); }
+.chip .k { color: var(--muted); }
+.chip svg { width: 14px; height: 14px; color: var(--muted); }
+.chip.set { border-color: rgba(36, 87, 245, .35); background: var(--primary-soft); }
+.totals { margin-left: auto; display: flex; gap: var(--space-4); white-space: nowrap; }
+.totals b { font-weight: 600; }
+
+.split { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: minmax(0, 1fr); overflow: hidden; }
+.table { min-width: 0; overflow: auto; background: var(--surface); }
+.th, .tr { display: grid; grid-template-columns: 16px 52px 76px minmax(0, 1fr) 56px 104px; align-items: center; gap: var(--space-3); padding: 0 var(--space-4) 0 var(--space-5); }
+.th { position: sticky; top: 0; z-index: 1; height: 32px; background: var(--bg); border-bottom: 1px solid var(--line); color: var(--muted); font-size: var(--fs-sm); font-weight: 500; }
+.th .s { display: inline-flex; align-items: center; gap: 2px; color: var(--text); }
+.th .s svg { width: 12px; height: 12px; }
+.th .r { text-align: right; justify-self: end; }
+.g { display: flex; align-items: center; height: 32px; padding: 0 var(--space-4) 0 var(--space-5); background: var(--bg); border-bottom: 1px solid var(--line); font-weight: 600; white-space: nowrap; }
+.g .gsum { margin-left: auto; display: flex; gap: var(--space-3); color: var(--muted); font-weight: 400; font-size: var(--fs-sm); }
+.tr { position: relative; height: 40px; border-bottom: 1px solid var(--line); transition: background .15s var(--ease); }
+.tr:hover { background: var(--hover); }
+.tr.sel { background: var(--primary-soft); }
+.tr.sel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--primary); }
+.chk { width: 14px; height: 14px; border: 1.5px solid #A3AFC0; border-radius: 4px; background: var(--surface); }
+.chk { display: grid; place-items: center; }
+.chk.on { background: var(--primary); border-color: var(--primary); color: var(--on); }
+.chk.on svg { width: 11px; height: 11px; stroke-width: 3; }
+.tr .cat { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
+.tr .note { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
+.tr .note .tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tr .acc { white-space: nowrap; color: var(--muted); }
+.tr .amt { text-align: right; font-weight: 600; }
+
+.detail { border-left: 1px solid var(--line); background: var(--surface); overflow: auto; display: flex; flex-direction: column; }
+.d-h { display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 var(--space-2) 0 var(--space-4); border-bottom: 1px solid var(--line); }
+.d-h .tag { margin-right: auto; }
+.d-top { padding: var(--space-4) var(--space-4) var(--space-3); }
+.d-top .amt { font-size: var(--fs-xl); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
+.d-top h2 { margin: var(--space-1) 0 0; font-size: var(--fs-lg); font-weight: 600; }
+.fields { margin: 0; padding: 0 var(--space-4); }
+.fields div { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-3); align-items: center; min-height: 32px; border-top: 1px solid var(--line); }
+.fields dt { color: var(--muted); }
+.fields dd { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
+.split-box { margin: var(--space-3) var(--space-4) 0; padding: var(--space-3); border-radius: var(--radius); background: var(--bg); display: flex; flex-direction: column; gap: var(--space-2); }
+.split-box .row { display: flex; align-items: center; gap: var(--space-2); }
+.split-box .row .num { margin-left: auto; }
+.ava { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; color: var(--on); flex: none; }
+.receipt { margin: var(--space-3) var(--space-4) 0; display: flex; gap: var(--space-3); align-items: center; padding: var(--space-2); border: 1px dashed #C5CEDB; border-radius: var(--radius); }
+.receipt svg.pic { width: 44px; height: 56px; flex: none; }
+.receipt .t { display: flex; flex-direction: column; min-width: 0; }
+.mini { margin: var(--space-3) var(--space-4) 0; display: flex; flex-direction: column; gap: 6px; }
+.mini .row { display: flex; align-items: baseline; gap: var(--space-2); }
+.mini .row .num { margin-left: auto; }
+.bar { height: 6px; border-radius: 999px; background: var(--track); overflow: hidden; }
+.bar i { display: block; height: 100%; border-radius: 999px; }
+.d-foot { margin-top: auto; display: flex; gap: var(--space-2); padding: var(--space-4); }
+.d-foot .btn.danger { margin-left: auto; }
+@media (max-width: 1200px) {
+  .totals { display: none; }
+  .split { grid-template-columns: minmax(0, 1fr) 280px; }
+  .tr .note .tag { display: none; }
+  .d-foot kbd { display: none; }
+}
+</style>
+</head>
+<body>
+<div class="win">
+  <aside class="side" aria-label="侧栏">
+    <div class="brand"><span class="logo"><svg class="i" aria-hidden="true"><use href="icons.svg#book"></use></svg></span><b>小账本</b><span class="book">日常<svg class="i" style="width:12px;height:12px" aria-hidden="true"><use href="icons.svg#down"></use></svg></span></div>
+    <nav class="nav" aria-label="主导航">
+      <a href="overview.html" class=""><svg class="i" aria-hidden="true"><use href="icons.svg#overview"></use></svg>总览</a>
+      <a href="entries.html" class="on"><svg class="i" aria-hidden="true"><use href="icons.svg#list"></use></svg>流水<span class="count num">86</span></a>
+      <span class="item"><svg class="i" aria-hidden="true"><use href="icons.svg#budget"></use></svg>预算<span class="flag"><i class="dot" style="background:var(--danger);width:6px;height:6px"></i>1 项超支</span></span>
+      <span class="item"><svg class="i" aria-hidden="true"><use href="icons.svg#report"></use></svg>报表</span>
+    </nav>
+    <h3>账户</h3>
+    <div class="acct"><svg class="i" aria-hidden="true"><use href="icons.svg#cash"></use></svg>现金<span class="num">¥1,286.40</span></div>
+    <div class="acct"><svg class="i" aria-hidden="true"><use href="icons.svg#save"></use></svg>储蓄<span class="num">¥48,200.00</span></div>
+    <div class="acct"><svg class="i" aria-hidden="true"><use href="icons.svg#credit"></use></svg>信用<span class="num">−¥3,412.80</span></div>
+    <div class="net"><span>净资产</span><b class="num">¥46,073.60</b></div>
+    <h3>常用分类</h3>
+    <div class="nav">
+      <span class="item"><i class="dot" style="background:var(--cat-food)"></i>餐饮</span>
+      <span class="item"><i class="dot" style="background:var(--cat-shopping)"></i>购物</span>
+      <span class="item"><i class="dot" style="background:var(--cat-transit)"></i>交通</span>
+      <span class="item"><i class="dot" style="background:var(--cat-fun)"></i>娱乐</span>
+    </div>
+    <div class="side-foot"><i class="ok"></i>本地已保存 · 刚刚<span class="gear" title="设置"><svg class="i" aria-hidden="true"><use href="icons.svg#gear"></use></svg></span></div>
+  </aside>
+  <div class="main">
+    <header class="toolbar">
+      <h1>流水</h1>
+      <span class="sub">10 月 · 86 笔</span>
+      <div class="spacer"></div>
+      <div class="search"><svg class="i" aria-hidden="true"><use href="icons.svg#search"></use></svg><span>搜索备注、分类、标签</span><kbd>⌘F</kbd></div>
+      <button class="ib" aria-label="导出"><svg class="i" aria-hidden="true"><use href="icons.svg#copy"></use></svg></button>
+      <button class="btn primary"><svg class="i" aria-hidden="true"><use href="icons.svg#plus"></use></svg>记一笔<kbd>⌘N</kbd></button>
+    </header>
+    <div class="filters">
+      <span class="seg"><span class="on">全部</span><span>支出</span><span>收入</span></span>
+      <span class="chip"><svg class="i" aria-hidden="true"><use href="icons.svg#calendar"></use></svg><span class="k">日期</span>10月1日 – 31日<svg class="i" aria-hidden="true"><use href="icons.svg#down"></use></svg></span>
+      <span class="chip"><span class="k">分类</span>全部<svg class="i" aria-hidden="true"><use href="icons.svg#down"></use></svg></span>
+      <span class="chip"><span class="k">账户</span>全部<svg class="i" aria-hidden="true"><use href="icons.svg#down"></use></svg></span>
+      <span class="chip"><span class="k">标签</span>全部<svg class="i" aria-hidden="true"><use href="icons.svg#down"></use></svg></span>
+      <div class="totals"><span class="muted">支出 <b class="num" style="color:var(--text)">¥9,327.50</b></span><span class="muted">收入 <b class="num in">¥18,640.00</b></span></div>
+    </div>
+    <div class="split">
+      <div class="table" role="table" aria-label="10 月流水">
+        <div class="th" role="row"><span class="chk" aria-hidden="true"></span><span class="s">日期<svg class="i" aria-hidden="true"><use href="icons.svg#dn"></use></svg></span><span>分类</span><span>备注</span><span>账户</span><span class="r">金额</span></div>
+        <div class="g"><span>10月28日<span class="muted"> 周三</span></span><span class="gsum num"><span>支出 ¥64.00</span></span></div><div class="tr"><span class="chk" aria-hidden="true"></span><span class="muted num">18:52</span><span class="cat"><i class="dot" style="background:var(--cat-food)"></i>餐饮</span><span class="note"><span class="tx">晚饭 · 楼下沙县</span></span><span class="acc">信用</span><span class="num amt">−¥28.00</span></div><div class="tr"><span class="chk" aria-hidden="true"></span><span class="muted num">12:36</span><span class="cat"><i class="dot" style="background:var(--cat-food)"></i>餐饮</span><span class="note"><span class="tx">午饭 · 牛肉粉</span></span><span class="acc">信用</span><span class="num amt">−¥32.00</span></div><div class="tr"><span class="chk" aria-hidden="true"></span><span class="muted num">08:15</span><span class="cat"><i class="dot" style="background:var(--cat-transit)"></i>交通</span><span class="note"><span class="tx">地铁</span></span><span class="acc">储蓄</span><span class="num amt">−¥4.00</span></div><div class="g"><span>10月27日<span class="muted"> 周二</span></span><span class="gsum num"><span class="in">收入 +¥1,200.00</span><span>支出 ¥649.50</span></span></div><div class="tr"><span class="chk" aria-hidden="true"></span><span class="muted num">21:04</span><span class="cat"><i class="dot" style="background:var(--cat-shopping)"></i>购物</span><span class="note"><span class="tx">冬季被子</span><span class="tag">换季</span></span><span class="acc">信用</span><span class="num amt">−¥459.00</span></div><div class="tr sel"><span class="chk on" aria-hidden="true"><svg class="i" aria-hidden="true"><use href="icons.svg#check"></use></svg></span><span class="muted num">19:30</span><span class="cat"><i class="dot" style="background:var(--cat-food)"></i>餐饮</span><span class="note"><span class="tx">和小林吃火锅</span><span class="tag">朋友</span><span class="tag">AA</span></span><span class="acc">信用</span><span class="num amt">−¥186.50</span></div><div class="tr"><span class="chk" aria-hidden="true"></span><span class="muted num">15:10</span><span class="cat"><i class="dot" style="background:var(--accent)"></i>收入</span><span class="note"><span class="tx">稿费 · 十月专栏</span></span><span class="acc">储蓄</span><span class="num amt in">+¥1,200.00</span></div><div class="tr"><span class="chk" aria-hidden="true"></span><span class="muted num">08:20</span><span class="cat"><i class="dot" style="background:var(--cat-transit)"></i>交通</span><span class="note"><span class="tx">地铁</span></span><span class="acc">储蓄</span><span class="num amt">−¥4.00</span></div><div class="g"><span>10月26日<span class="muted"> 周一</span></span><span class="gsum num"><span>支出 ¥167.00</span></span></div><div class="tr"><span class="chk" aria-hidden="true"></span><span class="muted num">22:40</span><span class="cat"><i class="dot" style="background:var(--cat-fun)"></i>娱乐</span><span class="note"><span class="tx">电影《雾港》两张</span><span class="tag">朋友</span></span><span class="acc">信用</span><span class="num amt">−¥96.00</span></div><div class="tr"><span class="chk" aria-hidden="true"></span><span class="muted num">12:05</span><span class="cat"><i class="dot" style="background:var(--cat-food)"></i>餐饮</span><span class="note"><span class="tx">午饭 · 便当</span></span><span class="acc">现金</span><span class="num amt">−¥26.00</span></div><div class="tr"><span class="chk" aria-hidden="true"></span><span class="muted num">09:30</span><span class="cat"><i class="dot" style="background:var(--cat-other)"></i>其他</span><span class="note"><span class="tx">理发</span></span><span class="acc">现金</span><span class="num amt">−¥45.00</span></div><div class="g"><span>10月25日<span class="muted"> 周日</span></span><span class="gsum num"><span>支出 ¥268.90</span></span></div><div class="tr"><span class="chk" aria-hidden="true"></span><span class="muted num">16:20</span><span class="cat"><i class="dot" style="background:var(--cat-shopping)"></i>购物</span><span class="note"><span class="tx">超市 · 日用品</span></span><span class="acc">储蓄</span><span class="num amt">−¥138.60</span></div><div class="tr"><span class="chk" aria-hidden="true"></span><span class="muted num">11:40</span><span class="cat"><i class="dot" style="background:var(--cat-transit)"></i>交通</span><span class="note"><span class="tx">打车去火车站</span></span><span class="acc">信用</span><span class="num amt">−¥72.30</span></div><div class="tr"><span class="chk" aria-hidden="true"></span><span class="muted num">10:05</span><span class="cat"><i class="dot" style="background:var(--cat-food)"></i>餐饮</span><span class="note"><span class="tx">早午餐</span></span><span class="acc">信用</span><span class="num amt">−¥58.00</span></div><div class="g"><span>10月24日<span class="muted"> 周六</span></span><span class="gsum num"><span>支出 ¥142.00</span></span></div><div class="tr"><span class="chk" aria-hidden="true"></span><span class="muted num">20:15</span><span class="cat"><i class="dot" style="background:var(--cat-food)"></i>餐饮</span><span class="note"><span class="tx">外卖 · 麻辣烫</span></span><span class="acc">信用</span><span class="num amt">−¥42.00</span></div><div class="tr"><span class="chk" aria-hidden="true"></span><span class="muted num">15:30</span><span class="cat"><i class="dot" style="background:var(--cat-fun)"></i>娱乐</span><span class="note"><span class="tx">桌游店</span></span><span class="acc">现金</span><span class="num amt">−¥88.00</span></div><div class="tr"><span class="chk" aria-hidden="true"></span><span class="muted num">09:10</span><span class="cat"><i class="dot" style="background:var(--cat-other)"></i>其他</span><span class="note"><span class="tx">快递寄书</span></span><span class="acc">现金</span><span class="num amt">−¥12.00</span></div>
+      </div>
+      <aside class="detail" aria-label="这一笔的详情">
+        <div class="d-h"><span class="tag"><i class="dot" style="background:var(--cat-food)"></i>餐饮 › 聚餐</span><button class="ib" aria-label="编辑"><svg class="i" aria-hidden="true"><use href="icons.svg#edit"></use></svg></button><button class="ib" aria-label="更多"><svg class="i" aria-hidden="true"><use href="icons.svg#more"></use></svg></button></div>
+        <div class="d-top">
+          <div class="amt num">−¥186.50</div>
+          <h2>和小林吃火锅</h2>
+        </div>
+        <dl class="fields">
+          <div><dt>时间</dt><dd class="num">2026-10-27 周二 19:30</dd></div>
+          <div><dt>账户</dt><dd><svg class="i" style="color:var(--muted)" aria-hidden="true"><use href="icons.svg#credit"></use></svg>信用</dd></div>
+          <div><dt>地点</dt><dd>老街火锅 · 二楼</dd></div>
+          <div><dt>标签</dt><dd><span class="tag">朋友</span><span class="tag">AA</span></dd></div>
+        </dl>
+        <div class="split-box">
+          <div class="row"><svg class="i" style="color:var(--muted)" aria-hidden="true"><use href="icons.svg#people"></use></svg><b style="font-weight:600">AA 两人</b><span class="muted num">每人 ¥93.25</span></div>
+          <div class="row"><span class="ava" style="background:var(--primary)">我</span>我付了<span class="num">¥186.50</span></div>
+          <div class="row"><span class="ava" style="background:var(--accent-ink)">林</span>小林应付<span class="num">¥93.25</span><span class="tag warn">未收</span></div>
+        </div>
+        <div class="receipt">
+          <svg class="pic" viewBox="0 0 44 56" aria-label="小票缩略图"><rect x=".5" y=".5" width="43" height="55" rx="4" fill="#F5F7FB" stroke="#E2E8F0"/><path d="M10 12h24M10 19h16M10 24h20M10 29h12M10 38h24" stroke="#A3AFC0" stroke-width="2" stroke-linecap="round"/><path d="M26 45h8" stroke="#55657D" stroke-width="2.5" stroke-linecap="round"/></svg>
+          <div class="t"><span>小票.jpg</span><span class="muted">拍于 19:58 · 已识别 6 项</span></div>
+        </div>
+        <div class="mini">
+          <div class="row"><span>本月餐饮</span><span class="num">¥2,148.60<span class="muted"> / 2,500</span></span></div>
+          <div class="bar"><i style="width:85.9%;background:var(--cat-food)"></i></div>
+          <span class="muted">还剩 ¥351.40，比 9 月同期少 6%</span>
+        </div>
+        <div class="d-foot">
+          <button class="btn"><svg class="i" aria-hidden="true"><use href="icons.svg#edit"></use></svg>编辑<kbd>⌘E</kbd></button>
+          <button class="btn"><svg class="i" aria-hidden="true"><use href="icons.svg#copy"></use></svg>再记一笔</button>
+          <button class="btn danger" aria-label="删除"><svg class="i" aria-hidden="true"><use href="icons.svg#trash"></use></svg></button>
+        </div>
+      </aside>
+    </div>
+    <footer class="statusbar"><span>10 月共 86 笔</span><span>已选 1 笔 · −¥186.50</span><span>按日期倒序</span><span class="ok"><i></i>本地已保存</span></footer>
+  </div>
+</div>
+</body>
+</html>

package/gallery-seed/d/orderg-x__pocket-ledger/08e9e40834f9/icons.svg

@@ -0,0 +1,30 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="book" viewBox="0 0 24 24"><path d="M5 4.5h10.5a3 3 0 0 1 3 3V20H8a3 3 0 0 1-3-3V4.5Z"/><path d="M5 17a3 3 0 0 1 3-3h10.5"/><path d="M9 8.5h5"/></symbol>
+  <symbol id="overview" viewBox="0 0 24 24"><rect x="3.5" y="3.5" width="7" height="8" rx="1.5"/><rect x="13.5" y="3.5" width="7" height="5" rx="1.5"/><rect x="13.5" y="11.5" width="7" height="9" rx="1.5"/><rect x="3.5" y="14.5" width="7" height="6" rx="1.5"/></symbol>
+  <symbol id="list" viewBox="0 0 24 24"><path d="M9 6h11M9 12h11M9 18h11"/><circle cx="4.5" cy="6" r=".9"/><circle cx="4.5" cy="12" r=".9"/><circle cx="4.5" cy="18" r=".9"/></symbol>
+  <symbol id="budget" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5"/><circle cx="12" cy="12" r="4.5"/><path d="M12 3.5V7.5"/></symbol>
+  <symbol id="report" viewBox="0 0 24 24"><path d="M4 20h16"/><path d="M7 16v-5M12 16V6M17 16v-8"/></symbol>
+  <symbol id="cash" viewBox="0 0 24 24"><rect x="2.5" y="6" width="19" height="12" rx="2"/><circle cx="12" cy="12" r="2.6"/><path d="M6 9.5v5M18 9.5v5"/></symbol>
+  <symbol id="save" viewBox="0 0 24 24"><path d="M4 9.5 12 5l8 4.5"/><path d="M5.5 10v7M10 10v7M14 10v7M18.5 10v7"/><path d="M4 19.5h16"/></symbol>
+  <symbol id="credit" viewBox="0 0 24 24"><rect x="3" y="5.5" width="18" height="13" rx="2"/><path d="M3 10h18M7 15h3"/></symbol>
+  <symbol id="gear" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z"/></symbol>
+  <symbol id="search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="6.5"/><path d="m20 20-4.2-4.2"/></symbol>
+  <symbol id="plus" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></symbol>
+  <symbol id="left" viewBox="0 0 24 24"><path d="m14.5 6-6 6 6 6"/></symbol>
+  <symbol id="right" viewBox="0 0 24 24"><path d="m9.5 6 6 6-6 6"/></symbol>
+  <symbol id="down" viewBox="0 0 24 24"><path d="m6 9.5 6 6 6-6"/></symbol>
+  <symbol id="filter" viewBox="0 0 24 24"><path d="M4 6h16M7 12h10M10 18h4"/></symbol>
+  <symbol id="edit" viewBox="0 0 24 24"><path d="M4 20h4L19 9a2.8 2.8 0 0 0-4-4L4 16v4Z"/><path d="m13.5 6.5 4 4"/></symbol>
+  <symbol id="more" viewBox="0 0 24 24"><circle cx="5.5" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="18.5" cy="12" r="1"/></symbol>
+  <symbol id="copy" viewBox="0 0 24 24"><rect x="8.5" y="8.5" width="11" height="11" rx="2"/><path d="M15.5 8.5V6a1.5 1.5 0 0 0-1.5-1.5H6A1.5 1.5 0 0 0 4.5 6v8A1.5 1.5 0 0 0 6 15.5h2.5"/></symbol>
+  <symbol id="trash" viewBox="0 0 24 24"><path d="M4.5 7h15M9.5 7V4.5h5V7M6.5 7l1 13h9l1-13"/><path d="M10 11v5.5M14 11v5.5"/></symbol>
+  <symbol id="receipt" viewBox="0 0 24 24"><path d="M6 3.5h12V21l-2-1.3-2 1.3-2-1.3-2 1.3-2-1.3L6 21V3.5Z"/><path d="M9 8h6M9 12h6M9 16h3"/></symbol>
+  <symbol id="up" viewBox="0 0 24 24"><path d="m7 14 5-5 5 5"/></symbol>
+  <symbol id="dn" viewBox="0 0 24 24"><path d="m7 10 5 5 5-5"/></symbol>
+  <symbol id="x" viewBox="0 0 24 24"><path d="m7 7 10 10M17 7 7 17"/></symbol>
+  <symbol id="check" viewBox="0 0 24 24"><path d="m5.5 12.5 4.2 4.2 8.8-9.4"/></symbol>
+  <symbol id="pin" viewBox="0 0 24 24"><path d="M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 0 1 13 0c0 5.4-6.5 11-6.5 11Z"/><circle cx="12" cy="10" r="2.3"/></symbol>
+  <symbol id="people" viewBox="0 0 24 24"><circle cx="9" cy="8.5" r="3.2"/><path d="M3.5 19.5c.6-3.2 2.8-5 5.5-5s4.9 1.8 5.5 5"/><circle cx="16.8" cy="9.5" r="2.5"/><path d="M15.5 14.6c2.6-.3 4.5 1.4 5 4.4"/></symbol>
+  <symbol id="calendar" viewBox="0 0 24 24"><rect x="3.5" y="5" width="17" height="15.5" rx="2"/><path d="M3.5 10h17M8 3v4M16 3v4"/></symbol>
+  <symbol id="sort" viewBox="0 0 24 24"><path d="M7 4v16M3.5 16.5 7 20l3.5-3.5M17 20V4M13.5 7.5 17 4l3.5 3.5"/></symbol>
+</svg>

package/gallery-seed/d/orderg-x__pocket-ledger/08e9e40834f9/overview.html

@@ -0,0 +1,181 @@
+<!doctype html>
+<html lang="zh">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="dsh-design" content="desktop">
+<title>总览 · 小账本</title>
+<link rel="stylesheet" href="tokens.css">
+<link rel="stylesheet" href="app.css">
+<style>
+.content { flex: 1; overflow: auto; padding: var(--space-5); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: min-content; gap: var(--space-4); align-content: start; }
+.kpi { grid-column: span 3; padding: var(--space-4); display: flex; flex-direction: column; gap: 6px; }
+.kpi .lb { display: flex; align-items: center; gap: 6px; color: var(--muted); }
+.kpi .v { font-size: var(--fs-xl); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; white-space: nowrap; }
+.kpi .v small { font-size: var(--fs-lg); font-weight: 500; margin-left: 1px; }
+.kpi .d { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; }
+.kpi .d .tag { height: 18px; padding: 0 4px; gap: 1px; }
+.kpi .d .tag svg { width: 12px; height: 12px; stroke-width: 2.25; }
+.mix { grid-column: span 5; }
+.daily { grid-column: span 7; display: flex; flex-direction: column; }
+.budget { grid-column: span 5; }
+.recent { grid-column: span 7; }
+
+.mix-body { display: flex; align-items: center; gap: var(--space-5); padding: 4px var(--space-4) var(--space-4); }
+.donut { position: relative; width: 160px; height: 160px; flex: none; }
+.donut svg { width: 160px; height: 160px; transform: rotate(-90deg); }
+.donut circle { fill: none; stroke-width: 18; }
+.donut .c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
+.donut .c b { font-size: var(--fs-lg); font-weight: 600; }
+.donut .c span { font-size: var(--fs-sm); color: var(--muted); }
+.legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.legend li { display: flex; align-items: center; gap: var(--space-2); height: 28px; border-bottom: 1px solid var(--line); }
+.legend li:last-child { border-bottom: 0; }
+.legend .nm { flex: 1; white-space: nowrap; }
+.legend .amt { width: 84px; text-align: right; }
+.legend .pc { width: 48px; text-align: right; color: var(--muted); }
+
+.seg { display: inline-flex; padding: 2px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); margin-left: auto; }
+.seg span { height: 22px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: var(--radius-xs); color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; }
+.seg .on { background: var(--surface); color: var(--text); font-weight: 500; box-shadow: var(--shadow); }
+.chart { position: relative; flex: 1; min-height: 168px; margin: 0 var(--space-4) 0 56px; }
+.grid-l { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); }
+.grid-l span { position: absolute; right: calc(100% + 8px); top: -9px; font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
+.grid-l.ref { border-top: 1px dashed var(--muted); }
+.grid-l.ref em { position: absolute; right: 0; top: -20px; font-style: normal; font-size: var(--fs-sm); color: var(--muted); background: var(--surface); padding: 0 0 0 6px; white-space: nowrap; }
+.bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 4px; }
+.b { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
+.b i { display: block; width: 100%; max-width: 12px; background: var(--primary); opacity: .78; border-radius: 4px 4px 0 0; transition: opacity .15s var(--ease); }
+.b:hover i { opacity: 1; }
+.b.top i { opacity: 1; }
+.b.future i { background: transparent; border: 1px dashed #B8C2D1; border-bottom: 0; opacity: 1; }
+.b em { position: absolute; bottom: calc(92.8% + 4px); font-style: normal; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
+.xaxis { position: relative; height: 18px; margin: 6px var(--space-4) var(--space-3) 56px; font-size: var(--fs-sm); color: var(--muted); }
+.xaxis span { position: absolute; top: 0; width: 0; display: flex; justify-content: center; white-space: nowrap; }
+
+.btotal { padding: 0 var(--space-4) var(--space-3); }
+.btotal .row { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: 6px; white-space: nowrap; }
+.btotal .row b { font-size: var(--fs-lg); font-weight: 600; }
+.btotal .row .r { margin-left: auto; color: var(--muted); white-space: nowrap; }
+.btotal .bar { height: 8px; }
+.bar { flex: 1; height: 6px; border-radius: 999px; background: var(--track); overflow: hidden; min-width: 40px; }
+.bar i { display: block; height: 100%; border-radius: 999px; }
+.blist { list-style: none; margin: 0; padding: 0 var(--space-4) var(--space-3); border-top: 1px solid var(--line); padding-top: var(--space-2); }
+.blist li { display: flex; align-items: center; gap: var(--space-3); height: 30px; }
+.blist .nm { width: 52px; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
+.blist .val { width: 132px; text-align: right; }
+.blist .pc { width: 72px; text-align: right; color: var(--muted); }
+.blist .tag { width: 72px; justify-content: center; }
+
+.rlist { border-top: 1px solid var(--line); }
+.r { display: grid; grid-template-columns: 108px 72px minmax(0, 1fr) 48px 96px; align-items: center; gap: var(--space-3); height: 40px; padding: 0 var(--space-4); border-bottom: 1px solid var(--line); transition: background .15s var(--ease); }
+.r:last-child { border-bottom: 0; }
+.r:hover { background: var(--hover); }
+.r .when { display: flex; gap: 6px; white-space: nowrap; }
+.r .cat { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
+.r .note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.r .amt { text-align: right; font-weight: 600; }
+.kpi .d { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+@media (max-width: 1200px) {
+  .kpi { grid-column: span 6; }
+  .mix, .daily, .budget, .recent { grid-column: span 12; }
+}
+</style>
+</head>
+<body>
+<div class="win">
+  <aside class="side" aria-label="侧栏">
+    <div class="brand"><span class="logo"><svg class="i" aria-hidden="true"><use href="icons.svg#book"></use></svg></span><b>小账本</b><span class="book">日常<svg class="i" style="width:12px;height:12px" aria-hidden="true"><use href="icons.svg#down"></use></svg></span></div>
+    <nav class="nav" aria-label="主导航">
+      <a href="overview.html" class="on"><svg class="i" aria-hidden="true"><use href="icons.svg#overview"></use></svg>总览</a>
+      <a href="entries.html" class=""><svg class="i" aria-hidden="true"><use href="icons.svg#list"></use></svg>流水<span class="count num">86</span></a>
+      <span class="item"><svg class="i" aria-hidden="true"><use href="icons.svg#budget"></use></svg>预算<span class="flag"><i class="dot" style="background:var(--danger);width:6px;height:6px"></i>1 项超支</span></span>
+      <span class="item"><svg class="i" aria-hidden="true"><use href="icons.svg#report"></use></svg>报表</span>
+    </nav>
+    <h3>账户</h3>
+    <div class="acct"><svg class="i" aria-hidden="true"><use href="icons.svg#cash"></use></svg>现金<span class="num">¥1,286.40</span></div>
+    <div class="acct"><svg class="i" aria-hidden="true"><use href="icons.svg#save"></use></svg>储蓄<span class="num">¥48,200.00</span></div>
+    <div class="acct"><svg class="i" aria-hidden="true"><use href="icons.svg#credit"></use></svg>信用<span class="num">−¥3,412.80</span></div>
+    <div class="net"><span>净资产</span><b class="num">¥46,073.60</b></div>
+    <h3>常用分类</h3>
+    <div class="nav">
+      <span class="item"><i class="dot" style="background:var(--cat-food)"></i>餐饮</span>
+      <span class="item"><i class="dot" style="background:var(--cat-shopping)"></i>购物</span>
+      <span class="item"><i class="dot" style="background:var(--cat-transit)"></i>交通</span>
+      <span class="item"><i class="dot" style="background:var(--cat-fun)"></i>娱乐</span>
+    </div>
+    <div class="side-foot"><i class="ok"></i>本地已保存 · 刚刚<span class="gear" title="设置"><svg class="i" aria-hidden="true"><use href="icons.svg#gear"></use></svg></span></div>
+  </aside>
+  <div class="main">
+    <header class="toolbar">
+      <h1>总览</h1>
+      <div class="month">
+        <button class="ib" aria-label="上个月"><svg class="i" aria-hidden="true"><use href="icons.svg#left"></use></svg></button>
+        <b>2026 年 10 月</b>
+        <button class="ib" aria-label="下个月"><svg class="i" aria-hidden="true"><use href="icons.svg#right"></use></svg></button>
+      </div>
+      <span class="tag">还剩 3 天</span>
+      <div class="spacer"></div>
+      <div class="search"><svg class="i" aria-hidden="true"><use href="icons.svg#search"></use></svg><span>搜索流水</span><kbd>⌘F</kbd></div>
+      <button class="btn primary"><svg class="i" aria-hidden="true"><use href="icons.svg#plus"></use></svg>记一笔<kbd>⌘N</kbd></button>
+    </header>
+    <main class="content">
+      <section class="card kpi">
+        <span class="lb">本月支出</span>
+        <span class="v num">¥9,327<small>.50</small></span>
+        <span class="d"><span class="tag good"><svg class="i" aria-hidden="true"><use href="icons.svg#dn"></use></svg>8.4%</span>比 9 月少花 ¥855.40</span>
+      </section>
+      <section class="card kpi">
+        <span class="lb">本月收入</span>
+        <span class="v num">¥18,640<small>.00</small></span>
+        <span class="d"><span class="tag good"><svg class="i" aria-hidden="true"><use href="icons.svg#up"></use></svg>3.2%</span>工资、稿费、理财收益</span>
+      </section>
+      <section class="card kpi">
+        <span class="lb">结余</span>
+        <span class="v num">¥9,312<small>.50</small></span>
+        <span class="d"><span class="tag">存下 50.0%</span>比 9 月多 ¥1,433.40</span>
+      </section>
+      <section class="card kpi">
+        <span class="lb">日均还能花</span>
+        <span class="v num">¥390<small>.83</small></span>
+        <span class="d">预算剩 ¥1,172.50 · 3 天</span>
+      </section>
+
+      <section class="card mix">
+        <div class="card-h"><h2>支出构成</h2><span class="muted">按分类</span></div>
+        <div class="mix-body">
+          <div class="donut"><svg viewBox="0 0 160 160" role="img" aria-label="10 月支出按分类：住房 40.7%，餐饮 23.0%，购物 18.1%，交通 6.9%，娱乐 6.3%，其他 5.0%"><circle cx="80" cy="80" r="60" stroke="var(--cat-housing)" stroke-dasharray="151.59 225.41" stroke-dashoffset="0.00"/><circle cx="80" cy="80" r="60" stroke="var(--cat-food)" stroke-dasharray="84.84 292.15" stroke-dashoffset="-153.59"/><circle cx="80" cy="80" r="60" stroke="var(--cat-shopping)" stroke-dasharray="66.07 310.92" stroke-dashoffset="-240.43"/><circle cx="80" cy="80" r="60" stroke="var(--cat-transit)" stroke-dasharray="23.98 353.01" stroke-dashoffset="-308.50"/><circle cx="80" cy="80" r="60" stroke="var(--cat-fun)" stroke-dasharray="21.68 355.31" stroke-dashoffset="-334.48"/><circle cx="80" cy="80" r="60" stroke="var(--cat-other)" stroke-dasharray="16.83 360.16" stroke-dashoffset="-358.16"/></svg><div class="c"><b class="num">¥9,327.50</b><span>6 个分类</span></div></div>
+          <ul class="legend"><li><i class="dot" style="background:var(--cat-housing)"></i><span class="nm">住房</span><span class="num amt">¥3,800.00</span><span class="num pc">40.7%</span></li><li><i class="dot" style="background:var(--cat-food)"></i><span class="nm">餐饮</span><span class="num amt">¥2,148.60</span><span class="num pc">23.0%</span></li><li><i class="dot" style="background:var(--cat-shopping)"></i><span class="nm">购物</span><span class="num amt">¥1,684.30</span><span class="num pc">18.1%</span></li><li><i class="dot" style="background:var(--cat-transit)"></i><span class="nm">交通</span><span class="num amt">¥642.80</span><span class="num pc">6.9%</span></li><li><i class="dot" style="background:var(--cat-fun)"></i><span class="nm">娱乐</span><span class="num amt">¥586.00</span><span class="num pc">6.3%</span></li><li><i class="dot" style="background:var(--cat-other)"></i><span class="nm">其他</span><span class="num amt">¥465.80</span><span class="num pc">5.0%</span></li></ul>
+        </div>
+      </section>
+
+      <section class="card daily">
+        <div class="card-h"><h2>每日支出</h2><span class="muted">不含房租</span><span class="seg"><span class="on">日</span><span>周</span><span>月</span></span></div>
+        <div class="chart" role="img" aria-label="10 月每日支出柱状图，最高 10 月 27 日 ¥649.50">
+          <div class="grid-l" style="bottom:85.7%"><span>600</span></div>
+          <div class="grid-l" style="bottom:57.1%"><span>400</span></div>
+          <div class="grid-l ref" style="bottom:30.9%"><span>216</span><em>日均预算</em></div>
+          <div class="grid-l" style="bottom:0"><span>0</span></div>
+          <div class="bars"><div class="b" title="10月1日 ¥342.00"><i style="height:48.9%"></i></div><div class="b" title="10月2日 ¥438.00"><i style="height:62.6%"></i></div><div class="b" title="10月3日 ¥356.00"><i style="height:50.9%"></i></div><div class="b" title="10月4日 ¥262.00"><i style="height:37.4%"></i></div><div class="b" title="10月5日 ¥298.00"><i style="height:42.6%"></i></div><div class="b" title="10月6日 ¥188.00"><i style="height:26.9%"></i></div><div class="b" title="10月7日 ¥142.00"><i style="height:20.3%"></i></div><div class="b" title="10月8日 ¥96.00"><i style="height:13.7%"></i></div><div class="b" title="10月9日 ¥132.00"><i style="height:18.9%"></i></div><div class="b" title="10月10日 ¥188.10"><i style="height:26.9%"></i></div><div class="b" title="10月11日 ¥226.00"><i style="height:32.3%"></i></div><div class="b" title="10月12日 ¥84.00"><i style="height:12.0%"></i></div><div class="b" title="10月13日 ¥118.00"><i style="height:16.9%"></i></div><div class="b" title="10月14日 ¥76.00"><i style="height:10.9%"></i></div><div class="b" title="10月15日 ¥162.00"><i style="height:23.1%"></i></div><div class="b" title="10月16日 ¥128.00"><i style="height:18.3%"></i></div><div class="b" title="10月17日 ¥198.00"><i style="height:28.3%"></i></div><div class="b" title="10月18日 ¥184.00"><i style="height:26.3%"></i></div><div class="b" title="10月19日 ¥72.00"><i style="height:10.3%"></i></div><div class="b" title="10月20日 ¥98.00"><i style="height:14.0%"></i></div><div class="b" title="10月21日 ¥136.00"><i style="height:19.4%"></i></div><div class="b" title="10月22日 ¥88.00"><i style="height:12.6%"></i></div><div class="b" title="10月23日 ¥154.00"><i style="height:22.0%"></i></div><div class="b" title="10月24日 ¥212.00"><i style="height:30.3%"></i></div><div class="b" title="10月25日 ¥268.90"><i style="height:38.4%"></i></div><div class="b" title="10月26日 ¥167.00"><i style="height:23.9%"></i></div><div class="b top" title="10月27日 ¥649.50"><i style="height:92.8%"></i><em class="num">¥649.50</em></div><div class="b" title="10月28日 ¥64.00"><i style="height:9.1%"></i></div><div class="b future" title="10月29日"><i style="height:10%"></i></div><div class="b future" title="10月30日"><i style="height:10%"></i></div><div class="b future" title="10月31日"><i style="height:10%"></i></div></div>
+        </div>
+        <div class="xaxis"><span style="left:1.61%">1日</span><span style="left:24.19%">8日</span><span style="left:46.77%">15日</span><span style="left:69.35%">22日</span><span style="left:91.94%">29日</span></div>
+      </section>
+
+      <section class="card budget">
+        <div class="card-h"><h2>预算</h2><span class="tag warn">购物超支</span><span class="muted" style="margin-left:auto">月预算 ¥10,500</span></div>
+        <div class="btotal">
+          <div class="row"><b class="num">88.8%</b><span class="muted">已用 ¥9,327.50</span><span class="r num">剩 ¥1,172.50</span></div>
+          <div class="bar"><i style="width:88.8%;background:var(--primary)"></i></div>
+        </div>
+        <ul class="blist"><li><span class="nm"><i class="dot" style="background:var(--cat-housing)"></i>住房</span><span class="bar"><i style="width:100.0%;background:var(--cat-housing)"></i></span><span class="num val">3,800.00<span class="muted"> / 3,800</span></span><span class="num pc">100%</span></li><li><span class="nm"><i class="dot" style="background:var(--cat-food)"></i>餐饮</span><span class="bar"><i style="width:85.9%;background:var(--cat-food)"></i></span><span class="num val">2,148.60<span class="muted"> / 2,500</span></span><span class="num pc">86%</span></li><li class="over"><span class="nm"><i class="dot" style="background:var(--cat-shopping)"></i>购物</span><span class="bar"><i style="width:100.0%;background:var(--danger)"></i></span><span class="num val">1,684.30<span class="muted"> / 1,500</span></span><span class="tag warn">超 ¥184.30</span></li><li><span class="nm"><i class="dot" style="background:var(--cat-transit)"></i>交通</span><span class="bar"><i style="width:71.4%;background:var(--cat-transit)"></i></span><span class="num val">642.80<span class="muted"> / 900</span></span><span class="num pc">71%</span></li><li><span class="nm"><i class="dot" style="background:var(--cat-fun)"></i>娱乐</span><span class="bar"><i style="width:73.3%;background:var(--cat-fun)"></i></span><span class="num val">586.00<span class="muted"> / 800</span></span><span class="num pc">73%</span></li><li><span class="nm"><i class="dot" style="background:var(--cat-other)"></i>其他</span><span class="bar"><i style="width:46.6%;background:var(--cat-other)"></i></span><span class="num val">465.80<span class="muted"> / 1,000</span></span><span class="num pc">47%</span></li></ul>
+      </section>
+
+      <section class="card recent">
+        <div class="card-h"><h2>最近几笔</h2><a class="more" href="entries.html">全部流水<svg class="i" style="width:14px;height:14px" aria-hidden="true"><use href="icons.svg#right"></use></svg></a></div>
+        <div class="rlist"><a class="r" href="entries.html"><span class="when"><span>10月28日</span><span class="muted num">18:52</span></span><span class="cat"><i class="dot" style="background:var(--cat-food)"></i>餐饮</span><span class="note">晚饭 · 楼下沙县</span><span class="acc muted">信用</span><span class="num amt">−¥28.00</span></a><a class="r" href="entries.html"><span class="when"><span>10月28日</span><span class="muted num">12:36</span></span><span class="cat"><i class="dot" style="background:var(--cat-food)"></i>餐饮</span><span class="note">午饭 · 牛肉粉</span><span class="acc muted">信用</span><span class="num amt">−¥32.00</span></a><a class="r" href="entries.html"><span class="when"><span>10月28日</span><span class="muted num">08:15</span></span><span class="cat"><i class="dot" style="background:var(--cat-transit)"></i>交通</span><span class="note">地铁</span><span class="acc muted">储蓄</span><span class="num amt">−¥4.00</span></a><a class="r" href="entries.html"><span class="when"><span>10月27日</span><span class="muted num">21:04</span></span><span class="cat"><i class="dot" style="background:var(--cat-shopping)"></i>购物</span><span class="note">冬季被子</span><span class="acc muted">信用</span><span class="num amt">−¥459.00</span></a><a class="r" href="entries.html"><span class="when"><span>10月27日</span><span class="muted num">19:30</span></span><span class="cat"><i class="dot" style="background:var(--cat-food)"></i>餐饮</span><span class="note">和小林吃火锅</span><span class="acc muted">信用</span><span class="num amt">−¥186.50</span></a><a class="r" href="entries.html"><span class="when"><span>10月27日</span><span class="muted num">15:10</span></span><span class="cat"><i class="dot" style="background:var(--accent)"></i>收入</span><span class="note">稿费 · 十月专栏</span><span class="acc muted">储蓄</span><span class="num amt in">+¥1,200.00</span></a></div>
+      </section>
+    </main>
+  </div>
+</div>
+</body>
+</html>