fix: 修复应用运行时警告

chore: 更新依赖
style: 调整 FaPagination 组件的分页宽度样式
2026-10-06 19:13:49 +08:00 · 2026-08-30 01:31:08 +08:00 · 2026-08-28 15:35:36 +08:00 · 2026-08-14 19:01:29 +08:00 · 2026-08-14 18:58:17 +08:00 · 2026-08-01 08:04:31 +08:00
1332 changed files with 38243 additions and 31336 deletions
@@ -1,226 +0,0 @@
---
-name: design-taste-frontend
-description: Senior UI/UX Engineer. Architect digital interfaces overriding default LLM biases. Enforces metric-based rules, strict component architecture, CSS hardware acceleration, and balanced design engineering.
---
-
-# High-Agency Frontend Skill
-
-## 1. ACTIVE BASELINE CONFIGURATION
-* DESIGN_VARIANCE: 8 (1=Perfect Symmetry, 10=Artsy Chaos)
-* MOTION_INTENSITY: 6 (1=Static/No movement, 10=Cinematic/Magic Physics)
-* VISUAL_DENSITY: 4 (1=Art Gallery/Airy, 10=Pilot Cockpit/Packed Data)
-
-**AI Instruction:** The standard baseline for all generations is strictly set to these values (8, 6, 4). Do not ask the user to edit this file. Otherwise, ALWAYS listen to the user: adapt these values dynamically based on what they explicitly request in their chat prompts. Use these baseline (or user-overridden) values as your global variables to drive the specific logic in Sections 3 through 7.
-
-## 2. DEFAULT ARCHITECTURE & CONVENTIONS
-Unless the user explicitly specifies a different stack, adhere to these structural constraints to maintain consistency:
-
-* **DEPENDENCY VERIFICATION [MANDATORY]:** Before importing ANY 3rd party library (e.g. `framer-motion`, `lucide-react`, `zustand`), you MUST check `package.json`. If the package is missing, you MUST output the installation command (e.g. `npm install package-name`) before providing the code. **Never** assume a library exists.
-* **Framework & Interactivity:** React or Next.js. Default to Server Components (`RSC`).
-    * **RSC SAFETY:** Global state works ONLY in Client Components. In Next.js, wrap providers in a `"use client"` component.
-    * **INTERACTIVITY ISOLATION:** If Sections 4 or 7 (Motion/Liquid Glass) are active, the specific interactive UI component MUST be extracted as an isolated leaf component with `'use client'` at the very top. Server Components must exclusively render static layouts.
-* **State Management:** Use local `useState`/`useReducer` for isolated UI. Use global state strictly for deep prop-drilling avoidance.
-* **Styling Policy:** Use Tailwind CSS (v3/v4) for 90% of styling.
-    * **TAILWIND VERSION LOCK:** Check `package.json` first. Do not use v4 syntax in v3 projects.
-    * **T4 CONFIG GUARD:** For v4, do NOT use `tailwindcss` plugin in `postcss.config.js`. Use `@tailwindcss/postcss` or the Vite plugin.
-* **ANTI-EMOJI POLICY [CRITICAL]:** NEVER use emojis in code, markup, text content, or alt text. Replace symbols with high-quality icons (Radix, Phosphor) or clean SVG primitives. Emojis are BANNED.
-* **Responsiveness & Spacing:**
-  * Standardize breakpoints (`sm`, `md`, `lg`, `xl`).
-  * Contain page layouts using `max-w-[1400px] mx-auto` or `max-w-7xl`.
-  * **Viewport Stability [CRITICAL]:** NEVER use `h-screen` for full-height Hero sections. ALWAYS use `min-h-[100dvh]` to prevent catastrophic layout jumping on mobile browsers (iOS Safari).
-  * **Grid over Flex-Math:** NEVER use complex flexbox percentage math (`w-[calc(33%-1rem)]`). ALWAYS use CSS Grid (`grid grid-cols-1 md:grid-cols-3 gap-6`) for reliable structures.
-* **Icons:** You MUST use exactly `@phosphor-icons/react` or `@radix-ui/react-icons` as the import paths (check installed version). Standardize `strokeWidth` globally (e.g., exclusively use `1.5` or `2.0`).
-
-
-## 3. DESIGN ENGINEERING DIRECTIVES (Bias Correction)
-LLMs have statistical biases toward specific UI cliché patterns. Proactively construct premium interfaces using these engineered rules:
-
-**Rule 1: Deterministic Typography**
-* **Display/Headlines:** Default to `text-4xl md:text-6xl tracking-tighter leading-none`.
-    * **ANTI-SLOP:** Discourage `Inter` for "Premium" or "Creative" vibes. Force unique character using `Geist`, `Outfit`, `Cabinet Grotesk`, or `Satoshi`.
-    * **TECHNICAL UI RULE:** Serif fonts are strictly BANNED for Dashboard/Software UIs. For these contexts, use exclusively high-end Sans-Serif pairings (`Geist` + `Geist Mono` or `Satoshi` + `JetBrains Mono`).
-* **Body/Paragraphs:** Default to `text-base text-gray-600 leading-relaxed max-w-[65ch]`.
-
-**Rule 2: Color Calibration**
-* **Constraint:** Max 1 Accent Color. Saturation < 80%.
-* **THE LILA BAN:** The "AI Purple/Blue" aesthetic is strictly BANNED. No purple button glows, no neon gradients. Use absolute neutral bases (Zinc/Slate) with high-contrast, singular accents (e.g. Emerald, Electric Blue, or Deep Rose).
-* **COLOR CONSISTENCY:** Stick to one palette for the entire output. Do not fluctuate between warm and cool grays within the same project.
-
-**Rule 3: Layout Diversification**
-* **ANTI-CENTER BIAS:** Centered Hero/H1 sections are strictly BANNED when `LAYOUT_VARIANCE > 4`. Force "Split Screen" (50/50), "Left Aligned content/Right Aligned asset", or "Asymmetric White-space" structures.
-
-**Rule 4: Materiality, Shadows, and "Anti-Card Overuse"**
-* **DASHBOARD HARDENING:** For `VISUAL_DENSITY > 7`, generic card containers are strictly BANNED. Use logic-grouping via `border-t`, `divide-y`, or purely negative space. Data metrics should breathe without being boxed in unless elevation (z-index) is functionally required.
-* **Execution:** Use cards ONLY when elevation communicates hierarchy. When a shadow is used, tint it to the background hue.
-
-**Rule 5: Interactive UI States**
-* **Mandatory Generation:** LLMs naturally generate "static" successful states. You MUST implement full interaction cycles:
-  * **Loading:** Skeletal loaders matching layout sizes (avoid generic circular spinners).
-  * **Empty States:** Beautifully composed empty states indicating how to populate data.
-  * **Error States:** Clear, inline error reporting (e.g., forms).
-  * **Tactile Feedback:** On `:active`, use `-translate-y-[1px]` or `scale-[0.98]` to simulate a physical push indicating success/action.
-
-**Rule 6: Data & Form Patterns**
-* **Forms:** Label MUST sit above input. Helper text is optional but should exist in markup. Error text below input. Use a standard `gap-2` for input blocks.
-
-## 4. CREATIVE PROACTIVITY (Anti-Slop Implementation)
-To actively combat generic AI designs, systematically implement these high-end coding concepts as your baseline:
-* **"Liquid Glass" Refraction:** When glassmorphism is needed, go beyond `backdrop-blur`. Add a 1px inner border (`border-white/10`) and a subtle inner shadow (`shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]`) to simulate physical edge refraction.
-* **Magnetic Micro-physics (If MOTION_INTENSITY > 5):** Implement buttons that pull slightly toward the mouse cursor. **CRITICAL:** NEVER use React `useState` for magnetic hover or continuous animations. Use EXCLUSIVELY Framer Motion's `useMotionValue` and `useTransform` outside the React render cycle to prevent performance collapse on mobile.
-* **Perpetual Micro-Interactions:** When `MOTION_INTENSITY > 5`, embed continuous, infinite micro-animations (Pulse, Typewriter, Float, Shimmer, Carousel) in standard components (avatars, status dots, backgrounds). Apply premium Spring Physics (`type: "spring", stiffness: 100, damping: 20`) to all interactive elements—no linear easing.
-* **Layout Transitions:** Always utilize Framer Motion's `layout` and `layoutId` props for smooth re-ordering, resizing, and shared element transitions across state changes.
-* **Staggered Orchestration:** Do not mount lists or grids instantly. Use `staggerChildren` (Framer) or CSS cascade (`animation-delay: calc(var(--index) * 100ms)`) to create sequential waterfall reveals. **CRITICAL:** For `staggerChildren`, the Parent (`variants`) and Children MUST reside in the identical Client Component tree. If data is fetched asynchronously, pass the data as props into a centralized Parent Motion wrapper.
-
-## 5. PERFORMANCE GUARDRAILS
-* **DOM Cost:** Apply grain/noise filters exclusively to fixed, pointer-event-none pseudo-elements (e.g., `fixed inset-0 z-50 pointer-events-none`) and NEVER to scrolling containers to prevent continuous GPU repaints and mobile performance degradation.
-* **Hardware Acceleration:** Never animate `top`, `left`, `width`, or `height`. Animate exclusively via `transform` and `opacity`.
-* **Z-Index Restraint:** NEVER spam arbitrary `z-50` or `z-10` unprompted. Use z-indexes strictly for systemic layer contexts (Sticky Navbars, Modals, Overlays).
-
-## 6. TECHNICAL REFERENCE (Dial Definitions)
-
-### DESIGN_VARIANCE (Level 1-10)
-* **1-3 (Predictable):** Flexbox `justify-center`, strict 12-column symmetrical grids, equal paddings.
-* **4-7 (Offset):** Use `margin-top: -2rem` overlapping, varied image aspect ratios (e.g., 4:3 next to 16:9), left-aligned headers over center-aligned data.
-* **8-10 (Asymmetric):** Masonry layouts, CSS Grid with fractional units (e.g., `grid-template-columns: 2fr 1fr 1fr`), massive empty zones (`padding-left: 20vw`).
-* **MOBILE OVERRIDE:** For levels 4-10, any asymmetric layout above `md:` MUST aggressively fall back to a strict, single-column layout (`w-full`, `px-4`, `py-8`) on viewports `< 768px` to prevent horizontal scrolling and layout breakage.
-
-### MOTION_INTENSITY (Level 1-10)
-* **1-3 (Static):** No automatic animations. CSS `:hover` and `:active` states only.
-* **4-7 (Fluid CSS):** Use `transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1)`. Use `animation-delay` cascades for load-ins. Focus strictly on `transform` and `opacity`. Use `will-change: transform` sparingly.
-* **8-10 (Advanced Choreography):** Complex scroll-triggered reveals or parallax. Use Framer Motion hooks. NEVER use `window.addEventListener('scroll')`.
-
-### VISUAL_DENSITY (Level 1-10)
-* **1-3 (Art Gallery Mode):** Lots of white space. Huge section gaps. Everything feels very expensive and clean.
-* **4-7 (Daily App Mode):** Normal spacing for standard web apps.
-* **8-10 (Cockpit Mode):** Tiny paddings. No card boxes; just 1px lines to separate data. Everything is packed. **Mandatory:** Use Monospace (`font-mono`) for all numbers.
-
-## 7. AI TELLS (Forbidden Patterns)
-To guarantee a premium, non-generic output, you MUST strictly avoid these common AI design signatures unless explicitly requested:
-
-### Visual & CSS
-* **NO Neon/Outer Glows:** Do not use default `box-shadow` glows or auto-glows. Use inner borders or subtle tinted shadows.
-* **NO Pure Black:** Never use `#000000`. Use Off-Black, Zinc-950, or Charcoal.
-* **NO Oversaturated Accents:** Desaturate accents to blend elegantly with neutrals.
-* **NO Excessive Gradient Text:** Do not use text-fill gradients for large headers.
-* **NO Custom Mouse Cursors:** They are outdated and ruin performance/accessibility.
-
-### Typography
-* **NO Inter Font:** Banned. Use `Geist`, `Outfit`, `Cabinet Grotesk`, or `Satoshi`.
-* **NO Oversized H1s:** The first heading should not scream. Control hierarchy with weight and color, not just massive scale.
-* **Serif Constraints:** Use Serif fonts ONLY for creative/editorial designs. **NEVER** use Serif on clean Dashboards.
-
-### Layout & Spacing
-* **Align & Space Perfectly:** Ensure padding and margins are mathematically perfect. Avoid floating elements with awkward gaps.
-* **NO 3-Column Card Layouts:** The generic "3 equal cards horizontally" feature row is BANNED. Use a 2-column Zig-Zag, asymmetric grid, or horizontal scrolling approach instead.
-
-### Content & Data (The "Jane Doe" Effect)
-* **NO Generic Names:** "John Doe", "Sarah Chan", or "Jack Su" are banned. Use highly creative, realistic-sounding names.
-* **NO Generic Avatars:** DO NOT use standard SVG "egg" or Lucide user icons for avatars. Use creative, believable photo placeholders or specific styling.
-* **NO Fake Numbers:** Avoid predictable outputs like `99.99%`, `50%`, or basic phone numbers (`1234567`). Use organic, messy data (`47.2%`, `+1 (312) 847-1928`).
-* **NO Startup Slop Names:** "Acme", "Nexus", "SmartFlow". Invent premium, contextual brand names.
-* **NO Filler Words:** Avoid AI copywriting clichés like "Elevate", "Seamless", "Unleash", or "Next-Gen". Use concrete verbs.
-
-### External Resources & Components
-* **NO Broken Unsplash Links:** Do not use Unsplash. Use absolute, reliable placeholders like `https://picsum.photos/seed/{random_string}/800/600` or SVG UI Avatars.
-* **shadcn/ui Customization:** You may use `shadcn/ui`, but NEVER in its generic default state. You MUST customize the radii, colors, and shadows to match the high-end project aesthetic.
-* **Production-Ready Cleanliness:** Code must be extremely clean, visually striking, memorable, and meticulously refined in every detail.
-
-## 8. THE CREATIVE ARSENAL (High-End Inspiration)
-Do not default to generic UI. Pull from this library of advanced concepts to ensure the output is visually striking and memorable. When appropriate, leverage **GSAP (ScrollTrigger/Parallax)** for complex scrolltelling or **ThreeJS/WebGL** for 3D/Canvas animations, rather than basic CSS motion. **CRITICAL:** Never mix GSAP/ThreeJS with Framer Motion in the same component tree. Default to Framer Motion for UI/Bento interactions. Use GSAP/ThreeJS EXCLUSIVELY for isolated full-page scrolltelling or canvas backgrounds, wrapped in strict useEffect cleanup blocks.
-
-### The Standard Hero Paradigm
-* Stop doing centered text over a dark image. Try asymmetric Hero sections: Text cleanly aligned to the left or right. The background should feature a high-quality, relevant image with a subtle stylistic fade (darkening or lightening gracefully into the background color depending on if it is Light or Dark mode).
-
-### Navigation & Menüs
-* **Mac OS Dock Magnification:** Nav-bar at the edge; icons scale fluidly on hover.
-* **Magnetic Button:** Buttons that physically pull toward the cursor.
-* **Gooey Menu:** Sub-items detach from the main button like a viscous liquid.
-* **Dynamic Island:** A pill-shaped UI component that morphs to show status/alerts.
-* **Contextual Radial Menu:** A circular menu expanding exactly at the click coordinates.
-* **Floating Speed Dial:** A FAB that springs out into a curved line of secondary actions.
-* **Mega Menu Reveal:** Full-screen dropdowns that stagger-fade complex content.
-
-### Layout & Grids
-* **Bento Grid:** Asymmetric, tile-based grouping (e.g., Apple Control Center).
-* **Masonry Layout:** Staggered grid without fixed row heights (e.g., Pinterest).
-* **Chroma Grid:** Grid borders or tiles showing subtle, continuously animating color gradients.
-* **Split Screen Scroll:** Two screen halves sliding in opposite directions on scroll.
-* **Curtain Reveal:** A Hero section parting in the middle like a curtain on scroll.
-
-### Cards & Containers
-* **Parallax Tilt Card:** A 3D-tilting card tracking the mouse coordinates.
-* **Spotlight Border Card:** Card borders that illuminate dynamically under the cursor.
-* **Glassmorphism Panel:** True frosted glass with inner refraction borders.
-* **Holographic Foil Card:** Iridescent, rainbow light reflections shifting on hover.
-* **Tinder Swipe Stack:** A physical stack of cards the user can swipe away.
-* **Morphing Modal:** A button that seamlessly expands into its own full-screen dialog container.
-
-### Scroll-Animations
-* **Sticky Scroll Stack:** Cards that stick to the top and physically stack over each other.
-* **Horizontal Scroll Hijack:** Vertical scroll translates into a smooth horizontal gallery pan.
-* **Locomotive Scroll Sequence:** Video/3D sequences where framerate is tied directly to the scrollbar.
-* **Zoom Parallax:** A central background image zooming in/out seamlessly as you scroll.
-* **Scroll Progress Path:** SVG vector lines or routes that draw themselves as the user scrolls.
-* **Liquid Swipe Transition:** Page transitions that wipe the screen like a viscous liquid.
-
-### Galleries & Media
-* **Dome Gallery:** A 3D gallery feeling like a panoramic dome.
-* **Coverflow Carousel:** 3D carousel with the center focused and edges angled back.
-* **Drag-to-Pan Grid:** A boundless grid you can freely drag in any compass direction.
-* **Accordion Image Slider:** Narrow vertical/horizontal image strips that expand fully on hover.
-* **Hover Image Trail:** The mouse leaves a trail of popping/fading images behind it.
-* **Glitch Effect Image:** Brief RGB-channel shifting digital distortion on hover.
-
-### Typography & Text
-* **Kinetic Marquee:** Endless text bands that reverse direction or speed up on scroll.
-* **Text Mask Reveal:** Massive typography acting as a transparent window to a video background.
-* **Text Scramble Effect:** Matrix-style character decoding on load or hover.
-* **Circular Text Path:** Text curved along a spinning circular path.
-* **Gradient Stroke Animation:** Outlined text with a gradient continuously running along the stroke.
-* **Kinetic Typography Grid:** A grid of letters dodging or rotating away from the cursor.
-
-### Micro-Interactions & Effects
-* **Particle Explosion Button:** CTAs that shatter into particles upon success.
-* **Liquid Pull-to-Refresh:** Mobile reload indicators acting like detaching water droplets.
-* **Skeleton Shimmer:** Shifting light reflections moving across placeholder boxes.
-* **Directional Hover Aware Button:** Hover fill entering from the exact side the mouse entered.
-* **Ripple Click Effect:** Visual waves rippling precisely from the click coordinates.
-* **Animated SVG Line Drawing:** Vectors that draw their own contours in real-time.
-* **Mesh Gradient Background:** Organic, lava-lamp-like animated color blobs.
-* **Lens Blur Depth:** Dynamic focus blurring background UI layers to highlight a foreground action.
-
-## 9. THE "MOTION-ENGINE" BENTO PARADIGM
-When generating modern SaaS dashboards or feature sections, you MUST utilize the following "Bento 2.0" architecture and motion philosophy. This goes beyond static cards and enforces a "Vercel-core meets Dribbble-clean" aesthetic heavily reliant on perpetual physics.
-
-### A. Core Design Philosophy
-* **Aesthetic:** High-end, minimal, and functional.
-* **Palette:** Background in `#f9fafb`. Cards are pure white (`#ffffff`) with a 1px border of `border-slate-200/50`.
-* **Surfaces:** Use `rounded-[2.5rem]` for all major containers. Apply a "diffusion shadow" (a very light, wide-spreading shadow, e.g., `shadow-[0_20px_40px_-15px_rgba(0,0,0,0.05)]`) to create depth without clutter.
-* **Typography:** Strict `Geist`, `Satoshi`, or `Cabinet Grotesk` font stack. Use subtle tracking (`tracking-tight`) for headers.
-* **Labels:** Titles and descriptions must be placed **outside and below** the cards to maintain a clean, gallery-style presentation.
-* **Pixel-Perfection:** Use generous `p-8` or `p-10` padding inside cards.
-
-### B. The Animation Engine Specs (Perpetual Motion)
-All cards must contain **"Perpetual Micro-Interactions."** Use the following Framer Motion principles:
-* **Spring Physics:** No linear easing. Use `type: "spring", stiffness: 100, damping: 20` for a premium, weighty feel.
-* **Layout Transitions:** Heavily utilize the `layout` and `layoutId` props to ensure smooth re-ordering, resizing, and shared element state transitions.
-* **Infinite Loops:** Every card must have an "Active State" that loops infinitely (Pulse, Typewriter, Float, or Carousel) to ensure the dashboard feels "alive".
-* **Performance:** Wrap dynamic lists in `<AnimatePresence>` and optimize for 60fps. **PERFORMANCE CRITICAL:** Any perpetual motion or infinite loop MUST be memoized (React.memo) and completely isolated in its own microscopic Client Component. Never trigger re-renders in the parent layout.
-
-### C. The 5-Card Archetypes (Micro-Animation Specs)
-Implement these specific micro-animations when constructing Bento grids (e.g., Row 1: 3 cols | Row 2: 2 cols split 70/30):
-1. **The Intelligent List:** A vertical stack of items with an infinite auto-sorting loop. Items swap positions using `layoutId`, simulating an AI prioritizing tasks in real-time.
-2. **The Command Input:** A search/AI bar with a multi-step Typewriter Effect. It cycles through complex prompts, including a blinking cursor and a "processing" state with a shimmering loading gradient.
-3. **The Live Status:** A scheduling interface with "breathing" status indicators. Include a pop-up notification badge that emerges with an "Overshoot" spring effect, stays for 3 seconds, and vanishes.
-4. **The Wide Data Stream:** A horizontal "Infinite Carousel" of data cards or metrics. Ensure the loop is seamless (using `x: ["0%", "-100%"]`) with a speed that feels effortless.
-5. **The Contextual UI (Focus Mode):** A document view that animates a staggered highlight of a text block, followed by a "Float-in" of a floating action toolbar with micro-icons.
-
-## 10. FINAL PRE-FLIGHT CHECK
-Evaluate your code against this matrix before outputting. This is the **last** filter you apply to your logic.
- [ ] Is global state used appropriately to avoid deep prop-drilling rather than arbitrarily?
- [ ] Is mobile layout collapse (`w-full`, `px-4`, `max-w-7xl mx-auto`) guaranteed for high-variance designs?
- [ ] Do full-height sections safely use `min-h-[100dvh]` instead of the bugged `h-screen`?
- [ ] Do `useEffect` animations contain strict cleanup functions?
- [ ] Are empty, loading, and error states provided?
- [ ] Are cards omitted in favor of spacing where possible?
- [ ] Did you strictly isolate CPU-heavy perpetual animations in their own Client Components?
@@ -1,72 +1,57 @@
 ---
 name: fa-crud-page-generator
-description: "为 Fantastic-admin 框架生成完整的 CRUD 业务模块，包含列表页、详情/编辑页、表单组件、API 模块和 Mock 数据。当用户说：'帮我做一个商品管理页面'、'搭一个用户列表，能搜索、能分页、能新增编辑删除'、'生成一个订单模块'、'我需要一个带增删改查的页面'、'快速搭一个管理页面骨架'，即使用户只是说'新建一个 XX 管理模块'也应触发此技能。"
+description: "为 Fantastic-admin 框架生成完整的 CRUD 业务模块，遵循框架标准模块结构和内建 Fa* 组件体系，使用 FaForm/FaFormItem 生成新增/编辑表单，产出列表页、详情/编辑页、DetailForm 表单组件、API 模块、fake mock 数据、可选路由。用户说：'帮我做一个商品管理页面'、'搭一个用户列表，能搜索分页新增编辑删除'、'生成订单模块'、'新建 XX 管理模块'、'快速搭一个标准模块/CRUD 页面' 时，即使没有明确说 CRUD，也应触发此技能。"
 ---

 # CRUD 页面生成器

-在 Fantastic-admin 框架中生成完整的 CRUD 业务模块，一次性生成所有相关文件，让开发者专注于业务逻辑而非重复代码。
+在 Fantastic-admin 框架中生成标准 CRUD 业务模块。生成时遵循框架当前标准模块结构：
+列表页、独立详情页、`DetailForm` 表单组件、API 模块、fake mock、可选路由和 route i18n
+要一次性配套生成。

-**生成的文件清单：**
- `apps/<app>/src/views/{path}/{name}/list.vue` — 列表页（搜索栏 + 表格 + 分页）
- `apps/<app>/src/views/{path}/{name}/detail.vue` — 详情/编辑页（仅 router 模式需要）
- `apps/<app>/src/views/{path}/{name}/components/DetailForm/index.vue` — 表单组件
+优先复刻框架现有写法，而不是重新发明页面结构：列表页用 `FaSearchBar` + `FaTable` +
+`FaPagination`，详情表单抽成 `components/DetailForm/index.vue`，独立详情页用
+`FaFixedBar` 固定顶部标题和底部提交区。
+
+**生成文件清单：**
+- `apps/<app>/src/views/{path}/{module}/list.vue` — 列表页
+- `apps/<app>/src/views/{path}/{module}/detail.vue` — 独立详情页，仅 `router` 模式需要
+- `apps/<app>/src/views/{path}/{module}/components/DetailForm/index.vue` — 新增/编辑表单
 - `apps/<app>/src/api/modules/{fileName}.ts` — API 模块
- `apps/<app>/src/api/modules/{fileName}.fake.ts` — Mock 数据（可选）
+- `apps/<app>/src/api/fake_modules/{fileName}.fake.ts` — fake mock 数据，可选
+- `apps/<app>/src/router/modules/{routeFileName}.ts` — 前端路由，可选
+- `apps/<app>/src/locales/lang/route/{locale}.json` — 路由标题 i18n，可选

 ---

-## 第一步：确认工作区（必须阻塞等待用户回复）
+## 先确认应用

-本项目是 monorepo 架构，`apps/` 目录下存放各应用。**在执行任何文件读写操作之前**，必须先确认目标应用：
+本项目是 pnpm monorepo。开始写文件前先确认目标应用：

-1. 执行 `ls apps/` 列出所有可用应用
-2. **立即向用户提问**，明确询问要在哪个应用中生成 CRUD 模块，并**停止等待回复**
-3. 收到用户明确回复后，才能继续后续步骤
+1. 如果用户已经明确写了 `apps/<app>`、`admin 应用`、`pro 应用` 等目标应用，直接使用该应用。
+2. 如果没有明确目标应用，先执行 `ls apps/` 查看可用应用，然后询问用户要生成到哪个应用，并等待回复。
+3. 后续所有路径都以 `apps/<app>/src/` 为根。

-> **严格规则**：如果用户没有在请求中明确说明目标应用（例如"在 example 应用中"、"apps/core"），则必须提问，不得自行猜测或默认选择任何应用。
-
-确认后，后续所有文件路径均以该应用目录为根。
+不要默认猜测应用；生成到错误应用的返工成本很高。

 ---

-## 工作流程
+## 信息收集

-### Step 1：收集基本信息
+尽量一次性收集会影响文件结构的信息：

-向用户询问以下内容（可合并为一次提问）：
+- **模块名**：英文，用于目录、API 文件和路由，如 `product`、`order`、`systemUser`
+- **模块中文名**：用于标题和提示，如 `商品`、`订单`、`用户`
+- **存放路径**：位于 `src/views/` 下的子路径，如 `mall`、`system/user`，可为空
+- **字段清单**：字段名、中文标签、类型、是否列表显示、是否搜索、是否表单显示、是否必填
+- **详情展示模式**：`router`、`modal`、`drawer`，默认 `router`
+- **是否启用批量删除**：默认启用
+- **是否支持列表高度自适应**：默认生成 `tableAutoHeight` 代码
+- **是否生成 fake mock**：开发阶段默认推荐生成
+- **是否生成路由和 route i18n**：仅当前端路由由本地配置维护时生成

-1. **模块名**（英文，用于文件名和路由，如 `user`、`product`、`order`）
-2. **模块中文名**（用于页面标题和提示文字，如 `用户`、`商品`、`订单`）
-3. **存放路径**（在 `apps/<app>/src/views/` 下的子目录，如 `system`、`mall/product`，留空则直接放在 `src/views/` 下）
-
-### Step 2：收集字段信息
-
-询问用户该模块有哪些字段，每个字段需要：
- **字段名**（英文，如 `name`、`status`、`createdAt`）
- **中文标签**（如 `姓名`、`状态`、`创建时间`）
- **字段类型**（`string` | `number` | `boolean` | `date`）
- **是否在列表中显示**
- **是否在搜索栏中显示**
- **是否在表单中显示**（新增/编辑）
- **是否必填**（表单验证）
-
-如果用户没有提供字段信息，使用默认字段 `title`（标题，string，必填）作为示例占位，并在生成后提示用户替换。
-
-### Step 3：收集功能选项
-
-以下三个选项会直接影响生成的文件结构，需要在同一轮提问中一起确认，避免后续重复生成：
-
-4. **详情展示模式**：
-   - `router` — 跳转到独立的详情页（默认，适合复杂表单）
-   - `modal` — 弹窗（适合简单表单）
-   - `drawer` — 抽屉（适合中等复杂度表单）
-5. **是否生成 Mock 数据**（是/否，开发阶段推荐开启）
-6. **是否同时生成路由配置**（是/否，仅 `app.routeBaseOn` 为 `frontend` 时有效；选是时需额外询问归属的主导航分组名称）
-
-### Step 4：确认并生成
-
-汇总信息，展示将要生成的文件列表，确认后写入文件。
+如果用户只给出模块名和很少字段，使用一个最小可运行字段：
+`title`（标题，`string`，列表/搜索/表单显示，必填），并在完成后提醒用户继续替换业务字段。

 ---

@@ -74,38 +59,60 @@ description: "为 Fantastic-admin 框架生成完整的 CRUD 业务模块，包

 给定模块名 `name` 和路径 `path`（相对于 `apps/<app>/src/views/`）：

-| 用途 | 规则 | 示例（path=system, name=user） |
-|------|------|-------------------------------|
-| 视图目录 | `apps/<app>/src/views/{path}/{snakeCase(name)}/` | `apps/<app>/src/views/system/user/` |
-| API 文件名 | path 非空时：`{camelCase(path)}_{camelCase(name)}`；path 为空时：`{camelCase(name)}` | `systemUser` |
-| 组件名 | `PascalCase({path}-{name}-list/detail)` | `SystemUserList` |
-| API URL 前缀 | `/{path}/{snakeCase(name)}/` | `/system/user/` |
+| 用途 | 规则 | 示例（path 为空，name=product） |
+|------|------|----------------------------------------|
+| 视图目录 | `src/views/{path}/{snake_case(name)}/` | `src/views/product/` |
+| API 文件名 | path 参与业务命名时使用 camelCase；普通模块用 `camelCase(name)` | `product` |
+| fake 文件名 | 与 API 文件名一致，放到 `src/api/fake_modules/` | `product.fake.ts` |
+| 列表组件名 | `PascalCase({path}-{name}-list)` | `ProductList` |
+| 详情组件名 | `PascalCase({path}-{name}-detail)` | `ProductDetail` |
+| 路由 name | `camelCase(name)List` / `camelCase(name)Detail` | `productList` |
+| API URL 前缀 | `snake_case(path/name)`，无前导斜杠 | `product` |

-**snakeCase 规则**：多个单词用下划线连接，如 `productCategory` → `product_category`
+`snake_case` 用下划线连接多个单词，如 `productCategory` -> `product_category`。

 ---

-## 代码模板
+## 代码生成规则

-详细的代码模板见 [references/templates.md](references/templates.md)，其中也包含 faker.js 字段类型映射表。
+详细模板见 [references/templates.md](references/templates.md)。生成时按这些规则填充模板：

-生成代码时，根据用户提供的字段信息替换模板中的占位符：
- 列表页的 `ElTableColumn` 根据"列表显示"字段生成
- 搜索栏的 `ElFormItem` 根据"搜索显示"字段生成
- 表单组件的 `ElFormItem` 根据"表单显示"字段生成
- API 模块的 TypeScript 类型根据字段定义生成
- Mock 数据根据字段类型使用合适的 faker.js 方法生成（见 templates.md 中的映射表）
+- `list.vue` 使用 `<script setup lang="ts">`，导入 `type { TableColumn } from '@fantastic-admin/components'`。
+- 表格列使用 `computed<TableColumn<Item>[]>(...)` 定义，页面模板使用 `FaTable` 的 `:columns` 与 `#cell-xxx` 插槽。
+- 搜索区使用 `FaSearchBar` + `FaLabel`，按钮保持“重置 / 筛选 / 展开收起”的顺序。
+- 工具栏通过 `FaTable` 的 `#toolbar` 插槽放“新增”和批量操作。
+- 行操作用 `FaButton size="icon-sm"` 编辑按钮和 `FaDropdown` 删除菜单。
+- 删除确认统一使用 `useFaModal().confirm`，提示成功统一使用 `useFaToast().success`。
+- `router` 模式在列表页通过 `eventBus.on('get-data-list')` 接收详情页提交后的刷新事件；卸载时 `eventBus.off('get-data-list')`。
+- `modal` / `drawer` 模式通过 `useFaModal().create` 或 `useFaDrawer().create` 渲染 `DetailForm`，confirm 时调用表单暴露的 `submit()`；仅当返回 `true` 时刷新列表并关闭。
+- `DetailForm` 使用 `FaForm/FaFormItem`，表单对象使用 `const model = ref<...>({...})`，通过 `useTemplateRef<FormExpose>('formRef')` 获取表单引用，并只 `defineExpose({ submit })` 给外部调用。
+- `submit()` 必须返回 `Promise<boolean>`：校验失败返回 `false`，新增/编辑成功后提示并返回 `true`。父级页面、modal、drawer 都必须检查返回值，避免校验失败时关闭页面或弹窗。
+- fake mock 文件放在 `apps/<app>/src/api/fake_modules/`，不是 `api/modules/`。
+- API 模块开启 mock 时在每个请求配置中设置 `fake: true`；不生成 fake 时去掉 `fake: true`。

 ---

-## 路由生成（可选）
+## 路由生成

-如果用户选择同时生成路由，先读取 `apps/<app>/src/settings.ts` 确认 `app.routeBaseOn === 'frontend'`，然后使用 `fa-route-generator` 技能生成对应路由配置：
- **router 模式**：生成列表路由 + 详情路由（详情路由带 `menu: false` 和 `activeMenu` 指向列表）
- **modal/drawer 模式**：只生成列表路由
+如果用户选择生成路由，优先调用或参考 `fa-route-generator`，并遵循最新标准模块路由模式：
+
+- 父级路由指向 `Layout`，`meta.title` 使用 `$t('route.<module>.root')`，设置合适图标。
+- 列表子路由 `path: ''`，`name: '<module>List'`，组件指向 `list.vue`。
+- 当父级路由只作为菜单入口、列表页作为默认子页时，列表路由使用 `meta.menu: false` 和 `breadcrumb: false`；业务模块如需列表作为独立菜单项，可按用户需求保留菜单。
+- `router` 模式详情路由为 `detail/:id?`，`meta.menu: false`，`activeMenu` 指向列表/父菜单路径。
+- 为避免列表和详情标签页状态混乱，列表路由设置 `keepAlive: '<module>Detail'`，详情路由设置 `keepAlive: true` 与 `noKeepAlive: '<module>List'`。
+- route i18n 至少同步 `zh-cn`、`zh-tw`、`en` 三份 `src/locales/lang/route/*.json`。

 ---

-## 生成后提示用户
+## 生成前后检查

-文件生成完成后简要告知：如果未生成路由，可用 `fa-route-generator` 技能添加；生成了 `.fake.ts` 则 API 请求会自动走 mock；表单字段类型（Select、DatePicker 等）需根据业务自行替换。
+写文件前展示将生成/修改的文件列表，确认不会覆盖用户已有业务文件。若目标文件已存在，先读取并说明将如何合并。
+
+完成后简要说明：
+- 已生成哪些文件；
+- 若未生成路由，提示可继续用 `fa-route-generator` 添加；
+- 若生成 fake mock，说明请求已配置 `fake: true`；
+- 若字段是枚举、状态、日期、上传等复杂类型，提醒用户按业务替换控件和 mock 取值。
+
+不要修改 `packages/components/` 内建组件；确实需要改内建组件时先征得用户确认。
@@ -1,14 +1,25 @@
 # CRUD 代码模板

-以下模板基于 `src/views/pages_example/manager` 真实模块提炼，使用以下占位符：
+生成业务模块时优先保持结构一致，再按字段和业务控件做替换。

- `{cname}` — 模块中文名，如 `用户`
- `{componentNameList}` — 列表页组件名（PascalCase），如 `SystemUserList`
- `{componentNameDetail}` — 详情页组件名（PascalCase），如 `SystemUserDetail`
- `{fileName}` — API 文件名（camelCase），如 `systemUser`
- `{apiPrefix}` — API URL 前缀（无前导斜杠），如 `system/user`
- `{routeListName}` — 列表路由 name，如 `systemUserList`
- `{routeDetailName}` — 详情路由 name，如 `systemUserDetail`（仅 router 模式）
+## 占位符
+
+- `{cname}` — 模块中文名，如 `商品`
+- `{moduleName}` — 模块英文名 camelCase，如 `product`
+- `{ModuleName}` — 模块英文名 PascalCase，如 `Product`
+- `{fileName}` — API 文件名，如 `product`
+- `{apiPrefix}` — API URL 前缀，无前导斜杠，如 `product`
+- `{componentNameList}` — 列表页组件名，如 `ProductList`
+- `{componentNameDetail}` — 详情页组件名，如 `ProductDetail`
+- `{routeListName}` — 列表路由 name，如 `productList`
+- `{routeDetailName}` — 详情路由 name，如 `productDetail`
+- `{routeRootName}` — 父级路由 name，如 `product`
+- `{routePath}` — 父级路由 path，如 `/product`
+- `{routeTitle}` — 路由标题，如 `商品管理`
+- `{formMode}` — `router`、`modal` 或 `drawer`
+- `{firstField}` — 删除确认中展示的主字段，如 `title`
+- `{formModelTypes}` — `DetailFormModel` 中除 `id` 外的字段类型
+- `{formValidationSchema}` — `FaForm` 的 validation schema 对象字段

 ---

@@ -16,7 +27,8 @@

 ```vue
 <script setup lang="ts">
-import api{FileName} from '@/api/modules/{fileName}'
+import type { TableColumn } from '@fantastic-admin/components'
+import api{ModuleName} from '@/api/modules/{fileName}'
 import eventBus from '@/utils/eventBus'
 import DetailForm from './components/DetailForm/index.vue'

@@ -24,8 +36,13 @@ defineOptions({
  name: '{componentNameList}',
 })

+interface {ModuleName}Item {
+  id: number
+  {itemTypeFields}
+}
+
 const router = useRouter()
-const { pagination, getParams, onSizeChange, onCurrentChange, onSortChange } = usePagination()
+const { pagination, getParams, onSizeChange, onCurrentChange } = usePagination()

 // 表格是否自适应高度
 const tableAutoHeight = ref(false)
@@ -40,7 +57,7 @@ const formMode = ref<'router' | 'modal' | 'drawer'>('{formMode}')

 // 详情
 const formModeProps = ref({
-  id: '',
+  id: '' as number | string,
 })

 // 搜索
@@ -55,12 +72,30 @@ function searchReset() {
 // 批量操作
 const batch = ref({
  enable: true,
-  selectionDataList: [],
+  selectionDataList: [] as {ModuleName}Item[],
 })

 // 列表
 const loading = ref(false)
-const dataList = ref([])
+const dataList = ref<{ModuleName}Item[]>([])
+
+const tableColumns = computed<TableColumn<{ModuleName}Item>[]>(() => [
+  ...(batch.value.enable
+    ? [{
+      type: 'selection',
+      fixed: 'left',
+      width: 48,
+    } satisfies TableColumn<{ModuleName}Item>]
+    : []),
+  {tableColumns}
+  {
+    id: 'operation',
+    header: '操作',
+    width: 120,
+    align: 'center',
+    fixed: 'right',
+  },
+])

 onMounted(() => {
  getDataList()
@@ -83,7 +118,7 @@ function getDataList() {
    ...getParams(),
    {searchParams}
  }
-  api{FileName}.list(params).then((res: any) => {
+  api{ModuleName}.list(params).then((res: any) => {
    loading.value = false
    dataList.value = res.data.list
    pagination.value.total = res.data.total
@@ -100,11 +135,6 @@ function currentChange(page = 1) {
  onCurrentChange(page).then(() => getDataList())
 }

-// 字段排序
-function sortChange({ prop, order }: { prop: string, order: string }) {
-  onSortChange(prop, order).then(() => getDataList())
-}
-
 const formRef = ref<InstanceType<typeof DetailForm>>()

 const { open: openModal, update: updateModal } = useFaModal().create({
@@ -114,7 +144,11 @@ const { open: openModal, update: updateModal } = useFaModal().create({
  beforeClose: (action, done) => {
    if (action === 'confirm') {
      // 调用 DetailForm 组件内部 submit 方法
-      formRef.value?.submit().then(() => {
+      formRef.value?.submit().then((success) => {
+        if (!success) {
+          return
+        }
+
        getDataList()
        done()
      })
@@ -136,7 +170,11 @@ const { open: openDrawer, update: updateDrawer } = useFaDrawer().create({
  beforeClose: (action, done) => {
    if (action === 'confirm') {
      // 调用 DetailForm 组件内部 submit 方法
-      formRef.value?.submit().then(() => {
+      formRef.value?.submit().then((success) => {
+        if (!success) {
+          return
+        }
+
        getDataList()
        done()
      })
@@ -153,46 +191,79 @@ const { open: openDrawer, update: updateDrawer } = useFaDrawer().create({

 function onCreate() {
  if (formMode.value === 'router') {
-    router.push({ name: '{routeDetailName}' })
+    router.push({
+      name: '{routeDetailName}',
+    })
  }
  else {
    formModeProps.value.id = ''
    if (formMode.value === 'modal') {
-      updateModal({ title: '新增{cname}' })
+      updateModal({
+        title: '新增{cname}',
+      })
      openModal()
    }
    else {
-      updateDrawer({ title: '新增{cname}' })
+      updateDrawer({
+        title: '新增{cname}',
+      })
      openDrawer()
    }
  }
 }

-function onEdit(row: any) {
+function onEdit(row: {ModuleName}Item) {
  if (formMode.value === 'router') {
-    router.push({ name: '{routeDetailName}', params: { id: row.id } })
+    router.push({
+      name: '{routeDetailName}',
+      params: {
+        id: row.id,
+      },
+    })
  }
  else {
    formModeProps.value.id = row.id
    if (formMode.value === 'modal') {
-      updateModal({ title: '编辑{cname}' })
+      updateModal({
+        title: '编辑{cname}',
+      })
      openModal()
    }
    else {
-      updateDrawer({ title: '编辑{cname}' })
+      updateDrawer({
+        title: '编辑{cname}',
+      })
      openDrawer()
    }
  }
 }

-function onDel(row: any) {
+function onDel(row: {ModuleName}Item) {
  useFaModal().confirm({
    title: '确认信息',
    content: `确认删除「${row.{firstField}}」吗？`,
    onConfirm: () => {
-      api{FileName}.delete(row.id).then(() => {
+      api{ModuleName}.delete(row.id).then(() => {
        getDataList()
-        faToast.success('删除成功')
+        useFaToast().success('删除成功')
+      })
+    },
+  })
+}
+
+function onBatchDel() {
+  const rows = batch.value.selectionDataList
+  if (!rows.length) {
+    return
+  }
+
+  useFaModal().confirm({
+    title: '确认信息',
+    content: `确认删除选中的 ${rows.length} 条数据吗？`,
+    onConfirm: () => {
+      Promise.all(rows.map(row => api{ModuleName}.delete(row.id))).then(() => {
+        getDataList()
+        useFaToast().success('批量删除成功')
      })
    },
  })
@@ -206,7 +277,7 @@ function onDel(row: any) {
      <FaSearchBar :show-toggle="false">
        <template #default="{ fold, toggle }">
          <div class="gap-x-8 gap-y-2 grid grid-cols-[repeat(auto-fit,minmax(300px,1fr))]">
-            {fields.search}
+            {searchFields}
            <div class="flex gap-2 col-end--1 justify-end">
              <FaButton variant="outline" @click="searchReset(); currentChange()">
                重置
@@ -223,51 +294,72 @@ function onDel(row: any) {
          </div>
        </template>
      </FaSearchBar>
-      <div class="mx--5 my-4 border-t border-t-dashed" />
-      <div class="flex-center-between gap-2">
-        <FaButton v-if="batch.enable" variant="outline" :disabled="!batch.selectionDataList.length">
-          批量操作
-        </FaButton>
-        <FaButton @click="onCreate">
-          <FaIcon name="i-ri:add-line" />
-          新增
-        </FaButton>
-      </div>
-      <ElTable v-loading="loading" class="my-4" :data="dataList" stripe highlight-current-row border height="100%" @sort-change="sortChange" @selection-change="batch.selectionDataList = $event">
-        <ElTableColumn v-if="batch.enable" type="selection" align="center" fixed />
-        {fields.list}
-        <ElTableColumn label="操作" width="120" align="center" fixed="right">
-          <template #default="scope">
-            <div class="flex-center gap-2">
-              <FaButton variant="outline" size="icon-sm" @click="onEdit(scope.row)">
-                <FaIcon name="i-ri:edit-line" />
+      <div class="mx--4 my-3 border-t border-t-dashed" />
+      <FaTable
+        v-loading="loading"
+        table-root-class="rounded-lg overflow-hidden"
+        :class="{ 'min-h-0 flex-1': tableAutoHeight }"
+        row-key="id"
+        selectable
+        multiple
+        stripe
+        column-visibility
+        border
+        :columns="tableColumns"
+        :data="dataList"
+        @selection-change="batch.selectionDataList = $event"
+      >
+        <template #toolbar>
+          <div class="flex flex-1 gap-2 items-center">
+            <FaButton @click="onCreate">
+              新增
+            </FaButton>
+            <FaDropdown
+              v-if="batch.enable"
+              :items="[
+                [
+                  { label: '批量删除', variant: 'destructive', disabled: !batch.selectionDataList.length, handle: onBatchDel },
+                ],
+              ]"
+            >
+              <FaButton variant="outline" :disabled="!batch.selectionDataList.length">
+                批量操作
+                <FaIcon name="i-ep:arrow-down" />
              </FaButton>
-              <FaDropdown
-                :items="[
-                  [
-                    { label: '删除', variant: 'destructive', handle: () => onDel(scope.row) },
-                  ],
-                ]"
-              >
-                <FaButton variant="outline" size="icon-sm">
-                  <FaIcon name="i-ri:more-line" />
-                </FaButton>
-              </FaDropdown>
-            </div>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-      <FaPagination :page="pagination.page" :size="pagination.size" :total="pagination.total" @page-change="currentChange" @size-change="sizeChange" />
+            </FaDropdown>
+          </div>
+        </template>
+        {tableCellSlots}
+        <template #cell-operation="{ row }">
+          <div class="flex-center gap-2">
+            <FaButton variant="outline" size="icon-sm" @click="onEdit(row.original)">
+              <FaIcon name="i-ri:edit-line" />
+            </FaButton>
+            <FaDropdown
+              :items="[
+                [
+                  { label: '删除', variant: 'destructive', handle: () => onDel(row.original) },
+                ],
+              ]"
+            >
+              <FaButton variant="outline" size="icon-sm">
+                <FaIcon name="i-ri:more-line" />
+              </FaButton>
+            </FaDropdown>
+          </div>
+        </template>
+      </FaTable>
+      <FaPagination :page="pagination.page" :size="pagination.size" :total="pagination.total" class="mt-2" @page-change="currentChange" @size-change="sizeChange" />
    </FaPageMain>
  </div>
 </template>
 ```

-> 注意：`list.vue` 不需要 `<style scoped>` 块，所有样式均通过 UnoCSS 工具类实现。
+业务页面保持简洁标题即可，不要在 `FaPageHeader #description` 中加入解释技能或模板来源的说明文字。

 ---

-## detail.vue 模板（仅 router 模式）
+## detail.vue 模板（router 模式）

 ```vue
 <script setup lang="ts">
@@ -281,10 +373,23 @@ defineOptions({
 const route = useRoute()
 const router = useRouter()

+const appPage = useAppPage()
+
+onMounted(() => {
+  appPage.setCustomTitle(route.params.id ? '编辑' : '新增')
+})
+onUnmounted(() => {
+  appPage.resetCustomTitle()
+})
+
 const formRef = useTemplateRef('formRef')

 function onSubmit() {
-  formRef.value?.submit().then(() => {
+  formRef.value?.submit().then((success) => {
+    if (!success) {
+      return
+    }
+
    eventBus.emit('get-data-list')
    onCancel()
  })
@@ -306,11 +411,9 @@ function onCancel() {
      </FaPageHeader>
    </FaFixedBar>
    <FaPageMain>
-      <ElRow>
-        <ElCol :md="24" :lg="16">
-          <DetailForm :id="route.params.id as string" ref="formRef" />
-        </ElCol>
-      </ElRow>
+      <div class="max-w-4xl w-full">
+        <DetailForm :id="route.params.id as string" ref="formRef" />
+      </div>
    </FaPageMain>
    <FaFixedBar position="bottom" class="flex-center gap-4">
      <FaButton @click="onSubmit">
@@ -330,8 +433,9 @@ function onCancel() {

 ```vue
 <script setup lang="ts">
-import type { FormInstance, FormRules } from 'element-plus'
-import api{FileName} from '@/api/modules/{fileName}'
+import type { FormExpose } from '@fantastic-admin/components'
+import { ref } from 'vue'
+import api{ModuleName} from '@/api/modules/{fileName}'

 export interface Props {
  id?: number | string
@@ -344,67 +448,80 @@ const props = withDefaults(
 )

 const loading = ref(false)
-const formRef = useTemplateRef<FormInstance>('formRef')
-const form = ref({
+const formRef = useTemplateRef<FormExpose>('formRef')
+
+interface DetailFormModel {
+  id: number | string
+  {formModelTypes}
+}
+
+const model = ref<DetailFormModel>({
  id: props.id,
-  {fields.formInit}
-})
-const formRules = ref<FormRules>({
-  {fields.rules}
+  {formInitialValues}
 })

+const validationSchema = {
+  {formValidationSchema}
+}
+
 onMounted(() => {
-  if (form.value.id !== '') {
+  if (model.value.id !== '') {
    getInfo()
  }
 })

 function getInfo() {
  loading.value = true
-  api{FileName}.detail(form.value.id).then((res: any) => {
+  api{ModuleName}.detail(model.value.id).then((res: any) => {
    loading.value = false
-    {fields.formAssign}
+    {formAssign}
  }).catch(() => {
    loading.value = false
  })
 }

+async function submit() {
+  const result = await formRef.value?.validate()
+
+  if (!result?.valid) {
+    return false
+  }
+
+  if (model.value.id === '') {
+    await api{ModuleName}.create(model.value)
+    useFaToast().success('新增成功')
+  }
+  else {
+    await api{ModuleName}.edit(model.value)
+    useFaToast().success('编辑成功')
+  }
+
+  return true
+}
+
 defineExpose({
-  submit() {
-    return new Promise<void>((resolve) => {
-      formRef.value?.validate((valid) => {
-        if (valid) {
-          if (form.value.id === '') {
-            api{FileName}.create(form.value).then(() => {
-              faToast.success('新增成功')
-              resolve()
-            })
-          }
-          else {
-            api{FileName}.edit(form.value).then(() => {
-              faToast.success('编辑成功')
-              resolve()
-            })
-          }
-        }
-      })
-    })
-  },
+  submit,
 })
 </script>

 <template>
  <div v-loading="loading">
-    <ElForm ref="formRef" :model="form" :rules="formRules" label-width="120px" label-suffix="：">
-      {fields.form}
-    </ElForm>
+    <FaForm
+      ref="formRef"
+      :model="model"
+      :validation-schema="validationSchema"
+      label-placement="right"
+      :label-width="120"
+    >
+      {formFields}
+    </FaForm>
  </div>
 </template>
 ```

 ---

-## api.ts 模板
+## api/modules/{fileName}.ts 模板

 ```typescript
 import api from '../index'
@@ -420,7 +537,9 @@ export default {
  }),

  detail: (id: number | string) => api.get('{apiPrefix}/detail', {
-    params: { id },
+    params: {
+      id,
+    },
    fake: true,
  }),

@@ -432,27 +551,30 @@ export default {
    fake: true,
  }),

-  delete: (id: number | string) => api.post('{apiPrefix}/delete', { id }, {
+  delete: (id: number | string) => api.post('{apiPrefix}/delete', {
+    id,
+  }, {
    fake: true,
  }),
 }
 ```

-> 不需要 Mock 数据时，去掉所有 `fake: true` 选项即可。
+不生成 fake mock 时，去掉所有 `fake: true` 配置，并确保接口地址与真实后端约定一致。

 ---

-## fake.ts 模板
+## api/fake_modules/{fileName}.fake.ts 模板

 ```typescript
-import { faker } from '@faker-js/faker/locale/zh_CN'
+import { faker } from '@faker-js/faker'
 import { defineFakeRoute } from 'vite-plugin-fake-server/client'

+// {cname}
 const {moduleName}List: any[] = []
 for (let i = 0; i < 50; i++) {
  {moduleName}List.push({
    id: i + 1,
-    {fields.mock}
+    {mockFields}
  })
 }

@@ -462,8 +584,9 @@ export default defineFakeRoute([
    method: 'get',
    response: ({ query }) => {
      const { {searchQueryFields}, from, limit } = query
-      let list = {moduleName}List
-      {searchFilters}
+      const list = {moduleName}List.filter((item) => {
+        return {searchFilterExpression}
+      })
      const pageList = list.filter((_item, index) => {
        return index >= ~~from && index < (~~from + ~~limit)
      })
@@ -493,122 +616,257 @@ export default defineFakeRoute([
    url: '/fake/{apiPrefix}/create',
    method: 'post',
    response: () => {
-      return { error: '', status: 1, data: { isSuccess: true } }
+      return {
+        error: '',
+        status: 1,
+        data: {
+          isSuccess: true,
+        },
+      }
    },
  },
  {
    url: '/fake/{apiPrefix}/edit',
    method: 'post',
    response: () => {
-      return { error: '', status: 1, data: { isSuccess: true } }
+      return {
+        error: '',
+        status: 1,
+        data: {
+          isSuccess: true,
+        },
+      }
    },
  },
  {
    url: '/fake/{apiPrefix}/delete',
    method: 'post',
    response: () => {
-      return { error: '', status: 1, data: { isSuccess: true } }
+      return {
+        error: '',
+        status: 1,
+        data: {
+          isSuccess: true,
+        },
+      }
    },
  },
 ])
 ```

+如果有多个搜索字段，可以用 `&&` 组合过滤条件：
+
+```typescript
+return (title ? item.title.includes(title) : true)
+  && (status !== undefined && status !== '' ? item.status === ~~status : true)
+```
+
+---
+
+## router/modules/{routeFileName}.ts 模板
+
+```typescript
+import type { RouteRecordRaw } from 'vue-router'
+import { $t } from '@/locales'
+
+function Layout() {
+  return import('@/layouts/index.vue')
+}
+
+const routes: RouteRecordRaw = {
+  path: '{routePath}',
+  component: Layout,
+  name: '{routeRootName}',
+  meta: {
+    title: '{routeTitle}',
+    icon: '{icon}',
+  },
+  children: [
+    {
+      path: '',
+      name: '{routeListName}',
+      component: () => import('@/views/{viewPath}/list.vue'),
+      meta: {
+        title: '{cname}列表',
+        menu: false,
+        breadcrumb: false,
+        keepAlive: '{routeDetailName}',
+      },
+    },
+    {
+      path: 'detail/:id?',
+      name: '{routeDetailName}',
+      component: () => import('@/views/{viewPath}/detail.vue'),
+      meta: {
+        title: '...',
+        menu: false,
+        activeMenu: '{routePath}',
+        keepAlive: true,
+        noKeepAlive: '{routeListName}',
+      },
+    },
+  ],
+}
+
+export default routes
+```
+
+`modal` / `drawer` 模式不需要详情路由，列表路由也不需要 `keepAlive: '{routeDetailName}'`。
+
 ---

 ## 字段生成规则

+### TypeScript item 字段
+
+```typescript
+title: string
+status: number
+createdAt: string
+```
+
+### 搜索默认值和查询参数
+
+```typescript
+const searchDefault = {
+  title: '',
+  status: '',
+}
+
+const params = {
+  ...getParams(),
+  ...(search.value.title && { title: search.value.title }),
+  ...(search.value.status !== '' && { status: search.value.status }),
+}
+```
+
 ### 搜索栏字段

-每个搜索字段用 `FaLabel` 包裹，内部控件根据字段类型自行选择合适的 Fa* 或 El* 组件。次要搜索条件加 `v-show="!fold"` 实现折叠。
+首个主要搜索字段直接显示，次要搜索条件使用 `v-show="!fold"`：

 ```vue
 <FaLabel label="{label}" class="col-span-1">
-  <!-- 内部放对应的输入控件，string 用 FaInput，枚举用 FaSelect，日期用 ElDatePicker 等 -->
+  <FaInput
+    v-model="search.{field}"
+    placeholder="请输入{label}，支持模糊查询"
+    clearable
+    class="w-full"
+    @keydown.enter="currentChange()"
+    @clear="currentChange()"
+  />
 </FaLabel>
 ```

-### 列表列
+### FaTable 列

-普通列直接用 `prop` 渲染，需要自定义展示时使用 `#default` slot：
+普通字段：
+
+```typescript
+{
+  accessorKey: '{field}',
+  header: '{label}',
+},
+```
+
+需要自定义展示的字段使用 `id`，并在模板里添加 `#cell-{id}` 插槽：
+
+```typescript
+{
+  id: 'status',
+  header: '状态',
+  width: 100,
+  align: 'center',
+},
+```

 ```vue
-<!-- 普通列 -->
-<ElTableColumn prop="{field}" label="{label}" />
-
-<!-- 需要自定义渲染时 -->
-<ElTableColumn prop="{field}" label="{label}" width="100" align="center">
-  <template #default="scope">
-    <!-- 根据字段含义选择合适的展示方式，如 ElTag、FaSwitch 等 -->
-  </template>
-</ElTableColumn>
+<template #cell-status="{ row }">
+  <FaBadge :variant="row.original.status ? 'default' : 'secondary'">
+    {{ row.original.status ? '启用' : '停用' }}
+  </FaBadge>
+</template>
 ```

 ### 表单字段

-每个表单字段用 `ElFormItem` 包裹，内部控件根据字段类型自行选择合适的 Fa* 或 El* 组件，注意加 `class="w-full"`。
-
 ```vue
-<ElFormItem label="{label}" prop="{field}">
-  <!-- 内部放对应的输入控件 -->
-</ElFormItem>
+<FaFormItem name="{field}" label="{label}" required>
+  <FaInput placeholder="请输入{label}" class="w-full" />
+</FaFormItem>
 ```

-### 表单验证规则
+`FaFormItem` 会自动向第一个子控件注入 `modelValue` 和 `onUpdate:modelValue`，不要再手写
+`v-model="model.{field}"` 或 `v-model="model.value.{field}"`。
+
+### 表单 model 类型字段

 ```typescript
-// 必填文本
-{field}: [
-  { required: true, message: '请输入{label}', trigger: 'blur' },
-],
-// 必填选择
-{field}: [
-  { required: true, message: '请选择{label}', trigger: 'change' },
-],
+{field}: string
+status: number
+enabled: boolean
 ```

+### 表单初始值
+
+```typescript
+{field}: '',
+status: 0,
+enabled: true,
+```
+
+### 表单详情赋值
+
+```typescript
+model.value.{field} = res.data.{field}
+```
+
+### 表单验证 schema
+
+文本输入：
+
+```typescript
+{field}(value: string) {
+  return value?.trim() ? true : '请输入{label}'
+},
+```
+
+选择、开关、日期：
+
+```typescript
+{field}(value: string | number | boolean | undefined) {
+  return value !== undefined && value !== '' ? true : '请选择{label}'
+},
+```
+
+非必填字段不要生成 validation schema 项；生成必填字段时，在对应 `FaFormItem` 上同时加
+`required`。
+
 ### Mock 数据字段映射

-| 字段类型 | faker 方法 |
-|---------|-----------|
-| 姓名 | `faker.person.fullName()` |
-| 账号/用户名 | `faker.person.firstName()` |
-| 手机号 | `faker.phone.number({ style: 'international' })` |
+| 字段类型/含义 | faker 方法 |
+|---------------|------------|
+| 标题 | `faker.book.title()` 或 `faker.lorem.words(3)` |
+| 名称 | `faker.person.fullName()` 或 `faker.commerce.productName()` |
+| 用户名 | `faker.internet.username()` |
+| 手机号 | `faker.phone.number()` |
 | 邮箱 | `faker.internet.email()` |
-| 标题/名称 | `faker.lorem.words(3)` |
 | 描述 | `faker.lorem.sentence()` |
-| 数字（枚举） | `faker.number.int(2)` |
-| 布尔（状态） | `faker.datatype.boolean()` |
+| 数量 | `faker.number.int({ min: 1, max: 100 })` |
 | 金额 | `faker.number.float({ min: 10, max: 9999, fractionDigits: 2 })` |
+| 布尔状态 | `faker.datatype.boolean()` |
+| 枚举状态 | `faker.helpers.arrayElement([0, 1, 2])` |
 | 日期 | `faker.date.recent().toISOString()` |

-### Mock 搜索过滤模式
+### Mock 搜索过滤
+
+字符串模糊匹配：

-**string 模糊匹配：**
 ```typescript
-list = list.filter((item) => {
-  return {field} ? item.{field}.includes({field}) : true
-})
+title ? item.title.includes(title) : true
 ```

-**枚举/数字精确匹配（注意：query 参数均为字符串，`0` 是 falsy，不能直接用 `{field} ?` 判断）：**
+数字/枚举精确匹配。注意 query 参数是字符串，`0` 不能用普通 truthy 判断：
+
 ```typescript
-list = list.filter((item) => {
-  return {field} !== undefined && {field} !== '' ? item.{field} === ~~{field} : true
-})
+status !== undefined && status !== '' ? item.status === ~~status : true
 ```
-
---
-
-## faker.js 字段类型映射
-
-| 字段类型 | 推荐 faker 方法 |
-|---------|----------------|
-| string（名称类） | `faker.person.fullName()` 或 `faker.commerce.productName()` |
-| string（标题类） | `faker.lorem.words(3)` |
-| string（描述类） | `faker.lorem.sentence()` |
-| number（ID） | 自增 `i + 1` |
-| number（金额） | `faker.number.float({ min: 10, max: 9999, fractionDigits: 2 })` |
-| number（数量） | `faker.number.int({ min: 1, max: 100 })` |
-| boolean | `faker.datatype.boolean()` |
-| date | `faker.date.recent().toISOString()` |
-| status（枚举） | `faker.helpers.arrayElement([0, 1, 2])` |
@@ -1,11 +1,11 @@
 ---
 name: fa-form-builder
-description: "为 Fantastic-admin 框架生成独立的表单页面，使用 vee-validate + zod 验证，全部使用框架内建 Fa* 组件。当用户说：'帮我做一个用户信息填写页'、'我只需要一个提交表单，不需要列表'、'做个设置页面，有几个输入框和保存按钮'、'生成一个注册/编辑/配置表单页'、'只要表单页，不需要增删改查'，即使用户只是说'做个表单页面'也应触发此技能。"
+description: "为 Fantastic-admin 框架生成独立的表单页面，使用 FaForm/FaFormItem + vee-validate + zod 验证，表单 model 使用 ref，全部使用框架内建 Fa* 组件。当用户说：'帮我做一个用户信息填写页'、'我只需要一个提交表单，不需要列表'、'做个设置页面，有几个输入框和保存按钮'、'生成一个注册/编辑/配置表单页'、'只要表单页，不需要增删改查'，即使用户只是说'做个表单页面'也应触发此技能。"
 ---

 # 表单页面生成器

-在 Fantastic-admin 框架中生成独立的 Router 表单页面，使用 vee-validate + zod 完成表单验证，全部使用框架内建 Fa* 组件，不引入任何 Element Plus 组件。
+在 Fantastic-admin 框架中生成独立的 Router 表单页面，使用 `FaForm/FaFormItem` 承接 vee-validate + zod 表单验证。

 **生成的文件：**
 - `apps/<app>/src/views/{path}/{name}/index.vue` — 表单页面（含验证、提交骨架、固定操作栏）
@@ -50,14 +50,14 @@ description: "为 Fantastic-admin 框架生成独立的表单页面，使用 vee

 字段较多时单列会导致页面过长，双列更紧凑。根据字段数量和复杂度判断是否询问用户布局偏好：

- **单列**：`max-w-600px`，`space-y-6`（字段少、字段较长时适合）
+- **单列**：`max-w-600px`，`grid gap-6`（字段少、字段较长时适合）
 - **双列**：`max-w-1200px`，`grid grid-cols-1 gap-x-8 gap-y-6 items-start md:grid-cols-2`（字段多、字段较短时适合）

 ### Step 4：确认并生成

 汇总信息，展示将要生成的文件，确认后写入。

-生成完成后提示：如需配置路由，请使用 `fa-route-generator` 技能；如需 API 模块，请手动创建。
+生成完成后提示：如需配置路由，请使用 `fa-route-generator` 技能；如需 API 模块，请使用 `fa-crud-page-generator` 或手动创建。

 ---

@@ -80,9 +80,10 @@ description: "为 Fantastic-admin 框架生成独立的表单页面，使用 vee
 - `{cname}` → 模块中文名
 - `{componentName}` → PascalCase 组件名
 - `{zodSchema}` → zod 字段定义（每个必填字段对应一行 zod 规则）
- `{initialValues}` → 字段初始值（string 默认 `''`，boolean 默认 `false`，number 默认 `0`，array 默认 `[]`）
- `{formItems}` → 各字段对应的 FormField 代码片段
+- `{initialValues}` → `model` 字段初始值（string 默认 `''`，boolean 默认 `false`，number 默认 `0`，array 默认 `[]`）
+- `{formItems}` → 各字段对应的 FaFormItem 代码片段
+- `{imports}` → 必要的额外 import；默认留空，Fa* 组件通常由自动导入处理
 - `{maxWidth}` → 单列 `max-w-600px` / 双列 `max-w-1200px`
- `{gridClass}` → 双列时 `grid grid-cols-1 gap-x-8 gap-y-6 items-start md:grid-cols-2` / 单列时 `space-y-6`
+- `{gridClass}` → 双列时 `grid grid-cols-1 gap-x-8 gap-y-6 items-start md:grid-cols-2` / 单列时 `grid gap-6`

-生成的代码是骨架：API 调用处用 `// TODO:` 注释标记，动态数据源（select options、upload action 等）用占位注释标记，用户根据实际接口替换。操作栏按钮使用 `FaButton`：取消用 `variant="outline"`，提交用默认 variant 并传 `:loading="isSubmitting"`。
+生成的代码是骨架：API 调用处用 `// TODO:` 注释标记，动态数据源（select options、upload action 等）用占位注释标记，用户根据实际接口替换。表单对象必须使用 `const model = ref({...})`，模板中直接 `:model="model"`；脚本里读写字段使用 `model.value.xxx`。操作栏按钮使用 `FaButton`：取消用 `variant="outline"`，提交用默认 variant 并传 `:loading="loading"`。
@@ -1,16 +1,16 @@
 # 表单页面代码模板

-使用 vee-validate + zod 验证，全部使用 Fa* 内建组件，不引入任何 Element Plus 组件。
+使用 FaForm/FaFormItem + vee-validate + zod 验证。

 占位符说明：
 - `{cname}` — 模块中文名
 - `{componentName}` — 组件名（PascalCase）
 - `{zodSchema}` — zod 字段定义
- `{initialValues}` — 表单初始值
- `{formItems}` — FormField 列表
+- `{initialValues}` — `model` 表单初始值
+- `{formItems}` — FaFormItem 列表
 - `{imports}` — 需要手动 import 的组件
 - `{maxWidth}` — 单列 `max-w-600px` / 双列 `max-w-1200px`
- `{gridClass}` — 双列时 `grid grid-cols-1 gap-x-8 gap-y-6 items-start md:grid-cols-2` / 单列时 `space-y-6`
+- `{gridClass}` — 双列时 `grid grid-cols-1 gap-x-8 gap-y-6 items-start md:grid-cols-2` / 单列时 `grid gap-6`

 ---

@@ -18,10 +18,10 @@

 ```vue
 <script setup lang="ts">
+import type { FormExpose } from '@fantastic-admin/components'
 import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
+import { ref } from 'vue'
 import * as z from 'zod'
-import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/ui/shadcn/ui/form'
 {imports}

 defineOptions({
@@ -30,22 +30,30 @@ defineOptions({

 const router = useRouter()

-const formSchema = toTypedSchema(z.object({
+const formRef = useTemplateRef<FormExpose>('formRef')
+const loading = ref(false)
+
+const model = ref({
+  {initialValues}
+})
+
+const validationSchema = toTypedSchema(z.object({
  {zodSchema}
 }))

-const { handleSubmit, isSubmitting } = useForm({
-  validationSchema: formSchema,
-  initialValues: {
-    {initialValues}
-  },
-})
+async function onSubmit(values: typeof model.value) {
+  loading.value = true
+  try {
+    // TODO: 调用 API，如 apiXxx.create(values) 或 apiXxx.edit(values)
+  }
+  finally {
+    loading.value = false
+  }
+}

-const loading = ref(false)
-
-const onSubmit = handleSubmit(async (values) => {
-  // TODO: 调用 API，如 apiXxx.create(values) 或 apiXxx.edit(values)
-})
+async function submit() {
+  await formRef.value?.submit()
+}

 function handleCancel() {
  router.back()
@@ -57,16 +65,22 @@ function handleCancel() {
    <FaPageHeader title="{cname}" />
    <FaPageMain>
      <div v-loading="loading" class="mx-auto {maxWidth}">
-        <form class="{gridClass}" @submit="onSubmit">
+        <FaForm
+          ref="formRef"
+          :model="model"
+          :validation-schema="validationSchema"
+          class="{gridClass}"
+          @submit="onSubmit"
+        >
          {formItems}
-        </form>
+        </FaForm>
      </div>
    </FaPageMain>
    <FaFixedBar position="bottom" class="flex gap-2 justify-center">
      <FaButton type="button" variant="outline" @click="handleCancel">
        取消
      </FaButton>
-      <FaButton type="submit" :loading="isSubmitting" @click="onSubmit">
+      <FaButton type="button" :loading="loading" @click="submit">
        提交
      </FaButton>
    </FaFixedBar>
@@ -76,146 +90,92 @@ function handleCancel() {

 ---

-## 各字段类型的 FormField 片段
+## 各字段类型的 FaFormItem 片段

 ```vue
 <!-- FaInput（文本） -->
-<FormField v-slot="{ componentField }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
-    <FormControl>
-      <FaInput v-bind="componentField" placeholder="请输入{label}" class="w-full" />
-    </FormControl>
-    <FormMessage />
-  </FormItem>
-</FormField>
+<FaFormItem name="{field}" label="{label}" required>
+  <FaInput placeholder="请输入{label}" class="w-full" />
+</FaFormItem>

 <!-- FaInput（密码）+ FaPasswordStrength -->
-<FormField v-slot="{ componentField }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
-    <FormControl>
-      <div class="w-full space-y-2">
-        <FaInput v-bind="componentField" type="password" placeholder="请输入{label}" class="w-full" />
-        <FaPasswordStrength :model-value="componentField.modelValue" />
-      </div>
-    </FormControl>
-    <FormMessage />
-  </FormItem>
-</FormField>
+<FaFormItem name="{field}" label="{label}" required>
+  <FaInput type="password" placeholder="请输入{label}" class="w-full" />
+  <template #description="{ value }">
+    <FaPasswordStrength :password="(value as string) ?? ''" />
+  </template>
+</FaFormItem>

 <!-- FaTextarea -->
-<FormField v-slot="{ componentField }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
-    <FormControl>
-      <FaTextarea v-bind="componentField" placeholder="请输入{label}" class="w-full" />
-    </FormControl>
-    <FormMessage />
-  </FormItem>
-</FormField>
+<FaFormItem name="{field}" label="{label}" required>
+  <FaTextarea placeholder="请输入{label}" class="w-full" />
+</FaFormItem>

 <!-- FaSelect -->
-<FormField v-slot="{ componentField }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
-    <FormControl>
-      <FaSelect v-bind="componentField" :options="{field}Options" placeholder="请选择{label}" class="w-full" />
-    </FormControl>
-    <FormMessage />
-  </FormItem>
-</FormField>
+<FaFormItem name="{field}" label="{label}" required>
+  <FaSelect :options="{field}Options" placeholder="请选择{label}" class="w-full" />
+</FaFormItem>
 <!-- script 中同时生成 options 占位：const {field}Options = ref([{ label: '选项1', value: 1 }]) -->

-<!-- FaSwitch（componentField 会传字符串，需手动绑定 boolean） -->
-<FormField v-slot="{ value, handleChange }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
-    <FormControl>
-      <FaSwitch :model-value="value" @update:model-value="handleChange" />
-    </FormControl>
-    <FormMessage />
-  </FormItem>
-</FormField>
+<!-- FaSwitch -->
+<FaFormItem name="{field}" label="{label}">
+  <FaSwitch />
+</FaFormItem>

 <!-- FaCheckbox（多选，手动维护数组） -->
-<FormField v-slot="{ value, handleChange }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
+<FaFormItem name="{field}" label="{label}">
+  <template #default="{ value, setValue }">
    <div class="flex flex-wrap gap-4">
      <FaCheckbox
        v-for="opt in {field}Options"
        :key="opt.value"
-        :model-value="value?.includes(opt.value)"
-        @update:model-value="(checked) => handleChange(checked ? [...(value || []), opt.value] : (value || []).filter(v => v !== opt.value))"
+        :model-value="((value as string[] | undefined) ?? []).includes(opt.value)"
+        @update:model-value="(checked) => setValue(checked ? [...((value as string[] | undefined) ?? []), opt.value] : ((value as string[] | undefined) ?? []).filter(v => v !== opt.value))"
      >
        {{ opt.label }}
      </FaCheckbox>
    </div>
-    <FormMessage />
-  </FormItem>
-</FormField>
+  </template>
+</FaFormItem>
 <!-- script 中同时生成 options 占位：const {field}Options = [{ label: '选项1', value: '1' }] -->

-<!-- 日期（原生 input） -->
-<FormField v-slot="{ componentField }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
-    <FormControl>
-      <input v-bind="componentField" type="date" class="w-full h-9 rounded-md border border-input bg-background px-3 py-1 text-sm" />
-    </FormControl>
-    <FormMessage />
-  </FormItem>
-</FormField>
+<!-- 日期 -->
+<FaFormItem name="{field}" label="{label}" required>
+  <FaInput type="date" class="w-full" />
+</FaFormItem>
+
+<!-- 日期时间 -->
+<FaFormItem name="{field}" label="{label}" required>
+  <FaInput type="datetime-local" class="w-full" />
+</FaFormItem>

 <!-- FaImageUpload -->
-<FormField v-slot="{ value, handleChange }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
-    <FormControl>
-      <FaImageUpload :model-value="value" action="/upload/image" @update:model-value="handleChange" />
-    </FormControl>
-    <FormMessage />
-  </FormItem>
-</FormField>
+<FaFormItem name="{field}" label="{label}" required>
+  <FaImageUpload action="/upload/image" />
+</FaFormItem>

 <!-- FaFileUpload -->
-<FormField v-slot="{ value, handleChange }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
-    <FormControl>
-      <FaFileUpload :model-value="value" action="/upload/file" @update:model-value="handleChange" />
-    </FormControl>
-    <FormMessage />
-  </FormItem>
-</FormField>
+<FaFormItem name="{field}" label="{label}" required>
+  <FaFileUpload action="/upload/file" />
+</FaFormItem>

 <!-- FaIconPicker -->
-<FormField v-slot="{ componentField }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
-    <FormControl>
-      <FaIconPicker v-bind="componentField" />
-    </FormControl>
-    <FormMessage />
-  </FormItem>
-</FormField>
+<FaFormItem name="{field}" label="{label}">
+  <FaIconPicker />
+</FaFormItem>

 <!-- FaNumberField -->
-<FormField v-slot="{ value, handleChange }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
-    <FormControl>
-      <FaNumberField :model-value="value" class="w-full" @update:model-value="handleChange" />
-    </FormControl>
-    <FormMessage />
-  </FormItem>
-</FormField>
+<FaFormItem name="{field}" label="{label}" required>
+  <FaNumberField class="w-full" />
+</FaFormItem>

 <!-- 双列布局中需要占满整行的字段，加 md:col-span-2 -->
-<!-- <FormField ... class="md:col-span-2"><FormItem class="md:col-span-2"> -->
+<!-- <FaFormItem name="{field}" label="{label}" class="md:col-span-2"> -->
 ```

+`FaFormItem` 会自动向第一个子控件注入 `modelValue` 和 `onUpdate:modelValue`，默认不要手写
+`v-model`。只有多选、组合控件等非单一控件场景，才使用 slot props 手动调用 `setValue`。
+
 ---

 ## zod 验证规则片段
@@ -251,16 +211,10 @@ function handleCancel() {

 ---

-## 需要手动 import 的组件
+## 组件导入说明

-以下组件不在自动导入范围内，使用时需在 script 顶部添加 import：
-
-```typescript
-import FaImageUpload from '@/ui/components/FaImageUpload/index.vue'
-import FaFileUpload from '@/ui/components/FaFileUpload/index.vue'
-import FaIconPicker from '@/ui/components/FaIconPicker/index.vue'
-import FaNumberField from '@/ui/components/FaNumberField/index.vue'
-```
+Fantastic-admin 应用默认通过组件解析器自动导入 `Fa*` 组件，通常不需要手动 import。
+只有目标应用未启用自动导入或组件解析器缺少对应组件时，才按该应用本地约定补充 import。

 ---

@@ -276,8 +230,8 @@ import FaNumberField from '@/ui/components/FaNumberField/index.vue'
 | 下拉、选择、类型、分类、状态（枚举值） | `FaSelect` | 生成 options 数组占位 |
 | 开关、启用、禁用、是否、boolean | `FaSwitch` | |
 | 复选、多选 | `FaCheckbox`（多个） | 每个选项一个 FaCheckbox，手动维护数组 |
-| 日期 | 原生 `<input type="date">` | 暂无 Fa 内建日期选择器 |
-| 日期时间 | 原生 `<input type="datetime-local">` | |
+| 日期 | `FaInput type="date"` | |
+| 日期时间 | `FaInput type="datetime-local"` | |
 | 图片、头像、封面、缩略图 | `FaImageUpload` | |
 | 文件、附件 | `FaFileUpload` | |
 | 图标 | `FaIconPicker` | |
@@ -40,4 +40,4 @@ description: 管理和配置 Fantastic-admin 框架设置。当用户提到以
 - **顶栏设置**: [references/topbar-settings.md](references/topbar-settings.md) - 标签栏、工具栏、显示模式等
 - **标签栏设置**: [references/tabbar-settings.md](references/tabbar-settings.md) - 风格、图标、双击动作、记忆功能等
 - **工具栏设置**: [references/toolbar-settings.md](references/toolbar-settings.md) - 收藏夹、面包屑、搜索、通知、国际化等
- **页面设置**: [references/page-settings.md](references/page-settings.md) - 快捷键、iframe 保活、切换动画、进度条等
+- **页面设置**: [references/page-settings.md](references/page-settings.md) - 快捷键、切换动画、进度条等
@@ -4,10 +4,8 @@
 - [认证配置 (auth)](#认证配置-auth)
 - [路由配置](#路由配置)
 - [功能开关](#功能开关)
- [布局配置 (layout)](#布局配置-layout)
 - [主页配置 (home)](#主页配置-home)
 - [版权配置 (copyright)](#版权配置-copyright)
- [偏好设置 (preferences)](#偏好设置-preferences)

 ## 认证配置 (auth)

@@ -16,25 +14,11 @@
 - **默认值**: `false`
 - **说明**: 是否开启权限功能,控制是否启用权限验证功能

-### expiredMode
- **类型**: `'redirect' | 'popup'`
- **默认值**: `'redirect'`
- **说明**: 登录过期模式
-  - `'redirect'` - 跳转到登录页
-  - `'popup'` - 弹出登录窗口
-
-### multipleAccounts
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 多账号管理,可同时登录多个账号,方便快速切换
-
 **示例:**
 ```typescript
 app: {
  auth: {
    permission: true,
-    expiredMode: 'redirect',
-    multipleAccounts: true,
  }
 }
 ```
@@ -62,31 +46,6 @@ app: {
 - **默认值**: `false`
 - **说明**: 控制是否启用动态页面标题功能

-### watermark
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 控制是否在页面上显示水印
-
-### feedback
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 控制是否启用用户反馈功能
-
-### lockScreen
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 控制是否启用锁屏功能
-
-### errorLog
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 是否在非开发环境开启错误日志功能,具体业务代码在 `/src/utils/errorLog.ts`
-
-### checkUpdates
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 控制是否启用应用更新检查功能
-
 ### rip
 - **类型**: `boolean`
 - **默认值**: `false`
@@ -97,36 +56,6 @@ app: {
 - **默认值**: `true`
 - **说明**: 移动端访问,关闭后网站将禁用移动端访问

-## 布局配置 (layout)
-
-### center
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 是否开启居中布局
-
-### centerScope
- **类型**: `'inner' | 'outer'`
- **默认值**: `'inner'`
- **说明**: 居中布局作用范围
-  - `'inner'` - 内层
-  - `'outer'` - 外层
-
-### centerWidth
- **类型**: `number`
- **默认值**: `1400`
- **说明**: 居中布局宽度(像素)
-
-**示例:**
-```typescript
-app: {
-  layout: {
-    center: true,
-    centerScope: 'outer',
-    centerWidth: 1400,
-  }
-}
-```
-
 ## 主页配置 (home)

 ### enable
@@ -188,23 +117,3 @@ app: {
  }
 }
 ```
-
-## 偏好设置 (preferences)
-
-控制用户偏好设置,可以控制各个功能模块的启用状态。
-
-**类型**: `{ [key]: boolean | PreferencesBoolean }`
-
-**示例:**
-```typescript
-app: {
-  preferences: {
-    theme: true,    // 允许用户自定义主题设置
-    menu: true,     // 允许用户自定义菜单设置
-    topbar: true,   // 允许用户自定义顶栏设置
-    tabbar: true,   // 允许用户自定义标签栏设置
-    toolbar: true,  // 允许用户自定义工具栏设置
-    page: true,     // 允许用户自定义页面设置
-  }
-}
-```
@@ -2,40 +2,18 @@

 ## 目录
 - [导航菜单模式 (mode)](#导航菜单模式-mode)
- [导航菜单风格 (style)](#导航菜单风格-style)
- [暗色模式 (dark)](#暗色模式-dark)
 - [主导航点击模式 (mainMenuClickMode)](#主导航点击模式-mainmenuclickmode)
 - [次导航展开行为](#次导航展开行为)
 - [快捷键 (hotkeys)](#快捷键-hotkeys)

 ## 导航菜单模式 (mode)

- **类型**: `'side' | 'head' | 'single' | 'only-side' | 'only-head' | 'side-panel' | 'head-panel'`
+- **类型**: `'side' | 'head' | 'single'`
 - **默认值**: `'side'`
 - **说明**: 设置导航菜单的显示模式
  - `'side'` - 侧边栏模式(有主导航菜单)
  - `'head'` - 顶部模式
  - `'single'` - 侧边栏模式(无主导航菜单)
-  - `'only-side'` - 侧边栏精简模式
-  - `'only-head'` - 顶部精简模式
-  - `'side-panel'` - 侧边栏面板模式
-  - `'head-panel'` - 顶部面板模式
-
-## 导航菜单风格 (style)
-
- **类型**: `'' | 'arrow' | 'line' | 'dot'`
- **默认值**: `''`
- **说明**: 设置导航菜单的视觉风格
-  - `''` - 默认风格
-  - `'arrow'` - 箭头风格
-  - `'line'` - 线条风格
-  - `'dot'` - 圆点风格
-
-## 暗色模式 (dark)
-
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 仅在亮色模式下生效,控制导航菜单是否使用暗色主题

 ## 主导航菜单点击模式 (mainMenuClickMode)

@@ -60,12 +38,6 @@
 - **默认值**: `false`
 - **说明**: 次导航菜单是否收起

-### subMenuAutoCollapse
-
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 次导航菜单是否自动收起
-
 ### subMenuCollapseButton

 - **类型**: `boolean`
@@ -83,12 +55,9 @@
 ```typescript
 menu: {
  mode: 'side',
-  style: 'dot',
-  dark: false,
  mainMenuClickMode: 'switch',
  subMenuUniqueExpand: true,
  subMenuCollapse: false,
-  subMenuAutoCollapse: false,
  subMenuCollapseButton: true,
  hotkeys: true,
 }
@@ -103,20 +72,6 @@ menu: {
 }
 ```

-**侧边栏精简模式:**
-```typescript
-menu: {
-  mode: 'only-side',
-}
-```
-
-**启用暗色导航菜单(仅亮色模式下):**
-```typescript
-menu: {
-  dark: true,
-}
-```
-
 **智能主导航菜单点击:**
 ```typescript
 menu: {
@@ -1,22 +1,9 @@
 # 页面设置 (page)

 ## 目录
- [快捷键 (hotkeys)](#快捷键-hotkeys)
- [iframe 页面最大保活数量 (iframeKeepAliveMax)](#iframe-页面最大保活数量-iframekeepalivemax)
 - [页面切换动画 (transitionMode)](#页面切换动画-transitionmode)
 - [载入进度条 (progress)](#载入进度条-progress)
-
-## 快捷键 (hotkeys)
-
- **类型**: `boolean`
- **默认值**: `true`
- **说明**: 控制是否启用页面相关的快捷键功能
-
-## iframe 页面最大保活数量 (iframeKeepAliveMax)
-
- **类型**: `number`
- **默认值**: `3`
- **说明**: 设置 iframe 页面的最大保活数量
+- [快捷键 (hotkeys)](#快捷键-hotkeys)

 ## 页面切换动画 (transitionMode)

@@ -36,14 +23,19 @@
 - **默认值**: `true`
 - **说明**: 控制是否显示页面载入进度条

+## 快捷键 (hotkeys)
+
+- **类型**: `boolean`
+- **默认值**: `true`
+- **说明**: 控制是否启用页面相关的快捷键功能
+
 ## 完整示例

 ```typescript
 page: {
-  hotkeys: true,
-  iframeKeepAliveMax: 3,
  transitionMode: 'fade',
  progress: true,
+  hotkeys: true,
 }
 ```

@@ -56,13 +48,6 @@ page: {
 }
 ```

-**增加 iframe 保活数量:**
-```typescript
-page: {
-  iframeKeepAliveMax: 9,
-}
-```
-
 **禁用进度条:**
 ```typescript
 page: {
@@ -1,56 +1,16 @@
 # 标签栏设置 (tabbar)

 ## 目录
- [标签栏风格 (style)](#标签栏风格-style)
- [最小最大宽度 (minMaxWidth)](#最小最大宽度-minmaxwidth)
 - [显示图标 (icon)](#显示图标-icon)
 - [双击执行动作 (dblclickAction)](#双击执行动作-dblclickaction)
- [记忆功能 (memory)](#记忆功能-memory)
 - [快捷键 (hotkeys)](#快捷键-hotkeys)

-## 标签栏风格 (style)
-
- **类型**: `'' | 'fashion' | 'card' | 'square'`
- **默认值**: `''`
- **说明**: 设置标签栏的视觉风格
-  - `''` - 默认风格
-  - `'fashion'` - 时尚风格
-  - `'card'` - 卡片风格
-  - `'square'` - 方块风格
-
-## 最小最大宽度 (minMaxWidth)
-
- **类型**: `readonly [number | 'unset', number | 'unset']`
- **默认值**: `[150, 150]`
- **说明**: 设置标签的最小和最大宽度,当设置为 `'unset'` 时为自适应
-  - `[150, 150]` - 固定宽度 150px
-  - `[150, 'unset']` - 最小宽度 150px
-  - `['unset', 150]` - 最大宽度 150px
-  - `['unset', 'unset']` - 跟随文字长度自适应
-
 ## 显示图标 (icon)

 - **类型**: `boolean`
 - **默认值**: `false`
 - **说明**: 控制标签是否显示图标

-## 双击执行动作 (dblclickAction)
-
- **类型**: `'reload' | 'close' | 'pin' | 'maximize' | 'window'`
- **默认值**: `'close'`
- **说明**: 设置双击标签时执行的动作
-  - `'reload'` - 刷新
-  - `'close'` - 关闭
-  - `'pin'` - 固定/取消固定
-  - `'maximize'` - 最大化
-  - `'window'` - 新窗口打开
-
-## 记忆功能 (memory)
-
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 控制是否记住用户的标签操作状态
-
 ## 快捷键 (hotkeys)

 - **类型**: `boolean`
@@ -61,48 +21,16 @@

 ```typescript
 tabbar: {
-  style: 'fashion',
-  minMaxWidth: [150, 150],
  icon: true,
-  dblclickAction: 'close',
-  memory: true,
  hotkeys: true,
 }
 ```

 ## 常见配置

-**时尚风格标签栏:**
-```typescript
-tabbar: {
-  style: 'fashion',
-}
-```
-
 **显示图标:**
 ```typescript
 tabbar: {
  icon: true,
 }
 ```
-
-**自适应宽度:**
-```typescript
-tabbar: {
-  minMaxWidth: ['unset', 'unset'],
-}
-```
-
-**双击刷新:**
-```typescript
-tabbar: {
-  dblclickAction: 'reload',
-}
-```
-
-**启用记忆功能:**
-```typescript
-tabbar: {
-  memory: true,
-}
-```
@@ -1,31 +1,10 @@
 # 主题设置 (theme)

 ## 目录
- [主题同步 (sync)](#主题同步-sync)
- [亮色主题 (light)](#亮色主题-light)
- [暗色主题 (dark)](#暗色主题-dark)
 - [颜色方案 (colorScheme)](#颜色方案-colorscheme)
 - [圆角系数 (radius)](#圆角系数-radius)
 - [色弱模式 (colorAmblyopia)](#色弱模式-coloramblyopia)

-## 主题同步 (sync)
-
- **类型**: `boolean`
- **默认值**: `true`
- **说明**: 当开启时,切换颜色方案将共用一套主题
-
-## 亮色主题 (light)
-
- **类型**: `keyof typeof themes`
- **默认值**: `'default'`
- **说明**: 指定亮色模式下的主题
-
-## 暗色主题 (dark)
-
- **类型**: `keyof typeof themes`
- **默认值**: `'default'`
- **说明**: 指定暗色模式下的主题
-
 ## 颜色方案 (colorScheme)

 - **类型**: `'light' | 'dark' | ''`
@@ -54,7 +33,6 @@

 ```typescript
 theme: {
-  sync: true,
  light: 'default',
  dark: 'default',
  colorScheme: 'light',
@@ -79,15 +57,6 @@ theme: {
 }
 ```

-**使用不同的亮色和暗色主题:**
-```typescript
-theme: {
-  sync: false,
-  light: 'default',
-  dark: 'custom-dark',
-}
-```
-
 **调整圆角:**
 ```typescript
 theme: {
@@ -4,7 +4,6 @@
 - [标签栏 (tabbar)](#标签栏-tabbar)
 - [工具栏 (toolbar)](#工具栏-toolbar)
 - [顶栏模式 (mode)](#顶栏模式-mode)
- [切换显示位置 (switchTabbarAndToolbar)](#切换显示位置-switchtabbarandtoolbar)

 ## 标签栏 (tabbar)

@@ -27,14 +26,6 @@
  - `'fixed'` - 固定,不跟随页面滚动,始终固定在顶部
  - `'sticky'` - 粘性,页面往下滚动时隐藏,往上滚动时显示

-## 切换显示位置 (switchTabbarAndToolbar)
-
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 控制标签栏和工具栏的显示顺序
-  - `false` - 标签栏在工具栏上面
-  - `true` - 工具栏在标签栏上面
-
 ## 完整示例

 ```typescript
@@ -42,7 +33,6 @@ topbar: {
  tabbar: true,
  toolbar: true,
  mode: 'fixed',
-  switchTabbarAndToolbar: false,
 }
 ```

@@ -69,10 +59,3 @@ topbar: {
  mode: 'sticky',
 }
 ```
-
-**工具栏在标签栏上面:**
-```typescript
-topbar: {
-  switchTabbarAndToolbar: true,
-}
-```
@@ -12,9 +12,6 @@
 **变体**: default, destructive, outline, secondary, ghost, link
 **特性**: loading 状态、disabled 状态

-### FaBadge
-**用途**: 徽章标签，用于状态标识和分类
-
 ### FaIcon
 **用途**: 图标组件，基于 [iconify](https://icon-sets.iconify.design/)
 **示例**: <FaIcon name="i-mdi:home" />
@@ -34,9 +31,6 @@
 ### FaDivider
 **用途**: 分割线组件

-### FaLayoutContainer
-**用途**: 布局容器组件
-
 ### FaPageHeader
 **用途**: 页面头部组件

@@ -275,7 +269,6 @@
 | `<div class="card">` | `FaCard` | 标准化的卡片布局 |
 | `<hr>` | `FaDivider` | 统一的分割线样式 |
 | `<img>` (头像) | `FaAvatar` | 头像专用组件 |
-| `<span class="badge">` | `FaBadge` | 统一的徽章样式 |

 ### 替换常见功能实现

@@ -76,11 +76,6 @@ export default routes

 定位路由文件（在 `apps/<app>/src/router/modules/` 下搜索），读取后按需修改 meta 属性。常见修改：

-**标签页合并**（新增页/编辑页合并到同一标签，避免开多个标签）：
-```typescript
-meta: { activeMenu: '/user', tabMerge: 'activeMenu' }
-```
-
 **权限控制**：
 ```typescript
 meta: { auth: 'user:view' }  // 或数组 ['user:view', 'user:edit']
@@ -94,11 +89,6 @@ meta: { keepAlive: ['productDetail'] }
 meta: { menu: false, activeMenu: '/product', noKeepAlive: 'productList' }
 ```

-**徽章**：
-```typescript
-meta: { badge: 'NEW' }  // 文字；或 [true, 'destructive'] 红点
-```
-
 **隐藏菜单项**：
 ```typescript
 meta: { menu: false, activeMenu: '/parent/path' }
@@ -115,4 +105,4 @@ meta: { menu: false, activeMenu: '/parent/path' }

 详细属性说明见 [references/route-meta.md](references/route-meta.md)，更多示例见 [references/examples.md](references/examples.md)。

-常用属性：`title`（必需）、`icon`、`menu`、`auth`、`keepAlive`、`badge`、`activeMenu`、`tabMerge`、`breadcrumb`
+常用属性：`title`（必需）、`icon`、`menu`、`auth`、`keepAlive`、`activeMenu`、`breadcrumb`
@@ -221,11 +221,6 @@ const routes: RouteRecordRaw = {
      meta: {
        title: '用户列表',
        auth: ['admin:view', 'admin:edit'], // 需要其中一个权限
-        auths: [
-          { name: '查看用户', value: 'admin:view' },
-          { name: '编辑用户', value: 'admin:edit' },
-          { name: '删除用户', value: 'admin:delete' },
-        ],
      },
    },
  ],
@@ -253,50 +248,6 @@ const routes: RouteRecordRaw = {
        link: 'https://github.com',
      },
    },
-    {
-      path: 'docs',
-      name: 'externalDocs',
-      component: () => import('@/views/external/iframe.vue'),
-      meta: {
-        title: '文档',
-        iframe: 'https://fantastic-admin.hurui.me',
-      },
-    },
-  ],
-}
-```
-
-### 带徽章的路由
-
-```typescript
-const routes: RouteRecordRaw = {
-  path: '/features',
-  component: Layout,
-  name: 'features',
-  meta: {
-    title: '功能特性',
-    icon: 'i-ep:star',
-    badge: 'NEW', // 显示 NEW 徽章
-  },
-  children: [
-    {
-      path: 'pro',
-      name: 'featuresPro',
-      component: () => import('@/views/features/pro.vue'),
-      meta: {
-        title: '专业版功能',
-        badge: ['PRO', 'destructive'], // 显示红色 PRO 徽章
-      },
-    },
-    {
-      path: 'beta',
-      name: 'featuresBeta',
-      component: () => import('@/views/features/beta.vue'),
-      meta: {
-        title: 'Beta 功能',
-        badge: () => 'BETA', // 动态徽章
-      },
-    },
  ],
 }
 ```
@@ -318,8 +269,8 @@ const routes: RouteRecordRaw = {
      path: 'always',
      name: 'menuAlways',
      meta: {
-        title: '始终展开',
-        expand: [true, true], // 默认展开且不允许收起
+        title: '默认展开',
+        expand: true,
      },
      children: [
        {
@@ -336,31 +287,6 @@ const routes: RouteRecordRaw = {
 }
 ```

-### 带查询参数的路由
-
-```typescript
-const routes: RouteRecordRaw = {
-  path: '/report',
-  component: Layout,
-  name: 'report',
-  meta: {
-    title: '报表',
-    icon: 'i-ep:data-analysis',
-  },
-  children: [
-    {
-      path: 'sales',
-      name: 'reportSales',
-      component: () => import('@/views/report/sales.vue'),
-      meta: {
-        title: '销售报表',
-        query: { type: 'monthly' }, // 点击导航时携带参数
-      },
-    },
-  ],
-}
-```
-
 ## 路由配置调整

 ### 权限配置调整
@@ -13,19 +13,6 @@

 ## 权限相关

-### auths
-
- **类型**: `Array<{ name: string, value: string }>`
- **默认值**: `undefined`
- **说明**: 权限池,对路由本身无实际作用,通常用于角色管理模块,展示路由可配置权限
- **示例**:
-  ```typescript
-  auths: [
-    { name: '新闻管理(浏览)', value: 'news:view' },
-    { name: '新闻管理(编辑)', value: 'news:edit' }
-  ]
-  ```
-
 ### auth

 - **类型**: `string | string[]`
@@ -37,17 +24,6 @@
  auth: ['news:view', 'news:edit'] // 需要具备其中一个权限
  ```

-### localeAuth
-
- **类型**: `string | string[]`
- **默认值**: `undefined`
- **说明**: 区域语言权限,配置为数组时,只需满足一个即可进入
- **示例**:
-  ```typescript
-  localeAuth: 'zh-cn' // 当前区域语言为 zh-cn 允许访问
-  localeAuth: ['zh-cn', 'zh-tw'] // 当前区域语言为 zh-cn 或 zh-tw 允许访问
-  ```
-
 ## 导航显示

 ### title
@@ -63,13 +39,12 @@

 ### icon

- **类型**: `string | [string, string]`
+- **类型**: `string`
 - **默认值**: `undefined`
- **说明**: 图标,如果配置为数组,则第一个为默认图标,第二个为激活图标
+- **说明**: 图标
 - **示例**:
  ```typescript
  icon: 'i-ep:lock' // 默认显示 i-ep:lock 图标
-  icon: ['i-ep:lock', 'i-ep:unlock'] // 默认显示 i-ep:lock,激活时显示 i-ep:unlock
  ```

 ### menu
@@ -90,65 +65,20 @@

 ### expand

- **类型**: `boolean | [boolean, boolean]`
+- **类型**: `boolean`
 - **默认值**: `undefined`
- **说明**: 是否默认展开,如果配置为数组,则第一个为默认展开状态,第二个是否始终展开
+- **说明**: 是否默认展开
 - **示例**:
  ```typescript
  expand: true // 默认展开
-  expand: [true, true] // 默认展开,且不允许收起
  ```

-### badge
-
- **类型**: `boolean | string | number | (() => boolean | string | number) | [value, color]`
- **默认值**: `undefined`
- **说明**: 徽章,如果配置为数组,则第一个为徽章内容,第二个为徽章颜色
- **示例**:
-  ```typescript
-  badge: 'PRO' // 显示徽章,内容为 PRO
-  badge: true // 显示徽章,内容为圆点
-  badge: [true, 'destructive'] // 显示徽章,内容为圆点,颜色为 destructive
-  badge: () => '动态徽章'
-  ```
-
-### sort
-
- **类型**: `number`
- **默认值**: `0`
- **说明**: 导航排序,数字越大越靠前
-
-### singleMenu
-
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 是否为单个一级导航,该配置用于简化只想展示一级,没有二级导航的路由配置
-
 ### breadcrumb

 - **类型**: `boolean`
 - **默认值**: `true`
 - **说明**: 是否在面包屑中显示

-## 标签页
-
-### tabPermanent
-
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 是否常驻标签页,请勿在带有参数的路由上设置该特性
-
-### tabMerge
-
- **类型**: `'routeName' | 'activeMenu'`
- **默认值**: `undefined`
- **说明**: 标签页合并,根据规则合并标签页
- **示例**:
-  ```typescript
-  tabMerge: 'routeName' // 根据路由名称合并
-  tabMerge: 'activeMenu' // 根据 activeMenu 属性合并
-  ```
-
 ## 页面行为

 ### keepAlive
@@ -174,35 +104,6 @@
  noKeepAlive: ['news', 'user'] // 访问路由name为news或user的页面时不保活
  ```

-### maximize
-
- **类型**: `boolean | [boolean, boolean]`
- **默认值**: `undefined`
- **说明**: 最大化,如果配置为数组,则第一个为是否开启最大化,第二个为是否允许手动退出最大化
- **示例**:
-  ```typescript
-  maximize: true // 开启最大化
-  maximize: [true, false] // 开启最大化,允许手动退出最大化
-  maximize: [true, true] // 开启最大化,不允许手动退出最大化
-  ```
-
-### newWindow
-
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 是否在新窗口打开
-
-### iframe
-
- **类型**: `string | boolean`
- **默认值**: `undefined`
- **说明**: 是否在iframe中打开
- **示例**:
-  ```typescript
-  iframe: 'https://fantastic-admin.hurui.me' // 在iframe中打开 Fantastic-admin 官网
-  iframe: true // 获取路由query中的iframe属性,并在iframe中打开
-  ```
-
 ### link

 - **类型**: `string`
@@ -212,39 +113,3 @@
  ```typescript
  link: 'https://fantastic-admin.hurui.me' // 在浏览器新窗口打开 Fantastic-admin 官网
  ```
-
-### query
-
- **类型**: `Record<string, any>`
- **默认值**: `undefined`
- **说明**: 路由 query 参数,点击导航时进行路由跳转时,携带的参数
- **示例**:
-  ```typescript
-  query: { id: 1, name: 'test' }  // 点击导航时,携带 id 参数为 1,name 参数为 test
-  ```
-
-## 布局
-
-### layout
-
- **类型**: `object`
- **默认值**: `undefined`
- **说明**: 布局配置
- **属性**:
-  - `center`: `boolean` - 是否居中,如果不设置,则使用全局配置
-  - `centerScope`: `'inner' | 'outer'` - 作用范围,如果不设置,则使用全局配置
-  - `centerWidth`: `number` - 宽度,如果不设置,则使用全局配置
- **示例**:
-  ```typescript
-  layout: {
-    center: true,
-    centerScope: 'inner',
-    centerWidth: 1200
-  }
-  ```
-
-### copyright
-
- **类型**: `boolean`
- **默认值**: `undefined`
- **说明**: 是否显示版权,如果不设置,则使用全局配置
@@ -167,9 +167,6 @@ export const useDictionaryStore = defineStore('dictionary', () => {
 | `useAppSettingsStore` | `modules/app/settings.ts` | 主题、语言、布局配置 |
 | `useAppMenuStore` | `modules/app/menu.ts` | 菜单生成与导航状态 |
 | `useAppTabbarStore` | `modules/app/tabbar.ts` | 标签栏管理 |
-| `useAppNotificationStore` | `modules/app/notification.ts` | 通知系统 |
-| `useDictionaryStore` | `modules/dictionary.ts` | 字典数据缓存 |
-| `useMenuBadgeStore` | `modules/menuBadge.ts` | 菜单徽章状态 |

 ---

@@ -5,11 +5,11 @@ description: 为 Fantastic-admin 框架创建和定制主题配色方案，始

 # 主题定制器

-为 Fantastic-admin 框架生成符合规范的主题配色。框架的 `theme.sync` 默认为 `true`，切换颜色方案时明暗共用同一套主题名称，因此**始终同时输出明色和暗色两套**，缺少任何一套都会导致对应模式下显示异常。
+为 Fantastic-admin 框架生成符合规范的主题配色。

 ## 主题文件位置

- 主题定义：`packages/themes/index.ts`（在此添加新主题，跨所有应用共享）
+- 主题定义：`packages/themes/index.ts`（在此替换新主题，跨所有应用共享）
 - 类型推断：自动从 `packages/themes/index.ts` 的 key 推断，无需手动更新类型

 ## 工作流程
@@ -31,104 +31,92 @@ description: 为 Fantastic-admin 框架创建和定制主题配色方案，始

 ### 第三步：输出主题代码

-在 `packages/themes/index.ts` 中添加新主题，格式严格遵循现有主题结构：
+在 `packages/themes/index.ts` 中替换新主题，格式严格遵循现有主题结构：

 ```typescript
-themeName: {
-  light: {
-    // shadcn 标准 token（必填）
-    '--background': 'L C H',
-    '--foreground': 'L C H',
-    '--card': 'L C H',
-    '--card-foreground': 'L C H',
-    '--popover': 'L C H',
-    '--popover-foreground': 'L C H',
-    '--primary': 'L C H',
-    '--primary-foreground': 'L C H',
-    '--secondary': 'L C H',
-    '--secondary-foreground': 'L C H',
-    '--muted': 'L C H',
-    '--muted-foreground': 'L C H',
-    '--accent': 'L C H',
-    '--accent-foreground': 'L C H',
-    '--destructive': '0.577 0.245 27.325',  // 通常保持不变
-    '--border': 'L C H',
-    '--input': 'L C H',
-    '--ring': 'L C H',  // 通常与 primary 相同
-    // 框架专属 token（必填）
-    '--g-main-area-bg': 'oklch(L C H)',  // 明色略深于背景，形成层次感
-    '--g-header-bg': 'oklch(var(--background))',
-    '--g-header-color': 'oklch(var(--foreground))',
-    '--g-header-menu-color': 'oklch(var(--accent-foreground))',
-    '--g-header-menu-hover-bg': 'oklch(var(--accent))',
-    '--g-header-menu-hover-color': 'oklch(var(--accent-foreground))',
-    '--g-header-menu-active-bg': 'oklch(var(--primary))',
-    '--g-header-menu-active-color': 'oklch(var(--primary-foreground))',
-    '--g-main-sidebar-bg': 'oklch(var(--background))',
-    '--g-main-sidebar-menu-color': 'oklch(var(--accent-foreground))',
-    '--g-main-sidebar-menu-hover-bg': 'oklch(var(--accent))',
-    '--g-main-sidebar-menu-hover-color': 'oklch(var(--accent-foreground))',
-    '--g-main-sidebar-menu-active-bg': 'oklch(var(--primary))',
-    '--g-main-sidebar-menu-active-color': 'oklch(var(--primary-foreground))',
-    '--g-sub-sidebar-bg': 'oklch(var(--background))',
-    '--g-sub-sidebar-menu-color': 'oklch(var(--accent-foreground))',
-    '--g-sub-sidebar-menu-hover-bg': 'oklch(var(--accent))',
-    '--g-sub-sidebar-menu-hover-color': 'oklch(var(--accent-foreground))',
-    '--g-sub-sidebar-menu-active-bg': 'oklch(var(--primary))',
-    '--g-sub-sidebar-menu-active-color': 'oklch(var(--primary-foreground))',
-    '--g-tabbar-bg': 'oklch(var(--background))',
-    '--g-tabbar-tab-color': 'oklch(var(--accent-foreground) / 50%)',
-    '--g-tabbar-tab-hover-bg': 'oklch(var(--accent) / 50%)',
-    '--g-tabbar-tab-hover-color': 'oklch(var(--accent-foreground) / 50%)',
-    '--g-tabbar-tab-active-bg': 'oklch(var(--accent))',
-    '--g-tabbar-tab-active-color': 'oklch(var(--foreground))',
-    '--g-toolbar-bg': 'oklch(var(--background))',
-  },
-  dark: {
-    // shadcn 标准 token（同明色结构，但色值更深）
-    '--background': 'L C H',
-    // ... 其余 shadcn token
-    // 框架专属 token（暗色与明色有 5 处关键差异，见 references/theme-structure.md）
-    '--g-main-area-bg': 'oklch(var(--background))',  // 暗色与背景相同，避免过多层次
-    '--g-header-bg': 'oklch(var(--background))',
-    '--g-header-color': 'oklch(var(--foreground))',
-    '--g-header-menu-color': 'oklch(var(--muted-foreground))',       // 差异：用 muted-foreground
-    '--g-header-menu-hover-bg': 'oklch(var(--muted))',               // 差异：用 muted
-    '--g-header-menu-hover-color': 'oklch(var(--muted-foreground))',
-    '--g-header-menu-active-bg': 'oklch(var(--accent))',             // 差异：用 accent 而非 primary
-    '--g-header-menu-active-color': 'oklch(var(--accent-foreground))',
-    '--g-main-sidebar-bg': 'oklch(var(--background))',
-    '--g-main-sidebar-menu-color': 'oklch(var(--muted-foreground))',
-    '--g-main-sidebar-menu-hover-bg': 'oklch(var(--muted))',
-    '--g-main-sidebar-menu-hover-color': 'oklch(var(--muted-foreground))',
-    '--g-main-sidebar-menu-active-bg': 'oklch(var(--accent))',
-    '--g-main-sidebar-menu-active-color': 'oklch(var(--accent-foreground))',
-    '--g-sub-sidebar-bg': 'oklch(var(--background))',
-    '--g-sub-sidebar-menu-color': 'oklch(var(--muted-foreground))',
-    '--g-sub-sidebar-menu-hover-bg': 'oklch(var(--muted))',
-    '--g-sub-sidebar-menu-hover-color': 'oklch(var(--muted-foreground))',
-    '--g-sub-sidebar-menu-active-bg': 'oklch(var(--accent))',
-    '--g-sub-sidebar-menu-active-color': 'oklch(var(--accent-foreground))',
-    '--g-tabbar-bg': 'oklch(var(--background))',
-    '--g-tabbar-tab-color': 'oklch(var(--accent-foreground) / 50%)',
-    '--g-tabbar-tab-hover-bg': 'oklch(var(--accent) / 50%)',
-    '--g-tabbar-tab-hover-color': 'oklch(var(--accent-foreground) / 50%)',
-    '--g-tabbar-tab-active-bg': 'oklch(var(--accent))',
-    '--g-tabbar-tab-active-color': 'oklch(var(--foreground))',
-    '--g-toolbar-bg': 'oklch(var(--background))',
-  },
-},
-```
+export const lightTheme = {
+  // shadcn 标准 token（必填）
+  '--background': 'L C H',
+  '--foreground': 'L C H',
+  '--card': 'L C H',
+  '--card-foreground': 'L C H',
+  '--popover': 'L C H',
+  '--popover-foreground': 'L C H',
+  '--primary': 'L C H',
+  '--primary-foreground': 'L C H',
+  '--secondary': 'L C H',
+  '--secondary-foreground': 'L C H',
+  '--muted': 'L C H',
+  '--muted-foreground': 'L C H',
+  '--accent': 'L C H',
+  '--accent-foreground': 'L C H',
+  '--destructive': '0.577 0.245 27.325',  // 通常保持不变
+  '--border': 'L C H',
+  '--input': 'L C H',
+  '--ring': 'L C H',  // 通常与 primary 相同
+  // 框架专属 token（必填）
+  '--g-main-area-bg': 'oklch(L C H)',  // 明色略深于背景，形成层次感
+  '--g-header-bg': 'oklch(var(--background))',
+  '--g-header-color': 'oklch(var(--foreground))',
+  '--g-header-menu-color': 'oklch(var(--accent-foreground))',
+  '--g-header-menu-hover-bg': 'oklch(var(--accent))',
+  '--g-header-menu-hover-color': 'oklch(var(--accent-foreground))',
+  '--g-header-menu-active-bg': 'oklch(var(--primary))',
+  '--g-header-menu-active-color': 'oklch(var(--primary-foreground))',
+  '--g-main-sidebar-bg': 'oklch(var(--background))',
+  '--g-main-sidebar-menu-color': 'oklch(var(--accent-foreground))',
+  '--g-main-sidebar-menu-hover-bg': 'oklch(var(--accent))',
+  '--g-main-sidebar-menu-hover-color': 'oklch(var(--accent-foreground))',
+  '--g-main-sidebar-menu-active-bg': 'oklch(var(--primary))',
+  '--g-main-sidebar-menu-active-color': 'oklch(var(--primary-foreground))',
+  '--g-sub-sidebar-bg': 'oklch(var(--background))',
+  '--g-sub-sidebar-menu-color': 'oklch(var(--accent-foreground))',
+  '--g-sub-sidebar-menu-hover-bg': 'oklch(var(--accent))',
+  '--g-sub-sidebar-menu-hover-color': 'oklch(var(--accent-foreground))',
+  '--g-sub-sidebar-menu-active-bg': 'oklch(var(--primary))',
+  '--g-sub-sidebar-menu-active-color': 'oklch(var(--primary-foreground))',
+  '--g-tabbar-bg': 'oklch(var(--background))',
+  '--g-tabbar-tab-color': 'oklch(var(--accent-foreground) / 50%)',
+  '--g-tabbar-tab-hover-bg': 'oklch(var(--accent) / 50%)',
+  '--g-tabbar-tab-hover-color': 'oklch(var(--accent-foreground) / 50%)',
+  '--g-tabbar-tab-active-bg': 'oklch(var(--accent))',
+  '--g-tabbar-tab-active-color': 'oklch(var(--foreground))',
+  '--g-toolbar-bg': 'oklch(var(--background))',
+} as const

-### 第四步：在应用设置中启用
-
-主题添加到 `packages/themes/index.ts` 后，还需要在对应应用的设置中启用。先执行 `ls apps/` 确认有哪些应用，询问用户要在哪个应用中启用，然后修改 `apps/<app>/src/settings.ts`：
-
-```typescript
-theme: {
-  light: 'themeName',
-  dark: 'themeName',
-}
+export const darkTheme = {
+  // shadcn 标准 token（同明色结构，但色值更深）
+  '--background': 'L C H',
+  // ... 其余 shadcn token
+  // 框架专属 token（暗色与明色有 5 处关键差异，见 references/theme-structure.md）
+  '--g-main-area-bg': 'oklch(var(--background))',  // 暗色与背景相同，避免过多层次
+  '--g-header-bg': 'oklch(var(--background))',
+  '--g-header-color': 'oklch(var(--foreground))',
+  '--g-header-menu-color': 'oklch(var(--muted-foreground))',       // 差异：用 muted-foreground
+  '--g-header-menu-hover-bg': 'oklch(var(--muted))',               // 差异：用 muted
+  '--g-header-menu-hover-color': 'oklch(var(--muted-foreground))',
+  '--g-header-menu-active-bg': 'oklch(var(--accent))',             // 差异：用 accent 而非 primary
+  '--g-header-menu-active-color': 'oklch(var(--accent-foreground))',
+  '--g-main-sidebar-bg': 'oklch(var(--background))',
+  '--g-main-sidebar-menu-color': 'oklch(var(--muted-foreground))',
+  '--g-main-sidebar-menu-hover-bg': 'oklch(var(--muted))',
+  '--g-main-sidebar-menu-hover-color': 'oklch(var(--muted-foreground))',
+  '--g-main-sidebar-menu-active-bg': 'oklch(var(--accent))',
+  '--g-main-sidebar-menu-active-color': 'oklch(var(--accent-foreground))',
+  '--g-sub-sidebar-bg': 'oklch(var(--background))',
+  '--g-sub-sidebar-menu-color': 'oklch(var(--muted-foreground))',
+  '--g-sub-sidebar-menu-hover-bg': 'oklch(var(--muted))',
+  '--g-sub-sidebar-menu-hover-color': 'oklch(var(--muted-foreground))',
+  '--g-sub-sidebar-menu-active-bg': 'oklch(var(--accent))',
+  '--g-sub-sidebar-menu-active-color': 'oklch(var(--accent-foreground))',
+  '--g-tabbar-bg': 'oklch(var(--background))',
+  '--g-tabbar-tab-color': 'oklch(var(--accent-foreground) / 50%)',
+  '--g-tabbar-tab-hover-bg': 'oklch(var(--accent) / 50%)',
+  '--g-tabbar-tab-hover-color': 'oklch(var(--accent-foreground) / 50%)',
+  '--g-tabbar-tab-active-bg': 'oklch(var(--accent))',
+  '--g-tabbar-tab-active-color': 'oklch(var(--foreground))',
+  '--g-toolbar-bg': 'oklch(var(--background))',
+} as const
 ```

 ## 参考资源
@@ -1,9 +0,0 @@
-{
-  "enabledPlugins": {
-    "skill-creator@claude-plugins-official": true,
-    "frontend-design@claude-plugins-official": true,
-    "code-simplifier@claude-plugins-official": true,
-    "feature-dev@claude-plugins-official": true,
-    "chrome-devtools-mcp@chrome-devtools-plugins": true
-  }
-}
@@ -1 +0,0 @@
-../../.agents/skills/design-taste-frontend
@@ -1,5 +1,5 @@
 [中文](./readme.md) | **English**
-<img src="https://fantastic-admin.hurui.me/logo.svg" align="right" width="80" height="80" alt="logo" />
+<a href="https://fantastic-admin.hurui.me" target="_blank"><img src="https://fantastic-admin.hurui.me/logo.svg" align="right" height="80" alt="logo" /></a>

 # Fantastic-admin

@@ -24,7 +24,7 @@ An **AI-oriented** admin system framework

 - AI-friendly engineering foundation with multiple built-in Skills
 - First-class tech stack: Vue 3.6 / Vite 8 / Pinia / UnoCSS / VueUse / TypeScript / ESLint / Stylelint / ...
- Freely choose your preferred UI library, with Element Plus by default
+- Freely choose your preferred UI library
 - 8 built-in theme schemes with extensibility for distinct industry brand styles
 - 7 navigation menu modes to match products at different growth stages
 - Fine-grained and controllable page keep-alive strategy
@@ -48,65 +48,8 @@ If you find Fantastic-admin useful, or you are already using it, please consider

 [![star](https://atomgit.com/fantastic-admin/basic/star/badge.svg)](https://atomgit.com/fantastic-admin/basic)

-<details>
-<summary>Github Stars Chart</summary>
-
-[![Stargazers over time](https://starchart.cc/fantastic-admin/basic.svg)](https://starchart.cc/fantastic-admin/basic)
-</details>
-
 ## Ecosystem

-<table>
-  <tr>
-    <th colspan="3" align="center">
-      <a href="https://hooray.github.io/fantastic-startkit/" target="_blank">Fantastic-startkit</a>
-    </th>
-  </tr>
-  <tr>
-    <th colspan="3" align="center">
-      A simple and easy-to-use Vue 3 project starter kit
-    </th>
-  </tr>
-</table>
-
-<table>
-  <tr>
-    <th colspan="3" align="center">
-      <a href="https://one-step-admin.hurui.me" target="_blank">One-step-admin</a>
-    </th>
-  </tr>
-  <tr>
-    <th colspan="3" align="center">
-      A Vue admin framework built to help you move faster than the rest
-    </th>
-  </tr>
-  <tr>
-    <td><img src="https://one-step-admin.hurui.me/preview1.png" alt="" /></td>
-    <td><img src="https://one-step-admin.hurui.me/preview2.png" alt="" /></td>
-    <td><img src="https://one-step-admin.hurui.me/preview3.png" alt="" /></td>
-  </tr>
-  <tr>
-    <td><img src="https://one-step-admin.hurui.me/preview4.png" alt="" /></td>
-    <td><img src="https://one-step-admin.hurui.me/preview5.png" alt="" /></td>
-    <td><img src="https://one-step-admin.hurui.me/preview6.png" alt="" /></td>
-  </tr>
-</table>
-
-<table>
-  <tr>
-    <th colspan="4" align="center">
-      <a href="https://fantastic-mobile.hurui.me" target="_blank">Fantastic-mobile</a>
-    </th>
-  </tr>
-  <tr>
-    <th colspan="4" align="center">
-      A distinctive mobile H5 framework
-    </th>
-  </tr>
-  <tr>
-    <td><img src="https://fantastic-mobile.hurui.me/preview1.png" alt="" /></td>
-    <td><img src="https://fantastic-mobile.hurui.me/preview2.png" alt="" /></td>
-    <td><img src="https://fantastic-mobile.hurui.me/preview3.png" alt="" /></td>
-    <td><img src="https://fantastic-mobile.hurui.me/preview4.png" alt="" /></td>
-  </tr>
-</table>
+- [`Fantastic-startkit`](https://hooray.github.io/fantastic-startkit/) - A simple and easy-to-use Vue 3 project starter kit
+- [`Fantastic-mobile`](https://fantastic-mobile.hurui.me/) - Let your H5 project have a solid engineering base
+- [`One-step-admin`](https://one-step-admin.hurui.me) - A Vue admin framework built to help you move faster than the rest
@@ -1,5 +1,5 @@
 **中文** | [English](./README.EN.md)
-<img src="https://fantastic-admin.hurui.me/logo.svg" align="right" width="80" height="80" alt="logo" />
+<a href="https://fantastic-admin.hurui.me" target="_blank"><img src="https://fantastic-admin.hurui.me/logo.svg" align="right" height="80" alt="logo" /></a>

 # Fantastic-admin

@@ -24,8 +24,8 @@

 - AI 友好的工程底座，内置多个 Skills
 - 一流的技术栈：Vue 3.6 / Vite 8 / Pinia / UnoCSS / VueUse / TypeScript / ESLint / Stylelint / ...
- 自由选择喜爱的 UI 库，默认 Element Plus
- 8 套默认主题方案且可扩展，给不同行业提供专属品牌气质
+- 自由选择喜爱的三方 UI 库
+- 18 套默认主题方案且可扩展，给不同行业提供专属品牌气质
 - 7 款导航菜单模式，匹配产品发展的各个阶段
 - 精细可控的页面保活策略
 - 全方位权限验证
@@ -48,14 +48,8 @@

 [![star](https://atomgit.com/fantastic-admin/basic/star/badge.svg)](https://atomgit.com/fantastic-admin/basic)

-<details>
-<summary>Github Stars 曲线</summary>
-
-[![Stargazers over time](https://starchart.cc/fantastic-admin/basic.svg)](https://starchart.cc/fantastic-admin/basic)
-</details>
-
 ## 生态

 - [`Fantastic-startkit`](https://hooray.github.io/fantastic-startkit/) - 简单好用的 Vue3 项目启动套件
 - [`Fantastic-mobile`](https://fantastic-mobile.hurui.me/) - 让你的 H5 项目拥有稳固的工程底座
- [`One-step-admin`](https://one-step-admin.hurui.me) - 干啥都快人一步的 Vue 中后台管理系统框架
+- [`One-step Console`](https://one-step-admin.hurui.me) - 像导播一样编排你的工作现场
@@ -9,11 +9,13 @@
    "serve": "http-server ./dist -o",
    "serve:test": "http-server ./dist-test -o",
    "svgo": "svgo -f src/assets/icons",
-    "generate:icons": "tsx ./scripts/generate.icons.ts",
+    "generate:icons": "fa-iconify-tools",
    "lint": "vue-tsc -b"
  },
  "dependencies": {
    "@fantastic-admin/components": "workspace:*",
+    "@fantastic-admin/composables": "workspace:*",
+    "@fantastic-admin/hotkeys": "workspace:*",
    "@fantastic-admin/settings": "workspace:*",
    "@fantastic-admin/types": "workspace:*",
    "@vee-validate/zod": "catalog:",
@@ -27,8 +29,6 @@
    "dayjs": "catalog:",
    "eruda": "catalog:",
    "es-toolkit": "catalog:",
-    "hotkeys-js": "catalog:",
-    "lucide-vue-next": "catalog:",
    "mitt": "catalog:",
    "nprogress": "catalog:",
    "path-browserify": "catalog:",
@@ -49,9 +49,9 @@
    "zod": "catalog:"
  },
  "devDependencies": {
-    "@clack/prompts": "catalog:",
    "@faker-js/faker": "catalog:",
    "@fantastic-admin/copyright": "workspace:*",
+    "@fantastic-admin/iconify-tools": "workspace:*",
    "@iconify/vue": "catalog:",
    "@spiriit/vite-plugin-svg-spritemap": "catalog:",
    "@types/nprogress": "catalog:",
@@ -66,7 +66,6 @@
    "postcss-nested": "catalog:",
    "sass-embedded": "catalog:",
    "svgo": "catalog:",
-    "tsx": "catalog:",
    "unplugin-auto-import": "catalog:",
    "unplugin-turbo-console": "catalog:",
    "unplugin-vue-components": "catalog:",
@@ -1,108 +0,0 @@
-import { spawn } from 'node:child_process'
-import fs from 'node:fs'
-import path from 'node:path'
-import process from 'node:process'
-import * as p from '@clack/prompts'
-import { lookupCollection, lookupCollections } from '@iconify/json'
-
-// 拿到全部图标集的原始数据
-const raw = await lookupCollections()
-
-let lastChoose = fs.readFileSync(path.resolve(process.cwd(), 'src/iconify/index.json'), 'utf-8')
-lastChoose = JSON.parse(lastChoose)
-
-// 取出可使用的图标集数据用于选择，并按名称排序
-const collections = Object.entries(raw).map(([id, item]) => ({
-  ...item,
-  id,
-})).sort((a, b) => a.name.localeCompare(b.name))
-
-p.intro('图标集生成工具')
-
-/**
- * 分别会在对应目录下生成以下文件，其中(1)(3)用于离线下载并安装图标，(2)用于图标选择器使用
- * (1) src/iconify/index.json    记录用户交互信息
- * (2) src/iconify/data.json     包含多个图标集数据，仅记录图标名
- * (3) public/icons/*-raw.json   多个图标集的原始数据，独立存放，用于离线使用
- */
-const answers = await p.group(
-  {
-    collections: () =>
-      p.multiselect({
-        message: '请选择需要生成的图标集',
-        options: collections.map(item => ({
-          label: item.name,
-          value: item.id,
-          hint: `${item.total} 个图标`,
-        })),
-        initialValues: lastChoose.collections,
-      }),
-    isOfflineUse: () =>
-      p.confirm({
-        message: '是否需要离线使用',
-        initialValue: false,
-      }),
-  },
-  {
-    onCancel: () => {
-      p.cancel('操作已取消')
-      process.exit(0)
-    },
-  },
-)
-
-const spinner = p.spinner()
-spinner.start('正在生成图标集...')
-
-await fs.writeJSON(
-  path.resolve(process.cwd(), 'src/iconify/index.json'),
-  {
-    collections: answers.collections,
-    isOfflineUse: answers.isOfflineUse,
-  },
-)
-
-const outputDir = path.resolve(process.cwd(), 'public/icons')
-await fs.ensureDir(outputDir)
-await fs.emptyDir(outputDir)
-
-const collectionsMeta: object[] = []
-for (const info of answers.collections) {
-  const setData = await lookupCollection(info)
-
-  collectionsMeta.push({
-    prefix: setData.prefix,
-    info: setData.info,
-    icons: Object.keys(setData.icons),
-  })
-
-  const offlineFilePath = path.join(outputDir, `${info}-raw.json`)
-
-  if (answers.isOfflineUse) {
-    await fs.writeJSON(offlineFilePath, setData)
-  }
-}
-
-await fs.writeJSON(
-  path.resolve(process.cwd(), 'src/iconify/data.json'),
-  collectionsMeta,
-)
-
-// 使用 spawn 运行 eslint
-const eslint = spawn('eslint', ['src/iconify/data.json', 'src/iconify/index.json', '--cache', '--fix'], {
-  stdio: 'inherit',
-  shell: true,
-})
-
-eslint.on('error', (err) => {
-  p.log.error(`ESLint 执行失败: ${err.message}`)
-  process.exit(1)
-})
-
-eslint.on('close', (code) => {
-  if (code !== 0) {
-    p.log.error(`ESLint 执行失败，退出码: ${code}`)
-    process.exit(code)
-  }
-  spinner.stop('图标集生成完成！')
-})
@@ -51,7 +51,7 @@ function handleError(error: any) {
    useAppAccountStore().requestLogout()
  }
  else {
-    faToast.error('Error', {
+    useFaToast().error('Error', {
      description: error.message,
    })
  }
@@ -62,14 +62,15 @@ api.interceptors.response.use(
  (response) => {
    /**
     * 全局拦截请求发送后返回的数据，如果数据有报错则在这做全局的错误提示
-     * 假设返回数据格式为：{ status: 1, error: '', data: {} }
-     * 规则是当 status 为 1 时表示请求成功，为 0 时表示接口需要登录或者登录状态失效，需要重新登录
-     * 请求出错时 error 会返回错误信息
+     * 约定的数据格式：{ status: 1 | 0, error: string, data: object }
+     * status 只有两种状态，1 表示请求成功，0 表示接口需要登录或者登录状态失效，需要重新登录
+     * error 只有在请求出错时才会有值，表示错误信息
+     * data 只有在请求成功时才会有值，表示请求返回的数据
     */
    if (typeof response.data === 'object') {
      if (response.data.status === 1) {
-        if (response.data.error !== '') {
-          faToast.warning('Warning', {
+        if (response.data.error) {
+          useFaToast().warning('Warning', {
            description: response.data.error,
          })
          return Promise.reject(response.data)
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
 import * as z from 'zod'
-import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'

 defineOptions({
  name: 'EditPasswordForm',
@@ -12,32 +10,38 @@ const appAccountStore = useAppAccountStore()

 const loading = ref(false)

-const form = useForm({
-  validationSchema: toTypedSchema(
-    z.object({
-      password: z.string().min(1, '请输入原密码'),
-      newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
-      checkPassword: z.string().min(1, '请确认新密码'),
-    }).refine(data => data.newPassword === data.checkPassword, {
-      message: '两次输入的密码不一致',
-      path: ['checkPassword'],
-    }),
-  ),
-  initialValues: {
-    password: '',
-    newPassword: '',
-    checkPassword: '',
-  },
+interface EditPasswordModel {
+  password: string
+  newPassword: string
+  checkPassword: string
+}
+
+const model = ref<EditPasswordModel>({
+  password: '',
+  newPassword: '',
+  checkPassword: '',
 })
-const onSubmit = form.handleSubmit((values) => {
+
+const validationSchema = toTypedSchema(
+  z.object({
+    password: z.string().min(1, '请输入原密码'),
+    newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
+    checkPassword: z.string().min(1, '请确认新密码'),
+  }).refine(data => data.newPassword === data.checkPassword, {
+    message: '两次输入的密码不一致',
+    path: ['checkPassword'],
+  }),
+)
+
+function onSubmit(values: EditPasswordModel) {
  loading.value = true
  appAccountStore.editPassword(values).then(async () => {
-    faToast.success('模拟修改成功，请重新登录')
+    useFaToast().success('模拟修改成功，请重新登录')
    appAccountStore.logout()
  }).finally(() => {
    loading.value = false
  })
-})
+}
 </script>

 <template>
@@ -50,52 +54,31 @@ const onSubmit = form.handleSubmit((values) => {
        请输入原密码、新密码和确认密码
      </p>
    </div>
-    <form @submit="onSubmit">
-      <FormField v-slot="{ componentField, errors }" name="password">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="原密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FormField v-slot="{ componentField, errors }" name="newPassword">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="新密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FormField v-slot="{ componentField, errors }" name="checkPassword">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="确认密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
+    <FaForm :model="model" :validation-schema="validationSchema" @submit="onSubmit">
+      <FaFormItem name="password">
+        <FaInput type="password" placeholder="原密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaFormItem name="newPassword">
+        <FaInput type="password" placeholder="新密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaFormItem name="checkPassword">
+        <FaInput type="password" placeholder="确认密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
      <FaButton :loading="loading" size="lg" class="mt-8 w-full" type="submit">
        保存
      </FaButton>
-    </form>
+    </FaForm>
  </div>
 </template>
@@ -1,8 +1,7 @@
 <script setup lang="ts">
+import type { FormExpose } from '@fantastic-admin/components'
 import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
 import * as z from 'zod'
-import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'

 defineOptions({
  name: 'LoginForm',
@@ -26,19 +25,27 @@ const loading = ref(false)
 // 登录方式，default 账号密码登录，qrcode 扫码登录
 const type = ref<'default' | 'qrcode'>('default')

-const form = useForm({
-  validationSchema: toTypedSchema(z.object({
-    account: z.string().min(1, '请输入用户名'),
-    password: z.string().min(1, '请输入密码'),
-    remember: z.boolean(),
-  })),
-  initialValues: {
-    account: props.account ?? localStorage.getItem('login_account') ?? '',
-    password: '',
-    remember: localStorage.getItem('login_account') !== null,
-  },
+interface LoginModel {
+  account: string
+  password: string
+  remember: boolean
+}
+
+const formRef = useTemplateRef<FormExpose<LoginModel>>('formRef')
+
+const model = ref<LoginModel>({
+  account: props.account ?? localStorage.getItem('login_account') ?? '',
+  password: '',
+  remember: localStorage.getItem('login_account') !== null,
 })
-const onSubmit = form.handleSubmit((values) => {
+
+const validationSchema = toTypedSchema(z.object({
+  account: z.string().min(1, '请输入用户名'),
+  password: z.string().min(1, '请输入密码'),
+  remember: z.boolean(),
+}))
+
+function onSubmit(values: LoginModel) {
  loading.value = true
  appAccountStore.login(values).then(() => {
    if (values.remember) {
@@ -51,12 +58,12 @@ const onSubmit = form.handleSubmit((values) => {
  }).finally(() => {
    loading.value = false
  })
-})
+}

-function testAccount(account: string) {
-  form.setFieldValue('account', account)
-  form.setFieldValue('password', '123456')
-  onSubmit()
+async function testAccount(account: string) {
+  model.value.account = account
+  model.value.password = '123456'
+  await formRef.value?.submit()
 }
 </script>

@@ -79,48 +86,33 @@ function testAccount(account: string) {
      />
    </div>
    <div v-show="type === 'default'">
-      <form @submit="onSubmit">
-        <FormField v-slot="{ componentField, errors }" name="account">
-          <FormItem class="pb-6 relative space-y-0">
-            <FormControl>
-              <FaInput type="text" placeholder="用户名" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-                <template #start>
-                  <FaIcon name="i-lucide:user" />
-                </template>
-              </FaInput>
-            </FormControl>
-            <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-              <FormMessage class="text-xs bottom-1 absolute" />
-            </Transition>
-          </FormItem>
-        </FormField>
-        <FormField v-slot="{ componentField, errors }" name="password">
-          <FormItem class="pb-6 relative space-y-0">
-            <FormControl>
-              <FaInput type="password" placeholder="密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-                <template #start>
-                  <FaIcon name="i-lucide:lock" />
-                </template>
-              </FaInput>
-            </FormControl>
-            <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-              <FormMessage class="text-xs bottom-1 absolute" />
-            </Transition>
-          </FormItem>
-        </FormField>
-        <div class="mb-4 flex-center-between">
-          <div class="flex-center-start">
-            <FormField v-slot="{ componentField }" type="checkbox" name="remember">
-              <FormItem>
-                <FormControl>
-                  <FaCheckbox v-bind="componentField">
-                    记住我
-                  </FaCheckbox>
-                </FormControl>
-              </FormItem>
-            </FormField>
-          </div>
-          <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onResetPassword', form.values.account)">
+      <FaForm
+        ref="formRef"
+        :model="model"
+        :validation-schema="validationSchema"
+        @submit="onSubmit"
+      >
+        <FaFormItem name="account">
+          <FaInput type="text" placeholder="用户名" class="w-full">
+            <template #start>
+              <FaIcon name="i-lucide:user" />
+            </template>
+          </FaInput>
+        </FaFormItem>
+        <FaFormItem name="password">
+          <FaInput type="password" placeholder="密码" class="w-full">
+            <template #start>
+              <FaIcon name="i-lucide:lock" />
+            </template>
+          </FaInput>
+        </FaFormItem>
+        <div class="flex-start-between">
+          <FaFormItem name="remember" class="min-w-0">
+            <FaCheckbox>
+              记住我
+            </FaCheckbox>
+          </FaFormItem>
+          <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onResetPassword', model.account)">
            忘记密码了?
          </FaButton>
        </div>
@@ -129,11 +121,11 @@ function testAccount(account: string) {
        </FaButton>
        <div class="text-sm mt-4 flex-center gap-2">
          <span class="text-secondary-foreground op-50">还没有帐号?</span>
-          <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onRegister', form.values.account)">
+          <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onRegister', model.account)">
            注册新帐号
          </FaButton>
        </div>
-      </form>
+      </FaForm>
      <div class="mt-4 text-center -mb-4">
        <FaDivider>演示账号一键登录</FaDivider>
        <div class="space-x-2">
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
 import * as z from 'zod'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'

 defineOptions({
  name: 'RegisterForm',
@@ -19,32 +17,38 @@ const emits = defineEmits<{

 const loading = ref(false)

-const form = useForm({
-  validationSchema: toTypedSchema(
-    z.object({
-      account: z.string().min(1, '请输入用户名'),
-      password: z.string().min(1, '请输入密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
-      checkPassword: z.string().min(1, '请再次输入密码'),
-    }).refine(data => data.password === data.checkPassword, {
-      message: '两次输入的密码不一致',
-      path: ['checkPassword'],
-    }),
-  ),
-  initialValues: {
-    account: props.account ?? '',
-    password: '',
-    checkPassword: '',
-  },
+interface RegisterModel {
+  account: string
+  password: string
+  checkPassword: string
+}
+
+const model = ref<RegisterModel>({
+  account: props.account ?? '',
+  password: '',
+  checkPassword: '',
 })
-const onSubmit = form.handleSubmit((values) => {
+
+const validationSchema = toTypedSchema(
+  z.object({
+    account: z.string().min(1, '请输入用户名'),
+    password: z.string().min(1, '请输入密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
+    checkPassword: z.string().min(1, '请再次输入密码'),
+  }).refine(data => data.password === data.checkPassword, {
+    message: '两次输入的密码不一致',
+    path: ['checkPassword'],
+  }),
+)
+
+function onSubmit(values: RegisterModel) {
  loading.value = true
  emits('onRegister', values.account)
-})
+}
 </script>

 <template>
  <div class="p-12 flex-col-stretch-center min-h-500px w-full">
-    <form @submit="onSubmit">
+    <FaForm :model="model" :validation-schema="validationSchema" @submit="onSubmit">
      <div class="mb-8 space-y-2">
        <h3 class="text-4xl font-bold">
          探索从这里开始 🚀
@@ -53,60 +57,37 @@ const onSubmit = form.handleSubmit((values) => {
          演示系统未提供该功能
        </p>
      </div>
-      <FormField v-slot="{ componentField, errors }" name="account">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="text" placeholder="用户名" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:user" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FormField v-slot="{ componentField, value, errors }" name="password">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <FormDescription>
-            <FaPasswordStrength :password="value" />
-          </FormDescription>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FormField v-slot="{ componentField, errors }" name="checkPassword">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="确认密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
+      <FaFormItem name="account">
+        <FaInput type="text" placeholder="用户名" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:user" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaFormItem name="password">
+        <FaInput type="password" placeholder="密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+        <FaPasswordStrength :password="model.password" />
+      </FaFormItem>
+      <FaFormItem name="checkPassword">
+        <FaInput type="password" placeholder="确认密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
      <FaButton :loading="loading" size="lg" class="mt-4 w-full" type="submit">
        注册
      </FaButton>
      <div class="text-sm mt-4 flex-center gap-2">
        <span class="text-secondary-foreground op-50">已经有帐号?</span>
-        <FaButton variant="link" class="p-0 h-auto" @click="emits('onLogin', form.values.account)">
+        <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onLogin', model.account)">
          去登录
        </FaButton>
      </div>
-    </form>
+    </FaForm>
  </div>
 </template>
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
 import * as z from 'zod'
-import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'

 defineOptions({
  name: 'ResetPasswordForm',
@@ -19,22 +17,28 @@ const emits = defineEmits<{

 const loading = ref(false)

-const form = useForm({
-  validationSchema: toTypedSchema(z.object({
-    account: z.string().min(1, '请输入用户名'),
-    captcha: z.string().min(6, '请输入验证码'),
-    newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
-  })),
-  initialValues: {
-    account: props.account ?? '',
-    captcha: '',
-    newPassword: '',
-  },
+interface ResetPasswordModel {
+  account: string
+  captcha: string
+  newPassword: string
+}
+
+const model = ref<ResetPasswordModel>({
+  account: props.account ?? '',
+  captcha: '',
+  newPassword: '',
 })
-const onSubmit = form.handleSubmit((values) => {
+
+const validationSchema = toTypedSchema(z.object({
+  account: z.string().min(1, '请输入用户名'),
+  captcha: z.string().min(6, '请输入验证码'),
+  newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
+}))
+
+function onSubmit(values: ResetPasswordModel) {
  loading.value = true
  emits('onResetPassword', values.account)
-})
+}

 const countdown = ref(0)
 const countdownInterval = ref(Number.NaN)
@@ -51,7 +55,7 @@ function handleSendCaptcha() {

 <template>
  <div class="p-12 flex-col-stretch-center min-h-500px w-full">
-    <form @submit="onSubmit">
+    <FaForm :model="model" :validation-schema="validationSchema" @submit="onSubmit">
      <div class="mb-8 space-y-2">
        <h3 class="text-4xl font-bold">
          忘记密码了? 🔒
@@ -60,57 +64,41 @@ function handleSendCaptcha() {
          演示系统未提供该功能
        </p>
      </div>
-      <FormField v-slot="{ componentField, errors }" name="account">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="text" placeholder="用户名" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:user" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <div class="flex-start-between gap-2">
-        <FormField v-slot="{ componentField, value, setValue }" name="captcha">
-          <FormItem class="pb-6 relative space-y-0">
-            <FormControl>
-              <FaInputOTP :model-value="value" :name="componentField.name" :length="6" class="border-destructive" @update:model-value="val => setValue(val)" />
-            </FormControl>
-            <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-              <FormMessage class="text-xs bottom-1 absolute" />
-            </Transition>
-          </FormItem>
-        </FormField>
-        <FaButton variant="outline" :disabled="countdown > 0" class="px-4 flex-1" @click="handleSendCaptcha">
-          {{ countdown === 0 ? '发送验证码' : `${countdown} 秒后重发` }}
-        </FaButton>
-      </div>
-      <FormField v-slot="{ componentField, errors }" name="newPassword">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="新密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
+      <FaFormItem name="account">
+        <FaInput type="text" placeholder="用户名" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:user" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaFormItem name="captcha" :auto-bind="false">
+        <div class="flex-start-between gap-2">
+          <FaInputOTP
+            v-model="model.captcha"
+            name="captcha"
+            :length="6"
+            class="border-destructive"
+          />
+          <FaButton variant="outline" type="button" :disabled="countdown > 0" class="px-4 flex-1" @click="handleSendCaptcha">
+            {{ countdown === 0 ? '发送验证码' : `${countdown} 秒后重发` }}
+          </FaButton>
+        </div>
+      </FaFormItem>
+      <FaFormItem name="newPassword">
+        <FaInput type="password" placeholder="新密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
      <FaButton :loading="loading" size="lg" class="mt-4 w-full" type="submit">
        确认
      </FaButton>
      <div class="text-sm mt-4 flex-center gap-2">
-        <FaButton variant="link" class="p-0 h-auto" @click="emits('onLogin', form.values.account)">
+        <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onLogin', model.account)">
          去登录
        </FaButton>
      </div>
-    </form>
+    </FaForm>
  </div>
 </template>
@@ -80,13 +80,13 @@ export function useAppTabbar() {
    const index = appTabbarStore.list.findIndex(item => item.tabId === tabId)
    if (index < 0) {
      flag = false
-      !checkOnly && faToast.warning('关闭的标签页不存在', {
+      !checkOnly && useFaToast().warning('关闭的标签页不存在', {
        position: 'top-center',
      })
    }
    else if (appTabbarStore.list.length <= 1) {
      flag = false
-      !checkOnly && faToast.warning('当前只有一个标签页，不可关闭', {
+      !checkOnly && useFaToast().warning('当前只有一个标签页，不可关闭', {
        position: 'top-center',
      })
    }
@@ -1,107 +0,0 @@
-# Hotkeys 设计说明
-
-这个目录参考 `fantastic-admin/v6-dev/apps/example/src/hotkeys` 的设计，目标是把当前项目里分散在各组件中的快捷键逻辑收拢成一套轻量方案。
-
-## 设计目标
-
-当前方案只解决 4 件事：
-
-1. 快捷键定义不要散落在多个组件里重复写
-2. 快捷键帮助面板不要再手写一份展示文案
-3. 业务组件不要反复手写 `hotkeys()` / `unbind()`
-4. 不引入过重的 command system
-
-所以采用：
-
- `registry.ts` 统一定义
- `useHotkeys.ts` 统一注册
- 业务 handler 仍留在业务组件
-
-这是一种“集中定义 + 就地执行”的轻量折中方案。
-
-## 目录职责
-
-### `registry.ts`
-
-统一维护当前项目的快捷键元数据：
-
- id
- keys
- enabled
- help
-
-这里负责：
-
- 统一的 id 常量
- 真实键位
- 是否启用的条件
- 帮助面板展示文案
- 聚合业务扩展
-
-> 注意：这里不放业务逻辑 handler。
-
-### `registry.extend.ts`
-
-用于放置项目自定义扩展快捷键，避免把业务项全部堆进内建定义中。
-
-### `types.ts`
-
-定义快捷键系统的基础类型，包括：
-
- `HotkeyBinding`
- `HotkeyContext`
- `HotkeyHelpMeta`
- `HotkeyHandler`
-
-### `useHotkeys.ts`
-
-对 `hotkeys-js` 的薄封装，提供：
-
- `useHotkey`：注册单个快捷键
- `useHotkeyBindings`：批量注册快捷键
-
-并统一处理：
-
- 注册 / 卸载
- `active` 启停
- `binding.enabled` 可用性判断
- 默认 `preventDefault`
-
-## 当前项目已落地的快捷键
-
-### 全局
-
- `system.info.open`
- `menuSearch.open`
- `page.reload`
-
-### 主导航
-
- `menu.next`
- `menu.prev`
-
-### 标签栏
-
- `tabbar.prev`
- `tabbar.next`
- `tabbar.closeCurrent`
- `tabbar.gotoVisibleIndex`
- `tabbar.gotoLast`
-
-### 菜单搜索弹窗
-
- `menuSearch.moveUp`
- `menuSearch.moveDown`
- `menuSearch.confirm`
- `menuSearch.close`
-
-## 使用约定
-
-1. 新增快捷键，优先在 `registry.ts` 或 `registry.extend.ts` 补定义
-2. 展示在帮助面板中的快捷键，必须配置 `help`
-3. handler 尽量保留在最了解业务的组件中
-4. 不直接在业务组件里继续散写 `hotkeys('xxx')`
-
-## 现阶段差异
-
-参考项目里还有页面最大化相关快捷键；当前项目暂未引入对应页面最大化能力，所以本次迁移只保留当前项目已有功能，并把原有 `F5` 页面刷新也纳入统一 registry 管理。
@@ -0,0 +1,57 @@
+import type { HotkeyBinding } from '@fantastic-admin/hotkeys'
+
+/**
+ * 业务扩展快捷键 id
+ *
+ * 使用方式：
+ *
+ * export const EXT_HOTKEY_ID = {
+ *   demoOpen: 'demo.open',
+ * } as const
+ */
+export const EXT_HOTKEY_ID = {} as const
+
+type ExtendHotkeyId = typeof EXT_HOTKEY_ID[keyof typeof EXT_HOTKEY_ID]
+
+/**
+ * 业务扩展全局快捷键
+ *
+ * 示例：
+ *
+ * export const extendGlobalHotkeyBindings = [
+ *   {
+ *     id: EXT_HOTKEY_ID.demoOpen,
+ *     keys: ['command+j', 'ctrl+j'],
+ *     enabled: ctx => ctx.settings.toolbar.menuSearch.enable,
+ *     help: {
+ *       group: 'global',
+ *       titleKey: 'global.demoOpen',
+ *       order: 90,
+ *       visible: ctx => ctx.settings.toolbar.menuSearch.enable,
+ *       displayKeys: {
+ *         default: ['Ctrl', 'J'],
+ *         mac: ['⌘', 'J'],
+ *       },
+ *     },
+ *   },
+ * ] satisfies HotkeyBinding<ExtendHotkeyId>[]
+ */
+export const extendGlobalHotkeyBindings = [] satisfies HotkeyBinding<ExtendHotkeyId>[]
+
+/**
+ * 业务扩展局部快捷键
+ *
+ * 示例：
+ *
+ * export const extendScopedHotkeyBindings = [
+ *   {
+ *     id: EXT_HOTKEY_ID.demoConfirm,
+ *     keys: ['enter'],
+ *   },
+ *   {
+ *     id: EXT_HOTKEY_ID.demoClose,
+ *     keys: ['esc'],
+ *   },
+ * ] satisfies HotkeyBinding<ExtendHotkeyId>[]
+ */
+export const extendScopedHotkeyBindings = [] satisfies HotkeyBinding<ExtendHotkeyId>[]
@@ -0,0 +1,41 @@
+import type {
+  HotkeyBinding,
+  HotkeyContextBase,
+  HotkeyDisplayKeys,
+  HotkeyHandler,
+  HotkeyHandlerArgs,
+  HotkeyHandlersMap,
+  HotkeyHelpGroup,
+  HotkeyHelpMeta,
+} from '@fantastic-admin/hotkeys'
+import { createHotkeys } from '@fantastic-admin/hotkeys'
+import { EXT_HOTKEY_ID, extendGlobalHotkeyBindings, extendScopedHotkeyBindings } from './extend'
+
+const appHotkeys = createHotkeys({
+  extendIds: EXT_HOTKEY_ID,
+  extendGlobalHotkeyBindings,
+  extendScopedHotkeyBindings,
+  getContext: () => ({
+    settings: useAppSettingsStore().settings,
+  }),
+})
+
+export const HOTKEY_ID = appHotkeys.HOTKEY_ID
+export const hotkeyIds = appHotkeys.hotkeyIds
+export const globalHotkeyBindings = appHotkeys.globalHotkeyBindings
+export const menuSearchHotkeyBindings = appHotkeys.menuSearchHotkeyBindings
+export const hotkeyBindings = appHotkeys.hotkeyBindings
+export const useHotkey = appHotkeys.useHotkey
+export const useHotkeyBindings = appHotkeys.useHotkeyBindings
+
+export type HotkeyId = typeof HOTKEY_ID[keyof typeof HOTKEY_ID]
+export type {
+  HotkeyBinding,
+  HotkeyContextBase,
+  HotkeyDisplayKeys,
+  HotkeyHandler,
+  HotkeyHandlerArgs,
+  HotkeyHandlersMap,
+  HotkeyHelpGroup,
+  HotkeyHelpMeta,
+}
@@ -1,22 +0,0 @@
-import type { HotkeyBinding } from './types'
-
-/**
- * 业务扩展快捷键 id
- *
- * 使用方式：
- *
- * export const EXT_HOTKEY_ID = {
- *   demoOpen: 'demo.open',
- * } as const
- */
-export const EXT_HOTKEY_ID = {} as const
-
-/**
- * 业务扩展全局快捷键
- */
-export const extendGlobalHotkeyBindings: HotkeyBinding[] = []
-
-/**
- * 业务扩展局部快捷键
- */
-export const extendScopedHotkeyBindings: HotkeyBinding[] = []
@@ -1,38 +0,0 @@
-import type { useAppSettingsStore } from '@/store/modules/app/settings'
-
-export type HotkeyHelpGroup = 'global' | 'nav' | 'tabbar' | 'page'
-export type HotkeyId = typeof import('./registry').HOTKEY_ID[keyof typeof import('./registry').HOTKEY_ID]
-
-export interface HotkeyContext {
-  settings: ReturnType<typeof useAppSettingsStore>['settings']
-}
-
-export interface HotkeyDisplayKeys {
-  default: string[]
-  mac?: string[]
-}
-
-export interface HotkeyHelpMeta {
-  group: HotkeyHelpGroup
-  titleKey: string
-  order?: number
-  visible?: (ctx: HotkeyContext) => boolean
-  displayKeys: HotkeyDisplayKeys
-}
-
-export interface HotkeyBinding {
-  id: HotkeyId
-  keys: string[]
-  preventDefault?: boolean
-  enabled?: (ctx: HotkeyContext) => boolean
-  help?: HotkeyHelpMeta
-}
-
-export interface HotkeyHandlerArgs {
-  event: KeyboardEvent
-  hotkey: string
-}
-
-export type HotkeyHandler = (args: HotkeyHandlerArgs) => void
-
-export type HotkeyHandlersMap = Partial<Record<HotkeyId, HotkeyHandler>>
@@ -1,69 +0,0 @@
-import type { HotkeyHandler, HotkeyHandlersMap, HotkeyId } from './types'
-import hotkeys from 'hotkeys-js'
-import { hotkeyBindings, hotkeyIds } from './registry'
-
-export function useHotkey(id: HotkeyId, handler: HotkeyHandler, active: MaybeRefOrGetter<boolean> = true) {
-  const binding = hotkeyBindings.find(item => item.id === id)
-  const appSettingsStore = useAppSettingsStore()
-  const hotkeyContext = {
-    settings: appSettingsStore.settings,
-  }
-  let currentHandler: ((event: KeyboardEvent, hotkeyHandler: { key: string }) => void) | undefined
-
-  function bind() {
-    if (currentHandler || !binding) {
-      return
-    }
-    const currentBinding = binding
-
-    currentHandler = (event, hotkeyHandler) => {
-      if (currentBinding.enabled && !currentBinding.enabled(hotkeyContext)) {
-        return
-      }
-
-      if (currentBinding.preventDefault !== false) {
-        event.preventDefault()
-      }
-
-      handler({
-        event,
-        hotkey: hotkeyHandler.key,
-      })
-    }
-
-    hotkeys(currentBinding.keys.join(','), currentHandler)
-  }
-
-  function unbind() {
-    if (!currentHandler || !binding) {
-      return
-    }
-
-    hotkeys.unbind(binding.keys.join(','), currentHandler)
-    currentHandler = undefined
-  }
-
-  watch(() => toValue(active), (val) => {
-    if (val) {
-      bind()
-    }
-    else {
-      unbind()
-    }
-  }, {
-    immediate: true,
-  })
-
-  onUnmounted(() => {
-    unbind()
-  })
-}
-
-export function useHotkeyBindings(handlers: HotkeyHandlersMap, active: MaybeRefOrGetter<boolean> = true) {
-  hotkeyIds.forEach((id) => {
-    const handler = handlers[id]
-    if (handler) {
-      useHotkey(id, handler, active)
-    }
-  })
-}
@@ -38,7 +38,7 @@ onMounted(() => {
  })
 })

-const { copy, copied, isSupported } = useClipboard()
+const { copy, copied, isSupported } = useClipboard({ legacy: true })

 function handleCopy() {
  copy(JSON.stringify(diffTwoObj(settingsDefault, appSettingsStore.settings), null, 2))
@@ -53,7 +53,7 @@ function handleCopy() {
        'columns-2': appSettingsStore.mode === 'pc',
      }"
    >
-      <FaPageMain title="主题" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4">
+      <FaPageMain title="主题" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
        <div class="setting-item">
          <div class="label">
            颜色方案
@@ -83,7 +83,7 @@ function handleCopy() {
          <FaSwitch v-model="appSettingsStore.settings.theme.colorAmblyopia" />
        </div>
      </FaPageMain>
-      <FaPageMain v-if="appSettingsStore.mode === 'pc'" title="导航菜单" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4">
+      <FaPageMain v-if="appSettingsStore.mode === 'pc'" title="导航菜单" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
        <div class="menu-mode">
          <FaTooltip text="侧边栏模式 (有主导航菜单)" :delay="500">
            <FaButton variant="outline" class="mode mode-side" :class="{ active: appSettingsStore.settings.menu.mode === 'side' }" @click="appSettingsStore.settings.menu.mode = 'side'">
@@ -145,7 +145,7 @@ function handleCopy() {
          <FaSwitch v-model="appSettingsStore.settings.menu.hotkeys" :disabled="appSettingsStore.settings.menu.mode === 'single'" />
        </div>
      </FaPageMain>
-      <FaPageMain title="顶栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4">
+      <FaPageMain title="顶栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
        <div class="setting-item">
          <div class="label">
            标签栏
@@ -175,7 +175,7 @@ function handleCopy() {
          </FaButtonGroup>
        </div>
      </FaPageMain>
-      <FaPageMain title="标签栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4">
+      <FaPageMain title="标签栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
        <div class="setting-item">
          <div class="label">
            显示图标
@@ -189,7 +189,7 @@ function handleCopy() {
          <FaSwitch v-model="appSettingsStore.settings.tabbar.hotkeys" />
        </div>
      </FaPageMain>
-      <FaPageMain title="工具栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4">
+      <FaPageMain title="工具栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
        <div v-if="appSettingsStore.mode === 'pc'" class="setting-item">
          <div class="label">
            <FaIcon name="i-ic:twotone-double-arrow" />
@@ -237,7 +237,7 @@ function handleCopy() {
          <FaSwitch v-model="appSettingsStore.settings.toolbar.colorScheme" />
        </div>
      </FaPageMain>
-      <FaPageMain title="页面" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4">
+      <FaPageMain title="页面" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
        <div class="setting-item">
          <div class="label">
            载入进度条
@@ -248,7 +248,7 @@ function handleCopy() {
          <FaSwitch v-model="appSettingsStore.settings.page.progress" />
        </div>
      </FaPageMain>
-      <FaPageMain title="应用" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4">
+      <FaPageMain title="应用" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
        <div class="p-4 pb-4 pt-14 border rounded-lg relative space-y-4">
          <div class="font-bold px-4 py-2 border-b border-e rounded-rb-lg inset-s-0 inset-t-0 absolute">
            账号
@@ -0,0 +1,253 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue'
+
+type SnapSide = 'left' | 'right'
+
+const EDGE_OFFSET = 4
+const DRAG_THRESHOLD = 8
+const DEFAULT_BUTTON_SIZE = 40
+
+const appSettingsStore = useAppSettingsStore()
+const buttonRef = useTemplateRef('buttonRef')
+
+const buttonState = ref({
+  initialized: false,
+  width: DEFAULT_BUTTON_SIZE,
+  height: DEFAULT_BUTTON_SIZE,
+  left: EDGE_OFFSET,
+  top: EDGE_OFFSET,
+  snapSide: 'left' as SnapSide,
+})
+
+const dragState = ref({
+  pointerId: -1,
+  active: false,
+  moved: false,
+  suppressClick: false,
+  startX: 0,
+  startY: 0,
+  startLeft: 0,
+  startTop: 0,
+})
+
+const buttonStyle = computed<CSSProperties>(() => ({
+  left: buttonState.value.initialized
+    ? `${buttonState.value.left}px`
+    : `${EDGE_OFFSET}px`,
+  right: buttonState.value.initialized
+    ? 'auto'
+    : 'auto',
+  top: buttonState.value.initialized
+    ? `${buttonState.value.top}px`
+    : 'auto',
+  bottom: buttonState.value.initialized
+    ? 'auto'
+    : `${EDGE_OFFSET}px`,
+  transition: dragState.value.active ? 'none' : 'left 200ms ease, top 200ms ease',
+  willChange: 'left, top',
+}))
+
+function getButtonElement() {
+  const el = buttonRef.value?.$el
+  return el instanceof HTMLElement ? el : null
+}
+
+function clamp(value: number, min: number, max: number) {
+  return Math.min(Math.max(value, min), max)
+}
+
+function getViewportBounds() {
+  return {
+    minLeft: EDGE_OFFSET,
+    maxLeft: Math.max(EDGE_OFFSET, window.innerWidth - buttonState.value.width - EDGE_OFFSET),
+    minTop: EDGE_OFFSET,
+    maxTop: Math.max(EDGE_OFFSET, window.innerHeight - buttonState.value.height - EDGE_OFFSET),
+  }
+}
+
+function syncButtonMetrics() {
+  const rect = getButtonElement()?.getBoundingClientRect()
+  if (!rect) {
+    return
+  }
+  buttonState.value.width = rect.width || DEFAULT_BUTTON_SIZE
+  buttonState.value.height = rect.height || DEFAULT_BUTTON_SIZE
+}
+
+function setButtonPosition(left = buttonState.value.left, top = buttonState.value.top) {
+  const bounds = getViewportBounds()
+  buttonState.value.left = clamp(left, bounds.minLeft, bounds.maxLeft)
+  buttonState.value.top = clamp(top, bounds.minTop, bounds.maxTop)
+}
+
+function snapToSide(side: SnapSide) {
+  const bounds = getViewportBounds()
+  buttonState.value.snapSide = side
+  buttonState.value.left = side === 'left' ? bounds.minLeft : bounds.maxLeft
+  buttonState.value.top = clamp(buttonState.value.top, bounds.minTop, bounds.maxTop)
+}
+
+function syncPositionToViewport() {
+  syncButtonMetrics()
+  const bounds = getViewportBounds()
+  buttonState.value.top = clamp(buttonState.value.top, bounds.minTop, bounds.maxTop)
+  buttonState.value.left = buttonState.value.snapSide === 'right'
+    ? bounds.maxLeft
+    : clamp(buttonState.value.left, bounds.minLeft, bounds.maxLeft)
+}
+
+async function initializeButtonPosition() {
+  if (appSettingsStore.mode !== 'mobile') {
+    return
+  }
+
+  await nextTick()
+  syncButtonMetrics()
+  if (!getButtonElement()) {
+    return
+  }
+
+  if (!buttonState.value.initialized) {
+    const bounds = getViewportBounds()
+    buttonState.value.snapSide = 'left'
+    buttonState.value.left = bounds.minLeft
+    buttonState.value.top = bounds.maxTop
+    buttonState.value.initialized = true
+  }
+
+  setButtonPosition()
+}
+
+function handlePointerDown(event: PointerEvent) {
+  if (!event.isPrimary || (event.pointerType === 'mouse' && event.button !== 0)) {
+    return
+  }
+
+  const target = event.currentTarget
+  if (!(target instanceof HTMLElement)) {
+    return
+  }
+
+  syncButtonMetrics()
+  dragState.value.pointerId = event.pointerId
+  dragState.value.active = true
+  dragState.value.moved = false
+  dragState.value.startX = event.clientX
+  dragState.value.startY = event.clientY
+  dragState.value.startLeft = buttonState.value.left
+  dragState.value.startTop = buttonState.value.top
+  target.setPointerCapture?.(event.pointerId)
+}
+
+function handlePointerMove(event: PointerEvent) {
+  if (!dragState.value.active || dragState.value.pointerId !== event.pointerId) {
+    return
+  }
+
+  const deltaX = event.clientX - dragState.value.startX
+  const deltaY = event.clientY - dragState.value.startY
+
+  if (!dragState.value.moved && Math.hypot(deltaX, deltaY) < DRAG_THRESHOLD) {
+    return
+  }
+
+  dragState.value.moved = true
+  setButtonPosition(dragState.value.startLeft + deltaX, dragState.value.startTop + deltaY)
+}
+
+function finishDrag(target?: EventTarget | null) {
+  const pointerId = dragState.value.pointerId
+  const shouldSuppressClick = dragState.value.moved
+
+  dragState.value.pointerId = -1
+  dragState.value.active = false
+  dragState.value.moved = false
+
+  if (target instanceof HTMLElement && pointerId >= 0 && target.hasPointerCapture?.(pointerId)) {
+    target.releasePointerCapture(pointerId)
+  }
+
+  if (shouldSuppressClick) {
+    const nextSide: SnapSide = buttonState.value.left + buttonState.value.width / 2 <= window.innerWidth / 2 ? 'left' : 'right'
+    snapToSide(nextSide)
+  }
+
+  dragState.value.suppressClick = shouldSuppressClick
+}
+
+function handlePointerUp(event: PointerEvent) {
+  if (dragState.value.pointerId !== event.pointerId) {
+    return
+  }
+  finishDrag(event.currentTarget)
+}
+
+function handlePointerCancel(event: PointerEvent) {
+  if (dragState.value.pointerId !== event.pointerId) {
+    return
+  }
+  finishDrag(event.currentTarget)
+}
+
+function handleLostPointerCapture(event: PointerEvent) {
+  if (dragState.value.active && dragState.value.pointerId === event.pointerId) {
+    finishDrag(event.currentTarget)
+  }
+}
+
+function handleClick() {
+  if (dragState.value.suppressClick) {
+    dragState.value.suppressClick = false
+    return
+  }
+  appSettingsStore.toggleSidebarCollapse()
+}
+
+function handleViewportResize() {
+  if (appSettingsStore.mode !== 'mobile' || !buttonState.value.initialized) {
+    return
+  }
+  syncPositionToViewport()
+}
+
+watch(() => appSettingsStore.mode, async (mode) => {
+  if (mode === 'mobile') {
+    await initializeButtonPosition()
+    return
+  }
+
+  dragState.value.pointerId = -1
+  dragState.value.active = false
+  dragState.value.moved = false
+}, {
+  immediate: true,
+})
+
+onMounted(() => {
+  window.addEventListener('resize', handleViewportResize, { passive: true })
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleViewportResize)
+})
+</script>
+
+<template>
+  <FaButton
+    v-if="appSettingsStore.mode === 'mobile' && !appSettingsStore.settings.topbar.toolbar"
+    ref="buttonRef"
+    variant="outline"
+    size="icon"
+    class="rounded-full size-10 select-none shadow-sm fixed z-1008 touch-none"
+    :class="{ 'cursor-grabbing': dragState.active, 'cursor-grab': !dragState.active }"
+    :style="buttonStyle"
+    @pointerdown="handlePointerDown"
+    @pointermove="handlePointerMove"
+    @pointerup="handlePointerUp"
+    @pointercancel="handlePointerCancel"
+    @lostpointercapture="handleLostPointerCapture"
+    @click="handleClick"
+  >
+    <FaIcon name="app-toolbar-collapse" class="size-4 rotate-180" />
+  </FaButton>
+</template>
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { globalHotkeyBindings } from '@/hotkeys/registry'
+import { hotkeyBindings } from '@/hotkeys'
 import eventBus from '@/utils/eventBus'

 defineOptions({
@@ -11,10 +11,10 @@ const hotkeyContext = {
  settings: appSettingsStore.settings,
 }

-const groupTitleMap = {
-  global: '全局',
-  nav: '主导航',
-  tabbar: '标签栏',
+const helpGroupMeta = {
+  global: { title: '全局', order: 10 },
+  nav: { title: '主导航', order: 20 },
+  tabbar: { title: '标签栏', order: 30 },
 } as const

 const itemTitleMap: Record<string, string> = {
@@ -32,42 +32,52 @@ const itemTitleMap: Record<string, string> = {
 const isShow = ref(false)

 const helpGroups = computed(() => {
-  const groups = [
-    { id: 'global', title: groupTitleMap.global },
-    { id: 'nav', title: groupTitleMap.nav },
-    { id: 'tabbar', title: groupTitleMap.tabbar },
-  ] as const
+  const groups = new Map<string, {
+    id: string
+    title: string
+    order: number
+    items: {
+      id: string
+      title: string
+      order: number
+      displayKeys: string[]
+    }[]
+  }>()

-  return groups.map((group) => {
-    const items = globalHotkeyBindings
-      .filter(binding => binding.help?.group === group.id)
-      .filter((binding) => {
-        if (!binding.help) {
-          return false
-        }
-        if (binding.help.visible) {
-          return binding.help.visible(hotkeyContext)
-        }
-        return true
-      })
-      .sort((a, b) => (a.help?.order ?? 0) - (b.help?.order ?? 0))
-      .map((binding) => {
-        const displayKeys = appSettingsStore.os === 'mac' && binding.help?.displayKeys.mac
-          ? binding.help.displayKeys.mac
-          : binding.help?.displayKeys.default ?? []
-
-        return {
-          id: binding.id,
-          title: binding.help?.titleKey ? itemTitleMap[binding.help.titleKey] : '',
-          displayKeys,
-        }
-      })
-
-    return {
-      ...group,
-      items,
+  hotkeyBindings.forEach((binding) => {
+    const help = binding.help
+    if (!help) {
+      return
    }
-  }).filter(group => group.items.length > 0)
+    if (help.visible && !help.visible(hotkeyContext)) {
+      return
+    }
+
+    const meta = helpGroupMeta[help.group as keyof typeof helpGroupMeta]
+    const group = groups.get(help.group) ?? {
+      id: help.group,
+      title: help.groupTitleKey ? itemTitleMap[help.groupTitleKey] ?? help.groupTitleKey : meta?.title ?? help.group,
+      order: meta?.order ?? 100,
+      items: [],
+    }
+
+    group.items.push({
+      id: binding.id,
+      title: itemTitleMap[help.titleKey] ?? help.titleKey,
+      order: help.order ?? 0,
+      displayKeys: appSettingsStore.os === 'mac' && help.displayKeys.mac
+        ? help.displayKeys.mac
+        : help.displayKeys.default,
+    })
+    groups.set(help.group, group)
+  })
+
+  return Array.from(groups.values())
+    .map(group => ({
+      ...group,
+      items: [...group.items].sort((a, b) => a.order - b.order),
+    }))
+    .sort((a, b) => a.order - b.order)
 })

 onMounted(() => {
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useHotkeyBindings } from '@/hotkeys/useHotkeys'
+import { useHotkeyBindings } from '@/hotkeys'
 import { useSlots } from '@/slots'
 import Logo from '../Logo/index.vue'

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { TabbarRecordRaw } from '@fantastic-admin/types'
 import { useMagicKeys } from '@vueuse/core'
-import { useHotkeyBindings } from '@/hotkeys/useHotkeys'
+import { useHotkeyBindings } from '@/hotkeys'
 import { useSlots } from '@/slots'

 defineOptions({
@@ -72,13 +72,13 @@ watch(() => route, (val) => {
 function tabbarScrollTip() {
  if (tabContainerRef.value?.$el.clientWidth > (tabsRef.value?.ref?.$el.clientWidth ?? 0) && !localStorage.has('tabbarScrollTip')) {
    localStorage.setItem('tabbarScrollTip', '')
-    const tips = faToast.info('温馨提示', {
+    const tips = useFaToast().info('温馨提示', {
      description: '标签栏数量超过展示区域范围，可以将鼠标移到标签栏上，通过鼠标滚轮滑动浏览',
      position: 'top-center',
      duration: Infinity,
      action: {
        label: '知道了',
-        onClick: () => faToast.dismiss(tips),
+        onClick: () => useFaToast().dismiss(tips),
      },
    })
  }
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useHotkeyBindings } from '@/hotkeys/useHotkeys'
+import { useHotkeyBindings } from '@/hotkeys'
 import Search from './search.vue'

 defineOptions({
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { MenuRecordRaw } from '@fantastic-admin/types'
 import { match } from 'pinyin-pro'
-import { useHotkeyBindings } from '@/hotkeys/useHotkeys'
+import { useHotkeyBindings } from '@/hotkeys'
 import Breadcrumb from '@/layouts/components/Breadcrumb/index.vue'
 import BreadcrumbItem from '@/layouts/components/Breadcrumb/item.vue'
 import { resolveRoutePath } from '@/utils'
@@ -8,13 +8,15 @@ const mainPage = useAppPage()

 const isAnimating = ref(false)

-function handleClick() {
-  isAnimating.value = true
-  mainPage.reload()
-}
-
-function handleCtrlClick() {
-  location.reload()
+function handleClick(event: MouseEvent) {
+  if (event.ctrlKey && !event.altKey && !event.metaKey && !event.shiftKey) {
+    location.reload()
+    return
+  }
+  if (!event.ctrlKey && !event.altKey && !event.metaKey && !event.shiftKey) {
+    isAnimating.value = true
+    mainPage.reload()
+  }
 }
 </script>

@@ -28,7 +30,7 @@ function handleCtrlClick() {
        <p>可切换为浏览器原生刷新</p>
      </div>
    </template>
-    <FaButton variant="ghost" size="icon-sm" @click.exact="handleClick" @click.ctrl.exact="handleCtrlClick" @animationend="isAnimating = false">
+    <FaButton variant="ghost" size="icon-sm" @click="handleClick" @animationend="isAnimating = false">
      <FaIcon name="i-iconoir:refresh-double" class="size-4" :class="{ animation: isAnimating }" />
    </FaButton>
  </FaTooltip>
@@ -11,7 +11,7 @@ const appSettingsStore = useAppSettingsStore()

 <template>
  <div class="flex items-center">
-    <FaButton v-if="appSettingsStore.mode === 'mobile'" variant="ghost" size="icon" class="h-9 w-9 -rotate-z-180" @click="appSettingsStore.toggleSidebarCollapse()">
+    <FaButton v-if="appSettingsStore.mode === 'mobile'" variant="ghost" size="icon" class="size-9" @click="appSettingsStore.toggleSidebarCollapse()">
      <FaIcon name="app-toolbar-collapse" class="size-4" />
    </FaButton>
    <Component :is="useSlots('toolbar-start')" />
@@ -6,9 +6,9 @@ defineOptions({
 })

 const route = useRoute()
-const { copy, copied } = useClipboard()
+const { copy, copied } = useClipboard({ legacy: true })
 watch(copied, (val) => {
-  val && faToast.success('复制成功')
+  val && useFaToast().success('复制成功')
 })

 function open() {
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { useElementSize, useScroll } from '@vueuse/core'
-import { useHotkeyBindings } from '@/hotkeys/useHotkeys'
+import { useHotkeyBindings } from '@/hotkeys'
 import { useSlots } from '@/slots'
 import { cn } from '@/utils'
 import eventBus from '@/utils/eventBus'
 import AppSetting from './components/AppSetting/index.vue'
+import FloatingSidebarMenuButton from './components/FloatingSidebarMenuButton/index.vue'
 import Header from './components/Header/index.vue'
 import Hotkeys from './components/Hotkeys/index.vue'
 import MainSidebar from './components/MainSidebar/index.vue'
@@ -158,6 +159,7 @@ const enableAppSetting = import.meta.env.VITE_APP_SETTING
      </div>
      <!-- 移动端下，展开侧边栏时的遮罩层 -->
      <div :class="cn('invisible fixed inset-0 z-1009 bg-black/50 op-0 backdrop-blur-sm transition-opacity', { 'op-100 visible': appSettingsStore.mode === 'mobile' && !appSettingsStore.settings.menu.subMenuCollapse })" @click="appSettingsStore.toggleSidebarCollapse()" />
+      <FloatingSidebarMenuButton />
      <div class="main-container pb-[calc(var(--g-slots-layout-bottom-height)+var(--g-main-container-padding-bottom,0px))] pt-[calc(var(--g-slots-layout-top-height)+var(--g-header-actual-height)+var(--g-topbar-actual-height))]">
        <div
          class="fixed-content-around-area w-full inset-t-[calc(var(--g-slots-layout-top-height)+var(--g-header-actual-height))] inset-inline-1/2 fixed z-1005" :style="{
@@ -110,7 +110,7 @@ function extendClose(router: Router) {
 }

 declare module 'vue-router' {
-  interface Router {
+  interface _RouterClassic {
    /**
     * 本方法为框架扩展语法，会同时关闭当前标签页
     *
@@ -1,29 +0,0 @@
-import type { RouteRecordRaw } from 'vue-router'
-
-function Layout() {
-  return import('@/layouts/index.vue')
-}
-
-const routes: RouteRecordRaw = {
-  path: '/ant_design_vue_example',
-  component: Layout,
-  meta: {
-    title: 'Ant Design Vue',
-    icon: 'https://antdv.com/favicon.ico',
-    menu: false,
-  },
-  children: [
-    {
-      path: '',
-      name: 'antDesignVueExample',
-      component: () => import('@/views/ant_design_vue_example/index.vue'),
-      meta: {
-        title: 'Ant Design Vue',
-        menu: false,
-        breadcrumb: false,
-      },
-    },
-  ],
-}
-
-export default routes
@@ -5,20 +5,19 @@ function Layout() {
 }

 const routes: RouteRecordRaw = {
-  path: '/naive_ui_example',
+  path: '/ui_example',
  component: Layout,
  meta: {
-    title: 'Naive UI',
-    icon: 'i-logos:naiveui',
+    title: 'UI',
    menu: false,
  },
  children: [
    {
      path: '',
-      name: 'naiveUiExample',
-      component: () => import('@/views/naive_ui_example/index.vue'),
+      name: 'uiExample',
+      component: () => import('@/views/ui_example/index.vue'),
      meta: {
-        title: 'Naive UI',
+        title: 'UI',
        menu: false,
        breadcrumb: false,
      },
@@ -1,8 +1,8 @@
 import type { RouteRecordMainRaw } from '@fantastic-admin/types'
 import type { RouteRecordRaw } from 'vue-router'
 import pinia from '@/store'
-import AntDesignVueExample from './modules/ant.design.vue.example'
 import MultilevelMenuExample from './modules/multilevel.menu.example'
+import UiExample from './modules/ui.example'

 // 固定路由（默认路由）
 const constantRoutes: RouteRecordRaw[] = [
@@ -72,7 +72,7 @@ const asyncRoutes: RouteRecordMainRaw[] = [
      icon: 'i-whh:jqueryui',
    },
    children: [
-      AntDesignVueExample,
+      UiExample,
    ],
  },
 ]
@@ -94,16 +94,6 @@ export const useAppAccountStore = defineStore('appAccount', () => {
    await apiApp.passwordEdit(data)
  }

-  // 锁屏
-  function lock() {
-    localStorage.removeItem('token')
-  }
-
-  // 解锁
-  function unlock() {
-    localStorage.setItem('token', token.value)
-  }
-
  return {
    token,
    account,
@@ -115,7 +105,5 @@ export const useAppAccountStore = defineStore('appAccount', () => {
    requestLogout,
    getPermissions,
    editPassword,
-    lock,
-    unlock,
  }
 })
@@ -180,7 +180,7 @@ export const useAppMenuStore = defineStore(
        if (item.children) {
          return isPathInMenus(item.children, path)
        }
-        return path.indexOf(`${item.path}/`) === 0 || path === item.path
+        return path.startsWith(`${item.path}/`) || path === item.path
      })
      return flag
    }
@@ -1,5 +1,7 @@
 /* eslint-disable */
 /* prettier-ignore */
+/* oxlint-disable */
+/* oxfmt-ignore */
 // @ts-nocheck
 // noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
@@ -16,7 +18,6 @@ declare global {
  const defineComponent: typeof import('vue').defineComponent
  const defineStore: typeof import('pinia').defineStore
  const effectScope: typeof import('vue').effectScope
-  const faToast: typeof import('@fantastic-admin/components').faToast
  const getActivePinia: typeof import('pinia').getActivePinia
  const getCurrentInstance: typeof import('vue').getCurrentInstance
  const getCurrentScope: typeof import('vue').getCurrentScope
@@ -84,10 +85,11 @@ declare global {
  const useFaDrawer: typeof import('@fantastic-admin/components').useFaDrawer
  const useFaImagePreview: typeof import('@fantastic-admin/components').useFaImagePreview
  const useFaModal: typeof import('@fantastic-admin/components').useFaModal
+  const useFaToast: typeof import('@fantastic-admin/components').useFaToast
  const useId: typeof import('vue').useId
  const useLink: typeof import('vue-router').useLink
  const useModel: typeof import('vue').useModel
-  const usePagination: typeof import('../composables/pagination').usePagination
+  const usePagination: typeof import('@fantastic-admin/composables').usePagination
  const useRoute: typeof import('vue-router').useRoute
  const useRouter: typeof import('vue-router').useRouter
  const useSlots: typeof import('vue').useSlots
@@ -19,18 +19,24 @@ declare module 'vue' {
    AppNotAllowed: typeof import('./../components/AppNotAllowed/index.vue')['default']
    AppNotSupportedMobile: typeof import('./../components/AppNotSupportedMobile/index.vue')['default']
    AppSystemInfo: typeof import('./../components/AppSystemInfo/index.vue')['default']
+    FaAlert: typeof import('@fantastic-admin/components')['FaAlert']
    FaAvatar: typeof import('@fantastic-admin/components')['FaAvatar']
+    FaBadge: typeof import('@fantastic-admin/components')['FaBadge']
    FaButton: typeof import('@fantastic-admin/components')['FaButton']
    FaButtonGroup: typeof import('@fantastic-admin/components')['FaButtonGroup']
    FaCard: typeof import('@fantastic-admin/components')['FaCard']
    FaCheckbox: typeof import('@fantastic-admin/components')['FaCheckbox']
+    FaCheckboxGroup: typeof import('@fantastic-admin/components')['FaCheckboxGroup']
    FaCollapsible: typeof import('@fantastic-admin/components')['FaCollapsible']
    FaContextMenu: typeof import('@fantastic-admin/components')['FaContextMenu']
+    FaDescriptions: typeof import('@fantastic-admin/components')['FaDescriptions']
    FaDivider: typeof import('@fantastic-admin/components')['FaDivider']
    FaDrawer: typeof import('@fantastic-admin/components')['FaDrawer']
    FaDropdown: typeof import('@fantastic-admin/components')['FaDropdown']
    FaFileUpload: typeof import('@fantastic-admin/components')['FaFileUpload']
    FaFixedBar: typeof import('@fantastic-admin/components')['FaFixedBar']
+    FaForm: typeof import('@fantastic-admin/components')['FaForm']
+    FaFormItem: typeof import('@fantastic-admin/components')['FaFormItem']
    FaHoverCard: typeof import('@fantastic-admin/components')['FaHoverCard']
    FaIcon: typeof import('@fantastic-admin/components')['FaIcon']
    FaImagePreview: typeof import('@fantastic-admin/components')['FaImagePreview']
@@ -48,12 +54,15 @@ declare module 'vue' {
    FaPasswordStrength: typeof import('@fantastic-admin/components')['FaPasswordStrength']
    FaPopover: typeof import('@fantastic-admin/components')['FaPopover']
    FaProgress: typeof import('@fantastic-admin/components')['FaProgress']
+    FaRadioGroup: typeof import('@fantastic-admin/components')['FaRadioGroup']
    FaScrollArea: typeof import('@fantastic-admin/components')['FaScrollArea']
    FaSearchBar: typeof import('@fantastic-admin/components')['FaSearchBar']
    FaSelect: typeof import('@fantastic-admin/components')['FaSelect']
    FaSlider: typeof import('@fantastic-admin/components')['FaSlider']
    FaSwitch: typeof import('@fantastic-admin/components')['FaSwitch']
+    FaTable: typeof import('@fantastic-admin/components')['FaTable']
    FaTabs: typeof import('@fantastic-admin/components')['FaTabs']
+    FaTag: typeof import('@fantastic-admin/components')['FaTag']
    FaTextarea: typeof import('@fantastic-admin/components')['FaTextarea']
    FaToast: typeof import('@fantastic-admin/components')['FaToast']
    FaTooltip: typeof import('@fantastic-admin/components')['FaTooltip']
@@ -70,18 +79,24 @@ declare global {
  const AppNotAllowed: typeof import('./../components/AppNotAllowed/index.vue')['default']
  const AppNotSupportedMobile: typeof import('./../components/AppNotSupportedMobile/index.vue')['default']
  const AppSystemInfo: typeof import('./../components/AppSystemInfo/index.vue')['default']
+  const FaAlert: typeof import('@fantastic-admin/components')['FaAlert']
  const FaAvatar: typeof import('@fantastic-admin/components')['FaAvatar']
+  const FaBadge: typeof import('@fantastic-admin/components')['FaBadge']
  const FaButton: typeof import('@fantastic-admin/components')['FaButton']
  const FaButtonGroup: typeof import('@fantastic-admin/components')['FaButtonGroup']
  const FaCard: typeof import('@fantastic-admin/components')['FaCard']
  const FaCheckbox: typeof import('@fantastic-admin/components')['FaCheckbox']
+  const FaCheckboxGroup: typeof import('@fantastic-admin/components')['FaCheckboxGroup']
  const FaCollapsible: typeof import('@fantastic-admin/components')['FaCollapsible']
  const FaContextMenu: typeof import('@fantastic-admin/components')['FaContextMenu']
+  const FaDescriptions: typeof import('@fantastic-admin/components')['FaDescriptions']
  const FaDivider: typeof import('@fantastic-admin/components')['FaDivider']
  const FaDrawer: typeof import('@fantastic-admin/components')['FaDrawer']
  const FaDropdown: typeof import('@fantastic-admin/components')['FaDropdown']
  const FaFileUpload: typeof import('@fantastic-admin/components')['FaFileUpload']
  const FaFixedBar: typeof import('@fantastic-admin/components')['FaFixedBar']
+  const FaForm: typeof import('@fantastic-admin/components')['FaForm']
+  const FaFormItem: typeof import('@fantastic-admin/components')['FaFormItem']
  const FaHoverCard: typeof import('@fantastic-admin/components')['FaHoverCard']
  const FaIcon: typeof import('@fantastic-admin/components')['FaIcon']
  const FaImagePreview: typeof import('@fantastic-admin/components')['FaImagePreview']
@@ -99,12 +114,15 @@ declare global {
  const FaPasswordStrength: typeof import('@fantastic-admin/components')['FaPasswordStrength']
  const FaPopover: typeof import('@fantastic-admin/components')['FaPopover']
  const FaProgress: typeof import('@fantastic-admin/components')['FaProgress']
+  const FaRadioGroup: typeof import('@fantastic-admin/components')['FaRadioGroup']
  const FaScrollArea: typeof import('@fantastic-admin/components')['FaScrollArea']
  const FaSearchBar: typeof import('@fantastic-admin/components')['FaSearchBar']
  const FaSelect: typeof import('@fantastic-admin/components')['FaSelect']
  const FaSlider: typeof import('@fantastic-admin/components')['FaSlider']
  const FaSwitch: typeof import('@fantastic-admin/components')['FaSwitch']
+  const FaTable: typeof import('@fantastic-admin/components')['FaTable']
  const FaTabs: typeof import('@fantastic-admin/components')['FaTabs']
+  const FaTag: typeof import('@fantastic-admin/components')['FaTag']
  const FaTextarea: typeof import('@fantastic-admin/components')['FaTextarea']
  const FaToast: typeof import('@fantastic-admin/components')['FaToast']
  const FaTooltip: typeof import('@fantastic-admin/components')['FaTooltip']
@@ -33,12 +33,12 @@ const products = ref([
    ],
  },
  {
-    name: 'One-step-admin',
-    tagline: '干啥都快人一步的 Vue 中后台系统框架',
+    name: 'One-step Console',
+    tagline: '像导播一样编排你的工作现场',
    logo: 'https://one-step-admin.hurui.me/logo.png',
    url: 'https://one-step-admin.hurui.me',
    images: [
-      'https://one-step-admin.hurui.me/preview1.png',
+      'https://one-step-admin.hurui.me/hero_preview.png',
    ],
  },
 ])
@@ -193,46 +193,48 @@ function open(url: string) {
            class="group card-enter border rounded-xl bg-neutral-950/[.012] dark:bg-white/5"
            :style="{ animationDelay: `${i * 80}ms` }"
          >
-            <div class="flex flex-col h-full">
-              <div class="p-6 border-b flex gap-4 items-start">
-                <img :src="product.logo" :alt="product.name" class="shrink-0 h-10 w-10 object-contain">
-                <div>
-                  <div class="text-sm tracking-tight font-semibold">
-                    {{ product.name }}
-                  </div>
-                  <div class="text-xs text-muted-foreground leading-relaxed mt-1">
-                    {{ product.tagline }}
+            <div>
+              <div class="flex flex-col h-full">
+                <div class="p-6 border-b flex gap-4 items-start">
+                  <img :src="product.logo" :alt="product.name" class="shrink-0 h-10 w-10 object-contain">
+                  <div>
+                    <div class="text-sm tracking-tight font-semibold">
+                      {{ product.name }}
+                    </div>
+                    <div class="text-xs text-muted-foreground leading-relaxed mt-1">
+                      {{ product.tagline }}
+                    </div>
                  </div>
                </div>
-              </div>
-              <div class="p-6 flex-col-start flex-1">
-                <div v-if="product.features" class="mb-5 flex-1">
-                  <ul class="space-y-1.5">
-                    <li
-                      v-for="feature in product.features"
-                      :key="feature"
-                      class="text-xs text-muted-foreground flex gap-2 items-start"
+                <div class="p-6 flex-col-start flex-1">
+                  <div v-if="product.features" class="mb-5 flex-1">
+                    <ul class="space-y-1.5">
+                      <li
+                        v-for="feature in product.features"
+                        :key="feature"
+                        class="text-xs text-muted-foreground flex gap-2 items-start"
+                      >
+                        <span class="text-primary mt-0.5 shrink-0">·</span>
+                        <span>{{ feature }}</span>
+                      </li>
+                    </ul>
+                  </div>
+                  <div v-if="product.images" class="mb-5 border rounded-lg flex-1 overflow-hidden">
+                    <img
+                      :src="product.images[0]"
+                      :alt="product.name"
+                      class="opacity-50 h-full w-full transition-opacity duration-500 object-cover group-hover-opacity-100"
                    >
-                      <span class="text-primary mt-0.5 shrink-0">·</span>
-                      <span>{{ feature }}</span>
-                    </li>
-                  </ul>
-                </div>
-                <div v-if="product.images" class="mb-5 border rounded-lg flex-1 overflow-hidden">
-                  <img
-                    :src="product.images[0]"
-                    :alt="product.name"
-                    class="opacity-50 h-full w-full transition-opacity duration-500 object-cover group-hover-opacity-100"
+                  </div>
+                  <FaButton
+                    variant="link"
+                    size="sm"
+                    class="mt-auto active-scale-98"
+                    @click="open(product.url)"
                  >
+                    探索 →
+                  </FaButton>
                </div>
-                <FaButton
-                  variant="link"
-                  size="sm"
-                  class="mt-auto active-scale-98"
-                  @click="open(product.url)"
-                >
-                  探索 →
-                </FaButton>
              </div>
            </div>
          </div>
@@ -56,7 +56,13 @@ function open(url: string) {

 <template>
  <div>
-    <FaPageHeader title="Ant Design Vue" description="框架内置 Ant Design Vue 组件库，本页仅展示部分组件，更多组件及使用说明请查看 Ant Design Vue 官网。">
+    <FaPageHeader description="框架提供已集成 Ant Design Vue 组件库的模板，支持开箱即用。本页仅展示部分组件，更多组件及使用说明请查看 Ant Design Vue 官网。">
+      <template #title>
+        <div class="flex gap-2 items-center">
+          <FaIcon name="https://antdv.com/favicon.ico" />
+          Ant Design Vue
+        </div>
+      </template>
      <FaButton variant="outline" @click="open('https://antdv.com/components/overview-cn')">
        <FaIcon name="i-ant-design:link-outlined" />
        Ant Design Vue 官网
@@ -4,10 +4,9 @@ import process from 'node:process'
 import dayjs from 'dayjs'
 import { defineConfig, loadEnv } from 'vite'
 import { parseLoadedEnv } from 'vite-plugin-env-parse'
-import pkg from './package.json'
-import createVitePlugins from './vite/plugins'
+import pkg from './package.json' with { type: 'json' }
+import createVitePlugins from './vite/plugins.ts'

-// https://vitejs.dev/config/
 export default defineConfig(({ mode, command }) => {
  const env = parseLoadedEnv(loadEnv(mode, process.cwd()))
  // 全局 scss 资源
@@ -47,12 +46,15 @@ export default defineConfig(({ mode, command }) => {
    },
    plugins: createVitePlugins(mode, command === 'build'),
    optimizeDeps: {
-      exclude: ['@fantastic-admin/components'],
+      exclude: [
+        '@fantastic-admin/components',
+        '@fantastic-admin/composables',
+      ],
    },
    resolve: {
      alias: {
-        '@': path.resolve(__dirname, 'src'),
-        '#': path.resolve(__dirname, 'src/types'),
+        '@': path.resolve(import.meta.dirname, 'src'),
+        '#': path.resolve(import.meta.dirname, 'src/types'),
      },
    },
    css: {
@@ -1,7 +1,8 @@
 import type { PluginOption } from 'vite'
 import process from 'node:process'
-import { FantasticAutoImports, FantasticComponentsResolver, FantasticComponentsType } from '@fantastic-admin/components/resolver'
-import { createFantasticAdminCopyrightPlugins } from '@fantastic-admin/copyright'
+import { ComponentsAutoImports as FantasticAdminComponentsAutoImports, ComponentsResolver as FantasticAdminComponentsResolver, ComponentsType as FantasticAdminComponentsType } from '@fantastic-admin/components/resolver'
+import { ComposablesAutoImports as FantasticAdminComposablesAutoImports } from '@fantastic-admin/composables/resolver'
+import { createCopyrightPlugins as createFantasticAdminCopyrightPlugins } from '@fantastic-admin/copyright'
 import VitePluginSvgSpritemap from '@spiriit/vite-plugin-svg-spritemap'
 import vueLegacy from '@vitejs/plugin-legacy'
 import vue from '@vitejs/plugin-vue'
@@ -37,6 +38,7 @@ export default function createVitePlugins(mode: string, isBuild = false) {
      launchEditor: viteEnv.VITE_LAUNCH_EDITOR,
    }),

+    // https://github.com/yue1123/vite-plugin-env-parse
    envParse({
      dtsPath: 'src/types/env.d.ts',
    }),
@@ -47,7 +49,8 @@ export default function createVitePlugins(mode: string, isBuild = false) {
        'vue',
        'vue-router',
        'pinia',
-        FantasticAutoImports,
+        FantasticAdminComponentsAutoImports,
+        FantasticAdminComposablesAutoImports,
      ],
      dts: './src/types/auto-imports.d.ts',
      dirs: [
@@ -63,10 +66,10 @@ export default function createVitePlugins(mode: string, isBuild = false) {
      ],
      dts: './src/types/components.d.ts',
      resolvers: [
-        FantasticComponentsResolver(),
+        FantasticAdminComponentsResolver(),
      ],
      types: [
-        FantasticComponentsType,
+        FantasticAdminComponentsType,
      ],
    }),

@@ -78,9 +81,10 @@ export default function createVitePlugins(mode: string, isBuild = false) {
    // https://github.com/condorheroblog/vite-plugin-fake-server
    vitePluginFakeServer({
      logger: !isBuild,
-      include: 'src/api/modules',
+      include: 'src/api/fake_modules',
      enableProd: isBuild && viteEnv.VITE_BUILD_FAKE,
    }),
+
    // https://github.com/nonzzz/vite-plugin-compression
    viteEnv.VITE_BUILD_COMPRESS && compression({
      exclude: [/\.(br)$/, /\.(gz)$/],
@@ -105,7 +109,6 @@ export default function createVitePlugins(mode: string, isBuild = false) {
    (() => {
      const moduleId = 'virtual:fantastic-admin/turbo-console'
      const resolvedModuleId = `\0${moduleId}`
-
      return {
        name: 'vite-plugin-turbo-console-bridge',
        resolveId(id) {
@@ -9,11 +9,13 @@
    "serve": "http-server ./dist -o",
    "serve:test": "http-server ./dist-test -o",
    "svgo": "svgo -f src/assets/icons",
-    "generate:icons": "tsx ./scripts/generate.icons.ts",
+    "generate:icons": "fa-iconify-tools",
    "lint": "vue-tsc -b"
  },
  "dependencies": {
    "@fantastic-admin/components": "workspace:*",
+    "@fantastic-admin/composables": "workspace:*",
+    "@fantastic-admin/hotkeys": "workspace:*",
    "@fantastic-admin/settings": "workspace:*",
    "@fantastic-admin/types": "workspace:*",
    "@vee-validate/zod": "catalog:",
@@ -27,8 +29,6 @@
    "dayjs": "catalog:",
    "eruda": "catalog:",
    "es-toolkit": "catalog:",
-    "hotkeys-js": "catalog:",
-    "lucide-vue-next": "catalog:",
    "mitt": "catalog:",
    "nprogress": "catalog:",
    "path-browserify": "catalog:",
@@ -49,9 +49,9 @@
    "zod": "catalog:"
  },
  "devDependencies": {
-    "@clack/prompts": "catalog:",
    "@faker-js/faker": "catalog:",
    "@fantastic-admin/copyright": "workspace:*",
+    "@fantastic-admin/iconify-tools": "workspace:*",
    "@iconify/vue": "catalog:",
    "@spiriit/vite-plugin-svg-spritemap": "catalog:",
    "@types/nprogress": "catalog:",
@@ -66,7 +66,6 @@
    "postcss-nested": "catalog:",
    "sass-embedded": "catalog:",
    "svgo": "catalog:",
-    "tsx": "catalog:",
    "unplugin-auto-import": "catalog:",
    "unplugin-turbo-console": "catalog:",
    "unplugin-vue-components": "catalog:",
@@ -1,108 +0,0 @@
-import { spawn } from 'node:child_process'
-import fs from 'node:fs'
-import path from 'node:path'
-import process from 'node:process'
-import * as p from '@clack/prompts'
-import { lookupCollection, lookupCollections } from '@iconify/json'
-
-// 拿到全部图标集的原始数据
-const raw = await lookupCollections()
-
-let lastChoose = fs.readFileSync(path.resolve(process.cwd(), 'src/iconify/index.json'), 'utf-8')
-lastChoose = JSON.parse(lastChoose)
-
-// 取出可使用的图标集数据用于选择，并按名称排序
-const collections = Object.entries(raw).map(([id, item]) => ({
-  ...item,
-  id,
-})).sort((a, b) => a.name.localeCompare(b.name))
-
-p.intro('图标集生成工具')
-
-/**
- * 分别会在对应目录下生成以下文件，其中(1)(3)用于离线下载并安装图标，(2)用于图标选择器使用
- * (1) src/iconify/index.json    记录用户交互信息
- * (2) src/iconify/data.json     包含多个图标集数据，仅记录图标名
- * (3) public/icons/*-raw.json   多个图标集的原始数据，独立存放，用于离线使用
- */
-const answers = await p.group(
-  {
-    collections: () =>
-      p.multiselect({
-        message: '请选择需要生成的图标集',
-        options: collections.map(item => ({
-          label: item.name,
-          value: item.id,
-          hint: `${item.total} 个图标`,
-        })),
-        initialValues: lastChoose.collections,
-      }),
-    isOfflineUse: () =>
-      p.confirm({
-        message: '是否需要离线使用',
-        initialValue: false,
-      }),
-  },
-  {
-    onCancel: () => {
-      p.cancel('操作已取消')
-      process.exit(0)
-    },
-  },
-)
-
-const spinner = p.spinner()
-spinner.start('正在生成图标集...')
-
-await fs.writeJSON(
-  path.resolve(process.cwd(), 'src/iconify/index.json'),
-  {
-    collections: answers.collections,
-    isOfflineUse: answers.isOfflineUse,
-  },
-)
-
-const outputDir = path.resolve(process.cwd(), 'public/icons')
-await fs.ensureDir(outputDir)
-await fs.emptyDir(outputDir)
-
-const collectionsMeta: object[] = []
-for (const info of answers.collections) {
-  const setData = await lookupCollection(info)
-
-  collectionsMeta.push({
-    prefix: setData.prefix,
-    info: setData.info,
-    icons: Object.keys(setData.icons),
-  })
-
-  const offlineFilePath = path.join(outputDir, `${info}-raw.json`)
-
-  if (answers.isOfflineUse) {
-    await fs.writeJSON(offlineFilePath, setData)
-  }
-}
-
-await fs.writeJSON(
-  path.resolve(process.cwd(), 'src/iconify/data.json'),
-  collectionsMeta,
-)
-
-// 使用 spawn 运行 eslint
-const eslint = spawn('eslint', ['src/iconify/data.json', 'src/iconify/index.json', '--cache', '--fix'], {
-  stdio: 'inherit',
-  shell: true,
-})
-
-eslint.on('error', (err) => {
-  p.log.error(`ESLint 执行失败: ${err.message}`)
-  process.exit(1)
-})
-
-eslint.on('close', (code) => {
-  if (code !== 0) {
-    p.log.error(`ESLint 执行失败，退出码: ${code}`)
-    process.exit(code)
-  }
-  spinner.stop('图标集生成完成！')
-})
@@ -51,7 +51,7 @@ function handleError(error: any) {
    useAppAccountStore().requestLogout()
  }
  else {
-    faToast.error('Error', {
+    useFaToast().error('Error', {
      description: error.message,
    })
  }
@@ -62,14 +62,15 @@ api.interceptors.response.use(
  (response) => {
    /**
     * 全局拦截请求发送后返回的数据，如果数据有报错则在这做全局的错误提示
-     * 假设返回数据格式为：{ status: 1, error: '', data: {} }
-     * 规则是当 status 为 1 时表示请求成功，为 0 时表示接口需要登录或者登录状态失效，需要重新登录
-     * 请求出错时 error 会返回错误信息
+     * 约定的数据格式：{ status: 1 | 0, error: string, data: object }
+     * status 只有两种状态，1 表示请求成功，0 表示接口需要登录或者登录状态失效，需要重新登录
+     * error 只有在请求出错时才会有值，表示错误信息
+     * data 只有在请求成功时才会有值，表示请求返回的数据
     */
    if (typeof response.data === 'object') {
      if (response.data.status === 1) {
-        if (response.data.error !== '') {
-          faToast.warning('Warning', {
+        if (response.data.error) {
+          useFaToast().warning('Warning', {
            description: response.data.error,
          })
          return Promise.reject(response.data)
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
 import * as z from 'zod'
-import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'

 defineOptions({
  name: 'EditPasswordForm',
@@ -12,32 +10,38 @@ const appAccountStore = useAppAccountStore()

 const loading = ref(false)

-const form = useForm({
-  validationSchema: toTypedSchema(
-    z.object({
-      password: z.string().min(1, '请输入原密码'),
-      newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
-      checkPassword: z.string().min(1, '请确认新密码'),
-    }).refine(data => data.newPassword === data.checkPassword, {
-      message: '两次输入的密码不一致',
-      path: ['checkPassword'],
-    }),
-  ),
-  initialValues: {
-    password: '',
-    newPassword: '',
-    checkPassword: '',
-  },
+interface EditPasswordModel {
+  password: string
+  newPassword: string
+  checkPassword: string
+}
+
+const model = ref<EditPasswordModel>({
+  password: '',
+  newPassword: '',
+  checkPassword: '',
 })
-const onSubmit = form.handleSubmit((values) => {
+
+const validationSchema = toTypedSchema(
+  z.object({
+    password: z.string().min(1, '请输入原密码'),
+    newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
+    checkPassword: z.string().min(1, '请确认新密码'),
+  }).refine(data => data.newPassword === data.checkPassword, {
+    message: '两次输入的密码不一致',
+    path: ['checkPassword'],
+  }),
+)
+
+function onSubmit(values: EditPasswordModel) {
  loading.value = true
  appAccountStore.editPassword(values).then(async () => {
-    faToast.success('模拟修改成功，请重新登录')
+    useFaToast().success('模拟修改成功，请重新登录')
    appAccountStore.logout()
  }).finally(() => {
    loading.value = false
  })
-})
+}
 </script>

 <template>
@@ -50,52 +54,31 @@ const onSubmit = form.handleSubmit((values) => {
        请输入原密码、新密码和确认密码
      </p>
    </div>
-    <form @submit="onSubmit">
-      <FormField v-slot="{ componentField, errors }" name="password">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="原密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FormField v-slot="{ componentField, errors }" name="newPassword">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="新密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FormField v-slot="{ componentField, errors }" name="checkPassword">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="确认密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
+    <FaForm :model="model" :validation-schema="validationSchema" @submit="onSubmit">
+      <FaFormItem name="password">
+        <FaInput type="password" placeholder="原密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaFormItem name="newPassword">
+        <FaInput type="password" placeholder="新密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaFormItem name="checkPassword">
+        <FaInput type="password" placeholder="确认密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
      <FaButton :loading="loading" size="lg" class="mt-8 w-full" type="submit">
        保存
      </FaButton>
-    </form>
+    </FaForm>
  </div>
 </template>
@@ -1,8 +1,7 @@
 <script setup lang="ts">
+import type { FormExpose } from '@fantastic-admin/components'
 import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
 import * as z from 'zod'
-import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'

 defineOptions({
  name: 'LoginForm',
@@ -26,19 +25,27 @@ const loading = ref(false)
 // 登录方式，default 账号密码登录，qrcode 扫码登录
 const type = ref<'default' | 'qrcode'>('default')

-const form = useForm({
-  validationSchema: toTypedSchema(z.object({
-    account: z.string().min(1, '请输入用户名'),
-    password: z.string().min(1, '请输入密码'),
-    remember: z.boolean(),
-  })),
-  initialValues: {
-    account: props.account ?? localStorage.getItem('login_account') ?? '',
-    password: '',
-    remember: localStorage.getItem('login_account') !== null,
-  },
+interface LoginModel {
+  account: string
+  password: string
+  remember: boolean
+}
+
+const formRef = useTemplateRef<FormExpose<LoginModel>>('formRef')
+
+const model = ref<LoginModel>({
+  account: props.account ?? localStorage.getItem('login_account') ?? '',
+  password: '',
+  remember: localStorage.getItem('login_account') !== null,
 })
-const onSubmit = form.handleSubmit((values) => {
+
+const validationSchema = toTypedSchema(z.object({
+  account: z.string().min(1, '请输入用户名'),
+  password: z.string().min(1, '请输入密码'),
+  remember: z.boolean(),
+}))
+
+function onSubmit(values: LoginModel) {
  loading.value = true
  appAccountStore.login(values).then(() => {
    if (values.remember) {
@@ -51,12 +58,12 @@ const onSubmit = form.handleSubmit((values) => {
  }).finally(() => {
    loading.value = false
  })
-})
+}

-function testAccount(account: string) {
-  form.setFieldValue('account', account)
-  form.setFieldValue('password', '123456')
-  onSubmit()
+async function testAccount(account: string) {
+  model.value.account = account
+  model.value.password = '123456'
+  await formRef.value?.submit()
 }
 </script>

@@ -79,48 +86,33 @@ function testAccount(account: string) {
      />
    </div>
    <div v-show="type === 'default'">
-      <form @submit="onSubmit">
-        <FormField v-slot="{ componentField, errors }" name="account">
-          <FormItem class="pb-6 relative space-y-0">
-            <FormControl>
-              <FaInput type="text" placeholder="用户名" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-                <template #start>
-                  <FaIcon name="i-lucide:user" />
-                </template>
-              </FaInput>
-            </FormControl>
-            <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-              <FormMessage class="text-xs bottom-1 absolute" />
-            </Transition>
-          </FormItem>
-        </FormField>
-        <FormField v-slot="{ componentField, errors }" name="password">
-          <FormItem class="pb-6 relative space-y-0">
-            <FormControl>
-              <FaInput type="password" placeholder="密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-                <template #start>
-                  <FaIcon name="i-lucide:lock" />
-                </template>
-              </FaInput>
-            </FormControl>
-            <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-              <FormMessage class="text-xs bottom-1 absolute" />
-            </Transition>
-          </FormItem>
-        </FormField>
-        <div class="mb-4 flex-center-between">
-          <div class="flex-center-start">
-            <FormField v-slot="{ componentField }" type="checkbox" name="remember">
-              <FormItem>
-                <FormControl>
-                  <FaCheckbox v-bind="componentField">
-                    记住我
-                  </FaCheckbox>
-                </FormControl>
-              </FormItem>
-            </FormField>
-          </div>
-          <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onResetPassword', form.values.account)">
+      <FaForm
+        ref="formRef"
+        :model="model"
+        :validation-schema="validationSchema"
+        @submit="onSubmit"
+      >
+        <FaFormItem name="account">
+          <FaInput type="text" placeholder="用户名" class="w-full">
+            <template #start>
+              <FaIcon name="i-lucide:user" />
+            </template>
+          </FaInput>
+        </FaFormItem>
+        <FaFormItem name="password">
+          <FaInput type="password" placeholder="密码" class="w-full">
+            <template #start>
+              <FaIcon name="i-lucide:lock" />
+            </template>
+          </FaInput>
+        </FaFormItem>
+        <div class="flex-start-between">
+          <FaFormItem name="remember" class="min-w-0">
+            <FaCheckbox>
+              记住我
+            </FaCheckbox>
+          </FaFormItem>
+          <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onResetPassword', model.account)">
            忘记密码了?
          </FaButton>
        </div>
@@ -129,11 +121,11 @@ function testAccount(account: string) {
        </FaButton>
        <div class="text-sm mt-4 flex-center gap-2">
          <span class="text-secondary-foreground op-50">还没有帐号?</span>
-          <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onRegister', form.values.account)">
+          <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onRegister', model.account)">
            注册新帐号
          </FaButton>
        </div>
-      </form>
+      </FaForm>
      <div class="mt-4 text-center -mb-4">
        <FaDivider>演示账号一键登录</FaDivider>
        <div class="space-x-2">
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
 import * as z from 'zod'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'

 defineOptions({
  name: 'RegisterForm',
@@ -19,32 +17,38 @@ const emits = defineEmits<{

 const loading = ref(false)

-const form = useForm({
-  validationSchema: toTypedSchema(
-    z.object({
-      account: z.string().min(1, '请输入用户名'),
-      password: z.string().min(1, '请输入密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
-      checkPassword: z.string().min(1, '请再次输入密码'),
-    }).refine(data => data.password === data.checkPassword, {
-      message: '两次输入的密码不一致',
-      path: ['checkPassword'],
-    }),
-  ),
-  initialValues: {
-    account: props.account ?? '',
-    password: '',
-    checkPassword: '',
-  },
+interface RegisterModel {
+  account: string
+  password: string
+  checkPassword: string
+}
+
+const model = ref<RegisterModel>({
+  account: props.account ?? '',
+  password: '',
+  checkPassword: '',
 })
-const onSubmit = form.handleSubmit((values) => {
+
+const validationSchema = toTypedSchema(
+  z.object({
+    account: z.string().min(1, '请输入用户名'),
+    password: z.string().min(1, '请输入密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
+    checkPassword: z.string().min(1, '请再次输入密码'),
+  }).refine(data => data.password === data.checkPassword, {
+    message: '两次输入的密码不一致',
+    path: ['checkPassword'],
+  }),
+)
+
+function onSubmit(values: RegisterModel) {
  loading.value = true
  emits('onRegister', values.account)
-})
+}
 </script>

 <template>
  <div class="p-12 flex-col-stretch-center min-h-500px w-full">
-    <form @submit="onSubmit">
+    <FaForm :model="model" :validation-schema="validationSchema" @submit="onSubmit">
      <div class="mb-8 space-y-2">
        <h3 class="text-4xl font-bold">
          探索从这里开始 🚀
@@ -53,60 +57,37 @@ const onSubmit = form.handleSubmit((values) => {
          演示系统未提供该功能
        </p>
      </div>
-      <FormField v-slot="{ componentField, errors }" name="account">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="text" placeholder="用户名" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:user" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FormField v-slot="{ componentField, value, errors }" name="password">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <FormDescription>
-            <FaPasswordStrength :password="value" />
-          </FormDescription>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FormField v-slot="{ componentField, errors }" name="checkPassword">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="确认密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
+      <FaFormItem name="account">
+        <FaInput type="text" placeholder="用户名" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:user" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaFormItem name="password">
+        <FaInput type="password" placeholder="密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+        <FaPasswordStrength :password="model.password" />
+      </FaFormItem>
+      <FaFormItem name="checkPassword">
+        <FaInput type="password" placeholder="确认密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
      <FaButton :loading="loading" size="lg" class="mt-4 w-full" type="submit">
        注册
      </FaButton>
      <div class="text-sm mt-4 flex-center gap-2">
        <span class="text-secondary-foreground op-50">已经有帐号?</span>
-        <FaButton variant="link" class="p-0 h-auto" @click="emits('onLogin', form.values.account)">
+        <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onLogin', model.account)">
          去登录
        </FaButton>
      </div>
-    </form>
+    </FaForm>
  </div>
 </template>
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
 import * as z from 'zod'
-import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'

 defineOptions({
  name: 'ResetPasswordForm',
@@ -19,22 +17,28 @@ const emits = defineEmits<{

 const loading = ref(false)

-const form = useForm({
-  validationSchema: toTypedSchema(z.object({
-    account: z.string().min(1, '请输入用户名'),
-    captcha: z.string().min(6, '请输入验证码'),
-    newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
-  })),
-  initialValues: {
-    account: props.account ?? '',
-    captcha: '',
-    newPassword: '',
-  },
+interface ResetPasswordModel {
+  account: string
+  captcha: string
+  newPassword: string
+}
+
+const model = ref<ResetPasswordModel>({
+  account: props.account ?? '',
+  captcha: '',
+  newPassword: '',
 })
-const onSubmit = form.handleSubmit((values) => {
+
+const validationSchema = toTypedSchema(z.object({
+  account: z.string().min(1, '请输入用户名'),
+  captcha: z.string().min(6, '请输入验证码'),
+  newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
+}))
+
+function onSubmit(values: ResetPasswordModel) {
  loading.value = true
  emits('onResetPassword', values.account)
-})
+}

 const countdown = ref(0)
 const countdownInterval = ref(Number.NaN)
@@ -51,7 +55,7 @@ function handleSendCaptcha() {

 <template>
  <div class="p-12 flex-col-stretch-center min-h-500px w-full">
-    <form @submit="onSubmit">
+    <FaForm :model="model" :validation-schema="validationSchema" @submit="onSubmit">
      <div class="mb-8 space-y-2">
        <h3 class="text-4xl font-bold">
          忘记密码了? 🔒
@@ -60,57 +64,41 @@ function handleSendCaptcha() {
          演示系统未提供该功能
        </p>
      </div>
-      <FormField v-slot="{ componentField, errors }" name="account">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="text" placeholder="用户名" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:user" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <div class="flex-start-between gap-2">
-        <FormField v-slot="{ componentField, value, setValue }" name="captcha">
-          <FormItem class="pb-6 relative space-y-0">
-            <FormControl>
-              <FaInputOTP :model-value="value" :name="componentField.name" :length="6" class="border-destructive" @update:model-value="val => setValue(val)" />
-            </FormControl>
-            <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-              <FormMessage class="text-xs bottom-1 absolute" />
-            </Transition>
-          </FormItem>
-        </FormField>
-        <FaButton variant="outline" :disabled="countdown > 0" class="px-4 flex-1" @click="handleSendCaptcha">
-          {{ countdown === 0 ? '发送验证码' : `${countdown} 秒后重发` }}
-        </FaButton>
-      </div>
-      <FormField v-slot="{ componentField, errors }" name="newPassword">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="新密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
+      <FaFormItem name="account">
+        <FaInput type="text" placeholder="用户名" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:user" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaFormItem name="captcha" :auto-bind="false">
+        <div class="flex-start-between gap-2">
+          <FaInputOTP
+            v-model="model.captcha"
+            name="captcha"
+            :length="6"
+            class="border-destructive"
+          />
+          <FaButton variant="outline" type="button" :disabled="countdown > 0" class="px-4 flex-1" @click="handleSendCaptcha">
+            {{ countdown === 0 ? '发送验证码' : `${countdown} 秒后重发` }}
+          </FaButton>
+        </div>
+      </FaFormItem>
+      <FaFormItem name="newPassword">
+        <FaInput type="password" placeholder="新密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
      <FaButton :loading="loading" size="lg" class="mt-4 w-full" type="submit">
        确认
      </FaButton>
      <div class="text-sm mt-4 flex-center gap-2">
-        <FaButton variant="link" class="p-0 h-auto" @click="emits('onLogin', form.values.account)">
+        <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onLogin', model.account)">
          去登录
        </FaButton>
      </div>
-    </form>
+    </FaForm>
  </div>
 </template>
@@ -80,13 +80,13 @@ export function useAppTabbar() {
    const index = appTabbarStore.list.findIndex(item => item.tabId === tabId)
    if (index < 0) {
      flag = false
-      !checkOnly && faToast.warning('关闭的标签页不存在', {
+      !checkOnly && useFaToast().warning('关闭的标签页不存在', {
        position: 'top-center',
      })
    }
    else if (appTabbarStore.list.length <= 1) {
      flag = false
-      !checkOnly && faToast.warning('当前只有一个标签页，不可关闭', {
+      !checkOnly && useFaToast().warning('当前只有一个标签页，不可关闭', {
        position: 'top-center',
      })
    }
@@ -1,46 +0,0 @@
-export function usePagination() {
-  const pagination = ref({
-    page: 1,
-    size: 10,
-    total: 0,
-    sort: null as string | null,
-    order: null as string | null,
-  })
-
-  function getParams() {
-    return {
-      // page,size 和 from,limit 是分页的两种方式，方便兼容两种接口
-      page: pagination.value.page,
-      size: pagination.value.size,
-      from: (pagination.value.page - 1) * pagination.value.size,
-      limit: pagination.value.size,
-      ...(
-        pagination.value.sort && pagination.value.order && {
-          sort: pagination.value.sort,
-          order: pagination.value.order,
-        }
-      ),
-    }
-  }
-
-  async function onSizeChange(size: number) {
-    pagination.value.size = size
-  }
-
-  async function onCurrentChange(page: number) {
-    pagination.value.page = page
-  }
-
-  async function onSortChange(prop: string, order: string) {
-    pagination.value.sort = prop
-    pagination.value.order = order === 'ascending' ? 'asc' : 'desc'
-  }
-
-  return {
-    pagination,
-    getParams,
-    onSizeChange,
-    onCurrentChange,
-    onSortChange,
-  }
-}
@@ -1,107 +0,0 @@
-# Hotkeys 设计说明
-
-这个目录参考 `fantastic-admin/v6-dev/apps/example/src/hotkeys` 的设计，目标是把当前项目里分散在各组件中的快捷键逻辑收拢成一套轻量方案。
-
-## 设计目标
-
-当前方案只解决 4 件事：
-
-1. 快捷键定义不要散落在多个组件里重复写
-2. 快捷键帮助面板不要再手写一份展示文案
-3. 业务组件不要反复手写 `hotkeys()` / `unbind()`
-4. 不引入过重的 command system
-
-所以采用：
-
- `registry.ts` 统一定义
- `useHotkeys.ts` 统一注册
- 业务 handler 仍留在业务组件
-
-这是一种“集中定义 + 就地执行”的轻量折中方案。
-
-## 目录职责
-
-### `registry.ts`
-
-统一维护当前项目的快捷键元数据：
-
- id
- keys
- enabled
- help
-
-这里负责：
-
- 统一的 id 常量
- 真实键位
- 是否启用的条件
- 帮助面板展示文案
- 聚合业务扩展
-
-> 注意：这里不放业务逻辑 handler。
-
-### `registry.extend.ts`
-
-用于放置项目自定义扩展快捷键，避免把业务项全部堆进内建定义中。
-
-### `types.ts`
-
-定义快捷键系统的基础类型，包括：
-
- `HotkeyBinding`
- `HotkeyContext`
- `HotkeyHelpMeta`
- `HotkeyHandler`
-
-### `useHotkeys.ts`
-
-对 `hotkeys-js` 的薄封装，提供：
-
- `useHotkey`：注册单个快捷键
- `useHotkeyBindings`：批量注册快捷键
-
-并统一处理：
-
- 注册 / 卸载
- `active` 启停
- `binding.enabled` 可用性判断
- 默认 `preventDefault`
-
-## 当前项目已落地的快捷键
-
-### 全局
-
- `system.info.open`
- `menuSearch.open`
- `page.reload`
-
-### 主导航
-
- `menu.next`
- `menu.prev`
-
-### 标签栏
-
- `tabbar.prev`
- `tabbar.next`
- `tabbar.closeCurrent`
- `tabbar.gotoVisibleIndex`
- `tabbar.gotoLast`
-
-### 菜单搜索弹窗
-
- `menuSearch.moveUp`
- `menuSearch.moveDown`
- `menuSearch.confirm`
- `menuSearch.close`
-
-## 使用约定
-
-1. 新增快捷键，优先在 `registry.ts` 或 `registry.extend.ts` 补定义
-2. 展示在帮助面板中的快捷键，必须配置 `help`
-3. handler 尽量保留在最了解业务的组件中
-4. 不直接在业务组件里继续散写 `hotkeys('xxx')`
-
-## 现阶段差异
-
-参考项目里还有页面最大化相关快捷键；当前项目暂未引入对应页面最大化能力，所以本次迁移只保留当前项目已有功能，并把原有 `F5` 页面刷新也纳入统一 registry 管理。
@@ -0,0 +1,57 @@
+import type { HotkeyBinding } from '@fantastic-admin/hotkeys'
+
+/**
+ * 业务扩展快捷键 id
+ *
+ * 使用方式：
+ *
+ * export const EXT_HOTKEY_ID = {
+ *   demoOpen: 'demo.open',
+ * } as const
+ */
+export const EXT_HOTKEY_ID = {} as const
+
+type ExtendHotkeyId = typeof EXT_HOTKEY_ID[keyof typeof EXT_HOTKEY_ID]
+
+/**
+ * 业务扩展全局快捷键
+ *
+ * 示例：
+ *
+ * export const extendGlobalHotkeyBindings = [
+ *   {
+ *     id: EXT_HOTKEY_ID.demoOpen,
+ *     keys: ['command+j', 'ctrl+j'],
+ *     enabled: ctx => ctx.settings.toolbar.menuSearch.enable,
+ *     help: {
+ *       group: 'global',
+ *       titleKey: 'global.demoOpen',
+ *       order: 90,
+ *       visible: ctx => ctx.settings.toolbar.menuSearch.enable,
+ *       displayKeys: {
+ *         default: ['Ctrl', 'J'],
+ *         mac: ['⌘', 'J'],
+ *       },
+ *     },
+ *   },
+ * ] satisfies HotkeyBinding<ExtendHotkeyId>[]
+ */
+export const extendGlobalHotkeyBindings = [] satisfies HotkeyBinding<ExtendHotkeyId>[]
+
+/**
+ * 业务扩展局部快捷键
+ *
+ * 示例：
+ *
+ * export const extendScopedHotkeyBindings = [
+ *   {
+ *     id: EXT_HOTKEY_ID.demoConfirm,
+ *     keys: ['enter'],
+ *   },
+ *   {
+ *     id: EXT_HOTKEY_ID.demoClose,
+ *     keys: ['esc'],
+ *   },
+ * ] satisfies HotkeyBinding<ExtendHotkeyId>[]
+ */
+export const extendScopedHotkeyBindings = [] satisfies HotkeyBinding<ExtendHotkeyId>[]
@@ -0,0 +1,41 @@
+import type {
+  HotkeyBinding,
+  HotkeyContextBase,
+  HotkeyDisplayKeys,
+  HotkeyHandler,
+  HotkeyHandlerArgs,
+  HotkeyHandlersMap,
+  HotkeyHelpGroup,
+  HotkeyHelpMeta,
+} from '@fantastic-admin/hotkeys'
+import { createHotkeys } from '@fantastic-admin/hotkeys'
+import { EXT_HOTKEY_ID, extendGlobalHotkeyBindings, extendScopedHotkeyBindings } from './extend'
+
+const appHotkeys = createHotkeys({
+  extendIds: EXT_HOTKEY_ID,
+  extendGlobalHotkeyBindings,
+  extendScopedHotkeyBindings,
+  getContext: () => ({
+    settings: useAppSettingsStore().settings,
+  }),
+})
+
+export const HOTKEY_ID = appHotkeys.HOTKEY_ID
+export const hotkeyIds = appHotkeys.hotkeyIds
+export const globalHotkeyBindings = appHotkeys.globalHotkeyBindings
+export const menuSearchHotkeyBindings = appHotkeys.menuSearchHotkeyBindings
+export const hotkeyBindings = appHotkeys.hotkeyBindings
+export const useHotkey = appHotkeys.useHotkey
+export const useHotkeyBindings = appHotkeys.useHotkeyBindings
+
+export type HotkeyId = typeof HOTKEY_ID[keyof typeof HOTKEY_ID]
+export type {
+  HotkeyBinding,
+  HotkeyContextBase,
+  HotkeyDisplayKeys,
+  HotkeyHandler,
+  HotkeyHandlerArgs,
+  HotkeyHandlersMap,
+  HotkeyHelpGroup,
+  HotkeyHelpMeta,
+}
@@ -1,22 +0,0 @@
-import type { HotkeyBinding } from './types'
-
-/**
- * 业务扩展快捷键 id
- *
- * 使用方式：
- *
- * export const EXT_HOTKEY_ID = {
- *   demoOpen: 'demo.open',
- * } as const
- */
-export const EXT_HOTKEY_ID = {} as const
-
-/**
- * 业务扩展全局快捷键
- */
-export const extendGlobalHotkeyBindings: HotkeyBinding[] = []
-
-/**
- * 业务扩展局部快捷键
- */
-export const extendScopedHotkeyBindings: HotkeyBinding[] = []
@@ -1,210 +0,0 @@
-import type { HotkeyBinding } from './types'
-import { EXT_HOTKEY_ID, extendGlobalHotkeyBindings, extendScopedHotkeyBindings } from './registry.extend'
-
-export const HOTKEY_ID = {
-  systemInfoOpen: 'system.info.open',
-  menuSearchOpen: 'menuSearch.open',
-  menuNext: 'menu.next',
-  menuPrev: 'menu.prev',
-  tabbarPrev: 'tabbar.prev',
-  tabbarNext: 'tabbar.next',
-  tabbarCloseCurrent: 'tabbar.closeCurrent',
-  tabbarGotoVisibleIndex: 'tabbar.gotoVisibleIndex',
-  tabbarGotoLast: 'tabbar.gotoLast',
-  pageReload: 'page.reload',
-  menuSearchMoveUp: 'menuSearch.moveUp',
-  menuSearchMoveDown: 'menuSearch.moveDown',
-  menuSearchConfirm: 'menuSearch.confirm',
-  menuSearchClose: 'menuSearch.close',
-  ...EXT_HOTKEY_ID,
-} as const
-
-export const hotkeyIds = Object.values(HOTKEY_ID)
-
-/**
- * Hotkeys registry 维护约定
- *
- * 1. 新增快捷键优先在这里补充定义，不要在业务组件里直接写死键位字符串
- * 2. 这里仅维护“定义”和“展示元数据”，不要把业务 handler 塞进 registry
- * 3. 配置类开关尽量写在 enabled / help.visible 中，避免帮助面板与真实行为不一致
- * 4. 需要展示在快捷键帮助面板中的项，必须补充 help
- * 5. 仅局部场景使用的快捷键，也建议在这里定义，再由对应组件按需注册
- */
-export const globalHotkeyBindings: HotkeyBinding[] = [
-  {
-    id: HOTKEY_ID.systemInfoOpen,
-    keys: ['command+i', 'ctrl+i'],
-    help: {
-      group: 'global',
-      titleKey: 'global.system',
-      order: 10,
-      displayKeys: {
-        default: ['Ctrl', 'I'],
-        mac: ['⌘', 'I'],
-      },
-    },
-  },
-  {
-    id: HOTKEY_ID.menuSearchOpen,
-    keys: ['command+k', 'ctrl+k'],
-    enabled: ctx => ctx.settings.toolbar.menuSearch.enable && ctx.settings.toolbar.menuSearch.hotkeys,
-    help: {
-      group: 'global',
-      titleKey: 'global.search',
-      order: 20,
-      visible: ctx => ctx.settings.toolbar.menuSearch.enable && ctx.settings.toolbar.menuSearch.hotkeys,
-      displayKeys: {
-        default: ['Ctrl', 'K'],
-        mac: ['⌘', 'K'],
-      },
-    },
-  },
-  {
-    id: HOTKEY_ID.menuNext,
-    keys: ['alt+`'],
-    enabled: ctx => ctx.settings.menu.hotkeys && ['side', 'head'].includes(ctx.settings.menu.mode),
-    help: {
-      group: 'nav',
-      titleKey: 'nav.next',
-      order: 10,
-      visible: ctx => ctx.settings.menu.hotkeys && ['side', 'head'].includes(ctx.settings.menu.mode),
-      displayKeys: {
-        default: ['Alt', '`'],
-        mac: ['⌥', '`'],
-      },
-    },
-  },
-  {
-    id: HOTKEY_ID.menuPrev,
-    keys: ['alt+shift+`'],
-    enabled: ctx => ctx.settings.menu.hotkeys && ['side', 'head'].includes(ctx.settings.menu.mode),
-    help: {
-      group: 'nav',
-      titleKey: 'nav.prev',
-      order: 20,
-      visible: ctx => ctx.settings.menu.hotkeys && ['side', 'head'].includes(ctx.settings.menu.mode),
-      displayKeys: {
-        default: ['Alt', 'Shift', '`'],
-        mac: ['⌥', '⇧', '`'],
-      },
-    },
-  },
-  {
-    id: HOTKEY_ID.tabbarPrev,
-    keys: ['alt+left'],
-    enabled: ctx => ctx.settings.topbar.tabbar && ctx.settings.tabbar.hotkeys,
-    help: {
-      group: 'tabbar',
-      titleKey: 'tabbar.prev',
-      order: 10,
-      visible: ctx => ctx.settings.topbar.tabbar && ctx.settings.tabbar.hotkeys,
-      displayKeys: {
-        default: ['Alt', '←'],
-        mac: ['⌥', '←'],
-      },
-    },
-  },
-  {
-    id: HOTKEY_ID.tabbarNext,
-    keys: ['alt+right'],
-    enabled: ctx => ctx.settings.topbar.tabbar && ctx.settings.tabbar.hotkeys,
-    help: {
-      group: 'tabbar',
-      titleKey: 'tabbar.next',
-      order: 20,
-      visible: ctx => ctx.settings.topbar.tabbar && ctx.settings.tabbar.hotkeys,
-      displayKeys: {
-        default: ['Alt', '→'],
-        mac: ['⌥', '→'],
-      },
-    },
-  },
-  {
-    id: HOTKEY_ID.tabbarCloseCurrent,
-    keys: ['alt+w'],
-    enabled: ctx => ctx.settings.topbar.tabbar && ctx.settings.tabbar.hotkeys,
-    help: {
-      group: 'tabbar',
-      titleKey: 'tabbar.close',
-      order: 30,
-      visible: ctx => ctx.settings.topbar.tabbar && ctx.settings.tabbar.hotkeys,
-      displayKeys: {
-        default: ['Alt', 'W'],
-        mac: ['⌥', 'W'],
-      },
-    },
-  },
-  {
-    id: HOTKEY_ID.tabbarGotoVisibleIndex,
-    keys: ['alt+1', 'alt+2', 'alt+3', 'alt+4', 'alt+5', 'alt+6', 'alt+7', 'alt+8', 'alt+9'],
-    enabled: ctx => ctx.settings.topbar.tabbar && ctx.settings.tabbar.hotkeys,
-    help: {
-      group: 'tabbar',
-      titleKey: 'tabbar.n',
-      order: 40,
-      visible: ctx => ctx.settings.topbar.tabbar && ctx.settings.tabbar.hotkeys,
-      displayKeys: {
-        default: ['Alt', '1~9'],
-        mac: ['⌥', '1~9'],
-      },
-    },
-  },
-  {
-    id: HOTKEY_ID.tabbarGotoLast,
-    keys: ['alt+0'],
-    enabled: ctx => ctx.settings.topbar.tabbar && ctx.settings.tabbar.hotkeys,
-    help: {
-      group: 'tabbar',
-      titleKey: 'tabbar.last',
-      order: 50,
-      visible: ctx => ctx.settings.topbar.tabbar && ctx.settings.tabbar.hotkeys,
-      displayKeys: {
-        default: ['Alt', '0'],
-        mac: ['⌥', '0'],
-      },
-    },
-  },
-  {
-    id: HOTKEY_ID.pageReload,
-    keys: ['f5'],
-  },
-  ...extendGlobalHotkeyBindings,
-]
-
-export const menuSearchHotkeyBindings: HotkeyBinding[] = [
-  {
-    id: HOTKEY_ID.menuSearchMoveUp,
-    keys: ['up'],
-  },
-  {
-    id: HOTKEY_ID.menuSearchMoveDown,
-    keys: ['down'],
-  },
-  {
-    id: HOTKEY_ID.menuSearchConfirm,
-    keys: ['enter'],
-  },
-  {
-    id: HOTKEY_ID.menuSearchClose,
-    keys: ['esc'],
-  },
-]
-
-export const hotkeyBindings: HotkeyBinding[] = [
-  ...globalHotkeyBindings,
-  ...menuSearchHotkeyBindings,
-  ...extendScopedHotkeyBindings,
-]
-
-if (import.meta.env.DEV) {
-  const registeredIds = hotkeyBindings.map(item => item.id)
-  const missingIds = hotkeyIds.filter(id => !registeredIds.includes(id))
-  const duplicateIds = registeredIds.filter((id, index) => registeredIds.indexOf(id) !== index)
-
-  if (missingIds.length || duplicateIds.length) {
-    console.warn('[hotkeys] registry consistency check failed', {
-      missingIds,
-      duplicateIds: [...new Set(duplicateIds)],
-    })
-  }
-}
@@ -1,38 +0,0 @@
-import type { useAppSettingsStore } from '@/store/modules/app/settings'
-
-export type HotkeyHelpGroup = 'global' | 'nav' | 'tabbar' | 'page'
-export type HotkeyId = typeof import('./registry').HOTKEY_ID[keyof typeof import('./registry').HOTKEY_ID]
-
-export interface HotkeyContext {
-  settings: ReturnType<typeof useAppSettingsStore>['settings']
-}
-
-export interface HotkeyDisplayKeys {
-  default: string[]
-  mac?: string[]
-}
-
-export interface HotkeyHelpMeta {
-  group: HotkeyHelpGroup
-  titleKey: string
-  order?: number
-  visible?: (ctx: HotkeyContext) => boolean
-  displayKeys: HotkeyDisplayKeys
-}
-
-export interface HotkeyBinding {
-  id: HotkeyId
-  keys: string[]
-  preventDefault?: boolean
-  enabled?: (ctx: HotkeyContext) => boolean
-  help?: HotkeyHelpMeta
-}
-
-export interface HotkeyHandlerArgs {
-  event: KeyboardEvent
-  hotkey: string
-}
-
-export type HotkeyHandler = (args: HotkeyHandlerArgs) => void
-
-export type HotkeyHandlersMap = Partial<Record<HotkeyId, HotkeyHandler>>
@@ -1,69 +0,0 @@
-import type { HotkeyHandler, HotkeyHandlersMap, HotkeyId } from './types'
-import hotkeys from 'hotkeys-js'
-import { hotkeyBindings, hotkeyIds } from './registry'
-
-export function useHotkey(id: HotkeyId, handler: HotkeyHandler, active: MaybeRefOrGetter<boolean> = true) {
-  const binding = hotkeyBindings.find(item => item.id === id)
-  const appSettingsStore = useAppSettingsStore()
-  const hotkeyContext = {
-    settings: appSettingsStore.settings,
-  }
-  let currentHandler: ((event: KeyboardEvent, hotkeyHandler: { key: string }) => void) | undefined
-
-  function bind() {
-    if (currentHandler || !binding) {
-      return
-    }
-    const currentBinding = binding
-
-    currentHandler = (event, hotkeyHandler) => {
-      if (currentBinding.enabled && !currentBinding.enabled(hotkeyContext)) {
-        return
-      }
-
-      if (currentBinding.preventDefault !== false) {
-        event.preventDefault()
-      }
-
-      handler({
-        event,
-        hotkey: hotkeyHandler.key,
-      })
-    }
-
-    hotkeys(currentBinding.keys.join(','), currentHandler)
-  }
-
-  function unbind() {
-    if (!currentHandler || !binding) {
-      return
-    }
-
-    hotkeys.unbind(binding.keys.join(','), currentHandler)
-    currentHandler = undefined
-  }
-
-  watch(() => toValue(active), (val) => {
-    if (val) {
-      bind()
-    }
-    else {
-      unbind()
-    }
-  }, {
-    immediate: true,
-  })
-
-  onUnmounted(() => {
-    unbind()
-  })
-}
-
-export function useHotkeyBindings(handlers: HotkeyHandlersMap, active: MaybeRefOrGetter<boolean> = true) {
-  hotkeyIds.forEach((id) => {
-    const handler = handlers[id]
-    if (handler) {
-      useHotkey(id, handler, active)
-    }
-  })
-}
@@ -38,7 +38,7 @@ onMounted(() => {
  })
 })

-const { copy, copied, isSupported } = useClipboard()
+const { copy, copied, isSupported } = useClipboard({ legacy: true })

 function handleCopy() {
  copy(JSON.stringify(diffTwoObj(settingsDefault, appSettingsStore.settings), null, 2))
@@ -53,7 +53,7 @@ function handleCopy() {
        'columns-2': appSettingsStore.mode === 'pc',
      }"
    >
-      <FaPageMain title="主题" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4">
+      <FaPageMain title="主题" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
        <div class="setting-item">
          <div class="label">
            颜色方案
@@ -83,7 +83,7 @@ function handleCopy() {
          <FaSwitch v-model="appSettingsStore.settings.theme.colorAmblyopia" />
        </div>
      </FaPageMain>
-      <FaPageMain v-if="appSettingsStore.mode === 'pc'" title="导航菜单" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4">
+      <FaPageMain v-if="appSettingsStore.mode === 'pc'" title="导航菜单" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
        <div class="menu-mode">
          <FaTooltip text="侧边栏模式 (有主导航菜单)" :delay="500">
            <FaButton variant="outline" class="mode mode-side" :class="{ active: appSettingsStore.settings.menu.mode === 'side' }" @click="appSettingsStore.settings.menu.mode = 'side'">
@@ -145,7 +145,7 @@ function handleCopy() {
          <FaSwitch v-model="appSettingsStore.settings.menu.hotkeys" :disabled="appSettingsStore.settings.menu.mode === 'single'" />
        </div>
      </FaPageMain>
-      <FaPageMain title="顶栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4">
+      <FaPageMain title="顶栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
        <div class="setting-item">
          <div class="label">
            标签栏
@@ -175,7 +175,7 @@ function handleCopy() {
          </FaButtonGroup>
        </div>
      </FaPageMain>
-      <FaPageMain title="标签栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4">
+      <FaPageMain title="标签栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
        <div class="setting-item">
          <div class="label">
            显示图标
@@ -189,7 +189,7 @@ function handleCopy() {
          <FaSwitch v-model="appSettingsStore.settings.tabbar.hotkeys" />
        </div>
      </FaPageMain>
-      <FaPageMain title="工具栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4">
+      <FaPageMain title="工具栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
        <div v-if="appSettingsStore.mode === 'pc'" class="setting-item">
          <div class="label">
            <FaIcon name="i-ic:twotone-double-arrow" />
@@ -237,7 +237,7 @@ function handleCopy() {
          <FaSwitch v-model="appSettingsStore.settings.toolbar.colorScheme" />
        </div>
      </FaPageMain>
-      <FaPageMain title="页面" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4">
+      <FaPageMain title="页面" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
        <div class="setting-item">
          <div class="label">
            载入进度条
@@ -248,7 +248,7 @@ function handleCopy() {
          <FaSwitch v-model="appSettingsStore.settings.page.progress" />
        </div>
      </FaPageMain>
-      <FaPageMain title="应用" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4">
+      <FaPageMain title="应用" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
        <div class="p-4 pb-4 pt-14 border rounded-lg relative space-y-4">
          <div class="font-bold px-4 py-2 border-b border-e rounded-rb-lg inset-s-0 inset-t-0 absolute">
            账号
@@ -0,0 +1,253 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue'
+
+type SnapSide = 'left' | 'right'
+
+const EDGE_OFFSET = 4
+const DRAG_THRESHOLD = 8
+const DEFAULT_BUTTON_SIZE = 40
+
+const appSettingsStore = useAppSettingsStore()
+const buttonRef = useTemplateRef('buttonRef')
+
+const buttonState = ref({
+  initialized: false,
+  width: DEFAULT_BUTTON_SIZE,
+  height: DEFAULT_BUTTON_SIZE,
+  left: EDGE_OFFSET,
+  top: EDGE_OFFSET,
+  snapSide: 'left' as SnapSide,
+})
+
+const dragState = ref({
+  pointerId: -1,
+  active: false,
+  moved: false,
+  suppressClick: false,
+  startX: 0,
+  startY: 0,
+  startLeft: 0,
+  startTop: 0,
+})
+
+const buttonStyle = computed<CSSProperties>(() => ({
+  left: buttonState.value.initialized
+    ? `${buttonState.value.left}px`
+    : `${EDGE_OFFSET}px`,
+  right: buttonState.value.initialized
+    ? 'auto'
+    : 'auto',
+  top: buttonState.value.initialized
+    ? `${buttonState.value.top}px`
+    : 'auto',
+  bottom: buttonState.value.initialized
+    ? 'auto'
+    : `${EDGE_OFFSET}px`,
+  transition: dragState.value.active ? 'none' : 'left 200ms ease, top 200ms ease',
+  willChange: 'left, top',
+}))
+
+function getButtonElement() {
+  const el = buttonRef.value?.$el
+  return el instanceof HTMLElement ? el : null
+}
+
+function clamp(value: number, min: number, max: number) {
+  return Math.min(Math.max(value, min), max)
+}
+
+function getViewportBounds() {
+  return {
+    minLeft: EDGE_OFFSET,
+    maxLeft: Math.max(EDGE_OFFSET, window.innerWidth - buttonState.value.width - EDGE_OFFSET),
+    minTop: EDGE_OFFSET,
+    maxTop: Math.max(EDGE_OFFSET, window.innerHeight - buttonState.value.height - EDGE_OFFSET),
+  }
+}
+
+function syncButtonMetrics() {
+  const rect = getButtonElement()?.getBoundingClientRect()
+  if (!rect) {
+    return
+  }
+  buttonState.value.width = rect.width || DEFAULT_BUTTON_SIZE
+  buttonState.value.height = rect.height || DEFAULT_BUTTON_SIZE
+}
+
+function setButtonPosition(left = buttonState.value.left, top = buttonState.value.top) {
+  const bounds = getViewportBounds()
+  buttonState.value.left = clamp(left, bounds.minLeft, bounds.maxLeft)
+  buttonState.value.top = clamp(top, bounds.minTop, bounds.maxTop)
+}
+
+function snapToSide(side: SnapSide) {
+  const bounds = getViewportBounds()
+  buttonState.value.snapSide = side
+  buttonState.value.left = side === 'left' ? bounds.minLeft : bounds.maxLeft
+  buttonState.value.top = clamp(buttonState.value.top, bounds.minTop, bounds.maxTop)
+}
+
+function syncPositionToViewport() {
+  syncButtonMetrics()
+  const bounds = getViewportBounds()
+  buttonState.value.top = clamp(buttonState.value.top, bounds.minTop, bounds.maxTop)
+  buttonState.value.left = buttonState.value.snapSide === 'right'
+    ? bounds.maxLeft
+    : clamp(buttonState.value.left, bounds.minLeft, bounds.maxLeft)
+}
+
+async function initializeButtonPosition() {
+  if (appSettingsStore.mode !== 'mobile') {
+    return
+  }
+
+  await nextTick()
+  syncButtonMetrics()
+  if (!getButtonElement()) {
+    return
+  }
+
+  if (!buttonState.value.initialized) {
+    const bounds = getViewportBounds()
+    buttonState.value.snapSide = 'left'
+    buttonState.value.left = bounds.minLeft
+    buttonState.value.top = bounds.maxTop
+    buttonState.value.initialized = true
+  }
+
+  setButtonPosition()
+}
+
+function handlePointerDown(event: PointerEvent) {
+  if (!event.isPrimary || (event.pointerType === 'mouse' && event.button !== 0)) {
+    return
+  }
+
+  const target = event.currentTarget
+  if (!(target instanceof HTMLElement)) {
+    return
+  }
+
+  syncButtonMetrics()
+  dragState.value.pointerId = event.pointerId
+  dragState.value.active = true
+  dragState.value.moved = false
+  dragState.value.startX = event.clientX
+  dragState.value.startY = event.clientY
+  dragState.value.startLeft = buttonState.value.left
+  dragState.value.startTop = buttonState.value.top
+  target.setPointerCapture?.(event.pointerId)
+}
+
+function handlePointerMove(event: PointerEvent) {
+  if (!dragState.value.active || dragState.value.pointerId !== event.pointerId) {
+    return
+  }
+
+  const deltaX = event.clientX - dragState.value.startX
+  const deltaY = event.clientY - dragState.value.startY
+
+  if (!dragState.value.moved && Math.hypot(deltaX, deltaY) < DRAG_THRESHOLD) {
+    return
+  }
+
+  dragState.value.moved = true
+  setButtonPosition(dragState.value.startLeft + deltaX, dragState.value.startTop + deltaY)
+}
+
+function finishDrag(target?: EventTarget | null) {
+  const pointerId = dragState.value.pointerId
+  const shouldSuppressClick = dragState.value.moved
+
+  dragState.value.pointerId = -1
+  dragState.value.active = false
+  dragState.value.moved = false
+
+  if (target instanceof HTMLElement && pointerId >= 0 && target.hasPointerCapture?.(pointerId)) {
+    target.releasePointerCapture(pointerId)
+  }
+
+  if (shouldSuppressClick) {
+    const nextSide: SnapSide = buttonState.value.left + buttonState.value.width / 2 <= window.innerWidth / 2 ? 'left' : 'right'
+    snapToSide(nextSide)
+  }
+
+  dragState.value.suppressClick = shouldSuppressClick
+}
+
+function handlePointerUp(event: PointerEvent) {
+  if (dragState.value.pointerId !== event.pointerId) {
+    return
+  }
+  finishDrag(event.currentTarget)
+}
+
+function handlePointerCancel(event: PointerEvent) {
+  if (dragState.value.pointerId !== event.pointerId) {
+    return
+  }
+  finishDrag(event.currentTarget)
+}
+
+function handleLostPointerCapture(event: PointerEvent) {
+  if (dragState.value.active && dragState.value.pointerId === event.pointerId) {
+    finishDrag(event.currentTarget)
+  }
+}
+
+function handleClick() {
+  if (dragState.value.suppressClick) {
+    dragState.value.suppressClick = false
+    return
+  }
+  appSettingsStore.toggleSidebarCollapse()
+}
+
+function handleViewportResize() {
+  if (appSettingsStore.mode !== 'mobile' || !buttonState.value.initialized) {
+    return
+  }
+  syncPositionToViewport()
+}
+
+watch(() => appSettingsStore.mode, async (mode) => {
+  if (mode === 'mobile') {
+    await initializeButtonPosition()
+    return
+  }
+
+  dragState.value.pointerId = -1
+  dragState.value.active = false
+  dragState.value.moved = false
+}, {
+  immediate: true,
+})
+
+onMounted(() => {
+  window.addEventListener('resize', handleViewportResize, { passive: true })
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleViewportResize)
+})
+</script>
+
+<template>
+  <FaButton
+    v-if="appSettingsStore.mode === 'mobile' && !appSettingsStore.settings.topbar.toolbar"
+    ref="buttonRef"
+    variant="outline"
+    size="icon"
+    class="rounded-full size-10 select-none shadow-sm fixed z-1008 touch-none"
+    :class="{ 'cursor-grabbing': dragState.active, 'cursor-grab': !dragState.active }"
+    :style="buttonStyle"
+    @pointerdown="handlePointerDown"
+    @pointermove="handlePointerMove"
+    @pointerup="handlePointerUp"
+    @pointercancel="handlePointerCancel"
+    @lostpointercapture="handleLostPointerCapture"
+    @click="handleClick"
+  >
+    <FaIcon name="app-toolbar-collapse" class="size-4 rotate-180" />
+  </FaButton>
+</template>
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { globalHotkeyBindings } from '@/hotkeys/registry'
+import { hotkeyBindings } from '@/hotkeys'
 import eventBus from '@/utils/eventBus'

 defineOptions({
@@ -11,10 +11,10 @@ const hotkeyContext = {
  settings: appSettingsStore.settings,
 }

-const groupTitleMap = {
-  global: '全局',
-  nav: '主导航',
-  tabbar: '标签栏',
+const helpGroupMeta = {
+  global: { title: '全局', order: 10 },
+  nav: { title: '主导航', order: 20 },
+  tabbar: { title: '标签栏', order: 30 },
 } as const

 const itemTitleMap: Record<string, string> = {
@@ -32,42 +32,52 @@ const itemTitleMap: Record<string, string> = {
 const isShow = ref(false)

 const helpGroups = computed(() => {
-  const groups = [
-    { id: 'global', title: groupTitleMap.global },
-    { id: 'nav', title: groupTitleMap.nav },
-    { id: 'tabbar', title: groupTitleMap.tabbar },
-  ] as const
+  const groups = new Map<string, {
+    id: string
+    title: string
+    order: number
+    items: {
+      id: string
+      title: string
+      order: number
+      displayKeys: string[]
+    }[]
+  }>()

-  return groups.map((group) => {
-    const items = globalHotkeyBindings
-      .filter(binding => binding.help?.group === group.id)
-      .filter((binding) => {
-        if (!binding.help) {
-          return false
-        }
-        if (binding.help.visible) {
-          return binding.help.visible(hotkeyContext)
-        }
-        return true
-      })
-      .sort((a, b) => (a.help?.order ?? 0) - (b.help?.order ?? 0))
-      .map((binding) => {
-        const displayKeys = appSettingsStore.os === 'mac' && binding.help?.displayKeys.mac
-          ? binding.help.displayKeys.mac
-          : binding.help?.displayKeys.default ?? []
-
-        return {
-          id: binding.id,
-          title: binding.help?.titleKey ? itemTitleMap[binding.help.titleKey] : '',
-          displayKeys,
-        }
-      })
-
-    return {
-      ...group,
-      items,
+  hotkeyBindings.forEach((binding) => {
+    const help = binding.help
+    if (!help) {
+      return
    }
-  }).filter(group => group.items.length > 0)
+    if (help.visible && !help.visible(hotkeyContext)) {
+      return
+    }
+
+    const meta = helpGroupMeta[help.group as keyof typeof helpGroupMeta]
+    const group = groups.get(help.group) ?? {
+      id: help.group,
+      title: help.groupTitleKey ? itemTitleMap[help.groupTitleKey] ?? help.groupTitleKey : meta?.title ?? help.group,
+      order: meta?.order ?? 100,
+      items: [],
+    }
+
+    group.items.push({
+      id: binding.id,
+      title: itemTitleMap[help.titleKey] ?? help.titleKey,
+      order: help.order ?? 0,
+      displayKeys: appSettingsStore.os === 'mac' && help.displayKeys.mac
+        ? help.displayKeys.mac
+        : help.displayKeys.default,
+    })
+    groups.set(help.group, group)
+  })
+
+  return Array.from(groups.values())
+    .map(group => ({
+      ...group,
+      items: [...group.items].sort((a, b) => a.order - b.order),
+    }))
+    .sort((a, b) => a.order - b.order)
 })

 onMounted(() => {
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useHotkeyBindings } from '@/hotkeys/useHotkeys'
+import { useHotkeyBindings } from '@/hotkeys'
 import { useSlots } from '@/slots'
 import Logo from '../Logo/index.vue'

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { TabbarRecordRaw } from '@fantastic-admin/types'
 import { useMagicKeys } from '@vueuse/core'
-import { useHotkeyBindings } from '@/hotkeys/useHotkeys'
+import { useHotkeyBindings } from '@/hotkeys'
 import { useSlots } from '@/slots'

 defineOptions({
@@ -72,13 +72,13 @@ watch(() => route, (val) => {
 function tabbarScrollTip() {
  if (tabContainerRef.value?.$el.clientWidth > (tabsRef.value?.ref?.$el.clientWidth ?? 0) && !localStorage.has('tabbarScrollTip')) {
    localStorage.setItem('tabbarScrollTip', '')
-    const tips = faToast.info('温馨提示', {
+    const tips = useFaToast().info('温馨提示', {
      description: '标签栏数量超过展示区域范围，可以将鼠标移到标签栏上，通过鼠标滚轮滑动浏览',
      position: 'top-center',
      duration: Infinity,
      action: {
        label: '知道了',
-        onClick: () => faToast.dismiss(tips),
+        onClick: () => useFaToast().dismiss(tips),
      },
    })
  }
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useHotkeyBindings } from '@/hotkeys/useHotkeys'
+import { useHotkeyBindings } from '@/hotkeys'
 import Search from './search.vue'

 defineOptions({
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { MenuRecordRaw } from '@fantastic-admin/types'
 import { match } from 'pinyin-pro'
-import { useHotkeyBindings } from '@/hotkeys/useHotkeys'
+import { useHotkeyBindings } from '@/hotkeys'
 import Breadcrumb from '@/layouts/components/Breadcrumb/index.vue'
 import BreadcrumbItem from '@/layouts/components/Breadcrumb/item.vue'
 import { resolveRoutePath } from '@/utils'
@@ -8,13 +8,15 @@ const mainPage = useAppPage()

 const isAnimating = ref(false)

-function handleClick() {
-  isAnimating.value = true
-  mainPage.reload()
-}
-
-function handleCtrlClick() {
-  location.reload()
+function handleClick(event: MouseEvent) {
+  if (event.ctrlKey && !event.altKey && !event.metaKey && !event.shiftKey) {
+    location.reload()
+    return
+  }
+  if (!event.ctrlKey && !event.altKey && !event.metaKey && !event.shiftKey) {
+    isAnimating.value = true
+    mainPage.reload()
+  }
 }
 </script>

@@ -28,7 +30,7 @@ function handleCtrlClick() {
        <p>可切换为浏览器原生刷新</p>
      </div>
    </template>
-    <FaButton variant="ghost" size="icon-sm" @click.exact="handleClick" @click.ctrl.exact="handleCtrlClick" @animationend="isAnimating = false">
+    <FaButton variant="ghost" size="icon-sm" @click="handleClick" @animationend="isAnimating = false">
      <FaIcon name="i-iconoir:refresh-double" class="size-4" :class="{ animation: isAnimating }" />
    </FaButton>
  </FaTooltip>
@@ -11,7 +11,7 @@ const appSettingsStore = useAppSettingsStore()

 <template>
  <div class="flex items-center">
-    <FaButton v-if="appSettingsStore.mode === 'mobile'" variant="ghost" size="icon" class="h-9 w-9 -rotate-z-180" @click="appSettingsStore.toggleSidebarCollapse()">
+    <FaButton v-if="appSettingsStore.mode === 'mobile'" variant="ghost" size="icon" class="size-9" @click="appSettingsStore.toggleSidebarCollapse()">
      <FaIcon name="app-toolbar-collapse" class="size-4" />
    </FaButton>
    <Component :is="useSlots('toolbar-start')" />
@@ -6,9 +6,9 @@ defineOptions({
 })

 const route = useRoute()
-const { copy, copied } = useClipboard()
+const { copy, copied } = useClipboard({ legacy: true })
 watch(copied, (val) => {
-  val && faToast.success('复制成功')
+  val && useFaToast().success('复制成功')
 })

 function open() {
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { useElementSize, useScroll } from '@vueuse/core'
-import { useHotkeyBindings } from '@/hotkeys/useHotkeys'
+import { useHotkeyBindings } from '@/hotkeys'
 import { useSlots } from '@/slots'
 import { cn } from '@/utils'
 import eventBus from '@/utils/eventBus'
 import AppSetting from './components/AppSetting/index.vue'
+import FloatingSidebarMenuButton from './components/FloatingSidebarMenuButton/index.vue'
 import Header from './components/Header/index.vue'
 import Hotkeys from './components/Hotkeys/index.vue'
 import MainSidebar from './components/MainSidebar/index.vue'
@@ -158,6 +159,7 @@ const enableAppSetting = import.meta.env.VITE_APP_SETTING
      </div>
      <!-- 移动端下，展开侧边栏时的遮罩层 -->
      <div :class="cn('invisible fixed inset-0 z-1009 bg-black/50 op-0 backdrop-blur-sm transition-opacity', { 'op-100 visible': appSettingsStore.mode === 'mobile' && !appSettingsStore.settings.menu.subMenuCollapse })" @click="appSettingsStore.toggleSidebarCollapse()" />
+      <FloatingSidebarMenuButton />
      <div class="main-container pb-[calc(var(--g-slots-layout-bottom-height)+var(--g-main-container-padding-bottom,0px))] pt-[calc(var(--g-slots-layout-top-height)+var(--g-header-actual-height)+var(--g-topbar-actual-height))]">
        <div
          class="fixed-content-around-area w-full inset-t-[calc(var(--g-slots-layout-top-height)+var(--g-header-actual-height))] inset-inline-1/2 fixed z-1005" :style="{
@@ -110,7 +110,7 @@ function extendClose(router: Router) {
 }

 declare module 'vue-router' {
-  interface Router {
+  interface _RouterClassic {
    /**
     * 本方法为框架扩展语法，会同时关闭当前标签页
     *
@@ -1,29 +0,0 @@
-import type { RouteRecordRaw } from 'vue-router'
-
-function Layout() {
-  return import('@/layouts/index.vue')
-}
-
-const routes: RouteRecordRaw = {
-  path: '/antdv_next_example',
-  component: Layout,
-  meta: {
-    title: 'Antdv Next',
-    icon: 'https://www.antdv-next.com/antdv-next.svg',
-    menu: false,
-  },
-  children: [
-    {
-      path: '',
-      name: 'antdvNextExample',
-      component: () => import('@/views/antdv_next_example/index.vue'),
-      meta: {
-        title: 'Antdv Next',
-        menu: false,
-        breadcrumb: false,
-      },
-    },
-  ],
-}
-
-export default routes
@@ -5,20 +5,19 @@ function Layout() {
 }

 const routes: RouteRecordRaw = {
-  path: '/vexip_ui_example',
+  path: '/ui_example',
  component: Layout,
  meta: {
-    title: 'Vexip UI',
-    icon: 'https://www.vexipui.com/vexip-ui.svg',
+    title: 'UI',
    menu: false,
  },
  children: [
    {
      path: '',
-      name: 'vexipUiExample',
-      component: () => import('@/views/vexip_ui_example/index.vue'),
+      name: 'uiExample',
+      component: () => import('@/views/ui_example/index.vue'),
      meta: {
-        title: 'Vexip UI',
+        title: 'UI',
        menu: false,
        breadcrumb: false,
      },
@@ -1,8 +1,8 @@
 import type { RouteRecordMainRaw } from '@fantastic-admin/types'
 import type { RouteRecordRaw } from 'vue-router'
 import pinia from '@/store'
-import AntdvNextExample from './modules/antdv.next.example'
 import MultilevelMenuExample from './modules/multilevel.menu.example'
+import UiExample from './modules/ui.example'

 // 固定路由（默认路由）
 const constantRoutes: RouteRecordRaw[] = [
@@ -72,7 +72,7 @@ const asyncRoutes: RouteRecordMainRaw[] = [
      icon: 'i-whh:jqueryui',
    },
    children: [
-      AntdvNextExample,
+      UiExample,
    ],
  },
 ]
@@ -94,16 +94,6 @@ export const useAppAccountStore = defineStore('appAccount', () => {
    await apiApp.passwordEdit(data)
  }

-  // 锁屏
-  function lock() {
-    localStorage.removeItem('token')
-  }
-
-  // 解锁
-  function unlock() {
-    localStorage.setItem('token', token.value)
-  }
-
  return {
    token,
    account,
@@ -115,7 +105,5 @@ export const useAppAccountStore = defineStore('appAccount', () => {
    requestLogout,
    getPermissions,
    editPassword,
-    lock,
-    unlock,
  }
 })
@@ -180,7 +180,7 @@ export const useAppMenuStore = defineStore(
        if (item.children) {
          return isPathInMenus(item.children, path)
        }
-        return path.indexOf(`${item.path}/`) === 0 || path === item.path
+        return path.startsWith(`${item.path}/`) || path === item.path
      })
      return flag
    }
@@ -1,5 +1,7 @@
 /* eslint-disable */
 /* prettier-ignore */
+/* oxlint-disable */
+/* oxfmt-ignore */
 // @ts-nocheck
 // noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
@@ -16,7 +18,6 @@ declare global {
  const defineComponent: typeof import('vue').defineComponent
  const defineStore: typeof import('pinia').defineStore
  const effectScope: typeof import('vue').effectScope
-  const faToast: typeof import('@fantastic-admin/components').faToast
  const getActivePinia: typeof import('pinia').getActivePinia
  const getCurrentInstance: typeof import('vue').getCurrentInstance
  const getCurrentScope: typeof import('vue').getCurrentScope
@@ -84,10 +85,11 @@ declare global {
  const useFaDrawer: typeof import('@fantastic-admin/components').useFaDrawer
  const useFaImagePreview: typeof import('@fantastic-admin/components').useFaImagePreview
  const useFaModal: typeof import('@fantastic-admin/components').useFaModal
+  const useFaToast: typeof import('@fantastic-admin/components').useFaToast
  const useId: typeof import('vue').useId
  const useLink: typeof import('vue-router').useLink
  const useModel: typeof import('vue').useModel
-  const usePagination: typeof import('../composables/pagination').usePagination
+  const usePagination: typeof import('@fantastic-admin/composables').usePagination
  const useRoute: typeof import('vue-router').useRoute
  const useRouter: typeof import('vue-router').useRouter
  const useSlots: typeof import('vue').useSlots
@@ -19,18 +19,24 @@ declare module 'vue' {
    AppNotAllowed: typeof import('./../components/AppNotAllowed/index.vue')['default']
    AppNotSupportedMobile: typeof import('./../components/AppNotSupportedMobile/index.vue')['default']
    AppSystemInfo: typeof import('./../components/AppSystemInfo/index.vue')['default']
+    FaAlert: typeof import('@fantastic-admin/components')['FaAlert']
    FaAvatar: typeof import('@fantastic-admin/components')['FaAvatar']
+    FaBadge: typeof import('@fantastic-admin/components')['FaBadge']
    FaButton: typeof import('@fantastic-admin/components')['FaButton']
    FaButtonGroup: typeof import('@fantastic-admin/components')['FaButtonGroup']
    FaCard: typeof import('@fantastic-admin/components')['FaCard']
    FaCheckbox: typeof import('@fantastic-admin/components')['FaCheckbox']
+    FaCheckboxGroup: typeof import('@fantastic-admin/components')['FaCheckboxGroup']
    FaCollapsible: typeof import('@fantastic-admin/components')['FaCollapsible']
    FaContextMenu: typeof import('@fantastic-admin/components')['FaContextMenu']
+    FaDescriptions: typeof import('@fantastic-admin/components')['FaDescriptions']
    FaDivider: typeof import('@fantastic-admin/components')['FaDivider']
    FaDrawer: typeof import('@fantastic-admin/components')['FaDrawer']
    FaDropdown: typeof import('@fantastic-admin/components')['FaDropdown']
    FaFileUpload: typeof import('@fantastic-admin/components')['FaFileUpload']
    FaFixedBar: typeof import('@fantastic-admin/components')['FaFixedBar']
+    FaForm: typeof import('@fantastic-admin/components')['FaForm']
+    FaFormItem: typeof import('@fantastic-admin/components')['FaFormItem']
    FaHoverCard: typeof import('@fantastic-admin/components')['FaHoverCard']
    FaIcon: typeof import('@fantastic-admin/components')['FaIcon']
    FaImagePreview: typeof import('@fantastic-admin/components')['FaImagePreview']
@@ -48,12 +54,15 @@ declare module 'vue' {
    FaPasswordStrength: typeof import('@fantastic-admin/components')['FaPasswordStrength']
    FaPopover: typeof import('@fantastic-admin/components')['FaPopover']
    FaProgress: typeof import('@fantastic-admin/components')['FaProgress']
+    FaRadioGroup: typeof import('@fantastic-admin/components')['FaRadioGroup']
    FaScrollArea: typeof import('@fantastic-admin/components')['FaScrollArea']
    FaSearchBar: typeof import('@fantastic-admin/components')['FaSearchBar']
    FaSelect: typeof import('@fantastic-admin/components')['FaSelect']
    FaSlider: typeof import('@fantastic-admin/components')['FaSlider']
    FaSwitch: typeof import('@fantastic-admin/components')['FaSwitch']
+    FaTable: typeof import('@fantastic-admin/components')['FaTable']
    FaTabs: typeof import('@fantastic-admin/components')['FaTabs']
+    FaTag: typeof import('@fantastic-admin/components')['FaTag']
    FaTextarea: typeof import('@fantastic-admin/components')['FaTextarea']
    FaToast: typeof import('@fantastic-admin/components')['FaToast']
    FaTooltip: typeof import('@fantastic-admin/components')['FaTooltip']
@@ -70,18 +79,24 @@ declare global {
  const AppNotAllowed: typeof import('./../components/AppNotAllowed/index.vue')['default']
  const AppNotSupportedMobile: typeof import('./../components/AppNotSupportedMobile/index.vue')['default']
  const AppSystemInfo: typeof import('./../components/AppSystemInfo/index.vue')['default']
+  const FaAlert: typeof import('@fantastic-admin/components')['FaAlert']
  const FaAvatar: typeof import('@fantastic-admin/components')['FaAvatar']
+  const FaBadge: typeof import('@fantastic-admin/components')['FaBadge']
  const FaButton: typeof import('@fantastic-admin/components')['FaButton']
  const FaButtonGroup: typeof import('@fantastic-admin/components')['FaButtonGroup']
  const FaCard: typeof import('@fantastic-admin/components')['FaCard']
  const FaCheckbox: typeof import('@fantastic-admin/components')['FaCheckbox']
+  const FaCheckboxGroup: typeof import('@fantastic-admin/components')['FaCheckboxGroup']
  const FaCollapsible: typeof import('@fantastic-admin/components')['FaCollapsible']
  const FaContextMenu: typeof import('@fantastic-admin/components')['FaContextMenu']
+  const FaDescriptions: typeof import('@fantastic-admin/components')['FaDescriptions']
  const FaDivider: typeof import('@fantastic-admin/components')['FaDivider']
  const FaDrawer: typeof import('@fantastic-admin/components')['FaDrawer']
  const FaDropdown: typeof import('@fantastic-admin/components')['FaDropdown']
  const FaFileUpload: typeof import('@fantastic-admin/components')['FaFileUpload']
  const FaFixedBar: typeof import('@fantastic-admin/components')['FaFixedBar']
+  const FaForm: typeof import('@fantastic-admin/components')['FaForm']
+  const FaFormItem: typeof import('@fantastic-admin/components')['FaFormItem']
  const FaHoverCard: typeof import('@fantastic-admin/components')['FaHoverCard']
  const FaIcon: typeof import('@fantastic-admin/components')['FaIcon']
  const FaImagePreview: typeof import('@fantastic-admin/components')['FaImagePreview']
@@ -99,12 +114,15 @@ declare global {
  const FaPasswordStrength: typeof import('@fantastic-admin/components')['FaPasswordStrength']
  const FaPopover: typeof import('@fantastic-admin/components')['FaPopover']
  const FaProgress: typeof import('@fantastic-admin/components')['FaProgress']
+  const FaRadioGroup: typeof import('@fantastic-admin/components')['FaRadioGroup']
  const FaScrollArea: typeof import('@fantastic-admin/components')['FaScrollArea']
  const FaSearchBar: typeof import('@fantastic-admin/components')['FaSearchBar']
  const FaSelect: typeof import('@fantastic-admin/components')['FaSelect']
  const FaSlider: typeof import('@fantastic-admin/components')['FaSlider']
  const FaSwitch: typeof import('@fantastic-admin/components')['FaSwitch']
+  const FaTable: typeof import('@fantastic-admin/components')['FaTable']
  const FaTabs: typeof import('@fantastic-admin/components')['FaTabs']
+  const FaTag: typeof import('@fantastic-admin/components')['FaTag']
  const FaTextarea: typeof import('@fantastic-admin/components')['FaTextarea']
  const FaToast: typeof import('@fantastic-admin/components')['FaToast']
  const FaTooltip: typeof import('@fantastic-admin/components')['FaTooltip']
@@ -4,13 +4,87 @@ import antdvNextLocaleZhCN from 'antdv-next/locale/zh_CN'

 const appSettingsStore = useAppSettingsStore()

+function toHexChannel(value: number) {
+  return Math.round(Math.min(Math.max(value, 0), 1) * 255).toString(16).padStart(2, '0')
+}
+
+function linearSrgbToSrgb(value: number) {
+  if (value <= 0.0031308) {
+    return 12.92 * value
+  }
+  return 1.055 * value ** (1 / 2.4) - 0.055
+}
+
+function oklchToHex(value: string) {
+  const normalizedValue = value
+    .trim()
+    .replace(/^oklch\(/, '')
+    .replace(/\)$/, '')
+
+  const [colorValue] = normalizedValue.split('/')
+  const [lightnessValue, chromaValue, hueValue] = colorValue.trim().split(/\s+/)
+
+  if (!lightnessValue || !chromaValue || !hueValue) {
+    return '#000000'
+  }
+
+  const lightness = lightnessValue.endsWith('%')
+    ? Number.parseFloat(lightnessValue) / 100
+    : Number.parseFloat(lightnessValue)
+  const chroma = Number.parseFloat(chromaValue)
+  const hue = Number.parseFloat(hueValue.replace(/deg$/, ''))
+
+  if ([lightness, chroma, hue].some(Number.isNaN)) {
+    return '#000000'
+  }
+
+  const hueInRadians = hue * Math.PI / 180
+  const a = chroma * Math.cos(hueInRadians)
+  const b = chroma * Math.sin(hueInRadians)
+
+  const l = lightness + 0.3963377774 * a + 0.2158037573 * b
+  const m = lightness - 0.1055613458 * a - 0.0638541728 * b
+  const s = lightness - 0.0894841775 * a - 1.291485548 * b
+
+  const l3 = l ** 3
+  const m3 = m ** 3
+  const s3 = s ** 3
+
+  const red = linearSrgbToSrgb(+4.0767416621 * l3 - 3.3077115913 * m3 + 0.2309699292 * s3)
+  const green = linearSrgbToSrgb(-1.2684380046 * l3 + 2.6097574011 * m3 - 0.3413193965 * s3)
+  const blue = linearSrgbToSrgb(-0.0041960863 * l3 - 0.7034186147 * m3 + 1.707614701 * s3)
+
+  return `#${toHexChannel(red)}${toHexChannel(green)}${toHexChannel(blue)}`
+}
+
+const token = ref({
+  colorPrimary: '',
+  borderRadius: 0,
+})
+
+watch([
+  () => appSettingsStore.settings.theme.colorScheme,
+  () => appSettingsStore.settings.theme.radius,
+], () => {
+  const rootStyles = getComputedStyle(document.documentElement)
+  token.value = {
+    colorPrimary: oklchToHex(rootStyles.getPropertyValue('--primary')),
+    borderRadius: Number.parseFloat(rootStyles.getPropertyValue('--radius')) * 16,
+  }
+}, {
+  immediate: true,
+})
+
 const themeConfig = computed(() => ({
  algorithm: appSettingsStore.currentColorScheme === 'dark' ? [theme.darkAlgorithm] : [theme.defaultAlgorithm],
+  token: token.value,
 }))
 </script>

 <template>
  <AConfigProvider :locale="antdvNextLocaleZhCN" :theme="themeConfig">
-    <slot />
+    <AApp class="size-full">
+      <slot />
+    </AApp>
  </AConfigProvider>
 </template>
@@ -33,12 +33,12 @@ const products = ref([
    ],
  },
  {
-    name: 'One-step-admin',
-    tagline: '干啥都快人一步的 Vue 中后台系统框架',
+    name: 'One-step Console',
+    tagline: '像导播一样编排你的工作现场',
    logo: 'https://one-step-admin.hurui.me/logo.png',
    url: 'https://one-step-admin.hurui.me',
    images: [
-      'https://one-step-admin.hurui.me/preview1.png',
+      'https://one-step-admin.hurui.me/hero_preview.png',
    ],
  },
 ])
@@ -193,46 +193,48 @@ function open(url: string) {
            class="group card-enter border rounded-xl bg-neutral-950/[.012] dark:bg-white/5"
            :style="{ animationDelay: `${i * 80}ms` }"
          >
-            <div class="flex flex-col h-full">
-              <div class="p-6 border-b flex gap-4 items-start">
-                <img :src="product.logo" :alt="product.name" class="shrink-0 h-10 w-10 object-contain">
-                <div>
-                  <div class="text-sm tracking-tight font-semibold">
-                    {{ product.name }}
-                  </div>
-                  <div class="text-xs text-muted-foreground leading-relaxed mt-1">
-                    {{ product.tagline }}
+            <div>
+              <div class="flex flex-col h-full">
+                <div class="p-6 border-b flex gap-4 items-start">
+                  <img :src="product.logo" :alt="product.name" class="shrink-0 h-10 w-10 object-contain">
+                  <div>
+                    <div class="text-sm tracking-tight font-semibold">
+                      {{ product.name }}
+                    </div>
+                    <div class="text-xs text-muted-foreground leading-relaxed mt-1">
+                      {{ product.tagline }}
+                    </div>
                  </div>
                </div>
-              </div>
-              <div class="p-6 flex-col-start flex-1">
-                <div v-if="product.features" class="mb-5 flex-1">
-                  <ul class="space-y-1.5">
-                    <li
-                      v-for="feature in product.features"
-                      :key="feature"
-                      class="text-xs text-muted-foreground flex gap-2 items-start"
+                <div class="p-6 flex-col-start flex-1">
+                  <div v-if="product.features" class="mb-5 flex-1">
+                    <ul class="space-y-1.5">
+                      <li
+                        v-for="feature in product.features"
+                        :key="feature"
+                        class="text-xs text-muted-foreground flex gap-2 items-start"
+                      >
+                        <span class="text-primary mt-0.5 shrink-0">·</span>
+                        <span>{{ feature }}</span>
+                      </li>
+                    </ul>
+                  </div>
+                  <div v-if="product.images" class="mb-5 border rounded-lg flex-1 overflow-hidden">
+                    <img
+                      :src="product.images[0]"
+                      :alt="product.name"
+                      class="opacity-50 h-full w-full transition-opacity duration-500 object-cover group-hover-opacity-100"
                    >
-                      <span class="text-primary mt-0.5 shrink-0">·</span>
-                      <span>{{ feature }}</span>
-                    </li>
-                  </ul>
-                </div>
-                <div v-if="product.images" class="mb-5 border rounded-lg flex-1 overflow-hidden">
-                  <img
-                    :src="product.images[0]"
-                    :alt="product.name"
-                    class="opacity-50 h-full w-full transition-opacity duration-500 object-cover group-hover-opacity-100"
+                  </div>
+                  <FaButton
+                    variant="link"
+                    size="sm"
+                    class="mt-auto active-scale-98"
+                    @click="open(product.url)"
                  >
+                    探索 →
+                  </FaButton>
                </div>
-                <FaButton
-                  variant="link"
-                  size="sm"
-                  class="mt-auto active-scale-98"
-                  @click="open(product.url)"
-                >
-                  探索 →
-                </FaButton>
              </div>
            </div>
          </div>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Hooray	be4a274f00	fix: 修复应用运行时警告	2026-08-30 01:31:08 +08:00
Hooray	6889792142	chore: 更新依赖	2026-08-28 15:35:36 +08:00
Hooray	b02192d293	style: 调整 FaPagination 组件的分页宽度样式	2026-08-14 19:01:29 +08:00
Hooray	09a179cd7f	fix: 修复 FaSwitch 组件激活样式	2026-08-14 18:58:17 +08:00
Hooray	1b3ed11d55	chore: 更新依赖	2026-08-01 08:04:31 +08:00
Hooray	d712653c17	chore: readme	2026-07-18 01:19:58 +08:00
Hooray	75197a0889	chore: 更新依赖	2026-07-17 21:48:36 +08:00
Hooray	3d7d9168d1	style: 规范 unocss class	2026-07-13 04:09:19 +08:00
Hooray	11dbd2baaf	chore: release v6.3.0	2026-07-05 01:32:46 +08:00
Hooray	a976b11183	chore: 更新依赖	2026-07-05 01:32:40 +08:00
Hooray	06b0be9196	refactor: `useClipboard` 增加兼容性支持	2026-07-05 01:28:22 +08:00
Hooray	fd33ab0c73	chore: 代码微调	2026-07-04 03:42:46 +08:00
Hooray	70506506be	chore: 更新依赖	2026-07-02 02:34:11 +08:00
Hooray	686988cced	feat: 增加 core-element-plus 应用，同时 core 应用将不再集成任何第三方组件库	2026-06-29 02:34:09 +08:00
Hooray	209cb17484	fix: 修复 Antdv Next 应用未和框架主题保持同步	2026-06-29 01:18:50 +08:00
Hooray	4784f893af	chore: 将 example 应用里示例页面中遗留的 element-plus 组件全部替换为内建组件	2026-06-29 01:02:37 +08:00
Hooray	29193e47e2	feat: 新增 FaForm 表单组件及示例，并更新登录注册相关页面	2026-06-27 17:31:07 +08:00
Hooray	e1ae0a1251	style: 调整 FaPageMain 样式	2026-06-27 15:32:23 +08:00
Hooray	68539bee0d	refactor: 重构 components 子包组件目录和导出结构	2026-06-24 16:38:56 +08:00
Hooray	de379dc904	chore: 更新依赖	2026-06-24 15:19:37 +08:00
Hooray	5bbe23df3e	feat: 新增 hotkeys 子包，统一维护全局快捷键	2026-06-24 03:13:24 +08:00
Hooray	ee62670209	style: 主页调整	2026-06-24 01:57:32 +08:00
Hooray	b504024ddc	chore: release v6.2.0	2026-06-12 23:40:53 +08:00
Hooray	a2ee25e900	chore: 移除/更换部分三方插件示例	2026-06-12 23:16:33 +08:00
Hooray	bf27f7f980	refactor: 更新页面重载逻辑以支持 Ctrl/⌘ 键	2026-06-12 23:10:06 +08:00
Hooray	699b6d5e4e	refactor: 修改 Router 接口为 _RouterClassic 以支持扩展语法	2026-06-12 23:09:00 +08:00
Hooray	c61a9caa44	chore: 更新依赖	2026-06-12 20:47:04 +08:00
Hooray	24348a70b2	chore: 更新主页 One-step Console 介绍	2026-06-11 12:26:11 +08:00
Hooray	c7dc819d06	docs: readme	2026-06-10 23:20:54 +08:00
Hooray	c0cd2ffc9f	feat(descriptions): 新增 FaDescriptions 组件及示例	2026-06-10 18:27:21 +08:00
Hooray	6ebdea493c	refactor: 重构标准模块列表	2026-06-08 15:10:38 +08:00
Hooray	05e3e6141b	feat(skill): 更新 fa-crud-page-generator	2026-06-08 15:08:14 +08:00
Hooray	57f98e7bb1	feat(table): 新增表格组件及示例	2026-06-08 15:00:38 +08:00
Hooray	29618d2816	style: 统一命名约定	2026-06-08 14:30:24 +08:00
Hooray	7277861ade	chore: 将 lucide-vue-next 替换为 @lucide/vue，并更新相关依赖	2026-06-04 19:14:42 +08:00
Hooray	f1c0258676	feat: 内建组件内的固定中文文案，改为可替换	2026-06-04 09:42:01 +08:00
Hooray	410ce626a8	feat(badge): 新增徽章组件及示例	2026-06-02 09:45:24 +08:00
Hooray	574d0fcccd	feat(tag): 新增标签组件及示例	2026-06-02 09:10:20 +08:00
Hooray	f6516782c0	revert!: 回滚 vite-plugin-fake-server 插件配置	2026-05-31 23:12:41 +08:00
Hooray	445e6c9e33	chore: 更新依赖	2026-05-28 15:34:55 +08:00
Hooray	2646930feb	fix: 修复 Drawer 和 Modal 组件的 isClosed 状态初始化逻辑	2026-05-28 13:27:43 +08:00
Hooray	eb4538c753	refactor: 将 example 中内建组件的示例，提取到子包中统一维护	2026-05-26 22:44:00 +08:00
Hooray	4e5bfb923d	feat(antdv-next): 添加 AApp 组件	2026-05-22 15:12:24 +08:00
Hooray	67656e5943	chore: 移除多余代码	2026-05-18 14:12:08 +08:00
Hooray	bd4bec9a9e	chore: 更新依赖	2026-05-18 00:40:30 +08:00
Hooray	26b5c165e3	style: 统一表单样式	2026-05-17 16:23:45 +08:00
Hooray	58452d656c	refactor: 子包里使用 createRequire 动态获取 PACKAGE_NAME	2026-05-17 13:36:38 +08:00
Hooray	749c55edbc	refactor!: 重构多个子包 - 移除 unbuild --stub 模式 - faToast -> useFaToast	2026-05-17 03:54:49 +08:00
Hooray	40cab5efa3	feat(alert): 添加 FaAlert 组件	2026-05-14 13:55:57 +08:00
Hooray	5f9a01fd29	feat(FaFileUpload): 增加文件夹上传和自定义上传请求功能	2026-05-13 09:04:25 +08:00
Hooray	a77416fbbe	feat(FaImageUpload): 增加文件夹上传和自定义上传请求功能	2026-05-13 09:00:14 +08:00
Hooray	2302186258	refactor: 更新 CheckboxGroupOption 和 RadioGroupOption 接口，支持泛型扩展	2026-05-12 21:49:54 +08:00
Hooray	f7789a4791	chore: 更新依赖	2026-05-12 01:09:31 +08:00
Hooray	474c11d9ea	refactor!: 上游 vite-plugin-fake-server 插件问题修复，代码回滚	2026-05-12 01:03:31 +08:00
Hooray	5356dbeee4	chore: readme	2026-05-10 20:41:28 +08:00
Hooray	e057f01edb	chore: release v6.1.0	2026-05-10 19:42:54 +08:00
Hooray	b4b68d78ea	chore: 更新依赖	2026-05-10 19:41:28 +08:00
Hooray	1b0dc3b947	refactor!: 因上游 vite-plugin-fake-server 插件问题，暂时移动 fake 文件目录	2026-05-10 19:40:33 +08:00
Hooray	244e6cb4fa	fix: 修复登录页“记住我”无法勾选	2026-05-10 14:43:57 +08:00
Hooray	ded93e90b7	chore: 更新依赖	2026-05-10 03:46:41 +08:00
Hooray	70b29edb6e	feat: 扩展 FaInput 组件的 type 属性	2026-05-06 17:41:00 +08:00
Hooray	fc2c89fa2d	feat: 更新 FaDrawer 和 FaModal 组件，强制关闭自带遮罩	2026-04-30 21:47:22 +08:00
Hooray	5ba6d08df3	feat: 新增 FaCheckboxGrou 组件，并重构 FaCheckbox API	2026-04-29 16:15:10 +08:00
Hooray	c0bc31f7f4	refactor!: 移除 FaRadioGroup 组件的 orientation 属性	2026-04-29 15:46:36 +08:00
Hooray	871dd5c56f	docs: 统一组件文档格式	2026-04-29 00:57:54 +08:00
Hooray	caedad8e72	style: 组件示例代码格式调整	2026-04-29 00:47:14 +08:00
Hooray	bb3bd479b8	feat: 新增 FaRadioGroup 组件	2026-04-29 00:46:48 +08:00
Hooray	931b10c1f3	style: 调整标准模块列表分割线的边距样式	2026-04-26 17:38:40 +08:00
Hooray	5e2558ac05	style: FaPageMain 组件样式调整	2026-04-26 11:25:14 +08:00
HoorayandCopilot	81beda6e56	feat: 添加 FaSelect 组件的定位模式支持 Co-authored-by: Copilot <copilot@github.com>	2026-04-25 21:56:26 +08:00
HoorayandCopilot	1d86ef87d3	feat: 主题色调整 Co-authored-by: Copilot <copilot@github.com>	2026-04-23 23:57:18 +08:00
Hooray	d0dc9275b3	refactor: 重命名组件和版权相关的导入及函数，以统一命名规范	2026-04-22 18:44:02 +08:00
Hooray	1ccbd6402b	feat: 将生成图标脚本提取到公用子包	2026-04-20 17:45:52 +08:00
Hooray	84eb9b7a39	fix: 修复icon生成脚本错误	2026-04-20 16:31:49 +08:00
Hooray	5e023d9055	chore: 添加 Antdv Next 组件库友链	2026-04-20 16:09:50 +08:00
Hooray	cf4a7eae7d	fix: 修复 FaDrawer 和 FaModal 组件开启时警告错误	2026-04-19 21:48:44 +08:00
Hooray	42b7ab33c6	chore: 更新 README 中 logo 展示	2026-04-19 21:09:19 +08:00
Hooray	85eefe75bb	refactor: 修改 @fantastic-admin/components 子包自动导入配置	2026-04-19 04:42:49 +08:00
Hooray	0bcea9d3c8	refactor: 迁移 composables 到 @fantastic-admin/composables 子包	2026-04-19 04:39:58 +08:00
Hooray	38e6abab21	feat: FaImageUpload 组件增加入场、出场、排序动画	2026-04-19 02:39:21 +08:00
Hooray	1c81115605	feat: FaImageUpload / FaFileUpload 增加粘贴上传功能	2026-04-18 14:04:12 +08:00
Hooray	e55e94743f	feat: 增强 dev 脚本匹配逻辑，支持以 'dev:' 开头的脚本名称	2026-04-17 22:23:03 +08:00
Hooray	efb0886e10	chore: 更新readme	2026-04-17 17:02:42 +08:00
Hooray	21750fcfd9	chore: release v6.0.0	2026-04-17 01:08:20 +08:00
Hooray	4786071c95	chore: 更新依赖	2026-04-17 01:02:35 +08:00
Hooray	04804f1201	refactor: skills 重构	2026-04-16 20:46:04 +08:00
Hooray	68ffded498	feat: 更新图标组件的切换动画，增加轻量缩放和模糊过渡效果	2026-04-16 04:05:30 +08:00
Hooray	d0029c019f	chore: 更新依赖	2026-04-16 01:49:18 +08:00
Hooray	09375401fe	refactor: 更新全局请求响应数据格式的注释，优化错误提示逻辑	2026-04-14 20:21:07 +08:00
Hooray	4a7601196f	feat: 增加侧边导航的展开按钮，会在移动端下访问，并且未开启工具栏时显示	2026-04-14 02:31:02 +08:00
Hooray	1680db6acd	chore: release v6.0.0-beta.5	2026-04-13 11:00:16 +08:00
Hooray	47816152bc	chore: 更新依赖	2026-04-13 10:49:02 +08:00
Hooray	807a39fb35	refactor: 删除 design-taste-frontend skill	2026-04-13 09:44:36 +08:00
Hooray	8f6c416e02	refactor: 移除不必要的对话框	2026-04-13 05:23:12 +08:00