Add lightweight AI admin dashboard

web/apps/web-ele/src/components/ChatBox/types.ts

@@ -99,7 +99,6 @@ export type DesignPreviewType =
   | 'knowledge_retrieval'
   | 'list_config'
   | 'llm_config'
-  | 'system_summary'
   | 'workflow_result';
 
 // 设计预览配置

web/apps/web-ele/src/components/ai-chat-panel/types.ts

@@ -57,19 +57,11 @@ export interface AgentInfo {
 /** 设计预览类型 */
 export type DesignPreviewType =
   | 'agent_capability'
-  | 'app_design'
-  | 'app_settings'
-  | 'dashboard_basic_info'
-  | 'dashboard_design'
-  | 'dashboard_publish'
   | 'database_design'
-  | 'form_basic_info'
-  | 'form_ui_design'
   | 'knowledge_retrieval'
   | 'list_config'
   | 'llm_config'
-  | 'workflow_result'
-  | 'system_summary';
+  | 'workflow_result';
 
 /** 设计预览数据 */
 export interface DesignPreviewData {

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',

web/apps/web-ele/src/preferences.ts

@@ -16,7 +16,7 @@ export const overridesPreferences = defineOverridesPreferences({
     enablePreferences: false,
     accessMode: 'mixed',
     authPageLayout: 'panel-center',
-    defaultHomePath: '/page-render/main_home',
+    defaultHomePath: '/dashboard',
     layout: 'header-sidebar-nav',
   },
   shortcutKeys: {

web/apps/web-ele/src/router/access.ts

@@ -16,6 +16,7 @@ const forbiddenComponent = () => import('#/views/_core/fallback/forbidden.vue');
 const lightMenuNames = new Set([
   'AIAgent',
   'AIKnowledgeDetail',
+  'AIModelConfig',
   'AIPlatform',
   'AIWorkflow',
   'AIWorkflowRuns',
@@ -82,8 +83,8 @@ function normalizeBackendRoute<
   if (route.name !== 'ControlCenter') return route;
 
   const normalized = { ...route };
-  normalized.path = '/page-render/main_home';
-  normalized.component = 'online-dev/page-render/index';
+  normalized.path = '/dashboard';
+  normalized.component = 'dashboard/index';
   normalized.query = undefined;
   return normalized;
 }
@@ -158,7 +159,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/dashboard/index.vue',
   ]);
 
   const layoutMap: ComponentRecordType = {

web/apps/web-ele/src/router/guard.ts

@@ -191,7 +191,7 @@ function setupAccessGuard(router: Router) {
 
       if (to.path === subAppRootPath) {
         const defaultHome =
-          preferences.app.defaultHomePath || '/page-render/main_home';
+          preferences.app.defaultHomePath || '/dashboard';
         // 确保路径包含子应用前缀
         const subAppTargetPath = defaultHome.startsWith(subAppRootPath)
           ? defaultHome

web/apps/web-ele/src/router/routes/modules/ai-platform.ts

@@ -1,12 +1,27 @@
 import type { RouteRecordRaw } from 'vue-router';
 
 const routes: RouteRecordRaw[] = [
+  {
+    meta: { hideInMenu: true },
+    name: 'LegacyMainHomeRedirect',
+    path: '/page-render/main_home',
+    redirect: '/dashboard',
+  },
   {
     meta: { hideInMenu: true },
     name: 'AIKnowledgeLegacyRedirect',
     path: '/ai-platform/knowledge',
     redirect: '/ai-platform/knowledge-base',
   },
+  {
+    meta: {
+      hideInMenu: true,
+      title: '模型配置',
+    },
+    name: 'AIModelConfig',
+    path: '/ai-platform/model',
+    component: () => import('#/views/ai-platform/model/index.vue'),
+  },
   {
     meta: { hideInMenu: true },
     name: 'AIKnowledgeLegacyDetailRedirect',

web/apps/web-ele/src/utils/legacy-home.ts

@@ -1,6 +1,7 @@
 import { preferences } from '@vben/preferences';
 
 const LEGACY_HOME_PATTERNS = [
+  /^\/page-render\/main_home$/,
   /^\/app\/[^/]+\/form-render\//,
   /^\/form-render\//,
   /^\/online-dev(?:\/|$)/,

web/apps/web-ele/src/views/_core/menu/modules/menu-form.vue

@@ -112,7 +112,7 @@ const componentKeys: string[] = Object.keys(
     '../../../ai-platform/workflow/editor/index.vue',
     '../../../ai-platform/workflow/index.vue',
     '../../../ai-platform/workflow-runs/index.vue',
-    '../../../online-dev/page-render/index.vue',
+    '../../../dashboard/index.vue',
   ]),
 )
   .filter((item) => !item.includes('/modules/'))
@@ -120,7 +120,7 @@ const componentKeys: string[] = Object.keys(
     const path = v
       .replace('../../../_core/', '/_core/')
       .replace('../../../ai-platform/', '/ai-platform/')
-      .replace('../../../online-dev/', '/online-dev/');
+      .replace('../../../dashboard/', '/dashboard/');
     return path.endsWith('.vue') ? path.slice(0, -4) : path;
   });
 

web/apps/web-ele/src/views/_core/ui-config/modules/app-settings-form.vue

@@ -53,7 +53,7 @@ const appDynamicTitle = ref(true);
 const appWatermark = ref(false);
 const appWatermarkContent = ref('');
 const appEnableCheckUpdates = ref(true);
-const appDefaultHomePath = ref('/analytics');
+const appDefaultHomePath = ref('/dashboard');
 const appEnablePreferences = ref(true);
 
 const footerEnable = ref(true);
@@ -106,7 +106,7 @@ function getDefaultConfig() {
       defaultHomePath:
         overrides.app?.defaultHomePath ||
         preferences.app.defaultHomePath ||
-        '/page-render/main_home',
+        '/dashboard',
       enablePreferences: overrides.app?.enablePreferences ?? true,
     },
     footer: {
@@ -233,7 +233,7 @@ async function loadConfig() {
 
 // 获取带子应用前缀的首页路径
 function getDefaultHomePathWithPrefix(): string {
-  const path = appDefaultHomePath.value || '/analytics';
+  const path = appDefaultHomePath.value || '/dashboard';
   const appCode = appContextStore.appCode;
   // 如果是子应用模式且路径不包含子应用前缀，自动添加
   if (appCode && !path.startsWith(`/app/${appCode}`)) {

web/apps/web-ele/src/views/ai-platform/workflow/editor/components/VariableSelector.vue

@@ -2,20 +2,15 @@
 import { computed, ref } from 'vue';
 
 import {
-  AppWindow,
   BookOpen,
   Bot,
   ChevronDown,
   ChevronRight,
   CircleHelp,
-  ClipboardCheck,
   Code,
   Combine,
-  Database,
-  FileText,
   Globe,
   HelpCircle,
-  LayoutDashboard,
   LayoutTemplate,
   ListChecks,
   MessageSquareText,
@@ -38,6 +33,26 @@ const { nodes, edges } = useVueFlow();
 const searchQuery = ref('');
 const collapsedNodes = ref<Set<string>>(new Set());
 
+const lightWorkflowNodeTypes = new Set([
+  'start',
+  'llm',
+  'http',
+  'code',
+  'condition',
+  'template',
+  'parallel',
+  'merge',
+  'question',
+  'choice',
+  'message',
+  'confirm',
+  'intent',
+  'loop',
+  'subflow',
+  'knowledge_retrieval',
+  'end',
+]);
+
 // 定义不同节点的图标
 const icons: any = {
   start: Play,
@@ -57,21 +72,9 @@ const icons: any = {
   // 合并节点
   merge: Combine,
   // 表单节点
-  form_basic_info: FileText,
-  form_database_design: Database,
-  form_database_create: Database,
   // 应用节点
-  app_create: AppWindow,
-  app_design: LayoutDashboard,
-  app_settings: LayoutDashboard,
-  app_update: LayoutDashboard,
   // 仪表盘节点
-  dashboard_basic_info: LayoutDashboard,
-  dashboard_design: LayoutDashboard,
-  dashboard_create: LayoutDashboard,
-  dashboard_publish: LayoutDashboard,
   // 系统总结节点
-  system_summary: ClipboardCheck,
   // 子流程节点
   subflow: Play,
   // 知识库检索节点
@@ -125,98 +128,17 @@ const availableNodes = computed(() => {
 
   // 只保留上游节点
   return nodes.value
-    .filter((n) => upstreamIds.has(n.id) && n.type !== 'end')
+    .filter(
+      (n) =>
+        upstreamIds.has(n.id) &&
+        lightWorkflowNodeTypes.has(n.type) &&
+        n.type !== 'end',
+    )
     .map((node) => {
       let variables: any[] = [];
 
       // 根据节点类型获取输出变量 schema
       switch (node.type) {
-        case 'app_create': {
-          variables = [
-            {
-              key: 'app_id',
-              label: $t('ai-platform.workflow.editor.variableSelector.appId'),
-            },
-            {
-              key: 'app_code',
-              label: $t('ai-platform.workflow.editor.variableSelector.appCode'),
-            },
-            {
-              key: 'app_name',
-              label: $t('ai-platform.workflow.editor.variableSelector.appName'),
-            },
-            {
-              key: 'success',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.createSuccess',
-              ),
-            },
-          ];
-          break;
-        }
-        case 'app_design': {
-          variables = [
-            {
-              key: 'design_content',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.designContent',
-              ),
-            },
-            {
-              key: 'design_title',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.designTitle',
-              ),
-            },
-            {
-              key: 'confirmed',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.isConfirmed',
-              ),
-            },
-          ];
-          break;
-        }
-        case 'app_settings': {
-          variables = [
-            {
-              key: 'settings',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.appSettings',
-              ),
-            },
-            {
-              key: 'confirmed',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.isConfirmed',
-              ),
-            },
-          ];
-          break;
-        }
-        case 'app_update': {
-          variables = [
-            {
-              key: 'update_success',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.updateSuccess',
-              ),
-            },
-            {
-              key: 'config_id',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.configId',
-              ),
-            },
-            {
-              key: 'update_message',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.updateMessage',
-              ),
-            },
-          ];
-          break;
-        }
         case 'choice': {
           const choiceVar = node.data.variable_name || 'user_choice';
           variables = [
@@ -272,385 +194,6 @@ const availableNodes = computed(() => {
           ];
           break;
         }
-        case 'dashboard_basic_info': {
-          variables = [
-            {
-              key: 'dashboard_basic_info',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.dashboardBasicInfo',
-              ),
-            },
-            {
-              key: 'dashboard_name',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.dashboardName',
-              ),
-            },
-            {
-              key: 'dashboard_code',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.dashboardCode',
-              ),
-            },
-          ];
-          break;
-        }
-        case 'dashboard_create': {
-          variables = [
-            {
-              key: 'dashboard_id',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.dashboardId',
-              ),
-            },
-            {
-              key: 'dashboard_code',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.dashboardCode',
-              ),
-            },
-            {
-              key: 'page_meta',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.pageMeta',
-              ),
-            },
-          ];
-          break;
-        }
-        case 'dashboard_design': {
-          variables = [
-            {
-              key: 'page_config',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.pageConfig',
-              ),
-            },
-            {
-              key: 'design_title',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.designTitle',
-              ),
-            },
-            {
-              key: 'confirmed',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.isConfirmed',
-              ),
-            },
-          ];
-          break;
-        }
-        case 'dashboard_publish': {
-          variables = [
-            {
-              key: 'menu_id',
-              label: $t('ai-platform.workflow.editor.variableSelector.menuId'),
-            },
-            {
-              key: 'route_path',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.routePath',
-              ),
-            },
-            {
-              key: 'publish_result',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.publishResult',
-              ),
-            },
-          ];
-          break;
-        }
-        case 'db_delete': {
-          const deleteOutputVar = node.data.output_variable || 'delete_result';
-          variables = [
-            {
-              key: deleteOutputVar,
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.deleteResult',
-              ),
-            },
-            {
-              key: `${deleteOutputVar}_count`,
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.affectedRows',
-              ),
-            },
-          ];
-          break;
-        }
-        case 'db_insert': {
-          const insertOutputVar = node.data.output_variable || 'insert_result';
-          variables = [
-            {
-              key: insertOutputVar,
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.insertResult',
-              ),
-            },
-            {
-              key: `${insertOutputVar}_id`,
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.insertId',
-              ),
-            },
-          ];
-          break;
-        }
-        case 'db_query': {
-          const queryOutputVar = node.data.output_variable || 'query_result';
-          variables = [
-            {
-              key: queryOutputVar,
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.queryResult',
-              ),
-            },
-            {
-              key: `${queryOutputVar}_count`,
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.resultCount',
-              ),
-            },
-          ];
-          break;
-        }
-        case 'db_sql': {
-          const sqlOutputVar = node.data.output_variable || 'sql_result';
-          variables = [
-            {
-              key: sqlOutputVar,
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.sqlResult',
-              ),
-            },
-            {
-              key: `${sqlOutputVar}_count`,
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.resultCount',
-              ),
-            },
-          ];
-          break;
-        }
-        case 'db_update': {
-          const updateOutputVar = node.data.output_variable || 'update_result';
-          variables = [
-            {
-              key: updateOutputVar,
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.updateResult',
-              ),
-            },
-            {
-              key: `${updateOutputVar}_count`,
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.affectedRows',
-              ),
-            },
-          ];
-          break;
-        }
-        case 'form_basic_info': {
-          variables = [
-            {
-              key: 'form_basic_info',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.formBasicInfoObj',
-              ),
-            },
-            {
-              key: 'form_name',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.formName',
-              ),
-            },
-            {
-              key: 'form_code',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.formCode',
-              ),
-            },
-            {
-              key: 'form_type',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.formType',
-              ),
-            },
-            {
-              key: 'form_description',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.formDescription',
-              ),
-            },
-            {
-              key: 'form_sort',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.formSort',
-              ),
-            },
-          ];
-          break;
-        }
-        case 'form_create': {
-          variables = [
-            {
-              key: 'form_id',
-              label: $t('ai-platform.workflow.editor.variableSelector.formId'),
-            },
-            {
-              key: 'form_code',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.formCode',
-              ),
-            },
-            {
-              key: 'form_meta',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.formMeta',
-              ),
-            },
-          ];
-          break;
-        }
-        case 'form_database_create': {
-          variables = [
-            {
-              key: 'creation_result',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.creationResult',
-              ),
-            },
-            {
-              key: 'all_tables_ready',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.allTablesReady',
-              ),
-            },
-            {
-              key: 'created_count',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.createdCount',
-              ),
-            },
-            {
-              key: 'error_count',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.errorCount',
-              ),
-            },
-            {
-              key: 'schema_name',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.schemaName',
-              ),
-            },
-            {
-              key: 'table_name',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.tableName',
-              ),
-            },
-          ];
-          break;
-        }
-        case 'form_database_design': {
-          variables = [
-            {
-              key: 'database_design',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.dbDesignObj',
-              ),
-            },
-            {
-              key: 'table_name',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.tableName',
-              ),
-            },
-            {
-              key: 'field_count',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.fieldCount',
-              ),
-            },
-          ];
-          break;
-        }
-        case 'form_list_design': {
-          variables = [
-            {
-              key: 'list_config',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.listConfig',
-              ),
-            },
-            {
-              key: 'query_field_count',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.queryFieldCount',
-              ),
-            },
-            {
-              key: 'column_count',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.columnCount',
-              ),
-            },
-          ];
-          break;
-        }
-        case 'form_publish': {
-          variables = [
-            {
-              key: 'menu_id',
-              label: $t('ai-platform.workflow.editor.variableSelector.menuId'),
-            },
-            {
-              key: 'route_path',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.routePath',
-              ),
-            },
-            {
-              key: 'publish_result',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.publishResult',
-              ),
-            },
-          ];
-          break;
-        }
-        case 'form_ui_design': {
-          variables = [
-            {
-              key: 'form_ui_design',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.formUiDesign',
-              ),
-            },
-            {
-              key: 'form_code',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.formCode',
-              ),
-            },
-            {
-              key: 'field_count',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.fieldCount',
-              ),
-            },
-            {
-              key: 'group_count',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.groupCount',
-              ),
-            },
-          ];
-          break;
-        }
         case 'http': {
           variables = [
             {
@@ -828,45 +371,6 @@ const availableNodes = computed(() => {
           ];
           break;
         }
-        case 'snowflake_cortex_analyst': {
-          const analystResultVar =
-            node.data.output_variable || 'analyst_result';
-          const analystSqlVar = node.data.sql_variable || 'analyst_sql';
-          variables = [
-            {
-              key: analystResultVar,
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.queryResultData',
-              ),
-            },
-            {
-              key: analystSqlVar,
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.generatedSql',
-              ),
-            },
-            {
-              key: `${analystResultVar}_raw`,
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.rawResponse',
-              ),
-            },
-          ];
-          break;
-        }
-        // Snowflake Cortex 节点
-        case 'snowflake_cortex_llm': {
-          const cortexLlmVar = node.data.output_variable || 'cortex_response';
-          variables = [
-            {
-              key: cortexLlmVar,
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.cortexLlmResponse',
-              ),
-            },
-          ];
-          break;
-        }
         case 'start': {
           // 默认的系统变量
           variables = [
@@ -957,33 +461,6 @@ const availableNodes = computed(() => {
           }
           break;
         }
-        case 'system_summary': {
-          variables = [
-            {
-              key: 'summary',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.summaryData',
-              ),
-            },
-            {
-              key: 'total_forms',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.totalForms',
-              ),
-            },
-            {
-              key: 'has_app',
-              label: $t('ai-platform.workflow.editor.variableSelector.hasApp'),
-            },
-            {
-              key: 'has_dashboard',
-              label: $t(
-                'ai-platform.workflow.editor.variableSelector.hasDashboard',
-              ),
-            },
-          ];
-          break;
-        }
         case 'template': {
           const templateOutputVar =
             node.data.output_variable || 'template_result';

web/apps/web-ele/src/views/dashboard/index.vue

@@ -0,0 +1,802 @@
+<script setup lang="ts">
+import type {
+  AgentListItem,
+  KnowledgeBaseListItem,
+  ModelListItem,
+  WorkflowListItem,
+  WorkflowRunListItem,
+} from '#/api/ai-platform/ai-platform';
+import type { UserAnnouncement } from '#/api/core/announcement';
+
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { Page } from '@vben/common-ui';
+import {
+  Bot,
+  BrainCircuit,
+  CheckCircle2,
+  Cpu,
+  Database,
+  GitMerge,
+  HardDrive,
+  LayoutDashboard,
+  Mail,
+  Megaphone,
+  MessageSquare,
+  Network,
+  Plus,
+  RefreshCw,
+  Server,
+  ShieldCheck,
+  Sparkles,
+  Settings,
+  Workflow,
+} from '@vben/icons';
+import { useUserStore } from '@vben/stores';
+
+import {
+  ElButton,
+  ElCard,
+  ElEmpty,
+  ElProgress,
+  ElSkeleton,
+  ElTag,
+} from 'element-plus';
+
+import {
+  getAgentListApi,
+  getAllWorkflowRunsApi,
+  getKnowledgeBaseListApi,
+  getModelListApi,
+  getWorkflowListApi,
+} from '#/api/ai-platform/ai-platform';
+import { getUserAnnouncementListApi } from '#/api/core/announcement';
+import { getUnreadCountApi } from '#/api/core/message';
+import { getServerHealthRealtimeApi } from '#/api/core/server-health';
+
+defineOptions({ name: 'ControlCenterDashboard' });
+
+const router = useRouter();
+const userStore = useUserStore();
+
+const loading = ref(true);
+const refreshing = ref(false);
+const now = ref(new Date());
+
+const agents = ref<AgentListItem[]>([]);
+const workflows = ref<WorkflowListItem[]>([]);
+const knowledgeBases = ref<KnowledgeBaseListItem[]>([]);
+const models = ref<ModelListItem[]>([]);
+const waitingRuns = ref<WorkflowRunListItem[]>([]);
+const announcements = ref<UserAnnouncement[]>([]);
+const unreadMessages = ref(0);
+const realtime = ref<null | {
+  cpu_percent: number;
+  disk_io?: { read_speed?: number; write_speed?: number };
+  memory_percent: number;
+  network_io?: { download_speed?: number; upload_speed?: number };
+}>(null);
+
+let clockTimer: ReturnType<typeof setInterval> | undefined;
+
+const userName = computed(
+  () =>
+    userStore.userInfo?.realName ||
+    userStore.userInfo?.username ||
+    '管理员',
+);
+
+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 todayText = computed(() =>
+  new Intl.DateTimeFormat('zh-CN', {
+    dateStyle: 'full',
+  }).format(now.value),
+);
+
+const timeText = computed(() =>
+  new Intl.DateTimeFormat('zh-CN', {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  }).format(now.value),
+);
+
+const aiCards = computed(() => [
+  {
+    action: '创建智能体',
+    count: agents.value.length,
+    desc: '角色、工具、知识与协作策略',
+    icon: Bot,
+    path: '/ai-platform/agent',
+    title: '智能体',
+  },
+  {
+    action: '设计流程',
+    count: workflows.value.length,
+    desc: 'LLM 节点、条件分支和人机确认',
+    icon: Workflow,
+    path: '/ai-platform/workflow',
+    title: '流程编排',
+  },
+  {
+    action: '维护知识',
+    count: knowledgeBases.value.length,
+    desc: '文档索引、切片检索和问答标注',
+    icon: Database,
+    path: '/ai-platform/knowledge-base',
+    title: '知识库',
+  },
+  {
+    action: '开始协作',
+    count: waitingRuns.value.length,
+    desc: 'Codex 与多角色智能体协同处理',
+    icon: BrainCircuit,
+    path: '/agent-chat/codex',
+    title: 'Codex 协作',
+  },
+  {
+    action: '配置 LLM',
+    count: models.value.length,
+    desc: 'Provider、聊天模型、向量模型与 Rerank',
+    icon: Settings,
+    path: '/ai-platform/model',
+    title: '模型配置',
+  },
+]);
+
+const opsCards = computed(() => [
+  {
+    label: '未读消息',
+    path: '/message/list',
+    value: unreadMessages.value,
+  },
+  {
+    label: '待确认流程',
+    path: '/ai-confirmation-center',
+    value: waitingRuns.value.length,
+  },
+  {
+    label: '已发布智能体',
+    path: '/ai-platform/agent',
+    value: agents.value.filter((item) => item.status === 'published').length,
+  },
+]);
+
+function goto(path: string) {
+  router.push(path);
+}
+
+function formatBytes(value?: number) {
+  if (!value) return '0 B/s';
+  const units = ['B/s', 'KB/s', 'MB/s', 'GB/s'];
+  let size = value;
+  let index = 0;
+  while (size >= 1024 && index < units.length - 1) {
+    size /= 1024;
+    index += 1;
+  }
+  return `${size.toFixed(size >= 10 || index === 0 ? 0 : 1)} ${units[index]}`;
+}
+
+async function refreshData() {
+  refreshing.value = true;
+  try {
+    const [
+      agentResult,
+      workflowResult,
+      knowledgeResult,
+      modelResult,
+      waitingResult,
+      announcementResult,
+      unreadResult,
+      realtimeResult,
+    ] = await Promise.allSettled([
+      getAgentListApi({ page: 1, pageSize: 12 }),
+      getWorkflowListApi({ page: 1, pageSize: 12 }),
+      getKnowledgeBaseListApi({ page: 1, pageSize: 12 }),
+      getModelListApi({ page: 1, pageSize: 12 }),
+      getAllWorkflowRunsApi({ page: 1, pageSize: 8, status: 'waiting' }),
+      getUserAnnouncementListApi({ page: 1, pageSize: 5 }),
+      getUnreadCountApi(),
+      getServerHealthRealtimeApi(),
+    ]);
+
+    if (agentResult.status === 'fulfilled') {
+      agents.value = agentResult.value.items || [];
+    }
+    if (workflowResult.status === 'fulfilled') {
+      workflows.value = workflowResult.value.items || [];
+    }
+    if (knowledgeResult.status === 'fulfilled') {
+      knowledgeBases.value = knowledgeResult.value.items || [];
+    }
+    if (modelResult.status === 'fulfilled') {
+      models.value = modelResult.value.items || [];
+    }
+    if (waitingResult.status === 'fulfilled') {
+      waitingRuns.value = waitingResult.value.items || [];
+    }
+    if (announcementResult.status === 'fulfilled') {
+      announcements.value = announcementResult.value.items || [];
+    }
+    if (unreadResult.status === 'fulfilled') {
+      unreadMessages.value = unreadResult.value.total || 0;
+    }
+    if (realtimeResult.status === 'fulfilled') {
+      realtime.value = realtimeResult.value;
+    }
+  } finally {
+    loading.value = false;
+    refreshing.value = false;
+  }
+}
+
+onMounted(() => {
+  refreshData();
+  clockTimer = setInterval(() => {
+    now.value = new Date();
+  }, 1000);
+});
+
+onBeforeUnmount(() => {
+  if (clockTimer) clearInterval(clockTimer);
+});
+</script>
+
+<template>
+  <Page auto-content-height class="control-center">
+    <template #title>
+      <div class="flex items-center justify-between gap-3">
+        <div>
+          <div class="flex items-center gap-2 text-base font-semibold">
+            <LayoutDashboard class="h-5 w-5 text-[var(--el-color-primary)]" />
+            控制中心
+          </div>
+          <div class="mt-1 text-xs text-[var(--el-text-color-secondary)]">
+            AI Agent Admin 轻量工作台
+          </div>
+        </div>
+        <ElButton :loading="refreshing" :icon="RefreshCw" @click="refreshData">
+          刷新
+        </ElButton>
+      </div>
+    </template>
+
+    <ElSkeleton v-if="loading" animated :rows="8" />
+
+    <div v-else class="dashboard-grid">
+      <section class="welcome-panel">
+        <div class="welcome-copy">
+          <div class="avatar">{{ userName.slice(0, 1) }}</div>
+          <div>
+            <h2>{{ greeting }}，{{ userName }}</h2>
+            <p>聚焦智能体、流程编排、知识检索和 Codex 协作。</p>
+          </div>
+        </div>
+        <div class="time-panel">
+          <strong>{{ timeText }}</strong>
+          <span>{{ todayText }}</span>
+        </div>
+      </section>
+
+      <section class="ai-entry-grid">
+        <ElCard
+          v-for="item in aiCards"
+          :key="item.title"
+          shadow="hover"
+          class="entry-card"
+          :body-style="{ padding: '16px' }"
+          @click="goto(item.path)"
+        >
+          <div class="entry-head">
+            <div class="entry-icon">
+              <component :is="item.icon" class="h-5 w-5" />
+            </div>
+            <ElButton link type="primary" @click.stop="goto(item.path)">
+              {{ item.action }}
+            </ElButton>
+          </div>
+          <div class="entry-title">{{ item.title }}</div>
+          <div class="entry-desc">{{ item.desc }}</div>
+          <div class="entry-count">{{ item.count }}</div>
+        </ElCard>
+      </section>
+
+      <section class="main-column">
+        <ElCard shadow="never" class="panel-card">
+          <template #header>
+            <div class="panel-title">
+              <Sparkles class="h-4 w-4" />
+              AI 协作状态
+            </div>
+          </template>
+          <div class="ops-grid">
+            <button
+              v-for="item in opsCards"
+              :key="item.label"
+              class="ops-item"
+              type="button"
+              @click="goto(item.path)"
+            >
+              <span>{{ item.label }}</span>
+              <strong>{{ item.value }}</strong>
+            </button>
+          </div>
+          <div class="agent-list">
+            <div
+              v-for="agent in agents.slice(0, 6)"
+              :key="agent.id"
+              class="agent-row"
+              @click="goto('/ai-platform/agent')"
+            >
+              <Bot class="h-4 w-4" />
+              <div>
+                <strong>{{ agent.name }}</strong>
+                <span>{{ agent.description || agent.code }}</span>
+              </div>
+              <ElTag
+                size="small"
+                :type="agent.status === 'published' ? 'success' : 'info'"
+              >
+                {{ agent.status === 'published' ? '已发布' : '草稿' }}
+              </ElTag>
+            </div>
+            <ElEmpty
+              v-if="agents.length === 0"
+              description="暂无智能体"
+              :image-size="80"
+            />
+          </div>
+        </ElCard>
+
+        <ElCard shadow="never" class="panel-card">
+          <template #header>
+            <div class="panel-title">
+              <GitMerge class="h-4 w-4" />
+              待处理流程
+            </div>
+          </template>
+          <div
+            v-for="run in waitingRuns"
+            :key="run.id"
+            class="run-row"
+            @click="goto('/ai-confirmation-center')"
+          >
+            <div>
+              <strong>{{ run.workflow_name }}</strong>
+              <span>{{ run.trigger_type || 'workflow' }}</span>
+            </div>
+            <ElTag type="warning" size="small">等待确认</ElTag>
+          </div>
+          <ElEmpty
+            v-if="waitingRuns.length === 0"
+            description="暂无待确认流程"
+            :image-size="80"
+          />
+        </ElCard>
+      </section>
+
+      <aside class="side-column">
+        <ElCard shadow="never" class="panel-card">
+          <template #header>
+            <div class="panel-title">
+              <Server class="h-4 w-4" />
+              服务器信息
+            </div>
+          </template>
+          <div class="health-list">
+            <div class="health-item">
+              <div>
+                <Cpu class="h-4 w-4" />
+                <span>CPU</span>
+              </div>
+              <ElProgress
+                :percentage="Math.round(realtime?.cpu_percent || 0)"
+                :stroke-width="8"
+              />
+            </div>
+            <div class="health-item">
+              <div>
+                <ShieldCheck class="h-4 w-4" />
+                <span>内存</span>
+              </div>
+              <ElProgress
+                :percentage="Math.round(realtime?.memory_percent || 0)"
+                :stroke-width="8"
+              />
+            </div>
+            <div class="io-row">
+              <HardDrive class="h-4 w-4" />
+              <span>磁盘写入</span>
+              <strong>{{ formatBytes(realtime?.disk_io?.write_speed) }}</strong>
+            </div>
+            <div class="io-row">
+              <Network class="h-4 w-4" />
+              <span>网络下载</span>
+              <strong>{{
+                formatBytes(realtime?.network_io?.download_speed)
+              }}</strong>
+            </div>
+          </div>
+        </ElCard>
+
+        <ElCard shadow="never" class="panel-card">
+          <template #header>
+            <div class="panel-title">
+              <Megaphone class="h-4 w-4" />
+              最新公告
+            </div>
+          </template>
+          <div
+            v-for="item in announcements"
+            :key="item.id"
+            class="notice-row"
+            @click="goto('/message/announcement-list')"
+          >
+            <Mail class="h-4 w-4" />
+            <div>
+              <strong>{{ item.title }}</strong>
+              <span>{{ item.summary || item.publisher_name }}</span>
+            </div>
+          </div>
+          <ElEmpty
+            v-if="announcements.length === 0"
+            description="暂无公告"
+            :image-size="80"
+          />
+        </ElCard>
+
+        <ElCard shadow="never" class="panel-card">
+          <template #header>
+            <div class="panel-title">
+              <MessageSquare class="h-4 w-4" />
+              快捷入口
+            </div>
+          </template>
+          <div class="quick-actions">
+            <ElButton type="primary" :icon="Plus" @click="goto('/ai-platform/agent')">
+              创建智能体
+            </ElButton>
+            <ElButton :icon="Workflow" @click="goto('/ai-platform/workflow')">
+              流程编排
+            </ElButton>
+            <ElButton :icon="Settings" @click="goto('/ai-platform/model')">
+              模型配置
+            </ElButton>
+            <ElButton :icon="Database" @click="goto('/ai-platform/knowledge-base')">
+              知识库
+            </ElButton>
+            <ElButton @click="goto('/system/user')">用户管理</ElButton>
+            <ElButton @click="goto('/system/role')">角色权限</ElButton>
+          </div>
+        </ElCard>
+      </aside>
+
+      <section class="knowledge-strip">
+        <CheckCircle2 class="h-4 w-4" />
+        <span>
+          当前只保留基础管理与 AI 协作主线，在线开发、应用搭建、组织扩展等重型入口已从主流程移除。
+        </span>
+      </section>
+    </div>
+  </Page>
+</template>
+
+<style scoped>
+.control-center {
+  --dashboard-border: var(--el-border-color-lighter);
+  --dashboard-soft: var(--el-fill-color-lighter);
+}
+
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 360px;
+  gap: 16px;
+}
+
+.welcome-panel,
+.ai-entry-grid,
+.knowledge-strip {
+  grid-column: 1 / -1;
+}
+
+.welcome-panel {
+  display: flex;
+  min-height: 112px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  border: 1px solid var(--dashboard-border);
+  border-radius: 8px;
+  background: linear-gradient(
+    135deg,
+    rgba(64, 158, 255, 0.1),
+    rgba(103, 194, 58, 0.08)
+  );
+  padding: 20px;
+}
+
+.welcome-copy {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.avatar {
+  display: flex;
+  width: 48px;
+  height: 48px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  background: var(--el-color-primary);
+  color: white;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.welcome-copy h2 {
+  margin: 0;
+  color: var(--el-text-color-primary);
+  font-size: 20px;
+  font-weight: 650;
+}
+
+.welcome-copy p,
+.time-panel span {
+  margin: 6px 0 0;
+  color: var(--el-text-color-secondary);
+  font-size: 13px;
+}
+
+.time-panel {
+  text-align: right;
+}
+
+.time-panel strong {
+  display: block;
+  color: var(--el-text-color-primary);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 24px;
+}
+
+.ai-entry-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.entry-card {
+  cursor: pointer;
+  border-radius: 8px;
+}
+
+.entry-head,
+.panel-title,
+.io-row,
+.notice-row,
+.run-row,
+.agent-row,
+.health-item > div {
+  display: flex;
+  align-items: center;
+}
+
+.entry-head {
+  justify-content: space-between;
+}
+
+.entry-icon {
+  display: flex;
+  width: 36px;
+  height: 36px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  background: rgba(64, 158, 255, 0.12);
+  color: var(--el-color-primary);
+}
+
+.entry-title {
+  margin-top: 12px;
+  color: var(--el-text-color-primary);
+  font-size: 15px;
+  font-weight: 650;
+}
+
+.entry-desc {
+  min-height: 36px;
+  margin-top: 6px;
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.entry-count {
+  margin-top: 12px;
+  color: var(--el-text-color-primary);
+  font-size: 24px;
+  font-weight: 700;
+}
+
+.main-column,
+.side-column {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.panel-card {
+  border-radius: 8px;
+}
+
+.panel-title {
+  gap: 8px;
+  color: var(--el-text-color-primary);
+  font-size: 14px;
+  font-weight: 650;
+}
+
+.ops-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+  margin-bottom: 14px;
+}
+
+.ops-item {
+  display: flex;
+  min-height: 72px;
+  flex-direction: column;
+  justify-content: center;
+  border: 1px solid var(--dashboard-border);
+  border-radius: 8px;
+  background: var(--dashboard-soft);
+  text-align: left;
+  padding: 12px;
+}
+
+.ops-item span,
+.agent-row span,
+.run-row span,
+.notice-row span {
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+}
+
+.ops-item strong {
+  margin-top: 6px;
+  color: var(--el-text-color-primary);
+  font-size: 22px;
+}
+
+.agent-list,
+.health-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.agent-row,
+.run-row,
+.notice-row {
+  gap: 10px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 10px;
+  transition: background-color 0.16s ease;
+}
+
+.agent-row:hover,
+.run-row:hover,
+.notice-row:hover {
+  background: var(--el-fill-color-light);
+  cursor: pointer;
+}
+
+.agent-row > div,
+.notice-row > div,
+.run-row > div {
+  min-width: 0;
+  flex: 1;
+}
+
+.agent-row strong,
+.notice-row strong,
+.run-row strong {
+  display: block;
+  overflow: hidden;
+  color: var(--el-text-color-primary);
+  font-size: 13px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.health-item {
+  display: grid;
+  grid-template-columns: 72px minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+}
+
+.health-item > div,
+.io-row {
+  gap: 8px;
+  color: var(--el-text-color-secondary);
+  font-size: 13px;
+}
+
+.io-row {
+  justify-content: space-between;
+}
+
+.io-row span {
+  flex: 1;
+}
+
+.io-row strong {
+  color: var(--el-text-color-primary);
+  font-size: 12px;
+}
+
+.quick-actions {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.quick-actions :deep(.el-button) {
+  width: 100%;
+  margin: 0;
+}
+
+.knowledge-strip {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid var(--dashboard-border);
+  border-radius: 8px;
+  background: var(--el-fill-color-blank);
+  color: var(--el-text-color-secondary);
+  padding: 12px 14px;
+  font-size: 12px;
+}
+
+@media (max-width: 1200px) {
+  .dashboard-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .ai-entry-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 720px) {
+  .welcome-panel,
+  .welcome-copy {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .time-panel {
+    text-align: left;
+  }
+
+  .ai-entry-grid,
+  .ops-grid,
+  .quick-actions {
+    grid-template-columns: 1fr;
+  }
+}
+</style>