diff --git a/.agents/skills/fa-framework-settings/SKILL.md b/.agents/skills/fa-framework-settings/SKILL.md index 4a1f1dd7..7b251881 100755 --- a/.agents/skills/fa-framework-settings/SKILL.md +++ b/.agents/skills/fa-framework-settings/SKILL.md @@ -40,4 +40,4 @@ description: 管理和配置 Fantastic-admin 框架设置。当用户提到以 - **顶栏设置**: [references/topbar-settings.md](references/topbar-settings.md) - 标签栏、工具栏、显示模式等 - **标签栏设置**: [references/tabbar-settings.md](references/tabbar-settings.md) - 风格、图标、双击动作、记忆功能等 - **工具栏设置**: [references/toolbar-settings.md](references/toolbar-settings.md) - 收藏夹、面包屑、搜索、通知、国际化等 -- **页面设置**: [references/page-settings.md](references/page-settings.md) - 快捷键、iframe 保活、切换动画、进度条等 +- **页面设置**: [references/page-settings.md](references/page-settings.md) - 快捷键、切换动画、进度条等 diff --git a/.agents/skills/fa-framework-settings/references/app-settings.md b/.agents/skills/fa-framework-settings/references/app-settings.md index a42638ef..5092b880 100755 --- a/.agents/skills/fa-framework-settings/references/app-settings.md +++ b/.agents/skills/fa-framework-settings/references/app-settings.md @@ -4,10 +4,8 @@ - [认证配置 (auth)](#认证配置-auth) - [路由配置](#路由配置) - [功能开关](#功能开关) -- [布局配置 (layout)](#布局配置-layout) - [主页配置 (home)](#主页配置-home) - [版权配置 (copyright)](#版权配置-copyright) -- [偏好设置 (preferences)](#偏好设置-preferences) ## 认证配置 (auth) @@ -16,25 +14,11 @@ - **默认值**: `false` - **说明**: 是否开启权限功能,控制是否启用权限验证功能 -### expiredMode -- **类型**: `'redirect' | 'popup'` -- **默认值**: `'redirect'` -- **说明**: 登录过期模式 - - `'redirect'` - 跳转到登录页 - - `'popup'` - 弹出登录窗口 - -### multipleAccounts -- **类型**: `boolean` -- **默认值**: `false` -- **说明**: 多账号管理,可同时登录多个账号,方便快速切换 - **示例:** ```typescript app: { auth: { permission: true, - expiredMode: 'redirect', - multipleAccounts: true, } } ``` @@ -62,31 +46,6 @@ app: { - **默认值**: `false` - **说明**: 控制是否启用动态页面标题功能 -### watermark -- **类型**: `boolean` -- **默认值**: `false` -- **说明**: 控制是否在页面上显示水印 - -### feedback -- **类型**: `boolean` -- **默认值**: `false` -- **说明**: 控制是否启用用户反馈功能 - -### lockScreen -- **类型**: `boolean` -- **默认值**: `false` -- **说明**: 控制是否启用锁屏功能 - -### errorLog -- **类型**: `boolean` -- **默认值**: `false` -- **说明**: 是否在非开发环境开启错误日志功能,具体业务代码在 `/src/utils/errorLog.ts` - -### checkUpdates -- **类型**: `boolean` -- **默认值**: `false` -- **说明**: 控制是否启用应用更新检查功能 - ### rip - **类型**: `boolean` - **默认值**: `false` @@ -97,36 +56,6 @@ app: { - **默认值**: `true` - **说明**: 移动端访问,关闭后网站将禁用移动端访问 -## 布局配置 (layout) - -### center -- **类型**: `boolean` -- **默认值**: `false` -- **说明**: 是否开启居中布局 - -### centerScope -- **类型**: `'inner' | 'outer'` -- **默认值**: `'inner'` -- **说明**: 居中布局作用范围 - - `'inner'` - 内层 - - `'outer'` - 外层 - -### centerWidth -- **类型**: `number` -- **默认值**: `1400` -- **说明**: 居中布局宽度(像素) - -**示例:** -```typescript -app: { - layout: { - center: true, - centerScope: 'outer', - centerWidth: 1400, - } -} -``` - ## 主页配置 (home) ### enable @@ -188,23 +117,3 @@ app: { } } ``` - -## 偏好设置 (preferences) - -控制用户偏好设置,可以控制各个功能模块的启用状态。 - -**类型**: `{ [key]: boolean | PreferencesBoolean }` - -**示例:** -```typescript -app: { - preferences: { - theme: true, // 允许用户自定义主题设置 - menu: true, // 允许用户自定义菜单设置 - topbar: true, // 允许用户自定义顶栏设置 - tabbar: true, // 允许用户自定义标签栏设置 - toolbar: true, // 允许用户自定义工具栏设置 - page: true, // 允许用户自定义页面设置 - } -} -``` diff --git a/.agents/skills/fa-framework-settings/references/menu-settings.md b/.agents/skills/fa-framework-settings/references/menu-settings.md index 136618ff..a2e9efda 100755 --- a/.agents/skills/fa-framework-settings/references/menu-settings.md +++ b/.agents/skills/fa-framework-settings/references/menu-settings.md @@ -2,40 +2,18 @@ ## 目录 - [导航菜单模式 (mode)](#导航菜单模式-mode) -- [导航菜单风格 (style)](#导航菜单风格-style) -- [暗色模式 (dark)](#暗色模式-dark) - [主导航点击模式 (mainMenuClickMode)](#主导航点击模式-mainmenuclickmode) - [次导航展开行为](#次导航展开行为) - [快捷键 (hotkeys)](#快捷键-hotkeys) ## 导航菜单模式 (mode) -- **类型**: `'side' | 'head' | 'single' | 'only-side' | 'only-head' | 'side-panel' | 'head-panel'` +- **类型**: `'side' | 'head' | 'single'` - **默认值**: `'side'` - **说明**: 设置导航菜单的显示模式 - `'side'` - 侧边栏模式(有主导航菜单) - `'head'` - 顶部模式 - `'single'` - 侧边栏模式(无主导航菜单) - - `'only-side'` - 侧边栏精简模式 - - `'only-head'` - 顶部精简模式 - - `'side-panel'` - 侧边栏面板模式 - - `'head-panel'` - 顶部面板模式 - -## 导航菜单风格 (style) - -- **类型**: `'' | 'arrow' | 'line' | 'dot'` -- **默认值**: `''` -- **说明**: 设置导航菜单的视觉风格 - - `''` - 默认风格 - - `'arrow'` - 箭头风格 - - `'line'` - 线条风格 - - `'dot'` - 圆点风格 - -## 暗色模式 (dark) - -- **类型**: `boolean` -- **默认值**: `false` -- **说明**: 仅在亮色模式下生效,控制导航菜单是否使用暗色主题 ## 主导航菜单点击模式 (mainMenuClickMode) @@ -60,12 +38,6 @@ - **默认值**: `false` - **说明**: 次导航菜单是否收起 -### subMenuAutoCollapse - -- **类型**: `boolean` -- **默认值**: `false` -- **说明**: 次导航菜单是否自动收起 - ### subMenuCollapseButton - **类型**: `boolean` @@ -83,12 +55,9 @@ ```typescript menu: { mode: 'side', - style: 'dot', - dark: false, mainMenuClickMode: 'switch', subMenuUniqueExpand: true, subMenuCollapse: false, - subMenuAutoCollapse: false, subMenuCollapseButton: true, hotkeys: true, } @@ -103,20 +72,6 @@ menu: { } ``` -**侧边栏精简模式:** -```typescript -menu: { - mode: 'only-side', -} -``` - -**启用暗色导航菜单(仅亮色模式下):** -```typescript -menu: { - dark: true, -} -``` - **智能主导航菜单点击:** ```typescript menu: { diff --git a/.agents/skills/fa-framework-settings/references/page-settings.md b/.agents/skills/fa-framework-settings/references/page-settings.md index e14a609d..fc041fa2 100755 --- a/.agents/skills/fa-framework-settings/references/page-settings.md +++ b/.agents/skills/fa-framework-settings/references/page-settings.md @@ -1,22 +1,9 @@ # 页面设置 (page) ## 目录 -- [快捷键 (hotkeys)](#快捷键-hotkeys) -- [iframe 页面最大保活数量 (iframeKeepAliveMax)](#iframe-页面最大保活数量-iframekeepalivemax) - [页面切换动画 (transitionMode)](#页面切换动画-transitionmode) - [载入进度条 (progress)](#载入进度条-progress) - -## 快捷键 (hotkeys) - -- **类型**: `boolean` -- **默认值**: `true` -- **说明**: 控制是否启用页面相关的快捷键功能 - -## iframe 页面最大保活数量 (iframeKeepAliveMax) - -- **类型**: `number` -- **默认值**: `3` -- **说明**: 设置 iframe 页面的最大保活数量 +- [快捷键 (hotkeys)](#快捷键-hotkeys) ## 页面切换动画 (transitionMode) @@ -36,14 +23,19 @@ - **默认值**: `true` - **说明**: 控制是否显示页面载入进度条 +## 快捷键 (hotkeys) + +- **类型**: `boolean` +- **默认值**: `true` +- **说明**: 控制是否启用页面相关的快捷键功能 + ## 完整示例 ```typescript page: { - hotkeys: true, - iframeKeepAliveMax: 3, transitionMode: 'fade', progress: true, + hotkeys: true, } ``` @@ -56,13 +48,6 @@ page: { } ``` -**增加 iframe 保活数量:** -```typescript -page: { - iframeKeepAliveMax: 9, -} -``` - **禁用进度条:** ```typescript page: { diff --git a/.agents/skills/fa-framework-settings/references/tabbar-settings.md b/.agents/skills/fa-framework-settings/references/tabbar-settings.md index 23fa7ec4..256fabce 100755 --- a/.agents/skills/fa-framework-settings/references/tabbar-settings.md +++ b/.agents/skills/fa-framework-settings/references/tabbar-settings.md @@ -1,56 +1,16 @@ # 标签栏设置 (tabbar) ## 目录 -- [标签栏风格 (style)](#标签栏风格-style) -- [最小最大宽度 (minMaxWidth)](#最小最大宽度-minmaxwidth) - [显示图标 (icon)](#显示图标-icon) - [双击执行动作 (dblclickAction)](#双击执行动作-dblclickaction) -- [记忆功能 (memory)](#记忆功能-memory) - [快捷键 (hotkeys)](#快捷键-hotkeys) -## 标签栏风格 (style) - -- **类型**: `'' | 'fashion' | 'card' | 'square'` -- **默认值**: `''` -- **说明**: 设置标签栏的视觉风格 - - `''` - 默认风格 - - `'fashion'` - 时尚风格 - - `'card'` - 卡片风格 - - `'square'` - 方块风格 - -## 最小最大宽度 (minMaxWidth) - -- **类型**: `readonly [number | 'unset', number | 'unset']` -- **默认值**: `[150, 150]` -- **说明**: 设置标签的最小和最大宽度,当设置为 `'unset'` 时为自适应 - - `[150, 150]` - 固定宽度 150px - - `[150, 'unset']` - 最小宽度 150px - - `['unset', 150]` - 最大宽度 150px - - `['unset', 'unset']` - 跟随文字长度自适应 - ## 显示图标 (icon) - **类型**: `boolean` - **默认值**: `false` - **说明**: 控制标签是否显示图标 -## 双击执行动作 (dblclickAction) - -- **类型**: `'reload' | 'close' | 'pin' | 'maximize' | 'window'` -- **默认值**: `'close'` -- **说明**: 设置双击标签时执行的动作 - - `'reload'` - 刷新 - - `'close'` - 关闭 - - `'pin'` - 固定/取消固定 - - `'maximize'` - 最大化 - - `'window'` - 新窗口打开 - -## 记忆功能 (memory) - -- **类型**: `boolean` -- **默认值**: `false` -- **说明**: 控制是否记住用户的标签操作状态 - ## 快捷键 (hotkeys) - **类型**: `boolean` @@ -61,48 +21,16 @@ ```typescript tabbar: { - style: 'fashion', - minMaxWidth: [150, 150], icon: true, - dblclickAction: 'close', - memory: true, hotkeys: true, } ``` ## 常见配置 -**时尚风格标签栏:** -```typescript -tabbar: { - style: 'fashion', -} -``` - **显示图标:** ```typescript tabbar: { icon: true, } ``` - -**自适应宽度:** -```typescript -tabbar: { - minMaxWidth: ['unset', 'unset'], -} -``` - -**双击刷新:** -```typescript -tabbar: { - dblclickAction: 'reload', -} -``` - -**启用记忆功能:** -```typescript -tabbar: { - memory: true, -} -``` diff --git a/.agents/skills/fa-framework-settings/references/theme-settings.md b/.agents/skills/fa-framework-settings/references/theme-settings.md index 9ba14bb5..0961ab73 100755 --- a/.agents/skills/fa-framework-settings/references/theme-settings.md +++ b/.agents/skills/fa-framework-settings/references/theme-settings.md @@ -1,31 +1,10 @@ # 主题设置 (theme) ## 目录 -- [主题同步 (sync)](#主题同步-sync) -- [亮色主题 (light)](#亮色主题-light) -- [暗色主题 (dark)](#暗色主题-dark) - [颜色方案 (colorScheme)](#颜色方案-colorscheme) - [圆角系数 (radius)](#圆角系数-radius) - [色弱模式 (colorAmblyopia)](#色弱模式-coloramblyopia) -## 主题同步 (sync) - -- **类型**: `boolean` -- **默认值**: `true` -- **说明**: 当开启时,切换颜色方案将共用一套主题 - -## 亮色主题 (light) - -- **类型**: `keyof typeof themes` -- **默认值**: `'default'` -- **说明**: 指定亮色模式下的主题 - -## 暗色主题 (dark) - -- **类型**: `keyof typeof themes` -- **默认值**: `'default'` -- **说明**: 指定暗色模式下的主题 - ## 颜色方案 (colorScheme) - **类型**: `'light' | 'dark' | ''` @@ -54,7 +33,6 @@ ```typescript theme: { - sync: true, light: 'default', dark: 'default', colorScheme: 'light', @@ -79,15 +57,6 @@ theme: { } ``` -**使用不同的亮色和暗色主题:** -```typescript -theme: { - sync: false, - light: 'default', - dark: 'custom-dark', -} -``` - **调整圆角:** ```typescript theme: { diff --git a/.agents/skills/fa-framework-settings/references/topbar-settings.md b/.agents/skills/fa-framework-settings/references/topbar-settings.md index 17bdc17b..bb14c67a 100755 --- a/.agents/skills/fa-framework-settings/references/topbar-settings.md +++ b/.agents/skills/fa-framework-settings/references/topbar-settings.md @@ -4,7 +4,6 @@ - [标签栏 (tabbar)](#标签栏-tabbar) - [工具栏 (toolbar)](#工具栏-toolbar) - [顶栏模式 (mode)](#顶栏模式-mode) -- [切换显示位置 (switchTabbarAndToolbar)](#切换显示位置-switchtabbarandtoolbar) ## 标签栏 (tabbar) @@ -27,14 +26,6 @@ - `'fixed'` - 固定,不跟随页面滚动,始终固定在顶部 - `'sticky'` - 粘性,页面往下滚动时隐藏,往上滚动时显示 -## 切换显示位置 (switchTabbarAndToolbar) - -- **类型**: `boolean` -- **默认值**: `false` -- **说明**: 控制标签栏和工具栏的显示顺序 - - `false` - 标签栏在工具栏上面 - - `true` - 工具栏在标签栏上面 - ## 完整示例 ```typescript @@ -42,7 +33,6 @@ topbar: { tabbar: true, toolbar: true, mode: 'fixed', - switchTabbarAndToolbar: false, } ``` @@ -69,10 +59,3 @@ topbar: { mode: 'sticky', } ``` - -**工具栏在标签栏上面:** -```typescript -topbar: { - switchTabbarAndToolbar: true, -} -``` diff --git a/.agents/skills/fa-page-optimizer/references/components-catalog.md b/.agents/skills/fa-page-optimizer/references/components-catalog.md index c8a1d6d1..b0e68dce 100755 --- a/.agents/skills/fa-page-optimizer/references/components-catalog.md +++ b/.agents/skills/fa-page-optimizer/references/components-catalog.md @@ -12,9 +12,6 @@ **变体**: default, destructive, outline, secondary, ghost, link **特性**: loading 状态、disabled 状态 -### FaBadge -**用途**: 徽章标签，用于状态标识和分类 - ### FaIcon **用途**: 图标组件，基于 [iconify](https://icon-sets.iconify.design/) **示例**: @@ -34,9 +31,6 @@ ### FaDivider **用途**: 分割线组件 -### FaLayoutContainer -**用途**: 布局容器组件 - ### FaPageHeader **用途**: 页面头部组件 @@ -275,7 +269,6 @@ | `
` | `FaCard` | 标准化的卡片布局 | | `
` | `FaDivider` | 统一的分割线样式 | | `` (头像) | `FaAvatar` | 头像专用组件 | -| `` | `FaBadge` | 统一的徽章样式 | ### 替换常见功能实现 diff --git a/.agents/skills/fa-route-generator/SKILL.md b/.agents/skills/fa-route-generator/SKILL.md index bc2ac23b..e6df28ed 100755 --- a/.agents/skills/fa-route-generator/SKILL.md +++ b/.agents/skills/fa-route-generator/SKILL.md @@ -76,11 +76,6 @@ export default routes 定位路由文件（在 `apps//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` diff --git a/.agents/skills/fa-route-generator/references/examples.md b/.agents/skills/fa-route-generator/references/examples.md index a22566b4..b8c2ef24 100755 --- a/.agents/skills/fa-route-generator/references/examples.md +++ b/.agents/skills/fa-route-generator/references/examples.md @@ -221,11 +221,6 @@ const routes: RouteRecordRaw = { meta: { title: '用户列表', auth: ['admin:view', 'admin:edit'], // 需要其中一个权限 - auths: [ - { name: '查看用户', value: 'admin:view' }, - { name: '编辑用户', value: 'admin:edit' }, - { name: '删除用户', value: 'admin:delete' }, - ], }, }, ], @@ -253,50 +248,6 @@ const routes: RouteRecordRaw = { link: 'https://github.com', }, }, - { - path: 'docs', - name: 'externalDocs', - component: () => import('@/views/external/iframe.vue'), - meta: { - title: '文档', - iframe: 'https://fantastic-admin.hurui.me', - }, - }, - ], -} -``` - -### 带徽章的路由 - -```typescript -const routes: RouteRecordRaw = { - path: '/features', - component: Layout, - name: 'features', - meta: { - title: '功能特性', - icon: 'i-ep:star', - badge: 'NEW', // 显示 NEW 徽章 - }, - children: [ - { - path: 'pro', - name: 'featuresPro', - component: () => import('@/views/features/pro.vue'), - meta: { - title: '专业版功能', - badge: ['PRO', 'destructive'], // 显示红色 PRO 徽章 - }, - }, - { - path: 'beta', - name: 'featuresBeta', - component: () => import('@/views/features/beta.vue'), - meta: { - title: 'Beta 功能', - badge: () => 'BETA', // 动态徽章 - }, - }, ], } ``` @@ -318,8 +269,8 @@ const routes: RouteRecordRaw = { path: 'always', name: 'menuAlways', meta: { - title: '始终展开', - expand: [true, true], // 默认展开且不允许收起 + title: '默认展开', + expand: true, }, children: [ { @@ -336,31 +287,6 @@ const routes: RouteRecordRaw = { } ``` -### 带查询参数的路由 - -```typescript -const routes: RouteRecordRaw = { - path: '/report', - component: Layout, - name: 'report', - meta: { - title: '报表', - icon: 'i-ep:data-analysis', - }, - children: [ - { - path: 'sales', - name: 'reportSales', - component: () => import('@/views/report/sales.vue'), - meta: { - title: '销售报表', - query: { type: 'monthly' }, // 点击导航时携带参数 - }, - }, - ], -} -``` - ## 路由配置调整 ### 权限配置调整 diff --git a/.agents/skills/fa-route-generator/references/route-meta.md b/.agents/skills/fa-route-generator/references/route-meta.md index 0011a12f..103b1724 100755 --- a/.agents/skills/fa-route-generator/references/route-meta.md +++ b/.agents/skills/fa-route-generator/references/route-meta.md @@ -13,19 +13,6 @@ ## 权限相关 -### auths - -- **类型**: `Array<{ name: string, value: string }>` -- **默认值**: `undefined` -- **说明**: 权限池,对路由本身无实际作用,通常用于角色管理模块,展示路由可配置权限 -- **示例**: - ```typescript - auths: [ - { name: '新闻管理(浏览)', value: 'news:view' }, - { name: '新闻管理(编辑)', value: 'news:edit' } - ] - ``` - ### auth - **类型**: `string | string[]` @@ -37,17 +24,6 @@ auth: ['news:view', 'news:edit'] // 需要具备其中一个权限 ``` -### localeAuth - -- **类型**: `string | string[]` -- **默认值**: `undefined` -- **说明**: 区域语言权限,配置为数组时,只需满足一个即可进入 -- **示例**: - ```typescript - localeAuth: 'zh-cn' // 当前区域语言为 zh-cn 允许访问 - localeAuth: ['zh-cn', 'zh-tw'] // 当前区域语言为 zh-cn 或 zh-tw 允许访问 - ``` - ## 导航显示 ### title @@ -63,13 +39,12 @@ ### icon -- **类型**: `string | [string, string]` +- **类型**: `string` - **默认值**: `undefined` -- **说明**: 图标,如果配置为数组,则第一个为默认图标,第二个为激活图标 +- **说明**: 图标 - **示例**: ```typescript icon: 'i-ep:lock' // 默认显示 i-ep:lock 图标 - icon: ['i-ep:lock', 'i-ep:unlock'] // 默认显示 i-ep:lock,激活时显示 i-ep:unlock ``` ### menu @@ -90,65 +65,20 @@ ### expand -- **类型**: `boolean | [boolean, boolean]` +- **类型**: `boolean` - **默认值**: `undefined` -- **说明**: 是否默认展开,如果配置为数组,则第一个为默认展开状态,第二个是否始终展开 +- **说明**: 是否默认展开 - **示例**: ```typescript expand: true // 默认展开 - expand: [true, true] // 默认展开,且不允许收起 ``` -### badge - -- **类型**: `boolean | string | number | (() => boolean | string | number) | [value, color]` -- **默认值**: `undefined` -- **说明**: 徽章,如果配置为数组,则第一个为徽章内容,第二个为徽章颜色 -- **示例**: - ```typescript - badge: 'PRO' // 显示徽章,内容为 PRO - badge: true // 显示徽章,内容为圆点 - badge: [true, 'destructive'] // 显示徽章,内容为圆点,颜色为 destructive - badge: () => '动态徽章' - ``` - -### sort - -- **类型**: `number` -- **默认值**: `0` -- **说明**: 导航排序,数字越大越靠前 - -### singleMenu - -- **类型**: `boolean` -- **默认值**: `false` -- **说明**: 是否为单个一级导航,该配置用于简化只想展示一级,没有二级导航的路由配置 - ### breadcrumb - **类型**: `boolean` - **默认值**: `true` - **说明**: 是否在面包屑中显示 -## 标签页 - -### tabPermanent - -- **类型**: `boolean` -- **默认值**: `false` -- **说明**: 是否常驻标签页,请勿在带有参数的路由上设置该特性 - -### tabMerge - -- **类型**: `'routeName' | 'activeMenu'` -- **默认值**: `undefined` -- **说明**: 标签页合并,根据规则合并标签页 -- **示例**: - ```typescript - tabMerge: 'routeName' // 根据路由名称合并 - tabMerge: 'activeMenu' // 根据 activeMenu 属性合并 - ``` - ## 页面行为 ### keepAlive @@ -174,35 +104,6 @@ noKeepAlive: ['news', 'user'] // 访问路由name为news或user的页面时不保活 ``` -### maximize - -- **类型**: `boolean | [boolean, boolean]` -- **默认值**: `undefined` -- **说明**: 最大化,如果配置为数组,则第一个为是否开启最大化,第二个为是否允许手动退出最大化 -- **示例**: - ```typescript - maximize: true // 开启最大化 - maximize: [true, false] // 开启最大化,允许手动退出最大化 - maximize: [true, true] // 开启最大化,不允许手动退出最大化 - ``` - -### newWindow - -- **类型**: `boolean` -- **默认值**: `false` -- **说明**: 是否在新窗口打开 - -### iframe - -- **类型**: `string | boolean` -- **默认值**: `undefined` -- **说明**: 是否在iframe中打开 -- **示例**: - ```typescript - iframe: 'https://fantastic-admin.hurui.me' // 在iframe中打开 Fantastic-admin 官网 - iframe: true // 获取路由query中的iframe属性,并在iframe中打开 - ``` - ### link - **类型**: `string` @@ -212,39 +113,3 @@ ```typescript link: 'https://fantastic-admin.hurui.me' // 在浏览器新窗口打开 Fantastic-admin 官网 ``` - -### query - -- **类型**: `Record` -- **默认值**: `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` -- **说明**: 是否显示版权,如果不设置,则使用全局配置 diff --git a/.agents/skills/fa-store-generator/references/store-patterns.md b/.agents/skills/fa-store-generator/references/store-patterns.md index 4ed76445..84883834 100755 --- a/.agents/skills/fa-store-generator/references/store-patterns.md +++ b/.agents/skills/fa-store-generator/references/store-patterns.md @@ -167,9 +167,6 @@ export const useDictionaryStore = defineStore('dictionary', () => { | `useAppSettingsStore` | `modules/app/settings.ts` | 主题、语言、布局配置 | | `useAppMenuStore` | `modules/app/menu.ts` | 菜单生成与导航状态 | | `useAppTabbarStore` | `modules/app/tabbar.ts` | 标签栏管理 | -| `useAppNotificationStore` | `modules/app/notification.ts` | 通知系统 | -| `useDictionaryStore` | `modules/dictionary.ts` | 字典数据缓存 | -| `useMenuBadgeStore` | `modules/menuBadge.ts` | 菜单徽章状态 | --- diff --git a/.agents/skills/fa-theme-customizer/SKILL.md b/.agents/skills/fa-theme-customizer/SKILL.md index 21d87e25..8f3ea53e 100755 --- a/.agents/skills/fa-theme-customizer/SKILL.md +++ b/.agents/skills/fa-theme-customizer/SKILL.md @@ -5,11 +5,11 @@ description: 为 Fantastic-admin 框架创建和定制主题配色方案，始 # 主题定制器 -为 Fantastic-admin 框架生成符合规范的主题配色。框架的 `theme.sync` 默认为 `true`，切换颜色方案时明暗共用同一套主题名称，因此**始终同时输出明色和暗色两套**，缺少任何一套都会导致对应模式下显示异常。 +为 Fantastic-admin 框架生成符合规范的主题配色。 ## 主题文件位置 -- 主题定义：`packages/themes/index.ts`（在此添加新主题，跨所有应用共享） +- 主题定义：`packages/themes/index.ts`（在此替换新主题，跨所有应用共享） - 类型推断：自动从 `packages/themes/index.ts` 的 key 推断，无需手动更新类型 ## 工作流程 @@ -31,104 +31,92 @@ description: 为 Fantastic-admin 框架创建和定制主题配色方案，始 ### 第三步：输出主题代码 -在 `packages/themes/index.ts` 中添加新主题，格式严格遵循现有主题结构： +在 `packages/themes/index.ts` 中替换新主题，格式严格遵循现有主题结构： ```typescript -themeName: { - light: { - // shadcn 标准 token（必填） - '--background': 'L C H', - '--foreground': 'L C H', - '--card': 'L C H', - '--card-foreground': 'L C H', - '--popover': 'L C H', - '--popover-foreground': 'L C H', - '--primary': 'L C H', - '--primary-foreground': 'L C H', - '--secondary': 'L C H', - '--secondary-foreground': 'L C H', - '--muted': 'L C H', - '--muted-foreground': 'L C H', - '--accent': 'L C H', - '--accent-foreground': 'L C H', - '--destructive': '0.577 0.245 27.325', // 通常保持不变 - '--border': 'L C H', - '--input': 'L C H', - '--ring': 'L C H', // 通常与 primary 相同 - // 框架专属 token（必填） - '--g-main-area-bg': 'oklch(L C H)', // 明色略深于背景，形成层次感 - '--g-header-bg': 'oklch(var(--background))', - '--g-header-color': 'oklch(var(--foreground))', - '--g-header-menu-color': 'oklch(var(--accent-foreground))', - '--g-header-menu-hover-bg': 'oklch(var(--accent))', - '--g-header-menu-hover-color': 'oklch(var(--accent-foreground))', - '--g-header-menu-active-bg': 'oklch(var(--primary))', - '--g-header-menu-active-color': 'oklch(var(--primary-foreground))', - '--g-main-sidebar-bg': 'oklch(var(--background))', - '--g-main-sidebar-menu-color': 'oklch(var(--accent-foreground))', - '--g-main-sidebar-menu-hover-bg': 'oklch(var(--accent))', - '--g-main-sidebar-menu-hover-color': 'oklch(var(--accent-foreground))', - '--g-main-sidebar-menu-active-bg': 'oklch(var(--primary))', - '--g-main-sidebar-menu-active-color': 'oklch(var(--primary-foreground))', - '--g-sub-sidebar-bg': 'oklch(var(--background))', - '--g-sub-sidebar-menu-color': 'oklch(var(--accent-foreground))', - '--g-sub-sidebar-menu-hover-bg': 'oklch(var(--accent))', - '--g-sub-sidebar-menu-hover-color': 'oklch(var(--accent-foreground))', - '--g-sub-sidebar-menu-active-bg': 'oklch(var(--primary))', - '--g-sub-sidebar-menu-active-color': 'oklch(var(--primary-foreground))', - '--g-tabbar-bg': 'oklch(var(--background))', - '--g-tabbar-tab-color': 'oklch(var(--accent-foreground) / 50%)', - '--g-tabbar-tab-hover-bg': 'oklch(var(--accent) / 50%)', - '--g-tabbar-tab-hover-color': 'oklch(var(--accent-foreground) / 50%)', - '--g-tabbar-tab-active-bg': 'oklch(var(--accent))', - '--g-tabbar-tab-active-color': 'oklch(var(--foreground))', - '--g-toolbar-bg': 'oklch(var(--background))', - }, - dark: { - // shadcn 标准 token（同明色结构，但色值更深） - '--background': 'L C H', - // ... 其余 shadcn token - // 框架专属 token（暗色与明色有 5 处关键差异，见 references/theme-structure.md） - '--g-main-area-bg': 'oklch(var(--background))', // 暗色与背景相同，避免过多层次 - '--g-header-bg': 'oklch(var(--background))', - '--g-header-color': 'oklch(var(--foreground))', - '--g-header-menu-color': 'oklch(var(--muted-foreground))', // 差异：用 muted-foreground - '--g-header-menu-hover-bg': 'oklch(var(--muted))', // 差异：用 muted - '--g-header-menu-hover-color': 'oklch(var(--muted-foreground))', - '--g-header-menu-active-bg': 'oklch(var(--accent))', // 差异：用 accent 而非 primary - '--g-header-menu-active-color': 'oklch(var(--accent-foreground))', - '--g-main-sidebar-bg': 'oklch(var(--background))', - '--g-main-sidebar-menu-color': 'oklch(var(--muted-foreground))', - '--g-main-sidebar-menu-hover-bg': 'oklch(var(--muted))', - '--g-main-sidebar-menu-hover-color': 'oklch(var(--muted-foreground))', - '--g-main-sidebar-menu-active-bg': 'oklch(var(--accent))', - '--g-main-sidebar-menu-active-color': 'oklch(var(--accent-foreground))', - '--g-sub-sidebar-bg': 'oklch(var(--background))', - '--g-sub-sidebar-menu-color': 'oklch(var(--muted-foreground))', - '--g-sub-sidebar-menu-hover-bg': 'oklch(var(--muted))', - '--g-sub-sidebar-menu-hover-color': 'oklch(var(--muted-foreground))', - '--g-sub-sidebar-menu-active-bg': 'oklch(var(--accent))', - '--g-sub-sidebar-menu-active-color': 'oklch(var(--accent-foreground))', - '--g-tabbar-bg': 'oklch(var(--background))', - '--g-tabbar-tab-color': 'oklch(var(--accent-foreground) / 50%)', - '--g-tabbar-tab-hover-bg': 'oklch(var(--accent) / 50%)', - '--g-tabbar-tab-hover-color': 'oklch(var(--accent-foreground) / 50%)', - '--g-tabbar-tab-active-bg': 'oklch(var(--accent))', - '--g-tabbar-tab-active-color': 'oklch(var(--foreground))', - '--g-toolbar-bg': 'oklch(var(--background))', - }, -}, -``` +export const lightTheme = { + // shadcn 标准 token（必填） + '--background': 'L C H', + '--foreground': 'L C H', + '--card': 'L C H', + '--card-foreground': 'L C H', + '--popover': 'L C H', + '--popover-foreground': 'L C H', + '--primary': 'L C H', + '--primary-foreground': 'L C H', + '--secondary': 'L C H', + '--secondary-foreground': 'L C H', + '--muted': 'L C H', + '--muted-foreground': 'L C H', + '--accent': 'L C H', + '--accent-foreground': 'L C H', + '--destructive': '0.577 0.245 27.325', // 通常保持不变 + '--border': 'L C H', + '--input': 'L C H', + '--ring': 'L C H', // 通常与 primary 相同 + // 框架专属 token（必填） + '--g-main-area-bg': 'oklch(L C H)', // 明色略深于背景，形成层次感 + '--g-header-bg': 'oklch(var(--background))', + '--g-header-color': 'oklch(var(--foreground))', + '--g-header-menu-color': 'oklch(var(--accent-foreground))', + '--g-header-menu-hover-bg': 'oklch(var(--accent))', + '--g-header-menu-hover-color': 'oklch(var(--accent-foreground))', + '--g-header-menu-active-bg': 'oklch(var(--primary))', + '--g-header-menu-active-color': 'oklch(var(--primary-foreground))', + '--g-main-sidebar-bg': 'oklch(var(--background))', + '--g-main-sidebar-menu-color': 'oklch(var(--accent-foreground))', + '--g-main-sidebar-menu-hover-bg': 'oklch(var(--accent))', + '--g-main-sidebar-menu-hover-color': 'oklch(var(--accent-foreground))', + '--g-main-sidebar-menu-active-bg': 'oklch(var(--primary))', + '--g-main-sidebar-menu-active-color': 'oklch(var(--primary-foreground))', + '--g-sub-sidebar-bg': 'oklch(var(--background))', + '--g-sub-sidebar-menu-color': 'oklch(var(--accent-foreground))', + '--g-sub-sidebar-menu-hover-bg': 'oklch(var(--accent))', + '--g-sub-sidebar-menu-hover-color': 'oklch(var(--accent-foreground))', + '--g-sub-sidebar-menu-active-bg': 'oklch(var(--primary))', + '--g-sub-sidebar-menu-active-color': 'oklch(var(--primary-foreground))', + '--g-tabbar-bg': 'oklch(var(--background))', + '--g-tabbar-tab-color': 'oklch(var(--accent-foreground) / 50%)', + '--g-tabbar-tab-hover-bg': 'oklch(var(--accent) / 50%)', + '--g-tabbar-tab-hover-color': 'oklch(var(--accent-foreground) / 50%)', + '--g-tabbar-tab-active-bg': 'oklch(var(--accent))', + '--g-tabbar-tab-active-color': 'oklch(var(--foreground))', + '--g-toolbar-bg': 'oklch(var(--background))', +} as const -### 第四步：在应用设置中启用 - -主题添加到 `packages/themes/index.ts` 后，还需要在对应应用的设置中启用。先执行 `ls apps/` 确认有哪些应用，询问用户要在哪个应用中启用，然后修改 `apps//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 ``` ## 参考资源 diff --git a/apps/example/src/types/components.d.ts b/apps/example/src/types/components.d.ts index 4ccb284d..01fb2258 100755 --- a/apps/example/src/types/components.d.ts +++ b/apps/example/src/types/components.d.ts @@ -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'] -} \ No newline at end of file +} diff --git a/packages/components/src/avatar/README.md b/packages/components/src/avatar/README.md old mode 100755 new mode 100644 index 7a4fef6b..5a273eed --- a/packages/components/src/avatar/README.md +++ b/packages/components/src/avatar/README.md @@ -2,13 +2,14 @@ 用户头像组件，支持图片加载失败时显示降级内容。 -## 基础用法 +## 使用场景 -```vue - -``` +- 用户头像显示 +- 评论区头像 +- 聊天消息头像 +- 团队成员展示 +- 个人中心头像 +- 头像上传预览 ## Props @@ -24,12 +25,16 @@ |------|------| | `default` | 自定义降级内容（覆盖 fallback） | -## Events - -无 - ## 示例 +### 基础用法 + +```vue + +``` + ### 基础头像 ```vue @@ -106,12 +111,3 @@ 2. **默认尺寸**：头像默认尺寸由 CSS 类控制，可通过 `class` 属性调整 3. **形状**：默认为圆角方形，添加 `rounded-full` 类可变为圆形 4. **降级文本**：`fallback` 默认只显示前 2 个字符 - -## 典型使用场景 - -- 用户头像显示 -- 评论区头像 -- 聊天消息头像 -- 团队成员展示 -- 个人中心头像 -- 头像上传预览 diff --git a/packages/components/src/button-group/README.md b/packages/components/src/button-group/README.md old mode 100755 new mode 100644 index ba37afaf..4436746c --- a/packages/components/src/button-group/README.md +++ b/packages/components/src/button-group/README.md @@ -2,7 +2,28 @@ 将多个按钮组合在一起的容器组件，支持水平/垂直排列和分割线。 -## 基础用法 +## 使用场景 + +- 将多个按钮组合在一起的容器组件，支持水平/垂直排列和分割线。 +- 常见用法：垂直排列、带分割线、工具栏按钮组、垂直菜单。 + +## Props + +| 参数 | 说明 | 类型 | 默认值 | +|------|------|------|--------| +| orientation | 排列方向 | `'horizontal' \| 'vertical'` | `'horizontal'` | +| separator | 是否显示分割线 | `boolean` | `false` | +| class | 自定义类名 | `HTMLAttributes['class']` | `undefined` | + +## Slots + +| 名称 | 说明 | +|------|------| +| default | 默认插槽，放置 FaButton 组件 | + +## 示例 + +### 基础用法 ```vue ``` -## 垂直排列 +### 垂直排列 ```vue ``` -## 带分割线 +### 带分割线 ```vue ``` -## API - -### Props - -| 参数 | 说明 | 类型 | 默认值 | -|------|------|------|--------| -| orientation | 排列方向 | `'horizontal' \| 'vertical'` | `'horizontal'` | -| separator | 是否显示分割线 | `boolean` | `false` | -| class | 自定义类名 | `HTMLAttributes['class']` | `undefined` | - -### Slots - -| 名称 | 说明 | -|------|------| -| default | 默认插槽，放置 FaButton 组件 | - -## 示例 - ### 工具栏按钮组 ```vue @@ -132,3 +135,7 @@ ``` + +## 注意事项 + +- 无特殊限制，建议按示例中的受控方式接入，并结合业务容器尺寸验证最终展示效果。 diff --git a/packages/components/src/button/README.md b/packages/components/src/button/README.md old mode 100755 new mode 100644 index a318f88f..be76d9fc --- a/packages/components/src/button/README.md +++ b/packages/components/src/button/README.md @@ -2,15 +2,13 @@ 基础按钮组件，支持多种样式变体和尺寸，内置加载状态支持。 -## 基础用法 +## 使用场景 -```vue - -``` +- 表单提交按钮 +- 操作触发按钮（新增、编辑、删除） +- 导航链接按钮 +- 工具栏操作按钮 +- 对话框/抽屉底部操作按钮 ## Props @@ -28,12 +26,18 @@ |------|------| | `default` | 按钮内容（图标、文字等） | -## Events - -无 - ## 示例 +### 基础用法 + +```vue + +``` + ### 不同样式变体 ```vue @@ -119,11 +123,3 @@ function handleClick() { - `ghost`：幽灵按钮，用于更次要的操作 - `link`：链接样式 - `expand`：展开动画效果按钮 - -## 典型使用场景 - -- 表单提交按钮 -- 操作触发按钮（新增、编辑、删除） -- 导航链接按钮 -- 工具栏操作按钮 -- 对话框/抽屉底部操作按钮 diff --git a/packages/components/src/card/README.md b/packages/components/src/card/README.md old mode 100755 new mode 100644 index f06cda32..00935a7e --- a/packages/components/src/card/README.md +++ b/packages/components/src/card/README.md @@ -2,15 +2,13 @@ 基础卡片容器组件，支持标题、描述、内容和页脚区域。 -## 基础用法 +## 使用场景 -```vue - -``` +- 信息展示卡片 +- 表单容器 +- 数据统计卡片 +- 列表项容器 +- 对话框内容区 ## Props @@ -31,12 +29,18 @@ | `default` | 卡片内容 | | `footer` | 卡片页脚 | -## Events - -无 - ## 示例 +### 基础用法 + +```vue + +``` + ### 基础卡片 ```vue @@ -131,11 +135,3 @@ 2. **slot 优先**：如果提供了 `header` slot，会覆盖 `title` 和 `description` props 3. **结构组成**：卡片由 CardHeader、CardContent、CardFooter 三部分组成 4. **响应式**：卡片宽度自适应父容器，可通过 `class` 设置固定宽度 - -## 典型使用场景 - -- 信息展示卡片 -- 表单容器 -- 数据统计卡片 -- 列表项容器 -- 对话框内容区 diff --git a/packages/components/src/checkbox/README.md b/packages/components/src/checkbox/README.md old mode 100755 new mode 100644 index 1b7433c8..3681581d --- a/packages/components/src/checkbox/README.md +++ b/packages/components/src/checkbox/README.md @@ -2,17 +2,12 @@ 简洁的复选框组件，支持双向绑定和标签内容插槽。 -## 基础用法 +## 使用场景 -```vue - - - -``` +- 表单中的同意协议选项 +- 多选过滤条件 +- 设置选项开关 +- 列表项批量选择 ## Props @@ -31,12 +26,20 @@ const checked = ref(false) 通过 `v-model` 双向绑定，无需单独事件 -## Exposed Methods - -无 - ## 示例 +### 基础用法 + +```vue + + + +``` + ### 基础复选框 ```vue @@ -129,10 +132,3 @@ function handleSubmit() { 3. **空标签隐藏**：当不提供默认插槽内容时，标签元素会自动隐藏 4. **禁用状态**：禁用状态下复选框和标签都无法点击 5. **无障碍支持**：原生支持键盘操作（空格键切换状态） - -## 典型使用场景 - -- 表单中的同意协议选项 -- 多选过滤条件 -- 设置选项开关 -- 列表项批量选择 diff --git a/packages/components/src/collapsible/README.md b/packages/components/src/collapsible/README.md old mode 100755 new mode 100644 index 6ba61b66..2ac85b83 --- a/packages/components/src/collapsible/README.md +++ b/packages/components/src/collapsible/README.md @@ -2,7 +2,32 @@ 可折叠的内容面板，支持展开/收起动画。 -## 基础用法 +## 使用场景 + +- FAQ 问答列表 +- 手风琴菜单 +- 可展开的详情区域 +- 目录折叠 +- 高级筛选条件展开 + +## Props + +### Model + +| 名称 | 类型 | 说明 | +|------|------|------| +| `modelValue` | `boolean` | 展开/收起状态（支持 v-model） | + +## Slots + +| 名称 | 说明 | +|------|------| +| `trigger` | 触发元素，slot props: `{ open: boolean }` | +| `default` | 可折叠的内容 | + +## 示例 + +### 基础用法 ```vue - - -``` +- 表单编辑 +- 详情展示 +- 过滤筛选条件 +- 配置设置 +- 确认对话框（使用 show-cancel-button） ## Props @@ -70,12 +63,43 @@ const open = ref(false) | `confirm` | 点击确定按钮时触发 | | `cancel` | 点击取消按钮时触发 | -## Exposed Methods +## API -无 +### 函数式调用 + +```vue + +``` ## 示例 +### 基础用法 + +```vue + + + +``` + ### 基础抽屉 ```vue @@ -250,24 +274,6 @@ function handleSubmit() { ``` -## 函数式调用 - -```vue - -``` - ## 注意事项 1. **v-model 绑定**：使用 `v-model` 控制抽屉打开状态 @@ -276,11 +282,3 @@ function openDrawer() { 4. **加载状态**：`loading` 会显示遮罩层，`confirmButtonLoading` 只影响按钮 5. **动画事件**：`opened` 和 `closed` 在动画完成后触发 6. **默认关闭行为**：点击确定/取消按钮会自动关闭抽屉，如需阻止请在 `beforeClose` 中处理 - -## 典型使用场景 - -- 表单编辑 -- 详情展示 -- 过滤筛选条件 -- 配置设置 -- 确认对话框（使用 show-cancel-button） diff --git a/packages/components/src/dropdown/README.md b/packages/components/src/dropdown/README.md old mode 100755 new mode 100644 index 2bcf56c0..15f4a6b9 --- a/packages/components/src/dropdown/README.md +++ b/packages/components/src/dropdown/README.md @@ -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 - - -``` +- 头像/图片上传 +- 附件文件上传 +- 批量文件上传 +- 资料文件上传 +- 证据/凭证上传 +- 文档上传 ## 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 + + + +``` + ### 基础上传 ```vue @@ -291,12 +300,3 @@ function handleFileClick(fileItem: FileItem) { 4. **重新上传**：失败的文件可以点击重试 5. **删除文件**：上传成功的文件可以删除 6. **拖拽上传**：支持拖拽文件到上传区域 - -## 典型使用场景 - -- 头像/图片上传 -- 附件文件上传 -- 批量文件上传 -- 资料文件上传 -- 证据/凭证上传 -- 文档上传 diff --git a/packages/components/src/fixed-bar/README.md b/packages/components/src/fixed-bar/README.md old mode 100755 new mode 100644 index 584fde4c..bffd1c59 --- a/packages/components/src/fixed-bar/README.md +++ b/packages/components/src/fixed-bar/README.md @@ -2,7 +2,25 @@ 固定在页面顶部或底部的栏位组件，适用于展示操作栏、筛选条件等内容。 -## 基础用法 +## 使用场景 + +- 固定在页面顶部或底部的栏位组件，适用于展示操作栏、筛选条件等内容。 +- 常见用法：固定在顶部、固定在底部、顶部筛选栏、底部操作栏。 + +## Props + +| 参数 | 说明 | 类型 | 默认值 | +|------|------|------|--------| +| position | 固定位置 | `'top' \| 'bottom'` | `required` | +| class | 自定义类名 | `HTMLAttributes['class']` | `undefined` | + +## Slots + +| 名称 | 说明 | +|------|------| +| default | 默认插槽，固定栏内容 | + +## 示例 ### 固定在顶部 @@ -30,23 +48,6 @@ ``` -## API - -### Props - -| 参数 | 说明 | 类型 | 默认值 | -|------|------|------|--------| -| position | 固定位置 | `'top' \| 'bottom'` | `required` | -| class | 自定义类名 | `HTMLAttributes['class']` | `undefined` | - -### Slots - -| 名称 | 说明 | -|------|------| -| default | 默认插槽，固定栏内容 | - -## 示例 - ### 顶部筛选栏 ```vue diff --git a/packages/components/src/hover-card/README.md b/packages/components/src/hover-card/README.md old mode 100755 new mode 100644 index 8e259497..da41ada0 --- a/packages/components/src/hover-card/README.md +++ b/packages/components/src/hover-card/README.md @@ -2,20 +2,14 @@ 鼠标悬停时显示的卡片，用于展示额外信息。 -## 基础用法 +## 使用场景 -```vue - -``` +- 用户信息预览 +- 链接/引用预览 +- 术语解释 +- 图片放大预览 +- 日期/时间详情 +- 标签详情 ## Props @@ -35,12 +29,23 @@ | `default` | 触发元素（必填） | | `card` | 悬浮卡片内容 | -## Events - -无 - ## 示例 +### 基础用法 + +```vue + +``` + ### 基础悬浮卡片 ```vue @@ -181,12 +186,3 @@ 2. **自动延迟**：默认有短暂的延迟才显示，避免鼠标划过时误触发 3. **自动定位**：组件会自动调整位置避免超出视口 4. **内容宽度**：卡片内容建议设置合适的宽度 - -## 典型使用场景 - -- 用户信息预览 -- 链接/引用预览 -- 术语解释 -- 图片放大预览 -- 日期/时间详情 -- 标签详情 diff --git a/packages/components/src/icon/README.md b/packages/components/src/icon/README.md index d5bdf145..c9a1ec60 100644 --- a/packages/components/src/icon/README.md +++ b/packages/components/src/icon/README.md @@ -2,14 +2,13 @@ 统一的图标组件，支持 UnoCSS 图标类、Iconify、SVG 雪碧图和外部图片 URL 四种图标来源。 -## 基础用法 +## 使用场景 -```vue - -``` +- 按钮图标 +- 导航菜单图标 +- 状态指示图标 +- 操作图标（编辑、删除、查看等） +- 表单装饰图标 ## 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 + +``` + ### 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） - -## 典型使用场景 - -- 按钮图标 -- 导航菜单图标 -- 状态指示图标 -- 操作图标（编辑、删除、查看等） -- 表单装饰图标 diff --git a/packages/components/src/image-preview/README.md b/packages/components/src/image-preview/README.md old mode 100755 new mode 100644 index 9cc0575e..115d998c --- a/packages/components/src/image-preview/README.md +++ b/packages/components/src/image-preview/README.md @@ -2,13 +2,14 @@ 带加载状态和错误处理的图片预览组件，支持点击放大查看。 -## 基础用法 +## 使用场景 -```vue - -``` +- 商品图片展示 +- 用户头像预览 +- 图片画廊 +- 附件图片预览 +- 缩略图列表 +- 相册展示 ## Props @@ -33,6 +34,14 @@ ## 示例 +### 基础用法 + +```vue + +``` + ### 基础图片预览 ```vue @@ -186,12 +195,3 @@ const photos = [ 3. **错误处理**：加载失败时显示错误图标 4. **hover 效果**：鼠标悬停时图片会轻微放大 5. **响应式**：建议设置合适的尺寸或使用响应式类 - -## 典型使用场景 - -- 商品图片展示 -- 用户头像预览 -- 图片画廊 -- 附件图片预览 -- 缩略图列表 -- 相册展示 diff --git a/packages/components/src/image-upload/README.md b/packages/components/src/image-upload/README.md old mode 100755 new mode 100644 index ab542599..4229d62b --- a/packages/components/src/image-upload/README.md +++ b/packages/components/src/image-upload/README.md @@ -2,20 +2,14 @@ 专门用于图片上传的组件，支持预览、排序和拖拽上传。 -## 基础用法 +## 使用场景 -```vue - - - -``` +- 用户头像上传 +- 商品图片上传 +- 文章配图上传 +- 相册图片上传 +- 证据/凭证图片上传 +- 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 + + + +``` + ### 基础图片上传 ```vue @@ -300,12 +309,3 @@ function handleSubmit() { 4. **上传进度**：上传时显示进度条 5. **格式校验**：根据 `ext` 属性校验图片格式 6. **大小限制**：根据 `size` 属性校验图片大小 - -## 典型使用场景 - -- 用户头像上传 -- 商品图片上传 -- 文章配图上传 -- 相册图片上传 -- 证据/凭证图片上传 -- Banner 图上传 diff --git a/packages/components/src/input-otp/README.md b/packages/components/src/input-otp/README.md old mode 100755 new mode 100644 index 925e5bc4..e2bbe841 --- a/packages/components/src/input-otp/README.md +++ b/packages/components/src/input-otp/README.md @@ -2,7 +2,36 @@ 用于输入短信验证码、邮箱验证码等一次性密码的输入组件。 -## 基础用法 +## 使用场景 + +- 短信验证码输入 +- 邮箱验证码验证 +- 双重身份验证（2FA） +- 登录保护验证 +- 支付密码验证 +- 敏感操作确认 + +## Props + +| 属性 | 类型 | 默认值 | 说明 | +|------|------|--------|------| +| `length` | `number` | `6` | 验证码位数 | + +### Model + +| 名称 | 类型 | 说明 | +|------|------|------| +| `modelValue` | `string` | 输入的验证码 | + +## Events + +| 事件名 | 参数 | 说明 | +|--------|------|------| +| `complete` | - | 验证码输入完成时触发 | + +## 示例 + +### 基础用法 ```vue - - -``` +- 表单输入字段 +- 搜索框 +- 密码输入 +- 带单位的数值输入 +- 带前缀的账号输入（如 +86） ## Props @@ -48,6 +44,18 @@ const value = ref('') ## 示例 +### 基础用法 + +```vue + + + +``` + ### 基础输入框 ```vue @@ -190,11 +198,3 @@ const strength = computed(() => { 3. **清空按钮**：`clearable` 模式下，仅当输入框有值且获得焦点或悬停时显示清空按钮 4. **原生属性**：支持所有原生 input 属性（placeholder、autocomplete 等） 5. **对齐方式**：`align="inline"` 时前后缀与输入内容同行，`align="block"` 时上下排列 - -## 典型使用场景 - -- 表单输入字段 -- 搜索框 -- 密码输入 -- 带单位的数值输入 -- 带前缀的账号输入（如 +86） diff --git a/packages/components/src/kbd-group/README.md b/packages/components/src/kbd-group/README.md old mode 100755 new mode 100644 index 17733c8a..300171c3 --- a/packages/components/src/kbd-group/README.md +++ b/packages/components/src/kbd-group/README.md @@ -2,16 +2,12 @@ 用于包裹多个 `FaKbd` 组件，展示组合按键的容器组件。 -## 基础用法 +## 使用场景 -```vue - -``` +- 快捷键组合展示 +- 键盘操作说明 +- 命令面板提示 +- 帮助文档中的多键组合说明 ## Props @@ -25,12 +21,19 @@ |------|------| | `default` | 包含的 `FaKbd` 组件 | -## Events - -无 - ## 示例 +### 基础用法 + +```vue + +``` + ### 双键组合 ```vue @@ -88,10 +91,3 @@ 1. **仅用于组合**：此组件仅用于包裹多个 `FaKbd`，不建议单独使用 2. **间距自动**：内部的 `FaKbd` 会自动添加适当间距 3. **灵活内容**：除了 `FaKbd` 外，也可以放入其他内容（如分隔符） - -## 典型使用场景 - -- 快捷键组合展示 -- 键盘操作说明 -- 命令面板提示 -- 帮助文档中的多键组合说明 diff --git a/packages/components/src/kbd/README.md b/packages/components/src/kbd/README.md old mode 100755 new mode 100644 index 1c20f9b4..d52e3253 --- a/packages/components/src/kbd/README.md +++ b/packages/components/src/kbd/README.md @@ -2,14 +2,12 @@ 用于展示键盘按键组合的视觉样式，常用于快捷键提示。 -## 基础用法 +## 使用场景 -```vue - -``` +- 快捷键提示 +- 操作指南中的按键说明 +- 命令面板的快捷键展示 +- 帮助文档中的键盘操作说明 ## Props @@ -23,12 +21,17 @@ |------|------| | `default` | 按键内容（字符、图标等） | -## Events - -无 - ## 示例 +### 基础用法 + +```vue + +``` + ### 单个按键 ```vue @@ -77,7 +80,9 @@ ``` -## 样式特点 +## 注意事项 + +### 样式特点 - 小号字体（`text-xs`） - 中等字重（`font-medium`） @@ -85,15 +90,6 @@ - 内边距适当 - 支持 SVG 图标（自动调整尺寸） -## 注意事项 - 1. **配合使用**：组合按键时请使用 `FaKbdGroup` 包裹多个 `FaKbd` 2. **内容长度**：按键内容不宜过长，适合单个字符或简短单词 3. **图标支持**：可以使用 `FaIcon` 组件显示图标，图标会自动调整为合适尺寸 - -## 典型使用场景 - -- 快捷键提示 -- 操作指南中的按键说明 -- 命令面板的快捷键展示 -- 帮助文档中的键盘操作说明 diff --git a/packages/components/src/label/README.md b/packages/components/src/label/README.md old mode 100755 new mode 100644 index 8954a683..0d44e623 --- a/packages/components/src/label/README.md +++ b/packages/components/src/label/README.md @@ -2,15 +2,12 @@ 表单标签组件，支持固定宽度标签和自定义内容，用于表单字段的标签显示。 -## 基础用法 +## 使用场景 -```vue - -``` +- 表单字段标签 +- 多列表单布局 +- 需要固定标签宽度的表单 +- 表单项的组合布局 ## Props @@ -26,12 +23,18 @@ |------|------| | `default` | 表单项内容（输入框、选择器等） | -## Events - -无 - ## 示例 +### 基础用法 + +```vue + +``` + ### 基础标签 ```vue @@ -106,10 +109,3 @@ 2. **标签对齐**：多个表单项使用相同的 `labelWidth` 可实现标签对齐 3. **无 label 属性**：不设置 `label` 属性时，仅作为布局容器使用 - -## 典型使用场景 - -- 表单字段标签 -- 多列表单布局 -- 需要固定标签宽度的表单 -- 表单项的组合布局 diff --git a/packages/components/src/modal/README.md b/packages/components/src/modal/README.md old mode 100755 new mode 100644 index 832397ee..906c0c05 --- a/packages/components/src/modal/README.md +++ b/packages/components/src/modal/README.md @@ -2,20 +2,14 @@ 模态对话框组件，支持拖拽、最大化、自定义内容和多种显示模式。 -## 基础用法 +## 使用场景 -```vue - - - -``` +- 确认对话框 +- 表单编辑 +- 详情展示 +- 消息提示（alert） +- 警告提示 +- 配置设置 ## Props @@ -75,12 +69,84 @@ const open = ref(false) | `confirm` | 点击确定按钮时触发 | | `cancel` | 点击取消按钮时触发 | -## Exposed Methods +## API -无 +### 函数式调用 + +```vue + + + +``` ## 示例 +### 基础用法 + +```vue + + + +``` + ### 基础对话框 ```vue @@ -281,65 +347,6 @@ function handleSubmit() { ``` -## 函数式调用 - -```vue - - - -``` - ## 注意事项 1. **v-model 绑定**：使用 `v-model` 控制对话框打开状态 @@ -348,12 +355,3 @@ function showWarning() { 4. **拖拽限制**：拖拽仅在有标题栏且非最大化状态下有效 5. **动画事件**：`opened` 和 `closed` 在动画完成后触发 6. **函数式调用**：`useFaModal()` 提供 `info`、`success`、`warning`、`error`、`confirm` 方法 - -## 典型使用场景 - -- 确认对话框 -- 表单编辑 -- 详情展示 -- 消息提示（alert） -- 警告提示 -- 配置设置 diff --git a/packages/components/src/number-field/README.md b/packages/components/src/number-field/README.md old mode 100755 new mode 100644 index a03df445..64112a0c --- a/packages/components/src/number-field/README.md +++ b/packages/components/src/number-field/README.md @@ -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 - - -``` +- 数据列表分页 +- 表格分页 +- 搜索结果分页 +- 文章列表分页 +- 评论列表分页 ## Props @@ -33,12 +27,22 @@ const total = ref(100) | `pageChange` | `page: number` | 页码变化时触发 | | `sizeChange` | `size: number` | 每页条数变化时触发 | -## Slots - -无 - ## 示例 +### 基础用法 + +```vue + + + +``` + ### 基础分页 ```vue @@ -198,7 +202,9 @@ watch([page, size], loadData) ``` -## 布局配置说明 +## 注意事项 + +### 布局配置说明 `layout` 属性控制分页组件的布局和元素顺序，支持以下元素： @@ -223,18 +229,8 @@ watch([page, size], loadData) ``` -## 注意事项 - 1. **必需属性**：`total`、`page`、`size` 为必需属性 2. **双向绑定**：`page` 和 `size` 支持 `v-model` 双向绑定 3. **页码范围**：跳转页码会自动限制在有效范围内 4. **自动聚焦**：跳转输入框获得焦点时会自动选中文本 5. **回车跳转**：在跳转输入框中按回车键可触发跳转 - -## 典型使用场景 - -- 数据列表分页 -- 表格分页 -- 搜索结果分页 -- 文章列表分页 -- 评论列表分页 diff --git a/packages/components/src/password-strength/README.md b/packages/components/src/password-strength/README.md old mode 100755 new mode 100644 index 89766d64..eb02f239 --- a/packages/components/src/password-strength/README.md +++ b/packages/components/src/password-strength/README.md @@ -2,7 +2,23 @@ 实时显示密码强度指示，帮助用户创建更安全的密码。 -## 基础用法 +## 使用场景 + +- 用户注册密码设置 +- 修改密码页面 +- 重置密码表单 +- 账号安全设置 +- 密码强度要求提示 + +## Props + +| 属性 | 类型 | 默认值 | 说明 | +|------|------|--------|------| +| `password` | `string` | `''` | 密码值 | + +## 示例 + +### 基础用法 ```vue @@ -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. **国际化**：组件内置多语言支持 - -## 典型使用场景 - -- 用户注册密码设置 -- 修改密码页面 -- 重置密码表单 -- 账号安全设置 -- 密码强度要求提示 diff --git a/packages/components/src/popover/README.md b/packages/components/src/popover/README.md old mode 100755 new mode 100644 index ab2f4d4c..a32bfaa6 --- a/packages/components/src/popover/README.md +++ b/packages/components/src/popover/README.md @@ -2,24 +2,14 @@ 灵活的弹出容器组件，支持自定义内容和多种弹出位置。 -## 基础用法 +## 使用场景 -```vue - - - -``` +- 高级筛选面板 +- 快速操作面板 +- 信息详情卡片 +- 颜色/日期选择器 +- 简易表单弹窗 +- 上下文信息展示 ## Props @@ -40,12 +30,27 @@ const open = ref(false) | `default` | 触发元素 | | `panel` | 弹出面板内容 | -## Events - -无 - ## 示例 +### 基础用法 + +```vue + + + +``` + ### 基础弹出框 ```vue @@ -208,12 +213,3 @@ const form = ref({ name: '', email: '' }) 3. **自动定位**：组件会自动调整位置避免超出视口 4. **焦点管理**：打开时会自动阻止焦点自动聚焦到弹出内容 5. **点击外部**：点击弹出框外部会自动关闭 - -## 典型使用场景 - -- 高级筛选面板 -- 快速操作面板 -- 信息详情卡片 -- 颜色/日期选择器 -- 简易表单弹窗 -- 上下文信息展示 diff --git a/packages/components/src/progress/README.md b/packages/components/src/progress/README.md old mode 100755 new mode 100644 index 5cd5d774..312630b9 --- a/packages/components/src/progress/README.md +++ b/packages/components/src/progress/README.md @@ -2,7 +2,30 @@ 线性进度条组件，展示任务的完成进度。 -## 基础用法 +## 使用场景 + +- 文件上传/下载进度 +- 任务处理进度 +- 加载进度 +- 安装/更新进度 +- 表单提交进度 +- 多步骤流程进度 + +## Props + +| 属性 | 类型 | 默认值 | 说明 | +|------|------|--------|------| +| `class` | `HTMLAttributes['class']` | - | 自定义 CSS 类 | + +### Model + +| 名称 | 类型 | 默认值 | 说明 | +|------|------|--------|------| +| `modelValue` | `number` | `0` | 进度值（0-100） | + +## 示例 + +### 基础用法 ```vue - - -``` +- 列表页面筛选区 +- 高级搜索表单 +- 数据查询条件 +- 报表筛选选区 +- 可折叠的表单区域 ## Props @@ -43,6 +32,25 @@ const fold = ref(true) ## 示例 +### 基础用法 + +```vue + + + +``` + ### 基础搜索栏 ```vue @@ -242,11 +250,3 @@ const showAdvanced = ref(false) 2. **折叠按钮**：默认在底部显示折叠/展开按钮 3. **双向绑定**：`fold` 支持 `v-model` 双向绑定 4. **内容控制**：需要在 slot 内根据 `fold` 值控制内容的显示 - -## 典型使用场景 - -- 列表页面筛选区 -- 高级搜索表单 -- 数据查询条件 -- 报表筛选选区 -- 可折叠的表单区域 diff --git a/packages/components/src/select/README.md b/packages/components/src/select/README.md old mode 100755 new mode 100644 index 5ed201d4..80944cf6 --- a/packages/components/src/select/README.md +++ b/packages/components/src/select/README.md @@ -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 +- 滑块组件，基于 Reka UI 的 Slider 组件封装，支持单选和多选。 +- 常见用法：垂直滑块、范围选择、自定义步长。 - -``` - -## 垂直滑块 - -```vue - - - -``` - -## API - -### Props +## Props | 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| @@ -43,20 +22,44 @@ const value = ref([0]) | thumbAlignment | 滑块对齐方式 | `'contain' \| 'cover'` | `'contain'` | | tooltip | 是否显示提示 | `boolean` | `true` | -### Events - -| 事件名 | 说明 | 回调参数 | -|--------|------|----------| -| update:modelValue | 值更新时触发 | `(value: number[])` | - -### Slots +## Slots | 名称 | 说明 | |------|------| | - | 无插槽 | +## Events + +| 事件名 | 说明 | 回调参数 | +|--------|------|----------| +| update:modelValue | 值更新时触发 | `(value: number[])` | + ## 示例 +### 基础用法 + +```vue + + + +``` + +### 垂直滑块 + +```vue + + + +``` + ### 范围选择 ```vue @@ -80,3 +83,7 @@ const value = ref([50]) ``` + +## 注意事项 + +- 无特殊限制，建议按示例中的受控方式接入，并结合业务容器尺寸验证最终展示效果。 diff --git a/packages/components/src/switch/README.md b/packages/components/src/switch/README.md old mode 100755 new mode 100644 index 154ca7b0..0d61508a --- a/packages/components/src/switch/README.md +++ b/packages/components/src/switch/README.md @@ -2,17 +2,13 @@ 开关切换组件，支持图标和状态变化前的回调处理。 -## 基础用法 +## 使用场景 -```vue - - - -``` +- 深色模式切换 +- 通知设置开关 +- 功能启用/禁用 +- 布尔值配置项 +- 快速状态切换 ## Props @@ -23,20 +19,24 @@ const enabled = ref(false) | `offIcon` | `string` | - | 关闭状态图标 | | `beforeChange` | `() => boolean \| Promise` | - | 状态变化前回调 | -## Slots - -无 - ## Events 通过 `v-model` 双向绑定，无需单独事件 -## Exposed Methods - -无 - ## 示例 +### 基础用法 + +```vue + + + +``` + ### 基础开关 ```vue @@ -157,11 +157,3 @@ const settings = reactive({ 3. **异步确认**：`beforeChange` 支持返回 Promise，可用于异步确认操作 4. **取消变化**：`beforeChange` 返回 false 或 Promise resolve false 时，状态不会改变 5. **禁用状态**：禁用状态下开关无法点击，也无法切换状态 - -## 典型使用场景 - -- 深色模式切换 -- 通知设置开关 -- 功能启用/禁用 -- 布尔值配置项 -- 快速状态切换 diff --git a/packages/components/src/tabs/README.md b/packages/components/src/tabs/README.md old mode 100755 new mode 100644 index fc7d1dd3..4cde25bb --- a/packages/components/src/tabs/README.md +++ b/packages/components/src/tabs/README.md @@ -2,26 +2,13 @@ 标签页切换组件，支持图标和自定义样式。 -## 基础用法 +## 使用场景 -```vue - - - -``` +- 设置页面分类 +- 详情信息分栏 +- 数据视图切换（列表/图表） +- 表单分步 +- 内容分类展示 ## Props @@ -47,6 +34,27 @@ const list = [ ## 示例 +### 基础用法 + +```vue + + + +``` + ### 基础标签页 ```vue @@ -207,11 +215,3 @@ const list = [ 2. **value 唯一性**：确保每个标签的 `value` 唯一 3. **类型支持**：`value` 支持字符串和数字两种类型 4. **图标可选**：标签可以设置图标也可以不设置 - -## 典型使用场景 - -- 设置页面分类 -- 详情信息分栏 -- 数据视图切换（列表/图表） -- 表单分步 -- 内容分类展示 diff --git a/packages/components/src/textarea/README.md b/packages/components/src/textarea/README.md old mode 100755 new mode 100644 index 61cfd220..1db076be --- a/packages/components/src/textarea/README.md +++ b/packages/components/src/textarea/README.md @@ -2,17 +2,13 @@ 多行文本输入组件，支持前后缀插槽和自定义样式。 -## 基础用法 +## 使用场景 -```vue - - - -``` +- 文章/内容编辑器 +- 评论输入框 +- 意见反馈 +- 多行表单字段 +- 代码/文本展示 ## Props @@ -31,16 +27,20 @@ const value = ref('') | `start` | 文本域前缀内容 | | `end` | 文本域后缀内容 | -## Events - -无 - -## Exposed Methods - -无 - ## 示例 +### 基础用法 + +```vue + + + +``` + ### 基础文本域 ```vue @@ -161,11 +161,3 @@ const isOverLimit = computed(() => charCount.value > maxLength) 3. **自动调整**：可通过 CSS 实现自动高度调整 4. **对齐方式**：`align="block"` 时前后缀会上下排列 5. **滚动行为**：超出高度时自动显示滚动条 - -## 典型使用场景 - -- 文章/内容编辑器 -- 评论输入框 -- 意见反馈 -- 多行表单字段 -- 代码/文本展示 diff --git a/packages/components/src/toast/README.md b/packages/components/src/toast/README.md old mode 100755 new mode 100644 index e40242c6..a1197b00 --- a/packages/components/src/toast/README.md +++ b/packages/components/src/toast/README.md @@ -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