feat: 优化布局, 左右侧边栏支持隐藏, 全屏和非全屏功能优化

.eslintrc.js

@@ -42,5 +42,6 @@ module.exports = {
     "@typescript-eslint/no-var-requires": 0,
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/explicit-module-boundary-types": "off",
+    "vue/no-v-model-argument":  "off"
   },
 };

README.md

@@ -1,4 +1,7 @@
-<h1>vue-form-design</h1>
+<p align="center">
+ <img src="https://cdnjson.com/images/2024/03/20/logo56d6f604a78d5e473.png" height="160" />
+</p>
+<h1 align="center>vue-form-design</h1>
 
 Starfish 可视化动态表单平台. 完全采用 `ECMAScript` 模块（`ESM`）规范来编写和组织代码，使用了最新的 `Vue3`、`Vite`、`Element-Plus`、`TypeScript` 等主流技术开发
 
@@ -152,7 +155,7 @@ app.component(Dynamicform.name, Dynamicform);
 
 动态表单组件使用
 
-`formResult`可以为空,list 是通过编辑器生成的结果json,搭配使用
+`formResult`可以为空,list 是通过编辑器生成的结果 json,搭配使用
 
 ```js
 <Dynamicform v-model:formResult="formResult" :allFormList="list" ></Dynamicform>
@@ -184,11 +187,6 @@ app.component(Dynamicform.name, Dynamicform);
 - 属性菜单 tab 自定义
   panel: ["form", "json", "global"] 组件配置、json 配置、表单配置, 不传则默认全展示
 
-1、布局控件建议增加表格控件，可以配出类似 word 表单
-2、建议增加打印
-3、建议增加 PC、PAD、H5 的预览功能
-4、建议增加自定义样式配置
-
 ## `Star`
 
 非常感谢留下星星的好心人，感谢您的支持 :heart:

bug.md → feat.md

@@ -4,7 +4,7 @@
 - 导入导出 json ✅
 - 预览功能优化,样式太丑  ✅
 - 增加表格
-- 布局增加卡片、栅格、标签页
+- 布局增加卡片、栅格、标签页 ✅
 - 布局下的表单验证 ✅
 - 组件层级结构树 ✅
 - 容器组件的显示条件优化 ✅
@@ -21,9 +21,11 @@
 - 国际化
 - 主题颜色
 - json配置tab下, 在布局表单中选择其他表单, 配置不显示
-- 设计个logo
+- 设计个logo ✅
 - 布局优化  参考(https://epic.kcz66.com/demo/element-plus/)
 - 新增签名、评价表单
 - 表单新增提示,间距,html 
 - tab选中 初始化
-- 异步加载 loading 过度动画 如jsonEditor
+- 异步加载 loading 过度动画 如jsonEditor ✅
+- 自定义标签宽度, 每个表单都可以单独设置, 而非全局
+- 左右布局可隐藏

packages/editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "starfish-editor",
-  "version": "1.1.16",
+  "version": "1.1.17",
   "main": "dist/starfish-editor.umd.js",
   "style": "dist/style.css",
   "module": "dist/starfish-editor.es.js",

packages/editor/src/components/NavList.vue

@@ -32,7 +32,9 @@
         effect="dark"
         content="全屏"
         placement="top"
-        v-if="!fullscreen && btnIsShow('left', 'fullscreen')"
+        v-if="
+          !fullscreen && btnIsShow('left', 'fullscreen') && supportFullScreen
+        "
       >
         <span class="iconfont icon-quanping" @click="handleFullScreen()"></span>
       </el-tooltip>
@@ -41,7 +43,9 @@
         effect="dark"
         content="非全屏"
         placement="top"
-        v-if="fullscreen && btnIsShow('left', 'fullscreen')"
+        v-if="
+          fullscreen && btnIsShow('left', 'fullscreen') && supportFullScreen
+        "
       >
         <span class="iconfont icon-suoxiao1" @click="handleFullScreen()"></span>
       </el-tooltip>
@@ -269,6 +273,7 @@ export default defineComponent({
     const fullscreen = computed(() => uiControl?.get("isFullscreen"));
     const allFormList = computed(() => formStore?.get("allFormList"));
     const pageType = computed(() => uiControl?.get("pageType"));
+    const supportFullScreen = ref(!!document.fullscreenEnabled);
     // const extensions = [json()];
     const jsonDialog = ref();
     const tree = ref();
@@ -409,6 +414,7 @@ export default defineComponent({
     return {
       // extensions,
       code,
+      supportFullScreen,
       handleFormSave,
       handleFormPre,
       jsonDialog,
@@ -443,7 +449,38 @@ export default defineComponent({
         hisContrl?.go();
       },
       handleFullScreen: () => {
-        uiControl?.set("isFullscreen", !uiControl?.get("isFullscreen"));
+        const value = !uiControl?.get("isFullscreen");
+        uiControl?.set("isFullscreen", value);
+        if (value) {
+          const element: any = document.documentElement;
+
+          if (element.requestFullscreen) {
+            element.requestFullscreen();
+          } else if (element.mozRequestFullScreen) {
+            // Firefox
+            element.mozRequestFullScreen();
+          } else if (element.webkitRequestFullscreen) {
+            // Chrome, Safari and Opera
+            element.webkitRequestFullscreen();
+          } else if (element.msRequestFullscreen) {
+            // IE/Edge
+            element.msRequestFullscreen();
+          }
+        } else {
+          const doc:any = document;
+          if (doc.exitFullscreen) {
+            doc.exitFullscreen();
+          } else if (doc.mozCancelFullScreen) {
+            // Firefox
+            doc.mozCancelFullScreen();
+          } else if (doc.webkitExitFullscreen) {
+            // Chrome, Safari and Opera
+            doc.webkitExitFullscreen();
+          } else if (doc.msExitFullscreen) {
+            // IE/Edge
+            doc.msExitFullscreen();
+          }
+        }
       },
       handleTree() {
         dialog.value = true;