From 201cfd7322896abe90e7510fe5c776270f4993f2 Mon Sep 17 00:00:00 2001
From: hujiale <13306077+hujiale9527@user.noreply.gitee.com>
Date: Thu, 17 Oct 2024 15:39:55 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A3=81=E8=B4=B4=E7=BC=96=E8=BE=91=E3=80=81?=
 =?UTF-8?q?=E7=A3=81=E8=B4=B4=E5=AE=A1=E6=A0=B8=E3=80=81=E5=BE=85=E5=8A=9E?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-test/src/layouts/user/like.vue       |   3 -
 apps/web-test/src/plugins/fastCrud.ts         |  14 +
 apps/web-test/src/plugins/vxeTable.ts         | 202 ++++++++++++
 .../src/router/routes/modules/dashboard.ts    |  37 ++-
 .../src/router/routes/modules/demos.ts        |   1 +
 .../src/router/routes/modules/vben.ts         |   1 +
 .../views/dashboard/home/NestedComponent.vue  |  38 +++
 .../src/views/dashboard/home/audit.vue        |  50 +++
 .../home/components/CardTiles/index.vue       | 111 +++++++
 .../home/components/GridGroup/index.vue       | 111 +++++--
 .../home/components/Output1/index.vue         |   2 +-
 .../home/components/Output2/index.vue         | 118 +++++--
 .../home/components/Output5/index.vue         |  12 +-
 .../src/views/dashboard/home/index.vue        | 306 +++++++++++++-----
 .../src/views/dashboard/home/main.vue         |  41 +++
 .../src/views/dashboard/home/portal.vue       |  35 ++
 .../src/views/dashboard/home/test.vue         | 137 ++++++++
 .../src/views/dashboard/home/tiles.ts         |  10 +-
 .../widgets/user-dropdown/user-dropdown.vue   |   2 +-
 19 files changed, 1068 insertions(+), 163 deletions(-)
 create mode 100644 apps/web-test/src/plugins/fastCrud.ts
 create mode 100644 apps/web-test/src/plugins/vxeTable.ts
 create mode 100644 apps/web-test/src/views/dashboard/home/NestedComponent.vue
 create mode 100644 apps/web-test/src/views/dashboard/home/audit.vue
 create mode 100644 apps/web-test/src/views/dashboard/home/components/CardTiles/index.vue
 create mode 100644 apps/web-test/src/views/dashboard/home/main.vue
 create mode 100644 apps/web-test/src/views/dashboard/home/portal.vue
 create mode 100644 apps/web-test/src/views/dashboard/home/test.vue

diff --git a/apps/web-test/src/layouts/user/like.vue b/apps/web-test/src/layouts/user/like.vue
index bf9ecfd7..c13291bc 100644
--- a/apps/web-test/src/layouts/user/like.vue
+++ b/apps/web-test/src/layouts/user/like.vue
@@ -113,7 +113,6 @@ watch(builtinValue, (n, o) => {
             builtinType: n
         }
     })
-console.log('zzzz',preferences.theme.builtinType);
 })
 let menuOpen = ref(preferences.sidebar.enable)
 watch(menuOpen, (n, o) => {
@@ -122,7 +121,6 @@ watch(menuOpen, (n, o) => {
             enable: n
         }
     })
-console.log('zz111zz',n);
 })
 let menuTheme = ref(preferences.theme.semiDarkSidebar)
 watch(menuTheme, (n, o) => {
@@ -131,7 +129,6 @@ watch(menuTheme, (n, o) => {
             semiDarkSidebar: n
         }
     })
-console.log('zz222zz',n);
 })
 let value1 = ref('')
 let activeKey = ref('1');
diff --git a/apps/web-test/src/plugins/fastCrud.ts b/apps/web-test/src/plugins/fastCrud.ts
new file mode 100644
index 00000000..29c46213
--- /dev/null
+++ b/apps/web-test/src/plugins/fastCrud.ts
@@ -0,0 +1,14 @@
+import type { App } from 'vue';
+
+import FastCrud from '@fast-crud/fast-crud';
+import ui from '@fast-crud/ui-antdv4';
+import Antdv from 'ant-design-vue';
+import '@fast-crud/fast-crud/dist/style.css';
+import '@fast-crud/ui-antdv4/dist/style.css';
+
+export function registerFastCrud(app: App) {
+  app.use(Antdv);
+  app.use(ui);
+  app.use(FastCrud, {
+  });
+}
diff --git a/apps/web-test/src/plugins/vxeTable.ts b/apps/web-test/src/plugins/vxeTable.ts
new file mode 100644
index 00000000..850334f0
--- /dev/null
+++ b/apps/web-test/src/plugins/vxeTable.ts
@@ -0,0 +1,202 @@
+import type { App } from 'vue';
+
+import VXETable from 'vxe-table'
+
+import {
+  VxeTable,
+  VxeColumn,
+  VxeColgroup,
+  VxeGrid,
+  VxeToolbar
+} from 'vxe-table'
+
+import VxeUI from 'vxe-pc-ui'
+
+import {
+
+  VxeAlert,
+  VxeAnchor,
+  VxeAnchorLink,
+  VxeBreadcrumb,
+  VxeBreadcrumbItem,
+  VxeButton,
+  VxeButtonGroup,
+  VxeCalendar,
+  VxeCard,
+  VxeCarousel,
+  VxeCheckbox,
+  VxeCheckboxGroup,
+  VxeCol,
+  VxeCollapse,
+  VxeCollapsePane,
+  VxeDatePicker,
+  VxeDrawer,
+  VxeForm,
+  VxeFormDesign,
+  VxeFormGather,
+  VxeFormItem,
+  VxeFormView,
+  VxeIcon,
+  VxeIconPicker,
+  VxeImage,
+  VxeImageGroup,
+  VxeImagePreview,
+  VxeInput,
+  VxeLayoutAside,
+  VxeLayoutBody,
+  VxeLayoutContainer,
+  VxeLayoutFooter,
+  VxeLayoutHeader,
+  VxeLink,
+  VxeListDesign,
+  VxeListView,
+  VxeList,
+  VxeLoading,
+  VxeMenu,
+  VxeModal,
+  VxeNumberInput,
+  VxeOptgroup,
+  VxeOption,
+  VxePager,
+  VxePasswordInput,
+  VxePrintPageBreak,
+  VxePrint,
+  VxePulldown,
+  VxeRadio,
+  VxeRadioButton,
+  VxeRadioGroup,
+  VxeRow,
+  VxeSelect,
+  VxeSwitch,
+  VxeTabPane,
+  VxeTabs,
+  VxeTag,
+  VxeText,
+  VxeTextarea,
+  VxeTip,
+  VxeTooltip,
+  VxeTree,
+  VxeTreeSelect,
+  VxeUpload
+} from 'vxe-pc-ui'
+
+import VXETablePluginExportXLSX from 'vxe-table-plugin-export-xlsx'
+import ExcelJS from 'exceljs'
+
+import VXETablePluginAntd from 'vxe-table-plugin-antd'
+
+// 导入主题变量，也可以重写主题变量
+import 'vxe-pc-ui/lib/style.css'
+import 'vxe-table/lib/style.css'
+import 'vxe-table/styles/cssvar.scss'
+import 'vxe-pc-ui/styles/cssvar.scss'
+
+// VxeUI.setTheme('dark')
+
+VxeUI.component(VxeAlert)
+VxeUI.component(VxeAnchor)
+VxeUI.component(VxeAnchorLink)
+VxeUI.component(VxeBreadcrumb)
+VxeUI.component(VxeBreadcrumbItem)
+VxeUI.component(VxeButton)
+VxeUI.component(VxeButtonGroup)
+VxeUI.component(VxeCalendar)
+VxeUI.component(VxeCard)
+VxeUI.component(VxeCarousel)
+VxeUI.component(VxeCheckbox)
+VxeUI.component(VxeCheckboxGroup)
+VxeUI.component(VxeCol)
+VxeUI.component(VxeCollapse)
+VxeUI.component(VxeCollapsePane)
+VxeUI.component(VxeDatePicker)
+VxeUI.component(VxeDrawer)
+VxeUI.component(VxeForm)
+VxeUI.component(VxeFormDesign)
+VxeUI.component(VxeFormGather)
+VxeUI.component(VxeFormItem)
+VxeUI.component(VxeFormView)
+VxeUI.component(VxeIcon)
+VxeUI.component(VxeIconPicker)
+VxeUI.component(VxeImage)
+VxeUI.component(VxeImageGroup)
+VxeUI.component(VxeImagePreview)
+VxeUI.component(VxeInput)
+VxeUI.component(VxeLayoutAside)
+VxeUI.component(VxeLayoutBody)
+VxeUI.component(VxeLayoutContainer)
+VxeUI.component(VxeLayoutFooter)
+VxeUI.component(VxeLayoutHeader)
+VxeUI.component(VxeLink)
+VxeUI.component(VxeListDesign)
+VxeUI.component(VxeListView)
+VxeUI.component(VxeList)
+VxeUI.component(VxeLoading)
+VxeUI.component(VxeMenu)
+VxeUI.component(VxeModal)
+VxeUI.component(VxeNumberInput)
+VxeUI.component(VxeOptgroup)
+VxeUI.component(VxeOption)
+VxeUI.component(VxePager)
+VxeUI.component(VxePasswordInput)
+VxeUI.component(VxePrintPageBreak)
+VxeUI.component(VxePrint)
+VxeUI.component(VxePulldown)
+VxeUI.component(VxeRadio)
+VxeUI.component(VxeRadioButton)
+VxeUI.component(VxeRadioGroup)
+VxeUI.component(VxeRow)
+VxeUI.component(VxeSelect)
+VxeUI.component(VxeSwitch)
+VxeUI.component(VxeTabPane)
+VxeUI.component(VxeTabs)
+VxeUI.component(VxeTag)
+VxeUI.component(VxeText)
+VxeUI.component(VxeTextarea)
+VxeUI.component(VxeTip)
+VxeUI.component(VxeTooltip)
+VxeUI.component(VxeTree)
+VxeUI.component(VxeTreeSelect)
+VxeUI.component(VxeUpload)
+
+VxeUI.component(VxeTable)
+VxeUI.component(VxeColumn)
+VxeUI.component(VxeColgroup)
+VxeUI.component(VxeGrid)
+VxeUI.component(VxeToolbar)
+
+VXETable.use(VXETablePluginAntd)
+
+VXETable.use(VXETablePluginExportXLSX, {
+  ExcelJS
+})
+
+VXETable.setConfig({
+  // zIndex: 9999,
+  grid: {
+    size: 'mini',
+    proxyConfig: {
+      props: {
+        result: 'data.rows',
+        total: 'data.total',
+      },
+    },
+    toolbarConfig: {
+      enabled: true,
+    },
+  },
+
+  pager: {
+    background: true,
+    pageSize: 50,
+    pageSizes: [50, 100, 300, 500, 1000],
+    layouts: ['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total'],
+  },
+})
+export function registerVxeTable(app: App) {
+  app.use(VxeUI)
+  app.use(VxeTable)
+  app.use(VxeColumn)
+  app.use(VxeColgroup)
+  app.use(VxeGrid)
+  app.use(VxeToolbar)
+}
diff --git a/apps/web-test/src/router/routes/modules/dashboard.ts b/apps/web-test/src/router/routes/modules/dashboard.ts
index a0cd6f86..3f60bfe2 100644
--- a/apps/web-test/src/router/routes/modules/dashboard.ts
+++ b/apps/web-test/src/router/routes/modules/dashboard.ts
@@ -70,10 +70,43 @@ const routes: RouteRecordRaw[] = [
           hideInMenu: true,
           icon: 'lucide:area-chart',
           title: '总部系统',
+          affixTab: true
         },
       },
 
-      ...getRouter(firstRouter, 'first')
+      ...getRouter(firstRouter, 'first'),
+      {
+        name: 'portal',
+        path: '/portal',
+        component: () => import('#/views/dashboard/home/portal.vue'),
+        // component: () => import('#/views/dashboard/home/main.vue'),
+        meta: {
+          hideInMenu: true,
+          icon: 'lucide:area-chart',
+          title: '磁贴管理',
+        },
+      },
+      {
+        name: 'audit',
+        path: '/audit',
+        component: () => import('#/views/dashboard/home/audit.vue'),
+        // component: () => import('#/views/dashboard/home/main.vue'),
+        meta: {
+          hideInMenu: true,
+          icon: 'lucide:area-chart',
+          title: '磁贴审核',
+        },
+      },
+      // {
+      //   name: 'test',
+      //   path: '/test',
+      //   component: () => import('#/views/dashboard/home/test.vue'),
+      //   // component: () => import('#/views/dashboard/home/main.vue'),
+      //   meta: {
+      //     icon: 'lucide:area-chart',
+      //     title: '测试',
+      //   },
+      // },
       // {
       //   name: 'zshxgw',
       //   path: '',
@@ -105,6 +138,4 @@ const routes: RouteRecordRaw[] = [
 ...getRouter(otherRouter,'other')
 ];
 
-console.log('999999',...getRouter(otherRouter,'other'));
-
 export default routes;
diff --git a/apps/web-test/src/router/routes/modules/demos.ts b/apps/web-test/src/router/routes/modules/demos.ts
index 2f06bd0b..296d4a1f 100644
--- a/apps/web-test/src/router/routes/modules/demos.ts
+++ b/apps/web-test/src/router/routes/modules/demos.ts
@@ -28,3 +28,4 @@
 // ];
 
 // export default routes;
+export default [];
diff --git a/apps/web-test/src/router/routes/modules/vben.ts b/apps/web-test/src/router/routes/modules/vben.ts
index d28cc297..ff4bd291 100644
--- a/apps/web-test/src/router/routes/modules/vben.ts
+++ b/apps/web-test/src/router/routes/modules/vben.ts
@@ -79,3 +79,4 @@
 // ];
 
 // export default routes;
+export default [];
diff --git a/apps/web-test/src/views/dashboard/home/NestedComponent.vue b/apps/web-test/src/views/dashboard/home/NestedComponent.vue
new file mode 100644
index 00000000..bf6c4359
--- /dev/null
+++ b/apps/web-test/src/views/dashboard/home/NestedComponent.vue
@@ -0,0 +1,38 @@
+<template>
+  <VueDraggable class="drag-area" tag="ul" v-model="list" group="g1">
+    <li v-for="el in modelValue" :key="el.name" class="grup-box">
+      <p>{{ el.name }}</p>
+      <nested-component v-model="el.children" />
+    </li>
+  </VueDraggable>
+</template>
+<script setup lang="ts">
+import { VueDraggable } from 'vue-draggable-plus'
+import { computed } from 'vue'
+
+interface IList {
+  name: string
+  children: IList[]
+}
+
+interface Props {
+  modelValue: IList[]
+}
+
+const props = defineProps<Props>()
+
+interface Emits {
+  (e: 'update:modelValue', value: IList[]): void
+}
+
+const emits = defineEmits<Emits>()
+const list = computed({
+  get: () => props.modelValue,
+  set: value => emits('update:modelValue', value)
+})
+</script>
+<style scoped>
+.drag-area {
+  min-height: 50px;
+}
+</style>
\ No newline at end of file
diff --git a/apps/web-test/src/views/dashboard/home/audit.vue b/apps/web-test/src/views/dashboard/home/audit.vue
new file mode 100644
index 00000000..8132dbe0
--- /dev/null
+++ b/apps/web-test/src/views/dashboard/home/audit.vue
@@ -0,0 +1,50 @@
+<template>
+    <div class="main-box bg-[#ecf3f8] px-3 mt-3 h-[100%]">
+        <div class="top-box flex justify-between items-center">
+            <Button type="primary">批量审批</Button>
+            <div class="flex items-center gap-2">
+                <VbenIconButton
+                    class="hover:text-[#007da3] w-[30px] h-[30px] flex justify-center items-center rounded-[50%]">
+                    <UnorderedListOutlined />
+                </VbenIconButton>
+            </div>
+        </div>
+        <CardTitle :type="'audit'" :list="list" />
+    </div>
+</template>
+<script setup lang="ts">
+import {
+    VbenIconButton,
+} from '@vben-core/shadcn-ui';
+import CardTitle from './components/CardTiles/index.vue';
+import { UnorderedListOutlined } from '@ant-design/icons-vue';
+import { Button} from 'ant-design-vue';
+import { tilesList } from './tiles'
+
+let list: any[] = []
+for (let i = tilesList.length; i > 0; i--) {
+    if(!tilesList[i]?.name) continue;
+    let obj: any = {}
+    obj.name = tilesList[i]?.name;
+    obj.url = tilesList[i]?.name2;
+    obj.work = '经营管理';
+    obj.code = tilesList[i]?.name1.split('.')[0];
+    list.push(obj);
+    obj = null
+}
+</script>
+<style scoped lang="scss">
+.tiles-list {
+    border-top: 1px solid #ddd;
+}
+
+.card-bt-box {
+    border-top: 1px solid #ddd;
+}
+
+.card-box:hover {
+    .mask-box {
+        display: block;
+    }
+}
+</style>
\ No newline at end of file
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
new file mode 100644
index 00000000..b1817b81
--- /dev/null
+++ b/apps/web-test/src/views/dashboard/home/components/CardTiles/index.vue
@@ -0,0 +1,111 @@
+<template>
+    <div class="content-box bg-[#fff] 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">修改</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]" />
+                </div>
+            </Card>
+        </div>
+        <div class="flex justify-end">
+            <Pagination v-model:current="current" :total="500" />
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref,toRefs } from 'vue';
+
+import { ExpandOutlined } from '@ant-design/icons-vue';
+import { Button, Form, FormItem, Input, Select, Card, Pagination } from 'ant-design-vue';
+import { tilesList } from '../../tiles'
+const props = defineProps({
+  type: {
+    type: String,
+    default: ''
+  },
+  list: {
+    type: Object,
+    default: []
+  }
+})
+
+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
+}
+let scope = 'all'
+
+const options2 = [
+    {
+        value: 'all',
+        label: '全部',
+    },
+]
+let current = ref(1)
+</script>
+<style scoped lang="scss">
+.tiles-list {
+    border-top: 1px solid #ddd;
+}
+
+.card-bt-box {
+    border-top: 1px solid #ddd;
+}
+
+.card-box:hover {
+    .mask-box {
+        display: block;
+    }
+}
+</style>
\ No newline at end of file
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 c5780437..5faf0602 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
@@ -1,12 +1,10 @@
 <script setup>
-import { defineAsyncComponent, getCurrentInstance, markRaw, onMounted, ref } from 'vue';
+import { defineAsyncComponent, getCurrentInstance, markRaw, onMounted, ref,nextTick } from 'vue';
 
 import { UndoOutlined, CheckOutlined, CloseCircleFilled, QuestionCircleOutlined, SyncOutlined, ShoppingCartOutlined, EditOutlined } from '@ant-design/icons-vue';
 import { CheckboxGroup, Checkbox, Collapse, CollapsePanel, FloatButtonGroup, FloatButton, BackTop, Popover } from 'ant-design-vue';
 
 
-// import GridGroup from './components/GridGroup/index.vue'
-
 import { toRefs } from 'vue'
 
 const props = defineProps({
@@ -19,6 +17,44 @@ let { list } = toRefs(props);
 
 const { proxy } = getCurrentInstance();
 const layout = ref(JSON.parse(JSON.stringify(list.value)));
+onMounted(() => {
+  layout.value = [
+    {
+      "x": 1,
+      "y": 0,
+      "w": 1,
+      "h": 2,
+      "i": "1728964990256",
+      "component": {
+        "name1": "AUTO_1612155980933.png",
+        "name2": "AUTO_1612155980933_C会议管理.png",
+        "size": "2x2",
+        "name": "会议管理",
+        "w": 1,
+        "h": 2,
+        "component": "../Output1/index.vue",
+        "i": 0
+      },
+    },
+    {
+      "x": 4,
+      "y": 0,
+      "w": 1,
+      "h": 2,
+      "i": "1728965029729",
+      "component": {
+        "name1": "AUTO_1612155980933.png",
+        "name2": "AUTO_1612155980933_C会议管理.png",
+        "size": "2x2",
+        "name": "会议管理",
+        "w": 1,
+        "h": 2,
+        "component": "../Output1/index.vue",
+        "i": 0
+      },
+    },
+  ]
+})
 const colNum = 12;
 let defaultH = 2;
 let defaultW = 2;
@@ -33,7 +69,6 @@ const DragPos = {
   h: null,
   i: null,
 };
- const componentsInfo = list
 //  [
 //   {
 //     id: '1-1',
@@ -182,6 +217,8 @@ const drag = (e, item) => {
   }
 };
 const dragend = (e) => {
+  console.log('eeeee',e);
+  tilesIsMove.value = false;
   const parentRect = document
     .querySelector('.grid-box')
     .getBoundingClientRect();
@@ -212,6 +249,8 @@ const dragend = (e) => {
       w: currentDragCom.w,
       h: currentDragCom.h,
       i: DragPos.i,
+      isDraggable: true,
+      isResizable: true,
       component: currentDragCom,
       loadComp,
     });
@@ -226,8 +265,12 @@ const dragend = (e) => {
     try {
       proxy.$refs.gridItem[layout.value.length].$refs.item.style.display =
         'block';
-    } catch { }
+    } catch { 
+    }
   }
+  nextTick(()=>{
+    tilesIsMove.value = true;
+  })
 };
 // 尺寸变更后，触发resize事件，使图表resize
 const resizedEvent = (e) => {
@@ -249,7 +292,7 @@ let shop = ref(false)
 // 编辑磁贴
 let editTiles = ref(false)
 // 商店分组展开
-let activeKeyArr = ref(['1','2','3'])
+let activeKeyArr = ref(['1', '2', '3'])
 // 选中的磁贴
 let selectTilseArr = ref([])
 // 新增磁贴
@@ -265,49 +308,54 @@ let addTiles = (val) => {
 
   selectTilseArr.value = arr
 }
+// 磁贴是否可拖拽
+let tilesIsMove = ref(true)
+// 取消和确定编辑磁贴
+let cancelOrSure = (type) => {
+  if (type == 'cance') {
+    editTiles.value = false;
+    tilesIsMove.value = false;
+  } else if (type == 'sure') {
+    editTiles.value = true;
+    tilesIsMove.value = true;
+  }
+}
 </script>
 
 <template>
-  <div class="container h-[calc(100%-10px)]">
-
+  <div class="container-group">
     <!-- 自定义布局的部分 -->
-    <div class="grid-box  ">
-      <grid-layout ref="gridLayout" v-model:layout="layout" :col-num="12" :is-draggable="true" :is-mirrored="false" :auto-size="false" :responsive="false"
-        :is-resizable="false" :margin="[10, 10]" :row-height="45" :vertical-compact="true">
+    <div class="grid-box  select-none">
+      <grid-layout ref="gridLayout" v-model:layout="layout" :col-num="3" :is-draggable="tilesIsMove" :is-mirrored="false"
+        :auto-size="false" :is-resizable="tilesIsMove" :margin="[10, 10]" :row-height="55"
+        :vertical-compact="true">
 
-        <grid-item v-for="item in layout" :key="item.i" ref="gridItem" :h="item.h" :i="item.i" :w="item.w" :x="item.x"
-          :y="item.y" :dragAllowFrom="null" @resized="resizedEvent">
-          <span class="close" @click="delItem(item)">
+        <grid-item v-for="(item, index ) in layout" :key="item.i" ref="gridItem" :h="item.h" :i="item.i" :w="item.w"
+          :x="item.x" :y="item.y" :dragAllowFrom="item.component&&item.component.dom?item.component.dom:null" @resized="resizedEvent">
+          <span class="close" @click="delItem(item)" v-if="tilesIsMove">
             <CloseCircleFilled style="color: #f10215;" />
           </span>
-          <div class="py-2 px-4 box-border w-[100%] h-[100%] bg-[#fff] us-card-box">
-            <component :is="item.loadComp" :data="item" :key="item.i"/>
+          <div class="py-2 px-4 box-border w-[100%] h-[100%] us-card-box bg-background">
+            <component :is="item.loadComp" :data="item" :key="item.i" />
           </div>
         </grid-item>
-
-        <!-- <grid-item>
-          <div style="width: 200px;height: 200px;border: 1px solid #f00;">
-
-          </div>
-        </grid-item> -->
       </grid-layout>
     </div>
   </div>
 </template>
 
 <style scoped lang="scss">
-.container {
-  min-width: 1000px;
-  position: relative;
-  overflow-x: auto;
-}
-
-.grid-box {
-  min-width: 1000px;
+.container-group {
   width: 100%;
   height: 100%;
 }
 
+.grid-box {
+  width: 100%;
+  height: 100%;
+}
+
+
 .components-box {
   padding: 12px 20px;
   // border: 1px solid rgb(66 66 66 / 100%);
@@ -359,6 +407,7 @@ let addTiles = (val) => {
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   border-radius: 4px;
 }
+
 .shop-box {
   width: 550px;
   height: 75vh;
@@ -371,7 +420,7 @@ let addTiles = (val) => {
   height: 100% !important;
   overflow: auto;
   background: transparent;
-  border: 1px solid rgb(66 66 66 / 100%);
+  border: 0px solid rgb(66 66 66 / 100%);
 
   .vue-grid-item {
     // padding: 12px 20px;
diff --git a/apps/web-test/src/views/dashboard/home/components/Output1/index.vue b/apps/web-test/src/views/dashboard/home/components/Output1/index.vue
index 46cd5a76..108e72ec 100644
--- a/apps/web-test/src/views/dashboard/home/components/Output1/index.vue
+++ b/apps/web-test/src/views/dashboard/home/components/Output1/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <a href="#" class="pointer-events-none inline-block w-[100%] h-[100%] flex flex-col items-center gap-1">
+  <a href="/portal" class="pointer-events-none inline-block w-[100%] h-[100%] flex flex-col items-center gap-1">
     <img :src="'/xbyt/'+data.component.name2" alt="" class="w-full object-content">
     <div class="text-sm">{{ data.component.name }}</div>
   </a>
diff --git a/apps/web-test/src/views/dashboard/home/components/Output2/index.vue b/apps/web-test/src/views/dashboard/home/components/Output2/index.vue
index 2e1e57f0..ccfdad7f 100644
--- a/apps/web-test/src/views/dashboard/home/components/Output2/index.vue
+++ b/apps/web-test/src/views/dashboard/home/components/Output2/index.vue
@@ -1,31 +1,41 @@
 <template>
   <div style="width: 100%;height: 100%;" class="flex flex-col">
-    <div class="head-top-box flex justify-between mb-3">
-      <div class="flex items-center gap-3">
-        <div class="flex items-center gap-1">
-          <CalendarOutlined />待办
-        </div>
-        <div class="flex items-center gap-1">
+    <div class="head-top-box flex justify-between mb-3 titlt-top">
+      <div class="flex items-center gap-10">
+        <Badge :count="9" :offset="[6, -3]">
+          <div class="flex items-center gap-1 cursor-pointer">
+            <CalendarOutlined />待办
+          </div>
+        </Badge>
+
+        <div class="flex items-center gap-1 cursor-pointer">
           <CarryOutOutlined />已办
         </div>
-        <div class="flex items-center gap-1">
-          <ExceptionOutlined />待阅
-        </div>
-        <div class="flex items-center gap-1">
+        <Badge :count="9" :offset="[6, -3]">
+          <div class="flex items-center gap-1 cursor-pointer">
+            <ExceptionOutlined />待阅
+          </div>
+        </Badge>
+        <div class="flex items-center gap-1 cursor-pointer">
           <FileDoneOutlined />已阅
         </div>
-        <div class="flex items-center gap-1">
+        <div class="flex items-center gap-1 cursor-pointer">
           <StarOutlined />关注
         </div>
       </div>
       <div class="flex items-center gap-3">
         <InputSearch placeholder="任务查询" style="width: 200px" />
-        <SettingOutlined />
-        <ReloadOutlined />
+        <SettingOutlined class="cursor-pointer" @click="userSet = true" />
+        <ReloadOutlined class="cursor-pointer" />
       </div>
     </div>
+    <ul class="f-btn-box">
+      <li v-for="(item) in plainOptions" :key="item">
+        <Button >{{ item }}</Button>
+      </li>
+    </ul>
     <div class="flex-1 overflow-hidden">
-      <vxe-grid v-bind="gridOptions" v-on="gridEvents">
+      <vxe-grid v-bind="gridOptions">
         <template #attention_default="{ row }">
           <StarOutlined class="text-lg"></StarOutlined>
         </template>
@@ -36,16 +46,37 @@
         </template>
       </vxe-grid>
     </div>
+
+    <Modal v-model:open="userSet" title="个人设置" :okText="'提交'" :width="800">
+      <div class="flex  gap-2">
+        <div class="shrink-0">接收消息系统：</div>
+        <div>
+          <Checkbox v-model:checked="state.checkAll" :indeterminate="state.indeterminate" @change="onCheckAllChange">
+            全选
+          </Checkbox>
+          <CheckboxGroup v-model:value="state.checkedList">
+            <div class="flex flex-wrap gap-2 mt-2">
+              <Checkbox :value="item" v-for="(item) in plainOptions" :key="item">
+                <div class="w-[85px] truncate">{{ item }}</div>
+              </Checkbox>
+            </div>
+          </CheckboxGroup>
+        </div>
+      </div>
+    </Modal>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { reactive } from 'vue'
-import type { VxeGridProps, VxeGridListeners } from 'vxe-table'
+import { reactive, watch, ref } from 'vue'
+import { type VxeGridProps, VxeUI } from 'vxe-table'
 import { CalendarOutlined, CarryOutOutlined, StarOutlined, ExceptionOutlined, FileDoneOutlined, SettingOutlined, ReloadOutlined } from '@ant-design/icons-vue';
-import { InputSearch,Pagination } from 'ant-design-vue';
-
+import { InputSearch, Pagination, Badge, Modal, Checkbox, CheckboxGroup, Button } from 'ant-design-vue';
+import { preferences } from '@vben/preferences';
 
+watch(() => preferences.theme.mode, (n: any) => {
+  VxeUI.setTheme(n)
+})
 
 interface RowVO {
   id: number
@@ -102,19 +133,44 @@ const findList = () => {
   }, 300)
 }
 
-const searchEvent = () => {
-  tablePage.currentPage = 1
-  findList()
-}
-
-const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
-  tablePage.currentPage = currentPage
-  tablePage.pageSize = pageSize
-  findList()
-}
-
 findList()
+
+
+// 个人设置弹层
+let userSet = ref(false);
+
+const plainOptions = ['公文系统', '合同管理', '物资管理', '督查管理', '市场管理', '电子考勤', '财务管理信息通知', '费用报销', '设备管理', '工程造价', '员工诉求', '即完即结', '科技研发', '标准化系统', '纪检监督系统', '后勤管理系统', '信用风险系统'];
+const state = reactive({
+  indeterminate: true,
+  checkAll: false,
+  checkedList: ['公文系统', '合同管理'],
+});
+
+const onCheckAllChange = (e: any) => {
+  Object.assign(state, {
+    checkedList: e.target.checked ? plainOptions : [],
+    indeterminate: false,
+  });
+};
+watch(
+  () => state.checkedList,
+  val => {
+    state.indeterminate = !!val.length && val.length < plainOptions.length;
+    state.checkAll = val.length === plainOptions.length;
+  },
+);
 </script>
-<style>
-@import 'vxe-table/lib/style.css'
+<style lang="scss">
+@import 'vxe-table/lib/style.css';
+
+.f-btn-box {
+  width: 100%; //指定可滑动区域宽度
+  overflow: hidden; //超出隐藏
+  white-space: nowrap; //超出不换行
+  overflow-x: auto; //出现水平滚动条
+  li {
+    display: inline-block;
+    margin-right: 10px;
+  }
+}
 </style>
\ No newline at end of file
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 30fb66c7..c7010af7 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
@@ -1,7 +1,7 @@
 <template>
-  <div class="custom-card w-[100%] h-[100%]">
-    <div class="card-name">我的应用</div>
-    <GridGroup :list="data.component.childer"></GridGroup>
+  <div class="custom-card w-[100%] h-[100%] flex flex-col">
+    <div class="card-name titlt-top">我的应用</div>
+    <GridGroup :list="data.component.childer" class="flex-1"></GridGroup>
   </div>
 </template>
 <script setup lang="ts">
@@ -19,5 +19,9 @@ let { data } = toRefs(props);
 
 </script>
 <style lang="scss" scoped>
-
+.card-name {
+  font-weight: 500;
+  padding: 5px 0;
+  border-bottom: 1px solid #ddd;
+}
 </style>
\ No newline at end of file
diff --git a/apps/web-test/src/views/dashboard/home/index.vue b/apps/web-test/src/views/dashboard/home/index.vue
index f93d6714..0b5a33fb 100644
--- a/apps/web-test/src/views/dashboard/home/index.vue
+++ b/apps/web-test/src/views/dashboard/home/index.vue
@@ -1,17 +1,75 @@
 <script setup>
-import { defineAsyncComponent, getCurrentInstance, markRaw, onMounted, ref } from 'vue';
+import { defineAsyncComponent, getCurrentInstance, markRaw, onMounted, ref, nextTick } from 'vue';
 
 import { UndoOutlined, CheckOutlined, CloseCircleFilled, QuestionCircleOutlined, SyncOutlined, ShoppingCartOutlined, EditOutlined } from '@ant-design/icons-vue';
 import { CheckboxGroup, Checkbox, Collapse, CollapsePanel, FloatButtonGroup, FloatButton, BackTop, Popover } from 'ant-design-vue';
 
 import { tilesList } from './tiles'
+import { useRouter } from "vue-router";
+const router = useRouter();
 
 // import GridGroup from './components/GridGroup/index.vue'
 
-
-
-const { proxy } = getCurrentInstance();
+const { proxy, ctx: that } = getCurrentInstance();
 const layout = ref([]);
+onMounted(() => {
+  layout.value = [
+    {
+      "x": 1,
+      "y": 0,
+      "w": 1,
+      "h": 2,
+      "i": "1728964990256",
+      "component": {
+        "name1": "AUTO_1612155980933.png",
+        "name2": "AUTO_1612155980933_C会议管理.png",
+        "size": "2x2",
+        "name": "会议管理",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 0,
+        "path": "/portal"
+      },
+    },
+    {
+      "x": 0,
+      "y": 2,
+      "w": 8,
+      "h": 5,
+      "i": "1728964991972",
+      "component": {
+        "name1": "AUTO_1612159241967.png",
+        "name2": "AUTO_1612159241967_C车辆调度.png",
+        "size": "2x2",
+        "name": "车辆调度",
+        "w": 8,
+        "h": 5,
+        "component": "./components/Output2/index.vue",
+        "i": 2,
+        "dom": '.titlt-top'
+      },
+    },
+    {
+      "x": 4,
+      "y": 0,
+      "w": 1,
+      "h": 2,
+      "i": "1728965029729",
+      "component": {
+        "name1": "AUTO_1612155980933.png",
+        "name2": "AUTO_1612155980933_C会议管理.png",
+        "size": "2x2",
+        "name": "会议管理",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 0,
+        "path": "/audit"
+      },
+    }
+  ]
+})
 const colNum = 12;
 let defaultH = 2;
 let defaultW = 2;
@@ -26,7 +84,7 @@ const DragPos = {
   h: null,
   i: null,
 };
- const componentsInfo = tilesList
+const componentsInfo = tilesList
 //  [
 //   {
 //     id: '1-1',
@@ -175,6 +233,8 @@ const drag = (e, item) => {
   }
 };
 const dragend = (e) => {
+  console.log('eeeee', e);
+  tilesIsMove.value = false;
   const parentRect = document
     .querySelector('.grid-box')
     .getBoundingClientRect();
@@ -219,8 +279,12 @@ const dragend = (e) => {
     try {
       proxy.$refs.gridItem[layout.value.length].$refs.item.style.display =
         'block';
-    } catch { }
+    } catch {
+    }
   }
+  nextTick(() => {
+    tilesIsMove.value = true;
+  })
 };
 // 尺寸变更后，触发resize事件，使图表resize
 const resizedEvent = (e) => {
@@ -242,7 +306,7 @@ let shop = ref(false)
 // 编辑磁贴
 let editTiles = ref(false)
 // 商店分组展开
-let activeKeyArr = ref(['1','2','3'])
+let activeKeyArr = ref(['1', '2', '3'])
 // 选中的磁贴
 let selectTilseArr = ref([])
 // 新增磁贴
@@ -258,22 +322,41 @@ let addTiles = (val) => {
 
   selectTilseArr.value = arr
 }
+// 磁贴是否可拖拽
+let tilesIsMove = ref(false)
+// 取消和确定编辑磁贴
+let cancelOrSure = (type) => {
+  if (type == 'cance') {
+    editTiles.value = false;
+    tilesIsMove.value = false;
+  } else if (type == 'sure') {
+    editTiles.value = true;
+    tilesIsMove.value = true;
+  }
+}
+// 页面跳转
+let goPage = (item) => {
+  if (tilesIsMove.value) return;
+  router.push(item.component?.path);
+}
 </script>
 
 <template>
-  <div class="container h-[calc(100%-10px)]">
+  <div class="container h-[calc(100%-10px)] px-[20px]">
     <!-- 自定义布局的部分 -->
-    <div class="grid-box  ">
-      <grid-layout ref="gridLayout" v-model:layout="layout" :col-num="12" :is-draggable="true" :is-mirrored="false" :auto-size="false" :responsive="false"
-        :is-resizable="true" :margin="[10, 10]" :row-height="45" :vertical-compact="true">
+    <div class="grid-box  select-none">
+      <grid-layout ref="gridLayout" v-model:layout="layout" :col-num="12" :is-draggable="tilesIsMove"
+        :is-mirrored="false" :auto-size="false" :responsive="false" :is-resizable="tilesIsMove" :margin="[10, 10]"
+        :row-height="45" :vertical-compact="true">
 
-        <grid-item v-for="item in layout" :key="item.i" ref="gridItem" :h="item.h" :i="item.i" :w="item.w" :x="item.x" 
-          :y="item.y" :dragAllowFrom="'.head-top-box'" @resized="resizedEvent">
-          <span class="close" @click="delItem(item)">
+        <grid-item v-for="(item, index ) in layout" :key="item.i" ref="gridItem" :h="item.h" :i="item.i" :w="item.w"
+          :x="item.x" :y="item.y" :dragAllowFrom="item.component && item.component.dom ? item.component.dom : null"
+          @resized="resizedEvent">
+          <span class="close" @click="delItem(item)" v-if="tilesIsMove">
             <CloseCircleFilled style="color: #f10215;" />
           </span>
-          <div class="py-2 px-4 box-border w-[100%] h-[100%] bg-[#fff] us-card-box">
-            <component :is="item.loadComp" :data="item" :key="item.i"/>
+          <div class="py-2 px-4 box-border w-[100%] h-[100%] us-card-box bg-background" @click="goPage(item)">
+            <component :is="item.loadComp" :data="item" :key="item.i" />
           </div>
         </grid-item>
 
@@ -284,79 +367,129 @@ let addTiles = (val) => {
         </grid-item> -->
       </grid-layout>
     </div>
-  </div>
 
-  <!-- 右侧悬浮部分 -->
-  <FloatButtonGroup shape="circle" :style="{ right: '40px' }">
-    <template v-if="!editTiles">
-      <FloatButton tooltip="编辑磁贴" @click="editTiles = true">
-        <template #icon>
-          <EditOutlined style="font-size: 20px;" />
-        </template>
-      </FloatButton>
-    </template>
-    <template v-else>
-      <FloatButton tooltip="保存修改">
-        <template #icon>
-          <CheckOutlined style="font-size: 20px;" />
-        </template>
-      </FloatButton>
-      <FloatButton tooltip="取消修改" @click="editTiles = false">
-        <template #icon>
-          <UndoOutlined style="font-size: 20px;" />
-        </template>
-      </FloatButton>
-      <Popover v-model:open="shop" title="磁贴商店（133）" trigger="click" placement="topRight">
-        <template #content>
-          <div class="shop-box">
-            <CheckboxGroup style="width: 100%" v-model:value="selectTilseArr">
-              <Collapse v-model:activeKey="activeKeyArr" style="width: 100%">
-                <CollapsePanel key="1" header="个人工作台（44）">
-                  <!-- 可拖入的组件部分 -->
-                  <div class="components-box">
-                    <div v-for="item in componentsInfo.slice(0, 44)" :key="item.name" class="ctrl-box" draggable="true" @drag="drag"
-                      @dragend="dragend" @dragstart="dragstart($event, item)" @click="addTiles(item.name)"
-                      :class="{ 'active': selectTilseArr.includes(item.name) }">
-                      <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" />
-                    </div>
-                  </div>
-                </CollapsePanel>
-                <CollapsePanel key="2" header="个人工作台（44）">
-                  <div class="components-box">
-                    <div v-for="item in componentsInfo.slice(44, 87)" :key="item.name" class="ctrl-box" draggable="true" @drag="drag"
-                      @dragend="dragend" @dragstart="dragstart($event, item)" @click="addTiles(item.name)"
-                      :class="{ 'active': selectTilseArr.includes(item.name) }">
-                      <div class="ctrl-name">{{ item.name + '('+item.size+')' }}</div>
-                      <img :src="'/xbyt/' + item.name2" alt="">
-                      <Checkbox :value="item.name" :checked="selectTilseArr.includes(item.name)" class="absolute bottom-0 right-1" />
-                    </div>
-                  </div>
-                </CollapsePanel>
-                <CollapsePanel key="3" header="个人工作台（45）">
-                  <div class="components-box">
-                    <div v-for="item in componentsInfo.slice(-45)" :key="item.name" class="ctrl-box" draggable="true" @drag="drag"
-                      @dragend="dragend" @dragstart="dragstart($event, item)" @click="addTiles(item.name)"
-                      :class="{ 'active': selectTilseArr.includes(item.name) }">
-                      <div class="ctrl-name">{{ item.name + '('+item.size+')' }}</div>
-                      <img :src="'/xbyt/' + item.name2" alt="">
-                      <Checkbox :value="item.name" :checked="selectTilseArr.includes(item.name)" class="absolute bottom-0 right-1" />
-                    </div>
-                  </div>
-                </CollapsePanel>
-              </Collapse>
-            </CheckboxGroup>
-          </div>
-        </template>
-        <FloatButton tooltip="磁贴商店">
+    <!-- 右侧悬浮部分 -->
+    <FloatButtonGroup shape="circle" :style="{ right: '40px' }">
+      <template v-if="!editTiles">
+        <FloatButton tooltip="编辑磁贴" @click="cancelOrSure('sure')">
           <template #icon>
-            <ShoppingCartOutlined style="font-size: 20px;" :visibility-height="0" />
+            <EditOutlined style="font-size: 20px;" />
           </template>
         </FloatButton>
-      </Popover>
-    </template>
-  </FloatButtonGroup>
+      </template>
+      <template v-else>
+        <FloatButton tooltip="保存修改" @click="cancelOrSure('sure')">
+          <template #icon>
+            <CheckOutlined style="font-size: 20px;" />
+          </template>
+        </FloatButton>
+        <FloatButton tooltip="取消修改" @click="cancelOrSure('cance')">
+          <template #icon>
+            <UndoOutlined style="font-size: 20px;" />
+          </template>
+        </FloatButton>
+        <Popover v-model:open="shop" title="磁贴商店（127）" trigger="click" placement="topRight">
+          <template #content>
+            <div class="shop-box">
+              <CheckboxGroup style="width: 100%" v-model:value="selectTilseArr">
+                <Collapse v-model:activeKey="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="ctrl-box"
+                        draggable="true" @drag="drag" @dragend="dragend($event)" @dragstart="dragstart($event, item)"
+                        @click="addTiles(item.name)" :class="{ 'active': selectTilseArr.includes(item.name) }">
+                        <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" />
+                      </div>
+                    </div>
+                  </CollapsePanel>
+                  <CollapsePanel key="2" header="综合行政（12）">
+                    <div class="components-box">
+                      <div v-for="item in componentsInfo.slice(22, 34)" :key="item.name" class="ctrl-box"
+                        draggable="true" @drag="drag" @dragend="dragend" @dragstart="dragstart($event, item)"
+                        @click="addTiles(item.name)" :class="{ 'active': selectTilseArr.includes(item.name) }">
+                        <div class="ctrl-name">{{ item.name + '(' + item.size + ')' }}</div>
+                        <img :src="'/xbyt/' + item.name2" alt="">
+                        <Checkbox :value="item.name" :checked="selectTilseArr.includes(item.name)"
+                          class="absolute bottom-0 right-1" />
+                      </div>
+                    </div>
+                  </CollapsePanel>
+                  <CollapsePanel key="3" header="经营管理（22）">
+                    <div class="components-box">
+                      <div v-for="item in componentsInfo.slice(34, 56)" :key="item.name" class="ctrl-box"
+                        draggable="true" @drag="drag" @dragend="dragend" @dragstart="dragstart($event, item)"
+                        @click="addTiles(item.name)" :class="{ 'active': selectTilseArr.includes(item.name) }">
+                        <div class="ctrl-name">{{ item.name + '(' + item.size + ')' }}</div>
+                        <img :src="'/xbyt/' + item.name2" alt="">
+                        <Checkbox :value="item.name" :checked="selectTilseArr.includes(item.name)"
+                          class="absolute bottom-0 right-1" />
+                      </div>
+                    </div>
+                  </CollapsePanel>
+                  <CollapsePanel key="4" header="安全生产（19）">
+                    <div class="components-box">
+                      <div v-for="item in componentsInfo.slice(56, 75)" :key="item.name" class="ctrl-box"
+                        draggable="true" @drag="drag" @dragend="dragend" @dragstart="dragstart($event, item)"
+                        @click="addTiles(item.name)" :class="{ 'active': selectTilseArr.includes(item.name) }">
+                        <div class="ctrl-name">{{ item.name + '(' + item.size + ')' }}</div>
+                        <img :src="'/xbyt/' + item.name2" alt="">
+                        <Checkbox :value="item.name" :checked="selectTilseArr.includes(item.name)"
+                          class="absolute bottom-0 right-1" />
+                      </div>
+                    </div>
+                  </CollapsePanel>
+                  <CollapsePanel key="5" header="勘探开发（26）">
+                    <div class="components-box">
+                      <div v-for="item in componentsInfo.slice(75, 101)" :key="item.name" class="ctrl-box"
+                        draggable="true" @drag="drag" @dragend="dragend" @dragstart="dragstart($event, item)"
+                        @click="addTiles(item.name)" :class="{ 'active': selectTilseArr.includes(item.name) }">
+                        <div class="ctrl-name">{{ item.name + '(' + item.size + ')' }}</div>
+                        <img :src="'/xbyt/' + item.name2" alt="">
+                        <Checkbox :value="item.name" :checked="selectTilseArr.includes(item.name)"
+                          class="absolute bottom-0 right-1" />
+                      </div>
+                    </div>
+                  </CollapsePanel>
+                  <CollapsePanel key="6" header="数据管理（1）">
+                    <div class="components-box">
+                      <div v-for="item in componentsInfo.slice(101, 102)" :key="item.name" class="ctrl-box"
+                        draggable="true" @drag="drag" @dragend="dragend" @dragstart="dragstart($event, item)"
+                        @click="addTiles(item.name)" :class="{ 'active': selectTilseArr.includes(item.name) }">
+                        <div class="ctrl-name">{{ item.name + '(' + item.size + ')' }}</div>
+                        <img :src="'/xbyt/' + item.name2" alt="">
+                        <Checkbox :value="item.name" :checked="selectTilseArr.includes(item.name)"
+                          class="absolute bottom-0 right-1" />
+                      </div>
+                    </div>
+                  </CollapsePanel>
+                  <CollapsePanel key="7" header="总部系统（25）">
+                    <div class="components-box">
+                      <div v-for="item in componentsInfo.slice(102, 127)" :key="item.name" class="ctrl-box"
+                        draggable="true" @drag="drag" @dragend="dragend" @dragstart="dragstart($event, item)"
+                        @click="addTiles(item.name)" :class="{ 'active': selectTilseArr.includes(item.name) }">
+                        <div class="ctrl-name">{{ item.name + '(' + item.size + ')' }}</div>
+                        <img :src="'/xbyt/' + item.name2" alt="">
+                        <Checkbox :value="item.name" :checked="selectTilseArr.includes(item.name)"
+                          class="absolute bottom-0 right-1" />
+                      </div>
+                    </div>
+                  </CollapsePanel>
+                </Collapse>
+              </CheckboxGroup>
+            </div>
+          </template>
+          <FloatButton tooltip="磁贴商店">
+            <template #icon>
+              <ShoppingCartOutlined style="font-size: 20px;" :visibility-height="0" />
+            </template>
+          </FloatButton>
+        </Popover>
+      </template>
+    </FloatButtonGroup>
+  </div>
 </template>
 
 <style scoped lang="scss">
@@ -423,6 +556,7 @@ let addTiles = (val) => {
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   border-radius: 4px;
 }
+
 .shop-box {
   width: 550px;
   height: 75vh;
@@ -435,7 +569,7 @@ let addTiles = (val) => {
   height: 100% !important;
   overflow: auto;
   background: transparent;
-  border: 1px solid rgb(66 66 66 / 100%);
+  // border: 1px solid rgb(66 66 66 / 100%);
 
   .vue-grid-item {
     // padding: 12px 20px;
diff --git a/apps/web-test/src/views/dashboard/home/main.vue b/apps/web-test/src/views/dashboard/home/main.vue
new file mode 100644
index 00000000..d4327222
--- /dev/null
+++ b/apps/web-test/src/views/dashboard/home/main.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="flex justify-between">
+      <nested-draggable v-model="list" class="w-full"></nested-draggable>
+    </div>
+  </template>
+  
+  <script setup lang="ts">
+  import { ref } from 'vue'
+  import NestedDraggable from './NestedComponent.vue'
+  
+  const list = ref([
+    {
+      name: 'item 1',
+      type: 'father',
+      children: [
+        {
+          name: 'item 2',
+          type: 'son',
+          children: []
+        }
+      ]
+    },
+    {
+      name: 'item 3',
+      type: 'father',
+      children: [
+        {
+          name: 'item 4',
+          type: 'son',
+          children: []
+        }
+      ]
+    },
+    {
+      name: 'item 5',
+      type: 'father',
+      children: []
+    }
+  ])
+  </script>
+  
\ No newline at end of file
diff --git a/apps/web-test/src/views/dashboard/home/portal.vue b/apps/web-test/src/views/dashboard/home/portal.vue
new file mode 100644
index 00000000..f72d1787
--- /dev/null
+++ b/apps/web-test/src/views/dashboard/home/portal.vue
@@ -0,0 +1,35 @@
+<template>
+    <div class="main-box bg-[#ecf3f8] px-3 mt-3 h-[100%]">
+        <div class="top-box flex justify-between items-center">
+            <div class="t-b-name text-base">磁贴管理</div>
+            <div class="flex items-center gap-2">
+                <Button type="primary">注册磁贴</Button>
+                <VbenIconButton
+                    class="hover:text-[#007da3] w-[30px] h-[30px] flex justify-center items-center rounded-[50%]">
+                    <UnorderedListOutlined />
+                </VbenIconButton>
+            </div>
+        </div>
+        <CardTitle :type="'portal'" :list="list" />
+    </div>
+</template>
+<script setup lang="ts">
+import {
+    VbenIconButton,
+} from '@vben-core/shadcn-ui';
+import CardTitle from './components/CardTiles/index.vue';
+import { UnorderedListOutlined, ExpandOutlined } from '@ant-design/icons-vue';
+import { Button, Form, FormItem, Input, Select, Card, Pagination} from 'ant-design-vue';
+import { tilesList } from './tiles'
+
+let list: any[] = []
+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.push(obj);
+    obj = null
+}
+</script>
\ No newline at end of file
diff --git a/apps/web-test/src/views/dashboard/home/test.vue b/apps/web-test/src/views/dashboard/home/test.vue
new file mode 100644
index 00000000..e76bd643
--- /dev/null
+++ b/apps/web-test/src/views/dashboard/home/test.vue
@@ -0,0 +1,137 @@
+<template>
+    <div>
+
+        <div class="flex flex-col">
+            Displayed as <code>[x, y, w, h]</code>:
+            <div class="flex flex-wrap">
+                <div v-for="item in layout">
+                    <b>{{item.i}}</b>: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}]
+                </div>
+            </div>
+        </div>
+
+        {{ xxx }}
+        <grid-layout :layout.sync="layout" :col-num="12" :row-height="30" :is-draggable="draggable"
+            :is-resizable="resizable" :responsive="false" :vertical-compact="false" :prevent-collision="true"
+            :use-css-transforms="true">
+            <grid-item v-for="item in layout" :static="item.static" :x="item.x" :y="item.y" :w="item.w" :h="item.h"
+                :i="item.i" @dragging="moveEvent" @resizeEvent="resizeEvent">
+                <span class="text">{{ item.i }}</span>
+            </grid-item>
+        </grid-layout>
+    </div>
+</template>
+
+<script lang="ts">
+import { GridLayout, GridItem } from "vue-grid-layout"
+
+export default {
+    components: {
+        GridLayout,
+        GridItem
+    },
+    data() {
+        return {
+            xxx:{},
+            layout: [
+                { "x": 0, "y": 0, "w": 2, "h": 2, "i": "0", static: false },
+                { "x": 2, "y": 0, "w": 2, "h": 4, "i": "1", static: true },
+                { "x": 4, "y": 0, "w": 2, "h": 5, "i": "2", static: false },
+                { "x": 6, "y": 0, "w": 2, "h": 3, "i": "3", static: false },
+                { "x": 8, "y": 0, "w": 2, "h": 3, "i": "4", static: false },
+                { "x": 10, "y": 0, "w": 2, "h": 3, "i": "5", static: false },
+                { "x": 0, "y": 5, "w": 2, "h": 5, "i": "6", static: false },
+                { "x": 2, "y": 5, "w": 2, "h": 5, "i": "7", static: false },
+                { "x": 4, "y": 5, "w": 2, "h": 5, "i": "8", static: false },
+                { "x": 6, "y": 3, "w": 2, "h": 4, "i": "9", static: true },
+                { "x": 8, "y": 4, "w": 2, "h": 4, "i": "10", static: false },
+                { "x": 10, "y": 4, "w": 2, "h": 4, "i": "11", static: false },
+                { "x": 0, "y": 10, "w": 2, "h": 5, "i": "12", static: false },
+                { "x": 2, "y": 10, "w": 2, "h": 5, "i": "13", static: false },
+                { "x": 4, "y": 8, "w": 2, "h": 4, "i": "14", static: false },
+                { "x": 6, "y": 8, "w": 2, "h": 4, "i": "15", static: false },
+                { "x": 8, "y": 10, "w": 2, "h": 5, "i": "16", static: false },
+                { "x": 10, "y": 4, "w": 2, "h": 2, "i": "17", static: false },
+                { "x": 0, "y": 9, "w": 2, "h": 3, "i": "18", static: false },
+                { "x": 2, "y": 6, "w": 2, "h": 2, "i": "19", static: false }
+            ],
+            draggable: true,
+            resizable: true,
+        }
+    },
+    methods: {
+        moveEvent(e) {
+            console.log(e)
+         this.xxx = {delta:e.delta,velocity:e.velocity}
+
+        },
+
+        resizeEvent(e) {
+            console.log(e)
+
+
+        },
+
+    }
+}
+</script>
+
+<style scoped>
+.vue-grid-layout {
+    background: #eee;
+}
+
+.vue-grid-item:not(.vue-grid-placeholder) {
+    background: #ccc;
+    border: 1px solid black;
+}
+
+.vue-grid-item .resizing {
+    opacity: 0.9;
+}
+
+.vue-grid-item .static {
+    background: #cce;
+}
+
+.vue-grid-item .text {
+    font-size: 24px;
+    text-align: center;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+    height: 100%;
+    width: 100%;
+}
+
+.vue-grid-item .no-drag {
+    height: 100%;
+    width: 100%;
+}
+
+.vue-grid-item .minMax {
+    font-size: 12px;
+}
+
+.vue-grid-item .add {
+    cursor: pointer;
+}
+
+.vue-draggable-handle {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    top: 0;
+    left: 0;
+    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>") no-repeat;
+    background-position: bottom right;
+    padding: 0 8px 8px 0;
+    background-repeat: no-repeat;
+    background-origin: content-box;
+    box-sizing: border-box;
+    cursor: pointer;
+}
+</style>
\ No newline at end of file
diff --git a/apps/web-test/src/views/dashboard/home/tiles.ts b/apps/web-test/src/views/dashboard/home/tiles.ts
index 203ff632..31791080 100644
--- a/apps/web-test/src/views/dashboard/home/tiles.ts
+++ b/apps/web-test/src/views/dashboard/home/tiles.ts
@@ -7,7 +7,8 @@ let tilesList = [
         "w": 1,
         "h": 2,
         "component": "./components/Output1/index.vue",
-        "i": 0
+        "i": 0,
+        "path": "/portal"
     },
     {
         "name1": "AUTO_1612158921536.png",
@@ -17,6 +18,7 @@ let tilesList = [
         "w": 4,
         "h": 6,
         "component": "./components/Output5/index.vue",
+        "dom": '.titlt-top',
         "childer": [
             {
                 "name1": "AUTO_1612159241967.png",
@@ -41,7 +43,8 @@ let tilesList = [
         "w": 8,
         "h": 5,
         "component": "./components/Output2/index.vue",
-        "i": 2
+        "i": 2,
+        "dom": '.titlt-top'
     },
     {
         "name1": "AUTO_1612159773503.png",
@@ -51,7 +54,8 @@ let tilesList = [
         "w": 1,
         "h": 2,
         "component": "./components/Output1/index.vue",
-        "i": 3
+        "i": 3,
+        "path": '/audit'
     },
     {
         "name1": "AUTO_1612160044533.png",
diff --git a/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue b/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue
index 7406561f..0c820a4f 100644
--- a/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue
+++ b/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue
@@ -180,7 +180,7 @@ if (enableShortcutKey.value) {
           <div
             class="text-foreground mb-1 flex items-center text-sm font-medium"
           >
-            {{ text }}
+            李华
             <Badge class="ml-2 text-green-400">
               {{ tagText }}
             </Badge>