Merge branch 'test' of http://172.19.183.27:3000/z9130/pansoft-plrl into test

2024-10-23 19:14:10 +08:00 · 2024-10-23 19:14:10 +08:00 · c4c68b6f63
parent 21993e7c73 b1df3aa2de
commit c4c68b6f63
21 changed files with 1092 additions and 290 deletions
--- a/apps/web-test/.env
+++ b/apps/web-test/.env
@ -1,5 +1,5 @@
 # 应用标题
-VITE_APP_TITLE=Vben Admin Antd
+VITE_APP_TITLE=西北油田办公平台

 # 应用命名空间，用于缓存、store等功能的前缀，确保隔离
-VITE_APP_NAMESPACE=vben-web-antd
+VITE_APP_NAMESPACE=xbj
--- a/apps/web-test/src/preferences.ts
+++ b/apps/web-test/src/preferences.ts
@ -7,7 +7,7 @@ import { defineOverridesPreferences } from '@vben/preferences';
 export const overridesPreferences = defineOverridesPreferences({
  // overrides
  app: {
-    name: import.meta.env.VITE_APP_TITLE,
+    name: '西北油田办公平台',
    accessMode: 'frontend',
    authPageLayout: 'panel-center',
    colorGrayMode: false,
--- a/apps/web-test/src/router/routes/modules/dashboard.ts
+++ b/apps/web-test/src/router/routes/modules/dashboard.ts
@ -14,7 +14,8 @@ const getRouter = (list: any, type: string) => {
        component: () => null,
        meta: {
          title: list.children[i]?.name,
-          link: list.children[i]?.url
+          link: list.children[i]?.url,
+          icon: 'oui:dot'
        },
      })
    }
@ -38,7 +39,8 @@ const getRouter = (list: any, type: string) => {
            component: () => null,
            meta: {
              title: list[i].children[j]?.name,
-              link: list[i].children[j]?.url
+              link: list[i].children[j]?.url,
+              icon: 'oui:dot'
            },
          })
        }
@ -96,6 +98,60 @@ const routes: RouteRecordRaw[] = [
          icon: 'lucide:area-chart',
          title: '磁贴审核',
        },
+      },{
+        name: 'register',
+        path: '/register',
+        component: () => import('#/views/dashboard/home/register.vue'),
+        // component: () => import('#/views/dashboard/home/main.vue'),
+        meta: {
+          hideInMenu: true,
+          icon: 'lucide:area-chart',
+          title: '注册磁贴',
+        },
+      }
+      ,{
+        name: 'usertemplate',
+        path: '/usertemplate',
+        component: () => import('#/views/dashboard/home/usertemplate.vue'),
+        // component: () => import('#/views/dashboard/home/main.vue'),
+        meta: {
+          hideInMenu: true,
+          icon: 'lucide:area-chart',
+          title: '用户模板',
+        },
+      },
+      {
+        name: 'operation',
+        path: '/operation',
+        component: () => import('#/views/dashboard/home/operation.vue'),
+        // component: () => import('#/views/dashboard/home/main.vue'),
+        meta: {
+          hideInMenu: true,
+          icon: 'lucide:area-chart',
+          title: '业务域',
+        },
+      },
+      {
+        name: 'todo',
+        path: '/todo',
+        component: () => import('#/views/dashboard/home/todo.vue'),
+        // component: () => import('#/views/dashboard/home/main.vue'),
+        meta: {
+          hideInMenu: true,
+          icon: 'lucide:area-chart',
+          title: '代办管理',
+        },
+      },
+      {
+        name: 'addtodo',
+        path: '/addtodo',
+        component: () => import('#/views/dashboard/home/addtodo.vue'),
+        // component: () => import('#/views/dashboard/home/main.vue'),
+        meta: {
+          hideInMenu: true,
+          icon: 'lucide:area-chart',
+          title: '新建应用',
+        },
      },
      // {
      //   name: 'test',
--- a/apps/web-test/src/store/auth.ts
+++ b/apps/web-test/src/store/auth.ts
@ -60,7 +60,7 @@ export const useAuthStore = defineStore('auth', () => {

        if (userInfo?.realName) {
          notification.success({
-            description: `${$t('authentication.loginSuccessDesc')}:${userInfo?.realName}`,
+            description: `${$t('authentication.loginSuccessDesc')}`,
            duration: 3,
            message: $t('authentication.loginSuccess'),
          });
--- a/apps/web-test/src/store/index.ts
+++ b/apps/web-test/src/store/index.ts
@ -1 +1,2 @@
 export * from './auth';
+export * from './tiles'
--- a/apps/web-test/src/store/tiles.ts
+++ b/apps/web-test/src/store/tiles.ts
@ -0,0 +1,14 @@
+import {defineStore} from 'pinia'
+export const UseTilesStore = defineStore('tiles',{
+    state: () => {
+        return {
+            tilesIsMove : !1, // 磁贴是否是可编辑状态
+           
+        }
+    },
+    actions: {
+        setTilesIsMove(data: boolean){
+            this.tilesIsMove = data
+        }
+    }
+})
--- a/apps/web-test/src/views/dashboard/home/addtodo.vue
+++ b/apps/web-test/src/views/dashboard/home/addtodo.vue
@ -0,0 +1,98 @@
+<template>
+    <div class="w-[100%] px-2 bg-background mt-3 min-w-[1200px]">
+        <div class="w-[70%] mx-auto pt-3">
+            <Steps :current="nowCurrent" :items="[
+                {
+                    title: '添加应用',
+                },
+                {
+                    title: '完成',
+                },
+            ]"></Steps>
+        </div>
+        <Form class="mx-auto w-[40%] mt-5 h-[70vh]" :labelCol="{ style: { width: '80px' } }">
+            <FormItem label="添加类型" :rules="[{ required: true, message: '请添加类型' }]">
+                <RadioGroup v-model:value="formData.type">
+                    <Radio :value="1">自定义</Radio>
+                    <Radio :value="2">从列表中选择</Radio>
+                </RadioGroup>
+            </FormItem>
+            <FormItem label="应用编码" :rules="[{ required: true, message: '请输入应用编码' }]">
+                <Input placeholder="请输入"></Input>
+            </FormItem>
+            <FormItem label="应用名称" :rules="[{ required: true, message: '请输入应用名称' }]">
+                <Input placeholder="请输入"></Input>
+            </FormItem>
+            <FormItem label="接口地址">
+                <Input placeholder="请输入"></Input>
+            </FormItem>
+            <FormItem label="应用顺序" width="20px">
+                <inputNumber>
+                    <template #addonAfter>
+                        <PlusOutlined />
+                    </template>
+                    <template #addonBefore>
+                        <MinusOutlined />
+                    </template>
+                </InputNumber>
+            </FormItem>
+            <FormItem label="  " :colon="false" :wrapperCol="{ style: { width: '80px' } }">
+                <Space warp>
+                    <Button type="primary">提交</Button>
+                    <Button @click="closeNowTab">取消</Button>
+                </Space>
+            </FormItem>
+        </Form>
+
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, reactive, watch } from 'vue'
+import { Steps, Space,RadioGroup,Radio } from 'ant-design-vue';
+import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
+
+import { Button, Form, FormItem, Input, InputNumber, Select, Card, Pagination, Textarea, Checkbox } from 'ant-design-vue';
+import { useRouter } from "vue-router";
+const router = useRouter();
+
+import { useTabs } from '@vben/hooks';
+const { closeCurrentTab } = useTabs();
+function closeNowTab() {
+    router.go(-1)
+    closeCurrentTab();
+}
+let nowCurrent = ref(0)
+
+let formData = reactive({
+    type: 1,
+})
+</script>
+<style scoped lang="scss">
+.c-item {
+    border: 1px solid #ccc;
+    flex: .3333;
+    height: calc(100vh - 150px);
+}
+
+.template-item {
+    border: 1px solid #ccc;
+    width: 30%;
+    cursor: pointer;
+    position: relative;
+
+    .active-icon {
+        position: absolute;
+        right: 3px;
+        top: 3px;
+    }
+
+    &.active {
+        border: 1px solid hsl(var(--primary));
+    }
+}
+
+.form-box {
+    max-height: 90%;
+    overflow-y: auto;
+}
+</style>
--- a/apps/web-test/src/views/dashboard/home/audit.vue
+++ b/apps/web-test/src/views/dashboard/home/audit.vue
@ -1,5 +1,5 @@
 <template>
-    <div class="main-box bg-[#ecf3f8] px-3 mt-3 h-[100%]">
+    <div class="main-box px-3 bg-background mt-3 h-[100%]">
        <div class="top-box flex justify-between items-center">
            <Button type="primary">批量审批</Button>
            <div class="flex items-center gap-2">
--- 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,5 +1,5 @@
 <template>
-    <div class="content-box bg-[#fff] px-3 mt-2 h-[100%]">
+    <div class="content-box px-3 mt-2 h-[100%]">
        <div class="filter-box py-3">
            <Form layout="inline">
                <FormItem label="标题">
@ -40,7 +40,7 @@
                <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" @click="openInfo(item)">修改</Button>
                        <Button type="primary" danger>删除</Button>
                    </div>
                    <div v-else-if="type == 'audit'"
@ -48,20 +48,86 @@
                        <Button type="primary">通过</Button>
                        <Button type="primary" danger>驳回</Button>
                    </div>
-                    <ExpandOutlined class="absolute top-2 right-2 text-[#fff]" />
+                    <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 } from 'vue';
+import { ref, toRefs, reactive } from 'vue';

 import { ExpandOutlined } from '@ant-design/icons-vue';
-import { Button, Form, FormItem, Input, Select, Card, Pagination } from 'ant-design-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: {
@ -74,7 +140,7 @@ const props = defineProps({
    }
 })

-let { list,type } = toRefs(props);
+let { list, type } = toRefs(props);
 for (let i = 0; i < tilesList.length; i++) {
    let obj: any = {}
    obj.name = tilesList[i]?.name;
@ -92,7 +158,38 @@ const options2 = [
        label: '全部',
    },
 ]
-let current = ref(1)
+let current = ref(1);
+
+let editcardShow = ref(false)
+
+let 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' } };
+const wrapperCol = { style: { width: '150px' } };
+const itemWrapperCol = { style: { width: '415px' } };
+
 </script>
 <style scoped lang="scss">
 .tiles-list {
--- a/apps/web-test/src/views/dashboard/home/components/GridGroup/index.vue
+++ b/apps/web-test/src/views/dashboard/home/components/GridGroup/index.vue
@ -6,6 +6,9 @@ import { CheckboxGroup, Checkbox, Collapse, CollapsePanel, FloatButtonGroup, Flo


 import { toRefs } from 'vue'
+import { UseTilesStore } from '#/store';
+import { storeToRefs } from 'pinia'
+const tilesStore = UseTilesStore();

 const props = defineProps({
  list: {
@ -16,44 +19,44 @@ const props = defineProps({
 let { list } = toRefs(props);

 const { proxy } = getCurrentInstance();
-const layout = ref(JSON.parse(JSON.stringify(list.value)));
+const layout = ref(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
-      },
-    },
-  ]
+  // 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;
@ -69,48 +72,6 @@ const DragPos = {
  h: null,
  i: null,
 };
-//  [
-//   {
-//     id: '1-1',
-//     title: '磁贴管理(2×2)',
-//     name: 'xl',
-//     component: './components/Output1/index.vue',
-//     des: '磁贴管理(2×2)',
-//     w: 1,
-//     h: 2,
-//     img: 'WORKBENCH_MANAGER.png'
-//   },
-//   {
-//     id: '1-2',
-//     title: '饼图示例(8×8)',
-//     name: 'xxl',
-//     component: './components/Output2/index.vue',
-//     des: '饼图示例(8×8)',
-//     w: 8,
-//     h: 8,
-//     img: 'AUTO_1620294688040.png'
-//   },
-//   {
-//     id: '1-3',
-//     title: '报表示例(4×4)',
-//     name: 'xxxl',
-//     component: './components/Output3/index.vue',
-//     des: '报表示例(4×4)',
-//     w: 4,
-//     h: 4,
-//     img: "AUTO_1621594591994.png"
-//   },
-//   {
-//     id: '1-4',
-//     title: '列表示例(16×8)',
-//     name: 'xxxxl',
-//     component: './components/Output4/index.vue',
-//     des: '列表示例(16×8)',
-//     w: 16,
-//     h: 8,
-//     img: 'AUTO_1620296071109.png'
-//   },
-// ];
 let currentDragCom = null;
 onMounted(() => {
  document.addEventListener(
@ -134,6 +95,8 @@ const loadComponent = (path) => {
 };
 // 处理布局数据中的组件
 const processLayout = (layoutSetInfo) => {
+  console.log('layoutSetInfo',layoutSetInfo);
+  
  for (const item of layoutSetInfo) {
    if (!item.component) {
      continue;
@ -309,7 +272,7 @@ let addTiles = (val) => {
  selectTilseArr.value = arr
 }
 // 磁贴是否可拖拽
-let tilesIsMove = ref(true)
+let {tilesIsMove} = storeToRefs(tilesStore)
 // 取消和确定编辑磁贴
 let cancelOrSure = (type) => {
  if (type == 'cance') {
@ -320,14 +283,20 @@ let cancelOrSure = (type) => {
    tilesIsMove.value = true;
  }
 }
+
+// 页面跳转
+let goPage = (item) => {
+  if (tilesIsMove) return;
+  router.push(item?.path);
+}
 </script>

 <template>
  <div class="container-group">
    <!-- 自定义布局的部分 -->
    <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"
+      <grid-layout ref="gridLayout" v-model:layout="layout" :col-num="4" :is-draggable="tilesIsMove" :is-mirrored="false"
+        :auto-size="false" :is-resizable="false" :margin="[10, 10]" :row-height="40"
        :vertical-compact="true">

        <grid-item v-for="(item, index ) in layout" :key="item.i" ref="gridItem" :h="item.h" :i="item.i" :w="item.w"
@ -335,8 +304,8 @@ let cancelOrSure = (type) => {
          <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%] us-card-box bg-background">
-            <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="loadComponent(item.component)" :data="item" :key="item.i" :type="'sm'"/>
          </div>
        </grid-item>
      </grid-layout>
--- 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,7 +1,7 @@
 <template>
  <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>
+    <img :src="'/xbyt/'+data.name2" alt="" class="w-full object-content">
+    <div class="text-sm t-name" :class="type=='sm'?'text-xs':''" >{{ data.name }}</div>
  </a>
 </template>
 <script setup lang="ts">
@ -11,10 +11,16 @@ const props = defineProps({
    type: Object,
    default: {}
  },
+  type: {
+    type: String,
+    default: ''
+  }
 })
-console.log('propsprops', props.data);
-let { data } = toRefs(props);
+let { data,type } = toRefs(props);

 </script>
-<style>
+<style scoped lang="scss">
+.t-name {
+  white-space: nowrap;
+}
 </style>
--- a/apps/web-test/src/views/dashboard/home/components/Output2/index.vue
+++ b/apps/web-test/src/views/dashboard/home/components/Output2/index.vue
@ -79,6 +79,9 @@ import { preferences } from '@vben/preferences';

 watch(() => preferences.theme.mode, (n: any) => {
  VxeUI.setTheme(n)
+},{
+    deep: true,
+    immediate: true
 })

 interface RowVO {
@ -171,9 +174,15 @@ watch(
  overflow: hidden; //超出隐藏
  white-space: nowrap; //超出不换行
  overflow-x: auto; //出现水平滚动条
+  padding-bottom: 3px;
+  margin-bottom: 10px;
  li {
    display: inline-block;
    margin-right: 10px;
  }
 }
+
+.f-btn-box::-webkit-scrollbar {
+  height: 5px !important;
+}
 </style>
--- 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%] flex flex-col">
    <div class="card-name titlt-top">我的应用</div>
-    <GridGroup :list="data.component.childer" class="flex-1"></GridGroup>
+    <GridGroup :list="data.childer" class="flex-1"></GridGroup>
  </div>
 </template>
 <script setup lang="ts">
--- a/apps/web-test/src/views/dashboard/home/index.vue
+++ b/apps/web-test/src/views/dashboard/home/index.vue
@ -6,6 +6,11 @@ import { CheckboxGroup, Checkbox, Collapse, CollapsePanel, FloatButtonGroup, Flo

 import { tilesList } from './tiles'
 import { useRouter } from "vue-router";
+import { UseTilesStore } from '#/store';
+import { storeToRefs } from 'pinia'
+const tilesStore = UseTilesStore();
+
+
 const router = useRouter();

 // import GridGroup from './components/GridGroup/index.vue'
@ -13,62 +18,17 @@ const router = useRouter();
 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"
-      },
+  let layoutStr = JSON.parse(localStorage.getItem('layout'));
+  if (layoutStr && layoutStr.length > 0) {
+    for (let i = 0; i < layoutStr.length; i++) {
+      if (layoutStr[i]&&layoutStr[i].component) {
+        // layoutStr[i].component = loadComponent(layoutStr[i].component);
      }
-  ]
+    }
+    layout.value = layoutStr
+  }
+  console.log('oooo',layout.value);
+  
 })
 const colNum = 12;
 let defaultH = 2;
@ -85,48 +45,6 @@ const DragPos = {
  i: null,
 };
 const componentsInfo = tilesList
-//  [
-//   {
-//     id: '1-1',
-//     title: '磁贴管理(2×2)',
-//     name: 'xl',
-//     component: './components/Output1/index.vue',
-//     des: '磁贴管理(2×2)',
-//     w: 1,
-//     h: 2,
-//     img: 'WORKBENCH_MANAGER.png'
-//   },
-//   {
-//     id: '1-2',
-//     title: '饼图示例(8×8)',
-//     name: 'xxl',
-//     component: './components/Output2/index.vue',
-//     des: '饼图示例(8×8)',
-//     w: 8,
-//     h: 8,
-//     img: 'AUTO_1620294688040.png'
-//   },
-//   {
-//     id: '1-3',
-//     title: '报表示例(4×4)',
-//     name: 'xxxl',
-//     component: './components/Output3/index.vue',
-//     des: '报表示例(4×4)',
-//     w: 4,
-//     h: 4,
-//     img: "AUTO_1621594591994.png"
-//   },
-//   {
-//     id: '1-4',
-//     title: '列表示例(16×8)',
-//     name: 'xxxxl',
-//     component: './components/Output4/index.vue',
-//     des: '列表示例(16×8)',
-//     w: 16,
-//     h: 8,
-//     img: 'AUTO_1620296071109.png'
-//   },
-// ];
 let currentDragCom = null;
 onMounted(() => {
  document.addEventListener(
@ -154,7 +72,7 @@ const processLayout = (layoutSetInfo) => {
    if (!item.component) {
      continue;
    }
-    const resComp = loadComponent(item.component.component);
+    const resComp = loadComponent(item.component);
    item.loadComp = resComp;
  }
 };
@ -260,12 +178,13 @@ const dragend = (e) => {
    layout.value.splice(delIndex, 1);
    const loadComp = loadComponent(currentDragCom.component);
    layout.value.push({
+      ...currentDragCom,
      x: DragPos.x,
      y: DragPos.y,
      w: currentDragCom.w,
      h: currentDragCom.h,
      i: DragPos.i,
-      component: currentDragCom,
+      isNew: true,
      loadComp,
    });
    proxy.$refs.gridLayout.dragEvent(
@ -322,22 +241,34 @@ let addTiles = (val) => {

  selectTilseArr.value = arr
 }
-// 磁贴是否可拖拽
-let tilesIsMove = ref(false)
+// 磁贴是否可编辑（删除、拖拽、大小）
+let { tilesIsMove } = storeToRefs(tilesStore)
 // 取消和确定编辑磁贴
 let cancelOrSure = (type) => {
  if (type == 'cance') {
    editTiles.value = false;
-    tilesIsMove.value = false;
+    tilesStore.setTilesIsMove(false)
+    layout.value = layout.value.filter((item) => {
+      return !item.isNew
+    })
+
  } else if (type == 'sure') {
+    editTiles.value = false;
+    tilesStore.setTilesIsMove(false)
+    layout.value.forEach((element, index) => {
+      delete element.isNew
+    });
+    let newLayout = JSON.parse(JSON.stringify(layout.value));
+    window.localStorage.setItem('layout', JSON.stringify(newLayout));
+  } else if (type == 'edit') {
    editTiles.value = true;
-    tilesIsMove.value = true;
+    tilesStore.setTilesIsMove(true)
  }
 }
 // 页面跳转
 let goPage = (item) => {
  if (tilesIsMove.value) return;
-  router.push(item.component?.path);
+  router.push(item?.path);
 }
 </script>

@ -347,11 +278,11 @@ let goPage = (item) => {
    <div class="grid-box  select-none index-grid">
      <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">
+        :row-height="70" :vertical-compact="true">

        <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">
+          :x="item.x" :y="item.y" :dragAllowFrom="item && item.dom ? item.dom : null"
+          :isResizable="tilesIsMove && item && item.isResize ? item.isResize : false" @resized="resizedEvent">
          <span class="close" @click="delItem(item)" v-if="tilesIsMove">
            <CloseCircleFilled style="color: #f10215;" />
          </span>
@ -371,7 +302,7 @@ let goPage = (item) => {
    <!-- 右侧悬浮部分 -->
    <FloatButtonGroup shape="circle" :style="{ right: '40px' }">
      <template v-if="!editTiles">
-        <FloatButton tooltip="编辑磁贴" @click="cancelOrSure('sure')">
+        <FloatButton tooltip="编辑磁贴" @click="cancelOrSure('edit')">
          <template #icon>
            <EditOutlined style="font-size: 20px;" />
          </template>
@ -396,7 +327,7 @@ let goPage = (item) => {
                  <CollapsePanel key="1" header="个人工作台（22）">
                    <!-- 可拖入的组件部分 -->
                    <div class="components-box">
-                      <div v-for="item in componentsInfo.slice(0, 22)" :key="item.name" class="ctrl-box"
+                      <div v-for="item in componentsInfo.slice(0, 22)" :key="item.name" class="ctrl-box bg-background"
                        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>
@ -407,7 +338,7 @@ let goPage = (item) => {
                  </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"
+                      <div v-for="item in componentsInfo.slice(22, 34)" :key="item.name" class="ctrl-box bg-background"
                        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>
@ -419,7 +350,7 @@ let goPage = (item) => {
                  </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"
+                      <div v-for="item in componentsInfo.slice(34, 56)" :key="item.name" class="ctrl-box bg-background"
                        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>
@ -431,7 +362,7 @@ let goPage = (item) => {
                  </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"
+                      <div v-for="item in componentsInfo.slice(56, 75)" :key="item.name" class="ctrl-box bg-background"
                        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>
@ -443,7 +374,7 @@ let goPage = (item) => {
                  </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"
+                      <div v-for="item in componentsInfo.slice(75, 101)" :key="item.name" class="ctrl-box bg-background"
                        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>
@ -455,9 +386,10 @@ let goPage = (item) => {
                  </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 v-for="item in componentsInfo.slice(101, 102)" :key="item.name"
+                        class="ctrl-box bg-background" 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)"
@ -467,9 +399,10 @@ let goPage = (item) => {
                  </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 v-for="item in componentsInfo.slice(102, 127)" :key="item.name"
+                        class="ctrl-box bg-background" 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)"
@ -497,6 +430,7 @@ let goPage = (item) => {
  min-width: 1000px;
  position: relative;
  overflow-x: auto;
+  max-width: unset !important;
 }

 .grid-box {
@ -520,7 +454,6 @@ let goPage = (item) => {
    height: 130px;
    padding: 12px;
    // margin-top: 20px;
-    background: #ecf1f3;
    user-select: none;
    flex-direction: column;
    border-radius: 10px;
@ -570,7 +503,8 @@ let goPage = (item) => {
  overflow: auto;
  background: transparent;
  // border: 1px solid rgb(66 66 66 / 100%);
-  width: 1200px;
+  // width: 1200px;
+  margin: 0 auto;

  .vue-grid-item {
    // padding: 12px 20px;
--- a/apps/web-test/src/views/dashboard/home/operation.vue
+++ b/apps/web-test/src/views/dashboard/home/operation.vue
@ -0,0 +1,135 @@
+<template>
+    <div class="bg-background p-5 m-4">
+        <div class="flex justify-between mb-4">
+            <Form layout="inline">
+                <FormItem label="业务域编码">
+                    <Input placeholder="请输入"></Input>
+                </FormItem>
+                <FormItem label="业务域名称">
+                    <Input placeholder="请输入"></Input>
+                </FormItem>
+                <Button type="primary">查询</Button>
+            </Form>
+            <div class="flex gap-2">
+                <Button size="small" type="primary">新增</Button>
+                <Button size="small" type="primary">修改</Button>
+                <Button size="small" type="primary" danger>删除</Button>
+            </div>
+        </div>
+        <vxe-table border ref="tableRef" :data="tableData" :radio-config="{ highlight: true }"
+            @cell-click="cellClickEvent" @radio-change="radioChangeEvent">
+            <vxe-column type="radio" width="60">
+                <template #header>
+                    <vxe-button mode="text" @click="clearRadioRowEevnt" :disabled="!selectRow">取消</vxe-button>
+                </template>
+            </vxe-column>
+            <vxe-column field="code" title="业务域编码"></vxe-column>
+            <vxe-column field="id" title="业务域ID"></vxe-column>
+            <vxe-column field="name" title="业务域名称"></vxe-column>
+            <vxe-column field="desc" title="业务域描述" align="center" width="520"></vxe-column>
+            <vxe-column field="operate" title="操作" align="center">
+                <template #default="{ row }">
+                    <div class="flex gap-1 justify-center">
+                        <ContactsFilled style="color: #367cb7;font-size: 20px;" />
+                    </div>
+                </template>
+            </vxe-column>
+        </vxe-table>
+        <div class="py-2 flex justify-between">
+            <div>总共{{ tableData.length }}条数据</div>
+            <Pagination size="small" :total="1000" show-size-changer show-quick-jumper />
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref,watch } from 'vue'
+import { EditFilled, DeleteFilled, ContactsFilled, ToolFilled, ThunderboltFilled } from '@ant-design/icons-vue';
+import { type VxeGridProps, VxeUI } from 'vxe-table'
+import { VXETable, type VxeTableInstance, type VxeTableEvents } from 'vxe-table'
+
+import { preferences } from '@vben/preferences';
+
+watch(() => preferences.theme.mode, (n: any) => {
+  VxeUI.setTheme(n)
+},{
+    deep: true,
+    immediate: true
+})
+import { Button, Form, FormItem, Input, Select, Card, Pagination, Textarea, Checkbox } from 'ant-design-vue';
+interface RowVO {
+    code: string
+    name: string
+    id: number
+    desc: string
+    operate: string
+
+}
+
+const selectRow = ref<RowVO | null>(null)
+
+const tableData = ref<RowVO[]>([
+    {
+        code: '001', name: '业务域1', id: 1, desc: '业务域1',
+        operate: ''
+    },
+    {
+        code: '001', name: '业务域1', id: 1, desc: '业务域1',
+        operate: ''
+    },
+    {
+        code: '001', name: '业务域1', id: 1, desc: '业务域1',
+        operate: ''
+    },
+    {
+        code: '001', name: '业务域1', id: 1, desc: '业务域1',
+        operate: ''
+    },{
+        code: '001', name: '业务域1', id: 1, desc: '业务域1',
+        operate: ''
+    },{
+        code: '001', name: '业务域1', id: 1, desc: '业务域1',
+        operate: ''
+    },{
+        code: '001', name: '业务域1', id: 1, desc: '业务域1',
+        operate: ''
+    },{
+        code: '001', name: '业务域1', id: 1, desc: '业务域1',
+        operate: ''
+    },
+])
+
+const tableRef = ref<VxeTableInstance<RowVO>>()
+
+const cellClickEvent: VxeTableEvents.CellClick<RowVO> = () => {
+    console.log('单元格点击事件')
+}
+
+const radioChangeEvent: VxeTableEvents.RadioChange<RowVO> = ({ row }) => {
+    selectRow.value = row
+    console.log('单选事件')
+}
+
+const setSelectRow = (index: number) => {
+    const $table = tableRef.value
+    if ($table) {
+        $table.setRadioRow(tableData.value[index])
+    }
+}
+
+const clearRadioRowEevnt = () => {
+    const $table = tableRef.value
+    if ($table) {
+        selectRow.value = null
+        $table.clearRadioRow()
+    }
+}
+
+const getRadioEvent = () => {
+    const $table = tableRef.value
+    if ($table) {
+        const currRow = $table.getRadioRecord()
+        VXETable.modal.alert(JSON.stringify(currRow))
+    }
+}
+</script>
+<style scoped lang="scss"></style>
--- a/apps/web-test/src/views/dashboard/home/portal.vue
+++ b/apps/web-test/src/views/dashboard/home/portal.vue
@ -1,9 +1,9 @@
 <template>
-    <div class="main-box bg-[#ecf3f8] px-3 mt-3 h-[100%]">
+    <div class="main-box bg-background 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>
+                <Button type="primary" @click="goToReg">注册磁贴</Button>
                <VbenIconButton
                    class="hover:text-[#007da3] w-[30px] h-[30px] flex justify-center items-center rounded-[50%]">
                    <UnorderedListOutlined />
@ -21,7 +21,8 @@ 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'
-
+import { useRouter } from "vue-router";
+const router = useRouter();
 let list: any[] = []
 for (let i = 0; i < tilesList.length; i++) {
    let obj: any = {}
@ -32,4 +33,9 @@ for (let i = 0; i < tilesList.length; i++) {
    list.push(obj);
    obj = null
 }
+
+let goToReg = () => {
+    router.push("/register");
+
+}
 </script>
--- a/apps/web-test/src/views/dashboard/home/register.vue
+++ b/apps/web-test/src/views/dashboard/home/register.vue
@ -0,0 +1,305 @@
+<template>
+    <div class="w-[100%] px-2 bg-background mt-3 min-w-[1200px]">
+        <div class="w-[70%] mx-auto pt-3">
+            <Steps :current="nowCurrent" :items="[
+                {
+                    title: '选择业务域',
+                },
+                {
+                    title: '选择磁贴模板',
+                },
+                {
+                    title: '填写磁贴信息',
+                },
+            ]"></Steps>
+        </div>
+        <div class="flex gap-3 mt-3 pb-2 justify-center">
+            <div class="c-item flex flex-col  items-center">
+                <div class="s-t my-3">请选择业务域</div>
+                <Form layout="inline" :wrapperCol="wrapperCol">
+                    <FormItem label="名称">
+                        <Input placeholder="请输入"></Input>
+                    </FormItem>
+                    <FormItem label="编码">
+                        <Input placeholder="请输入"></Input>
+                    </FormItem>
+                    <Button type="primary">查询</Button>
+                </Form>
+                <div class="text-xs flex gap-1">
+                    <InfoCircleFilled />
+                    <div>如果找不到相关业务，请<Button type="link">点击此处</Button>新建</div>
+                </div>
+
+                <vxe-table border ref="tableRef" height="70%" :data="tableData" :radio-config="{ highlight: true }"
+                    @cell-click="cellClickEvent" @radio-change="radioChangeEvent">
+                    <vxe-column type="radio" width="60">
+                        <template #header>
+                            <vxe-button mode="text" @click="clearRadioRowEevnt" :disabled="!selectRow">取消</vxe-button>
+                        </template>
+                    </vxe-column>
+                    <vxe-column field="code" title="业务域编码" width="120"></vxe-column>
+                    <vxe-column field="name" title="业务域名称" width="120"></vxe-column>
+                </vxe-table>
+                <div class="flex justify-end w-[100%] px-3 py-3" v-if="nowCurrent == 0">
+                    <Button type="primary" size="large" shape="circle" @click="selectTemplate(1)">
+                        <template #icon>
+                            <ArrowRightOutlined />
+                        </template>
+                    </Button>
+                </div>
+                <!-- <ArrowLeftOutlined /> -->
+            </div>
+            <div class="c-item flex flex-col  items-center" v-show="nowCurrent >= 1">
+                <div class="s-t my-3">请选择磁贴模板</div>
+                <div class="flex flex-wrap h-[100%] gap-3 justify-center ">
+                    <div class="template-item flex flex-col justify-center gap-1 items-center"
+                        :class="{ 'active': templateNum == index }" v-for="(item, index) in templateList" :key="index"
+                        @click="templateClickNum(index)">
+                        <img :src="'/xbyt/' + item.img" class="w-[70px] h-[70px] object-contain">
+                        <div class="text-xs">{{ item.name }}</div>
+
+                        <div class="active-icon" v-if="templateNum == index">
+                            <CheckCircleFilled style="color: hsl(var(--primary));font-size: 20px;"/>
+                        </div>
+                    </div>
+                    <div class="opacity-0 template-item flex flex-col justify-center gap-1 items-center" style="cursor: default;"
+                        v-if="templateList.length % 3 == 2"></div>
+                    <template v-if="templateList.length % 3 == 1">
+                        <div class="opacity-0 template-item flex flex-col justify-center gap-1 items-center" style="cursor: default;"></div>
+                        <div class="opacity-0 template-item flex flex-col justify-center gap-1 items-center" style="cursor: default;"></div>
+                    </template>
+                </div>
+                <div class="flex justify-between w-[100%] px-3 py-3" v-if="nowCurrent == 1">
+                    <Button type="primary" size="large" shape="circle" @click="selectTemplate(0)">
+                        <template #icon>
+                            <ArrowLeftOutlined />
+                        </template>
+                    </Button>
+                    <Button type="primary" size="large" shape="circle" @click="selectTemplate(2)">
+                        <template #icon>
+                            <ArrowRightOutlined />
+                        </template>
+                    </Button>
+                </div>
+            </div>
+            <div class="c-item flex flex-col  items-center" v-show="nowCurrent >= 2">
+                <div class="s-t my-3">请填写磁贴信息</div>
+                <div class="form-box">
+                    <Form :wrapperCol="{ style: { width: '300px' } }" :labelCol="{ style: { width: '80px' } }">
+                        <FormItem label="业务域" :rules="[{ required: true, message: '请输入业务域' }]">
+                            <Input placeholder="请输入"></Input>
+                        </FormItem>
+                        <FormItem label="适用范围" :rules="[{ required: true, message: '请选择适用范围' }]">
+                            <Select placeholder="请选择"></Select>
+                        </FormItem>
+                        <FormItem label="编码" :rules="[{ required: true, message: '请输入编码' }]">
+                            <Input placeholder="请输入"></Input>
+                        </FormItem>
+                        <FormItem label="标题" :rules="[{ required: true, message: '请输入标题' }]">
+                            <Input placeholder="请输入"></Input>
+                        </FormItem>
+                        <FormItem label="链接地址" :rules="[{ required: true, message: '请输入链接地址' }]">
+                            <Input placeholder="请输入"></Input>
+                        </FormItem>
+                        <FormItem label="数据源">
+                            <Input placeholder="请输入"></Input>
+                        </FormItem>
+                        <FormItem label="磁贴大小">
+                            <div class="flex items-center gap-4">
+                                <div class="flex items-center">
+                                    宽：
+                                    <Select>
+                                        <SelectOption value="1">1</SelectOption>
+                                        <SelectOption value="2">2</SelectOption>
+                                    </Select>
+                                </div>
+                                ×
+                                <div class="flex items-center">
+                                    高：
+                                    <Select>
+                                        <SelectOption value="1">1</SelectOption>
+                                        <SelectOption value="2">2</SelectOption>
+                                    </Select>
+                                </div>
+                            </div>
+                        </FormItem>
+                        <FormItem label="图标" :rules="[{ required: true, message: '请上传图标' }]">
+                            <Input placeholder="请输入"></Input>
+                        </FormItem>
+                        <FormItem label="打开方式">
+                            <Select placeholder="请选择"></Select>
+                        </FormItem>
+                        <FormItem label="作者" :rules="[{ required: true, message: '请输入作者' }]">
+                            <Input placeholder="请输入"></Input>
+                        </FormItem>
+                        <FormItem label="联系方式" :rules="[{ required: true, message: '请输入联系方式' }]">
+                            <div>
+                                <Input placeholder="请输入"></Input>
+                                <Checkbox>经过授权才可使用</Checkbox>
+                            </div>
+                        </FormItem>
+                        <FormItem label="描述">
+                            <Textarea placeholder="请输入"></Textarea>
+                        </FormItem>
+                    </Form>
+                </div>
+                <div class="flex justify-between w-[100%] px-3 py-3" v-if="nowCurrent == 2">
+                    <Button type="primary" size="large" shape="circle" @click="selectTemplate(1)">
+                        <template #icon>
+                            <ArrowLeftOutlined />
+                        </template>
+                    </Button>
+                    <Button type="primary" size="large" shape="circle" @click="selectTemplate(3)">
+                        <template #icon>
+                            <ArrowRightOutlined />
+                        </template>
+                    </Button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, reactive, watch } from 'vue'
+import { Steps } from 'ant-design-vue';
+import { InfoCircleFilled, ArrowRightOutlined, ArrowLeftOutlined,CheckCircleFilled } from '@ant-design/icons-vue';
+import { type VxeGridProps, VxeUI } from 'vxe-table'
+import { VXETable, type VxeTableInstance, type VxeTableEvents } from 'vxe-table'
+
+import { Button, Form, FormItem, Input, Select, Card, Pagination, Textarea, Checkbox } from 'ant-design-vue';
+import { preferences } from '@vben/preferences';
+
+const wrapperCol = { style: { width: '100px' } };
+watch(() => preferences.theme.mode, (n: any) => {
+    VxeUI.setTheme(n)
+},{
+    deep: true,
+    immediate: true
+})
+interface RowVO {
+    code: string
+    name: string
+}
+
+const selectRow = ref<RowVO | null>(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 tableRef = ref<VxeTableInstance<RowVO>>()
+
+const cellClickEvent: VxeTableEvents.CellClick<RowVO> = () => {
+    console.log('单元格点击事件')
+}
+
+const radioChangeEvent: VxeTableEvents.RadioChange<RowVO> = ({ row }) => {
+    selectRow.value = row
+    console.log('单选事件')
+}
+
+const setSelectRow = (index: number) => {
+    const $table = tableRef.value
+    if ($table) {
+        $table.setRadioRow(tableData.value[index])
+    }
+}
+
+const clearRadioRowEevnt = () => {
+    const $table = tableRef.value
+    if ($table) {
+        selectRow.value = null
+        $table.clearRadioRow()
+    }
+}
+
+const getRadioEvent = () => {
+    const $table = tableRef.value
+    if ($table) {
+        const currRow = $table.getRadioRecord()
+        VXETable.modal.alert(JSON.stringify(currRow))
+    }
+}
+const templateList = [{
+    img: 'AUTO_1612159241967_C车辆调度.png',
+    name: '多媒体'
+}, {
+    img: 'AUTO_1612160044533_C市场管理.png',
+    name: '柱状图'
+}, {
+    img: 'AUTO_1612174485058_C投资共享.png',
+    name: '卡片'
+}, {
+    img: 'AUTO_1612175576303_C费用报销.png',
+    name: '自定义'
+}, {
+    img: 'AUTO_1612175837663_C设备管理.png',
+    name: '仪表盘'
+}, {
+    img: 'AUTO_1612176568856_C财务管理.png',
+    name: '折线图'
+}, {
+    img: 'AUTO_1612176967032_C土地信息.png',
+    name: '列表'
+}, {
+    img: 'AUTO_1612236164722_C门户网站.png',
+    name: '数字'
+}, {
+    img: 'AUTO_1612251274093_C集输防腐.png',
+    name: '饼图'
+}, {
+    img: 'AUTO_1612254108987_C新井日报.png',
+    name: '快捷入口'
+}, {
+    img: 'AUTO_1612254711440_C单井曲线.png',
+    name: '文本'
+}]
+
+let nowCurrent = ref(0);
+let selectTemplate = (index: number) => {
+    nowCurrent.value = index
+}
+
+let templateNum = ref(0);
+let templateClickNum = (index: number) => {
+    templateNum.value = index
+}
+</script>
+<style scoped lang="scss">
+.c-item {
+    border: 1px solid #ccc;
+    flex: .3333;
+    height: calc(100vh - 150px);
+}
+
+.template-item {
+    border: 1px solid #ccc;
+    width: 30%;
+    cursor: pointer;
+    position: relative;
+
+    .active-icon {
+        position: absolute;
+        right: 3px;
+        top: 3px;
+    }
+
+    &.active {
+        border: 1px solid hsl(var(--primary));
+    }
+}
+
+.form-box {
+    max-height: 90%;
+    overflow-y: auto;
+}
+</style>
--- a/apps/web-test/src/views/dashboard/home/tiles.ts
+++ b/apps/web-test/src/views/dashboard/home/tiles.ts
@ -1,4 +1,59 @@
 let tilesList = [
+    {
+        "name1": "WORKBENCH_USER_TMPL.png",
+        "name2": "WORKBENCH_USER_TMPL_C用户模板.png",
+        "size": "2x2",
+        "name": "用户模板",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 131,
+        "path": "/usertemplate"
+    },
+    {
+        "name1": "WORKBENCH_BUSINESS.png",
+        "name2": "WORKBENCH_BUSINESS_C业务域.png",
+        "size": "2x2",
+        "name": "业务域",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 128,
+        "path": "/operation"
+    },
+    {
+        "name1": "WORKBENCH_MANAGER.png",
+        "name2": "WORKBENCH_MANAGER_C磁贴管理.png",
+        "size": "2x2",
+        "name": "磁贴管理",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 129,
+        "path": "/portal"
+    },
+    {
+        "name1": "WORKBENCH_AUDIT.png",
+        "name2": "WORKBENCH_AUDIT_C磁贴审核.png",
+        "size": "2x2",
+        "name": "磁贴审核",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 127,
+        "path": "/audit"
+    },
+    {
+        "name1": "AUTO_1612255706920.png",
+        "name2": "AUTO_1612255706920_C待办管理.png",
+        "size": "2x2",
+        "name": "待办管理",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 27,
+        "path": "/todo"
+    },
    {
        "name1": "AUTO_1612155980933.png",
        "name2": "AUTO_1612155980933_C会议管理.png",
@ -8,7 +63,6 @@ let tilesList = [
        "h": 2,
        "component": "./components/Output1/index.vue",
        "i": 0,
-        "path": "/portal"
    },
    {
        "name1": "AUTO_1612158921536.png",
@ -19,6 +73,7 @@ let tilesList = [
        "h": 6,
        "component": "./components/Output5/index.vue",
        "dom": '.titlt-top',
+        "isResize": true,
        "childer": [
            {
                "name1": "AUTO_1612159241967.png",
@ -44,7 +99,8 @@ let tilesList = [
        "h": 5,
        "component": "./components/Output2/index.vue",
        "i": 2,
-        "dom": '.titlt-top'
+        "dom": '.titlt-top',
+        "isResize": true
    },
    {
        "name1": "AUTO_1612159773503.png",
@ -287,16 +343,6 @@ let tilesList = [
        "component": "./components/Output1/index.vue",
        "i": 26
    },
-    {
-        "name1": "AUTO_1612255706920.png",
-        "name2": "AUTO_1612255706920_C待办管理.png",
-        "size": "2x2",
-        "name": "待办管理",
-        "w": 1,
-        "h": 2,
-        "component": "./components/Output1/index.vue",
-        "i": 27
-    },
    {
        "name1": "AUTO_1615449162971.png",
        "name2": "AUTO_1615449162971_C日志服务.png",
@ -1287,36 +1333,6 @@ let tilesList = [
        "component": "./components/Output1/index.vue",
        "i": 126
    },
-    {
-        "name1": "WORKBENCH_AUDIT.png",
-        "name2": "WORKBENCH_AUDIT_C磁贴审核.png",
-        "size": "2x2",
-        "name": "磁贴审核",
-        "w": 1,
-        "h": 2,
-        "component": "./components/Output1/index.vue",
-        "i": 127
-    },
-    {
-        "name1": "WORKBENCH_BUSINESS.png",
-        "name2": "WORKBENCH_BUSINESS_C业务域.png",
-        "size": "2x2",
-        "name": "业务域",
-        "w": 1,
-        "h": 2,
-        "component": "./components/Output1/index.vue",
-        "i": 128
-    },
-    {
-        "name1": "WORKBENCH_MANAGER.png",
-        "name2": "WORKBENCH_MANAGER_C磁贴管理.png",
-        "size": "2x2",
-        "name": "磁贴管理",
-        "w": 1,
-        "h": 2,
-        "component": "./components/Output1/index.vue",
-        "i": 129
-    },
    {
        "name1": "WORKBENCH_USER_AUTH.png",
        "name2": "WORKBENCH_USER_AUTH_C用户授权.png",
@ -1327,16 +1343,6 @@ let tilesList = [
        "component": "./components/Output1/index.vue",
        "i": 130
    },
-    {
-        "name1": "WORKBENCH_USER_TMPL.png",
-        "name2": "WORKBENCH_USER_TMPL_C用户模板.png",
-        "size": "2x2",
-        "name": "用户模板",
-        "w": 1,
-        "h": 2,
-        "component": "./components/Output1/index.vue",
-        "i": 131
-    }
 ]

 export { tilesList }
--- a/apps/web-test/src/views/dashboard/home/todo.vue
+++ b/apps/web-test/src/views/dashboard/home/todo.vue
@ -0,0 +1,80 @@
+<template>
+    <div class="bg-background p-5 m-4">
+        <div class="flex justify-between mb-4">
+            <Form layout="inline">
+                <FormItem label="应用名称">
+                    <Input placeholder="请输入"></Input>
+                </FormItem>
+                <FormItem label="应用编码">
+                    <Input placeholder="请输入"></Input>
+                </FormItem>
+                <FormItem label="模板类型">
+                    <Select placeholder="请输入"></Select>
+                </FormItem>
+                <Space warp>
+                    <Button type="primary">查询</Button>
+                    <Button>清空</Button>
+                </Space>
+            </Form>
+        </div>
+        <Space warp class="mb-5">
+            <Button type="primary" :icon="h(PlusOutlined)" class="flex items-center" @click="router.push('/addtodo')">添加应用</Button>
+            <Button :icon="h(UploadOutlined)" class="flex items-center">一键导入</Button>
+            <Button :icon="h(SettingOutlined)" class="flex items-center">配置待办清单</Button>
+        </Space>
+        <vxe-table border ref="tableRef" :data="tableData">
+            <vxe-column field="code" title="应用编码"></vxe-column>
+            <vxe-column field="name" title="应用名称"></vxe-column>
+            <vxe-column field="link" title="接口地址"></vxe-column>
+            <vxe-column field="sort" title="排序" width="50"></vxe-column>
+            <vxe-column field="operate" title="操作" width="350">
+                <template #default="{ row }">
+                    <div class="flex gap-2">
+                        <Button type="link">告警管理</Button>
+                        <Button type="link">编辑</Button>
+                        <Button type="link">删除</Button>
+                        <Button type="link">导出</Button>
+                    </div>
+                </template>
+            </vxe-column>
+        </vxe-table>
+        <div class="py-2 flex justify-between">
+            <div>总共{{ tableData.length }}条数据</div>
+            <Pagination size="small" :total="1000" show-size-changer show-quick-jumper />
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, watch,h } from 'vue'
+import { SettingOutlined,UploadOutlined,PlusOutlined } from '@ant-design/icons-vue';
+import { type VxeGridProps, VxeUI } from 'vxe-table'
+import { VXETable, type VxeTableInstance, type VxeTableEvents } from 'vxe-table'
+
+import { Button, Form, FormItem, Input, Select, Card, Pagination, Textarea, Checkbox, Space } from 'ant-design-vue';
+import { preferences } from '@vben/preferences';
+import { useRouter } from "vue-router";
+const router = useRouter();
+
+watch(() => preferences.theme.mode, (n: any) => {
+    VxeUI.setTheme(n)
+}, {
+    deep: true,
+    immediate: true
+})
+interface RowVO {
+    code: string
+    name: string
+    link: string
+    sort: string
+    // 操作
+    operate: string
+}
+
+
+const tableData = ref<RowVO[]>([
+    { code: "LDQXJ", name: "领导请销假", link: "http://www.baidu.com", sort: "1", operate: "操作" },
+    { code: "DCGL", name: "督察管理", link: "http://www.baidu.com", sort: "3", operate: "操作" },
+    { code: "DZKQ", name: "电子考勤", link: "http://www.baidu.com", sort: "2", operate: "操作" },
+])
+</script>
+<style scoped lang="scss"></style>
--- a/apps/web-test/src/views/dashboard/home/usertemplate.vue
+++ b/apps/web-test/src/views/dashboard/home/usertemplate.vue
@ -0,0 +1,86 @@
+<template>
+    <div class="bg-background p-5 m-4">
+        <div class="flex justify-between mb-4">
+            <Form layout="inline">
+                <FormItem label="名称">
+                    <Input placeholder="请输入"></Input>
+                </FormItem>
+                <FormItem label="编码">
+                    <Input placeholder="请输入"></Input>
+                </FormItem>
+                <FormItem label="模板类型">
+                    <Select placeholder="请输入"></Select>
+                </FormItem>
+                <Button type="primary">查询</Button>
+            </Form>
+            <Button type="primary">添加</Button>
+        </div>
+        <vxe-table border ref="tableRef" :data="tableData">
+            <vxe-column field="ucode" title="租户编码"></vxe-column>
+            <vxe-column field="name" title="模板名称"></vxe-column>
+            <vxe-column field="code" title="模板编码"></vxe-column>
+            <vxe-column field="versions" title="模板版本信息"></vxe-column>
+            <vxe-column field="type" title="模板类型"></vxe-column>
+            <vxe-column field="isDefault" title="是否为默认面板"></vxe-column>
+            <vxe-column field="users" title="创建人"></vxe-column>
+            <vxe-column field="time" title="创建时间"></vxe-column>
+            <vxe-column field="maintain" title="维护人"></vxe-column>
+            <vxe-column field="maintaintime" title="维护时间"></vxe-column>
+            <vxe-column field="operate" title="操作" width="150">
+                <template #default="{ row }">
+                    <div class="flex gap-1">
+                        <EditFilled style="color: #5cb15c;font-size: 20px;" />
+                        <DeleteFilled style="color: #e15852;font-size: 20px;"/>
+                        <ContactsFilled style="color: #367cb7;font-size: 20px;"/>
+                        <ToolFilled style="color: #367cb7;font-size: 20px;"/>
+                        <ThunderboltFilled style="color: #e15852;font-size: 20px;"/>
+                    </div>
+                </template>
+            </vxe-column>
+        </vxe-table>
+        <div class="py-2 flex justify-between">
+            <div>总共{{ tableData.length }}条数据</div>
+            <Pagination size="small" :total="1000" show-size-changer show-quick-jumper />
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref ,watch} from 'vue'
+import { EditFilled, DeleteFilled, ContactsFilled, ToolFilled, ThunderboltFilled } from '@ant-design/icons-vue';
+import { type VxeGridProps, VxeUI } from 'vxe-table'
+import { VXETable, type VxeTableInstance, type VxeTableEvents } from 'vxe-table'
+
+import { Button, Form, FormItem, Input, Select, Card, Pagination, Textarea, Checkbox } from 'ant-design-vue';
+import { preferences } from '@vben/preferences';
+
+watch(() => preferences.theme.mode, (n: any) => {
+  VxeUI.setTheme(n)
+},{
+    deep: true,
+    immediate: true
+})
+interface RowVO {
+    ucode: string
+    name: string
+    code: string
+    versions: string
+    type: string
+    isDefault: boolean
+    users: string
+    time: string
+    maintain: string
+    maintaintime: string
+    // 操作
+    operate: string
+}
+
+
+const tableData = ref<RowVO[]>([
+    { ucode: 'xbyt', code: "PC_Default", name: "管理员模板", versions: "1.0.0", type: "PC", isDefault: true, users: "admin", time: "2021-01-01 00:00:00", maintain: "admin", maintaintime: "2021-01-01 00:00:00", operate: "编辑" },
+    { ucode: 'xbyt', code: "PC_Default", name: "管理员模板", versions: "1.0.0", type: "PC", isDefault: true, users: "admin", time: "2021-01-01 00:00:00", maintain: "admin", maintaintime: "2021-01-01 00:00:00", operate: "编辑" },
+    { ucode: 'xbyt', code: "PC_Default", name: "管理员模板", versions: "1.0.0", type: "PC", isDefault: true, users: "admin", time: "2021-01-01 00:00:00", maintain: "admin", maintaintime: "2021-01-01 00:00:00", operate: "编辑" },
+    { ucode: 'xbyt', code: "PC_Default", name: "管理员模板", versions: "1.0.0", type: "PC", isDefault: true, users: "admin", time: "2021-01-01 00:00:00", maintain: "admin", maintaintime: "2021-01-01 00:00:00", operate: "编辑" },
+    { ucode: 'xbyt', code: "PC_Default", name: "管理员模板", versions: "1.0.0", type: "PC", isDefault: true, users: "admin", time: "2021-01-01 00:00:00", maintain: "admin", maintaintime: "2021-01-01 00:00:00", operate: "编辑" },
+])
+</script>
+<style scoped lang="scss"></style>
--- a/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue
+++ b/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue
@ -163,7 +163,7 @@ if (enableShortcutKey.value) {
    <DropdownMenuTrigger>
      <div class="hover:bg-accent ml-1 mr-2 cursor-pointer rounded-full p-1.5">
        <div class="hover:text-accent-foreground flex-center">
-          <VbenAvatar :alt="text" :src="avatar" class="size-8" dot />
+          <VbenAvatar :alt="text" :src="'https://unpkg.com/@vbenjs/static-source@0.1.7/source/avatar-v1.webp'" class="size-8" dot />
        </div>
      </div>
    </DropdownMenuTrigger>
@ -171,7 +171,7 @@ if (enableShortcutKey.value) {
      <DropdownMenuLabel class="flex items-center p-3">
        <VbenAvatar
          :alt="text"
-          :src="avatar"
+          :src="'https://unpkg.com/@vbenjs/static-source@0.1.7/source/avatar-v1.webp'"
          class="size-12"
          dot
          dot-class="bottom-0 right-1 border-2 size-4 bg-green-500"