From 56dede0932b1ac8c25bb4ffa8ec03cf69bc4798c Mon Sep 17 00:00:00 2001
From: hujiale <13306077+hujiale9527@user.noreply.gitee.com>
Date: Fri, 25 Oct 2024 12:39:28 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-test/src/app.vue                     |  22 +
 .../layouts/global-search/global-search.vue   |  46 +-
 apps/web-test/src/layouts/user/layout.vue     |  10 +-
 .../home/components/CardTiles/index.vue       | 415 ++++++++++--------
 .../home/components/GridGroup/index.vue       |   3 +-
 .../home/components/Output5/index.vue         |   2 +-
 .../src/views/dashboard/home/index.vue        |  59 ++-
 .../src/views/dashboard/home/register.vue     |  27 +-
 8 files changed, 337 insertions(+), 247 deletions(-)

diff --git a/apps/web-test/src/app.vue b/apps/web-test/src/app.vue
index 83e0b14a..937c2059 100644
--- a/apps/web-test/src/app.vue
+++ b/apps/web-test/src/app.vue
@@ -49,3 +49,25 @@ const tokenTheme = computed(() => {
     </App>
   </ConfigProvider>
 </template>
+<style lang="scss">
+.text-muted-foreground {
+  color: #eee !important;
+
+  .text-foreground {
+    color: #fff;
+  }
+
+  &:hover {
+    color: #ffff !important;
+  }
+
+  .hover\:text-foreground:hover {
+    color: #fff !important;
+  }
+}
+
+.vben-menu-item,
+.vben-sub-menu-content {
+  color: #fff !important;
+}
+</style>
diff --git a/apps/web-test/src/layouts/global-search/global-search.vue b/apps/web-test/src/layouts/global-search/global-search.vue
index 36c9d11d..8072f807 100644
--- a/apps/web-test/src/layouts/global-search/global-search.vue
+++ b/apps/web-test/src/layouts/global-search/global-search.vue
@@ -11,6 +11,7 @@ import {
   Search,
 } from '@vben/icons';
 import { $t } from '@vben/locales';
+import { usePreferences } from '@vben/preferences';
 import { isWindowsOs } from '@vben/utils';
 import { useVbenModal } from '@vben-core/popup-ui';
 
@@ -87,10 +88,7 @@ onMounted(() => {
   });
 });
 
-import { usePreferences } from '@vben/preferences';
-
-const {sidebarCollapsed } = usePreferences();
-
+const { sidebarCollapsed } = usePreferences();
 </script>
 
 <template>
@@ -99,8 +97,12 @@ const {sidebarCollapsed } = usePreferences();
       <template #title>
         <div class="flex items-center">
           <Search class="text-muted-foreground mr-2 size-4" />
-          <input ref="searchInputRef" v-model="keyword" :placeholder="$t('widgets.search.searchNavigate')"
-            class="ring-none placeholder:text-muted-foreground w-[80%] rounded-md border border-none bg-transparent p-2 pl-0 text-sm font-normal outline-none ring-0 ring-offset-transparent focus-visible:ring-transparent" />
+          <input
+            ref="searchInputRef"
+            v-model="keyword"
+            :placeholder="$t('widgets.search.searchNavigate')"
+            class="ring-none placeholder:text-muted-foreground w-[80%] rounded-md border border-none bg-transparent p-2 pl-0 text-sm font-normal outline-none ring-0 ring-offset-transparent focus-visible:ring-transparent"
+          />
         </div>
       </template>
 
@@ -123,22 +125,36 @@ const {sidebarCollapsed } = usePreferences();
         </div>
       </template>
     </Modal>
-    <div v-if="!sidebarCollapsed"
-      class="md:bg-accent group flex h-8 cursor-pointer items-center gap-3 rounded-2xl border-none bg-none px-2 py-0.5 outline-none"
-      @click="toggleOpen()">
-      <Search class="text-muted-foreground group-hover:text-foreground size-4 group-hover:opacity-100" />
-      <span class="text-muted-foreground group-hover:text-foreground hidden text-xs duration-300 md:block">
+    <div
+      v-if="!sidebarCollapsed"
+      class="group flex h-8 cursor-pointer items-center gap-3 rounded-2xl border-none bg-none px-2 py-0.5 outline-none"
+      @click="toggleOpen()"
+    >
+      <Search
+        class="text-muted-foreground group-hover:text-foreground size-4 group-hover:opacity-100"
+      />
+      <span
+        class="text-muted-foreground group-hover:text-foreground hidden text-xs duration-300 md:block"
+      >
         {{ $t('widgets.search.title') }}
       </span>
-      <span v-if="enableShortcutKey"
-        class="bg-background border-foreground/60 text-muted-foreground group-hover:text-foreground relative hidden rounded-sm rounded-r-xl px-1.5 py-1 text-xs leading-none group-hover:opacity-100 md:block">
+      <span
+        v-if="enableShortcutKey"
+        class="bg-background border-foreground/60 text-muted-foreground group-hover:text-foreground relative hidden rounded-sm rounded-r-xl px-1.5 py-1 text-xs leading-none group-hover:opacity-100 md:block"
+      >
         {{ isWindowsOs() ? 'Ctrl' : '⌘' }}
         <kbd>K</kbd>
       </span>
       <span v-else></span>
     </div>
-    <div v-else class="rounded-full w100% flex justify-center cursor-pointer" @click="toggleOpen()">
-      <Search class="text-muted-foreground group-hover:text-foreground size-4 group-hover:opacity-100" />
+    <div
+      v-else
+      class="w100% flex cursor-pointer justify-center rounded-full"
+      @click="toggleOpen()"
+    >
+      <Search
+        class="text-muted-foreground group-hover:text-foreground size-4 group-hover:opacity-100"
+      />
     </div>
   </div>
 </template>
diff --git a/apps/web-test/src/layouts/user/layout.vue b/apps/web-test/src/layouts/user/layout.vue
index bc7a5bc3..2af28c89 100644
--- a/apps/web-test/src/layouts/user/layout.vue
+++ b/apps/web-test/src/layouts/user/layout.vue
@@ -57,11 +57,11 @@ const PRESET = computed((): PresetItem[] => [
     tip: $t('preferences.horizontalTip'),
     type: 'header-nav',
   },
-  {
-    name: $t('preferences.mixedMenu'),
-    tip: $t('preferences.mixedMenuTip'),
-    type: 'mixed-nav',
-  },
+  // {
+  //   name: $t('preferences.mixedMenu'),
+  //   tip: $t('preferences.mixedMenuTip'),
+  //   type: 'mixed-nav',
+  // },
   // {
   //   name: $t('preferences.fullContent'),
   //   tip: $t('preferences.fullContentTip'),
diff --git a/apps/web-test/src/views/dashboard/home/components/CardTiles/index.vue b/apps/web-test/src/views/dashboard/home/components/CardTiles/index.vue
index 13e71c75..38480774 100644
--- a/apps/web-test/src/views/dashboard/home/components/CardTiles/index.vue
+++ b/apps/web-test/src/views/dashboard/home/components/CardTiles/index.vue
@@ -1,208 +1,251 @@
-<template>
-    <div class="content-box px-3 mt-2 h-[100%]">
-        <div class="filter-box py-3">
-            <Form layout="inline">
-                <FormItem label="标题">
-                    <Input class="!w-[150px]"></Input>
-                </FormItem>
-                <FormItem label="业务域">
-                    <Select placeholder="请选择" class="!w-[150px]"></Select>
-                </FormItem>
-                <FormItem label="适用范围">
-                    <Select v-model:value="scope" :options="options2" placeholder="请选择" class="!w-[150px]"></Select>
-                </FormItem>
-                <FormItem label="状态" v-if="type == 'portal'">
-                    <Select placeholder="请选择" class="!w-[150px]"></Select>
-                </FormItem>
-                <FormItem>
-                    <Button type="primary">查询</Button>
-                </FormItem>
-            </Form>
-        </div>
-        <div class="tiles-list flex flex-wrap justify-stretch gap-4 py-3 ">
-            <Card class="w-[18%] relative card-box" :bodyStyle="{ padding: 0 }"
-                v-for="(item, index) in list.slice(0, 10)" :key="index">
-                <div class="card-tp-b flex flex-col items-center">
-                    <img :src="'/xbyt/' + item.url" alt="" class="mt-3 w-[100px] h-[100px]">
-                    <div class="text-sm pb-2">{{ item.name }}</div>
-                </div>
-                <div class="card-bt-box pt-2 pl-6 text-xs flex flex-col gap-1 pb-3">
-                    <div class="c-b-item flex">
-                        <div class="font-semibold">编码：</div>{{ item.code }}
-                    </div>
-                    <div class="c-b-item flex">
-                        <div class="font-semibold">标题：</div>{{ item.name }}
-                    </div>
-                    <div class="c-b-item flex">
-                        <div class="font-semibold">业务域：</div>{{ item.work }}
-                    </div>
-                </div>
-                <div class="mask-box hidden">
-                    <div v-if="type == 'portal'"
-                        class="absolute inset-x-0 inset-y-0 bg-[rgba(0,0,0,.3)] flex items-center justify-center gap-4">
-                        <Button type="primary" @click="openInfo(item)">修改</Button>
-                        <Button type="primary" danger>删除</Button>
-                    </div>
-                    <div v-else-if="type == 'audit'"
-                        class="absolute inset-x-0 inset-y-0 bg-[rgba(0,0,0,.3)] flex items-center justify-center gap-4">
-                        <Button type="primary">通过</Button>
-                        <Button type="primary" danger>驳回</Button>
-                    </div>
-                    <ExpandOutlined class="absolute top-2 right-2 text-[#fff] cursor-pointer" />
-                </div>
-            </Card>
-        </div>
-        <div class="flex justify-end">
-            <Pagination v-model:current="current" :total="500" />
-        </div>
-
-        <Modal v-model:open="editcardShow" title="修改磁贴" :width="600">
-            <template #footer>
-                <div class="w-[100%] flex justify-center">
-                    <Button type="primary">预览磁贴</Button>
-                </div>
-            </template>
-            <div class="flex  gap-2">
-                <Form layout="inline" :label-col="labelCol" :wrapperCol="wrapperCol">
-                    <FormItem label="业务域" required>
-                        <Select placeholder="请选择" disabled></Select>
-                    </FormItem>
-                    <FormItem label="适用范围" required>
-                        <Select v-model:value="scope" disabled :options="options2" placeholder="请选择"></Select>
-                    </FormItem>
-                    <FormItem label="编码" required>
-                        <Input disabled v-model:value="editForm.code"></Input>
-                    </FormItem>
-                    <FormItem label="标题" required>
-                        <Input v-model:value="editForm.title"></Input>
-                    </FormItem>
-                    <FormItem label="数据源">
-                        <Input></Input>
-                    </FormItem>
-                    <FormItem label="磁贴大小">
-                        <div class="flex items-center">
-                            <div class="flex items-center">
-                                宽：
-                                <Select v-model:value="editForm.size.w" disabled>
-                                    <SelectOption value="1">1</SelectOption>
-                                    <SelectOption value="2">2</SelectOption>
-                                </Select>
-                            </div>
-                            <div class="flex items-center">
-                                高：
-                                <Select v-model:value="editForm.size.h" disabled>
-                                    <SelectOption value="1">1</SelectOption>
-                                    <SelectOption value="2">2</SelectOption>
-                                </Select>
-                            </div>
-                        </div>
-                    </FormItem>
-                    <FormItem label="图标" required>
-                        <Input></Input>
-                    </FormItem>
-                    <FormItem label="打开方式">
-                        <Select v-model:value="scope" :options="options2" placeholder="请选择"></Select>
-                    </FormItem>
-                    <FormItem label="作者" required>
-                        <Input></Input>
-                    </FormItem>
-                    <FormItem label="联系方式" required>
-                        <Input></Input>
-                    </FormItem>
-                    <FormItem label="链接地址" required :wrapperCol="itemWrapperCol">
-                        <div>
-                            <Input v-model:value="editForm.link"></Input>
-                            <Checkbox>经过授权才可使用</Checkbox>
-                        </div>
-                    </FormItem>
-                    <FormItem label="描述" :wrapperCol="itemWrapperCol">
-                        <Textarea v-model:value="editForm.doc" ></Textarea>
-                    </FormItem>
-                </Form>
-            </div>
-        </Modal>
-    </div>
-</template>
 <script setup lang="ts">
-import { ref, toRefs, reactive } from 'vue';
+import { reactive, ref, toRefs } from 'vue';
 
 import { ExpandOutlined } from '@ant-design/icons-vue';
-import { Button, Form, FormItem, Input,Checkbox, Select, Card, Pagination, Modal, SelectOption,Textarea  } from 'ant-design-vue';
-import { tilesList } from '../../tiles'
-const props = defineProps({
-    type: {
-        type: String,
-        default: ''
-    },
-    list: {
-        type: Object,
-        default: []
-    }
-})
+import {
+  Button,
+  Card,
+  Checkbox,
+  Form,
+  FormItem,
+  Input,
+  Modal,
+  Pagination,
+  Select,
+  SelectOption,
+  Textarea,
+} from 'ant-design-vue';
 
-let { list, type } = toRefs(props);
-for (let i = 0; i < tilesList.length; i++) {
-    let obj: any = {}
-    obj.name = tilesList[i]?.name;
-    obj.url = tilesList[i]?.name2;
-    obj.work = '经营管理';
-    obj.code = tilesList[i]?.name1.split('.')[0];
-    list.value.push(obj);
-    obj = null
+import { tilesList } from '../../tiles';
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: '',
+  },
+  list: {
+    type: Object,
+    default: [],
+  },
+});
+
+const { list, type } = toRefs(props);
+for (const element of tilesList) {
+  let obj: any = {};
+  obj.name = element?.name;
+  obj.url = element?.name2;
+  obj.work = '经营管理';
+  obj.code = element?.name1.split('.')[0];
+  list.value.push(obj);
+  obj = null;
 }
-let scope = 'all'
+const scope = 'all';
 
 const options2 = [
-    {
-        value: 'all',
-        label: '全部',
-    },
-]
-let current = ref(1);
+  {
+    value: 'all',
+    label: '全部',
+  },
+];
+const current = ref(1);
 
-let editcardShow = ref(false)
+const editcardShow = ref(false);
 
-let openInfo = (info) => {
-    editcardShow.value = true;
-    editForm.code = info.code;
-    editForm.title = info.name;
-}
+const openInfo = (info) => {
+  editcardShow.value = true;
+  editForm.code = info.code;
+  editForm.title = info.name;
+};
 let editForm = reactive({
-    domains: '',
-    scope: '',
-    code: "",
-    title: '',
-    dataSources: '',
-    size: {
-        w: '',
-        h: ''
-    },
-    icon: '',
-    openType: '',
-    author: '',
-    number: '',
-    link: 'www.baidu.com',
-    auth: true,
-    doc: ''
-
-})
-const labelCol = { style: { width: '100px',margin: '0 0 10px 0' } };
+  domains: '',
+  scope: '',
+  code: '',
+  title: '',
+  dataSources: '',
+  size: {
+    w: '',
+    h: '',
+  },
+  icon: '',
+  openType: '',
+  author: '',
+  number: '',
+  link: 'www.baidu.com',
+  auth: true,
+  doc: '',
+});
+const labelCol = { style: { width: '100px', margin: '0 0 10px 0' } };
 const wrapperCol = { style: { width: '150px' } };
 const itemWrapperCol = { style: { width: '415px' } };
-
 </script>
+<template>
+  <div class="content-box mt-2 h-[100%] px-3">
+    <div class="filter-box py-3">
+      <Form layout="inline">
+        <FormItem label="标题">
+          <Input class="!w-[150px]" />
+        </FormItem>
+        <FormItem label="业务域">
+          <Select class="!w-[150px]" placeholder="请选择" />
+        </FormItem>
+        <FormItem label="适用范围">
+          <Select
+            v-model:value="scope"
+            :options="options2"
+            class="!w-[150px]"
+            placeholder="请选择"
+          />
+        </FormItem>
+        <FormItem v-if="type == 'portal'" label="状态">
+          <Select class="!w-[150px]" placeholder="请选择" />
+        </FormItem>
+        <FormItem>
+          <Button type="primary">查询</Button>
+        </FormItem>
+      </Form>
+    </div>
+    <div class="tiles-list flex flex-wrap justify-stretch gap-4 py-3">
+      <Card
+        v-for="(item, index) in list.slice(0, 10)"
+        :key="index"
+        :body-style="{ padding: 0 }"
+        class="card-box relative w-[18%]"
+      >
+        <div class="card-tp-b flex flex-col items-center">
+          <img
+            :src="`/xbyt/${item.url}`"
+            alt=""
+            class="mt-3 h-[100px] w-[100px]"
+          />
+          <div class="pb-2 text-sm">{{ item.name }}</div>
+        </div>
+        <div class="card-bt-box flex flex-col gap-1 pb-3 pl-6 pt-2 text-xs">
+          <div class="c-b-item flex">
+            <div class="font-semibold">编码：</div>
+            {{ item.code }}
+          </div>
+          <div class="c-b-item flex">
+            <div class="font-semibold">标题：</div>
+            {{ item.name }}
+          </div>
+          <div class="c-b-item flex">
+            <div class="font-semibold">业务域：</div>
+            {{ item.work }}
+          </div>
+        </div>
+        <div class="mask-box hidden">
+          <div
+            v-if="type == 'portal'"
+            class="absolute inset-x-0 inset-y-0 flex items-center justify-center gap-4 bg-[rgba(0,0,0,.3)]"
+          >
+            <Button type="primary" @click="openInfo(item)">修改</Button>
+            <Button danger type="primary">删除</Button>
+          </div>
+          <div
+            v-else-if="type == 'audit'"
+            class="absolute inset-x-0 inset-y-0 flex items-center justify-center gap-4 bg-[rgba(0,0,0,.3)]"
+          >
+            <Button type="primary">通过</Button>
+            <Button danger type="primary">驳回</Button>
+          </div>
+          <ExpandOutlined
+            class="absolute right-2 top-2 cursor-pointer text-[#fff]"
+          />
+        </div>
+      </Card>
+    </div>
+    <div class="flex justify-end">
+      <Pagination v-model:current="current" :total="500" />
+    </div>
+
+    <Modal v-model:open="editcardShow" :width="600" title="修改磁贴">
+      <template #footer>
+        <div class="flex w-[100%] justify-center">
+          <Button type="primary">预览磁贴</Button>
+        </div>
+      </template>
+      <div class="flex gap-2">
+        <Form :label-col="labelCol" :wrapper-col="wrapperCol" layout="inline">
+          <FormItem label="业务域" required>
+            <Select disabled placeholder="请选择" />
+          </FormItem>
+          <FormItem label="适用范围" required>
+            <Select
+              v-model:value="scope"
+              :options="options2"
+              disabled
+              placeholder="请选择"
+            />
+          </FormItem>
+          <FormItem label="编码" required>
+            <Input v-model:value="editForm.code" disabled />
+          </FormItem>
+          <FormItem label="标题" required>
+            <Input v-model:value="editForm.title" />
+          </FormItem>
+          <FormItem label="数据源">
+            <Input />
+          </FormItem>
+          <FormItem label="磁贴大小">
+            <div class="flex items-center">
+              <div class="flex items-center">
+                宽：
+                <Select v-model:value="editForm.size.w" disabled>
+                  <SelectOption value="1">1</SelectOption>
+                  <SelectOption value="2">2</SelectOption>
+                </Select>
+              </div>
+              <div class="flex items-center">
+                高：
+                <Select v-model:value="editForm.size.h" disabled>
+                  <SelectOption value="1">1</SelectOption>
+                  <SelectOption value="2">2</SelectOption>
+                </Select>
+              </div>
+            </div>
+          </FormItem>
+          <FormItem label="图标" required>
+            <Input />
+          </FormItem>
+          <FormItem label="打开方式">
+            <Select
+              v-model:value="scope"
+              :options="options2"
+              placeholder="请选择"
+            />
+          </FormItem>
+          <FormItem label="作者" required>
+            <Input />
+          </FormItem>
+          <FormItem label="联系方式" required>
+            <Input />
+          </FormItem>
+          <FormItem :wrapper-col="itemWrapperCol" label="链接地址" required>
+            <div>
+              <Input v-model:value="editForm.link" />
+              <Checkbox>经过授权才可使用</Checkbox>
+            </div>
+          </FormItem>
+          <FormItem :wrapper-col="itemWrapperCol" label="描述">
+            <Textarea v-model:value="editForm.doc" />
+          </FormItem>
+        </Form>
+      </div>
+    </Modal>
+  </div>
+</template>
 <style scoped lang="scss">
 .tiles-list {
-    border-top: 1px solid #ddd;
+  border-top: 1px solid hsl(var(--border));
 }
 
 .card-bt-box {
-    border-top: 1px solid #ddd;
+  border-top: 1px solid hsl(var(--border));
 }
 
 .card-box:hover {
-    .mask-box {
-        display: block;
-    }
+  .mask-box {
+    display: block;
+  }
 }
-</style>
\ No newline at end of file
+</style>
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 6e2b9a0b..be868098 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
@@ -347,6 +347,7 @@ defineExpose({
             <CloseCircleFilled style="color: #f10215" />
           </span>
           <div
+            :class="{ 'cursor-pointer': !tilesIsMove }"
             class="us-card-box bg-background box-border h-[100%] w-[100%] min-w-[50px] px-2 py-2"
             @click="goPage(item)"
           >
@@ -393,7 +394,7 @@ defineExpose({
     user-select: none;
     flex-direction: column;
     border-radius: 10px;
-    border: 1px solid #ecf1f3;
+    border: 1px solid hsl(var(--border));
     position: relative;
     cursor: pointer;
 
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 eab10fd9..00e0ee90 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
@@ -80,6 +80,6 @@ defineExpose({
 .card-name {
   font-weight: 500;
   padding: 5px 0;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid hsl(var(--border));
 }
 </style>
diff --git a/apps/web-test/src/views/dashboard/home/index.vue b/apps/web-test/src/views/dashboard/home/index.vue
index dfe50c22..eae7c3cc 100644
--- a/apps/web-test/src/views/dashboard/home/index.vue
+++ b/apps/web-test/src/views/dashboard/home/index.vue
@@ -538,7 +538,7 @@ const formState = reactive({
             <CloseCircleFilled style="color: #f10215" />
           </span>
           <div
-            :class="{ 'cursor-pointer': !tilesIsMove }"
+            :class="{ 'cursor-pointer': !tilesIsMove && !item.isResize }"
             class="us-card-box bg-background box-border h-[100%] w-[100%] px-4 py-2"
             @click="goPage(item)"
           >
@@ -616,7 +616,6 @@ const formState = reactive({
                       }"
                       :draggable="haveItem(item.name)"
                       class="ctrl-box bg-background relative"
-                      @click="addTiles(item.name)"
                       @drag="drag"
                       @dragend="dragend($event)"
                       @dragstart="dragstart($event, item)"
@@ -638,10 +637,13 @@ const formState = reactive({
                     <div
                       v-for="item in componentsInfo.slice(22, 34)"
                       :key="item.name"
-                      :class="{ active: selectTilseArr.includes(item.name) }"
+                      :class="{
+                        'active pointer-events-none !cursor-no-drop': haveItem(
+                          item.name,
+                        ),
+                      }"
                       class="ctrl-box bg-background"
                       draggable="true"
-                      @click="addTiles(item.name)"
                       @drag="drag"
                       @dragend="dragend"
                       @dragstart="dragstart($event, item)"
@@ -651,7 +653,7 @@ const formState = reactive({
                       </div>
                       <img :src="`/xbyt/${item.name2}`" alt="" />
                       <Checkbox
-                        :checked="selectTilseArr.includes(item.name)"
+                        :checked="haveItem(item.name)"
                         :value="item.name"
                         class="absolute bottom-0 right-1"
                       />
@@ -663,10 +665,13 @@ const formState = reactive({
                     <div
                       v-for="item in componentsInfo.slice(34, 56)"
                       :key="item.name"
-                      :class="{ active: selectTilseArr.includes(item.name) }"
+                      :class="{
+                        'active pointer-events-none !cursor-no-drop': haveItem(
+                          item.name,
+                        ),
+                      }"
                       class="ctrl-box bg-background"
                       draggable="true"
-                      @click="addTiles(item.name)"
                       @drag="drag"
                       @dragend="dragend"
                       @dragstart="dragstart($event, item)"
@@ -676,7 +681,7 @@ const formState = reactive({
                       </div>
                       <img :src="`/xbyt/${item.name2}`" alt="" />
                       <Checkbox
-                        :checked="selectTilseArr.includes(item.name)"
+                        :checked="haveItem(item.name)"
                         :value="item.name"
                         class="absolute bottom-0 right-1"
                       />
@@ -688,10 +693,13 @@ const formState = reactive({
                     <div
                       v-for="item in componentsInfo.slice(56, 75)"
                       :key="item.name"
-                      :class="{ active: selectTilseArr.includes(item.name) }"
+                      :class="{
+                        'active pointer-events-none !cursor-no-drop': haveItem(
+                          item.name,
+                        ),
+                      }"
                       class="ctrl-box bg-background"
                       draggable="true"
-                      @click="addTiles(item.name)"
                       @drag="drag"
                       @dragend="dragend"
                       @dragstart="dragstart($event, item)"
@@ -701,7 +709,7 @@ const formState = reactive({
                       </div>
                       <img :src="`/xbyt/${item.name2}`" alt="" />
                       <Checkbox
-                        :checked="selectTilseArr.includes(item.name)"
+                        :checked="haveItem(item.name)"
                         :value="item.name"
                         class="absolute bottom-0 right-1"
                       />
@@ -713,10 +721,13 @@ const formState = reactive({
                     <div
                       v-for="item in componentsInfo.slice(75, 101)"
                       :key="item.name"
-                      :class="{ active: selectTilseArr.includes(item.name) }"
+                      :class="{
+                        'active pointer-events-none !cursor-no-drop': haveItem(
+                          item.name,
+                        ),
+                      }"
                       class="ctrl-box bg-background"
                       draggable="true"
-                      @click="addTiles(item.name)"
                       @drag="drag"
                       @dragend="dragend"
                       @dragstart="dragstart($event, item)"
@@ -726,7 +737,7 @@ const formState = reactive({
                       </div>
                       <img :src="`/xbyt/${item.name2}`" alt="" />
                       <Checkbox
-                        :checked="selectTilseArr.includes(item.name)"
+                        ::checked="haveItem(item.name)"
                         :value="item.name"
                         class="absolute bottom-0 right-1"
                       />
@@ -738,10 +749,13 @@ const formState = reactive({
                     <div
                       v-for="item in componentsInfo.slice(101, 102)"
                       :key="item.name"
-                      :class="{ active: selectTilseArr.includes(item.name) }"
+                      :class="{
+                        'active pointer-events-none !cursor-no-drop': haveItem(
+                          item.name,
+                        ),
+                      }"
                       class="ctrl-box bg-background"
                       draggable="true"
-                      @click="addTiles(item.name)"
                       @drag="drag"
                       @dragend="dragend"
                       @dragstart="dragstart($event, item)"
@@ -751,7 +765,7 @@ const formState = reactive({
                       </div>
                       <img :src="`/xbyt/${item.name2}`" alt="" />
                       <Checkbox
-                        :checked="selectTilseArr.includes(item.name)"
+                        :checked="haveItem(item.name)"
                         :value="item.name"
                         class="absolute bottom-0 right-1"
                       />
@@ -763,10 +777,13 @@ const formState = reactive({
                     <div
                       v-for="item in componentsInfo.slice(102, 127)"
                       :key="item.name"
-                      :class="{ active: selectTilseArr.includes(item.name) }"
+                      :class="{
+                        'active pointer-events-none !cursor-no-drop': haveItem(
+                          item.name,
+                        ),
+                      }"
                       class="ctrl-box bg-background"
                       draggable="true"
-                      @click="addTiles(item.name)"
                       @drag="drag"
                       @dragend="dragend"
                       @dragstart="dragstart($event, item)"
@@ -776,7 +793,7 @@ const formState = reactive({
                       </div>
                       <img :src="`/xbyt/${item.name2}`" alt="" />
                       <Checkbox
-                        :checked="selectTilseArr.includes(item.name)"
+                        :checked="haveItem(item.name)"
                         :value="item.name"
                         class="absolute bottom-0 right-1"
                       />
@@ -876,7 +893,7 @@ const formState = reactive({
     user-select: none;
     flex-direction: column;
     border-radius: 10px;
-    border: 1px solid #ecf1f3;
+    border: 1px solid hsl(var(--border));
     position: relative;
     cursor: pointer;
 
diff --git a/apps/web-test/src/views/dashboard/home/register.vue b/apps/web-test/src/views/dashboard/home/register.vue
index d3e3599d..ca6f36f9 100644
--- a/apps/web-test/src/views/dashboard/home/register.vue
+++ b/apps/web-test/src/views/dashboard/home/register.vue
@@ -26,6 +26,8 @@ import {
   VxeUI,
 } from 'vxe-table';
 
+import { groupList } from './tiles';
+
 const wrapperCol = { style: { width: '100px' } };
 watch(
   () => preferences.theme.mode,
@@ -38,24 +40,13 @@ watch(
   },
 );
 interface RowVO {
-  code: string;
-  name: string;
+  label: string;
+  value: string;
 }
 
 const selectRow = ref<null | RowVO>(null);
 
-const tableData = ref<RowVO[]>([
-  { code: 'xzczcz', name: '个人工作台' },
-  { code: 'xzczcz', name: '综合行政' },
-  { code: 'xzczcz', name: '经营管理' },
-  { code: 'xzczcz', name: '安全生产' },
-  { code: 'xzczcz', name: '勘探开发' },
-  { code: 'xzczcz', name: '数据管理' },
-  { code: 'xzczcz', name: '中心工作' },
-  { code: 'xzczcz', name: '总部系统' },
-  { code: 'xzczcz', name: '功能模块' },
-  { code: 'xzczcz', name: '工程院系统' },
-]);
+const tableData = ref<RowVO[]>(groupList);
 
 const tableRef = ref<VxeTableInstance<RowVO>>();
 
@@ -165,7 +156,7 @@ const templateClickNum = (index: number) => {
         ]"
       />
     </div>
-    <div class="mt-3 flex justify-center gap-3 pb-2">
+    <div class="mt-3 flex justify-center gap-14 pb-2">
       <div class="c-item flex flex-col items-center">
         <div class="s-t my-3">请选择业务域</div>
         <Form :wrapper-col="wrapperCol" layout="inline">
@@ -204,8 +195,8 @@ const templateClickNum = (index: number) => {
               </vxe-button>
             </template>
           </vxe-column>
-          <vxe-column field="code" title="业务域编码" width="120" />
-          <vxe-column field="name" title="业务域名称" width="120" />
+          <vxe-column field="value" title="业务域编码" width="140" />
+          <vxe-column field="label" title="业务域名称" width="140" />
         </vxe-table>
         <div
           v-if="nowCurrent == 0"
@@ -408,7 +399,7 @@ const templateClickNum = (index: number) => {
 <style scoped lang="scss">
 .c-item {
   border: 1px solid #ccc;
-  flex: 0.3333;
+  flex: 0.3;
   height: calc(100vh - 150px);
 }