github/basic
1
0
Fork 1
mirror of https://github.com/fantastic-admin/basic.git synced 2026-10-06 14:33:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: skills 重构

Browse Source
This commit is contained in:
Hooray
2026-04-16 20:46:04 +08:00
parent 68ffded498
commit 04804f1201
66 changed files with 1221 additions and 2356 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.agents/skills/fa-framework-settings/SKILL.md
+1 -1
View File
@@ -40,4 +40,4 @@ description: 管理和配置 Fantastic-admin 框架设置。当用户提到以
- **顶栏设置**: [references/topbar-settings.md](references/topbar-settings.md) - 标签栏、工具栏、显示模式等
- **标签栏设置**: [references/tabbar-settings.md](references/tabbar-settings.md) - 风格、图标、双击动作、记忆功能等
- **工具栏设置**: [references/toolbar-settings.md](references/toolbar-settings.md) - 收藏夹、面包屑、搜索、通知、国际化等
- **页面设置**: [references/page-settings.md](references/page-settings.md) - 快捷键、iframe 保活、切换动画、进度条等
- **页面设置**: [references/page-settings.md](references/page-settings.md) - 快捷键、切换动画、进度条等
.agents/skills/fa-framework-settings/references/app-settings.md
-91
View File
@@ -4,10 +4,8 @@
- [认证配置 (auth)](#认证配置-auth)
- [路由配置](#路由配置)
- [功能开关](#功能开关)
- [布局配置 (layout)](#布局配置-layout)
- [主页配置 (home)](#主页配置-home)
- [版权配置 (copyright)](#版权配置-copyright)
- [偏好设置 (preferences)](#偏好设置-preferences)
## 认证配置 (auth)
@@ -16,25 +14,11 @@
- **默认值**: `false`
- **说明**: 是否开启权限功能,控制是否启用权限验证功能
### expiredMode
- **类型**: `'redirect' | 'popup'`
- **默认值**: `'redirect'`
- **说明**: 登录过期模式
- `'redirect'` - 跳转到登录页
- `'popup'` - 弹出登录窗口
### multipleAccounts
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 多账号管理,可同时登录多个账号,方便快速切换
**示例:**
```typescript
app: {
auth: {
permission: true,
expiredMode: 'redirect',
multipleAccounts: true,
}
}
```
@@ -62,31 +46,6 @@ app: {
- **默认值**: `false`
- **说明**: 控制是否启用动态页面标题功能
### watermark
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 控制是否在页面上显示水印
### feedback
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 控制是否启用用户反馈功能
### lockScreen
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 控制是否启用锁屏功能
### errorLog
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 是否在非开发环境开启错误日志功能,具体业务代码在 `/src/utils/errorLog.ts`
### checkUpdates
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 控制是否启用应用更新检查功能
### rip
- **类型**: `boolean`
- **默认值**: `false`
@@ -97,36 +56,6 @@ app: {
- **默认值**: `true`
- **说明**: 移动端访问,关闭后网站将禁用移动端访问
## 布局配置 (layout)
### center
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 是否开启居中布局
### centerScope
- **类型**: `'inner' | 'outer'`
- **默认值**: `'inner'`
- **说明**: 居中布局作用范围
- `'inner'` - 内层
- `'outer'` - 外层
### centerWidth
- **类型**: `number`
- **默认值**: `1400`
- **说明**: 居中布局宽度(像素)
**示例:**
```typescript
app: {
layout: {
center: true,
centerScope: 'outer',
centerWidth: 1400,
}
}
```
## 主页配置 (home)
### enable
@@ -188,23 +117,3 @@ app: {
}
}
```
## 偏好设置 (preferences)
控制用户偏好设置,可以控制各个功能模块的启用状态。
**类型**: `{ [key]: boolean | PreferencesBoolean }`
**示例:**
```typescript
app: {
preferences: {
theme: true, // 允许用户自定义主题设置
menu: true, // 允许用户自定义菜单设置
topbar: true, // 允许用户自定义顶栏设置
tabbar: true, // 允许用户自定义标签栏设置
toolbar: true, // 允许用户自定义工具栏设置
page: true, // 允许用户自定义页面设置
}
}
```
.agents/skills/fa-framework-settings/references/menu-settings.md
+1 -46
View File
@@ -2,40 +2,18 @@
## 目录
- [导航菜单模式 (mode)](#导航菜单模式-mode)
- [导航菜单风格 (style)](#导航菜单风格-style)
- [暗色模式 (dark)](#暗色模式-dark)
- [主导航点击模式 (mainMenuClickMode)](#主导航点击模式-mainmenuclickmode)
- [次导航展开行为](#次导航展开行为)
- [快捷键 (hotkeys)](#快捷键-hotkeys)
## 导航菜单模式 (mode)
- **类型**: `'side' | 'head' | 'single' | 'only-side' | 'only-head' | 'side-panel' | 'head-panel'`
- **类型**: `'side' | 'head' | 'single'`
- **默认值**: `'side'`
- **说明**: 设置导航菜单的显示模式
- `'side'` - 侧边栏模式(有主导航菜单)
- `'head'` - 顶部模式
- `'single'` - 侧边栏模式(无主导航菜单)
- `'only-side'` - 侧边栏精简模式
- `'only-head'` - 顶部精简模式
- `'side-panel'` - 侧边栏面板模式
- `'head-panel'` - 顶部面板模式
## 导航菜单风格 (style)
- **类型**: `'' | 'arrow' | 'line' | 'dot'`
- **默认值**: `''`
- **说明**: 设置导航菜单的视觉风格
- `''` - 默认风格
- `'arrow'` - 箭头风格
- `'line'` - 线条风格
- `'dot'` - 圆点风格
## 暗色模式 (dark)
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 仅在亮色模式下生效,控制导航菜单是否使用暗色主题
## 主导航菜单点击模式 (mainMenuClickMode)
@@ -60,12 +38,6 @@
- **默认值**: `false`
- **说明**: 次导航菜单是否收起
### subMenuAutoCollapse
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 次导航菜单是否自动收起
### subMenuCollapseButton
- **类型**: `boolean`
@@ -83,12 +55,9 @@
```typescript
menu: {
mode: 'side',
style: 'dot',
dark: false,
mainMenuClickMode: 'switch',
subMenuUniqueExpand: true,
subMenuCollapse: false,
subMenuAutoCollapse: false,
subMenuCollapseButton: true,
hotkeys: true,
}
@@ -103,20 +72,6 @@ menu: {
}
```
**侧边栏精简模式:**
```typescript
menu: {
mode: 'only-side',
}
```
**启用暗色导航菜单(仅亮色模式下):**
```typescript
menu: {
dark: true,
}
```
**智能主导航菜单点击:**
```typescript
menu: {
.agents/skills/fa-framework-settings/references/page-settings.md
+8 -23
View File
@@ -1,22 +1,9 @@
# 页面设置 (page)
## 目录
- [快捷键 (hotkeys)](#快捷键-hotkeys)
- [iframe 页面最大保活数量 (iframeKeepAliveMax)](#iframe-页面最大保活数量-iframekeepalivemax)
- [页面切换动画 (transitionMode)](#页面切换动画-transitionmode)
- [载入进度条 (progress)](#载入进度条-progress)
## 快捷键 (hotkeys)
- **类型**: `boolean`
- **默认值**: `true`
- **说明**: 控制是否启用页面相关的快捷键功能
## iframe 页面最大保活数量 (iframeKeepAliveMax)
- **类型**: `number`
- **默认值**: `3`
- **说明**: 设置 iframe 页面的最大保活数量
- [快捷键 (hotkeys)](#快捷键-hotkeys)
## 页面切换动画 (transitionMode)
@@ -36,14 +23,19 @@
- **默认值**: `true`
- **说明**: 控制是否显示页面载入进度条
## 快捷键 (hotkeys)
- **类型**: `boolean`
- **默认值**: `true`
- **说明**: 控制是否启用页面相关的快捷键功能
## 完整示例
```typescript
page: {
hotkeys: true,
iframeKeepAliveMax: 3,
transitionMode: 'fade',
progress: true,
hotkeys: true,
}
```
@@ -56,13 +48,6 @@ page: {
}
```
**增加 iframe 保活数量:**
```typescript
page: {
iframeKeepAliveMax: 9,
}
```
**禁用进度条:**
```typescript
page: {
.agents/skills/fa-framework-settings/references/tabbar-settings.md
-72
View File
@@ -1,56 +1,16 @@
# 标签栏设置 (tabbar)
## 目录
- [标签栏风格 (style)](#标签栏风格-style)
- [最小最大宽度 (minMaxWidth)](#最小最大宽度-minmaxwidth)
- [显示图标 (icon)](#显示图标-icon)
- [双击执行动作 (dblclickAction)](#双击执行动作-dblclickaction)
- [记忆功能 (memory)](#记忆功能-memory)
- [快捷键 (hotkeys)](#快捷键-hotkeys)
## 标签栏风格 (style)
- **类型**: `'' | 'fashion' | 'card' | 'square'`
- **默认值**: `''`
- **说明**: 设置标签栏的视觉风格
- `''` - 默认风格
- `'fashion'` - 时尚风格
- `'card'` - 卡片风格
- `'square'` - 方块风格
## 最小最大宽度 (minMaxWidth)
- **类型**: `readonly [number | 'unset', number | 'unset']`
- **默认值**: `[150, 150]`
- **说明**: 设置标签的最小和最大宽度,当设置为 `'unset'` 时为自适应
- `[150, 150]` - 固定宽度 150px
- `[150, 'unset']` - 最小宽度 150px
- `['unset', 150]` - 最大宽度 150px
- `['unset', 'unset']` - 跟随文字长度自适应
## 显示图标 (icon)
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 控制标签是否显示图标
## 双击执行动作 (dblclickAction)
- **类型**: `'reload' | 'close' | 'pin' | 'maximize' | 'window'`
- **默认值**: `'close'`
- **说明**: 设置双击标签时执行的动作
- `'reload'` - 刷新
- `'close'` - 关闭
- `'pin'` - 固定/取消固定
- `'maximize'` - 最大化
- `'window'` - 新窗口打开
## 记忆功能 (memory)
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 控制是否记住用户的标签操作状态
## 快捷键 (hotkeys)
- **类型**: `boolean`
@@ -61,48 +21,16 @@
```typescript
tabbar: {
style: 'fashion',
minMaxWidth: [150, 150],
icon: true,
dblclickAction: 'close',
memory: true,
hotkeys: true,
}
```
## 常见配置
**时尚风格标签栏:**
```typescript
tabbar: {
style: 'fashion',
}
```
**显示图标:**
```typescript
tabbar: {
icon: true,
}
```
**自适应宽度:**
```typescript
tabbar: {
minMaxWidth: ['unset', 'unset'],
}
```
**双击刷新:**
```typescript
tabbar: {
dblclickAction: 'reload',
}
```
**启用记忆功能:**
```typescript
tabbar: {
memory: true,
}
```
.agents/skills/fa-framework-settings/references/theme-settings.md
-31
View File
@@ -1,31 +1,10 @@
# 主题设置 (theme)
## 目录
- [主题同步 (sync)](#主题同步-sync)
- [亮色主题 (light)](#亮色主题-light)
- [暗色主题 (dark)](#暗色主题-dark)
- [颜色方案 (colorScheme)](#颜色方案-colorscheme)
- [圆角系数 (radius)](#圆角系数-radius)
- [色弱模式 (colorAmblyopia)](#色弱模式-coloramblyopia)
## 主题同步 (sync)
- **类型**: `boolean`
- **默认值**: `true`
- **说明**: 当开启时,切换颜色方案将共用一套主题
## 亮色主题 (light)
- **类型**: `keyof typeof themes`
- **默认值**: `'default'`
- **说明**: 指定亮色模式下的主题
## 暗色主题 (dark)
- **类型**: `keyof typeof themes`
- **默认值**: `'default'`
- **说明**: 指定暗色模式下的主题
## 颜色方案 (colorScheme)
- **类型**: `'light' | 'dark' | ''`
@@ -54,7 +33,6 @@
```typescript
theme: {
sync: true,
light: 'default',
dark: 'default',
colorScheme: 'light',
@@ -79,15 +57,6 @@ theme: {
}
```
**使用不同的亮色和暗色主题:**
```typescript
theme: {
sync: false,
light: 'default',
dark: 'custom-dark',
}
```
**调整圆角:**
```typescript
theme: {
.agents/skills/fa-framework-settings/references/topbar-settings.md
-17
View File
@@ -4,7 +4,6 @@
- [标签栏 (tabbar)](#标签栏-tabbar)
- [工具栏 (toolbar)](#工具栏-toolbar)
- [顶栏模式 (mode)](#顶栏模式-mode)
- [切换显示位置 (switchTabbarAndToolbar)](#切换显示位置-switchtabbarandtoolbar)
## 标签栏 (tabbar)
@@ -27,14 +26,6 @@
- `'fixed'` - 固定,不跟随页面滚动,始终固定在顶部
- `'sticky'` - 粘性,页面往下滚动时隐藏,往上滚动时显示
## 切换显示位置 (switchTabbarAndToolbar)
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 控制标签栏和工具栏的显示顺序
- `false` - 标签栏在工具栏上面
- `true` - 工具栏在标签栏上面
## 完整示例
```typescript
@@ -42,7 +33,6 @@ topbar: {
tabbar: true,
toolbar: true,
mode: 'fixed',
switchTabbarAndToolbar: false,
}
```
@@ -69,10 +59,3 @@ topbar: {
mode: 'sticky',
}
```
**工具栏在标签栏上面:**
```typescript
topbar: {
switchTabbarAndToolbar: true,
}
```
.agents/skills/fa-page-optimizer/references/components-catalog.md
-7
View File
@@ -12,9 +12,6 @@
**变体**: default, destructive, outline, secondary, ghost, link
**特性**: loading 状态、disabled 状态
### FaBadge
**用途**: 徽章标签，用于状态标识和分类
### FaIcon
**用途**: 图标组件，基于 [iconify](https://icon-sets.iconify.design/)
**示例**: <FaIcon name="i-mdi:home" />
@@ -34,9 +31,6 @@
### FaDivider
**用途**: 分割线组件
### FaLayoutContainer
**用途**: 布局容器组件
### FaPageHeader
**用途**: 页面头部组件
@@ -275,7 +269,6 @@
| `<div class="card">` | `FaCard` | 标准化的卡片布局 |
| `<hr>` | `FaDivider` | 统一的分割线样式 |
| `<img>` (头像) | `FaAvatar` | 头像专用组件 |
| `<span class="badge">` | `FaBadge` | 统一的徽章样式 |
### 替换常见功能实现
.agents/skills/fa-route-generator/SKILL.md
+1 -11
View File
@@ -76,11 +76,6 @@ export default routes
定位路由文件（在 `apps/<app>/src/router/modules/` 下搜索），读取后按需修改 meta 属性。常见修改：
**标签页合并**（新增页/编辑页合并到同一标签，避免开多个标签）：
```typescript
meta: { activeMenu: '/user', tabMerge: 'activeMenu' }
```
**权限控制**：
```typescript
meta: { auth: 'user:view' } // 或数组 ['user:view', 'user:edit']
@@ -94,11 +89,6 @@ meta: { keepAlive: ['productDetail'] }
meta: { menu: false, activeMenu: '/product', noKeepAlive: 'productList' }
```
**徽章**：
```typescript
meta: { badge: 'NEW' } // 文字；或 [true, 'destructive'] 红点
```
**隐藏菜单项**：
```typescript
meta: { menu: false, activeMenu: '/parent/path' }
@@ -115,4 +105,4 @@ meta: { menu: false, activeMenu: '/parent/path' }
详细属性说明见 [references/route-meta.md](references/route-meta.md)，更多示例见 [references/examples.md](references/examples.md)。
常用属性：`title`（必需）、`icon`、`menu`、`auth`、`keepAlive`、`badge`、`activeMenu`、`tabMerge`、`breadcrumb`
常用属性：`title`（必需）、`icon`、`menu`、`auth`、`keepAlive`、`activeMenu`、`breadcrumb`
.agents/skills/fa-route-generator/references/examples.md
+2 -76
View File
@@ -221,11 +221,6 @@ const routes: RouteRecordRaw = {
meta: {
title: '用户列表',
auth: ['admin:view', 'admin:edit'], // 需要其中一个权限
auths: [
{ name: '查看用户', value: 'admin:view' },
{ name: '编辑用户', value: 'admin:edit' },
{ name: '删除用户', value: 'admin:delete' },
],
},
},
],
@@ -253,50 +248,6 @@ const routes: RouteRecordRaw = {
link: 'https://github.com',
},
},
{
path: 'docs',
name: 'externalDocs',
component: () => import('@/views/external/iframe.vue'),
meta: {
title: '文档',
iframe: 'https://fantastic-admin.hurui.me',
},
},
],
}
```
### 带徽章的路由
```typescript
const routes: RouteRecordRaw = {
path: '/features',
component: Layout,
name: 'features',
meta: {
title: '功能特性',
icon: 'i-ep:star',
badge: 'NEW', // 显示 NEW 徽章
},
children: [
{
path: 'pro',
name: 'featuresPro',
component: () => import('@/views/features/pro.vue'),
meta: {
title: '专业版功能',
badge: ['PRO', 'destructive'], // 显示红色 PRO 徽章
},
},
{
path: 'beta',
name: 'featuresBeta',
component: () => import('@/views/features/beta.vue'),
meta: {
title: 'Beta 功能',
badge: () => 'BETA', // 动态徽章
},
},
],
}
```
@@ -318,8 +269,8 @@ const routes: RouteRecordRaw = {
path: 'always',
name: 'menuAlways',
meta: {
title: '始终展开',
expand: [true, true], // 默认展开且不允许收起
title: '默认展开',
expand: true,
},
children: [
{
@@ -336,31 +287,6 @@ const routes: RouteRecordRaw = {
}
```
### 带查询参数的路由
```typescript
const routes: RouteRecordRaw = {
path: '/report',
component: Layout,
name: 'report',
meta: {
title: '报表',
icon: 'i-ep:data-analysis',
},
children: [
{
path: 'sales',
name: 'reportSales',
component: () => import('@/views/report/sales.vue'),
meta: {
title: '销售报表',
query: { type: 'monthly' }, // 点击导航时携带参数
},
},
],
}
```
## 路由配置调整
### 权限配置调整
.agents/skills/fa-route-generator/references/route-meta.md
+4 -139
View File
@@ -13,19 +13,6 @@
## 权限相关
### auths
- **类型**: `Array<{ name: string, value: string }>`
- **默认值**: `undefined`
- **说明**: 权限池,对路由本身无实际作用,通常用于角色管理模块,展示路由可配置权限
- **示例**:
```typescript
auths: [
{ name: '新闻管理(浏览)', value: 'news:view' },
{ name: '新闻管理(编辑)', value: 'news:edit' }
]
```
### auth
- **类型**: `string | string[]`
@@ -37,17 +24,6 @@
auth: ['news:view', 'news:edit'] // 需要具备其中一个权限
```
### localeAuth
- **类型**: `string | string[]`
- **默认值**: `undefined`
- **说明**: 区域语言权限,配置为数组时,只需满足一个即可进入
- **示例**:
```typescript
localeAuth: 'zh-cn' // 当前区域语言为 zh-cn 允许访问
localeAuth: ['zh-cn', 'zh-tw'] // 当前区域语言为 zh-cn 或 zh-tw 允许访问
```
## 导航显示
### title
@@ -63,13 +39,12 @@
### icon
- **类型**: `string | [string, string]`
- **类型**: `string`
- **默认值**: `undefined`
- **说明**: 图标,如果配置为数组,则第一个为默认图标,第二个为激活图标
- **说明**: 图标
- **示例**:
```typescript
icon: 'i-ep:lock' // 默认显示 i-ep:lock 图标
icon: ['i-ep:lock', 'i-ep:unlock'] // 默认显示 i-ep:lock,激活时显示 i-ep:unlock
```
### menu
@@ -90,65 +65,20 @@
### expand
- **类型**: `boolean | [boolean, boolean]`
- **类型**: `boolean`
- **默认值**: `undefined`
- **说明**: 是否默认展开,如果配置为数组,则第一个为默认展开状态,第二个是否始终展开
- **说明**: 是否默认展开
- **示例**:
```typescript
expand: true // 默认展开
expand: [true, true] // 默认展开,且不允许收起
```
### badge
- **类型**: `boolean | string | number | (() => boolean | string | number) | [value, color]`
- **默认值**: `undefined`
- **说明**: 徽章,如果配置为数组,则第一个为徽章内容,第二个为徽章颜色
- **示例**:
```typescript
badge: 'PRO' // 显示徽章,内容为 PRO
badge: true // 显示徽章,内容为圆点
badge: [true, 'destructive'] // 显示徽章,内容为圆点,颜色为 destructive
badge: () => '动态徽章'
```
### sort
- **类型**: `number`
- **默认值**: `0`
- **说明**: 导航排序,数字越大越靠前
### singleMenu
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 是否为单个一级导航,该配置用于简化只想展示一级,没有二级导航的路由配置
### breadcrumb
- **类型**: `boolean`
- **默认值**: `true`
- **说明**: 是否在面包屑中显示
## 标签页
### tabPermanent
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 是否常驻标签页,请勿在带有参数的路由上设置该特性
### tabMerge
- **类型**: `'routeName' | 'activeMenu'`
- **默认值**: `undefined`
- **说明**: 标签页合并,根据规则合并标签页
- **示例**:
```typescript
tabMerge: 'routeName' // 根据路由名称合并
tabMerge: 'activeMenu' // 根据 activeMenu 属性合并
```
## 页面行为
### keepAlive
@@ -174,35 +104,6 @@
noKeepAlive: ['news', 'user'] // 访问路由name为news或user的页面时不保活
```
### maximize
- **类型**: `boolean | [boolean, boolean]`
- **默认值**: `undefined`
- **说明**: 最大化,如果配置为数组,则第一个为是否开启最大化,第二个为是否允许手动退出最大化
- **示例**:
```typescript
maximize: true // 开启最大化
maximize: [true, false] // 开启最大化,允许手动退出最大化
maximize: [true, true] // 开启最大化,不允许手动退出最大化
```
### newWindow
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 是否在新窗口打开
### iframe
- **类型**: `string | boolean`
- **默认值**: `undefined`
- **说明**: 是否在iframe中打开
- **示例**:
```typescript
iframe: 'https://fantastic-admin.hurui.me' // 在iframe中打开 Fantastic-admin 官网
iframe: true // 获取路由query中的iframe属性,并在iframe中打开
```
### link
- **类型**: `string`
@@ -212,39 +113,3 @@
```typescript
link: 'https://fantastic-admin.hurui.me' // 在浏览器新窗口打开 Fantastic-admin 官网
```
### query
- **类型**: `Record<string, any>`
- **默认值**: `undefined`
- **说明**: 路由 query 参数,点击导航时进行路由跳转时,携带的参数
- **示例**:
```typescript
query: { id: 1, name: 'test' } // 点击导航时,携带 id 参数为 1,name 参数为 test
```
## 布局
### layout
- **类型**: `object`
- **默认值**: `undefined`
- **说明**: 布局配置
- **属性**:
- `center`: `boolean` - 是否居中,如果不设置,则使用全局配置
- `centerScope`: `'inner' | 'outer'` - 作用范围,如果不设置,则使用全局配置
- `centerWidth`: `number` - 宽度,如果不设置,则使用全局配置
- **示例**:
```typescript
layout: {
center: true,
centerScope: 'inner',
centerWidth: 1200
}
```
### copyright
- **类型**: `boolean`
- **默认值**: `undefined`
- **说明**: 是否显示版权,如果不设置,则使用全局配置
.agents/skills/fa-store-generator/references/store-patterns.md
-3
View File
@@ -167,9 +167,6 @@ export const useDictionaryStore = defineStore('dictionary', () => {
| `useAppSettingsStore` | `modules/app/settings.ts` | 主题、语言、布局配置 |
| `useAppMenuStore` | `modules/app/menu.ts` | 菜单生成与导航状态 |
| `useAppTabbarStore` | `modules/app/tabbar.ts` | 标签栏管理 |
| `useAppNotificationStore` | `modules/app/notification.ts` | 通知系统 |
| `useDictionaryStore` | `modules/dictionary.ts` | 字典数据缓存 |
| `useMenuBadgeStore` | `modules/menuBadge.ts` | 菜单徽章状态 |
---
.agents/skills/fa-theme-customizer/SKILL.md
+85 -97
View File
@@ -5,11 +5,11 @@ description: 为 Fantastic-admin 框架创建和定制主题配色方案，始
# 主题定制器
为 Fantastic-admin 框架生成符合规范的主题配色。框架的 `theme.sync` 默认为 `true`，切换颜色方案时明暗共用同一套主题名称，因此**始终同时输出明色和暗色两套**，缺少任何一套都会导致对应模式下显示异常。
为 Fantastic-admin 框架生成符合规范的主题配色。
## 主题文件位置
- 主题定义：`packages/themes/index.ts`（在此添加新主题，跨所有应用共享）
- 主题定义：`packages/themes/index.ts`（在此替换新主题，跨所有应用共享）
- 类型推断：自动从 `packages/themes/index.ts` 的 key 推断，无需手动更新类型
## 工作流程
@@ -31,104 +31,92 @@ description: 为 Fantastic-admin 框架创建和定制主题配色方案，始
### 第三步：输出主题代码
在 `packages/themes/index.ts` 中添加新主题，格式严格遵循现有主题结构：
在 `packages/themes/index.ts` 中替换新主题，格式严格遵循现有主题结构：
```typescript
themeName: {
light: {
// shadcn 标准 token（必填）
'--background': 'L C H',
'--foreground': 'L C H',
'--card': 'L C H',
'--card-foreground': 'L C H',
'--popover': 'L C H',
'--popover-foreground': 'L C H',
'--primary': 'L C H',
'--primary-foreground': 'L C H',
'--secondary': 'L C H',
'--secondary-foreground': 'L C H',
'--muted': 'L C H',
'--muted-foreground': 'L C H',
'--accent': 'L C H',
'--accent-foreground': 'L C H',
'--destructive': '0.577 0.245 27.325', // 通常保持不变
'--border': 'L C H',
'--input': 'L C H',
'--ring': 'L C H', // 通常与 primary 相同
// 框架专属 token（必填）
'--g-main-area-bg': 'oklch(L C H)', // 明色略深于背景，形成层次感
'--g-header-bg': 'oklch(var(--background))',
'--g-header-color': 'oklch(var(--foreground))',
'--g-header-menu-color': 'oklch(var(--accent-foreground))',
'--g-header-menu-hover-bg': 'oklch(var(--accent))',
'--g-header-menu-hover-color': 'oklch(var(--accent-foreground))',
'--g-header-menu-active-bg': 'oklch(var(--primary))',
'--g-header-menu-active-color': 'oklch(var(--primary-foreground))',
'--g-main-sidebar-bg': 'oklch(var(--background))',
'--g-main-sidebar-menu-color': 'oklch(var(--accent-foreground))',
'--g-main-sidebar-menu-hover-bg': 'oklch(var(--accent))',
'--g-main-sidebar-menu-hover-color': 'oklch(var(--accent-foreground))',
'--g-main-sidebar-menu-active-bg': 'oklch(var(--primary))',
'--g-main-sidebar-menu-active-color': 'oklch(var(--primary-foreground))',
'--g-sub-sidebar-bg': 'oklch(var(--background))',
'--g-sub-sidebar-menu-color': 'oklch(var(--accent-foreground))',
'--g-sub-sidebar-menu-hover-bg': 'oklch(var(--accent))',
'--g-sub-sidebar-menu-hover-color': 'oklch(var(--accent-foreground))',
'--g-sub-sidebar-menu-active-bg': 'oklch(var(--primary))',
'--g-sub-sidebar-menu-active-color': 'oklch(var(--primary-foreground))',
'--g-tabbar-bg': 'oklch(var(--background))',
'--g-tabbar-tab-color': 'oklch(var(--accent-foreground) / 50%)',
'--g-tabbar-tab-hover-bg': 'oklch(var(--accent) / 50%)',
'--g-tabbar-tab-hover-color': 'oklch(var(--accent-foreground) / 50%)',
'--g-tabbar-tab-active-bg': 'oklch(var(--accent))',
'--g-tabbar-tab-active-color': 'oklch(var(--foreground))',
'--g-toolbar-bg': 'oklch(var(--background))',
},
dark: {
// shadcn 标准 token（同明色结构，但色值更深）
'--background': 'L C H',
// ... 其余 shadcn token
// 框架专属 token（暗色与明色有 5 处关键差异，见 references/theme-structure.md）
'--g-main-area-bg': 'oklch(var(--background))', // 暗色与背景相同，避免过多层次
'--g-header-bg': 'oklch(var(--background))',
'--g-header-color': 'oklch(var(--foreground))',
'--g-header-menu-color': 'oklch(var(--muted-foreground))', // 差异：用 muted-foreground
'--g-header-menu-hover-bg': 'oklch(var(--muted))', // 差异：用 muted
'--g-header-menu-hover-color': 'oklch(var(--muted-foreground))',
'--g-header-menu-active-bg': 'oklch(var(--accent))', // 差异：用 accent 而非 primary
'--g-header-menu-active-color': 'oklch(var(--accent-foreground))',
'--g-main-sidebar-bg': 'oklch(var(--background))',
'--g-main-sidebar-menu-color': 'oklch(var(--muted-foreground))',
'--g-main-sidebar-menu-hover-bg': 'oklch(var(--muted))',
'--g-main-sidebar-menu-hover-color': 'oklch(var(--muted-foreground))',
'--g-main-sidebar-menu-active-bg': 'oklch(var(--accent))',
'--g-main-sidebar-menu-active-color': 'oklch(var(--accent-foreground))',
'--g-sub-sidebar-bg': 'oklch(var(--background))',
'--g-sub-sidebar-menu-color': 'oklch(var(--muted-foreground))',
'--g-sub-sidebar-menu-hover-bg': 'oklch(var(--muted))',
'--g-sub-sidebar-menu-hover-color': 'oklch(var(--muted-foreground))',
'--g-sub-sidebar-menu-active-bg': 'oklch(var(--accent))',
'--g-sub-sidebar-menu-active-color': 'oklch(var(--accent-foreground))',
'--g-tabbar-bg': 'oklch(var(--background))',
'--g-tabbar-tab-color': 'oklch(var(--accent-foreground) / 50%)',
'--g-tabbar-tab-hover-bg': 'oklch(var(--accent) / 50%)',
'--g-tabbar-tab-hover-color': 'oklch(var(--accent-foreground) / 50%)',
'--g-tabbar-tab-active-bg': 'oklch(var(--accent))',
'--g-tabbar-tab-active-color': 'oklch(var(--foreground))',
'--g-toolbar-bg': 'oklch(var(--background))',
},
},
```
export const lightTheme = {
// shadcn 标准 token（必填）
'--background': 'L C H',
'--foreground': 'L C H',
'--card': 'L C H',
'--card-foreground': 'L C H',
'--popover': 'L C H',
'--popover-foreground': 'L C H',
'--primary': 'L C H',
'--primary-foreground': 'L C H',
'--secondary': 'L C H',
'--secondary-foreground': 'L C H',
'--muted': 'L C H',
'--muted-foreground': 'L C H',
'--accent': 'L C H',
'--accent-foreground': 'L C H',
'--destructive': '0.577 0.245 27.325', // 通常保持不变
'--border': 'L C H',
'--input': 'L C H',
'--ring': 'L C H', // 通常与 primary 相同
// 框架专属 token（必填）
'--g-main-area-bg': 'oklch(L C H)', // 明色略深于背景，形成层次感
'--g-header-bg': 'oklch(var(--background))',
'--g-header-color': 'oklch(var(--foreground))',
'--g-header-menu-color': 'oklch(var(--accent-foreground))',
'--g-header-menu-hover-bg': 'oklch(var(--accent))',
'--g-header-menu-hover-color': 'oklch(var(--accent-foreground))',
'--g-header-menu-active-bg': 'oklch(var(--primary))',
'--g-header-menu-active-color': 'oklch(var(--primary-foreground))',
'--g-main-sidebar-bg': 'oklch(var(--background))',
'--g-main-sidebar-menu-color': 'oklch(var(--accent-foreground))',
'--g-main-sidebar-menu-hover-bg': 'oklch(var(--accent))',
'--g-main-sidebar-menu-hover-color': 'oklch(var(--accent-foreground))',
'--g-main-sidebar-menu-active-bg': 'oklch(var(--primary))',
'--g-main-sidebar-menu-active-color': 'oklch(var(--primary-foreground))',
'--g-sub-sidebar-bg': 'oklch(var(--background))',
'--g-sub-sidebar-menu-color': 'oklch(var(--accent-foreground))',
'--g-sub-sidebar-menu-hover-bg': 'oklch(var(--accent))',
'--g-sub-sidebar-menu-hover-color': 'oklch(var(--accent-foreground))',
'--g-sub-sidebar-menu-active-bg': 'oklch(var(--primary))',
'--g-sub-sidebar-menu-active-color': 'oklch(var(--primary-foreground))',
'--g-tabbar-bg': 'oklch(var(--background))',
'--g-tabbar-tab-color': 'oklch(var(--accent-foreground) / 50%)',
'--g-tabbar-tab-hover-bg': 'oklch(var(--accent) / 50%)',
'--g-tabbar-tab-hover-color': 'oklch(var(--accent-foreground) / 50%)',
'--g-tabbar-tab-active-bg': 'oklch(var(--accent))',
'--g-tabbar-tab-active-color': 'oklch(var(--foreground))',
'--g-toolbar-bg': 'oklch(var(--background))',
} as const
### 第四步：在应用设置中启用
主题添加到 `packages/themes/index.ts` 后，还需要在对应应用的设置中启用。先执行 `ls apps/` 确认有哪些应用，询问用户要在哪个应用中启用，然后修改 `apps/<app>/src/settings.ts`：
```typescript
theme: {
light: 'themeName',
dark: 'themeName',
}
export const darkTheme = {
// shadcn 标准 token（同明色结构，但色值更深）
'--background': 'L C H',
// ... 其余 shadcn token
// 框架专属 token（暗色与明色有 5 处关键差异，见 references/theme-structure.md）
'--g-main-area-bg': 'oklch(var(--background))', // 暗色与背景相同，避免过多层次
'--g-header-bg': 'oklch(var(--background))',
'--g-header-color': 'oklch(var(--foreground))',
'--g-header-menu-color': 'oklch(var(--muted-foreground))', // 差异：用 muted-foreground
'--g-header-menu-hover-bg': 'oklch(var(--muted))', // 差异：用 muted
'--g-header-menu-hover-color': 'oklch(var(--muted-foreground))',
'--g-header-menu-active-bg': 'oklch(var(--accent))', // 差异：用 accent 而非 primary
'--g-header-menu-active-color': 'oklch(var(--accent-foreground))',
'--g-main-sidebar-bg': 'oklch(var(--background))',
'--g-main-sidebar-menu-color': 'oklch(var(--muted-foreground))',
'--g-main-sidebar-menu-hover-bg': 'oklch(var(--muted))',
'--g-main-sidebar-menu-hover-color': 'oklch(var(--muted-foreground))',
'--g-main-sidebar-menu-active-bg': 'oklch(var(--accent))',
'--g-main-sidebar-menu-active-color': 'oklch(var(--accent-foreground))',
'--g-sub-sidebar-bg': 'oklch(var(--background))',
'--g-sub-sidebar-menu-color': 'oklch(var(--muted-foreground))',
'--g-sub-sidebar-menu-hover-bg': 'oklch(var(--muted))',
'--g-sub-sidebar-menu-hover-color': 'oklch(var(--muted-foreground))',
'--g-sub-sidebar-menu-active-bg': 'oklch(var(--accent))',
'--g-sub-sidebar-menu-active-color': 'oklch(var(--accent-foreground))',
'--g-tabbar-bg': 'oklch(var(--background))',
'--g-tabbar-tab-color': 'oklch(var(--accent-foreground) / 50%)',
'--g-tabbar-tab-hover-bg': 'oklch(var(--accent) / 50%)',
'--g-tabbar-tab-hover-color': 'oklch(var(--accent-foreground) / 50%)',
'--g-tabbar-tab-active-bg': 'oklch(var(--accent))',
'--g-tabbar-tab-active-color': 'oklch(var(--foreground))',
'--g-toolbar-bg': 'oklch(var(--background))',
} as const
```
## 参考资源
apps/example/src/types/components.d.ts
Vendored
+1 -3
View File
@@ -23,7 +23,6 @@ declare module 'vue' {
FaAnimatedCountTo: typeof import('@fantastic-admin/components')['FaAnimatedCountTo']
FaAnimatedCountToGroup: typeof import('@fantastic-admin/components')['FaAnimatedCountToGroup']
FaAvatar: typeof import('@fantastic-admin/components')['FaAvatar']
FaBadge: typeof import('@fantastic-admin/components')['FaBadge']
FaBlurReveal: typeof import('@fantastic-admin/components')['FaBlurReveal']
FaBorderBeam: typeof import('@fantastic-admin/components')['FaBorderBeam']
FaButton: typeof import('@fantastic-admin/components')['FaButton']
@@ -113,7 +112,6 @@ declare global {
const FaAnimatedCountTo: typeof import('@fantastic-admin/components')['FaAnimatedCountTo']
const FaAnimatedCountToGroup: typeof import('@fantastic-admin/components')['FaAnimatedCountToGroup']
const FaAvatar: typeof import('@fantastic-admin/components')['FaAvatar']
const FaBadge: typeof import('@fantastic-admin/components')['FaBadge']
const FaBlurReveal: typeof import('@fantastic-admin/components')['FaBlurReveal']
const FaBorderBeam: typeof import('@fantastic-admin/components')['FaBorderBeam']
const FaButton: typeof import('@fantastic-admin/components')['FaButton']
@@ -187,4 +185,4 @@ declare global {
const FaTooltip: typeof import('@fantastic-admin/components')['FaTooltip']
const FaTree: typeof import('@fantastic-admin/components')['FaTree']
const FaTrend: typeof import('@fantastic-admin/components')['FaTrend']
}
}
packages/components/src/avatar/README.md
Executable → Regular
+15 -19
View File
@@ -2,13 +2,14 @@
用户头像组件，支持图片加载失败时显示降级内容。
## 基础用法
## 使用场景
```vue
<template>
<FaAvatar src="https://example.com/avatar.jpg" fallback="张三" />
</template>
```
- 用户头像显示
- 评论区头像
- 聊天消息头像
- 团队成员展示
- 个人中心头像
- 头像上传预览
## Props
@@ -24,12 +25,16 @@
|------|------|
| `default` | 自定义降级内容（覆盖 fallback） |
## Events
无
## 示例
### 基础用法
```vue
<template>
<FaAvatar src="https://example.com/avatar.jpg" fallback="张三" />
</template>
```
### 基础头像
```vue
@@ -106,12 +111,3 @@
2. **默认尺寸**：头像默认尺寸由 CSS 类控制，可通过 `class` 属性调整
3. **形状**：默认为圆角方形，添加 `rounded-full` 类可变为圆形
4. **降级文本**：`fallback` 默认只显示前 2 个字符
## 典型使用场景
- 用户头像显示
- 评论区头像
- 聊天消息头像
- 团队成员展示
- 个人中心头像
- 头像上传预览
packages/components/src/button-group/README.md
Executable → Regular
+28 -21
View File
@@ -2,7 +2,28 @@
将多个按钮组合在一起的容器组件，支持水平/垂直排列和分割线。
## 基础用法
## 使用场景
- 将多个按钮组合在一起的容器组件，支持水平/垂直排列和分割线。
- 常见用法：垂直排列、带分割线、工具栏按钮组、垂直菜单。
## Props
| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| orientation | 排列方向 | `'horizontal' \| 'vertical'` | `'horizontal'` |
| separator | 是否显示分割线 | `boolean` | `false` |
| class | 自定义类名 | `HTMLAttributes['class']` | `undefined` |
## Slots
| 名称 | 说明 |
|------|------|
| default | 默认插槽，放置 FaButton 组件 |
## 示例
### 基础用法
```vue
<template>
@@ -23,7 +44,7 @@
</template>
```
## 垂直排列
### 垂直排列
```vue
<template>
@@ -35,7 +56,7 @@
</template>
```
## 带分割线
### 带分割线
```vue
<template>
@@ -47,24 +68,6 @@
</template>
```
## API
### Props
| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| orientation | 排列方向 | `'horizontal' \| 'vertical'` | `'horizontal'` |
| separator | 是否显示分割线 | `boolean` | `false` |
| class | 自定义类名 | `HTMLAttributes['class']` | `undefined` |
### Slots
| 名称 | 说明 |
|------|------|
| default | 默认插槽，放置 FaButton 组件 |
## 示例
### 工具栏按钮组
```vue
@@ -132,3 +135,7 @@
</FaButtonGroup>
</template>
```
## 注意事项
- 无特殊限制，建议按示例中的受控方式接入，并结合业务容器尺寸验证最终展示效果。
packages/components/src/button/README.md
Executable → Regular
+16 -20
View File
@@ -2,15 +2,13 @@
基础按钮组件，支持多种样式变体和尺寸，内置加载状态支持。
## 基础用法
## 使用场景
```vue
<template>
<FaButton>默认按钮</FaButton>
<FaButton variant="destructive">危险按钮</FaButton>
<FaButton variant="outline">边框按钮</FaButton>
</template>
```
- 表单提交按钮
- 操作触发按钮（新增、编辑、删除）
- 导航链接按钮
- 工具栏操作按钮
- 对话框/抽屉底部操作按钮
## Props
@@ -28,12 +26,18 @@
|------|------|
| `default` | 按钮内容（图标、文字等） |
## Events
无
## 示例
### 基础用法
```vue
<template>
<FaButton>默认按钮</FaButton>
<FaButton variant="destructive">危险按钮</FaButton>
<FaButton variant="outline">边框按钮</FaButton>
</template>
```
### 不同样式变体
```vue
@@ -119,11 +123,3 @@ function handleClick() {
- `ghost`：幽灵按钮，用于更次要的操作
- `link`：链接样式
- `expand`：展开动画效果按钮
## 典型使用场景
- 表单提交按钮
- 操作触发按钮（新增、编辑、删除）
- 导航链接按钮
- 工具栏操作按钮
- 对话框/抽屉底部操作按钮
packages/components/src/card/README.md
Executable → Regular
+16 -20
View File
@@ -2,15 +2,13 @@
基础卡片容器组件，支持标题、描述、内容和页脚区域。
## 基础用法
## 使用场景
```vue
<template>
<FaCard title="卡片标题" description="卡片描述">
卡片内容
</FaCard>
</template>
```
- 信息展示卡片
- 表单容器
- 数据统计卡片
- 列表项容器
- 对话框内容区
## Props
@@ -31,12 +29,18 @@
| `default` | 卡片内容 |
| `footer` | 卡片页脚 |
## Events
无
## 示例
### 基础用法
```vue
<template>
<FaCard title="卡片标题" description="卡片描述">
卡片内容
</FaCard>
</template>
```
### 基础卡片
```vue
@@ -131,11 +135,3 @@
2. **slot 优先**：如果提供了 `header` slot，会覆盖 `title` 和 `description` props
3. **结构组成**：卡片由 CardHeader、CardContent、CardFooter 三部分组成
4. **响应式**：卡片宽度自适应父容器，可通过 `class` 设置固定宽度
## 典型使用场景
- 信息展示卡片
- 表单容器
- 数据统计卡片
- 列表项容器
- 对话框内容区
packages/components/src/checkbox/README.md
Executable → Regular
+17 -21
View File
@@ -2,17 +2,12 @@
简洁的复选框组件，支持双向绑定和标签内容插槽。
## 基础用法
## 使用场景
```vue
<script setup lang="ts">
const checked = ref(false)
</script>
<template>
<FaCheckbox v-model="checked">同意协议</FaCheckbox>
</template>
```
- 表单中的同意协议选项
- 多选过滤条件
- 设置选项开关
- 列表项批量选择
## Props
@@ -31,12 +26,20 @@ const checked = ref(false)
通过 `v-model` 双向绑定，无需单独事件
## Exposed Methods
无
## 示例
### 基础用法
```vue
<script setup lang="ts">
const checked = ref(false)
</script>
<template>
<FaCheckbox v-model="checked">同意协议</FaCheckbox>
</template>
```
### 基础复选框
```vue
@@ -129,10 +132,3 @@ function handleSubmit() {
3. **空标签隐藏**：当不提供默认插槽内容时，标签元素会自动隐藏
4. **禁用状态**：禁用状态下复选框和标签都无法点击
5. **无障碍支持**：原生支持键盘操作（空格键切换状态）
## 典型使用场景
- 表单中的同意协议选项
- 多选过滤条件
- 设置选项开关
- 列表项批量选择
packages/components/src/collapsible/README.md
Executable → Regular
+26 -32
View File
@@ -2,7 +2,32 @@
可折叠的内容面板，支持展开/收起动画。
## 基础用法
## 使用场景
- FAQ 问答列表
- 手风琴菜单
- 可展开的详情区域
- 目录折叠
- 高级筛选条件展开
## Props
### Model
| 名称 | 类型 | 说明 |
|------|------|------|
| `modelValue` | `boolean` | 展开/收起状态（支持 v-model） |
## Slots
| 名称 | 说明 |
|------|------|
| `trigger` | 触发元素，slot props: `{ open: boolean }` |
| `default` | 可折叠的内容 |
## 示例
### 基础用法
```vue
<script setup lang="ts">
@@ -21,29 +46,6 @@ const open = ref(false)
</template>
```
## Props
无
## Model
| 名称 | 类型 | 说明 |
|------|------|------|
| `modelValue` | `boolean` | 展开/收起状态（支持 v-model） |
## Slots
| 名称 | 说明 |
|------|------|
| `trigger` | 触发元素，slot props: `{ open: boolean }` |
| `default` | 可折叠的内容 |
## Events
无
## 示例
### 基础折叠
```vue
@@ -170,11 +172,3 @@ const open = ref(false)
2. **动画效果**：展开/收起时有平滑的高度动画
3. **状态同步**：通过 `v-model` 双向绑定控制展开状态
4. **内容要求**：折叠内容应该有明确的高度，避免嵌套复杂布局
## 典型使用场景
- FAQ 问答列表
- 手风琴菜单
- 可展开的详情区域
- 目录折叠
- 高级筛选条件展开
packages/components/src/context-menu/README.md
Executable → Regular
+45 -45
View File
@@ -2,7 +2,51 @@
右键点击时弹出的上下文菜单，支持分组、子菜单和图标。
## 基础用法
## 使用场景
- 表格行操作菜单
- 文件/文件夹右键菜单
- 画布/编辑器上下文菜单
- 列表项操作菜单
- 图片/媒体文件操作菜单
## Props
| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `items` | `(MenuItem \| MenuSubItem)[][]` | **必需** | 菜单项数组（二维数组） |
### MenuItem 接口
```ts
interface MenuItem {
label: string
icon?: string
variant?: 'default' | 'destructive'
disabled?: boolean
handle?: () => void
}
```
### MenuSubItem 接口（子菜单）
```ts
interface MenuSubItem {
label: string
items: (MenuItem | MenuSubItem)[][]
}
```
## Slots
| 名称 | 说明 |
|------|------|
| `default` | 触发元素（必填） |
| `label` | 菜单头部标签 |
## 示例
### 基础用法
```vue
<script setup lang="ts">
@@ -23,42 +67,6 @@ const items = [
</template>
```
## Props
| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `items` | `(MenuItem \| MenuSubItem)[][]` | **必需** | 菜单项数组（二维数组） |
## Slots
| 名称 | 说明 |
|------|------|
| `default` | 触发元素（必填） |
| `label` | 菜单头部标签 |
## MenuItem 接口
```ts
interface MenuItem {
label: string
icon?: string
variant?: 'default' | 'destructive'
disabled?: boolean
handle?: () => void
}
```
## MenuSubItem 接口（子菜单）
```ts
interface MenuSubItem {
label: string
items: (MenuItem | MenuSubItem)[][]
}
```
## 示例
### 基础右键菜单
```vue
@@ -268,11 +276,3 @@ function getFileMenu(file: any) {
3. **触发区域**：default slot 的元素为右键触发区域
4. **子菜单**：通过 `items` 属性嵌套实现多级菜单
5. **危险操作**：设置 `variant: 'destructive'` 标记为危险操作（红色）
## 典型使用场景
- 表格行操作菜单
- 文件/文件夹右键菜单
- 画布/编辑器上下文菜单
- 列表项操作菜单
- 图片/媒体文件操作菜单
packages/components/src/divider/README.md
Executable → Regular
+15 -19
View File
@@ -2,14 +2,13 @@
带文字内容的分割线组件，支持文字位置调整。
## 基础用法
## 使用场景
```vue
<template>
<FaDivider />
<FaDivider>分割文字</FaDivider>
</template>
```
- 章节分隔
- 内容区域分割
- 表单分组标题
- 列表分隔
- 页面内容分区
## Props
@@ -24,12 +23,17 @@
|------|------|
| `default` | 分割线中间的文字内容 |
## Events
无
## 示例
### 基础用法
```vue
<template>
<FaDivider />
<FaDivider>分割文字</FaDivider>
</template>
```
### 基础分割线
```vue
@@ -108,11 +112,3 @@
2. **自动布局**：文字两侧的线条会自动填充剩余空间
3. **无文字时**：不提供 slot 内容时，显示为一条完整的分割线
4. **间距**：默认上下边距为 `1rem`（`my-4`）
## 典型使用场景
- 章节分隔
- 内容区域分割
- 表单分组标题
- 列表分隔
- 页面内容分区
packages/components/src/drawer/README.md
Executable → Regular
+39 -41
View File
@@ -2,20 +2,13 @@
侧滑抽屉组件，支持从四个方向弹出，内置头部、内容区和底部操作区。
## 基础用法
## 使用场景
```vue
<script setup lang="ts">
const open = ref(false)
</script>
<template>
<FaButton @click="open = true">打开抽屉</FaButton>
<FaDrawer v-model="open" title="抽屉标题">
<div>抽屉内容</div>
</FaDrawer>
</template>
```
- 表单编辑
- 详情展示
- 过滤筛选条件
- 配置设置
- 确认对话框（使用 show-cancel-button）
## Props
@@ -70,12 +63,43 @@ const open = ref(false)
| `confirm` | 点击确定按钮时触发 |
| `cancel` | 点击取消按钮时触发 |
## Exposed Methods
## API
无
### 函数式调用
```vue
<script setup lang="ts">
const drawer = useFaDrawer()
function openDrawer() {
drawer.create({
title: '提示',
content: '这是一个抽屉',
onConfirm: () => {
console.log('确认操作')
},
}).open()
}
</script>
```
## 示例
### 基础用法
```vue
<script setup lang="ts">
const open = ref(false)
</script>
<template>
<FaButton @click="open = true">打开抽屉</FaButton>
<FaDrawer v-model="open" title="抽屉标题">
<div>抽屉内容</div>
</FaDrawer>
</template>
```
### 基础抽屉
```vue
@@ -250,24 +274,6 @@ function handleSubmit() {
</template>
```
## 函数式调用
```vue
<script setup lang="ts">
const drawer = useFaDrawer()
function openDrawer() {
drawer.create({
title: '提示',
content: '这是一个抽屉',
onConfirm: () => {
console.log('确认操作')
},
}).open()
}
</script>
```
## 注意事项
1. **v-model 绑定**：使用 `v-model` 控制抽屉打开状态
@@ -276,11 +282,3 @@ function openDrawer() {
4. **加载状态**：`loading` 会显示遮罩层，`confirmButtonLoading` 只影响按钮
5. **动画事件**：`opened` 和 `closed` 在动画完成后触发
6. **默认关闭行为**：点击确定/取消按钮会自动关闭抽屉，如需阻止请在 `beforeClose` 中处理
## 典型使用场景
- 表单编辑
- 详情展示
- 过滤筛选条件
- 配置设置
- 确认对话框（使用 show-cancel-button）
packages/components/src/dropdown/README.md
Executable → Regular
+51 -51
View File
@@ -2,7 +2,57 @@
功能强大的下拉菜单组件，支持分组、子菜单、图标和自定义内容。
## 基础用法
## 使用场景
- 用户头像下拉菜单
- 表格行操作菜单
- 工具栏更多操作
- 导航菜单
- 快捷操作菜单
## Props
| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `items` | `(MenuItem \| MenuSubItem)[][]` | **必需** | 菜单项数组（二维数组，每组为一行） |
| `align` | `'start' \| 'end' \| 'center'` | - | 水平对齐方式 |
| `side` | `'top' \| 'right' \| 'bottom' \| 'left'` | `'bottom'` | 弹出方向 |
| `sideOffset` | `number` | `4` | 与触发元素的偏移距离 |
| `alignOffset` | `number` | `0` | 对齐偏移量 |
| `collisionPadding` | `number` | `0` | 与视口边缘的碰撞内边距 |
### MenuItem 接口
```ts
interface MenuItem {
label: string
icon?: string
variant?: 'default' | 'destructive'
disabled?: boolean
handle?: () => void
}
```
### MenuSubItem 接口（子菜单）
```ts
interface MenuSubItem {
label: string
items: (MenuItem | MenuSubItem)[][]
}
```
## Slots
| 名称 | 说明 |
|------|------|
| `default` | 触发元素（必填） |
| `header` | 菜单头部内容 |
| `footer` | 菜单底部内容 |
## 示例
### 基础用法
```vue
<script setup lang="ts">
@@ -21,48 +71,6 @@ const items = [
</template>
```
## Props
| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `items` | `(MenuItem \| MenuSubItem)[][]` | **必需** | 菜单项数组（二维数组，每组为一行） |
| `align` | `'start' \| 'end' \| 'center'` | - | 水平对齐方式 |
| `side` | `'top' \| 'right' \| 'bottom' \| 'left'` | `'bottom'` | 弹出方向 |
| `sideOffset` | `number` | `4` | 与触发元素的偏移距离 |
| `alignOffset` | `number` | `0` | 对齐偏移量 |
| `collisionPadding` | `number` | `0` | 与视口边缘的碰撞内边距 |
## Slots
| 名称 | 说明 |
|------|------|
| `default` | 触发元素（必填） |
| `header` | 菜单头部内容 |
| `footer` | 菜单底部内容 |
## MenuItem 接口
```ts
interface MenuItem {
label: string
icon?: string
variant?: 'default' | 'destructive'
disabled?: boolean
handle?: () => void
}
```
## MenuSubItem 接口（子菜单）
```ts
interface MenuSubItem {
label: string
items: (MenuItem | MenuSubItem)[][]
}
```
## 示例
### 基础下拉菜单
```vue
@@ -239,11 +247,3 @@ const items = [
3. **子菜单**：通过 `items` 属性嵌套可实现多级子菜单
4. **事件处理**：通过 `handle` 函数处理点击事件
5. **危险操作**：设置 `variant: 'destructive'` 可将菜单项标记为危险操作（红色）
## 典型使用场景
- 用户头像下拉菜单
- 表格行操作菜单
- 工具栏更多操作
- 导航菜单
- 快捷操作菜单
packages/components/src/file-upload/README.md
Executable → Regular
+30 -30
View File
@@ -2,20 +2,14 @@
支持拖拽和点击上传的文件上传组件，带进度显示和文件管理功能。
## 基础用法
## 使用场景
```vue
<script setup lang="ts">
const fileList = ref([])
</script>
<template>
<FaFileUpload
v-model="fileList"
action="/api/upload"
/>
</template>
```
- 头像/图片上传
- 附件文件上传
- 批量文件上传
- 资料文件上传
- 证据/凭证上传
- 文档上传
## Props
@@ -34,13 +28,13 @@ const fileList = ref([])
| `hideTips` | `boolean` | `false` | 是否隐藏提示信息 |
| `disabled` | `boolean` | `false` | 是否禁用 |
## Model
### Model
| 名称 | 类型 | 说明 |
|------|------|------|
| `modelValue` | `FileItem[]` | 已上传的文件列表（必需） |
## FileItem 接口
### FileItem 接口
```ts
interface FileItem {
@@ -53,6 +47,12 @@ interface FileItem {
}
```
## Slots
| 名称 | 说明 |
|------|------|
| `default` | 自定义上传区域内容 |
## Events
| 事件名 | 参数 | 说明 |
@@ -60,14 +60,23 @@ interface FileItem {
| `onSuccess` | `response: any, file: File` | 单个文件上传成功时触发 |
| `onClick` | `fileItem: FileItem, index: number` | 点击文件项时触发 |
## Slots
| 名称 | 说明 |
|------|------|
| `default` | 自定义上传区域内容 |
## 示例
### 基础用法
```vue
<script setup lang="ts">
const fileList = ref([])
</script>
<template>
<FaFileUpload
v-model="fileList"
action="/api/upload"
/>
</template>
```
### 基础上传
```vue
@@ -291,12 +300,3 @@ function handleFileClick(fileItem: FileItem) {
4. **重新上传**：失败的文件可以点击重试
5. **删除文件**：上传成功的文件可以删除
6. **拖拽上传**：支持拖拽文件到上传区域
## 典型使用场景
- 头像/图片上传
- 附件文件上传
- 批量文件上传
- 资料文件上传
- 证据/凭证上传
- 文档上传
packages/components/src/fixed-bar/README.md
Executable → Regular
+19 -18
View File
@@ -2,7 +2,25 @@
固定在页面顶部或底部的栏位组件，适用于展示操作栏、筛选条件等内容。
## 基础用法
## 使用场景
- 固定在页面顶部或底部的栏位组件，适用于展示操作栏、筛选条件等内容。
- 常见用法：固定在顶部、固定在底部、顶部筛选栏、底部操作栏。
## Props
| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| position | 固定位置 | `'top' \| 'bottom'` | `required` |
| class | 自定义类名 | `HTMLAttributes['class']` | `undefined` |
## Slots
| 名称 | 说明 |
|------|------|
| default | 默认插槽，固定栏内容 |
## 示例
### 固定在顶部
@@ -30,23 +48,6 @@
</template>
```
## API
### Props
| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| position | 固定位置 | `'top' \| 'bottom'` | `required` |
| class | 自定义类名 | `HTMLAttributes['class']` | `undefined` |
### Slots
| 名称 | 说明 |
|------|------|
| default | 默认插槽，固定栏内容 |
## 示例
### 顶部筛选栏
```vue
packages/components/src/hover-card/README.md
Executable → Regular
+22 -26
View File
@@ -2,20 +2,14 @@
鼠标悬停时显示的卡片，用于展示额外信息。
## 基础用法
## 使用场景
```vue
<template>
<FaHoverCard>
<a href="#">悬停我</a>
<template #card>
<div class="p-4">
<p>悬浮卡片内容</p>
</div>
</template>
</FaHoverCard>
</template>
```
- 用户信息预览
- 链接/引用预览
- 术语解释
- 图片放大预览
- 日期/时间详情
- 标签详情
## Props
@@ -35,12 +29,23 @@
| `default` | 触发元素（必填） |
| `card` | 悬浮卡片内容 |
## Events
无
## 示例
### 基础用法
```vue
<template>
<FaHoverCard>
<a href="#">悬停我</a>
<template #card>
<div class="p-4">
<p>悬浮卡片内容</p>
</div>
</template>
</FaHoverCard>
</template>
```
### 基础悬浮卡片
```vue
@@ -181,12 +186,3 @@
2. **自动延迟**：默认有短暂的延迟才显示，避免鼠标划过时误触发
3. **自动定位**：组件会自动调整位置避免超出视口
4. **内容宽度**：卡片内容建议设置合适的宽度
## 典型使用场景
- 用户信息预览
- 链接/引用预览
- 术语解释
- 图片放大预览
- 日期/时间详情
- 标签详情
packages/components/src/icon/README.md
+24 -32
View File
@@ -2,14 +2,13 @@
统一的图标组件，支持 UnoCSS 图标类、Iconify、SVG 雪碧图和外部图片 URL 四种图标来源。
## 基础用法
## 使用场景
```vue
<template>
<FaIcon name="i-lucide:search" />
<FaIcon name="heroicons:information-circle" />
</template>
```
- 按钮图标
- 导航菜单图标
- 状态指示图标
- 操作图标（编辑、删除、查看等）
- 表单装饰图标
## Props
@@ -19,25 +18,17 @@
| `transition` | `boolean` | `false` | 是否开启图标切换动画 |
| `class` | `HTMLAttributes['class']` | - | 自定义 CSS 类 |
## 图标格式说明
| 格式 | 示例 | 说明 |
|------|------|------|
| UnoCSS | `i-lucide:search` | 使用 UnoCSS 图标类 |
| Iconify | `heroicons:information-circle` | 使用 Iconify 在线图标 |
| SVG 雪碧图 | `#icon-my-icon` | 使用项目内 SVG 雪碧图 |
| 图片 URL | `https://example.com/icon.svg` 或 `/assets/icon.svg` | 使用外部图片或本地图片 |
## Slots
无
## Events
无
## 示例
### 基础用法
```vue
<template>
<FaIcon name="i-lucide:search" />
<FaIcon name="heroicons:information-circle" />
</template>
```
### UnoCSS 图标（推荐）
```vue
@@ -120,15 +111,16 @@ const isActive = ref(false)
## 注意事项
### 图标格式说明
| 格式 | 示例 | 说明 |
|------|------|------|
| UnoCSS | `i-lucide:search` | 使用 UnoCSS 图标类 |
| Iconify | `heroicons:information-circle` | 使用 Iconify 在线图标 |
| SVG 雪碧图 | `#icon-my-icon` | 使用项目内 SVG 雪碧图 |
| 图片 URL | `https://example.com/icon.svg` 或 `/assets/icon.svg` | 使用外部图片或本地图片 |
1. **图标尺寸**：图标默认尺寸为 `1em`，可通过父元素的 `font-size` 或图标的 `class` 控制
2. **图标颜色**：使用 `currentColor`，继承父元素的文字颜色
3. **加载状态**：使用图片 URL 时，加载失败会显示破损图片图标
4. **切换动画**：默认图标切换时无动画，可通过 `transition` prop 开启轻量的缩放 + blur 过渡动画（0.24s）
## 典型使用场景
- 按钮图标
- 导航菜单图标
- 状态指示图标
- 操作图标（编辑、删除、查看等）
- 表单装饰图标
packages/components/src/image-preview/README.md
Executable → Regular
+15 -15
View File
@@ -2,13 +2,14 @@
带加载状态和错误处理的图片预览组件，支持点击放大查看。
## 基础用法
## 使用场景
```vue
<template>
<FaImagePreview src="https://example.com/image.jpg" />
</template>
```
- 商品图片展示
- 用户头像预览
- 图片画廊
- 附件图片预览
- 缩略图列表
- 相册展示
## Props
@@ -33,6 +34,14 @@
## 示例
### 基础用法
```vue
<template>
<FaImagePreview src="https://example.com/image.jpg" />
</template>
```
### 基础图片预览
```vue
@@ -186,12 +195,3 @@ const photos = [
3. **错误处理**：加载失败时显示错误图标
4. **hover 效果**：鼠标悬停时图片会轻微放大
5. **响应式**：建议设置合适的尺寸或使用响应式类
## 典型使用场景
- 商品图片展示
- 用户头像预览
- 图片画廊
- 附件图片预览
- 缩略图列表
- 相册展示
packages/components/src/image-upload/README.md
Executable → Regular
+29 -29
View File
@@ -2,20 +2,14 @@
专门用于图片上传的组件，支持预览、排序和拖拽上传。
## 基础用法
## 使用场景
```vue
<script setup lang="ts">
const images = ref([])
</script>
<template>
<FaImageUpload
v-model="images"
action="/api/upload"
/>
</template>
```
- 用户头像上传
- 商品图片上传
- 文章配图上传
- 相册图片上传
- 证据/凭证图片上传
- Banner 图上传
## Props
@@ -37,26 +31,41 @@ const images = ref([])
| `hideTips` | `boolean` | `false` | 是否隐藏提示 |
| `disabled` | `boolean` | `false` | 是否禁用 |
## Model
### Model
| 名称 | 类型 | 说明 |
|------|------|------|
| `modelValue` | `string[]` | 已上传图片 URL 列表（必需） |
## Events
| 事件名 | 参数 | 说明 |
|--------|------|------|
| `onSuccess` | `response: any, file: File` | 单张图片上传成功时触发 |
## Slots
| 名称 | 说明 |
|------|------|
| `default` | 自定义上传按钮内容 |
## Events
| 事件名 | 参数 | 说明 |
|--------|------|------|
| `onSuccess` | `response: any, file: File` | 单张图片上传成功时触发 |
## 示例
### 基础用法
```vue
<script setup lang="ts">
const images = ref([])
</script>
<template>
<FaImageUpload
v-model="images"
action="/api/upload"
/>
</template>
```
### 基础图片上传
```vue
@@ -300,12 +309,3 @@ function handleSubmit() {
4. **上传进度**：上传时显示进度条
5. **格式校验**：根据 `ext` 属性校验图片格式
6. **大小限制**：根据 `size` 属性校验图片大小
## 典型使用场景
- 用户头像上传
- 商品图片上传
- 文章配图上传
- 相册图片上传
- 证据/凭证图片上传
- Banner 图上传
packages/components/src/input-otp/README.md
Executable → Regular
+30 -34
View File
@@ -2,7 +2,36 @@
用于输入短信验证码、邮箱验证码等一次性密码的输入组件。
## 基础用法
## 使用场景
- 短信验证码输入
- 邮箱验证码验证
- 双重身份验证（2FA）
- 登录保护验证
- 支付密码验证
- 敏感操作确认
## Props
| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `length` | `number` | `6` | 验证码位数 |
### Model
| 名称 | 类型 | 说明 |
|------|------|------|
| `modelValue` | `string` | 输入的验证码 |
## Events
| 事件名 | 参数 | 说明 |
|--------|------|------|
| `complete` | - | 验证码输入完成时触发 |
## 示例
### 基础用法
```vue
<script setup lang="ts">
@@ -14,30 +43,6 @@ const code = ref('')
</template>
```
## Props
| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `length` | `number` | `6` | 验证码位数 |
## Model
| 名称 | 类型 | 说明 |
|------|------|------|
| `modelValue` | `string` | 输入的验证码 |
## Slots
无
## Events
| 事件名 | 参数 | 说明 |
|--------|------|------|
| `complete` | - | 验证码输入完成时触发 |
## 示例
### 基础验证码输入
```vue
@@ -175,12 +180,3 @@ function handleComplete() {
3. **粘贴支持**：支持粘贴验证码，会自动分配到各个输入框
4. **退格支持**：按退格键自动删除并跳转到前一个输入框
5. **完成事件**：输入位数达到 `length` 时自动触发 `complete` 事件
## 典型使用场景
- 短信验证码输入
- 邮箱验证码验证
- 双重身份验证（2FA）
- 登录保护验证
- 支付密码验证
- 敏感操作确认
packages/components/src/input/README.md
Executable → Regular
+18 -18
View File
@@ -2,17 +2,13 @@
基础输入框组件，支持密码显示切换、清空按钮和前后缀插槽。
## 基础用法
## 使用场景
```vue
<script setup lang="ts">
const value = ref('')
</script>
<template>
<FaInput v-model="value" placeholder="请输入..." />
</template>
```
- 表单输入字段
- 搜索框
- 密码输入
- 带单位的数值输入
- 带前缀的账号输入（如 +86）
## Props
@@ -48,6 +44,18 @@ const value = ref('')
## 示例
### 基础用法
```vue
<script setup lang="ts">
const value = ref('')
</script>
<template>
<FaInput v-model="value" placeholder="请输入..." />
</template>
```
### 基础输入框
```vue
@@ -190,11 +198,3 @@ const strength = computed(() => {
3. **清空按钮**：`clearable` 模式下，仅当输入框有值且获得焦点或悬停时显示清空按钮
4. **原生属性**：支持所有原生 input 属性（placeholder、autocomplete 等）
5. **对齐方式**：`align="inline"` 时前后缀与输入内容同行，`align="block"` 时上下排列
## 典型使用场景
- 表单输入字段
- 搜索框
- 密码输入
- 带单位的数值输入
- 带前缀的账号输入（如 +86）
packages/components/src/kbd-group/README.md
Executable → Regular
+16 -20
View File
@@ -2,16 +2,12 @@
用于包裹多个 `FaKbd` 组件，展示组合按键的容器组件。
## 基础用法
## 使用场景
```vue
<template>
<FaKbdGroup>
<FaKbd>⌘</FaKbd>
<FaKbd>K</FaKbd>
</FaKbdGroup>
</template>
```
- 快捷键组合展示
- 键盘操作说明
- 命令面板提示
- 帮助文档中的多键组合说明
## Props
@@ -25,12 +21,19 @@
|------|------|
| `default` | 包含的 `FaKbd` 组件 |
## Events
无
## 示例
### 基础用法
```vue
<template>
<FaKbdGroup>
<FaKbd>⌘</FaKbd>
<FaKbd>K</FaKbd>
</FaKbdGroup>
</template>
```
### 双键组合
```vue
@@ -88,10 +91,3 @@
1. **仅用于组合**：此组件仅用于包裹多个 `FaKbd`，不建议单独使用
2. **间距自动**：内部的 `FaKbd` 会自动添加适当间距
3. **灵活内容**：除了 `FaKbd` 外，也可以放入其他内容（如分隔符）
## 典型使用场景
- 快捷键组合展示
- 键盘操作说明
- 命令面板提示
- 帮助文档中的多键组合说明
packages/components/src/kbd/README.md
Executable → Regular
+17 -21
View File
@@ -2,14 +2,12 @@
用于展示键盘按键组合的视觉样式，常用于快捷键提示。
## 基础用法
## 使用场景
```vue
<template>
<FaKbd>⌘</FaKbd>
<FaKbd>K</FaKbd>
</template>
```
- 快捷键提示
- 操作指南中的按键说明
- 命令面板的快捷键展示
- 帮助文档中的键盘操作说明
## Props
@@ -23,12 +21,17 @@
|------|------|
| `default` | 按键内容（字符、图标等） |
## Events
无
## 示例
### 基础用法
```vue
<template>
<FaKbd>⌘</FaKbd>
<FaKbd>K</FaKbd>
</template>
```
### 单个按键
```vue
@@ -77,7 +80,9 @@
</template>
```
## 样式特点
## 注意事项
### 样式特点
- 小号字体（`text-xs`）
- 中等字重（`font-medium`）
@@ -85,15 +90,6 @@
- 内边距适当
- 支持 SVG 图标（自动调整尺寸）
## 注意事项
1. **配合使用**：组合按键时请使用 `FaKbdGroup` 包裹多个 `FaKbd`
2. **内容长度**：按键内容不宜过长，适合单个字符或简短单词
3. **图标支持**：可以使用 `FaIcon` 组件显示图标，图标会自动调整为合适尺寸
## 典型使用场景
- 快捷键提示
- 操作指南中的按键说明
- 命令面板的快捷键展示
- 帮助文档中的键盘操作说明
packages/components/src/label/README.md
Executable → Regular
+15 -19
View File
@@ -2,15 +2,12 @@
表单标签组件，支持固定宽度标签和自定义内容，用于表单字段的标签显示。
## 基础用法
## 使用场景
```vue
<template>
<FaLabel label="用户名">
<FaInput v-model="username" />
</FaLabel>
</template>
```
- 表单字段标签
- 多列表单布局
- 需要固定标签宽度的表单
- 表单项的组合布局
## Props
@@ -26,12 +23,18 @@
|------|------|
| `default` | 表单项内容（输入框、选择器等） |
## Events
无
## 示例
### 基础用法
```vue
<template>
<FaLabel label="用户名">
<FaInput v-model="username" />
</FaLabel>
</template>
```
### 基础标签
```vue
@@ -106,10 +109,3 @@
2. **标签对齐**：多个表单项使用相同的 `labelWidth` 可实现标签对齐
3. **无 label 属性**：不设置 `label` 属性时，仅作为布局容器使用
## 典型使用场景
- 表单字段标签
- 多列表单布局
- 需要固定标签宽度的表单
- 表单项的组合布局
packages/components/src/modal/README.md
Executable → Regular
+81 -83
View File
@@ -2,20 +2,14 @@
模态对话框组件，支持拖拽、最大化、自定义内容和多种显示模式。
## 基础用法
## 使用场景
```vue
<script setup lang="ts">
const open = ref(false)
</script>
<template>
<FaButton @click="open = true">打开对话框</FaButton>
<FaModal v-model="open" title="对话框标题">
<div>对话框内容</div>
</FaModal>
</template>
```
- 确认对话框
- 表单编辑
- 详情展示
- 消息提示（alert）
- 警告提示
- 配置设置
## Props
@@ -75,12 +69,84 @@ const open = ref(false)
| `confirm` | 点击确定按钮时触发 |
| `cancel` | 点击取消按钮时触发 |
## Exposed Methods
## API
无
### 函数式调用
```vue
<script setup lang="ts">
const modal = useFaModal()
function showAlert() {
modal.info({
title: '提示',
content: '这是一条提示信息',
onConfirm: () => {
console.log('确认')
},
})
}
function showSuccess() {
modal.success({
title: '成功',
content: '操作成功完成',
})
}
function showConfirm() {
modal.confirm({
title: '确认',
content: '确定要删除吗？',
onConfirm: () => {
console.log('删除')
},
})
}
function showError() {
modal.error({
title: '错误',
content: '操作失败',
})
}
function showWarning() {
modal.warning({
title: '警告',
content: '此操作有风险',
})
}
</script>
<template>
<div class="flex gap-2">
<FaButton @click="showAlert">信息提示</FaButton>
<FaButton @click="showSuccess">成功提示</FaButton>
<FaButton @click="showConfirm">确认对话框</FaButton>
<FaButton @click="showError">错误提示</FaButton>
<FaButton @click="showWarning">警告提示</FaButton>
</div>
</template>
```
## 示例
### 基础用法
```vue
<script setup lang="ts">
const open = ref(false)
</script>
<template>
<FaButton @click="open = true">打开对话框</FaButton>
<FaModal v-model="open" title="对话框标题">
<div>对话框内容</div>
</FaModal>
</template>
```
### 基础对话框
```vue
@@ -281,65 +347,6 @@ function handleSubmit() {
</template>
```
## 函数式调用
```vue
<script setup lang="ts">
const modal = useFaModal()
function showAlert() {
modal.info({
title: '提示',
content: '这是一条提示信息',
onConfirm: () => {
console.log('确认')
},
})
}
function showSuccess() {
modal.success({
title: '成功',
content: '操作成功完成',
})
}
function showConfirm() {
modal.confirm({
title: '确认',
content: '确定要删除吗？',
onConfirm: () => {
console.log('删除')
},
})
}
function showError() {
modal.error({
title: '错误',
content: '操作失败',
})
}
function showWarning() {
modal.warning({
title: '警告',
content: '此操作有风险',
})
}
</script>
<template>
<div class="flex gap-2">
<FaButton @click="showAlert">信息提示</FaButton>
<FaButton @click="showSuccess">成功提示</FaButton>
<FaButton @click="showConfirm">确认对话框</FaButton>
<FaButton @click="showError">错误提示</FaButton>
<FaButton @click="showWarning">警告提示</FaButton>
</div>
</template>
```
## 注意事项
1. **v-model 绑定**：使用 `v-model` 控制对话框打开状态
@@ -348,12 +355,3 @@ function showWarning() {
4. **拖拽限制**：拖拽仅在有标题栏且非最大化状态下有效
5. **动画事件**：`opened` 和 `closed` 在动画完成后触发
6. **函数式调用**：`useFaModal()` 提供 `info`、`success`、`warning`、`error`、`confirm` 方法
## 典型使用场景
- 确认对话框
- 表单编辑
- 详情展示
- 消息提示（alert）
- 警告提示
- 配置设置
packages/components/src/number-field/README.md
Executable → Regular
+36 -29
View File
@@ -2,7 +2,37 @@
数字输入框组件，支持增减按钮和数值范围控制。
## 基础用法
## 使用场景
- 数字输入框组件，支持增减按钮和数值范围控制。
- 常见用法：最小值 / 最大值 / 步长、禁用状态、带自定义宽度。
## Props
| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| modelValue | 绑定值 | `number` | `required` |
| min | 最小值 | `number` | `undefined` |
| max | 最大值 | `number` | `undefined` |
| step | 步长 | `number` | `undefined` |
| disabled | 是否禁用 | `boolean` | `false` |
| class | 自定义类名 | `HTMLAttributes['class']` | `undefined` |
## Slots
| 名称 | 说明 |
|------|------|
| - | 无插槽 |
## Events
| 事件名 | 说明 | 回调参数 |
|--------|------|----------|
| update:modelValue | 值更新时触发 | `(value: number)` |
## 示例
### 基础用法
```vue
<script setup lang="ts">
@@ -14,7 +44,7 @@ const value = ref(0)
</template>
```
## 最小值 / 最大值 / 步长
### 最小值 / 最大值 / 步长
```vue
<script setup lang="ts">
@@ -26,33 +56,6 @@ const value = ref(10)
</template>
```
## API
### Props
| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| modelValue | 绑定值 | `number` | `required` |
| min | 最小值 | `number` | `undefined` |
| max | 最大值 | `number` | `undefined` |
| step | 步长 | `number` | `undefined` |
| disabled | 是否禁用 | `boolean` | `false` |
| class | 自定义类名 | `HTMLAttributes['class']` | `undefined` |
### Events
| 事件名 | 说明 | 回调参数 |
|--------|------|----------|
| update:modelValue | 值更新时触发 | `(value: number)` |
### Slots
| 名称 | 说明 |
|------|------|
| - | 无插槽 |
## 示例
### 禁用状态
```vue
@@ -76,3 +79,7 @@ const value = ref(0)
<FaNumberField v-model="value" class="w-[300px]" />
</template>
```
## 注意事项
- 无特殊限制，建议按示例中的受控方式接入，并结合业务容器尺寸验证最终展示效果。
packages/components/src/page-header/README.md
Executable → Regular
+14 -18
View File
@@ -2,13 +2,13 @@
页面级标题组件，支持标题、描述和右侧操作区。
## 基础用法
## 使用场景
```vue
<template>
<FaPageHeader title="页面标题" description="页面描述" />
</template>
```
- 列表页面头部
- 详情页面标题
- 表单页面头部
- 仪表盘页面标题
- 设置页面头部
## Props
@@ -28,12 +28,16 @@
| `description` | 自定义描述内容 |
| `default` | 右侧操作区内容（按钮等） |
## Events
无
## 示例
### 基础用法
```vue
<template>
<FaPageHeader title="页面标题" description="页面描述" />
</template>
```
### 基础标题
```vue
@@ -122,11 +126,3 @@
2. **自动隐藏**：操作区没有内容时会自动隐藏
3. **描述为空**：description 为空字符串时不会显示描述区域
4. **典型位置**：通常放在 `FaPageMain` 组件上方使用
## 典型使用场景
- 列表页面头部
- 详情页面标题
- 表单页面头部
- 仪表盘页面标题
- 设置页面头部
packages/components/src/page-main/README.md
Executable → Regular
+16 -24
View File
@@ -2,15 +2,13 @@
页面主内容容器组件，支持标题和可折叠的内容区域。
## 基础用法
## 使用场景
```vue
<template>
<FaPageMain title="内容标题">
页面主内容
</FaPageMain>
</template>
```
- 表单内容容器
- 详情信息展示
- 数据列表容器
- 可折叠的信息区块
- 页面分节容器
## Props
@@ -30,16 +28,18 @@
| `title` | 自定义标题内容 |
| `default` | 主内容 |
## Events
无
## Exposed Methods
无
## 示例
### 基础用法
```vue
<template>
<FaPageMain title="内容标题">
页面主内容
</FaPageMain>
</template>
```
### 基础内容区
```vue
@@ -135,11 +135,3 @@
2. **折叠按钮**：鼠标悬停时会在底部显示展开/收起按钮
3. **高度设置**：`height` 属性仅在 `collaspe` 为 `true` 时生效
4. **典型搭配**：通常与 `FaPageHeader` 配合使用，构成完整的页面布局
## 典型使用场景
- 表单内容容器
- 详情信息展示
- 数据列表容器
- 可折叠的信息区块
- 页面分节容器
packages/components/src/pagination/README.md
+23 -27
View File
@@ -2,19 +2,13 @@
功能完整的分页组件，支持总条数显示、每页条数选择、页码跳转和自定义布局。
## 基础用法
## 使用场景
```vue
<script setup lang="ts">
const page = ref(1)
const size = ref(10)
const total = ref(100)
</script>
<template>
<FaPagination v-model:page="page" v-model:size="size" :total="total" />
</template>
```
- 数据列表分页
- 表格分页
- 搜索结果分页
- 文章列表分页
- 评论列表分页
## Props
@@ -33,12 +27,22 @@ const total = ref(100)
| `pageChange` | `page: number` | 页码变化时触发 |
| `sizeChange` | `size: number` | 每页条数变化时触发 |
## Slots
无
## 示例
### 基础用法
```vue
<script setup lang="ts">
const page = ref(1)
const size = ref(10)
const total = ref(100)
</script>
<template>
<FaPagination v-model:page="page" v-model:size="size" :total="total" />
</template>
```
### 基础分页
```vue
@@ -198,7 +202,9 @@ watch([page, size], loadData)
</template>
```
## 布局配置说明
## 注意事项
### 布局配置说明
`layout` 属性控制分页组件的布局和元素顺序，支持以下元素：
@@ -223,18 +229,8 @@ watch([page, size], loadData)
<FaPagination layout="total, sizes, pager" />
```
## 注意事项
1. **必需属性**：`total`、`page`、`size` 为必需属性
2. **双向绑定**：`page` 和 `size` 支持 `v-model` 双向绑定
3. **页码范围**：跳转页码会自动限制在有效范围内
4. **自动聚焦**：跳转输入框获得焦点时会自动选中文本
5. **回车跳转**：在跳转输入框中按回车键可触发跳转
## 典型使用场景
- 数据列表分页
- 表格分页
- 搜索结果分页
- 文章列表分页
- 评论列表分页
packages/components/src/password-strength/README.md
Executable → Regular
+33 -40
View File
@@ -2,7 +2,23 @@
实时显示密码强度指示，帮助用户创建更安全的密码。
## 基础用法
## 使用场景
- 用户注册密码设置
- 修改密码页面
- 重置密码表单
- 账号安全设置
- 密码强度要求提示
## Props
| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `password` | `string` | `''` | 密码值 |
## 示例
### 基础用法
```vue
<script setup lang="ts">
@@ -17,32 +33,6 @@ const password = ref('')
</template>
```
## Props
| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `password` | `string` | `''` | 密码值 |
## Slots
无
## Events
无
## 强度规则
密码强度根据以下规则计算（满分 5 分）：
1. 长度至少 8 个字符
2. 包含大写字母
3. 包含小写字母
4. 包含数字
5. 包含特殊字符
## 示例
### 基础密码强度
```vue
@@ -125,14 +115,15 @@ function handleChangePassword() {
```vue
<script setup lang="ts">
const { t } = useI18n()
const password = ref('')
const rules = computed(() => [
{ text: '长度至少为8个字符', met: password.value.length >= 8 },
{ text: '包含大写字母', met: /[A-Z]/.test(password.value) },
{ text: '包含小写字母', met: /[a-z]/.test(password.value) },
{ text: '包含数字', met: /\d/.test(password.value) },
{ text: '包含特殊字符', met: /[^A-Z0-9]/i.test(password.value) },
{ text: t('hasLength'), met: password.value.length >= 8 },
{ text: t('hasUppercase'), met: /[A-Z]/.test(password.value) },
{ text: t('hasLowercase'), met: /[a-z]/.test(password.value) },
{ text: t('hasNumber'), met: /\d/.test(password.value) },
{ text: t('hasSpecialChar'), met: /[^A-Z0-9]/i.test(password.value) },
])
</script>
@@ -196,6 +187,16 @@ const strength = computed(() => {
## 注意事项
### 强度规则
密码强度根据以下规则计算（满分 5 分）：
1. 长度至少 8 个字符
2. 包含大写字母
3. 包含小写字母
4. 包含数字
5. 包含特殊字符
1. **实时反馈**：密码强度会随输入实时更新
2. **颜色指示**：
- 红色：非常弱（0 分）
@@ -204,11 +205,3 @@ const strength = computed(() => {
- 绿色：强（5 分）
3. **提示工具**：鼠标悬停问号图标查看详细建议
4. **国际化**：组件内置多语言支持
## 典型使用场景
- 用户注册密码设置
- 修改密码页面
- 重置密码表单
- 账号安全设置
- 密码强度要求提示
packages/components/src/popover/README.md
Executable → Regular
+26 -30
View File
@@ -2,24 +2,14 @@
灵活的弹出容器组件，支持自定义内容和多种弹出位置。
## 基础用法
## 使用场景
```vue
<script setup lang="ts">
const open = ref(false)
</script>
<template>
<FaPopover v-model:open="open">
<FaButton>打开弹出框</FaButton>
<template #panel>
<div class="p-4">
<p>弹出框内容</p>
</div>
</template>
</FaPopover>
</template>
```
- 高级筛选面板
- 快速操作面板
- 信息详情卡片
- 颜色/日期选择器
- 简易表单弹窗
- 上下文信息展示
## Props
@@ -40,12 +30,27 @@ const open = ref(false)
| `default` | 触发元素 |
| `panel` | 弹出面板内容 |
## Events
无
## 示例
### 基础用法
```vue
<script setup lang="ts">
const open = ref(false)
</script>
<template>
<FaPopover v-model:open="open">
<FaButton>打开弹出框</FaButton>
<template #panel>
<div class="p-4">
<p>弹出框内容</p>
</div>
</template>
</FaPopover>
</template>
```
### 基础弹出框
```vue
@@ -208,12 +213,3 @@ const form = ref({ name: '', email: '' })
3. **自动定位**：组件会自动调整位置避免超出视口
4. **焦点管理**：打开时会自动阻止焦点自动聚焦到弹出内容
5. **点击外部**：点击弹出框外部会自动关闭
## 典型使用场景
- 高级筛选面板
- 快速操作面板
- 信息详情卡片
- 颜色/日期选择器
- 简易表单弹窗
- 上下文信息展示
packages/components/src/progress/README.md
Executable → Regular
+24 -32
View File
@@ -2,7 +2,30 @@
线性进度条组件，展示任务的完成进度。
## 基础用法
## 使用场景
- 文件上传/下载进度
- 任务处理进度
- 加载进度
- 安装/更新进度
- 表单提交进度
- 多步骤流程进度
## Props
| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `class` | `HTMLAttributes['class']` | - | 自定义 CSS 类 |
### Model
| 名称 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `modelValue` | `number` | `0` | 进度值（0-100） |
## 示例
### 基础用法
```vue
<script setup lang="ts">
@@ -14,28 +37,6 @@ const progress = ref(50)
</template>
```
## Props
| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `class` | `HTMLAttributes['class']` | - | 自定义 CSS 类 |
## Model
| 名称 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `modelValue` | `number` | `0` | 进度值（0-100） |
## Slots
无
## Events
无
## 示例
### 基础进度条
```vue
@@ -207,12 +208,3 @@ function handleUpload() {
2. **动画效果**：进度变化时有平滑的过渡动画
3. **自定义样式**：可通过 CSS 类自定义高度、颜色等
4. **双向绑定**：支持 `v-model` 双向绑定
## 典型使用场景
- 文件上传/下载进度
- 任务处理进度
- 加载进度
- 安装/更新进度
- 表单提交进度
- 多步骤流程进度
packages/components/src/scroll-area/README.md
Executable → Regular
+16 -16
View File
@@ -2,15 +2,13 @@
自定义滚动条的滚动容器，支持水平/垂直滚动、渐变遮罩和滚动事件监听。
## 基础用法
## 使用场景
```vue
<template>
<FaScrollArea class="h-64">
<div>长内容...</div>
</FaScrollArea>
</template>
```
- 长列表内容滚动
- 侧边栏滚动区域
- 聊天消息滚动
- 水平滚动的卡片列表
- 固定高度的内容容器
## Props
@@ -43,6 +41,16 @@
## 示例
### 基础用法
```vue
<template>
<FaScrollArea class="h-64">
<div>长内容...</div>
</FaScrollArea>
</template>
```
### 垂直滚动
```vue
@@ -156,11 +164,3 @@ function scrollToBottom() {
2. **水平滚动**：启用 `horizontal` 时，内容需要超出容器宽度才能触发水平滚动
3. **渐变遮罩**：`mask` 为 `true` 时会在内容顶部/底部显示渐变遮罩效果
4. **滚动条样式**：使用自定义滚动条样式，与系统默认滚动条不同
## 典型使用场景
- 长列表内容滚动
- 侧边栏滚动区域
- 聊天消息滚动
- 水平滚动的卡片列表
- 固定高度的内容容器
packages/components/src/search-bar/README.md
Executable → Regular
+25 -25
View File
@@ -2,24 +2,13 @@
可折叠的搜索区域容器组件，用于表单筛选条件区域。
## 基础用法
## 使用场景
```vue
<script setup lang="ts">
const fold = ref(true)
</script>
<template>
<FaSearchBar v-model:fold="fold">
<template #default="{ fold, toggle }">
<div class="flex gap-4">
<FaInput placeholder="关键词" />
<FaButton>搜索</FaButton>
</div>
</template>
</FaSearchBar>
</template>
```
- 列表页面筛选区
- 高级搜索表单
- 数据查询条件
- 报表筛选选区
- 可折叠的表单区域
## Props
@@ -43,6 +32,25 @@ const fold = ref(true)
## 示例
### 基础用法
```vue
<script setup lang="ts">
const fold = ref(true)
</script>
<template>
<FaSearchBar v-model:fold="fold">
<template #default="{ fold, toggle }">
<div class="flex gap-4">
<FaInput placeholder="关键词" />
<FaButton>搜索</FaButton>
</div>
</template>
</FaSearchBar>
</template>
```
### 基础搜索栏
```vue
@@ -242,11 +250,3 @@ const showAdvanced = ref(false)
2. **折叠按钮**：默认在底部显示折叠/展开按钮
3. **双向绑定**：`fold` 支持 `v-model` 双向绑定
4. **内容控制**：需要在 slot 内根据 `fold` 值控制内容的显示
## 典型使用场景
- 列表页面筛选区
- 高级搜索表单
- 数据查询条件
- 报表筛选选区
- 可折叠的表单区域
packages/components/src/select/README.md
Executable → Regular
+46 -54
View File
@@ -2,7 +2,52 @@
下拉选择器组件，支持单选、多选、分组和自定义选项。
## 基础用法
## 使用场景
- 表单下拉选择
- 筛选条件选择
- 城市/地区选择
- 分类/标签选择
- 单选/多选配置项
## Props
| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `multiple` | `boolean` | `false` | 是否多选 |
| `disabled` | `boolean` | `false` | 是否禁用 |
| `options` | `(Option \| GroupOption)[]` | **必需** | 选项数据 |
| `placeholder` | `string` | - | 占位提示文本 |
| `class` | `HTMLAttributes['class']` | - | 自定义 CSS 类 |
### Option 接口
```ts
interface Option {
label: string
value: AcceptableValue
disabled?: boolean
}
```
### GroupOption 接口（分组选项）
```ts
interface GroupOption {
label: string
options: Option[]
}
```
## Events
| 事件名 | 说明 | 回调参数 |
|--------|------|----------|
| `change` | 选项变化时触发 | `value: AcceptableValue \| undefined` |
## 示例
### 基础用法
```vue
<script setup lang="ts">
@@ -20,51 +65,6 @@ const options = [
</template>
```
## Props
| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `multiple` | `boolean` | `false` | 是否多选 |
| `disabled` | `boolean` | `false` | 是否禁用 |
| `options` | `(Option \| GroupOption)[]` | **必需** | 选项数据 |
| `placeholder` | `string` | - | 占位提示文本 |
| `class` | `HTMLAttributes['class']` | - | 自定义 CSS 类 |
## Option 接口
```ts
interface Option {
label: string
value: AcceptableValue
disabled?: boolean
}
```
## GroupOption 接口（分组选项）
```ts
interface GroupOption {
label: string
options: Option[]
}
```
## Slots
无
## Events
| 事件名 | 说明 | 回调参数 |
|--------|------|----------|
| `change` | 选项变化时触发 | `value: AcceptableValue \| undefined` |
## Exposed Methods
无
## 示例
### 基础单选
```vue
@@ -196,11 +196,3 @@ const cities = [
3. **值类型**：`value` 可以是字符串、数字等类型
4. **分组显示**：当 `options` 中包含 `options` 属性时，会自动识别为分组选项
5. **z-index**：下拉菜单的 z-index 默认为 2000，确保在其他内容上方显示
## 典型使用场景
- 表单下拉选择
- 筛选条件选择
- 城市/地区选择
- 分类/标签选择
- 单选/多选配置项
packages/components/src/slider/README.md
Executable → Regular
+39 -32
View File
@@ -2,33 +2,12 @@
滑块组件，基于 Reka UI 的 Slider 组件封装，支持单选和多选。
## 基础用法
## 使用场景
```vue
<script setup lang="ts">
const value = ref<number[]>([0])
</script>
- 滑块组件，基于 Reka UI 的 Slider 组件封装，支持单选和多选。
- 常见用法：垂直滑块、范围选择、自定义步长。
<template>
<FaSlider v-model="value" />
</template>
```
## 垂直滑块
```vue
<script setup lang="ts">
const value = ref<number[]>([0])
</script>
<template>
<FaSlider v-model="value" orientation="vertical" />
</template>
```
## API
### Props
## Props
| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
@@ -43,20 +22,44 @@ const value = ref<number[]>([0])
| thumbAlignment | 滑块对齐方式 | `'contain' \| 'cover'` | `'contain'` |
| tooltip | 是否显示提示 | `boolean` | `true` |
### Events
| 事件名 | 说明 | 回调参数 |
|--------|------|----------|
| update:modelValue | 值更新时触发 | `(value: number[])` |
### Slots
## Slots
| 名称 | 说明 |
|------|------|
| - | 无插槽 |
## Events
| 事件名 | 说明 | 回调参数 |
|--------|------|----------|
| update:modelValue | 值更新时触发 | `(value: number[])` |
## 示例
### 基础用法
```vue
<script setup lang="ts">
const value = ref<number[]>([0])
</script>
<template>
<FaSlider v-model="value" />
</template>
```
### 垂直滑块
```vue
<script setup lang="ts">
const value = ref<number[]>([0])
</script>
<template>
<FaSlider v-model="value" orientation="vertical" />
</template>
```
### 范围选择
```vue
@@ -80,3 +83,7 @@ const value = ref<number[]>([50])
<FaSlider v-model="value" :step="10" :min="0" :max="100" />
</template>
```
## 注意事项
- 无特殊限制，建议按示例中的受控方式接入，并结合业务容器尺寸验证最终展示效果。
packages/components/src/switch/README.md
Executable → Regular
+18 -26
View File
@@ -2,17 +2,13 @@
开关切换组件，支持图标和状态变化前的回调处理。
## 基础用法
## 使用场景
```vue
<script setup lang="ts">
const enabled = ref(false)
</script>
<template>
<FaSwitch v-model="enabled" />
</template>
```
- 深色模式切换
- 通知设置开关
- 功能启用/禁用
- 布尔值配置项
- 快速状态切换
## Props
@@ -23,20 +19,24 @@ const enabled = ref(false)
| `offIcon` | `string` | - | 关闭状态图标 |
| `beforeChange` | `() => boolean \| Promise<boolean>` | - | 状态变化前回调 |
## Slots
无
## Events
通过 `v-model` 双向绑定，无需单独事件
## Exposed Methods
无
## 示例
### 基础用法
```vue
<script setup lang="ts">
const enabled = ref(false)
</script>
<template>
<FaSwitch v-model="enabled" />
</template>
```
### 基础开关
```vue
@@ -157,11 +157,3 @@ const settings = reactive({
3. **异步确认**：`beforeChange` 支持返回 Promise，可用于异步确认操作
4. **取消变化**：`beforeChange` 返回 false 或 Promise resolve false 时，状态不会改变
5. **禁用状态**：禁用状态下开关无法点击，也无法切换状态
## 典型使用场景
- 深色模式切换
- 通知设置开关
- 功能启用/禁用
- 布尔值配置项
- 快速状态切换
packages/components/src/tabs/README.md
Executable → Regular
+27 -27
View File
@@ -2,26 +2,13 @@
标签页切换组件，支持图标和自定义样式。
## 基础用法
## 使用场景
```vue
<script setup lang="ts">
const activeTab = ref('1')
const list = [
{ label: '标签一', value: '1' },
{ label: '标签二', value: '2' },
{ label: '标签三', value: '3' },
]
</script>
<template>
<FaTabs v-model="activeTab" :list>
<template #1>内容一</template>
<template #2>内容二</template>
<template #3>内容三</template>
</FaTabs>
</template>
```
- 设置页面分类
- 详情信息分栏
- 数据视图切换（列表/图表）
- 表单分步
- 内容分类展示
## Props
@@ -47,6 +34,27 @@ const list = [
## 示例
### 基础用法
```vue
<script setup lang="ts">
const activeTab = ref('1')
const list = [
{ label: '标签一', value: '1' },
{ label: '标签二', value: '2' },
{ label: '标签三', value: '3' },
]
</script>
<template>
<FaTabs v-model="activeTab" :list>
<template #1>内容一</template>
<template #2>内容二</template>
<template #3>内容三</template>
</FaTabs>
</template>
```
### 基础标签页
```vue
@@ -207,11 +215,3 @@ const list = [
2. **value 唯一性**：确保每个标签的 `value` 唯一
3. **类型支持**：`value` 支持字符串和数字两种类型
4. **图标可选**：标签可以设置图标也可以不设置
## 典型使用场景
- 设置页面分类
- 详情信息分栏
- 数据视图切换（列表/图表）
- 表单分步
- 内容分类展示
packages/components/src/textarea/README.md
Executable → Regular
+18 -26
View File
@@ -2,17 +2,13 @@
多行文本输入组件，支持前后缀插槽和自定义样式。
## 基础用法
## 使用场景
```vue
<script setup lang="ts">
const value = ref('')
</script>
<template>
<FaTextarea v-model="value" placeholder="请输入内容..." />
</template>
```
- 文章/内容编辑器
- 评论输入框
- 意见反馈
- 多行表单字段
- 代码/文本展示
## Props
@@ -31,16 +27,20 @@ const value = ref('')
| `start` | 文本域前缀内容 |
| `end` | 文本域后缀内容 |
## Events
无
## Exposed Methods
无
## 示例
### 基础用法
```vue
<script setup lang="ts">
const value = ref('')
</script>
<template>
<FaTextarea v-model="value" placeholder="请输入内容..." />
</template>
```
### 基础文本域
```vue
@@ -161,11 +161,3 @@ const isOverLimit = computed(() => charCount.value > maxLength)
3. **自动调整**：可通过 CSS 实现自动高度调整
4. **对齐方式**：`align="block"` 时前后缀会上下排列
5. **滚动行为**：超出高度时自动显示滚动条
## 典型使用场景
- 文章/内容编辑器
- 评论输入框
- 意见反馈
- 多行表单字段
- 代码/文本展示
packages/components/src/toast/README.md
Executable → Regular
+30 -32
View File
@@ -2,7 +2,36 @@
全局轻提示组件，用于展示操作反馈消息。
## 基础用法
## 使用场景
- 表单提交反馈
- 操作成功/失败提示
- 删除确认反馈
- 上传/下载进度提示
- 系统通知
- 数据保存提示
## Props
无（通过 `toast` 函数调用配置）
## API
### toast 方法
| 方法 | 说明 |
|------|------|
| `toast(message)` | 普通提示 |
| `toast.success(message)` | 成功提示 |
| `toast.error(message)` | 错误提示 |
| `toast.warning(message)` | 警告提示 |
| `toast.info(message)` | 信息提示 |
| `toast.loading(message)` | 加载提示 |
| `toast.promise(promise, options)` | Promise 提示 |
## 示例
### 基础用法
```vue
<script setup lang="ts">
@@ -20,28 +49,6 @@ function showToast() {
</template>
```
## Props
无（通过 `toast` 函数调用配置）
## Slots
无
## toast 方法
| 方法 | 说明 |
|------|------|
| `toast(message)` | 普通提示 |
| `toast.success(message)` | 成功提示 |
| `toast.error(message)` | 错误提示 |
| `toast.warning(message)` | 警告提示 |
| `toast.info(message)` | 信息提示 |
| `toast.loading(message)` | 加载提示 |
| `toast.promise(promise, options)` | Promise 提示 |
## 示例
### 成功提示
```vue
@@ -242,12 +249,3 @@ import { Toaster } from 'vue-sonner'
3. **自动消失**：提示默认 3 秒后自动消失
4. **堆叠显示**：多个提示会堆叠显示
5. **可点击关闭**：每个提示都可以手动点击关闭
## 典型使用场景
- 表单提交反馈
- 操作成功/失败提示
- 删除确认反馈
- 上传/下载进度提示
- 系统通知
- 数据保存提示
packages/components/src/tooltip/README.md
Executable → Regular
+17 -21
View File
@@ -2,15 +2,14 @@
简洁的文字提示组件，鼠标悬停时显示说明文字。
## 基础用法
## 使用场景
```vue
<template>
<FaTooltip text="这是提示文字">
<FaButton>悬停显示提示</FaButton>
</FaTooltip>
</template>
```
- 按钮功能说明
- 图标含义解释
- 表单字段提示
- 帮助信息
- 快捷操作提示
- 截断文字的完整内容展示
## Props
@@ -29,12 +28,18 @@
| `default` | 触发元素（必填） |
| `content` | 自定义提示内容 |
## Events
无
## 示例
### 基础用法
```vue
<template>
<FaTooltip text="这是提示文字">
<FaButton>悬停显示提示</FaButton>
</FaTooltip>
</template>
```
### 基础提示
```vue
@@ -140,12 +145,3 @@ const showTooltip = ref(false)
2. **延迟显示**：默认 300ms 延迟，避免鼠标快速划过时误触发
3. **自动定位**：组件会自动调整位置避免超出视口
4. **内容简洁**：提示内容应简短明了，复杂内容建议使用 `FaPopover`
## 典型使用场景
- 按钮功能说明
- 图标含义解释
- 表单字段提示
- 帮助信息
- 快捷操作提示
- 截断文字的完整内容展示
packages/components/src/trend/README.md
Executable → Regular
+24 -32
View File
@@ -2,13 +2,14 @@
带箭头的趋势标识组件，用于展示数据上升/下降趋势，提供多种视觉风格。
## 基础用法
## 使用场景
```vue
<template>
<FaTrend value="12.5%" type="up" />
</template>
```
- 股票涨跌幅
- 销售数据趋势
- 网站流量变化
- 成本/费用变化
- 错误率变化
- 性能指标升降
## Props
@@ -22,25 +23,16 @@
| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | 尺寸大小 |
| `variant` | `'default' \| 'filled' \| 'soft' \| 'outline'` | `'default'` | 视觉风格 |
## Slots
无
## Events
无
## 颜色规则
- **上升（up）**：
- 默认：绿色（上涨是好事）
- `reverse` 为 `true`：红色
- **下降（down）**：
- 默认：红色（下降是坏事）
- `reverse` 为 `true`：绿色
## 示例
### 基础用法
```vue
<template>
<FaTrend value="12.5%" type="up" />
</template>
```
### 不同风格
```vue
@@ -195,6 +187,15 @@ const costData = {
## 注意事项
### 颜色规则
- **上升（up）**：
- 默认：绿色（上涨是好事）
- `reverse` 为 `true`：红色
- **下降（down）**：
- 默认：红色（下降是坏事）
- `reverse` 为 `true`：绿色
1. **颜色含义**：
- 默认：绿色=上升，红色=下降
- `reverse` 模式：绿色=下降，红色=上升
@@ -202,12 +203,3 @@ const costData = {
- 销售、访问量等增长指标：使用默认模式
- 成本、错误率等下降指标：使用 `reverse` 模式
3. **箭头方向**：自动根据 `type` 显示向上/向下箭头
## 典型使用场景
- 股票涨跌幅
- 销售数据趋势
- 网站流量变化
- 成本/费用变化
- 错误率变化
- 性能指标升降
skills/fa-framework-settings/SKILL.md
+1 -1
View File
@@ -40,4 +40,4 @@ description: 管理和配置 Fantastic-admin 框架设置。当用户提到以
- **顶栏设置**: [references/topbar-settings.md](references/topbar-settings.md) - 标签栏、工具栏、显示模式等
- **标签栏设置**: [references/tabbar-settings.md](references/tabbar-settings.md) - 风格、图标、双击动作、记忆功能等
- **工具栏设置**: [references/toolbar-settings.md](references/toolbar-settings.md) - 收藏夹、面包屑、搜索、通知、国际化等
- **页面设置**: [references/page-settings.md](references/page-settings.md) - 快捷键、iframe 保活、切换动画、进度条等
- **页面设置**: [references/page-settings.md](references/page-settings.md) - 快捷键、切换动画、进度条等
skills/fa-framework-settings/references/app-settings.md
-91
View File
@@ -4,10 +4,8 @@
- [认证配置 (auth)](#认证配置-auth)
- [路由配置](#路由配置)
- [功能开关](#功能开关)
- [布局配置 (layout)](#布局配置-layout)
- [主页配置 (home)](#主页配置-home)
- [版权配置 (copyright)](#版权配置-copyright)
- [偏好设置 (preferences)](#偏好设置-preferences)
## 认证配置 (auth)
@@ -16,25 +14,11 @@
- **默认值**: `false`
- **说明**: 是否开启权限功能,控制是否启用权限验证功能
### expiredMode
- **类型**: `'redirect' | 'popup'`
- **默认值**: `'redirect'`
- **说明**: 登录过期模式
- `'redirect'` - 跳转到登录页
- `'popup'` - 弹出登录窗口
### multipleAccounts
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 多账号管理,可同时登录多个账号,方便快速切换
**示例:**
```typescript
app: {
auth: {
permission: true,
expiredMode: 'redirect',
multipleAccounts: true,
}
}
```
@@ -62,31 +46,6 @@ app: {
- **默认值**: `false`
- **说明**: 控制是否启用动态页面标题功能
### watermark
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 控制是否在页面上显示水印
### feedback
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 控制是否启用用户反馈功能
### lockScreen
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 控制是否启用锁屏功能
### errorLog
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 是否在非开发环境开启错误日志功能,具体业务代码在 `/src/utils/errorLog.ts`
### checkUpdates
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 控制是否启用应用更新检查功能
### rip
- **类型**: `boolean`
- **默认值**: `false`
@@ -97,36 +56,6 @@ app: {
- **默认值**: `true`
- **说明**: 移动端访问,关闭后网站将禁用移动端访问
## 布局配置 (layout)
### center
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 是否开启居中布局
### centerScope
- **类型**: `'inner' | 'outer'`
- **默认值**: `'inner'`
- **说明**: 居中布局作用范围
- `'inner'` - 内层
- `'outer'` - 外层
### centerWidth
- **类型**: `number`
- **默认值**: `1400`
- **说明**: 居中布局宽度(像素)
**示例:**
```typescript
app: {
layout: {
center: true,
centerScope: 'outer',
centerWidth: 1400,
}
}
```
## 主页配置 (home)
### enable
@@ -188,23 +117,3 @@ app: {
}
}
```
## 偏好设置 (preferences)
控制用户偏好设置,可以控制各个功能模块的启用状态。
**类型**: `{ [key]: boolean | PreferencesBoolean }`
**示例:**
```typescript
app: {
preferences: {
theme: true, // 允许用户自定义主题设置
menu: true, // 允许用户自定义菜单设置
topbar: true, // 允许用户自定义顶栏设置
tabbar: true, // 允许用户自定义标签栏设置
toolbar: true, // 允许用户自定义工具栏设置
page: true, // 允许用户自定义页面设置
}
}
```
skills/fa-framework-settings/references/menu-settings.md
+1 -46
View File
@@ -2,40 +2,18 @@
## 目录
- [导航菜单模式 (mode)](#导航菜单模式-mode)
- [导航菜单风格 (style)](#导航菜单风格-style)
- [暗色模式 (dark)](#暗色模式-dark)
- [主导航点击模式 (mainMenuClickMode)](#主导航点击模式-mainmenuclickmode)
- [次导航展开行为](#次导航展开行为)
- [快捷键 (hotkeys)](#快捷键-hotkeys)
## 导航菜单模式 (mode)
- **类型**: `'side' | 'head' | 'single' | 'only-side' | 'only-head' | 'side-panel' | 'head-panel'`
- **类型**: `'side' | 'head' | 'single'`
- **默认值**: `'side'`
- **说明**: 设置导航菜单的显示模式
- `'side'` - 侧边栏模式(有主导航菜单)
- `'head'` - 顶部模式
- `'single'` - 侧边栏模式(无主导航菜单)
- `'only-side'` - 侧边栏精简模式
- `'only-head'` - 顶部精简模式
- `'side-panel'` - 侧边栏面板模式
- `'head-panel'` - 顶部面板模式
## 导航菜单风格 (style)
- **类型**: `'' | 'arrow' | 'line' | 'dot'`
- **默认值**: `''`
- **说明**: 设置导航菜单的视觉风格
- `''` - 默认风格
- `'arrow'` - 箭头风格
- `'line'` - 线条风格
- `'dot'` - 圆点风格
## 暗色模式 (dark)
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 仅在亮色模式下生效,控制导航菜单是否使用暗色主题
## 主导航菜单点击模式 (mainMenuClickMode)
@@ -60,12 +38,6 @@
- **默认值**: `false`
- **说明**: 次导航菜单是否收起
### subMenuAutoCollapse
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 次导航菜单是否自动收起
### subMenuCollapseButton
- **类型**: `boolean`
@@ -83,12 +55,9 @@
```typescript
menu: {
mode: 'side',
style: 'dot',
dark: false,
mainMenuClickMode: 'switch',
subMenuUniqueExpand: true,
subMenuCollapse: false,
subMenuAutoCollapse: false,
subMenuCollapseButton: true,
hotkeys: true,
}
@@ -103,20 +72,6 @@ menu: {
}
```
**侧边栏精简模式:**
```typescript
menu: {
mode: 'only-side',
}
```
**启用暗色导航菜单(仅亮色模式下):**
```typescript
menu: {
dark: true,
}
```
**智能主导航菜单点击:**
```typescript
menu: {
skills/fa-framework-settings/references/page-settings.md
+8 -23
View File
@@ -1,22 +1,9 @@
# 页面设置 (page)
## 目录
- [快捷键 (hotkeys)](#快捷键-hotkeys)
- [iframe 页面最大保活数量 (iframeKeepAliveMax)](#iframe-页面最大保活数量-iframekeepalivemax)
- [页面切换动画 (transitionMode)](#页面切换动画-transitionmode)
- [载入进度条 (progress)](#载入进度条-progress)
## 快捷键 (hotkeys)
- **类型**: `boolean`
- **默认值**: `true`
- **说明**: 控制是否启用页面相关的快捷键功能
## iframe 页面最大保活数量 (iframeKeepAliveMax)
- **类型**: `number`
- **默认值**: `3`
- **说明**: 设置 iframe 页面的最大保活数量
- [快捷键 (hotkeys)](#快捷键-hotkeys)
## 页面切换动画 (transitionMode)
@@ -36,14 +23,19 @@
- **默认值**: `true`
- **说明**: 控制是否显示页面载入进度条
## 快捷键 (hotkeys)
- **类型**: `boolean`
- **默认值**: `true`
- **说明**: 控制是否启用页面相关的快捷键功能
## 完整示例
```typescript
page: {
hotkeys: true,
iframeKeepAliveMax: 3,
transitionMode: 'fade',
progress: true,
hotkeys: true,
}
```
@@ -56,13 +48,6 @@ page: {
}
```
**增加 iframe 保活数量:**
```typescript
page: {
iframeKeepAliveMax: 9,
}
```
**禁用进度条:**
```typescript
page: {
skills/fa-framework-settings/references/tabbar-settings.md
-72
View File
@@ -1,56 +1,16 @@
# 标签栏设置 (tabbar)
## 目录
- [标签栏风格 (style)](#标签栏风格-style)
- [最小最大宽度 (minMaxWidth)](#最小最大宽度-minmaxwidth)
- [显示图标 (icon)](#显示图标-icon)
- [双击执行动作 (dblclickAction)](#双击执行动作-dblclickaction)
- [记忆功能 (memory)](#记忆功能-memory)
- [快捷键 (hotkeys)](#快捷键-hotkeys)
## 标签栏风格 (style)
- **类型**: `'' | 'fashion' | 'card' | 'square'`
- **默认值**: `''`
- **说明**: 设置标签栏的视觉风格
- `''` - 默认风格
- `'fashion'` - 时尚风格
- `'card'` - 卡片风格
- `'square'` - 方块风格
## 最小最大宽度 (minMaxWidth)
- **类型**: `readonly [number | 'unset', number | 'unset']`
- **默认值**: `[150, 150]`
- **说明**: 设置标签的最小和最大宽度,当设置为 `'unset'` 时为自适应
- `[150, 150]` - 固定宽度 150px
- `[150, 'unset']` - 最小宽度 150px
- `['unset', 150]` - 最大宽度 150px
- `['unset', 'unset']` - 跟随文字长度自适应
## 显示图标 (icon)
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 控制标签是否显示图标
## 双击执行动作 (dblclickAction)
- **类型**: `'reload' | 'close' | 'pin' | 'maximize' | 'window'`
- **默认值**: `'close'`
- **说明**: 设置双击标签时执行的动作
- `'reload'` - 刷新
- `'close'` - 关闭
- `'pin'` - 固定/取消固定
- `'maximize'` - 最大化
- `'window'` - 新窗口打开
## 记忆功能 (memory)
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 控制是否记住用户的标签操作状态
## 快捷键 (hotkeys)
- **类型**: `boolean`
@@ -61,48 +21,16 @@
```typescript
tabbar: {
style: 'fashion',
minMaxWidth: [150, 150],
icon: true,
dblclickAction: 'close',
memory: true,
hotkeys: true,
}
```
## 常见配置
**时尚风格标签栏:**
```typescript
tabbar: {
style: 'fashion',
}
```
**显示图标:**
```typescript
tabbar: {
icon: true,
}
```
**自适应宽度:**
```typescript
tabbar: {
minMaxWidth: ['unset', 'unset'],
}
```
**双击刷新:**
```typescript
tabbar: {
dblclickAction: 'reload',
}
```
**启用记忆功能:**
```typescript
tabbar: {
memory: true,
}
```
skills/fa-framework-settings/references/theme-settings.md
-31
View File
@@ -1,31 +1,10 @@
# 主题设置 (theme)
## 目录
- [主题同步 (sync)](#主题同步-sync)
- [亮色主题 (light)](#亮色主题-light)
- [暗色主题 (dark)](#暗色主题-dark)
- [颜色方案 (colorScheme)](#颜色方案-colorscheme)
- [圆角系数 (radius)](#圆角系数-radius)
- [色弱模式 (colorAmblyopia)](#色弱模式-coloramblyopia)
## 主题同步 (sync)
- **类型**: `boolean`
- **默认值**: `true`
- **说明**: 当开启时,切换颜色方案将共用一套主题
## 亮色主题 (light)
- **类型**: `keyof typeof themes`
- **默认值**: `'default'`
- **说明**: 指定亮色模式下的主题
## 暗色主题 (dark)
- **类型**: `keyof typeof themes`
- **默认值**: `'default'`
- **说明**: 指定暗色模式下的主题
## 颜色方案 (colorScheme)
- **类型**: `'light' | 'dark' | ''`
@@ -54,7 +33,6 @@
```typescript
theme: {
sync: true,
light: 'default',
dark: 'default',
colorScheme: 'light',
@@ -79,15 +57,6 @@ theme: {
}
```
**使用不同的亮色和暗色主题:**
```typescript
theme: {
sync: false,
light: 'default',
dark: 'custom-dark',
}
```
**调整圆角:**
```typescript
theme: {
skills/fa-framework-settings/references/topbar-settings.md
-17
View File
@@ -4,7 +4,6 @@
- [标签栏 (tabbar)](#标签栏-tabbar)
- [工具栏 (toolbar)](#工具栏-toolbar)
- [顶栏模式 (mode)](#顶栏模式-mode)
- [切换显示位置 (switchTabbarAndToolbar)](#切换显示位置-switchtabbarandtoolbar)
## 标签栏 (tabbar)
@@ -27,14 +26,6 @@
- `'fixed'` - 固定,不跟随页面滚动,始终固定在顶部
- `'sticky'` - 粘性,页面往下滚动时隐藏,往上滚动时显示
## 切换显示位置 (switchTabbarAndToolbar)
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 控制标签栏和工具栏的显示顺序
- `false` - 标签栏在工具栏上面
- `true` - 工具栏在标签栏上面
## 完整示例
```typescript
@@ -42,7 +33,6 @@ topbar: {
tabbar: true,
toolbar: true,
mode: 'fixed',
switchTabbarAndToolbar: false,
}
```
@@ -69,10 +59,3 @@ topbar: {
mode: 'sticky',
}
```
**工具栏在标签栏上面:**
```typescript
topbar: {
switchTabbarAndToolbar: true,
}
```
skills/fa-page-optimizer/references/components-catalog.md
-7
View File
@@ -12,9 +12,6 @@
**变体**: default, destructive, outline, secondary, ghost, link
**特性**: loading 状态、disabled 状态
### FaBadge
**用途**: 徽章标签，用于状态标识和分类
### FaIcon
**用途**: 图标组件，基于 [iconify](https://icon-sets.iconify.design/)
**示例**: <FaIcon name="i-mdi:home" />
@@ -34,9 +31,6 @@
### FaDivider
**用途**: 分割线组件
### FaLayoutContainer
**用途**: 布局容器组件
### FaPageHeader
**用途**: 页面头部组件
@@ -275,7 +269,6 @@
| `<div class="card">` | `FaCard` | 标准化的卡片布局 |
| `<hr>` | `FaDivider` | 统一的分割线样式 |
| `<img>` (头像) | `FaAvatar` | 头像专用组件 |
| `<span class="badge">` | `FaBadge` | 统一的徽章样式 |
### 替换常见功能实现
skills/fa-route-generator/SKILL.md
+1 -11
View File
@@ -76,11 +76,6 @@ export default routes
定位路由文件（在 `apps/<app>/src/router/modules/` 下搜索），读取后按需修改 meta 属性。常见修改：
**标签页合并**（新增页/编辑页合并到同一标签，避免开多个标签）：
```typescript
meta: { activeMenu: '/user', tabMerge: 'activeMenu' }
```
**权限控制**：
```typescript
meta: { auth: 'user:view' } // 或数组 ['user:view', 'user:edit']
@@ -94,11 +89,6 @@ meta: { keepAlive: ['productDetail'] }
meta: { menu: false, activeMenu: '/product', noKeepAlive: 'productList' }
```
**徽章**：
```typescript
meta: { badge: 'NEW' } // 文字；或 [true, 'destructive'] 红点
```
**隐藏菜单项**：
```typescript
meta: { menu: false, activeMenu: '/parent/path' }
@@ -115,4 +105,4 @@ meta: { menu: false, activeMenu: '/parent/path' }
详细属性说明见 [references/route-meta.md](references/route-meta.md)，更多示例见 [references/examples.md](references/examples.md)。
常用属性：`title`（必需）、`icon`、`menu`、`auth`、`keepAlive`、`badge`、`activeMenu`、`tabMerge`、`breadcrumb`
常用属性：`title`（必需）、`icon`、`menu`、`auth`、`keepAlive`、`activeMenu`、`breadcrumb`
skills/fa-route-generator/references/examples.md
+2 -76
View File
@@ -221,11 +221,6 @@ const routes: RouteRecordRaw = {
meta: {
title: '用户列表',
auth: ['admin:view', 'admin:edit'], // 需要其中一个权限
auths: [
{ name: '查看用户', value: 'admin:view' },
{ name: '编辑用户', value: 'admin:edit' },
{ name: '删除用户', value: 'admin:delete' },
],
},
},
],
@@ -253,50 +248,6 @@ const routes: RouteRecordRaw = {
link: 'https://github.com',
},
},
{
path: 'docs',
name: 'externalDocs',
component: () => import('@/views/external/iframe.vue'),
meta: {
title: '文档',
iframe: 'https://fantastic-admin.hurui.me',
},
},
],
}
```
### 带徽章的路由
```typescript
const routes: RouteRecordRaw = {
path: '/features',
component: Layout,
name: 'features',
meta: {
title: '功能特性',
icon: 'i-ep:star',
badge: 'NEW', // 显示 NEW 徽章
},
children: [
{
path: 'pro',
name: 'featuresPro',
component: () => import('@/views/features/pro.vue'),
meta: {
title: '专业版功能',
badge: ['PRO', 'destructive'], // 显示红色 PRO 徽章
},
},
{
path: 'beta',
name: 'featuresBeta',
component: () => import('@/views/features/beta.vue'),
meta: {
title: 'Beta 功能',
badge: () => 'BETA', // 动态徽章
},
},
],
}
```
@@ -318,8 +269,8 @@ const routes: RouteRecordRaw = {
path: 'always',
name: 'menuAlways',
meta: {
title: '始终展开',
expand: [true, true], // 默认展开且不允许收起
title: '默认展开',
expand: true,
},
children: [
{
@@ -336,31 +287,6 @@ const routes: RouteRecordRaw = {
}
```
### 带查询参数的路由
```typescript
const routes: RouteRecordRaw = {
path: '/report',
component: Layout,
name: 'report',
meta: {
title: '报表',
icon: 'i-ep:data-analysis',
},
children: [
{
path: 'sales',
name: 'reportSales',
component: () => import('@/views/report/sales.vue'),
meta: {
title: '销售报表',
query: { type: 'monthly' }, // 点击导航时携带参数
},
},
],
}
```
## 路由配置调整
### 权限配置调整
skills/fa-route-generator/references/route-meta.md
+4 -139
View File
@@ -13,19 +13,6 @@
## 权限相关
### auths
- **类型**: `Array<{ name: string, value: string }>`
- **默认值**: `undefined`
- **说明**: 权限池,对路由本身无实际作用,通常用于角色管理模块,展示路由可配置权限
- **示例**:
```typescript
auths: [
{ name: '新闻管理(浏览)', value: 'news:view' },
{ name: '新闻管理(编辑)', value: 'news:edit' }
]
```
### auth
- **类型**: `string | string[]`
@@ -37,17 +24,6 @@
auth: ['news:view', 'news:edit'] // 需要具备其中一个权限
```
### localeAuth
- **类型**: `string | string[]`
- **默认值**: `undefined`
- **说明**: 区域语言权限,配置为数组时,只需满足一个即可进入
- **示例**:
```typescript
localeAuth: 'zh-cn' // 当前区域语言为 zh-cn 允许访问
localeAuth: ['zh-cn', 'zh-tw'] // 当前区域语言为 zh-cn 或 zh-tw 允许访问
```
## 导航显示
### title
@@ -63,13 +39,12 @@
### icon
- **类型**: `string | [string, string]`
- **类型**: `string`
- **默认值**: `undefined`
- **说明**: 图标,如果配置为数组,则第一个为默认图标,第二个为激活图标
- **说明**: 图标
- **示例**:
```typescript
icon: 'i-ep:lock' // 默认显示 i-ep:lock 图标
icon: ['i-ep:lock', 'i-ep:unlock'] // 默认显示 i-ep:lock,激活时显示 i-ep:unlock
```
### menu
@@ -90,65 +65,20 @@
### expand
- **类型**: `boolean | [boolean, boolean]`
- **类型**: `boolean`
- **默认值**: `undefined`
- **说明**: 是否默认展开,如果配置为数组,则第一个为默认展开状态,第二个是否始终展开
- **说明**: 是否默认展开
- **示例**:
```typescript
expand: true // 默认展开
expand: [true, true] // 默认展开,且不允许收起
```
### badge
- **类型**: `boolean | string | number | (() => boolean | string | number) | [value, color]`
- **默认值**: `undefined`
- **说明**: 徽章,如果配置为数组,则第一个为徽章内容,第二个为徽章颜色
- **示例**:
```typescript
badge: 'PRO' // 显示徽章,内容为 PRO
badge: true // 显示徽章,内容为圆点
badge: [true, 'destructive'] // 显示徽章,内容为圆点,颜色为 destructive
badge: () => '动态徽章'
```
### sort
- **类型**: `number`
- **默认值**: `0`
- **说明**: 导航排序,数字越大越靠前
### singleMenu
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 是否为单个一级导航,该配置用于简化只想展示一级,没有二级导航的路由配置
### breadcrumb
- **类型**: `boolean`
- **默认值**: `true`
- **说明**: 是否在面包屑中显示
## 标签页
### tabPermanent
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 是否常驻标签页,请勿在带有参数的路由上设置该特性
### tabMerge
- **类型**: `'routeName' | 'activeMenu'`
- **默认值**: `undefined`
- **说明**: 标签页合并,根据规则合并标签页
- **示例**:
```typescript
tabMerge: 'routeName' // 根据路由名称合并
tabMerge: 'activeMenu' // 根据 activeMenu 属性合并
```
## 页面行为
### keepAlive
@@ -174,35 +104,6 @@
noKeepAlive: ['news', 'user'] // 访问路由name为news或user的页面时不保活
```
### maximize
- **类型**: `boolean | [boolean, boolean]`
- **默认值**: `undefined`
- **说明**: 最大化,如果配置为数组,则第一个为是否开启最大化,第二个为是否允许手动退出最大化
- **示例**:
```typescript
maximize: true // 开启最大化
maximize: [true, false] // 开启最大化,允许手动退出最大化
maximize: [true, true] // 开启最大化,不允许手动退出最大化
```
### newWindow
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 是否在新窗口打开
### iframe
- **类型**: `string | boolean`
- **默认值**: `undefined`
- **说明**: 是否在iframe中打开
- **示例**:
```typescript
iframe: 'https://fantastic-admin.hurui.me' // 在iframe中打开 Fantastic-admin 官网
iframe: true // 获取路由query中的iframe属性,并在iframe中打开
```
### link
- **类型**: `string`
@@ -212,39 +113,3 @@
```typescript
link: 'https://fantastic-admin.hurui.me' // 在浏览器新窗口打开 Fantastic-admin 官网
```
### query
- **类型**: `Record<string, any>`
- **默认值**: `undefined`
- **说明**: 路由 query 参数,点击导航时进行路由跳转时,携带的参数
- **示例**:
```typescript
query: { id: 1, name: 'test' } // 点击导航时,携带 id 参数为 1,name 参数为 test
```
## 布局
### layout
- **类型**: `object`
- **默认值**: `undefined`
- **说明**: 布局配置
- **属性**:
- `center`: `boolean` - 是否居中,如果不设置,则使用全局配置
- `centerScope`: `'inner' | 'outer'` - 作用范围,如果不设置,则使用全局配置
- `centerWidth`: `number` - 宽度,如果不设置,则使用全局配置
- **示例**:
```typescript
layout: {
center: true,
centerScope: 'inner',
centerWidth: 1200
}
```
### copyright
- **类型**: `boolean`
- **默认值**: `undefined`
- **说明**: 是否显示版权,如果不设置,则使用全局配置
skills/fa-store-generator/references/store-patterns.md
-3
View File
@@ -167,9 +167,6 @@ export const useDictionaryStore = defineStore('dictionary', () => {
| `useAppSettingsStore` | `modules/app/settings.ts` | 主题、语言、布局配置 |
| `useAppMenuStore` | `modules/app/menu.ts` | 菜单生成与导航状态 |
| `useAppTabbarStore` | `modules/app/tabbar.ts` | 标签栏管理 |
| `useAppNotificationStore` | `modules/app/notification.ts` | 通知系统 |
| `useDictionaryStore` | `modules/dictionary.ts` | 字典数据缓存 |
| `useMenuBadgeStore` | `modules/menuBadge.ts` | 菜单徽章状态 |
---
skills/fa-theme-customizer/SKILL.md
+85 -97
View File
@@ -5,11 +5,11 @@ description: 为 Fantastic-admin 框架创建和定制主题配色方案，始
# 主题定制器
为 Fantastic-admin 框架生成符合规范的主题配色。框架的 `theme.sync` 默认为 `true`，切换颜色方案时明暗共用同一套主题名称，因此**始终同时输出明色和暗色两套**，缺少任何一套都会导致对应模式下显示异常。
为 Fantastic-admin 框架生成符合规范的主题配色。
## 主题文件位置
- 主题定义：`packages/themes/index.ts`（在此添加新主题，跨所有应用共享）
- 主题定义：`packages/themes/index.ts`（在此替换新主题，跨所有应用共享）
- 类型推断：自动从 `packages/themes/index.ts` 的 key 推断，无需手动更新类型
## 工作流程
@@ -31,104 +31,92 @@ description: 为 Fantastic-admin 框架创建和定制主题配色方案，始
### 第三步：输出主题代码
在 `packages/themes/index.ts` 中添加新主题，格式严格遵循现有主题结构：
在 `packages/themes/index.ts` 中替换新主题，格式严格遵循现有主题结构：
```typescript
themeName: {
light: {
// shadcn 标准 token（必填）
'--background': 'L C H',
'--foreground': 'L C H',
'--card': 'L C H',
'--card-foreground': 'L C H',
'--popover': 'L C H',
'--popover-foreground': 'L C H',
'--primary': 'L C H',
'--primary-foreground': 'L C H',
'--secondary': 'L C H',
'--secondary-foreground': 'L C H',
'--muted': 'L C H',
'--muted-foreground': 'L C H',
'--accent': 'L C H',
'--accent-foreground': 'L C H',
'--destructive': '0.577 0.245 27.325', // 通常保持不变
'--border': 'L C H',
'--input': 'L C H',
'--ring': 'L C H', // 通常与 primary 相同
// 框架专属 token（必填）
'--g-main-area-bg': 'oklch(L C H)', // 明色略深于背景，形成层次感
'--g-header-bg': 'oklch(var(--background))',
'--g-header-color': 'oklch(var(--foreground))',
'--g-header-menu-color': 'oklch(var(--accent-foreground))',
'--g-header-menu-hover-bg': 'oklch(var(--accent))',
'--g-header-menu-hover-color': 'oklch(var(--accent-foreground))',
'--g-header-menu-active-bg': 'oklch(var(--primary))',
'--g-header-menu-active-color': 'oklch(var(--primary-foreground))',
'--g-main-sidebar-bg': 'oklch(var(--background))',
'--g-main-sidebar-menu-color': 'oklch(var(--accent-foreground))',
'--g-main-sidebar-menu-hover-bg': 'oklch(var(--accent))',
'--g-main-sidebar-menu-hover-color': 'oklch(var(--accent-foreground))',
'--g-main-sidebar-menu-active-bg': 'oklch(var(--primary))',
'--g-main-sidebar-menu-active-color': 'oklch(var(--primary-foreground))',
'--g-sub-sidebar-bg': 'oklch(var(--background))',
'--g-sub-sidebar-menu-color': 'oklch(var(--accent-foreground))',
'--g-sub-sidebar-menu-hover-bg': 'oklch(var(--accent))',
'--g-sub-sidebar-menu-hover-color': 'oklch(var(--accent-foreground))',
'--g-sub-sidebar-menu-active-bg': 'oklch(var(--primary))',
'--g-sub-sidebar-menu-active-color': 'oklch(var(--primary-foreground))',
'--g-tabbar-bg': 'oklch(var(--background))',
'--g-tabbar-tab-color': 'oklch(var(--accent-foreground) / 50%)',
'--g-tabbar-tab-hover-bg': 'oklch(var(--accent) / 50%)',
'--g-tabbar-tab-hover-color': 'oklch(var(--accent-foreground) / 50%)',
'--g-tabbar-tab-active-bg': 'oklch(var(--accent))',
'--g-tabbar-tab-active-color': 'oklch(var(--foreground))',
'--g-toolbar-bg': 'oklch(var(--background))',
},
dark: {
// shadcn 标准 token（同明色结构，但色值更深）
'--background': 'L C H',
// ... 其余 shadcn token
// 框架专属 token（暗色与明色有 5 处关键差异，见 references/theme-structure.md）
'--g-main-area-bg': 'oklch(var(--background))', // 暗色与背景相同，避免过多层次
'--g-header-bg': 'oklch(var(--background))',
'--g-header-color': 'oklch(var(--foreground))',
'--g-header-menu-color': 'oklch(var(--muted-foreground))', // 差异：用 muted-foreground
'--g-header-menu-hover-bg': 'oklch(var(--muted))', // 差异：用 muted
'--g-header-menu-hover-color': 'oklch(var(--muted-foreground))',
'--g-header-menu-active-bg': 'oklch(var(--accent))', // 差异：用 accent 而非 primary
'--g-header-menu-active-color': 'oklch(var(--accent-foreground))',
'--g-main-sidebar-bg': 'oklch(var(--background))',
'--g-main-sidebar-menu-color': 'oklch(var(--muted-foreground))',
'--g-main-sidebar-menu-hover-bg': 'oklch(var(--muted))',
'--g-main-sidebar-menu-hover-color': 'oklch(var(--muted-foreground))',
'--g-main-sidebar-menu-active-bg': 'oklch(var(--accent))',
'--g-main-sidebar-menu-active-color': 'oklch(var(--accent-foreground))',
'--g-sub-sidebar-bg': 'oklch(var(--background))',
'--g-sub-sidebar-menu-color': 'oklch(var(--muted-foreground))',
'--g-sub-sidebar-menu-hover-bg': 'oklch(var(--muted))',
'--g-sub-sidebar-menu-hover-color': 'oklch(var(--muted-foreground))',
'--g-sub-sidebar-menu-active-bg': 'oklch(var(--accent))',
'--g-sub-sidebar-menu-active-color': 'oklch(var(--accent-foreground))',
'--g-tabbar-bg': 'oklch(var(--background))',
'--g-tabbar-tab-color': 'oklch(var(--accent-foreground) / 50%)',
'--g-tabbar-tab-hover-bg': 'oklch(var(--accent) / 50%)',
'--g-tabbar-tab-hover-color': 'oklch(var(--accent-foreground) / 50%)',
'--g-tabbar-tab-active-bg': 'oklch(var(--accent))',
'--g-tabbar-tab-active-color': 'oklch(var(--foreground))',
'--g-toolbar-bg': 'oklch(var(--background))',
},
},
```
export const lightTheme = {
// shadcn 标准 token（必填）
'--background': 'L C H',
'--foreground': 'L C H',
'--card': 'L C H',
'--card-foreground': 'L C H',
'--popover': 'L C H',
'--popover-foreground': 'L C H',
'--primary': 'L C H',
'--primary-foreground': 'L C H',
'--secondary': 'L C H',
'--secondary-foreground': 'L C H',
'--muted': 'L C H',
'--muted-foreground': 'L C H',
'--accent': 'L C H',
'--accent-foreground': 'L C H',
'--destructive': '0.577 0.245 27.325', // 通常保持不变
'--border': 'L C H',
'--input': 'L C H',
'--ring': 'L C H', // 通常与 primary 相同
// 框架专属 token（必填）
'--g-main-area-bg': 'oklch(L C H)', // 明色略深于背景，形成层次感
'--g-header-bg': 'oklch(var(--background))',
'--g-header-color': 'oklch(var(--foreground))',
'--g-header-menu-color': 'oklch(var(--accent-foreground))',
'--g-header-menu-hover-bg': 'oklch(var(--accent))',
'--g-header-menu-hover-color': 'oklch(var(--accent-foreground))',
'--g-header-menu-active-bg': 'oklch(var(--primary))',
'--g-header-menu-active-color': 'oklch(var(--primary-foreground))',
'--g-main-sidebar-bg': 'oklch(var(--background))',
'--g-main-sidebar-menu-color': 'oklch(var(--accent-foreground))',
'--g-main-sidebar-menu-hover-bg': 'oklch(var(--accent))',
'--g-main-sidebar-menu-hover-color': 'oklch(var(--accent-foreground))',
'--g-main-sidebar-menu-active-bg': 'oklch(var(--primary))',
'--g-main-sidebar-menu-active-color': 'oklch(var(--primary-foreground))',
'--g-sub-sidebar-bg': 'oklch(var(--background))',
'--g-sub-sidebar-menu-color': 'oklch(var(--accent-foreground))',
'--g-sub-sidebar-menu-hover-bg': 'oklch(var(--accent))',
'--g-sub-sidebar-menu-hover-color': 'oklch(var(--accent-foreground))',
'--g-sub-sidebar-menu-active-bg': 'oklch(var(--primary))',
'--g-sub-sidebar-menu-active-color': 'oklch(var(--primary-foreground))',
'--g-tabbar-bg': 'oklch(var(--background))',
'--g-tabbar-tab-color': 'oklch(var(--accent-foreground) / 50%)',
'--g-tabbar-tab-hover-bg': 'oklch(var(--accent) / 50%)',
'--g-tabbar-tab-hover-color': 'oklch(var(--accent-foreground) / 50%)',
'--g-tabbar-tab-active-bg': 'oklch(var(--accent))',
'--g-tabbar-tab-active-color': 'oklch(var(--foreground))',
'--g-toolbar-bg': 'oklch(var(--background))',
} as const
### 第四步：在应用设置中启用
主题添加到 `packages/themes/index.ts` 后，还需要在对应应用的设置中启用。先执行 `ls apps/` 确认有哪些应用，询问用户要在哪个应用中启用，然后修改 `apps/<app>/src/settings.ts`：
```typescript
theme: {
light: 'themeName',
dark: 'themeName',
}
export const darkTheme = {
// shadcn 标准 token（同明色结构，但色值更深）
'--background': 'L C H',
// ... 其余 shadcn token
// 框架专属 token（暗色与明色有 5 处关键差异，见 references/theme-structure.md）
'--g-main-area-bg': 'oklch(var(--background))', // 暗色与背景相同，避免过多层次
'--g-header-bg': 'oklch(var(--background))',
'--g-header-color': 'oklch(var(--foreground))',
'--g-header-menu-color': 'oklch(var(--muted-foreground))', // 差异：用 muted-foreground
'--g-header-menu-hover-bg': 'oklch(var(--muted))', // 差异：用 muted
'--g-header-menu-hover-color': 'oklch(var(--muted-foreground))',
'--g-header-menu-active-bg': 'oklch(var(--accent))', // 差异：用 accent 而非 primary
'--g-header-menu-active-color': 'oklch(var(--accent-foreground))',
'--g-main-sidebar-bg': 'oklch(var(--background))',
'--g-main-sidebar-menu-color': 'oklch(var(--muted-foreground))',
'--g-main-sidebar-menu-hover-bg': 'oklch(var(--muted))',
'--g-main-sidebar-menu-hover-color': 'oklch(var(--muted-foreground))',
'--g-main-sidebar-menu-active-bg': 'oklch(var(--accent))',
'--g-main-sidebar-menu-active-color': 'oklch(var(--accent-foreground))',
'--g-sub-sidebar-bg': 'oklch(var(--background))',
'--g-sub-sidebar-menu-color': 'oklch(var(--muted-foreground))',
'--g-sub-sidebar-menu-hover-bg': 'oklch(var(--muted))',
'--g-sub-sidebar-menu-hover-color': 'oklch(var(--muted-foreground))',
'--g-sub-sidebar-menu-active-bg': 'oklch(var(--accent))',
'--g-sub-sidebar-menu-active-color': 'oklch(var(--accent-foreground))',
'--g-tabbar-bg': 'oklch(var(--background))',
'--g-tabbar-tab-color': 'oklch(var(--accent-foreground) / 50%)',
'--g-tabbar-tab-hover-bg': 'oklch(var(--accent) / 50%)',
'--g-tabbar-tab-hover-color': 'oklch(var(--accent-foreground) / 50%)',
'--g-tabbar-tab-active-bg': 'oklch(var(--accent))',
'--g-tabbar-tab-active-color': 'oklch(var(--foreground))',
'--g-toolbar-bg': 'oklch(var(--background))',
} as const
```
## 参考资源