feat：隐藏持仓的时候同时隐藏颜色

This reverts commit 5293a32748.

.gitignore

@@ -83,5 +83,5 @@ fabric.properties
 
 .env.local
 .DS_Store
-.idea
+.idea/*
 .husky/_/

.idea/real-time-fund.iml

@@ -1,7 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <module type="WEB_MODULE" version="4">
   <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$" />
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.cursor" />
+      <excludeFolder url="file://$MODULE_DIR$/.trae" />
+    </content>
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />
   </component>

README.md

@@ -5,6 +5,16 @@
 1. [https://hzm0321.github.io/real-time-fund/](https://hzm0321.github.io/real-time-fund/)
 2. [https://fund.cc.cd/](https://fund.cc.cd/) （加速国内访问）
 
+## Star History
+
+<a href="https://www.star-history.com/?repos=hzm0321%2Freal-time-fund&type=date&legend=top-left">
+ <picture>
+   <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/image?repos=hzm0321/real-time-fund&type=date&theme=dark&legend=top-left" />
+   <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/image?repos=hzm0321/real-time-fund&type=date&legend=top-left" />
+   <img alt="Star History Chart" src="https://api.star-history.com/image?repos=hzm0321/real-time-fund&type=date&legend=top-left" />
+ </picture>
+</a>
+
 ## ✨ 特性
 
 - **实时估值**：通过输入基金编号，实时获取并展示基金的单位净值、估值净值及实时涨跌幅。
@@ -72,14 +82,18 @@
 
 3. 修改接收到的邮件为验证码  
 
-    在 Supabase控制台 → Authentication → Email → Confirm sign up，选择 `{{.token}}`。  
+    在 Supabase控制台 → Authentication → Email Templates 中，选择 **Magic Link** 模板进行编辑，在邮件正文中使用变量 `{{ .Token }}` 展示验证码。  
 
 4. 修改验证码位数  
 
     官方验证码位数默认为8位，可自行修改。常见一般为6位。
    在 Supabase控制台 → Authentication → Sign In / Providers → Auth Providers → email → Minimum password length  和 Email OTP Length 都改为6位。
 
-5. 目前项目用到的 sql 语句，查看项目 supabase.sql 文件。
+5. 关闭确认邮件
+
+    在 Supabase控制台 → Authentication → Sign In / Providers → Auth Providers → email 中，关闭 **Confirm email** 选项。这样用户注册后就不需要再去邮箱点击确认链接了，直接使用验证码登录即可。
+
+6. 目前项目用到的 sql 语句，查看项目 /doc/supabase.sql 文件。
 
 更多 Supabase 相关内容查阅官方文档。
 
@@ -126,9 +140,9 @@ docker compose up -d
 
 ## 💬 开发者交流群
 
-欢迎基金实时开发者加入微信群聊讨论开发与协作：  
+欢迎基金实时开发者加入微信群聊讨论开发与协作：
 
-微信开发群人数已满200，如需加入请加微信号 `hzm1998hzm` 。加v备注：`基估宝开发`，邀请入群。
+<img src="./doc/weChatGroupDevelop.jpg" width="300">
 
 ## 📝 免责声明
 

app/api/fund.js

@@ -126,6 +126,55 @@ const parseLatestNetValueFromLsjzContent = (content) => {
   return null;
 };
 
+const extractHoldingsReportDate = (html) => {
+  if (!html) return null;
+
+  // 优先匹配带有“报告期 / 截止日期”等关键字附近的日期
+  const m1 = html.match(/(报告期|截止日期)[^0-9]{0,20}(\d{4}-\d{2}-\d{2})/);
+  if (m1) return m1[2];
+
+  // 兜底：取文中出现的第一个 yyyy-MM-dd 格式日期
+  const m2 = html.match(/(\d{4}-\d{2}-\d{2})/);
+  return m2 ? m2[1] : null;
+};
+
+const isLastQuarterReport = (reportDateStr) => {
+  if (!reportDateStr) return false;
+
+  const report = dayjs(reportDateStr, 'YYYY-MM-DD');
+  if (!report.isValid()) return false;
+
+  const now = nowInTz();
+  const m = now.month(); // 0-11
+  const q = Math.floor(m / 3); // 当前季度 0-3 => Q1-Q4
+
+  let lastQ;
+  let year;
+  if (q === 0) {
+    // 当前为 Q1，则上一季度是上一年的 Q4
+    lastQ = 3;
+    year = now.year() - 1;
+  } else {
+    lastQ = q - 1;
+    year = now.year();
+  }
+
+  const quarterEnds = [
+    { month: 2, day: 31 }, // Q1 -> 03-31
+    { month: 5, day: 30 }, // Q2 -> 06-30
+    { month: 8, day: 30 }, // Q3 -> 09-30
+    { month: 11, day: 31 } // Q4 -> 12-31
+  ];
+
+  const { month: endMonth, day: endDay } = quarterEnds[lastQ];
+  const lastQuarterEnd = dayjs(
+    `${year}-${String(endMonth + 1).padStart(2, '0')}-${endDay}`,
+    'YYYY-MM-DD'
+  );
+
+  return report.isSame(lastQuarterEnd, 'day');
+};
+
 export const fetchSmartFundNetValue = async (code, startDate) => {
   const today = nowInTz().startOf('day');
   let current = toTz(startDate).startOf('day');
@@ -199,7 +248,9 @@ export const fetchFundDataFallback = async (c) => {
           gszzl: null,
           zzl: Number.isFinite(latest.growth) ? latest.growth : null,
           noValuation: true,
-          holdings: []
+          holdings: [],
+          holdingsReportDate: null,
+          holdingsIsLastQuarter: false
         });
       } else {
         reject(new Error('未能获取到基金数据'));
@@ -255,9 +306,23 @@ export const fetchFundData = async (c) => {
       });
       const holdingsPromise = new Promise((resolveH) => {
         const holdingsUrl = `https://fundf10.eastmoney.com/FundArchivesDatas.aspx?type=jjcc&code=${c}&topline=10&year=&month=&_=${Date.now()}`;
-        loadScript(holdingsUrl).then(async (apidata) => {
+        const holdingsCacheKey = `fund_holdings_archives_${c}`;
+        cachedRequest(
+          () => loadScript(holdingsUrl),
+          holdingsCacheKey,
+          { cacheTime: 60 * 60 * 1000 }
+        ).then(async (apidata) => {
           let holdings = [];
           const html = apidata?.content || '';
+          const holdingsReportDate = extractHoldingsReportDate(html);
+          const holdingsIsLastQuarter = isLastQuarterReport(holdingsReportDate);
+
+          // 如果不是上一季度末的披露数据，则不展示重仓（并避免继续解析/请求行情）
+          if (!holdingsIsLastQuarter) {
+            resolveH({ holdings: [], holdingsReportDate, holdingsIsLastQuarter: false });
+            return;
+          }
+
           const headerRow = (html.match(/<thead[\s\S]*?<tr[\s\S]*?<\/tr>[\s\S]*?<\/thead>/i) || [])[0] || '';
           const headerCells = (headerRow.match(/<th[\s\S]*?>([\s\S]*?)<\/th>/gi) || []).map(th => th.replace(/<[^>]*>/g, '').trim());
           let idxCode = -1, idxName = -1, idxWeight = -1;
@@ -354,10 +419,15 @@ export const fetchFundData = async (c) => {
             } catch (e) {
             }
           }
-          resolveH(holdings);
-        }).catch(() => resolveH([]));
+          resolveH({ holdings, holdingsReportDate, holdingsIsLastQuarter });
+        }).catch(() => resolveH({ holdings: [], holdingsReportDate: null, holdingsIsLastQuarter: false }));
       });
-      Promise.all([lsjzPromise, holdingsPromise]).then(([tData, holdings]) => {
+      Promise.all([lsjzPromise, holdingsPromise]).then(([tData, holdingsResult]) => {
+        const {
+          holdings,
+          holdingsReportDate,
+          holdingsIsLastQuarter
+        } = holdingsResult || {};
         if (tData) {
           if (tData.jzrq && (!gzData.jzrq || tData.jzrq >= gzData.jzrq)) {
             gzData.dwjz = tData.dwjz;
@@ -365,7 +435,12 @@ export const fetchFundData = async (c) => {
             gzData.zzl = tData.zzl;
           }
         }
-        resolve({ ...gzData, holdings });
+        resolve({
+          ...gzData,
+          holdings,
+          holdingsReportDate,
+          holdingsIsLastQuarter
+        });
       });
     };
     scriptGz.onerror = () => {
@@ -459,73 +534,140 @@ export const submitFeedback = async (formData) => {
   return response.json();
 };
 
-// 使用智谱 GLM 从 OCR 文本中抽取基金名称
-export const extractFundNamesWithLLM = async (ocrText) => {
-  const apiKey = '8df8ccf74a174722847c83b7e222f2af.4A39rJvUeBVDmef1';
-  if (!apiKey || !ocrText) return [];
+const PINGZHONGDATA_GLOBAL_KEYS = [
+  'ishb',
+  'fS_name',
+  'fS_code',
+  'fund_sourceRate',
+  'fund_Rate',
+  'fund_minsg',
+  'stockCodes',
+  'zqCodes',
+  'stockCodesNew',
+  'zqCodesNew',
+  'syl_1n',
+  'syl_6y',
+  'syl_3y',
+  'syl_1y',
+  'Data_fundSharesPositions',
+  'Data_netWorthTrend',
+  'Data_ACWorthTrend',
+  'Data_grandTotal',
+  'Data_rateInSimilarType',
+  'Data_rateInSimilarPersent',
+  'Data_fluctuationScale',
+  'Data_holderStructure',
+  'Data_assetAllocation',
+  'Data_performanceEvaluation',
+  'Data_currentFundManager',
+  'Data_buySedemption',
+  'swithSameType',
+];
 
-  try {
-    const models = ['glm-4.5-flash', 'glm-4.7-flash'];
-    const model = models[Math.floor(Math.random() * models.length)];
+let pingzhongdataQueue = Promise.resolve();
 
-    const resp = await fetch('https://open.bigmodel.cn/api/paas/v4/chat/completions', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${apiKey}`,
-      },
-      body: JSON.stringify({
-        model,
-        messages: [
-          {
-            role: 'user',
-            content:
-              '你是一个基金 OCR 文本解析助手。' +
-              '从下面的 OCR 文本中抽取其中出现的「基金名称列表」。' +
-              '要求：1）基金名称一般为中文，中间不能有空字符串,可包含部分英文或括号' +
-              '2）名称后面通常会跟着金额或持有金额（数字，可能带千分位逗号和小数）；' +
-              '3）忽略无关信息，只返回你判断为基金名称的字符串；' +
-              '4）去重后输出。输出格式：严格返回 JSON，如 {"fund_names": ["基金名称1","基金名称2"]}，不要输出任何多余说明',
-          },
-          {
-            role: 'user',
-            content: String(ocrText),
-          },
-        ],
-        temperature: 0.2,
-        max_tokens: 1024,
-        thinking: {
-          type: 'disabled',
-        },
-      }),
-    });
-
-    if (!resp.ok) {
-      return [];
-    }
-
-    const data = await resp.json();
-    let content = data?.choices?.[0]?.message?.content?.match(/\{[\s\S]*?\}/)?.[0];
-    if (!isString(content)) return [];
-
-    let parsed;
-    try {
-      parsed = JSON.parse(content);
-    } catch {
-      return [];
-    }
-
-    const names = parsed?.fund_names;
-    if (!Array.isArray(names)) return [];
-    return names
-      .map((n) => (isString(n) ? n.trim().replaceAll(' ','') : ''))
-      .filter(Boolean);
-  } catch (e) {
-    return [];
-  }
+const enqueuePingzhongdataLoad = (fn) => {
+  const p = pingzhongdataQueue.then(fn, fn);
+  // 避免队列被 reject 永久阻塞
+  pingzhongdataQueue = p.catch(() => undefined);
+  return p;
 };
 
-let historyQueue = Promise.resolve();
+const snapshotPingzhongdataGlobals = (fundCode) => {
+  const out = {};
+  for (const k of PINGZHONGDATA_GLOBAL_KEYS) {
+    if (typeof window?.[k] === 'undefined') continue;
+    try {
+      out[k] = JSON.parse(JSON.stringify(window[k]));
+    } catch (e) {
+      out[k] = window[k];
+    }
+  }
+
+  return {
+    fundCode: out.fS_code || fundCode,
+    fundName: out.fS_name || '',
+    ...out,
+  };
+};
+
+const jsonpLoadPingzhongdata = (fundCode, timeoutMs = 10000) => {
+  return new Promise((resolve, reject) => {
+    if (typeof document === 'undefined' || !document.body) {
+      reject(new Error('无浏览器环境'));
+      return;
+    }
+
+    const url = `https://fund.eastmoney.com/pingzhongdata/${fundCode}.js?v=${Date.now()}`;
+    const script = document.createElement('script');
+    script.src = url;
+    script.async = true;
+
+    let done = false;
+    let timer = null;
+
+    const cleanup = () => {
+      if (timer) clearTimeout(timer);
+      timer = null;
+      script.onload = null;
+      script.onerror = null;
+      if (document.body.contains(script)) document.body.removeChild(script);
+    };
+
+    timer = setTimeout(() => {
+      if (done) return;
+      done = true;
+      cleanup();
+      reject(new Error('pingzhongdata 请求超时'));
+    }, timeoutMs);
+
+    script.onload = () => {
+      if (done) return;
+      done = true;
+      const data = snapshotPingzhongdataGlobals(fundCode);
+      cleanup();
+      resolve(data);
+    };
+
+    script.onerror = () => {
+      if (done) return;
+      done = true;
+      cleanup();
+      reject(new Error('pingzhongdata 加载失败'));
+    };
+
+    document.body.appendChild(script);
+  });
+};
+
+const fetchAndParsePingzhongdata = async (fundCode) => {
+  // 使用 JSONP(script 注入) 方式获取并解析 pingzhongdata
+  return enqueuePingzhongdataLoad(() => jsonpLoadPingzhongdata(fundCode));
+};
+
+/**
+ * 获取并解析「基金走势图/资产等」数据（pingzhongdata）
+ * 来源：https://fund.eastmoney.com/pingzhongdata/${fundCode}.js
+ */
+export const fetchFundPingzhongdata = async (fundCode, { cacheTime = 60 * 60 * 1000 } = {}) => {
+  if (!fundCode) throw new Error('fundCode 不能为空');
+  if (typeof window === 'undefined' || typeof document === 'undefined') {
+    throw new Error('无浏览器环境');
+  }
+
+  const cacheKey = `pingzhongdata_${fundCode}`;
+
+  try {
+    return await cachedRequest(
+      () => fetchAndParsePingzhongdata(fundCode),
+      cacheKey,
+      { cacheTime }
+    );
+  } catch (e) {
+    clearCachedRequest(cacheKey);
+    throw e;
+  }
+};
 
 export const fetchFundHistory = async (code, range = '1m') => {
   if (typeof window === 'undefined') return [];
@@ -539,73 +681,65 @@ export const fetchFundHistory = async (code, range = '1m') => {
     case '6m': start = start.subtract(6, 'month'); break;
     case '1y': start = start.subtract(1, 'year'); break;
     case '3y': start = start.subtract(3, 'year'); break;
+    case 'all': start = dayjs(0).tz(TZ); break;
     default: start = start.subtract(1, 'month');
   }
 
-  const sdate = start.format('YYYY-MM-DD');
-  const edate = end.format('YYYY-MM-DD');
-  const per = 49;
+  // 业绩走势统一走 pingzhongdata.Data_netWorthTrend
+  try {
+    const pz = await fetchFundPingzhongdata(code);
+    const trend = pz?.Data_netWorthTrend;
+    if (Array.isArray(trend) && trend.length) {
+      const startMs = start.startOf('day').valueOf();
+      // end 可能是当日任意时刻，这里用 end-of-day 包含最后一天
+      const endMs = end.endOf('day').valueOf();
+      const out = trend
+        .filter((d) => d && typeof d.x === 'number' && d.x >= startMs && d.x <= endMs)
+        .map((d) => {
+          const value = Number(d.y);
+          if (!Number.isFinite(value)) return null;
+          const date = dayjs(d.x).tz(TZ).format('YYYY-MM-DD');
+          return { date, value };
+        })
+        .filter(Boolean);
 
-  return new Promise((resolve) => {
-    historyQueue = historyQueue.then(async () => {
-      let allData = [];
-      let page = 1;
-      let totalPages = 1;
-
-      try {
-        const parseContent = (content) => {
-            if (!content) return [];
-            const rows = content.split('<tr>');
-            const data = [];
-            for (const row of rows) {
-                const cells = row.match(/<td[^>]*>(.*?)<\/td>/g);
-                if (cells && cells.length >= 2) {
-                    const dateStr = cells[0].replace(/<[^>]+>/g, '').trim();
-                    const valStr = cells[1].replace(/<[^>]+>/g, '').trim();
-                    const val = parseFloat(valStr);
-                    if (/^\d{4}-\d{2}-\d{2}$/.test(dateStr) && !isNaN(val)) {
-                        data.push({ date: dateStr, value: val });
-                    }
-                }
-            }
-            return data;
-        };
-
-        // Fetch first page to get metadata
-        const firstUrl = `https://fundf10.eastmoney.com/F10DataApi.aspx?type=lsjz&code=${code}&page=${page}&per=${per}&sdate=${sdate}&edate=${edate}`;
-        const firstApidata = await loadScript(firstUrl);
-
-        if (!firstApidata || !firstApidata.content || firstApidata.content.includes('暂无数据')) {
-          resolve([]);
-          return;
-        }
-
-        // Parse total pages
-        if (firstApidata.pages) {
-            totalPages = parseInt(firstApidata.pages, 10) || 1;
-        }
-
-        allData = allData.concat(parseContent(firstApidata.content));
-
-        // Fetch remaining pages
-        for (page = 2; page <= totalPages; page++) {
-             const nextUrl = `https://fundf10.eastmoney.com/F10DataApi.aspx?type=lsjz&code=${code}&page=${page}&per=${per}&sdate=${sdate}&edate=${edate}`;
-             const nextApidata = await loadScript(nextUrl);
-             if (nextApidata && nextApidata.content) {
-                 allData = allData.concat(parseContent(nextApidata.content));
-             }
-        }
-
-        // The data comes in reverse chronological order (newest first), so we need to reverse it for the chart (oldest first)
-        resolve(allData.reverse());
-
-      } catch (e) {
-        console.error('Fetch history error:', e);
-        resolve([]);
-      }
-    }).catch((e) => {
-       console.error('Queue error:', e);
-       resolve([]);
-    });
-  });
+      if (out.length) return out;
+    }
+  } catch (e) {
+    return [];
+  }
+  return [];
+};
+
+export const parseFundTextWithLLM = async (text) => {
+  const apiKey = 'sk-a72c4e279bc62a03cc105be6263d464c';
+  if (!apiKey || !text) return null;
+
+  try {
+    const response = await fetch('https://apis.iflow.cn/v1/chat/completions', {
+      method: 'POST',
+      headers: {
+        'Authorization': `Bearer ${apiKey}`,
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        model: 'qwen3-max',
+        messages: [
+          { role: 'system', content: "你是一个基金文本解析助手。请从提供的OCR文本中执行以下任务：\n抽取所有基金信息，包括：基金名称：中文字符串（可含英文或括号），名称后常跟随金额数字。基金代码：6位数字（如果存在）。持有金额：数字格式（可能含千分位逗号或小数，如果存在）。持有收益：数字格式（可能含千分位逗号或小数，如果存在）。忽略无关文本。输出格式：以JSON数组形式返回结果，每个基金信息为一个对象，包含以下字段：基金名称（必填，字符串）基金代码（可选，字符串，不存在时为空字符串）持有金额（可选，字符串，不存在时为空字符串）持有收益（可选，字符串，不存在时为空字符串）示例输出：[{'fundName':'华夏成长混合','fundCode':'000001','holdAmounts':'50,000.00','holdGains':'2,500.00'},{'fundName':'易方达消费行业','fundCode':'','holdAmounts':'10,000.00','holdGains':'}]。除了示例输出的内容外，不要输出任何多余内容"},
+          { role: 'user', content: text }
+        ],
+        temperature: 0.3,
+        max_tokens: 2000
+      })
+    });
+
+    if (!response.ok) {
+      return null;
+    }
+
+    const data = await response.json();
+    return data?.choices?.[0]?.message?.content || null;
+  } catch (e) {
+    return null;
+  }
 };

app/components/AddFundToGroupModal.jsx

@@ -1,14 +1,26 @@
 'use client';
 
 import { useState } from 'react';
-import { motion } from 'framer-motion';
 import { CloseIcon, PlusIcon } from './Icons';
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+} from '@/components/ui/dialog';
 
-export default function AddFundToGroupModal({ allFunds, currentGroupCodes, onClose, onAdd }) {
+export default function AddFundToGroupModal({ allFunds, currentGroupCodes, holdings = {}, onClose, onAdd }) {
   const [selected, setSelected] = useState(new Set());
 
   const availableFunds = (allFunds || []).filter(f => !(currentGroupCodes || []).includes(f.code));
 
+  const getHoldingAmount = (fund) => {
+    const holding = holdings[fund?.code];
+    if (!holding || !holding.share || holding.share <= 0) return null;
+    const nav = Number(fund?.dwjz) || Number(fund?.gsz) || Number(fund?.estGsz) || 0;
+    if (!nav) return null;
+    return holding.share * nav;
+  };
+
   const toggleSelect = (code) => {
     setSelected(prev => {
       const next = new Set(prev);
@@ -18,24 +30,21 @@ export default function AddFundToGroupModal({ allFunds, currentGroupCodes, onClo
     });
   };
 
+  const handleOpenChange = (open) => {
+    if (!open) {
+      onClose?.();
+    }
+  };
+
   return (
-    <motion.div
-      className="modal-overlay"
-      role="dialog"
-      aria-modal="true"
-      onClick={onClose}
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      exit={{ opacity: 0 }}
-    >
-      <motion.div
-        initial={{ opacity: 0, scale: 0.95, y: 20 }}
-        animate={{ opacity: 1, scale: 1, y: 0 }}
-        exit={{ opacity: 0, scale: 0.95, y: 20 }}
+    <Dialog open onOpenChange={handleOpenChange}>
+      <DialogContent
+        showCloseButton={false}
         className="glass card modal"
-        style={{ maxWidth: '500px', width: '90vw' }}
-        onClick={(e) => e.stopPropagation()}
+        overlayClassName="modal-overlay"
+        style={{ maxWidth: '500px', width: '90vw', zIndex: 99 }}
       >
+        <DialogTitle className="sr-only">添加基金到分组</DialogTitle>
         <div className="title" style={{ marginBottom: 20, justifyContent: 'space-between' }}>
           <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
             <PlusIcon width="20" height="20" />
@@ -63,9 +72,14 @@ export default function AddFundToGroupModal({ allFunds, currentGroupCodes, onClo
                   <div className="checkbox" style={{ marginRight: 12 }}>
                     {selected.has(fund.code) && <div className="checked-mark" />}
                   </div>
-                  <div className="fund-info" style={{ flex: 1 }}>
+                  <div className="fund-info" style={{ flex: 1, minWidth: 0 }}>
                     <div style={{ fontWeight: 600 }}>{fund.name}</div>
                     <div className="muted" style={{ fontSize: '12px' }}>#{fund.code}</div>
+                    {getHoldingAmount(fund) != null && (
+                      <div className="muted" style={{ fontSize: '12px', marginTop: 2 }}>
+                        持仓金额：<span style={{ color: 'var(--foreground)', fontWeight: 500 }}>¥{getHoldingAmount(fund).toFixed(2)}</span>
+                      </div>
+                    )}
                   </div>
                 </div>
               ))}
@@ -84,7 +98,7 @@ export default function AddFundToGroupModal({ allFunds, currentGroupCodes, onClo
             确定 ({selected.size})
           </button>
         </div>
-      </motion.div>
-    </motion.div>
+      </DialogContent>
+    </Dialog>
   );
 }

app/components/AddHistoryModal.jsx

@@ -1,10 +1,15 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { motion } from 'framer-motion';
 import { CloseIcon } from './Icons';
 import { fetchSmartFundNetValue } from '../api/fund';
 import { DatePicker } from './Common';
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
 
 export default function AddHistoryModal({ fund, onClose, onConfirm }) {
   const [type, setType] = useState('');
@@ -77,30 +82,36 @@ export default function AddHistoryModal({ fund, onClose, onConfirm }) {
     onClose();
   };
 
+  const handleOpenChange = (open) => {
+    if (!open) {
+      onClose?.();
+    }
+  };
+
+  const handleCloseClick = (event) => {
+    event.stopPropagation();
+    onClose?.();
+  };
+
   return (
-    <motion.div
-      className="modal-overlay"
-      role="dialog"
-      aria-modal="true"
-      aria-label="添加历史记录"
-      onClick={onClose}
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      exit={{ opacity: 0 }}
-      style={{ zIndex: 1200 }}
-    >
-      <motion.div
+    <Dialog open onOpenChange={handleOpenChange}>
+      <DialogContent
+        showCloseButton={false}
         className="glass card modal"
-        initial={{ opacity: 0, scale: 0.95, y: 20 }}
-        animate={{ opacity: 1, scale: 1, y: 0 }}
-        exit={{ opacity: 0, scale: 0.95, y: 20 }}
-        style={{ maxWidth: '420px' }}
-        onClick={(e) => e.stopPropagation()}
+        overlayClassName="modal-overlay"
+        overlayStyle={{ zIndex: 9998 }}
+        style={{ maxWidth: '420px', zIndex: 9999, width: '90vw' }}
       >
+        <DialogTitle className="sr-only">添加历史记录</DialogTitle>
+
         <div className="title" style={{ marginBottom: 20, justifyContent: 'space-between' }}>
           <span>添加历史记录</span>
-          <button className="icon-button" onClick={onClose} style={{ border: 'none', background: 'transparent' }}>
-            <CloseIcon />
+          <button
+            className="icon-button"
+            onClick={handleCloseClick}
+            style={{ border: 'none', background: 'transparent' }}
+          >
+            <CloseIcon width="20" height="20" />
           </button>
         </div>
 
@@ -197,14 +208,21 @@ export default function AddHistoryModal({ fund, onClose, onConfirm }) {
           />
         </div>
 
-        <button
-          className="button primary full-width"
-          onClick={handleSubmit}
-        disabled={!type || !date || !netValue || !amount || !share || loading}
-        >
-          确认添加
-        </button>
-      </motion.div>
-    </motion.div>
+        <div className="muted" style={{ fontSize: '11px', lineHeight: 1.5, marginBottom: 16, paddingTop: 12, borderTop: '1px solid rgba(255,255,255,0.08)' }}>
+          *此处补录的买入/卖出仅作记录展示，不会改变当前持仓金额与份额；实际持仓请在持仓设置中维护。
+        </div>
+        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+          <Button
+            type="button"
+            variant="default"
+            size="lg"
+            onClick={handleSubmit}
+            disabled={!type || !date || !netValue || !amount || !share || loading}
+          >
+            确认添加
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
   );
 }

app/components/Announcement.jsx

@@ -3,7 +3,7 @@
 import { useState, useEffect } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 
-const ANNOUNCEMENT_KEY = 'hasClosedAnnouncement_v9';
+const ANNOUNCEMENT_KEY = 'hasClosedAnnouncement_v15';
 
 export default function Announcement() {
   const [isVisible, setIsVisible] = useState(false);
@@ -16,6 +16,16 @@ export default function Announcement() {
   }, []);
 
   const handleClose = () => {
+    // 清理历史 ANNOUNCEMENT_KEY
+    const keysToRemove = [];
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+      if (key && key.startsWith('hasClosedAnnouncement_v') && key !== ANNOUNCEMENT_KEY) {
+        keysToRemove.push(key);
+      }
+    }
+    keysToRemove.forEach((k) => localStorage.removeItem(k));
+
     localStorage.setItem(ANNOUNCEMENT_KEY, 'true');
     setIsVisible(false);
   };
@@ -52,6 +62,8 @@ export default function Announcement() {
               display: 'flex',
               flexDirection: 'column',
               gap: '16px',
+              maxHeight: 'calc(100dvh - 40px)',
+              overflow: 'hidden',
             }}
           >
             <div className="title" style={{ display: 'flex', alignItems: 'center', gap: '12px', fontWeight: 700, fontSize: '18px', color: 'var(--accent)' }}>
@@ -62,16 +74,17 @@ export default function Announcement() {
               </svg>
               <span>公告</span>
             </div>
-            <div style={{ color: 'var(--text)', lineHeight: '1.6', fontSize: '15px' }}>
-              为了增加更多用户方便访问, 新增国内加速地址：<a className="link-button"
-                                                          target="_blank"
-                                                          rel="noopener noreferrer"
-                                                          style={{ color: 'var(--primary)', textDecoration: 'underline', padding: '0 4px', fontWeight: 600 }} href="https://fund.cc.cd/">https://fund.cc.cd/</a>
-              <p>v0.1.7 版本更新内容如下：</p>
-              <p>1. 实时基金估值折线图（测试版）。</p>
-              <p>2. 定投。</p>
-              以下内容会在近期更新：
-              <p>1. 自定义布局。</p>
+            <div style={{ color: 'var(--text)', lineHeight: '1.6', fontSize: '15px', overflowY: 'auto', minHeight: 0, flex: 1, paddingRight: '4px' }}>
+              <p>v0.2.4 版本更新内容如下：</p>
+              <p>1. 调整设置持仓相关弹框样式。</p>
+              <p>2. 基金详情弹框支持设置持仓相关参数。</p>
+              <p>3. 添加基金到分组弹框展示持仓金额数据。</p>
+              <p>4. 已登录用户新增手动同步按钮。</p>
+              <br/>
+              <p>答疑：</p>
+              <p>1. 因估值数据源问题，大部分海外基金估值数据不准或没有，暂时没有解决方案。</p>
+              <p>2. 因交易日用户人数过多，为控制服务器免费额度上限，暂时减少数据自动同步频率，新增手动同步按钮。</p>
+              <p>如有建议，欢迎进用户支持群反馈。</p>
             </div>
 
             <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '8px' }}>

app/components/CloudConfigModal.jsx

@@ -1,10 +1,53 @@
 'use client';
 
+import { useState } from 'react';
 import { motion } from 'framer-motion';
+import ConfirmModal from './ConfirmModal';
 import { CloseIcon, CloudIcon } from './Icons';
 
 export default function CloudConfigModal({ onConfirm, onCancel, type = 'empty' }) {
+  const [pendingAction, setPendingAction] = useState(null); // 'local' | 'cloud' | null
   const isConflict = type === 'conflict';
+
+  const handlePrimaryClick = () => {
+    if (isConflict) {
+      setPendingAction('local');
+    } else {
+      onConfirm?.();
+    }
+  };
+
+  const handleSecondaryClick = () => {
+    if (isConflict) {
+      setPendingAction('cloud');
+    } else {
+      onCancel?.();
+    }
+  };
+
+  const handleConfirmModalCancel = () => {
+    setPendingAction(null);
+  };
+
+  const handleConfirmModalConfirm = () => {
+    if (pendingAction === 'local') {
+      onConfirm?.();
+    } else if (pendingAction === 'cloud') {
+      onCancel?.();
+    }
+    setPendingAction(null);
+  };
+
+  const confirmTitle =
+    pendingAction === 'local'
+      ? '确认使用本地配置覆盖云端？'
+      : '确认使用云端配置覆盖本地？';
+
+  const confirmMessage =
+    pendingAction === 'local'
+      ? '此操作会将当前本地配置同步到云端，覆盖云端原有配置，且可能无法恢复，请谨慎操作。'
+      : '此操作会使用云端配置覆盖当前本地配置，导致本地修改丢失，且可能无法恢复，请谨慎操作。';
+
   return (
     <motion.div
       className="modal-overlay"
@@ -41,14 +84,25 @@ export default function CloudConfigModal({ onConfirm, onCancel, type = 'empty' }
             : '是否将本地配置同步到云端？'}
         </p>
         <div className="row" style={{ flexDirection: 'column', gap: 12 }}>
-          <button className="button" onClick={onConfirm}>
+          <button className="button secondary" onClick={handlePrimaryClick}>
             {isConflict ? '保留本地 (覆盖云端)' : '同步本地到云端'}
           </button>
-          <button className="button secondary" onClick={onCancel}>
+          <button className="button" onClick={handleSecondaryClick}>
             {isConflict ? '使用云端 (覆盖本地)' : '暂不同步'}
           </button>
         </div>
       </motion.div>
+      {pendingAction && (
+        <ConfirmModal
+          title={confirmTitle}
+          message={confirmMessage}
+          onConfirm={handleConfirmModalConfirm}
+          onCancel={handleConfirmModalCancel}
+          confirmText="确认覆盖"
+          icon={<CloudIcon width="20" height="20" />}
+          confirmVariant="danger"
+        />
+      )}
     </motion.div>
   );
 }

app/components/Common.jsx

@@ -73,20 +73,8 @@ export function DatePicker({ value, onChange }) {
   return (
     <div className="date-picker" style={{ position: 'relative' }} onClick={(e) => e.stopPropagation()}>
       <div
-        className="input-trigger"
+        className="date-picker-trigger"
         onClick={() => setIsOpen(!isOpen)}
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          padding: '0 12px',
-          height: '40px',
-          background: 'rgba(0,0,0,0.2)',
-          borderRadius: '8px',
-          cursor: 'pointer',
-          border: '1px solid transparent',
-          transition: 'all 0.2s'
-        }}
       >
         <span>{value || '选择日期'}</span>
         <CalendarIcon width="16" height="16" className="muted" />
@@ -98,7 +86,7 @@ export function DatePicker({ value, onChange }) {
             initial={{ opacity: 0, y: 10, scale: 0.95 }}
             animate={{ opacity: 1, y: 0, scale: 1 }}
             exit={{ opacity: 0, y: 10, scale: 0.95 }}
-            className="glass card"
+            className="date-picker-dropdown glass card"
             style={{
               position: 'absolute',
               top: '100%',
@@ -106,10 +94,7 @@ export function DatePicker({ value, onChange }) {
               width: '100%',
               marginTop: 8,
               padding: 12,
-              zIndex: 10,
-              background: 'rgba(30, 41, 59, 0.95)',
-              backdropFilter: 'blur(12px)',
-              border: '1px solid rgba(255,255,255,0.1)'
+              zIndex: 10
             }}
           >
             <div className="calendar-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
@@ -141,26 +126,8 @@ export function DatePicker({ value, onChange }) {
                 return (
                   <div
                     key={i}
+                    className={`date-picker-cell ${isSelected ? 'selected' : ''} ${isToday ? 'today' : ''} ${isFuture ? 'future' : ''}`}
                     onClick={(e) => !isFuture && handleSelect(e, d)}
-                    style={{
-                      height: 28,
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      fontSize: '13px',
-                      borderRadius: '6px',
-                      cursor: isFuture ? 'not-allowed' : 'pointer',
-                      background: isSelected ? 'var(--primary)' : isToday ? 'rgba(255,255,255,0.1)' : 'transparent',
-                      color: isFuture ? 'var(--muted)' : isSelected ? '#000' : 'var(--text)',
-                      fontWeight: isSelected || isToday ? 600 : 400,
-                      opacity: isFuture ? 0.3 : 1
-                    }}
-                    onMouseEnter={(e) => {
-                      if (!isSelected && !isFuture) e.currentTarget.style.background = 'rgba(255,255,255,0.1)';
-                    }}
-                    onMouseLeave={(e) => {
-                      if (!isSelected && !isFuture) e.currentTarget.style.background = isToday ? 'rgba(255,255,255,0.1)' : 'transparent';
-                    }}
                   >
                     {d}
                   </div>

app/components/ConfirmModal.jsx

@@ -1,43 +1,67 @@
 'use client';
 
-import { motion } from 'framer-motion';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
 import { TrashIcon } from './Icons';
 
-export default function ConfirmModal({ title, message, onConfirm, onCancel, confirmText = "确定删除" }) {
+export default function ConfirmModal({
+  title,
+  message,
+  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 (
-    <motion.div
-      className="modal-overlay"
-      role="dialog"
-      aria-modal="true"
-      onClick={(e) => {
-        e.stopPropagation();
-        onCancel();
-      }}
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      exit={{ opacity: 0 }}
-      style={{ zIndex: 10002 }}
-    >
-      <motion.div
-        initial={{ opacity: 0, scale: 0.95, y: 20 }}
-        animate={{ opacity: 1, scale: 1, y: 0 }}
-        exit={{ opacity: 0, scale: 0.95, y: 20 }}
-        className="glass card modal"
-        style={{ maxWidth: '400px' }}
-        onClick={(e) => e.stopPropagation()}
+    <Dialog open onOpenChange={handleOpenChange}>
+      <DialogContent
+        overlayClassName="!z-[12000]"
+        showCloseButton={false}
+        className="!z-[12010] max-w-[400px] flex flex-col gap-5 p-6"
       >
-        <div className="title" style={{ marginBottom: 12 }}>
-          <TrashIcon width="20" height="20" className="danger" />
-          <span>{title}</span>
-        </div>
-        <p className="muted" style={{ marginBottom: 24, fontSize: '14px', lineHeight: '1.6' }}>
+        <DialogHeader className="flex flex-row items-center gap-3 text-left">
+          {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)]">
           {message}
-        </p>
-        <div className="row" style={{ gap: 12 }}>
-          <button className="button secondary" onClick={onCancel} style={{ flex: 1, background: 'rgba(255,255,255,0.05)', color: 'var(--text)' }}>取消</button>
-          <button className="button danger" onClick={onConfirm} style={{ flex: 1 }}>{confirmText}</button>
+        </DialogDescription>
+        <div className="flex flex-col gap-3 sm:flex-row">
+          <button
+            type="button"
+            className="button secondary 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={onCancel}
+          >
+            取消
+          </button>
+          <button
+            type="button"
+            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}
+          </button>
         </div>
-      </motion.div>
-    </motion.div>
+      </DialogContent>
+    </Dialog>
   );
 }

app/components/DcaModal.jsx

@@ -1,13 +1,17 @@
 'use client';
 
 import { useEffect, useState, useRef } from 'react';
-import { motion } from 'framer-motion';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 import { DatePicker, NumericInput } from './Common';
 import { isNumber } from 'lodash';
 import { CloseIcon } from './Icons';
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+} from '@/components/ui/dialog';
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
@@ -170,262 +174,212 @@ export default function DcaModal({ fund, plan, onClose, onConfirm }) {
     return true;
   };
 
+  const handleOpenChange = (open) => {
+    if (!open) {
+      onClose?.();
+    }
+  };
+
   return (
-    <motion.div
-      className="modal-overlay"
-      role="dialog"
-      aria-modal="true"
-      aria-label="定投设置"
-      onClick={onClose}
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      exit={{ opacity: 0 }}
-    >
-      <motion.div
-        initial={{ opacity: 0, scale: 0.95, y: 20 }}
-        animate={{ opacity: 1, scale: 1, y: 0 }}
-        exit={{ opacity: 0, scale: 0.95, y: 20 }}
-        className="glass card modal"
-        onClick={(e) => e.stopPropagation()}
-        style={{ maxWidth: '420px' }}
+    <Dialog open onOpenChange={handleOpenChange}>
+      <DialogContent
+        showCloseButton={false}
+        className="glass card modal dca-modal"
+        overlayClassName="modal-overlay"
+        style={{
+          maxWidth: '420px',
+          maxHeight: '90vh',
+          display: 'flex',
+          flexDirection: 'column',
+          zIndex: 999,
+          width: '90vw',
+        }}
       >
-        <div className="title" style={{ marginBottom: 20, justifyContent: 'space-between' }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-            <span style={{ fontSize: '20px' }}>🔁</span>
-            <span>定投</span>
+        <DialogTitle className="sr-only">定投设置</DialogTitle>
+        <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>
-          <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>
+          <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
+          <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={{
-                    width: 32,
-                    height: 18,
-                    borderRadius: 999,
-                    background: enabled ? 'var(--primary)' : 'rgba(148,163,184,0.6)',
-                    position: 'relative',
-                    transition: 'background 0.2s'
+                    border: 'none',
+                    background: 'transparent',
+                    cursor: 'pointer',
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    gap: 6
                   }}
                 >
-                  <span
-                    style={{
-                      position: 'absolute',
-                      top: 2,
-                      left: enabled ? 16 : 2,
-                      width: 14,
-                      height: 14,
-                      borderRadius: '50%',
-                      background: '#0f172a',
-                      transition: 'left 0.2s'
-                    }}
-                  />
-                </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>
-          </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>
+                  <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="row" style={{ gap: 4, background: 'rgba(0,0,0,0.2)', borderRadius: 8, padding: 4 }}>
-                {CYCLES.map((opt) => (
-                  <button
-                    key={opt.value}
-                    type="button"
-                    onClick={() => setCycle(opt.value)}
-                    style={{
-                      flex: 1,
-                      border: 'none',
-                      background: cycle === opt.value ? 'var(--primary)' : 'transparent',
-                      color: cycle === opt.value ? '#05263b' : 'var(--muted)',
-                      borderRadius: 6,
-                      fontSize: 11,
-                      cursor: 'pointer',
-                      padding: '4px 6px',
-                      whiteSpace: 'nowrap'
-                    }}
-                  >
-                    {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="row" style={{ gap: 4, background: 'rgba(0,0,0,0.2)', borderRadius: 8, padding: 4 }}>
-                {WEEKDAY_OPTIONS.map((opt) => (
-                  <button
-                    key={opt.value}
-                    type="button"
-                    onClick={() => setWeeklyDay(opt.value)}
-                    style={{
-                      flex: 1,
-                      border: 'none',
-                      background: weeklyDay === opt.value ? 'var(--primary)' : 'transparent',
-                      color: weeklyDay === opt.value ? '#05263b' : 'var(--muted)',
-                      borderRadius: 6,
-                      fontSize: 12,
-                      cursor: 'pointer',
-                      padding: '6px 4px',
-                      whiteSpace: 'nowrap'
-                    }}
-                  >
-                    {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
-                style={{
-                  display: 'flex',
-                  flexWrap: 'wrap',
-                  gap: 4,
-                  background: 'rgba(0,0,0,0.2)',
-                  borderRadius: 8,
-                  padding: 4,
-                  maxHeight: 140,
-                  overflowY: 'auto',
-                  scrollBehavior: 'smooth'
-                }}
-              >
-                {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"
-                      onClick={() => setMonthlyDay(day)}
-                      style={{
-                        flex: '0 0 calc(25% - 4px)',
-                        border: 'none',
-                        background: active ? 'var(--primary)' : 'transparent',
-                        color: active ? '#05263b' : 'var(--muted)',
-                        borderRadius: 6,
-                        fontSize: 11,
-                        cursor: 'pointer',
-                        padding: '4px 0'
-                      }}
+                      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
-              style={{
-                borderRadius: 12,
-                border: '1px solid var(--border)',
-                padding: '10px 12px',
-                fontSize: 14,
-                background: 'rgba(15,23,42,0.6)'
-              }}
-            >
-              {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"
+              className="button secondary dca-cancel-btn"
               onClick={onClose}
-              style={{ flex: 1, background: 'rgba(255,255,255,0.05)', color: 'var(--text)' }}
+              style={{ flex: 1 }}
             >
               取消
             </button>
             <button
-              type="submit"
+              type="button"
               className="button"
               disabled={!isValid()}
+              onClick={handleSubmit}
               style={{ flex: 1, opacity: isValid() ? 1 : 0.6 }}
             >
               保存定投
             </button>
           </div>
-        </form>
-      </motion.div>
-    </motion.div>
+        </div>
+      </DialogContent>
+    </Dialog>
   );
 }
 

app/components/EmptyStateCard.jsx

@@ -0,0 +1,33 @@
+'use client';
+
+export default function EmptyStateCard({
+  fundsLength = 0,
+  currentTab = 'all',
+  onAddToGroup,
+}) {
+  const isEmpty = fundsLength === 0;
+  const isGroupTab = currentTab !== 'all' && currentTab !== 'fav';
+
+  return (
+    <div
+      className="glass card empty"
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '60px 20px',
+      }}
+    >
+      <div style={{ fontSize: '48px', marginBottom: 16, opacity: 0.5 }}>📂</div>
+      <div className="muted" style={{ marginBottom: 20 }}>
+        {isEmpty ? '尚未添加基金' : '该分组下暂无数据'}
+      </div>
+      {isGroupTab && fundsLength > 0 && (
+        <button className="button" onClick={onAddToGroup}>
+          添加基金到此分组
+        </button>
+      )}
+    </div>
+  );
+}

app/components/FitText.jsx

@@ -0,0 +1,87 @@
+'use client';
+
+import { useLayoutEffect, useRef } from 'react';
+
+/**
+ * 根据容器宽度动态缩小字体，使内容不溢出。
+ * 使用 ResizeObserver 监听容器宽度，内容超出时按比例缩小 fontSize，不低于 minFontSize。
+ *
+ * @param {Object} props
+ * @param {React.ReactNode} props.children - 要显示的文本（会单行、不换行）
+ * @param {number} [props.maxFontSize=14] - 最大字号（px）
+ * @param {number} [props.minFontSize=10] - 最小字号（px），再窄也不低于此值
+ * @param {string} [props.className] - 外层容器 className
+ * @param {Object} [props.style] - 外层容器 style（宽度由父级决定，建议父级有明确宽度）
+ * @param {string} [props.as='span'] - 外层容器标签 'span' | 'div'
+ */
+export default function FitText({
+  children,
+  maxFontSize = 14,
+  minFontSize = 10,
+  className,
+  style = {},
+  as: Tag = 'span',
+}) {
+  const containerRef = useRef(null);
+  const contentRef = useRef(null);
+
+  const adjust = () => {
+    const container = containerRef.current;
+    const content = contentRef.current;
+    if (!container || !content) return;
+
+    const containerWidth = container.clientWidth;
+    if (containerWidth <= 0) return;
+
+    // 先恢复到最大字号再测量，确保在「未缩放」状态下取到真实内容宽度
+    content.style.fontSize = `${maxFontSize}px`;
+
+    const run = () => {
+      const contentWidth = content.scrollWidth;
+      if (contentWidth <= 0) return;
+      let size = maxFontSize;
+      if (contentWidth > containerWidth) {
+        size = (containerWidth / contentWidth) * maxFontSize;
+        size = Math.max(minFontSize, Math.min(maxFontSize, size));
+      }
+      content.style.fontSize = `${size}px`;
+    };
+
+    requestAnimationFrame(run);
+  };
+
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    adjust();
+    const ro = new ResizeObserver(adjust);
+    ro.observe(container);
+    return () => ro.disconnect();
+  }, [children, maxFontSize, minFontSize]);
+
+  return (
+    <Tag
+      ref={containerRef}
+      className={className}
+      style={{
+        display: 'block',
+        width: '100%',
+        overflow: 'hidden',
+        ...style,
+      }}
+    >
+      <span
+        ref={contentRef}
+        style={{
+          display: 'inline-block',
+          whiteSpace: 'nowrap',
+          fontWeight: 'inherit',
+          fontSize: `${maxFontSize}px`,
+        }}
+      >
+        {children}
+      </span>
+    </Tag>
+  );
+}

app/components/FundCard.jsx

@@ -0,0 +1,490 @@
+'use client';
+
+import { motion, AnimatePresence } from 'framer-motion';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
+import { isNumber, isString } from 'lodash';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Stat } from './Common';
+import FundTrendChart from './FundTrendChart';
+import FundIntradayChart from './FundIntradayChart';
+import {
+  ChevronIcon,
+  ExitIcon,
+  SettingsIcon,
+  StarIcon,
+  SwitchIcon,
+  TrashIcon,
+} from './Icons';
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(isSameOrAfter);
+
+const DEFAULT_TZ = 'Asia/Shanghai';
+const getBrowserTimeZone = () => {
+  if (typeof Intl !== 'undefined' && Intl.DateTimeFormat) {
+    const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    return tz || DEFAULT_TZ;
+  }
+  return DEFAULT_TZ;
+};
+const TZ = getBrowserTimeZone();
+const toTz = (input) => (input ? dayjs.tz(input, TZ) : dayjs().tz(TZ));
+
+const formatDisplayDate = (value) => {
+  if (!value) return '-';
+
+  const d = toTz(value);
+  if (!d.isValid()) return value;
+
+  const hasTime = /[T\s]\d{2}:\d{2}/.test(String(value));
+
+  return hasTime ? d.format('MM-DD HH:mm') : d.format('MM-DD');
+};
+
+export default function FundCard({
+  fund: f,
+  todayStr,
+  currentTab,
+  favorites,
+  dcaPlans,
+  holdings,
+  percentModes,
+  valuationSeries,
+  collapsedCodes,
+  collapsedTrends,
+  transactions,
+  theme,
+  isTradingDay,
+  refreshing,
+  getHoldingProfit,
+  onRemoveFromGroup,
+  onToggleFavorite,
+  onRemoveFund,
+  onHoldingClick,
+  onActionClick,
+  onPercentModeToggle,
+  onToggleCollapse,
+  onToggleTrendCollapse,
+  layoutMode = 'card', // 'card' | 'drawer'，drawer 时前10重仓与业绩走势以 Tabs 展示
+  masked = false,
+}) {
+  const holding = holdings[f?.code];
+  const profit = getHoldingProfit?.(f, holding) ?? null;
+  const hasHoldings = f.holdingsIsLastQuarter && Array.isArray(f.holdings) && f.holdings.length > 0;
+
+  const style = layoutMode === 'drawer' ? {
+    border: 'none',
+    boxShadow: 'none',
+    paddingLeft: 0,
+    paddingRight: 0,
+    background: theme === 'light'  ? 'rgb(250,250,250)' : 'none',
+  } : {};
+
+  return (
+    <motion.div
+      className="glass card"
+      style={{
+        position: 'relative',
+        zIndex: 1,
+        ...style,
+      }}
+    >
+      <div className="row" style={{ marginBottom: 10 }}>
+        <div className="title">
+          {currentTab !== 'all' && currentTab !== 'fav' ? (
+            <button
+              className="icon-button fav-button"
+              onClick={(e) => {
+                e.stopPropagation();
+                onRemoveFromGroup?.(f.code);
+              }}
+              style={{backgroundColor: 'transparent'}}
+              title="从当前分组移除"
+            >
+              <ExitIcon width="18" height="18" style={{ transform: 'rotate(180deg)' }} />
+            </button>
+          ) : (
+            <button
+              className={`icon-button fav-button ${favorites?.has(f.code) ? 'active' : ''}`}
+              onClick={(e) => {
+                e.stopPropagation();
+                onToggleFavorite?.(f.code);
+              }}
+              title={favorites?.has(f.code) ? '取消自选' : '添加自选'}
+            >
+              <StarIcon width="18" height="18" filled={favorites?.has(f.code)} />
+            </button>
+          )}
+          <div className="title-text">
+            <span
+              className="name-text"
+              title={f.jzrq === todayStr ? '今日净值已更新' : ''}
+            >
+              {f.name}
+            </span>
+            <span className="muted">
+              #{f.code}
+              {dcaPlans?.[f.code]?.enabled === true && <span className="dca-indicator">定</span>}
+              {f.jzrq === todayStr && <span className="updated-indicator">✓</span>}
+            </span>
+          </div>
+        </div>
+
+        <div className="actions">
+          <div className="badge-v">
+            <span>{f.noValuation ? '净值日期' : '估值时间'}</span>
+            <strong>
+              {f.noValuation
+                ? formatDisplayDate(f.jzrq)
+                : formatDisplayDate(f.gztime || f.time)}
+            </strong>
+          </div>
+          <div className="row" style={{ gap: 4 }}>
+            <button
+              className="icon-button danger"
+              onClick={() => !refreshing && onRemoveFund?.(f)}
+              title="删除"
+              disabled={refreshing}
+              style={{
+                width: '28px',
+                height: '28px',
+                opacity: refreshing ? 0.6 : 1,
+                cursor: refreshing ? 'not-allowed' : 'pointer',
+              }}
+            >
+              <TrashIcon width="14" height="14" />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div className="row" style={{ marginBottom: 12 }}>
+        <Stat label="单位净值" value={f.dwjz ?? '—'} />
+        {f.noValuation ? (
+          <Stat
+            label="涨跌幅"
+            value={
+              f.zzl !== undefined && f.zzl !== null
+                ? `${f.zzl > 0 ? '+' : ''}${Number(f.zzl).toFixed(2)}%`
+                : '—'
+            }
+            delta={f.zzl}
+          />
+        ) : (
+          <>
+            {(() => {
+              const hasTodayData = f.jzrq === todayStr;
+              let isYesterdayChange = false;
+              let isPreviousTradingDay = false;
+              if (!hasTodayData && isString(f.jzrq)) {
+                const today = toTz(todayStr).startOf('day');
+                const jzDate = toTz(f.jzrq).startOf('day');
+                const yesterday = today.clone().subtract(1, 'day');
+                if (jzDate.isSame(yesterday, 'day')) {
+                  isYesterdayChange = true;
+                } else if (jzDate.isBefore(yesterday, 'day')) {
+                  isPreviousTradingDay = true;
+                }
+              }
+              const shouldHideChange =
+                isTradingDay && !hasTodayData && !isYesterdayChange && !isPreviousTradingDay;
+
+              if (shouldHideChange) return null;
+
+              const changeLabel = hasTodayData ? '涨跌幅' : '昨日涨幅';
+              return (
+                <Stat
+                  label={changeLabel}
+                  value={
+                    f.zzl !== undefined
+                      ? `${f.zzl > 0 ? '+' : ''}${Number(f.zzl).toFixed(2)}%`
+                      : ''
+                  }
+                  delta={f.zzl}
+                />
+              );
+            })()}
+            <Stat
+              label="估值净值"
+              value={
+                f.estPricedCoverage > 0.05 ? f.estGsz.toFixed(4) : (f.gsz ?? '—')
+              }
+            />
+            <Stat
+              label="估值涨幅"
+              value={
+                f.estPricedCoverage > 0.05
+                  ? `${f.estGszzl > 0 ? '+' : ''}${f.estGszzl.toFixed(2)}%`
+                  : isNumber(f.gszzl)
+                    ? `${f.gszzl > 0 ? '+' : ''}${f.gszzl.toFixed(2)}%`
+                    : f.gszzl ?? '—'
+              }
+              delta={f.estPricedCoverage > 0.05 ? f.estGszzl : Number(f.gszzl) || 0}
+            />
+          </>
+        )}
+      </div>
+
+      <div className="row" style={{ marginBottom: 12 }}>
+        {!profit ? (
+          <div
+            className="stat"
+            style={{ flexDirection: 'column', gap: 4 }}
+          >
+            <span className="label">持仓金额</span>
+            <div
+              className="value muted"
+              style={{
+                fontSize: '14px',
+                display: 'flex',
+                alignItems: 'center',
+                gap: 4,
+                cursor: 'pointer',
+              }}
+              onClick={() => onHoldingClick?.(f)}
+            >
+              未设置  <SettingsIcon width="12" height="12" />
+            </div>
+          </div>
+        ) : (
+          <>
+            <div
+              className="stat"
+              style={{ cursor: 'pointer', flexDirection: 'column', gap: 4 }}
+              onClick={() => onActionClick?.(f)}
+            >
+              <span
+                className="label"
+                style={{ display: 'flex', alignItems: 'center', gap: 4 }}
+              >
+                持仓金额 <SettingsIcon width="12" height="12" style={{ opacity: 0.7 }} />
+              </span>
+              <span className="value">
+                {masked ? '******' : `¥${profit.amount.toFixed(2)}`}
+              </span>
+            </div>
+            <div className="stat" style={{ flexDirection: 'column', gap: 4 }}>
+              <span className="label">当日收益</span>
+              <span
+                className={`value ${
+                  profit.profitToday != null
+                    ? profit.profitToday > 0
+                      ? 'up'
+                      : profit.profitToday < 0
+                        ? 'down'
+                        : ''
+                    : 'muted'
+                }`}
+              >
+                {profit.profitToday != null
+                  ? masked
+                    ? '******'
+                    : `${profit.profitToday > 0 ? '+' : profit.profitToday < 0 ? '-' : ''}¥${Math.abs(profit.profitToday).toFixed(2)}`
+                  : '--'}
+              </span>
+            </div>
+            {profit.profitTotal !== null && (
+              <div
+                className="stat"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onPercentModeToggle?.(f.code);
+                }}
+                style={{ cursor: 'pointer', flexDirection: 'column', gap: 4, alignItems: 'flex-end' }}
+                title="点击切换金额/百分比"
+              >
+                <span
+                  className="label"
+                  style={{ display: 'flex', alignItems: 'center', gap: 1, justifyContent: 'flex-end' }}
+                >
+                  持有收益{percentModes?.[f.code] ? '(%)' : ''}
+                  <SwitchIcon />
+                </span>
+                <span
+                  className={`value ${
+                    profit.profitTotal > 0 ? 'up' : profit.profitTotal < 0 ? 'down' : ''
+                  }`}
+                >
+                  {masked
+                    ? '******'
+                    : <>
+                        {profit.profitTotal > 0 ? '+' : profit.profitTotal < 0 ? '-' : ''}
+                        {percentModes?.[f.code]
+                          ? `${Math.abs(
+                              holding?.cost * holding?.share
+                                ? (profit.profitTotal / (holding.cost * holding.share)) * 100
+                                : 0,
+                            ).toFixed(2)}%`
+                          : `¥${Math.abs(profit.profitTotal).toFixed(2)}`}
+                      </>}
+                </span>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+
+      {f.estPricedCoverage > 0.05 && (
+        <div
+          style={{
+            fontSize: '10px',
+            color: 'var(--muted)',
+            marginTop: -8,
+            marginBottom: 10,
+            textAlign: 'right',
+          }}
+        >
+          基于 {Math.round(f.estPricedCoverage * 100)}% 持仓估算
+        </div>
+      )}
+
+      {(() => {
+        const showIntraday =
+          Array.isArray(valuationSeries?.[f.code]) && valuationSeries[f.code].length >= 2;
+        if (!showIntraday) return null;
+
+        if (
+          f.gztime &&
+          toTz(todayStr).startOf('day').isAfter(toTz(f.gztime).startOf('day'))
+        ) {
+          return null;
+        }
+
+        if (
+          f.jzrq &&
+          f.gztime &&
+          toTz(f.jzrq).startOf('day').isSameOrAfter(toTz(f.gztime).startOf('day'))
+        ) {
+          return null;
+        }
+
+        return (
+          <FundIntradayChart
+            key={`${f.code}-intraday-${theme}`}
+            series={valuationSeries[f.code]}
+            referenceNav={f.dwjz != null ? Number(f.dwjz) : undefined}
+            theme={theme}
+          />
+        );
+      })()}
+
+      {layoutMode === 'drawer' ? (
+        <Tabs defaultValue={hasHoldings ? 'holdings' : 'trend'} className="w-full">
+          <TabsList className={`w-full ${hasHoldings ? 'grid grid-cols-2' : ''}`}>
+            {hasHoldings && (
+              <TabsTrigger value="holdings">前10重仓股票</TabsTrigger>
+            )}
+            <TabsTrigger value="trend">业绩走势</TabsTrigger>
+          </TabsList>
+          {hasHoldings && (
+            <TabsContent value="holdings" className="mt-3 outline-none">
+              <div className="list">
+                {f.holdings.map((h, idx) => (
+                  <div className="item" key={idx}>
+                    <span className="name">{h.name}</span>
+                    <div className="values">
+                      {isNumber(h.change) && (
+                        <span
+                          className={`badge ${h.change > 0 ? 'up' : h.change < 0 ? 'down' : ''}`}
+                          style={{ marginRight: 8 }}
+                        >
+                          {h.change > 0 ? '+' : ''}
+                          {h.change.toFixed(2)}%
+                        </span>
+                      )}
+                      <span className="weight">{h.weight}</span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </TabsContent>
+          )}
+          <TabsContent value="trend" className="mt-3 outline-none">
+            <FundTrendChart
+              key={`${f.code}-${theme}`}
+              code={f.code}
+              isExpanded
+              onToggleExpand={() => onToggleTrendCollapse?.(f.code)}
+              transactions={transactions?.[f.code] || []}
+              theme={theme}
+              hideHeader
+            />
+          </TabsContent>
+        </Tabs>
+      ) : (
+        <>
+          {hasHoldings && (
+            <>
+              <div
+                style={{ marginBottom: 8, cursor: 'pointer', userSelect: 'none' }}
+                className="title"
+                onClick={() => onToggleCollapse?.(f.code)}
+              >
+                <div className="row" style={{ width: '100%', flex: 1 }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                    <span>前10重仓股票</span>
+                    <ChevronIcon
+                      width="16"
+                      height="16"
+                      className="muted"
+                      style={{
+                        transform: collapsedCodes?.has(f.code)
+                          ? 'rotate(-90deg)'
+                          : 'rotate(0deg)',
+                        transition: 'transform 0.2s ease',
+                      }}
+                    />
+                  </div>
+                  <span className="muted">涨跌幅 / 占比</span>
+                </div>
+              </div>
+              <AnimatePresence>
+                {!collapsedCodes?.has(f.code) && (
+                  <motion.div
+                    initial={{ height: 0, opacity: 0 }}
+                    animate={{ height: 'auto', opacity: 1 }}
+                    exit={{ height: 0, opacity: 0 }}
+                    transition={{ duration: 0.3, ease: 'easeInOut' }}
+                    style={{ overflow: 'hidden' }}
+                  >
+                    <div className="list">
+                      {f.holdings.map((h, idx) => (
+                        <div className="item" key={idx}>
+                          <span className="name">{h.name}</span>
+                          <div className="values">
+                            {isNumber(h.change) && (
+                              <span
+                                className={`badge ${h.change > 0 ? 'up' : h.change < 0 ? 'down' : ''}`}
+                                style={{ marginRight: 8 }}
+                              >
+                                {h.change > 0 ? '+' : ''}
+                                {h.change.toFixed(2)}%
+                              </span>
+                            )}
+                            <span className="weight">{h.weight}</span>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </>
+          )}
+          <FundTrendChart
+            key={`${f.code}-${theme}`}
+            code={f.code}
+            isExpanded={!collapsedTrends?.has(f.code)}
+            onToggleExpand={() => onToggleTrendCollapse?.(f.code)}
+            transactions={transactions?.[f.code] || []}
+            theme={theme}
+          />
+        </>
+      )}
+    </motion.div>
+  );
+}

app/components/FundIntradayChart.jsx

@@ -22,14 +22,41 @@ ChartJS.register(
   Filler
 );
 
+const CHART_COLORS = {
+  dark: {
+    danger: '#f87171',
+    success: '#34d399',
+    primary: '#22d3ee',
+    muted: '#9ca3af',
+    border: '#1f2937',
+    text: '#e5e7eb',
+    crosshairText: '#0f172a',
+  },
+  light: {
+    danger: '#dc2626',
+    success: '#059669',
+    primary: '#0891b2',
+    muted: '#475569',
+    border: '#e2e8f0',
+    text: '#0f172a',
+    crosshairText: '#ffffff',
+  }
+};
+
+function getChartThemeColors(theme) {
+  return CHART_COLORS[theme] || CHART_COLORS.dark;
+}
+
 /**
  * 分时图：展示当日（或最近一次记录日）的估值序列，纵轴为相对参考净值的涨跌幅百分比。
  * series: Array<{ time: string, value: number, date?: string }>
  * referenceNav: 参考净值（最新单位净值），用于计算涨跌幅；未传则用当日第一个估值作为参考。
+ * theme: 'light' | 'dark'，用于亮色主题下坐标轴与 crosshair 样式
  */
-export default function FundIntradayChart({ series = [], referenceNav }) {
+export default function FundIntradayChart({ series = [], referenceNav, theme = 'dark' }) {
   const chartRef = useRef(null);
   const hoverTimeoutRef = useRef(null);
+  const chartColors = useMemo(() => getChartThemeColors(theme), [theme]);
 
   const chartData = useMemo(() => {
     if (!series.length) return { labels: [], datasets: [] };
@@ -40,9 +67,8 @@ export default function FundIntradayChart({ series = [], referenceNav }) {
       : values[0];
     const percentages = values.map((v) => (ref ? ((v - ref) / ref) * 100 : 0));
     const lastPct = percentages[percentages.length - 1];
-    const riseColor = '#f87171';  // 涨用红色
-    const fallColor = '#34d399';  // 跌用绿色
-    // 以最新点相对参考净值的涨跌定色：涨(>=0)红，跌(<0)绿
+    const riseColor = chartColors.danger;
+    const fallColor = chartColors.success;
     const lineColor = lastPct != null && lastPct >= 0 ? riseColor : fallColor;
 
     return {
@@ -68,9 +94,11 @@ export default function FundIntradayChart({ series = [], referenceNav }) {
         }
       ]
     };
-  }, [series, referenceNav]);
+  }, [series, referenceNav, chartColors.danger, chartColors.success]);
 
-  const options = useMemo(() => ({
+  const options = useMemo(() => {
+    const colors = getChartThemeColors(theme);
+    return {
     responsive: true,
     maintainAspectRatio: false,
     interaction: { mode: 'index', intersect: false },
@@ -88,7 +116,7 @@ export default function FundIntradayChart({ series = [], referenceNav }) {
         display: true,
         grid: { display: false },
         ticks: {
-          color: '#9ca3af',
+          color: colors.muted,
           font: { size: 10 },
           maxTicksLimit: 6
         }
@@ -96,9 +124,9 @@ export default function FundIntradayChart({ series = [], referenceNav }) {
       y: {
         display: true,
         position: 'left',
-        grid: { color: '#1f2937', drawBorder: false },
+        grid: { color: colors.border, drawBorder: false },
         ticks: {
-          color: '#9ca3af',
+          color: colors.muted,
           font: { size: 10 },
           callback: (v) => (isNumber(v) ? `${v >= 0 ? '+' : ''}${v.toFixed(2)}%` : v)
         }
@@ -142,7 +170,8 @@ export default function FundIntradayChart({ series = [], referenceNav }) {
         }, 2000);
       }
     }
-  }), []);
+  };
+  }, [theme]);
 
   useEffect(() => {
     return () => {
@@ -152,7 +181,9 @@ export default function FundIntradayChart({ series = [], referenceNav }) {
     };
   }, []);
 
-  const plugins = useMemo(() => [{
+  const plugins = useMemo(() => {
+    const colors = getChartThemeColors(theme);
+    return [{
     id: 'crosshair',
     afterDraw: (chart) => {
       const ctx = chart.ctx;
@@ -175,17 +206,15 @@ export default function FundIntradayChart({ series = [], referenceNav }) {
       ctx.save();
       ctx.setLineDash([3, 3]);
       ctx.lineWidth = 1;
-      ctx.strokeStyle = '#9ca3af';
+      ctx.strokeStyle = colors.muted;
       ctx.moveTo(x, topY);
       ctx.lineTo(x, bottomY);
       ctx.moveTo(leftX, y);
       ctx.lineTo(rightX, y);
       ctx.stroke();
 
-      const prim = typeof document !== 'undefined'
-        ? (getComputedStyle(document.documentElement).getPropertyValue('--primary').trim() || '#22d3ee')
-        : '#22d3ee';
-      const bgText = '#0f172a';
+      const prim = colors.primary;
+      const textCol = colors.crosshairText;
 
       ctx.font = '10px sans-serif';
       ctx.textAlign = 'center';
@@ -202,7 +231,7 @@ export default function FundIntradayChart({ series = [], referenceNav }) {
         const labelCenterX = labelLeft + tw / 2;
         ctx.fillStyle = prim;
         ctx.fillRect(labelLeft, bottomY, tw, 16);
-        ctx.fillStyle = bgText;
+        ctx.fillStyle = textCol;
         ctx.fillText(timeStr, labelCenterX, bottomY + 8);
       }
       if (data && index in data) {
@@ -211,12 +240,13 @@ export default function FundIntradayChart({ series = [], referenceNav }) {
         const vw = ctx.measureText(valueStr).width + 8;
         ctx.fillStyle = prim;
         ctx.fillRect(leftX, y - 8, vw, 16);
-        ctx.fillStyle = bgText;
+        ctx.fillStyle = textCol;
         ctx.fillText(valueStr, leftX + vw / 2, y);
       }
       ctx.restore();
     }
-  }], []);
+  }];
+  }, [theme]);
 
   if (series.length < 2) return null;
 
@@ -230,11 +260,20 @@ export default function FundIntradayChart({ series = [], referenceNav }) {
           <span
             style={{
               fontSize: 9,
-              padding: '1px 5px',
+              padding: '2px 6px',
               borderRadius: 4,
-              background: 'var(--primary)',
-              color: '#0f172a',
-              fontWeight: 600
+              ...(theme === 'light'
+                ? {
+                    border: '1px solid',
+                    borderColor: chartColors.primary,
+                    color: chartColors.primary,
+                    background: 'transparent',
+                  }
+                : {
+                    background: 'var(--primary)',
+                    color: '#0f172a',
+                  }),
+              fontWeight: 600,
             }}
             title="正在测试中的功能"
           >
@@ -243,7 +282,7 @@ export default function FundIntradayChart({ series = [], referenceNav }) {
         </span>
         {displayDate && <span style={{ fontSize: 11 }}>估值日期 {displayDate}</span>}
       </div>
-      <div style={{ position: 'relative', height: 100, width: '100%' }}>
+      <div style={{ position: 'relative', height: 100, width: '100%', touchAction: 'pan-y' }}>
         <Line ref={chartRef} data={chartData} options={options} plugins={plugins} />
       </div>
     </div>

app/components/FundTrendChart.jsx

@@ -29,7 +29,32 @@ ChartJS.register(
   Filler
 );
 
-export default function FundTrendChart({ code, isExpanded, onToggleExpand, transactions = [] }) {
+const CHART_COLORS = {
+  dark: {
+    danger: '#f87171',
+    success: '#34d399',
+    primary: '#22d3ee',
+    muted: '#9ca3af',
+    border: '#1f2937',
+    text: '#e5e7eb',
+    crosshairText: '#0f172a',
+  },
+  light: {
+    danger: '#dc2626',
+    success: '#059669',
+    primary: '#0891b2',
+    muted: '#475569',
+    border: '#e2e8f0',
+    text: '#0f172a',
+    crosshairText: '#ffffff',
+  }
+};
+
+function getChartThemeColors(theme) {
+  return CHART_COLORS[theme] || CHART_COLORS.dark;
+}
+
+export default function FundTrendChart({ code, isExpanded, onToggleExpand, transactions = [], theme = 'dark', hideHeader = false }) {
   const [range, setRange] = useState('1m');
   const [data, setData] = useState([]);
   const [loading, setLoading] = useState(false);
@@ -37,6 +62,8 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
   const chartRef = useRef(null);
   const hoverTimeoutRef = useRef(null);
 
+  const chartColors = useMemo(() => getChartThemeColors(theme), [theme]);
+
   useEffect(() => {
     // If collapsed, don't fetch data unless we have no data yet
     if (!isExpanded && data.length > 0) return;
@@ -74,7 +101,8 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
     { label: '近3月', value: '3m' },
     { label: '近6月', value: '6m' },
     { label: '近1年', value: '1y' },
-    { label: '近3年', value: '3y'}
+    { label: '近3年', value: '3y' },
+    { label: '成立来', value: 'all' }
   ];
 
   const change = useMemo(() => {
@@ -84,12 +112,11 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
      return ((last - first) / first) * 100;
   }, [data]);
 
-  // Red for up, Green for down (CN market style)
-  // Hardcoded hex values from globals.css for Chart.js
-  const upColor = '#f87171'; // --danger，与折线图红色一致
-  const downColor = '#34d399'; // --success
+  // Red for up, Green for down (CN market style)，随主题使用 CSS 变量
+  const upColor = chartColors.danger;
+  const downColor = chartColors.success;
   const lineColor = change >= 0 ? upColor : downColor;
-  const primaryColor = typeof document !== 'undefined' ? (getComputedStyle(document.documentElement).getPropertyValue('--primary').trim() || '#22d3ee') : '#22d3ee';
+  const primaryColor = chartColors.primary;
 
   const chartData = useMemo(() => {
     // Calculate percentage change based on the first data point
@@ -165,9 +192,10 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
         }
       ]
     };
-  }, [data, lineColor, transactions, primaryColor]);
+  }, [data, transactions, lineColor, primaryColor, upColor]);
 
   const options = useMemo(() => {
+    const colors = getChartThemeColors(theme);
     return {
       responsive: true,
       maintainAspectRatio: false,
@@ -190,7 +218,7 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
             drawBorder: false
           },
           ticks: {
-            color: '#9ca3af',
+            color: colors.muted,
             font: { size: 10 },
             maxTicksLimit: 4,
             maxRotation: 0
@@ -201,12 +229,12 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
           display: true,
           position: 'left',
           grid: {
-            color: '#1f2937',
+            color: colors.border,
             drawBorder: false,
             tickLength: 0
           },
           ticks: {
-            color: '#9ca3af',
+            color: colors.muted,
             font: { size: 10 },
             count: 5,
             callback: (value) => `${value.toFixed(2)}%`
@@ -240,7 +268,7 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
       },
       onClick: () => {}
     };
-  }, []);
+  }, [theme]);
 
   useEffect(() => {
     return () => {
@@ -250,7 +278,9 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
     };
   }, []);
 
-  const plugins = useMemo(() => [{
+  const plugins = useMemo(() => {
+    const colors = getChartThemeColors(theme);
+    return [{
     id: 'crosshair',
     afterEvent: (chart, args) => {
       const { event, replay } = args || {};
@@ -276,7 +306,7 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
     afterDraw: (chart) => {
       const ctx = chart.ctx;
       const datasets = chart.data.datasets;
-      const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary').trim() || '#22d3ee';
+      const primaryColor = colors.primary;
 
       // 绘制圆角矩形（兼容无 roundRect 的环境）
       const drawRoundRect = (left, top, w, h, r) => {
@@ -377,7 +407,7 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
         ctx.beginPath();
         ctx.setLineDash([3, 3]);
         ctx.lineWidth = 1;
-        ctx.strokeStyle = '#9ca3af';
+        ctx.strokeStyle = colors.muted;
 
         // Draw vertical line
         ctx.moveTo(x, topY);
@@ -415,7 +445,7 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
                const labelCenterX = labelLeft + textWidth / 2;
                ctx.fillStyle = primaryColor;
                ctx.fillRect(labelLeft, bottomY, textWidth, 16);
-               ctx.fillStyle = '#0f172a'; // --background
+               ctx.fillStyle = colors.crosshairText;
                ctx.fillText(dateStr, labelCenterX, bottomY + 8);
 
                // Y axis label (value)
@@ -423,7 +453,7 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
                const valWidth = ctx.measureText(valueStr).width + 8;
                ctx.fillStyle = primaryColor;
                ctx.fillRect(leftX, y - 8, valWidth, 16);
-               ctx.fillStyle = '#0f172a'; // --background
+               ctx.fillStyle = colors.crosshairText;
                ctx.textAlign = 'center';
                ctx.fillText(valueStr, leftX + valWidth / 2, y);
            }
@@ -442,7 +472,7 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
                 const label = datasets[dsIndex].label;
                 // Determine background color based on dataset index
                 // 1 = Buy (主题色), 2 = Sell (与折线图红色一致)
-                const bgColor = dsIndex === 1 ? primaryColor : '#f87171';
+                const bgColor = dsIndex === 1 ? primaryColor : colors.danger;
 
                 // If collision, offset Buy label upwards
                 let yOffset = 0;
@@ -457,97 +487,105 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
         ctx.restore();
       }
     }
-  }], []); // 移除 data 依赖，因为我们直接从 chart 实例读取数据
+  }];
+  }, [theme]); // theme 变化时重算以应用亮色/暗色坐标轴与 crosshair
 
-  return (
-    <div style={{ marginTop: 16 }} onClick={(e) => e.stopPropagation()}>
-      <div
-        style={{ marginBottom: 8, cursor: 'pointer', userSelect: 'none' }}
-        className="title"
-        onClick={onToggleExpand}
-      >
-        <div className="row" style={{ width: '100%', flex: 1 }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-            <span>业绩走势</span>
-            <ChevronIcon
-              width="16"
-              height="16"
-              className="muted"
-              style={{
-                transform: !isExpanded ? 'rotate(-90deg)' : 'rotate(0deg)',
-                transition: 'transform 0.2s ease'
-              }}
-            />
+  const chartBlock = (
+    <>
+      <div style={{ position: 'relative', height: 180, width: '100%', touchAction: 'pan-y' }}>
+        {loading && (
+          <div className="chart-overlay" style={{ backdropFilter: 'blur(2px)' }}>
+            <span className="muted" style={{ fontSize: '12px' }}>加载中...</span>
           </div>
-          {data.length > 0 && (
-             <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-               <span className="muted">{ranges.find(r => r.value === range)?.label}涨跌幅</span>
-               <span style={{ color: lineColor, fontWeight: 600 }}>
-                 {change > 0 ? '+' : ''}{change.toFixed(2)}%
-               </span>
-             </div>
-          )}
-        </div>
+        )}
+
+        {!loading && data.length === 0 && (
+          <div className="chart-overlay">
+            <span className="muted" style={{ fontSize: '12px' }}>暂无数据</span>
+          </div>
+        )}
+
+        {data.length > 0 && (
+          <Line ref={chartRef} data={chartData} options={options} plugins={plugins} />
+        )}
       </div>
 
-      <AnimatePresence>
-        {isExpanded && (
-          <motion.div
-            initial={{ height: 0, opacity: 0 }}
-            animate={{ height: 'auto', opacity: 1 }}
-            exit={{ height: 0, opacity: 0 }}
-            transition={{ duration: 0.3, ease: 'easeInOut' }}
-            style={{ overflow: 'hidden' }}
+      <div className="trend-range-bar">
+        {ranges.map(r => (
+          <button
+            key={r.value}
+            type="button"
+            className={`trend-range-btn ${range === r.value ? 'active' : ''}`}
+            onClick={(e) => { e.stopPropagation(); setRange(r.value); }}
           >
-            <div style={{ position: 'relative', height: 180, width: '100%' }}>
-              {loading && (
-                <div style={{
-                  position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
-                  background: 'rgba(255,255,255,0.02)', zIndex: 10, backdropFilter: 'blur(2px)'
-                }}>
-                  <span className="muted" style={{ fontSize: '12px' }}>加载中...</span>
-                </div>
-              )}
+            {r.label}
+          </button>
+        ))}
+      </div>
+    </>
+  );
 
-              {!loading && data.length === 0 && (
-                 <div style={{
-                  position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
-                  background: 'rgba(255,255,255,0.02)', zIndex: 10
-                }}>
-                  <span className="muted" style={{ fontSize: '12px' }}>暂无数据</span>
-                </div>
-              )}
-
-              {data.length > 0 && (
-                <Line ref={chartRef} data={chartData} options={options} plugins={plugins} />
-              )}
+  return (
+    <div style={{ marginTop: hideHeader ? 0 : 16 }} onClick={(e) => e.stopPropagation()}>
+      {!hideHeader && (
+        <div
+          style={{ marginBottom: 8, cursor: 'pointer', userSelect: 'none' }}
+          className="title"
+          onClick={onToggleExpand}
+        >
+          <div className="row" style={{ width: '100%', flex: 1 }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+              <span>业绩走势</span>
+              <ChevronIcon
+                width="16"
+                height="16"
+                className="muted"
+                style={{
+                  transform: !isExpanded ? 'rotate(-90deg)' : 'rotate(0deg)',
+                  transition: 'transform 0.2s ease'
+                }}
+              />
             </div>
+            {data.length > 0 && (
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                <span className="muted">{ranges.find(r => r.value === range)?.label}涨跌幅</span>
+                <span style={{ color: lineColor, fontWeight: 600 }}>
+                  {change > 0 ? '+' : ''}{change.toFixed(2)}%
+                </span>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
 
-            <div style={{ display: 'flex', gap: 4, marginTop: 12, justifyContent: 'space-between', background: 'rgba(0,0,0,0.2)', padding: 4, borderRadius: 8 }}>
-              {ranges.map(r => (
-                <button
-                  key={r.value}
-                  onClick={(e) => { e.stopPropagation(); setRange(r.value); }}
-                  style={{
-                    flex: 1,
-                    padding: '6px 0',
-                    fontSize: '11px',
-                    borderRadius: '6px',
-                    border: 'none',
-                    background: range === r.value ? 'rgba(255,255,255,0.1)' : 'transparent',
-                    color: range === r.value ? 'var(--primary)' : 'var(--muted)',
-                    cursor: 'pointer',
-                    transition: 'all 0.2s',
-                    fontWeight: range === r.value ? 600 : 400
-                  }}
-                >
-                  {r.label}
-                </button>
-              ))}
-            </div>
-          </motion.div>
-        )}
-      </AnimatePresence>
+      {hideHeader && data.length > 0 && (
+        <div className="row" style={{ marginBottom: 8, justifyContent: 'flex-end' }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+            <span className="muted">{ranges.find(r => r.value === range)?.label}涨跌幅</span>
+            <span style={{ color: lineColor, fontWeight: 600 }}>
+              {change > 0 ? '+' : ''}{change.toFixed(2)}%
+            </span>
+          </div>
+        </div>
+      )}
+
+      {hideHeader ? (
+        chartBlock
+      ) : (
+        <AnimatePresence>
+          {isExpanded && (
+            <motion.div
+              initial={{ height: 0, opacity: 0 }}
+              animate={{ height: 'auto', opacity: 1 }}
+              exit={{ height: 0, opacity: 0 }}
+              transition={{ duration: 0.3, ease: 'easeInOut' }}
+              style={{ overflow: 'hidden' }}
+            >
+              {chartBlock}
+            </motion.div>
+          )}
+        </AnimatePresence>
+      )}
     </div>
   );
 }

app/components/GroupManageModal.jsx

@@ -1,7 +1,8 @@
 'use client';
 
 import { useState } from 'react';
-import { AnimatePresence, motion, Reorder } from 'framer-motion';
+import { AnimatePresence, Reorder } from 'framer-motion';
+import { Dialog, DialogContent, DialogTitle } from '../../components/ui/dialog';
 import ConfirmModal from './ConfirmModal';
 import { CloseIcon, DragIcon, PlusIcon, SettingsIcon, TrashIcon } from './Icons';
 
@@ -56,129 +57,124 @@ export default function GroupManageModal({ groups, onClose, onSave }) {
   const isAllValid = items.every(it => it.name.trim() !== '');
 
   return (
-    <motion.div
-      className="modal-overlay"
-      role="dialog"
-      aria-modal="true"
-      aria-label="管理分组"
-      onClick={onClose}
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      exit={{ opacity: 0 }}
-    >
-      <motion.div
-        initial={{ opacity: 0, scale: 0.95, y: 20 }}
-        animate={{ opacity: 1, scale: 1, y: 0 }}
-        exit={{ opacity: 0, scale: 0.95, y: 20 }}
-        className="glass card modal"
-        style={{ maxWidth: '500px', width: '90vw' }}
-        onClick={(e) => e.stopPropagation()}
+    <>
+      <Dialog
+        open
+        onOpenChange={(open) => {
+          if (!open) onClose();
+        }}
       >
-        <div className="title" style={{ marginBottom: 20, justifyContent: 'space-between' }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-            <SettingsIcon width="20" height="20" />
-            <span>管理分组</span>
-          </div>
-          <button className="icon-button" onClick={onClose} style={{ border: 'none', background: 'transparent' }}>
-            <CloseIcon width="20" height="20" />
-          </button>
-        </div>
-
-        <div className="group-manage-list-container" style={{ maxHeight: '60vh', overflowY: 'auto', paddingRight: '4px' }}>
-          {items.length === 0 ? (
-            <div className="empty-state muted" style={{ textAlign: 'center', padding: '40px 0' }}>
-              <div style={{ fontSize: '32px', marginBottom: 12, opacity: 0.5 }}>📂</div>
-              <p>暂无自定义分组</p>
+        <DialogContent
+          className="glass card modal"
+          overlayClassName="modal-overlay"
+          style={{ maxWidth: '500px', width: '90vw', zIndex: 99 }}
+          onOpenAutoFocus={(event) => event.preventDefault()}
+        >
+          <DialogTitle asChild>
+            <div className="title" style={{ marginBottom: 20, justifyContent: 'space-between' }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+                <SettingsIcon width="20" height="20" />
+                <span>管理分组</span>
+              </div>
             </div>
-          ) : (
-            <Reorder.Group axis="y" values={items} onReorder={handleReorder} className="group-manage-list">
-              <AnimatePresence mode="popLayout">
-                {items.map((item) => (
-                  <Reorder.Item
-                    key={item.id}
-                    value={item}
-                    className="group-manage-item glass"
-                    layout
-                    initial={{ opacity: 0, scale: 0.98 }}
-                    animate={{ opacity: 1, scale: 1 }}
-                    exit={{ opacity: 0, scale: 0.98 }}
-                    transition={{
-                      type: 'spring',
-                      stiffness: 500,
-                      damping: 35,
-                      mass: 1,
-                      layout: { duration: 0.2 }
-                    }}
-                  >
-                    <div className="drag-handle" style={{ cursor: 'grab', display: 'flex', alignItems: 'center', padding: '0 8px' }}>
-                      <DragIcon width="18" height="18" className="muted" />
-                    </div>
-                    <input
-                      className={`input group-rename-input ${!item.name.trim() ? 'error' : ''}`}
-                      value={item.name}
-                      onChange={(e) => handleRename(item.id, e.target.value)}
-                      placeholder="请输入分组名称..."
-                      style={{
-                        flex: 1,
-                        height: '36px',
-                        background: 'rgba(0,0,0,0.2)',
-                        border: !item.name.trim() ? '1px solid var(--danger)' : 'none'
+          </DialogTitle>
+
+          <div className="group-manage-list-container" style={{ maxHeight: '60vh', overflowY: 'auto', paddingRight: '4px' }}>
+            {items.length === 0 ? (
+              <div className="empty-state muted" style={{ textAlign: 'center', padding: '40px 0' }}>
+                <div style={{ fontSize: '32px', marginBottom: 12, opacity: 0.5 }}>📂</div>
+                <p>暂无自定义分组</p>
+              </div>
+            ) : (
+              <Reorder.Group axis="y" values={items} onReorder={handleReorder} className="group-manage-list">
+                <AnimatePresence mode="popLayout">
+                  {items.map((item) => (
+                    <Reorder.Item
+                      key={item.id}
+                      value={item}
+                      className="group-manage-item glass"
+                      layout
+                      initial={{ opacity: 0, scale: 0.98 }}
+                      animate={{ opacity: 1, scale: 1 }}
+                      exit={{ opacity: 0, scale: 0.98 }}
+                      transition={{
+                        type: 'spring',
+                        stiffness: 500,
+                        damping: 35,
+                        mass: 1,
+                        layout: { duration: 0.2 }
                       }}
-                    />
-                    <button
-                      className="icon-button danger"
-                      onClick={() => handleDeleteClick(item.id, item.name)}
-                      title="删除分组"
-                      style={{ width: '36px', height: '36px', flexShrink: 0 }}
                     >
-                      <TrashIcon width="16" height="16" />
-                    </button>
-                  </Reorder.Item>
-                ))}
-              </AnimatePresence>
-            </Reorder.Group>
-          )}
-          <button
-            className="add-group-row-btn"
-            onClick={handleAddRow}
-            style={{
-              width: '100%',
-              marginTop: 12,
-              padding: '10px',
-              borderRadius: '12px',
-              border: '1px dashed var(--border)',
-              background: 'rgba(255,255,255,0.02)',
-              color: 'var(--muted)',
-              fontSize: '14px',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              gap: '8px',
-              cursor: 'pointer',
-              transition: 'all 0.2s ease'
-            }}
-          >
-            <PlusIcon width="16" height="16" />
-            <span>新增分组</span>
-          </button>
-        </div>
+                      <div className="drag-handle" style={{ cursor: 'grab', display: 'flex', alignItems: 'center', padding: '0 8px' }}>
+                        <DragIcon width="18" height="18" className="muted" />
+                      </div>
+                      <input
+                        className={`input group-rename-input ${!item.name.trim() ? 'error' : ''}`}
+                        value={item.name}
+                        onChange={(e) => handleRename(item.id, e.target.value)}
+                        placeholder="请输入分组名称..."
+                        style={{
+                          flex: 1,
+                          height: '36px',
+                          background: 'rgba(0,0,0,0.2)',
+                          border: !item.name.trim() ? '1px solid var(--danger)' : 'none'
+                        }}
+                      />
+                      <button
+                        className="icon-button danger"
+                        onClick={() => handleDeleteClick(item.id, item.name)}
+                        title="删除分组"
+                        style={{ width: '36px', height: '36px', flexShrink: 0 }}
+                      >
+                        <TrashIcon width="16" height="16" />
+                      </button>
+                    </Reorder.Item>
+                  ))}
+                </AnimatePresence>
+              </Reorder.Group>
+            )}
+            <button
+              className="add-group-row-btn"
+              onClick={handleAddRow}
+              style={{
+                width: '100%',
+                marginTop: 12,
+                padding: '10px',
+                borderRadius: '12px',
+                border: '1px dashed var(--border)',
+                background: 'rgba(255,255,255,0.02)',
+                color: 'var(--muted)',
+                fontSize: '14px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: '8px',
+                cursor: 'pointer',
+                transition: 'all 0.2s ease'
+              }}
+            >
+              <PlusIcon width="16" height="16" />
+              <span>新增分组</span>
+            </button>
+          </div>
 
-        <div style={{ marginTop: 24 }}>
-          {!isAllValid && (
-            <div className="error-text" style={{ marginBottom: 12, textAlign: 'center' }}>
-              所有分组名称均不能为空
-            </div>
-          )}
-          <button
-            className="button"
-            onClick={handleConfirm}
-            disabled={!isAllValid}
-            style={{ width: '100%', opacity: isAllValid ? 1 : 0.6 }}
-          >
-            完成
-          </button>
-        </div>
-      </motion.div>
+          <div style={{ marginTop: 24 }}>
+            {!isAllValid && (
+              <div className="error-text" style={{ marginBottom: 12, textAlign: 'center' }}>
+                所有分组名称均不能为空
+              </div>
+            )}
+            <button
+              className="button"
+              onClick={handleConfirm}
+              disabled={!isAllValid}
+              style={{ width: '100%', opacity: isAllValid ? 1 : 0.6 }}
+            >
+              完成
+            </button>
+          </div>
+        </DialogContent>
+      </Dialog>
 
       <AnimatePresence>
         {deleteConfirm && (
@@ -190,6 +186,6 @@ export default function GroupManageModal({ groups, onClose, onSave }) {
           />
         )}
       </AnimatePresence>
-    </motion.div>
+    </>
   );
 }

app/components/GroupModal.jsx

@@ -1,61 +1,81 @@
 'use client';
 
 import { useState } from 'react';
-import { motion } from 'framer-motion';
-import { CloseIcon, PlusIcon } from './Icons';
+import { Dialog, DialogContent, DialogTitle, DialogFooter, DialogClose } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Field, FieldLabel, FieldContent } from '@/components/ui/field';
+import { PlusIcon, CloseIcon } from './Icons';
+import { cn } from '@/lib/utils';
 
 export default function GroupModal({ onClose, onConfirm }) {
   const [name, setName] = useState('');
+
   return (
-    <motion.div
-      className="modal-overlay"
-      role="dialog"
-      aria-modal="true"
-      aria-label="新增分组"
-      onClick={onClose}
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      exit={{ opacity: 0 }}
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open) onClose?.();
+      }}
     >
-      <motion.div
-        initial={{ opacity: 0, scale: 0.95, y: 20 }}
-        animate={{ opacity: 1, scale: 1, y: 0 }}
-        exit={{ opacity: 0, scale: 0.95, y: 20 }}
-        className="glass card modal"
-        style={{ maxWidth: '400px' }}
-        onClick={(e) => e.stopPropagation()}
+      <DialogContent
+        overlayClassName="modal-overlay z-[9999]"
+        className={cn('!p-0 z-[10000] max-w-[280px] sm:max-w-[280px]')}
       >
-        <div className="title" style={{ marginBottom: 20, justifyContent: 'space-between' }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-            <PlusIcon width="20" height="20" />
-            <span>新增分组</span>
+        <div className="glass card modal !max-w-[280px] !w-full">
+          <div className="flex items-center justify-between mb-5">
+            <div className="flex items-center gap-2.5">
+              <PlusIcon className="w-5 h-5 shrink-0 text-[var(--foreground)]" aria-hidden />
+              <DialogTitle asChild>
+                <span className="text-base font-semibold text-[var(--foreground)]">新增分组</span>
+              </DialogTitle>
+            </div>
+          </div>
+
+          <Field className="mb-5">
+            <FieldLabel htmlFor="group-modal-name" className="text-sm text-[var(--muted-foreground)] mb-2 block">
+              分组名称（最多 8 个字）
+            </FieldLabel>
+            <FieldContent>
+              <input
+                id="group-modal-name"
+                className={cn(
+                  'flex h-11 w-full rounded-xl border border-[var(--border)] bg-[var(--input)] px-3.5 py-2 text-sm text-[var(--foreground)] outline-none',
+                  'placeholder:text-[var(--muted-foreground)]',
+                  'transition-colors duration-200 focus:border-[var(--ring)] focus:ring-2 focus:ring-[var(--ring)]/20 focus:ring-offset-2 focus:ring-offset-[var(--card)]',
+                  'disabled:cursor-not-allowed disabled:opacity-50'
+                )}
+                autoFocus
+                placeholder="请输入分组名称..."
+                value={name}
+                onChange={(e) => {
+                  const v = e.target.value || '';
+                  setName(v.slice(0, 8));
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' && name.trim()) onConfirm(name.trim());
+                }}
+              />
+            </FieldContent>
+          </Field>
+
+          <div className="flex gap-3">
+            <Button
+              variant="secondary"
+              className="flex-1 h-11 rounded-xl cursor-pointer bg-[var(--secondary)] text-[var(--foreground)] hover:bg-[var(--secondary)]/80 border border-[var(--border)]"
+              onClick={onClose}
+            >
+              取消
+            </Button>
+            <Button
+              className="flex-1 h-11 rounded-xl cursor-pointer"
+              onClick={() => name.trim() && onConfirm(name.trim())}
+              disabled={!name.trim()}
+            >
+              确定
+            </Button>
           </div>
-          <button className="icon-button" onClick={onClose} style={{ border: 'none', background: 'transparent' }}>
-            <CloseIcon width="20" height="20" />
-          </button>
         </div>
-        <div className="form-group" style={{ marginBottom: 20 }}>
-          <label className="muted" style={{ display: 'block', marginBottom: 8, fontSize: '14px' }}>分组名称（最多 8 个字）</label>
-          <input
-            className="input"
-            autoFocus
-            placeholder="请输入分组名称..."
-            value={name}
-            onChange={(e) => {
-              const v = e.target.value || '';
-              // 限制最多 8 个字符（兼容中英文），超出部分自动截断
-              setName(v.slice(0, 8));
-            }}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter' && name.trim()) onConfirm(name.trim());
-            }}
-          />
-        </div>
-        <div className="row" style={{ gap: 12 }}>
-          <button className="button secondary" onClick={onClose} style={{ flex: 1, background: 'rgba(255,255,255,0.05)', color: 'var(--text)' }}>取消</button>
-          <button className="button" onClick={() => name.trim() && onConfirm(name.trim())} disabled={!name.trim()} style={{ flex: 1 }}>确定</button>
-        </div>
-      </motion.div>
-    </motion.div>
+      </DialogContent>
+    </Dialog>
   );
 }

app/components/GroupSummary.jsx

@@ -0,0 +1,370 @@
+'use client';
+
+import { useEffect, useRef, useState, useMemo, useLayoutEffect } from 'react';
+import { PinIcon, PinOffIcon, EyeIcon, EyeOffIcon, SwitchIcon } from './Icons';
+
+// 数字滚动组件（初始化时无动画，后续变更再动画）
+function CountUp({ value, prefix = '', suffix = '', decimals = 2, className = '', style = {} }) {
+  const [displayValue, setDisplayValue] = useState(value);
+  const previousValue = useRef(value);
+  const isFirstChange = useRef(true);
+
+  useEffect(() => {
+    if (previousValue.current === value) return;
+
+    if (isFirstChange.current) {
+      isFirstChange.current = false;
+      previousValue.current = value;
+      setDisplayValue(value);
+      return;
+    }
+
+    const start = previousValue.current;
+    const end = value;
+    const duration = 400;
+    const startTime = performance.now();
+
+    const animate = (currentTime) => {
+      const elapsed = currentTime - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+      const ease = 1 - Math.pow(1 - progress, 4);
+      const current = start + (end - start) * ease;
+      setDisplayValue(current);
+
+      if (progress < 1) {
+        requestAnimationFrame(animate);
+      } else {
+        previousValue.current = value;
+      }
+    };
+
+    requestAnimationFrame(animate);
+  }, [value]);
+
+  return (
+    <span className={className} style={style}>
+      {prefix}
+      {Math.abs(displayValue).toFixed(decimals)}
+      {suffix}
+    </span>
+  );
+}
+
+export default function GroupSummary({
+  funds,
+  holdings,
+  groupName,
+  getProfit,
+  stickyTop,
+  masked,
+  onToggleMasked,
+}) {
+  const [showPercent, setShowPercent] = useState(true);
+  const [isMasked, setIsMasked] = useState(masked ?? false);
+  const [isSticky, setIsSticky] = useState(false);
+  const rowRef = useRef(null);
+  const [assetSize, setAssetSize] = useState(24);
+  const [metricSize, setMetricSize] = useState(18);
+  const [winW, setWinW] = useState(0);
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      setWinW(window.innerWidth);
+      const onR = () => setWinW(window.innerWidth);
+      window.addEventListener('resize', onR);
+      return () => window.removeEventListener('resize', onR);
+    }
+  }, []);
+
+  // 根据窗口宽度设置基础字号，保证小屏数字不会撑破布局
+  useEffect(() => {
+    if (!winW) return;
+
+    if (winW <= 360) {
+      setAssetSize(18);
+      setMetricSize(14);
+    } else if (winW <= 414) {
+      setAssetSize(22);
+      setMetricSize(16);
+    } else if (winW <= 768) {
+      setAssetSize(24);
+      setMetricSize(18);
+    } else {
+      setAssetSize(26);
+      setMetricSize(20);
+    }
+  }, [winW]);
+
+  useEffect(() => {
+    if (typeof masked === 'boolean') {
+      setIsMasked(masked);
+    }
+  }, [masked]);
+
+  const summary = useMemo(() => {
+    let totalAsset = 0;
+    let totalProfitToday = 0;
+    let totalHoldingReturn = 0;
+    let totalCost = 0;
+    let hasHolding = false;
+    let hasAnyTodayData = false;
+
+    funds.forEach((fund) => {
+      const holding = holdings[fund.code];
+      const profit = getProfit(fund, holding);
+
+      if (profit) {
+        hasHolding = true;
+        totalAsset += profit.amount;
+        if (profit.profitToday != null) {
+          totalProfitToday += Math.round(profit.profitToday * 100) / 100;
+          hasAnyTodayData = true;
+        }
+        if (profit.profitTotal !== null) {
+          totalHoldingReturn += profit.profitTotal;
+          if (holding && typeof holding.cost === 'number' && typeof holding.share === 'number') {
+            totalCost += holding.cost * holding.share;
+          }
+        }
+      }
+    });
+
+    const returnRate = totalCost > 0 ? (totalHoldingReturn / totalCost) * 100 : 0;
+
+    return {
+      totalAsset,
+      totalProfitToday,
+      totalHoldingReturn,
+      hasHolding,
+      returnRate,
+      hasAnyTodayData,
+    };
+  }, [funds, holdings, getProfit]);
+
+  useLayoutEffect(() => {
+    const el = rowRef.current;
+    if (!el) return;
+    const height = el.clientHeight;
+    const tooTall = height > 80;
+    if (tooTall) {
+      setAssetSize((s) => Math.max(16, s - 1));
+      setMetricSize((s) => Math.max(12, s - 1));
+    }
+  }, [
+    winW,
+    summary.totalAsset,
+    summary.totalProfitToday,
+    summary.totalHoldingReturn,
+    summary.returnRate,
+    showPercent,
+    assetSize,
+    metricSize,
+  ]);
+
+  if (!summary.hasHolding) return null;
+
+  return (
+    <div
+      className={isSticky ? 'group-summary-sticky' : ''}
+      style={isSticky && stickyTop ? { top: stickyTop } : {}}
+    >
+      <div
+        className="glass card group-summary-card"
+        style={{
+          marginBottom: 8,
+          padding: '16px 20px',
+          background: 'rgba(255, 255, 255, 0.03)',
+          position: 'relative',
+        }}
+      >
+        <span
+          className="sticky-toggle-btn"
+          onClick={() => setIsSticky(!isSticky)}
+          style={{
+            position: 'absolute',
+            top: 4,
+            right: 4,
+            width: 24,
+            height: 24,
+            padding: 4,
+            opacity: 0.6,
+            zIndex: 10,
+            color: 'var(--muted)',
+          }}
+        >
+          {isSticky ? (
+            <PinIcon width="14" height="14" />
+          ) : (
+            <PinOffIcon width="14" height="14" />
+          )}
+        </span>
+        <div
+          ref={rowRef}
+          className="row"
+          style={{ alignItems: 'flex-end', justifyContent: 'space-between' }}
+        >
+          <div>
+            <div
+              style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}
+            >
+              <div className="muted" style={{ fontSize: '12px' }}>
+                {groupName}
+              </div>
+              <button
+                className="fav-button"
+                onClick={() => {
+                  if (onToggleMasked) {
+                    onToggleMasked();
+                  } else {
+                    setIsMasked((value) => !value);
+                  }
+                }}
+                aria-label={isMasked ? '显示资产' : '隐藏资产'}
+                style={{
+                  margin: 0,
+                  padding: 2,
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                }}
+              >
+                {isMasked ? (
+                  <EyeOffIcon width="16" height="16" />
+                ) : (
+                  <EyeIcon width="16" height="16" />
+                )}
+              </button>
+            </div>
+            <div
+              style={{
+                fontSize: '24px',
+                fontWeight: 700,
+                fontFamily: 'var(--font-mono)',
+              }}
+            >
+              <span style={{ fontSize: '16px', marginRight: 2 }}>¥</span>
+              {isMasked ? (
+                <span
+                  className="mask-text"
+                  style={{ fontSize: assetSize, position: 'relative', top: 4 }}
+                >
+                  ******
+                </span>
+              ) : (
+                <CountUp value={summary.totalAsset} style={{ fontSize: assetSize }} />
+              )}
+            </div>
+          </div>
+          <div style={{ display: 'flex', gap: 24 }}>
+            <div style={{ textAlign: 'right' }}>
+              <div
+                className="muted"
+                style={{ fontSize: '12px', marginBottom: 4 }}
+              >
+                当日收益
+              </div>
+              <div
+                className={
+                  summary.hasAnyTodayData
+                    ? summary.totalProfitToday > 0
+                      ? 'up'
+                      : summary.totalProfitToday < 0
+                        ? 'down'
+                        : ''
+                    : 'muted'
+                }
+                style={{
+                  fontSize: '18px',
+                  fontWeight: 700,
+                  fontFamily: 'var(--font-mono)',
+                }}
+              >
+                {isMasked ? (
+                  <span className="mask-text" style={{ fontSize: metricSize }}>
+                    ******
+                  </span>
+                ) : summary.hasAnyTodayData ? (
+                  <>
+                    <span style={{ marginRight: 1 }}>
+                      {summary.totalProfitToday > 0
+                        ? '+'
+                        : summary.totalProfitToday < 0
+                          ? '-'
+                          : ''}
+                    </span>
+                    <CountUp
+                      value={Math.abs(summary.totalProfitToday)}
+                      style={{ fontSize: metricSize }}
+                    />
+                  </>
+                ) : (
+                  <span style={{ fontSize: metricSize }}>--</span>
+                )}
+              </div>
+            </div>
+            <div style={{ textAlign: 'right' }}>
+              <div
+                className="muted"
+                style={{
+                  fontSize: '12px',
+                  marginBottom: 4,
+                  display: 'flex',
+                  justifyContent: 'flex-end',
+                  alignItems: 'center',
+                  gap: 2,
+                }}
+              >
+                持有收益{showPercent ? '(%)' : ''}{' '}
+                <SwitchIcon style={{ opacity: 0.4 }} />
+              </div>
+              <div
+                className={
+                  summary.totalHoldingReturn > 0
+                    ? 'up'
+                    : summary.totalHoldingReturn < 0
+                      ? 'down'
+                      : ''
+                }
+                style={{
+                  fontSize: '18px',
+                  fontWeight: 700,
+                  fontFamily: 'var(--font-mono)',
+                  cursor: 'pointer',
+                }}
+                onClick={() => setShowPercent(!showPercent)}
+                title="点击切换金额/百分比"
+              >
+                {isMasked ? (
+                  <span className="mask-text" style={{ fontSize: metricSize }}>
+                    ******
+                  </span>
+                ) : (
+                  <>
+                    <span style={{ marginRight: 1 }}>
+                      {summary.totalHoldingReturn > 0
+                        ? '+'
+                        : summary.totalHoldingReturn < 0
+                          ? '-'
+                          : ''}
+                    </span>
+                    {showPercent ? (
+                      <CountUp
+                        value={Math.abs(summary.returnRate)}
+                        suffix="%"
+                        style={{ fontSize: metricSize }}
+                      />
+                    ) : (
+                      <CountUp
+                        value={Math.abs(summary.totalHoldingReturn)}
+                        style={{ fontSize: metricSize }}
+                      />
+                    )}
+                  </>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/components/HoldingActionModal.jsx

@@ -1,53 +1,50 @@
 'use client';
 
-import { motion } from 'framer-motion';
 import { CloseIcon, SettingsIcon } from './Icons';
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+} from '@/components/ui/dialog';
 
 export default function HoldingActionModal({ fund, onClose, onAction, hasHistory }) {
+  const handleOpenChange = (open) => {
+    if (!open) {
+      onClose?.();
+    }
+  };
+
   return (
-    <motion.div
-      className="modal-overlay"
-      role="dialog"
-      aria-modal="true"
-      aria-label="持仓操作"
-      onClick={onClose}
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      exit={{ opacity: 0 }}
-    >
-      <motion.div
-        initial={{ opacity: 0, scale: 0.95, y: 20 }}
-        animate={{ opacity: 1, scale: 1, y: 0 }}
-        exit={{ opacity: 0, scale: 0.95, y: 20 }}
+    <Dialog open onOpenChange={handleOpenChange}>
+      <DialogContent
+        showCloseButton={false}
         className="glass card modal"
-        onClick={(e) => e.stopPropagation()}
-        style={{ maxWidth: '320px' }}
+        overlayClassName="modal-overlay"
+        style={{ maxWidth: '320px', zIndex: 99 }}
       >
+        <DialogTitle className="sr-only">持仓操作</DialogTitle>
         <div className="title" style={{ marginBottom: 20, justifyContent: 'space-between' }}>
           <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
             <SettingsIcon width="20" height="20" />
             <span>持仓操作</span>
-              <button
-                type="button"
-                onClick={() => onAction('history')}
-                style={{ 
-                  marginLeft: 8, 
-                  padding: '4px 8px', 
-                  fontSize: '12px', 
-                  background: 'rgba(255,255,255,0.1)',
-                  border: 'none',
-                  borderRadius: '4px',
-                  color: 'var(--text)',
-                  cursor: 'pointer',
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: 4
-                }}
-                title="查看交易记录"
-              >
-                <span>📜</span>
-                <span>交易记录</span>
-              </button>
+            <button
+              type="button"
+              className="button secondary"
+              onClick={() => onAction('history')}
+              style={{
+                marginLeft: 8,
+                padding: '4px 10px',
+                fontSize: '12px',
+                height: '28px',
+                display: 'flex',
+                alignItems: 'center',
+                gap: 4,
+              }}
+              title="查看交易记录"
+            >
+              <span>📜</span>
+              <span>交易记录</span>
+            </button>
           </div>
           <button className="icon-button" onClick={onClose} style={{ border: 'none', background: 'transparent' }}>
             <CloseIcon width="20" height="20" />
@@ -75,9 +72,9 @@ export default function HoldingActionModal({ fund, onClose, onAction, hasHistory
             减仓
           </button>
           <button
-            className="button col-4"
+            className="button col-4 dca-btn"
             onClick={() => onAction('dca')}
-            style={{ background: 'rgba(34, 211, 238, 0.12)', border: '1px solid #ffffff', color: '#ffffff', fontSize: 14 }}
+            style={{ fontSize: 14 }}
           >
             定投
           </button>
@@ -92,13 +89,13 @@ export default function HoldingActionModal({ fund, onClose, onAction, hasHistory
               background: 'linear-gradient(180deg, #ef4444, #f87171)',
               border: 'none',
               color: '#2b0b0b',
-              fontWeight: 600
+              fontWeight: 600,
             }}
           >
             清空持仓
           </button>
         </div>
-      </motion.div>
-    </motion.div>
+      </DialogContent>
+    </Dialog>
   );
 }

app/components/HoldingEditModal.jsx

@@ -1,8 +1,12 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { motion } from 'framer-motion';
 import { CloseIcon, SettingsIcon } from './Icons';
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+} from '@/components/ui/dialog';
 
 export default function HoldingEditModal({ fund, holding, onClose, onSave }) {
   const [mode, setMode] = useState('amount'); // 'amount' | 'share'
@@ -89,25 +93,21 @@ export default function HoldingEditModal({ fund, holding, onClose, onSave }) {
     ? (share && cost && !isNaN(share) && !isNaN(cost))
     : (amount && !isNaN(amount) && (!profit || !isNaN(profit)) && dwjz > 0);
 
+  const handleOpenChange = (open) => {
+    if (!open) {
+      onClose?.();
+    }
+  };
+
   return (
-    <motion.div
-      className="modal-overlay"
-      role="dialog"
-      aria-modal="true"
-      aria-label="编辑持仓"
-      onClick={onClose}
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      exit={{ opacity: 0 }}
-    >
-      <motion.div
-        initial={{ opacity: 0, scale: 0.95, y: 20 }}
-        animate={{ opacity: 1, scale: 1, y: 0 }}
-        exit={{ opacity: 0, scale: 0.95, y: 20 }}
+    <Dialog open onOpenChange={handleOpenChange}>
+      <DialogContent
+        showCloseButton={false}
         className="glass card modal"
-        onClick={(e) => e.stopPropagation()}
-        style={{ maxWidth: '400px' }}
+        overlayClassName="modal-overlay"
+        style={{ maxWidth: '400px', zIndex: 999, width: '90vw' }}
       >
+        <DialogTitle className="sr-only">编辑持仓</DialogTitle>
         <div className="title" style={{ marginBottom: 20, justifyContent: 'space-between' }}>
           <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
             <SettingsIcon width="20" height="20" />
@@ -238,7 +238,7 @@ export default function HoldingEditModal({ fund, holding, onClose, onSave }) {
             </button>
           </div>
         </form>
-      </motion.div>
-    </motion.div>
+      </DialogContent>
+    </Dialog>
   );
 }

app/components/Icons.jsx

@@ -77,6 +77,13 @@ export function RefreshIcon(props) {
   );
 }
 
+export function ResetIcon(props) {
+  return (
+    <svg t="1772152323013" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4796" width="16" height="16"><path fill="currentColor" d="M864 512a352 352 0 0 0-600.96-248.96c-15.744 15.872-40.704 42.88-63.232 67.648H320a32 32 0 1 1 0 64H128a31.872 31.872 0 0 1-32-32v-192a32 32 0 1 1 64 0v108.672c20.544-22.528 42.688-46.4 57.856-61.504a416 416 0 1 1 0 588.288 32 32 0 1 1 45.248-45.248A352 352 0 0 0 864 512z" p-id="4797"></path>
+    </svg>
+  );
+}
+
 export function ChevronIcon(props) {
   return (
     <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
@@ -236,3 +243,37 @@ export function CameraIcon(props) {
     </svg>
   );
 }
+
+export function SunIcon(props) {
+  return (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="12" cy="12" r="4" />
+      <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
+    </svg>
+  );
+}
+
+export function MoonIcon(props) {
+  return (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+    </svg>
+  );
+}
+
+export function SwitchIcon({ props }) {
+  return (
+    <svg t="1772945896369" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+         p-id="2524" width="13" height="13">
+      <path
+        d="M885.247 477.597H132c-17.673 0-32-14.327-32-32s14.327-32 32-32h753.247c17.673 0 32 14.327 32 32s-14.327 32-32 32z"
+        fill="currentColor" p-id="2525"></path>
+      <path
+        d="M893.366 477.392c-8.189 0-16.379-3.124-22.627-9.373L709.954 307.235c-12.497-12.497-12.497-32.758 0-45.255 12.496-12.497 32.758-12.497 45.254 0l160.785 160.785c12.497 12.497 12.497 32.758 0 45.255-6.248 6.248-14.437 9.372-22.627 9.372zM893.366 609.607H140.119c-17.673 0-32-14.327-32-32s14.327-32 32-32h753.248c17.673 0 32 14.327 32 32s-14.328 32-32.001 32z"
+        fill="currentColor" p-id="2526"></path>
+      <path
+        d="M292.784 770.597c-8.189 0-16.379-3.124-22.627-9.373L109.373 600.439c-12.497-12.496-12.497-32.758 0-45.254 12.497-12.498 32.758-12.498 45.255 0L315.412 715.97c12.497 12.496 12.497 32.758 0 45.254-6.249 6.249-14.438 9.373-22.628 9.373z"
+        fill="currentColor" p-id="2527"></path>
+    </svg>
+  )
+}

app/components/LoginModal.jsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { InputOTP, InputOTPGroup, InputOTPSlot } from '@/components/ui/input-otp';
 import { MailIcon } from './Icons';
 
 export default function LoginModal({
@@ -56,15 +57,21 @@ export default function LoginModal({
               <div className="muted" style={{ marginBottom: 8, fontSize: '0.8rem' }}>
                 请输入邮箱验证码以完成注册/登录
               </div>
-              <input
-                className="input"
-                type="text"
-                placeholder="输入验证码"
-                value={loginOtp}
-                onChange={(e) => setLoginOtp(e.target.value)}
-                disabled={loginLoading}
+              <InputOTP
                 maxLength={6}
-              />
+                value={loginOtp}
+                onChange={(value) => setLoginOtp(value)}
+                disabled={loginLoading}
+              >
+                <InputOTPGroup>
+                  <InputOTPSlot index={0} />
+                  <InputOTPSlot index={1} />
+                  <InputOTPSlot index={2} />
+                  <InputOTPSlot index={3} />
+                  <InputOTPSlot index={4} />
+                  <InputOTPSlot index={5} />
+                </InputOTPGroup>
+              </InputOTP>
             </div>
           )}
           {loginError && (

app/components/MobileFundCardDrawer.jsx

@@ -0,0 +1,83 @@
+'use client';
+
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle, DrawerTrigger,
+} from '@/components/ui/drawer';
+import FundCard from './FundCard';
+import { CloseIcon } from './Icons';
+
+/**
+ * 移动端基金详情底部 Drawer 弹框
+ *
+ * @param {Object} props
+ * @param {boolean} props.open - 是否打开
+ * @param {(open: boolean) => void} props.onOpenChange - 打开状态变化回调
+ * @param {boolean} [props.blockDrawerClose] - 是否禁止关闭（如上层有弹框时）
+ * @param {React.MutableRefObject<boolean>} [props.ignoreNextDrawerCloseRef] - 忽略下一次关闭（用于点击到内部 dialog 时）
+ * @param {Object|null} props.cardSheetRow - 当前选中的行数据，用于 getFundCardProps
+ * @param {(row: any) => Object} [props.getFundCardProps] - 根据行数据返回 FundCard 的 props
+ */
+export default function MobileFundCardDrawer({
+  open,
+  onOpenChange,
+  blockDrawerClose = false,
+  ignoreNextDrawerCloseRef,
+  cardSheetRow,
+  getFundCardProps,
+  children,
+}) {
+  return (
+    <Drawer
+      open={open}
+      onOpenChange={(nextOpen) => {
+        if (!nextOpen) {
+          if (ignoreNextDrawerCloseRef?.current) {
+            ignoreNextDrawerCloseRef.current = false;
+            return;
+          }
+          if (!blockDrawerClose) onOpenChange(false);
+        }
+      }}
+    >
+      <DrawerTrigger asChild>
+        {children}
+      </DrawerTrigger>
+      <DrawerContent
+        className="h-[77vh] max-h-[88vh] mt-0 flex flex-col"
+        onPointerDownOutside={(e) => {
+          if (blockDrawerClose) return;
+          if (e?.target?.closest?.('[data-slot="dialog-content"], [role="dialog"]')) {
+            if (ignoreNextDrawerCloseRef) ignoreNextDrawerCloseRef.current = true;
+            return;
+          }
+          onOpenChange(false);
+        }}
+      >
+        <DrawerHeader className="flex-shrink-0 flex flex-row items-center justify-between gap-2 space-y-0 px-5 pb-4 pt-2 text-left">
+          <DrawerTitle className="text-base font-semibold text-[var(--text)]">
+            基金详情
+          </DrawerTitle>
+          <DrawerClose
+            className="icon-button border-none bg-transparent p-1"
+            title="关闭"
+            style={{ borderColor: 'transparent', backgroundColor: 'transparent' }}
+          >
+            <CloseIcon width="20" height="20" />
+          </DrawerClose>
+        </DrawerHeader>
+        <div
+          className="flex-1 min-h-0 overflow-y-auto px-5 pb-8 pt-0"
+          style={{ paddingBottom: 'calc(24px + env(safe-area-inset-bottom, 0px))' }}
+        >
+          {cardSheetRow && getFundCardProps ? (
+            <FundCard {...getFundCardProps(cardSheetRow)} />
+          ) : null}
+        </div>
+      </DrawerContent>
+    </Drawer>
+  );
+}

app/components/MobileSettingModal.jsx

@@ -0,0 +1,215 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { AnimatePresence, Reorder } from 'framer-motion';
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerClose,
+} from '@/components/ui/drawer';
+import { Switch } from '@/components/ui/switch';
+import ConfirmModal from './ConfirmModal';
+import { CloseIcon, DragIcon, ResetIcon, SettingsIcon } from './Icons';
+
+/**
+ * 移动端表格个性化设置弹框（底部抽屉，基于 Drawer 组件）
+ * @param {Object} props
+ * @param {boolean} props.open - 是否打开
+ * @param {() => void} props.onClose - 关闭回调
+ * @param {Array<{id: string, header: string}>} props.columns - 非冻结列（id + 表头名称）
+ * @param {Record<string, boolean>} [props.columnVisibility] - 列显示状态映射（id => 是否显示）
+ * @param {(newOrder: string[]) => void} props.onColumnReorder - 列顺序变更回调
+ * @param {(id: string, visible: boolean) => void} props.onToggleColumnVisibility - 列显示/隐藏切换回调
+ * @param {() => void} props.onResetColumnOrder - 重置列顺序回调
+ * @param {() => void} props.onResetColumnVisibility - 重置列显示/隐藏回调
+ * @param {boolean} [props.showFullFundName] - 是否展示完整基金名称
+ * @param {(show: boolean) => void} [props.onToggleShowFullFundName] - 切换是否展示完整基金名称回调
+ */
+export default function MobileSettingModal({
+  open,
+  onClose,
+  columns = [],
+  columnVisibility,
+  onColumnReorder,
+  onToggleColumnVisibility,
+  onResetColumnOrder,
+  onResetColumnVisibility,
+  showFullFundName,
+  onToggleShowFullFundName,
+}) {
+  const [resetConfirmOpen, setResetConfirmOpen] = useState(false);
+
+  useEffect(() => {
+    if (!open) setResetConfirmOpen(false);
+  }, [open]);
+
+  const handleReorder = (newItems) => {
+    const newOrder = newItems.map((item) => item.id);
+    onColumnReorder?.(newOrder);
+  };
+
+  return (
+    <>
+      <Drawer
+        open={open}
+        onOpenChange={(v) => {
+          if (!v) onClose();
+        }}
+        direction="bottom"
+      >
+        <DrawerContent
+          className="glass"
+          defaultHeight="77vh"
+          minHeight="40vh"
+          maxHeight="90vh"
+        >
+          <DrawerHeader className="mobile-setting-header flex-row items-center justify-between gap-2 py-5 pt-5 text-base font-semibold">
+            <DrawerTitle className="flex items-center gap-2.5 text-left">
+              <SettingsIcon width="20" height="20" />
+              <span>个性化设置</span>
+            </DrawerTitle>
+            <DrawerClose
+              className="icon-button border-none bg-transparent p-1"
+              title="关闭"
+              style={{ borderColor: 'transparent', backgroundColor: 'transparent' }}
+            >
+              <CloseIcon width="20" height="20" />
+            </DrawerClose>
+          </DrawerHeader>
+
+          <div className="mobile-setting-body flex flex-1 flex-col overflow-y-auto">
+            {onToggleShowFullFundName && (
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  padding: '12px 0',
+                  borderBottom: '1px solid var(--border)',
+                  marginBottom: 16,
+                }}
+              >
+                <span style={{ fontSize: '14px' }}>展示完整基金名称</span>
+                <Switch
+                  checked={!!showFullFundName}
+                  onCheckedChange={(checked) => {
+                    onToggleShowFullFundName?.(!!checked);
+                  }}
+                  title={showFullFundName ? '关闭' : '开启'}
+                />
+              </div>
+            )}
+            <h3 className="mobile-setting-subtitle">表头设置</h3>
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                marginBottom: 12,
+                gap: 8,
+              }}
+            >
+              <p className="muted" style={{ fontSize: '13px', margin: 0 }}>
+                拖拽调整列顺序
+              </p>
+              {(onResetColumnOrder || onResetColumnVisibility) && (
+                <button
+                  className="icon-button"
+                  onClick={() => setResetConfirmOpen(true)}
+                  title="重置表头设置"
+                  style={{
+                    border: 'none',
+                    width: '28px',
+                    height: '28px',
+                    backgroundColor: 'transparent',
+                    color: 'var(--muted)',
+                    flexShrink: 0,
+                  }}
+                >
+                  <ResetIcon width="16" height="16" />
+                </button>
+              )}
+            </div>
+            {columns.length === 0 ? (
+              <div className="muted" style={{ textAlign: 'center', padding: '24px 0', fontSize: '14px' }}>
+                暂无可配置列
+              </div>
+            ) : (
+              <Reorder.Group
+                axis="y"
+                values={columns}
+                onReorder={handleReorder}
+                className="mobile-setting-list"
+              >
+                <AnimatePresence mode="popLayout">
+                  {columns.map((item, index) => (
+                    <Reorder.Item
+                      key={item.id || `col-${index}`}
+                      value={item}
+                      className="mobile-setting-item glass"
+                      layout
+                      initial={{ opacity: 0, scale: 0.98 }}
+                      animate={{ opacity: 1, scale: 1 }}
+                      exit={{ opacity: 0, scale: 0.98 }}
+                      transition={{
+                        type: 'spring',
+                        stiffness: 500,
+                        damping: 35,
+                        mass: 1,
+                        layout: { duration: 0.2 },
+                      }}
+                    >
+                      <div
+                        className="drag-handle"
+                        style={{
+                          cursor: 'grab',
+                          display: 'flex',
+                          alignItems: 'center',
+                          padding: '0 8px',
+                          color: 'var(--muted)',
+                        }}
+                      >
+                        <DragIcon width="18" height="18" />
+                      </div>
+                      <span style={{ flex: 1, fontSize: '14px' }}>{item.header}</span>
+                      {onToggleColumnVisibility && (
+                        <Switch
+                          checked={columnVisibility?.[item.id] !== false}
+                          onCheckedChange={(checked) => {
+                            onToggleColumnVisibility(item.id, !!checked);
+                          }}
+                          title={columnVisibility?.[item.id] === false ? '显示' : '隐藏'}
+                        />
+                      )}
+                    </Reorder.Item>
+                  ))}
+                </AnimatePresence>
+              </Reorder.Group>
+            )}
+          </div>
+        </DrawerContent>
+      </Drawer>
+
+      <AnimatePresence>
+        {resetConfirmOpen && (
+          <ConfirmModal
+            key="mobile-reset-confirm"
+            title="重置表头设置"
+            message="是否重置表头顺序和显示/隐藏为默认值？"
+            icon={<ResetIcon width="20" height="20" className="shrink-0 text-[var(--primary)]" />}
+            confirmVariant="primary"
+            onConfirm={() => {
+              onResetColumnOrder?.();
+              onResetColumnVisibility?.();
+              setResetConfirmOpen(false);
+            }}
+            onCancel={() => setResetConfirmOpen(false)}
+            confirmText="重置"
+          />
+        )}
+      </AnimatePresence>
+    </>
+  );
+}

app/components/PcTableSettingModal.jsx

@@ -0,0 +1,286 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { AnimatePresence, motion, Reorder } from 'framer-motion';
+import { createPortal } from 'react-dom';
+import ConfirmModal from './ConfirmModal';
+import { CloseIcon, DragIcon, ResetIcon, SettingsIcon } from './Icons';
+
+/**
+ * PC 表格个性化设置侧弹框
+ * @param {Object} props
+ * @param {boolean} props.open - 是否打开
+ * @param {() => void} props.onClose - 关闭回调
+ * @param {Array<{id: string, header: string}>} props.columns - 非冻结列（id + 表头名称）
+ * @param {Record<string, boolean>} [props.columnVisibility] - 列显示状态映射（id => 是否显示）
+ * @param {(newOrder: string[]) => void} props.onColumnReorder - 列顺序变更回调，参数为新的列 id 顺序
+ * @param {(id: string, visible: boolean) => void} props.onToggleColumnVisibility - 列显示/隐藏切换回调
+ * @param {() => void} props.onResetColumnOrder - 重置列顺序回调，需二次确认
+ * @param {() => void} props.onResetColumnVisibility - 重置列显示/隐藏回调
+ * @param {() => void} props.onResetSizing - 点击重置列宽时的回调（通常用于打开确认弹框）
+ * @param {boolean} [props.showFullFundName] - 是否展示完整基金名称
+ * @param {(show: boolean) => void} [props.onToggleShowFullFundName] - 切换是否展示完整基金名称回调
+ */
+export default function PcTableSettingModal({
+  open,
+  onClose,
+  columns = [],
+  columnVisibility,
+  onColumnReorder,
+  onToggleColumnVisibility,
+  onResetColumnOrder,
+  onResetColumnVisibility,
+  onResetSizing,
+  showFullFundName,
+  onToggleShowFullFundName,
+}) {
+  const [resetOrderConfirmOpen, setResetOrderConfirmOpen] = useState(false);
+
+  useEffect(() => {
+    if (!open) setResetOrderConfirmOpen(false);
+  }, [open]);
+
+  useEffect(() => {
+    if (open) {
+      const prev = document.body.style.overflow;
+      document.body.style.overflow = 'hidden';
+      return () => {
+        document.body.style.overflow = prev;
+      };
+    }
+  }, [open]);
+
+  const handleReorder = (newItems) => {
+    const newOrder = newItems.map((item) => item.id);
+    onColumnReorder?.(newOrder);
+  };
+
+  const content = (
+    <AnimatePresence>
+      {open && (
+        <motion.div
+          key="drawer"
+          className="pc-table-setting-overlay"
+          role="dialog"
+          aria-modal="true"
+          aria-label="个性化设置"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.2 }}
+          onClick={onClose}
+          style={{ zIndex: 10001 }}
+        >
+          <motion.aside
+            className="pc-table-setting-drawer glass"
+            initial={{ x: '100%' }}
+            animate={{ x: 0 }}
+            exit={{ x: '100%' }}
+            transition={{ type: 'spring', damping: 30, stiffness: 300 }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="pc-table-setting-header">
+              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+                <SettingsIcon width="20" height="20" />
+                <span>个性化设置</span>
+              </div>
+              <button
+                className="icon-button"
+                onClick={onClose}
+                title="关闭"
+                style={{ border: 'none', background: 'transparent' }}
+              >
+                <CloseIcon width="20" height="20" />
+              </button>
+            </div>
+
+            <div className="pc-table-setting-body">
+              {onToggleShowFullFundName && (
+                <div
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    padding: '12px 0',
+                    borderBottom: '1px solid var(--border)',
+                    marginBottom: 16,
+                  }}
+                >
+                  <span style={{ fontSize: '14px' }}>展示完整基金名称</span>
+                  <button
+                    type="button"
+                    className="icon-button pc-table-column-switch"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onToggleShowFullFundName(!showFullFundName);
+                    }}
+                    title={showFullFundName ? '关闭' : '开启'}
+                    style={{
+                      border: 'none',
+                      padding: '0 4px',
+                      backgroundColor: 'transparent',
+                      cursor: 'pointer',
+                      flexShrink: 0,
+                      display: 'flex',
+                      alignItems: 'center',
+                    }}
+                  >
+                    <span className={`dca-toggle-track ${showFullFundName ? 'enabled' : ''}`}>
+                      <span
+                        className="dca-toggle-thumb"
+                        style={{ left: showFullFundName ? 16 : 2 }}
+                      />
+                    </span>
+                  </button>
+                </div>
+              )}
+              <h3 className="pc-table-setting-subtitle">表头设置</h3>
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  marginBottom: 12,
+                  gap: 8,
+                }}
+              >
+                <p className="muted" style={{ fontSize: '13px', margin: 0 }}>
+                  拖拽调整列顺序
+                </p>
+                {onResetColumnOrder && (
+                  <button
+                    className="icon-button"
+                    onClick={() => setResetOrderConfirmOpen(true)}
+                    title="重置列顺序"
+                    style={{
+                      border: 'none',
+                      width: '28px',
+                      height: '28px',
+                      backgroundColor: 'transparent',
+                      color: 'var(--muted)',
+                      flexShrink: 0,
+                    }}
+                  >
+                    <ResetIcon width="16" height="16" />
+                  </button>
+                )}
+              </div>
+              {columns.length === 0 ? (
+                <div className="muted" style={{ textAlign: 'center', padding: '24px 0', fontSize: '14px' }}>
+                  暂无可配置列
+                </div>
+              ) : (
+                <Reorder.Group
+                  axis="y"
+                  values={columns}
+                  onReorder={handleReorder}
+                  className="pc-table-setting-list"
+                >
+                  <AnimatePresence mode="popLayout">
+                    {columns.map((item, index) => (
+                      <Reorder.Item
+                        key={item.id || `col-${index}`}
+                        value={item}
+                        className="pc-table-setting-item glass"
+                        layout
+                        initial={{ opacity: 0, scale: 0.98 }}
+                        animate={{ opacity: 1, scale: 1 }}
+                        exit={{ opacity: 0, scale: 0.98 }}
+                        transition={{
+                          type: 'spring',
+                          stiffness: 500,
+                          damping: 35,
+                          mass: 1,
+                          layout: { duration: 0.2 },
+                        }}
+                      >
+                        <div
+                          className="drag-handle"
+                          style={{
+                            cursor: 'grab',
+                            display: 'flex',
+                            alignItems: 'center',
+                            padding: '0 8px',
+                            color: 'var(--muted)',
+                          }}
+                        >
+                          <DragIcon width="18" height="18" />
+                        </div>
+                        <span style={{ flex: 1, fontSize: '14px' }}>{item.header}</span>
+                        {onToggleColumnVisibility && (
+                          <button
+                            type="button"
+                            className="icon-button pc-table-column-switch"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              onToggleColumnVisibility(item.id, columnVisibility?.[item.id] === false);
+                            }}
+                            title={columnVisibility?.[item.id] === false ? '显示' : '隐藏'}
+                            style={{
+                              border: 'none',
+                              padding: '0 4px',
+                              backgroundColor: 'transparent',
+                              cursor: 'pointer',
+                              flexShrink: 0,
+                              display: 'flex',
+                              alignItems: 'center',
+                            }}
+                          >
+                            <span className={`dca-toggle-track ${columnVisibility?.[item.id] !== false ? 'enabled' : ''}`}>
+                              <span
+                                className="dca-toggle-thumb"
+                                style={{ left: columnVisibility?.[item.id] !== false ? 16 : 2 }}
+                              />
+                            </span>
+                          </button>
+                        )}
+                      </Reorder.Item>
+                    ))}
+                  </AnimatePresence>
+                </Reorder.Group>
+              )}
+              {onResetSizing && (
+                <button
+                  className="button secondary"
+                  onClick={() => {
+                    onResetSizing();
+                  }}
+                  style={{
+                    width: '100%',
+                    marginTop: 20,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    gap: 8,
+                  }}
+                >
+                  <ResetIcon width="16" height="16" />
+                  重置列宽
+                </button>
+              )}
+            </div>
+          </motion.aside>
+        </motion.div>
+      )}
+      {resetOrderConfirmOpen && (
+        <ConfirmModal
+          key="reset-order-confirm"
+          title="重置表头设置"
+          message="是否重置表头顺序和显示/隐藏为默认值？"
+          icon={<ResetIcon width="20" height="20" className="shrink-0 text-[var(--primary)]" />}
+          confirmVariant="primary"
+          onConfirm={() => {
+            onResetColumnOrder?.();
+            onResetColumnVisibility?.();
+            setResetOrderConfirmOpen(false);
+          }}
+          onCancel={() => setResetOrderConfirmOpen(false)}
+          confirmText="重置"
+        />
+      )}
+    </AnimatePresence>
+  );
+
+  if (typeof document === 'undefined') return null;
+  return createPortal(content, document.body);
+}

app/components/PendingTradesModal.jsx

@@ -0,0 +1,94 @@
+'use client';
+
+import { CloseIcon } from './Icons';
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+
+export default function PendingTradesModal({
+  open,
+  trades = [],
+  onClose,
+  onRevoke,
+}) {
+  const handleOpenChange = (nextOpen) => {
+    if (!nextOpen) {
+      onClose?.();
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent
+        showCloseButton={false}
+        className="glass card modal trade-modal"
+        overlayClassName="modal-overlay"
+        overlayStyle={{ zIndex: 998 }}
+        style={{ maxWidth: '420px', zIndex: 999, width: '90vw' }}
+      >
+        <DialogTitle className="sr-only">待交易队列</DialogTitle>
+
+        <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="pending-list" style={{ maxHeight: '300px', overflowY: 'auto' }}>
+          <div className="pending-list-items" style={{ paddingTop: 0 }}>
+            {trades.map((trade, idx) => (
+              <div key={trade.id || idx} className="trade-pending-item">
+                <div className="row" style={{ justifyContent: 'space-between', marginBottom: 4 }}>
+                  <span
+                    style={{
+                      fontWeight: 600,
+                      fontSize: '14px',
+                      color: trade.type === 'buy' ? 'var(--danger)' : 'var(--success)',
+                    }}
+                  >
+                    {trade.type === 'buy' ? '买入' : '卖出'}
+                  </span>
+                  <span className="muted" style={{ fontSize: '12px' }}>
+                    {trade.date} {trade.isAfter3pm ? '(15:00后)' : ''}
+                  </span>
+                </div>
+                <div className="row" style={{ justifyContent: 'space-between', fontSize: '12px' }}>
+                  <span className="muted">份额/金额</span>
+                  <span>{trade.share ? `${trade.share} 份` : `¥${trade.amount}`}</span>
+                </div>
+                <div className="row" style={{ justifyContent: 'space-between', fontSize: '12px', marginTop: 4 }}>
+                  <span className="muted">状态</span>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                    <span className="trade-pending-status">等待净值更新...</span>
+                    <Button
+                      type="button"
+                      size="xs"
+                      variant="destructive"
+                      className="bg-destructive text-white hover:bg-destructive/90"
+                      onClick={() => onRevoke?.(trade)}
+                      style={{ paddingInline: 10 }}
+                    >
+                      撤销
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+

app/components/PwaRegister.jsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { useEffect } from 'react';
+
+/**
+ * 在客户端注册 Service Worker，满足 Android Chrome PWA 安装条件（需 HTTPS + manifest + SW）。
+ * 仅在生产环境且浏览器支持时注册。
+ */
+export default function PwaRegister() {
+  useEffect(() => {// 检测核心能力
+    const isPwaSupported =
+      'serviceWorker' in navigator &&
+      'BeforeInstallPromptEvent' in window;
+    console.log('PWA 支持:', isPwaSupported);
+    if (
+      typeof window === 'undefined' ||
+      !('serviceWorker' in navigator) ||
+      process.env.NODE_ENV !== 'production'
+    ) {
+      return;
+    }
+    navigator.serviceWorker
+      .register('/sw.js', { scope: '/', updateViaCache: 'none' })
+      .then((reg) => {
+        reg.addEventListener('updatefound', () => {
+          const newWorker = reg.installing;
+          newWorker?.addEventListener('statechange', () => {
+            if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
+              // 可选：提示用户刷新以获取新版本
+            }
+          });
+        });
+      })
+      .catch(() => {});
+  }, []);
+
+  return null;
+}

app/components/RefreshButton.jsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { useEffect, useState } from "react";
+import { RefreshIcon } from './Icons';
+
+export default function RefreshButton({ refreshCycleStartRef, refreshMs, manualRefresh, refreshing, fundsLength }) {
+
+  // 刷新周期进度 0~1，用于环形进度条
+  const [refreshProgress, setRefreshProgress] = useState(0);
+
+  // 刷新进度条：每 100ms 更新一次进度
+  useEffect(() => {
+    if (fundsLength === 0 || refreshMs <= 0) return;
+    const t = setInterval(() => {
+      const elapsed = Date.now() - refreshCycleStartRef.current;
+      const p = Math.min(1, elapsed / refreshMs);
+      setRefreshProgress(p);
+    }, 100);
+    return () => clearInterval(t);
+  }, [fundsLength, refreshMs]);
+
+  return (
+    <div
+      className="refresh-btn-wrap"
+      style={{ '--progress': refreshProgress }}
+      title={`刷新周期 ${Math.round(refreshMs / 1000)} 秒`}
+    >
+      <button
+        className="icon-button"
+        aria-label="立即刷新"
+        onClick={manualRefresh}
+        disabled={refreshing || fundsLength === 0}
+        aria-busy={refreshing}
+        title="立即刷新"
+      >
+        <RefreshIcon className={refreshing ? 'spin' : ''} width="18" height="18" />
+      </button>
+    </div>
+  );
+}

app/components/ScanImportConfirmModal.jsx

@@ -1,7 +1,15 @@
 'use client';
 
+import { useState } from 'react';
 import { motion } from 'framer-motion';
 import { CloseIcon } from './Icons';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
 
 export default function ScanImportConfirmModal({
   scannedFunds,
@@ -9,8 +17,23 @@ export default function ScanImportConfirmModal({
   onClose,
   onToggle,
   onConfirm,
-  refreshing
+  refreshing,
+  groups = [],
+  isOcrScan = false
 }) {
+  const [selectedGroupId, setSelectedGroupId] = useState('all');
+
+  const handleConfirm = () => {
+    onConfirm(selectedGroupId);
+  };
+
+  const formatAmount = (val) => {
+    if (!val) return null;
+    const num = parseFloat(String(val).replace(/,/g, ''));
+    if (isNaN(num)) return null;
+    return num;
+  };
+
   return (
     <motion.div
       className="modal-overlay"
@@ -28,7 +51,7 @@ export default function ScanImportConfirmModal({
         exit={{ opacity: 0, scale: 0.95, y: 20 }}
         className="glass card modal"
         onClick={(e) => e.stopPropagation()}
-        style={{ width: 460, maxWidth: '90vw' }}
+        style={{ width: 480, maxWidth: '90vw' }}
       >
         <div className="title" style={{ marginBottom: 12, justifyContent: 'space-between' }}>
           <span>确认导入基金</span>
@@ -36,50 +59,93 @@ export default function ScanImportConfirmModal({
             <CloseIcon width="20" height="20" />
           </button>
         </div>
+        {isOcrScan && (
+          <div className="ocr-warning" style={{ marginBottom: 12 }}>
+            <span>拍照识别方案目前还在优化，请确认识别结果是否正确。</span>
+          </div>
+        )}
         {scannedFunds.length === 0 ? (
           <div className="muted" style={{ fontSize: 13, lineHeight: 1.6 }}>
             未识别到有效的基金代码，请尝试更清晰的截图或手动搜索。
           </div>
         ) : (
-          <div className="search-results pending-list" style={{ maxHeight: 320, overflowY: 'auto' }}>
-            {scannedFunds.map((item) => {
-              const isSelected = selectedScannedCodes.has(item.code);
-              const isAlreadyAdded = item.status === 'added';
-              const isInvalid = item.status === 'invalid';
-              const isDisabled = isAlreadyAdded || isInvalid;
-              const displayName = item.name || (isInvalid ? '未找到基金' : '未知基金');
-              return (
-                <div
-                  key={item.code}
-                  className={`search-item ${isSelected ? 'selected' : ''} ${isAlreadyAdded ? 'added' : ''}`}
-                  onMouseDown={(e) => e.preventDefault()}
-                  onClick={() => {
-                    if (isDisabled) return;
-                    onToggle(item.code);
-                  }}
-                  style={{ cursor: isDisabled ? 'not-allowed' : 'pointer' }}
-                >
-                  <div className="fund-info">
-                    <span className="fund-name">{displayName}</span>
-                    <span className="fund-code muted">#{item.code}</span>
-                  </div>
-                  {isAlreadyAdded ? (
-                    <span className="added-label">已添加</span>
-                  ) : isInvalid ? (
-                    <span className="added-label">未找到</span>
-                  ) : (
-                    <div className="checkbox">
-                      {isSelected && <div className="checked-mark" />}
+          <>
+            <div className="search-results pending-list" style={{ maxHeight: 360, overflowY: 'auto' }}>
+              {scannedFunds.map((item) => {
+                const isSelected = selectedScannedCodes.has(item.code);
+                const isAlreadyAdded = item.status === 'added';
+                const isInvalid = item.status === 'invalid';
+                const isDisabled = isAlreadyAdded || isInvalid;
+                const displayName = item.name || (isInvalid ? '未找到基金' : '未知基金');
+                const holdAmounts = formatAmount(item.holdAmounts);
+                const holdGains = formatAmount(item.holdGains);
+                const hasHoldingData = holdAmounts !== null && holdGains !== null;
+                return (
+                  <div
+                    key={item.code}
+                    className={`search-item ${isSelected ? 'selected' : ''} ${isAlreadyAdded ? 'added' : ''}`}
+                    onMouseDown={(e) => e.preventDefault()}
+                    onClick={() => {
+                      if (isDisabled) return;
+                      onToggle(item.code);
+                    }}
+                    style={{ cursor: isDisabled ? 'not-allowed' : 'pointer', flexDirection: 'column', alignItems: 'stretch' }}
+                  >
+                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                      <div className="fund-info">
+                        <span className="fund-name">{displayName}</span>
+                        <span className="fund-code muted">#{item.code}</span>
+                      </div>
+                      {isAlreadyAdded ? (
+                        <span className="added-label">已添加</span>
+                      ) : isInvalid ? (
+                        <span className="added-label">未找到</span>
+                      ) : (
+                        <div className="checkbox">
+                          {isSelected && <div className="checked-mark" />}
+                        </div>
+                      )}
                     </div>
-                  )}
-                </div>
-              );
-            })}
-          </div>
+                    {hasHoldingData && !isDisabled && (
+                      <div style={{ display: 'flex', gap: 16, marginTop: 6, paddingLeft: 0 }}>
+                        {holdAmounts !== null && (
+                          <span className="muted" style={{ fontSize: 12 }}>
+                            持有金额：<span style={{ color: 'var(--text)', fontWeight: 500 }}>¥{holdAmounts.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span>
+                          </span>
+                        )}
+                        {holdGains !== null && (
+                          <span className="muted" style={{ fontSize: 12 }}>
+                            持有收益：<span style={{ color: holdGains >= 0 ? 'var(--danger)' : 'var(--success)', fontWeight: 500 }}>
+                              {holdGains >= 0 ? '+' : '-'}¥{Math.abs(holdGains).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+                            </span>
+                          </span>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+            <div style={{ marginTop: 12, display: 'flex', alignItems: 'center', gap: 8 }}>
+              <span className="muted" style={{ fontSize: 13, whiteSpace: 'nowrap' }}>添加到分组：</span>
+              <Select value={selectedGroupId} onValueChange={(value) => setSelectedGroupId(value)}>
+                <SelectTrigger className="flex-1">
+                  <SelectValue placeholder="选择分组" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">全部</SelectItem>
+                  <SelectItem value="fav">自选</SelectItem>
+                  {groups.filter(g => g.id !== 'all' && g.id !== 'fav').map(g => (
+                    <SelectItem key={g.id} value={g.id}>{g.name}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </>
         )}
         <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 12 }}>
           <button className="button secondary" onClick={onClose}>取消</button>
-          <button className="button" onClick={onConfirm} disabled={selectedScannedCodes.size === 0 || refreshing}>确认导入</button>
+          <button className="button" onClick={handleConfirm} disabled={selectedScannedCodes.size === 0 || refreshing}>确认导入</button>
         </div>
       </motion.div>
     </motion.div>

app/components/ScanPickModal.jsx

@@ -40,10 +40,6 @@ export default function ScanPickModal({ onClose, onPick, onFilesDrop, isScanning
     marginBottom: 12,
     padding: '20px 16px',
     borderRadius: 12,
-    border: `2px dashed ${isDragging ? 'var(--primary)' : 'var(--border)'}`,
-    background: isDragging
-      ? 'rgba(34, 211, 238, 0.08)'
-      : 'rgba(255, 255, 255, 0.02)',
     transition: 'border-color 0.2s ease, background 0.2s ease',
     cursor: isScanning ? 'not-allowed' : 'pointer',
     pointerEvents: isScanning ? 'none' : 'auto',
@@ -64,7 +60,7 @@ export default function ScanPickModal({ onClose, onPick, onFilesDrop, isScanning
         initial={{ opacity: 0, scale: 0.95, y: 20 }}
         animate={{ opacity: 1, scale: 1, y: 0 }}
         exit={{ opacity: 0, scale: 0.95, y: 20 }}
-        className="glass card modal"
+        className="glass card modal scan-pick-modal"
         onClick={(e) => e.stopPropagation()}
         style={{ width: 420, maxWidth: '90vw' }}
       >
@@ -75,7 +71,7 @@ export default function ScanPickModal({ onClose, onPick, onFilesDrop, isScanning
           从相册选择一张或多张持仓截图，系统将自动识别其中的<span style={{ color: 'var(--primary)' }}>基金代码（6位数字）</span>，并支持批量导入。
         </div>
         <div
-          className="muted"
+          className={`scan-pick-dropzone muted ${isDragging ? 'dragging' : ''}`}
           style={dropZoneStyle}
           onDragOver={handleDragOver}
           onDragLeave={handleDragLeave}

app/components/SettingsModal.jsx

@@ -1,6 +1,10 @@
-'use client';
+"use client";
 
-import { SettingsIcon } from './Icons';
+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';
 
 export default function SettingsModal({
   onClose,
@@ -10,76 +14,202 @@ export default function SettingsModal({
   exportLocalData,
   importFileRef,
   handleImportFileChange,
-  importMsg
+  importMsg,
+  isMobile,
+  containerWidth = 1200,
+  setContainerWidth,
+  onResetContainerWidth,
 }) {
+  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;
+    const onPointerUp = () => setSliderDragging(false);
+    document.addEventListener('pointerup', onPointerUp);
+    document.addEventListener('pointercancel', onPointerUp);
+    return () => {
+      document.removeEventListener('pointerup', onPointerUp);
+      document.removeEventListener('pointercancel', onPointerUp);
+    };
+  }, [sliderDragging]);
+
+  // 外部的 tempSeconds 变更时，同步到本地显示，但不立即生效
+  useEffect(() => {
+    setLocalSeconds(tempSeconds);
+  }, [tempSeconds]);
+
   return (
-    <div className="modal-overlay" role="dialog" aria-modal="true" aria-label="设置" onClick={onClose}>
-      <div className="glass card modal" onClick={(e) => e.stopPropagation()}>
-        <div className="title" style={{ marginBottom: 12 }}>
-          <SettingsIcon width="20" height="20" />
-          <span>设置</span>
-          <span className="muted">配置刷新频率</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 }}>
-            {[10, 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>
-            ))}
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open) onClose?.();
+      }}
+    >
+      <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="10"
-            step="5"
-            value={tempSeconds}
-            onChange={(e) => setTempSeconds(Number(e.target.value))}
-            placeholder="自定义秒数"
-          />
-          {tempSeconds < 10 && (
-            <div className="error-text" style={{ marginTop: 8 }}>
-              最小 10 秒
+
+          <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 ${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);
+                  }}
+                >
+                  <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="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 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>
+            <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={saveSettings} disabled={tempSeconds < 10}>保存并关闭</button>
+          <div className="row" style={{ justifyContent: 'flex-end', marginTop: 24 }}>
+            <button
+              className="button"
+              onClick={(e) => saveSettings(e, localSeconds)}
+              disabled={localSeconds < 30}
+            >
+              保存并关闭
+            </button>
+          </div>
         </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);
+          }}
+          onCancel={() => setResetWidthConfirmOpen(false)}
+          confirmText="重置"
+        />
+      )}
+    </Dialog>
   );
 }

app/components/ThemeColorSync.jsx

@@ -0,0 +1,37 @@
+'use client';
+
+import { useEffect } from 'react';
+
+const THEME_COLORS = {
+  dark: '#0f172a',
+  light: '#ffffff',
+};
+
+function getThemeColor() {
+  if (typeof document === 'undefined') return THEME_COLORS.dark;
+  const theme = document.documentElement.getAttribute('data-theme');
+  return THEME_COLORS[theme] ?? THEME_COLORS.dark;
+}
+
+function applyThemeColor() {
+  const meta = document.querySelector('meta[name="theme-color"]');
+  if (meta) meta.setAttribute('content', getThemeColor());
+}
+
+/**
+ * 根据当前亮/暗主题同步 PWA theme-color meta，使 Android 状态栏与页面主题一致。
+ * 监听 document.documentElement 的 data-theme 变化并更新 meta。
+ */
+export default function ThemeColorSync() {
+  useEffect(() => {
+    applyThemeColor();
+    const observer = new MutationObserver(() => applyThemeColor());
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['data-theme'],
+    });
+    return () => observer.disconnect();
+  }, []);
+
+  return null;
+}

app/components/TradeModal.jsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect, useMemo, useState } from 'react';
-import { AnimatePresence, motion } from 'framer-motion';
+import { AnimatePresence } from 'framer-motion';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
@@ -10,6 +10,12 @@ import { fetchSmartFundNetValue } from '../api/fund';
 import { DatePicker, NumericInput } from './Common';
 import ConfirmModal from './ConfirmModal';
 import { CloseIcon } from './Icons';
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import PendingTradesModal from './PendingTradesModal';
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
@@ -153,50 +159,35 @@ export default function TradeModal({ type, fund, holding, onClose, onConfirm, pe
 
   const [revokeTrade, setRevokeTrade] = useState(null);
 
+  const handleOpenChange = (open) => {
+    if (!open) {
+      onClose?.();
+    }
+  };
+
   return (
-    <motion.div
-      className="modal-overlay"
-      role="dialog"
-      aria-modal="true"
-      aria-label={isBuy ? "加仓" : "减仓"}
-      onClick={onClose}
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      exit={{ opacity: 0 }}
-    >
-      <motion.div
-        initial={{ opacity: 0, scale: 0.95, y: 20 }}
-        animate={{ opacity: 1, scale: 1, y: 0 }}
-        exit={{ opacity: 0, scale: 0.95, y: 20 }}
-        className="glass card modal"
-        onClick={(e) => e.stopPropagation()}
-        style={{ maxWidth: '420px' }}
+    <Dialog open onOpenChange={handleOpenChange}>
+      <DialogContent
+        showCloseButton={false}
+        className="glass card modal trade-modal"
+        overlayClassName="modal-overlay"
+        overlayStyle={{ zIndex: 99 }}
+        style={{ maxWidth: '420px', width: '90vw', zIndex: 99 }}
       >
+        <DialogTitle className="sr-only">{isBuy ? '加仓' : '减仓'}</DialogTitle>
         <div className="title" style={{ marginBottom: 20, justifyContent: 'space-between' }}>
           <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
             <span style={{ fontSize: '20px' }}>{isBuy ? '📥' : '📤'}</span>
-            <span>{showPendingList ? '待交易队列' : (showConfirm ? (isBuy ? '买入确认' : '卖出确认') : (isBuy ? '加仓' : '减仓'))}</span>
+            <span>{showConfirm ? (isBuy ? '买入确认' : '卖出确认') : (isBuy ? '加仓' : '减仓')}</span>
           </div>
           <button className="icon-button" onClick={onClose} style={{ border: 'none', background: 'transparent' }}>
             <CloseIcon width="20" height="20" />
           </button>
         </div>
 
-        {!showPendingList && !showConfirm && currentPendingTrades.length > 0 && (
+        {!showConfirm && currentPendingTrades.length > 0 && (
           <div
-            style={{
-              marginBottom: 16,
-              background: 'rgba(230, 162, 60, 0.1)',
-              border: '1px solid rgba(230, 162, 60, 0.2)',
-              borderRadius: 8,
-              padding: '8px 12px',
-              fontSize: '12px',
-              color: '#e6a23c',
-              display: 'flex',
-              justifyContent: 'space-between',
-              alignItems: 'center',
-              cursor: 'pointer'
-            }}
+            className="trade-pending-alert"
             onClick={() => setShowPendingList(true)}
           >
             <span>⚠️ 当前有 {currentPendingTrades.length} 笔待处理交易</span>
@@ -204,55 +195,6 @@ export default function TradeModal({ type, fund, holding, onClose, onConfirm, pe
           </div>
         )}
 
-        {showPendingList ? (
-          <div className="pending-list" style={{ maxHeight: '300px', overflowY: 'auto' }}>
-            <div className="pending-list-header" style={{ position: 'sticky', top: 0, zIndex: 1, background: 'rgba(15,23,42,0.95)', backdropFilter: 'blur(6px)', paddingBottom: 8, marginBottom: 8, borderBottom: '1px solid var(--border)' }}>
-              <button
-                className="button secondary"
-                onClick={() => setShowPendingList(false)}
-                style={{ padding: '4px 8px', fontSize: '12px' }}
-              >
-                &lt; 返回
-              </button>
-            </div>
-            <div className="pending-list-items" style={{ paddingTop: 0 }}>
-              {currentPendingTrades.map((trade, idx) => (
-                <div key={trade.id || idx} style={{ background: 'rgba(255,255,255,0.05)', padding: 12, borderRadius: 8, marginBottom: 8 }}>
-                  <div className="row" style={{ justifyContent: 'space-between', marginBottom: 4 }}>
-                    <span style={{ fontWeight: 600, fontSize: '14px', color: trade.type === 'buy' ? 'var(--danger)' : 'var(--success)' }}>
-                      {trade.type === 'buy' ? '买入' : '卖出'}
-                    </span>
-                    <span className="muted" style={{ fontSize: '12px' }}>{trade.date} {trade.isAfter3pm ? '(15:00后)' : ''}</span>
-                  </div>
-                  <div className="row" style={{ justifyContent: 'space-between', fontSize: '12px' }}>
-                    <span className="muted">份额/金额</span>
-                    <span>{trade.share ? `${trade.share} 份` : `¥${trade.amount}`}</span>
-                  </div>
-                  <div className="row" style={{ justifyContent: 'space-between', fontSize: '12px', marginTop: 4 }}>
-                    <span className="muted">状态</span>
-                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                      <span style={{ color: '#e6a23c' }}>等待净值更新...</span>
-                      <button
-                        className="button secondary"
-                        onClick={() => setRevokeTrade(trade)}
-                        style={{
-                          padding: '2px 8px',
-                          fontSize: '10px',
-                          height: 'auto',
-                          background: 'rgba(255,255,255,0.1)',
-                          color: 'var(--text)'
-                        }}
-                      >
-                        撤销
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-        ) : (
-          <>
             {!showConfirm && (
               <div style={{ marginBottom: 16 }}>
                 <div className="fund-name" style={{ fontWeight: 600, fontSize: '16px', marginBottom: 4 }}>{fund?.name}</div>
@@ -263,7 +205,7 @@ export default function TradeModal({ type, fund, holding, onClose, onConfirm, pe
             {showConfirm ? (
               isBuy ? (
                 <div style={{ fontSize: '14px' }}>
-                  <div style={{ background: 'rgba(255,255,255,0.05)', borderRadius: 12, padding: 16, marginBottom: 20 }}>
+                  <div className="trade-confirm-card">
                     <div className="row" style={{ justifyContent: 'space-between', marginBottom: 8 }}>
                       <span className="muted">基金名称</span>
                       <span style={{ fontWeight: 600 }}>{fund?.name}</span>
@@ -288,7 +230,7 @@ export default function TradeModal({ type, fund, holding, onClose, onConfirm, pe
                       <span className="muted">买入日期</span>
                       <span>{date}</span>
                     </div>
-                    <div className="row" style={{ justifyContent: 'space-between', marginBottom: 8, borderTop: '1px solid rgba(255,255,255,0.1)', paddingTop: 8 }}>
+                    <div className="row trade-confirm-divider" style={{ justifyContent: 'space-between', marginBottom: 8, paddingTop: 8 }}>
                       <span className="muted">交易时段</span>
                       <span>{isAfter3pm ? '15:00后' : '15:00前'}</span>
                     </div>
@@ -301,7 +243,7 @@ export default function TradeModal({ type, fund, holding, onClose, onConfirm, pe
                     <div style={{ marginBottom: 20 }}>
                       <div className="muted" style={{ marginBottom: 8, fontSize: '12px' }}>持仓变化预览</div>
                       <div className="row" style={{ gap: 12 }}>
-                        <div style={{ flex: 1, background: 'rgba(0,0,0,0.2)', padding: 12, borderRadius: 8 }}>
+                        <div className="trade-preview-card" style={{ flex: 1 }}>
                           <div className="muted" style={{ fontSize: '12px', marginBottom: 4 }}>持有份额</div>
                           <div style={{ fontSize: '12px' }}>
                             <span style={{ opacity: 0.7 }}>{holding.share.toFixed(2)}</span>
@@ -310,7 +252,7 @@ export default function TradeModal({ type, fund, holding, onClose, onConfirm, pe
                           </div>
                         </div>
                         {price ? (
-                          <div style={{ flex: 1, background: 'rgba(0,0,0,0.2)', padding: 12, borderRadius: 8 }}>
+                          <div className="trade-preview-card" style={{ flex: 1 }}>
                             <div className="muted" style={{ fontSize: '12px', marginBottom: 4 }}>持有市值 (估)</div>
                             <div style={{ fontSize: '12px' }}>
                               <span style={{ opacity: 0.7 }}>¥{(holding.share * Number(price)).toFixed(2)}</span>
@@ -326,18 +268,18 @@ export default function TradeModal({ type, fund, holding, onClose, onConfirm, pe
                   <div className="row" style={{ gap: 12 }}>
                     <button
                       type="button"
-                      className="button secondary"
+                      className="button secondary trade-back-btn"
                       onClick={() => setShowConfirm(false)}
-                      style={{ flex: 1, background: 'rgba(255,255,255,0.05)', color: 'var(--text)' }}
+                      style={{ flex: 1 }}
                     >
                       返回修改
                     </button>
                     <button
                       type="button"
-                      className="button"
+                      className="button queue-button"
                       onClick={handleFinalConfirm}
                       disabled={loadingPrice}
-                      style={{ flex: 1, background: 'var(--primary)', opacity: loadingPrice ? 0.6 : 1, color: '#05263b' }}
+                      style={{ flex: 1, background: 'var(--primary)', opacity: loadingPrice ? 0.6 : 1 }}
                     >
                       {loadingPrice ? '请稍候' : (price ? '确认买入' : '加入待处理队列')}
                     </button>
@@ -345,7 +287,7 @@ export default function TradeModal({ type, fund, holding, onClose, onConfirm, pe
                 </div>
               ) : (
                 <div style={{ fontSize: '14px' }}>
-                  <div style={{ background: 'rgba(255,255,255,0.05)', borderRadius: 12, padding: 16, marginBottom: 20 }}>
+                  <div className="trade-confirm-card">
                     <div className="row" style={{ justifyContent: 'space-between', marginBottom: 8 }}>
                       <span className="muted">基金名称</span>
                       <span style={{ fontWeight: 600 }}>{fund?.name}</span>
@@ -370,7 +312,7 @@ export default function TradeModal({ type, fund, holding, onClose, onConfirm, pe
                       <span className="muted">卖出日期</span>
                       <span>{date}</span>
                     </div>
-                    <div className="row" style={{ justifyContent: 'space-between', marginBottom: 8, borderTop: '1px solid rgba(255,255,255,0.1)', paddingTop: 8 }}>
+                    <div className="row trade-confirm-divider" style={{ justifyContent: 'space-between', marginBottom: 8, paddingTop: 8 }}>
                       <span className="muted">预计回款</span>
                       <span style={{ color: 'var(--danger)', fontWeight: 700 }}>{loadingPrice ? '计算中...' : (price ? `¥${estimatedReturn.toFixed(2)}` : '待计算')}</span>
                     </div>
@@ -383,7 +325,7 @@ export default function TradeModal({ type, fund, holding, onClose, onConfirm, pe
                     <div style={{ marginBottom: 20 }}>
                       <div className="muted" style={{ marginBottom: 8, fontSize: '12px' }}>持仓变化预览</div>
                       <div className="row" style={{ gap: 12 }}>
-                        <div style={{ flex: 1, background: 'rgba(0,0,0,0.2)', padding: 12, borderRadius: 8 }}>
+                        <div className="trade-preview-card" style={{ flex: 1 }}>
                           <div className="muted" style={{ fontSize: '12px', marginBottom: 4 }}>持有份额</div>
                           <div style={{ fontSize: '12px' }}>
                             <span style={{ opacity: 0.7 }}>{holding.share.toFixed(2)}</span>
@@ -392,7 +334,7 @@ export default function TradeModal({ type, fund, holding, onClose, onConfirm, pe
                           </div>
                         </div>
                         {price ? (
-                          <div style={{ flex: 1, background: 'rgba(0,0,0,0.2)', padding: 12, borderRadius: 8 }}>
+                          <div className="trade-preview-card" style={{ flex: 1 }}>
                             <div className="muted" style={{ fontSize: '12px', marginBottom: 4 }}>持有市值 (估)</div>
                             <div style={{ fontSize: '12px' }}>
                               <span style={{ opacity: 0.7 }}>¥{(holding.share * sellPrice).toFixed(2)}</span>
@@ -408,15 +350,15 @@ export default function TradeModal({ type, fund, holding, onClose, onConfirm, pe
                   <div className="row" style={{ gap: 12 }}>
                     <button
                       type="button"
-                      className="button secondary"
+                      className="button secondary trade-back-btn"
                       onClick={() => setShowConfirm(false)}
-                      style={{ flex: 1, background: 'rgba(255,255,255,0.05)', color: 'var(--text)' }}
+                      style={{ flex: 1 }}
                     >
                       返回修改
                     </button>
                     <button
                       type="button"
-                      className="button"
+                      className="button queue-button"
                       onClick={handleFinalConfirm}
                       disabled={loadingPrice}
                       style={{ flex: 1, background: 'var(--danger)', opacity: loadingPrice ? 0.6 : 1 }}
@@ -472,36 +414,18 @@ export default function TradeModal({ type, fund, holding, onClose, onConfirm, pe
                       <label className="muted" style={{ display: 'block', marginBottom: 8, fontSize: '14px' }}>
                         交易时段
                       </label>
-                      <div className="row" style={{ gap: 8, background: 'rgba(0,0,0,0.2)', borderRadius: '8px', padding: '4px' }}>
+                      <div className="trade-time-slot row" style={{ gap: 8 }}>
                         <button
                           type="button"
+                          className={!isAfter3pm ? 'trade-time-btn active' : 'trade-time-btn'}
                           onClick={() => setIsAfter3pm(false)}
-                          style={{
-                            flex: 1,
-                            border: 'none',
-                            background: !isAfter3pm ? 'var(--primary)' : 'transparent',
-                            color: !isAfter3pm ? '#05263b' : 'var(--muted)',
-                            borderRadius: '6px',
-                            fontSize: '12px',
-                            cursor: 'pointer',
-                            padding: '6px 8px'
-                          }}
                         >
                           15:00前
                         </button>
                         <button
                           type="button"
+                          className={isAfter3pm ? 'trade-time-btn active' : 'trade-time-btn'}
                           onClick={() => setIsAfter3pm(true)}
-                          style={{
-                            flex: 1,
-                            border: 'none',
-                            background: isAfter3pm ? 'var(--primary)' : 'transparent',
-                            color: isAfter3pm ? '#05263b' : 'var(--muted)',
-                            borderRadius: '6px',
-                            fontSize: '12px',
-                            cursor: 'pointer',
-                            padding: '6px 8px'
-                          }}
                         >
                           15:00后
                         </button>
@@ -544,17 +468,8 @@ export default function TradeModal({ type, fund, holding, onClose, onConfirm, pe
                             <button
                               key={opt.label}
                               type="button"
+                              className="trade-amount-btn"
                               onClick={() => handleSetShareFraction(opt.value)}
-                              style={{
-                                flex: 1,
-                                padding: '4px 8px',
-                                fontSize: '12px',
-                                background: 'rgba(255,255,255,0.1)',
-                                border: 'none',
-                                borderRadius: '4px',
-                                color: 'var(--text)',
-                                cursor: 'pointer'
-                              }}
                             >
                               {opt.label}
                             </button>
@@ -563,7 +478,7 @@ export default function TradeModal({ type, fund, holding, onClose, onConfirm, pe
                       )}
                       {holding && (
                         <div className="muted" style={{ fontSize: '12px', marginTop: 6 }}>
-                          当前持仓: {holding.share.toFixed(2)} 份 {pendingSellShare > 0 && <span style={{ color: '#e6a23c', marginLeft: 8 }}>冻结: {pendingSellShare.toFixed(2)} 份</span>}
+                          当前持仓: {holding.share.toFixed(2)} 份 {pendingSellShare > 0 && <span className="trade-pending-status" style={{ marginLeft: 8 }}>冻结: {pendingSellShare.toFixed(2)} 份</span>}
                         </div>
                       )}
                     </div>
@@ -614,36 +529,18 @@ export default function TradeModal({ type, fund, holding, onClose, onConfirm, pe
                       <label className="muted" style={{ display: 'block', marginBottom: 8, fontSize: '14px' }}>
                         交易时段
                       </label>
-                      <div className="row" style={{ gap: 8, background: 'rgba(0,0,0,0.2)', borderRadius: '8px', padding: '4px' }}>
+                      <div className="trade-time-slot row" style={{ gap: 8 }}>
                         <button
                           type="button"
+                          className={!isAfter3pm ? 'trade-time-btn active' : 'trade-time-btn'}
                           onClick={() => setIsAfter3pm(false)}
-                          style={{
-                            flex: 1,
-                            border: 'none',
-                            background: !isAfter3pm ? 'var(--primary)' : 'transparent',
-                            color: !isAfter3pm ? '#05263b' : 'var(--muted)',
-                            borderRadius: '6px',
-                            fontSize: '12px',
-                            cursor: 'pointer',
-                            padding: '6px 8px'
-                          }}
                         >
                           15:00前
                         </button>
                         <button
                           type="button"
+                          className={isAfter3pm ? 'trade-time-btn active' : 'trade-time-btn'}
                           onClick={() => setIsAfter3pm(true)}
-                          style={{
-                            flex: 1,
-                            border: 'none',
-                            background: isAfter3pm ? 'var(--primary)' : 'transparent',
-                            color: isAfter3pm ? '#05263b' : 'var(--muted)',
-                            borderRadius: '6px',
-                            fontSize: '12px',
-                            cursor: 'pointer',
-                            padding: '6px 8px'
-                          }}
                         >
                           15:00后
                         </button>
@@ -663,7 +560,7 @@ export default function TradeModal({ type, fund, holding, onClose, onConfirm, pe
                 )}
 
                 <div className="row" style={{ gap: 12, marginTop: 12 }}>
-                  <button type="button" className="button secondary" onClick={onClose} style={{ flex: 1, background: 'rgba(255,255,255,0.05)', color: 'var(--text)' }}>取消</button>
+                  <button type="button" className="button secondary trade-cancel-btn" onClick={onClose} style={{ flex: 1 }}>取消</button>
                   <button
                     type="submit"
                     className="button"
@@ -675,9 +572,7 @@ export default function TradeModal({ type, fund, holding, onClose, onConfirm, pe
                 </div>
               </form>
             )}
-          </>
-        )}
-      </motion.div>
+      </DialogContent>
       <AnimatePresence>
         {revokeTrade && (
           <ConfirmModal
@@ -693,6 +588,12 @@ export default function TradeModal({ type, fund, holding, onClose, onConfirm, pe
           />
         )}
       </AnimatePresence>
-    </motion.div>
+      <PendingTradesModal
+        open={showPendingList}
+        trades={currentPendingTrades}
+        onClose={() => setShowPendingList(false)}
+        onRevoke={(trade) => setRevokeTrade(trade)}
+      />
+    </Dialog>
   );
 }

app/components/TransactionHistoryModal.jsx

@@ -1,18 +1,24 @@
 'use client';
 
 import { useState, useMemo } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
+import { AnimatePresence } from 'framer-motion';
 import { CloseIcon } from './Icons';
 import ConfirmModal from './ConfirmModal';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+} from '@/components/ui/dialog';
 
-export default function TransactionHistoryModal({ 
-  fund, 
-  transactions = [], 
-  pendingTransactions = [], 
-  onClose, 
+export default function TransactionHistoryModal({
+  fund,
+  transactions = [],
+  pendingTransactions = [],
+  onClose,
   onDeleteTransaction,
   onDeletePending,
-  onAddHistory
+  onAddHistory,
 }) {
   const [deleteConfirm, setDeleteConfirm] = useState(null); // { type: 'pending' | 'history', item }
 
@@ -39,31 +45,46 @@ export default function TransactionHistoryModal({
     setDeleteConfirm(null);
   };
 
+  const handleCloseClick = (event) => {
+    // 只关闭交易记录弹框，避免事件冒泡影响到其他弹框（例如 HoldingActionModal）
+    event.stopPropagation();
+    onClose?.();
+  };
+
+  const handleOpenChange = (open) => {
+    if (!open) {
+      onClose?.();
+    }
+  };
+
   return (
-    <motion.div
-      className="modal-overlay"
-      role="dialog"
-      aria-modal="true"
-      onClick={onClose}
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      exit={{ opacity: 0 }}
-      style={{ zIndex: 1100 }} // Higher than TradeModal if stacked, but usually TradeModal closes or this opens on top
-    >
-      <motion.div
-        initial={{ opacity: 0, scale: 0.95, y: 20 }}
-        animate={{ opacity: 1, scale: 1, y: 0 }}
-        exit={{ opacity: 0, scale: 0.95, y: 20 }}
-        className="glass card modal"
-        onClick={(e) => e.stopPropagation()}
-        style={{ maxWidth: '480px', maxHeight: '80vh', display: 'flex', flexDirection: 'column' }}
+    <Dialog open onOpenChange={handleOpenChange}>
+      <DialogContent
+        showCloseButton={false}
+        className="glass card modal tx-history-modal"
+        overlayClassName="modal-overlay"
+        overlayStyle={{ zIndex: 998 }}
+        style={{
+          maxWidth: '480px',
+          width: '90vw',
+          maxHeight: '80vh',
+          display: 'flex',
+          flexDirection: 'column',
+          zIndex: 999, // 保持原有层级，确保在其他弹框之上
+        }}
       >
+        <DialogTitle className="sr-only">交易记录</DialogTitle>
+
         <div className="title" style={{ marginBottom: 20, justifyContent: 'space-between', flexShrink: 0 }}>
           <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' }}>
+          <button
+            className="icon-button"
+            onClick={handleCloseClick}
+            style={{ border: 'none', background: 'transparent' }}
+          >
             <CloseIcon width="20" height="20" />
           </button>
         </div>
@@ -73,12 +94,12 @@ export default function TransactionHistoryModal({
             <div className="fund-name" style={{ fontWeight: 600, fontSize: '16px', marginBottom: 4 }}>{fund?.name}</div>
             <div className="muted" style={{ fontSize: '12px' }}>#{fund?.code}</div>
           </div>
-          <button 
-            className="button primary" 
+          <button
+            className="button primary"
             onClick={onAddHistory}
-            style={{ fontSize: '12px', padding: '4px 12px', height: 'auto' }}
+            style={{ fontSize: '12px', padding: '4px 12px', height: 'auto', width: '80px' }}
           >
-            ➕ 添加记录
+            添加记录
           </button>
         </div>
 
@@ -88,22 +109,14 @@ export default function TransactionHistoryModal({
             <div style={{ marginBottom: 20 }}>
               <div className="muted" style={{ fontSize: '12px', marginBottom: 8, paddingLeft: 4 }}>待处理队列</div>
               {pendingTransactions.map((item) => (
-                <div key={item.id} style={{ background: 'rgba(230, 162, 60, 0.1)', border: '1px solid rgba(230, 162, 60, 0.2)', borderRadius: 8, padding: 12, marginBottom: 8 }}>
+                <div key={item.id} className="tx-history-pending-item">
                   <div className="row" style={{ justifyContent: 'space-between', marginBottom: 4 }}>
                     <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                       <span style={{ fontWeight: 600, fontSize: '14px', color: item.type === 'buy' ? 'var(--primary)' : 'var(--danger)' }}>
                         {item.type === 'buy' ? '买入' : '卖出'}
                       </span>
                       {item.type === 'buy' && item.isDca && (
-                        <span
-                          style={{
-                            fontSize: 10,
-                            padding: '2px 6px',
-                            borderRadius: 999,
-                            background: 'rgba(34,197,94,0.15)',
-                            color: '#4ade80'
-                          }}
-                        >
+                        <span className="tx-history-dca-badge">
                           定投
                         </span>
                       )}
@@ -115,14 +128,17 @@ export default function TransactionHistoryModal({
                     <span>{item.share ? `${Number(item.share).toFixed(2)} 份` : `¥${Number(item.amount).toFixed(2)}`}</span>
                   </div>
                   <div className="row" style={{ justifyContent: 'space-between', fontSize: '12px', marginTop: 8 }}>
-                    <span style={{ color: '#e6a23c' }}>等待净值更新...</span>
-                    <button
-                      className="button secondary"
+                    <span className="tx-history-pending-status">等待净值更新...</span>
+                    <Button
+                      type="button"
+                      size="xs"
+                      variant="destructive"
+                      className="bg-destructive text-white hover:bg-destructive/90"
                       onClick={() => handleDeleteClick(item, 'pending')}
-                      style={{ padding: '2px 8px', fontSize: '10px', height: 'auto', background: 'rgba(255,255,255,0.1)' }}
+                      style={{ paddingInline: 10 }}
                     >
                       撤销
-                    </button>
+                    </Button>
                   </div>
                 </div>
               ))}
@@ -136,22 +152,14 @@ export default function TransactionHistoryModal({
               <div className="muted" style={{ textAlign: 'center', padding: '20px 0', fontSize: '12px' }}>暂无历史交易记录</div>
             ) : (
               sortedTransactions.map((item) => (
-                <div key={item.id} style={{ background: 'rgba(255, 255, 255, 0.05)', borderRadius: 8, padding: 12, marginBottom: 8 }}>
+                <div key={item.id} className="tx-history-record-item">
                   <div className="row" style={{ justifyContent: 'space-between', marginBottom: 4 }}>
                     <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                       <span style={{ fontWeight: 600, fontSize: '14px', color: item.type === 'buy' ? 'var(--primary)' : 'var(--danger)' }}>
                         {item.type === 'buy' ? '买入' : '卖出'}
                       </span>
                       {item.type === 'buy' && item.isDca && (
-                        <span
-                          style={{
-                            fontSize: 10,
-                            padding: '2px 6px',
-                            borderRadius: 999,
-                            background: 'rgba(34,197,94,0.15)',
-                            color: '#4ade80'
-                          }}
-                        >
+                        <span className="tx-history-dca-badge">
                           定投
                         </span>
                       )}
@@ -174,13 +182,16 @@ export default function TransactionHistoryModal({
                   )}
                   <div className="row" style={{ justifyContent: 'space-between', fontSize: '12px', marginTop: 8 }}>
                     <span className="muted"></span>
-                    <button
-                      className="button secondary"
+                    <Button
+                      type="button"
+                      size="xs"
+                      variant="destructive"
+                      className="bg-destructive text-white hover:bg-destructive/90"
                       onClick={() => handleDeleteClick(item, 'history')}
-                      style={{ padding: '2px 8px', fontSize: '10px', height: 'auto', background: 'rgba(255,255,255,0.1)', color: 'var(--muted)' }}
+                      style={{ paddingInline: 10 }}
                     >
                       删除记录
-                    </button>
+                    </Button>
                   </div>
                 </div>
               ))
@@ -188,22 +199,21 @@ export default function TransactionHistoryModal({
           </div>
         </div>
 
-      </motion.div>
-
-      <AnimatePresence>
-        {deleteConfirm && (
-          <ConfirmModal
-            key="delete-confirm"
-            title={deleteConfirm.type === 'pending' ? "撤销交易" : "删除记录"}
-            message={deleteConfirm.type === 'pending' 
-              ? "确定要撤销这笔待处理交易吗？" 
-              : "确定要删除这条交易记录吗？\n注意：删除记录不会恢复已变更的持仓数据。"}
-            onConfirm={handleConfirmDelete}
-            onCancel={() => setDeleteConfirm(null)}
-            confirmText="确认删除"
-          />
-        )}
-      </AnimatePresence>
-    </motion.div>
+        <AnimatePresence>
+          {deleteConfirm && (
+            <ConfirmModal
+              key="delete-confirm"
+              title={deleteConfirm.type === 'pending' ? '撤销交易' : '删除记录'}
+              message={deleteConfirm.type === 'pending'
+                ? '确定要撤销这笔待处理交易吗？'
+                : '确定要删除这条交易记录吗？\n注意：删除记录不会恢复已变更的持仓数据。'}
+              onConfirm={handleConfirmDelete}
+              onCancel={() => setDeleteConfirm(null)}
+              confirmText="确认删除"
+            />
+          )}
+        </AnimatePresence>
+      </DialogContent>
+    </Dialog>
   );
 }

app/components/WeChatModal.jsx

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

app/hooks/useBodyScrollLock.js

@@ -0,0 +1,60 @@
+import { useEffect, useRef } from "react";
+
+// 全局状态：支持多个弹框“引用计数”式地共用一个滚动锁
+let scrollLockCount = 0;
+let lockedScrollY = 0;
+let originalBodyPosition = "";
+let originalBodyTop = "";
+
+function lockBodyScroll() {
+  scrollLockCount += 1;
+
+  // 只有第一个锁才真正修改 body，避免多弹框互相干扰
+  if (scrollLockCount === 1) {
+    lockedScrollY = window.scrollY || window.pageYOffset || 0;
+    originalBodyPosition = document.body.style.position || "";
+    originalBodyTop = document.body.style.top || "";
+
+    document.body.style.position = "fixed";
+    document.body.style.top = `-${lockedScrollY}px`;
+    document.body.style.width = "100%";
+  }
+}
+
+function unlockBodyScroll() {
+  if (scrollLockCount === 0) return;
+
+  scrollLockCount -= 1;
+
+  // 只有全部弹框都关闭时才恢复滚动位置
+  if (scrollLockCount === 0) {
+    document.body.style.position = originalBodyPosition;
+    document.body.style.top = originalBodyTop;
+    document.body.style.width = "";
+
+    // 恢复到锁定前的滚动位置，而不是跳到顶部
+    window.scrollTo(0, lockedScrollY);
+  }
+}
+
+export function useBodyScrollLock(open) {
+  const isLockedRef = useRef(false);
+
+  useEffect(() => {
+    if (open && !isLockedRef.current) {
+      lockBodyScroll();
+      isLockedRef.current = true;
+    } else if (!open && isLockedRef.current) {
+      unlockBodyScroll();
+      isLockedRef.current = false;
+    }
+
+    // 组件卸载或依赖变化时兜底释放锁
+    return () => {
+      if (isLockedRef.current) {
+        unlockBodyScroll();
+        isLockedRef.current = false;
+      }
+    };
+  }, [open]);
+}

app/hooks/useFundFuzzyMatcher.js

@@ -0,0 +1,204 @@
+import { useCallback, useRef } from 'react';
+import { cachedRequest, clearCachedRequest } from '../lib/cacheRequest';
+
+const FUND_CODE_SEARCH_URL = 'https://fund.eastmoney.com/js/fundcode_search.js';
+const FUND_LIST_CACHE_KEY = 'eastmoney_fundcode_search_list';
+const FUND_LIST_CACHE_TIME = 24 * 60 * 60 * 1000;
+
+const formatEastMoneyFundList = (rawList) => {
+  if (!Array.isArray(rawList)) return [];
+
+  return rawList
+    .map((item) => {
+      if (!Array.isArray(item)) return null;
+      const code = String(item[0] ?? '').trim();
+      const name = String(item[2] ?? '').trim();
+      if (!code || !name) return null;
+      return { code, name };
+    })
+    .filter(Boolean);
+};
+
+export const useFundFuzzyMatcher = () => {
+  const allFundFuseRef = useRef(null);
+  const allFundLoadPromiseRef = useRef(null);
+
+  const getAllFundFuse = useCallback(async () => {
+    if (allFundFuseRef.current) return allFundFuseRef.current;
+    if (allFundLoadPromiseRef.current) return allFundLoadPromiseRef.current;
+
+    allFundLoadPromiseRef.current = (async () => {
+      const [fuseModule, allFundList] = await Promise.all([
+        import('fuse.js'),
+        cachedRequest(
+          () =>
+            new Promise((resolve, reject) => {
+              if (typeof window === 'undefined' || typeof document === 'undefined' || !document.body) {
+                reject(new Error('NO_BROWSER_ENV'));
+                return;
+              }
+
+              const prevR = window.r;
+              const script = document.createElement('script');
+              script.src = `${FUND_CODE_SEARCH_URL}?_=${Date.now()}`;
+              script.async = true;
+
+              const cleanup = () => {
+                if (document.body.contains(script)) {
+                  document.body.removeChild(script);
+                }
+                if (prevR === undefined) {
+                  try {
+                    delete window.r;
+                  } catch (e) {
+                    window.r = undefined;
+                  }
+                } else {
+                  window.r = prevR;
+                }
+              };
+
+              script.onload = () => {
+                const snapshot = Array.isArray(window.r) ? JSON.parse(JSON.stringify(window.r)) : [];
+                cleanup();
+                const parsed = formatEastMoneyFundList(snapshot);
+                if (!parsed.length) {
+                  reject(new Error('PARSE_ALL_FUND_FAILED'));
+                  return;
+                }
+                resolve(parsed);
+              };
+
+              script.onerror = () => {
+                cleanup();
+                reject(new Error('LOAD_ALL_FUND_FAILED'));
+              };
+
+              document.body.appendChild(script);
+            }),
+          FUND_LIST_CACHE_KEY,
+          { cacheTime: FUND_LIST_CACHE_TIME }
+        ),
+      ]);
+      const Fuse = fuseModule.default;
+      const fuse = new Fuse(Array.isArray(allFundList) ? allFundList : [], {
+        keys: ['name', 'code'],
+        includeScore: true,
+        threshold: 0.5,
+        ignoreLocation: true,
+        minMatchCharLength: 2,
+      });
+
+      allFundFuseRef.current = fuse;
+      return fuse;
+    })();
+
+    try {
+      return await allFundLoadPromiseRef.current;
+    } catch (e) {
+      allFundLoadPromiseRef.current = null;
+      clearCachedRequest(FUND_LIST_CACHE_KEY);
+      throw e;
+    }
+  }, []);
+
+  const normalizeFundText = useCallback((value) => {
+    if (typeof value !== 'string') return '';
+    return value
+      .toUpperCase()
+      .replace(/[（(]/g, '(')
+      .replace(/[）)]/g, ')')
+      .replace(/[·•]/g, '')
+      .replace(/\s+/g, '')
+      .replace(/[^\u4e00-\u9fa5A-Z0-9()]/g, '');
+  }, []);
+
+  const parseFundQuerySignals = useCallback((rawName) => {
+    const normalized = normalizeFundText(rawName);
+    const hasETF = normalized.includes('ETF');
+    const hasLOF = normalized.includes('LOF');
+    const hasLink = normalized.includes('联接');
+    const shareMatch = normalized.match(/([A-Z])(?:类)?$/i);
+    const shareClass = shareMatch ? shareMatch[1].toUpperCase() : null;
+
+    const core = normalized
+      .replace(/基金/g, '')
+      .replace(/ETF联接/g, '')
+      .replace(/联接[A-Z]?/g, '')
+      .replace(/ETF/g, '')
+      .replace(/LOF/g, '')
+      .replace(/[A-Z](?:类)?$/g, '');
+
+    return {
+      normalized,
+      core,
+      hasETF,
+      hasLOF,
+      hasLink,
+      shareClass,
+    };
+  }, [normalizeFundText]);
+
+  const resolveFundCodeByFuzzy = useCallback(async (name) => {
+    const querySignals = parseFundQuerySignals(name);
+    if (!querySignals.normalized) return null;
+
+    const len = querySignals.normalized.length;
+    const strictThreshold = len <= 4 ? 0.16 : len <= 8 ? 0.22 : 0.28;
+    const relaxedThreshold = Math.min(0.45, strictThreshold + 0.16);
+    const scoreGapThreshold = len <= 5 ? 0.08 : 0.06;
+
+    const fuse = await getAllFundFuse();
+    const recalled = fuse.search(name, { limit: 50 });
+    if (!recalled.length) return null;
+
+    const stage1 = recalled.filter((item) => (item.score ?? 1) <= relaxedThreshold);
+    if (!stage1.length) return null;
+
+    const ranked = stage1
+      .map((item) => {
+        const candidateSignals = parseFundQuerySignals(item?.item?.name || '');
+        let finalScore = item.score ?? 1;
+
+        if (querySignals.hasETF) {
+          finalScore += candidateSignals.hasETF ? -0.04 : 0.2;
+        }
+        if (querySignals.hasLOF) {
+          finalScore += candidateSignals.hasLOF ? -0.04 : 0.2;
+        }
+        if (querySignals.hasLink) {
+          finalScore += candidateSignals.hasLink ? -0.03 : 0.18;
+        }
+        if (querySignals.shareClass) {
+          finalScore += candidateSignals.shareClass === querySignals.shareClass ? -0.03 : 0.18;
+        }
+
+        if (querySignals.core && candidateSignals.core) {
+          if (candidateSignals.core.includes(querySignals.core)) {
+            finalScore -= 0.06;
+          } else if (!querySignals.core.includes(candidateSignals.core)) {
+            finalScore += 0.06;
+          }
+        }
+
+        return { ...item, finalScore };
+      })
+      .sort((a, b) => a.finalScore - b.finalScore);
+
+    const top1 = ranked[0];
+    if (!top1 || top1.finalScore > strictThreshold) return null;
+
+    const top2 = ranked[1];
+    if (top2 && (top2.finalScore - top1.finalScore) < scoreGapThreshold) {
+      return null;
+    }
+
+    return top1?.item?.code || null;
+  }, [getAllFundFuse, parseFundQuerySignals]);
+
+  return {
+    resolveFundCodeByFuzzy,
+  };
+};
+
+export default useFundFuzzyMatcher;

app/layout.jsx

@@ -1,5 +1,8 @@
+import { Toaster } from '@/components/ui/sonner';
 import './globals.css';
 import AnalyticsGate from './components/AnalyticsGate';
+import PwaRegister from './components/PwaRegister';
+import ThemeColorSync from './components/ThemeColorSync';
 import packageJson from '../package.json';
 
 export const metadata = {
@@ -11,14 +14,31 @@ export default function RootLayout({ children }) {
   const GA_ID = process.env.NEXT_PUBLIC_GA_ID;
 
   return (
-    <html lang="zh-CN">
-      <head>
-        <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
-      </head>
-      <body>
-        <AnalyticsGate GA_ID={GA_ID} />
-        {children}
-      </body>
+    <html lang="zh-CN" suppressHydrationWarning>
+    <head>
+      <meta name="apple-mobile-web-app-title" content="基估宝" />
+      <meta name="apple-mobile-web-app-capable" content="yes"/>
+      <meta name="apple-mobile-web-app-status-bar-style" content="default"/>
+      <link rel="apple-touch-icon" href="/Icon-60@3x.png?v=1"/>
+      <link rel="apple-touch-icon" sizes="180x180" href="/Icon-60@3x.png?v=1"/>
+      <link rel="manifest" href="/manifest.webmanifest" />
+      {/* 初始为暗色；ThemeColorSync 会按 data-theme 同步为亮/暗 */}
+      <meta name="theme-color" content="#0f172a" />
+      <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+      {/* 尽早设置 data-theme，减少首屏主题闪烁；与 suppressHydrationWarning 配合避免服务端/客户端 html 属性不一致报错 */}
+      <script
+        dangerouslySetInnerHTML={{
+          __html: `(function(){try{var t=localStorage.getItem("theme");if(t==="light"||t==="dark")document.documentElement.setAttribute("data-theme",t);}catch(e){}})();`,
+        }}
+      />
+    </head>
+    <body>
+      <ThemeColorSync />
+      <PwaRegister />
+      <AnalyticsGate GA_ID={GA_ID} />
+      {children}
+      <Toaster />
+    </body>
     </html>
   );
 }

app/lib/tradingCalendar.js

@@ -0,0 +1,56 @@
+/**
+ * A股交易日历：基于 chinese-days 节假日数据，严格判断某日期是否为交易日
+ * 交易日 = 周一至周五 且 不在法定节假日
+ * 调休补班日（周末变工作日）A股仍休市，故不视为交易日
+ */
+
+const CDN_BASE = 'https://cdn.jsdelivr.net/npm/chinese-days@1/dist/years';
+const yearCache = new Map(); // year -> Set<dateStr> (holidays)
+
+/**
+ * 加载某年的节假日数据
+ * @param {number} year
+ * @returns {Promise<Set<string>>} 节假日日期集合，格式 YYYY-MM-DD
+ */
+export async function loadHolidaysForYear(year) {
+  if (yearCache.has(year)) {
+    return yearCache.get(year);
+  }
+  try {
+    const res = await fetch(`${CDN_BASE}/${year}.json`);
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    const data = await res.json();
+    const holidays = new Set(Object.keys(data?.holidays ?? {}));
+    yearCache.set(year, holidays);
+    return holidays;
+  } catch (e) {
+    console.warn(`[tradingCalendar] 加载 ${year} 年节假日失败:`, e);
+    yearCache.set(year, new Set());
+    return yearCache.get(year);
+  }
+}
+
+/**
+ * 加载多个年份的节假日数据
+ * @param {number[]} years
+ */
+export async function loadHolidaysForYears(years) {
+  await Promise.all([...new Set(years)].map(loadHolidaysForYear));
+}
+
+/**
+ * 判断某日期是否为 A股交易日
+ * @param {dayjs.Dayjs} date - dayjs 对象
+ * @param {Map<number, Set<string>>} [cache] - 可选，已加载的年份缓存，默认使用内部 yearCache
+ * @returns {boolean}
+ */
+export function isTradingDay(date, cache = yearCache) {
+  const dayOfWeek = date.day(); // 0=周日, 6=周六
+  if (dayOfWeek === 0 || dayOfWeek === 6) return false;
+
+  const dateStr = date.format('YYYY-MM-DD');
+  const year = date.year();
+  const holidays = cache.get(year);
+  if (!holidays) return true; // 未加载该年数据时，仅排除周末
+  return !holidays.has(dateStr);
+}

components.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": false,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

components/ui/button.jsx

@@ -0,0 +1,60 @@
+import * as React from "react"
+import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-[linear-gradient(#0ea5e9,#0891b2)] text-white hover:bg-[linear-gradient(#0284c7,#0e7490)]",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props} />
+  );
+}
+
+export { Button, buttonVariants }

components/ui/dialog.jsx

@@ -0,0 +1,179 @@
+"use client"
+
+import * as React from "react"
+import { XIcon } from "lucide-react"
+import { Dialog as DialogPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import {CloseIcon} from "@/app/components/Icons";
+import { useBodyScrollLock } from "../../app/hooks/useBodyScrollLock";
+
+function Dialog({
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+  ...props
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false);
+  const isControlled = openProp !== undefined;
+  const currentOpen = isControlled ? openProp : uncontrolledOpen;
+
+  // 使用全局 hook 统一处理 body 滚动锁定 & 恢复，避免弹窗打开时页面跳到顶部
+  useBodyScrollLock(currentOpen);
+
+  const handleOpenChange = React.useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+
+  return (
+    <DialogPrimitive.Root
+      data-slot="dialog"
+      open={isControlled ? openProp : undefined}
+      defaultOpen={defaultOpen}
+      onOpenChange={handleOpenChange}
+      {...props}
+    />
+  );
+}
+
+function DialogTrigger({
+  ...props
+}) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({
+  ...props
+}) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({
+  ...props
+}) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-[var(--dialog-overlay)] backdrop-blur-[4px] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  overlayClassName,
+  overlayStyle,
+  ...props
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay className={overlayClassName} style={overlayStyle} />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-[50%] left-[50%] z-50 w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-[16px] border border-[var(--border)] text-[var(--foreground)] p-6 dialog-content-shadow outline-none duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
+          "mobile-dialog-glass",
+          className
+        )}
+        {...props}>
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="absolute top-4 right-4 rounded-md p-1.5 text-[var(--muted-foreground)] opacity-70 transition-colors duration-200 hover:opacity-100 hover:text-[var(--foreground)] hover:bg-[var(--secondary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--card)] disabled:pointer-events-none cursor-pointer [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+            <CloseIcon width="20" height="20" />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props} />
+  );
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+      {...props}>
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close asChild>
+          <button type="button" className="button secondary px-4 h-11 rounded-xl cursor-pointer">
+            Close
+          </button>
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  );
+}
+
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold text-[var(--foreground)]", className)}
+      {...props} />
+  );
+}
+
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-sm text-[var(--muted-foreground)]", className)}
+      {...props} />
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

components/ui/drawer.jsx

@@ -0,0 +1,262 @@
+"use client"
+
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "@/lib/utils"
+import { useBodyScrollLock } from "../../app/hooks/useBodyScrollLock"
+
+const DrawerScrollLockContext = React.createContext(null)
+
+/**
+ * 移动端滚动锁定：仅将 body 设为 position:fixed，用负值 top 把页面“拉”回当前视口位置，
+ * 既锁定滚动又保留视觉位置；overlay 上 ontouchmove preventDefault 防止背景触摸滚动。
+ */
+function useScrollLock(open) {
+  const onOverlayTouchMove = React.useCallback((e) => {
+    e.preventDefault()
+  }, [])
+
+  // 统一使用 app 级 hook 处理 body 滚动锁定 & 恢复，避免多处实现导致位移/跳顶问题
+  useBodyScrollLock(open)
+
+  return React.useMemo(
+    () => (open ? { onTouchMove: onOverlayTouchMove } : null),
+    [open, onOverlayTouchMove]
+  )
+}
+
+function parseVhToPx(vhStr) {
+  if (typeof vhStr === "number") return vhStr
+  const match = String(vhStr).match(/^([\d.]+)\s*vh$/)
+  if (!match) return null
+  return (window.innerHeight * Number(match[1])) / 100
+}
+
+function Drawer({ open, ...props }) {
+  const scrollLock = useScrollLock(open)
+  const contextValue = React.useMemo(
+    () => ({ ...scrollLock, open: !!open }),
+    [scrollLock, open]
+  )
+  return (
+    <DrawerScrollLockContext.Provider value={contextValue}>
+      <DrawerPrimitive.Root modal={false} data-slot="drawer" open={open} {...props} />
+    </DrawerScrollLockContext.Provider>
+  )
+}
+
+function DrawerTrigger({
+  ...props
+}) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
+}
+
+function DrawerPortal({
+  ...props
+}) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
+}
+
+function DrawerClose({
+  ...props
+}) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}) {
+  const ctx = React.useContext(DrawerScrollLockContext)
+  const { open = false, ...scrollLockProps } = ctx || {}
+  // modal={false} 时 vaul 不渲染/隐藏 Overlay，用自定义遮罩 div 保证始终有遮罩；点击遮罩关闭
+  return (
+    <DrawerPrimitive.Close asChild>
+      <div
+        data-slot="drawer-overlay"
+        data-state={open ? "open" : "closed"}
+        role="button"
+        tabIndex={-1}
+        aria-label="关闭"
+        className={cn(
+          "fixed inset-0 z-50 cursor-default bg-[var(--drawer-overlay,rgba(0,0,0,0.45))] backdrop-blur-[6px]",
+          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+          className
+        )}
+        {...scrollLockProps}
+        {...props}
+      />
+    </DrawerPrimitive.Close>
+  );
+}
+
+function DrawerContent({
+  className,
+  children,
+  defaultHeight = "77vh",
+  minHeight = "20vh",
+  maxHeight = "90vh",
+  ...props
+}) {
+  const [heightPx, setHeightPx] = React.useState(() =>
+    typeof window !== "undefined" ? parseVhToPx(defaultHeight) : null
+  );
+  const [isDragging, setIsDragging] = React.useState(false);
+  const dragRef = React.useRef({ startY: 0, startHeight: 0 });
+
+  const minPx = React.useMemo(() => parseVhToPx(minHeight), [minHeight]);
+  const maxPx = React.useMemo(() => parseVhToPx(maxHeight), [maxHeight]);
+
+  React.useEffect(() => {
+    const px = parseVhToPx(defaultHeight);
+    if (px != null) setHeightPx(px);
+  }, [defaultHeight]);
+
+  React.useEffect(() => {
+    const sync = () => {
+      const max = parseVhToPx(maxHeight);
+      const min = parseVhToPx(minHeight);
+      setHeightPx((prev) => {
+        if (prev == null) return parseVhToPx(defaultHeight);
+        const clamped = Math.min(prev, max ?? prev);
+        return Math.max(clamped, min ?? clamped);
+      });
+    };
+    window.addEventListener("resize", sync);
+    return () => window.removeEventListener("resize", sync);
+  }, [defaultHeight, minHeight, maxHeight]);
+
+  const handlePointerDown = React.useCallback(
+    (e) => {
+      e.preventDefault();
+      setIsDragging(true);
+      dragRef.current = { startY: e.clientY ?? e.touches?.[0]?.clientY, startHeight: heightPx ?? parseVhToPx(defaultHeight) ?? 0 };
+    },
+    [heightPx, defaultHeight]
+  );
+
+  React.useEffect(() => {
+    if (!isDragging) return;
+    const move = (e) => {
+      const clientY = e.clientY ?? e.touches?.[0]?.clientY;
+      const { startY, startHeight } = dragRef.current;
+      const delta = startY - clientY;
+      const next = Math.min(maxPx ?? Infinity, Math.max(minPx ?? 0, startHeight + delta));
+      setHeightPx(next);
+    };
+    const up = () => setIsDragging(false);
+    document.addEventListener("mousemove", move, { passive: true });
+    document.addEventListener("mouseup", up);
+    document.addEventListener("touchmove", move, { passive: true });
+    document.addEventListener("touchend", up);
+    return () => {
+      document.removeEventListener("mousemove", move);
+      document.removeEventListener("mouseup", up);
+      document.removeEventListener("touchmove", move);
+      document.removeEventListener("touchend", up);
+    };
+  }, [isDragging, minPx, maxPx]);
+
+  const contentStyle = React.useMemo(() => {
+    if (heightPx == null) return undefined;
+    return { height: `${heightPx}px`, maxHeight: maxPx != null ? `${maxPx}px` : undefined };
+  }, [heightPx, maxPx]);
+
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        data-slot="drawer-content"
+        style={contentStyle}
+        className={cn(
+          "group/drawer-content fixed z-50 flex h-auto flex-col bg-[var(--card)] text-[var(--text)] border-[var(--border)]",
+          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-[var(--radius)] data-[vaul-drawer-direction=top]:border-b drawer-shadow-top",
+          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[88vh] data-[vaul-drawer-direction=bottom]:rounded-t-[20px] data-[vaul-drawer-direction=bottom]:border-t drawer-shadow-bottom",
+          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
+          "drawer-content-theme",
+          className
+        )}
+        {...props}>
+        <div
+          role="separator"
+          aria-label="拖动调整高度"
+          onMouseDown={handlePointerDown}
+          onTouchStart={handlePointerDown}
+          className={cn(
+            "mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full bg-[var(--muted)] cursor-n-resize touch-none select-none",
+            "group-data-[vaul-drawer-direction=bottom]/drawer-content:block",
+            "hover:bg-[var(--muted-foreground)/0.4] active:bg-[var(--muted-foreground)/0.6]"
+          )}
+        />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  );
+}
+
+function DrawerHeader({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn(
+        "flex flex-col gap-0.5 p-4 border-b border-[var(--border)] group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
+        "drawer-header-theme",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function DrawerFooter({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props} />
+  );
+}
+
+function DrawerTitle({
+  className,
+  ...props
+}) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn("font-semibold text-[var(--text)]", className)}
+      {...props} />
+  );
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn("text-sm text-[var(--muted)]", className)}
+      {...props} />
+  );
+}
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}

components/ui/field.jsx

@@ -0,0 +1,245 @@
+"use client"
+
+import { useMemo } from "react"
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+import { Separator } from "@/components/ui/separator"
+
+function FieldSet({
+  className,
+  ...props
+}) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        "flex flex-col gap-6",
+        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        "mb-3 font-medium",
+        "data-[variant=legend]:text-base",
+        "data-[variant=label]:text-sm",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function FieldGroup({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
+        className
+      )}
+      {...props} />
+  );
+}
+
+const fieldVariants = cva("group/field flex w-full gap-3 data-[invalid=true]:text-destructive", {
+  variants: {
+    orientation: {
+      vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+      horizontal: [
+        "flex-row items-center",
+        "[&>[data-slot=field-label]]:flex-auto",
+        "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+      ],
+      responsive: [
+        "flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto",
+        "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+        "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+      ],
+    },
+  },
+  defaultVariants: {
+    orientation: "vertical",
+  },
+})
+
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(
+        fieldVariants({ orientation }),
+        // iOS 聚焦时若输入框字体 < 16px 会触发缩放，小屏下强制 16px 避免缩放
+        "max-md:[&_input]:text-base max-md:[&_textarea]:text-base max-md:[&_select]:text-base",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function FieldContent({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn("group/field-content flex flex-1 flex-col gap-1.5 leading-snug", className)}
+      {...props} />
+  );
+}
+
+function FieldLabel({
+  className,
+  ...props
+}) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
+        "has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 dark:has-data-[state=checked]:bg-primary/10",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function FieldTitle({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function FieldDescription({
+  className,
+  ...props
+}) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        "text-sm leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance",
+        "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn(
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className
+      )}
+      {...props}>
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+          data-slot="field-separator-content">
+          {children}
+        </span>
+      )}
+    </div>
+  );
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children
+    }
+
+    if (!errors?.length) {
+      return null
+    }
+
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values(),
+    ]
+
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map((error, index) =>
+          error?.message && <li key={index}>{error.message}</li>)}
+      </ul>
+    );
+  }, [children, errors])
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn("text-sm font-normal text-destructive", className)}
+      {...props}>
+      {content}
+    </div>
+  );
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+}

components/ui/input-otp.jsx

@@ -0,0 +1,79 @@
+"use client"
+
+import * as React from "react"
+import { OTPInput, OTPInputContext } from "input-otp"
+import { MinusIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}) {
+  return (
+    <OTPInput
+      data-slot="input-otp"
+      containerClassName={cn("flex items-center gap-2 has-disabled:opacity-50", containerClassName)}
+      className={cn("disabled:cursor-not-allowed disabled:opacity-50", className)}
+      {...props} />
+  );
+}
+
+function InputOTPGroup({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="input-otp-group"
+      className={cn("flex items-center", className)}
+      {...props} />
+  );
+}
+
+function InputOTPSlot({
+  index,
+  className,
+  ...props
+}) {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
+
+  return (
+    <div
+      data-slot="input-otp-slot"
+      data-active={isActive}
+      className={cn(
+        "relative flex h-12 w-10 items-center justify-center rounded-md border-2 bg-background text-lg font-semibold shadow-sm transition-all duration-200",
+        "border-input/60 dark:border-input/80",
+        "text-foreground dark:text-foreground",
+        "first:rounded-l-md last:rounded-r-md",
+        "focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary",
+        "data-[active=true]:border-primary data-[active=true]:ring-2 data-[active=true]:ring-primary/30 dark:data-[active=true]:ring-primary/40",
+        "aria-invalid:border-destructive aria-invalid:text-destructive",
+        "dark:bg-slate-900/50 dark:data-[active=true]:bg-slate-800/50",
+        className
+      )}
+      {...props}>
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-6 w-px animate-caret-blink bg-primary duration-1000" />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function InputOTPSeparator({
+  ...props
+}) {
+  return (
+    <div data-slot="input-otp-separator" role="separator" className="text-muted-foreground dark:text-muted-foreground/50" {...props}>
+      <MinusIcon className="h-4 w-4" />
+    </div>
+  );
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

components/ui/label.jsx

@@ -0,0 +1,23 @@
+"use client"
+
+import * as React from "react"
+import { Label as LabelPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props} />
+  );
+}
+
+export { Label }

components/ui/progress.jsx

@@ -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 }

components/ui/select.jsx

@@ -0,0 +1,197 @@
+"use client"
+
+import * as React from "react"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import { Select as SelectPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Select({
+  ...props
+}) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+function SelectGroup({
+  ...props
+}) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+}
+
+function SelectValue({
+  ...props
+}) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "flex w-full items-center justify-between gap-2 rounded-lg border px-3 py-2.5 text-sm font-medium whitespace-nowrap shadow-sm transition-all duration-200 outline-none",
+        "border-input bg-background text-foreground",
+        "hover:border-primary/60 hover:ring-1 hover:ring-primary/30",
+        "focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/50",
+        "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-input disabled:hover:ring-0",
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
+        "data-[placeholder]:text-muted-foreground",
+        "data-[size=default]:h-11 data-[size=sm]:h-10",
+        "*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className
+      )}
+      {...props}>
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-60 transition-transform duration-200" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  sideOffset = 4,
+  ...props
+}) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "relative z-[100] max-h-(--radix-select-content-available-height) min-w-[var(--radix-select-trigger-width)] origin-(--radix-select-content-transform-origin) overflow-hidden rounded-xl border shadow-2xl",
+          "bg-popover/80 text-popover-foreground dark:bg-popover/70",
+          "backdrop-blur-xl backdrop-saturate-[180%]",
+          "border-border/60",
+          "ring-1 ring-black/5 dark:ring-white/10",
+          "shadow-black/5 dark:shadow-black/60",
+          "animate-in fade-in zoom-in-95 duration-200 ease-out",
+          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:duration-150",
+          "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        align={align}
+        sideOffset={sideOffset}
+        {...props}>
+        <SelectScrollUpButton className="bg-transparent text-muted-foreground/50" />
+        <SelectPrimitive.Viewport
+          className={cn("p-1.5", position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1")}>
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton className="bg-transparent text-muted-foreground/50" />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+}
+
+function SelectLabel({
+  className,
+  ...props
+}) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
+      {...props} />
+  );
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "relative flex w-full cursor-pointer select-none items-center rounded-lg py-2.5 px-3 text-sm font-medium transition-colors duration-150 outline-none",
+        "text-foreground",
+        "hover:bg-primary/10 dark:hover:bg-primary/20",
+        "focus:bg-primary/10 dark:focus:bg-primary/20",
+        "data-[highlighted]:bg-primary/10 dark:data-[highlighted]:bg-primary/20",
+        "data-[state=checked]:bg-primary/10 dark:data-[state=checked]:bg-primary/20",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "*:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}>
+      <span
+        data-slot="select-item-indicator"
+        className="absolute right-3 flex size-4 items-center justify-center text-primary">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border/60", className)}
+      {...props} />
+  );
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn("flex cursor-default items-center justify-center py-1", className)}
+      {...props}>
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  );
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn("flex cursor-default items-center justify-center py-1", className)}
+      {...props}>
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  );
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}

components/ui/separator.jsx

@@ -0,0 +1,27 @@
+"use client"
+
+import * as React from "react"
+import { Separator as SeparatorPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props} />
+  );
+}
+
+export { Separator }

components/ui/sonner.jsx

@@ -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 }

components/ui/switch.jsx

@@ -0,0 +1,42 @@
+"use client"
+
+import * as React from "react"
+import { Switch as SwitchPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef(({ className, size = "default", ...props }, ref) => (
+  <SwitchPrimitive.Root
+    ref={ref}
+    data-slot="switch"
+    data-size={size}
+    className={cn(
+      "peer group/switch inline-flex shrink-0 cursor-pointer items-center rounded-full border shadow-xs outline-none",
+      "border-[var(--border)]",
+      "transition-[color,box-shadow,border-color] duration-200 ease-out",
+      "focus-visible:border-[var(--ring)] focus-visible:ring-[3px] focus-visible:ring-[var(--ring)] focus-visible:ring-opacity-50",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "hover:data-[state=unchecked]:bg-[var(--input)] hover:data-[state=unchecked]:border-[var(--muted)]",
+      "data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6",
+      "data-[state=checked]:border-transparent data-[state=checked]:bg-[var(--primary)]",
+      "data-[state=unchecked]:bg-[var(--input)]",
+      className
+    )}
+    {...props}
+  >
+    <SwitchPrimitive.Thumb
+      data-slot="switch-thumb"
+      className={cn(
+        "pointer-events-none block rounded-full ring-0",
+        "bg-[var(--background)]",
+        "transition-transform duration-200 ease-out",
+        "group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3",
+        "data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=checked]:bg-[var(--primary-foreground)]",
+        "data-[state=unchecked]:translate-x-0 data-[state=unchecked]:bg-[var(--switch-thumb)]"
+      )}
+    />
+  </SwitchPrimitive.Root>
+))
+Switch.displayName = SwitchPrimitive.Root.displayName
+
+export { Switch }

components/ui/tabs.jsx

@@ -0,0 +1,89 @@
+"use client"
+
+import * as React from "react"
+import { cva } from "class-variance-authority"
+import { Tabs as TabsPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn("group/tabs flex gap-2 data-[orientation=horizontal]:flex-col", className)}
+      {...props} />
+  )
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-[var(--radius)] p-[3px] text-[var(--muted)] group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none border border-[var(--tabs-list-border)]",
+  {
+    variants: {
+      variant: {
+        default: "bg-[var(--tabs-list-bg)]",
+        line: "gap-1 bg-transparent border-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props} />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all duration-200",
+        "text-[var(--muted)] hover:text-[var(--text)] hover:bg-[var(--tabs-list-bg)]",
+        "focus-visible:border-[var(--ring)] focus-visible:ring-[3px] focus-visible:ring-[var(--ring)]/50 focus-visible:outline-1 focus-visible:outline-[var(--ring)]",
+        "disabled:pointer-events-none disabled:opacity-50",
+        "group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start",
+        "group-data-[variant=default]/tabs-list:data-[state=active]:bg-[var(--tabs-trigger-active-bg)] group-data-[variant=default]/tabs-list:data-[state=active]:text-[var(--tabs-trigger-active-text)] group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none",
+        "group-data-[variant=line]/tabs-list:data-[state=active]:text-[var(--tabs-trigger-active-text)]",
+        "after:absolute after:h-0.5 after:bg-[var(--tabs-trigger-active-text)] after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props} />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none text-[var(--text)]", className)}
+      {...props} />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }

env.example

@@ -1,6 +1,6 @@
 # Supabase 配置
 # 从 Supabase 项目设置中获取这些值：https://app.supabase.com/project/_/settings/api
-# 复制此文件为 .env.local 并填入实际值
+# 复制此文件为 .env.local 并填入实际值(docker 部署复制成 .env)
 
 NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
 NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

jsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    },
+    "jsx": "react"
+  }
+}

lib/utils.js

@@ -0,0 +1,6 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "real-time-fund",
-  "version": "0.1.6",
+  "version": "0.2.4",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -13,26 +13,49 @@
   "dependencies": {
     "@dicebear/collection": "^9.3.1",
     "@dicebear/core": "^9.3.1",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@supabase/supabase-js": "^2.78.0",
+    "@tanstack/react-table": "^8.21.3",
+    "ahooks": "^3.9.6",
     "chart.js": "^4.5.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "dayjs": "^1.11.19",
     "framer-motion": "^12.29.2",
+    "fuse.js": "^7.1.0",
+    "input-otp": "^1.4.2",
     "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",
-    "tesseract.js": "^5.1.1"
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.5.0",
+    "tesseract.js": "^5.1.1",
+    "uuid": "^13.0.0",
+    "vaul": "^1.1.2"
   },
   "engines": {
     "node": ">=20.9.0"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.2.1",
+    "autoprefixer": "^10.4.27",
     "babel-plugin-react-compiler": "^1.0.0",
     "eslint": "^9.0.0",
     "eslint-config-next": "^16.1.5",
     "husky": "^9.1.7",
-    "lint-staged": "^16.2.7"
+    "lint-staged": "^16.2.7",
+    "postcss": "^8.5.8",
+    "shadcn": "^3.8.5",
+    "tailwindcss": "^4.2.1",
+    "tw-animate-css": "^1.4.0"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [

postcss.config.mjs

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};

public/manifest.webmanifest

@@ -0,0 +1,34 @@
+{
+  "name": "基估宝",
+  "short_name": "基估宝",
+  "description": "基金管理管家",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "orientation": "portrait",
+  "background_color": "#0f172a",
+  "theme_color": "#0f172a",
+  "id": "/",
+  "icons": [
+    {
+      "src": "/Icon-60@3x.png",
+      "sizes": "180x180",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/Icon-60@3x.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/Icon-60@3x.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ],
+  "categories": ["finance", "utilities"],
+  "prefer_related_applications": false
+}

public/sw.js

@@ -0,0 +1,18 @@
+// 最小 Service Worker，满足 Android Chrome「添加到主屏幕」的安装条件
+const CACHE_NAME = 'jigubao-v1';
+
+self.addEventListener('install', (event) => {
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(self.clients.claim());
+});
+
+self.addEventListener('fetch', (event) => {
+  event.respondWith(
+    fetch(event.request).catch(() => {
+      return new Response('', { status: 503, statusText: 'Service Unavailable' });
+    })
+  );
+});