diff --git a/web/apps/web-ele/src/locales/index.ts b/web/apps/web-ele/src/locales/index.ts
index ca526aa..5db1910 100644
--- a/web/apps/web-ele/src/locales/index.ts
+++ b/web/apps/web-ele/src/locales/index.ts
@@ -32,10 +32,12 @@ 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',
   './langs/zh-CN/role.json',
+  './langs/zh-CN/system-config.json',
   './langs/zh-CN/system.json',
   './langs/zh-CN/user.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 be8e73e..08b367f 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
@@ -9,6 +9,8 @@
   "codex": "Codex",
   "startChat": "开始聊天",
   "systemManagement": "系统管理",
+  "applicationManagement": "应用管理",
+  "systemMonitoring": "系统监控",
   "userManagement": "用户管理",
   "roleManagement": "角色权限",
   "permissionManagement": "API管理",
diff --git a/web/apps/web-ele/src/router/access.ts b/web/apps/web-ele/src/router/access.ts
index b53012d..2b0a940 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 = 'control-center/index';
+  normalized.component = 'online-dev/page-render/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/control-center/index.vue',
+    '../views/online-dev/page-render/index.vue',
   ]);
 
   const layoutMap: ComponentRecordType = {
diff --git a/web/apps/web-ele/src/utils/legacy-home.ts b/web/apps/web-ele/src/utils/legacy-home.ts
index 469a4fa..4d1f25a 100644
--- a/web/apps/web-ele/src/utils/legacy-home.ts
+++ b/web/apps/web-ele/src/utils/legacy-home.ts
@@ -1,7 +1,6 @@
 import { preferences } from '@vben/preferences';
 
 const LEGACY_HOME_PATTERNS = [
-  /^\/page-render\/main_home$/,
   /^\/app\/[^/]+\/form-render\//,
   /^\/form-render\//,
   /^\/online-dev(?:\/|$)/,
diff --git a/web/apps/web-ele/src/views/_core/menu/modules/menu-form.vue b/web/apps/web-ele/src/views/_core/menu/modules/menu-form.vue
index 74badbe..5e12c4d 100644
--- a/web/apps/web-ele/src/views/_core/menu/modules/menu-form.vue
+++ b/web/apps/web-ele/src/views/_core/menu/modules/menu-form.vue
@@ -92,37 +92,27 @@ const BadgeVariants = [
   'outline',
 ];
 
-const componentKeys: string[] = Object.keys(
-  import.meta.glob([
-    '../../../_core/agent-chat/**/*.vue',
-    '../../../_core/announcement/index.vue',
-    '../../../_core/announcement/list.vue',
-    '../../../_core/authentication/login.vue',
-    '../../../_core/authentication/oauth-callback.vue',
-    '../../../_core/fallback/**/*.vue',
-    '../../../_core/menu/index.vue',
-    '../../../_core/permission/index.vue',
-    '../../../_core/role/index.vue',
-    '../../../_core/user/index.vue',
-    '../../../ai-platform/agent/editor/index.vue',
-    '../../../ai-platform/agent/index.vue',
-    '../../../ai-platform/knowledge/detail/index.vue',
-    '../../../ai-platform/knowledge/index.vue',
-    '../../../ai-platform/model/index.vue',
-    '../../../ai-platform/workflow/editor/index.vue',
-    '../../../ai-platform/workflow/index.vue',
-    '../../../ai-platform/workflow-runs/index.vue',
-    '../../../online-dev/page-render/index.vue',
-  ]),
-)
-  .filter((item) => !item.includes('/modules/'))
-  .map((v) => {
-    const path = v
-      .replace('../../../_core/', '/_core/')
-      .replace('../../../ai-platform/', '/ai-platform/')
-      .replace('../../../online-dev/', '/online-dev/');
-    return path.endsWith('.vue') ? path.slice(0, -4) : path;
-  });
+const componentKeys = [
+  '/_core/agent-chat/index',
+  '/_core/announcement/index',
+  '/_core/announcement/list',
+  '/_core/authentication/login',
+  '/_core/authentication/oauth-callback',
+  '/_core/fallback/forbidden',
+  '/_core/fallback/not-found',
+  '/_core/menu/index',
+  '/_core/message/index',
+  '/_core/permission/index',
+  '/_core/role/index',
+  '/_core/user/index',
+  '/ai-platform/agent/index',
+  '/ai-platform/knowledge/detail/index',
+  '/ai-platform/knowledge/index',
+  '/ai-platform/model/index',
+  '/ai-platform/workflow/index',
+  '/ai-platform/workflow-runs/index',
+  '/online-dev/page-render/index',
+];
 
 function getFormSchema(
   getCurrentMenuId: () => string | undefined,
diff --git a/web/apps/web-ele/src/views/control-center/index.vue b/web/apps/web-ele/src/views/control-center/index.vue
deleted file mode 100644
index 1d1ae04..0000000
--- a/web/apps/web-ele/src/views/control-center/index.vue
+++ /dev/null
@@ -1,1309 +0,0 @@
-<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>