form-designer-xinyi 1.0.0

package/docs/updateLog.md

@@ -0,0 +1,364 @@
+## 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,13 @@
+<!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>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/examples/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@epic-designer/examples",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@ant-design/icons-vue": "^7.0.1",
+    "ant-design-vue": "^4.2.1",
+    "dayjs": "^1.11.11",
+    "vue": "^3.4.26",
+    "vue-router": "^4.3.2"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.4",
+    "typescript": "^5.4.5",
+    "unocss": "^0.59.4",
+    "vite": "^5.2.10",
+    "vite-plugin-monaco-editor": "^1.1.0",
+    "vite-plugin-vue-devtools": "7.1.3",
+    "vue-tsc": "^2.0.16"
+  }
+}

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,102 @@
+<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, useTheme } from '@epic-designer/utils'
+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>

package/examples/src/layout/components/Main/Maximize.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="maximize-box">
+    <div class="maximize" @click="exitMaximize">
+      <CompressOutlined v-if="maximize" class="iconfont" />
+      <ExpandOutlined v-else class="iconfont" />
+      
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { CompressOutlined,ExpandOutlined } from '@ant-design/icons-vue'
+// const globalStore = useGlobalStore();
+import { computed, watch } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+const router = useRouter()
+const route = useRoute()
+const exitMaximize = () => {
+  router.push({
+    query: {
+      ...route.query,
+      maximize: maximize.value ? undefined : '1'
+    }
+  })
+};
+
+const maximize = computed(() => {
+  return route.query.maximize == '1'
+})
+
+// 监听当前页面是否最大化，动态添加 class
+watch(
+  () => maximize.value,
+  () => {
+    const app = document.getElementById("app") as HTMLElement;
+    if (maximize.value) app.classList.add("main-maximize");
+    else app.classList.remove("main-maximize");
+  },
+  { immediate: true }
+);
+</script>
+
+<style scoped lang="less">
+.maximize-box{
+  position: absolute;
+  width: 42px;
+  height: 42px;
+  overflow: hidden;
+  top: 0;
+  right: 0;
+}
+
+.maximize {
+  position: absolute;
+  top: -25px;
+  right: -25px;
+  z-index: 999;
+  width: 55px;
+  height: 55px;
+  cursor: pointer;
+  background-color: #909399;
+  border-radius: 50%;
+  opacity: 0.9;
+
+  &:hover {
+    background-color: #73767a;
+  }
+
+  .iconfont {
+    position: relative;
+    top: 53%;
+    left: 19%;
+    font-size: 14px;
+    color: #ffffff;
+  }
+}
+</style>

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

@@ -0,0 +1,16 @@
+<template>
+    <div :key="uiKey" class="epic-page-container">
+        <Maximize />
+        <router-view></router-view>
+    </div>
+</template>
+<script lang="ts" setup>
+import Maximize from './Maximize.vue'
+
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+const route = useRoute()
+const uiKey = computed(() => {
+    return route.params.ui as string
+})
+</script>