From e09a4c67e4a1d45fb49390a39858d3e1f88f096c Mon Sep 17 00:00:00 2001 From: Hooray <304327508@qq.com> Date: Wed, 1 Apr 2026 22:26:37 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=A7=BB=E9=99=A4skill=E8=87=AA?= =?UTF-8?q?=E5=8A=A8=E5=AE=89=E8=A3=85=EF=BC=8C=E5=B9=B6=E6=96=B0=E5=A2=9E?= =?UTF-8?q?skill=E7=BB=9F=E4=B8=80=E7=BB=B4=E6=8A=A4=E4=BD=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/workflows/release.yml | 34 +- package.json | 2 +- scripts/postinstall.ts | 95 --- skills/design-taste-frontend/SKILL.md | 226 +++++++ skills/fa-feedback/SKILL.md | 135 ++++ skills/fa-form-builder/SKILL.md | 88 +++ .../fa-form-builder/references/templates.md | 286 +++++++++ skills/fa-framework-settings/SKILL.md | 43 ++ .../references/app-settings.md | 210 ++++++ .../references/menu-settings.md | 132 ++++ .../references/page-settings.md | 78 +++ .../references/tabbar-settings.md | 108 ++++ .../references/theme-settings.md | 96 +++ .../references/toolbar-settings.md | 82 +++ .../references/topbar-settings.md | 78 +++ skills/fa-page-optimizer/SKILL.md | 78 +++ .../references/components-catalog.md | 293 +++++++++ .../references/optimization-patterns.md | 604 ++++++++++++++++++ skills/fa-route-generator/SKILL.md | 118 ++++ .../fa-route-generator/references/examples.md | 533 ++++++++++++++++ .../references/route-meta.md | 250 ++++++++ skills/fa-slot-creator/SKILL.md | 102 +++ .../references/slot-positions.md | 258 ++++++++ skills/fa-store-generator/SKILL.md | 77 +++ .../references/store-patterns.md | 181 ++++++ skills/fa-theme-customizer/SKILL.md | 138 ++++ .../references/design-styles.md | 292 +++++++++ .../references/theme-structure.md | 169 +++++ 28 files changed, 4657 insertions(+), 129 deletions(-) delete mode 100644 scripts/postinstall.ts create mode 100755 skills/design-taste-frontend/SKILL.md create mode 100755 skills/fa-feedback/SKILL.md create mode 100755 skills/fa-form-builder/SKILL.md create mode 100755 skills/fa-form-builder/references/templates.md create mode 100755 skills/fa-framework-settings/SKILL.md create mode 100755 skills/fa-framework-settings/references/app-settings.md create mode 100755 skills/fa-framework-settings/references/menu-settings.md create mode 100755 skills/fa-framework-settings/references/page-settings.md create mode 100755 skills/fa-framework-settings/references/tabbar-settings.md create mode 100755 skills/fa-framework-settings/references/theme-settings.md create mode 100755 skills/fa-framework-settings/references/toolbar-settings.md create mode 100755 skills/fa-framework-settings/references/topbar-settings.md create mode 100755 skills/fa-page-optimizer/SKILL.md create mode 100755 skills/fa-page-optimizer/references/components-catalog.md create mode 100755 skills/fa-page-optimizer/references/optimization-patterns.md create mode 100755 skills/fa-route-generator/SKILL.md create mode 100755 skills/fa-route-generator/references/examples.md create mode 100755 skills/fa-route-generator/references/route-meta.md create mode 100755 skills/fa-slot-creator/SKILL.md create mode 100755 skills/fa-slot-creator/references/slot-positions.md create mode 100755 skills/fa-store-generator/SKILL.md create mode 100755 skills/fa-store-generator/references/store-patterns.md create mode 100755 skills/fa-theme-customizer/SKILL.md create mode 100755 skills/fa-theme-customizer/references/design-styles.md create mode 100755 skills/fa-theme-customizer/references/theme-structure.md diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 3e10bec7..ed95520d 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -42,7 +42,7 @@ jobs: with: type: zip filename: fantastic-admin.${{ steps.last_release.outputs.tag_name }}.zip - exclusions: '/.git/* /.github/*' + exclusions: '/.git/* /.github/* /.agents/* /.claude/* /CLAUDE.md' - name: Upload Archive To Release uses: xresloader/upload-to-github-release@v1 @@ -52,35 +52,3 @@ jobs: release_id: ${{ steps.last_release.outputs.id }} draft: false file: fantastic-admin.${{ steps.last_release.outputs.tag_name }}.zip - - upload-archive-without-example: - needs: release - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v6 - with: - fetch-depth: 0 - - - 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.without-example.${{ steps.last_release.outputs.tag_name }}.zip - exclusions: '/.git/* /.github/* /apps/example*/*' - - - 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.without-example.${{ steps.last_release.outputs.tag_name }}.zip diff --git a/package.json b/package.json index 2b5f0b38..85fbac61 100755 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "lint:eslint": "eslint . --cache --fix", "lint:stylelint": "stylelint \"{apps,packages}/**/*.{css,scss,vue}\" --cache --fix", "preinstall": "npx only-allow pnpm", - "postinstall": "simple-git-hooks && tsx scripts/postinstall.ts", + "postinstall": "simple-git-hooks", "taze": "taze minor -wIr", "commit": "git cz", "release": "bumpp" diff --git a/scripts/postinstall.ts b/scripts/postinstall.ts deleted file mode 100644 index 6fa1fcc9..00000000 --- a/scripts/postinstall.ts +++ /dev/null @@ -1,95 +0,0 @@ -#!/usr/bin/env node - -import fs from 'node:fs' -import path from 'node:path' -import process from 'node:process' -import { fileURLToPath } from 'node:url' - -const __dirname = path.dirname(fileURLToPath(import.meta.url)) -const rootDir = path.resolve(__dirname, '..') -const isWindows = process.platform === 'win32' - -const sourceDir = path.resolve(rootDir, '.agents/skills') -const targetDirs = [ - '.claude/skills', - // '.other-agent/skills', -] - -// 根目录文件链接：[source, link] -const fileLinks = [ - ['AGENTS.md', 'CLAUDE.md'], -] - -function syncSkillLinks() { - if (!fs.existsSync(sourceDir)) { - return - } - - const skills = fs.readdirSync(sourceDir, { withFileTypes: true }) - .filter(entry => entry.isDirectory()) - .map(entry => entry.name) - - for (const targetDir of targetDirs) { - const absTargetDir = path.resolve(rootDir, targetDir) - fs.mkdirSync(absTargetDir, { recursive: true }) - - let created = 0 - - for (const skill of skills) { - const linkPath = path.join(absTargetDir, skill) - const skillSourcePath = path.join(sourceDir, skill) - - // 已存在则先删除（兼容 symlink / junction / 普通目录） - try { - fs.lstatSync(linkPath) - fs.rmSync(linkPath, { recursive: true, force: true }) - } - catch { - // 不存在，正常继续创建 - } - - if (isWindows) { - // Windows 使用 junction（目录联接），无需管理员权限 - fs.symlinkSync(skillSourcePath, linkPath, 'junction') - } - else { - // Mac/Linux 使用相对路径软链接 - const relativePath = path.relative(absTargetDir, skillSourcePath) - fs.symlinkSync(relativePath, linkPath) - } - - created++ - } - - if (created > 0) { - console.log(`[postinstall] Linked ${created} skill(s) to ${targetDir}/`) - } - } -} - -function syncFileLinks() { - for (const [source, link] of fileLinks) { - const sourcePath = path.resolve(rootDir, source) - const linkPath = path.resolve(rootDir, link) - - if (!fs.existsSync(sourcePath)) { - console.warn(`[postinstall] Source file not found, skipping: ${source}`) - continue - } - - // 已存在则先删除 - try { - fs.lstatSync(linkPath) - fs.rmSync(linkPath, { force: true }) - } - catch { - // 不存在，正常继续创建 - } - const relativePath = isWindows ? sourcePath : path.relative(rootDir, sourcePath) - fs.symlinkSync(relativePath, linkPath, 'file') - console.log(`[postinstall] Linked file: ${link} -> ${source}`) - } -} - -syncSkillLinks() -syncFileLinks() diff --git a/skills/design-taste-frontend/SKILL.md b/skills/design-taste-frontend/SKILL.md new file mode 100755 index 00000000..5c6e7e9c --- /dev/null +++ b/skills/design-taste-frontend/SKILL.md @@ -0,0 +1,226 @@ +--- +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 `` 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? diff --git a/skills/fa-feedback/SKILL.md b/skills/fa-feedback/SKILL.md new file mode 100755 index 00000000..2cd4512c --- /dev/null +++ b/skills/fa-feedback/SKILL.md @@ -0,0 +1,135 @@ +--- +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 参数是否生效都能顺利提交反馈。 + +### 第五步：继续协助 + +反馈流程完成后，继续协助用户解决当前的问题，不要因为反馈流程中断用户的工作。 diff --git a/skills/fa-form-builder/SKILL.md b/skills/fa-form-builder/SKILL.md new file mode 100755 index 00000000..fbd97ca4 --- /dev/null +++ b/skills/fa-form-builder/SKILL.md @@ -0,0 +1,88 @@ +--- +name: fa-form-builder +description: "为 Fantastic-admin 框架生成独立的表单页面，使用 vee-validate + zod 验证，全部使用框架内建 Fa* 组件。当用户说：'帮我做一个用户信息填写页'、'我只需要一个提交表单，不需要列表'、'做个设置页面，有几个输入框和保存按钮'、'生成一个注册/编辑/配置表单页'、'只要表单页，不需要增删改查'，即使用户只是说'做个表单页面'也应触发此技能。" +--- + +# 表单页面生成器 + +在 Fantastic-admin 框架中生成独立的 Router 表单页面，使用 vee-validate + zod 完成表单验证，全部使用框架内建 Fa* 组件，不引入任何 Element Plus 组件。 + +**生成的文件：** +- `apps//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//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//src/views/`）： + +| 用途 | 规则 | 示例（path=system, name=user） | +|------|------|-------------------------------| +| 视图目录 | `apps//src/views/{path}/{name}/` | `apps//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"`。 diff --git a/skills/fa-form-builder/references/templates.md b/skills/fa-form-builder/references/templates.md new file mode 100755 index 00000000..2bc3d242 --- /dev/null +++ b/skills/fa-form-builder/references/templates.md @@ -0,0 +1,286 @@ +# 表单页面代码模板 + +使用 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 + + + +``` + +--- + +## 各字段类型的 FormField 片段 + +```vue + + + + {label} + + + + + + + + + + + {label} + +
+ + +
+ + + + + + + + + {label} + + + + + + + + + + + {label} + + + + + + + + + + + + {label} + + + + + + + + + + + {label} +
+ + {{ opt.label }} + +
+ + + + + + + + + {label} + + + + + + + + + + + {label} + + + + + + + + + + + {label} + + + + + + + + + + + {label} + + + + + + + + + + + {label} + + + + + + + + + +``` + +--- + +## 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，手动维护数组 | +| 日期 | 原生 `` | 暂无 Fa 内建日期选择器 | +| 日期时间 | 原生 `` | | +| 图片、头像、封面、缩略图 | `FaImageUpload` | | +| 文件、附件 | `FaFileUpload` | | +| 图标 | `FaIconPicker` | | +| 数字、金额、数量、年龄 | `FaNumberField` | | + +字段类型不明确时，默认使用 `FaInput`。 diff --git a/skills/fa-framework-settings/SKILL.md b/skills/fa-framework-settings/SKILL.md new file mode 100755 index 00000000..4a1f1dd7 --- /dev/null +++ b/skills/fa-framework-settings/SKILL.md @@ -0,0 +1,43 @@ +--- +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//src/settings.ts`。 + +## 核心文件 + +- `apps//src/settings.ts` - 当前配置文件（修改此文件） +- `packages/settings/types.ts` - TypeScript 类型定义（只读参考） +- `packages/settings/src/default.ts` - 默认完整配置（禁止修改，仅供参考） + +## 工作流程 + +1. 读取 `apps//src/settings.ts` 了解当前配置 +2. 查阅 `packages/settings/types.ts` 中的类型定义了解可用选项 +3. 查阅 `packages/settings/src/default.ts` 了解默认值 +4. 仅修改 `apps//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 保活、切换动画、进度条等 diff --git a/skills/fa-framework-settings/references/app-settings.md b/skills/fa-framework-settings/references/app-settings.md new file mode 100755 index 00000000..a42638ef --- /dev/null +++ b/skills/fa-framework-settings/references/app-settings.md @@ -0,0 +1,210 @@ +# 应用设置 (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, // 允许用户自定义页面设置 + } +} +``` diff --git a/skills/fa-framework-settings/references/menu-settings.md b/skills/fa-framework-settings/references/menu-settings.md new file mode 100755 index 00000000..136618ff --- /dev/null +++ b/skills/fa-framework-settings/references/menu-settings.md @@ -0,0 +1,132 @@ +# 导航菜单设置 (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, +} +``` diff --git a/skills/fa-framework-settings/references/page-settings.md b/skills/fa-framework-settings/references/page-settings.md new file mode 100755 index 00000000..e14a609d --- /dev/null +++ b/skills/fa-framework-settings/references/page-settings.md @@ -0,0 +1,78 @@ +# 页面设置 (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, +} +``` diff --git a/skills/fa-framework-settings/references/tabbar-settings.md b/skills/fa-framework-settings/references/tabbar-settings.md new file mode 100755 index 00000000..23fa7ec4 --- /dev/null +++ b/skills/fa-framework-settings/references/tabbar-settings.md @@ -0,0 +1,108 @@ +# 标签栏设置 (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, +} +``` diff --git a/skills/fa-framework-settings/references/theme-settings.md b/skills/fa-framework-settings/references/theme-settings.md new file mode 100755 index 00000000..9ba14bb5 --- /dev/null +++ b/skills/fa-framework-settings/references/theme-settings.md @@ -0,0 +1,96 @@ +# 主题设置 (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, // 更圆润的界面 +} +``` diff --git a/skills/fa-framework-settings/references/toolbar-settings.md b/skills/fa-framework-settings/references/toolbar-settings.md new file mode 100755 index 00000000..daaed440 --- /dev/null +++ b/skills/fa-framework-settings/references/toolbar-settings.md @@ -0,0 +1,82 @@ +# 工具栏设置 (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, +} +``` diff --git a/skills/fa-framework-settings/references/topbar-settings.md b/skills/fa-framework-settings/references/topbar-settings.md new file mode 100755 index 00000000..17bdc17b --- /dev/null +++ b/skills/fa-framework-settings/references/topbar-settings.md @@ -0,0 +1,78 @@ +# 顶栏设置 (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, +} +``` diff --git a/skills/fa-page-optimizer/SKILL.md b/skills/fa-page-optimizer/SKILL.md new file mode 100755 index 00000000..aeee2b54 --- /dev/null +++ b/skills/fa-page-optimizer/SKILL.md @@ -0,0 +1,78 @@ +--- +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//src/views/` 下。 + +## 优化工作流 + +### 步骤 1: 分析页面，识别替换机会 + +读取目标页面，找出三类可优化点： + +- **原生 HTML 元素**：`