From 61f164a6f83c9f86971a516e109af54db03b1d5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?cls=5F=E5=AE=81=E6=B3=A2=E6=9C=AC=E6=9C=BA?=
 <908705107@qq.com>
Date: Sun, 21 Jun 2026 19:44:32 +0800
Subject: [PATCH] feat: restore dashboard workspace and analytics

---
 .gitignore                                    |   3 +-
 .../src/locales/langs/zh-CN/menu-title.json   |   1 +
 web/apps/web-ele/src/router/access.ts         |   1 +
 web/apps/web-ele/src/router/light-menu.ts     |   1 +
 .../src/router/routes/modules/dashboard.ts    |   9 +
 .../dashboard/analytics/analytics-trends.vue  |  95 +++
 .../analytics/analytics-visits-data.vue       |  69 ++
 .../analytics/analytics-visits-sales.vue      |  43 ++
 .../analytics/analytics-visits-source.vue     |  64 ++
 .../dashboard/analytics/analytics-visits.vue  |  58 ++
 .../src/views/dashboard/analytics/index.vue   |  93 +++
 .../src/views/dashboard/workspace/index.vue   | 722 ++++++------------
 .../analysis/analysis-chart-card.vue          |  24 +
 .../analysis/analysis-charts-tabs.vue         |  40 +
 .../dashboard/analysis/analysis-overview.vue  |  55 ++
 .../src/ui/dashboard/analysis/index.ts        |   3 +
 .../common-ui/src/ui/dashboard/index.ts       |   3 +
 .../common-ui/src/ui/dashboard/typing.ts      |  48 ++
 .../src/ui/dashboard/workbench/index.ts       |   5 +
 .../dashboard/workbench/workbench-header.vue  |  67 ++
 .../dashboard/workbench/workbench-project.vue |  63 ++
 .../workbench/workbench-quick-nav.vue         |  56 ++
 .../ui/dashboard/workbench/workbench-todo.vue |  63 ++
 .../dashboard/workbench/workbench-trends.vue  |  64 ++
 .../effects/common-ui/src/ui/index.ts         |   1 +
 25 files changed, 1155 insertions(+), 496 deletions(-)
 create mode 100644 web/apps/web-ele/src/views/dashboard/analytics/analytics-trends.vue
 create mode 100644 web/apps/web-ele/src/views/dashboard/analytics/analytics-visits-data.vue
 create mode 100644 web/apps/web-ele/src/views/dashboard/analytics/analytics-visits-sales.vue
 create mode 100644 web/apps/web-ele/src/views/dashboard/analytics/analytics-visits-source.vue
 create mode 100644 web/apps/web-ele/src/views/dashboard/analytics/analytics-visits.vue
 create mode 100644 web/apps/web-ele/src/views/dashboard/analytics/index.vue
 create mode 100644 web/packages/effects/common-ui/src/ui/dashboard/analysis/analysis-chart-card.vue
 create mode 100644 web/packages/effects/common-ui/src/ui/dashboard/analysis/analysis-charts-tabs.vue
 create mode 100644 web/packages/effects/common-ui/src/ui/dashboard/analysis/analysis-overview.vue
 create mode 100644 web/packages/effects/common-ui/src/ui/dashboard/analysis/index.ts
 create mode 100644 web/packages/effects/common-ui/src/ui/dashboard/index.ts
 create mode 100644 web/packages/effects/common-ui/src/ui/dashboard/typing.ts
 create mode 100644 web/packages/effects/common-ui/src/ui/dashboard/workbench/index.ts
 create mode 100644 web/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-header.vue
 create mode 100644 web/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-project.vue
 create mode 100644 web/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-quick-nav.vue
 create mode 100644 web/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-todo.vue
 create mode 100644 web/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-trends.vue

diff --git a/.gitignore b/.gitignore
index e88173d..0c0ed8d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -197,6 +197,8 @@ web/apps/web-ele/src/views/online-dev/*
 web/apps/web-ele/src/views/dashboard/
 !web/apps/web-ele/src/views/dashboard/
 web/apps/web-ele/src/views/dashboard/*
+!web/apps/web-ele/src/views/dashboard/analytics/
+!web/apps/web-ele/src/views/dashboard/analytics/**
 !web/apps/web-ele/src/views/dashboard/workspace/
 !web/apps/web-ele/src/views/dashboard/workspace/**
 web/apps/web-ele/src/views/demos/
@@ -246,7 +248,6 @@ web/apps/web-ele/src/components/dashboard-design/utils/*
 !web/apps/web-ele/src/components/dashboard-design/utils/dataFetcher.ts
 web/apps/web-ele/src/components/document-designer/
 web/apps/web-ele/src/components/workflow/designer/
-web/packages/effects/common-ui/src/ui/dashboard/
 web/docs/src/public/guide/
 web/packages/zq-univer/
 web/apps/web-ele/src/locales/langs/*/dashboard-design.json*
diff --git a/web/apps/web-ele/src/locales/langs/zh-CN/menu-title.json b/web/apps/web-ele/src/locales/langs/zh-CN/menu-title.json
index 752cb41..c0ebafe 100644
--- a/web/apps/web-ele/src/locales/langs/zh-CN/menu-title.json
+++ b/web/apps/web-ele/src/locales/langs/zh-CN/menu-title.json
@@ -2,6 +2,7 @@
   "home": "首页",
   "controlCenter": "控制中心",
   "workspace": "工作台",
+  "analytics": "分析页",
   "aiPlatform": "AI 平台",
   "aiAgent": "智能体",
   "workflowOrchestration": "流程编排",
diff --git a/web/apps/web-ele/src/router/access.ts b/web/apps/web-ele/src/router/access.ts
index 13be7aa..4493dd8 100644
--- a/web/apps/web-ele/src/router/access.ts
+++ b/web/apps/web-ele/src/router/access.ts
@@ -194,6 +194,7 @@ async function generateAccess(options: GenerateMenuAndRoutesOptions) {
     '../views/ai-platform/workflow/editor/index.vue',
     '../views/ai-platform/workflow/index.vue',
     '../views/ai-platform/workflow-runs/index.vue',
+    '../views/dashboard/analytics/index.vue',
     '../views/dashboard/workspace/index.vue',
   ]);
 
diff --git a/web/apps/web-ele/src/router/light-menu.ts b/web/apps/web-ele/src/router/light-menu.ts
index f729798..e59a3ff 100644
--- a/web/apps/web-ele/src/router/light-menu.ts
+++ b/web/apps/web-ele/src/router/light-menu.ts
@@ -1,6 +1,7 @@
 export const LIGHT_MENU_NAMES = new Set([
   'ControlCenter',
   'Dashboard',
+  'DashboardAnalytics',
   'DashboardWorkspace',
   'AIAgent',
   'AIKnowledgeDetail',
diff --git a/web/apps/web-ele/src/router/routes/modules/dashboard.ts b/web/apps/web-ele/src/router/routes/modules/dashboard.ts
index df1b0f2..ecd76b6 100644
--- a/web/apps/web-ele/src/router/routes/modules/dashboard.ts
+++ b/web/apps/web-ele/src/router/routes/modules/dashboard.ts
@@ -12,6 +12,15 @@ const routes: RouteRecordRaw[] = [
     path: '/dashboard',
     redirect: '/dashboard/workspace',
     children: [
+      {
+        component: () => import('#/views/dashboard/analytics/index.vue'),
+        meta: {
+          hideInMenu: true,
+          title: 'menu-title.analytics',
+        },
+        name: 'DashboardAnalytics',
+        path: '/dashboard/analytics',
+      },
       {
         component: () => import('#/views/dashboard/workspace/index.vue'),
         meta: {
diff --git a/web/apps/web-ele/src/views/dashboard/analytics/analytics-trends.vue b/web/apps/web-ele/src/views/dashboard/analytics/analytics-trends.vue
new file mode 100644
index 0000000..97e8c7a
--- /dev/null
+++ b/web/apps/web-ele/src/views/dashboard/analytics/analytics-trends.vue
@@ -0,0 +1,95 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import { onMounted, ref } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+onMounted(() => {
+  renderEcharts({
+    grid: {
+      bottom: 0,
+      containLabel: true,
+      left: '1%',
+      right: '1%',
+      top: '2%',
+    },
+    legend: {
+      data: ['智能体会话', '工作流运行'],
+      top: 0,
+    },
+    series: [
+      {
+        areaStyle: {},
+        data: [
+          120, 280, 560, 1100, 1680, 2360, 3100, 2860, 3520, 4180, 4950,
+          4620, 5280, 6100, 6800, 7200, 7600, 8300,
+        ],
+        itemStyle: {
+          color: '#2563eb',
+        },
+        name: '智能体会话',
+        smooth: true,
+        type: 'line',
+      },
+      {
+        areaStyle: {},
+        data: [
+          60, 140, 320, 680, 920, 1380, 1820, 1700, 2260, 2600, 3120, 3480,
+          3860, 4260, 4700, 5120, 5600, 6100,
+        ],
+        itemStyle: {
+          color: '#16a34a',
+        },
+        name: '工作流运行',
+        smooth: true,
+        type: 'line',
+      },
+    ],
+    tooltip: {
+      axisPointer: {
+        lineStyle: {
+          color: '#2563eb',
+          width: 1,
+        },
+      },
+      trigger: 'axis',
+    },
+    xAxis: {
+      axisTick: {
+        show: false,
+      },
+      boundaryGap: false,
+      data: Array.from({ length: 18 }).map((_item, index) => `${index + 6}:00`),
+      splitLine: {
+        lineStyle: {
+          type: 'solid',
+          width: 1,
+        },
+        show: true,
+      },
+      type: 'category',
+    },
+    yAxis: [
+      {
+        axisTick: {
+          show: false,
+        },
+        max: 9000,
+        splitArea: {
+          show: true,
+        },
+        splitNumber: 4,
+        type: 'value',
+      },
+    ],
+  });
+});
+</script>
+
+<template>
+  <EchartsUI ref="chartRef" />
+</template>
diff --git a/web/apps/web-ele/src/views/dashboard/analytics/analytics-visits-data.vue b/web/apps/web-ele/src/views/dashboard/analytics/analytics-visits-data.vue
new file mode 100644
index 0000000..ec3ef6b
--- /dev/null
+++ b/web/apps/web-ele/src/views/dashboard/analytics/analytics-visits-data.vue
@@ -0,0 +1,69 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import { onMounted, ref } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+onMounted(() => {
+  renderEcharts({
+    legend: {
+      bottom: 0,
+      data: ['节点事件', 'LLM 调用'],
+    },
+    radar: {
+      indicator: [
+        { name: '开始' },
+        { name: '节点完成' },
+        { name: '并行分支' },
+        { name: '子流程' },
+        { name: '等待输入' },
+        { name: '错误' },
+      ],
+      radius: '60%',
+      splitNumber: 8,
+    },
+    series: [
+      {
+        areaStyle: {
+          opacity: 0.9,
+          shadowBlur: 0,
+          shadowColor: 'rgba(0,0,0,.2)',
+          shadowOffsetX: 0,
+          shadowOffsetY: 10,
+        },
+        data: [
+          {
+            itemStyle: {
+              color: '#2563eb',
+            },
+            name: '节点事件',
+            value: [92, 86, 68, 56, 42, 18],
+          },
+          {
+            itemStyle: {
+              color: '#16a34a',
+            },
+            name: 'LLM 调用',
+            value: [78, 72, 40, 36, 24, 12],
+          },
+        ],
+        itemStyle: {
+          borderRadius: 10,
+          borderWidth: 2,
+        },
+        symbolSize: 0,
+        type: 'radar',
+      },
+    ],
+    tooltip: {},
+  });
+});
+</script>
+
+<template>
+  <EchartsUI ref="chartRef" />
+</template>
diff --git a/web/apps/web-ele/src/views/dashboard/analytics/analytics-visits-sales.vue b/web/apps/web-ele/src/views/dashboard/analytics/analytics-visits-sales.vue
new file mode 100644
index 0000000..6449293
--- /dev/null
+++ b/web/apps/web-ele/src/views/dashboard/analytics/analytics-visits-sales.vue
@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import { onMounted, ref } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+onMounted(() => {
+  renderEcharts({
+    series: [
+      {
+        animationDelay() {
+          return Math.random() * 400;
+        },
+        animationEasing: 'exponentialInOut',
+        animationType: 'scale',
+        center: ['50%', '50%'],
+        color: ['#2563eb', '#16a34a', '#f97316', '#7c3aed'],
+        data: [
+          { name: '自主执行', value: 520 },
+          { name: '对话流', value: 430 },
+          { name: '子流程', value: 310 },
+          { name: '并行协作', value: 390 },
+        ].sort((a, b) => a.value - b.value),
+        name: '协作类型',
+        radius: '80%',
+        roseType: 'radius',
+        type: 'pie',
+      },
+    ],
+    tooltip: {
+      trigger: 'item',
+    },
+  });
+});
+</script>
+
+<template>
+  <EchartsUI ref="chartRef" />
+</template>
diff --git a/web/apps/web-ele/src/views/dashboard/analytics/analytics-visits-source.vue b/web/apps/web-ele/src/views/dashboard/analytics/analytics-visits-source.vue
new file mode 100644
index 0000000..b85b13b
--- /dev/null
+++ b/web/apps/web-ele/src/views/dashboard/analytics/analytics-visits-source.vue
@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import { onMounted, ref } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+onMounted(() => {
+  renderEcharts({
+    legend: {
+      bottom: '2%',
+      left: 'center',
+    },
+    series: [
+      {
+        animationDelay() {
+          return Math.random() * 100;
+        },
+        animationEasing: 'exponentialInOut',
+        animationType: 'scale',
+        avoidLabelOverlap: false,
+        color: ['#2563eb', '#16a34a', '#f97316', '#7c3aed'],
+        data: [
+          { name: '智能体聊天', value: 1048 },
+          { name: '工作流运行', value: 735 },
+          { name: '模型配置', value: 420 },
+          { name: '知识库检索', value: 360 },
+        ],
+        emphasis: {
+          label: {
+            fontSize: '12',
+            fontWeight: 'bold',
+            show: true,
+          },
+        },
+        itemStyle: {
+          borderRadius: 10,
+          borderWidth: 2,
+        },
+        label: {
+          position: 'center',
+          show: false,
+        },
+        labelLine: {
+          show: false,
+        },
+        name: '调用来源',
+        radius: ['40%', '65%'],
+        type: 'pie',
+      },
+    ],
+    tooltip: {
+      trigger: 'item',
+    },
+  });
+});
+</script>
+
+<template>
+  <EchartsUI ref="chartRef" />
+</template>
diff --git a/web/apps/web-ele/src/views/dashboard/analytics/analytics-visits.vue b/web/apps/web-ele/src/views/dashboard/analytics/analytics-visits.vue
new file mode 100644
index 0000000..a977c42
--- /dev/null
+++ b/web/apps/web-ele/src/views/dashboard/analytics/analytics-visits.vue
@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import { onMounted, ref } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+onMounted(() => {
+  renderEcharts({
+    grid: {
+      bottom: 0,
+      containLabel: true,
+      left: '1%',
+      right: '1%',
+      top: '2%',
+    },
+    series: [
+      {
+        barMaxWidth: 80,
+        data: [
+          1200, 1800, 2600, 3200, 4100, 5200, 6100, 6800, 7600, 8400, 9300,
+          10_200,
+        ],
+        itemStyle: {
+          color: '#2563eb',
+        },
+        name: '运行次数',
+        type: 'bar',
+      },
+    ],
+    tooltip: {
+      axisPointer: {
+        lineStyle: {
+          color: '#2563eb',
+          width: 1,
+        },
+      },
+      trigger: 'axis',
+    },
+    xAxis: {
+      data: Array.from({ length: 12 }).map((_item, index) => `${index + 1}月`),
+      type: 'category',
+    },
+    yAxis: {
+      max: 12_000,
+      splitNumber: 4,
+      type: 'value',
+    },
+  });
+});
+</script>
+
+<template>
+  <EchartsUI ref="chartRef" />
+</template>
diff --git a/web/apps/web-ele/src/views/dashboard/analytics/index.vue b/web/apps/web-ele/src/views/dashboard/analytics/index.vue
new file mode 100644
index 0000000..c61bbb5
--- /dev/null
+++ b/web/apps/web-ele/src/views/dashboard/analytics/index.vue
@@ -0,0 +1,93 @@
+<script lang="ts" setup>
+import type { AnalysisOverviewItem } from '@vben/common-ui';
+import type { TabOption } from '@vben/types';
+
+import {
+  AnalysisChartCard,
+  AnalysisChartsTabs,
+  AnalysisOverview,
+} from '@vben/common-ui';
+import { Activity, Bot, Cpu, GitBranch } from '@vben/icons';
+
+import AnalyticsTrends from './analytics-trends.vue';
+import AnalyticsVisitsData from './analytics-visits-data.vue';
+import AnalyticsVisitsSales from './analytics-visits-sales.vue';
+import AnalyticsVisitsSource from './analytics-visits-source.vue';
+import AnalyticsVisits from './analytics-visits.vue';
+
+defineOptions({ name: 'DashboardAnalytics' });
+
+const overviewItems: AnalysisOverviewItem[] = [
+  {
+    icon: Bot,
+    title: '智能体',
+    totalTitle: '已发布智能体',
+    totalValue: 18,
+    value: 6,
+  },
+  {
+    icon: GitBranch,
+    title: '工作流',
+    totalTitle: '启用工作流',
+    totalValue: 12,
+    value: 4,
+  },
+  {
+    icon: Cpu,
+    title: '模型调用',
+    totalTitle: '近 30 天调用',
+    totalValue: 86_400,
+    value: 3200,
+  },
+  {
+    icon: Activity,
+    title: '运行事件',
+    totalTitle: '已记录事件',
+    totalValue: 128_000,
+    value: 9800,
+  },
+];
+
+const chartTabs: TabOption[] = [
+  {
+    label: '协作趋势',
+    value: 'trends',
+  },
+  {
+    label: '月度运行',
+    value: 'visits',
+  },
+];
+</script>
+
+<template>
+  <div class="p-3">
+    <AnalysisOverview :items="overviewItems" />
+    <AnalysisChartsTabs :tabs="chartTabs" class="mt-5">
+      <template #trends>
+        <AnalyticsTrends />
+      </template>
+      <template #visits>
+        <AnalyticsVisits />
+      </template>
+    </AnalysisChartsTabs>
+
+    <div class="mt-5 w-full md:flex">
+      <AnalysisChartCard
+        class="mt-5 md:mr-4 md:mt-0 md:w-1/3"
+        title="事件分布"
+      >
+        <AnalyticsVisitsData />
+      </AnalysisChartCard>
+      <AnalysisChartCard
+        class="mt-5 md:mr-4 md:mt-0 md:w-1/3"
+        title="调用来源"
+      >
+        <AnalyticsVisitsSource />
+      </AnalysisChartCard>
+      <AnalysisChartCard class="mt-5 md:mt-0 md:w-1/3" title="协作类型">
+        <AnalyticsVisitsSales />
+      </AnalysisChartCard>
+    </div>
+  </div>
+</template>
diff --git a/web/apps/web-ele/src/views/dashboard/workspace/index.vue b/web/apps/web-ele/src/views/dashboard/workspace/index.vue
index b64fdf9..fa21ba5 100644
--- a/web/apps/web-ele/src/views/dashboard/workspace/index.vue
+++ b/web/apps/web-ele/src/views/dashboard/workspace/index.vue
@@ -1,534 +1,266 @@
-<script setup lang="ts">
-import { computed } from 'vue';
+<script lang="ts" setup>
+import type {
+  WorkbenchProjectItem,
+  WorkbenchQuickNavItem,
+  WorkbenchTodoItem,
+  WorkbenchTrendItem,
+} from '@vben/common-ui';
+
+import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 
-import { Page } from '@vben/common-ui/es/page';
-import { useUserStore } from '@vben/stores';
 import {
-  Bell,
+  WorkbenchHeader,
+  WorkbenchProject,
+  WorkbenchQuickNav,
+  WorkbenchTodo,
+  WorkbenchTrends,
+} from '@vben/common-ui';
+import {
   Bot,
-  Brain,
-  GitFork,
+  Database,
+  GitBranch,
+  History,
+  Inbox,
   KeyRound,
+  LayoutDashboard,
   Megaphone,
-  MessageSquare,
+  Menu,
   Settings,
-  Shield,
+  ShieldCheck,
   Users,
-  Workflow,
 } from '@vben/icons';
-
-import { ElButton, ElCard, ElTag } from 'element-plus';
+import { preferences } from '@vben/preferences';
+import { useUserStore } from '@vben/stores';
+import { openWindow } from '@vben/utils';
 
 defineOptions({ name: 'DashboardWorkspace' });
 
-type Accent = 'blue' | 'cyan' | 'green' | 'orange' | 'violet';
-
-interface MetricItem {
-  accent: Accent;
-  label: string;
-  title: string;
-  value: string;
-}
-
-interface NavItem {
-  accent: Accent;
-  description: string;
-  icon: any;
-  path: string;
-  title: string;
-}
-
 const router = useRouter();
 const userStore = useUserStore();
 
-const displayName = computed(
-  () => userStore.userInfo?.realName || userStore.userInfo?.username || '管理员',
-);
-
-const metrics: MetricItem[] = [
-  {
-    accent: 'blue',
-    label: '协作入口',
-    title: '智能体',
-    value: 'Agent',
-  },
-  {
-    accent: 'cyan',
-    label: '运行闭环',
-    title: '流程编排',
-    value: 'Flow',
-  },
-  {
-    accent: 'green',
-    label: '基础治理',
-    title: '权限与角色',
-    value: 'Auth',
-  },
-  {
-    accent: 'orange',
-    label: '运营触达',
-    title: '公告消息',
-    value: 'Notice',
-  },
+const headerStats = [
+  { label: '智能体', value: '18' },
+  { label: '工作流', value: '12' },
+  { label: '运行事件', value: '12.8w' },
 ];
 
-const aiNavItems: NavItem[] = [
+const projectItems: WorkbenchProjectItem[] = [
   {
-    accent: 'blue',
-    description: '创建、发布和调试业务智能体',
+    color: '#2563eb',
+    content: '管理已发布智能体，维护角色、提示词、工具能力和对话入口。',
+    date: 'AI 平台',
+    group: '智能体',
     icon: Bot,
-    path: '/ai-platform/agent',
     title: '智能体管理',
+    url: '/ai-platform/agent',
   },
   {
-    accent: 'cyan',
-    description: '编排多智能体、LLM 和工具节点',
-    icon: Workflow,
-    path: '/ai-platform/workflow',
+    color: '#16a34a',
+    content: '编排自主、对话流、子流程和并行节点，构建协作式任务链路。',
+    date: 'AI 平台',
+    group: '流程',
+    icon: GitBranch,
     title: '流程编排',
+    url: '/ai-platform/workflow',
   },
   {
-    accent: 'violet',
-    description: '查看运行事件、节点状态和失败原因',
-    icon: GitFork,
-    path: '/ai-platform/workflow-runs',
+    color: '#f97316',
+    content: '查看节点状态、LLM 调用、等待输入、错误和最终输出。',
+    date: '可观测',
+    group: '运行',
+    icon: History,
     title: '执行历史',
+    url: '/ai-platform/workflow-runs',
   },
   {
-    accent: 'green',
-    description: '维护可用模型和默认 Chat 模型',
-    icon: Brain,
-    path: '/ai-platform/model',
-    title: '模型配置',
-  },
-];
-
-const adminNavItems: NavItem[] = [
-  {
-    accent: 'green',
-    description: '维护后台账号、状态和基础资料',
-    icon: Users,
-    path: '/system/user',
-    title: '用户管理',
-  },
-  {
-    accent: 'violet',
-    description: '管理角色权限和资源范围',
-    icon: Shield,
-    path: '/system/role',
-    title: '角色权限',
-  },
-  {
-    accent: 'blue',
-    description: '维护菜单、路由和页面入口',
-    icon: KeyRound,
-    path: '/system/menu',
-    title: '菜单管理',
-  },
-  {
-    accent: 'orange',
-    description: '发布公告并查看阅读反馈',
-    icon: Megaphone,
-    path: '/message/announcement',
-    title: '公告管理',
-  },
-];
-
-const runtimeItems = [
-  {
-    description: '聊天、流程运行和系统通知会集中进入消息中心。',
-    icon: MessageSquare,
-    path: '/message/list',
-    title: '消息中心',
-  },
-  {
-    description: '检查最新公告和未读提醒。',
-    icon: Bell,
-    path: '/message/announcement-list',
-    title: '公告列表',
-  },
-  {
-    description: '调整系统配置、模型参数和界面偏好。',
+    color: '#7c3aed',
+    content: '维护默认 chat 模型和供应商，保障智能体运行时可解析模型。',
+    date: '配置',
+    group: '模型',
     icon: Settings,
-    path: '/system/config',
-    title: '系统配置',
+    title: '模型配置',
+    url: '/ai-platform/model',
+  },
+  {
+    color: '#0f766e',
+    content: '沉淀业务知识、提示词资料和协作过程中的可复用上下文。',
+    date: '知识',
+    group: '资料',
+    icon: Database,
+    title: '知识库',
+    url: '/ai-platform/knowledge-base',
+  },
+  {
+    color: '#475569',
+    content: '查看智能体、流程、模型调用和基础管理的整体运行态势。',
+    date: '看板',
+    group: '分析',
+    icon: LayoutDashboard,
+    title: '运行分析',
+    url: '/dashboard/analytics',
   },
 ];
 
-function go(path: string) {
-  router.push(path);
+const quickNavItems: WorkbenchQuickNavItem[] = [
+  {
+    color: '#2563eb',
+    icon: Users,
+    title: '用户管理',
+    url: '/system/user',
+  },
+  {
+    color: '#7c3aed',
+    icon: ShieldCheck,
+    title: '角色权限',
+    url: '/system/role',
+  },
+  {
+    color: '#0f766e',
+    icon: KeyRound,
+    title: 'API 权限',
+    url: '/system/new-permission',
+  },
+  {
+    color: '#f97316',
+    icon: Menu,
+    title: '菜单管理',
+    url: '/system/menu',
+  },
+  {
+    color: '#16a34a',
+    icon: Megaphone,
+    title: '公告管理',
+    url: '/message/announcement',
+  },
+  {
+    color: '#475569',
+    icon: Inbox,
+    title: '公告列表',
+    url: '/message/announcement-list',
+  },
+];
+
+const todoItems = ref<WorkbenchTodoItem[]>([
+  {
+    completed: false,
+    content: '用真实业务需求触发业务需求分析师，确认能输出可测试需求、边界和下一步。',
+    date: '今日',
+    title: '验证业务需求分析师',
+  },
+  {
+    completed: false,
+    content: '检查 start、node_start、llm_chunk、error、complete 等事件在前端是否可读。',
+    date: '今日',
+    title: '检查 SSE 运行事件',
+  },
+  {
+    completed: true,
+    content: '发布智能体允许 model_id 为空，运行时回退到启用的默认 chat 模型。',
+    date: '已完成',
+    title: '模型兜底策略',
+  },
+  {
+    completed: false,
+    content: '继续观察 AI 平台、智能体聊天和运行记录页面的首屏加载与预取效果。',
+    date: '本周',
+    title: '页面切换性能',
+  },
+  {
+    completed: true,
+    content: '保留 systemd 非 Docker 部署路径，Docker 入口仅作为可选方式保留。',
+    date: '已完成',
+    title: '部署路径收敛',
+  },
+]);
+
+const trendItems: WorkbenchTrendItem[] = [
+  {
+    avatar: 'svg:avatar-1',
+    content: '智能体运行时已增加默认 chat 模型解析，避免 <a>model_id 为空</a> 直接失败。',
+    date: '刚刚',
+    title: '运行时',
+  },
+  {
+    avatar: 'svg:avatar-2',
+    content: '工作流运行记录聚焦节点状态、错误原因、子流程和并行分支结果。',
+    date: '1 小时前',
+    title: '可观测性',
+  },
+  {
+    avatar: 'svg:avatar-3',
+    content: '用户、角色、权限、菜单和公告作为轻量后台的基础模块保留。',
+    date: '今天',
+    title: '基础后台',
+  },
+  {
+    avatar: 'svg:avatar-4',
+    content: 'AI 平台保留智能体、流程编排、模型配置、知识库和执行历史。',
+    date: '今天',
+    title: 'AI 平台',
+  },
+  {
+    avatar: 'svg:avatar-1',
+    content: '线上部署路径固定为 <a>/ai-agent-admin</a>，后端由 systemd 托管。',
+    date: '本周',
+    title: '部署',
+  },
+];
+
+function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
+  if (nav.url?.startsWith('http')) {
+    openWindow(nav.url);
+    return;
+  }
+
+  if (nav.url?.startsWith('/')) {
+    router.push(nav.url).catch((error) => {
+      console.error('Navigation failed:', error);
+    });
+  }
 }
 </script>
 
 <template>
-  <Page auto-content-height>
-    <div class="workspace-page">
-      <section class="workspace-hero">
-        <div class="min-w-0">
-          <div class="hero-kicker">AI Agent Admin</div>
-          <h1>你好，{{ displayName }}</h1>
-          <p>
-            当前后台保留基础治理和 AI 协作主链路，优先处理智能体、流程编排、运行观测和权限管理。
-          </p>
-        </div>
-        <div class="hero-actions">
-          <ElButton type="primary" @click="go('/ai-platform/agent')">
-            <Bot class="mr-1 size-4" />
-            智能体
-          </ElButton>
-          <ElButton @click="go('/ai-platform/workflow')">
-            <Workflow class="mr-1 size-4" />
-            流程编排
-          </ElButton>
-        </div>
-      </section>
+  <div class="p-3">
+    <WorkbenchHeader
+      :avatar="userStore.userInfo?.avatar || preferences.app.defaultAvatar"
+      :stats="headerStats"
+    >
+      <template #title>
+        早安，{{ userStore.userInfo?.realName || userStore.userInfo?.username || '管理员' }}，这里是 AI Agent Admin 工作台
+      </template>
+      <template #description>
+        保留 zq-ai-admin 成熟后台体验，聚焦智能体协作、流程编排、模型配置、知识库和基础权限治理。
+      </template>
+    </WorkbenchHeader>
 
-      <section class="metric-grid">
-        <ElCard
-          v-for="item in metrics"
-          :key="item.title"
-          class="metric-card"
-          shadow="never"
-        >
-          <div class="metric-top">
-            <span :class="['accent-dot', `accent-${item.accent}`]"></span>
-            <span>{{ item.label }}</span>
-          </div>
-          <div class="metric-value">{{ item.value }}</div>
-          <div class="metric-title">{{ item.title }}</div>
-        </ElCard>
-      </section>
-
-      <section class="content-grid">
-        <ElCard class="panel-card" shadow="never">
-          <template #header>
-            <div class="panel-header">
-              <span>AI 协作</span>
-              <ElTag effect="plain" size="small">核心链路</ElTag>
-            </div>
-          </template>
-          <div class="nav-grid">
-            <button
-              v-for="item in aiNavItems"
-              :key="item.path"
-              class="nav-tile"
-              type="button"
-              @click="go(item.path)"
-            >
-              <span :class="['tile-icon', `tile-${item.accent}`]">
-                <component :is="item.icon" class="size-5" />
-              </span>
-              <span class="tile-copy">
-                <strong>{{ item.title }}</strong>
-                <span>{{ item.description }}</span>
-              </span>
-            </button>
-          </div>
-        </ElCard>
-
-        <ElCard class="panel-card" shadow="never">
-          <template #header>
-            <div class="panel-header">
-              <span>基础后台</span>
-              <ElTag effect="plain" size="small" type="success">已保留</ElTag>
-            </div>
-          </template>
-          <div class="nav-grid">
-            <button
-              v-for="item in adminNavItems"
-              :key="item.path"
-              class="nav-tile"
-              type="button"
-              @click="go(item.path)"
-            >
-              <span :class="['tile-icon', `tile-${item.accent}`]">
-                <component :is="item.icon" class="size-5" />
-              </span>
-              <span class="tile-copy">
-                <strong>{{ item.title }}</strong>
-                <span>{{ item.description }}</span>
-              </span>
-            </button>
-          </div>
-        </ElCard>
-      </section>
-
-      <ElCard class="panel-card" shadow="never">
-        <template #header>
-          <div class="panel-header">
-            <span>运维与消息</span>
-            <ElTag effect="plain" size="small" type="warning">轻量入口</ElTag>
-          </div>
-        </template>
-        <div class="runtime-list">
-          <button
-            v-for="item in runtimeItems"
-            :key="item.path"
-            class="runtime-row"
-            type="button"
-            @click="go(item.path)"
-          >
-            <span class="runtime-icon">
-              <component :is="item.icon" class="size-4" />
-            </span>
-            <span class="runtime-copy">
-              <strong>{{ item.title }}</strong>
-              <span>{{ item.description }}</span>
-            </span>
-          </button>
-        </div>
-      </ElCard>
+    <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="协作闭环待办"
+        />
+      </div>
     </div>
-  </Page>
+  </div>
 </template>
-
-<style scoped>
-.workspace-page {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  padding: 16px;
-}
-
-.workspace-hero {
-  align-items: center;
-  background:
-    linear-gradient(135deg, rgb(36 99 235 / 8%), transparent 42%),
-    var(--el-bg-color);
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 8px;
-  display: flex;
-  gap: 20px;
-  justify-content: space-between;
-  padding: 22px 24px;
-}
-
-.hero-kicker {
-  color: var(--el-color-primary);
-  font-size: 13px;
-  font-weight: 700;
-  margin-bottom: 8px;
-}
-
-.workspace-hero h1 {
-  color: var(--el-text-color-primary);
-  font-size: 26px;
-  font-weight: 700;
-  line-height: 1.25;
-  margin: 0;
-}
-
-.workspace-hero p {
-  color: var(--el-text-color-regular);
-  line-height: 1.7;
-  margin: 8px 0 0;
-  max-width: 720px;
-}
-
-.hero-actions {
-  display: flex;
-  flex-shrink: 0;
-  gap: 8px;
-}
-
-.metric-grid {
-  display: grid;
-  gap: 12px;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-}
-
-.metric-card,
-.panel-card {
-  border-radius: 8px;
-}
-
-.metric-card :deep(.el-card__body) {
-  padding: 16px;
-}
-
-.metric-top {
-  align-items: center;
-  color: var(--el-text-color-secondary);
-  display: flex;
-  font-size: 12px;
-  gap: 8px;
-}
-
-.accent-dot {
-  border-radius: 999px;
-  display: inline-flex;
-  height: 8px;
-  width: 8px;
-}
-
-.accent-blue {
-  background: var(--el-color-primary);
-}
-
-.accent-cyan {
-  background: var(--el-color-info);
-}
-
-.accent-green {
-  background: var(--el-color-success);
-}
-
-.accent-orange {
-  background: var(--el-color-warning);
-}
-
-.accent-violet {
-  background: var(--el-color-danger);
-}
-
-.metric-value {
-  color: var(--el-text-color-primary);
-  font-size: 24px;
-  font-weight: 700;
-  margin-top: 14px;
-}
-
-.metric-title {
-  color: var(--el-text-color-regular);
-  font-size: 13px;
-  margin-top: 4px;
-}
-
-.content-grid {
-  display: grid;
-  gap: 16px;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-.panel-header {
-  align-items: center;
-  color: var(--el-text-color-primary);
-  display: flex;
-  font-weight: 700;
-  justify-content: space-between;
-}
-
-.nav-grid {
-  display: grid;
-  gap: 10px;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-.nav-tile,
-.runtime-row {
-  align-items: center;
-  background: var(--el-bg-color-page);
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 8px;
-  color: inherit;
-  cursor: pointer;
-  display: flex;
-  gap: 12px;
-  min-width: 0;
-  padding: 14px;
-  text-align: left;
-  transition:
-    border-color 180ms ease,
-    box-shadow 180ms ease,
-    transform 180ms ease;
-}
-
-.nav-tile:hover,
-.runtime-row:hover {
-  border-color: var(--el-color-primary-light-5);
-  box-shadow: 0 8px 24px rgb(15 23 42 / 8%);
-  transform: translateY(-1px);
-}
-
-.tile-icon,
-.runtime-icon {
-  align-items: center;
-  border-radius: 8px;
-  display: inline-flex;
-  flex-shrink: 0;
-  height: 38px;
-  justify-content: center;
-  width: 38px;
-}
-
-.tile-blue {
-  background: var(--el-color-primary-light-9);
-  color: var(--el-color-primary);
-}
-
-.tile-cyan {
-  background: var(--el-color-info-light-9);
-  color: var(--el-color-info);
-}
-
-.tile-green {
-  background: var(--el-color-success-light-9);
-  color: var(--el-color-success);
-}
-
-.tile-orange {
-  background: var(--el-color-warning-light-9);
-  color: var(--el-color-warning);
-}
-
-.tile-violet {
-  background: var(--el-color-danger-light-9);
-  color: var(--el-color-danger);
-}
-
-.tile-copy,
-.runtime-copy {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  min-width: 0;
-}
-
-.tile-copy strong,
-.runtime-copy strong {
-  color: var(--el-text-color-primary);
-  font-size: 14px;
-  line-height: 1.25;
-}
-
-.tile-copy span,
-.runtime-copy span {
-  color: var(--el-text-color-secondary);
-  font-size: 12px;
-  line-height: 1.45;
-}
-
-.runtime-list {
-  display: grid;
-  gap: 10px;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
-.runtime-icon {
-  background: var(--el-fill-color-light);
-  color: var(--el-text-color-regular);
-}
-
-@media (max-width: 1180px) {
-  .metric-grid,
-  .runtime-list {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-@media (max-width: 900px) {
-  .workspace-hero,
-  .hero-actions {
-    align-items: stretch;
-    flex-direction: column;
-  }
-
-  .content-grid,
-  .metric-grid,
-  .nav-grid,
-  .runtime-list {
-    grid-template-columns: 1fr;
-  }
-}
-</style>
diff --git a/web/packages/effects/common-ui/src/ui/dashboard/analysis/analysis-chart-card.vue b/web/packages/effects/common-ui/src/ui/dashboard/analysis/analysis-chart-card.vue
new file mode 100644
index 0000000..294d517
--- /dev/null
+++ b/web/packages/effects/common-ui/src/ui/dashboard/analysis/analysis-chart-card.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { Card, CardContent, CardHeader, CardTitle } from '@vben-core/shadcn-ui';
+
+interface Props {
+  title: string;
+}
+
+defineOptions({
+  name: 'AnalysisChartCard',
+});
+
+withDefaults(defineProps<Props>(), {});
+</script>
+
+<template>
+  <Card>
+    <CardHeader>
+      <CardTitle class="text-xl">{{ title }}</CardTitle>
+    </CardHeader>
+    <CardContent>
+      <slot></slot>
+    </CardContent>
+  </Card>
+</template>
diff --git a/web/packages/effects/common-ui/src/ui/dashboard/analysis/analysis-charts-tabs.vue b/web/packages/effects/common-ui/src/ui/dashboard/analysis/analysis-charts-tabs.vue
new file mode 100644
index 0000000..453ee5c
--- /dev/null
+++ b/web/packages/effects/common-ui/src/ui/dashboard/analysis/analysis-charts-tabs.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { TabOption } from '@vben/types';
+
+import { computed } from 'vue';
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@vben-core/shadcn-ui';
+
+interface Props {
+  tabs?: TabOption[];
+}
+
+defineOptions({
+  name: 'AnalysisChartsTabs',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  tabs: () => [],
+});
+
+const defaultValue = computed(() => {
+  return props.tabs?.[0]?.value;
+});
+</script>
+
+<template>
+  <div class="card-box w-full px-4 pb-5 pt-3">
+    <Tabs :default-value="defaultValue">
+      <TabsList>
+        <template v-for="tab in tabs" :key="tab.label">
+          <TabsTrigger :value="tab.value"> {{ tab.label }} </TabsTrigger>
+        </template>
+      </TabsList>
+      <template v-for="tab in tabs" :key="tab.label">
+        <TabsContent :value="tab.value" class="pt-4">
+          <slot :name="tab.value"></slot>
+        </TabsContent>
+      </template>
+    </Tabs>
+  </div>
+</template>
diff --git a/web/packages/effects/common-ui/src/ui/dashboard/analysis/analysis-overview.vue b/web/packages/effects/common-ui/src/ui/dashboard/analysis/analysis-overview.vue
new file mode 100644
index 0000000..18c4929
--- /dev/null
+++ b/web/packages/effects/common-ui/src/ui/dashboard/analysis/analysis-overview.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type { AnalysisOverviewItem } from '../typing';
+
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  VbenCountToAnimator,
+  VbenIcon,
+} from '@vben-core/shadcn-ui';
+
+interface Props {
+  items?: AnalysisOverviewItem[];
+}
+
+defineOptions({
+  name: 'AnalysisOverview',
+});
+
+withDefaults(defineProps<Props>(), {
+  items: () => [],
+});
+</script>
+
+<template>
+  <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
+    <template v-for="item in items" :key="item.title">
+      <Card :title="item.title" class="w-full">
+        <CardHeader>
+          <CardTitle class="text-xl">{{ item.title }}</CardTitle>
+        </CardHeader>
+
+        <CardContent class="flex items-center justify-between">
+          <VbenCountToAnimator
+            :end-val="item.value"
+            :start-val="1"
+            class="text-xl"
+            prefix=""
+          />
+          <VbenIcon :icon="item.icon" class="size-8 flex-shrink-0" />
+        </CardContent>
+        <CardFooter class="justify-between">
+          <span>{{ item.totalTitle }}</span>
+          <VbenCountToAnimator
+            :end-val="item.totalValue"
+            :start-val="1"
+            prefix=""
+          />
+        </CardFooter>
+      </Card>
+    </template>
+  </div>
+</template>
diff --git a/web/packages/effects/common-ui/src/ui/dashboard/analysis/index.ts b/web/packages/effects/common-ui/src/ui/dashboard/analysis/index.ts
new file mode 100644
index 0000000..7c67b87
--- /dev/null
+++ b/web/packages/effects/common-ui/src/ui/dashboard/analysis/index.ts
@@ -0,0 +1,3 @@
+export { default as AnalysisChartCard } from './analysis-chart-card.vue';
+export { default as AnalysisChartsTabs } from './analysis-charts-tabs.vue';
+export { default as AnalysisOverview } from './analysis-overview.vue';
diff --git a/web/packages/effects/common-ui/src/ui/dashboard/index.ts b/web/packages/effects/common-ui/src/ui/dashboard/index.ts
new file mode 100644
index 0000000..bc74424
--- /dev/null
+++ b/web/packages/effects/common-ui/src/ui/dashboard/index.ts
@@ -0,0 +1,3 @@
+export * from './analysis';
+export type * from './typing';
+export * from './workbench';
diff --git a/web/packages/effects/common-ui/src/ui/dashboard/typing.ts b/web/packages/effects/common-ui/src/ui/dashboard/typing.ts
new file mode 100644
index 0000000..48fc9c7
--- /dev/null
+++ b/web/packages/effects/common-ui/src/ui/dashboard/typing.ts
@@ -0,0 +1,48 @@
+import type { Component } from 'vue';
+
+interface AnalysisOverviewItem {
+  icon: Component | string;
+  title: string;
+  totalTitle: string;
+  totalValue: number;
+  value: number;
+}
+
+interface WorkbenchProjectItem {
+  color?: string;
+  content: string;
+  date: string;
+  group: string;
+  icon: Component | string;
+  title: string;
+  url?: string;
+}
+
+interface WorkbenchTrendItem {
+  avatar: string;
+  content: string;
+  date: string;
+  title: string;
+}
+
+interface WorkbenchTodoItem {
+  completed: boolean;
+  content: string;
+  date: string;
+  title: string;
+}
+
+interface WorkbenchQuickNavItem {
+  color?: string;
+  icon: Component | string;
+  title: string;
+  url?: string;
+}
+
+export type {
+  AnalysisOverviewItem,
+  WorkbenchProjectItem,
+  WorkbenchQuickNavItem,
+  WorkbenchTodoItem,
+  WorkbenchTrendItem,
+};
diff --git a/web/packages/effects/common-ui/src/ui/dashboard/workbench/index.ts b/web/packages/effects/common-ui/src/ui/dashboard/workbench/index.ts
new file mode 100644
index 0000000..76b7af1
--- /dev/null
+++ b/web/packages/effects/common-ui/src/ui/dashboard/workbench/index.ts
@@ -0,0 +1,5 @@
+export { default as WorkbenchHeader } from './workbench-header.vue';
+export { default as WorkbenchProject } from './workbench-project.vue';
+export { default as WorkbenchQuickNav } from './workbench-quick-nav.vue';
+export { default as WorkbenchTodo } from './workbench-todo.vue';
+export { default as WorkbenchTrends } from './workbench-trends.vue';
diff --git a/web/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-header.vue b/web/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-header.vue
new file mode 100644
index 0000000..6eeeaaf
--- /dev/null
+++ b/web/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-header.vue
@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import { VbenAvatar } from '@vben-core/shadcn-ui';
+
+interface Props {
+  avatar?: string;
+  stats?: Array<{
+    label: string;
+    value: string;
+  }>;
+}
+
+defineOptions({
+  name: 'WorkbenchHeader',
+});
+
+withDefaults(defineProps<Props>(), {
+  avatar: '',
+  stats: () => [
+    { label: '待办', value: '2/10' },
+    { label: '项目', value: '8' },
+    { label: '团队', value: '300' },
+  ],
+});
+</script>
+
+<template>
+  <div class="card-box p-4 py-6">
+    <div class="flex flex-col gap-4 lg:flex-row lg:items-center">
+      <div class="flex min-w-0 flex-1 flex-col gap-4 md:flex-row md:items-center">
+        <VbenAvatar :src="avatar" class="size-20 flex-shrink-0" />
+        <div
+          v-if="$slots.title || $slots.description"
+          class="flex min-w-0 flex-col justify-center"
+        >
+          <h1
+            v-if="$slots.title"
+            class="text-md text-foreground font-semibold leading-7 md:text-xl"
+          >
+            <slot name="title"></slot>
+          </h1>
+          <span
+            v-if="$slots.description"
+            class="text-foreground/80 mt-1 leading-6"
+          >
+            <slot name="description"></slot>
+          </span>
+        </div>
+      </div>
+      <div
+        class="grid w-full grid-cols-3 gap-3 text-right lg:w-auto lg:min-w-80"
+      >
+        <div
+          v-for="item in stats"
+          :key="item.label"
+          class="min-w-0 rounded-md px-2 py-1"
+        >
+          <span class="text-foreground/80 block truncate text-sm">
+            {{ item.label }}
+          </span>
+          <span class="text-foreground block truncate text-2xl">
+            {{ item.value }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/web/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-project.vue b/web/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-project.vue
new file mode 100644
index 0000000..0f48369
--- /dev/null
+++ b/web/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-project.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { WorkbenchProjectItem } from '../typing';
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  VbenIcon,
+} from '@vben-core/shadcn-ui';
+
+interface Props {
+  items?: WorkbenchProjectItem[];
+  title: string;
+}
+
+defineOptions({
+  name: 'WorkbenchProject',
+});
+
+withDefaults(defineProps<Props>(), {
+  items: () => [],
+});
+
+defineEmits(['click']);
+</script>
+
+<template>
+  <Card>
+    <CardHeader class="py-4">
+      <CardTitle class="text-lg">{{ title }}</CardTitle>
+    </CardHeader>
+    <CardContent class="grid grid-cols-1 p-0 md:grid-cols-2">
+      <template v-for="(item, index) in items" :key="item.title">
+        <div
+          :class="{
+            'md:border-r': index % 2 === 0,
+            'rounded-bl-xl': index === items.length - 2,
+            'rounded-br-xl': index === items.length - 1,
+          }"
+          class="border-border group min-w-0 cursor-pointer border-t p-4 transition-all hover:shadow-xl"
+          @click="$emit('click', item)"
+        >
+          <div class="flex items-center">
+            <VbenIcon
+              :color="item.color"
+              :icon="item.icon"
+              class="size-8 transition-all duration-300 group-hover:scale-110"
+            />
+            <span class="ml-4 text-lg font-medium">{{ item.title }}</span>
+          </div>
+          <div class="text-foreground/80 mt-4 flex min-h-12 leading-6">
+            {{ item.content }}
+          </div>
+          <div class="text-foreground/80 flex justify-between">
+            <span>{{ item.group }}</span>
+            <span>{{ item.date }}</span>
+          </div>
+        </div>
+      </template>
+    </CardContent>
+  </Card>
+</template>
diff --git a/web/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-quick-nav.vue b/web/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-quick-nav.vue
new file mode 100644
index 0000000..86dc5c6
--- /dev/null
+++ b/web/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-quick-nav.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { WorkbenchQuickNavItem } from '../typing';
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  VbenIcon,
+} from '@vben-core/shadcn-ui';
+
+interface Props {
+  items?: WorkbenchQuickNavItem[];
+  title: string;
+}
+
+defineOptions({
+  name: 'WorkbenchQuickNav',
+});
+
+withDefaults(defineProps<Props>(), {
+  items: () => [],
+});
+
+defineEmits(['click']);
+</script>
+
+<template>
+  <Card>
+    <CardHeader class="py-4">
+      <CardTitle class="text-lg">{{ title }}</CardTitle>
+    </CardHeader>
+    <CardContent class="flex flex-wrap p-0">
+      <template v-for="(item, index) in items" :key="item.title">
+        <div
+          :class="{
+            'border-r-0': index % 3 === 2,
+            'border-b-0': index < 3,
+            'pb-4': index > 2,
+            'rounded-bl-xl': index === items.length - 3,
+            'rounded-br-xl': index === items.length - 1,
+          }"
+          class="flex-col-center border-border group w-1/3 cursor-pointer border-r border-t py-8 hover:shadow-xl"
+          @click="$emit('click', item)"
+        >
+          <VbenIcon
+            :color="item.color"
+            :icon="item.icon"
+            class="size-7 transition-all duration-300 group-hover:scale-125"
+          />
+          <span class="text-md mt-2 truncate">{{ item.title }}</span>
+        </div>
+      </template>
+    </CardContent>
+  </Card>
+</template>
diff --git a/web/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-todo.vue b/web/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-todo.vue
new file mode 100644
index 0000000..90f20c1
--- /dev/null
+++ b/web/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-todo.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { WorkbenchTodoItem } from '../typing';
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  VbenCheckbox,
+} from '@vben-core/shadcn-ui';
+
+interface Props {
+  items?: WorkbenchTodoItem[];
+  title: string;
+}
+
+defineOptions({
+  name: 'WorkbenchTodo',
+});
+
+withDefaults(defineProps<Props>(), {
+  items: () => [],
+});
+</script>
+
+<template>
+  <Card>
+    <CardHeader class="py-4">
+      <CardTitle class="text-lg">{{ title }}</CardTitle>
+    </CardHeader>
+    <CardContent class="flex flex-wrap p-5 pt-0">
+      <ul class="divide-border w-full divide-y" role="list">
+        <li
+          v-for="item in items"
+          :key="item.title"
+          :class="{
+            'select-none line-through opacity-60': item.completed,
+          }"
+          class="flex cursor-pointer justify-between gap-x-6 py-5"
+        >
+          <div class="flex min-w-0 items-center gap-x-4">
+            <VbenCheckbox v-model:checked="item.completed" name="completed" />
+            <div class="min-w-0 flex-auto">
+              <p class="text-foreground text-sm font-semibold leading-6">
+                {{ item.title }}
+              </p>
+              <!-- eslint-disable vue/no-v-html -->
+              <p
+                class="text-foreground/80 *:text-primary mt-1 truncate text-xs leading-5"
+                v-html="item.content"
+              ></p>
+            </div>
+          </div>
+          <div class="hidden h-full shrink-0 sm:flex sm:flex-col sm:items-end">
+            <span class="text-foreground/80 mt-6 text-xs leading-6">
+              {{ item.date }}
+            </span>
+          </div>
+        </li>
+      </ul>
+    </CardContent>
+  </Card>
+</template>
diff --git a/web/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-trends.vue b/web/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-trends.vue
new file mode 100644
index 0000000..06f2a5e
--- /dev/null
+++ b/web/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-trends.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { WorkbenchTrendItem } from '../typing';
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  VbenIcon,
+} from '@vben-core/shadcn-ui';
+
+interface Props {
+  items?: WorkbenchTrendItem[];
+  title: string;
+}
+
+defineOptions({
+  name: 'WorkbenchTrends',
+});
+
+withDefaults(defineProps<Props>(), {
+  items: () => [],
+});
+</script>
+
+<template>
+  <Card>
+    <CardHeader class="py-4">
+      <CardTitle class="text-lg">{{ title }}</CardTitle>
+    </CardHeader>
+    <CardContent class="flex flex-wrap p-5 pt-0">
+      <ul class="divide-border w-full divide-y" role="list">
+        <li
+          v-for="item in items"
+          :key="item.title"
+          class="flex justify-between gap-x-6 py-5"
+        >
+          <div class="flex min-w-0 items-center gap-x-4">
+            <VbenIcon
+              :icon="item.avatar"
+              alt=""
+              class="size-10 flex-none rounded-full"
+            />
+            <div class="min-w-0 flex-auto">
+              <p class="text-foreground text-sm font-semibold leading-6">
+                {{ item.title }}
+              </p>
+              <!-- eslint-disable vue/no-v-html -->
+              <p
+                class="text-foreground/80 *:text-primary mt-1 truncate text-xs leading-5"
+                v-html="item.content"
+              ></p>
+            </div>
+          </div>
+          <div class="hidden h-full shrink-0 sm:flex sm:flex-col sm:items-end">
+            <span class="text-foreground/80 mt-6 text-xs leading-6">
+              {{ item.date }}
+            </span>
+          </div>
+        </li>
+      </ul>
+    </CardContent>
+  </Card>
+</template>
diff --git a/web/packages/effects/common-ui/src/ui/index.ts b/web/packages/effects/common-ui/src/ui/index.ts
index 44ba0e8..fb99fde 100644
--- a/web/packages/effects/common-ui/src/ui/index.ts
+++ b/web/packages/effects/common-ui/src/ui/index.ts
@@ -1,3 +1,4 @@
 export * from './about';
 export * from './authentication';
+export * from './dashboard';
 export * from './fallback';