新增t design选择框组件

GoEasyDesigner/frontend/src/app11.vue

@@ -62,7 +62,8 @@
         <DraggableDivider :target-element-id="'right'" direction="left"></DraggableDivider>
 
         <el-tab-pane :label="$t('app.components')">
-          <el-collapse accordion model-value="1" style="border: none;padding: 0px 8px">
+
+          <el-collapse accordion v-model="BoxActiveName" style="border: none;padding: 0px 8px">
             <el-collapse-item :title="$t('app.system_components')" name="1">
               <el-row>
                 <el-col v-for="(item, index) in BoxComponentNames['system']" :span="24" style="margin-bottom: 8px">
@@ -225,7 +226,7 @@
 </template>
 
 <script setup>
-import {inject, nextTick, onMounted, ref} from 'vue';
+import {inject, nextTick, onMounted, ref,watch} from 'vue';
 import {useAppStore} from '@/stores/appStore'
 import {ElMessage} from "element-plus";
 import {Coin, Edit, Help, Key, Open, Tools, Switch} from "@element-plus/icons-vue";
@@ -316,6 +317,14 @@ async function ReSize() {
 
 }
 
+const BoxActiveName = ref('1')
+//记录 BoxActiveName 的变化写到本地存储
+watch(BoxActiveName, function BoxActiveNameChange() {
+  localStorage.setItem("BoxActiveName", BoxActiveName.value)
+})
+
+
+
 onMounted(() => {
   store.scrollContainer = scrollContainer.value;
   appAction.init()
@@ -355,6 +364,10 @@ onMounted(() => {
   })
 
   init_tailwindcss()
+  // 恢复
+  if (localStorage.getItem("BoxActiveName")) {
+    BoxActiveName.value = localStorage.getItem("BoxActiveName")
+  }
 })
 
 function init_tailwindcss() {

GoEasyDesigner/frontend/src/components/boxs/td/Select/Select.js

@@ -0,0 +1,19 @@
+export default {
+    top: "0",
+    left: "0",
+    width: "80",
+    height: "32",
+    noPlace: true,
+    visible: true,
+    disable: false,
+    zIndex: 0,
+    value: "small",
+    options:[
+        {"label": "默认", "value": "default"},
+        {"label": "大号", "value": "large"},
+        {"label": "小号", "value": "small"},
+    ],
+    multiple: false,
+    autoWidth: false,
+
+}

GoEasyDesigner/frontend/src/components/boxs/td/Select/Select.vue

@@ -0,0 +1,33 @@
+<template>
+  <t-select
+      v-model="item.value"
+      :onChange="onSendEvent('onChange',item.value)"
+      :multiple="item.multiple"
+      :auto-width="item.autoWidth"
+      :borderless="item.borderless"
+      :size="item.size"
+  >
+    <t-option
+        v-for="(v, i) in item.options"
+        :label="v.label"
+        :key="v.label"
+        :value="v.value"
+
+    />
+  </t-select>
+
+
+</template>
+
+<script setup>
+import {defineEmits, defineProps} from "vue";
+
+const {item} = defineProps(['item'])
+const emits = defineEmits(["CustomEvent"]);
+
+function onSendEvent(name, data) {
+  console.log("自定义组件", name, "发送数据", data);
+  emits("CustomEvent", name, data);
+}
+
+</script>

GoEasyDesigner/frontend/src/components/boxs/td/Select/SelectAttr.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="属性表格">
+
+    <el-form
+        label-position="left"
+        label-width="100px"
+        style="max-width: 460px"
+    >
+      <component is="common-properties" :item="item"/>
+      <el-form-item label="size">
+        <el-select v-model="props.item.size" style="width: 100%">
+          <el-option
+              v-for="(item, index) in sizeOptions"
+              :key="item"
+              :label="item.label"
+              :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="multiple">
+        <el-switch v-model="item.multiple"/>
+      </el-form-item>
+      <el-form-item label="autoWidth">
+        <el-switch v-model="item.autoWidth"/>
+      </el-form-item>
+      <el-form-item label="borderless">
+        <el-switch v-model="item.borderless"/>
+      </el-form-item>
+
+      <el-form-item label="value">
+        <el-input v-model="item.value"/>
+      </el-form-item>
+
+      <el-form label-position="top">
+        <el-form-item label="options"
+        >
+          <el-row style="width: 100%;text-align: center">
+            <el-col :span="10" >
+              label
+            </el-col>
+            <el-col :span="10">
+              value
+            </el-col>
+          </el-row>
+
+          <el-row v-for="(item, index) in props.item.options">
+            <el-col :span="10">
+              <el-input
+                  v-model="item.label"
+                  placeholder=""
+              />
+            </el-col>
+
+            <el-col :span="10">
+              <el-input
+                  v-model="item.value"
+                  placeholder=""
+              />
+            </el-col>
+            <el-col :span="4">
+              <el-button @click.stop="删除(item.value)" :icon="Delete" size="small"></el-button>
+            </el-col>
+          </el-row>
+
+          <el-button @click.stop="增加()" size="small">增加选择夹</el-button>
+        </el-form-item>
+      </el-form>
+
+    </el-form>
+  </div>
+  <component is="common-event-component" :item="props.item" :eventName="eventName"/>
+
+
+</template>
+<script setup>
+import {defineEmits, defineProps, onMounted, ref} from "vue";
+import {Delete} from "@element-plus/icons-vue";
+
+import {useAppStore} from '@/stores/appStore'
+
+const store = useAppStore()
+
+const emits = defineEmits(["添加事件被选择"]); // 声明接受的事件
+const props = defineProps(['item']);
+let sizeOptions = ref([
+  {"label": "默认", "value": "default"},
+  {"label": "大号", "value": "large"},
+  {"label": "小号", "value": "small"},
+]);
+
+function 删除(value) {
+  let index = props.item.options.findIndex((item) => item.value === value);
+  props.item.options.splice(index, 1);
+}
+
+function 增加() {
+  let k = store.获取索引("options")
+
+  props.item.options.push({"label": k, "value": k});
+}
+
+
+let eventName = ref([
+  {"label": "选项被改变", "value": "onChange"},
+  {"label": "被单击", "value": "click"},
+  {"label": "鼠标左键被按下", "value": "mousedown"},
+  {"label": "鼠标左键被放开", "value": "mouseup"},
+  {"label": "被双击", "value": "dblclick"},
+  {"label": "鼠标右键被按下", "value": "contextmenu"},
+  {"label": "鼠标位置被移动", "value": "mousemove"},
+  {"label": "获得焦点", "value": "focus"},
+  {"label": "失去焦点", "value": "blur"},
+  {"label": "按下某键", "value": "keydown"},
+  {"label": "放开某键", "value": "keyup"},
+  {"label": "滚轮被滚动", "value": "mousewheel"}
+])
+
+
+onMounted(() => {
+  if (localStorage.getItem("locale") === "English") {
+    sizeOptions.value.forEach((item) => {
+      item.label = item.value;
+    });
+  }
+});
+</script>
+