From eaaa23fb84edd6a235fad995b5f12597fd00677d Mon Sep 17 00:00:00 2001
From: lzh <sickone075@gmail.com>
Date: Mon, 22 Dec 2025 15:24:43 +0800
Subject: [PATCH] =?UTF-8?q?style(@vben/web-antd):=20=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E4=BB=AA=E8=A1=A8=E7=9B=98=E5=B7=A5=E4=BD=9C=E5=8C=BA=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 应用毛玻璃卡片效果
- 优化页面布局和视觉效果
- 修复 lint 错误（HTML 闭合标签格式）
---
 .../src/views/dashboard/workspace/index.vue   | 971 ++++++++++++++----
 1 file changed, 750 insertions(+), 221 deletions(-)

diff --git a/apps/web-antd/src/views/dashboard/workspace/index.vue b/apps/web-antd/src/views/dashboard/workspace/index.vue
index 8f6620310..555e0ba0c 100644
--- a/apps/web-antd/src/views/dashboard/workspace/index.vue
+++ b/apps/web-antd/src/views/dashboard/workspace/index.vue
@@ -1,260 +1,789 @@
 <script lang="ts" setup>
-import type {
-  WorkbenchProjectItem,
-  WorkbenchQuickNavItem,
-  WorkbenchTodoItem,
-  WorkbenchTrendItem,
-} from '@vben/common-ui';
+import type { EchartsUIType } from '@vben/plugins/echarts';
 
-import { ref } from 'vue';
-import { useRouter } from 'vue-router';
+import { computed, onMounted, ref } from 'vue';
 
-import {
-  AnalysisChartCard,
-  WorkbenchHeader,
-  WorkbenchProject,
-  WorkbenchQuickNav,
-  WorkbenchTodo,
-  WorkbenchTrends,
-} from '@vben/common-ui';
-import { preferences } from '@vben/preferences';
-import { useUserStore } from '@vben/stores';
-import { openWindow } from '@vben/utils';
+import { GlassCard } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
-import AnalyticsVisitsSource from '../analytics/analytics-visits-source.vue';
+import { Button, Dropdown, message, Modal, Tag } from 'ant-design-vue';
 
-const userStore = useUserStore();
+// 机器人图片路径
+const robotImage = '/images/Image_robot.png';
 
-// 这是一个示例数据，实际项目中需要根据实际情况进行调整
-// url 也可以是内部路由，在 navTo 方法中识别处理，进行内部跳转
-// 例如：url: /dashboard/workspace
-const projectItems: WorkbenchProjectItem[] = [
-  {
-    color: '#6DB33F',
-    content: 'github.com/YunaiV/ruoyi-vue-pro',
-    date: '2025-01-02',
-    group: 'Spring Boot 单体架构',
-    icon: 'simple-icons:springboot',
-    title: 'ruoyi-vue-pro',
-    url: 'https://github.com/YunaiV/ruoyi-vue-pro',
-  },
-  {
-    color: '#409EFF',
-    content: 'github.com/yudaocode/yudao-ui-admin-vue3',
-    date: '2025-02-03',
-    group: 'Vue3 + element-plus 管理后台',
-    icon: 'ep:element-plus',
-    title: 'yudao-ui-admin-vue3',
-    url: 'https://github.com/yudaocode/yudao-ui-admin-vue3',
-  },
-  {
-    color: '#ff4d4f',
-    content: 'github.com/yudaocode/yudao-mall-uniapp',
-    date: '2025-03-04',
-    group: 'Vue3 + uniapp 商城手机端',
-    icon: 'icon-park-outline:mall-bag',
-    title: 'yudao-mall-uniapp',
-    url: 'https://github.com/yudaocode/yudao-mall-uniapp',
-  },
-  {
-    color: '#1890ff',
-    content: 'github.com/YunaiV/yudao-cloud',
-    date: '2025-04-05',
-    group: 'Spring Cloud 微服务架构',
-    icon: 'material-symbols:cloud-outline',
-    title: 'yudao-cloud',
-    url: 'https://github.com/YunaiV/yudao-cloud',
-  },
-  {
-    color: '#e18525',
-    content: 'github.com/yudaocode/yudao-ui-admin-vben',
-    date: '2025-05-06',
-    group: 'Vue3 + vben5(antd) 管理后台',
-    icon: 'devicon:antdesign',
-    title: 'yudao-ui-admin-vben',
-    url: 'https://github.com/yudaocode/yudao-ui-admin-vben',
-  },
-  {
-    color: '#2979ff',
-    content: 'github.com/yudaocode/yudao-ui-admin-uniapp',
-    date: '2025-06-01',
-    group: 'Vue3 + uniapp 管理手机端',
-    icon: 'ant-design:mobile',
-    title: 'yudao-ui-admin-uniapp',
-    url: 'https://github.com/yudaocode/yudao-ui-admin-uniapp',
-  },
-];
+// --- 类型定义 ---
+interface Task {
+  id: number;
+  title: string;
+  location: string;
+  priority: 'P0' | 'P1' | 'P2';
+  status?: 'completed' | 'pending';
+  createTime?: string;
+  assignee?: string;
+}
 
-// 同样，这里的 url 也可以使用以 http 开头的外部链接
-const quickNavItems: WorkbenchQuickNavItem[] = [
-  {
-    color: '#1fdaca',
-    icon: 'ion:home-outline',
-    title: '首页',
-    url: '/',
-  },
-  {
-    color: '#ff6b6b',
-    icon: 'lucide:shopping-bag',
-    title: '商城中心',
-    url: '/mall',
-  },
-  {
-    color: '#7c3aed',
-    icon: 'tabler:ai',
-    title: 'AI 大模型',
-    url: '/ai',
-  },
-  {
-    color: '#3fb27f',
-    icon: 'simple-icons:erpnext',
-    title: 'ERP 系统',
-    url: '/erp',
-  },
-  {
-    color: '#4daf1bc9',
-    icon: 'simple-icons:civicrm',
-    title: 'CRM 系统',
-    url: '/crm',
-  },
-  {
-    color: '#1a73e8',
-    icon: 'fa-solid:hdd',
-    title: 'IoT 物联网',
-    url: '/iot',
-  },
-];
+interface StatItem {
+  label: string;
+  value: string;
+  icon: string;
+  color: string;
+}
 
-const todoItems = ref<WorkbenchTodoItem[]>([
+// --- 响应式数据 ---
+const urgentTasks = ref<Task[]>([
   {
-    completed: false,
-    content: `系统支持 JDK 8/17/21，Vue 2/3`,
-    date: '2024-07-15 09:30:00',
-    title: '技术兼容性',
+    id: 1,
+    title: '大堂地面湿滑',
+    location: '1F 大堂',
+    priority: 'P0',
+    status: 'pending',
+    createTime: '09:15',
+    assignee: '张工',
   },
   {
-    completed: false,
-    content: `后端提供 Spring Boot 2.7/3.2 + Cloud 双架构`,
-    date: '2024-08-30 14:20:00',
-    title: '架构灵活性',
+    id: 2,
+    title: '人员超限 (>200)',
+    location: '3F 洗手间',
+    priority: 'P0',
+    status: 'pending',
+    createTime: '09:30',
+    assignee: '李工',
   },
   {
-    completed: false,
-    content: `全部开源，个人与企业可 100% 直接使用，无需授权`,
-    date: '2024-07-25 16:45:00',
-    title: '开源免授权',
+    id: 3,
+    title: '补充纸巾',
+    location: '2F 贵宾室',
+    priority: 'P1',
+    status: 'pending',
+    createTime: '10:05',
+    assignee: '王工',
   },
   {
-    completed: false,
-    content: `国内使用最广泛的快速开发平台，远超 10w+ 企业使用`,
-    date: '2024-07-10 11:15:00',
-    title: '广泛企业认可',
+    id: 4,
+    title: '传感器离线',
+    location: 'B1 停车场',
+    priority: 'P1',
+    status: 'pending',
+    createTime: '10:20',
+    assignee: '赵工',
+  },
+  {
+    id: 5,
+    title: '垃圾桶满溢',
+    location: '1F 出口闸机',
+    priority: 'P2',
+    status: 'pending',
+    createTime: '10:45',
+    assignee: '钱工',
+  },
+  {
+    id: 6,
+    title: '通道受阻',
+    location: '3F 楼梯间',
+    priority: 'P1',
+    status: 'pending',
+    createTime: '11:00',
+    assignee: '孙工',
+  },
+  {
+    id: 7,
+    title: '灯光闪烁',
+    location: '2F 走廊',
+    priority: 'P2',
+    status: 'pending',
+    createTime: '11:15',
+    assignee: '周工',
   },
 ]);
-const trendItems: WorkbenchTrendItem[] = [
+
+const flowData = [
+  { time: '09:00', value: 120 },
+  { time: '10:00', value: 180 },
+  { time: '11:00', value: 250 },
+  { time: '12:00', value: 190 },
+  { time: '13:00', value: 150 },
+  { time: '14:00', value: 210 },
+  { time: '15:00', value: 310 },
+  { time: '16:00', value: 280 },
+  { time: '17:00', value: 350 },
+  { time: '18:00', value: 200 },
+];
+
+const workOrderTrend = [
+  { time: '09:00', value: 5 },
+  { time: '10:00', value: 12 },
+  { time: '11:00', value: 8 },
+  { time: '12:00', value: 15 },
+  { time: '13:00', value: 24 },
+  { time: '14:00', value: 18 },
+  { time: '15:00', value: 28 },
+  { time: '16:00', value: 22 },
+  { time: '17:00', value: 14 },
+];
+
+const stats: StatItem[] = [
   {
-    avatar: 'svg:avatar-1',
-    content: `在 <a>开源组</a> 创建了项目 <a>Vue</a>`,
-    date: '刚刚',
-    title: '威廉',
+    label: '在岗人员',
+    value: '12/15',
+    icon: 'ant-design:user-outlined',
+    color: 'indigo',
   },
   {
-    avatar: 'svg:avatar-2',
-    content: `关注了 <a>威廉</a> `,
-    date: '1个小时前',
-    title: '艾文',
+    label: '待处理',
+    value: '5',
+    icon: 'ant-design:file-text-outlined',
+    color: 'orange',
   },
   {
-    avatar: 'svg:avatar-3',
-    content: `发布了 <a>个人动态</a> `,
-    date: '1天前',
-    title: '克里斯',
+    label: '平均响应',
+    value: '3.2m',
+    icon: 'ant-design:thunderbolt-outlined',
+    color: 'teal',
   },
   {
-    avatar: 'svg:avatar-4',
-    content: `发表文章 <a>如何编写一个Vite插件</a> `,
-    date: '2天前',
-    title: 'Vben',
-  },
-  {
-    avatar: 'svg:avatar-1',
-    content: `回复了 <a>杰克</a> 的问题 <a>如何进行项目优化？</a>`,
-    date: '3天前',
-    title: '皮特',
-  },
-  {
-    avatar: 'svg:avatar-2',
-    content: `关闭了问题 <a>如何运行项目</a> `,
-    date: '1周前',
-    title: '杰克',
-  },
-  {
-    avatar: 'svg:avatar-3',
-    content: `发布了 <a>个人动态</a> `,
-    date: '1周前',
-    title: '威廉',
-  },
-  {
-    avatar: 'svg:avatar-4',
-    content: `推送了代码到 <a>Github</a>`,
-    date: '2021-04-01 20:00',
-    title: '威廉',
-  },
-  {
-    avatar: 'svg:avatar-4',
-    content: `发表文章 <a>如何编写使用 Admin Vben</a> `,
-    date: '2021-03-01 20:00',
-    title: 'Vben',
+    label: '满意度',
+    value: '85%',
+    icon: 'ant-design:bar-chart-outlined',
+    color: 'pink',
   },
 ];
 
-const router = useRouter();
+// --- 筛选和交互状态 ---
+const priorityFilter = ref<'all' | 'P0' | 'P1' | 'P2'>('all');
+const showCompleted = ref(false);
+const selectedTask = ref<null | Task>(null);
+const taskDetailVisible = ref(false);
 
-// 这是一个示例方法，实际项目中需要根据实际情况进行调整
-// This is a sample method, adjust according to the actual project requirements
-function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
-  if (nav.url?.startsWith('http')) {
-    openWindow(nav.url);
-    return;
+// --- 计算属性 ---
+const filteredTasks = computed(() => {
+  let tasks = urgentTasks.value;
+
+  // 按优先级筛选
+  if (priorityFilter.value !== 'all') {
+    tasks = tasks.filter((task) => task.priority === priorityFilter.value);
   }
-  if (nav.url?.startsWith('/')) {
-    router.push(nav.url).catch((error) => {
-      console.error('Navigation failed:', error);
-    });
-  } else {
-    console.warn(`Unknown URL for navigation item: ${nav.title} -> ${nav.url}`);
+
+  // 按状态筛选
+  if (!showCompleted.value) {
+    tasks = tasks.filter((task) => task.status !== 'completed');
   }
+
+  return tasks;
+});
+
+// --- 图表引用 ---
+const flowChartRef = ref<EchartsUIType>();
+const workOrderChartRef = ref<EchartsUIType>();
+const { renderEcharts: renderFlowChart } = useEcharts(flowChartRef);
+const { renderEcharts: renderWorkOrderChart } = useEcharts(workOrderChartRef);
+
+// --- 初始化图表 ---
+onMounted(() => {
+  initFlowChart();
+  initWorkOrderChart();
+});
+
+// 初始化客流图表
+function initFlowChart() {
+  const options: any = {
+    grid: {
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0,
+    },
+    xAxis: {
+      type: 'category' as const,
+      data: flowData.map((item) => item.time),
+      show: false,
+      boundaryGap: false,
+    },
+    yAxis: {
+      type: 'value' as const,
+      show: false,
+    },
+    series: [
+      {
+        type: 'line' as const,
+        data: flowData.map((item) => item.value),
+        smooth: true,
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: 'rgba(255, 160, 10, 0.4)' },
+              { offset: 1, color: 'rgba(255, 160, 10, 0)' },
+            ],
+          },
+        },
+        lineStyle: {
+          color: '#FFA00A',
+          width: 4,
+        },
+        symbol: 'none',
+        symbolSize: 0,
+      },
+    ],
+    tooltip: {
+      show: false,
+    },
+  };
+  renderFlowChart(options);
+}
+
+// 初始化工单趋势图表
+function initWorkOrderChart() {
+  const options: any = {
+    grid: {
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0,
+    },
+    xAxis: {
+      type: 'category' as const,
+      data: workOrderTrend.map((item) => item.time),
+      show: false,
+      boundaryGap: false,
+    },
+    yAxis: {
+      type: 'value' as const,
+      show: false,
+    },
+    series: [
+      {
+        type: 'line' as const,
+        data: workOrderTrend.map((item) => item.value),
+        smooth: true,
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: 'rgba(59, 130, 246, 0.4)' },
+              { offset: 1, color: 'rgba(59, 130, 246, 0)' },
+            ],
+          },
+        },
+        lineStyle: {
+          color: '#3B82F6',
+          width: 4,
+        },
+        symbol: 'none',
+        symbolSize: 0,
+      },
+    ],
+    tooltip: {
+      show: false,
+    },
+  };
+  renderWorkOrderChart(options);
+}
+
+// --- 交互方法 ---
+function handleTaskComplete(taskId: number) {
+  const task = urgentTasks.value.find((t) => t.id === taskId);
+  if (task) {
+    task.status = 'completed';
+    message.success(`任务"${task.title}"已完成`);
+  }
+}
+
+function handleTaskDetail(task: Task) {
+  selectedTask.value = task;
+  taskDetailVisible.value = true;
+}
+
+function handleTaskDelete(taskId: number) {
+  Modal.confirm({
+    title: '确认删除',
+    content: '确定要删除这个任务吗？',
+    onOk() {
+      const index = urgentTasks.value.findIndex((t) => t.id === taskId);
+      if (index !== -1) {
+        urgentTasks.value.splice(index, 1);
+        message.success('任务已删除');
+      }
+    },
+  });
+}
+
+function handleRefreshStats() {
+  message.loading('刷新中...', 0.5);
+  // 这里可以添加实际的刷新逻辑
+  setTimeout(() => {
+    message.success('刷新成功');
+  }, 500);
+}
+
+function handleStatCardClick(stat: StatItem) {
+  message.info(`查看${stat.label}详情`);
+  // 这里可以添加跳转到详情页面的逻辑
+}
+
+function handleFilterChange(value: 'all' | 'P0' | 'P1' | 'P2') {
+  priorityFilter.value = value;
+}
+
+function getPriorityConfig(priority: string) {
+  const configs = {
+    P0: {
+      color: 'red',
+      bg: 'bg-red-50',
+      border: 'border-red-100',
+      text: 'text-red-600',
+    },
+    P1: {
+      color: 'orange',
+      bg: 'bg-orange-50',
+      border: 'border-orange-100',
+      text: 'text-orange-600',
+    },
+    P2: {
+      color: 'slate',
+      bg: 'bg-slate-50',
+      border: 'border-slate-100',
+      text: 'text-slate-600',
+    },
+  };
+  return configs[priority as keyof typeof configs] || configs.P2;
+}
+
+function getColorClass(color: string, type: 'bg' | 'text') {
+  const colors: Record<string, Record<string, string>> = {
+    indigo: { bg: 'bg-indigo-50', text: 'text-indigo-500' },
+    orange: { bg: 'bg-orange-50', text: 'text-orange-500' },
+    teal: { bg: 'bg-teal-50', text: 'text-teal-500' },
+    pink: { bg: 'bg-pink-50', text: 'text-pink-500' },
+  };
+  return colors[color]?.[type] || '';
 }
 </script>
 
 <template>
-  <div class="p-5">
-    <WorkbenchHeader
-      :avatar="userStore.userInfo?.avatar || preferences.app.defaultAvatar"
-    >
-      <template #title>
-        早安, {{ userStore.userInfo?.nickname }}, 开始您一天的工作吧！
-      </template>
-      <template #description> 今日晴，20℃ - 32℃！ </template>
-    </WorkbenchHeader>
+  <div class="animate-fade-in flex h-full w-full gap-5 px-5 py-5">
+    <!-- --- 左侧列 (60%) --- -->
+    <div class="flex h-full w-[60%] flex-none flex-col gap-5">
+      <!-- 卡片1: 实时客流监测 -->
+      <GlassCard class="relative flex h-[35%] flex-col overflow-hidden p-6">
+        <div class="relative z-10 flex items-start justify-between">
+          <div>
+            <h3
+              class="text-sm font-semibold uppercase tracking-wide text-slate-500"
+            >
+              实时客流监测
+            </h3>
+            <div class="mt-1 flex items-baseline gap-2">
+              <span class="text-4xl font-bold text-slate-800">2,450</span>
+              <Tag color="success" class="text-xs font-bold">+12%</Tag>
+            </div>
+            <p class="mt-1 text-xs text-slate-400">预计高峰时间: 14:00</p>
+          </div>
+          <Button
+            type="text"
+            shape="circle"
+            class="text-slate-400 hover:text-orange-600"
+            @click="handleRefreshStats"
+          >
+            <template #icon>
+              <IconifyIcon icon="ant-design:more-outlined" class="text-base" />
+            </template>
+          </Button>
+        </div>
 
-    <div class="mt-5 flex flex-col lg:flex-row">
-      <div class="mr-4 w-full lg:w-3/5">
-        <WorkbenchProject :items="projectItems" title="项目" @click="navTo" />
-        <WorkbenchTrends :items="trendItems" class="mt-5" title="最新动态" />
-      </div>
-      <div class="w-full lg:w-2/5">
-        <WorkbenchQuickNav
-          :items="quickNavItems"
-          class="mt-5 lg:mt-0"
-          title="快捷导航"
-          @click="navTo"
-        />
-        <WorkbenchTodo :items="todoItems" class="mt-5" title="待办事项" />
-        <AnalysisChartCard class="mt-5" title="访问来源">
-          <AnalyticsVisitsSource />
-        </AnalysisChartCard>
+        <!-- 背景图表 -->
+        <div
+          class="pointer-events-none absolute inset-x-0 bottom-0 z-0 h-[70%] w-full opacity-80"
+        >
+          <EchartsUI ref="flowChartRef" class="h-full w-full" />
+        </div>
+      </GlassCard>
+
+      <!-- 卡片2: 紧急待办事项 -->
+      <GlassCard class="flex min-h-0 flex-1 flex-col overflow-hidden p-0">
+        <div
+          class="flex shrink-0 items-center justify-between border-b border-white/40 p-5"
+        >
+          <h3 class="flex items-center gap-2 font-bold text-slate-800">
+            <span class="h-2 w-2 animate-pulse rounded-full bg-red-500"></span>
+            紧急待办事项
+          </h3>
+          <Dropdown>
+            <Button
+              type="text"
+              size="small"
+              class="text-xs font-medium text-slate-400 hover:text-orange-600"
+            >
+              筛选
+              <IconifyIcon
+                icon="ant-design:filter-outlined"
+                class="ml-1 text-xs"
+              />
+            </Button>
+            <template #overlay>
+              <div class="min-w-[120px] rounded-lg bg-white p-2 shadow-lg">
+                <div
+                  v-for="option in [
+                    { label: '全部', value: 'all' },
+                    { label: 'P0 紧急', value: 'P0' },
+                    { label: 'P1 重要', value: 'P1' },
+                    { label: 'P2 普通', value: 'P2' },
+                  ]"
+                  :key="option.value"
+                  class="cursor-pointer rounded px-3 py-2 text-sm hover:bg-gray-50"
+                  :class="{
+                    'bg-orange-50 text-orange-600':
+                      priorityFilter === option.value,
+                  }"
+                  @click="handleFilterChange(option.value as any)"
+                >
+                  {{ option.label }}
+                </div>
+              </div>
+            </template>
+          </Dropdown>
+        </div>
+
+        <div class="flex-1 overflow-y-auto px-2">
+          <div
+            v-if="filteredTasks.length === 0"
+            class="flex h-full items-center justify-center text-slate-400"
+          >
+            <div class="text-center">
+              <IconifyIcon
+                icon="ant-design:check-circle-outlined"
+                class="mb-2 text-4xl"
+              />
+              <p>暂无待办任务</p>
+            </div>
+          </div>
+          <div v-else class="space-y-2">
+            <div
+              v-for="task in filteredTasks"
+              :key="task.id"
+              class="group cursor-pointer rounded-lg border-b border-slate-50 p-3 transition-colors last:border-0 hover:bg-orange-50/40"
+              @click="handleTaskDetail(task)"
+            >
+              <div class="flex items-center justify-between">
+                <div class="flex min-w-0 flex-1 items-center gap-3">
+                  <div
+                    class="flex h-7 w-7 items-center justify-center rounded-lg shadow-sm transition-transform group-hover:scale-110"
+                    :class="getPriorityConfig(task.priority).bg"
+                  >
+                    <IconifyIcon
+                      icon="ant-design:clock-circle-outlined"
+                      class="text-xs"
+                      :class="[getPriorityConfig(task.priority).text]"
+                    />
+                  </div>
+                  <div class="min-w-0 flex-1">
+                    <div class="truncate font-semibold text-slate-700">
+                      {{ task.title }}
+                    </div>
+                    <div
+                      class="mt-1 flex items-center gap-3 text-xs text-slate-500"
+                    >
+                      <span>{{ task.location }}</span>
+                      <span v-if="task.createTime">• {{ task.createTime }}</span>
+                      <span v-if="task.assignee">• {{ task.assignee }}</span>
+                    </div>
+                  </div>
+                  <Tag
+                    :color="getPriorityConfig(task.priority).color"
+                    class="border px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide"
+                    :class="[getPriorityConfig(task.priority).border]"
+                  >
+                    {{ task.priority }}
+                  </Tag>
+                </div>
+                <div class="ml-2 flex items-center gap-1">
+                  <Button
+                    type="text"
+                    size="small"
+                    shape="circle"
+                    class="h-7 w-7 bg-slate-50 text-slate-400 hover:bg-green-500 hover:text-white"
+                    @click.stop="handleTaskComplete(task.id)"
+                  >
+                    <template #icon>
+                      <IconifyIcon
+                        icon="ant-design:check-circle-outlined"
+                        class="text-xs"
+                      />
+                    </template>
+                  </Button>
+                  <Button
+                    type="text"
+                    size="small"
+                    shape="circle"
+                    class="h-7 w-7 bg-slate-50 text-slate-400 hover:bg-orange-500 hover:text-white"
+                    @click.stop="handleTaskDetail(task)"
+                  >
+                    <template #icon>
+                      <IconifyIcon
+                        icon="ant-design:eye-outlined"
+                        class="text-xs"
+                      />
+                    </template>
+                  </Button>
+                  <Button
+                    type="text"
+                    size="small"
+                    shape="circle"
+                    class="h-7 w-7 bg-slate-50 text-slate-400 hover:bg-red-500 hover:text-white"
+                    @click.stop="handleTaskDelete(task.id)"
+                  >
+                    <template #icon>
+                      <IconifyIcon
+                        icon="ant-design:delete-outlined"
+                        class="text-xs"
+                      />
+                    </template>
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </GlassCard>
+    </div>
+
+    <!-- --- 右侧列 (40%) --- -->
+    <div class="flex h-full w-[40%] flex-none flex-col gap-5">
+      <!-- 卡片3: 工单趋势分析 -->
+      <GlassCard class="relative flex h-[35%] flex-col overflow-hidden p-6">
+        <div class="relative z-10 mb-2 flex items-start justify-between">
+          <div>
+            <h3
+              class="text-sm font-semibold uppercase tracking-wide text-slate-500"
+            >
+              工单趋势分析
+            </h3>
+            <div class="mt-1 flex items-baseline gap-2">
+              <span class="text-4xl font-bold text-slate-800">89</span>
+              <Tag color="processing" class="text-xs font-bold">+5 新增</Tag>
+            </div>
+          </div>
+          <Button
+            type="text"
+            size="small"
+            class="rounded-lg bg-white/50 px-2 py-1 text-xs font-medium hover:text-blue-600"
+            @click="message.info('查看全部工单')"
+          >
+            查看全部
+          </Button>
+        </div>
+
+        <!-- 背景图表 -->
+        <div
+          class="pointer-events-none absolute inset-x-0 bottom-0 z-0 h-[65%] w-full opacity-80"
+        >
+          <EchartsUI ref="workOrderChartRef" class="h-full w-full" />
+        </div>
+      </GlassCard>
+
+      <!-- 卡片4: 统计网格 + AI卡片 -->
+      <div class="flex min-h-0 flex-1 flex-col gap-4">
+        <!-- 2x2 统计网格 -->
+        <div class="grid shrink-0 grid-cols-2 gap-3">
+          <GlassCard
+            v-for="(stat, idx) in stats"
+            :key="idx"
+            class="glass-card glass-border glass-shadow glass-highlight flex cursor-pointer items-center gap-3 rounded-[2rem] p-3 transition-colors hover:bg-white/60"
+            @click="handleStatCardClick(stat)"
+          >
+            <div
+              class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl text-lg"
+              :class="[
+                getColorClass(stat.color, 'bg'),
+                getColorClass(stat.color, 'text'),
+              ]"
+            >
+              <IconifyIcon :icon="stat.icon" class="text-lg" />
+            </div>
+            <div class="min-w-0">
+              <p
+                class="truncate text-[10px] font-bold uppercase text-slate-400"
+              >
+                {{ stat.label }}
+              </p>
+              <p class="mt-0.5 text-lg font-bold leading-none text-slate-800">
+                {{ stat.value }}
+              </p>
+            </div>
+          </GlassCard>
+        </div>
+
+        <!-- AI助手卡片 -->
+        <GlassCard
+          class="group relative flex min-h-[140px] flex-1 items-center overflow-hidden border-0 !bg-gradient-to-br from-orange-400 to-amber-300 p-0 shadow-lg"
+        >
+          <!-- 神经网络背景图案 -->
+          <div class="pointer-events-none absolute inset-0 opacity-20">
+            <svg width="100%" height="100%">
+              <pattern
+                id="grid"
+                x="0"
+                y="0"
+                width="20"
+                height="20"
+                patternUnits="userSpaceOnUse"
+              >
+                <circle cx="1" cy="1" r="1" fill="white" />
+              </pattern>
+              <rect width="100%" height="100%" fill="url(#grid)" />
+              <path
+                d="M0,50 Q100,20 200,80 T400,50"
+                fill="none"
+                stroke="white"
+                stroke-width="1"
+                stroke-opacity="0.3"
+              />
+            </svg>
+          </div>
+
+          <!-- 左侧内容 -->
+          <div
+            class="relative z-10 flex h-full w-[60%] flex-col justify-center py-4 pl-8 pr-2"
+          >
+            <div class="mb-2 flex items-center gap-2">
+              <span
+                class="flex h-6 w-6 items-center justify-center rounded-lg bg-white/20 shadow-sm backdrop-blur-sm"
+              >
+                <IconifyIcon
+                  icon="ant-design:robot-outlined"
+                  class="text-xs text-white"
+                />
+              </span>
+              <span
+                class="text-[10px] font-bold uppercase tracking-widest text-white/90"
+              >AI Copilot</span>
+            </div>
+            <h3
+              class="mb-4 whitespace-nowrap text-lg font-bold leading-tight text-white drop-shadow-sm"
+            >
+              需要我帮你做什么吗？
+            </h3>
+            <Button
+              type="primary"
+              class="flex w-fit items-center gap-2 rounded-full bg-white px-6 py-2.5 text-sm font-bold text-amber-600 shadow-md shadow-orange-900/10 transition-all hover:scale-105 hover:shadow-lg"
+              @click="message.info('打开AI助手')"
+            >
+              使用AI助手
+              <IconifyIcon
+                icon="ant-design:robot-outlined"
+                class="text-base text-amber-400 transition-transform group-hover:rotate-12"
+              />
+            </Button>
+          </div>
+
+          <!-- 右侧图片 -->
+          <div
+            class="pointer-events-none absolute bottom-0 right-[-10px] top-0 z-20 flex w-[45%] items-center justify-center"
+          >
+            <img
+              :src="robotImage"
+              alt="AI Robot"
+              class="h-full w-full object-contain"
+            />
+          </div>
+        </GlassCard>
       </div>
     </div>
+
+    <!-- 任务详情模态框 -->
+    <Modal
+      v-model:open="taskDetailVisible"
+      title="任务详情"
+      :footer="null"
+      width="600px"
+    >
+      <div v-if="selectedTask" class="space-y-4">
+        <div>
+          <div class="mb-1 text-sm text-slate-400">任务标题</div>
+          <div class="text-lg font-bold text-slate-800">
+            {{ selectedTask.title }}
+          </div>
+        </div>
+        <div>
+          <div class="mb-1 text-sm text-slate-400">位置</div>
+          <div class="text-base text-slate-700">
+            {{ selectedTask.location }}
+          </div>
+        </div>
+        <div>
+          <div class="mb-1 text-sm text-slate-400">优先级</div>
+          <Tag
+            :color="getPriorityConfig(selectedTask.priority).color"
+            class="px-2 py-1 text-xs font-bold uppercase"
+          >
+            {{ selectedTask.priority }}
+          </Tag>
+        </div>
+        <div v-if="selectedTask.assignee">
+          <div class="mb-1 text-sm text-slate-400">负责人</div>
+          <div class="text-base text-slate-700">
+            {{ selectedTask.assignee }}
+          </div>
+        </div>
+        <div v-if="selectedTask.createTime">
+          <div class="mb-1 text-sm text-slate-400">创建时间</div>
+          <div class="text-base text-slate-700">
+            {{ selectedTask.createTime }}
+          </div>
+        </div>
+        <div class="flex gap-2 pt-4">
+          <Button
+            type="primary"
+            @click="
+              handleTaskComplete(selectedTask.id);
+              taskDetailVisible = false;
+            "
+          >
+            <template #icon>
+              <IconifyIcon icon="ant-design:check-circle-outlined" />
+            </template>
+            标记完成
+          </Button>
+          <Button
+            danger
+            @click="
+              handleTaskDelete(selectedTask.id);
+              taskDetailVisible = false;
+            "
+          >
+            <template #icon>
+              <IconifyIcon icon="ant-design:delete-outlined" />
+            </template>
+            删除任务
+          </Button>
+        </div>
+      </div>
+    </Modal>
   </div>
 </template>
+
+<style scoped>
+.animate-fade-in {
+  animation: fade-in 0.5s ease-in;
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>