feat: 发布 0.2.9

This reverts commit ab9e8a5072.

.cursor/skills/shadcn/SKILL.md

@@ -0,0 +1,240 @@
+---
+name: shadcn
+description: Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".
+user-invocable: false
+---
+
+# shadcn/ui
+
+A framework for building ui, components and design systems. Components are added as source code to the user's project via the CLI.
+
+> **IMPORTANT:** Run all CLI commands using the project's package runner: `npx shadcn@latest`, `pnpm dlx shadcn@latest`, or `bunx --bun shadcn@latest` — based on the project's `packageManager`. Examples below use `npx shadcn@latest` but substitute the correct runner for the project.
+
+## Current Project Context
+
+```json
+!`npx shadcn@latest info --json 2>/dev/null || echo '{"error": "No shadcn project found. Run shadcn init first."}'`
+```
+
+The JSON above contains the project config and installed components. Use `npx shadcn@latest docs <component>` to get documentation and example URLs for any component.
+
+## Principles
+
+1. **Use existing components first.** Use `npx shadcn@latest search` to check registries before writing custom UI. Check community registries too.
+2. **Compose, don't reinvent.** Settings page = Tabs + Card + form controls. Dashboard = Sidebar + Card + Chart + Table.
+3. **Use built-in variants before custom styles.** `variant="outline"`, `size="sm"`, etc.
+4. **Use semantic colors.** `bg-primary`, `text-muted-foreground` — never raw values like `bg-blue-500`.
+
+## Critical Rules
+
+These rules are **always enforced**. Each links to a file with Incorrect/Correct code pairs.
+
+### Styling & Tailwind → [styling.md](./rules/styling.md)
+
+- **`className` for layout, not styling.** Never override component colors or typography.
+- **No `space-x-*` or `space-y-*`.** Use `flex` with `gap-*`. For vertical stacks, `flex flex-col gap-*`.
+- **Use `size-*` when width and height are equal.** `size-10` not `w-10 h-10`.
+- **Use `truncate` shorthand.** Not `overflow-hidden text-ellipsis whitespace-nowrap`.
+- **No manual `dark:` color overrides.** Use semantic tokens (`bg-background`, `text-muted-foreground`).
+- **Use `cn()` for conditional classes.** Don't write manual template literal ternaries.
+- **No manual `z-index` on overlay components.** Dialog, Sheet, Popover, etc. handle their own stacking.
+
+### Forms & Inputs → [forms.md](./rules/forms.md)
+
+- **Forms use `FieldGroup` + `Field`.** Never use raw `div` with `space-y-*` or `grid gap-*` for form layout.
+- **`InputGroup` uses `InputGroupInput`/`InputGroupTextarea`.** Never raw `Input`/`Textarea` inside `InputGroup`.
+- **Buttons inside inputs use `InputGroup` + `InputGroupAddon`.**
+- **Option sets (2–7 choices) use `ToggleGroup`.** Don't loop `Button` with manual active state.
+- **`FieldSet` + `FieldLegend` for grouping related checkboxes/radios.** Don't use a `div` with a heading.
+- **Field validation uses `data-invalid` + `aria-invalid`.** `data-invalid` on `Field`, `aria-invalid` on the control. For disabled: `data-disabled` on `Field`, `disabled` on the control.
+
+### Component Structure → [composition.md](./rules/composition.md)
+
+- **Items always inside their Group.** `SelectItem` → `SelectGroup`. `DropdownMenuItem` → `DropdownMenuGroup`. `CommandItem` → `CommandGroup`.
+- **Use `asChild` (radix) or `render` (base) for custom triggers.** Check `base` field from `npx shadcn@latest info`. → [base-vs-radix.md](./rules/base-vs-radix.md)
+- **Dialog, Sheet, and Drawer always need a Title.** `DialogTitle`, `SheetTitle`, `DrawerTitle` required for accessibility. Use `className="sr-only"` if visually hidden.
+- **Use full Card composition.** `CardHeader`/`CardTitle`/`CardDescription`/`CardContent`/`CardFooter`. Don't dump everything in `CardContent`.
+- **Button has no `isPending`/`isLoading`.** Compose with `Spinner` + `data-icon` + `disabled`.
+- **`TabsTrigger` must be inside `TabsList`.** Never render triggers directly in `Tabs`.
+- **`Avatar` always needs `AvatarFallback`.** For when the image fails to load.
+
+### Use Components, Not Custom Markup → [composition.md](./rules/composition.md)
+
+- **Use existing components before custom markup.** Check if a component exists before writing a styled `div`.
+- **Callouts use `Alert`.** Don't build custom styled divs.
+- **Empty states use `Empty`.** Don't build custom empty state markup.
+- **Toast via `sonner`.** Use `toast()` from `sonner`.
+- **Use `Separator`** instead of `<hr>` or `<div className="border-t">`.
+- **Use `Skeleton`** for loading placeholders. No custom `animate-pulse` divs.
+- **Use `Badge`** instead of custom styled spans.
+
+### Icons → [icons.md](./rules/icons.md)
+
+- **Icons in `Button` use `data-icon`.** `data-icon="inline-start"` or `data-icon="inline-end"` on the icon.
+- **No sizing classes on icons inside components.** Components handle icon sizing via CSS. No `size-4` or `w-4 h-4`.
+- **Pass icons as objects, not string keys.** `icon={CheckIcon}`, not a string lookup.
+
+### CLI
+
+- **Never decode or fetch preset codes manually.** Pass them directly to `npx shadcn@latest init --preset <code>`.
+
+## Key Patterns
+
+These are the most common patterns that differentiate correct shadcn/ui code. For edge cases, see the linked rule files above.
+
+```tsx
+// Form layout: FieldGroup + Field, not div + Label.
+<FieldGroup>
+  <Field>
+    <FieldLabel htmlFor="email">Email</FieldLabel>
+    <Input id="email" />
+  </Field>
+</FieldGroup>
+
+// Validation: data-invalid on Field, aria-invalid on the control.
+<Field data-invalid>
+  <FieldLabel>Email</FieldLabel>
+  <Input aria-invalid />
+  <FieldDescription>Invalid email.</FieldDescription>
+</Field>
+
+// Icons in buttons: data-icon, no sizing classes.
+<Button>
+  <SearchIcon data-icon="inline-start" />
+  Search
+</Button>
+
+// Spacing: gap-*, not space-y-*.
+<div className="flex flex-col gap-4">  // correct
+<div className="space-y-4">           // wrong
+
+// Equal dimensions: size-*, not w-* h-*.
+<Avatar className="size-10">   // correct
+<Avatar className="w-10 h-10"> // wrong
+
+// Status colors: Badge variants or semantic tokens, not raw colors.
+<Badge variant="secondary">+20.1%</Badge>    // correct
+<span className="text-emerald-600">+20.1%</span> // wrong
+```
+
+## Component Selection
+
+| Need                       | Use                                                                                                 |
+| -------------------------- | --------------------------------------------------------------------------------------------------- |
+| Button/action              | `Button` with appropriate variant                                                                   |
+| Form inputs                | `Input`, `Select`, `Combobox`, `Switch`, `Checkbox`, `RadioGroup`, `Textarea`, `InputOTP`, `Slider` |
+| Toggle between 2–5 options | `ToggleGroup` + `ToggleGroupItem`                                                                   |
+| Data display               | `Table`, `Card`, `Badge`, `Avatar`                                                                  |
+| Navigation                 | `Sidebar`, `NavigationMenu`, `Breadcrumb`, `Tabs`, `Pagination`                                     |
+| Overlays                   | `Dialog` (modal), `Sheet` (side panel), `Drawer` (bottom sheet), `AlertDialog` (confirmation)       |
+| Feedback                   | `sonner` (toast), `Alert`, `Progress`, `Skeleton`, `Spinner`                                        |
+| Command palette            | `Command` inside `Dialog`                                                                           |
+| Charts                     | `Chart` (wraps Recharts)                                                                            |
+| Layout                     | `Card`, `Separator`, `Resizable`, `ScrollArea`, `Accordion`, `Collapsible`                          |
+| Empty states               | `Empty`                                                                                             |
+| Menus                      | `DropdownMenu`, `ContextMenu`, `Menubar`                                                            |
+| Tooltips/info              | `Tooltip`, `HoverCard`, `Popover`                                                                   |
+
+## Key Fields
+
+The injected project context contains these key fields:
+
+- **`aliases`** → use the actual alias prefix for imports (e.g. `@/`, `~/`), never hardcode.
+- **`isRSC`** → when `true`, components using `useState`, `useEffect`, event handlers, or browser APIs need `"use client"` at the top of the file. Always reference this field when advising on the directive.
+- **`tailwindVersion`** → `"v4"` uses `@theme inline` blocks; `"v3"` uses `tailwind.config.js`.
+- **`tailwindCssFile`** → the global CSS file where custom CSS variables are defined. Always edit this file, never create a new one.
+- **`style`** → component visual treatment (e.g. `nova`, `vega`).
+- **`base`** → primitive library (`radix` or `base`). Affects component APIs and available props.
+- **`iconLibrary`** → determines icon imports. Use `lucide-react` for `lucide`, `@tabler/icons-react` for `tabler`, etc. Never assume `lucide-react`.
+- **`resolvedPaths`** → exact file-system destinations for components, utils, hooks, etc.
+- **`framework`** → routing and file conventions (e.g. Next.js App Router vs Vite SPA).
+- **`packageManager`** → use this for any non-shadcn dependency installs (e.g. `pnpm add date-fns` vs `npm install date-fns`).
+
+See [cli.md — `info` command](./cli.md) for the full field reference.
+
+## Component Docs, Examples, and Usage
+
+Run `npx shadcn@latest docs <component>` to get the URLs for a component's documentation, examples, and API reference. Fetch these URLs to get the actual content.
+
+```bash
+npx shadcn@latest docs button dialog select
+```
+
+**When creating, fixing, debugging, or using a component, always run `npx shadcn@latest docs` and fetch the URLs first.** This ensures you're working with the correct API and usage patterns rather than guessing.
+
+## Workflow
+
+1. **Get project context** — already injected above. Run `npx shadcn@latest info` again if you need to refresh.
+2. **Check installed components first** — before running `add`, always check the `components` list from project context or list the `resolvedPaths.ui` directory. Don't import components that haven't been added, and don't re-add ones already installed.
+3. **Find components** — `npx shadcn@latest search`.
+4. **Get docs and examples** — run `npx shadcn@latest docs <component>` to get URLs, then fetch them. Use `npx shadcn@latest view` to browse registry items you haven't installed. To preview changes to installed components, use `npx shadcn@latest add --diff`.
+5. **Install or update** — `npx shadcn@latest add`. When updating existing components, use `--dry-run` and `--diff` to preview changes first (see [Updating Components](#updating-components) below).
+6. **Fix imports in third-party components** — After adding components from community registries (e.g. `@bundui`, `@magicui`), check the added non-UI files for hardcoded import paths like `@/components/ui/...`. These won't match the project's actual aliases. Use `npx shadcn@latest info` to get the correct `ui` alias (e.g. `@workspace/ui/components`) and rewrite the imports accordingly. The CLI rewrites imports for its own UI files, but third-party registry components may use default paths that don't match the project.
+7. **Review added components** — After adding a component or block from any registry, **always read the added files and verify they are correct**. Check for missing sub-components (e.g. `SelectItem` without `SelectGroup`), missing imports, incorrect composition, or violations of the [Critical Rules](#critical-rules). Also replace any icon imports with the project's `iconLibrary` from the project context (e.g. if the registry item uses `lucide-react` but the project uses `hugeicons`, swap the imports and icon names accordingly). Fix all issues before moving on.
+8. **Registry must be explicit** — When the user asks to add a block or component, **do not guess the registry**. If no registry is specified (e.g. user says "add a login block" without specifying `@shadcn`, `@tailark`, etc.), ask which registry to use. Never default to a registry on behalf of the user.
+9. **Switching presets** — Ask the user first: **reinstall**, **merge**, or **skip**?
+   - **Reinstall**: `npx shadcn@latest init --preset <code> --force --reinstall`. Overwrites all components.
+   - **Merge**: `npx shadcn@latest init --preset <code> --force --no-reinstall`, then run `npx shadcn@latest info` to list installed components, then for each installed component use `--dry-run` and `--diff` to [smart merge](#updating-components) it individually.
+   - **Skip**: `npx shadcn@latest init --preset <code> --force --no-reinstall`. Only updates config and CSS, leaves components as-is.
+
+## Updating Components
+
+When the user asks to update a component from upstream while keeping their local changes, use `--dry-run` and `--diff` to intelligently merge. **NEVER fetch raw files from GitHub manually — always use the CLI.**
+
+1. Run `npx shadcn@latest add <component> --dry-run` to see all files that would be affected.
+2. For each file, run `npx shadcn@latest add <component> --diff <file>` to see what changed upstream vs local.
+3. Decide per file based on the diff:
+   - No local changes → safe to overwrite.
+   - Has local changes → read the local file, analyze the diff, and apply upstream updates while preserving local modifications.
+   - User says "just update everything" → use `--overwrite`, but confirm first.
+4. **Never use `--overwrite` without the user's explicit approval.**
+
+## Quick Reference
+
+```bash
+# Create a new project.
+npx shadcn@latest init --name my-app --preset base-nova
+npx shadcn@latest init --name my-app --preset a2r6bw --template vite
+
+# Create a monorepo project.
+npx shadcn@latest init --name my-app --preset base-nova --monorepo
+npx shadcn@latest init --name my-app --preset base-nova --template next --monorepo
+
+# Initialize existing project.
+npx shadcn@latest init --preset base-nova
+npx shadcn@latest init --defaults  # shortcut: --template=next --preset=base-nova
+
+# Add components.
+npx shadcn@latest add button card dialog
+npx shadcn@latest add @magicui/shimmer-button
+npx shadcn@latest add --all
+
+# Preview changes before adding/updating.
+npx shadcn@latest add button --dry-run
+npx shadcn@latest add button --diff button.tsx
+npx shadcn@latest add @acme/form --view button.tsx
+
+# Search registries.
+npx shadcn@latest search @shadcn -q "sidebar"
+npx shadcn@latest search @tailark -q "stats"
+
+# Get component docs and example URLs.
+npx shadcn@latest docs button dialog select
+
+# View registry item details (for items not yet installed).
+npx shadcn@latest view @shadcn/button
+```
+
+**Named presets:** `base-nova`, `radix-nova`
+**Templates:** `next`, `vite`, `start`, `react-router`, `astro` (all support `--monorepo`) and `laravel` (not supported for monorepo)
+**Preset codes:** Base62 strings starting with `a` (e.g. `a2r6bw`), from [ui.shadcn.com](https://ui.shadcn.com).
+
+## Detailed References
+
+- [rules/forms.md](./rules/forms.md) — FieldGroup, Field, InputGroup, ToggleGroup, FieldSet, validation states
+- [rules/composition.md](./rules/composition.md) — Groups, overlays, Card, Tabs, Avatar, Alert, Empty, Toast, Separator, Skeleton, Badge, Button loading
+- [rules/icons.md](./rules/icons.md) — data-icon, icon sizing, passing icons as objects
+- [rules/styling.md](./rules/styling.md) — Semantic colors, variants, className, spacing, size, truncate, dark mode, cn(), z-index
+- [rules/base-vs-radix.md](./rules/base-vs-radix.md) — asChild vs render, Select, ToggleGroup, Slider, Accordion
+- [cli.md](./cli.md) — Commands, flags, presets, templates
+- [customization.md](./customization.md) — Theming, CSS variables, extending components

.cursor/skills/shadcn/agents/openai.yml

@@ -0,0 +1,5 @@
+interface:
+  display_name: "shadcn/ui"
+  short_description: "Manages shadcn/ui components — adding, searching, fixing, debugging, styling, and composing UI."
+  icon_small: "./assets/shadcn-small.png"
+  icon_large: "./assets/shadcn.png"

.cursor/skills/shadcn/cli.md

@@ -0,0 +1,255 @@
+# shadcn CLI Reference
+
+Configuration is read from `components.json`.
+
+> **IMPORTANT:** Always run commands using the project's package runner: `npx shadcn@latest`, `pnpm dlx shadcn@latest`, or `bunx --bun shadcn@latest`. Check `packageManager` from project context to choose the right one. Examples below use `npx shadcn@latest` but substitute the correct runner for the project.
+
+> **IMPORTANT:** Only use the flags documented below. Do not invent or guess flags — if a flag isn't listed here, it doesn't exist. The CLI auto-detects the package manager from the project's lockfile; there is no `--package-manager` flag.
+
+## Contents
+
+- Commands: init, add (dry-run, smart merge), search, view, docs, info, build
+- Templates: next, vite, start, react-router, astro
+- Presets: named, code, URL formats and fields
+- Switching presets
+
+---
+
+## Commands
+
+### `init` — Initialize or create a project
+
+```bash
+npx shadcn@latest init [components...] [options]
+```
+
+Initializes shadcn/ui in an existing project or creates a new project (when `--name` is provided). Optionally installs components in the same step.
+
+| Flag                    | Short | Description                                               | Default |
+| ----------------------- | ----- | --------------------------------------------------------- | ------- |
+| `--template <template>` | `-t`  | Template (next, start, vite, next-monorepo, react-router) | —       |
+| `--preset [name]`       | `-p`  | Preset configuration (named, code, or URL)                | —       |
+| `--yes`                 | `-y`  | Skip confirmation prompt                                  | `true`  |
+| `--defaults`            | `-d`  | Use defaults (`--template=next --preset=base-nova`)       | `false` |
+| `--force`               | `-f`  | Force overwrite existing configuration                    | `false` |
+| `--cwd <cwd>`           | `-c`  | Working directory                                         | current |
+| `--name <name>`         | `-n`  | Name for new project                                      | —       |
+| `--silent`              | `-s`  | Mute output                                               | `false` |
+| `--rtl`                 |       | Enable RTL support                                        | —       |
+| `--reinstall`           |       | Re-install existing UI components                         | `false` |
+| `--monorepo`            |       | Scaffold a monorepo project                               | —       |
+| `--no-monorepo`         |       | Skip the monorepo prompt                                  | —       |
+
+`npx shadcn@latest create` is an alias for `npx shadcn@latest init`.
+
+### `add` — Add components
+
+> **IMPORTANT:** To compare local components against upstream or to preview changes, ALWAYS use `npx shadcn@latest add <component> --dry-run`, `--diff`, or `--view`. NEVER fetch raw files from GitHub or other sources manually. The CLI handles registry resolution, file paths, and CSS diffing automatically.
+
+```bash
+npx shadcn@latest add [components...] [options]
+```
+
+Accepts component names, registry-prefixed names (`@magicui/shimmer-button`), URLs, or local paths.
+
+| Flag            | Short | Description                                                                                                          | Default |
+| --------------- | ----- | -------------------------------------------------------------------------------------------------------------------- | ------- |
+| `--yes`         | `-y`  | Skip confirmation prompt                                                                                             | `false` |
+| `--overwrite`   | `-o`  | Overwrite existing files                                                                                             | `false` |
+| `--cwd <cwd>`   | `-c`  | Working directory                                                                                                    | current |
+| `--all`         | `-a`  | Add all available components                                                                                         | `false` |
+| `--path <path>` | `-p`  | Target path for the component                                                                                        | —       |
+| `--silent`      | `-s`  | Mute output                                                                                                          | `false` |
+| `--dry-run`     |       | Preview all changes without writing files                                                                            | `false` |
+| `--diff [path]` |       | Show diffs. Without a path, shows the first 5 files. With a path, shows that file only (implies `--dry-run`)         | —       |
+| `--view [path]` |       | Show file contents. Without a path, shows the first 5 files. With a path, shows that file only (implies `--dry-run`) | —       |
+
+#### Dry-Run Mode
+
+Use `--dry-run` to preview what `add` would do without writing any files. `--diff` and `--view` both imply `--dry-run`.
+
+```bash
+# Preview all changes.
+npx shadcn@latest add button --dry-run
+
+# Show diffs for all files (top 5).
+npx shadcn@latest add button --diff
+
+# Show the diff for a specific file.
+npx shadcn@latest add button --diff button.tsx
+
+# Show contents for all files (top 5).
+npx shadcn@latest add button --view
+
+# Show the full content of a specific file.
+npx shadcn@latest add button --view button.tsx
+
+# Works with URLs too.
+npx shadcn@latest add https://api.npoint.io/abc123 --dry-run
+
+# CSS diffs.
+npx shadcn@latest add button --diff globals.css
+```
+
+**When to use dry-run:**
+
+- When the user asks "what files will this add?" or "what will this change?" — use `--dry-run`.
+- Before overwriting existing components — use `--diff` to preview the changes first.
+- When the user wants to inspect component source code without installing — use `--view`.
+- When checking what CSS changes would be made to `globals.css` — use `--diff globals.css`.
+- When the user asks to review or audit third-party registry code before installing — use `--view` to inspect the source.
+
+> **`npx shadcn@latest add --dry-run` vs `npx shadcn@latest view`:** Prefer `npx shadcn@latest add --dry-run/--diff/--view` over `npx shadcn@latest view` when the user wants to preview changes to their project. `npx shadcn@latest view` only shows raw registry metadata. `npx shadcn@latest add --dry-run` shows exactly what would happen in the user's project: resolved file paths, diffs against existing files, and CSS updates. Use `npx shadcn@latest view` only when the user wants to browse registry info without a project context.
+
+#### Smart Merge from Upstream
+
+See [Updating Components in SKILL.md](./SKILL.md#updating-components) for the full workflow.
+
+### `search` — Search registries
+
+```bash
+npx shadcn@latest search <registries...> [options]
+```
+
+Fuzzy search across registries. Also aliased as `npx shadcn@latest list`. Without `-q`, lists all items.
+
+| Flag                | Short | Description            | Default |
+| ------------------- | ----- | ---------------------- | ------- |
+| `--query <query>`   | `-q`  | Search query           | —       |
+| `--limit <number>`  | `-l`  | Max items per registry | `100`   |
+| `--offset <number>` | `-o`  | Items to skip          | `0`     |
+| `--cwd <cwd>`       | `-c`  | Working directory      | current |
+
+### `view` — View item details
+
+```bash
+npx shadcn@latest view <items...> [options]
+```
+
+Displays item info including file contents. Example: `npx shadcn@latest view @shadcn/button`.
+
+### `docs` — Get component documentation URLs
+
+```bash
+npx shadcn@latest docs <components...> [options]
+```
+
+Outputs resolved URLs for component documentation, examples, and API references. Accepts one or more component names. Fetch the URLs to get the actual content.
+
+Example output for `npx shadcn@latest docs input button`:
+
+```
+base  radix
+
+input
+  docs      https://ui.shadcn.com/docs/components/radix/input
+  examples  https://raw.githubusercontent.com/.../examples/input-example.tsx
+
+button
+  docs      https://ui.shadcn.com/docs/components/radix/button
+  examples  https://raw.githubusercontent.com/.../examples/button-example.tsx
+```
+
+Some components include an `api` link to the underlying library (e.g. `cmdk` for the command component).
+
+### `diff` — Check for updates
+
+Do not use this command. Use `npx shadcn@latest add --diff` instead.
+
+### `info` — Project information
+
+```bash
+npx shadcn@latest info [options]
+```
+
+Displays project info and `components.json` configuration. Run this first to discover the project's framework, aliases, Tailwind version, and resolved paths.
+
+| Flag          | Short | Description       | Default |
+| ------------- | ----- | ----------------- | ------- |
+| `--cwd <cwd>` | `-c`  | Working directory | current |
+
+**Project Info fields:**
+
+| Field                | Type      | Meaning                                                            |
+| -------------------- | --------- | ------------------------------------------------------------------ |
+| `framework`          | `string`  | Detected framework (`next`, `vite`, `react-router`, `start`, etc.) |
+| `frameworkVersion`   | `string`  | Framework version (e.g. `15.2.4`)                                  |
+| `isSrcDir`           | `boolean` | Whether the project uses a `src/` directory                        |
+| `isRSC`              | `boolean` | Whether React Server Components are enabled                        |
+| `isTsx`              | `boolean` | Whether the project uses TypeScript                                |
+| `tailwindVersion`    | `string`  | `"v3"` or `"v4"`                                                   |
+| `tailwindConfigFile` | `string`  | Path to the Tailwind config file                                   |
+| `tailwindCssFile`    | `string`  | Path to the global CSS file                                        |
+| `aliasPrefix`        | `string`  | Import alias prefix (e.g. `@`, `~`, `@/`)                          |
+| `packageManager`     | `string`  | Detected package manager (`npm`, `pnpm`, `yarn`, `bun`)            |
+
+**Components.json fields:**
+
+| Field                | Type      | Meaning                                                                                    |
+| -------------------- | --------- | ------------------------------------------------------------------------------------------ |
+| `base`               | `string`  | Primitive library (`radix` or `base`) — determines component APIs and available props      |
+| `style`              | `string`  | Visual style (e.g. `nova`, `vega`)                                                         |
+| `rsc`                | `boolean` | RSC flag from config                                                                       |
+| `tsx`                | `boolean` | TypeScript flag                                                                            |
+| `tailwind.config`    | `string`  | Tailwind config path                                                                       |
+| `tailwind.css`       | `string`  | Global CSS path — this is where custom CSS variables go                                    |
+| `iconLibrary`        | `string`  | Icon library — determines icon import package (e.g. `lucide-react`, `@tabler/icons-react`) |
+| `aliases.components` | `string`  | Component import alias (e.g. `@/components`)                                               |
+| `aliases.utils`      | `string`  | Utils import alias (e.g. `@/lib/utils`)                                                    |
+| `aliases.ui`         | `string`  | UI component alias (e.g. `@/components/ui`)                                                |
+| `aliases.lib`        | `string`  | Lib alias (e.g. `@/lib`)                                                                   |
+| `aliases.hooks`      | `string`  | Hooks alias (e.g. `@/hooks`)                                                               |
+| `resolvedPaths`      | `object`  | Absolute file-system paths for each alias                                                  |
+| `registries`         | `object`  | Configured custom registries                                                               |
+
+**Links fields:**
+
+The `info` output includes a **Links** section with templated URLs for component docs, source, and examples. For resolved URLs, use `npx shadcn@latest docs <component>` instead.
+
+### `build` — Build a custom registry
+
+```bash
+npx shadcn@latest build [registry] [options]
+```
+
+Builds `registry.json` into individual JSON files for distribution. Default input: `./registry.json`, default output: `./public/r`.
+
+| Flag              | Short | Description       | Default      |
+| ----------------- | ----- | ----------------- | ------------ |
+| `--output <path>` | `-o`  | Output directory  | `./public/r` |
+| `--cwd <cwd>`     | `-c`  | Working directory | current      |
+
+---
+
+## Templates
+
+| Value          | Framework      | Monorepo support |
+| -------------- | -------------- | ---------------- |
+| `next`         | Next.js        | Yes              |
+| `vite`         | Vite           | Yes              |
+| `start`        | TanStack Start | Yes              |
+| `react-router` | React Router   | Yes              |
+| `astro`        | Astro          | Yes              |
+| `laravel`      | Laravel        | No               |
+
+All templates support monorepo scaffolding via the `--monorepo` flag. When passed, the CLI uses a monorepo-specific template directory (e.g. `next-monorepo`, `vite-monorepo`). When neither `--monorepo` nor `--no-monorepo` is passed, the CLI prompts interactively. Laravel does not support monorepo scaffolding.
+
+---
+
+## Presets
+
+Three ways to specify a preset via `--preset`:
+
+1. **Named:** `--preset base-nova` or `--preset radix-nova`
+2. **Code:** `--preset a2r6bw` (base62 string, starts with lowercase `a`)
+3. **URL:** `--preset "https://ui.shadcn.com/init?base=radix&style=nova&..."`
+
+> **IMPORTANT:** Never try to decode, fetch, or resolve preset codes manually. Preset codes are opaque — pass them directly to `npx shadcn@latest init --preset <code>` and let the CLI handle resolution.
+
+## Switching Presets
+
+Ask the user first: **reinstall**, **merge**, or **skip** existing components?
+
+- **Re-install** → `npx shadcn@latest init --preset <code> --force --reinstall`. Overwrites all component files with the new preset styles. Use when the user hasn't customized components.
+- **Merge** → `npx shadcn@latest init --preset <code> --force --no-reinstall`, then run `npx shadcn@latest info` to get the list of installed components and use the [smart merge workflow](./SKILL.md#updating-components) to update them one by one, preserving local changes. Use when the user has customized components.
+- **Skip** → `npx shadcn@latest init --preset <code> --force --no-reinstall`. Only updates config and CSS variables, leaves existing components as-is.

.cursor/skills/shadcn/customization.md

@@ -0,0 +1,202 @@
+# Customization & Theming
+
+Components reference semantic CSS variable tokens. Change the variables to change every component.
+
+## Contents
+
+- How it works (CSS variables → Tailwind utilities → components)
+- Color variables and OKLCH format
+- Dark mode setup
+- Changing the theme (presets, CSS variables)
+- Adding custom colors (Tailwind v3 and v4)
+- Border radius
+- Customizing components (variants, className, wrappers)
+- Checking for updates
+
+---
+
+## How It Works
+
+1. CSS variables defined in `:root` (light) and `.dark` (dark mode).
+2. Tailwind maps them to utilities: `bg-primary`, `text-muted-foreground`, etc.
+3. Components use these utilities — changing a variable changes all components that reference it.
+
+---
+
+## Color Variables
+
+Every color follows the `name` / `name-foreground` convention. The base variable is for backgrounds, `-foreground` is for text/icons on that background.
+
+| Variable                                     | Purpose                          |
+| -------------------------------------------- | -------------------------------- |
+| `--background` / `--foreground`              | Page background and default text |
+| `--card` / `--card-foreground`               | Card surfaces                    |
+| `--primary` / `--primary-foreground`         | Primary buttons and actions      |
+| `--secondary` / `--secondary-foreground`     | Secondary actions                |
+| `--muted` / `--muted-foreground`             | Muted/disabled states            |
+| `--accent` / `--accent-foreground`           | Hover and accent states          |
+| `--destructive` / `--destructive-foreground` | Error and destructive actions    |
+| `--border`                                   | Default border color             |
+| `--input`                                    | Form input borders               |
+| `--ring`                                     | Focus ring color                 |
+| `--chart-1` through `--chart-5`              | Chart/data visualization         |
+| `--sidebar-*`                                | Sidebar-specific colors          |
+| `--surface` / `--surface-foreground`         | Secondary surface                |
+
+Colors use OKLCH: `--primary: oklch(0.205 0 0)` where values are lightness (0–1), chroma (0 = gray), and hue (0–360).
+
+---
+
+## Dark Mode
+
+Class-based toggle via `.dark` on the root element. In Next.js, use `next-themes`:
+
+```tsx
+import { ThemeProvider } from "next-themes"
+
+<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+  {children}
+</ThemeProvider>
+```
+
+---
+
+## Changing the Theme
+
+```bash
+# Apply a preset code from ui.shadcn.com.
+npx shadcn@latest init --preset a2r6bw --force
+
+# Switch to a named preset.
+npx shadcn@latest init --preset radix-nova --force
+npx shadcn@latest init --reinstall  # update existing components to match
+
+# Use a custom theme URL.
+npx shadcn@latest init --preset "https://ui.shadcn.com/init?base=radix&style=nova&theme=blue&..." --force
+```
+
+Or edit CSS variables directly in `globals.css`.
+
+---
+
+## Adding Custom Colors
+
+Add variables to the file at `tailwindCssFile` from `npx shadcn@latest info` (typically `globals.css`). Never create a new CSS file for this.
+
+```css
+/* 1. Define in the global CSS file. */
+:root {
+  --warning: oklch(0.84 0.16 84);
+  --warning-foreground: oklch(0.28 0.07 46);
+}
+.dark {
+  --warning: oklch(0.41 0.11 46);
+  --warning-foreground: oklch(0.99 0.02 95);
+}
+```
+
+```css
+/* 2a. Register with Tailwind v4 (@theme inline). */
+@theme inline {
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+}
+```
+
+When `tailwindVersion` is `"v3"` (check via `npx shadcn@latest info`), register in `tailwind.config.js` instead:
+
+```js
+// 2b. Register with Tailwind v3 (tailwind.config.js).
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        warning: "oklch(var(--warning) / <alpha-value>)",
+        "warning-foreground":
+          "oklch(var(--warning-foreground) / <alpha-value>)",
+      },
+    },
+  },
+}
+```
+
+```tsx
+// 3. Use in components.
+<div className="bg-warning text-warning-foreground">Warning</div>
+```
+
+---
+
+## Border Radius
+
+`--radius` controls border radius globally. Components derive values from it (`rounded-lg` = `var(--radius)`, `rounded-md` = `calc(var(--radius) - 2px)`).
+
+---
+
+## Customizing Components
+
+See also: [rules/styling.md](./rules/styling.md) for Incorrect/Correct examples.
+
+Prefer these approaches in order:
+
+### 1. Built-in variants
+
+```tsx
+<Button variant="outline" size="sm">Click</Button>
+```
+
+### 2. Tailwind classes via `className`
+
+```tsx
+<Card className="max-w-md mx-auto">...</Card>
+```
+
+### 3. Add a new variant
+
+Edit the component source to add a variant via `cva`:
+
+```tsx
+// components/ui/button.tsx
+warning: "bg-warning text-warning-foreground hover:bg-warning/90",
+```
+
+### 4. Wrapper components
+
+Compose shadcn/ui primitives into higher-level components:
+
+```tsx
+export function ConfirmDialog({ title, description, onConfirm, children }) {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          <AlertDialogDescription>{description}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={onConfirm}>Confirm</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
+```
+
+---
+
+## Checking for Updates
+
+```bash
+npx shadcn@latest add button --diff
+```
+
+To preview exactly what would change before updating, use `--dry-run` and `--diff`:
+
+```bash
+npx shadcn@latest add button --dry-run        # see all affected files
+npx shadcn@latest add button --diff button.tsx # see the diff for a specific file
+```
+
+See [Updating Components in SKILL.md](./SKILL.md#updating-components) for the full smart merge workflow.

.cursor/skills/shadcn/evals/evals.json

@@ -0,0 +1,47 @@
+{
+  "skill_name": "shadcn",
+  "evals": [
+    {
+      "id": 1,
+      "prompt": "I'm building a Next.js app with shadcn/ui (base-nova preset, lucide icons). Create a settings form component with fields for: full name, email address, and notification preferences (email, SMS, push notifications as toggle options). Add validation states for required fields.",
+      "expected_output": "A React component using FieldGroup, Field, ToggleGroup, data-invalid/aria-invalid validation, gap-* spacing, and semantic colors.",
+      "files": [],
+      "expectations": [
+        "Uses FieldGroup and Field components for form layout instead of raw div with space-y",
+        "Uses Switch for independent on/off notification toggles (not looping Button with manual active state)",
+        "Uses data-invalid on Field and aria-invalid on the input control for validation states",
+        "Uses gap-* (e.g. gap-4, gap-6) instead of space-y-* or space-x-* for spacing",
+        "Uses semantic color tokens (e.g. bg-background, text-muted-foreground, text-destructive) instead of raw colors like bg-red-500",
+        "No manual dark: color overrides"
+      ]
+    },
+    {
+      "id": 2,
+      "prompt": "Create a dialog component for editing a user profile. It should have the user's avatar at the top, input fields for name and bio, and Save/Cancel buttons with appropriate icons. Using shadcn/ui with radix-nova preset and tabler icons.",
+      "expected_output": "A React component with DialogTitle, Avatar+AvatarFallback, data-icon on icon buttons, no icon sizing classes, tabler icon imports.",
+      "files": [],
+      "expectations": [
+        "Includes DialogTitle for accessibility (visible or with sr-only class)",
+        "Avatar component includes AvatarFallback",
+        "Icons on buttons use the data-icon attribute (data-icon=\"inline-start\" or data-icon=\"inline-end\")",
+        "No sizing classes on icons inside components (no size-4, w-4, h-4, etc.)",
+        "Uses tabler icons (@tabler/icons-react) instead of lucide-react",
+        "Uses asChild for custom triggers (radix preset)"
+      ]
+    },
+    {
+      "id": 3,
+      "prompt": "Create a dashboard component that shows 4 stat cards in a grid. Each card has a title, large number, percentage change badge, and a loading skeleton state. Using shadcn/ui with base-nova preset and lucide icons.",
+      "expected_output": "A React component with full Card composition, Skeleton for loading, Badge for changes, semantic colors, gap-* spacing.",
+      "files": [],
+      "expectations": [
+        "Uses full Card composition with CardHeader, CardTitle, CardContent (not dumping everything into CardContent)",
+        "Uses Skeleton component for loading placeholders instead of custom animate-pulse divs",
+        "Uses Badge component for percentage change instead of custom styled spans",
+        "Uses semantic color tokens instead of raw color values like bg-green-500 or text-red-600",
+        "Uses gap-* instead of space-y-* or space-x-* for spacing",
+        "Uses size-* when width and height are equal instead of separate w-* h-*"
+      ]
+    }
+  ]
+}

.cursor/skills/shadcn/mcp.md

@@ -0,0 +1,94 @@
+# shadcn MCP Server
+
+The CLI includes an MCP server that lets AI assistants search, browse, view, and install components from registries.
+
+---
+
+## Setup
+
+```bash
+shadcn mcp        # start the MCP server (stdio)
+shadcn mcp init   # write config for your editor
+```
+
+Editor config files:
+
+| Editor | Config file |
+|--------|------------|
+| Claude Code | `.mcp.json` |
+| Cursor | `.cursor/mcp.json` |
+| VS Code | `.vscode/mcp.json` |
+| OpenCode | `opencode.json` |
+| Codex | `~/.codex/config.toml` (manual) |
+
+---
+
+## Tools
+
+> **Tip:** MCP tools handle registry operations (search, view, install). For project configuration (aliases, framework, Tailwind version), use `npx shadcn@latest info` — there is no MCP equivalent.
+
+### `shadcn:get_project_registries`
+
+Returns registry names from `components.json`. Errors if no `components.json` exists.
+
+**Input:** none
+
+### `shadcn:list_items_in_registries`
+
+Lists all items from one or more registries.
+
+**Input:** `registries` (string[]), `limit` (number, optional), `offset` (number, optional)
+
+### `shadcn:search_items_in_registries`
+
+Fuzzy search across registries.
+
+**Input:** `registries` (string[]), `query` (string), `limit` (number, optional), `offset` (number, optional)
+
+### `shadcn:view_items_in_registries`
+
+View item details including full file contents.
+
+**Input:** `items` (string[]) — e.g. `["@shadcn/button", "@shadcn/card"]`
+
+### `shadcn:get_item_examples_from_registries`
+
+Find usage examples and demos with source code.
+
+**Input:** `registries` (string[]), `query` (string) — e.g. `"accordion-demo"`, `"button example"`
+
+### `shadcn:get_add_command_for_items`
+
+Returns the CLI install command.
+
+**Input:** `items` (string[]) — e.g. `["@shadcn/button"]`
+
+### `shadcn:get_audit_checklist`
+
+Returns a checklist for verifying components (imports, deps, lint, TypeScript).
+
+**Input:** none
+
+---
+
+## Configuring Registries
+
+Registries are set in `components.json`. The `@shadcn` registry is always built-in.
+
+```json
+{
+  "registries": {
+    "@acme": "https://acme.com/r/{name}.json",
+    "@private": {
+      "url": "https://private.com/r/{name}.json",
+      "headers": { "Authorization": "Bearer ${MY_TOKEN}" }
+    }
+  }
+}
+```
+
+- Names must start with `@`.
+- URLs must contain `{name}`.
+- `${VAR}` references are resolved from environment variables.
+
+Community registry index: `https://ui.shadcn.com/r/registries.json`

.cursor/skills/shadcn/rules/base-vs-radix.md

@@ -0,0 +1,306 @@
+# Base vs Radix
+
+API differences between `base` and `radix`. Check the `base` field from `npx shadcn@latest info`.
+
+## Contents
+
+- Composition: asChild vs render
+- Button / trigger as non-button element
+- Select (items prop, placeholder, positioning, multiple, object values)
+- ToggleGroup (type vs multiple)
+- Slider (scalar vs array)
+- Accordion (type and defaultValue)
+
+---
+
+## Composition: asChild (radix) vs render (base)
+
+Radix uses `asChild` to replace the default element. Base uses `render`. Don't wrap triggers in extra elements.
+
+**Incorrect:**
+
+```tsx
+<DialogTrigger>
+  <div>
+    <Button>Open</Button>
+  </div>
+</DialogTrigger>
+```
+
+**Correct (radix):**
+
+```tsx
+<DialogTrigger asChild>
+  <Button>Open</Button>
+</DialogTrigger>
+```
+
+**Correct (base):**
+
+```tsx
+<DialogTrigger render={<Button />}>Open</DialogTrigger>
+```
+
+This applies to all trigger and close components: `DialogTrigger`, `SheetTrigger`, `AlertDialogTrigger`, `DropdownMenuTrigger`, `PopoverTrigger`, `TooltipTrigger`, `CollapsibleTrigger`, `DialogClose`, `SheetClose`, `NavigationMenuLink`, `BreadcrumbLink`, `SidebarMenuButton`, `Badge`, `Item`.
+
+---
+
+## Button / trigger as non-button element (base only)
+
+When `render` changes an element to a non-button (`<a>`, `<span>`), add `nativeButton={false}`.
+
+**Incorrect (base):** missing `nativeButton={false}`.
+
+```tsx
+<Button render={<a href="/docs" />}>Read the docs</Button>
+```
+
+**Correct (base):**
+
+```tsx
+<Button render={<a href="/docs" />} nativeButton={false}>
+  Read the docs
+</Button>
+```
+
+**Correct (radix):**
+
+```tsx
+<Button asChild>
+  <a href="/docs">Read the docs</a>
+</Button>
+```
+
+Same for triggers whose `render` is not a `Button`:
+
+```tsx
+// base.
+<PopoverTrigger render={<InputGroupAddon />} nativeButton={false}>
+  Pick date
+</PopoverTrigger>
+```
+
+---
+
+## Select
+
+**items prop (base only).** Base requires an `items` prop on the root. Radix uses inline JSX only.
+
+**Incorrect (base):**
+
+```tsx
+<Select>
+  <SelectTrigger><SelectValue placeholder="Select a fruit" /></SelectTrigger>
+</Select>
+```
+
+**Correct (base):**
+
+```tsx
+const items = [
+  { label: "Select a fruit", value: null },
+  { label: "Apple", value: "apple" },
+  { label: "Banana", value: "banana" },
+]
+
+<Select items={items}>
+  <SelectTrigger>
+    <SelectValue />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectGroup>
+      {items.map((item) => (
+        <SelectItem key={item.value} value={item.value}>{item.label}</SelectItem>
+      ))}
+    </SelectGroup>
+  </SelectContent>
+</Select>
+```
+
+**Correct (radix):**
+
+```tsx
+<Select>
+  <SelectTrigger>
+    <SelectValue placeholder="Select a fruit" />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectGroup>
+      <SelectItem value="apple">Apple</SelectItem>
+      <SelectItem value="banana">Banana</SelectItem>
+    </SelectGroup>
+  </SelectContent>
+</Select>
+```
+
+**Placeholder.** Base uses a `{ value: null }` item in the items array. Radix uses `<SelectValue placeholder="...">`.
+
+**Content positioning.** Base uses `alignItemWithTrigger`. Radix uses `position`.
+
+```tsx
+// base.
+<SelectContent alignItemWithTrigger={false} side="bottom">
+
+// radix.
+<SelectContent position="popper">
+```
+
+---
+
+## Select — multiple selection and object values (base only)
+
+Base supports `multiple`, render-function children on `SelectValue`, and object values with `itemToStringValue`. Radix is single-select with string values only.
+
+**Correct (base — multiple selection):**
+
+```tsx
+<Select items={items} multiple defaultValue={[]}>
+  <SelectTrigger>
+    <SelectValue>
+      {(value: string[]) => value.length === 0 ? "Select fruits" : `${value.length} selected`}
+    </SelectValue>
+  </SelectTrigger>
+  ...
+</Select>
+```
+
+**Correct (base — object values):**
+
+```tsx
+<Select defaultValue={plans[0]} itemToStringValue={(plan) => plan.name}>
+  <SelectTrigger>
+    <SelectValue>{(value) => value.name}</SelectValue>
+  </SelectTrigger>
+  ...
+</Select>
+```
+
+---
+
+## ToggleGroup
+
+Base uses a `multiple` boolean prop. Radix uses `type="single"` or `type="multiple"`.
+
+**Incorrect (base):**
+
+```tsx
+<ToggleGroup type="single" defaultValue="daily">
+  <ToggleGroupItem value="daily">Daily</ToggleGroupItem>
+</ToggleGroup>
+```
+
+**Correct (base):**
+
+```tsx
+// Single (no prop needed), defaultValue is always an array.
+<ToggleGroup defaultValue={["daily"]} spacing={2}>
+  <ToggleGroupItem value="daily">Daily</ToggleGroupItem>
+  <ToggleGroupItem value="weekly">Weekly</ToggleGroupItem>
+</ToggleGroup>
+
+// Multi-selection.
+<ToggleGroup multiple>
+  <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
+  <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
+</ToggleGroup>
+```
+
+**Correct (radix):**
+
+```tsx
+// Single, defaultValue is a string.
+<ToggleGroup type="single" defaultValue="daily" spacing={2}>
+  <ToggleGroupItem value="daily">Daily</ToggleGroupItem>
+  <ToggleGroupItem value="weekly">Weekly</ToggleGroupItem>
+</ToggleGroup>
+
+// Multi-selection.
+<ToggleGroup type="multiple">
+  <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
+  <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
+</ToggleGroup>
+```
+
+**Controlled single value:**
+
+```tsx
+// base — wrap/unwrap arrays.
+const [value, setValue] = React.useState("normal")
+<ToggleGroup value={[value]} onValueChange={(v) => setValue(v[0])}>
+
+// radix — plain string.
+const [value, setValue] = React.useState("normal")
+<ToggleGroup type="single" value={value} onValueChange={setValue}>
+```
+
+---
+
+## Slider
+
+Base accepts a plain number for a single thumb. Radix always requires an array.
+
+**Incorrect (base):**
+
+```tsx
+<Slider defaultValue={[50]} max={100} step={1} />
+```
+
+**Correct (base):**
+
+```tsx
+<Slider defaultValue={50} max={100} step={1} />
+```
+
+**Correct (radix):**
+
+```tsx
+<Slider defaultValue={[50]} max={100} step={1} />
+```
+
+Both use arrays for range sliders. Controlled `onValueChange` in base may need a cast:
+
+```tsx
+// base.
+const [value, setValue] = React.useState([0.3, 0.7])
+<Slider value={value} onValueChange={(v) => setValue(v as number[])} />
+
+// radix.
+const [value, setValue] = React.useState([0.3, 0.7])
+<Slider value={value} onValueChange={setValue} />
+```
+
+---
+
+## Accordion
+
+Radix requires `type="single"` or `type="multiple"` and supports `collapsible`. `defaultValue` is a string. Base uses no `type` prop, uses `multiple` boolean, and `defaultValue` is always an array.
+
+**Incorrect (base):**
+
+```tsx
+<Accordion type="single" collapsible defaultValue="item-1">
+  <AccordionItem value="item-1">...</AccordionItem>
+</Accordion>
+```
+
+**Correct (base):**
+
+```tsx
+<Accordion defaultValue={["item-1"]}>
+  <AccordionItem value="item-1">...</AccordionItem>
+</Accordion>
+
+// Multi-select.
+<Accordion multiple defaultValue={["item-1", "item-2"]}>
+  <AccordionItem value="item-1">...</AccordionItem>
+  <AccordionItem value="item-2">...</AccordionItem>
+</Accordion>
+```
+
+**Correct (radix):**
+
+```tsx
+<Accordion type="single" collapsible defaultValue="item-1">
+  <AccordionItem value="item-1">...</AccordionItem>
+</Accordion>
+```

.cursor/skills/shadcn/rules/composition.md

@@ -0,0 +1,195 @@
+# Component Composition
+
+## Contents
+
+- Items always inside their Group component
+- Callouts use Alert
+- Empty states use Empty component
+- Toast notifications use sonner
+- Choosing between overlay components
+- Dialog, Sheet, and Drawer always need a Title
+- Card structure
+- Button has no isPending or isLoading prop
+- TabsTrigger must be inside TabsList
+- Avatar always needs AvatarFallback
+- Use Separator instead of raw hr or border divs
+- Use Skeleton for loading placeholders
+- Use Badge instead of custom styled spans
+
+---
+
+## Items always inside their Group component
+
+Never render items directly inside the content container.
+
+**Incorrect:**
+
+```tsx
+<SelectContent>
+  <SelectItem value="apple">Apple</SelectItem>
+  <SelectItem value="banana">Banana</SelectItem>
+</SelectContent>
+```
+
+**Correct:**
+
+```tsx
+<SelectContent>
+  <SelectGroup>
+    <SelectItem value="apple">Apple</SelectItem>
+    <SelectItem value="banana">Banana</SelectItem>
+  </SelectGroup>
+</SelectContent>
+```
+
+This applies to all group-based components:
+
+| Item | Group |
+|------|-------|
+| `SelectItem`, `SelectLabel` | `SelectGroup` |
+| `DropdownMenuItem`, `DropdownMenuLabel`, `DropdownMenuSub` | `DropdownMenuGroup` |
+| `MenubarItem` | `MenubarGroup` |
+| `ContextMenuItem` | `ContextMenuGroup` |
+| `CommandItem` | `CommandGroup` |
+
+---
+
+## Callouts use Alert
+
+```tsx
+<Alert>
+  <AlertTitle>Warning</AlertTitle>
+  <AlertDescription>Something needs attention.</AlertDescription>
+</Alert>
+```
+
+---
+
+## Empty states use Empty component
+
+```tsx
+<Empty>
+  <EmptyHeader>
+    <EmptyMedia variant="icon"><FolderIcon /></EmptyMedia>
+    <EmptyTitle>No projects yet</EmptyTitle>
+    <EmptyDescription>Get started by creating a new project.</EmptyDescription>
+  </EmptyHeader>
+  <EmptyContent>
+    <Button>Create Project</Button>
+  </EmptyContent>
+</Empty>
+```
+
+---
+
+## Toast notifications use sonner
+
+```tsx
+import { toast } from "sonner"
+
+toast.success("Changes saved.")
+toast.error("Something went wrong.")
+toast("File deleted.", {
+  action: { label: "Undo", onClick: () => undoDelete() },
+})
+```
+
+---
+
+## Choosing between overlay components
+
+| Use case | Component |
+|----------|-----------|
+| Focused task that requires input | `Dialog` |
+| Destructive action confirmation | `AlertDialog` |
+| Side panel with details or filters | `Sheet` |
+| Mobile-first bottom panel | `Drawer` |
+| Quick info on hover | `HoverCard` |
+| Small contextual content on click | `Popover` |
+
+---
+
+## Dialog, Sheet, and Drawer always need a Title
+
+`DialogTitle`, `SheetTitle`, `DrawerTitle` are required for accessibility. Use `className="sr-only"` if visually hidden.
+
+```tsx
+<DialogContent>
+  <DialogHeader>
+    <DialogTitle>Edit Profile</DialogTitle>
+    <DialogDescription>Update your profile.</DialogDescription>
+  </DialogHeader>
+  ...
+</DialogContent>
+```
+
+---
+
+## Card structure
+
+Use full composition — don't dump everything into `CardContent`:
+
+```tsx
+<Card>
+  <CardHeader>
+    <CardTitle>Team Members</CardTitle>
+    <CardDescription>Manage your team.</CardDescription>
+  </CardHeader>
+  <CardContent>...</CardContent>
+  <CardFooter>
+    <Button>Invite</Button>
+  </CardFooter>
+</Card>
+```
+
+---
+
+## Button has no isPending or isLoading prop
+
+Compose with `Spinner` + `data-icon` + `disabled`:
+
+```tsx
+<Button disabled>
+  <Spinner data-icon="inline-start" />
+  Saving...
+</Button>
+```
+
+---
+
+## TabsTrigger must be inside TabsList
+
+Never render `TabsTrigger` directly inside `Tabs` — always wrap in `TabsList`:
+
+```tsx
+<Tabs defaultValue="account">
+  <TabsList>
+    <TabsTrigger value="account">Account</TabsTrigger>
+    <TabsTrigger value="password">Password</TabsTrigger>
+  </TabsList>
+  <TabsContent value="account">...</TabsContent>
+</Tabs>
+```
+
+---
+
+## Avatar always needs AvatarFallback
+
+Always include `AvatarFallback` for when the image fails to load:
+
+```tsx
+<Avatar>
+  <AvatarImage src="/avatar.png" alt="User" />
+  <AvatarFallback>JD</AvatarFallback>
+</Avatar>
+```
+
+---
+
+## Use existing components instead of custom markup
+
+| Instead of | Use |
+|---|---|
+| `<hr>` or `<div className="border-t">` | `<Separator />` |
+| `<div className="animate-pulse">` with styled divs | `<Skeleton className="h-4 w-3/4" />` |
+| `<span className="rounded-full bg-green-100 ...">` | `<Badge variant="secondary">` |

.cursor/skills/shadcn/rules/forms.md

@@ -0,0 +1,192 @@
+# Forms & Inputs
+
+## Contents
+
+- Forms use FieldGroup + Field
+- InputGroup requires InputGroupInput/InputGroupTextarea
+- Buttons inside inputs use InputGroup + InputGroupAddon
+- Option sets (2–7 choices) use ToggleGroup
+- FieldSet + FieldLegend for grouping related fields
+- Field validation and disabled states
+
+---
+
+## Forms use FieldGroup + Field
+
+Always use `FieldGroup` + `Field` — never raw `div` with `space-y-*`:
+
+```tsx
+<FieldGroup>
+  <Field>
+    <FieldLabel htmlFor="email">Email</FieldLabel>
+    <Input id="email" type="email" />
+  </Field>
+  <Field>
+    <FieldLabel htmlFor="password">Password</FieldLabel>
+    <Input id="password" type="password" />
+  </Field>
+</FieldGroup>
+```
+
+Use `Field orientation="horizontal"` for settings pages. Use `FieldLabel className="sr-only"` for visually hidden labels.
+
+**Choosing form controls:**
+
+- Simple text input → `Input`
+- Dropdown with predefined options → `Select`
+- Searchable dropdown → `Combobox`
+- Native HTML select (no JS) → `native-select`
+- Boolean toggle → `Switch` (for settings) or `Checkbox` (for forms)
+- Single choice from few options → `RadioGroup`
+- Toggle between 2–5 options → `ToggleGroup` + `ToggleGroupItem`
+- OTP/verification code → `InputOTP`
+- Multi-line text → `Textarea`
+
+---
+
+## InputGroup requires InputGroupInput/InputGroupTextarea
+
+Never use raw `Input` or `Textarea` inside an `InputGroup`.
+
+**Incorrect:**
+
+```tsx
+<InputGroup>
+  <Input placeholder="Search..." />
+</InputGroup>
+```
+
+**Correct:**
+
+```tsx
+import { InputGroup, InputGroupInput } from "@/components/ui/input-group"
+
+<InputGroup>
+  <InputGroupInput placeholder="Search..." />
+</InputGroup>
+```
+
+---
+
+## Buttons inside inputs use InputGroup + InputGroupAddon
+
+Never place a `Button` directly inside or adjacent to an `Input` with custom positioning.
+
+**Incorrect:**
+
+```tsx
+<div className="relative">
+  <Input placeholder="Search..." className="pr-10" />
+  <Button className="absolute right-0 top-0" size="icon">
+    <SearchIcon />
+  </Button>
+</div>
+```
+
+**Correct:**
+
+```tsx
+import { InputGroup, InputGroupInput, InputGroupAddon } from "@/components/ui/input-group"
+
+<InputGroup>
+  <InputGroupInput placeholder="Search..." />
+  <InputGroupAddon>
+    <Button size="icon">
+      <SearchIcon data-icon="inline-start" />
+    </Button>
+  </InputGroupAddon>
+</InputGroup>
+```
+
+---
+
+## Option sets (2–7 choices) use ToggleGroup
+
+Don't manually loop `Button` components with active state.
+
+**Incorrect:**
+
+```tsx
+const [selected, setSelected] = useState("daily")
+
+<div className="flex gap-2">
+  {["daily", "weekly", "monthly"].map((option) => (
+    <Button
+      key={option}
+      variant={selected === option ? "default" : "outline"}
+      onClick={() => setSelected(option)}
+    >
+      {option}
+    </Button>
+  ))}
+</div>
+```
+
+**Correct:**
+
+```tsx
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+
+<ToggleGroup spacing={2}>
+  <ToggleGroupItem value="daily">Daily</ToggleGroupItem>
+  <ToggleGroupItem value="weekly">Weekly</ToggleGroupItem>
+  <ToggleGroupItem value="monthly">Monthly</ToggleGroupItem>
+</ToggleGroup>
+```
+
+Combine with `Field` for labelled toggle groups:
+
+```tsx
+<Field orientation="horizontal">
+  <FieldTitle id="theme-label">Theme</FieldTitle>
+  <ToggleGroup aria-labelledby="theme-label" spacing={2}>
+    <ToggleGroupItem value="light">Light</ToggleGroupItem>
+    <ToggleGroupItem value="dark">Dark</ToggleGroupItem>
+    <ToggleGroupItem value="system">System</ToggleGroupItem>
+  </ToggleGroup>
+</Field>
+```
+
+> **Note:** `defaultValue` and `type`/`multiple` props differ between base and radix. See [base-vs-radix.md](./base-vs-radix.md#togglegroup).
+
+---
+
+## FieldSet + FieldLegend for grouping related fields
+
+Use `FieldSet` + `FieldLegend` for related checkboxes, radios, or switches — not `div` with a heading:
+
+```tsx
+<FieldSet>
+  <FieldLegend variant="label">Preferences</FieldLegend>
+  <FieldDescription>Select all that apply.</FieldDescription>
+  <FieldGroup className="gap-3">
+    <Field orientation="horizontal">
+      <Checkbox id="dark" />
+      <FieldLabel htmlFor="dark" className="font-normal">Dark mode</FieldLabel>
+    </Field>
+  </FieldGroup>
+</FieldSet>
+```
+
+---
+
+## Field validation and disabled states
+
+Both attributes are needed — `data-invalid`/`data-disabled` styles the field (label, description), while `aria-invalid`/`disabled` styles the control.
+
+```tsx
+// Invalid.
+<Field data-invalid>
+  <FieldLabel htmlFor="email">Email</FieldLabel>
+  <Input id="email" aria-invalid />
+  <FieldDescription>Invalid email address.</FieldDescription>
+</Field>
+
+// Disabled.
+<Field data-disabled>
+  <FieldLabel htmlFor="email">Email</FieldLabel>
+  <Input id="email" disabled />
+</Field>
+```
+
+Works for all controls: `Input`, `Textarea`, `Select`, `Checkbox`, `RadioGroupItem`, `Switch`, `Slider`, `NativeSelect`, `InputOTP`.

.cursor/skills/shadcn/rules/icons.md

@@ -0,0 +1,101 @@
+# Icons
+
+**Always use the project's configured `iconLibrary` for imports.** Check the `iconLibrary` field from project context: `lucide` → `lucide-react`, `tabler` → `@tabler/icons-react`, etc. Never assume `lucide-react`.
+
+---
+
+## Icons in Button use data-icon attribute
+
+Add `data-icon="inline-start"` (prefix) or `data-icon="inline-end"` (suffix) to the icon. No sizing classes on the icon.
+
+**Incorrect:**
+
+```tsx
+<Button>
+  <SearchIcon className="mr-2 size-4" />
+  Search
+</Button>
+```
+
+**Correct:**
+
+```tsx
+<Button>
+  <SearchIcon data-icon="inline-start"/>
+  Search
+</Button>
+
+<Button>
+  Next
+  <ArrowRightIcon data-icon="inline-end"/>
+</Button>
+```
+
+---
+
+## No sizing classes on icons inside components
+
+Components handle icon sizing via CSS. Don't add `size-4`, `w-4 h-4`, or other sizing classes to icons inside `Button`, `DropdownMenuItem`, `Alert`, `Sidebar*`, or other shadcn components. Unless the user explicitly asks for custom icon sizes.
+
+**Incorrect:**
+
+```tsx
+<Button>
+  <SearchIcon className="size-4" data-icon="inline-start" />
+  Search
+</Button>
+
+<DropdownMenuItem>
+  <SettingsIcon className="mr-2 size-4" />
+  Settings
+</DropdownMenuItem>
+```
+
+**Correct:**
+
+```tsx
+<Button>
+  <SearchIcon data-icon="inline-start" />
+  Search
+</Button>
+
+<DropdownMenuItem>
+  <SettingsIcon />
+  Settings
+</DropdownMenuItem>
+```
+
+---
+
+## Pass icons as component objects, not string keys
+
+Use `icon={CheckIcon}`, not a string key to a lookup map.
+
+**Incorrect:**
+
+```tsx
+const iconMap = {
+  check: CheckIcon,
+  alert: AlertIcon,
+}
+
+function StatusBadge({ icon }: { icon: string }) {
+  const Icon = iconMap[icon]
+  return <Icon />
+}
+
+<StatusBadge icon="check" />
+```
+
+**Correct:**
+
+```tsx
+// Import from the project's configured iconLibrary (e.g. lucide-react, @tabler/icons-react).
+import { CheckIcon } from "lucide-react"
+
+function StatusBadge({ icon: Icon }: { icon: React.ComponentType }) {
+  return <Icon />
+}
+
+<StatusBadge icon={CheckIcon} />
+```

.cursor/skills/shadcn/rules/styling.md

@@ -0,0 +1,162 @@
+# Styling & Customization
+
+See [customization.md](../customization.md) for theming, CSS variables, and adding custom colors.
+
+## Contents
+
+- Semantic colors
+- Built-in variants first
+- className for layout only
+- No space-x-* / space-y-*
+- Prefer size-* over w-* h-* when equal
+- Prefer truncate shorthand
+- No manual dark: color overrides
+- Use cn() for conditional classes
+- No manual z-index on overlay components
+
+---
+
+## Semantic colors
+
+**Incorrect:**
+
+```tsx
+<div className="bg-blue-500 text-white">
+  <p className="text-gray-600">Secondary text</p>
+</div>
+```
+
+**Correct:**
+
+```tsx
+<div className="bg-primary text-primary-foreground">
+  <p className="text-muted-foreground">Secondary text</p>
+</div>
+```
+
+---
+
+## No raw color values for status/state indicators
+
+For positive, negative, or status indicators, use Badge variants, semantic tokens like `text-destructive`, or define custom CSS variables — don't reach for raw Tailwind colors.
+
+**Incorrect:**
+
+```tsx
+<span className="text-emerald-600">+20.1%</span>
+<span className="text-green-500">Active</span>
+<span className="text-red-600">-3.2%</span>
+```
+
+**Correct:**
+
+```tsx
+<Badge variant="secondary">+20.1%</Badge>
+<Badge>Active</Badge>
+<span className="text-destructive">-3.2%</span>
+```
+
+If you need a success/positive color that doesn't exist as a semantic token, use a Badge variant or ask the user about adding a custom CSS variable to the theme (see [customization.md](../customization.md)).
+
+---
+
+## Built-in variants first
+
+**Incorrect:**
+
+```tsx
+<Button className="border border-input bg-transparent hover:bg-accent">
+  Click me
+</Button>
+```
+
+**Correct:**
+
+```tsx
+<Button variant="outline">Click me</Button>
+```
+
+---
+
+## className for layout only
+
+Use `className` for layout (e.g. `max-w-md`, `mx-auto`, `mt-4`), **not** for overriding component colors or typography. To change colors, use semantic tokens, built-in variants, or CSS variables.
+
+**Incorrect:**
+
+```tsx
+<Card className="bg-blue-100 text-blue-900 font-bold">
+  <CardContent>Dashboard</CardContent>
+</Card>
+```
+
+**Correct:**
+
+```tsx
+<Card className="max-w-md mx-auto">
+  <CardContent>Dashboard</CardContent>
+</Card>
+```
+
+To customize a component's appearance, prefer these approaches in order:
+1. **Built-in variants** — `variant="outline"`, `variant="destructive"`, etc.
+2. **Semantic color tokens** — `bg-primary`, `text-muted-foreground`.
+3. **CSS variables** — define custom colors in the global CSS file (see [customization.md](../customization.md)).
+
+---
+
+## No space-x-* / space-y-*
+
+Use `gap-*` instead. `space-y-4` → `flex flex-col gap-4`. `space-x-2` → `flex gap-2`.
+
+```tsx
+<div className="flex flex-col gap-4">
+  <Input />
+  <Input />
+  <Button>Submit</Button>
+</div>
+```
+
+---
+
+## Prefer size-* over w-* h-* when equal
+
+`size-10` not `w-10 h-10`. Applies to icons, avatars, skeletons, etc.
+
+---
+
+## Prefer truncate shorthand
+
+`truncate` not `overflow-hidden text-ellipsis whitespace-nowrap`.
+
+---
+
+## No manual dark: color overrides
+
+Use semantic tokens — they handle light/dark via CSS variables. `bg-background text-foreground` not `bg-white dark:bg-gray-950`.
+
+---
+
+## Use cn() for conditional classes
+
+Use the `cn()` utility from the project for conditional or merged class names. Don't write manual ternaries in className strings.
+
+**Incorrect:**
+
+```tsx
+<div className={`flex items-center ${isActive ? "bg-primary text-primary-foreground" : "bg-muted"}`}>
+```
+
+**Correct:**
+
+```tsx
+import { cn } from "@/lib/utils"
+
+<div className={cn("flex items-center", isActive ? "bg-primary text-primary-foreground" : "bg-muted")}>
+```
+
+---
+
+## No manual z-index on overlay components
+
+`Dialog`, `Sheet`, `Drawer`, `AlertDialog`, `DropdownMenu`, `Popover`, `Tooltip`, `HoverCard` handle their own stacking. Never add `z-50` or `z-[999]`.

.dockerignore

@@ -0,0 +1,23 @@
+node_modules
+.next
+.git
+.gitignore
+.DS_Store
+npm-debug.log
+yarn.lock
+pnpm-lock.yaml
+*.log
+
+.cursor
+.trae
+.idea
+.vscode
+
+Dockerfile*
+docker-compose*.yml
+
+*.env
+.env.*
+
+*.md
+*.txt

AGENTS.md

@@ -0,0 +1,123 @@
+# PROJECT KNOWLEDGE BASE
+
+**Generated:** 2026-03-21T03:22:46Z
+**Commit:** 270bc3a
+**Branch:** main
+
+## OVERVIEW
+
+Real-time mutual fund valuation tracker (基估宝). Next.js 16 App Router, pure JavaScript (JSX, no TypeScript), static export to GitHub Pages. Glassmorphism UI with heavy custom CSS variables (3557-line globals.css). All data via JSONP/script injection to external Chinese financial APIs (天天基金, 东方财富, 腾讯财经). localStorage as primary database; Supabase for optional cloud sync.
+
+## STRUCTURE
+
+```
+real-time-fund/
+├── app/                          # Next.js App Router root
+│   ├── page.jsx                  # MONOLITHIC SPA entry (~3000+ lines) — ALL state + logic here
+│   ├── layout.jsx                # Root layout (theme init, PWA, GA, Toaster)
+│   ├── globals.css               # Tailwind v4 + glassmorphism CSS variables (~3557 lines)
+│   ├── api/fund.js               # ALL external data fetching (~954 lines, JSONP + script injection)
+│   ├── components/               # 47 app-specific UI components (modals, cards, tables, charts)
+│   ├── lib/                      # Core utilities: supabase, cacheRequest, tradingCalendar, valuationTimeseries
+│   ├── hooks/                    # Custom hooks: useBodyScrollLock, useFundFuzzyMatcher
+│   └── assets/                   # Static images (GitHub SVG, donation QR codes)
+├── components/ui/                # 15 shadcn/ui primitives (accordion, button, dialog, drawer, etc.)
+├── lib/utils.js                  # cn() helper only (clsx + tailwind-merge)
+├── public/                       # Static: allFund.json, PWA manifest, service worker, icon
+├── doc/                          # Documentation: localStorage schema, Supabase SQL, dev group QR
+├── .github/workflows/            # CI/CD: nextjs.yml (GitHub Pages), docker-ci.yml (Docker build)
+├── .husky/                       # Pre-commit: lint-staged → ESLint
+├── Dockerfile                    # Multi-stage: Node 22 build → Nginx Alpine serve
+├── docker-compose.yml            # Docker Compose config
+├── entrypoint.sh                 # Runtime env var placeholder replacement
+├── nginx.conf                    # Nginx config (port 3000, SPA fallback)
+├── next.config.js                # Static export, reactStrictMode, reactCompiler
+├── jsconfig.json                 # Path aliases: @/* → ./*
+├── eslint.config.mjs             # ESLint flat config: next/core-web-vitals
+├── postcss.config.mjs            # Tailwind v4 PostCSS plugin
+├── components.json               # shadcn/ui config (new-york, JSX, RSC)
+└── package.json                  # Node >= 20.9.0, lint-staged, husky
+```
+
+## WHERE TO LOOK
+
+| Task | Location | Notes |
+|------|----------|-------|
+| Fund valuation logic | `app/api/fund.js` | JSONP to 天天基金, script injection to 腾讯财经 |
+| Main UI orchestration | `app/page.jsx` | Monolithic — all useState, business logic, rendering |
+| Fund card display | `app/components/FundCard.jsx` | Individual fund card with holdings |
+| Desktop table | `app/components/PcFundTable.jsx` | PC-specific table layout |
+| Mobile table | `app/components/MobileFundTable.jsx` | Mobile-specific layout, swipe actions |
+| Holding calculations | `app/page.jsx` (getHoldingProfit) | Profit/loss computation |
+| Cloud sync | `app/lib/supabase.js` + page.jsx sync functions | Supabase auth + data sync |
+| Trading/DCA | `app/components/TradeModal.jsx`, `DcaModal.jsx` | Buy/sell, dollar-cost averaging |
+| Fund fuzzy search | `app/hooks/useFundFuzzyMatcher.js` | Fuse.js based name/code matching |
+| OCR import | `app/page.jsx` (processFiles) | Tesseract.js + LLM parsing |
+| Valuation intraday chart | `app/lib/valuationTimeseries.js` | localStorage time-series |
+| Trading calendar | `app/lib/tradingCalendar.js` | Chinese holiday detection via CDN |
+| Request caching | `app/lib/cacheRequest.js` | In-memory cache with dedup |
+| UI primitives | `components/ui/` | shadcn/ui — accordion, dialog, drawer, select, etc. |
+| Global styles | `app/globals.css` | CSS variables, glassmorphism, responsive |
+| CI/CD | `.github/workflows/nextjs.yml` | Build + deploy to GitHub Pages |
+| Docker | `Dockerfile`, `docker-compose.yml` | Multi-stage build with runtime env injection |
+| localStorage schema | `doc/localStorage 数据结构.md` | Full documentation of stored data shapes |
+| Supabase schema | `doc/supabase.sql` | Database tables for cloud sync |
+
+## CONVENTIONS
+
+- **JavaScript only** — no TypeScript. `tsx: false` in shadcn config.
+- **No src/ directory** — app/, components/, lib/ at root level.
+- **Static export** — `output: 'export'` in next.config.js. No server-side runtime.
+- **JSONP + script injection** — all external API calls bypass CORS via `<script>` tags, not fetch().
+- **localStorage-first** — all user data stored locally; Supabase sync is optional/secondary.
+- **Monolithic page.jsx** — entire app state and logic in one file (~3000+ lines). No state management library.
+- **Dual responsive layouts** — `PcFundTable` and `MobileFundTable` switch at 640px breakpoint.
+- **shadcn/ui conventions** — new-york style, CSS variables enabled, Lucide icons, path aliases (`@/components`, `@/lib/utils`).
+- **Linting only** — ESLint + lint-staged on pre-commit. No Prettier, no auto-formatting.
+- **React Compiler** — `reactCompiler: true` in next.config.js (experimental auto-memoization).
+
+## ANTI-PATTERNS (THIS PROJECT)
+
+- **No test infrastructure** — zero test files, no test framework, no test scripts.
+- **Dual ESLint configs** — both `.eslintrc.json` (legacy) and `eslint.config.mjs` (flat) exist. Flat config is active.
+- **`--legacy-peer-deps`** — Dockerfile uses this flag, indicating peer dependency conflicts.
+- **Console statements** — 20 console.error/warn/log across codebase (mostly error logging in page.jsx).
+- **2 eslint-disable comments** — `no-await-in-loop` in MobileFundTable, `react-hooks/exhaustive-deps` in HoldingEditModal.
+- **Hardcoded API keys** — `app/api/fund.js` lines 911-914 contain plaintext API keys for LLM service.
+- **Empty catch blocks** — several `catch (e) {}` blocks that swallow errors silently.
+
+## UNIQUE STYLES
+
+- **Glassmorphism design** — frosted glass effect via `backdrop-filter: blur()` + semi-transparent backgrounds.
+- **CSS variable system** — 50+ CSS custom properties for colors, spacing, transitions in globals.css.
+- **Runtime env injection** — Docker entrypoint replaces `__PLACEHOLDER__` strings in static JS/HTML at container start.
+- **JSONP everywhere** — financial APIs (天天基金, 腾讯财经) accessed via script tag injection, not fetch().
+- **OCR + LLM import** — Tesseract.js OCR → LLM text parsing → fund code extraction.
+- **Multiple IDE configs** — .cursor/, .qoder/, .trae/ directories suggest active AI-assisted development.
+
+## COMMANDS
+
+```bash
+# Development
+npm run dev              # Start dev server (localhost:3000)
+npm run build            # Static export to out/
+npm run lint             # ESLint check
+npm run lint:fix         # ESLint auto-fix
+
+# Docker
+docker build -t real-time-fund .
+docker run -d -p 3000:3000 --env-file .env real-time-fund
+docker compose up -d
+
+# Environment
+cp env.example .env.local   # Copy template, fill NEXT_PUBLIC_* values
+```
+
+## NOTES
+
+- **Fund code format**: 6-digit numeric codes (e.g., 110022). Stored in localStorage key `localFunds`.
+- **Data sources**: 天天基金 (valuation JSONP), 东方财富 (holdings HTML parsing), 腾讯财经 (stock quotes script injection).
+- **Deployment**: GitHub Actions auto-deploys main → GitHub Pages. Also supports Vercel, Cloudflare Pages, Docker.
+- **Node requirement**: >= 20.9.0 (enforced in package.json engines).
+- **License**: AGPL-3.0 — derivative works must be open-sourced under same license.
+- **Chinese UI** — all user-facing text is Chinese (zh-CN). README is bilingual (Chinese primary).

Dockerfile

@@ -1,33 +1,36 @@
-# ===== 构建阶段 =====
-FROM node:22-bullseye AS builder
+# ===== 构建阶段（Alpine 减小体积）=====
+# 未传入的 build-arg 使用占位符，便于运行阶段用环境变量替换
+# Supabase 构建时会校验 URL，故使用合法占位 URL，运行时再替换
+FROM node:22-alpine AS builder
 WORKDIR /app
-ARG NEXT_PUBLIC_SUPABASE_URL
-ARG NEXT_PUBLIC_SUPABASE_ANON_KEY
-ARG NEXT_PUBLIC_WEB3FORMS_ACCESS_KEY
-ARG NEXT_PUBLIC_GA_ID
-ARG NEXT_PUBLIC_GITHUB_LATEST_RELEASE_URL
+
+ARG NEXT_PUBLIC_SUPABASE_URL=https://runtime-replace.supabase.co
+ARG NEXT_PUBLIC_SUPABASE_ANON_KEY=__NEXT_PUBLIC_SUPABASE_ANON_KEY__
+ARG NEXT_PUBLIC_WEB3FORMS_ACCESS_KEY=__NEXT_PUBLIC_WEB3FORMS_ACCESS_KEY__
+ARG NEXT_PUBLIC_GA_ID=__NEXT_PUBLIC_GA_ID__
+ARG NEXT_PUBLIC_GITHUB_LATEST_RELEASE_URL=__NEXT_PUBLIC_GITHUB_LATEST_RELEASE_URL__
 ENV NEXT_PUBLIC_SUPABASE_URL=$NEXT_PUBLIC_SUPABASE_URL
 ENV NEXT_PUBLIC_SUPABASE_ANON_KEY=$NEXT_PUBLIC_SUPABASE_ANON_KEY
 ENV NEXT_PUBLIC_WEB3FORMS_ACCESS_KEY=$NEXT_PUBLIC_WEB3FORMS_ACCESS_KEY
 ENV NEXT_PUBLIC_GA_ID=$NEXT_PUBLIC_GA_ID
 ENV NEXT_PUBLIC_GITHUB_LATEST_RELEASE_URL=$NEXT_PUBLIC_GITHUB_LATEST_RELEASE_URL
+
 COPY package*.json ./
-RUN npm install --legacy-peer-deps
+RUN npm ci --legacy-peer-deps
+
 COPY . .
 RUN npx next build
-# ===== 运行阶段 =====
-FROM node:22-bullseye AS runner
-WORKDIR /app
-ENV NODE_ENV=production
-ENV NEXT_PUBLIC_SUPABASE_URL=$NEXT_PUBLIC_SUPABASE_URL
-ENV NEXT_PUBLIC_SUPABASE_ANON_KEY=$NEXT_PUBLIC_SUPABASE_ANON_KEY
-ENV NEXT_PUBLIC_WEB3FORMS_ACCESS_KEY=$NEXT_PUBLIC_WEB3FORMS_ACCESS_KEY
-ENV NEXT_PUBLIC_GA_ID=$NEXT_PUBLIC_GA_ID
-ENV NEXT_PUBLIC_GITHUB_LATEST_RELEASE_URL=$NEXT_PUBLIC_GITHUB_LATEST_RELEASE_URL
-COPY --from=builder /app/package.json ./
-COPY --from=builder /app/node_modules ./node_modules
-COPY --from=builder /app/.next ./.next
+
+# ===== 运行阶段（仅静态资源 + nginx，启动时替换占位符）=====
+FROM nginx:alpine AS runner
+WORKDIR /usr/share/nginx/html
+
+COPY --from=builder /app/out .
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+COPY entrypoint.sh /entrypoint.sh
+RUN chmod +x /entrypoint.sh
+
 EXPOSE 3000
 HEALTHCHECK --interval=30s --timeout=5s --retries=3 \
-  CMD wget -qO- http://localhost:3000 || exit 1
-CMD ["npm", "start"]
+  CMD curl -f http://localhost:3000/ || exit 1
+ENTRYPOINT ["/entrypoint.sh"]

README.md

@@ -1,18 +1,37 @@
 # 实时基金估值 (Real-time Fund Valuation)
 
-一个基于 Next.js 开发的纯前端基金估值与重仓股实时追踪工具。采用玻璃拟态设计（Glassmorphism），支持移动端适配。
+一个基于 Next.js 开发的基金估值与重仓股实时追踪工具。采用玻璃拟态设计（Glassmorphism），支持移动端适配。
 预览地址：  
 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>
+
 ## ✨ 特性
 
 - **实时估值**：通过输入基金编号，实时获取并展示基金的单位净值、估值净值及实时涨跌幅。
 - **重仓追踪**：自动获取基金前 10 大重仓股票，并实时追踪重仓股的盘中涨跌情况。支持收起/展开展示。
 - **纯前端运行**：采用 JSONP 方案直连东方财富、腾讯财经等公开接口，彻底解决跨域问题，支持在 GitHub Pages 等静态环境直接部署。
-- **本地持久化**：使用 `localStorage` 存储已添加的基金列表及配置信息，刷新不丢失。
+- **本地持久化**：使用 `localStorage` 存储已添加的基金列表、持仓、交易记录、定投计划及配置信息，刷新不丢失。
 - **响应式设计**：完美适配 PC 与移动端。针对移动端优化了文字展示、间距及交互体验。
-- **自选功能**：支持将基金添加至“自选”列表，通过 Tab 切换展示全部基金或仅自选基金。自选状态支持持久化及同步清理。
+- **自选功能**：支持将基金添加至"自选"列表，通过 Tab 切换展示全部基金或仅自选基金。自选状态支持持久化及同步清理。
+- **分组管理**：支持创建多个基金分组，方便按用途或类别管理基金。
+- **持仓管理**：记录每只基金的持有份额和成本价，自动计算持仓收益和累计收益。
+- **交易记录**：支持买入/卖出操作，记录交易历史，支持查看单个基金的交易明细。
+- **定投计划**：支持设置自动定投计划，可按日/周/月等周期自动生成买入交易。
+- **云端同步**：通过 Supabase 云端备份数据，支持多设备间数据同步与冲突处理。
+- **自定义排序**：支持多种排序规则（估值涨跌幅、持仓收益、持有金额等），可自由组合和启用/禁用规则。
+- **拖拽排序**：在默认排序模式下可通过拖拽调整基金顺序。
+- **明暗主题**：支持亮色/暗色主题切换，一键换肤。
+- **导入/导出**：支持将配置导出为 JSON 文件备份，或从文件导入恢复。
 - **可自定义频率**：支持设置自动刷新间隔（5秒 - 300秒），并提供手动刷新按钮。
 
 ## 🛠 技术栈
@@ -79,7 +98,11 @@
     官方验证码位数默认为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 相关内容查阅官方文档。
 
@@ -97,18 +120,27 @@ npm run build
 
 ### Docker运行
 
-需先配置环境变量（与本地开发一致），否则构建出的镜像中 Supabase 等配置为空。可复制 `env.example` 为 `.env` 并填入实际值；若不用登录/反馈功能可留空。
+镜像支持两种配置方式：
 
-1. 构建镜像（构建时会读取当前环境或同目录 `.env` 中的变量）
+- **构建时写入**：构建时通过 `--build-arg` 或 `.env` 传入 `NEXT_PUBLIC_*`，值会打进镜像，运行时无需再传。
+- **运行时替换**：构建时不传（或使用默认占位符），启动容器时通过 `-e` 或 `--env-file` 传入，入口脚本会在启动 Nginx 前替换静态资源中的占位符。
+
+可复制 `env.example` 为 `.env` 并填入实际值；若不用登录/反馈功能可留空。
+
+1. 构建镜像
 ```bash
+# 方式 A：运行时再注入配置（镜像内为占位符）
 docker build -t real-time-fund .
-# 或通过 --build-arg 传入，例如：
-# docker build -t real-time-fund --build-arg NEXT_PUBLIC_Supabase_URL=xxx --build-arg NEXT_PUBLIC_Supabase_ANON_KEY=xxx --build-arg NEXT_PUBLIC_GA_ID=G-xxxx .
+
+# 方式 B：构建时写入配置
+docker build -t real-time-fund --build-arg NEXT_PUBLIC_SUPABASE_URL=xxx --build-arg NEXT_PUBLIC_SUPABASE_ANON_KEY=xxx .
+# 或依赖同目录 .env：docker compose build
 ```
 
 2. 启动容器
 ```bash
-docker run -d -p 3000:3000 --name fund real-time-fund
+# 若构建时未写入配置，可在此注入（与 --env-file .env 二选一）
+docker run -d -p 3000:3000 --name fund --env-file .env real-time-fund
 ```
 
 #### docker-compose（会读取同目录 `.env` 作为 build-arg 与运行环境）
@@ -117,6 +149,29 @@ docker run -d -p 3000:3000 --name fund real-time-fund
 docker compose up -d
 ```
 
+### Docker Hub
+
+镜像已发布至 Docker Hub，可直接拉取运行，无需本地构建。
+
+1. **拉取镜像**
+   ```bash
+   docker pull hzm0321/real-time-fund:latest
+   ```
+
+2. **启动容器**  
+   访问 [http://localhost:3000](http://localhost:3000) 即可使用。
+   ```bash
+   docker run -d -p 3000:3000 --name real-time-fund --restart always hzm0321/real-time-fund:latest
+   ```
+
+3. **使用自定义环境变量（运行时替换）**  
+   镜像内已预置占位符，启动时通过环境变量即可覆盖，无需重新构建。例如使用本地 `.env`：
+   ```bash
+   docker run -d -p 3000:3000 --name real-time-fund --restart always --env-file .env hzm0321/real-time-fund:latest
+   ```
+   或单独指定变量：`-e NEXT_PUBLIC_SUPABASE_URL=xxx -e NEXT_PUBLIC_SUPABASE_ANON_KEY=xxx`。  
+   变量名与本地开发一致：`NEXT_PUBLIC_SUPABASE_URL`、`NEXT_PUBLIC_SUPABASE_ANON_KEY`、`NEXT_PUBLIC_WEB3FORMS_ACCESS_KEY`、`NEXT_PUBLIC_GA_ID`、`NEXT_PUBLIC_GITHUB_LATEST_RELEASE_URL`。
+
 ## 📖 使用说明
 
 1. **添加基金**：在顶部输入框输入 6 位基金代码（如 `110022`），点击“添加”。
@@ -128,7 +183,7 @@ docker compose up -d
 
 欢迎基金实时开发者加入微信群聊讨论开发与协作：
 
-微信开发群人数已满200，如需加入请加微信号 `hzm1998hzm` 。加v备注：`基估宝开发`，邀请入群。
+<img src="./doc/weChatGroupDevelop.jpg" width="300">
 
 ## 📝 免责声明
 

app/api/AGENTS.md

@@ -0,0 +1,38 @@
+# app/api/ — Data Fetching Layer
+
+## OVERVIEW
+
+Single file (`fund.js`, ~954 lines) containing ALL external data fetching for the entire application. Pure client-side: JSONP + script tag injection to bypass CORS.
+
+## WHERE TO LOOK
+
+| Function | Purpose |
+|----------|---------|
+| `fetchFundData(code)` | Main fund data (valuation + NAV + holdings). Uses 天天基金 JSONP |
+| `fetchFundDataFallback(code)` | Backup data source when primary fails |
+| `fetchSmartFundNetValue(code, date)` | Smart NAV lookup with date fallback |
+| `searchFunds(val)` | Fund search by name/code (东方财富) |
+| `fetchFundHistory(code, range)` | Historical NAV data via pingzhongdata |
+| `fetchFundPingzhongdata(code)` | Raw eastmoney pingzhongdata (trend, grand total) |
+| `fetchMarketIndices()` | 24 A-share/HK/US indices via 腾讯财经 |
+| `fetchShanghaiIndexDate()` | Shanghai index date for trading day check |
+| `parseFundTextWithLLM(text)` | OCR text → fund codes via LLM (apis.iflow.cn) |
+| `loadScript(url)` | JSONP helper — creates script tag, waits for global var |
+| `fetchRelatedSectors(code)` | Fund sector/track info (unused in main UI) |
+
+## CONVENTIONS
+
+- **JSONP pattern**: `loadScript(url)` → sets global callback → script.onload → reads `window.XXX` → cleanup
+- **All functions return Promises** — async/await throughout
+- **Cached via `cachedRequest()`** from `app/lib/cacheRequest.js`
+- **Error handling**: try/catch returning null/empty — never throws to UI
+- **Market indices**: `MARKET_INDEX_KEYS` array defines 24 indices with `code`, `varKey`, `name`
+- **Stock code normalization**: `normalizeTencentCode()` handles A-share (6-digit), HK (5-digit), US (letter codes)
+
+## ANTI-PATTERNS (THIS DIRECTORY)
+
+- **Hardcoded API keys** (lines 911-914) — plaintext LLM service keys in source
+- **Empty catch blocks** — several `catch (e) {}` silently swallowing errors
+- **Global window pollution** — JSONP callbacks assigned to `window.jsonpgz`, `window.SuggestData_*`, etc.
+- **No retry logic** — failed requests return null, no exponential backoff
+- **Script cleanup race conditions** — scripts removed from DOM after onload/onerror, but timeout may trigger after removal

app/api/fund.js

@@ -20,6 +20,35 @@ dayjs.tz.setDefault(TZ);
 const nowInTz = () => dayjs().tz(TZ);
 const toTz = (input) => (input ? dayjs.tz(input, TZ) : nowInTz());
 
+const ONE_DAY_MS = 24 * 60 * 60 * 1000;
+
+/**
+ * 获取基金「关联板块/跟踪标的」信息（走本地 API，并做 1 天缓存）
+ * 接口：/api/related-sectors?code=xxxxxx
+ * 返回：{ code: string, relatedSectors: string }
+ */
+export const fetchRelatedSectors = async (code, { cacheTime = ONE_DAY_MS } = {}) => {
+  if (!code) return '';
+  const normalized = String(code).trim();
+  if (!normalized) return '';
+
+  const url = `/api/related-sectors?code=${encodeURIComponent(normalized)}`;
+  const cacheKey = `relatedSectors:${normalized}`;
+
+  try {
+    const data = await cachedRequest(async () => {
+      const res = await fetch(url);
+      if (!res.ok) return null;
+      return await res.json();
+    }, cacheKey, { cacheTime });
+
+    const relatedSectors = data?.relatedSectors;
+    return relatedSectors ? String(relatedSectors).trim() : '';
+  } catch (e) {
+    return '';
+  }
+};
+
 export const loadScript = (url) => {
   if (typeof document === 'undefined' || !document.body) return Promise.resolve(null);
 
@@ -126,6 +155,38 @@ const parseLatestNetValueFromLsjzContent = (content) => {
   return null;
 };
 
+/**
+ * 解析历史净值数据（支持多条记录）
+ * 返回按日期升序排列的净值数组
+ */
+const parseNetValuesFromLsjzContent = (content) => {
+  if (!content || content.includes('暂无数据')) return [];
+  const rowMatches = content.match(/<tr[\s\S]*?<\/tr>/gi) || [];
+  const results = [];
+  for (const row of rowMatches) {
+    const cells = row.match(/<td[^>]*>(.*?)<\/td>/gi) || [];
+    if (!cells.length) continue;
+    const getText = (td) => td.replace(/<[^>]+>/g, '').trim();
+    const dateStr = getText(cells[0] || '');
+    if (!/^\d{4}-\d{2}-\d{2}$/.test(dateStr)) continue;
+    const navStr = getText(cells[1] || '');
+    const nav = parseFloat(navStr);
+    if (!Number.isFinite(nav)) continue;
+    let growth = null;
+    for (const c of cells) {
+      const txt = getText(c);
+      const m = txt.match(/([-+]?\d+(?:\.\d+)?)\s*%/);
+      if (m) {
+        growth = parseFloat(m[1]);
+        break;
+      }
+    }
+    results.push({ date: dateStr, nav, growth });
+  }
+  // 返回按日期升序排列的结果（API返回的是倒序，需要反转）
+  return results.reverse();
+};
+
 const extractHoldingsReportDate = (html) => {
   if (!html) return null;
 
@@ -287,16 +348,19 @@ export const fetchFundData = async (c) => {
         gszzl: Number.isFinite(gszzlNum) ? gszzlNum : json.gszzl
       };
       const lsjzPromise = new Promise((resolveT) => {
-        const url = `https://fundf10.eastmoney.com/F10DataApi.aspx?type=lsjz&code=${c}&page=1&per=1&sdate=&edate=`;
+        const url = `https://fundf10.eastmoney.com/F10DataApi.aspx?type=lsjz&code=${c}&page=1&per=2&sdate=&edate=`;
         loadScript(url)
           .then((apidata) => {
             const content = apidata?.content || '';
-            const latest = parseLatestNetValueFromLsjzContent(content);
-            if (latest && latest.nav) {
+            const navList = parseNetValuesFromLsjzContent(content);
+            if (navList.length > 0) {
+              const latest = navList[navList.length - 1];
+              const previousNav = navList.length > 1 ? navList[navList.length - 2] : null;
               resolveT({
                 dwjz: String(latest.nav),
                 zzl: Number.isFinite(latest.growth) ? latest.growth : null,
-                jzrq: latest.date
+                jzrq: latest.date,
+                lastNav: previousNav ? String(previousNav.nav) : null
               });
             } else {
               resolveT(null);
@@ -341,8 +405,12 @@ export const fetchFundData = async (c) => {
             let name = '';
             let weight = '';
             if (idxCode >= 0 && tds[idxCode]) {
-              const m = tds[idxCode].match(/(\d{6})/);
-              code = m ? m[1] : tds[idxCode];
+              const raw = String(tds[idxCode] || '').trim();
+              const mA = raw.match(/(\d{6})/);
+              const mHK = raw.match(/(\d{5})/);
+              // 海外股票常见为英文代码（如 AAPL / usAAPL / TSLA.US / 0700.HK）
+              const mAlpha = raw.match(/\b([A-Za-z]{1,10})\b/);
+              code = mA ? mA[1] : (mHK ? mHK[1] : (mAlpha ? mAlpha[1].toUpperCase() : raw));
             } else {
               const codeIdx = tds.findIndex(txt => /^\d{6}$/.test(txt));
               if (codeIdx >= 0) code = tds[codeIdx];
@@ -365,20 +433,67 @@ export const fetchFundData = async (c) => {
             }
           }
           holdings = holdings.slice(0, 10);
-          const needQuotes = holdings.filter(h => /^\d{6}$/.test(h.code) || /^\d{5}$/.test(h.code));
+          const normalizeTencentCode = (input) => {
+            const raw = String(input || '').trim();
+            if (!raw) return null;
+            // already normalized tencent styles (normalize prefix casing)
+            const mPref = raw.match(/^(us|hk|sh|sz|bj)(.+)$/i);
+            if (mPref) {
+              const p = mPref[1].toLowerCase();
+              const rest = String(mPref[2] || '').trim();
+              // usAAPL / usIXIC: rest use upper; hk00700 keep digits
+              return `${p}${/^\d+$/.test(rest) ? rest : rest.toUpperCase()}`;
+            }
+            const mSPref = raw.match(/^s_(sh|sz|bj|hk)(.+)$/i);
+            if (mSPref) {
+              const p = mSPref[1].toLowerCase();
+              const rest = String(mSPref[2] || '').trim();
+              return `s_${p}${/^\d+$/.test(rest) ? rest : rest.toUpperCase()}`;
+            }
+
+            // A股/北证
+            if (/^\d{6}$/.test(raw)) {
+              const pfx =
+                raw.startsWith('6') || raw.startsWith('9')
+                  ? 'sh'
+                  : raw.startsWith('4') || raw.startsWith('8')
+                    ? 'bj'
+                    : 'sz';
+              return `s_${pfx}${raw}`;
+            }
+            // 港股（数字）
+            if (/^\d{5}$/.test(raw)) return `s_hk${raw}`;
+
+            // 形如 0700.HK / 00001.HK
+            const mHkDot = raw.match(/^(\d{4,5})\.(?:HK)$/i);
+            if (mHkDot) return `s_hk${mHkDot[1].padStart(5, '0')}`;
+
+            // 形如 AAPL / TSLA.US / AAPL.O / BRK.B（腾讯接口对“.”支持不稳定，优先取主代码）
+            const mUsDot = raw.match(/^([A-Za-z]{1,10})(?:\.[A-Za-z]{1,6})$/);
+            if (mUsDot) return `us${mUsDot[1].toUpperCase()}`;
+            if (/^[A-Za-z]{1,10}$/.test(raw)) return `us${raw.toUpperCase()}`;
+
+            return null;
+          };
+
+          const getTencentVarName = (tencentCode) => {
+            const cd = String(tencentCode || '').trim();
+            if (!cd) return '';
+            // s_* uses v_s_*
+            if (/^s_/i.test(cd)) return `v_${cd}`;
+            // us/hk/sh/sz/bj uses v_{code}
+            return `v_${cd}`;
+          };
+
+          const needQuotes = holdings
+            .map((h) => ({
+              h,
+              tencentCode: normalizeTencentCode(h.code),
+            }))
+            .filter((x) => Boolean(x.tencentCode));
           if (needQuotes.length) {
             try {
-              const tencentCodes = needQuotes.map(h => {
-                const cd = String(h.code || '');
-                if (/^\d{6}$/.test(cd)) {
-                  const pfx = cd.startsWith('6') || cd.startsWith('9') ? 'sh' : ((cd.startsWith('4') || cd.startsWith('8')) ? 'bj' : 'sz');
-                  return `s_${pfx}${cd}`;
-                }
-                if (/^\d{5}$/.test(cd)) {
-                  return `s_hk${cd}`;
-                }
-                return null;
-              }).filter(Boolean).join(',');
+              const tencentCodes = needQuotes.map((x) => x.tencentCode).join(',');
               if (!tencentCodes) {
                 resolveH(holdings);
                 return;
@@ -388,22 +503,15 @@ export const fetchFundData = async (c) => {
                 const scriptQuote = document.createElement('script');
                 scriptQuote.src = quoteUrl;
                 scriptQuote.onload = () => {
-                  needQuotes.forEach(h => {
-                    const cd = String(h.code || '');
-                    let varName = '';
-                    if (/^\d{6}$/.test(cd)) {
-                      const pfx = cd.startsWith('6') || cd.startsWith('9') ? 'sh' : ((cd.startsWith('4') || cd.startsWith('8')) ? 'bj' : 'sz');
-                      varName = `v_s_${pfx}${cd}`;
-                    } else if (/^\d{5}$/.test(cd)) {
-                      varName = `v_s_hk${cd}`;
-                    } else {
-                      return;
-                    }
-                    const dataStr = window[varName];
+                  needQuotes.forEach(({ h, tencentCode }) => {
+                    const varName = getTencentVarName(tencentCode);
+                    const dataStr = varName ? window[varName] : null;
                     if (dataStr) {
                       const parts = dataStr.split('~');
-                      if (parts.length > 5) {
-                        h.change = parseFloat(parts[5]);
+                      const isUS = /^us/i.test(String(tencentCode || ''));
+                      const idx = isUS ? 32 : 5;
+                      if (parts.length > idx) {
+                        h.change = parseFloat(parts[idx]);
                       }
                     }
                   });
@@ -433,6 +541,7 @@ export const fetchFundData = async (c) => {
             gzData.dwjz = tData.dwjz;
             gzData.jzrq = tData.jzrq;
             gzData.zzl = tData.zzl;
+            gzData.lastNav = tData.lastNav;
           }
         }
         resolve({
@@ -513,6 +622,91 @@ export const fetchShanghaiIndexDate = async () => {
   });
 };
 
+/** 大盘指数项：name, code, price, change, changePercent
+ *  同时用于：
+ *  - qt.gtimg.cn 实时快照（code 用于 q= 参数，varKey 为全局变量名）
+ *  - 分时 mini 图（code 传给 minute/query，当不支持分时时会自动回退占位折线）
+ *
+ *  参照产品图：覆盖主要 A 股宽基 + 创业/科创 + 部分海外与港股指数。
+ */
+const MARKET_INDEX_KEYS = [
+  // 行 1：上证 / 深证
+  { code: 'sh000001', varKey: 'v_sh000001', name: '上证指数' },
+  { code: 'sh000016', varKey: 'v_sh000016', name: '上证50' },
+  { code: 'sz399001', varKey: 'v_sz399001', name: '深证成指' },
+  { code: 'sz399330', varKey: 'v_sz399330', name: '深证100' },
+
+  // 行 2：北证 / 沪深300 / 创业板
+  { code: 'bj899050', varKey: 'v_bj899050', name: '北证50' },
+  { code: 'sh000300', varKey: 'v_sh000300', name: '沪深300' },
+  { code: 'sz399006', varKey: 'v_sz399006', name: '创业板指' },
+  { code: 'sz399102', varKey: 'v_sz399102', name: '创业板综' },
+
+  // 行 3：创业板 50 / 科创
+  { code: 'sz399673', varKey: 'v_sz399673', name: '创业板50' },
+  { code: 'sh000688', varKey: 'v_sh000688', name: '科创50' },
+  { code: 'sz399005', varKey: 'v_sz399005', name: '中小100' },
+
+  // 行 4：中证系列
+  { code: 'sh000905', varKey: 'v_sh000905', name: '中证500' },
+  { code: 'sh000906', varKey: 'v_sh000906', name: '中证800' },
+  { code: 'sh000852', varKey: 'v_sh000852', name: '中证1000' },
+  { code: 'sh000903', varKey: 'v_sh000903', name: '中证A100' },
+
+  // 行 5：等权 / 国证 / 纳指
+  { code: 'sh000932', varKey: 'v_sh000932', name: '500等权' },
+  { code: 'sz399303', varKey: 'v_sz399303', name: '国证2000' },
+  { code: 'usIXIC', varKey: 'v_usIXIC', name: '纳斯达克' },
+  { code: 'usNDX', varKey: 'v_usNDX', name: '纳斯达克100' },
+
+  // 行 6：美股三大 + 恒生
+  { code: 'usINX', varKey: 'v_usINX', name: '标普500' },
+  { code: 'usDJI', varKey: 'v_usDJI', name: '道琼斯' },
+  { code: 'hkHSI', varKey: 'v_hkHSI', name: '恒生指数' },
+  { code: 'hkHSTECH', varKey: 'v_hkHSTECH', name: '恒生科技指数' },
+];
+
+function parseIndexRaw(data) {
+  if (!data || typeof data !== 'string') return null;
+  const parts = data.split('~');
+  if (parts.length < 33) return null;
+  const name = parts[1] || '';
+  const price = parseFloat(parts[3], 10);
+  const change = parseFloat(parts[31], 10);
+  const changePercent = parseFloat(parts[32], 10);
+  if (Number.isNaN(price)) return null;
+  return {
+    name,
+    price: Number.isFinite(price) ? price : 0,
+    change: Number.isFinite(change) ? change : 0,
+    changePercent: Number.isFinite(changePercent) ? changePercent : 0,
+  };
+}
+
+export const fetchMarketIndices = async () => {
+  if (typeof window === 'undefined' || typeof document === 'undefined') return [];
+  return new Promise((resolve, reject) => {
+    const script = document.createElement('script');
+    const codes = MARKET_INDEX_KEYS.map((item) => item.code).join(',');
+    script.src = `https://qt.gtimg.cn/q=${codes}&_t=${Date.now()}`;
+    script.onload = () => {
+      const list = MARKET_INDEX_KEYS.map(({ name: defaultName, varKey }) => {
+        const raw = window[varKey];
+        const parsed = parseIndexRaw(raw);
+        if (!parsed) return { name: defaultName, code: '', price: 0, change: 0, changePercent: 0 };
+        return { ...parsed, code: varKey.replace('v_', '') };
+      });
+      if (document.body.contains(script)) document.body.removeChild(script);
+      resolve(list);
+    };
+    script.onerror = () => {
+      if (document.body.contains(script)) document.body.removeChild(script);
+      reject(new Error('指数数据加载失败'));
+    };
+    document.body.appendChild(script);
+  });
+};
+
 export const fetchLatestRelease = async () => {
   const url = process.env.NEXT_PUBLIC_GITHUB_LATEST_RELEASE_URL;
   if (!url) return null;
@@ -591,7 +785,7 @@ const snapshotPingzhongdataGlobals = (fundCode) => {
   };
 };
 
-const jsonpLoadPingzhongdata = (fundCode, timeoutMs = 10000) => {
+const jsonpLoadPingzhongdata = (fundCode, timeoutMs = 20000) => {
   return new Promise((resolve, reject) => {
     if (typeof document === 'undefined' || !document.body) {
       reject(new Error('无浏览器环境'));
@@ -685,23 +879,62 @@ export const fetchFundHistory = async (code, range = '1m') => {
     default: start = start.subtract(1, 'month');
   }
 
-  // 业绩走势统一走 pingzhongdata.Data_netWorthTrend
+  // 业绩走势统一走 pingzhongdata.Data_netWorthTrend，
+  // 同时附带 Data_grandTotal（若存在，格式为 [{ name, data: [[ts, val], ...] }, ...]）
   try {
     const pz = await fetchFundPingzhongdata(code);
     const trend = pz?.Data_netWorthTrend;
+    const grandTotal = pz?.Data_grandTotal;
+
     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)
+
+      // 若起始日没有净值，则往前推到最近一日有净值的数据作为有效起始
+      const validTrend = trend
+        .filter((d) => d && typeof d.x === 'number' && Number.isFinite(Number(d.y)) && d.x <= endMs)
+        .sort((a, b) => a.x - b.x);
+      const startDayEndMs = startMs + 24 * 60 * 60 * 1000 - 1;
+      const hasPointOnStartDay = validTrend.some((d) => d.x >= startMs && d.x <= startDayEndMs);
+      let effectiveStartMs = startMs;
+      if (!hasPointOnStartDay) {
+        const lastBeforeStart = validTrend.filter((d) => d.x < startMs).pop();
+        if (lastBeforeStart) effectiveStartMs = lastBeforeStart.x;
+      }
+
+      const out = validTrend
+        .filter((d) => d.x >= effectiveStartMs && 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);
+        });
+
+      // 解析 Data_grandTotal 为多条对比曲线，使用同一有效起始日
+      if (Array.isArray(grandTotal) && grandTotal.length) {
+        const grandTotalSeries = grandTotal
+          .map((series) => {
+            if (!series || !series.data || !Array.isArray(series.data)) return null;
+            const name = series.name || '';
+            const points = series.data
+              .filter((item) => Array.isArray(item) && typeof item[0] === 'number')
+              .map(([ts, val]) => {
+                if (ts < effectiveStartMs || ts > endMs) return null;
+                const numVal = Number(val);
+                if (!Number.isFinite(numVal)) return null;
+                const date = dayjs(ts).tz(TZ).format('YYYY-MM-DD');
+                return { ts, date, value: numVal };
+              })
+              .filter(Boolean);
+            if (!points.length) return null;
+            return { name, points };
+          })
+          .filter(Boolean);
+
+        if (grandTotalSeries.length) {
+          out.grandTotalSeries = grandTotalSeries;
+        }
+      }
 
       if (out.length) return out;
     }
@@ -711,8 +944,20 @@ export const fetchFundHistory = async (code, range = '1m') => {
   return [];
 };
 
+const API_KEYS = [
+  'sk-25b8a4a3d88a49e82e87c981d9d8f6b4',
+  'sk-1565f822d5bd745b6529cfdf28b55574'
+  // 添加更多 API Key 到这里
+];
+
+// 随机从数组中选择一个 API Key
+const getRandomApiKey = () => {
+  if (!API_KEYS.length) return null;
+  return API_KEYS[Math.floor(Math.random() * API_KEYS.length)];
+};
+
 export const parseFundTextWithLLM = async (text) => {
-  const apiKey = 'sk-a72c4e279bc62a03cc105be6263d464c';
+  const apiKey = getRandomApiKey();
   if (!apiKey || !text) return null;
 
   try {

app/components/AGENTS.md

@@ -0,0 +1,56 @@
+# app/components/ — UI Components
+
+## OVERVIEW
+
+47 app-specific React components (all client-side). Modals dominate (~26). Core display: FundCard, PcFundTable, MobileFundTable.
+
+## STRUCTURE
+
+```
+app/components/
+├── Core Display (6)
+│   ├── FundCard.jsx            # Individual fund card (valuation + holdings)
+│   ├── PcFundTable.jsx         # Desktop table layout
+│   ├── MobileFundTable.jsx     # Mobile list with swipe actions
+│   ├── MobileFundCardDrawer.jsx# Mobile fund detail drawer
+│   ├── GroupSummary.jsx        # Group portfolio summary
+│   └── MarketIndexAccordion.jsx# Market indices (24 A/HK/US)
+├── Modals (26)
+│   ├── Fund ops: AddFundToGroupModal, GroupManageModal, GroupModal, AddResultModal
+│   ├── Trading: TradeModal, HoldingEditModal, HoldingActionModal, TransactionHistoryModal, PendingTradesModal, DcaModal, AddHistoryModal
+│   ├── Settings: SettingsModal, MarketSettingModal, MobileSettingModal, PcTableSettingModal, SortSettingModal
+│   ├── Auth: LoginModal, CloudConfigModal
+│   ├── Scan: ScanPickModal, ScanProgressModal, ScanImportConfirmModal, ScanImportProgressModal
+│   └── Misc: ConfirmModal, SuccessModal, DonateModal, FeedbackModal, WeChatModal, UpdatePromptModal, FundHistoryNetValueModal
+├── Charts (3)
+│   ├── FundIntradayChart.jsx   # Intraday valuation chart (localStorage data)
+│   ├── FundTrendChart.jsx      # Fund trend chart (pingzhongdata)
+│   └── FundHistoryNetValue.jsx # Historical NAV display
+└── Utilities (7)
+    ├── Icons.jsx               # Custom SVG icons (Close, Eye, Moon, Sun, etc.)
+    ├── Common.jsx              # Shared UI helpers
+    ├── FitText.jsx             # Auto-fit text sizing
+    ├── RefreshButton.jsx       # Manual refresh control
+    ├── EmptyStateCard.jsx      # Empty state placeholder
+    ├── Announcement.jsx        # Banner announcement
+    ├── ThemeColorSync.jsx      # Theme meta tag sync
+    ├── PwaRegister.jsx         # Service worker registration
+    └── AnalyticsGate.jsx       # Conditional GA loader
+```
+
+## CONVENTIONS
+
+- **All client components** — `'use client'` at top, no server components
+- **State from parent** — page.jsx manages ALL state; components receive props only
+- **shadcn/ui primitives** — imported from `@/components/ui/*`
+- **Mobile/Desktop switching** — parent passes `isMobile` prop; 640px breakpoint
+- **Modals**: use `useBodyScrollLock(open)` hook for scroll prevention
+- **Icons**: mix of custom SVG (Icons.jsx) + lucide-react
+- **Styling**: glassmorphism via CSS variables (globals.css), no component-level CSS
+
+## ANTI-PATTERNS (THIS DIRECTORY)
+
+- **No prop drilling avoidance** — all state flows from page.jsx via props (30+ prop holes in FundCard)
+- **Modal sprawl** — 26 modals could benefit from a modal manager/context
+- **Swipe gesture duplication** — MobileFundTable and MobileFundCardDrawer both implement swipe logic
+- **No loading skeletons** — components show spinners, not skeleton placeholders

app/components/AddFundToGroupModal.jsx

@@ -1,13 +1,35 @@
 'use client';
 
-import { useState } from 'react';
-import { motion } from 'framer-motion';
+import { useState, useMemo } from 'react';
+import { Search } from 'lucide-react';
 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 [searchQuery, setSearchQuery] = useState('');
 
-  const availableFunds = (allFunds || []).filter(f => !(currentGroupCodes || []).includes(f.code));
+  const availableFunds = useMemo(() => {
+    const base = (allFunds || []).filter(f => !(currentGroupCodes || []).includes(f.code));
+    if (!searchQuery.trim()) return base;
+    const query = searchQuery.trim().toLowerCase();
+    return base.filter(f =>
+      (f.name && f.name.toLowerCase().includes(query)) ||
+      (f.code && f.code.includes(query))
+    );
+  }, [allFunds, currentGroupCodes, searchQuery]);
+
+  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 => {
@@ -18,24 +40,37 @@ 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 }}
       >
+        <style>{`
+          .group-manage-list-container::-webkit-scrollbar {
+            width: 6px;
+          }
+          .group-manage-list-container::-webkit-scrollbar-track {
+            background: transparent;
+          }
+          .group-manage-list-container::-webkit-scrollbar-thumb {
+            background-color: var(--border);
+            border-radius: 3px;
+            box-shadow: none;
+          }
+          .group-manage-list-container::-webkit-scrollbar-thumb:hover {
+            background-color: var(--muted);
+          }
+        `}</style>
+        <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" />
@@ -46,10 +81,45 @@ export default function AddFundToGroupModal({ allFunds, currentGroupCodes, onClo
           </button>
         </div>
 
-        <div className="group-manage-list-container" style={{ maxHeight: '50vh', overflowY: 'auto', paddingRight: '4px' }}>
+        <div style={{ marginBottom: 16, position: 'relative' }}>
+          <Search
+            width="16"
+            height="16"
+            className="muted"
+            style={{
+              position: 'absolute',
+              left: 12,
+              top: '50%',
+              transform: 'translateY(-50%)',
+              pointerEvents: 'none',
+            }}
+          />
+          <input
+            type="text"
+            className="input no-zoom"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder="搜索基金名称或编号"
+            style={{
+              width: '100%',
+              paddingLeft: 36,
+            }}
+          />
+        </div>
+
+        <div
+          className="group-manage-list-container"
+          style={{
+            maxHeight: '50vh',
+            overflowY: 'auto',
+            paddingRight: '4px',
+            scrollbarWidth: 'thin',
+            scrollbarColor: 'var(--border) transparent',
+          }}
+        >
           {availableFunds.length === 0 ? (
             <div className="empty-state muted" style={{ textAlign: 'center', padding: '40px 0' }}>
-              <p>所有基金已在该分组中</p>
+              <p>{searchQuery.trim() ? '未找到匹配的基金' : '所有基金已在该分组中'}</p>
             </div>
           ) : (
             <div className="group-manage-list">
@@ -63,9 +133,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 +159,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>
 
@@ -200,15 +211,18 @@ export default function AddHistoryModal({ fund, onClose, onConfirm }) {
         <div className="muted" style={{ fontSize: '11px', lineHeight: 1.5, marginBottom: 16, paddingTop: 12, borderTop: '1px solid rgba(255,255,255,0.08)' }}>
           *此处补录的买入/卖出仅作记录展示，不会改变当前持仓金额与份额；实际持仓请在持仓设置中维护。
         </div>
-
-        <button
-          className="button primary full-width"
-          onClick={handleSubmit}
-        disabled={!type || !date || !netValue || !amount || !share || loading}
-        >
-          确认添加
-        </button>
-      </motion.div>
-    </motion.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_v11';
+const ANNOUNCEMENT_KEY = 'hasClosedAnnouncement_v20';
 
 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);
   };
@@ -65,13 +75,15 @@ export default function Announcement() {
               <span>公告</span>
             </div>
             <div style={{ color: 'var(--text)', lineHeight: '1.6', fontSize: '15px', overflowY: 'auto', minHeight: 0, flex: 1, paddingRight: '4px' }}>
-              <p>v0.2.1 版本更新内容如下：</p>
-              <p>1. 改进拍照识别基金准确度。</p>
-              <p>2. 拍照导入支持识别持仓金额、持仓收益。</p>
-              以下功能将会在下一个版本上线：
-              <p>1. 列表页查看基金详情。</p>
-              <p>2. 大盘走势数据。</p>
-              <p>3. 关联板块。</p>
+              <p>v0.2.9 更新内容：</p>
+              <p>1. 排序新增按昨日涨幅排序。</p>
+              <p>2. 排序个性化设置支持切换排序形式。</p>
+              <p>3. 全局设置新增显示/隐藏大盘指数。</p>
+              <p>4. 新增持有天数。</p>
+              <p>5. 登录方式支持 Github。</p>
+              <br/>
+              关联板块实时估值还在测试，会在近期上线。
+              <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

@@ -27,7 +27,7 @@ const nowInTz = () => dayjs().tz(TZ);
 const toTz = (input) => (input ? dayjs.tz(input, TZ) : nowInTz());
 const formatDate = (input) => toTz(input).format('YYYY-MM-DD');
 
-export function DatePicker({ value, onChange }) {
+export function DatePicker({ value, onChange, position = 'bottom' }) {
   const [isOpen, setIsOpen] = useState(false);
   const [currentMonth, setCurrentMonth] = useState(() => value ? toTz(value) : nowInTz());
 
@@ -83,16 +83,15 @@ export function DatePicker({ value, onChange }) {
       <AnimatePresence>
         {isOpen && (
           <motion.div
-            initial={{ opacity: 0, y: 10, scale: 0.95 }}
+            initial={{ opacity: 0, y: position === 'top' ? -10 : 10, scale: 0.95 }}
             animate={{ opacity: 1, y: 0, scale: 1 }}
-            exit={{ opacity: 0, y: 10, scale: 0.95 }}
+            exit={{ opacity: 0, y: position === 'top' ? -10 : 10, scale: 0.95 }}
             className="date-picker-dropdown glass card"
             style={{
               position: 'absolute',
-              top: '100%',
+              ...(position === 'top' ? { bottom: '100%', marginBottom: 8 } : { top: '100%', marginTop: 8 }),
               left: 0,
               width: '100%',
-              marginTop: 8,
               padding: 12,
               zIndex: 10
             }}

app/components/ConfirmModal.jsx

@@ -1,59 +1,67 @@
 'use client';
 
-import { motion } from 'framer-motion';
-import { createPortal } from 'react-dom';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
 import { TrashIcon } from './Icons';
 
-export default function ConfirmModal({ title, message, onConfirm, onCancel, confirmText = "确定删除" }) {
-  const content = (
-    <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()}
+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 (
+    <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 }}>
+        </DialogDescription>
+        <div className="flex flex-col gap-3 sm:flex-row">
           <button
-            className="button secondary"
+            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}
-            style={{ flex: 1, background: 'rgba(255,255,255,0.05)', color: 'var(--text)' }}
           >
             取消
           </button>
           <button
-            className="button danger"
+            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}
-            style={{ flex: 1 }}
-            autoFocus
           >
             {confirmText}
           </button>
         </div>
-      </motion.div>
-    </motion.div>
+      </DialogContent>
+    </Dialog>
   );
-  if (typeof document === 'undefined') return null;
-  return createPortal(content, document.body);
 }

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

@@ -0,0 +1,515 @@
+'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>
+            {holding?.firstPurchaseDate && !masked && (() => {
+              const today = dayjs.tz(todayStr, TZ);
+              const purchaseDate = dayjs.tz(holding.firstPurchaseDate, TZ);
+              if (!purchaseDate.isValid()) return null;
+              const days = today.diff(purchaseDate, 'day');
+              return (
+                <div className="stat" style={{ flexDirection: 'column', gap: 4 }}>
+                  <span className="label">持有天数</span>
+                  <span className="value">
+                    {days}天
+                  </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
+                style={{
+                  display: 'flex',
+                  justifyContent: 'flex-end',
+                  marginBottom: 4,
+                }}
+              >
+                <span className="muted">涨跌幅 / 占比</span>
+              </div>
+              <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={profit ? (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={profit ? (transactions?.[f.code] || []) : []}
+            theme={theme}
+          />
+        </>
+      )}
+    </motion.div>
+  );
+}

app/components/FundHistoryNetValue.jsx

@@ -0,0 +1,221 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import {
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import { fetchFundHistory } from '../api/fund';
+import { cachedRequest } from '../lib/cacheRequest';
+import FundHistoryNetValueModal from './FundHistoryNetValueModal';
+
+/**
+ * 历史净值表格行：日期、净值、日涨幅（按日期降序，涨红跌绿）
+ */
+function buildRows(history) {
+  if (!Array.isArray(history) || history.length === 0) return [];
+  const reversed = [...history].reverse();
+  return reversed.map((item, i) => {
+    const prev = reversed[i + 1];
+    let dailyChange = null;
+    if (prev && Number.isFinite(item.value) && Number.isFinite(prev.value) && prev.value !== 0) {
+      dailyChange = ((item.value - prev.value) / prev.value) * 100;
+    }
+    return {
+      date: item.date,
+      netValue: item.value,
+      dailyChange,
+    };
+  });
+}
+
+const columns = [
+  {
+    accessorKey: 'date',
+    header: '日期',
+    cell: (info) => info.getValue(),
+    meta: { align: 'left' },
+  },
+  {
+    accessorKey: 'netValue',
+    header: '净值',
+    cell: (info) => {
+      const v = info.getValue();
+      return v != null && Number.isFinite(v) ? Number(v).toFixed(4) : '—';
+    },
+    meta: { align: 'center' },
+  },
+  {
+    accessorKey: 'dailyChange',
+    header: '日涨幅',
+    cell: (info) => {
+      const v = info.getValue();
+      if (v == null || !Number.isFinite(v)) return '—';
+      const sign = v > 0 ? '+' : '';
+      const cls = v > 0 ? 'up' : v < 0 ? 'down' : '';
+      return <span className={cls}>{sign}{v.toFixed(2)}%</span>;
+    },
+    meta: { align: 'right' },
+  },
+];
+
+export default function FundHistoryNetValue({ code, range = '1m', theme }) {
+  const [data, setData] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [modalOpen, setModalOpen] = useState(false);
+
+  useEffect(() => {
+    if (!code) {
+      setData([]);
+      setLoading(false);
+      return;
+    }
+    let active = true;
+    setLoading(true);
+    setError(null);
+    const cacheKey = `fund_history_${code}_${range}`;
+    cachedRequest(() => fetchFundHistory(code, range), cacheKey, { cacheTime: 10 * 60 * 1000 })
+      .then((res) => {
+        if (active) {
+          setData(buildRows(res || []));
+          setLoading(false);
+        }
+      })
+      .catch((err) => {
+        if (active) {
+          setError(err);
+          setData([]);
+          setLoading(false);
+        }
+      });
+    return () => { active = false; };
+  }, [code, range]);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  const visibleRows = table.getRowModel().rows.slice(0, 5);
+
+  if (!code) return null;
+  if (loading) {
+    return (
+      <div className="fund-history-net-value" style={{ padding: '12px 0' }}>
+        <span className="muted" style={{ fontSize: '13px' }}>加载历史净值...</span>
+      </div>
+    );
+  }
+  if (error || data.length === 0) {
+    return (
+      <div className="fund-history-net-value" style={{ padding: '12px 0' }}>
+        <span className="muted" style={{ fontSize: '13px' }}>
+          {error ? '加载失败' : '暂无历史净值'}
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="fund-history-net-value">
+      <div
+        className="fund-history-table-wrapper"
+        style={{
+          marginTop: 8,
+          border: '1px solid var(--border)',
+          borderRadius: 'var(--radius)',
+          overflow: 'hidden',
+          background: 'var(--card)',
+        }}
+      >
+        <table
+          className="fund-history-table"
+          style={{
+            width: '100%',
+            borderCollapse: 'collapse',
+            fontSize: '13px',
+            color: 'var(--text)',
+          }}
+        >
+          <thead>
+            {table.getHeaderGroups().map((hg) => (
+              <tr
+                key={hg.id}
+                style={{
+                  borderBottom: '1px solid var(--border)',
+                  background: 'var(--table-row-alt-bg)',
+                }}
+              >
+                {hg.headers.map((h) => (
+                  <th
+                    key={h.id}
+                    style={{
+                      padding: '8px 12px',
+                      fontWeight: 600,
+                      color: 'var(--muted)',
+                      textAlign: h.column.columnDef.meta?.align || 'left',
+                    }}
+                  >
+                    {flexRender(h.column.columnDef.header, h.getContext())}
+                  </th>
+                ))}
+              </tr>
+            ))}
+          </thead>
+          <tbody>
+            {visibleRows.map((row) => (
+              <tr
+                key={row.id}
+                style={{
+                  borderBottom: '1px solid var(--border)',
+                }}
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <td
+                    key={cell.id}
+                    style={{
+                      padding: '8px 12px',
+                      color: 'var(--text)',
+                      textAlign: cell.column.columnDef.meta?.align || 'left',
+                    }}
+                  >
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <div style={{ marginTop: 8, display: 'flex', justifyContent: 'center' }}>
+        <button
+          type="button"
+          className="muted"
+          style={{
+            fontSize: 12,
+            padding: 0,
+            border: 'none',
+            background: 'none',
+            cursor: 'pointer',
+          }}
+          onClick={() => setModalOpen(true)}
+        >
+          加载更多历史净值
+        </button>
+      </div>
+
+      {modalOpen && (
+        <FundHistoryNetValueModal
+          open={modalOpen}
+          onOpenChange={setModalOpen}
+          code={code}
+          theme={theme}
+        />
+      )}
+    </div>
+  );
+}

app/components/FundHistoryNetValueModal.jsx

@@ -0,0 +1,321 @@
+'use client';
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import { fetchFundHistory } from '../api/fund';
+import { cachedRequest } from '../lib/cacheRequest';
+import { CloseIcon } from './Icons';
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+} from '@/components/ui/drawer';
+
+function buildRows(history) {
+  if (!Array.isArray(history) || history.length === 0) return [];
+  const reversed = [...history].reverse();
+  return reversed.map((item, i) => {
+    const prev = reversed[i + 1];
+    let dailyChange = null;
+    if (prev && Number.isFinite(item.value) && Number.isFinite(prev.value) && prev.value !== 0) {
+      dailyChange = ((item.value - prev.value) / prev.value) * 100;
+    }
+    return {
+      date: item.date,
+      netValue: item.value,
+      dailyChange,
+    };
+  });
+}
+
+const columns = [
+  {
+    accessorKey: 'date',
+    header: '日期',
+    cell: (info) => info.getValue(),
+    meta: { align: 'left' },
+  },
+  {
+    accessorKey: 'netValue',
+    header: '净值',
+    cell: (info) => {
+      const v = info.getValue();
+      return v != null && Number.isFinite(v) ? Number(v).toFixed(4) : '—';
+    },
+    meta: { align: 'center' },
+  },
+  {
+    accessorKey: 'dailyChange',
+    header: '日涨幅',
+    cell: (info) => {
+      const v = info.getValue();
+      if (v == null || !Number.isFinite(v)) return '—';
+      const sign = v > 0 ? '+' : '';
+      const cls = v > 0 ? 'up' : v < 0 ? 'down' : '';
+      return <span className={cls}>{sign}{v.toFixed(2)}%</span>;
+    },
+    meta: { align: 'right' },
+  },
+];
+
+export default function FundHistoryNetValueModal({ open, onOpenChange, code, theme }) {
+  const [data, setData] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [visibleCount, setVisibleCount] = useState(30);
+  const [isMobile, setIsMobile] = useState(false);
+  const scrollRef = useRef(null);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const mq = window.matchMedia('(max-width: 768px)');
+    const update = () => setIsMobile(mq.matches);
+    update();
+    mq.addEventListener('change', update);
+    return () => mq.removeEventListener('change', update);
+  }, []);
+
+  useEffect(() => {
+    if (!open || !code) return;
+    let active = true;
+    setLoading(true);
+    setError(null);
+    setVisibleCount(30);
+
+    const cacheKey = `fund_history_${code}_all_modal`;
+    cachedRequest(() => fetchFundHistory(code, 'all'), cacheKey, { cacheTime: 10 * 60 * 1000 })
+      .then((res) => {
+        if (!active) return;
+        setData(buildRows(res || []));
+        setLoading(false);
+      })
+      .catch((err) => {
+        if (!active) return;
+        setError(err);
+        setData([]);
+        setLoading(false);
+      });
+
+    return () => {
+      active = false;
+    };
+  }, [open, code]);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  const rows = table.getRowModel().rows.slice(0, visibleCount);
+  const hasMore = table.getRowModel().rows.length > visibleCount;
+
+  const handleOpenChange = (next) => {
+    if (!next) {
+      onOpenChange?.(false);
+    }
+  };
+
+  const handleScroll = (e) => {
+    const target = e.currentTarget;
+    if (!target || !hasMore) return;
+    const distance = target.scrollHeight - target.scrollTop - target.clientHeight;
+    if (distance < 40) {
+      setVisibleCount((prev) => {
+        const next = prev + 30;
+        const total = table.getRowModel().rows.length;
+        return next > total ? total : next;
+      });
+    }
+  };
+
+  const header = (
+    <div className="title" style={{ marginBottom: 12, justifyContent: 'space-between' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        <span>历史净值</span>
+      </div>
+      <button
+        type="button"
+        className="icon-button"
+        onClick={() => onOpenChange?.(false)}
+        style={{ border: 'none', background: 'transparent' }}
+      >
+        <CloseIcon width="20" height="20" />
+      </button>
+    </div>
+  );
+
+  const body = (
+    <div
+      ref={scrollRef}
+      style={{
+        maxHeight: '60vh',
+        overflowY: 'auto',
+        paddingRight: 4,
+      }}
+      onScroll={handleScroll}
+    >
+      {loading && (
+        <div style={{ padding: '16px 0', textAlign: 'center' }}>
+          <span className="muted" style={{ fontSize: 12 }}>加载历史净值...</span>
+        </div>
+      )}
+      {!loading && (error || data.length === 0) && (
+        <div style={{ padding: '16px 0', textAlign: 'center' }}>
+          <span className="muted" style={{ fontSize: 12 }}>
+            {error ? '加载失败' : '暂无历史净值'}
+          </span>
+        </div>
+      )}
+      {!loading && data.length > 0 && (
+        <div
+          className="fund-history-table-wrapper"
+          style={{
+            border: '1px solid var(--border)',
+            borderRadius: 'var(--radius)',
+            overflow: 'hidden',
+            background: 'var(--card)',
+          }}
+        >
+          <table
+            className="fund-history-table"
+            style={{
+              width: '100%',
+              borderCollapse: 'collapse',
+              fontSize: '13px',
+              color: 'var(--text)',
+            }}
+          >
+            <thead>
+              {table.getHeaderGroups().map((hg) => (
+                <tr
+                  key={hg.id}
+                  style={{
+                    borderBottom: '1px solid var(--border)',
+                    background: 'var(--table-row-alt-bg)',
+                    boxShadow: '0 1px 0 0 var(--border)',
+                  }}
+                >
+                  {hg.headers.map((h) => (
+                    <th
+                      key={h.id}
+                      style={{
+                        padding: '8px 12px',
+                        fontWeight: 600,
+                        color: 'var(--muted)',
+                        textAlign: h.column.columnDef.meta?.align || 'left',
+                        background: 'var(--table-row-alt-bg)',
+                        position: 'sticky',
+                        top: 0,
+                        zIndex: 1,
+                      }}
+                    >
+                      {flexRender(h.column.columnDef.header, h.getContext())}
+                    </th>
+                  ))}
+                </tr>
+              ))}
+            </thead>
+            <tbody>
+              {rows.map((row) => (
+                <tr
+                  key={row.id}
+                  style={{
+                    borderBottom: '1px solid var(--border)',
+                  }}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <td
+                      key={cell.id}
+                      style={{
+                        padding: '8px 12px',
+                        color: 'var(--text)',
+                        textAlign: cell.column.columnDef.meta?.align || 'left',
+                      }}
+                    >
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+      {!loading && hasMore && (
+        <div style={{ padding: '12px 0', textAlign: 'center' }}>
+          <span className="muted" style={{ fontSize: 12 }}>向下滚动以加载更多...</span>
+        </div>
+      )}
+    </div>
+  );
+
+  if (!open) return null;
+
+  if (isMobile) {
+    return (
+      <Drawer open={open} onOpenChange={handleOpenChange} direction="bottom">
+        <DrawerContent
+          className="glass"
+          defaultHeight="70vh"
+          minHeight="40vh"
+          maxHeight="90vh"
+        >
+          <DrawerHeader className="flex flex-row items-center justify-between gap-2 py-3">
+            <DrawerTitle className="flex items-center gap-2.5 text-left">
+              <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="flex-1 px-4 pb-4">
+            {body}
+          </div>
+        </DrawerContent>
+      </Drawer>
+    );
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent
+        showCloseButton={false}
+        className="glass card modal"
+        overlayClassName="modal-overlay"
+        overlayStyle={{ zIndex: 9998 }}
+        style={{
+          maxWidth: '520px',
+          width: '90vw',
+          maxHeight: '80vh',
+          display: 'flex',
+          flexDirection: 'column',
+          zIndex: 9999,
+        }}
+      >
+        <DialogTitle className="sr-only">历史净值</DialogTitle>
+        {header}
+        {body}
+      </DialogContent>
+    </Dialog>
+  );
+}
+

app/components/FundTrendChart.jsx

@@ -16,7 +16,8 @@ import {
   Filler
 } from 'chart.js';
 import { Line } from 'react-chartjs-2';
-import {cachedRequest} from "../lib/cacheRequest";
+import { cachedRequest } from '../lib/cacheRequest';
+import FundHistoryNetValue from './FundHistoryNetValue';
 
 ChartJS.register(
   CategoryScale,
@@ -54,13 +55,20 @@ function getChartThemeColors(theme) {
   return CHART_COLORS[theme] || CHART_COLORS.dark;
 }
 
-export default function FundTrendChart({ code, isExpanded, onToggleExpand, transactions = [], theme = 'dark' }) {
-  const [range, setRange] = useState('1m');
+export default function FundTrendChart({ code, isExpanded, onToggleExpand, transactions = [], theme = 'dark', hideHeader = false }) {
+  const [range, setRange] = useState('3m');
   const [data, setData] = useState([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
   const chartRef = useRef(null);
   const hoverTimeoutRef = useRef(null);
+  const clearActiveIndexRef = useRef(null);
+  const [hiddenGrandSeries, setHiddenGrandSeries] = useState(() => new Set());
+  const [activeIndex, setActiveIndex] = useState(null);
+
+  useEffect(() => {
+    clearActiveIndexRef.current = () => setActiveIndex(null);
+  });
 
   const chartColors = useMemo(() => getChartThemeColors(theme), [theme]);
 
@@ -118,10 +126,15 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
   const lineColor = change >= 0 ? upColor : downColor;
   const primaryColor = chartColors.primary;
 
+  const percentageData = useMemo(() => {
+    if (!data.length) return [];
+    const firstValue = data[0].value ?? 1;
+    return data.map(d => ((d.value - firstValue) / firstValue) * 100);
+  }, [data]);
+
   const chartData = useMemo(() => {
-    // Calculate percentage change based on the first data point
-    const firstValue = data.length > 0 ? data[0].value : 1;
-    const percentageData = data.map(d => ((d.value - firstValue) / firstValue) * 100);
+    // Data_grandTotal：在 fetchFundHistory 中解析为 data.grandTotalSeries 数组
+    const grandTotalSeries = Array.isArray(data.grandTotalSeries) ? data.grandTotalSeries : [];
 
     // Map transaction dates to chart indices
     const dateToIndex = new Map(data.map((d, i) => [d.date, i]));
@@ -142,12 +155,65 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
         }
     });
 
+    // 将 Data_grandTotal 的多条曲线按日期对齐到主 labels 上
+    const labels = data.map(d => d.date);
+    // 对比线颜色：避免与主线红/绿（upColor/downColor）重复
+    // 第三条对比线需要在亮/暗主题下都足够清晰，因此使用高对比的橙色强调
+    const grandAccent3 = theme === 'light' ? '#f97316' : '#fb923c';
+    const grandColors = [
+      primaryColor,
+      chartColors.muted,
+      grandAccent3,
+      chartColors.text,
+    ];
+    // 隐藏第一条对比线（数据与图示）；第二条用原第一条颜色，第三条用原第二条，顺延
+    const visibleGrandSeries = grandTotalSeries.filter((_, idx) => idx > 0);
+    const grandDatasets = visibleGrandSeries.map((series, displayIdx) => {
+      const color = grandColors[displayIdx % grandColors.length];
+      const idx = displayIdx + 1; // 原始索引，用于 hiddenGrandSeries 的 key
+      const key = `${series.name || 'series'}_${idx}`;
+      const isHidden = hiddenGrandSeries.has(key);
+      const pointsByDate = new Map(series.points.map(p => [p.date, p.value]));
+
+      // 方案 2：将对比线同样归一到当前区间首日，展示为“相对本区间首日的累计收益率（百分点变化）”
+      let baseValue = null;
+      for (const date of labels) {
+        const v = pointsByDate.get(date);
+        if (typeof v === 'number' && Number.isFinite(v)) {
+          baseValue = v;
+          break;
+        }
+      }
+
+      const seriesData = labels.map(date => {
+        if (isHidden || baseValue == null) return null;
+        const v = pointsByDate.get(date);
+        if (typeof v !== 'number' || !Number.isFinite(v)) return null;
+        // Data_grandTotal 中的 value 已是百分比，这里按区间首日做“差值”，保持同一坐标含义（相对区间首日的收益率变化）
+        return v - baseValue;
+      });
+
+      return {
+        type: 'line',
+        label: series.name || '累计收益率',
+        data: seriesData,
+        borderColor: color,
+        backgroundColor: color,
+        borderWidth: 1.5,
+        pointRadius: 0,
+        pointHoverRadius: 3,
+        fill: false,
+        tension: 0.2,
+        order: 2,
+      };
+    });
+
     return {
       labels: data.map(d => d.date),
       datasets: [
         {
           type: 'line',
-          label: '涨跌幅',
+          label: '本基金',
           data: percentageData,
           borderColor: lineColor,
           backgroundColor: (context) => {
@@ -164,9 +230,11 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
           tension: 0.2,
           order: 2
         },
+        ...(['1y', '3y', 'all'].includes(range) ? [] : grandDatasets),
         {
           type: 'line', // Use line type with showLine: false to simulate scatter on Category scale
           label: '买入',
+          isTradePoint: true,
           data: buyPoints,
           borderColor: '#ffffff',
           borderWidth: 1,
@@ -180,6 +248,7 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
         {
           type: 'line',
           label: '卖出',
+          isTradePoint: true,
           data: sellPoints,
           borderColor: '#ffffff',
           borderWidth: 1,
@@ -192,7 +261,7 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
         }
       ]
     };
-  }, [data, transactions, lineColor, primaryColor, upColor]);
+  }, [data, transactions, lineColor, primaryColor, upColor, chartColors, theme, hiddenGrandSeries, percentageData, range]);
 
   const options = useMemo(() => {
     const colors = getChartThemeColors(theme);
@@ -264,9 +333,22 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
           target.style.cursor = hasActive ? 'crosshair' : 'default';
         }
 
+        // 记录当前激活的横轴索引，用于图示下方展示对应百分比
+        if (Array.isArray(chartElement) && chartElement.length > 0) {
+          const idx = chartElement[0].index;
+          setActiveIndex(typeof idx === 'number' ? idx : null);
+        } else {
+          setActiveIndex(null);
+        }
+
         // 仅用于桌面端 hover 改变光标，不在这里做 2 秒清除，避免移动端 hover 事件不稳定
       },
-      onClick: () => {}
+      onClick: (_event, elements) => {
+        if (Array.isArray(elements) && elements.length > 0) {
+          const idx = elements[0].index;
+          setActiveIndex(typeof idx === 'number' ? idx : null);
+        }
+      }
     };
   }, [theme]);
 
@@ -300,6 +382,7 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
             chart.tooltip.setActiveElements([], { x: 0, y: 0 });
           }
           chart.update();
+          clearActiveIndexRef.current?.();
         }, 2000);
       }
     },
@@ -373,27 +456,35 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
         activeElements = chart.getActiveElements();
       }
 
+      const isBuyOrSellDataset = (ds) =>
+        !!ds && (ds.isTradePoint === true || ds.label === '买入' || ds.label === '卖出');
+
       // 1. Draw default labels for first buy and sell points only when NOT focused/hovering
-      // Index 1 is Buy, Index 2 is Sell
-      if (!activeElements?.length && datasets[1] && datasets[1].data) {
-          const firstBuyIndex = datasets[1].data.findIndex(v => v !== null && v !== undefined);
-          if (firstBuyIndex !== -1) {
-              let sellIndex = -1;
-              if (datasets[2] && datasets[2].data) {
-                  sellIndex = datasets[2].data.findIndex(v => v !== null && v !== undefined);
-              }
-              const isCollision = (firstBuyIndex === sellIndex);
-              drawPointLabel(1, firstBuyIndex, '买入', primaryColor, '#ffffff', isCollision ? -20 : 0);
+      // datasets 顺序是动态的：主线(0) + 对比线(若干) + 买入 + 卖出
+      const buyDatasetIndex = datasets.findIndex(ds => ds?.label === '买入' || (ds?.isTradePoint === true && ds?.label === '买入'));
+      const sellDatasetIndex = datasets.findIndex(ds => ds?.label === '卖出' || (ds?.isTradePoint === true && ds?.label === '卖出'));
+
+      if (!activeElements?.length && buyDatasetIndex !== -1 && datasets[buyDatasetIndex]?.data) {
+        const firstBuyIndex = datasets[buyDatasetIndex].data.findIndex(v => v !== null && v !== undefined);
+        if (firstBuyIndex !== -1) {
+          let sellIndex = -1;
+          if (sellDatasetIndex !== -1 && datasets[sellDatasetIndex]?.data) {
+            sellIndex = datasets[sellDatasetIndex].data.findIndex(v => v !== null && v !== undefined);
           }
+          const isCollision = (firstBuyIndex === sellIndex);
+          drawPointLabel(buyDatasetIndex, firstBuyIndex, '买入', primaryColor, '#ffffff', isCollision ? -20 : 0);
+        }
       }
-      if (!activeElements?.length && datasets[2] && datasets[2].data) {
-          const firstSellIndex = datasets[2].data.findIndex(v => v !== null && v !== undefined);
-          if (firstSellIndex !== -1) {
-              drawPointLabel(2, firstSellIndex, '卖出', '#f87171');
-          }
+
+      if (!activeElements?.length && sellDatasetIndex !== -1 && datasets[sellDatasetIndex]?.data) {
+        const firstSellIndex = datasets[sellDatasetIndex].data.findIndex(v => v !== null && v !== undefined);
+        if (firstSellIndex !== -1) {
+          drawPointLabel(sellDatasetIndex, firstSellIndex, '卖出', '#f87171');
+        }
       }
 
       // 2. Handle active elements (hover crosshair)
+      // 始终保留十字线与 X/Y 坐标轴对应标签（坐标参照）
       if (activeElements && activeElements.length) {
         const activePoint = activeElements[0];
         const x = activePoint.element.x;
@@ -424,64 +515,62 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
         ctx.textAlign = 'center';
         ctx.textBaseline = 'middle';
 
-        // Draw Axis Labels based on the first point (main line)
-        const datasetIndex = activePoint.datasetIndex;
-        const index = activePoint.index;
-
+        // Draw Axis Labels：始终使用主线（净值涨跌幅，索引 0）作为数值来源，
+        // 避免对比线在悬停时显示自己的数值标签
+        const baseIndex = activePoint.index;
         const labels = chart.data.labels;
+        const mainDataset = datasets[0];
 
-        if (labels && datasets && datasets[datasetIndex] && datasets[datasetIndex].data) {
-           const dateStr = labels[index];
-           const value = datasets[datasetIndex].data[index];
+        if (labels && mainDataset && Array.isArray(mainDataset.data)) {
+          const dateStr = labels[baseIndex];
+          const value = mainDataset.data[baseIndex];
 
-           if (dateStr !== undefined && value !== undefined) {
-              // X axis label (date) with boundary clamping
-               const textWidth = ctx.measureText(dateStr).width + 8;
-               const chartLeft = chart.scales.x.left;
-               const chartRight = chart.scales.x.right;
-               let labelLeft = x - textWidth / 2;
-               if (labelLeft < chartLeft) labelLeft = chartLeft;
-               if (labelLeft + textWidth > chartRight) labelLeft = chartRight - textWidth;
-               const labelCenterX = labelLeft + textWidth / 2;
-               ctx.fillStyle = primaryColor;
-               ctx.fillRect(labelLeft, bottomY, textWidth, 16);
-               ctx.fillStyle = colors.crosshairText;
-               ctx.fillText(dateStr, labelCenterX, bottomY + 8);
+          if (dateStr !== undefined && value !== undefined) {
+            // X axis label (date) with boundary clamping
+            const textWidth = ctx.measureText(dateStr).width + 8;
+            const chartLeft = chart.scales.x.left;
+            const chartRight = chart.scales.x.right;
+            let labelLeft = x - textWidth / 2;
+            if (labelLeft < chartLeft) labelLeft = chartLeft;
+            if (labelLeft + textWidth > chartRight) labelLeft = chartRight - textWidth;
+            const labelCenterX = labelLeft + textWidth / 2;
+            ctx.fillStyle = primaryColor;
+            ctx.fillRect(labelLeft, bottomY, textWidth, 16);
+            ctx.fillStyle = colors.crosshairText;
+            ctx.fillText(dateStr, labelCenterX, bottomY + 8);
 
-               // Y axis label (value)
-               const valueStr = (typeof value === 'number' ? value.toFixed(2) : value) + '%';
-               const valWidth = ctx.measureText(valueStr).width + 8;
-               ctx.fillStyle = primaryColor;
-               ctx.fillRect(leftX, y - 8, valWidth, 16);
-               ctx.fillStyle = colors.crosshairText;
-               ctx.textAlign = 'center';
-               ctx.fillText(valueStr, leftX + valWidth / 2, y);
-           }
+            // Y axis label (value) — 始终基于主线百分比
+            const valueStr = (typeof value === 'number' ? value.toFixed(2) : value) + '%';
+            const valWidth = ctx.measureText(valueStr).width + 8;
+            ctx.fillStyle = primaryColor;
+            ctx.fillRect(leftX, y - 8, valWidth, 16);
+            ctx.fillStyle = colors.crosshairText;
+            ctx.textAlign = 'center';
+            ctx.fillText(valueStr, leftX + valWidth / 2, y);
+          }
         }
 
-        // Check for collision between Buy (1) and Sell (2) in active elements
-        const activeBuy = activeElements.find(e => e.datasetIndex === 1);
-        const activeSell = activeElements.find(e => e.datasetIndex === 2);
+        // Check for collision between Buy and Sell in active elements
+        const activeBuy = activeElements.find(e => datasets?.[e.datasetIndex]?.label === '买入');
+        const activeSell = activeElements.find(e => datasets?.[e.datasetIndex]?.label === '卖出');
         const isCollision = activeBuy && activeSell && activeBuy.index === activeSell.index;
 
-        // Iterate through all active points to find transaction points and draw their labels
+        // Iterate through active points，仅为买入/卖出绘制标签
         activeElements.forEach(element => {
-            const dsIndex = element.datasetIndex;
-            // Only for transaction datasets (index > 0)
-            if (dsIndex > 0 && datasets[dsIndex]) {
-                const label = datasets[dsIndex].label;
-                // Determine background color based on dataset index
-                // 1 = Buy (主题色), 2 = Sell (与折线图红色一致)
-                const bgColor = dsIndex === 1 ? primaryColor : colors.danger;
+          const dsIndex = element.datasetIndex;
+          const ds = datasets?.[dsIndex];
+          if (!isBuyOrSellDataset(ds)) return;
 
-                // If collision, offset Buy label upwards
-                let yOffset = 0;
-                if (isCollision && dsIndex === 1) {
-                    yOffset = -20;
-                }
+          const label = ds.label;
+          const bgColor = label === '买入' ? primaryColor : colors.danger;
 
-                drawPointLabel(dsIndex, element.index, label, bgColor, '#ffffff', yOffset);
-            }
+          // 如果买入/卖出在同一天，买入标签上移避免遮挡
+          let yOffset = 0;
+          if (isCollision && label === '买入') {
+            yOffset = -20;
+          }
+
+          drawPointLabel(dsIndex, element.index, label, bgColor, '#ffffff', yOffset);
         });
 
         ctx.restore();
@@ -490,79 +579,278 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
   }];
   }, [theme]); // theme 变化时重算以应用亮色/暗色坐标轴与 crosshair
 
-  return (
-    <div style={{ marginTop: 16 }} onClick={(e) => e.stopPropagation()}>
+  const lastIndex = data.length > 0 ? data.length - 1 : null;
+  const currentIndex = activeIndex != null && activeIndex < data.length ? activeIndex : lastIndex;
+
+  const chartBlock = (
+    <>
+      {/* 顶部图示：说明不同颜色/标记代表的含义 */}
       <div
-        style={{ marginBottom: 8, cursor: 'pointer', userSelect: 'none' }}
-        className="title"
-        onClick={onToggleExpand}
+        className="row"
+        style={{ marginBottom: 8, gap: 12, alignItems: 'center', flexWrap: 'wrap', fontSize: 11 }}
       >
-        <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"
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+            <span
               style={{
-                transform: !isExpanded ? 'rotate(-90deg)' : 'rotate(0deg)',
-                transition: 'transform 0.2s ease'
+                width: 10,
+                height: 2,
+                borderRadius: 999,
+                backgroundColor: lineColor
               }}
             />
+            <span className="muted">本基金</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>
+          {currentIndex != null && percentageData[currentIndex] !== undefined && (
+            <span
+              className="muted"
+              style={{
+                fontSize: 10,
+                fontVariantNumeric: 'tabular-nums',
+                paddingLeft: 14,
+              }}
+            >
+              {percentageData[currentIndex].toFixed(2)}%
+            </span>
           )}
         </div>
+        {Array.isArray(data.grandTotalSeries) &&
+          !['1y', '3y', 'all'].includes(range) &&
+          data.grandTotalSeries
+            .filter((_, idx) => idx > 0)
+            .map((series, displayIdx) => {
+              const idx = displayIdx + 1;
+              const legendAccent3 = theme === 'light' ? '#f97316' : '#fb923c';
+              const legendColors = [
+                primaryColor,
+                chartColors.muted,
+                legendAccent3,
+                chartColors.text,
+              ];
+              const color = legendColors[displayIdx % legendColors.length];
+              const key = `${series.name || 'series'}_${idx}`;
+            const isHidden = hiddenGrandSeries.has(key);
+            let valueText = '--';
+            if (!isHidden && currentIndex != null && data[currentIndex]) {
+              const targetDate = data[currentIndex].date;
+
+              // 与折线一致：对比线显示“相对当前区间首日”的累计收益率变化
+              const pointsArray = Array.isArray(series.points) ? series.points : [];
+              const pointsByDate = new Map(pointsArray.map(p => [p.date, p.value]));
+
+              let baseValue = null;
+              for (const d of data) {
+                const v = pointsByDate.get(d.date);
+                if (typeof v === 'number' && Number.isFinite(v)) {
+                  baseValue = v;
+                  break;
+                }
+              }
+
+              // 注意：Data_grandTotal 某些对比线可能不包含区间最后一天的点。
+              // 旧逻辑是对 `targetDate` 做严格匹配，缺点就会得到 `--`。
+              // 新逻辑：找不到精确日期时，回退到该对比线在区间内最近的可用日期。
+              let rawPoint = pointsByDate.get(targetDate);
+              if ((rawPoint === undefined || rawPoint === null) && baseValue != null) {
+                for (let i = currentIndex; i >= 0; i--) {
+                  const d = data[i];
+                  if (!d) continue;
+                  const v = pointsByDate.get(d.date);
+                  if (typeof v === 'number' && Number.isFinite(v)) {
+                    rawPoint = v;
+                    break;
+                  }
+                }
+              }
+
+              if (baseValue != null && typeof rawPoint === 'number' && Number.isFinite(rawPoint)) {
+                const normalized = rawPoint - baseValue;
+                valueText = `${normalized.toFixed(2)}%`;
+              }
+            }
+            return (
+              <div
+                key={series.name || idx}
+                style={{ display: 'flex', flexDirection: 'column', gap: 2 }}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setHiddenGrandSeries(prev => {
+                    const next = new Set(prev);
+                    if (next.has(key)) {
+                      next.delete(key);
+                    } else {
+                      next.add(key);
+                    }
+                    return next;
+                  });
+                }}
+              >
+                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                  <span
+                    style={{
+                      width: 10,
+                      height: 2,
+                      borderRadius: 999,
+                      backgroundColor: isHidden ? '#4b5563' : color,
+                    }}
+                  />
+                  <span
+                    className="muted"
+                    style={{ opacity: isHidden ? 0.5 : 1 }}
+                  >
+                    {series.name}
+                  </span>
+                  <button
+                    className="muted"
+                    type="button"
+                    style={{
+                      border: 'none',
+                      padding: 0,
+                      background: 'transparent',
+                      cursor: 'pointer',
+                      display: 'flex',
+                      alignItems: 'center',
+                    }}
+                  >
+                    <svg
+                      width="12"
+                      height="12"
+                      viewBox="0 0 24 24"
+                      aria-hidden="true"
+                      style={{ opacity: isHidden ? 0.4 : 0.9 }}
+                    >
+                      <path
+                        d="M12 5C7 5 2.73 8.11 1 12c1.73 3.89 6 7 11 7s9.27-3.11 11-7c-1.73-3.89-6-7-11-7zm0 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="1.6"
+                      />
+                      {isHidden && (
+                        <line
+                          x1="4"
+                          y1="20"
+                          x2="20"
+                          y2="4"
+                          stroke="currentColor"
+                          strokeWidth="1.6"
+                        />
+                      )}
+                    </svg>
+                  </button>
+                </div>
+                <span
+                  className="muted"
+                  style={{
+                    fontSize: 10,
+                    fontVariantNumeric: 'tabular-nums',
+                    paddingLeft: 14,
+                    minHeight: 14,
+                    visibility: isHidden || valueText === '--' ? 'hidden' : 'visible',
+                  }}
+                >
+                  {valueText}
+                </span>
+              </div>
+            );
+          })}
       </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 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>
-              )}
-
-              {!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>
-
-            <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); }}
-                >
-                  {r.label}
-                </button>
-              ))}
-            </div>
-          </motion.div>
+      <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>
         )}
-      </AnimatePresence>
+
+        {!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>
+
+      <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); }}
+          >
+            {r.label}
+          </button>
+        ))}
+      </div>
+
+      <FundHistoryNetValue code={code} range={range} theme={theme} />
+    </>
+  );
+
+  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>
+      )}
+
+      {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,389 @@
+'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,
+  isSticky = false,
+  onToggleSticky,
+  masked,
+  onToggleMasked,
+  marketIndexAccordionHeight,
+  navbarHeight
+}) {
+  const [showPercent, setShowPercent] = useState(true);
+  const [isMasked, setIsMasked] = useState(masked ?? 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 += Math.round(profit.amount * 100) / 100;
+        if (profit.profitToday != null) {
+          // 先累加原始当日收益，最后统一做一次四舍五入，避免逐笔四舍五入造成的总计误差
+          totalProfitToday += profit.profitToday;
+          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 roundedTotalProfitToday = Math.round(totalProfitToday * 100) / 100;
+
+    const returnRate = totalCost > 0 ? (totalHoldingReturn / totalCost) * 100 : 0;
+
+    return {
+      totalAsset,
+      totalProfitToday: roundedTotalProfitToday,
+      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,
+  ]);
+
+  const style = useMemo(()=>{
+    const style = {};
+    if (isSticky) {
+      style.top = stickyTop + 14;
+    }else if(!marketIndexAccordionHeight) {
+      style.marginTop = navbarHeight;
+    }
+    return style;
+  },[isSticky, stickyTop, marketIndexAccordionHeight, navbarHeight])
+
+  if (!summary.hasHolding) return null;
+
+  return (
+    <div
+      className={isSticky ? 'group-summary-sticky' : ''}
+      style={style}
+    >
+      <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={() => {
+            onToggleSticky?.(!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,65 @@
 '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, pendingCount }) {
+  const handleOpenChange = (open) => {
+    if (!open) {
+      onClose?.();
+    }
+  };
 
-export default function HoldingActionModal({ fund, onClose, onAction, hasHistory }) {
   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,
+                position: 'relative',
+              }}
+              title="查看交易记录"
+            >
+              <span>📜</span>
+              <span>交易记录</span>
+              {pendingCount > 0 && (
+                <span
+                  style={{
+                    position: 'absolute',
+                    top: -4,
+                    right: -4,
+                    width: 10,
+                    height: 10,
+                    borderRadius: '50%',
+                    backgroundColor: '#ef4444',
+                    border: '2px solid var(--background)',
+                  }}
+                />
+              )}
+            </button>
           </div>
           <button className="icon-button" onClick={onClose} style={{ border: 'none', background: 'transparent' }}>
             <CloseIcon width="20" height="20" />
@@ -92,13 +104,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,18 +1,45 @@
 'use client';
 
-import { useEffect, useState } from 'react';
-import { motion } from 'framer-motion';
-import { CloseIcon, SettingsIcon } from './Icons';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+import { CloseIcon, SettingsIcon, SwitchIcon } from './Icons';
+import { DatePicker } from './Common';
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+} from '@/components/ui/dialog';
 
-export default function HoldingEditModal({ fund, holding, onClose, onSave }) {
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+const TZ = typeof Intl !== 'undefined' && Intl.DateTimeFormat
+  ? (Intl.DateTimeFormat().resolvedOptions().timeZone || 'Asia/Shanghai')
+  : 'Asia/Shanghai';
+
+export default function HoldingEditModal({ fund, holding, onClose, onSave, onOpenTrade }) {
   const [mode, setMode] = useState('amount'); // 'amount' | 'share'
+  const [dateMode, setDateMode] = useState('date'); // 'date' | 'days'
 
   const dwjz = fund?.dwjz || fund?.gsz || 0;
+  const dwjzRef = useRef(dwjz);
+  useEffect(() => {
+    dwjzRef.current = dwjz;
+  }, [dwjz]);
 
   const [share, setShare] = useState('');
   const [cost, setCost] = useState('');
   const [amount, setAmount] = useState('');
   const [profit, setProfit] = useState('');
+  const [firstPurchaseDate, setFirstPurchaseDate] = useState('');
+  const [holdingDaysInput, setHoldingDaysInput] = useState('');
+
+  const holdingSig = useMemo(() => {
+    if (!holding) return '';
+    return `${holding.id ?? ''}|${holding.share ?? ''}|${holding.cost ?? ''}|${holding.firstPurchaseDate ?? ''}`;
+  }, [holding]);
 
   useEffect(() => {
     if (holding) {
@@ -20,15 +47,25 @@ export default function HoldingEditModal({ fund, holding, onClose, onSave }) {
       const c = holding.cost || 0;
       setShare(String(s));
       setCost(String(c));
+      setFirstPurchaseDate(holding.firstPurchaseDate || '');
 
-      if (dwjz > 0) {
-        const a = s * dwjz;
-        const p = (dwjz - c) * s;
+      if (holding.firstPurchaseDate) {
+        const days = dayjs.tz(undefined, TZ).diff(dayjs.tz(holding.firstPurchaseDate, TZ), 'day');
+        setHoldingDaysInput(days > 0 ? String(days) : '');
+      } else {
+        setHoldingDaysInput('');
+      }
+
+      const price = dwjzRef.current;
+      if (price > 0) {
+        const a = s * price;
+        const p = (price - c) * s;
         setAmount(a.toFixed(2));
         setProfit(p.toFixed(2));
       }
     }
-  }, [holding, fund, dwjz]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [holdingSig]);
 
   const handleModeChange = (newMode) => {
     if (newMode === mode) return;
@@ -58,6 +95,41 @@ export default function HoldingEditModal({ fund, holding, onClose, onSave }) {
     }
   };
 
+  const handleDateModeToggle = () => {
+    const newMode = dateMode === 'date' ? 'days' : 'date';
+    setDateMode(newMode);
+
+    if (newMode === 'days' && firstPurchaseDate) {
+      const days = dayjs.tz(undefined, TZ).diff(dayjs.tz(firstPurchaseDate, TZ), 'day');
+      setHoldingDaysInput(days > 0 ? String(days) : '');
+    } else if (newMode === 'date' && holdingDaysInput) {
+      const days = parseInt(holdingDaysInput, 10);
+      if (Number.isFinite(days) && days >= 0) {
+        const date = dayjs.tz(undefined, TZ).subtract(days, 'day').format('YYYY-MM-DD');
+        setFirstPurchaseDate(date);
+      }
+    }
+  };
+
+  const handleHoldingDaysChange = (value) => {
+    setHoldingDaysInput(value);
+    const days = parseInt(value, 10);
+    if (Number.isFinite(days) && days >= 0) {
+      const date = dayjs.tz(undefined, TZ).subtract(days, 'day').format('YYYY-MM-DD');
+      setFirstPurchaseDate(date);
+    }
+  };
+
+  const handleFirstPurchaseDateChange = (value) => {
+    setFirstPurchaseDate(value);
+    if (value) {
+      const days = dayjs.tz(undefined, TZ).diff(dayjs.tz(value, TZ), 'day');
+      setHoldingDaysInput(days > 0 ? String(days) : '');
+    } else {
+      setHoldingDaysInput('');
+    }
+  };
+
   const handleSubmit = (e) => {
     e.preventDefault();
 
@@ -78,9 +150,12 @@ export default function HoldingEditModal({ fund, holding, onClose, onSave }) {
       finalCost = finalShare > 0 ? principal / finalShare : 0;
     }
 
+    const trimmedDate = firstPurchaseDate ? firstPurchaseDate.trim() : '';
+
     onSave({
       share: finalShare,
-      cost: finalCost
+      cost: finalCost,
+      ...(trimmedDate && { firstPurchaseDate: trimmedDate })
     });
     onClose();
   };
@@ -89,29 +164,42 @@ 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" />
             <span>设置持仓</span>
+            {typeof onOpenTrade === 'function' && (
+              <button
+                type="button"
+                onClick={onOpenTrade}
+                className="button secondary"
+                style={{
+                  height: 28,
+                  padding: '0 10px',
+                  borderRadius: 999,
+                  fontSize: 12,
+                  background: 'rgba(255,255,255,0.06)',
+                  color: 'var(--primary)',
+                }}
+              >
+                今日买入？去加仓。
+              </button>
+            )}
           </div>
           <button className="icon-button" onClick={onClose} style={{ border: 'none', background: 'transparent' }}>
             <CloseIcon width="20" height="20" />
@@ -226,6 +314,49 @@ export default function HoldingEditModal({ fund, holding, onClose, onSave }) {
             </>
           )}
 
+          <div className="form-group" style={{ marginBottom: 24 }}>
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
+              <span className="muted" style={{ fontSize: '14px' }}>
+                {dateMode === 'date' ? '首次买入日期' : '持有天数'}
+              </span>
+              <button
+                type="button"
+                onClick={handleDateModeToggle}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 4,
+                  background: 'rgba(255,255,255,0.06)',
+                  border: 'none',
+                  borderRadius: 6,
+                  padding: '4px 8px',
+                  fontSize: '12px',
+                  color: 'var(--primary)',
+                  cursor: 'pointer',
+                }}
+                title={dateMode === 'date' ? '切换到持有天数' : '切换到日期'}
+              >
+                <SwitchIcon />
+                {dateMode === 'date' ? '按天数' : '按日期'}
+              </button>
+            </div>
+            {dateMode === 'date' ? (
+              <DatePicker value={firstPurchaseDate} onChange={handleFirstPurchaseDateChange} position="top" />
+            ) : (
+              <input
+                type="number"
+                inputMode="numeric"
+                min="0"
+                step="1"
+                className="input"
+                value={holdingDaysInput}
+                onChange={(e) => handleHoldingDaysChange(e.target.value)}
+                placeholder="请输入持有天数"
+                style={{ width: '100%' }}
+              />
+            )}
+          </div>
+
           <div className="row" style={{ gap: 12 }}>
             <button type="button" className="button secondary" onClick={onClose} style={{ flex: 1, background: 'rgba(255,255,255,0.05)', color: 'var(--text)' }}>取消</button>
             <button
@@ -238,7 +369,7 @@ export default function HoldingEditModal({ fund, holding, onClose, onSave }) {
             </button>
           </div>
         </form>
-      </motion.div>
-    </motion.div>
+      </DialogContent>
+    </Dialog>
   );
 }

app/components/Icons.jsx

@@ -260,3 +260,20 @@ export function MoonIcon(props) {
     </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,6 +1,9 @@
 'use client';
 
+import Image from 'next/image';
+import { InputOTP, InputOTPGroup, InputOTPSlot } from '@/components/ui/input-otp';
 import { MailIcon } from './Icons';
+import githubImg from "../assets/github.svg";
 
 export default function LoginModal({
   onClose,
@@ -12,7 +15,8 @@ export default function LoginModal({
   loginError,
   loginSuccess,
   handleSendOtp,
-  handleVerifyEmailOtp
+  handleVerifyEmailOtp,
+  handleGithubLogin
 }) {
   return (
     <div
@@ -56,15 +60,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 && (
@@ -77,7 +87,6 @@ export default function LoginModal({
               type="button"
               className="button secondary"
               onClick={onClose}
-              disabled={loginLoading}
             >
               取消
             </button>
@@ -91,6 +100,53 @@ export default function LoginModal({
             </button>
           </div>
         </form>
+
+        {handleGithubLogin && !loginSuccess && (
+          <>
+            <div
+              className="login-divider"
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                margin: '20px 0',
+                gap: 12,
+              }}
+            >
+              <div style={{ flex: 1, height: 1, background: 'var(--border)' }} />
+              <span className="muted" style={{ fontSize: '12px', whiteSpace: 'nowrap' }}>或使用</span>
+              <div style={{ flex: 1, height: 1, background: 'var(--border)' }} />
+            </div>
+
+            <button
+              type="button"
+              className="github-login-btn"
+              onClick={handleGithubLogin}
+              disabled={loginLoading}
+              style={{
+                width: '100%',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: 10,
+                padding: '12px 16px',
+                border: '1px solid var(--border)',
+                borderRadius: 8,
+                background: 'var(--bg)',
+                color: 'var(--text)',
+                cursor: loginLoading ? 'not-allowed' : 'pointer',
+                fontSize: '14px',
+                fontWeight: 500,
+                opacity: loginLoading ? 0.6 : 1,
+                transition: 'all 0.2s ease',
+              }}
+            >
+          <span className="github-icon-wrap">
+            <Image unoptimized alt="项目Github地址" src={githubImg} style={{ width: '24px', height: '24px', cursor: 'pointer' }} onClick={() => window.open("https://github.com/hzm0321/real-time-fund")} />
+          </span>
+              <span>使用 GitHub 登录</span>
+            </button>
+          </>
+        )}
       </div>
     </div>
   );

app/components/MarketIndexAccordion.jsx

@@ -0,0 +1,505 @@
+'use client';
+
+import { useEffect, useState, useMemo, useRef } from 'react';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@/components/ui/accordion';
+import { fetchMarketIndices } from '@/app/api/fund';
+import { ChevronRightIcon } from 'lucide-react';
+import { SettingsIcon } from './Icons';
+import { cn } from '@/lib/utils';
+import MarketSettingModal from './MarketSettingModal';
+
+/** 简单伪随机，用于稳定迷你图形状 */
+function seeded(seed) {
+  return () => {
+    seed = (seed * 9301 + 49297) % 233280;
+    return seed / 233280;
+  };
+}
+
+/** 迷你走势：优先展示当日分时数据，失败时退回占位折线 */
+function MiniTrendLine({ changePercent, code, className }) {
+  const isDown = changePercent <= 0;
+  const width = 80;
+  const height = 28;
+  const pad = 3;
+  const innerH = height - 2 * pad;
+  const innerW = width - 2 * pad;
+
+  // 占位伪走势（无真实历史数据）
+  const fallbackPath = useMemo(() => {
+    const points = 12;
+    const rnd = seeded(Math.abs(Math.floor(changePercent * 100)) + 1);
+    const arr = Array.from({ length: points }, (_, i) => {
+      const t = i / (points - 1);
+      const x = pad + t * innerW;
+      const y = isDown
+        ? pad + innerH * (1 - t * 0.6) - (rnd() * 4 - 2)
+        : pad + innerH * (0.4 + t * 0.6) + (rnd() * 4 - 2);
+      return [x, Math.max(pad, Math.min(height - pad, y))];
+    });
+    return arr.map(([x, y], i) => `${i === 0 ? 'M' : 'L'} ${x} ${y}`).join(' ');
+  }, [changePercent, isDown, innerH, innerW, pad, height]);
+
+  // 当日分时真实走势 path
+  const [realPath, setRealPath] = useState(null);
+
+  useEffect(() => {
+    if (!code || typeof window === 'undefined' || typeof document === 'undefined') {
+      setRealPath(null);
+      return;
+    }
+
+    let cancelled = false;
+    const varName = `min_data_${code}`;
+    const url = `https://web.ifzq.gtimg.cn/appstock/app/minute/query?_var=${varName}&code=${code}&_=${Date.now()}`;
+
+    const script = document.createElement('script');
+    script.src = url;
+    script.async = true;
+
+    const cleanup = () => {
+      if (document.body && document.body.contains(script)) {
+        document.body.removeChild(script);
+      }
+      try {
+        if (window[varName]) {
+          delete window[varName];
+        }
+      } catch (e) {
+        // ignore
+      }
+    };
+
+    script.onload = () => {
+      if (cancelled) {
+        cleanup();
+        return;
+      }
+      try {
+        const raw = window[varName];
+        const series =
+          raw &&
+          raw.data &&
+          raw.data[code] &&
+          raw.data[code].data &&
+          Array.isArray(raw.data[code].data.data)
+            ? raw.data[code].data.data
+            : null;
+        if (!series || !series.length) {
+          setRealPath(null);
+          return;
+        }
+
+        // 解析 "HHMM price volume amount" 行，只关心 price
+        const points = series
+          .map((row) => {
+            const parts = String(row).split(' ');
+            const price = parseFloat(parts[1]);
+            if (!Number.isFinite(price)) return null;
+            return { price };
+          })
+          .filter(Boolean);
+
+        if (!points.length) {
+          setRealPath(null);
+          return;
+        }
+
+        const minP = points.reduce((m, p) => (p.price < m ? p.price : m), points[0].price);
+        const maxP = points.reduce((m, p) => (p.price > m ? p.price : m), points[0].price);
+        const span = maxP - minP || 1;
+
+        const n = points.length;
+        const pathPoints = points.map((p, idx) => {
+          const t = n > 1 ? idx / (n - 1) : 0;
+          const x = pad + t * innerW;
+          const norm = (p.price - minP) / span;
+          const y = pad + (1 - norm) * innerH;
+          return [x, Math.max(pad, Math.min(height - pad, y))];
+        });
+
+        const d = pathPoints
+          .map(([x, y], i) => `${i === 0 ? 'M' : 'L'} ${x} ${y}`)
+          .join(' ');
+        setRealPath(d);
+      } finally {
+        cleanup();
+      }
+    };
+
+    script.onerror = () => {
+      if (!cancelled) {
+        setRealPath(null);
+      }
+      cleanup();
+    };
+
+    document.body.appendChild(script);
+
+    return () => {
+      cancelled = true;
+      cleanup();
+    };
+  }, [code, height, innerH, innerW, pad]);
+
+  const d = realPath || fallbackPath;
+  return (
+    <svg
+      width={width}
+      height={height}
+      className={cn('overflow-visible', className)}
+      aria-hidden
+    >
+      <path
+        d={d}
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className={isDown ? 'text-[var(--success)]' : 'text-[var(--danger)]'}
+      />
+    </svg>
+  );
+}
+
+function IndexCard({ item }) {
+  const isUp = item.change >= 0;
+  const colorClass = isUp ? 'text-[var(--danger)]' : 'text-[var(--success)]';
+  return (
+    <div
+      className="rounded-lg border border-[var(--border)] bg-[var(--card)] p-1.5 flex flex-col gap-0.5 w-full"
+    >
+      <div className="text-xs font-medium text-[var(--foreground)] truncate">{item.name}</div>
+      <div className={cn('text-sm font-semibold tabular-nums', colorClass)}>
+        {item.price.toFixed(2)}
+      </div>
+      <div className={cn('text-xs tabular-nums', colorClass)}>
+        {(item.change >= 0 ? '+' : '') + item.change.toFixed(2)}{' '}
+        {(item.changePercent >= 0 ? '+' : '') + item.changePercent.toFixed(2)}%
+      </div>
+      <div className="mt-0.5 flex items-center justify-center opacity-80">
+        <MiniTrendLine changePercent={item.changePercent} code={item.code} />
+      </div>
+    </div>
+  );
+}
+
+// 默认展示：上证指数、深证成指、创业板指
+const DEFAULT_SELECTED_CODES = ['sh000001', 'sz399001', 'sz399006'];
+
+export default function MarketIndexAccordion({
+  navbarHeight = 0,
+  onHeightChange,
+  isMobile,
+  onCustomSettingsChange,
+  refreshing = false,
+}) {
+  const [indices, setIndices] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [openValue, setOpenValue] = useState('');
+  const [selectedCodes, setSelectedCodes] = useState([]);
+  const [settingOpen, setSettingOpen] = useState(false);
+  const [tickerIndex, setTickerIndex] = useState(0);
+  const rootRef = useRef(null);
+  const hasInitializedSelectedCodes = useRef(false);
+
+  useEffect(() => {
+    const el = rootRef.current;
+    if (!el || typeof onHeightChange !== 'function') return;
+    const ro = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) onHeightChange(entry.contentRect.height);
+    });
+    ro.observe(el);
+    onHeightChange(el.getBoundingClientRect().height);
+    return () => {
+      ro.disconnect();
+      onHeightChange(0);
+    };
+  }, [onHeightChange, loading, indices.length]);
+
+  const loadIndices = () => {
+    let cancelled = false;
+    setLoading(true);
+    fetchMarketIndices()
+      .then((data) => {
+        if (!cancelled) setIndices(Array.isArray(data) ? data : []);
+      })
+      .catch(() => {
+        if (!cancelled) setIndices([]);
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  };
+
+  useEffect(() => {
+    // 初次挂载时加载一次指数
+    const cleanup = loadIndices();
+    return cleanup;
+  }, []);
+
+  useEffect(() => {
+    // 跟随基金刷新节奏：每次开始刷新时重新拉取指数
+    if (!refreshing) return;
+    const cleanup = loadIndices();
+    return cleanup;
+  }, [refreshing]);
+
+  // 初始化选中指数（本地偏好 > 默认集合）
+  useEffect(() => {
+    if (!indices.length || typeof window === 'undefined') return;
+    if (hasInitializedSelectedCodes.current) return;
+    try {
+      const stored = window.localStorage.getItem('marketIndexSelected');
+      const availableCodes = new Set(indices.map((it) => it.code));
+      if (stored) {
+        const parsed = JSON.parse(stored);
+        if (Array.isArray(parsed)) {
+          const filtered = parsed.filter((c) => availableCodes.has(c));
+          if (filtered.length) {
+            setSelectedCodes(filtered);
+            hasInitializedSelectedCodes.current = true;
+            return;
+          }
+        }
+      }
+      const defaults = DEFAULT_SELECTED_CODES.filter((c) => availableCodes.has(c));
+      setSelectedCodes(defaults.length ? defaults : indices.map((it) => it.code).slice(0, 3));
+    } catch {
+      setSelectedCodes(indices.map((it) => it.code).slice(0, 3));
+    }
+  }, [indices]);
+
+  // 持久化用户选择
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    if (!selectedCodes.length) return;
+    try {
+      // 本地首选 key：独立存储，便于快速读取
+      window.localStorage.setItem('marketIndexSelected', JSON.stringify(selectedCodes));
+
+      // 同步到 customSettings，便于云端同步
+      const raw = window.localStorage.getItem('customSettings');
+      const parsed = raw ? JSON.parse(raw) : {};
+      const next = parsed && typeof parsed === 'object' ? { ...parsed, marketIndexSelected: selectedCodes } : { marketIndexSelected: selectedCodes };
+      window.localStorage.setItem('customSettings', JSON.stringify(next));
+      onCustomSettingsChange?.();
+    } catch {
+      // ignore
+    }
+  }, [selectedCodes]);
+  // 用户已选择的指数列表（按 selectedCodes 顺序）
+  const visibleIndices = selectedCodes.length
+    ? selectedCodes
+        .map((code) => indices.find((it) => it.code === code))
+        .filter(Boolean)
+    : indices;
+
+  // 重置 tickerIndex 确保索引合法
+  useEffect(() => {
+    if (tickerIndex >= visibleIndices.length) {
+      setTickerIndex(0);
+    }
+  }, [visibleIndices.length, tickerIndex]);
+
+  // 收起状态下轮播展示指数
+  useEffect(() => {
+    if (!visibleIndices.length) return;
+    if (openValue === 'indices') return;
+    if (visibleIndices.length <= 1) return;
+    const timer = setInterval(() => {
+      setTickerIndex((prev) => (prev + 1) % visibleIndices.length);
+    }, 4000);
+    return () => clearInterval(timer);
+  }, [visibleIndices.length, openValue]);
+
+  const current =
+    visibleIndices.length === 0
+      ? null
+      : visibleIndices[openValue === 'indices' ? 0 : tickerIndex];
+
+  const isUp = current ? current.change >= 0 : false;
+  const colorClass = isUp ? 'text-[var(--danger)]' : 'text-[var(--success)]';
+
+  const topMargin = Number(navbarHeight) || 0;
+  const stickyStyle = {
+    marginTop: topMargin,
+    position: 'sticky',
+    top: topMargin,
+    zIndex: 10,
+    width: isMobile ? 'calc(100% + 24px)' : '100%',
+    marginLeft: isMobile ? -12 : 0,
+  };
+
+  if (loading && indices.length === 0) {
+    return (
+      <div
+        ref={rootRef}
+        className="market-index-accordion-root mt-2 mb-2 rounded-lg border border-[var(--border)] bg-[var(--card)] px-4 py-3 flex items-center justify-between"
+        style={stickyStyle}
+      >
+        <span className="text-sm text-[var(--muted-foreground)]">加载大盘指数…</span>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={rootRef}
+      className="market-index-accordion-root mt-2 mb-2 rounded-lg border border-[var(--border)] bg-[var(--card)] market-index-accordion"
+      style={stickyStyle}
+    >
+      <style jsx>{`
+        .market-index-accordion :global([data-slot="accordion-trigger"] > svg:last-of-type) {
+          display: none;
+        }
+        :global([data-theme='dark'] .market-index-accordion-root) {
+          background-color: rgba(15, 23, 42);
+        }
+        .market-index-ticker {
+          overflow: hidden;
+        }
+        .market-index-ticker-item {
+          display: inline-flex;
+          align-items: center;
+          gap: 0.75rem;
+          animation: market-index-ticker-slide 0.35s ease-out;
+        }
+        @keyframes market-index-ticker-slide {
+          0% {
+            transform: translateY(100%);
+            opacity: 0;
+          }
+          100% {
+            transform: translateY(0);
+            opacity: 1;
+          }
+        }
+      `}</style>
+      <Accordion
+        type="single"
+        collapsible
+        value={openValue}
+        onValueChange={setOpenValue}
+      >
+        <AccordionItem value="indices" className="border-b-0">
+          <AccordionTrigger
+            className="py-3 px-4 hover:no-underline hover:bg-[var(--card)] [&[data-state=open]>svg]:rotate-90"
+            style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}
+          >
+            <div className="flex flex-1 items-center gap-3 min-w-0">
+              {current ? (
+                <div className="market-index-ticker">
+                  <div
+                    key={current.code || current.name}
+                    className="market-index-ticker-item"
+                  >
+                    <span className="text-sm font-medium text-[var(--foreground)] shrink-0">
+                      {current.name}
+                    </span>
+                    <span className={cn('tabular-nums font-medium', colorClass)}>
+                      {current.price.toFixed(2)}
+                    </span>
+                    <span className={cn('tabular-nums text-sm', colorClass)}>
+                      {(current.change >= 0 ? '+' : '') + current.change.toFixed(2)}
+                    </span>
+                    <span className={cn('tabular-nums text-sm', colorClass)}>
+                      {(current.changePercent >= 0 ? '+' : '') + current.changePercent.toFixed(2)}%
+                    </span>
+                  </div>
+                </div>
+              ) : (
+                <span className="text-sm text-[var(--muted-foreground)]">暂无指数数据</span>
+              )}
+            </div>
+            <div className="flex items-center gap-4 shrink-0 pl-3">
+              <div
+                role="button"
+                tabIndex={openValue === 'indices' ? 0 : -1}
+                className="icon-button"
+                style={{
+                  border: 'none',
+                  width: '28px',
+                  height: '28px',
+                  minWidth: '28px',
+                  backgroundColor: 'transparent',
+                  color: 'var(--text)',
+                  flexShrink: 0,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  opacity: openValue === 'indices' ? 1 : 0,
+                  pointerEvents: openValue === 'indices' ? 'auto' : 'none',
+                  transition: 'opacity 0.2s ease',
+                }}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setSettingOpen(true);
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setSettingOpen(true);
+                  }
+                }}
+                aria-label="指数个性化设置"
+              >
+                <SettingsIcon width="18" height="18" />
+              </div>
+              <ChevronRightIcon
+                className={cn(
+                  'w-4 h-4 text-[var(--muted-foreground)] transition-transform',
+                  openValue === 'indices' ? 'rotate-90' : ''
+                )}
+                aria-hidden="true"
+              />
+            </div>
+          </AccordionTrigger>
+          <AccordionContent className="px-3 pb-4 pt-0">
+            <div
+              className="flex flex-wrap w-full min-w-0"
+              style={{ gap: 12 }}
+            >
+              {visibleIndices.map((item, i) => (
+                <div
+                  key={item.code || i}
+                  style={{
+                    flex: isMobile
+                      ? '0 0 calc((100% - 24px) / 3)'
+                      : '0 0 calc((100% - 48px) / 5)',
+                  }}
+                >
+                  <IndexCard item={item} />
+                </div>
+              ))}
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+      <MarketSettingModal
+        open={settingOpen}
+        onClose={() => setSettingOpen(false)}
+        isMobile={isMobile}
+        indices={indices}
+        selectedCodes={selectedCodes}
+        onChangeSelected={setSelectedCodes}
+        onResetDefault={() => {
+          const availableCodes = new Set(indices.map((it) => it.code));
+          const defaults = DEFAULT_SELECTED_CODES.filter((c) => availableCodes.has(c));
+          setSelectedCodes(defaults.length ? defaults : indices.map((it) => it.code).slice(0, 3));
+        }}
+      />
+    </div>
+  );
+}

app/components/MarketSettingModal.jsx

@@ -0,0 +1,474 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
+import { AnimatePresence, motion } from "framer-motion";
+import {
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  closestCenter,
+} from "@dnd-kit/core";
+import { restrictToParentElement } from "@dnd-kit/modifiers";
+import {
+  SortableContext,
+  rectSortingStrategy,
+  useSortable,
+  arrayMove,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerClose,
+} from "@/components/ui/drawer";
+import { CloseIcon, MinusIcon, ResetIcon, SettingsIcon } from "./Icons";
+import ConfirmModal from "./ConfirmModal";
+import { cn } from "@/lib/utils";
+
+function SortableIndexItem({ item, canRemove, onRemove, isMobile }) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: item.code });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    cursor: isDragging ? "grabbing" : "grab",
+    flex: isMobile
+      ? "0 0 calc((100% - 24px) / 3)"
+      : "0 0 calc((100% - 48px) / 5)",
+    touchAction: "none",
+    ...(isDragging && {
+      position: "relative",
+      zIndex: 10,
+      opacity: 0.9,
+      boxShadow: "0 8px 24px rgba(0,0,0,0.15)",
+    }),
+  };
+
+  const isUp = item.change >= 0;
+  const color = isUp ? "var(--danger)" : "var(--success)";
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={cn(
+        "glass card",
+        "relative flex flex-col gap-1.5 rounded-xl border border-[var(--border)] bg-[var(--card)] px-3 py-2"
+      )}
+      {...attributes}
+      {...listeners}
+    >
+      {canRemove && (
+        <button
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation();
+            onRemove(item.code);
+          }}
+          className="icon-button"
+          style={{
+            position: "absolute",
+            top: 4,
+            right: 4,
+            width: 18,
+            height: 18,
+            borderRadius: "999px",
+            backgroundColor: "rgba(255,96,96,0.1)",
+            color: "var(--danger)",
+            border: "none",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+          aria-label={`移除 ${item.name}`}
+        >
+          <MinusIcon width="10" height="10" />
+        </button>
+      )}
+      <div
+        style={{
+          fontSize: 13,
+          fontWeight: 500,
+          paddingRight: 18,
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+        }}
+      >
+        {item.name}
+      </div>
+      <div style={{ fontSize: 18, fontWeight: 600, color }}>
+        {item.price?.toFixed ? item.price.toFixed(2) : String(item.price ?? "-")}
+      </div>
+      <div style={{ fontSize: 12, color }}>
+        {(item.change >= 0 ? "+" : "") + item.change.toFixed(2)}{" "}
+        {(item.changePercent >= 0 ? "+" : "") + item.changePercent.toFixed(2)}%
+      </div>
+    </div>
+  );
+}
+
+/**
+ * 指数个性化设置弹框
+ *
+ * - 移动端：使用 Drawer（自底向上抽屉）
+ * - PC 端：使用 Dialog（居中弹窗）
+ *
+ * @param {Object} props
+ * @param {boolean} props.open - 是否打开
+ * @param {() => void} props.onClose - 关闭回调
+ * @param {boolean} props.isMobile - 是否为移动端（由上层传入）
+ * @param {Array<{code:string,name:string,price:number,change:number,changePercent:number}>} props.indices - 当前可用的大盘指数列表
+ * @param {string[]} props.selectedCodes - 已选中的指数 code，决定展示顺序
+ * @param {(codes: string[]) => void} props.onChangeSelected - 更新选中指数集合
+ * @param {() => void} props.onResetDefault - 恢复默认选中集合
+ */
+export default function MarketSettingModal({
+  open,
+  onClose,
+  isMobile,
+  indices = [],
+  selectedCodes = [],
+  onChangeSelected,
+  onResetDefault,
+}) {
+  const selectedList = useMemo(() => {
+    if (!indices?.length || !selectedCodes?.length) return [];
+    const map = new Map(indices.map((it) => [it.code, it]));
+    return selectedCodes
+      .map((code) => map.get(code))
+      .filter(Boolean);
+  }, [indices, selectedCodes]);
+
+  const allIndices = indices || [];
+  const selectedSet = useMemo(
+    () => new Set(selectedCodes || []),
+    [selectedCodes]
+  );
+
+  const [resetConfirmOpen, setResetConfirmOpen] = useState(false);
+
+  useEffect(() => {
+    if (!open) setResetConfirmOpen(false);
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [open]);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(KeyboardSensor)
+  );
+
+  const handleToggleCode = (code) => {
+    if (!code) return;
+    if (selectedSet.has(code)) {
+      // 至少保留一个指数，阻止把最后一个也移除
+      if (selectedCodes.length <= 1) return;
+      const next = selectedCodes.filter((c) => c !== code);
+      onChangeSelected?.(next);
+    } else {
+      const next = [...selectedCodes, code];
+      onChangeSelected?.(next);
+    }
+  };
+
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+    const oldIndex = selectedCodes.indexOf(active.id);
+    const newIndex = selectedCodes.indexOf(over.id);
+    if (oldIndex === -1 || newIndex === -1) return;
+    const next = arrayMove(selectedCodes, oldIndex, newIndex);
+    onChangeSelected?.(next);
+  };
+
+  const body = (
+    <div className="flex flex-col gap-4 px-4 pb-4 pt-2 text-[var(--text)]">
+      <div>
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: 8,
+            marginBottom: 8,
+          }}
+        >
+          <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
+            <div style={{ fontSize: 14, fontWeight: 600 }}>已添加指数</div>
+            <div
+              className="muted"
+              style={{ fontSize: 12, color: "var(--muted-foreground)" }}
+            >
+              拖动下方指数即可排序
+            </div>
+          </div>
+        </div>
+
+        {selectedList.length === 0 ? (
+          <div
+            className="muted"
+            style={{
+              fontSize: 13,
+              color: "var(--muted-foreground)",
+              padding: "12px 0 4px",
+            }}
+          >
+            暂未添加指数，请在下方选择想要关注的指数。
+          </div>
+        ) : (
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragEnd={handleDragEnd}
+            modifiers={[restrictToParentElement]}
+          >
+            <SortableContext
+              items={selectedCodes}
+              strategy={rectSortingStrategy}
+            >
+              <div className="flex flex-wrap gap-3">
+                {selectedList.map((item) => (
+                  <SortableIndexItem
+                    key={item.code}
+                    item={item}
+                    canRemove={selectedCodes.length > 1}
+                    onRemove={handleToggleCode}
+                    isMobile={isMobile}
+                  />
+                ))}
+              </div>
+            </SortableContext>
+          </DndContext>
+        )}
+      </div>
+
+      <div>
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: 8,
+            marginBottom: 10,
+          }}
+        >
+          <div
+            className="muted"
+            style={{
+              fontSize: 13,
+              color: "var(--muted-foreground)",
+            }}
+          >
+            点击即可选指数
+          </div>
+          {onResetDefault && (
+            <button
+              type="button"
+              className="icon-button"
+              onClick={() => setResetConfirmOpen(true)}
+              style={{
+                border: "none",
+                width: 28,
+                height: 28,
+                backgroundColor: "transparent",
+                color: "var(--muted-foreground)",
+                display: "inline-flex",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+              aria-label="恢复默认指数"
+            >
+              <ResetIcon width="16" height="16" />
+            </button>
+          )}
+        </div>
+
+        <div
+          className="chips"
+          style={{
+            display: "flex",
+            flexWrap: "wrap",
+            gap: 8,
+          }}
+        >
+          {allIndices.map((item) => {
+            const active = selectedSet.has(item.code);
+            return (
+              <button
+                key={item.code || item.name}
+                type="button"
+                onClick={() => handleToggleCode(item.code)}
+                className={cn("chip", active && "active")}
+                style={{
+                  height: 30,
+                  fontSize: 12,
+                  padding: "0 12px",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  borderRadius: 16,
+                }}
+              >
+                {item.name}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+
+  if (!open) return null;
+
+  if (isMobile) {
+    return (
+      <Drawer
+        open={open}
+        onOpenChange={(v) => {
+          if (!v) onClose?.();
+        }}
+        direction="bottom"
+      >
+        <DrawerContent
+          className="glass"
+          defaultHeight="77vh"
+          minHeight="40vh"
+          maxHeight="90vh"
+        >
+          <DrawerHeader className="flex flex-row items-center justify-between gap-2 py-4">
+            <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="flex-1 overflow-y-auto">{body}</div>
+        </DrawerContent>
+        <AnimatePresence>
+          {resetConfirmOpen && (
+            <ConfirmModal
+              key="mobile-index-reset-confirm"
+              title="恢复默认指数"
+              message="是否恢复已添加指数为默认配置？"
+              icon={
+                <ResetIcon
+                  width="20"
+                  height="20"
+                  className="shrink-0 text-[var(--primary)]"
+                />
+              }
+              confirmVariant="primary"
+              confirmText="恢复默认"
+              onConfirm={() => {
+                onResetDefault?.();
+                setResetConfirmOpen(false);
+              }}
+              onCancel={() => setResetConfirmOpen(false)}
+            />
+          )}
+        </AnimatePresence>
+      </Drawer>
+    );
+  }
+
+  const pcContent = (
+    <AnimatePresence>
+      {open && (
+        <motion.div
+          key="market-index-setting-overlay"
+          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-market-setting-drawer 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()}
+            style={{ width: 690 }}
+          >
+            <div className="pc-table-setting-header">
+              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+                <SettingsIcon width="20" height="20" />
+                <span>指数个性化设置</span>
+              </div>
+              <button
+                type="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">{body}</div>
+          </motion.aside>
+        </motion.div>
+      )}
+      {resetConfirmOpen && (
+        <ConfirmModal
+          key="pc-index-reset-confirm"
+          title="恢复默认指数"
+          message="是否恢复已添加指数为默认配置？"
+          icon={
+            <ResetIcon
+              width="20"
+              height="20"
+              className="shrink-0 text-[var(--primary)]"
+            />
+          }
+          confirmVariant="primary"
+          confirmText="恢复默认"
+          onConfirm={() => {
+            onResetDefault?.();
+            setResetConfirmOpen(false);
+          }}
+          onCancel={() => setResetConfirmOpen(false)}
+        />
+      )}
+    </AnimatePresence>
+  );
+
+  if (typeof document === "undefined") return null;
+  return createPortal(pcContent, document.body);
+}
+

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-[85vh] max-h-[90vh] 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/MobileFundTable.jsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
 import { AnimatePresence, motion } from 'framer-motion';
 import {
   flexRender,
@@ -22,27 +23,38 @@ import {
   useSortable,
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
+import { throttle } from 'lodash';
 import FitText from './FitText';
+import MobileFundCardDrawer from './MobileFundCardDrawer';
 import MobileSettingModal from './MobileSettingModal';
-import { ExitIcon, SettingsIcon, StarIcon } from './Icons';
+import { DragIcon, ExitIcon, SettingsIcon, SortIcon, StarIcon } from './Icons';
+import { fetchRelatedSectors } from '@/app/api/fund';
 
 const MOBILE_NON_FROZEN_COLUMN_IDS = [
+  'relatedSector',
   'yesterdayChangePercent',
   'estimateChangePercent',
+  'totalChangePercent',
+  'holdingDays',
   'todayProfit',
   'holdingProfit',
   'latestNav',
   'estimateNav',
 ];
 const MOBILE_COLUMN_HEADERS = {
+  relatedSector: '关联板块',
   latestNav: '最新净值',
   estimateNav: '估算净值',
-  yesterdayChangePercent: '昨日涨跌幅',
-  estimateChangePercent: '估值涨跌幅',
+  yesterdayChangePercent: '昨日涨幅',
+  estimateChangePercent: '估值涨幅',
+  totalChangePercent: '估算收益',
+  holdingDays: '持有天数',
   todayProfit: '当日收益',
   holdingProfit: '持有收益',
 };
 
+const RowSortableContext = createContext(null);
+
 function SortableRow({ row, children, isTableDragging, disabled }) {
   const {
     attributes,
@@ -72,7 +84,9 @@ function SortableRow({ row, children, isTableDragging, disabled }) {
       style={{ ...style, position: 'relative' }}
       {...attributes}
     >
-      {typeof children === 'function' ? children(setActivatorNodeRef, listeners) : children}
+      <RowSortableContext.Provider value={{ setActivatorNodeRef, listeners }}>
+        {typeof children === 'function' ? children(setActivatorNodeRef, listeners) : children}
+      </RowSortableContext.Provider>
     </motion.div>
   );
 }
@@ -91,6 +105,8 @@ function SortableRow({ row, children, isTableDragging, disabled }) {
  * @param {boolean} [props.refreshing] - 是否刷新中
  * @param {string} [props.sortBy] - 排序方式，'default' 时长按行触发拖拽排序
  * @param {(oldIndex: number, newIndex: number) => void} [props.onReorder] - 拖拽排序回调
+ * @param {(row: any) => Object} [props.getFundCardProps] - 给定行返回 FundCard 的 props；传入后点击基金名称将用底部弹框展示卡片视图
+ * @param {boolean} [props.masked] - 是否隐藏持仓相关金额
  */
 export default function MobileFundTable({
   data = [],
@@ -105,20 +121,36 @@ export default function MobileFundTable({
   sortBy = 'default',
   onReorder,
   onCustomSettingsChange,
+  stickyTop = 0,
+  getFundCardProps,
+  blockDrawerClose = false,
+  closeDrawerRef,
+  masked = false,
 }) {
+  const [isNameSortMode, setIsNameSortMode] = useState(false);
+
+  // 排序模式下拖拽手柄无需长按，直接拖动即可；非排序模式长按整行触发拖拽
   const sensors = useSensors(
     useSensor(PointerSensor, {
-      activationConstraint: { delay: 400, tolerance: 5 },
+      activationConstraint: isNameSortMode ? { delay: 0, tolerance: 5 } : { delay: 400, tolerance: 5 },
     }),
     useSensor(KeyboardSensor)
   );
 
   const [activeId, setActiveId] = useState(null);
+  const ignoreNextDrawerCloseRef = useRef(false);
 
   const onToggleFavoriteRef = useRef(onToggleFavorite);
   const onRemoveFromGroupRef = useRef(onRemoveFromGroup);
   const onHoldingAmountClickRef = useRef(onHoldingAmountClick);
 
+  useEffect(() => {
+    if (closeDrawerRef) {
+      closeDrawerRef.current = () => setCardSheetRow(null);
+      return () => { closeDrawerRef.current = null; };
+    }
+  }, [closeDrawerRef]);
+
   useEffect(() => {
     onToggleFavoriteRef.current = onToggleFavorite;
     onRemoveFromGroupRef.current = onRemoveFromGroup;
@@ -192,6 +224,7 @@ export default function MobileFundTable({
           return [...valid, ...missing];
         })() : null,
         mobileTableColumnVisibility: visibility,
+        mobileShowFullFundName: group.mobileShowFullFundName === true,
       };
     });
     return byGroup;
@@ -200,10 +233,14 @@ export default function MobileFundTable({
   const [configByGroup, setConfigByGroup] = useState(getInitialMobileConfigByGroup);
 
   const currentGroupMobile = configByGroup[groupKey];
+  const showFullFundName = currentGroupMobile?.mobileShowFullFundName ?? false;
   const defaultOrder = [...MOBILE_NON_FROZEN_COLUMN_IDS];
   const defaultVisibility = (() => {
     const o = {};
     MOBILE_NON_FROZEN_COLUMN_IDS.forEach((id) => { o[id] = true; });
+    // 新增列：默认隐藏（用户可在表格设置中开启）
+    o.relatedSector = false;
+    o.holdingDays = false;
     return o;
   })();
 
@@ -216,7 +253,12 @@ export default function MobileFundTable({
   })();
   const mobileColumnVisibility = (() => {
     const vis = currentGroupMobile?.mobileTableColumnVisibility ?? null;
-    if (vis && typeof vis === 'object' && Object.keys(vis).length > 0) return vis;
+    if (vis && typeof vis === 'object' && Object.keys(vis).length > 0) {
+      const next = { ...vis };
+      if (next.relatedSector === undefined) next.relatedSector = false;
+      if (next.holdingDays === undefined) next.holdingDays = false;
+      return next;
+    }
     return defaultVisibility;
   })();
 
@@ -247,9 +289,49 @@ export default function MobileFundTable({
       : nextOrUpdater;
     persistMobileGroupConfig({ mobileTableColumnVisibility: next });
   };
+
+  const persistShowFullFundName = (show) => {
+    if (typeof window === 'undefined') return;
+    try {
+      const raw = window.localStorage.getItem('customSettings');
+      const parsed = raw ? JSON.parse(raw) : {};
+      const group = parsed[groupKey] && typeof parsed[groupKey] === 'object' ? { ...parsed[groupKey] } : {};
+      group.mobileShowFullFundName = show;
+      parsed[groupKey] = group;
+      window.localStorage.setItem('customSettings', JSON.stringify(parsed));
+      setConfigByGroup((prev) => ({
+        ...prev,
+        [groupKey]: { ...prev[groupKey], mobileShowFullFundName: show }
+      }));
+      onCustomSettingsChange?.();
+    } catch {}
+  };
+
+  const handleToggleShowFullFundName = (show) => {
+    persistShowFullFundName(show);
+  };
+
   const [settingModalOpen, setSettingModalOpen] = useState(false);
+
+  useEffect(() => {
+    if (sortBy !== 'default') setIsNameSortMode(false);
+  }, [sortBy]);
+
+  // 排序模式下，点击页面任意区域（含表格外）退出排序；使用冒泡阶段，避免先于排序按钮处理
+  useEffect(() => {
+    if (!isNameSortMode) return;
+    const onDocClick = () => setIsNameSortMode(false);
+    document.addEventListener('click', onDocClick);
+    return () => document.removeEventListener('click', onDocClick);
+  }, [isNameSortMode]);
+
+  const [cardSheetRow, setCardSheetRow] = useState(null);
   const tableContainerRef = useRef(null);
+  const portalHeaderRef = useRef(null);
   const [tableContainerWidth, setTableContainerWidth] = useState(0);
+  const [isScrolled, setIsScrolled] = useState(false);
+  const [showPortalHeader, setShowPortalHeader] = useState(false);
+  const [effectiveStickyTop, setEffectiveStickyTop] = useState(stickyTop);
 
   useEffect(() => {
     const el = tableContainerRef.current;
@@ -261,19 +343,157 @@ export default function MobileFundTable({
     return () => ro.disconnect();
   }, []);
 
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const getEffectiveStickyTop = () => {
+      const stickySummaryCard = document.querySelector('.group-summary-sticky .group-summary-card');
+      if (!stickySummaryCard) return stickyTop;
+
+      const stickySummaryWrapper = stickySummaryCard.closest('.group-summary-sticky');
+      if (!stickySummaryWrapper) return stickyTop;
+
+      const wrapperRect = stickySummaryWrapper.getBoundingClientRect();
+      // 用“实际 DOM 的 top”判断 sticky 是否已生效，避免 mobile 下 stickyTop 入参与 GroupSummary 不一致导致的偏移。
+      const computedTopStr = window.getComputedStyle(stickySummaryWrapper).top;
+      const computedTop = Number.parseFloat(computedTopStr);
+      const baseTop = Number.isFinite(computedTop) ? computedTop : stickyTop;
+      const isSummaryStuck = wrapperRect.top <= baseTop + 1;
+
+      // header 使用固定定位(top)，所以也用视口坐标系下的 wrapperRect.top + 高度，确保不重叠
+      return isSummaryStuck ? wrapperRect.top + stickySummaryWrapper.offsetHeight : stickyTop;
+    };
+
+    const updateVerticalState = () => {
+      const nextStickyTop = getEffectiveStickyTop();
+      setEffectiveStickyTop((prev) => (prev === nextStickyTop ? prev : nextStickyTop));
+
+      const tableEl = tableContainerRef.current;
+      const tableRect = tableEl?.getBoundingClientRect();
+      if (!tableRect) {
+        setShowPortalHeader(window.scrollY >= nextStickyTop);
+        return;
+      }
+
+      const headerEl = tableEl?.querySelector('.table-header-row');
+      const headerHeight = headerEl?.getBoundingClientRect?.().height ?? 0;
+      const hasPassedHeader = (tableRect.top + headerHeight) <= nextStickyTop;
+      const hasTableInView = tableRect.bottom > nextStickyTop;
+
+      setShowPortalHeader(hasPassedHeader && hasTableInView);
+    };
+
+    const throttledVerticalUpdate = throttle(updateVerticalState, 1000/60, { leading: true, trailing: true });
+
+    updateVerticalState();
+    window.addEventListener('scroll', throttledVerticalUpdate, { passive: true });
+    window.addEventListener('resize', throttledVerticalUpdate, { passive: true });
+    return () => {
+      window.removeEventListener('scroll', throttledVerticalUpdate);
+      window.removeEventListener('resize', throttledVerticalUpdate);
+      throttledVerticalUpdate.cancel();
+    };
+  }, [stickyTop]);
+
+  useEffect(() => {
+    const tableEl = tableContainerRef.current;
+    if (!tableEl) return;
+
+    const handleScroll = () => {
+      setIsScrolled(tableEl.scrollLeft > 0);
+    };
+
+    handleScroll();
+    tableEl.addEventListener('scroll', handleScroll, { passive: true });
+
+    return () => {
+      tableEl.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  useEffect(() => {
+    const tableEl = tableContainerRef.current;
+    const portalEl = portalHeaderRef.current;
+    if (!tableEl || !portalEl) return;
+
+    const syncScrollToPortal = () => {
+      portalEl.scrollLeft = tableEl.scrollLeft;
+    };
+
+    const syncScrollToTable = () => {
+      tableEl.scrollLeft = portalEl.scrollLeft;
+    };
+
+    syncScrollToPortal();
+
+    const handleTableScroll = () => syncScrollToPortal();
+    const handlePortalScroll = () => syncScrollToTable();
+
+    tableEl.addEventListener('scroll', handleTableScroll, { passive: true });
+
+    return () => {
+      tableEl.removeEventListener('scroll', handleTableScroll);
+    };
+  }, [showPortalHeader]);
+
   const NAME_CELL_WIDTH = 140;
   const GAP = 12;
   const LAST_COLUMN_EXTRA = 12;
   const FALLBACK_WIDTHS = {
     fundName: 140,
+    relatedSector: 120,
     latestNav: 64,
     estimateNav: 64,
     yesterdayChangePercent: 72,
     estimateChangePercent: 80,
+    totalChangePercent: 80,
+    holdingDays: 64,
     todayProfit: 80,
     holdingProfit: 80,
   };
 
+  const relatedSectorEnabled = mobileColumnVisibility?.relatedSector !== false;
+  const relatedSectorCacheRef = useRef(new Map());
+  const [relatedSectorByCode, setRelatedSectorByCode] = useState({});
+
+  const fetchRelatedSector = async (code) => fetchRelatedSectors(code);
+
+  const runWithConcurrency = async (items, limit, worker) => {
+    const queue = [...items];
+    const runners = Array.from({ length: Math.max(1, limit) }, async () => {
+      while (queue.length) {
+        const item = queue.shift();
+        if (item == null) continue;
+         
+        await worker(item);
+      }
+    });
+    await Promise.all(runners);
+  };
+
+  useEffect(() => {
+    if (!relatedSectorEnabled) return;
+    if (!Array.isArray(data) || data.length === 0) return;
+
+    const codes = Array.from(new Set(data.map((d) => d?.code).filter(Boolean)));
+    const missing = codes.filter((code) => !relatedSectorCacheRef.current.has(code));
+    if (missing.length === 0) return;
+
+    let cancelled = false;
+    (async () => {
+      await runWithConcurrency(missing, 4, async (code) => {
+        const value = await fetchRelatedSector(code);
+        relatedSectorCacheRef.current.set(code, value);
+        if (cancelled) return;
+        setRelatedSectorByCode((prev) => {
+          if (prev[code] === value) return prev;
+          return { ...prev, [code]: value };
+        });
+      });
+    })();
+
+    return () => { cancelled = true; };
+  }, [relatedSectorEnabled, data]);
+
   const columnWidthMap = useMemo(() => {
     const visibleNonNameIds = mobileColumnOrder.filter((id) => mobileColumnVisibility[id] !== false);
     const nonNameCount = visibleNonNameIds.length;
@@ -299,14 +519,17 @@ export default function MobileFundTable({
     MOBILE_NON_FROZEN_COLUMN_IDS.forEach((id) => {
       allVisible[id] = true;
     });
+    allVisible.relatedSector = false;
+    allVisible.holdingDays = false;
     setMobileColumnVisibility(allVisible);
   };
   const handleToggleMobileColumnVisibility = (columnId, visible) => {
     setMobileColumnVisibility((prev = {}) => ({ ...prev, [columnId]: visible }));
   };
 
-  // 移动端名称列：无拖拽把手，长按整行触发排序
-  const MobileFundNameCell = ({ info }) => {
+  // 移动端名称列：无拖拽把手，长按整行触发排序；点击名称可打开底部卡片弹框（需传入 getFundCardProps）
+  // 当 isNameSortMode 且 sortBy==='default' 时，左侧显示排序/拖拽图标，可拖动行排序
+  const MobileFundNameCell = ({ info, showFullFundName, onOpenCardSheet, isNameSortMode: nameSortMode, sortBy: currentSortBy }) => {
     const original = info.row.original || {};
     const code = original.code;
     const isUpdated = original.isUpdated;
@@ -315,10 +538,23 @@ export default function MobileFundTable({
     const holdingAmountDisplay = hasHoldingAmount ? (original.holdingAmount ?? '—') : null;
     const isFavorites = favorites?.has?.(code);
     const isGroupTab = currentTab && currentTab !== 'all' && currentTab !== 'fav';
+    const rowSortable = useContext(RowSortableContext);
+    const showDragHandle = nameSortMode && currentSortBy === 'default' && rowSortable;
 
     return (
       <div className="name-cell-content" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-        {isGroupTab ? (
+        {showDragHandle ? (
+          <span
+            ref={rowSortable.setActivatorNodeRef}
+            className="icon-button fav-button"
+            title="拖动排序"
+            style={{ backgroundColor: 'transparent', touchAction: 'none', cursor: 'grab', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+            onClick={(e) => e.stopPropagation()}
+            {...rowSortable.listeners}
+          >
+            <DragIcon width="18" height="18" />
+          </span>
+        ) : isGroupTab ? (
           <button
             className="icon-button fav-button"
             onClick={(e) => {
@@ -344,7 +580,25 @@ export default function MobileFundTable({
           </button>
         )}
         <div className="title-text">
-          <span className="name-text" title={isUpdated ? '今日净值已更新' : ''}>
+          <span
+            className={`name-text ${showFullFundName ? 'show-full' : ''}`}
+            title={isUpdated ? '今日净值已更新' : onOpenCardSheet ? '点击查看卡片' : ''}
+            role={onOpenCardSheet ? 'button' : undefined}
+            tabIndex={onOpenCardSheet ? 0 : undefined}
+            style={onOpenCardSheet ? { cursor: 'pointer' } : undefined}
+            onClick={(e) => {
+              if (onOpenCardSheet) {
+                e.stopPropagation?.();
+                onOpenCardSheet(original);
+              }
+            }}
+            onKeyDown={(e) => {
+              if (onOpenCardSheet && (e.key === 'Enter' || e.key === ' ')) {
+                e.preventDefault();
+                onOpenCardSheet(original);
+              }
+            }}
+          >
             {info.getValue() ?? '—'}
           </span>
           {holdingAmountDisplay ? (
@@ -365,7 +619,7 @@ export default function MobileFundTable({
                 }
               }}
             >
-              {holdingAmountDisplay}
+              {masked ? <span className="mask-text">******</span> : holdingAmountDisplay}
               {hasDca && <span className="dca-indicator">定</span>}
               {isUpdated && <span className="updated-indicator">✓</span>}
             </span>
@@ -427,49 +681,120 @@ export default function MobileFundTable({
             >
               <SettingsIcon width="18" height="18" />
             </button>
+            {sortBy === 'default' && (
+              <button
+                type="button"
+                className={`icon-button ${isNameSortMode ? 'active' : ''}`}
+                onClick={(e) => {
+                  e.stopPropagation?.();
+                  setIsNameSortMode((prev) => !prev);
+                }}
+                title={isNameSortMode ? '退出排序' : '拖动排序'}
+                style={{
+                  border: 'none',
+                  width: '28px',
+                  height: '28px',
+                  minWidth: '28px',
+                  backgroundColor: 'transparent',
+                  color: isNameSortMode ? 'var(--primary)' : 'var(--text)',
+                  flexShrink: 0,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                <SortIcon width="18" height="18" />
+              </button>
+            )}
           </div>
         ),
-        cell: (info) => <MobileFundNameCell info={info} />,
+        cell: (info) => (
+          <MobileFundNameCell
+            info={info}
+            showFullFundName={showFullFundName}
+            onOpenCardSheet={getFundCardProps ? (row) => setCardSheetRow(row) : undefined}
+            isNameSortMode={isNameSortMode}
+            sortBy={sortBy}
+          />
+        ),
         meta: { align: 'left', cellClassName: 'name-cell', width: columnWidthMap.fundName },
       },
+      {
+        id: 'relatedSector',
+        header: '关联板块',
+        cell: (info) => {
+          const original = info.row.original || {};
+          const code = original.code;
+          const value = (code && (relatedSectorByCode?.[code] ?? relatedSectorCacheRef.current.get(code))) || '';
+          const display = value || '—';
+          return (
+            <div style={{ width: '100%', textAlign: value ? 'left' : 'right', fontSize: '12px' }}>
+              {display}
+            </div>
+          );
+        },
+        meta: { align: 'left', cellClassName: 'related-sector-cell', width: columnWidthMap.relatedSector ?? 120 },
+      },
       {
         accessorKey: 'latestNav',
         header: '最新净值',
-        cell: (info) => (
-          <span style={{ display: 'block', width: '100%', fontWeight: 700 }}>
-            <FitText maxFontSize={14} minFontSize={10}>
-              {info.getValue() ?? '—'}
-            </FitText>
-          </span>
-        ),
+        cell: (info) => {
+          const original = info.row.original || {};
+          const date = original.latestNavDate ?? '-';
+          const displayDate = typeof date === 'string' && date.length > 5 ? date.slice(5) : date;
+          return (
+            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 0 }}>
+              <span style={{ display: 'block', width: '100%', fontWeight: 700 }}>
+                <FitText maxFontSize={14} minFontSize={10}>
+                  {info.getValue() ?? '—'}
+                </FitText>
+              </span>
+              <span className="muted" style={{ fontSize: '10px' }}>{displayDate}</span>
+            </div>
+          );
+        },
         meta: { align: 'right', cellClassName: 'value-cell', width: columnWidthMap.latestNav },
       },
       {
         accessorKey: 'estimateNav',
         header: '估算净值',
-        cell: (info) => (
-          <span style={{ display: 'block', width: '100%', fontWeight: 700 }}>
-            <FitText maxFontSize={14} minFontSize={10}>
-              {info.getValue() ?? '—'}
-            </FitText>
-          </span>
-        ),
+        cell: (info) => {
+          const original = info.row.original || {};
+          const date = original.estimateNavDate ?? '-';
+          const displayDate = typeof date === 'string' && date.length > 5 ? date.slice(5) : date;
+          const estimateNav = info.getValue();
+          const hasEstimateNav = estimateNav != null && estimateNav !== '—';
+
+          return (
+            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 0 }}>
+              <span style={{ display: 'block', width: '100%', fontWeight: 700 }}>
+                <FitText maxFontSize={14} minFontSize={10}>
+                  {estimateNav ?? '—'}
+                </FitText>
+              </span>
+              {hasEstimateNav && displayDate && displayDate !== '-' ? (
+                <span className="muted" style={{ fontSize: '10px' }}>{displayDate}</span>
+              ) : null}
+            </div>
+          );
+        },
         meta: { align: 'right', cellClassName: 'value-cell', width: columnWidthMap.estimateNav },
       },
       {
         accessorKey: 'yesterdayChangePercent',
-        header: '昨日涨跌幅',
+        header: '昨日涨幅',
         cell: (info) => {
           const original = info.row.original || {};
           const value = original.yesterdayChangeValue;
           const date = original.yesterdayDate ?? '-';
+          const displayDate = typeof date === 'string' && date.length > 5 ? date.slice(5) : date;
           const cls = value > 0 ? 'up' : value < 0 ? 'down' : '';
           return (
             <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 0 }}>
               <span className={cls} style={{ fontWeight: 700 }}>
                 {info.getValue() ?? '—'}
               </span>
-              <span className="muted" style={{ fontSize: '10px' }}>{date}</span>
+              <span className="muted" style={{ fontSize: '10px' }}>{displayDate}</span>
             </div>
           );
         },
@@ -477,7 +802,7 @@ export default function MobileFundTable({
       },
       {
         accessorKey: 'estimateChangePercent',
-        header: '估值涨跌幅',
+        header: '估值涨幅',
         cell: (info) => {
           const original = info.row.original || {};
           const value = original.estimateChangeValue;
@@ -485,17 +810,68 @@ export default function MobileFundTable({
           const time = original.estimateTime ?? '-';
           const displayTime = typeof time === 'string' && time.length > 5 ? time.slice(5) : time;
           const cls = isMuted ? 'muted' : value > 0 ? 'up' : value < 0 ? 'down' : '';
+          const text = info.getValue();
+          const hasText = text != null && text !== '—';
           return (
             <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 0 }}>
               <span className={cls} style={{ fontWeight: 700 }}>
-                {info.getValue() ?? '—'}
+                {text ?? '—'}
               </span>
-              <span className="muted" style={{ fontSize: '10px' }}>{displayTime}</span>
+              {hasText && displayTime && displayTime !== '-' ? (
+                <span className="muted" style={{ fontSize: '10px' }}>{displayTime}</span>
+              ) : null}
             </div>
           );
         },
         meta: { align: 'right', cellClassName: 'est-change-cell', width: columnWidthMap.estimateChangePercent },
       },
+      {
+        accessorKey: 'totalChangePercent',
+        header: '估算收益',
+        cell: (info) => {
+          const original = info.row.original || {};
+          const value = original.estimateProfitValue;
+          const hasProfit = value != null;
+          const cls = hasProfit ? (value > 0 ? 'up' : value < 0 ? 'down' : '') : 'muted';
+          const amountStr = hasProfit ? (original.estimateProfit ?? '') : '—';
+          const percentStr = original.estimateProfitPercent ?? '';
+
+          return (
+            <div style={{ width: '100%' }}>
+              <span className={cls} style={{ display: 'block', width: '100%', fontWeight: 700 }}>
+                <FitText maxFontSize={14} minFontSize={10}>
+                  {masked && hasProfit ? <span className="mask-text">******</span> : amountStr}
+                </FitText>
+              </span>
+              {hasProfit && percentStr && !masked ? (
+                <span className={`${cls} estimate-profit-percent`} style={{ display: 'block', width: '100%', fontSize: '0.75em', opacity: 0.9, fontWeight: 500 }}>
+                  <FitText maxFontSize={11} minFontSize={9}>
+                    {percentStr}
+                  </FitText>
+                </span>
+              ) : null}
+            </div>
+          );
+        },
+        meta: { align: 'right', cellClassName: 'total-change-cell', width: columnWidthMap.totalChangePercent },
+      },
+      {
+        accessorKey: 'holdingDays',
+        header: '持有天数',
+        cell: (info) => {
+          const original = info.row.original || {};
+          const value = original.holdingDaysValue;
+          if (value == null) {
+            return <div className="muted" style={{ textAlign: 'right', fontSize: '12px' }}>—</div>;
+          }
+          return (
+            <div style={{ fontWeight: 700, textAlign: 'right' }}>
+              {value}
+            </div>
+          );
+        },
+        meta: { align: 'right', cellClassName: 'holding-days-cell', width: columnWidthMap.holdingDays ?? 64 },
+      },
       {
         accessorKey: 'todayProfit',
         header: '当日收益',
@@ -510,10 +886,10 @@ export default function MobileFundTable({
             <div style={{ width: '100%' }}>
               <span className={cls} style={{ display: 'block', width: '100%', fontWeight: 700 }}>
                 <FitText maxFontSize={14} minFontSize={10}>
-                  {amountStr}
+                  {masked && hasProfit ? <span className="mask-text">******</span> : amountStr}
                 </FitText>
               </span>
-              {percentStr ? (
+              {percentStr && !masked ? (
                 <span className={`${cls} today-profit-percent`} style={{ display: 'block', width: '100%', fontSize: '0.75em', opacity: 0.9, fontWeight: 500 }}>
                   <FitText maxFontSize={11} minFontSize={9}>
                     {percentStr}
@@ -539,10 +915,10 @@ export default function MobileFundTable({
             <div style={{ width: '100%' }}>
               <span className={cls} style={{ display: 'block', width: '100%', fontWeight: 700 }}>
                 <FitText maxFontSize={14} minFontSize={10}>
-                  {amountStr}
+                  {masked && hasTotal ? <span className="mask-text">******</span> : amountStr}
                 </FitText>
               </span>
-              {percentStr ? (
+              {percentStr && !masked ? (
                 <span className={`${cls} holding-profit-percent`} style={{ display: 'block', width: '100%', fontSize: '0.75em', opacity: 0.9, fontWeight: 500 }}>
                   <FitText maxFontSize={11} minFontSize={9}>
                     {percentStr}
@@ -555,7 +931,7 @@ export default function MobileFundTable({
         meta: { align: 'right', cellClassName: 'holding-cell', width: columnWidthMap.holdingProfit },
       },
     ],
-    [currentTab, favorites, refreshing, columnWidthMap]
+    [currentTab, favorites, refreshing, columnWidthMap, showFullFundName, getFundCardProps, isNameSortMode, sortBy, relatedSectorByCode]
   );
 
   const table = useReactTable({
@@ -656,124 +1032,181 @@ export default function MobileFundTable({
   })();
 
   const getPinClass = (columnId, isHeader) => {
-    if (columnId === 'fundName') return isHeader ? 'table-header-cell-pin-left' : 'table-cell-pin-left';
+    if (columnId === 'fundName') {
+      const baseClass = isHeader ? 'table-header-cell-pin-left' : 'table-cell-pin-left';
+      const scrolledClass = isScrolled ? 'is-scrolled' : '';
+      return `${baseClass} ${scrolledClass}`.trim();
+    }
     return '';
   };
 
   const getAlignClass = (columnId) => {
     if (columnId === 'fundName') return '';
-    if (['latestNav', 'estimateNav', 'yesterdayChangePercent', 'estimateChangePercent', 'todayProfit', 'holdingProfit'].includes(columnId)) return 'text-right';
+    if (['latestNav', 'estimateNav', 'yesterdayChangePercent', 'estimateChangePercent', 'totalChangePercent', 'holdingDays', 'todayProfit', 'holdingProfit'].includes(columnId)) return 'text-right';
     return 'text-right';
   };
 
-  return (
-    <div className="mobile-fund-table" ref={tableContainerRef}>
+  const renderTableHeader = ()=>{
+    if(!headerGroup) return null;
+    return (
       <div
-        className="mobile-fund-table-scroll"
-        style={mobileGridLayout.minWidth != null ? { minWidth: mobileGridLayout.minWidth } : undefined}
+        className="table-header-row mobile-fund-table-header"
+        style={mobileGridLayout.gridTemplateColumns ? { gridTemplateColumns: mobileGridLayout.gridTemplateColumns } : undefined}
       >
-        {headerGroup && (
+        {headerGroup.headers.map((header, headerIndex) => {
+          const columnId = header.column.id;
+          const pinClass = getPinClass(columnId, true);
+          const alignClass = getAlignClass(columnId);
+          const isLastColumn = headerIndex === headerGroup.headers.length - 1;
+          return (
+            <div
+              key={header.id}
+              className={`table-header-cell ${alignClass} ${pinClass}`}
+              style={isLastColumn ? { paddingRight: LAST_COLUMN_EXTRA } : undefined}
+            >
+              {header.isPlaceholder
+                ? null
+                : flexRender(header.column.columnDef.header, header.getContext())}
+            </div>
+          );
+        })}
+      </div>
+    )
+  }
+
+  const renderContent = (onlyShowHeader) => {
+    if (onlyShowHeader) {
+      return (
+        <div style={{position: 'fixed', top: effectiveStickyTop}} className="mobile-fund-table mobile-fund-table-portal-header" ref={portalHeaderRef}>
           <div
-            className="table-header-row mobile-fund-table-header"
-            style={mobileGridLayout.gridTemplateColumns ? { gridTemplateColumns: mobileGridLayout.gridTemplateColumns } : undefined}
+            className="mobile-fund-table-scroll"
+            style={mobileGridLayout.minWidth != null ? { minWidth: mobileGridLayout.minWidth } : undefined}
           >
-            {headerGroup.headers.map((header, headerIndex) => {
-              const columnId = header.column.id;
-              const pinClass = getPinClass(columnId, true);
-              const alignClass = getAlignClass(columnId);
-              const isLastColumn = headerIndex === headerGroup.headers.length - 1;
-              return (
-                <div
-                  key={header.id}
-                  className={`table-header-cell ${alignClass} ${pinClass}`}
-                  style={isLastColumn ? { paddingRight: LAST_COLUMN_EXTRA } : undefined}
-                >
-                  {header.isPlaceholder
-                    ? null
-                    : flexRender(header.column.columnDef.header, header.getContext())}
-                </div>
-              );
-            })}
+            {renderTableHeader()}
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div className="mobile-fund-table" ref={tableContainerRef}>
+        <div
+          className="mobile-fund-table-scroll"
+          style={mobileGridLayout.minWidth != null ? { minWidth: mobileGridLayout.minWidth } : undefined}
+        >
+          {renderTableHeader()}
+
+          {!onlyShowHeader && (
+            <DndContext
+              sensors={sensors}
+              collisionDetection={closestCenter}
+              onDragStart={handleDragStart}
+              onDragEnd={handleDragEnd}
+              onDragCancel={handleDragCancel}
+              modifiers={[restrictToVerticalAxis, restrictToParentElement]}
+            >
+              <SortableContext
+                items={data.map((item) => item.code)}
+                strategy={verticalListSortingStrategy}
+              >
+                <AnimatePresence mode="popLayout">
+                  {table.getRowModel().rows.map((row, index) => (
+                    <SortableRow
+                      key={row.original.code || row.id}
+                      row={row}
+                      isTableDragging={!!activeId}
+                      disabled={sortBy !== 'default'}
+                    >
+                      {(setActivatorNodeRef, listeners) => (
+                        <div
+                          ref={sortBy === 'default' && !isNameSortMode ? setActivatorNodeRef : undefined}
+                          className="table-row"
+                          style={{
+                            background: index % 2 === 0 ? 'var(--bg)' : 'var(--table-row-alt-bg)',
+                            position: 'relative',
+                            zIndex: 1,
+                            ...(mobileGridLayout.gridTemplateColumns ? { gridTemplateColumns: mobileGridLayout.gridTemplateColumns } : {}),
+                          }}
+                          onClick={isNameSortMode ? () => setIsNameSortMode(false) : undefined}
+                          {...(sortBy === 'default' && !isNameSortMode ? listeners : {})}
+                        >
+                          {row.getVisibleCells().map((cell, cellIndex) => {
+                            const columnId = cell.column.id;
+                            const pinClass = getPinClass(columnId, false);
+                            const alignClass = getAlignClass(columnId);
+                            const cellClassName = cell.column.columnDef.meta?.cellClassName || '';
+                            const isLastColumn = cellIndex === row.getVisibleCells().length - 1;
+                            const style = isLastColumn ? {paddingRight: LAST_COLUMN_EXTRA} : {};
+                            if (cellIndex  === 0) {
+                              if (index % 2 !== 0) {
+                                style.background = 'var(--table-row-alt-bg)';
+                              }else {
+                                style.background = 'var(--bg)';
+                              }
+                            }
+                            return (
+                              <div
+                                key={cell.id}
+                                className={`table-cell ${alignClass} ${cellClassName} ${pinClass}`}
+                                style={style}
+                              >
+                                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                              </div>
+                            );
+                          })}
+                        </div>
+                      )}
+                    </SortableRow>
+                  ))}
+                </AnimatePresence>
+              </SortableContext>
+            </DndContext>
+
+          )}
+        </div>
+
+        {table.getRowModel().rows.length === 0 && !onlyShowHeader && (
+          <div className="table-row empty-row">
+            <div className="table-cell" style={{ textAlign: 'center' }}>
+              <span className="muted">暂无数据</span>
+            </div>
           </div>
         )}
 
-        <DndContext
-          sensors={sensors}
-          collisionDetection={closestCenter}
-          onDragStart={handleDragStart}
-          onDragEnd={handleDragEnd}
-          onDragCancel={handleDragCancel}
-          modifiers={[restrictToVerticalAxis, restrictToParentElement]}
-        >
-          <SortableContext
-            items={data.map((item) => item.code)}
-            strategy={verticalListSortingStrategy}
-          >
-            <AnimatePresence mode="popLayout">
-              {table.getRowModel().rows.map((row) => (
-                <SortableRow
-                  key={row.original.code || row.id}
-                  row={row}
-                  isTableDragging={!!activeId}
-                  disabled={sortBy !== 'default'}
-                >
-                  {(setActivatorNodeRef, listeners) => (
-                    <div
-                      ref={sortBy === 'default' ? setActivatorNodeRef : undefined}
-                      className="table-row"
-                      style={{
-                        background: 'var(--bg)',
-                        position: 'relative',
-                        zIndex: 1,
-                        ...(mobileGridLayout.gridTemplateColumns ? { gridTemplateColumns: mobileGridLayout.gridTemplateColumns } : {}),
-                      }}
-                      {...(sortBy === 'default' ? listeners : {})}
-                    >
-                      {row.getVisibleCells().map((cell, cellIndex) => {
-                        const columnId = cell.column.id;
-                        const pinClass = getPinClass(columnId, false);
-                        const alignClass = getAlignClass(columnId);
-                        const cellClassName = cell.column.columnDef.meta?.cellClassName || '';
-                        const isLastColumn = cellIndex === row.getVisibleCells().length - 1;
-                        return (
-                          <div
-                            key={cell.id}
-                            className={`table-cell ${alignClass} ${cellClassName} ${pinClass}`}
-                            style={isLastColumn ? { paddingRight: LAST_COLUMN_EXTRA } : undefined}
-                          >
-                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                          </div>
-                        );
-                      })}
-                    </div>
-                  )}
-                </SortableRow>
-              ))}
-            </AnimatePresence>
-          </SortableContext>
-        </DndContext>
+        {!onlyShowHeader && (
+          <MobileSettingModal
+            open={settingModalOpen}
+            onClose={() => setSettingModalOpen(false)}
+            columns={mobileColumnOrder.map((id) => ({ id, header: MOBILE_COLUMN_HEADERS[id] ?? id }))}
+            columnVisibility={mobileColumnVisibility}
+            onColumnReorder={(newOrder) => {
+              setMobileColumnOrder(newOrder);
+            }}
+            onToggleColumnVisibility={handleToggleMobileColumnVisibility}
+            onResetColumnOrder={handleResetMobileColumnOrder}
+            onResetColumnVisibility={handleResetMobileColumnVisibility}
+            showFullFundName={showFullFundName}
+            onToggleShowFullFundName={handleToggleShowFullFundName}
+          />
+        )}
+
+        <MobileFundCardDrawer
+          open={!!(cardSheetRow && getFundCardProps)}
+          onOpenChange={(open) => { if (!open) setCardSheetRow(null); }}
+          blockDrawerClose={blockDrawerClose}
+          ignoreNextDrawerCloseRef={ignoreNextDrawerCloseRef}
+          cardSheetRow={cardSheetRow}
+          getFundCardProps={getFundCardProps}
+        />
+
+        {!onlyShowHeader && showPortalHeader && ReactDOM.createPortal(renderContent(true), document.body)}
       </div>
+    );
+  };
 
-      {table.getRowModel().rows.length === 0 && (
-        <div className="table-row empty-row">
-          <div className="table-cell" style={{ textAlign: 'center' }}>
-            <span className="muted">暂无数据</span>
-          </div>
-        </div>
-      )}
-
-      <MobileSettingModal
-        open={settingModalOpen}
-        onClose={() => setSettingModalOpen(false)}
-        columns={mobileColumnOrder.map((id) => ({ id, header: MOBILE_COLUMN_HEADERS[id] ?? id }))}
-        columnVisibility={mobileColumnVisibility}
-        onColumnReorder={(newOrder) => {
-          setMobileColumnOrder(newOrder);
-        }}
-        onToggleColumnVisibility={handleToggleMobileColumnVisibility}
-        onResetColumnOrder={handleResetMobileColumnOrder}
-        onResetColumnVisibility={handleResetMobileColumnVisibility}
-      />
-    </div>
+  return (
+    <>
+      {renderContent()}
+    </>
   );
 }

app/components/MobileSettingModal.jsx

@@ -1,13 +1,20 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { AnimatePresence, motion, Reorder } from 'framer-motion';
-import { createPortal } from 'react-dom';
+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 - 关闭回调
@@ -17,6 +24,8 @@ import { CloseIcon, DragIcon, ResetIcon, SettingsIcon } from './Icons';
  * @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,
@@ -27,194 +36,199 @@ export default function MobileSettingModal({
   onToggleColumnVisibility,
   onResetColumnOrder,
   onResetColumnVisibility,
+  showFullFundName,
+  onToggleShowFullFundName,
 }) {
   const [resetConfirmOpen, setResetConfirmOpen] = useState(false);
+  const [isReordering, setIsReordering] = useState(false);
 
   useEffect(() => {
     if (!open) setResetConfirmOpen(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="mobile-setting-overlay"
-          className="mobile-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 }}
+  return (
+    <>
+      <Drawer
+        open={open}
+        onOpenChange={(v) => {
+          if (!v) onClose();
+        }}
+        direction="bottom"
+        handleOnly={isReordering}
+      >
+        <DrawerContent
+          className="glass"
+          defaultHeight="77vh"
+          minHeight="40vh"
+          maxHeight="90vh"
         >
-          <motion.div
-            className="mobile-setting-drawer glass"
-            initial={{ y: '100%' }}
-            animate={{ y: 0 }}
-            exit={{ y: '100%' }}
-            transition={{ type: 'spring', damping: 30, stiffness: 300 }}
-            onClick={(e) => e.stopPropagation()}
-          >
-            <div className="mobile-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>
+          <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">
-              <h3 className="mobile-setting-subtitle">表头设置</h3>
+          <div className="mobile-setting-body flex flex-1 flex-col overflow-y-auto">
+            {onToggleShowFullFundName && (
               <div
                 style={{
                   display: 'flex',
                   alignItems: 'center',
                   justifyContent: 'space-between',
-                  marginBottom: 12,
-                  gap: 8,
+                  padding: '12px 0',
+                  borderBottom: '1px solid var(--border)',
+                  marginBottom: 16,
                 }}
               >
-                <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>
-                )}
+                <span style={{ fontSize: '14px' }}>展示完整基金名称</span>
+                <Switch
+                  checked={!!showFullFundName}
+                  onCheckedChange={(checked) => {
+                    onToggleShowFullFundName?.(!!checked);
+                  }}
+                  title={showFullFundName ? '关闭' : '开启'}
+                />
               </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"
+            )}
+            <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,
+                  }}
                 >
-                  <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 && (
-                          <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>
+                  <ResetIcon width="16" height="16" />
+                </button>
               )}
             </div>
-          </motion.div>
-        </motion.div>
-      )}
-      {resetConfirmOpen && (
-        <ConfirmModal
-          key="mobile-reset-confirm"
-          title="重置表头设置"
-          message="是否重置表头顺序和显示/隐藏为默认值？"
-          onConfirm={() => {
-            onResetColumnOrder?.();
-            onResetColumnVisibility?.();
-            setResetConfirmOpen(false);
-          }}
-          onCancel={() => setResetConfirmOpen(false)}
-          confirmText="重置"
-        />
-      )}
-    </AnimatePresence>
-  );
+            {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"
+                layoutScroll
+                style={{ touchAction: 'none' }}
+              >
+                <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 }}
+                      onDragStart={() => setIsReordering(true)}
+                      onDragEnd={() => setIsReordering(false)}
+                      transition={{
+                        type: 'spring',
+                        stiffness: 500,
+                        damping: 35,
+                        mass: 1,
+                        layout: { duration: 0.2 },
+                      }}
+                      style={{ touchAction: 'none' }}
+                    >
+                      <div
+                        className="drag-handle"
+                        style={{
+                          cursor: 'grab',
+                          display: 'flex',
+                          alignItems: 'center',
+                          padding: '0 8px',
+                          color: 'var(--muted)',
+                        }}
+                      >
+                        <DragIcon width="18" height="18" />
+                      </div>
+                      <div style={{ flex: 1, fontSize: '14px', display: 'flex', flexDirection: 'column', gap: 2 }}>
+                        <span>{item.header}</span>
+                        {item.id === 'totalChangePercent' && (
+                          <span className="muted" style={{ fontSize: '12px' }}>
+                            估值涨幅与持有收益的汇总
+                          </span>
+                        )}
+                        {item.id === 'relatedSector' && (
+                          <span className="muted" style={{ fontSize: '12px' }}>
+                            仅 fund.cc.cd 地址支持
+                          </span>
+                        )}
+                      </div>
+                      {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>
 
-  if (typeof document === 'undefined') return null;
-  return createPortal(content, document.body);
+      <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/PcFundTable.jsx

@@ -1,6 +1,8 @@
 'use client';
 
+import ReactDOM from 'react-dom';
 import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { throttle } from 'lodash';
 import { AnimatePresence, motion } from 'framer-motion';
 import {
   flexRender,
@@ -25,23 +27,38 @@ import { CSS } from '@dnd-kit/utilities';
 import ConfirmModal from './ConfirmModal';
 import FitText from './FitText';
 import PcTableSettingModal from './PcTableSettingModal';
-import { DragIcon, ExitIcon, SettingsIcon, StarIcon, TrashIcon } from './Icons';
+import FundCard from './FundCard';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { DragIcon, ExitIcon, SettingsIcon, StarIcon, TrashIcon, ResetIcon } from './Icons';
+import { fetchRelatedSectors } from '@/app/api/fund';
 
 const NON_FROZEN_COLUMN_IDS = [
+  'relatedSector',
   'yesterdayChangePercent',
   'estimateChangePercent',
+  'totalChangePercent',
   'holdingAmount',
+  'holdingDays',
   'todayProfit',
   'holdingProfit',
   'latestNav',
   'estimateNav',
 ];
+
 const COLUMN_HEADERS = {
+  relatedSector: '关联板块',
   latestNav: '最新净值',
   estimateNav: '估算净值',
-  yesterdayChangePercent: '昨日涨跌幅',
-  estimateChangePercent: '估值涨跌幅',
+  yesterdayChangePercent: '昨日涨幅',
+  estimateChangePercent: '估值涨幅',
+  totalChangePercent: '估算收益',
   holdingAmount: '持仓金额',
+  holdingDays: '持有天数',
   todayProfit: '当日收益',
   holdingProfit: '持有收益',
 };
@@ -103,8 +120,8 @@ function SortableRow({ row, children, isTableDragging, disabled }) {
  *     code?: string;                // 基金代码（可选，只用于展示在名称下方）
  *     latestNav: string|number;     // 最新净值
  *     estimateNav: string|number;   // 估算净值
- *     yesterdayChangePercent: string|number; // 昨日涨跌幅
- *     estimateChangePercent: string|number;  // 估值涨跌幅
+ *     yesterdayChangePercent: string|number; // 昨日涨幅
+ *     estimateChangePercent: string|number;  // 估值涨幅
  *     holdingAmount: string|number;         // 持仓金额
  *     todayProfit: string|number;           // 当日收益
  *     holdingProfit: string|number;         // 持有收益
@@ -116,6 +133,11 @@ function SortableRow({ row, children, isTableDragging, disabled }) {
  * @param {(row: any) => void} [props.onRemoveFromGroup] - 从当前分组移除
  * @param {(row: any, meta: { hasHolding: boolean }) => void} [props.onHoldingAmountClick] - 点击持仓金额
  * @param {boolean} [props.refreshing] - 是否处于刷新状态（控制删除按钮禁用态）
+ * @param {(row: any) => Object} [props.getFundCardProps] - 给定行返回 FundCard 的 props；传入后点击基金名称将用弹框展示卡片详情
+ * @param {React.MutableRefObject<(() => void) | null>} [props.closeDialogRef] - 注入关闭弹框的方法，用于确认删除时关闭
+ * @param {boolean} [props.blockDialogClose] - 为 true 时阻止点击遮罩关闭弹框（如删除确认弹框打开时）
+ * @param {number} [props.stickyTop] - 表头固定时的 top 偏移（与 MobileFundTable 一致，用于适配导航栏、筛选栏等）
+ * @param {boolean} [props.masked] - 是否隐藏持仓相关金额
  */
 export default function PcFundTable({
   data = [],
@@ -130,6 +152,11 @@ export default function PcFundTable({
   sortBy = 'default',
   onReorder,
   onCustomSettingsChange,
+  getFundCardProps,
+  closeDialogRef,
+  blockDialogClose = false,
+  stickyTop = 0,
+  masked = false,
 }) {
   const sensors = useSensors(
     useSensor(PointerSensor, {
@@ -141,6 +168,12 @@ export default function PcFundTable({
   );
 
   const [activeId, setActiveId] = useState(null);
+  const [cardDialogRow, setCardDialogRow] = useState(null);
+  const tableContainerRef = useRef(null);
+  const portalHeaderRef = useRef(null);
+  const [showPortalHeader, setShowPortalHeader] = useState(false);
+  const [effectiveStickyTop, setEffectiveStickyTop] = useState(stickyTop);
+  const [portalHorizontal, setPortalHorizontal] = useState({ left: 0, right: 0 });
 
   const handleDragStart = (event) => {
     setActiveId(event.active.id);
@@ -234,6 +267,7 @@ export default function PcFundTable({
           })() : null,
           pcTableColumnVisibility: pc.visibility,
           pcTableColumns: Object.keys(pc.sizing).length ? pc.sizing : null,
+          pcShowFullFundName: group.pcShowFullFundName === true,
         };
       }
     });
@@ -243,6 +277,7 @@ export default function PcFundTable({
   const [configByGroup, setConfigByGroup] = useState(getInitialConfigByGroup);
 
   const currentGroupPc = configByGroup[groupKey];
+  const showFullFundName = currentGroupPc?.pcShowFullFundName ?? false;
   const defaultPc = getDefaultPcGroupConfig();
   const columnOrder = (() => {
     const order = currentGroupPc?.pcTableColumnOrder ?? defaultPc.order;
@@ -253,10 +288,18 @@ export default function PcFundTable({
   })();
   const columnVisibility = (() => {
     const vis = currentGroupPc?.pcTableColumnVisibility ?? null;
-    if (vis && typeof vis === 'object' && Object.keys(vis).length > 0) return vis;
+    if (vis && typeof vis === 'object' && Object.keys(vis).length > 0) {
+      const next = { ...vis };
+      if (next.relatedSector === undefined) next.relatedSector = false;
+      if (next.holdingDays === undefined) next.holdingDays = false;
+      return next;
+    }
     const allVisible = {};
     NON_FROZEN_COLUMN_IDS.forEach((id) => { allVisible[id] = true; });
-    return allVisible;
+    // 新增列：默认隐藏（用户可在表格设置中开启）
+      allVisible.relatedSector = false;
+      allVisible.holdingDays = false;
+      return allVisible;
   })();
   const columnSizing = (() => {
     const s = currentGroupPc?.pcTableColumns;
@@ -280,6 +323,7 @@ export default function PcFundTable({
       if (updates.pcTableColumnOrder !== undefined) group.pcTableColumnOrder = updates.pcTableColumnOrder;
       if (updates.pcTableColumnVisibility !== undefined) group.pcTableColumnVisibility = updates.pcTableColumnVisibility;
       if (updates.pcTableColumns !== undefined) group.pcTableColumns = updates.pcTableColumns;
+      if (updates.pcShowFullFundName !== undefined) group.pcShowFullFundName = updates.pcShowFullFundName;
       parsed[groupKey] = group;
       window.localStorage.setItem('customSettings', JSON.stringify(parsed));
       setConfigByGroup((prev) => ({ ...prev, [groupKey]: { ...prev[groupKey], ...updates } }));
@@ -287,6 +331,10 @@ export default function PcFundTable({
     } catch { }
   };
 
+  const handleToggleShowFullFundName = (show) => {
+    persistPcGroupConfig({ pcShowFullFundName: show });
+  };
+
   const setColumnOrder = (nextOrderOrUpdater) => {
     const next = typeof nextOrderOrUpdater === 'function'
       ? nextOrderOrUpdater(columnOrder)
@@ -322,6 +370,8 @@ export default function PcFundTable({
     NON_FROZEN_COLUMN_IDS.forEach((id) => {
       allVisible[id] = true;
     });
+    allVisible.relatedSector = false;
+    allVisible.holdingDays = false;
     setColumnVisibility(allVisible);
   };
   const handleToggleColumnVisibility = (columnId, visible) => {
@@ -332,6 +382,13 @@ export default function PcFundTable({
   const onRemoveFromGroupRef = useRef(onRemoveFromGroup);
   const onHoldingAmountClickRef = useRef(onHoldingAmountClick);
 
+  useEffect(() => {
+    if (closeDialogRef) {
+      closeDialogRef.current = () => setCardDialogRow(null);
+      return () => { closeDialogRef.current = null; };
+    }
+  }, [closeDialogRef]);
+
   useEffect(() => {
     onRemoveFundRef.current = onRemoveFund;
     onToggleFavoriteRef.current = onToggleFavorite;
@@ -344,7 +401,138 @@ export default function PcFundTable({
     onHoldingAmountClick,
   ]);
 
-  const FundNameCell = ({ info }) => {
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const getEffectiveStickyTop = () => {
+      const stickySummaryCard = document.querySelector('.group-summary-sticky .group-summary-card');
+      if (!stickySummaryCard) return stickyTop;
+
+      const stickySummaryWrapper = stickySummaryCard.closest('.group-summary-sticky');
+      if (!stickySummaryWrapper) return stickyTop;
+
+      const wrapperRect = stickySummaryWrapper.getBoundingClientRect();
+      const isSummaryStuck = wrapperRect.top <= stickyTop + 1;
+
+      return isSummaryStuck ? stickyTop + stickySummaryWrapper.offsetHeight : stickyTop;
+    };
+
+    const updateVerticalState = () => {
+      const nextStickyTop = getEffectiveStickyTop();
+      setEffectiveStickyTop((prev) => (prev === nextStickyTop ? prev : nextStickyTop));
+
+      const tableEl = tableContainerRef.current;
+      const scrollEl = tableEl?.closest('.table-scroll-area');
+      const targetEl = scrollEl || tableEl;
+      const rect = targetEl?.getBoundingClientRect();
+
+      if (!rect) {
+        setShowPortalHeader(window.scrollY >= nextStickyTop);
+        return;
+      }
+
+      const headerEl = tableEl?.querySelector('.table-header-row');
+      const headerHeight = headerEl?.getBoundingClientRect?.().height ?? 0;
+      const hasPassedHeader = (rect.top + headerHeight) <= nextStickyTop;
+      const hasTableInView = rect.bottom > nextStickyTop;
+
+      setShowPortalHeader(hasPassedHeader && hasTableInView);
+
+      setPortalHorizontal((prev) => {
+        const next = {
+          left: rect.left,
+          right: typeof window !== 'undefined' ? Math.max(0, window.innerWidth - rect.right) : 0,
+        };
+        if (prev.left === next.left && prev.right === next.right) return prev;
+        return next;
+      });
+    };
+
+    const throttledVerticalUpdate = throttle(updateVerticalState, 1000 / 60, { leading: true, trailing: true });
+
+    updateVerticalState();
+    window.addEventListener('scroll', throttledVerticalUpdate, { passive: true });
+    window.addEventListener('resize', throttledVerticalUpdate, { passive: true });
+    return () => {
+      window.removeEventListener('scroll', throttledVerticalUpdate);
+      window.removeEventListener('resize', throttledVerticalUpdate);
+      throttledVerticalUpdate.cancel();
+    };
+  }, [stickyTop]);
+
+  const relatedSectorEnabled = columnVisibility?.relatedSector !== false;
+  const relatedSectorCacheRef = useRef(new Map());
+  const [relatedSectorByCode, setRelatedSectorByCode] = useState({});
+
+  const fetchRelatedSector = async (code) => fetchRelatedSectors(code);
+
+  const runWithConcurrency = async (items, limit, worker) => {
+    const queue = [...items];
+    const results = [];
+    const runners = Array.from({ length: Math.max(1, limit) }, async () => {
+      while (queue.length) {
+        const item = queue.shift();
+        if (item == null) continue;
+         
+        results.push(await worker(item));
+      }
+    });
+    await Promise.all(runners);
+    return results;
+  };
+
+  useEffect(() => {
+    if (!relatedSectorEnabled) return;
+    if (!Array.isArray(data) || data.length === 0) return;
+
+    const codes = Array.from(new Set(data.map((d) => d?.code).filter(Boolean)));
+    const missing = codes.filter((code) => !relatedSectorCacheRef.current.has(code));
+    if (missing.length === 0) return;
+
+    let cancelled = false;
+    (async () => {
+      await runWithConcurrency(missing, 4, async (code) => {
+        const value = await fetchRelatedSector(code);
+        relatedSectorCacheRef.current.set(code, value);
+        if (cancelled) return;
+        setRelatedSectorByCode((prev) => {
+          if (prev[code] === value) return prev;
+          return { ...prev, [code]: value };
+        });
+      });
+    })();
+
+    return () => { cancelled = true; };
+  }, [relatedSectorEnabled, data]);
+
+  useEffect(() => {
+    const tableEl = tableContainerRef.current;
+    const portalEl = portalHeaderRef.current;
+    const scrollEl = tableEl?.closest('.table-scroll-area');
+    if (!scrollEl || !portalEl) return;
+
+    const syncScrollToPortal = () => {
+      portalEl.scrollLeft = scrollEl.scrollLeft;
+    };
+
+    const syncScrollToTable = () => {
+      scrollEl.scrollLeft = portalEl.scrollLeft;
+    };
+
+    syncScrollToPortal();
+
+    const handleTableScroll = () => syncScrollToPortal();
+    const handlePortalScroll = () => syncScrollToTable();
+
+    scrollEl.addEventListener('scroll', handleTableScroll, { passive: true });
+    portalEl.addEventListener('scroll', handlePortalScroll, { passive: true });
+
+    return () => {
+      scrollEl.removeEventListener('scroll', handleTableScroll);
+      portalEl.removeEventListener('scroll', handlePortalScroll);
+    };
+  }, [showPortalHeader]);
+
+  const FundNameCell = ({ info, showFullFundName, onOpenCardDialog }) => {
     const original = info.row.original || {};
     const code = original.code;
     const isUpdated = original.isUpdated;
@@ -354,13 +542,13 @@ export default function PcFundTable({
     const rowContext = useContext(SortableRowContext);
 
     return (
-      <div className="name-cell-content" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+      <div className="name-cell-content" style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-start', gap: 8 }}>
         {sortBy === 'default' && (
           <button
             className="icon-button drag-handle"
             ref={rowContext?.setActivatorNodeRef}
             {...rowContext?.listeners}
-            style={{ cursor: 'grab', padding: 2, margin: '-2px -4px -2px 0', color: 'var(--muted)', background: 'transparent', border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+            style={{ cursor: 'grab', width: 20, height: 20, padding: 2, margin: '0', flexShrink: 0, color: 'var(--muted)', background: 'transparent', border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
             title="拖拽排序"
             onClick={(e) => e.stopPropagation?.()}
           >
@@ -391,9 +579,17 @@ export default function PcFundTable({
             <StarIcon width="18" height="18" filled={isFavorites} />
           </button>
         )}
-        <div className="title-text">
+        <div
+          className="title-text"
+          role={onOpenCardDialog ? 'button' : undefined}
+          tabIndex={onOpenCardDialog ? 0 : undefined}
+          onClick={onOpenCardDialog ? (e) => { e.stopPropagation?.(); onOpenCardDialog(original); } : undefined}
+          onKeyDown={onOpenCardDialog ? (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onOpenCardDialog(original); } } : undefined}
+          style={onOpenCardDialog ? { cursor: 'pointer' } : undefined}
+          title={onOpenCardDialog ? '查看基金详情' : (original.isUpdated ? '今日净值已更新' : undefined)}
+        >
           <span
-            className={`name-text`}
+            className={`name-text ${showFullFundName ? 'show-full' : ''}`}
             title={isUpdated ? '今日净值已更新' : ''}
           >
             {info.getValue() ?? '—'}
@@ -416,22 +612,59 @@ export default function PcFundTable({
         size: 265,
         minSize: 140,
         enablePinning: true,
-        cell: (info) => <FundNameCell info={info} />,
+        cell: (info) => (
+          <FundNameCell
+            info={info}
+            showFullFundName={showFullFundName}
+            onOpenCardDialog={getFundCardProps ? (row) => setCardDialogRow(row) : undefined}
+          />
+        ),
         meta: {
           align: 'left',
           cellClassName: 'name-cell',
         },
       },
+      {
+        id: 'relatedSector',
+        header: '关联板块',
+        size: 180,
+        minSize: 120,
+        cell: (info) => {
+          const original = info.row.original || {};
+          const code = original.code;
+          const value = (code && (relatedSectorByCode?.[code] ?? relatedSectorCacheRef.current.get(code))) || '';
+          const display = value || '—';
+          return (
+            <div style={{ width: '100%', textAlign: value ? 'left' : 'right', fontSize: '14px' }}>
+              {display}
+            </div>
+          );
+        },
+        meta: {
+          align: 'right',
+          cellClassName: 'related-sector-cell',
+        },
+      },
       {
         accessorKey: 'latestNav',
         header: '最新净值',
         size: 100,
         minSize: 80,
-        cell: (info) => (
-          <FitText style={{ fontWeight: 700 }} maxFontSize={14} minFontSize={10}>
-            {info.getValue() ?? '—'}
-          </FitText>
-        ),
+        cell: (info) => {
+          const original = info.row.original || {};
+          const rawDate = original.latestNavDate ?? '-';
+          const date = typeof rawDate === 'string' && rawDate.length > 5 ? rawDate.slice(5) : rawDate;
+          return (
+            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 0 }}>
+              <FitText style={{ fontWeight: 700 }} maxFontSize={14} minFontSize={10} as="div">
+                {info.getValue() ?? '—'}
+              </FitText>
+              <span className="muted" style={{ fontSize: '11px' }}>
+                {date}
+              </span>
+            </div>
+          );
+        },
         meta: {
           align: 'right',
           cellClassName: 'value-cell',
@@ -442,11 +675,25 @@ export default function PcFundTable({
         header: '估算净值',
         size: 100,
         minSize: 80,
-        cell: (info) => (
-          <FitText style={{ fontWeight: 700 }} maxFontSize={14} minFontSize={10}>
-            {info.getValue() ?? '—'}
-          </FitText>
-        ),
+        cell: (info) => {
+          const original = info.row.original || {};
+          const rawDate = original.estimateNavDate ?? '-';
+          const date = typeof rawDate === 'string' && rawDate.length > 5 ? rawDate.slice(5) : rawDate;
+          const estimateNav = info.getValue();
+          const hasEstimateNav = estimateNav != null && estimateNav !== '—';
+          return (
+            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 0 }}>
+              <FitText style={{ fontWeight: 700 }} maxFontSize={14} minFontSize={10} as="div">
+                {estimateNav ?? '—'}
+              </FitText>
+              {hasEstimateNav && date && date !== '-' ? (
+                <span className="muted" style={{ fontSize: '11px' }}>
+                  {date}
+                </span>
+              ) : null}
+            </div>
+          );
+        },
         meta: {
           align: 'right',
           cellClassName: 'value-cell',
@@ -454,13 +701,14 @@ export default function PcFundTable({
       },
       {
         accessorKey: 'yesterdayChangePercent',
-        header: '昨日涨跌幅',
+        header: '昨日涨幅',
         size: 135,
         minSize: 100,
         cell: (info) => {
           const original = info.row.original || {};
           const value = original.yesterdayChangeValue;
-          const date = original.yesterdayDate ?? '-';
+          const rawDate = original.yesterdayDate ?? '-';
+          const date = typeof rawDate === 'string' && rawDate.length > 5 ? rawDate.slice(5) : rawDate;
           const cls = value > 0 ? 'up' : value < 0 ? 'down' : '';
           return (
             <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 0 }}>
@@ -480,23 +728,28 @@ export default function PcFundTable({
       },
       {
         accessorKey: 'estimateChangePercent',
-        header: '估值涨跌幅',
+        header: '估值涨幅',
         size: 135,
         minSize: 100,
         cell: (info) => {
           const original = info.row.original || {};
           const value = original.estimateChangeValue;
           const isMuted = original.estimateChangeMuted;
-          const time = original.estimateTime ?? '-';
+          const rawTime = original.estimateTime ?? '-';
+          const time = typeof rawTime === 'string' && rawTime.length > 5 ? rawTime.slice(5) : rawTime;
           const cls = isMuted ? 'muted' : value > 0 ? 'up' : value < 0 ? 'down' : '';
+          const text = info.getValue();
+          const hasText = text != null && text !== '—';
           return (
             <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 0 }}>
               <FitText className={cls} style={{ fontWeight: 700 }} maxFontSize={14} minFontSize={10} as="div">
-                {info.getValue() ?? '—'}
+                {text ?? '—'}
               </FitText>
-              <span className="muted" style={{ fontSize: '11px' }}>
-                {time}
-              </span>
+              {hasText && time && time !== '-' ? (
+                <span className="muted" style={{ fontSize: '11px' }}>
+                  {time}
+                </span>
+              ) : null}
             </div>
           );
         },
@@ -505,6 +758,39 @@ export default function PcFundTable({
           cellClassName: 'est-change-cell',
         },
       },
+      {
+        accessorKey: 'totalChangePercent',
+        header: '估算收益',
+        size: 135,
+        minSize: 100,
+        cell: (info) => {
+          const original = info.row.original || {};
+          const value = original.estimateProfitValue;
+          const hasProfit = value != null;
+          const cls = hasProfit ? (value > 0 ? 'up' : value < 0 ? 'down' : '') : 'muted';
+          const amountStr = hasProfit ? (original.estimateProfit ?? '') : '—';
+          const percentStr = original.estimateProfitPercent ?? '';
+
+          return (
+            <div style={{ width: '100%' }}>
+              <FitText className={cls} style={{ fontWeight: 700, display: 'block' }} maxFontSize={14} minFontSize={10}>
+                {masked && hasProfit ? <span className="mask-text">******</span> : amountStr}
+              </FitText>
+              {hasProfit && percentStr && !masked ? (
+                <span className={`${cls} estimate-profit-percent`} style={{ display: 'block', fontSize: '0.75em', opacity: 0.9, fontWeight: 500 }}>
+                  <FitText maxFontSize={11} minFontSize={9}>
+                    {percentStr}
+                  </FitText>
+                </span>
+              ) : null}
+            </div>
+          );
+        },
+        meta: {
+          align: 'right',
+          cellClassName: 'total-change-cell',
+        },
+      },
       {
         accessorKey: 'holdingAmount',
         header: '持仓金额',
@@ -546,7 +832,7 @@ export default function PcFundTable({
             >
               <div style={{ flex: '1 1 0', minWidth: 0 }}>
                 <FitText style={{ fontWeight: 700 }} maxFontSize={14} minFontSize={10}>
-                  {info.getValue() ?? '—'}
+                  {masked ? <span className="mask-text">******</span> : (info.getValue() ?? '—')}
                 </FitText>
               </div>
               <button
@@ -568,6 +854,28 @@ export default function PcFundTable({
           cellClassName: 'holding-amount-cell',
         },
       },
+      {
+        accessorKey: 'holdingDays',
+        header: '持有天数',
+        size: 100,
+        minSize: 80,
+        cell: (info) => {
+          const original = info.row.original || {};
+          const value = original.holdingDaysValue;
+          if (value == null) {
+            return <div className="muted" style={{ textAlign: 'right', fontSize: '12px' }}>—</div>;
+          }
+          return (
+            <div style={{ fontWeight: 700, textAlign: 'right' }}>
+              {value}
+            </div>
+          );
+        },
+        meta: {
+          align: 'right',
+          cellClassName: 'holding-days-cell',
+        },
+      },
       {
         accessorKey: 'todayProfit',
         header: '当日收益',
@@ -580,12 +888,13 @@ export default function PcFundTable({
           const cls = hasProfit ? (value > 0 ? 'up' : value < 0 ? 'down' : '') : 'muted';
           const amountStr = hasProfit ? (info.getValue() ?? '') : '—';
           const percentStr = original.todayProfitPercent ?? '';
+          const isUpdated = original.isUpdated;
           return (
             <div style={{ width: '100%' }}>
               <FitText className={cls} style={{ fontWeight: 700, display: 'block' }} maxFontSize={14} minFontSize={10}>
-                {amountStr}
+                {masked && hasProfit ? <span className="mask-text">******</span> : amountStr}
               </FitText>
-              {percentStr ? (
+              {percentStr && !masked ? (
                 <span className={`${cls} today-profit-percent`} style={{ display: 'block', fontSize: '0.75em', opacity: 0.9, fontWeight: 500 }}>
                   <FitText maxFontSize={11} minFontSize={9}>
                     {percentStr}
@@ -615,9 +924,9 @@ export default function PcFundTable({
           return (
             <div style={{ width: '100%' }}>
               <FitText className={cls} style={{ fontWeight: 700, display: 'block' }} maxFontSize={14} minFontSize={10}>
-                {amountStr}
+                {masked && hasTotal ? <span className="mask-text">******</span> : amountStr}
               </FitText>
-              {percentStr ? (
+              {percentStr && !masked ? (
                 <span className={`${cls} holding-profit-percent`} style={{ display: 'block', fontSize: '0.75em', opacity: 0.9, fontWeight: 500 }}>
                   <FitText maxFontSize={11} minFontSize={9}>
                     {percentStr}
@@ -670,7 +979,7 @@ export default function PcFundTable({
           };
 
           return (
-            <div className="row" style={{ justifyContent: 'center', gap: 4 }}>
+            <div className="row" style={{ justifyContent: 'center', gap: 4, padding: '8px 0' }}>
               <button
                 className="icon-button danger"
                 onClick={handleClick}
@@ -690,7 +999,7 @@ export default function PcFundTable({
         },
       },
     ],
-    [currentTab, favorites, refreshing, sortBy],
+    [currentTab, favorites, refreshing, sortBy, showFullFundName, getFundCardProps, masked, relatedSectorByCode],
   );
 
   const table = useReactTable({
@@ -749,22 +1058,89 @@ export default function PcFundTable({
       left: isLeft ? `${column.getStart('left')}px` : undefined,
       right: isRight ? `${column.getAfter('right')}px` : undefined,
       zIndex: isHeader ? 11 : 10,
-      backgroundColor: isHeader ? 'var(--table-pinned-header-bg)' : 'var(--row-bg)',
+      backgroundColor: isHeader ? 'var(--table-pinned-header-bg)' : 'var(--row-bg, var(--bg))',
       boxShadow: 'none',
       textAlign: isNameColumn ? 'left' : 'center',
       justifyContent: isNameColumn ? 'flex-start' : 'center',
     };
   };
 
+  const renderTableHeader = (forPortal = false) => {
+    if (!headerGroup) return null;
+    return (
+      <div className="table-header-row table-header-row-scroll">
+        {headerGroup.headers.map((header) => {
+          const style = getCommonPinningStyles(header.column, true);
+          const isNameColumn =
+            header.column.id === 'fundName' ||
+            header.column.columnDef?.accessorKey === 'fundName';
+          const isRightAligned = NON_FROZEN_COLUMN_IDS.includes(header.column.id);
+          const align = isNameColumn ? '' : isRightAligned ? 'text-right' : 'text-center';
+          return (
+            <div
+              key={header.id}
+              className={`table-header-cell ${align}`}
+              style={style}
+            >
+              <div style={{ paddingRight: isRightAligned ? '20px' : '0' }}>
+                {header.isPlaceholder
+                  ? null
+                  : flexRender(
+                    header.column.columnDef.header,
+                    header.getContext(),
+                  )}
+              </div>
+              {!forPortal && (
+                <div
+                  onMouseDown={header.column.getCanResize() ? header.getResizeHandler() : undefined}
+                  onTouchStart={header.column.getCanResize() ? header.getResizeHandler() : undefined}
+                  className={`resizer ${header.column.getIsResizing() ? 'isResizing' : ''
+                    } ${header.column.getCanResize() ? '' : 'disabled'}`}
+                />
+              )}
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
+  const totalHeaderWidth = headerGroup?.headers?.reduce((acc, h) => acc + h.column.getSize(), 0) ?? 0;
+
   return (
-    <div className="pc-fund-table">
-      <style>{`
+    <>
+      <div className="pc-fund-table" ref={tableContainerRef}>
+        <style>{`
         .table-row-scroll {
           --row-bg: var(--bg);
-          background-color: var(--row-bg);
+          background-color: var(--row-bg) !important;
         }
-        .table-row-scroll:hover {
+
+        /* 斑马纹行背景（非 hover 状态） */
+        .table-row-scroll:nth-child(even),
+        .table-row-scroll.row-even {
+          background-color: var(--table-row-alt-bg) !important;
+        }
+
+        /* Pinned cells 继承所在行的背景（非 hover 状态） */
+        .table-row-scroll .pinned-cell {
+          background-color: var(--row-bg) !important;
+        }
+        .table-row-scroll:nth-child(even) .pinned-cell,
+        .table-row-scroll.row-even .pinned-cell,
+        .row-even .pinned-cell {
+          background-color: var(--table-row-alt-bg) !important;
+        }
+
+        /* Hover 状态优先级最高，覆盖斑马纹和 pinned 背景 */
+        .table-row-scroll:hover,
+        .table-row-scroll.row-even:hover {
           --row-bg: var(--table-row-hover-bg);
+          background-color: var(--table-row-hover-bg) !important;
+        }
+        .table-row-scroll:hover .pinned-cell,
+        .table-row-scroll.row-even:hover .pinned-cell {
+          background-color: var(--table-row-hover-bg) !important;
         }
 
         /* 覆盖 grid 布局为 flex 以支持动态列宽 */
@@ -831,113 +1207,127 @@ export default function PcFundTable({
           opacity: 0;
         }
       `}</style>
-      {/* 表头 */}
-      {headerGroup && (
-        <div className="table-header-row table-header-row-scroll">
-          {headerGroup.headers.map((header) => {
-            const style = getCommonPinningStyles(header.column, true);
-            const isNameColumn =
-              header.column.id === 'fundName' ||
-              header.column.columnDef?.accessorKey === 'fundName';
-            const align = isNameColumn ? '' : 'text-center';
-            return (
-              <div
-                key={header.id}
-                className={`table-header-cell ${align}`}
-                style={style}
-              >
-                {header.isPlaceholder
-                  ? null
-                  : flexRender(
-                    header.column.columnDef.header,
-                    header.getContext(),
-                  )}
-                <div
-                  onMouseDown={header.column.getCanResize() ? header.getResizeHandler() : undefined}
-                  onTouchStart={header.column.getCanResize() ? header.getResizeHandler() : undefined}
-                  className={`resizer ${header.column.getIsResizing() ? 'isResizing' : ''
-                    } ${header.column.getCanResize() ? '' : 'disabled'}`}
-                />
-              </div>
-            );
-          })}
-        </div>
-      )}
+        {/* 表头 */}
+        {renderTableHeader(false)}
 
-      {/* 表体 */}
-      <DndContext
-        sensors={sensors}
-        collisionDetection={closestCenter}
-        onDragStart={handleDragStart}
-        onDragEnd={handleDragEnd}
-        onDragCancel={handleDragCancel}
-        modifiers={[restrictToVerticalAxis, restrictToParentElement]}
-      >
-        <SortableContext
-          items={data.map((item) => item.code)}
-          strategy={verticalListSortingStrategy}
+        {/* 表体 */}
+        <DndContext
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          onDragStart={handleDragStart}
+          onDragEnd={handleDragEnd}
+          onDragCancel={handleDragCancel}
+          modifiers={[restrictToVerticalAxis, restrictToParentElement]}
         >
-          <AnimatePresence mode="popLayout">
-            {table.getRowModel().rows.map((row) => (
-              <SortableRow key={row.original.code || row.id} row={row} isTableDragging={!!activeId} disabled={sortBy !== 'default'}>
-                <div
-                  className="table-row table-row-scroll"
-                >
-                  {row.getVisibleCells().map((cell) => {
-                    const columnId = cell.column.id || cell.column.columnDef?.accessorKey;
-                    const isNameColumn = columnId === 'fundName';
-                    const rightAlignedColumns = new Set([
-                      'latestNav',
-                      'estimateNav',
-                      'yesterdayChangePercent',
-                      'estimateChangePercent',
-                      'holdingAmount',
-                      'todayProfit',
-                      'holdingProfit',
-                    ]);
-                    const align = isNameColumn
-                      ? ''
-                      : rightAlignedColumns.has(columnId)
-                        ? 'text-right'
-                        : 'text-center';
-                    const cellClassName =
-                      (cell.column.columnDef.meta && cell.column.columnDef.meta.cellClassName) || '';
-                    const style = getCommonPinningStyles(cell.column, false);
-                    return (
-                      <div
-                        key={cell.id}
-                        className={`table-cell ${align} ${cellClassName}`}
-                        style={style}
-                      >
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext(),
-                        )}
-                      </div>
-                    );
-                  })}
-                </div>
-              </SortableRow>
-            ))}
-          </AnimatePresence>
-        </SortableContext>
-      </DndContext>
+          <SortableContext
+            items={data.map((item) => item.code)}
+            strategy={verticalListSortingStrategy}
+          >
+            <AnimatePresence mode="popLayout">
+              {table.getRowModel().rows.map((row, index) => (
+                <SortableRow key={row.original.code || row.id} row={row} isTableDragging={!!activeId} disabled={sortBy !== 'default'}>
+                  <div
+                    className={`table-row table-row-scroll ${index % 2 === 1 ? 'row-even' : ''}`}
+                  >
+                    {row.getVisibleCells().map((cell) => {
+                      const columnId = cell.column.id || cell.column.columnDef?.accessorKey;
+                      const isNameColumn = columnId === 'fundName';
+                      const align = isNameColumn
+                        ? ''
+                        : NON_FROZEN_COLUMN_IDS.includes(columnId)
+                          ? 'text-right'
+                          : 'text-center';
+                      const cellClassName =
+                        (cell.column.columnDef.meta && cell.column.columnDef.meta.cellClassName) || '';
+                      const style = getCommonPinningStyles(cell.column, false);
+                      const isPinned = cell.column.getIsPinned();
+                      return (
+                        <div
+                          key={cell.id}
+                          className={`table-cell ${align} ${cellClassName} ${isPinned ? 'pinned-cell' : ''}`}
+                          style={style}
+                        >
+                          {flexRender(
+                            cell.column.columnDef.cell,
+                            cell.getContext(),
+                          )}
+                        </div>
+                      );
+                    })}
+                  </div>
+                </SortableRow>
+              ))}
+            </AnimatePresence>
+          </SortableContext>
+        </DndContext>
 
-      {table.getRowModel().rows.length === 0 && (
-        <div className="table-row empty-row">
-          <div className="table-cell" style={{ textAlign: 'center' }}>
-            <span className="muted">暂无数据</span>
+        {table.getRowModel().rows.length === 0 && (
+          <div className="table-row empty-row">
+            <div className="table-cell" style={{ textAlign: 'center' }}>
+              <span className="muted">暂无数据</span>
+            </div>
           </div>
-        </div>
-      )}
-      {resetConfirmOpen && (
-        <ConfirmModal
-          title="重置列宽"
-          message="是否重置表格列宽为默认值？"
-          onConfirm={handleResetSizing}
-          onCancel={() => setResetConfirmOpen(false)}
-          confirmText="重置"
-        />
+        )}
+        {resetConfirmOpen && (
+          <ConfirmModal
+            title="重置列宽"
+            message="是否重置表格列宽为默认值？"
+            icon={<ResetIcon width="20" height="20" className="shrink-0 text-[var(--primary)]" />}
+            confirmVariant="primary"
+            onConfirm={handleResetSizing}
+            onCancel={() => setResetConfirmOpen(false)}
+            confirmText="重置"
+          />
+        )}
+        {showPortalHeader && ReactDOM.createPortal(
+          <div
+            className="pc-fund-table pc-fund-table-portal-header"
+            ref={portalHeaderRef}
+            style={{
+              position: 'fixed',
+              top: effectiveStickyTop,
+              left: portalHorizontal.left,
+              right: portalHorizontal.right,
+              zIndex: 10,
+              overflowX: 'auto',
+              scrollbarWidth: 'none',
+            }}
+          >
+            <div
+              className="table-header-row table-header-row-scroll"
+              style={{ minWidth: totalHeaderWidth, width: 'fit-content' }}
+            >
+              {headerGroup?.headers.map((header) => {
+                const style = getCommonPinningStyles(header.column, true);
+                const isNameColumn =
+                  header.column.id === 'fundName' ||
+                  header.column.columnDef?.accessorKey === 'fundName';
+                const isRightAligned = NON_FROZEN_COLUMN_IDS.includes(header.column.id);
+                const align = isNameColumn ? '' : isRightAligned ? 'text-right' : 'text-center';
+                return (
+                  <div
+                    key={header.id}
+                    className={`table-header-cell ${align}`}
+                    style={style}
+                  >
+                    <div style={{ paddingRight: isRightAligned ? '20px' : '0' }}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>,
+          document.body
+        )}
+      </div>
+      {!!(cardDialogRow && getFundCardProps) && (
+        <FundDetailDialog blockDialogClose={blockDialogClose} cardDialogRow={cardDialogRow} getFundCardProps={getFundCardProps} setCardDialogRow={setCardDialogRow} />
       )}
       <PcTableSettingModal
         open={settingModalOpen}
@@ -951,7 +1341,39 @@ export default function PcFundTable({
         onResetColumnOrder={handleResetColumnOrder}
         onResetColumnVisibility={handleResetColumnVisibility}
         onResetSizing={() => setResetConfirmOpen(true)}
+        showFullFundName={showFullFundName}
+        onToggleShowFullFundName={handleToggleShowFullFundName}
       />
-    </div>
+    </>
+
   );
 }
+
+function FundDetailDialog({ blockDialogClose, cardDialogRow, getFundCardProps, setCardDialogRow}) {
+  return (
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open && !blockDialogClose) setCardDialogRow(null);
+      }}
+    >
+      <DialogContent
+        className="sm:max-w-2xl max-h-[88vh] flex flex-col p-0 overflow-hidden"
+        onPointerDownOutside={blockDialogClose ? (e) => e.preventDefault() : undefined}
+      >
+        <DialogHeader className="flex-shrink-0 flex flex-row items-center justify-between gap-2 space-y-0 px-6 pb-4 pt-6 text-left border-b border-[var(--border)]">
+          <DialogTitle className="text-base font-semibold text-[var(--text)]">
+            基金详情
+          </DialogTitle>
+        </DialogHeader>
+        <div
+          className="flex-1 min-h-0 overflow-y-auto px-6 py-4 scrollbar-y-styled"
+        >
+          {cardDialogRow && getFundCardProps ? (
+            <FundCard {...getFundCardProps(cardDialogRow)} layoutMode="drawer" />
+          ) : null}
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

app/components/PcTableSettingModal.jsx

@@ -18,6 +18,8 @@ import { CloseIcon, DragIcon, ResetIcon, SettingsIcon } from './Icons';
  * @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,
@@ -29,6 +31,8 @@ export default function PcTableSettingModal({
   onResetColumnOrder,
   onResetColumnVisibility,
   onResetSizing,
+  showFullFundName,
+  onToggleShowFullFundName,
 }) {
   const [resetOrderConfirmOpen, setResetOrderConfirmOpen] = useState(false);
 
@@ -91,6 +95,45 @@ export default function PcTableSettingModal({
             </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={{
@@ -163,7 +206,19 @@ export default function PcTableSettingModal({
                         >
                           <DragIcon width="18" height="18" />
                         </div>
-                        <span style={{ flex: 1, fontSize: '14px' }}>{item.header}</span>
+                        <div style={{ flex: 1, fontSize: '14px', display: 'flex', flexDirection: 'column', gap: 2 }}>
+                          <span>{item.header}</span>
+                          {item.id === 'totalChangePercent' && (
+                            <span className="muted" style={{ fontSize: '12px' }}>
+                              估值涨幅与持有收益的汇总
+                            </span>
+                          )}
+                          {item.id === 'relatedSector' && (
+                            <span className="muted" style={{ fontSize: '12px' }}>
+                              仅 fund.cc.cd 地址支持
+                            </span>
+                          )}
+                        </div>
                         {onToggleColumnVisibility && (
                           <button
                             type="button"
@@ -224,6 +279,8 @@ export default function PcTableSettingModal({
           key="reset-order-confirm"
           title="重置表头设置"
           message="是否重置表头顺序和显示/隐藏为默认值？"
+          icon={<ResetIcon width="20" height="20" className="shrink-0 text-[var(--primary)]" />}
+          confirmVariant="primary"
           onConfirm={() => {
             onResetColumnOrder?.();
             onResetColumnVisibility?.();

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/ScanImportConfirmModal.jsx

@@ -3,6 +3,14 @@
 import { useState } from 'react';
 import { motion } from 'framer-motion';
 import { CloseIcon } from './Icons';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
 
 export default function ScanImportConfirmModal({
   scannedFunds,
@@ -15,9 +23,10 @@ export default function ScanImportConfirmModal({
   isOcrScan = false
 }) {
   const [selectedGroupId, setSelectedGroupId] = useState('all');
+  const [expandAfterAdd, setExpandAfterAdd] = useState(true);
 
   const handleConfirm = () => {
-    onConfirm(selectedGroupId);
+    onConfirm(selectedGroupId, expandAfterAdd);
   };
 
   const formatAmount = (val) => {
@@ -119,20 +128,27 @@ export default function ScanImportConfirmModal({
                 );
               })}
             </div>
+            <div style={{ marginTop: 12, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
+              <span className="muted" style={{ fontSize: 13 }}>添加后展开详情</span>
+              <Switch
+                checked={expandAfterAdd}
+                onCheckedChange={(checked) => setExpandAfterAdd(!!checked)}
+              />
+            </div>
             <div style={{ marginTop: 12, display: 'flex', alignItems: 'center', gap: 8 }}>
               <span className="muted" style={{ fontSize: 13, whiteSpace: 'nowrap' }}>添加到分组：</span>
-              <select
-                className="select"
-                value={selectedGroupId}
-                onChange={(e) => setSelectedGroupId(e.target.value)}
-                style={{ flex: 1 }}
-              >
-                <option value="all">全部</option>
-                <option value="fav">自选</option>
-                {groups.filter(g => g.id !== 'all' && g.id !== 'fav').map(g => (
-                  <option key={g.id} value={g.id}>{g.name}</option>
-                ))}
-              </select>
+              <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>
           </>
         )}

app/components/SettingsModal.jsx

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

app/components/SortSettingModal.jsx

@@ -0,0 +1,575 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { AnimatePresence, motion, Reorder } from "framer-motion";
+import { createPortal } from "react-dom";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerClose,
+} from "@/components/ui/drawer";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { CloseIcon, DragIcon, ResetIcon, SettingsIcon } from "./Icons";
+import ConfirmModal from "./ConfirmModal";
+
+/**
+ * 排序个性化设置弹框
+ *
+ * - 移动端：使用 Drawer（自底向上抽屉，参考市场指数设置）
+ * - PC 端：使用右侧侧弹框（样式参考 PcTableSettingModal）
+ *
+ * @param {Object} props
+ * @param {boolean} props.open - 是否打开
+ * @param {() => void} props.onClose - 关闭回调
+ * @param {boolean} props.isMobile - 是否为移动端（由上层传入）
+ * @param {Array<{id: string, label: string, enabled: boolean}>} props.rules - 排序规则列表
+ * @param {(nextRules: Array<{id: string, label: string, enabled: boolean}>) => void} props.onChangeRules - 规则变更回调
+ */
+export default function SortSettingModal({
+  open,
+  onClose,
+  isMobile,
+  rules = [],
+  onChangeRules,
+  onResetRules,
+  sortDisplayMode = "buttons",
+  onChangeSortDisplayMode,
+}) {
+  const [localRules, setLocalRules] = useState(rules);
+  const [editingId, setEditingId] = useState(null);
+  const [editingAlias, setEditingAlias] = useState("");
+  const [resetConfirmOpen, setResetConfirmOpen] = useState(false);
+
+  useEffect(() => {
+    if (open) {
+      const defaultRule = (rules || []).find((item) => item.id === "default");
+      const otherRules = (rules || []).filter((item) => item.id !== "default");
+      const ordered = defaultRule ? [defaultRule, ...otherRules] : otherRules;
+      setLocalRules(ordered);
+      const prev = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.body.style.overflow = prev;
+      };
+    }
+  }, [open, rules]);
+
+  const handleReorder = (nextItems) => {
+    // 基于当前 localRules 计算新顺序（默认规则固定在首位）
+    const defaultRule = (localRules || []).find((item) => item.id === "default");
+    const combined = defaultRule ? [defaultRule, ...nextItems] : nextItems;
+    setLocalRules(combined);
+    if (onChangeRules) {
+      queueMicrotask(() => {
+        onChangeRules(combined);
+      });
+    }
+  };
+
+  const handleToggle = (id) => {
+    const next = (localRules || []).map((item) =>
+      item.id === id ? { ...item, enabled: !item.enabled } : item
+    );
+    setLocalRules(next);
+    if (onChangeRules) {
+      queueMicrotask(() => {
+        onChangeRules(next);
+      });
+    }
+  };
+
+  const startEditAlias = (item) => {
+    if (!item || item.id === "default") return;
+    setEditingId(item.id);
+    setEditingAlias(item.alias || "");
+  };
+
+  const commitAlias = () => {
+    if (!editingId) return;
+    let nextRules = null;
+    setLocalRules((prev) => {
+      const next = prev.map((item) =>
+        item.id === editingId
+          ? { ...item, alias: editingAlias.trim() || undefined }
+          : item
+      );
+      nextRules = next;
+      return next;
+    });
+    if (nextRules) {
+      // 将父组件状态更新放到微任务中，避免在 SortSettingModal 渲染过程中直接更新 HomePage
+      queueMicrotask(() => {
+        onChangeRules?.(nextRules);
+      });
+    }
+    setEditingId(null);
+    setEditingAlias("");
+  };
+
+  const cancelAlias = () => {
+    setEditingId(null);
+    setEditingAlias("");
+  };
+
+  if (!open) return null;
+
+  const body = (
+    <div
+      className={
+        isMobile
+          ? "mobile-setting-body flex flex-1 flex-col overflow-y-auto"
+          : "pc-table-setting-body"
+      }
+    >
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: 12,
+          marginBottom: 16,
+        }}
+      >
+        <h3
+          className="pc-table-setting-subtitle"
+          style={{ margin: 0, fontSize: 14 }}
+        >
+          排序形式
+        </h3>
+        <div style={{ display: "flex", justifyContent: "flex-end", marginLeft: "auto" }}>
+          <RadioGroup
+            value={sortDisplayMode}
+            onValueChange={(value) => onChangeSortDisplayMode?.(value)}
+            className="flex flex-row items-center gap-4"
+          >
+            <label
+              htmlFor="sort-display-mode-buttons"
+              style={{
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 6,
+                fontSize: 13,
+                color: "var(--text)",
+                cursor: "pointer",
+              }}
+            >
+              <RadioGroupItem id="sort-display-mode-buttons" value="buttons" />
+              <span>按钮</span>
+            </label>
+            <label
+              htmlFor="sort-display-mode-dropdown"
+              style={{
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 6,
+                fontSize: 13,
+                color: "var(--text)",
+                cursor: "pointer",
+              }}
+            >
+              <RadioGroupItem id="sort-display-mode-dropdown" value="dropdown" />
+              <span>下拉单选</span>
+            </label>
+          </RadioGroup>
+        </div>
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: 4,
+          marginBottom: 16,
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: 8,
+          }}
+        >
+          <h3
+            className="pc-table-setting-subtitle"
+            style={{ margin: 0, fontSize: 14 }}
+          >
+            排序规则
+          </h3>
+          {onResetRules && (
+            <button
+              type="button"
+              className="icon-button"
+              onClick={() => setResetConfirmOpen(true)}
+              title="重置排序规则"
+              style={{
+                border: "none",
+                width: 28,
+                height: 28,
+                backgroundColor: "transparent",
+                color: "var(--muted-foreground)",
+                flexShrink: 0,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              <ResetIcon width="16" height="16" />
+            </button>
+          )}
+        </div>
+        <p
+          className="muted"
+          style={{ fontSize: 12, margin: 0, color: "var(--muted-foreground)" }}
+        >
+          可拖拽调整优先级，右侧开关控制是否启用该排序规则。点击规则名称可编辑别名（例如“估值涨幅”的别名为“涨跌幅”）。
+        </p>
+      </div>
+
+      {localRules.length === 0 ? (
+        <div
+          className="muted"
+          style={{
+            textAlign: "center",
+            padding: "24px 0",
+            fontSize: 14,
+          }}
+        >
+          暂无可配置的排序规则。
+        </div>
+      ) : (
+        <>
+          {/* 默认排序固定在顶部，且不可排序、不可关闭 */}
+          {localRules.find((item) => item.id === "default") && (
+            <div
+              className={
+                (isMobile ? "mobile-setting-item" : "pc-table-setting-item") +
+                " glass"
+              }
+              style={{
+                display: "flex",
+                alignItems: "center",
+                marginBottom: 8,
+              }}
+            >
+              <div
+                style={{
+                  width: 18,
+                  height: 18,
+                  marginLeft: 4,
+                }}
+              />
+              <div
+                style={{
+                  flex: 1,
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: 2,
+                }}
+              >
+                <span style={{ fontSize: 14 }}>
+                  {localRules.find((item) => item.id === "default")?.label ||
+                    "默认"}
+                </span>
+              </div>
+            </div>
+          )}
+
+          {/* 其他规则支持拖拽和开关 */}
+        <Reorder.Group
+          axis="y"
+          values={localRules.filter((item) => item.id !== "default")}
+          onReorder={handleReorder}
+          className={isMobile ? "mobile-setting-list" : "pc-table-setting-list"}
+          layoutScroll={isMobile}
+          style={isMobile ? { touchAction: "none" } : undefined}
+        >
+          <AnimatePresence mode="popLayout">
+            {localRules
+              .filter((item) => item.id !== "default")
+              .map((item) => (
+              <Reorder.Item
+                key={item.id}
+                value={item}
+                className={
+                  (isMobile ? "mobile-setting-item" : "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 },
+                }}
+                style={isMobile ? { touchAction: "none" } : undefined}
+              >
+                <div
+                  className="drag-handle"
+                  style={{
+                    cursor: "grab",
+                    display: "flex",
+                    alignItems: "center",
+                    padding: "0 8px",
+                    color: "var(--muted)",
+                  }}
+                >
+                  <DragIcon width="18" height="18" />
+                </div>
+                <div
+                  style={{
+                    flex: 1,
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: 2,
+                  }}
+                >
+                  {editingId === item.id ? (
+                    <div style={{ display: "flex", gap: 6 }}>
+                      <input
+                        autoFocus
+                        value={editingAlias}
+                        onChange={(e) => setEditingAlias(e.target.value)}
+                        onBlur={commitAlias}
+                        onKeyDown={(e) => {
+                          if (e.key === "Enter") {
+                            e.preventDefault();
+                            commitAlias();
+                          } else if (e.key === "Escape") {
+                            e.preventDefault();
+                            cancelAlias();
+                          }
+                        }}
+                        placeholder="输入别名，如涨跌幅"
+                        style={{
+                          flex: 1,
+                          // 使用 >=16px 的字号，避免移动端聚焦时页面放大
+                          fontSize: 16,
+                          padding: "4px 8px",
+                          borderRadius: 6,
+                          border: "1px solid var(--border)",
+                          background: "transparent",
+                          color: "var(--text)",
+                          outline: "none",
+                        }}
+                      />
+                    </div>
+                  ) : (
+                    <>
+                      <button
+                        type="button"
+                        onClick={() => startEditAlias(item)}
+                        style={{
+                          padding: 0,
+                          margin: 0,
+                          border: "none",
+                          background: "transparent",
+                          textAlign: "left",
+                          fontSize: 14,
+                          color: "inherit",
+                          cursor: "pointer",
+                        }}
+                        title="点击修改别名"
+                      >
+                        {item.label}
+                      </button>
+                      {item.alias && (
+                        <span
+                          className="muted"
+                          style={{
+                            fontSize: 12,
+                            color: "var(--muted-foreground)",
+                          }}
+                        >
+                          {item.alias}
+                        </span>
+                      )}
+                    </>
+                  )}
+                </div>
+                {item.id !== "default" && (
+                  <button
+                    type="button"
+                    className={
+                      isMobile ? "icon-button" : "icon-button pc-table-column-switch"
+                    }
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleToggle(item.id);
+                    }}
+                    title={item.enabled ? "关闭" : "开启"}
+                    style={
+                      isMobile
+                        ? {
+                            border: "none",
+                            backgroundColor: "transparent",
+                            cursor: "pointer",
+                            flexShrink: 0,
+                            display: "flex",
+                            alignItems: "center",
+                          }
+                        : {
+                            border: "none",
+                            padding: "0 4px",
+                            backgroundColor: "transparent",
+                            cursor: "pointer",
+                            flexShrink: 0,
+                            display: "flex",
+                            alignItems: "center",
+                          }
+                    }
+                  >
+                    <span
+                      className={`dca-toggle-track ${
+                        item.enabled ? "enabled" : ""
+                      }`}
+                    >
+                      <span
+                        className="dca-toggle-thumb"
+                        style={{ left: item.enabled ? 16 : 2 }}
+                      />
+                    </span>
+                  </button>
+                )}
+              </Reorder.Item>
+            ))}
+          </AnimatePresence>
+        </Reorder.Group>
+        </>
+      )}
+    </div>
+  );
+
+  const resetConfirm = (
+    <AnimatePresence>
+      {resetConfirmOpen && (
+        <ConfirmModal
+          key="reset-sort-rules-confirm"
+          title="重置排序规则"
+          message="是否将排序规则恢复为默认配置？这会重置顺序、开关状态以及别名设置。"
+          icon={
+            <ResetIcon
+              width="20"
+              height="20"
+              className="shrink-0 text-[var(--primary)]"
+            />
+          }
+          confirmVariant="primary"
+          confirmText="恢复默认"
+          onConfirm={() => {
+            setResetConfirmOpen(false);
+            queueMicrotask(() => {
+              onResetRules?.();
+            });
+          }}
+          onCancel={() => setResetConfirmOpen(false)}
+        />
+      )}
+    </AnimatePresence>
+  );
+
+  if (isMobile) {
+    return (
+      <Drawer
+        open={open}
+        onOpenChange={(v) => {
+          if (!v) onClose?.();
+        }}
+        direction="bottom"
+      >
+        <DrawerContent
+          className="glass"
+          defaultHeight="70vh"
+          minHeight="40vh"
+          maxHeight="90vh"
+        >
+          <DrawerHeader className="flex flex-row items-center justify-between gap-2 py-4">
+            <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="flex-1 overflow-y-auto">{body}</div>
+        </DrawerContent>
+        {resetConfirm}
+      </Drawer>
+    );
+  }
+
+  if (typeof document === "undefined") return null;
+
+  const content = (
+    <AnimatePresence>
+      {open && (
+        <motion.div
+          key="sort-setting-overlay"
+          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, alignItems: "stretch" }}
+        >
+          <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()}
+            style={{
+              width: 420,
+              maxWidth: 480,
+            }}
+          >
+            <div className="pc-table-setting-header">
+              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+                <SettingsIcon width="20" height="20" />
+                <span>排序个性化设置</span>
+              </div>
+              <button
+                type="button"
+                className="icon-button"
+                onClick={onClose}
+                title="关闭"
+                style={{ border: "none", background: "transparent" }}
+              >
+                <CloseIcon width="20" height="20" />
+              </button>
+            </div>
+
+            {body}
+          </motion.aside>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+
+  return createPortal(
+    <>
+      {content}
+      {resetConfirm}
+    </>,
+    document.body
+  );
+}

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,15 +1,22 @@
 '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';
 import { isNumber } from 'lodash';
-import { fetchSmartFundNetValue } from '../api/fund';
+import { fetchFundPingzhongdata, 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';
+import { Spinner } from '@/components/ui/spinner';
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
@@ -33,12 +40,65 @@ export default function TradeModal({ type, fund, holding, onClose, onConfirm, pe
   const [share, setShare] = useState('');
   const [amount, setAmount] = useState('');
   const [feeRate, setFeeRate] = useState('0');
+  const [minBuyAmount, setMinBuyAmount] = useState(0);
+  const [loadingBuyMeta, setLoadingBuyMeta] = useState(false);
+  const [buyMetaError, setBuyMetaError] = useState(null);
   const [date, setDate] = useState(() => {
     return formatDate();
   });
   const [isAfter3pm, setIsAfter3pm] = useState(nowInTz().hour() >= 15);
   const [calcShare, setCalcShare] = useState(null);
 
+  const parseNumberish = (input) => {
+    if (input === null || typeof input === 'undefined') return null;
+    if (typeof input === 'number') return Number.isFinite(input) ? input : null;
+    const cleaned = String(input).replace(/[^\d.]/g, '');
+    const n = parseFloat(cleaned);
+    return Number.isFinite(n) ? n : null;
+  };
+
+  useEffect(() => {
+    if (!isBuy || !fund?.code) return;
+    let cancelled = false;
+
+    setLoadingBuyMeta(true);
+    setBuyMetaError(null);
+
+    fetchFundPingzhongdata(fund.code)
+      .then((pz) => {
+        if (cancelled) return;
+        const rate = parseNumberish(pz?.fund_Rate);
+        const minsg = parseNumberish(pz?.fund_minsg);
+
+        if (Number.isFinite(minsg)) {
+          setMinBuyAmount(minsg);
+        } else {
+          setMinBuyAmount(0);
+        }
+
+        if (Number.isFinite(rate)) {
+          setFeeRate((prev) => {
+            const prevNum = parseNumberish(prev);
+            const shouldOverride = prev === '' || prev === '0' || prevNum === 0 || prevNum === null;
+            return shouldOverride ? rate.toFixed(2) : prev;
+          });
+        }
+      })
+      .catch((e) => {
+        if (cancelled) return;
+        setBuyMetaError(e?.message || '买入信息加载失败');
+        setMinBuyAmount(0);
+      })
+      .finally(() => {
+        if (cancelled) return;
+        setLoadingBuyMeta(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [isBuy, fund?.code]);
+
   const currentPendingTrades = useMemo(() => {
     return pendingTrades.filter(t => t.fundCode === fund?.code);
   }, [pendingTrades, fund]);
@@ -142,7 +202,7 @@ export default function TradeModal({ type, fund, holding, onClose, onConfirm, pe
   };
 
   const isValid = isBuy
-    ? (!!amount && !!feeRate && !!date && calcShare !== null)
+    ? (!!amount && !!feeRate && !!date && calcShare !== null && !loadingBuyMeta && (parseFloat(amount) || 0) >= (Number(minBuyAmount) || 0))
     : (!!share && !!date);
 
   const handleSetShareFraction = (fraction) => {
@@ -153,36 +213,33 @@ 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 }}
+    <Dialog open onOpenChange={handleOpenChange}>
+      <DialogContent
+        showCloseButton={false}
         className="glass card modal trade-modal"
-        onClick={(e) => e.stopPropagation()}
-        style={{ maxWidth: '420px' }}
+        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
             className="trade-pending-alert"
             onClick={() => setShowPendingList(true)}
@@ -192,49 +249,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 trade-pending-header">
-              <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} 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
-                        className="button secondary trade-revoke-btn"
-                        onClick={() => setRevokeTrade(trade)}
-                        style={{ padding: '2px 8px', fontSize: '10px', height: 'auto' }}
-                      >
-                        撤销
-                      </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>
@@ -316,10 +330,10 @@ export default function TradeModal({ type, fund, holding, onClose, onConfirm, pe
                     </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>
@@ -398,7 +412,7 @@ export default function TradeModal({ type, fund, holding, onClose, onConfirm, pe
                     </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 }}
@@ -412,72 +426,112 @@ export default function TradeModal({ type, fund, holding, onClose, onConfirm, pe
               <form onSubmit={handleSubmit}>
                 {isBuy ? (
                   <>
-                    <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 ? '1px solid var(--danger)' : '1px solid var(--border)', borderRadius: 12 }}>
-                        <NumericInput
-                          value={amount}
-                          onChange={setAmount}
-                          step={100}
-                          min={0}
-                          placeholder="请输入加仓金额"
-                        />
-                      </div>
-                    </div>
+                    <div style={{ position: 'relative' }}>
+                      <div style={{ pointerEvents: loadingBuyMeta ? 'none' : 'auto', opacity: loadingBuyMeta ? 0.55 : 1 }}>
+                        <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 || (Number(minBuyAmount) > 0 && (parseFloat(amount) || 0) < Number(minBuyAmount)))
+                                ? '1px solid var(--danger)'
+                                : '1px solid var(--border)',
+                              borderRadius: 12
+                            }}
+                          >
+                            <NumericInput
+                              value={amount}
+                              onChange={setAmount}
+                              step={100}
+                              min={Number(minBuyAmount) || 0}
+                              placeholder={(Number(minBuyAmount) || 0) > 0 ? `最少 ¥${Number(minBuyAmount)}，请输入加仓金额` : '请输入加仓金额'}
+                            />
+                          </div>
+                          {(Number(minBuyAmount) || 0) > 0 && (
+                            <div className="muted" style={{ fontSize: '12px', marginTop: 6 }}>
+                              最小加仓金额：¥{Number(minBuyAmount)}
+                            </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>
-                        </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 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 className="form-group" style={{ flex: 1 }}>
+                            <label className="muted" style={{ display: 'block', marginBottom: 8, fontSize: '14px' }}>
+                              加仓日期 <span style={{ color: 'var(--danger)' }}>*</span>
+                            </label>
+                            <DatePicker value={date} onChange={setDate} />
+                          </div>
+                        </div>
+
+                        <div className="form-group" style={{ marginBottom: 12 }}>
+                          <label className="muted" style={{ display: 'block', marginBottom: 8, fontSize: '14px' }}>
+                            交易时段
+                          </label>
+                          <div className="trade-time-slot row" style={{ gap: 8 }}>
+                            <button
+                              type="button"
+                              className={!isAfter3pm ? 'trade-time-btn active' : 'trade-time-btn'}
+                              onClick={() => setIsAfter3pm(false)}
+                            >
+                              15:00前
+                            </button>
+                            <button
+                              type="button"
+                              className={isAfter3pm ? 'trade-time-btn active' : 'trade-time-btn'}
+                              onClick={() => setIsAfter3pm(true)}
+                            >
+                              15:00后
+                            </button>
+                          </div>
+                        </div>
+
+                        <div style={{ marginBottom: 12, fontSize: '12px' }}>
+                          {buyMetaError ? (
+                            <span className="muted" style={{ color: 'var(--danger)' }}>{buyMetaError}</span>
+                          ) : null}
+                          {loadingPrice ? (
+                            <span className="muted">正在查询净值数据...</span>
+                          ) : price === 0 ? null : (
+                            <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+                              <span className="muted">参考净值: {Number(price).toFixed(4)}</span>
+                            </div>
+                          )}
                         </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>
-                        <DatePicker value={date} onChange={setDate} />
-                      </div>
-                    </div>
 
-                    <div className="form-group" style={{ marginBottom: 12 }}>
-                      <label className="muted" style={{ display: 'block', marginBottom: 8, fontSize: '14px' }}>
-                        交易时段
-                      </label>
-                      <div className="trade-time-slot row" style={{ gap: 8 }}>
-                        <button
-                          type="button"
-                          className={!isAfter3pm ? 'trade-time-btn active' : 'trade-time-btn'}
-                          onClick={() => setIsAfter3pm(false)}
+                      {loadingBuyMeta && (
+                        <div
+                          style={{
+                            position: 'absolute',
+                            inset: 0,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            gap: 10,
+                            padding: 12,
+                            borderRadius: 12,
+                            background: 'rgba(0,0,0,0.25)',
+                            backdropFilter: 'blur(2px)',
+                            WebkitBackdropFilter: 'blur(2px)',
+                          }}
                         >
-                          15:00前
-                        </button>
-                        <button
-                          type="button"
-                          className={isAfter3pm ? 'trade-time-btn active' : 'trade-time-btn'}
-                          onClick={() => setIsAfter3pm(true)}
-                        >
-                          15:00后
-                        </button>
-                      </div>
-                    </div>
-
-                    <div style={{ marginBottom: 12, fontSize: '12px' }}>
-                      {loadingPrice ? (
-                        <span className="muted">正在查询净值数据...</span>
-                      ) : price === 0 ? null : (
-                        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
-                          <span className="muted">参考净值: {Number(price).toFixed(4)}</span>
+                          <Spinner className="size-5" />
+                          <span className="muted" style={{ fontSize: 12 }}>正在加载买入费率/最小金额...</span>
                         </div>
                       )}
                     </div>
@@ -604,17 +658,15 @@ export default function TradeModal({ type, fund, holding, onClose, onConfirm, pe
                   <button
                     type="submit"
                     className="button"
-                    disabled={!isValid || loadingPrice}
-                    style={{ flex: 1, opacity: (!isValid || loadingPrice) ? 0.6 : 1 }}
+                    disabled={!isValid || loadingPrice || (isBuy && loadingBuyMeta)}
+                    style={{ flex: 1, opacity: (!isValid || loadingPrice || (isBuy && loadingBuyMeta)) ? 0.6 : 1 }}
                   >
                     确定
                   </button>
                 </div>
               </form>
             )}
-          </>
-        )}
-      </motion.div>
+      </DialogContent>
       <AnimatePresence>
         {revokeTrade && (
           <ConfirmModal
@@ -630,6 +682,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,9 +1,15 @@
 '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,
@@ -12,7 +18,7 @@ export default function TransactionHistoryModal({
   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 }}
+    <Dialog open onOpenChange={handleOpenChange}>
+      <DialogContent
+        showCloseButton={false}
         className="glass card modal tx-history-modal"
-        onClick={(e) => e.stopPropagation()}
-        style={{ maxWidth: '480px', maxHeight: '80vh', display: 'flex', flexDirection: 'column' }}
+        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>
@@ -76,7 +97,7 @@ export default function TransactionHistoryModal({
           <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>
@@ -108,13 +129,16 @@ export default function TransactionHistoryModal({
                   </div>
                   <div className="row" style={{ justifyContent: 'space-between', fontSize: '12px', marginTop: 8 }}>
                     <span className="tx-history-pending-status">等待净值更新...</span>
-                    <button
-                      className="button secondary tx-history-action-btn"
+                    <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' }}
+                      style={{ paddingInline: 10 }}
                     >
                       撤销
-                    </button>
+                    </Button>
                   </div>
                 </div>
               ))}
@@ -158,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 tx-history-action-btn"
+                    <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' }}
+                      style={{ paddingInline: 10 }}
                     >
                       删除记录
-                    </button>
+                    </Button>
                   </div>
                 </div>
               ))
@@ -172,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/UpdatePromptModal.jsx

@@ -1,33 +1,26 @@
 'use client';
 
-import { motion } from 'framer-motion';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { UpdateIcon } from './Icons';
 
-export default function UpdatePromptModal({ updateContent, onClose, onRefresh }) {
+export default function UpdatePromptModal({ updateContent, open, onClose, onRefresh }) {
   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: 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"
+    <Dialog open={open} onOpenChange={(v) => !v && onClose?.()}>
+      <DialogContent
+        className="glass card"
         style={{ maxWidth: '400px' }}
-        onClick={(e) => e.stopPropagation()}
+        showCloseButton={false}
+        role="dialog"
+        aria-modal="true"
+        aria-label="更新提示"
       >
-        <div className="title" style={{ marginBottom: 12 }}>
-          <UpdateIcon width="20" height="20" style={{ color: 'var(--success)' }} />
-          <span>更新提示</span>
-        </div>
+        <DialogHeader>
+          <DialogTitle style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
+            <UpdateIcon width="20" height="20" style={{ color: 'var(--success)' }} />
+            <span>更新提示</span>
+          </DialogTitle>
+        </DialogHeader>
+
         <div style={{ marginBottom: 24 }}>
           <p className="muted" style={{ fontSize: '14px', lineHeight: '1.6', marginBottom: 12 }}>
             检测到新版本，是否刷新浏览器以更新？
@@ -36,7 +29,7 @@ export default function UpdatePromptModal({ updateContent, onClose, onRefresh })
           </p>
           {updateContent && (
             <div style={{
-              background: 'rgba(0,0,0,0.2)',
+              background: 'var(--card)',
               padding: '12px',
               borderRadius: '8px',
               fontSize: '13px',
@@ -44,13 +37,14 @@ export default function UpdatePromptModal({ updateContent, onClose, onRefresh })
               maxHeight: '200px',
               overflowY: 'auto',
               whiteSpace: 'pre-wrap',
-              border: '1px solid rgba(255,255,255,0.1)'
+              border: '1px solid var(--border)'
             }}>
               {updateContent}
             </div>
           )}
         </div>
-        <div className="row" style={{ gap: 12 }}>
+
+        <div className="flex-row" style={{ gap: 12, display: 'flex' }}>
           <button
             className="button secondary"
             onClick={onClose}
@@ -66,7 +60,7 @@ export default function UpdatePromptModal({ updateContent, onClose, onRefresh })
             刷新浏览器
           </button>
         </div>
-      </motion.div>
-    </motion.div>
+      </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/globals.css

@@ -1,3 +1,9 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
 :root {
   --bg: #0f172a;
   --card: #111827;
@@ -10,6 +16,41 @@
   --border: #1f2937;
   --table-pinned-header-bg: #2a394b;
   --table-row-hover-bg: #2a394b;
+  --table-row-alt-bg: #1a2535;
+  --radius: 0.625rem;
+  --background: #0f172a;
+  --foreground: #e5e7eb;
+  --card-foreground: #e5e7eb;
+  --popover: #111827;
+  --popover-foreground: #e5e7eb;
+  --primary-foreground: #0f172a;
+  --secondary: #0b1220;
+  --secondary-foreground: #e5e7eb;
+  --muted-foreground: #9ca3af;
+  --accent-foreground: #e5e7eb;
+  --destructive: #f87171;
+  --input: #0b1220;
+  --ring: #22d3ee;
+  --chart-1: #22d3ee;
+  --chart-2: #60a5fa;
+  --chart-3: #34d399;
+  --chart-4: #f472b6;
+  --chart-5: #fbbf24;
+  --sidebar: #111827;
+  --sidebar-foreground: #e5e7eb;
+  --sidebar-primary: #22d3ee;
+  --sidebar-primary-foreground: #0f172a;
+  --sidebar-accent: #1f2937;
+  --sidebar-accent-foreground: #e5e7eb;
+  --sidebar-border: #1f2937;
+  --sidebar-ring: #22d3ee;
+  --drawer-overlay: rgba(2, 6, 23, 0.5);
+  --dialog-overlay: rgba(2, 6, 23, 0.6);
+  --tabs-list-bg: rgba(255, 255, 255, 0.04);
+  --tabs-list-border: transparent;
+  --tabs-trigger-active-bg: rgba(34, 211, 238, 0.12);
+  --tabs-trigger-active-text: var(--primary);
+  --switch-thumb: var(--foreground);
 }
 
 /* 亮色主题：ui-ux-pro-max 规范 - 正文 #0F172A、弱化 #475569、玻璃 bg-white/80+、边框可见 */
@@ -25,6 +66,40 @@
   --border: #e2e8f0;
   --table-pinned-header-bg: #e2e8f0;
   --table-row-hover-bg: #e2e8f0;
+  --table-row-alt-bg: #f8fafc;
+  --background: #ffffff;
+  --foreground: #0f172a;
+  --card-foreground: #0f172a;
+  --popover: #ffffff;
+  --popover-foreground: #0f172a;
+  --primary-foreground: #ffffff;
+  --secondary: #f1f5f9;
+  --secondary-foreground: #0f172a;
+  --muted-foreground: #475569;
+  --accent-foreground: #ffffff;
+  --destructive: #dc2626;
+  --input: #f1f5f9;
+  --ring: #0891b2;
+  --chart-1: #0891b2;
+  --chart-2: #2563eb;
+  --chart-3: #059669;
+  --chart-4: #db2777;
+  --chart-5: #ca8a04;
+  --sidebar: #f8fafc;
+  --sidebar-foreground: #0f172a;
+  --sidebar-primary: #0891b2;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #f1f5f9;
+  --sidebar-accent-foreground: #0f172a;
+  --sidebar-border: #e2e8f0;
+  --sidebar-ring: #0891b2;
+  --drawer-overlay: rgba(15, 23, 42, 0.25);
+  --dialog-overlay: rgba(15, 23, 42, 0.35);
+  --tabs-list-bg: rgba(0, 0, 0, 0.04);
+  --tabs-list-border: var(--border);
+  --tabs-trigger-active-bg: rgba(8, 145, 178, 0.15);
+  --tabs-trigger-active-text: var(--primary);
+  --switch-thumb: var(--background);
 }
 
 * {
@@ -33,7 +108,10 @@
 
 html,
 body {
+  overscroll-behavior-y: none;
   height: 100%;
+  overflow-x: clip;
+  will-change: auto; /* 或者移除任何 will-change: transform */
 }
 
 body {
@@ -90,6 +168,13 @@ body::before {
   width: 1200px;
   margin: 0 auto;
   padding: 24px;
+  /* 隐藏 y 轴滚动条，保留滚动能力 */
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.container::-webkit-scrollbar {
+  width: 0;
+  display: none;
 }
 
 .page-width-slider {
@@ -373,11 +458,20 @@ body::before {
   background: #e2e8f0;
 }
 
+[data-theme="light"] .table-row:nth-child(even) {
+  background: var(--table-row-alt-bg);
+}
+
 [data-theme="light"] .table-row-scroll:hover,
 [data-theme="light"] .table-row-scroll.row-hovered {
   background: #e2e8f0;
 }
 
+[data-theme="light"] .table-row-scroll:nth-child(even),
+[data-theme="light"] .table-row-scroll.row-even {
+  background: var(--table-row-alt-bg) !important;
+}
+
 [data-theme="light"] .table-fixed-row.row-hovered {
   background: #e2e8f0;
 }
@@ -697,7 +791,6 @@ body::before {
   display: none;
 }
 
-
 .navbar-input-field {
   flex: 1;
   min-width: 120px;
@@ -725,6 +818,7 @@ body::before {
 @media (max-width: 640px) {
   .content {
     padding-top: 140px;
+    overflow-x: clip;
   }
 
   .navbar {
@@ -890,6 +984,14 @@ input[type="number"] {
     padding: 12px;
     width: 100%;
     max-width: 100%;
+    overflow-x: clip;
+    /* 移动端同样隐藏 y 轴滚动条 */
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+  .container::-webkit-scrollbar {
+    width: 0;
+    display: none;
   }
 
   .grid {
@@ -948,6 +1050,12 @@ input[type="number"] {
   color: var(--success);
 }
 
+.mask-text,
+.up .mask-text,
+.down .mask-text {
+  color: var(--text) !important;
+}
+
 .list {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -1197,6 +1305,16 @@ input[type="number"] {
   background: var(--primary);
 }
 
+/* PC 表头固定时的 portal 容器：与 table-scroll-area 横向滚动同步，但隐藏自身滚动条 */
+.pc-fund-table-portal-header {
+  scrollbar-width: none;         /* Firefox */
+  -ms-overflow-style: none;      /* IE / Edge legacy */
+}
+
+.pc-fund-table-portal-header::-webkit-scrollbar {
+  display: none;                 /* Chrome / Safari */
+}
+
 /* 纵向滚动条通用样式（与项目整体规范一致，供弹窗、列表等使用） */
 .scrollbar-y-styled {
   scrollbar-width: thin;
@@ -1231,7 +1349,7 @@ input[type="number"] {
   min-width: 900px;
 }
 
-/* 基金名称 净值 涨跌幅 估值涨跌幅 估值时间 持仓金额 当日收益 持有收益（三列同宽） */
+/* 基金名称 净值 涨跌幅 估值涨幅 估值时间 持仓金额 当日收益 持有收益（三列同宽） */
 .table-header-row-scroll,
 .table-row-scroll {
   display: grid;
@@ -1273,9 +1391,30 @@ input[type="number"] {
 }
 
 .table-row-scroll .name-cell .name-text {
+  display: block;
+  max-width: 100%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  word-break: normal;
+}
+
+.table-row-scroll .name-cell .name-cell-content {
+  min-width: 0;
+  width: 100%;
+}
+
+.table-row-scroll .name-cell .title-text {
+  min-width: 0;
+  overflow: hidden;
+  flex: 1 1 auto;
+}
+
+.table-row-scroll .name-cell .name-text.show-full {
+  white-space: normal;
+  overflow: visible;
+  text-overflow: clip;
+  word-break: break-all;
 }
 
 .table-row-scroll {
@@ -1290,6 +1429,11 @@ input[type="number"] {
   background: rgba(255, 255, 255, 0.08);
 }
 
+.table-row-scroll:nth-child(even),
+.table-row-scroll.row-even {
+  background: var(--table-row-alt-bg) !important;
+}
+
 .table-fixed-row.row-hovered {
   background: rgba(255, 255, 255, 0.08);
 }
@@ -1344,6 +1488,10 @@ input[type="number"] {
   background: #2a394b;
 }
 
+.table-row:nth-child(even) {
+  background: var(--table-row-alt-bg);
+}
+
 .table-row:last-child {
   border-bottom: none;
 }
@@ -1453,6 +1601,22 @@ input[type="number"] {
     /* min-width 由 MobileFundTable 根据 columns meta.width 动态设置 */
   }
 
+  .mobile-fund-table-portal-header {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    left: 13px;
+    right: 13px;
+    box-sizing: border-box;
+  }
+  .mobile-fund-table-portal-header::-webkit-scrollbar {
+    display: none;
+  }
+  .mobile-fund-table-portal-header .mobile-fund-table-scroll {
+    padding: 0;
+  }
+
   .mobile-fund-table .table-header-row {
     display: grid;
     /* grid-template-columns 由 MobileFundTable 根据当前列顺序动态设置 */
@@ -1504,13 +1668,17 @@ input[type="number"] {
     position: sticky;
     left: 0;
     z-index: 2;
-    box-shadow: 4px 0 10px -2px rgba(0, 0, 0, 0.12);
-    border-right: 1px solid rgba(0, 0, 0, 0.08);
     border-bottom: none;
   }
 
-  [data-theme="light"] .mobile-fund-table .table-header-cell-pin-left,
-  [data-theme="light"] .mobile-fund-table .table-cell-pin-left {
+  .mobile-fund-table .is-scrolled,
+  .mobile-fund-table .is-scrolled {
+    box-shadow: 4px 0 10px -2px rgba(0, 0, 0, 0.12);
+    border-right: 1px solid rgba(0, 0, 0, 0.08);
+  }
+
+  [data-theme="light"] .mobile-fund-table .is-scrolled,
+  [data-theme="light"] .mobile-fund-table .is-scrolled {
     box-shadow: 4px 0 10px -2px rgba(0, 0, 0, 0.08);
     border-right-color: rgba(0, 0, 0, 0.06);
   }
@@ -1569,6 +1737,11 @@ input[type="number"] {
     padding-left: 12px;
   }
 
+  /* 基金名称表头排序按钮在排序模式下的高亮 */
+  .mobile-fund-table .mobile-fund-table-header .icon-button.active {
+    color: var(--primary);
+  }
+
   .mobile-fund-table .table-row .name-cell .name-cell-content {
     min-height: 100%;
   }
@@ -1577,6 +1750,17 @@ input[type="number"] {
   .mobile-fund-table .table-row .name-cell .name-text {
     font-size: 12px;
     font-weight: 600;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .mobile-fund-table .table-row .name-cell .name-text.show-full {
+    -webkit-line-clamp: unset;
+    overflow: visible;
+    text-overflow: clip;
   }
 
   .mobile-fund-table .table-row .name-cell .code-text {
@@ -1720,7 +1904,6 @@ input[type="number"] {
 @media (max-width: 640px) {
   .filter-bar {
     position: sticky;
-    top: 60px; /* Navbar height */
     z-index: 40;
     width: calc(100% + 32px);
     background: rgba(15, 23, 42, 0.9);
@@ -1849,6 +2032,11 @@ input[type="number"] {
   box-shadow: -8px 0 32px rgba(0, 0, 0, 0.3);
 }
 
+/* 指数个性化设置侧弹框：加宽以一行展示 5 个指数卡片 */
+.pc-market-setting-drawer.pc-table-setting-drawer {
+  width: 560px;
+}
+
 .pc-table-setting-header {
   display: flex;
   align-items: center;
@@ -1905,10 +2093,12 @@ input[type="number"] {
   flex-shrink: 0;
 }
 
+/* 亮色主题下，PC 右侧抽屉里的 Switch 拇指使用浅色，以保证对比度 */
 [data-theme="light"] .pc-table-setting-drawer .dca-toggle-thumb {
   background: #fff;
 }
 
+
 /* 移动端表格设置底部抽屉 */
 .mobile-setting-overlay {
   position: fixed;
@@ -1920,6 +2110,79 @@ input[type="number"] {
   justify-content: center;
 }
 
+/* shadcn Drawer：符合项目规范，适配亮/暗主题 */
+.drawer-shadow-bottom {
+  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.3);
+}
+.drawer-shadow-top {
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+[data-theme="light"] .drawer-shadow-bottom {
+  box-shadow: 0 -4px 24px rgba(15, 23, 42, 0.12);
+}
+[data-theme="light"] .drawer-shadow-top {
+  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.12);
+}
+
+/* Drawer 内容玻璃拟态：与 Dialog 统一的毛玻璃效果（更通透） */
+.drawer-content-theme {
+  background: rgba(15, 23, 42, 0);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-color: rgba(148, 163, 184, 0.45);
+}
+
+[data-theme="light"] .drawer-content-theme {
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-color: rgba(148, 163, 184, 0.6);
+}
+
+/* shadcn Dialog：符合项目规范(ui-ux-pro-max)，适配亮/暗主题，略微玻璃拟态 */
+[data-slot="dialog-content"] {
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+
+[data-theme="light"] [data-slot="dialog-content"] {
+  background: rgba(255, 255, 255, 0.96);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+
+.dialog-content-shadow {
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
+}
+
+[data-theme="light"] .dialog-content-shadow {
+  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.08);
+}
+
+[data-slot="dialog-content"] [data-slot="dialog-close"] {
+  cursor: pointer;
+  color: var(--muted-foreground);
+  transition: color 0.2s ease, opacity 0.2s ease;
+}
+
+[data-slot="dialog-content"] [data-slot="dialog-close"]:hover {
+  color: var(--foreground);
+  opacity: 1;
+}
+
+[data-slot="dialog-content"] [data-slot="dialog-close"]:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+
+[data-slot="dialog-title"] {
+  color: var(--foreground);
+}
+
+[data-slot="dialog-description"] {
+  color: var(--muted-foreground);
+}
+
 .mobile-setting-drawer {
   width: 100%;
   max-height: 90vh;
@@ -2070,6 +2333,10 @@ input[type="number"] {
   color: var(--text) !important;
 }
 
+[data-theme="light"] .trade-modal .queue-button {
+  color: #ffffff !important;
+}
+
 .trade-time-slot {
   background: rgba(0, 0, 0, 0.2);
   border-radius: 8px;
@@ -2110,6 +2377,13 @@ input[type="number"] {
   color: #b45309;
 }
 
+/* 亮色主题：TradeModal */
+[data-theme="light"] .trade-pending-alert {
+  background: rgba(217, 119, 6, 0.12);
+  border-color: rgba(217, 119, 6, 0.35);
+  color: #b45309;
+}
+
 [data-theme="light"] .trade-modal .trade-pending-header {
   background: rgba(255, 255, 255, 0.98);
   border-bottom-color: var(--border);
@@ -2266,6 +2540,13 @@ input[type="number"] {
   transition: left 0.2s;
 }
 
+/* 亮色主题下：所有使用 dca-toggle 的拇指在浅底上统一用白色，保证对比度
+   - PC 右侧排序设置抽屉
+   - 移动端排序个性化设置 Drawer（以及其它区域） */
+[data-theme="light"] .dca-toggle-thumb {
+  background: #ffffff;
+}
+
 .dca-option-group {
   background: rgba(0, 0, 0, 0.2);
   border-radius: 8px;
@@ -3067,6 +3348,35 @@ input[type="number"] {
   color: var(--success);
 }
 
+/* ========== GitHub 登录按钮样式 ========== */
+.github-login-btn {
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+}
+
+.github-login-btn:hover {
+  border-color: var(--primary);
+  background: rgba(34, 211, 238, 0.05);
+}
+
+.github-login-btn:active {
+  transform: scale(0.98);
+}
+
+[data-theme="light"] .github-login-btn {
+  background: #f8fafc;
+  border-color: #e2e8f0;
+}
+
+[data-theme="light"] .github-login-btn:hover {
+  background: #f1f5f9;
+  border-color: #94a3af;
+}
+
+[data-theme="light"] .github-login-btn img {
+  filter: brightness(0.2);
+}
+
 .button.secondary {
   background: transparent;
   border: 1px solid var(--border);
@@ -3079,6 +3389,26 @@ input[type="number"] {
   box-shadow: none;
 }
 
+.button.danger {
+  background: linear-gradient(180deg, #ef4444, #f87171);
+  color: #2b0b0b;
+  border-color: rgba(248, 113, 113, 0.4);
+}
+
+.button.danger:hover {
+  box-shadow: 0 10px 20px rgba(248, 113, 113, 0.25);
+}
+
+[data-theme="light"] .button.danger {
+  background: linear-gradient(180deg, #ef4444, #dc2626);
+  color: #fff;
+  border-color: rgba(220, 38, 38, 0.4);
+}
+
+[data-theme="light"] .button.danger:hover {
+  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.25);
+}
+
 /* ========== 移动端响应式 ========== */
 @media (max-width: 640px) {
 
@@ -3170,3 +3500,87 @@ input[type="number"] {
   background: rgba(8, 145, 178, 0.12);
   color: var(--primary);
 }
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+.dark {
+  --background: #020617;
+  --foreground: #f8fafc;
+  --card: #0f172a;
+  --card-foreground: #f8fafc;
+  --popover: #0f172a;
+  --popover-foreground: #f8fafc;
+  --primary: #22d3ee;
+  --primary-foreground: #0f172a;
+  --secondary: #1e293b;
+  --secondary-foreground: #f8fafc;
+  --muted: #1e293b;
+  --muted-foreground: #94a3af;
+  --accent: #60a5fa;
+  --accent-foreground: #f8fafc;
+  --destructive: #f87171;
+  --border: #1f2937;
+  --input: #0b1220;
+  --ring: #22d3ee;
+  --chart-1: #22d3ee;
+  --chart-2: #60a5fa;
+  --chart-3: #34d399;
+  --chart-4: #f472b6;
+  --chart-5: #fbbf24;
+  --sidebar: #0f172a;
+  --sidebar-foreground: #f8fafc;
+  --sidebar-primary: #22d3ee;
+  --sidebar-primary-foreground: #0f172a;
+  --sidebar-accent: #1e293b;
+  --sidebar-accent-foreground: #f8fafc;
+  --sidebar-border: #1f2937;
+  --sidebar-ring: #22d3ee;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

app/hooks/useBodyScrollLock.js

@@ -0,0 +1,65 @@
+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 || "";
+
+    requestAnimationFrame(() => {
+      document.body.style.top = `-${lockedScrollY}px`;
+      document.body.style.width = "100%";
+      document.body.style.position = "fixed";
+    });
+  }
+}
+
+function unlockBodyScroll() {
+  if (scrollLockCount === 0) return;
+
+  scrollLockCount -= 1;
+
+  // 只有全部弹框都关闭时才恢复滚动位置
+  if (scrollLockCount === 0) {
+    const scrollY = lockedScrollY;
+
+    document.body.style.position = originalBodyPosition;
+    document.body.style.top = originalBodyTop;
+    document.body.style.width = "";
+
+    requestAnimationFrame(() => {
+      window.scrollTo(0, scrollY);
+    });
+  }
+}
+
+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/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 = {
@@ -18,6 +21,9 @@ export default function RootLayout({ children }) {
       <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
@@ -27,8 +33,11 @@ export default function RootLayout({ children }) {
       />
     </head>
     <body>
-    <AnalyticsGate GA_ID={GA_ID} />
-    {children}
+      <ThemeColorSync />
+      <PwaRegister />
+      <AnalyticsGate GA_ID={GA_ID} />
+      {children}
+      <Toaster />
     </body>
     </html>
   );

app/lib/AGENTS.md

@@ -0,0 +1,28 @@
+# app/lib/ — Core Utilities
+
+## OVERVIEW
+
+4 utility modules: Supabase client, request cache, trading calendar, valuation time-series.
+
+## WHERE TO LOOK
+
+| File | Exports | Purpose |
+|------|---------|---------|
+| `supabase.js` | `supabase`, `isSupabaseConfigured` | Supabase client (or noop fallback). Auth + DB + realtime |
+| `cacheRequest.js` | `cachedRequest()`, `clearCachedRequest()` | In-memory request dedup + TTL cache |
+| `tradingCalendar.js` | `loadHolidaysForYear()`, `loadHolidaysForYears()`, `isTradingDay()` | Chinese stock market holiday detection via CDN |
+| `valuationTimeseries.js` | `recordValuation()`, `getValuationSeries()`, `clearFund()`, `getAllValuationSeries()` | Fund valuation time-series (localStorage) |
+
+## CONVENTIONS
+
+- **supabase.js**: creates `createNoopSupabase()` when env vars missing — all auth/DB methods return safe defaults
+- **cacheRequest.js**: deduplicates concurrent requests for same key; default 10s TTL
+- **tradingCalendar.js**: downloads `chinese-days` JSON from cdn.jsdelivr.net; caches per-year in Map
+- **valuationTimeseries.js**: localStorage key `fundValuationTimeseries`; auto-clears old dates on new data
+
+## ANTI-PATTERNS (THIS DIRECTORY)
+
+- **No error reporting** — all modules silently fail (console.warn at most)
+- **localStorage quota not handled** — valuationTimeseries writes without checking available space
+- **Cache only in-memory** — cacheRequest lost on page reload; no persistent cache
+- **No request cancellation** — JSONP scripts can't be aborted once injected

app/lib/supabase.js

@@ -33,6 +33,7 @@ const createNoopSupabase = () => ({
             data: { subscription: { unsubscribe: () => { } } }
         }),
         signInWithOtp: async () => ({ data: null, error: { message: 'Supabase not configured' } }),
+        signInWithOAuth: async () => ({ data: null, error: { message: 'Supabase not configured' } }),
         verifyOtp: async () => ({ data: null, error: { message: 'Supabase not configured' } }),
         signOut: async () => ({ error: null })
     },

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/AGENTS.md

@@ -0,0 +1,28 @@
+# components/ui/ — shadcn/ui Primitives
+
+## OVERVIEW
+
+15 shadcn/ui components (new-york style, JSX). Low-level primitives — do NOT modify manually.
+
+## WHERE TO LOOK
+
+```
+accordion.jsx    button.jsx       dialog.jsx       drawer.jsx
+field.jsx        input-otp.jsx    label.jsx        progress.jsx
+radio-group.jsx  select.jsx       separator.jsx    sonner.jsx
+spinner.jsx      switch.jsx       tabs.jsx
+```
+
+## CONVENTIONS
+
+- **Add via CLI**: `npx shadcn@latest add <component>` — never copy-paste manually
+- **Style**: new-york, CSS variables enabled, neutral base color
+- **Icons**: lucide-react
+- **Path aliases**: `@/components/ui/*`, `@/lib/utils` (cn helper)
+- **forwardRef pattern** — all components use React.forwardRef
+- **Styling**: tailwind-merge via `cn()` in `lib/utils.js`
+
+## ANTI-PATTERNS (THIS DIRECTORY)
+
+- **Do not edit** — manual changes will be overwritten by shadcn CLI updates
+- **No custom components here** — app-specific components belong in `app/components/`

components/ui/accordion.jsx

@@ -0,0 +1,64 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+import { Accordion as AccordionPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Accordion({
+  ...props
+}) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
+}
+
+function AccordionItem({
+  className,
+  ...props
+}) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props} />
+  );
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}>
+        {children}
+        <ChevronDownIcon
+          className="pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+      {...props}>
+      <div className={cn("pt-0 pb-4 w-full", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

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,180 @@
+"use client"
+
+import * as React from "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"
+        onOpenAutoFocus={(e) => e.preventDefault()}
+        onCloseAutoFocus={(e) => e.preventDefault()}
+        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/radio-group.jsx

@@ -0,0 +1,46 @@
+"use client"
+
+import * as React from "react"
+import { CircleIcon } from "lucide-react"
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const RadioGroup = React.forwardRef(({ className, ...props }, ref) => (
+  <RadioGroupPrimitive.Root
+    ref={ref}
+    data-slot="radio-group"
+    className={cn("grid gap-3", className)}
+    {...props}
+  />
+))
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const RadioGroupItem = React.forwardRef(({ className, ...props }, ref) => (
+  <RadioGroupPrimitive.Item
+    ref={ref}
+    data-slot="radio-group-item"
+    className={cn(
+      "group/radio aspect-square size-4 shrink-0 rounded-full border shadow-xs outline-none",
+      "border-[var(--border)] bg-[var(--input)] text-[var(--primary)]",
+      "transition-[color,box-shadow,border-color,background-color] duration-200 ease-out",
+      "hover:border-[var(--muted-foreground)]",
+      "data-[state=checked]:border-[var(--primary)] data-[state=checked]:bg-[var(--background)]",
+      "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",
+      "aria-invalid:border-[var(--destructive)] aria-invalid:ring-[3px] aria-invalid:ring-[var(--destructive)] aria-invalid:ring-opacity-20",
+      className
+    )}
+    {...props}
+  >
+    <RadioGroupPrimitive.Indicator
+      data-slot="radio-group-indicator"
+      className="relative flex items-center justify-center"
+    >
+      <CircleIcon className="size-2 fill-current text-[var(--primary)]" />
+    </RadioGroupPrimitive.Indicator>
+  </RadioGroupPrimitive.Item>
+))
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem }

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/spinner.jsx

@@ -0,0 +1,21 @@
+import { Loader2Icon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Spinner({
+  className,
+  ...props
+}) {
+  return (
+    <Loader2Icon
+      role="status"
+      aria-label="Loading"
+      className={cn(
+        "size-4 animate-spin text-muted-foreground motion-reduce:animate-none",
+        className
+      )}
+      {...props} />
+  );
+}
+
+export { Spinner }

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 }

doc/localStorage 数据结构.md

@@ -15,6 +15,7 @@
 **类型**: `Array<Object>`
 **默认值**: `[]`
 **说明**: 存储用户添加的所有基金信息
+**云端同步**: 是
 
 **数据结构**:
 ```javascript
@@ -46,6 +47,7 @@
 **类型**: `Array<string>`
 **默认值**: `[]`
 **说明**: 存储用户标记为自选的基金代码列表
+**云端同步**: 是
 
 **数据结构**:
 ```javascript
@@ -68,6 +70,7 @@
 **类型**: `Array<Object>`
 **默认值**: `[]`
 **说明**: 存储用户创建的基金分组信息
+**云端同步**: 是
 
 **数据结构**:
 ```javascript
@@ -92,6 +95,7 @@
 **类型**: `Array<string>`
 **默认值**: `[]`
 **说明**: 存储用户收起的基金代码列表（用于折叠基金详情）
+**云端同步**: 是
 
 **数据结构**:
 ```javascript
@@ -113,6 +117,7 @@
 **类型**: `Array<string>`
 **默认值**: `[]`
 **说明**: 存储用户收起的业绩走势图表的基金代码列表
+**云端同步**: 是
 
 **数据结构**:
 ```javascript
@@ -135,6 +140,7 @@
 **默认值**: `'card'`
 **可选值**: `'card'` | `'list'`
 **说明**: 存储用户选择的视图模式
+**云端同步**: 否（仅通过 customSettings 同步）
 
 **数据结构**:
 ```javascript
@@ -154,6 +160,7 @@
 **默认值**: `30000` (30秒)
 **最小值**: `5000` (5秒)
 **说明**: 存储数据刷新间隔时间（毫秒）
+**云端同步**: 是
 
 **数据结构**:
 ```javascript
@@ -172,6 +179,7 @@
 **类型**: `Object`
 **默认值**: `{}`
 **说明**: 存储用户的持仓信息
+**云端同步**: 是
 
 **数据结构**:
 ```javascript
@@ -199,6 +207,7 @@
 **类型**: `Array<Object>`
 **默认值**: `[]`
 **说明**: 存储待处理的交易记录（当净值未更新时）
+**云端同步**: 是
 
 **数据结构**:
 ```javascript
@@ -215,7 +224,6 @@
     feeValue: number,    // 手续费金额
     date: string,        // 交易日期
     isAfter3pm: boolean, // 是否下午3点后
-    isAfter3pm: boolean, // 是否下午3点后
     timestamp: number    // 时间戳
   }
 ]
@@ -233,6 +241,7 @@
 **类型**: `string` (ISO 8601 格式)
 **默认值**: `null`
 **说明**: 存储本地数据最后更新时间戳，用于云端同步冲突检测
+**云端同步**: 否（本地专用）
 
 **数据结构**:
 ```javascript
@@ -245,12 +254,13 @@
 
 ---
 
-### 11. hasClosedAnnouncement_v7
+### 11. hasClosedAnnouncement_v19
 
 **类型**: `string`
 **默认值**: `null`
 **可选值**: `'true'`
-**说明**: 标记用户是否已关闭公告弹窗
+**说明**: 标记用户是否已关闭公告弹窗（版本号后缀用于控制不同版本的公告）
+**云端同步**: 否
 
 **数据结构**:
 ```javascript
@@ -259,7 +269,234 @@
 
 **使用场景**:
 - 控制公告弹窗显示
-- 版本号后缀（v7）用于控制公告版本
+- 版本号后缀（v19）用于控制公告版本
+
+---
+
+### 12. customSettings
+
+**类型**: `Object`
+**默认值**: `{}`
+**说明**: 存储用户的高级设置和偏好
+**云端同步**: 是
+
+**数据结构**:
+```javascript
+{
+  localSortRules: [  // 排序规则配置
+    {
+      id: string,        // 规则唯一标识
+      field: string,      // 排序字段
+      label: string,      // 显示标签
+      direction: 'asc' | 'desc',  // 排序方向
+      enabled: boolean   // 是否启用
+    }
+  ],
+  pcContainerWidth: number,  // PC端容器宽度（桌面版）
+  marketIndexSelected: Array<string>,  // 选中的市场指数代码
+  // ... 其他自定义设置
+}
+```
+
+**使用场景**:
+- 排序规则持久化
+- PC端布局宽度设置
+- 市场指数选择
+- 云端同步所有自定义设置
+
+---
+
+### 13. localSortBy / localSortOrder
+
+**类型**: `string`
+**默认值**: `'default'` / `'asc'`
+**说明**: 存储当前排序字段和排序方向
+**云端同步**: 否（通过 customSettings 同步）
+
+**数据结构**:
+```javascript
+// localSortBy
+'gszzl'  // 按估算涨跌幅排序
+'default'  // 默认排序
+
+// localSortOrder
+'asc'   // 升序
+'desc'  // 降序
+```
+
+**使用场景**:
+- 快速访问当前排序状态
+- 与 customSettings.localSortRules 保持同步
+
+---
+
+### 14. localSortRules (旧版)
+
+**类型**: `Array<Object>`
+**默认值**: `[]`
+**说明**: 旧版排序规则存储，已迁移到 customSettings.localSortRules
+**云端同步**: 否
+
+**注意**: 该键已弃用，数据已迁移到 customSettings.localSortRules。代码中仍保留兼容性处理。
+
+---
+
+### 15. currentTab
+
+**类型**: `string`
+**默认值**: `'all'`
+**说明**: 存储用户当前选中的标签页
+**云端同步**: 否
+
+**数据结构**:
+```javascript
+'all'     // 全部资产
+'fav'     // 自选
+groupId   // 分组ID，如 'group_xxx'
+```
+
+**使用场景**:
+- 恢复用户上次查看的标签页
+- 页面刷新后保持标签页状态
+
+---
+
+### 16. theme
+
+**类型**: `string`
+**默认值**: `'dark'`
+**可选值**: `'light'` | `'dark'`
+**说明**: 存储用户选择的主题模式
+**云端同步**: 否
+
+**数据结构**:
+```javascript
+'dark'  // 暗色主题
+'light'  // 亮色主题
+```
+
+**使用场景**:
+- 控制应用整体配色
+- 页面加载时立即应用（通过 layout.jsx 内联脚本）
+
+---
+
+### 17. fundValuationTimeseries
+
+**类型**: `Object`
+**默认值**: `{}`
+**说明**: 存储基金估值分时数据，用于走势图展示
+**云端同步**: 否（测试中功能，暂不同步）
+
+**数据结构**:
+```javascript
+{
+  "000001": [  // 按基金代码索引
+    {
+      time: string,   // 时间点 "HH:mm"
+      value: number,  // 估算净值
+      date: string    // 日期 "YYYY-MM-DD"
+    }
+  ],
+  "110022": [
+    // ...
+  ]
+}
+```
+
+**数据清理规则**:
+- 当新数据日期大于已存储的最大日期时，清空该基金所有旧日期数据，只保留当日分时
+- 同一日期内按时间顺序追加数据
+
+**使用场景**:
+- 基金详情页分时图展示
+- 实时估值数据记录
+
+---
+
+### 18. transactions
+
+**类型**: `Object`
+**默认值**: `{}`
+**说明**: 存储用户的交易历史记录
+**云端同步**: 是
+
+**数据结构**:
+```javascript
+{
+  "000001": [  // 按基金代码索引的交易列表
+    {
+      id: string,        // 交易唯一标识
+      type: 'buy' | 'sell',  // 交易类型
+      amount: number,    // 交易金额
+      share: number,     // 交易份额
+      price: number,    // 成交价格
+      date: string,      // 交易日期
+      timestamp: number  // 时间戳
+    }
+  ],
+  "110022": [
+    // ...
+  ]
+}
+```
+
+**使用场景**:
+- 交易历史查询
+- 收益计算
+- 买入/卖出操作记录
+
+---
+
+### 19. dcaPlans (定投计划)
+
+**类型**: `Object`
+**默认值**: `{}`
+**说明**: 存储用户的定投计划配置
+**云端同步**: 是
+
+**数据结构**:
+```javascript
+{
+  "000001": {    // 按基金代码索引
+    amount: number,    // 每次定投金额
+    feeRate: number,   // 手续费率
+    cycle: string,     // 定投周期
+    firstDate: string, // 首次定投日期
+    enabled: boolean   // 是否启用
+  },
+  "110022": {
+    // ...
+  }
+}
+```
+
+**使用场景**:
+- 自动定投执行
+- 定投计划管理
+- 买入操作时设置
+
+---
+
+### 20. marketIndexSelected
+
+**类型**: `Array<string>`
+**默认值**: `[]`
+**说明**: 存储用户选中的市场指数代码
+**云端同步**: 否（通过 customSettings 同步）
+
+**数据结构**:
+```javascript
+[
+  "sh000001",  // 上证指数
+  "sz399001",  // 深证成指
+  // ...
+]
+```
+
+**使用场景**:
+- 市场指数面板显示
+- 指数选择管理
 
 ---
 
@@ -267,22 +504,36 @@
 
 ### 云端同步
 
-项目支持通过 Supabase 进行云端数据同步：
+项目支持通过 Supabase 进行云端数据同步。以下键参与云端同步：
 
-1. **上传到云端**: 用户登录后，本地数据会自动上传到云端
-2. **从云端下载**: 用户在其他设备登录时，会从云端下载数据
-3. **冲突处理**: 当本地和云端数据不一致时，会提示用户选择使用哪份数据
-
-**同步的数据字段**:
+**参与云端同步的键**:
 - funds
 - favorites
 - groups
 - collapsedCodes
 - collapsedTrends
-- viewMode
 - refreshMs
 - holdings
 - pendingTrades
+- transactions
+- dcaPlans
+- customSettings
+
+**不参与云端同步的键**:
+- localUpdatedAt（本地专用）
+- hasClosedAnnouncement_v19（本地专用）
+- localSortBy / localSortOrder（通过 customSettings 同步）
+- localSortRules（旧版兼容，通过 customSettings 同步）
+- currentTab（本地会话状态）
+- theme（本地主题偏好）
+- fundValuationTimeseries（测试中功能）
+- marketIndexSelected（通过 customSettings 同步）
+- viewMode（通过 customSettings 同步）
+
+**同步流程**:
+1. 用户登录后，本地数据会自动上传到云端
+2. 用户在其他设备登录时，会从云端下载数据
+3. 当本地和云端数据不一致时，会提示用户选择使用哪份数据
 
 ### 导入/导出
 
@@ -296,9 +547,11 @@
   groups: [],
   collapsedCodes: [],
   refreshMs: 30000,
-  viewMode: 'card',
   holdings: {},
   pendingTrades: [],
+  transactions: {},
+  dcaPlans: {},
+  customSettings: {},
   exportedAt: '2024-01-15T10:30:00.000Z'
 }
 ```
@@ -334,23 +587,40 @@ const dedupeByCode = (list) => {
 
 1. 清理无效的持仓数据（基金不存在的持仓）
 2. 清理无效的自选、分组、收起状态
-3. 确保数据类型正确
+3. 清理无效的交易记录和定投计划
+4. 确保数据类型正确
 
 ---
 
 ## 存储辅助工具
 
-项目使用 `storageHelper` 对象来封装 localStorage 操作，提供统一的错误处理和日志记录。
+项目使用 `storageHelper` 对象来封装 localStorage 操作，提供统一的错误处理和云端同步触发。
 
 ```javascript
 const storageHelper = {
-  setItem: (key, value) => { /* ... */ },
-  getItem: (key) => { /* ... */ },
-  removeItem: (key) => { /* ... */ },
-  clear: () => { /* ... */ }
+  setItem: (key, value) => {
+    // 1. 写入 localStorage
+    // 2. 触发云端同步（如果是同步键）
+    // 3. 更新 localUpdatedAt 时间戳
+  },
+  getItem: (key) => {
+    // 从 localStorage 读取
+  },
+  removeItem: (key) => {
+    // 从 localStorage 删除
+    // 触发云端同步
+  },
+  clear: () => {
+    // 清空所有 localStorage
+  }
 };
 ```
 
+**特性**:
+- 自动触发云端同步（对于参与同步的键）
+- 自动更新 localUpdatedAt 时间戳
+- funds 变更时比较签名，避免无意义同步
+
 ---
 
 ## 注意事项
@@ -360,6 +630,7 @@ const storageHelper = {
 3. **错误处理**: 所有 localStorage 操作都应包含 try-catch 错误处理
 4. **数据格式**: 复杂数据必须使用 JSON.stringify/JSON.parse 进行序列化/反序列化
 5. **版本控制**: 公告等配置使用版本号后缀，便于控制不同版本的显示
+6. **fundValuationTimeseries**: 该数据不同步到云端，因为数据量较大且属于临时性数据
 
 ---
 
@@ -367,10 +638,15 @@ const storageHelper = {
 
 - `app/page.jsx` - 主要页面组件，包含所有 localStorage 操作
 - `app/components/Announcement.jsx` - 公告组件
+- `app/components/PcFundTable.jsx` - PC端基金表格组件
+- `app/components/MobileFundTable.jsx` - 移动端基金表格组件
+- `app/components/MarketIndexAccordion.jsx` - 市场指数组件
 - `app/lib/supabase.js` - Supabase 客户端配置
+- `app/lib/valuationTimeseries.js` - 估值分时数据管理
 
 ---
 
 ## 更新日志
 
+- **2026-03-18**: 全面更新文档，补充 transactions、dcaPlans、fundValuationTimeseries、customSettings 等键的详细说明，修正云端同步键列表
 - **2026-02-19**: 初始文档创建

entrypoint.sh

@@ -0,0 +1,26 @@
+#!/bin/sh
+# 在启动 Nginx 前，将静态资源中的占位符替换为运行时环境变量
+set -e
+
+HTML_ROOT="/usr/share/nginx/html"
+
+# 转义 sed 替换串中的特殊字符：\ & |
+escape_sed() {
+  printf '%s' "$1" | sed 's/\\/\\\\/g; s/&/\\&/g; s/|/\\|/g'
+}
+
+# 占位符与环境变量对应（占位符名 = 变量名）
+replace_var() {
+  placeholder="$1"
+  value=$(escape_sed "${2:-}")
+  find "$HTML_ROOT" -type f \( -name '*.js' -o -name '*.html' \) -exec sed -i "s|${placeholder}|${value}|g" {} \;
+}
+
+# URL 构建时使用合法占位，此处替换为运行时环境变量
+replace_var "https://runtime-replace.supabase.co" "${NEXT_PUBLIC_SUPABASE_URL}"
+replace_var "__NEXT_PUBLIC_SUPABASE_ANON_KEY__" "${NEXT_PUBLIC_SUPABASE_ANON_KEY}"
+replace_var "__NEXT_PUBLIC_WEB3FORMS_ACCESS_KEY__" "${NEXT_PUBLIC_WEB3FORMS_ACCESS_KEY}"
+replace_var "__NEXT_PUBLIC_GA_ID__" "${NEXT_PUBLIC_GA_ID}"
+replace_var "__NEXT_PUBLIC_GITHUB_LATEST_RELEASE_URL__" "${NEXT_PUBLIC_GITHUB_LATEST_RELEASE_URL}"
+
+exec nginx -g "daemon off;"

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));
+}

nginx.conf

@@ -0,0 +1,15 @@
+server {
+    listen 3000;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location / {
+        try_files $uri $uri.html $uri/ /index.html =404;
+    }
+
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "real-time-fund",
-  "version": "0.2.1",
+  "version": "0.2.9",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -19,27 +19,43 @@
     "@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",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.5.0",
     "tesseract.js": "^5.1.1",
-    "uuid": "^13.0.0"
+    "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' });
+    })
+  );
+});