14 Commits

Author SHA1 Message Date
hzm
8fee023dfd feat:修改公告 2026-03-09 22:29:34 +08:00
hzm
c71759153f feat:发布 0.2.3 2026-03-09 22:26:35 +08:00
hzm
a4a881860b feat:表格列最新净值和估算净值增加日期显示 2026-03-09 21:32:03 +08:00
hzm
95514eb52f feat:更新用户支持群二维码 2026-03-09 21:16:23 +08:00
hzm
9516a4f874 feat: 微信群弹框增加入群须知描述 2026-03-09 21:00:28 +08:00
hzm
750e72823b feat: 反馈前需登录 2026-03-09 20:46:59 +08:00
hzm
c3515c7011 feat: 优化定投样式 2026-03-09 20:22:08 +08:00
hzm
f39f152efa feat: 部分二次确认弹框样式调整 2026-03-09 20:16:04 +08:00
hzm
d4255fc1c8 feat: 设置弹框组件样式调整 2026-03-09 20:00:18 +08:00
hzm
480abbcf47 fix: 删除记录弹框层级问题 2026-03-09 19:24:09 +08:00
hzm
3ed129afb2 fix: PC端表头初始化渲染问题 2026-03-09 17:23:59 +08:00
hzm
5f909cc669 feat: supabase upsert 操作不再返回 select 信息以减少 edgress 流量 2026-03-09 10:55:45 +08:00
hzm
f379c9fef5 feat:改进移动端表格行排序形式 2026-03-09 08:41:01 +08:00
hzm
412b22ec1c feat:Dialog 组件内容背景色统一 2026-03-09 08:19:02 +08:00
18 changed files with 646 additions and 318 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 61 KiB

After

Width:  |  Height:  |  Size: 60 KiB

View File

@@ -3,7 +3,7 @@
import { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
const ANNOUNCEMENT_KEY = 'hasClosedAnnouncement_v13';
const ANNOUNCEMENT_KEY = 'hasClosedAnnouncement_v14';
export default function Announcement() {
const [isVisible, setIsVisible] = useState(false);
@@ -75,12 +75,11 @@ export default function Announcement() {
<span>公告</span>
</div>
<div style={{ color: 'var(--text)', lineHeight: '1.6', fontSize: '15px', overflowY: 'auto', minHeight: 0, flex: 1, paddingRight: '4px' }}>
<p>v0.2.2 版本更新内容如下</p>
<p>1. 新增 ios pwa 应用支持</p>
<p>2. 引入 shadcn ui 组件库逐步调整项目样式</p>
<p>3. 列表模式表头固定</p>
<p>4. 列表模式点击名称展示基金详情弹框</p>
<p>强烈建议苹果用户通过 Safari 浏览器分享添加应用到主屏幕实现保存网页成APP效果安卓同理</p>
<p>v0.2.3 版本更新内容如下</p>
<p>1. 二次确认弹框层级问题修复</p>
<p>2. 净值列新增日期</p>
<p>3. 重发微信用户支持群二维码(底部提交反馈处)</p>
<p>用户支持群禁止讨论基金及金融买卖相关内容</p>
</div>
<div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '8px' }}>

View File

@@ -15,19 +15,31 @@ export default function ConfirmModal({
onConfirm,
onCancel,
confirmText = '确定删除',
icon,
confirmVariant = 'danger', // 'danger' | 'primary' | 'secondary'
}) {
const handleOpenChange = (open) => {
if (!open) onCancel();
};
const confirmButtonToneClass =
confirmVariant === 'primary'
? 'button'
: confirmVariant === 'secondary'
? 'button secondary'
: 'button danger';
return (
<Dialog open onOpenChange={handleOpenChange}>
<DialogContent
overlayClassName="!z-[12000]"
showCloseButton={false}
className="max-w-[400px] flex flex-col gap-5 p-6"
className="!z-[12010] max-w-[400px] flex flex-col gap-5 p-6"
>
<DialogHeader className="flex flex-row items-center gap-3 text-left">
<TrashIcon width="20" height="20" className="shrink-0 text-[var(--danger)]" />
{icon || (
<TrashIcon width="20" height="20" className="shrink-0 text-[var(--danger)]" />
)}
<DialogTitle className="flex-1 text-base font-semibold">{title}</DialogTitle>
</DialogHeader>
<DialogDescription className="text-left text-sm leading-relaxed text-[var(--muted-foreground)]">
@@ -43,7 +55,7 @@ export default function ConfirmModal({
</button>
<button
type="button"
className="button danger min-w-0 flex-1 cursor-pointer h-auto min-h-[48px] py-3 sm:h-11 sm:min-h-0 sm:py-0"
className={`${confirmButtonToneClass} min-w-0 flex-1 cursor-pointer h-auto min-h-[48px] py-3 sm:h-11 sm:min-h-0 sm:py-0`}
onClick={onConfirm}
>
{confirmText}

View File

@@ -187,156 +187,176 @@ export default function DcaModal({ fund, plan, onClose, onConfirm }) {
exit={{ opacity: 0, scale: 0.95, y: 20 }}
className="glass card modal dca-modal"
onClick={(e) => e.stopPropagation()}
style={{ maxWidth: '420px' }}
style={{
maxWidth: '420px',
maxHeight: '90vh',
display: 'flex',
flexDirection: 'column',
}}
>
<div className="title" style={{ marginBottom: 20, justifyContent: 'space-between' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
<span style={{ fontSize: '20px' }}>🔁</span>
<span>定投</span>
</div>
<button className="icon-button" onClick={onClose} style={{ border: 'none', background: 'transparent' }}>
<CloseIcon width="20" height="20" />
</button>
</div>
<div style={{ marginBottom: 16 }}>
<div className="fund-name" style={{ fontWeight: 600, fontSize: '16px', marginBottom: 4 }}>{fund?.name}</div>
<div className="muted" style={{ fontSize: '12px' }}>#{fund?.code}</div>
</div>
<form onSubmit={handleSubmit}>
<div className="form-group" style={{ marginBottom: 8 }}>
<label className="muted" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: '14px' }}>
<span>是否启用定投</span>
<button
type="button"
onClick={() => setEnabled(v => !v)}
style={{
border: 'none',
background: 'transparent',
cursor: 'pointer',
display: 'inline-flex',
alignItems: 'center',
gap: 6
}}
>
<span className={`dca-toggle-track ${enabled ? 'enabled' : ''}`}>
<span className="dca-toggle-thumb" style={{ left: enabled ? 16 : 2 }} />
</span>
<span style={{ fontSize: 12, color: enabled ? 'var(--primary)' : 'var(--muted)' }}>
{enabled ? '已启用' : '未启用'}
</span>
</button>
</label>
</div>
<div className="form-group" style={{ marginBottom: 16 }}>
<label className="muted" style={{ display: 'block', marginBottom: 8, fontSize: '14px' }}>
定投金额 (¥) <span style={{ color: 'var(--danger)' }}>*</span>
</label>
<div style={{ border: (!amount || parseFloat(amount) <= 0) ? '1px solid var(--danger)' : '1px solid var(--border)', borderRadius: 12 }}>
<NumericInput
value={amount}
onChange={setAmount}
step={100}
min={0}
placeholder="请输入每次定投金额"
/>
<div
className="scrollbar-y-styled"
style={{
overflowY: 'auto',
paddingRight: 4,
flex: 1,
}}
>
<div className="title" style={{ marginBottom: 20, justifyContent: 'space-between' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
<span style={{ fontSize: '20px' }}>🔁</span>
<span>定投</span>
</div>
<button className="icon-button" onClick={onClose} style={{ border: 'none', background: 'transparent' }}>
<CloseIcon width="20" height="20" />
</button>
</div>
<div className="row" style={{ gap: 12, marginBottom: 16 }}>
<div className="form-group" style={{ flex: 1 }}>
<label className="muted" style={{ display: 'block', marginBottom: 8, fontSize: '14px' }}>
买入费率 (%) <span style={{ color: 'var(--danger)' }}>*</span>
<div style={{ marginBottom: 16 }}>
<div className="fund-name" style={{ fontWeight: 600, fontSize: '16px', marginBottom: 4 }}>{fund?.name}</div>
<div className="muted" style={{ fontSize: '12px' }}>#{fund?.code}</div>
</div>
<form onSubmit={handleSubmit}>
<div className="form-group" style={{ marginBottom: 8 }}>
<label className="muted" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: '14px' }}>
<span>是否启用定投</span>
<button
type="button"
onClick={() => setEnabled(v => !v)}
style={{
border: 'none',
background: 'transparent',
cursor: 'pointer',
display: 'inline-flex',
alignItems: 'center',
gap: 6
}}
>
<span className={`dca-toggle-track ${enabled ? 'enabled' : ''}`}>
<span className="dca-toggle-thumb" style={{ left: enabled ? 16 : 2 }} />
</span>
<span style={{ fontSize: 12, color: enabled ? 'var(--primary)' : 'var(--muted)' }}>
{enabled ? '已启用' : '未启用'}
</span>
</button>
</label>
<div style={{ border: feeRate === '' ? '1px solid var(--danger)' : '1px solid var(--border)', borderRadius: 12 }}>
</div>
<div className="form-group" style={{ marginBottom: 16 }}>
<label className="muted" style={{ display: 'block', marginBottom: 8, fontSize: '14px' }}>
定投金额 (¥) <span style={{ color: 'var(--danger)' }}>*</span>
</label>
<div style={{ border: (!amount || parseFloat(amount) <= 0) ? '1px solid var(--danger)' : '1px solid var(--border)', borderRadius: 12 }}>
<NumericInput
value={feeRate}
onChange={setFeeRate}
step={0.01}
value={amount}
onChange={setAmount}
step={100}
min={0}
placeholder="0.12"
placeholder="请输入每次定投金额"
/>
</div>
</div>
<div className="form-group" style={{ flex: 1 }}>
<label className="muted" style={{ display: 'block', marginBottom: 8, fontSize: '14px' }}>
定投周期 <span style={{ color: 'var(--danger)' }}>*</span>
</label>
<div className="dca-option-group row" style={{ gap: 4 }}>
{CYCLES.map((opt) => (
<button
key={opt.value}
type="button"
className={`dca-option-btn ${cycle === opt.value ? 'active' : ''}`}
onClick={() => setCycle(opt.value)}
>
{opt.label}
</button>
))}
</div>
</div>
</div>
{(cycle === 'weekly' || cycle === 'biweekly') && (
<div className="form-group" style={{ marginBottom: 16 }}>
<label className="muted" style={{ display: 'block', marginBottom: 8, fontSize: '14px' }}>
扣款星期 <span style={{ color: 'var(--danger)' }}>*</span>
</label>
<div className="dca-option-group row" style={{ gap: 4 }}>
{WEEKDAY_OPTIONS.map((opt) => (
<button
key={opt.value}
type="button"
className={`dca-option-btn dca-weekday-btn ${weeklyDay === opt.value ? 'active' : ''}`}
onClick={() => setWeeklyDay(opt.value)}
>
{opt.label}
</button>
))}
<div className="row" style={{ gap: 12, marginBottom: 16 }}>
<div className="form-group" style={{ flex: 1 }}>
<label className="muted" style={{ display: 'block', marginBottom: 8, fontSize: '14px' }}>
买入费率 (%) <span style={{ color: 'var(--danger)' }}>*</span>
</label>
<div style={{ border: feeRate === '' ? '1px solid var(--danger)' : '1px solid var(--border)', borderRadius: 12 }}>
<NumericInput
value={feeRate}
onChange={setFeeRate}
step={0.01}
min={0}
placeholder="0.12"
/>
</div>
</div>
</div>
)}
{cycle === 'monthly' && (
<div className="form-group" style={{ marginBottom: 16 }}>
<label className="muted" style={{ display: 'block', marginBottom: 8, fontSize: '14px' }}>
扣款日 <span style={{ color: 'var(--danger)' }}>*</span>
</label>
<div className="dca-monthly-day-group scrollbar-y-styled">
{Array.from({ length: 28 }).map((_, idx) => {
const day = idx + 1;
const active = monthlyDay === day;
return (
<div className="form-group" style={{ flex: 1 }}>
<label className="muted" style={{ display: 'block', marginBottom: 8, fontSize: '14px' }}>
定投周期 <span style={{ color: 'var(--danger)' }}>*</span>
</label>
<div className="dca-option-group row" style={{ gap: 4 }}>
{CYCLES.map((opt) => (
<button
key={day}
ref={active ? monthlyDayRef : null}
key={opt.value}
type="button"
className={`dca-option-btn dca-monthly-btn ${active ? 'active' : ''}`}
onClick={() => setMonthlyDay(day)}
className={`dca-option-btn ${cycle === opt.value ? 'active' : ''}`}
onClick={() => setCycle(opt.value)}
>
{day}
{opt.label}
</button>
);
})}
))}
</div>
</div>
</div>
)}
<div className="form-group" style={{ marginBottom: 16 }}>
<label className="muted" style={{ display: 'block', marginBottom: 4, fontSize: '14px' }}>
首次扣款日期
</label>
<div className="dca-first-date-display">
{firstDate}
</div>
<div className="muted" style={{ marginTop: 4, fontSize: 12 }}>
* 基于当前日期和所选周期/扣款日自动计算每日=当天每周/每两周=从今天起最近的所选工作日每月=从今天起最近的所选日期1-28
</div>
</div>
{(cycle === 'weekly' || cycle === 'biweekly') && (
<div className="form-group" style={{ marginBottom: 16 }}>
<label className="muted" style={{ display: 'block', marginBottom: 8, fontSize: '14px' }}>
扣款星期 <span style={{ color: 'var(--danger)' }}>*</span>
</label>
<div className="dca-option-group row" style={{ gap: 4 }}>
{WEEKDAY_OPTIONS.map((opt) => (
<button
key={opt.value}
type="button"
className={`dca-option-btn dca-weekday-btn ${weeklyDay === opt.value ? 'active' : ''}`}
onClick={() => setWeeklyDay(opt.value)}
>
{opt.label}
</button>
))}
</div>
</div>
)}
<div className="row" style={{ gap: 12, marginTop: 12 }}>
{cycle === 'monthly' && (
<div className="form-group" style={{ marginBottom: 16 }}>
<label className="muted" style={{ display: 'block', marginBottom: 8, fontSize: '14px' }}>
扣款日 <span style={{ color: 'var(--danger)' }}>*</span>
</label>
<div className="dca-monthly-day-group scrollbar-y-styled">
{Array.from({ length: 28 }).map((_, idx) => {
const day = idx + 1;
const active = monthlyDay === day;
return (
<button
key={day}
ref={active ? monthlyDayRef : null}
type="button"
className={`dca-option-btn dca-monthly-btn ${active ? 'active' : ''}`}
onClick={() => setMonthlyDay(day)}
>
{day}
</button>
);
})}
</div>
</div>
)}
<div className="form-group" style={{ marginBottom: 16 }}>
<label className="muted" style={{ display: 'block', marginBottom: 4, fontSize: '14px' }}>
首次扣款日期
</label>
<div className="dca-first-date-display">
{firstDate}
</div>
<div className="muted" style={{ marginTop: 4, fontSize: 12 }}>
* 基于当前日期和所选周期/扣款日自动计算每日=当天每周/每两周=从今天起最近的所选工作日每月=从今天起最近的所选日期1-28
</div>
</div>
</form>
</div>
<div
style={{
paddingTop: 12,
marginTop: 4,
}}
>
<div className="row" style={{ gap: 12 }}>
<button
type="button"
className="button secondary dca-cancel-btn"
@@ -346,15 +366,16 @@ export default function DcaModal({ fund, plan, onClose, onConfirm }) {
取消
</button>
<button
type="submit"
type="button"
className="button"
disabled={!isValid()}
onClick={handleSubmit}
style={{ flex: 1, opacity: isValid() ? 1 : 0.6 }}
>
保存定投
</button>
</div>
</form>
</div>
</motion.div>
</motion.div>
);

View File

@@ -1,6 +1,6 @@
'use client';
import { useEffect, useMemo, useRef, useState } from 'react';
import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
import ReactDOM from 'react-dom';
import { AnimatePresence, motion } from 'framer-motion';
import {
@@ -34,7 +34,7 @@ import {
import FitText from './FitText';
import FundCard from './FundCard';
import MobileSettingModal from './MobileSettingModal';
import { CloseIcon, ExitIcon, SettingsIcon, StarIcon } from './Icons';
import { CloseIcon, DragIcon, ExitIcon, SettingsIcon, SortIcon, StarIcon } from './Icons';
const MOBILE_NON_FROZEN_COLUMN_IDS = [
'yesterdayChangePercent',
@@ -55,6 +55,8 @@ const MOBILE_COLUMN_HEADERS = {
holdingProfit: '持有收益',
};
const RowSortableContext = createContext(null);
function SortableRow({ row, children, isTableDragging, disabled }) {
const {
attributes,
@@ -84,7 +86,9 @@ function SortableRow({ row, children, isTableDragging, disabled }) {
style={{ ...style, position: 'relative' }}
{...attributes}
>
{typeof children === 'function' ? children(setActivatorNodeRef, listeners) : children}
<RowSortableContext.Provider value={{ setActivatorNodeRef, listeners }}>
{typeof children === 'function' ? children(setActivatorNodeRef, listeners) : children}
</RowSortableContext.Provider>
</motion.div>
);
}
@@ -123,9 +127,12 @@ export default function MobileFundTable({
blockDrawerClose = false,
closeDrawerRef,
}) {
const [isNameSortMode, setIsNameSortMode] = useState(false);
// 排序模式下拖拽手柄无需长按,直接拖动即可;非排序模式长按整行触发拖拽
const sensors = useSensors(
useSensor(PointerSensor, {
activationConstraint: { delay: 400, tolerance: 5 },
activationConstraint: isNameSortMode ? { delay: 0, tolerance: 5 } : { delay: 400, tolerance: 5 },
}),
useSensor(KeyboardSensor)
);
@@ -297,6 +304,19 @@ export default function MobileFundTable({
};
const [settingModalOpen, setSettingModalOpen] = useState(false);
useEffect(() => {
if (sortBy !== 'default') setIsNameSortMode(false);
}, [sortBy]);
// 排序模式下,点击页面任意区域(含表格外)退出排序;使用冒泡阶段,避免先于排序按钮处理
useEffect(() => {
if (!isNameSortMode) return;
const onDocClick = () => setIsNameSortMode(false);
document.addEventListener('click', onDocClick);
return () => document.removeEventListener('click', onDocClick);
}, [isNameSortMode]);
const [cardSheetRow, setCardSheetRow] = useState(null);
const tableContainerRef = useRef(null);
const portalHeaderRef = useRef(null);
@@ -334,13 +354,19 @@ export default function MobileFundTable({
const nextStickyTop = getEffectiveStickyTop();
setEffectiveStickyTop((prev) => (prev === nextStickyTop ? prev : nextStickyTop));
const tableRect = tableContainerRef.current?.getBoundingClientRect();
const tableEl = tableContainerRef.current;
const tableRect = tableEl?.getBoundingClientRect();
if (!tableRect) {
setShowPortalHeader(window.scrollY >= nextStickyTop);
return;
}
setShowPortalHeader(tableRect.top <= nextStickyTop);
const headerEl = tableEl?.querySelector('.table-header-row');
const headerHeight = headerEl?.getBoundingClientRect?.().height ?? 0;
const hasPassedHeader = (tableRect.top + headerHeight) <= nextStickyTop;
const hasTableInView = tableRect.bottom > nextStickyTop;
setShowPortalHeader(hasPassedHeader && hasTableInView);
};
const throttledVerticalUpdate = throttle(updateVerticalState, 1000/60, { leading: true, trailing: true });
@@ -442,7 +468,8 @@ export default function MobileFundTable({
};
// 移动端名称列:无拖拽把手,长按整行触发排序;点击名称可打开底部卡片弹框(需传入 getFundCardProps
const MobileFundNameCell = ({ info, showFullFundName, onOpenCardSheet }) => {
// 当 isNameSortMode 且 sortBy==='default' 时,左侧显示排序/拖拽图标,可拖动行排序
const MobileFundNameCell = ({ info, showFullFundName, onOpenCardSheet, isNameSortMode: nameSortMode, sortBy: currentSortBy }) => {
const original = info.row.original || {};
const code = original.code;
const isUpdated = original.isUpdated;
@@ -451,10 +478,23 @@ export default function MobileFundTable({
const holdingAmountDisplay = hasHoldingAmount ? (original.holdingAmount ?? '—') : null;
const isFavorites = favorites?.has?.(code);
const isGroupTab = currentTab && currentTab !== 'all' && currentTab !== 'fav';
const rowSortable = useContext(RowSortableContext);
const showDragHandle = nameSortMode && currentSortBy === 'default' && rowSortable;
return (
<div className="name-cell-content" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
{isGroupTab ? (
{showDragHandle ? (
<span
ref={rowSortable.setActivatorNodeRef}
className="icon-button fav-button"
title="拖动排序"
style={{ backgroundColor: 'transparent', touchAction: 'none', cursor: 'grab', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
onClick={(e) => e.stopPropagation()}
{...rowSortable.listeners}
>
<DragIcon width="18" height="18" />
</span>
) : isGroupTab ? (
<button
className="icon-button fav-button"
onClick={(e) => {
@@ -581,6 +621,31 @@ export default function MobileFundTable({
>
<SettingsIcon width="18" height="18" />
</button>
{sortBy === 'default' && (
<button
type="button"
className={`icon-button ${isNameSortMode ? 'active' : ''}`}
onClick={(e) => {
e.stopPropagation?.();
setIsNameSortMode((prev) => !prev);
}}
title={isNameSortMode ? '退出排序' : '拖动排序'}
style={{
border: 'none',
width: '28px',
height: '28px',
minWidth: '28px',
backgroundColor: 'transparent',
color: isNameSortMode ? 'var(--primary)' : 'var(--text)',
flexShrink: 0,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<SortIcon width="18" height="18" />
</button>
)}
</div>
),
cell: (info) => (
@@ -588,6 +653,8 @@ export default function MobileFundTable({
info={info}
showFullFundName={showFullFundName}
onOpenCardSheet={getFundCardProps ? (row) => setCardSheetRow(row) : undefined}
isNameSortMode={isNameSortMode}
sortBy={sortBy}
/>
),
meta: { align: 'left', cellClassName: 'name-cell', width: columnWidthMap.fundName },
@@ -595,25 +662,41 @@ export default function MobileFundTable({
{
accessorKey: 'latestNav',
header: '最新净值',
cell: (info) => (
<span style={{ display: 'block', width: '100%', fontWeight: 700 }}>
<FitText maxFontSize={14} minFontSize={10}>
{info.getValue() ?? '—'}
</FitText>
</span>
),
cell: (info) => {
const original = info.row.original || {};
const date = original.latestNavDate ?? '-';
return (
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 0 }}>
<span style={{ display: 'block', width: '100%', fontWeight: 700 }}>
<FitText maxFontSize={14} minFontSize={10}>
{info.getValue() ?? '—'}
</FitText>
</span>
<span className="muted" style={{ fontSize: '10px' }}>{date}</span>
</div>
);
},
meta: { align: 'right', cellClassName: 'value-cell', width: columnWidthMap.latestNav },
},
{
accessorKey: 'estimateNav',
header: '估算净值',
cell: (info) => (
<span style={{ display: 'block', width: '100%', fontWeight: 700 }}>
<FitText maxFontSize={14} minFontSize={10}>
{info.getValue() ?? '—'}
</FitText>
</span>
),
cell: (info) => {
const original = info.row.original || {};
const date = original.estimateNavDate ?? '-';
const displayDate = typeof date === 'string' && date.length > 5 ? date.slice(5) : date;
return (
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 0 }}>
<span style={{ display: 'block', width: '100%', fontWeight: 700 }}>
<FitText maxFontSize={14} minFontSize={10}>
{info.getValue() ?? '—'}
</FitText>
</span>
<span className="muted" style={{ fontSize: '10px' }}>{displayDate}</span>
</div>
);
},
meta: { align: 'right', cellClassName: 'value-cell', width: columnWidthMap.estimateNav },
},
{
@@ -746,7 +829,7 @@ export default function MobileFundTable({
meta: { align: 'right', cellClassName: 'holding-cell', width: columnWidthMap.holdingProfit },
},
],
[currentTab, favorites, refreshing, columnWidthMap, showFullFundName, getFundCardProps]
[currentTab, favorites, refreshing, columnWidthMap, showFullFundName, getFundCardProps, isNameSortMode, sortBy]
);
const table = useReactTable({
@@ -934,7 +1017,7 @@ export default function MobileFundTable({
>
{(setActivatorNodeRef, listeners) => (
<div
ref={sortBy === 'default' ? setActivatorNodeRef : undefined}
ref={sortBy === 'default' && !isNameSortMode ? setActivatorNodeRef : undefined}
className="table-row"
style={{
background: 'var(--bg)',
@@ -942,7 +1025,8 @@ export default function MobileFundTable({
zIndex: 1,
...(mobileGridLayout.gridTemplateColumns ? { gridTemplateColumns: mobileGridLayout.gridTemplateColumns } : {}),
}}
{...(sortBy === 'default' ? listeners : {})}
onClick={isNameSortMode ? () => setIsNameSortMode(false) : undefined}
{...(sortBy === 'default' && !isNameSortMode ? listeners : {})}
>
{row.getVisibleCells().map((cell, cellIndex) => {
const columnId = cell.column.id;

View File

@@ -198,6 +198,8 @@ export default function MobileSettingModal({
key="mobile-reset-confirm"
title="重置表头设置"
message="是否重置表头顺序和显示/隐藏为默认值?"
icon={<ResetIcon width="20" height="20" className="shrink-0 text-[var(--primary)]" />}
confirmVariant="primary"
onConfirm={() => {
onResetColumnOrder?.();
onResetColumnVisibility?.();

View File

@@ -34,7 +34,7 @@ import {
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog';
import { CloseIcon, DragIcon, ExitIcon, SettingsIcon, StarIcon, TrashIcon } from './Icons';
import { CloseIcon, DragIcon, ExitIcon, SettingsIcon, StarIcon, TrashIcon, ResetIcon } from './Icons';
const NON_FROZEN_COLUMN_IDS = [
'yesterdayChangePercent',
@@ -412,7 +412,12 @@ export default function PcFundTable({
return;
}
setShowPortalHeader(rect.top <= nextStickyTop);
const headerEl = tableEl?.querySelector('.table-header-row');
const headerHeight = headerEl?.getBoundingClientRect?.().height ?? 0;
const hasPassedHeader = (rect.top + headerHeight) <= nextStickyTop;
const hasTableInView = rect.bottom > nextStickyTop;
setShowPortalHeader(hasPassedHeader && hasTableInView);
setPortalHorizontal((prev) => {
const next = {
@@ -561,11 +566,20 @@ export default function PcFundTable({
header: '最新净值',
size: 100,
minSize: 80,
cell: (info) => (
<FitText style={{ fontWeight: 700 }} maxFontSize={14} minFontSize={10}>
{info.getValue() ?? ''}
</FitText>
),
cell: (info) => {
const original = info.row.original || {};
const date = original.latestNavDate ?? '-';
return (
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 0 }}>
<FitText style={{ fontWeight: 700 }} maxFontSize={14} minFontSize={10} as="div">
{info.getValue() ?? '—'}
</FitText>
<span className="muted" style={{ fontSize: '11px' }}>
{date}
</span>
</div>
);
},
meta: {
align: 'right',
cellClassName: 'value-cell',
@@ -576,11 +590,20 @@ export default function PcFundTable({
header: '估算净值',
size: 100,
minSize: 80,
cell: (info) => (
<FitText style={{ fontWeight: 700 }} maxFontSize={14} minFontSize={10}>
{info.getValue() ?? ''}
</FitText>
),
cell: (info) => {
const original = info.row.original || {};
const date = original.estimateNavDate ?? '-';
return (
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 0 }}>
<FitText style={{ fontWeight: 700 }} maxFontSize={14} minFontSize={10} as="div">
{info.getValue() ?? '—'}
</FitText>
<span className="muted" style={{ fontSize: '11px' }}>
{date}
</span>
</div>
);
},
meta: {
align: 'right',
cellClassName: 'value-cell',
@@ -1112,6 +1135,8 @@ export default function PcFundTable({
<ConfirmModal
title="重置列宽"
message="是否重置表格列宽为默认值?"
icon={<ResetIcon width="20" height="20" className="shrink-0 text-[var(--primary)]" />}
confirmVariant="primary"
onConfirm={handleResetSizing}
onCancel={() => setResetConfirmOpen(false)}
confirmText="重置"

View File

@@ -267,6 +267,8 @@ export default function PcTableSettingModal({
key="reset-order-confirm"
title="重置表头设置"
message="是否重置表头顺序和显示/隐藏为默认值?"
icon={<ResetIcon width="20" height="20" className="shrink-0 text-[var(--primary)]" />}
confirmVariant="primary"
onConfirm={() => {
onResetColumnOrder?.();
onResetColumnVisibility?.();

View File

@@ -1,6 +1,8 @@
'use client';
"use client";
import { useEffect, useState } from 'react';
import { useEffect, useRef, useState } from "react";
import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog';
import { Progress } from '@/components/ui/progress';
import ConfirmModal from './ConfirmModal';
import { ResetIcon, SettingsIcon } from './Icons';
@@ -20,6 +22,22 @@ export default function SettingsModal({
}) {
const [sliderDragging, setSliderDragging] = useState(false);
const [resetWidthConfirmOpen, setResetWidthConfirmOpen] = useState(false);
const [localSeconds, setLocalSeconds] = useState(tempSeconds);
const pageWidthTrackRef = useRef(null);
const clampedWidth = Math.min(2000, Math.max(600, Number(containerWidth) || 1200));
const pageWidthPercent = ((clampedWidth - 600) / (2000 - 600)) * 100;
const updateWidthByClientX = (clientX) => {
if (!pageWidthTrackRef.current || !setContainerWidth) return;
const rect = pageWidthTrackRef.current.getBoundingClientRect();
if (!rect.width) return;
const ratio = (clientX - rect.left) / rect.width;
const clampedRatio = Math.min(1, Math.max(0, ratio));
const rawWidth = 600 + clampedRatio * (2000 - 600);
const snapped = Math.round(rawWidth / 10) * 10;
setContainerWidth(snapped);
};
useEffect(() => {
if (!sliderDragging) return;
@@ -32,129 +50,158 @@ export default function SettingsModal({
};
}, [sliderDragging]);
// 外部的 tempSeconds 变更时,同步到本地显示,但不立即生效
useEffect(() => {
setLocalSeconds(tempSeconds);
}, [tempSeconds]);
return (
<div
className={`modal-overlay ${sliderDragging ? 'modal-overlay-translucent' : ''}`}
role="dialog"
aria-modal="true"
aria-label="设置"
onClick={onClose}
<Dialog
open
onOpenChange={(open) => {
if (!open) onClose?.();
}}
>
<div className="glass card modal" onClick={(e) => e.stopPropagation()}>
<div className="title" style={{ marginBottom: 12 }}>
<SettingsIcon width="20" height="20" />
<span>设置</span>
</div>
<div className="form-group" style={{ marginBottom: 16 }}>
<div className="muted" style={{ marginBottom: 8, fontSize: '0.8rem' }}>刷新频率</div>
<div className="chips" style={{ marginBottom: 12 }}>
{[30, 60, 120, 300].map((s) => (
<button
key={s}
type="button"
className={`chip ${tempSeconds === s ? 'active' : ''}`}
onClick={() => setTempSeconds(s)}
aria-pressed={tempSeconds === s}
>
{s}
</button>
))}
<DialogContent
overlayClassName={`modal-overlay ${sliderDragging ? 'modal-overlay-translucent' : ''} z-[9999]`}
className="!p-0 z-[10000]"
showCloseButton={false}
>
<div className="glass card modal">
<div className="title" style={{ marginBottom: 12 }}>
<SettingsIcon width="20" height="20" />
<DialogTitle asChild>
<span>设置</span>
</DialogTitle>
</div>
<input
className="input"
type="number"
inputMode="numeric"
min="30"
step="5"
value={tempSeconds}
onChange={(e) => setTempSeconds(Number(e.target.value))}
placeholder="自定义秒数"
/>
{tempSeconds < 30 && (
<div className="error-text" style={{ marginTop: 8 }}>
最小 30
</div>
)}
</div>
{!isMobile && setContainerWidth && (
<div className="form-group" style={{ marginBottom: 16 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
<div className="muted" style={{ fontSize: '0.8rem' }}>页面宽度</div>
{onResetContainerWidth && (
<div className="muted" style={{ marginBottom: 8, fontSize: '0.8rem' }}>刷新频率</div>
<div className="chips" style={{ marginBottom: 12 }}>
{[30, 60, 120, 300].map((s) => (
<button
key={s}
type="button"
className="icon-button"
onClick={() => setResetWidthConfirmOpen(true)}
title="重置页面宽度"
style={{
border: 'none',
width: '24px',
height: '24px',
padding: 0,
backgroundColor: 'transparent',
color: 'var(--muted)',
className={`chip ${localSeconds === s ? 'active' : ''}`}
onClick={() => setLocalSeconds(s)}
aria-pressed={localSeconds === s}
>
{s}
</button>
))}
</div>
<input
className="input"
type="number"
inputMode="numeric"
min="30"
step="5"
value={localSeconds}
onChange={(e) => setLocalSeconds(Number(e.target.value))}
placeholder="自定义秒数"
/>
{localSeconds < 30 && (
<div className="error-text" style={{ marginTop: 8 }}>
最小 30
</div>
)}
</div>
{!isMobile && setContainerWidth && (
<div className="form-group" style={{ marginBottom: 16 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
<div className="muted" style={{ fontSize: '0.8rem' }}>页面宽度</div>
{onResetContainerWidth && (
<button
type="button"
className="icon-button"
onClick={() => setResetWidthConfirmOpen(true)}
title="重置页面宽度"
style={{
border: 'none',
width: '24px',
height: '24px',
padding: 0,
backgroundColor: 'transparent',
color: 'var(--muted)',
}}
>
<ResetIcon width="14" height="14" />
</button>
)}
</div>
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
<div
ref={pageWidthTrackRef}
className="group relative"
style={{ flex: 1, height: 14, cursor: 'pointer', display: 'flex', alignItems: 'center' }}
onPointerDown={(e) => {
setSliderDragging(true);
updateWidthByClientX(e.clientX);
e.currentTarget.setPointerCapture?.(e.pointerId);
}}
onPointerMove={(e) => {
if (!sliderDragging) return;
updateWidthByClientX(e.clientX);
}}
>
<ResetIcon width="14" height="14" />
</button>
)}
</div>
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
<input
type="range"
min={600}
max={2000}
step={10}
value={Math.min(2000, Math.max(600, Number(containerWidth) || 1200))}
onChange={(e) => setContainerWidth(Number(e.target.value))}
onPointerDown={() => setSliderDragging(true)}
className="page-width-slider"
style={{
flex: 1,
height: 6,
accentColor: 'var(--primary)',
}}
/>
<span className="muted" style={{ fontSize: '0.8rem', minWidth: 48 }}>
{Math.min(2000, Math.max(600, Number(containerWidth) || 1200))}px
</span>
</div>
</div>
)}
<div className="form-group" style={{ marginBottom: 16 }}>
<div className="muted" style={{ marginBottom: 8, fontSize: '0.8rem' }}>数据导出</div>
<div className="row" style={{ gap: 8 }}>
<button type="button" className="button" onClick={exportLocalData}>导出配置</button>
</div>
<div className="muted" style={{ marginBottom: 8, fontSize: '0.8rem', marginTop: 26 }}>数据导入</div>
<div className="row" style={{ gap: 8, marginTop: 8 }}>
<button type="button" className="button" onClick={() => importFileRef.current?.click?.()}>导入配置</button>
</div>
<input
ref={importFileRef}
type="file"
accept="application/json"
style={{ display: 'none' }}
onChange={handleImportFileChange}
/>
{importMsg && (
<div className="muted" style={{ marginTop: 8 }}>
{importMsg}
<Progress value={pageWidthPercent} />
<div
className="pointer-events-none absolute top-1/2 -translate-y-1/2"
style={{ left: `${pageWidthPercent}%`, transform: 'translate(-50%, -50%)' }}
>
<div
className="h-3 w-3 rounded-full bg-primary shadow-md shadow-primary/40"
/>
</div>
</div>
<span className="muted" style={{ fontSize: '0.8rem', minWidth: 48 }}>
{clampedWidth}px
</span>
</div>
</div>
)}
</div>
<div className="row" style={{ justifyContent: 'flex-end', marginTop: 24 }}>
<button className="button" onClick={saveSettings} disabled={tempSeconds < 30}>保存并关闭</button>
<div className="form-group" style={{ marginBottom: 16 }}>
<div className="muted" style={{ marginBottom: 8, fontSize: '0.8rem' }}>数据导出</div>
<div className="row" style={{ gap: 8 }}>
<button type="button" className="button" onClick={exportLocalData}>导出配置</button>
</div>
<div className="muted" style={{ marginBottom: 8, fontSize: '0.8rem', marginTop: 26 }}>数据导入</div>
<div className="row" style={{ gap: 8, marginTop: 8 }}>
<button type="button" className="button" onClick={() => importFileRef.current?.click?.()}>导入配置</button>
</div>
<input
ref={importFileRef}
type="file"
accept="application/json"
style={{ display: 'none' }}
onChange={handleImportFileChange}
/>
{importMsg && (
<div className="muted" style={{ marginTop: 8 }}>
{importMsg}
</div>
)}
</div>
<div className="row" style={{ justifyContent: 'flex-end', marginTop: 24 }}>
<button
className="button"
onClick={(e) => saveSettings(e, localSeconds)}
disabled={localSeconds < 30}
>
保存并关闭
</button>
</div>
</div>
</div>
</DialogContent>
{resetWidthConfirmOpen && onResetContainerWidth && (
<ConfirmModal
title="重置页面宽度"
message="是否重置页面宽度为默认值 1200px"
icon={<ResetIcon width="20" height="20" className="shrink-0 text-[var(--primary)]" />}
confirmVariant="primary"
onConfirm={() => {
onResetContainerWidth();
setResetWidthConfirmOpen(false);
@@ -163,6 +210,6 @@ export default function SettingsModal({
confirmText="重置"
/>
)}
</div>
</Dialog>
);
}

View File

@@ -34,6 +34,12 @@ export default function WeChatModal({ onClose }) {
<CloseIcon width="20" height="20" />
</button>
</div>
<div
className="trade-pending-alert"
onClick={() => setShowPendingList(true)}
>
<span> 入群须知禁止讨论和基金买卖以及投资的有关内容可反馈软件相关需求和问题</span>
</div>
<div style={{ display: 'flex', justifyContent: 'center' }}>
<Image
src={weChatGroupImg}

View File

@@ -1695,6 +1695,11 @@ input[type="number"] {
padding-left: 12px;
}
/* 基金名称表头排序按钮在排序模式下的高亮 */
.mobile-fund-table .mobile-fund-table-header .icon-button.active {
color: var(--primary);
}
.mobile-fund-table .table-row .name-cell .name-cell-content {
min-height: 100%;
}
@@ -2073,7 +2078,6 @@ input[type="number"] {
/* shadcn Dialog符合项目规范(ui-ux-pro-max),适配亮/暗主题,略微玻璃拟态 */
[data-slot="dialog-content"] {
background: rgba(17, 24, 39, 0.96);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}

View File

@@ -1,3 +1,4 @@
import { Toaster } from '@/components/ui/sonner';
import './globals.css';
import AnalyticsGate from './components/AnalyticsGate';
import packageJson from '../package.json';
@@ -27,8 +28,9 @@ export default function RootLayout({ children }) {
/>
</head>
<body>
<AnalyticsGate GA_ID={GA_ID} />
{children}
<AnalyticsGate GA_ID={GA_ID} />
{children}
<Toaster />
</body>
</html>
);

View File

@@ -61,6 +61,7 @@ import WeChatModal from "./components/WeChatModal";
import DcaModal from "./components/DcaModal";
import githubImg from "./assets/github.svg";
import { supabase, isSupabaseConfigured } from './lib/supabase';
import { toast as sonnerToast } from 'sonner';
import { recordValuation, getAllValuationSeries, clearFund } from './lib/valuationTimeseries';
import { loadHolidaysForYears, isTradingDay as isDateTradingDay } from './lib/tradingCalendar';
import { parseFundTextWithLLM, fetchFundData, fetchLatestRelease, fetchShanghaiIndexDate, fetchSmartFundNetValue, searchFunds } from './api/fund';
@@ -659,7 +660,9 @@ export default function HomePage() {
isUpdated: f.jzrq === todayStr,
hasDca: dcaPlans[f.code]?.enabled === true,
latestNav,
latestNavDate: yesterdayDate,
estimateNav,
estimateNavDate: estimateTime,
yesterdayChangePercent,
yesterdayChangeValue,
yesterdayDate,
@@ -2585,9 +2588,11 @@ export default function HomePage() {
await refreshAll(codes);
};
const saveSettings = (e) => {
const saveSettings = (e, secondsOverride) => {
e?.preventDefault?.();
const ms = Math.max(30, Number(tempSeconds)) * 1000;
const seconds = secondsOverride ?? tempSeconds;
const ms = Math.max(30, Number(seconds)) * 1000;
setTempSeconds(Math.round(ms / 1000));
setRefreshMs(ms);
storageHelper.setItem('refreshMs', String(ms));
const w = Math.min(2000, Math.max(600, Number(containerWidth) || 1200));
@@ -3067,9 +3072,6 @@ export default function HomePage() {
const dataToSync = payload || collectLocalPayload(); // Fallback to full sync if no payload
const now = nowInTz().toISOString();
let upsertData = null;
let updateError = null;
if (isPartial) {
// 增量更新:使用 RPC 调用
const { error: rpcError } = await supabase.rpc('update_user_config_partial', {
@@ -3080,7 +3082,7 @@ export default function HomePage() {
console.error('增量同步失败,尝试全量同步', rpcError);
// RPC 失败回退到全量更新
const fullPayload = collectLocalPayload();
const { data, error } = await supabase
const { error } = await supabase
.from('user_configs')
.upsert(
{
@@ -3089,17 +3091,12 @@ export default function HomePage() {
updated_at: now
},
{ onConflict: 'user_id' }
)
.select();
upsertData = data;
updateError = error;
} else {
// RPC 成功,模拟 upsertData 格式以便后续逻辑通过
upsertData = [{ id: 'rpc_success' }];
);
if (error) throw error;
}
} else {
// 全量更新
const { data, error } = await supabase
const { error } = await supabase
.from('user_configs')
.upsert(
{
@@ -3108,15 +3105,8 @@ export default function HomePage() {
updated_at: now
},
{ onConflict: 'user_id' }
)
.select();
upsertData = data;
updateError = error;
}
if (updateError) throw updateError;
if (!upsertData || upsertData.length === 0) {
throw new Error('同步失败:未写入任何数据,请检查账号状态或重新登录');
);
if (error) throw error;
}
storageHelper.setItem('localUpdatedAt', now);
@@ -4210,6 +4200,7 @@ export default function HomePage() {
<ConfirmModal
title="确认登出"
message="确定要退出当前账号吗?"
icon={<LogoutIcon width="20" height="20" className="shrink-0 text-[var(--danger)]" />}
confirmText="确认登出"
onConfirm={() => {
setLogoutConfirmOpen(false);
@@ -4229,6 +4220,10 @@ export default function HomePage() {
<button
className="link-button"
onClick={() => {
if (!user?.id) {
sonnerToast.error('请先登录后再提交反馈');
return;
}
setFeedbackNonce((n) => n + 1);
setFeedbackOpen(true);
}}

View File

@@ -49,11 +49,12 @@ function DialogContent({
className,
children,
showCloseButton = true,
overlayClassName,
...props
}) {
return (
<DialogPortal data-slot="dialog-portal">
<DialogOverlay />
<DialogOverlay className={overlayClassName} />
<DialogPrimitive.Content
data-slot="dialog-content"
className={cn(

View File

@@ -0,0 +1,43 @@
"use client"
import * as React from "react"
import { Progress as ProgressPrimitive } from "radix-ui"
import { cn } from "@/lib/utils"
function Progress({
className,
value,
...props
}) {
return (
<ProgressPrimitive.Root
data-slot="progress"
className={cn(
// 细高条,轻玻璃质感,统一用 CSS 变量
"relative w-full overflow-hidden rounded-full",
"h-1.5 sm:h-1.5",
"bg-[var(--input)]/70 dark:bg-[var(--input)]/40",
"border border-[var(--border)]/80 dark:border-[var(--border)]/80",
"shadow-[0_0_0_1px_rgba(15,23,42,0.02)] dark:shadow-[0_0_0_1px_rgba(15,23,42,0.6)]",
className
)}
{...props}>
<ProgressPrimitive.Indicator
data-slot="progress-indicator"
className={cn(
"h-full w-full flex-1",
// 金融风轻渐变,兼容明暗主题
"bg-gradient-to-r from-[var(--primary)] to-[var(--primary)]/80",
"dark:from-[var(--primary)] dark:to-[var(--secondary)]/90",
// 柔和发光,不喧宾夺主
"shadow-[0_0_8px_rgba(245,158,11,0.35)] dark:shadow-[0_0_14px_rgba(245,158,11,0.45)]",
// 平滑进度动画
"transition-[transform,box-shadow] duration-250 ease-out"
)}
style={{ transform: `translateX(-${100 - (value || 0)}%)` }} />
</ProgressPrimitive.Root>
);
}
export { Progress }

61
components/ui/sonner.jsx Normal file
View File

@@ -0,0 +1,61 @@
"use client"
import {
CircleCheckIcon,
InfoIcon,
Loader2Icon,
OctagonXIcon,
TriangleAlertIcon,
} from "lucide-react"
import { useTheme } from "next-themes"
import { Toaster as Sonner } from "sonner";
const Toaster = ({ ...props }) => {
const { theme = "system" } = useTheme();
return (
<Sonner
theme={theme}
// 外层容器固定在页面顶部中间
className="toaster pointer-events-none fixed inset-x-0 top-4 z-[70] flex items-start justify-center px-4 sm:top-6"
icons={{
success: <CircleCheckIcon className="h-4 w-4 text-emerald-500" />,
info: <InfoIcon className="h-4 w-4 text-sky-500" />,
warning: <TriangleAlertIcon className="h-4 w-4 text-amber-500" />,
error: <OctagonXIcon className="h-4 w-4 text-destructive" />,
loading: <Loader2Icon className="h-4 w-4 animate-spin text-primary" />,
}}
richColors
// 统一 toast 样式使用 ui-ux-pro-max 建议的明暗主题对比度
toastOptions={{
classNames: {
toast:
// 基础:浅色模式下使用高对比白色卡片,暗色模式使用深色卡片
"pointer-events-auto relative flex w-full max-w-sm items-start gap-3 rounded-xl border border-slate-200 bg-white/90 text-slate-900 px-4 py-3 shadow-lg shadow-black/10 backdrop-blur-md transition-all duration-200 " +
"data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:slide-in-from-top sm:data-[state=open]:slide-in-from-bottom " +
"data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:slide-out-to-right " +
"data-[swipe=move]:translate-x-[var(--sonner-swipe-move-x)] data-[swipe=move]:transition-none " +
"data-[swipe=cancel]:translate-x-0 data-[swipe=cancel]:transition-transform data-[swipe=end]:translate-x-[var(--sonner-swipe-end-x)] " +
"dark:border-slate-800 dark:bg-slate-900/90 dark:text-slate-100",
title: "text-sm font-medium",
description: "mt-1 text-xs text-slate-600 dark:text-slate-400",
closeButton:
"cursor-pointer text-muted-foreground/70 transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
actionButton:
"inline-flex h-8 items-center justify-center rounded-full bg-primary px-3 text-xs font-medium text-primary-foreground shadow-sm transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
cancelButton:
"inline-flex h-8 items-center justify-center rounded-full border border-border bg-background px-3 text-xs font-medium text-foreground shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
// 状态色:成功/信息/警告只强化边框,错误使用红色背景,满足你“提示为红色”的需求
success: "border-emerald-500/70",
info: "border-sky-500/70",
warning: "border-amber-500/70",
error: "bg-destructive text-destructive-foreground border-destructive/80",
loading: "border-primary/60",
},
}}
{...props}
/>
);
};
export { Toaster }

26
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{
"name": "real-time-fund",
"version": "0.2.2",
"version": "0.2.3",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "real-time-fund",
"version": "0.2.2",
"version": "0.2.3",
"dependencies": {
"@dicebear/collection": "^9.3.1",
"@dicebear/core": "^9.3.1",
@@ -26,10 +26,12 @@
"lodash": "^4.17.23",
"lucide-react": "^0.577.0",
"next": "^16.1.5",
"next-themes": "^0.4.6",
"radix-ui": "^1.4.3",
"react": "18.3.1",
"react-chartjs-2": "^5.3.1",
"react-dom": "18.3.1",
"sonner": "^2.0.7",
"tailwind-merge": "^3.5.0",
"tesseract.js": "^5.1.1",
"uuid": "^13.0.0",
@@ -9903,6 +9905,16 @@
}
}
},
"node_modules/next-themes": {
"version": "0.4.6",
"resolved": "https://registry.npmmirror.com/next-themes/-/next-themes-0.4.6.tgz",
"integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
"license": "MIT",
"peerDependencies": {
"react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
}
},
"node_modules/next/node_modules/postcss": {
"version": "8.4.31",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -11669,6 +11681,16 @@
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
}
},
"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.npmjs.org/source-map/-/source-map-0.6.1.tgz",

View File

@@ -1,6 +1,6 @@
{
"name": "real-time-fund",
"version": "0.2.2",
"version": "0.2.3",
"private": true,
"scripts": {
"dev": "next dev",
@@ -29,10 +29,12 @@
"lodash": "^4.17.23",
"lucide-react": "^0.577.0",
"next": "^16.1.5",
"next-themes": "^0.4.6",
"radix-ui": "^1.4.3",
"react": "18.3.1",
"react-chartjs-2": "^5.3.1",
"react-dom": "18.3.1",
"sonner": "^2.0.7",
"tailwind-merge": "^3.5.0",
"tesseract.js": "^5.1.1",
"uuid": "^13.0.0",