diff --git a/.gitignore b/.gitignore index e4922c2..4734cd2 100644 --- a/.gitignore +++ b/.gitignore @@ -2,6 +2,7 @@ legacy-cent-app/ node_modules/ dist/ backups/ +docs/prototype/ .env .env.* !.env.example diff --git a/docs/原型图/分类轮盘步骤.html b/docs/原型图/分类轮盘步骤.html deleted file mode 100644 index 4128b78..0000000 --- a/docs/原型图/分类轮盘步骤.html +++ /dev/null @@ -1,175 +0,0 @@ - - - - - - 分类轮盘步骤示意 - - - -
-
-

分类轮盘步骤示意

-

快速记账在账本流水页底部抽屉内完成。轮盘是临时选择态，不能把所有层级同时放在一个画面里。

-
- -
-
-
- 1 - 抽屉默认态 -
-
- -
- 58.00 -
-
-
- 支出 - 餐饮 - 外卖 -
- -
-
- -
-
- 789支出 - 456+ - 123- - .0⌫✓ -
-
-
- -
-
- 2 - 点击支出按钮 -
-
-
- 58.00 -
-
-
- 支出 -
- -
-
-
- - - -
-
-
- 789✓ - 456+ - 123- - .0⌫✓ -
-
-
- -
-
- 3 - 选择支出后 -
-
-
- 58.00 -
-
-
- 支出 -
- -
-
-
- - - - - -
-
-
- 789✓ - 456+ - 123- - .0⌫✓ -
-
-
- -
-
- 4 - 进入子分类 -
-
-
- 58.00 -
-
-
- 支出 - 餐饮 -
- -
-
-
- - - - -
-
-
- 789✓ - 456+ - 123- - .0⌫✓ -
-
-
- -
-
- 5 - 确认当前层级 -
-
-
- 58.00 -
-
-
- 支出 - 餐饮 - 外卖 -
- -
-
- -
-
- 789外卖 - 456+ - 123- - .0⌫✓ -
-
-
-
-
- - diff --git a/docs/原型图/原型样式.css b/docs/原型图/原型样式.css deleted file mode 100644 index 1d88f42..0000000 --- a/docs/原型图/原型样式.css +++ /dev/null @@ -1,835 +0,0 @@ -:root { - color: #101827; - background: - radial-gradient(circle at 12% 0%, rgba(255, 122, 89, 0.28), transparent 30%), - radial-gradient(circle at 92% 8%, rgba(45, 212, 191, 0.24), transparent 32%), - linear-gradient(135deg, #fff3e8 0%, #ecfeff 48%, #fff1f8 100%); - font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; - line-height: 1.5; -} - -* { - box-sizing: border-box; -} - -body { - margin: 0; - min-width: 320px; -} - -button, -input { - font: inherit; -} - -.stage { - min-height: 100vh; - display: grid; - place-items: start center; - padding: 24px; -} - -.phone { - width: min(100%, 390px); - height: 780px; - min-height: 780px; - overflow: hidden; - border: 1px solid rgba(20, 83, 45, 0.12); - border-radius: 28px; - background: #ffffff; - box-shadow: 0 24px 58px rgba(15, 23, 42, 0.14); -} - -.appbar { - background: linear-gradient(135deg, #00a676 0%, #00b4d8 52%, #ff7a59 100%); - color: #fff; - padding: 18px 18px 14px; -} - -.toolbar { - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; -} - -.title { - margin: 0; - font-size: 20px; - font-weight: 750; - letter-spacing: 0; -} - -.icon-button { - width: 36px; - height: 36px; - display: grid; - place-items: center; - border: 0; - border-radius: 18px; - background: rgba(255, 255, 255, 0.22); - color: inherit; - font-size: 26px; - line-height: 1; -} - -.toolbar-spacer { - width: 36px; - height: 36px; -} - -.icon { - width: 18px; - height: 18px; - display: block; -} - -.deprecated-note { - margin: 24px 14px; - border: 1px solid #bdeee0; - border-radius: 8px; - padding: 16px; - background: #ffffff; -} - -.deprecated-note h2 { - margin: 0 0 8px; - font-size: 18px; -} - -.deprecated-note p { - margin: 0 0 12px; - color: #526072; -} - -.deprecated-note a { - color: #007a78; - font-weight: 800; -} - -.stats { - display: grid; - grid-template-columns: 1fr 1.2fr 1fr; - gap: 12px; - margin-top: 20px; - text-align: center; -} - -.stat strong { - display: block; - font-size: 20px; -} - -.stat span { - color: rgba(255, 255, 255, 0.76); - font-size: 12px; -} - -.content { - padding: 14px 14px 2px; -} - -.phone-relative .content { - padding-bottom: 250px; -} - -.section-title { - margin: 14px 2px 8px; - color: #0f5f68; - font-size: 13px; - font-weight: 650; -} - -.ledger-card { - border: 1px solid #d8f1e7; - border-radius: 8px; - padding: 14px; - background: #ffffff; -} - -.ledger-card + .ledger-card { - margin-top: 10px; -} - -.ledger-head, -.row { - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; -} - -.ledger-name { - margin: 0; - font-size: 19px; - line-height: 1.2; -} - -.badge { - display: inline-flex; - align-items: center; - min-height: 24px; - padding: 0 9px; - border-radius: 12px; - background: #d7fbef; - color: #007a5a; - font-size: 12px; - font-weight: 700; - white-space: nowrap; -} - -.muted { - color: #526072; - font-size: 13px; -} - -.card-actions { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 8px; - margin-top: 14px; - border-top: 1px solid #dff5ee; - padding-top: 12px; -} - -.action { - min-height: 36px; - border: 1px solid #ccefe5; - border-radius: 8px; - background: #fff; - color: #152033; -} - -.day { - margin: 14px -14px 0; - padding: 7px 16px; - background: #e9fbf7; - color: #0f5f68; - font-size: 12px; - font-weight: 700; -} - -.entry { - display: grid; - grid-template-columns: 40px 1fr auto; - gap: 10px; - align-items: center; - min-height: 62px; - border-bottom: 1px solid #e0f4ed; -} - -.entry-icon { - width: 34px; - height: 34px; - display: grid; - place-items: center; - border-radius: 17px; - background: #00a676; - color: #fff; - font-size: 13px; - font-weight: 750; -} - -.entry-main strong, -.entry-amount strong { - display: block; -} - -.entry-main span, -.entry-amount span { - color: #526072; - font-size: 12px; -} - -.entry-amount { - text-align: right; -} - -.expense { - color: #d94836; -} - -.income { - color: #008f5f; -} - -.fab { - position: absolute; - right: 24px; - bottom: 24px; - width: 56px; - height: 56px; - border: 0; - border-radius: 28px; - background: #00a676; - color: #fff; - font-size: 28px; - box-shadow: 0 8px 24px rgba(0, 166, 118, 0.28); -} - -.phone-relative { - position: relative; -} - -.drawer-scrim { - position: absolute; - inset: 0; - z-index: 2; - background: linear-gradient(to bottom, rgba(15, 23, 42, 0.02), rgba(15, 23, 42, 0.2)); - pointer-events: none; -} - -.entry-drawer { - position: absolute; - right: 0; - bottom: 0; - left: 0; - z-index: 3; - min-height: 292px; - overflow: hidden; - border-top: 1px solid #bdeee0; - border-radius: 18px 18px 0 0; - background: #ffffff; - box-shadow: 0 -18px 36px rgba(15, 23, 42, 0.16); -} - -.drawer-handle { - width: 42px; - height: 5px; - margin: 9px auto 0; - border-radius: 999px; - background: #8ee8d4; -} - -.drawer-amount-line { - padding-top: 12px; - padding-bottom: 8px; -} - -.radial-step { - position: relative; - width: 176px; - height: 118px; - margin-left: auto; -} - -.radial-center, -.radial-node { - position: absolute; - z-index: 1; - border: 1px solid transparent; - border-radius: 999px; - display: grid; - place-items: center; - box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08); - font-weight: 800; - white-space: nowrap; -} - -.radial-center { - right: 0; - bottom: 0; - width: 54px; - height: 54px; - border: 0; - background: #00a676; - color: #fff; - font-size: 20px; -} - -.radial-node { - min-width: 48px; - height: 34px; - padding: 0 10px; - background: #ffffff; - color: #101827; - font-size: 12px; -} - -.radial-node.active { - border-color: #ffb703; - background: #fff0bf; - color: #9b4d00; -} - -.type-expense { - right: 68px; - bottom: 8px; -} - -.type-income { - right: 34px; - bottom: 70px; -} - -.category-food { - right: 88px; - bottom: 4px; - border-color: #ffbf87; -} - -.category-transit { - right: 104px; - bottom: 48px; - border-color: #93c5fd; -} - -.category-daily { - right: 54px; - bottom: 82px; - border-color: #86efac; -} - -.category-shop { - right: 0; - bottom: 96px; - border-color: #f9a8d4; -} - -.sub-takeout { - right: 86px; - bottom: 8px; -} - -.sub-restaurant { - right: 92px; - bottom: 54px; -} - -.sub-coffee { - right: 40px; - bottom: 88px; -} - -.selection-row { - display: flex; - align-items: center; - justify-content: space-between; - gap: 10px; - padding: 0 14px 10px; -} - -.selected-path { - display: flex; - align-items: center; - min-width: 0; - flex-wrap: wrap; - gap: 5px; - padding: 0; - color: #0f5f68; - font-size: 12px; - font-weight: 750; -} - -.selected-path span + span::before, -.selected-path span + strong::before { - content: ">"; - margin-right: 5px; - color: #00a676; -} - -.selected-path span, -.selected-path strong { - min-height: 24px; - border-radius: 12px; - padding: 3px 8px; - background: #e6fbf8; -} - -.selected-path strong { - background: #fff0bf; - color: #9b4d00; -} - -.drawer-note-line { - padding-bottom: 10px; -} - -.flow-stage { - width: min(100%, 1180px); - margin: 0 auto; - padding: 28px 20px 48px; -} - -.flow-intro { - margin-bottom: 20px; -} - -.flow-intro h1 { - margin: 0 0 6px; - font-size: 26px; - line-height: 1.15; -} - -.flow-intro p { - margin: 0; - color: #526072; -} - -.flow-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); - gap: 18px; - align-items: start; -} - -.flow-phone { - width: 100%; - height: 470px; - min-height: 470px; - border-radius: 20px; -} - -.mini-appbar { - min-height: 58px; - padding: 12px 14px; - display: flex; - align-items: center; - gap: 10px; - background: linear-gradient(135deg, #00a676 0%, #00b4d8 100%); - color: #fff; -} - -.mini-appbar span { - width: 28px; - height: 28px; - border-radius: 14px; - display: grid; - place-items: center; - background: rgba(255, 255, 255, 0.22); - font-weight: 850; -} - -.drawer-demo { - position: relative; - min-height: 412px; - background: #ffffff; -} - -.floating-choice { - position: absolute; - right: 7px; - bottom: 150px; - z-index: 4; - padding: 10px; - border: 1px solid rgba(189, 238, 224, 0.86); - border-radius: 16px; - background: rgba(255, 255, 255, 0.94); - box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16); -} - -.mini-keypad { - display: grid; - grid-template-columns: repeat(4, 1fr); - margin-top: 8px; - border-top: 1px solid #bdeee0; -} - -.mini-keypad span, -.mini-keypad strong { - min-height: 38px; - border-right: 1px solid #d7f5ec; - border-bottom: 1px solid #d7f5ec; - display: grid; - place-items: center; - font-size: 14px; -} - -.mini-keypad span:nth-child(4n) { - border-right: 0; - background: #e6fbf8; - color: #007a78; -} - -.mini-keypad strong { - border-right: 0; - background: #00a676; - color: #fff; -} - -.mini-keypad .category-cell { - background: #fff0bf; - color: #9b4d00; - font-weight: 800; -} - -.mini-keypad .confirm-cell { - background: #00a676; - color: #fff; -} - -.active-picker { - margin-top: 170px; -} - -.bottom-panel { - margin-top: 18px; - border-top: 1px solid #d7f5ec; - background: #ffffff; -} - -.amount-line { - display: flex; - align-items: center; - justify-content: space-between; - gap: 14px; - padding: 16px; -} - -.amount-line strong { - font-size: 34px; - line-height: 1; -} - -.amount-meta { - display: grid; - justify-items: end; - gap: 7px; - min-width: max-content; -} - -.toggle { - min-width: 58px; - min-height: 34px; - border: 0; - border-radius: 17px; - background: #ff5a47; - color: #fff; - font-weight: 750; -} - -.date-pill { - min-height: 28px; - border: 1px solid #ffc56d; - border-radius: 14px; - padding: 0 10px; - background: #fff2cc; - color: #a45100; - font-size: 12px; - font-weight: 750; -} - -.chips { - display: flex; - gap: 8px; - overflow-x: auto; - padding: 0 14px 12px; - scrollbar-width: none; -} - -.chips::-webkit-scrollbar { - display: none; -} - -.chip { - min-width: max-content; - min-height: 34px; - border: 1px solid #bdeee0; - border-radius: 17px; - padding: 0 12px; - display: inline-flex; - align-items: center; - gap: 6px; - background: #ffffff; - color: #115e59; -} - -.chip.active { - border-color: #ffb703; - background: #fff0bf; - color: #9b4d00; - font-weight: 750; -} - -.category-grid { - display: grid; - grid-template-columns: repeat(5, minmax(0, 1fr)); - gap: 8px; - padding-bottom: 12px; -} - -.category { - min-width: 0; - min-height: 78px; - border: 1px solid transparent; - border-radius: 8px; - padding: 8px 4px 7px; - display: grid; - justify-items: center; - align-content: center; - gap: 6px; - background: #fff; - color: #101827; - box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06); -} - -.category span:last-child { - font-size: 12px; - font-weight: 700; - line-height: 1.1; -} - -.category-mark { - width: 38px; - height: 38px; - border-radius: 19px; - display: grid; - place-items: center; - color: #fff; - font-size: 17px; - font-weight: 850; -} - -.category.food { - border-color: #ffbf87; - background: #fff1e4; -} - -.category.food .category-mark { - background: #ff6b35; -} - -.category.daily { - border-color: #86efac; - background: #ecfdf3; -} - -.category.daily .category-mark { - background: #16a34a; -} - -.category.transit { - border-color: #93c5fd; - background: #eff6ff; -} - -.category.transit .category-mark { - background: #2563eb; -} - -.category.shopping { - border-color: #f9a8d4; - background: #fdf2f8; -} - -.category.shopping .category-mark { - background: #e84393; -} - -.category.income { - border-color: #bef264; - background: #f7fee7; -} - -.category.income .category-mark { - background: #65a30d; -} - -.category.active { - outline: 2px solid #00a676; - outline-offset: 0; -} - -.note-line { - padding: 0 14px 12px; -} - -.note-line input { - min-height: 42px; - width: 100%; - border: 1px solid #bdeee0; - border-radius: 8px; - padding: 0 12px; - background: #ffffff; -} - -.chip-dot { - width: 7px; - height: 7px; - border-radius: 50%; - background: currentColor; - opacity: 0.75; -} - -.keypad { - display: grid; - grid-template-columns: repeat(4, 1fr); - border-top: 1px solid #bdeee0; -} - -.key { - min-height: 58px; - border: 0; - border-right: 1px solid #d7f5ec; - border-bottom: 1px solid #d7f5ec; - background: #ffffff; - color: #101827; - font-size: 20px; - font-weight: 650; -} - -.key:nth-child(4n) { - border-right: 0; - background: #e6fbf8; - color: #007a78; -} - -.key:active { - background: #c9f7ef; -} - -.commit-key { - background: #00a676 !important; - color: #fff !important; -} - -.utility-key { - font-size: 16px; -} - -.category-key { - font-size: 16px; - background: #fff0bf !important; - color: #9b4d00 !important; -} - -.invite-box { - border: 1px dashed #86dfca; - border-radius: 8px; - padding: 14px; - background: #ffffff; -} - -.member { - display: grid; - grid-template-columns: 38px 1fr auto; - gap: 10px; - align-items: center; - min-height: 58px; - border-bottom: 1px solid #d7f5ec; -} - -.avatar { - width: 36px; - height: 36px; - display: grid; - place-items: center; - border-radius: 18px; - background: #d7fbef; - color: #007a5a; - font-weight: 800; -} - -@media (max-width: 430px) { - .stage { - padding: 0; - } - - .phone { - height: 100vh; - min-height: 100vh; - border: 0; - border-radius: 0; - box-shadow: none; - } -} diff --git a/docs/原型图/原型说明.md b/docs/原型图/原型说明.md deleted file mode 100644 index 09adeca..0000000 --- a/docs/原型图/原型说明.md +++ /dev/null @@ -1,56 +0,0 @@ -# 原型说明 - -这些原型用于评审信息架构和移动端交互，不是最终视觉稿。 - -## 页面 - -- [账本列表](账本列表.html) -- [账本流水](账本流水.html) -- 条目明细：开发环境访问 `/prototype/entry-detail`，用于评审查看、编辑与常规分类选择流程。 -- [分类轮盘步骤](分类轮盘步骤.html) -- [成员邀请](成员邀请.html) - -## 快速记账 - -快速记账不再作为单独页面，而是账本流水页内的底部抽屉。 - -当前交互方向： - -- 点击账本流水页右下角记账入口，打开底部抽屉。 -- 抽屉内输入金额、备注、日期时间，并使用数字键盘确认。 -- 金额与日期时间位于抽屉顶部；关闭按钮取消，点击抽屉外部关闭。 -- 点击日期时间后直接打开系统日期时间选择器，不再展开额外输入行或二次确认按钮。 -- 信息行仅保留备注和分类按钮，完整分类路径合并显示为 `支出>餐饮>外卖`，初始显示 `支出`。 -- 加减键用于连续计算；发生运算时金额下方显示完整算式，金额区实时显示结果，退格同时更新算式和结果。 -- 点击键盘右上角的收支/分类按钮后，分类选择器覆盖原数字键盘区域，其他界面进入模糊的非交互状态。 -- 分类键原位变为圆形“确定”坐标原点，已选路径使用圆形按钮向左延伸；横轴节点可点击返回对应层。 -- 纵轴同时使用正负区域：原点上方最多放置两个候选，其余候选从原点下方排列并可纵向滚动。 -- 坐标节点均使用带轻阴影的圆形“图标 + 小文字”按钮；横纵轴容器保持透明，不绘制面板底色。 -- 坐标按钮为 `72px`，轴容器预留阴影安全区；纵轴上下端使用渐隐遮罩提示仍可继续滚动。 -- “确定”上下是同一分类序列的同步滚动视口，拖动任意一端时另一端同步位移，分类可连续经过原点上下区域。 -- Y 轴使用受边界约束的自定义拖动，不启用浏览器原生弹性滚动；触达首尾后继续拖动不会产生过度位移或回弹虚影。 -- 松手后根据拖动速度提供短距离减速惯性，惯性同样受首尾边界约束，触边立即停止。 -- 圆形按钮仅使用柔和投影表达悬浮层级，不使用拟物厚度或透视高光；靠近原点的阴影使用渐隐收尾，避免硬裁切。 -- 横轴减少上下内边距；圆形节点使用更清晰的 `2px` 分类色边框区分按钮边界。 -- 横轴已选路径使用分类色实底与白色前景，和未选择的浅色圆形候选形成明确区分。 -- “确定”使用方形按钮并建立独立前景层，Y 轴按钮与原点保留安全间距，滚动时不会被原点矩形覆盖。 -- 选择器关闭时保留当前层级和选择状态，再次打开时从上一次状态继续，不重置到收支类型层。 -- 横轴每一级均可点击并返回对应层重新选择；例如点击 `支出` 重新选择支出或收入，点击 `餐饮` 重新选择一级分类。 -- 横轴固定占满抽屉可用宽度，纵轴固定覆盖完整键盘高度；候选数量只影响滚动，不改变坐标轴尺寸。 -- 数字键盘不再放置分类键，右列为加、减和占据下面两格的整笔确认键。 -- 点击选择器外部确认当前层级；选择到最后一级分类时自动确认并收起选择器。 -- 备注为可选项，不自动获得焦点；用户手动点击备注后隐藏数字键盘，抽屉随内容收缩并交由系统键盘输入。 -- [分类选择步骤](分类轮盘步骤.html) 用分步骤画面表达交互状态（文件名暂时保留旧称）。 -- 收入后续可复用同一套二维选择器，二期再承载 `普通收入 / 报销 / 退款`。 - -[快速记账](快速记账.html) 仅保留为旧版独立页参考，不再作为主原型入口。 - -## 参考来源 - -参考了 `legacy-cent-app` 中的旧版方向： - -- 账本卡片列表。 -- 账本内顶部收入、结余、支出三栏。 -- 按日期分组的流水。 -- 底部快捷记账面板。 -- 数字键盘式金额输入。 diff --git a/docs/原型图/快速记账.html b/docs/原型图/快速记账.html deleted file mode 100644 index b92f7e4..0000000 --- a/docs/原型图/快速记账.html +++ /dev/null @@ -1,28 +0,0 @@ - - - - - - 快速记账原型已合并 - - - -
-
-
-
- -

快速记账

- -
-
- -
-

已并入账本流水页

-

快速记账不再作为独立页面。请在账本流水页查看底部抽屉和分类轮盘交互。

- 打开账本流水原型 -
-
-
- - diff --git a/docs/原型图/成员邀请.html b/docs/原型图/成员邀请.html deleted file mode 100644 index 774935c..0000000 --- a/docs/原型图/成员邀请.html +++ /dev/null @@ -1,62 +0,0 @@ - - - - - - 成员邀请原型 - - - -
-
-
-
- -

成员

- -
-
- -
-

家庭日常

-
-
-
- 邀请成员加入账本 -
链接 24 小时后过期
-
- -
-
- -

当前成员

-
-
我
-
自己
owner · 可邀请和移除成员
- 拥有者 -
-
-
王
-
小王
member · 可查看和记账
- 成员 -
-
-
李
-
小李
member · 最近同步 10:42
- 成员 -
- -

权限说明

-
-
首版只做账本级权限。同一账本内成员共享全量流水，不做单条账目权限。
-
-
-
-
- - - diff --git a/docs/原型图/账本列表.html b/docs/原型图/账本列表.html deleted file mode 100644 index 422e0cc..0000000 --- a/docs/原型图/账本列表.html +++ /dev/null @@ -1,76 +0,0 @@ - - - - - - 账本列表原型 - - - -
-
-
-
- -

账本

- -
-
- -
-

我的账本

- -
-
-
-

家庭日常

- 3 名成员 · 今天已同步 -
- 共享 -
-
- - - -
-
- -
-
-
-

旅行备用

- 仅自己 · 12 条流水 -
- 独享 -
-
- - - -
-
- -
-
-
-

装修记录

- 2 名成员 · 有 2 条待同步 -
- 共享 -
-
- - - -
-
-
-
-
- - - diff --git a/docs/原型图/账本流水.html b/docs/原型图/账本流水.html deleted file mode 100644 index e425590..0000000 --- a/docs/原型图/账本流水.html +++ /dev/null @@ -1,84 +0,0 @@ - - - - - - 账本流水原型 - - - -
-
-
-
- -

家庭日常

- -
-
-
8,240收入
-
5,986结余
-
2,254支出
-
-
- -
-
今天 · 7 月 18 日
-
-
餐
-
午餐餐饮 · 小王
-
-58.0012:28
-
-
-
行
-
打车交通 · 自己
-
-31.5009:16
-
- -
昨天 · 7 月 17 日
-
-
薪
-
工资收入 · 自己
-
+8,240.0018:02
-
-
-
购
-
超市采购日用 · 小王
-
-236.8016:45
-
-
- - -
- -
- 58.00 -
- -
-
- 支出 - 餐饮 - 外卖 -
- -
- -
- -
-
- - - - -
-
-
-
- -