From bdedb5030b2062e7064475645688040d1b118116 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: Thu, 11 Jun 2026 11:32:47 +0800
Subject: [PATCH] feat: replace dashboard home with control center

---
 web/apps/web-ele/src/locales/index.ts         |    1 -
 web/apps/web-ele/src/router/access.ts         |    4 +-
 .../src/views/control-center/index.vue        | 1309 +++++++++++++++++
 3 files changed, 1311 insertions(+), 3 deletions(-)
 create mode 100644 web/apps/web-ele/src/views/control-center/index.vue

diff --git a/web/apps/web-ele/src/locales/index.ts b/web/apps/web-ele/src/locales/index.ts
index cc7736a..ca526aa 100644
--- a/web/apps/web-ele/src/locales/index.ts
+++ b/web/apps/web-ele/src/locales/index.ts
@@ -32,7 +32,6 @@ const baseModules = import.meta.glob([
 const businessModules = import.meta.glob([
   './langs/zh-CN/ai-platform.json',
   './langs/zh-CN/announcement.json',
-  './langs/zh-CN/dashboard-design.json',
   './langs/zh-CN/menu.json',
   './langs/zh-CN/message.json',
   './langs/zh-CN/permission.json',
diff --git a/web/apps/web-ele/src/router/access.ts b/web/apps/web-ele/src/router/access.ts
index 2b0a940..b53012d 100644
--- a/web/apps/web-ele/src/router/access.ts
+++ b/web/apps/web-ele/src/router/access.ts
@@ -79,7 +79,7 @@ function normalizeBackendRoute<
 
   const normalized = { ...route };
   normalized.path = '/page-render/main_home';
-  normalized.component = 'online-dev/page-render/index';
+  normalized.component = 'control-center/index';
   normalized.query = undefined;
   return normalized;
 }
@@ -152,7 +152,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/online-dev/page-render/index.vue',
+    '../views/control-center/index.vue',
   ]);
 
   const layoutMap: ComponentRecordType = {
diff --git a/web/apps/web-ele/src/views/control-center/index.vue b/web/apps/web-ele/src/views/control-center/index.vue
new file mode 100644
index 0000000..1d1ae04
--- /dev/null
+++ b/web/apps/web-ele/src/views/control-center/index.vue
@@ -0,0 +1,1309 @@
+<script setup lang="ts">
+import type { Component } from 'vue';
+
+import type { UserAnnouncement } from '#/api/core/announcement';
+import type { Message } from '#/api/core/message';
+import type {
+  RealtimeStats,
+  ServerMonitorResponse,
+} from '#/api/core/server-monitor';
+import type { WorkflowRunListItem } from '#/api/ai-platform/ai-platform';
+
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { Page } from '@vben/common-ui';
+import {
+  Bell,
+  Bot,
+  BookOpenText,
+  Brain,
+  Cloud,
+  CloudDrizzle,
+  CloudFog,
+  CloudRain,
+  CloudSnow,
+  CloudSun,
+  Code,
+  Cpu,
+  Database,
+  FileText,
+  HardDrive,
+  History,
+  KeyRound,
+  LayoutDashboard,
+  Menu,
+  Megaphone,
+  MessageSquare,
+  Network,
+  Settings,
+  ShieldCheck,
+  Sun,
+  Users,
+  Workflow,
+  Zap,
+} from '@vben/icons';
+
+import dayjs from 'dayjs';
+import {
+  ElButton,
+  ElEmpty,
+  ElProgress,
+  ElSkeleton,
+  ElSkeletonItem,
+  ElTag,
+} from 'element-plus';
+
+import {
+  getAgentListApi,
+  getAllWorkflowRunsApi,
+  getKnowledgeBaseListApi,
+  getModelListApi,
+  getProviderListApi,
+  getWorkflowListApi,
+} from '#/api/ai-platform/ai-platform';
+import { getUserAnnouncementListApi } from '#/api/core/announcement';
+import { getMessageListApi } from '#/api/core/message';
+import {
+  getRealtimeStatsApi,
+  getServerOverviewApi,
+} from '#/api/core/server-monitor';
+
+defineOptions({ name: 'ControlCenter' });
+
+type WeatherInfo = {
+  humidity: number;
+  temperature: number;
+  weatherCode: number;
+  windDirection: number;
+  windSpeed: number;
+};
+
+type QuickLink = {
+  description: string;
+  icon: Component;
+  label: string;
+  path: string;
+  tone: string;
+};
+
+const router = useRouter();
+const now = ref(new Date());
+const weather = ref<null | WeatherInfo>(null);
+const weatherLoading = ref(false);
+const aiLoading = ref(false);
+const contentLoading = ref(false);
+const monitorLoading = ref(false);
+const announcements = ref<UserAnnouncement[]>([]);
+const messages = ref<Message[]>([]);
+const workflowRuns = ref<WorkflowRunListItem[]>([]);
+const serverOverview = ref<null | ServerMonitorResponse>(null);
+const realtimeStats = ref<null | RealtimeStats>(null);
+const aiMetrics = ref([
+  { key: 'agent', label: '智能体', path: '/ai-platform/agent', value: 0 },
+  { key: 'workflow', label: '流程', path: '/ai-platform/workflow', value: 0 },
+  {
+    key: 'run',
+    label: '执行记录',
+    path: '/ai-platform/workflow-runs',
+    value: 0,
+  },
+  {
+    key: 'knowledge',
+    label: '知识库',
+    path: '/ai-platform/knowledge-base',
+    value: 0,
+  },
+  { key: 'model', label: '模型', path: '/ai-platform/model', value: 0 },
+  { key: 'provider', label: '供应商', path: '/ai-platform/model', value: 0 },
+]);
+
+let clockTimer: null | ReturnType<typeof setInterval> = null;
+let monitorTimer: null | ReturnType<typeof setInterval> = null;
+
+const aiLinks: QuickLink[] = [
+  {
+    label: '智能体',
+    description: '配置角色、工具、知识库和协作策略',
+    icon: Bot,
+    path: '/ai-platform/agent',
+    tone: 'blue',
+  },
+  {
+    label: '流程编排',
+    description: '编排 LLM、知识检索和交互节点',
+    icon: Workflow,
+    path: '/ai-platform/workflow',
+    tone: 'green',
+  },
+  {
+    label: '执行历史',
+    description: '追踪流程运行、耗时、Token 和失败原因',
+    icon: History,
+    path: '/ai-platform/workflow-runs',
+    tone: 'violet',
+  },
+  {
+    label: '知识库',
+    description: '管理文档、切片、检索和嵌入模型',
+    icon: BookOpenText,
+    path: '/ai-platform/knowledge-base',
+    tone: 'cyan',
+  },
+  {
+    label: '模型配置',
+    description: '维护供应商、模型能力和默认参数',
+    icon: Settings,
+    path: '/ai-platform/model',
+    tone: 'amber',
+  },
+  {
+    label: 'Codex 助手',
+    description: '进入面向代码任务的智能体对话',
+    icon: Code,
+    path: '/agent-chat/codex',
+    tone: 'rose',
+  },
+];
+
+const adminLinks: QuickLink[] = [
+  {
+    label: '用户管理',
+    description: '维护账号、部门、角色和状态',
+    icon: Users,
+    path: '/system/user',
+    tone: 'blue',
+  },
+  {
+    label: '角色管理',
+    description: '维护角色和数据权限范围',
+    icon: ShieldCheck,
+    path: '/system/role',
+    tone: 'green',
+  },
+  {
+    label: '权限管理',
+    description: '配置接口、菜单和按钮权限',
+    icon: KeyRound,
+    path: '/system/new-permission',
+    tone: 'violet',
+  },
+  {
+    label: '菜单管理',
+    description: '维护后台菜单和路由入口',
+    icon: Menu,
+    path: '/system/menu',
+    tone: 'cyan',
+  },
+  {
+    label: '公告管理',
+    description: '发布通知、公告和阅读范围',
+    icon: Megaphone,
+    path: '/message/announcement',
+    tone: 'amber',
+  },
+  {
+    label: '消息中心',
+    description: '查看站内消息、待办和工作流通知',
+    icon: Bell,
+    path: '/message/list',
+    tone: 'rose',
+  },
+];
+
+const weatherMap: Record<
+  string,
+  { color: string; icon: Component; label: string }
+> = {
+  clear: { label: '晴', icon: Sun, color: '#d97706' },
+  cloudy: { label: '多云', icon: CloudSun, color: '#2563eb' },
+  overcast: { label: '阴', icon: Cloud, color: '#64748b' },
+  fog: { label: '雾', icon: CloudFog, color: '#64748b' },
+  drizzle: { label: '小雨', icon: CloudDrizzle, color: '#0ea5e9' },
+  rain: { label: '雨', icon: CloudRain, color: '#2563eb' },
+  snow: { label: '雪', icon: CloudSnow, color: '#7c3aed' },
+  thunder: { label: '雷阵雨', icon: Zap, color: '#ca8a04' },
+};
+
+const greeting = computed(() => {
+  const hour = now.value.getHours();
+  if (hour < 6) return '夜深了';
+  if (hour < 11) return '上午好';
+  if (hour < 14) return '中午好';
+  if (hour < 18) return '下午好';
+  return '晚上好';
+});
+
+const currentDate = computed(() => dayjs(now.value).format('YYYY年M月D日dddd'));
+const currentTime = computed(() => dayjs(now.value).format('HH:mm:ss'));
+
+const currentWeather = computed(() => {
+  if (!weather.value) return null;
+  const code = weather.value.weatherCode;
+  if (code === 0) return weatherMap.clear;
+  if (code <= 2) return weatherMap.cloudy;
+  if (code === 3) return weatherMap.overcast;
+  if (code === 45 || code === 48) return weatherMap.fog;
+  if (code >= 51 && code <= 57) return weatherMap.drizzle;
+  if ((code >= 61 && code <= 67) || (code >= 80 && code <= 82)) {
+    return weatherMap.rain;
+  }
+  if ((code >= 71 && code <= 77) || (code >= 85 && code <= 86)) {
+    return weatherMap.snow;
+  }
+  if (code >= 95) return weatherMap.thunder;
+  return weatherMap.clear;
+});
+
+const monitorCards = computed(() => [
+  {
+    color: 'var(--el-color-primary)',
+    icon: Cpu,
+    label: 'CPU',
+    meta: `${serverOverview.value?.cpu_info?.physical_cores || 0}核 ${serverOverview.value?.cpu_info?.total_cores || 0}线程`,
+    percentage: realtimeStats.value?.cpu_percent || 0,
+    value: `${(realtimeStats.value?.cpu_percent || 0).toFixed(1)}%`,
+  },
+  {
+    color: 'var(--el-color-success)',
+    icon: Database,
+    label: '内存',
+    meta: `${formatMemory(realtimeStats.value?.memory_details?.used || 0)} / ${formatMemory(realtimeStats.value?.memory_details?.total || 0)}`,
+    percentage: realtimeStats.value?.memory_percent || 0,
+    value: `${(realtimeStats.value?.memory_percent || 0).toFixed(1)}%`,
+  },
+  {
+    color: 'var(--el-color-warning)',
+    icon: HardDrive,
+    label: '磁盘',
+    meta: `读 ${formatSpeed(realtimeStats.value?.disk_io?.read_speed || 0)} / 写 ${formatSpeed(realtimeStats.value?.disk_io?.write_speed || 0)}`,
+    percentage: 0,
+    value: formatBytes(realtimeStats.value?.disk_total?.write_bytes || 0),
+  },
+  {
+    color: 'var(--el-color-danger)',
+    icon: Network,
+    label: '网络',
+    meta: `上行 ${formatSpeed(realtimeStats.value?.network_io?.upload_speed || 0)} / 下行 ${formatSpeed(realtimeStats.value?.network_io?.download_speed || 0)}`,
+    percentage: 0,
+    value: formatUptime(serverOverview.value?.boot_time?.uptime_seconds || 0),
+  },
+]);
+
+function go(path: string) {
+  router.push(path);
+}
+
+function formatBytes(bytes: number) {
+  if (!bytes) return '0 B';
+  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+  const index = Math.min(
+    Math.floor(Math.log(bytes) / Math.log(1024)),
+    units.length - 1,
+  );
+  return `${(bytes / 1024 ** index).toFixed(1)} ${units[index]}`;
+}
+
+function formatMemory(gb: number) {
+  if (!gb) return '0 GB';
+  if (gb < 1) return `${Math.round(gb * 1024)} MB`;
+  return `${gb.toFixed(1)} GB`;
+}
+
+function formatSpeed(bytes: number) {
+  return `${formatBytes(bytes)}/s`;
+}
+
+function formatUptime(seconds: number) {
+  if (!seconds) return '-';
+  const days = Math.floor(seconds / 86_400);
+  const hours = Math.floor((seconds % 86_400) / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+  if (days > 0) return `${days}天 ${hours}小时`;
+  if (hours > 0) return `${hours}小时 ${minutes}分钟`;
+  return `${minutes}分钟`;
+}
+
+function formatTime(time?: string) {
+  if (!time) return '-';
+  const parsed = dayjs(time);
+  if (!parsed.isValid()) return time;
+  return parsed.format('MM-DD HH:mm');
+}
+
+function priorityType(priority: number) {
+  if (priority >= 2) return 'danger';
+  if (priority === 1) return 'warning';
+  return 'info';
+}
+
+function priorityLabel(priority: number) {
+  if (priority >= 2) return '紧急';
+  if (priority === 1) return '重要';
+  return '普通';
+}
+
+function messageTypeLabel(type: string) {
+  const labels: Record<string, string> = {
+    announcement: '公告',
+    system: '系统',
+    todo: '待办',
+    workflow: '流程',
+  };
+  return labels[type] || type || '消息';
+}
+
+function messageType(type: string) {
+  const map: Record<string, 'info' | 'primary' | 'success' | 'warning'> = {
+    announcement: 'success',
+    system: 'info',
+    todo: 'warning',
+    workflow: 'primary',
+  };
+  return map[type] || 'info';
+}
+
+function runStatusType(status: string) {
+  const map: Record<string, 'danger' | 'info' | 'primary' | 'success' | 'warning'> = {
+    completed: 'success',
+    failed: 'danger',
+    pending: 'warning',
+    running: 'primary',
+    stopped: 'info',
+  };
+  return map[status] || 'info';
+}
+
+function runStatusLabel(status: string) {
+  const labels: Record<string, string> = {
+    completed: '成功',
+    failed: '失败',
+    pending: '等待',
+    running: '运行中',
+    stopped: '已停止',
+  };
+  return labels[status] || status || '未知';
+}
+
+function progressColor(percent: number) {
+  if (percent >= 90) return 'var(--el-color-danger)';
+  if (percent >= 70) return 'var(--el-color-warning)';
+  return 'var(--el-color-success)';
+}
+
+async function loadAiMetrics() {
+  aiLoading.value = true;
+  try {
+    const [agents, workflows, runs, knowledge, models, providers] =
+      await Promise.allSettled([
+        getAgentListApi({ page: 1, pageSize: 1 }),
+        getWorkflowListApi({ page: 1, pageSize: 1 }),
+        getAllWorkflowRunsApi({ page: 1, pageSize: 1 }),
+        getKnowledgeBaseListApi({ page: 1, pageSize: 1 }),
+        getModelListApi({ page: 1, pageSize: 1 }),
+        getProviderListApi({ page: 1, pageSize: 1 }),
+      ]);
+    const values = [agents, workflows, runs, knowledge, models, providers].map(
+      (item) => (item.status === 'fulfilled' ? item.value.total || 0 : 0),
+    );
+    aiMetrics.value = aiMetrics.value.map((item, index) => ({
+      ...item,
+      value: values[index] || 0,
+    }));
+  } finally {
+    aiLoading.value = false;
+  }
+}
+
+async function loadContent() {
+  contentLoading.value = true;
+  try {
+    const [announcementRes, messageRes, runRes] = await Promise.allSettled([
+      getUserAnnouncementListApi({ page: 1, pageSize: 6 }),
+      getMessageListApi({ page: 1, pageSize: 6 }),
+      getAllWorkflowRunsApi({ page: 1, pageSize: 5 }),
+    ]);
+    announcements.value =
+      announcementRes.status === 'fulfilled'
+        ? announcementRes.value.items || []
+        : [];
+    messages.value =
+      messageRes.status === 'fulfilled' ? messageRes.value.items || [] : [];
+    workflowRuns.value =
+      runRes.status === 'fulfilled' ? runRes.value.items || [] : [];
+  } finally {
+    contentLoading.value = false;
+  }
+}
+
+async function loadMonitor(showLoading = false) {
+  if (showLoading) monitorLoading.value = true;
+  try {
+    const [overview, realtime] = await Promise.allSettled([
+      getServerOverviewApi(),
+      getRealtimeStatsApi(),
+    ]);
+    if (overview.status === 'fulfilled') serverOverview.value = overview.value;
+    if (realtime.status === 'fulfilled') realtimeStats.value = realtime.value;
+  } finally {
+    if (showLoading) monitorLoading.value = false;
+  }
+}
+
+async function loadWeather() {
+  weatherLoading.value = true;
+  try {
+    const response = await fetch(
+      'https://api.open-meteo.com/v1/forecast?latitude=39.9042&longitude=116.4074&current=temperature_2m,relative_humidity_2m,weather_code,wind_speed_10m,wind_direction_10m&timezone=auto',
+    );
+    if (!response.ok) return;
+    const data = await response.json();
+    if (data.current) {
+      weather.value = {
+        humidity: data.current.relative_humidity_2m,
+        temperature: data.current.temperature_2m,
+        weatherCode: data.current.weather_code,
+        windDirection: data.current.wind_direction_10m,
+        windSpeed: data.current.wind_speed_10m,
+      };
+    }
+  } finally {
+    weatherLoading.value = false;
+  }
+}
+
+onMounted(() => {
+  clockTimer = setInterval(() => {
+    now.value = new Date();
+  }, 1000);
+  monitorTimer = setInterval(() => loadMonitor(), 5000);
+  loadWeather();
+  loadAiMetrics();
+  loadContent();
+  loadMonitor(true);
+});
+
+onUnmounted(() => {
+  if (clockTimer) clearInterval(clockTimer);
+  if (monitorTimer) clearInterval(monitorTimer);
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <div class="control-center">
+      <section class="hero-panel">
+        <div class="hero-copy">
+          <div class="avatar">超</div>
+          <div>
+            <p class="eyebrow">AI Agent Admin</p>
+            <h1>{{ greeting }}，超级管理员</h1>
+            <p class="hero-subtitle">
+              聚焦智能体协作、流程编排、知识检索和基础权限治理。
+            </p>
+          </div>
+        </div>
+        <div class="hero-side">
+          <div class="time-card">
+            <span>{{ currentTime }}</span>
+            <small>{{ currentDate }}</small>
+          </div>
+          <div class="weather-card">
+            <ElSkeleton v-if="weatherLoading && !weather" animated>
+              <template #template>
+                <ElSkeletonItem variant="text" class="!h-8 !w-24" />
+                <ElSkeletonItem variant="text" class="!mt-3 !w-32" />
+              </template>
+            </ElSkeleton>
+            <template v-else-if="weather && currentWeather">
+              <component
+                :is="currentWeather.icon"
+                class="weather-icon"
+                :style="{ color: currentWeather.color }"
+              />
+              <div>
+                <strong>{{ Math.round(weather.temperature) }}°</strong>
+                <span>北京 · {{ currentWeather.label }}</span>
+                <small
+                  >湿度 {{ weather.humidity }}% · 风速
+                  {{ weather.windSpeed.toFixed(0) }} km/h</small
+                >
+              </div>
+            </template>
+            <template v-else>
+              <CloudSun class="weather-icon" />
+              <div>
+                <strong>-</strong>
+                <span>北京天气</span>
+                <small>暂时无法获取天气数据</small>
+              </div>
+            </template>
+          </div>
+        </div>
+      </section>
+
+      <section class="metrics-strip" v-loading="aiLoading">
+        <button
+          v-for="item in aiMetrics"
+          :key="item.key"
+          class="metric-item"
+          type="button"
+          @click="go(item.path)"
+        >
+          <span>{{ item.label }}</span>
+          <strong>{{ item.value }}</strong>
+        </button>
+      </section>
+
+      <section class="workspace-grid">
+        <div class="panel panel-large">
+          <div class="panel-heading">
+            <div>
+              <p class="eyebrow">Agent Workspace</p>
+              <h2>AI 协作入口</h2>
+            </div>
+            <Brain class="heading-icon" />
+          </div>
+          <div class="link-grid">
+            <button
+              v-for="item in aiLinks"
+              :key="item.path"
+              class="quick-link"
+              :class="`tone-${item.tone}`"
+              type="button"
+              @click="go(item.path)"
+            >
+              <span class="quick-icon">
+                <component :is="item.icon" />
+              </span>
+              <span class="quick-text">
+                <strong>{{ item.label }}</strong>
+                <small>{{ item.description }}</small>
+              </span>
+            </button>
+          </div>
+        </div>
+
+        <div class="panel">
+          <div class="panel-heading">
+            <div>
+              <p class="eyebrow">Governance</p>
+              <h2>基础管理</h2>
+            </div>
+            <LayoutDashboard class="heading-icon" />
+          </div>
+          <div class="compact-links">
+            <button
+              v-for="item in adminLinks"
+              :key="item.path"
+              class="compact-link"
+              type="button"
+              @click="go(item.path)"
+            >
+              <span :class="`compact-icon tone-${item.tone}`">
+                <component :is="item.icon" />
+              </span>
+              <span>
+                <strong>{{ item.label }}</strong>
+                <small>{{ item.description }}</small>
+              </span>
+            </button>
+          </div>
+        </div>
+
+        <div class="panel">
+          <div class="panel-heading">
+            <div>
+              <p class="eyebrow">Operations</p>
+              <h2>运行监控</h2>
+            </div>
+            <span class="host-info">
+              {{ serverOverview?.basic_info?.hostname || '-' }}
+            </span>
+          </div>
+          <div v-loading="monitorLoading" class="monitor-grid">
+            <div
+              v-for="item in monitorCards"
+              :key="item.label"
+              class="monitor-card"
+            >
+              <div class="monitor-head">
+                <span class="monitor-icon" :style="{ color: item.color }">
+                  <component :is="item.icon" />
+                </span>
+                <span>{{ item.label }}</span>
+              </div>
+              <strong>{{ item.value }}</strong>
+              <ElProgress
+                v-if="item.percentage > 0"
+                :percentage="Number(item.percentage.toFixed(1))"
+                :color="progressColor(item.percentage)"
+                :show-text="false"
+                :stroke-width="5"
+              />
+              <small>{{ item.meta }}</small>
+            </div>
+          </div>
+        </div>
+
+        <div class="panel">
+          <div class="panel-heading">
+            <div>
+              <p class="eyebrow">Notice</p>
+              <h2>最新公告</h2>
+            </div>
+            <ElButton text type="primary" @click="go('/message/announcement')">
+              查看
+            </ElButton>
+          </div>
+          <div v-loading="contentLoading" class="feed-list">
+            <button
+              v-for="item in announcements"
+              :key="item.id"
+              class="feed-item"
+              type="button"
+              @click="go('/message/announcement')"
+            >
+              <FileText class="feed-icon" />
+              <span>
+                <strong>{{ item.title }}</strong>
+                <small>{{ item.summary || item.publisher_name }}</small>
+              </span>
+              <ElTag :type="priorityType(item.priority)" size="small">
+                {{ priorityLabel(item.priority) }}
+              </ElTag>
+            </button>
+            <ElEmpty
+              v-if="!contentLoading && announcements.length === 0"
+              description="暂无公告"
+              :image-size="72"
+            />
+          </div>
+        </div>
+
+        <div class="panel">
+          <div class="panel-heading">
+            <div>
+              <p class="eyebrow">Inbox</p>
+              <h2>消息通知</h2>
+            </div>
+            <ElButton text type="primary" @click="go('/message/list')">
+              查看
+            </ElButton>
+          </div>
+          <div v-loading="contentLoading" class="feed-list">
+            <button
+              v-for="item in messages"
+              :key="item.id"
+              class="feed-item"
+              type="button"
+              @click="go('/message/list')"
+            >
+              <MessageSquare class="feed-icon" />
+              <span>
+                <strong>{{ item.title }}</strong>
+                <small>{{ formatTime(item.created_at) }}</small>
+              </span>
+              <ElTag :type="messageType(item.msg_type)" size="small">
+                {{ messageTypeLabel(item.msg_type) }}
+              </ElTag>
+            </button>
+            <ElEmpty
+              v-if="!contentLoading && messages.length === 0"
+              description="暂无消息"
+              :image-size="72"
+            />
+          </div>
+        </div>
+
+        <div class="panel panel-wide">
+          <div class="panel-heading">
+            <div>
+              <p class="eyebrow">Runs</p>
+              <h2>最近执行</h2>
+            </div>
+            <ElButton text type="primary" @click="go('/ai-platform/workflow-runs')">
+              查看
+            </ElButton>
+          </div>
+          <div v-loading="contentLoading" class="run-list">
+            <button
+              v-for="item in workflowRuns"
+              :key="item.id"
+              class="run-item"
+              type="button"
+              @click="go('/ai-platform/workflow-runs')"
+            >
+              <span>
+                <strong>{{ item.workflow_name }}</strong>
+                <small>
+                  {{ formatTime(item.started_at) }} ·
+                  {{ item.total_steps }} 步 ·
+                  {{ item.total_tokens }} Token
+                </small>
+              </span>
+              <span class="run-meta">
+                <small>{{ item.elapsed_time?.toFixed?.(2) || 0 }}s</small>
+                <ElTag :type="runStatusType(item.status)" size="small">
+                  {{ runStatusLabel(item.status) }}
+                </ElTag>
+              </span>
+            </button>
+            <ElEmpty
+              v-if="!contentLoading && workflowRuns.length === 0"
+              description="暂无执行记录"
+              :image-size="72"
+            />
+          </div>
+        </div>
+      </section>
+    </div>
+  </Page>
+</template>
+
+<style scoped>
+.control-center {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-height: calc(100vh - 120px);
+  padding: 2px;
+  color: var(--el-text-color-primary);
+}
+
+.hero-panel,
+.panel,
+.metrics-strip {
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 8px;
+  background: var(--el-bg-color);
+  box-shadow: 0 1px 2px rgb(15 23 42 / 5%);
+}
+
+.hero-panel {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(360px, 480px);
+  gap: 18px;
+  overflow: hidden;
+  padding: 24px;
+  background:
+    linear-gradient(135deg, rgb(37 99 235 / 8%), transparent 32%),
+    linear-gradient(115deg, rgb(16 185 129 / 8%), transparent 42%),
+    var(--el-bg-color);
+}
+
+.hero-copy,
+.hero-side,
+.weather-card {
+  display: flex;
+  align-items: center;
+}
+
+.hero-copy {
+  gap: 16px;
+}
+
+.avatar {
+  display: grid;
+  flex: 0 0 56px;
+  width: 56px;
+  height: 56px;
+  place-items: center;
+  border-radius: 18px;
+  color: #f8fafc;
+  font-size: 24px;
+  font-weight: 700;
+  background: #2563eb;
+}
+
+.eyebrow {
+  margin: 0 0 4px;
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.hero-panel h1,
+.panel h2 {
+  margin: 0;
+  font-weight: 700;
+  letter-spacing: 0;
+}
+
+.hero-panel h1 {
+  font-size: 26px;
+  line-height: 1.25;
+}
+
+.hero-subtitle {
+  max-width: 58ch;
+  margin: 8px 0 0;
+  color: var(--el-text-color-regular);
+  font-size: 14px;
+}
+
+.hero-side {
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+.time-card,
+.weather-card {
+  min-height: 92px;
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 8px;
+  background: rgb(248 250 252 / 72%);
+}
+
+.time-card {
+  display: flex;
+  min-width: 154px;
+  flex-direction: column;
+  justify-content: center;
+  padding: 16px;
+}
+
+.time-card span,
+.weather-card strong {
+  font-size: 28px;
+  font-weight: 750;
+  line-height: 1;
+}
+
+.time-card small,
+.weather-card small,
+.weather-card span {
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+}
+
+.weather-card {
+  flex: 1;
+  min-width: 190px;
+  gap: 12px;
+  padding: 16px;
+}
+
+.weather-card > div {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  min-width: 0;
+}
+
+.weather-icon {
+  flex: 0 0 38px;
+  width: 38px;
+  height: 38px;
+}
+
+.metrics-strip {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 1px;
+  overflow: hidden;
+  padding: 0;
+}
+
+.metric-item {
+  display: flex;
+  min-height: 78px;
+  flex-direction: column;
+  justify-content: center;
+  border: 0;
+  border-right: 1px solid var(--el-border-color-lighter);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  text-align: left;
+  padding: 14px 18px;
+}
+
+.metric-item:last-child {
+  border-right: 0;
+}
+
+.metric-item:hover {
+  background: var(--el-fill-color-lighter);
+}
+
+.metric-item span {
+  color: var(--el-text-color-secondary);
+  font-size: 13px;
+}
+
+.metric-item strong {
+  margin-top: 8px;
+  font-size: 24px;
+  line-height: 1;
+}
+
+.workspace-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
+  gap: 16px;
+  align-items: start;
+}
+
+.panel {
+  min-width: 0;
+  padding: 18px;
+}
+
+.panel-large {
+  grid-row: span 2;
+}
+
+.panel-wide {
+  grid-column: 1 / -1;
+}
+
+.panel-heading {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.panel-heading h2 {
+  font-size: 18px;
+}
+
+.heading-icon,
+.host-info {
+  color: var(--el-text-color-secondary);
+}
+
+.heading-icon {
+  width: 22px;
+  height: 22px;
+}
+
+.host-info {
+  max-width: 180px;
+  overflow: hidden;
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.link-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.quick-link,
+.compact-link,
+.feed-item {
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 8px;
+  background: var(--el-fill-color-blank);
+  color: inherit;
+  cursor: pointer;
+  text-align: left;
+  transition:
+    border-color 0.18s ease,
+    transform 0.18s ease,
+    background-color 0.18s ease;
+}
+
+.quick-link:hover,
+.compact-link:hover,
+.feed-item:hover {
+  border-color: var(--el-color-primary-light-5);
+  background: var(--el-fill-color-lighter);
+  transform: translateY(-1px);
+}
+
+.quick-link {
+  display: flex;
+  min-height: 106px;
+  gap: 14px;
+  padding: 16px;
+}
+
+.quick-icon,
+.compact-icon,
+.monitor-icon {
+  display: grid;
+  flex: 0 0 auto;
+  place-items: center;
+  border-radius: 8px;
+}
+
+.quick-icon {
+  width: 40px;
+  height: 40px;
+}
+
+.quick-icon svg,
+.compact-icon svg,
+.monitor-icon svg {
+  width: 18px;
+  height: 18px;
+}
+
+.quick-text,
+.compact-link span:last-child,
+.feed-item span {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.quick-text strong,
+.compact-link strong,
+.feed-item strong {
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.quick-text small,
+.compact-link small,
+.feed-item small,
+.monitor-card small {
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.compact-links,
+.feed-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.compact-link {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 68px;
+  padding: 12px;
+}
+
+.compact-icon {
+  width: 34px;
+  height: 34px;
+}
+
+.monitor-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.monitor-card {
+  display: flex;
+  min-height: 128px;
+  flex-direction: column;
+  justify-content: space-between;
+  border-radius: 8px;
+  background: var(--el-fill-color-lighter);
+  padding: 14px;
+}
+
+.monitor-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+}
+
+.monitor-card strong {
+  margin: 8px 0;
+  font-size: 20px;
+}
+
+.monitor-icon {
+  width: 28px;
+  height: 28px;
+  background: var(--el-bg-color);
+}
+
+.feed-item {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 12px;
+  min-height: 66px;
+  padding: 12px;
+}
+
+.feed-item strong,
+.feed-item small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.feed-icon {
+  width: 18px;
+  height: 18px;
+  color: var(--el-color-primary);
+}
+
+.run-list {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.run-item {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 12px;
+  min-height: 72px;
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 8px;
+  background: var(--el-fill-color-blank);
+  color: inherit;
+  cursor: pointer;
+  padding: 12px 14px;
+  text-align: left;
+}
+
+.run-item:hover {
+  border-color: var(--el-color-primary-light-5);
+  background: var(--el-fill-color-lighter);
+}
+
+.run-item > span,
+.run-meta {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.run-item strong,
+.run-item small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.run-item strong {
+  font-size: 14px;
+}
+
+.run-item small {
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+}
+
+.run-meta {
+  align-items: flex-end;
+}
+
+.quick-link.tone-blue .quick-icon,
+.compact-icon.tone-blue {
+  background: rgb(37 99 235 / 10%);
+  color: #2563eb;
+}
+
+.quick-link.tone-green .quick-icon,
+.compact-icon.tone-green {
+  background: rgb(22 163 74 / 10%);
+  color: #16a34a;
+}
+
+.quick-link.tone-violet .quick-icon,
+.compact-icon.tone-violet {
+  background: rgb(124 58 237 / 10%);
+  color: #7c3aed;
+}
+
+.quick-link.tone-cyan .quick-icon,
+.compact-icon.tone-cyan {
+  background: rgb(8 145 178 / 10%);
+  color: #0891b2;
+}
+
+.quick-link.tone-amber .quick-icon,
+.compact-icon.tone-amber {
+  background: rgb(217 119 6 / 12%);
+  color: #d97706;
+}
+
+.quick-link.tone-rose .quick-icon,
+.compact-icon.tone-rose {
+  background: rgb(225 29 72 / 10%);
+  color: #e11d48;
+}
+
+@media (max-width: 1280px) {
+  .hero-panel,
+  .workspace-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .hero-side {
+    justify-content: stretch;
+  }
+
+  .panel-large {
+    grid-row: auto;
+  }
+}
+
+@media (max-width: 900px) {
+  .metrics-strip,
+  .link-grid,
+  .monitor-grid,
+  .run-list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .hero-side {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+
+@media (max-width: 640px) {
+  .hero-panel,
+  .panel {
+    padding: 14px;
+  }
+
+  .hero-copy {
+    align-items: flex-start;
+  }
+
+  .avatar {
+    width: 44px;
+    height: 44px;
+    flex-basis: 44px;
+    border-radius: 14px;
+    font-size: 18px;
+  }
+
+  .hero-panel h1 {
+    font-size: 21px;
+  }
+
+  .metrics-strip,
+  .link-grid,
+  .monitor-grid,
+  .run-list {
+    grid-template-columns: 1fr;
+  }
+
+  .metric-item {
+    border-right: 0;
+    border-bottom: 1px solid var(--el-border-color-lighter);
+  }
+
+  .metric-item:last-child {
+    border-bottom: 0;
+  }
+}
+</style>