feat(ui): 引入 sonner 消息反馈系统,并在首页部署全局行情同步按钮
This commit is contained in:
parent
58db0b82ee
commit
110e75f0a1
48
Memory.md
48
Memory.md
@ -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 字段,并补全了资产与流水的增删改查 Actions(updateAsset、deleteAsset、updateTransaction、deleteTransaction),createTransaction 支持根据 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 首页,实现总资产大盘的全局一键实盘刷新。
|
||||||
@ -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">
|
||||||
|
|||||||
@ -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
11
package-lock.json
generated
@ -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",
|
||||||
|
|||||||
@ -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",
|
||||||
|
|||||||
@ -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();
|
||||||
|
|||||||
@ -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: '部分接口可能触发了熔断或网络阻断' });
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -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();
|
||||||
|
|||||||
45
src/components/ui/sonner.tsx
Normal file
45
src/components/ui/sonner.tsx
Normal 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 }
|
||||||
Loading…
Reference in New Issue
Block a user