From 9e07cf02149fadd880a6f1f15bc0dcad3786aeba Mon Sep 17 00:00:00 2001
From: hujiale <13306077+hujiale9527@user.noreply.gitee.com>
Date: Thu, 24 Oct 2024 18:43:43 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=BB=BA=E5=88=86=E7=BB=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/router/routes/modules/dashboard.ts    |   2 +-
 .../home/components/GridGroup/index.vue       |   1 -
 .../home/components/Output5/index.vue         |  18 +-
 .../src/views/dashboard/home/index.vue        | 544 +++++++++++-------
 4 files changed, 344 insertions(+), 221 deletions(-)

diff --git a/apps/web-test/src/router/routes/modules/dashboard.ts b/apps/web-test/src/router/routes/modules/dashboard.ts
index b4a9eb25..104a811b 100644
--- a/apps/web-test/src/router/routes/modules/dashboard.ts
+++ b/apps/web-test/src/router/routes/modules/dashboard.ts
@@ -148,7 +148,7 @@ const routes: RouteRecordRaw[] = [
         meta: {
           hideInMenu: true,
           icon: 'lucide:area-chart',
-          title: '代办管理',
+          title: '待办管理',
         },
       },
       {
diff --git a/apps/web-test/src/views/dashboard/home/components/GridGroup/index.vue b/apps/web-test/src/views/dashboard/home/components/GridGroup/index.vue
index b78b2838..9b4dacbe 100644
--- a/apps/web-test/src/views/dashboard/home/components/GridGroup/index.vue
+++ b/apps/web-test/src/views/dashboard/home/components/GridGroup/index.vue
@@ -322,7 +322,6 @@ const goPage = (item) => {
 <template>
   <div :id="domId" class="container-group">
     <!-- 自定义布局的部分 -->
-    {{ rowHeight }}
     <div class="grid-box select-none">
       <grid-layout
         v-if="rowHeight !== 0"
diff --git a/apps/web-test/src/views/dashboard/home/components/Output5/index.vue b/apps/web-test/src/views/dashboard/home/components/Output5/index.vue
index 318cf271..48c20d2b 100644
--- a/apps/web-test/src/views/dashboard/home/components/Output5/index.vue
+++ b/apps/web-test/src/views/dashboard/home/components/Output5/index.vue
@@ -16,12 +16,15 @@ const props = defineProps({
     default: {},
   },
 });
+const emits = defineEmits(['editGroupName']);
 const cardName = ref(props.data.name);
 const newCardName = ref(cardName.value);
 const isEdit = ref(true);
 const setNewName = () => {
   isEdit.value = !isEdit.value;
   cardName.value = newCardName.value;
+
+  emits('editGroupName', props.data.i, cardName.value);
 };
 const { data } = toRefs(props);
 </script>
@@ -38,20 +41,17 @@ const { data } = toRefs(props);
         @click="isEdit = !isEdit"
       />
     </div>
-    <div v-else class="card-name titlt-top">
+    <div v-else class="card-name titlt-top flex items-center justify-between">
       <Input
         v-model:value="newCardName"
         :autofocus="true"
         :bordered="false"
         size="small"
-      >
-        <template #addonAfter>
-          <Space warp>
-            <CheckOutlined @click="setNewName" />
-            <CloseOutlined @click="isEdit = !isEdit" />
-          </Space>
-        </template>
-      </Input>
+      />
+      <Space warp>
+        <CheckOutlined @click="setNewName" />
+        <CloseOutlined @click="isEdit = !isEdit" />
+      </Space>
     </div>
     <GridGroup :list="data.childer" class="flex-1" />
   </div>
diff --git a/apps/web-test/src/views/dashboard/home/index.vue b/apps/web-test/src/views/dashboard/home/index.vue
index 92cd623f..89498e88 100644
--- a/apps/web-test/src/views/dashboard/home/index.vue
+++ b/apps/web-test/src/views/dashboard/home/index.vue
@@ -6,6 +6,7 @@ import {
   nextTick,
   onBeforeUnmount,
   onMounted,
+  reactive,
   ref,
 } from 'vue';
 import { useRouter } from 'vue-router';
@@ -13,19 +14,27 @@ import { useRouter } from 'vue-router';
 import {
   CheckOutlined,
   CloseCircleFilled,
+  CloseOutlined,
   EditOutlined,
+  PlusOutlined,
   ShoppingCartOutlined,
   UndoOutlined,
 } from '@ant-design/icons-vue';
 import {
-  Button,
   Checkbox,
-  CheckboxGroup,
   Collapse,
   CollapsePanel,
   FloatButton,
   FloatButtonGroup,
+  Form,
+  FormItem,
+  Input,
+  InputGroup,
+  InputSearch,
+  Modal,
   Popover,
+  Select,
+  SelectOption,
 } from 'ant-design-vue';
 import { storeToRefs } from 'pinia';
 
@@ -128,6 +137,7 @@ const dragstart = (e, item) => {
   defaultW = item.w;
 };
 const drag = (e, item) => {
+  shop.value = false;
   e.preventDefault && e.preventDefault();
   const parentRect = document
     .querySelector('.grid-box')
@@ -195,7 +205,6 @@ const drag = (e, item) => {
   }
 };
 const dragend = (e) => {
-  console.log('eeeee', e);
   tilesIsMove.value = false;
   const parentRect = document
     .querySelector('.grid-box')
@@ -244,6 +253,7 @@ const dragend = (e) => {
         'block';
     } catch {}
   }
+  shop.value = true;
   nextTick(() => {
     // eslint-disable-next-line no-use-before-define
     tilesIsMove.value = true;
@@ -269,7 +279,7 @@ const shop = ref(false);
 // 编辑磁贴
 const editTiles = ref(false);
 // 商店分组展开
-const activeKeyArr = ref(['1', '2', '3']);
+const activeKeyArr = ref([]);
 // 选中的磁贴
 const selectTilseArr = ref([]);
 // 新增磁贴
@@ -320,51 +330,90 @@ const goPage = (item) => {
   if (tilesIsMove.value) return;
   router.push(item?.path);
 };
+const addTilesForm = ref(null);
 // 新增分组
 const addGroup = () => {
-  const arr = JSON.parse(JSON.stringify(layout.value));
-  const maxY = arr.reduce((max, item) => {
-    return Math.max(max, item.y);
-  }, -Infinity);
-  const obj = {
-    name: '新建分组',
-    w: 4,
-    h: 6,
-    component: './components/Output5/index.vue',
-    dom: '.titlt-top',
-    isResize: true,
-    X: 0,
-    y: 0,
-    i: Math.random() * 100,
-    loadComp: loadComponent('./components/Output5/index.vue'),
-    childer: [
-      {
-        name1: 'AUTO_1612159241967.png',
-        name2: 'AUTO_1612159241967_C车辆调度.png',
-        size: '2x2',
-        name: '车辆调度',
-        w: 1,
-        h: 2,
-        i: 0,
-        x: 1,
-        y: 1,
-        component: '../../components/Output1/index.vue',
-      },
-    ],
-  };
+  tilesIsMove.value = false;
+  addTilesForm.value.validateFields().then((res) => {
+    const arr = JSON.parse(JSON.stringify(layout.value));
+    const maxY = arr.reduce((max, item) => {
+      return Math.max(max, item.y);
+    }, 0);
+    const obj = {
+      name: formState.name,
+      w: formState.w,
+      h: formState.h,
+      component: './components/Output5/index.vue',
+      isResize: true,
+      x: 0,
+      dom: '.titlt-top',
+      y: maxY + 1,
+      i: Number.parseInt(Math.random() * 10_000),
+      loadComp: loadComponent('./components/Output5/index.vue'),
+      childer: [
+        {
+          name1: 'AUTO_1612159241967.png',
+          name2: 'AUTO_1612159241967_C车辆调度.png',
+          size: '2x2',
+          name: '车辆调度',
+          w: 1,
+          h: 2,
+          minW: 1,
+          minH: 2,
+          i: 0,
+          x: 1,
+          y: 1,
+          component: '../Output1/index.vue',
+        },
+      ],
+    };
 
-  layout.value.push(obj);
+    layout.value.push(obj);
+    formState.name = '';
+    formState.w = 4;
+    formState.h = 4;
 
-  console.log(layout.value, '00000');
+    addTilesModal.value = false;
+    nextTick(() => {
+      tilesIsMove.value = true;
+    });
+  });
 };
+
+// 编辑分组名称
+const editGroupName = (i, name) => {
+  layout.value.forEach((element) => {
+    if (element.i == i) {
+      element.name = name;
+    }
+  });
+
+  const newLayout = JSON.parse(JSON.stringify(layout.value));
+  window.localStorage.setItem('layout', JSON.stringify(newLayout));
+};
+
+// 查找画布中有没有当前元素
+const haveItem = (name) => {
+  return layout.value.some((item) => item.name == name);
+};
+
+// 磁贴商店筛选
+const shopFlotter = ref('1');
+
+// 新建磁贴弹层
+const addTilesModal = ref(false);
+
+const formState = reactive({
+  name: '',
+  w: 4,
+  h: 4,
+});
 </script>
 
 <template>
   <div id="container-canvas" class="container h-[calc(100%-10px)] px-[20px]">
     <!-- 自定义布局的部分 -->
-    {{ screenW }} - {{ rowHeight }}
     <div class="grid-box index-grid select-none">
-      <Button type="primary" @click="addGroup">新增分组</Button>
       <grid-layout
         v-if="rowHeight != 0"
         ref="gridLayout"
@@ -401,7 +450,12 @@ const addGroup = () => {
             class="us-card-box bg-background box-border h-[100%] w-[100%] px-4 py-2"
             @click="goPage(item)"
           >
-            <component :is="item.loadComp" :key="item.i" :data="item" />
+            <component
+              :is="item.loadComp"
+              :key="item.i"
+              :data="item"
+              @edit-group-name="editGroupName"
+            />
           </div>
         </grid-item>
 
@@ -423,6 +477,11 @@ const addGroup = () => {
         </FloatButton>
       </template>
       <template v-else>
+        <FloatButton tooltip="新建分组" @click="addTilesModal = true">
+          <template #icon>
+            <PlusOutlined style="font-size: 20px" />
+          </template>
+        </FloatButton>
         <FloatButton tooltip="保存修改" @click="cancelOrSure('sure')">
           <template #icon>
             <CheckOutlined style="font-size: 20px" />
@@ -433,193 +492,206 @@ const addGroup = () => {
             <UndoOutlined style="font-size: 20px" />
           </template>
         </FloatButton>
-        <Popover
-          v-model:open="shop"
-          placement="topRight"
-          title="磁贴商店（127）"
-          trigger="click"
-        >
+        <Popover v-model:open="shop" placement="topRight" trigger="click">
+          <template #title>
+            <div class="flex items-center justify-between">
+              <div class="text-lg">磁贴商店（127）</div>
+              <CloseOutlined class="cursor-pointer" @click="shop = false" />
+            </div>
+          </template>
           <template #content>
+            <InputGroup compact>
+              <Select v-model:value="shopFlotter">
+                <SelectOption value="1">全部应用磁贴</SelectOption>
+                <SelectOption value="2">Option2</SelectOption>
+              </Select>
+              <InputSearch placeholder="" style="width: 200px" />
+            </InputGroup>
             <div class="shop-box">
-              <CheckboxGroup v-model:value="selectTilseArr" style="width: 100%">
-                <Collapse v-model:active-key="activeKeyArr" style="width: 100%">
-                  <CollapsePanel key="1" header="个人工作台（22）">
-                    <!-- 可拖入的组件部分 -->
-                    <div class="components-box">
-                      <div
-                        v-for="item in componentsInfo.slice(0, 22)"
-                        :key="item.name"
-                        :class="{ active: selectTilseArr.includes(item.name) }"
-                        class="ctrl-box bg-background"
-                        draggable="true"
-                        @click="addTiles(item.name)"
-                        @drag="drag"
-                        @dragend="dragend($event)"
-                        @dragstart="dragstart($event, item)"
-                      >
-                        <div class="ctrl-name">
-                          {{ `${item.name}(${item.size})` }}
-                        </div>
-                        <img :src="`/xbyt/${item.name2}`" alt="" />
-                        <Checkbox
-                          :value="item.name"
-                          class="absolute bottom-0 right-1"
-                        />
+              <!-- <CheckboxGroup v-model:value="selectTilseArr" style="width: 100%"> -->
+              <Collapse v-model:active-key="activeKeyArr" style="width: 100%">
+                <CollapsePanel key="1" header="个人工作台（22）">
+                  <!-- 可拖入的组件部分 -->
+                  <div class="components-box">
+                    <div
+                      v-for="item in componentsInfo.slice(0, 22)"
+                      :key="item.name"
+                      :class="{
+                        'active pointer-events-none !cursor-no-drop': haveItem(
+                          item.name,
+                        ),
+                      }"
+                      :draggable="haveItem(item.name)"
+                      class="ctrl-box bg-background relative"
+                      @click="addTiles(item.name)"
+                      @drag="drag"
+                      @dragend="dragend($event)"
+                      @dragstart="dragstart($event, item)"
+                    >
+                      <div class="ctrl-name">
+                        {{ `${item.name}(${item.size})` }}
                       </div>
+                      <img :src="`/xbyt/${item.name2}`" alt="" />
+                      <Checkbox
+                        :checked="haveItem(item.name)"
+                        :value="item.name"
+                        class="absolute bottom-0 right-1"
+                      />
                     </div>
-                  </CollapsePanel>
-                  <CollapsePanel key="2" header="综合行政（12）">
-                    <div class="components-box">
-                      <div
-                        v-for="item in componentsInfo.slice(22, 34)"
-                        :key="item.name"
-                        :class="{ active: selectTilseArr.includes(item.name) }"
-                        class="ctrl-box bg-background"
-                        draggable="true"
-                        @click="addTiles(item.name)"
-                        @drag="drag"
-                        @dragend="dragend"
-                        @dragstart="dragstart($event, item)"
-                      >
-                        <div class="ctrl-name">
-                          {{ `${item.name}(${item.size})` }}
-                        </div>
-                        <img :src="`/xbyt/${item.name2}`" alt="" />
-                        <Checkbox
-                          :checked="selectTilseArr.includes(item.name)"
-                          :value="item.name"
-                          class="absolute bottom-0 right-1"
-                        />
+                  </div>
+                </CollapsePanel>
+                <CollapsePanel key="2" header="综合行政（12）">
+                  <div class="components-box">
+                    <div
+                      v-for="item in componentsInfo.slice(22, 34)"
+                      :key="item.name"
+                      :class="{ active: selectTilseArr.includes(item.name) }"
+                      class="ctrl-box bg-background"
+                      draggable="true"
+                      @click="addTiles(item.name)"
+                      @drag="drag"
+                      @dragend="dragend"
+                      @dragstart="dragstart($event, item)"
+                    >
+                      <div class="ctrl-name">
+                        {{ `${item.name}(${item.size})` }}
                       </div>
+                      <img :src="`/xbyt/${item.name2}`" alt="" />
+                      <Checkbox
+                        :checked="selectTilseArr.includes(item.name)"
+                        :value="item.name"
+                        class="absolute bottom-0 right-1"
+                      />
                     </div>
-                  </CollapsePanel>
-                  <CollapsePanel key="3" header="经营管理（22）">
-                    <div class="components-box">
-                      <div
-                        v-for="item in componentsInfo.slice(34, 56)"
-                        :key="item.name"
-                        :class="{ active: selectTilseArr.includes(item.name) }"
-                        class="ctrl-box bg-background"
-                        draggable="true"
-                        @click="addTiles(item.name)"
-                        @drag="drag"
-                        @dragend="dragend"
-                        @dragstart="dragstart($event, item)"
-                      >
-                        <div class="ctrl-name">
-                          {{ `${item.name}(${item.size})` }}
-                        </div>
-                        <img :src="`/xbyt/${item.name2}`" alt="" />
-                        <Checkbox
-                          :checked="selectTilseArr.includes(item.name)"
-                          :value="item.name"
-                          class="absolute bottom-0 right-1"
-                        />
+                  </div>
+                </CollapsePanel>
+                <CollapsePanel key="3" header="经营管理（22）">
+                  <div class="components-box">
+                    <div
+                      v-for="item in componentsInfo.slice(34, 56)"
+                      :key="item.name"
+                      :class="{ active: selectTilseArr.includes(item.name) }"
+                      class="ctrl-box bg-background"
+                      draggable="true"
+                      @click="addTiles(item.name)"
+                      @drag="drag"
+                      @dragend="dragend"
+                      @dragstart="dragstart($event, item)"
+                    >
+                      <div class="ctrl-name">
+                        {{ `${item.name}(${item.size})` }}
                       </div>
+                      <img :src="`/xbyt/${item.name2}`" alt="" />
+                      <Checkbox
+                        :checked="selectTilseArr.includes(item.name)"
+                        :value="item.name"
+                        class="absolute bottom-0 right-1"
+                      />
                     </div>
-                  </CollapsePanel>
-                  <CollapsePanel key="4" header="安全生产（19）">
-                    <div class="components-box">
-                      <div
-                        v-for="item in componentsInfo.slice(56, 75)"
-                        :key="item.name"
-                        :class="{ active: selectTilseArr.includes(item.name) }"
-                        class="ctrl-box bg-background"
-                        draggable="true"
-                        @click="addTiles(item.name)"
-                        @drag="drag"
-                        @dragend="dragend"
-                        @dragstart="dragstart($event, item)"
-                      >
-                        <div class="ctrl-name">
-                          {{ `${item.name}(${item.size})` }}
-                        </div>
-                        <img :src="`/xbyt/${item.name2}`" alt="" />
-                        <Checkbox
-                          :checked="selectTilseArr.includes(item.name)"
-                          :value="item.name"
-                          class="absolute bottom-0 right-1"
-                        />
+                  </div>
+                </CollapsePanel>
+                <CollapsePanel key="4" header="安全生产（19）">
+                  <div class="components-box">
+                    <div
+                      v-for="item in componentsInfo.slice(56, 75)"
+                      :key="item.name"
+                      :class="{ active: selectTilseArr.includes(item.name) }"
+                      class="ctrl-box bg-background"
+                      draggable="true"
+                      @click="addTiles(item.name)"
+                      @drag="drag"
+                      @dragend="dragend"
+                      @dragstart="dragstart($event, item)"
+                    >
+                      <div class="ctrl-name">
+                        {{ `${item.name}(${item.size})` }}
                       </div>
+                      <img :src="`/xbyt/${item.name2}`" alt="" />
+                      <Checkbox
+                        :checked="selectTilseArr.includes(item.name)"
+                        :value="item.name"
+                        class="absolute bottom-0 right-1"
+                      />
                     </div>
-                  </CollapsePanel>
-                  <CollapsePanel key="5" header="勘探开发（26）">
-                    <div class="components-box">
-                      <div
-                        v-for="item in componentsInfo.slice(75, 101)"
-                        :key="item.name"
-                        :class="{ active: selectTilseArr.includes(item.name) }"
-                        class="ctrl-box bg-background"
-                        draggable="true"
-                        @click="addTiles(item.name)"
-                        @drag="drag"
-                        @dragend="dragend"
-                        @dragstart="dragstart($event, item)"
-                      >
-                        <div class="ctrl-name">
-                          {{ `${item.name}(${item.size})` }}
-                        </div>
-                        <img :src="`/xbyt/${item.name2}`" alt="" />
-                        <Checkbox
-                          :checked="selectTilseArr.includes(item.name)"
-                          :value="item.name"
-                          class="absolute bottom-0 right-1"
-                        />
+                  </div>
+                </CollapsePanel>
+                <CollapsePanel key="5" header="勘探开发（26）">
+                  <div class="components-box">
+                    <div
+                      v-for="item in componentsInfo.slice(75, 101)"
+                      :key="item.name"
+                      :class="{ active: selectTilseArr.includes(item.name) }"
+                      class="ctrl-box bg-background"
+                      draggable="true"
+                      @click="addTiles(item.name)"
+                      @drag="drag"
+                      @dragend="dragend"
+                      @dragstart="dragstart($event, item)"
+                    >
+                      <div class="ctrl-name">
+                        {{ `${item.name}(${item.size})` }}
                       </div>
+                      <img :src="`/xbyt/${item.name2}`" alt="" />
+                      <Checkbox
+                        :checked="selectTilseArr.includes(item.name)"
+                        :value="item.name"
+                        class="absolute bottom-0 right-1"
+                      />
                     </div>
-                  </CollapsePanel>
-                  <CollapsePanel key="6" header="数据管理（1）">
-                    <div class="components-box">
-                      <div
-                        v-for="item in componentsInfo.slice(101, 102)"
-                        :key="item.name"
-                        :class="{ active: selectTilseArr.includes(item.name) }"
-                        class="ctrl-box bg-background"
-                        draggable="true"
-                        @click="addTiles(item.name)"
-                        @drag="drag"
-                        @dragend="dragend"
-                        @dragstart="dragstart($event, item)"
-                      >
-                        <div class="ctrl-name">
-                          {{ `${item.name}(${item.size})` }}
-                        </div>
-                        <img :src="`/xbyt/${item.name2}`" alt="" />
-                        <Checkbox
-                          :checked="selectTilseArr.includes(item.name)"
-                          :value="item.name"
-                          class="absolute bottom-0 right-1"
-                        />
+                  </div>
+                </CollapsePanel>
+                <CollapsePanel key="6" header="数据管理（1）">
+                  <div class="components-box">
+                    <div
+                      v-for="item in componentsInfo.slice(101, 102)"
+                      :key="item.name"
+                      :class="{ active: selectTilseArr.includes(item.name) }"
+                      class="ctrl-box bg-background"
+                      draggable="true"
+                      @click="addTiles(item.name)"
+                      @drag="drag"
+                      @dragend="dragend"
+                      @dragstart="dragstart($event, item)"
+                    >
+                      <div class="ctrl-name">
+                        {{ `${item.name}(${item.size})` }}
                       </div>
+                      <img :src="`/xbyt/${item.name2}`" alt="" />
+                      <Checkbox
+                        :checked="selectTilseArr.includes(item.name)"
+                        :value="item.name"
+                        class="absolute bottom-0 right-1"
+                      />
                     </div>
-                  </CollapsePanel>
-                  <CollapsePanel key="7" header="总部系统（25）">
-                    <div class="components-box">
-                      <div
-                        v-for="item in componentsInfo.slice(102, 127)"
-                        :key="item.name"
-                        :class="{ active: selectTilseArr.includes(item.name) }"
-                        class="ctrl-box bg-background"
-                        draggable="true"
-                        @click="addTiles(item.name)"
-                        @drag="drag"
-                        @dragend="dragend"
-                        @dragstart="dragstart($event, item)"
-                      >
-                        <div class="ctrl-name">
-                          {{ `${item.name}(${item.size})` }}
-                        </div>
-                        <img :src="`/xbyt/${item.name2}`" alt="" />
-                        <Checkbox
-                          :checked="selectTilseArr.includes(item.name)"
-                          :value="item.name"
-                          class="absolute bottom-0 right-1"
-                        />
+                  </div>
+                </CollapsePanel>
+                <CollapsePanel key="7" header="总部系统（25）">
+                  <div class="components-box">
+                    <div
+                      v-for="item in componentsInfo.slice(102, 127)"
+                      :key="item.name"
+                      :class="{ active: selectTilseArr.includes(item.name) }"
+                      class="ctrl-box bg-background"
+                      draggable="true"
+                      @click="addTiles(item.name)"
+                      @drag="drag"
+                      @dragend="dragend"
+                      @dragstart="dragstart($event, item)"
+                    >
+                      <div class="ctrl-name">
+                        {{ `${item.name}(${item.size})` }}
                       </div>
+                      <img :src="`/xbyt/${item.name2}`" alt="" />
+                      <Checkbox
+                        :checked="selectTilseArr.includes(item.name)"
+                        :value="item.name"
+                        class="absolute bottom-0 right-1"
+                      />
                     </div>
-                  </CollapsePanel>
-                </Collapse>
-              </CheckboxGroup>
+                  </div>
+                </CollapsePanel>
+              </Collapse>
+              <!-- </CheckboxGroup> -->
             </div>
           </template>
           <FloatButton tooltip="磁贴商店">
@@ -633,6 +705,49 @@ const addGroup = () => {
         </Popover>
       </template>
     </FloatButtonGroup>
+    <Modal
+      v-model:open="addTilesModal"
+      centered
+      title="新建分组"
+      @ok="addGroup"
+    >
+      <Form ref="addTilesForm" :model="formState">
+        <FormItem
+          :rules="[
+            { required: true, message: '标题不能为空且长度不能超过50字节' },
+          ]"
+          label="标题"
+          name="name"
+        >
+          <Input v-model:value="formState.name" placeholder="请输入" />
+        </FormItem>
+        <FormItem label="尺寸" name="w" required>
+          <div class="flex items-center gap-2">
+            <div class="flex items-center">
+              宽：
+              <Select v-model:value="formState.w">
+                <template v-for="item in 16" :key="item">
+                  <SelectOption v-if="item >= 4" :value="item">
+                    {{ item }}
+                  </SelectOption>
+                </template>
+              </Select>
+            </div>
+            ×
+            <div class="flex items-center">
+              高：
+              <Select v-model:value="formState.h">
+                <template v-for="item in 10" :key="item">
+                  <SelectOption v-if="item >= 4" :value="item">
+                    {{ item }}
+                  </SelectOption>
+                </template>
+              </Select>
+            </div>
+          </div>
+        </FormItem>
+      </Form>
+    </Modal>
   </div>
 </template>
 
@@ -693,6 +808,15 @@ const addGroup = () => {
       object-fit: contain;
     }
   }
+
+  .mask {
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 2;
+    background: rgba($color: #000000, $alpha: 0.4);
+  }
 }
 
 .us-card-box {