feat(web): deliver responsive wealth dashboard and complete portfolio workflows
This commit is contained in:
陈煜 committed
1 parent
2eb2f4b56e
commit
ba0d5201c9
11 files changed
+2379
-18
No files matched your search
@@ -1,22 +1,40 @@
|
||||
# WorthPath
|
||||
|
||||
个人资产负债与净资产管理。Node.js 22.12+、pnpm 11、MySQL 8+。
|
||||
个人资产负债与净资产管理。NestJS + React/Vite + TypeScript + MySQL，支持手机和电脑。Node.js 22.12+、pnpm 11、MySQL 8+。
|
||||
|
||||
```powershell
|
||||
pnpm install
|
||||
Copy-Item apps/api/.env.example apps/api/.env
|
||||
if (!(Test-Path apps/api/.env)) { Copy-Item apps/api/.env.example apps/api/.env }
|
||||
# 仅在本地 .env 设置 DATABASE_URL，先检查数据库是否存在
|
||||
pnpm db:generate
|
||||
pnpm db:migrate
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
前端 http://localhost:5173，API http://localhost:3100/api。
|
||||
前端 http://localhost:5173，API http://localhost:3100/api。若命令行找不到 pnpm，本机可用项目启动器；它优先使用已安装的 pnpm，随后检查 Codex 随附版本，不修改 PATH：
|
||||
|
||||
```powershell
|
||||
cd E:\WorthPath
|
||||
.\scripts\pnpm.ps1 dev
|
||||
```
|
||||
|
||||
已有本地环境配置时直接启动，避免重新复制模板。创建数据库前可以在 `apps/api` 中执行 `node scripts/db-preflight.cjs`；脚本先检查同名数据库，仅在不存在时创建空数据库，不删除已有数据。迁移只使用 `migrate deploy`。Windows 上重新生成 Prisma 客户端前需停止 API，以释放其 DLL。
|
||||
|
||||
```powershell
|
||||
pnpm typecheck
|
||||
pnpm build
|
||||
pnpm test
|
||||
pnpm test:integration # 需先启动 API；只创建并清理随机命名的临时测试用户
|
||||
pnpm db:status
|
||||
pnpm check:staged # git add 后，提交前检查本地凭证和禁止提交的文件
|
||||
```
|
||||
|
||||
设计见 docs/architecture.md。生产需要 HTTPS、COOKIE_SECURE=true、WEB_ORIGIN 为准确站点地址；前端构建由反向代理托管并代理 /api。不要公开开发服务器。
|
||||
当前功能：注册登录和退出、资产/负债账户、独立资产、独立债务和关联、业务日期余额历史与更正、本位币、每日参考汇率与手动汇率、净资产趋势和变化归因、用户 JSON 备份与事务追加恢复。
|
||||
|
||||
金额原币保留，金额/汇率使用十进制字符串和 MySQL Decimal。归档只停止金额编辑，仍参与统计；需要归零时先更新余额。每次金额更新新增独立历史，同日按记录顺序保留；每日趋势使用当日最后余额，已有错误记录可单独更正。币种与资产负债属性创建后固定。详情同时显示原币和本位币金额。
|
||||
|
||||
汇率使用 [Frankfurter 公共日汇率 API](https://frankfurter.dev/)。请求使用固定币种表，不发送用户选择、身份或金额。进程运行时每小时检查，每天尝试一次；添加项目、修改本位币会重新触发检查。失败保留原币和历史汇率，显示缺失或实际使用日期，可以手动重试。自动更新不会覆盖同日手动汇率。首次使用不会自动补齐早期历史汇率，缺失日期不绘制完整总额，可手动补录。
|
||||
|
||||
备份 v1 最多 8 MB / 1000 项目 / 20000 条历史，导入先预览、再明确确认。首版只追加新项目并重建关系，不覆盖已有项目；按项目 ID 和导入来源识别重复；同日汇率冲突会拒绝整次导入。已有本位币保留，空空间恢复备份本位币。文件包含财务数据，应由用户妥善保存。
|
||||
|
||||
设计见 [数据模型与结构](docs/architecture.md)，已验证范围与后续工作见 [首版验收](docs/acceptance.md)。生产需要 HTTPS、COOKIE_SECURE=true、WEB_ORIGIN 为准确站点地址；前端构建由反向代理托管并代理 /api。API 生产启动：在 `apps/api` 中执行 `node dist/main.js`。生产认证限速需迁移到共享存储，数据库用户需最小权限，部署与运行监控尚未配置。
|
||||
+12
-1
@@ -1 +1,12 @@
|
||||
<!doctype html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>WorthPath · 资产之路</title></head><body><div id="root"></div><script type="module" src="/src/main.tsx"></script></body></html>
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>WorthPath · 资产之路</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -19,4 +19,4 @@
|
||||
"vite": "^7.1.0",
|
||||
"@vitejs/plugin-react": "^5.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,91 @@
|
||||
export class ApiError extends Error {
|
||||
constructor(
|
||||
message: string,
|
||||
public status: number,
|
||||
) {
|
||||
super(message);
|
||||
}
|
||||
}
|
||||
export async function api<T>(path: string, method = 'GET', data?: unknown): Promise<T> {
|
||||
const res = await fetch('/api' + path, {
|
||||
method,
|
||||
credentials: 'same-origin',
|
||||
headers: data === undefined ? {} : { 'Content-Type': 'application/json' },
|
||||
body: data === undefined ? undefined : JSON.stringify(data),
|
||||
});
|
||||
const body = await res.json().catch(() => ({ message: '服务响应异常' }));
|
||||
if (!res.ok) throw new ApiError(body.message || '操作失败', res.status);
|
||||
return body;
|
||||
}
|
||||
export type User = { username: string; baseCurrency: string };
|
||||
export type History = {
|
||||
id: string;
|
||||
sequence: number;
|
||||
createdAt: string | null;
|
||||
positionId: string;
|
||||
name: string;
|
||||
kind: string;
|
||||
before: string;
|
||||
after: string;
|
||||
delta: string;
|
||||
currency: string;
|
||||
date: string;
|
||||
notes: string;
|
||||
reason: string;
|
||||
};
|
||||
export type Position = {
|
||||
id: string;
|
||||
kind: string;
|
||||
side: string;
|
||||
name: string;
|
||||
category: string;
|
||||
currency: string;
|
||||
amount: string;
|
||||
notes: string;
|
||||
archived: boolean;
|
||||
history: History[];
|
||||
outgoing: { targetId: string }[];
|
||||
};
|
||||
export type Total = {
|
||||
date: string;
|
||||
assets: string;
|
||||
liabilities: string;
|
||||
net: string;
|
||||
complete: boolean;
|
||||
missing: string[];
|
||||
balanceChange?: string | null;
|
||||
fxChange?: string | null;
|
||||
};
|
||||
export type Overview = Total & {
|
||||
baseCurrency: string;
|
||||
trend: Total[];
|
||||
recent: History[];
|
||||
items: {
|
||||
id: string;
|
||||
converted: string | null;
|
||||
rateDate: string | null;
|
||||
currency: string;
|
||||
amount: string;
|
||||
source: string | null;
|
||||
}[];
|
||||
};
|
||||
export type Rate = {
|
||||
currency: string;
|
||||
baseCurrency: string;
|
||||
rate: string;
|
||||
date: string;
|
||||
source: string;
|
||||
};
|
||||
export const currencies = ['CNY', 'USD', 'HKD', 'EUR', 'GBP', 'JPY', 'AUD', 'CAD', 'CHF', 'SGD'];
|
||||
export function today() {
|
||||
return new Intl.DateTimeFormat('en-CA', {
|
||||
timeZone: 'Asia/Hong_Kong',
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
}).format(new Date());
|
||||
}
|
||||
export function money(v: string, currency: string) {
|
||||
const [whole, frac] = v.split('.');
|
||||
return `${currency} ${whole.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}${frac !== undefined ? '.' + frac : ''}`;
|
||||
}
|
||||
@@ -1 +1,8 @@
|
||||
import React from 'react';import{createRoot}from'react-dom/client';createRoot(document.getElementById('root')!).render(<React.StrictMode><h1>WorthPath</h1><p>资产管理服务正在搭建。</p></React.StrictMode>);
|
||||
import React from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import App from './App';
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
);
|
||||
@@ -0,0 +1,867 @@
|
||||
:root {
|
||||
font-family: Inter, 'Segoe UI', 'Microsoft YaHei', sans-serif;
|
||||
color: #233b35;
|
||||
background: #f4f7f5;
|
||||
font-synthesis: none;
|
||||
font-weight: 400;
|
||||
line-height: 1.6;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font: inherit;
|
||||
}
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
button:disabled {
|
||||
cursor: wait;
|
||||
opacity: 0.55;
|
||||
}
|
||||
button:focus-visible,
|
||||
a:focus-visible {
|
||||
outline: 3px solid #68ad99;
|
||||
outline-offset: 3px;
|
||||
}
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
border: 1px solid #d7e0dc;
|
||||
background: #fff;
|
||||
border-radius: 9px;
|
||||
padding: 11px 12px;
|
||||
color: #253d36;
|
||||
width: 100%;
|
||||
min-height: 46px;
|
||||
}
|
||||
input:focus,
|
||||
select:focus,
|
||||
textarea:focus {
|
||||
outline: 2px solid #7ebdab;
|
||||
outline-offset: 1px;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
p {
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 30px;
|
||||
letter-spacing: -1px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
small {
|
||||
font-size: 12px;
|
||||
color: #74877e;
|
||||
}
|
||||
button {
|
||||
border: 0;
|
||||
}
|
||||
strong {
|
||||
font-weight: 650;
|
||||
}
|
||||
.muted {
|
||||
color: #7b8c84;
|
||||
font-size: 13px;
|
||||
}
|
||||
.eyebrow {
|
||||
font-size: 10px;
|
||||
letter-spacing: 2px;
|
||||
color: #79978b;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 23px;
|
||||
font-weight: 650;
|
||||
letter-spacing: -0.8px;
|
||||
}
|
||||
.brand > span {
|
||||
background: #2c8066;
|
||||
color: #fff;
|
||||
border-radius: 10px;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 23px;
|
||||
}
|
||||
.primary,
|
||||
.secondary {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 11px 17px;
|
||||
border-radius: 9px;
|
||||
min-height: 44px;
|
||||
font-size: 13px;
|
||||
font-weight: 550;
|
||||
}
|
||||
.primary {
|
||||
color: #fff;
|
||||
background: #277b61;
|
||||
}
|
||||
.primary:hover {
|
||||
background: #216750;
|
||||
}
|
||||
.secondary {
|
||||
background: #fff;
|
||||
border: 1px solid #dce5df;
|
||||
color: #345548;
|
||||
}
|
||||
.text {
|
||||
background: transparent;
|
||||
color: #277b61;
|
||||
padding: 5px;
|
||||
font-size: 13px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.icon {
|
||||
background: transparent;
|
||||
padding: 8px;
|
||||
color: #769186;
|
||||
border-radius: 7px;
|
||||
display: inline-flex;
|
||||
}
|
||||
.icon:hover {
|
||||
background: #e7f0eb;
|
||||
}
|
||||
.full {
|
||||
width: 100%;
|
||||
}
|
||||
.field {
|
||||
display: block;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
.field > span {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.auth-layout {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.auth-story {
|
||||
background: #e7efe8;
|
||||
padding: 45px 9%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
min-height: 100vh;
|
||||
background-image: radial-gradient(ellipse at 100% 70%, #d0e7d880, transparent 55%);
|
||||
}
|
||||
.auth-story h1 {
|
||||
font-size: 42px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -1.5px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.auth-story p {
|
||||
color: #657f70;
|
||||
font-size: 14px;
|
||||
}
|
||||
.auth-story .eyebrow {
|
||||
font-size: 10px;
|
||||
}
|
||||
.story-line {
|
||||
display: flex;
|
||||
gap: 18px;
|
||||
margin-top: 50px;
|
||||
padding: 22px;
|
||||
background: #ffffff66;
|
||||
border: 1px solid #ffffff80;
|
||||
border-radius: 12px;
|
||||
width: fit-content;
|
||||
color: #40725c;
|
||||
font-size: 14px;
|
||||
}
|
||||
.auth-form {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 36px;
|
||||
}
|
||||
.auth-form > div {
|
||||
max-width: 355px;
|
||||
width: 100%;
|
||||
}
|
||||
.auth-form h2 {
|
||||
font-size: 28px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.auth-form form {
|
||||
margin: 30px 0 20px;
|
||||
}
|
||||
.privacy {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
color: #83988c;
|
||||
margin-top: 25px;
|
||||
}
|
||||
.splash {
|
||||
padding: 30vh 20px;
|
||||
text-align: center;
|
||||
color: #277b61;
|
||||
}
|
||||
.app {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.sidebar {
|
||||
width: 228px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: #fcfdfb;
|
||||
border-right: 1px solid #e3eae4;
|
||||
padding: 28px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.sidebar .brand {
|
||||
font-size: 22px;
|
||||
}
|
||||
.nav-caption {
|
||||
font-size: 10px;
|
||||
color: #9baba2;
|
||||
margin: 43px 13px 12px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 7px;
|
||||
}
|
||||
nav button {
|
||||
display: flex;
|
||||
gap: 13px;
|
||||
padding: 12px 14px;
|
||||
background: transparent;
|
||||
color: #788e82;
|
||||
text-align: left;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
nav button.active {
|
||||
color: #277b61;
|
||||
background: #e9f2ec;
|
||||
font-weight: 600;
|
||||
}
|
||||
nav button:hover {
|
||||
background: #eff5f0;
|
||||
}
|
||||
.side-bottom {
|
||||
margin-top: auto;
|
||||
border-top: 1px solid #e7eee7;
|
||||
padding-top: 22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
}
|
||||
.avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: #e6eee5;
|
||||
border-radius: 50%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #5b806c;
|
||||
}
|
||||
.side-bottom strong {
|
||||
font-size: 12px;
|
||||
max-width: 100px;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
.side-bottom small {
|
||||
display: block;
|
||||
font-size: 10px;
|
||||
}
|
||||
.side-bottom .icon {
|
||||
margin-left: auto;
|
||||
}
|
||||
main {
|
||||
margin-left: 228px;
|
||||
width: calc(100% - 228px);
|
||||
}
|
||||
.topbar {
|
||||
height: 67px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 38px;
|
||||
border-bottom: 1px solid #e5ebe6;
|
||||
background: #ffffff80;
|
||||
color: #84968a;
|
||||
font-size: 11px;
|
||||
}
|
||||
.topbar > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.currency-pill,
|
||||
.badge {
|
||||
font-size: 10px;
|
||||
padding: 4px 9px;
|
||||
border-radius: 6px;
|
||||
color: #728b7c;
|
||||
background: #edf2eb;
|
||||
}
|
||||
.content {
|
||||
padding: 32px 38px;
|
||||
max-width: 1440px;
|
||||
margin: auto;
|
||||
}
|
||||
.page-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 15px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
.page-heading .muted {
|
||||
margin: 9px 0 0;
|
||||
}
|
||||
.metrics {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 18px;
|
||||
margin-bottom: 23px;
|
||||
}
|
||||
.metric {
|
||||
background: white;
|
||||
border: 1px solid #e1e9e2;
|
||||
border-radius: 12px;
|
||||
padding: 23px;
|
||||
min-width: 0;
|
||||
}
|
||||
.metric > div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #7c9486;
|
||||
font-size: 12px;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
.metric strong {
|
||||
font-size: clamp(17px, 2vw, 29px);
|
||||
font-weight: 600;
|
||||
letter-spacing: -1px;
|
||||
display: block;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.metric small {
|
||||
display: block;
|
||||
margin-top: 13px;
|
||||
font-size: 10px;
|
||||
}
|
||||
.metric.net {
|
||||
background: #277b61;
|
||||
border-color: #277b61;
|
||||
color: white;
|
||||
}
|
||||
.metric.net > div,
|
||||
.metric.net small {
|
||||
color: #c0dcd0;
|
||||
}
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.8fr 1fr;
|
||||
gap: 22px;
|
||||
}
|
||||
.panel {
|
||||
background: #fff;
|
||||
border: 1px solid #e0e9e1;
|
||||
border-radius: 12px;
|
||||
padding: 23px;
|
||||
margin-bottom: 22px;
|
||||
min-width: 0;
|
||||
}
|
||||
.panel-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 17px;
|
||||
gap: 8px;
|
||||
}
|
||||
.panel-title h2 {
|
||||
margin: 0;
|
||||
}
|
||||
.legend {
|
||||
display: flex;
|
||||
gap: 17px;
|
||||
font-size: 10px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
.legend span:before {
|
||||
content: '●';
|
||||
margin-right: 5px;
|
||||
}
|
||||
.green {
|
||||
color: #199b76;
|
||||
}
|
||||
.orange {
|
||||
color: #dc9463;
|
||||
}
|
||||
.blue {
|
||||
color: #457bca;
|
||||
}
|
||||
.chart {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
.chart-dates {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 10px;
|
||||
color: #92a096;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
.composition {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 0;
|
||||
background: white;
|
||||
border-bottom: 1px solid #edf0eb;
|
||||
text-align: left;
|
||||
color: #436a56;
|
||||
font-size: 13px;
|
||||
}
|
||||
.composition small {
|
||||
display: block;
|
||||
font-size: 10px;
|
||||
}
|
||||
.table-wrap {
|
||||
overflow-x: auto;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
th {
|
||||
font-weight: 400;
|
||||
color: #92a497;
|
||||
text-align: left;
|
||||
padding: 11px 12px;
|
||||
background: #f8faf7;
|
||||
font-size: 10px;
|
||||
}
|
||||
td {
|
||||
padding: 14px 12px;
|
||||
border-bottom: 1px solid #edf1eb;
|
||||
}
|
||||
td small {
|
||||
display: block;
|
||||
margin-top: 3px;
|
||||
font-size: 10px;
|
||||
}
|
||||
td .text {
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
.notes-cell {
|
||||
max-width: 240px;
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.empty {
|
||||
min-height: 160px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
color: #95aa9b;
|
||||
padding: 22px;
|
||||
gap: 6px;
|
||||
}
|
||||
.empty h3 {
|
||||
color: #5e7e69;
|
||||
margin: 5px 0;
|
||||
}
|
||||
.empty p {
|
||||
font-size: 12px;
|
||||
color: #91a096;
|
||||
max-width: 310px;
|
||||
}
|
||||
.fx-caption {
|
||||
color: #8d9e91;
|
||||
font-size: 10px;
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
.notice {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
border-radius: 8px;
|
||||
padding: 12px 15px;
|
||||
font-size: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.notice.error {
|
||||
background: #fbeeed;
|
||||
color: #9c534d;
|
||||
}
|
||||
.notice.success {
|
||||
background: #e5f1e9;
|
||||
color: #367657;
|
||||
}
|
||||
.notice.warning {
|
||||
background: #faf2dd;
|
||||
color: #8f793d;
|
||||
}
|
||||
.position-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
|
||||
gap: 17px;
|
||||
}
|
||||
.position-card {
|
||||
text-align: left;
|
||||
background: #fcfdfa;
|
||||
border: 1px solid #e0e9e0;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
color: #385b47;
|
||||
}
|
||||
.position-card:hover {
|
||||
border-color: #8bbfa4;
|
||||
}
|
||||
.position-card > div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.position-icon {
|
||||
background: #eaf2e9;
|
||||
display: flex;
|
||||
padding: 9px;
|
||||
border-radius: 9px;
|
||||
}
|
||||
.position-card h3 {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.position-card p {
|
||||
font-size: 11px;
|
||||
color: #8b9d8d;
|
||||
}
|
||||
.position-card strong {
|
||||
font-size: 20px;
|
||||
overflow-wrap: anywhere;
|
||||
display: block;
|
||||
}
|
||||
.position-card small {
|
||||
display: block;
|
||||
margin-top: 7px;
|
||||
}
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.detail-summary {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
align-items: center;
|
||||
}
|
||||
.detail-summary h2 {
|
||||
font-size: 30px;
|
||||
margin: 17px 0 8px;
|
||||
}
|
||||
.detail-summary p {
|
||||
font-size: 13px;
|
||||
}
|
||||
.back {
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
.settings-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 22px;
|
||||
}
|
||||
.file-button {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
.file-button input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.import-preview {
|
||||
margin-top: 20px;
|
||||
background: #f3f7ee;
|
||||
border-radius: 9px;
|
||||
padding: 18px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.veil {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: #163a2b60;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 18px;
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
.modal {
|
||||
background: white;
|
||||
border-radius: 14px;
|
||||
padding: 25px;
|
||||
width: 480px;
|
||||
max-height: 92vh;
|
||||
overflow: auto;
|
||||
box-shadow: 0 25px 80px #0f312b30;
|
||||
}
|
||||
.modal header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.modal h2 {
|
||||
margin: 0;
|
||||
}
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
.link-options label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid #eee;
|
||||
font-size: 13px;
|
||||
}
|
||||
.link-options input {
|
||||
width: 18px;
|
||||
min-height: 18px;
|
||||
}
|
||||
footer {
|
||||
font-size: 10px;
|
||||
color: #a4b2a7;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
.auth-form .notice {
|
||||
display: block;
|
||||
}
|
||||
@media (min-width: 1550px) {
|
||||
.content {
|
||||
padding-top: 45px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1100px) {
|
||||
.sidebar {
|
||||
width: 190px;
|
||||
padding: 25px 15px;
|
||||
}
|
||||
main {
|
||||
margin-left: 190px;
|
||||
width: calc(100% - 190px);
|
||||
}
|
||||
.brand {
|
||||
font-size: 19px;
|
||||
}
|
||||
.content {
|
||||
padding: 26px;
|
||||
}
|
||||
.dashboard-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.metric {
|
||||
padding: 18px;
|
||||
}
|
||||
.detail-summary {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
.metrics {
|
||||
gap: 12px;
|
||||
}
|
||||
.settings-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.auth-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.auth-story {
|
||||
min-height: auto;
|
||||
padding: 25px;
|
||||
gap: 35px;
|
||||
}
|
||||
.auth-story h1 {
|
||||
font-size: 29px;
|
||||
margin: 0;
|
||||
}
|
||||
.auth-story > div:nth-child(2) > p:not(.eyebrow),
|
||||
.story-line,
|
||||
.auth-story > small {
|
||||
display: none;
|
||||
}
|
||||
.auth-form {
|
||||
padding: 35px 25px;
|
||||
}
|
||||
.sidebar {
|
||||
inset: auto 0 0;
|
||||
width: 100%;
|
||||
height: 67px;
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
z-index: 5;
|
||||
border-top: 1px solid #e2ebe1;
|
||||
border-right: 0;
|
||||
}
|
||||
.sidebar > .brand,
|
||||
.nav-caption,
|
||||
.side-bottom {
|
||||
display: none;
|
||||
}
|
||||
nav {
|
||||
flex-direction: row;
|
||||
gap: 0;
|
||||
justify-content: space-around;
|
||||
height: 100%;
|
||||
}
|
||||
nav button {
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
padding: 9px 6px;
|
||||
align-items: center;
|
||||
border-radius: 0;
|
||||
font-size: 9px;
|
||||
flex: 1;
|
||||
}
|
||||
nav button.active {
|
||||
background: #f1f7f0;
|
||||
}
|
||||
main {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
padding-bottom: 67px;
|
||||
}
|
||||
.topbar {
|
||||
height: 53px;
|
||||
padding: 0 18px;
|
||||
}
|
||||
.content {
|
||||
padding: 24px 17px;
|
||||
}
|
||||
.page-heading {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.page-heading h1 {
|
||||
font-size: 25px;
|
||||
}
|
||||
.page-heading > .primary {
|
||||
padding: 9px;
|
||||
font-size: 11px;
|
||||
min-height: 40px;
|
||||
}
|
||||
.metrics {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 10px;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
.metric {
|
||||
padding: 17px 19px;
|
||||
}
|
||||
.metric > div {
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
.metric strong {
|
||||
font-size: 27px;
|
||||
}
|
||||
.metric small {
|
||||
margin-top: 7px;
|
||||
}
|
||||
.panel {
|
||||
padding: 17px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
.dashboard-grid {
|
||||
gap: 0;
|
||||
}
|
||||
.position-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.modal {
|
||||
padding: 20px;
|
||||
border-radius: 13px;
|
||||
max-height: 90vh;
|
||||
}
|
||||
.veil {
|
||||
padding: 12px;
|
||||
}
|
||||
.metric:not(.net) {
|
||||
min-height: 125px;
|
||||
}
|
||||
.table-wrap {
|
||||
margin: 0 -6px;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
padding: 12px 8px;
|
||||
}
|
||||
.settings-grid {
|
||||
gap: 0;
|
||||
}
|
||||
.detail-summary h2 {
|
||||
font-size: 25px;
|
||||
}
|
||||
.actions {
|
||||
gap: 8px;
|
||||
}
|
||||
.notice {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
+3
-10
@@ -1,11 +1,7 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"lib": [
|
||||
"ES2022",
|
||||
"DOM",
|
||||
"DOM.Iterable"
|
||||
],
|
||||
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"jsx": "react-jsx",
|
||||
@@ -14,8 +10,5 @@
|
||||
"noEmit": true,
|
||||
"allowImportingTsExtensions": true
|
||||
},
|
||||
"include": [
|
||||
"src",
|
||||
"vite.config.ts"
|
||||
]
|
||||
}
|
||||
"include": ["src", "vite.config.ts"]
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
# 首版验收（2026-10-01，Asia/Hong_Kong）
|
||||
|
||||
代码位于 E:\WorthPath，远程 origin 为用户指定 GitHub 仓库，分支 main。初始目录和仓库为空；没有覆盖已有项目文件。已有其他程序占用 API 默认端口，因此本项目使用 3100，前端使用 5173。
|
||||
|
||||
已验证：
|
||||
|
||||
- 后端和前端类型检查、生产构建通过。
|
||||
- 9 项单元测试通过：Decimal 精度、负债符号、缺失汇率、历史更正、汇率/余额归因、大额金额、输入和备份校验、固定公共汇率请求与失败保护。
|
||||
- 真实 MySQL 集成测试通过：注册、密码哈希、登录退出、会话失效、同源写入限制、双用户资源与历史隔离、客户端 userId 拒绝、信用卡负债、债务关联不重复求和、余额变化、同日多次更新、更正、还款金额和负债类型校验、归档金额编辑限制。
|
||||
- 备份不含认证数据；预览验证、明确确认、恢复后 ID 重建与关联保留、重复导入拒绝、已导入项目修改后重复导入仍拒绝、两请求并发导入仅一次成功，失败没有留下部分项目。
|
||||
- 三次可追踪迁移已应用，数据库结构处于最新状态，未运行 reset/db push。
|
||||
- 浏览器验收：注册、空状态、账户创建、同日连续余额更新、外币资产、独立债务与关联、手动历史汇率、总览趋势及变化归因、手机退出登录。编辑过程中撤销临时会话后，服务端拒绝保存，界面清除旧弹窗和草稿；重新登录后未恢复旧草稿，数据库原名称不变。
|
||||
- 浏览器真实下载 JSON 备份，选择重复文件显示拒绝说明；另一临时用户中预览并明确确认恢复成功。
|
||||
- 公共汇率实际请求成功并保存日期和十进制汇率，原币未改变。
|
||||
- 390×844 手机、742px 中间视口、1280×800 桌面布局检查；手机和桌面未出现页面横向溢出，宽历史表格单独滚动。
|
||||
- 临时测试用户及其项目已清理，网站没有预置演示资产。验收截图使用明确标为“验收临时”的项目。验收期间出现的非测试用户数据已保留，清理仅针对明确创建的临时用户。
|
||||
- 每次提交前扫描本地环境中的凭证与连接元数据，环境文件、数据库文件、依赖和构建产物未纳入提交。
|
||||
|
||||
首版限制：每次更新保留独立绝对余额记录，同日多次更新与备份恢复顺序已验证；更正替换该日记录，暂未另存更正操作的审计副本。归档项目仍计入财富，需要结清时先更新为零。首版支持十种常见币种；汇率为参考价，首次使用不会自动抓取全量历史。历史汇率缺失时该日期标记不完整，用户可手动补录。备份仅追加，不能直接覆盖恢复到已有空间。列表暂不分页；适合个人规模数据。
|
||||
|
||||
尚未验证或未交付：连续多日无人值守运行、生产 HTTPS 与反向代理部署、多实例共享认证限速、运行告警、真实手机浏览器与触摸设备矩阵、大规模数据性能、密码找回/变更、家庭共享。开发服务在本机可启动，当前交付不等同于生产上线。
|
||||
|
||||
下一步建议：基于真实少量资产试用，完善筛选和分页、键盘焦点管理及历史更正审计；随后建立最小权限数据库账号、HTTPS 部署和共享限速，进行实际设备验收。家庭共享与报表作为后续独立模块。
|
||||
+4
-1
@@ -8,7 +8,10 @@
|
||||
"typecheck": "pnpm -r typecheck",
|
||||
"test": "pnpm --filter @worthpath/api test",
|
||||
"db:generate": "pnpm --filter @worthpath/api db:generate",
|
||||
"db:migrate": "pnpm --filter @worthpath/api db:migrate"
|
||||
"db:migrate": "pnpm --filter @worthpath/api db:migrate",
|
||||
"test:integration": "pnpm --filter @worthpath/api test:integration",
|
||||
"db:status": "pnpm --filter @worthpath/api db:status",
|
||||
"check:staged": "node scripts/check-staged.mjs"
|
||||
},
|
||||
"devDependencies": {
|
||||
"prettier": "3.6.0"
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
param([Parameter(ValueFromRemainingArguments=$true)][string[]]$PnpmArgs)
|
||||
$ErrorActionPreference = 'Stop'
|
||||
$manager = Get-Command pnpm.cmd -ErrorAction SilentlyContinue
|
||||
if ($manager) { $executable=$manager.Source } else {
|
||||
$executable=Join-Path $env:USERPROFILE '.cache\codex-runtimes\codex-primary-runtime\dependencies\bin\fallback\pnpm.cmd'
|
||||
if (!(Test-Path -LiteralPath $executable)) { throw 'pnpm is not installed. Install pnpm 11 using your Node.js package manager first.' }
|
||||
}
|
||||
if (!$PnpmArgs.Count) { $PnpmArgs=@('dev') }
|
||||
Push-Location (Split-Path $PSScriptRoot -Parent)
|
||||
try { & $executable @PnpmArgs; exit $LASTEXITCODE } finally { Pop-Location }
|
||||
Reference in new issue
Block a user