# Element Plus 设计系统

## Element Plus 设计系统界面预览

在两个原生 Transfer 列表之间筛选并移动模块，查看选中的键，并应用本地选择。

## Element Plus 设计系统设计参考

Element Plus 2.14.7 默认编译版 CSS。变量均已通过验证，取自软件包中的实际值，包含语义别名。传送列表布局沿用原始响应式组合规则，并与系统基础样式分离。

### 主色与状态色

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| --el-color-primary | #409eff | 默认主色强调色。 |
| --el-color-primary-light-3 | #79bbff | 用于较浅交互状态的主色浅色调。 |
| --el-color-primary-light-5 | #a0cfff | 中间色调。 |
| --el-color-primary-light-7 | #c6e2ff | 浅色调。 |
| --el-color-primary-light-9 | #ecf5ff | 克制的选中项／键面板表面。 |
| --el-color-primary-dark-2 | #337ecc | 较深的主色状态。 |
| --el-color-success | #67c23a | 成功角色。 |
| --el-color-warning | #e6a23c | 警告角色。 |
| --el-color-danger | #f56c6c | 错误／危险角色。 |
| --el-color-info | #909399 | 信息提示的中性角色。 |
### 语义文本与界面表面

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| --el-text-color-primary | #303133 | 主要阅读文本。 |
| --el-text-color-regular | #606266 | 普通组件文本。 |
| --el-text-color-secondary | #909399 | 帮助信息与元数据。 |
| --el-text-color-placeholder | #a8abb2 | 占位符角色。 |
| --el-bg-color | #fff | 默认表面。 |
| --el-bg-color-page | #f2f3f5 | 页面背景。 |
| --el-bg-color-overlay | #fff | 叠加表面。 |
| --el-border-color | #dcdfe6 | 默认边界。 |
| --el-border-color-light | #e4e7ed | 微妙的卡片／摘要边界。 |
### 字体排版、控件与形状

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| --el-font-family | "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif | 默认字体系列偏好。 |
| --el-font-size-extra-large | 20px | 20px 标题字号。 |
| --el-font-size-large | 18px | 18px 字号。 |
| --el-font-size-medium | 16px | 16px 字号。 |
| --el-font-size-base | 14px | 14px 基准字号。 |
| --el-font-size-small | 13px | 13px 字号。 |
| --el-font-size-extra-small | 12px | 12px 字号。 |
| --el-border-radius-base | 4px | 标准组件圆角。 |
| --el-border-radius-small | 2px | 小圆角。 |
| --el-component-size-large | 40px | 大型控件高度。 |
| --el-component-size | 32px | 默认控件高度。 |
| --el-component-size-small | 24px | 小型控件高度。 |
### 原始模块工作台布局

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| Desktop panel arrangement | two panels with 180px reserved between | 围绕原生 Transfer 组件的原始适配布局。 |
| Narrow layout | ≤700px: stacked panels | 原始断点，不是 Element Plus 令牌。 |
| Page spacing | 32px desktop; 20px 16px mobile | 原始外边距。 |
| Summary spacing | 24px padding / 24px gap | 原始的选中键与模块摘要组合布局。 |
## Element Plus 设计系统完整指南

实用指南，介绍如何为真实界面选择、应用和评审此系统。

完整指导、实现起点和源代码链接。

## Element Plus 设计系统：传送列表有两种选择方式

### 传送列表有两种选择方式

> Element Plus Transfer 提供可用列表和目标列表，并配有用于移动已勾选项的控件。模块工作台使用实际的 2.14.7 Vue 组件。其 v-model 包含目标键，初始值为 catalog 和 tokens。勾选列表中的复选框，是为下一步 Transfer 操作标记项目；这并不表示该项目已经属于目标列表。

实时模型读数会清楚显示这一区别。勾选源列表中的项目，即可为添加操作做好准备。按下 Add 后，目标键数组会更新，已选模块摘要也随之更新，同时清除先前的应用结果。这样，读者可以直接了解库的模型约定，而不必从两个静态列表中猜测。

阅读配套规范

## Element Plus 设计系统默认角色与具体组件尺寸

### 默认角色与具体组件尺寸

Element Plus 提供 --el-color-primary 及其浅色/深色衍生变量、状态角色、文本颜色和界面表面变量。表格展示已安装软件包实际编译后的值。周围的键面板使用 primary-light-9 和常规文本颜色，操作按钮则采用原生主色样式。

默认排版包含 14 像素的基准字号，以及 12、13、16、18 和 20 像素的配套字号。组件尺寸变量描述小号/默认/大号控件的尺寸，不应将其误认为页面布局的间距比例尺。工作台的 24 像素间距和 32 像素外边距，是明确设定的原创布局选择。

阅读配套规范

## Element Plus 设计系统稳定的键、标签与禁用选项

### 稳定的键、标签和禁用选项

每个选项都有键、标签和禁用标记。已选数组由这些键组成，因此标签可以更改而不影响项目身份。示例模块包括 Asset catalog、Token inspector、Review queue、Version history 和 Cross-project search。Audit export 保持禁用，以展示一个可见但不可用的选项。

本示例中的可用性是静态演示数据，并非权限检查，也不代表这些模块是可安装的产品。在实际应用中，选项来源和权限规则必须来自产品模型。不要因为可以点击 Transfer 复选框，就推断用户已获授权。

阅读配套规范

## Element Plus 设计系统搜索会改变可见性，而非成员关系

### 搜索会改变可见内容，而不会改变成员关系

filterable 会为两个面板分别添加搜索框。搜索框占位提示给出了明确操作：“查找模块”。默认情况下，筛选会匹配选项标签。搜索时，已选项目可能从目标列表的可见内容中消失，但不会从已选键数组中移除；摘要和读数仍会显示完整的目标集合。

自定义 left-empty 和 right-empty 插槽可区分两种状态：面板中没有匹配的选项，以及全局范围内没有选中任何内容。页面还会在目标数组为空时，于本地禁用 Apply。这是两种不同的状态：搜索不到匹配项，并不代表没有选中的模块。

1. 在可用面板中搜索 Review queue。

2. 勾选匹配的选项，然后按下 Add。

3. 清除搜索条件，并确认 review 出现在模型读数和目标列表中。

阅读配套规范

## Element Plus 设计系统在移动端保留双列表关系

### 在移动端保留双列表关系

在桌面端，原生 Transfer 面板并排排列，Add 和 Remove 按钮位于专用区域。当屏幕宽度不超过 700 像素时，面板改为上下堆叠，操作按钮则在两个面板之间水平排列。标题仍显示“可用模块”和“工作区模块”，确保移动方向清晰明了。

工作台不会为了适应手机屏幕而缩小整个控件，而是调整布局，同时保持标签、复选框、搜索框和列表内容处于原生且易读的尺寸。已选键读数和文本摘要会移至下方的单列区域，在保留相同信息的同时，避免在更窄的断点处将其隐藏。

阅读配套规范

## Element Plus 设计系统草稿成员关系与已应用快照

### 草稿成员关系与已应用的快照

Apply 会在本地复制已选键数组。之后若 Transfer 操作改变选择，会清除已应用状态，因此用户更改草稿成员关系后，成功提示不会继续显示。Restore starting set 会重新分配一个 catalog/tokens 数组，并清除已应用结果。这些状态转换在 Vue 源码中只需几行明确的代码。

提示仅表示本地预览中的选择已应用，并不声称已完成安装、权限变更或外部更新。在真实的设置界面中，已应用快照必须对应已确认的持久化结果；组件事件本身并不等于服务器确认。

阅读配套规范

## Element Plus 设计系统原生控件与易懂说明

### 原生控件与易懂说明

示例保留原生 Transfer 复选框和 Transfer 按钮。按钮文案使用 Remove 和 Add，而非仅显示方向图标；当两个列表改为垂直堆叠时，这一点尤其有用。面板标题说明源列表和目标列表的作用，帮助说明则解释了先勾选、再移动的操作顺序。

禁用选项仍保留在上下文中，空面板插槽则表明当前没有匹配的选项。键盘用户应无需自定义的、仅支持指针操作的处理逻辑，即可访问搜索框、复选框和按钮。组件负责管理自身的内部行为；应用不会用仅仅看起来像选择控件的绘制行替换组件结构。

- 面板标题明确指出哪个列表是目标列表。

- 文本标签让堆叠布局中的移动方向一目了然。

- 实时模型读数让隐藏的已选项目也能被发现。

阅读配套规范

## Element Plus 设计系统 编译 Vue 组件并加载 CSS

### 编译 Vue 组件并加载 CSS

在 Vue 3 Vite 项目中，安装 element-plus@2.14.7，并在原始布局 CSS 之前导入 element-plus/dist/index.css。完整的 App.vue 使用 script setup，并直接导入所需组件。ElConfigProvider 使用英语区域设置，使内置面板和空状态文本与英文参考页面保持一致。

提供的生产环境风格配置通过 Vue Vite 插件导入 App.vue。离线示例通过编译相同的单文件组件并在本地打包构建，无需外部 CDN、自动导入服务或运行时模板编译器。如果现有项目使用自动导入插件，请确保其生成的样式与所选的全量或按组件导入策略保持一致。

阅读配套规范

## Element Plus 设计系统主题覆盖必须保留组件间的关系

### 主题覆盖必须保留组件间的关系

CSS 自定义属性适合用于更改共享角色，而无需重写每个组件选择器。工作台使用实际的 --el 变量来设置背景、文本、边框和圆角。它仅调整为适应此特定布局所需的布局选择器，以便使用原生 Transfer。

若要打造更全面的品牌主题，请使用文档中介绍的 Sass 或 CSS 变量方案，并一并检查悬停、禁用和聚焦状态。只替换某张截图中的一个主色十六进制值，会忽略较浅的界面表面和较深的交互状态。基于源代码的表格提供了初始值；完整的原生预览则可让读者在实际运行的组件中查看应用这些值后的效果。

阅读配套规范

## Element Plus 设计系统组件示例

### 完整的 Vue 模块选择组件

使用原生 Transfer、Card、Alert、Button 和 Tag 的单文件组件。

```
<script setup>
import {ref,computed} from 'vue';
import {ElConfigProvider,ElTransfer,ElCard,ElButton,ElTag,ElAlert} from 'element-plus';
import en from 'element-plus/es/locale/lang/en';
const modules=[{key:'catalog',label:'Asset catalog',disabled:false},{key:'tokens',label:'Token inspector',disabled:false},{key:'review',label:'Review queue',disabled:false},{key:'history',label:'Version history',disabled:false},{key:'audit',label:'Audit export · unavailable',disabled:true},{key:'search',label:'Cross-project search',disabled:false}];
const selected=ref(['catalog','tokens']),applied=ref(null);const names=computed(()=>modules.filter(x=>selected.value.includes(x.key)).map(x=>x.label));
const changed=()=>{applied.value=null};
</script>
<template><ElConfigProvider :locale="en"><main class="module-desk"><header><p class="eyebrow">ELEMENT PLUS / WORKSPACE COMPOSITION</p><h1>Choose the tools this team needs.</h1><p>Move modules between lists, then inspect the exact selected keys.</p></header><ElCard shadow="never"><template #header><div class="card-heading"><h2>Module selection</h2><ElTag type="info">{{selected.length}} selected</ElTag></div></template><ElTransfer v-model="selected" :data="modules" filterable filter-placeholder="Find a module" :titles="['Available modules','Workspace modules']" :button-texts="['Remove','Add']" @change="changed"><template #left-empty><p class="empty">No available module matches.</p></template><template #right-empty><p class="empty">No selected module matches.</p></template></ElTransfer><p class="help">Check a module before using Add or Remove. Audit export stays disabled in this sample.</p></ElCard><div class="summary-grid"><section class="summary"><h2>Workspace modules</h2><ul v-if="names.length"><li v-for="name in names" :key="name">{{name}}</li></ul><p v-else>No modules selected. Add at least one before applying.</p><div class="actions"><ElButton type="primary" :disabled="!selected.length" @click="applied=[...selected]">Apply locally</ElButton><ElButton @click="selected=['catalog','tokens'];changed()">Restore starting set</ElButton></div><ElAlert v-if="applied" title="Selection applied to the local preview" type="success" :closable="false" show-icon description="No installation, entitlement change or external update was performed." /></section><section class="key-panel"><p class="eyebrow">V-MODEL VALUE</p><pre>{{JSON.stringify(selected,null,2)}}</pre><p>The model contains keys, not option objects. Search filters visibility without changing this array.</p></section></div><footer>Native Element Plus Transfer, Card, Tag, Button and Alert. Local module names and availability are original examples.</footer></main></ElConfigProvider></template>
```

代码参考

- v-model 保存的是选中项的键，而不是整个选项对象。

- 禁用选项仍会显示，但无法转移。

- 更改 Transfer 选项后，会清除过期的应用状态。

### 响应式 Transfer 布局

样式保留原生面板和控件，并在窄屏上将它们纵向排列。

```
body{margin:0;background:var(--el-bg-color-page);font-family:var(--el-font-family);color:var(--el-text-color-primary);font-size:var(--el-font-size-base);line-height:1.6}.module-desk{max-width:1080px;margin:auto;padding:32px}header{max-width:700px;margin-bottom:28px}h1{font-size:34px;line-height:1.2;letter-spacing:-.03em;margin:10px 0 16px}h2{font-size:20px;line-height:1.3;margin:0}.eyebrow{font-size:11px;letter-spacing:.12em;font-weight:700;color:var(--el-text-color-secondary)}.card-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.el-transfer{--el-transfer-panel-body-height:210px;display:flex;align-items:center;justify-content:center}.el-transfer-panel{width:calc((100% - 180px)/2)}.el-transfer__buttons{padding:0 20px;display:flex;flex-direction:column;gap:10px}.el-transfer__buttons .el-button{margin:0}.help,.empty{font-size:13px;color:var(--el-text-color-secondary)}.empty{padding:16px}.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}.summary,.key-panel{background:var(--el-bg-color);border:1px solid var(--el-border-color-light);border-radius:var(--el-border-radius-base);padding:24px}.actions{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}.actions .el-button{margin:0}.key-panel{background:var(--el-color-primary-light-9)}pre{font:14px/1.7 monospace;white-space:pre-wrap}.key-panel p{font-size:13px}.summary li{margin:6px 0}footer{font-size:12px;color:var(--el-text-color-secondary);margin-top:20px}@media(max-width:700px){.module-desk{padding:20px 16px}h1{font-size:28px}.el-transfer{flex-direction:column;gap:16px}.el-transfer-panel{width:100%}.el-transfer__buttons{flex-direction:row;padding:0}.summary-grid{grid-template-columns:1fr}.el-card__body{padding:16px}}
```

代码参考

- 断点和周边布局均为原创设计。

## Element Plus 设计系统 AI Agent 配置

### 实现起点

已通过 Vue 3 和 Element Plus 2.14.7 验证。App.vue 提供英文版 ConfigProvider 和显式组件导入。所有状态均为本地状态。

```
// Create the project first:
// npm create vite@latest element-plus-specimen -- --template vue
// cd element-plus-specimen && npm install
// In a Vite Vue 3 project:
// npm install element-plus@2.14.7
// Save the complete single-file component above as App.vue.
// main.js
import {createApp} from 'vue';
import 'element-plus/dist/index.css';
import './style.css';
import App from './App.vue';
createApp(App).mount('#app');
// index.html: <div id="app"></div>
// style.css: use the complete responsive composition above.
// Vite's standard Vue template includes @vitejs/plugin-vue for .vue files.
// Keep the template index.html and replace its entry with the code above.
// npm run dev
```

### 适用于你项目的提示词

```
使用原生 ElTransfer 扩展提供的 Element Plus 2.14.7 工作区模块选择器。保留六个带键模块、禁用的 Audit 项、筛选行为以及受控的选中键数组。点击应用时，应捕获当前模块选项；之后若有编辑，应以可见方式标示该快照已过期；恢复操作则应还原初始选项。保留响应式双面板布局和禁用项语义，不要将 Transfer 重建为互不相关的列表。先加载原生样式表，再加载原有布局 CSS。
```

## Element Plus 设计系统来源与范围

Element Plus 2.14.7 原生参考。模块名称和权限为原创示例；本地选项操作不会安装模块，也不会更改权限。

- Transfer 数据模型键、筛选、禁用数据和空插槽。

- 主题 CSS 变量和 Sass 自定义。

- 快速入门 Vue 组件和样式表配置。

- Config Provider 语言区域配置。

- 颜色 默认配色角色。

- 边框 边框与形状基础。

## Element Plus 设计系统相关资源

### Flowbite

原生 Flowbite 4 手风琴与抽屉组合，语义主题别名已验证；包含持久化打包清单和便于无障碍访问的本地材料备注流程。

### Fomantic UI

原生 Fomantic UI 阅读书架，包含经过验证的编译主题值、jQuery 下拉菜单和评分模块、明确的键盘支持，以及持久化的本地收藏列表。

### Foundation

可运行的 Foundation proof desk，使用 XY Grid、Abide 自定义验证器、Reveal 确认组件、实际的 Sass 设置以及完整的本地集成代码。


- [实现参考](https://element-plus.org/en-US/component/transfer.html)
- [来源](https://element-plus.org/en-US/guide/theming.html)
- [来源](https://element-plus.org/en-US/component/transfer.html)
- [阅读配套规范](https://element-plus.org/en-US/component/transfer.html)
- [阅读配套规范](https://element-plus.org/en-US/guide/theming.html)
- [阅读配套规范](https://element-plus.org/en-US/guide/quickstart.html)
- [代码参考](https://element-plus.org/en-US/component/transfer.html)
- [代码参考](https://element-plus.org/en-US/guide/theming.html)
- [Transfer 数据模型键、筛选、禁用数据和空插槽。](https://element-plus.org/en-US/component/transfer.html)
- [主题 CSS 变量和 Sass 自定义。](https://element-plus.org/en-US/guide/theming.html)
- [快速入门 Vue 组件和样式表配置。](https://element-plus.org/en-US/guide/quickstart.html)
- [Config Provider 语言区域配置。](https://element-plus.org/en-US/component/config-provider.html)
- [颜色 默认配色角色。](https://element-plus.org/en-US/component/color.html)
- [边框 边框与形状基础。](https://element-plus.org/en-US/component/border.html)