From 0682413c5f7e9ec52135a96e350cace5d4e6e46f Mon Sep 17 00:00:00 2001
From: hujiale <13306077+hujiale9527@user.noreply.gitee.com>
Date: Fri, 25 Oct 2024 09:59:06 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A8=A1=E6=9D=BF=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-test/src/layouts/user/layout.vue     |  30 +-
 apps/web-test/src/layouts/user/like.vue       | 283 +++++------
 .../home/components/Output2/index.vue         | 441 +++++++++++++-----
 .../src/views/dashboard/home/index.vue        |   2 +-
 4 files changed, 483 insertions(+), 273 deletions(-)

diff --git a/apps/web-test/src/layouts/user/layout.vue b/apps/web-test/src/layouts/user/layout.vue
index a790d025..bc7a5bc3 100644
--- a/apps/web-test/src/layouts/user/layout.vue
+++ b/apps/web-test/src/layouts/user/layout.vue
@@ -42,26 +42,26 @@ const PRESET = computed((): PresetItem[] => [
     tip: '顶部栏仅用于显示全局信息或操作，不包含菜单。',
     type: 'sidebar-topbar',
   },
-  {
-    name: $t('preferences.vertical'),
-    tip: $t('preferences.verticalTip'),
-    type: 'sidebar-nav',
-  },
+  // {
+  //   name: $t('preferences.vertical'),
+  //   tip: $t('preferences.verticalTip'),
+  //   type: 'sidebar-nav',
+  // },
   {
     name: $t('preferences.twoColumn'),
     tip: $t('preferences.twoColumnTip'),
     type: 'sidebar-mixed-nav',
   },
-  // {
-  //   name: $t('preferences.horizontal'),
-  //   tip: $t('preferences.horizontalTip'),
-  //   type: 'header-nav',
-  // },
-  // {
-  //   name: $t('preferences.mixedMenu'),
-  //   tip: $t('preferences.mixedMenuTip'),
-  //   type: 'mixed-nav',
-  // },
+  {
+    name: $t('preferences.horizontal'),
+    tip: $t('preferences.horizontalTip'),
+    type: 'header-nav',
+  },
+  {
+    name: $t('preferences.mixedMenu'),
+    tip: $t('preferences.mixedMenuTip'),
+    type: 'mixed-nav',
+  },
   // {
   //   name: $t('preferences.fullContent'),
   //   tip: $t('preferences.fullContentTip'),
diff --git a/apps/web-test/src/layouts/user/like.vue b/apps/web-test/src/layouts/user/like.vue
index c13291bc..40eefad0 100644
--- a/apps/web-test/src/layouts/user/like.vue
+++ b/apps/web-test/src/layouts/user/like.vue
@@ -1,144 +1,165 @@
-<template>
-    <Modal title="个人偏好" :visible="visible" @cancel="close" :width="600">
-        <Tabs v-model:activeKey="activeKey" centered tabPosition="left">
-            <TabPane key="1" tab="自定义菜单">
-                <div class="list-box flex flex-col gap-4 my-2">
-                    <div class="list-item-box flex justify-around  items-center">
-                        <div class="i-n w-100 shrink-0">
-                            <FolderOutlined class="mr-2" />总部系统
-                        </div>
-                        <div class="i-s">显示菜单：<Checkbox v-model:checked="checked"></Checkbox>
-                        </div>
-                        <div class="i-n">排序：0</div>
-                    </div>
-                    <div class="list-item-box flex justify-around  items-center" v-for="(item, index) in otherRouter"
-                        :key="index">
-                        <div class="i-n w-100 shrink-0">
-                            <FolderOutlined class="mr-2" />{{ item.name }}
-                        </div>
-                        <div class="i-s">显示菜单：<Checkbox v-model:checked="checked"></Checkbox>
-                        </div>
-                        <div class="i-n">排序：{{ index + 1 }}</div>
-                    </div>
-                </div>
-            </TabPane>
-            <TabPane key="2" tab="菜单区设置" force-render>
-                <div class="flex justify-center">
-                    <Form style="width: 450px;">
-                        <FormItem label="菜单栏默认打开：" class="mb-3">
-                            <Switch v-model:checked="menuOpen" />
-                        </FormItem>
-                        <FormItem label="深色侧边栏：" class="mb-3">
-                            <Switch v-model:checked="menuTheme" />
-                        </FormItem>
-                        <FormItem label="布局：" class="mb-3">
-                            <layout v-model="layoutVlaue"></layout>
-                        </FormItem>
-                    </Form>
-                </div>
-            </TabPane>
-            <TabPane key="3" tab="主题设置">
-                <div class="flex justify-center">
-
-                    <Form style="width: 450px;">
-                        <FormItem label="默认主题：" class="mb-3">
-                            <theme v-model="themeValue"></theme>
-                        </FormItem>
-                        <FormItem label="内置主题：" class="mb-3">
-                            <builtin :isDark="true" v-model="builtinValue"></builtin>
-                        </FormItem>
-                    </Form>
-                </div>
-            </TabPane>
-            <TabPane key="4" tab="消息语音">
-                <div class="flex justify-center">
-                    <Form style="width: 450px;">
-                        <FormItem label="消息语音提醒：" class="mb-3">
-                            <Switch v-model:checked="checked" class="ml-3" />
-                        </FormItem>
-                        <FormItem label="提示语言选择列表：" class="mb-3">
-                            <Select ref="select" class="ml-3" v-model:value="value1" :options="options1"></Select>
-                        </FormItem>
-                        <FormItem label="提示语音选择文件地址" class="mb-3">
-                            <div class="ml-3 flex flex-col gap-2">
-                                无
-                                <div class="flex gap-2">
-                                    <Button type="primary">试听</Button>
-                                    <Button type="primary">上传</Button>
-                                </div>
-                            </div>
-
-                        </FormItem>
-                    </Form>
-                </div>
-            </TabPane>
-        </Tabs>
-        <template #footer>
-            <Button type="link" key="back" @click="close">恢复</Button>
-            <Button key="back" @click="close">取消</Button>
-            <Button key="submit" type="primary" @click="close">确定</Button>
-        </template>
-    </Modal>
-</template>
 <script setup lang="ts">
-import { Modal, Tabs, Form, FormItem, Select, Button, TabPane, Checkbox, Switch, Radio, RadioGroup } from 'ant-design-vue';
+import { ref, watch } from 'vue';
+
+import { preferences, updatePreferences } from '@vben/preferences';
+
 import { FolderOutlined } from '@ant-design/icons-vue';
+import {
+  Button,
+  Checkbox,
+  Form,
+  FormItem,
+  Modal,
+  Select,
+  Switch,
+  TabPane,
+  Tabs,
+} from 'ant-design-vue';
+
+import { otherRouter } from '#/router/routes/modules/linkdata';
+
+import builtin from './builtin.vue';
 import layout from './layout.vue';
 import theme from './theme.vue';
-import builtin from './builtin.vue';
-import { ref, watch } from 'vue';
-import { otherRouter } from "#/router/routes/modules/linkdata"
-import { preferences, updatePreferences } from '@vben/preferences';
-let layoutVlaue = ref(preferences.app.layout)
-watch(layoutVlaue, (n, o) => {
-    updatePreferences({
-        app: {
-            layout: n
-        }
-    })
 
-})
-let themeValue = ref(preferences.theme.mode);
+const layoutVlaue = ref(preferences.app.layout);
+watch(layoutVlaue, (n, o) => {
+  updatePreferences({
+    app: {
+      layout: n,
+    },
+  });
+});
+const themeValue = ref(preferences.theme.mode);
 watch(themeValue, (n, o) => {
-    updatePreferences({
-        theme: {
-            mode: n
-        }
-    })
-})
-let builtinValue = ref(preferences.theme.builtinType);
+  updatePreferences({
+    theme: {
+      mode: n,
+    },
+  });
+});
+const builtinValue = ref(preferences.theme.builtinType);
 watch(builtinValue, (n, o) => {
-    updatePreferences({
-        theme: {
-            builtinType: n
-        }
-    })
-})
-let menuOpen = ref(preferences.sidebar.enable)
+  updatePreferences({
+    theme: {
+      builtinType: n,
+    },
+  });
+});
+const menuOpen = ref(preferences.sidebar.enable);
 watch(menuOpen, (n, o) => {
-    updatePreferences({
-        sidebar: {
-            enable: n
-        }
-    })
-})
-let menuTheme = ref(preferences.theme.semiDarkSidebar)
+  updatePreferences({
+    sidebar: {
+      enable: n,
+    },
+  });
+});
+const menuTheme = ref(preferences.theme.semiDarkSidebar);
 watch(menuTheme, (n, o) => {
-    updatePreferences({
-        theme: {
-            semiDarkSidebar: n
-        }
-    })
-})
-let value1 = ref('')
-let activeKey = ref('1');
-let checked = ref(true)
-let options1 = []
+  updatePreferences({
+    theme: {
+      semiDarkSidebar: n,
+    },
+  });
+});
+const value1 = ref('');
+const activeKey = ref('1');
+const checked = ref(true);
+const options1 = [];
 
 const visible = defineModel<boolean>('visible');
 
 const close = () => {
-    visible.value = false
-}
-
-</script>
\ No newline at end of file
+  visible.value = false;
+};
+</script>
+<template>
+  <Modal :visible="visible" :width="600" title="个人偏好" @cancel="close">
+    <Tabs v-model:active-key="activeKey" centered tab-position="left">
+      <TabPane key="1" tab="自定义菜单">
+        <div class="list-box my-2 flex flex-col gap-4">
+          <div class="list-item-box flex items-center justify-around">
+            <div class="i-n w-100 shrink-0">
+              <FolderOutlined class="mr-2" />总部系统
+            </div>
+            <div class="i-s">
+              显示菜单：<Checkbox v-model:checked="checked" />
+            </div>
+            <div class="i-n">排序：0</div>
+          </div>
+          <div
+            v-for="(item, index) in otherRouter"
+            :key="index"
+            class="list-item-box flex items-center justify-around"
+          >
+            <div class="i-n w-100 shrink-0">
+              <FolderOutlined class="mr-2" />{{ item.name }}
+            </div>
+            <div class="i-s">
+              显示菜单：<Checkbox v-model:checked="checked" />
+            </div>
+            <div class="i-n">排序：{{ index + 1 }}</div>
+          </div>
+        </div>
+      </TabPane>
+      <TabPane key="2" force-render tab="菜单区设置">
+        <div class="flex justify-center">
+          <Form style="width: 450px">
+            <FormItem class="mb-3" label="菜单栏默认打开：">
+              <Switch v-model:checked="menuOpen" />
+            </FormItem>
+            <FormItem class="mb-3" label="深色侧边栏：">
+              <Switch v-model:checked="menuTheme" />
+            </FormItem>
+            <FormItem class="mb-3" label="布局：">
+              <layout v-model="layoutVlaue" />
+            </FormItem>
+          </Form>
+        </div>
+      </TabPane>
+      <TabPane key="3" tab="主题设置">
+        <div class="flex justify-center">
+          <Form style="width: 450px">
+            <FormItem class="mb-3" label="默认主题：">
+              <theme v-model="themeValue" />
+            </FormItem>
+            <FormItem class="mb-3" label="内置主题：">
+              <builtin v-model="builtinValue" :is-dark="true" />
+            </FormItem>
+          </Form>
+        </div>
+      </TabPane>
+      <TabPane key="4" tab="消息语音">
+        <div class="flex justify-center">
+          <Form style="width: 450px">
+            <FormItem class="mb-3" label="消息语音提醒：">
+              <Switch v-model:checked="checked" class="ml-3" />
+            </FormItem>
+            <FormItem class="mb-3" label="提示语言选择列表：">
+              <Select
+                ref="select"
+                v-model:value="value1"
+                :options="options1"
+                class="ml-3"
+              />
+            </FormItem>
+            <FormItem class="mb-3" label="提示语音选择文件地址">
+              <div class="ml-3 flex flex-col gap-2">
+                无
+                <div class="flex gap-2">
+                  <Button type="primary">试听</Button>
+                  <Button type="primary">上传</Button>
+                </div>
+              </div>
+            </FormItem>
+          </Form>
+        </div>
+      </TabPane>
+    </Tabs>
+    <template #footer>
+      <Button key="back" type="link" @click="close">恢复</Button>
+      <Button key="back" @click="close">取消</Button>
+      <Button key="submit" type="primary" @click="close">确定</Button>
+    </template>
+  </Modal>
+</template>
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 0b82451d..86cb4868 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,96 +1,47 @@
-<template>
-  <div style="width: 100%;height: 100%;" class="flex flex-col">
-    <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" :class="{'active': selectTodo == 'db'}" @click="selectTodoClick('db')">
-            <CalendarOutlined />待办
-          </div>
-        </Badge>
-        <div class="flex items-center gap-1 cursor-pointer" :class="{'active': selectTodo == 'yb'}" @click="selectTodoClick('yb')">
-          <CarryOutOutlined />已办
-        </div>
-        <Badge :count="9" :offset="[6, -3]">
-          <div class="flex items-center gap-1 cursor-pointer" :class="{'active': selectTodo == 'dy'}" @click="selectTodoClick('dy')">
-            <ExceptionOutlined />待阅
-          </div>
-        </Badge>
-        <div class="flex items-center gap-1 cursor-pointer" :class="{'active': selectTodo == 'yy'}" @click="selectTodoClick('yy')">
-          <FileDoneOutlined />已阅
-        </div>
-        <div class="flex items-center gap-1 cursor-pointer" :class="{'active': selectTodo == 'gz'}" @click="selectTodoClick('gz')">
-          <StarOutlined />关注
-        </div>
-      </div>
-      <div class="flex items-center gap-3">
-        <InputSearch placeholder="任务查询" style="width: 200px" />
-        <SettingOutlined class="cursor-pointer" @click="userSet = true" />
-        <ReloadOutlined class="cursor-pointer" />
-      </div>
-    </div>
-    <ul class="f-btn-box">
-      <li>
-        <Button :type="selectClass == '全部' ? 'primary' : 'default'" @click="selectedClick('全部')">全部</Button>
-      </li>
-      <li v-for="(item) in plainOptions" :key="item" @click="selectedClick(item)">
-        <Button :type="selectClass == item ? 'primary' : 'default'">{{ item }}</Button>
-      </li>
-    </ul>
-    <div class="flex-1 overflow-hidden">
-      <vxe-grid v-bind="gridOptions">
-        <template #attention_default="{ row }">
-          <StarOutlined class="text-lg"></StarOutlined>
-        </template>
-        <template #pager>
-          <div class="py-2 flex justify-end">
-            <Pagination size="small" :total="1000" show-size-changer show-quick-jumper />
-          </div>
-        </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, 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, Badge, Modal, Checkbox, CheckboxGroup, Button } from 'ant-design-vue';
+import { reactive, ref, watch } from 'vue';
+
 import { preferences } from '@vben/preferences';
 
-watch(() => preferences.theme.mode, (n: any) => {
-  VxeUI.setTheme(n)
-}, {
-  deep: true,
-  immediate: true
-})
+import {
+  CalendarOutlined,
+  CarryOutOutlined,
+  ExceptionOutlined,
+  FileDoneOutlined,
+  ReloadOutlined,
+  SettingOutlined,
+  StarOutlined,
+} from '@ant-design/icons-vue';
+import {
+  Badge,
+  Button,
+  Checkbox,
+  CheckboxGroup,
+  InputSearch,
+  Modal,
+  Pagination,
+} from 'ant-design-vue';
+import { type VxeGridProps, VxeUI } from 'vxe-table';
+
+watch(
+  () => preferences.theme.mode,
+  (n: any) => {
+    VxeUI.setTheme(n);
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+);
 
 interface RowVO {
-  id: number
-  title: string
-  taskName: string
-  handle: string
-  attention: string
-  systemName: string
-  time: string
+  id: number;
+  title: string;
+  taskName: string;
+  handle: string;
+  attention: string;
+  systemName: string;
+  time: string;
 }
 
 const gridOptions = reactive<VxeGridProps<RowVO>>({
@@ -99,52 +50,180 @@ const gridOptions = reactive<VxeGridProps<RowVO>>({
   loading: true,
   height: 'auto',
   columnConfig: {
-    resizable: true
+    resizable: true,
   },
   columns: [
-    { field: 'title', title: '标题' },
+    { field: 'title', title: '标题', slots: { default: 'title_default' } },
     { field: 'taskName', title: '任务名称' },
     { field: 'systemName', title: '系统名称' },
     { field: 'time', title: '接收时间', sortable: true },
     { field: 'handle', title: '操作' },
-    { field: 'attention', title: '关注', slots: { default: 'attention_default' } },
+    {
+      field: 'attention',
+      title: '关注',
+      slots: { default: 'attention_default' },
+    },
   ],
   data: [
-    { id: 10001, time: '2023年12月24日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' },
-    { id: 10001, time: '2024年12月24日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' },
-    { id: 10002, time: '2023年12月1日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' },
-  ]
-})
+    {
+      id: 10_001,
+      time: '2023年12月24日',
+      title: 'Test1222',
+      taskName: 'Develop',
+      handle: 'Man',
+      attention: 'test abc',
+      systemName: '12313',
+    },
+    {
+      id: 10_001,
+      time: '2024年12月24日',
+      title: 'Test1222',
+      taskName: 'Develop',
+      handle: 'Man',
+      attention: 'test abc',
+      systemName: '12313',
+    },
+    {
+      id: 10_002,
+      time: '2023年12月1日',
+      title: 'Test1222',
+      taskName: 'Develop',
+      handle: 'Man',
+      attention: 'test abc',
+      systemName: '12313',
+    },
+  ],
+});
 
 const tablePage = reactive({
   total: 0,
   currentPage: 1,
-  pageSize: 10
-})
+  pageSize: 10,
+});
 const findList = () => {
-  gridOptions.loading = true
+  gridOptions.loading = true;
   setTimeout(() => {
-    gridOptions.loading = false
-    tablePage.total = 10
+    gridOptions.loading = false;
+    tablePage.total = 10;
     gridOptions.data = [
-      { id: 10001, time: '2023年12月24日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' },
-      { id: 10001, time: '2024年12月24日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' },
-      { id: 10002, time: '2023年12月1日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' }, { id: 10001, time: '2023年12月24日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' },
-      { id: 10001, time: '2024年12月24日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' },
-      { id: 10002, time: '2023年12月1日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' }, { id: 10001, time: '2023年12月24日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' },
-      { id: 10001, time: '2024年12月24日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' },
-      { id: 10002, time: '2023年12月1日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' }, { id: 10001, time: '2023年12月24日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' },
-    ]
-  }, 300)
-}
-
-findList()
+      {
+        id: 10_001,
+        time: '2023年12月24日',
+        title: 'Test1222',
+        taskName: 'Develop',
+        handle: 'Man',
+        attention: 'test abc',
+        systemName: '12313',
+      },
+      {
+        id: 10_001,
+        time: '2024年12月24日',
+        title: 'Test1222',
+        taskName: 'Develop',
+        handle: 'Man',
+        attention: 'test abc',
+        systemName: '12313',
+      },
+      {
+        id: 10_002,
+        time: '2023年12月1日',
+        title: 'Test1222',
+        taskName: 'Develop',
+        handle: 'Man',
+        attention: 'test abc',
+        systemName: '12313',
+      },
+      {
+        id: 10_001,
+        time: '2023年12月24日',
+        title: 'Test1222',
+        taskName: 'Develop',
+        handle: 'Man',
+        attention: 'test abc',
+        systemName: '12313',
+      },
+      {
+        id: 10_001,
+        time: '2024年12月24日',
+        title: 'Test1222',
+        taskName: 'Develop',
+        handle: 'Man',
+        attention: 'test abc',
+        systemName: '12313',
+      },
+      {
+        id: 10_002,
+        time: '2023年12月1日',
+        title: 'Test1222',
+        taskName: 'Develop',
+        handle: 'Man',
+        attention: 'test abc',
+        systemName: '12313',
+      },
+      {
+        id: 10_001,
+        time: '2023年12月24日',
+        title: 'Test1222',
+        taskName: 'Develop',
+        handle: 'Man',
+        attention: 'test abc',
+        systemName: '12313',
+      },
+      {
+        id: 10_001,
+        time: '2024年12月24日',
+        title: 'Test1222',
+        taskName: 'Develop',
+        handle: 'Man',
+        attention: 'test abc',
+        systemName: '12313',
+      },
+      {
+        id: 10_002,
+        time: '2023年12月1日',
+        title: 'Test1222',
+        taskName: 'Develop',
+        handle: 'Man',
+        attention: 'test abc',
+        systemName: '12313',
+      },
+      {
+        id: 10_001,
+        time: '2023年12月24日',
+        title: 'Test1222',
+        taskName: 'Develop',
+        handle: 'Man',
+        attention: 'test abc',
+        systemName: '12313',
+      },
+    ];
+  }, 300);
+};
 
+findList();
 
 // 个人设置弹层
-let userSet = ref(false);
+const userSet = ref(false);
 
-const plainOptions = ['公文系统', '合同管理', '物资管理', '督查管理', '市场管理', '电子考勤', '财务管理信息通知', '费用报销', '设备管理', '工程造价', '员工诉求', '即完即结', '科技研发', '标准化系统', '纪检监督系统', '后勤管理系统', '信用风险系统'];
+const plainOptions = [
+  '公文系统',
+  '合同管理',
+  '物资管理',
+  '督查管理',
+  '市场管理',
+  '电子考勤',
+  '财务管理信息通知',
+  '费用报销',
+  '设备管理',
+  '工程造价',
+  '员工诉求',
+  '即完即结',
+  '科技研发',
+  '标准化系统',
+  '纪检监督系统',
+  '后勤管理系统',
+  '信用风险系统',
+];
 const state = reactive({
   indeterminate: true,
   checkAll: false,
@@ -159,23 +238,133 @@ const onCheckAllChange = (e: any) => {
 };
 watch(
   () => state.checkedList,
-  val => {
-    state.indeterminate = !!val.length && val.length < plainOptions.length;
+  (val) => {
+    state.indeterminate = val.length > 0 && val.length < plainOptions.length;
     state.checkAll = val.length === plainOptions.length;
   },
 );
 
-let selectClass = ref('全部')
+const selectClass = ref('全部');
 
-let selectedClick = (item: string) => {
-  selectClass.value = item
-}
+const selectedClick = (item: string) => {
+  selectClass.value = item;
+};
 
-let selectTodo = ref('');
-let selectTodoClick = (item: string) => {
-  selectTodo.value = item
-}
+const selectTodo = ref('');
+const selectTodoClick = (item: string) => {
+  selectTodo.value = item;
+};
 </script>
+
+<template>
+  <div class="flex flex-col" style="width: 100%; height: 100%">
+    <div class="head-top-box titlt-top mb-3 flex justify-between">
+      <div class="flex items-center gap-10">
+        <Badge :count="9" :offset="[6, -3]">
+          <div
+            :class="{ active: selectTodo == 'db' }"
+            class="flex cursor-pointer items-center gap-1"
+            @click="selectTodoClick('db')"
+          >
+            <CalendarOutlined />待办
+          </div>
+        </Badge>
+        <div
+          :class="{ active: selectTodo == 'yb' }"
+          class="flex cursor-pointer items-center gap-1"
+          @click="selectTodoClick('yb')"
+        >
+          <CarryOutOutlined />已办
+        </div>
+        <Badge :count="9" :offset="[6, -3]">
+          <div
+            :class="{ active: selectTodo == 'dy' }"
+            class="flex cursor-pointer items-center gap-1"
+            @click="selectTodoClick('dy')"
+          >
+            <ExceptionOutlined />待阅
+          </div>
+        </Badge>
+        <div
+          :class="{ active: selectTodo == 'yy' }"
+          class="flex cursor-pointer items-center gap-1"
+          @click="selectTodoClick('yy')"
+        >
+          <FileDoneOutlined />已阅
+        </div>
+        <div
+          :class="{ active: selectTodo == 'gz' }"
+          class="flex cursor-pointer items-center gap-1"
+          @click="selectTodoClick('gz')"
+        >
+          <StarOutlined />关注
+        </div>
+      </div>
+      <div class="flex items-center gap-3">
+        <InputSearch placeholder="任务查询" style="width: 200px" />
+        <SettingOutlined class="cursor-pointer" @click="userSet = true" />
+        <ReloadOutlined class="cursor-pointer" />
+      </div>
+    </div>
+    <ul class="f-btn-box">
+      <li>
+        <Button
+          :type="selectClass == '全部' ? 'primary' : 'default'"
+          @click="selectedClick('全部')"
+        >
+          全部
+        </Button>
+      </li>
+      <li v-for="item in plainOptions" :key="item" @click="selectedClick(item)">
+        <Button :type="selectClass == item ? 'primary' : 'default'">
+          {{ item }}
+        </Button>
+      </li>
+    </ul>
+    <div class="flex-1 overflow-hidden">
+      <vxe-grid v-bind="gridOptions">
+        <template #attention_default="{ row }">
+          <StarOutlined class="text-lg" />
+        </template>
+        <template #title_default="{ row }">
+          <Button style="padding: 0" type="link">{{ row.title }}</Button>
+        </template>
+        <template #pager>
+          <div class="flex justify-end py-2">
+            <Pagination
+              :total="1000"
+              show-quick-jumper
+              show-size-changer
+              size="small"
+            />
+          </div>
+        </template>
+      </vxe-grid>
+    </div>
+
+    <Modal v-model:open="userSet" :width="800" ok-text="提交" title="个人设置">
+      <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="mt-2 flex flex-wrap gap-2">
+              <Checkbox v-for="item in plainOptions" :key="item" :value="item">
+                <div class="w-[85px] truncate">{{ item }}</div>
+              </Checkbox>
+            </div>
+          </CheckboxGroup>
+        </div>
+      </div>
+    </Modal>
+  </div>
+</template>
 <style lang="scss">
 @import 'vxe-table/lib/style.css';
 
@@ -201,4 +390,4 @@ let selectTodoClick = (item: string) => {
 .active {
   color: hsl(var(--primary));
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/apps/web-test/src/views/dashboard/home/index.vue b/apps/web-test/src/views/dashboard/home/index.vue
index f8aa758f..b9ef3e99 100644
--- a/apps/web-test/src/views/dashboard/home/index.vue
+++ b/apps/web-test/src/views/dashboard/home/index.vue
@@ -592,7 +592,7 @@ const formState = reactive({
             </div>
           </template>
           <template #content>
-            <div class="shop-seach flex items-center">
+            <div class="shop-seach mb-2 flex items-center">
               <Select v-model:value="shopFlotter">
                 <SelectOption value="1">全部应用磁贴</SelectOption>
                 <SelectOption value="2">Option2</SelectOption>