feat(ui): 引入 sonner 消息反馈系统,并在首页部署全局行情同步按钮

This commit is contained in:
kennethcheng 2026-04-28 15:46:43 +08:00
parent 58db0b82ee
commit 110e75f0a1
9 changed files with 109 additions and 17 deletions

View File

@ -1,17 +1,35 @@
完成根目录的 Next.js 初始化、基础依赖安装与环境变量配置。 # Omniledger 架构与开发记忆 (Memory)
## 基础设施与底层架构
- 完成根目录的 Next.js 初始化、基础依赖安装与环境变量配置。
- 完成基于单例模式的数据库连接配置,并设定 Drizzle 迁移工具。 - 完成基于单例模式的数据库连接配置,并设定 Drizzle 迁移工具。
- 修复网络连接,成功将 users 表推送至数据库。 - 修复网络连接,成功将 tables 推送至 PostgreSQL 数据库。
- 成功定義資產枚舉與 assets 表,支持跨資產標識。 - 统一规范 Git 全量提交机制 (`git add -A`),确立了严谨的代码版本控制防腐层。
- 完成核心 transactions 表的建立,並嚴格運用了 numeric(36,18) 的高精度配置。
- 完成高精度交易流水 (transactions) 的 Server Actions 开发,成功实现了字符串级别的高精度防腐层拦截。 ## 数据库设计 (Schema)
- 完成 shadcn/ui 初始化,集成 next-themes并拉取核心组件库。 - 成功定义资产枚举与 `assets` 表,支持跨资产标识。
- 完成 /dashboard 基础布局架构,接管根路由。 - 完成核心 `transactions` (交易流水) 表的建立,并严格运用了 `numeric(36,18)` 的高精度配置。
- 引入 Zod 和 Big.js完成资产表 (assets) 的 Server Actions 读写接口开发。 - `assets` 表完成多次业务演进:新增 `latestPrice` (支持现价追踪)、`exchange` (显式交易所绑定) 以及 `name` (中文名称解析) 字段。
- 完成 /dashboard/assets 页面,成功打通前后端资产录入数据流转。 - `exchange_rates` (汇率表) 已建立,支持联合主键与跨币种交叉汇率架构。
- 修复 /dashboard/transactions 404完成高精度流水录入与展示功能。
- 完成 UI 层的高精度数据格式化,实现不同资产类型的动态展示精度。 ## 核心业务与服务端逻辑 (Server Actions)
- 完成持仓聚合计算逻辑,并构建了 Dashboard 首页持仓卡片矩阵。 - 完成高精度交易流水与资产的 Server Actions 开发,成功实现字符串级别的高精度防腐层拦截(基于 Zod & Big.js
- 引入 recharts 图表引擎,完成 Dashboard 资产分布环形图的构建。 - 补全资产与流水的全栈增删改查 (CRUD) 操作,`createTransaction` 现已支持根据 `exchange` 自动判定并锁定 `txCurrency`
- 汇率表已建立,支持跨币种(如 BTC->USD的交叉汇率架构。 - **估值与 P&L 引擎:** 完成底层估值引擎升级,打通交叉汇率换算逻辑;实现原币种 (Native) 与本位币 (CNY Base) 双轨制的历史成本追溯与真实盈亏 (P&L) 计算引擎。
- 资产表新增 name 字段,并补全了资产与流水的增删改查 ActionsupdateAsset、deleteAsset、updateTransaction、deleteTransactioncreateTransaction 支持根据 exchange 自动判定 txCurrency。
## 外部行情接口与网络 (Market Data Engines)
- **股票行情引擎:** 彻底抛弃低效海外接口,自主研发智能路由接入腾讯财经 (`qt.gtimg.cn`) 极速接口。引入原生 `ArrayBuffer``TextDecoder(gbk)` 彻底解决历史中文乱码问题,实现沪、深、港、美四大市场毫秒级实时同步。
- **Crypto 行情引擎:** 接入币安 (Binance) 公共 API构建全市场股票+加密货币)双轨双擎驱动架构。
- **网络防腐层:** 引入 `undici` 底层网络库并配置 `setGlobalDispatcher`,成功突破境内防火墙对境外 API 的直连封锁 (Timeout)。
## 前端架构与 UI/UX 体验
- 完成 shadcn/ui 初始化,集成 next-themes 支持暗黑模式,并拉取核心组件库。
- 完成 `/dashboard` 基础布局架构,接管根路由。
- 打通 `/dashboard/assets``/dashboard/transactions` 页面前后端数据流转,修复早期录入与 404 缺陷。
- 完成 UI 层高精度数据格式化,针对不同资产类型实现动态精度展示,清理因数据库 `numeric` 导致的尾随零问题。
- 引入 `recharts` 图表引擎,构建了基于实时 CNY 估值的资产分布环形图。
- 优化表单交互:实装了交易所与币种的智能联动逻辑,并运用 `disabled` 属性实现了表单字段的只读防腐锁定。
## UX 与全局交互 (UI/UX)
- 引入 `sonner` 构建全局 Toast 消息通知系统覆盖行情同步、CRUD 操作的成功与异常提示。
- 重构 `<SyncButton />` 并将其提升至 Dashboard 首页,实现总资产大盘的全局一键实盘刷新。

View File

@ -2,6 +2,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { getPortfolioSummary } from '@/actions/portfolio'; import { getPortfolioSummary } from '@/actions/portfolio';
import { formatQuantity, formatAmount } from '@/lib/formatters'; import { formatQuantity, formatAmount } from '@/lib/formatters';
import AllocationChart from '@/components/dashboard/allocation-chart'; import AllocationChart from '@/components/dashboard/allocation-chart';
import { SyncButton } from '@/components/assets/sync-button';
import Big from 'big.js'; import Big from 'big.js';
const CHART_COLORS = [ const CHART_COLORS = [
@ -33,6 +34,10 @@ export default async function DashboardPage() {
</div> </div>
<Card> <Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium"></CardTitle>
<SyncButton />
</CardHeader>
<CardContent className="pt-6 pb-6"> <CardContent className="pt-6 pb-6">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<span className="text-2xl font-semibold text-muted-foreground"> <span className="text-2xl font-semibold text-muted-foreground">

View File

@ -2,6 +2,7 @@ import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google"; import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css"; import "./globals.css";
import { ThemeProvider } from "@/components/theme-provider"; import { ThemeProvider } from "@/components/theme-provider";
import { Toaster } from "@/components/ui/sonner";
const geistSans = Geist({ const geistSans = Geist({
variable: "--font-geist-sans", variable: "--font-geist-sans",
@ -29,6 +30,7 @@ export default function RootLayout({
<ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange> <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
{children} {children}
</ThemeProvider> </ThemeProvider>
<Toaster />
</body> </body>
</html> </html>
); );

11
package-lock.json generated
View File

@ -27,6 +27,7 @@
"react-dom": "19.2.4", "react-dom": "19.2.4",
"react-hook-form": "^7.74.0", "react-hook-form": "^7.74.0",
"recharts": "^3.8.1", "recharts": "^3.8.1",
"sonner": "^2.0.7",
"tailwind-merge": "^3.5.0", "tailwind-merge": "^3.5.0",
"tailwindcss-animate": "^1.0.7", "tailwindcss-animate": "^1.0.7",
"undici": "^8.1.0", "undici": "^8.1.0",
@ -8032,6 +8033,16 @@
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
} }
}, },
"node_modules/sonner": {
"version": "2.0.7",
"resolved": "https://registry.npmmirror.com/sonner/-/sonner-2.0.7.tgz",
"integrity": "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==",
"license": "MIT",
"peerDependencies": {
"react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
"react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
}
},
"node_modules/source-map": { "node_modules/source-map": {
"version": "0.6.1", "version": "0.6.1",
"resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz", "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",

View File

@ -31,6 +31,7 @@
"react-dom": "19.2.4", "react-dom": "19.2.4",
"react-hook-form": "^7.74.0", "react-hook-form": "^7.74.0",
"recharts": "^3.8.1", "recharts": "^3.8.1",
"sonner": "^2.0.7",
"tailwind-merge": "^3.5.0", "tailwind-merge": "^3.5.0",
"tailwindcss-animate": "^1.0.7", "tailwindcss-animate": "^1.0.7",
"undici": "^8.1.0", "undici": "^8.1.0",

View File

@ -33,6 +33,7 @@ import {
SelectValue, SelectValue,
} from '@/components/ui/select'; } from '@/components/ui/select';
import { Plus } from 'lucide-react'; import { Plus } from 'lucide-react';
import { toast } from 'sonner';
import { createAsset } from '@/actions/asset'; import { createAsset } from '@/actions/asset';
const addAssetSchema = z.object({ const addAssetSchema = z.object({
@ -94,6 +95,7 @@ export function AddAssetDialog() {
startTransition(async () => { startTransition(async () => {
const result = await createAsset(values); const result = await createAsset(values);
if (result.success) { if (result.success) {
toast.success('资产添加成功');
setOpen(false); setOpen(false);
form.reset(); form.reset();
router.refresh(); router.refresh();

View File

@ -3,14 +3,20 @@
import { useState, useTransition } from 'react'; import { useState, useTransition } from 'react';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { RefreshCw } from 'lucide-react'; import { RefreshCw } from 'lucide-react';
import { toast } from 'sonner';
import { syncAllMarketPrices } from '@/actions/market'; import { syncAllMarketPrices } from '@/actions/market';
export function SyncButton() { export function SyncButton() {
const [isPending, startTransition] = useTransition(); const [isPending, startTransition] = useTransition();
function handleClick() { async function handleClick() {
startTransition(async () => { startTransition(async () => {
try {
await syncAllMarketPrices(); await syncAllMarketPrices();
toast.success('行情同步成功', { description: '全市场资产价格已更新为最新市价' });
} catch (error) {
toast.error('行情同步异常', { description: '部分接口可能触发了熔断或网络阻断' });
}
}); });
} }

View File

@ -33,6 +33,7 @@ import {
SelectValue, SelectValue,
} from '@/components/ui/select'; } from '@/components/ui/select';
import { Plus } from 'lucide-react'; import { Plus } from 'lucide-react';
import { toast } from 'sonner';
import { createTransaction } from '@/actions/transaction'; import { createTransaction } from '@/actions/transaction';
const addTransactionSchema = z.object({ const addTransactionSchema = z.object({
@ -117,6 +118,7 @@ export function AddTransactionDialog({ assets }: AddTransactionDialogProps) {
exchangeRate: '1', exchangeRate: '1',
}); });
if (result.success) { if (result.success) {
toast.success('流水记录成功');
setOpen(false); setOpen(false);
form.reset(); form.reset();
router.refresh(); router.refresh();

View File

@ -0,0 +1,45 @@
"use client"
import {
CircleCheck,
Info,
LoaderCircle,
OctagonX,
TriangleAlert,
} from "lucide-react"
import { useTheme } from "next-themes"
import { Toaster as Sonner } from "sonner"
type ToasterProps = React.ComponentProps<typeof Sonner>
const Toaster = ({ ...props }: ToasterProps) => {
const { theme = "system" } = useTheme()
return (
<Sonner
theme={theme as ToasterProps["theme"]}
className="toaster group"
icons={{
success: <CircleCheck className="h-4 w-4" />,
info: <Info className="h-4 w-4" />,
warning: <TriangleAlert className="h-4 w-4" />,
error: <OctagonX className="h-4 w-4" />,
loading: <LoaderCircle className="h-4 w-4 animate-spin" />,
}}
toastOptions={{
classNames: {
toast:
"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
description: "group-[.toast]:text-muted-foreground",
actionButton:
"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
cancelButton:
"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
},
}}
{...props}
/>
)
}
export { Toaster }