chore: release v5.5.0

将原先多级路由拍平成二级路由的模式，调整为将中间层级的component移除，保持原有数据结构

.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-feedback/SKILL.md

@@ -1,135 +0,0 @@
----
-name: fa-feedback
-description: 当用户在使用 fa-* 系列技能（如 fa-framework-settings、fa-slot-creator、fa-form-builder、fa-route-generator、fa-store-generator、fa-page-optimizer、fa-theme-customizer 等）时，在同一个目标上经历了 3 次及以上的修改仍未达到预期效果，必须触发此技能。触发信号包括：用户反复要求调整同一处配置或代码、连续说"不对"/"再改改"/"还是不行"、对同一个功能点多次提出修正意见。即使用户没有明确表示"上报"或"反馈"，只要检测到反复沟通修改的模式，就应主动触发。
----
-
-# Fantastic-admin 问题反馈
-
-当用户在使用 fa-* 系列技能时遇到反复修改仍无法达到预期的情况，这通常意味着框架本身可能存在改进空间（比如 skill 指令不够精确、框架 API 不够直观、文档缺失等）。此时应主动询问用户是否愿意将问题反馈给框架作者。
-
-## 触发条件
-
-在当前对话中，如果满足以下任一条件，则触发此技能：
-
-1. **同一目标的修改次数 >= 3 次**：用户针对同一个功能点或配置项，已经要求修改 3 次及以上
-2. **用户表达持续不满**：用户连续使用"不对"、"还是不行"、"再试试"、"跟我说的不一样"等表述
-3. **循环修改模式**：修改 A -> 改回 -> 再改 A，出现来回反复的情况
-
-## 执行流程
-
-### 第一步：分析问题
-
-回顾当前对话历史，提炼以下信息：
-
-1. **使用的技能**：用户在使用哪个 fa-* 技能
-2. **用户的原始需求**：用户最初想要实现什么
-3. **反复修改的焦点**：哪个具体的配置项/代码/功能点在被反复调整
-4. **未达预期的原因**：为什么始终无法满足用户的需求（是 skill 指令有误？框架 API 限制？还是理解偏差？）
-
-### 第二步：询问用户
-
-用以下方式询问用户（注意语气要友好自然，不要让用户感到被指责）：
-
-```
-我注意到在 [具体功能] 上我们已经来回调整了好几次，这很可能说明框架的 [skill/文档/API] 在这方面有改进空间。
-
-你是否愿意将这个问题反馈给 Fantastic-admin 的作者？这有助于改进框架，让以后的使用体验更好。
-
-如果你同意，我会帮你整理一份精简的问题描述，然后打开 GitHub Discussions 页面，内容会自动填好，你只需要检查一下就可以提交。
-```
-
-- 如果用户**同意**，继续第三步
-- 如果用户**拒绝**，尊重用户的决定，继续协助解决当前问题，不再提及反馈
-
-### 第三步：整理反馈内容
-
-生成精简的反馈报告，格式如下：
-
-**标题**（简洁明了，一句话概括问题）：
-```
-[技能名称] 在 [场景] 下无法正确 [操作]
-```
-
-**正文**（使用 Markdown 格式）：
-```markdown
-## 问题描述
-
-[一句话说明用户想做什么，以及遇到了什么问题]
-
-## 使用的技能
-
-[fa-xxx-xxx]
-
-## 复现步骤
-
-1. [用户的原始请求]
-2. [第一次修改及结果]
-3. [后续修改及结果]
-
-## 期望行为
-
-[用户期望的结果是什么]
-
-## 实际行为
-
-[实际发生了什么，为什么不符合预期]
-
-## 可能的原因
-
-[基于分析，推测问题可能出在哪里，比如 skill 指令、框架 API、默认配置等]
-```
-
-内容整理原则：
-- **精简**：只保留关键信息，去掉对话中的冗余内容
-- **客观**：描述事实，不添加情绪化表达
-- **可操作**：让框架作者看到后能理解问题并采取行动
-
-### 第四步：生成链接并打开
-
-将整理好的标题和正文通过 URL 参数编码，拼接到 GitHub Discussions 链接中：
-
-```
-https://github.com/orgs/fantastic-admin/discussions/new?category=通用&title={编码后的标题}&body={编码后的正文}
-```
-
-使用以下方式生成并打开链接：
-
-```bash
-# 生成 URL 编码的链接并打开
-python3 -c "
-import urllib.parse
-import subprocess
-
-title = '''在此填入标题'''
-body = '''在此填入正文'''
-
-params = urllib.parse.urlencode({
-    'category': '通用',
-    'title': title,
-    'body': body
-}, quote_via=urllib.parse.quote)
-
-url = f'https://github.com/orgs/fantastic-admin/discussions/new?{params}'
-print(f'链接已生成：{url}')
-subprocess.run(['open', url])
-"
-```
-
-打开链接后，告诉用户：
-
-```
-已在浏览器中打开 GitHub Discussions 页面。请检查预填的内容是否准确，确认无误后点击提交即可。
-
-如果页面中的标题和内容没有自动填充（GitHub Discussions 可能不支持 URL 参数预填），你可以手动复制以下内容：
-
-**标题**：[标题内容]
-
-**内容**：
-[正文内容]
-```
-
-始终同时展示原文内容作为备选方案，确保用户无论 URL 参数是否生效都能顺利提交反馈。
-
-### 第五步：继续协助
-
-反馈流程完成后，继续协助用户解决当前的问题，不要因为反馈流程中断用户的工作。

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

@@ -1,88 +0,0 @@
----
-name: fa-form-builder
-description: "为 Fantastic-admin 框架生成独立的表单页面，使用 vee-validate + zod 验证，全部使用框架内建 Fa* 组件。当用户说：'帮我做一个用户信息填写页'、'我只需要一个提交表单，不需要列表'、'做个设置页面，有几个输入框和保存按钮'、'生成一个注册/编辑/配置表单页'、'只要表单页，不需要增删改查'，即使用户只是说'做个表单页面'也应触发此技能。"
----
-
-# 表单页面生成器
-
-在 Fantastic-admin 框架中生成独立的 Router 表单页面，使用 vee-validate + zod 完成表单验证，全部使用框架内建 Fa* 组件，不引入任何 Element Plus 组件。
-
-**生成的文件：**
-- `apps/<app>/src/views/{path}/{name}/index.vue` — 表单页面（含验证、提交骨架、固定操作栏）
-
----
-
-## 第一步：确认工作区（必须阻塞等待用户回复）
-
-本项目是 monorepo 架构，`apps/` 目录下存放各应用。**在执行任何文件读写操作之前**，必须先确认目标应用：
-
-1. 执行 `ls apps/` 列出所有可用应用
-2. **立即向用户提问**，明确询问要在哪个应用中生成表单页面，并**停止等待回复**
-3. 收到用户明确回复后，才能继续后续步骤
-
-> **严格规则**：如果用户没有在请求中明确说明目标应用（例如"在 example 应用中"、"apps/core"），则必须提问，不得自行猜测或默认选择任何应用。
-
-确认后，后续所有文件路径均以该应用目录为根。
-
----
-
-## 工作流程
-
-### Step 1：收集基本信息
-
-向用户询问（可合并为一次提问）：
-
-1. **模块名**（英文，用于文件路径，如 `user`、`profile`、`setting`）
-2. **模块中文名**（用于页面标题，如 `用户信息`、`个人资料`）
-3. **存放路径**（在 `apps/<app>/src/views/` 下的子目录，如 `system`、`account`，留空则直接放在 `src/views/` 下）
-
-### Step 2：收集字段信息
-
-询问用户该表单有哪些字段，每个字段需要：
-- **字段名**（英文，如 `name`、`avatar`、`status`）
-- **中文标签**（如 `姓名`、`头像`、`状态`）
-- **字段类型**（见 references/templates.md 中的字段类型映射表）
-- **是否必填**
-
-如果用户没有提供字段信息，使用默认字段 `title`（标题，string，必填）作为示例占位，并在生成后提示用户替换。
-
-### Step 3：判断布局
-
-字段较多时单列会导致页面过长，双列更紧凑。根据字段数量和复杂度判断是否询问用户布局偏好：
-
-- **单列**：`max-w-600px`，`space-y-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 模块，请手动创建。
-
----
-
-## 命名规范
-
-给定模块名 `name` 和路径 `path`（相对于 `apps/<app>/src/views/`）：
-
-| 用途 | 规则 | 示例（path=system, name=user） |
-|------|------|-------------------------------|
-| 视图目录 | `apps/<app>/src/views/{path}/{name}/` | `apps/<app>/src/views/system/user/` |
-| 组件名 | `PascalCase({path}-{name}-form)` | `SystemUserForm` |
-
----
-
-## 代码模板
-
-详细的代码模板和字段类型映射表见 [references/templates.md](references/templates.md)。
-
-生成代码时替换模板中的占位符：
-- `{cname}` → 模块中文名
-- `{componentName}` → PascalCase 组件名
-- `{zodSchema}` → zod 字段定义（每个必填字段对应一行 zod 规则）
-- `{initialValues}` → 字段初始值（string 默认 `''`，boolean 默认 `false`，number 默认 `0`，array 默认 `[]`）
-- `{formItems}` → 各字段对应的 FormField 代码片段
-- `{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`
-
-生成的代码是骨架：API 调用处用 `// TODO:` 注释标记，动态数据源（select options、upload action 等）用占位注释标记，用户根据实际接口替换。操作栏按钮使用 `FaButton`：取消用 `variant="outline"`，提交用默认 variant 并传 `:loading="isSubmitting"`。

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

@@ -1,286 +0,0 @@
-# 表单页面代码模板
-
-使用 vee-validate + zod 验证，全部使用 Fa* 内建组件，不引入任何 Element Plus 组件。
-
-占位符说明：
-- `{cname}` — 模块中文名
-- `{componentName}` — 组件名（PascalCase）
-- `{zodSchema}` — zod 字段定义
-- `{initialValues}` — 表单初始值
-- `{formItems}` — FormField 列表
-- `{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`
-
----
-
-## index.vue 模板
-
-```vue
-<script setup lang="ts">
-import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
-import * as z from 'zod'
-import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/ui/shadcn/ui/form'
-{imports}
-
-defineOptions({
-  name: '{componentName}',
-})
-
-const router = useRouter()
-
-const formSchema = toTypedSchema(z.object({
-  {zodSchema}
-}))
-
-const { handleSubmit, isSubmitting } = useForm({
-  validationSchema: formSchema,
-  initialValues: {
-    {initialValues}
-  },
-})
-
-const loading = ref(false)
-
-const onSubmit = handleSubmit(async (values) => {
-  // TODO: 调用 API，如 apiXxx.create(values) 或 apiXxx.edit(values)
-})
-
-function handleCancel() {
-  router.back()
-}
-</script>
-
-<template>
-  <div>
-    <FaPageHeader title="{cname}" />
-    <FaPageMain>
-      <div v-loading="loading" class="mx-auto {maxWidth}">
-        <form class="{gridClass}" @submit="onSubmit">
-          {formItems}
-        </form>
-      </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>
-    </FaFixedBar>
-  </div>
-</template>
-```
-
----
-
-## 各字段类型的 FormField 片段
-
-```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>
-
-<!-- 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>
-
-<!-- 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>
-
-<!-- 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>
-<!-- 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>
-
-<!-- FaCheckbox（多选，手动维护数组） -->
-<FormField v-slot="{ value, handleChange }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
-    <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))"
-      >
-        {{ opt.label }}
-      </FaCheckbox>
-    </div>
-    <FormMessage />
-  </FormItem>
-</FormField>
-<!-- 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>
-
-<!-- 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>
-
-<!-- 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>
-
-<!-- FaIconPicker -->
-<FormField v-slot="{ componentField }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
-    <FormControl>
-      <FaIconPicker v-bind="componentField" />
-    </FormControl>
-    <FormMessage />
-  </FormItem>
-</FormField>
-
-<!-- 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>
-
-<!-- 双列布局中需要占满整行的字段，加 md:col-span-2 -->
-<!-- <FormField ... class="md:col-span-2"><FormItem class="md:col-span-2"> -->
-```
-
----
-
-## zod 验证规则片段
-
-```typescript
-// 必填文本
-{field}: z.string().min(1, '请输入{label}'),
-
-// 必填文本 + 最大长度
-{field}: z.string().min(1, '请输入{label}').max(50, '最多50个字符'),
-
-// 必填数字（最小值）
-{field}: z.number({ message: '请输入{label}' }).min(0.01, '最小值为0.01'),
-
-// 必填选择（string）
-{field}: z.string().min(1, '请选择{label}'),
-
-// 必填选择（number）
-{field}: z.number({ message: '请选择{label}' }),
-
-// 布尔（开关，非必填）
-{field}: z.boolean(),
-
-// 数组（多选，非必填）
-{field}: z.array(z.string()),
-
-// 图片上传（string[]，必填至少一张）
-{field}: z.array(z.string()).min(1, '请上传{label}'),
-
-// 非必填文本
-{field}: z.string().optional(),
-```
-
----
-
-## 需要手动 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'
-```
-
----
-
-## 字段类型映射表
-
-根据用户描述的关键词选择对应组件：
-
-| 用户描述关键词 | 生成组件 | 备注 |
-|---|---|---|
-| 文本、名称、标题、账号、邮箱、手机 | `FaInput` | 默认文本输入 |
-| 密码 | `FaInput type="password"` | 自动添加 FaPasswordStrength |
-| 多行、描述、备注、内容、简介 | `FaTextarea` | |
-| 下拉、选择、类型、分类、状态（枚举值） | `FaSelect` | 生成 options 数组占位 |
-| 开关、启用、禁用、是否、boolean | `FaSwitch` | |
-| 复选、多选 | `FaCheckbox`（多个） | 每个选项一个 FaCheckbox，手动维护数组 |
-| 日期 | 原生 `<input type="date">` | 暂无 Fa 内建日期选择器 |
-| 日期时间 | 原生 `<input type="datetime-local">` | |
-| 图片、头像、封面、缩略图 | `FaImageUpload` | |
-| 文件、附件 | `FaFileUpload` | |
-| 图标 | `FaIconPicker` | |
-| 数字、金额、数量、年龄 | `FaNumberField` | |
-
-字段类型不明确时，默认使用 `FaInput`。

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

@@ -1,43 +0,0 @@
----
-name: fa-framework-settings
-description: 管理和配置 Fantastic-admin 框架设置。当用户提到以下任何需求时必须使用此技能：开启/关闭水印、锁屏、错误日志、更新检查、哀悼模式、移动端访问；切换暗色/亮色/跟随系统主题；修改菜单模式（侧边栏/顶部/精简/面板）；配置标签栏风格（fashion/card/square）；启用/禁用工具栏功能（收藏夹、面包屑、搜索、通知、国际化、全屏、刷新）；设置版权信息；配置认证/权限/登录过期；调整页面切换动画；配置居中布局；修改路由模式；以及任何涉及 src/settings/index.ts 的修改。
----
-
-# 框架设置
-
-## 第一步：确认工作区（必须阻塞等待用户回复）
-
-本项目是 monorepo 架构，`apps/` 目录下存放各应用。**在执行任何文件读写操作之前**，必须先确认目标应用：
-
-1. 执行 `ls apps/` 列出所有可用应用
-2. **立即向用户提问**，明确询问要在哪个应用中修改设置，并**停止等待回复**
-3. 收到用户明确回复后，才能继续后续步骤
-
-> **严格规则**：如果用户没有在请求中明确说明目标应用（例如"在 example 应用中"、"apps/core"），则必须提问，不得自行猜测或默认选择任何应用。
-
-确认后，后续所有文件路径均以该应用目录为根，例如 `apps/<app>/src/settings.ts`。
-
-## 核心文件
-
-- `apps/<app>/src/settings.ts` - 当前配置文件（修改此文件）
-- `packages/settings/types.ts` - TypeScript 类型定义（只读参考）
-- `packages/settings/src/default.ts` - 默认完整配置（禁止修改，仅供参考）
-
-## 工作流程
-
-1. 读取 `apps/<app>/src/settings.ts` 了解当前配置
-2. 查阅 `packages/settings/types.ts` 中的类型定义了解可用选项
-3. 查阅 `packages/settings/src/default.ts` 了解默认值
-4. 仅修改 `apps/<app>/src/settings.ts`
-5. 修改后检查：与默认值相同的配置项直接移除——`settings.ts` 只需保留真正自定义的内容，框架会自动继承默认配置，这样维护时一眼就能看出哪些是项目定制的
-
-## 配置领域
-
-详细配置选项请参考：
-- **应用设置**: [references/app-settings.md](references/app-settings.md) - 认证、路由、功能开关、布局、主页、版权等
-- **主题设置**: [references/theme-settings.md](references/theme-settings.md) - 颜色方案、主题同步、圆角、色弱模式等
-- **导航菜单设置**: [references/menu-settings.md](references/menu-settings.md) - 导航菜单模式、风格、展开/收起行为、快捷键等
-- **顶栏设置**: [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 保活、切换动画、进度条等

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

@@ -1,210 +0,0 @@
-# 应用设置 (app)
-
-## 目录
-- [认证配置 (auth)](#认证配置-auth)
-- [路由配置](#路由配置)
-- [功能开关](#功能开关)
-- [布局配置 (layout)](#布局配置-layout)
-- [主页配置 (home)](#主页配置-home)
-- [版权配置 (copyright)](#版权配置-copyright)
-- [偏好设置 (preferences)](#偏好设置-preferences)
-
-## 认证配置 (auth)
-
-### permission
-- **类型**: `boolean`
-- **默认值**: `false`
-- **说明**: 是否开启权限功能,控制是否启用权限验证功能
-
-### expiredMode
-- **类型**: `'redirect' | 'popup'`
-- **默认值**: `'redirect'`
-- **说明**: 登录过期模式
-  - `'redirect'` - 跳转到登录页
-  - `'popup'` - 弹出登录窗口
-
-### multipleAccounts
-- **类型**: `boolean`
-- **默认值**: `false`
-- **说明**: 多账号管理,可同时登录多个账号,方便快速切换
-
-**示例:**
-```typescript
-app: {
-  auth: {
-    permission: true,
-    expiredMode: 'redirect',
-    multipleAccounts: true,
-  }
-}
-```
-
-## 路由配置
-
-### routeMode
-- **类型**: `'hash' | 'html5'`
-- **默认值**: `'hash'`
-- **说明**: 设置应用的路由模式
-  - `'hash'` - Hash 模式
-  - `'html5'` - HTML5 模式
-
-### routeBaseOn
-- **类型**: `'frontend' | 'backend'
-- **默认值**: `'frontend'`
-- **说明**: 指定路由数据的来源方式
-  - `'frontend'` - 前端
-  - `'backend'` - 后端
-
-## 功能开关
-
-### dynamicTitle
-- **类型**: `boolean`
-- **默认值**: `false`
-- **说明**: 控制是否启用动态页面标题功能
-
-### watermark
-- **类型**: `boolean`
-- **默认值**: `false`
-- **说明**: 控制是否在页面上显示水印
-
-### feedback
-- **类型**: `boolean`
-- **默认值**: `false`
-- **说明**: 控制是否启用用户反馈功能
-
-### lockScreen
-- **类型**: `boolean`
-- **默认值**: `false`
-- **说明**: 控制是否启用锁屏功能
-
-### errorLog
-- **类型**: `boolean`
-- **默认值**: `false`
-- **说明**: 是否在非开发环境开启错误日志功能,具体业务代码在 `/src/utils/errorLog.ts`
-
-### checkUpdates
-- **类型**: `boolean`
-- **默认值**: `false`
-- **说明**: 控制是否启用应用更新检查功能
-
-### rip
-- **类型**: `boolean`
-- **默认值**: `false`
-- **说明**: 哀悼模式,开启后网站将会整体变灰
-
-### mobile
-- **类型**: `boolean`
-- **默认值**: `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
-- **类型**: `boolean`
-- **默认值**: `true`
-- **说明**: 是否开启主页功能
-
-### title
-- **类型**: `string`
-- **默认值**: `'主页'`
-- **说明**: 主页的标题
-
-### fullPath
-- **类型**: `string`
-- **默认值**: `'/'`
-- **说明**: 主页的完整路由路径
-
-**示例:**
-```typescript
-app: {
-  home: {
-    enable: true,
-    title: 'app.route.home',
-    fullPath: '/',
-  }
-}
-```
-
-## 版权配置 (copyright)
-
-### enable
-- **类型**: `boolean`
-- **默认值**: `false`
-- **说明**: 是否开启版权信息显示,同时在路由 meta 对象里可以单独设置某个路由是否显示底部版权信息
-
-### dates
-- **类型**: `string`
-- **默认值**: `''`
-- **说明**: 网站运行日期
-
-### company
-- **类型**: `string`
-- **默认值**: `''`
-- **说明**: 版权信息中显示的公司名称
-
-### website
-- **类型**: `string`
-- **默认值**: `''`
-- **说明**: 版权信息中显示的网站地址
-
-**示例:**
-```typescript
-app: {
-  copyright: {
-    enable: true,
-    dates: '2020-present',
-    company: 'Fantastic-admin',
-    website: 'https://fantastic-admin.hurui.me',
-  }
-}
-```
-
-## 偏好设置 (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

@@ -1,132 +0,0 @@
-# 导航菜单设置 (menu)
-
-## 目录
-- [导航菜单模式 (mode)](#导航菜单模式-mode)
-- [导航菜单风格 (style)](#导航菜单风格-style)
-- [暗色模式 (dark)](#暗色模式-dark)
-- [主导航点击模式 (mainMenuClickMode)](#主导航点击模式-mainmenuclickmode)
-- [次导航展开行为](#次导航展开行为)
-- [快捷键 (hotkeys)](#快捷键-hotkeys)
-
-## 导航菜单模式 (mode)
-
-- **类型**: `'side' | 'head' | 'single' | 'only-side' | 'only-head' | 'side-panel' | 'head-panel'`
-- **默认值**: `'side'`
-- **说明**: 设置导航菜单的显示模式
-  - `'side'` - 侧边栏模式(有主导航菜单)
-  - `'head'` - 顶部模式
-  - `'single'` - 侧边栏模式(无主导航菜单)
-  - `'only-side'` - 侧边栏精简模式
-  - `'only-head'` - 顶部精简模式
-  - `'side-panel'` - 侧边栏面板模式
-  - `'head-panel'` - 顶部面板模式
-
-## 导航菜单风格 (style)
-
-- **类型**: `'' | 'arrow' | 'line' | 'dot'`
-- **默认值**: `''`
-- **说明**: 设置导航菜单的视觉风格
-  - `''` - 默认风格
-  - `'arrow'` - 箭头风格
-  - `'line'` - 线条风格
-  - `'dot'` - 圆点风格
-
-## 暗色模式 (dark)
-
-- **类型**: `boolean`
-- **默认值**: `false`
-- **说明**: 仅在亮色模式下生效,控制导航菜单是否使用暗色主题
-
-## 主导航菜单点击模式 (mainMenuClickMode)
-
-- **类型**: `'switch' | 'jump' | 'smart'`
-- **默认值**: `'switch'`
-- **说明**: 设置主导航菜单项的点击行为
-  - `'switch'` - 切换
-  - `'jump'` - 跳转
-  - `'smart'` - 智能选择,判断次导航是否只有且只有一个可访问的菜单进行切换或跳转操作
-
-## 次导航菜单展开行为
-
-### subMenuUniqueExpand
-
-- **类型**: `boolean`
-- **默认值**: `true`
-- **说明**: 次导航菜单是否只保持一个子项的展开
-
-### subMenuCollapse
-
-- **类型**: `boolean`
-- **默认值**: `false`
-- **说明**: 次导航菜单是否收起
-
-### subMenuAutoCollapse
-
-- **类型**: `boolean`
-- **默认值**: `false`
-- **说明**: 次导航菜单是否自动收起
-
-### subMenuCollapseButton
-
-- **类型**: `boolean`
-- **默认值**: `false`
-- **说明**: 是否开启次导航菜单的展开/收起按钮
-
-## 快捷键 (hotkeys)
-
-- **类型**: `boolean`
-- **默认值**: `false`
-- **说明**: 控制是否启用导航菜单相关的快捷键功能
-
-## 完整示例
-
-```typescript
-menu: {
-  mode: 'side',
-  style: 'dot',
-  dark: false,
-  mainMenuClickMode: 'switch',
-  subMenuUniqueExpand: true,
-  subMenuCollapse: false,
-  subMenuAutoCollapse: false,
-  subMenuCollapseButton: true,
-  hotkeys: true,
-}
-```
-
-## 常见配置
-
-**顶部导航菜单模式:**
-```typescript
-menu: {
-  mode: 'head',
-}
-```
-
-**侧边栏精简模式:**
-```typescript
-menu: {
-  mode: 'only-side',
-}
-```
-
-**启用暗色导航菜单(仅亮色模式下):**
-```typescript
-menu: {
-  dark: true,
-}
-```
-
-**智能主导航菜单点击:**
-```typescript
-menu: {
-  mainMenuClickMode: 'smart',
-}
-```
-
-**启用次导航菜单收起按钮:**
-```typescript
-menu: {
-  subMenuCollapseButton: true,
-}
-```

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

@@ -1,78 +0,0 @@
-# 页面设置 (page)
-
-## 目录
-- [快捷键 (hotkeys)](#快捷键-hotkeys)
-- [iframe 页面最大保活数量 (iframeKeepAliveMax)](#iframe-页面最大保活数量-iframekeepalivemax)
-- [页面切换动画 (transitionMode)](#页面切换动画-transitionmode)
-- [载入进度条 (progress)](#载入进度条-progress)
-
-## 快捷键 (hotkeys)
-
-- **类型**: `boolean`
-- **默认值**: `true`
-- **说明**: 控制是否启用页面相关的快捷键功能
-
-## iframe 页面最大保活数量 (iframeKeepAliveMax)
-
-- **类型**: `number`
-- **默认值**: `3`
-- **说明**: 设置 iframe 页面的最大保活数量
-
-## 页面切换动画 (transitionMode)
-
-- **类型**: `'' | 'fade' | 'slide-left' | 'slide-right' | 'slide-top' | 'slide-bottom'`
-- **默认值**: `''`
-- **说明**: 设置页面切换时的动画效果
-  - `''` - 无动画
-  - `'fade'` - 淡入淡出
-  - `'slide-left'` - 向左滑动
-  - `'slide-right'` - 向右滑动
-  - `'slide-top'` - 向上滑动
-  - `'slide-bottom'` - 向下滑动
-
-## 载入进度条 (progress)
-
-- **类型**: `boolean`
-- **默认值**: `true`
-- **说明**: 控制是否显示页面载入进度条
-
-## 完整示例
-
-```typescript
-page: {
-  hotkeys: true,
-  iframeKeepAliveMax: 3,
-  transitionMode: 'fade',
-  progress: true,
-}
-```
-
-## 常见配置
-
-**启用页面切换动画:**
-```typescript
-page: {
-  transitionMode: 'slide-right',
-}
-```
-
-**增加 iframe 保活数量:**
-```typescript
-page: {
-  iframeKeepAliveMax: 9,
-}
-```
-
-**禁用进度条:**
-```typescript
-page: {
-  progress: false,
-}
-```
-
-**禁用快捷键:**
-```typescript
-page: {
-  hotkeys: false,
-}
-```

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

@@ -1,108 +0,0 @@
-# 标签栏设置 (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`
-- **默认值**: `false`
-- **说明**: 控制是否启用标签栏相关的快捷键功能
-
-## 完整示例
-
-```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,96 +0,0 @@
-# 主题设置 (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' | ''`
-- **默认值**: `'light'`
-- **说明**: 设置应用的颜色方案
-  - `'light'` - 明亮模式
-  - `'dark'` - 暗黑模式
-  - `''` - 跟随系统
-
-## 圆角系数 (radius)
-
-- **类型**: `number`
-- **默认值**: `0.5`
-- **说明**: 设置界面元素的圆角大小,取值范围 0 到 1
-  - `0` - 无圆角(方形)
-  - `0.5` - 中等圆角
-  - `1` - 最大圆角
-
-## 色弱模式 (colorAmblyopia)
-
-- **类型**: `boolean`
-- **默认值**: `false`
-- **说明**: 启用色弱友好的颜色方案
-
-## 完整示例
-
-```typescript
-theme: {
-  sync: true,
-  light: 'default',
-  dark: 'default',
-  colorScheme: 'light',
-  radius: 0.5,
-  colorAmblyopia: false,
-}
-```
-
-## 常见配置
-
-**启用暗色模式:**
-```typescript
-theme: {
-  colorScheme: 'dark',
-}
-```
-
-**跟随系统颜色方案:**
-```typescript
-theme: {
-  colorScheme: '',
-}
-```
-
-**使用不同的亮色和暗色主题:**
-```typescript
-theme: {
-  sync: false,
-  light: 'default',
-  dark: 'custom-dark',
-}
-```
-
-**调整圆角:**
-```typescript
-theme: {
-  radius: 0.8,  // 更圆润的界面
-}
-```

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

@@ -1,82 +0,0 @@
-# 工具栏设置 (toolbar)
-
-## 目录
-- [面包屑导航 (breadcrumb)](#面包屑导航-breadcrumb)
-- [导航搜索 (menuSearch)](#导航搜索-menusearch)
-- [全屏功能 (fullscreen)](#全屏功能-fullscreen)
-- [页面刷新 (pageReload)](#页面刷新-pagereload)
-- [颜色主题切换 (colorScheme)](#颜色主题切换-colorscheme)
-
-## 面包屑导航 (breadcrumb)
-
-- **类型**: `boolean`
-- **默认值**: `true`
-- **说明**: 控制是否显示面包屑导航
-
-## 导航搜索 (menuSearch)
-
-### enable
-- **类型**: `boolean`
-- **默认值**: `true`
-- **说明**: 控制是否启用菜单搜索功能
-
-### hotkeys
-- **类型**: `boolean`
-- **默认值**: `true`
-- **说明**: 控制是否启用导航搜索的快捷键
-
-**示例:**
-```typescript
-toolbar: {
-  menuSearch: {
-    enable: true,
-    hotkeys: true,
-  }
-}
-```
-
-## 全屏功能 (fullscreen)
-
-- **类型**: `boolean`
-- **默认值**: `false`
-- **说明**: 控制是否启用全屏切换功能
-
-## 页面刷新 (pageReload)
-
-- **类型**: `boolean`
-- **默认值**: `false`
-- **说明**: 控制是否启用页面刷新功能
-
-## 颜色主题切换 (colorScheme)
-
-- **类型**: `boolean`
-- **默认值**: `false`
-- **说明**: 控制是否启用颜色主题切换功能
-
-## 完整示例
-
-```typescript
-toolbar: {
-  breadcrumb: true,
-  menuSearch: {
-    enable: true,
-    hotkeys: true,
-  },
-  fullscreen: true,
-  pageReload: true,
-  colorScheme: true,
-}
-```
-
-## 常见配置
-
-**启用所有工具栏功能:**
-```typescript
-toolbar: {
-  breadcrumb: true,
-  menuSearch: { enable: true },
-  fullscreen: true,
-  pageReload: true,
-  colorScheme: true,
-}
-```

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

@@ -1,78 +0,0 @@
-# 顶栏设置 (topbar)
-
-## 目录
-- [标签栏 (tabbar)](#标签栏-tabbar)
-- [工具栏 (toolbar)](#工具栏-toolbar)
-- [顶栏模式 (mode)](#顶栏模式-mode)
-- [切换显示位置 (switchTabbarAndToolbar)](#切换显示位置-switchtabbarandtoolbar)
-
-## 标签栏 (tabbar)
-
-- **类型**: `boolean`
-- **默认值**: `false`
-- **说明**: 控制是否在顶栏显示标签栏
-
-## 工具栏 (toolbar)
-
-- **类型**: `boolean`
-- **默认值**: `false`
-- **说明**: 控制是否在顶栏显示工具栏
-
-## 顶栏模式 (mode)
-
-- **类型**: `'static' | 'fixed' | 'sticky'`
-- **默认值**: `'static'`
-- **说明**: 设置顶栏的显示模式
-  - `'static'` - 静止,跟随页面滚动
-  - `'fixed'` - 固定,不跟随页面滚动,始终固定在顶部
-  - `'sticky'` - 粘性,页面往下滚动时隐藏,往上滚动时显示
-
-## 切换显示位置 (switchTabbarAndToolbar)
-
-- **类型**: `boolean`
-- **默认值**: `false`
-- **说明**: 控制标签栏和工具栏的显示顺序
-  - `false` - 标签栏在工具栏上面
-  - `true` - 工具栏在标签栏上面
-
-## 完整示例
-
-```typescript
-topbar: {
-  tabbar: true,
-  toolbar: true,
-  mode: 'fixed',
-  switchTabbarAndToolbar: false,
-}
-```
-
-## 常见配置
-
-**启用标签栏和工具栏:**
-```typescript
-topbar: {
-  tabbar: true,
-  toolbar: true,
-}
-```
-
-**固定顶栏:**
-```typescript
-topbar: {
-  mode: 'fixed',
-}
-```
-
-**粘性顶栏(智能显示/隐藏):**
-```typescript
-topbar: {
-  mode: 'sticky',
-}
-```
-
-**工具栏在标签栏上面:**
-```typescript
-topbar: {
-  switchTabbarAndToolbar: true,
-}
-```

.agents/skills/fa-page-optimizer/SKILL.md

@@ -1,78 +0,0 @@
----
-name: fa-page-optimizer
-description: "优化 Vue 页面，用 Fantastic-admin 框架内建组件（packages/components/）替换自定义实现和原生 HTML。当用户说：'帮我优化这个页面'、'把这些原生 HTML 换成框架组件'、'用 FaCard/FaModal/FaButton 重构一下'、'这个页面太乱了'、'统一一下 UI 风格'、'用内建组件替换自定义弹窗/分页/加载'，即使用户只是说'看看这个页面能不能改进'也应触发此技能。"
----
-
-# 页面优化器
-
-利用 Fantastic-admin 的 70+ 内建组件优化 Vue 页面，用框架组件替换自定义实现，减少重复代码，保持 UI 一致性。
-
-## 第一步：确认工作区（必须阻塞等待用户回复）
-
-本项目是 monorepo 架构，`apps/` 目录下存放各应用。**在执行任何文件读写操作之前**，必须先确认目标应用：
-
-1. 执行 `ls apps/` 列出所有可用应用
-2. **立即向用户提问**，明确询问要优化哪个应用中的页面，并**停止等待回复**
-3. 收到用户明确回复后，才能继续后续步骤
-
-> **严格规则**：如果用户没有在请求中明确说明目标应用（例如"在 example 应用中"、"apps/core"），则必须提问，不得自行猜测或默认选择任何应用。
-
-确认后，后续所有页面路径均在 `apps/<app>/src/views/` 下。
-
-## 优化工作流
-
-### 步骤 1: 分析页面，识别替换机会
-
-读取目标页面，找出三类可优化点：
-
-- **原生 HTML 元素**：`<button>`、`<input>`、`<select>`、自定义卡片 div 等
-- **重复造轮子的自定义组件**：自定义弹窗、分页、加载状态、提示消息等
-- **可简化的内联逻辑**：手动标签页切换、手动状态管理等
-
-### 步骤 2: 查找合适的框架组件
-
-先查组件目录确认有哪些可用组件：
-
-```
-Read: references/components-catalog.md
-```
-
-确定组件后，读取对应 README 了解完整 API（props、slots、events）：
-
-```
-Read: packages/components/src/<component-name>/README.md
-```
-
-README 是最权威的用法来源，不确定时优先看文档而不是猜。
-
-### 步骤 3: 参考优化模式（可选）
-
-如果不确定如何替换，查看前后对比示例：
-
-```
-Read: references/optimization-patterns.md
-```
-
-### 步骤 4: 实施替换
-
-替换时保留所有原始功能，不要改变业务逻辑。框架组件通常提供组合式函数用于编程式控制，优先使用：
-
-- `useFaModal()` — 编程式打开/关闭弹窗、confirm 确认框
-- `useFaToast()` — 显示成功/错误提示
-- `useFaLoading()` — 控制加载遮罩
-
-组件可以组合使用，例如：
-
-```vue
-<FaCard title="用户列表">
-  <FaSearchBar v-model="keyword" />
-  <FaEmpty v-if="users.length === 0" />
-  <template #footer>
-    <FaPagination :page="page" :size="size" :total="total" />
-  </template>
-</FaCard>
-```
-
-### 步骤 5: 验证
-
-Fa 组件通过 `unplugin-auto-import` 自动导入，无需手动写 import 语句。替换后确认 props 和 v-model 绑定符合组件 API。如有问题，回到 `packages/components/src/<component-name>/README.md` 核对。

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

@@ -1,293 +0,0 @@
-# Fantastic Admin 内建组件目录
-
-本文档列出所有可用的框架内建组件及其使用场景。组件位于 `packages/components/src/`。
-
-> **提示**: 每个组件目录下都有 `README.md` 使用文档，包含完整的 API 说明 (Props/Slots/Events/Methods) 和示例代码。
-> 查阅方式：`Read: packages/components/src/<component-name>/README.md`
-
-## 基础组件
-
-### FaButton
-**用途**: 按钮组件，支持多种样式和状态
-**变体**: default, destructive, outline, secondary, ghost, link
-**特性**: loading 状态、disabled 状态
-
-### FaBadge
-**用途**: 徽章标签，用于状态标识和分类
-
-### FaIcon
-**用途**: 图标组件，基于 [iconify](https://icon-sets.iconify.design/)
-**示例**: <FaIcon name="i-mdi:home" />
-
-### FaKbd / FaKbdGroup
-**用途**: 键盘按键显示组件
-
-### FaLabel
-**用途**: 表单标签组件
-
-## 布局组件
-
-### FaCard
-**用途**: 卡片容器，支持标题、描述、内容、底部插槽
-**特性**: title, description, footer slot
-
-### FaDivider
-**用途**: 分割线组件
-
-### FaLayoutContainer
-**用途**: 布局容器组件
-
-### FaPageHeader
-**用途**: 页面头部组件
-
-### FaPageMain
-**用途**: 页面主体容器
-
-### FaScrollArea
-**用途**: 滚动区域容器
-
-### FaScrollingText
-**用途**: 滚动文字特效
-
-## 表单组件
-
-### FaInput
-**用途**: 输入框组件，支持 v-model
-**特性**: placeholder, disabled 等标准输入属性
-
-### FaTextarea
-**用途**: 多行文本输入
-
-### FaCheckbox
-**用途**: 复选框组件
-
-### FaSwitch
-**用途**: 开关切换组件
-
-### FaSelect
-**用途**: 下拉选择组件
-
-### FaSlider
-**用途**: 滑块组件
-
-### FaNumberField
-**用途**: 数字输入组件
-
-### FaInputOTP
-**用途**: OTP 验证码输入组件
-
-### FaPasswordStrength
-**用途**: 密码强度显示组件
-
-### FaFileUpload
-**用途**: 文件上传组件
-
-### FaImageUpload
-**用途**: 图片上传组件
-
-### FaIconPicker
-**用途**: 图标选择器
-
-### FaSearchBar
-**用途**: 搜索栏组件
-
-### FaCascader
-**用途**: 级联选择组件，支持多级树形数据选择
-
-## 交互组件
-
-### FaModal
-**用途**: 模态对话框，支持拖拽、最大化等功能
-**特性**: maximizable, closable, draggable, alignCenter, loading, before-close
-**API**: useFaModal() 用于编程式调用
-
-### FaDrawer
-**用途**: 抽屉组件
-
-### FaDropdown
-**用途**: 下拉菜单
-
-### FaContextMenu
-**用途**: 右键上下文菜单
-
-### FaPopover
-**用途**: 弹出框组件
-
-### FaTooltip
-**用途**: 工具提示
-
-### FaHoverCard
-**用途**: 悬停卡片
-
-### FaCollapsible
-**用途**: 可折叠容器
-
-## 反馈组件
-
-### FaToast
-**用途**: 轻提示组件
-
-### FaLoading
-**用途**: 加载状态组件
-
-### FaProgress
-**用途**: 进度条组件
-
-### FaEmpty
-**用途**: 空状态组件
-
-## 数据展示组件
-
-### FaTabs
-**用途**: 标签页组件
-
-### FaTimeline
-**用途**: 时间轴组件
-
-### FaTree
-**用途**: 树形组件
-
-### FaPagination
-**用途**: 分页组件
-**特性**: page, size, total
-
-### FaAvatar
-**用途**: 头像组件
-
-### FaCarousel
-**用途**: 轮播图组件
-
-### FaImagePreview
-**用途**: 图片预览组件
-
-## 数据可视化组件
-
-### FaSparkline
-**用途**: 迷你图表组件
-
-### FaTrend
-**用途**: 趋势指示器
-
-### FaCountTo
-**用途**: 数字动画组件
-
-### FaAnimatedCountTo
-**用途**: 动画数字组件
-
-### FaAnimatedCountToGroup
-**用途**: 动画数字组组件
-
-## 特效组件
-
-### FaBorderBeam
-**用途**: 边框光束特效
-
-### FaGlowyCard / FaGlowyCardWrapper
-**用途**: 发光卡片特效
-
-### FaSpotlightCard
-**用途**: 聚光灯卡片特效
-
-### FaParticlesBg
-**用途**: 粒子背景特效
-
-### FaPatternBg
-**用途**: 图案背景
-
-### FaBlurReveal
-**用途**: 模糊揭示特效
-
-### FaAnimatedBeam
-**用途**: 动画光束特效
-
-### FaFlipCard
-**用途**: 翻转卡片
-
-### FaFlipWords
-**用途**: 翻转文字特效
-
-### FaSparklesText
-**用途**: 闪光文字特效
-
-### FaTextHighlight
-**用途**: 文字高亮特效
-
-### FaMarquee
-**用途**: 跑马灯组件
-
-### FaSmoothSwipe
-**用途**: 平滑滑动组件
-
-## 高级组件
-
-### FaButtonGroup
-**用途**: 按钮组组件
-
-### FaGradientButton
-**用途**: 渐变按钮
-
-### FaInteractiveButton
-**用途**: 交互式按钮
-
-### FaDigitalCard
-**用途**: 数字卡片
-
-### FaMultiStepLoader
-**用途**: 多步骤加载器
-
-### FaLinkPreview
-**用途**: 链接预览组件
-
-### FaTimeAgo
-**用途**: 相对时间显示
-
-### FaCode
-**用途**: 代码展示组件
-
-### FaCodePreview
-**用途**: 代码预览组件
-
-### FaQrcode
-**用途**: 二维码生成组件
-
-### FaStorageBox
-**用途**: 存储盒组件
-
-### FaScratchOff
-**用途**: 刮刮卡组件
-
-### FaBackToTop
-**用途**: 返回顶部按钮
-
-### FaFixedBar
-**用途**: 固定栏组件
-
-## 组件选择指南
-
-### 替换原生 HTML 元素
-
-| 原生元素 | 推荐组件 | 说明 |
-|---------|---------|------|
-| `<button>` | `FaButton` | 统一的按钮样式和状态管理 |
-| `<input>` | `FaInput` | 统一的输入框样式 |
-| `<textarea>` | `FaTextarea` | 统一的多行输入样式 |
-| `<select>` | `FaSelect` | 更好的下拉选择体验 |
-| `<div class="card">` | `FaCard` | 标准化的卡片布局 |
-| `<hr>` | `FaDivider` | 统一的分割线样式 |
-| `<img>` (头像) | `FaAvatar` | 头像专用组件 |
-| `<span class="badge">` | `FaBadge` | 统一的徽章样式 |
-
-### 替换常见功能实现
-
-| 功能 | 推荐组件 | 说明 |
-|------|---------|------|
-| 模态对话框 | `FaModal` | 替代自定义 modal 实现 |
-| 分页逻辑 | `FaPagination` | 替代自定义分页组件 |
-| 加载状态 | `FaLoading` | 替代自定义 loading 动画 |
-| 空状态提示 | `FaEmpty` | 替代自定义空状态页面 |
-| 消息提示 | `FaToast` | 替代 alert 或自定义提示 |
-| 标签页切换 | `FaTabs` | 替代自定义 tab 实现 |
-| 树形数据 | `FaTree` | 替代自定义树形组件 |
-| 图片预览 | `FaImagePreview` | 替代自定义图片查看器 |
-| 搜索框 | `FaSearchBar` | 替代普通 input + 搜索逻辑 |
-| 级联选择 | `FaCascader` | 替代自定义多级联动下拉选择 |

.agents/skills/fa-page-optimizer/references/optimization-patterns.md

@@ -1,604 +0,0 @@
-# 页面优化模式
-
-本文档展示如何用框架内建组件替换常见的自定义代码和原生 HTML 实现。
-
-## 基础元素替换
-
-### 按钮优化
-
-**优化前**:
-```vue
-<button class="btn btn-primary" @click="handleClick">
-  提交
-</button>
-
-<button class="custom-button" :disabled="loading">
-  <span v-if="loading">加载中...</span>
-  <span v-else>提交</span>
-</button>
-```
-
-**优化后**:
-```vue
-<FaButton @click="handleClick">
-  提交
-</FaButton>
-
-<FaButton :loading="loading">
-  提交
-</FaButton>
-```
-
-### 输入框优化
-
-**优化前**:
-```vue
-<div class="form-group">
-  <input
-    v-model="username"
-    type="text"
-    class="form-control"
-    placeholder="请输入用户名"
-  >
-</div>
-```
-
-**优化后**:
-```vue
-<FaInput v-model="username" placeholder="请输入用户名" />
-```
-
-### 卡片容器优化
-
-**优化前**:
-```vue
-<div class="card">
-  <div class="card-header">
-    <h3>卡片标题</h3>
-    <p class="text-muted">卡片描述</p>
-  </div>
-
-  <div class="card-body">
-    卡片内容
-  </div>
-
-  <div class="card-footer">
-    底部内容
-  </div>
-</div>
-```
-
-**优化后**:
-```vue
-<FaCard title="卡片标题" description="卡片描述">
-  卡片内容
-  <template #footer>
-    底部内容
-  </template>
-</FaCard>
-```
-
-## 交互组件替换
-
-### 模态对话框优化
-
-**优化前**:
-```vue
-<script setup>
-const visible = ref(false)
-const title = ref('')
-const content = ref('')
-
-function handleClose() {
-  visible.value = false
-}
-
-function handleConfirm() {
-  // 确认逻辑
-  visible.value = false
-}
-</script>
-
-<template>
-  <div v-if="visible" class="modal-overlay" @click="handleClose">
-    <div class="modal-content" @click.stop>
-      <div class="modal-header">
-        <h3>{{ title }}</h3>
-        <button class="close-btn" @click="handleClose">
-          ×
-        </button>
-      </div>
-      <div class="modal-body">
-        {{ content }}
-      </div>
-      <div class="modal-footer">
-        <button @click="handleClose">
-          取消
-        </button>
-        <button @click="handleConfirm">
-          确定
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-/* 更多样式... */
-</style>
-```
-
-**优化后**:
-```vue
-<script setup>
-const modal = ref(false)
-</script>
-
-<template>
-  <FaButton @click="modal = true">
-    打开对话框
-  </FaButton>
-  <FaModal v-model="modal" title="标题">
-    内容
-  </FaModal>
-</template>
-```
-
-### 分页组件优化
-
-**优化前**:
-```vue
-<script setup>
-const page = ref(1)
-const size = ref(10)
-const total = ref(100)
-const totalPages = computed(() => Math.ceil(total.value / size.value))
-</script>
-
-<template>
-  <div class="pagination">
-    <button :disabled="page === 1" @click="page--">
-      上一页
-    </button>
-    <span>{{ page }} / {{ totalPages }}</span>
-    <button :disabled="page === totalPages" @click="page++">
-      下一页
-    </button>
-  </div>
-</template>
-```
-
-**优化后**:
-```vue
-<FaPagination :page="page" :size="size" :total="total" />
-
-<script setup>
-const page = ref(1)
-const size = ref(10)
-const total = ref(100)
-</script>
-```
-
-## 反馈组件替换
-
-### 加载状态优化
-
-**优化前**:
-```vue
-<div v-if="loading" class="loading-overlay">
-  <div class="spinner">
-</div>
-
-  <p>
-加载中...
-</p>
-</div>
-
-<style scoped>
-.loading-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(255, 255, 255, 0.8);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.spinner {
-  /* 自定义动画 */
-}
-</style>
-```
-
-**优化后**:
-```vue
-<script setup>
-import { useFaLoading } from '@/ui/components/FaLoading'
-
-async function fetchData() {
-  const { close } = useFaLoading()
-  try {
-    await api.getData()
-  }
-  finally {
-    close()
-  }
-}
-</script>
-```
-
-### 空状态优化
-
-**优化前**:
-```vue
-<div v-if="list.length === 0" class="empty-state">
-  <img src="/empty.png" alt="空状态">
-  <p>暂无数据</p>
-</div>
-```
-
-**优化后**:
-```vue
-<FaEmpty v-if="list.length === 0" description="暂无数据" />
-```
-
-### 消息提示优化
-
-**优化前**:
-```vue
-<script setup>
-function showMessage(message: string) {
-  alert(message)
-}
-
-// 或自定义实现
-const messages = ref<string[]>([])
-function showMessage(message: string) {
-  messages.value.push(message)
-  setTimeout(() => {
-    messages.value.shift()
-  }, 3000)
-}
-</script>
-```
-
-**优化后**:
-```vue
-<script setup>
-import { useFaToast } from '@/ui/components/FaToast'
-
-const toast = useFaToast()
-
-function showMessage(message: string) {
-  toast.success(message)
-}
-</script>
-```
-
-## 表单组件替换
-
-### 复选框优化
-
-**优化前**:
-```vue
-<label class="checkbox-wrapper">
-  <input v-model="checked" type="checkbox">
-  <span>同意协议</span>
-</label>
-```
-
-**优化后**:
-```vue
-<FaCheckbox v-model="checked">
-  同意协议
-</FaCheckbox>
-```
-
-### 开关优化
-
-**优化前**:
-```vue
-<div class="switch-wrapper">
-  <input
-    v-model="enabled"
-    type="checkbox"
-    class="switch-input"
-  >
-  <span class="switch-slider"></span>
-</div>
-
-<style scoped>
-.switch-wrapper {
-  /* 自定义开关样式 */
-}
-</style>
-```
-
-**优化后**:
-```vue
-<FaSwitch v-model="enabled" />
-```
-
-### 下拉选择优化
-
-**优化前**:
-```vue
-<select v-model="selected" class="form-select">
-  <option value="">请选择</option>
-  <option v-for="item in options" :key="item.value" :value="item.value">
-    {{ item.label }}
-  </option>
-</select>
-```
-
-**优化后**:
-```vue
-<FaSelect v-model="selected" :options="options" placeholder="请选择" />
-```
-
-### 级联选择优化
-
-**优化前**:
-```vue
-<script setup>
-// 自定义多级联动下拉：需要手动管理每一层的选中状态
-const province = ref('')
-const city = ref('')
-const district = ref('')
-const cities = computed(() => getCities(province.value))
-const districts = computed(() => getDistricts(city.value))
-</script>
-
-<template>
-  <select v-model="province">
-    <option v-for="p in provinces" :key="p.value" :value="p.value">{{ p.label }}</option>
-  </select>
-  <select v-model="city" :disabled="!province">
-    <option v-for="c in cities" :key="c.value" :value="c.value">{{ c.label }}</option>
-  </select>
-  <select v-model="district" :disabled="!city">
-    <option v-for="d in districts" :key="d.value" :value="d.value">{{ d.label }}</option>
-  </select>
-</template>
-```
-
-**优化后**:
-```vue
-<script setup>
-const selected = ref<string | undefined>()
-
-const options = [
-  {
-    label: '浙江省', value: 'zj',
-    children: [
-      {
-        label: '杭州市', value: 'hz',
-        children: [
-          { label: '西湖区', value: 'xh' },
-          { label: '余杭区', value: 'yh' },
-        ],
-      },
-    ],
-  },
-]
-</script>
-
-<template>
-  <FaCascader v-model="selected" :options="options" placeholder="请选择地区" clearable />
-</template>
-```
-
-## 数据展示优化
-
-### 标签页优化
-
-**优化前**:
-```vue
-<script setup>
-const activeTab = ref('tab1')
-const tabs = [
-  { key: 'tab1', label: '标签1' },
-  { key: 'tab2', label: '标签2' },
-]
-</script>
-
-<template>
-  <div class="tabs">
-    <div class="tab-headers">
-      <div
-        v-for="tab in tabs"
-        :key="tab.key"
-        :class="{ active: activeTab === tab.key }"
-        @click="activeTab = tab.key"
-      >
-        {{ tab.label }}
-      </div>
-    </div>
-    <div class="tab-content">
-      <div v-if="activeTab === 'tab1'">
-        内容1
-      </div>
-      <div v-if="activeTab === 'tab2'">
-        内容2
-      </div>
-    </div>
-  </div>
-</template>
-```
-
-**优化后**:
-```vue
-<FaTabs v-model="activeTab" :tabs="tabs">
-  <template #tab1>内容1</template>
-  <template #tab2>内容2</template>
-</FaTabs>
-
-<script setup>
-const activeTab = ref('tab1')
-const tabs = [
-  { key: 'tab1', label: '标签1' },
-  { key: 'tab2', label: '标签2' },
-]
-</script>
-```
-
-### 头像显示优化
-
-**优化前**:
-```vue
-<div class="avatar">
-  <img v-if="user.avatar" :src="user.avatar" alt="头像">
-  <span v-else class="avatar-fallback">{{ user.name[0] }}</span>
-</div>
-
-<style scoped>
-.avatar {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  overflow: hidden;
-}
-</style>
-```
-
-**优化后**:
-```vue
-<FaAvatar :src="user.avatar" :alt="user.name" />
-```
-
-## 特效组件应用
-
-### 卡片特效增强
-
-**优化前**:
-```vue
-<div class="card">
-  <!-- 普通卡片 -->
-</div>
-```
-
-**优化后**:
-```vue
-<!-- 添加发光效果 -->
-<FaGlowyCard>
-  <!-- 卡片内容 -->
-</FaGlowyCard>
-
-<!-- 添加聚光灯效果 -->
-<FaSpotlightCard>
-  <!-- 卡片内容 -->
-</FaSpotlightCard>
-
-<!-- 添加边框光束 -->
-<FaCard>
-  <FaBorderBeam />
-  <!-- 卡片内容 -->
-</FaCard>
-```
-
-### 文字特效增强
-
-**优化前**:
-```vue
-<h1 class="title">
-欢迎使用
-</h1>
-```
-
-**优化后**:
-```vue
-<!-- 添加闪光效果 -->
-<FaSparklesText text="欢迎使用" />
-
-<!-- 添加高亮效果 -->
-<FaTextHighlight>
-欢迎使用
-</FaTextHighlight>
-
-<!-- 添加翻转效果 -->
-<FaFlipWords :words="['欢迎', 'Welcome', 'Bienvenue']" />
-```
-
-## 布局优化
-
-### 页面结构优化
-
-**优化前**:
-```vue
-<template>
-  <div class="page">
-    <div class="page-header">
-      <h1>页面标题</h1>
-      <div class="actions">
-        <button>操作</button>
-      </div>
-    </div>
-    <div class="page-content">
-      <!-- 内容 -->
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.page {
-  padding: 20px;
-}
-.page-header {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 20px;
-}
-</style>
-```
-
-**优化后**:
-```vue
-<template>
-  <FaPageHeader title="页面标题">
-    <template #actions>
-      <FaButton>操作</FaButton>
-    </template>
-  </FaPageHeader>
-  <FaPageMain>
-    <!-- 内容 -->
-  </FaPageMain>
-</template>
-```
-
-## 优化原则
-
-1. **优先使用框架组件**: 检查 `src/ui/components/` 是否有对应的内建组件
-2. **参考组件源码**: 查看组件实现了解使用方式和 API
-3. **保持功能一致**: 确保替换后的组件功能与原代码一致
-4. **简化代码**: 移除不必要的自定义样式和逻辑
-5. **统一风格**: 使用框架组件可以保持整个应用的视觉一致性
-6. **提升可维护性**: 框架组件有统一的 API 和文档，更易维护
-
-## 常见场景映射
-
-| 场景       | 原实现                 | 框架组件                      |
-| ---------- | ---------------------- | ----------------------------- |
-| 用户列表   | 自定义表格 + 分页      | FaCard + FaPagination         |
-| 表单提交   | 原生 form + input      | FaInput + FaButton + FaModal  |
-| 数据加载   | 自定义 loading         | FaLoading                     |
-| 错误提示   | alert / 自定义 toast   | FaToast                       |
-| 确认对话框 | confirm / 自定义 modal | FaModal (useFaModal)          |
-| 图片上传   | 自定义上传组件         | FaImageUpload                 |
-| 搜索功能   | input + 搜索逻辑       | FaSearchBar                   |
-| 级联选择   | 多级联动 select        | FaCascader                    |
-| 数据统计   | 自定义数字展示         | FaCountTo / FaAnimatedCountTo |
-| 趋势展示   | 自定义图表             | FaSparkline + FaTrend         |
-| 时间显示   | 自定义格式化           | FaTimeAgo                     |

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

@@ -1,118 +0,0 @@
----
-name: fa-route-generator
-description: 管理 Vue Router 路由配置，用于 Fantastic-admin 框架。当用户提到以下任何需求时必须使用此技能：新建页面需要加路由、详情页不想显示在菜单里、新增页和编辑页老是开两个标签、从列表跳详情返回后状态丢失、给菜单项加 NEW 标签或红点、路由需要权限控制、配置页面保活、修改路由 meta、添加面包屑配置。即使用户只是说"加个路由"或"新建了一个页面"，也应触发此技能。
----
-
-# 路由生成器
-
-框架通过路由自动生成导航菜单，路由配置需要遵循特定约定。
-
-## 第一步：确认工作区（必须阻塞等待用户回复）
-
-本项目是 monorepo 架构，`apps/` 目录下存放各应用。**在执行任何文件读写操作之前**，必须先确认目标应用：
-
-1. 执行 `ls apps/` 列出所有可用应用
-2. **立即向用户提问**，明确询问要在哪个应用中操作路由，并**停止等待回复**
-3. 收到用户明确回复后，才能继续后续步骤
-
-> **严格规则**：如果用户没有在请求中明确说明目标应用（例如"在 example 应用中"、"apps/core"），则必须提问，不得自行猜测或默认选择任何应用。
-
-确认后，后续所有文件路径均以该应用目录为根，例如 `apps/<app>/src/router/`。
-
-## 前置检查
-
-读取 `apps/<app>/src/settings.ts`，检查 `app.routeBaseOn` 的值：
-
-- `'frontend'`（默认）：可以继续
-- `'backend'`：路由由后端驱动，手动创建的路由文件会被忽略，告知用户此模式不支持前端路由文件生成
-
-## 工作流程
-
-### 场景 A: 创建新路由
-
-#### 1. 收集路由信息
-
-向用户询问或确认：路由路径、页面标题、图标（可选）、是否多级路由、所属主导航分组。
-
-#### 2. 创建路由文件
-
-在 `apps/<app>/src/router/modules/` 下创建 `<模块名>.ts`：
-
-```typescript
-import type { RouteRecordRaw } from 'vue-router'
-
-function Layout() {
-  return import('@/layouts/index.vue')
-}
-
-const routes: RouteRecordRaw = {
-  path: '/example',
-  component: Layout,
-  name: 'example',
-  meta: {
-    title: '示例',
-    icon: 'i-ep:menu',
-  },
-  children: [
-    {
-      path: '',
-      name: 'exampleIndex',
-      component: () => import('@/views/example/index.vue'),
-      meta: {
-        title: '示例页面',
-      },
-    },
-  ],
-}
-
-export default routes
-```
-
-#### 3. 更新 routes.ts
-
-在 `apps/<app>/src/router/routes.ts` 中添加 import 并注册到对应主导航分组的 `children` 数组。
-
-### 场景 B: 修改现有路由
-
-定位路由文件（在 `apps/<app>/src/router/modules/` 下搜索），读取后按需修改 meta 属性。常见修改：
-
-**标签页合并**（新增页/编辑页合并到同一标签，避免开多个标签）：
-```typescript
-meta: { activeMenu: '/user', tabMerge: 'activeMenu' }
-```
-
-**权限控制**：
-```typescript
-meta: { auth: 'user:view' }  // 或数组 ['user:view', 'user:edit']
-```
-
-**页面保活**（从详情返回列表时保留列表状态）：
-```typescript
-// 列表页
-meta: { keepAlive: ['productDetail'] }
-// 详情页
-meta: { menu: false, activeMenu: '/product', noKeepAlive: 'productList' }
-```
-
-**徽章**：
-```typescript
-meta: { badge: 'NEW' }  // 文字；或 [true, 'destructive'] 红点
-```
-
-**隐藏菜单项**：
-```typescript
-meta: { menu: false, activeMenu: '/parent/path' }
-```
-
-## 框架约定
-
-- 一级路由 `path` 必须以 `/` 开头，`component` 必须是 `Layout`
-- 子路由 `path` 不要以 `/` 开头
-- 多级路由的中间层级无需设置 `component`
-- 所有路由的 `name` 必须全局唯一
-
-## Meta 属性配置
-
-详细属性说明见 [references/route-meta.md](references/route-meta.md)，更多示例见 [references/examples.md](references/examples.md)。
-
-常用属性：`title`（必需）、`icon`、`menu`、`auth`、`keepAlive`、`badge`、`activeMenu`、`tabMerge`、`breadcrumb`

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

@@ -1,533 +0,0 @@
-# 路由配置示例
-
-本文档提供了各种常见场景的路由配置示例,包括创建新路由和修改现有路由。
-
-## 目录
-
-- [基础示例](#基础示例)
-- [多级路由](#多级路由)
-- [特殊场景](#特殊场景)
-- [路由配置调整](#路由配置调整)
-- [完整示例](#完整示例)
-
-## 基础示例
-
-### 单页面路由
-
-最简单的单页面路由配置:
-
-```typescript
-import type { RouteRecordRaw } from 'vue-router'
-
-function Layout() {
-  return import('@/layouts/index.vue')
-}
-
-const routes: RouteRecordRaw = {
-  path: '/dashboard',
-  component: Layout,
-  name: 'dashboard',
-  meta: {
-    title: '仪表盘',
-    icon: 'i-ep:data-line',
-  },
-  children: [
-    {
-      path: '',
-      name: 'dashboardIndex',
-      component: () => import('@/views/dashboard/index.vue'),
-      meta: {
-        title: '数据概览',
-      },
-    },
-  ],
-}
-
-export default routes
-```
-
-### 列表-详情路由
-
-常见的列表和详情页面配置:
-
-```typescript
-const routes: RouteRecordRaw = {
-  path: '/article',
-  component: Layout,
-  name: 'article',
-  meta: {
-    title: '文章管理',
-    icon: 'i-ep:document',
-  },
-  children: [
-    {
-      path: '',
-      name: 'articleList',
-      component: () => import('@/views/article/list.vue'),
-      meta: {
-        title: '文章列表',
-        keepAlive: 'articleDetail', // 从详情返回时保持列表状态
-      },
-    },
-    {
-      path: 'detail/:id?',
-      name: 'articleDetail',
-      component: () => import('@/views/article/detail.vue'),
-      meta: {
-        title: '文章详情',
-        menu: false, // 不在导航中显示
-        activeMenu: '/article', // 高亮文章管理菜单
-        keepAlive: true,
-        noKeepAlive: 'articleList', // 从列表进入时不保活
-      },
-    },
-  ],
-}
-```
-
-## 多级路由
-
-### 二级菜单
-
-```typescript
-const routes: RouteRecordRaw = {
-  path: '/system',
-  component: Layout,
-  name: 'system',
-  meta: {
-    title: '系统管理',
-    icon: 'i-ep:setting',
-  },
-  children: [
-    {
-      path: 'user',
-      name: 'systemUser',
-      component: () => import('@/views/system/user/index.vue'),
-      meta: {
-        title: '用户管理',
-        icon: 'i-ep:user',
-      },
-    },
-    {
-      path: 'role',
-      name: 'systemRole',
-      component: () => import('@/views/system/role/index.vue'),
-      meta: {
-        title: '角色管理',
-        icon: 'i-ep:avatar',
-      },
-    },
-    {
-      path: 'permission',
-      name: 'systemPermission',
-      component: () => import('@/views/system/permission/index.vue'),
-      meta: {
-        title: '权限管理',
-        icon: 'i-ep:lock',
-      },
-    },
-  ],
-}
-```
-
-### 三级菜单
-
-```typescript
-const routes: RouteRecordRaw = {
-  path: '/content',
-  component: Layout,
-  name: 'content',
-  meta: {
-    title: '内容管理',
-    icon: 'i-ep:folder',
-  },
-  children: [
-    {
-      path: 'article',
-      name: 'contentArticle',
-      meta: {
-        title: '文章管理',
-        icon: 'i-ep:document',
-      },
-      // 注意: 多级路由的中间层级不需要设置 component
-      children: [
-        {
-          path: 'list',
-          name: 'contentArticleList',
-          component: () => import('@/views/content/article/list.vue'),
-          meta: {
-            title: '文章列表',
-          },
-        },
-        {
-          path: 'category',
-          name: 'contentArticleCategory',
-          component: () => import('@/views/content/article/category.vue'),
-          meta: {
-            title: '文章分类',
-          },
-        },
-      ],
-    },
-    {
-      path: 'media',
-      name: 'contentMedia',
-      meta: {
-        title: '媒体管理',
-        icon: 'i-ep:picture',
-      },
-      children: [
-        {
-          path: 'image',
-          name: 'contentMediaImage',
-          component: () => import('@/views/content/media/image.vue'),
-          meta: {
-            title: '图片管理',
-          },
-        },
-        {
-          path: 'video',
-          name: 'contentMediaVideo',
-          component: () => import('@/views/content/media/video.vue'),
-          meta: {
-            title: '视频管理',
-          },
-        },
-      ],
-    },
-  ],
-}
-```
-
-## 特殊场景
-
-### 带权限的路由
-
-```typescript
-const routes: RouteRecordRaw = {
-  path: '/admin',
-  component: Layout,
-  name: 'admin',
-  meta: {
-    title: '管理员',
-    icon: 'i-ep:user-filled',
-    auth: 'admin', // 需要 admin 权限
-  },
-  children: [
-    {
-      path: 'users',
-      name: 'adminUsers',
-      component: () => import('@/views/admin/users.vue'),
-      meta: {
-        title: '用户列表',
-        auth: ['admin:view', 'admin:edit'], // 需要其中一个权限
-        auths: [
-          { name: '查看用户', value: 'admin:view' },
-          { name: '编辑用户', value: 'admin:edit' },
-          { name: '删除用户', value: 'admin:delete' },
-        ],
-      },
-    },
-  ],
-}
-```
-
-### 外部链接
-
-```typescript
-const routes: RouteRecordRaw = {
-  path: '/external',
-  component: Layout,
-  name: 'external',
-  meta: {
-    title: '外部链接',
-    icon: 'i-ep:link',
-  },
-  children: [
-    {
-      path: 'github',
-      name: 'externalGithub',
-      component: () => import('@/views/external/link.vue'),
-      meta: {
-        title: 'GitHub',
-        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', // 动态徽章
-      },
-    },
-  ],
-}
-```
-
-### 默认展开的路由
-
-```typescript
-const routes: RouteRecordRaw = {
-  path: '/menu',
-  component: Layout,
-  name: 'menu',
-  meta: {
-    title: '菜单示例',
-    icon: 'i-ep:menu',
-    expand: true, // 默认展开
-  },
-  children: [
-    {
-      path: 'always',
-      name: 'menuAlways',
-      meta: {
-        title: '始终展开',
-        expand: [true, true], // 默认展开且不允许收起
-      },
-      children: [
-        {
-          path: 'item1',
-          name: 'menuAlwaysItem1',
-          component: () => import('@/views/menu/item1.vue'),
-          meta: {
-            title: '菜单项 1',
-          },
-        },
-      ],
-    },
-  ],
-}
-```
-
-### 带查询参数的路由
-
-```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' }, // 点击导航时携带参数
-      },
-    },
-  ],
-}
-```
-
-## 路由配置调整
-
-### 权限配置调整
-
-**场景 1: 添加单个权限**
-
-```typescript
-// 修改前
-meta: {
-  title: '用户管理',
-}
-
-// 修改后
-meta: {
-  title: '用户管理',
-  auth: 'user:view', // 需要 user:view 权限
-}
-```
-
-**场景 2: 添加多个权限(或关系)**
-
-```typescript
-meta: {
-  title: '用户管理',
-  auth: ['user:view', 'user:edit'], // 满足其中一个即可
-}
-```
-
-### 页面保活配置
-
-**场景 1: 列表页保活配置**
-
-列表页需要在从详情页返回时保持状态。
-
-```typescript
-{
-  path: '',
-  name: 'orderList',
-  component: () => import('@/views/order/list.vue'),
-  meta: {
-    title: '订单列表',
-    keepAlive: ['orderDetail', 'orderEdit'], // 从这些页面返回时保活
-  },
-}
-```
-
-**场景 2: 详情页保活配置**
-
-详情页需要保活,但从列表页进入时不保活(确保显示最新数据)。
-
-```typescript
-{
-  path: 'detail/:id',
-  name: 'orderDetail',
-  component: () => import('@/views/order/detail.vue'),
-  meta: {
-    title: '订单详情',
-    menu: false,
-    activeMenu: '/order',
-    keepAlive: true, // 始终保活
-    noKeepAlive: 'orderList', // 从列表进入时不保活
-  },
-}
-```
-
-**场景 3: 取消保活**
-
-某些页面不需要保活,每次进入都重新加载。
-
-```typescript
-// 删除或注释掉 keepAlive 相关配置
-meta: {
-  title: '实时数据',
-  // keepAlive: true, // 删除此行
-}
-```
-
-### 导航显示调整
-
-**场景 1: 隐藏导航项**
-
-某些页面不需要在导航菜单中显示。
-
-```typescript
-meta: {
-  title: '个人设置',
-  menu: false, // 不在导航中显示
-  activeMenu: '/user', // 但高亮用户菜单
-}
-```
-
-### 面包屑配置
-
-**场景 1: 隐藏面包屑**
-
-某些页面不需要显示面包屑。
-
-```typescript
-meta: {
-  title: '登录',
-  breadcrumb: false, // 不显示面包屑
-}
-```
-
-**场景 2: 自定义面包屑高亮**
-
-```typescript
-meta: {
-  title: '编辑文章',
-  activeMenu: '/article/list', // 面包屑高亮到文章列表
-}
-```
-
-### 外部链接配置
-
-**场景 1: 在新窗口打开外部链接**
-
-```typescript
-{
-  path: 'github',
-  name: 'externalGithub',
-  component: () => import('@/views/external/link.vue'),
-  meta: {
-    title: 'GitHub',
-    link: 'https://github.com', // 在新窗口打开
-  },
-}
-```
-
-## 在 routes.ts 中的使用
-
-```typescript
-import ArticleRoute from './modules/article'
-import ContentRoute from './modules/content'
-// 1. 导入路由模块
-import DashboardRoute from './modules/dashboard'
-import SystemRoute from './modules/system'
-
-// 2. 添加到 asyncRoutes
-const asyncRoutes: Route.recordMainRaw[] = [
-  {
-    meta: {
-      title: '工作台',
-      icon: 'i-ep:monitor',
-    },
-    children: [
-      DashboardRoute,
-    ],
-  },
-  {
-    meta: {
-      title: '内容',
-      icon: 'i-ep:document',
-    },
-    children: [
-      ArticleRoute,
-      ContentRoute,
-    ],
-  },
-  {
-    meta: {
-      title: '系统',
-      icon: 'i-ep:setting',
-    },
-    children: [
-      SystemRoute,
-    ],
-  },
-]
-```

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

@@ -1,250 +0,0 @@
-# RouteMetaRaw 类型属性说明
-
-本文档详细说明了 Fantastic-admin 框架中路由 meta 对象的所有可用属性。
-
-## 目录
-
-- [权限相关](#权限相关)
-- [导航显示](#导航显示)
-- [标签页](#标签页)
-- [页面行为](#页面行为)
-- [布局](#布局)
-- [其他](#其他)
-
-## 权限相关
-
-### auths
-
-- **类型**: `Array<{ name: string, value: string }>`
-- **默认值**: `undefined`
-- **说明**: 权限池,对路由本身无实际作用,通常用于角色管理模块,展示路由可配置权限
-- **示例**:
-  ```typescript
-  auths: [
-    { name: '新闻管理(浏览)', value: 'news:view' },
-    { name: '新闻管理(编辑)', value: 'news:edit' }
-  ]
-  ```
-
-### auth
-
-- **类型**: `string | string[]`
-- **默认值**: `undefined`
-- **说明**: 路由访问权限,配置为数组时,只需满足一个即可进入
-- **示例**:
-  ```typescript
-  auth: 'news:view' // 需要具备 news:view 权限
-  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
-
-- **类型**: `string | (() => string)`
-- **默认值**: `undefined`
-- **说明**: 标题会在导航、标签页、面包屑等需要的展示位置显示
-- **示例**:
-  ```typescript
-  title: '新闻管理'
-  title: () => '动态标题'
-  ```
-
-### icon
-
-- **类型**: `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
-
-- **类型**: `boolean`
-- **默认值**: `true`
-- **说明**: 是否在导航中显示,当子导航里没有可展示的导航时,会直接显示父导航
-
-### activeMenu
-
-- **类型**: `string`
-- **默认值**: `undefined`
-- **说明**: 高亮导航,需要设置完整路由地址
-- **示例**:
-  ```typescript
-  activeMenu: '/news/list'
-  ```
-
-### expand
-
-- **类型**: `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
-
-- **类型**: `boolean | string | string[]`
-- **默认值**: `undefined`
-- **说明**: 保活,根据规则保活当前路由页面
-- **示例**:
-  ```typescript
-  keepAlive: true // 始终保活
-  keepAlive: 'news' // 访问路由name为news的页面时保活
-  keepAlive: ['news', 'user'] // 访问路由name为news或user的页面时保活
-  ```
-
-### noKeepAlive
-
-- **类型**: `string | string[]`
-- **默认值**: `undefined`
-- **说明**: 不保活,根据规则不保活当前路由页面
-- **示例**:
-  ```typescript
-  noKeepAlive: 'news' // 访问路由name为news的页面时不保活
-  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`
-- **默认值**: `undefined`
-- **说明**: 外部链接,会在浏览器新窗口访问该链接
-- **示例**:
-  ```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-slot-creator/SKILL.md

@@ -1,102 +0,0 @@
----
-name: fa-slot-creator
-description: 在 Fantastic-admin 框架中创建插槽，向布局的任意位置注入自定义内容。当用户提到以下任何需求时必须使用此技能：在头部/侧边栏/工具栏/标签栏加东西、logo 旁边加内容、侧边栏底部加用户信息、加个悬浮按钮、在导航菜单右侧加自定义组件、想在框架布局某个区域插入内容、在页面顶部或底部插入全局横幅/公告/版权栏。即使用户只是说"在顶部加个 XX"或"侧边栏加点东西"，也应触发此技能。支持 19 个插槽位置。
----
-
-# Fantastic-admin 插槽创建器
-
-框架通过约定自动发现插槽：目录名必须与插槽名完全匹配（区分大小写），文件名固定为 `index.vue`。不符合约定的文件不会被加载，这是框架的自动发现机制决定的。
-
-## 第一步：确认工作区（必须阻塞等待用户回复）
-
-本项目是 monorepo 架构，`apps/` 目录下存放各应用。**在执行任何文件读写操作之前**，必须先确认目标应用：
-
-1. 执行 `ls apps/` 列出所有可用应用
-2. **立即向用户提问**，明确询问要在哪个应用中创建插槽，并**停止等待回复**
-3. 收到用户明确回复后，才能继续后续步骤
-
-> **严格规则**：如果用户没有在请求中明确说明目标应用（例如"在 example 应用中"、"apps/core"），则必须提问，不得自行猜测或默认选择任何应用。
-
-确认后，后续所有文件路径均以该应用目录为根，例如 `apps/<app>/src/slots/`。
-
-## 创建插槽（手动步骤）
-
-1. 创建目录：`apps/<app>/src/slots/{插槽名称}/`
-2. 在该目录下创建 `index.vue` 文件，内容参考下方模板
-
-### 普通插槽模板
-
-```vue
-<script setup lang="ts">
-// 在此添加插槽逻辑
-</script>
-
-<template>
-  <div>
-    <!-- 在此添加插槽内容 -->
-  </div>
-</template>
-
-<style scoped>
-/* 在此添加插槽样式 */
-</style>
-```
-
-### FreePosition 插槽模板
-
-```vue
-<script setup lang="ts">
-// 在此添加插槽逻辑
-</script>
-
-<template>
-  <div class="free-position-slot">
-    <!-- 在此添加插槽内容 -->
-    <!-- 注意：此插槽需要绝对定位 -->
-  </div>
-</template>
-
-<style scoped>
-.free-position-slot {
-  position: absolute;
-  /* 在此设置定位坐标，例如： */
-  /* bottom: 20px; */
-  /* right: 20px; */
-  /* z-index: 1000; */
-}
-</style>
-```
-
-## 可用插槽位置
-
-| 区域 | 插槽名称 |
-|------|---------|
-| 布局 | `LayoutTop`、`LayoutBottom` |
-| 头部 | `HeaderStart`、`HeaderAfterLogo`、`HeaderAfterMenu`、`HeaderEnd` |
-| 主侧边栏 | `MainSidebarTop`、`MainSidebarAfterLogo`、`MainSidebarAfterMenu`、`MainSidebarBottom` |
-| 子侧边栏 | `SubSidebarTop`、`SubSidebarAfterLogo`、`SubSidebarAfterMenu`、`SubSidebarBottom` |
-| 标签栏 | `TabbarStart`、`TabbarEnd` |
-| 工具栏 | `ToolbarStart`、`ToolbarEnd` |
-| 自由定位 | `FreePosition` |
-
-## 选择指南
-
-- 全局顶部横幅/公告（覆盖整个布局最上方） → `LayoutTop`
-- 全局底部栏/版权声明（覆盖整个布局最下方） → `LayoutBottom`
-- 全局导航元素 → `HeaderStart` / `HeaderEnd`
-- 侧边栏用户信息/品牌内容 → `MainSidebarTop` / `MainSidebarAfterLogo`
-- 工具栏自定义操作 → `ToolbarStart` / `ToolbarEnd`
-- 悬浮元素（需要绝对定位） → `FreePosition`
-
-> `LayoutTop` / `LayoutBottom` 位于整个布局的最外层，内容会横跨全宽，适合全局公告横幅、版权栏等需要独占一行的场景。
-
-## FreePosition 特殊说明
-
-`FreePosition` 插槽需要在样式中手动设置定位，否则内容不可见（模板见上方"FreePosition 插槽模板"）。
-
-## 故障排除
-
-插槽未显示？检查：
-- 目录名是否与插槽名完全匹配（区分大小写）
-- 文件名是否为 `index.vue`
-- `apps/<app>/src/slots/` 目录是否存在

.agents/skills/fa-slot-creator/references/slot-positions.md

@@ -1,258 +0,0 @@
-# Fantastic-admin 插槽位置参考
-
-本文档详细介绍 Fantastic-admin 框架中所有可用的插槽位置。
-
-## 插槽分类
-
-### 布局插槽（2 个位置）
-
-位于应用布局的最外层，横跨全宽。
-
-#### LayoutTop
-- **位置**：位于整个应用的最顶部，在头部之上
-- **适用场景**：
-  - 全局公告横幅
-  - 系统维护通知
-  - Cookie 同意栏
-  - 试用到期提醒
-- **布局方式**：全宽块级容器
-- **说明**：内容会将整个布局向下撑开，适合需要立即引起注意的横幅
-
-#### LayoutBottom
-- **位置**：位于整个应用的最底部，在页脚之下
-- **适用场景**：
-  - 全局版权声明
-  - 法律免责声明
-  - 持久状态栏
-- **布局方式**：全宽块级容器
-
----
-
-### 头部插槽（4 个位置）
-
-位于应用顶部的头部导航栏中。
-
-#### HeaderStart
-- **位置**：头部最左侧，logo 之前
-- **适用场景**：
-  - 菜单折叠按钮
-  - 面包屑导航
-  - 自定义品牌元素
-- **布局方式**：水平弹性布局
-
-#### HeaderAfterLogo
-- **位置**：头部 logo 紧后方
-- **适用场景**：
-  - 应用标题或副标题
-  - 版本徽标
-  - 环境标识（开发/预发/生产）
-- **布局方式**：水平弹性布局
-
-#### HeaderAfterMenu
-- **位置**：头部主菜单之后
-- **版本要求**：v5.3.0+
-- **适用场景**：
-  - 搜索框
-  - 快捷操作
-  - 通知提示
-- **布局方式**：水平弹性布局
-
-#### HeaderEnd
-- **位置**：头部最右侧
-- **适用场景**：
-  - 用户头像下拉菜单
-  - 设置按钮
-  - 退出登录按钮
-  - 主题切换器
-- **布局方式**：水平弹性布局
-
----
-
-### 主侧边栏插槽（4 个位置）
-
-位于主导航侧边栏中。
-
-#### MainSidebarTop
-- **位置**：主侧边栏顶部，logo 之前
-- **适用场景**：
-  - 折叠/展开按钮
-  - 自定义头部内容
-  - 工作区选择器
-- **布局方式**：垂直弹性布局
-
-#### MainSidebarAfterLogo
-- **位置**：主侧边栏 logo 紧后方
-- **适用场景**：
-  - 用户信息卡片
-  - 快速统计数据
-  - 工作区名称
-- **布局方式**：垂直弹性布局
-
-#### MainSidebarAfterMenu
-- **位置**：主侧边栏导航菜单之后
-- **版本要求**：v5.3.0+
-- **适用场景**：
-  - 附加导航项
-  - 快捷方式
-  - 固定项目
-- **布局方式**：垂直弹性布局
-
-#### MainSidebarBottom
-- **位置**：主侧边栏底部
-- **适用场景**：
-  - 帮助/支持链接
-  - 版本信息
-  - 底部内容
-  - 折叠按钮
-- **布局方式**：垂直弹性布局
-
----
-
-### 子侧边栏插槽（4 个位置）
-
-位于次级导航侧边栏中（使用多级导航时显示）。
-
-#### SubSidebarTop
-- **位置**：子侧边栏顶部
-- **适用场景**：
-  - 区块标题
-  - 返回按钮
-  - 面包屑
-- **布局方式**：垂直弹性布局
-
-#### SubSidebarAfterLogo
-- **位置**：子侧边栏 logo 之后
-- **适用场景**：
-  - 区块描述
-  - 上下文信息
-- **布局方式**：垂直弹性布局
-
-#### SubSidebarAfterMenu
-- **位置**：子侧边栏导航菜单之后
-- **版本要求**：v5.3.0+
-- **适用场景**：
-  - 附加子导航
-  - 相关链接
-- **布局方式**：垂直弹性布局
-
-#### SubSidebarBottom
-- **位置**：子侧边栏底部
-- **适用场景**：
-  - 区块专属操作
-  - 底部内容
-- **布局方式**：垂直弹性布局
-
----
-
-### 顶部栏插槽（4 个位置）
-
-位于标签栏和工具栏区域。
-
-#### TabbarStart
-- **位置**：标签栏左侧
-- **适用场景**：
-  - 标签导航控件
-  - 刷新按钮
-  - 自定义标签操作
-- **布局方式**：水平弹性布局
-
-#### TabbarEnd
-- **位置**：标签栏右侧
-- **适用场景**：
-  - 关闭所有标签按钮
-  - 标签管理操作
-- **布局方式**：水平弹性布局
-
-#### ToolbarStart
-- **位置**：工具栏左侧
-- **适用场景**：
-  - 页面专属操作
-  - 面包屑
-  - 页面标题
-- **布局方式**：水平弹性布局
-
-#### ToolbarEnd
-- **位置**：工具栏右侧
-- **适用场景**：
-  - 操作按钮
-  - 筛选器
-  - 导出/导入按钮
-- **布局方式**：水平弹性布局
-
----
-
-### 自由定位插槽
-
-#### FreePosition
-- **位置**：灵活定位，需手动设置坐标
-- **特殊要求**：
-  - **必须**在样式中使用 `position: absolute;`
-  - **必须**手动设置定位坐标（top/right/bottom/left）
-  - **必须**设置合适的 z-index
-- **适用场景**：
-  - 悬浮操作按钮（FAB）
-  - 客服聊天组件
-  - 自定义遮罩层
-  - 通知 Toast
-  - 帮助按钮
-- **样式示例**：
-  ```css
-  .free-position-slot {
-    position: absolute;
-    bottom: 20px;
-    right: 20px;
-    z-index: 1000;
-  }
-  ```
-
----
-
-## 插槽选择指南
-
-### 何时使用布局插槽：
-- 需要显示在所有内容之上的全局横幅（公告、维护通知）
-- 需要显示在所有内容之下的全局底栏（版权声明、法律免责）
-
-### 何时使用头部插槽：
-- 全局导航元素
-- 用户账号控件
-- 全局操作按钮
-- 品牌元素
-
-### 何时使用侧边栏插槽：
-- 导航增强内容
-- 用户信息展示
-- 工作区上下文
-- 帮助与支持链接
-
-### 何时使用顶部栏插槽：
-- 页面专属操作
-- 标签管理
-- 上下文控件
-- 面包屑导航
-
-### 何时使用 FreePosition：
-- 不适合放入标准布局的悬浮元素
-- 需要覆盖在内容之上的元素
-- 客服聊天组件或帮助按钮
-- 需要自定义定位的组件
-
----
-
-## 文件结构
-
-所有插槽必须遵循以下目录结构：
-```
-/src/slots/{插槽名称}/index.vue
-```
-
-**注意**：文件名必须为 `index.vue`。
-
-示例：
-```
-/src/slots/LayoutTop/index.vue
-/src/slots/LayoutBottom/index.vue
-/src/slots/HeaderStart/index.vue
-/src/slots/MainSidebarBottom/index.vue
-/src/slots/FreePosition/index.vue
-```

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

@@ -1,77 +0,0 @@
----
-name: fa-store-generator
-description: 为 Fantastic-admin 框架生成 Pinia Store 模块。当用户提到以下任何需求时必须使用此技能：多个页面需要共享数据、全局状态管理、数据需要持久化（刷新后还在）、登录状态/用户信息需要缓存、购物车/通知/权限等全局数据、需要在组件外访问状态。即使用户只是说"这个数据要全局共享"或"刷新后数据不能丢"，也应触发此技能。触发关键词：创建 store、全局状态、状态管理、pinia、持久化、共享数据。
----
-
-# Store Generator
-
-## 第一步：确认工作区（必须阻塞等待用户回复）
-
-本项目是 monorepo 架构，`apps/` 目录下存放各应用。**在执行任何文件读写操作之前**，必须先确认目标应用：
-
-1. 执行 `ls apps/` 列出所有可用应用
-2. **立即向用户提问**，明确询问要在哪个应用中创建 Store，并**停止等待回复**
-3. 收到用户明确回复后，才能继续后续步骤
-
-> **严格规则**：如果用户没有在请求中明确说明目标应用（例如"在 example 应用中"、"apps/core"），则必须提问，不得自行猜测或默认选择任何应用。
-
-确认后，后续所有文件路径均以该应用目录为根，例如 `apps/<app>/src/store/modules/`。
-
-## 项目 Store 概览
-
-- 位置：`apps/<app>/src/store/modules/` （业务 store）
-- 全部使用 **Composition API** 风格（`defineStore` + setup 函数）
-- 通过 `unplugin-auto-import` 自动导入，组件中无需手动 import
-- 持久化：`pinia-plugin-persistedstate` v4，配置 `persist: { pick: [...] }`
-
-详细模板和示例见 [references/store-patterns.md](references/store-patterns.md)
-
----
-
-## 交互式工作流
-
-先收集信息再生成代码，因为 store 的字段结构、持久化需求、异步 action 直接决定代码骨架——跳过这步会生成空壳，用户还要大量修改。
-
-### Step 1：收集基本信息
-
-向用户提问（可合并为一次）：
-
-1. **Store 用途**：管理什么数据？（例如：用户信息、购物车、通知列表）
-2. **存放位置**：
-   - `apps/<app>/src/store/modules/` — 业务 store（推荐）
-   - `apps/<app>/src/store/modules/app/` — 框架级 store（仅框架内部使用）
-3. **State 字段**：需要哪些状态字段？请列出字段名、类型和初始值
-
-### Step 2：收集功能需求
-
-根据 Step 1 的回答，继续询问：
-
-4. **持久化**：是否需要持久化到 localStorage？如果是，哪些字段需要持久化？
-5. **异步 Action**：是否有需要调用 API 的操作？如果有，请描述接口用途
-6. **Computed**：是否需要派生状态（computed）？例如：从列表中过滤、统计数量等
-
-### Step 3：确认并生成
-
-汇总用户的回答，展示将要生成的内容摘要，确认后再写入文件。
-
----
-
-## 命名规范
-
-| 类型 | Store ID | 函数名 | 文件名 |
-|------|----------|--------|--------|
-| 业务 store | `camelCase` | `use<Name>Store` | `<name>.ts` |
-| 框架 store | `app<Name>` | `useApp<Name>Store` | `<name>.ts` |
-
-示例：
-- 购物车 → ID: `cart`，函数: `useCartStore`，文件: `apps/<app>/src/store/modules/cart.ts`
-- 通知 → ID: `notification`，函数: `useNotificationStore`，文件: `apps/<app>/src/store/modules/notification.ts`
-
----
-
-## 生成后的操作
-
-Store 文件创建完成后，告知用户：
-- 无需手动 import，`unplugin-auto-import` 已自动处理
-- 在任意组件/composable 中直接使用：`const xxxStore = useXxxStore()`
-- 如需在 store 外部（如路由守卫）使用，需传入 pinia 实例：`useXxxStore(pinia)`

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

@@ -1,181 +0,0 @@
-# Store 模板与示例
-
-## 基础模板
-
-```typescript
-import { defineStore } from 'pinia'
-
-export const use<Name>Store = defineStore('<id>', () => {
-  // State
-  const <field> = ref<<Type>>(<initialValue>)
-
-  // Computed
-  const <computed> = computed(() => ...)
-
-  // Actions
-  function <action>() {
-    ...
-  }
-
-  return {
-    <field>,
-    <computed>,
-    <action>,
-  }
-})
-```
-
----
-
-## 模板变体
-
-### 1. 纯状态 Store（无持久化、无异步）
-
-```typescript
-import { defineStore } from 'pinia'
-
-export const useCartStore = defineStore('cart', () => {
-  const items = ref<CartItem[]>([])
-  const visible = ref(false)
-
-  const total = computed(() =>
-    items.value.reduce((sum, item) => sum + item.price * item.quantity, 0),
-  )
-
-  function addItem(item: CartItem) {
-    const existing = items.value.find(i => i.id === item.id)
-    if (existing) {
-      existing.quantity++
-    }
-    else {
-      items.value.push({ ...item, quantity: 1 })
-    }
-  }
-
-  function removeItem(id: string) {
-    items.value = items.value.filter(i => i.id !== id)
-  }
-
-  function clear() {
-    items.value = []
-  }
-
-  return { items, visible, total, addItem, removeItem, clear }
-})
-```
-
-### 2. 带持久化的 Store
-
-```typescript
-import { defineStore } from 'pinia'
-
-export const useUserPreferenceStore = defineStore(
-  'userPreference',
-  () => {
-    const theme = ref<'light' | 'dark'>('light')
-    const language = ref('zh-cn')
-    const pageSize = ref(20)
-
-    function setTheme(val: 'light' | 'dark') {
-      theme.value = val
-    }
-
-    return { theme, language, pageSize, setTheme }
-  },
-  {
-    persist: {
-      pick: ['theme', 'language', 'pageSize'],  // 只持久化指定字段
-    },
-  },
-)
-```
-
-> 持久化默认使用 localStorage，key 为 store ID。
-> 使用 `pick` 只持久化部分字段，避免持久化临时状态。
-
-### 3. 带异步 Action 的 Store
-
-```typescript
-import { defineStore } from 'pinia'
-
-export const useNotificationStore = defineStore('notification', () => {
-  const list = ref<Notification[]>([])
-  const loading = ref(false)
-  const unreadCount = computed(() => list.value.filter(n => !n.read).length)
-
-  async function fetchList() {
-    loading.value = true
-    try {
-      const res = await api.notification.list()
-      list.value = res.data
-    }
-    finally {
-      loading.value = false
-    }
-  }
-
-  async function markRead(id: string) {
-    await api.notification.markRead(id)
-    const item = list.value.find(n => n.id === id)
-    if (item) {
-      item.read = true
-    }
-  }
-
-  return { list, loading, unreadCount, fetchList, markRead }
-})
-```
-
-### 4. 带 TypeScript 接口定义的 Store
-
-```typescript
-import { defineStore } from 'pinia'
-
-interface DictionaryItem {
-  label: string
-  value: string | number
-}
-
-interface DictionaryState {
-  [key: string]: DictionaryItem[]
-}
-
-export const useDictionaryStore = defineStore('dictionary', () => {
-  const data = ref<DictionaryState>({})
-
-  function getItems(type: string): DictionaryItem[] {
-    return data.value[type] ?? []
-  }
-
-  async function fetchByType(type: string) {
-    if (data.value[type]) return  // 已缓存，跳过
-    const res = await api.dictionary.getByType(type)
-    data.value[type] = res.data
-  }
-
-  return { data, getItems, fetchByType }
-})
-```
-
----
-
-## 项目现有 Store 参考
-
-| Store | 文件 | 用途 |
-|-------|------|------|
-| `useAppAccountStore` | `modules/app/account.ts` | 登录/登出、token、多账号 |
-| `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` | 菜单徽章状态 |
-
----
-
-## 注意事项
-
-- Store 文件放在 `src/store/modules/` 后，`unplugin-auto-import` 会自动扫描并全局注入，**无需手动 import**
-- Store ID 必须全局唯一（camelCase）
-- 避免在 store 中直接引用 DOM 或组件实例
-- 跨 store 调用：直接在 setup 函数内调用其他 store，如 `const authStore = useAppAccountStore()`

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

@@ -1,138 +0,0 @@
----
-name: fa-theme-customizer
-description: 为 Fantastic-admin 框架创建和定制主题配色方案，始终同时生成明色（light）和暗色（dark）两套主题。当用户提到以下任何需求时必须使用此技能：换主题颜色、换配色、做一个 XX 风格的主题、主题太单调了、品牌色是 XXX 帮我生成主题、把 tweakcn 配色转成框架主题、想要暗色/冷色/暖色调、根据设计稿颜色生成主题。即使用户只是描述一种感觉（"清新"、"沉稳"、"科技感"）或提供一个颜色值（"#2563EB"），也应触发此技能。支持"吉卜力"、"赛博朋克"、"莫兰迪"、"北欧极简"等专业设计风格关键词。
----
-
-# 主题定制器
-
-为 Fantastic-admin 框架生成符合规范的主题配色。框架的 `theme.sync` 默认为 `true`，切换颜色方案时明暗共用同一套主题名称，因此**始终同时输出明色和暗色两套**，缺少任何一套都会导致对应模式下显示异常。
-
-## 主题文件位置
-
-- 主题定义：`packages/themes/index.ts`（在此添加新主题，跨所有应用共享）
-- 类型推断：自动从 `packages/themes/index.ts` 的 key 推断，无需手动更新类型
-
-## 工作流程
-
-### 第一步：确认设计风格
-
-如果用户没有明确指定颜色，先提供风格参考。读取 `references/design-styles.md` 获取完整的风格目录和配色建议。
-
-### 第二步：生成 OKLCH 色值
-
-框架使用 **OKLCH 色彩空间**，格式为 `L C H`（不含 `oklch()` 包裹，直接写三个数值）。
-
-转换规则：
-- 明色背景：`1 0 0`（纯白）或接近白色的暖/冷色调
-- 暗色背景：`0.141 0.005 285.823`（默认深灰）或更深的色调
-- 主色（primary）：明色通常比暗色亮度（L值）高 0.05~0.1
-
-读取 `references/theme-structure.md` 了解完整的 CSS 变量说明和取值规范。
-
-### 第三步：输出主题代码
-
-在 `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))',
-  },
-},
-```
-
-### 第四步：在应用设置中启用
-
-主题添加到 `packages/themes/index.ts` 后，还需要在对应应用的设置中启用。先执行 `ls apps/` 确认有哪些应用，询问用户要在哪个应用中启用，然后修改 `apps/<app>/src/settings.ts`：
-
-```typescript
-theme: {
-  light: 'themeName',
-  dark: 'themeName',
-}
-```
-
-## 参考资源
-
-- **设计风格目录**：`references/design-styles.md` — 包含 20+ 种专业设计风格的配色方案和灵感来源
-- **CSS 变量说明**：`references/theme-structure.md` — 每个变量的作用、取值规范和明暗差异（含完整暗色模板）
-- **社区配色**：https://tweakcn.com/community — 可直接参考社区主题的 shadcn CSS 变量

.agents/skills/fa-theme-customizer/references/design-styles.md

@@ -1,292 +0,0 @@
-# 设计风格配色参考目录
-
-收录 20+ 种专业设计风格，每种风格提供核心配色建议（OKLCH 格式）。
-
-## 目录
-
-1. [日系动画风格](#日系动画风格)
-2. [科技/未来风格](#科技未来风格)
-3. [自然/有机风格](#自然有机风格)
-4. [复古/怀旧风格](#复古怀旧风格)
-5. [极简主义风格](#极简主义风格)
-6. [艺术设计流派](#艺术设计流派)
-7. [品牌/商业风格](#品牌商业风格)
-8. [tweakcn 社区风格参考](#tweakcn-社区风格参考)
-9. [OKLCH 快速参考](#oklch-快速参考)
-
----
-
-## 日系动画风格
-
-### 吉卜力（Ghibli）
-宫崎骏作品的自然温暖色调，大地色系与天空蓝的结合。
-
-| 变量 | 明色 L C H | 暗色 L C H | 说明 |
-|------|-----------|-----------|------|
-| background | `0.97 0.008 85` | `0.18 0.012 85` | 米白/深棕 |
-| primary | `0.62 0.12 145` | `0.55 0.10 145` | 森林绿 |
-| secondary | `0.88 0.06 85` | `0.28 0.06 85` | 暖米色 |
-| accent | `0.75 0.10 85` | `0.35 0.08 85` | 大地棕 |
-| muted | `0.92 0.04 85` | `0.25 0.04 85` | 浅米色 |
-
-灵感：《龙猫》草绿、《千与千寻》暖橙、《哈尔的移动城堡》天蓝
-
-### 新海诚（Makoto Shinkai）
-高饱和度的天空蓝与城市光晕，强烈的光影对比。
-
-| 变量 | 明色 L C H | 暗色 L C H | 说明 |
-|------|-----------|-----------|------|
-| background | `0.97 0.005 240` | `0.12 0.015 240` | 冷白/深夜蓝 |
-| primary | `0.58 0.22 240` | `0.52 0.20 240` | 天空蓝 |
-| accent | `0.75 0.15 55` | `0.65 0.18 55` | 黄昏橙 |
-| muted | `0.92 0.03 240` | `0.22 0.03 240` | 淡蓝灰 |
-
-灵感：《你的名字》黄昏渐变、《天气之子》雨后天空
-
----
-
-## 科技/未来风格
-
-### 赛博朋克（Cyberpunk）
-霓虹粉紫与深黑的强烈对比，高饱和度荧光色。
-
-| 变量 | 明色 L C H | 暗色 L C H | 说明 |
-|------|-----------|-----------|------|
-| background | `0.95 0.005 300` | `0.08 0.01 300` | 浅紫白/极深黑 |
-| primary | `0.65 0.28 330` | `0.72 0.30 330` | 霓虹粉 |
-| secondary | `0.60 0.25 280` | `0.55 0.22 280` | 电子紫 |
-| accent | `0.75 0.25 195` | `0.70 0.28 195` | 青色荧光 |
-| border | `0.85 0.08 300` | `0.25 0.08 300` | 紫色边框 |
-
-灵感：《银翼杀手 2049》、《赛博朋克 2077》
-
-### 终端/黑客（Terminal）
-经典绿色终端风格，深黑背景配荧光绿。
-
-| 变量 | 明色 L C H | 暗色 L C H | 说明 |
-|------|-----------|-----------|------|
-| background | `0.96 0.01 145` | `0.08 0.01 145` | 浅绿白/终端黑 |
-| primary | `0.65 0.22 145` | `0.72 0.25 145` | 荧光绿 |
-| foreground | `0.15 0.01 145` | `0.90 0.15 145` | 深绿/亮绿 |
-| muted | `0.88 0.04 145` | `0.18 0.04 145` | 暗绿 |
-
-### 深空（Deep Space）
-NASA 风格的深蓝黑与星云紫，科技感十足。
-
-| 变量 | 明色 L C H | 暗色 L C H | 说明 |
-|------|-----------|-----------|------|
-| background | `0.96 0.008 250` | `0.10 0.015 250` | 冷白/深空蓝 |
-| primary | `0.55 0.20 260` | `0.60 0.22 260` | 星云蓝 |
-| accent | `0.65 0.18 300` | `0.60 0.20 300` | 星云紫 |
-| secondary | `0.88 0.05 250` | `0.20 0.05 250` | 深蓝灰 |
-
----
-
-## 自然/有机风格
-
-### 莫兰迪（Morandi）
-低饱和度的灰调色彩，优雅克制，源自意大利画家乔治·莫兰迪。
-
-| 变量 | 明色 L C H | 暗色 L C H | 说明 |
-|------|-----------|-----------|------|
-| background | `0.95 0.008 60` | `0.20 0.008 60` | 灰米白/深灰棕 |
-| primary | `0.62 0.06 180` | `0.55 0.05 180` | 灰蓝绿 |
-| secondary | `0.85 0.04 60` | `0.30 0.04 60` | 灰米色 |
-| accent | `0.72 0.05 30` | `0.40 0.04 30` | 灰玫瑰 |
-| muted | `0.90 0.02 60` | `0.25 0.02 60` | 浅灰 |
-
-特点：所有颜色饱和度（C值）控制在 0.02~0.08 之间
-
-### 北欧极简（Scandinavian）
-白桦木色调，干净的白色与自然木色，受北欧设计影响。
-
-| 变量 | 明色 L C H | 暗色 L C H | 说明 |
-|------|-----------|-----------|------|
-| background | `0.98 0.005 80` | `0.16 0.008 80` | 纯白/深木色 |
-| primary | `0.45 0.08 80` | `0.55 0.06 80` | 深木棕 |
-| secondary | `0.92 0.03 80` | `0.26 0.03 80` | 浅木色 |
-| accent | `0.70 0.12 145` | `0.55 0.10 145` | 苔藓绿 |
-
-### 日式侘寂（Wabi-Sabi）
-不完美之美，枯山水的灰褐色调，禅意十足。
-
-| 变量 | 明色 L C H | 暗色 L C H | 说明 |
-|------|-----------|-----------|------|
-| background | `0.94 0.01 70` | `0.18 0.01 70` | 宣纸白/墨色 |
-| primary | `0.40 0.05 70` | `0.50 0.04 70` | 枯叶棕 |
-| accent | `0.65 0.04 145` | `0.45 0.03 145` | 苔绿 |
-| border | `0.82 0.03 70` | `0.28 0.03 70` | 淡墨色 |
-
----
-
-## 复古/怀旧风格
-
-### 蒸汽朋克（Steampunk）
-维多利亚时代的铜色与皮革棕，工业齿轮美学。
-
-| 变量 | 明色 L C H | 暗色 L C H | 说明 |
-|------|-----------|-----------|------|
-| background | `0.92 0.02 70` | `0.16 0.02 70` | 羊皮纸/深棕 |
-| primary | `0.62 0.12 55` | `0.58 0.14 55` | 铜金色 |
-| secondary | `0.80 0.06 70` | `0.28 0.06 70` | 皮革棕 |
-| accent | `0.55 0.08 200` | `0.50 0.10 200` | 铜绿 |
-
-### 洛可可（Rococo）
-18世纪法国宫廷风格，粉彩色调，精致华丽。
-
-| 变量 | 明色 L C H | 暗色 L C H | 说明 |
-|------|-----------|-----------|------|
-| background | `0.97 0.01 330` | `0.18 0.01 330` | 玫瑰白/深玫瑰 |
-| primary | `0.72 0.12 330` | `0.62 0.10 330` | 粉玫瑰 |
-| secondary | `0.90 0.05 280` | `0.28 0.05 280` | 淡薰衣草 |
-| accent | `0.80 0.08 55` | `0.45 0.08 55` | 香槟金 |
-
-### 复古美式（Retro Americana）
-50-70年代美国风格，暖橙与奶油色。
-
-| 变量 | 明色 L C H | 暗色 L C H | 说明 |
-|------|-----------|-----------|------|
-| background | `0.96 0.02 80` | `0.18 0.02 80` | 奶油色/深棕 |
-| primary | `0.68 0.18 45` | `0.62 0.16 45` | 复古橙 |
-| secondary | `0.88 0.06 80` | `0.28 0.06 80` | 奶油黄 |
-| accent | `0.55 0.12 25` | `0.50 0.10 25` | 砖红 |
-
----
-
-## 极简主义风格
-
-### 包豪斯（Bauhaus）
-功能主义美学，原色（红黄蓝）与黑白灰的几何构成。
-
-| 变量 | 明色 L C H | 暗色 L C H | 说明 |
-|------|-----------|-----------|------|
-| background | `1 0 0` | `0.14 0 0` | 纯白/纯黑 |
-| primary | `0.55 0.25 260` | `0.60 0.22 260` | 包豪斯蓝 |
-| secondary | `0.90 0 0` | `0.25 0 0` | 浅灰/深灰 |
-| accent | `0.65 0.25 25` | `0.60 0.22 25` | 包豪斯红 |
-
-### 瑞士国际主义（Swiss International）
-网格系统，Helvetica 精神，黑白红三色。
-
-| 变量 | 明色 L C H | 暗色 L C H | 说明 |
-|------|-----------|-----------|------|
-| background | `1 0 0` | `0.12 0 0` | 纯白/近黑 |
-| primary | `0.50 0.25 25` | `0.55 0.22 25` | 瑞士红 |
-| foreground | `0.10 0 0` | `0.95 0 0` | 近黑/近白 |
-| muted | `0.92 0 0` | `0.22 0 0` | 浅灰/深灰 |
-
----
-
-## 艺术设计流派
-
-### 孟菲斯（Memphis）
-80年代意大利设计运动，高饱和度几何图案，大胆撞色。
-
-| 变量 | 明色 L C H | 暗色 L C H | 说明 |
-|------|-----------|-----------|------|
-| background | `0.97 0.01 300` | `0.15 0.01 300` | 浅紫白/深紫 |
-| primary | `0.70 0.25 330` | `0.65 0.22 330` | 孟菲斯粉 |
-| secondary | `0.85 0.08 300` | `0.30 0.08 300` | 薰衣草 |
-| accent | `0.75 0.22 85` | `0.70 0.20 85` | 柠檬黄 |
-
-### 新艺术运动（Art Nouveau）
-有机曲线，自然植物纹样，金色与绿色。
-
-| 变量 | 明色 L C H | 暗色 L C H | 说明 |
-|------|-----------|-----------|------|
-| background | `0.96 0.01 80` | `0.16 0.01 80` | 象牙白/深橄榄 |
-| primary | `0.55 0.12 145` | `0.50 0.10 145` | 橄榄绿 |
-| accent | `0.72 0.15 75` | `0.65 0.12 75` | 金色 |
-| secondary | `0.88 0.04 80` | `0.26 0.04 80` | 米色 |
-
-### 波普艺术（Pop Art）
-安迪·沃霍尔风格，高对比度，鲜艳原色。
-
-| 变量 | 明色 L C H | 暗色 L C H | 说明 |
-|------|-----------|-----------|------|
-| background | `1 0 0` | `0.10 0 0` | 纯白/纯黑 |
-| primary | `0.72 0.28 25` | `0.68 0.25 25` | 波普红 |
-| secondary | `0.88 0.20 85` | `0.35 0.15 85` | 波普黄 |
-| accent | `0.60 0.25 240` | `0.55 0.22 240` | 波普蓝 |
-
----
-
-## 品牌/商业风格
-
-### 科技蓝（Tech Blue）
-企业级科技感，参考 IBM、Microsoft 风格。
-
-| 变量 | 明色 L C H | 暗色 L C H | 说明 |
-|------|-----------|-----------|------|
-| background | `0.98 0.003 240` | `0.13 0.005 240` | 冷白/深蓝黑 |
-| primary | `0.55 0.20 250` | `0.60 0.18 250` | 科技蓝 |
-| secondary | `0.92 0.02 240` | `0.22 0.02 240` | 浅蓝灰 |
-| accent | `0.65 0.15 200` | `0.58 0.12 200` | 青蓝 |
-
-### 金融绿（Finance Green）
-稳健专业，参考彭博、路透风格。
-
-| 变量 | 明色 L C H | 暗色 L C H | 说明 |
-|------|-----------|-----------|------|
-| background | `0.97 0.005 145` | `0.12 0.008 145` | 冷白/深绿黑 |
-| primary | `0.52 0.18 145` | `0.58 0.16 145` | 金融绿 |
-| secondary | `0.90 0.03 145` | `0.22 0.03 145` | 浅绿灰 |
-| accent | `0.65 0.12 85` | `0.60 0.10 85` | 金色点缀 |
-
-### 奢华黑金（Luxury）
-高端品牌风格，深黑配金色，参考 Chanel、Rolex。
-
-| 变量 | 明色 L C H | 暗色 L C H | 说明 |
-|------|-----------|-----------|------|
-| background | `0.96 0.005 75` | `0.10 0.005 75` | 象牙白/近黑 |
-| primary | `0.68 0.12 75` | `0.72 0.14 75` | 金色 |
-| foreground | `0.12 0.005 75` | `0.92 0.005 75` | 近黑/近白 |
-| border | `0.80 0.06 75` | `0.25 0.06 75` | 金色边框 |
-
----
-
-## tweakcn 社区风格参考
-
-tweakcn（https://tweakcn.com/community）是 shadcn/ui 的主题社区，提供大量社区贡献的配色方案。
-
-### 如何使用社区主题
-
-1. 访问 https://tweakcn.com/community 浏览社区主题
-2. 找到喜欢的主题，点击查看其 CSS 变量
-3. 社区主题使用标准 shadcn CSS 变量格式，可直接转换
-
-### 转换说明
-
-社区主题的 CSS 变量格式通常为：
-```css
-:root {
-  --background: oklch(1 0 0);
-  --primary: oklch(0.623 0.214 259.815);
-}
-```
-
-转换到框架格式时，去掉 `oklch()` 包裹，只保留三个数值，再补充框架专属的 `--g-*` 变量。
-
-### 知名社区主题风格
-
-- **Catppuccin** — 柔和粉彩，有 Latte/Frappé/Macchiato/Mocha 四个变体
-- **Dracula** — 经典暗色，紫色系
-- **Nord** — 北极极光，冷蓝色系
-- **Solarized** — 护眼配色，暖黄底色
-- **Gruvbox** — 复古暖色，棕黄系
-- **Tokyo Night** — 深蓝紫夜晚城市风格
-- **One Dark** — Atom 编辑器经典暗色主题
-- **Everforest** — 森林绿色系，护眼舒适
-
----
-
-## OKLCH 快速参考
-
-### 亮度（L）
-- `1.0` 纯白 / `0.97~0.99` 明色背景 / `0.50~0.70` 主色常用范围 / `0.10~0.18` 暗色背景 / `0.0` 纯黑
-
-### 饱和度（C）
-- `0` 无彩色 / `0.01~0.05` 极低（莫兰迪）/ `0.15~0.22` 中等（大多数主题）/ `0.25+` 高饱和（赛博朋克）
-
-### 色相（H）
-- `0~30` 红 / `30~60` 橙棕 / `60~90` 黄 / `90~150` 绿 / `150~210` 青 / `210~270` 蓝 / `270~330` 紫 / `330~360` 粉玫瑰

.agents/skills/fa-theme-customizer/references/theme-structure.md

@@ -1,169 +0,0 @@
-# 主题 CSS 变量结构说明
-
-## 变量分类
-
-主题由两类变量组成：
-1. **shadcn 标准 token** — 通用设计系统变量，控制组件颜色
-2. **框架专属 token（`--g-*`）** — 控制布局区域颜色
-
----
-
-## shadcn 标准 Token
-
-格式：`'L C H'`（OKLCH 三个数值，不含 `oklch()` 包裹）
-
-| 变量 | 作用 |
-|------|------|
-| `--background` | 页面主背景色 |
-| `--foreground` | 主文字颜色 |
-| `--card` | 卡片背景色（通常同 background） |
-| `--card-foreground` | 卡片文字颜色 |
-| `--popover` | 弹出层背景色 |
-| `--popover-foreground` | 弹出层文字颜色 |
-| `--primary` | 主色调（按钮、高亮、激活状态） |
-| `--primary-foreground` | 主色上的文字颜色 |
-| `--secondary` | 次要色（次要按钮、标签背景） |
-| `--secondary-foreground` | 次要色上的文字颜色 |
-| `--muted` | 静音色（禁用状态、次要背景） |
-| `--muted-foreground` | 静音色上的文字颜色 |
-| `--accent` | 强调色（hover 状态背景） |
-| `--accent-foreground` | 强调色上的文字颜色 |
-| `--destructive` | 危险/错误色（删除、警告） |
-| `--border` | 边框颜色 |
-| `--input` | 输入框边框颜色 |
-| `--ring` | 焦点环颜色（通常同 primary） |
-
----
-
-## 框架专属 Token（`--g-*`）
-
-格式：`'oklch(L C H)'` 或 `'oklch(var(--xxx))'`（含 `oklch()` 包裹）
-
-| 变量 | 作用 |
-|------|------|
-| `--g-main-area-bg` | 主内容区域背景 |
-| `--g-header-bg` | 顶部背景 |
-| `--g-header-color` | 顶部文字颜色 |
-| `--g-header-menu-color` | 顶部导航菜单项文字颜色 |
-| `--g-header-menu-hover-bg` | 顶部导航菜单项 hover 背景 |
-| `--g-header-menu-hover-color` | 顶部导航菜单项 hover 文字颜色 |
-| `--g-header-menu-active-bg` | 顶部导航菜单项激活背景 |
-| `--g-header-menu-active-color` | 顶部导航菜单项激活文字颜色 |
-| `--g-main-sidebar-bg` | 主侧边栏背景 |
-| `--g-main-sidebar-menu-color` | 主侧边栏导航菜单文字颜色 |
-| `--g-main-sidebar-menu-hover-bg` | 主侧边栏导航菜单 hover 背景 |
-| `--g-main-sidebar-menu-hover-color` | 主侧边栏导航菜单 hover 文字颜色 |
-| `--g-main-sidebar-menu-active-bg` | 主侧边栏导航菜单激活背景 |
-| `--g-main-sidebar-menu-active-color` | 主侧边栏导航菜单激活文字颜色 |
-| `--g-sub-sidebar-bg` | 次侧边栏背景 |
-| `--g-sub-sidebar-menu-color` | 次侧边栏导航菜单文字颜色 |
-| `--g-sub-sidebar-menu-hover-bg` | 次侧边栏导航菜单 hover 背景 |
-| `--g-sub-sidebar-menu-hover-color` | 次侧边栏导航菜单 hover 文字颜色 |
-| `--g-sub-sidebar-menu-active-bg` | 次侧边栏导航菜单激活背景 |
-| `--g-sub-sidebar-menu-active-color` | 次侧边栏导航菜单激活文字颜色 |
-| `--g-tabbar-bg` | 标签栏背景 |
-| `--g-tabbar-tab-color` | 标签项文字颜色 |
-| `--g-tabbar-tab-hover-bg` | 标签项 hover 背景 |
-| `--g-tabbar-tab-hover-color` | 标签项 hover 文字颜色 |
-| `--g-tabbar-tab-active-bg` | 标签项激活背景 |
-| `--g-tabbar-tab-active-color` | 标签项激活文字颜色 |
-| `--g-toolbar-bg` | 工具栏背景 |
-
----
-
-## 明色与暗色的关键差异
-
-### 差异一：菜单激活状态
-
-明色使用 `primary`，暗色使用 `accent`：
-
-```typescript
-// 明色
-'--g-header-menu-active-bg': 'oklch(var(--primary))',
-'--g-header-menu-active-color': 'oklch(var(--primary-foreground))',
-
-// 暗色
-'--g-header-menu-active-bg': 'oklch(var(--accent))',
-'--g-header-menu-active-color': 'oklch(var(--accent-foreground))',
-```
-
-同样适用于 `--g-main-sidebar-menu-active-*` 和 `--g-sub-sidebar-menu-active-*`。
-
-### 差异二：主内容区背景
-
-```typescript
-// 明色：略深于背景，形成层次感
-'--g-main-area-bg': 'oklch(0.9612 0 0)',
-
-// 暗色：与背景相同，避免过多层次
-'--g-main-area-bg': 'oklch(var(--background))',
-```
-
-### 差异三：标签栏 hover 背景
-
-```typescript
-// 明色
-'--g-tabbar-tab-hover-bg': 'oklch(var(--border))',
-
-// 暗色
-'--g-tabbar-tab-hover-bg': 'oklch(var(--accent) / 50%)',
-```
-
-### 差异四：标签栏激活背景
-
-```typescript
-// 明色
-'--g-tabbar-tab-active-bg': 'oklch(var(--background))',
-
-// 暗色
-'--g-tabbar-tab-active-bg': 'oklch(var(--secondary))',
-```
-
-### 差异五：菜单颜色引用
-
-```typescript
-// 明色：使用 accent-foreground
-'--g-header-menu-color': 'oklch(var(--accent-foreground))',
-'--g-header-menu-hover-color': 'oklch(var(--accent-foreground))',
-
-// 暗色：使用 muted-foreground
-'--g-header-menu-color': 'oklch(var(--muted-foreground))',
-'--g-header-menu-hover-color': 'oklch(var(--muted-foreground))',
-```
-
----
-
-## 完整暗色 `--g-*` 模板
-
-```typescript
-dark: {
-  // shadcn token ...
-  '--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))',
-  '--g-header-menu-hover-bg': 'oklch(var(--muted))',
-  '--g-header-menu-hover-color': 'oklch(var(--muted-foreground))',
-  '--g-header-menu-active-bg': 'oklch(var(--accent))',
-  '--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))',
-},
-```

.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

.claude/skills/fa-crud-page-generator

@@ -1 +0,0 @@
-../../.agents/skills/fa-crud-page-generator

.claude/skills/fa-feedback

@@ -1 +0,0 @@
-../../.agents/skills/fa-feedback

.claude/skills/fa-form-builder

@@ -1 +0,0 @@
-../../.agents/skills/fa-form-builder

.claude/skills/fa-framework-settings

@@ -1 +0,0 @@
-../../.agents/skills/fa-framework-settings

.claude/skills/fa-page-optimizer

@@ -1 +0,0 @@
-../../.agents/skills/fa-page-optimizer

.claude/skills/fa-route-generator

@@ -1 +0,0 @@
-../../.agents/skills/fa-route-generator

.claude/skills/fa-slot-creator

@@ -1 +0,0 @@
-../../.agents/skills/fa-slot-creator

.claude/skills/fa-store-generator

@@ -1 +0,0 @@
-../../.agents/skills/fa-store-generator

.claude/skills/fa-theme-customizer

@@ -1 +0,0 @@
-../../.agents/skills/fa-theme-customizer

.cursor/extensions.json

@@ -0,0 +1,10 @@
+{
+  "recommendations": [
+    "EditorConfig.EditorConfig",
+    "mikestead.dotenv",
+    "dbaeumer.vscode-eslint",
+    "stylelint.vscode-stylelint",
+    "Vue.volar",
+    "antfu.unocss"
+  ]
+}

.cursor/settings.json

@@ -0,0 +1,29 @@
+{
+  "eslint.useFlatConfig": true,
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.stylelint": "explicit",
+    "source.organizeImports": "never"
+  },
+  "stylelint.validate": [
+    "css",
+    "postcss",
+    "scss",
+    "vue"
+  ],
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml"
+  ],
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

.env.development

@@ -0,0 +1,15 @@
+# 应用配置面板
+VITE_APP_SETTING = true
+# 页面标题
+VITE_APP_TITLE = Fantastic-admin 基础版
+# 接口请求地址，会设置到 axios 的 baseURL 参数上
+VITE_APP_API_BASEURL = /
+# 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
+VITE_APP_DEBUG_TOOL =
+# 是否禁用开发者工具，可防止被调试
+VITE_APP_DISABLE_DEVTOOL = false
+
+# 是否开启代理
+VITE_OPEN_PROXY = false
+# 是否开启开发者工具
+VITE_OPEN_DEVTOOLS = false

.env.production

@@ -0,0 +1,19 @@
+# 应用配置面板
+VITE_APP_SETTING = false
+# 页面标题
+VITE_APP_TITLE = Fantastic-admin 基础版
+# 接口请求地址，会设置到 axios 的 baseURL 参数上
+VITE_APP_API_BASEURL = /
+# 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
+VITE_APP_DEBUG_TOOL =
+# 是否禁用开发者工具，可防止被调试
+VITE_APP_DISABLE_DEVTOOL = false
+
+# 是否在打包时启用 Mock
+VITE_BUILD_MOCK = false
+# 是否在打包时生成 sourcemap
+VITE_BUILD_SOURCEMAP = false
+# 是否在打包时开启压缩，支持 gzip 和 brotli
+VITE_BUILD_COMPRESS = gzip,brotli
+# 是否在打包后生成存档，支持 zip 和 tar
+VITE_BUILD_ARCHIVE =

.env.test

@@ -0,0 +1,19 @@
+# 应用配置面板
+VITE_APP_SETTING = false
+# 页面标题
+VITE_APP_TITLE = Fantastic-admin 基础版
+# 接口请求地址，会设置到 axios 的 baseURL 参数上
+VITE_APP_API_BASEURL = /
+# 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
+VITE_APP_DEBUG_TOOL =
+# 是否禁用开发者工具，可防止被调试
+VITE_APP_DISABLE_DEVTOOL = false
+
+# 是否在打包时启用 Mock
+VITE_BUILD_MOCK = true
+# 是否在打包时生成 sourcemap
+VITE_BUILD_SOURCEMAP = true
+# 是否在打包时开启压缩，支持 gzip 和 brotli
+VITE_BUILD_COMPRESS =
+# 是否在打包后生成存档，支持 zip 和 tar
+VITE_BUILD_ARCHIVE =

.github/workflows/deploy-example.yml

@@ -1,59 +0,0 @@
-name: Deploy Example
-
-on:
-  push:
-    branches: [main]
-    paths:
-      - 'apps/examples/**'
-      - pnpm-lock.yaml
-      - pnpm-workspace.yaml
-  workflow_dispatch:
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v6
-        with:
-          fetch-depth: 0
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v6
-        with:
-          node-version: 22
-
-      - uses: pnpm/action-setup@v4
-        name: Install pnpm
-        with:
-          run_install: false
-
-      - name: Get pnpm store directory
-        shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
-
-      - uses: actions/cache@v5
-        name: Setup pnpm cache
-        with:
-          path: ${{ env.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Build site
-        run: pnpm --filter example build
-
-      - name: deploy
-        uses: peaceiris/actions-gh-pages@v4
-        with:
-          deploy_key: ${{ secrets.DEPLOY_EXAMPLE }}
-          external_repository: fantastic-admin/basic-example
-          publish_branch: main
-          publish_dir: ./apps/example/dist
-          enable_jekyll: true
-          force_orphan: true
-          user_name: 'github-actions[bot]'
-          user_email: 'github-actions[bot]@users.noreply.github.com'

.github/workflows/release.yml

@@ -9,11 +9,11 @@ jobs:
   release:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
-      - uses: actions/setup-node@v6
+      - uses: actions/setup-node@v4
         with:
           node-version: 22
 
@@ -25,7 +25,7 @@ jobs:
     needs: release
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
@@ -42,7 +42,7 @@ jobs:
         with:
           type: zip
           filename: fantastic-admin.${{ steps.last_release.outputs.tag_name }}.zip
-          exclusions: '/.git/* /.github/* /.agents/* /.claude/* /CLAUDE.md'
+          exclusions: '/.git/* /.github/*'
 
       - name: Upload Archive To Release
         uses: xresloader/upload-to-github-release@v1
@@ -52,3 +52,36 @@ jobs:
           release_id: ${{ steps.last_release.outputs.id }}
           draft: false
           file: fantastic-admin.${{ steps.last_release.outputs.tag_name }}.zip
+
+  upload-archive-example:
+    needs: release
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          ref: example
+
+      - name: Get Release
+        id: last_release
+        uses: joutvhu/get-release@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          latest: true
+
+      - name: Create Archive
+        uses: thedoctor0/zip-release@main
+        with:
+          type: zip
+          filename: fantastic-admin.example.${{ steps.last_release.outputs.tag_name }}.zip
+          exclusions: '/.git/* /.github/* /public/.github/* /public/.nojekyll'
+
+      - name: Upload Archive To Release
+        uses: xresloader/upload-to-github-release@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          release_id: ${{ steps.last_release.outputs.id }}
+          draft: false
+          file: fantastic-admin.example.${{ steps.last_release.outputs.tag_name }}.zip

.github/workflows/repo-sync.yml

@@ -21,16 +21,3 @@ jobs:
           source-repo: git@github.com:fantastic-admin/basic.git
           # 注意替换为你的 Gitee 目标仓库地址
           destination-repo: git@gitee.com:fantastic-admin/basic.git
-  sync-to-atomgit:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Sync to AtomGit
-        uses: wearerequired/git-mirror-action@master
-        env:
-          # 注意在 Settings->Secrets 配置 ATOMGIT_RSA_PRIVATE_KEY
-          SSH_PRIVATE_KEY: ${{ secrets.ATOMGIT_RSA_PRIVATE_KEY }}
-        with:
-          # 注意替换为你的 GitHub 源仓库地址
-          source-repo: git@github.com:fantastic-admin/basic.git
-          # 注意替换为你的 AtomGit 目标仓库地址
-          destination-repo: git@gitcode.com:fantastic-admin/basic.git

.node-version

@@ -1 +1 @@
-24
+22

.npmrc

@@ -0,0 +1,4 @@
+shamefully-hoist=true
+strict-peer-dependencies=false
+engine-strict=true
+verify-deps-before-run=prompt

.vscode/settings.json

@@ -1,9 +1,5 @@
 {
-  "npm.packageManager": "pnpm",
-  "js/ts.tsdk.path": "node_modules/typescript/lib",
-  "search.exclude": {
-    "**/dist*": true
-  },
+  "eslint.useFlatConfig": true,
   "prettier.enable": false,
   "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {
@@ -11,7 +7,12 @@
     "source.fixAll.stylelint": "explicit",
     "source.organizeImports": "never"
   },
-  "eslint.useFlatConfig": true,
+  "stylelint.validate": [
+    "css",
+    "postcss",
+    "scss",
+    "vue"
+  ],
   "eslint.validate": [
     "javascript",
     "javascriptreact",
@@ -24,10 +25,5 @@
     "jsonc",
     "yaml"
   ],
-  "stylelint.validate": [
-    "css",
-    "postcss",
-    "scss",
-    "vue"
-  ]
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

AGENTS.md

@@ -1,72 +0,0 @@
-# Fantastic-admin
-
-## 项目概述
-
-Fantastic-admin 是一个基于 Vue 3 的后台管理框架。
-
-## 技术栈
-
-- **框架**: Vue 3.6 + TypeScript + Vite 8
-- **UI 组件**: Element Plus（默认，可替换） + Reka UI + UnoCSS（原子化 CSS）
-- **状态管理**: Pinia + pinia-plugin-persistedstate
-- **路由**: Vue Router 5
-- **包管理器**: pnpm（必须使用 pnpm，禁止使用 npm/yarn）
-- **HTTP**: Axios
-- **Mock**: vite-plugin-fake-server
-
-## 目录结构
-
-采用 pnpm monorepo 架构：
-
-```
-├── apps/
-│   └── <app>/                # 应用
-│       └── src/
-│           ├── api/          # API 请求模块
-│           ├── assets/       # 静态资源
-│           ├── components/   # 全局业务组件
-│           ├── composables/  # 组合式函数
-│           ├── layouts/      # 布局组件
-│           ├── router/       # 路由配置
-│           ├── slots/        # 插槽组件
-│           ├── store/        # Pinia store
-│           ├── types/        # TypeScript 类型定义
-│           ├── ui/           # 框架内建 UI 组件（本地）
-│           ├── utils/        # 工具函数
-│           └── views/        # 页面视图
-├── packages/
-│   ├── components/           # 框架内建 UI 组件库（子包，跨应用共享）
-│   ├── settings/             # 框架设置（子包，跨应用共享）
-│   └── themes/               # 主题配置（子包，跨应用共享）
-├── scripts/                  # 工程脚本
-└── pnpm-workspace.yaml       # monorepo workspace 配置
-```
-
-## 常用命令
-
-```bash
-pnpm dev          # 启动开发服务器
-pnpm build        # 构建
-pnpm lint         # 运行全量 lint（tsc + eslint + stylelint）
-```
-
-## 开发规范
-
-- 使用 `<script setup lang="ts">` 语法
-- 样式优先使用 UnoCSS 原子类，复杂样式用 SCSS
-- 组件命名使用 PascalCase，文件名与组件名一致
-- API 模块放在 `apps/<app>/src/api/modules/`，按业务模块拆分
-- Store 模块放在 `apps/<app>/src/store/modules/`，使用 Pinia composition API 风格
-- 路由配置在 `apps/<app>/src/router/`，meta 属性可借助 fa-route-generator skill
-
-## 注意事项
-
-- 框架内建组件在 `packages/components/` 子包中，优先使用内建组件而非第三方组件或自定义实现
-- 在任何情况下都请勿直接修改内建组件，确定修改前需要和用户进行确认
-- Mock 数据使用 `vite-plugin-fake-server`，文件放在 `apps/<app>/src/api/modules/` 对应模块旁
-- 代码提交前会自动运行 lint-staged，确保代码符合规范
-- Node.js 版本要求以根目录下 `package.json` 中定义的为准
-
-## 反复修改检测
-
-在使用任何 fa-* 系列技能时，如果用户针对同一功能点已经要求修改 3 次及以上仍未达到预期（例如连续说"不对"、"再改改"、"还是不行"），必须触发 fa-feedback 技能，询问用户是否将问题反馈给框架作者。

CLAUDE.md

@@ -1 +0,0 @@
-AGENTS.md

README.EN.md

@@ -1,124 +0,0 @@
-[中文](./README.md) | **English**
-
-<p align="center">
-  <img src="https://fantastic-admin.hurui.me/logo.svg" width="200" height="200" alt="Fantastic-admin" />
-</p>
-
-<h1 align="center">Fantastic-admin</h1>
-
-<p align="center">An <b>out-of-the-box</b> Vue3 management system framework</p>
-
-<p align="center">
-  <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>
-
-## 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
-
-## Download
-
-> This repository is the basic version
-
-**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>
-
-## 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.
-
-[![star](https://img.shields.io/github/stars/fantastic-admin/basic?style=social)](https://github.com/fantastic-admin/basic)
-
-<details>
-<summary>Github Stars Curve</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>

README.md

@@ -1,12 +1,10 @@
-**中文** | [English](./README.EN.md)
-
 <p align="center">
-  <img src="https://fantastic-admin.hurui.me/logo.svg" width="200" height="200" alt="Fantastic-admin" />
+  <img src="https://fantastic-admin.hurui.me/logo.svg" width="200" height="200" />
 </p>
 
 <h1 align="center">Fantastic-admin</h1>
 
-<p align="center">一款<b>开箱即用</b>的 Vue3 管理系统框架</p>
+<p align="center">一款<b>开箱即用</b>的 Vue3 中后台管理系统框架</p>
 
 <p align="center">
   <a href="https://fantastic-admin.hurui.me" target="_blank">官网</a>
@@ -15,8 +13,8 @@
 <p>
 
 <p align="center">
-  <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>
+  <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" /></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" /></a>
 </p>
 
 ## 特点
@@ -35,7 +33,12 @@
 
 > 本仓库为基础版
 
-**直接拉取源码可能会包含未发布的内容，推荐去 [Github Releases](https://github.com/fantastic-admin/basic/releases) 页面下载稳定版本的压缩包**。
+**直接拉取源码可能会包含未发布的内容，推荐去 [Github Releases](https://github.com/fantastic-admin/basic/releases) 页面下载稳定版本的压缩包**。如果确定需要拉取源码，请参考下列分支说明：
+
+- `main` Vue3 版本框架源码分支，不含示例代码，可直接用于实际开发
+- `example` Vue3 版本演示源码分支，同线上演示站，包含大量示例，可用于参考学习
+- `vue2` Vue2 版本框架源码分支，不含示例代码，可直接用于实际开发（停止维护）
+- `vue2-example` Vue2 版本演示源码分支，包含大量示例，可用于参考学习（停止维护）
 
 ## 预览
 
@@ -43,27 +46,25 @@
 
 <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>
+    <td><img src="https://fantastic-admin.hurui.me/preview1.png" /></td>
+    <td><img src="https://fantastic-admin.hurui.me/preview2.png" /></td>
+    <td><img src="https://fantastic-admin.hurui.me/preview3.png" /></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>
+    <td><img src="https://fantastic-admin.hurui.me/preview4.png" /></td>
+    <td><img src="https://fantastic-admin.hurui.me/preview5.png" /></td>
+    <td><img src="https://fantastic-admin.hurui.me/preview6.png" /></td>
   </tr>
 </table>
 
 ## 支持
 
-如果觉得 Fantastic-admin 这个框架不错，或者已经在使用了，希望你可以在 **Github** / **Gitee** / **GitCode** 帮我点个 ⭐ ，这将对我是极大的鼓励。
+如果觉得 Fantastic-admin 这个框架不错，或者已经在使用了，希望你可以在 **Github** 或者 **Gitee(码云)** 帮我点个 ⭐ ，这将对我是极大的鼓励。
 
 [![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 曲线</summary>
 
@@ -93,18 +94,18 @@
   </tr>
   <tr>
     <th colspan="3" align="center">
-      一款干啥都快人一步的 Vue 后台管理系统框架
+      一款干啥都快人一步的 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>
+    <td><img src="https://one-step-admin.hurui.me/preview1.png" /></td>
+    <td><img src="https://one-step-admin.hurui.me/preview2.png" /></td>
+    <td><img src="https://one-step-admin.hurui.me/preview3.png" /></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>
+    <td><img src="https://one-step-admin.hurui.me/preview4.png" /></td>
+    <td><img src="https://one-step-admin.hurui.me/preview5.png" /></td>
+    <td><img src="https://one-step-admin.hurui.me/preview6.png" /></td>
   </tr>
 </table>
 
@@ -120,9 +121,9 @@
     </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>
+    <td><img src="https://fantastic-mobile.hurui.me/preview1.png" /></td>
+    <td><img src="https://fantastic-mobile.hurui.me/preview2.png" /></td>
+    <td><img src="https://fantastic-mobile.hurui.me/preview3.png" /></td>
+    <td><img src="https://fantastic-mobile.hurui.me/preview4.png" /></td>
   </tr>
 </table>

apps/core/.env.development

@@ -1,40 +0,0 @@
-# 应用配置面板
-# 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/.env.production

@@ -1,42 +0,0 @@
-# 应用配置面板
-# 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. =====
-
-# 禁用浏览器开发者工具
-# Disable browser developer tools
-VITE_APP_DISABLE_DEVTOOL = false
-
-# 启用假数据
-# 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/.env.test

@@ -1,42 +0,0 @@
-# 应用配置面板
-# 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. =====
-
-# 禁用浏览器开发者工具
-# Disable browser developer tools
-VITE_APP_DISABLE_DEVTOOL = false
-
-# 启用假数据
-# 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/package.json

@@ -1,83 +0,0 @@
-{
-  "name": "@fantastic-admin/core",
-  "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": "tsx ./scripts/generate.icons.ts",
-    "lint": "vue-tsc -b"
-  },
-  "dependencies": {
-    "@fantastic-admin/components": "workspace:*",
-    "@fantastic-admin/settings": "workspace:*",
-    "@fantastic-admin/types": "workspace:*",
-    "@vee-validate/zod": "catalog:",
-    "@vueuse/core": "catalog:",
-    "@vueuse/integrations": "catalog:",
-    "@zumer/snapdom": "catalog:",
-    "axios": "catalog:",
-    "class-variance-authority": "catalog:",
-    "clsx": "catalog:",
-    "dayjs": "catalog:",
-    "disable-devtool": "catalog:",
-    "element-plus": "catalog:",
-    "eruda": "catalog:",
-    "es-toolkit": "catalog:",
-    "hotkeys-js": "catalog:",
-    "lucide-vue-next": "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": {
-    "@clack/prompts": "catalog:",
-    "@faker-js/faker": "catalog:",
-    "@fantastic-admin/copyright": "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:",
-    "tsx": "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/scripts/generate.icons.ts

@@ -1,108 +0,0 @@
-import { spawn } from 'node:child_process'
-import fs from 'node:fs'
-import path from 'node:path'
-import process from 'node:process'
-import * as p from '@clack/prompts'
-import { lookupCollection, lookupCollections } from '@iconify/json'
-
-// 拿到全部图标集的原始数据
-const raw = await lookupCollections()
-
-let lastChoose = fs.readFileSync(path.resolve(process.cwd(), 'src/iconify/index.json'), 'utf-8')
-lastChoose = JSON.parse(lastChoose)
-
-// 取出可使用的图标集数据用于选择，并按名称排序
-const collections = Object.entries(raw).map(([id, item]) => ({
-  ...item,
-  id,
-})).sort((a, b) => a.name.localeCompare(b.name))
-
-p.intro('图标集生成工具')
-
-/**
- * 分别会在对应目录下生成以下文件，其中(1)(3)用于离线下载并安装图标，(2)用于图标选择器使用
- * (1) src/iconify/index.json    记录用户交互信息
- * (2) src/iconify/data.json     包含多个图标集数据，仅记录图标名
- * (3) public/icons/*-raw.json   多个图标集的原始数据，独立存放，用于离线使用
- */
-const answers = await p.group(
-  {
-    collections: () =>
-      p.multiselect({
-        message: '请选择需要生成的图标集',
-        options: collections.map(item => ({
-          label: item.name,
-          value: item.id,
-          hint: `${item.total} 个图标`,
-        })),
-        initialValues: lastChoose.collections,
-      }),
-    isOfflineUse: () =>
-      p.confirm({
-        message: '是否需要离线使用',
-        initialValue: false,
-      }),
-  },
-  {
-    onCancel: () => {
-      p.cancel('操作已取消')
-      process.exit(0)
-    },
-  },
-)
-
-const spinner = p.spinner()
-spinner.start('正在生成图标集...')
-
-await fs.writeJSON(
-  path.resolve(process.cwd(), 'src/iconify/index.json'),
-  {
-    collections: answers.collections,
-    isOfflineUse: answers.isOfflineUse,
-  },
-)
-
-const outputDir = path.resolve(process.cwd(), 'public/icons')
-await fs.ensureDir(outputDir)
-await fs.emptyDir(outputDir)
-
-const collectionsMeta: object[] = []
-for (const info of answers.collections) {
-  const setData = await lookupCollection(info)
-
-  collectionsMeta.push({
-    prefix: setData.prefix,
-    info: setData.info,
-    icons: Object.keys(setData.icons),
-  })
-
-  const offlineFilePath = path.join(outputDir, `${info}-raw.json`)
-
-  if (answers.isOfflineUse) {
-    await fs.writeJSON(offlineFilePath, setData)
-  }
-}
-
-await fs.writeJSON(
-  path.resolve(process.cwd(), 'src/iconify/data.json'),
-  collectionsMeta,
-)
-
-// 使用 spawn 运行 eslint
-const eslint = spawn('eslint', ['src/iconify/data.json', 'src/iconify/index.json', '--cache', '--fix'], {
-  stdio: 'inherit',
-  shell: true,
-})
-
-eslint.on('error', (err) => {
-  p.log.error(`ESLint 执行失败: ${err.message}`)
-  process.exit(1)
-})
-
-eslint.on('close', (code) => {
-  if (code !== 0) {
-    p.log.error(`ESLint 执行失败，退出码: ${code}`)
-    process.exit(code)
-  }
-  spinner.stop('图标集生成完成！')
-})

apps/core/src/App.vue

@@ -1,60 +0,0 @@
-<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/src/api/modules/app.fake.ts

@@ -1,312 +0,0 @@
-import { faker } from '@faker-js/faker'
-import { defineFakeRoute } from 'vite-plugin-fake-server/client'
-
-export default defineFakeRoute([
-  {
-    url: '/fake/app/route/list',
-    method: 'get',
-    response: () => {
-      return {
-        error: '',
-        status: 1,
-        data: [
-          // 主导航
-          {
-            meta: {
-              title: '演示',
-              icon: 'uim:box',
-            },
-            children: [
-              // 次导航（一级路由）
-              {
-                path: '/multilevel_menu_example',
-                component: 'Layout',
-                name: 'multilevelMenuExample',
-                meta: {
-                  title: 'route.multimenu.root',
-                  icon: 'heroicons-solid:menu-alt-3',
-                },
-                children: [
-                  // 次导航（二级路由）
-                  {
-                    path: 'page',
-                    name: 'multilevelMenuExample1',
-                    component: 'multilevel_menu_example/page.vue',
-                    meta: {
-                      title: 'route.multimenu.page',
-                    },
-                  },
-                  {
-                    path: 'level2',
-                    name: 'multilevelMenuExample2',
-                    meta: {
-                      title: 'route.multimenu.level2.root',
-                    },
-                    children: [
-                      // 次导航（三级路由）
-                      {
-                        path: 'page',
-                        name: 'multilevelMenuExample2-1',
-                        component: 'multilevel_menu_example/level2/page.vue',
-                        meta: {
-                          title: 'route.multimenu.level2.page',
-                        },
-                      },
-                      {
-                        path: 'level3',
-                        name: 'multilevelMenuExample2-2',
-                        meta: {
-                          title: 'route.multimenu.level2.level3.root',
-                        },
-                        children: [
-                          // 次导航（四级路由）
-                          {
-                            path: 'page1',
-                            name: 'multilevelMenuExample2-2-1',
-                            component: 'multilevel_menu_example/level2/level3/page1.vue',
-                            meta: {
-                              title: 'route.multimenu.level2.level3.page1',
-                            },
-                          },
-                          {
-                            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',
-                    },
-                  },
-                ],
-              },
-            ],
-          },
-          {
-            meta: {
-              title: '页面',
-              icon: 'ri:pages-line',
-              auth: 'permission.browse',
-            },
-            children: [
-              {
-                path: '/pages_example/general',
-                component: 'Layout',
-                name: 'pagesExampleGeneral',
-                meta: {
-                  title: '通用',
-                  icon: 'ri:function-line',
-                },
-                children: [
-                  {
-                    path: 'manager',
-                    name: 'pagesExampleGeneralManager',
-                    meta: {
-                      title: '管理员管理',
-                    },
-                    children: [
-                      {
-                        path: '',
-                        name: 'pagesExampleGeneralManagerList',
-                        component: 'pages_example/manager/list.vue',
-                        meta: {
-                          title: '管理员列表',
-                          menu: false,
-                          breadcrumb: false,
-                        },
-                      },
-                      {
-                        path: 'detail',
-                        name: 'pagesExampleGeneralManagerCreate',
-                        component: 'pages_example/manager/detail.vue',
-                        meta: {
-                          title: '新增管理员',
-                          menu: false,
-                          activeMenu: '/pages_example/general/manager',
-                        },
-                      },
-                      {
-                        path: 'detail/:id',
-                        name: 'pagesExampleGeneralManagerEdit',
-                        component: 'pages_example/manager/detail.vue',
-                        meta: {
-                          title: '编辑管理员',
-                          menu: false,
-                          activeMenu: '/pages_example/general/manager',
-                        },
-                      },
-                    ],
-                  },
-                ],
-              },
-            ],
-          },
-        ],
-      }
-    },
-  },
-  {
-    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',
-                            },
-                          },
-                        ],
-                      },
-                    ],
-                  },
-                ],
-              },
-              {
-                path: '/permission_example',
-                meta: {
-                  title: '权限验证',
-                  icon: 'ri:shield-keyhole-line',
-                },
-              },
-            ],
-          },
-        ],
-      }
-    },
-  },
-  {
-    url: '/fake/app/account/login',
-    method: 'post',
-    response: ({ body }) => {
-      return {
-        error: '',
-        status: 1,
-        data: {
-          account: body.account,
-          token: `${body.account}:${faker.internet.jwt()}`,
-          avatar: `https://api.dicebear.com/9.x/bottts-neutral/svg?seed=${body.account}`,
-        },
-      }
-    },
-  },
-  {
-    url: '/fake/app/account/permission',
-    method: 'get',
-    response: ({ headers }) => {
-      let permissions: string[] = []
-      if (headers.token?.indexOf('admin') === 0) {
-        permissions = [
-          'pages.general:browse',
-          'pages.form:browse',
-          'pages.list:browse',
-          'pages.shop:browse',
-        ]
-      }
-      else if (headers.token?.indexOf('test') === 0) {
-        permissions = [
-          'pages.general:browse',
-        ]
-      }
-      return {
-        error: '',
-        status: 1,
-        data: {
-          permissions,
-        },
-      }
-    },
-  },
-  {
-    url: '/fake/app/account/password/edit',
-    method: 'post',
-    response: () => {
-      return {
-        error: '',
-        status: 1,
-        data: {
-          isSuccess: true,
-        },
-      }
-    },
-  },
-])

apps/core/src/api/modules/app.ts

@@ -1,30 +0,0 @@
-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/src/assets/styles/globals.css

@@ -1,80 +0,0 @@
-/* 页面布局 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/src/components/AppAccountButton/index.vue

@@ -1,94 +0,0 @@
-<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/src/components/AppAccountForm/edit-password.vue

@@ -1,101 +0,0 @@
-<script setup lang="ts">
-import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
-import * as z from 'zod'
-import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
-
-defineOptions({
-  name: 'EditPasswordForm',
-})
-
-const appAccountStore = useAppAccountStore()
-
-const loading = ref(false)
-
-const form = useForm({
-  validationSchema: toTypedSchema(
-    z.object({
-      password: z.string().min(1, '请输入原密码'),
-      newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
-      checkPassword: z.string().min(1, '请确认新密码'),
-    }).refine(data => data.newPassword === data.checkPassword, {
-      message: '两次输入的密码不一致',
-      path: ['checkPassword'],
-    }),
-  ),
-  initialValues: {
-    password: '',
-    newPassword: '',
-    checkPassword: '',
-  },
-})
-const onSubmit = form.handleSubmit((values) => {
-  loading.value = true
-  appAccountStore.editPassword(values).then(async () => {
-    faToast.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>
-    <form @submit="onSubmit">
-      <FormField v-slot="{ componentField, errors }" name="password">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="原密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FormField v-slot="{ componentField, errors }" name="newPassword">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="新密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FormField v-slot="{ componentField, errors }" name="checkPassword">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="确认密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FaButton :loading="loading" size="lg" class="mt-8 w-full" type="submit">
-        保存
-      </FaButton>
-    </form>
-  </div>
-</template>

apps/core/src/components/AppAccountForm/login.vue

@@ -1,158 +0,0 @@
-<script setup lang="ts">
-import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
-import * as z from 'zod'
-import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
-
-defineOptions({
-  name: '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')
-
-const form = useForm({
-  validationSchema: toTypedSchema(z.object({
-    account: z.string().min(1, '请输入用户名'),
-    password: z.string().min(1, '请输入密码'),
-    remember: z.boolean(),
-  })),
-  initialValues: {
-    account: props.account ?? localStorage.getItem('login_account') ?? '',
-    password: '',
-    remember: localStorage.getItem('login_account') !== null,
-  },
-})
-const onSubmit = form.handleSubmit((values) => {
-  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
-  })
-})
-
-function testAccount(account: string) {
-  form.setFieldValue('account', account)
-  form.setFieldValue('password', '123456')
-  onSubmit()
-}
-</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'">
-      <form @submit="onSubmit">
-        <FormField v-slot="{ componentField, errors }" name="account">
-          <FormItem class="pb-6 relative space-y-0">
-            <FormControl>
-              <FaInput type="text" placeholder="用户名" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-                <template #start>
-                  <FaIcon name="i-lucide:user" />
-                </template>
-              </FaInput>
-            </FormControl>
-            <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-              <FormMessage class="text-xs bottom-1 absolute" />
-            </Transition>
-          </FormItem>
-        </FormField>
-        <FormField v-slot="{ componentField, errors }" name="password">
-          <FormItem class="pb-6 relative space-y-0">
-            <FormControl>
-              <FaInput type="password" placeholder="密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-                <template #start>
-                  <FaIcon name="i-lucide:lock" />
-                </template>
-              </FaInput>
-            </FormControl>
-            <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-              <FormMessage class="text-xs bottom-1 absolute" />
-            </Transition>
-          </FormItem>
-        </FormField>
-        <div class="mb-4 flex-center-between">
-          <div class="flex-center-start">
-            <FormField v-slot="{ componentField }" type="checkbox" name="remember">
-              <FormItem>
-                <FormControl>
-                  <FaCheckbox v-bind="componentField">
-                    记住我
-                  </FaCheckbox>
-                </FormControl>
-              </FormItem>
-            </FormField>
-          </div>
-          <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onResetPassword', form.values.account)">
-            忘记密码了?
-          </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', form.values.account)">
-            注册新帐号
-          </FaButton>
-        </div>
-      </form>
-      <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/src/components/AppAccountForm/register.vue

@@ -1,112 +0,0 @@
-<script setup lang="ts">
-import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
-import * as z from 'zod'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
-
-defineOptions({
-  name: 'RegisterForm',
-})
-
-const props = defineProps<{
-  account?: string
-}>()
-
-const emits = defineEmits<{
-  onLogin: [account?: string]
-  onRegister: [account?: string]
-}>()
-
-const loading = ref(false)
-
-const form = useForm({
-  validationSchema: toTypedSchema(
-    z.object({
-      account: z.string().min(1, '请输入用户名'),
-      password: z.string().min(1, '请输入密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
-      checkPassword: z.string().min(1, '请再次输入密码'),
-    }).refine(data => data.password === data.checkPassword, {
-      message: '两次输入的密码不一致',
-      path: ['checkPassword'],
-    }),
-  ),
-  initialValues: {
-    account: props.account ?? '',
-    password: '',
-    checkPassword: '',
-  },
-})
-const onSubmit = form.handleSubmit((values) => {
-  loading.value = true
-  emits('onRegister', values.account)
-})
-</script>
-
-<template>
-  <div class="p-12 flex-col-stretch-center min-h-500px w-full">
-    <form @submit="onSubmit">
-      <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>
-      <FormField v-slot="{ componentField, errors }" name="account">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="text" placeholder="用户名" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:user" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FormField v-slot="{ componentField, value, errors }" name="password">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <FormDescription>
-            <FaPasswordStrength :password="value" />
-          </FormDescription>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FormField v-slot="{ componentField, errors }" name="checkPassword">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="确认密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FaButton :loading="loading" size="lg" class="mt-4 w-full" type="submit">
-        注册
-      </FaButton>
-      <div class="text-sm mt-4 flex-center gap-2">
-        <span class="text-secondary-foreground op-50">已经有帐号?</span>
-        <FaButton variant="link" class="p-0 h-auto" @click="emits('onLogin', form.values.account)">
-          去登录
-        </FaButton>
-      </div>
-    </form>
-  </div>
-</template>

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

@@ -1,116 +0,0 @@
-<script setup lang="ts">
-import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
-import * as z from 'zod'
-import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
-
-defineOptions({
-  name: 'ResetPasswordForm',
-})
-
-const props = defineProps<{
-  account?: string
-}>()
-
-const emits = defineEmits<{
-  onLogin: [account?: string]
-  onResetPassword: [account?: string]
-}>()
-
-const loading = ref(false)
-
-const form = useForm({
-  validationSchema: toTypedSchema(z.object({
-    account: z.string().min(1, '请输入用户名'),
-    captcha: z.string().min(6, '请输入验证码'),
-    newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
-  })),
-  initialValues: {
-    account: props.account ?? '',
-    captcha: '',
-    newPassword: '',
-  },
-})
-const onSubmit = form.handleSubmit((values) => {
-  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">
-    <form @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>
-      <FormField v-slot="{ componentField, errors }" name="account">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="text" placeholder="用户名" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:user" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <div class="flex-start-between gap-2">
-        <FormField v-slot="{ componentField, value, setValue }" name="captcha">
-          <FormItem class="pb-6 relative space-y-0">
-            <FormControl>
-              <FaInputOTP :model-value="value" :name="componentField.name" :length="6" class="border-destructive" @update:model-value="val => setValue(val)" />
-            </FormControl>
-            <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-              <FormMessage class="text-xs bottom-1 absolute" />
-            </Transition>
-          </FormItem>
-        </FormField>
-        <FaButton variant="outline" :disabled="countdown > 0" class="px-4 flex-1" @click="handleSendCaptcha">
-          {{ countdown === 0 ? '发送验证码' : `${countdown} 秒后重发` }}
-        </FaButton>
-      </div>
-      <FormField v-slot="{ componentField, errors }" name="newPassword">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="新密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FaButton :loading="loading" size="lg" class="mt-4 w-full" type="submit">
-        确认
-      </FaButton>
-      <div class="text-sm mt-4 flex-center gap-2">
-        <FaButton variant="link" class="p-0 h-auto" @click="emits('onLogin', form.values.account)">
-          去登录
-        </FaButton>
-      </div>
-    </form>
-  </div>
-</template>

apps/core/src/components/AppAuth/index.vue

@@ -1,21 +0,0 @@
-<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/src/components/AppCopyright/index.vue

@@ -1,20 +0,0 @@
-<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/src/components/AppNotAllowed/index.vue

@@ -1,53 +0,0 @@
-<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/src/components/AppNotSupportedMobile/index.vue

@@ -1,34 +0,0 @@
-<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/src/components/AppSystemInfo/index.vue

@@ -1,72 +0,0 @@
-<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/src/composables/app/auth.ts

@@ -1,32 +0,0 @@
-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/src/composables/app/menu.ts

@@ -1,27 +0,0 @@
-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/src/composables/app/page.ts

@@ -1,20 +0,0 @@
-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/src/composables/app/tabbar.ts

@@ -1,150 +0,0 @@
-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 && faToast.warning('关闭的标签页不存在', {
-        position: 'top-center',
-      })
-    }
-    else if (appTabbarStore.list.length <= 1) {
-      flag = false
-      !checkOnly && faToast.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/src/composables/pagination.ts

@@ -1,46 +0,0 @@
-export function usePagination() {
-  const pagination = ref({
-    page: 1,
-    size: 10,
-    total: 0,
-    sort: null as string | null,
-    order: null as string | null,
-  })
-
-  function getParams() {
-    return {
-      // page,size 和 from,limit 是分页的两种方式，方便兼容两种接口
-      page: pagination.value.page,
-      size: pagination.value.size,
-      from: (pagination.value.page - 1) * pagination.value.size,
-      limit: pagination.value.size,
-      ...(
-        pagination.value.sort && pagination.value.order && {
-          sort: pagination.value.sort,
-          order: pagination.value.order,
-        }
-      ),
-    }
-  }
-
-  async function onSizeChange(size: number) {
-    pagination.value.size = size
-  }
-
-  async function onCurrentChange(page: number) {
-    pagination.value.page = page
-  }
-
-  async function onSortChange(prop: string, order: string) {
-    pagination.value.sort = prop
-    pagination.value.order = order === 'ascending' ? 'asc' : 'desc'
-  }
-
-  return {
-    pagination,
-    getParams,
-    onSizeChange,
-    onCurrentChange,
-    onSortChange,
-  }
-}

apps/core/src/hotkeys/README.md

@@ -1,107 +0,0 @@
-# Hotkeys 设计说明
-
-这个目录参考 `fantastic-admin/v6-dev/apps/example/src/hotkeys` 的设计，目标是把当前项目里分散在各组件中的快捷键逻辑收拢成一套轻量方案。
-
-## 设计目标
-
-当前方案只解决 4 件事：
-
-1. 快捷键定义不要散落在多个组件里重复写
-2. 快捷键帮助面板不要再手写一份展示文案
-3. 业务组件不要反复手写 `hotkeys()` / `unbind()`
-4. 不引入过重的 command system
-
-所以采用：
-
-- `registry.ts` 统一定义
-- `useHotkeys.ts` 统一注册
-- 业务 handler 仍留在业务组件
-
-这是一种“集中定义 + 就地执行”的轻量折中方案。
-
-## 目录职责
-
-### `registry.ts`
-
-统一维护当前项目的快捷键元数据：
-
-- id
-- keys
-- enabled
-- help
-
-这里负责：
-
-- 统一的 id 常量
-- 真实键位
-- 是否启用的条件
-- 帮助面板展示文案
-- 聚合业务扩展
-
-> 注意：这里不放业务逻辑 handler。
-
-### `registry.extend.ts`
-
-用于放置项目自定义扩展快捷键，避免把业务项全部堆进内建定义中。
-
-### `types.ts`
-
-定义快捷键系统的基础类型，包括：
-
-- `HotkeyBinding`
-- `HotkeyContext`
-- `HotkeyHelpMeta`
-- `HotkeyHandler`
-
-### `useHotkeys.ts`
-
-对 `hotkeys-js` 的薄封装，提供：
-
-- `useHotkey`：注册单个快捷键
-- `useHotkeyBindings`：批量注册快捷键
-
-并统一处理：
-
-- 注册 / 卸载
-- `active` 启停
-- `binding.enabled` 可用性判断
-- 默认 `preventDefault`
-
-## 当前项目已落地的快捷键
-
-### 全局
-
-- `system.info.open`
-- `menuSearch.open`
-- `page.reload`
-
-### 主导航
-
-- `menu.next`
-- `menu.prev`
-
-### 标签栏
-
-- `tabbar.prev`
-- `tabbar.next`
-- `tabbar.closeCurrent`
-- `tabbar.gotoVisibleIndex`
-- `tabbar.gotoLast`
-
-### 菜单搜索弹窗
-
-- `menuSearch.moveUp`
-- `menuSearch.moveDown`
-- `menuSearch.confirm`
-- `menuSearch.close`
-
-## 使用约定
-
-1. 新增快捷键，优先在 `registry.ts` 或 `registry.extend.ts` 补定义
-2. 展示在帮助面板中的快捷键，必须配置 `help`
-3. handler 尽量保留在最了解业务的组件中
-4. 不直接在业务组件里继续散写 `hotkeys('xxx')`
-
-## 现阶段差异
-
-参考项目里还有页面最大化相关快捷键；当前项目暂未引入对应页面最大化能力，所以本次迁移只保留当前项目已有功能，并把原有 `F5` 页面刷新也纳入统一 registry 管理。

apps/core/src/hotkeys/registry.extend.ts

@@ -1,22 +0,0 @@
-import type { HotkeyBinding } from './types'
-
-/**
- * 业务扩展快捷键 id
- *
- * 使用方式：
- *
- * export const EXT_HOTKEY_ID = {
- *   demoOpen: 'demo.open',
- * } as const
- */
-export const EXT_HOTKEY_ID = {} as const
-
-/**
- * 业务扩展全局快捷键
- */
-export const extendGlobalHotkeyBindings: HotkeyBinding[] = []
-
-/**
- * 业务扩展局部快捷键
- */
-export const extendScopedHotkeyBindings: HotkeyBinding[] = []

apps/core/src/hotkeys/registry.ts

@@ -1,210 +0,0 @@
-import type { HotkeyBinding } from './types'
-import { EXT_HOTKEY_ID, extendGlobalHotkeyBindings, extendScopedHotkeyBindings } from './registry.extend'
-
-export const HOTKEY_ID = {
-  systemInfoOpen: 'system.info.open',
-  menuSearchOpen: 'menuSearch.open',
-  menuNext: 'menu.next',
-  menuPrev: 'menu.prev',
-  tabbarPrev: 'tabbar.prev',
-  tabbarNext: 'tabbar.next',
-  tabbarCloseCurrent: 'tabbar.closeCurrent',
-  tabbarGotoVisibleIndex: 'tabbar.gotoVisibleIndex',
-  tabbarGotoLast: 'tabbar.gotoLast',
-  pageReload: 'page.reload',
-  menuSearchMoveUp: 'menuSearch.moveUp',
-  menuSearchMoveDown: 'menuSearch.moveDown',
-  menuSearchConfirm: 'menuSearch.confirm',
-  menuSearchClose: 'menuSearch.close',
-  ...EXT_HOTKEY_ID,
-} as const
-
-export const hotkeyIds = Object.values(HOTKEY_ID)
-
-/**
- * Hotkeys registry 维护约定
- *
- * 1. 新增快捷键优先在这里补充定义，不要在业务组件里直接写死键位字符串
- * 2. 这里仅维护“定义”和“展示元数据”，不要把业务 handler 塞进 registry
- * 3. 配置类开关尽量写在 enabled / help.visible 中，避免帮助面板与真实行为不一致
- * 4. 需要展示在快捷键帮助面板中的项，必须补充 help
- * 5. 仅局部场景使用的快捷键，也建议在这里定义，再由对应组件按需注册
- */
-export const globalHotkeyBindings: HotkeyBinding[] = [
-  {
-    id: HOTKEY_ID.systemInfoOpen,
-    keys: ['command+i', 'ctrl+i'],
-    help: {
-      group: 'global',
-      titleKey: 'global.system',
-      order: 10,
-      displayKeys: {
-        default: ['Ctrl', 'I'],
-        mac: ['⌘', 'I'],
-      },
-    },
-  },
-  {
-    id: HOTKEY_ID.menuSearchOpen,
-    keys: ['command+k', 'ctrl+k'],
-    enabled: ctx => ctx.settings.toolbar.menuSearch.enable && ctx.settings.toolbar.menuSearch.hotkeys,
-    help: {
-      group: 'global',
-      titleKey: 'global.search',
-      order: 20,
-      visible: ctx => ctx.settings.toolbar.menuSearch.enable && ctx.settings.toolbar.menuSearch.hotkeys,
-      displayKeys: {
-        default: ['Ctrl', 'K'],
-        mac: ['⌘', 'K'],
-      },
-    },
-  },
-  {
-    id: HOTKEY_ID.menuNext,
-    keys: ['alt+`'],
-    enabled: ctx => ctx.settings.menu.hotkeys && ['side', 'head'].includes(ctx.settings.menu.mode),
-    help: {
-      group: 'nav',
-      titleKey: 'nav.next',
-      order: 10,
-      visible: ctx => ctx.settings.menu.hotkeys && ['side', 'head'].includes(ctx.settings.menu.mode),
-      displayKeys: {
-        default: ['Alt', '`'],
-        mac: ['⌥', '`'],
-      },
-    },
-  },
-  {
-    id: HOTKEY_ID.menuPrev,
-    keys: ['alt+shift+`'],
-    enabled: ctx => ctx.settings.menu.hotkeys && ['side', 'head'].includes(ctx.settings.menu.mode),
-    help: {
-      group: 'nav',
-      titleKey: 'nav.prev',
-      order: 20,
-      visible: ctx => ctx.settings.menu.hotkeys && ['side', 'head'].includes(ctx.settings.menu.mode),
-      displayKeys: {
-        default: ['Alt', 'Shift', '`'],
-        mac: ['⌥', '⇧', '`'],
-      },
-    },
-  },
-  {
-    id: HOTKEY_ID.tabbarPrev,
-    keys: ['alt+left'],
-    enabled: ctx => ctx.settings.topbar.tabbar && ctx.settings.tabbar.hotkeys,
-    help: {
-      group: 'tabbar',
-      titleKey: 'tabbar.prev',
-      order: 10,
-      visible: ctx => ctx.settings.topbar.tabbar && ctx.settings.tabbar.hotkeys,
-      displayKeys: {
-        default: ['Alt', '←'],
-        mac: ['⌥', '←'],
-      },
-    },
-  },
-  {
-    id: HOTKEY_ID.tabbarNext,
-    keys: ['alt+right'],
-    enabled: ctx => ctx.settings.topbar.tabbar && ctx.settings.tabbar.hotkeys,
-    help: {
-      group: 'tabbar',
-      titleKey: 'tabbar.next',
-      order: 20,
-      visible: ctx => ctx.settings.topbar.tabbar && ctx.settings.tabbar.hotkeys,
-      displayKeys: {
-        default: ['Alt', '→'],
-        mac: ['⌥', '→'],
-      },
-    },
-  },
-  {
-    id: HOTKEY_ID.tabbarCloseCurrent,
-    keys: ['alt+w'],
-    enabled: ctx => ctx.settings.topbar.tabbar && ctx.settings.tabbar.hotkeys,
-    help: {
-      group: 'tabbar',
-      titleKey: 'tabbar.close',
-      order: 30,
-      visible: ctx => ctx.settings.topbar.tabbar && ctx.settings.tabbar.hotkeys,
-      displayKeys: {
-        default: ['Alt', 'W'],
-        mac: ['⌥', 'W'],
-      },
-    },
-  },
-  {
-    id: HOTKEY_ID.tabbarGotoVisibleIndex,
-    keys: ['alt+1', 'alt+2', 'alt+3', 'alt+4', 'alt+5', 'alt+6', 'alt+7', 'alt+8', 'alt+9'],
-    enabled: ctx => ctx.settings.topbar.tabbar && ctx.settings.tabbar.hotkeys,
-    help: {
-      group: 'tabbar',
-      titleKey: 'tabbar.n',
-      order: 40,
-      visible: ctx => ctx.settings.topbar.tabbar && ctx.settings.tabbar.hotkeys,
-      displayKeys: {
-        default: ['Alt', '1~9'],
-        mac: ['⌥', '1~9'],
-      },
-    },
-  },
-  {
-    id: HOTKEY_ID.tabbarGotoLast,
-    keys: ['alt+0'],
-    enabled: ctx => ctx.settings.topbar.tabbar && ctx.settings.tabbar.hotkeys,
-    help: {
-      group: 'tabbar',
-      titleKey: 'tabbar.last',
-      order: 50,
-      visible: ctx => ctx.settings.topbar.tabbar && ctx.settings.tabbar.hotkeys,
-      displayKeys: {
-        default: ['Alt', '0'],
-        mac: ['⌥', '0'],
-      },
-    },
-  },
-  {
-    id: HOTKEY_ID.pageReload,
-    keys: ['f5'],
-  },
-  ...extendGlobalHotkeyBindings,
-]
-
-export const menuSearchHotkeyBindings: HotkeyBinding[] = [
-  {
-    id: HOTKEY_ID.menuSearchMoveUp,
-    keys: ['up'],
-  },
-  {
-    id: HOTKEY_ID.menuSearchMoveDown,
-    keys: ['down'],
-  },
-  {
-    id: HOTKEY_ID.menuSearchConfirm,
-    keys: ['enter'],
-  },
-  {
-    id: HOTKEY_ID.menuSearchClose,
-    keys: ['esc'],
-  },
-]
-
-export const hotkeyBindings: HotkeyBinding[] = [
-  ...globalHotkeyBindings,
-  ...menuSearchHotkeyBindings,
-  ...extendScopedHotkeyBindings,
-]
-
-if (import.meta.env.DEV) {
-  const registeredIds = hotkeyBindings.map(item => item.id)
-  const missingIds = hotkeyIds.filter(id => !registeredIds.includes(id))
-  const duplicateIds = registeredIds.filter((id, index) => registeredIds.indexOf(id) !== index)
-
-  if (missingIds.length || duplicateIds.length) {
-    console.warn('[hotkeys] registry consistency check failed', {
-      missingIds,
-      duplicateIds: [...new Set(duplicateIds)],
-    })
-  }
-}

apps/core/src/hotkeys/types.ts

@@ -1,38 +0,0 @@
-import type { useAppSettingsStore } from '@/store/modules/app/settings'
-
-export type HotkeyHelpGroup = 'global' | 'nav' | 'tabbar' | 'page'
-export type HotkeyId = typeof import('./registry').HOTKEY_ID[keyof typeof import('./registry').HOTKEY_ID]
-
-export interface HotkeyContext {
-  settings: ReturnType<typeof useAppSettingsStore>['settings']
-}
-
-export interface HotkeyDisplayKeys {
-  default: string[]
-  mac?: string[]
-}
-
-export interface HotkeyHelpMeta {
-  group: HotkeyHelpGroup
-  titleKey: string
-  order?: number
-  visible?: (ctx: HotkeyContext) => boolean
-  displayKeys: HotkeyDisplayKeys
-}
-
-export interface HotkeyBinding {
-  id: HotkeyId
-  keys: string[]
-  preventDefault?: boolean
-  enabled?: (ctx: HotkeyContext) => boolean
-  help?: HotkeyHelpMeta
-}
-
-export interface HotkeyHandlerArgs {
-  event: KeyboardEvent
-  hotkey: string
-}
-
-export type HotkeyHandler = (args: HotkeyHandlerArgs) => void
-
-export type HotkeyHandlersMap = Partial<Record<HotkeyId, HotkeyHandler>>

apps/core/src/hotkeys/useHotkeys.ts

@@ -1,69 +0,0 @@
-import type { HotkeyHandler, HotkeyHandlersMap, HotkeyId } from './types'
-import hotkeys from 'hotkeys-js'
-import { hotkeyBindings, hotkeyIds } from './registry'
-
-export function useHotkey(id: HotkeyId, handler: HotkeyHandler, active: MaybeRefOrGetter<boolean> = true) {
-  const binding = hotkeyBindings.find(item => item.id === id)
-  const appSettingsStore = useAppSettingsStore()
-  const hotkeyContext = {
-    settings: appSettingsStore.settings,
-  }
-  let currentHandler: ((event: KeyboardEvent, hotkeyHandler: { key: string }) => void) | undefined
-
-  function bind() {
-    if (currentHandler || !binding) {
-      return
-    }
-    const currentBinding = binding
-
-    currentHandler = (event, hotkeyHandler) => {
-      if (currentBinding.enabled && !currentBinding.enabled(hotkeyContext)) {
-        return
-      }
-
-      if (currentBinding.preventDefault !== false) {
-        event.preventDefault()
-      }
-
-      handler({
-        event,
-        hotkey: hotkeyHandler.key,
-      })
-    }
-
-    hotkeys(currentBinding.keys.join(','), currentHandler)
-  }
-
-  function unbind() {
-    if (!currentHandler || !binding) {
-      return
-    }
-
-    hotkeys.unbind(binding.keys.join(','), currentHandler)
-    currentHandler = undefined
-  }
-
-  watch(() => toValue(active), (val) => {
-    if (val) {
-      bind()
-    }
-    else {
-      unbind()
-    }
-  }, {
-    immediate: true,
-  })
-
-  onUnmounted(() => {
-    unbind()
-  })
-}
-
-export function useHotkeyBindings(handlers: HotkeyHandlersMap, active: MaybeRefOrGetter<boolean> = true) {
-  hotkeyIds.forEach((id) => {
-    const handler = handlers[id]
-    if (handler) {
-      useHotkey(id, handler, active)
-    }
-  })
-}

apps/core/src/layouts/components/AppSetting/index.vue

@@ -1,440 +0,0 @@
-<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()
-
-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="pb-0 border-none 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="pb-0 border-none 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="pb-0 border-none 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="pb-0 border-none 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="pb-0 border-none 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="pb-0 border-none 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="pb-0 border-none 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/src/layouts/components/Breadcrumb/index.vue

@@ -1,21 +0,0 @@
-<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/src/layouts/components/Header/index.vue

@@ -1,152 +0,0 @@
-<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/src/layouts/components/Hotkeys/index.vue

@@ -1,106 +0,0 @@
-<script setup lang="ts">
-import { globalHotkeyBindings } from '@/hotkeys/registry'
-import eventBus from '@/utils/eventBus'
-
-defineOptions({
-  name: 'HotkeysIntro',
-})
-
-const appSettingsStore = useAppSettingsStore()
-const hotkeyContext = {
-  settings: appSettingsStore.settings,
-}
-
-const groupTitleMap = {
-  global: '全局',
-  nav: '主导航',
-  tabbar: '标签栏',
-} 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 = [
-    { id: 'global', title: groupTitleMap.global },
-    { id: 'nav', title: groupTitleMap.nav },
-    { id: 'tabbar', title: groupTitleMap.tabbar },
-  ] as const
-
-  return groups.map((group) => {
-    const items = globalHotkeyBindings
-      .filter(binding => binding.help?.group === group.id)
-      .filter((binding) => {
-        if (!binding.help) {
-          return false
-        }
-        if (binding.help.visible) {
-          return binding.help.visible(hotkeyContext)
-        }
-        return true
-      })
-      .sort((a, b) => (a.help?.order ?? 0) - (b.help?.order ?? 0))
-      .map((binding) => {
-        const displayKeys = appSettingsStore.os === 'mac' && binding.help?.displayKeys.mac
-          ? binding.help.displayKeys.mac
-          : binding.help?.displayKeys.default ?? []
-
-        return {
-          id: binding.id,
-          title: binding.help?.titleKey ? itemTitleMap[binding.help.titleKey] : '',
-          displayKeys,
-        }
-      })
-
-    return {
-      ...group,
-      items,
-    }
-  }).filter(group => group.items.length > 0)
-})
-
-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/src/layouts/components/MainSidebar/index.vue

@@ -1,125 +0,0 @@
-<script setup lang="ts">
-import { useHotkeyBindings } from '@/hotkeys/useHotkeys'
-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/src/layouts/components/Menu/sub.vue

@@ -1,230 +0,0 @@
-<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/src/layouts/components/Menu/types.ts

@@ -1,47 +0,0 @@
-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/src/layouts/components/SubSidebar/index.vue

@@ -1,169 +0,0 @@
-<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/src/layouts/components/Topbar/Tabbar/index.vue

@@ -1,437 +0,0 @@
-<script setup lang="ts">
-import type { TabbarRecordRaw } from '@fantastic-admin/types'
-import { useMagicKeys } from '@vueuse/core'
-import { useHotkeyBindings } from '@/hotkeys/useHotkeys'
-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 = faToast.info('温馨提示', {
-      description: '标签栏数量超过展示区域范围，可以将鼠标移到标签栏上，通过鼠标滚轮滑动浏览',
-      position: 'top-center',
-      duration: Infinity,
-      action: {
-        label: '知道了',
-        onClick: () => faToast.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/src/layouts/components/Topbar/Toolbar/ColorScheme/index.vue

@@ -1,58 +0,0 @@
-<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/src/layouts/components/Topbar/Toolbar/MenuSearch/index.vue

@@ -1,35 +0,0 @@
-<script setup lang="ts">
-import { useHotkeyBindings } from '@/hotkeys/useHotkeys'
-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/src/layouts/components/Topbar/Toolbar/MenuSearch/search.vue

@@ -1,256 +0,0 @@
-<script setup lang="ts">
-import type { MenuRecordRaw } from '@fantastic-admin/types'
-import { match } from 'pinyin-pro'
-import { useHotkeyBindings } from '@/hotkeys/useHotkeys'
-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/src/layouts/components/Topbar/Toolbar/PageReload/index.vue

@@ -1,51 +0,0 @@
-<script setup lang="ts">
-defineOptions({
-  name: 'ToolbarPageReload',
-})
-
-const appSettingsStore = useAppSettingsStore()
-const mainPage = useAppPage()
-
-const isAnimating = ref(false)
-
-function handleClick() {
-  isAnimating.value = true
-  mainPage.reload()
-}
-
-function handleCtrlClick() {
-  location.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.exact="handleClick" @click.ctrl.exact="handleCtrlClick" @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/src/layouts/components/Topbar/Toolbar/endSide.vue

@@ -1,15 +0,0 @@
-<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/src/layouts/components/Topbar/Toolbar/index.vue

@@ -1,25 +0,0 @@
-<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/src/layouts/components/Topbar/Toolbar/startSide.vue

@@ -1,20 +0,0 @@
-<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="h-9 w-9 -rotate-z-180" @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/src/layouts/components/Topbar/Toolbar/tools.vue

@@ -1,39 +0,0 @@
-<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/src/layouts/components/Topbar/index.vue

@@ -1,56 +0,0 @@
-<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/src/layouts/components/views/link.vue

@@ -1,61 +0,0 @@
-<script setup lang="ts">
-import { useClipboard } from '@vueuse/core'
-
-defineOptions({
-  name: 'LinkView',
-})
-
-const route = useRoute()
-const { copy, copied } = useClipboard()
-watch(copied, (val) => {
-  val && faToast.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>