epic-designer-gold 0.0.0 → 0.0.1

package/docs/updateLog.md

@@ -0,0 +1,461 @@
+## 0.9.25（2024-10-16）
+### 🐛 Bug Fixes
+- 修复antd组件校验异常问题
+
+## 0.9.24（2024-10-16）
+### ✨ Refactor
+- unocss基础单位由rem转px
+### 🐛 Bug Fixes
+- 修复表单校验规则编辑内存溢出问题
+## 0.9.23（2024-09-21）
+### ✨ Feat
+- EBuilder组件新增getForms、setForms、validateAll函数
+### ✨ Refactor
+- 重构EBuilder组件
+- 重构ENode组件，减少重复代码
+### 🐛 Bug Fixes
+- 修复加载数据里面包含未注册组件时报错问题
+- 修复属性编辑输入中文时光标自动跳到输入字段的末尾
+- 修复ts类型引入路径错误
+- 修复根节点非page时,根节点判断逻辑异常问题
+- 修复单表单模式时，传入defaultSchema无效
+- 修复数据回显时未进行深拷贝，导致源数据被修改问题
+
+## 0.9.22（2024-09-07）
+### ✨ Feat
+- 右侧属性窗口，没有设置label的将不显示label
+- 大纲组件添加隐藏状态标识
+### ✨ Refactor
+- 调整toolbar样式
+### 🐛 Bug Fixes
+- lint 样式重复定义
+- 修正 Safari 下拖拽组件和画布失效问题、Chrome 下鼠标出现地球的问题、Safari 下拖拽阴影问题
+- formMode 为 true 的时候，大纲tree 拖拽到外部导致节点丢失问题
+- 修复缩放设置组件无法高亮选项
+- 修复禁止缩放时切换设备无效问题
+
+## 0.9.21（2024-08-21）
+### ✨ Refactor
+- 大纲显示组件id
+- 重构预览组件,查看数据时验证所有表单组件
+### 🐛 Bug Fixes
+- 修复getUUID函数无法通过生成长度测试问题
+- 修复重新加载组件，历史记录未清空问题
+- 修复设计器组件切换表单模式时导致其他非表单模式的表单组件也被隐藏问题
+- 修复不在表单内的输入组件不可输入，导致组件无法正常交互问题
+- 解决项目中也使用monaco-editor，导致monaco-editor打包两次问题
+
+## 0.9.20（2024-08-04）
+### ✨ Feat
+- EDesigner新增sourceCodeReadOnly属性设置源码面板为只读状态
+### ✨ Refactor
+- 优化画布自动缩放功能
+### 🐛 Bug Fixes
+- 修复在属性面板编辑后再使用源码面板编辑，属性面板无法正常回显数据
+
+## 0.9.19（2024-07-23）
+### ✨ Feat
+- EDesigner新增切换单表单模式属性formMode
+- 组件注册配置新增sort排序字段
+- 组件Icon支持iconify图标库扩展
+### ✨ Refactor
+- 切换内置图标
+### 🐛 Bug Fixes
+- 修复文档搜索功能无法使用问题
+
+## 0.9.18（2024-07-13）
+### 🐛 Bug Fixes
+- 修复点击清空按钮按钮无法正常重置设计器数据问题
+- 修复公共函数和组件函数逻辑异常导致页面卡主问题
+- 修复setAttr函数组件componentProps属性undefined导致异常报错问题
+
+## 0.9.17（2024-07-11）
+### ✨ Refactor
+- EBuilder组件setData仅修改传入的字段值
+### 🐛 Bug Fixes
+- 修复表单组件调整表单布局为vertical时参数类型警告问题
+- 修复动作配置弹出框icon显示异常问题
+- 修复表单存在校验信息时,数据回显后校验信息保持校验失败状态
+- 修复pageSchema中包含'#'字符时,导出数据被截断的问题
+- 修复表单内联模式标签文本与组件自动换行问题
+- 修复自定义函数逻辑异常导致页面卡主问题
+
+## 0.9.16（2024-06-14）
+### 🐛 Bug Fixes
+- 修复elementPlus/naiveUi表单数据回显无效问题
+
+## 0.9.15（2024-06-14）
+### ✨ Feat
+- EDesigner组件暴露预览方法
+- EBuilder组件新增formData属性用于表单数据回显
+### 🐛 Bug Fixes
+- 修复选项管理拖拽后无法新增选项问题
+- 修复级联选项管理，子选项拖拽后数据重复问题
+- 修复扩展iconfont无效问题
+- 修复ant design vue 升级4.2.3后formItem的label部分场景显示异常
+- 修复预览时点击组件label会切换选中组件问题
+
+## 0.9.14（2024-05-25）
+### ✨ Refactor
+- 组件label统一修改为标题
+### 🐛 Bug Fixes
+- 修复弹出builder组件图标异常问题
+
+## 0.9.13（2024-05-23）
+### 🐛 Bug Fixes
+- 修复弹出窗口内组件图标异常问题
+
+## 0.9.12（2024-05-20）
+
+### ✨ Feat
+- 重构注册配置接口，新增editConstraints约束配置对象
+- antd日期选择器新增更多日期类型
+- antd组件属性补充
+- elementPlus组件属性补充
+### ✨ Refactor
+- 重构注册配置接口，新增editConstraints约束配置对象
+- 调整图标font-class影响范围,防止与项目其他的icon冲突
+- 将page组件name属性移至componentProps内
+### 🐛 Bug Fixes
+- 修复暗黑主题在组件渲染之前设置，导致异常问题
+- 修复isDark状态错误问题
+
+## 0.9.11（2024-05-13）
+
+调整注册配置，将’icon‘属性移至 ComponentConfigModel 接口的‘defaultSchema’对象之外
+影响：自定义组件，请自行调整注册配置中icon位置
+
+### ✨ Feat
+- 新增暗黑主题,添加css变量
+
+### 🐛 Bug Fixes
+
+- 修复根容器的隐藏按钮点击报错
+- 修复elementPlus Radio组件警告问题
+- 修复EDesigner组件初始化报错null问题
+
+## 0.9.10（2024-05-03）
+
+### ✨ Feat
+- 日期选择器调整类型时自动调整数据格式
+
+## 0.9.9（2024-04-27）
+
+### ✨ Feat
+- 注册配置新增fixedField字段锁定表单项field不添加UUID
+- 选中元素不在可视区时自动滚动到相应位置
+- 新增hideActivitybar、hideRightSidebar方法
+- antd级联组件新增回填方式属性
+- element新增文本域组件
+
+## 0.9.8（2024-04-18）
+
+### 🐛 Bug Fixes
+
+- 修复打开动作面板后导致无法正常选中元素问题
+- 修复antdUI设置数字输入框默认值为string类型问题
+
+## 0.9.7（2024-04-17）
+
+### ✨ Feat
+
+- EDesigner新增toggleDeviceMode事件
+- switch组件自动添加默认值
+- 新增lockDefaultSchemaEdit属性，锁定默认组件是否可复制删除
+- 新增title属性
+- 右侧面板新增折叠按钮
+- 输出结果新增弹出框展示
+- 校验组件添加ruleType属性，设置默认校验规则类型
+
+### 🐛 Bug Fixes
+
+- 修复初始化时未构建自定义函数问题
+
+## 0.9.6（2024-04-08）
+
+### ✨ Feat
+
+- EDesigner新增defaultSchema属性
+- 新增getFormSchemas函数
+
+## 0.9.5（2024-04-02）
+
+### ✨ Feat
+
+- 自定义函数epic对象可调用pluginManager对象
+
+### 🐛 Bug Fixes
+
+- 修复未编译epic-designer包模块时，无法正常启动项目
+- 修复EInputSize组件在某些情况下单位显示不正常以及无法输入部分数字的问题
+- 修复getFormFields函数无法正常查询问题
+- 修复设计模式修改默认值时，设计视图无法更新问题
+- 修复公共函数无法获取触发对象问题
+- 修复设置值表单项与设计元素不一致问题
+- 修复组件默认hidden为true时，无法获取组件实例调用setAttr函数来显示组件
+
+## 0.9.4（2024-03-23）
+
+### ✨ Feat
+
+- [pageManager对象添加find方法](https://github.com/Kchengz/epic-designer/commit/c7355ad981c644e8fa51e628ceec35fcb3065be5)
+- [EBuilder新增disabled属性，禁用所有输入项](https://github.com/Kchengz/epic-designer/commit/f57204f66243d0bfa80f84002570df9e7cf9c8a8)
+- [builder组件新增getFormInstance方法函数](https://github.com/Kchengz/epic-designer/commit/b54e679d7311d335169f60fa93a6d7a375124616)
+
+### ✨ refactor
+
+- antd v3 v4版本兼容合并
+
+### 🐛 Bug Fixes
+
+- [修复setAttr方法设置组件属性时会直接修改componentSchema问题](https://github.com/Kchengz/epic-designer/commit/b94a30e802e8730a6dc238cad0a52e0e0c3bb0eb)
+- [修复同时两个designer时，第二个设计器选择异常问题](https://github.com/Kchengz/epic-designer/commit/127e107beebaaa8c65fe44d5cf95e192700bce9b)
+- [修复缩放计算出现Infinity问题](https://github.com/Kchengz/epic-designer/commit/f3d2954a9e1e669b35d44cfb692e1f7ac8e00181)
+- [Antd(input)没有显示最大字符数](https://github.com/Kchengz/epic-designer/commit/88d63bbaecd371ab67884c64f7b6f6eaf30e3039)
+
+## 0.9.3（2024-03-14）
+
+### 🐛 Bug Fixes
+
+- [修复使用EpicDesigner时，提示缺少不必要的依赖问题](https://github.com/Kchengz/epic-designer/commit/c17c5c58bdb3e61d2a0a7b8d021b27a1399dd956)
+- [修复ui组件初始化未完成就渲染页面的异常问题](https://github.com/Kchengz/epic-designer/commit/f4e711ef82809ab60fc6e1a7dc6f31f976dbcb52)
+
+## 0.9.1（2024-03-13）
+
+本次更新重做了组件分组、ui设置及内部变量名称修改
+
+pluginManager管理器移除~~setComponentGroup~~、~~addComponentGroup~~方法，
+新增`setComponentGroupNameMap`、`clearComponentGroupNameMap`、`setSortedGroups`、`clearSortedGroups`、`hideComponent`、`showComponent`等方法
+
+### ✨ Feat
+
+- [新增element plus组件国际化支持](https://github.com/Kchengz/epic-designer/commit/b34a4ba6697e796f7dcd74b414d029eb406a2da5)
+- [新增antdv国际化方案](https://github.com/Kchengz/epic-designer/commit/e6350ed0531cad040cb885fe10628515653c7325)
+- [事件编辑折叠面板自动展开已配置动作的面板](https://github.com/Kchengz/epic-designer/commit/17fe46a4cbf14a8bc06e2eebcb19b18ec0334481) [#7](https://github.com/Kchengz/epic-designer/issues/7)
+- [新增分组排序设置函数setSortedGroups](https://github.com/Kchengz/epic-designer/commit/25d67af7c3f4d8631bf50093bf037216dc0ac495)
+
+### ✨ refactor
+
+- [组件配置添加groupName 属性](https://github.com/Kchengz/epic-designer/commit/0e2abe80e22903d69e5268e41e1eab24129269e1)
+- [重构组件分组管理，组件注册配置可设置分组](https://github.com/Kchengz/epic-designer/commit/2e6a5e4f2496edc9f45d1d4b2a43a94e700abe85)
+- [将record字段重命名为componentSchema](https://github.com/Kchengz/epic-designer/commit/b9def1bee0374f1a56cc360d4697633c5feac8fb)
+- [将NodeItem类型重命名为ComponentSchema并添加类型注释](https://github.com/Kchengz/epic-designer/commit/af1f5bbcfb783f75d0beb9d5a1ed4e7701fc2c63)
+- [调整表单组件name至componentProps属性内](https://github.com/Kchengz/epic-designer/commit/6b18519df7832a7a7798e5e9dacefff13fb80e27)
+
+### 🐛 Bug Fixes
+
+- [修复AntdV3安装无效问题](https://github.com/Kchengz/epic-designer/commit/0af6a102cb3413a32e65a729a4bcf22124d9b42f)
+- [修复element-plus组件无法正常渲染问题](https://github.com/Kchengz/epic-designer/commit/4b3238b140dbc67c162a85e9996839d3921315c2)
+
+## 0.8.15（2024-01-11）
+
+### ✨ Feat
+
+- [新增数据查看面板](https://github.com/Kchengz/epic-designer/commit/18c0199ceaf4016b2dc70580ed28f84c03bef5ff)
+
+### 🐛 Bug Fixes
+
+- [修复画布宽高设置为px以外的单位不会生效的问题](https://github.com/Kchengz/epic-designer/commit/79d502c37b83247713bb203dc7f7706e12adb1f0)
+- [修复校验不通过是外部的Promise保持pedding的bug](https://github.com/Kchengz/epic-designer/commit/00160a3d7ea00f7b9415c3cdff789fdced06b443)
+- [修复编译后types类型文件不存在问题](https://github.com/Kchengz/epic-designer/commit/4a996ae396a39761fda6970e79cdd7fb4d6487c6)
+
+## 0.8.13（2023-11-21）
+
+### ✨ Feat
+
+- [新增隐藏头部属性](https://github.com/Kchengz/epic-designer/commit/de558e9b0693508cec3d9bb9634a176053b12708)
+- [新增header插槽](https://github.com/Kchengz/epic-designer/commit/8c9295ec5aa6f73b13898b9b7e005deac6ef8953)
+
+### 🐛 Bug Fixes
+
+- [修复上传图片图标不显示问题](https://github.com/Kchengz/epic-designer/commit/08f16cfff58adc4a09aa8489d1a48e91af0138b9)
+- [修复用户扩展icon无法正常显示问题](https://github.com/Kchengz/epic-designer/commit/f3288745b694318cd0d6cfb0dbabbb1aa00e41ca)
+- [修复组件ts类型缺失问题](https://github.com/Kchengz/epic-designer/commit/b91bd0e13c5e5ba3fa3c11ff7992a85ac0ca7727)
+
+## 0.8.12（2023-11-16）
+
+### ✨ Feat
+
+- [新增find方法用于查找组件示例，替换getComponent](https://github.com/Kchengz/epic-designer/commit/8463a8a4e9fda261a7f42717db0a4b2da993c153)
+- [导入新增简单k-form数据处理，可导入k-form数据](https://github.com/Kchengz/epic-designer/commit/1729ea0188d33cdb38243364b86c0fc533cd2d9d)
+
+### 🐛 Bug Fixes
+
+- [大纲树挤占动作选区](https://github.com/Kchengz/epic-designer/commit/243766ee2abdcc3a8264bc3932901b4c88ad5723)
+
+## 0.8.10（2023-11-09）
+
+### ✨ Feat
+
+- 新增antdv4版本
+-  新增header-right-prefix插槽
+
+### 🐛 Bug Fixes
+
+- 修复动作删除icon图标异常问题
+
+## 0.8.9（2023-11-08）
+
+### ✨ Feat
+
+- 新增禁止拖拽属性childImmovable、immovable
+- node新增内部schema数据状态，新增属性修改，属性获取方法
+- 新增清空设计器数据操作
+- 新增画布宽高配置
+- 新增不同设备画布选型
+- 新增动作组件可配置设置值
+- 动作编辑新增参数缓存功能
+
+### 🐛 Bug Fixes
+
+- 修复先赋值表单初始化node组件导致数据被重置问题
+- 修复表单赋值提示表单不存在问题
+- 修复mounted生命周期无法set/get表单数据问题
+- 修复属性编辑组件在切换组件时无法显示数据异常问题
+- 修复大纲树拖拽操作异常问题
+......
+
+## 0.8.8（2023-10-08）
+
+### ✨ Feat
+
+- 表单组件新增动作
+- 大纲目录树可以拖拽节点
+
+### 🐛 Bug Fixes
+
+- 修复大纲树可拖拽至页面根节点之外的bug
+
+## 0.8.7（2023-09-16）
+
+### ✨ Feat
+
+- 新增getFormFields获取表单字段
+- 新增disabledZoom属性，可禁用画布缩放功能
+- 新增e-icon组件
+- antd/radio组件新增属性配置
+- eTree组件新增查询过滤
+
+### 🐛 Bug Fixes
+
+- 修复复杂布局组件id重复问题
+
+- 修复非根节点使用指令警告问题
+
+## 0.8.5（2023-08-10）
+
+### ✨ Feat
+
+- 输入组件添加getValue动作
+
+- 输入组件添加setValue动作
+
+- 补充输入类型组件事件及动作
+
+
+## 0.8.4（2023-08-03）
+
+### 🐛 Bug Fixes
+
+- 修复modal组件抛出警告问题
+
+- 修复非根节点使用指令警告问题
+
+
+## 0.8.3（2023-08-03）
+
+### ✨ Feat
+
+- 添加antdUI/slider组件
+- antdUI日期选择器增加时间选择配置
+
+### ✨ refactor
+
+  - 更新图标
+
+### 🐛 Bug Fixes
+
+- 修复拖拽组件生成id相同且数据没有深拷贝问题
+
+- 修复拖拽elementPlus/number组件警告问题
+
+  
+
+## 0.0.82（2023-07-25）
+
+###  (破坏性更新) Breaking changes
+
+- 组件名称修改为epic-designer，项目架构使用monorepo（单仓库多项目）形式
+
+### ✨ Feat
+- header新增插槽
+- monacoEditor添加json编辑功能
+- 动作配置区域添加自定义函数编辑区域
+- 补充组件属性配置
+- 新增工具栏组件，添加缩放控制组件
+
+......
+
+### ✨ refactor
+
+- 重构项目架构
+- 重构动作配置功能，新增拖拽动作功能
+
+......
+
+### 🐛 Bug Fixes
+
+- 修复切换组件时动作无法配置问题
+- 修复切换动作主体时，动作绑定异常问题
+- 修改k-input-size重复渲染元素问题
+- 修复组件缺少兼容样式问题
+
+......
+
+## 0.0.42（2023-05-10）
+
+- 将注册组件函数useElementPlus、useAntd、useNaiveUi改为setupElementPlus、setupAntd、setupNaiveUi
+  - 影响：之前已经使用组件的用户，需要按照文档修改注册组件方式及引入路径
+
+### 🐛 Bug Fixes
+
+- 修复naive ui 布局组件无法使用问题
+- 修复naiveUI NColorPicker 无法显示问题
+- 修复编辑组件无效问题
+
+### ✨ refactor
+
+- 允许重复注册组件，后注册的组件将覆盖已注册组件
+- 重构ENode组件,组件配置input属性读取默认配置，新增noFormItem属性用于移除输入组件外层的formItem
+
+## 0.0.41（2023-05-09）
+
+- 将nodeItem的属性isInput更改为input
+  - 影响：之前已经生成并保存JSON Schema 的用户，无法直接正常回显，需要手动将JSON Schema 中isInput改为input（下个版本会考虑重构向下兼容，如果觉得目前升级更新麻烦可以选择忽略该版本）
+  - 原因：组件 input 属性设置为true可以很直观表达该组件类型为输入类型组件
+- 更新UI注册文件目录结构
+  - 影响：之前已经使用组件的用户，需要按照文档修改注册组件方式及引入路径
+  - 原因：之前的UI组件注册结构混乱，调整之后更合理
+
+### ✨ Feat
+
+- 新增NaiveUI
+
+## 0.0.36（2023-05-08）
+### ✨ Feat
+- designer组件新增setData方法
+- designer组件新增getData方法
+- designer组件新增reset方法
+### 🐛 Bug Fixes
+- 修复deepCompareAndModify更改数组时导致数据修改不完全问题
+
+
+## 0.0.35（2023-04-29）
+### 🐛 Bug Fixes
+- 修复撤销重做失效bug
+- 编译ts类型无法自动推断类型
+- 修复element plus 编译后异步组件无法加载问题
+- 修复组件属性赋值null报错问题
+- 修复组件属性编辑异常问题
+
+...

package/docs/vite.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from "vite";
+import UnoCSS from "unocss/vite";
+// import monacoEditorPlugin from "vite-plugin-monaco-editor";
+
+export default defineConfig({
+  plugins: [
+    UnoCSS(),
+    // (monacoEditorPlugin as any).default({
+    //   languageWorkers: [
+    //     "editorWorkerService",
+    //     "css",
+    //     "html",
+    //     "json",
+    //     "typescript",
+    //   ],
+    // }),
+  ],
+});

package/docs//350/256/276/350/256/241/345/231/250/344/273/213/347/273/215.md

@@ -0,0 +1,21 @@
+扩展管理器
+
+页面管理器
+
+自定义脚本编写
+
+布局说明
+
+
+
+
+
+活动栏
+
+侧边栏
+
+状态栏
+
+编辑区域
+
+右边侧边栏

package/examples/README.md

@@ -0,0 +1,18 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+
+## Type Support For `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+
+If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+
+1. Disable the built-in TypeScript Extension
+   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
+   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
+2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.

package/examples/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" type="image/x-icon">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>epic-designer</title>
+    <link rel="stylesheet" href="https://api.iconify.design/mdi.css?icons=ab-testing">
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/examples/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@epic-designer/examples",
+  "private": true,
+  "version": "0.9.25",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@ant-design/icons-vue": "^7.0.1",
+    "ant-design-vue": "^4.2.5",
+    "axios": "^1.7.7",
+    "dayjs": "^1.11.13",
+    "vue": "^3.5.8",
+    "vue-router": "^4.4.5"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.1.4",
+    "typescript": "^5.6.2",
+    "unocss": "^0.62.4",
+    "vite": "^5.4.7",
+    "vite-plugin-monaco-editor": "^1.1.0",
+    "vite-plugin-vue-devtools": "7.4.5",
+    "vue-tsc": "^2.1.6"
+  }
+}

package/examples/src/App.vue

@@ -0,0 +1,5 @@
+<template>
+  <router-view></router-view>
+</template>
+<script lang="ts" setup>
+</script>

package/examples/src/layout/baseLayout.vue

@@ -0,0 +1,3 @@
+<template>
+    <router-view></router-view>
+</template>

package/examples/src/layout/components/Header/index.vue

@@ -0,0 +1,104 @@
+<template>
+    <div class="epic-demo-header h-64px px-6 flex items-center justify-between">
+        <a class="decoration-none items-center flex" href="https://docs.epicjs.cn" target="_blank">
+            <img src="@/assets/logo.png" class="w-22px h-22px" alt="" srcset="">
+            <span class="ml-4 font-bold text-16px">EpicDesigner低代码设计器</span>
+        </a>
+
+        <div class="epic-demo-header-right flex items-center">
+            <a class="mr-6" v-for="(item, index) in links" :key="index" :href="item.url">{{ item.title }}</a>
+            <Select class="w-116px" v-model:value="selectValue" size="small" :options="selectOptions" />
+            <Divider type="vertical" class="mx-3" />
+            <Switch v-model:checked="isDark">
+                <template #checkedChildren>Dark</template>
+                <template #unCheckedChildren>Light</template>
+            </Switch>
+            <Divider type="vertical" class="mx-3" />
+            <a class="w-26px" href="https://github.com/Kchengz/epic-designer" target="_blank" rel="noopener"
+                data-v-b354ede9="" data-v-82c704e6="">
+                <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                    <title>GitHub</title>
+                    <path fill="currentColor"
+                        d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12">
+                    </path>
+                </svg>
+            </a>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+import { useRoute, useRouter } from 'vue-router'
+import { computed, watch } from 'vue'
+import { pluginManager } from '@epic-designer/utils'
+import { useTheme } from '@epic-designer/hooks'
+
+import { setupAntd, setupElementPlus, setupNaiveUi } from "@epic-designer/ui";
+import { Divider, Switch, Select } from 'ant-design-vue'
+import 'element-plus/dist/index.css'
+import 'element-plus/theme-chalk/dark/css-vars.css'
+import "ant-design-vue/dist/reset.css";
+import { useStorage } from '@vueuse/core'
+const { isDark } = useTheme()
+const epicDarkMode = useStorage<boolean>('epic-dark-mode', false)
+isDark.value = epicDarkMode.value
+watch(() => isDark.value, () => {
+    epicDarkMode.value = isDark.value
+})
+
+
+const links = [
+    {
+        title: '文档',
+        url: 'https://docs.epicjs.cn'
+    },
+    {
+        title: '更新日志',
+        url: 'https://github.com/Kchengz/epic-designer/blob/develop/docs/updateLog.md'
+    },
+]
+
+const selectOptions = [
+    {
+        label: 'antDesigneVue',
+        value: 'ant-designe-vue',
+    },
+    {
+        label: 'elementPlus',
+        value: 'element-plus',
+    },
+    // {
+    //     label: 'naiveUi',
+    //     value: 'naive-ui',
+    // },
+]
+const router = useRouter()
+const route = useRoute()
+
+const selectValue = computed({
+    get() {
+        return route.params.ui as string
+
+    },
+    set(ui) {
+        router.push(`/${ui}/${route.path.split('/')[2]}`)
+        switchUI(ui)
+    }
+})
+
+// 切换选择ui
+function switchUI(ui: string) {
+    pluginManager.removeBaseComponents()
+    pluginManager.initialized.value = false
+
+    if (ui === 'ant-designe-vue') {
+        setupAntd()
+    } else if (ui === 'element-plus') {
+        setupElementPlus()
+    } else if (ui === 'naive-ui') {
+        setupNaiveUi()
+    }
+}
+
+
+switchUI(selectValue.value)
+</script>