chore: release v6.2.0

chore: 移除/更换部分三方插件示例
refactor: 更新页面重载逻辑以支持 Ctrl/⌘ 键
2026-10-07 02:54:05 +08:00 · 2026-06-12 23:40:53 +08:00 · 2026-06-12 23:16:33 +08:00 · 2026-06-12 23:10:06 +08:00 · 2026-06-12 23:09:00 +08:00 · 2026-06-12 20:47:04 +08:00
1000 changed files with 22547 additions and 22922 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?
@@ -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

@@ -56,57 +56,6 @@ If you find Fantastic-admin useful, or you are already using it, please consider

 ## 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

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

 - [`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,12 @@
    "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/settings": "workspace:*",
    "@fantastic-admin/types": "workspace:*",
    "@vee-validate/zod": "catalog:",
@@ -28,7 +29,6 @@
    "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)
@@ -32,7 +32,7 @@ const form = useForm({
 const onSubmit = form.handleSubmit((values) => {
  loading.value = true
  appAccountStore.editPassword(values).then(async () => {
-    faToast.success('模拟修改成功，请重新登录')
+    useFaToast().success('模拟修改成功，请重新登录')
    appAccountStore.logout()
  }).finally(() => {
    loading.value = false
@@ -61,7 +61,7 @@ const onSubmit = form.handleSubmit((values) => {
            </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" />
+            <FormMessage class="text-xs m-0 bottom-1 absolute" />
          </Transition>
        </FormItem>
      </FormField>
@@ -75,7 +75,7 @@ const onSubmit = form.handleSubmit((values) => {
            </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" />
+            <FormMessage class="text-xs m-0 bottom-1 absolute" />
          </Transition>
        </FormItem>
      </FormField>
@@ -89,7 +89,7 @@ const onSubmit = form.handleSubmit((values) => {
            </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" />
+            <FormMessage class="text-xs m-0 bottom-1 absolute" />
          </Transition>
        </FormItem>
      </FormField>
@@ -90,7 +90,7 @@ function testAccount(account: string) {
              </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" />
+              <FormMessage class="text-xs m-0 bottom-1 absolute" />
            </Transition>
          </FormItem>
        </FormField>
@@ -104,7 +104,7 @@ function testAccount(account: string) {
              </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" />
+              <FormMessage class="text-xs m-0 bottom-1 absolute" />
            </Transition>
          </FormItem>
        </FormField>
@@ -113,7 +113,7 @@ function testAccount(account: string) {
            <FormField v-slot="{ componentField }" type="checkbox" name="remember">
              <FormItem>
                <FormControl>
-                  <FaCheckbox v-bind="componentField">
+                  <FaCheckbox :model-value="componentField.modelValue" @update:model-value="componentField['onUpdate:modelValue']?.($event)">
                    记住我
                  </FaCheckbox>
                </FormControl>
@@ -63,7 +63,7 @@ const onSubmit = form.handleSubmit((values) => {
            </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" />
+            <FormMessage class="text-xs m-0 bottom-1 absolute" />
          </Transition>
        </FormItem>
      </FormField>
@@ -76,11 +76,11 @@ const onSubmit = form.handleSubmit((values) => {
              </template>
            </FaInput>
          </FormControl>
-          <FormDescription>
+          <FormDescription class="m-0">
            <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" />
+            <FormMessage class="text-xs m-0 bottom-1 absolute" />
          </Transition>
        </FormItem>
      </FormField>
@@ -94,7 +94,7 @@ const onSubmit = form.handleSubmit((values) => {
            </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" />
+            <FormMessage class="text-xs m-0 bottom-1 absolute" />
          </Transition>
        </FormItem>
      </FormField>
@@ -70,7 +70,7 @@ function handleSendCaptcha() {
            </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" />
+            <FormMessage class="text-xs m-0 bottom-1 absolute" />
          </Transition>
        </FormItem>
      </FormField>
@@ -81,7 +81,7 @@ function handleSendCaptcha() {
              <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" />
+              <FormMessage class="text-xs m-0 bottom-1 absolute" />
            </Transition>
          </FormItem>
        </FormField>
@@ -99,7 +99,7 @@ function handleSendCaptcha() {
            </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" />
+            <FormMessage class="text-xs m-0 bottom-1 absolute" />
          </Transition>
        </FormItem>
      </FormField>
@@ -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',
      })
    }
@@ -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>
@@ -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),
      },
    })
  }
@@ -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')" />
@@ -8,7 +8,7 @@ defineOptions({
 const route = useRoute()
 const { copy, copied } = useClipboard()
 watch(copied, (val) => {
-  val && faToast.success('复制成功')
+  val && useFaToast().success('复制成功')
 })

 function open() {
@@ -5,6 +5,7 @@ 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 {
    /**
     * 本方法为框架扩展语法，会同时关闭当前标签页
     *
@@ -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,
  }
 })
@@ -16,7 +16,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 +83,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,13 +19,17 @@ 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']
@@ -48,12 +52,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,13 +77,17 @@ 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']
@@ -99,12 +110,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',
    ],
  },
 ])
@@ -47,7 +47,10 @@ export default defineConfig(({ mode, command }) => {
    },
    plugins: createVitePlugins(mode, command === 'build'),
    optimizeDeps: {
-      exclude: ['@fantastic-admin/components'],
+      exclude: [
+        '@fantastic-admin/components',
+        '@fantastic-admin/composables',
+      ],
    },
    resolve: {
      alias: {
@@ -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,12 @@
    "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/settings": "workspace:*",
    "@fantastic-admin/types": "workspace:*",
    "@vee-validate/zod": "catalog:",
@@ -28,7 +29,6 @@
    "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)
@@ -32,7 +32,7 @@ const form = useForm({
 const onSubmit = form.handleSubmit((values) => {
  loading.value = true
  appAccountStore.editPassword(values).then(async () => {
-    faToast.success('模拟修改成功，请重新登录')
+    useFaToast().success('模拟修改成功，请重新登录')
    appAccountStore.logout()
  }).finally(() => {
    loading.value = false
@@ -61,7 +61,7 @@ const onSubmit = form.handleSubmit((values) => {
            </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" />
+            <FormMessage class="text-xs m-0 bottom-1 absolute" />
          </Transition>
        </FormItem>
      </FormField>
@@ -75,7 +75,7 @@ const onSubmit = form.handleSubmit((values) => {
            </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" />
+            <FormMessage class="text-xs m-0 bottom-1 absolute" />
          </Transition>
        </FormItem>
      </FormField>
@@ -89,7 +89,7 @@ const onSubmit = form.handleSubmit((values) => {
            </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" />
+            <FormMessage class="text-xs m-0 bottom-1 absolute" />
          </Transition>
        </FormItem>
      </FormField>
@@ -90,7 +90,7 @@ function testAccount(account: string) {
              </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" />
+              <FormMessage class="text-xs m-0 bottom-1 absolute" />
            </Transition>
          </FormItem>
        </FormField>
@@ -104,7 +104,7 @@ function testAccount(account: string) {
              </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" />
+              <FormMessage class="text-xs m-0 bottom-1 absolute" />
            </Transition>
          </FormItem>
        </FormField>
@@ -113,7 +113,7 @@ function testAccount(account: string) {
            <FormField v-slot="{ componentField }" type="checkbox" name="remember">
              <FormItem>
                <FormControl>
-                  <FaCheckbox v-bind="componentField">
+                  <FaCheckbox :model-value="componentField.modelValue" @update:model-value="componentField['onUpdate:modelValue']?.($event)">
                    记住我
                  </FaCheckbox>
                </FormControl>
@@ -63,7 +63,7 @@ const onSubmit = form.handleSubmit((values) => {
            </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" />
+            <FormMessage class="text-xs m-0 bottom-1 absolute" />
          </Transition>
        </FormItem>
      </FormField>
@@ -76,11 +76,11 @@ const onSubmit = form.handleSubmit((values) => {
              </template>
            </FaInput>
          </FormControl>
-          <FormDescription>
+          <FormDescription class="m-0">
            <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" />
+            <FormMessage class="text-xs m-0 bottom-1 absolute" />
          </Transition>
        </FormItem>
      </FormField>
@@ -94,7 +94,7 @@ const onSubmit = form.handleSubmit((values) => {
            </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" />
+            <FormMessage class="text-xs m-0 bottom-1 absolute" />
          </Transition>
        </FormItem>
      </FormField>
@@ -70,7 +70,7 @@ function handleSendCaptcha() {
            </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" />
+            <FormMessage class="text-xs m-0 bottom-1 absolute" />
          </Transition>
        </FormItem>
      </FormField>
@@ -81,7 +81,7 @@ function handleSendCaptcha() {
              <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" />
+              <FormMessage class="text-xs m-0 bottom-1 absolute" />
            </Transition>
          </FormItem>
        </FormField>
@@ -99,7 +99,7 @@ function handleSendCaptcha() {
            </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" />
+            <FormMessage class="text-xs m-0 bottom-1 absolute" />
          </Transition>
        </FormItem>
      </FormField>
@@ -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,
-  }
-}
@@ -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>
@@ -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),
      },
    })
  }
@@ -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')" />
@@ -8,7 +8,7 @@ defineOptions({
 const route = useRoute()
 const { copy, copied } = useClipboard()
 watch(copied, (val) => {
-  val && faToast.success('复制成功')
+  val && useFaToast().success('复制成功')
 })

 function open() {
@@ -5,6 +5,7 @@ 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 {
    /**
     * 本方法为框架扩展语法，会同时关闭当前标签页
     *
@@ -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,
  }
 })
@@ -16,7 +16,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 +83,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,13 +19,17 @@ 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']
@@ -48,12 +52,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,13 +77,17 @@ 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']
@@ -99,12 +110,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']
@@ -11,6 +11,8 @@ const themeConfig = computed(() => ({

 <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',
    ],
  },
 ])
@@ -47,7 +47,10 @@ export default defineConfig(({ mode, command }) => {
    },
    plugins: createVitePlugins(mode, command === 'build'),
    optimizeDeps: {
-      exclude: ['@fantastic-admin/components'],
+      exclude: [
+        '@fantastic-admin/components',
+        '@fantastic-admin/composables',
+      ],
    },
    resolve: {
      alias: {
@@ -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,12 @@
    "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/settings": "workspace:*",
    "@fantastic-admin/types": "workspace:*",
    "@vee-validate/zod": "catalog:",
@@ -27,7 +28,6 @@
    "eruda": "catalog:",
    "es-toolkit": "catalog:",
    "hotkeys-js": "catalog:",
-    "lucide-vue-next": "catalog:",
    "mitt": "catalog:",
    "nprogress": "catalog:",
    "path-browserify": "catalog:",
@@ -49,9 +49,9 @@
  },
  "devDependencies": {
    "@arco-design/web-vue": "catalog:arco-design-vue",
-    "@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)
@@ -32,7 +32,7 @@ const form = useForm({
 const onSubmit = form.handleSubmit((values) => {
  loading.value = true
  appAccountStore.editPassword(values).then(async () => {
-    faToast.success('模拟修改成功，请重新登录')
+    useFaToast().success('模拟修改成功，请重新登录')
    appAccountStore.logout()
  }).finally(() => {
    loading.value = false
@@ -61,7 +61,7 @@ const onSubmit = form.handleSubmit((values) => {
            </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" />
+            <FormMessage class="text-xs m-0 bottom-1 absolute" />
          </Transition>
        </FormItem>
      </FormField>
@@ -75,7 +75,7 @@ const onSubmit = form.handleSubmit((values) => {
            </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" />
+            <FormMessage class="text-xs m-0 bottom-1 absolute" />
          </Transition>
        </FormItem>
      </FormField>
@@ -89,7 +89,7 @@ const onSubmit = form.handleSubmit((values) => {
            </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" />
+            <FormMessage class="text-xs m-0 bottom-1 absolute" />
          </Transition>
        </FormItem>
      </FormField>
@@ -90,7 +90,7 @@ function testAccount(account: string) {
              </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" />
+              <FormMessage class="text-xs m-0 bottom-1 absolute" />
            </Transition>
          </FormItem>
        </FormField>
@@ -104,7 +104,7 @@ function testAccount(account: string) {
              </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" />
+              <FormMessage class="text-xs m-0 bottom-1 absolute" />
            </Transition>
          </FormItem>
        </FormField>
@@ -113,7 +113,7 @@ function testAccount(account: string) {
            <FormField v-slot="{ componentField }" type="checkbox" name="remember">
              <FormItem>
                <FormControl>
-                  <FaCheckbox v-bind="componentField">
+                  <FaCheckbox :model-value="componentField.modelValue" @update:model-value="componentField['onUpdate:modelValue']?.($event)">
                    记住我
                  </FaCheckbox>
                </FormControl>
@@ -63,7 +63,7 @@ const onSubmit = form.handleSubmit((values) => {
            </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" />
+            <FormMessage class="text-xs m-0 bottom-1 absolute" />
          </Transition>
        </FormItem>
      </FormField>
@@ -76,11 +76,11 @@ const onSubmit = form.handleSubmit((values) => {
              </template>
            </FaInput>
          </FormControl>
-          <FormDescription>
+          <FormDescription class="m-0">
            <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" />
+            <FormMessage class="text-xs m-0 bottom-1 absolute" />
          </Transition>
        </FormItem>
      </FormField>
@@ -94,7 +94,7 @@ const onSubmit = form.handleSubmit((values) => {
            </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" />
+            <FormMessage class="text-xs m-0 bottom-1 absolute" />
          </Transition>
        </FormItem>
      </FormField>
@@ -70,7 +70,7 @@ function handleSendCaptcha() {
            </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" />
+            <FormMessage class="text-xs m-0 bottom-1 absolute" />
          </Transition>
        </FormItem>
      </FormField>
@@ -81,7 +81,7 @@ function handleSendCaptcha() {
              <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" />
+              <FormMessage class="text-xs m-0 bottom-1 absolute" />
            </Transition>
          </FormItem>
        </FormField>
@@ -99,7 +99,7 @@ function handleSendCaptcha() {
            </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" />
+            <FormMessage class="text-xs m-0 bottom-1 absolute" />
          </Transition>
        </FormItem>
      </FormField>
@@ -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,
-  }
-}
@@ -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>
@@ -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),
      },
    })
  }
@@ -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')" />
@@ -8,7 +8,7 @@ defineOptions({
 const route = useRoute()
 const { copy, copied } = useClipboard()
 watch(copied, (val) => {
-  val && faToast.success('复制成功')
+  val && useFaToast().success('复制成功')
 })

 function open() {
@@ -5,6 +5,7 @@ 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 {
    /**
     * 本方法为框架扩展语法，会同时关闭当前标签页
     *
@@ -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,
  }
 })
@@ -16,7 +16,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 +83,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,13 +19,17 @@ 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']
@@ -48,12 +52,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,13 +77,17 @@ 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']
@@ -99,12 +110,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',
    ],
  },
 ])
@@ -47,7 +47,10 @@ export default defineConfig(({ mode, command }) => {
    },
    plugins: createVitePlugins(mode, command === 'build'),
    optimizeDeps: {
-      exclude: ['@fantastic-admin/components'],
+      exclude: [
+        '@fantastic-admin/components',
+        '@fantastic-admin/composables',
+      ],
    },
    resolve: {
      alias: {
@@ -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,12 @@
    "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/settings": "workspace:*",
    "@fantastic-admin/types": "workspace:*",
    "@vee-validate/zod": "catalog:",
@@ -27,7 +28,6 @@
    "eruda": "catalog:",
    "es-toolkit": "catalog:",
    "hotkeys-js": "catalog:",
-    "lucide-vue-next": "catalog:",
    "mitt": "catalog:",
    "nprogress": "catalog:",
    "path-browserify": "catalog:",
@@ -48,9 +48,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)
@@ -32,7 +32,7 @@ const form = useForm({
 const onSubmit = form.handleSubmit((values) => {
  loading.value = true
  appAccountStore.editPassword(values).then(async () => {
-    faToast.success('模拟修改成功，请重新登录')
+    useFaToast().success('模拟修改成功，请重新登录')
    appAccountStore.logout()
  }).finally(() => {
    loading.value = false
@@ -61,7 +61,7 @@ const onSubmit = form.handleSubmit((values) => {
            </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" />
+            <FormMessage class="text-xs m-0 bottom-1 absolute" />
          </Transition>
        </FormItem>
      </FormField>
@@ -75,7 +75,7 @@ const onSubmit = form.handleSubmit((values) => {
            </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" />
+            <FormMessage class="text-xs m-0 bottom-1 absolute" />
          </Transition>
        </FormItem>
      </FormField>
@@ -89,7 +89,7 @@ const onSubmit = form.handleSubmit((values) => {
            </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" />
+            <FormMessage class="text-xs m-0 bottom-1 absolute" />
          </Transition>
        </FormItem>
      </FormField>
@@ -90,7 +90,7 @@ function testAccount(account: string) {
              </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" />
+              <FormMessage class="text-xs m-0 bottom-1 absolute" />
            </Transition>
          </FormItem>
        </FormField>
@@ -104,7 +104,7 @@ function testAccount(account: string) {
              </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" />
+              <FormMessage class="text-xs m-0 bottom-1 absolute" />
            </Transition>
          </FormItem>
        </FormField>
@@ -113,7 +113,7 @@ function testAccount(account: string) {
            <FormField v-slot="{ componentField }" type="checkbox" name="remember">
              <FormItem>
                <FormControl>
-                  <FaCheckbox v-bind="componentField">
+                  <FaCheckbox :model-value="componentField.modelValue" @update:model-value="componentField['onUpdate:modelValue']?.($event)">
                    记住我
                  </FaCheckbox>
                </FormControl>
@@ -63,7 +63,7 @@ const onSubmit = form.handleSubmit((values) => {
            </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" />
+            <FormMessage class="text-xs m-0 bottom-1 absolute" />
          </Transition>
        </FormItem>
      </FormField>
@@ -76,11 +76,11 @@ const onSubmit = form.handleSubmit((values) => {
              </template>
            </FaInput>
          </FormControl>
-          <FormDescription>
+          <FormDescription class="m-0">
            <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" />
+            <FormMessage class="text-xs m-0 bottom-1 absolute" />
          </Transition>
        </FormItem>
      </FormField>
@@ -94,7 +94,7 @@ const onSubmit = form.handleSubmit((values) => {
            </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" />
+            <FormMessage class="text-xs m-0 bottom-1 absolute" />
          </Transition>
        </FormItem>
      </FormField>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
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