element-plus-skills

Element Plus 技能库

这是一个全面的 Element Plus UI 框架技能库，旨在帮助 AI Agent 理解并有效使用 Element Plus 组件。

何时调用

在以下情况下调用此技能：

• 用户需要实现任何 Element Plus 组件
• 用户询问 Element Plus 的配置或设置
• 用户想要自定义主题或使用暗色模式
• 用户需要国际化（i18n）支持
• 用户询问设计规范（颜色、边框、排版）
• 用户遇到 Element Plus 组件相关问题

技能库概览

此库包含 88 项技能，分为以下类别：

类别	数量	描述	路径模式
组件技能	77	单个组件文档	./components/el-{name}/SKILL.md
设计规范	5	边框、颜色、布局、排版、概览	./element-plus-design-{name}/SKILL.md
基础技能	6	快速入门、主题设置、i18n、暗色模式、SSR、组件	./element-plus-{name}/SKILL.md

如何查找技能

1. 组件技能（77 项技能）

所有组件技能均遵循 el-{component-name} 命名约定，存放在 components/ 目录中。

路径模式：

./components/el-{component-name}/SKILL.md

示例：

• 按钮：./components/el-button/SKILL.md
• 表单：./components/el-form/SKILL.md
• 表格：./components/el-table/SKILL.md
• 对话框：./components/el-dialog/SKILL.md

2. 设计规范技能（5 项技能）

设计技能提供有关 Element Plus 设计系统的指导。

技能名称	路径	描述
边框	./element-plus-design-border/SKILL.md	边框样式、圆角、阴影
颜色	./element-plus-design-color/SKILL.md	调色板和颜色语义
布局	./element-plus-design-layout/SKILL.md	24 列栅格系统
排版	./element-plus-design-typography/SKILL.md	字体规范
概览	./element-plus-design-overview/SKILL.md	设计系统概览

3. 基础技能（6 项技能）

基础技能涵盖核心设置和配置。

技能名称	路径	描述
快速入门	./element-plus-quickstart/SKILL.md	安装和设置
主题设置	./element-plus-theming/SKILL.md	主题自定义
i18n	./element-plus-i18n/SKILL.md	国际化
暗色模式	./element-plus-dark-mode/SKILL.md	暗色模式实现
SSR	./element-plus-ssr/SKILL.md	服务端渲染
组件	./element-plus-components/SKILL.md	组件概览索引

技能调用指南

步骤 1：识别用户意图

分析用户的请求，确定所需的技能类别：

用户请求模式	技能类别	技能示例
“创建按钮/表单/表格……”	组件	el-button、el-form、el-table
“如何设置 Element Plus”	基础	element-plus-quickstart
“自定义主题颜色”	基础	element-plus-theming
“添加多语言支持”	基础	element-plus-i18n
“实现暗色模式”	基础	element-plus-dark-mode
“有哪些可用颜色？”	设计	element-plus-design-color
“栅格如何工作？”	设计	element-plus-design-layout

步骤 2：查找技能文件

使用上述路径模式查找相应的技能文件：

# For component skills
./components/el-{component-name}/SKILL.md

# For design skills
./element-plus-design-{name}/SKILL.md

# For foundation skills
./element-plus-{name}/SKILL.md

步骤 3：阅读并应用技能内容

每个技能文件都包含：

• 何时调用：使用该技能的具体条件
• 功能：组件能力和选项
• API 参考：属性、事件、插槽、暴露内容
• 使用示例：常见模式的代码片段
• 最佳实践：推荐的实现指南

组件技能索引

基础组件（14）

组件	技能路径	描述
Affix	./components/el-affix/SKILL.md	粘性定位
Alert	./components/el-alert/SKILL.md	警告消息
Anchor	./components/el-anchor/SKILL.md	锚点导航
Avatar	./components/el-avatar/SKILL.md	用户头像
Backtop	./components/el-backtop/SKILL.md	返回顶部按钮
Badge	./components/el-badge/SKILL.md	徽章和标记
Breadcrumb	./components/el-breadcrumb/SKILL.md	面包屑导航
Button	./components/el-button/SKILL.md	按钮
Card	./components/el-card/SKILL.md	卡片容器
Carousel	./components/el-carousel/SKILL.md	图片轮播
Collapse	./components/el-collapse/SKILL.md	可折叠面板
Divider	./components/el-divider/SKILL.md	分隔线
Icon	./components/el-icon/SKILL.md	SVG 图标
Link	./components/el-link/SKILL.md	文本链接
Text	./components/el-text/SKILL.md	样式化文本

表单组件（24）

组件	技能路径	描述
Autocomplete	./components/el-autocomplete/SKILL.md	带建议的输入框
Cascader	./components/el-cascader/SKILL.md	级联选择
Checkbox	./components/el-checkbox/SKILL.md	复选框
ColorPicker	./components/el-color-picker/SKILL.md	颜色选择器
ColorPicker Panel	./components/el-color-picker-panel/SKILL.md	颜色选择器面板
DatePicker	./components/el-date-picker/SKILL.md	日期选择器
DatePicker Panel	./components/el-date-picker-panel/SKILL.md	日期选择器面板
DateTimePicker	./components/el-datetime-picker/SKILL.md	日期时间选择器
Form	./components/el-form/SKILL.md	表单管理
Input	./components/el-input/SKILL.md	文本输入框
InputNumber	./components/el-input-number/SKILL.md	数字输入框
InputTag	./components/el-input-tag/SKILL.md	标签输入框
Mention	./components/el-mention/SKILL.md	提及输入框
Radio	./components/el-radio/SKILL.md	单选按钮
Rate	./components/el-rate/SKILL.md	星级评分
Select	./components/el-select/SKILL.md	下拉选择器
Select V2	./components/el-select-v2/SKILL.md	虚拟化选择器
Slider	./components/el-slider/SKILL.md	滑块输入
Switch	./components/el-switch/SKILL.md	开关
TimePicker	./components/el-time-picker/SKILL.md	时间选择器
TimeSelect	./components/el-time-select/SKILL.md	时间选择
Transfer	./components/el-transfer/SKILL.md	穿梭面板
TreeSelect	./components/el-tree-select/SKILL.md	树形选择器
Upload	./components/el-upload/SKILL.md	文件上传

数据展示组件（17）

组件	技能路径	描述
Calendar	./components/el-calendar/SKILL.md	日历视图
Descriptions	./components/el-descriptions/SKILL.md	描述列表
Empty	./components/el-empty/SKILL.md	空状态
Image	./components/el-image/SKILL.md	带预览的图片
Pagination	./components/el-pagination/SKILL.md	分页
Progress	./components/el-progress/SKILL.md	进度条
Result	./components/el-result/SKILL.md	结果页
Skeleton	./components/el-skeleton/SKILL.md	加载骨架屏
Table	./components/el-table/SKILL.md	数据表格
Table V2	./components/el-table-v2/SKILL.md	虚拟化表格
Tag	./components/el-tag/SKILL.md	标签
Timeline	./components/el-timeline/SKILL.md	时间线
Tree	./components/el-tree/SKILL.md	树视图
Tree V2	./components/el-tree-v2/SKILL.md	虚拟化树
Statistic	./components/el-statistic/SKILL.md	统计信息展示
Segmented	./components/el-segmented/SKILL.md	分段控件

导航组件（8）

组件	技能路径	描述
Dropdown	./components/el-dropdown/SKILL.md	下拉菜单
Menu	./components/el-menu/SKILL.md	导航菜单
PageHeader	./components/el-page-header/SKILL.md	页面标题
Steps	./components/el-steps/SKILL.md	步骤指南
Tabs	./components/el-tabs/SKILL.md	选项卡

反馈组件（12）

组件	技能路径	描述
Dialog	./components/el-dialog/SKILL.md	模态对话框
Drawer	./components/el-drawer/SKILL.md	抽屉面板
Loading	./components/el-loading/SKILL.md	加载遮罩
Message	./components/el-message/SKILL.md	Toast 消息
MessageBox	./components/el-message-box/SKILL.md	消息框
Notification	./components/el-notification/SKILL.md	通知
Popconfirm	./components/el-popconfirm/SKILL.md	气泡确认框
Popover	./components/el-popover/SKILL.md	弹出框
Tooltip	./components/el-tooltip/SKILL.md	文字提示
Tour	./components/el-tour/SKILL.md	产品导览

布局组件（4）

组件	技能路径	描述
Container	./components/el-container/SKILL.md	布局容器
Space	./components/el-space/SKILL.md	间距
Splitter	./components/el-splitter/SKILL.md	分隔面板

工具组件（5）

组件	技能路径	描述
ConfigProvider	./components/el-config-provider/SKILL.md	全局配置
InfiniteScroll	./components/el-infinite-scroll/SKILL.md	无限滚动
Scrollbar	./components/el-scrollbar/SKILL.md	自定义滚动条
Watermark	./components/el-watermark/SKILL.md	水印

使用示例

示例 1：用户询问按钮实现方式

用户请求：“如何创建一个带加载状态的主要按钮？”

Agent 操作：

1. 识别意图：组件技能 - Button
2. 定位技能：./components/el-button/SKILL.md
3. 阅读技能内容
4. 提供包含 API 参考和代码示例的回答

回答：

<template>
  <el-button type="primary" :loading="loading" @click="handleClick">
    {{ loading ? 'Loading...' : 'Submit' }}
  </el-button>
</template>

<script setup>
import { ref } from 'vue'

const loading = ref(false)

const handleClick = async () => {
  loading.value = true
  try {
    await submitData()
  } finally {
    loading.value = false
  }
}
</script>

示例 2：用户询问表单验证

用户请求：“如何创建带验证的表单？”

Agent 操作：

1. 识别意图：组件技能 - Form
2. 定位技能：./components/el-form/SKILL.md
3. 阅读技能内容
4. 提供验证示例

回答：

<template>
  <el-form :model="form" :rules="rules" ref="formRef">
    <el-form-item label="Name" prop="name">
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">Submit</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, reactive } from 'vue'

const formRef = ref()
const form = reactive({
  name: ''
})

const rules = {
  name: [
    { required: true, message: 'Please input name', trigger: 'blur' }
  ]
}

const submitForm = async () => {
  await formRef.value.validate()
  // Submit logic
}
</script>

示例 3：用户询问主题自定义

用户请求：“如何自定义 Element Plus 的主题颜色？”

Agent 操作：

1. 确定意图：基础技能 — 主题
2. 定位技能：./element-plus-theming/SKILL.md
3. 阅读技能内容
4. 使用 CSS 变量示例提供回复

回复：

:root {
  --el-color-primary: #409eff;
  --el-color-success: #67c23a;
  --el-color-warning: #e6a23c;
  --el-color-danger: #f56c6c;
  --el-color-info: #909399;
}

示例 4：用户询问暗黑模式

用户请求：“如何在 Element Plus 中实现暗黑模式？”

Agent 操作：

1. 确定意图：基础技能 — 暗黑模式
2. 定位技能：./element-plus-dark-mode/SKILL.md
3. 阅读技能内容
4. 使用实现示例提供回复

回复：

<template>
  <el-config-provider :locale="locale" :size="size">
    <div :class="{ 'dark': isDark }">
      <App />
    </div>
  </el-config-provider>
</template>

<style>
.dark {
  color-scheme: dark;
}
</style>

配置要求

先决条件

使用此技能库之前，请确保：

1. 已安装 Vue 3.3+
2. 已安装 Element Plus 2.4+
3. 开发环境中已安装 Node.js 18+

安装

npm install element-plus
npm install @element-plus/icons-vue

TypeScript 支持

添加到 tsconfig.json：

{
  "compilerOptions": {
    "types": ["element-plus/global"]
  }
}

输入参数

调用技能时，请考虑以下参数：

参数	类型	描述	必填
component	字符串	组件名称（例如，“button”“form”）	是
feature	字符串	所需的具体功能（例如，“validation”“loading”）	否
context	对象	其他上下文（框架、TypeScript 用法）	否

输出格式

每项技能都提供：

1. **API 参考：**完整的属性、事件、插槽和暴露项
2. **代码示例：**可运行的代码片段
3. **最佳实践：**推荐的实现模式
4. **常见问题：**故障排查建议
5. **组件交互：**如何与其他组件配合使用

重要说明

1. 技能优先级

多个技能都适用时，请按以下顺序优先选择：

1. 组件专属技能（最具体）
2. 基础技能（配置）
3. 设计规范技能（指南）

2. 交叉引用

许多技能会引用相关技能。请务必查看：

• 同一类别中的相关组件
• 用于配置的基础技能
• 用于样式指南的设计技能

3. 版本兼容性

此技能库基于 Element Plus 2.4+。早期版本可能不支持某些功能。

4. 命名约定

• 组件技能使用 el-{name} 格式（与 Vue 组件标签一致）
• 基础技能使用 element-plus-{name} 格式
• 设计技能使用 element-plus-design-{name} 格式

5. 文件结构

element-plus-skills/
├── SKILL.md                          # This file (main entry)
├── README.md                         # English documentation
├── README_CN.md                      # Chinese documentation
├── AGENTS.md                         # Agents documentation
├── components/                       # 77 component skills
│   ├── el-button/
│   │   └── SKILL.md
│   ├── el-form/
│   │   └── SKILL.md
│   └── ...
├── element-plus-quickstart/          # Foundation skills
├── element-plus-theming/
├── element-plus-i18n/
├── element-plus-dark-mode/
├── element-plus-ssr/
├── element-plus-components/
├── element-plus-design-border/       # Design skills
├── element-plus-design-color/
├── element-plus-design-layout/
├── element-plus-design-typography/
└── element-plus-design-overview/

Agent 最佳实践

1. 用户提到 Element Plus 时，始终从此文件开始
2. 根据用户意图定位具体技能
3. 回复前阅读完整的技能文件
4. 使用技能文档中的内容提供代码示例
5. 适用时引用相关技能
6. 纳入技能内容中的最佳实践
7. 如果与用户的上下文相关，提及常见问题

相关资源

• Element Plus 文档
• Vue 3 文档
• Element Plus GitHub
• Element Plus 图标