OneUI Components - 组件文档离线查询助手
OneUI (Guadalcanal) 组件库完整离线文档系统。包含 80 个组件的元数据索引和完整使用文档（Props、Events、Slots、Methods、代码示例、设计说明、FAQ），通过 BM25 搜索引擎快速定位。所有文档已存储在本地，不依赖任何外部网络资源。
When to Apply
当用户需要以下场景时使用此 Skill：
- 查询某个 OneUI/Gua 组件的使用方法、Props、Events、Slots
- 搜索 "用什么组件实现某功能"（如 "下拉选择"、"表格分页"）
- 需要组件的代码示例
- 浏览组件库的分类和组件列表
- 在 Vue 代码中使用 Gua 组件时需要参考文档
组件分类概览
| 分类 | 数量 | 典型组件 |
|---|---|---|
| 反馈 | 9 | Alert, Dialog, Drawer, Message, Message-box, Result |
| 数据展示 | 10 | Table, Base-table, Card, Tree, Tag, Collapse, List |
| 布局 | 5 | Block, Container, Layout, Side, Block-container |
| 导航 | 9 | Button, Breadcrumb, Tabs, Steps, Link, Pagi, Capsule |
| 列表布局 | 5 | Cardlist, Flexcol, Flexrow, Grid-layout, Overflow |
| 表单 | 21 | Form, Input, Select, Checkbox, Radio, Date, Upload, Transfer |
| 工具 | 4 | Cron, Divider, Spliter, Watermark |
| Facet | 2 | Facet-dataset, Facet-description |
| 页头 | 9 | Head, Head-odf, Head-olf, Header, Key-value, Standard-button |
| 工具栏 | 3 | Toolbar, Floating-toolbar, Footer-toolbar |
| 其他 | 3 | Json-editor, Time, Utils |
How to Use
Step 1: 确定用户需求
从用户请求中提取：
- 组件名称：用户是否已知道具体组件（如 "GuaTable 怎么用"）
- 功能需求：用户描述的功能（如 "我需要一个可编辑的表格"）
- 具体 API：用户是否只需要某个部分（如 "Table 的 Props"）
Step 2: 使用搜索脚本查询
根据需求选择合适的命令：
A. 关键词搜索（不知道组件名时）
python3 .github/skills/oneui-components/scripts/search.py "表格 分页 排序"
python3 .github/skills/oneui-components/scripts/search.py "下拉选择 远程搜索"
B. 查看完整组件文档（知道组件名时）
python3 .github/skills/oneui-components/scripts/search.py --doc table
# 同时查看多个组件
python3 .github/skills/oneui-components/scripts/search.py --doc table button alert
C. 查看特定 API 段落（只需 Props/Events 等）
# 查看 Props
python3 .github/skills/oneui-components/scripts/search.py --doc table --section props
# 查看 Events
python3 .github/skills/oneui-components/scripts/search.py --doc table --section events
# 查看基本用法
python3 .github/skills/oneui-components/scripts/search.py --doc alert --section basic_usage
# 查看高级用法
python3 .github/skills/oneui-components/scripts/search.py --doc table --section advanced_usage
# 查看常见问题
python3 .github/skills/oneui-components/scripts/search.py --doc button --section faq
可用的 section 值：intro, when_to_use, basic_usage, advanced_usage, props, events, slots, methods, typescript, design, faq, extra, all
D. 快速查找（概要 + Props 表）
python3 .github/skills/oneui-components/scripts/search.py --name table
E. 按分类浏览
# 列出所有组件
python3 .github/skills/oneui-components/scripts/search.py --list
# 列出某分类
python3 .github/skills/oneui-components/scripts/search.py --list --category 表单
Step 3: 直接回答用户
基于本地文档内容，向用户提供：
1. 组件名称和用途
2. 关键 Props / Events / Slots / Methods 表格
3. Vue 代码示例（从本地 usage/advanced section 获取）
4. 注意事项和 FAQ
> 无需访问任何外部 URL，所有信息均来自本地文档。
CLI 命令速查
| 命令 | 用途 |
|---|---|
search.py "关键词" |
BM25 关键词搜索 |
search.py --name <name> |
快速查找（概要 + Props） |
search.py --doc <name> |
完整本地文档 |
search.py --doc <name> --section props |
仅 Props 表格 |
search.py --doc <name> --section events |
仅 Events 表格 |
search.py --doc <name> --section slots |
仅 Slots 表格 |
search.py --doc <name> --section methods |
仅 Methods 表格 |
search.py --doc <name> --section basic_usage |
基本用法示例 |
search.py --doc <name> --section advanced_usage |
高级用法示例 |
search.py --doc <name> --section faq |
常见问题 |
search.py --doc <name> --section all |
全文 |
search.py --list |
列出所有组件 |
search.py --list --category <cat> |
按分类列出 |
搜索关键词示例
| 用户需求 | 推荐搜索 |
|---|---|
| 弹窗/对话框 | "dialog 弹窗 模态" |
| 下拉选择 | "select 下拉 选择器" |
| 表格/列表 | "table 表格 分页" |
| 表单验证 | "form 表单 验证" |
| 文件上传 | "upload 上传 文件" |
| 日期选择 | "date 日期 日历" |
| 树形组件 | "tree 树形 层级" |
| 步骤引导 | "steps 步骤 向导" |
| 穿梭框 | "transfer 穿梭 选择" |
| 远程搜索 | "select-remote 远程 搜索" |
| 数据字典 | "dict 字典 码表" |
| 可编辑表格 | "table 行编辑 编辑" |
| 表格导出 | "table 导出 export" |
分类名称：反馈, 数据展示, 布局, 导航, 列表布局, 表单, 工具, Facet, 页头, 工具栏, 其他
Example Workflows
场景 1: "GuaTable 怎么用分页"
python3 .github/skills/oneui-components/scripts/search.py --doc table --section props
直接从本地文档获取 enablePagination、paginationConfig、useExternalPagination 等属性说明，给出代码示例。
场景 2: "有没有可以远程搜索的选择器"
python3 .github/skills/oneui-components/scripts/search.py "远程搜索 选择器"
搜索结果匹配 select-remote，然后：
python3 .github/skills/oneui-components/scripts/search.py --doc select-remote --section basic_usage
场景 3: "Button 有哪些类型"
python3 .github/skills/oneui-components/scripts/search.py --doc button --section props
场景 4: "表单类组件有哪些"
python3 .github/skills/oneui-components/scripts/search.py --list --category 表单
高频组件速查
| 组件 | 名称 | 典型用法 |
|---|---|---|
| table | GuaTable | <gua-table :columnDefs="cols" :data="rows" :enablePagination="true" /> |
| button | GuaButton | <gua-button type="primary" layout="text" text="确定" /> |
| form | GuaForm | <gua-form :model="form" :rules="rules" /> |
| input | GuaInput | <gua-input v-model="value" /> |
| select | GuaSelect | <gua-select v-model="value" :options="opts" /> |
| dialog | GuaDialog | <gua-dialog v-model="visible" title="标题" /> |
| tabs | GuaTabs | <gua-tabs v-model="active" :tabs="tabList" /> |
| alert | GuaAlert | <gua-alert type="warning" title="提示" message="内容" /> |
数据文件说明
| 文件 | 说明 |
|---|---|
data/components.csv |
80 组件的元数据索引（名称、分类、关键词、概述、关键 API） |
data/component-docs.csv |
80 组件完整文档（intro/props/events/slots/methods/usage/faq 等 12 列） |
scripts/core.py |
BM25 搜索引擎 + CSV 数据加载器 |
scripts/search.py |
CLI 命令行工具 |
scripts/scrape_docs.py |
文档抓取脚本（从在线文档站拉取 md，用于数据更新） |
scripts/convert_docs_to_csv.py |
将 md 文档转换为 component-docs.csv（用于数据更新） |
更新本地文档
如需更新组件文档（新版本发布后）：
# 1. 重新抓取所有组件文档（生成 data/docs/*.md 临时文件）
python3 .github/skills/oneui-components/scripts/scrape_docs.py
# 2. 将 md 转换为 CSV
python3 .github/skills/oneui-components/scripts/convert_docs_to_csv.py
# 3. 抓取完成后可删除临时 md 文件
rm -rf .github/skills/oneui-components/data/docs/
