diff --git a/src/api/kb/category.ts b/src/api/kb/category.ts
new file mode 100644
index 0000000..bb9a59d
--- /dev/null
+++ b/src/api/kb/category.ts
@@ -0,0 +1,93 @@
+import { request } from "@/api/request";
+
+/** 分类类型 */
+export interface Category {
+  id: number;
+  created_at: string;
+  updated_at: string;
+  name: string;
+  description: string;
+  type: string;
+  icon: string;
+  color: string;
+  parent_id: number;
+  level: number;
+  path: string;
+  sort_order: number;
+  status: string;
+  creator_id: number;
+  creator_name: string;
+  doc_count: number;
+  faq_count: number;
+  metadata: string | null;
+  remarks: string;
+}
+
+/** API响应包装类型 */
+export interface ApiResponse<T = any> {
+  code: number;
+  message: string;
+  data: T;
+}
+
+/** 创建分类请求参数 */
+export interface CreateCategoryParams {
+  name: string;
+  description?: string;
+  type?: string;
+  icon?: string;
+  color?: string;
+  parent_id?: number;
+  sort_order?: number;
+  remarks?: string;
+}
+
+/** 更新分类请求参数 */
+export interface UpdateCategoryParams {
+  id: number;
+  name?: string;
+  description?: string;
+  icon?: string;
+  color?: string;
+  sort_order?: number;
+  status?: string;
+  remarks?: string;
+}
+
+/** 获取分类列表参数 */
+export interface FetchCategoryListParams {
+  type?: string;
+  parent_id?: number;
+}
+
+/** 创建分类 */
+export const createCategory = (data: CreateCategoryParams) => {
+  return request.post<ApiResponse<Category>>("/Kb/v1/category/create", data);
+};
+
+/** 更新分类 */
+export const updateCategory = (data: UpdateCategoryParams) => {
+  return request.post<ApiResponse<Category>>("/Kb/v1/category/update", data);
+};
+
+/** 删除分类 */
+export const deleteCategory = (id: number) => {
+  return request.delete<ApiResponse<string>>(`/Kb/v1/category/${id}`);
+};
+
+/** 获取分类详情 */
+export const fetchCategoryDetail = (id: number) => {
+  return request.get<ApiResponse<Category>>(`/Kb/v1/category/${id}`);
+};
+
+/** 获取分类列表 */
+export const fetchCategoryList = (params?: FetchCategoryListParams) => {
+  return request.get<ApiResponse<Category[]>>("/Kb/v1/category/list", { params });
+};
+
+/** 获取分类树 */
+export const fetchCategoryTree = (type?: string) => {
+  return request.get<ApiResponse<Category[]>>("/Kb/v1/category/tree", {
+    params: type ? { type } : undefined,
+  });
+};
\ No newline at end of file
diff --git a/src/api/kb/document.ts b/src/api/kb/document.ts
new file mode 100644
index 0000000..16fcf31
--- /dev/null
+++ b/src/api/kb/document.ts
@@ -0,0 +1,212 @@
+import { request } from "@/api/request";
+
+/** 文档状态 */
+export type DocumentStatus = 'draft' | 'published' | 'reviewed' | 'rejected';
+
+/** 文档类型 */
+export type DocumentType = 'common' | 'guide' | 'solution' | 'troubleshoot' | 'process' | 'technical';
+
+/** 文档接口类型 */
+export interface Document {
+  id: number;
+  created_at: string;
+  updated_at: string;
+  doc_no: string;
+  title: string;
+  description: string;
+  content: string;
+  type: DocumentType;
+  status: DocumentStatus;
+  category_id: number;
+  sub_category: string;
+  author_id: number;
+  author_name: string;
+  reviewer_id: number;
+  reviewer_name: string;
+  reviewed_at: string | null;
+  published_at: string | null;
+  publisher_id: number;
+  view_count: number;
+  like_count: number;
+  comment_count: number;
+  download_count: number;
+  version: string;
+  version_notes: string;
+  tags: string;
+  attachments: string | null;
+  related_docs: string | null;
+  metadata: string | null;
+  keywords: string;
+  remarks: string;
+  is_favorited?: boolean;
+}
+
+/** API响应包装类型 */
+export interface ApiResponse<T = any> {
+  code: number;
+  message: string;
+  data: T;
+}
+
+/** 分页响应类型 */
+export interface PaginatedResponse<T> {
+  total: number;
+  page: number;
+  page_size: number;
+  data: T[];
+}
+
+/** 创建文档请求参数 */
+export interface CreateDocumentParams {
+  title: string;
+  description?: string;
+  content: string;
+  type?: DocumentType;
+  category_id?: number;
+  sub_category?: string;
+  keywords?: string;
+  tags?: string;
+  remarks?: string;
+}
+
+/** 更新文档请求参数 */
+export interface UpdateDocumentParams {
+  id: number;
+  title?: string;
+  description?: string;
+  content?: string;
+  type?: DocumentType;
+  category_id?: number;
+  sub_category?: string;
+  keywords?: string;
+  tags?: string;
+  remarks?: string;
+}
+
+/** 获取文档列表参数 */
+export interface FetchDocumentListParams {
+  page?: number;
+  page_size?: number;
+  keyword?: string;
+  type?: DocumentType;
+  status?: DocumentStatus;
+  category_id?: number;
+}
+
+/** 文档类型选项 */
+export const documentTypeOptions = [
+  { label: '通用文档', value: 'common' },
+  { label: '操作指南', value: 'guide' },
+  { label: '解决方案', value: 'solution' },
+  { label: '故障排查', value: 'troubleshoot' },
+  { label: '流程规范', value: 'process' },
+  { label: '技术文档', value: 'technical' },
+];
+
+/** 文档状态选项 */
+export const documentStatusOptions = [
+  { label: '草稿', value: 'draft' },
+  { label: '已发布', value: 'published' },
+  { label: '已审核', value: 'reviewed' },
+  { label: '未通过审核', value: 'rejected' },
+];
+
+/** 获取文档状态文本 */
+export const getDocumentStatusText = (status: DocumentStatus): string => {
+  const statusMap: Record<DocumentStatus, string> = {
+    draft: '草稿',
+    published: '已发布',
+    reviewed: '已审核',
+    rejected: '未通过审核',
+  };
+  return statusMap[status] || status;
+};
+
+/** 获取文档状态颜色 */
+export const getDocumentStatusColor = (status: DocumentStatus): string => {
+  const colorMap: Record<DocumentStatus, string> = {
+    draft: 'gray',
+    published: 'blue',
+    reviewed: 'green',
+    rejected: 'red',
+  };
+  return colorMap[status] || 'gray';
+};
+
+/** 获取文档类型文本 */
+export const getDocumentTypeText = (type: DocumentType): string => {
+  const typeMap: Record<DocumentType, string> = {
+    common: '通用文档',
+    guide: '操作指南',
+    solution: '解决方案',
+    troubleshoot: '故障排查',
+    process: '流程规范',
+    technical: '技术文档',
+  };
+  return typeMap[type] || type;
+};
+
+/** 创建文档 */
+export const createDocument = (data: CreateDocumentParams) => {
+  return request.post<ApiResponse<Document>>("/Kb/v1/document/create", data);
+};
+
+/** 更新文档 */
+export const updateDocument = (data: UpdateDocumentParams) => {
+  return request.post<ApiResponse<Document>>("/Kb/v1/document/update", data);
+};
+
+/** 删除文档（移入回收站） */
+export const deleteDocument = (id: number) => {
+  return request.delete<ApiResponse<string>>(`/Kb/v1/document/${id}`);
+};
+
+/** 获取文档详情 */
+export const fetchDocumentDetail = (id: number) => {
+  return request.get<ApiResponse<Document>>(`/Kb/v1/document/${id}`);
+};
+
+/** 获取文档列表 */
+export const fetchDocumentList = (params?: FetchDocumentListParams) => {
+  return request.get<ApiResponse<PaginatedResponse<Document>>>("/Kb/v1/document/list", { params });
+};
+
+/** 发布文档 */
+export const publishDocument = (id: number) => {
+  return request.post<ApiResponse<string>>("/Kb/v1/document/publish", { id });
+};
+
+/** 移入回收站 */
+export const moveToTrash = (id: number) => {
+  return request.post<ApiResponse<string>>("/Kb/v1/trash/move", { id, type: 'document' });
+};
+
+/** 获取我的文档列表（由我创建的所有文档） */
+export const fetchMyDocumentList = (params?: FetchDocumentListParams) => {
+  return request.get<ApiResponse<PaginatedResponse<Document>>>("/Kb/v1/review/publish/list", { params });
+};
+
+/** 获取已审核通过的文档列表 */
+export const fetchApprovedDocumentList = (params?: FetchDocumentListParams) => {
+  return request.get<ApiResponse<PaginatedResponse<Document>>>("/Kb/v1/review/approved/list", { params });
+};
+
+/** 收藏文档 */
+export const favoriteDocument = (id: number) => {
+  return request.post<ApiResponse<string>>("/Kb/v1/favorite/create", { resource_type: 'document', resource_id: id });
+};
+
+/** 取消收藏文档 */
+export const unfavoriteDocument = (id: number) => {
+  return request.delete<ApiResponse<string>>("/Kb/v1/favorite/delete", { data: { resource_type: 'document', resource_id: id } });
+};
+
+/** 检查文档是否已收藏 */
+export const checkFavorite = (id: number) => {
+  return request.get<ApiResponse<{ is_favorited: boolean }>>(`/Kb/v1/favorite/check`, { params: { resource_type: 'document', resource_id: id } });
+};
+
+/** 下载文档 */
+export const downloadDocument = (id: number) => {
+  return request.get<Blob>(`/Kb/v1/document/${id}/download`, { responseType: 'blob' });
+};
\ No newline at end of file
diff --git a/src/api/kb/trash.ts b/src/api/kb/trash.ts
new file mode 100644
index 0000000..268a308
--- /dev/null
+++ b/src/api/kb/trash.ts
@@ -0,0 +1,88 @@
+import { request } from "@/api/request";
+
+/** API响应包装类型 */
+export interface ApiResponse<T = any> {
+  code: number;
+  message: string;
+  data: T;
+}
+
+/** 分页响应类型 */
+export interface PaginatedResponse<T> {
+  total: number;
+  page: number;
+  page_size: number;
+  data: T[];
+}
+
+/** 回收站记录 */
+export interface TrashRecord {
+  id: number;
+  created_at: string;
+  updated_at: string;
+  resource_type: 'document' | 'faq';
+  resource_id: number;
+  resource_name: string;
+  deleted_by: number;
+  deleted_name: string;
+  deleted_time: string;
+  delete_reason: string;
+  original_data: string;
+  remarks: string;
+}
+
+/** 获取回收站列表参数 */
+export interface FetchTrashListParams {
+  page?: number;
+  page_size?: number;
+  resource_type?: 'document' | 'faq';
+}
+
+/** 恢复资源请求参数 */
+export interface RestoreTrashParams {
+  id: number;
+}
+
+/** 彻底删除请求参数 */
+export interface DeleteTrashParams {
+  id: number;
+}
+
+/** 资源类型选项 */
+export const resourceTypeOptions = [
+  { label: '文档', value: 'document' },
+  { label: '常见问题', value: 'faq' },
+];
+
+/** 获取资源类型文本 */
+export const getResourceTypeText = (type: string): string => {
+  const typeMap: Record<string, string> = {
+    document: '文档',
+    faq: '常见问题',
+  };
+  return typeMap[type] || type;
+};
+
+/** 获取资源类型颜色 */
+export const getResourceTypeColor = (type: string): string => {
+  const colorMap: Record<string, string> = {
+    document: 'blue',
+    faq: 'green',
+  };
+  return colorMap[type] || 'gray';
+};
+
+/** 获取回收站列表 */
+export const fetchTrashList = (params?: FetchTrashListParams) => {
+  return request.get<ApiResponse<PaginatedResponse<TrashRecord>>>("/Kb/v1/trash/list", { params });
+};
+
+/** 恢复资源 */
+export const restoreTrash = (data: RestoreTrashParams) => {
+  return request.post<ApiResponse<string>>("/Kb/v1/trash/restore", data);
+};
+
+/** 彻底删除 */
+export const deleteTrash = (data: DeleteTrashParams) => {
+  return request.post<ApiResponse<string>>("/Kb/v1/trash/delete", data);
+};
diff --git a/src/api/ops/asset.ts b/src/api/ops/asset.ts
new file mode 100644
index 0000000..1f37b68
--- /dev/null
+++ b/src/api/ops/asset.ts
@@ -0,0 +1,139 @@
+import { request } from "@/api/request";
+
+/** 资产状态枚举 */
+export enum AssetStatus {
+  IN_USE = 'in_use',      // 在用
+  IDLE = 'idle',          // 闲置
+  MAINTAIN = 'maintain',  // 维修中
+  SCRAP = 'scrap',        // 待报废
+  DISPOSED = 'disposed',  // 已报废
+}
+
+/** 资产状态选项 */
+export const assetStatusOptions = [
+  { label: '在用', value: AssetStatus.IN_USE },
+  { label: '闲置', value: AssetStatus.IDLE },
+  { label: '维修中', value: AssetStatus.MAINTAIN },
+  { label: '待报废', value: AssetStatus.SCRAP },
+  { label: '已报废', value: AssetStatus.DISPOSED },
+];
+
+/** 获取资产状态文本 */
+export const getAssetStatusText = (status: string) => {
+  const item = assetStatusOptions.find(opt => opt.value === status);
+  return item?.label || status;
+};
+
+/** 获取资产状态颜色 */
+export const getAssetStatusColor = (status: string) => {
+  const colorMap: Record<string, string> = {
+    [AssetStatus.IN_USE]: 'green',
+    [AssetStatus.IDLE]: 'blue',
+    [AssetStatus.MAINTAIN]: 'orange',
+    [AssetStatus.SCRAP]: 'red',
+    [AssetStatus.DISPOSED]: 'gray',
+  };
+  return colorMap[status] || 'gray';
+};
+
+/** 资产列表查询参数 */
+export interface AssetListParams {
+  page?: number;
+  page_size?: number;
+  keyword?: string;
+  status?: string;
+  category_id?: number;
+  supplier_id?: number;
+  datacenter_id?: number;
+  department?: string;
+  sort?: string;
+  order?: string;
+}
+
+/** 资产表单数据 */
+export interface AssetForm {
+  id?: number;
+  asset_name: string;
+  asset_code: string;
+  category_id?: number;
+  model?: string;
+  manufacturer?: string;
+  serial_number?: string;
+  purchase_date?: string;
+  original_value?: number;
+  supplier_id?: number;
+  warranty_period?: string;
+  warranty_expiry?: string;
+  department?: string;
+  user?: string;
+  status?: string;
+  location?: string;
+  datacenter_id?: number;
+  floor_id?: number;
+  rack_id?: number;
+  unit_start?: number;
+  unit_end?: number;
+  qr_code?: string;
+  rfid_tag?: string;
+  asset_tag?: string;
+  specifications?: string;
+  description?: string;
+  remarks?: string;
+}
+
+/** 获取资产列表（分页） */
+export const fetchAssetList = (data?: AssetListParams) => {
+  return request.post("/Assets/v1/asset/list", data || {});
+};
+
+/** 获取资产详情 */
+export const fetchAssetDetail = (id: number) => {
+  return request.get(`/Assets/v1/asset/detail/${id}`);
+};
+
+/** 创建资产 */
+export const createAsset = (data: AssetForm) => {
+  return request.post("/Assets/v1/asset/create", data);
+};
+
+/** 更新资产 */
+export const updateAsset = (data: AssetForm) => {
+  return request.put("/Assets/v1/asset/update", data);
+};
+
+/** 删除资产 */
+export const deleteAsset = (id: number) => {
+  return request.delete(`/Assets/v1/asset/delete/${id}`);
+};
+
+/** 导出资产 */
+export const exportAssets = (keyword?: string) => {
+  const params: any = {};
+  if (keyword) params.keyword = keyword;
+  return request.get("/Assets/v1/asset/export", { params });
+};
+
+/** 获取资产分类列表（下拉） */
+export const fetchCategoryOptions = () => {
+  return request.get("/Assets/v1/category/all");
+};
+
+/** 获取供应商列表（下拉） */
+export const fetchSupplierOptions = () => {
+  return request.get("/Assets/v1/supplier/all");
+};
+
+/** 获取数据中心列表（下拉） */
+export const fetchDatacenterOptions = () => {
+  return request.get("/Assets/v1/datacenter/list");
+};
+
+/** 根据数据中心获取楼层列表 */
+export const fetchFloorOptions = (datacenterId: number) => {
+  return request.get(`/Assets/v1/datacenter/${datacenterId}`);
+};
+
+/** 获取机柜列表（下拉） */
+export const fetchRackOptions = (params?: { datacenter_id?: number; floor_id?: number }) => {
+  return request.post("/Assets/v1/rack/list", params || {});
+};
\ No newline at end of file
diff --git a/src/api/ops/assetCategory.ts b/src/api/ops/assetCategory.ts
new file mode 100644
index 0000000..a051cf0
--- /dev/null
+++ b/src/api/ops/assetCategory.ts
@@ -0,0 +1,46 @@
+import { request } from "@/api/request";
+
+/** 获取资产分类列表（分页） */
+export const fetchCategoryList = (data?: {
+  page?: number;
+  page_size?: number;
+  keyword?: string;
+  parent_id?: number;
+}) => {
+  return request.post("/Assets/v1/category/list", data || {});
+};
+
+/** 获取资产分类详情 */
+export const fetchCategoryDetail = (id: number) => {
+  return request.get(`/Assets/v1/category/detail/${id}`);
+};
+
+/** 创建资产分类 */
+export const createCategory = (data: any) => {
+  return request.post("/Assets/v1/category/create", data);
+};
+
+/** 更新资产分类 */
+export const updateCategory = (data: any) => {
+  return request.put("/Assets/v1/category/update", data);
+};
+
+/** 删除资产分类 */
+export const deleteCategory = (id: number) => {
+  return request.delete(`/Assets/v1/category/delete/${id}`);
+};
+
+/** 获取所有资产分类（用于下拉选择） */
+export const fetchAllCategories = () => {
+  return request.get("/Assets/v1/category/all");
+};
+
+/** 获取资产分类树形结构 */
+export const fetchCategoryTree = () => {
+  return request.get("/Assets/v1/category/tree");
+};
+
+/** 获取指定分类的子分类列表 */
+export const fetchCategoryChildren = (id: number) => {
+  return request.get(`/Assets/v1/category/children/${id}`);
+};
diff --git a/src/api/ops/supplier.ts b/src/api/ops/supplier.ts
new file mode 100644
index 0000000..9f05e8a
--- /dev/null
+++ b/src/api/ops/supplier.ts
@@ -0,0 +1,40 @@
+import { request } from "@/api/request";
+
+/** 获取供应商列表（分页） */
+export const fetchSupplierList = (data?: {
+  page?: number;
+  page_size?: number;
+  keyword?: string;
+  status?: string;
+  enabled?: boolean;
+}) => {
+  return request.post("/Assets/v1/supplier/list", data || {});
+};
+
+/** 获取供应商详情 */
+export const fetchSupplierDetail = (id: number) => {
+  return request.get(`/Assets/v1/supplier/detail/${id}`);
+};
+
+/** 创建供应商 */
+export const createSupplier = (data: any) => {
+  return request.post("/Assets/v1/supplier/create", data);
+};
+
+/** 更新供应商 */
+export const updateSupplier = (data: any) => {
+  return request.put("/Assets/v1/supplier/update", data);
+};
+
+/** 删除供应商 */
+export const deleteSupplier = (id: number) => {
+  return request.delete(`/Assets/v1/supplier/delete/${id}`);
+};
+
+/** 获取所有供应商（用于下拉选择） */
+export const fetchAllSuppliers = (keyword?: string, status?: string) => {
+  const params: any = {};
+  if (keyword) params.keyword = keyword;
+  if (status) params.status = status;
+  return request.get("/Assets/v1/supplier/all", { params });
+};
\ No newline at end of file
diff --git a/src/router/routes/modules/ops.ts b/src/router/routes/modules/ops.ts
index 0cc058c..e5090b7 100644
--- a/src/router/routes/modules/ops.ts
+++ b/src/router/routes/modules/ops.ts
@@ -83,6 +83,46 @@ const OPS: AppRouteRecordRaw = {
         roles: ['*'],
       },
     },
+    {
+      path: 'assets/device',
+      name: 'AssetsDevice',
+      component: () => import('@/views/ops/pages/assets/device/index.vue'),
+      meta: {
+        locale: '设备管理',
+        requiresAuth: true,
+        roles: ['*'],
+      },
+    },
+    {
+      path: 'assets/supplier',
+      name: 'AssetsSupplier',
+      component: () => import('@/views/ops/pages/assets/supplier/index.vue'),
+      meta: {
+        locale: '供应商管理',
+        requiresAuth: true,
+        roles: ['*'],
+      },
+    },
+    {
+      path: 'assets/classify',
+      name: 'AssetsClassify',
+      component: () => import('@/views/ops/pages/assets/classify/index.vue'),
+      meta: {
+        locale: '资产分类',
+        requiresAuth: true,
+        roles: ['*'],
+      },
+    },
+    {
+      path: 'kb/items',
+      name: 'KbItems',
+      component: () => import('@/views/ops/pages/kb/items/index.vue'),
+      meta: {
+        locale: '知识库文档',
+        requiresAuth: true,
+        roles: ['*'],
+      },
+    },
   ],
 }
 
diff --git a/src/views/ops/pages/assets/classify/components/CategoryDetailDialog.vue b/src/views/ops/pages/assets/classify/components/CategoryDetailDialog.vue
new file mode 100644
index 0000000..b9c4ba7
--- /dev/null
+++ b/src/views/ops/pages/assets/classify/components/CategoryDetailDialog.vue
@@ -0,0 +1,165 @@
+<template>
+  <a-modal
+    :visible="visible"
+    title="分类详情"
+    width="600px"
+    @cancel="handleCancel"
+    @update:visible="handleVisibleChange"
+    :footer="false"
+  >
+    <a-descriptions :data="detailData" layout="vertical" bordered :column="2" v-if="category">
+      <a-descriptions-item label="分类名称" :span="1">
+        {{ category.name }}
+      </a-descriptions-item>
+      <a-descriptions-item label="分类编码" :span="1">
+        {{ category.code }}
+      </a-descriptions-item>
+      <a-descriptions-item label="父级分类" :span="1">
+        {{ category.parent?.name || '无（一级分类）' }}
+      </a-descriptions-item>
+      <a-descriptions-item label="层级" :span="1">
+        {{ category.level }}
+      </a-descriptions-item>
+      <a-descriptions-item label="排序" :span="1">
+        {{ category.sort }}
+      </a-descriptions-item>
+      <a-descriptions-item label="是否启用" :span="1">
+        <a-tag :color="category.enabled ? 'green' : 'red'">
+          {{ category.enabled ? '是' : '否' }}
+        </a-tag>
+      </a-descriptions-item>
+      <a-descriptions-item label="颜色标识" :span="2">
+        <div class="color-display">
+          <div
+            class="color-block"
+            :style="{ backgroundColor: category.color || '#ccc' }"
+          ></div>
+          <span>{{ category.color || '-' }}</span>
+        </div>
+      </a-descriptions-item>
+      <a-descriptions-item label="图标路径" :span="2">
+        {{ category.icon || '-' }}
+      </a-descriptions-item>
+      <a-descriptions-item label="描述" :span="2">
+        {{ category.description || '-' }}
+      </a-descriptions-item>
+      <a-descriptions-item label="备注" :span="2">
+        {{ category.remarks || '-' }}
+      </a-descriptions-item>
+      <a-descriptions-item label="创建时间" :span="1">
+        {{ formatDate(category.created_at) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="更新时间" :span="1">
+        {{ formatDate(category.updated_at) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="创建人" :span="1">
+        {{ category.created_by || '-' }}
+      </a-descriptions-item>
+      <a-descriptions-item label="更新人" :span="1">
+        {{ category.updated_by || '-' }}
+      </a-descriptions-item>
+    </a-descriptions>
+    <a-empty v-else description="暂无数据" />
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+interface Category {
+  id?: number
+  name?: string
+  code?: string
+  description?: string
+  icon?: string
+  color?: string
+  parent_id?: number
+  parent?: any
+  level?: number
+  sort?: number
+  enabled?: boolean
+  remarks?: string
+  created_at?: string
+  updated_at?: string
+  created_by?: string
+  updated_by?: string
+}
+
+interface Props {
+  visible: boolean
+  category: Category | null
+}
+
+interface Emits {
+  (e: 'update:visible', value: boolean): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+// 详情数据
+const detailData = computed(() => {
+  if (!props.category) return []
+  return [
+    { label: '分类名称', value: props.category.name },
+    { label: '分类编码', value: props.category.code },
+    { label: '父级分类', value: props.category.parent?.name || '无（一级分类）' },
+    { label: '层级', value: props.category.level },
+    { label: '排序', value: props.category.sort },
+    { label: '是否启用', value: props.category.enabled ? '是' : '否' },
+    { label: '颜色标识', value: props.category.color || '-' },
+    { label: '图标路径', value: props.category.icon || '-' },
+    { label: '描述', value: props.category.description || '-' },
+    { label: '备注', value: props.category.remarks || '-' },
+    { label: '创建时间', value: formatDate(props.category.created_at) },
+    { label: '更新时间', value: formatDate(props.category.updated_at) },
+    { label: '创建人', value: props.category.created_by || '-' },
+    { label: '更新人', value: props.category.updated_by || '-' },
+  ]
+})
+
+// 格式化日期
+const formatDate = (dateStr?: string) => {
+  if (!dateStr) return '-'
+  const date = new Date(dateStr)
+  return date.toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  })
+}
+
+// 取消
+const handleCancel = () => {
+  emit('update:visible', false)
+}
+
+// 处理对话框可见性变化
+const handleVisibleChange = (visible: boolean) => {
+  emit('update:visible', visible)
+}
+</script>
+
+<script lang="ts">
+export default {
+  name: 'CategoryDetailDialog',
+}
+</script>
+
+<style scoped lang="less">
+.color-display {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  .color-block {
+    width: 24px;
+    height: 24px;
+    border-radius: 4px;
+    border: 1px solid #d9d9d9;
+  }
+}
+</style>
diff --git a/src/views/ops/pages/assets/classify/components/CategoryFormDialog.vue b/src/views/ops/pages/assets/classify/components/CategoryFormDialog.vue
new file mode 100644
index 0000000..b716e74
--- /dev/null
+++ b/src/views/ops/pages/assets/classify/components/CategoryFormDialog.vue
@@ -0,0 +1,385 @@
+<template>
+  <a-modal
+    :visible="visible"
+    :title="isEdit ? '编辑分类' : '新增分类'"
+    width="600px"
+    @ok="handleOk"
+    @cancel="handleCancel"
+    @update:visible="handleVisibleChange"
+    :confirm-loading="submitting"
+  >
+    <a-form :model="form" layout="vertical" ref="formRef">
+      <a-row :gutter="16">
+        <a-col :span="12">
+          <a-form-item
+            label="分类名称"
+            field="name"
+            :rules="[{ required: true, message: '请输入分类名称' }]"
+          >
+            <a-input
+              v-model="form.name"
+              placeholder="请输入分类名称"
+              :max-length="200"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item
+            label="分类编码"
+            field="code"
+            :rules="[{ required: true, message: '请输入分类编码' }]"
+          >
+            <a-input
+              v-model="form.code"
+              placeholder="请输入分类编码"
+              :max-length="100"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+
+      <a-form-item
+        v-if="showParentSelector !== false"
+        label="父级分类"
+        field="parent_id"
+      >
+        <a-select
+          v-model="form.parent_id"
+          placeholder="请选择父级分类（不选则为一级分类）"
+          allow-clear
+          allow-search
+          :disabled="fixedParentId !== undefined"
+          :filter-option="filterParentOption"
+        >
+          <a-option
+            v-for="item in parentCategories"
+            :key="item.id"
+            :value="item.id"
+          >
+            {{ item.name }}
+          </a-option>
+        </a-select>
+      </a-form-item>
+
+      <a-row :gutter="16">
+        <a-col :span="12">
+          <a-form-item label="排序" field="sort">
+            <a-input-number
+              v-model="form.sort"
+              placeholder="请输入排序"
+              :min="0"
+              style="width: 100%"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="是否启用" field="enabled">
+            <a-switch v-model="form.enabled" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+
+      <a-form-item label="颜色标识" field="color">
+        <div class="color-picker-wrapper">
+          <a-input
+            v-model="form.color"
+            placeholder="请选择颜色标识"
+            readonly
+            @click="showColorPicker = !showColorPicker"
+          >
+            <template #prefix>
+              <div
+                class="color-preview"
+                :style="{ backgroundColor: form.color || '#ccc' }"
+              ></div>
+            </template>
+          </a-input>
+          <div v-if="showColorPicker" class="color-picker-dropdown">
+            <div class="color-picker-header">选择颜色</div>
+            <div class="color-picker-grid">
+              <div
+                v-for="color in presetColors"
+                :key="color"
+                class="color-item"
+                :style="{ backgroundColor: color }"
+                @click="selectColor(color)"
+              ></div>
+            </div>
+            <div class="color-picker-custom">
+              <span>自定义颜色:</span>
+              <input
+                type="color"
+                v-model="form.color"
+                @change="showColorPicker = false"
+              />
+            </div>
+          </div>
+        </div>
+      </a-form-item>
+
+      <a-form-item label="描述" field="description">
+        <a-textarea
+          v-model="form.description"
+          placeholder="请输入描述"
+          :auto-size="{ minRows: 3, maxRows: 6 }"
+          :max-length="500"
+        />
+      </a-form-item>
+
+      <a-form-item label="备注" field="remarks">
+        <a-textarea
+          v-model="form.remarks"
+          placeholder="请输入备注"
+          :auto-size="{ minRows: 3, maxRows: 6 }"
+          :max-length="500"
+        />
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, computed } from 'vue'
+import { Message } from '@arco-design/web-vue'
+import { createCategory, updateCategory } from '@/api/ops/assetCategory'
+
+interface Category {
+  id?: number
+  name?: string
+  code?: string
+  description?: string
+  icon?: string
+  color?: string
+  parent_id?: number
+  sort?: number
+  enabled?: boolean
+  remarks?: string
+}
+
+interface Props {
+  visible: boolean
+  category: Category | null
+  parentCategories: any[]
+  fixedParentId?: number
+  showParentSelector?: boolean
+}
+
+interface Emits {
+  (e: 'update:visible', value: boolean): void
+  (e: 'success'): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const formRef = ref()
+const submitting = ref(false)
+const showColorPicker = ref(false)
+
+// 预设颜色
+const presetColors = [
+  '#FF0000', '#FF4500', '#FF8C00', '#FFD700', '#FFFF00',
+  '#9ACD32', '#32CD32', '#00FF00', '#00FA9A', '#00CED1',
+  '#1E90FF', '#0000FF', '#8A2BE2', '#9400D3', '#FF00FF',
+  '#FF1493', '#DC143C', '#B22222', '#8B0000', '#800000',
+]
+
+// 表单数据
+const form = ref({
+  name: '',
+  code: '',
+  description: '',
+  icon: '',
+  color: '',
+  parent_id: undefined as number | undefined,
+  sort: 0,
+  enabled: true,
+  remarks: '',
+})
+
+// 是否为编辑模式
+const isEdit = computed(() => !!props.category?.id)
+
+// 父级分类下拉搜索过滤
+const filterParentOption = (input: string, option: any) => {
+  return option.label.toLowerCase().includes(input.toLowerCase())
+}
+
+// 选择颜色
+const selectColor = (color: string) => {
+  form.value.color = color
+  showColorPicker.value = false
+}
+
+// 监听对话框显示状态
+watch(
+  () => props.visible,
+  (newVal) => {
+    if (newVal) {
+      if (props.category && isEdit.value) {
+        // 编辑模式：填充表单
+        form.value = {
+          name: props.category.name || '',
+          code: props.category.code || '',
+          description: props.category.description || '',
+          icon: props.category.icon || '',
+          color: props.category.color || '',
+          parent_id: props.category.parent_id,
+          sort: props.category.sort || 0,
+          enabled: props.category.enabled !== undefined ? props.category.enabled : true,
+          remarks: props.category.remarks || '',
+        }
+      } else {
+        // 新建模式：重置表单
+        form.value = {
+          name: '',
+          code: '',
+          description: '',
+          icon: '',
+          color: '',
+          parent_id: props.fixedParentId,
+          sort: 0,
+          enabled: true,
+          remarks: '',
+        }
+      }
+      showColorPicker.value = false
+    }
+  }
+)
+
+// 确认提交
+const handleOk = async () => {
+  const valid = await formRef.value?.validate()
+  if (valid) return
+
+  submitting.value = true
+  try {
+    const data: any = {
+      name: form.value.name,
+      code: form.value.code,
+      description: form.value.description,
+      icon: form.value.icon,
+      color: form.value.color,
+      parent_id: form.value.parent_id,
+      sort: form.value.sort,
+      enabled: form.value.enabled,
+      remarks: form.value.remarks,
+    }
+
+    let res
+    if (isEdit.value && props.category?.id) {
+      // 编辑分类
+      data.id = props.category.id
+      res = await updateCategory(data)
+    } else {
+      // 新建分类
+      res = await createCategory(data)
+    }
+
+    if (res.code === 0) {
+      Message.success(isEdit.value ? '编辑成功' : '创建成功')
+      emit('success')
+      emit('update:visible', false)
+    } else {
+      Message.error(res.message || (isEdit.value ? '编辑失败' : '创建失败'))
+    }
+  } catch (error) {
+    Message.error(isEdit.value ? '编辑失败' : '创建失败')
+    console.error(error)
+  } finally {
+    submitting.value = false
+  }
+}
+
+// 取消
+const handleCancel = () => {
+  emit('update:visible', false)
+}
+
+// 处理对话框可见性变化
+const handleVisibleChange = (visible: boolean) => {
+  emit('update:visible', visible)
+}
+</script>
+
+<script lang="ts">
+export default {
+  name: 'CategoryFormDialog',
+}
+</script>
+
+<style scoped lang="less">
+.color-picker-wrapper {
+  position: relative;
+
+  .color-preview {
+    width: 16px;
+    height: 16px;
+    border-radius: 2px;
+    border: 1px solid #d9d9d9;
+  }
+
+  .color-picker-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 1000;
+    background: #fff;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    padding: 12px;
+    margin-top: 4px;
+    width: 280px;
+
+    .color-picker-header {
+      font-size: 14px;
+      font-weight: 500;
+      margin-bottom: 8px;
+      color: #262626;
+    }
+
+    .color-picker-grid {
+      display: grid;
+      grid-template-columns: repeat(10, 1fr);
+      gap: 4px;
+      margin-bottom: 12px;
+
+      .color-item {
+        width: 20px;
+        height: 20px;
+        border-radius: 2px;
+        cursor: pointer;
+        border: 1px solid #d9d9d9;
+
+        &:hover {
+          transform: scale(1.1);
+          border-color: #1890ff;
+        }
+      }
+    }
+
+    .color-picker-custom {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding-top: 8px;
+      border-top: 1px solid #f0f0f0;
+
+      span {
+        font-size: 12px;
+        color: #595959;
+      }
+
+      input[type="color"] {
+        width: 60px;
+        height: 28px;
+        border: 1px solid #d9d9d9;
+        border-radius: 4px;
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/ops/pages/assets/classify/index.vue b/src/views/ops/pages/assets/classify/index.vue
new file mode 100644
index 0000000..b99c778
--- /dev/null
+++ b/src/views/ops/pages/assets/classify/index.vue
@@ -0,0 +1,387 @@
+<template>
+  <div class="container">
+    <search-table
+      :form-model="formModel"
+      :form-items="formItems"
+      :data="tableData"
+      :columns="columns"
+      :loading="loading"
+      :pagination="pagination"
+      title="资产分类管理"
+      search-button-text="查询"
+      reset-button-text="重置"
+      @update:form-model="handleFormModelUpdate"
+      @search="handleSearch"
+      @reset="handleReset"
+      @page-change="handlePageChange"
+      @refresh="handleRefresh"
+    >
+      <template #toolbar-left>
+        <a-button type="primary" @click="handleCreate">
+          新增分类
+        </a-button>
+      </template>
+
+      <!-- 序号 -->
+      <template #index="{ rowIndex }">
+        {{ rowIndex + 1 + (pagination.current - 1) * pagination.pageSize }}
+      </template>
+
+      <!-- 父级分类 -->
+      <template #parent="{ record }">
+        {{ record.parent?.name || '-' }}
+      </template>
+
+      <!-- 颜色标识 -->
+      <template #color="{ record }">
+        <div class="color-cell">
+          <div
+            class="color-block"
+            :style="{ backgroundColor: record.color || '#ccc' }"
+          ></div>
+          <span>{{ record.color || '-' }}</span>
+        </div>
+      </template>
+
+      <!-- 是否启用 -->
+      <template #enabled="{ record }">
+        <a-tag :color="record.enabled ? 'green' : 'red'">
+          {{ record.enabled ? '是' : '否' }}
+        </a-tag>
+      </template>
+
+      <!-- 操作 -->
+      <template #actions="{ record }">
+        <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-button type="text" size="small" status="success" @click="handleAddChild(record)">
+          新增
+        </a-button>
+      </template>
+    </search-table>
+
+    <!-- 分类表单对话框（新增/编辑） -->
+    <category-form-dialog
+      v-model:visible="formVisible"
+      :category="editingCategory"
+      :parent-categories="parentCategories"
+      :fixed-parent-id="fixedParentId"
+      :show-parent-selector="showParentSelector"
+      @success="handleFormSuccess"
+    />
+
+    <!-- 分类详情对话框 -->
+    <category-detail-dialog
+      v-model:visible="detailVisible"
+      :category="currentCategory"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, computed, onMounted } from 'vue'
+import { Message, Modal } from '@arco-design/web-vue'
+import { IconPlus } from '@arco-design/web-vue/es/icon'
+import type { FormItem } from '@/components/search-form/types'
+import SearchTable from '@/components/search-table/index.vue'
+import {
+  fetchCategoryList,
+  deleteCategory,
+  fetchAllCategories,
+  fetchCategoryDetail,
+} from '@/api/ops/assetCategory'
+import CategoryFormDialog from './components/CategoryFormDialog.vue'
+import CategoryDetailDialog from './components/CategoryDetailDialog.vue'
+
+// 状态管理
+const loading = ref(false)
+const tableData = ref<any[]>([])
+const formModel = ref({
+  keyword: '',
+  parent_id: '',
+})
+
+const pagination = reactive({
+  current: 1,
+  pageSize: 20,
+  total: 0,
+})
+
+// 父级分类列表（用于下拉选择）
+const parentCategories = ref<any[]>([])
+
+// 表单项配置
+const formItems = computed<FormItem[]>(() => [
+  {
+    field: 'keyword',
+    label: '关键词',
+    type: 'input',
+    placeholder: '请输入分类名称或编码',
+  },
+  {
+    field: 'parent_id',
+    label: '父级分类',
+    type: 'select',
+    placeholder: '请选择父级分类',
+    options: parentCategories.value.map((item) => ({
+      label: item.name,
+      value: item.id,
+    })),
+    allowClear: true,
+    allowSearch: true,
+  },
+])
+
+// 表格列配置
+const columns = computed(() => [
+  {
+    title: '序号',
+    dataIndex: 'index',
+    slotName: 'index',
+    width: 80,
+    align: 'center' as const,
+  },
+  {
+    title: '分类名称',
+    dataIndex: 'name',
+    ellipsis: true,
+    tooltip: true,
+  },
+  {
+    title: '分类编码',
+    dataIndex: 'code',
+    ellipsis: true,
+    tooltip: true,
+  },
+  {
+    title: '父级分类',
+    dataIndex: 'parent',
+    slotName: 'parent',
+    ellipsis: true,
+    tooltip: true,
+  },
+  {
+    title: '层级',
+    dataIndex: 'level',
+    width: 80,
+    align: 'center' as const,
+  },
+  {
+    title: '排序',
+    dataIndex: 'sort',
+    width: 80,
+    align: 'center' as const,
+  },
+  {
+    title: '颜色标识',
+    dataIndex: 'color',
+    slotName: 'color',
+    width: 120,
+    align: 'center' as const,
+  },
+  {
+    title: '是否启用',
+    dataIndex: 'enabled',
+    slotName: 'enabled',
+    width: 100,
+    align: 'center' as const,
+  },
+  {
+    title: '操作',
+    slotName: 'actions',
+    width: 300,
+    fixed: 'right' as const,
+  },
+])
+
+// 当前选中的分类
+const currentCategory = ref<any>(null)
+const editingCategory = ref<any>(null)
+
+// 对话框可见性
+const formVisible = ref(false)
+const detailVisible = ref(false)
+
+// 固定的父级分类ID（用于新增子分类时）
+const fixedParentId = ref<number | undefined>(undefined)
+
+// 是否显示父级分类选择器
+const showParentSelector = ref(true)
+
+// 获取父级分类列表（用于下拉选择）
+const fetchParentCategories = async () => {
+  try {
+    const res = await fetchAllCategories()
+    parentCategories.value = res.details || []
+  } catch (error) {
+    console.error('获取父级分类列表失败:', error)
+  }
+}
+
+// 获取分类列表
+const fetchCategories = async () => {
+  loading.value = true
+
+  try {
+    const params: any = {
+      page: pagination.current,
+      page_size: pagination.pageSize,
+      keyword: formModel.value.keyword || undefined,
+      parent_id: formModel.value.parent_id || undefined,
+    }
+
+    const res = await fetchCategoryList(params)
+
+    tableData.value = res.details?.data || []
+    pagination.total = res.details?.total || 0
+  } catch (error) {
+    console.error('获取分类列表失败:', error)
+    Message.error('获取分类列表失败')
+    tableData.value = []
+    pagination.total = 0
+  } finally {
+    loading.value = false
+  }
+}
+
+// 搜索
+const handleSearch = () => {
+  pagination.current = 1
+  fetchCategories()
+}
+
+// 处理表单模型更新
+const handleFormModelUpdate = (value: any) => {
+  formModel.value = value
+}
+
+// 重置
+const handleReset = () => {
+  formModel.value = {
+    keyword: '',
+    parent_id: '',
+  }
+  pagination.current = 1
+  fetchCategories()
+}
+
+// 分页变化
+const handlePageChange = (current: number) => {
+  pagination.current = current
+  fetchCategories()
+}
+
+// 刷新
+const handleRefresh = () => {
+  fetchCategories()
+  Message.success('数据已刷新')
+}
+
+// 新增分类
+const handleCreate = () => {
+  editingCategory.value = null
+  fixedParentId.value = undefined
+  showParentSelector.value = false
+  formVisible.value = true
+}
+
+// 新增子分类
+const handleAddChild = (record: any) => {
+  editingCategory.value = null
+  fixedParentId.value = record.id
+  showParentSelector.value = true
+  formVisible.value = true
+}
+
+// 编辑分类
+const handleEdit = (record: any) => {
+  console.log('编辑分类:', record)
+  editingCategory.value = record
+  formVisible.value = true
+}
+
+// 详情
+const handleDetail = async (record: any) => {
+  console.log('查看详情:', record)
+  try {
+    const res = await fetchCategoryDetail(record.id)
+    if (res.code === 0) {
+      currentCategory.value = res.details
+      detailVisible.value = true
+    } else {
+      Message.error(res.message || '获取详情失败')
+    }
+  } catch (error) {
+    console.error('获取分类详情失败:', error)
+    Message.error('获取详情失败')
+  }
+}
+
+// 删除分类
+const handleDelete = async (record: any) => {
+  console.log('删除分类:', record)
+  try {
+    Modal.confirm({
+      title: '确认删除',
+      content: `确认删除分类 ${record.name} 吗？`,
+      onOk: async () => {
+        const res = await deleteCategory(record.id)
+        if (res.code === 0) {
+          Message.success('删除成功')
+          fetchCategories()
+        } else {
+          Message.error(res.message || '删除失败')
+        }
+      },
+    })
+  } catch (error) {
+    console.error('删除分类失败:', error)
+  }
+}
+
+// 表单成功回调
+const handleFormSuccess = () => {
+  formVisible.value = false
+  fetchCategories()
+  fetchParentCategories()
+}
+
+// 初始化加载数据
+onMounted(() => {
+  fetchParentCategories()
+  fetchCategories()
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'AssetClassify',
+}
+</script>
+
+<style scoped lang="less">
+.container {
+  margin-top: 20px;
+}
+
+.color-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+
+  .color-block {
+    width: 20px;
+    height: 20px;
+    border-radius: 4px;
+    border: 1px solid #d9d9d9;
+  }
+}
+</style>
diff --git a/src/views/ops/pages/assets/device/components/DeviceDetailDialog.vue b/src/views/ops/pages/assets/device/components/DeviceDetailDialog.vue
new file mode 100644
index 0000000..f1c37d2
--- /dev/null
+++ b/src/views/ops/pages/assets/device/components/DeviceDetailDialog.vue
@@ -0,0 +1,233 @@
+<template>
+  <a-modal
+    :visible="visible"
+    title="设备详情"
+    width="900px"
+    :footer="false"
+    @cancel="handleCancel"
+    @update:visible="handleVisibleChange"
+  >
+    <a-spin :loading="loading" style="width: 100%">
+      <a-descriptions
+        :column="2"
+        bordered
+        size="medium"
+        :label-style="{ width: '140px' }"
+      >
+        <!-- 基本信息 -->
+        <a-descriptions-item label="资产名称">
+          {{ device?.asset_name || '-' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="资产编号">
+          {{ device?.asset_code || '-' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="资产分类">
+          {{ device?.category?.name || '-' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="规格型号">
+          {{ device?.model || '-' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="生产厂商">
+          {{ device?.manufacturer || '-' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="序列号">
+          {{ device?.serial_number || '-' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="采购日期">
+          {{ formatDate(device?.purchase_date) }}
+        </a-descriptions-item>
+        <a-descriptions-item label="原值（元）">
+          {{ formatMoney(device?.original_value) }}
+        </a-descriptions-item>
+        <a-descriptions-item label="供应商">
+          {{ device?.supplier?.name || '-' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="质保期">
+          {{ device?.warranty_period || '-' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="质保到期日期">
+          {{ formatDate(device?.warranty_expiry) }}
+        </a-descriptions-item>
+        <a-descriptions-item label="资产状态">
+          <a-tag :color="getAssetStatusColor(device?.status || '')">
+            {{ getAssetStatusText(device?.status || '') }}
+          </a-tag>
+        </a-descriptions-item>
+
+        <!-- 使用信息 -->
+        <a-descriptions-item label="使用部门">
+          {{ device?.department || '-' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="使用人">
+          {{ device?.user || '-' }}
+        </a-descriptions-item>
+
+        <!-- 位置信息 -->
+        <a-descriptions-item label="所属数据中心">
+          {{ device?.datacenter?.name || '-' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="所属楼层">
+          {{ device?.floor?.name || '-' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="所属机柜">
+          {{ device?.rack?.name || '-' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="U位">
+          <template v-if="device?.unit_start || device?.unit_end">
+            {{ device?.unit_start || '-' }} - {{ device?.unit_end || '-' }}
+          </template>
+          <template v-else>-</template>
+        </a-descriptions-item>
+
+        <!-- 标签信息 -->
+        <a-descriptions-item label="二维码标签">
+          {{ device?.qr_code || '-' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="RFID标签">
+          {{ device?.rfid_tag || '-' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="资产标签号">
+          {{ device?.asset_tag || '-' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="技术规格">
+          {{ device?.specifications || '-' }}
+        </a-descriptions-item>
+
+        <!-- 描述信息 -->
+        <a-descriptions-item label="资产描述" :span="2">
+          {{ device?.description || '-' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="备注" :span="2">
+          {{ device?.remarks || '-' }}
+        </a-descriptions-item>
+
+        <!-- 系统信息 -->
+        <a-descriptions-item label="创建时间">
+          {{ formatDateTime(device?.created_at) }}
+        </a-descriptions-item>
+        <a-descriptions-item label="更新时间">
+          {{ formatDateTime(device?.updated_at) }}
+        </a-descriptions-item>
+        <a-descriptions-item label="创建人">
+          {{ device?.created_by || '-' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="更新人">
+          {{ device?.updated_by || '-' }}
+        </a-descriptions-item>
+      </a-descriptions>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+import {
+  getAssetStatusText,
+  getAssetStatusColor,
+} from '@/api/ops/asset'
+
+interface Device {
+  id?: number
+  asset_name?: string
+  asset_code?: string
+  category?: { id: number; name: string; code: string }
+  model?: string
+  manufacturer?: string
+  serial_number?: string
+  purchase_date?: string
+  original_value?: number
+  supplier?: { id: number; name: string; code: string }
+  warranty_period?: string
+  warranty_expiry?: string
+  department?: string
+  user?: string
+  status?: string
+  location?: string
+  datacenter?: { id: number; name: string; code: string }
+  floor?: { id: number; name: string; code: string }
+  rack?: { id: number; name: string; code: string }
+  unit_start?: number
+  unit_end?: number
+  qr_code?: string
+  rfid_tag?: string
+  asset_tag?: string
+  specifications?: string
+  description?: string
+  remarks?: string
+  created_at?: string
+  updated_at?: string
+  created_by?: string
+  updated_by?: string
+}
+
+interface Props {
+  visible: boolean
+  device: Device | null
+}
+
+interface Emits {
+  (e: 'update:visible', value: boolean): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const loading = ref(false)
+
+// 取消
+const handleCancel = () => {
+  emit('update:visible', false)
+}
+
+// 处理对话框可见性变化
+const handleVisibleChange = (visible: boolean) => {
+  emit('update:visible', visible)
+}
+
+// 格式化金额
+const formatMoney = (value: number | string | null | undefined) => {
+  if (value === null || value === undefined || value === '') return '-'
+  const num = Number(value)
+  if (isNaN(num)) return '-'
+  return num.toLocaleString('zh-CN', {
+    style: 'currency',
+    currency: 'CNY',
+    minimumFractionDigits: 2,
+  })
+}
+
+// 格式化日期
+const formatDate = (dateStr?: string) => {
+  if (!dateStr) return '-'
+  const date = new Date(dateStr)
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  return `${year}-${month}-${day}`
+}
+
+// 格式化日期时间
+const formatDateTime = (dateStr?: string) => {
+  if (!dateStr) return '-'
+  const date = new Date(dateStr)
+  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}`
+}
+</script>
+
+<script lang="ts">
+export default {
+  name: 'DeviceDetailDialog',
+}
+</script>
+
+<style scoped lang="less">
+:deep(.arco-descriptions-item-label) {
+  font-weight: 500;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/ops/pages/assets/device/components/DeviceFormDialog.vue b/src/views/ops/pages/assets/device/components/DeviceFormDialog.vue
new file mode 100644
index 0000000..e48bb2e
--- /dev/null
+++ b/src/views/ops/pages/assets/device/components/DeviceFormDialog.vue
@@ -0,0 +1,687 @@
+<template>
+  <a-modal
+    :visible="visible"
+    :title="isEdit ? '编辑设备' : '新增设备'"
+    width="900px"
+    @ok="handleOk"
+    @cancel="handleCancel"
+    @update:visible="handleVisibleChange"
+    :confirm-loading="submitting"
+  >
+    <a-form :model="form" layout="vertical" ref="formRef">
+      <a-tabs v-model:active-key="activeTab">
+        <!-- 基本信息 -->
+        <a-tab-pane key="basic" title="基本信息">
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item
+                label="资产名称"
+                field="asset_name"
+                :rules="[{ required: true, message: '请输入资产名称' }]"
+              >
+                <a-input
+                  v-model="form.asset_name"
+                  placeholder="请输入资产名称"
+                  :max-length="200"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item
+                label="资产编号"
+                field="asset_code"
+                :rules="[{ required: true, message: '请输入资产编号' }]"
+              >
+                <a-input
+                  v-model="form.asset_code"
+                  placeholder="请输入资产编号"
+                  :max-length="100"
+                  :disabled="isEdit"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="资产分类" field="category_id">
+                <a-select
+                  v-model="form.category_id"
+                  placeholder="请选择资产分类"
+                  allow-clear
+                  allow-search
+                  :loading="categoryLoading"
+                >
+                  <a-option
+                    v-for="item in categoryOptions"
+                    :key="item.id"
+                    :value="item.id"
+                    :label="item.name"
+                  />
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="规格型号" field="model">
+                <a-input
+                  v-model="form.model"
+                  placeholder="请输入规格型号"
+                  :max-length="200"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="生产厂商" field="manufacturer">
+                <a-input
+                  v-model="form.manufacturer"
+                  placeholder="请输入生产厂商"
+                  :max-length="200"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="序列号" field="serial_number">
+                <a-input
+                  v-model="form.serial_number"
+                  placeholder="请输入序列号"
+                  :max-length="100"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="采购日期" field="purchase_date">
+                <a-date-picker
+                  v-model="form.purchase_date"
+                  placeholder="请选择采购日期"
+                  format="YYYY-MM-DD"
+                  value-format="YYYY-MM-DD"
+                  style="width: 100%"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="原值（元）" field="original_value">
+                <a-input-number
+                  v-model="form.original_value"
+                  placeholder="请输入原值"
+                  :min="0"
+                  :precision="2"
+                  style="width: 100%"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="供应商" field="supplier_id">
+                <a-select
+                  v-model="form.supplier_id"
+                  placeholder="请选择供应商"
+                  allow-clear
+                  allow-search
+                  :loading="supplierLoading"
+                >
+                  <a-option
+                    v-for="item in supplierOptions"
+                    :key="item.id"
+                    :value="item.id"
+                    :label="item.name"
+                  />
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="质保期" field="warranty_period">
+                <a-input
+                  v-model="form.warranty_period"
+                  placeholder="请输入质保期（如：36个月）"
+                  :max-length="50"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="质保到期日期" field="warranty_expiry">
+                <a-date-picker
+                  v-model="form.warranty_expiry"
+                  placeholder="请选择质保到期日期"
+                  format="YYYY-MM-DD"
+                  value-format="YYYY-MM-DD"
+                  style="width: 100%"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="资产状态" field="status">
+                <a-select
+                  v-model="form.status"
+                  placeholder="请选择资产状态"
+                >
+                  <a-option
+                    v-for="item in assetStatusOptions"
+                    :key="item.value"
+                    :value="item.value"
+                    :label="item.label"
+                  />
+                </a-select>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-tab-pane>
+
+        <!-- 使用信息 -->
+        <a-tab-pane key="usage" title="使用信息">
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="使用部门" field="department">
+                <a-input
+                  v-model="form.department"
+                  placeholder="请输入使用部门"
+                  :max-length="100"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="使用人" field="user">
+                <a-input
+                  v-model="form.user"
+                  placeholder="请输入使用人"
+                  :max-length="50"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-tab-pane>
+
+        <!-- 位置信息 -->
+        <a-tab-pane key="location" title="位置信息">
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="所属数据中心" field="datacenter_id">
+                <a-select
+                  v-model="form.datacenter_id"
+                  placeholder="请选择数据中心"
+                  allow-clear
+                  allow-search
+                  :loading="datacenterLoading"
+                  @change="handleDatacenterChange"
+                >
+                  <a-option
+                    v-for="item in datacenterOptions"
+                    :key="item.id"
+                    :value="item.id"
+                    :label="item.name"
+                  />
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="所属楼层" field="floor_id">
+                <a-select
+                  v-model="form.floor_id"
+                  placeholder="请选择楼层"
+                  allow-clear
+                  allow-search
+                  :loading="floorLoading"
+                  :disabled="!form.datacenter_id"
+                  @change="handleFloorChange"
+                >
+                  <a-option
+                    v-for="item in floorOptions"
+                    :key="item.id"
+                    :value="item.id"
+                    :label="item.name"
+                  />
+                </a-select>
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="所属机柜" field="rack_id">
+                <a-select
+                  v-model="form.rack_id"
+                  placeholder="请选择机柜"
+                  allow-clear
+                  allow-search
+                  :loading="rackLoading"
+                  :disabled="!form.floor_id"
+                >
+                  <a-option
+                    v-for="item in rackOptions"
+                    :key="item.id"
+                    :value="item.id"
+                    :label="item.name"
+                  />
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :span="6">
+              <a-form-item label="起始U位编号" field="unit_start">
+                <a-input-number
+                  v-model="form.unit_start"
+                  placeholder="起始U位"
+                  :min="1"
+                  :max="48"
+                  style="width: 100%"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="6">
+              <a-form-item label="结束U位编号" field="unit_end">
+                <a-input-number
+                  v-model="form.unit_end"
+                  placeholder="结束U位"
+                  :min="1"
+                  :max="48"
+                  style="width: 100%"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-tab-pane>
+
+        <!-- 其他信息 -->
+        <a-tab-pane key="other" title="其他信息">
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="二维码标签" field="qr_code">
+                <a-input
+                  v-model="form.qr_code"
+                  placeholder="请输入二维码标签"
+                  :max-length="100"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="RFID标签" field="rfid_tag">
+                <a-input
+                  v-model="form.rfid_tag"
+                  placeholder="请输入RFID标签"
+                  :max-length="100"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="资产标签号" field="asset_tag">
+                <a-input
+                  v-model="form.asset_tag"
+                  placeholder="请输入资产标签号"
+                  :max-length="100"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="技术规格" field="specifications">
+                <a-input
+                  v-model="form.specifications"
+                  placeholder="请输入技术规格"
+                  :max-length="500"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-form-item label="资产描述" field="description">
+            <a-textarea
+              v-model="form.description"
+              placeholder="请输入资产描述"
+              :auto-size="{ minRows: 3, maxRows: 6 }"
+              :max-length="1000"
+            />
+          </a-form-item>
+
+          <a-form-item label="备注" field="remarks">
+            <a-textarea
+              v-model="form.remarks"
+              placeholder="请输入备注"
+              :auto-size="{ minRows: 3, maxRows: 6 }"
+              :max-length="500"
+            />
+          </a-form-item>
+        </a-tab-pane>
+      </a-tabs>
+    </a-form>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, computed, onMounted } from 'vue'
+import { Message } from '@arco-design/web-vue'
+import {
+  createAsset,
+  updateAsset,
+  fetchCategoryOptions,
+  fetchSupplierOptions,
+  fetchDatacenterOptions,
+  fetchFloorOptions,
+  fetchRackOptions,
+  assetStatusOptions,
+  AssetForm,
+} from '@/api/ops/asset'
+
+interface Device {
+  id?: number
+  asset_name?: string
+  asset_code?: string
+  category_id?: number
+  model?: string
+  manufacturer?: string
+  serial_number?: string
+  purchase_date?: string
+  original_value?: number
+  supplier_id?: number
+  warranty_period?: string
+  warranty_expiry?: string
+  department?: string
+  user?: string
+  status?: string
+  location?: string
+  datacenter_id?: number
+  floor_id?: number
+  rack_id?: number
+  unit_start?: number
+  unit_end?: number
+  qr_code?: string
+  rfid_tag?: string
+  asset_tag?: string
+  specifications?: string
+  description?: string
+  remarks?: string
+}
+
+interface Props {
+  visible: boolean
+  device: Device | null
+}
+
+interface Emits {
+  (e: 'update:visible', value: boolean): void
+  (e: 'success'): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const formRef = ref()
+const submitting = ref(false)
+const activeTab = ref('basic')
+
+// 下拉选项
+const categoryOptions = ref<any[]>([])
+const supplierOptions = ref<any[]>([])
+const datacenterOptions = ref<any[]>([])
+const floorOptions = ref<any[]>([])
+const rackOptions = ref<any[]>([])
+
+// 加载状态
+const categoryLoading = ref(false)
+const supplierLoading = ref(false)
+const datacenterLoading = ref(false)
+const floorLoading = ref(false)
+const rackLoading = ref(false)
+
+// 是否为编辑模式
+const isEdit = computed(() => !!props.device?.id)
+
+// 表单数据
+const form = ref<AssetForm>({
+  asset_name: '',
+  asset_code: '',
+  category_id: undefined,
+  model: '',
+  manufacturer: '',
+  serial_number: '',
+  purchase_date: '',
+  original_value: undefined,
+  supplier_id: undefined,
+  warranty_period: '',
+  warranty_expiry: '',
+  department: '',
+  user: '',
+  status: 'in_use',
+  location: '',
+  datacenter_id: undefined,
+  floor_id: undefined,
+  rack_id: undefined,
+  unit_start: undefined,
+  unit_end: undefined,
+  qr_code: '',
+  rfid_tag: '',
+  asset_tag: '',
+  specifications: '',
+  description: '',
+  remarks: '',
+})
+
+// 加载下拉选项
+const loadOptions = async () => {
+  // 加载资产分类
+  categoryLoading.value = true
+  try {
+    const res = await fetchCategoryOptions()
+    if (res.code === 0) {
+      categoryOptions.value = res.details || []
+    }
+  } catch (error) {
+    console.error('加载资产分类失败:', error)
+  } finally {
+    categoryLoading.value = false
+  }
+
+  // 加载供应商
+  supplierLoading.value = true
+  try {
+    const res = await fetchSupplierOptions()
+    if (res.code === 0) {
+      supplierOptions.value = res.details || []
+    }
+  } catch (error) {
+    console.error('加载供应商失败:', error)
+  } finally {
+    supplierLoading.value = false
+  }
+
+  // 加载数据中心
+  datacenterLoading.value = true
+  try {
+    const res = await fetchDatacenterOptions()
+    if (res.code === 0) {
+      datacenterOptions.value = res.details?.data || res.details || []
+    }
+  } catch (error) {
+    console.error('加载数据中心失败:', error)
+  } finally {
+    datacenterLoading.value = false
+  }
+}
+
+// 数据中心变化时加载楼层
+const handleDatacenterChange = async (value: number | undefined) => {
+  form.value.floor_id = undefined
+  form.value.rack_id = undefined
+  floorOptions.value = []
+  rackOptions.value = []
+
+  if (value) {
+    floorLoading.value = true
+    try {
+      const res = await fetchFloorOptions(value)
+      if (res.code === 0) {
+        floorOptions.value = res.details || []
+      }
+    } catch (error) {
+      console.error('加载楼层失败:', error)
+    } finally {
+      floorLoading.value = false
+    }
+  }
+}
+
+// 楼层变化时加载机柜
+const handleFloorChange = async (value: number | undefined) => {
+  form.value.rack_id = undefined
+  rackOptions.value = []
+
+  if (value) {
+    rackLoading.value = true
+    try {
+      const res = await fetchRackOptions({
+        datacenter_id: form.value.datacenter_id,
+        floor_id: value,
+      })
+      if (res.code === 0) {
+        rackOptions.value = res.details?.data || res.details || []
+      }
+    } catch (error) {
+      console.error('加载机柜失败:', error)
+    } finally {
+      rackLoading.value = false
+    }
+  }
+}
+
+// 监听 device 变化，初始化表单
+watch(
+  () => props.device,
+  async (newVal) => {
+    if (newVal) {
+      form.value = { ...newVal } as AssetForm
+      
+      // 如果有数据中心，加载楼层
+      if (newVal.datacenter_id) {
+        try {
+          const res = await fetchFloorOptions(newVal.datacenter_id)
+          if (res.code === 0) {
+            floorOptions.value = res.details || []
+          }
+        } catch (error) {
+          console.error('加载楼层失败:', error)
+        }
+      }
+      
+      // 如果有楼层，加载机柜
+      if (newVal.floor_id) {
+        try {
+          const res = await fetchRackOptions({
+            datacenter_id: newVal.datacenter_id,
+            floor_id: newVal.floor_id,
+          })
+          if (res.code === 0) {
+            rackOptions.value = res.details?.data || res.details || []
+          }
+        } catch (error) {
+          console.error('加载机柜失败:', error)
+        }
+      }
+    } else {
+      // 重置表单
+      form.value = {
+        asset_name: '',
+        asset_code: '',
+        category_id: undefined,
+        model: '',
+        manufacturer: '',
+        serial_number: '',
+        purchase_date: '',
+        original_value: undefined,
+        supplier_id: undefined,
+        warranty_period: '',
+        warranty_expiry: '',
+        department: '',
+        user: '',
+        status: 'in_use',
+        location: '',
+        datacenter_id: undefined,
+        floor_id: undefined,
+        rack_id: undefined,
+        unit_start: undefined,
+        unit_end: undefined,
+        qr_code: '',
+        rfid_tag: '',
+        asset_tag: '',
+        specifications: '',
+        description: '',
+        remarks: '',
+      }
+      floorOptions.value = []
+      rackOptions.value = []
+    }
+    activeTab.value = 'basic'
+  },
+  { immediate: true }
+)
+
+// 提交表单
+const handleOk = async () => {
+  try {
+    const valid = await formRef.value?.validate()
+    if (valid) {
+      return
+    }
+
+    submitting.value = true
+
+    const data = { ...form.value }
+
+    let res
+    if (isEdit.value) {
+      res = await updateAsset({ ...data, id: props.device?.id })
+    } else {
+      res = await createAsset(data)
+    }
+
+    if (res.code === 0) {
+      Message.success(isEdit.value ? '更新成功' : '创建成功')
+      emit('success')
+    } else {
+      Message.error(res.message || '操作失败')
+    }
+  } catch (error) {
+    console.error('提交表单失败:', error)
+    Message.error('操作失败')
+  } finally {
+    submitting.value = false
+  }
+}
+
+// 取消
+const handleCancel = () => {
+  emit('update:visible', false)
+}
+
+// 处理对话框可见性变化
+const handleVisibleChange = (visible: boolean) => {
+  emit('update:visible', visible)
+}
+
+// 初始化
+onMounted(() => {
+  loadOptions()
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'DeviceFormDialog',
+}
+</script>
+
+<style scoped lang="less">
+:deep(.arco-tabs-content) {
+  padding-top: 16px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/ops/pages/assets/device/index.vue b/src/views/ops/pages/assets/device/index.vue
new file mode 100644
index 0000000..e345a1e
--- /dev/null
+++ b/src/views/ops/pages/assets/device/index.vue
@@ -0,0 +1,400 @@
+<template>
+  <div class="container">
+    <search-table
+      :form-model="formModel"
+      :form-items="formItems"
+      :data="tableData"
+      :columns="columns"
+      :loading="loading"
+      :pagination="pagination"
+      title="设备资产管理"
+      search-button-text="查询"
+      reset-button-text="重置"
+      @update:form-model="handleFormModelUpdate"
+      @search="handleSearch"
+      @reset="handleReset"
+      @page-change="handlePageChange"
+      @refresh="handleRefresh"
+    >
+      <template #toolbar-left>
+        <a-button type="primary" @click="handleCreate">
+          新增设备
+        </a-button>
+        <a-button @click="handleExport">
+          导出
+        </a-button>
+      </template>
+
+      <!-- 序号 -->
+      <template #index="{ rowIndex }">
+        {{ rowIndex + 1 + (pagination.current - 1) * pagination.pageSize }}
+      </template>
+
+      <!-- 资产状态 -->
+      <template #status="{ record }">
+        <a-tag :color="getAssetStatusColor(record.status)">
+          {{ getAssetStatusText(record.status) }}
+        </a-tag>
+      </template>
+
+      <!-- 原值 -->
+      <template #original_value="{ record }">
+        {{ formatMoney(record.original_value) }}
+      </template>
+
+      <!-- 采购日期 -->
+      <template #purchase_date="{ record }">
+        {{ formatDate(record.purchase_date) }}
+      </template>
+
+      <!-- 质保到期日期 -->
+      <template #warranty_expiry="{ record }">
+        {{ formatDate(record.warranty_expiry) }}
+      </template>
+
+      <!-- 操作 -->
+      <template #actions="{ record }">
+        <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>
+      </template>
+    </search-table>
+
+    <!-- 设备表单对话框（新增/编辑） -->
+    <device-form-dialog
+      v-model:visible="formVisible"
+      :device="editingDevice"
+      @success="handleFormSuccess"
+    />
+
+    <!-- 设备详情对话框 -->
+    <device-detail-dialog
+      v-model:visible="detailVisible"
+      :device="currentDevice"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, computed, onMounted } from 'vue'
+import { Message, Modal } from '@arco-design/web-vue'
+import type { FormItem } from '@/components/search-form/types'
+import SearchTable from '@/components/search-table/index.vue'
+import {
+  fetchAssetList,
+  deleteAsset,
+  fetchAssetDetail,
+  getAssetStatusText,
+  getAssetStatusColor,
+  assetStatusOptions,
+} from '@/api/ops/asset'
+import DeviceFormDialog from './components/DeviceFormDialog.vue'
+import DeviceDetailDialog from './components/DeviceDetailDialog.vue'
+
+// 状态管理
+const loading = ref(false)
+const tableData = ref<any[]>([])
+const formModel = ref({
+  keyword: '',
+  status: '',
+})
+
+const pagination = reactive({
+  current: 1,
+  pageSize: 20,
+  total: 0,
+})
+
+// 表单项配置
+const formItems = computed<FormItem[]>(() => [
+  {
+    field: 'keyword',
+    label: '关键词',
+    type: 'input',
+    placeholder: '请输入资产名称/编号/部门',
+  },
+  {
+    field: 'status',
+    label: '资产状态',
+    type: 'select',
+    placeholder: '请选择状态',
+    options: assetStatusOptions,
+    allowClear: true,
+  },
+])
+
+// 表格列配置
+const columns = computed(() => [
+  {
+    title: '序号',
+    dataIndex: 'index',
+    slotName: 'index',
+    width: 70,
+    align: 'center' as const,
+  },
+  {
+    title: '资产编号',
+    dataIndex: 'asset_code',
+    ellipsis: true,
+    tooltip: true,
+    width: 130,
+  },
+  {
+    title: '资产名称',
+    dataIndex: 'asset_name',
+    ellipsis: true,
+    tooltip: true,
+    width: 180,
+  },
+  {
+    title: '资产分类',
+    dataIndex: 'category.name',
+    ellipsis: true,
+    tooltip: true,
+    width: 120,
+  },
+  {
+    title: '规格型号',
+    dataIndex: 'model',
+    ellipsis: true,
+    tooltip: true,
+    width: 150,
+  },
+  {
+    title: '使用部门',
+    dataIndex: 'department',
+    ellipsis: true,
+    tooltip: true,
+    width: 120,
+  },
+  {
+    title: '使用人',
+    dataIndex: 'user',
+    ellipsis: true,
+    tooltip: true,
+    width: 100,
+  },
+  {
+    title: '原值（元）',
+    dataIndex: 'original_value',
+    slotName: 'original_value',
+    width: 120,
+    align: 'right' as const,
+  },
+  {
+    title: '资产状态',
+    dataIndex: 'status',
+    slotName: 'status',
+    width: 100,
+    align: 'center' as const,
+  },
+  {
+    title: '采购日期',
+    dataIndex: 'purchase_date',
+    slotName: 'purchase_date',
+    width: 110,
+    align: 'center' as const,
+  },
+  {
+    title: '操作',
+    slotName: 'actions',
+    width: 280,
+    fixed: 'right' as const,
+  },
+])
+
+// 当前选中的设备
+const currentDevice = ref<any>(null)
+const editingDevice = ref<any>(null)
+
+// 对话框可见性
+const formVisible = ref(false)
+const detailVisible = ref(false)
+
+// 获取设备列表
+const fetchDevices = async () => {
+  loading.value = true
+
+  try {
+    const params: any = {
+      page: pagination.current,
+      page_size: pagination.pageSize,
+      keyword: formModel.value.keyword || undefined,
+      status: formModel.value.status || undefined,
+    }
+
+    const res = await fetchAssetList(params)
+
+    tableData.value = res.details?.data || []
+    pagination.total = res.details?.total || 0
+  } catch (error) {
+    console.error('获取设备列表失败:', error)
+    Message.error('获取设备列表失败')
+    tableData.value = []
+    pagination.total = 0
+  } finally {
+    loading.value = false
+  }
+}
+
+// 搜索
+const handleSearch = () => {
+  pagination.current = 1
+  fetchDevices()
+}
+
+// 处理表单模型更新
+const handleFormModelUpdate = (value: any) => {
+  formModel.value = value
+}
+
+// 重置
+const handleReset = () => {
+  formModel.value = {
+    keyword: '',
+    status: '',
+  }
+  pagination.current = 1
+  fetchDevices()
+}
+
+// 分页变化
+const handlePageChange = (current: number) => {
+  pagination.current = current
+  fetchDevices()
+}
+
+// 刷新
+const handleRefresh = () => {
+  fetchDevices()
+  Message.success('数据已刷新')
+}
+
+// 新增设备
+const handleCreate = () => {
+  editingDevice.value = null
+  formVisible.value = true
+}
+
+// 编辑设备
+const handleEdit = (record: any) => {
+  editingDevice.value = record
+  formVisible.value = true
+}
+
+// 详情
+const handleDetail = async (record: any) => {
+  try {
+    const res = await fetchAssetDetail(record.id)
+    if (res.code === 0) {
+      currentDevice.value = res.details
+      detailVisible.value = true
+    } else {
+      Message.error(res.message || '获取详情失败')
+    }
+  } catch (error) {
+    console.error('获取设备详情失败:', error)
+    Message.error('获取详情失败')
+  }
+}
+
+// 删除设备
+const handleDelete = async (record: any) => {
+  try {
+    Modal.confirm({
+      title: '确认删除',
+      content: `确认删除设备 ${record.asset_name} 吗？`,
+      onOk: async () => {
+        const res = await deleteAsset(record.id)
+        if (res.code === 0) {
+          Message.success('删除成功')
+          fetchDevices()
+        } else {
+          Message.error(res.message || '删除失败')
+        }
+      },
+    })
+  } catch (error) {
+    console.error('删除设备失败:', error)
+  }
+}
+
+// 导出
+const handleExport = async () => {
+  try {
+    Message.info('正在导出...')
+    const res = await fetchAssetList({
+      page: 1,
+      page_size: 10000,
+      keyword: formModel.value.keyword || undefined,
+      status: formModel.value.status || undefined,
+    })
+    
+    if (res.code === 0 && res.details?.data) {
+      const data = res.details.data
+      const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })
+      const url = URL.createObjectURL(blob)
+      const link = document.createElement('a')
+      link.href = url
+      link.download = `assets_${new Date().toISOString().slice(0, 10)}.json`
+      link.click()
+      URL.revokeObjectURL(url)
+      Message.success('导出成功')
+    }
+  } catch (error) {
+    console.error('导出失败:', error)
+    Message.error('导出失败')
+  }
+}
+
+// 表单成功回调
+const handleFormSuccess = () => {
+  formVisible.value = false
+  fetchDevices()
+}
+
+// 格式化金额
+const formatMoney = (value: number | string | null | undefined) => {
+  if (value === null || value === undefined || value === '') return '-'
+  const num = Number(value)
+  if (isNaN(num)) return '-'
+  return num.toLocaleString('zh-CN', {
+    style: 'currency',
+    currency: 'CNY',
+    minimumFractionDigits: 2,
+  })
+}
+
+// 格式化日期
+const formatDate = (dateStr?: string) => {
+  if (!dateStr) return '-'
+  const date = new Date(dateStr)
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  return `${year}-${month}-${day}`
+}
+
+// 初始化加载数据
+onMounted(() => {
+  fetchDevices()
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'DeviceManage',
+}
+</script>
+
+<style scoped lang="less">
+.container {
+  margin-top: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/ops/pages/assets/supplier/components/SupplierDetailDialog.vue b/src/views/ops/pages/assets/supplier/components/SupplierDetailDialog.vue
new file mode 100644
index 0000000..44cf614
--- /dev/null
+++ b/src/views/ops/pages/assets/supplier/components/SupplierDetailDialog.vue
@@ -0,0 +1,275 @@
+<template>
+  <a-modal
+    :visible="visible"
+    title="供应商详情"
+    width="800px"
+    @cancel="handleCancel"
+    @update:visible="handleVisibleChange"
+    :footer="false"
+  >
+    <a-tabs v-model:active-key="activeTab" v-if="supplier">
+      <!-- 基本信息 -->
+      <a-tab-pane key="basic" title="基本信息">
+        <a-descriptions :column="2" bordered>
+          <a-descriptions-item label="供应商名称" :span="2">
+            {{ supplier.name || '-' }}
+          </a-descriptions-item>
+          <a-descriptions-item label="供应商编码">
+            {{ supplier.code || '-' }}
+          </a-descriptions-item>
+          <a-descriptions-item label="简称">
+            {{ supplier.short_name || '-' }}
+          </a-descriptions-item>
+          <a-descriptions-item label="供应商类型">
+            {{ supplier.supplier_type || '-' }}
+          </a-descriptions-item>
+          <a-descriptions-item label="供应商级别">
+            {{ supplier.supplier_level || '-' }}
+          </a-descriptions-item>
+          <a-descriptions-item label="状态">
+            <a-tag :color="getStatusColor(supplier.status)">
+              {{ getStatusText(supplier.status) }}
+            </a-tag>
+          </a-descriptions-item>
+          <a-descriptions-item label="供应商描述" :span="2">
+            {{ supplier.description || '-' }}
+          </a-descriptions-item>
+        </a-descriptions>
+      </a-tab-pane>
+
+      <!-- 联系信息 -->
+      <a-tab-pane key="contact" title="联系信息">
+        <a-descriptions :column="2" bordered>
+          <a-descriptions-item label="联系人">
+            {{ supplier.contact_person || '-' }}
+          </a-descriptions-item>
+          <a-descriptions-item label="联系电话">
+            {{ supplier.contact_phone || '-' }}
+          </a-descriptions-item>
+          <a-descriptions-item label="备用联系电话">
+            {{ supplier.contact_mobile || '-' }}
+          </a-descriptions-item>
+          <a-descriptions-item label="联系邮箱">
+            {{ supplier.contact_email || '-' }}
+          </a-descriptions-item>
+        </a-descriptions>
+      </a-tab-pane>
+
+      <!-- 地址信息 -->
+      <a-tab-pane key="address" title="地址信息">
+        <a-descriptions :column="2" bordered>
+          <a-descriptions-item label="省份">
+            {{ supplier.province || '-' }}
+          </a-descriptions-item>
+          <a-descriptions-item label="城市">
+            {{ supplier.city || '-' }}
+          </a-descriptions-item>
+          <a-descriptions-item label="邮编">
+            {{ supplier.postal_code || '-' }}
+          </a-descriptions-item>
+          <a-descriptions-item label="详细地址">
+            {{ supplier.address || '-' }}
+          </a-descriptions-item>
+        </a-descriptions>
+      </a-tab-pane>
+
+      <!-- 企业信息 -->
+      <a-tab-pane key="company" title="企业信息">
+        <a-descriptions :column="2" bordered>
+          <a-descriptions-item label="法定代表人">
+            {{ supplier.legal_representative || '-' }}
+          </a-descriptions-item>
+          <a-descriptions-item label="注册资本">
+            {{ supplier.registered_capital || '-' }}
+          </a-descriptions-item>
+          <a-descriptions-item label="营业执照号">
+            {{ supplier.business_license || '-' }}
+          </a-descriptions-item>
+          <a-descriptions-item label="税号">
+            {{ supplier.tax_id || '-' }}
+          </a-descriptions-item>
+          <a-descriptions-item label="企业类型">
+            {{ supplier.company_type || '-' }}
+          </a-descriptions-item>
+          <a-descriptions-item label="官网地址">
+            {{ supplier.website || '-' }}
+          </a-descriptions-item>
+        </a-descriptions>
+      </a-tab-pane>
+
+      <!-- 统计信息 -->
+      <a-tab-pane key="statistics" title="统计信息">
+        <a-descriptions :column="2" bordered>
+          <a-descriptions-item label="订单数量">
+            {{ supplier.order_count ?? 0 }}
+          </a-descriptions-item>
+          <a-descriptions-item label="累计交易金额">
+            {{ formatMoney(supplier.total_amount) }}
+          </a-descriptions-item>
+          <a-descriptions-item label="合作开始日期">
+            {{ formatDate(supplier.cooperation_start_date) }}
+          </a-descriptions-item>
+          <a-descriptions-item label="合作结束日期">
+            {{ formatDate(supplier.cooperation_end_date) }}
+          </a-descriptions-item>
+        </a-descriptions>
+      </a-tab-pane>
+
+      <!-- 系统信息 -->
+      <a-tab-pane key="system" title="系统信息">
+        <a-descriptions :column="2" bordered>
+          <a-descriptions-item label="创建时间">
+            {{ formatDateTime(supplier.created_at) }}
+          </a-descriptions-item>
+          <a-descriptions-item label="更新时间">
+            {{ formatDateTime(supplier.updated_at) }}
+          </a-descriptions-item>
+          <a-descriptions-item label="创建人">
+            {{ supplier.created_by || '-' }}
+          </a-descriptions-item>
+          <a-descriptions-item label="更新人">
+            {{ supplier.updated_by || '-' }}
+          </a-descriptions-item>
+          <a-descriptions-item label="备注" :span="2">
+            {{ supplier.remarks || '-' }}
+          </a-descriptions-item>
+        </a-descriptions>
+      </a-tab-pane>
+    </a-tabs>
+
+    <a-empty v-else description="暂无数据" />
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+interface Supplier {
+  id?: number
+  name?: string
+  code?: string
+  short_name?: string
+  description?: string
+  contact_person?: string
+  contact_phone?: string
+  contact_email?: string
+  contact_mobile?: string
+  province?: string
+  city?: string
+  address?: string
+  postal_code?: string
+  website?: string
+  legal_representative?: string
+  registered_capital?: string
+  business_license?: string
+  tax_id?: string
+  company_type?: string
+  supplier_type?: string
+  supplier_level?: string
+  status?: string
+  order_count?: number
+  total_amount?: number
+  cooperation_start_date?: string
+  cooperation_end_date?: string
+  created_at?: string
+  updated_at?: string
+  created_by?: string
+  updated_by?: string
+  remarks?: string
+}
+
+interface Props {
+  visible: boolean
+  supplier: Supplier | null
+}
+
+interface Emits {
+  (e: 'update:visible', value: boolean): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const activeTab = ref('basic')
+
+// 获取状态颜色
+const getStatusColor = (status?: string) => {
+  const colorMap: Record<string, string> = {
+    active: 'green',
+    paused: 'orange',
+    blacklist: 'red',
+    inactive: 'gray',
+  }
+  return colorMap[status || ''] || 'gray'
+}
+
+// 获取状态文本
+const getStatusText = (status?: string) => {
+  const textMap: Record<string, string> = {
+    active: '合作中',
+    paused: '暂停合作',
+    blacklist: '黑名单',
+    inactive: '停止合作',
+  }
+  return textMap[status || ''] || status || '-'
+}
+
+// 格式化金额
+const formatMoney = (value?: number | string | null) => {
+  if (value === null || value === undefined || value === '') return '-'
+  const num = Number(value)
+  if (isNaN(num)) return '-'
+  return num.toLocaleString('zh-CN', {
+    style: 'currency',
+    currency: 'CNY',
+    minimumFractionDigits: 2,
+  })
+}
+
+// 格式化日期
+const formatDate = (dateStr?: string) => {
+  if (!dateStr) return '-'
+  const date = new Date(dateStr)
+  return date.toLocaleDateString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  })
+}
+
+// 格式化日期时间
+const formatDateTime = (dateStr?: string) => {
+  if (!dateStr) return '-'
+  const date = new Date(dateStr)
+  return date.toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  })
+}
+
+// 取消
+const handleCancel = () => {
+  emit('update:visible', false)
+}
+
+// 处理对话框可见性变化
+const handleVisibleChange = (visible: boolean) => {
+  emit('update:visible', visible)
+}
+</script>
+
+<script lang="ts">
+export default {
+  name: 'SupplierDetailDialog',
+}
+</script>
+
+<style scoped lang="less">
+:deep(.arco-descriptions) {
+  margin-top: 16px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/ops/pages/assets/supplier/components/SupplierFormDialog.vue b/src/views/ops/pages/assets/supplier/components/SupplierFormDialog.vue
new file mode 100644
index 0000000..b071012
--- /dev/null
+++ b/src/views/ops/pages/assets/supplier/components/SupplierFormDialog.vue
@@ -0,0 +1,464 @@
+<template>
+  <a-modal
+    :visible="visible"
+    :title="isEdit ? '编辑供应商' : '新增供应商'"
+    width="800px"
+    @ok="handleOk"
+    @cancel="handleCancel"
+    @update:visible="handleVisibleChange"
+    :confirm-loading="submitting"
+  >
+    <a-form :model="form" layout="vertical" ref="formRef">
+      <a-tabs v-model:active-key="activeTab">
+        <!-- 基本信息 -->
+        <a-tab-pane key="basic" title="基本信息">
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item
+                label="供应商名称"
+                field="name"
+                :rules="[{ required: true, message: '请输入供应商名称' }]"
+              >
+                <a-input
+                  v-model="form.name"
+                  placeholder="请输入供应商名称"
+                  :max-length="200"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item
+                label="供应商编码"
+                field="code"
+                :rules="[{ required: true, message: '请输入供应商编码' }]"
+              >
+                <a-input
+                  v-model="form.code"
+                  placeholder="请输入供应商编码"
+                  :max-length="100"
+                  :disabled="isEdit"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="简称" field="short_name">
+                <a-input
+                  v-model="form.short_name"
+                  placeholder="请输入简称"
+                  :max-length="100"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item
+                label="供应商类型"
+                field="supplier_type"
+                :rules="[{ required: true, message: '请选择供应商类型' }]"
+              >
+                <a-select
+                  v-model="form.supplier_type"
+                  placeholder="请选择供应商类型"
+                  allow-clear
+                >
+                  <a-option value="生产商">生产商</a-option>
+                  <a-option value="代理商">代理商</a-option>
+                  <a-option value="经销商">经销商</a-option>
+                  <a-option value="服务商">服务商</a-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="供应商级别" field="supplier_level">
+                <a-select
+                  v-model="form.supplier_level"
+                  placeholder="请选择供应商级别"
+                  allow-clear
+                >
+                  <a-option value="A">A</a-option>
+                  <a-option value="B">B</a-option>
+                  <a-option value="C">C</a-option>
+                  <a-option value="D">D</a-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item
+                label="状态"
+                field="status"
+                :rules="[{ required: true, message: '请选择状态' }]"
+              >
+                <a-select
+                  v-model="form.status"
+                  placeholder="请选择状态"
+                >
+                  <a-option value="active">合作中</a-option>
+                  <a-option value="paused">暂停合作</a-option>
+                  <a-option value="blacklist">黑名单</a-option>
+                  <a-option value="inactive">停止合作</a-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-tab-pane>
+
+        <!-- 联系信息 -->
+        <a-tab-pane key="contact" title="联系信息">
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item
+                label="联系人"
+                field="contact_person"
+                :rules="[{ required: true, message: '请输入联系人' }]"
+              >
+                <a-input
+                  v-model="form.contact_person"
+                  placeholder="请输入联系人"
+                  :max-length="50"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item
+                label="联系电话"
+                field="contact_phone"
+                :rules="[{ required: true, message: '请输入联系电话' }]"
+              >
+                <a-input
+                  v-model="form.contact_phone"
+                  placeholder="请输入联系电话"
+                  :max-length="20"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item
+                label="备用联系电话"
+                field="contact_mobile"
+                :rules="[{ required: true, message: '请输入备用联系电话' }]"
+              >
+                <a-input
+                  v-model="form.contact_mobile"
+                  placeholder="请输入备用联系电话"
+                  :max-length="20"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item
+                label="联系邮箱"
+                field="contact_email"
+                :rules="[
+                  { required: true, message: '请输入联系邮箱' },
+                  { type: 'email', message: '请输入有效的邮箱地址' },
+                ]"
+              >
+                <a-input
+                  v-model="form.contact_email"
+                  placeholder="请输入联系邮箱"
+                  :max-length="100"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-tab-pane>
+
+        <!-- 地址信息 -->
+        <a-tab-pane key="address" title="地址信息">
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="省份" field="province">
+                <a-input
+                  v-model="form.province"
+                  placeholder="请输入省份"
+                  :max-length="50"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="城市" field="city">
+                <a-input
+                  v-model="form.city"
+                  placeholder="请输入城市"
+                  :max-length="50"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="邮编" field="postal_code">
+                <a-input
+                  v-model="form.postal_code"
+                  placeholder="请输入邮编"
+                  :max-length="10"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="详细地址" field="address">
+                <a-input
+                  v-model="form.address"
+                  placeholder="请输入详细地址"
+                  :max-length="200"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-tab-pane>
+
+        <!-- 企业信息 -->
+        <a-tab-pane key="company" title="企业信息">
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="法定代表人" field="legal_representative">
+                <a-input
+                  v-model="form.legal_representative"
+                  placeholder="请输入法定代表人"
+                  :max-length="50"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="注册资本" field="registered_capital">
+                <a-input
+                  v-model="form.registered_capital"
+                  placeholder="请输入注册资本"
+                  :max-length="50"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="营业执照号" field="business_license">
+                <a-input
+                  v-model="form.business_license"
+                  placeholder="请输入营业执照号"
+                  :max-length="100"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="税号" field="tax_id">
+                <a-input
+                  v-model="form.tax_id"
+                  placeholder="请输入税号"
+                  :max-length="50"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="企业类型" field="company_type">
+                <a-input
+                  v-model="form.company_type"
+                  placeholder="请输入企业类型"
+                  :max-length="50"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="官网地址" field="website">
+                <a-input
+                  v-model="form.website"
+                  placeholder="请输入官网地址"
+                  :max-length="200"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-form-item label="供应商描述" field="description">
+            <a-textarea
+              v-model="form.description"
+              placeholder="请输入供应商描述"
+              :auto-size="{ minRows: 3, maxRows: 6 }"
+              :max-length="500"
+            />
+          </a-form-item>
+        </a-tab-pane>
+      </a-tabs>
+    </a-form>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, computed } from 'vue'
+import { Message } from '@arco-design/web-vue'
+import { createSupplier, updateSupplier } from '@/api/ops/supplier'
+
+interface Supplier {
+  id?: number
+  name?: string
+  code?: string
+  short_name?: string
+  description?: string
+  contact_person?: string
+  contact_phone?: string
+  contact_email?: string
+  contact_mobile?: string
+  province?: string
+  city?: string
+  address?: string
+  postal_code?: string
+  website?: string
+  legal_representative?: string
+  registered_capital?: string
+  business_license?: string
+  tax_id?: string
+  company_type?: string
+  supplier_type?: string
+  supplier_level?: string
+  status?: string
+}
+
+interface Props {
+  visible: boolean
+  supplier: Supplier | null
+}
+
+interface Emits {
+  (e: 'update:visible', value: boolean): void
+  (e: 'success'): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const formRef = ref()
+const submitting = ref(false)
+const activeTab = ref('basic')
+
+// 是否为编辑模式
+const isEdit = computed(() => !!props.supplier?.id)
+
+// 表单数据
+const form = ref<Supplier>({
+  name: '',
+  code: '',
+  short_name: '',
+  description: '',
+  contact_person: '',
+  contact_phone: '',
+  contact_email: '',
+  contact_mobile: '',
+  province: '',
+  city: '',
+  address: '',
+  postal_code: '',
+  website: '',
+  legal_representative: '',
+  registered_capital: '',
+  business_license: '',
+  tax_id: '',
+  company_type: '',
+  supplier_type: '',
+  supplier_level: '',
+  status: 'active',
+})
+
+// 监听 supplier 变化，初始化表单
+watch(
+  () => props.supplier,
+  (newVal) => {
+    if (newVal) {
+      form.value = { ...newVal }
+    } else {
+      // 重置表单
+      form.value = {
+        name: '',
+        code: '',
+        short_name: '',
+        description: '',
+        contact_person: '',
+        contact_phone: '',
+        contact_email: '',
+        contact_mobile: '',
+        province: '',
+        city: '',
+        address: '',
+        postal_code: '',
+        website: '',
+        legal_representative: '',
+        registered_capital: '',
+        business_license: '',
+        tax_id: '',
+        company_type: '',
+        supplier_type: '',
+        supplier_level: '',
+        status: 'active',
+      }
+    }
+    activeTab.value = 'basic'
+  },
+  { immediate: true }
+)
+
+// 提交表单
+const handleOk = async () => {
+  try {
+    const valid = await formRef.value?.validate()
+    if (valid) {
+      return
+    }
+
+    submitting.value = true
+
+    const data = { ...form.value }
+
+    let res
+    if (isEdit.value) {
+      res = await updateSupplier({ ...data, id: props.supplier?.id })
+    } else {
+      res = await createSupplier(data)
+    }
+
+    if (res.code === 0) {
+      Message.success(isEdit.value ? '更新成功' : '创建成功')
+      emit('success')
+    } else {
+      Message.error(res.message || '操作失败')
+    }
+  } catch (error) {
+    console.error('提交表单失败:', error)
+    Message.error('操作失败')
+  } finally {
+    submitting.value = false
+  }
+}
+
+// 取消
+const handleCancel = () => {
+  emit('update:visible', false)
+}
+
+// 处理对话框可见性变化
+const handleVisibleChange = (visible: boolean) => {
+  emit('update:visible', visible)
+}
+</script>
+
+<script lang="ts">
+export default {
+  name: 'SupplierFormDialog',
+}
+</script>
+
+<style scoped lang="less">
+:deep(.arco-tabs-content) {
+  padding-top: 16px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/ops/pages/assets/supplier/index.vue b/src/views/ops/pages/assets/supplier/index.vue
new file mode 100644
index 0000000..36c6643
--- /dev/null
+++ b/src/views/ops/pages/assets/supplier/index.vue
@@ -0,0 +1,384 @@
+<template>
+  <div class="container">
+    <search-table
+      :form-model="formModel"
+      :form-items="formItems"
+      :data="tableData"
+      :columns="columns"
+      :loading="loading"
+      :pagination="pagination"
+      title="供应商管理"
+      search-button-text="查询"
+      reset-button-text="重置"
+      @update:form-model="handleFormModelUpdate"
+      @search="handleSearch"
+      @reset="handleReset"
+      @page-change="handlePageChange"
+      @refresh="handleRefresh"
+    >
+      <template #toolbar-left>
+        <a-button type="primary" @click="handleCreate">
+          新增供应商
+        </a-button>
+      </template>
+
+      <!-- 序号 -->
+      <template #index="{ rowIndex }">
+        {{ rowIndex + 1 + (pagination.current - 1) * pagination.pageSize }}
+      </template>
+
+      <!-- 状态 -->
+      <template #status="{ record }">
+        <a-tag :color="getStatusColor(record.status)">
+          {{ getStatusText(record.status) }}
+        </a-tag>
+      </template>
+
+      <!-- 累计交易金额 -->
+      <template #total_amount="{ record }">
+        {{ formatMoney(record.total_amount) }}
+      </template>
+
+      <!-- 合作开始日期 -->
+      <template #cooperation_start_date="{ record }">
+        {{ formatDate(record.cooperation_start_date) }}
+      </template>
+
+      <!-- 操作 -->
+      <template #actions="{ record }">
+        <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>
+      </template>
+    </search-table>
+
+    <!-- 供应商表单对话框（新增/编辑） -->
+    <supplier-form-dialog
+      v-model:visible="formVisible"
+      :supplier="editingSupplier"
+      @success="handleFormSuccess"
+    />
+
+    <!-- 供应商详情对话框 -->
+    <supplier-detail-dialog
+      v-model:visible="detailVisible"
+      :supplier="currentSupplier"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, computed, onMounted } from 'vue'
+import { Message, Modal } from '@arco-design/web-vue'
+import type { FormItem } from '@/components/search-form/types'
+import SearchTable from '@/components/search-table/index.vue'
+import {
+  fetchSupplierList,
+  deleteSupplier,
+  fetchSupplierDetail,
+} from '@/api/ops/supplier'
+import SupplierFormDialog from './components/SupplierFormDialog.vue'
+import SupplierDetailDialog from './components/SupplierDetailDialog.vue'
+
+// 状态选项
+const statusOptions = [
+  { label: '合作中', value: 'active' },
+  { label: '暂停合作', value: 'paused' },
+  { label: '黑名单', value: 'blacklist' },
+  { label: '停止合作', value: 'inactive' },
+]
+
+// 状态管理
+const loading = ref(false)
+const tableData = ref<any[]>([])
+const formModel = ref({
+  keyword: '',
+  status: '',
+})
+
+const pagination = reactive({
+  current: 1,
+  pageSize: 20,
+  total: 0,
+})
+
+// 表单项配置
+const formItems = computed<FormItem[]>(() => [
+  {
+    field: 'keyword',
+    label: '关键词',
+    type: 'input',
+    placeholder: '请输入供应商名称/编码/联系人/电话',
+  },
+  {
+    field: 'status',
+    label: '状态',
+    type: 'select',
+    placeholder: '请选择状态',
+    options: statusOptions,
+    allowClear: true,
+  },
+])
+
+// 表格列配置
+const columns = computed(() => [
+  {
+    title: '序号',
+    dataIndex: 'index',
+    slotName: 'index',
+    width: 80,
+    align: 'center' as const,
+  },
+  {
+    title: '供应商编码',
+    dataIndex: 'code',
+    ellipsis: true,
+    tooltip: true,
+    width: 120,
+  },
+  {
+    title: '供应商名称',
+    dataIndex: 'name',
+    ellipsis: true,
+    tooltip: true,
+    width: 200,
+  },
+  {
+    title: '联系人',
+    dataIndex: 'contact_person',
+    ellipsis: true,
+    tooltip: true,
+    width: 100,
+  },
+  {
+    title: '联系电话',
+    dataIndex: 'contact_phone',
+    ellipsis: true,
+    tooltip: true,
+    width: 130,
+  },
+  {
+    title: '订单数量',
+    dataIndex: 'order_count',
+    width: 100,
+    align: 'center' as const,
+  },
+  {
+    title: '累计交易金额',
+    dataIndex: 'total_amount',
+    slotName: 'total_amount',
+    width: 130,
+    align: 'right' as const,
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    slotName: 'status',
+    width: 100,
+    align: 'center' as const,
+  },
+  {
+    title: '合作开始日期',
+    dataIndex: 'cooperation_start_date',
+    slotName: 'cooperation_start_date',
+    width: 130,
+    align: 'center' as const,
+  },
+  {
+    title: '操作',
+    slotName: 'actions',
+    width: 200,
+    fixed: 'right' as const,
+  },
+])
+
+// 当前选中的供应商
+const currentSupplier = ref<any>(null)
+const editingSupplier = ref<any>(null)
+
+// 对话框可见性
+const formVisible = ref(false)
+const detailVisible = ref(false)
+
+// 获取供应商列表
+const fetchSuppliers = async () => {
+  loading.value = true
+
+  try {
+    const params: any = {
+      page: pagination.current,
+      page_size: pagination.pageSize,
+      keyword: formModel.value.keyword || undefined,
+      status: formModel.value.status || undefined,
+    }
+
+    const res = await fetchSupplierList(params)
+
+    tableData.value = res.details?.data || []
+    pagination.total = res.details?.total || 0
+  } catch (error) {
+    console.error('获取供应商列表失败:', error)
+    Message.error('获取供应商列表失败')
+    tableData.value = []
+    pagination.total = 0
+  } finally {
+    loading.value = false
+  }
+}
+
+// 搜索
+const handleSearch = () => {
+  pagination.current = 1
+  fetchSuppliers()
+}
+
+// 处理表单模型更新
+const handleFormModelUpdate = (value: any) => {
+  formModel.value = value
+}
+
+// 重置
+const handleReset = () => {
+  formModel.value = {
+    keyword: '',
+    status: '',
+  }
+  pagination.current = 1
+  fetchSuppliers()
+}
+
+// 分页变化
+const handlePageChange = (current: number) => {
+  pagination.current = current
+  fetchSuppliers()
+}
+
+// 刷新
+const handleRefresh = () => {
+  fetchSuppliers()
+  Message.success('数据已刷新')
+}
+
+// 新增供应商
+const handleCreate = () => {
+  editingSupplier.value = null
+  formVisible.value = true
+}
+
+// 编辑供应商
+const handleEdit = (record: any) => {
+  editingSupplier.value = record
+  formVisible.value = true
+}
+
+// 详情
+const handleDetail = async (record: any) => {
+  try {
+    const res = await fetchSupplierDetail(record.id)
+    if (res.code === 0) {
+      currentSupplier.value = res.details
+      detailVisible.value = true
+    } else {
+      Message.error(res.message || '获取详情失败')
+    }
+  } catch (error) {
+    console.error('获取供应商详情失败:', error)
+    Message.error('获取详情失败')
+  }
+}
+
+// 删除供应商
+const handleDelete = async (record: any) => {
+  try {
+    Modal.confirm({
+      title: '确认删除',
+      content: `确认删除供应商 ${record.name} 吗？`,
+      onOk: async () => {
+        const res = await deleteSupplier(record.id)
+        if (res.code === 0) {
+          Message.success('删除成功')
+          fetchSuppliers()
+        } else {
+          Message.error(res.message || '删除失败')
+        }
+      },
+    })
+  } catch (error) {
+    console.error('删除供应商失败:', error)
+  }
+}
+
+// 表单成功回调
+const handleFormSuccess = () => {
+  formVisible.value = false
+  fetchSuppliers()
+}
+
+// 获取状态颜色
+const getStatusColor = (status: string) => {
+  const colorMap: Record<string, string> = {
+    active: 'green',
+    paused: 'orange',
+    blacklist: 'red',
+    inactive: 'gray',
+  }
+  return colorMap[status] || 'gray'
+}
+
+// 获取状态文本
+const getStatusText = (status: string) => {
+  const textMap: Record<string, string> = {
+    active: '合作中',
+    paused: '暂停合作',
+    blacklist: '黑名单',
+    inactive: '停止合作',
+  }
+  return textMap[status] || status
+}
+
+// 格式化金额
+const formatMoney = (value: number | string | null | undefined) => {
+  if (value === null || value === undefined || value === '') return '-'
+  const num = Number(value)
+  if (isNaN(num)) return '-'
+  return num.toLocaleString('zh-CN', {
+    style: 'currency',
+    currency: 'CNY',
+    minimumFractionDigits: 2,
+  })
+}
+
+// 格式化日期
+const formatDate = (dateStr?: string) => {
+  if (!dateStr) return '-'
+  const date = new Date(dateStr)
+  return date.toLocaleDateString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  })
+}
+
+// 初始化加载数据
+onMounted(() => {
+  fetchSuppliers()
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'SupplierManage',
+}
+</script>
+
+<style scoped lang="less">
+.container {
+  margin-top: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/ops/pages/dc/pc/components/QuickConfigDialog.vue b/src/views/ops/pages/dc/pc/components/QuickConfigDialog.vue
new file mode 100644
index 0000000..6e26b54
--- /dev/null
+++ b/src/views/ops/pages/dc/pc/components/QuickConfigDialog.vue
@@ -0,0 +1,90 @@
+<template>
+  <a-modal
+    :visible="visible"
+    title="快捷配置"
+    :mask-closable="false"
+    :ok-loading="loading"
+    @ok="handleSubmit"
+    @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%"
+          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>
+    </a-form>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+import { Message } from '@arco-design/web-vue'
+
+interface Props {
+  visible: boolean
+  record: any
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits(['update:visible', 'success'])
+
+const loading = ref(false)
+
+const form = ref({
+  remote_port: undefined as number | undefined,
+  agent_url: '',
+})
+
+watch(
+  () => props.visible,
+  (val) => {
+    if (val && props.record) {
+      form.value.remote_port = props.record.remote_port
+      form.value.agent_url = props.record.agent_url || ''
+    }
+  }
+)
+
+const handleSubmit = async () => {
+  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)
+  } catch (error) {
+    Message.error('配置失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleCancel = () => {
+  emit('update:visible', false)
+}
+</script>
diff --git a/src/views/ops/pages/dc/pc/config/columns.ts b/src/views/ops/pages/dc/pc/config/columns.ts
index 16e567c..85dbc6b 100644
--- a/src/views/ops/pages/dc/pc/config/columns.ts
+++ b/src/views/ops/pages/dc/pc/config/columns.ts
@@ -74,7 +74,7 @@ export const columns = [
   {
     dataIndex: 'actions',
     title: '操作',
-    width: 100,
+    width: 180,
     fixed: 'right' as const,
     slotName: 'actions',
   },
diff --git a/src/views/ops/pages/dc/pc/index.vue b/src/views/ops/pages/dc/pc/index.vue
index 517febf..b08a17c 100644
--- a/src/views/ops/pages/dc/pc/index.vue
+++ b/src/views/ops/pages/dc/pc/index.vue
@@ -99,46 +99,59 @@
         </a-tag>
       </template>
       
-      <!-- 操作栏 - 下拉菜单 -->
+      <!-- 操作栏 -->
       <template #actions="{ record }">
-        <a-dropdown trigger="hover">
-          <a-button type="primary" size="small">
-            管理
-            <icon-down />
+        <a-space>
+          <a-button
+            v-if="!record.agent_config"
+            type="outline"
+            size="small"
+            @click="handleQuickConfig(record)"
+          >
+            <template #icon>
+              <icon-settings />
+            </template>
+            快捷配置
           </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-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>
 
@@ -149,6 +162,13 @@
       @success="handleFormSuccess"
     />
 
+    <!-- 快捷配置对话框 -->
+    <QuickConfigDialog
+      v-model:visible="quickConfigVisible"
+      :record="currentRecord"
+      @success="handleFormSuccess"
+    />
+
   </div>
 </template>
 
@@ -163,7 +183,8 @@ import {
   IconDesktop,
   IconDelete,
   IconRefresh,
-  IconEye
+  IconEye,
+  IconSettings
 } from '@arco-design/web-vue/es/icon'
 import type { FormItem } from '@/components/search-form/types'
 import SearchTable from '@/components/search-table/index.vue'
@@ -174,6 +195,7 @@ import {
   deletePC,
 } from '@/api/ops/pc'
 import ServerFormDialog from './components/ServerFormDialog.vue'
+import QuickConfigDialog from './components/QuickConfigDialog.vue'
 import ServerDetail from './components/ServerDetail.vue'
 
 const router = useRouter()
@@ -313,6 +335,7 @@ const formModel = ref({
 })
 
 const formDialogVisible = ref(false)
+const quickConfigVisible = ref(false)
 const currentRecord = ref<any>(null)
 
 const pagination = reactive({
@@ -440,6 +463,12 @@ const handleAdd = () => {
   formDialogVisible.value = true
 }
 
+// 快捷配置
+const handleQuickConfig = (record: any) => {
+  currentRecord.value = record
+  quickConfigVisible.value = true
+}
+
 // 编辑PC
 const handleEdit = (record: any) => {
   currentRecord.value = record
diff --git a/src/views/ops/pages/dc/server/config/columns.ts b/src/views/ops/pages/dc/server/config/columns.ts
index 3db83b3..e835509 100644
--- a/src/views/ops/pages/dc/server/config/columns.ts
+++ b/src/views/ops/pages/dc/server/config/columns.ts
@@ -85,7 +85,7 @@ export const columns = [
   {
     dataIndex: 'actions',
     title: '操作',
-    width: 100,
+    width: 180,
     fixed: 'right' as const,
     slotName: 'actions',
   },
diff --git a/src/views/ops/pages/dc/server/index.vue b/src/views/ops/pages/dc/server/index.vue
index 43c9ab2..4435c7c 100644
--- a/src/views/ops/pages/dc/server/index.vue
+++ b/src/views/ops/pages/dc/server/index.vue
@@ -108,44 +108,57 @@
       
       <!-- 操作栏 - 下拉菜单 -->
       <template #actions="{ record }">
-        <a-dropdown trigger="hover">
-          <a-button type="primary" size="small">
-            管理
-            <icon-down />
+        <a-space>
+          <a-button
+            v-if="!record.agent_config"
+            type="outline"
+            size="small"
+            @click="handleQuickConfig(record)"
+          >
+            <template #icon>
+              <icon-settings />
+            </template>
+            快捷配置
           </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-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>
 
@@ -155,6 +168,13 @@
       :record="currentRecord"
       @success="handleFormSuccess"
     />
+
+    <!-- 快捷配置对话框 -->
+    <QuickConfigDialog
+      v-model:visible="quickConfigVisible"
+      :record="currentRecord"
+      @success="handleFormSuccess"
+    />
   </div>
 </template>
 
@@ -169,12 +189,14 @@ import {
   IconDesktop,
   IconDelete,
   IconRefresh,
-  IconEye
+  IconEye,
+  IconSettings
 } 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 ServerFormDialog from '../pc/components/ServerFormDialog.vue'
+import QuickConfigDialog from '../pc/components/QuickConfigDialog.vue'
 import { columns as columnsConfig } from './config/columns'
 import {
   fetchServerList,
@@ -391,6 +413,7 @@ const mockServerData = [
 const loading = ref(false)
 const tableData = ref<any[]>([])
 const formDialogVisible = ref(false)
+const quickConfigVisible = ref(false)
 const currentRecord = ref<any>(null)
 const formModel = ref({
   keyword: '',
@@ -524,6 +547,12 @@ const handleAdd = () => {
   formDialogVisible.value = true
 }
 
+// 快捷配置
+const handleQuickConfig = (record: any) => {
+  currentRecord.value = record
+  quickConfigVisible.value = true
+}
+
 // 编辑服务器
 const handleEdit = (record: any) => {
   currentRecord.value = record
diff --git a/src/views/ops/pages/kb/items/components/index.ts b/src/views/ops/pages/kb/items/components/index.ts
new file mode 100644
index 0000000..430a5ee
--- /dev/null
+++ b/src/views/ops/pages/kb/items/components/index.ts
@@ -0,0 +1,2 @@
+export { default as DocumentDetailDrawer } from './DocumentDetailDrawer.vue'
+export { default as DocumentFormModal } from './DocumentFormModal.vue'
\ No newline at end of file
diff --git a/src/views/ops/pages/kb/items/config/columns.ts b/src/views/ops/pages/kb/items/config/columns.ts
new file mode 100644
index 0000000..d940692
--- /dev/null
+++ b/src/views/ops/pages/kb/items/config/columns.ts
@@ -0,0 +1,92 @@
+/**
+ * 表格列配置 - 知识库文档
+ */
+import type { TableColumnData } from '@arco-design/web-vue/es/table/interface'
+import { getDocumentStatusText, getDocumentStatusColor, getDocumentTypeText } from './options'
+
+export const getColumns = (): TableColumnData[] => [
+  {
+    title: '序号',
+    dataIndex: 'index',
+    slotName: 'index',
+    width: 60,
+    align: 'center',
+  },
+  {
+    title: '文档编号',
+    dataIndex: 'doc_no',
+    width: 150,
+    ellipsis: true,
+    tooltip: true,
+  },
+  {
+    title: '文档标题',
+    dataIndex: 'title',
+    width: 200,
+    ellipsis: true,
+    tooltip: true,
+  },
+  {
+    title: '文档类型',
+    dataIndex: 'type',
+    slotName: 'type',
+    width: 120,
+    align: 'center',
+  },
+  {
+    title: '分类',
+    dataIndex: 'category_name',
+    width: 120,
+    ellipsis: true,
+    tooltip: true,
+  },
+  {
+    title: '作者',
+    dataIndex: 'author_name',
+    width: 100,
+    ellipsis: true,
+    tooltip: true,
+  },
+  {
+    title: '审核人',
+    dataIndex: 'reviewer_name',
+    width: 100,
+    ellipsis: true,
+    tooltip: true,
+  },
+  {
+    title: '发布时间',
+    dataIndex: 'published_at',
+    slotName: 'published_at',
+    width: 160,
+    align: 'center',
+  },
+  {
+    title: '版本号',
+    dataIndex: 'version',
+    width: 80,
+    align: 'center',
+  },
+  {
+    title: '浏览次数',
+    dataIndex: 'view_count',
+    width: 90,
+    align: 'center',
+  },
+  {
+    title: '文档状态',
+    dataIndex: 'status',
+    slotName: 'status',
+    width: 110,
+    align: 'center',
+    fixed: 'right',
+  },
+  {
+    title: '操作',
+    dataIndex: 'operation',
+    slotName: 'operation',
+    width: 200,
+    align: 'center',
+    fixed: 'right',
+  },
+]
\ No newline at end of file
diff --git a/src/views/ops/pages/kb/items/config/filters.ts b/src/views/ops/pages/kb/items/config/filters.ts
new file mode 100644
index 0000000..82ef5df
--- /dev/null
+++ b/src/views/ops/pages/kb/items/config/filters.ts
@@ -0,0 +1,31 @@
+/**
+ * 筛选项配置 - 知识库文档
+ */
+import type { FormItem } from '@/components/search-form/types'
+import { documentTypeOptions, documentStatusOptions } from './options'
+
+export const getFilters = (): FormItem[] => [
+  {
+    label: '关键词',
+    field: 'keyword',
+    type: 'input',
+    placeholder: '搜索文档标题、描述或关键字',
+    span: 6,
+  },
+  {
+    label: '文档类型',
+    field: 'type',
+    type: 'select',
+    placeholder: '请选择文档类型',
+    options: documentTypeOptions,
+    span: 4,
+  },
+  {
+    label: '文档状态',
+    field: 'status',
+    type: 'select',
+    placeholder: '请选择文档状态',
+    options: documentStatusOptions,
+    span: 4,
+  },
+]
\ No newline at end of file
diff --git a/src/views/ops/pages/kb/items/config/options.ts b/src/views/ops/pages/kb/items/config/options.ts
new file mode 100644
index 0000000..4e3ea39
--- /dev/null
+++ b/src/views/ops/pages/kb/items/config/options.ts
@@ -0,0 +1,62 @@
+/**
+ * 选项配置 - 知识库文档
+ */
+
+// 文档类型选项
+export const documentTypeOptions = [
+  { label: '通用文档', value: 'common' },
+  { label: '操作指南', value: 'guide' },
+  { label: '解决方案', value: 'solution' },
+  { label: '故障排查', value: 'troubleshoot' },
+  { label: '流程规范', value: 'process' },
+  { label: '技术文档', value: 'technical' },
+];
+
+// 文档状态选项
+export const documentStatusOptions = [
+  { label: '草稿', value: 'draft' },
+  { label: '已发布', value: 'published' },
+  { label: '已审核', value: 'reviewed' },
+  { label: '未通过审核', value: 'rejected' },
+];
+
+// 列表类型选项
+export const listTypeOptions = [
+  { label: '我的', value: 'mine' },
+  { label: '全部', value: 'all' },
+];
+
+// 获取文档状态文本
+export const getDocumentStatusText = (status: string): string => {
+  const statusMap: Record<string, string> = {
+    draft: '草稿',
+    published: '已发布',
+    reviewed: '已审核',
+    rejected: '未通过审核',
+  };
+  return statusMap[status] || status;
+};
+
+// 获取文档状态颜色
+export const getDocumentStatusColor = (status: string): string => {
+  const colorMap: Record<string, string> = {
+    draft: 'gray',
+    published: 'blue',
+    reviewed: 'green',
+    rejected: 'red',
+  };
+  return colorMap[status] || 'gray';
+};
+
+// 获取文档类型文本
+export const getDocumentTypeText = (type: string): string => {
+  const typeMap: Record<string, string> = {
+    common: '通用文档',
+    guide: '操作指南',
+    solution: '解决方案',
+    troubleshoot: '故障排查',
+    process: '流程规范',
+    technical: '技术文档',
+  };
+  return typeMap[type] || type;
+};
\ No newline at end of file
diff --git a/src/views/ops/pages/kb/items/index.vue b/src/views/ops/pages/kb/items/index.vue
new file mode 100644
index 0000000..b33646d
--- /dev/null
+++ b/src/views/ops/pages/kb/items/index.vue
@@ -0,0 +1,1088 @@
+<template>
+  <div class="kb-container">
+    <Breadcrumb :items="['知识管理', '知识库文档']" />
+    
+    <div class="kb-content">
+      <!-- 左侧：文档列表 -->
+      <div class="kb-left-panel">
+        <a-card class="general-card" :body-style="{ padding: '12px' }">
+          <!-- 标签页切换 -->
+          <a-tabs v-model:active-key="activeTab" size="small" @change="handleTabChange">
+            <a-tab-pane key="mine" title="我的" />
+            <a-tab-pane key="all" title="全部" />
+          </a-tabs>
+
+          <!-- 搜索框 -->
+          <a-input-search
+            v-model="searchKeyword"
+            placeholder="搜索文档..."
+            allow-clear
+            @search="handleSearch"
+            @press-enter="handleSearch"
+          />
+
+          <!-- 工具栏 -->
+          <div class="list-toolbar">
+            <a-button type="primary" size="small" @click="handleCreate">
+              <template #icon><icon-plus /></template>
+              新建
+            </a-button>
+            <a-button size="small" @click="fetchData">
+              <template #icon><icon-refresh /></template>
+            </a-button>
+          </div>
+
+          <!-- 文档列表 -->
+          <div class="document-list">
+            <a-spin :loading="loading" style="width: 100%">
+              <a-empty v-if="documentList.length === 0" description="暂无文档" />
+              <div
+                v-for="doc in documentList"
+                :key="doc.id"
+                class="document-item"
+                :class="{ active: currentDocument?.id === doc.id }"
+                @click="handleSelectDocument(doc)"
+              >
+                <div class="doc-title">
+                  <icon-file class="doc-icon" />
+                  <span class="title-text">{{ doc.title }}</span>
+                </div>
+                <div class="doc-meta">
+                  <a-tag :color="getStatusColor(doc.status)" size="small">
+                    {{ getStatusText(doc.status) }}
+                  </a-tag>
+                  <span class="doc-time">{{ formatDate(doc.updated_at) }}</span>
+                </div>
+              </div>
+            </a-spin>
+          </div>
+
+          <!-- 分页 -->
+          <div class="list-pagination">
+            <a-pagination
+              v-model:current="page"
+              :total="total"
+              :page-size="pageSize"
+              size="small"
+              simple
+              @change="handlePageChange"
+            />
+          </div>
+        </a-card>
+      </div>
+
+      <!-- 右侧：Markdown编辑器 -->
+      <div class="kb-right-panel">
+        <a-card class="general-card editor-card">
+          <template #title>
+            <div class="editor-header">
+              <a-input
+                v-if="isEditing"
+                v-model="editForm.title"
+                placeholder="请输入文档标题"
+                :max-length="200"
+                class="title-input"
+              />
+              <span v-else class="title-text">
+                {{ currentDocument?.title || '请选择或新建文档' }}
+              </span>
+            </div>
+          </template>
+          <template #extra>
+            <a-space v-if="currentDocument || isEditing">
+              <!-- 编辑模式切换 -->
+              <a-button-group>
+                <a-button
+                  :type="editorMode === 'edit' ? 'primary' : 'secondary'"
+                  size="small"
+                  @click="editorMode = 'edit'"
+                >
+                  编辑
+                </a-button>
+                <a-button
+                  :type="editorMode === 'preview' ? 'primary' : 'secondary'"
+                  size="small"
+                  @click="editorMode = 'preview'"
+                >
+                  预览
+                </a-button>
+                <a-button
+                  :type="editorMode === 'split' ? 'primary' : 'secondary'"
+                  size="small"
+                  @click="editorMode = 'split'"
+                >
+                  分栏
+                </a-button>
+              </a-button-group>
+              
+              <!-- 操作按钮 -->
+              <template v-if="isEditing">
+                <a-button type="primary" size="small" :loading="saving" @click="handleSave">
+                  保存
+                </a-button>
+                <a-button size="small" @click="handleCancelEdit">
+                  取消
+                </a-button>
+              </template>
+              <template v-else-if="currentDocument">
+                <a-button
+                  v-if="activeTab === 'mine'"
+                  type="primary"
+                  size="small"
+                  @click="handleStartEdit"
+                >
+                  编辑
+                </a-button>
+                <a-button
+                  v-if="activeTab === 'mine' && (currentDocument.status === 'draft' || currentDocument.status === 'rejected')"
+                  size="small"
+                  @click="handlePublish"
+                >
+                  发布
+                </a-button>
+                <a-button
+                  v-if="currentDocument.status === 'reviewed'"
+                  :type="isFavorited ? 'primary' : 'secondary'"
+                  size="small"
+                  @click="handleToggleFavorite"
+                >
+                  <template #icon>
+                    <icon-star-fill v-if="isFavorited" />
+                    <icon-star v-else />
+                  </template>
+                </a-button>
+                <a-button size="small" @click="handleDownload">
+                  <template #icon><icon-download /></template>
+                </a-button>
+                <a-button
+                  v-if="activeTab === 'mine'"
+                  size="small"
+                  status="danger"
+                  @click="handleDelete"
+                >
+                  删除
+                </a-button>
+              </template>
+            </a-space>
+          </template>
+
+          <!-- 编辑器内容 -->
+          <div class="editor-content">
+            <template v-if="currentDocument || isEditing">
+              <!-- 文档元信息 -->
+              <div v-if="!isEditing && currentDocument" class="doc-info">
+                <a-descriptions :column="4" size="small">
+                  <a-descriptions-item label="类型">
+                    <a-tag :color="getTypeColor(currentDocument.type)" size="small">
+                      {{ getTypeText(currentDocument.type) }}
+                    </a-tag>
+                  </a-descriptions-item>
+                  <a-descriptions-item label="作者">{{ currentDocument.author_name }}</a-descriptions-item>
+                  <a-descriptions-item label="更新时间">{{ formatTime(currentDocument.updated_at) }}</a-descriptions-item>
+                  <a-descriptions-item label="浏览">{{ currentDocument.view_count }}次</a-descriptions-item>
+                </a-descriptions>
+              </div>
+
+              <!-- 编辑表单 -->
+              <div v-if="isEditing" class="edit-form">
+                <a-form :model="editForm" layout="inline" size="small">
+                  <a-form-item label="类型">
+                    <a-select v-model="editForm.type" style="width: 120px">
+                      <a-option v-for="item in documentTypeOptions" :key="item.value" :value="item.value">
+                        {{ item.label }}
+                      </a-option>
+                    </a-select>
+                  </a-form-item>
+                  <a-form-item label="分类">
+                    <a-select
+                      v-model="editForm.category_id"
+                      placeholder="选择分类"
+                      allow-clear
+                      style="width: 150px"
+                    >
+                      <a-option v-for="item in categoryOptions" :key="item.value" :value="item.value">
+                        {{ item.label }}
+                      </a-option>
+                    </a-select>
+                  </a-form-item>
+                </a-form>
+              </div>
+
+              <!-- Markdown编辑/预览区域 -->
+              <div class="markdown-area" :class="editorMode">
+                <!-- 编辑区 -->
+                <div v-show="editorMode === 'edit' || editorMode === 'split'" class="editor-pane">
+                  <!-- 工具栏 -->
+                  <div class="md-toolbar">
+                    <a-space>
+                      <a-tooltip content="加粗 (Ctrl+B)">
+                        <a-button size="mini" @click="insertFormat('bold')">
+                          <template #icon><icon-bold /></template>
+                        </a-button>
+                      </a-tooltip>
+                      <a-tooltip content="斜体 (Ctrl+I)">
+                        <a-button size="mini" @click="insertFormat('italic')">
+                          <template #icon><icon-italic /></template>
+                        </a-button>
+                      </a-tooltip>
+                      <a-divider direction="vertical" />
+                      <a-tooltip content="标题">
+                        <a-dropdown @select="insertHeading">
+                          <a-button size="mini">
+                            <template #icon><icon-edit /></template>
+                          </a-button>
+                          <template #content>
+                            <a-doption value="h1">一级标题</a-doption>
+                            <a-doption value="h2">二级标题</a-doption>
+                            <a-doption value="h3">三级标题</a-doption>
+                          </template>
+                        </a-dropdown>
+                      </a-tooltip>
+                      <a-tooltip content="代码块">
+                        <a-button size="mini" @click="insertFormat('code')">
+                          <template #icon><icon-code /></template>
+                        </a-button>
+                      </a-tooltip>
+                      <a-tooltip content="链接">
+                        <a-button size="mini" @click="insertFormat('link')">
+                          <template #icon><icon-link /></template>
+                        </a-button>
+                      </a-tooltip>
+                      <a-tooltip content="列表">
+                        <a-button size="mini" @click="insertFormat('list')">
+                          <template #icon><icon-list /></template>
+                        </a-button>
+                      </a-tooltip>
+                    </a-space>
+                  </div>
+                  <!-- 文本编辑区 -->
+                  <a-textarea
+                    ref="editorRef"
+                    v-model="editContent"
+                    :auto-size="{ minRows: 20, maxRows: 40 }"
+                    placeholder="请输入文档内容，支持Markdown格式..."
+                    class="md-editor"
+                  />
+                </div>
+                <!-- 预览区 -->
+                <div v-show="editorMode === 'preview' || editorMode === 'split'" class="preview-pane">
+                  <div class="md-preview" v-html="renderedContent"></div>
+                </div>
+              </div>
+            </template>
+            <a-empty v-else description="请从左侧选择文档或新建文档" />
+          </div>
+        </a-card>
+      </div>
+    </div>
+
+    <!-- 删除确认对话框 -->
+    <a-modal
+      v-model:visible="deleteConfirmVisible"
+      title="删除确认"
+      @ok="handleConfirmDelete"
+      @cancel="deleteConfirmVisible = false"
+    >
+      <p>确定要删除文档「{{ currentDocument?.title }}」吗？</p>
+      <p style="color: rgb(var(--warning-6))">删除后文档将移入回收站。</p>
+    </a-modal>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, computed, watch, onMounted, nextTick } from 'vue'
+import { Message } from '@arco-design/web-vue'
+import {
+  IconPlus,
+  IconRefresh,
+  IconFile,
+  IconBold,
+  IconItalic,
+  IconCode,
+  IconLink,
+  IconList,
+  IconDownload,
+  IconStar,
+  IconStarFill,
+  IconEdit,
+} from '@arco-design/web-vue/es/icon'
+import dayjs from 'dayjs'
+import type { Document, DocumentStatus, DocumentType, FetchDocumentListParams } from '@/api/kb/document'
+import {
+  fetchMyDocumentList,
+  fetchApprovedDocumentList,
+  fetchDocumentDetail,
+  createDocument,
+  updateDocument,
+  publishDocument,
+  moveToTrash,
+  favoriteDocument,
+  unfavoriteDocument,
+  checkFavorite,
+} from '@/api/kb/document'
+import { fetchCategoryList } from '@/api/kb/category'
+import { documentTypeOptions } from './config/options'
+
+// 当前标签页
+const activeTab = ref<'mine' | 'all'>('mine')
+
+// 搜索
+const searchKeyword = ref('')
+
+// 文档列表
+const documentList = ref<Document[]>([])
+const loading = ref(false)
+const page = ref(1)
+const pageSize = ref(20)
+const total = ref(0)
+
+// 当前选中的文档
+const currentDocument = ref<Document | null>(null)
+const isFavorited = ref(false)
+
+// 编辑状态
+const isEditing = ref(false)
+const saving = ref(false)
+const editForm = reactive({
+  title: '',
+  type: 'common' as DocumentType,
+  category_id: undefined as number | undefined,
+  description: '',
+})
+const editContent = ref('')
+const editorRef = ref()
+
+// 编辑器模式
+const editorMode = ref<'edit' | 'preview' | 'split'>('split')
+
+// 分类选项
+const categoryOptions = ref<{ label: string; value: number }[]>([])
+
+// 删除确认
+const deleteConfirmVisible = ref(false)
+
+// 渲染Markdown内容
+const renderedContent = computed(() => {
+  const content = isEditing.value ? editContent.value : currentDocument.value?.content
+  if (!content) return ''
+  
+  let html = content
+  // 标题
+  html = html.replace(/^### (.*$)/gim, '<h3>$1</h3>')
+  html = html.replace(/^## (.*$)/gim, '<h2>$1</h2>')
+  html = html.replace(/^# (.*$)/gim, '<h1>$1</h1>')
+  // 粗体
+  html = html.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+  // 斜体
+  html = html.replace(/\*(.*?)\*/g, '<em>$1</em>')
+  // 代码块
+  html = html.replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>')
+  // 行内代码
+  html = html.replace(/`(.*?)`/g, '<code>$1</code>')
+  // 链接
+  html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank">$1</a>')
+  // 列表
+  html = html.replace(/^\- (.*$)/gim, '<li>$1</li>')
+  html = html.replace(/^\d+\. (.*$)/gim, '<li>$1</li>')
+  // 段落
+  html = html.replace(/\n\n/g, '</p><p>')
+  html = `<p>${html}</p>`
+  return html
+})
+
+// 获取文档列表
+const fetchData = async () => {
+  try {
+    loading.value = true
+    const params: FetchDocumentListParams = {
+      page: page.value,
+      page_size: pageSize.value,
+      keyword: searchKeyword.value || undefined,
+    }
+    
+    console.log('fetchData params:', params, 'activeTab:', activeTab.value)
+    
+    const res: any = activeTab.value === 'mine'
+      ? await fetchMyDocumentList(params)
+      : await fetchApprovedDocumentList(params)
+    
+    console.log('fetchData response:', res)
+    
+    // 兼容多种API响应格式
+    if (res?.code === 0) {
+      // 格式1: res.details.data
+      if (res.details?.data) {
+        documentList.value = res.details.data || []
+        total.value = res.details.total || 0
+      }
+      // 格式2: res.data.data
+      else if (res.data?.data) {
+        documentList.value = res.data.data || []
+        total.value = res.data.total || 0
+      }
+      // 格式3: res.data 是数组
+      else if (Array.isArray(res.data)) {
+        documentList.value = res.data
+        total.value = res.data.length
+      }
+      // 格式4: res.details 是数组
+      else if (Array.isArray(res.details)) {
+        documentList.value = res.details
+        total.value = res.details.length
+      }
+      else {
+        documentList.value = []
+        total.value = 0
+      }
+    } else {
+      documentList.value = []
+      total.value = 0
+    }
+    
+    console.log('documentList:', documentList.value, 'total:', total.value)
+  } catch (error) {
+    console.error('获取文档列表失败:', error)
+    documentList.value = []
+    total.value = 0
+  } finally {
+    loading.value = false
+  }
+}
+
+// 加载分类
+const loadCategories = async () => {
+  try {
+    const res: any = await fetchCategoryList({ type: 'document' })
+    if (res?.code === 0) {
+      categoryOptions.value = res.details.data.map((item: any) => ({
+        label: item.name,
+        value: item.id,
+      }))
+    }
+  } catch (error) {
+    console.error('加载分类失败:', error)
+  }
+}
+
+// 标签页切换
+const handleTabChange = () => {
+  page.value = 1
+  currentDocument.value = null
+  isEditing.value = false
+  fetchData()
+}
+
+// 搜索
+const handleSearch = () => {
+  page.value = 1
+  fetchData()
+}
+
+// 分页
+const handlePageChange = (current: number) => {
+  page.value = current
+  fetchData()
+}
+
+// 选择文档
+const handleSelectDocument = async (doc: Document) => {
+  if (isEditing.value) {
+    // 如果正在编辑，提示保存
+    Message.warning('请先保存或取消当前编辑')
+    return
+  }
+  
+  try {
+    loading.value = true
+    const res: any = await fetchDocumentDetail(doc.id)
+    if (res?.code === 0 && res.details) {
+      currentDocument.value = res.details
+      
+      // 检查收藏状态
+      if (res.details.status === 'reviewed') {
+        try {
+          const favRes: any = await checkFavorite(doc.id)
+          isFavorited.value = favRes?.details?.is_favorited || false
+        } catch {
+          isFavorited.value = false
+        }
+      }
+    }
+  } catch (error) {
+    console.error('获取文档详情失败:', error)
+    Message.error('获取文档详情失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 新建文档
+const handleCreate = () => {
+  currentDocument.value = null
+  isFavorited.value = false
+  editForm.title = ''
+  editForm.type = 'common'
+  editForm.category_id = undefined
+  editForm.description = ''
+  editContent.value = ''
+  isEditing.value = true
+  editorMode.value = 'edit'
+  loadCategories()
+}
+
+// 开始编辑
+const handleStartEdit = () => {
+  if (!currentDocument.value) return
+  
+  editForm.title = currentDocument.value.title
+  editForm.type = currentDocument.value.type
+  editForm.category_id = currentDocument.value.category_id
+  editForm.description = currentDocument.value.description || ''
+  editContent.value = currentDocument.value.content
+  isEditing.value = true
+  loadCategories()
+}
+
+// 取消编辑
+const handleCancelEdit = () => {
+  isEditing.value = false
+  if (currentDocument.value) {
+    // 恢复原始内容
+    editContent.value = currentDocument.value.content
+  }
+}
+
+// 保存文档
+const handleSave = async () => {
+  if (!editForm.title.trim()) {
+    Message.warning('请输入文档标题')
+    return
+  }
+  if (!editContent.value.trim()) {
+    Message.warning('请输入文档内容')
+    return
+  }
+  
+  try {
+    saving.value = true
+    const data = {
+      title: editForm.title,
+      type: editForm.type,
+      category_id: editForm.category_id,
+      description: editForm.description,
+      content: editContent.value,
+    }
+    
+    if (currentDocument.value?.id) {
+      // 更新
+      await updateDocument({ ...data, id: currentDocument.value.id })
+      Message.success('更新成功')
+    } else {
+      // 新建
+      await createDocument(data)
+      Message.success('创建成功')
+    }
+    
+    isEditing.value = false
+    await fetchData()
+    
+    // 重新加载当前文档
+    if (currentDocument.value?.id) {
+      const res: any = await fetchDocumentDetail(currentDocument.value.id)
+      if (res?.code === 0) {
+        currentDocument.value = res.details
+      }
+    }
+  } catch (error) {
+    console.error('保存失败:', error)
+    Message.error('保存失败')
+  } finally {
+    saving.value = false
+  }
+}
+
+// 发布文档
+const handlePublish = async () => {
+  if (!currentDocument.value) return
+  
+  try {
+    await publishDocument(currentDocument.value.id)
+    Message.success('发布成功，等待审核')
+    await fetchData()
+    // 重新加载当前文档
+    const res: any = await fetchDocumentDetail(currentDocument.value.id)
+    if (res?.code === 0) {
+      currentDocument.value = res.details
+    }
+  } catch (error) {
+    console.error('发布失败:', error)
+    Message.error('发布失败')
+  }
+}
+
+// 切换收藏
+const handleToggleFavorite = async () => {
+  if (!currentDocument.value) return
+  
+  try {
+    if (isFavorited.value) {
+      await unfavoriteDocument(currentDocument.value.id)
+      Message.success('已取消收藏')
+    } else {
+      await favoriteDocument(currentDocument.value.id)
+      Message.success('收藏成功')
+    }
+    isFavorited.value = !isFavorited.value
+  } catch (error) {
+    console.error('操作失败:', error)
+    Message.error('操作失败')
+  }
+}
+
+// 下载文档
+const handleDownload = () => {
+  if (!currentDocument.value) return
+  
+  const content = `# ${currentDocument.value.title}\n\n` +
+    `文档编号: ${currentDocument.value.doc_no}\n` +
+    `作者: ${currentDocument.value.author_name}\n` +
+    `创建时间: ${formatTime(currentDocument.value.created_at)}\n\n` +
+    `## 描述\n\n${currentDocument.value.description || '无'}\n\n` +
+    `## 内容\n\n${currentDocument.value.content}`
+  
+  const blob = new Blob([content], { type: 'text/markdown;charset=utf-8' })
+  const url = URL.createObjectURL(blob)
+  const link = window.document.createElement('a')
+  link.href = url
+  link.download = `${currentDocument.value.title}.md`
+  window.document.body.appendChild(link)
+  link.click()
+  window.document.body.removeChild(link)
+  URL.revokeObjectURL(url)
+  
+  Message.success('下载成功')
+}
+
+// 删除文档
+const handleDelete = () => {
+  deleteConfirmVisible.value = true
+}
+
+// 确认删除
+const handleConfirmDelete = async () => {
+  if (!currentDocument.value?.id) return
+  
+  try {
+    await moveToTrash(currentDocument.value.id)
+    Message.success('删除成功，已移入回收站')
+    deleteConfirmVisible.value = false
+    currentDocument.value = null
+    await fetchData()
+  } catch (error) {
+    console.error('删除失败:', error)
+    Message.error('删除失败')
+  }
+}
+
+// 插入格式
+const insertFormat = (type: string) => {
+  const textarea = editorRef.value?.$el?.querySelector('textarea')
+  if (!textarea) return
+  
+  const start = textarea.selectionStart
+  const end = textarea.selectionEnd
+  const selectedText = editContent.value.substring(start, end)
+  let newText = ''
+  
+  switch (type) {
+    case 'bold':
+      newText = `**${selectedText || '粗体文本'}**`
+      break
+    case 'italic':
+      newText = `*${selectedText || '斜体文本'}*`
+      break
+    case 'code':
+      newText = selectedText.includes('\n')
+        ? `\`\`\`\n${selectedText || '代码块'}\n\`\`\``
+        : `\`${selectedText || '代码'}\``
+      break
+    case 'link':
+      newText = `[${selectedText || '链接文本'}](url)`
+      break
+    case 'list':
+      newText = `\n- ${selectedText || '列表项'}`
+      break
+    default:
+      newText = selectedText
+  }
+  
+  editContent.value =
+    editContent.value.substring(0, start) +
+    newText +
+    editContent.value.substring(end)
+  
+  nextTick(() => {
+    textarea.focus()
+    const newCursorPos = start + newText.length
+    textarea.setSelectionRange(newCursorPos, newCursorPos)
+  })
+}
+
+// 插入标题
+const insertHeading = (level: string | number) => {
+  const textarea = editorRef.value?.$el?.querySelector('textarea')
+  if (!textarea) return
+  
+  const start = textarea.selectionStart
+  const prefix = level === 'h1' ? '# ' : level === 'h2' ? '## ' : '### '
+  const selectedText = editContent.value.substring(start, textarea.selectionEnd)
+  
+  editContent.value =
+    editContent.value.substring(0, start) +
+    prefix +
+    (selectedText || '标题') +
+    editContent.value.substring(textarea.selectionEnd)
+}
+
+// 格式化函数
+const formatTime = (time: string | null): string => {
+  return time ? dayjs(time).format('YYYY-MM-DD HH:mm') : '-'
+}
+
+const formatDate = (time: string | null): string => {
+  return time ? dayjs(time).format('MM-DD HH:mm') : '-'
+}
+
+const getStatusText = (status: DocumentStatus): string => {
+  const map: Record<DocumentStatus, string> = {
+    draft: '草稿',
+    published: '已发布',
+    reviewed: '已审核',
+    rejected: '未通过',
+  }
+  return map[status] || status
+}
+
+const getStatusColor = (status: DocumentStatus): string => {
+  const map: Record<DocumentStatus, string> = {
+    draft: 'gray',
+    published: 'blue',
+    reviewed: 'green',
+    rejected: 'red',
+  }
+  return map[status] || 'gray'
+}
+
+const getTypeText = (type: DocumentType): string => {
+  const map: Record<DocumentType, string> = {
+    common: '通用',
+    guide: '指南',
+    solution: '方案',
+    troubleshoot: '排查',
+    process: '流程',
+    technical: '技术',
+  }
+  return map[type] || type
+}
+
+const getTypeColor = (type: DocumentType): string => {
+  const map: Record<DocumentType, string> = {
+    common: 'gray',
+    guide: 'blue',
+    solution: 'green',
+    troubleshoot: 'orange',
+    process: 'purple',
+    technical: 'cyan',
+  }
+  return map[type] || 'gray'
+}
+
+// 初始化
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'KbItems',
+}
+</script>
+
+<style scoped lang="less">
+.kb-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 0 20px 20px;
+}
+
+.kb-content {
+  flex: 1;
+  display: flex;
+  gap: 16px;
+  min-height: 0;
+  margin-top: 16px;
+}
+
+.kb-left-panel {
+  width: 320px;
+  flex-shrink: 0;
+  
+  .general-card {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    
+    :deep(.arco-card-body) {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+      overflow: hidden;
+    }
+  }
+  
+  .list-toolbar {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 12px;
+    margin-bottom: 12px;
+    flex-shrink: 0;
+  }
+  
+  .document-list {
+    flex: 1;
+    overflow-y: auto;
+    min-height: 100px;
+  }
+  
+  .document-item {
+    padding: 10px 12px;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s;
+    margin-bottom: 4px;
+    
+    &:hover {
+      background-color: var(--color-fill-2);
+    }
+    
+    &.active {
+      background-color: rgb(var(--primary-1));
+      border-left: 3px solid rgb(var(--primary-6));
+    }
+    
+    .doc-title {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 6px;
+      
+      .doc-icon {
+        color: var(--color-text-3);
+        flex-shrink: 0;
+      }
+      
+      .title-text {
+        font-weight: 500;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+    
+    .doc-meta {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      
+      .doc-time {
+        font-size: 12px;
+        color: var(--color-text-3);
+      }
+    }
+  }
+  
+  .list-pagination {
+    margin-top: 12px;
+    display: flex;
+    justify-content: center;
+    flex-shrink: 0;
+    padding-top: 8px;
+  }
+}
+
+.kb-right-panel {
+  flex: 1;
+  min-width: 0;
+  
+  .editor-card {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    
+    :deep(.arco-card-body) {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      padding: 12px;
+      min-height: 0;
+    }
+  }
+  
+  .editor-header {
+    .title-input {
+      font-size: 16px;
+      font-weight: 600;
+    }
+    
+    .title-text {
+      font-size: 16px;
+      font-weight: 600;
+    }
+  }
+  
+  .editor-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+  
+  .doc-info {
+    margin-bottom: 12px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid var(--color-border);
+  }
+  
+  .edit-form {
+    margin-bottom: 12px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid var(--color-border);
+  }
+  
+  .markdown-area {
+    flex: 1;
+    display: flex;
+    gap: 12px;
+    min-height: 0;
+    
+    &.edit .editor-pane {
+      flex: 1;
+    }
+    
+    &.preview .preview-pane {
+      flex: 1;
+    }
+    
+    &.split {
+      .editor-pane,
+      .preview-pane {
+        flex: 1;
+      }
+    }
+  }
+  
+  .editor-pane {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    
+    .md-toolbar {
+      padding: 8px;
+      background-color: var(--color-fill-1);
+      border: 1px solid var(--color-border);
+      border-bottom: none;
+      border-radius: 4px 4px 0 0;
+    }
+    
+    .md-editor {
+      flex: 1;
+      border-radius: 0 0 4px 4px;
+      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+      font-size: 14px;
+      line-height: 1.6;
+    }
+  }
+  
+  .preview-pane {
+    min-width: 0;
+    overflow: auto;
+    border: 1px solid var(--color-border);
+    border-radius: 4px;
+    
+    .md-preview {
+      padding: 16px;
+      line-height: 1.8;
+      color: var(--color-text-1);
+      
+      :deep(h1) {
+        font-size: 24px;
+        font-weight: 600;
+        margin: 16px 0;
+        padding-bottom: 8px;
+        border-bottom: 1px solid var(--color-border);
+      }
+      
+      :deep(h2) {
+        font-size: 20px;
+        font-weight: 600;
+        margin: 14px 0;
+      }
+      
+      :deep(h3) {
+        font-size: 16px;
+        font-weight: 600;
+        margin: 12px 0;
+      }
+      
+      :deep(p) {
+        margin: 8px 0;
+      }
+      
+      :deep(code) {
+        background-color: var(--color-fill-3);
+        padding: 2px 6px;
+        border-radius: 4px;
+        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+        font-size: 13px;
+      }
+      
+      :deep(pre) {
+        background-color: var(--color-fill-2);
+        padding: 12px;
+        border-radius: 4px;
+        overflow-x: auto;
+        
+        code {
+          background: none;
+          padding: 0;
+        }
+      }
+      
+      :deep(a) {
+        color: rgb(var(--primary-6));
+        text-decoration: none;
+        
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+      
+      :deep(li) {
+        margin: 4px 0;
+        margin-left: 20px;
+      }
+      
+      :deep(blockquote) {
+        margin: 8px 0;
+        padding: 8px 16px;
+        border-left: 4px solid rgb(var(--primary-6));
+        background-color: var(--color-fill-1);
+        color: var(--color-text-2);
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/ops/pages/kb/recycle/index.vue b/src/views/ops/pages/kb/recycle/index.vue
new file mode 100644
index 0000000..8d872fb
--- /dev/null
+++ b/src/views/ops/pages/kb/recycle/index.vue
@@ -0,0 +1,350 @@
+<template>
+  <div class="container">
+    <Breadcrumb :items="['知识管理', '回收站']" />
+
+    <a-card class="general-card">
+      <!-- 搜索表单 -->
+      <SearchForm
+        :model-value="searchForm"
+        :form-items="filters"
+        @update:model-value="handleFormModelUpdate"
+        @search="handleSearch"
+        @reset="handleReset"
+      />
+
+      <a-divider style="margin-top: 0" />
+
+      <!-- 数据表格 -->
+      <DataTable
+        :data="tableData"
+        :columns="columns"
+        :loading="loading"
+        :pagination="{
+          current: page,
+          pageSize,
+          total,
+        }"
+        :show-download="false"
+        @page-change="handlePageChange"
+        @refresh="fetchData"
+      >
+        <!-- 序号列 -->
+        <template #index="{ rowIndex }">
+          {{ rowIndex + 1 + (page - 1) * pageSize }}
+        </template>
+
+        <!-- 资源类型列 -->
+        <template #resource_type="{ record }">
+          <a-tag :color="getResourceTypeColor(record.resource_type)">
+            {{ getResourceTypeText(record.resource_type) }}
+          </a-tag>
+        </template>
+
+        <!-- 删除时间列 -->
+        <template #deleted_time="{ record }">
+          {{ formatTime(record.deleted_time) }}
+        </template>
+
+        <!-- 删除人列 -->
+        <template #deleted_name="{ record }">
+          {{ record.deleted_name || '-' }}
+        </template>
+
+        <!-- 操作列 -->
+        <template #operation="{ record }">
+          <a-space>
+            <a-button type="text" size="small" @click="handleRestore(record)">
+              恢复
+            </a-button>
+            <a-button
+              type="text"
+              size="small"
+              status="danger"
+              @click="handleDelete(record)"
+            >
+              彻底删除
+            </a-button>
+          </a-space>
+        </template>
+      </DataTable>
+    </a-card>
+
+    <!-- 恢复确认对话框 -->
+    <a-modal
+      v-model:visible="restoreConfirmVisible"
+      title="恢复确认"
+      @ok="handleConfirmRestore"
+      @cancel="restoreConfirmVisible = false"
+    >
+      <p>
+        确定要恢复「{{ recordToRestore?.resource_name }}」吗？
+      </p>
+      <p style="color: rgb(var(--primary-6))">恢复后资源将回到正常状态。</p>
+    </a-modal>
+
+    <!-- 彻底删除确认对话框 -->
+    <a-modal
+      v-model:visible="deleteConfirmVisible"
+      title="彻底删除确认"
+      @ok="handleConfirmDelete"
+      @cancel="deleteConfirmVisible = false"
+    >
+      <p>
+        确定要彻底删除「{{ recordToDelete?.resource_name }}」吗？
+      </p>
+      <p style="color: rgb(var(--danger-6))">
+        警告：此操作不可恢复，删除后将无法找回！
+      </p>
+    </a-modal>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, computed, onMounted } from 'vue'
+import { Message } from '@arco-design/web-vue'
+import dayjs from 'dayjs'
+import SearchForm from '@/components/search-form/index.vue'
+import DataTable from '@/components/data-table/index.vue'
+import type { FormItem } from '@/components/search-form/types'
+import type { TableColumnData } from '@arco-design/web-vue/es/table/interface'
+import type { TrashRecord, FetchTrashListParams } from '@/api/kb/trash'
+import {
+  fetchTrashList,
+  restoreTrash,
+  deleteTrash,
+  getResourceTypeText,
+  getResourceTypeColor,
+  resourceTypeOptions,
+} from '@/api/kb/trash'
+
+// 表格列配置
+const columns = computed((): TableColumnData[] => [
+  {
+    title: '序号',
+    dataIndex: 'index',
+    slotName: 'index',
+    width: 80,
+    align: 'center',
+  },
+  {
+    title: '标题',
+    dataIndex: 'resource_name',
+    ellipsis: true,
+    tooltip: true,
+  },
+  {
+    title: '分类',
+    dataIndex: 'resource_type',
+    slotName: 'resource_type',
+    width: 120,
+    align: 'center',
+  },
+  {
+    title: '删除人',
+    dataIndex: 'deleted_name',
+    slotName: 'deleted_name',
+    width: 120,
+    align: 'center',
+  },
+  {
+    title: '删除时间',
+    dataIndex: 'deleted_time',
+    slotName: 'deleted_time',
+    width: 180,
+    align: 'center',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: '操作',
+    dataIndex: 'operation',
+    slotName: 'operation',
+    width: 180,
+    align: 'center',
+    fixed: 'right',
+  },
+])
+
+// 搜索表单配置
+const filters = computed((): FormItem[] => [
+  {
+    label: '关键词',
+    field: 'keyword',
+    type: 'input',
+    placeholder: '搜索标题',
+    span: 6,
+  },
+  {
+    label: '资源类型',
+    field: 'resource_type',
+    type: 'select',
+    placeholder: '请选择资源类型',
+    options: resourceTypeOptions,
+    span: 4,
+  },
+])
+
+// 搜索表单数据
+const searchForm = reactive({
+  keyword: '',
+  resource_type: '',
+})
+
+// 处理表单模型更新
+const handleFormModelUpdate = (newFormModel: Record<string, any>) => {
+  Object.assign(searchForm, newFormModel)
+}
+
+// 表格数据
+const tableData = ref<TrashRecord[]>([])
+const loading = ref(false)
+
+// 分页
+const page = ref(1)
+const pageSize = ref(10)
+const total = ref(0)
+
+// 恢复确认
+const restoreConfirmVisible = ref(false)
+const recordToRestore = ref<TrashRecord | null>(null)
+
+// 删除确认
+const deleteConfirmVisible = ref(false)
+const recordToDelete = ref<TrashRecord | null>(null)
+
+// 获取数据
+const fetchData = async () => {
+  try {
+    loading.value = true
+    const params: FetchTrashListParams = {
+      page: page.value,
+      page_size: pageSize.value,
+      resource_type: (searchForm.resource_type || undefined) as
+        | 'document'
+        | 'faq'
+        | undefined,
+    }
+
+    const res = await fetchTrashList(params)
+
+    if (res?.code === 200 && res.data) {
+      // 如果有关键词，在前端过滤
+      let data = res.data.data || []
+      if (searchForm.keyword) {
+        const keyword = searchForm.keyword.toLowerCase()
+        data = data.filter(
+          (item) =>
+            item.resource_name?.toLowerCase().includes(keyword) ||
+            item.deleted_name?.toLowerCase().includes(keyword)
+        )
+      }
+      tableData.value = data
+      total.value = res.data.total || 0
+    }
+  } catch (error) {
+    console.error('获取回收站列表失败:', error)
+    Message.error('获取回收站列表失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 搜索
+const handleSearch = () => {
+  page.value = 1
+  fetchData()
+}
+
+// 重置
+const handleReset = () => {
+  searchForm.keyword = ''
+  searchForm.resource_type = ''
+  page.value = 1
+  fetchData()
+}
+
+// 页码变化
+const handlePageChange = (current: number) => {
+  page.value = current
+  fetchData()
+}
+
+// 格式化时间
+const formatTime = (time: string | null): string => {
+  return time ? dayjs(time).format('YYYY-MM-DD HH:mm') : '-'
+}
+
+// 恢复资源
+const handleRestore = (record: TrashRecord) => {
+  recordToRestore.value = record
+  restoreConfirmVisible.value = true
+}
+
+// 确认恢复
+const handleConfirmRestore = async () => {
+  if (!recordToRestore.value?.id) return
+
+  try {
+    loading.value = true
+    const res = await restoreTrash({ id: recordToRestore.value.id })
+    if (res?.code === 200) {
+      Message.success('恢复成功')
+      restoreConfirmVisible.value = false
+      recordToRestore.value = null
+      await fetchData()
+    } else {
+      Message.error(res?.message || '恢复失败')
+    }
+  } catch (error) {
+    console.error('恢复失败:', error)
+    Message.error('恢复失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 彻底删除
+const handleDelete = (record: TrashRecord) => {
+  recordToDelete.value = record
+  deleteConfirmVisible.value = true
+}
+
+// 确认彻底删除
+const handleConfirmDelete = async () => {
+  if (!recordToDelete.value?.id) return
+
+  try {
+    loading.value = true
+    const res = await deleteTrash({ id: recordToDelete.value.id })
+    if (res?.code === 200) {
+      Message.success('彻底删除成功')
+      deleteConfirmVisible.value = false
+      recordToDelete.value = null
+      await fetchData()
+    } else {
+      Message.error(res?.message || '删除失败')
+    }
+  } catch (error) {
+    console.error('删除失败:', error)
+    Message.error('删除失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 初始化
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<style scoped lang="less">
+.container {
+  padding: 0 20px 20px 20px;
+}
+
+.general-card {
+  margin-top: 16px;
+}
+</style>
diff --git a/src/views/ops/pages/kb/review/index.vue b/src/views/ops/pages/kb/review/index.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/ops/pages/kb/tags/components/CategoryFormDialog.vue b/src/views/ops/pages/kb/tags/components/CategoryFormDialog.vue
new file mode 100644
index 0000000..903c206
--- /dev/null
+++ b/src/views/ops/pages/kb/tags/components/CategoryFormDialog.vue
@@ -0,0 +1,324 @@
+<template>
+  <a-modal
+    :visible="visible"
+    :title="isEdit ? '编辑分类' : '新增分类'"
+    width="600px"
+    @ok="handleOk"
+    @cancel="handleCancel"
+    @update:visible="handleVisibleChange"
+    :confirm-loading="submitting"
+  >
+    <a-form :model="form" layout="vertical" ref="formRef">
+      <a-row :gutter="16">
+        <a-col :span="12">
+          <a-form-item
+            label="分类名称"
+            field="name"
+            :rules="[{ required: true, message: '请输入分类名称' }]"
+          >
+            <a-input
+              v-model="form.name"
+              placeholder="请输入分类名称"
+              :max-length="200"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="分类类型" field="type">
+            <a-select
+              v-model="form.type"
+              placeholder="请选择分类类型"
+              allow-clear
+            >
+              <a-option value="document">文档分类</a-option>
+              <a-option value="faq">FAQ分类</a-option>
+              <a-option value="general">通用分类</a-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+      </a-row>
+
+      <a-form-item label="分类描述" field="description">
+        <a-textarea
+          v-model="form.description"
+          placeholder="请输入分类描述"
+          :auto-size="{ minRows: 2, maxRows: 4 }"
+          :max-length="500"
+        />
+      </a-form-item>
+
+      <a-form-item label="分类颜色" field="color">
+        <div class="color-picker-wrapper">
+          <a-input
+            v-model="form.color"
+            placeholder="请选择颜色"
+            readonly
+            @click="showColorPicker = !showColorPicker"
+          >
+            <template #prefix>
+              <div
+                class="color-preview"
+                :style="{ backgroundColor: form.color || '#ccc' }"
+              ></div>
+            </template>
+          </a-input>
+          <div v-if="showColorPicker" class="color-picker-dropdown">
+            <div class="color-picker-header">选择颜色</div>
+            <div class="color-picker-grid">
+              <div
+                v-for="color in presetColors"
+                :key="color"
+                class="color-item"
+                :style="{ backgroundColor: color }"
+                @click="selectColor(color)"
+              ></div>
+            </div>
+            <div class="color-picker-custom">
+              <span>自定义颜色:</span>
+              <input
+                type="color"
+                v-model="form.color"
+                @change="showColorPicker = false"
+              />
+            </div>
+          </div>
+        </div>
+      </a-form-item>
+
+      <a-form-item label="排序号" field="sort_order">
+        <a-input-number
+          v-model="form.sort_order"
+          placeholder="请输入排序号"
+          :min="0"
+          style="width: 100%"
+        />
+      </a-form-item>
+
+      <a-form-item label="备注信息" field="remarks">
+        <a-textarea
+          v-model="form.remarks"
+          placeholder="请输入备注信息"
+          :auto-size="{ minRows: 2, maxRows: 4 }"
+          :max-length="500"
+        />
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, computed } from 'vue'
+import { Message } from '@arco-design/web-vue'
+import {
+  createCategory,
+  updateCategory,
+  type Category,
+} from '@/api/kb/category'
+
+interface Props {
+  visible: boolean
+  category: Category | null
+}
+
+interface Emits {
+  (e: 'update:visible', value: boolean): void
+  (e: 'success'): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const formRef = ref()
+const submitting = ref(false)
+const showColorPicker = ref(false)
+
+// 预设颜色
+const presetColors = [
+  '#FF0000', '#FF4500', '#FF8C00', '#FFD700', '#FFFF00',
+  '#9ACD32', '#32CD32', '#00FF00', '#00FA9A', '#00CED1',
+  '#1E90FF', '#0000FF', '#8A2BE2', '#9400D3', '#FF00FF',
+  '#FF1493', '#DC143C', '#B22222', '#8B0000', '#800000',
+]
+
+// 表单数据
+const form = ref({
+  name: '',
+  description: '',
+  type: 'document',
+  color: '',
+  sort_order: 0,
+  remarks: '',
+})
+
+// 是否为编辑模式
+const isEdit = computed(() => !!props.category?.id)
+
+// 选择颜色
+const selectColor = (color: string) => {
+  form.value.color = color
+  showColorPicker.value = false
+}
+
+// 监听对话框显示状态
+watch(
+  () => props.visible,
+  (newVal) => {
+    if (newVal) {
+      if (props.category && isEdit.value) {
+        // 编辑模式：填充表单
+        form.value = {
+          name: props.category.name || '',
+          description: props.category.description || '',
+          type: props.category.type || 'document',
+          color: props.category.color || '',
+          sort_order: props.category.sort_order || 0,
+          remarks: props.category.remarks || '',
+        }
+      } else {
+        // 新建模式：重置表单
+        form.value = {
+          name: '',
+          description: '',
+          type: 'document',
+          color: '',
+          sort_order: 0,
+          remarks: '',
+        }
+      }
+      showColorPicker.value = false
+    }
+  }
+)
+
+// 确认提交
+const handleOk = async () => {
+  const valid = await formRef.value?.validate()
+  if (valid) return
+
+  submitting.value = true
+  try {
+    const data: any = {
+      name: form.value.name,
+      description: form.value.description,
+      type: form.value.type,
+      color: form.value.color,
+      sort_order: form.value.sort_order,
+      remarks: form.value.remarks,
+    }
+
+    let res: any
+    if (isEdit.value && props.category?.id) {
+      // 编辑分类
+      data.id = props.category.id
+      res = await updateCategory(data)
+    } else {
+      // 新建分类
+      res = await createCategory(data)
+    }
+
+    if (res.code === 200) {
+      Message.success(isEdit.value ? '编辑成功' : '创建成功')
+      emit('success')
+      emit('update:visible', false)
+    } else {
+      Message.error(res.message || (isEdit.value ? '编辑失败' : '创建失败'))
+    }
+  } catch (error) {
+    Message.error(isEdit.value ? '编辑失败' : '创建失败')
+    console.error(error)
+  } finally {
+    submitting.value = false
+  }
+}
+
+// 取消
+const handleCancel = () => {
+  emit('update:visible', false)
+}
+
+// 处理对话框可见性变化
+const handleVisibleChange = (visible: boolean) => {
+  emit('update:visible', visible)
+}
+</script>
+
+<script lang="ts">
+export default {
+  name: 'KbCategoryFormDialog',
+}
+</script>
+
+<style scoped lang="less">
+.color-picker-wrapper {
+  position: relative;
+
+  .color-preview {
+    width: 16px;
+    height: 16px;
+    border-radius: 2px;
+    border: 1px solid #d9d9d9;
+  }
+
+  .color-picker-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 1000;
+    background: #fff;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    padding: 12px;
+    margin-top: 4px;
+    width: 280px;
+
+    .color-picker-header {
+      font-size: 14px;
+      font-weight: 500;
+      margin-bottom: 8px;
+      color: #262626;
+    }
+
+    .color-picker-grid {
+      display: grid;
+      grid-template-columns: repeat(10, 1fr);
+      gap: 4px;
+      margin-bottom: 12px;
+
+      .color-item {
+        width: 20px;
+        height: 20px;
+        border-radius: 2px;
+        cursor: pointer;
+        border: 1px solid #d9d9d9;
+
+        &:hover {
+          transform: scale(1.1);
+          border-color: #1890ff;
+        }
+      }
+    }
+
+    .color-picker-custom {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding-top: 8px;
+      border-top: 1px solid #f0f0f0;
+
+      span {
+        font-size: 12px;
+        color: #595959;
+      }
+
+      input[type="color"] {
+        width: 60px;
+        height: 28px;
+        border: 1px solid #d9d9d9;
+        border-radius: 4px;
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/ops/pages/kb/tags/index.vue b/src/views/ops/pages/kb/tags/index.vue
new file mode 100644
index 0000000..0dd685a
--- /dev/null
+++ b/src/views/ops/pages/kb/tags/index.vue
@@ -0,0 +1,283 @@
+<template>
+  <div class="container">
+    <search-table
+      :form-model="formModel"
+      :form-items="formItems"
+      :data="tableData"
+      :columns="columns"
+      :loading="loading"
+      title="分类管理"
+      search-button-text="查询"
+      reset-button-text="重置"
+      @update:form-model="handleFormModelUpdate"
+      @search="handleSearch"
+      @reset="handleReset"
+      @refresh="handleRefresh"
+    >
+      <template #toolbar-left>
+        <a-button type="primary" @click="handleCreate">
+          新增分类
+        </a-button>
+      </template>
+
+      <!-- 序号 -->
+      <template #index="{ rowIndex }">
+        {{ rowIndex + 1 }}
+      </template>
+
+      <!-- 分类类型 -->
+      <template #type="{ record }">
+        <a-tag :color="getTypeColor(record.type)">
+          {{ getTypeLabel(record.type) }}
+        </a-tag>
+      </template>
+
+      <!-- 操作 -->
+      <template #actions="{ record }">
+        <a-button type="text" size="small" @click="handleEdit(record)">
+          编辑
+        </a-button>
+        <a-button type="text" size="small" status="danger" @click="handleDelete(record)">
+          删除
+        </a-button>
+      </template>
+    </search-table>
+
+    <!-- 分类表单对话框（新增/编辑） -->
+    <category-form-dialog
+      v-model:visible="formVisible"
+      :category="editingCategory"
+      @success="handleFormSuccess"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, onMounted } from 'vue'
+import { Message, Modal } from '@arco-design/web-vue'
+import type { FormItem } from '@/components/search-form/types'
+import SearchTable from '@/components/search-table/index.vue'
+import {
+  fetchCategoryList,
+  deleteCategory,
+  type Category,
+} from '@/api/kb/category'
+import CategoryFormDialog from './components/CategoryFormDialog.vue'
+
+// 状态管理
+const loading = ref(false)
+const tableData = ref<Category[]>([])
+const formModel = ref({
+  keyword: '',
+  type: '',
+})
+
+// 表单项配置
+const formItems = computed<FormItem[]>(() => [
+  {
+    field: 'keyword',
+    label: '关键词',
+    type: 'input',
+    placeholder: '请输入分类名称',
+  },
+  {
+    field: 'type',
+    label: '分类类型',
+    type: 'select',
+    placeholder: '请选择分类类型',
+    options: [
+      { label: '文档分类', value: 'document' },
+      { label: 'FAQ分类', value: 'faq' },
+      { label: '通用分类', value: 'general' },
+    ],
+    allowClear: true,
+  },
+])
+
+// 表格列配置
+const columns = computed(() => [
+  {
+    title: '序号',
+    dataIndex: 'index',
+    slotName: 'index',
+    width: 80,
+    align: 'center' as const,
+  },
+  {
+    title: '分类名称',
+    dataIndex: 'name',
+    ellipsis: true,
+    tooltip: true,
+  },
+  {
+    title: '分类描述',
+    dataIndex: 'description',
+    ellipsis: true,
+    tooltip: true,
+  },
+  {
+    title: '分类类型',
+    dataIndex: 'type',
+    slotName: 'type',
+    width: 120,
+    align: 'center' as const,
+  },
+  {
+    title: '备注信息',
+    dataIndex: 'remarks',
+    ellipsis: true,
+    tooltip: true,
+  },
+  {
+    title: '操作',
+    slotName: 'actions',
+    width: 250,
+    fixed: 'right' as const,
+  },
+])
+
+// 当前选中的分类
+const editingCategory = ref<Category | null>(null)
+
+// 对话框可见性
+const formVisible = ref(false)
+
+// 获取分类类型标签
+const getTypeLabel = (type: string) => {
+  const typeMap: Record<string, string> = {
+    document: '文档分类',
+    faq: 'FAQ分类',
+    general: '通用分类',
+  }
+  return typeMap[type] || type
+}
+
+// 获取分类类型颜色
+const getTypeColor = (type: string) => {
+  const colorMap: Record<string, string> = {
+    document: 'blue',
+    faq: 'green',
+    general: 'orange',
+  }
+  return colorMap[type] || 'gray'
+}
+
+// 获取分类列表
+const fetchCategories = async () => {
+  loading.value = true
+
+  try {
+    const params: any = {}
+
+    if (formModel.value.type) {
+      params.type = formModel.value.type
+    }
+
+    const res: any = await fetchCategoryList(params)
+
+    if (res.code === 0) {
+      let data = res.details || []
+      
+      // 如果有关键词搜索，进行过滤
+      if (formModel.value.keyword) {
+        data = data.filter((item: Category) => 
+          item.name.toLowerCase().includes(formModel.value.keyword.toLowerCase())
+        )
+      }
+      
+      tableData.value = data
+    } else {
+      Message.error(res.message || '获取分类列表失败')
+      tableData.value = []
+    }
+  } catch (error) {
+    console.error('获取分类列表失败:', error)
+    Message.error('获取分类列表失败')
+    tableData.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+// 搜索
+const handleSearch = () => {
+  fetchCategories()
+}
+
+// 处理表单模型更新
+const handleFormModelUpdate = (value: any) => {
+  formModel.value = value
+}
+
+// 重置
+const handleReset = () => {
+  formModel.value = {
+    keyword: '',
+    type: '',
+  }
+  fetchCategories()
+}
+
+// 刷新
+const handleRefresh = () => {
+  fetchCategories()
+  Message.success('数据已刷新')
+}
+
+// 新增分类
+const handleCreate = () => {
+  editingCategory.value = null
+  formVisible.value = true
+}
+
+// 编辑分类
+const handleEdit = (record: Category) => {
+  editingCategory.value = { ...record }
+  formVisible.value = true
+}
+
+// 删除分类
+const handleDelete = async (record: Category) => {
+  Modal.confirm({
+    title: '确认删除',
+    content: `确认删除分类「${record.name}」吗？`,
+    onOk: async () => {
+      try {
+        const res: any = await deleteCategory(record.id)
+        if (res.code === 200) {
+          Message.success('删除成功')
+          fetchCategories()
+        } else {
+          Message.error(res.message || '删除失败')
+        }
+      } catch (error) {
+        console.error('删除分类失败:', error)
+        Message.error('删除失败')
+      }
+    },
+  })
+}
+
+// 表单成功回调
+const handleFormSuccess = () => {
+  formVisible.value = false
+  fetchCategories()
+}
+
+// 初始化加载数据
+onMounted(() => {
+  fetchCategories()
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'KbCategoryManage',
+}
+</script>
+
+<style scoped lang="less">
+.container {
+  margin-top: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/ops/pages/report/history/components/MetricsSummaryPanel.vue b/src/views/ops/pages/report/history/components/MetricsSummaryPanel.vue
index 9ee33e2..f6837ee 100644
--- a/src/views/ops/pages/report/history/components/MetricsSummaryPanel.vue
+++ b/src/views/ops/pages/report/history/components/MetricsSummaryPanel.vue
@@ -1,113 +1,62 @@
 <template>
-  <div class="metrics-summary-panel">
-    <!-- 查询表单 -->
-    <a-form :model="formModel" layout="inline" class="search-form">
-      <a-form-item label="数据源" field="data_source">
-        <a-select
-          v-model="formModel.data_source"
-          placeholder="请选择数据源"
-          style="width: 180px"
-          @change="handleDataSourceChange"
-        >
-          <a-option value="dc-host">主机</a-option>
-          <a-option value="dc-network">网络设备</a-option>
-          <a-option value="dc-database">数据库</a-option>
-          <a-option value="dc-middleware">中间件</a-option>
-        </a-select>
-      </a-form-item>
-      
-      <a-form-item label="指标名称" field="metric_names">
-        <a-input
-          v-model="formModel.metric_names"
-          placeholder="多个指标名称，逗号分隔"
-          style="width: 250px"
-        />
-      </a-form-item>
-      
-      <a-form-item label="标识" field="identities">
-        <a-input
-          v-model="formModel.identities"
-          :placeholder="identityPlaceholder"
-          style="width: 200px"
-        />
-      </a-form-item>
-      
-      <a-form-item label="聚合方式" field="aggregation">
-        <a-select
-          v-model="formModel.aggregation"
-          placeholder="请选择聚合方式"
-          style="width: 120px"
-        >
-          <a-option value="avg">平均值</a-option>
-          <a-option value="max">最大值</a-option>
-          <a-option value="min">最小值</a-option>
-          <a-option value="sum">求和</a-option>
-          <a-option value="count">计数</a-option>
-        </a-select>
-      </a-form-item>
-      
-      <a-form-item label="时间范围" field="timeRange">
-        <a-range-picker
-          v-model="formModel.timeRange"
-          show-time
-          format="YYYY-MM-DD HH:mm:ss"
-          value-format="YYYY-MM-DD HH:mm:ss"
-          style="width: 380px"
-        />
-      </a-form-item>
-      
-      <a-form-item>
-        <a-space>
-          <a-button type="primary" :loading="loading" @click="handleSearch">
-            查询
-          </a-button>
-          <a-button @click="handleReset">
-            重置
-          </a-button>
-          <a-button :loading="exporting" @click="handleExport">
-            导出 CSV
-          </a-button>
-        </a-space>
-      </a-form-item>
-    </a-form>
-    
-    <!-- 结果表格 -->
-    <a-table
+  <div>
+    <search-table
+      :form-model="formModel"
+      :form-items="formItems"
       :data="tableData"
+      :columns="columns"
       :loading="loading"
       :pagination="pagination"
-      :bordered="false"
-      stripe
-      class="result-table"
-      @page-change="handlePageChange"
+      @update:form-model="handleFormModelUpdate"
+      @search="handleSearch"
+      @reset="handleReset"
+      @refresh="handleRefresh"
     >
-      <template #columns>
-        <a-table-column title="标识" data-index="group_key" width="200" />
-        <a-table-column title="指标名称" data-index="metric_name" width="180" />
-        <a-table-column title="指标单位" data-index="metric_unit" width="100" />
-        <a-table-column title="聚合值" data-index="value" width="120">
-          <template #cell="{ record }">
-            <span>{{ formatValue(record.value) }}</span>
-          </template>
-        </a-table-column>
-        <a-table-column title="样本数" data-index="sample_count" width="100" />
-        <a-table-column title="聚合方式" data-index="aggregation" width="100" />
-        <a-table-column title="数据源" data-index="data_source" width="120" />
+      <!-- 时间范围选择器插槽 -->
+      <template #form-items>
+        <a-col :span="8">
+          <a-form-item label="时间范围" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }">
+            <a-range-picker
+              v-model="formModel.timeRange"
+              show-time
+              format="YYYY-MM-DD HH:mm:ss"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              style="width: 380px"
+            />
+          </a-form-item>
+        </a-col>
       </template>
-    </a-table>
-    
-    <!-- 空状态 -->
-    <a-empty v-if="!loading && tableData.length === 0" description="暂无数据" />
+
+      <!-- 导出按钮插槽 -->
+      <template #actions>
+        <a-button :loading="exporting" @click="handleExport">
+          导出 CSV
+        </a-button>
+      </template>
+
+      <!-- 聚合值 -->
+      <template #value="{ record }">
+        <span>{{ formatValue(record.value) }}</span>
+      </template>
+    </search-table>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, computed } from 'vue'
+import { ref, reactive, computed, onMounted } from 'vue'
 import { Message } from '@arco-design/web-vue'
+import type { FormItem } from '@/components/search-form/types'
+import SearchTable from '@/components/search-table/index.vue'
 import { fetchMetricsSummary, exportMetricsSummary } from '@/api/ops/report'
 
 // 表单模型
-const formModel = reactive({
+const formModel = ref<{
+  data_source: string
+  metric_names: string
+  identities: string
+  aggregation: string
+  timeRange: string[]
+}>({
   data_source: 'dc-host',
   metric_names: '',
   identities: '',
@@ -122,7 +71,7 @@ const exporting = ref(false)
 // 表格数据
 const tableData = ref<any[]>([])
 
-// 分页
+// 分页配置
 const pagination = reactive({
   current: 1,
   pageSize: 20,
@@ -131,16 +80,97 @@ const pagination = reactive({
 
 // 标识字段占位符
 const identityPlaceholder = computed(() => {
-  if (formModel.data_source === 'dc-host') {
+  if (formModel.value.data_source === 'dc-host') {
     return '服务器标识，必填'
   }
   return '服务标识，必填'
 })
 
-// 处理数据源变化
-const handleDataSourceChange = () => {
-  formModel.identities = ''
-}
+// 表单项配置
+const formItems = computed<FormItem[]>(() => [
+  {
+    field: 'data_source',
+    label: '数据源',
+    type: 'select',
+    placeholder: '请选择数据源',
+    options: [
+      { label: '主机', value: 'dc-host' },
+      { label: '网络设备', value: 'dc-network' },
+      { label: '数据库', value: 'dc-database' },
+      { label: '中间件', value: 'dc-middleware' },
+    ],
+    colProps: { span: 8 },
+  },
+  {
+    field: 'metric_names',
+    label: '指标名称',
+    type: 'input',
+    placeholder: '多个指标名称，逗号分隔',
+    colProps: { span: 8 },
+  },
+  {
+    field: 'identities',
+    label: '标识',
+    type: 'input',
+    placeholder: identityPlaceholder.value,
+    colProps: { span: 8 },
+  },
+  {
+    field: 'aggregation',
+    label: '聚合方式',
+    type: 'select',
+    placeholder: '请选择聚合方式',
+    options: [
+      { label: '平均值', value: 'avg' },
+      { label: '最大值', value: 'max' },
+      { label: '最小值', value: 'min' },
+      { label: '求和', value: 'sum' },
+      { label: '计数', value: 'count' },
+    ],
+    colProps: { span: 8 },
+  },
+])
+
+// 表格列配置
+const columns = computed(() => [
+  {
+    title: '标识',
+    dataIndex: 'group_key',
+    width: 200,
+    fixed: 'left' as const,
+  },
+  {
+    title: '指标名称',
+    dataIndex: 'metric_name',
+    width: 180,
+  },
+  {
+    title: '指标单位',
+    dataIndex: 'metric_unit',
+    width: 100,
+  },
+  {
+    title: '聚合值',
+    dataIndex: 'value',
+    width: 120,
+    slotName: 'value',
+  },
+  {
+    title: '样本数',
+    dataIndex: 'sample_count',
+    width: 100,
+  },
+  {
+    title: '聚合方式',
+    dataIndex: 'aggregation',
+    width: 100,
+  },
+  {
+    title: '数据源',
+    dataIndex: 'data_source',
+    width: 120,
+  },
+])
 
 // 格式化数值
 const formatValue = (value: number) => {
@@ -151,55 +181,58 @@ const formatValue = (value: number) => {
 // 构建查询参数
 const buildParams = () => {
   const params: any = {
-    data_source: formModel.data_source,
-    metric_names: formModel.metric_names,
-    aggregation: formModel.aggregation,
-    start_time: formModel.timeRange[0],
-    end_time: formModel.timeRange[1],
+    data_source: formModel.value.data_source,
+    metric_names: formModel.value.metric_names,
+    aggregation: formModel.value.aggregation,
+    start_time: formModel.value.timeRange[0],
+    end_time: formModel.value.timeRange[1],
   }
-  
+
   // 根据数据源添加标识
-  if (formModel.data_source === 'dc-host') {
-    params.server_identities = formModel.identities
+  if (formModel.value.data_source === 'dc-host') {
+    params.server_identities = formModel.value.identities
   } else {
-    params.service_identities = formModel.identities
+    params.service_identities = formModel.value.identities
   }
-  
+
   return params
 }
 
 // 查询
 const handleSearch = async () => {
   // 验证必填项
-  if (!formModel.data_source) {
+  if (!formModel.value.data_source) {
     Message.warning('请选择数据源')
     return
   }
-  if (!formModel.metric_names) {
+  if (!formModel.value.metric_names) {
     Message.warning('请输入指标名称')
     return
   }
-  if (!formModel.identities) {
+  if (!formModel.value.identities) {
     Message.warning('请输入标识')
     return
   }
-  if (!formModel.timeRange || formModel.timeRange.length !== 2) {
+  if (!formModel.value.timeRange || formModel.value.timeRange.length !== 2) {
     Message.warning('请选择时间范围')
     return
   }
-  
+
+  pagination.current = 1
+  await fetchTableData()
+}
+
+// 获取表格数据
+const fetchTableData = async () => {
   loading.value = true
-  
+
   try {
     const params = buildParams()
     const res = await fetchMetricsSummary(params)
-    
+
     if (res.code === 0) {
-      const data = res.data?.data || []
-      tableData.value = data
+      tableData.value = res.data?.data || []
       pagination.total = res.data?.count || 0
-      pagination.current = 1
-      
       if (tableData.value.length === 0) {
         Message.info('未查询到数据')
       }
@@ -218,67 +251,77 @@ const handleSearch = async () => {
   }
 }
 
-// 重置
-const handleReset = () => {
-  formModel.data_source = 'dc-host'
-  formModel.metric_names = ''
-  formModel.identities = ''
-  formModel.aggregation = 'avg'
-  formModel.timeRange = []
-  tableData.value = []
-  pagination.total = 0
-  pagination.current = 1
+// 处理表单模型更新
+const handleFormModelUpdate = (value: any) => {
+  formModel.value = {
+    ...formModel.value,
+    ...value,
+  }
 }
 
-// 分页变化
-const handlePageChange = (current: number) => {
-  pagination.current = current
-  // 如果需要分页查询，可以在这里实现
+// 重置
+const handleReset = () => {
+  formModel.value = {
+    data_source: 'dc-host',
+    metric_names: '',
+    identities: '',
+    aggregation: 'avg',
+    timeRange: [],
+  }
+  pagination.current = 1
+  tableData.value = []
+  pagination.total = 0
+}
+
+// 刷新
+const handleRefresh = () => {
+  fetchTableData()
+  Message.success('数据已刷新')
 }
 
 // 导出
 const handleExport = async () => {
   // 验证必填项
-  if (!formModel.data_source) {
+  if (!formModel.value.data_source) {
     Message.warning('请选择数据源')
     return
   }
-  if (!formModel.metric_names) {
+  if (!formModel.value.metric_names) {
     Message.warning('请输入指标名称')
     return
   }
-  if (!formModel.identities) {
+  if (!formModel.value.identities) {
     Message.warning('请输入标识')
     return
   }
-  if (!formModel.timeRange || formModel.timeRange.length !== 2) {
+  if (!formModel.value.timeRange || formModel.value.timeRange.length !== 2) {
     Message.warning('请选择时间范围')
     return
   }
-  
+
   exporting.value = true
-  
+
   try {
     const params = buildParams()
     params.utf8_bom = 'true'
-    
+
     const blob = await exportMetricsSummary(params)
-    
+
     // 创建下载链接
     const url = window.URL.createObjectURL(blob)
     const link = document.createElement('a')
     link.href = url
-    
+
     // 生成文件名
     const now = new Date()
     const timestamp = `${now.getFullYear()}${String(now.getMonth() + 1).padStart(2, '0')}${String(now.getDate()).padStart(2, '0')}_${String(now.getHours()).padStart(2, '0')}${String(now.getMinutes()).padStart(2, '0')}${String(now.getSeconds()).padStart(2, '0')}`
     link.download = `metrics_summary_${timestamp}.csv`
-    
+
     document.body.appendChild(link)
     link.click()
     document.body.removeChild(link)
     window.URL.revokeObjectURL(url)
-    
+
     Message.success('导出成功')
   } catch (error: any) {
     console.error('导出失败:', error)
@@ -287,6 +330,37 @@ const handleExport = async () => {
     exporting.value = false
   }
 }
+
+// 初始化默认时间范围（最近24小时）
+const initDefaultTimeRange = () => {
+  const end = new Date()
+  const start = new Date(end.getTime() - 24 * 60 * 60 * 1000)
+  
+  // 格式化为 YYYY-MM-DD HH:mm:ss
+  const formatDateTime = (date: Date) => {
+    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}`
+  }
+  
+  formModel.value.timeRange = [
+    formatDateTime(start),
+    formatDateTime(end),
+  ]
+}
+
+// 组件挂载时初始化时间范围并自动查询
+onMounted(() => {
+  initDefaultTimeRange()
+  // 自动查询（使用默认参数）
+  formModel.value.metric_names = 'cpu_usage_percent'
+  formModel.value.identities = '*'
+  handleSearch()
+})
 </script>
 
 <script lang="ts">
@@ -296,20 +370,4 @@ export default {
 </script>
 
 <style scoped lang="less">
-.metrics-summary-panel {
-  .search-form {
-    margin-bottom: 20px;
-    padding: 16px;
-    background-color: var(--color-fill-2);
-    border-radius: 4px;
-    
-    :deep(.arco-form-item) {
-      margin-bottom: 12px;
-    }
-  }
-  
-  .result-table {
-    background-color: #fff;
-  }
-}
 </style>
diff --git a/src/views/ops/pages/report/history/components/MetricsTopNPanel.vue b/src/views/ops/pages/report/history/components/MetricsTopNPanel.vue
index abaf972..6d7226f 100644
--- a/src/views/ops/pages/report/history/components/MetricsTopNPanel.vue
+++ b/src/views/ops/pages/report/history/components/MetricsTopNPanel.vue
@@ -1,129 +1,57 @@
 <template>
-  <div class="metrics-topn-panel">
-    <!-- 查询表单 -->
-    <a-form :model="formModel" layout="inline" class="search-form">
-      <a-form-item label="数据源" field="data_source">
-        <a-select
-          v-model="formModel.data_source"
-          placeholder="请选择数据源"
-          style="width: 180px"
-          @change="handleDataSourceChange"
-        >
-          <a-option value="dc-host">主机</a-option>
-          <a-option value="dc-network">网络设备</a-option>
-          <a-option value="dc-database">数据库</a-option>
-          <a-option value="dc-middleware">中间件</a-option>
-        </a-select>
-      </a-form-item>
-      
-      <a-form-item label="指标名称" field="metric_name">
-        <a-input
-          v-model="formModel.metric_name"
-          placeholder="请输入指标名称"
-          style="width: 200px"
-        />
-      </a-form-item>
-      
-      <a-form-item label="聚合方式" field="aggregation">
-        <a-select
-          v-model="formModel.aggregation"
-          placeholder="请选择聚合方式"
-          style="width: 120px"
-        >
-          <a-option value="avg">平均值</a-option>
-          <a-option value="max">最大值</a-option>
-          <a-option value="min">最小值</a-option>
-          <a-option value="sum">求和</a-option>
-          <a-option value="count">计数</a-option>
-        </a-select>
-      </a-form-item>
-      
-      <a-form-item label="排序" field="order">
-        <a-select
-          v-model="formModel.order"
-          style="width: 100px"
-        >
-          <a-option value="desc">降序</a-option>
-          <a-option value="asc">升序</a-option>
-        </a-select>
-      </a-form-item>
-      
-      <a-form-item label="数量" field="limit">
-        <a-input-number
-          v-model="formModel.limit"
-          :min="1"
-          :max="1000"
-          style="width: 120px"
-        />
-      </a-form-item>
-      
-      <a-form-item label="标识" field="identities">
-        <a-input
-          v-model="formModel.identities"
-          :placeholder="identityPlaceholder"
-          style="width: 200px"
-        />
-      </a-form-item>
-      
-      <a-form-item label="时间范围" field="timeRange">
-        <a-range-picker
-          v-model="formModel.timeRange"
-          show-time
-          format="YYYY-MM-DD HH:mm:ss"
-          value-format="YYYY-MM-DD HH:mm:ss"
-          style="width: 380px"
-        />
-      </a-form-item>
-      
-      <a-form-item>
-        <a-space>
-          <a-button type="primary" :loading="loading" @click="handleSearch">
-            查询
-          </a-button>
-          <a-button @click="handleReset">
-            重置
-          </a-button>
-        </a-space>
-      </a-form-item>
-    </a-form>
-    
-    <!-- 结果表格 -->
-    <a-table
+  <div>
+    <search-table
+      :form-model="formModel"
+      :form-items="formItems"
       :data="tableData"
+      :columns="columns"
       :loading="loading"
-      :pagination="false"
-      :bordered="false"
-      stripe
-      class="result-table"
+      :pagination="pagination"
+      @update:form-model="handleFormModelUpdate"
+      @search="handleSearch"
+      @reset="handleReset"
+      @refresh="handleRefresh"
     >
-      <template #columns>
-        <a-table-column title="排名" data-index="rank" width="80" />
-        <a-table-column title="标识" data-index="group_key" width="200" />
-        <a-table-column title="指标名称" data-index="metric_name" width="180" />
-        <a-table-column title="指标单位" data-index="metric_unit" width="100" />
-        <a-table-column title="聚合值" data-index="value" width="120">
-          <template #cell="{ record }">
-            <span>{{ formatValue(record.value) }}</span>
-          </template>
-        </a-table-column>
-        <a-table-column title="样本数" data-index="sample_count" width="100" />
-        <a-table-column title="聚合方式" data-index="aggregation" width="100" />
-        <a-table-column title="数据源" data-index="data_source" width="120" />
+      <!-- 时间范围选择器插槽 -->
+      <template #form-items>
+        <a-col :span="8">
+          <a-form-item label="时间范围" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }">
+            <a-range-picker
+              v-model="formModel.timeRange"
+              show-time
+              format="YYYY-MM-DD HH:mm:ss"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              style="width: 380px"
+            />
+          </a-form-item>
+        </a-col>
       </template>
-    </a-table>
-    
-    <!-- 空状态 -->
-    <a-empty v-if="!loading && tableData.length === 0" description="暂无数据" />
+
+      <!-- 聚合值 -->
+      <template #value="{ record }">
+        <span>{{ formatValue(record.value) }}</span>
+      </template>
+    </search-table>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, computed } from 'vue'
+import { ref, reactive, computed, onMounted } from 'vue'
 import { Message } from '@arco-design/web-vue'
+import type { FormItem } from '@/components/search-form/types'
+import SearchTable from '@/components/search-table/index.vue'
 import { fetchMetricsTopN } from '@/api/ops/report'
 
 // 表单模型
-const formModel = reactive({
+const formModel = ref<{
+  data_source: string
+  metric_name: string
+  aggregation: string
+  order: string
+  limit: number
+  identities: string
+  timeRange: string[]
+}>({
   data_source: 'dc-host',
   metric_name: '',
   aggregation: 'avg',
@@ -139,18 +67,134 @@ const loading = ref(false)
 // 表格数据
 const tableData = ref<any[]>([])
 
+// 分页配置（TOPN 查询不使用分页，设置为 false）
+const pagination = reactive({
+  current: 1,
+  pageSize: 20,
+  total: 0,
+  showTotal: false,
+  showJumper: false,
+  showPageSize: false,
+})
+
 // 标识字段占位符
 const identityPlaceholder = computed(() => {
-  if (formModel.data_source === 'dc-host') {
+  if (formModel.value.data_source === 'dc-host') {
     return '多个服务器标识，逗号分隔'
   }
   return '多个服务标识，逗号分隔'
 })
 
-// 处理数据源变化
-const handleDataSourceChange = () => {
-  formModel.identities = ''
-}
+// 表单项配置
+const formItems = computed(() => [
+  {
+    field: 'data_source',
+    label: '数据源',
+    type: 'select' as const,
+    placeholder: '请选择数据源',
+    options: [
+      { label: '主机', value: 'dc-host' },
+      { label: '网络设备', value: 'dc-network' },
+      { label: '数据库', value: 'dc-database' },
+      { label: '中间件', value: 'dc-middleware' },
+    ],
+    colProps: { span: 8 },
+  },
+  {
+    field: 'metric_name',
+    label: '指标名称',
+    type: 'input' as const,
+    placeholder: '请输入指标名称',
+    colProps: { span: 8 },
+  },
+  {
+    field: 'aggregation',
+    label: '聚合方式',
+    type: 'select' as const,
+    placeholder: '请选择聚合方式',
+    options: [
+      { label: '平均值', value: 'avg' },
+      { label: '最大值', value: 'max' },
+      { label: '最小值', value: 'min' },
+      { label: '求和', value: 'sum' },
+      { label: '计数', value: 'count' },
+    ],
+    colProps: { span: 8 },
+  },
+  {
+    field: 'order',
+    label: '排序',
+    type: 'select' as const,
+    options: [
+      { label: '降序', value: 'desc' },
+      { label: '升序', value: 'asc' },
+    ],
+    colProps: { span: 8 },
+  },
+  {
+    field: 'limit',
+    label: '数量',
+    type: 'input' as const,
+    props: {
+      min: 1,
+      max: 1000,
+    },
+    colProps: { span: 8 },
+  },
+  {
+    field: 'identities',
+    label: '标识',
+    type: 'input' as const,
+    placeholder: identityPlaceholder.value,
+    colProps: { span: 8 },
+  },
+])
+
+// 表格列配置
+const columns = computed(() => [
+  {
+    title: '排名',
+    dataIndex: 'rank',
+    width: 80,
+    fixed: 'left' as const,
+  },
+  {
+    title: '标识',
+    dataIndex: 'group_key',
+    width: 200,
+  },
+  {
+    title: '指标名称',
+    dataIndex: 'metric_name',
+    width: 180,
+  },
+  {
+    title: '指标单位',
+    dataIndex: 'metric_unit',
+    width: 100,
+  },
+  {
+    title: '聚合值',
+    dataIndex: 'value',
+    width: 120,
+    slotName: 'value',
+  },
+  {
+    title: '样本数',
+    dataIndex: 'sample_count',
+    width: 100,
+  },
+  {
+    title: '聚合方式',
+    dataIndex: 'aggregation',
+    width: 100,
+  },
+  {
+    title: '数据源',
+    dataIndex: 'data_source',
+    width: 120,
+  },
+])
 
 // 格式化数值
 const formatValue = (value: number) => {
@@ -161,72 +205,130 @@ const formatValue = (value: number) => {
 // 查询
 const handleSearch = async () => {
   // 验证必填项
-  if (!formModel.data_source) {
+  if (!formModel.value.data_source) {
     Message.warning('请选择数据源')
     return
   }
-  if (!formModel.metric_name) {
+  if (!formModel.value.metric_name) {
     Message.warning('请输入指标名称')
     return
   }
-  if (!formModel.timeRange || formModel.timeRange.length !== 2) {
+  if (!formModel.value.timeRange || formModel.value.timeRange.length !== 2) {
     Message.warning('请选择时间范围')
     return
   }
-  
+
+  pagination.current = 1
+  await fetchTableData()
+}
+
+// 获取表格数据
+const fetchTableData = async () => {
   loading.value = true
-  
+
   try {
     const params: any = {
-      data_source: formModel.data_source,
-      metric_name: formModel.metric_name,
-      aggregation: formModel.aggregation,
-      order: formModel.order,
-      limit: formModel.limit,
-      start_time: formModel.timeRange[0],
-      end_time: formModel.timeRange[1],
+      data_source: formModel.value.data_source,
+      metric_name: formModel.value.metric_name,
+      aggregation: formModel.value.aggregation,
+      order: formModel.value.order,
+      limit: formModel.value.limit,
+      start_time: formModel.value.timeRange[0],
+      end_time: formModel.value.timeRange[1],
     }
-    
+
     // 根据数据源添加标识过滤
-    if (formModel.identities) {
-      if (formModel.data_source === 'dc-host') {
-        params.server_identities = formModel.identities
+    if (formModel.value.identities) {
+      if (formModel.value.data_source === 'dc-host') {
+        params.server_identities = formModel.value.identities
       } else {
-        params.service_identities = formModel.identities
+        params.service_identities = formModel.value.identities
       }
     }
-    
+
     const res = await fetchMetricsTopN(params)
-    
+
     if (res.code === 0) {
       tableData.value = res.data?.items || []
+      pagination.total = tableData.value.length
       if (tableData.value.length === 0) {
         Message.info('未查询到数据')
       }
     } else {
       Message.error(res.message || '查询失败')
       tableData.value = []
+      pagination.total = 0
     }
   } catch (error: any) {
     console.error('查询失败:', error)
     Message.error(error.message || '查询失败')
     tableData.value = []
+    pagination.total = 0
   } finally {
     loading.value = false
   }
 }
 
+// 处理表单模型更新
+const handleFormModelUpdate = (value: any) => {
+  formModel.value = {
+    ...formModel.value,
+    ...value,
+  }
+}
+
 // 重置
 const handleReset = () => {
-  formModel.data_source = 'dc-host'
-  formModel.metric_name = ''
-  formModel.aggregation = 'avg'
-  formModel.order = 'desc'
-  formModel.limit = 10
-  formModel.identities = ''
-  formModel.timeRange = []
+  formModel.value = {
+    data_source: 'dc-host',
+    metric_name: '',
+    aggregation: 'avg',
+    order: 'desc',
+    limit: 10,
+    identities: '',
+    timeRange: [],
+  }
+  pagination.current = 1
   tableData.value = []
+  pagination.total = 0
 }
+
+// 刷新
+const handleRefresh = () => {
+  fetchTableData()
+  Message.success('数据已刷新')
+}
+
+// 初始化默认时间范围（最近24小时）
+const initDefaultTimeRange = () => {
+  const end = new Date()
+  const start = new Date(end.getTime() - 24 * 60 * 60 * 1000)
+  
+  // 格式化为 YYYY-MM-DD HH:mm:ss
+  const formatDateTime = (date: Date) => {
+    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}`
+  }
+  
+  formModel.value.timeRange = [
+    formatDateTime(start),
+    formatDateTime(end),
+  ]
+}
+
+// 组件挂载时自动加载
+onMounted(() => {
+  initDefaultTimeRange()
+  // 自动查询（使用默认参数）
+  formModel.value.metric_name = 'cpu_usage_percent'
+  formModel.value.data_source = 'dc-host'
+  handleSearch()
+})
 </script>
 
 <script lang="ts">
@@ -236,20 +338,4 @@ export default {
 </script>
 
 <style scoped lang="less">
-.metrics-topn-panel {
-  .search-form {
-    margin-bottom: 20px;
-    padding: 16px;
-    background-color: var(--color-fill-2);
-    border-radius: 4px;
-    
-    :deep(.arco-form-item) {
-      margin-bottom: 12px;
-    }
-  }
-  
-  .result-table {
-    background-color: #fff;
-  }
-}
 </style>
diff --git a/src/views/ops/pages/report/history/components/NetworkDeviceStatusPanel.vue b/src/views/ops/pages/report/history/components/NetworkDeviceStatusPanel.vue
index fc1a073..bc5d2be 100644
--- a/src/views/ops/pages/report/history/components/NetworkDeviceStatusPanel.vue
+++ b/src/views/ops/pages/report/history/components/NetworkDeviceStatusPanel.vue
@@ -6,7 +6,6 @@
     :columns="columns"
     :loading="loading"
     :pagination="pagination"
-    title="网络设备状态"
     @update:form-model="handleFormModelUpdate"
     @search="handleSearch"
     @reset="handleReset"
@@ -68,7 +67,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, computed } from 'vue'
+import { ref, reactive, computed, onMounted } from 'vue'
 import { Message } from '@arco-design/web-vue'
 import type { FormItem } from '@/components/search-form/types'
 import SearchTable from '@/components/search-table/index.vue'
@@ -338,6 +337,37 @@ const handleRefresh = () => {
   fetchTableData()
   Message.success('数据已刷新')
 }
+
+// 初始化默认时间范围（最近24小时）
+const initDefaultTimeRange = () => {
+  const end = new Date()
+  const start = new Date(end.getTime() - 24 * 60 * 60 * 1000)
+  
+  // 格式化为 YYYY-MM-DD HH:mm:ss
+  const formatDateTime = (date: Date) => {
+    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}`
+  }
+  
+  formModel.value.timeRange = [
+    formatDateTime(start),
+    formatDateTime(end),
+  ]
+}
+
+// 组件挂载时初始化并自动查询
+onMounted(() => {
+  initDefaultTimeRange()
+  // 自动查询（使用默认参数）
+  formModel.value.service_identities = '*'
+  formModel.value.metric_names = 'cpu_usage_percent'
+  handleSearch()
+})
 </script>
 
 <script lang="ts">
diff --git a/src/views/ops/pages/report/history/components/ServerStatusPanel.vue b/src/views/ops/pages/report/history/components/ServerStatusPanel.vue
index e78325c..1fea407 100644
--- a/src/views/ops/pages/report/history/components/ServerStatusPanel.vue
+++ b/src/views/ops/pages/report/history/components/ServerStatusPanel.vue
@@ -6,7 +6,6 @@
     :columns="columns"
     :loading="loading"
     :pagination="pagination"
-    title="服务器状态"
     @update:form-model="handleFormModelUpdate"
     @search="handleSearch"
     @reset="handleReset"
@@ -58,7 +57,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, computed } from 'vue'
+import { ref, reactive, computed, onMounted } from 'vue'
 import { Message } from '@arco-design/web-vue'
 import type { FormItem } from '@/components/search-form/types'
 import SearchTable from '@/components/search-table/index.vue'
@@ -288,6 +287,37 @@ const handleRefresh = () => {
   fetchTableData()
   Message.success('数据已刷新')
 }
+
+// 初始化默认时间范围（最近24小时）
+const initDefaultTimeRange = () => {
+  const end = new Date()
+  const start = new Date(end.getTime() - 24 * 60 * 60 * 1000)
+  
+  // 格式化为 YYYY-MM-DD HH:mm:ss
+  const formatDateTime = (date: Date) => {
+    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}`
+  }
+  
+  formModel.value.timeRange = [
+    formatDateTime(start),
+    formatDateTime(end),
+  ]
+}
+
+// 组件挂载时初始化并自动查询
+onMounted(() => {
+  initDefaultTimeRange()
+  // 自动查询（使用默认参数）
+  formModel.value.server_identities = '*'
+  formModel.value.metric_names = 'cpu_usage_percent'
+  handleSearch()
+})
 </script>
 
 <script lang="ts">
diff --git a/src/views/ops/pages/report/history/components/TrafficSummaryPanel.vue b/src/views/ops/pages/report/history/components/TrafficSummaryPanel.vue
index 810c7df..23137fc 100644
--- a/src/views/ops/pages/report/history/components/TrafficSummaryPanel.vue
+++ b/src/views/ops/pages/report/history/components/TrafficSummaryPanel.vue
@@ -1,109 +1,71 @@
 <template>
-  <div class="traffic-summary-panel">
-    <!-- 查询表单 -->
-    <a-form :model="formModel" layout="inline" class="search-form">
-      <a-form-item label="拓扑 ID" field="topology_id">
-        <a-input-number
-          v-model="formModel.topology_id"
-          :min="0"
-          placeholder="拓扑 ID"
-          style="width: 150px"
-        />
-      </a-form-item>
-      
-      <a-form-item label="链路 ID" field="link_id">
-        <a-input-number
-          v-model="formModel.link_id"
-          :min="0"
-          placeholder="链路 ID"
-          style="width: 150px"
-        />
-      </a-form-item>
-      
-      <a-form-item label="节点 ID" field="node_ids">
-        <a-input
-          v-model="formModel.node_ids"
-          placeholder="多个节点 ID，逗号分隔"
-          style="width: 200px"
-        />
-      </a-form-item>
-      
-      <a-form-item label="时间范围" field="timeRange">
-        <a-range-picker
-          v-model="formModel.timeRange"
-          show-time
-          format="YYYY-MM-DD HH:mm:ss"
-          value-format="YYYY-MM-DD HH:mm:ss"
-          style="width: 380px"
-        />
-      </a-form-item>
-      
-      <a-form-item>
-        <a-space>
-          <a-button type="primary" :loading="loading" @click="handleSearch">
-            查询
-          </a-button>
-          <a-button @click="handleReset">
-            重置
-          </a-button>
-          <a-button :loading="exporting" @click="handleExport">
-            导出 CSV
-          </a-button>
-        </a-space>
-      </a-form-item>
-    </a-form>
-    
-    <!-- 汇总信息卡片 -->
-    <div v-if="summaryData.totals" class="summary-cards">
-      <a-card title="流量汇总" :bordered="false" class="summary-card">
-        <a-descriptions :column="3" bordered>
-          <a-descriptions-item v-for="(value, key) in displayTotals" :key="key" :label="formatLabel(key)">
-            {{ formatValue(key, value) }}
-          </a-descriptions-item>
-        </a-descriptions>
-      </a-card>
-    </div>
-    
-    <!-- 节点流量表格 -->
-    <a-divider v-if="summaryData.by_node && summaryData.by_node.length > 0">节点流量明细</a-divider>
-    
-    <a-table
-      v-if="summaryData.by_node && summaryData.by_node.length > 0"
+  <div>
+    <search-table
+      :form-model="formModel"
+      :form-items="formItems"
       :data="summaryData.by_node"
+      :columns="tableColumns"
       :loading="loading"
-      :pagination="false"
-      :bordered="false"
-      stripe
-      class="result-table"
+      :pagination="pagination"
+      @update:form-model="handleFormModelUpdate"
+      @search="handleSearch"
+      @reset="handleReset"
+      @refresh="handleRefresh"
     >
-      <template #columns>
-        <a-table-column title="节点 ID" data-index="node_id" width="200" fixed="left" />
-        <a-table-column
-          v-for="column in dynamicColumns"
-          :key="String(column.key)"
-          :title="column.title"
-          :data-index="String(column.key)"
-          :width="150"
-        >
-          <template #cell="{ record }">
-            <span>{{ formatValue(column.key, record[column.key]) }}</span>
-          </template>
-        </a-table-column>
+      <!-- 时间范围选择器插槽 -->
+      <template #form-items>
+        <a-col :span="8">
+          <a-form-item label="时间范围" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }">
+            <a-range-picker
+              v-model="formModel.timeRange"
+              show-time
+              format="YYYY-MM-DD HH:mm:ss"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              style="width: 380px"
+            />
+          </a-form-item>
+        </a-col>
       </template>
-    </a-table>
-    
-    <!-- 空状态 -->
-    <a-empty v-if="!loading && !summaryData.totals" description="暂无数据" />
+
+      <!-- 汇总信息卡片插槽 -->
+      <template #summary>
+        <a-card v-if="summaryData.totals" title="流量汇总" :bordered="false" class="summary-card">
+          <a-descriptions :column="3" bordered>
+            <a-descriptions-item v-for="(value, key) in displayTotals" :key="key" :label="formatLabel(key)">
+              {{ formatValue(key, value) }}
+            </a-descriptions-item>
+          </a-descriptions>
+        </a-card>
+      </template>
+
+      <!-- 导出按钮插槽 -->
+      <template #actions>
+        <a-button :loading="exporting" @click="handleExport">
+          导出 CSV
+        </a-button>
+      </template>
+
+      <!-- 动态列的单元格渲染 -->
+      <template v-for="column in dynamicColumns" :key="String(column.key)" #[column.slotName]="{ record }">
+        <span>{{ formatValue(column.key, record[column.key]) }}</span>
+      </template>
+    </search-table>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, computed } from 'vue'
+import { ref, reactive, computed, onMounted } from 'vue'
 import { Message } from '@arco-design/web-vue'
+import SearchTable from '@/components/search-table/index.vue'
 import { fetchTrafficSummary, exportTrafficReport } from '@/api/ops/report'
 
 // 表单模型
-const formModel = reactive({
+const formModel = ref<{
+  topology_id: number
+  link_id: number
+  node_ids: string
+  timeRange: string[]
+}>({
   topology_id: 0,
   link_id: 0,
   node_ids: '',
@@ -120,6 +82,49 @@ const summaryData = reactive<any>({
   by_node: [],
 })
 
+// 分页配置
+const pagination = reactive({
+  current: 1,
+  pageSize: 20,
+  total: 0,
+  showTotal: false,
+  showJumper: false,
+  showPageSize: false,
+})
+
+// 表单项配置
+const formItems = computed(() => [
+  {
+    field: 'topology_id',
+    label: '拓扑 ID',
+    type: 'input' as const,
+    placeholder: '拓扑 ID',
+    colProps: { span: 8 },
+    props: {
+      type: 'number',
+      min: 0,
+    },
+  },
+  {
+    field: 'link_id',
+    label: '链路 ID',
+    type: 'input' as const,
+    placeholder: '链路 ID',
+    colProps: { span: 8 },
+    props: {
+      type: 'number',
+      min: 0,
+    },
+  },
+  {
+    field: 'node_ids',
+    label: '节点 ID',
+    type: 'input' as const,
+    placeholder: '多个节点 ID，逗号分隔',
+    colProps: { span: 8 },
+  },
+])
+
 // 显示的汇总字段（过滤掉元数据）
 const displayTotals = computed(() => {
   if (!summaryData.totals) return {}
@@ -143,7 +148,7 @@ const dynamicColumns = computed(() => {
     if (key !== 'node_id') {
       columns.push({
         key,
-        title: formatLabel(key),
+        slotName: String(key),
       })
     }
   }
@@ -151,6 +156,30 @@ const dynamicColumns = computed(() => {
   return columns
 })
 
+// 表格列配置
+const tableColumns = computed(() => {
+  const columns: any[] = [
+    {
+      title: '节点 ID',
+      dataIndex: 'node_id',
+      width: 200,
+      fixed: 'left' as const,
+    },
+  ]
+  
+  // 添加动态列
+  dynamicColumns.value.forEach((column) => {
+    columns.push({
+      title: formatLabel(column.key),
+      dataIndex: String(column.key),
+      width: 150,
+      slotName: column.slotName,
+    })
+  })
+  
+  return columns
+})
+
 // 格式化标签
 const formatLabel = (key: string) => {
   const labelMap: Record<string, string> = {
@@ -209,19 +238,19 @@ const formatValue = (key: string, value: any) => {
 // 构建查询参数
 const buildParams = () => {
   const params: any = {
-    start_time: formModel.timeRange[0],
-    end_time: formModel.timeRange[1],
+    start_time: formModel.value.timeRange[0],
+    end_time: formModel.value.timeRange[1],
     kind: 'summary',
   }
   
-  if (formModel.topology_id > 0) {
-    params.topology_id = formModel.topology_id
+  if (formModel.value.topology_id > 0) {
+    params.topology_id = formModel.value.topology_id
   }
-  if (formModel.link_id > 0) {
-    params.link_id = formModel.link_id
+  if (formModel.value.link_id > 0) {
+    params.link_id = formModel.value.link_id
   }
-  if (formModel.node_ids) {
-    params.node_ids = formModel.node_ids
+  if (formModel.value.node_ids) {
+    params.node_ids = formModel.value.node_ids
   }
   
   return params
@@ -230,11 +259,17 @@ const buildParams = () => {
 // 查询
 const handleSearch = async () => {
   // 验证必填项
-  if (!formModel.timeRange || formModel.timeRange.length !== 2) {
+  if (!formModel.value.timeRange || formModel.value.timeRange.length !== 2) {
     Message.warning('请选择时间范围')
     return
   }
   
+  pagination.current = 1
+  await fetchTableData()
+}
+
+// 获取表格数据
+const fetchTableData = async () => {
   loading.value = true
   
   try {
@@ -244,6 +279,7 @@ const handleSearch = async () => {
     if (res.code === 0) {
       summaryData.totals = res.data?.totals || null
       summaryData.by_node = res.data?.by_node || []
+      pagination.total = summaryData.by_node.length
       
       if (!summaryData.totals && summaryData.by_node.length === 0) {
         Message.info('未查询到数据')
@@ -252,31 +288,51 @@ const handleSearch = async () => {
       Message.error(res.message || '查询失败')
       summaryData.totals = null
       summaryData.by_node = []
+      pagination.total = 0
     }
   } catch (error: any) {
     console.error('查询失败:', error)
     Message.error(error.message || '查询失败')
     summaryData.totals = null
     summaryData.by_node = []
+    pagination.total = 0
   } finally {
     loading.value = false
   }
 }
 
+// 处理表单模型更新
+const handleFormModelUpdate = (value: any) => {
+  formModel.value = {
+    ...formModel.value,
+    ...value,
+  }
+}
+
 // 重置
 const handleReset = () => {
-  formModel.topology_id = 0
-  formModel.link_id = 0
-  formModel.node_ids = ''
-  formModel.timeRange = []
+  formModel.value = {
+    topology_id: 0,
+    link_id: 0,
+    node_ids: '',
+    timeRange: [],
+  }
+  pagination.current = 1
   summaryData.totals = null
   summaryData.by_node = []
+  pagination.total = 0
+}
+
+// 刷新
+const handleRefresh = () => {
+  fetchTableData()
+  Message.success('数据已刷新')
 }
 
 // 导出
 const handleExport = async () => {
   // 验证必填项
-  if (!formModel.timeRange || formModel.timeRange.length !== 2) {
+  if (!formModel.value.timeRange || formModel.value.timeRange.length !== 2) {
     Message.warning('请选择时间范围')
     return
   }
@@ -312,6 +368,35 @@ const handleExport = async () => {
     exporting.value = false
   }
 }
+
+// 初始化默认时间范围（最近24小时）
+const initDefaultTimeRange = () => {
+  const end = new Date()
+  const start = new Date(end.getTime() - 24 * 60 * 60 * 1000)
+  
+  // 格式化为 YYYY-MM-DD HH:mm:ss
+  const formatDateTime = (date: Date) => {
+    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}`
+  }
+  
+  formModel.value.timeRange = [
+    formatDateTime(start),
+    formatDateTime(end),
+  ]
+}
+
+// 组件挂载时初始化时间范围并自动查询
+onMounted(() => {
+  initDefaultTimeRange()
+  // 自动查询
+  handleSearch()
+})
 </script>
 
 <script lang="ts">
@@ -321,30 +406,11 @@ export default {
 </script>
 
 <style scoped lang="less">
-.traffic-summary-panel {
-  .search-form {
-    margin-bottom: 20px;
+.summary-card {
+  margin-bottom: 20px;
+  
+  :deep(.arco-card-body) {
     padding: 16px;
-    background-color: var(--color-fill-2);
-    border-radius: 4px;
-    
-    :deep(.arco-form-item) {
-      margin-bottom: 12px;
-    }
-  }
-  
-  .summary-cards {
-    margin-bottom: 20px;
-    
-    .summary-card {
-      :deep(.arco-card-body) {
-        padding: 16px;
-      }
-    }
-  }
-  
-  .result-table {
-    background-color: #fff;
   }
 }
 </style>
diff --git a/src/views/ops/pages/report/history/components/TrafficTrendPanel.vue b/src/views/ops/pages/report/history/components/TrafficTrendPanel.vue
index 227c378..784eebb 100644
--- a/src/views/ops/pages/report/history/components/TrafficTrendPanel.vue
+++ b/src/views/ops/pages/report/history/components/TrafficTrendPanel.vue
@@ -1,109 +1,65 @@
 <template>
-  <div class="traffic-trend-panel">
-    <!-- 查询表单 -->
-    <a-form :model="formModel" layout="inline" class="search-form">
-      <a-form-item label="拓扑 ID" field="topology_id">
-        <a-input-number
-          v-model="formModel.topology_id"
-          :min="0"
-          placeholder="拓扑 ID"
-          style="width: 150px"
-        />
-      </a-form-item>
-      
-      <a-form-item label="链路 ID" field="link_id">
-        <a-input-number
-          v-model="formModel.link_id"
-          :min="0"
-          placeholder="链路 ID"
-          style="width: 150px"
-        />
-      </a-form-item>
-      
-      <a-form-item label="节点 ID" field="node_ids">
-        <a-input
-          v-model="formModel.node_ids"
-          placeholder="多个节点 ID，逗号分隔"
-          style="width: 200px"
-        />
-      </a-form-item>
-      
-      <a-form-item label="时间粒度" field="granularity">
-        <a-select
-          v-model="formModel.granularity"
-          placeholder="请选择时间粒度"
-          style="width: 120px"
-        >
-          <a-option value="minute">分钟</a-option>
-          <a-option value="hour">小时</a-option>
-          <a-option value="day">天</a-option>
-        </a-select>
-      </a-form-item>
-      
-      <a-form-item label="时间范围" field="timeRange">
-        <a-range-picker
-          v-model="formModel.timeRange"
-          show-time
-          format="YYYY-MM-DD HH:mm:ss"
-          value-format="YYYY-MM-DD HH:mm:ss"
-          style="width: 380px"
-        />
-      </a-form-item>
-      
-      <a-form-item>
-        <a-space>
-          <a-button type="primary" :loading="loading" @click="handleSearch">
-            查询
-          </a-button>
-          <a-button @click="handleReset">
-            重置
-          </a-button>
-          <a-button :loading="exporting" @click="handleExport">
-            导出 CSV
-          </a-button>
-        </a-space>
-      </a-form-item>
-    </a-form>
-    
-    <!-- 趋势图表 -->
-    <div v-if="trendData.length > 0" class="chart-section">
-      <a-card title="流量趋势图" :bordered="false">
-        <div ref="chartRef" class="chart-container" />
-      </a-card>
-    </div>
-    
-    <!-- 趋势数据表格 -->
-    <a-divider v-if="trendData.length > 0">趋势数据明细</a-divider>
-    
-    <a-table
-      v-if="trendData.length > 0"
+  <div>
+    <search-table
+      :form-model="formModel"
+      :form-items="formItems"
       :data="tableData"
+      :columns="tableColumns"
       :loading="loading"
       :pagination="pagination"
-      :bordered="false"
-      stripe
-      class="result-table"
+      @update:form-model="handleFormModelUpdate"
+      @search="handleSearch"
+      @reset="handleReset"
+      @refresh="handleRefresh"
       @page-change="handlePageChange"
     >
-      <template #columns>
-        <a-table-column title="时间" data-index="time" width="180" fixed="left" />
-        <a-table-column title="节点 ID" data-index="node_id" width="180" />
-        <a-table-column
-          v-for="column in dynamicColumns"
-          :key="String(column.key)"
-          :title="column.title"
-          :data-index="String(column.key)"
-          :width="150"
-        >
-          <template #cell="{ record }">
-            <span>{{ formatValue(column.key, record[column.key]) }}</span>
-          </template>
-        </a-table-column>
+      <!-- 时间粒度选择器插槽 -->
+      <template #form-items>
+        <a-col :span="8">
+          <a-form-item label="时间粒度" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }">
+            <a-select
+              v-model="formModel.granularity"
+              placeholder="请选择时间粒度"
+              style="width: 100%"
+            >
+              <a-option value="minute">分钟</a-option>
+              <a-option value="hour">小时</a-option>
+              <a-option value="day">天</a-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :span="8">
+          <a-form-item label="时间范围" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }">
+            <a-range-picker
+              v-model="formModel.timeRange"
+              show-time
+              format="YYYY-MM-DD HH:mm:ss"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              style="width: 100%"
+            />
+          </a-form-item>
+        </a-col>
       </template>
-    </a-table>
-    
-    <!-- 空状态 -->
-    <a-empty v-if="!loading && trendData.length === 0" description="暂无数据" />
+
+      <!-- 趋势图表插槽 -->
+      <template #chart>
+        <a-card v-if="trendData.length > 0" title="流量趋势图" :bordered="false">
+          <div ref="chartRef" class="chart-container" />
+        </a-card>
+      </template>
+
+      <!-- 导出按钮插槽 -->
+      <template #actions>
+        <a-button :loading="exporting" @click="handleExport">
+          导出 CSV
+        </a-button>
+      </template>
+
+      <!-- 动态列的单元格渲染 -->
+      <template v-for="column in dynamicColumns" :key="String(column.key)" #[column.slotName]="{ record }">
+        <span>{{ formatValue(column.key, record[column.key]) }}</span>
+      </template>
+    </search-table>
   </div>
 </template>
 
@@ -111,10 +67,17 @@
 import { ref, reactive, computed, onMounted, onBeforeUnmount, nextTick } from 'vue'
 import { Message } from '@arco-design/web-vue'
 import * as echarts from 'echarts'
+import SearchTable from '@/components/search-table/index.vue'
 import { fetchTrafficTrend, exportTrafficReport } from '@/api/ops/report'
 
 // 表单模型
-const formModel = reactive({
+const formModel = ref<{
+  topology_id: number
+  link_id: number
+  node_ids: string
+  granularity: string
+  timeRange: string[]
+}>({
   topology_id: 0,
   link_id: 0,
   node_ids: '',
@@ -143,6 +106,39 @@ const pagination = reactive({
 const chartRef = ref<HTMLElement>()
 let chartInstance: echarts.ECharts | null = null
 
+// 表单项配置
+const formItems = computed(() => [
+  {
+    field: 'topology_id',
+    label: '拓扑 ID',
+    type: 'input' as const,
+    placeholder: '拓扑 ID',
+    colProps: { span: 8 },
+    props: {
+      type: 'number',
+      min: 0,
+    },
+  },
+  {
+    field: 'link_id',
+    label: '链路 ID',
+    type: 'input' as const,
+    placeholder: '链路 ID',
+    colProps: { span: 8 },
+    props: {
+      type: 'number',
+      min: 0,
+    },
+  },
+  {
+    field: 'node_ids',
+    label: '节点 ID',
+    type: 'input' as const,
+    placeholder: '多个节点 ID，逗号分隔',
+    colProps: { span: 8 },
+  },
+])
+
 // 动态列（从第一条记录中提取所有字段，排除 time、timestamp、node_id）
 const dynamicColumns = computed(() => {
   if (trendData.value.length === 0) return []
@@ -154,7 +150,7 @@ const dynamicColumns = computed(() => {
     if (key !== 'time' && key !== 'timestamp' && key !== 'node_id') {
       columns.push({
         key,
-        title: formatLabel(key),
+        slotName: String(key),
       })
     }
   }
@@ -162,6 +158,35 @@ const dynamicColumns = computed(() => {
   return columns
 })
 
+// 表格列配置
+const tableColumns = computed(() => {
+  const columns: any[] = [
+    {
+      title: '时间',
+      dataIndex: 'time',
+      width: 180,
+      fixed: 'left' as const,
+    },
+    {
+      title: '节点 ID',
+      dataIndex: 'node_id',
+      width: 180,
+    },
+  ]
+  
+  // 添加动态列
+  dynamicColumns.value.forEach((column) => {
+    columns.push({
+      title: formatLabel(column.key),
+      dataIndex: String(column.key),
+      width: 150,
+      slotName: column.slotName,
+    })
+  })
+  
+  return columns
+})
+
 // 格式化标签
 const formatLabel = (key: string) => {
   const labelMap: Record<string, string> = {
@@ -342,20 +367,20 @@ const handleResize = () => {
 // 构建查询参数
 const buildParams = () => {
   const params: any = {
-    start_time: formModel.timeRange[0],
-    end_time: formModel.timeRange[1],
+    start_time: formModel.value.timeRange[0],
+    end_time: formModel.value.timeRange[1],
     kind: 'trend',
-    granularity: formModel.granularity,
+    granularity: formModel.value.granularity,
   }
   
-  if (formModel.topology_id > 0) {
-    params.topology_id = formModel.topology_id
+  if (formModel.value.topology_id > 0) {
+    params.topology_id = formModel.value.topology_id
   }
-  if (formModel.link_id > 0) {
-    params.link_id = formModel.link_id
+  if (formModel.value.link_id > 0) {
+    params.link_id = formModel.value.link_id
   }
-  if (formModel.node_ids) {
-    params.node_ids = formModel.node_ids
+  if (formModel.value.node_ids) {
+    params.node_ids = formModel.value.node_ids
   }
   
   return params
@@ -372,11 +397,17 @@ const updateTableData = () => {
 // 查询
 const handleSearch = async () => {
   // 验证必填项
-  if (!formModel.timeRange || formModel.timeRange.length !== 2) {
+  if (!formModel.value.timeRange || formModel.value.timeRange.length !== 2) {
     Message.warning('请选择时间范围')
     return
   }
   
+  pagination.current = 1
+  await fetchTableData()
+}
+
+// 获取表格数据
+const fetchTableData = async () => {
   loading.value = true
   
   try {
@@ -386,7 +417,6 @@ const handleSearch = async () => {
     if (res.code === 0) {
       trendData.value = res.data?.data || []
       pagination.total = trendData.value.length
-      pagination.current = 1
       
       if (trendData.value.length > 0) {
         updateTableData()
@@ -418,23 +448,39 @@ const handleSearch = async () => {
   }
 }
 
+// 处理表单模型更新
+const handleFormModelUpdate = (value: any) => {
+  formModel.value = {
+    ...formModel.value,
+    ...value,
+  }
+}
+
 // 重置
 const handleReset = () => {
-  formModel.topology_id = 0
-  formModel.link_id = 0
-  formModel.node_ids = ''
-  formModel.granularity = 'hour'
-  formModel.timeRange = []
+  formModel.value = {
+    topology_id: 0,
+    link_id: 0,
+    node_ids: '',
+    granularity: 'hour',
+    timeRange: [],
+  }
+  pagination.current = 1
   trendData.value = []
   tableData.value = []
   pagination.total = 0
-  pagination.current = 1
   
   if (chartInstance) {
     chartInstance.clear()
   }
 }
 
+// 刷新
+const handleRefresh = () => {
+  fetchTableData()
+  Message.success('数据已刷新')
+}
+
 // 分页变化
 const handlePageChange = (current: number) => {
   pagination.current = current
@@ -444,7 +490,7 @@ const handlePageChange = (current: number) => {
 // 导出
 const handleExport = async () => {
   // 验证必填项
-  if (!formModel.timeRange || formModel.timeRange.length !== 2) {
+  if (!formModel.value.timeRange || formModel.value.timeRange.length !== 2) {
     Message.warning('请选择时间范围')
     return
   }
@@ -481,9 +527,35 @@ const handleExport = async () => {
   }
 }
 
+// 初始化默认时间范围（最近24小时）
+const initDefaultTimeRange = () => {
+  const end = new Date()
+  const start = new Date(end.getTime() - 24 * 60 * 60 * 1000)
+  
+  // 格式化为 YYYY-MM-DD HH:mm:ss
+  const formatDateTime = (date: Date) => {
+    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}`
+  }
+  
+  formModel.value.timeRange = [
+    formatDateTime(start),
+    formatDateTime(end),
+  ]
+}
+
 // 生命周期钩子
 onMounted(() => {
-  // 可选：自动加载默认数据
+  // 初始化默认时间范围
+  initDefaultTimeRange()
+  
+  // 自动查询
+  handleSearch()
 })
 
 onBeforeUnmount(() => {
@@ -502,29 +574,8 @@ export default {
 </script>
 
 <style scoped lang="less">
-.traffic-trend-panel {
-  .search-form {
-    margin-bottom: 20px;
-    padding: 16px;
-    background-color: var(--color-fill-2);
-    border-radius: 4px;
-    
-    :deep(.arco-form-item) {
-      margin-bottom: 12px;
-    }
-  }
-  
-  .chart-section {
-    margin-bottom: 20px;
-    
-    .chart-container {
-      width: 100%;
-      height: 400px;
-    }
-  }
-  
-  .result-table {
-    background-color: #fff;
-  }
+.chart-container {
+  width: 100%;
+  height: 400px;
 }
 </style>
diff --git a/src/views/ops/pages/report/history/index.vue b/src/views/ops/pages/report/history/index.vue
index d9cda81..0d5a8f2 100644
--- a/src/views/ops/pages/report/history/index.vue
+++ b/src/views/ops/pages/report/history/index.vue
@@ -8,32 +8,32 @@
       <a-tabs v-model:active-key="activeTab" @change="handleTabChange">
         <!-- 监测指标 TOPN -->
         <a-tab-pane key="metrics-topn" title="监测指标 TOPN">
-          <metrics-topn-panel />
+          <MetricsTopNPanel />
         </a-tab-pane>
         
         <!-- 监测指标汇总 -->
         <a-tab-pane key="metrics-summary" title="监测指标汇总">
-          <metrics-summary-panel />
+          <MetricsSummaryPanel />
         </a-tab-pane>
         
         <!-- 流量报表汇总 -->
         <a-tab-pane key="traffic-summary" title="流量报表汇总">
-          <traffic-summary-panel />
+          <TrafficSummaryPanel />
         </a-tab-pane>
         
         <!-- 流量报表趋势 -->
         <a-tab-pane key="traffic-trend" title="流量报表趋势">
-          <traffic-trend-panel />
+          <TrafficTrendPanel />
         </a-tab-pane>
         
         <!-- 服务器状态 -->
         <a-tab-pane key="server-status" title="服务器状态">
-          <server-status-panel />
+          <ServerStatusPanel />
         </a-tab-pane>
         
         <!-- 网络设备状态 -->
         <a-tab-pane key="network-status" title="网络设备状态">
-          <network-status-panel />
+          <NetworkStatusPanel />
         </a-tab-pane>
       </a-tabs>
     </a-card>