chore: release v6.3.0

- 移除 unbuild --stub 模式
- faToast -> useFaToast

.agents/skills/design-taste-frontend/SKILL.md

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

.agents/skills/fa-crud-page-generator/SKILL.md

@@ -0,0 +1,118 @@
+---
+name: fa-crud-page-generator
+description: "为 Fantastic-admin 框架生成完整的 CRUD 业务模块，遵循框架标准模块结构和内建 Fa* 组件体系，使用 FaForm/FaFormItem 生成新增/编辑表单，产出列表页、详情/编辑页、DetailForm 表单组件、API 模块、fake mock 数据、可选路由。用户说：'帮我做一个商品管理页面'、'搭一个用户列表，能搜索分页新增编辑删除'、'生成订单模块'、'新建 XX 管理模块'、'快速搭一个标准模块/CRUD 页面' 时，即使没有明确说 CRUD，也应触发此技能。"
+---
+
+# CRUD 页面生成器
+
+在 Fantastic-admin 框架中生成标准 CRUD 业务模块。生成时遵循框架当前标准模块结构：
+列表页、独立详情页、`DetailForm` 表单组件、API 模块、fake mock、可选路由和 route i18n
+要一次性配套生成。
+
+优先复刻框架现有写法，而不是重新发明页面结构：列表页用 `FaSearchBar` + `FaTable` +
+`FaPagination`，详情表单抽成 `components/DetailForm/index.vue`，独立详情页用
+`FaFixedBar` 固定顶部标题和底部提交区。
+
+**生成文件清单：**
+- `apps/<app>/src/views/{path}/{module}/list.vue` — 列表页
+- `apps/<app>/src/views/{path}/{module}/detail.vue` — 独立详情页，仅 `router` 模式需要
+- `apps/<app>/src/views/{path}/{module}/components/DetailForm/index.vue` — 新增/编辑表单
+- `apps/<app>/src/api/modules/{fileName}.ts` — API 模块
+- `apps/<app>/src/api/fake_modules/{fileName}.fake.ts` — fake mock 数据，可选
+- `apps/<app>/src/router/modules/{routeFileName}.ts` — 前端路由，可选
+- `apps/<app>/src/locales/lang/route/{locale}.json` — 路由标题 i18n，可选
+
+---
+
+## 先确认应用
+
+本项目是 pnpm monorepo。开始写文件前先确认目标应用：
+
+1. 如果用户已经明确写了 `apps/<app>`、`admin 应用`、`pro 应用` 等目标应用，直接使用该应用。
+2. 如果没有明确目标应用，先执行 `ls apps/` 查看可用应用，然后询问用户要生成到哪个应用，并等待回复。
+3. 后续所有路径都以 `apps/<app>/src/` 为根。
+
+不要默认猜测应用；生成到错误应用的返工成本很高。
+
+---
+
+## 信息收集
+
+尽量一次性收集会影响文件结构的信息：
+
+- **模块名**：英文，用于目录、API 文件和路由，如 `product`、`order`、`systemUser`
+- **模块中文名**：用于标题和提示，如 `商品`、`订单`、`用户`
+- **存放路径**：位于 `src/views/` 下的子路径，如 `mall`、`system/user`，可为空
+- **字段清单**：字段名、中文标签、类型、是否列表显示、是否搜索、是否表单显示、是否必填
+- **详情展示模式**：`router`、`modal`、`drawer`，默认 `router`
+- **是否启用批量删除**：默认启用
+- **是否支持列表高度自适应**：默认生成 `tableAutoHeight` 代码
+- **是否生成 fake mock**：开发阶段默认推荐生成
+- **是否生成路由和 route i18n**：仅当前端路由由本地配置维护时生成
+
+如果用户只给出模块名和很少字段，使用一个最小可运行字段：
+`title`（标题，`string`，列表/搜索/表单显示，必填），并在完成后提醒用户继续替换业务字段。
+
+---
+
+## 命名规范
+
+给定模块名 `name` 和路径 `path`（相对于 `apps/<app>/src/views/`）：
+
+| 用途 | 规则 | 示例（path 为空，name=product） |
+|------|------|----------------------------------------|
+| 视图目录 | `src/views/{path}/{snake_case(name)}/` | `src/views/product/` |
+| API 文件名 | path 参与业务命名时使用 camelCase；普通模块用 `camelCase(name)` | `product` |
+| fake 文件名 | 与 API 文件名一致，放到 `src/api/fake_modules/` | `product.fake.ts` |
+| 列表组件名 | `PascalCase({path}-{name}-list)` | `ProductList` |
+| 详情组件名 | `PascalCase({path}-{name}-detail)` | `ProductDetail` |
+| 路由 name | `camelCase(name)List` / `camelCase(name)Detail` | `productList` |
+| API URL 前缀 | `snake_case(path/name)`，无前导斜杠 | `product` |
+
+`snake_case` 用下划线连接多个单词，如 `productCategory` -> `product_category`。
+
+---
+
+## 代码生成规则
+
+详细模板见 [references/templates.md](references/templates.md)。生成时按这些规则填充模板：
+
+- `list.vue` 使用 `<script setup lang="ts">`，导入 `type { TableColumn } from '@fantastic-admin/components'`。
+- 表格列使用 `computed<TableColumn<Item>[]>(...)` 定义，页面模板使用 `FaTable` 的 `:columns` 与 `#cell-xxx` 插槽。
+- 搜索区使用 `FaSearchBar` + `FaLabel`，按钮保持“重置 / 筛选 / 展开收起”的顺序。
+- 工具栏通过 `FaTable` 的 `#toolbar` 插槽放“新增”和批量操作。
+- 行操作用 `FaButton size="icon-sm"` 编辑按钮和 `FaDropdown` 删除菜单。
+- 删除确认统一使用 `useFaModal().confirm`，提示成功统一使用 `useFaToast().success`。
+- `router` 模式在列表页通过 `eventBus.on('get-data-list')` 接收详情页提交后的刷新事件；卸载时 `eventBus.off('get-data-list')`。
+- `modal` / `drawer` 模式通过 `useFaModal().create` 或 `useFaDrawer().create` 渲染 `DetailForm`，confirm 时调用表单暴露的 `submit()`；仅当返回 `true` 时刷新列表并关闭。
+- `DetailForm` 使用 `FaForm/FaFormItem`，表单对象使用 `const model = ref<...>({...})`，通过 `useTemplateRef<FormExpose>('formRef')` 获取表单引用，并只 `defineExpose({ submit })` 给外部调用。
+- `submit()` 必须返回 `Promise<boolean>`：校验失败返回 `false`，新增/编辑成功后提示并返回 `true`。父级页面、modal、drawer 都必须检查返回值，避免校验失败时关闭页面或弹窗。
+- fake mock 文件放在 `apps/<app>/src/api/fake_modules/`，不是 `api/modules/`。
+- API 模块开启 mock 时在每个请求配置中设置 `fake: true`；不生成 fake 时去掉 `fake: true`。
+
+---
+
+## 路由生成
+
+如果用户选择生成路由，优先调用或参考 `fa-route-generator`，并遵循最新标准模块路由模式：
+
+- 父级路由指向 `Layout`，`meta.title` 使用 `$t('route.<module>.root')`，设置合适图标。
+- 列表子路由 `path: ''`，`name: '<module>List'`，组件指向 `list.vue`。
+- 当父级路由只作为菜单入口、列表页作为默认子页时，列表路由使用 `meta.menu: false` 和 `breadcrumb: false`；业务模块如需列表作为独立菜单项，可按用户需求保留菜单。
+- `router` 模式详情路由为 `detail/:id?`，`meta.menu: false`，`activeMenu` 指向列表/父菜单路径。
+- 为避免列表和详情标签页状态混乱，列表路由设置 `keepAlive: '<module>Detail'`，详情路由设置 `keepAlive: true` 与 `noKeepAlive: '<module>List'`。
+- route i18n 至少同步 `zh-cn`、`zh-tw`、`en` 三份 `src/locales/lang/route/*.json`。
+
+---
+
+## 生成前后检查
+
+写文件前展示将生成/修改的文件列表，确认不会覆盖用户已有业务文件。若目标文件已存在，先读取并说明将如何合并。
+
+完成后简要说明：
+- 已生成哪些文件；
+- 若未生成路由，提示可继续用 `fa-route-generator` 添加；
+- 若生成 fake mock，说明请求已配置 `fake: true`；
+- 若字段是枚举、状态、日期、上传等复杂类型，提醒用户按业务替换控件和 mock 取值。
+
+不要修改 `packages/components/` 内建组件；确实需要改内建组件时先征得用户确认。

.agents/skills/fa-crud-page-generator/references/templates.md

@@ -0,0 +1,872 @@
+# CRUD 代码模板
+
+生成业务模块时优先保持结构一致，再按字段和业务控件做替换。
+
+## 占位符
+
+- `{cname}` — 模块中文名，如 `商品`
+- `{moduleName}` — 模块英文名 camelCase，如 `product`
+- `{ModuleName}` — 模块英文名 PascalCase，如 `Product`
+- `{fileName}` — API 文件名，如 `product`
+- `{apiPrefix}` — API URL 前缀，无前导斜杠，如 `product`
+- `{componentNameList}` — 列表页组件名，如 `ProductList`
+- `{componentNameDetail}` — 详情页组件名，如 `ProductDetail`
+- `{routeListName}` — 列表路由 name，如 `productList`
+- `{routeDetailName}` — 详情路由 name，如 `productDetail`
+- `{routeRootName}` — 父级路由 name，如 `product`
+- `{routePath}` — 父级路由 path，如 `/product`
+- `{routeTitle}` — 路由标题，如 `商品管理`
+- `{formMode}` — `router`、`modal` 或 `drawer`
+- `{firstField}` — 删除确认中展示的主字段，如 `title`
+- `{formModelTypes}` — `DetailFormModel` 中除 `id` 外的字段类型
+- `{formValidationSchema}` — `FaForm` 的 validation schema 对象字段
+
+---
+
+## list.vue 模板
+
+```vue
+<script setup lang="ts">
+import type { TableColumn } from '@fantastic-admin/components'
+import api{ModuleName} from '@/api/modules/{fileName}'
+import eventBus from '@/utils/eventBus'
+import DetailForm from './components/DetailForm/index.vue'
+
+defineOptions({
+  name: '{componentNameList}',
+})
+
+interface {ModuleName}Item {
+  id: number
+  {itemTypeFields}
+}
+
+const router = useRouter()
+const { pagination, getParams, onSizeChange, onCurrentChange } = usePagination()
+
+// 表格是否自适应高度
+const tableAutoHeight = ref(false)
+
+/**
+ * 详情展示模式
+ * router 路由跳转
+ * modal 模态框
+ * drawer 抽屉
+ */
+const formMode = ref<'router' | 'modal' | 'drawer'>('{formMode}')
+
+// 详情
+const formModeProps = ref({
+  id: '' as number | string,
+})
+
+// 搜索
+const searchDefault = {
+  {searchDefaults}
+}
+const search = ref({ ...searchDefault })
+function searchReset() {
+  Object.assign(search.value, searchDefault)
+}
+
+// 批量操作
+const batch = ref({
+  enable: true,
+  selectionDataList: [] as {ModuleName}Item[],
+})
+
+// 列表
+const loading = ref(false)
+const dataList = ref<{ModuleName}Item[]>([])
+
+const tableColumns = computed<TableColumn<{ModuleName}Item>[]>(() => [
+  ...(batch.value.enable
+    ? [{
+      type: 'selection',
+      fixed: 'left',
+      width: 48,
+    } satisfies TableColumn<{ModuleName}Item>]
+    : []),
+  {tableColumns}
+  {
+    id: 'operation',
+    header: '操作',
+    width: 120,
+    align: 'center',
+    fixed: 'right',
+  },
+])
+
+onMounted(() => {
+  getDataList()
+  if (formMode.value === 'router') {
+    eventBus.on('get-data-list', () => {
+      getDataList()
+    })
+  }
+})
+
+onBeforeUnmount(() => {
+  if (formMode.value === 'router') {
+    eventBus.off('get-data-list')
+  }
+})
+
+function getDataList() {
+  loading.value = true
+  const params = {
+    ...getParams(),
+    {searchParams}
+  }
+  api{ModuleName}.list(params).then((res: any) => {
+    loading.value = false
+    dataList.value = res.data.list
+    pagination.value.total = res.data.total
+  })
+}
+
+// 每页数量切换
+function sizeChange(size: number) {
+  onSizeChange(size).then(() => getDataList())
+}
+
+// 当前页码切换（翻页）
+function currentChange(page = 1) {
+  onCurrentChange(page).then(() => getDataList())
+}
+
+const formRef = ref<InstanceType<typeof DetailForm>>()
+
+const { open: openModal, update: updateModal } = useFaModal().create({
+  destroyOnClose: true,
+  closeOnClickOverlay: false,
+  closeOnPressEscape: false,
+  beforeClose: (action, done) => {
+    if (action === 'confirm') {
+      // 调用 DetailForm 组件内部 submit 方法
+      formRef.value?.submit().then((success) => {
+        if (!success) {
+          return
+        }
+
+        getDataList()
+        done()
+      })
+    }
+    else {
+      done()
+    }
+  },
+  content: () => h(DetailForm, {
+    ref: formRef,
+    id: formModeProps.value.id,
+  }),
+})
+
+const { open: openDrawer, update: updateDrawer } = useFaDrawer().create({
+  destroyOnClose: true,
+  closeOnClickOverlay: false,
+  closeOnPressEscape: false,
+  beforeClose: (action, done) => {
+    if (action === 'confirm') {
+      // 调用 DetailForm 组件内部 submit 方法
+      formRef.value?.submit().then((success) => {
+        if (!success) {
+          return
+        }
+
+        getDataList()
+        done()
+      })
+    }
+    else {
+      done()
+    }
+  },
+  content: () => h(DetailForm, {
+    ref: formRef,
+    id: formModeProps.value.id,
+  }),
+})
+
+function onCreate() {
+  if (formMode.value === 'router') {
+    router.push({
+      name: '{routeDetailName}',
+    })
+  }
+  else {
+    formModeProps.value.id = ''
+    if (formMode.value === 'modal') {
+      updateModal({
+        title: '新增{cname}',
+      })
+      openModal()
+    }
+    else {
+      updateDrawer({
+        title: '新增{cname}',
+      })
+      openDrawer()
+    }
+  }
+}
+
+function onEdit(row: {ModuleName}Item) {
+  if (formMode.value === 'router') {
+    router.push({
+      name: '{routeDetailName}',
+      params: {
+        id: row.id,
+      },
+    })
+  }
+  else {
+    formModeProps.value.id = row.id
+    if (formMode.value === 'modal') {
+      updateModal({
+        title: '编辑{cname}',
+      })
+      openModal()
+    }
+    else {
+      updateDrawer({
+        title: '编辑{cname}',
+      })
+      openDrawer()
+    }
+  }
+}
+
+function onDel(row: {ModuleName}Item) {
+  useFaModal().confirm({
+    title: '确认信息',
+    content: `确认删除「${row.{firstField}}」吗？`,
+    onConfirm: () => {
+      api{ModuleName}.delete(row.id).then(() => {
+        getDataList()
+        useFaToast().success('删除成功')
+      })
+    },
+  })
+}
+
+function onBatchDel() {
+  const rows = batch.value.selectionDataList
+  if (!rows.length) {
+    return
+  }
+
+  useFaModal().confirm({
+    title: '确认信息',
+    content: `确认删除选中的 ${rows.length} 条数据吗？`,
+    onConfirm: () => {
+      Promise.all(rows.map(row => api{ModuleName}.delete(row.id))).then(() => {
+        getDataList()
+        useFaToast().success('批量删除成功')
+      })
+    },
+  })
+}
+</script>
+
+<template>
+  <div :class="{ 'absolute flex flex-col size-full': tableAutoHeight }">
+    <FaPageHeader title="{cname}管理" class="mb-0" />
+    <FaPageMain :class="{ 'flex-1 overflow-auto': tableAutoHeight }" :main-class="{ 'flex-1 flex flex-col overflow-auto': tableAutoHeight }">
+      <FaSearchBar :show-toggle="false">
+        <template #default="{ fold, toggle }">
+          <div class="gap-x-8 gap-y-2 grid grid-cols-[repeat(auto-fit,minmax(300px,1fr))]">
+            {searchFields}
+            <div class="flex gap-2 col-end--1 justify-end">
+              <FaButton variant="outline" @click="searchReset(); currentChange()">
+                重置
+              </FaButton>
+              <FaButton type="primary" @click="currentChange()">
+                <FaIcon name="i-ri:search-line" />
+                筛选
+              </FaButton>
+              <FaButton variant="ghost" @click="toggle">
+                {{ fold ? '展开' : '收起' }}
+                <FaIcon :name="fold ? 'i-ep:caret-bottom' : 'i-ep:caret-top'" />
+              </FaButton>
+            </div>
+          </div>
+        </template>
+      </FaSearchBar>
+      <div class="mx--4 my-3 border-t border-t-dashed" />
+      <FaTable
+        v-loading="loading"
+        table-root-class="rounded-lg overflow-hidden"
+        :class="{ 'min-h-0 flex-1': tableAutoHeight }"
+        row-key="id"
+        selectable
+        multiple
+        stripe
+        column-visibility
+        border
+        :columns="tableColumns"
+        :data="dataList"
+        @selection-change="batch.selectionDataList = $event"
+      >
+        <template #toolbar>
+          <div class="flex flex-1 gap-2 items-center">
+            <FaButton @click="onCreate">
+              新增
+            </FaButton>
+            <FaDropdown
+              v-if="batch.enable"
+              :items="[
+                [
+                  { label: '批量删除', variant: 'destructive', disabled: !batch.selectionDataList.length, handle: onBatchDel },
+                ],
+              ]"
+            >
+              <FaButton variant="outline" :disabled="!batch.selectionDataList.length">
+                批量操作
+                <FaIcon name="i-ep:arrow-down" />
+              </FaButton>
+            </FaDropdown>
+          </div>
+        </template>
+        {tableCellSlots}
+        <template #cell-operation="{ row }">
+          <div class="flex-center gap-2">
+            <FaButton variant="outline" size="icon-sm" @click="onEdit(row.original)">
+              <FaIcon name="i-ri:edit-line" />
+            </FaButton>
+            <FaDropdown
+              :items="[
+                [
+                  { label: '删除', variant: 'destructive', handle: () => onDel(row.original) },
+                ],
+              ]"
+            >
+              <FaButton variant="outline" size="icon-sm">
+                <FaIcon name="i-ri:more-line" />
+              </FaButton>
+            </FaDropdown>
+          </div>
+        </template>
+      </FaTable>
+      <FaPagination :page="pagination.page" :size="pagination.size" :total="pagination.total" class="mt-2" @page-change="currentChange" @size-change="sizeChange" />
+    </FaPageMain>
+  </div>
+</template>
+```
+
+业务页面保持简洁标题即可，不要在 `FaPageHeader #description` 中加入解释技能或模板来源的说明文字。
+
+---
+
+## detail.vue 模板（router 模式）
+
+```vue
+<script setup lang="ts">
+import eventBus from '@/utils/eventBus'
+import DetailForm from './components/DetailForm/index.vue'
+
+defineOptions({
+  name: '{componentNameDetail}',
+})
+
+const route = useRoute()
+const router = useRouter()
+
+const appPage = useAppPage()
+
+onMounted(() => {
+  appPage.setCustomTitle(route.params.id ? '编辑' : '新增')
+})
+onUnmounted(() => {
+  appPage.resetCustomTitle()
+})
+
+const formRef = useTemplateRef('formRef')
+
+function onSubmit() {
+  formRef.value?.submit().then((success) => {
+    if (!success) {
+      return
+    }
+
+    eventBus.emit('get-data-list')
+    onCancel()
+  })
+}
+
+function onCancel() {
+  router.back({ name: '{routeListName}' })
+}
+</script>
+
+<template>
+  <div>
+    <FaFixedBar position="top" class="p-0">
+      <FaPageHeader :title="route.params.id ? '编辑{cname}' : '新增{cname}'" class="mb-0 border-b-none">
+        <FaButton variant="outline" size="sm" class="rounded-full" @click="onCancel">
+          <FaIcon name="i-ep:arrow-left" />
+          返回
+        </FaButton>
+      </FaPageHeader>
+    </FaFixedBar>
+    <FaPageMain>
+      <div class="max-w-4xl w-full">
+        <DetailForm :id="route.params.id as string" ref="formRef" />
+      </div>
+    </FaPageMain>
+    <FaFixedBar position="bottom" class="flex-center gap-4">
+      <FaButton @click="onSubmit">
+        提交
+      </FaButton>
+      <FaButton variant="outline" @click="onCancel">
+        取消
+      </FaButton>
+    </FaFixedBar>
+  </div>
+</template>
+```
+
+---
+
+## components/DetailForm/index.vue 模板
+
+```vue
+<script setup lang="ts">
+import type { FormExpose } from '@fantastic-admin/components'
+import { ref } from 'vue'
+import api{ModuleName} from '@/api/modules/{fileName}'
+
+export interface Props {
+  id?: number | string
+}
+const props = withDefaults(
+  defineProps<Props>(),
+  {
+    id: '',
+  },
+)
+
+const loading = ref(false)
+const formRef = useTemplateRef<FormExpose>('formRef')
+
+interface DetailFormModel {
+  id: number | string
+  {formModelTypes}
+}
+
+const model = ref<DetailFormModel>({
+  id: props.id,
+  {formInitialValues}
+})
+
+const validationSchema = {
+  {formValidationSchema}
+}
+
+onMounted(() => {
+  if (model.value.id !== '') {
+    getInfo()
+  }
+})
+
+function getInfo() {
+  loading.value = true
+  api{ModuleName}.detail(model.value.id).then((res: any) => {
+    loading.value = false
+    {formAssign}
+  }).catch(() => {
+    loading.value = false
+  })
+}
+
+async function submit() {
+  const result = await formRef.value?.validate()
+
+  if (!result?.valid) {
+    return false
+  }
+
+  if (model.value.id === '') {
+    await api{ModuleName}.create(model.value)
+    useFaToast().success('新增成功')
+  }
+  else {
+    await api{ModuleName}.edit(model.value)
+    useFaToast().success('编辑成功')
+  }
+
+  return true
+}
+
+defineExpose({
+  submit,
+})
+</script>
+
+<template>
+  <div v-loading="loading">
+    <FaForm
+      ref="formRef"
+      :model="model"
+      :validation-schema="validationSchema"
+      label-placement="right"
+      :label-width="120"
+    >
+      {formFields}
+    </FaForm>
+  </div>
+</template>
+```
+
+---
+
+## api/modules/{fileName}.ts 模板
+
+```typescript
+import api from '../index'
+
+export default {
+  list: (data: {
+    {searchTypes}
+    from: number
+    limit: number
+  }) => api.get('{apiPrefix}/list', {
+    params: data,
+    fake: true,
+  }),
+
+  detail: (id: number | string) => api.get('{apiPrefix}/detail', {
+    params: {
+      id,
+    },
+    fake: true,
+  }),
+
+  create: (data: any) => api.post('{apiPrefix}/create', data, {
+    fake: true,
+  }),
+
+  edit: (data: any) => api.post('{apiPrefix}/edit', data, {
+    fake: true,
+  }),
+
+  delete: (id: number | string) => api.post('{apiPrefix}/delete', {
+    id,
+  }, {
+    fake: true,
+  }),
+}
+```
+
+不生成 fake mock 时，去掉所有 `fake: true` 配置，并确保接口地址与真实后端约定一致。
+
+---
+
+## api/fake_modules/{fileName}.fake.ts 模板
+
+```typescript
+import { faker } from '@faker-js/faker'
+import { defineFakeRoute } from 'vite-plugin-fake-server/client'
+
+// {cname}
+const {moduleName}List: any[] = []
+for (let i = 0; i < 50; i++) {
+  {moduleName}List.push({
+    id: i + 1,
+    {mockFields}
+  })
+}
+
+export default defineFakeRoute([
+  {
+    url: '/fake/{apiPrefix}/list',
+    method: 'get',
+    response: ({ query }) => {
+      const { {searchQueryFields}, from, limit } = query
+      const list = {moduleName}List.filter((item) => {
+        return {searchFilterExpression}
+      })
+      const pageList = list.filter((_item, index) => {
+        return index >= ~~from && index < (~~from + ~~limit)
+      })
+      return {
+        error: '',
+        status: 1,
+        data: {
+          list: pageList,
+          total: list.length,
+        },
+      }
+    },
+  },
+  {
+    url: '/fake/{apiPrefix}/detail',
+    method: 'get',
+    response: ({ query }) => {
+      const info = {moduleName}List.filter(item => item.id === ~~query.id)
+      return {
+        error: '',
+        status: 1,
+        data: info[0],
+      }
+    },
+  },
+  {
+    url: '/fake/{apiPrefix}/create',
+    method: 'post',
+    response: () => {
+      return {
+        error: '',
+        status: 1,
+        data: {
+          isSuccess: true,
+        },
+      }
+    },
+  },
+  {
+    url: '/fake/{apiPrefix}/edit',
+    method: 'post',
+    response: () => {
+      return {
+        error: '',
+        status: 1,
+        data: {
+          isSuccess: true,
+        },
+      }
+    },
+  },
+  {
+    url: '/fake/{apiPrefix}/delete',
+    method: 'post',
+    response: () => {
+      return {
+        error: '',
+        status: 1,
+        data: {
+          isSuccess: true,
+        },
+      }
+    },
+  },
+])
+```
+
+如果有多个搜索字段，可以用 `&&` 组合过滤条件：
+
+```typescript
+return (title ? item.title.includes(title) : true)
+  && (status !== undefined && status !== '' ? item.status === ~~status : true)
+```
+
+---
+
+## router/modules/{routeFileName}.ts 模板
+
+```typescript
+import type { RouteRecordRaw } from 'vue-router'
+import { $t } from '@/locales'
+
+function Layout() {
+  return import('@/layouts/index.vue')
+}
+
+const routes: RouteRecordRaw = {
+  path: '{routePath}',
+  component: Layout,
+  name: '{routeRootName}',
+  meta: {
+    title: '{routeTitle}',
+    icon: '{icon}',
+  },
+  children: [
+    {
+      path: '',
+      name: '{routeListName}',
+      component: () => import('@/views/{viewPath}/list.vue'),
+      meta: {
+        title: '{cname}列表',
+        menu: false,
+        breadcrumb: false,
+        keepAlive: '{routeDetailName}',
+      },
+    },
+    {
+      path: 'detail/:id?',
+      name: '{routeDetailName}',
+      component: () => import('@/views/{viewPath}/detail.vue'),
+      meta: {
+        title: '...',
+        menu: false,
+        activeMenu: '{routePath}',
+        keepAlive: true,
+        noKeepAlive: '{routeListName}',
+      },
+    },
+  ],
+}
+
+export default routes
+```
+
+`modal` / `drawer` 模式不需要详情路由，列表路由也不需要 `keepAlive: '{routeDetailName}'`。
+
+---
+
+## 字段生成规则
+
+### TypeScript item 字段
+
+```typescript
+title: string
+status: number
+createdAt: string
+```
+
+### 搜索默认值和查询参数
+
+```typescript
+const searchDefault = {
+  title: '',
+  status: '',
+}
+
+const params = {
+  ...getParams(),
+  ...(search.value.title && { title: search.value.title }),
+  ...(search.value.status !== '' && { status: search.value.status }),
+}
+```
+
+### 搜索栏字段
+
+首个主要搜索字段直接显示，次要搜索条件使用 `v-show="!fold"`：
+
+```vue
+<FaLabel label="{label}" class="col-span-1">
+  <FaInput
+    v-model="search.{field}"
+    placeholder="请输入{label}，支持模糊查询"
+    clearable
+    class="w-full"
+    @keydown.enter="currentChange()"
+    @clear="currentChange()"
+  />
+</FaLabel>
+```
+
+### FaTable 列
+
+普通字段：
+
+```typescript
+{
+  accessorKey: '{field}',
+  header: '{label}',
+},
+```
+
+需要自定义展示的字段使用 `id`，并在模板里添加 `#cell-{id}` 插槽：
+
+```typescript
+{
+  id: 'status',
+  header: '状态',
+  width: 100,
+  align: 'center',
+},
+```
+
+```vue
+<template #cell-status="{ row }">
+  <FaBadge :variant="row.original.status ? 'default' : 'secondary'">
+    {{ row.original.status ? '启用' : '停用' }}
+  </FaBadge>
+</template>
+```
+
+### 表单字段
+
+```vue
+<FaFormItem name="{field}" label="{label}" required>
+  <FaInput placeholder="请输入{label}" class="w-full" />
+</FaFormItem>
+```
+
+`FaFormItem` 会自动向第一个子控件注入 `modelValue` 和 `onUpdate:modelValue`，不要再手写
+`v-model="model.{field}"` 或 `v-model="model.value.{field}"`。
+
+### 表单 model 类型字段
+
+```typescript
+{field}: string
+status: number
+enabled: boolean
+```
+
+### 表单初始值
+
+```typescript
+{field}: '',
+status: 0,
+enabled: true,
+```
+
+### 表单详情赋值
+
+```typescript
+model.value.{field} = res.data.{field}
+```
+
+### 表单验证 schema
+
+文本输入：
+
+```typescript
+{field}(value: string) {
+  return value?.trim() ? true : '请输入{label}'
+},
+```
+
+选择、开关、日期：
+
+```typescript
+{field}(value: string | number | boolean | undefined) {
+  return value !== undefined && value !== '' ? true : '请选择{label}'
+},
+```
+
+非必填字段不要生成 validation schema 项；生成必填字段时，在对应 `FaFormItem` 上同时加
+`required`。
+
+### Mock 数据字段映射
+
+| 字段类型/含义 | faker 方法 |
+|---------------|------------|
+| 标题 | `faker.book.title()` 或 `faker.lorem.words(3)` |
+| 名称 | `faker.person.fullName()` 或 `faker.commerce.productName()` |
+| 用户名 | `faker.internet.username()` |
+| 手机号 | `faker.phone.number()` |
+| 邮箱 | `faker.internet.email()` |
+| 描述 | `faker.lorem.sentence()` |
+| 数量 | `faker.number.int({ min: 1, max: 100 })` |
+| 金额 | `faker.number.float({ min: 10, max: 9999, fractionDigits: 2 })` |
+| 布尔状态 | `faker.datatype.boolean()` |
+| 枚举状态 | `faker.helpers.arrayElement([0, 1, 2])` |
+| 日期 | `faker.date.recent().toISOString()` |
+
+### Mock 搜索过滤
+
+字符串模糊匹配：
+
+```typescript
+title ? item.title.includes(title) : true
+```
+
+数字/枚举精确匹配。注意 query 参数是字符串，`0` 不能用普通 truthy 判断：
+
+```typescript
+status !== undefined && status !== '' ? item.status === ~~status : true
+```

.agents/skills/fa-form-builder/SKILL.md

@@ -1,11 +1,11 @@
 ---
 name: fa-form-builder
-description: "为 Fantastic-admin 框架生成独立的表单页面，使用 vee-validate + zod 验证，全部使用框架内建 Fa* 组件。当用户说：'帮我做一个用户信息填写页'、'我只需要一个提交表单，不需要列表'、'做个设置页面，有几个输入框和保存按钮'、'生成一个注册/编辑/配置表单页'、'只要表单页，不需要增删改查'，即使用户只是说'做个表单页面'也应触发此技能。"
+description: "为 Fantastic-admin 框架生成独立的表单页面，使用 FaForm/FaFormItem + vee-validate + zod 验证，表单 model 使用 ref，全部使用框架内建 Fa* 组件。当用户说：'帮我做一个用户信息填写页'、'我只需要一个提交表单，不需要列表'、'做个设置页面，有几个输入框和保存按钮'、'生成一个注册/编辑/配置表单页'、'只要表单页，不需要增删改查'，即使用户只是说'做个表单页面'也应触发此技能。"
 ---
 
 # 表单页面生成器
 
-在 Fantastic-admin 框架中生成独立的 Router 表单页面，使用 vee-validate + zod 完成表单验证，全部使用框架内建 Fa* 组件，不引入任何 Element Plus 组件。
+在 Fantastic-admin 框架中生成独立的 Router 表单页面，使用 `FaForm/FaFormItem` 承接 vee-validate + zod 表单验证。
 
 **生成的文件：**
 - `apps/<app>/src/views/{path}/{name}/index.vue` — 表单页面（含验证、提交骨架、固定操作栏）
@@ -50,14 +50,14 @@ description: "为 Fantastic-admin 框架生成独立的表单页面，使用 vee
 
 字段较多时单列会导致页面过长，双列更紧凑。根据字段数量和复杂度判断是否询问用户布局偏好：
 
-- **单列**：`max-w-600px`，`space-y-6`（字段少、字段较长时适合）
+- **单列**：`max-w-600px`，`grid gap-6`（字段少、字段较长时适合）
 - **双列**：`max-w-1200px`，`grid grid-cols-1 gap-x-8 gap-y-6 items-start md:grid-cols-2`（字段多、字段较短时适合）
 
 ### Step 4：确认并生成
 
 汇总信息，展示将要生成的文件，确认后写入。
 
-生成完成后提示：如需配置路由，请使用 `fa-route-generator` 技能；如需 API 模块，请手动创建。
+生成完成后提示：如需配置路由，请使用 `fa-route-generator` 技能；如需 API 模块，请使用 `fa-crud-page-generator` 或手动创建。
 
 ---
 
@@ -80,9 +80,10 @@ description: "为 Fantastic-admin 框架生成独立的表单页面，使用 vee
 - `{cname}` → 模块中文名
 - `{componentName}` → PascalCase 组件名
 - `{zodSchema}` → zod 字段定义（每个必填字段对应一行 zod 规则）
-- `{initialValues}` → 字段初始值（string 默认 `''`，boolean 默认 `false`，number 默认 `0`，array 默认 `[]`）
-- `{formItems}` → 各字段对应的 FormField 代码片段
+- `{initialValues}` → `model` 字段初始值（string 默认 `''`，boolean 默认 `false`，number 默认 `0`，array 默认 `[]`）
+- `{formItems}` → 各字段对应的 FaFormItem 代码片段
+- `{imports}` → 必要的额外 import；默认留空，Fa* 组件通常由自动导入处理
 - `{maxWidth}` → 单列 `max-w-600px` / 双列 `max-w-1200px`
-- `{gridClass}` → 双列时 `grid grid-cols-1 gap-x-8 gap-y-6 items-start md:grid-cols-2` / 单列时 `space-y-6`
+- `{gridClass}` → 双列时 `grid grid-cols-1 gap-x-8 gap-y-6 items-start md:grid-cols-2` / 单列时 `grid gap-6`
 
-生成的代码是骨架：API 调用处用 `// TODO:` 注释标记，动态数据源（select options、upload action 等）用占位注释标记，用户根据实际接口替换。操作栏按钮使用 `FaButton`：取消用 `variant="outline"`，提交用默认 variant 并传 `:loading="isSubmitting"`。
+生成的代码是骨架：API 调用处用 `// TODO:` 注释标记，动态数据源（select options、upload action 等）用占位注释标记，用户根据实际接口替换。表单对象必须使用 `const model = ref({...})`，模板中直接 `:model="model"`；脚本里读写字段使用 `model.value.xxx`。操作栏按钮使用 `FaButton`：取消用 `variant="outline"`，提交用默认 variant 并传 `:loading="loading"`。

.agents/skills/fa-form-builder/references/templates.md

@@ -1,16 +1,16 @@
 # 表单页面代码模板
 
-使用 vee-validate + zod 验证，全部使用 Fa* 内建组件，不引入任何 Element Plus 组件。
+使用 FaForm/FaFormItem + vee-validate + zod 验证。
 
 占位符说明：
 - `{cname}` — 模块中文名
 - `{componentName}` — 组件名（PascalCase）
 - `{zodSchema}` — zod 字段定义
-- `{initialValues}` — 表单初始值
-- `{formItems}` — FormField 列表
+- `{initialValues}` — `model` 表单初始值
+- `{formItems}` — FaFormItem 列表
 - `{imports}` — 需要手动 import 的组件
 - `{maxWidth}` — 单列 `max-w-600px` / 双列 `max-w-1200px`
-- `{gridClass}` — 双列时 `grid grid-cols-1 gap-x-8 gap-y-6 items-start md:grid-cols-2` / 单列时 `space-y-6`
+- `{gridClass}` — 双列时 `grid grid-cols-1 gap-x-8 gap-y-6 items-start md:grid-cols-2` / 单列时 `grid gap-6`
 
 ---
 
@@ -18,10 +18,10 @@
 
 ```vue
 <script setup lang="ts">
+import type { FormExpose } from '@fantastic-admin/components'
 import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
+import { ref } from 'vue'
 import * as z from 'zod'
-import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/ui/shadcn/ui/form'
 {imports}
 
 defineOptions({
@@ -30,22 +30,30 @@ defineOptions({
 
 const router = useRouter()
 
-const formSchema = toTypedSchema(z.object({
+const formRef = useTemplateRef<FormExpose>('formRef')
+const loading = ref(false)
+
+const model = ref({
+  {initialValues}
+})
+
+const validationSchema = toTypedSchema(z.object({
   {zodSchema}
 }))
 
-const { handleSubmit, isSubmitting } = useForm({
-  validationSchema: formSchema,
-  initialValues: {
-    {initialValues}
-  },
-})
+async function onSubmit(values: typeof model.value) {
+  loading.value = true
+  try {
+    // TODO: 调用 API，如 apiXxx.create(values) 或 apiXxx.edit(values)
+  }
+  finally {
+    loading.value = false
+  }
+}
 
-const loading = ref(false)
-
-const onSubmit = handleSubmit(async (values) => {
-  // TODO: 调用 API，如 apiXxx.create(values) 或 apiXxx.edit(values)
-})
+async function submit() {
+  await formRef.value?.submit()
+}
 
 function handleCancel() {
   router.back()
@@ -57,16 +65,22 @@ function handleCancel() {
     <FaPageHeader title="{cname}" />
     <FaPageMain>
       <div v-loading="loading" class="mx-auto {maxWidth}">
-        <form class="{gridClass}" @submit="onSubmit">
+        <FaForm
+          ref="formRef"
+          :model="model"
+          :validation-schema="validationSchema"
+          class="{gridClass}"
+          @submit="onSubmit"
+        >
           {formItems}
-        </form>
+        </FaForm>
       </div>
     </FaPageMain>
     <FaFixedBar position="bottom" class="flex gap-2 justify-center">
       <FaButton type="button" variant="outline" @click="handleCancel">
         取消
       </FaButton>
-      <FaButton type="submit" :loading="isSubmitting" @click="onSubmit">
+      <FaButton type="button" :loading="loading" @click="submit">
         提交
       </FaButton>
     </FaFixedBar>
@@ -76,146 +90,92 @@ function handleCancel() {
 
 ---
 
-## 各字段类型的 FormField 片段
+## 各字段类型的 FaFormItem 片段
 
 ```vue
 <!-- FaInput（文本） -->
-<FormField v-slot="{ componentField }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
-    <FormControl>
-      <FaInput v-bind="componentField" placeholder="请输入{label}" class="w-full" />
-    </FormControl>
-    <FormMessage />
-  </FormItem>
-</FormField>
+<FaFormItem name="{field}" label="{label}" required>
+  <FaInput placeholder="请输入{label}" class="w-full" />
+</FaFormItem>
 
 <!-- FaInput（密码）+ FaPasswordStrength -->
-<FormField v-slot="{ componentField }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
-    <FormControl>
-      <div class="w-full space-y-2">
-        <FaInput v-bind="componentField" type="password" placeholder="请输入{label}" class="w-full" />
-        <FaPasswordStrength :model-value="componentField.modelValue" />
-      </div>
-    </FormControl>
-    <FormMessage />
-  </FormItem>
-</FormField>
+<FaFormItem name="{field}" label="{label}" required>
+  <FaInput type="password" placeholder="请输入{label}" class="w-full" />
+  <template #description="{ value }">
+    <FaPasswordStrength :password="(value as string) ?? ''" />
+  </template>
+</FaFormItem>
 
 <!-- FaTextarea -->
-<FormField v-slot="{ componentField }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
-    <FormControl>
-      <FaTextarea v-bind="componentField" placeholder="请输入{label}" class="w-full" />
-    </FormControl>
-    <FormMessage />
-  </FormItem>
-</FormField>
+<FaFormItem name="{field}" label="{label}" required>
+  <FaTextarea placeholder="请输入{label}" class="w-full" />
+</FaFormItem>
 
 <!-- FaSelect -->
-<FormField v-slot="{ componentField }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
-    <FormControl>
-      <FaSelect v-bind="componentField" :options="{field}Options" placeholder="请选择{label}" class="w-full" />
-    </FormControl>
-    <FormMessage />
-  </FormItem>
-</FormField>
+<FaFormItem name="{field}" label="{label}" required>
+  <FaSelect :options="{field}Options" placeholder="请选择{label}" class="w-full" />
+</FaFormItem>
 <!-- script 中同时生成 options 占位：const {field}Options = ref([{ label: '选项1', value: 1 }]) -->
 
-<!-- FaSwitch（componentField 会传字符串，需手动绑定 boolean） -->
-<FormField v-slot="{ value, handleChange }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
-    <FormControl>
-      <FaSwitch :model-value="value" @update:model-value="handleChange" />
-    </FormControl>
-    <FormMessage />
-  </FormItem>
-</FormField>
+<!-- FaSwitch -->
+<FaFormItem name="{field}" label="{label}">
+  <FaSwitch />
+</FaFormItem>
 
 <!-- FaCheckbox（多选，手动维护数组） -->
-<FormField v-slot="{ value, handleChange }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
+<FaFormItem name="{field}" label="{label}">
+  <template #default="{ value, setValue }">
     <div class="flex flex-wrap gap-4">
       <FaCheckbox
         v-for="opt in {field}Options"
         :key="opt.value"
-        :model-value="value?.includes(opt.value)"
-        @update:model-value="(checked) => handleChange(checked ? [...(value || []), opt.value] : (value || []).filter(v => v !== opt.value))"
+        :model-value="((value as string[] | undefined) ?? []).includes(opt.value)"
+        @update:model-value="(checked) => setValue(checked ? [...((value as string[] | undefined) ?? []), opt.value] : ((value as string[] | undefined) ?? []).filter(v => v !== opt.value))"
       >
         {{ opt.label }}
       </FaCheckbox>
     </div>
-    <FormMessage />
-  </FormItem>
-</FormField>
+  </template>
+</FaFormItem>
 <!-- script 中同时生成 options 占位：const {field}Options = [{ label: '选项1', value: '1' }] -->
 
-<!-- 日期（原生 input） -->
-<FormField v-slot="{ componentField }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
-    <FormControl>
-      <input v-bind="componentField" type="date" class="w-full h-9 rounded-md border border-input bg-background px-3 py-1 text-sm" />
-    </FormControl>
-    <FormMessage />
-  </FormItem>
-</FormField>
+<!-- 日期 -->
+<FaFormItem name="{field}" label="{label}" required>
+  <FaInput type="date" class="w-full" />
+</FaFormItem>
+
+<!-- 日期时间 -->
+<FaFormItem name="{field}" label="{label}" required>
+  <FaInput type="datetime-local" class="w-full" />
+</FaFormItem>
 
 <!-- FaImageUpload -->
-<FormField v-slot="{ value, handleChange }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
-    <FormControl>
-      <FaImageUpload :model-value="value" action="/upload/image" @update:model-value="handleChange" />
-    </FormControl>
-    <FormMessage />
-  </FormItem>
-</FormField>
+<FaFormItem name="{field}" label="{label}" required>
+  <FaImageUpload action="/upload/image" />
+</FaFormItem>
 
 <!-- FaFileUpload -->
-<FormField v-slot="{ value, handleChange }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
-    <FormControl>
-      <FaFileUpload :model-value="value" action="/upload/file" @update:model-value="handleChange" />
-    </FormControl>
-    <FormMessage />
-  </FormItem>
-</FormField>
+<FaFormItem name="{field}" label="{label}" required>
+  <FaFileUpload action="/upload/file" />
+</FaFormItem>
 
 <!-- FaIconPicker -->
-<FormField v-slot="{ componentField }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
-    <FormControl>
-      <FaIconPicker v-bind="componentField" />
-    </FormControl>
-    <FormMessage />
-  </FormItem>
-</FormField>
+<FaFormItem name="{field}" label="{label}">
+  <FaIconPicker />
+</FaFormItem>
 
 <!-- FaNumberField -->
-<FormField v-slot="{ value, handleChange }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
-    <FormControl>
-      <FaNumberField :model-value="value" class="w-full" @update:model-value="handleChange" />
-    </FormControl>
-    <FormMessage />
-  </FormItem>
-</FormField>
+<FaFormItem name="{field}" label="{label}" required>
+  <FaNumberField class="w-full" />
+</FaFormItem>
 
 <!-- 双列布局中需要占满整行的字段，加 md:col-span-2 -->
-<!-- <FormField ... class="md:col-span-2"><FormItem class="md:col-span-2"> -->
+<!-- <FaFormItem name="{field}" label="{label}" class="md:col-span-2"> -->
 ```
 
+`FaFormItem` 会自动向第一个子控件注入 `modelValue` 和 `onUpdate:modelValue`，默认不要手写
+`v-model`。只有多选、组合控件等非单一控件场景，才使用 slot props 手动调用 `setValue`。
+
 ---
 
 ## zod 验证规则片段
@@ -251,16 +211,10 @@ function handleCancel() {
 
 ---
 
-## 需要手动 import 的组件
+## 组件导入说明
 
-以下组件不在自动导入范围内，使用时需在 script 顶部添加 import：
-
-```typescript
-import FaImageUpload from '@/ui/components/FaImageUpload/index.vue'
-import FaFileUpload from '@/ui/components/FaFileUpload/index.vue'
-import FaIconPicker from '@/ui/components/FaIconPicker/index.vue'
-import FaNumberField from '@/ui/components/FaNumberField/index.vue'
-```
+Fantastic-admin 应用默认通过组件解析器自动导入 `Fa*` 组件，通常不需要手动 import。
+只有目标应用未启用自动导入或组件解析器缺少对应组件时，才按该应用本地约定补充 import。
 
 ---
 
@@ -276,8 +230,8 @@ import FaNumberField from '@/ui/components/FaNumberField/index.vue'
 | 下拉、选择、类型、分类、状态（枚举值） | `FaSelect` | 生成 options 数组占位 |
 | 开关、启用、禁用、是否、boolean | `FaSwitch` | |
 | 复选、多选 | `FaCheckbox`（多个） | 每个选项一个 FaCheckbox，手动维护数组 |
-| 日期 | 原生 `<input type="date">` | 暂无 Fa 内建日期选择器 |
-| 日期时间 | 原生 `<input type="datetime-local">` | |
+| 日期 | `FaInput type="date"` | |
+| 日期时间 | `FaInput type="datetime-local"` | |
 | 图片、头像、封面、缩略图 | `FaImageUpload` | |
 | 文件、附件 | `FaFileUpload` | |
 | 图标 | `FaIconPicker` | |

.agents/skills/fa-framework-settings/SKILL.md

@@ -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) - 快捷键、切换动画、进度条等

.agents/skills/fa-framework-settings/references/app-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,     // 允许用户自定义页面设置
-  }
-}
-```

.agents/skills/fa-framework-settings/references/menu-settings.md

@@ -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: {

.agents/skills/fa-framework-settings/references/page-settings.md

@@ -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: {

.agents/skills/fa-framework-settings/references/tabbar-settings.md

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

.agents/skills/fa-framework-settings/references/theme-settings.md

@@ -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: {

.agents/skills/fa-framework-settings/references/topbar-settings.md

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

.agents/skills/fa-page-optimizer/references/components-catalog.md

@@ -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` | 统一的徽章样式 |
 
 ### 替换常见功能实现
 

.agents/skills/fa-route-generator/SKILL.md

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

.agents/skills/fa-route-generator/references/examples.md

@@ -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' }, // 点击导航时携带参数
-      },
-    },
-  ],
-}
-```
-
 ## 路由配置调整
 
 ### 权限配置调整

.agents/skills/fa-route-generator/references/route-meta.md

@@ -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`
-- **说明**: 是否显示版权,如果不设置,则使用全局配置

.agents/skills/fa-store-generator/references/store-patterns.md

@@ -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` | 菜单徽章状态 |
 
 ---
 

.agents/skills/fa-theme-customizer/SKILL.md

@@ -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
 ```
 
 ## 参考资源

.claude/settings.json

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

.claude/skills/design-taste-frontend

@@ -1 +0,0 @@
-../../.agents/skills/design-taste-frontend

.github/workflows/deploy-example.yml

@@ -4,7 +4,7 @@ on:
   push:
     branches: [main]
     paths:
-      - 'apps/examples/**'
+      - 'apps/example/**'
       - pnpm-lock.yaml
       - pnpm-workspace.yaml
   workflow_dispatch:

README.EN.md

@@ -1,124 +1,61 @@
-[中文](./README.md) | **English**
+[中文](./readme.md) | **English**
+<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>
 
-<p align="center">
-  <img src="https://fantastic-admin.hurui.me/logo.svg" width="200" height="200" alt="Fantastic-admin" />
-</p>
+# Fantastic-admin
 
-<h1 align="center">Fantastic-admin</h1>
+An **AI-oriented** admin system framework
 
-<p align="center">An <b>out-of-the-box</b> Vue3 management system framework</p>
-
-<p align="center">
+<p>
   <a href="https://fantastic-admin.hurui.me" target="_blank">Official Website</a>
   <span>&nbsp;|&nbsp;</span>
   <a href="https://fantastic-admin.pages.dev" target="_blank">Backup URL</a>
-<p>
-
-<p align="center">
-  <a href="###"><img src="https://img.shields.io/github/license/fantastic-admin/basic?label=License&style=flat-square" alt="" /></a>
-  <a href="https://github.com/fantastic-admin/basic/releases" target="_blank"><img src="https://img.shields.io/github/v/release/fantastic-admin/basic?label=Version&style=flat-square" alt="" /></a>
 </p>
 
+<p>
+  <a href="###"><img src="https://img.shields.io/github/license/fantastic-admin/basic?label=License&style=flat-square" alt="" /></a>
+  <a href="https://github.com/fantastic-admin/basic/releases" target="_blank"><img src="https://img.shields.io/github/v/release/fantastic-admin/basic?label=Current%20Version&style=flat-square" alt="" /></a>
+</p>
+
+![hero](https://fantastic-admin.hurui.me/hero_preview.png)
+
 ## Features
 
-- Freely replaceable UI component library, default using Element Plus
-- Rich layouts and themes, covering various back-office application scenarios in the market, compatible with PC, tablet and mobile
-- Provides system configuration files for easy personalized customization
-- Automatically generates navigation bar based on route configuration
-- File system-based routing
-- Supports comprehensive permission verification
-- Built-in multi-level routing best caching solution
-- Easy internationalization and multi-language adaptation
-- Provides tab functionality with an experience close to native browser tab operations
+> Some features are available in the Professional Edition
+
+- AI-friendly engineering foundation with multiple built-in Skills
+- First-class tech stack: Vue 3.6 / Vite 8 / Pinia / UnoCSS / VueUse / TypeScript / ESLint / Stylelint / ...
+- Freely choose your preferred UI library, with Element Plus by default
+- 8 built-in theme schemes with extensibility for distinct industry brand styles
+- 7 navigation menu modes to match products at different growth stages
+- Fine-grained and controllable page keep-alive strategy
+- Comprehensive permission validation
+- Internationalization and RTL support
+- 19 reserved slots for flexible product extensions
 
 ## Download
 
-> This repository is the basic version
+> This repository is the Basic Edition
 
-**Directly pulling the source code may include unreleased content. It is recommended to download the stable version zip package from the [Github Releases](https://github.com/fantastic-admin/basic/releases) page**.
-
-## Preview
-
-> Preview screenshots are from Vue3 Professional version
-
-<table>
-  <tr>
-    <td><img src="https://fantastic-admin.hurui.me/preview1.png" alt="" /></td>
-    <td><img src="https://fantastic-admin.hurui.me/preview2.png" alt="" /></td>
-    <td><img src="https://fantastic-admin.hurui.me/preview3.png" alt="" /></td>
-  </tr>
-  <tr>
-    <td><img src="https://fantastic-admin.hurui.me/preview4.png" alt="" /></td>
-    <td><img src="https://fantastic-admin.hurui.me/preview5.png" alt="" /></td>
-    <td><img src="https://fantastic-admin.hurui.me/preview6.png" alt="" /></td>
-  </tr>
-</table>
+Pulling the source code directly may include unreleased content. It is recommended to download the stable release package from the [Github Releases](https://github.com/fantastic-admin/basic/releases) page.
 
 ## Support
 
-If you think the Fantastic-admin framework is good, or you are already using it, I hope you can give me a ⭐ on **Github**, which will be a great encouragement to me.
+If you find Fantastic-admin useful, or you are already using it, please consider giving it a star on **Github** / **Gitee** / **GitCode**. This is a significant help for the project's visibility.
 
 [![star](https://img.shields.io/github/stars/fantastic-admin/basic?style=social)](https://github.com/fantastic-admin/basic)
 
+[![star](https://gitee.com/fantastic-admin/basic/badge/star.svg?theme=dark)](https://gitee.com/fantastic-admin/basic)
+
+[![star](https://atomgit.com/fantastic-admin/basic/star/badge.svg)](https://atomgit.com/fantastic-admin/basic)
+
 <details>
-<summary>Github Stars Curve</summary>
+<summary>Github Stars Chart</summary>
 
 [![Stargazers over time](https://starchart.cc/fantastic-admin/basic.svg)](https://starchart.cc/fantastic-admin/basic)
 </details>
 
 ## Ecosystem
 
-<table>
-  <tr>
-    <th colspan="3" align="center">
-      <a href="https://hooray.github.io/fantastic-startkit/" target="_blank">Fantastic-startkit</a>
-    </th>
-  </tr>
-  <tr>
-    <th colspan="3" align="center">
-      A simple and easy-to-use Vue3 project startup 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 middle and back-office management system framework that's always one step ahead
-    </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 unique 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

README.md

@@ -1,62 +1,46 @@
 **中文** | [English](./README.EN.md)
+<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>
 
-<p align="center">
-  <img src="https://fantastic-admin.hurui.me/logo.svg" width="200" height="200" alt="Fantastic-admin" />
-</p>
+# Fantastic-admin
 
-<h1 align="center">Fantastic-admin</h1>
+面向 **AI** 的管理系统框架
 
-<p align="center">一款<b>开箱即用</b>的 Vue3 管理系统框架</p>
-
-<p align="center">
+<p>
   <a href="https://fantastic-admin.hurui.me" target="_blank">官网</a>
   <span>&nbsp;|&nbsp;</span>
   <a href="https://fantastic-admin.pages.dev" target="_blank">备用地址</a>
-<p>
+</p>
 
-<p align="center">
+<p>
   <a href="###"><img src="https://img.shields.io/github/license/fantastic-admin/basic?label=%E5%BC%80%E6%BA%90%E5%8D%8F%E8%AE%AE&style=flat-square" alt="" /></a>
   <a href="https://github.com/fantastic-admin/basic/releases" target="_blank"><img src="https://img.shields.io/github/v/release/fantastic-admin/basic?label=%E5%BD%93%E5%89%8D%E7%89%88%E6%9C%AC&style=flat-square" alt="" /></a>
 </p>
 
+![hero](https://fantastic-admin.hurui.me/hero_preview.png)
+
 ## 特点
 
-- 可自由替换 UI 组件库，默认使用 Element Plus
-- 丰富的布局与主题，覆盖市面上各种中后台应用场景，兼容PC、平板和移动端
-- 提供系统配置文件，轻松实现个性化定制
-- 根据路由配置自动生成导航栏
-- 基于文件系统的路由
-- 支持全方位权限验证
-- 内置多级路由最佳缓存方案
-- 轻松实现国际化多语言适配
-- 提供接近于浏览器原生标签栏操作体验的标签页功能
+> 部分为专业版能力
+
+- AI 友好的工程底座，内置多个 Skills
+- 一流的技术栈：Vue 3.6 / Vite 8 / Pinia / UnoCSS / VueUse / TypeScript / ESLint / Stylelint / ...
+- 自由选择喜爱的三方 UI 库
+- 18 套默认主题方案且可扩展，给不同行业提供专属品牌气质
+- 7 款导航菜单模式，匹配产品发展的各个阶段
+- 精细可控的页面保活策略
+- 全方位权限验证
+- 国际化、RTL支持
+- 19 处预留插槽，灵活扩展产品内容
 
 ## 下载
 
 > 本仓库为基础版
 
-**直接拉取源码可能会包含未发布的内容，推荐去 [Github Releases](https://github.com/fantastic-admin/basic/releases) 页面下载稳定版本的压缩包**。
-
-## 预览
-
-> 预览截图为 Vue3 专业版
-
-<table>
-  <tr>
-    <td><img src="https://fantastic-admin.hurui.me/preview1.png" alt="" /></td>
-    <td><img src="https://fantastic-admin.hurui.me/preview2.png" alt="" /></td>
-    <td><img src="https://fantastic-admin.hurui.me/preview3.png" alt="" /></td>
-  </tr>
-  <tr>
-    <td><img src="https://fantastic-admin.hurui.me/preview4.png" alt="" /></td>
-    <td><img src="https://fantastic-admin.hurui.me/preview5.png" alt="" /></td>
-    <td><img src="https://fantastic-admin.hurui.me/preview6.png" alt="" /></td>
-  </tr>
-</table>
+直接拉取源码可能会包含未发布的内容，推荐去 [Github Releases](https://github.com/fantastic-admin/basic/releases) 页面下载稳定版本的压缩包。
 
 ## 支持
 
-如果觉得 Fantastic-admin 这个框架不错，或者已经在使用了，希望你可以在 **Github** / **Gitee** / **GitCode** 帮我点个 ⭐ ，这将对我是极大的鼓励。
+如果觉得 Fantastic-admin 这个框架不错，或者已经在使用了，希望你可以在 **Github** / **Gitee** / **GitCode** 帮我点个 ⭐ ，这将对本产品的推广有极大帮助。
 
 [![star](https://img.shields.io/github/stars/fantastic-admin/basic?style=social)](https://github.com/fantastic-admin/basic)
 
@@ -72,57 +56,6 @@
 
 ## 生态
 
-<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">
-      一款简单好用的 Vue3 项目启动套件
-    </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">
-      一款干啥都快人一步的 Vue 后台管理系统框架
-    </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">
-      一款自成一派的移动端 H5 框架
-    </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/) - 简单好用的 Vue3 项目启动套件
+- [`Fantastic-mobile`](https://fantastic-mobile.hurui.me/) - 让你的 H5 项目拥有稳固的工程底座
+- [`One-step Console`](https://one-step-admin.hurui.me) - 像导播一样编排你的工作现场

apps/core-ant-design-vue/.env.development

@@ -0,0 +1,40 @@
+# 应用配置面板
+# Application configuration panel
+VITE_APP_SETTING = true
+
+# 网站标题
+# Website title
+VITE_APP_TITLE = Fantastic-admin
+
+# 网络请求地址，应用于 axios 的 baseURL
+# Network request address, applied to axios's baseURL
+VITE_APP_API_BASEURL = /
+
+# localStorage/sessionStorage 前缀
+# localStorage/sessionStorage prefix
+VITE_APP_STORAGE_PREFIX = fa_dev_
+
+# 调试工具，可设置 eruda 或 vconsole
+# Debugging tool, can set eruda or vconsole
+VITE_APP_DEBUG_TOOL =
+
+# ===== 以下配置仅在开发环境生效 =====
+# ===== The following configuration is only effective in the development environment. =====
+
+# 启用代理
+# Enable proxy
+VITE_ENABLE_PROXY = false
+
+# 启用 Vue 开发工具
+# Enable Vue DevTools
+VITE_ENABLE_VUE_DEVTOOLS = false
+
+# 启用 turbo console
+# Enable turbo console
+VITE_ENABLE_TURBO_CONSOLE = false
+
+# 启动编辑器，用于 vite-plugin-vue-devtools 和 unplugin-turbo-console
+# 支持的编辑器 https://github.com/yyx990803/launch-editor#supported-editors
+# Launch the editor for vite-plugin-vue-devtools and unplugin-turbo-console
+# Supported editors https://github.com/yyx990803/launch-editor#supported-editors
+VITE_LAUNCH_EDITOR = code

apps/core-ant-design-vue/.env.production

@@ -0,0 +1,38 @@
+# 应用配置面板
+# Application configuration panel
+VITE_APP_SETTING = false
+
+# 网站标题
+# Website title
+VITE_APP_TITLE = Fantastic-admin
+
+# 网络请求地址，应用于 axios 的 baseURL
+# Network request address, applied to axios's baseURL
+VITE_APP_API_BASEURL = /
+
+# localStorage/sessionStorage 前缀
+# localStorage/sessionStorage prefix
+VITE_APP_STORAGE_PREFIX = fa_
+
+# 调试工具，可设置 eruda 或 vconsole
+# Debugging tool, can set eruda or vconsole
+VITE_APP_DEBUG_TOOL =
+
+# ===== 以下配置仅在生产环境生效 =====
+# ===== The following configuration is only effective in the production environment. =====
+
+# 启用假数据
+# Enable build fake data
+VITE_BUILD_FAKE = false
+
+# 启用 sourcemap
+# Enable build sourcemap
+VITE_BUILD_SOURCEMAP = false
+
+# 压缩方式，支持 gzip 和 brotli
+# Build compression method, supports gzip and brotli
+VITE_BUILD_COMPRESS = gzip,brotli
+
+# 构建后生成存档，支持 zip 和 tar
+# Generate archive after build, supports zip and tar
+VITE_BUILD_ARCHIVE =

apps/core-ant-design-vue/.env.test

@@ -0,0 +1,38 @@
+# 应用配置面板
+# Application configuration panel
+VITE_APP_SETTING = false
+
+# 网站标题
+# Website title
+VITE_APP_TITLE = Fantastic-admin
+
+# 网络请求地址，应用于 axios 的 baseURL
+# Network request address, applied to axios's baseURL
+VITE_APP_API_BASEURL = /
+
+# localStorage/sessionStorage 前缀
+# localStorage/sessionStorage prefix
+VITE_APP_STORAGE_PREFIX = fa_test_
+
+# 调试工具，可设置 eruda 或 vconsole
+# Debugging tool, can set eruda or vconsole
+VITE_APP_DEBUG_TOOL =
+
+# ===== 以下配置仅在测试环境生效 =====
+# ===== The following configuration is only effective in the test environment. =====
+
+# 启用假数据
+# Enable build fake data
+VITE_BUILD_FAKE = true
+
+# 启用 sourcemap
+# Enable build sourcemap
+VITE_BUILD_SOURCEMAP = true
+
+# 压缩方式，支持 gzip 和 brotli
+# Build compression method, supports gzip and brotli
+VITE_BUILD_COMPRESS =
+
+# 构建后生成存档，支持 zip 和 tar
+# Generate archive after build, supports zip and tar
+VITE_BUILD_ARCHIVE =

apps/core-ant-design-vue/components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "new-york-v4",
+  "typescript": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/assets/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/ui/shadcn",
+    "utils": "@/utils",
+    "lib": "@/utils"
+  }
+}

apps/core-ant-design-vue/index.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.svg" />
+    <link rel="stylesheet" href="/browser_upgrade/index.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, viewport-fit=cover"/>
+    <meta http-equiv="Expires" content="0">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Cache-control" content="no-cache">
+    <meta http-equiv="Cache" content="no-cache">
+    <title>%VITE_APP_TITLE%</title>
+  </head>
+  <body>
+    <div id="app">
+      <div id="browser-upgrade">
+        <div class="title">为了您的体验，推荐使用以下浏览器</div>
+        <div class="browsers">
+          <a href="https://www.microsoft.com/edge" target="_blank" class="browser">
+            <img class="browser-icon" src="/browser_upgrade/edge.png" />
+            <div class="browser-name">Microsoft Edge</div>
+          </a>
+          <a href="https://www.google.cn/chrome/" target="_blank" class="browser">
+            <img class="browser-icon" src="/browser_upgrade/chrome.png" />
+            <div class="browser-name">Google Chrome</div>
+          </a>
+        </div>
+      </div>
+    </div>
+    <script>
+      if (!!window.ActiveXObject || 'ActiveXObject' in window) {
+        document.getElementById('browser-upgrade').style.display = 'block'
+      }
+    </script>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

apps/core-ant-design-vue/loading.html

@@ -0,0 +1,216 @@
+<style>
+@keyframes rainbow {
+  0% { --rainbow-color: #00a98e; }
+  1.25% { --rainbow-color: #00a996; }
+  2.5% { --rainbow-color: #00a99f; }
+  3.75% { --rainbow-color: #00a9a7; }
+  5% { --rainbow-color: #00a9b0; }
+  6.25% { --rainbow-color: #00a9b8; }
+  7.5% { --rainbow-color: #00a9c0; }
+  8.75% { --rainbow-color: #00a8c7; }
+  10% { --rainbow-color: #00a8cf; }
+  11.25% { --rainbow-color: #00a7d5; }
+  12.5% { --rainbow-color: #00a6dc; }
+  13.75% { --rainbow-color: #00a6e2; }
+  15% { --rainbow-color: #00a4e7; }
+  16.25% { --rainbow-color: #00a3ec; }
+  17.5% { --rainbow-color: #00a2f1; }
+  18.75% { --rainbow-color: #00a0f4; }
+  20% { --rainbow-color: #009ff7; }
+  21.25% { --rainbow-color: #009dfa; }
+  22.5% { --rainbow-color: #009bfc; }
+  23.75% { --rainbow-color: #0098fd; }
+  25% { --rainbow-color: #0096fd; }
+  26.25% { --rainbow-color: #0093fd; }
+  27.5% { --rainbow-color: #2e90fc; }
+  28.75% { --rainbow-color: #4d8dfa; }
+  30% { --rainbow-color: #638af8; }
+  31.25% { --rainbow-color: #7587f5; }
+  32.5% { --rainbow-color: #8583f1; }
+  33.75% { --rainbow-color: #9280ed; }
+  35% { --rainbow-color: #9f7ce9; }
+  36.25% { --rainbow-color: #aa78e3; }
+  37.5% { --rainbow-color: #b574dd; }
+  38.75% { --rainbow-color: #be71d7; }
+  40% { --rainbow-color: #c76dd1; }
+  41.25% { --rainbow-color: #cf69c9; }
+  42.5% { --rainbow-color: #d566c2; }
+  43.75% { --rainbow-color: #dc63ba; }
+  45% { --rainbow-color: #e160b3; }
+  46.25% { --rainbow-color: #e65eab; }
+  47.5% { --rainbow-color: #e95ca2; }
+  48.75% { --rainbow-color: #ed5a9a; }
+  50% { --rainbow-color: #ef5992; }
+  51.25% { --rainbow-color: #f15989; }
+  52.5% { --rainbow-color: #f25981; }
+  53.75% { --rainbow-color: #f25a79; }
+  55% { --rainbow-color: #f25c71; }
+  56.25% { --rainbow-color: #f15e69; }
+  57.5% { --rainbow-color: #ef6061; }
+  58.75% { --rainbow-color: #ed635a; }
+  60% { --rainbow-color: #eb6552; }
+  61.25% { --rainbow-color: #e8694b; }
+  62.5% { --rainbow-color: #e46c44; }
+  63.75% { --rainbow-color: #e06f3d; }
+  65% { --rainbow-color: #db7336; }
+  66.25% { --rainbow-color: #d77630; }
+  67.5% { --rainbow-color: #d17a2a; }
+  68.75% { --rainbow-color: #cc7d24; }
+  70% { --rainbow-color: #c6811e; }
+  71.25% { --rainbow-color: #bf8418; }
+  72.5% { --rainbow-color: #b98713; }
+  73.75% { --rainbow-color: #b28a0f; }
+  75% { --rainbow-color: #ab8d0c; }
+  76.25% { --rainbow-color: #a3900b; }
+  77.5% { --rainbow-color: #9c920d; }
+  78.75% { --rainbow-color: #949510; }
+  80% { --rainbow-color: #8b9715; }
+  81.25% { --rainbow-color: #83991b; }
+  82.5% { --rainbow-color: #7a9b21; }
+  83.75% { --rainbow-color: #719d27; }
+  85% { --rainbow-color: #679e2e; }
+  86.25% { --rainbow-color: #5da035; }
+  87.5% { --rainbow-color: #51a13c; }
+  88.75% { --rainbow-color: #44a244; }
+  90% { --rainbow-color: #34a44b; }
+  91.25% { --rainbow-color: #1ba553; }
+  92.5% { --rainbow-color: #00a65b; }
+  93.75% { --rainbow-color: #00a663; }
+  95% { --rainbow-color: #00a76c; }
+  96.25% { --rainbow-color: #00a874; }
+  97.5% { --rainbow-color: #00a87d; }
+  98.75% { --rainbow-color: #00a985; }
+  100% { --rainbow-color: #00a98e; }
+}
+
+:root {
+  --rainbow-color: #00a98e;
+  animation: rainbow 20s linear infinite;
+}
+
+.loading-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 10000;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: var(--rainbow-color);
+  user-select: none;
+  background-color: oklch(var(--background));
+}
+
+.loading-container *::before,
+.loading-container *::after {
+  box-sizing: content-box;
+}
+
+.loading-container .loading {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+}
+
+.loading-container .loading .square {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+}
+
+.loading-container .loading .square::before {
+  width: 10px;
+  height: 10px;
+  content: "";
+  border: 3px solid var(--rainbow-color);
+  border-radius: 15%;
+  animation: square-to-dot-animation 2s linear infinite;
+}
+
+.loading-container .loading .square:nth-child(1)::before {
+  animation-delay: calc(150ms * 1);
+}
+
+.loading-container .loading .square:nth-child(2)::before {
+  animation-delay: calc(150ms * 2);
+}
+
+.loading-container .loading .square:nth-child(3)::before {
+  animation-delay: calc(150ms * 3);
+}
+
+.loading-container .loading .square:nth-child(4)::before {
+  animation-delay: calc(150ms * 4);
+}
+
+@keyframes square-to-dot-animation {
+  0%,
+  33.33% {
+    width: 10px;
+    height: 10px;
+    margin: initial;
+    border-width: 3px;
+    border-radius: 15%;
+    transform: rotate(0deg);
+  }
+
+  50%,
+  83.33% {
+    width: 0;
+    height: 0;
+    margin: 5px;
+    border-width: 5px;
+    border-radius: 100%;
+    transform: rotate(180deg);
+  }
+
+  100% {
+    width: 10px;
+    height: 10px;
+    margin: initial;
+    border-width: 3px;
+    border-radius: 15%;
+    transform: rotate(360deg);
+  }
+}
+
+.loading-container .name {
+  position: relative;
+  margin-top: 20px;
+  font-size: 24px;
+  line-height: 1.5;
+}
+
+.loading-container .tips {
+  position: relative;
+  margin-top: 10px;
+  font-size: 16px;
+  opacity: 0.5;
+  line-height: 1.5;
+}
+
+.loading-container .tips::after {
+  position: absolute;
+  padding-left: 5px;
+  content: "…";
+}
+</style>
+
+<div class="loading-container">
+  <div class="loading">
+    <div class="square"></div>
+    <div class="square"></div>
+    <div class="square"></div>
+    <div class="square"></div>
+  </div>
+  <div class="name">%VITE_APP_TITLE%</div>
+  <div class="tips">载入中</div>
+</div>

apps/core-ant-design-vue/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@fantastic-admin/core-ant-design-vue",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "build:test": "vue-tsc -b && vite build --mode test",
+    "serve": "http-server ./dist -o",
+    "serve:test": "http-server ./dist-test -o",
+    "svgo": "svgo -f src/assets/icons",
+    "generate:icons": "fa-iconify-tools",
+    "lint": "vue-tsc -b"
+  },
+  "dependencies": {
+    "@fantastic-admin/components": "workspace:*",
+    "@fantastic-admin/composables": "workspace:*",
+    "@fantastic-admin/hotkeys": "workspace:*",
+    "@fantastic-admin/settings": "workspace:*",
+    "@fantastic-admin/types": "workspace:*",
+    "@vee-validate/zod": "catalog:",
+    "@vueuse/core": "catalog:",
+    "@vueuse/integrations": "catalog:",
+    "@zumer/snapdom": "catalog:",
+    "ant-design-vue": "catalog:ant-design-vue",
+    "axios": "catalog:",
+    "class-variance-authority": "catalog:",
+    "clsx": "catalog:",
+    "dayjs": "catalog:",
+    "eruda": "catalog:",
+    "es-toolkit": "catalog:",
+    "mitt": "catalog:",
+    "nprogress": "catalog:",
+    "path-browserify": "catalog:",
+    "path-to-regexp": "catalog:",
+    "pinia": "catalog:",
+    "pinia-plugin-persistedstate": "catalog:",
+    "pinyin-pro": "catalog:",
+    "qs": "catalog:",
+    "reka-ui": "catalog:",
+    "scule": "catalog:",
+    "tailwind-merge": "catalog:",
+    "type-fest": "catalog:",
+    "ua-parser-js": "catalog:",
+    "vconsole": "catalog:",
+    "vee-validate": "catalog:",
+    "vue": "catalog:",
+    "vue-router": "catalog:",
+    "zod": "catalog:"
+  },
+  "devDependencies": {
+    "@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:",
+    "@types/path-browserify": "catalog:",
+    "@types/qs": "catalog:",
+    "@vitejs/plugin-legacy": "catalog:",
+    "@vitejs/plugin-vue": "catalog:",
+    "@vitejs/plugin-vue-jsx": "catalog:",
+    "@vue/tsconfig": "catalog:",
+    "http-server": "catalog:",
+    "postcss": "catalog:",
+    "postcss-nested": "catalog:",
+    "sass-embedded": "catalog:",
+    "svgo": "catalog:",
+    "unplugin-auto-import": "catalog:",
+    "unplugin-turbo-console": "catalog:",
+    "unplugin-vue-components": "catalog:",
+    "vite": "catalog:",
+    "vite-plugin-app-loading": "catalog:",
+    "vite-plugin-archiver": "catalog:",
+    "vite-plugin-compression2": "catalog:",
+    "vite-plugin-env-parse": "catalog:",
+    "vite-plugin-fake-server": "catalog:",
+    "vite-plugin-vue-devtools": "catalog:",
+    "vue-tsc": "catalog:"
+  }
+}

apps/core-ant-design-vue/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    'autoprefixer': {},
+    'postcss-nested': {},
+  },
+}

apps/core-ant-design-vue/public/browser_upgrade/index.css

@@ -0,0 +1,49 @@
+#browser-upgrade {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10001;
+  display: none;
+  width: 100%;
+  height: 100%;
+  color: #736477;
+  user-select: none;
+  background-color: snow;
+}
+
+#browser-upgrade .title {
+  margin: 40px 0;
+  font-size: 24px;
+  text-align: center;
+}
+
+#browser-upgrade .browsers {
+  text-align: center;
+}
+
+#browser-upgrade .browsers .browser {
+  display: inline-block;
+  margin: 0 20px;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+#browser-upgrade .browsers .browser .browser-icon {
+  display: block;
+  width: 50px;
+  height: 50px;
+  margin: 0 auto;
+  border: none;
+}
+
+#browser-upgrade .browsers .browser .browser-name {
+  padding-bottom: 2px;
+  margin-top: 10px;
+  color: #736477;
+  text-align: center;
+  border-bottom: 1px solid transparent;
+}
+
+#browser-upgrade .browsers .browser:hover .browser-name {
+  border-bottom: 1px solid #736477;
+}

apps/core-ant-design-vue/public/favicon.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -21 206 206" xml:space="preserve">
+  <path d="M0,82.57C0,58.4,0,34.23,0,10.06C0,1.35,1.35,0,10.03,0C45.36,0,80.7-0.01,116.03,0.03c1.77,0,3.59,0.26,5.29,0.74
+	c3.07,0.87,3.57,3.21,2.45,5.8c-4.37,10.1-8.83,20.15-13.31,30.2c-1.44,3.23-4.06,4.26-7.54,4.25c-18.5-0.09-37,0.1-55.5-0.14
+	c-4.95-0.06-6.49,2.12-6.46,6.47c0.02,3,0.11,6.01-0.02,9c-0.3,6.8,0.34,9.29,9.51,9.62c5.36,0.19,10.73,0.04,16.09,0.04
+	c7.57,0,15.15-0.04,22.72,0.01c5.13,0.03,6.6,2.12,4.59,6.89C90.43,81.09,86.27,89,83.4,97.35c-2.59,7.55-8.57,7.27-14.28,7.56
+	c-7.48,0.38-15,0.17-22.5,0.06c-3.69-0.05-4.96,1.04-4.86,5.18c0.36,15.83,0.26,31.67,0.12,47.5c-0.04,4.2-2.26,6.53-6.94,6.42
+	c-9-0.21-18-0.06-27-0.06c-6.05,0-7.91-1.8-7.92-7.94C-0.02,131.57,0,107.07,0,82.57z" fill="#42b883" />
+  <path d="M132.98,94.13c-8.21,18.88-16.33,37.1-24.06,55.48c-6.02,14.31-5.81,14.4-21.31,14.4c-6.67,0-13.33,0.05-20-0.01
+	c-5.91-0.05-7.71-2.44-5.46-7.61c6.86-15.8,13.86-31.55,20.82-47.31c9.41-21.32,18.81-42.63,28.24-63.94
+	c5.59-12.62,11.14-25.25,16.94-37.77c0.82-1.78,2.95-4.09,4.47-4.09c1.63,0,4,2.11,4.78,3.86c13.4,29.78,26.56,59.66,39.87,89.49
+	c6.48,14.53,13.16,28.97,19.72,43.46c2.57,5.68,5.11,11.38,7.61,17.1c1.61,3.68-0.13,6.75-4.12,6.77
+	c-23.83,0.08-47.66,0.09-71.49-0.01c-4.03-0.02-5.46-2.47-3.98-6.17c2.26-5.63,4.77-11.16,6.95-16.82c1.74-4.54,4.92-6.06,9.6-5.98
+	c9.65,0.16,9.89-0.55,5.89-9.13c-4.57-9.81-8.76-19.8-13.14-29.7C134.08,95.62,133.68,95.17,132.98,94.13z" fill="#42b883" />
+</svg>

apps/core-ant-design-vue/src/App.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import dayjs from '@/utils/dayjs'
+import { ua } from '@/utils/ua'
+import Provider from './ui/provider/index.vue'
+import 'dayjs/locale/zh-cn'
+
+const route = useRoute()
+
+const appSettingsStore = useAppSettingsStore()
+
+const { auth } = useAppAuth()
+const { generateTitle } = useAppMenu()
+
+document.body.setAttribute('data-os', ua.getOS().name || '')
+
+const isAuth = computed(() => {
+  return route.matched.every((item) => {
+    return auth(item.meta.auth ?? '')
+  })
+})
+
+// 设置网页 title
+watch([
+  () => appSettingsStore.settings.app.dynamicTitle,
+  () => appSettingsStore.title,
+], () => {
+  nextTick(() => {
+    if (appSettingsStore.settings.app.dynamicTitle && appSettingsStore.title) {
+      document.title = `${generateTitle(appSettingsStore.title)} - ${import.meta.env.VITE_APP_TITLE}`
+    }
+    else {
+      document.title = import.meta.env.VITE_APP_TITLE
+    }
+  })
+}, {
+  immediate: true,
+  deep: true,
+})
+
+onMounted(() => {
+  appSettingsStore.setMode(document.documentElement.clientWidth)
+  dayjs.locale('zh-cn')
+  window.addEventListener('resize', () => {
+    appSettingsStore.setMode(document.documentElement.clientWidth)
+  })
+})
+</script>
+
+<template>
+  <Provider>
+    <RouterView v-slot="{ Component }">
+      <AppNotSupportedMobile v-if="!appSettingsStore.settings.app.mobile && appSettingsStore.mode === 'mobile'" />
+      <Component :is="Component" v-else-if="isAuth" />
+      <AppNotAllowed v-else />
+    </RouterView>
+    <AppBackToTop />
+    <FaToast :theme="appSettingsStore.currentColorScheme" />
+    <AppSystemInfo />
+  </Provider>
+</template>

apps/core-ant-design-vue/src/api/fake_modules/app.fake.ts

@@ -23,7 +23,7 @@ export default defineFakeRoute([
                 component: 'Layout',
                 name: 'multilevelMenuExample',
                 meta: {
-                  title: 'route.multimenu.root',
+                  title: '多级导航',
                   icon: 'heroicons-solid:menu-alt-3',
                 },
                 children: [
@@ -33,14 +33,14 @@ export default defineFakeRoute([
                     name: 'multilevelMenuExample1',
                     component: 'multilevel_menu_example/page.vue',
                     meta: {
-                      title: 'route.multimenu.page',
+                      title: '导航1',
                     },
                   },
                   {
                     path: 'level2',
                     name: 'multilevelMenuExample2',
                     meta: {
-                      title: 'route.multimenu.level2.root',
+                      title: '导航2',
                     },
                     children: [
                       // 次导航（三级路由）
@@ -49,14 +49,14 @@ export default defineFakeRoute([
                         name: 'multilevelMenuExample2-1',
                         component: 'multilevel_menu_example/level2/page.vue',
                         meta: {
-                          title: 'route.multimenu.level2.page',
+                          title: '导航2-1',
                         },
                       },
                       {
                         path: 'level3',
                         name: 'multilevelMenuExample2-2',
                         meta: {
-                          title: 'route.multimenu.level2.level3.root',
+                          title: '导航2-2',
                         },
                         children: [
                           // 次导航（四级路由）
@@ -65,113 +65,13 @@ export default defineFakeRoute([
                             name: 'multilevelMenuExample2-2-1',
                             component: 'multilevel_menu_example/level2/level3/page1.vue',
                             meta: {
-                              title: 'route.multimenu.level2.level3.page1',
+                              title: '导航2-2-1',
                             },
                           },
                           {
                             path: 'page2',
                             name: 'multilevelMenuExample2-2-2',
                             component: 'multilevel_menu_example/level2/level3/page2.vue',
-                            meta: {
-                              title: 'route.multimenu.level2.level3.page2',
-                            },
-                          },
-                        ],
-                      },
-                    ],
-                  },
-                ],
-              },
-              {
-                path: '/permission_example',
-                component: 'Layout',
-                name: 'permissionExample',
-                meta: {
-                  title: 'route.permission',
-                  icon: 'ri:shield-keyhole-line',
-                },
-                children: [
-                  {
-                    path: 'index',
-                    name: 'permissionExampleIndex',
-                    component: 'permission_example/index.vue',
-                    meta: {
-                      title: 'route.permission',
-                      menu: false,
-                      breadcrumb: false,
-                      activeMenu: '/permission_example',
-                    },
-                  },
-                  {
-                    path: 'test',
-                    name: 'permissionExampleTest',
-                    component: 'permission_example/test.vue',
-                    meta: {
-                      title: '测试页面',
-                      auth: ['permission.browse'],
-                      menu: false,
-                      breadcrumb: false,
-                      activeMenu: '/permission_example',
-                    },
-                  },
-                ],
-              },
-            ],
-          },
-        ],
-      }
-    },
-  },
-  {
-    url: '/fake/app/menu/list',
-    method: 'get',
-    response: () => {
-      return {
-        error: '',
-        status: 1,
-        data: [
-          {
-            meta: {
-              title: '演示',
-              icon: 'uim:box',
-            },
-            children: [
-              {
-                meta: {
-                  title: '多级导航',
-                  icon: 'heroicons-solid:menu-alt-3',
-                },
-                children: [
-                  {
-                    path: '/multilevel_menu_example/page',
-                    meta: {
-                      title: '导航1',
-                    },
-                  },
-                  {
-                    meta: {
-                      title: '导航2',
-                    },
-                    children: [
-                      {
-                        path: '/multilevel_menu_example/level2/page',
-                        meta: {
-                          title: '导航2-1',
-                        },
-                      },
-                      {
-                        meta: {
-                          title: '导航2-2',
-                        },
-                        children: [
-                          {
-                            path: '/multilevel_menu_example/level2/level3/page1',
-                            meta: {
-                              title: '导航2-2-1',
-                            },
-                          },
-                          {
-                            path: '/multilevel_menu_example/level2/level3/page2',
                             meta: {
                               title: '导航2-2-2',
                             },
@@ -182,13 +82,6 @@ export default defineFakeRoute([
                   },
                 ],
               },
-              {
-                path: '/permission_example',
-                meta: {
-                  title: '权限验证',
-                  icon: 'ri:shield-keyhole-line',
-                },
-              },
             ],
           },
         ],

apps/core-ant-design-vue/src/api/index.ts

@@ -0,0 +1,110 @@
+import axios from 'axios'
+// import qs from 'qs'
+
+// 请求重试配置
+const MAX_RETRY_COUNT = 3 // 最大重试次数
+const RETRY_DELAY = 1000 // 重试延迟时间（毫秒）
+
+// 扩展 AxiosRequestConfig 类型
+declare module 'axios' {
+  export interface AxiosRequestConfig {
+    retry?: boolean
+    retryCount?: number
+    fake?: boolean
+  }
+}
+
+const api = axios.create({
+  baseURL: (import.meta.env.DEV && import.meta.env.VITE_ENABLE_PROXY) ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,
+  timeout: 1000 * 60,
+  responseType: 'json',
+})
+
+api.interceptors.request.use(
+  (request) => {
+    // 如果设置了 fake 属性，强制使用 fake 的 baseURL
+    if (request.fake) {
+      request.baseURL = '/fake/'
+    }
+    // 全局拦截请求发送前提交的参数
+    const appAccountStore = useAppAccountStore()
+    // 设置请求头
+    if (request.headers) {
+      request.headers['Accept-Language'] = 'zh-CN'
+      if (appAccountStore.isLogin) {
+        request.headers.Token = appAccountStore.token
+      }
+    }
+    // 是否将 POST 请求参数进行字符串化处理
+    if (request.method === 'post') {
+      // request.data = qs.stringify(request.data, {
+      //   arrayFormat: 'brackets',
+      // })
+    }
+    return request
+  },
+)
+
+// 处理错误信息的函数
+function handleError(error: any) {
+  if (error.status === 401) {
+    useAppAccountStore().requestLogout()
+  }
+  else {
+    useFaToast().error('Error', {
+      description: error.message,
+    })
+  }
+  return Promise.reject(error)
+}
+
+api.interceptors.response.use(
+  (response) => {
+    /**
+     * 全局拦截请求发送后返回的数据，如果数据有报错则在这做全局的错误提示
+     * 约定的数据格式：{ 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) {
+          useFaToast().warning('Warning', {
+            description: response.data.error,
+          })
+          return Promise.reject(response.data)
+        }
+      }
+      else {
+        useAppAccountStore().requestLogout()
+      }
+      return Promise.resolve(response.data)
+    }
+    else {
+      return Promise.reject(response.data)
+    }
+  },
+  async (error) => {
+    // 获取请求配置
+    const config = error.config
+    // 如果配置不存在或未启用重试，则直接处理错误
+    if (!config || !config.retry) {
+      return handleError(error)
+    }
+    // 设置重试次数
+    config.retryCount = config.retryCount || 0
+    // 判断是否超过重试次数
+    if (config.retryCount >= MAX_RETRY_COUNT) {
+      return handleError(error)
+    }
+    // 重试次数自增
+    config.retryCount += 1
+    // 延迟重试
+    await new Promise(resolve => setTimeout(resolve, RETRY_DELAY))
+    // 重新发起请求
+    return api(config)
+  },
+)
+
+export default api

apps/core-ant-design-vue/src/api/modules/app.ts

@@ -0,0 +1,30 @@
+import api from '../index'
+
+export default {
+  // 后端获取路由数据
+  routeList: () => api.get('app/route/list', {
+    fake: true,
+  }),
+
+  // 登录
+  login: (data: {
+    account: string
+    password: string
+  }) => api.post('app/account/login', data, {
+    fake: true,
+  }),
+
+  // 获取权限
+  permission: () => api.get('app/account/permission', {
+    fake: true,
+  }),
+
+  // 修改密码
+  passwordEdit: (data: {
+    password: string
+    newPassword: string
+  }) => api.post('app/account/password/edit', data, {
+    fake: true,
+  }),
+
+}

apps/core-ant-design-vue/src/assets/icons/app-toolbar-collapse.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="200.781" height="200" class="icon" viewBox="0 0 1028 1024"><path d="M989.867 234.667H499.2c-17.067 0-34.133-21.334-34.133-42.667 0-25.6 12.8-42.667 34.133-42.667h490.667c17.066 0 34.133 17.067 34.133 42.667 0 21.333-12.8 42.667-34.133 42.667m-473.6 128h465.066c25.6 0 46.934 21.333 46.934 42.666 0 25.6-21.334 42.667-46.934 42.667H516.267c-25.6 0-46.934-17.067-46.934-42.667s21.334-42.666 46.934-42.666m0 298.666c-25.6 0-46.934-21.333-46.934-42.666 0-25.6 21.334-42.667 46.934-42.667h465.066c25.6 0 46.934 17.067 46.934 42.667s-21.334 42.666-46.934 42.666zm4.266 128H972.8c29.867 0 51.2 17.067 51.2 42.667s-21.333 42.667-51.2 42.667H520.533c-29.866 0-51.2-17.067-51.2-42.667s21.334-42.667 51.2-42.667m-192 25.6c-17.066 17.067-46.933 17.067-64 0L12.8 541.867c-17.067-17.067-17.067-51.2 0-68.267l251.733-273.067c17.067-17.066 46.934-17.066 64 0s17.067 51.2 0 68.267L106.667 507.733l221.866 238.934c17.067 21.333 17.067 51.2 0 68.266"/></svg>

apps/core-ant-design-vue/src/assets/images/logo.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-25 -46 256 256" xml:space="preserve">
+  <path d="M0,82.57C0,58.4,0,34.23,0,10.06C0,1.35,1.35,0,10.03,0C45.36,0,80.7-0.01,116.03,0.03c1.77,0,3.59,0.26,5.29,0.74
+	c3.07,0.87,3.57,3.21,2.45,5.8c-4.37,10.1-8.83,20.15-13.31,30.2c-1.44,3.23-4.06,4.26-7.54,4.25c-18.5-0.09-37,0.1-55.5-0.14
+	c-4.95-0.06-6.49,2.12-6.46,6.47c0.02,3,0.11,6.01-0.02,9c-0.3,6.8,0.34,9.29,9.51,9.62c5.36,0.19,10.73,0.04,16.09,0.04
+	c7.57,0,15.15-0.04,22.72,0.01c5.13,0.03,6.6,2.12,4.59,6.89C90.43,81.09,86.27,89,83.4,97.35c-2.59,7.55-8.57,7.27-14.28,7.56
+	c-7.48,0.38-15,0.17-22.5,0.06c-3.69-0.05-4.96,1.04-4.86,5.18c0.36,15.83,0.26,31.67,0.12,47.5c-0.04,4.2-2.26,6.53-6.94,6.42
+	c-9-0.21-18-0.06-27-0.06c-6.05,0-7.91-1.8-7.92-7.94C-0.02,131.57,0,107.07,0,82.57z" fill="#35495e" />
+  <path d="M132.98,94.13c-8.21,18.88-16.33,37.1-24.06,55.48c-6.02,14.31-5.81,14.4-21.31,14.4c-6.67,0-13.33,0.05-20-0.01
+	c-5.91-0.05-7.71-2.44-5.46-7.61c6.86-15.8,13.86-31.55,20.82-47.31c9.41-21.32,18.81-42.63,28.24-63.94
+	c5.59-12.62,11.14-25.25,16.94-37.77c0.82-1.78,2.95-4.09,4.47-4.09c1.63,0,4,2.11,4.78,3.86c13.4,29.78,26.56,59.66,39.87,89.49
+	c6.48,14.53,13.16,28.97,19.72,43.46c2.57,5.68,5.11,11.38,7.61,17.1c1.61,3.68-0.13,6.75-4.12,6.77
+	c-23.83,0.08-47.66,0.09-71.49-0.01c-4.03-0.02-5.46-2.47-3.98-6.17c2.26-5.63,4.77-11.16,6.95-16.82c1.74-4.54,4.92-6.06,9.6-5.98
+	c9.65,0.16,9.89-0.55,5.89-9.13c-4.57-9.81-8.76-19.8-13.14-29.7C134.08,95.62,133.68,95.17,132.98,94.13z" fill="#42b883" />
+</svg>

apps/core-ant-design-vue/src/assets/styles/globals.css

@@ -0,0 +1,80 @@
+/* 页面布局 CSS 变量 */
+:root {
+  color-scheme: light;
+
+  /* 头部宽度（默认自适应宽度，可固定宽度，固定宽度后为居中显示） */
+  --g-header-width: 100%;
+
+  /* 头部高度 */
+  --g-header-height: 60px;
+
+  /* 侧边栏宽度 */
+  --g-main-sidebar-width: 80px;
+  --g-sub-sidebar-width: 220px;
+  --g-sub-sidebar-collapse-width: 64px;
+
+  /* 侧边栏 Logo 区域高度 */
+  --g-sidebar-logo-height: 50px;
+
+  /* 标签栏高度 */
+  --g-tabbar-height: 50px;
+
+  /* 工具栏高度 */
+  --g-toolbar-height: 50px;
+
+  &.dark {
+    color-scheme: dark;
+  }
+}
+
+/* 明暗模式过渡动画 */
+::view-transition-old(root),
+::view-transition-new(root) {
+  mix-blend-mode: normal;
+  animation: none;
+}
+
+::view-transition-old(root) {
+  z-index: 0;
+}
+
+::view-transition-new(root) {
+  z-index: 1;
+}
+
+.dark {
+  &::view-transition-old(root) {
+    z-index: 1;
+  }
+
+  &::view-transition-new(root) {
+    z-index: 0;
+  }
+}
+
+.disable-color-scheme-transition-duration *,
+.disable-color-scheme-transition-duration *::before,
+.disable-color-scheme-transition-duration *::after {
+  transition-duration: 0ms !important;
+}
+
+html,
+body {
+  height: 100%;
+  text-autospace: normal;
+}
+
+body {
+  box-sizing: border-box;
+  margin: 0;
+  -webkit-tap-highlight-color: transparent;
+}
+
+#app {
+  height: 100%;
+}
+
+/* textarea 字体跟随系统 */
+textarea {
+  font-family: inherit;
+}

apps/core-ant-design-vue/src/assets/styles/nprogress.css

@@ -0,0 +1,63 @@
+#nprogress {
+  pointer-events: none;
+
+  .bar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 3000;
+    width: 100%;
+    height: 2px;
+    background: oklch(var(--primary));
+  }
+
+  .peg {
+    position: absolute;
+    right: 0;
+    display: block;
+    width: 100px;
+    height: 100%;
+    box-shadow: 0 0 10px oklch(var(--primary)), 0 0 5px oklch(var(--primary));
+    opacity: 1;
+    transform: rotate(3deg) translate(0, -4px);
+  }
+
+  .spinner {
+    position: fixed;
+    top: 11px;
+    right: 14px;
+    z-index: 2000;
+    display: block;
+
+    .spinner-icon {
+      box-sizing: border-box;
+      width: 18px;
+      height: 18px;
+      border: solid 2px transparent;
+      border-top-color: oklch(var(--primary));
+      border-left-color: oklch(var(--primary));
+      border-radius: 50%;
+      animation: nprogress-spinner 400ms linear infinite;
+    }
+  }
+}
+
+.nprogress-custom-parent {
+  position: relative;
+  overflow: hidden;
+
+  #nprogress .spinner,
+  #nprogress .bar {
+    position: absolute;
+  }
+}
+
+@keyframes nprogress-spinner {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+@keyframes nprogress-spinner {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}

apps/core-ant-design-vue/src/assets/styles/resources/utils.scss

@@ -0,0 +1,53 @@
+// 文字超出隐藏，默认为单行超出隐藏，可设置多行
+@mixin text-overflow($line: 1, $fixed-width: true) {
+  @if $line == 1 and $fixed-width == true {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  } @else {
+    /* stylelint-disable-next-line value-no-vendor-prefix */
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: $line;
+  }
+}
+
+// 定位居中，默认水平居中，可选择垂直居中，或者水平垂直都居中
+@mixin position-center($type: x) {
+  position: absolute;
+
+  @if $type == x {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  @if $type == y {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  @if $type == xy {
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+  }
+}
+
+// 文字两端对齐
+%justify-align {
+  text-align: justify;
+  text-align-last: justify;
+}
+
+// 清除浮动
+%clearfix {
+  zoom: 1;
+
+  &::before,
+  &::after {
+    clear: both;
+    display: block;
+    content: "";
+  }
+}

apps/core-ant-design-vue/src/assets/styles/resources/variables.scss

@@ -0,0 +1 @@
+// 全局变量

apps/core-ant-design-vue/src/components/AppAccountButton/index.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils'
+import eventBus from '@/utils/eventBus'
+import Profile from './profile.vue'
+
+defineOptions({
+  name: 'AppAccountButton',
+})
+
+const props = withDefaults(defineProps<{
+  onlyAvatar?: boolean
+  dropdownAlign?: 'start' | 'center' | 'end'
+  dropdownSide?: 'left' | 'right' | 'top' | 'bottom'
+  buttonVariant?: 'secondary' | 'ghost'
+  class?: HTMLAttributes['class']
+}>(), {
+  dropdownAlign: 'end',
+  dropdownSide: 'right',
+  buttonVariant: 'ghost',
+})
+
+const router = useRouter()
+
+const appSettingsStore = useAppSettingsStore()
+const appAccountStore = useAppAccountStore()
+
+const { generateTitle } = useAppMenu()
+
+const profileModal = useFaModal().create({
+  alignCenter: true,
+  header: false,
+  footer: false,
+  closeOnClickOverlay: false,
+  closeOnPressEscape: false,
+  class: 'h-[500px] sm:max-w-xl overflow-hidden',
+  contentClass: 'min-h-full p-0 flex',
+  content: () => h(Profile),
+})
+</script>
+
+<template>
+  <FaDropdown
+    :align="dropdownAlign" :side="dropdownSide" :items="[
+      [
+        ...(appSettingsStore.settings.app.home.enable
+          ? [{ label: generateTitle(appSettingsStore.settings.app.home.title), icon: 'i-mdi:home', handle: () => router.push({ path: appSettingsStore.settings.app.home.fullPath }) }]
+          : []),
+        { label: '个人设置', icon: 'i-mdi:account', handle: () => profileModal.open() },
+      ],
+      [
+        ...(appSettingsStore.mode === 'pc'
+          ? [{ label: '快捷键', icon: 'i-mdi:keyboard', handle: () => eventBus.emit('global-hotkeys-intro-toggle') }]
+          : []),
+      ],
+      [
+        {
+          label: '退出登录',
+          icon: 'i-mdi:logout',
+          handle: () => appAccountStore.logout(appSettingsStore.settings.app.home.fullPath),
+        },
+      ],
+    ]" class="flex-center"
+  >
+    <template #header>
+      <div class="flex-center-start gap-2">
+        <FaAvatar :src="appAccountStore.avatar" :fallback="appAccountStore.account.slice(0, 2)" shape="square" />
+        <div class="min-w-0 space-y-1">
+          <div class="text-base lh-none truncate">
+            {{ appAccountStore.account }}
+          </div>
+          <div class="text-xs text-secondary-foreground/50 font-normal">
+            [ xyz@xyz.com ]
+          </div>
+        </div>
+      </div>
+    </template>
+    <FaButton
+      :variant="buttonVariant" size="icon-sm" :class="cn('flex-center gap-1 p-2', {
+        'p-1': onlyAvatar,
+      }, props.class)"
+    >
+      <FaAvatar :src="appAccountStore.avatar" :class="cn('size-6', { 'size-full': onlyAvatar })">
+        <FaIcon name="i-carbon:user-avatar-filled" class="text-secondary-foreground/50 size-6" />
+      </FaAvatar>
+      <div v-if="!onlyAvatar" class="flex-center-between flex-1 gap-2 min-w-0">
+        <div class="text-start flex-1 truncate">
+          {{ appAccountStore.account }}
+        </div>
+        <FaIcon name="i-material-symbols:expand-all-rounded" />
+      </div>
+    </FaButton>
+  </FaDropdown>
+</template>

apps/core-ant-design-vue/src/components/AppAccountButton/profile.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import EditPassword from '@/components/AppAccountForm/edit-password.vue'
+
+const active = ref(0)
+const tabs = ref([
+  {
+    title: '基本设置',
+    description: '账号的基本信息，头像、昵称等',
+  },
+  {
+    title: '安全设置',
+    description: '定期修改密码可以提高帐号安全性',
+  },
+])
+</script>
+
+<template>
+  <div class="min-h-full w-full">
+    <div class="border-b border-e bg-background flex flex-row right-0 top-0 fixed z-1 overflow-auto md:(flex-col h-full w-40 inset-s-0 bottom-0)">
+      <div v-for="(tab, index) in tabs" :key="index" class="px-4 py-3 flex-shrink-0 cursor-pointer transition-background-color space-y-2 hover-bg-accent/50" :class="{ 'bg-accent hover-bg-accent!': active === index }" @click="active = index">
+        <div class="text-base text-accent-foreground leading-tight">
+          {{ tab.title }}
+        </div>
+        <div class="text-xs text-accent-foreground/50">
+          {{ tab.description }}
+        </div>
+      </div>
+    </div>
+    <div class="p-10 pt-20 flex-col-center min-h-full md:(ms-40 pt-10)">
+      <div v-if="active === 0">
+        请开发者自行扩展
+      </div>
+      <EditPassword v-if="active === 1" />
+    </div>
+  </div>
+</template>

apps/core-ant-design-vue/src/components/AppAccountForm/edit-password.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+
+defineOptions({
+  name: 'EditPasswordForm',
+})
+
+const appAccountStore = useAppAccountStore()
+
+const loading = ref(false)
+
+interface EditPasswordModel {
+  password: string
+  newPassword: string
+  checkPassword: string
+}
+
+const model = ref<EditPasswordModel>({
+  password: '',
+  newPassword: '',
+  checkPassword: '',
+})
+
+const validationSchema = toTypedSchema(
+  z.object({
+    password: z.string().min(1, '请输入原密码'),
+    newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
+    checkPassword: z.string().min(1, '请确认新密码'),
+  }).refine(data => data.newPassword === data.checkPassword, {
+    message: '两次输入的密码不一致',
+    path: ['checkPassword'],
+  }),
+)
+
+function onSubmit(values: EditPasswordModel) {
+  loading.value = true
+  appAccountStore.editPassword(values).then(async () => {
+    useFaToast().success('模拟修改成功，请重新登录')
+    appAccountStore.logout()
+  }).finally(() => {
+    loading.value = false
+  })
+}
+</script>
+
+<template>
+  <div class="flex-col-stretch-center w-full">
+    <div class="mb-6 space-y-2">
+      <h3 class="text-4xl font-bold">
+        修改密码
+      </h3>
+      <p class="text-sm text-muted-foreground lg:text-base">
+        请输入原密码、新密码和确认密码
+      </p>
+    </div>
+    <FaForm :model="model" :validation-schema="validationSchema" @submit="onSubmit">
+      <FaFormItem name="password">
+        <FaInput type="password" placeholder="原密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaFormItem name="newPassword">
+        <FaInput type="password" placeholder="新密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaFormItem name="checkPassword">
+        <FaInput type="password" placeholder="确认密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaButton :loading="loading" size="lg" class="mt-8 w-full" type="submit">
+        保存
+      </FaButton>
+    </FaForm>
+  </div>
+</template>

apps/core-ant-design-vue/src/components/AppAccountForm/login.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import type { FormExpose } from '@fantastic-admin/components'
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+
+defineOptions({
+  name: 'LoginForm',
+})
+
+const props = defineProps<{
+  account?: string
+}>()
+
+const emits = defineEmits<{
+  onLogin: [account?: string]
+  onRegister: [account?: string]
+  onResetPassword: [account?: string]
+}>()
+
+const appAccountStore = useAppAccountStore()
+
+const title = import.meta.env.VITE_APP_TITLE
+const loading = ref(false)
+
+// 登录方式，default 账号密码登录，qrcode 扫码登录
+const type = ref<'default' | 'qrcode'>('default')
+
+interface LoginModel {
+  account: string
+  password: string
+  remember: boolean
+}
+
+const formRef = useTemplateRef<FormExpose<LoginModel>>('formRef')
+
+const model = ref<LoginModel>({
+  account: props.account ?? localStorage.getItem('login_account') ?? '',
+  password: '',
+  remember: localStorage.getItem('login_account') !== null,
+})
+
+const validationSchema = toTypedSchema(z.object({
+  account: z.string().min(1, '请输入用户名'),
+  password: z.string().min(1, '请输入密码'),
+  remember: z.boolean(),
+}))
+
+function onSubmit(values: LoginModel) {
+  loading.value = true
+  appAccountStore.login(values).then(() => {
+    if (values.remember) {
+      localStorage.setItem('login_account', values.account)
+    }
+    else {
+      localStorage.removeItem('login_account')
+    }
+    emits('onLogin', values.account)
+  }).finally(() => {
+    loading.value = false
+  })
+}
+
+async function testAccount(account: string) {
+  model.value.account = account
+  model.value.password = '123456'
+  await formRef.value?.submit()
+}
+</script>
+
+<template>
+  <div class="p-12 flex-col-stretch-center min-h-500px w-full">
+    <div class="mb-6 space-y-2">
+      <h3 class="text-4xl font-bold">
+        欢迎使用 👋🏻
+      </h3>
+      <p class="text-sm text-muted-foreground lg:text-base">
+        {{ title }}
+      </p>
+    </div>
+    <div class="mb-4">
+      <FaTabs
+        v-model="type" :list="[
+          { label: '账号密码登录', value: 'default' },
+          { label: '扫码登录', value: 'qrcode' },
+        ]" class="inline-flex"
+      />
+    </div>
+    <div v-show="type === 'default'">
+      <FaForm
+        ref="formRef"
+        :model="model"
+        :validation-schema="validationSchema"
+        @submit="onSubmit"
+      >
+        <FaFormItem name="account">
+          <FaInput type="text" placeholder="用户名" class="w-full">
+            <template #start>
+              <FaIcon name="i-lucide:user" />
+            </template>
+          </FaInput>
+        </FaFormItem>
+        <FaFormItem name="password">
+          <FaInput type="password" placeholder="密码" class="w-full">
+            <template #start>
+              <FaIcon name="i-lucide:lock" />
+            </template>
+          </FaInput>
+        </FaFormItem>
+        <div class="flex-start-between">
+          <FaFormItem name="remember" class="min-w-0">
+            <FaCheckbox>
+              记住我
+            </FaCheckbox>
+          </FaFormItem>
+          <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onResetPassword', model.account)">
+            忘记密码了?
+          </FaButton>
+        </div>
+        <FaButton :loading="loading" size="lg" class="w-full" type="submit">
+          登录
+        </FaButton>
+        <div class="text-sm mt-4 flex-center gap-2">
+          <span class="text-secondary-foreground op-50">还没有帐号?</span>
+          <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onRegister', model.account)">
+            注册新帐号
+          </FaButton>
+        </div>
+      </FaForm>
+      <div class="mt-4 text-center -mb-4">
+        <FaDivider>演示账号一键登录</FaDivider>
+        <div class="space-x-2">
+          <FaButton variant="default" size="sm" plain @click="testAccount('admin')">
+            admin
+          </FaButton>
+          <FaButton variant="outline" size="sm" plain @click="testAccount('test')">
+            test
+          </FaButton>
+        </div>
+      </div>
+    </div>
+    <div v-show="type === 'qrcode'">
+      <div class="flex-col-center">
+        <img src="https://s2.loli.net/2024/04/26/GsahtuIZ9XOg5jr.png" class="h-[250px] w-[250px]">
+        <div class="text-sm text-secondary-foreground mt-2 op-50">
+          请使用微信扫码登录
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

apps/core-ant-design-vue/src/components/AppAccountForm/register.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+
+defineOptions({
+  name: 'RegisterForm',
+})
+
+const props = defineProps<{
+  account?: string
+}>()
+
+const emits = defineEmits<{
+  onLogin: [account?: string]
+  onRegister: [account?: string]
+}>()
+
+const loading = ref(false)
+
+interface RegisterModel {
+  account: string
+  password: string
+  checkPassword: string
+}
+
+const model = ref<RegisterModel>({
+  account: props.account ?? '',
+  password: '',
+  checkPassword: '',
+})
+
+const validationSchema = toTypedSchema(
+  z.object({
+    account: z.string().min(1, '请输入用户名'),
+    password: z.string().min(1, '请输入密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
+    checkPassword: z.string().min(1, '请再次输入密码'),
+  }).refine(data => data.password === data.checkPassword, {
+    message: '两次输入的密码不一致',
+    path: ['checkPassword'],
+  }),
+)
+
+function onSubmit(values: RegisterModel) {
+  loading.value = true
+  emits('onRegister', values.account)
+}
+</script>
+
+<template>
+  <div class="p-12 flex-col-stretch-center min-h-500px w-full">
+    <FaForm :model="model" :validation-schema="validationSchema" @submit="onSubmit">
+      <div class="mb-8 space-y-2">
+        <h3 class="text-4xl font-bold">
+          探索从这里开始 🚀
+        </h3>
+        <p class="text-sm text-muted-foreground lg:text-base">
+          演示系统未提供该功能
+        </p>
+      </div>
+      <FaFormItem name="account">
+        <FaInput type="text" placeholder="用户名" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:user" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaFormItem name="password">
+        <FaInput type="password" placeholder="密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+        <FaPasswordStrength :password="model.password" />
+      </FaFormItem>
+      <FaFormItem name="checkPassword">
+        <FaInput type="password" placeholder="确认密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaButton :loading="loading" size="lg" class="mt-4 w-full" type="submit">
+        注册
+      </FaButton>
+      <div class="text-sm mt-4 flex-center gap-2">
+        <span class="text-secondary-foreground op-50">已经有帐号?</span>
+        <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onLogin', model.account)">
+          去登录
+        </FaButton>
+      </div>
+    </FaForm>
+  </div>
+</template>

apps/core-ant-design-vue/src/components/AppAccountForm/reset-password.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+
+defineOptions({
+  name: 'ResetPasswordForm',
+})
+
+const props = defineProps<{
+  account?: string
+}>()
+
+const emits = defineEmits<{
+  onLogin: [account?: string]
+  onResetPassword: [account?: string]
+}>()
+
+const loading = ref(false)
+
+interface ResetPasswordModel {
+  account: string
+  captcha: string
+  newPassword: string
+}
+
+const model = ref<ResetPasswordModel>({
+  account: props.account ?? '',
+  captcha: '',
+  newPassword: '',
+})
+
+const validationSchema = toTypedSchema(z.object({
+  account: z.string().min(1, '请输入用户名'),
+  captcha: z.string().min(6, '请输入验证码'),
+  newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
+}))
+
+function onSubmit(values: ResetPasswordModel) {
+  loading.value = true
+  emits('onResetPassword', values.account)
+}
+
+const countdown = ref(0)
+const countdownInterval = ref(Number.NaN)
+function handleSendCaptcha() {
+  countdown.value = 60
+  countdownInterval.value = window.setInterval(() => {
+    countdown.value--
+    if (countdown.value === 0) {
+      clearInterval(countdownInterval.value)
+    }
+  }, 1000)
+}
+</script>
+
+<template>
+  <div class="p-12 flex-col-stretch-center min-h-500px w-full">
+    <FaForm :model="model" :validation-schema="validationSchema" @submit="onSubmit">
+      <div class="mb-8 space-y-2">
+        <h3 class="text-4xl font-bold">
+          忘记密码了? 🔒
+        </h3>
+        <p class="text-sm text-muted-foreground lg:text-base">
+          演示系统未提供该功能
+        </p>
+      </div>
+      <FaFormItem name="account">
+        <FaInput type="text" placeholder="用户名" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:user" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaFormItem name="captcha" :auto-bind="false">
+        <div class="flex-start-between gap-2">
+          <FaInputOTP
+            v-model="model.captcha"
+            name="captcha"
+            :length="6"
+            class="border-destructive"
+          />
+          <FaButton variant="outline" type="button" :disabled="countdown > 0" class="px-4 flex-1" @click="handleSendCaptcha">
+            {{ countdown === 0 ? '发送验证码' : `${countdown} 秒后重发` }}
+          </FaButton>
+        </div>
+      </FaFormItem>
+      <FaFormItem name="newPassword">
+        <FaInput type="password" placeholder="新密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaButton :loading="loading" size="lg" class="mt-4 w-full" type="submit">
+        确认
+      </FaButton>
+      <div class="text-sm mt-4 flex-center gap-2">
+        <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onLogin', model.account)">
+          去登录
+        </FaButton>
+      </div>
+    </FaForm>
+  </div>
+</template>

apps/core-ant-design-vue/src/components/AppAuth/index.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'AppAuth',
+})
+
+const props = defineProps<{
+  value: string | string[]
+  all?: boolean
+}>()
+
+const isCheck = computed(() => {
+  return props.all
+    ? useAppAuth().authAll(typeof props.value === 'string' ? [props.value] : props.value)
+    : useAppAuth().auth(props.value)
+})
+</script>
+
+<template>
+  <slot v-if="isCheck" />
+  <slot v-else name="no-auth" />
+</template>

apps/core-ant-design-vue/src/components/AppBackToTop/index.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { useTimeoutFn } from '@vueuse/core'
+
+defineOptions({
+  name: 'AppBackToTop',
+})
+
+const transitionClass = {
+  enterActiveClass: 'ease-out duration-300',
+  enterFromClass: 'opacity-0 translate-y-4 lg-translate-y-0 lg-scale-95',
+  enterToClass: 'opacity-100 translate-y-0 lg-scale-100',
+  leaveActiveClass: 'ease-in duration-200',
+  leaveFromClass: 'opacity-100 translate-y-0 lg-scale-100',
+  leaveToClass: 'opacity-0 translate-y-4 lg-translate-y-0 lg-scale-95',
+}
+
+onMounted(() => {
+  window.addEventListener('scroll', handleScroll)
+  handleScroll()
+})
+onBeforeUnmount(() => {
+  window.removeEventListener('scroll', handleScroll)
+})
+
+let timeout: (() => void) | undefined
+
+const show = ref(false)
+const scrollTop = ref(0)
+function handleScroll() {
+  scrollTop.value = document.documentElement.scrollTop
+}
+watch(scrollTop, (val) => {
+  if (val >= 200) {
+    handleMouseenter()
+    handleMouseleave()
+  }
+})
+
+function handleMouseenter() {
+  timeout?.()
+  // 此处setTimeout是为了避免移动端下和click事件同时触发
+  setTimeout(() => {
+    show.value = true
+  }, 0)
+}
+
+function handleMouseleave() {
+  ;({ stop: timeout } = useTimeoutFn(() => {
+    show.value = false
+  }, 2000))
+}
+
+function handleBackToTop() {
+  show.value && document.documentElement.scrollTo({
+    top: 0,
+    behavior: 'smooth',
+  })
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition v-bind="transitionClass">
+      <FaButton v-if="scrollTop >= 200" variant="outline" size="icon" class="rounded-full h-12 w-12 transition-all inset-b-4 fixed z-2000 dark:bg-background -inset-e-9 dark:hover:bg-background/50" :class="{ 'inset-e-3!': show }" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave" @click="handleBackToTop">
+        <FaIcon name="i-icon-park-outline:to-top-one" class="size-6" />
+      </FaButton>
+    </Transition>
+  </Teleport>
+</template>

apps/core-ant-design-vue/src/components/AppCopyright/index.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'AppCopyright',
+})
+
+const route = useRoute()
+const appSettingsStore = useAppSettingsStore()
+</script>
+
+<template>
+  <footer v-if="route.meta.copyright ?? appSettingsStore.settings.app.copyright.enable" class="text-sm text-secondary-foreground/50 my-4 px-4 flex flex-wrap items-center justify-center">
+    <span class="px-1">Copyright</span>
+    <FaIcon name="i-ri:copyright-line" class="size-5" />
+    <span v-if="appSettingsStore.settings.app.copyright.dates" class="px-1">{{ appSettingsStore.settings.app.copyright.dates }}</span>
+    <template v-if="appSettingsStore.settings.app.copyright.company">
+      <a v-if="appSettingsStore.settings.app.copyright.website" :href="appSettingsStore.settings.app.copyright.website" target="_blank" rel="noopener" class="px-1 text-center no-underline transition-colors hover-text-secondary-foreground">{{ appSettingsStore.settings.app.copyright.company }}</a>
+      <span v-else class="px-1">{{ appSettingsStore.settings.app.copyright.company }}</span>
+    </template>
+  </footer>
+</template>

apps/core-ant-design-vue/src/components/AppNotAllowed/index.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'AppNotAllowed',
+})
+
+const route = useRoute()
+const router = useRouter()
+
+const appSettingsStore = useAppSettingsStore()
+const appTabbarStore = useAppTabbarStore()
+
+onMounted(() => {
+  if (appSettingsStore.settings.topbar.tabbar) {
+    appTabbarStore.remove(route.meta.activeMenu || route.fullPath)
+  }
+})
+
+function goBack() {
+  router.push(appSettingsStore.settings.app.home.fullPath)
+}
+</script>
+
+<template>
+  <div class="flex flex-col h-full">
+    <div class="flex h-[5vh] lg:h-[10vh]">
+      <div class="w-[5vh] lg:w-[10vh]" />
+      <div class="border-inline border-dashed flex-1" />
+      <div class="w-[5vh] lg:w-[10vh]" />
+    </div>
+    <div class="border-block border-dashed flex flex-1">
+      <div class="w-[5vh] lg:w-[10vh]" />
+      <div class="border-inline border-dashed flex-center flex-1 relative">
+        <div class="p-4 flex-col-center gap-4 lg:p-12">
+          <h1 class="text-6xl font-bold m-0 lg:text-9xl">
+            403
+          </h1>
+          <div class="text-xl text-secondary-foreground/50 mx-0 text-center">
+            抱歉，你无权访问该页面
+          </div>
+          <FaButton variant="link" class="text-unset" @click="goBack">
+            返回主页
+          </FaButton>
+        </div>
+      </div>
+      <div class="w-[5vh] lg:w-[10vh]" />
+    </div>
+    <div class="flex h-[5vh] lg:h-[10vh]">
+      <div class="w-[5vh] lg:w-[10vh]" />
+      <div class="border-inline border-dashed flex-1" />
+      <div class="w-[5vh] lg:w-[10vh]" />
+    </div>
+  </div>
+</template>

apps/core-ant-design-vue/src/components/AppNotSupportedMobile/index.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'AppNotSupportedMobile',
+})
+</script>
+
+<template>
+  <div class="flex flex-col h-full">
+    <div class="flex h-[5vh] lg:h-[10vh]">
+      <div class="w-[5vh] lg:w-[10vh]" />
+      <div class="border-inline border-dashed flex-1" />
+      <div class="w-[5vh] lg:w-[10vh]" />
+    </div>
+    <div class="border-block border-dashed flex flex-1">
+      <div class="w-[5vh] lg:w-[10vh]" />
+      <div class="border-inline border-dashed flex-center flex-1 relative">
+        <div class="p-4 flex-col-center gap-4 lg:p-12">
+          <h1 class="text-6xl font-bold m-0 lg:text-9xl">
+            <FaIcon name="i-tdesign:mobile-blocked-filled" />
+          </h1>
+          <div class="text-xl text-secondary-foreground/50 mx-0 text-center">
+            抱歉，本网站不支持移动设备访问，请切换到桌面设备
+          </div>
+        </div>
+      </div>
+      <div class="w-[5vh] lg:w-[10vh]" />
+    </div>
+    <div class="flex h-[5vh] lg:h-[10vh]">
+      <div class="w-[5vh] lg:w-[10vh]" />
+      <div class="border-inline border-dashed flex-1" />
+      <div class="w-[5vh] lg:w-[10vh]" />
+    </div>
+  </div>
+</template>

apps/core-ant-design-vue/src/components/AppSystemInfo/index.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import eventBus from '@/utils/eventBus'
+
+defineOptions({
+  name: 'AppSystemInfo',
+})
+
+const isShow = ref(false)
+
+const { pkg, lastBuildTime } = __SYSTEM_INFO__
+
+onMounted(() => {
+  eventBus.on('global-system-info-open', () => {
+    isShow.value = true
+  })
+})
+
+onUnmounted(() => {
+  eventBus.off('global-system-info-open')
+})
+</script>
+
+<template>
+  <FaDrawer v-model="isShow" title="系统信息" :footer="false">
+    <div v-if="pkg.version">
+      <FaDivider>
+        版本号
+      </FaDivider>
+      <div class="text-lg font-bold font-sans text-center">
+        {{ pkg.version }}
+      </div>
+    </div>
+    <div>
+      <FaDivider>
+        最后编译时间
+      </FaDivider>
+      <div class="text-lg font-bold font-sans text-center">
+        {{ lastBuildTime }}
+      </div>
+    </div>
+    <div>
+      <FaDivider>
+        生产环境依赖
+      </FaDivider>
+      <ul class="text-sm list-none">
+        <li v-for="(val, key) in (pkg.dependencies as object)" :key="key" class="px-2 py-1.5 rounded-lg flex items-center justify-between hover-bg-secondary">
+          <div class="font-bold">
+            {{ key }}
+          </div>
+          <div class="font-sans">
+            {{ val }}
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div>
+      <FaDivider>
+        开发环境依赖
+      </FaDivider>
+      <ul class="text-sm list-none">
+        <li v-for="(val, key) in (pkg.devDependencies as object)" :key="key" class="px-2 py-1.5 rounded-lg flex items-center justify-between hover-bg-secondary">
+          <div class="font-bold">
+            {{ key }}
+          </div>
+          <div class="font-sans">
+            {{ val }}
+          </div>
+        </li>
+      </ul>
+    </div>
+  </FaDrawer>
+</template>

apps/core-ant-design-vue/src/composables/app/auth.ts

@@ -0,0 +1,32 @@
+export function useAppAuth() {
+  function hasPermission(permission: string) {
+    const appSettingsStore = useAppSettingsStore()
+    const appAccountStore = useAppAccountStore()
+    if (appSettingsStore.settings.app.account.auth) {
+      return appAccountStore.permissions.includes(permission)
+    }
+    else {
+      return true
+    }
+  }
+
+  function auth(value: string | string[]) {
+    let auth
+    if (typeof value === 'string') {
+      auth = value !== '' ? hasPermission(value) : true
+    }
+    else {
+      auth = value.length > 0 ? value.some(item => hasPermission(item)) : true
+    }
+    return auth
+  }
+
+  function authAll(value: string[]) {
+    return value.length > 0 ? value.every(item => hasPermission(item)) : true
+  }
+
+  return {
+    auth,
+    authAll,
+  }
+}

apps/core-ant-design-vue/src/composables/app/menu.ts

@@ -0,0 +1,27 @@
+export function useAppMenu() {
+  const router = useRouter()
+
+  const appSettingsStore = useAppSettingsStore()
+  const appMenuStore = useAppMenuStore()
+
+  function generateTitle(title: string | (() => any) = '[ 无标题 ]') {
+    return typeof title === 'function'
+      ? title()
+      : title
+  }
+
+  function switchTo(index: number) {
+    appMenuStore.setActived(index)
+    if (
+      appSettingsStore.settings.menu.mainMenuClickMode === 'jump'
+      || (appSettingsStore.settings.menu.mainMenuClickMode === 'smart' && appMenuStore.sidebarMenusHasOnlyMenu)
+    ) {
+      router.push(appMenuStore.sidebarMenusFirstDeepestPath)
+    }
+  }
+
+  return {
+    generateTitle,
+    switchTo,
+  }
+}

apps/core-ant-design-vue/src/composables/app/page.ts

@@ -0,0 +1,20 @@
+export function useAppPage() {
+  const router = useRouter()
+
+  const appSettingsStore = useAppSettingsStore()
+
+  function reload() {
+    appSettingsStore.setIsReloading(true)
+    router.push({
+      name: 'reload',
+    }).then(() => {
+      setTimeout(() => {
+        appSettingsStore.setIsReloading(false)
+      }, 100)
+    })
+  }
+
+  return {
+    reload,
+  }
+}

apps/core-ant-design-vue/src/composables/app/tabbar.ts

@@ -0,0 +1,150 @@
+export function useAppTabbar() {
+  const route = useRoute()
+  const router = useRouter()
+
+  const appTabbarStore = useAppTabbarStore()
+
+  function getId() {
+    return route.fullPath
+  }
+
+  function closeById(tabId = getId()) {
+    if (checkClose(tabId, false)) {
+      const activedTabId = getId()
+      // 如果关闭的标签正好是当前路由
+      if (tabId === activedTabId) {
+        const index = appTabbarStore.list.findIndex(item => item.tabId === tabId)
+        if (index > 0) {
+          router.close(appTabbarStore.list[index - 1].fullPath)
+        }
+        else {
+          router.close(appTabbarStore.list[index + 1].fullPath)
+        }
+      }
+      else {
+        appTabbarStore.remove(tabId)
+      }
+    }
+  }
+
+  /**
+   * 关闭两侧标签页
+   */
+  function closeOtherSide(tabId = getId()) {
+    const activedTabId = getId()
+    // 如果操作的是非当前路由标签页，则先跳转到指定路由标签页
+    if (tabId !== activedTabId) {
+      const index = appTabbarStore.list.findIndex(item => item.tabId === tabId)
+      router.push(appTabbarStore.list[index].fullPath)
+    }
+    appTabbarStore.removeOtherSide(tabId)
+  }
+
+  /**
+   * 关闭左侧标签页
+   */
+  function closeLeftSide(tabId = getId()) {
+    const activedTabId = getId()
+    // 如果操作的是非当前路由标签页，需要判断当前标签页是否在指定标签页左侧，如果是则先跳转到指定路由标签页
+    if (tabId !== activedTabId) {
+      const index = appTabbarStore.list.findIndex(item => item.tabId === tabId)
+      const activedIndex = appTabbarStore.list.findIndex(item => item.tabId === activedTabId)
+      if (activedIndex < index) {
+        router.push(appTabbarStore.list[index].fullPath)
+      }
+    }
+    appTabbarStore.removeLeftSide(tabId)
+  }
+
+  /**
+   * 关闭右侧标签页
+   */
+  function closeRightSide(tabId = getId()) {
+    const activedTabId = getId()
+    // 如果操作的是非当前路由标签页，需要判断当前标签页是否在指定标签页右侧，如果是则先跳转到指定路由标签页
+    if (tabId !== activedTabId) {
+      const index = appTabbarStore.list.findIndex(item => item.tabId === tabId)
+      const activedIndex = appTabbarStore.list.findIndex(item => item.tabId === activedTabId)
+      if (activedIndex > index) {
+        router.push(appTabbarStore.list[index].fullPath)
+      }
+    }
+    appTabbarStore.removeRightSide(tabId)
+  }
+
+  /**
+   * 校验指定标签是否可关闭
+   */
+  function checkClose(tabId = getId(), checkOnly = true) {
+    let flag = true
+    const index = appTabbarStore.list.findIndex(item => item.tabId === tabId)
+    if (index < 0) {
+      flag = false
+      !checkOnly && useFaToast().warning('关闭的标签页不存在', {
+        position: 'top-center',
+      })
+    }
+    else if (appTabbarStore.list.length <= 1) {
+      flag = false
+      !checkOnly && useFaToast().warning('当前只有一个标签页，不可关闭', {
+        position: 'top-center',
+      })
+    }
+    return flag
+  }
+
+  /**
+   * 校验指定标签两侧是否有可关闭的标签
+   */
+  function checkCloseOtherSide(tabId = getId()) {
+    return appTabbarStore.list.some((item) => {
+      return item.tabId !== tabId
+    })
+  }
+
+  /**
+   * 校验指定标签左侧是否有可关闭的标签
+   */
+  function checkCloseLeftSide(tabId = getId()) {
+    let flag = true
+    if (tabId === appTabbarStore.list[0]?.tabId) {
+      flag = false
+    }
+    else {
+      const index = appTabbarStore.list.findIndex(item => item.tabId === tabId)
+      flag = appTabbarStore.list.some((item, i) => {
+        return i < index && item.tabId !== tabId
+      })
+    }
+    return flag
+  }
+
+  /**
+   * 校验指定标签右侧是否有可关闭的标签
+   */
+  function checkCloseRightSide(tabId = getId()) {
+    let flag = true
+    if (tabId === appTabbarStore.list.at(-1)?.tabId) {
+      flag = false
+    }
+    else {
+      const index = appTabbarStore.list.findIndex(item => item.tabId === tabId)
+      flag = appTabbarStore.list.some((item, i) => {
+        return i >= index && item.tabId !== tabId
+      })
+    }
+    return flag
+  }
+
+  return {
+    getId,
+    closeById,
+    closeOtherSide,
+    closeLeftSide,
+    closeRightSide,
+    checkClose,
+    checkCloseOtherSide,
+    checkCloseLeftSide,
+    checkCloseRightSide,
+  }
+}

apps/core-ant-design-vue/src/hotkeys/extend.ts

@@ -0,0 +1,57 @@
+import type { HotkeyBinding } from '@fantastic-admin/hotkeys'
+
+/**
+ * 业务扩展快捷键 id
+ *
+ * 使用方式：
+ *
+ * export const EXT_HOTKEY_ID = {
+ *   demoOpen: 'demo.open',
+ * } as const
+ */
+export const EXT_HOTKEY_ID = {} as const
+
+type ExtendHotkeyId = typeof EXT_HOTKEY_ID[keyof typeof EXT_HOTKEY_ID]
+
+/**
+ * 业务扩展全局快捷键
+ *
+ * 示例：
+ *
+ * export const extendGlobalHotkeyBindings = [
+ *   {
+ *     id: EXT_HOTKEY_ID.demoOpen,
+ *     keys: ['command+j', 'ctrl+j'],
+ *     enabled: ctx => ctx.settings.toolbar.menuSearch.enable,
+ *     help: {
+ *       group: 'global',
+ *       titleKey: 'global.demoOpen',
+ *       order: 90,
+ *       visible: ctx => ctx.settings.toolbar.menuSearch.enable,
+ *       displayKeys: {
+ *         default: ['Ctrl', 'J'],
+ *         mac: ['⌘', 'J'],
+ *       },
+ *     },
+ *   },
+ * ] satisfies HotkeyBinding<ExtendHotkeyId>[]
+ */
+export const extendGlobalHotkeyBindings = [] satisfies HotkeyBinding<ExtendHotkeyId>[]
+
+/**
+ * 业务扩展局部快捷键
+ *
+ * 示例：
+ *
+ * export const extendScopedHotkeyBindings = [
+ *   {
+ *     id: EXT_HOTKEY_ID.demoConfirm,
+ *     keys: ['enter'],
+ *   },
+ *   {
+ *     id: EXT_HOTKEY_ID.demoClose,
+ *     keys: ['esc'],
+ *   },
+ * ] satisfies HotkeyBinding<ExtendHotkeyId>[]
+ */
+export const extendScopedHotkeyBindings = [] satisfies HotkeyBinding<ExtendHotkeyId>[]

apps/core-ant-design-vue/src/hotkeys/index.ts

@@ -0,0 +1,41 @@
+import type {
+  HotkeyBinding,
+  HotkeyContextBase,
+  HotkeyDisplayKeys,
+  HotkeyHandler,
+  HotkeyHandlerArgs,
+  HotkeyHandlersMap,
+  HotkeyHelpGroup,
+  HotkeyHelpMeta,
+} from '@fantastic-admin/hotkeys'
+import { createHotkeys } from '@fantastic-admin/hotkeys'
+import { EXT_HOTKEY_ID, extendGlobalHotkeyBindings, extendScopedHotkeyBindings } from './extend'
+
+const appHotkeys = createHotkeys({
+  extendIds: EXT_HOTKEY_ID,
+  extendGlobalHotkeyBindings,
+  extendScopedHotkeyBindings,
+  getContext: () => ({
+    settings: useAppSettingsStore().settings,
+  }),
+})
+
+export const HOTKEY_ID = appHotkeys.HOTKEY_ID
+export const hotkeyIds = appHotkeys.hotkeyIds
+export const globalHotkeyBindings = appHotkeys.globalHotkeyBindings
+export const menuSearchHotkeyBindings = appHotkeys.menuSearchHotkeyBindings
+export const hotkeyBindings = appHotkeys.hotkeyBindings
+export const useHotkey = appHotkeys.useHotkey
+export const useHotkeyBindings = appHotkeys.useHotkeyBindings
+
+export type HotkeyId = typeof HOTKEY_ID[keyof typeof HOTKEY_ID]
+export type {
+  HotkeyBinding,
+  HotkeyContextBase,
+  HotkeyDisplayKeys,
+  HotkeyHandler,
+  HotkeyHandlerArgs,
+  HotkeyHandlersMap,
+  HotkeyHelpGroup,
+  HotkeyHelpMeta,
+}

apps/core-ant-design-vue/src/iconify/index.json

@@ -0,0 +1 @@
+{ "collections": ["ant-design", "ep", "flagpack", "icon-park", "mdi", "ri", "logos", "twemoji", "vscode-icons"], "isOfflineUse": false }

apps/core-ant-design-vue/src/iconify/index.ts

@@ -0,0 +1,9 @@
+import { addCollection } from '@iconify/vue'
+import data from './data.json'
+
+export async function downloadAndInstall(name: string) {
+  const data = Object.freeze(await fetch(`./icons/${name}-raw.json`).then(r => r.json()))
+  addCollection(data)
+}
+
+export const icons = data.sort((a, b) => a.info.name.localeCompare(b.info.name))

apps/core-ant-design-vue/src/layouts/components/AppSetting/index.vue

@@ -0,0 +1,440 @@
+<script setup lang="ts">
+import { diffTwoObj, setSettings } from '@fantastic-admin/settings'
+import { useClipboard } from '@vueuse/core'
+import eventBus from '@/utils/eventBus'
+
+defineOptions({
+  name: 'AppSetting',
+})
+
+const route = useRoute()
+
+const appSettingsStore = useAppSettingsStore()
+const settingsDefault = setSettings({})
+const appMenuStore = useAppMenuStore()
+
+const isShow = ref(false)
+
+const themeRadius = computed<number[]>({
+  get() {
+    return [appSettingsStore.settings.theme.radius]
+  },
+  set(value) {
+    appSettingsStore.settings.theme.radius = value[0]
+  },
+})
+
+watch(() => appSettingsStore.settings.menu.mode, (value) => {
+  if (value === 'single') {
+    appMenuStore.setActived(0)
+  }
+  else {
+    appMenuStore.setActived(route.fullPath)
+  }
+})
+onMounted(() => {
+  eventBus.on('global-app-setting-toggle', () => {
+    isShow.value = !isShow.value
+  })
+})
+
+const { copy, copied, isSupported } = useClipboard({ legacy: true })
+
+function handleCopy() {
+  copy(JSON.stringify(diffTwoObj(settingsDefault, appSettingsStore.settings), null, 2))
+}
+</script>
+
+<template>
+  <FaModal v-model="isShow" title="应用配置" description="在生产环境中应关闭该模块" :footer="isSupported" :destroy-on-close="false" class="sm:max-w-4xl" content-class="bg-[var(--g-main-area-bg)] transition-background-color">
+    <div
+      :class="{
+        'columns-1': appSettingsStore.mode === 'mobile',
+        'columns-2': appSettingsStore.mode === 'pc',
+      }"
+    >
+      <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">
+            颜色方案
+          </div>
+          <FaButtonGroup>
+            <FaButton
+              v-for="(item, index) in [
+                { icon: 'i-ri:sun-line', value: 'light' },
+                { icon: 'i-ri:moon-line', value: 'dark' },
+                { icon: 'i-codicon:color-mode', value: '' },
+              ]" :key="index" :variant="appSettingsStore.settings.theme.colorScheme === item.value ? 'default' : 'outline'" size="sm" :class="{ 'z-1': appSettingsStore.settings.theme.colorScheme === item.value }" @click="appSettingsStore.settings.theme.colorScheme = (item.value as any)"
+            >
+              <FaIcon :name="item.icon" />
+            </FaButton>
+          </FaButtonGroup>
+        </div>
+        <div class="setting-item">
+          <div class="label">
+            圆角
+          </div>
+          <FaSlider v-model="themeRadius" :min="0" :max="1" :step="0.25" class="w-1/2" />
+        </div>
+        <div class="setting-item">
+          <div class="label">
+            色弱模式
+          </div>
+          <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="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'">
+              <div class="mode-container" />
+            </FaButton>
+          </FaTooltip>
+          <FaTooltip text="顶部模式" :delay="500">
+            <FaButton variant="outline" class="mode mode-head" :class="{ active: appSettingsStore.settings.menu.mode === 'head' }" @click="appSettingsStore.settings.menu.mode = 'head'">
+              <div class="mode-container" />
+            </FaButton>
+          </FaTooltip>
+          <FaTooltip text="侧边栏模式 (无主导航菜单)" :delay="500">
+            <FaButton variant="outline" class="mode mode-single" :class="{ active: appSettingsStore.settings.menu.mode === 'single' }" @click="appSettingsStore.settings.menu.mode = 'single'">
+              <div class="mode-container" />
+            </FaButton>
+          </FaTooltip>
+        </div>
+        <div class="setting-item">
+          <div class="label" :class="{ 'op-50': !['single', 'side', 'head'].includes(appSettingsStore.settings.menu.mode) }">
+            点击主导航菜单
+            <FaTooltip text="智能模式下默认执行切换操作，当次导航菜单只有一个可访问的导航菜单时执行跳转操作">
+              <FaIcon name="i-ri:question-line" class="text-base text-orange cursor-help" />
+            </FaTooltip>
+          </div>
+          <FaButtonGroup>
+            <FaButton
+              v-for="(item, index) in [
+                { label: '切换', value: 'switch' },
+                { label: '跳转', value: 'jump' },
+                { label: '智能', value: 'smart' },
+              ]" :key="index" :variant="appSettingsStore.settings.menu.mainMenuClickMode === item.value ? 'default' : 'outline'" size="sm" :disabled="!['single', 'side', 'head'].includes(appSettingsStore.settings.menu.mode)" :class="{ 'z-1': appSettingsStore.settings.menu.mainMenuClickMode === item.value }" @click="appSettingsStore.settings.menu.mainMenuClickMode = (item.value as any)"
+            >
+              {{ item.label }}
+            </FaButton>
+          </FaButtonGroup>
+        </div>
+        <div class="setting-item">
+          <div class="label">
+            次导航菜单唯一展开
+          </div>
+          <FaSwitch v-model="appSettingsStore.settings.menu.subMenuUniqueExpand" />
+        </div>
+        <div class="setting-item">
+          <div class="label">
+            次导航菜单收起
+          </div>
+          <FaSwitch v-model="appSettingsStore.settings.menu.subMenuCollapse" />
+        </div>
+        <div v-if="appSettingsStore.mode === 'pc'" class="setting-item">
+          <div class="label">
+            次导航菜单展开/收起按钮
+          </div>
+          <FaSwitch v-model="appSettingsStore.settings.menu.subMenuCollapseButton" />
+        </div>
+        <div class="setting-item">
+          <div class="label" :class="{ 'op-50': appSettingsStore.settings.menu.mode === 'single' }">
+            快捷键
+          </div>
+          <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="font-bold" main-class="space-y-4">
+        <div class="setting-item">
+          <div class="label">
+            标签栏
+          </div>
+          <FaSwitch v-model="appSettingsStore.settings.topbar.tabbar" />
+        </div>
+        <div class="setting-item">
+          <div class="label">
+            工具栏
+          </div>
+          <FaSwitch v-model="appSettingsStore.settings.topbar.toolbar" />
+        </div>
+        <div class="setting-item">
+          <div class="label">
+            模式
+          </div>
+          <FaButtonGroup>
+            <FaButton
+              v-for="(item, index) in [
+                { label: '静态', value: 'static' },
+                { label: '固定', value: 'fixed' },
+                { label: '粘性', value: 'sticky' },
+              ]" :key="index" :variant="appSettingsStore.settings.topbar.mode === item.value ? 'default' : 'outline'" size="sm" :class="{ 'z-1': appSettingsStore.settings.topbar.mode === item.value }" :disabled="!appSettingsStore.settings.topbar.tabbar && !appSettingsStore.settings.topbar.toolbar" @click="appSettingsStore.settings.topbar.mode = (item.value as any)"
+            >
+              {{ item.label }}
+            </FaButton>
+          </FaButtonGroup>
+        </div>
+      </FaPageMain>
+      <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">
+            显示图标
+          </div>
+          <FaSwitch v-model="appSettingsStore.settings.tabbar.icon" />
+        </div>
+        <div class="setting-item">
+          <div class="label">
+            快捷键
+          </div>
+          <FaSwitch v-model="appSettingsStore.settings.tabbar.hotkeys" />
+        </div>
+      </FaPageMain>
+      <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" />
+            面包屑导航
+          </div>
+          <FaSwitch v-model="appSettingsStore.settings.toolbar.breadcrumb" />
+        </div>
+        <div class="setting-item">
+          <div class="label">
+            <FaIcon name="i-ri:search-line" />
+            导航搜索
+          </div>
+          <FaSwitch v-model="appSettingsStore.settings.toolbar.menuSearch.enable" />
+        </div>
+        <div class="ps-8 space-y-4">
+          <div class="setting-item">
+            <div class="label" :class="{ 'op-50': !appSettingsStore.settings.toolbar.menuSearch.enable }">
+              快捷键
+            </div>
+            <FaSwitch v-model="appSettingsStore.settings.toolbar.menuSearch.hotkeys" :disabled="!appSettingsStore.settings.toolbar.menuSearch.enable" />
+          </div>
+        </div>
+        <div v-if="appSettingsStore.mode === 'pc'" class="setting-item">
+          <div class="label">
+            <FaIcon name="i-ri:fullscreen-line" />
+            全屏
+          </div>
+          <FaSwitch v-model="appSettingsStore.settings.toolbar.fullscreen" />
+        </div>
+        <div class="setting-item">
+          <div class="label">
+            <FaIcon name="i-iconoir:refresh-double" />
+            页面刷新
+            <FaTooltip text="重新载入当前页面，并且不刷新浏览器">
+              <FaIcon name="i-ri:question-line" class="text-base text-orange cursor-help" />
+            </FaTooltip>
+          </div>
+          <FaSwitch v-model="appSettingsStore.settings.toolbar.pageReload" />
+        </div>
+        <div class="setting-item">
+          <div class="label">
+            <FaIcon name="i-ri:sun-line" />
+            颜色主题
+          </div>
+          <FaSwitch v-model="appSettingsStore.settings.toolbar.colorScheme" />
+        </div>
+      </FaPageMain>
+      <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">
+            载入进度条
+            <FaTooltip text="路由跳转时会在页面顶部显示进度条，该进度仅为模拟效果，并非真实加载进度">
+              <FaIcon name="i-ri:question-line" class="text-base text-orange cursor-help" />
+            </FaTooltip>
+          </div>
+          <FaSwitch v-model="appSettingsStore.settings.page.progress" />
+        </div>
+      </FaPageMain>
+      <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">
+            账号
+          </div>
+          <div class="setting-item">
+            <div class="label">
+              权限验证
+            </div>
+            <FaSwitch v-model="appSettingsStore.settings.app.account.auth" />
+          </div>
+        </div>
+        <div class="setting-item">
+          <div class="label">
+            动态标题
+            <FaTooltip text="开启时页面标题会显示当前路由标题，格式为“页面标题 - 网站名称”；关闭时则显示网站名称，网站名称在项目根目录下 .env.* 文件里配置">
+              <FaIcon name="i-ri:question-line" class="text-base text-orange cursor-help" />
+            </FaTooltip>
+          </div>
+          <FaSwitch v-model="appSettingsStore.settings.app.dynamicTitle" />
+        </div>
+        <div class="setting-item">
+          <div class="label">
+            哀悼模式
+            <FaTooltip text="网站整体变灰色">
+              <FaIcon name="i-ri:question-line" class="text-base text-orange cursor-help" />
+            </FaTooltip>
+          </div>
+          <FaSwitch v-model="appSettingsStore.settings.app.rip" />
+        </div>
+        <div class="setting-item">
+          <div class="label">
+            移动端访问
+            <FaTooltip text="关闭后，将禁用移动端访问">
+              <FaIcon name="i-ri:question-line" class="text-base text-orange cursor-help" />
+            </FaTooltip>
+          </div>
+          <FaSwitch v-model="appSettingsStore.settings.app.mobile" />
+        </div>
+        <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">
+            主页
+          </div>
+          <div class="setting-item">
+            <div class="label">
+              启用
+              <FaTooltip text="登录后默认进入主页，否则默认进入第一个导航页面">
+                <FaIcon name="i-ri:question-line" class="text-base text-orange cursor-help" />
+              </FaTooltip>
+            </div>
+            <FaSwitch v-model="appSettingsStore.settings.app.home.enable" />
+          </div>
+          <div class="setting-item">
+            <div class="label">
+              标题
+              <FaTooltip text="用于设置首页显示标题，支持直接输入简体中文内容">
+                <FaIcon name="i-ri:question-line" class="text-base text-orange cursor-help" />
+              </FaTooltip>
+            </div>
+            <FaInput v-model="appSettingsStore.settings.app.home.title" />
+          </div>
+        </div>
+        <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">
+            版权
+          </div>
+          <div class="setting-item">
+            <div class="label">
+              启用
+            </div>
+            <FaSwitch v-model="appSettingsStore.settings.app.copyright.enable" />
+          </div>
+          <div class="setting-item">
+            <div class="label">
+              日期
+            </div>
+            <FaInput v-model="appSettingsStore.settings.app.copyright.dates" :disabled="!appSettingsStore.settings.app.copyright.enable" />
+          </div>
+          <div class="setting-item">
+            <div class="label">
+              公司
+            </div>
+            <FaInput v-model="appSettingsStore.settings.app.copyright.company" :disabled="!appSettingsStore.settings.app.copyright.enable" />
+          </div>
+          <div class="setting-item">
+            <div class="label">
+              网站
+            </div>
+            <FaInput v-model="appSettingsStore.settings.app.copyright.website" :disabled="!appSettingsStore.settings.app.copyright.enable" />
+          </div>
+        </div>
+      </FaPageMain>
+    </div>
+    <template #footer>
+      <div class="w-full">
+        <div class="text-sm/6 c-rose mb-2 px-4 py-2 text-center rounded-lg bg-rose/20">
+          在此处调整配置只是临时生效，要想真正应用于项目，请点击「复制配置」按钮，并粘贴到
+          <code class="text-sm font-mono font-semibold px-[0.3rem] py-[0.2rem] rounded bg-muted relative">src/settings.ts</code>
+          文件中。
+        </div>
+        <FaButton class="w-full" @click="handleCopy">
+          <FaIcon :name="copied ? 'i-tabler:clipboard-check' : 'i-tabler:clipboard'" class="size-5" />
+          复制配置
+        </FaButton>
+      </div>
+    </template>
+  </FaModal>
+</template>
+
+<style scoped>
+.menu-mode {
+  --uno: flex items-center justify-center gap-4;
+
+  .mode {
+    --uno: relative w-16 h-12;
+
+    &.active {
+      --uno: ring-primary ring-2;
+    }
+
+    &::before,
+    &::after,
+    .mode-container {
+      --uno: absolute pointer-events-none;
+    }
+
+    &::before {
+      --uno: content-empty bg-primary;
+    }
+
+    &::after {
+      --uno: content-empty bg-primary/60;
+    }
+
+    .mode-container {
+      --uno: bg-primary/20 border-width-1.5 border-dashed border-primary;
+
+      &::before {
+        --uno: content-empty absolute w-full h-full;
+      }
+    }
+
+    &-side {
+      &::before {
+        --uno: top-2 bottom-2 start-2 w-2 rounded-ss-1 rounded-es-1;
+      }
+
+      &::after {
+        --uno: top-2 bottom-2 start-4.5 w-3;
+      }
+
+      .mode-container {
+        --uno: inset-t-2 inset-e-2 inset-b-2 inset-s-8 rounded-se-1 rounded-ee-1;
+      }
+    }
+
+    &-head {
+      &::before {
+        --uno: top-2 start-2 end-2 h-2 rounded-ss-1 rounded-se-1;
+      }
+
+      &::after {
+        --uno: top-4.5 start-2 bottom-2 w-3 rounded-es-1;
+      }
+
+      .mode-container {
+        --uno: inset-t-4.5 inset-e-2 inset-b-2 inset-s-5.5 rounded-ee-1;
+      }
+    }
+
+    &-single {
+      &::after {
+        --uno: top-2 start-2 bottom-2 w-3 rounded-ss-1 rounded-es-1;
+      }
+
+      .mode-container {
+        --uno: inset-t-2 inset-e-2 inset-b-2 inset-s-5.5 rounded-se-1 rounded-ee-1;
+      }
+    }
+  }
+}
+
+.setting-item {
+  --uno: flex items-center justify-between gap-4;
+
+  .label {
+    --uno: flex items-center flex-shrink-0 gap-2 text-sm;
+  }
+}
+</style>

apps/core-ant-design-vue/src/layouts/components/Breadcrumb/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="text-sm flex items-center">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+:deep(.breadcrumb-item) {
+  &:first-child {
+    .separator {
+      display: none;
+    }
+  }
+
+  &:last-child {
+    .text {
+      opacity: 1;
+    }
+  }
+}
+</style>

apps/core-ant-design-vue/src/layouts/components/Breadcrumb/item.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { RouteLocationRaw } from 'vue-router'
+
+const props = withDefaults(
+  defineProps<{
+    to?: RouteLocationRaw
+    replace?: boolean
+    separator?: string
+  }>(),
+  {
+    separator: '/',
+  },
+)
+
+const router = useRouter()
+
+function onClick() {
+  if (props.to) {
+    props.replace ? router.replace(props.to) : router.push(props.to)
+  }
+}
+</script>
+
+<template>
+  <div class="breadcrumb-item text-foreground flex items-center">
+    <span class="separator mx-2">
+      {{ separator }}
+    </span>
+    <span
+      class="text opacity-60 flex items-center"
+      :class="{
+        'is-link cursor-pointer transition-opacity hover-opacity-100': !!props.to,
+      }" @click="onClick"
+    >
+      <slot />
+    </span>
+  </div>
+</template>

apps/core-ant-design-vue/src/layouts/components/FloatingSidebarMenuButton/index.vue

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

apps/core-ant-design-vue/src/layouts/components/Header/index.vue

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { useSlots } from '@/slots'
+import Logo from '../Logo/index.vue'
+
+defineOptions({
+  name: 'LayoutHeader',
+})
+
+defineProps<{
+  enable: boolean
+}>()
+
+const appSettingsStore = useAppSettingsStore()
+const appMenuStore = useAppMenuStore()
+
+const { generateTitle, switchTo } = useAppMenu()
+</script>
+
+<template>
+  <Transition name="header">
+    <header v-if="enable">
+      <div class="header-container">
+        <Component :is="useSlots('header-start')" />
+        <Logo class="title" />
+        <Component :is="useSlots('header-after-logo')" />
+        <FaScrollArea :scrollbar="false" mask horizontal class="menu-container overscroll-contain flex-1 h-full">
+          <!-- 顶部模式 -->
+          <div
+            v-if="appSettingsStore.settings.menu.mode === 'head'" class="menu flex h-full transition-all of-hidden"
+          >
+            <template v-for="(item, index) in appMenuStore.allMenus" :key="index">
+              <div
+                class="menu-item mx-1 py-2 transition-all relative" :class="{
+                  active: index === appMenuStore.actived,
+                }"
+              >
+                <FaTooltip v-if="item.children && item.children.length !== 0" :disabled="!generateTitle(item.meta?.title)" :text="generateTitle(item.meta?.title)" side="bottom">
+                  <div
+                    class="group menu-item-container text-[var(--g-header-menu-color)] px-3 rounded-lg flex gap-1 h-full w-full cursor-pointer transition-colors items-center justify-between relative hover-(text-[var(--g-header-menu-hover-color)] bg-[var(--g-header-menu-hover-bg)])" :class="{
+                      'text-[var(--g-header-menu-active-color)]! bg-[var(--g-header-menu-active-bg)]!': index === appMenuStore.actived,
+                    }" @click="switchTo(index)"
+                  >
+                    <div class="inline-flex flex-1 gap-1 items-center justify-center">
+                      <FaIcon v-if="item.meta?.icon" :name="item.meta.icon" class="menu-item-container-icon transition-transform group-hover-scale-120" />
+                      <span class="text-sm flex-1 w-full truncate transition-height transition-opacity transition-width empty:hidden">
+                        {{ generateTitle(item.meta?.title) }}
+                      </span>
+                    </div>
+                  </div>
+                </FaTooltip>
+              </div>
+            </template>
+          </div>
+        </FaScrollArea>
+        <Component :is="useSlots('header-after-menu')" />
+        <div class="flex-center">
+          <AppAccountButton only-avatar dropdown-side="bottom" class="p-2 size-12" />
+        </div>
+        <Component :is="useSlots('header-end')" />
+      </div>
+    </header>
+  </Transition>
+</template>
+
+<style scoped>
+header {
+  position: fixed;
+  top: var(--g-slots-layout-top-height);
+  right: var(--scrollbar-width, 0);
+  left: 0;
+  z-index: 1020;
+  display: flex;
+  align-items: center;
+  width: calc(100% - var(--scrollbar-width, 0px));
+  height: var(--g-header-height);
+  margin: 0 auto;
+  color: var(--g-header-color);
+  background-color: var(--g-header-bg);
+  box-shadow: inset 0 -1px 0 0 oklch(var(--border));
+  transition: width 0.3s, background-color 0.15s, box-shadow 0.15s;
+
+  .header-container {
+    display: flex;
+    gap: 30px;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    max-width: var(--g-header-width);
+    height: 100%;
+    padding: 0 12px;
+    margin: 0 auto;
+
+    :deep(a.title) {
+      position: relative;
+      flex: 0;
+      width: inherit;
+      height: inherit;
+      padding: 0;
+      background-color: inherit;
+
+      .logo {
+        width: initial;
+        max-width: initial;
+        height: min(70%, 50px);
+      }
+
+      span {
+        font-size: 20px;
+        color: var(--g-header-color);
+        letter-spacing: 1px;
+      }
+    }
+
+    .menu-container {
+      .menu {
+        display: inline-flex;
+
+        :deep(.menu-item) {
+          .menu-item-container {
+            color: var(--g-header-menu-color);
+
+            &:hover {
+              color: var(--g-header-menu-hover-color);
+              background-color: var(--g-header-menu-hover-bg);
+            }
+
+            .menu-item-container-icon {
+              font-size: 20px !important;
+            }
+          }
+
+          &.active .menu-item-container {
+            color: var(--g-header-menu-active-color) !important;
+            background-color: var(--g-header-menu-active-bg) !important;
+          }
+        }
+      }
+    }
+  }
+}
+
+/* 头部动画 */
+.header-enter-active,
+.header-leave-active {
+  transition: transform 0.3s;
+}
+
+.header-enter-from,
+.header-leave-to {
+  transform: translateY(calc(var(--g-header-height) * -1));
+}
+</style>

apps/core-ant-design-vue/src/layouts/components/Hotkeys/index.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { hotkeyBindings } from '@/hotkeys'
+import eventBus from '@/utils/eventBus'
+
+defineOptions({
+  name: 'HotkeysIntro',
+})
+
+const appSettingsStore = useAppSettingsStore()
+const hotkeyContext = {
+  settings: appSettingsStore.settings,
+}
+
+const helpGroupMeta = {
+  global: { title: '全局', order: 10 },
+  nav: { title: '主导航', order: 20 },
+  tabbar: { title: '标签栏', order: 30 },
+} as const
+
+const itemTitleMap: Record<string, string> = {
+  'global.system': '查看系统信息',
+  'global.search': '唤起导航搜索',
+  'nav.next': '激活下一个主导航',
+  'nav.prev': '激活上一个主导航',
+  'tabbar.prev': '切换到上一个标签页',
+  'tabbar.next': '切换到下一个标签页',
+  'tabbar.close': '关闭当前标签页',
+  'tabbar.n': '切换到第 n 个标签页',
+  'tabbar.last': '切换到最后一个标签页',
+} as const
+
+const isShow = ref(false)
+
+const helpGroups = computed(() => {
+  const groups = new Map<string, {
+    id: string
+    title: string
+    order: number
+    items: {
+      id: string
+      title: string
+      order: number
+      displayKeys: string[]
+    }[]
+  }>()
+
+  hotkeyBindings.forEach((binding) => {
+    const help = binding.help
+    if (!help) {
+      return
+    }
+    if (help.visible && !help.visible(hotkeyContext)) {
+      return
+    }
+
+    const meta = helpGroupMeta[help.group as keyof typeof helpGroupMeta]
+    const group = groups.get(help.group) ?? {
+      id: help.group,
+      title: help.groupTitleKey ? itemTitleMap[help.groupTitleKey] ?? help.groupTitleKey : meta?.title ?? help.group,
+      order: meta?.order ?? 100,
+      items: [],
+    }
+
+    group.items.push({
+      id: binding.id,
+      title: itemTitleMap[help.titleKey] ?? help.titleKey,
+      order: help.order ?? 0,
+      displayKeys: appSettingsStore.os === 'mac' && help.displayKeys.mac
+        ? help.displayKeys.mac
+        : help.displayKeys.default,
+    })
+    groups.set(help.group, group)
+  })
+
+  return Array.from(groups.values())
+    .map(group => ({
+      ...group,
+      items: [...group.items].sort((a, b) => a.order - b.order),
+    }))
+    .sort((a, b) => a.order - b.order)
+})
+
+onMounted(() => {
+  eventBus.on('global-hotkeys-intro-toggle', () => {
+    isShow.value = !isShow.value
+  })
+})
+
+onUnmounted(() => {
+  eventBus.off('global-hotkeys-intro-toggle')
+})
+</script>
+
+<template>
+  <FaModal v-model="isShow" title="快捷键" :footer="false">
+    <div class="px-4">
+      <div class="gap-4 grid sm-grid-cols-2">
+        <div v-for="group in helpGroups" :key="group.id">
+          <h2 class="text-lg font-bold m-0">
+            {{ group.title }}
+          </h2>
+          <ul class="text-sm ps-2 pt-2 list-none">
+            <li v-for="item in group.items" :key="item.id" class="py-1 flex-baseline gap-2">
+              <FaKbdGroup>
+                <FaKbd v-for="key in item.displayKeys" :key="key">
+                  {{ key }}
+                </FaKbd>
+              </FaKbdGroup>
+              {{ item.title }}
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </FaModal>
+</template>

apps/core-ant-design-vue/src/layouts/components/Logo/index.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import imgLogo from '@/assets/images/logo.svg'
+
+defineOptions({
+  name: 'Logo',
+})
+
+withDefaults(
+  defineProps<{
+    showLogo?: boolean
+    showTitle?: boolean
+  }>(),
+  {
+    showLogo: true,
+    showTitle: true,
+  },
+)
+
+const appSettingsStore = useAppSettingsStore()
+
+const title = ref(import.meta.env.VITE_APP_TITLE)
+const logo = ref(imgLogo)
+
+const to = computed(() => appSettingsStore.settings.app.home.enable ? appSettingsStore.settings.app.home.fullPath : '')
+</script>
+
+<template>
+  <RouterLink :to class="text-primary px-3 no-underline flex-center gap-2 h-[var(--g-sidebar-logo-height)] w-inherit" :class="{ 'cursor-default': !appSettingsStore.settings.app.home.enable }" :title="title">
+    <img v-if="showLogo" :src="logo" class="logo h-[30px] w-[30px] object-contain">
+    <span v-if="showTitle" class="font-bold block truncate">{{ title }}</span>
+  </RouterLink>
+</template>

apps/core-ant-design-vue/src/layouts/components/MainSidebar/index.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { useHotkeyBindings } from '@/hotkeys'
+import { useSlots } from '@/slots'
+import Logo from '../Logo/index.vue'
+
+defineOptions({
+  name: 'MainSidebar',
+})
+
+defineProps<{
+  enable: boolean
+}>()
+
+const appSettingsStore = useAppSettingsStore()
+const appMenuStore = useAppMenuStore()
+
+const { generateTitle, switchTo } = useAppMenu()
+
+useHotkeyBindings({
+  'menu.next': () => {
+    switchTo(appMenuStore.actived + 1 < appMenuStore.allMenus.length ? appMenuStore.actived + 1 : 0)
+  },
+  'menu.prev': () => {
+    switchTo(appMenuStore.actived - 1 >= 0 ? appMenuStore.actived - 1 : appMenuStore.allMenus.length - 1)
+  },
+})
+</script>
+
+<template>
+  <Transition name="main-sidebar">
+    <div v-if="enable" class="main-sidebar-container">
+      <Component :is="useSlots('main-sidebar-top')" />
+      <Logo :show-title="false" class="sidebar-logo" />
+      <Component :is="useSlots('main-sidebar-after-logo')" />
+      <FaScrollArea :scrollbar="false" mask gradient-color="var(--g-main-sidebar-bg)" class="menu overscroll-contain flex-1">
+        <!-- 侧边栏模式（含主导航） -->
+        <div
+          v-if="appSettingsStore.settings.menu.mode === 'side' || (appSettingsStore.mode === 'mobile' && appSettingsStore.settings.menu.mode !== 'single')" class="py-1 flex flex-col w-full transition-all of-hidden -mt-2"
+        >
+          <template v-for="(item, index) in appMenuStore.allMenus" :key="index">
+            <div
+              class="menu-item px-2 py-1 transition-all relative" :class="{
+                active: index === appMenuStore.actived,
+              }"
+            >
+              <FaTooltip v-if="item.children && item.children.length !== 0" :disabled="!generateTitle(item.meta?.title)" :text="generateTitle(item.meta?.title)" side="right">
+                <div
+                  class="group menu-item-container text-[var(--g-main-sidebar-menu-color)] py-4 rounded-lg flex gap-1 h-full w-full cursor-pointer transition-colors items-center justify-between relative hover-(text-[var(--g-main-sidebar-menu-hover-color)] bg-[var(--g-main-sidebar-menu-hover-bg)]) px-2!" :class="{
+                    'text-[var(--g-main-sidebar-menu-active-color)]! bg-[var(--g-main-sidebar-menu-active-bg)]!': index === appMenuStore.actived,
+                  }" @click="switchTo(index)"
+                >
+                  <div class="inline-flex flex-1 flex-col gap-1 w-full items-center justify-center">
+                    <FaIcon v-if="item.meta?.icon" :name="item.meta.icon" class="menu-item-container-icon transition-transform group-hover-scale-120" />
+                    <span class="text-sm text-center flex-1 w-full truncate transition-height transition-opacity transition-width empty:hidden">
+                      {{ generateTitle(item.meta?.title) }}
+                    </span>
+                  </div>
+                </div>
+              </FaTooltip>
+            </div>
+          </template>
+        </div>
+      </FaScrollArea>
+      <Component :is="useSlots('main-sidebar-after-menu')" />
+      <div class="px-4 py-3 flex-center">
+        <AppAccountButton only-avatar :button-variant="appSettingsStore.settings.menu.mode === 'side' ? 'secondary' : 'ghost'" class="p-2 size-12" />
+      </div>
+      <Component :is="useSlots('main-sidebar-bottom')" />
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.main-sidebar-container {
+  position: relative;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  width: var(--g-main-sidebar-width);
+  color: var(--g-main-sidebar-menu-color);
+  background-color: var(--g-main-sidebar-bg);
+  box-shadow: 1px 0 0 0 oklch(var(--border));
+  transition: color 0.15s, background-color 0.15s, box-shadow 0.15s;
+
+  .sidebar-logo {
+    background-color: var(--g-main-sidebar-bg);
+    transition: background-color 0.15s;
+  }
+
+  .menu {
+    :deep(.menu-item) {
+      .menu-item-container {
+        aspect-ratio: 1 / 1;
+        padding-block: 8px;
+        color: var(--g-main-sidebar-menu-color);
+
+        &:hover {
+          color: var(--g-main-sidebar-menu-hover-color);
+          background-color: var(--g-main-sidebar-menu-hover-bg);
+        }
+
+        .menu-item-container-icon {
+          font-size: 20px !important;
+        }
+      }
+
+      &.active .menu-item-container {
+        color: var(--g-main-sidebar-menu-active-color) !important;
+        background-color: var(--g-main-sidebar-menu-active-bg) !important;
+      }
+    }
+  }
+}
+
+/* 主侧边栏动画 */
+.main-sidebar-enter-active,
+.main-sidebar-leave-active {
+  transition: 0.3s;
+}
+
+.main-sidebar-enter-from,
+.main-sidebar-leave-to {
+  transform: translateX(calc(var(--g-main-sidebar-width) * -1));
+}
+</style>

apps/core-ant-design-vue/src/layouts/components/Menu/index.vue

@@ -0,0 +1,188 @@
+<script setup lang="ts">
+import type { MenuInjection, MenuProps } from './types'
+import { cn } from '@/utils'
+import Item from './item.vue'
+import SubMenu from './sub.vue'
+import { rootMenuInjectionKey } from './types'
+
+defineOptions({
+  name: 'MainMenu',
+})
+
+const props = withDefaults(
+  defineProps<MenuProps>(),
+  {
+    accordion: true,
+    defaultExpandPaths: () => [],
+    mode: 'vertical',
+    collapse: false,
+  },
+)
+
+// 用于缓存对象到 ID 的映射
+const idMap = new WeakMap<object, string>()
+let idCounter = 0
+// 获取对象的唯一 ID，如果已存在则返回缓存的 ID，否则生成新的
+function getUseId(obj: object): string {
+  if (!idMap.has(obj)) {
+    idMap.set(obj, `menu-item-${++idCounter}`)
+  }
+  return idMap.get(obj)!
+}
+
+const activeIndex = ref<MenuInjection['activeIndex']>(props.value)
+const items = ref<MenuInjection['items']>({})
+const subMenus = ref<MenuInjection['subMenus']>({})
+const expandMenus = ref<MenuInjection['expandMenus']>(props.defaultExpandPaths.slice(0))
+const mouseInMenu = ref<MenuInjection['mouseInMenu']>([])
+const isMenuPopup = computed<MenuInjection['isMenuPopup']>(() => {
+  return props.mode === 'horizontal' || (props.mode === 'vertical' && props.collapse)
+})
+
+// 解析传入的 menu 数据，并保存到 items 和 subMenus 对象中
+function initItems(menu: MenuProps['menu'], parentPaths: string[] = []) {
+  menu.forEach((item) => {
+    const index = item.path ?? getUseId(item)
+    if (item.children?.some(item => item.meta?.menu !== false)) {
+      const indexPath = [...parentPaths, index]
+      subMenus.value[index] = {
+        index,
+        indexPath,
+        active: false,
+      }
+      initItems(item.children, indexPath)
+    }
+    else {
+      items.value[index] = {
+        index,
+        indexPath: parentPaths,
+      }
+    }
+  })
+}
+
+const openMenu: MenuInjection['openMenu'] = (index, indexPath) => {
+  if (expandMenus.value.includes(index)) {
+    return
+  }
+  if (props.accordion) {
+    expandMenus.value = expandMenus.value.filter(key => indexPath.includes(key))
+  }
+  expandMenus.value.push(index)
+}
+const closeMenu: MenuInjection['closeMenu'] = (index) => {
+  if (Array.isArray(index)) {
+    nextTick(() => {
+      closeMenu(index.at(-1)!)
+      if (index.length > 1) {
+        closeMenu(index.slice(0, -1))
+      }
+    })
+    return
+  }
+  expandMenus.value = expandMenus.value.filter(item => item !== index)
+}
+
+function setSubMenusActive(index: string) {
+  for (const key in subMenus.value) {
+    subMenus.value[key].active = false
+  }
+  subMenus.value[index]?.indexPath.forEach((idx) => {
+    subMenus.value[idx].active = true
+  })
+  items.value[index]?.indexPath.forEach((idx) => {
+    subMenus.value[idx].active = true
+  })
+}
+
+const handleMenuItemClick: MenuInjection['handleMenuItemClick'] = (index) => {
+  if (props.mode === 'horizontal' || props.collapse) {
+    expandMenus.value = []
+  }
+  setSubMenusActive(index)
+}
+const handleSubMenuClick: MenuInjection['handleSubMenuClick'] = (index, indexPath) => {
+  if (expandMenus.value.includes(index)) {
+    closeMenu(index)
+  }
+  else {
+    openMenu(index, indexPath)
+  }
+}
+
+function initMenu() {
+  const activeItem = activeIndex.value && items.value[activeIndex.value]
+  setSubMenusActive(activeIndex.value)
+  if (!activeItem || isMenuPopup.value || props.collapse) {
+    return
+  }
+  // 展开该菜单项的路径上所有子菜单
+  activeItem.indexPath.forEach((index) => {
+    const subMenu = subMenus.value[index]
+    subMenu && openMenu(index, subMenu.indexPath)
+  })
+}
+
+watch(() => props.menu, (val) => {
+  initItems(val)
+  initMenu()
+}, {
+  deep: true,
+  immediate: true,
+})
+
+watch(() => props.value, (currentValue) => {
+  if (!items.value[currentValue]) {
+    activeIndex.value = ''
+  }
+  const item = items.value[currentValue] || (activeIndex.value && items.value[activeIndex.value]) || items.value[props.value]
+  if (item) {
+    activeIndex.value = item.index
+  }
+  else {
+    activeIndex.value = currentValue
+  }
+  initMenu()
+})
+
+watch(() => props.collapse, (value) => {
+  if (value) {
+    expandMenus.value = []
+  }
+  else {
+    expandMenus.value = props.defaultExpandPaths.slice(0)
+  }
+  initMenu()
+})
+
+provide(rootMenuInjectionKey, reactive({
+  props,
+  getUseId,
+  items,
+  subMenus,
+  activeIndex,
+  expandMenus,
+  mouseInMenu,
+  isMenuPopup,
+  openMenu,
+  closeMenu,
+  handleMenuItemClick,
+  handleSubMenuClick,
+}))
+</script>
+
+<template>
+  <div
+    :class="cn('h-full w-full flex flex-col of-hidden', {
+      'flex-row w-auto': isMenuPopup && props.mode === 'horizontal',
+      'py-1': props.mode === 'vertical',
+    })"
+  >
+    <template v-for="item in menu" :key="item.path ?? getUseId(item)">
+      <template v-if="item.meta?.menu !== false">
+        <SubMenu v-if="item.children?.length" :menu="item" :unique-key="[item.path ?? (item.children.every(item => item.meta?.menu === false) ? item.children[0].path! : getUseId(item))]" />
+        <Item v-else :item="item" :unique-key="[item.path ?? (item.children?.every(item => item.meta?.menu === false) ? item.children[0].path! : getUseId(item))]" @click="handleMenuItemClick(item.path ?? (item.children?.every(item => item.meta?.menu === false) ? item.children[0].path! : getUseId(item)))" />
+      </template>
+    </template>
+  </div>
+</template>

apps/core-ant-design-vue/src/layouts/components/Menu/item.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import type { SubMenuItemProps } from './types'
+import { cn } from '@/utils'
+import { rootMenuInjectionKey } from './types'
+
+defineOptions({
+  name: 'SubMenuItem',
+})
+
+const props = withDefaults(
+  defineProps<SubMenuItemProps>(),
+  {
+    level: 0,
+    subMenu: false,
+    expand: false,
+  },
+)
+
+const { generateTitle } = useAppMenu()
+
+const rootMenu = inject(rootMenuInjectionKey)!
+
+const itemRef = ref<HTMLElement>()
+
+const isActived = computed(() => {
+  return props.subMenu
+    ? rootMenu.subMenus[props.uniqueKey.at(-1)!].active
+    : rootMenu.activeIndex === props.uniqueKey.at(-1)!
+})
+
+const isItemActive = computed(() => {
+  return isActived.value && (!props.subMenu || rootMenu.isMenuPopup)
+})
+
+const icon = computed(() => {
+  return props.item.meta?.icon
+})
+
+defineExpose({
+  ref: itemRef,
+})
+</script>
+
+<template>
+  <div
+    ref="itemRef" :class="cn('menu-item relative', {
+      'active': isItemActive,
+      'py-1 px-2': (rootMenu.isMenuPopup && rootMenu.props.mode === 'vertical') || (rootMenu.isMenuPopup && level !== 0 && rootMenu.props.mode === 'horizontal') || !rootMenu.isMenuPopup,
+      'px-1 py-2': rootMenu.isMenuPopup && level === 0 && rootMenu.props.mode === 'horizontal',
+    })"
+  >
+    <router-link v-slot="{ href, navigate }" custom :to="uniqueKey.at(-1) ?? ''">
+      <FaTooltip :disabled="!generateTitle(item.meta?.title) || !rootMenu.isMenuPopup || level !== 0 || subMenu" :text="generateTitle(item.meta?.title)" :side="rootMenu.props.mode === 'vertical' ? 'right' : 'bottom'" class="h-full w-full">
+        <Component
+          :is="subMenu ? 'div' : 'a'" v-bind="{
+            ...(!subMenu && {
+              href: item.meta?.link ? item.meta.link : href,
+              target: item.meta?.link ? '_blank' : '_self',
+              class: 'no-underline',
+            }),
+          }" :class="cn('group menu-item-container relative h-full w-full min-w-0 flex items-center justify-between gap-1 rounded-lg', {
+            'px-4 py-3': true,
+            'cursor-pointer text-[var(--g-sub-sidebar-menu-color)] transition-colors hover-(bg-[var(--g-sub-sidebar-menu-hover-bg)] text-[var(--g-sub-sidebar-menu-hover-color)])': true,
+            'text-[var(--g-sub-sidebar-menu-active-color)]! bg-[var(--g-sub-sidebar-menu-active-bg)]!': isItemActive,
+            'px-3': rootMenu.isMenuPopup && level === 0,
+            'py-3': rootMenu.isMenuPopup && level !== 0,
+          })" :title="generateTitle(item.meta?.title)" v-on="{
+            ...(!subMenu && {
+              click: navigate,
+            }),
+          }"
+        >
+          <div
+            :class="cn('inline-flex min-w-0 flex-1 items-center justify-start', {
+              'gap-[12px]': true,
+              'ps-[calc(var(--indent-level)*20px)]': true,
+              'flex-col': rootMenu.isMenuPopup && level === 0 && rootMenu.props.mode === 'vertical',
+            })" :style="{
+              '--indent-level': !rootMenu.isMenuPopup ? props.level ?? 0 : 0,
+            }"
+          >
+            <FaIcon
+              v-if="icon" :name="icon" :class="cn('menu-item-container-icon', {
+                'size-5': true,
+                'transition-transform group-hover-scale-120': true,
+              })"
+            />
+            <span
+              v-if="!(rootMenu.isMenuPopup && level === 0)" :class="cn('block min-w-0 flex-1 truncate text-sm transition-height transition-opacity transition-width', {
+                'empty:hidden': !generateTitle(item.meta?.title),
+              })"
+            >
+              {{ generateTitle(item.meta?.title) }}
+            </span>
+          </div>
+          <i
+            v-if="
+              subMenu
+                && (!rootMenu.isMenuPopup || level !== 0) // 非收起模式，非一级的子菜单
+            " :class="cn('relative ms-1 w-[10px] after:absolute before:absolute after:h-[1.5px] after:w-[6px] before:h-[1.5px] before:w-[6px] after:bg-current before:bg-current after:transition-transform-200 before:transition-transform-200 after:content-empty before:content-empty after:-translate-y-[1px] before:-translate-y-[1px]', {
+              [expand ? 'before:-rotate-45 before:-translate-x-[2px] after:rotate-45 after:translate-x-[2px]' : 'before:rotate-45 before:-translate-x-[2px] after:-rotate-45 after:translate-x-[2px]']: true,
+              'opacity-0': rootMenu.isMenuPopup && level === 0,
+              '-rotate-90 -top-[1.5px]': rootMenu.isMenuPopup && level !== 0,
+            })"
+          />
+        </component>
+      </FaTooltip>
+    </router-link>
+  </div>
+</template>

apps/core-ant-design-vue/src/layouts/components/Menu/sub.vue

@@ -0,0 +1,230 @@
+<script setup lang="ts">
+import type { SubMenuProps } from './types'
+import { useTimeoutFn } from '@vueuse/core'
+import { cn } from '@/utils'
+import Item from './item.vue'
+import { rootMenuInjectionKey } from './types'
+
+defineOptions({
+  name: 'SubMenu',
+})
+
+const props = withDefaults(
+  defineProps<SubMenuProps>(),
+  {
+    level: 0,
+  },
+)
+
+const itemRef = useTemplateRef('itemRef')
+const subMenuRef = useTemplateRef('subMenuRef')
+const rootMenu = inject(rootMenuInjectionKey)!
+
+const index = props.menu.path ?? rootMenu.getUseId(props.menu)
+
+const expand = computed(() => rootMenu.expandMenus.includes(props.uniqueKey.at(-1)!))
+
+const transitionEvent = computed(() => {
+  if (rootMenu.isMenuPopup) {
+    return {
+      enter(el: HTMLElement) {
+        if (el.offsetHeight > window.innerHeight) {
+          el.style.height = `${window.innerHeight}px`
+        }
+      },
+      afterEnter: () => {},
+      beforeLeave: (el: HTMLElement) => {
+        el.style.maxHeight = `${el.offsetHeight}px`
+        el.style.overflow = 'hidden'
+      },
+      leave: (el: HTMLElement) => {
+        el.style.maxHeight = '0'
+      },
+      afterLeave(el: HTMLElement) {
+        el.style.maxHeight = ''
+        el.style.overflow = ''
+      },
+    }
+  }
+  if (CSS.supports('height', 'calc-size(auto, size)')) {
+    return {}
+  }
+  return {
+    enter(el: HTMLElement) {
+      el.dataset.height = el.offsetHeight.toString()
+      el.style.maxHeight = '0'
+      el.style.overflow = 'hidden'
+      void el.offsetHeight // 强制重排，确保浏览器应用初始状态
+      requestAnimationFrame(() => {
+        el.style.maxHeight = `${el.dataset.height}px`
+      })
+    },
+    afterEnter(el: HTMLElement) {
+      el.style.maxHeight = ''
+      el.style.overflow = ''
+    },
+    enterCancelled(el: HTMLElement) {
+      el.style.maxHeight = ''
+      el.style.overflow = ''
+    },
+    beforeLeave(el: HTMLElement) {
+      el.style.maxHeight = `${el.offsetHeight}px`
+      el.style.overflow = 'hidden'
+      void el.offsetHeight // 强制重排，确保浏览器应用初始状态
+    },
+    leave(el: HTMLElement) {
+      requestAnimationFrame(() => {
+        el.style.maxHeight = '0'
+      })
+    },
+    afterLeave(el: HTMLElement) {
+      el.style.maxHeight = ''
+      el.style.overflow = ''
+    },
+    leaveCancelled(el: HTMLElement) {
+      el.style.maxHeight = ''
+      el.style.overflow = ''
+    },
+  }
+})
+
+const transitionClass = computed(() => {
+  if (rootMenu.isMenuPopup) {
+    return {
+      enterActiveClass: 'ease-in-out duration-300',
+      enterFromClass: 'opacity-0 translate-x-4',
+      enterToClass: 'opacity-100',
+      leaveActiveClass: 'ease-in-out duration-300',
+      leaveFromClass: 'opacity-100',
+      leaveToClass: 'opacity-0',
+    }
+  }
+  return {
+    enterActiveClass: 'ease-in-out duration-200',
+    enterFromClass: cn('opacity-0 translate-y-2', CSS.supports('height', 'calc-size(auto, size)') && 'h-0'),
+    enterToClass: 'opacity-100 translate-y-0',
+    leaveActiveClass: 'ease-in-out duration-200',
+    leaveFromClass: 'opacity-100 translate-y-0',
+    leaveToClass: cn('opacity-0 translate-y-2', CSS.supports('height', 'calc-size(auto, size)') && 'h-0'),
+  }
+})
+
+const hasChildren = computed(() => props.menu.children?.some((item: any) => item.meta?.menu !== false) ?? false)
+
+function handleClick() {
+  if (
+    (rootMenu.isMenuPopup && hasChildren.value)
+    || props.menu.meta?.link
+  ) {
+    return
+  }
+  if (hasChildren.value) {
+    rootMenu.handleSubMenuClick(index, props.uniqueKey)
+  }
+  else {
+    rootMenu.handleMenuItemClick(index)
+  }
+}
+
+let timeout: (() => void) | undefined
+
+function handleMouseenter() {
+  if (!rootMenu.isMenuPopup) {
+    return
+  }
+  rootMenu.mouseInMenu = props.uniqueKey
+  timeout?.()
+  ;({ stop: timeout } = useTimeoutFn(() => {
+    if (hasChildren.value) {
+      rootMenu.openMenu(index, props.uniqueKey)
+      nextTick(() => {
+        requestAnimationFrame(() => {
+          const el = itemRef.value?.ref
+          const subMenuEl = subMenuRef.value?.$el
+          if (!el || !subMenuEl) {
+            return
+          }
+          const rect = el.getBoundingClientRect()
+          const { top, left, width, height } = rect
+          let menuTop = 0
+          let menuLeft = 0
+          if (rootMenu.props.mode === 'vertical' || props.level !== 0) {
+            menuTop = top + el.scrollTop - 5 // 4px padding + 1px border
+            menuLeft = left + width + 4
+            // 处理边界情况
+            if (menuTop + subMenuEl.offsetHeight > window.innerHeight) {
+              menuTop = Math.max(0, window.innerHeight - subMenuEl.offsetHeight)
+            }
+          }
+          else {
+            menuTop = top + height + 3
+            menuLeft = left
+            menuLeft -= 5 // 4px padding + 1px border
+            // 处理边界情况
+            if (menuTop + subMenuEl.offsetHeight > window.innerHeight) {
+              subMenuEl.style.height = `${window.innerHeight - menuTop}px`
+            }
+          }
+          // 处理边界情况
+          if (menuLeft + subMenuEl.offsetWidth > document.documentElement.clientWidth) {
+            menuLeft = left - width
+          }
+          // 设置样式
+          Object.assign(subMenuEl.style, {
+            top: `${menuTop}px`,
+            insetInlineStart: `${menuLeft}px`,
+            willChange: 'transform',
+            transform: 'translateZ(0)',
+          })
+        })
+      })
+    }
+    else {
+      const path = props.menu.children ? rootMenu.subMenus[index].indexPath.at(-1)! : rootMenu.items[index].indexPath.at(-1)!
+      rootMenu.openMenu(path, rootMenu.subMenus[path].indexPath)
+    }
+  }, 300))
+}
+
+function handleMouseleave() {
+  if (!rootMenu.isMenuPopup) {
+    return
+  }
+  rootMenu.mouseInMenu = []
+  timeout?.()
+  ;({ stop: timeout } = useTimeoutFn(() => {
+    requestAnimationFrame(() => {
+      if (rootMenu.mouseInMenu.length === 0) {
+        rootMenu.closeMenu(props.uniqueKey)
+      }
+      else {
+        if (hasChildren.value) {
+          !rootMenu.mouseInMenu.includes(props.uniqueKey.at(-1)!) && rootMenu.closeMenu(props.uniqueKey.at(-1)!)
+        }
+      }
+    })
+  }, 300))
+}
+</script>
+
+<template>
+  <Item ref="itemRef" :unique-key="uniqueKey" :item="menu" :level="level" :sub-menu="hasChildren" :expand @click="handleClick" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave" />
+  <template v-if="hasChildren">
+    <Teleport to="body" :disabled="!rootMenu.isMenuPopup">
+      <Transition v-bind="transitionClass" v-on="transitionEvent">
+        <FaScrollArea
+          v-if="expand" ref="subMenuRef" :scrollbar="false" :mask="rootMenu.isMenuPopup"
+          :class="cn('sub-menu static h-[calc-size(auto,size)] rounded-lg', {
+            'bg-[var(--g-sub-sidebar-bg)]': rootMenu.isMenuPopup,
+            'border shadow-xl fixed z-3000 w-[200px]': rootMenu.isMenuPopup,
+            'py-1 overscroll-contain': rootMenu.isMenuPopup,
+          })"
+        >
+          <template v-for="item in menu.children" :key="item.path ?? rootMenu.getUseId(item)">
+            <SubMenu v-if="item.meta?.menu !== false" :unique-key="[...uniqueKey, item.path ?? rootMenu.getUseId(item)]" :menu="item" :level="level + 1" />
+          </template>
+        </FaScrollArea>
+      </Transition>
+    </Teleport>
+  </template>
+</template>

apps/core-ant-design-vue/src/layouts/components/Menu/types.ts

@@ -0,0 +1,47 @@
+import type { MenuRecordRaw } from '@fantastic-admin/types'
+
+export interface MenuItem {
+  index: string
+  indexPath: string[]
+  active?: boolean
+}
+
+export interface MenuProps {
+  menu: MenuRecordRaw[]
+  value: string
+  accordion?: boolean
+  defaultExpandPaths?: string[]
+  mode?: 'horizontal' | 'vertical'
+  collapse?: boolean
+}
+
+export interface MenuInjection {
+  props: MenuProps
+  getUseId: (obj: object) => string
+  items: Record<string, MenuItem>
+  subMenus: Record<string, MenuItem>
+  activeIndex: MenuProps['value']
+  expandMenus: string[]
+  mouseInMenu: string[]
+  isMenuPopup: boolean
+  openMenu: (index: string, indexPath: string[]) => void
+  closeMenu: (index: string | string[]) => void
+  handleMenuItemClick: (index: string) => void
+  handleSubMenuClick: (index: string, indexPath: string[]) => void
+}
+
+export const rootMenuInjectionKey = Symbol('rootMenu') as InjectionKey<MenuInjection>
+
+export interface SubMenuProps {
+  uniqueKey: string[]
+  menu: MenuRecordRaw
+  level?: number
+}
+
+export interface SubMenuItemProps {
+  uniqueKey: string[]
+  item: MenuRecordRaw
+  level?: number
+  subMenu?: boolean
+  expand?: boolean
+}

apps/core-ant-design-vue/src/layouts/components/SubSidebar/index.vue

@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import { useSlots } from '@/slots'
+import Logo from '../Logo/index.vue'
+import Menu from '../Menu/index.vue'
+
+defineOptions({
+  name: 'SubSidebar',
+})
+
+defineProps<{
+  enable: boolean
+}>()
+
+const route = useRoute()
+
+const appSettingsStore = useAppSettingsStore()
+const appMenuStore = useAppMenuStore()
+
+const isCollapse = computed(() => appSettingsStore.settings.menu.subMenuCollapse)
+
+const transitionName = ref('')
+watch(() => appMenuStore.actived, (val, oldVal) => {
+  if (appSettingsStore.mode === 'mobile' || appSettingsStore.settings.menu.mode === 'side') {
+    if (val > oldVal) {
+      transitionName.value = 'sub-sidebar-y-start'
+    }
+    else {
+      transitionName.value = 'sub-sidebar-y-end'
+    }
+  }
+  else if (appSettingsStore.settings.menu.mode === 'head') {
+    if (val > oldVal) {
+      transitionName.value = 'sub-sidebar-x-start'
+    }
+    else {
+      transitionName.value = 'sub-sidebar-x-end'
+    }
+  }
+})
+</script>
+
+<template>
+  <Transition name="sub-sidebar">
+    <div
+      v-if="enable" class="sub-sidebar-container" :class="{
+        'is-collapse': isCollapse,
+      }"
+    >
+      <Component :is="useSlots('sub-sidebar-top')" />
+      <Logo
+        v-if="['side', 'single'].includes(appSettingsStore.settings.menu.mode) || appSettingsStore.mode === 'mobile'" :show-logo="appSettingsStore.settings.menu.mode === 'single'" class="sidebar-logo" :class="{
+          single: appSettingsStore.settings.menu.mode === 'single',
+        }"
+      />
+      <Component :is="useSlots('sub-sidebar-after-logo')" />
+      <FaScrollArea :scrollbar="false" mask class="overscroll-contain flex-1">
+        <TransitionGroup :name="transitionName">
+          <template v-for="(mainItem, mainIndex) in appMenuStore.allMenus" :key="mainIndex">
+            <div v-show="mainIndex === appMenuStore.actived">
+              <Menu
+                :menu="mainItem.children" :value="route.meta.activeMenu || route.path" :default-expand-paths="appMenuStore.defaultExpandPaths" :accordion="appSettingsStore.settings.menu.subMenuUniqueExpand" :collapse="isCollapse" class="menu" :class="{
+                  '-mt-2': !(isCollapse || ['head', 'single'].includes(appSettingsStore.settings.menu.mode)),
+                }"
+              />
+            </div>
+          </template>
+        </TransitionGroup>
+      </FaScrollArea>
+      <div
+        v-if="appSettingsStore.mode === 'pc' && appSettingsStore.settings.menu.subMenuCollapseButton" class="px-4 py-3 flex items-center relative" :class="{
+          'justify-center': isCollapse,
+          'justify-end': !isCollapse,
+        }"
+      >
+        <FaButton variant="secondary" size="icon-sm" @click="appSettingsStore.toggleSidebarCollapse()">
+          <FaIcon name="app-toolbar-collapse" class="size-4 transition" :class="{ 'rotate-z--180': appSettingsStore.settings.menu.subMenuCollapse }" />
+        </FaButton>
+      </div>
+      <Component :is="useSlots('sub-sidebar-after-menu')" />
+      <div v-if="appSettingsStore.settings.menu.mode === 'single'" class="px-4 pb-3 flex-center">
+        <AppAccountButton :only-avatar="isCollapse" dropdown-align="center" :dropdown-side="isCollapse ? 'right' : 'top'" button-variant="secondary" :class="{ 'w-full': !isCollapse }" />
+      </div>
+      <Component :is="useSlots('sub-sidebar-bottom')" />
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.sub-sidebar-container {
+  position: absolute;
+  inset-inline-start: 0;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  width: var(--g-sub-sidebar-width);
+  background-color: var(--g-sub-sidebar-bg);
+  box-shadow: 1px 0 0 0 oklch(var(--border));
+  transition: inset-inline-start 0.3s, width 0.3s, background-color 0.15s, box-shadow 0.15s;
+
+  &.is-collapse {
+    width: var(--g-sub-sidebar-collapse-width);
+
+    .sidebar-logo {
+      &:not(.single) {
+        display: none;
+      }
+
+      :deep(span) {
+        display: none;
+      }
+    }
+  }
+
+  .menu {
+    width: 100%;
+  }
+}
+
+/* 次侧边栏动画 */
+.sub-sidebar-x-start-enter-active,
+.sub-sidebar-x-end-enter-active,
+.sub-sidebar-y-start-enter-active,
+.sub-sidebar-y-end-enter-active {
+  transition: 0.2s;
+}
+
+.sub-sidebar-x-start-enter-from,
+.sub-sidebar-x-start-leave-active {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+.sub-sidebar-x-end-enter-from,
+.sub-sidebar-x-end-leave-active {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.sub-sidebar-y-start-enter-from,
+.sub-sidebar-y-start-leave-active {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+.sub-sidebar-y-end-enter-from,
+.sub-sidebar-y-end-leave-active {
+  opacity: 0;
+  transform: translateY(-30px);
+}
+
+.sub-sidebar-x-start-leave-active,
+.sub-sidebar-x-end-leave-active,
+.sub-sidebar-y-start-leave-active,
+.sub-sidebar-y-end-leave-active {
+  position: absolute;
+}
+
+/* 次侧边栏动画 */
+.sub-sidebar-enter-active,
+.sub-sidebar-leave-active {
+  transition: 0.3s;
+}
+
+.sub-sidebar-enter-from,
+.sub-sidebar-leave-to {
+  transform: translateX(calc(var(--g-sub-sidebar-width) * -1));
+}
+</style>

apps/core-ant-design-vue/src/layouts/components/Topbar/Tabbar/index.vue

@@ -0,0 +1,437 @@
+<script setup lang="ts">
+import type { TabbarRecordRaw } from '@fantastic-admin/types'
+import { useMagicKeys } from '@vueuse/core'
+import { useHotkeyBindings } from '@/hotkeys'
+import { useSlots } from '@/slots'
+
+defineOptions({
+  name: 'Tabbar',
+})
+
+const route = useRoute()
+const router = useRouter()
+
+const appSettingsStore = useAppSettingsStore()
+const appTabbarStore = useAppTabbarStore()
+
+const tabbar = useAppTabbar()
+const mainPage = useAppPage()
+
+const keys = useMagicKeys({ reactive: true })
+
+const { generateTitle } = useAppMenu()
+
+const activedTabId = computed(() => tabbar.getId())
+
+const tabsRef = useTemplateRef('tabsRef')
+const tabContainerRef = useTemplateRef('tabContainerRef')
+const tabRef = useTemplateRef<HTMLElement[]>('tabRef')
+
+const isAnimating = ref(false)
+const isInit = ref(true)
+
+function onBeforeLeave(el: Element) {
+  isAnimating.value = true
+  const htmlEl = el as HTMLElement
+  htmlEl.style.left = `${htmlEl.offsetLeft}px`
+  htmlEl.style.top = `${htmlEl.offsetTop}px`
+  htmlEl.style.width = `${htmlEl.offsetWidth}px`
+}
+onMounted(() => {
+  nextTick(() => {
+    isInit.value = false
+  })
+})
+
+watch(() => route, (val) => {
+  if (appSettingsStore.settings.topbar.tabbar) {
+    appTabbarStore.add(val)
+    nextTick(() => {
+      const index = appTabbarStore.list.findIndex(item => item.tabId === activedTabId.value)
+      if (index !== -1) {
+        const tabEl = tabRef.value?.find(item => Number.parseInt(item.dataset.index!) === index)
+        const containerEl = tabsRef.value?.ref?.$el
+        if (tabEl && containerEl) {
+          const tabLeft = tabEl.offsetLeft
+          const tabWidth = tabEl.offsetWidth
+          const containerWidth = containerEl.clientWidth
+          // 计算滚动位置，使标签页居中
+          const scrollLeft = tabLeft - (containerWidth - tabWidth) / 2
+          // 首次加载时直接定位到指定位置
+          tabsRef.value?.scrollTo(scrollLeft, !isInit.value ? 'smooth' : undefined)
+        }
+        tabbarScrollTip()
+      }
+    })
+  }
+}, {
+  immediate: true,
+  deep: true,
+})
+
+function tabbarScrollTip() {
+  if (tabContainerRef.value?.$el.clientWidth > (tabsRef.value?.ref?.$el.clientWidth ?? 0) && !localStorage.has('tabbarScrollTip')) {
+    localStorage.setItem('tabbarScrollTip', '')
+    const tips = useFaToast().info('温馨提示', {
+      description: '标签栏数量超过展示区域范围，可以将鼠标移到标签栏上，通过鼠标滚轮滑动浏览',
+      position: 'top-center',
+      duration: Infinity,
+      action: {
+        label: '知道了',
+        onClick: () => useFaToast().dismiss(tips),
+      },
+    })
+  }
+}
+function contextMenuItems(routeItem: TabbarRecordRaw) {
+  return [
+    [
+      {
+        label: '重新加载',
+        icon: 'i-ri:refresh-line',
+        disabled: routeItem.tabId !== activedTabId.value,
+        handle: () => mainPage.reload(),
+      },
+      {
+        label: '关闭标签页',
+        icon: 'i-ri:close-line',
+        disabled: !tabbar.checkClose(routeItem.tabId),
+        handle: () => tabbar.closeById(routeItem.tabId),
+      },
+    ],
+    [
+      {
+        label: '关闭其它标签页',
+        icon: 'i-mdi:close',
+        disabled: !tabbar.checkCloseOtherSide(routeItem.tabId),
+        handle: () => {
+          tabbar.closeOtherSide(routeItem.tabId)
+        },
+      },
+      {
+        label: '关闭左侧标签页',
+        icon: 'i-mdi:arrow-expand-left',
+        disabled: !tabbar.checkCloseLeftSide(routeItem.tabId),
+        handle: () => {
+          tabbar.closeLeftSide(routeItem.tabId)
+        },
+      },
+      {
+        label: '关闭右侧标签页',
+        icon: 'i-mdi:arrow-expand-right',
+        disabled: !tabbar.checkCloseRightSide(routeItem.tabId),
+        handle: () => {
+          tabbar.closeRightSide(routeItem.tabId)
+        },
+      },
+    ],
+  ]
+}
+
+function iconName(icon: TabbarRecordRaw['icon']) {
+  return icon
+}
+
+const visibleTabIndex = ref<number[]>([])
+function getVisibleTabs() {
+  const containerWidth = tabsRef.value?.ref?.$el.clientWidth ?? 0
+  const scrollLeft = tabsRef.value?.ref?.el?.viewportElement?.scrollLeft ?? 0
+  visibleTabIndex.value = []
+  if (tabRef.value) {
+    for (let i = 0; i < tabRef.value.length; i++) {
+      const tab = tabRef.value[i]
+      const tabLeft = tab.offsetLeft
+      const tabRight = tabLeft + tab.offsetWidth
+      // 检查标签页是否在可视区域内
+      if (tabLeft < scrollLeft + containerWidth && tabRight > scrollLeft) {
+        if (i >= 0 && i < appTabbarStore.list.length) {
+          visibleTabIndex.value.push(i)
+        }
+      }
+    }
+  }
+}
+function getVisibleTabIndex(arrayIndex: number) {
+  return visibleTabIndex.value.findIndex(visibleTab => visibleTab === arrayIndex) ?? -1
+}
+
+useHotkeyBindings({
+  'tabbar.prev': () => {
+    if (appTabbarStore.list[0]?.tabId !== activedTabId.value) {
+      const index = appTabbarStore.list.findIndex(item => item.tabId === activedTabId.value)
+      index > 0 && router.push(appTabbarStore.list[index - 1].fullPath)
+    }
+  },
+  'tabbar.next': () => {
+    if (appTabbarStore.list.at(-1)?.tabId !== activedTabId.value) {
+      const index = appTabbarStore.list.findIndex(item => item.tabId === activedTabId.value)
+      index >= 0 && router.push(appTabbarStore.list[index + 1].fullPath)
+    }
+  },
+  'tabbar.closeCurrent': () => {
+    tabbar.closeById(activedTabId.value)
+  },
+  'tabbar.gotoVisibleIndex': ({ hotkey }) => {
+    const number = Number(hotkey.split('+')[1])
+    if (visibleTabIndex.value[number - 1] !== undefined) {
+      router.push(appTabbarStore.list[visibleTabIndex.value[number - 1]].fullPath)
+    }
+  },
+  'tabbar.gotoLast': () => {
+    const last = appTabbarStore.list.at(-1)
+    last && router.push(last.fullPath)
+  },
+})
+
+watch(() => keys.alt, (val) => {
+  if (val) {
+    getVisibleTabs()
+  }
+})
+</script>
+
+<template>
+  <div class="tabbar">
+    <Component :is="useSlots('tabbar-start')" />
+    <div class="tabbar-container">
+      <FaScrollArea
+        ref="tabsRef" :scrollbar="false" mask horizontal class="tabs overscroll-contain"
+      >
+        <TransitionGroup ref="tabContainerRef" :name="!isInit ? 'tabbar' : undefined" tag="div" class="tab-container" @before-leave="onBeforeLeave" @after-leave="isAnimating = false">
+          <div
+            v-for="(element, index) in appTabbarStore.list" :key="element.tabId"
+            ref="tabRef" :data-index="index" class="tab" :class="{
+              actived: element.tabId === activedTabId,
+            }" @click="!isAnimating && element.tabId !== activedTabId && router.push(element.fullPath)"
+          >
+            <FaContextMenu :items="contextMenuItems(element)">
+              <div class="size-full">
+                <div class="tab-dividers" />
+                <div class="tab-background" />
+                <FaTooltip :delay="1000" side="bottom">
+                  <div class="tab-content">
+                    <div :key="element.tabId" class="title">
+                      <FaIcon v-if="appSettingsStore.settings.tabbar.icon && iconName(element.icon)" :name="iconName(element.icon)!" class="icon" />
+                      {{ generateTitle(element.title) }}
+                    </div>
+                    <div v-if="appTabbarStore.list.length > 1" class="action-icon" @click.stop="tabbar.closeById(element.tabId)">
+                      <FaIcon name="i-ri:close-fill" />
+                    </div>
+                    <div v-show="appSettingsStore.settings.tabbar.hotkeys && keys.alt && getVisibleTabIndex(index) >= 0 && getVisibleTabIndex(index) < 9" class="hotkey-number">
+                      {{ getVisibleTabIndex(index) + 1 }}
+                    </div>
+                  </div>
+                  <template #content>
+                    <div class="text-sm">
+                      {{ generateTitle(element.title) }}
+                    </div>
+                    <div class="text-accent/50">
+                      {{ element.fullPath }}
+                    </div>
+                  </template>
+                </FaTooltip>
+              </div>
+            </FaContextMenu>
+          </div>
+        </TransitionGroup>
+      </FaScrollArea>
+    </div>
+    <Component :is="useSlots('tabbar-end')" />
+  </div>
+</template>
+
+<style scoped>
+.tabbar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: var(--g-tabbar-height);
+  background-color: var(--g-tabbar-bg);
+  box-shadow: 0 1px 0 0 oklch(var(--border)), 0 -1px 0 0 oklch(var(--border));
+
+  .tabbar-container {
+    display: flex;
+    flex: 1;
+    min-width: 0;
+    height: 100%;
+
+    .tabs {
+      flex: 1;
+      align-items: end;
+      white-space: nowrap;
+
+      .tab-container {
+        position: relative;
+
+        .tab {
+          &:not(.actived):hover {
+            z-index: 3;
+
+            &::before,
+            &::after {
+              content: none;
+            }
+
+            & + .tab .tab-dividers::before {
+              opacity: 0;
+            }
+
+            .tab-content {
+              .title,
+              .action-icon {
+                color: var(--g-tabbar-tab-hover-color);
+              }
+            }
+
+            .tab-background {
+              background-color: var(--g-tabbar-tab-hover-bg);
+            }
+          }
+        }
+
+        .tab {
+          position: relative;
+          display: inline-block;
+          min-width: 150px;
+          max-width: 150px;
+          height: var(--g-tabbar-height);
+          font-size: 14px;
+          line-height: calc(var(--g-tabbar-height) - 2px);
+          vertical-align: bottom;
+          pointer-events: none;
+          cursor: pointer;
+
+          * {
+            user-select: none;
+          }
+
+          & + .tab:hover,
+          & + .tab.actived {
+            .tab-dividers::before {
+              opacity: 0;
+            }
+          }
+
+          &.actived {
+            z-index: 5;
+
+            &::before,
+            &::after {
+              content: none;
+            }
+
+            & + .tab .tab-dividers::before {
+              opacity: 0;
+            }
+
+            .tab-content {
+              .title,
+              .action-icon {
+                color: var(--g-tabbar-tab-active-color);
+              }
+            }
+
+            .tab-background {
+              background-color: var(--g-tabbar-tab-active-bg);
+            }
+          }
+
+          .tab-dividers {
+            position: absolute;
+            inset-inline: -1px;
+            top: 50%;
+            z-index: 0;
+            height: 14px;
+            transform: translateY(-50%);
+
+            &::before {
+              position: absolute;
+              inset-inline-start: 1px;
+              top: 0;
+              bottom: 0;
+              display: block;
+              width: 1px;
+              content: "";
+              background-color: oklch(var(--border));
+              opacity: 1;
+              transition: opacity 0.3s, background-color 0.15s;
+            }
+          }
+
+          &:first-child .tab-dividers::before {
+            opacity: 0;
+          }
+
+          .tab-background {
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            transition: background-color 0.15s;
+          }
+
+          .tab-content {
+            display: flex;
+            width: 100%;
+            height: 100%;
+            pointer-events: all;
+
+            .title {
+              display: flex;
+              flex: 1;
+              gap: 5px;
+              align-items: center;
+              height: 100%;
+              padding: 0 10px;
+              margin-inline-end: 10px;
+              overflow: hidden;
+              color: var(--g-tabbar-tab-color);
+              white-space: nowrap;
+              mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
+              transition: margin-inline-end 0.3s;
+
+              &:has(+ .action-icon) {
+                margin-inline-end: 28px;
+              }
+
+              .icon {
+                flex-shrink: 0;
+              }
+            }
+
+            .action-icon {
+              --uno: transition absolute inset-e-2 top-1/2 -translate-y-1/2 rounded-full z-10 w-5 h-5 flex-center text-xs "text-[var(--g-tabbar-tab-color)]" hover:(border bg-secondary);
+            }
+
+            .hotkey-number {
+              --uno: border bg-secondary absolute inset-e-2 top-1/2 -translate-y-1/2 rounded-full z-10 w-5 h-5 flex-center text-xs "text-[var(--g-tabbar-tab-color)]";
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+/* 标签栏动画 */
+.tabs {
+  .tabbar-move,
+  .tabbar-enter-active,
+  .tabbar-leave-active {
+    transition: all 0.3s;
+  }
+
+  .tabbar-enter-from,
+  .tabbar-leave-to {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+
+  .tabbar-leave-active {
+    position: absolute !important;
+  }
+}
+</style>

apps/core-ant-design-vue/src/layouts/components/Topbar/Toolbar/Breadcrumb/index.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { compile } from 'path-to-regexp'
+import Breadcrumb from '../../../Breadcrumb/index.vue'
+import BreadcrumbItem from '../../../Breadcrumb/item.vue'
+
+defineOptions({
+  name: 'ToolbarBreadcrumb',
+})
+
+const route = useRoute()
+
+const appSettingsStore = useAppSettingsStore()
+
+const { generateTitle } = useAppMenu()
+
+interface BreadcrumbRecord {
+  path: string
+  title?: string | (() => string)
+}
+
+let breadcrumbListBackup: BreadcrumbRecord[] = []
+const breadcrumbList = computed<BreadcrumbRecord[]>(() => {
+  if (route.name === 'reload') {
+    return breadcrumbListBackup
+  }
+  const list: BreadcrumbRecord[] = []
+  if (appSettingsStore.settings.app.home.enable) {
+    list.push({
+      path: appSettingsStore.settings.app.home.fullPath,
+      title: appSettingsStore.settings.app.home.title,
+    })
+  }
+  route.matched.forEach((item) => {
+    if (item.meta?.breadcrumb !== false) {
+      list.push({
+        path: item.path,
+        title: item.meta?.title,
+      })
+    }
+  })
+  breadcrumbListBackup = list.filter(item => generateTitle(item.title))
+  return breadcrumbListBackup
+})
+
+function pathCompile(path: string) {
+  const toPath = compile(path)
+  return toPath(route.params)
+}
+</script>
+
+<template>
+  <Breadcrumb v-if="appSettingsStore.mode === 'pc'" class="breadcrumb px-2 whitespace-nowrap">
+    <TransitionGroup name="breadcrumb">
+      <BreadcrumbItem v-for="(item, index) in breadcrumbList" :key="`${index}_${item.path}_${item.title}`" :to="index < breadcrumbList.length - 1 && item.path !== '' ? pathCompile(item.path) : ''">
+        {{ generateTitle(item.title) }}
+      </BreadcrumbItem>
+    </TransitionGroup>
+  </Breadcrumb>
+</template>
+
+<style scoped>
+/* 面包屑动画 */
+.breadcrumb-enter-active {
+  transition: transform 0.3s, opacity 0.3s;
+}
+
+.breadcrumb-enter-from {
+  opacity: 0;
+  transform: translateX(30px) skewX(-50deg);
+}
+</style>

apps/core-ant-design-vue/src/layouts/components/Topbar/Toolbar/ColorScheme/index.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'ToolbarColorScheme',
+})
+
+const appSettingsStore = useAppSettingsStore()
+
+function toggleColorScheme(event: MouseEvent) {
+  if (!document.startViewTransition || window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+    appSettingsStore.currentColorScheme && appSettingsStore.setColorScheme(appSettingsStore.currentColorScheme === 'dark' ? 'light' : 'dark')
+    return
+  }
+  const target = event.target as HTMLElement
+  const { left, top, width, height } = target.getBoundingClientRect()
+  const x = left + width / 2
+  const y = top + height / 2
+  const endRadius = Math.hypot(
+    Math.max(x, innerWidth - x),
+    Math.max(y, innerHeight - y),
+  )
+  const ratioX = (100 * x) / innerWidth
+  const ratioY = (100 * y) / innerHeight
+  const referR = Math.hypot(innerWidth, innerHeight) / Math.SQRT2
+  const ratioR = (100 * endRadius) / referR
+  const transition = document.startViewTransition(async () => {
+    appSettingsStore.currentColorScheme && appSettingsStore.setColorScheme(appSettingsStore.currentColorScheme === 'dark' ? 'light' : 'dark')
+    await nextTick()
+  })
+  transition.ready.then(() => {
+    const clipPath = [
+      `circle(0% at ${ratioX}% ${ratioY}%)`,
+      `circle(${ratioR}% at ${ratioX}% ${ratioY}%)`,
+    ]
+    document.documentElement.animate(
+      {
+        clipPath: appSettingsStore.currentColorScheme === 'light' ? clipPath : clipPath.toReversed(),
+      },
+      {
+        duration: 500,
+        easing: 'ease-in-out',
+        fill: 'both',
+        pseudoElement: appSettingsStore.currentColorScheme === 'light' ? '::view-transition-new(root)' : '::view-transition-old(root)',
+      },
+    )
+  })
+}
+</script>
+
+<template>
+  <FaButton variant="ghost" size="icon-sm" @click="toggleColorScheme">
+    <FaIcon
+      :name="{
+        light: 'i-ri:sun-line',
+        dark: 'i-ri:moon-line',
+      }[appSettingsStore.currentColorScheme!]" class="size-4"
+    />
+  </FaButton>
+</template>

apps/core-ant-design-vue/src/layouts/components/Topbar/Toolbar/Fullscreen/index.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { useFullscreen } from '@vueuse/core'
+
+defineOptions({
+  name: 'ToolbarFullscreen',
+})
+
+const appSettingsStore = useAppSettingsStore()
+
+const { isFullscreen, toggle } = useFullscreen()
+</script>
+
+<template>
+  <FaButton v-if="appSettingsStore.mode === 'pc'" variant="ghost" size="icon-sm" @click="toggle">
+    <FaIcon :name="isFullscreen ? 'i-ri:fullscreen-exit-line' : 'i-ri:fullscreen-line'" class="size-4" />
+  </FaButton>
+</template>

apps/core-ant-design-vue/src/layouts/components/Topbar/Toolbar/MenuSearch/index.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { useHotkeyBindings } from '@/hotkeys'
+import Search from './search.vue'
+
+defineOptions({
+  name: 'ToolbarMenuSearch',
+})
+
+const appSettingsStore = useAppSettingsStore()
+
+const isShow = ref(false)
+
+const useMobileStyle = computed(() => {
+  return appSettingsStore.mode !== 'pc' || !appSettingsStore.settings.toolbar.menuSearch.hotkeys
+})
+
+useHotkeyBindings({
+  'menuSearch.open': () => {
+    isShow.value = true
+  },
+})
+</script>
+
+<template>
+  <FaButton :variant="useMobileStyle ? 'ghost' : 'outline'" :size="useMobileStyle ? 'icon-sm' : undefined" :class="{ 'mx-2 px-3 h-9': !useMobileStyle }" @click="isShow = true">
+    <FaIcon name="i-ri:search-line" class="size-4" />
+    <template v-if="!useMobileStyle">
+      <FaKbdGroup v-if="appSettingsStore.settings.toolbar.menuSearch.hotkeys" class="-me-1">
+        <FaKbd>{{ appSettingsStore.os === 'mac' ? '⌘' : 'Ctrl' }}</FaKbd>
+        <FaKbd>K</FaKbd>
+      </FaKbdGroup>
+    </template>
+  </FaButton>
+  <Search v-model="isShow" />
+</template>

apps/core-ant-design-vue/src/layouts/components/Topbar/Toolbar/MenuSearch/search.vue

@@ -0,0 +1,256 @@
+<script setup lang="ts">
+import type { MenuRecordRaw } from '@fantastic-admin/types'
+import { match } from 'pinyin-pro'
+import { useHotkeyBindings } from '@/hotkeys'
+import Breadcrumb from '@/layouts/components/Breadcrumb/index.vue'
+import BreadcrumbItem from '@/layouts/components/Breadcrumb/item.vue'
+import { resolveRoutePath } from '@/utils'
+
+defineOptions({
+  name: 'ToolbarMenuSearchModal',
+})
+
+const isShow = defineModel<boolean>({
+  default: false,
+})
+
+const router = useRouter()
+const appSettingsStore = useAppSettingsStore()
+const appRouteStore = useAppRouteStore()
+const appMenuStore = useAppMenuStore()
+
+const { generateTitle } = useAppMenu()
+
+interface listTypes {
+  path: string
+  icon?: string
+  title?: string | (() => string)
+  link?: string
+}
+
+const searchInput = ref('')
+const sourceList = ref<listTypes[]>([])
+const actived = ref(0)
+
+const searchResultRef = useTemplateRef('searchResultRef')
+const searchResultItemRef = useTemplateRef<HTMLElement[]>('searchResultItemRef')
+
+const resultList = computed(() => {
+  let result = []
+  result = sourceList.value.filter((item) => {
+    let flag = false
+    if (searchInput.value !== '') {
+      if (item.path.includes(searchInput.value)) {
+        flag = true
+      }
+      if (
+        generateTitle(item.title).toString().includes(searchInput.value)
+        || (match(generateTitle(item.title).toString(), searchInput.value, { continuous: true })?.length ?? 0) > 0
+      ) {
+        flag = true
+      }
+      if (appRouteStore.getRouteMatchedByPath(item.path).some((b) => {
+        return generateTitle(b.meta?.title).toString().includes(searchInput.value)
+          || (match(generateTitle(b.meta?.title).toString(), searchInput.value, { continuous: true })?.length ?? 0) > 0
+      })) { flag = true }
+    }
+    return flag
+  })
+  return result
+})
+
+useHotkeyBindings({
+  'menuSearch.moveUp': () => {
+    keyUp()
+  },
+  'menuSearch.moveDown': () => {
+    keyDown()
+  },
+  'menuSearch.confirm': () => {
+    keyEnter()
+  },
+  'menuSearch.close': () => {
+    isShow.value = false
+  },
+}, () => isShow.value)
+
+watch(() => isShow.value, (val) => {
+  if (val) {
+    searchInput.value = ''
+    actived.value = 0
+  }
+})
+watch(() => resultList.value, () => {
+  actived.value = 0
+  handleScroll()
+})
+watch(() => actived.value, () => {
+  handleScroll()
+})
+
+onMounted(() => {
+  initSourceList()
+})
+
+function initSourceList() {
+  sourceList.value = []
+  appMenuStore.allMenus.forEach((item) => {
+    getSourceList(item.children)
+  })
+}
+
+function hasChildren(item: MenuRecordRaw) {
+  let flag = true
+  if (item.children?.every(i => i.meta?.menu === false)) {
+    flag = false
+  }
+  return flag
+}
+function getSourceList(arr: MenuRecordRaw[], basePath?: string, icon?: string) {
+  arr.forEach((item) => {
+    if (item.meta?.menu !== false) {
+      if (item.children && hasChildren(item)) {
+        getSourceList(
+          item.children,
+          resolveRoutePath(basePath, item.path),
+          item.meta?.icon ?? icon,
+        )
+      }
+      else {
+        sourceList.value.push({
+          path: resolveRoutePath(basePath, item.path),
+          icon: item.meta?.icon ?? icon,
+          title: item.meta?.title,
+          link: item.meta?.link,
+        })
+      }
+    }
+  })
+}
+
+function keyUp() {
+  if (resultList.value.length) {
+    actived.value -= 1
+    if (actived.value < 0) {
+      actived.value = resultList.value.length - 1
+    }
+  }
+}
+function keyDown() {
+  if (resultList.value.length) {
+    actived.value += 1
+    if (actived.value > resultList.value.length - 1) {
+      actived.value = 0
+    }
+  }
+}
+function keyEnter() {
+  searchResultItemRef.value?.find(item => Number.parseInt(item.dataset.index!) === actived.value)?.click()
+}
+function handleScroll() {
+  if (searchResultRef.value?.ref?.el?.viewportElement) {
+    const contentDom = searchResultRef.value.ref.el.viewportElement
+    let scrollTo = 0
+    if (resultList.value.length > 0) {
+      scrollTo = contentDom.scrollTop
+      const activedOffsetTop = searchResultItemRef.value?.find(item => Number.parseInt(item.dataset.index!) === actived.value)?.offsetTop ?? 0
+      const activedClientHeight = searchResultItemRef.value?.find(item => Number.parseInt(item.dataset.index!) === actived.value)?.clientHeight ?? 0
+      const searchScrollTop = contentDom.scrollTop
+      const searchClientHeight = contentDom.clientHeight
+      if (activedOffsetTop + activedClientHeight > searchScrollTop + searchClientHeight) {
+        scrollTo = activedOffsetTop + activedClientHeight - searchClientHeight
+      }
+      else if (activedOffsetTop <= searchScrollTop) {
+        scrollTo = activedOffsetTop - 16
+      }
+    }
+    contentDom.scrollTo({
+      top: scrollTo,
+    })
+  }
+}
+
+function pageJump(path: listTypes['path'], link: listTypes['link']) {
+  if (link) {
+    window.open(link, '_blank')
+  }
+  else {
+    router.push(path)
+  }
+  isShow.value = false
+}
+</script>
+
+<template>
+  <FaModal v-model="isShow" :footer="appSettingsStore.mode === 'pc'" :closable="false" open-auto-focus border class="w-full lg-max-w-2xl" content-class="flex flex-col p-0 min-h-auto" header-class="p-0" footer-class="p-0">
+    <template #header>
+      <div class="flex flex-shrink-0 h-12 items-center">
+        <div class="flex-center h-full w-14">
+          <FaIcon name="i-ri:search-line" class="text-foreground/30 size-4" />
+        </div>
+        <input v-model="searchInput" placeholder="支持标题、拼音(首字母)、URL模糊查询" class="text-base text-foreground border-0 rounded-md bg-transparent h-full w-full focus-outline-none placeholder-foreground/30" @keydown.esc.prevent="isShow = false" @keydown.up.prevent="keyUp" @keydown.down.prevent="keyDown" @keydown.enter.prevent="keyEnter">
+        <div v-if="appSettingsStore.mode === 'mobile'" class="border-s flex-center h-full w-14">
+          <FaIcon name="i-carbon:close" class="size-4" @click="isShow = false" />
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <div class="px-4 py-3 flex w-full justify-between">
+        <div class="flex gap-8">
+          <div class="text-xs inline-flex gap-1 items-center">
+            <FaKbd>⏎</FaKbd>
+            <span>访问</span>
+          </div>
+          <div class="text-xs inline-flex gap-1 items-center">
+            <FaKbd>
+              <FaIcon name="i-ant-design:caret-up-filled" />
+            </FaKbd>
+            <FaKbd>
+              <FaIcon name="i-ant-design:caret-down-filled" />
+            </FaKbd>
+            <span>切换</span>
+          </div>
+        </div>
+        <div v-if="appSettingsStore.settings.toolbar.menuSearch.hotkeys" class="text-xs inline-flex gap-1 items-center">
+          <FaKbd>Esc</FaKbd>
+          <span>退出</span>
+        </div>
+      </div>
+    </template>
+    <FaScrollArea ref="searchResultRef">
+      <template v-if="resultList.length > 0">
+        <div v-for="(item, index) in resultList" ref="searchResultItemRef" :key="item.path" class="p-4" :data-index="index" @click="pageJump(item.path, item.link)" @mouseover="actived = index">
+          <a class="border rounded-lg flex cursor-pointer items-center" :class="{ '-mt-4': index !== 0, 'bg-accent border-primary shadow-[0_0_0_1px_oklch(var(--primary))]': index === actived, 'op-50': index !== actived }">
+            <div class="flex-center basis-16 -me-4">
+              <FaIcon v-if="item.icon" :name="item.icon" class="size-5 transition" :class="{ 'scale-120 text-primary': index === actived }" />
+            </div>
+            <div class="px-4 py-3 flex flex-1 flex-col gap-1 truncate">
+              <div class="text-base font-bold text-start truncate">{{ generateTitle(item.title) }}</div>
+              <Breadcrumb v-if="appRouteStore.getRouteMatchedByPath(item.path).length" class="truncate">
+                <BreadcrumbItem v-for="(bc, bcIndex) in appRouteStore.getRouteMatchedByPath(item.path)" :key="bcIndex" class="text-xs">
+                  {{ generateTitle(bc.meta?.title) }}
+                </BreadcrumbItem>
+              </Breadcrumb>
+            </div>
+          </a>
+        </div>
+      </template>
+      <template v-else-if="searchInput === ''">
+        <div class="text-secondary-foreground/50 py-6 flex-col-center h-full">
+          <FaIcon name="i-tabler:mood-smile" class="size-10" />
+          <p class="text-base m-2">
+            输入你要搜索的导航
+          </p>
+        </div>
+      </template>
+      <template v-else>
+        <div class="text-secondary-foreground/50 py-6 flex-col-center h-full">
+          <FaIcon name="i-tabler:mood-empty" class="size-10" />
+          <p class="text-base m-2">
+            没有找到你想要的
+          </p>
+        </div>
+      </template>
+    </FaScrollArea>
+  </FaModal>
+</template>

apps/core-ant-design-vue/src/layouts/components/Topbar/Toolbar/PageReload/index.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'ToolbarPageReload',
+})
+
+const appSettingsStore = useAppSettingsStore()
+const mainPage = useAppPage()
+
+const isAnimating = ref(false)
+
+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>
+
+<template>
+  <FaTooltip side="bottom" :disabled="appSettingsStore.os === 'mac'">
+    <template #content>
+      <div class="flex-col-center gap-2">
+        <p class="flex-center gap-1">
+          按住 <FaKbd>Ctrl</FaKbd> 键并点击
+        </p>
+        <p>可切换为浏览器原生刷新</p>
+      </div>
+    </template>
+    <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>
+</template>
+
+<style scoped>
+.animation {
+  animation: animation 1s;
+}
+
+@keyframes animation {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

apps/core-ant-design-vue/src/layouts/components/Topbar/Toolbar/endSide.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { useSlots } from '@/slots'
+import Tools from './tools.vue'
+
+defineOptions({
+  name: 'ToolbarRightSide',
+})
+</script>
+
+<template>
+  <div class="flex items-center">
+    <Tools mode="right-side" />
+    <Component :is="useSlots('toolbar-end')" />
+  </div>
+</template>

apps/core-ant-design-vue/src/layouts/components/Topbar/Toolbar/index.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import EndSide from './endSide.vue'
+import StartSide from './startSide.vue'
+
+defineOptions({
+  name: 'Toolbar',
+})
+</script>
+
+<template>
+  <div class="bg-[var(--g-toolbar-bg)] flex h-[var(--g-toolbar-height)] items-center justify-between">
+    <div class="start-side pe-16 ps-2 flex h-full items-center of-hidden">
+      <StartSide />
+    </div>
+    <div class="px-2 flex flex-shrink-0 h-full items-center justify-end">
+      <EndSide />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.start-side {
+  mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 50px), transparent);
+}
+</style>

apps/core-ant-design-vue/src/layouts/components/Topbar/Toolbar/startSide.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { useSlots } from '@/slots'
+import Tools from './tools.vue'
+
+defineOptions({
+  name: 'ToolbarLeftSide',
+})
+
+const appSettingsStore = useAppSettingsStore()
+</script>
+
+<template>
+  <div class="flex items-center">
+    <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')" />
+    <Tools mode="left-side" />
+  </div>
+</template>

apps/core-ant-design-vue/src/layouts/components/Topbar/Toolbar/tools.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { ToolbarSettings } from '@fantastic-admin/settings'
+import { pascalCase } from 'scule'
+
+defineOptions({
+  name: 'ToolbarTools',
+})
+
+const props = defineProps<{
+  mode: 'left-side' | 'right-side'
+}>()
+
+const modules = import.meta.glob('./*/index.vue', { import: 'default', eager: true })
+
+const appSettingsStore = useAppSettingsStore()
+
+const toolbarTools = {
+  'left-side': ['breadcrumb'],
+  'right-side': ['menuSearch', 'fullscreen', 'pageReload', 'colorScheme'],
+} satisfies Record<typeof props.mode, (keyof ToolbarSettings)[]>
+
+const tools = computed(() => toolbarTools[props.mode])
+
+function checkVisible(item: boolean | { enable: boolean }) {
+  if (typeof item === 'boolean') {
+    return item
+  }
+  else if (typeof item === 'object' && item !== null) {
+    return item.enable ?? false
+  }
+  return false
+}
+</script>
+
+<template>
+  <template v-for="item in tools" :key="item">
+    <Component :is="modules[`./${pascalCase(item)}/index.vue`]" v-if="checkVisible(appSettingsStore.settings.toolbar[item])" />
+  </template>
+</template>

apps/core-ant-design-vue/src/layouts/components/Topbar/index.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { useElementSize, useScroll } from '@vueuse/core'
+import eventBus from '@/utils/eventBus'
+import Tabbar from './Tabbar/index.vue'
+import Toolbar from './Toolbar/index.vue'
+
+defineOptions({
+  name: 'Topbar',
+})
+
+defineProps<{
+  enable: boolean
+  enableTabbar: boolean
+  enableToolbar: boolean
+}>()
+
+const appSettingsStore = useAppSettingsStore()
+
+const { height: topbarHeight } = useElementSize(useTemplateRef('topbarRef'))
+const { y } = useScroll(window)
+const scrollOnHide = ref(false)
+
+watch(y, (val, oldVal) => {
+  scrollOnHide.value = appSettingsStore.settings.topbar.mode === 'sticky' && val > (oldVal ?? 0) && val > topbarHeight.value
+})
+
+watch(scrollOnHide, (val) => {
+  eventBus.emit('topbar-scroll-visible-or-hidden', val)
+}, {
+  immediate: true,
+})
+</script>
+
+<template>
+  <Transition name="topbar">
+    <div
+      v-if="enable" ref="topbarRef" class="flex flex-col w-full shadow-[0_1px_0_0_oklch(var(--border))] transition-transform-300"
+    >
+      <Tabbar v-if="enableTabbar" class="z-2" />
+      <Toolbar v-if="enableToolbar" class="z-1" />
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+/* 顶栏动画 */
+.topbar-enter-active,
+.topbar-leave-active {
+  transition: transform 0.3s;
+}
+
+.topbar-enter-from,
+.topbar-leave-to {
+  transform: translateY(calc(var(--g-topbar-height) * -1));
+}
+</style>

apps/core-ant-design-vue/src/layouts/components/views/link.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { useClipboard } from '@vueuse/core'
+
+defineOptions({
+  name: 'LinkView',
+})
+
+const route = useRoute()
+const { copy, copied } = useClipboard({ legacy: true })
+watch(copied, (val) => {
+  val && useFaToast().success('复制成功')
+})
+
+function open() {
+  window.open(route.meta.link, '_blank')
+}
+</script>
+
+<template>
+  <div class="flex flex-col h-full w-full absolute">
+    <Transition name="fade" mode="out-in" appear>
+      <FaPageMain :key="route.meta.link" class="flex flex-1 flex-col justify-center">
+        <div class="flex flex-col items-center">
+          <FaIcon name="i-icon-park-twotone:planet" class="text-primary/80 size-30" />
+          <div class="text-xl text-dark my-2 dark-text-white">
+            是否访问此链接
+          </div>
+          <div class="text-[14px] text-secondary-foreground/50 my-2 text-center max-w-[300px] cursor-pointer" @click="route.meta.link && copy(route.meta.link)">
+            <FaTooltip text="复制链接">
+              <div class="line-clamp-3">
+                {{ route.meta.link }}
+              </div>
+            </FaTooltip>
+          </div>
+          <FaButton class="my-4" @click="open">
+            <FaIcon name="i-ri:external-link-fill" />
+            立即访问
+          </FaButton>
+        </div>
+      </FaPageMain>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.fade-enter-active {
+  transition: 0.2s;
+}
+
+.fade-leave-active {
+  transition: 0.15s;
+}
+
+.fade-enter-from {
+  opacity: 0;
+}
+
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

apps/core-ant-design-vue/src/layouts/index.vue

@@ -0,0 +1,325 @@
+<script setup lang="ts">
+import { useElementSize, useScroll } from '@vueuse/core'
+import { useHotkeyBindings } from '@/hotkeys'
+import { useSlots } from '@/slots'
+import { cn } from '@/utils'
+import eventBus from '@/utils/eventBus'
+import AppSetting from './components/AppSetting/index.vue'
+import FloatingSidebarMenuButton from './components/FloatingSidebarMenuButton/index.vue'
+import Header from './components/Header/index.vue'
+import Hotkeys from './components/Hotkeys/index.vue'
+import MainSidebar from './components/MainSidebar/index.vue'
+import SubSidebar from './components/SubSidebar/index.vue'
+import Topbar from './components/Topbar/index.vue'
+import LinkView from './components/views/link.vue'
+
+defineOptions({
+  name: 'Layout',
+})
+
+const routeInfo = useRoute()
+
+const appSettingsStore = useAppSettingsStore()
+const appKeepAliveStore = useAppKeepAliveStore()
+const appMenuStore = useAppMenuStore()
+const mainPage = useAppPage()
+
+useHotkeyBindings({
+  'system.info.open': () => {
+    eventBus.emit('global-system-info-open')
+  },
+  'page.reload': () => {
+    mainPage.reload()
+  },
+})
+
+const layoutTopRef = useTemplateRef('layoutTopRef')
+const { height: layoutTopHeight } = useElementSize(layoutTopRef)
+
+const layoutBottomRef = useTemplateRef('layoutBottomRef')
+const { height: layoutBottomHeight } = useElementSize(layoutBottomRef)
+
+// 头部是否显示
+const isHeaderEnable = computed(() => {
+  return appSettingsStore.mode === 'pc'
+    && appSettingsStore.settings.menu.mode === 'head'
+})
+
+// 侧边栏主导航是否显示
+const isMainSidebarEnable = computed(() => {
+  return appSettingsStore.settings.menu.mode === 'side'
+    || (appSettingsStore.mode === 'mobile' && appSettingsStore.settings.menu.mode !== 'single')
+})
+
+// 侧边栏次导航是否显示
+const isSubSidebarEnable = computed(() => {
+  return appSettingsStore.mode === 'mobile'
+    || (
+      ['side', 'head'].includes(appSettingsStore.settings.menu.mode)
+      && appMenuStore.sidebarMenus.length !== 0
+      && (
+        (
+          appSettingsStore.settings.menu.mainMenuClickMode === 'switch'
+          && !appMenuStore.sidebarMenus.every(item => item.meta?.menu === false)
+        )
+        || (
+          appSettingsStore.settings.menu.mainMenuClickMode !== 'switch'
+          && appMenuStore.sidebarMenus.some(item => item.meta?.menu !== false)
+        )
+      )
+    )
+    || (
+      ['single'].includes(appSettingsStore.settings.menu.mode)
+      && appMenuStore.sidebarMenus.length !== 0
+      && !appMenuStore.sidebarMenus.every(item => item.meta?.menu === false)
+    )
+})
+
+// 顶栏是否显示
+const isTopbarEnable = computed(() => true)
+
+// 标签栏是否显示
+const isTabbarEnable = computed(() => {
+  return appSettingsStore.settings.topbar.tabbar
+})
+
+// 工具栏是否显示
+const isToolbarEnable = computed(() => {
+  const { toolbar } = appSettingsStore.settings
+  return appSettingsStore.settings.topbar.toolbar && [
+    toolbar.breadcrumb,
+    toolbar.menuSearch,
+    toolbar.fullscreen,
+    toolbar.pageReload,
+    toolbar.colorScheme,
+  ].some((item) => {
+    if (typeof item === 'boolean') {
+      return item
+    }
+    return item?.enable ?? false
+  })
+})
+
+const isLink = computed(() => !!routeInfo.meta.link)
+
+watch(() => appSettingsStore.settings.menu.subMenuCollapse, (val) => {
+  if (appSettingsStore.mode === 'mobile') {
+    if (!val) {
+      document.body.classList.add('overflow-hidden')
+    }
+    else {
+      document.body.classList.remove('overflow-hidden')
+    }
+  }
+})
+
+watch(() => routeInfo.path, () => {
+  if (appSettingsStore.mode === 'mobile') {
+    appSettingsStore.$patch((state) => {
+      state.settings.menu.subMenuCollapse = true
+    })
+  }
+})
+
+const { y } = useScroll(window)
+const { height: fixedContentBeforeAreaHeight } = useElementSize(useTemplateRef('fixedContentBeforeAreaRef'))
+const { height: fixedContentAfterAreaHeight } = useElementSize(useTemplateRef('fixedContentAfterAreaRef'))
+const topbarScrollVisibleOrHidden = ref(false)
+eventBus.on('topbar-scroll-visible-or-hidden', (val) => {
+  topbarScrollVisibleOrHidden.value = val
+})
+
+const enableAppSetting = import.meta.env.VITE_APP_SETTING
+</script>
+
+<template>
+  <div
+    class="layout h-full" :style="{
+      '--g-slots-layout-top-height': `${layoutTopHeight}px`,
+      '--g-slots-layout-bottom-height': `${layoutBottomHeight}px`,
+      '--g-header-actual-height': isHeaderEnable ? 'var(--g-header-height)' : '0px',
+      '--g-main-sidebar-actual-width': isMainSidebarEnable ? 'var(--g-main-sidebar-width)' : '0px',
+      '--g-sub-sidebar-actual-width': isSubSidebarEnable ? (appSettingsStore.settings.menu.subMenuCollapse && appSettingsStore.mode !== 'mobile' ? 'var(--g-sub-sidebar-collapse-width)' : 'var(--g-sub-sidebar-width)') : '0px',
+      '--g-topbar-height': 'calc(var(--g-tabbar-actual-height) + var(--g-toolbar-actual-height))',
+      '--g-topbar-actual-height': isTopbarEnable ? 'calc(var(--g-tabbar-actual-height) + var(--g-toolbar-actual-height))' : '0px',
+      '--g-tabbar-actual-height': isTabbarEnable ? 'var(--g-tabbar-height)' : '0px',
+      '--g-toolbar-actual-height': isToolbarEnable ? 'var(--g-toolbar-height)' : '0px',
+      '--g-main-container-padding-top': `${fixedContentBeforeAreaHeight}px`,
+      '--g-main-container-padding-bottom': `${fixedContentAfterAreaHeight}px`,
+    }"
+  >
+    <div ref="layoutTopRef" class="slots-layout-top mx-auto bg-background w-full shadow-[-1px_0_0_0_oklch(var(--border)),1px_0_0_0_oklch(var(--border)),0_-1px_0_0_oklch(var(--border)),0_1px_0_0_oklch(var(--border))] transition-width-300 inset-t-0 fixed z-1030 empty:hidden">
+      <Component :is="useSlots('layout-top')" />
+    </div>
+    <Header :enable="isHeaderEnable" />
+    <div class="wrapper">
+      <div class="sidebar-container" :class="{ show: appSettingsStore.mode === 'mobile' && !appSettingsStore.settings.menu.subMenuCollapse }">
+        <MainSidebar :enable="isMainSidebarEnable" />
+        <SubSidebar :enable="isSubSidebarEnable" />
+      </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="{
+            ...(appSettingsStore.settings.topbar.mode === 'static' && { marginTop: `calc(min(var(--g-topbar-actual-height), ${y}px) * -1)` }),
+            ...(topbarScrollVisibleOrHidden && { translate: '0 calc(var(--g-topbar-actual-height) * -1)' }),
+          }"
+        >
+          <Topbar :enable="isTopbarEnable" :enable-tabbar="isTabbarEnable" :enable-toolbar="isToolbarEnable" />
+          <div id="fixed-content-before-area" ref="fixedContentBeforeAreaRef" class="shadow-[0_1px_0_0_oklch(var(--border)),0_-1px_0_0_oklch(var(--border))] relative z-1 empty:hidden" />
+        </div>
+        <div id="app-content" class="main">
+          <RouterView v-slot="{ Component, route }">
+            <Transition :name="!appSettingsStore.isReloading ? 'fade' : ''" mode="out-in">
+              <KeepAlive :include="appKeepAliveStore.list">
+                <Component :is="Component" v-show="!isLink" :key="route.fullPath" />
+              </KeepAlive>
+            </Transition>
+          </RouterView>
+          <LinkView v-if="isLink" />
+        </div>
+        <div class="copyright">
+          <AppCopyright />
+        </div>
+        <div class="fixed-content-around-area w-full inset-b-0 inset-inline-1/2 fixed z-1005">
+          <div id="fixed-content-after-area" ref="fixedContentAfterAreaRef" class="shadow-[0_1px_0_0_oklch(var(--border)),0_-1px_0_0_oklch(var(--border))] relative z-1 empty:hidden" />
+        </div>
+      </div>
+    </div>
+    <div ref="layoutBottomRef" class="slots-layout-bottom mx-auto bg-background w-full shadow-[-1px_0_0_0_oklch(var(--border)),1px_0_0_0_oklch(var(--border)),0_-1px_0_0_oklch(var(--border)),0_1px_0_0_oklch(var(--border))] transition-width-300 inset-b-0 fixed z-1030 empty:hidden">
+      <Component :is="useSlots('layout-bottom')" />
+    </div>
+    <Hotkeys />
+    <template v-if="enableAppSetting">
+      <div class="text-primary-foreground rounded-l-md bg-primary flex-center size-12 cursor-pointer inset-e-0 inset-t-[calc(50%+250px)] fixed z-10" @click="eventBus.emit('global-app-setting-toggle')">
+        <FaIcon name="i-uiw:setting-o" class="size-6 animate-spin animate-duration-3000" />
+      </div>
+      <AppSetting />
+    </template>
+    <Component :is="useSlots('free-position')" />
+  </div>
+</template>
+
+<style scoped>
+[data-mode="mobile"] {
+  .sidebar-container {
+    transform: translateX(calc((var(--g-main-sidebar-width) + var(--g-sub-sidebar-width)) * -1));
+
+    &.show {
+      transform: translateX(0);
+    }
+  }
+
+  .main-container {
+    padding-inline-start: 0 !important;
+  }
+
+  &[data-menu-mode="single"] {
+    .sidebar-container {
+      transform: translateX(calc(var(--g-sub-sidebar-width) * -1));
+
+      &.show {
+        transform: translateX(0);
+      }
+    }
+  }
+}
+
+.layout {
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  transition: width 0.3s;
+}
+
+.wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .sidebar-container {
+    position: fixed;
+    top: calc(var(--g-slots-layout-top-height) + var(--g-header-actual-height));
+    bottom: var(--g-slots-layout-bottom-height);
+    z-index: 1010;
+    display: flex;
+    width: calc(var(--g-main-sidebar-actual-width) + var(--g-sub-sidebar-actual-width));
+    transition: width 0.3s, transform 0.3s, top 0.3s, box-shadow 0.15s;
+
+    &:has(> .main-sidebar-container.main-sidebar-enter-active),
+    &:has(> .main-sidebar-container.main-sidebar-leave-active),
+    &:has(> .sub-sidebar-container.sub-sidebar-enter-active),
+    &:has(> .sub-sidebar-container.sub-sidebar-leave-active) {
+      overflow: hidden;
+    }
+  }
+
+  .main-sidebar-container:not(.main-sidebar-leave-active) + .sub-sidebar-container {
+    inset-inline-start: var(--g-main-sidebar-width);
+  }
+
+  .main-container {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    padding-inline-start: calc(var(--g-main-sidebar-actual-width) + var(--g-sub-sidebar-actual-width));
+    overflow: auto;
+    background-color: var(--g-main-area-bg);
+    box-shadow: -1px 0 0 0 oklch(var(--border)), 1px 0 0 0 oklch(var(--border));
+    transition: padding-inline-start 0.3s, padding 0.3s, background-color 0.15s, box-shadow 0.15s;
+
+    .fixed-content-around-area {
+      width: calc(100% - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
+      padding-right: var(--scrollbar-width, 0);
+      transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
+      transform-origin: left;
+      transition: width 0.3s, transform 0.3s, translate 0.3s, top 0.3s;
+
+      [data-mode="mobile"] & {
+        width: 100% !important;
+        transform: translateX(-50%) !important;
+      }
+    }
+
+    .main {
+      position: relative;
+      flex: auto;
+      width: 100%;
+      height: 100%;
+      padding-top: var(--g-main-container-padding-top, 0);
+      margin: 0 auto;
+      overflow: hidden;
+      background-color: var(--g-main-area-bg);
+      box-shadow: -1px 0 0 0 oklch(var(--border)), 1px 0 0 0 oklch(var(--border));
+      transition: padding-top 0.3s, width 0.3s, background-color 0.15s, box-shadow 0.15s;
+    }
+
+    .copyright {
+      position: relative;
+      width: 100%;
+      margin-inline: auto;
+      background-color: oklch(var(--background));
+      box-shadow: -1px 0 0 0 oklch(var(--border)), 1px 0 0 0 oklch(var(--border)), 0 -1px 0 0 oklch(var(--border));
+    }
+  }
+}
+
+/* 主内容区动画 */
+.fade-enter-active {
+  transition: 0.2s;
+}
+
+.fade-leave-active {
+  transition: 0.15s;
+}
+
+.fade-enter-from {
+  opacity: 0;
+}
+
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

apps/core-ant-design-vue/src/main.ts

@@ -0,0 +1,29 @@
+// 加载 iconify 图标
+import { downloadAndInstall } from '@/iconify'
+import icons from '@/iconify/index.json'
+// 自定义指令
+import directive from '@/utils/directive'
+
+import App from './App.vue'
+import router from './router'
+import pinia from './store'
+import uiProvider from './ui/provider'
+import '@/utils/storage'
+
+// UnoCSS
+import 'virtual:uno.css'
+// 全局样式
+import '@/assets/styles/globals.css'
+
+const app = createApp(App)
+app.use(pinia)
+app.use(router)
+app.use(uiProvider)
+directive(app)
+if (icons.isOfflineUse) {
+  for (const info of icons.collections) {
+    downloadAndInstall(info)
+  }
+}
+
+app.mount('#app')

apps/core-ant-design-vue/src/router/extensions.ts

@@ -0,0 +1,136 @@
+import type { NavigationFailure, RouteLocationRaw, Router } from 'vue-router'
+import pinia from '@/store'
+
+function getId(router: Router) {
+  return router.currentRoute.value.fullPath
+}
+
+function extendPush(router: Router) {
+  const originalPush = router.push
+  router.push = function (to: RouteLocationRaw) {
+    const appSettingsStore = useAppSettingsStore(pinia)
+    if (appSettingsStore.settings.topbar.tabbar) {
+      const appTabbarStore = useAppTabbarStore(pinia)
+      const index = appTabbarStore.list.findIndex(item => item.tabId === getId(router))
+      appTabbarStore.$patch({
+        leaveIndex: index,
+      })
+    }
+    return originalPush(to)
+  }
+}
+
+function extendReplace(router: Router) {
+  const originalReplace = router.replace
+  router.replace = function (to: RouteLocationRaw) {
+    const appSettingsStore = useAppSettingsStore(pinia)
+    if (appSettingsStore.settings.topbar.tabbar) {
+      const tabId = getId(router)
+      const appTabbarStore = useAppTabbarStore(pinia)
+      return originalReplace(to).then(() => {
+        appTabbarStore.remove(tabId)
+      })
+    }
+    else {
+      return originalReplace(to)
+    }
+  }
+}
+
+function extendGo(router: Router) {
+  const originalGo = router.go
+  router.go = function (delta: number) {
+    const appSettingsStore = useAppSettingsStore(pinia)
+    if (appSettingsStore.settings.topbar.tabbar) {
+      const tabId = getId(router)
+      const appTabbarStore = useAppTabbarStore(pinia)
+      originalGo(delta)
+      if (delta < 0) {
+        appTabbarStore.remove(tabId)
+      }
+    }
+    else {
+      originalGo(delta)
+    }
+  }
+}
+
+function shouldUseHistoryBack(router: Router, to?: RouteLocationRaw) {
+  const historyBack = window.history.state?.back
+  if (typeof historyBack !== 'string' || !historyBack) {
+    return false
+  }
+  if (!to) {
+    return true
+  }
+  const backRoute = router.resolve(historyBack)
+  const targetRoute = router.resolve(to)
+  if (backRoute.name && targetRoute.name) {
+    return backRoute.name === targetRoute.name
+  }
+  return (backRoute.matched.at(-1)?.path ?? backRoute.path) === (targetRoute.matched.at(-1)?.path ?? targetRoute.path)
+}
+
+function extendBack(router: Router) {
+  const originalBack = router.back
+  router.back = function (to?: RouteLocationRaw) {
+    const appSettingsStore = useAppSettingsStore(pinia)
+    const tabId = getId(router)
+    const fallbackTo = to ?? appSettingsStore.settings.app.home.fullPath
+    if (shouldUseHistoryBack(router, to)) {
+      originalBack()
+      if (appSettingsStore.settings.topbar.tabbar) {
+        const appTabbarStore = useAppTabbarStore(pinia)
+        appTabbarStore.remove(tabId)
+      }
+      return Promise.resolve()
+    }
+    else {
+      return router.replace(fallbackTo).then(() => {
+        if (appSettingsStore.settings.topbar.tabbar) {
+          const appTabbarStore = useAppTabbarStore(pinia)
+          appTabbarStore.remove(tabId)
+        }
+      })
+    }
+  }
+}
+
+function extendClose(router: Router) {
+  router.close = function (to: RouteLocationRaw) {
+    const tabId = getId(router)
+    return router.push(to).then(() => {
+      const appSettingsStore = useAppSettingsStore(pinia)
+      if (appSettingsStore.settings.topbar.tabbar) {
+        const appTabbarStore = useAppTabbarStore(pinia)
+        appTabbarStore.remove(tabId)
+      }
+    })
+  }
+}
+
+declare module 'vue-router' {
+  interface _RouterClassic {
+    /**
+     * 本方法为框架扩展语法，会同时关闭当前标签页
+     *
+     * 如果上一条历史记录与传入目标页一致，则调用原生 `back` 方法
+     * 如果没有历史记录，或者上一条历史记录不是目标页，则使用 `replace` 方法跳转到指定路径或首页
+     *
+     * @param to 可选的目标路由，当无法安全回退时使用此参数作为跳转目标
+     */
+    back: (to?: RouteLocationRaw) => Promise<NavigationFailure | void | undefined>
+    /**
+     * 本方法为框架扩展语法，等同于 `push` 方法，并且同时会关闭当前标签页
+     */
+    close: (to: RouteLocationRaw) => Promise<NavigationFailure | void | undefined>
+  }
+}
+
+export default function setupExtensions(router: Router) {
+  extendPush(router)
+  extendReplace(router)
+  extendGo(router)
+  extendBack(router)
+  extendClose(router)
+}

apps/core-ant-design-vue/src/router/guards.ts

@@ -0,0 +1,182 @@
+import type { Router } from 'vue-router'
+import { useNProgress } from '@vueuse/integrations/useNProgress'
+import { warnKeepAliveComponentNameMissing } from 'virtual:fantastic-admin/turbo-console'
+import { asyncRoutes } from './routes'
+import '@/assets/styles/nprogress.css'
+
+function setupRoutes(router: Router) {
+  router.beforeEach(async (to) => {
+    const appSettingsStore = useAppSettingsStore()
+    const appAccountStore = useAppAccountStore()
+    const appRouteStore = useAppRouteStore()
+    const appMenuStore = useAppMenuStore()
+    // 是否已登录
+    if (appAccountStore.isLogin) {
+      // 是否已根据权限动态生成并注册路由
+      if (appRouteStore.isGenerate) {
+        // 导航菜单如果不是 single 模式，则需要根据 path 定位主导航菜单的选中状态
+        appSettingsStore.settings.menu.mode !== 'single' && appMenuStore.setActived(to.path)
+        // 如果已登录状态下，进入登录页会强制跳转到主页
+        if (to.name === 'login') {
+          return {
+            path: appSettingsStore.settings.app.home.fullPath,
+            replace: true,
+          }
+        }
+        // 如果未开启主页，但进入的是主页，则会进入侧边栏导航第一个模块
+        else if (!appSettingsStore.settings.app.home.enable && to.fullPath === appSettingsStore.settings.app.home.fullPath && appMenuStore.sidebarMenus.length > 0) {
+          return {
+            path: appMenuStore.sidebarMenusFirstDeepestPath,
+            replace: true,
+          }
+        }
+      }
+      else {
+        try {
+          // 获取用户权限
+          appSettingsStore.settings.app.account.auth && await appAccountStore.getPermissions()
+          // 生成动态路由
+          switch (appSettingsStore.settings.app.routeBaseOn) {
+            case 'frontend':
+              appRouteStore.generateRoutesAtFront(asyncRoutes)
+              break
+            case 'backend':
+              await appRouteStore.generateRoutesAtBack()
+              break
+          }
+          // 注册并记录路由数据
+          // 记录的数据会在登出时会使用到，不使用 router.removeRoute 是考虑配置的路由可能不一定有设置 name ，则通过调用 router.addRoute() 返回的回调进行删除
+          const removeRoutes: (() => void)[] = []
+          appRouteStore.routes.forEach((route) => {
+            if (!/^(?:https?:|mailto:|tel:)/.test(route.path)) {
+              removeRoutes.push(router.addRoute(route))
+            }
+          })
+          appRouteStore.systemRoutes.forEach((route) => {
+            removeRoutes.push(router.addRoute(route))
+          })
+          appRouteStore.setCurrentRemoveRoutes(removeRoutes)
+        }
+        catch {}
+        // 动态路由生成并注册后，重新进入当前路由
+        return {
+          path: to.path,
+          query: to.query,
+          replace: true,
+        }
+      }
+    }
+    else {
+      if (to.name !== 'login') {
+        return {
+          name: 'login',
+          query: {
+            redirect: to.fullPath !== appSettingsStore.settings.app.home.fullPath ? to.fullPath : undefined,
+          },
+        }
+      }
+    }
+  })
+}
+
+// 当父级路由未配置重定向时，自动重定向到有访问权限的子路由
+function setupRedirectAuthChildrenRoute(router: Router) {
+  router.beforeEach((to) => {
+    const { auth } = useAppAuth()
+    const currentRoute = router.getRoutes().find(route => route.path === (to.matched.at(-1)?.path ?? ''))
+    if (!currentRoute?.redirect) {
+      const findAuthRoute = currentRoute?.children?.find(route => route.meta?.menu !== false && auth(route.meta?.auth ?? ''))
+      if (findAuthRoute) {
+        return findAuthRoute
+      }
+    }
+  })
+}
+
+// 进度条
+function setupProgress(router: Router) {
+  const { isLoading } = useNProgress()
+  router.beforeEach(() => {
+    const appSettingsStore = useAppSettingsStore()
+    if (appSettingsStore.settings.page.progress) {
+      isLoading.value = true
+    }
+  })
+  router.afterEach(() => {
+    const appSettingsStore = useAppSettingsStore()
+    if (appSettingsStore.settings.page.progress) {
+      isLoading.value = false
+    }
+  })
+}
+// 标题
+function setupTitle(router: Router) {
+  router.afterEach((to) => {
+    const appSettingsStore = useAppSettingsStore()
+    appSettingsStore.setTitle(to.matched?.at(-1)?.meta?.title ?? to.meta.title)
+  })
+}
+
+// 页面保活
+function setupKeepAlive(router: Router) {
+  router.afterEach(async (to, from) => {
+    const appKeepAliveStore = useAppKeepAliveStore()
+    if (to.meta.keepAlive) {
+      const componentName = to.matched.at(-1)?.components?.default.name
+      if (componentName) {
+        // 保活当前页面前，先判断是否需要清除保活，判断依据：
+        // 1. 如果 to.meta.keepAlive 为 boolean 类型，并且不为 true，则需要清除保活
+        // 2. 如果 to.meta.keepAlive 为 string 类型，并且与 from.name 不一致，则需要清除保活
+        // 3. 如果 to.meta.keepAlive 为 array 类型，并且不包含 from.name，则需要清除保活
+        // 4. 如果 to.meta.noKeepAlive 为 string 类型，并且与 from.name 一致，则需要清除保活
+        // 5. 如果 to.meta.noKeepAlive 为 array 类型，并且包含 from.name，则需要清除保活
+        // 6. 如果是刷新页面，则需要清除保活
+        let shouldClear = false
+        if (typeof to.meta.keepAlive === 'boolean') {
+          shouldClear = !to.meta.keepAlive
+        }
+        else if (typeof to.meta.keepAlive === 'string') {
+          shouldClear = to.meta.keepAlive !== from.name
+        }
+        else if (Array.isArray(to.meta.keepAlive)) {
+          shouldClear = !to.meta.keepAlive.includes(from.name as string)
+        }
+        if (to.meta.noKeepAlive) {
+          if (typeof to.meta.noKeepAlive === 'string') {
+            shouldClear = to.meta.noKeepAlive === from.name
+          }
+          else if (Array.isArray(to.meta.noKeepAlive)) {
+            shouldClear = to.meta.noKeepAlive.includes(from.name as string)
+          }
+        }
+        if (from.name === 'reload') {
+          shouldClear = true
+        }
+        if (shouldClear) {
+          appKeepAliveStore.remove(componentName)
+          await nextTick()
+        }
+        appKeepAliveStore.add(componentName)
+      }
+      else if (import.meta.env.DEV) {
+        warnKeepAliveComponentNameMissing((to.matched.at(-1)?.components?.default as any).__file)
+      }
+    }
+  })
+}
+
+// 其他
+function setupOther(router: Router) {
+  router.afterEach(() => {
+    document.documentElement.scrollTop = 0
+  })
+}
+
+export default function setupGuards(router: Router) {
+  setupRoutes(router)
+  setupRedirectAuthChildrenRoute(router)
+  setupProgress(router)
+  setupTitle(router)
+  setupKeepAlive(router)
+  setupOther(router)
+}

apps/core-ant-design-vue/src/router/index.ts

@@ -0,0 +1,22 @@
+import { loadingFadeOut } from 'virtual:app-loading'
+import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
+import pinia from '@/store'
+import setupExtensions from './extensions'
+import setupGuards from './guards'
+// 路由相关数据
+import { constantRoutes } from './routes'
+
+const router = createRouter({
+  history: useAppSettingsStore(pinia).settings.app.routeMode === 'hash' ? createWebHashHistory() : createWebHistory(),
+  routes: constantRoutes,
+  strict: true,
+})
+
+setupGuards(router)
+setupExtensions(router)
+
+router.isReady().then(() => {
+  loadingFadeOut()
+})
+
+export default router

apps/core-ant-design-vue/src/router/modules/multilevel.menu.example.ts

@@ -0,0 +1,69 @@
+import type { RouteRecordRaw } from 'vue-router'
+
+function Layout() {
+  return import('@/layouts/index.vue')
+}
+
+const routes: RouteRecordRaw = {
+  path: '/multilevel_menu_example',
+  component: Layout,
+  name: 'multilevelMenuExample',
+  meta: {
+    title: '多级导航',
+    icon: 'i-heroicons-solid:menu-alt-3',
+  },
+  children: [
+    {
+      path: 'page',
+      name: 'multilevelMenuExample1',
+      component: () => import('@/views/multilevel_menu_example/page.vue'),
+      meta: {
+        title: '导航1',
+      },
+    },
+    {
+      path: 'level2',
+      name: 'multilevelMenuExample2',
+      meta: {
+        title: '导航2',
+      },
+      children: [
+        {
+          path: 'page',
+          name: 'multilevelMenuExample2-1',
+          component: () => import('@/views/multilevel_menu_example/level2/page.vue'),
+          meta: {
+            title: '导航2-1',
+          },
+        },
+        {
+          path: 'level3',
+          name: 'multilevelMenuExample2-2',
+          meta: {
+            title: '导航2-2',
+          },
+          children: [
+            {
+              path: 'page1',
+              name: 'multilevelMenuExample2-2-1',
+              component: () => import('@/views/multilevel_menu_example/level2/level3/page1.vue'),
+              meta: {
+                title: '导航2-2-1',
+              },
+            },
+            {
+              path: 'page2',
+              name: 'multilevelMenuExample2-2-2',
+              component: () => import('@/views/multilevel_menu_example/level2/level3/page2.vue'),
+              meta: {
+                title: '导航2-2-2',
+              },
+            },
+          ],
+        },
+      ],
+    },
+  ],
+}
+
+export default routes

apps/core-ant-design-vue/src/router/modules/ui.example.ts

@@ -5,20 +5,19 @@ function Layout() {
 }
 
 const routes: RouteRecordRaw = {
-  path: '/element_plus_example',
+  path: '/ui_example',
   component: Layout,
   meta: {
-    title: 'Element Plus',
-    icon: 'i-ep:element-plus',
+    title: 'UI',
     menu: false,
   },
   children: [
     {
       path: '',
-      name: 'elementPlusExample',
-      component: () => import('@/views/element_plus_example/index.vue'),
+      name: 'uiExample',
+      component: () => import('@/views/ui_example/index.vue'),
       meta: {
-        title: 'Element Plus',
+        title: 'UI',
         menu: false,
         breadcrumb: false,
       },