feat: 增加 skills

Author: hooray

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

@@ -0,0 +1,39 @@
+---
+name: fm-framework-settings
+description: 管理和配置 Fantastic-mobile 框架设置。当用户提到以下任何需求时必须使用此技能：开启/关闭权限功能、哀悼模式；切换暗色/亮色/跟随系统颜色方案、调整圆角、启用色弱模式；配置顶部导航栏（navbar）启用状态；配置底部标签栏（tabbar）启用状态和导航菜单列表；调整进度条、返回顶部；设置底部版权信息；以及任何涉及 apps/*/src/settings/index.ts 的修改。
+---
+
+# 框架设置
+
+## 第一步：确认工作区
+
+本项目是 monorepo 架构，`apps/` 目录下存放各应用。**在开始任何操作前，先执行 `ls apps/` 查看当前有哪些应用，然后询问用户要修改的是哪个**，除非用户已在对话中明确说明。
+
+确认后，后续所有文件路径均以该应用目录为根，例如 `apps/core/src/settings/index.ts`。
+
+## 核心文件
+
+以下路径中的 `<app>` 替换为实际应用名：
+
+- `apps/<app>/src/types/global.d.ts` - TypeScript 类型定义（只读参考）
+- `apps/<app>/src/settings/index.ts` - 当前配置文件（修改此文件）
+- `apps/<app>/src/settings/default.ts` - 默认完整配置（禁止修改，仅供参考）
+
+## 工作流程
+
+1. **确认应用**：参见上方"确认工作区"，得到 `<app>` 后再继续
+2. 读取 `apps/<app>/src/settings/index.ts` 了解当前配置
+3. 查阅 `apps/<app>/src/types/global.d.ts` 中的类型定义了解可用选项
+4. 查阅 `apps/<app>/src/settings/default.ts` 了解默认值
+5. 仅修改 `apps/<app>/src/settings/index.ts`
+6. 修改后检查：与默认值相同的配置项直接移除——`index.ts` 只需保留真正自定义的内容，框架会自动继承默认配置，这样维护时一眼就能看出哪些是项目定制的
+
+## 配置领域
+
+详细配置选项请参考：
+- **应用设置**: [references/app-settings.md](references/app-settings.md) - 权限、水印、错误日志、哀悼模式、默认语言等
+- **主题设置**: [references/theme-settings.md](references/theme-settings.md) - 颜色方案、主题同步、圆角、色弱模式等
+- **顶部导航栏**: [references/navbar-settings.md](references/navbar-settings.md) - 启用状态、显示模式等
+- **底部标签栏**: [references/tabbar-settings.md](references/tabbar-settings.md) - 启用状态、显示模式、导航菜单列表等
+- **页面设置**: [references/page-settings.md](references/page-settings.md) - 切换动画、进度条、返回顶部等
+- **版权设置**: [references/copyright-settings.md](references/copyright-settings.md) - 版权开关、日期、公司、网站等

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

@@ -0,0 +1,45 @@
+# 应用设置 (app)
+
+## auth
+
+- **类型**: `boolean`
+- **默认值**: `false`
+- **说明**: 是否开启权限功能
+
+## dynamicTitle
+
+- **类型**: `boolean`
+- **默认值**: `false`
+- **说明**: 是否启用动态页面标题（根据当前路由自动更新 document.title）
+
+## rip
+
+- **类型**: `boolean`
+- **默认值**: `false`
+- **说明**: 哀悼模式，开启后网站将整体变灰
+
+## 完整示例
+
+```typescript
+app: {
+  auth: true,
+  dynamicTitle: true,
+  rip: false,
+}
+```
+
+## 常见配置
+
+**开启权限功能:**
+```typescript
+app: {
+  auth: true,
+}
+```
+
+**开启哀悼模式:**
+```typescript
+app: {
+  rip: true,
+}
+```

.agents/skills/fm-framework-settings/references/copyright-settings.md

@@ -0,0 +1,38 @@
+# 版权设置 (copyright)
+
+底部版权信息配置。
+
+## enable
+
+- **类型**: `boolean`
+- **默认值**: `false`
+- **说明**: 是否开启底部版权信息显示。也可在路由 meta 中单独控制某个页面是否显示版权信息
+
+## dates
+
+- **类型**: `string`
+- **默认值**: `''`
+- **说明**: 网站运行日期，例如 `'2024-present'`
+
+## company
+
+- **类型**: `string`
+- **默认值**: `''`
+- **说明**: 版权信息中显示的公司/项目名称
+
+## website
+
+- **类型**: `string`
+- **默认值**: `''`
+- **说明**: 版权信息中显示的网站地址
+
+## 完整示例
+
+```typescript
+copyright: {
+  enable: true,
+  dates: '2024-present',
+  company: 'My Company',
+  website: 'https://example.com',
+}
+```

.agents/skills/fm-framework-settings/references/navbar-settings.md

@@ -0,0 +1,17 @@
+# 顶部导航栏设置 (navbar)
+
+移动端顶部导航栏配置。
+
+## enable
+
+- **类型**: `boolean`
+- **默认值**: `false`
+- **说明**: 是否启用顶部导航栏
+
+## 完整示例
+
+```typescript
+navbar: {
+  enable: true,
+}
+```

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

@@ -0,0 +1,32 @@
+# 页面设置 (page)
+
+## progress
+
+- **类型**: `boolean`
+- **默认值**: `true`
+- **说明**: 是否显示页面载入进度条
+
+## backTop
+
+- **类型**: `boolean`
+- **默认值**: `true`
+- **说明**: 是否显示返回顶部按钮
+
+## 完整示例
+
+```typescript
+page: {
+  progress: true,
+  backTop: true,
+}
+```
+
+## 常见配置
+
+**禁用进度条和返回顶部:**
+```typescript
+page: {
+  progress: false,
+  backTop: false,
+}
+```

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

@@ -0,0 +1,48 @@
+# 底部标签栏设置 (tabbar)
+
+移动端底部导航栏配置。
+
+## enable
+
+- **类型**: `boolean`
+- **默认值**: `false`
+- **说明**: 是否启用底部标签栏
+
+## list
+
+- **类型**: `tabbarListItem[]`
+- **默认值**: `[]`
+- **说明**: 底部导航菜单项列表
+
+### tabbarListItem 字段
+
+| 字段 | 类型 | 必填 | 说明 |
+|------|------|------|------|
+| `path` | `string` | 是 | 路由路径（来自 vue-router auto-routes） |
+| `icon` | `string` | 否 | 未激活时的图标 |
+| `activeIcon` | `string` | 否 | 激活时的图标 |
+| `text` | `string` | 否 | 显示文字，支持 i18n key |
+
+## 完整示例
+
+```typescript
+import { $t } from '@/locales'
+
+tabbar: {
+  enable: true,
+  list: [
+    {
+      path: '/',
+      icon: 'i-ic:sharp-home',
+      activeIcon: 'i-ic:twotone-home',
+      text: $t('tabbar.index'),
+    },
+    {
+      path: '/user/',
+      icon: 'i-ic:baseline-person',
+      activeIcon: 'i-ic:twotone-person',
+      text: $t('tabbar.user'),
+    },
+  ],
+}
+```

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

@@ -0,0 +1,58 @@
+# 主题设置 (theme)
+
+## colorScheme
+
+- **类型**: `'' | 'light' | 'dark'`
+- **默认值**: `'light'`
+- **说明**: 颜色方案
+  - `'light'` - 明亮模式
+  - `'dark'` - 暗黑模式
+  - `''` - 跟随系统
+
+## radius
+
+- **类型**: `number`
+- **默认值**: `0.5`
+- **说明**: 圆角系数，取值范围 0 到 1
+  - `0` - 无圆角（方形）
+  - `0.5` - 中等圆角
+  - `1` - 最大圆角
+
+## colorAmblyopia
+
+- **类型**: `boolean`
+- **默认值**: `false`
+- **说明**: 色弱模式，启用后使用色弱友好的颜色方案
+
+## 完整示例
+
+```typescript
+theme: {
+  colorScheme: 'light',
+  radius: 0.5,
+  colorAmblyopia: false,
+}
+```
+
+## 常见配置
+
+**跟随系统颜色方案:**
+```typescript
+theme: {
+  colorScheme: '',
+}
+```
+
+**强制暗色模式:**
+```typescript
+theme: {
+  colorScheme: 'dark',
+}
+```
+
+**调大圆角:**
+```typescript
+theme: {
+  radius: 0.8,
+}
+```

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

@@ -0,0 +1,66 @@
+---
+name: fm-page-optimizer
+description: "优化 Vue 页面，用 Fantastic-mobile 框架内建组件（src/ui/components/）替换自定义实现和原生 HTML。当用户说：'帮我优化这个页面'、'把这些原生 HTML 换成框架组件'、'用 FmCard/FmModal/FmButton 重构一下'、'这个页面太乱了'、'统一一下 UI 风格'、'用内建组件替换自定义弹窗/加载'，即使用户只是说'看看这个页面能不能改进'也应触发此技能。"
+---
+
+# 页面优化器
+
+利用 Fantastic-mobile 的内建组件优化 Vue 页面，用框架组件替换自定义实现，减少重复代码，保持 UI 一致性。
+
+## 第一步：确认工作区
+
+本项目是 monorepo 架构，执行 `ls apps/` 查看可用应用，然后询问用户要修改哪个，除非对话中已明确说明。后续所有文件路径以 `apps/<app>/` 为根。
+
+## 优化工作流
+
+### 步骤 1: 分析页面，识别替换机会
+
+读取目标页面，找出三类可优化点：
+
+- **原生 HTML 元素**：`<button>`、`<input>`、`<select>`、自定义卡片 div 等
+- **重复造轮子的自定义组件**：自定义弹窗、加载状态、提示消息等
+- **可简化的内联逻辑**：手动标签页切换、手动状态管理等
+
+### 步骤 2: 查找合适的框架组件
+
+先查组件目录确认有哪些可用组件：
+
+```
+Read: references/components-catalog.md
+```
+
+确定组件后，读取对应 README 了解完整 API（props、slots、events）：
+
+```
+Read: apps/<app>/src/ui/components/Fm[ComponentName]/README.md
+```
+
+README 是最权威的用法来源，不确定时优先看文档而不是猜。
+
+### 步骤 3: 参考优化模式（可选）
+
+如果不确定如何替换，查看前后对比示例：
+
+```
+Read: references/optimization-patterns.md
+```
+
+### 步骤 4: 实施替换
+
+替换时保留所有原始功能，不要改变业务逻辑。框架组件提供组合式函数用于编程式控制，优先使用：
+
+- `useFmModal()` — 编程式打开/关闭弹窗、confirm 确认框
+- `fmToast` — 显示成功/错误提示（从 `@/ui/components/FmToast` 导入）
+- `useFmLoading()` — 控制加载遮罩
+
+组件可以组合使用，例如：
+
+```vue
+<FmCard title="用户列表">
+  <FmButton @click="handleAdd">新增</FmButton>
+</FmCard>
+```
+
+### 步骤 5: 验证
+
+替换后确认导入路径正确（`@/ui/components/Fm[ComponentName]`），props 和 v-model 绑定符合组件 API。如有问题，回到组件 README 核对。