diff --git a/src/api/ops/database.ts b/src/api/ops/database.ts
new file mode 100644
index 0000000..c4ee080
--- /dev/null
+++ b/src/api/ops/database.ts
@@ -0,0 +1,199 @@
+import { request } from '@/api/request'
+
+/** 数据库类型枚举 */
+export type DatabaseType = 'MySQL' | 'PostgreSQL' | 'Redis' | 'MongoDB' | 'DM' | 'KingBase'
+
+/** 数据库服务状态 */
+export type DatabaseStatus = 'online' | 'offline' | 'error'
+
+/** 数据库服务接口返回数据结构 */
+export interface DatabaseService {
+  id: number
+  created_at: string
+  updated_at: string
+  deleted_at: string | null
+  service_identity: string
+  server_identity: string
+  name: string
+  category: string
+  type: DatabaseType
+  host: string
+  port: number
+  username: string
+  password: string // 列表接口恒为空字符串，详情接口不返回
+  database: string
+  description: string
+  enabled: boolean
+  interval: number
+  extra: string
+  tags: string
+  status: DatabaseStatus
+  status_code: number
+  status_message: string
+  response_time: number
+  last_check_time: string
+  last_online_time: string | null
+  last_offline_time: string | null
+  continuous_errors: number
+  uptime: number
+  collect_on: boolean
+  collect_interval: number
+  collect_args: string
+  collect_last_result: string
+}
+
+/** 列表接口返回的分页数据 */
+export interface DatabaseListResponse {
+  total: number
+  page: number
+  page_size: number
+  data: DatabaseService[]
+}
+
+/** 创建数据库服务请求参数 */
+export interface CreateDatabaseParams {
+  service_identity?: string
+  server_identity?: string
+  name: string
+  category: string
+  type: DatabaseType
+  host: string
+  port: number
+  username?: string
+  password?: string
+  database?: string
+  description?: string
+  enabled?: boolean
+  interval?: number
+  extra?: string
+  tags?: string
+  collect_on?: boolean
+  collect_args?: string
+  collect_interval?: number
+  collect_last_result?: string
+}
+
+/** 更新数据库服务请求参数 */
+export interface UpdateDatabaseParams {
+  service_identity?: string
+  server_identity?: string
+  name?: string
+  category?: string
+  type?: DatabaseType
+  host?: string
+  port?: number
+  username?: string
+  password?: string
+  database?: string
+  description?: string
+  enabled?: boolean
+  interval?: number
+  extra?: string
+  tags?: string
+  collect_on?: boolean
+  collect_args?: string
+  collect_interval?: number
+  collect_last_result?: string
+}
+
+/** 列表查询参数 */
+export interface DatabaseQueryParams {
+  page?: number
+  size?: number
+  keyword?: string
+  enabled?: boolean
+}
+
+/** 指标采集请求参数 */
+export interface CollectMetricsParams {
+  ids: number[]
+  persist?: boolean
+}
+
+/** 指标采集结果项 */
+export interface CollectMetricsResultItem {
+  id: number
+  service_identity: string
+  metrics?: Record<string, any>
+  error?: string
+}
+
+/** 指标采集响应 */
+export interface CollectMetricsResponse {
+  results: CollectMetricsResultItem[]
+}
+
+/** 指标元数据项 */
+export interface MetricMetaItem {
+  metric_name: string
+  metric_unit: string
+  type: string
+  last_timestamp: string
+}
+
+/** 指标元数据响应 */
+export interface MetricMetaResponse {
+  data_source: string
+  collector_identity: string
+  server_identity: string
+  count: number
+  metrics: MetricMetaItem[]
+}
+
+/** 指标元数据查询参数 */
+export interface MetricMetaQueryParams {
+  data_source: string
+  server_identity?: string
+  keyword?: string
+  limit?: number
+}
+
+/**
+ * 获取数据库服务列表
+ * @param params 查询参数
+ */
+export const fetchDatabaseList = (params: DatabaseQueryParams) =>
+  request.get<DatabaseListResponse>('/DC-Control/v1/database', { params })
+
+/**
+ * 获取数据库服务详情
+ * @param id 服务ID
+ */
+export const fetchDatabaseDetail = (id: number) =>
+  request.get<DatabaseService>(`/DC-Control/v1/database/${id}`)
+
+/**
+ * 创建数据库服务
+ * @param data 创建参数
+ */
+export const createDatabase = (data: CreateDatabaseParams) =>
+  request.post<{ message: string; id: number }>('/DC-Control/v1/database', data)
+
+/**
+ * 更新数据库服务
+ * @param id 服务ID
+ * @param data 更新参数
+ */
+export const updateDatabase = (id: number, data: UpdateDatabaseParams) =>
+  request.put<{ message: string }>(`/DC-Control/v1/database/${id}`, data)
+
+/**
+ * 删除数据库服务（软删除）
+ * @param id 服务ID
+ */
+export const deleteDatabase = (id: number) =>
+  request.delete<{ message: string }>(`/DC-Control/v1/database/${id}`)
+
+/**
+ * 按服务主键采集指标
+ * @param data 采集参数
+ */
+export const collectDatabaseMetrics = (data: CollectMetricsParams) =>
+  request.post<CollectMetricsResponse>('/DC-Control/v1/database/metrics/collect', data)
+
+/**
+ * 查询指标元数据
+ * @param params 查询参数
+ */
+export const fetchMetricMeta = (params: MetricMetaQueryParams) =>
+  request.get<MetricMetaResponse>('/DC-Control/v1/services/metrics/meta', { params })
\ No newline at end of file
diff --git a/src/api/ops/middleware.ts b/src/api/ops/middleware.ts
new file mode 100644
index 0000000..6e54642
--- /dev/null
+++ b/src/api/ops/middleware.ts
@@ -0,0 +1,191 @@
+import { request } from '@/api/request'
+
+/** 中间件服务项 */
+export interface MiddlewareItem {
+  id: number
+  created_at: string
+  updated_at: string
+  deleted_at: string | null
+  service_identity: string
+  server_identity: string
+  name: string
+  category: string
+  type: string
+  description: string
+  enabled: boolean
+  interval: number
+  extra: string
+  tags: string
+  status_url: string
+  status: string
+  status_code: number
+  status_message: string
+  response_time: number
+  last_check_time: string
+  last_online_time: string | null
+  last_offline_time: string | null
+  continuous_errors: number
+  uptime: number
+  agent_config: string
+  collect_on: boolean
+  collect_args: string
+  collect_interval: number
+  collect_last_result: string
+}
+
+/** 中间件列表响应 */
+export interface MiddlewareListResponse {
+  total: number
+  page: number
+  page_size: number
+  data: MiddlewareItem[]
+}
+
+/** 中间件列表请求参数 */
+export interface MiddlewareListParams {
+  page?: number
+  size?: number
+  keyword?: string
+  enabled?: boolean
+}
+
+/** 创建中间件请求参数 */
+export interface MiddlewareCreateData {
+  service_identity?: string
+  server_identity?: string
+  name: string
+  category: string
+  type: string
+  description?: string
+  enabled?: boolean
+  interval?: number
+  extra?: string
+  tags?: string
+  status_url?: string
+  agent_config?: string
+  collect_on?: boolean
+  collect_args?: string
+  collect_interval?: number
+  policy_ids?: number[]
+}
+
+/** 更新中间件请求参数 */
+export interface MiddlewareUpdateData {
+  service_identity?: string
+  server_identity?: string
+  name?: string
+  category?: string
+  type?: string
+  description?: string
+  enabled?: boolean
+  interval?: number
+  extra?: string
+  tags?: string
+  status_url?: string
+  agent_config?: string
+  collect_on?: boolean
+  collect_args?: string
+  collect_interval?: number
+  collect_last_result?: string
+  status?: string
+  status_code?: number
+  status_message?: string
+  response_time?: number
+  last_check_time?: string
+  last_online_time?: string | null
+  last_offline_time?: string | null
+  continuous_errors?: number
+  uptime?: number
+  policy_ids?: number[]
+}
+
+/** 采集配置更新参数 */
+export interface MiddlewareCollectData {
+  collect_on?: boolean
+  collect_args?: string
+  collect_interval?: number
+  collect_last_result?: string
+}
+
+/** 指标上报项 */
+export interface MetricItem {
+  service_identity: string
+  timestamp: string
+  [key: string]: any
+}
+
+/** 指标上报请求参数 */
+export interface MetricsUploadData {
+  metrics: MetricItem[]
+}
+
+/** 指标上报响应 */
+export interface MetricsUploadResponse {
+  message: string
+  count: number
+}
+
+/** 指标元数据项 */
+export interface MetricMetaItem {
+  metric_name: string
+  metric_unit: string
+  type: string
+  last_timestamp: string
+}
+
+/** 指标元数据响应 */
+export interface MetricsMetaResponse {
+  data_source: string
+  collector_identity: string
+  server_identity: string
+  count: number
+  metrics: MetricMetaItem[]
+}
+
+/** 指标元数据请求参数 */
+export interface MetricsMetaParams {
+  data_source: string
+  server_identity?: string
+  keyword?: string
+  limit?: number
+}
+
+/** 获取中间件服务列表（匿名接口） */
+export const fetchMiddlewareList = (params?: MiddlewareListParams) => {
+  return request.get<MiddlewareListResponse>('/DC-Control/v1/middleware', { params })
+}
+
+/** 获取中间件服务详情 */
+export const fetchMiddlewareDetail = (id: number) => {
+  return request.get<MiddlewareItem>(`/DC-Control/v1/middleware/${id}`)
+}
+
+/** 创建中间件服务 */
+export const createMiddleware = (data: MiddlewareCreateData) => {
+  return request.post<{ message: string; id: number }>('/DC-Control/v1/middleware', data)
+}
+
+/** 更新中间件服务 */
+export const updateMiddleware = (id: number, data: MiddlewareUpdateData) => {
+  return request.put<{ message: string }>(`/DC-Control/v1/middleware/${id}`, data)
+}
+
+/** 部分更新采集配置 */
+export const patchMiddlewareCollect = (id: number, data: MiddlewareCollectData) => {
+  return request.patch<{ message: string }>(`/DC-Control/v1/middleware/${id}/collect`, data)
+}
+
+/** 删除中间件服务 */
+export const deleteMiddleware = (id: number) => {
+  return request.delete<{ message: string }>(`/DC-Control/v1/middleware/${id}`)
+}
+
+/** 上报中间件服务指标（匿名接口） */
+export const uploadMiddlewareMetrics = (data: MetricsUploadData) => {
+  return request.post<MetricsUploadResponse>('/DC-Control/v1/middleware/metrics/upload', data)
+}
+
+/** 查询中间件服务指标元数据 */
+export const fetchMiddlewareMetricsMeta = (params: MetricsMetaParams) => {
+  return request.get<MetricsMetaResponse>('/DC-Control/v1/services/metrics/meta', { params })
+}
\ No newline at end of file
diff --git a/src/api/ops/pc.ts b/src/api/ops/pc.ts
index 3a50736..9bfad15 100644
--- a/src/api/ops/pc.ts
+++ b/src/api/ops/pc.ts
@@ -1,40 +1,130 @@
-import { request } from "@/api/request";
+import { request } from '@/api/request'
+
+/** PC 列表查询参数 */
+export interface PCListParams {
+  page?: number
+  size?: number
+  keyword?: string
+  collect_on?: boolean
+}
+
+/** 资源使用率信息 */
+export interface ResourceInfo {
+  value: number // 使用率百分比
+  total?: string // 总量描述
+  used?: string // 已用描述
+}
+
+/** PC 数据结构 */
+export interface PCItem {
+  id: number
+  created_at: string
+  updated_at: string
+  deleted_at: string | null
+  pc_identity: string
+  name: string
+  host: string
+  ip_address: string
+  description: string
+  os: string
+  os_version: string
+  kernel: string
+  server_type: string
+  tags: string
+  location: string
+  remote_access: string
+  remote_port: number
+  agent_config: string
+  status: string
+  last_check_time: string
+  collect_on: boolean
+  collect_args: string
+  collect_interval: number
+  collect_last_result: string
+  // 资源使用率（前端展示用，可能来自采集数据）
+  cpu_info?: ResourceInfo
+  memory_info?: ResourceInfo
+  disk_info?: ResourceInfo
+}
+
+/** PC 列表返回数据 */
+export interface PCListResult {
+  total: number
+  page: number
+  page_size: number
+  data: PCItem[]
+}
+
+/** PC 创建参数 */
+export interface PCCreateParams {
+  pc_identity?: string
+  name: string
+  host: string
+  ip_address?: string
+  description?: string
+  os?: string
+  os_version?: string
+  kernel?: string
+  server_type?: string
+  tags?: string
+  location?: string
+  remote_access?: string
+  remote_port?: number
+  agent_config?: string
+  status?: string
+  last_check_time?: string
+  collect_on?: boolean
+  collect_args?: string
+  collect_interval?: number
+  collect_last_result?: string
+}
+
+/** PC 更新参数 */
+export interface PCUpdateParams {
+  id: number
+  pc_identity?: string
+  name?: string
+  host?: string
+  ip_address?: string
+  description?: string
+  os?: string
+  os_version?: string
+  kernel?: string
+  server_type?: string
+  tags?: string
+  location?: string
+  remote_access?: string
+  remote_port?: number
+  agent_config?: string
+  status?: string
+  last_check_time?: string
+  collect_on?: boolean
+  collect_args?: string
+  collect_interval?: number
+  collect_last_result?: string
+}
 
 /** 获取PC列表（分页） */
-export const fetchPCList = (data?: {
-  page?: number;
-  page_size?: number;
-  keyword?: string;
-  datacenter_id?: number;
-  rack_id?: number;
-  status?: string;
-  sort?: string;
-  order?: string;
-}) => {
-  return request.post("/Assets/v1/pc/list", data || {});
-};
+export const fetchPCList = (params?: PCListParams) => {
+  return request.get<PCListResult>('/DC-Control/v1/pcs', { params })
+}
 
 /** 获取PC详情 */
 export const fetchPCDetail = (id: number) => {
-  return request.get(`/Assets/v1/pc/detail/${id}`);
-};
+  return request.get<PCItem>(`/DC-Control/v1/pcs/${id}`)
+}
 
 /** 创建PC */
-export const createPC = (data: any) => {
-  return request.post("/Assets/v1/pc/create", data);
-};
+export const createPC = (data: PCCreateParams) => {
+  return request.post<PCItem>('/DC-Control/v1/pcs', data)
+}
 
 /** 更新PC */
-export const updatePC = (data: any) => {
-  return request.put("/Assets/v1/pc/update", data);
-};
+export const updatePC = (id: number, data: Omit<PCUpdateParams, 'id'>) => {
+  return request.put<{ message: string }>(`/DC-Control/v1/pcs/${id}`, data)
+}
 
 /** 删除PC */
 export const deletePC = (id: number) => {
-  return request.delete(`/Assets/v1/pc/delete/${id}`);
-};
-
-/** 获取机柜列表（用于下拉选择） */
-export const fetchRackListForSelect = (datacenterId?: number) => {
-  return request.get("/Assets/v1/rack/all", { params: { datacenter_id: datacenterId } });
-};
+  return request.delete<{ message: string }>(`/DC-Control/v1/pcs/${id}`)
+}
diff --git a/src/api/ops/server.ts b/src/api/ops/server.ts
index 87fdea3..fb52ad4 100644
--- a/src/api/ops/server.ts
+++ b/src/api/ops/server.ts
@@ -1,31 +1,94 @@
-import { request } from "@/api/request";
+import { request } from '@/api/request'
+
+/** 服务器类型 */
+export interface ServerItem {
+  id: number
+  created_at: string
+  updated_at: string
+  deleted_at: string | null
+  server_identity: string
+  name: string
+  host: string
+  ip_address: string
+  description: string
+  os: string
+  os_version: string
+  kernel: string
+  server_type: string
+  tags: string
+  location: string
+  remote_access: string
+  remote_port: number
+  agent_config: string
+  status: string
+  last_check_time: string
+  collect_on: boolean
+  collect_args: string
+  collect_interval: number
+  collect_last_result: string
+}
+
+/** 服务器列表响应 */
+export interface ServerListResponse {
+  total: number
+  page: number
+  page_size: number
+  data: ServerItem[]
+}
+
+/** 服务器列表请求参数 */
+export interface ServerListParams {
+  page?: number
+  size?: number
+  keyword?: string
+  collect_on?: boolean
+}
+
+/** 创建/更新服务器请求参数 */
+export interface ServerFormData {
+  server_identity?: string
+  name?: string
+  host?: string
+  ip_address?: string
+  description?: string
+  os?: string
+  os_version?: string
+  kernel?: string
+  server_type?: string
+  tags?: string
+  location?: string
+  remote_access?: string
+  remote_port?: number
+  agent_config?: string
+  status?: string
+  last_check_time?: string
+  collect_on?: boolean
+  collect_args?: string
+  collect_interval?: number
+  collect_last_result?: string
+}
 
 /** 获取服务器列表（分页） */
-export const fetchServerList = (params?: {
-  page?: number;
-  size?: number;
-  keyword?: string;
-  collect_on?: boolean;
-}) => {
-  return request.get("/DC-Control/v1/servers", { params });
-};
+export const fetchServerList = (params?: ServerListParams) => {
+  return request.get<ServerListResponse>('/DC-Control/v1/servers', { params })
+}
 
 /** 获取服务器详情 */
 export const fetchServerDetail = (id: number) => {
-  return request.get(`/DC-Control/v1/servers/${id}`);
-};
+  return request.get<ServerItem>(`/DC-Control/v1/servers/${id}`)
+}
 
 /** 创建服务器 */
-export const createServer = (data: any) => {
-  return request.post("/DC-Control/v1/servers", data);
-};
+export const createServer = (data: ServerFormData) => {
+  return request.post<ServerItem>('/DC-Control/v1/servers', data)
+}
 
 /** 更新服务器 */
-export const updateServer = (id: number, data: any) => {
-  return request.put(`/DC-Control/v1/servers/${id}`, data);
-};
+export const updateServer = (id: number, data: Partial<ServerFormData>) => {
+  return request.put<{ message: string }>(`/DC-Control/v1/servers/${id}`, data)
+}
 
 /** 删除服务器 */
 export const deleteServer = (id: number) => {
-  return request.delete(`/DC-Control/v1/servers/${id}`);
-};
+  return request.delete<{ message: string }>(`/DC-Control/v1/servers/${id}`)
+}
diff --git a/src/api/request.ts b/src/api/request.ts
index 15a48ac..9acefc5 100644
--- a/src/api/request.ts
+++ b/src/api/request.ts
@@ -85,6 +85,15 @@ export const request = {
   },
   delete<T = any>(url: string, config?: RequestConfig): Promise<T> {
     return instance.delete(url, config);
+  },
+  patch<T = any>(url: string, data = {}, config?: RequestConfig): Promise<T> {
+    let params: any
+    if (config?.needWorkspace) {
+      params = { workspace: import.meta.env.VITE_APP_WORKSPACE, ...data };
+    } else {
+      params = data;
+    }
+    return instance.patch(url, params, config);
   }
 };
   
diff --git a/src/router/local-menu-flat.ts b/src/router/local-menu-flat.ts
index 7229a87..abe6ed4 100644
--- a/src/router/local-menu-flat.ts
+++ b/src/router/local-menu-flat.ts
@@ -463,6 +463,23 @@ export const localMenuFlatItems: MenuItem[] = [
     hide_menu: true,
     created_at: '2025-12-26T13:23:52.047548+08:00',
   },
+  {
+    id: 4002,
+    identity: '019b591d-026f-785d-b473-ac804133e253',
+    title: '告警详情',
+    title_en: 'Alert Detail',
+    code: 'ops:告警管理:告警详情',
+    description: '告警管理 - 告警详情',
+    app_id: 2,
+    parent_id: 39,
+    menu_path: '/alert/detail',
+    component: 'ops/pages/alert/detail/index',
+    menu_icon: 'appstore',
+    type: 1,
+    sort_key: 32,
+    hide_menu: true,
+    created_at: '2025-12-26T13:23:52.047548+08:00',
+  },
   {
     id: 41,
     identity: '019b591d-027d-7eae-b9b9-23fd1b7ece75',
diff --git a/src/router/local-menu-items.ts b/src/router/local-menu-items.ts
index 7f58e82..152dee3 100644
--- a/src/router/local-menu-items.ts
+++ b/src/router/local-menu-items.ts
@@ -497,6 +497,24 @@ export const localMenuItems: MenuItem[] = [
         created_at: '2025-12-26T13:23:52.047548+08:00',
         children: [],
       },
+      {
+        id: 4002,
+        identity: '019b591d-026f-785d-b473-ac804133e253',
+        title: '告警详情',
+        title_en: 'Alert Detail',
+        code: 'ops:告警管理:告警详情',
+        description: '告警管理 - 告警详情',
+        app_id: 2,
+        parent_id: 39,
+        menu_path: '/alert/detail',
+        component: 'ops/pages/alert/detail/index',
+        menu_icon: 'appstore',
+        type: 1,
+        sort_key: 8,
+        hide_menu: true,
+        created_at: '2025-12-26T13:23:52.047548+08:00',
+        children: [],
+      },
       {
         id: 41,
         identity: '019b591d-027d-7eae-b9b9-23fd1b7ece75',
diff --git a/src/views/ops/pages/alert/detail/index.vue b/src/views/ops/pages/alert/detail/index.vue
new file mode 100644
index 0000000..67ac0ff
--- /dev/null
+++ b/src/views/ops/pages/alert/detail/index.vue
@@ -0,0 +1,644 @@
+<template>
+  <div class="alert-detail-page">
+    <!-- 页面头部 -->
+    <div class="page-header">
+      <div class="header-left">
+        <!-- <a-button type="text" @click="handleGoBack">
+          <template #icon><icon-left /></template>
+          返回列表
+        </a-button> -->
+        <a-divider direction="vertical" />
+        <h2 class="page-title">告警详情</h2>
+        <a-tag v-if="record" :color="getStatusColor(record.status)" size="large" class="status-tag">
+          {{ getStatusText(record.status) }}
+        </a-tag>
+      </div>
+      <div class="header-right">
+        <a-space v-if="record && (record.status === 'pending' || record.status === 'firing')">
+          <a-button type="primary" @click="handleAck">
+            <template #icon><icon-check /></template>
+            确认
+          </a-button>
+          <a-button type="outline" status="success" @click="handleResolve">
+            <template #icon><icon-check-circle /></template>
+            解决
+          </a-button>
+          <a-button type="outline" status="warning" @click="handleSilence">
+            <template #icon><icon-mute /></template>
+            屏蔽
+          </a-button>
+        </a-space>
+      </div>
+    </div>
+
+    <!-- 页面内容 -->
+    <div class="page-content">
+      <a-spin :loading="loading" style="width: 100%">
+        <div v-if="!loading && record" class="detail-container">
+          <a-card class="detail-card">
+            <!-- 基础信息 -->
+            <a-descriptions title="基础信息" :column="2" bordered>
+              <a-descriptions-item label="告警ID">{{ record.id }}</a-descriptions-item>
+              <a-descriptions-item label="告警名称">{{ record.alert_name || '-' }}</a-descriptions-item>
+              <a-descriptions-item label="告警状态">
+                <a-tag :color="getStatusColor(record.status)">
+                  {{ getStatusText(record.status) }}
+                </a-tag>
+              </a-descriptions-item>
+              <a-descriptions-item label="告警级别">
+                <a-tag v-if="record.severity" :color="record.severity?.color || 'blue'">
+                  {{ record.severity?.name || record.severity?.code || '-' }}
+                </a-tag>
+                <span v-else>-</span>
+              </a-descriptions-item>
+              <a-descriptions-item label="告警指纹">
+                <span class="code-text">{{ record.fingerprint || '-' }}</span>
+              </a-descriptions-item>
+              <a-descriptions-item label="策略ID / 规则ID">
+                {{ record.policy_id || '-' }} / {{ record.rule_id || '-' }}
+              </a-descriptions-item>
+            </a-descriptions>
+
+            <!-- 告警内容 -->
+            <a-descriptions title="告警内容" :column="2" bordered class="mt-4">
+              <a-descriptions-item label="摘要" :span="2">
+                {{ record.summary || '-' }}
+              </a-descriptions-item>
+              <a-descriptions-item label="描述" :span="2">
+                {{ record.description || '-' }}
+              </a-descriptions-item>
+              <a-descriptions-item label="当前值">
+                <span class="highlight-value">{{ record.value || '-' }}</span>
+              </a-descriptions-item>
+              <a-descriptions-item label="阈值">
+                <span class="threshold-value">{{ record.threshold || '-' }}</span>
+              </a-descriptions-item>
+            </a-descriptions>
+
+            <!-- 时间信息 -->
+            <a-descriptions title="时间信息" :column="2" bordered class="mt-4">
+              <a-descriptions-item label="开始时间">{{ formatDateTime(record.starts_at) }}</a-descriptions-item>
+              <a-descriptions-item label="结束时间">{{ record.ends_at ? formatDateTime(record.ends_at) : '-' }}</a-descriptions-item>
+              <a-descriptions-item label="持续时长">{{ formatDuration(record.duration) }}</a-descriptions-item>
+              <a-descriptions-item label="创建时间">{{ formatDateTime(record.created_at) }}</a-descriptions-item>
+              <a-descriptions-item label="更新时间">{{ formatDateTime(record.updated_at) }}</a-descriptions-item>
+            </a-descriptions>
+
+            <!-- 处理信息 -->
+            <a-descriptions title="处理信息" :column="2" bordered class="mt-4">
+              <a-descriptions-item label="处理人">{{ record.processed_by || '-' }}</a-descriptions-item>
+              <a-descriptions-item label="处理时间">{{ record.processed_at ? formatDateTime(record.processed_at) : '-' }}</a-descriptions-item>
+              <a-descriptions-item label="关联工单">
+                <template v-if="record.feedback_ticket_id">
+                  <a-link @click="handleGoToTicket(record.feedback_ticket_id)">
+                    工单 #{{ record.feedback_ticket_id }}
+                  </a-link>
+                </template>
+                <template v-else>-</template>
+              </a-descriptions-item>
+            </a-descriptions>
+
+            <!-- 通知信息 -->
+            <a-descriptions title="通知信息" :column="2" bordered class="mt-4">
+              <a-descriptions-item label="通知次数">{{ record.notify_count || 0 }}</a-descriptions-item>
+              <a-descriptions-item label="通知状态">
+                <a-tag :color="getNotifyStatusColor(record.notify_status)">
+                  {{ getNotifyStatusText(record.notify_status) }}
+                </a-tag>
+              </a-descriptions-item>
+              <a-descriptions-item label="最近通知时间">{{ record.notified_at ? formatDateTime(record.notified_at) : '-' }}</a-descriptions-item>
+            </a-descriptions>
+
+            <!-- 标签 -->
+            <a-descriptions title="标签 (Labels)" :column="1" bordered class="mt-4">
+              <a-descriptions-item label="Labels">
+                <div v-if="labels && Object.keys(labels).length > 0" class="tags-container">
+                  <a-tag v-for="(value, key) in labels" :key="key" color="arcoblue">
+                    {{ key }}: {{ value }}
+                  </a-tag>
+                </div>
+                <span v-else>-</span>
+              </a-descriptions-item>
+            </a-descriptions>
+
+            <!-- 注解 -->
+            <a-descriptions title="注解 (Annotations)" :column="1" bordered class="mt-4">
+              <a-descriptions-item label="Annotations">
+                <div v-if="annotations && Object.keys(annotations).length > 0" class="tags-container">
+                  <a-tag v-for="(value, key) in annotations" :key="key" color="green">
+                    {{ key }}: {{ value }}
+                  </a-tag>
+                </div>
+                <span v-else>-</span>
+              </a-descriptions-item>
+            </a-descriptions>
+
+            <!-- 分组信息 -->
+            <a-descriptions title="分组信息" :column="2" bordered class="mt-4">
+              <a-descriptions-item label="分组键">
+                <span class="code-text">{{ record.group_key || '-' }}</span>
+              </a-descriptions-item>
+              <a-descriptions-item label="分组标签">
+                <div v-if="groupLabels && Object.keys(groupLabels).length > 0" class="tags-container">
+                  <a-tag v-for="(value, key) in groupLabels" :key="key" color="purple">
+                    {{ key }}: {{ value }}
+                  </a-tag>
+                </div>
+                <span v-else>-</span>
+              </a-descriptions-item>
+            </a-descriptions>
+
+            <!-- 原始数据 -->
+            <a-descriptions title="原始数据 (Raw Data)" :column="1" bordered class="mt-4">
+              <a-descriptions-item label="Raw Data">
+                <div class="raw-data-wrapper">
+                  <a-button type="text" size="small" @click="toggleRawData" class="toggle-btn">
+                    {{ showRawData ? '收起' : '展开' }}
+                    <template #icon>
+                      <icon-down v-if="!showRawData" />
+                      <icon-up v-else />
+                    </template>
+                  </a-button>
+                  <pre v-if="showRawData" class="raw-data">{{ rawDataFormatted }}</pre>
+                  <span v-else class="empty-text">点击展开查看原始数据</span>
+                </div>
+              </a-descriptions-item>
+            </a-descriptions>
+
+            <!-- 处理记录 -->
+            <div class="mt-4">
+              <div class="section-title">处理记录</div>
+              <a-table
+                :data="processRecords"
+                :columns="processColumns"
+                :pagination="false"
+                :loading="processLoading"
+                size="medium"
+              >
+                <template #action="{ record }">
+                  <a-tag :color="getActionColor(record.action)">
+                    {{ getActionText(record.action) }}
+                  </a-tag>
+                </template>
+                <template #created_at="{ record }">
+                  {{ formatDateTime(record.created_at) }}
+                </template>
+              </a-table>
+              <a-empty v-if="!processLoading && processRecords.length === 0" description="暂无处理记录" />
+            </div>
+          </a-card>
+        </div>
+
+        <!-- 加载失败状态 -->
+        <div v-if="!loading && !record" class="error-state">
+          <a-result status="404" title="告警记录不存在">
+            <template #subtitle>
+              该告警记录可能已被删除或您没有权限查看
+            </template>
+            <template #extra>
+              <a-button type="primary" @click="handleGoBack">
+                返回列表
+              </a-button>
+            </template>
+          </a-result>
+        </div>
+      </a-spin>
+    </div>
+
+    <!-- 确认对话框 -->
+    <AckDialog
+      v-model:visible="ackDialogVisible"
+      :alert-record-id="alertId"
+      @success="handleActionSuccess"
+    />
+
+    <!-- 解决对话框 -->
+    <ResolveDialog
+      v-model:visible="resolveDialogVisible"
+      :alert-record-id="alertId"
+      @success="handleActionSuccess"
+    />
+
+    <!-- 屏蔽对话框 -->
+    <SilenceDialog
+      v-model:visible="silenceDialogVisible"
+      :alert-record-id="alertId"
+      @success="handleActionSuccess"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { Message } from '@arco-design/web-vue'
+import {
+  IconLeft,
+  IconCheck,
+  IconCheckCircle,
+  IconMute,
+  IconDown,
+  IconUp
+} from '@arco-design/web-vue/es/icon'
+import { fetchAlertRecordDetail, fetchAlertProcessList } from '@/api/ops/alertRecord'
+import AckDialog from '../tackle/components/AckDialog.vue'
+import ResolveDialog from '../tackle/components/ResolveDialog.vue'
+import SilenceDialog from '../tackle/components/SilenceDialog.vue'
+
+const route = useRoute()
+const router = useRouter()
+
+const loading = ref(true)
+const processLoading = ref(false)
+const record = ref<any>(null)
+const processRecords = ref<any[]>([])
+const showRawData = ref(false)
+
+// 对话框状态
+const ackDialogVisible = ref(false)
+const resolveDialogVisible = ref(false)
+const silenceDialogVisible = ref(false)
+
+// 告警ID
+const alertId = computed(() => Number(route.query.id))
+
+// 解析标签
+const labels = computed(() => {
+  if (!record.value?.labels) return null
+  try {
+    return JSON.parse(record.value.labels)
+  } catch {
+    return null
+  }
+})
+
+// 解析注解
+const annotations = computed(() => {
+  if (!record.value?.annotations) return null
+  try {
+    return JSON.parse(record.value.annotations)
+  } catch {
+    return null
+  }
+})
+
+// 解析分组标签
+const groupLabels = computed(() => {
+  if (!record.value?.group_labels) return null
+  try {
+    return JSON.parse(record.value.group_labels)
+  } catch {
+    return null
+  }
+})
+
+// 格式化原始数据
+const rawDataFormatted = computed(() => {
+  if (!record.value?.raw_data) return '-'
+  try {
+    const data = JSON.parse(record.value.raw_data)
+    return JSON.stringify(data, null, 2)
+  } catch {
+    return record.value.raw_data
+  }
+})
+
+// 处理记录表格列
+const processColumns = [
+  { title: '时间', dataIndex: 'created_at', slotName: 'created_at', width: 180 },
+  { title: '操作', dataIndex: 'action', slotName: 'action', width: 100 },
+  { title: '操作人', dataIndex: 'operator', width: 120 },
+  { title: '备注', dataIndex: 'comment', ellipsis: true, tooltip: true }
+]
+
+// 加载详情
+const loadDetail = async () => {
+  if (!alertId.value) {
+    Message.error('告警ID无效')
+    return
+  }
+
+  loading.value = true
+  try {
+    const data = await fetchAlertRecordDetail(alertId.value)
+    record.value = data.details || data
+  } catch (error) {
+    console.error('加载详情失败:', error)
+    Message.error('加载详情失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 加载处理记录
+const loadProcessRecords = async () => {
+  if (!alertId.value) return
+
+  processLoading.value = true
+  try {
+    const result = await fetchAlertProcessList({
+      alert_record_id: alertId.value,
+      page: 1,
+      page_size: 100
+    })
+    processRecords.value = result.details?.data || result.data || []
+  } catch (error) {
+    console.error('加载处理记录失败:', error)
+  } finally {
+    processLoading.value = false
+  }
+}
+
+// 返回
+const handleGoBack = () => {
+  router.back()
+}
+
+// 跳转工单
+const handleGoToTicket = (ticketId: number) => {
+  router.push(`/ops/ticket/${ticketId}`)
+}
+
+// 确认
+const handleAck = () => {
+  ackDialogVisible.value = true
+}
+
+// 解决
+const handleResolve = () => {
+  resolveDialogVisible.value = true
+}
+
+// 屏蔽
+const handleSilence = () => {
+  silenceDialogVisible.value = true
+}
+
+// 操作成功回调
+const handleActionSuccess = () => {
+  loadDetail()
+  loadProcessRecords()
+}
+
+// 切换原始数据显示
+const toggleRawData = () => {
+  showRawData.value = !showRawData.value
+}
+
+// 格式化日期时间
+const formatDateTime = (datetime: string) => {
+  if (!datetime) return '-'
+  return new Date(datetime).toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit'
+  })
+}
+
+// 格式化持续时间
+const formatDuration = (seconds: number) => {
+  if (!seconds) return '-'
+  const days = Math.floor(seconds / 86400)
+  const hours = Math.floor((seconds % 86400) / 3600)
+  const minutes = Math.floor((seconds % 3600) / 60)
+  const secs = seconds % 60
+
+  const parts: string[] = []
+  if (days > 0) parts.push(`${days}天`)
+  if (hours > 0) parts.push(`${hours}小时`)
+  if (minutes > 0) parts.push(`${minutes}分钟`)
+  if (secs > 0 && parts.length === 0) parts.push(`${secs}秒`)
+
+  return parts.length > 0 ? parts.join('') : '-'
+}
+
+// 获取状态颜色
+const getStatusColor = (status: string) => {
+  const colorMap: Record<string, string> = {
+    firing: 'red',
+    pending: 'orange',
+    acked: 'gold',
+    resolved: 'green',
+    silenced: 'gray',
+    suppressed: 'lightgray'
+  }
+  return colorMap[status] || 'blue'
+}
+
+// 获取状态文本
+const getStatusText = (status: string) => {
+  const textMap: Record<string, string> = {
+    firing: '告警中',
+    pending: '待处理',
+    acked: '已确认',
+    resolved: '已解决',
+    silenced: '已屏蔽',
+    suppressed: '已抑制'
+  }
+  return textMap[status] || status
+}
+
+// 获取通知状态颜色
+const getNotifyStatusColor = (status: string) => {
+  const colorMap: Record<string, string> = {
+    success: 'green',
+    failed: 'red',
+    pending: 'orange'
+  }
+  return colorMap[status] || 'blue'
+}
+
+// 获取通知状态文本
+const getNotifyStatusText = (status: string) => {
+  const textMap: Record<string, string> = {
+    success: '成功',
+    failed: '失败',
+    pending: '待发送'
+  }
+  return textMap[status] || status || '-'
+}
+
+// 获取操作颜色
+const getActionColor = (action: string) => {
+  const colorMap: Record<string, string> = {
+    ack: 'gold',
+    resolve: 'green',
+    silence: 'gray',
+    comment: 'blue',
+    assign: 'purple',
+    escalate: 'orange',
+    close: 'red'
+  }
+  return colorMap[action] || 'blue'
+}
+
+// 获取操作文本
+const getActionText = (action: string) => {
+  const textMap: Record<string, string> = {
+    ack: '确认',
+    resolve: '解决',
+    silence: '屏蔽',
+    comment: '评论',
+    assign: '分配',
+    escalate: '升级',
+    close: '关闭'
+  }
+  return textMap[action] || action
+}
+
+onMounted(() => {
+  loadDetail()
+  loadProcessRecords()
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'AlertDetailPage',
+}
+</script>
+
+<style scoped lang="less">
+.alert-detail-page {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-fill-2);
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  background-color: var(--color-bg-2);
+  border-bottom: 1px solid var(--color-border);
+  flex-shrink: 0;
+
+  .header-left {
+    display: flex;
+    align-items: center;
+
+    .page-title {
+      margin: 0;
+      font-size: 18px;
+      font-weight: 500;
+    }
+
+    .status-tag {
+      margin-left: 12px;
+    }
+  }
+}
+
+.page-content {
+  flex: 1;
+  padding: 20px;
+  overflow: auto;
+}
+
+.detail-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.detail-card {
+  :deep(.arco-card-body) {
+    padding: 20px;
+  }
+}
+
+.mt-4 {
+  margin-top: 16px;
+}
+
+.code-text {
+  font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
+  font-size: 13px;
+  background: var(--color-fill-2);
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.highlight-value {
+  color: rgb(var(--danger-6));
+  font-weight: 600;
+}
+
+.threshold-value {
+  color: rgb(var(--warning-6));
+  font-weight: 600;
+}
+
+.tags-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.section-title {
+  font-size: 16px;
+  font-weight: 500;
+  margin-bottom: 12px;
+  padding-left: 10px;
+  border-left: 3px solid rgb(var(--primary-6));
+}
+
+.raw-data-wrapper {
+  .toggle-btn {
+    margin-bottom: 8px;
+  }
+
+  .raw-data {
+    margin: 0;
+    padding: 12px;
+    background: var(--color-fill-1);
+    border-radius: 6px;
+    font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
+    font-size: 12px;
+    line-height: 1.6;
+    overflow-x: auto;
+    white-space: pre-wrap;
+    word-break: break-all;
+    max-height: 400px;
+    overflow-y: auto;
+  }
+
+  .empty-text {
+    color: var(--color-text-3);
+  }
+}
+
+.error-state {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 400px;
+}
+
+// 响应式布局
+@media (max-width: 768px) {
+  .page-header {
+    flex-direction: column;
+    gap: 12px;
+    align-items: flex-start;
+
+    .header-right {
+      width: 100%;
+    }
+  }
+
+  :deep(.arco-descriptions) {
+    .arco-descriptions-table {
+      table-layout: fixed;
+    }
+
+    .arco-descriptions-item-label {
+      width: 100px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/ops/pages/dc/database/components/CollectDialog.vue b/src/views/ops/pages/dc/database/components/CollectDialog.vue
new file mode 100644
index 0000000..fa1d6ed
--- /dev/null
+++ b/src/views/ops/pages/dc/database/components/CollectDialog.vue
@@ -0,0 +1,296 @@
+<template>
+  <a-modal
+    :visible="visible"
+    title="指标采集"
+    @ok="handleOk"
+    @cancel="handleCancel"
+    @update:visible="handleUpdateVisible"
+    :confirm-loading="confirmLoading"
+    width="600px"
+  >
+    <a-form ref="formRef" :model="formData" :rules="rules" layout="vertical">
+      <a-form-item field="ids" label="选择服务" required>
+        <a-select
+          v-model="formData.ids"
+          placeholder="请选择要采集的服务（最多20个）"
+          multiple
+          :max-tag-count="5"
+          allow-clear
+        >
+          <a-option
+            v-for="item in serviceList"
+            :key="item.id"
+            :value="item.id"
+            :label="item.name"
+            :disabled="!item.enabled || !item.collect_on"
+          >
+            <div class="service-option">
+              <span>{{ item.name }}</span>
+              <a-tag
+                size="small"
+                :color="item.enabled && item.collect_on ? 'green' : 'red'"
+                style="margin-left: 8px"
+              >
+                {{ item.enabled && item.collect_on ? '可采集' : '不可采集' }}
+              </a-tag>
+            </div>
+          </a-option>
+        </a-select>
+        <template #extra>
+          <span style="color: rgb(var(--text-3))">
+            仅 enabled=true 且 collect_on=true 的服务可执行采集
+          </span>
+        </template>
+      </a-form-item>
+
+      <a-form-item field="persist" label="持久化到时序库">
+        <a-switch v-model="formData.persist" />
+        <template #extra>
+          <span style="color: rgb(var(--text-3))">
+            开启后将采集结果写入时序库
+          </span>
+        </template>
+      </a-form-item>
+    </a-form>
+
+    <!-- 采集结果展示 -->
+    <div v-if="collectResults.length > 0" class="collect-results">
+      <a-divider>采集结果</a-divider>
+      <a-list :bordered="false">
+        <a-list-item v-for="result in collectResults" :key="result.id">
+          <a-list-item-meta
+            :title="result.service_identity"
+            :description="`ID: ${result.id}`"
+          />
+          <template #actions>
+            <a-tag v-if="result.metrics && result.metrics.length > 0" color="green">成功</a-tag>
+            <a-tag v-else color="red">失败</a-tag>
+          </template>
+          <div v-if="result.error" class="error-message">
+            {{ result.error }}
+          </div>
+          <div v-if="result.metrics && result.metrics.length > 0" class="metrics-display">
+            <div class="metrics-summary">
+              共采集 {{ result.metrics.length }} 个指标
+            </div>
+            <a-button size="small" @click="toggleMetrics(result.id)">
+              {{ expandedMetrics.includes(result.id) ? '隐藏' : '展开' }}详情
+            </a-button>
+            <div v-if="expandedMetrics.includes(result.id)" class="metrics-list">
+              <div v-for="metric in result.metrics" :key="metric.metric_name" class="metric-item">
+                <span class="metric-name">{{ metric.metric_name }}</span>
+                <span class="metric-value">{{ metric.metric_value }}</span>
+                <span v-if="metric.metric_unit" class="metric-unit">{{ metric.metric_unit }}</span>
+                <span class="metric-time">{{ formatTime(metric.timestamp) }}</span>
+              </div>
+            </div>
+          </div>
+        </a-list-item>
+      </a-list>
+    </div>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, watch } from 'vue'
+import { Message } from '@arco-design/web-vue'
+import type { FormInstance } from '@arco-design/web-vue'
+import {
+  collectDatabaseMetrics,
+} from '@/api/ops/database'
+
+interface MetricItem {
+  metric_name: string
+  metric_value: number
+  metric_unit: string
+  service_identity: string
+  timestamp: string
+  type: string
+}
+
+interface CollectResultItem {
+  id: number
+  service_identity: string
+  metrics?: MetricItem[]
+  error?: string
+}
+
+interface Props {
+  visible: boolean
+  serviceList?: any[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  serviceList: () => [],
+})
+
+const emit = defineEmits(['update:visible', 'success'])
+
+const formRef = ref<FormInstance>()
+const confirmLoading = ref(false)
+const collectResults = ref<CollectResultItem[]>([])
+const expandedMetrics = ref<number[]>([])
+
+const formData = reactive({
+  ids: [] as number[],
+  persist: true,
+})
+
+const rules = {
+  ids: [
+    { required: true, message: '请选择要采集的服务' },
+    {
+      validator: (value: number[], callback: (error?: string) => void) => {
+        if (value.length > 20) {
+          callback('单次最多选择20个服务')
+        } else {
+          callback()
+        }
+      },
+    },
+  ],
+}
+
+// 格式化时间
+const formatTime = (time: string) => {
+  if (!time) return '-'
+  const date = new Date(time)
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  const hours = String(date.getHours()).padStart(2, '0')
+  const minutes = String(date.getMinutes()).padStart(2, '0')
+  const seconds = String(date.getSeconds()).padStart(2, '0')
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+}
+
+watch(
+  () => props.visible,
+  (val) => {
+    if (val) {
+      formData.ids = []
+      formData.persist = true
+      collectResults.value = []
+      expandedMetrics.value = []
+    }
+  }
+)
+
+const toggleMetrics = (id: number) => {
+  const index = expandedMetrics.value.indexOf(id)
+  if (index > -1) {
+    expandedMetrics.value.splice(index, 1)
+  } else {
+    expandedMetrics.value.push(id)
+  }
+}
+
+const handleOk = async () => {
+  try {
+    await formRef.value?.validate()
+
+    confirmLoading.value = true
+
+    const res: any = await collectDatabaseMetrics({
+      ids: formData.ids,
+      persist: formData.persist,
+    })
+
+    collectResults.value = res?.details?.results || []
+
+    const successCount = collectResults.value.filter((r) => r.metrics && r.metrics.length > 0).length
+    const failCount = collectResults.value.filter((r) => r.error).length
+
+    if (failCount === 0) {
+      Message.success(`采集完成，成功 ${successCount} 个`)
+    } else if (successCount === 0) {
+      Message.error(`采集完成，失败 ${failCount} 个`)
+    } else {
+      Message.warning(`采集完成，成功 ${successCount} 个，失败 ${failCount} 个`)
+    }
+
+    emit('success')
+  } catch (error: any) {
+    console.error('采集失败:', error)
+    if (error?.response?.data?.message) {
+      Message.error(error.response.data.message)
+    } else {
+      Message.error('采集失败')
+    }
+  } finally {
+    confirmLoading.value = false
+  }
+}
+
+const handleUpdateVisible = (value: boolean) => {
+  emit('update:visible', value)
+}
+
+const handleCancel = () => {
+  emit('update:visible', false)
+  formRef.value?.resetFields()
+}
+</script>
+
+<style scoped lang="less">
+.service-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.collect-results {
+  margin-top: 16px;
+
+  .error-message {
+    color: rgb(var(--danger-6));
+    font-size: 12px;
+    margin-top: 4px;
+  }
+
+  .metrics-display {
+    margin-top: 4px;
+
+    .metrics-summary {
+      font-size: 12px;
+      color: rgb(var(--text-3));
+      margin-bottom: 4px;
+    }
+
+    .metrics-list {
+      margin-top: 8px;
+      padding: 8px;
+      background: rgb(var(--gray-2));
+      border-radius: 4px;
+      max-height: 200px;
+      overflow-y: auto;
+
+      .metric-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 4px 0;
+        font-size: 12px;
+
+        .metric-name {
+          color: rgb(var(--text-1));
+          font-weight: 500;
+        }
+
+        .metric-value {
+          color: rgb(var(--success-6));
+        }
+
+        .metric-unit {
+          color: rgb(var(--text-3));
+        }
+
+        .metric-time {
+          color: rgb(var(--text-3));
+          margin-left: auto;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/ops/pages/dc/database/components/DetailDialog.vue b/src/views/ops/pages/dc/database/components/DetailDialog.vue
new file mode 100644
index 0000000..9f3876d
--- /dev/null
+++ b/src/views/ops/pages/dc/database/components/DetailDialog.vue
@@ -0,0 +1,285 @@
+<template>
+  <a-modal
+    :visible="visible"
+    title="数据库服务详情"
+    @cancel="handleCancel"
+    @update:visible="handleUpdateVisible"
+    :footer="false"
+    width="700px"
+  >
+    <a-spin :loading="loading" style="width: 100%">
+      <a-descriptions
+        :column="2"
+        bordered
+        size="medium"
+        :label-style="{ width: '140px' }"
+      >
+        <a-descriptions-item label="服务ID">
+          {{ detailData?.id }}
+        </a-descriptions-item>
+        <a-descriptions-item label="服务唯一标识">
+          {{ detailData?.service_identity || '-' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="服务名称">
+          {{ detailData?.name || '-' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="数据库类型">
+          <a-tag :color="getTypeColor(detailData?.type)">
+            {{ detailData?.type || '-' }}
+          </a-tag>
+        </a-descriptions-item>
+        <a-descriptions-item label="主机地址">
+          {{ detailData?.host || '-' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="端口">
+          {{ detailData?.port || '-' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="用户名">
+          {{ detailData?.username || '-' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="数据库名">
+          {{ detailData?.database || '-' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="服务器标识">
+          {{ detailData?.server_identity || '-' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="分类">
+          {{ detailData?.category || '-' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="启用监控">
+          <a-tag :color="detailData?.enabled ? 'green' : 'red'">
+            {{ detailData?.enabled ? '已启用' : '已禁用' }}
+          </a-tag>
+        </a-descriptions-item>
+        <a-descriptions-item label="采集间隔">
+          {{ detailData?.interval ? `${detailData.interval}秒` : '-' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="进程内采集">
+          <a-tag :color="detailData?.collect_on ? 'green' : 'red'">
+            {{ detailData?.collect_on ? '已启用' : '已禁用' }}
+          </a-tag>
+        </a-descriptions-item>
+        <a-descriptions-item label="采集间隔">
+          {{ detailData?.collect_interval ? `${detailData.collect_interval}秒` : '-' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="运行状态" :span="2">
+          <a-tag :color="getStatusColor(detailData?.status)">
+            {{ getStatusText(detailData?.status) }}
+          </a-tag>
+          <span v-if="detailData?.status_message" style="margin-left: 8px; color: rgb(var(--text-3))">
+            {{ detailData.status_message }}
+          </span>
+        </a-descriptions-item>
+        <a-descriptions-item label="状态码">
+          {{ detailData?.status_code || '-' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="响应时间">
+          {{ detailData?.response_time ? `${detailData.response_time.toFixed(2)}ms` : '-' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="连续错误次数">
+          <span :style="{ color: (detailData?.continuous_errors ?? 0) > 0 ? 'rgb(var(--danger-6))' : '' }">
+            {{ detailData?.continuous_errors ?? 0 }}
+          </span>
+        </a-descriptions-item>
+        <a-descriptions-item label="运行时长">
+          {{ formatUptime(detailData?.uptime) }}
+        </a-descriptions-item>
+        <a-descriptions-item label="最后检查时间">
+          {{ formatTime(detailData?.last_check_time) }}
+        </a-descriptions-item>
+        <a-descriptions-item label="最后在线时间">
+          {{ formatTime(detailData?.last_online_time) }}
+        </a-descriptions-item>
+        <a-descriptions-item label="最后离线时间">
+          {{ formatTime(detailData?.last_offline_time) }}
+        </a-descriptions-item>
+        <a-descriptions-item label="创建时间">
+          {{ formatTime(detailData?.created_at) }}
+        </a-descriptions-item>
+        <a-descriptions-item label="更新时间">
+          {{ formatTime(detailData?.updated_at) }}
+        </a-descriptions-item>
+        <a-descriptions-item label="标签" :span="2">
+          <a-tag v-for="(tag, index) in parseTags(detailData?.tags)" :key="index" style="margin-right: 4px">
+            {{ tag }}
+          </a-tag>
+          <span v-if="!parseTags(detailData?.tags).length">-</span>
+        </a-descriptions-item>
+        <a-descriptions-item label="描述" :span="2">
+          {{ detailData?.description || '-' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="采集参数" :span="2">
+          {{ detailData?.collect_args || '-' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="最近采集结果" :span="2">
+          <div v-if="detailData?.collect_last_result" class="collect-result">
+            {{ detailData.collect_last_result }}
+          </div>
+          <span v-else>-</span>
+        </a-descriptions-item>
+        <a-descriptions-item label="额外配置" :span="2">
+          <div v-if="detailData?.extra" class="extra-config">
+            <a-button size="small" @click="showExtraConfig = !showExtraConfig">
+              {{ showExtraConfig ? '隐藏' : '展开' }} JSON
+            </a-button>
+            <pre v-if="showExtraConfig" class="json-display">{{ formatJson(detailData?.extra) }}</pre>
+          </div>
+          <span v-else>-</span>
+        </a-descriptions-item>
+      </a-descriptions>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+import { Message } from '@arco-design/web-vue'
+import { fetchDatabaseDetail, type DatabaseService } from '@/api/ops/database'
+
+interface Props {
+  visible: boolean
+  recordId?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  recordId: 0,
+})
+
+const emit = defineEmits(['update:visible'])
+
+const loading = ref(false)
+const detailData = ref<DatabaseService | null>(null)
+const showExtraConfig = ref(false)
+
+watch(
+  () => props.visible,
+  (val) => {
+    if (val && props.recordId) {
+      fetchDetail()
+      showExtraConfig.value = false
+    }
+  }
+)
+
+const fetchDetail = async () => {
+  loading.value = true
+  try {
+    const res = await fetchDatabaseDetail(props.recordId)
+    detailData.value = res
+  } catch (error) {
+    console.error('获取详情失败:', error)
+    Message.error('获取详情失败')
+    detailData.value = null
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleUpdateVisible = (value: boolean) => {
+  emit('update:visible', value)
+}
+
+const handleCancel = () => {
+  emit('update:visible', false)
+}
+
+// 获取数据库类型颜色
+const getTypeColor = (type?: string) => {
+  const colorMap: Record<string, string> = {
+    MySQL: 'blue',
+    PostgreSQL: 'purple',
+    Redis: 'red',
+    MongoDB: 'green',
+    DM: 'orange',
+    KingBase: 'cyan',
+  }
+  return colorMap[type || ''] || 'gray'
+}
+
+// 获取状态颜色
+const getStatusColor = (status?: string) => {
+  const colorMap: Record<string, string> = {
+    online: 'green',
+    offline: 'red',
+    error: 'orange',
+  }
+  return colorMap[status || ''] || 'gray'
+}
+
+// 获取状态文本
+const getStatusText = (status?: string) => {
+  const textMap: Record<string, string> = {
+    online: '在线',
+    offline: '离线',
+    error: '错误',
+  }
+  return textMap[status || ''] || '-'
+}
+
+// 格式化运行时长
+const formatUptime = (uptime?: number) => {
+  if (!uptime) return '-'
+  const days = Math.floor(uptime / 86400)
+  const hours = Math.floor((uptime % 86400) / 3600)
+  const minutes = Math.floor((uptime % 3600) / 60)
+  if (days > 0) {
+    return `${days}天 ${hours}小时 ${minutes}分钟`
+  }
+  if (hours > 0) {
+    return `${hours}小时 ${minutes}分钟`
+  }
+  return `${minutes}分钟`
+}
+
+// 格式化时间
+const formatTime = (time?: string | null) => {
+  if (!time) return '-'
+  const date = new Date(time)
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  const hours = String(date.getHours()).padStart(2, '0')
+  const minutes = String(date.getMinutes()).padStart(2, '0')
+  const seconds = String(date.getSeconds()).padStart(2, '0')
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+}
+
+// 解析标签
+const parseTags = (tags?: string) => {
+  if (!tags) return []
+  return tags.split(',').filter((t) => t.trim())
+}
+
+// 格式化JSON
+const formatJson = (json?: string) => {
+  if (!json) return ''
+  try {
+    return JSON.stringify(JSON.parse(json), null, 2)
+  } catch {
+    return json
+  }
+}
+</script>
+
+<style scoped lang="less">
+.collect-result {
+  max-height: 100px;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.extra-config {
+  .json-display {
+    margin-top: 8px;
+    padding: 8px;
+    background: rgb(var(--gray-2));
+    border-radius: 4px;
+    max-height: 200px;
+    overflow-y: auto;
+    font-size: 12px;
+    white-space: pre-wrap;
+    word-break: break-all;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/ops/pages/dc/database/components/FormDialog.vue b/src/views/ops/pages/dc/database/components/FormDialog.vue
index 3e06b26..78491cd 100644
--- a/src/views/ops/pages/dc/database/components/FormDialog.vue
+++ b/src/views/ops/pages/dc/database/components/FormDialog.vue
@@ -1,7 +1,7 @@
 <template>
   <a-modal
     :visible="visible"
-    :title="isEdit ? '编辑数据库' : '新增数据库'"
+    :title="isEdit ? '编辑数据库服务' : '新增数据库服务'"
     @ok="handleOk"
     @cancel="handleCancel"
     @update:visible="handleUpdateVisible"
@@ -11,125 +11,147 @@
     <a-form ref="formRef" :model="formData" :rules="rules" layout="vertical">
       <a-row :gutter="20">
         <a-col :span="12">
-          <a-form-item field="unique_id" label="唯一标识">
+          <a-form-item field="service_identity" label="服务唯一标识">
             <a-input
-              v-model="formData.unique_id"
-              placeholder="输入为空系统自动生成UUID"
+              v-model="formData.service_identity"
+              placeholder="输入为空系统自动生成 host:port:database"
               :disabled="isEdit"
             />
           </a-form-item>
         </a-col>
         <a-col :span="12">
-          <a-form-item field="name" label="数据库名称">
-            <a-input v-model="formData.name" placeholder="请输入数据库名称" />
+          <a-form-item field="name" label="服务名称" required>
+            <a-input v-model="formData.name" placeholder="请输入服务名称（唯一）" />
           </a-form-item>
         </a-col>
       </a-row>
 
       <a-row :gutter="20">
         <a-col :span="12">
-          <a-form-item field="database" label="数据库类型">
-            <a-select v-model="formData.database" placeholder="请选择数据库类型">
+          <a-form-item field="server_identity" label="服务器标识">
+            <a-input v-model="formData.server_identity" placeholder="关联服务器唯一标识" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item field="type" label="数据库类型" required>
+            <a-select v-model="formData.type" placeholder="请选择数据库类型">
               <a-option value="MySQL">MySQL</a-option>
               <a-option value="PostgreSQL">PostgreSQL</a-option>
-              <a-option value="Oracle">Oracle</a-option>
-              <a-option value="SQL Server">SQL Server</a-option>
               <a-option value="Redis">Redis</a-option>
               <a-option value="MongoDB">MongoDB</a-option>
-              <a-option value="Elasticsearch">Elasticsearch</a-option>
-              <a-option value="Other">其它</a-option>
+              <a-option value="DM">DM（达梦）</a-option>
+              <a-option value="KingBase">KingBase（人大金仓）</a-option>
             </a-select>
           </a-form-item>
         </a-col>
-        <a-col :span="12">
-          <a-form-item field="version" label="版本">
-            <a-input v-model="formData.version" placeholder="请输入数据库版本" />
-          </a-form-item>
-        </a-col>
-      </a-row>
-
-      <a-form-item field="location" label="位置信息">
-          <a-input
-            v-model="formData.location"
-            placeholder="请输入位置信息"
-          />
-      </a-form-item>
-      
-      <a-row :gutter="20">
-        <a-col :span="12">
-          <a-form-item field="tags" label="标签">
-            <a-input v-model="formData.tags" placeholder="多个标签，逗号间隔" />
-          </a-form-item>
-        </a-col>
-        <a-col :span="12">
-          <a-form-item field="ip" label="IP 地址">
-            <a-input v-model="formData.ip" placeholder="请输入 IP 地址" />
-          </a-form-item>
-        </a-col>
       </a-row>
 
       <a-row :gutter="20">
         <a-col :span="12">
-          <a-form-item field="port" label="端口">
-            <a-input v-model="formData.port" placeholder="请输入数据库端口" />
+          <a-form-item field="host" label="主机地址" required>
+            <a-input v-model="formData.host" placeholder="请输入主机地址" />
           </a-form-item>
         </a-col>
         <a-col :span="12">
-          <a-form-item field="remote_access" label="远程访问">
-            <a-switch v-model="formData.remote_access" />
-          </a-form-item>
-        </a-col>
-      </a-row>
-      
-      <a-row :gutter="20">
-        <a-col :span="12">
-          <a-form-item field="agent_config" label="Agent 配置">
-            <a-switch v-model="formData.agent_config" />
-          </a-form-item>
-        </a-col>
-        <a-col :span="12">
-          <a-form-item v-if="formData.agent_config" field="agent_url" label="Agent URL">
-            <a-input v-model="formData.agent_url" placeholder="请输入 Agent URL" />
+          <a-form-item field="port" label="端口" required>
+            <a-input-number
+              v-model="formData.port"
+              placeholder="请输入端口"
+              :min="1"
+              :max="65535"
+              style="width: 100%"
+            />
           </a-form-item>
         </a-col>
       </a-row>
 
       <a-row :gutter="20">
         <a-col :span="12">
-          <a-form-item field="data_collection" label="数据采集">
-            <a-switch v-model="formData.data_collection" />
+          <a-form-item field="username" label="用户名">
+            <a-input v-model="formData.username" placeholder="请输入用户名" />
           </a-form-item>
         </a-col>
         <a-col :span="12">
-          <a-form-item v-if="formData.data_collection" field="collection_interval" label="采集间隔">
-            <a-select v-model="formData.collection_interval" placeholder="请选择采集间隔">
-              <a-option :value="1">1 分钟</a-option>
-              <a-option :value="5">5 分钟</a-option>
-              <a-option :value="10">10 分钟</a-option>
-              <a-option :value="30">30 分钟</a-option>
-            </a-select>
+          <a-form-item field="password" label="密码">
+            <a-input-password
+              v-model="formData.password"
+              placeholder="请输入密码"
+            />
+            <template #extra v-if="isEdit">
+              <span style="color: rgb(var(--warning-6))">编辑时密码不回显，如需修改请输入新密码</span>
+            </template>
           </a-form-item>
         </a-col>
       </a-row>
-      
+
       <a-row :gutter="20">
         <a-col :span="12">
-          <a-form-item field="status" label="状态">
-            <a-select v-model="formData.status" placeholder="请选择状态">
-              <a-option value="online">在线</a-option>
-              <a-option value="offline">离线</a-option>
-              <a-option value="maintenance">维护中</a-option>
-              <a-option value="retired">已退役</a-option>
-            </a-select>
+          <a-form-item field="database" label="数据库名">
+            <a-input v-model="formData.database" placeholder="请输入数据库名" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item field="interval" label="采集间隔(秒)">
+            <a-input-number
+              v-model="formData.interval"
+              placeholder="默认60秒"
+              :min="10"
+              :max="3600"
+              style="width: 100%"
+            />
           </a-form-item>
         </a-col>
       </a-row>
-      
-      <a-form-item field="remark" label="备注信息">
+
+      <a-form-item field="description" label="描述信息">
         <a-textarea
-          v-model="formData.remark"
-          placeholder="请输入备注信息"
-          :rows="4"
+          v-model="formData.description"
+          placeholder="请输入描述信息"
+          :rows="2"
+        />
+      </a-form-item>
+
+      <a-form-item field="tags" label="标签">
+        <a-input v-model="formData.tags" placeholder="多个标签，逗号间隔" />
+      </a-form-item>
+
+      <a-row :gutter="20">
+        <a-col :span="12">
+          <a-form-item field="enabled" label="启用监控">
+            <a-switch v-model="formData.enabled" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item field="collect_on" label="启用进程内采集">
+            <a-switch v-model="formData.collect_on" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+
+      <a-row :gutter="20" v-if="formData.collect_on">
+        <a-col :span="12">
+          <a-form-item field="collect_interval" label="进程内采集间隔(秒)">
+            <a-input-number
+              v-model="formData.collect_interval"
+              placeholder="默认60秒"
+              :min="10"
+              :max="3600"
+              style="width: 100%"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item field="collect_args" label="采集参数">
+            <a-input v-model="formData.collect_args" placeholder="采集参数配置" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+
+      <a-form-item field="extra" label="额外配置(JSON)">
+        <a-textarea
+          v-model="formData.extra"
+          placeholder='JSON格式，如：{"charset":"utf8mb4"}'
+          :rows="2"
         />
       </a-form-item>
     </a-form>
@@ -139,8 +161,14 @@
 <script lang="ts" setup>
 import { ref, reactive, computed, watch } from 'vue'
 import { Message } from '@arco-design/web-vue'
-import { v4 as uuidv4 } from 'uuid'
 import type { FormInstance } from '@arco-design/web-vue'
+import {
+  createDatabase,
+  updateDatabase,
+  type CreateDatabaseParams,
+  type UpdateDatabaseParams,
+  type DatabaseType,
+} from '@/api/ops/database'
 
 interface Props {
   visible: boolean
@@ -155,92 +183,155 @@ const emit = defineEmits(['update:visible', 'success'])
 
 const formRef = ref<FormInstance>()
 const confirmLoading = ref(false)
-const selectedLocation = ref('')
 
 const isEdit = computed(() => !!props.record?.id)
 
 const formData = reactive({
-  unique_id: '',
+  service_identity: '',
+  server_identity: '',
   name: '',
+  category: 'database',
+  type: '' as DatabaseType | '',
+  host: '',
+  port: 3306,
+  username: '',
+  password: '',
   database: '',
-  version: '',
-  location: '',
+  description: '',
+  enabled: true,
+  interval: 60,
+  extra: '',
   tags: '',
-  ip: '',
-  port: '',
-  remote_access: false,
-  agent_config: false,
-  agent_url: '',
-  data_collection: false,
-  collection_interval: 5,
-  status: 'offline',
-  remark: '',
+  collect_on: true,
+  collect_args: '',
+  collect_interval: 60,
 })
 
 const rules = {
-  name: [{ required: true, message: '请输入数据库名称' }],
-  database: [{ required: true, message: '请选择数据库类型' }],
-  ip: [{ required: true, message: '请输入 IP 地址' }],
+  name: [{ required: true, message: '请输入服务名称' }],
+  type: [{ required: true, message: '请选择数据库类型' }],
+  host: [{ required: true, message: '请输入主机地址' }],
+  port: [{ required: true, message: '请输入端口' }],
+  category: [{ required: true, message: '分类必须为database' }],
 }
 
-const locationOptions = ref([
-  { label: 'A数据中心-3层-24机柜-5U位', value: 'A数据中心-3层-24机柜-5U位' },
-  { label: 'A数据中心-3层-24机柜-6U位', value: 'A数据中心-3层-24机柜-6U位' },
-  { label: 'B数据中心-1层-12机柜-1U位', value: 'B数据中心-1层-12机柜-1U位' },
-  { label: 'B数据中心-1层-12机柜-2U位', value: 'B数据中心-1层-12机柜-2U位' },
-  { label: 'C数据中心-2层-8机柜-3U位', value: 'C数据中心-2层-8机柜-3U位' },
-])
-
 watch(
   () => props.visible,
   (val) => {
     if (val) {
       if (isEdit.value && props.record) {
-        Object.assign(formData, props.record)
+        Object.assign(formData, {
+          service_identity: props.record.service_identity || '',
+          server_identity: props.record.server_identity || '',
+          name: props.record.name || '',
+          category: props.record.category || 'database',
+          type: props.record.type || '',
+          host: props.record.host || '',
+          port: props.record.port || 3306,
+          username: props.record.username || '',
+          password: '', // 编辑时密码不回显
+          database: props.record.database || '',
+          description: props.record.description || '',
+          enabled: props.record.enabled ?? true,
+          interval: props.record.interval || 60,
+          extra: props.record.extra || '',
+          tags: props.record.tags || '',
+          collect_on: props.record.collect_on ?? true,
+          collect_args: props.record.collect_args || '',
+          collect_interval: props.record.collect_interval || 60,
+        })
       } else {
         Object.assign(formData, {
-          unique_id: '',
+          service_identity: '',
+          server_identity: '',
           name: '',
+          category: 'database',
+          type: '',
+          host: '',
+          port: 3306,
+          username: '',
+          password: '',
           database: '',
-          version: '',
-          location: '',
+          description: '',
+          enabled: true,
+          interval: 60,
+          extra: '',
           tags: '',
-          ip: '',
-          port: '',
-          remote_access: false,
-          agent_config: false,
-          agent_url: '',
-          data_collection: false,
-          collection_interval: 5,
-          status: 'offline',
-          remark: '',
+          collect_on: true,
+          collect_args: '',
+          collect_interval: 60,
         })
       }
     }
   }
 )
 
-const handleLocationSelect = (value: string) => {
-  formData.location = value
-}
-
 const handleOk = async () => {
   try {
     await formRef.value?.validate()
-    
-    if (!formData.unique_id) {
-      formData.unique_id = uuidv4()
-    }
 
     confirmLoading.value = true
-    
-    await new Promise(resolve => setTimeout(resolve, 1000))
-    
-    Message.success(isEdit.value ? '更新成功' : '创建成功')
+
+    if (isEdit.value) {
+      const updateData: UpdateDatabaseParams = {
+        service_identity: formData.service_identity,
+        server_identity: formData.server_identity,
+        name: formData.name,
+        category: formData.category,
+        type: formData.type as DatabaseType,
+        host: formData.host,
+        port: formData.port,
+        username: formData.username,
+        database: formData.database,
+        description: formData.description,
+        enabled: formData.enabled,
+        interval: formData.interval,
+        extra: formData.extra,
+        tags: formData.tags,
+        collect_on: formData.collect_on,
+        collect_args: formData.collect_args,
+        collect_interval: formData.collect_interval,
+      }
+      // 只有在编辑时输入了密码才传递
+      if (formData.password) {
+        updateData.password = formData.password
+      }
+      await updateDatabase(props.record.id, updateData)
+      Message.success('更新成功')
+    } else {
+      const createData: CreateDatabaseParams = {
+        service_identity: formData.service_identity,
+        server_identity: formData.server_identity,
+        name: formData.name,
+        category: formData.category,
+        type: formData.type as DatabaseType,
+        host: formData.host,
+        port: formData.port,
+        username: formData.username,
+        password: formData.password,
+        database: formData.database,
+        description: formData.description,
+        enabled: formData.enabled,
+        interval: formData.interval,
+        extra: formData.extra,
+        tags: formData.tags,
+        collect_on: formData.collect_on,
+        collect_args: formData.collect_args,
+        collect_interval: formData.collect_interval,
+      }
+      await createDatabase(createData)
+      Message.success('创建成功')
+    }
+
     emit('success')
     handleCancel()
-  } catch (error) {
-    console.error('验证失败:', error)
+  } catch (error: any) {
+    console.error('操作失败:', error)
+    if (error?.response?.data?.message) {
+      Message.error(error.response.data.message)
+    } else {
+      Message.error('操作失败')
+    }
   } finally {
     confirmLoading.value = false
   }
diff --git a/src/views/ops/pages/dc/database/config/columns.ts b/src/views/ops/pages/dc/database/config/columns.ts
index 98b70f1..018949d 100644
--- a/src/views/ops/pages/dc/database/config/columns.ts
+++ b/src/views/ops/pages/dc/database/config/columns.ts
@@ -6,73 +6,96 @@ export const columns = [
     slotName: 'id',
   },
   {
-    dataIndex: 'unique_id',
-    title: '唯一标识',
+    dataIndex: 'service_identity',
+    title: '服务标识',
     width: 150,
+    ellipsis: true,
+    tooltip: true,
   },
   {
     dataIndex: 'name',
-    title: '名称',
+    title: '服务名称',
     width: 150,
+    ellipsis: true,
+    tooltip: true,
   },
   {
-    dataIndex: 'database',
-    title: '数据库',
+    dataIndex: 'type',
+    title: '数据库类型',
     width: 120,
+    slotName: 'type',
   },
   {
-    dataIndex: 'version',
-    title: '版本',
-    width: 150,
-  },
-  {
-    dataIndex: 'location',
-    title: '位置信息',
-    width: 150,
-  },
-  {
-    dataIndex: 'tags',
-    title: '标签',
-    width: 120,
-  },
-  {
-    dataIndex: 'ip',
-    title: 'IP地址',
-    width: 150,
+    dataIndex: 'host',
+    title: '主机地址',
+    width: 140,
+    ellipsis: true,
+    tooltip: true,
   },
   {
     dataIndex: 'port',
     title: '端口',
+    width: 80,
+  },
+  {
+    dataIndex: 'database',
+    title: '数据库名',
+    width: 120,
+    slotName: 'database',
+  },
+  {
+    dataIndex: 'enabled',
+    title: '监控状态',
     width: 100,
+    slotName: 'enabled',
   },
   {
-    dataIndex: 'sys_indicator',
-    title: '系统指标',
-    width: 200,
-    slotName: 'sys_indicator',
-  },
-  {
-    dataIndex: 'qps',
-    title: '数据库指标 QPS',
-    width: 180,
-    slotName: 'qps',
-  },
-  {
-    dataIndex: 'conn',
-    title: '数据库指标 Conn',
-    width: 150,
-    slotName: 'conn',
+    dataIndex: 'collect_on',
+    title: '进程内采集',
+    width: 120,
+    slotName: 'collect_on',
   },
   {
     dataIndex: 'status',
-    title: '状态',
+    title: '运行状态',
     width: 100,
     slotName: 'status',
   },
+  {
+    dataIndex: 'response_time',
+    title: '响应时间(ms)',
+    width: 120,
+    slotName: 'response_time',
+  },
+  {
+    dataIndex: 'uptime',
+    title: '运行时长',
+    width: 120,
+    slotName: 'uptime',
+  },
+  {
+    dataIndex: 'last_check_time',
+    title: '最后检查时间',
+    width: 160,
+    slotName: 'last_check_time',
+  },
+  {
+    dataIndex: 'tags',
+    title: '标签',
+    width: 150,
+    slotName: 'tags',
+  },
+  {
+    dataIndex: 'description',
+    title: '描述',
+    width: 200,
+    ellipsis: true,
+    tooltip: true,
+  },
   {
     dataIndex: 'actions',
     title: '操作',
-    width: 180,
+    width: 280,
     fixed: 'right' as const,
     slotName: 'actions',
   },
diff --git a/src/views/ops/pages/dc/database/config/search-form.ts b/src/views/ops/pages/dc/database/config/search-form.ts
index af2affe..bbe6a12 100644
--- a/src/views/ops/pages/dc/database/config/search-form.ts
+++ b/src/views/ops/pages/dc/database/config/search-form.ts
@@ -5,35 +5,44 @@ export const searchFormConfig: FormItem[] = [
     field: 'keyword',
     label: '关键词',
     type: 'input',
-    placeholder: '请输入服务器名称、编码或IP',
+    placeholder: '请输入服务名称',
     span: 6,
   },
   {
-    field: 'datacenter_id',
-    label: '数据中心',
+    field: 'type',
+    label: '数据库类型',
     type: 'select',
-    placeholder: '请选择数据中心',
-    options: [], // 需要动态加载
+    placeholder: '请选择数据库类型',
+    options: [
+      { label: 'MySQL', value: 'MySQL' },
+      { label: 'PostgreSQL', value: 'PostgreSQL' },
+      { label: 'Redis', value: 'Redis' },
+      { label: 'MongoDB', value: 'MongoDB' },
+      { label: 'DM', value: 'DM' },
+      { label: 'KingBase', value: 'KingBase' },
+    ],
     span: 6,
   },
   {
-    field: 'rack_id',
-    label: '机柜',
+    field: 'enabled',
+    label: '监控状态',
     type: 'select',
-    placeholder: '请选择机柜',
-    options: [], // 需要动态加载
+    placeholder: '请选择监控状态',
+    options: [
+      { label: '已启用', value: true },
+      { label: '已禁用', value: false },
+    ],
     span: 6,
   },
   {
     field: 'status',
-    label: '状态',
+    label: '运行状态',
     type: 'select',
-    placeholder: '请选择状态',
+    placeholder: '请选择运行状态',
     options: [
       { label: '在线', value: 'online' },
       { label: '离线', value: 'offline' },
-      { label: '维护中', value: 'maintenance' },
-      { label: '已退役', value: 'retired' },
+      { label: '错误', value: 'error' },
     ],
     span: 6,
   },
diff --git a/src/views/ops/pages/dc/database/index.vue b/src/views/ops/pages/dc/database/index.vue
index b50921c..07d35e6 100644
--- a/src/views/ops/pages/dc/database/index.vue
+++ b/src/views/ops/pages/dc/database/index.vue
@@ -7,7 +7,7 @@
       :columns="columns"
       :loading="loading"
       :pagination="pagination"
-      title="数据库管理"
+      title="数据库服务管理"
       search-button-text="查询"
       reset-button-text="重置"
       @update:form-model="handleFormModelUpdate"
@@ -17,168 +17,106 @@
       @refresh="handleRefresh"
     >
       <template #toolbar-left>
-        <a-button type="primary" @click="handleAdd">
-          <template #icon>
-            <icon-plus />
-          </template>
-          新增数据库
-        </a-button>
+        <a-space>
+          <a-button type="primary" @click="handleAdd">
+            <template #icon>
+              <icon-plus />
+            </template>
+            新增数据库
+          </a-button>
+          <a-button type="outline" @click="handleCollect">
+            <template #icon>
+              <icon-sync />
+            </template>
+            指标采集
+          </a-button>
+        </a-space>
       </template>
-      
+
       <!-- ID -->
       <template #id="{ record }">
         {{ record.id }}
       </template>
-      
+
       <!-- 数据库类型 -->
+      <template #type="{ record }">
+        <a-tag :color="getTypeColor(record.type)">
+          {{ record.type }}
+        </a-tag>
+      </template>
+
+      <!-- 数据库名 -->
       <template #database="{ record }">
         {{ record.database || '-' }}
       </template>
-            
-      <!-- 版本 -->
-      <template #version="{ record }">
-        {{ record.version || '-' }}
-      </template>
-            
-      <!-- 位置信息 -->
-      <template #location="{ record }">
-        {{ record.location || '-' }}
-      </template>
-            
-      <!-- 标签 -->
-      <template #tags="{ record }">
-        <a-tag v-for="(tag, index) in (record.tags || '').split(',').filter(t => t.trim())" :key="index">
-          {{ tag.trim() }}
+
+      <!-- 监控状态 -->
+      <template #enabled="{ record }">
+        <a-tag :color="record.enabled ? 'green' : 'red'">
+          {{ record.enabled ? '已启用' : '已禁用' }}
         </a-tag>
       </template>
-            
-      <!-- IP 地址 -->
-      <template #ip="{ record }">
-        {{ record.ip || '-' }}
+
+      <!-- 进程内采集 -->
+      <template #collect_on="{ record }">
+        <a-tag :color="record.collect_on ? 'green' : 'red'">
+          {{ record.collect_on ? '已启用' : '已禁用' }}
+        </a-tag>
       </template>
-            
-      <!-- 端口 -->
-      <template #port="{ record }">
-        {{ record.port || '-' }}
-      </template>
-      
-      <!-- 系统指标 -->
-      <template #sys_indicator="{ record }">
-        <div v-if="!record.agent_config" class="not-configured">
-          未配置
-        </div>
-        <div v-else class="sys-indicator-display">
-          <!-- CPU -->
-          <div class="resource-display">
-            <div class="resource-info">
-              <span class="resource-label">CPU</span>
-              <span class="resource-value">{{ record.cpu_info?.value || 0 }}%</span>
-            </div>
-            <a-progress 
-              :percent="(record.cpu_info?.value || 0) / 100" 
-              :color="getProgressColor(record.cpu_info?.value || 0)"
-              size="small"
-              :show-text="false"
-            />
-          </div>
-          <!-- 内存 -->
-          <div class="resource-display">
-            <div class="resource-info">
-              <span class="resource-label">内存</span>
-              <span class="resource-value">{{ record.memory_info?.value || 0 }}%</span>
-            </div>
-            <a-progress 
-              :percent="(record.memory_info?.value || 0) / 100" 
-              :color="getProgressColor(record.memory_info?.value || 0)"
-              size="small"
-              :show-text="false"
-            />
-          </div>
-          <!-- 硬盘 -->
-          <div class="resource-display">
-            <div class="resource-info">
-              <span class="resource-label">硬盘</span>
-              <span class="resource-value">{{ record.disk_info?.value || 0 }}%</span>
-            </div>
-            <a-progress 
-              :percent="(record.disk_info?.value || 0) / 100" 
-              :color="getProgressColor(record.disk_info?.value || 0)"
-              size="small"
-              :show-text="false"
-            />
-          </div>
-        </div>
-      </template>
-      
-      <!-- 数据库指标 QPS -->
-      <template #qps="{ record }">
-        <QpsChart :record-id="record.id" :configured="record.agent_config" />
-      </template>
-      
-      <!-- 数据库指标 Conn -->
-      <template #conn="{ record }">
-        <ConnChart :record-id="record.id" :configured="record.agent_config" />
-      </template>
-      
-      <!-- 状态 -->
+
+      <!-- 运行状态 -->
       <template #status="{ record }">
         <a-tag :color="getStatusColor(record.status)">
           {{ getStatusText(record.status) }}
         </a-tag>
       </template>
-      
-      <!-- 操作栏 - 下拉菜单 -->
+
+      <!-- 响应时间 -->
+      <template #response_time="{ record }">
+        <span :style="{ color: getResponseTimeColor(record.response_time) }">
+          {{ record.response_time ? record.response_time.toFixed(2) : '-' }}
+        </span>
+      </template>
+
+      <!-- 运行时长 -->
+      <template #uptime="{ record }">
+        {{ formatUptime(record.uptime) }}
+      </template>
+
+      <!-- 最后检查时间 -->
+      <template #last_check_time="{ record }">
+        {{ formatTime(record.last_check_time) }}
+      </template>
+
+      <!-- 标签 -->
+      <template #tags="{ record }">
+        <a-tag
+          v-for="(tag, index) in parseTags(record.tags)"
+          :key="index"
+          style="margin-right: 4px"
+        >
+          {{ tag }}
+        </a-tag>
+        <span v-if="!parseTags(record.tags).length">-</span>
+      </template>
+
+      <!-- 操作栏 -->
       <template #actions="{ record }">
         <a-space>
-          <a-button
-            v-if="!record.agent_config"
-            type="outline"
-            size="small"
-            @click="handleQuickConfig(record)"
-          >
-            <template #icon>
-              <icon-settings />
-            </template>
-            快捷配置
+          <a-button type="text" size="small" @click="handleDetail(record)">
+            详情
+          </a-button>
+          <a-button type="text" size="small" @click="handleEdit(record)">
+            编辑
+          </a-button>
+          <a-button
+            type="text"
+            size="small"
+            status="danger"
+            @click="handleDelete(record)"
+          >
+            删除
           </a-button>
-          <a-dropdown trigger="hover">
-            <a-button type="primary" size="small">
-              管理
-              <icon-down />
-            </a-button>
-            <template #content>
-              <a-doption @click="handleRestart(record)">
-                <template #icon>
-                  <icon-refresh />
-                </template>
-                重启
-              </a-doption>
-              <a-doption @click="handleDetail(record)">
-                <template #icon>
-                  <icon-eye />
-                </template>
-                详情
-              </a-doption>
-              <a-doption @click="handleEdit(record)">
-                <template #icon>
-                  <icon-edit />
-                </template>
-                编辑
-              </a-doption>
-              <a-doption @click="handleRemoteControl(record)">
-                <template #icon>
-                  <icon-desktop />
-                </template>
-                远程控制
-              </a-doption>
-              <a-doption @click="handleDelete(record)" style="color: rgb(var(--danger-6))">
-                <template #icon>
-                  <icon-delete />
-                </template>
-                删除
-              </a-doption>
-            </template>
-          </a-dropdown>
         </a-space>
       </template>
     </search-table>
@@ -190,203 +128,58 @@
       @success="handleFormSuccess"
     />
 
-    <!-- 快捷配置对话框 -->
-    <QuickConfigDialog
-      v-model:visible="quickConfigVisible"
-      :record="currentRecord"
-      @success="handleFormSuccess"
+    <!-- 详情对话框 -->
+    <DetailDialog
+      v-model:visible="detailDialogVisible"
+      :record-id="currentRecordId"
+    />
+
+    <!-- 指标采集对话框 -->
+    <CollectDialog
+      v-model:visible="collectDialogVisible"
+      :service-list="tableData"
+      @success="handleRefresh"
     />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, computed } from 'vue'
-import { useRouter } from 'vue-router'
+import { ref, reactive, computed, onMounted } from 'vue'
 import { Message, Modal } from '@arco-design/web-vue'
-import { 
-  IconPlus, 
-  IconDown,
-  IconEdit,
-  IconDesktop,
-  IconDelete,
-  IconRefresh,
+import {
+  IconPlus,
+  IconSync,
   IconEye,
-  IconSettings
+  IconEdit,
+  IconDelete,
 } from '@arco-design/web-vue/es/icon'
 import type { FormItem } from '@/components/search-form/types'
 import SearchTable from '@/components/search-table/index.vue'
 import { searchFormConfig } from './config/search-form'
-import FormDialog from '../pc/components/FormDialog.vue'
-import QuickConfigDialog from '../pc/components/QuickConfigDialog.vue'
 import { columns as columnsConfig } from './config/columns'
-import QpsChart from './components/QpsChart.vue'
-import ConnChart from './components/ConnChart.vue'
+import FormDialog from './components/FormDialog.vue'
+import DetailDialog from './components/DetailDialog.vue'
+import CollectDialog from './components/CollectDialog.vue'
 import {
-  fetchServerList,
-  deleteServer,
-} from '@/api/ops/server'
-
-const router = useRouter()
-
-// Mock 假数据
-const mockServerData = [
-  {
-    id: 1,
-    unique_id: 'DB-2024-0001',
-    name: 'MySQL 主库 -01',
-    database: 'MySQL',
-    version: '8.0.32',
-    location: '数据中心 A-1 楼 - 机柜 01-U1',
-    tags: '生产，核心，主库',
-    ip: '192.168.1.101',
-    port: '3306',
-    remote_access: true,
-    agent_config: true,
-    cpu_info: { value: 45, total: '8核', used: '3.6核' },
-    memory_info: { value: 62, total: '32GB', used: '19.8GB' },
-    disk_info: { value: 78, total: '1TB', used: '780GB' },
-    data_collection: true,
-    status: 'online',
-  },
-  {
-    id: 2,
-    unique_id: 'DB-2024-0002',
-    name: 'PostgreSQL 从库 -01',
-    database: 'PostgreSQL',
-    version: '15.2',
-    location: '数据中心 A-1 楼 - 机柜 02-U1',
-    tags: '生产，从库，备份',
-    ip: '192.168.1.102',
-    port: '5432',
-    remote_access: true,
-    agent_config: true,
-    cpu_info: { value: 78, total: '16核', used: '12.5核' },
-    memory_info: { value: 85, total: '64GB', used: '54.4GB' },
-    disk_info: { value: 92, total: '2TB', used: '1.84TB' },
-    data_collection: true,
-    status: 'online',
-  },
-  {
-    id: 3,
-    unique_id: 'DB-2024-0003',
-    name: 'Redis 缓存 -01',
-    database: 'Redis',
-    version: '7.0.9',
-    location: '数据中心 A-2 楼 - 机柜 05-U2',
-    tags: '缓存，会话存储',
-    ip: '192.168.1.103',
-    port: '6379',
-    remote_access: false,
-    agent_config: false,
-    cpu_info: { value: 0, total: '4核', used: '0核' },
-    memory_info: { value: 0, total: '16GB', used: '0GB' },
-    disk_info: { value: 0, total: '500GB', used: '0GB' },
-    data_collection: false,
-    status: 'offline',
-  },
-  {
-    id: 4,
-    unique_id: 'DB-2024-0004',
-    name: 'MongoDB 集群 -01',
-    database: 'MongoDB',
-    version: '6.0.5',
-    location: '数据中心 A-2 楼 - 机柜 06-U1',
-    tags: '文档存储，日志',
-    ip: '192.168.1.104',
-    port: '27017',
-    remote_access: true,
-    agent_config: true,
-    cpu_info: { value: 35, total: '8核', used: '2.8核' },
-    memory_info: { value: 68, total: '32GB', used: '21.8GB' },
-    disk_info: { value: 42, total: '1TB', used: '420GB' },
-    data_collection: true,
-    status: 'online',
-  },
-  {
-    id: 5,
-    unique_id: 'DB-2024-0005',
-    name: 'Oracle 数据库 -01',
-    database: 'Oracle',
-    version: '19c',
-    location: '数据中心 B-1 楼 - 机柜 03-U1',
-    tags: '财务系统，核心',
-    ip: '192.168.2.101',
-    port: '1521',
-    remote_access: true,
-    agent_config: true,
-    cpu_info: { value: 28, total: '12核', used: '3.4核' },
-    memory_info: { value: 45, total: '48GB', used: '21.6GB' },
-    disk_info: { value: 88, total: '10TB', used: '8.8TB' },
-    data_collection: true,
-    status: 'maintenance',
-  },
-  {
-    id: 6,
-    unique_id: 'DB-2024-0006',
-    name: 'SQL Server-01',
-    database: 'SQL Server',
-    version: '2019',
-    location: '数据中心 B-2 楼 - 机柜 10-U1',
-    tags: 'OA 系统，报表',
-    ip: '192.168.2.102',
-    port: '1433',
-    remote_access: false,
-    agent_config: false,
-    cpu_info: { value: 0, total: '4核', used: '0核' },
-    memory_info: { value: 0, total: '8GB', used: '0GB' },
-    disk_info: { value: 0, total: '256GB', used: '0GB' },
-    data_collection: false,
-    status: 'retired',
-  },
-  {
-    id: 7,
-    unique_id: 'DB-2024-0007',
-    name: 'Elasticsearch-01',
-    database: 'Elasticsearch',
-    version: '8.7.0',
-    location: '数据中心 A-1 楼 - 机柜 08-U1',
-    tags: '搜索，日志分析',
-    ip: '192.168.1.105',
-    port: '9200',
-    remote_access: true,
-    agent_config: true,
-    cpu_info: { value: 55, total: '8核', used: '4.4核' },
-    memory_info: { value: 72, total: '32GB', used: '23.0GB' },
-    disk_info: { value: 65, total: '1TB', used: '650GB' },
-    data_collection: true,
-    status: 'online',
-  },
-  {
-    id: 8,
-    unique_id: 'DB-2024-0008',
-    name: 'MySQL 测试库 -01',
-    database: 'MySQL',
-    version: '8.0.30',
-    location: '数据中心 B-1 楼 - 机柜 04-U1',
-    tags: '测试，开发',
-    ip: '192.168.2.103',
-    port: '3307',
-    remote_access: true,
-    agent_config: true,
-    cpu_info: { value: 68, total: '8核', used: '5.4核' },
-    memory_info: { value: 75, total: '16GB', used: '12GB' },
-    disk_info: { value: 55, total: '500GB', used: '275GB' },
-    data_collection: true,
-    status: 'online',
-  },
-]
+  fetchDatabaseList,
+  deleteDatabase,
+  type DatabaseService,
+  type DatabaseQueryParams,
+} from '@/api/ops/database'
 
 // 状态管理
 const loading = ref(false)
-const tableData = ref<any[]>([])
+const tableData = ref<DatabaseService[]>([])
 const formDialogVisible = ref(false)
-const quickConfigVisible = ref(false)
-const currentRecord = ref<any>(null)
+const detailDialogVisible = ref(false)
+const collectDialogVisible = ref(false)
+const currentRecord = ref<DatabaseService | null>(null)
+const currentRecordId = ref(0)
 const formModel = ref({
   keyword: '',
-  datacenter_id: undefined,
-  rack_id: undefined,
-  status: undefined,
+  type: undefined as string | undefined,
+  enabled: undefined as boolean | undefined,
+  status: undefined as string | undefined,
 })
 
 const pagination = reactive({
@@ -401,67 +194,115 @@ const formItems = computed<FormItem[]>(() => searchFormConfig)
 // 表格列配置
 const columns = computed(() => columnsConfig)
 
+// 获取数据库类型颜色
+const getTypeColor = (type: string) => {
+  const colorMap: Record<string, string> = {
+    MySQL: 'blue',
+    PostgreSQL: 'purple',
+    Redis: 'red',
+    MongoDB: 'green',
+    DM: 'orange',
+    KingBase: 'cyan',
+  }
+  return colorMap[type] || 'gray'
+}
+
 // 获取状态颜色
-const getStatusColor = (status?: string) => {
+const getStatusColor = (status: string) => {
   const colorMap: Record<string, string> = {
     online: 'green',
     offline: 'red',
-    maintenance: 'orange',
-    retired: 'gray',
+    error: 'orange',
   }
-  return colorMap[status || ''] || 'gray'
+  return colorMap[status] || 'gray'
 }
 
 // 获取状态文本
-const getStatusText = (status?: string) => {
+const getStatusText = (status: string) => {
   const textMap: Record<string, string> = {
     online: '在线',
     offline: '离线',
-    maintenance: '维护中',
-    retired: '已退役',
+    error: '错误',
   }
-  return textMap[status || ''] || '-'
+  return textMap[status] || '-'
 }
 
-// 获取进度条颜色
-const getProgressColor = (value: number) => {
-  if (value >= 90) return '#F53F3F' // 红色
-  if (value >= 70) return '#FF7D00' // 橙色
-  if (value >= 50) return '#FFD00B' // 黄色
-  return '#00B42A' // 绿色
+// 获取响应时间颜色
+const getResponseTimeColor = (responseTime: number) => {
+  if (!responseTime) return ''
+  if (responseTime >= 1000) return 'rgb(var(--danger-6))'
+  if (responseTime >= 500) return 'rgb(var(--warning-6))'
+  return 'rgb(var(--success-6))'
 }
 
-// 获取数据库列表（使用 Mock 数据）
-const fetchServers = async () => {
+// 格式化运行时长
+const formatUptime = (uptime: number) => {
+  if (!uptime) return '-'
+  const days = Math.floor(uptime / 86400)
+  const hours = Math.floor((uptime % 86400) / 3600)
+  const minutes = Math.floor((uptime % 3600) / 60)
+  if (days > 0) {
+    return `${days}天 ${hours}小时`
+  }
+  if (hours > 0) {
+    return `${hours}小时 ${minutes}分钟`
+  }
+  return `${minutes}分钟`
+}
+
+// 格式化时间
+const formatTime = (time: string) => {
+  if (!time) return '-'
+  const date = new Date(time)
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  const hours = String(date.getHours()).padStart(2, '0')
+  const minutes = String(date.getMinutes()).padStart(2, '0')
+  const seconds = String(date.getSeconds()).padStart(2, '0')
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+}
+
+// 解析标签
+const parseTags = (tags: string) => {
+  if (!tags) return []
+  return tags.split(',').filter((t) => t.trim())
+}
+
+// 获取数据库列表
+const fetchList = async () => {
   loading.value = true
-  
   try {
-    // 模拟网络延迟
-    await new Promise(resolve => setTimeout(resolve, 500))
-    
-    // 使用 Mock 数据
-    tableData.value = mockServerData
-    pagination.total = mockServerData.length
-    
-    // 如果有搜索条件，进行过滤
-    if (formModel.value.keyword || formModel.value.status) {
-      let filteredData = [...mockServerData]
-      
-      if (formModel.value.keyword) {
-        const keyword = formModel.value.keyword.toLowerCase()
-        filteredData = filteredData.filter(item => 
-          item.name.toLowerCase().includes(keyword) ||
-          item.unique_id.toLowerCase().includes(keyword) ||
-          item.ip.toLowerCase().includes(keyword)
-        )
-      }
-      
-      if (formModel.value.status) {
-        filteredData = filteredData.filter(item => item.status === formModel.value.status)
-      }
-      
-      tableData.value = filteredData
-      pagination.total = filteredData.length
+    const params: DatabaseQueryParams = {
+      page: pagination.current,
+      size: pagination.pageSize,
+    }
+
+    if (formModel.value.keyword) {
+      params.keyword = formModel.value.keyword
+    }
+    if (formModel.value.enabled !== undefined) {
+      params.enabled = formModel.value.enabled
+    }
+
+    const res: any = await fetchDatabaseList(params)
+    tableData.value = res?.details?.data || []
+    pagination.total = res?.details?.total || 0
+
+    // 前端过滤数据库类型（API不支持type过滤）
+    if (formModel.value.type) {
+      tableData.value = tableData.value.filter(
+        (item) => item.type === formModel.value.type
+      )
+      pagination.total = tableData.value.length
+    }
+
+    // 前端过滤运行状态（API不支持status过滤）
+    if (formModel.value.status) {
+      tableData.value = tableData.value.filter(
+        (item) => item.status === formModel.value.status
+      )
+      pagination.total = tableData.value.length
     }
   } catch (error) {
     console.error('获取数据库列表失败:', error)
@@ -476,7 +317,7 @@ const fetchServers = async () => {
 // 搜索
 const handleSearch = () => {
   pagination.current = 1
-  fetchServers()
+  fetchList()
 }
 
 // 处理表单模型更新
@@ -488,23 +329,23 @@ const handleFormModelUpdate = (value: any) => {
 const handleReset = () => {
   formModel.value = {
     keyword: '',
-    datacenter_id: undefined,
-    rack_id: undefined,
+    type: undefined,
+    enabled: undefined,
     status: undefined,
   }
   pagination.current = 1
-  fetchServers()
+  fetchList()
 }
 
 // 分页变化
 const handlePageChange = (current: number) => {
   pagination.current = current
-  fetchServers()
+  fetchList()
 }
 
 // 刷新
 const handleRefresh = () => {
-  fetchServers()
+  fetchList()
   Message.success('数据已刷新')
 }
 
@@ -514,91 +355,59 @@ const handleAdd = () => {
   formDialogVisible.value = true
 }
 
-// 快捷配置
-const handleQuickConfig = (record: any) => {
-  currentRecord.value = record
-  quickConfigVisible.value = true
+// 查看详情
+const handleDetail = (record: DatabaseService) => {
+  currentRecordId.value = record.id
+  detailDialogVisible.value = true
 }
 
 // 编辑数据库
-const handleEdit = (record: any) => {
+const handleEdit = (record: DatabaseService) => {
   currentRecord.value = record
   formDialogVisible.value = true
 }
 
+// 指标采集
+const handleCollect = () => {
+  collectDialogVisible.value = true
+}
+
 // 表单提交成功
 const handleFormSuccess = () => {
-  fetchServers()
-}
-
-// 重启数据库
-const handleRestart = (record: any) => {
-  Modal.confirm({
-    title: '确认重启',
-    content: `确认重启数据库 ${record.name} 吗？`,
-    onOk: () => {
-      Message.info('正在发送重启指令...')
-    },
-  })
-}
-
-// 查看详情 - 在当前窗口打开
-const handleDetail = (record: any) => {
-  router.push({
-    path: '/dc/detail',
-    query: {
-      id: record.id,
-      name: record.name,
-      ip: record.ip,
-      status: record.status,
-    },
-  })
-}
-
-// 远程控制 - 在新窗口打开
-const handleRemoteControl = (record: any) => {
-  const url = router.resolve({
-    path: '/dc/remote',
-    query: {
-      id: record.id,
-      name: record.name,
-      ip: record.ip,
-      status: record.status,
-    },
-  }).href
-  window.open(url, '_blank')
+  fetchList()
 }
 
 // 删除数据库
-const handleDelete = async (record: any) => {
-  try {
-    Modal.confirm({
-      title: '确认删除',
-      content: `确认删除数据库 ${record.name} 吗？`,
-      onOk: async () => {
-        // Mock 删除操作
-        const index = mockServerData.findIndex(item => item.id === record.id)
-        if (index > -1) {
-          mockServerData.splice(index, 1)
-          Message.success('删除成功')
-          fetchServers()
+const handleDelete = (record: DatabaseService) => {
+  Modal.confirm({
+    title: '确认删除',
+    content: `确认删除数据库服务「${record.name}」吗？此操作为软删除。`,
+    onOk: async () => {
+      try {
+        await deleteDatabase(record.id)
+        Message.success('删除成功')
+        fetchList()
+      } catch (error: any) {
+        console.error('删除数据库失败:', error)
+        if (error?.response?.data?.message) {
+          Message.error(error.response.data.message)
         } else {
           Message.error('删除失败')
         }
-      },
-    })
-  } catch (error) {
-    console.error('删除数据库失败:', error)
-  }
+      }
+    },
+  })
 }
 
 // 初始化加载数据
-fetchServers()
+onMounted(() => {
+  fetchList()
+})
 </script>
 
 <script lang="ts">
 export default {
-  name: 'DataCenterServer',
+  name: 'DatabaseServiceManage',
 }
 </script>
 
@@ -606,55 +415,4 @@ export default {
 .container {
   margin-top: 20px;
 }
-
-.not-configured {
-  color: rgb(var(--text-3));
-  font-size: 12px;
-  text-align: center;
-  padding: 8px 0;
-}
-
-.sys-indicator-display {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.resource-display {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding: 2px 0;
-  
-  .resource-info {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    
-    .resource-label {
-      font-size: 12px;
-      color: rgb(var(--text-2));
-    }
-    
-    .resource-value {
-      font-size: 12px;
-      font-weight: 500;
-      color: rgb(var(--text-1));
-    }
-  }
-  
-  :deep(.arco-progress) {
-    margin: 0;
-    
-    .arco-progress-bar-bg {
-      border-radius: 2px;
-    }
-    
-    .arco-progress-bar {
-      border-radius: 2px;
-      transition: all 0.3s ease;
-    }
-  }
-}
-
 </style>
diff --git a/src/views/ops/pages/dc/middleware/components/Detail.vue b/src/views/ops/pages/dc/middleware/components/Detail.vue
index a40f3e8..b7b8b01 100644
--- a/src/views/ops/pages/dc/middleware/components/Detail.vue
+++ b/src/views/ops/pages/dc/middleware/components/Detail.vue
@@ -1,256 +1,392 @@
 <template>
-  <div class="server-detail">
-    <div class="detail-header">
-      <div class="server-info">
-        <h2>{{ record.name || '办公PC详情' }}</h2>
-        <div class="info-tags">
-          <a-tag :color="getStatusColor(record.status)">{{ getStatusText(record.status) }}</a-tag>
-          <a-tag color="blue">{{ record.server_type || '未知类型' }}</a-tag>
-          <a-tag color="cyan">{{ record.os || '未知系统' }}</a-tag>
+  <div class="middleware-detail">
+    <!-- 头部信息卡片 -->
+    <div class="detail-header-card">
+      <div class="header-left">
+        <div class="service-icon" :class="getTypeClass(record.type)">
+          <span class="icon-text">{{ getTypeAbbr(record.type) }}</span>
+        </div>
+        <div class="service-info">
+          <div class="service-title">
+            <h2>{{ record.name || '中间件服务' }}</h2>
+            <div class="status-tags">
+              <a-tag :color="getStatusColor(record.status)" size="large">
+                <template #icon>
+                  <span class="status-dot" :class="record.status"></span>
+                </template>
+                {{ getStatusText(record.status) }}
+              </a-tag>
+              <a-tag v-if="record.enabled" color="green" size="large">已启用</a-tag>
+              <a-tag v-else color="gray" size="large">已禁用</a-tag>
+            </div>
+          </div>
+          <div class="service-meta">
+            <span class="meta-item">
+              <icon-idcard />
+              <span class="meta-label">服务标识:</span>
+              <span class="meta-value copyable" @click="copyToClipboard(record.service_identity)">
+                {{ record.service_identity || '-' }}
+                <icon-copy v-if="record.service_identity" class="copy-icon" />
+              </span>
+            </span>
+            <span class="meta-item">
+              <icon-apps />
+              <span class="meta-label">类型:</span>
+              <a-tag :color="getTypeColor(record.type)" size="small">{{ record.type || '-' }}</a-tag>
+            </span>
+            <span class="meta-item">
+              <icon-clock-circle />
+              <span class="meta-label">运行:</span>
+              <span class="meta-value uptime">{{ formatUptime(record.uptime) }}</span>
+            </span>
+            <span class="meta-item" v-if="record.server_identity">
+              <icon-desktop />
+              <span class="meta-label">服务器:</span>
+              <a-link @click="handleViewServer">{{ record.server_identity }}</a-link>
+            </span>
+          </div>
         </div>
       </div>
       <div class="header-actions">
-        <a-button @click="handleRemoteControl">
-          <template #icon>
-            <icon-desktop />
-          </template>
-          远程登录
+        <a-button size="small" @click="handleEdit">
+          <template #icon><icon-edit /></template>
+          编辑
         </a-button>
-        <a-button type="primary" @click="handleRestart">
-          <template #icon>
-            <icon-refresh />
-          </template>
-          重启
+        <a-button size="small" @click="handleQuickConfig">
+          <template #icon><icon-settings /></template>
+          采集配置
+        </a-button>
+        <a-button size="small" status="danger" @click="handleDelete">
+          <template #icon><icon-delete /></template>
+          删除
         </a-button>
       </div>
     </div>
 
+    <!-- 核心指标卡片 -->
+    <div class="metrics-grid">
+      <div class="metric-card" :class="{ 'has-issue': record.continuous_errors > 0 }">
+        <div class="metric-header">
+          <icon-clock-circle class="metric-icon blue" />
+          <span class="metric-title">响应时间</span>
+        </div>
+        <div class="metric-body">
+          <span class="metric-value" :class="getResponseTimeClass(record.response_time)">
+            {{ record.response_time || 0 }}
+          </span>
+          <span class="metric-unit">ms</span>
+        </div>
+        <div class="metric-footer">
+          <span class="metric-label">最后检查：{{ formatTime(record.last_check_time) }}</span>
+        </div>
+      </div>
+
+      <div class="metric-card" :class="{ 'has-issue': record.status_code !== 200 }">
+        <div class="metric-header">
+          <icon-check-circle class="metric-icon" :class="record.status_code === 200 ? 'green' : 'red'" />
+          <span class="metric-title">HTTP 状态</span>
+        </div>
+        <div class="metric-body">
+          <span class="metric-value" :class="record.status_code === 200 ? 'success' : 'error'">
+            {{ record.status_code || '-' }}
+          </span>
+        </div>
+        <div class="metric-footer">
+          <span class="metric-label" :title="record.status_message">{{ formatStatusMessage(record.status_message) }}</span>
+        </div>
+      </div>
+
+      <div class="metric-card" :class="{ 'has-issue': record.continuous_errors > 0 }">
+        <div class="metric-header">
+          <icon-exclamation-circle class="metric-icon" :class="record.continuous_errors > 0 ? 'red' : 'green'" />
+          <span class="metric-title">连续错误</span>
+        </div>
+        <div class="metric-body">
+          <span class="metric-value" :class="record.continuous_errors > 0 ? 'error' : 'success'">
+            {{ record.continuous_errors || 0 }}
+          </span>
+          <span class="metric-unit">次</span>
+        </div>
+        <div class="metric-footer">
+          <span class="metric-label">{{ record.continuous_errors > 0 ? '需要关注' : '运行正常' }}</span>
+        </div>
+      </div>
+
+      <div class="metric-card" :class="{ 'highlight': record.collect_on }">
+        <div class="metric-header">
+          <icon-sync class="metric-icon" :class="record.collect_on ? 'green' : 'gray'" :spin="record.collect_on" />
+          <span class="metric-title">数据采集</span>
+        </div>
+        <div class="metric-body">
+          <a-switch :model-value="record.collect_on" readonly size="small" />
+          <span class="metric-value collect-status" :class="record.collect_on ? 'on' : 'off'">
+            {{ record.collect_on ? '运行中' : '已停止' }}
+          </span>
+        </div>
+        <div class="metric-footer">
+          <span class="metric-label">间隔：{{ record.collect_interval || record.interval || 60 }}s</span>
+        </div>
+      </div>
+
+      <div class="metric-card" :class="{ 'highlight': record.agent_config }">
+        <div class="metric-header">
+          <icon-code class="metric-icon" :class="record.agent_config ? 'arcoblue' : 'gray'" />
+          <span class="metric-title">Agent 配置</span>
+        </div>
+        <div class="metric-body">
+          <a-tag :color="record.agent_config ? 'arcoblue' : 'gray'" size="small">
+            {{ record.agent_config ? '已配置' : '未配置' }}
+          </a-tag>
+        </div>
+        <div class="metric-footer">
+          <span class="metric-label" :title="record.agent_config">{{ formatUrl(record.agent_config) }}</span>
+        </div>
+      </div>
+
+      <div class="metric-card" :class="{ 'highlight': record.last_check_time }">
+        <div class="metric-header">
+          <icon-schedule class="metric-icon purple" />
+          <span class="metric-title">最近采集</span>
+        </div>
+        <div class="metric-body">
+          <a-tag :color="getCollectResultColor(record.collect_last_result)" size="small">
+            {{ record.collect_last_result || '无记录' }}
+          </a-tag>
+        </div>
+        <div class="metric-footer">
+          <span class="metric-label">参数：{{ record.collect_args || '无' }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 详情标签页 -->
     <a-tabs v-model:active-tab="activeTab" class="detail-tabs">
-      <a-tab-pane key="overview" title="实例详情">
-        <a-descriptions :column="2" bordered class="info-descriptions">
-          <a-descriptions-item label="唯一标识">{{ record.unique_id || '-' }}</a-descriptions-item>
-          <a-descriptions-item label="办公PC名称">{{ record.name || '-' }}</a-descriptions-item>
-          <a-descriptions-item label="操作系统">{{ record.os || '-' }}</a-descriptions-item>
-          <a-descriptions-item label="位置信息">{{ record.location || '-' }}</a-descriptions-item>
-          <a-descriptions-item label="标签">{{ record.tags || '-' }}</a-descriptions-item>
-          <a-descriptions-item label="IP地址">{{ record.ip || '-' }}</a-descriptions-item>
-          <a-descriptions-item label="远程端口">{{ record.remote_port || '-' }}</a-descriptions-item>
-          <a-descriptions-item label="Agent URL">{{ record.agent_url || '-' }}</a-descriptions-item>
-          <a-descriptions-item label="数据采集">
-            <a-tag :color="record.data_collection ? 'green' : 'gray'">
-              {{ record.data_collection ? '已开启' : '未开启' }}
-            </a-tag>
-          </a-descriptions-item>
-          <a-descriptions-item label="采集间隔">{{ record.collection_interval ? `${record.collection_interval}分钟` : '-' }}</a-descriptions-item>
-          <a-descriptions-item label="备注信息" :span="2">{{ record.remark || '-' }}</a-descriptions-item>
-        </a-descriptions>
-      </a-tab-pane>
-
-      <a-tab-pane key="monitor" title="监控">
-        <div class="monitor-section">
-          <div class="time-selector">
-            <a-radio-group v-model="timeRange" type="button">
-              <a-radio value="1h">1小时</a-radio>
-              <a-radio value="3h">3小时</a-radio>
-              <a-radio value="6h">6小时</a-radio>
-              <a-radio value="12h">12小时</a-radio>
-              <a-radio value="1d">1天</a-radio>
-              <a-radio value="3d">3天</a-radio>
-              <a-radio value="7d">7天</a-radio>
-              <a-radio value="14d">14天</a-radio>
-              <a-radio value="custom">自定义</a-radio>
-            </a-radio-group>
+      <a-tab-pane key="basic" title="基本信息">
+        <div class="info-section">
+          <div class="info-group">
+            <div class="group-title">
+              <icon-apps /> 服务基础信息
+            </div>
+            <div class="info-grid">
+              <div class="info-item">
+                <span class="info-label">服务标识</span>
+                <span class="info-value">
+                  <a-tag color="arcoblue" size="large">{{ record.service_identity || '-' }}</a-tag>
+                </span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">服务名称</span>
+                <span class="info-value highlight">{{ record.name || '-' }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">中间件类型</span>
+                <span class="info-value">
+                  <a-tag :color="getTypeColor(record.type)" size="large">{{ record.type || '-' }}</a-tag>
+                </span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">分类</span>
+                <span class="info-value">
+                  <a-tag color="gray" size="small">{{ record.category || 'middleware' }}</a-tag>
+                </span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">服务器标识</span>
+                <span class="info-value">
+                  <span v-if="record.server_identity" class="server-link" @click="handleViewServer">
+                    <icon-desktop class="server-icon" />
+                    {{ record.server_identity }}
+                  </span>
+                  <span v-else class="empty-value">未关联</span>
+                </span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">启用状态</span>
+                <span class="info-value">
+                  <a-tag :color="record.enabled ? 'green' : 'gray'" size="large">
+                    {{ record.enabled ? '已启用' : '已禁用' }}
+                  </a-tag>
+                </span>
+              </div>
+              <div class="info-item full-width">
+                <span class="info-label">描述</span>
+                <span class="info-value">{{ record.description || '-' }}</span>
+              </div>
+              <div class="info-item full-width">
+                <span class="info-label">标签</span>
+                <span class="info-value">
+                  <template v-if="record.tags && record.tags.trim()">
+                    <a-tag v-for="(tag, index) in record.tags.split(',').filter(t => t.trim())" :key="index" color="gray" size="small">{{ tag.trim() }}</a-tag>
+                  </template>
+                  <span v-else class="empty-value">无标签</span>
+                </span>
+              </div>
+            </div>
           </div>
-
-          <a-row :gutter="20" class="charts-row">
-            <a-col :span="8" class="chart-col">
-              <div class="chart-card">
-                <div class="chart-header">
-                  <span class="chart-title">CPU使用率_宿主机视角 (%)</span>
-                  <div class="chart-actions">
-                    <a-select v-model="cpuMetric" size="small" style="width: 120px">
-                      <a-option value="average">平均值</a-option>
-                      <a-option value="max">最大值</a-option>
-                      <a-option value="min">最小值</a-option>
-                    </a-select>
-                    <icon-settings />
-                  </div>
-                </div>
-                <v-chart :option="cpuOption" class="chart" autoresize />
-                <div class="chart-legend">
-                  <span class="legend-item"><span class="legend-dot green"></span>(ECS)CPU使用率_平均值</span>
-                  <span class="legend-item"><span class="legend-dot blue"></span>(ECS)CPU使用率_最小值</span>
-                  <span class="legend-item"><span class="legend-dot purple"></span>(ECS)CPU使用率_最大值</span>
-                </div>
-              </div>
-            </a-col>
-
-            <a-col :span="8" class="chart-col">
-              <div class="chart-card">
-                <div class="chart-header">
-                  <span class="chart-title">总带宽 (bit/s)</span>
-                  <div class="chart-actions">
-                    <a-select v-model="bandwidthMetric" size="small" style="width: 120px">
-                      <a-option value="average">平均值</a-option>
-                      <a-option value="max">最大值</a-option>
-                    </a-select>
-                    <icon-settings />
-                  </div>
-                </div>
-                <v-chart :option="bandwidthOption" class="chart" autoresize />
-                <div class="chart-legend">
-                  <span class="legend-item"><span class="legend-dot green"></span>内网流入带宽</span>
-                  <span class="legend-item"><span class="legend-dot blue"></span>内网流出带宽</span>
-                </div>
-              </div>
-            </a-col>
-
-            <a-col :span="8" class="chart-col">
-              <div class="chart-card">
-                <div class="chart-header">
-                  <span class="chart-title">公网带宽 (bit/s)</span>
-                  <div class="chart-actions">
-                    <a-select v-model="publicBandwidthMetric" size="small" style="width: 120px">
-                      <a-option value="average">平均值</a-option>
-                      <a-option value="max">最大值</a-option>
-                    </a-select>
-                    <icon-settings />
-                  </div>
-                </div>
-                <v-chart :option="publicBandwidthOption" class="chart" autoresize />
-                <div class="chart-legend">
-                  <span class="legend-item"><span class="legend-dot blue"></span>公网流入带宽</span>
-                  <span class="legend-item"><span class="legend-dot green"></span>公网流出带宽</span>
-                </div>
-              </div>
-            </a-col>
-          </a-row>
-
-          <a-row :gutter="20" class="charts-row">
-            <a-col :span="8" class="chart-col">
-              <div class="chart-card">
-                <div class="chart-header">
-                  <span class="chart-title">公网流出带宽使用率 (%)</span>
-                  <div class="chart-actions">
-                    <a-select v-model="bandwidthUsageMetric" size="small" style="width: 120px">
-                      <a-option value="average">平均值</a-option>
-                      <a-option value="max">最大值</a-option>
-                    </a-select>
-                    <icon-settings />
-                  </div>
-                </div>
-                <v-chart :option="bandwidthUsageOption" class="chart" autoresize />
-                <div class="chart-legend">
-                  <span class="legend-item"><span class="legend-dot blue"></span>(ECS)公网流出带宽使用率</span>
-                </div>
-              </div>
-            </a-col>
-
-            <a-col :span="8" class="chart-col">
-              <div class="chart-card">
-                <div class="chart-header">
-                  <span class="chart-title">磁盘读取写入BPS (bytes/s)</span>
-                  <div class="chart-actions">
-                    <a-select v-model="diskMetric" size="small" style="width: 120px">
-                      <a-option value="average">平均值</a-option>
-                      <a-option value="max">最大值</a-option>
-                    </a-select>
-                    <icon-settings />
-                  </div>
-                </div>
-                <v-chart :option="diskBpsOption" class="chart" autoresize />
-                <div class="chart-legend">
-                  <span class="legend-item"><span class="legend-dot blue"></span>(ECS)所有磁盘读取BPS</span>
-                  <span class="legend-item"><span class="legend-dot green"></span>(ECS)所有磁盘写入BPS</span>
-                </div>
-              </div>
-            </a-col>
-
-            <a-col :span="8" class="chart-col">
-              <div class="chart-card">
-                <div class="chart-header">
-                  <span class="chart-title">磁盘读取写入IOPS (Count/Second)</span>
-                  <div class="chart-actions">
-                    <a-select v-model="diskIopsMetric" size="small" style="width: 120px">
-                      <a-option value="average">平均值</a-option>
-                      <a-option value="max">最大值</a-option>
-                    </a-select>
-                    <icon-settings />
-                  </div>
-                </div>
-                <v-chart :option="diskIopsOption" class="chart" autoresize />
-                <div class="chart-legend">
-                  <span class="legend-item"><span class="legend-dot blue"></span>(ECS)所有磁盘每秒读取次数</span>
-                  <span class="legend-item"><span class="legend-dot green"></span>(ECS)所有磁盘每秒写入次数</span>
-                </div>
-              </div>
-            </a-col>
-          </a-row>
-
-          <a-row :gutter="20" class="charts-row">
-            <a-col :span="8" class="chart-col">
-              <div class="chart-card">
-                <div class="chart-header">
-                  <span class="chart-title">同时连接数 (Count)</span>
-                  <div class="chart-actions">
-                    <a-select v-model="connectionMetric" size="small" style="width: 120px">
-                      <a-option value="average">平均值</a-option>
-                      <a-option value="max">最大值</a-option>
-                    </a-select>
-                    <icon-settings />
-                  </div>
-                </div>
-                <v-chart :option="connectionOption" class="chart" autoresize />
-                <div class="chart-legend">
-                  <span class="legend-item"><span class="legend-dot blue"></span>同时连接数</span>
-                </div>
-              </div>
-            </a-col>
-
-            <a-col :span="8" class="chart-col">
-              <div class="chart-card">
-                <div class="chart-header">
-                  <span class="chart-title">RDMA流量使用信息 (bit/s)</span>
-                  <div class="chart-actions">
-                    <a-select v-model="rdmaMetric" size="small" style="width: 120px">
-                      <a-option value="average">平均值</a-option>
-                      <a-option value="max">最大值</a-option>
-                    </a-select>
-                    <icon-settings />
-                  </div>
-                </div>
-                <v-chart :option="rdmaOption" class="chart" autoresize />
-                <div class="chart-legend">
-                  <span class="legend-item"></span>
-                </div>
-              </div>
-            </a-col>
-
-            <a-col :span="8" class="chart-col">
-              <div class="chart-card">
-                <div class="chart-header">
-                  <span class="chart-title">RDMA资源使用信息 (Count)</span>
-                  <div class="chart-actions">
-                    <a-select v-model="rdmaResourceMetric" size="small" style="width: 120px">
-                      <a-option value="average">平均值</a-option>
-                      <a-option value="max">最大值</a-option>
-                    </a-select>
-                    <icon-settings />
-                  </div>
-                </div>
-                <v-chart :option="rdmaResourceOption" class="chart" autoresize />
-                <div class="chart-legend">
-                  <span class="legend-item"></span>
-                </div>
-              </div>
-            </a-col>
-          </a-row>
         </div>
       </a-tab-pane>
 
-      <a-tab-pane key="operation" title="操作记录">
-        <div class="operation-records">
-          <a-empty description="暂无操作记录" />
+      <a-tab-pane key="collect" title="采集配置">
+        <div class="info-section">
+          <div class="info-group">
+            <div class="group-title">
+              <icon-link /> URL 配置
+            </div>
+            <div class="info-grid">
+              <div class="info-item full-width">
+                <span class="info-label">状态检查 URL</span>
+                <span class="info-value">
+                  <div v-if="record.status_url" class="url-box">
+                    <a-tag :color="record.status ? 'green' : 'gray'" size="small">{{ record.status || '未知' }}</a-tag>
+                    <a-link :href="record.status_url" target="_blank" class="url-link">
+                      <icon-link /> {{ record.status_url }}
+                    </a-link>
+                  </div>
+                  <span v-else class="empty-value">未配置</span>
+                </span>
+              </div>
+              <div class="info-item full-width">
+                <span class="info-label">Agent 配置 URL</span>
+                <span class="info-value">
+                  <div v-if="record.agent_config" class="url-box">
+                    <a-tag color="arcoblue" size="small">Agent</a-tag>
+                    <a-link :href="record.agent_config" target="_blank" class="url-link">
+                      <icon-link /> {{ record.agent_config }}
+                    </a-link>
+                  </div>
+                  <span v-else class="empty-value">未配置</span>
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <div class="info-group">
+            <div class="group-title">
+              <icon-sync :spin="record.collect_on" /> 采集参数
+            </div>
+            <div class="info-grid">
+              <div class="info-item">
+                <span class="info-label">采集间隔</span>
+                <span class="info-value">
+                  <a-tag color="blue" size="small">{{ record.interval || 60 }} 秒</a-tag>
+                </span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">周期采集间隔</span>
+                <span class="info-value">
+                  <a-tag color="green" size="small">{{ record.collect_interval || record.interval || 60 }} 秒</a-tag>
+                </span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">参与周期采集</span>
+                <span class="info-value">
+                  <a-tag :color="record.collect_on ? 'green' : 'gray'" size="small">
+                    {{ record.collect_on ? '是' : '否' }}
+                  </a-tag>
+                </span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">采集参数</span>
+                <span class="info-value code">{{ record.collect_args || '-' }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">最近采集结果</span>
+                <span class="info-value">
+                  <a-tag v-if="record.collect_last_result" :color="getCollectResultColor(record.collect_last_result)" size="large">
+                    {{ record.collect_last_result }}
+                  </a-tag>
+                  <span v-else class="empty-value">无记录</span>
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <div class="info-group" v-if="record.extra">
+            <div class="group-title">
+              <icon-code /> 额外配置
+            </div>
+            <div class="extra-config">
+              <pre>{{ formatExtra(record.extra) }}</pre>
+            </div>
+          </div>
+        </div>
+      </a-tab-pane>
+
+      <a-tab-pane key="status" title="运行状态">
+        <div class="info-section">
+          <div class="info-group">
+            <div class="group-title">
+              <icon-check-circle /> 当前状态
+            </div>
+            <div class="info-grid">
+              <div class="info-item">
+                <span class="info-label">运行状态</span>
+                <span class="info-value">
+                  <a-tag :color="getStatusColor(record.status)" size="large">{{ getStatusText(record.status) }}</a-tag>
+                </span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">状态码</span>
+                <span class="info-value">{{ record.status_code || '-' }}</span>
+              </div>
+              <div class="info-item full-width">
+                <span class="info-label">状态消息</span>
+                <span class="info-value">{{ record.status_message || '-' }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">响应时间</span>
+                <span class="info-value">{{ record.response_time || 0 }} ms</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">运行时长</span>
+                <span class="info-value">{{ formatUptime(record.uptime) }}</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="info-group">
+            <div class="group-title">
+              <icon-schedule /> 时间记录
+            </div>
+            <div class="info-grid">
+              <div class="info-item">
+                <span class="info-label">最后检查时间</span>
+                <span class="info-value">{{ formatTime(record.last_check_time) }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">最后在线时间</span>
+                <span class="info-value">{{ formatTime(record.last_online_time) }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">最后离线时间</span>
+                <span class="info-value">{{ formatTime(record.last_offline_time) }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">连续错误次数</span>
+                <span class="info-value">
+                  <a-tag :color="record.continuous_errors > 0 ? 'red' : 'green'">
+                    {{ record.continuous_errors || 0 }}
+                  </a-tag>
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <div class="info-group">
+            <div class="group-title">
+              <icon-clock-circle /> 创建信息
+            </div>
+            <div class="info-grid">
+              <div class="info-item">
+                <span class="info-label">创建时间</span>
+                <span class="info-value">{{ formatTime(record.created_at) }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">更新时间</span>
+                <span class="info-value">{{ formatTime(record.updated_at) }}</span>
+              </div>
+            </div>
+          </div>
         </div>
       </a-tab-pane>
     </a-tabs>
@@ -258,448 +394,531 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref } from 'vue'
 import { Message } from '@arco-design/web-vue'
-import { IconDesktop, IconRefresh, IconSettings } from '@arco-design/web-vue/es/icon'
-import VChart from 'vue-echarts'
-import { use } from 'echarts/core'
-import { CanvasRenderer } from 'echarts/renderers'
-import { LineChart } from 'echarts/charts'
 import {
-  TitleComponent,
-  TooltipComponent,
-  LegendComponent,
-  GridComponent,
-  DataZoomComponent,
-} from 'echarts/components'
-
-use([
-  CanvasRenderer,
-  LineChart,
-  TitleComponent,
-  TooltipComponent,
-  LegendComponent,
-  GridComponent,
-  DataZoomComponent,
-])
+  IconEdit,
+  IconSettings,
+  IconDelete,
+  IconClockCircle,
+  IconCheckCircle,
+  IconExclamationCircle,
+  IconSync,
+  IconIdcard,
+  IconApps,
+  IconLink,
+  IconDesktop,
+  IconCode,
+  IconSchedule,
+  IconCopy,
+} from '@arco-design/web-vue/es/icon'
+import type { MiddlewareItem } from '@/api/ops/middleware'
 
 interface Props {
-  record: any
+  record: MiddlewareItem
 }
 
 const props = defineProps<Props>()
+const emit = defineEmits(['edit', 'quick-config', 'delete', 'view-server'])
 
-const emit = defineEmits(['remote-control', 'restart', 'close'])
-
-const activeTab = ref('overview')
-const timeRange = ref('1h')
-const cpuMetric = ref('average')
-const bandwidthMetric = ref('average')
-const publicBandwidthMetric = ref('average')
-const bandwidthUsageMetric = ref('average')
-const diskMetric = ref('average')
-const diskIopsMetric = ref('average')
-const connectionMetric = ref('average')
-const rdmaMetric = ref('average')
-const rdmaResourceMetric = ref('average')
-
-const generateTimeData = (count: number) => {
-  const now = Date.now()
-  const data = []
-  for (let i = count - 1; i >= 0; i--) {
-    data.push(new Date(now - i * 60000).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }))
-  }
-  return data
-}
-
-const generateRandomData = (count: number, min: number, max: number) => {
-  return Array.from({ length: count }, () => Math.floor(Math.random() * (max - min + 1)) + min)
-}
-
-const timeData = generateTimeData(60)
-
-const baseOption = {
-  tooltip: {
-    trigger: 'axis',
-    backgroundColor: 'rgba(255,255,255,0.95)',
-    borderColor: '#e5e6eb',
-    textStyle: {
-      color: '#1d2129',
-    },
-  },
-  grid: {
-    left: '3%',
-    right: '4%',
-    bottom: '3%',
-    containLabel: true,
-  },
-  xAxis: {
-    type: 'category',
-    boundaryGap: false,
-    data: timeData,
-    axisLabel: {
-      fontSize: 10,
-    },
-  },
-  yAxis: {
-    type: 'value',
-    axisLabel: {
-      fontSize: 10,
-    },
-  },
-  dataZoom: [
-    {
-      type: 'inside',
-      start: 0,
-      end: 100,
-    },
-  ],
-}
-
-const cpuOption = computed(() => ({
-  ...baseOption,
-  series: [
-    {
-      name: '平均值',
-      type: 'line',
-      smooth: true,
-      data: generateRandomData(60, 20, 80),
-      lineStyle: { color: '#00b42a' },
-      itemStyle: { color: '#00b42a' },
-      areaStyle: {
-        color: {
-          type: 'linear',
-          x: 0,
-          y: 0,
-          x2: 0,
-          y2: 1,
-          colorStops: [
-            { offset: 0, color: 'rgba(0, 180, 42, 0.3)' },
-            { offset: 1, color: 'rgba(0, 180, 42, 0.05)' },
-          ],
-        },
-      },
-    },
-    {
-      name: '最小值',
-      type: 'line',
-      smooth: true,
-      data: generateRandomData(60, 10, 40),
-      lineStyle: { color: '#165dff' },
-      itemStyle: { color: '#165dff' },
-    },
-    {
-      name: '最大值',
-      type: 'line',
-      smooth: true,
-      data: generateRandomData(60, 50, 95),
-      lineStyle: { color: '#722ed1' },
-      itemStyle: { color: '#722ed1' },
-    },
-  ],
-}))
-
-const bandwidthOption = computed(() => ({
-  ...baseOption,
-  series: [
-    {
-      name: '内网流入带宽',
-      type: 'line',
-      smooth: true,
-      data: generateRandomData(60, 100000, 500000),
-      lineStyle: { color: '#00b42a' },
-      itemStyle: { color: '#00b42a' },
-    },
-    {
-      name: '内网流出带宽',
-      type: 'line',
-      smooth: true,
-      data: generateRandomData(60, 50000, 300000),
-      lineStyle: { color: '#165dff' },
-      itemStyle: { color: '#165dff' },
-    },
-  ],
-}))
-
-const publicBandwidthOption = computed(() => ({
-  ...baseOption,
-  series: [
-    {
-      name: '公网流入带宽',
-      type: 'line',
-      smooth: true,
-      data: generateRandomData(60, 50000, 200000),
-      lineStyle: { color: '#165dff' },
-      itemStyle: { color: '#165dff' },
-    },
-    {
-      name: '公网流出带宽',
-      type: 'line',
-      smooth: true,
-      data: generateRandomData(60, 30000, 150000),
-      lineStyle: { color: '#00b42a' },
-      itemStyle: { color: '#00b42a' },
-    },
-  ],
-}))
-
-const bandwidthUsageOption = computed(() => ({
-  ...baseOption,
-  series: [
-    {
-      name: '公网流出带宽使用率',
-      type: 'line',
-      smooth: true,
-      data: generateRandomData(60, 5, 30),
-      lineStyle: { color: '#165dff' },
-      itemStyle: { color: '#165dff' },
-      areaStyle: {
-        color: {
-          type: 'linear',
-          x: 0,
-          y: 0,
-          x2: 0,
-          y2: 1,
-          colorStops: [
-            { offset: 0, color: 'rgba(22, 93, 255, 0.3)' },
-            { offset: 1, color: 'rgba(22, 93, 255, 0.05)' },
-          ],
-        },
-      },
-    },
-  ],
-}))
-
-const diskBpsOption = computed(() => ({
-  ...baseOption,
-  series: [
-    {
-      name: '磁盘读取BPS',
-      type: 'line',
-      smooth: true,
-      data: generateRandomData(60, 10000, 100000),
-      lineStyle: { color: '#165dff' },
-      itemStyle: { color: '#165dff' },
-    },
-    {
-      name: '磁盘写入BPS',
-      type: 'line',
-      smooth: true,
-      data: generateRandomData(60, 20000, 150000),
-      lineStyle: { color: '#00b42a' },
-      itemStyle: { color: '#00b42a' },
-    },
-  ],
-}))
-
-const diskIopsOption = computed(() => ({
-  ...baseOption,
-  series: [
-    {
-      name: '磁盘读取IOPS',
-      type: 'line',
-      smooth: true,
-      data: generateRandomData(60, 50, 500),
-      lineStyle: { color: '#165dff' },
-      itemStyle: { color: '#165dff' },
-    },
-    {
-      name: '磁盘写入IOPS',
-      type: 'line',
-      smooth: true,
-      data: generateRandomData(60, 100, 800),
-      lineStyle: { color: '#00b42a' },
-      itemStyle: { color: '#00b42a' },
-    },
-  ],
-}))
-
-const connectionOption = computed(() => ({
-  ...baseOption,
-  series: [
-    {
-      name: '同时连接数',
-      type: 'line',
-      smooth: true,
-      data: generateRandomData(60, 100, 500),
-      lineStyle: { color: '#165dff' },
-      itemStyle: { color: '#165dff' },
-    },
-  ],
-}))
-
-const rdmaOption = computed(() => ({
-  ...baseOption,
-  series: [],
-}))
-
-const rdmaResourceOption = computed(() => ({
-  ...baseOption,
-  series: [],
-}))
+const activeTab = ref('basic')
 
+// 获取状态颜色
 const getStatusColor = (status?: string) => {
   const colorMap: Record<string, string> = {
     online: 'green',
     offline: 'red',
-    maintenance: 'orange',
-    retired: 'gray',
+    error: 'orange',
   }
   return colorMap[status || ''] || 'gray'
 }
 
+// 获取状态文本
 const getStatusText = (status?: string) => {
   const textMap: Record<string, string> = {
     online: '在线',
     offline: '离线',
-    maintenance: '维护中',
-    retired: '已退役',
+    error: '错误',
   }
   return textMap[status || ''] || '-'
 }
 
-
-const handleRemoteControl = () => {
-  emit('remote-control')
+// 获取类型颜色
+const getTypeColor = (type?: string) => {
+  const colorMap: Record<string, string> = {
+    nginx: 'green',
+    apache: 'orange',
+    tomcat: 'blue',
+    redis: 'red',
+    kafka: 'purple',
+    rabbitmq: 'arcoblue',
+    elasticsearch: 'cyan',
+  }
+  return colorMap[type || ''] || 'gray'
 }
 
-const handleRestart = () => {
-  Message.info('正在发送重启指令...')
-  emit('restart')
+// 获取类型类名
+const getTypeClass = (type?: string) => {
+  return `type-${type || 'default'}`
 }
+
+// 获取类型缩写
+const getTypeAbbr = (type?: string) => {
+  const abbrMap: Record<string, string> = {
+    nginx: 'NG',
+    apache: 'AP',
+    tomcat: 'TC',
+    redis: 'RD',
+    kafka: 'KF',
+    rabbitmq: 'MQ',
+    elasticsearch: 'ES',
+  }
+  return abbrMap[type || ''] || 'MW'
+}
+
+// 获取采集结果颜色
+const getCollectResultColor = (result?: string) => {
+  if (result === 'ok') return 'green'
+  if (result === 'error') return 'red'
+  return 'gray'
+}
+
+// 获取响应时间样式类
+const getResponseTimeClass = (responseTime?: number) => {
+  if (!responseTime) return ''
+  if (responseTime < 100) return 'success'
+  if (responseTime < 500) return 'warning'
+  return 'error'
+}
+
+// 格式化状态消息（截断过长文本）
+const formatStatusMessage = (message?: string) => {
+  if (!message) return '-'
+  if (message.length > 20) return message.slice(0, 18) + '...'
+  return message
+}
+
+// 格式化 URL（截断过长文本）
+const formatUrl = (url?: string) => {
+  if (!url) return '未配置'
+  if (url.length > 25) return url.slice(0, 22) + '...'
+  return url
+}
+
+// 复制到剪贴板
+const copyToClipboard = async (text: string) => {
+  if (!text) return
+  try {
+    await navigator.clipboard.writeText(text)
+    Message.success('已复制到剪贴板')
+  } catch (err) {
+    Message.error('复制失败')
+  }
+}
+
+// 格式化运行时长
+const formatUptime = (uptime?: number) => {
+  if (!uptime) return '-'
+  const days = Math.floor(uptime / 86400)
+  const hours = Math.floor((uptime % 86400) / 3600)
+  const minutes = Math.floor((uptime % 3600) / 60)
+  if (days > 0) return `${days}天${hours}小时`
+  if (hours > 0) return `${hours}小时${minutes}分钟`
+  return `${minutes}分钟`
+}
+
+// 格式化时间
+const formatTime = (time?: string | null) => {
+  if (!time) return '-'
+  return new Date(time).toLocaleString('zh-CN')
+}
+
+// 格式化额外配置
+const formatExtra = (extra?: string) => {
+  if (!extra) return '-'
+  try {
+    return JSON.stringify(JSON.parse(extra), null, 2)
+  } catch {
+    return extra
+  }
+}
+
+// 操作处理
+const handleEdit = () => emit('edit')
+const handleQuickConfig = () => emit('quick-config')
+const handleDelete = () => emit('delete')
+const handleViewServer = () => emit('view-server', props.record.server_identity)
+
+// 暴露 activeTab 供外部使用
+defineExpose({ activeTab })
 </script>
 
 <style scoped lang="less">
-.server-detail {
-  padding: 20px;
-  background: #fff;
-  border-radius: 4px;
+.middleware-detail {
+  padding: 16px;
+  background: #f7f8fa;
+  min-height: 100%;
 }
 
-.detail-header {
+.detail-header-card {
+  background: #fff;
+  border-radius: 6px;
+  padding: 16px;
+  margin-bottom: 12px;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 20px;
-  padding-bottom: 20px;
-  border-bottom: 1px solid #e5e6eb;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
 
-  .server-info {
-    h2 {
-      margin: 0 0 12px 0;
-      font-size: 20px;
-      font-weight: 600;
-      color: #1d2129;
-    }
-
-    .info-tags {
-      display: flex;
-      gap: 8px;
-    }
-  }
-
-  .header-actions {
+  .header-left {
     display: flex;
-    gap: 12px;
-  }
-}
+    align-items: center;
+    gap: 16px;
 
-.detail-tabs {
-  :deep(.arco-tabs-header) {
-    margin-bottom: 20px;
-  }
-}
-
-.info-descriptions {
-  :deep(.arco-descriptions-item-label) {
-    width: 140px;
-    background: #f7f8fa;
-  }
-}
-
-.monitor-section {
-  .time-selector {
-    margin-bottom: 20px;
-  }
-
-  .charts-row {
-    margin-bottom: 20px;
-  }
-
-  .chart-col {
-    margin-bottom: 20px;
-  }
-
-  .chart-card {
-    background: #fff;
-    border: 1px solid #e5e6eb;
-    border-radius: 4px;
-    padding: 16px;
-
-    .chart-header {
+    .service-icon {
+      width: 48px;
+      height: 48px;
+      border-radius: 8px;
       display: flex;
-      justify-content: space-between;
       align-items: center;
-      margin-bottom: 12px;
+      justify-content: center;
+      font-size: 14px;
+      font-weight: 600;
+      color: #fff;
 
-      .chart-title {
-        font-size: 14px;
-        font-weight: 500;
-        color: #1d2129;
-      }
-
-      .chart-actions {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-      }
+      &.type-nginx { background: linear-gradient(135deg, #00b42a, #4e9f4e); }
+      &.type-apache { background: linear-gradient(135deg, #ff7d00, #ffb400); }
+      &.type-tomcat { background: linear-gradient(135deg, #165dff, #4080ff); }
+      &.type-redis { background: linear-gradient(135deg, #f53f3f, #ff6b6b); }
+      &.type-kafka { background: linear-gradient(135deg, #722ed1, #9b59b6); }
+      &.type-rabbitmq { background: linear-gradient(135deg, #ff7d00, #ff9500); }
+      &.type-elasticsearch { background: linear-gradient(135deg, #14c9c9, #00bfbf); }
+      &.type-default { background: linear-gradient(135deg, #86909c, #a0a0a0); }
     }
 
-    .chart {
-      height: 200px;
-    }
-
-    .chart-legend {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 16px;
-      margin-top: 12px;
-      padding-top: 12px;
-      border-top: 1px solid #e5e6eb;
-
-      .legend-item {
+    .service-info {
+      .service-title {
         display: flex;
         align-items: center;
-        gap: 6px;
-        font-size: 12px;
-        color: #86909c;
+        gap: 12px;
+        margin-bottom: 8px;
 
-        .legend-dot {
-          width: 8px;
-          height: 8px;
+        h2 {
+          margin: 0;
+          font-size: 16px;
+          font-weight: 600;
+          color: #1d2129;
+        }
+
+        .status-tags {
+          display: flex;
+          gap: 8px;
+        }
+
+        .status-dot {
+          display: inline-block;
+          width: 6px;
+          height: 6px;
           border-radius: 50%;
+          margin-right: 4px;
 
-          &.green {
-            background: #00b42a;
+          &.online { background: #00b42a; }
+          &.offline { background: #f53f3f; }
+          &.error { background: #ff7d00; }
+        }
+      }
+
+      .service-meta {
+        display: flex;
+        gap: 16px;
+        font-size: 13px;
+        flex-wrap: wrap;
+
+        .meta-item {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          color: #86909c;
+
+          .meta-label {
+            color: #86909c;
           }
 
-          &.blue {
-            background: #165dff;
-          }
+          .meta-value {
+            color: #1d2129;
 
-          &.purple {
-            background: #722ed1;
+            &.uptime {
+              color: #00b42a;
+            }
+
+            &.copyable {
+              display: flex;
+              align-items: center;
+              gap: 4px;
+              cursor: pointer;
+              transition: color 0.2s;
+
+              &:hover {
+                color: #165dff;
+              }
+
+              .copy-icon {
+                font-size: 12px;
+                color: #86909c;
+                transition: color 0.2s;
+              }
+
+              &:hover .copy-icon {
+                color: #165dff;
+              }
+            }
           }
         }
       }
     }
   }
+
+  .header-actions {
+    display: flex;
+    gap: 8px;
+  }
 }
 
-.operation-records {
-  min-height: 300px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 12px;
+  margin-bottom: 12px;
+
+  .metric-card {
+    background: #fff;
+    border-radius: 6px;
+    padding: 12px;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+    position: relative;
+    overflow: hidden;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 3px;
+      background: transparent;
+      transition: background 0.2s;
+    }
+
+    &.has-issue::before {
+      background: #f53f3f;
+    }
+
+    &.highlight::before {
+      background: #00b42a;
+    }
+
+    .metric-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 8px;
+
+      .metric-icon {
+        font-size: 16px;
+
+        &.blue { color: #165dff; }
+        &.green { color: #00b42a; }
+        &.red { color: #f53f3f; }
+        &.gray { color: #86909c; }
+        &.arcoblue { color: #165dff; }
+        &.purple { color: #722ed1; }
+      }
+
+      .metric-title {
+        font-size: 12px;
+        color: #86909c;
+      }
+    }
+
+    .metric-body {
+      display: flex;
+      align-items: baseline;
+      gap: 4px;
+      margin-bottom: 4px;
+      flex-wrap: wrap;
+
+      .metric-value {
+        font-size: 24px;
+        font-weight: 600;
+        color: #1d2129;
+
+        &.success { color: #00b42a; }
+        &.error { color: #f53f3f; }
+        &.warning { color: #ff7d00; }
+      }
+
+      .metric-unit {
+        font-size: 12px;
+        color: #86909c;
+      }
+
+      .collect-status {
+        font-size: 12px;
+        font-weight: 500;
+
+        &.on { color: #00b42a; }
+        &.off { color: #86909c; }
+      }
+    }
+
+    .metric-footer {
+      .metric-label {
+        font-size: 11px;
+        color: #86909c;
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+
+    &:hover {
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+      transform: translateY(-2px);
+      transition: all 0.2s ease;
+    }
+  }
+}
+
+.detail-tabs {
+  background: #fff;
+  border-radius: 6px;
+  padding: 16px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+
+  :deep(.arco-tabs-header) {
+    margin-bottom: 16px;
+  }
+}
+
+.info-section {
+  .info-group {
+    margin-bottom: 20px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    .group-title {
+      font-size: 13px;
+      font-weight: 500;
+      color: #1d2129;
+      margin-bottom: 12px;
+      padding-left: 8px;
+      border-left: 3px solid #165dff;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .info-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 12px;
+
+      .info-item {
+        display: flex;
+        align-items: flex-start;
+        gap: 8px;
+        padding: 8px 12px;
+        background: #f7f8fa;
+        border-radius: 4px;
+
+        &.full-width {
+          grid-column: span 2;
+        }
+
+        .info-label {
+          flex-shrink: 0;
+          font-size: 12px;
+          color: #86909c;
+          min-width: 80px;
+        }
+
+        .info-value {
+          font-size: 13px;
+          color: #1d2129;
+          word-break: break-all;
+
+          &.highlight {
+            font-weight: 500;
+            font-size: 14px;
+          }
+
+          &.code {
+            font-family: 'Courier New', monospace;
+            font-size: 12px;
+            background: #e8f3ff;
+            padding: 2px 6px;
+            border-radius: 3px;
+          }
+
+          .empty-value {
+            color: #c9cdd4;
+          }
+
+          .server-link {
+            display: inline-flex;
+            align-items: center;
+            gap: 4px;
+            cursor: pointer;
+            color: #165dff;
+            transition: color 0.2s;
+
+            &:hover {
+              color: #4080ff;
+            }
+
+            .server-icon {
+              font-size: 12px;
+            }
+          }
+
+          .url-box {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            flex-wrap: wrap;
+
+            .url-link {
+              display: inline-flex;
+              align-items: center;
+              gap: 4px;
+              color: #165dff;
+              transition: color 0.2s;
+
+              &:hover {
+                color: #4080ff;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .extra-config {
+      background: #f7f8fa;
+      border-radius: 4px;
+      padding: 12px;
+
+      pre {
+        margin: 0;
+        font-size: 12px;
+        color: #1d2129;
+        white-space: pre-wrap;
+        word-break: break-all;
+      }
+    }
+  }
 }
 </style>
diff --git a/src/views/ops/pages/dc/middleware/components/FormDialog.vue b/src/views/ops/pages/dc/middleware/components/FormDialog.vue
index 2ff2341..ee4c907 100644
--- a/src/views/ops/pages/dc/middleware/components/FormDialog.vue
+++ b/src/views/ops/pages/dc/middleware/components/FormDialog.vue
@@ -11,93 +11,110 @@
     <a-form ref="formRef" :model="formData" :rules="rules" layout="vertical">
       <a-row :gutter="20">
         <a-col :span="12">
-          <a-form-item field="unique_id" label="唯一标识">
+          <a-form-item field="service_identity" label="服务唯一标识">
             <a-input
-              v-model="formData.unique_id"
-              placeholder="输入为空系统自动生成 UUID"
+              v-model="formData.service_identity"
+              placeholder="输入为空系统自动生成 ULID"
               :disabled="isEdit"
             />
           </a-form-item>
         </a-col>
         <a-col :span="12">
-          <a-form-item field="name" label="中间件名称">
-            <a-input v-model="formData.name" placeholder="请输入中间件名称" />
+          <a-form-item field="name" label="服务名称">
+            <a-input v-model="formData.name" placeholder="请输入服务名称" />
           </a-form-item>
         </a-col>
       </a-row>
       
       <a-row :gutter="20">
         <a-col :span="12">
-          <a-form-item field="middleware" label="中间件类型">
-            <a-select v-model="formData.middleware" placeholder="请选择中间件类型">
+          <a-form-item field="server_identity" label="服务器标识">
+            <a-input v-model="formData.server_identity" placeholder="关联服务器唯一标识" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item field="type" label="中间件类型">
+            <a-select v-model="formData.type" placeholder="请选择中间件类型">
               <a-option value="nginx">Nginx</a-option>
+              <a-option value="apache">Apache</a-option>
               <a-option value="tomcat">Tomcat</a-option>
               <a-option value="redis">Redis</a-option>
               <a-option value="kafka">Kafka</a-option>
               <a-option value="rabbitmq">RabbitMQ</a-option>
               <a-option value="elasticsearch">Elasticsearch</a-option>
-              <a-option value="other">其它</a-option>
             </a-select>
           </a-form-item>
         </a-col>
-        <a-col :span="12">
-          <a-form-item field="version" label="版本">
-            <a-input v-model="formData.version" placeholder="请输入版本号" />
-          </a-form-item>
-        </a-col>
       </a-row>
 
-      <a-form-item field="location" label="位置信息">
-          <a-input
-            v-model="formData.location"
-            placeholder="请输入位置信息"
-          />
+      <a-form-item field="description" label="描述信息">
+        <a-textarea
+          v-model="formData.description"
+          placeholder="请输入描述信息"
+          :rows="2"
+        />
       </a-form-item>
-      
+
       <a-form-item field="tags" label="标签">
         <a-input v-model="formData.tags" placeholder="多个标签，逗号间隔" />
       </a-form-item>
       
       <a-row :gutter="20">
         <a-col :span="12">
-          <a-form-item field="ip" label="IP地址">
-            <a-input v-model="formData.ip" placeholder="可以输入多个IP，逗号做分隔" />
+          <a-form-item field="status_url" label="状态检查URL">
+            <a-input v-model="formData.status_url" placeholder="Nginx/Apache状态检查URL" />
           </a-form-item>
         </a-col>
         <a-col :span="12">
-          <a-form-item field="remote_port" label="远程访问端口">
-            <a-input v-model="formData.remote_port" placeholder="为空则不可远程访问" />
+          <a-form-item field="agent_config" label="Agent配置URL">
+            <a-input v-model="formData.agent_config" placeholder="完整 http(s) GET URL" />
           </a-form-item>
         </a-col>
       </a-row>
 
-      <a-form-item field="agent_url" label="Agent URL配置">
-        <a-input v-model="formData.agent_url" placeholder="请输入Agent URL配置" />
-      </a-form-item>
-
       <a-row :gutter="20">
         <a-col :span="12">
-          <a-form-item field="data_collection" label="数据采集">
-            <a-switch v-model="formData.data_collection" />
+          <a-form-item field="enabled" label="启用监控">
+            <a-switch v-model="formData.enabled" />
           </a-form-item>
         </a-col>
         <a-col :span="12">
-          <a-form-item v-if="formData.data_collection" field="collection_interval" label="采集时间">
-            <a-select v-model="formData.collection_interval" placeholder="请选择采集时间">
-              <a-option :value="1">1分钟</a-option>
-              <a-option :value="5">5分钟</a-option>
-              <a-option :value="10">10分钟</a-option>
-              <a-option :value="30">30分钟</a-option>
-            </a-select>
+          <a-form-item field="interval" label="采集间隔(秒)">
+            <a-input-number
+              v-model="formData.interval"
+              placeholder="默认60秒"
+              :min="10"
+              :max="3600"
+              style="width: 100%"
+            />
           </a-form-item>
         </a-col>
       </a-row>
 
-      <a-form-item field="remark" label="备注信息">
+      <a-row :gutter="20">
+        <a-col :span="12">
+          <a-form-item field="collect_on" label="参与周期采集">
+            <a-switch v-model="formData.collect_on" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item v-if="formData.collect_on" field="collect_interval" label="采集间隔(秒)">
+            <a-input-number
+              v-model="formData.collect_interval"
+              placeholder="为0时使用interval"
+              :min="0"
+              :max="3600"
+              style="width: 100%"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+
+      <a-form-item field="extra" label="额外配置(JSON)">
         <a-textarea
-          v-model="formData.remark"
-          placeholder="请输入备注信息"
-          :rows="4"
+          v-model="formData.extra"
+          placeholder='JSON格式，如：{"config_path":"/etc/nginx/nginx.conf"}'
+          :rows="2"
         />
       </a-form-item>
     </a-form>
@@ -107,8 +124,13 @@
 <script lang="ts" setup>
 import { ref, reactive, computed, watch } from 'vue'
 import { Message } from '@arco-design/web-vue'
-import { v4 as uuidv4 } from 'uuid'
 import type { FormInstance } from '@arco-design/web-vue'
+import {
+  createMiddleware,
+  updateMiddleware,
+  type MiddlewareCreateData,
+  type MiddlewareUpdateData,
+} from '@/api/ops/middleware'
 
 interface Props {
   visible: boolean
@@ -123,86 +145,131 @@ const emit = defineEmits(['update:visible', 'success'])
 
 const formRef = ref<FormInstance>()
 const confirmLoading = ref(false)
-const selectedLocation = ref('')
 
 const isEdit = computed(() => !!props.record?.id)
 
 const formData = reactive({
-  unique_id: '',
+  service_identity: '',
+  server_identity: '',
   name: '',
-  middleware: '',
-  version: '',
-  location: '',
+  category: 'middleware',
+  type: '',
+  description: '',
+  enabled: true,
+  interval: 60,
+  extra: '',
   tags: '',
-  ip: '',
-  remote_port: '',
-  agent_url: '',
-  data_collection: false,
-  collection_interval: 5,
-  remark: '',
+  status_url: '',
+  agent_config: '',
+  collect_on: true,
+  collect_args: '',
+  collect_interval: 60,
 })
 
 const rules = {
-  name: [{ required: true, message: '请输入中间件名称' }],
-  middleware: [{ required: true, message: '请选择中间件类型' }],
-  version: [{ required: true, message: '请输入版本号' }],
+  name: [{ required: true, message: '请输入服务名称' }],
+  type: [{ required: true, message: '请选择中间件类型' }],
+  category: [{ required: true, message: '分类必须为middleware' }],
 }
 
-const locationOptions = ref([
-  { label: 'A数据中心-3层-24机柜-5U位', value: 'A数据中心-3层-24机柜-5U位' },
-  { label: 'A数据中心-3层-24机柜-6U位', value: 'A数据中心-3层-24机柜-6U位' },
-  { label: 'B数据中心-1层-12机柜-1U位', value: 'B数据中心-1层-12机柜-1U位' },
-  { label: 'B数据中心-1层-12机柜-2U位', value: 'B数据中心-1层-12机柜-2U位' },
-  { label: 'C数据中心-2层-8机柜-3U位', value: 'C数据中心-2层-8机柜-3U位' },
-])
-
 watch(
   () => props.visible,
   (val) => {
     if (val) {
       if (isEdit.value && props.record) {
-        Object.assign(formData, props.record)
+        Object.assign(formData, {
+          service_identity: props.record.service_identity || '',
+          server_identity: props.record.server_identity || '',
+          name: props.record.name || '',
+          category: props.record.category || 'middleware',
+          type: props.record.type || '',
+          description: props.record.description || '',
+          enabled: props.record.enabled ?? true,
+          interval: props.record.interval || 60,
+          extra: props.record.extra || '',
+          tags: props.record.tags || '',
+          status_url: props.record.status_url || '',
+          agent_config: props.record.agent_config || '',
+          collect_on: props.record.collect_on ?? true,
+          collect_args: props.record.collect_args || '',
+          collect_interval: props.record.collect_interval || 60,
+        })
       } else {
         Object.assign(formData, {
-          unique_id: '',
+          service_identity: '',
+          server_identity: '',
           name: '',
-          middleware: '',
-          version: '',
-          location: '',
+          category: 'middleware',
+          type: '',
+          description: '',
+          enabled: true,
+          interval: 60,
+          extra: '',
           tags: '',
-          ip: '',
-          remote_port: '',
-          agent_url: '',
-          data_collection: false,
-          collection_interval: 5,
-          remark: '',
+          status_url: '',
+          agent_config: '',
+          collect_on: true,
+          collect_args: '',
+          collect_interval: 60,
         })
       }
     }
   }
 )
 
-const handleLocationSelect = (value: string) => {
-  formData.location = value
-}
-
 const handleOk = async () => {
   try {
     await formRef.value?.validate()
     
-    if (!formData.unique_id) {
-      formData.unique_id = uuidv4()
-    }
-
     confirmLoading.value = true
     
-    await new Promise(resolve => setTimeout(resolve, 1000))
+    if (isEdit.value) {
+      const updateData: MiddlewareUpdateData = {
+        service_identity: formData.service_identity,
+        server_identity: formData.server_identity,
+        name: formData.name,
+        category: formData.category,
+        type: formData.type,
+        description: formData.description,
+        enabled: formData.enabled,
+        interval: formData.interval,
+        extra: formData.extra,
+        tags: formData.tags,
+        status_url: formData.status_url,
+        agent_config: formData.agent_config,
+        collect_on: formData.collect_on,
+        collect_args: formData.collect_args,
+        collect_interval: formData.collect_interval,
+      }
+      await updateMiddleware(props.record.id, updateData)
+      Message.success('更新成功')
+    } else {
+      const createData: MiddlewareCreateData = {
+        service_identity: formData.service_identity,
+        server_identity: formData.server_identity,
+        name: formData.name,
+        category: formData.category,
+        type: formData.type,
+        description: formData.description,
+        enabled: formData.enabled,
+        interval: formData.interval,
+        extra: formData.extra,
+        tags: formData.tags,
+        status_url: formData.status_url,
+        agent_config: formData.agent_config,
+        collect_on: formData.collect_on,
+        collect_args: formData.collect_args,
+        collect_interval: formData.collect_interval,
+      }
+      await createMiddleware(createData)
+      Message.success('创建成功')
+    }
     
-    Message.success(isEdit.value ? '更新成功' : '创建成功')
     emit('success')
     handleCancel()
   } catch (error) {
-    console.error('验证失败:', error)
+    console.error('操作失败:', error)
+    Message.error('操作失败')
   } finally {
     confirmLoading.value = false
   }
diff --git a/src/views/ops/pages/dc/middleware/components/QuickConfigDialog.vue b/src/views/ops/pages/dc/middleware/components/QuickConfigDialog.vue
index 6e26b54..b6b10cd 100644
--- a/src/views/ops/pages/dc/middleware/components/QuickConfigDialog.vue
+++ b/src/views/ops/pages/dc/middleware/components/QuickConfigDialog.vue
@@ -8,27 +8,34 @@
     @cancel="handleCancel"
   >
     <a-form :model="form" layout="vertical">
-      <a-form-item label="远程访问端口">
+      <a-form-item label="Agent配置URL">
+        <a-input
+          v-model="form.agent_config"
+          placeholder="请输入完整 http(s) GET URL"
+          allow-clear
+        />
+        <template #extra>
+          <span style="color: #86909c">完整 http(s) GET URL，用于周期采集</span>
+        </template>
+      </a-form-item>
+
+      <a-form-item label="参与周期采集">
+        <a-switch v-model="form.collect_on" />
+      </a-form-item>
+
+      <a-form-item v-if="form.collect_on" label="采集间隔(秒)">
         <a-input-number
-          v-model="form.remote_port"
-          placeholder="请输入远程访问端口，为空则不可远程访问"
-          :min="1"
-          :max="65535"
+          v-model="form.collect_interval"
+          placeholder="为0时使用interval"
+          :min="0"
+          :max="3600"
           style="width: 100%"
           allow-clear
         />
         <template #extra>
-          <span style="color: #86909c">为空则不可远程访问</span>
+          <span style="color: #86909c">分桶间隔（秒），为 0 时回退 interval</span>
         </template>
       </a-form-item>
-
-      <a-form-item label="Agent URL配置">
-        <a-input
-          v-model="form.agent_url"
-          placeholder="请输入Agent URL"
-          allow-clear
-        />
-      </a-form-item>
     </a-form>
   </a-modal>
 </template>
@@ -36,6 +43,10 @@
 <script lang="ts" setup>
 import { ref, watch } from 'vue'
 import { Message } from '@arco-design/web-vue'
+import {
+  patchMiddlewareCollect,
+  type MiddlewareCollectData,
+} from '@/api/ops/middleware'
 
 interface Props {
   visible: boolean
@@ -48,16 +59,18 @@ const emit = defineEmits(['update:visible', 'success'])
 const loading = ref(false)
 
 const form = ref({
-  remote_port: undefined as number | undefined,
-  agent_url: '',
+  agent_config: '',
+  collect_on: true,
+  collect_interval: 60,
 })
 
 watch(
   () => props.visible,
   (val) => {
     if (val && props.record) {
-      form.value.remote_port = props.record.remote_port
-      form.value.agent_url = props.record.agent_url || ''
+      form.value.agent_config = props.record.agent_config || ''
+      form.value.collect_on = props.record.collect_on ?? true
+      form.value.collect_interval = props.record.collect_interval || 60
     }
   }
 )
@@ -65,14 +78,12 @@ watch(
 const handleSubmit = async () => {
   loading.value = true
   try {
-    // 模拟API调用
-    await new Promise((resolve) => setTimeout(resolve, 500))
+    const data: MiddlewareCollectData = {
+      collect_on: form.value.collect_on,
+      collect_interval: form.value.collect_interval,
+    }
     
-    // 更新记录
-    props.record.remote_port = form.value.remote_port
-    props.record.agent_url = form.value.agent_url
-    props.record.remote_access = !!form.value.remote_port
-    props.record.agent_config = !!form.value.agent_url
+    await patchMiddlewareCollect(props.record.id, data)
     
     Message.success('配置成功')
     emit('success')
diff --git a/src/views/ops/pages/dc/middleware/config/columns.ts b/src/views/ops/pages/dc/middleware/config/columns.ts
index d137122..3929f04 100644
--- a/src/views/ops/pages/dc/middleware/config/columns.ts
+++ b/src/views/ops/pages/dc/middleware/config/columns.ts
@@ -6,51 +6,42 @@ export const columns = [
     slotName: 'id',
   },
   {
-    dataIndex: 'unique_id',
-    title: '唯一标识',
+    dataIndex: 'service_identity',
+    title: '服务标识',
     width: 150,
   },
   {
     dataIndex: 'name',
-    title: '名称',
+    title: '服务名称',
     width: 150,
   },
   {
-    dataIndex: 'middleware',
-    title: '中间件',
+    dataIndex: 'type',
+    title: '中间件类型',
     width: 120,
   },
   {
-    dataIndex: 'version',
-    title: '版本',
+    dataIndex: 'server_identity',
+    title: '服务器标识',
     width: 150,
   },
   {
-    dataIndex: 'location',
-    title: '位置信息',
-    width: 150,
+    dataIndex: 'enabled',
+    title: '启用状态',
+    width: 100,
+    slotName: 'enabled',
   },
   {
-    dataIndex: 'tags',
-    title: '标签',
-    width: 120,
+    dataIndex: 'agent_config',
+    title: 'Agent配置',
+    width: 100,
+    slotName: 'agent_config',
   },
   {
-    dataIndex: 'ip',
-    title: 'IP地址',
-    width: 150,
-  },
-  {
-    dataIndex: 'sys_indicator',
-    title: '系统指标',
-    width: 150,
-    slotName: 'cpu',
-  },
-  {
-    dataIndex: 'middleware_indicator',
-    title: '中间件指标',
-    width: 150,
-    slotName: 'middleware_indicator',
+    dataIndex: 'collect_on',
+    title: '数据采集',
+    width: 100,
+    slotName: 'data_collection',
   },
   {
     dataIndex: 'status',
@@ -58,6 +49,22 @@ export const columns = [
     width: 100,
     slotName: 'status',
   },
+  {
+    dataIndex: 'response_time',
+    title: '响应时间(ms)',
+    width: 120,
+  },
+  {
+    dataIndex: 'uptime',
+    title: '运行时长',
+    width: 120,
+    slotName: 'uptime',
+  },
+  {
+    dataIndex: 'last_check_time',
+    title: '最后检查时间',
+    width: 180,
+  },
   {
     dataIndex: 'actions',
     title: '操作',
diff --git a/src/views/ops/pages/dc/middleware/config/search-form.ts b/src/views/ops/pages/dc/middleware/config/search-form.ts
index af2affe..c75ac0e 100644
--- a/src/views/ops/pages/dc/middleware/config/search-form.ts
+++ b/src/views/ops/pages/dc/middleware/config/search-form.ts
@@ -5,35 +5,45 @@ export const searchFormConfig: FormItem[] = [
     field: 'keyword',
     label: '关键词',
     type: 'input',
-    placeholder: '请输入服务器名称、编码或IP',
+    placeholder: '请输入服务名称或标识',
     span: 6,
   },
   {
-    field: 'datacenter_id',
-    label: '数据中心',
+    field: 'type',
+    label: '中间件类型',
     type: 'select',
-    placeholder: '请选择数据中心',
-    options: [], // 需要动态加载
+    placeholder: '请选择中间件类型',
+    options: [
+      { label: 'Nginx', value: 'nginx' },
+      { label: 'Apache', value: 'apache' },
+      { label: 'Tomcat', value: 'tomcat' },
+      { label: 'Redis', value: 'redis' },
+      { label: 'Kafka', value: 'kafka' },
+      { label: 'RabbitMQ', value: 'rabbitmq' },
+      { label: 'Elasticsearch', value: 'elasticsearch' },
+    ],
     span: 6,
   },
   {
-    field: 'rack_id',
-    label: '机柜',
+    field: 'enabled',
+    label: '启用状态',
     type: 'select',
-    placeholder: '请选择机柜',
-    options: [], // 需要动态加载
+    placeholder: '请选择启用状态',
+    options: [
+      { label: '已启用', value: true },
+      { label: '已禁用', value: false },
+    ],
     span: 6,
   },
   {
     field: 'status',
-    label: '状态',
+    label: '运行状态',
     type: 'select',
-    placeholder: '请选择状态',
+    placeholder: '请选择运行状态',
     options: [
       { label: '在线', value: 'online' },
       { label: '离线', value: 'offline' },
-      { label: '维护中', value: 'maintenance' },
-      { label: '已退役', value: 'retired' },
+      { label: '错误', value: 'error' },
     ],
     span: 6,
   },
diff --git a/src/views/ops/pages/dc/middleware/index.vue b/src/views/ops/pages/dc/middleware/index.vue
index 911f3ff..cad0ba1 100644
--- a/src/views/ops/pages/dc/middleware/index.vue
+++ b/src/views/ops/pages/dc/middleware/index.vue
@@ -30,10 +30,10 @@
         {{ record.id }}
       </template>
       
-      <!-- 远程访问 -->
-      <template #remote_access="{ record }">
-        <a-tag :color="record.remote_access ? 'green' : 'gray'">
-          {{ record.remote_access ? '已开启' : '未开启' }}
+      <!-- 启用状态 -->
+      <template #enabled="{ record }">
+        <a-tag :color="record.enabled ? 'green' : 'gray'">
+          {{ record.enabled ? '已启用' : '已禁用' }}
         </a-tag>
       </template>
             
@@ -43,46 +43,19 @@
           {{ record.agent_config ? '已配置' : '未配置' }}
         </a-tag>
       </template>
-            
-      <!-- 系统指标 -->
-      <template #sys_indicator="{ record }">
-        <div class="resource-display">
-          <div class="resource-info">
-            <span class="resource-label">CPU</span>
-            <span class="resource-value">{{ record.cpu_info?.value || 0 }}%</span>
-          </div>
-          <a-progress 
-            :percent="(record.cpu_info?.value || 0) / 100" 
-            :color="getProgressColor(record.cpu_info?.value || 0)"
-            size="small"
-            :show-text="false"
-          />
-        </div>
-      </template>
-            
-      <!-- 中间件指标 -->
-      <template #middleware_indicator="{ record }">
-        <div class="resource-display">
-          <div class="resource-info">
-            <span class="resource-label">内存</span>
-            <span class="resource-value">{{ record.memory_info?.value || 0 }}%</span>
-          </div>
-          <a-progress 
-            :percent="(record.memory_info?.value || 0) / 100" 
-            :color="getProgressColor(record.memory_info?.value || 0)"
-            size="small"
-            :show-text="false"
-          />
-        </div>
-      </template>
       
       <!-- 数据采集 -->
       <template #data_collection="{ record }">
-        <a-tag :color="record.data_collection ? 'green' : 'gray'">
-          {{ record.data_collection ? '已启用' : '未启用' }}
+        <a-tag :color="record.collect_on ? 'green' : 'gray'">
+          {{ record.collect_on ? '已启用' : '未启用' }}
         </a-tag>
       </template>
       
+      <!-- 运行时长 -->
+      <template #uptime="{ record }">
+        {{ formatUptime(record.uptime) }}
+      </template>
+      
       <!-- 状态 -->
       <template #status="{ record }">
         <a-tag :color="getStatusColor(record.status)">
@@ -110,12 +83,6 @@
               <icon-down />
             </a-button>
             <template #content>
-              <a-doption @click="handleRestart(record)">
-                <template #icon>
-                  <icon-refresh />
-                </template>
-                重启
-              </a-doption>
               <a-doption @click="handleDetail(record)">
                 <template #icon>
                   <icon-eye />
@@ -128,12 +95,12 @@
                 </template>
                 编辑
               </a-doption>
-              <a-doption @click="handleRemoteControl(record)">
+              <!-- <a-doption @click="handleQuickConfig(record)">
                 <template #icon>
-                  <icon-desktop />
+                  <icon-settings />
                 </template>
-                远程控制
-              </a-doption>
+                采集配置
+              </a-doption> -->
               <a-doption @click="handleDelete(record)" style="color: rgb(var(--danger-6))">
                 <template #icon>
                   <icon-delete />
@@ -159,20 +126,35 @@
       :record="currentRecord"
       @success="handleFormSuccess"
     />
+
+    <!-- 详情抽屉 -->
+    <a-drawer
+      v-model:visible="detailVisible"
+      :width="800"
+      title="中间件详情"
+      :footer="false"
+      unmount-on-close
+    >
+      <Detail
+        v-if="currentRecord"
+        :record="currentRecord"
+        @edit="handleDetailEdit"
+        @quick-config="handleDetailQuickConfig"
+        @delete="handleDetailDelete"
+        @view-server="handleViewServer"
+      />
+    </a-drawer>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, reactive, computed } from 'vue'
-import { useRouter } from 'vue-router'
 import { Message, Modal } from '@arco-design/web-vue'
 import { 
   IconPlus, 
   IconDown,
   IconEdit,
-  IconDesktop,
   IconDelete,
-  IconRefresh,
   IconEye,
   IconSettings
 } from '@arco-design/web-vue/es/icon'
@@ -181,189 +163,27 @@ import SearchTable from '@/components/search-table/index.vue'
 import { searchFormConfig } from './config/search-form'
 import FormDialog from './components/FormDialog.vue'
 import QuickConfigDialog from './components/QuickConfigDialog.vue'
+import Detail from './components/Detail.vue'
 import { columns as columnsConfig } from './config/columns'
 import {
-  fetchServerList,
-  deleteServer,
-} from '@/api/ops/server'
-
-const router = useRouter()
-
-// Mock 假数据
-const mockServerData = [
-  {
-    id: 1,
-    unique_id: 'MW-2024-0001',
-    name: 'Nginx 服务器 -01',
-    middleware: 'nginx',
-    version: '1.24.0',
-    location: '数据中心 A-1 楼 -机柜 01-U1',
-    tags: 'Web,负载均衡',
-    ip: '192.168.1.101',
-    remote_access: true,
-    agent_config: true,
-    cpu_info: { value: 45, total: '8 核', used: '3.6 核' },
-    memory_info: { value: 62, total: '32GB', used: '19.8GB' },
-    data_collection: true,
-    status: 'online',
-  },
-  {
-    id: 2,
-    unique_id: 'MW-2024-0002',
-    name: 'Redis 缓存 -01',
-    middleware: 'redis',
-    version: '7.2.3',
-    location: '数据中心 A-1 楼 -机柜 02-U1',
-    tags: '缓存，高性能',
-    ip: '192.168.1.102',
-    remote_access: true,
-    agent_config: true,
-    cpu_info: { value: 78, total: '16 核', used: '12.5 核' },
-    memory_info: { value: 85, total: '64GB', used: '54.4GB' },
-    data_collection: true,
-    status: 'online',
-  },
-  {
-    id: 3,
-    unique_id: 'MW-2024-0003',
-    name: 'Tomcat 应用 -01',
-    middleware: 'tomcat',
-    version: '10.1.15',
-    location: '数据中心 A-2 楼 -机柜 05-U2',
-    tags: '应用，Java',
-    ip: '192.168.1.103',
-    remote_access: false,
-    agent_config: false,
-    cpu_info: { value: 0, total: '4 核', used: '0 核' },
-    memory_info: { value: 0, total: '16GB', used: '0GB' },
-    data_collection: false,
-    status: 'offline',
-  },
-  {
-    id: 4,
-    unique_id: 'MW-2024-0004',
-    name: 'Kafka 消息队列 -01',
-    middleware: 'kafka',
-    version: '3.6.0',
-    location: '数据中心 A-2 楼 -机柜 06-U1',
-    tags: '消息队列，分布式',
-    ip: '192.168.1.104',
-    remote_access: true,
-    agent_config: true,
-    cpu_info: { value: 35, total: '8 核', used: '2.8 核' },
-    memory_info: { value: 68, total: '32GB', used: '21.8GB' },
-    data_collection: true,
-    status: 'online',
-  },
-  {
-    id: 5,
-    unique_id: 'MW-2024-0005',
-    name: 'Elasticsearch-01',
-    middleware: 'elasticsearch',
-    version: '8.11.1',
-    location: '数据中心 B-1 楼 -机柜 03-U1',
-    tags: '搜索，日志分析',
-    ip: '192.168.2.101',
-    remote_access: true,
-    agent_config: true,
-    cpu_info: { value: 28, total: '12 核', used: '3.4 核' },
-    memory_info: { value: 45, total: '48GB', used: '21.6GB' },
-    data_collection: true,
-    status: 'maintenance',
-  },
-  {
-    id: 6,
-    unique_id: 'MW-2024-0006',
-    name: 'RabbitMQ-01',
-    middleware: 'rabbitmq',
-    version: '3.12.10',
-    location: '数据中心 B-2 楼 -机柜 10-U1',
-    tags: '消息队列，AMQP',
-    ip: '192.168.2.102',
-    remote_access: false,
-    agent_config: false,
-    cpu_info: { value: 0, total: '4 核', used: '0 核' },
-    memory_info: { value: 0, total: '8GB', used: '0GB' },
-    data_collection: false,
-    status: 'retired',
-  },
-  {
-    id: 7,
-    unique_id: 'MW-2024-0007',
-    name: 'Nginx 反向代理 -01',
-    middleware: 'nginx',
-    version: '1.25.3',
-    location: '数据中心 A-1 楼 -机柜 08-U1',
-    tags: '反向代理，负载均衡',
-    ip: '192.168.1.105',
-    remote_access: true,
-    agent_config: true,
-    cpu_info: { value: 55, total: '8 核', used: '4.4 核' },
-    memory_info: { value: 72, total: '32GB', used: '23.0GB' },
-    data_collection: true,
-    status: 'online',
-  },
-  {
-    id: 8,
-    unique_id: 'MW-2024-0008',
-    name: 'Redis 集群 -01',
-    middleware: 'redis',
-    version: '7.0.15',
-    location: '数据中心 B-1 楼 -机柜 04-U1',
-    tags: '缓存，集群',
-    ip: '192.168.2.103',
-    remote_access: true,
-    agent_config: true,
-    cpu_info: { value: 42, total: '16 核', used: '6.7 核' },
-    memory_info: { value: 38, total: '64GB', used: '24.3GB' },
-    data_collection: true,
-    status: 'online',
-  },
-  {
-    id: 9,
-    unique_id: 'MW-2024-0009',
-    name: 'Tomcat 集群 -01',
-    middleware: 'tomcat',
-    version: '9.0.83',
-    location: '数据中心 A-2 楼 -机柜 07-U1',
-    tags: '应用，集群',
-    ip: '192.168.1.106',
-    remote_access: true,
-    agent_config: true,
-    cpu_info: { value: 68, total: '8 核', used: '5.4 核' },
-    memory_info: { value: 75, total: '16GB', used: '12GB' },
-    data_collection: true,
-    status: 'online',
-  },
-  {
-    id: 10,
-    unique_id: 'MW-2024-0010',
-    name: 'Kafka 日志 -01',
-    middleware: 'kafka',
-    version: '3.5.2',
-    location: '数据中心 B-2 楼 -机柜 12-U1',
-    tags: '日志，流处理',
-    ip: '192.168.2.104',
-    remote_access: true,
-    agent_config: true,
-    cpu_info: { value: 0, total: '12 核', used: '0 核' },
-    memory_info: { value: 0, total: '48GB', used: '0GB' },
-    data_collection: true,
-    status: 'offline',
-  },
-]
+  fetchMiddlewareList,
+  deleteMiddleware,
+  type MiddlewareItem,
+  type MiddlewareListParams,
+} from '@/api/ops/middleware'
 
 // 状态管理
 const loading = ref(false)
-const tableData = ref<any[]>([])
+const tableData = ref<MiddlewareItem[]>([])
 const formDialogVisible = ref(false)
 const quickConfigVisible = ref(false)
-const currentRecord = ref<any>(null)
+const detailVisible = ref(false)
+const currentRecord = ref<MiddlewareItem | null>(null)
 const formModel = ref({
   keyword: '',
-  datacenter_id: undefined,
-  rack_id: undefined,
-  status: undefined,
+  type: undefined as string | undefined,
+  enabled: undefined as boolean | undefined,
+  status: undefined as string | undefined,
 })
 
 const pagination = reactive({
@@ -383,8 +203,7 @@ const getStatusColor = (status?: string) => {
   const colorMap: Record<string, string> = {
     online: 'green',
     offline: 'red',
-    maintenance: 'orange',
-    retired: 'gray',
+    error: 'orange',
   }
   return colorMap[status || ''] || 'gray'
 }
@@ -394,51 +213,46 @@ const getStatusText = (status?: string) => {
   const textMap: Record<string, string> = {
     online: '在线',
     offline: '离线',
-    maintenance: '维护中',
-    retired: '已退役',
+    error: '错误',
   }
   return textMap[status || ''] || '-'
 }
 
-// 获取进度条颜色
-const getProgressColor = (value: number) => {
-  if (value >= 90) return '#F53F3F' // 红色
-  if (value >= 70) return '#FF7D00' // 橙色
-  if (value >= 50) return '#FFD00B' // 黄色
-  return '#00B42A' // 绿色
+// 格式化运行时长
+const formatUptime = (uptime?: number) => {
+  if (!uptime) return '-'
+  const days = Math.floor(uptime / 86400)
+  const hours = Math.floor((uptime % 86400) / 3600)
+  const minutes = Math.floor((uptime % 3600) / 60)
+  if (days > 0) {
+    return `${days}天${hours}小时`
+  }
+  if (hours > 0) {
+    return `${hours}小时${minutes}分钟`
+  }
+  return `${minutes}分钟`
 }
 
-// 获取中间件列表（使用 Mock 数据）
-const fetchServers = async () => {
+// 获取中间件列表
+const fetchMiddlewareData = async () => {
   loading.value = true
   
   try {
-    // 模拟网络延迟
-    await new Promise(resolve => setTimeout(resolve, 500))
+    const params: MiddlewareListParams = {
+      page: pagination.current,
+      size: pagination.pageSize,
+      keyword: formModel.value.keyword,
+      enabled: formModel.value.enabled,
+    }
     
-    // 使用 Mock 数据
-    tableData.value = mockServerData
-    pagination.total = mockServerData.length
+    const response: any = await fetchMiddlewareList(params)
     
-    // 如果有搜索条件，进行过滤
-    if (formModel.value.keyword || formModel.value.status) {
-      let filteredData = [...mockServerData]
-      
-      if (formModel.value.keyword) {
-        const keyword = formModel.value.keyword.toLowerCase()
-        filteredData = filteredData.filter(item => 
-          item.name.toLowerCase().includes(keyword) ||
-          item.unique_id.toLowerCase().includes(keyword) ||
-          item.ip.toLowerCase().includes(keyword)
-        )
-      }
-      
-      if (formModel.value.status) {
-        filteredData = filteredData.filter(item => item.status === formModel.value.status)
-      }
-      
-      tableData.value = filteredData
-      pagination.total = filteredData.length
+    if (response && response.details) {
+      tableData.value = response.details?.data
+      pagination.total = response.details?.total
+    } else {
+      tableData.value = []
+      pagination.total = 0
     }
   } catch (error) {
     console.error('获取中间件列表失败:', error)
@@ -453,7 +267,7 @@ const fetchServers = async () => {
 // 搜索
 const handleSearch = () => {
   pagination.current = 1
-  fetchServers()
+  fetchMiddlewareData()
 }
 
 // 处理表单模型更新
@@ -465,23 +279,23 @@ const handleFormModelUpdate = (value: any) => {
 const handleReset = () => {
   formModel.value = {
     keyword: '',
-    datacenter_id: undefined,
-    rack_id: undefined,
+    type: undefined,
+    enabled: undefined,
     status: undefined,
   }
   pagination.current = 1
-  fetchServers()
+  fetchMiddlewareData()
 }
 
 // 分页变化
 const handlePageChange = (current: number) => {
   pagination.current = current
-  fetchServers()
+  fetchMiddlewareData()
 }
 
 // 刷新
 const handleRefresh = () => {
-  fetchServers()
+  fetchMiddlewareData()
   Message.success('数据已刷新')
 }
 
@@ -492,90 +306,76 @@ const handleAdd = () => {
 }
 
 // 快捷配置
-const handleQuickConfig = (record: any) => {
+const handleQuickConfig = (record: MiddlewareItem) => {
   currentRecord.value = record
   quickConfigVisible.value = true
 }
 
 // 编辑中间件
-const handleEdit = (record: any) => {
+const handleEdit = (record: MiddlewareItem) => {
   currentRecord.value = record
   formDialogVisible.value = true
 }
 
-// 表单提交成功
-const handleFormSuccess = () => {
-  fetchServers()
+// 查看详情
+const handleDetail = (record: MiddlewareItem) => {
+  currentRecord.value = record
+  detailVisible.value = true
 }
 
-// 重启中间件
-const handleRestart = (record: any) => {
-  Modal.confirm({
-    title: '确认重启',
-    content: `确认重启中间件 ${record.name} 吗？`,
-    onOk: () => {
-      Message.info('正在发送重启指令...')
-    },
-  })
+// 详情页面操作
+const handleDetailEdit = () => {
+  detailVisible.value = false
+  formDialogVisible.value = true
 }
 
-// 查看详情 - 在当前窗口打开
-const handleDetail = (record: any) => {
-  router.push({
-    path: '/dc/detail',
-    query: {
-      id: record.id,
-      name: record.name,
-      ip: record.ip,
-      status: record.status,
-    },
-  })
+const handleDetailQuickConfig = () => {
+  detailVisible.value = false
+  quickConfigVisible.value = true
 }
 
-// 远程控制 - 在新窗口打开
-const handleRemoteControl = (record: any) => {
-  const url = router.resolve({
-    path: '/dc/remote',
-    query: {
-      id: record.id,
-      name: record.name,
-      ip: record.ip,
-      status: record.status,
-    },
-  }).href
-  window.open(url, '_blank')
-}
-
-// 删除中间件
-const handleDelete = async (record: any) => {
-  try {
-    Modal.confirm({
-      title: '确认删除',
-      content: `确认删除中间件 ${record.name} 吗？`,
-      onOk: async () => {
-        // Mock 删除操作
-        const index = mockServerData.findIndex(item => item.id === record.id)
-        if (index > -1) {
-          mockServerData.splice(index, 1)
-          Message.success('删除成功')
-          fetchServers()
-        } else {
-          Message.error('删除失败')
-        }
-      },
-    })
-  } catch (error) {
-    console.error('删除中间件失败:', error)
+const handleDetailDelete = () => {
+  detailVisible.value = false
+  if (currentRecord.value) {
+    handleDelete(currentRecord.value)
   }
 }
 
+const handleViewServer = (serverIdentity: string) => {
+  Message.info(`查看服务器: ${serverIdentity}`)
+  // 可以跳转到服务器详情页面
+}
+
+// 表单提交成功
+const handleFormSuccess = () => {
+  fetchMiddlewareData()
+}
+
+// 删除中间件
+const handleDelete = (record: MiddlewareItem) => {
+  Modal.confirm({
+    title: '确认删除',
+    content: `确认删除中间件服务 "${record.name}" 吗？`,
+    onOk: async () => {
+      try {
+        await deleteMiddleware(record.id)
+        Message.success('删除成功')
+        fetchMiddlewareData()
+      } catch (error) {
+        console.error('删除中间件失败:', error)
+        Message.error('删除失败')
+      }
+    },
+  })
+}
+
 // 初始化加载数据
-fetchServers()
+fetchMiddlewareData()
 </script>
 
 <script lang="ts">
 export default {
-  name: 'DataCenterServer',
+  name: 'MiddlewareManagement',
 }
 </script>
 
@@ -583,38 +383,4 @@ export default {
 .container {
   margin-top: 20px;
 }
-
-.resource-display {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding: 4px 0;
-  
-  .resource-info {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    > div {
-      display: inline-block;
-    }
-    .resource-value {
-      font-size: 12px;
-      font-weight: 500;
-      color: rgb(var(--text-1));
-    }
-  }
-  
-  :deep(.arco-progress) {
-    margin: 0;
-    
-    .arco-progress-bar-bg {
-      border-radius: 2px;
-    }
-    
-    .arco-progress-bar {
-      border-radius: 2px;
-      transition: all 0.3s ease;
-    }
-  }
-}
 </style>
diff --git a/src/views/ops/pages/dc/pc/components/FormDialog.vue b/src/views/ops/pages/dc/pc/components/FormDialog.vue
index d9b9e14..ccdcc13 100644
--- a/src/views/ops/pages/dc/pc/components/FormDialog.vue
+++ b/src/views/ops/pages/dc/pc/components/FormDialog.vue
@@ -4,18 +4,18 @@
     :title="isEdit ? '编辑办公PC' : '新增办公PC'"
     @ok="handleOk"
     @cancel="handleCancel"
-    @update:visible="handleUpdateVisible"
     :confirm-loading="confirmLoading"
+    :mask-closable="false"
     width="800px"
   >
     <a-form ref="formRef" :model="formData" :rules="rules" layout="vertical">
-      <a-row :gutter="20">
+      <!-- 编辑时显示唯一标识（只读） -->
+      <!-- <a-row v-if="isEdit" :gutter="20">
         <a-col :span="12">
-          <a-form-item field="unique_id" label="唯一标识">
+          <a-form-item label="唯一标识">
             <a-input
-              v-model="formData.unique_id"
-              placeholder="输入为空系统自动生成UUID"
-              :disabled="isEdit"
+              :model-value="formData.pc_identity"
+              disabled
             />
           </a-form-item>
         </a-col>
@@ -24,74 +24,116 @@
             <a-input v-model="formData.name" placeholder="请输入办公PC名称" />
           </a-form-item>
         </a-col>
+      </a-row> -->
+      <!-- 新建时不显示唯一标识 -->
+      <a-row v-if="!isEdit" :gutter="20">
+        <a-col :span="24">
+          <a-form-item field="name" label="办公PC名称">
+            <a-input v-model="formData.name" placeholder="请输入办公PC名称" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+
+      <a-row :gutter="20">
+        <a-col :span="12">
+          <a-form-item field="host" label="主机地址">
+            <a-input v-model="formData.host" placeholder="请输入主机地址" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item field="ip_address" label="IP地址">
+            <a-input v-model="formData.ip_address" placeholder="请输入IP地址" />
+          </a-form-item>
+        </a-col>
       </a-row>
 
       <a-row :gutter="20">
         <a-col :span="12">
           <a-form-item field="os" label="操作系统">
-            <a-select v-model="formData.os" placeholder="请选择操作系统">
-              <a-option value="windows">Windows</a-option>
-              <a-option value="linux">Linux</a-option>
-              <a-option value="other">其它</a-option>
+            <a-select v-model="formData.os" placeholder="请选择操作系统" allow-clear>
+              <a-option value="Windows">Windows</a-option>
+              <a-option value="Linux">Linux</a-option>
+              <a-option value="macOS">macOS</a-option>
+              <a-option value="Other">其它</a-option>
             </a-select>
           </a-form-item>
         </a-col>
         <a-col :span="12">
-          <a-form-item field="tags" label="标签">
-            <a-input v-model="formData.tags" placeholder="多个标签，逗号间隔" />
+          <a-form-item field="os_version" label="系统版本">
+            <a-input v-model="formData.os_version" placeholder="请输入系统版本" />
           </a-form-item>
         </a-col>
       </a-row>
 
-      <a-form-item field="location" label="位置信息">
-          <a-input
-            v-model="formData.location"
-            placeholder="请输入位置信息"
-          />
-      </a-form-item>
-      
       <a-row :gutter="20">
         <a-col :span="12">
-          <a-form-item field="ip" label="IP地址">
-            <a-input v-model="formData.ip" placeholder="可以输入多个IP，逗号做分隔" />
+          <a-form-item field="kernel" label="内核类型">
+            <a-select v-model="formData.kernel" placeholder="请选择内核类型" allow-clear>
+              <a-option value="x86">x86</a-option>
+              <a-option value="arm">ARM</a-option>
+              <a-option value="x64">x64</a-option>
+            </a-select>
           </a-form-item>
         </a-col>
         <a-col :span="12">
-          <a-form-item field="remote_port" label="远程访问端口">
-            <a-input v-model="formData.remote_port" placeholder="为空则不可远程访问" />
-          </a-form-item>
-        </a-col>
-      </a-row>
-
-      <a-form-item field="agent_url" label="Agent URL配置">
-        <a-input v-model="formData.agent_url" placeholder="请输入Agent URL配置" />
-      </a-form-item>
-
-      <a-row :gutter="20">
-        <a-col :span="12">
-          <a-form-item field="data_collection" label="数据采集">
-            <a-switch v-model="formData.data_collection" />
-          </a-form-item>
-        </a-col>
-        <a-col :span="12">
-          <a-form-item v-if="formData.data_collection" field="collection_interval" label="采集时间">
-            <a-select v-model="formData.collection_interval" placeholder="请选择采集时间">
-              <a-option :value="1">1分钟</a-option>
-              <a-option :value="5">5分钟</a-option>
-              <a-option :value="10">10分钟</a-option>
-              <a-option :value="30">30分钟</a-option>
+          <a-form-item field="server_type" label="类型">
+            <a-select v-model="formData.server_type" placeholder="请选择类型" allow-clear>
+              <a-option value="physical">物理机</a-option>
+              <a-option value="virtual">虚拟机</a-option>
+              <a-option value="cloud">云主机</a-option>
             </a-select>
           </a-form-item>
         </a-col>
       </a-row>
 
-      <a-form-item field="remark" label="备注信息">
-        <a-textarea
-          v-model="formData.remark"
-          placeholder="请输入备注信息"
-          :rows="4"
-        />
+      <a-form-item field="location" label="位置">
+        <a-input v-model="formData.location" placeholder="请输入位置信息" />
       </a-form-item>
+
+      <a-form-item field="tags" label="标签">
+        <a-input v-model="formData.tags" placeholder="多个标签，逗号间隔" />
+      </a-form-item>
+
+      <a-form-item field="description" label="描述">
+        <a-textarea v-model="formData.description" placeholder="请输入描述" :rows="3" />
+      </a-form-item>
+
+      <a-divider>远程访问配置</a-divider>
+
+      <a-row :gutter="20">
+        <a-col :span="12">
+          <a-form-item field="remote_access" label="远程访问">
+            <a-input v-model="formData.remote_access" placeholder="请输入远程访问地址" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item field="remote_port" label="远程管理端口">
+            <a-input-number v-model="formData.remote_port" placeholder="请输入端口" :min="0" :max="65535" style="width: 100%" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+
+      <a-divider>Agent 配置</a-divider>
+
+      <a-form-item field="agent_config" label="Agent配置URL">
+        <a-input v-model="formData.agent_config" placeholder="请输入完整的 http(s) URL" />
+      </a-form-item>
+
+      <a-divider>采集配置</a-divider>
+
+      <a-row :gutter="20">
+        <a-col :span="12">
+          <a-form-item field="collect_on" label="启用采集">
+            <a-switch v-model="formData.collect_on" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item v-if="formData.collect_on" field="collect_interval" label="采集间隔(秒)">
+            <a-input-number v-model="formData.collect_interval" placeholder="请输入采集间隔" :min="10" :max="3600" style="width: 100%" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+
     </a-form>
   </a-modal>
 </template>
@@ -99,100 +141,151 @@
 <script lang="ts" setup>
 import { ref, reactive, computed, watch } from 'vue'
 import { Message } from '@arco-design/web-vue'
-import { v4 as uuidv4 } from 'uuid'
 import type { FormInstance } from '@arco-design/web-vue'
+import { createPC, updatePC, type PCItem } from '@/api/ops/pc'
 
 interface Props {
   visible: boolean
-  record?: any
+  record?: PCItem | null
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  record: () => ({}),
+  record: null,
 })
 
 const emit = defineEmits(['update:visible', 'success'])
 
 const formRef = ref<FormInstance>()
 const confirmLoading = ref(false)
-const selectedLocation = ref('')
 
 const isEdit = computed(() => !!props.record?.id)
 
 const formData = reactive({
-  unique_id: '',
+  pc_identity: '',
   name: '',
-  server_type: '',
+  host: '',
+  ip_address: '',
   os: '',
+  os_version: '',
+  kernel: '',
+  server_type: '',
   location: '',
   tags: '',
-  ip: '',
-  remote_port: '',
-  agent_url: '',
-  data_collection: false,
-  collection_interval: 5,
-  remark: '',
+  description: '',
+  remote_access: '',
+  remote_port: 0,
+  agent_config: '',
+  collect_on: true,
+  collect_interval: 60,
 })
 
 const rules = {
-  name: [{ required: true, message: '请输入办公名称' }],
-  server_type: [{ required: true, message: '请选择办公类型' }],
-  os: [{ required: true, message: '请选择操作系统' }],
+  name: [{ required: true, message: '请输入办公PC名称' }],
+  host: [{ required: true, message: '请输入主机地址' }],
 }
 
-const locationOptions = ref([
-  { label: 'A数据中心-3层-24机柜-5U位', value: 'A数据中心-3层-24机柜-5U位' },
-  { label: 'A数据中心-3层-24机柜-6U位', value: 'A数据中心-3层-24机柜-6U位' },
-  { label: 'B数据中心-1层-12机柜-1U位', value: 'B数据中心-1层-12机柜-1U位' },
-  { label: 'B数据中心-1层-12机柜-2U位', value: 'B数据中心-1层-12机柜-2U位' },
-  { label: 'C数据中心-2层-8机柜-3U位', value: 'C数据中心-2层-8机柜-3U位' },
-])
-
 watch(
   () => props.visible,
   (val) => {
     if (val) {
       if (isEdit.value && props.record) {
-        Object.assign(formData, props.record)
+        Object.assign(formData, {
+          pc_identity: props.record.pc_identity || '',
+          name: props.record.name || '',
+          host: props.record.host || '',
+          ip_address: props.record.ip_address || '',
+          os: props.record.os || '',
+          os_version: props.record.os_version || '',
+          kernel: props.record.kernel || '',
+          server_type: props.record.server_type || '',
+          location: props.record.location || '',
+          tags: props.record.tags || '',
+          description: props.record.description || '',
+          remote_access: props.record.remote_access || '',
+          remote_port: props.record.remote_port || 0,
+          agent_config: props.record.agent_config || '',
+          collect_on: props.record.collect_on ?? true,
+          collect_interval: props.record.collect_interval || 60,
+        })
       } else {
         Object.assign(formData, {
-          unique_id: '',
+          pc_identity: '',
           name: '',
-          server_type: '',
+          host: '',
+          ip_address: '',
           os: '',
+          os_version: '',
+          kernel: '',
+          server_type: '',
           location: '',
           tags: '',
-          ip: '',
-          remote_port: '',
-          agent_url: '',
-          data_collection: false,
-          collection_interval: 5,
-          remark: '',
+          description: '',
+          remote_access: '',
+          remote_port: 0,
+          agent_config: '',
+          collect_on: true,
+          collect_interval: 60,
         })
       }
     }
   }
 )
 
-const handleLocationSelect = (value: string) => {
-  formData.location = value
-}
-
 const handleOk = async () => {
   try {
-    await formRef.value?.validate()
-    
-    if (!formData.unique_id) {
-      formData.unique_id = uuidv4()
+    const vilid = await formRef.value?.validate()
+    if (vilid) {
+      return
     }
-
+    
     confirmLoading.value = true
     
-    await new Promise(resolve => setTimeout(resolve, 1000))
+    // 基础提交数据
+    const baseData = {
+      name: formData.name,
+      host: formData.host,
+      ip_address: formData.ip_address,
+      os: formData.os,
+      os_version: formData.os_version,
+      kernel: formData.kernel,
+      server_type: formData.server_type,
+      location: formData.location,
+      tags: formData.tags,
+      description: formData.description,
+      remote_access: formData.remote_access,
+      remote_port: formData.remote_port,
+      agent_config: formData.agent_config,
+      collect_on: formData.collect_on,
+      collect_interval: formData.collect_interval,
+    }
     
-    Message.success(isEdit.value ? '更新成功' : '创建成功')
-    emit('success')
-    handleCancel()
+    if (isEdit.value && props.record?.id) {
+      // 编辑时包含 pc_identity
+      const submitData = {
+        ...baseData,
+        pc_identity: formData.pc_identity,
+      }
+      const res: any = await updatePC(props.record.id, submitData)
+      
+      if (res.code === 0) {
+        Message.success('更新成功')
+        emit('success')
+        handleCancel()
+      } else {
+        Message.error(res.message || '更新失败')
+      }
+    } else {
+      // 新建时不传 pc_identity，由后端生成
+      const res: any = await createPC(baseData)
+      
+      if (res.code === 0) {
+        Message.success('创建成功')
+        emit('success')
+        handleCancel()
+      } else {
+        Message.error(res.message || '创建失败')
+      }
+    }
   } catch (error) {
     console.error('验证失败:', error)
   } finally {
diff --git a/src/views/ops/pages/dc/pc/components/QuickConfigDialog.vue b/src/views/ops/pages/dc/pc/components/QuickConfigDialog.vue
index 6e26b54..6bbcd22 100644
--- a/src/views/ops/pages/dc/pc/components/QuickConfigDialog.vue
+++ b/src/views/ops/pages/dc/pc/components/QuickConfigDialog.vue
@@ -8,25 +8,25 @@
     @cancel="handleCancel"
   >
     <a-form :model="form" layout="vertical">
-      <a-form-item label="远程访问端口">
-        <a-input-number
-          v-model="form.remote_port"
-          placeholder="请输入远程访问端口，为空则不可远程访问"
-          :min="1"
-          :max="65535"
-          style="width: 100%"
+      <a-form-item label="Agent配置URL">
+        <a-input
+          v-model="form.agent_config"
+          placeholder="请输入完整的 http(s) URL"
           allow-clear
         />
-        <template #extra>
-          <span style="color: #86909c">为空则不可远程访问</span>
-        </template>
       </a-form-item>
 
-      <a-form-item label="Agent URL配置">
-        <a-input
-          v-model="form.agent_url"
-          placeholder="请输入Agent URL"
-          allow-clear
+      <a-form-item label="启用采集">
+        <a-switch v-model="form.collect_on" />
+      </a-form-item>
+
+      <a-form-item v-if="form.collect_on" label="采集间隔(秒)">
+        <a-input-number
+          v-model="form.collect_interval"
+          placeholder="请输入采集间隔"
+          :min="10"
+          :max="3600"
+          style="width: 100%"
         />
       </a-form-item>
     </a-form>
@@ -36,10 +36,11 @@
 <script lang="ts" setup>
 import { ref, watch } from 'vue'
 import { Message } from '@arco-design/web-vue'
+import { updatePC, type PCItem } from '@/api/ops/pc'
 
 interface Props {
   visible: boolean
-  record: any
+  record: PCItem | null
 }
 
 const props = defineProps<Props>()
@@ -48,35 +49,42 @@ const emit = defineEmits(['update:visible', 'success'])
 const loading = ref(false)
 
 const form = ref({
-  remote_port: undefined as number | undefined,
-  agent_url: '',
+  agent_config: '',
+  collect_on: true,
+  collect_interval: 60,
 })
 
 watch(
   () => props.visible,
   (val) => {
     if (val && props.record) {
-      form.value.remote_port = props.record.remote_port
-      form.value.agent_url = props.record.agent_url || ''
+      form.value = {
+        agent_config: props.record.agent_config || '',
+        collect_on: props.record.collect_on ?? true,
+        collect_interval: props.record.collect_interval || 60,
+      }
     }
   }
 )
 
 const handleSubmit = async () => {
+  if (!props.record?.id) return
+  
   loading.value = true
   try {
-    // 模拟API调用
-    await new Promise((resolve) => setTimeout(resolve, 500))
+    const res: any = await updatePC(props.record.id, {
+      agent_config: form.value.agent_config,
+      collect_on: form.value.collect_on,
+      collect_interval: form.value.collect_interval,
+    })
     
-    // 更新记录
-    props.record.remote_port = form.value.remote_port
-    props.record.agent_url = form.value.agent_url
-    props.record.remote_access = !!form.value.remote_port
-    props.record.agent_config = !!form.value.agent_url
-    
-    Message.success('配置成功')
-    emit('success')
-    emit('update:visible', false)
+    if (res.code === 0) {
+      Message.success('配置成功')
+      emit('success')
+      emit('update:visible', false)
+    } else {
+      Message.error(res.message || '配置失败')
+    }
   } catch (error) {
     Message.error('配置失败')
   } finally {
@@ -87,4 +95,4 @@ const handleSubmit = async () => {
 const handleCancel = () => {
   emit('update:visible', false)
 }
-</script>
+</script>
\ No newline at end of file
diff --git a/src/views/ops/pages/dc/pc/config/columns.ts b/src/views/ops/pages/dc/pc/config/columns.ts
index 85dbc6b..c7d034a 100644
--- a/src/views/ops/pages/dc/pc/config/columns.ts
+++ b/src/views/ops/pages/dc/pc/config/columns.ts
@@ -6,7 +6,7 @@ export const columns = [
     slotName: 'id',
   },
   {
-    dataIndex: 'unique_id',
+    dataIndex: 'pc_identity',
     title: '唯一标识',
     width: 150,
   },
@@ -15,14 +15,34 @@ export const columns = [
     title: '名称',
     width: 150,
   },
+  {
+    dataIndex: 'host',
+    title: '主机地址',
+    width: 140,
+  },
+  {
+    dataIndex: 'ip_address',
+    title: 'IP地址',
+    width: 140,
+  },
   {
     dataIndex: 'os',
     title: '操作系统',
-    width: 150,
+    width: 120,
+  },
+  {
+    dataIndex: 'os_version',
+    title: '系统版本',
+    width: 100,
+  },
+  {
+    dataIndex: 'server_type',
+    title: '类型',
+    width: 100,
   },
   {
     dataIndex: 'location',
-    title: '位置信息',
+    title: '位置',
     width: 150,
   },
   {
@@ -30,23 +50,6 @@ export const columns = [
     title: '标签',
     width: 120,
   },
-  {
-    dataIndex: 'ip',
-    title: 'IP地址',
-    width: 150,
-  },
-  {
-    dataIndex: 'remote_access',
-    title: '远程访问',
-    width: 100,
-    slotName: 'remote_access',
-  },
-  {
-    dataIndex: 'agent_config',
-    title: 'Agent配置',
-    width: 150,
-    slotName: 'agent_config',
-  },
   {
     dataIndex: 'cpu',
     title: 'CPU使用率',
@@ -65,6 +68,12 @@ export const columns = [
     width: 150,
     slotName: 'disk',
   },
+  {
+    dataIndex: 'collect_on',
+    title: '采集状态',
+    width: 100,
+    slotName: 'collect_on',
+  },
   {
     dataIndex: 'status',
     title: '状态',
diff --git a/src/views/ops/pages/dc/pc/config/search-form.ts b/src/views/ops/pages/dc/pc/config/search-form.ts
index f60ea1c..2082cc2 100644
--- a/src/views/ops/pages/dc/pc/config/search-form.ts
+++ b/src/views/ops/pages/dc/pc/config/search-form.ts
@@ -5,35 +5,18 @@ export const searchFormConfig: FormItem[] = [
     field: 'keyword',
     label: '关键词',
     type: 'input',
-    placeholder: '请输入PC名称、编码或IP',
+    placeholder: '请输入PC名称或主机地址',
     span: 6,
   },
   {
-    field: 'datacenter_id',
-    label: '数据中心',
+    field: 'collect_on',
+    label: '采集状态',
     type: 'select',
-    placeholder: '请选择数据中心',
-    options: [], // 需要动态加载
-    span: 6,
-  },
-  {
-    field: 'rack_id',
-    label: '机柜',
-    type: 'select',
-    placeholder: '请选择机柜',
-    options: [], // 需要动态加载
-    span: 6,
-  },
-  {
-    field: 'status',
-    label: '状态',
-    type: 'select',
-    placeholder: '请选择状态',
+    placeholder: '请选择采集状态',
     options: [
-      { label: '在线', value: 'online' },
-      { label: '离线', value: 'offline' },
-      { label: '维护中', value: 'maintenance' },
-      { label: '已退役', value: 'retired' },
+      { label: '全部', value: '' },
+      { label: '已启用', value: 'true' },
+      { label: '已禁用', value: 'false' },
     ],
     span: 6,
   },
diff --git a/src/views/ops/pages/dc/pc/index.vue b/src/views/ops/pages/dc/pc/index.vue
index 062064b..d6c23dc 100644
--- a/src/views/ops/pages/dc/pc/index.vue
+++ b/src/views/ops/pages/dc/pc/index.vue
@@ -30,20 +30,6 @@
         {{ record.id }}
       </template>
       
-      <!-- 远程访问 -->
-      <template #remote_access="{ record }">
-        <a-tag :color="record.remote_access ? 'green' : 'gray'">
-          {{ record.remote_access ? '已开启' : '未开启' }}
-        </a-tag>
-      </template>
-      
-      <!-- Agent配置 -->
-      <template #agent_config="{ record }">
-        <a-tag :color="record.agent_config ? 'green' : 'gray'">
-          {{ record.agent_config ? '已配置' : '未配置' }}
-        </a-tag>
-      </template>
-      
       <!-- CPU -->
       <template #cpu="{ record }">
         <div class="resource-display">
@@ -92,6 +78,13 @@
         </div>
       </template>
       
+      <!-- 采集状态 -->
+      <template #collect_on="{ record }">
+        <a-tag :color="record.collect_on ? 'green' : 'gray'">
+          {{ record.collect_on ? '已启用' : '已禁用' }}
+        </a-tag>
+      </template>
+      
       <!-- 状态 -->
       <template #status="{ record }">
         <a-tag :color="getStatusColor(record.status)">
@@ -102,7 +95,7 @@
       <!-- 操作栏 -->
       <template #actions="{ record }">
         <a-space>
-          <a-button
+          <!-- <a-button
             v-if="!record.agent_config"
             type="outline"
             size="small"
@@ -112,14 +105,14 @@
               <icon-settings />
             </template>
             快捷配置
-          </a-button>
+          </a-button> -->
           <a-dropdown trigger="hover">
             <a-button type="primary" size="small">
               管理
               <icon-down />
             </a-button>
             <template #content>
-              <a-doption @click="handleRestart(record)">
+              <!-- <a-doption @click="handleRestart(record)">
                 <template #icon>
                   <icon-refresh />
                 </template>
@@ -130,19 +123,19 @@
                   <icon-eye />
                 </template>
                 详情
-              </a-doption>
+              </a-doption> -->
               <a-doption @click="handleEdit(record)">
                 <template #icon>
                   <icon-edit />
                 </template>
                 编辑
               </a-doption>
-              <a-doption @click="handleRemoteControl(record)">
+              <!-- <a-doption @click="handleRemoteControl(record)">
                 <template #icon>
                   <icon-desktop />
                 </template>
                 远程控制
-              </a-doption>
+              </a-doption> -->
               <a-doption @click="handleDelete(record)" style="color: rgb(var(--danger-6))">
                 <template #icon>
                   <icon-delete />
@@ -168,23 +161,22 @@
       :record="currentRecord"
       @success="handleFormSuccess"
     />
-
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, computed } from 'vue'
+import { ref, reactive, computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { Message, Modal } from '@arco-design/web-vue'
-import { 
-  IconPlus, 
+import {
+  IconPlus,
   IconDown,
   IconEdit,
-  IconDesktop,
   IconDelete,
-  IconRefresh,
   IconEye,
-  IconSettings
+  IconSettings,
+  IconRefresh,
+  IconDesktop,
 } from '@arco-design/web-vue/es/icon'
 import type { FormItem } from '@/components/search-form/types'
 import SearchTable from '@/components/search-table/index.vue'
@@ -193,150 +185,30 @@ import { columns as columnsConfig } from './config/columns'
 import {
   fetchPCList,
   deletePC,
+  type PCItem,
 } from '@/api/ops/pc'
 import FormDialog from './components/FormDialog.vue'
 import QuickConfigDialog from './components/QuickConfigDialog.vue'
-import Detail from './components/Detail.vue'
+import axios from 'axios'
+
+// 创建独立的 axios 实例用于请求外部 agent，绕过全局拦截器
+const agentAxios = axios.create({
+  timeout: 5000,
+})
 
 const router = useRouter()
 
-// Mock 假数据
-const mockPCData = [
-  {
-    id: 1,
-    unique_id: 'PC-2024-0001',
-    name: '开发PC-01',
-    os: 'Windows 11',
-    location: '数据中心A-1楼-办公区01',
-    tags: '开发,前端',
-    ip: '192.168.1.201',
-    remote_access: true,
-    agent_config: true,
-    cpu_info: { value: 35, total: '8核', used: '2.8核' },
-    memory_info: { value: 52, total: '16GB', used: '8.3GB' },
-    disk_info: { value: 65, total: '512GB', used: '333GB' },
-    status: 'online',
-  },
-  {
-    id: 2,
-    unique_id: 'PC-2024-0002',
-    name: '测试PC-01',
-    os: 'Windows 10',
-    location: '数据中心A-1楼-办公区02',
-    tags: '测试,自动化',
-    ip: '192.168.1.202',
-    remote_access: true,
-    agent_config: true,
-    cpu_info: { value: 28, total: '4核', used: '1.1核' },
-    memory_info: { value: 45, total: '8GB', used: '3.6GB' },
-    disk_info: { value: 72, total: '256GB', used: '184GB' },
-    status: 'online',
-  },
-  {
-    id: 3,
-    unique_id: 'PC-2024-0003',
-    name: '设计PC-01',
-    os: 'macOS Sonoma',
-    location: '数据中心A-2楼-设计室01',
-    tags: '设计,创意',
-    ip: '192.168.1.203',
-    remote_access: false,
-    agent_config: false,
-    cpu_info: { value: 0, total: '12核', used: '0核' },
-    memory_info: { value: 0, total: '32GB', used: '0GB' },
-    disk_info: { value: 0, total: '1TB', used: '0GB' },
-    status: 'offline',
-  },
-  {
-    id: 4,
-    unique_id: 'PC-2024-0004',
-    name: '运维PC-01',
-    os: 'Windows 11',
-    location: '数据中心B-1楼-运维室01',
-    tags: '运维,监控',
-    ip: '192.168.2.201',
-    remote_access: true,
-    agent_config: true,
-    cpu_info: { value: 42, total: '6核', used: '2.5核' },
-    memory_info: { value: 58, total: '16GB', used: '9.3GB' },
-    disk_info: { value: 68, total: '512GB', used: '348GB' },
-    status: 'online',
-  },
-  {
-    id: 5,
-    unique_id: 'PC-2024-0005',
-    name: '财务PC-01',
-    os: 'Windows 10',
-    location: '数据中心B-2楼-财务室01',
-    tags: '财务,报表',
-    ip: '192.168.2.202',
-    remote_access: true,
-    agent_config: true,
-    cpu_info: { value: 22, total: '4核', used: '0.9核' },
-    memory_info: { value: 38, total: '8GB', used: '3.0GB' },
-    disk_info: { value: 55, total: '256GB', used: '141GB' },
-    status: 'online',
-  },
-  {
-    id: 6,
-    unique_id: 'PC-2024-0006',
-    name: '备用PC-01',
-    os: 'Windows 11',
-    location: '数据中心A-1楼-备用室01',
-    tags: '备用,测试',
-    ip: '192.168.1.204',
-    remote_access: false,
-    agent_config: false,
-    cpu_info: { value: 0, total: '4核', used: '0核' },
-    memory_info: { value: 0, total: '8GB', used: '0GB' },
-    disk_info: { value: 0, total: '256GB', used: '0GB' },
-    status: 'maintenance',
-  },
-  {
-    id: 7,
-    unique_id: 'PC-2024-0007',
-    name: '开发PC-02',
-    os: 'Ubuntu 22.04',
-    location: '数据中心A-1楼-办公区03',
-    tags: '开发,后端',
-    ip: '192.168.1.205',
-    remote_access: true,
-    agent_config: true,
-    cpu_info: { value: 48, total: '8核', used: '3.8核' },
-    memory_info: { value: 62, total: '16GB', used: '9.9GB' },
-    disk_info: { value: 58, total: '512GB', used: '297GB' },
-    status: 'online',
-  },
-  {
-    id: 8,
-    unique_id: 'PC-2024-0008',
-    name: '产品PC-01',
-    os: 'Windows 11',
-    location: '数据中心B-1楼-产品室01',
-    tags: '产品,设计',
-    ip: '192.168.2.203',
-    remote_access: true,
-    agent_config: true,
-    cpu_info: { value: 32, total: '6核', used: '1.9核' },
-    memory_info: { value: 45, total: '16GB', used: '7.2GB' },
-    disk_info: { value: 62, total: '512GB', used: '317GB' },
-    status: 'online',
-  },
-]
-
 // 状态管理
 const loading = ref(false)
-const tableData = ref<any[]>([])
+const tableData = ref<PCItem[]>([])
 const formModel = ref({
   keyword: '',
-  datacenter_id: undefined,
-  rack_id: undefined,
-  status: undefined,
+  collect_on: undefined as boolean | undefined,
 })
 
 const dialogVisible = ref(false)
 const quickConfigVisible = ref(false)
-const currentRecord = ref<any>(null)
+const currentRecord = ref<PCItem | null>(null)
 
 const pagination = reactive({
   current: 1,
@@ -355,8 +227,7 @@ const getStatusColor = (status?: string) => {
   const colorMap: Record<string, string> = {
     online: 'green',
     offline: 'red',
-    maintenance: 'orange',
-    retired: 'gray',
+    unknown: 'gray',
   }
   return colorMap[status || ''] || 'gray'
 }
@@ -366,8 +237,7 @@ const getStatusText = (status?: string) => {
   const textMap: Record<string, string> = {
     online: '在线',
     offline: '离线',
-    maintenance: '维护中',
-    retired: '已退役',
+    unknown: '未知',
   }
   return textMap[status || ''] || '-'
 }
@@ -380,37 +250,38 @@ const getProgressColor = (value: number) => {
   return '#00B42A' // 绿色
 }
 
-// 获取PC列表（使用 Mock 数据）
+// 获取PC列表
 const fetchPCs = async () => {
   loading.value = true
   
   try {
-    // 模拟网络延迟
-    await new Promise(resolve => setTimeout(resolve, 500))
+    const params: {
+      page: number
+      size: number
+      keyword?: string
+      collect_on?: boolean
+    } = {
+      page: pagination.current,
+      size: pagination.pageSize,
+    }
     
-    // 使用 Mock 数据
-    tableData.value = mockPCData
-    pagination.total = mockPCData.length
+    if (formModel.value.keyword) {
+      params.keyword = formModel.value.keyword
+    }
     
-    // 如果有搜索条件，进行过滤
-    if (formModel.value.keyword || formModel.value.status) {
-      let filteredData = [...mockPCData]
+    if (formModel.value.collect_on !== undefined && formModel.value.collect_on !== null) {
+      params.collect_on = formModel.value.collect_on
+    }
+    
+    const res: any = await fetchPCList(params)
+    
+    if (res.code === 200 || res.code === 0) {
+      const responseData = res.details || res.data || {}
+      tableData.value = responseData.data || []
+      pagination.total = responseData.total || 0
       
-      if (formModel.value.keyword) {
-        const keyword = formModel.value.keyword.toLowerCase()
-        filteredData = filteredData.filter(item => 
-          item.name.toLowerCase().includes(keyword) ||
-          item.unique_id.toLowerCase().includes(keyword) ||
-          item.ip.toLowerCase().includes(keyword)
-        )
-      }
-      
-      if (formModel.value.status) {
-        filteredData = filteredData.filter(item => item.status === formModel.value.status)
-      }
-      
-      tableData.value = filteredData
-      pagination.total = filteredData.length
+      // 列表加载成功后，获取监控指标
+      await getAllMetrics()
     }
   } catch (error) {
     console.error('获取PC列表失败:', error)
@@ -422,6 +293,75 @@ const fetchPCs = async () => {
   }
 }
 
+// 获取所有PC的监控指标
+const getAllMetrics = async () => {
+  try {
+    // 遍历每个PC记录
+    const metricsPromises = tableData.value.map(async (record) => {
+      // 检查是否有 agent_config 配置
+      if (record.agent_config) {
+        try {
+          // 从 agent_config 中解析 URL
+          let metricsUrl = record.agent_config
+          
+          // 验证 URL 是否合法
+          try {
+            new URL(metricsUrl)
+          } catch (urlError) {
+            console.warn(`PC ${record.name} 的 agent_config 不是合法的 URL:`, metricsUrl)
+            // 设置默认值 0
+            record.cpu_info = { value: 0, total: '', used: '' }
+            record.memory_info = { value: 0, total: '', used: '' }
+            record.disk_info = { value: 0, total: '', used: '' }
+            return
+          }
+          
+          // 使用独立的 axios 实例请求外部 agent，绕过全局拦截器
+          const response = await agentAxios.get(metricsUrl)
+          console.log('获取指标数据:', response.data)
+          
+          if (response.data) {
+            // 更新记录的监控数据
+            record.cpu_info = {
+              value: Number((response.data.cpu_usage || 0).toFixed(2)),
+              total: response.data.cpu?.length ? `${response.data.cpu.length}核` : '',
+              used: '',
+            }
+
+            record.memory_info = {
+              value: Number((response.data.mem_usage?.used_percent || 0).toFixed(2)),
+              total: response.data.mem_usage?.total ? `${(response.data.mem_usage.total / 1024 / 1024 / 1024).toFixed(1)}GB` : '',
+              used: response.data.mem_usage?.used ? `${(response.data.mem_usage.used / 1024 / 1024 / 1024).toFixed(1)}GB` : '',
+            }
+
+            record.disk_info = {
+              value: Number((response.data.disk_usage?.used_percent || 0).toFixed(2)),
+              total: response.data.disk_usage?.total ? `${(response.data.disk_usage.total / 1024 / 1024 / 1024).toFixed(0)}GB` : '',
+              used: response.data.disk_usage?.used ? `${(response.data.disk_usage.used / 1024 / 1024 / 1024).toFixed(0)}GB` : '',
+            }
+          }
+        } catch (error) {
+          console.warn(`获取PC ${record.name} 的监控指标失败:`, error)
+          // 初始化默认值
+          record.cpu_info = { value: 0, total: '', used: '' }
+          record.memory_info = { value: 0, total: '', used: '' }
+          record.disk_info = { value: 0, total: '', used: '' }
+        }
+      } else {
+        // 没有配置 agent，设置默认值
+        record.cpu_info = { value: 0, total: '', used: '' }
+        record.memory_info = { value: 0, total: '', used: '' }
+        record.disk_info = { value: 0, total: '', used: '' }
+      }
+    })
+    
+    // 等待所有请求完成
+    await Promise.all(metricsPromises)
+  } catch (error) {
+    console.error('获取所有PC监控指标失败:', error)
+  }
+}
+
 // 搜索
 const handleSearch = () => {
   pagination.current = 1
@@ -437,9 +377,7 @@ const handleFormModelUpdate = (value: any) => {
 const handleReset = () => {
   formModel.value = {
     keyword: '',
-    datacenter_id: undefined,
-    rack_id: undefined,
-    status: undefined,
+    collect_on: undefined,
   }
   pagination.current = 1
   fetchPCs()
@@ -464,32 +402,32 @@ const handleAdd = () => {
 }
 
 // 快捷配置
-const handleQuickConfig = (record: any) => {
+const handleQuickConfig = (record: PCItem) => {
   currentRecord.value = record
   quickConfigVisible.value = true
 }
 
 // 编辑PC
-const handleEdit = (record: any) => {
+const handleEdit = (record: PCItem) => {
   currentRecord.value = record
   dialogVisible.value = true
 }
 
 // 详情 - 在当前窗口打开
-const handleDetail = (record: any) => {
+const handleDetail = (record: PCItem) => {
   router.push({
     path: '/dc/detail',
     query: {
       id: record.id,
       name: record.name,
-      ip: record.ip,
+      host: record.host,
       status: record.status,
     },
   })
 }
 
 // 重启
-const handleRestart = (record: any) => {
+const handleRestart = (record: PCItem) => {
   Modal.confirm({
     title: '确认重启',
     content: `确认重启办公PC ${record.name} 吗？`,
@@ -500,13 +438,13 @@ const handleRestart = (record: any) => {
 }
 
 // 远程控制 - 在新窗口打开
-const handleRemoteControl = (record: any) => {
+const handleRemoteControl = (record: PCItem) => {
   const url = router.resolve({
     path: '/dc/remote',
     query: {
       id: record.id,
       name: record.name,
-      ip: record.ip,
+      host: record.host,
       status: record.status,
     },
   }).href
@@ -519,30 +457,27 @@ const handleFormSuccess = () => {
 }
 
 // 删除PC
-const handleDelete = async (record: any) => {
-  try {
-    Modal.confirm({
-      title: '确认删除',
-      content: `确认删除PC ${record.name} 吗？`,
-      onOk: async () => {
-        // Mock 删除操作
-        const index = mockPCData.findIndex(item => item.id === record.id)
-        if (index > -1) {
-          mockPCData.splice(index, 1)
-          Message.success('删除成功')
-          fetchPCs()
-        } else {
-          Message.error('删除失败')
-        }
-      },
-    })
-  } catch (error) {
-    console.error('删除PC失败:', error)
-  }
+const handleDelete = async (record: PCItem) => {
+  Modal.confirm({
+    title: '确认删除',
+    content: `确认删除PC ${record.name} 吗？`,
+    onOk: async () => {
+      try {
+        await deletePC(record.id)
+        Message.success('删除成功')
+        fetchPCs()
+      } catch (error) {
+        console.error('删除PC失败:', error)
+        Message.error('删除失败')
+      }
+    },
+  })
 }
 
 // 初始化加载数据
-fetchPCs()
+onMounted(() => {
+  fetchPCs()
+})
 </script>
 
 <script lang="ts">
@@ -560,32 +495,21 @@ export default {
   display: flex;
   flex-direction: column;
   gap: 4px;
-  padding: 4px 0;
   
   .resource-info {
     display: flex;
-    align-items: center;
     justify-content: space-between;
-    > div {
-      display: inline-block;
+    align-items: center;
+    
+    .resource-label {
+      font-size: 12px;
+      color: var(--color-text-3);
     }
+    
     .resource-value {
       font-size: 12px;
       font-weight: 500;
-      color: rgb(var(--text-1));
-    }
-  }
-  
-  :deep(.arco-progress) {
-    margin: 0;
-    
-    .arco-progress-bar-bg {
-      border-radius: 2px;
-    }
-    
-    .arco-progress-bar {
-      border-radius: 2px;
-      transition: all 0.3s ease;
+      color: var(--color-text-1);
     }
   }
 }
diff --git a/src/views/ops/pages/dc/server/api.md b/src/views/ops/pages/dc/server/api.md
deleted file mode 100644
index e255ee4..0000000
--- a/src/views/ops/pages/dc/server/api.md
+++ /dev/null
@@ -1,365 +0,0 @@
-# 服务器管理接口文档
-
-## 基础信息
-
-- **文档索引**: [README.md](README.md)
-- **服务前缀**: `/DC-Control/v1/servers`
-- **认证方式**: JWT认证（所有接口都需要JWT Token）
-- **Content-Type**: `application/json`
-
----
-
-## 1. 获取服务器列表
-
-### 接口信息
-- **路径**: `GET /DC-Control/v1/servers`
-- **描述**: 分页获取服务器列表，支持关键词搜索、按是否启用采集（`collect_on`）过滤
-
-### 请求参数
-
-#### 查询参数 (Query Parameters)
-
-| 参数名 | 类型 | 必填 | 默认值 | 说明 |
-|--------|------|------|--------|------|
-| page | int | 否 | 1 | 页码（必须为正整数） |
-| size | int | 否 | 20 | 每页数量（必须为正整数，最大100） |
-| keyword | string | 否 | - | 搜索关键词（按**名称、主机地址**模糊匹配，实现见 `ListServers`） |
-| collect_on | bool | 否 | - | 是否启用采集过滤，仅 `true`/`false`；缺省或空串不按该条件过滤，非法值返回 400 |
-
-### 请求示例
-
-```http
-GET /DC-Control/v1/servers?page=1&size=20&keyword=生产&collect_on=true
-Authorization: Bearer {JWT_TOKEN}
-```
-
-### 返回参数
-
-```json
-{
-  "code": 200,
-  "message": "success",
-  "data": {
-    "total": 50,
-    "page": 1,
-    "page_size": 20,
-    "data": [
-      {
-        "id": 1,
-        "created_at": "2024-01-01T10:00:00Z",
-        "updated_at": "2024-01-01T10:00:00Z",
-        "deleted_at": null,
-        "server_identity": "server-001",
-        "name": "生产服务器-001",
-        "host": "192.168.1.100",
-        "ip_address": "192.168.1.100",
-        "description": "生产环境主服务器",
-        "os": "Linux",
-        "os_version": "22.04",
-        "kernel": "x86",
-        "server_type": "physical",
-        "tags": "production,web",
-        "location": "机房A-机架01",
-        "remote_access": "ssh://user@host",
-        "agent_config": "",
-        "status": "online",
-        "last_check_time": "2024-01-01T10:00:00Z",
-        "collect_on": true,
-        "collect_args": "",
-        "collect_interval": 60,
-        "collect_last_result": ""
-      }
-    ]
-  }
-}
-```
-
-### 返回字段说明
-
-| 字段名 | 类型 | 说明 |
-|--------|------|------|
-| total | int64 | 总记录数 |
-| page | int | 当前页码 |
-| page_size | int | 每页数量 |
-| data | array | 服务器列表 |
-| data[].id | uint | 服务器ID |
-| data[].created_at | string | 创建时间 |
-| data[].updated_at | string | 更新时间 |
-| data[].deleted_at | string\|null | 删除时间（软删除） |
-| data[].server_identity | string | 服务器唯一标识（唯一索引） |
-| data[].name | string | 服务器名称 |
-| data[].host | string | 服务器地址 |
-| data[].ip_address | string | IP地址 |
-| data[].description | string | 描述信息 |
-| data[].os | string | 操作系统：Windows/Linux/Mac/Other 等 |
-| data[].os_version | string | 操作系统版本 |
-| data[].kernel | string | 内核类型：x86/arm 等 |
-| data[].server_type | string | 服务器类型：physical（物理）/virtual（虚拟）/cloud（云） |
-| data[].tags | string | 标签，逗号分隔的字符串（如 `prod,web`），可为空 |
-| data[].location | string | 位置/机房信息 |
-| data[].remote_access | string | 远程访问信息 |
-| data[].agent_config | string | Agent 配置 |
-| data[].status | string | 状态：online（在线）/offline（离线）/unknown（未知） |
-| data[].last_check_time | string | 最后检查时间 |
-| data[].collect_on | bool | 是否启用采集 |
-| data[].collect_args | string | 采集参数 |
-| data[].collect_interval | int | 采集间隔（秒），默认 60 |
-| data[].collect_last_result | string | 采集最后结果 |
-
----
-
-## 2. 获取服务器详情
-
-### 接口信息
-- **路径**: `GET /DC-Control/v1/servers/:id`
-- **描述**: 根据ID获取单个服务器的详细信息
-
-### 请求参数
-
-#### 路径参数 (Path Parameters)
-
-| 参数名 | 类型 | 必填 | 说明 |
-|--------|------|------|--------|
-| id | uint | 是 | 服务器ID（必须大于0） |
-
-### 请求示例
-
-```http
-GET /DC-Control/v1/servers/1
-Authorization: Bearer {JWT_TOKEN}
-```
-
-### 返回参数
-
-返回单体字段与列表项一致（见上一节 `data[]` 字段说明），无嵌套 `collectors` 字段；采集器与服务器通过采集器表 `server_id` 关联，需通过采集器管理接口查询。
-
----
-
-## 3. 创建服务器
-
-### 接口信息
-- **路径**: `POST /DC-Control/v1/servers`
-- **描述**: 创建新的服务器记录
-
-### 请求参数
-
-#### 请求体 (Request Body)
-
-| 字段名 | 类型 | 必填 | 说明 |
-|--------|------|------|--------|
-| server_identity | string | 否 | 服务器唯一标识；**不传或空串时服务端生成 ULID** |
-| name | string | 是 | 服务器名称（最大100字符） |
-| host | string | 是 | 服务器地址（最大255字符） |
-| ip_address | string | 否 | IP地址（最大50字符） |
-| description | string | 否 | 描述信息 |
-| os | string | 否 | 操作系统类型 |
-| os_version | string | 否 | 操作系统版本 |
-| kernel | string | 否 | 内核类型 |
-| server_type | string | 否 | 服务器类型：physical/virtual/cloud（最大50字符） |
-| tags | string | 否 | 标签，逗号分隔（如 `env,role,tier`），最大约 500 字符，可为空 |
-| location | string | 否 | 位置/机房信息（最大200字符） |
-| remote_access | string | 否 | 远程访问 |
-| agent_config | string | 否 | Agent 配置 |
-| status | string | 否 | 状态：online/offline/unknown，默认由库表 default 为 unknown |
-| last_check_time | string (RFC3339) | 否 | 最后检查时间 |
-| collect_on | bool | 否 | 是否启用采集，默认 true |
-| collect_args | string | 否 | 采集参数 |
-| collect_interval | int | 否 | 采集间隔（秒），默认 60 |
-| collect_last_result | string | 否 | 采集最后结果 |
-
-### 请求示例
-
-```http
-POST /DC-Control/v1/servers
-Authorization: Bearer {JWT_TOKEN}
-Content-Type: application/json
-
-{
-  "server_identity": "server-001",
-  "name": "生产服务器-001",
-  "host": "192.168.1.100",
-  "ip_address": "192.168.1.100",
-  "description": "生产环境主服务器",
-  "server_type": "physical",
-  "tags": "production,web,tier1",
-  "location": "机房A-机架01",
-  "remote_access": "ssh://ops@192.168.1.100",
-  "status": "online",
-  "collect_on": true,
-  "collect_interval": 60
-}
-```
-
-### 返回参数
-
-```json
-{
-  "code": 200,
-  "message": "success",
-  "data": {
-    "id": 1,
-    "created_at": "2024-01-01T10:00:00Z",
-    "updated_at": "2024-01-01T10:00:00Z",
-    "deleted_at": null,
-    "server_identity": "server-001",
-    "name": "生产服务器-001",
-    "host": "192.168.1.100",
-    "ip_address": "192.168.1.100",
-    "description": "生产环境主服务器",
-    "os": "",
-    "os_version": "",
-    "kernel": "",
-    "server_type": "physical",
-    "tags": "production,web,tier1",
-    "location": "机房A-机架01",
-    "remote_access": "ssh://ops@192.168.1.100",
-    "agent_config": "",
-    "status": "online",
-    "last_check_time": "0001-01-01T00:00:00Z",
-    "collect_on": true,
-    "collect_args": "",
-    "collect_interval": 60,
-    "collect_last_result": ""
-  }
-}
-```
-
-> 创建接口直接返回内存中的 `server` 对象。采集器与服务器的关联请在**采集器管理**接口中维护（如设置采集器的 `server_id`）。
-
-### 错误响应
-
-当达到许可证限制时，会返回以下错误：
-
-```json
-{
-  "code": 400,
-  "message": "已达到许可证允许的最大服务器数量限制（{max_server}），无法创建更多服务器",
-  "data": null
-}
-```
-
----
-
-## 4. 更新服务器
-
-### 接口信息
-- **路径**: `PUT /DC-Control/v1/servers/:id`
-- **描述**: 更新服务器信息
-
-### 请求参数
-
-#### 路径参数 (Path Parameters)
-
-| 参数名 | 类型 | 必填 | 说明 |
-|--------|------|------|--------|
-| id | uint | 是 | 服务器ID（必须大于0） |
-
-#### 请求体 (Request Body)
-
-| 字段名 | 类型 | 必填 | 说明 |
-|--------|------|------|--------|
-| server_identity | string | 否 | 服务器唯一标识 |
-| name | string | 否 | 服务器名称 |
-| host | string | 否 | 服务器地址 |
-| ip_address | string | 否 | IP地址 |
-| description | string | 否 | 描述信息 |
-| server_type | string | 否 | 服务器类型 |
-| tags | string | 否 | 标签，逗号分隔 |
-| location | string | 否 | 位置/机房信息 |
-| remote_access | string | 否 | 远程访问 |
-| agent_config | string | 否 | Agent 配置 |
-| status | string | 否 | 状态 |
-| last_check_time | string (RFC3339) | 否 | 最后检查时间 |
-| collect_on | bool | 否 | 是否启用采集（可显式更新为 false） |
-| collect_args | string | 否 | 采集参数 |
-| collect_interval | int | 否 | 采集间隔（秒） |
-| collect_last_result | string | 否 | 采集最后结果 |
-| os / os_version / kernel | string | 否 | 操作系统与内核字段 |
-
-**注意**: 只传需要更新的字段；未出现的列不修改。更新使用 `map` 写入，可将 `collect_on`、`collect_interval` 等设为 `false`/`0`。
-
-### 请求示例
-
-```http
-PUT /DC-Control/v1/servers/1
-Authorization: Bearer {JWT_TOKEN}
-Content-Type: application/json
-
-{
-  "description": "更新后的描述",
-  "status": "offline",
-  "collect_on": false
-}
-```
-
-### 返回参数
-
-```json
-{
-  "code": 200,
-  "message": "success",
-  "data": {
-    "message": "updated"
-  }
-}
-```
-
----
-
-## 5. 删除服务器
-
-### 接口信息
-- **路径**: `DELETE /DC-Control/v1/servers/:id`
-- **描述**: 删除服务器（软删除）
-
-### 请求参数
-
-#### 路径参数 (Path Parameters)
-
-| 参数名 | 类型 | 必填 | 说明 |
-|--------|------|------|--------|
-| id | uint | 是 | 服务器ID（必须大于0） |
-
-### 请求示例
-
-```http
-DELETE /DC-Control/v1/servers/1
-Authorization: Bearer {JWT_TOKEN}
-```
-
-### 返回参数
-
-```json
-{
-  "code": 200,
-  "message": "success",
-  "data": {
-    "message": "deleted"
-  }
-}
-```
-
----
-
-## 错误码说明
-
-| 错误码 | 说明 |
-|--------|------|
-| 200 | 成功 |
-| 400 | 参数验证失败（如ID为0、page/size无效等） |
-| 401 | 未授权（JWT Token无效或过期） |
-| 404 | 资源不存在 |
-| 500 | 服务器内部错误 |
-
-## 注意事项
-
-1. 所有接口都需要在请求头中携带JWT Token：`Authorization: Bearer {JWT_TOKEN}`
-2. 服务器ID必须大于0
-3. 分页参数page和size必须为正整数，size最大为100
-4. `server_identity` 在库中必须唯一；若创建时不传则由服务端生成 ULID
-5. 服务器类型（`server_type`）支持：physical（物理）、virtual（虚拟）、cloud（云）
-6. 服务器状态：online（在线）、offline（离线）、unknown（未知）
-7. 删除服务器为软删除，数据不会真正删除
-8. **tags** 为可选，任意逗号分隔字符串（如 `env,app,tier`），长度受模型 `varchar(500)` 限制
-9. **许可证限制**：创建服务器时会检查**服务器总条数**是否达到许可证 `MaxServer` 上限，超出则拒绝创建
-10. 服务器 CRUD **不处理**采集器绑定；关联关系通过**采集器管理**接口（更新采集器 `server_id` 等）维护。列表与详情不内嵌采集器数组。
diff --git a/src/views/ops/pages/dc/server/components/QuickConfigDialog.vue b/src/views/ops/pages/dc/server/components/QuickConfigDialog.vue
index 6e26b54..2bcebe7 100644
--- a/src/views/ops/pages/dc/server/components/QuickConfigDialog.vue
+++ b/src/views/ops/pages/dc/server/components/QuickConfigDialog.vue
@@ -11,23 +11,40 @@
       <a-form-item label="远程访问端口">
         <a-input-number
           v-model="form.remote_port"
-          placeholder="请输入远程访问端口，为空则不可远程访问"
-          :min="1"
+          placeholder="请输入远程访问端口"
+          :min="0"
           :max="65535"
           style="width: 100%"
           allow-clear
         />
         <template #extra>
-          <span style="color: #86909c">为空则不可远程访问</span>
+          <span style="color: #86909c">SSH/RDP 等远程管理端口，0表示未配置</span>
         </template>
       </a-form-item>
 
       <a-form-item label="Agent URL配置">
         <a-input
-          v-model="form.agent_url"
-          placeholder="请输入Agent URL"
+          v-model="form.agent_config"
+          placeholder="http://192.168.1.100:9100/dc-host/v1/control/command"
           allow-clear
         />
+        <template #extra>
+          <span style="color: #86909c">完整 http(s) URL，用于周期性 POST 指令</span>
+        </template>
+      </a-form-item>
+
+      <a-form-item label="启用采集">
+        <a-switch v-model="form.collect_on" />
+      </a-form-item>
+
+      <a-form-item v-if="form.collect_on" label="采集间隔(秒)">
+        <a-input-number
+          v-model="form.collect_interval"
+          :min="10"
+          :max="3600"
+          placeholder="默认60秒"
+          style="width: 100%"
+        />
       </a-form-item>
     </a-form>
   </a-modal>
@@ -36,10 +53,12 @@
 <script lang="ts" setup>
 import { ref, watch } from 'vue'
 import { Message } from '@arco-design/web-vue'
+import { updateServer } from '@/api/ops/server'
+import type { ServerItem } from '@/api/ops/server'
 
 interface Props {
   visible: boolean
-  record: any
+  record: ServerItem | null
 }
 
 const props = defineProps<Props>()
@@ -48,36 +67,48 @@ const emit = defineEmits(['update:visible', 'success'])
 const loading = ref(false)
 
 const form = ref({
-  remote_port: undefined as number | undefined,
-  agent_url: '',
+  remote_port: 0,
+  agent_config: '',
+  collect_on: true,
+  collect_interval: 60,
 })
 
 watch(
   () => props.visible,
   (val) => {
     if (val && props.record) {
-      form.value.remote_port = props.record.remote_port
-      form.value.agent_url = props.record.agent_url || ''
+      form.value.remote_port = props.record.remote_port || 0
+      form.value.agent_config = props.record.agent_config || ''
+      form.value.collect_on = props.record.collect_on ?? true
+      form.value.collect_interval = props.record.collect_interval || 60
     }
-  }
+  },
 )
 
 const handleSubmit = async () => {
+  if (!props.record?.id) {
+    Message.error('服务器ID不存在')
+    return
+  }
+
   loading.value = true
   try {
-    // 模拟API调用
-    await new Promise((resolve) => setTimeout(resolve, 500))
-    
-    // 更新记录
-    props.record.remote_port = form.value.remote_port
-    props.record.agent_url = form.value.agent_url
-    props.record.remote_access = !!form.value.remote_port
-    props.record.agent_config = !!form.value.agent_url
-    
-    Message.success('配置成功')
-    emit('success')
-    emit('update:visible', false)
+    const res: any = await updateServer(props.record.id, {
+      remote_port: form.value.remote_port,
+      agent_config: form.value.agent_config,
+      collect_on: form.value.collect_on,
+      collect_interval: form.value.collect_interval,
+    })
+
+    if (res.code === 0) {
+      Message.success('配置成功')
+      emit('success')
+      emit('update:visible', false)
+    } else {
+      Message.error(res.message || '配置失败')
+    }
   } catch (error) {
+    console.error('配置失败:', error)
     Message.error('配置失败')
   } finally {
     loading.value = false
diff --git a/src/views/ops/pages/dc/server/components/ServerFormDialog.vue b/src/views/ops/pages/dc/server/components/ServerFormDialog.vue
index b9807d1..c0d5c06 100644
--- a/src/views/ops/pages/dc/server/components/ServerFormDialog.vue
+++ b/src/views/ops/pages/dc/server/components/ServerFormDialog.vue
@@ -1,7 +1,7 @@
 <template>
   <a-modal
     :visible="visible"
-    :title="isEdit ? '编辑服务器/PC' : '新增服务器/PC'"
+    :title="isEdit ? '编辑服务器' : '新增服务器'"
     @ok="handleOk"
     @cancel="handleCancel"
     @update:visible="handleUpdateVisible"
@@ -11,21 +11,34 @@
     <a-form ref="formRef" :model="formData" :rules="rules" layout="vertical">
       <a-row :gutter="20">
         <a-col :span="12">
-          <a-form-item field="unique_id" label="唯一标识">
+          <a-form-item field="server_identity" label="唯一标识">
             <a-input
-              v-model="formData.unique_id"
-              placeholder="输入为空系统自动生成UUID"
+              v-model="formData.server_identity"
+              placeholder="输入为空系统自动生成ULID"
               :disabled="isEdit"
             />
           </a-form-item>
         </a-col>
         <a-col :span="12">
-          <a-form-item field="name" label="服务器名称">
+          <a-form-item field="name" label="服务器名称" required>
             <a-input v-model="formData.name" placeholder="请输入服务器名称" />
           </a-form-item>
         </a-col>
       </a-row>
 
+      <a-row :gutter="20">
+        <a-col :span="12">
+          <a-form-item field="host" label="主机地址" required>
+            <a-input v-model="formData.host" placeholder="请输入主机地址" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item field="ip_address" label="IP地址">
+            <a-input v-model="formData.ip_address" placeholder="请输入IP地址" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+
       <a-row :gutter="20">
         <a-col :span="8">
           <a-form-item field="server_type" label="服务器类型">
@@ -39,75 +52,84 @@
         <a-col :span="8">
           <a-form-item field="os" label="操作系统">
             <a-select v-model="formData.os" placeholder="请选择操作系统">
-              <a-option value="windows">Windows</a-option>
-              <a-option value="linux">Linux</a-option>
-              <a-option value="other">其它</a-option>
+              <a-option value="Windows">Windows</a-option>
+              <a-option value="Linux">Linux</a-option>
+              <a-option value="Mac">Mac</a-option>
+              <a-option value="Other">其它</a-option>
             </a-select>
           </a-form-item>
         </a-col>
+        <a-col :span="8">
+          <a-form-item field="os_version" label="系统版本">
+            <a-input v-model="formData.os_version" placeholder="如: 22.04" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+
+      <a-row :gutter="20">
         <a-col :span="8">
           <a-form-item field="kernel" label="内核类型">
             <a-select v-model="formData.kernel" placeholder="请选择内核类型">
-              <a-option value="X86">X86</a-option>
-              <a-option value="ARM">ARM</a-option>
-              <a-option value="other">其它</a-option>
+              <a-option value="x86">x86</a-option>
+              <a-option value="arm">ARM</a-option>
             </a-select>
           </a-form-item>
         </a-col>
-      </a-row>
-
-      <a-form-item field="rack_id" label="数据中心/楼层/机柜">
-        <DatacenterSelector
-          ref="datacenterSelectorRef"
-          v-model:datacenter-id="formData.datacenter_id"
-          v-model:floor-id="formData.floor_id"
-          v-model:rack-id="formData.rack_id"
-        />
-      </a-form-item>
-
-      <a-form-item field="tags" label="服务器标签">
-        <a-input v-model="formData.tags" placeholder="多个标签，逗号间隔" />
-      </a-form-item>
-
-      <a-row :gutter="20">
-        <a-col :span="12">
-          <a-form-item field="ip" label="IP地址">
-            <a-input v-model="formData.ip" placeholder="可以输入多个IP，逗号做分隔" />
+        <a-col :span="8">
+          <a-form-item field="location" label="位置/机房">
+            <a-input v-model="formData.location" placeholder="机房A-机架01" />
           </a-form-item>
         </a-col>
-        <a-col :span="12">
-          <a-form-item field="remote_access" label="远程访问端口">
-            <a-input v-model="formData.remote_access" placeholder="为空则不可远程访问" />
+        <a-col :span="8">
+          <a-form-item field="tags" label="标签">
+            <a-input v-model="formData.tags" placeholder="多个标签逗号分隔" />
           </a-form-item>
         </a-col>
       </a-row>
 
-      <a-form-item field="agent_config" label="Agent 配置">
-        <a-input v-model="formData.agent_config" placeholder="请输入Agent 配置" />
-      </a-form-item>
-
       <a-row :gutter="20">
         <a-col :span="12">
-          <a-form-item field="data_collection" label="数据采集">
-            <a-switch v-model="formData.data_collection" />
+          <a-form-item field="remote_access" label="远程访问">
+            <a-input v-model="formData.remote_access" placeholder="ssh://user@host" />
           </a-form-item>
         </a-col>
         <a-col :span="12">
-          <a-form-item v-if="formData.data_collection" field="collection_interval" label="采集时间">
-            <a-select v-model="formData.collection_interval" placeholder="请选择采集时间">
-              <a-option :value="1">1分钟</a-option>
-              <a-option :value="5">5分钟</a-option>
-              <a-option :value="10">10分钟</a-option>
-              <a-option :value="30">30分钟</a-option>
+          <a-form-item field="remote_port" label="远程端口">
+            <a-input-number v-model="formData.remote_port" placeholder="SSH/RDP端口" :min="0" :max="65535" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+
+      <a-form-item field="agent_config" label="Agent 配置 URL">
+        <a-input v-model="formData.agent_config" placeholder="http://192.168.1.100:9100/dc-host/v1/control/command" />
+      </a-form-item>
+
+      <a-row :gutter="20">
+        <a-col :span="8">
+          <a-form-item field="status" label="状态">
+            <a-select v-model="formData.status" placeholder="请选择状态">
+              <a-option value="online">在线</a-option>
+              <a-option value="offline">离线</a-option>
+              <a-option value="unknown">未知</a-option>
             </a-select>
           </a-form-item>
         </a-col>
+        <a-col :span="8">
+          <a-form-item field="collect_on" label="启用采集">
+            <a-switch v-model="formData.collect_on" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="8">
+          <a-form-item v-if="formData.collect_on" field="collect_interval" label="采集间隔(秒)">
+            <a-input-number v-model="formData.collect_interval" :min="10" :max="3600" placeholder="默认60秒" />
+          </a-form-item>
+        </a-col>
       </a-row>
 
-      <a-form-item field="remark" label="备注信息">
+      <a-form-item field="description" label="描述信息">
         <a-textarea
-          v-model="formData.remark"
-          placeholder="请输入备注信息"
+          v-model="formData.description"
+          placeholder="请输入描述信息"
           :rows="4"
         />
       </a-form-item>
@@ -118,50 +140,49 @@
 <script lang="ts" setup>
 import { ref, reactive, computed, watch } from 'vue'
 import { Message } from '@arco-design/web-vue'
-import { v4 as uuidv4 } from 'uuid'
 import type { FormInstance } from '@arco-design/web-vue'
-import DatacenterSelector from './DatacenterSelector.vue'
 import { createServer, updateServer } from '@/api/ops/server'
+import type { ServerFormData, ServerItem } from '@/api/ops/server'
 
 interface Props {
   visible: boolean
-  record?: any
+  record?: ServerItem | null
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  record: () => ({}),
+  record: null,
 })
 
 const emit = defineEmits(['update:visible', 'success'])
 
 const formRef = ref<FormInstance>()
 const confirmLoading = ref(false)
-const datacenterSelectorRef = ref<InstanceType<typeof DatacenterSelector>>()
 
 const isEdit = computed(() => !!props.record?.id)
 
-const formData = reactive({
-  unique_id: '',
+const formData = reactive<ServerFormData>({
+  server_identity: '',
   name: '',
-  server_type: '',
+  host: '',
+  ip_address: '',
+  description: '',
   os: '',
+  os_version: '',
   kernel: '',
-  datacenter_id: undefined as number | undefined,
-  floor_id: undefined as number | undefined,
-  rack_id: undefined as number | undefined,
+  server_type: '',
   tags: '',
-  ip: '',
+  location: '',
   remote_access: '',
+  remote_port: 0,
   agent_config: '',
-  data_collection: false,
-  collection_interval: 5,
-  remark: '',
+  status: 'unknown',
+  collect_on: true,
+  collect_interval: 60,
 })
 
 const rules = {
   name: [{ required: true, message: '请输入服务器名称' }],
-  server_type: [{ required: true, message: '请选择服务器类型' }],
-  os: [{ required: true, message: '请选择操作系统' }],
+  host: [{ required: true, message: '请输入主机地址' }],
 }
 
 watch(
@@ -170,76 +191,78 @@ watch(
     if (val) {
       if (isEdit.value && props.record) {
         Object.assign(formData, {
-          unique_id: props.record.unique_id || '',
+          server_identity: props.record.server_identity || '',
           name: props.record.name || '',
-          server_type: props.record.server_type || '',
+          host: props.record.host || '',
+          ip_address: props.record.ip_address || '',
+          description: props.record.description || '',
           os: props.record.os || '',
-          datacenter_id: props.record.datacenter_id,
-          floor_id: props.record.floor_id,
-          rack_id: props.record.rack_id,
+          os_version: props.record.os_version || '',
+          kernel: props.record.kernel || '',
+          server_type: props.record.server_type || '',
           tags: props.record.tags || '',
-          ip: props.record.ip || '',
+          location: props.record.location || '',
           remote_access: props.record.remote_access || '',
+          remote_port: props.record.remote_port || 0,
           agent_config: props.record.agent_config || '',
-          data_collection: props.record.data_collection || false,
-          collection_interval: props.record.collection_interval || 5,
-          remark: props.record.remark || '',
+          status: props.record.status || 'unknown',
+          collect_on: props.record.collect_on ?? true,
+          collect_interval: props.record.collect_interval || 60,
         })
-        
-        // 编辑模式下初始化加载下级列表
-        if (props.record.datacenter_id) {
-          datacenterSelectorRef.value?.initLoad()
-        }
       } else {
         Object.assign(formData, {
-          unique_id: '',
+          server_identity: '',
           name: '',
-          server_type: '',
+          host: '',
+          ip_address: '',
+          description: '',
           os: '',
-          datacenter_id: undefined,
-          floor_id: undefined,
-          rack_id: undefined,
+          os_version: '',
+          kernel: '',
+          server_type: '',
           tags: '',
-          ip: '',
+          location: '',
           remote_access: '',
+          remote_port: 0,
           agent_config: '',
-          data_collection: false,
-          collection_interval: 5,
-          remark: '',
+          status: 'unknown',
+          collect_on: true,
+          collect_interval: 60,
         })
-        datacenterSelectorRef.value?.reset()
       }
     }
-  }
+  },
 )
 
 const handleOk = async () => {
   try {
     await formRef.value?.validate()
-    
+
     confirmLoading.value = true
-    
-    // 准备提交数据
-    const submitData: any = {
+
+    const submitData: ServerFormData = {
+      server_identity: formData.server_identity || undefined,
       name: formData.name,
-      host: formData.ip,
-      ip_address: formData.ip,
-      description: formData.remark,
+      host: formData.host,
+      ip_address: formData.ip_address,
+      description: formData.description,
       os: formData.os,
-      server_type: formData.server_type,
+      os_version: formData.os_version,
       kernel: formData.kernel,
+      server_type: formData.server_type,
       tags: formData.tags,
+      location: formData.location,
       remote_access: formData.remote_access,
+      remote_port: formData.remote_port,
       agent_config: formData.agent_config,
-      collect_on: formData.data_collection,
-      collect_interval: formData.collection_interval,
+      status: formData.status,
+      collect_on: formData.collect_on,
+      collect_interval: formData.collect_interval,
     }
-    
-    // 编辑模式或唯一标识
+
     if (isEdit.value && props.record?.id) {
-      // 更新服务器
       const res: any = await updateServer(props.record.id, submitData)
-      if (res.code === 200 || res.code === 0) {
+      if (res.code === 0) {
         Message.success('更新成功')
         emit('success')
         handleCancel()
@@ -247,15 +270,8 @@ const handleOk = async () => {
         Message.error(res.message || '更新失败')
       }
     } else {
-      // 创建服务器
-      if (!formData.unique_id) {
-        submitData.server_identity = uuidv4()
-      } else {
-        submitData.server_identity = formData.unique_id
-      }
-      
       const res: any = await createServer(submitData)
-      if (res.code === 200 || res.code === 0) {
+      if (res.code === 0) {
         Message.success('创建成功')
         emit('success')
         handleCancel()
diff --git a/src/views/ops/pages/dc/server/config/columns.ts b/src/views/ops/pages/dc/server/config/columns.ts
index 2790191..45dad36 100644
--- a/src/views/ops/pages/dc/server/config/columns.ts
+++ b/src/views/ops/pages/dc/server/config/columns.ts
@@ -15,6 +15,11 @@ export const columns = [
     title: '名称',
     width: 150,
   },
+  {
+    dataIndex: 'host',
+    title: '主机地址',
+    width: 150,
+  },
   {
     dataIndex: 'ip_address',
     title: 'IP 地址',
@@ -25,10 +30,25 @@ export const columns = [
     title: '操作系统',
     width: 120,
   },
+  {
+    dataIndex: 'os_version',
+    title: '系统版本',
+    width: 100,
+  },
+  {
+    dataIndex: 'kernel',
+    title: '内核',
+    width: 80,
+  },
   {
     dataIndex: 'server_type',
     title: '类型',
-    width: 120,
+    width: 100,
+  },
+  {
+    dataIndex: 'location',
+    title: '位置',
+    width: 150,
   },
   {
     dataIndex: 'tags',
@@ -41,6 +61,11 @@ export const columns = [
     width: 100,
     slotName: 'remote_access',
   },
+  {
+    dataIndex: 'remote_port',
+    title: '远程端口',
+    width: 100,
+  },
   {
     dataIndex: 'agent_config',
     title: 'Agent 配置',
@@ -53,6 +78,11 @@ export const columns = [
     width: 100,
     slotName: 'data_collection',
   },
+  {
+    dataIndex: 'collect_interval',
+    title: '采集间隔',
+    width: 100,
+  },
   {
     dataIndex: 'cpu_state',
     title: 'CPU使用率',
@@ -77,6 +107,12 @@ export const columns = [
     width: 100,
     slotName: 'status',
   },
+  {
+    dataIndex: 'last_check_time',
+    title: '最后检查',
+    width: 180,
+    slotName: 'last_check_time',
+  },
   {
     dataIndex: 'actions',
     title: '操作',
diff --git a/src/views/ops/pages/dc/server/index.vue b/src/views/ops/pages/dc/server/index.vue
index b45c60a..c4707f9 100644
--- a/src/views/ops/pages/dc/server/index.vue
+++ b/src/views/ops/pages/dc/server/index.vue
@@ -106,6 +106,11 @@
         </a-tag>
       </template>
       
+      <!-- 最后检查时间 -->
+      <template #last_check_time="{ record }">
+        {{ formatDateTime(record.last_check_time) }}
+      </template>
+      
       <!-- 操作栏 - 下拉菜单 -->
       <template #actions="{ record }">
         <a-space>
@@ -126,7 +131,7 @@
               <icon-down />
             </a-button>
             <template #content>
-              <a-doption @click="handleRestart(record)">
+              <!-- <a-doption @click="handleRestart(record)">
                 <template #icon>
                   <icon-refresh />
                 </template>
@@ -137,19 +142,19 @@
                   <icon-eye />
                 </template>
                 详情
-              </a-doption>
+              </a-doption> -->
               <a-doption @click="handleEdit(record)">
                 <template #icon>
                   <icon-edit />
                 </template>
                 编辑
               </a-doption>
-              <a-doption @click="handleRemoteControl(record)">
+              <!-- <a-doption @click="handleRemoteControl(record)">
                 <template #icon>
                   <icon-desktop />
                 </template>
                 远程控制
-              </a-doption>
+              </a-doption> -->
               <a-doption @click="handleDelete(record)" style="color: rgb(var(--danger-6))">
                 <template #icon>
                   <icon-delete />
@@ -275,6 +280,28 @@ const getProgressColor = (value: number) => {
   return '#00B42A' // 绿色
 }
 
+// 格式化日期时间
+const formatDateTime = (dateTime: string | null | undefined) => {
+  if (!dateTime || dateTime === '0001-01-01T00:00:00Z') {
+    return '-'
+  }
+  try {
+    const date = new Date(dateTime)
+    if (isNaN(date.getTime())) {
+      return '-'
+    }
+    const year = date.getFullYear()
+    const month = String(date.getMonth() + 1).padStart(2, '0')
+    const day = String(date.getDate()).padStart(2, '0')
+    const hours = String(date.getHours()).padStart(2, '0')
+    const minutes = String(date.getMinutes()).padStart(2, '0')
+    const seconds = String(date.getSeconds()).padStart(2, '0')
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+  } catch {
+    return '-'
+  }
+}
+
 // 获取服务器列表
 const fetchServers = async () => {
   loading.value = true
@@ -296,7 +323,7 @@ const fetchServers = async () => {
     const res: any = await fetchServerList(params)
     
     if (res.code === 0) {
-      const responseData = res.data || res.details || {}
+      const responseData = res.details || {}
       tableData.value = responseData.data || []
       pagination.total = responseData.total || 0
       
@@ -391,7 +418,7 @@ const handleDetail = (record: any) => {
     query: {
       id: record.id,
       name: record.name,
-      ip: record.ip,
+      ip: record.host || record.ip_address,
       status: record.status,
     },
   })
@@ -404,7 +431,7 @@ const handleRemoteControl = (record: any) => {
     query: {
       id: record.id,
       name: record.name,
-      ip: record.ip,
+      ip: record.host || record.ip_address,
       status: record.status,
     },
   }).href
diff --git a/src/views/ops/pages/overview/index.vue b/src/views/ops/pages/overview/index.vue
index 1bf4ba3..24a6bb5 100644
--- a/src/views/ops/pages/overview/index.vue
+++ b/src/views/ops/pages/overview/index.vue
@@ -97,7 +97,7 @@
                       </a-avatar>
                     </div>
                     <div class="alert-info">
-                      <div class="alert-title">{{ getAlertTitle(alert.title) || '告警信息' }}</div>
+                      <div class="alert-title">{{ getAlertTitle(alert.alert_name) || '告警信息' }}</div>
                       <div class="alert-description">{{ getAlertDescription(alert.description) || '-' }}</div>
                       <div class="alert-meta">
                         <a-tag :color="getStatusTagColor(alert.status)" size="small">
@@ -609,7 +609,7 @@ const loadStatistics = async () => {
 
 // 处理查看详情 - 打开新窗口
 const handleViewDetail = (alertId: number) => {
-  window.open(`/alert/detail/${alertId}`, '_blank');
+  window.open(`/#/alert/detail?id=${alertId}`, '_blank');
 };
 
 // 查看更多警告