客户端兼容

duolabmeng6 · Oct 12, 2023 · ac4166a · ac4166a
1 parent 8124673
commit ac4166a
Show file tree

Hide file tree

Showing 13 changed files with 437 additions and 14 deletions.
diff --git a/.gitignore b/.gitignore
@@ -28,3 +28,4 @@ coverage
 *.sw?
 .vscode
 *.lockb
+GoEasyDesigner/frontend/package.json.md5
diff --git a/GoEasyDesigner/frontend/src/components/渲染设计组件.vue b/GoEasyDesigner/frontend/src/components/渲染设计组件.vue
@@ -74,7 +74,6 @@
       <template v-else>
         <component :is="item.组件名称" :item="item"/>
         <component is="渲染组件" v-for="(subItem, subIndex) in item.子组件" :key="subIndex" :item="subItem"/>
-
       </template>
     </div>
   </div>

diff --git a/wails-demo/frontend/index.html b/wails-demo/frontend/index.html
@@ -5,6 +5,16 @@
     <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
     <title>myproject</title>
 </head>
+<style>
+    * {
+        box-sizing: border-box;
+    }
+
+    .el-tree-node__children{
+        width: 500px !important;
+    }
+
+</style>
 <body style="overflow: hidden">
 <div id="app"></div>
 <script src="./src/main.js" type="module"></script>

diff --git a/wails-demo/frontend/src/components/渲染组件.vue b/wails-demo/frontend/src/components/渲染组件.vue
@@ -1,7 +1,6 @@
 <template>
   <div
-      :style="getItemStyle(item)"
-      style="position: absolute"
+      :style="getItemStyleShape(item)"
   >
     <div
         v-show="item.可视"
@@ -10,9 +9,25 @@
         :class="{ 'disabled': item.禁用 }"
         class="子组件"
     >
-
-      <component :is="item.组件名称" :item="item"/>
-      <component is="渲染组件" v-for="(subItem, subIndex) in item.子组件" :key="subIndex" :item="subItem"/>
+      <template v-if="item.组件名称=='按钮'">
+        <component is="按钮" :item="item"/>
+      </template>
+      <template v-else-if="item.组件名称=='布局容器'">
+        <component is="渲染组件" v-for="(subItem, subIndex) in item.子组件" :key="subIndex" :item="subItem"/>
+      </template>
+      <template v-else-if="item.组件名称=='选择夹'">
+        <component is="选择夹" :item="item"/>
+      </template>
+      <template v-else-if="item.组件名称=='常用布局'">
+        <component is="常用布局" :item="item"/>
+      </template>
+      <template v-else-if="item.组件名称=='弹性布局'">
+        <component is="弹性布局" :item="item"/>
+      </template>
+      <template v-else>
+        <component :is="item.组件名称" :item="item"/>
+        <component is="渲染组件" v-for="(subItem, subIndex) in item.子组件" :key="subIndex" :item="subItem"/>
+      </template>
     </div>
   </div>
 </template>
@@ -22,7 +37,7 @@ import {defineProps} from 'vue';
 
 const {item} = defineProps(['item']);
 import {引入窗口数据} from '@/窗口/窗口数据'
-import {getItemStyle} from "@/public";
+import {getItemStyleShape} from "@/public";
 
 const store = 引入窗口数据()
 const vDemo = {

diff --git a/wails-demo/frontend/src/components/组件/常用布局.vue b/wails-demo/frontend/src/components/组件/常用布局.vue
@@ -0,0 +1,180 @@
+<template>
+  <template v-if="item.布局方式 == 'header-main'">
+    <el-container :style="getItemStyle(item)">
+      <el-header>
+        <component is="渲染组件" v-for="(subItem, subIndex) in getSubComponents('header')"
+                   :key="subIndex" :item="subItem"/>
+      </el-header>
+      <el-main>
+        <component is="渲染组件" v-for="(subItem, subIndex) in getSubComponents('main')"
+                   :key="subIndex" :item="subItem"/>
+      </el-main>
+    </el-container>
+  </template>
+  <template v-if="item.布局方式 == 'header-main-footer'">
+    <el-container :style="getItemStyle(item)">
+      <el-header>
+        <component is="渲染组件" v-for="(subItem, subIndex) in  getSubComponents('header')"
+                   :key="subIndex" :item="subItem"/>
+      </el-header>
+      <el-main>
+        <component is="渲染组件" v-for="(subItem, subIndex) in getSubComponents('main')"
+                   :key="subIndex" :item="subItem"/>
+      </el-main>
+      <el-footer>
+        <component is="渲染组件" v-for="(subItem, subIndex) in getSubComponents('footer')"
+                   :key="subIndex" :item="subItem"/>
+      </el-footer>
+    </el-container>
+  </template>
+  <template v-if="item.布局方式 == 'aside-main'">
+    <el-container :style="getItemStyle(item)">
+      <el-aside :width="getSubComponents('aside')[0].width">
+
+        <component is="渲染组件" v-for="(subItem, subIndex) in  getSubComponents('aside')"
+                   :key="subIndex" :item="subItem"/>
+      </el-aside>
+      <el-main>
+        <component is="渲染组件" v-for="(subItem, subIndex) in getSubComponents('main')"
+                   :key="subIndex" :item="subItem"/>
+      </el-main>
+    </el-container>
+  </template>
+  <template v-if="item.布局方式 == 'header-aside-main'">
+    <el-container :style="getItemStyle(item)">
+      <el-header>
+        <component is="渲染组件" v-for="(subItem, subIndex) in  getSubComponents('header')"
+                   :key="subIndex" :item="subItem"/>
+      </el-header>
+      <el-container>
+        <el-aside :width="getSubComponents('aside')[0].width">
+          <component is="渲染组件" v-for="(subItem, subIndex) in  getSubComponents('aside')"
+                     :key="subIndex" :item="subItem"/>
+        </el-aside>
+        <el-main>
+          <component is="渲染组件" v-for="(subItem, subIndex) in getSubComponents('main')"
+                     :key="subIndex" :item="subItem"/>
+        </el-main>
+      </el-container>
+    </el-container>
+  </template>
+  <template v-if="item.布局方式 == 'header-aside-main-footer'">
+    <el-container :style="getItemStyle(item)">
+      <el-header>
+        <component is="渲染组件" v-for="(subItem, subIndex) in  getSubComponents('header')"
+                   :key="subIndex" :item="subItem"/>
+      </el-header>
+      <el-container>
+        <el-aside :width="getSubComponents('aside')[0].width">
+
+          <component is="渲染组件" v-for="(subItem, subIndex) in  getSubComponents('aside')"
+                     :key="subIndex" :item="subItem"/>
+        </el-aside>
+        <el-container>
+
+          <el-main>
+            <component is="渲染组件" v-for="(subItem, subIndex) in getSubComponents('main')"
+                       :key="subIndex" :item="subItem"/>
+          </el-main>
+          <el-footer>
+            <component is="渲染组件" v-for="(subItem, subIndex) in getSubComponents('footer')"
+                       :key="subIndex" :item="subItem"/>
+          </el-footer>
+        </el-container>
+      </el-container>
+    </el-container>
+  </template>
+  <template v-if="item.布局方式 == 'aside-header-main'">
+    <el-container :style="getItemStyle(item)">
+      <el-aside :width="getSubComponents('aside')[0].width">
+
+        <component is="渲染组件" v-for="(subItem, subIndex) in  getSubComponents('aside')"
+                   :key="subIndex" :item="subItem"/>
+      </el-aside>
+      <el-container>
+        <el-header>
+          <component is="渲染组件" v-for="(subItem, subIndex) in  getSubComponents('header')"
+                     :key="subIndex" :item="subItem"/>
+        </el-header>
+        <el-main>
+          <component is="渲染组件" v-for="(subItem, subIndex) in getSubComponents('main')"
+                     :key="subIndex" :item="subItem"/>
+        </el-main>
+
+      </el-container>
+    </el-container>
+  </template>
+  <template v-if="item.布局方式 == 'aside-header-main-footer'">
+    <el-container :style="getItemStyle(item)">
+      <el-aside :width="getSubComponents('aside')[0].width">
+
+        <component is="渲染组件" v-for="(subItem, subIndex) in  getSubComponents('aside')"
+                   :key="subIndex" :item="subItem"/>
+      </el-aside>
+      <el-container>
+        <el-header>
+          <component is="渲染组件" v-for="(subItem, subIndex) in  getSubComponents('header')"
+                     :key="subIndex" :item="subItem"/>
+        </el-header>
+        <el-main>
+          <component is="渲染组件" v-for="(subItem, subIndex) in getSubComponents('main')"
+                     :key="subIndex" :item="subItem"/>
+        </el-main>
+        <el-footer>
+          <component is="渲染组件" v-for="(subItem, subIndex) in getSubComponents('footer')"
+                     :key="subIndex" :item="subItem"/>
+        </el-footer>
+      </el-container>
+    </el-container>
+  </template>
+
+</template>
+
+<script>
+import {getItemStyle} from "@/public";
+
+export default {
+  methods: {
+    getItemStyle,
+    getSubComponents(area) {
+      let index;
+      for (let i = 0; i < this.item.子组件.length; i++) {
+        if (this.item.子组件[i].名称.includes(area)) {
+          index = i;
+          break;
+        }
+      }
+      console.log("index", index)
+      return [this.item.子组件[index]];
+    },
+  },
+  props: {
+    item: {
+      type: Object,
+      default: '',
+    }
+  },
+}
+</script>
+<script setup>
+
+
+</script>
+<style>
+.el-header {
+  --el-header-padding: 0px !important;
+}
+
+.el-main {
+  --el-main-padding: 0px !important;
+}
+
+.el-footer {
+  --el-footer-padding: 0px !important;
+}
+
+.el-aside {
+  --el-aside-padding: 0px !important;
+}
+
+</style>
diff --git a/wails-demo/frontend/src/components/组件/弹性布局.vue b/wails-demo/frontend/src/components/组件/弹性布局.vue
@@ -0,0 +1,28 @@
+<template>
+  <el-row :gutter="item.列间隔" :justify="item.对齐方式" style="height: 100%">
+    <el-col v-for="(DivItem, DivItemIndex) in item.子组件"
+            :key="DivItemIndex"
+            :span="DivItem.占比"
+    >
+      <component is="渲染组件" v-for="(item2, DivItemIndex2) in [DivItem]" :key="DivItemIndex2"
+                 :item="item2"
+
+      />
+    </el-col>
+
+  </el-row>
+</template>
+
+<script>
+import {getItemStyle} from "@/public";
+
+export default {
+  methods: {getItemStyle},
+  props: {
+    item: {
+      type: Object,
+      default: '',
+    }
+  },
+}
+</script>
diff --git a/wails-demo/frontend/src/components/组件/按钮.vue b/wails-demo/frontend/src/components/组件/按钮.vue
@@ -5,6 +5,7 @@
       v-bind:disabled="item.禁用"
       :type="item.按钮类型"
       :size="item.尺寸=='custom' ?'':item.尺寸"
+
   >{{ item.标题 }}</el-button>
 </template>
 

diff --git a/wails-demo/frontend/src/components/组件/标签.vue b/wails-demo/frontend/src/components/组件/标签.vue
@@ -1,10 +1,18 @@
 <template>
+  <div
+      class="text-container"
+      :style="getItemStyle(item)"
+  >
     <el-text
-        :getItemStyle="getItemStyle(item)"
+        :style="{color: item.文字颜色,fontSize: item.字体大小+'px'}"
+        :class="item.标签位置"
         :size="item.尺寸"
-        :truncated="item.省略号"
         :tag="item.文字样式"
-    >{{ item.标题 }}</el-text>
+        :truncated="item.省略号"
+    >{{ item.标题 }}
+    </el-text>
+  </div>
+
 </template>
 
 <script>
@@ -19,4 +27,70 @@ export default {
     }
   },
 }
-</script>
+</script>
+<style>
+.text-container {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+
+.text-top-left {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.text-top-right {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.text-bottom-left {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.text-bottom-right {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+
+.text-top-center {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.text-bottom-center {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.text-left-center {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+}
+
+.text-right-center {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+}
+
+.text-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+</style>
-Original file line number
+Diff line change
@@ Expand Up / @@ -28,3 +28,4 @@ coverage @@
     *.sw?
     .vscode
     *.lockb
+    GoEasyDesigner/frontend/package.json.md5