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

2026-04-28 15:46:43 +08:00 · 2026-04-28 15:46:43 +08:00 · 110e75f0a1
commit 110e75f0a1
parent 58db0b82ee
9 changed files with 109 additions and 17 deletions
--- a/Memory.md
+++ b/Memory.md
@ -1,17 +1,35 @@
-完成根目录的 Next.js 初始化、基础依赖安装与环境变量配置。
+# Omniledger 架构与开发记忆 (Memory)

+## 基础设施与底层架构
+- 完成根目录的 Next.js 初始化、基础依赖安装与环境变量配置。
 - 完成基于单例模式的数据库连接配置，并设定 Drizzle 迁移工具。
- 修复网络连接，成功将 users 表推送至数据库。
- 成功定義資產枚舉與 assets 表，支持跨資產標識。
- 完成核心 transactions 表的建立，並嚴格運用了 numeric(36,18) 的高精度配置。
- 完成高精度交易流水 (transactions) 的 Server Actions 开发，成功实现了字符串级别的高精度防腐层拦截。
- 完成 shadcn/ui 初始化，集成 next-themes，并拉取核心组件库。
- 完成 /dashboard 基础布局架构，接管根路由。
- 引入 Zod 和 Big.js，完成资产表 (assets) 的 Server Actions 读写接口开发。
- 完成 /dashboard/assets 页面，成功打通前后端资产录入数据流转。
- 修复 /dashboard/transactions 404，完成高精度流水录入与展示功能。
- 完成 UI 层的高精度数据格式化，实现不同资产类型的动态展示精度。
- 完成持仓聚合计算逻辑，并构建了 Dashboard 首页持仓卡片矩阵。
- 引入 recharts 图表引擎，完成 Dashboard 资产分布环形图的构建。
- 汇率表已建立，支持跨币种（如 BTC->USD）的交叉汇率架构。
- 资产表新增 name 字段，并补全了资产与流水的增删改查 Actions（updateAsset、deleteAsset、updateTransaction、deleteTransaction），createTransaction 支持根据 exchange 自动判定 txCurrency。
+- 修复网络连接，成功将 tables 推送至 PostgreSQL 数据库。
+- 统一规范 Git 全量提交机制 (`git add -A`)，确立了严谨的代码版本控制防腐层。
+
+## 数据库设计 (Schema)
+- 成功定义资产枚举与 `assets` 表，支持跨资产标识。
+- 完成核心 `transactions` (交易流水) 表的建立，并严格运用了 `numeric(36,18)` 的高精度配置。
+- `assets` 表完成多次业务演进：新增 `latestPrice` (支持现价追踪)、`exchange` (显式交易所绑定) 以及 `name` (中文名称解析) 字段。
+- `exchange_rates` (汇率表) 已建立，支持联合主键与跨币种交叉汇率架构。
+
+## 核心业务与服务端逻辑 (Server Actions)
+- 完成高精度交易流水与资产的 Server Actions 开发，成功实现字符串级别的高精度防腐层拦截（基于 Zod & Big.js）。
+- 补全资产与流水的全栈增删改查 (CRUD) 操作，`createTransaction` 现已支持根据 `exchange` 自动判定并锁定 `txCurrency`。
+- **估值与 P&L 引擎：** 完成底层估值引擎升级，打通交叉汇率换算逻辑；实现原币种 (Native) 与本位币 (CNY Base) 双轨制的历史成本追溯与真实盈亏 (P&L) 计算引擎。
+
+## 外部行情接口与网络 (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 首页，实现总资产大盘的全局一键实盘刷新。
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@ -2,6 +2,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { getPortfolioSummary } from '@/actions/portfolio';
 import { formatQuantity, formatAmount } from '@/lib/formatters';
 import AllocationChart from '@/components/dashboard/allocation-chart';
+import { SyncButton } from '@/components/assets/sync-button';
 import Big from 'big.js';

 const CHART_COLORS = [
@ -33,6 +34,10 @@ export default async function DashboardPage() {
      </div>

      <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">
          <div className="flex items-center gap-3">
            <span className="text-2xl font-semibold text-muted-foreground">
--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import { ThemeProvider } from "@/components/theme-provider";
+import { Toaster } from "@/components/ui/sonner";

 const geistSans = Geist({
  variable: "--font-geist-sans",
@ -29,6 +30,7 @@ export default function RootLayout({
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
          {children}
        </ThemeProvider>
+        <Toaster />
      </body>
    </html>
  );
--- a/package-lock.json
+++ b/package-lock.json
@ -27,6 +27,7 @@
        "react-dom": "19.2.4",
        "react-hook-form": "^7.74.0",
        "recharts": "^3.8.1",
+        "sonner": "^2.0.7",
        "tailwind-merge": "^3.5.0",
        "tailwindcss-animate": "^1.0.7",
        "undici": "^8.1.0",
@ -8032,6 +8033,16 @@
        "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": {
      "version": "0.6.1",
      "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
--- a/package.json
+++ b/package.json
@ -31,6 +31,7 @@
    "react-dom": "19.2.4",
    "react-hook-form": "^7.74.0",
    "recharts": "^3.8.1",
+    "sonner": "^2.0.7",
    "tailwind-merge": "^3.5.0",
    "tailwindcss-animate": "^1.0.7",
    "undici": "^8.1.0",
--- a/src/components/assets/add-asset-dialog.tsx
+++ b/src/components/assets/add-asset-dialog.tsx
@ -33,6 +33,7 @@ import {
  SelectValue,
 } from '@/components/ui/select';
 import { Plus } from 'lucide-react';
+import { toast } from 'sonner';
 import { createAsset } from '@/actions/asset';

 const addAssetSchema = z.object({
@ -94,6 +95,7 @@ export function AddAssetDialog() {
    startTransition(async () => {
      const result = await createAsset(values);
      if (result.success) {
+        toast.success('资产添加成功');
        setOpen(false);
        form.reset();
        router.refresh();
--- a/src/components/assets/sync-button.tsx
+++ b/src/components/assets/sync-button.tsx
@ -3,14 +3,20 @@
 import { useState, useTransition } from 'react';
 import { Button } from '@/components/ui/button';
 import { RefreshCw } from 'lucide-react';
+import { toast } from 'sonner';
 import { syncAllMarketPrices } from '@/actions/market';

 export function SyncButton() {
  const [isPending, startTransition] = useTransition();

-  function handleClick() {
+  async function handleClick() {
    startTransition(async () => {
+      try {
        await syncAllMarketPrices();
+        toast.success('行情同步成功', { description: '全市场资产价格已更新为最新市价' });
+      } catch (error) {
+        toast.error('行情同步异常', { description: '部分接口可能触发了熔断或网络阻断' });
+      }
    });
  }

--- a/src/components/transactions/add-transaction-dialog.tsx
+++ b/src/components/transactions/add-transaction-dialog.tsx
@ -33,6 +33,7 @@ import {
  SelectValue,
 } from '@/components/ui/select';
 import { Plus } from 'lucide-react';
+import { toast } from 'sonner';
 import { createTransaction } from '@/actions/transaction';

 const addTransactionSchema = z.object({
@ -117,6 +118,7 @@ export function AddTransactionDialog({ assets }: AddTransactionDialogProps) {
        exchangeRate: '1',
      });
      if (result.success) {
+        toast.success('流水记录成功');
        setOpen(false);
        form.reset();
        router.refresh();
--- a/src/components/ui/sonner.tsx
+++ b/src/components/ui/sonner.tsx
@ -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 }