3525 lines
140 KiB
TypeScript
3525 lines
140 KiB
TypeScript
import { t as tr, useLocale, LanguagePicker } from './i18n';
|
||
import {
|
||
useState,
|
||
useEffect,
|
||
useRef,
|
||
createElement,
|
||
Fragment,
|
||
type FormEvent,
|
||
type ReactNode,
|
||
} from 'react';
|
||
import {
|
||
LayoutDashboard,
|
||
CalendarDays,
|
||
Wallet,
|
||
Landmark,
|
||
HandCoins,
|
||
History as HistoryIcon,
|
||
Settings,
|
||
ArrowUpRight,
|
||
Plus,
|
||
LogOut,
|
||
ArrowLeft,
|
||
X,
|
||
Download,
|
||
Upload,
|
||
RefreshCw,
|
||
TrendingUp,
|
||
ShieldCheck,
|
||
} from 'lucide-react';
|
||
import {
|
||
api,
|
||
ApiError,
|
||
currencies,
|
||
money,
|
||
positionAmount,
|
||
accountInputAmount,
|
||
today,
|
||
nowMinute,
|
||
displayTime,
|
||
type User,
|
||
type Position,
|
||
type Overview,
|
||
type History,
|
||
type Rate,
|
||
type Total,
|
||
type PageResult,
|
||
} from './api';
|
||
import './style.css';
|
||
import { NetWorthChart } from './NetWorthChart';
|
||
import { allOverviewCards, overviewCardLabels } from './overview-cards';
|
||
import { useToast } from './Toast';
|
||
import { GroupOrderContext } from './GroupOrderContext';
|
||
import { GroupOrderList } from './GroupOrderList';
|
||
import { orderedGroups, mergeGroupOrder } from './group-order';
|
||
import { Calendar } from './Calendar';
|
||
import { SchedulePanel } from './SchedulePanel';
|
||
import { AgentConnections } from './AgentConnections';
|
||
import { AgentAuthorization } from './AgentReview';
|
||
import { AgentDrafts } from './AgentDrafts';
|
||
import { savedLogin, rememberLogin } from './login-preferences';
|
||
import { AdminPanel, FirstPassword } from './AdminPanel';
|
||
import { PositionDeletion, deletionLabel } from './PositionDeletion';
|
||
import { IconPicker } from './IconPicker';
|
||
import { MetalPanel } from './MetalPanel';
|
||
import { QuickTransfer } from './QuickTransfer';
|
||
import {
|
||
QuickJournal,
|
||
QuickRepayment,
|
||
isPaidForMonth,
|
||
isBookedToday,
|
||
quickAccountVisible,
|
||
canQuickRepay,
|
||
type QuickEntry,
|
||
} from './QuickJournal';
|
||
import { TransferForm } from './TransferForm';
|
||
import { DebtPaymentForm, operationLabel, type DebtOperation } from './DebtPaymentForm';
|
||
import type { Transfer } from './api';
|
||
import { IconLibrary, iconUrl } from './IconLibrary';
|
||
const labels: Record<string, string> = {
|
||
overview: '资产总览',
|
||
account: '账户',
|
||
asset: '独立资产',
|
||
debt: '债务',
|
||
history: '变化记录',
|
||
calendar: '收支日历',
|
||
schedules: '定时计划',
|
||
settings: '设置与备份',
|
||
admin: '管理员后台',
|
||
};
|
||
const categories: Record<string, [string, string][]> = {
|
||
account: [
|
||
['bank', '银行账户'],
|
||
['cash', '现金'],
|
||
['investment', '投资账户'],
|
||
['credit_card', '信用卡'],
|
||
['loan', '贷款账户'],
|
||
['other', '其他'],
|
||
],
|
||
asset: [
|
||
['cash', '现金'],
|
||
['property', '房产'],
|
||
['vehicle', '车辆'],
|
||
['gold', '贵金属'],
|
||
['commemorative_coin', '纪念币'],
|
||
['commemorative_note', '纪念钞'],
|
||
['other', '其他资产'],
|
||
],
|
||
debt: [
|
||
['mortgage', '房贷'],
|
||
['car_loan', '车贷'],
|
||
['personal', '个人借款'],
|
||
['other', '其他债务'],
|
||
],
|
||
};
|
||
const categoryLabel = (p: Position) =>
|
||
tr(categories[p.kind]?.find(([v]) => v === p.category)?.[1] || p.category);
|
||
function Currency({ value, onChange }: { value: string; onChange: (v: string) => void }) {
|
||
return (
|
||
<select value={value} onChange={(e) => onChange(e.target.value)}>
|
||
{currencies.map((c) => (
|
||
<option key={c}>{c}</option>
|
||
))}
|
||
</select>
|
||
);
|
||
}
|
||
function Field({ label, children }: { label: string; children: ReactNode }) {
|
||
return (
|
||
<label className={label === tr('备注') ? 'field note-field' : 'field'}>
|
||
<span>{tr(label)}</span>
|
||
{children}
|
||
</label>
|
||
);
|
||
}
|
||
function Modal({
|
||
title,
|
||
close,
|
||
children,
|
||
}: {
|
||
title: string;
|
||
close: () => void;
|
||
children: ReactNode;
|
||
}) {
|
||
return (
|
||
<div
|
||
className="veil"
|
||
onClick={(e) => {
|
||
if (e.target === e.currentTarget) close();
|
||
}}
|
||
>
|
||
<section role="dialog" aria-modal="true" aria-label={title} className="modal">
|
||
<header>
|
||
<h2 className={title.includes(tr('清空本账号数据')) ? 'danger-text' : undefined}>
|
||
{title}
|
||
</h2>
|
||
<button className="icon" aria-label={tr('关闭')} onClick={close}>
|
||
<X size={20} />
|
||
</button>
|
||
</header>
|
||
{children}
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|
||
function Empty({ title, body, action }: { title: string; body: string; action?: ReactNode }) {
|
||
return (
|
||
<div className="empty">
|
||
<Wallet size={32} />
|
||
<h3>{title}</h3>
|
||
<p>{body}</p>
|
||
{action}
|
||
</div>
|
||
);
|
||
}
|
||
export default function App() {
|
||
const locale = useLocale();
|
||
const sessionGeneration = useRef(0),
|
||
loadGeneration = useRef(0);
|
||
const authCheck = useRef<Promise<User> | null>(null);
|
||
const [user, setUser] = useState<User | null>(null),
|
||
[boot, setBoot] = useState(true),
|
||
[page, setPage] = useState(
|
||
new URLSearchParams(location.search).has('agent_authorization') ? 'agent-review' : 'overview',
|
||
),
|
||
[positions, setPositions] = useState<Position[]>([]),
|
||
[overview, setOverview] = useState<Overview | null>(null),
|
||
[rates, setRates] = useState<Rate[]>([]),
|
||
[selected, setSelected] = useState<string | null>(null),
|
||
[modal, setModal] = useState<{
|
||
kind: string;
|
||
p?: Position;
|
||
h?: History;
|
||
transfer?: Transfer;
|
||
operation?: DebtOperation;
|
||
quick?: boolean;
|
||
groups?: string[];
|
||
} | null>(null),
|
||
[busy, setBusy] = useState(false),
|
||
[loading, setLoading] = useState(false),
|
||
[error, setError] = useState(''),
|
||
[success, setSuccess] = useState('');
|
||
const [calendarRefresh, setCalendarRefresh] = useState(0);
|
||
const [newAssetCategory, setNewAssetCategory] = useState(categories.asset[0][0]);
|
||
useEffect(() => {
|
||
setNewAssetCategory(categories.asset[0][0]);
|
||
}, [modal?.kind]);
|
||
const [quickTransfer, setQuickTransfer] = useState<{
|
||
sourceId?: string;
|
||
targetId?: string;
|
||
} | null>(null);
|
||
const [quickEntries, setQuickEntries] = useState<QuickEntry[]>([]);
|
||
const [quickMarkMode, setQuickMarkMode] = useState(false);
|
||
const [quickBookedMode, setQuickBookedMode] = useState(false);
|
||
const [hideBooked, setHideBooked] = useState(false);
|
||
const [unpaidOnly, setUnpaidOnly] = useState(false);
|
||
const [assetQuickMode, setAssetQuickMode] = useState(false);
|
||
const [assetValueMode, setAssetValueMode] = useState(false);
|
||
const [remember, setRemember] = useState(() => savedLogin().remember);
|
||
const [draftId, setDraftId] = useState(() =>
|
||
new URLSearchParams(location.search).get('agent_operation'),
|
||
);
|
||
const [businessDay, setBusinessDay] = useState(today());
|
||
const [repaymentMonth, setRepaymentMonth] = useState(today().slice(0, 7));
|
||
const quickGeneration = useRef(0);
|
||
useEffect(() => {
|
||
const updateDay = () => {
|
||
setBusinessDay(today());
|
||
setRepaymentMonth(today().slice(0, 7));
|
||
};
|
||
const timer = setInterval(updateDay, 60000);
|
||
window.addEventListener('focus', updateDay);
|
||
return () => {
|
||
clearInterval(timer);
|
||
window.removeEventListener('focus', updateDay);
|
||
};
|
||
}, []);
|
||
useEffect(() => {
|
||
quickGeneration.current++;
|
||
setQuickEntries([]);
|
||
setQuickMarkMode(false);
|
||
setQuickBookedMode(false);
|
||
setHideBooked(false);
|
||
setUnpaidOnly(false);
|
||
setAssetQuickMode(false);
|
||
}, [user?.username, user?.revealed]);
|
||
const [quickMode, setQuickMode] = useState(false),
|
||
[accountGroup, setAccountGroup] = useState<string | null>(null);
|
||
useEffect(() => {
|
||
setQuickTransfer(null);
|
||
}, [page, quickMode, selected, user?.revealed]);
|
||
useEffect(() => {
|
||
setQuickTransfer((current) =>
|
||
current &&
|
||
[current.sourceId, current.targetId].some(
|
||
(id) => id && !positions.some((p) => p.id === id && p.kind === 'account' && !p.archived),
|
||
)
|
||
? null
|
||
: current,
|
||
);
|
||
}, [positions]);
|
||
function toggleQuickMode() {
|
||
quickGeneration.current++;
|
||
if (!quickMode) setQuickEntries([]);
|
||
setQuickMode(!quickMode);
|
||
setQuickMarkMode(false);
|
||
setQuickBookedMode(false);
|
||
setHideBooked(false);
|
||
setUnpaidOnly(false);
|
||
setQuickTransfer(null);
|
||
}
|
||
function rememberQuick(entry: QuickEntry, generation: number, session: number) {
|
||
if (generation === quickGeneration.current && session === sessionGeneration.current)
|
||
setQuickEntries((rows) => [entry, ...rows]);
|
||
}
|
||
async function saveQuickBalance(
|
||
position: Position,
|
||
data: Record<string, unknown>,
|
||
track: boolean,
|
||
) {
|
||
const generation = quickGeneration.current,
|
||
session = sessionGeneration.current;
|
||
const result = await api<{ id: string }>(
|
||
'/positions/' + position.id + '/revisions',
|
||
'POST',
|
||
data,
|
||
);
|
||
if (track)
|
||
rememberQuick(
|
||
{
|
||
key: 'balance:' + result.id,
|
||
kind: 'balance',
|
||
id: result.id,
|
||
positionId: position.id,
|
||
title: position.name,
|
||
currency: position.currency,
|
||
before: positionAmount(position),
|
||
after: positionAmount(position, String(data.amount)),
|
||
date: String(data.date),
|
||
},
|
||
generation,
|
||
session,
|
||
);
|
||
return result;
|
||
}
|
||
async function saveQuickMovement(data: unknown, label: string) {
|
||
const value = data as Record<string, string>,
|
||
generation = quickGeneration.current,
|
||
session = sessionGeneration.current;
|
||
const result = await api<{ id: string }>('/transfers', 'POST', data);
|
||
const source = positions.find((p) => p.id === value.sourceId),
|
||
target = positions.find((p) => p.id === value.targetId);
|
||
rememberQuick(
|
||
{
|
||
key: 'transfer:' + result.id,
|
||
kind: 'transfer',
|
||
id: result.id,
|
||
positionId: value.sourceId,
|
||
title: label + ' · ' + (source?.name || '') + ' → ' + (target?.name || ''),
|
||
currency: source?.currency || '',
|
||
amount: value.amount,
|
||
received: value.received,
|
||
fee: value.fee,
|
||
targetCurrency: target?.currency,
|
||
date: value.date,
|
||
},
|
||
generation,
|
||
session,
|
||
);
|
||
return result;
|
||
}
|
||
async function markQuickRepayment(position: Position) {
|
||
const month = today().slice(0, 7),
|
||
previousMonth = position.lastRepaymentMonth ?? null;
|
||
const nextMonth = isPaidForMonth(position, month) ? null : month;
|
||
const generation = quickGeneration.current,
|
||
session = sessionGeneration.current;
|
||
const result = await api<{ updatedAt: string }>(
|
||
'/positions/' + position.id + '/repayment-mark',
|
||
'PATCH',
|
||
{ month: nextMonth, expectedMonth: previousMonth, expectedUpdatedAt: position.updatedAt },
|
||
);
|
||
rememberQuick(
|
||
{
|
||
key: 'mark:' + position.id + ':' + Date.now(),
|
||
kind: 'mark',
|
||
id: position.id,
|
||
positionId: position.id,
|
||
title: position.name,
|
||
currency: position.currency,
|
||
date: nowMinute(),
|
||
previousMonth,
|
||
month: nextMonth,
|
||
markUpdatedAt: result.updatedAt,
|
||
},
|
||
generation,
|
||
session,
|
||
);
|
||
return result;
|
||
}
|
||
async function markQuickBooked(position: Position) {
|
||
const previousDate = position.lastBookedDate ?? null,
|
||
day = today();
|
||
const nextDate = isBookedToday(position, day) ? null : day;
|
||
const generation = quickGeneration.current,
|
||
session = sessionGeneration.current;
|
||
const result = await api<{ updatedAt: string }>(
|
||
'/positions/' + position.id + '/booked-mark',
|
||
'PATCH',
|
||
{
|
||
date: nextDate,
|
||
expectedDate: previousDate,
|
||
expectedUpdatedAt: position.updatedAt,
|
||
},
|
||
);
|
||
rememberQuick(
|
||
{
|
||
key: 'booked:' + position.id + ':' + Date.now(),
|
||
kind: 'booked',
|
||
id: position.id,
|
||
positionId: position.id,
|
||
title: position.name,
|
||
currency: position.currency,
|
||
date: nowMinute(),
|
||
previousDate,
|
||
bookedDate: nextDate,
|
||
markUpdatedAt: result.updatedAt,
|
||
},
|
||
generation,
|
||
session,
|
||
);
|
||
return result;
|
||
}
|
||
async function toggleAssetInclusion(position: Position) {
|
||
return api('/positions/' + position.id + '/inclusion', 'PATCH', {
|
||
included: position.included === false,
|
||
expectedIncluded: position.included !== false,
|
||
expectedUpdatedAt: position.updatedAt,
|
||
});
|
||
}
|
||
function undoQuick(entry: QuickEntry) {
|
||
void act(async () => {
|
||
if (entry.kind === 'balance')
|
||
await api('/positions/' + entry.positionId + '/revisions/' + entry.id, 'DELETE');
|
||
else if (entry.kind === 'transfer') await api('/transfers/' + entry.id, 'DELETE');
|
||
else if (entry.kind === 'booked')
|
||
await api('/positions/' + entry.positionId + '/booked-mark', 'PATCH', {
|
||
date: entry.previousDate ?? null,
|
||
expectedDate: entry.bookedDate ?? null,
|
||
expectedUpdatedAt: entry.markUpdatedAt,
|
||
});
|
||
else
|
||
await api('/positions/' + entry.positionId + '/repayment-mark', 'PATCH', {
|
||
month: entry.previousMonth ?? null,
|
||
expectedMonth: entry.month ?? null,
|
||
expectedUpdatedAt: entry.markUpdatedAt,
|
||
});
|
||
setQuickEntries((rows) =>
|
||
rows.map((row) => (row.key === entry.key ? { ...row, undone: true } : row)),
|
||
);
|
||
}, tr('记录已撤回，相关余额已更新'));
|
||
}
|
||
function chooseQuickAccount(p: Position) {
|
||
if (busy || loading) return;
|
||
if (p.kind !== 'account' || p.archived) {
|
||
setError(tr('请选择启用的账户'));
|
||
return;
|
||
}
|
||
setQuickTransfer((current) => {
|
||
if (!current) return current;
|
||
if (!current.sourceId) return { sourceId: p.id };
|
||
if (!current.targetId && p.id !== current.sourceId) return { ...current, targetId: p.id };
|
||
return current;
|
||
});
|
||
}
|
||
const [fxStatus, setFxStatus] = useState<{
|
||
state: string;
|
||
message: string;
|
||
attemptedAt: string | null;
|
||
} | null>(null);
|
||
const [backup, setBackup] = useState<unknown>(null),
|
||
[preview, setPreview] = useState<{
|
||
positions: number;
|
||
revisions: number;
|
||
rates: number;
|
||
message: string;
|
||
baseCurrency: string;
|
||
currentBaseCurrency: string;
|
||
} | null>(null);
|
||
const [clearStep, setClearStep] = useState(0),
|
||
[clearConfirmation, setClearConfirmation] = useState(0);
|
||
useToast(error, 'error');
|
||
useToast(success, 'success');
|
||
useToast(fxStatus?.state === 'error' ? fxStatus.message : '', 'error');
|
||
const [settingsSection, setSettingsSection] = useState(
|
||
new URLSearchParams(location.search).has('agent_authorization') ||
|
||
new URLSearchParams(location.search).has('agent_operation')
|
||
? 'agent'
|
||
: 'general',
|
||
),
|
||
[transfers, setTransfers] = useState<Transfer[]>([]);
|
||
const [historyRows, setHistoryRows] = useState<History[]>([]),
|
||
[historyCursor, setHistoryCursor] = useState<string | null>(null),
|
||
[transferCursor, setTransferCursor] = useState<string | null>(null),
|
||
[rangeFrom, setRangeFrom] = useState(
|
||
new Date(+new Date(today()) - 89 * 86400000).toISOString().slice(0, 10),
|
||
),
|
||
[rangeTo, setRangeTo] = useState(today()),
|
||
[grain, setGrain] = useState('day');
|
||
const [dataVersion, setDataVersion] = useState(0);
|
||
const previousDataVersion = useRef(0);
|
||
const viewKey = [page, selected, rangeFrom, rangeTo, grain, settingsSection].join('|');
|
||
const viewRef = useRef(viewKey);
|
||
viewRef.current = viewKey;
|
||
const userRef = useRef(user);
|
||
userRef.current = user;
|
||
const activityAt = useRef(0);
|
||
function clearAccount() {
|
||
setQuickMode(false);
|
||
quickGeneration.current++;
|
||
setQuickEntries([]);
|
||
setQuickMarkMode(false);
|
||
setAccountGroup('');
|
||
setClearStep(0);
|
||
setClearConfirmation(0);
|
||
activityAt.current = 0;
|
||
sessionGeneration.current++;
|
||
loadGeneration.current++;
|
||
setUser(null);
|
||
setPositions([]);
|
||
setOverview(null);
|
||
setRates([]);
|
||
setTransfers([]);
|
||
setHistoryRows([]);
|
||
setHistoryCursor(null);
|
||
setTransferCursor(null);
|
||
setFxStatus(null);
|
||
setAccountGroup(null);
|
||
setModal(null);
|
||
setSelected(null);
|
||
setBackup(null);
|
||
setPreview(null);
|
||
setPage('overview');
|
||
setLoading(false);
|
||
setSuccess('');
|
||
setQuickTransfer(null);
|
||
}
|
||
const report = (e: unknown) => {
|
||
setError(e instanceof Error ? e.message : tr('操作失败'));
|
||
if (e instanceof ApiError && e.status === 401) {
|
||
clearAccount();
|
||
}
|
||
};
|
||
async function load(refreshUser = false, rangeOnly = false, runDue = true) {
|
||
const session = sessionGeneration.current,
|
||
request = ++loadGeneration.current,
|
||
view = viewRef.current;
|
||
const active = () =>
|
||
session === sessionGeneration.current &&
|
||
request === loadGeneration.current &&
|
||
view === viewRef.current;
|
||
setLoading(true);
|
||
try {
|
||
const s = refreshUser ? await api<User>('/auth/me') : userRef.current;
|
||
if (!active() || !s) return;
|
||
if (s.mustChangePassword) {
|
||
setUser(s);
|
||
return;
|
||
}
|
||
const visibilityChanged = !!s.revealed !== !!userRef.current?.revealed;
|
||
if (visibilityChanged) rangeOnly = false;
|
||
if (refreshUser) {
|
||
setUser(s);
|
||
setPage((current) => (s.hiddenMenus.includes(current) ? 'settings' : current));
|
||
if (!s.revealed) {
|
||
setPositions((rows) => rows.filter((p) => !p.hidden));
|
||
setHistoryRows([]);
|
||
setTransfers([]);
|
||
if (visibilityChanged) setOverview(null);
|
||
}
|
||
}
|
||
if (page === 'overview' && rangeOnly) {
|
||
const t = await api<PageResult<Total>>(
|
||
'/trend?' + new URLSearchParams({ from: rangeFrom, to: rangeTo, grain }),
|
||
);
|
||
if (!active()) return;
|
||
if (t.revealed !== !!s.revealed) {
|
||
void load(true);
|
||
return;
|
||
}
|
||
setOverview((o) => (o ? { ...o, trend: t.items } : o));
|
||
} else if (page === 'overview') {
|
||
const [o, t, recent] = await Promise.all([
|
||
api<Omit<Overview, 'trend' | 'recent'>>('/overview'),
|
||
api<PageResult<Total>>(
|
||
'/trend?' + new URLSearchParams({ from: rangeFrom, to: rangeTo, grain }),
|
||
),
|
||
api<PageResult<History>>('/history?limit=20'),
|
||
]);
|
||
if (!active()) return;
|
||
if ([o.revealed, t.revealed, recent.revealed].some((v) => v !== !!s.revealed)) {
|
||
void load(true);
|
||
return;
|
||
}
|
||
setOverview({ ...o, trend: t.items, recent: recent.items });
|
||
} else if (page === 'schedules') {
|
||
const rows = await api<Position[]>('/positions?kind=account');
|
||
if (active()) setPositions(rows);
|
||
} else if (['account', 'asset', 'debt'].includes(page)) {
|
||
if (page === 'account' && !rangeOnly && runDue && s.role !== 'readonly') {
|
||
const result = await api<{
|
||
executed: number;
|
||
errors: { message: string }[];
|
||
hasMore: boolean;
|
||
}>('/schedules/run', 'POST', {});
|
||
if (!active()) return;
|
||
if (result.errors.length) setError(result.errors[0].message);
|
||
if (result.executed) setSuccess(tr('到期计划已记账') + ` (${result.executed})`);
|
||
}
|
||
const [p, h] = await Promise.all([
|
||
api<Position[]>('/positions?kind=' + page),
|
||
selected
|
||
? api<PageResult<History>>('/positions/' + selected + '/history?limit=50')
|
||
: Promise.resolve(null),
|
||
]);
|
||
if (!active()) return;
|
||
setPositions(s.revealed ? p : p.filter((p) => !p.hidden));
|
||
setHistoryRows(h?.items || []);
|
||
setHistoryCursor(h?.nextCursor || null);
|
||
} else if (page === 'history') {
|
||
const [h, t] = await Promise.all([
|
||
api<PageResult<History>>(
|
||
'/history?' + new URLSearchParams({ from: rangeFrom, to: rangeTo, limit: '50' }),
|
||
),
|
||
api<PageResult<Transfer>>(
|
||
'/transfers?' + new URLSearchParams({ from: rangeFrom, to: rangeTo, limit: '50' }),
|
||
),
|
||
]);
|
||
if (!active()) return;
|
||
if ([h.revealed, t.revealed].some((v) => v !== !!s.revealed)) {
|
||
void load(true);
|
||
return;
|
||
}
|
||
setHistoryRows(h.items);
|
||
setHistoryCursor(h.nextCursor);
|
||
setTransfers(t.items);
|
||
setTransferCursor(t.nextCursor);
|
||
} else if (page === 'calendar') {
|
||
setCalendarRefresh((value) => value + 1);
|
||
} else if (page === 'settings') {
|
||
const settings = await api<User & { rates: Rate[]; fxStatus: typeof fxStatus }>(
|
||
'/settings' + (settingsSection === 'rates' ? '?rates=true' : ''),
|
||
);
|
||
if (!active()) return;
|
||
setUser(settings);
|
||
setRates(settings.rates);
|
||
setFxStatus(settings.fxStatus);
|
||
}
|
||
} catch (e) {
|
||
if (active()) report(e);
|
||
} finally {
|
||
if (active()) setLoading(false);
|
||
}
|
||
}
|
||
async function more(kind: 'history' | 'transfers') {
|
||
const session = sessionGeneration.current,
|
||
view = viewRef.current,
|
||
request = loadGeneration.current;
|
||
const cursor = kind === 'history' ? historyCursor : transferCursor;
|
||
if (!cursor || loading) return;
|
||
setLoading(true);
|
||
try {
|
||
const accountId = ['account', 'asset', 'debt'].includes(page) ? selected : null;
|
||
const endpoint =
|
||
kind === 'history' && accountId ? '/positions/' + accountId + '/history' : '/' + kind;
|
||
const query = new URLSearchParams({
|
||
cursor,
|
||
limit: '50',
|
||
...(!accountId ? { from: rangeFrom, to: rangeTo } : {}),
|
||
});
|
||
const result = await api<PageResult<History | Transfer>>(endpoint + '?' + query);
|
||
if (
|
||
session !== sessionGeneration.current ||
|
||
view !== viewRef.current ||
|
||
request !== loadGeneration.current
|
||
)
|
||
return;
|
||
if (result.revealed !== !!userRef.current?.revealed) {
|
||
void load(true);
|
||
return;
|
||
}
|
||
if (kind === 'history') {
|
||
setHistoryRows((rows) => [...rows, ...(result.items as History[])]);
|
||
setHistoryCursor(result.nextCursor);
|
||
} else {
|
||
setTransfers((rows) => [...rows, ...(result.items as Transfer[])]);
|
||
setTransferCursor(result.nextCursor);
|
||
}
|
||
} catch (e) {
|
||
if (session === sessionGeneration.current && view === viewRef.current) report(e);
|
||
} finally {
|
||
if (session === sessionGeneration.current && view === viewRef.current) setLoading(false);
|
||
}
|
||
}
|
||
const [movementPositions, setMovementPositions] = useState<Position[]>([]);
|
||
const [movementLoading, setMovementLoading] = useState(true);
|
||
useEffect(() => {
|
||
if (!modal || !['transfer', 'debt-payment'].includes(modal.kind)) {
|
||
setMovementPositions([]);
|
||
setMovementLoading(true);
|
||
return;
|
||
}
|
||
let cancelled = false;
|
||
const session = sessionGeneration.current;
|
||
setMovementLoading(true);
|
||
void api<Position[]>('/positions')
|
||
.then((rows) => {
|
||
if (!cancelled && session === sessionGeneration.current) {
|
||
setMovementPositions(rows);
|
||
setMovementLoading(false);
|
||
}
|
||
})
|
||
.catch((error) => {
|
||
if (!cancelled && session === sessionGeneration.current) report(error);
|
||
});
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
}, [modal]);
|
||
const [linkOptions, setLinkOptions] = useState<Position[]>([]);
|
||
useEffect(() => {
|
||
if (modal?.kind !== 'links') {
|
||
setLinkOptions([]);
|
||
return;
|
||
}
|
||
let cancelled = false;
|
||
const session = sessionGeneration.current;
|
||
void api<Position[]>('/positions')
|
||
.then((rows) => {
|
||
if (!cancelled && session === sessionGeneration.current)
|
||
setLinkOptions(rows.filter((p) => p.kind !== 'debt'));
|
||
})
|
||
.catch((e) => {
|
||
if (!cancelled && session === sessionGeneration.current) report(e);
|
||
});
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
}, [modal]);
|
||
const previousView = useRef('');
|
||
useEffect(() => {
|
||
if (!user || user.mustChangePassword) return;
|
||
const mutated = previousDataVersion.current !== dataVersion;
|
||
previousDataVersion.current = dataVersion;
|
||
const rangeOnly =
|
||
!mutated && page === 'overview' && previousView.current.startsWith('overview|') && !!overview;
|
||
previousView.current = viewKey;
|
||
if (!rangeOnly) setOverview(null);
|
||
setHistoryRows([]);
|
||
setHistoryCursor(null);
|
||
setTransfers([]);
|
||
setTransferCursor(null);
|
||
void load(true, rangeOnly, !mutated);
|
||
return () => {
|
||
loadGeneration.current++;
|
||
};
|
||
}, [viewKey, !!user, user?.mustChangePassword, dataVersion]);
|
||
useEffect(() => {
|
||
const session = sessionGeneration.current;
|
||
authCheck.current ||= api<User>('/auth/me');
|
||
void authCheck.current
|
||
.then((u) => {
|
||
if (session !== sessionGeneration.current) return;
|
||
setUser(u);
|
||
if (u.lastActivity) activityAt.current = +new Date(u.lastActivity);
|
||
})
|
||
.catch((e) => {
|
||
if (session === sessionGeneration.current && !(e instanceof ApiError && e.status === 401))
|
||
report(e);
|
||
})
|
||
.finally(() => setBoot(false));
|
||
}, []);
|
||
useEffect(() => {
|
||
window.scrollTo({ top: 0 });
|
||
}, [page, selected]);
|
||
useEffect(() => {
|
||
if (!user) return;
|
||
const session = sessionGeneration.current;
|
||
let lastSent = 0,
|
||
pending = false,
|
||
revealExpired = false;
|
||
const activity = () => {
|
||
if (!document.hidden) {
|
||
activityAt.current = Date.now();
|
||
if (Date.now() - lastSent > 15000 && !pending) {
|
||
pending = true;
|
||
lastSent = Date.now();
|
||
void api('/auth/activity', 'POST')
|
||
.catch((e) => {
|
||
if (session === sessionGeneration.current) report(e);
|
||
})
|
||
.finally(() => {
|
||
pending = false;
|
||
});
|
||
}
|
||
}
|
||
};
|
||
const check = window.setInterval(() => {
|
||
if (
|
||
user.idleMinutes &&
|
||
activityAt.current &&
|
||
Date.now() - activityAt.current >= user.idleMinutes * 60000
|
||
) {
|
||
clearAccount();
|
||
setError(tr('长时间无操作，已自动退出登录'));
|
||
void api('/auth/logout', 'POST').catch(() => {});
|
||
} else if (!revealExpired && user.revealUntil && Date.now() >= +new Date(user.revealUntil)) {
|
||
revealExpired = true;
|
||
setPositions([]);
|
||
setOverview(null);
|
||
setSelected(null);
|
||
setModal(null);
|
||
setHistoryRows([]);
|
||
setTransfers([]);
|
||
void load(true);
|
||
}
|
||
}, 1000);
|
||
const events = ['pointerdown', 'pointermove', 'keydown', 'wheel', 'touchstart'];
|
||
events.forEach((e) => window.addEventListener(e, activity, { passive: true }));
|
||
return () => {
|
||
window.clearInterval(check);
|
||
events.forEach((e) => window.removeEventListener(e, activity));
|
||
};
|
||
}, [user?.idleMinutes, user?.revealUntil, !!user]);
|
||
async function act(work: () => Promise<unknown>, message: string) {
|
||
const session = sessionGeneration.current;
|
||
setBusy(true);
|
||
setError('');
|
||
setSuccess('');
|
||
try {
|
||
const result = await work();
|
||
if (session !== sessionGeneration.current) return;
|
||
setSuccess(
|
||
result &&
|
||
typeof result === 'object' &&
|
||
'message' in result &&
|
||
typeof result.message === 'string'
|
||
? result.message
|
||
: message,
|
||
);
|
||
const createdKind =
|
||
modal && ['account', 'asset', 'debt'].includes(modal.kind) ? modal.kind : null;
|
||
setModal(null);
|
||
if (
|
||
createdKind &&
|
||
result &&
|
||
typeof result === 'object' &&
|
||
'id' in result &&
|
||
typeof result.id === 'string'
|
||
) {
|
||
setPage(createdKind);
|
||
setSelected(result.id);
|
||
}
|
||
setDataVersion((value) => value + 1);
|
||
} catch (e) {
|
||
if (session === sessionGeneration.current) report(e);
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
async function auth(e: FormEvent<HTMLFormElement>) {
|
||
e.preventDefault();
|
||
const f = new FormData(e.currentTarget);
|
||
const session = ++sessionGeneration.current;
|
||
setBusy(true);
|
||
setError('');
|
||
try {
|
||
const u = await api<User>('/auth/login', 'POST', {
|
||
username: f.get('username'),
|
||
password: f.get('password'),
|
||
});
|
||
if (session !== sessionGeneration.current) return;
|
||
void rememberLogin(String(f.get('username')), String(f.get('password')), remember);
|
||
const agentReturn = new URLSearchParams(location.search).has('agent_authorization');
|
||
setPage(agentReturn ? 'agent-review' : 'overview');
|
||
if (agentReturn) setSettingsSection('agent');
|
||
setSelected(null);
|
||
setModal(null);
|
||
activityAt.current = Date.now();
|
||
setUser(u);
|
||
} catch (e) {
|
||
report(e);
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
async function logout() {
|
||
sessionGeneration.current++;
|
||
setBusy(true);
|
||
try {
|
||
await api('/auth/logout', 'POST');
|
||
clearAccount();
|
||
setError('');
|
||
setSuccess('');
|
||
} catch (e) {
|
||
report(e);
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
const p = positions.find((p) => p.id === selected && p.kind === page),
|
||
newAction = (
|
||
<button
|
||
className="primary"
|
||
onClick={() => setModal({ kind: page === 'overview' ? 'account' : page })}
|
||
>
|
||
<Plus size={17} />
|
||
{tr('新增')}
|
||
{page === 'overview' ? tr('账户') : tr(labels[page])}
|
||
</button>
|
||
);
|
||
if (boot) return <div className="splash">{tr('WorthPath · 正在连接你的资产空间…')}</div>;
|
||
if (!user)
|
||
return (
|
||
<div className="auth-layout">
|
||
<div className="auth-language">
|
||
<LanguagePicker />
|
||
</div>
|
||
<section className="auth-story">
|
||
<div className="brand">
|
||
<span>W</span> WorthPath
|
||
</div>
|
||
<div>
|
||
<p className="eyebrow">YOUR WEALTH, IN PERSPECTIVE</p>
|
||
<h1>
|
||
{tr('让每一步积累，')}
|
||
<br />
|
||
{tr('都有清晰的方向。')}
|
||
</h1>
|
||
<p>
|
||
{tr('在一个空间里，连接你的账户、资产与债务。')}
|
||
<br />
|
||
{tr('看见当下，也看见净资产的每一次变化。')}
|
||
</p>
|
||
<div className="story-line">
|
||
<TrendingUp size={32} />
|
||
<span>
|
||
{tr('关注长期积累')}
|
||
<br />
|
||
<small>{tr('从第一份真实资产开始')}</small>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<small>{tr('个人资产管理 · 多币种 · 历史追踪')}</small>
|
||
</section>
|
||
<section className="auth-form">
|
||
<div>
|
||
<p className="eyebrow">{tr('开始你的资产之路')}</p>
|
||
<h2>{tr('欢迎回来')}</h2>
|
||
<p className="muted">{tr('登录以查看你的资产与负债')}</p>
|
||
|
||
<form onSubmit={auth} autoComplete="on">
|
||
<Field label={tr('账号')}>
|
||
<input
|
||
name="username"
|
||
defaultValue={savedLogin().username}
|
||
autoComplete="username"
|
||
required
|
||
minLength={3}
|
||
maxLength={64}
|
||
placeholder={tr('输入账号（至少 3 个字符）')}
|
||
/>
|
||
</Field>
|
||
<Field label={tr('密码')}>
|
||
<input
|
||
name="password"
|
||
type="password"
|
||
autoComplete="current-password"
|
||
required
|
||
minLength={1}
|
||
maxLength={72}
|
||
placeholder={tr('输入密码')}
|
||
/>
|
||
</Field>
|
||
{
|
||
<>
|
||
<label className="check-line">
|
||
<input
|
||
type="checkbox"
|
||
checked={remember}
|
||
onChange={(e) => setRemember(e.target.checked)}
|
||
/>
|
||
{tr('记住账号密码')}
|
||
</label>
|
||
<p className="muted">{tr('密码由浏览器密码管理器保存，下次登录可自动填充。')}</p>
|
||
</>
|
||
}
|
||
<button className="primary full" disabled={busy}>
|
||
{busy ? tr('正在处理…') : tr('登录')}
|
||
<ArrowUpRight size={18} />
|
||
</button>
|
||
</form>
|
||
<p className="muted">{tr('账号由管理员创建，请联系管理员获取账号。')}</p>
|
||
<p className="privacy">
|
||
<ShieldCheck size={16} />
|
||
{tr('个人数据按登录身份隔离')}
|
||
</p>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
);
|
||
if (user.mustChangePassword)
|
||
return <FirstPassword changed={setUser} logout={() => void logout()} report={report} />;
|
||
async function correctHistory(h: History) {
|
||
if (h.reason.startsWith('transfer_') || h.reason.startsWith('loan_')) {
|
||
const session = sessionGeneration.current,
|
||
view = viewRef.current;
|
||
try {
|
||
const transfer = await api<Transfer>('/transfers/revision/' + h.id);
|
||
if (session === sessionGeneration.current && view === viewRef.current)
|
||
setModal({ kind: 'transfer-edit', transfer });
|
||
} catch (e) {
|
||
if (session === sessionGeneration.current && view === viewRef.current) report(e);
|
||
}
|
||
return;
|
||
}
|
||
const session = sessionGeneration.current,
|
||
view = viewRef.current;
|
||
try {
|
||
const p = await api<Position>('/positions/' + h.positionId);
|
||
if (session !== sessionGeneration.current || view !== viewRef.current) return;
|
||
setModal({ kind: 'correction', p, h });
|
||
} catch (e) {
|
||
if (session === sessionGeneration.current && view === viewRef.current) report(e);
|
||
}
|
||
}
|
||
function deleteHistory(h: History) {
|
||
setError('');
|
||
setModal({ kind: 'delete-record', h });
|
||
}
|
||
async function downloadBackup(forClear = false) {
|
||
const session = sessionGeneration.current;
|
||
setBusy(true);
|
||
setError('');
|
||
setSuccess('');
|
||
try {
|
||
const response = await fetch('/api/backup', { credentials: 'same-origin' });
|
||
if (!response.ok) {
|
||
const result = await response.json().catch(() => ({}));
|
||
throw new ApiError(result.message || tr('备份下载失败'), response.status);
|
||
}
|
||
if (!response.headers.get('content-type')?.includes('application/zip'))
|
||
throw new Error(tr('备份文件格式错误'));
|
||
const blob = await response.blob();
|
||
if (!blob.size) throw new Error(tr('备份文件为空'));
|
||
if (session !== sessionGeneration.current) return;
|
||
const url = URL.createObjectURL(blob),
|
||
a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = 'worthpath-' + today() + '.zip';
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
a.remove();
|
||
window.setTimeout(() => URL.revokeObjectURL(url), 60000);
|
||
setSuccess(tr('备份已生成，请确认文件已保存'));
|
||
if (forClear) setClearStep(1);
|
||
} catch (e) {
|
||
if (session === sessionGeneration.current) report(e);
|
||
} finally {
|
||
if (session === sessionGeneration.current) setBusy(false);
|
||
}
|
||
}
|
||
const agentParams = new URLSearchParams(location.search);
|
||
if (agentParams.has('agent_authorization') || location.pathname === '/agent/authorize') {
|
||
return (
|
||
<main className="agent-review-page">
|
||
<header className="agent-review-header">
|
||
<a href="/">WorthPath</a>
|
||
<span>{user.username}</span>
|
||
<button className="text" disabled={busy} onClick={() => void logout()}>
|
||
退出登录
|
||
</button>
|
||
</header>
|
||
<AgentAuthorization id={agentParams.get('agent_authorization')} />
|
||
</main>
|
||
);
|
||
}
|
||
const nav = [
|
||
['overview', LayoutDashboard],
|
||
['account', Wallet],
|
||
['asset', Landmark],
|
||
['debt', HandCoins],
|
||
['history', HistoryIcon],
|
||
['calendar', CalendarDays],
|
||
['schedules', HistoryIcon],
|
||
['settings', Settings],
|
||
['admin', ShieldCheck],
|
||
] as const;
|
||
const visibleNav = nav.filter(([key]) =>
|
||
key === 'admin' ? user.role === 'admin' : !(user.hiddenMenus || []).includes(key),
|
||
);
|
||
const groups = orderedGroups(
|
||
positions.filter((p) => p.kind === 'account').map((p) => p.groupName || ''),
|
||
user.accountGroupOrder,
|
||
);
|
||
const groupRanks = new Map(groups.map((g, index) => [g, index]));
|
||
return createElement(
|
||
GroupOrderContext.Provider,
|
||
{ value: user.accountGroupOrder || [] },
|
||
<div className={user.showNotes === false ? 'app notes-hidden' : 'app'}>
|
||
{
|
||
<aside className="sidebar">
|
||
<div className="brand">
|
||
<span>W</span> WorthPath
|
||
</div>
|
||
<p className="nav-caption">{tr('我的资产空间')}</p>
|
||
<nav style={{ gridTemplateColumns: `repeat(${visibleNav.length}, 1fr)` }}>
|
||
{visibleNav.map(([key, Icon]) => (
|
||
<button
|
||
key={key}
|
||
className={page === key ? 'active' : ''}
|
||
onClick={() => {
|
||
setPage(key);
|
||
setSelected(null);
|
||
}}
|
||
>
|
||
<Icon size={19} />
|
||
<span>{tr(labels[key])}</span>
|
||
</button>
|
||
))}
|
||
</nav>
|
||
<div className="side-bottom">
|
||
<div className="avatar">{user.username.slice(0, 1).toUpperCase()}</div>
|
||
<div>
|
||
<strong>{user.username}</strong>
|
||
<small>
|
||
{tr('个人账户 ·')}
|
||
{user.baseCurrency}
|
||
</small>
|
||
</div>
|
||
<button
|
||
className="icon"
|
||
aria-label={tr('退出登录')}
|
||
disabled={busy}
|
||
onClick={() => void logout()}
|
||
>
|
||
<LogOut size={18} />
|
||
</button>
|
||
</div>
|
||
</aside>
|
||
}
|
||
<main>
|
||
<header className="topbar">
|
||
<span>
|
||
{tr('个人财务 /')}
|
||
{tr(labels[page])}
|
||
</span>
|
||
<div>
|
||
<LanguagePicker />
|
||
<span className="currency-pill">
|
||
{tr('本位币')}
|
||
{user.baseCurrency}
|
||
</span>
|
||
<button
|
||
className="icon"
|
||
aria-label={tr('刷新数据')}
|
||
disabled={loading}
|
||
onClick={() => void load()}
|
||
>
|
||
<RefreshCw size={17} />
|
||
</button>
|
||
</div>
|
||
</header>
|
||
<div
|
||
className={
|
||
page === 'account' && quickMode && !selected ? 'content quick-content' : 'content'
|
||
}
|
||
>
|
||
<div className="privacy-toolbar">
|
||
<span>
|
||
{user.revealed
|
||
? tr('当前包含隐藏资产 · 5 分钟后自动锁定')
|
||
: tr('当前不包含隐藏账户、资产和债务，净资产按此范围计算')}
|
||
</span>
|
||
<button
|
||
className="secondary"
|
||
disabled={busy}
|
||
onClick={() =>
|
||
user.revealed
|
||
? void act(() => api('/auth/lock', 'POST'), tr('隐藏资产已锁定'))
|
||
: user.requireHiddenPassword === false
|
||
? void act(() => api('/auth/reveal', 'POST', {}), tr('隐藏资产已显示'))
|
||
: setModal({ kind: 'reveal' })
|
||
}
|
||
>
|
||
{user.revealed
|
||
? tr('锁定隐藏资产')
|
||
: user.requireHiddenPassword === false
|
||
? tr('显示隐藏资产')
|
||
: tr('显示隐藏资产（验证密码）')}
|
||
</button>
|
||
</div>
|
||
<div className="page-heading">
|
||
<div>
|
||
<p className="eyebrow">WORTHPATH / {today()}</p>
|
||
<h1>
|
||
{p?.iconId && (
|
||
<img className="detail-icon" src={iconUrl(p.iconId)} alt={tr('账户图标')} />
|
||
)}
|
||
{p ? p.name : tr(labels[page])}
|
||
</h1>
|
||
<p className="muted">
|
||
{page === 'overview'
|
||
? tr('你的财富全貌，从这里开始。')
|
||
: page === 'settings'
|
||
? tr('让数据始终可控，让换算清晰可靠。')
|
||
: tr('保留原币金额，追踪长期变化。')}
|
||
</p>
|
||
</div>
|
||
<div className="actions">
|
||
{user.role !== 'readonly' && page === 'account' && !p && !quickMode && (
|
||
<button className="secondary" onClick={() => setModal({ kind: 'transfer' })}>
|
||
{tr('转账')}
|
||
</button>
|
||
)}
|
||
{user.role !== 'readonly' &&
|
||
['overview', 'account', 'asset', 'debt'].includes(page) &&
|
||
!p &&
|
||
!(page === 'account' && quickMode) &&
|
||
newAction}
|
||
</div>
|
||
</div>
|
||
|
||
{user.role === 'readonly' && (
|
||
<p className="muted" role="status">
|
||
{tr('当前为只读账号，无法修改业务数据。')}
|
||
</p>
|
||
)}
|
||
{loading && (
|
||
<p role="status" className="muted">
|
||
{tr('正在刷新数据…')}
|
||
</p>
|
||
)}
|
||
{page === 'overview' && overview && (
|
||
<>
|
||
{user.overviewCards?.length === 0 && (
|
||
<section className="panel">
|
||
<p>{tr('尚未选择总览卡片')}</p>
|
||
<button
|
||
className="text"
|
||
onClick={() => {
|
||
setPage('settings');
|
||
setSettingsSection('display');
|
||
}}
|
||
>
|
||
{tr('设置显示卡片')}
|
||
</button>
|
||
</section>
|
||
)}
|
||
{!!overview.missing.length && (
|
||
<div className="notice warning">
|
||
{tr('缺少')}
|
||
{overview.missing.join('、')} {tr('到')}
|
||
{user.baseCurrency} {tr('的汇率。以下仅展示已能换算的部分，不能作为完整总额。')}
|
||
<button className="text" onClick={() => setPage('settings')}>
|
||
{tr('设置汇率')}
|
||
</button>
|
||
</div>
|
||
)}
|
||
{!!overview.missingValuations?.length && (
|
||
<div className="notice warning">
|
||
{tr('待估值')}：{overview.missingValuations.map((p) => p.name).join('、')} ·{' '}
|
||
{tr('缺少报价，当前总额不完整。')}
|
||
</div>
|
||
)}
|
||
<div
|
||
className="metrics"
|
||
hidden={
|
||
!['assets', 'liabilities', 'net'].some((key) =>
|
||
(user.overviewCards ?? allOverviewCards).includes(key),
|
||
)
|
||
}
|
||
>
|
||
{[
|
||
[tr('总资产'), overview.assets, 'asset'],
|
||
[tr('总负债'), overview.liabilities, 'debt'],
|
||
[tr('净资产'), overview.net, 'net'],
|
||
]
|
||
.filter(([, , cls]) =>
|
||
(user.overviewCards ?? allOverviewCards).includes(
|
||
cls === 'asset' ? 'assets' : cls === 'debt' ? 'liabilities' : cls,
|
||
),
|
||
)
|
||
.map(([title, value, cls]) => (
|
||
<section className={'metric ' + cls} key={title}>
|
||
<div>
|
||
<span>
|
||
{title}
|
||
{!overview.complete ? tr('（部分）') : ''}
|
||
</span>
|
||
<ArrowUpRight size={18} />
|
||
</div>
|
||
<strong
|
||
className={
|
||
cls === 'debt' || value.startsWith('-') ? 'danger-text' : 'income-text'
|
||
}
|
||
>
|
||
{money(value, user.baseCurrency)}
|
||
</strong>
|
||
<small>
|
||
{title === tr('净资产')
|
||
? tr('总资产 − 总负债')
|
||
: title === tr('总资产')
|
||
? tr('账户资产 + 独立资产')
|
||
: tr('负债账户 + 独立债务')}
|
||
</small>
|
||
</section>
|
||
))}
|
||
</div>
|
||
<div
|
||
className={
|
||
'dashboard-grid' +
|
||
(!['trend', 'composition'].every((key) =>
|
||
(user.overviewCards ?? allOverviewCards).includes(key),
|
||
)
|
||
? ' single-card'
|
||
: '')
|
||
}
|
||
hidden={
|
||
!['trend', 'composition'].some((key) =>
|
||
(user.overviewCards ?? allOverviewCards).includes(key),
|
||
)
|
||
}
|
||
>
|
||
<section
|
||
className="panel"
|
||
hidden={!(user.overviewCards ?? allOverviewCards).includes('trend')}
|
||
>
|
||
<div className="panel-title">
|
||
<h2>{tr('净资产轨迹')}</h2>
|
||
<span className="badge">{tr('按业务日期')}</span>
|
||
</div>
|
||
<div className="actions overview-filters">
|
||
<label>
|
||
{tr('开始')}
|
||
<input
|
||
type="date"
|
||
value={rangeFrom}
|
||
max={rangeTo}
|
||
onChange={(e) => setRangeFrom(e.target.value)}
|
||
/>
|
||
</label>
|
||
<label>
|
||
{tr('结束')}
|
||
<input
|
||
type="date"
|
||
value={rangeTo}
|
||
min={rangeFrom}
|
||
max={today()}
|
||
onChange={(e) => setRangeTo(e.target.value)}
|
||
/>
|
||
</label>
|
||
<select
|
||
aria-label={tr('统计粒度')}
|
||
value={grain}
|
||
onChange={(e) => setGrain(e.target.value)}
|
||
>
|
||
<option value="day">{tr('日（最多366天）')}</option>
|
||
<option value="week">{tr('周（最多3年）')}</option>
|
||
<option value="month">{tr('月（最多10年）')}</option>
|
||
</select>
|
||
</div>
|
||
<p className="muted">
|
||
{tr(
|
||
'默认最近90天；周一至周日及自然月取期末余额，变化归因累计区间内每日变化，首尾不足周期按实际范围。',
|
||
)}
|
||
</p>
|
||
<NetWorthChart rows={overview.trend} base={user.baseCurrency} />
|
||
<p className="muted">
|
||
{tr('按当时可用汇率重放；更正历史后重新计算。归档项目仍计入。')}
|
||
</p>
|
||
</section>
|
||
<section
|
||
className="panel"
|
||
hidden={!(user.overviewCards ?? allOverviewCards).includes('composition')}
|
||
>
|
||
<h2>{tr('资产与负债组成')}</h2>
|
||
{overview.items.length ? (
|
||
['account', 'asset', 'debt'].map((k) => (
|
||
<button
|
||
className="composition"
|
||
key={k}
|
||
onClick={() => {
|
||
setPage(k);
|
||
setSelected(null);
|
||
}}
|
||
>
|
||
<span>
|
||
{tr(labels[k])}
|
||
<small>
|
||
{overview.items.filter((p) => p.included && p.kind === k).length}{' '}
|
||
{tr('个项目')}
|
||
</small>
|
||
</span>
|
||
<ArrowUpRight size={18} />
|
||
</button>
|
||
))
|
||
) : (
|
||
<Empty
|
||
title={tr('从一个账户开始')}
|
||
body={tr('添加银行、现金或投资账户，建立你的资产全貌。')}
|
||
action={newAction}
|
||
/>
|
||
)}
|
||
<p className="privacy">
|
||
<ShieldCheck size={15} />
|
||
{tr('关联关系不会重复计入总额')}
|
||
</p>
|
||
</section>
|
||
</div>
|
||
<section
|
||
className="panel"
|
||
hidden={!(user.overviewCards ?? allOverviewCards).includes('recent')}
|
||
>
|
||
<div className="panel-title">
|
||
<h2>{tr('最近变化')}</h2>
|
||
<button className="text" onClick={() => setPage('history')}>
|
||
{tr('查看全部 →')}
|
||
</button>
|
||
</div>
|
||
<HistoryTable
|
||
rows={overview.recent.slice(0, 6)}
|
||
open={(id) => {
|
||
setSelected(id);
|
||
setPage(overview.recent.find((h) => h.positionId === id)?.kind || 'account');
|
||
}}
|
||
/>
|
||
</section>
|
||
<div className="fx-caption">
|
||
{tr('本位币')}
|
||
{user.baseCurrency} {tr('· 汇率日期：')}
|
||
{[
|
||
...new Set(
|
||
overview.items
|
||
.filter((i) => i.currency !== user.baseCurrency && i.rateDate)
|
||
.map((i) => i.rateDate),
|
||
),
|
||
].join(' / ') || tr('尚无外币汇率')}{' '}
|
||
{tr('· 每日尝试更新，失败保留已有数据；旧日期汇率可能产生换算偏差。')}
|
||
</div>
|
||
{(user.overviewCards ?? allOverviewCards).includes('attribution') &&
|
||
overview.trend.length > 1 && (
|
||
<details className="panel attribution">
|
||
<summary>{tr('变化归因')}</summary>
|
||
<div className="table-wrap">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>{tr('日期')}</th>
|
||
<th>{tr('余额 / 估值变化')}</th>
|
||
<th>{tr('汇率变化')}</th>
|
||
<th>{tr('净资产')}</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{overview.trend.slice(-10).map((r) => (
|
||
<tr key={r.date}>
|
||
<td>{r.date}</td>
|
||
<td>
|
||
{r.balanceChange === null || r.balanceChange === undefined
|
||
? '—'
|
||
: money(r.balanceChange, user.baseCurrency)}
|
||
</td>
|
||
<td>
|
||
{r.fxChange === null || r.fxChange === undefined
|
||
? '—'
|
||
: money(r.fxChange, user.baseCurrency)}
|
||
</td>
|
||
<td>
|
||
{r.complete ? money(r.net, user.baseCurrency) : tr('汇率不完整')}
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</details>
|
||
)}
|
||
</>
|
||
)}
|
||
{['account', 'asset', 'debt'].includes(page) &&
|
||
(p ? (
|
||
<>
|
||
<button className="text back" onClick={() => setSelected(null)}>
|
||
<ArrowLeft size={16} />
|
||
{tr('返回列表')}
|
||
</button>
|
||
<section className="panel detail-summary">
|
||
<div>
|
||
<span className="badge">
|
||
{categoryLabel(p)} ·{' '}
|
||
{p.kind === 'debt'
|
||
? tr(p.side === 'asset' ? '借款（待收）' : '欠款（待还）')
|
||
: p.side === 'asset'
|
||
? tr('资产')
|
||
: tr(
|
||
p.kind === 'account' && p.amount.startsWith('-')
|
||
? '溢缴存款'
|
||
: '负债',
|
||
)}
|
||
{p.archived ? tr(' · 已归档') : ''}
|
||
</span>
|
||
<h2
|
||
className={positionAmount(p).startsWith('-') ? 'danger-text' : 'income-text'}
|
||
>
|
||
{p.valuationAvailable === false
|
||
? tr('待估值')
|
||
: money(positionAmount(p), p.currency)}
|
||
{p.metalGrams && <small> · {p.metalGrams} g</small>}
|
||
</h2>
|
||
{p.hidden && <span className="badge">{tr('隐藏资产')}</span>}
|
||
<p className="muted" hidden={p.currency === user.baseCurrency}>
|
||
{tr('本位币：')}
|
||
{p.converted !== null
|
||
? money(positionAmount(p, p.converted || '0'), user.baseCurrency)
|
||
: tr(p.valuationAvailable === false ? '待估值' : '缺少汇率')}
|
||
</p>
|
||
<p className="notes-display">{p.notes || tr('暂无备注')}</p>
|
||
{(p.included === false ||
|
||
(p.kind === 'asset' && user.includeIndependentAssets === false)) && (
|
||
<span className="badge">{tr('不计入总览')}</span>
|
||
)}
|
||
<small>{tr('币种和资产负债属性创建后固定。归档项目仍计入总览。')}</small>
|
||
</div>
|
||
<div className="actions">
|
||
{p.kind === 'account' && !p.archived && (
|
||
<>
|
||
<button
|
||
className="primary"
|
||
onClick={() => setModal({ kind: 'transfer', p })}
|
||
>
|
||
{tr('转账')}
|
||
</button>
|
||
<button
|
||
hidden={p.side !== 'asset'}
|
||
className="secondary"
|
||
onClick={() => setModal({ kind: 'debt-payment', p })}
|
||
>
|
||
{tr('收款 / 还款')}
|
||
</button>
|
||
</>
|
||
)}
|
||
{p.kind === 'debt' && !p.archived && (
|
||
<>
|
||
<button
|
||
className="primary"
|
||
onClick={() =>
|
||
setModal({
|
||
kind: 'debt-payment',
|
||
p,
|
||
operation: p.side === 'asset' ? 'collect' : 'repay',
|
||
})
|
||
}
|
||
>
|
||
{operationLabel(p.side === 'asset' ? 'collect' : 'repay')}
|
||
</button>
|
||
</>
|
||
)}
|
||
<button
|
||
className="secondary danger-text"
|
||
disabled={busy}
|
||
onClick={() => setModal({ kind: 'delete-position', p })}
|
||
>
|
||
删除{deletionLabel(p)}
|
||
</button>
|
||
<button className="secondary" onClick={() => setModal({ kind: 'edit', p })}>
|
||
{tr('编辑资料')}
|
||
</button>
|
||
<button
|
||
className="secondary"
|
||
disabled={busy}
|
||
onClick={() =>
|
||
void act(
|
||
() =>
|
||
api('/positions/' + p.id, 'PATCH', {
|
||
name: p.name,
|
||
category: p.category,
|
||
groupName: p.groupName,
|
||
notes: p.notes,
|
||
archived: !p.archived,
|
||
hidden: p.hidden,
|
||
}),
|
||
p.archived ? tr('项目已恢复') : tr('项目已归档'),
|
||
)
|
||
}
|
||
>
|
||
{p.archived ? tr('恢复项目') : tr('归档项目')}
|
||
</button>
|
||
<button
|
||
className="primary"
|
||
disabled={p.archived}
|
||
onClick={() => setModal({ kind: 'revision', p })}
|
||
>
|
||
{tr('更新')}
|
||
{p.kind === 'asset' ? tr('估值') : tr('余额')}
|
||
</button>
|
||
</div>
|
||
</section>
|
||
{p.kind === 'asset' && p.category === 'gold' && (
|
||
<MetalPanel position={p} refresh={() => load(false, true)} />
|
||
)}
|
||
{p.kind === 'debt' && (
|
||
<section className="panel">
|
||
<div className="panel-title">
|
||
<h2>{tr('关联资产与账户')}</h2>
|
||
<button className="text" onClick={() => setModal({ kind: 'links', p })}>
|
||
{tr('管理关联')}
|
||
</button>
|
||
</div>
|
||
<p className="muted">{tr('只展示关系，不改变资产或债务的统计。')}</p>
|
||
{p.outgoing.length ? (
|
||
p.outgoing.map((l) => (
|
||
<button
|
||
className="secondary"
|
||
key={l.targetId}
|
||
onClick={() => {
|
||
setSelected(l.targetId);
|
||
setPage(l.target.kind);
|
||
}}
|
||
>
|
||
{l.target.name}
|
||
</button>
|
||
))
|
||
) : (
|
||
<p>{tr('尚未关联')}</p>
|
||
)}
|
||
</section>
|
||
)}
|
||
<section className="panel">
|
||
<h2>{tr('余额与估值历史')}</h2>
|
||
<p className="muted">
|
||
{tr(
|
||
'每次更新保留独立历史，同日按记录顺序展示。错误记录可单独更正，后续变化自动重算。',
|
||
)}
|
||
</p>
|
||
<HistoryTable
|
||
rows={historyRows}
|
||
correct={p.archived ? undefined : (h) => void correctHistory(h)}
|
||
remove={p.archived ? undefined : deleteHistory}
|
||
busy={busy}
|
||
/>
|
||
{historyCursor && (
|
||
<button disabled={loading} onClick={() => void more('history')}>
|
||
{tr('加载更早记录')}
|
||
</button>
|
||
)}
|
||
</section>
|
||
</>
|
||
) : (
|
||
<section
|
||
className={page === 'account' && quickMode ? 'panel quick-account-panel' : 'panel'}
|
||
>
|
||
{page === 'account' && (
|
||
<>
|
||
<div className="actions account-tools">
|
||
<button
|
||
className={quickMode ? 'primary' : 'secondary'}
|
||
aria-pressed={quickMode}
|
||
disabled={busy}
|
||
onClick={toggleQuickMode}
|
||
>
|
||
{tr(quickMode ? '退出快速记账' : '快速记账')}
|
||
</button>
|
||
{quickMode && (
|
||
<button
|
||
className={quickMarkMode ? 'primary' : 'secondary'}
|
||
disabled={busy}
|
||
aria-pressed={quickMarkMode}
|
||
onClick={() => {
|
||
setQuickMarkMode(!quickMarkMode);
|
||
setQuickBookedMode(false);
|
||
setQuickTransfer(null);
|
||
}}
|
||
>
|
||
{tr(quickMarkMode ? '结束还款标记' : '标记本月还款')}
|
||
</button>
|
||
)}
|
||
{quickMode && (
|
||
<>
|
||
<button
|
||
type="button"
|
||
className="secondary"
|
||
disabled={
|
||
busy ||
|
||
positions.filter((p) => p.kind === 'account' && !p.archived).length <
|
||
2
|
||
}
|
||
onClick={() => {
|
||
setQuickMarkMode(false);
|
||
setQuickBookedMode(false);
|
||
setHideBooked(false);
|
||
setUnpaidOnly(false);
|
||
setQuickTransfer({});
|
||
}}
|
||
>
|
||
{tr('转账')}
|
||
</button>
|
||
<button
|
||
className={quickBookedMode ? 'primary' : 'secondary'}
|
||
disabled={busy}
|
||
aria-pressed={quickBookedMode}
|
||
onClick={() => {
|
||
setQuickBookedMode(!quickBookedMode);
|
||
setQuickMarkMode(false);
|
||
setQuickTransfer(null);
|
||
}}
|
||
>
|
||
{tr(quickBookedMode ? '结束记账标记' : '标记当天已记账')}
|
||
</button>
|
||
<button
|
||
className="secondary"
|
||
aria-pressed={unpaidOnly}
|
||
disabled={busy}
|
||
onClick={() => {
|
||
setUnpaidOnly(!unpaidOnly);
|
||
setQuickTransfer(null);
|
||
}}
|
||
>
|
||
{tr(unpaidOnly ? '显示全部账户' : '仅看本月未还款')}
|
||
</button>
|
||
<button
|
||
className="secondary"
|
||
aria-pressed={hideBooked}
|
||
disabled={busy}
|
||
onClick={() => {
|
||
setHideBooked(!hideBooked);
|
||
setQuickTransfer(null);
|
||
}}
|
||
>
|
||
{tr(hideBooked ? '显示当天已记账' : '隐藏当天已记账')}
|
||
</button>
|
||
</>
|
||
)}
|
||
<select
|
||
aria-label={tr('账户分组')}
|
||
value={accountGroup === null ? 'all' : JSON.stringify(accountGroup)}
|
||
onChange={(e) =>
|
||
setAccountGroup(
|
||
e.target.value === 'all' ? null : JSON.parse(e.target.value),
|
||
)
|
||
}
|
||
>
|
||
<option value="all">{tr('全部账户')}</option>
|
||
{groups.map((g) => (
|
||
<option key={g} value={JSON.stringify(g)}>
|
||
{g || tr('未分组')}
|
||
</option>
|
||
))}
|
||
</select>
|
||
<button
|
||
className="secondary"
|
||
hidden={quickMode}
|
||
disabled={busy || groups.length < 2}
|
||
onClick={() => setModal({ kind: 'group-order', groups: [...groups] })}
|
||
>
|
||
{tr('分组排序')}
|
||
</button>
|
||
</div>
|
||
{quickMode && (
|
||
<p className="muted">
|
||
{tr(
|
||
quickBookedMode
|
||
? '点击账户卡片，标记或取消当天已记账。'
|
||
: quickMarkMode
|
||
? '点击欠款账户卡片，标记或取消本月已还款。'
|
||
: quickTransfer !== null
|
||
? '快速转账中：依次点击转出和转入账户卡片。'
|
||
: '点击账户卡片，直接填写当前余额。',
|
||
)}
|
||
</p>
|
||
)}
|
||
</>
|
||
)}
|
||
{page === 'asset' && (
|
||
<>
|
||
<div className="actions account-tools">
|
||
<button
|
||
className={assetQuickMode ? 'primary' : 'secondary'}
|
||
disabled={busy}
|
||
aria-pressed={assetQuickMode}
|
||
onClick={() => {
|
||
setAssetQuickMode(!assetQuickMode);
|
||
setAssetValueMode(false);
|
||
}}
|
||
>
|
||
{tr(assetQuickMode ? '结束统计设置' : '快速设置计入总资产')}
|
||
</button>
|
||
<button
|
||
className={assetValueMode ? 'primary' : 'secondary'}
|
||
disabled={busy}
|
||
aria-pressed={assetValueMode}
|
||
onClick={() => {
|
||
setAssetValueMode(!assetValueMode);
|
||
setAssetQuickMode(false);
|
||
}}
|
||
>
|
||
{tr(assetValueMode ? '结束快速估值' : '快速设置估值')}
|
||
</button>
|
||
</div>
|
||
{assetValueMode && (
|
||
<p className="muted">
|
||
{tr('点击资产卡片填写最新估值；贵金属按报价自动估值。')}
|
||
</p>
|
||
)}
|
||
{assetQuickMode && (
|
||
<p className="muted">{tr('点击资产卡片，切换是否计入总资产。')}</p>
|
||
)}
|
||
{assetQuickMode && user.includeIndependentAssets === false && (
|
||
<p className="muted">
|
||
{tr('独立资产总开关已关闭；单项设置已保存，开启总开关后生效。')}
|
||
</p>
|
||
)}
|
||
</>
|
||
)}
|
||
{page === 'account' &&
|
||
quickMode &&
|
||
positions.some((p) => p.kind === 'account') &&
|
||
!positions.some(
|
||
(p) =>
|
||
p.kind === 'account' &&
|
||
(accountGroup === null || (p.groupName || '') === accountGroup) &&
|
||
quickAccountVisible(p, repaymentMonth, businessDay, unpaidOnly, hideBooked),
|
||
) && (
|
||
<p className="muted" role="status">
|
||
{tr('当前筛选下没有账户，可切换筛选查看其他账户。')}
|
||
</p>
|
||
)}
|
||
{positions.some((p) => p.kind === page) ? (
|
||
<div
|
||
className={
|
||
'position-grid' +
|
||
(page === 'account' && quickMode ? ' quick-dense-grid' : '') +
|
||
(quickTransfer !== null && page === 'account' ? ' quick-transfer-select' : '')
|
||
}
|
||
>
|
||
{positions
|
||
.filter(
|
||
(p) =>
|
||
p.kind === page &&
|
||
(page !== 'account' ||
|
||
accountGroup === null ||
|
||
(p.groupName || '') === accountGroup) &&
|
||
(page !== 'account' ||
|
||
!quickMode ||
|
||
quickAccountVisible(
|
||
p,
|
||
repaymentMonth,
|
||
businessDay,
|
||
unpaidOnly,
|
||
hideBooked,
|
||
)),
|
||
)
|
||
.sort((a, b) =>
|
||
page === 'account'
|
||
? (groupRanks.get(a.groupName || '') || 0) -
|
||
(groupRanks.get(b.groupName || '') || 0)
|
||
: 0,
|
||
)
|
||
.map((p, index, rows) => (
|
||
<Fragment key={p.id}>
|
||
{page === 'account' &&
|
||
accountGroup === null &&
|
||
(index === 0 ||
|
||
(rows[index - 1].groupName || '') !== (p.groupName || '')) && (
|
||
<h3 className="account-group-title">{p.groupName || tr('未分组')}</h3>
|
||
)}
|
||
<button
|
||
className={
|
||
'position-card' +
|
||
(quickTransfer?.sourceId === p.id
|
||
? ' quick-source'
|
||
: quickTransfer?.targetId === p.id
|
||
? ' quick-target'
|
||
: '')
|
||
}
|
||
aria-pressed={
|
||
quickTransfer
|
||
? quickTransfer.sourceId === p.id || quickTransfer.targetId === p.id
|
||
: undefined
|
||
}
|
||
disabled={
|
||
busy ||
|
||
(page === 'asset' &&
|
||
assetValueMode &&
|
||
(p.archived || p.category === 'gold')) ||
|
||
(!!quickTransfer && p.archived) ||
|
||
(quickMode &&
|
||
quickMarkMode &&
|
||
(p.side !== 'liability' || p.archived)) ||
|
||
(quickMode && quickBookedMode && p.archived)
|
||
}
|
||
key={p.id}
|
||
onClick={() =>
|
||
page === 'asset' && assetValueMode
|
||
? setModal({ kind: 'revision', p })
|
||
: page === 'asset' && assetQuickMode
|
||
? void act(() => toggleAssetInclusion(p), tr('统计设置已保存'))
|
||
: quickMode && quickBookedMode && page === 'account'
|
||
? void act(() => markQuickBooked(p), tr('记账标记已保存'))
|
||
: quickMode && quickMarkMode && page === 'account'
|
||
? p.kind === 'account' &&
|
||
p.side === 'liability' &&
|
||
!p.archived
|
||
? void act(
|
||
() => markQuickRepayment(p),
|
||
tr('还款标记已保存'),
|
||
)
|
||
: undefined
|
||
: quickTransfer !== null && page === 'account' && quickMode
|
||
? chooseQuickAccount(p)
|
||
: page === 'account' && quickMode && !p.archived
|
||
? setModal({ kind: 'revision', p, quick: true })
|
||
: setSelected(p.id)
|
||
}
|
||
>
|
||
<div>
|
||
<span className="position-icon">
|
||
{p.iconId ? (
|
||
<img src={iconUrl(p.iconId)} alt={tr('账户图标')} />
|
||
) : p.kind === 'asset' ? (
|
||
<Landmark />
|
||
) : p.kind === 'debt' ? (
|
||
<HandCoins />
|
||
) : (
|
||
<Wallet />
|
||
)}
|
||
</span>
|
||
<ArrowUpRight size={18} />
|
||
</div>
|
||
<h3>{p.name}</h3>
|
||
{isPaidForMonth(p, repaymentMonth) && (
|
||
<span className="badge repayment-paid">{tr('本月已还款')}</span>
|
||
)}
|
||
{quickMode && page === 'account' && isBookedToday(p, businessDay) && (
|
||
<span className="badge repayment-paid">{tr('当天已记账')}</span>
|
||
)}
|
||
{assetQuickMode && page === 'asset' && p.included !== false && (
|
||
<span className="badge repayment-paid">{tr('计入总资产')}</span>
|
||
)}
|
||
{(p.included === false ||
|
||
(p.kind === 'asset' && user.includeIndependentAssets === false)) && (
|
||
<span className="badge">{tr('不计入总览')}</span>
|
||
)}
|
||
<p className="position-secondary">
|
||
{categoryLabel(p)} ·{' '}
|
||
{p.kind === 'debt'
|
||
? tr(p.side === 'asset' ? '借款（待收）' : '欠款（待还）')
|
||
: p.side === 'asset'
|
||
? tr('资产')
|
||
: tr(
|
||
p.kind === 'account' && p.amount.startsWith('-')
|
||
? '溢缴存款'
|
||
: '负债',
|
||
)}
|
||
{p.archived ? tr(' · 已归档') : ''}
|
||
</p>
|
||
<strong
|
||
className={
|
||
positionAmount(p).startsWith('-') ? 'danger-text' : 'income-text'
|
||
}
|
||
>
|
||
{p.valuationAvailable === false
|
||
? tr('待估值')
|
||
: money(positionAmount(p), p.currency)}
|
||
{p.metalGrams && <small> · {p.metalGrams} g</small>}
|
||
</strong>
|
||
<small
|
||
className="position-secondary"
|
||
hidden={p.currency === user.baseCurrency}
|
||
>
|
||
{tr('折合')}{' '}
|
||
{p.converted === null
|
||
? tr(p.valuationAvailable === false ? '待估值' : '缺少汇率')
|
||
: money(positionAmount(p, p.converted || '0'), user.baseCurrency)}
|
||
</small>
|
||
</button>
|
||
</Fragment>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<Empty
|
||
title={tr('还没有') + tr(labels[page])}
|
||
body={tr('添加真实数据后，这里将展示原币余额和历史变化。')}
|
||
action={newAction}
|
||
/>
|
||
)}
|
||
</section>
|
||
))}
|
||
{page === 'account' && quickMode && !selected && (
|
||
<aside className="quick-session-panel panel" aria-label={tr('快速记账操作')}>
|
||
{quickTransfer !== null && (
|
||
<section className="quick-transfer-card">
|
||
<div className="panel-title">
|
||
<h2>{tr('快速转账')}</h2>
|
||
<button
|
||
type="button"
|
||
className="icon"
|
||
aria-label={tr('关闭快速转账')}
|
||
disabled={busy}
|
||
onClick={() => setQuickTransfer(null)}
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
{!quickTransfer.sourceId ? (
|
||
<p>{tr('点击账户卡片选择转出账户')}</p>
|
||
) : !quickTransfer.targetId ? (
|
||
<>
|
||
<p>
|
||
{tr('转出账户：')}
|
||
{positions.find((p) => p.id === quickTransfer.sourceId)?.name}
|
||
</p>
|
||
<p>{tr('点击另一张账户卡片选择转入账户')}</p>
|
||
<button type="button" className="text" onClick={() => setQuickTransfer({})}>
|
||
{tr('重新选择')}
|
||
</button>
|
||
</>
|
||
) : (
|
||
positions.some((p) => p.id === quickTransfer.sourceId) &&
|
||
positions.some((p) => p.id === quickTransfer.targetId) && (
|
||
<QuickTransfer
|
||
key={quickTransfer.sourceId + quickTransfer.targetId}
|
||
source={positions.find((p) => p.id === quickTransfer.sourceId)!}
|
||
target={positions.find((p) => p.id === quickTransfer.targetId)!}
|
||
busy={busy}
|
||
changeSource={() => setQuickTransfer({})}
|
||
changeTarget={() => setQuickTransfer({ sourceId: quickTransfer.sourceId })}
|
||
submit={(data) =>
|
||
void act(async () => {
|
||
const result = await saveQuickMovement(data, tr('转账'));
|
||
setQuickTransfer(null);
|
||
return result;
|
||
}, tr('转账已完成'))
|
||
}
|
||
/>
|
||
)
|
||
)}
|
||
</section>
|
||
)}
|
||
<QuickJournal entries={quickEntries} busy={busy} undo={undoQuick} />
|
||
</aside>
|
||
)}
|
||
{page === 'history' && (
|
||
<>
|
||
<section className="panel">
|
||
<div className="actions">
|
||
<label>
|
||
{tr('开始')}
|
||
<input
|
||
type="date"
|
||
value={rangeFrom}
|
||
max={rangeTo}
|
||
onChange={(e) => setRangeFrom(e.target.value)}
|
||
/>
|
||
</label>
|
||
<label>
|
||
{tr('结束')}
|
||
<input
|
||
type="date"
|
||
value={rangeTo}
|
||
min={rangeFrom}
|
||
max={today()}
|
||
onChange={(e) => setRangeTo(e.target.value)}
|
||
/>
|
||
</label>
|
||
</div>
|
||
<h2>{tr('资金往来')}</h2>
|
||
{transfers.length ? (
|
||
<div className="transfer-list">
|
||
{transfers.map((t) => (
|
||
<article key={t.id}>
|
||
<div>
|
||
<strong>
|
||
{operationLabel(t.operation || 'transfer')} ·
|
||
<button
|
||
className="text"
|
||
onClick={() => {
|
||
setSelected(t.sourceId);
|
||
setPage(t.source.kind);
|
||
}}
|
||
>
|
||
{t.source.name}
|
||
</button>
|
||
{' ↔ '}
|
||
<button
|
||
className="text"
|
||
onClick={() => {
|
||
setSelected(t.targetId);
|
||
setPage(t.target.kind);
|
||
}}
|
||
>
|
||
{t.target.name}
|
||
</button>
|
||
</strong>
|
||
<small>{displayTime(t.date)}</small>
|
||
</div>
|
||
<p>
|
||
{money(t.amount, t.sourceCurrency)} →{' '}
|
||
{money(t.received, t.targetCurrency)} {tr('· 手续费')}
|
||
{money(t.fee, t.sourceCurrency)}
|
||
</p>
|
||
{t.notes && <p className="muted notes-display">{t.notes}</p>}
|
||
<div className="actions record-actions">
|
||
<button
|
||
className="text"
|
||
disabled={busy}
|
||
onClick={() => setModal({ kind: 'transfer-edit', transfer: t })}
|
||
>
|
||
{tr('修改')}
|
||
</button>
|
||
<button
|
||
className="text danger-text"
|
||
disabled={busy}
|
||
onClick={() => {
|
||
setError('');
|
||
setModal({ kind: 'delete-record', transfer: t });
|
||
}}
|
||
>
|
||
{tr('删除')}
|
||
</button>
|
||
</div>
|
||
</article>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<p className="muted">{tr('暂无转账记录。')}</p>
|
||
)}
|
||
{transferCursor && (
|
||
<button disabled={loading} onClick={() => void more('transfers')}>
|
||
{tr('加载更早转账')}
|
||
</button>
|
||
)}
|
||
<h2>{tr('全部金额变化')}</h2>
|
||
<p className="muted">
|
||
{tr('原币绝对余额记录；负债减少即还款。选择项目可查看详情并更正。')}
|
||
</p>
|
||
<HistoryTable
|
||
rows={historyRows}
|
||
correct={(h) => void correctHistory(h)}
|
||
remove={deleteHistory}
|
||
busy={busy}
|
||
open={(id) => {
|
||
setSelected(id);
|
||
setPage(historyRows.find((h) => h.positionId === id)?.kind || 'account');
|
||
}}
|
||
/>
|
||
{historyCursor && (
|
||
<button disabled={loading} onClick={() => void more('history')}>
|
||
{tr('加载更早记录')}
|
||
</button>
|
||
)}
|
||
</section>
|
||
</>
|
||
)}
|
||
{page === 'schedules' && (
|
||
<section className="panel">
|
||
<SchedulePanel
|
||
accounts={positions.filter((p) => p.kind === 'account' && !p.archived)}
|
||
refresh={() => load(false, true)}
|
||
/>
|
||
</section>
|
||
)}
|
||
{page === 'calendar' && (
|
||
<Calendar revealed={!!user.revealed} refreshVersion={calendarRefresh} />
|
||
)}
|
||
{page === 'admin' && user.role === 'admin' && <AdminPanel user={user} report={report} />}
|
||
{page === 'settings' && (
|
||
<>
|
||
<nav className="settings-tabs" aria-label={tr('设置分类')}>
|
||
{Object.entries({
|
||
general: '常规设置',
|
||
agent: '连接 Agent',
|
||
display: '显示与菜单',
|
||
privacy: '登录与隐私',
|
||
security: '账号与密码',
|
||
icons: '图标库',
|
||
rates: '每日汇率',
|
||
backup: '备份与恢复',
|
||
clear: '清空本账号数据',
|
||
}).map(([key, label]) => (
|
||
<button
|
||
key={key}
|
||
type="button"
|
||
aria-current={settingsSection === key ? 'page' : undefined}
|
||
className={key === 'clear' ? 'danger-text' : undefined}
|
||
onClick={() => setSettingsSection(key)}
|
||
>
|
||
{tr(label)}
|
||
</button>
|
||
))}
|
||
</nav>
|
||
{settingsSection === 'icons' && (
|
||
<section className="panel">
|
||
<IconLibrary />
|
||
</section>
|
||
)}
|
||
{settingsSection === 'agent' && <AgentConnections changed={() => void load()} />}
|
||
{settingsSection === 'security' && (
|
||
<section className="panel">
|
||
<h2>{tr('账号与密码')}</h2>
|
||
<p className="muted">{tr('修改后其他登录会话将退出，当前会话保持登录。')}</p>
|
||
<form
|
||
key={user.username}
|
||
onSubmit={(e) => {
|
||
e.preventDefault();
|
||
const form = e.currentTarget,
|
||
f = new FormData(form);
|
||
const username = String(f.get('username')).trim(),
|
||
newPassword = String(f.get('newPassword'));
|
||
if (newPassword !== String(f.get('confirmPassword'))) {
|
||
setError(tr('两次输入的新密码不一致'));
|
||
return;
|
||
}
|
||
void act(async () => {
|
||
const result = await api('/auth/credentials', 'PATCH', {
|
||
currentPassword: f.get('currentPassword'),
|
||
...(username !== user.username ? { username } : {}),
|
||
...(newPassword ? { newPassword } : {}),
|
||
});
|
||
form.reset();
|
||
return result;
|
||
}, tr('账号与密码已更新'));
|
||
}}
|
||
>
|
||
<Field label={tr('账号')}>
|
||
<input
|
||
name="username"
|
||
autoComplete="username"
|
||
required
|
||
minLength={3}
|
||
maxLength={64}
|
||
defaultValue={user.username}
|
||
/>
|
||
</Field>
|
||
<Field label={tr('当前密码')}>
|
||
<input
|
||
name="currentPassword"
|
||
type="password"
|
||
autoComplete="current-password"
|
||
required
|
||
minLength={10}
|
||
maxLength={72}
|
||
/>
|
||
</Field>
|
||
<Field label={tr('新密码（不修改请留空）')}>
|
||
<input
|
||
name="newPassword"
|
||
type="password"
|
||
autoComplete="new-password"
|
||
minLength={10}
|
||
maxLength={72}
|
||
/>
|
||
</Field>
|
||
<Field label={tr('确认新密码')}>
|
||
<input
|
||
name="confirmPassword"
|
||
type="password"
|
||
autoComplete="new-password"
|
||
minLength={10}
|
||
maxLength={72}
|
||
/>
|
||
</Field>
|
||
<button className="primary" disabled={busy}>
|
||
{tr('保存修改')}
|
||
</button>
|
||
</form>
|
||
</section>
|
||
)}
|
||
<div className="settings-grid">
|
||
<section className="panel" hidden={settingsSection !== 'general'}>
|
||
<div className="panel-title">
|
||
<h2>{tr('常规设置')}</h2>
|
||
<button className="text" disabled={busy} onClick={() => void logout()}>
|
||
<LogOut size={16} />
|
||
{tr('退出登录')}
|
||
</button>
|
||
</div>
|
||
<p className="muted">
|
||
{tr('账号：')}
|
||
{user.username}
|
||
{tr('。切换本位币会重新换算整个历史，原币数据保留。')}
|
||
</p>
|
||
<form
|
||
onSubmit={(e) => {
|
||
e.preventDefault();
|
||
const f = new FormData(e.currentTarget);
|
||
void act(
|
||
() => api('/settings', 'PATCH', { baseCurrency: f.get('baseCurrency') }),
|
||
tr('设置已保存'),
|
||
);
|
||
}}
|
||
>
|
||
<Field label={tr('本位币')}>
|
||
<select
|
||
name="baseCurrency"
|
||
defaultValue={user.baseCurrency}
|
||
key={user.baseCurrency}
|
||
>
|
||
{currencies.map((c) => (
|
||
<option key={c}>{c}</option>
|
||
))}
|
||
</select>
|
||
</Field>
|
||
<button className="primary" disabled={busy}>
|
||
{tr('保存设置')}
|
||
</button>
|
||
</form>
|
||
</section>
|
||
<section className="panel" hidden={settingsSection !== 'display'}>
|
||
<h2>{tr('显示与菜单')}</h2>
|
||
<form
|
||
onSubmit={(e) => {
|
||
e.preventDefault();
|
||
const f = new FormData(e.currentTarget);
|
||
void act(
|
||
() =>
|
||
api('/settings', 'PATCH', {
|
||
hiddenMenus: [
|
||
'overview',
|
||
'account',
|
||
'asset',
|
||
'debt',
|
||
'history',
|
||
'calendar',
|
||
'schedules',
|
||
].filter((key) => !f.has('menu_' + key)),
|
||
showNotes: f.has('showNotes'),
|
||
includeIndependentAssets: f.has('includeIndependentAssets'),
|
||
overviewCards: allOverviewCards.filter((key) => f.has('card_' + key)),
|
||
}),
|
||
tr('设置已保存'),
|
||
);
|
||
}}
|
||
>
|
||
<label className="switch-row">
|
||
<span>{tr('独立资产计入总览')}</span>
|
||
<input
|
||
type="checkbox"
|
||
role="switch"
|
||
name="includeIndependentAssets"
|
||
defaultChecked={user.includeIndependentAssets !== false}
|
||
key={String(user.includeIndependentAssets)}
|
||
/>
|
||
</label>
|
||
<p className="muted">
|
||
{tr('关闭后，独立资产不参与总额和净资产轨迹，资料与历史仍保留。')}
|
||
</p>
|
||
<h3>{tr('导航菜单')}</h3>
|
||
<p className="muted">
|
||
{tr('选择需要显示的菜单项。设置入口始终保留，隐藏仅影响导航，不删除数据。')}
|
||
</p>
|
||
<div className="menu-preferences">
|
||
{[
|
||
'overview',
|
||
'account',
|
||
'asset',
|
||
'debt',
|
||
'history',
|
||
'calendar',
|
||
'schedules',
|
||
].map((key) => (
|
||
<label key={key} className="switch-row">
|
||
<span>{tr(labels[key])}</span>
|
||
<input
|
||
type="checkbox"
|
||
role="switch"
|
||
aria-label={tr(labels[key]) + tr('显示')}
|
||
name={'menu_' + key}
|
||
key={key + String(user.hiddenMenus)}
|
||
defaultChecked={!(user.hiddenMenus || []).includes(key)}
|
||
/>
|
||
<span className="switch-state" aria-hidden="true">
|
||
{tr('显示')}
|
||
</span>
|
||
</label>
|
||
))}
|
||
</div>
|
||
<label className="switch-row">
|
||
<span>{tr('显示备注')}</span>
|
||
<input
|
||
type="checkbox"
|
||
role="switch"
|
||
name="showNotes"
|
||
aria-label={tr('显示备注')}
|
||
key={String(user.showNotes)}
|
||
defaultChecked={user.showNotes !== false}
|
||
/>
|
||
<span className="switch-state" aria-hidden="true">
|
||
{tr('显示')}
|
||
</span>
|
||
</label>
|
||
<p className="muted">
|
||
{tr('关闭后隐藏列表、详情及编辑表单中的备注，已有备注仍会保留在备份中。')}
|
||
</p>
|
||
|
||
<h3>{tr('总览显示卡片')}</h3>
|
||
<p className="muted">
|
||
{tr('选择资产总览需要显示的卡片，数据和记录仍会保留。')}
|
||
</p>
|
||
<div className="menu-preferences">
|
||
{allOverviewCards.map((key) => (
|
||
<label className="switch-row" key={key}>
|
||
<span>{tr(overviewCardLabels[key])}</span>
|
||
<input
|
||
name={'card_' + key}
|
||
type="checkbox"
|
||
role="switch"
|
||
aria-label={tr(overviewCardLabels[key]) + tr('显示')}
|
||
key={key + String(user.overviewCards)}
|
||
defaultChecked={(user.overviewCards ?? allOverviewCards).includes(key)}
|
||
/>
|
||
<span className="switch-state" aria-hidden="true">
|
||
{tr('显示')}
|
||
</span>
|
||
</label>
|
||
))}
|
||
</div>
|
||
<button className="primary" disabled={busy}>
|
||
{tr('保存设置')}
|
||
</button>
|
||
</form>
|
||
</section>
|
||
<section className="panel" hidden={settingsSection !== 'privacy'}>
|
||
<h2>{tr('登录与隐私')}</h2>
|
||
<form
|
||
onSubmit={(e) => {
|
||
e.preventDefault();
|
||
const f = new FormData(e.currentTarget);
|
||
void act(
|
||
() =>
|
||
api('/settings', 'PATCH', {
|
||
sessionHours: Number(f.get('sessionHours')),
|
||
idleMinutes: Number(f.get('idleMinutes')),
|
||
requireHiddenPassword: f.has('requireHiddenPassword'),
|
||
}),
|
||
tr('设置已保存'),
|
||
);
|
||
}}
|
||
>
|
||
<Field label={tr('登录有效期（小时）')}>
|
||
<input
|
||
name="sessionHours"
|
||
type="number"
|
||
min="1"
|
||
max="720"
|
||
step="1"
|
||
required
|
||
defaultValue={user.sessionHours ?? 168}
|
||
key={user.sessionHours}
|
||
/>
|
||
</Field>
|
||
<p className="muted">
|
||
{tr(
|
||
'范围 1 小时至 30 天（720 小时）。保存后当前登录重新计时，其他会话沿用原到期时间；后续登录使用新设置。',
|
||
)}
|
||
</p>
|
||
{user.sessionExpiresAt && (
|
||
<p className="muted">
|
||
{tr('当前会话到期：')}
|
||
{new Date(user.sessionExpiresAt).toLocaleString(locale, {
|
||
timeZone: 'Asia/Hong_Kong',
|
||
})}
|
||
</p>
|
||
)}
|
||
<Field label={tr('无操作自动退出（分钟）')}>
|
||
<select
|
||
name="idleMinutes"
|
||
key={user.idleMinutes}
|
||
defaultValue={user.idleMinutes}
|
||
>
|
||
{[...new Set([0, 5, 15, 30, 60, 120, 1440, user.idleMinutes])]
|
||
.sort((a, b) => a - b)
|
||
.map((n) => (
|
||
<option key={n} value={n}>
|
||
{n === 0 ? tr('关闭自动退出') : n + tr(' 分钟')}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</Field>
|
||
<p className="muted">
|
||
{tr(
|
||
'0 为关闭；最长 1440 分钟。到时退出登录并清除页面数据，浏览器标签页保留。',
|
||
)}
|
||
</p>
|
||
|
||
<label className="switch-row">
|
||
<span>{tr('查看隐藏资产需要密码')}</span>
|
||
<input
|
||
name="requireHiddenPassword"
|
||
type="checkbox"
|
||
role="switch"
|
||
aria-label={tr('查看隐藏资产需要密码')}
|
||
key={String(user.requireHiddenPassword)}
|
||
defaultChecked={user.requireHiddenPassword !== false}
|
||
/>
|
||
</label>
|
||
<p className="muted">
|
||
{tr(
|
||
'关闭后，已登录账号可直接显示隐藏资产。每次显示持续 5 分钟，也可手动锁定；保存此设置会锁定所有会话的隐藏资产。',
|
||
)}
|
||
</p>
|
||
<button className="primary" disabled={busy}>
|
||
{tr('保存设置')}
|
||
</button>
|
||
</form>
|
||
</section>
|
||
<section className="panel" hidden={settingsSection !== 'rates'}>
|
||
<h2>{tr('每日汇率')}</h2>
|
||
{fxStatus && (
|
||
<p className="muted" role="status">
|
||
{tr(fxStatus.message)}
|
||
{fxStatus.attemptedAt
|
||
? ' · ' +
|
||
new Date(fxStatus.attemptedAt).toLocaleString(locale, {
|
||
timeZone: 'Asia/Hong_Kong',
|
||
})
|
||
: ''}
|
||
</p>
|
||
)}
|
||
<p className="muted">
|
||
{tr(
|
||
'服务器每小时检查当日是否已尝试更新。外部请求固定下载公共汇率表，不发送个人数据。失败保留已有汇率，可稍后重试。',
|
||
)}
|
||
</p>
|
||
<button
|
||
className="secondary"
|
||
disabled={busy}
|
||
onClick={() =>
|
||
void act(
|
||
() => api('/rates/refresh', 'POST'),
|
||
tr('汇率已更新至数据源最新可用日期'),
|
||
)
|
||
}
|
||
>
|
||
<RefreshCw size={16} />
|
||
{tr('立即更新')}
|
||
</button>
|
||
<p className="muted">
|
||
{tr('公共参考汇率可能与银行成交价不同；休市日日期可能滞后。')}
|
||
</p>
|
||
</section>
|
||
</div>
|
||
<section className="panel" hidden={settingsSection !== 'rates'}>
|
||
<h2>{tr('已保存汇率')}</h2>
|
||
{rates.length ? (
|
||
<div className="table-wrap">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>{tr('原币 → 本位币')}</th>
|
||
<th>{tr('汇率')}</th>
|
||
<th>{tr('日期')}</th>
|
||
<th>{tr('来源')}</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{rates.slice(0, 100).map((r) => (
|
||
<tr key={r.currency + r.baseCurrency + r.date}>
|
||
<td>
|
||
{r.currency} → {r.baseCurrency}
|
||
</td>
|
||
<td>{r.rate}</td>
|
||
<td>{r.date.slice(0, 10)}</td>
|
||
<td>{r.source === 'manual' ? tr('历史导入') : 'Frankfurter'}</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
) : (
|
||
<Empty
|
||
title={tr('没有保存的外币汇率')}
|
||
body={tr('添加外币项目后更新并保存自动汇率。')}
|
||
/>
|
||
)}
|
||
</section>
|
||
{settingsSection === 'rates' && <MetalPanel refresh={() => load(false, true)} />}
|
||
<section className="panel" hidden={settingsSection !== 'clear'}>
|
||
<h2 className="danger-text">{tr('清空本账号数据')}</h2>
|
||
<p className="muted">
|
||
{tr(
|
||
'清除本账号全部账户、资产、债务、历史、私有图标和汇率（包括隐藏资产）；保留登录账号、个人设置和已发布的共享图标。请先下载备份并确认文件已保存。',
|
||
)}
|
||
</p>
|
||
{clearStep === 0 ? (
|
||
<button
|
||
className="secondary"
|
||
disabled={busy}
|
||
onClick={() => void downloadBackup(true)}
|
||
>
|
||
<Download size={16} />
|
||
{tr('第一步：下载备份')}
|
||
</button>
|
||
) : clearStep === 1 ? (
|
||
<button
|
||
className="secondary"
|
||
disabled={busy}
|
||
onClick={async () => {
|
||
try {
|
||
const s = await api<{ ready: boolean }>('/backup/clear-status');
|
||
if (!s.ready) throw new Error(tr('备份尚未完成，请重新下载'));
|
||
setClearStep(2);
|
||
} catch (e) {
|
||
report(e);
|
||
}
|
||
}}
|
||
>
|
||
{tr('备份已保存，进入下一步')}
|
||
</button>
|
||
) : (
|
||
<form
|
||
onSubmit={(e) => {
|
||
e.preventDefault();
|
||
if (new FormData(e.currentTarget).get('confirmation') === tr('确定清空'))
|
||
setClearConfirmation(1);
|
||
}}
|
||
>
|
||
<Field label={tr('输入“确定清空”以确认')}>
|
||
<input
|
||
name="confirmation"
|
||
required
|
||
pattern={tr('确定清空')}
|
||
autoComplete="off"
|
||
/>
|
||
</Field>
|
||
<button className="danger" disabled={busy}>
|
||
{tr('清空本账号数据')}
|
||
</button>
|
||
</form>
|
||
)}
|
||
{clearStep > 0 && (
|
||
<button className="text" onClick={() => setClearStep(0)}>
|
||
{tr('取消清空 / 重新下载')}
|
||
</button>
|
||
)}
|
||
</section>
|
||
<section className="panel" hidden={settingsSection !== 'backup'}>
|
||
<h2>{tr('数据备份与恢复')}</h2>
|
||
<p className="muted">
|
||
{tr(
|
||
'ZIP 内分文件保存可读 JSON，包括全部账户、资产、债务、历史、关联、币种、设置、汇率、图标及配对转账，不限制记录条数；不包含任何认证凭据。备份含个人财务信息，请妥善保管。',
|
||
)}
|
||
</p>
|
||
<div className="actions">
|
||
<button
|
||
className="secondary"
|
||
disabled={busy}
|
||
onClick={() => void downloadBackup()}
|
||
>
|
||
<Download size={16} />
|
||
{tr('下载我的数据备份')}
|
||
</button>{' '}
|
||
<label className="secondary file-button">
|
||
<Upload size={16} />
|
||
{tr('选择备份并验证')}
|
||
<input
|
||
type="file"
|
||
accept=".zip,application/zip"
|
||
disabled={busy}
|
||
onChange={async (e) => {
|
||
setBackup(null);
|
||
setPreview(null);
|
||
setError('');
|
||
const file = e.target.files?.[0];
|
||
if (!file) return;
|
||
const uploadSession = sessionGeneration.current;
|
||
setBusy(true);
|
||
try {
|
||
if (file.size > 512 * 1024 * 1024)
|
||
throw new Error(tr('ZIP 文件不能超过 512 MB（不限制记录条数）'));
|
||
const form = new FormData();
|
||
form.append('file', file);
|
||
const response = await fetch('/api/backup/upload', {
|
||
method: 'POST',
|
||
body: form,
|
||
credentials: 'same-origin',
|
||
});
|
||
const result = await response.json();
|
||
if (!response.ok)
|
||
throw new ApiError(
|
||
result.message || tr('ZIP 验证失败'),
|
||
response.status,
|
||
);
|
||
if (uploadSession !== sessionGeneration.current) return;
|
||
setBackup(result.token);
|
||
setPreview(result);
|
||
} catch (err) {
|
||
if (uploadSession === sessionGeneration.current) report(err);
|
||
} finally {
|
||
setBusy(false);
|
||
e.target.value = '';
|
||
}
|
||
}}
|
||
/>
|
||
</label>
|
||
</div>
|
||
{preview && (
|
||
<div className="import-preview">
|
||
<h3>{tr('导入预览')}</h3>
|
||
<p>
|
||
{preview.positions} {tr('个项目 ·')}
|
||
{preview.revisions} {tr('条历史 ·')}
|
||
{preview.rates} {tr('条汇率')}
|
||
</p>
|
||
<p>
|
||
{tr('备份本位币')}
|
||
{preview.baseCurrency} {tr('/ 当前本位币')}
|
||
{preview.currentBaseCurrency}
|
||
</p>
|
||
<p>{tr(preview.message)}</p>
|
||
<button
|
||
className="primary"
|
||
disabled={busy}
|
||
onClick={() =>
|
||
void act(async () => {
|
||
await api('/backup/import-file', 'POST', {
|
||
confirmed: true,
|
||
token: backup,
|
||
});
|
||
setPreview(null);
|
||
setBackup(null);
|
||
}, tr('备份已完整导入'))
|
||
}
|
||
>
|
||
{tr('确认追加导入')}
|
||
</button>
|
||
<button
|
||
className="text"
|
||
onClick={() => {
|
||
setPreview(null);
|
||
setBackup(null);
|
||
}}
|
||
>
|
||
{tr('取消')}
|
||
</button>
|
||
</div>
|
||
)}
|
||
</section>
|
||
</>
|
||
)}
|
||
<footer>{tr('WorthPath · 记录你的积累，理解你的财富')}</footer>
|
||
</div>
|
||
</main>
|
||
{clearConfirmation > 0 && (
|
||
<Modal
|
||
key={clearConfirmation}
|
||
title={
|
||
clearConfirmation === 1
|
||
? tr('第一次确认：清空本账号数据')
|
||
: tr('第二次确认：清空本账号数据')
|
||
}
|
||
close={() => {
|
||
if (!busy) setClearConfirmation(0);
|
||
}}
|
||
>
|
||
<p className="danger-text">
|
||
{clearConfirmation === 1
|
||
? tr('将清空本账号全部财务数据及私有图标，请确认备份已保存。')
|
||
: tr('这是最后一次确认。清空后只能通过备份恢复，其他用户的数据不受影响。')}
|
||
</p>
|
||
<p className="muted">{tr('登录账号、个人设置和已发布的共享图标会保留。')}</p>
|
||
<div className="modal-actions clear-confirm-actions">
|
||
{clearConfirmation === 1 ? (
|
||
<>
|
||
<button
|
||
autoFocus
|
||
className="secondary"
|
||
disabled={busy}
|
||
onClick={() => setClearConfirmation(0)}
|
||
>
|
||
{tr('取消清空')}
|
||
</button>
|
||
<button className="danger" disabled={busy} onClick={() => setClearConfirmation(2)}>
|
||
{tr('继续清空')}
|
||
</button>
|
||
</>
|
||
) : (
|
||
<>
|
||
<button
|
||
className="danger"
|
||
disabled={busy}
|
||
onClick={() =>
|
||
void act(async () => {
|
||
await api('/backup/clear', 'POST', { confirmation: tr('确定清空') });
|
||
setClearConfirmation(0);
|
||
setClearStep(0);
|
||
setSelected(null);
|
||
setBackup(null);
|
||
setPreview(null);
|
||
}, tr('本账号数据已清空'))
|
||
}
|
||
>
|
||
{busy ? tr('正在清空…') : tr('最终确认清空')}
|
||
</button>
|
||
<button
|
||
autoFocus
|
||
className="secondary"
|
||
disabled={busy}
|
||
onClick={() => setClearConfirmation(0)}
|
||
>
|
||
{tr('取消清空')}
|
||
</button>
|
||
</>
|
||
)}
|
||
</div>
|
||
</Modal>
|
||
)}
|
||
{modal?.kind === 'group-order' && modal.groups && (
|
||
<Modal title={tr('分组排序')} close={() => !busy && setModal(null)}>
|
||
<GroupOrderList
|
||
groups={modal.groups}
|
||
busy={busy}
|
||
onChange={(groups) =>
|
||
setModal((current) =>
|
||
current?.kind === 'group-order' ? { ...current, groups } : current,
|
||
)
|
||
}
|
||
/>
|
||
<div className="modal-actions">
|
||
<button className="secondary" disabled={busy} onClick={() => setModal(null)}>
|
||
{tr('取消')}
|
||
</button>
|
||
<button
|
||
className="primary"
|
||
disabled={busy}
|
||
onClick={() =>
|
||
void act(
|
||
() =>
|
||
api('/settings', 'PATCH', {
|
||
accountGroupOrder: mergeGroupOrder(
|
||
modal.groups!,
|
||
user.accountGroupOrder || [],
|
||
),
|
||
}),
|
||
tr('分组顺序已保存'),
|
||
)
|
||
}
|
||
>
|
||
{tr(busy ? '正在保存…' : '保存')}
|
||
</button>
|
||
</div>
|
||
</Modal>
|
||
)}
|
||
{modal?.kind === 'delete-record' && (
|
||
<Modal
|
||
title={tr('删除记录')}
|
||
close={() => {
|
||
if (!busy) setModal(null);
|
||
}}
|
||
>
|
||
<p>
|
||
{modal.h
|
||
? modal.h.name
|
||
: modal.transfer?.source.name + ' ↔ ' + modal.transfer?.target.name}
|
||
</p>
|
||
<p className="muted">{displayTime(modal.h?.time || modal.transfer!.date)}</p>
|
||
<p>
|
||
{tr(
|
||
modal.transfer ||
|
||
modal.h?.reason.startsWith('transfer_') ||
|
||
modal.h?.reason.startsWith('loan_')
|
||
? '这笔资金往来的双方记录将一起删除，并重算后续余额。'
|
||
: '这条记录将被删除，并重算后续余额。',
|
||
)}
|
||
</p>
|
||
<p className="danger-text">{tr('删除后无法撤销，请确认已保存所需备份。')}</p>
|
||
|
||
<div className="modal-actions clear-confirm-actions">
|
||
<button autoFocus disabled={busy} onClick={() => setModal(null)}>
|
||
{tr('取消')}
|
||
</button>
|
||
<button
|
||
className="danger"
|
||
disabled={busy}
|
||
onClick={() =>
|
||
void act(
|
||
() =>
|
||
api(
|
||
modal.h
|
||
? '/positions/' + modal.h.positionId + '/revisions/' + modal.h.id
|
||
: '/transfers/' + modal.transfer!.id,
|
||
'DELETE',
|
||
),
|
||
tr('记录已删除，余额和日历已更新'),
|
||
)
|
||
}
|
||
>
|
||
{busy ? tr('正在处理…') : tr('确认删除')}
|
||
</button>
|
||
</div>
|
||
</Modal>
|
||
)}
|
||
{modal?.kind === 'transfer-edit' && modal.transfer && (
|
||
<Modal
|
||
title={tr('修改资金往来')}
|
||
close={() => {
|
||
if (!busy) setModal(null);
|
||
}}
|
||
>
|
||
<form
|
||
onSubmit={(e) => {
|
||
e.preventDefault();
|
||
const t = modal.transfer!,
|
||
f = Object.fromEntries(new FormData(e.currentTarget));
|
||
void act(
|
||
() =>
|
||
api('/transfers/' + t.id, 'PUT', {
|
||
...f,
|
||
sourceId: t.sourceId,
|
||
targetId: t.targetId,
|
||
operation: t.operation,
|
||
}),
|
||
tr('记录已修改，余额和日历已更新'),
|
||
);
|
||
}}
|
||
>
|
||
<p>
|
||
{modal.transfer.source.name} ↔ {modal.transfer.target.name}
|
||
</p>
|
||
<Field label={tr('转出金额（') + modal.transfer.sourceCurrency + '）'}>
|
||
<input
|
||
name="amount"
|
||
required
|
||
inputMode="decimal"
|
||
defaultValue={modal.transfer.amount}
|
||
/>
|
||
</Field>
|
||
<Field label={tr('实际到账（') + modal.transfer.targetCurrency + '）'}>
|
||
<input
|
||
name="received"
|
||
required
|
||
inputMode="decimal"
|
||
defaultValue={modal.transfer.received}
|
||
/>
|
||
</Field>
|
||
<Field label={tr('手续费 / 优惠（') + modal.transfer.sourceCurrency + '）'}>
|
||
<input name="fee" required inputMode="decimal" defaultValue={modal.transfer.fee} />
|
||
</Field>
|
||
<Field label={tr('记录时间（UTC+8）')}>
|
||
<input
|
||
name="date"
|
||
type="datetime-local"
|
||
required
|
||
max={nowMinute()}
|
||
defaultValue={modal.transfer.date}
|
||
/>
|
||
</Field>
|
||
<Field label={tr('备注')}>
|
||
<textarea name="notes" maxLength={2000} defaultValue={modal.transfer.notes} />
|
||
</Field>
|
||
|
||
<button className="primary" disabled={busy}>
|
||
{tr(busy ? '正在保存…' : '保存')}
|
||
</button>
|
||
</form>
|
||
</Modal>
|
||
)}
|
||
{modal && !['transfer-edit', 'delete-record', 'group-order'].includes(modal.kind) && (
|
||
<Modal
|
||
title={
|
||
modal.kind === 'debt-payment'
|
||
? modal.p?.kind === 'debt'
|
||
? operationLabel(modal.p.side === 'asset' ? 'collect' : 'repay')
|
||
: tr('收款 / 还款')
|
||
: modal.kind === 'quick-repayment'
|
||
? tr('账户还款')
|
||
: modal.kind === 'delete-position'
|
||
? '删除' + deletionLabel(modal.p!)
|
||
: modal.kind === 'transfer'
|
||
? tr('转账')
|
||
: modal.kind === 'reveal'
|
||
? tr('验证密码以显示隐藏资产')
|
||
: modal.kind === 'edit'
|
||
? tr('编辑项目')
|
||
: modal.kind === 'revision'
|
||
? tr('更新余额 / 估值')
|
||
: modal.kind === 'correction'
|
||
? tr('更正历史记录')
|
||
: modal.kind === 'links'
|
||
? tr('管理债务关联')
|
||
: tr('新增') + tr(labels[modal.kind])
|
||
}
|
||
close={() => {
|
||
if (!busy) setModal(null);
|
||
}}
|
||
>
|
||
{modal.kind === 'delete-position' && modal.p ? (
|
||
<PositionDeletion
|
||
position={modal.p}
|
||
busy={busy}
|
||
cancel={() => setModal(null)}
|
||
remove={(confirmation) =>
|
||
void act(
|
||
async () => {
|
||
await api('/positions/' + modal.p!.id, 'DELETE', { confirmation });
|
||
setSelected(null);
|
||
},
|
||
deletionLabel(modal.p!) + '已删除',
|
||
)
|
||
}
|
||
/>
|
||
) : modal.kind === 'quick-repayment' && modal.p ? (
|
||
<QuickRepayment
|
||
target={modal.p}
|
||
accounts={positions}
|
||
busy={busy}
|
||
submit={(data) =>
|
||
void act(
|
||
() => saveQuickMovement(data, tr('还款')),
|
||
tr('还款已保存，双方余额已更新'),
|
||
)
|
||
}
|
||
/>
|
||
) : ['transfer', 'debt-payment'].includes(modal.kind) ? (
|
||
movementLoading ? (
|
||
<p>{tr('正在刷新数据…')}</p>
|
||
) : modal.kind === 'transfer' ? (
|
||
<TransferForm
|
||
accounts={movementPositions.filter((p) => p.kind === 'account' && !p.archived)}
|
||
initialSourceId={modal.p?.kind === 'account' ? modal.p.id : undefined}
|
||
busy={busy}
|
||
submit={(v) =>
|
||
void act(() => api('/transfers', 'POST', v), tr('转账已保存，双方余额已更新'))
|
||
}
|
||
/>
|
||
) : (
|
||
<DebtPaymentForm
|
||
accounts={movementPositions.filter(
|
||
(p) => p.kind === 'account' && p.side === 'asset' && !p.archived,
|
||
)}
|
||
debts={movementPositions.filter((p) => p.kind === 'debt' && !p.archived)}
|
||
initialAccount={
|
||
modal.p?.kind === 'account'
|
||
? modal.p.id
|
||
: modal.p?.outgoing.find((link) =>
|
||
movementPositions.some(
|
||
(p) =>
|
||
p.id === link.targetId &&
|
||
p.kind === 'account' &&
|
||
p.side === 'asset' &&
|
||
!p.archived,
|
||
),
|
||
)?.targetId
|
||
}
|
||
initialDebt={modal.p?.kind === 'debt' ? modal.p.id : undefined}
|
||
initialOperation={modal.operation}
|
||
busy={busy}
|
||
submit={(v) =>
|
||
void act(() => api('/transfers', 'POST', v), tr('账户与债务已同步更新'))
|
||
}
|
||
/>
|
||
)
|
||
) : (
|
||
<form
|
||
onSubmit={(e) => {
|
||
e.preventDefault();
|
||
const f = new FormData(e.currentTarget),
|
||
v = Object.fromEntries(f.entries()),
|
||
kind = modal.kind,
|
||
mp = modal.p;
|
||
if (kind === 'reveal') {
|
||
void act(
|
||
() => api('/auth/reveal', 'POST', { password: f.get('password') }),
|
||
tr('隐藏资产已解锁 5 分钟'),
|
||
);
|
||
} else if (kind === 'links') {
|
||
void act(
|
||
() =>
|
||
api('/positions/' + mp!.id + '/links', 'PUT', {
|
||
targetIds: f.getAll('targetIds'),
|
||
}),
|
||
tr('关联已更新'),
|
||
);
|
||
} else if (kind === 'revision' || kind === 'correction') {
|
||
void act(
|
||
() =>
|
||
modal.h
|
||
? api('/positions/' + mp!.id + '/revisions/' + modal.h.id, 'PUT', {
|
||
...v,
|
||
amount: accountInputAmount(mp!, String(v.amount)),
|
||
})
|
||
: saveQuickBalance(
|
||
mp!,
|
||
{ ...v, amount: accountInputAmount(mp!, String(v.amount)) },
|
||
!!modal.quick,
|
||
),
|
||
tr('金额历史已保存，总览已重新计算'),
|
||
);
|
||
} else if (kind === 'edit') {
|
||
void act(
|
||
() =>
|
||
api('/positions/' + mp!.id, 'PATCH', {
|
||
...v,
|
||
...(f.has('iconId') ? { iconId: f.get('iconId') || null } : {}),
|
||
archived: mp!.archived,
|
||
hidden: f.get('hidden') === 'on',
|
||
included: f.get('included') === 'on',
|
||
}),
|
||
tr('项目资料已保存'),
|
||
);
|
||
} else if (kind === 'asset' && v.category === 'gold') {
|
||
void act(
|
||
() =>
|
||
api('/metals/holdings', 'POST', {
|
||
name: v.name,
|
||
currency: v.currency,
|
||
notes: v.notes,
|
||
date: v.date,
|
||
metalType: v.metalType,
|
||
metalGrams: v.metalGrams,
|
||
metalCostPerGram: v.metalCostPerGram || null,
|
||
autoValuation: true,
|
||
hidden: f.has('hidden'),
|
||
included: f.has('included'),
|
||
}),
|
||
tr('项目已添加'),
|
||
);
|
||
} else {
|
||
const category = String(v.category),
|
||
side =
|
||
kind === 'account' && ['credit_card', 'loan'].includes(category)
|
||
? 'liability'
|
||
: kind === 'debt'
|
||
? String(v.side)
|
||
: 'asset';
|
||
void act(
|
||
() =>
|
||
api('/positions', 'POST', {
|
||
...v,
|
||
...(f.has('iconId') ? { iconId: f.get('iconId') || null } : {}),
|
||
kind,
|
||
side,
|
||
amount: accountInputAmount({ kind, side }, String(v.amount)),
|
||
hidden: f.get('hidden') === 'on',
|
||
included: f.get('included') === 'on',
|
||
}),
|
||
tr('项目已添加'),
|
||
);
|
||
}
|
||
}}
|
||
>
|
||
{modal.kind === 'reveal' && (
|
||
<Field label={tr('登录密码')}>
|
||
<input
|
||
name="password"
|
||
type="password"
|
||
autoComplete="current-password"
|
||
required
|
||
maxLength={72}
|
||
/>
|
||
</Field>
|
||
)}
|
||
{['account', 'asset', 'debt', 'edit'].includes(modal.kind) && (
|
||
<>
|
||
<label className="check-line">
|
||
<input
|
||
name="included"
|
||
type="checkbox"
|
||
defaultChecked={modal.p?.included !== false}
|
||
/>
|
||
{tr('计入资产总览')}
|
||
</label>
|
||
<p className="muted">
|
||
{tr('取消后不参与资产、负债及净资产轨迹，仍可管理和转账。')}
|
||
</p>
|
||
<label className="check-line">
|
||
<input name="hidden" type="checkbox" defaultChecked={modal.p?.hidden} />
|
||
{tr('隐藏此项目（密码验证后可查看和编辑）')}
|
||
</label>
|
||
{(modal.kind === 'account' || modal.p?.kind === 'account') && (
|
||
<>
|
||
<IconPicker key={modal.p?.id || 'new-account'} initialId={modal.p?.iconId} />
|
||
<Field label={tr('账户分组')}>
|
||
<input
|
||
name="groupName"
|
||
maxLength={60}
|
||
defaultValue={modal.p?.groupName || ''}
|
||
list="account-groups"
|
||
placeholder={tr('例如：日常、消费、理财')}
|
||
/>
|
||
<datalist id="account-groups">
|
||
{groups.filter(Boolean).map((g) => (
|
||
<option key={g} value={g} />
|
||
))}
|
||
</datalist>
|
||
</Field>
|
||
</>
|
||
)}
|
||
<Field label={tr('名称')}>
|
||
<input
|
||
name="name"
|
||
defaultValue={modal.p?.name}
|
||
required
|
||
maxLength={100}
|
||
autoFocus
|
||
/>
|
||
</Field>
|
||
<Field label={tr('类别')}>
|
||
<select
|
||
name="category"
|
||
onChange={(e) => setNewAssetCategory(e.target.value)}
|
||
defaultValue={modal.p?.category || categories[modal.kind]?.[0][0]}
|
||
>
|
||
{categories[modal.p?.kind || modal.kind].map(([v, label]) => (
|
||
<option key={v} value={v}>
|
||
{tr(label)}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</Field>
|
||
{modal.kind === 'account' && (
|
||
<p className="muted">
|
||
{tr('信用卡、贷款账户：负数为欠款，正数为溢缴存款；其余账户按实际余额填写。')}
|
||
</p>
|
||
)}
|
||
</>
|
||
)}
|
||
{modal.kind === 'debt' && (
|
||
<>
|
||
<Field label={tr('债务方向')}>
|
||
<select name="side" defaultValue="liability">
|
||
<option value="liability">{tr('欠款（待还）')}</option>
|
||
<option value="asset">{tr('借款（待收）')}</option>
|
||
</select>
|
||
</Field>
|
||
<p className="muted">
|
||
{tr(
|
||
'已有债务填写剩余本金；新借入或借出可先填0，保存后通过账户联动操作记录资金。',
|
||
)}
|
||
</p>
|
||
</>
|
||
)}
|
||
{['account', 'asset', 'debt'].includes(modal.kind) && (
|
||
<Field label={tr('原币币种')}>
|
||
<select name="currency" defaultValue={user.baseCurrency}>
|
||
{currencies.map((c) => (
|
||
<option key={c}>{c}</option>
|
||
))}
|
||
</select>
|
||
</Field>
|
||
)}
|
||
{['account', 'asset', 'debt', 'revision', 'correction'].includes(modal.kind) &&
|
||
!(modal.kind === 'asset' && newAssetCategory === 'gold') && (
|
||
<Field
|
||
label={
|
||
tr(
|
||
modal.p?.kind === 'debt'
|
||
? '剩余本金'
|
||
: modal.p?.kind === 'asset'
|
||
? '当前估值'
|
||
: '当前余额',
|
||
) + (modal.p ? '（' + modal.p.currency + '）' : '')
|
||
}
|
||
>
|
||
<input
|
||
name="amount"
|
||
inputMode="decimal"
|
||
required
|
||
pattern={
|
||
modal.p?.kind === 'account' || modal.kind === 'account'
|
||
? '-?(0|[1-9][0-9]{0,15})(\\.[0-9]{1,8})?'
|
||
: '(0|[1-9][0-9]{0,15})(\\.[0-9]{1,8})?'
|
||
}
|
||
defaultValue={
|
||
modal.p
|
||
? accountInputAmount(modal.p, modal.h?.after || modal.p.amount)
|
||
: modal.kind === 'debt'
|
||
? '0'
|
||
: ''
|
||
}
|
||
placeholder="0.00"
|
||
/>
|
||
</Field>
|
||
)}
|
||
{modal.kind === 'asset' && newAssetCategory === 'gold' && (
|
||
<>
|
||
<Field label={tr('贵金属品种')}>
|
||
<select name="metalType">
|
||
<option value="gold">{tr('黄金')}</option>
|
||
<option value="silver">{tr('白银')}</option>
|
||
</select>
|
||
</Field>
|
||
<Field label={tr('重量（克）')}>
|
||
<input
|
||
name="metalGrams"
|
||
required
|
||
inputMode="decimal"
|
||
pattern="(0|[1-9][0-9]{0,15})([.][0-9]{1,8})?"
|
||
/>
|
||
</Field>
|
||
<Field label={tr('买入价（每克，选填）')}>
|
||
<input
|
||
name="metalCostPerGram"
|
||
inputMode="decimal"
|
||
pattern="(0|[1-9][0-9]{0,11})([.][0-9]{1,12})?"
|
||
/>
|
||
</Field>
|
||
<p className="muted">
|
||
{tr('按克数添加，参考价自动估值；缺少报价时显示待估值，不计为已知零价值。')}
|
||
</p>
|
||
</>
|
||
)}
|
||
{['account', 'asset', 'debt', 'revision', 'correction'].includes(modal.kind) && (
|
||
<Field label={tr('记录时间（UTC+8）')}>
|
||
<input
|
||
type={'datetime-local'}
|
||
name="date"
|
||
required
|
||
min={'1900-01-01T00:00'}
|
||
max={nowMinute()}
|
||
defaultValue={modal.h?.time || nowMinute()}
|
||
/>
|
||
</Field>
|
||
)}
|
||
{['revision', 'correction'].includes(modal.kind) &&
|
||
modal.p?.kind === 'account' &&
|
||
modal.p.side === 'liability' && (
|
||
<p className="muted">
|
||
{tr('负数表示欠款，正数表示溢缴存款；溢缴部分计入总资产。')}
|
||
</p>
|
||
)}
|
||
{modal.kind === 'revision' && modal.quick && modal.p?.side === 'liability' && (
|
||
<>
|
||
<div className="actions quick-repayment-actions">
|
||
{canQuickRepay(modal.p) && (
|
||
<button
|
||
type="button"
|
||
className="primary"
|
||
disabled={busy}
|
||
onClick={() =>
|
||
setModal({ kind: 'quick-repayment', p: modal.p, quick: true })
|
||
}
|
||
>
|
||
{tr('还款')}
|
||
</button>
|
||
)}
|
||
<button
|
||
type="button"
|
||
className="secondary"
|
||
disabled={busy}
|
||
onClick={() =>
|
||
void act(() => markQuickRepayment(modal.p!), tr('还款标记已保存'))
|
||
}
|
||
>
|
||
{tr(
|
||
isPaidForMonth(modal.p, repaymentMonth)
|
||
? '取消本月已还款'
|
||
: '标记本月已还款',
|
||
)}
|
||
</button>
|
||
</div>
|
||
<p className="muted">
|
||
{tr('还款会更新双方余额；月份标记只记录本月已处理，不改变金额。')}
|
||
</p>
|
||
</>
|
||
)}
|
||
{modal.kind === 'revision' && (
|
||
<>
|
||
<Field label={tr('变更原因')}>
|
||
<select
|
||
name="reason"
|
||
defaultValue={modal.p?.kind === 'asset' ? 'valuation' : 'balance'}
|
||
>
|
||
<option value="balance">{tr('余额更新')}</option>
|
||
<option value="valuation">{tr('估值更新')}</option>
|
||
{modal.p?.side === 'liability' && (
|
||
<option value="repayment">{tr('还款（填写还款后欠款）')}</option>
|
||
)}
|
||
</select>
|
||
</Field>
|
||
<p className="muted">
|
||
{tr(
|
||
'填写更新后的余额或剩余欠款，每次保存会新增历史。已有错误记录请在历史中更正。',
|
||
)}
|
||
</p>
|
||
</>
|
||
)}
|
||
{modal.kind === 'correction' && (
|
||
<p className="notice warning">
|
||
{tr('这将修改选中的历史金额并重算后续变化，请确认日期和余额。')}
|
||
</p>
|
||
)}
|
||
{modal.kind === 'links' ? (
|
||
<div className="link-options">
|
||
{linkOptions.length ? (
|
||
linkOptions.map((p) => (
|
||
<label key={p.id}>
|
||
<input
|
||
type="checkbox"
|
||
name="targetIds"
|
||
value={p.id}
|
||
defaultChecked={modal.p!.outgoing.some((l) => l.targetId === p.id)}
|
||
/>
|
||
{p.name} · {tr(labels[p.kind])}
|
||
</label>
|
||
))
|
||
) : (
|
||
<p>{tr('请先创建账户或独立资产。')}</p>
|
||
)}
|
||
</div>
|
||
) : (
|
||
modal.kind !== 'reveal' && (
|
||
<Field label={tr('备注')}>
|
||
<textarea
|
||
name="notes"
|
||
maxLength={2000}
|
||
rows={3}
|
||
defaultValue={modal.h?.notes || modal.p?.notes || ''}
|
||
/>
|
||
</Field>
|
||
)
|
||
)}
|
||
|
||
<div className="modal-actions">
|
||
<button
|
||
className="secondary"
|
||
type="button"
|
||
disabled={busy}
|
||
onClick={() => setModal(null)}
|
||
>
|
||
{tr('取消')}
|
||
</button>
|
||
<button className="primary" disabled={busy}>
|
||
{busy
|
||
? tr('正在保存…')
|
||
: modal.kind === 'correction'
|
||
? tr('确认更正')
|
||
: tr('保存')}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
)}
|
||
</Modal>
|
||
)}
|
||
{draftId && (
|
||
<AgentDrafts
|
||
initialId={draftId}
|
||
close={() => {
|
||
setDraftId(null);
|
||
const url = new URL(location.href);
|
||
url.searchParams.delete('agent_operation');
|
||
if (url.pathname === '/agent/operation') url.pathname = '/';
|
||
history.replaceState(null, '', url.pathname + url.search + url.hash);
|
||
}}
|
||
changed={() => void load()}
|
||
/>
|
||
)}
|
||
</div>,
|
||
);
|
||
}
|
||
function HistoryTable({
|
||
rows,
|
||
open,
|
||
correct,
|
||
remove,
|
||
busy = false,
|
||
}: {
|
||
rows: History[];
|
||
open?: (id: string) => void;
|
||
correct?: (h: History) => void;
|
||
remove?: (h: History) => void;
|
||
busy?: boolean;
|
||
}) {
|
||
return rows.length ? (
|
||
<div className="table-wrap">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>{tr('项目 / 日期')}</th>
|
||
<th>{tr('变更前')}</th>
|
||
<th>{tr('变更后')}</th>
|
||
<th>{tr('变化额')}</th>
|
||
<th className="notes-cell">{tr('备注')}</th>
|
||
{correct && <th>{tr('操作')}</th>}
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{rows.map((h) => (
|
||
<tr key={h.id}>
|
||
<td>
|
||
{open ? (
|
||
<button className="text" onClick={() => open(h.positionId)}>
|
||
{h.name}
|
||
</button>
|
||
) : (
|
||
h.name
|
||
)}
|
||
<small>
|
||
{displayTime(h.time)} ·{' '}
|
||
{
|
||
(
|
||
{
|
||
initial: tr('初始记录'),
|
||
scheduled_expense: tr('计划支出'),
|
||
balance: tr('余额更新'),
|
||
valuation: tr('估值更新'),
|
||
repayment: tr('还款'),
|
||
correction: tr('更正'),
|
||
transfer_out: tr('转账转出'),
|
||
transfer_in: tr('转账到账'),
|
||
loan_borrow: tr('借入到账'),
|
||
loan_lend: tr('借出付款'),
|
||
loan_collect: tr('收回借款'),
|
||
loan_repay: tr('偿还债务'),
|
||
} as Record<string, string>
|
||
)[h.reason]
|
||
}
|
||
</small>
|
||
</td>
|
||
<td
|
||
className={
|
||
positionAmount(h, h.before).startsWith('-') ? 'danger-text' : 'income-text'
|
||
}
|
||
>
|
||
{money(positionAmount(h, h.before), h.currency)}
|
||
</td>
|
||
<td
|
||
className={
|
||
positionAmount(h, h.after).startsWith('-') ? 'danger-text' : 'income-text'
|
||
}
|
||
>
|
||
{money(positionAmount(h, h.after), h.currency)}
|
||
</td>
|
||
<td
|
||
className={
|
||
positionAmount(h, h.delta).startsWith('-') ? 'danger-text' : 'income-text'
|
||
}
|
||
>
|
||
{money(positionAmount(h, h.delta), h.currency)}
|
||
</td>
|
||
<td className="notes-cell">{h.notes || '—'}</td>
|
||
{correct && (
|
||
<td className="record-actions">
|
||
<button className="text" disabled={busy} onClick={() => correct(h)}>
|
||
{tr(
|
||
h.reason.startsWith('transfer_') || h.reason.startsWith('loan_')
|
||
? '修改资金往来'
|
||
: '更正',
|
||
)}
|
||
</button>
|
||
{remove && (
|
||
<button className="text danger-text" disabled={busy} onClick={() => remove(h)}>
|
||
{tr('删除')}
|
||
</button>
|
||
)}
|
||
</td>
|
||
)}
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
) : (
|
||
<Empty title={tr('暂无变化记录')} body={tr('添加项目或更新金额后，历史会自动保存在这里。')} />
|
||
);
|
||
}
|