ElementPlusYb

基于 Element Plus 二次封装的业务组件库，提供可复用、可扩展的企业级前端组件与布局方案。组件命名与 Element Plus 原生组件同名，支持全局替换注册；内置明暗主题适配、国际化、全局 Store 和丰富的插槽系统，开箱即用。

一、框架介绍

1.1 定位与核心功能

ElementPlusYb 是一套面向中后台业务系统的 Vue 3 组件库，在 Element Plus 基础之上对原子组件进行 API 扩展，同时提供多套开箱即用的业务布局组件，覆盖数据管理、表单配置、流程管理、智能体等典型场景。

核心特点：

| 特点 | 说明 | | ------------------- | -------------------------------------------------------------------------------------------------------- | | 同名二次封装 | ElButton、ElInput 等原子组件名与 Element Plus 原生一致，全局注册后自动覆盖，业务代码无需修改引用路径 | | 明暗主题适配 | 内置 light / dark 双模式，通过 Pinia Store 驱动 CSS 变量级联切换，同步联动 Element Plus 原生暗色样式变量 | | 高可扩展插槽 | 所有布局组件开放丰富插槽，允许业务方替换局部 UI、注入自定义交互 | | 数据 Props 解耦 | 菜单数据、表格列、表单字段等均通过 Props 传入，组件不耦合具体业务数据结构 | | 国际化内置 | 内置中/英文双语，支持运行时切换与自定义扩展语言包 | | 主题色可配置 | 内置中国传统色主题选择器，支持运行时切换主题色，自动注入 CSS 变量并联动 Element Plus 原生主题变量 | | Pinia 内置 | 内置 Pinia Store，开箱即用，自动初始化主题系统（Pinia 作为 dependency，无需手动安装） |

1.2 安装

# npm
npm install element-plus-yb

# peerDependencies 需自行安装
npm install vue@^3.3.0 element-plus@^2.4.0

注意： pinia 已作为 element-plus-yb 的 dependency，无需额外安装。但业务方使用 Pinia 时，仍需在入口文件中调用 createPinia()。

1.3 引入与注册

全局注册（推荐）

// main.ts
import { createApp } from "vue";
import { createPinia } from "pinia";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import ElementPlusYb from "element-plus-yb";

const app = createApp(App);

app.use(createPinia()); // Pinia 需在 ElementPlusYb 之前注册
app.use(ElementPlus);
app.use(ElementPlusYb); // 全局注册，同名覆盖 Element Plus 组件
app.mount("#app");

按需引入

// 按需引入布局组件
import {
  DataManageLayout,
  SmartBaseLayout,
  AgentLayout,
} from "element-plus-yb";

// 按需引入原子组件
import { ElButton } from "element-plus-yb";

// 按需引入子组件
import { AsideMenu, TablePanel, ViewSwitch } from "element-plus-yb";

// 按需引入主题色选择器
import { ThemeColorSelect } from "element-plus-yb";

// 按需引入 Store
import { useDesignStore, initializeDesignSystemTheme } from "element-plus-yb";

// 按需引入国际化工具
import {
  useEpwI18n,
  setEpwLocale,
  extendEpwI18nMessages,
} from "element-plus-yb";

1.4 目录结构

element-plus-yb/
├── src/
│   ├── components/
│   │   ├── Atom/                      # 【原子扩展组件】和 Element 同名，扩展 API
│   │   │   ├── ElButton/
│   │   │   │   ├── index.vue          # ElButton 扩展组件（权限、全局禁用等）
│   │   │   │   └── index.ts
│   │   │   ├── ElInput/
│   │   │   │   ├── index.vue          # ElInput 占位封装（后续扩展）
│   │   │   │   └── index.ts
│   │   │   └── index.ts               # 原子组件统一导出
│   │   ├── Layout/                    # 【业务布局组件】全新开发
│   │   │   ├── SmartBaseLayout/       # 数智底座布局
│   │   │   ├── DataManageLayout/      # 数据管理布局
│   │   │   ├── FormSubmitLayout/      # 表单收集布局
│   │   │   ├── ProcessAppLayout/      # 流程审批布局
│   │   │   ├── AgentLayout/           # 智能体布局
│   │   │   ├── components/            # 布局子组件
│   │   │   │   ├── Header/            # 通用头部（DataManageHeader）
│   │   │   │   ├── TablePanel/        # 数据表格面板（DataManageTablePanel）
│   │   │   │   ├── AsideMenu/         # 侧边栏菜单
│   │   │   │   ├── AsideSubMenu/      # 二级树形子菜单
│   │   │   │   ├── BaseMenu/          # 底座图标导航菜单
│   │   │   │   ├── BaseHeader/        # 底座头部（搜索+新建+主题）
│   │   │   │   ├── BaseAsideMenu/     # 左侧资源列表
│   │   │   │   ├── ViewSwitch/        # 视图切换组件
│   │   │   │   ├── FilterTabs/        # 筛选标签栏
│   │   │   │   ├── ToolbarActions/    # 工具栏操作按钮组
│   │   │   │   ├── PanelHeaderActions/ # 面板头部操作按钮组
│   │   │   │   ├── FormSubmit/        # 表单编辑器（含子组件）
│   │   │   │   │   └── components/
│   │   │   │   │       ├── AddProDialog.vue       # 添加问题弹窗
│   │   │   │   │       ├── FieldPalette.vue        # 字段控件面板
│   │   │   │   │       ├── FormMetaPanel.vue       # 表单头部信息面板
│   │   │   │   │       ├── FormSubmitToolbar.vue   # 表单工具栏
│   │   │   │   │       ├── HyperlinkDialog.vue     # 超链接编辑弹窗
│   │   │   │   │       ├── QuestionCard.vue        # 问题卡片组件
│   │   │   │   │       └── SubmitSettingsPanel.vue # 提交设置面板
│   │   │   │   ├── AgentTalk/         # 智能体对话面板
│   │   │   │   └── AgentHistoryRecord/ # 智能体历史记录面板
│   │   │   └── index.ts               # 所有布局组件与子组件统一导出（含国际化工具 re-export）
│   │   ├── ThemeColorSelect/          # 主题颜色选择器
│   │   │   ├── index.vue              # 弹窗主组件
│   │   │   ├── ColorList.vue          # 颜色列表
│   │   │   └── index.ts
│   │   └── index.ts                   # 全局统一导出（Atom + Layout + ThemeColorSelect）
│   ├── Demo/                          # 开发预览页面
│   │   ├── App.vue                    # 预览入口（可切换布局预览）
│   │   ├── main.ts                    # 预览启动文件
│   │   ├── smart-base.vue             # 数智底座预览
│   │   ├── data-manage.vue            # 数据管理预览
│   │   ├── form-submit.vue            # 表单收集预览
│   │   ├── process-app.vue            # 流程应用预览
│   │   └── agent-intell.vue           # 智能体预览
│   ├── i18n/                          # 国际化
│   │   ├── zh/index.ts                # 中文语言包
│   │   ├── en/index.ts                # 英文语言包
│   │   └── index.ts                   # 国际化工具函数（含 dataManage* 兼容别名）
│   ├── store/                         # Pinia Store
│   │   ├── designStore.ts             # 主题/外观状态管理（含自动持久化、系统初始化）
│   │   └── index.ts                   # Store 导出
│   ├── styles/                        # 样式系统
│   │   ├── common/
│   │   │   ├── var.scss               # SCSS 变量（品牌色、间距系统、布局常量）
│   │   │   ├── format.scss            # 全局重置与滚动条样式
│   │   │   └── style.scss             # 公共工具类（Flex、间距、文字省略等）
│   │   ├── theme/
│   │   │   ├── light.scss             # 亮色主题 CSS 变量
│   │   │   └── dark.scss              # 暗色主题 CSS 变量
│   │   └── base.scss                  # 基础 CSS 变量默认值
│   ├── settings/                      # 静态配置
│   │   ├── designColor.json           # 中国传统色完整色表
│   │   └── designColorRecommend.json  # 推荐颜色列表
│   └── index.ts                       # 组件库入口（install 方法 + 全部导出）
├── dist/                              # 构建产物
│   ├── element-plus-yb.js             # ES Module
│   ├── element-plus-yb.umd.cjs        # UMD
│   └── style.css                      # 样式文件
├── index.html                         # 开发预览入口页面
├── vite.config.ts                     # Vite 配置（库模式打包）
├── tsconfig.json
└── package.json