diff --git a/src/api/ops/assetCategory.ts b/src/api/ops/assetCategory.ts
index a051cf0..6ed0056 100644
--- a/src/api/ops/assetCategory.ts
+++ b/src/api/ops/assetCategory.ts
@@ -1,46 +1,92 @@
-import { request } from "@/api/request";
+import { request } from '@/api/request'
+
+/** 资产分类数据类型 */
+export interface AssetCategory {
+  id: number
+  name: string
+  code: string
+  description?: string
+  icon?: string
+  color?: string
+  parent_id?: number
+  parent?: AssetCategory
+  level: number
+  path?: string
+  enabled: boolean
+  sort: number
+  asset_count: number
+  remarks?: string
+  created_by?: string
+  updated_by?: string
+  created_at?: string
+  updated_at?: string
+  children?: AssetCategory[]
+}
+
+/** 分页列表参数 */
+export interface CategoryListParams {
+  page?: number
+  page_size?: number
+  sort?: string
+  order?: 'asc' | 'desc'
+  keyword?: string
+}
+
+/** 创建/更新分类参数 */
+export interface CategoryFormData {
+  id?: number
+  name: string
+  code: string
+  description?: string
+  icon?: string
+  color?: string
+  parent_id?: number | null
+  enabled?: boolean
+  sort?: number
+  remarks?: string
+}
 
 /** 获取资产分类列表（分页） */
-export const fetchCategoryList = (data?: {
-  page?: number;
-  page_size?: number;
-  keyword?: string;
-  parent_id?: number;
-}) => {
-  return request.post("/Assets/v1/category/list", data || {});
-};
+export const fetchCategoryList = (params?: CategoryListParams) => {
+  return request.post('/Assets/v1/category/list', params || {})
+}
 
 /** 获取资产分类详情 */
 export const fetchCategoryDetail = (id: number) => {
-  return request.get(`/Assets/v1/category/detail/${id}`);
-};
+  return request.get(`/Assets/v1/category/detail/${id}`)
+}
 
 /** 创建资产分类 */
-export const createCategory = (data: any) => {
-  return request.post("/Assets/v1/category/create", data);
-};
+export const createCategory = (data: CategoryFormData) => {
+  return request.post('/Assets/v1/category/create', data)
+}
 
 /** 更新资产分类 */
-export const updateCategory = (data: any) => {
-  return request.put("/Assets/v1/category/update", data);
-};
+export const updateCategory = (data: CategoryFormData) => {
+  return request.put('/Assets/v1/category/update', data)
+}
 
 /** 删除资产分类 */
 export const deleteCategory = (id: number) => {
-  return request.delete(`/Assets/v1/category/delete/${id}`);
-};
+  return request.delete(`/Assets/v1/category/delete/${id}`)
+}
 
 /** 获取所有资产分类（用于下拉选择） */
-export const fetchAllCategories = () => {
-  return request.get("/Assets/v1/category/all");
-};
+export const fetchAllCategories = (keyword?: string) => {
+  return request.get('/Assets/v1/category/all', { params: { keyword } })
+}
 
 /** 获取资产分类树形结构 */
-export const fetchCategoryTree = () => {
-  return request.get("/Assets/v1/category/tree");
-};
+export const fetchCategoryTree = (keyword?: string) => {
+  return request.get('/Assets/v1/category/tree', { params: { keyword } })
+}
 
 /** 获取指定分类的子分类列表 */
 export const fetchCategoryChildren = (id: number) => {
-  return request.get(`/Assets/v1/category/children/${id}`);
-};
+  return request.get(`/Assets/v1/category/children/${id}`)
+}
+
+/** 根据父级分类ID获取分类列表 */
+export const fetchCategoryByParent = (parentId: number) => {
+  return request.get(`/Assets/v1/category/parent/${parentId}`)
+}
diff --git a/src/api/ops/supplier.ts b/src/api/ops/supplier.ts
index 9f05e8a..2b8b92b 100644
--- a/src/api/ops/supplier.ts
+++ b/src/api/ops/supplier.ts
@@ -32,9 +32,10 @@ export const deleteSupplier = (id: number) => {
 };
 
 /** 获取所有供应商（用于下拉选择） */
-export const fetchAllSuppliers = (keyword?: string, status?: string) => {
+export const fetchAllSuppliers = (keyword?: string, status?: string, pageSize?: number) => {
   const params: any = {};
   if (keyword) params.keyword = keyword;
   if (status) params.status = status;
+  if (pageSize) params.page_size = pageSize;
   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 6b1f40d..e97f4f6 100644
--- a/src/router/routes/modules/ops.ts
+++ b/src/router/routes/modules/ops.ts
@@ -96,7 +96,7 @@ const OPS: AppRouteRecordRaw = {
     // {
     //   path: 'assets/device',
     //   name: 'AssetsDevice',
-    //   component: () => import('@/views/ops/pages/assets/device/index.vue'),
+    //   component: () => import('@/views/ops/pages/assets/device/list/index.vue'),
     //   meta: {
     //     locale: '设备管理',
     //     requiresAuth: true,
@@ -104,9 +104,20 @@ const OPS: AppRouteRecordRaw = {
     //   },
     // },
     // {
+    //   path: 'assets/device/form',
+    //   name: 'AssetsDeviceForm',
+    //   component: () => import('@/views/ops/pages/assets/device/form/index.vue'),
+    //   meta: {
+    //     locale: '新增/编辑设备',
+    //     requiresAuth: true,
+    //     roles: ['*'],
+    //     hideInMenu: true,
+    //   },
+    // },
+    // {
     //   path: 'assets/supplier',
     //   name: 'AssetsSupplier',
-    //   component: () => import('@/views/ops/pages/assets/supplier/index.vue'),
+    //   component: () => import('@/views/ops/pages/assets/supplier/list/index.vue'),
     //   meta: {
     //     locale: '供应商管理',
     //     requiresAuth: true,
@@ -114,6 +125,17 @@ const OPS: AppRouteRecordRaw = {
     //   },
     // },
     // {
+    //   path: 'assets/supplier/form',
+    //   name: 'AssetsSupplierForm',
+    //   component: () => import('@/views/ops/pages/assets/supplier/form/index.vue'),
+    //   meta: {
+    //     locale: '新增/编辑供应商',
+    //     requiresAuth: true,
+    //     roles: ['*'],
+    //     hideInMenu: true,
+    //   },
+    // },
+    // {
     //   path: 'assets/classify',
     //   name: 'AssetsClassify',
     //   component: () => import('@/views/ops/pages/assets/classify/index.vue'),
diff --git a/src/views/help/index.vue b/src/views/help/index.vue
index e6427e5..d85b17b 100644
--- a/src/views/help/index.vue
+++ b/src/views/help/index.vue
@@ -21,8 +21,8 @@
       <div class="banner-overlay"></div>
       <div class="banner-content">
         <h1>帮助中心</h1>
-        <p>查找您需要的答案，快速解决问题</p>
-        <div class="search-box">
+        <p>智能运维管理系统使用指南，助您快速掌握系统功能</p>
+        <!-- <div class="search-box">
           <a-input
             v-model="searchQuery"
             placeholder="搜索帮助文档..."
@@ -34,7 +34,7 @@
               <IconSearch />
             </template>
           </a-input>
-        </div>
+        </div> -->
       </div>
     </section>
 
@@ -52,25 +52,29 @@
               <template #icon><IconRocket /></template>
               快速入门
             </a-menu-item>
-            <a-menu-item key="dashboard">
-              <template #icon><IconDashboard /></template>
-              仪表盘
+            <a-menu-item key="monitor">
+              <template #icon><IconDesk /></template>
+              综合监控
             </a-menu-item>
             <a-menu-item key="alert">
               <template #icon><IconAlertCircle /></template>
               告警管理
             </a-menu-item>
             <a-menu-item key="datacenter">
-              <template #icon><IconDatabase /></template>
+              <template #icon><IconBuilding /></template>
               数据中心
             </a-menu-item>
-            <a-menu-item key="report">
-              <template #icon><IconChartLine /></template>
-              报表分析
+            <a-menu-item key="netarch">
+              <template #icon><IconNetwork /></template>
+              网络架构
             </a-menu-item>
-            <a-menu-item key="system">
-              <template #icon><IconSettings /></template>
-              系统设置
+            <a-menu-item key="asset">
+              <template #icon><IconPackage /></template>
+              资产管理
+            </a-menu-item>
+            <a-menu-item key="ticket">
+              <template #icon><IconTicket /></template>
+              工单管理
             </a-menu-item>
           </a-menu>
         </aside>
@@ -111,7 +115,7 @@
                 v-for="guide in filteredGuides"
                 :key="guide.id"
                 class="guide-card"
-                @click="viewGuideDetail(guide)"
+                @click="openGuideDetail(guide)"
               >
                 <div class="guide-icon">
                   <component :is="guide.icon" />
@@ -122,38 +126,9 @@
                   <span class="guide-category">{{ guide.categoryName }}</span>
                   <span class="guide-updated">{{ guide.updatedAt }}</span>
                 </div>
-              </div>
-            </div>
-          </section>
-
-          <!-- 操作手册 -->
-          <section class="help-section">
-            <h2 class="section-title">
-              <IconFile />
-              操作手册
-            </h2>
-            
-            <div class="manual-list">
-              <div
-                v-for="manual in manuals"
-                :key="manual.id"
-                class="manual-item"
-              >
-                <div class="manual-icon">
-                  <IconDownload />
+                <div class="guide-action">
+                  <span class="view-link">点击查看详情 →</span>
                 </div>
-                <div class="manual-info">
-                  <h3>{{ manual.title }}</h3>
-                  <p>{{ manual.description }}</p>
-                  <div class="manual-meta">
-                    <span>格式：{{ manual.format }}</span>
-                    <span>大小：{{ manual.size }}</span>
-                    <span>更新：{{ manual.updatedAt }}</span>
-                  </div>
-                </div>
-                <a-button type="primary" @click="downloadManual(manual)">
-                  下载
-                </a-button>
               </div>
             </div>
           </section>
@@ -172,9 +147,9 @@
                   <IconPhone />
                 </div>
                 <div class="contact-content">
-                  <h3>电话联系</h3>
+                  <h3>技术支持热线</h3>
                   <p class="contact-time">工作日 9:00-18:00</p>
-                  <p class="contact-value">400-XXX-XXXX</p>
+                  <p class="contact-value">400-888-8888</p>
                 </div>
               </div>
 
@@ -185,7 +160,7 @@
                 <div class="contact-content">
                   <h3>邮件咨询</h3>
                   <p class="contact-time">我们会在 24 小时内回复</p>
-                  <p class="contact-value">support@example.com</p>
+                  <p class="contact-value">david.yan@qq.com</p>
                 </div>
               </div>
 
@@ -213,25 +188,57 @@
         <p>&copy; 2026 智能运维管理系统。All rights reserved.</p>
       </div>
     </footer>
+
+    <!-- 使用指南详情弹窗 -->
+    <a-modal
+      v-model:visible="guideModalVisible"
+      :title="currentGuide?.title"
+      :width="800"
+      :footer="false"
+      unmount-on-close
+    >
+      <div class="guide-detail-content">
+        <div class="guide-detail-header">
+          <div class="guide-detail-meta">
+            <a-tag color="arcoblue">{{ currentGuide?.categoryName }}</a-tag>
+            <span class="guide-detail-date">更新时间：{{ currentGuide?.updatedAt }}</span>
+          </div>
+        </div>
+        <div class="guide-detail-body">
+          <div v-if="currentGuide?.content" class="guide-content">
+            <div v-for="(section, idx) in currentGuide.content" :key="idx" class="content-section">
+              <h3>{{ section.title }}</h3>
+              <p>{{ section.text }}</p>
+              <ul v-if="section.items">
+                <li v-for="(item, i) in section.items" :key="i">{{ item }}</li>
+              </ul>
+            </div>
+          </div>
+          <div v-else class="guide-placeholder">
+            <a-empty description="文档内容正在编写中，敬请期待" />
+          </div>
+        </div>
+      </div>
+    </a-modal>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
+import { Message } from '@arco-design/web-vue'
 import {
   IconSearch,
   IconList,
   IconRocket,
-  IconDashboard,
+  IconDesk,
   IconAlertCircle,
-  IconDatabase,
-  IconChartLine,
-  IconSettings,
+  IconBuilding,
+  IconNetwork,
+  IconPackage,
+  IconTicket,
   IconHelp,
   IconBook,
-  IconFile,
-  IconDownload,
   IconHeadset,
   IconPhone,
   IconMail,
@@ -242,141 +249,392 @@ const router = useRouter()
 const searchQuery = ref('')
 const activeCategory = ref('all')
 
-// FAQ 数据
+// 弹窗状态
+const guideModalVisible = ref(false)
+const currentGuide = ref<any>(null)
+
+// FAQ 数据 - 智能运维管理系统相关
 const faqs = ref([
   {
-    question: '如何登录系统？',
-    answer: '在登录页面输入您的用户名和密码，点击登录按钮即可。如果忘记密码，可以点击"忘记密码"链接进行重置。',
+    question: '如何登录智能运维管理系统？',
+    answer: '在登录页面输入您的用户名和密码，点击登录按钮即可。如果忘记密码，可以点击"忘记密码"链接进行重置，或联系系统管理员协助重置密码。',
     category: 'quickstart'
   },
   {
-    question: '如何查看监控仪表盘？',
-    answer: '登录后，在左侧菜单点击"仪表盘" -> "工作台"即可查看实时监控仪表盘。您可以根据需要切换不同的视图和筛选条件。',
-    category: 'dashboard'
+    question: '如何查看服务器和PC设备的运行状态？',
+    answer: '登录系统后，进入"服务器及PC管理"菜单，可以查看服务器管理和办公PC管理两个子模块。在列表中可以查看设备的在线状态、资源使用情况等详细信息。',
+    category: 'quickstart'
   },
   {
-    question: '如何配置告警策略？',
-    answer: '进入"告警管理" -> "告警策略"页面，点击"新建策略"按钮，填写相关配置信息，包括告警条件、通知方式等，保存后即可生效。',
+    question: '如何配置监控告警策略？',
+    answer: '进入"告警管理" -> "告警策略管理"页面，点击"新建策略"按钮，选择监控对象类型、设置告警条件、通知方式和接收人员，保存后即可生效。系统支持多种告警通知渠道，包括邮件、短信、企业微信等。',
     category: 'alert'
   },
   {
-    question: '如何添加新的机房？',
-    answer: '在"数据中心" -> "机房管理"页面，点击"新增机房"按钮，填写机房名称、位置、面积等信息，完成后点击保存。',
+    question: '告警触发后如何处理？',
+    answer: '当告警触发时，进入"告警管理" -> "告警受理处理"页面，可以查看待处理的告警列表。点击具体告警记录，可以查看详细信息并进行受理、转派或关闭操作。处理完成后，告警记录会保存在告警历史中供后续查询。',
+    category: 'alert'
+  },
+  {
+    question: '如何查看网络设备的监控数据？',
+    answer: '进入"综合监控" -> "网络设备监控"页面，可以查看所有网络设备的实时监控数据，包括设备状态、端口流量、CPU/内存使用率等。支持按设备类型、IP地址等条件筛选，也可以设置监控阈值。',
+    category: 'monitor'
+  },
+  {
+    question: '如何查看存储设备的运行状态？',
+    answer: '进入"综合监控" -> "存储设备监控"页面，可以查看存储设备的容量使用情况、IOPS、吞吐量等关键指标。系统支持多种存储品牌和型号的自动发现和监控。',
+    category: 'monitor'
+  },
+  {
+    question: '如何管理数据中心的机柜信息？',
+    answer: '进入"数据中心管理" -> "机柜管理"页面，可以添加、编辑、删除机柜信息。支持查看机柜内的设备分布、U位使用情况，以及机柜的电力和制冷状态。还可以通过可视化界面查看机柜布局。',
     category: 'datacenter'
   },
   {
-    question: '如何导出报表数据？',
-    answer: '在相应的报表页面，选择需要导出的时间范围和数据类型，点击右上角的"导出"按钮，选择导出格式（Excel/PDF），即可下载报表文件。',
-    category: 'report'
+    question: '如何添加新的数据中心和楼层？',
+    answer: '在"数据中心管理"模块中，先在"数据中心"页面添加数据中心基本信息，然后在"楼层管理"页面添加该数据中心的楼层信息。添加完成后，可以在机柜管理中关联具体位置。',
+    category: 'datacenter'
   },
   {
-    question: '如何修改个人信息？',
-    answer: '点击右上角的用户头像，选择"个人设置"，可以修改您的个人信息、密码、联系方式等。修改后记得点击保存。',
-    category: 'system'
+    question: '如何查看网络拓扑图？',
+    answer: '进入"网络架构管理" -> "拓扑管理"页面，可以查看和管理网络拓扑图。系统支持自动发现网络设备并生成拓扑图，也可以手动编辑拓扑结构。"自动感知拓扑图"功能可以实时更新网络拓扑变化。',
+    category: 'netarch'
+  },
+  {
+    question: '如何进行IP地址管理？',
+    answer: '进入"网络架构管理" -> "IP地址管理"页面，可以查看和管理IP地址池。支持IP地址分配、回收、冲突检测等功能，可以按子网、VLAN等维度进行管理。',
+    category: 'netarch'
+  },
+  {
+    question: '如何添加新的资产设备？',
+    answer: '进入"资产管理" -> "设备管理"页面，点击"新增设备"按钮，填写设备基本信息（名称、型号、IP地址等）、选择设备分类、关联供应商信息，保存后即可完成添加。也可以通过批量导入功能一次性添加多台设备。',
+    category: 'asset'
+  },
+  {
+    question: '如何管理设备供应商信息？',
+    answer: '在"资产管理" -> "供应商管理"页面，可以添加和维护供应商信息，包括供应商名称、联系方式、服务范围等。设备管理时可以关联供应商，便于后续的维保管理。',
+    category: 'asset'
+  },
+  {
+    question: '如何创建和处理工单？',
+    answer: '进入"工单管理"模块，可以创建新工单或处理待办工单。在"我的工单"中查看分配给自己的工单，在"所有工单"中查看全部工单。支持工单的创建、分配、处理、转派、关闭等完整流程。',
+    category: 'ticket'
+  },
+  {
+    question: '如何配置数据库和中间件的采集？',
+    answer: '进入"集群采集控制中心"模块，在"数据库采集管理"或"中间件采集管理"页面，可以配置需要监控的数据库和中间件实例。填写连接信息后，系统会自动采集性能指标和运行状态。',
+    category: 'monitor'
+  },
+  {
+    question: '如何查看可视化大屏？',
+    answer: '进入"可视化大屏管理"模块，可以查看和管理运维大屏。在"大屏管理"中创建和编辑大屏，在"已发布大屏列表"中查看已发布的大屏。大屏可以展示监控概览、告警统计、资源使用等关键指标。',
+    category: 'quickstart'
   },
   {
     question: '系统支持哪些浏览器？',
-    answer: '系统支持主流的现代浏览器，包括 Chrome、Firefox、Edge、Safari 等。建议使用最新版本的浏览器以获得最佳体验。',
-    category: 'system'
-  },
-  {
-    question: '遇到技术问题如何反馈？',
-    answer: '您可以通过以下方式反馈问题：1. 拨打技术支持热线；2. 发送邮件至 support@example.com；3. 使用在线客服功能。',
-    category: 'system'
+    answer: '智能运维管理系统支持主流的现代浏览器，包括 Chrome（推荐）、Firefox、Edge、Safari 等。建议使用最新版本的浏览器以获得最佳体验，屏幕分辨率建议 1920x1080 及以上。',
+    category: 'quickstart'
   }
 ])
 
-// 使用指南数据
+// 使用指南数据 - 包含详细内容
 const guides = ref([
   {
     id: 1,
-    title: '新手入门指南',
-    description: '帮助您快速了解系统的基本功能和操作流程',
+    title: '系统快速入门指南',
+    description: '帮助您快速了解智能运维管理系统的基本功能和操作流程',
     icon: IconRocket,
     category: 'quickstart',
     categoryName: '快速入门',
-    updatedAt: '2026-03-15'
+    updatedAt: '2026-03-15',
+    content: [
+      {
+        title: '系统概述',
+        text: '智能运维管理系统是一套集监控、告警、资产管理、工单处理于一体的综合运维平台，旨在帮助运维人员高效管理IT基础设施。'
+      },
+      {
+        title: '登录系统',
+        text: '打开浏览器访问系统地址，输入用户名和密码登录。首次登录建议修改默认密码，确保账户安全。',
+        items: ['支持多种认证方式', '支持单点登录(SSO)', '支持密码找回功能']
+      },
+      {
+        title: '主要功能模块',
+        text: '系统包含以下核心功能模块：',
+        items: [
+          '系统概况：查看整体运维状态概览',
+          '可视化大屏管理：创建和管理运维展示大屏',
+          '服务器及PC管理：管理服务器和办公电脑',
+          '集群采集控制中心：配置数据库、中间件、网络设备采集',
+          '综合监控：监控各类IT设备和环境',
+          '网络架构管理：拓扑管理、流量分析、IP管理',
+          '告警管理：告警策略、告警处理、告警历史',
+          '工单管理：创建和处理运维工单',
+          '数据中心管理：机房、楼层、机柜管理',
+          '资产管理：设备分类、设备信息、供应商管理'
+        ]
+      },
+      {
+        title: '界面导航',
+        text: '左侧为功能菜单，点击展开子菜单；顶部显示当前页面标题和用户信息；右侧为内容区域，展示具体功能页面。'
+      }
+    ]
   },
   {
     id: 2,
-    title: '仪表盘使用详解',
-    description: '详细介绍仪表盘的各个功能模块和使用技巧',
-    icon: IconDashboard,
-    category: 'dashboard',
-    categoryName: '仪表盘',
-    updatedAt: '2026-03-18'
+    title: '综合监控使用手册',
+    description: '详细介绍网络设备、存储、安全设备、虚拟化等各类监控功能的使用方法',
+    icon: IconDesk,
+    category: 'monitor',
+    categoryName: '综合监控',
+    updatedAt: '2026-03-18',
+    content: [
+      {
+        title: '监控概述',
+        text: '综合监控模块提供对IT基础设施的全方位监控，包括网络设备、存储设备、安全设备、虚拟化平台、环境动力等。'
+      },
+      {
+        title: '网络设备监控',
+        text: '进入"综合监控" -> "网络设备监控"，可以查看路由器、交换机、防火墙等网络设备的运行状态。',
+        items: ['实时查看设备在线状态', '监控端口流量和带宽使用', '查看CPU、内存使用率', '配置监控阈值和告警']
+      },
+      {
+        title: '存储设备监控',
+        text: '进入"综合监控" -> "存储设备监控"，监控存储阵列、NAS等存储设备。',
+        items: ['查看存储容量和使用率', '监控IOPS和吞吐量', '查看磁盘健康状态', '支持主流存储品牌']
+      },
+      {
+        title: '虚拟化监控',
+        text: '进入"综合监控" -> "虚拟化监控"，监控VMware、Hyper-V等虚拟化平台。',
+        items: ['查看虚拟机运行状态', '监控资源分配和使用', '查看宿主机性能指标']
+      },
+      {
+        title: '环境动力监控',
+        text: '进入"综合监控" -> "电力/UPS/空调/温湿度"，监控机房环境。',
+        items: ['UPS状态和电池容量', '空调运行状态', '温湿度实时数据', '电力负载情况']
+      }
+    ]
   },
   {
     id: 3,
-    title: '告警配置完整教程',
-    description: '从基础到高级的告警策略配置方法',
+    title: '告警配置与管理指南',
+    description: '从告警策略配置到告警处理的全流程操作说明',
     icon: IconAlertCircle,
     category: 'alert',
     categoryName: '告警管理',
-    updatedAt: '2026-03-20'
+    updatedAt: '2026-03-20',
+    content: [
+      {
+        title: '告警体系概述',
+        text: '告警管理模块提供完整的告警生命周期管理，从告警策略配置、告警触发、告警通知到告警处理和归档。'
+      },
+      {
+        title: '告警级别管理',
+        text: '系统预设多个告警级别（紧急、重要、一般、提示），可在"告警级别管理"中自定义级别名称和颜色标识。'
+      },
+      {
+        title: '告警模版配置',
+        text: '在"告警模版"中创建告警规则模版，定义监控指标、阈值条件、告警级别等。',
+        items: ['选择监控对象类型', '设置指标和阈值条件', '配置告警级别', '设置静默时间']
+      },
+      {
+        title: '告警策略管理',
+        text: '在"告警策略管理"中将模版应用到具体设备或设备组，并配置通知方式。',
+        items: ['选择告警模版', '指定监控对象', '配置通知渠道', '设置通知接收人']
+      },
+      {
+        title: '告警受理处理',
+        text: '在"告警受理处理"中查看和处理触发的告警。',
+        items: ['查看告警详情', '受理告警并标记处理状态', '转派给其他人员', '添加处理备注', '关闭告警']
+      },
+      {
+        title: '告警历史查询',
+        text: '在"告警历史"中查询历史告警记录，支持按时间、设备、级别等条件筛选。'
+      }
+    ]
   },
   {
     id: 4,
-    title: '机房设备管理手册',
-    description: '机房、机柜、设备等资源的规范管理方法',
-    icon: IconDatabase,
+    title: '数据中心管理手册',
+    description: '数据中心、楼层、机柜等基础设施的管理方法',
+    icon: IconBuilding,
     category: 'datacenter',
     categoryName: '数据中心',
-    updatedAt: '2026-03-19'
+    updatedAt: '2026-03-19',
+    content: [
+      {
+        title: '数据中心管理概述',
+        text: '数据中心管理模块用于管理机房基础设施信息，包括数据中心、楼层、机柜的层级管理。'
+      },
+      {
+        title: '数据中心信息管理',
+        text: '在"数据中心"页面管理数据中心基本信息。',
+        items: ['数据中心名称和编码', '地理位置和地址', '总面积和可用面积', '负责人和联系方式']
+      },
+      {
+        title: '楼层管理',
+        text: '在"楼层管理"页面添加数据中心下的楼层信息。',
+        items: ['楼层编号和名称', '楼层面积', '功能区域划分']
+      },
+      {
+        title: '机柜管理',
+        text: '在"机柜管理"页面管理机柜信息，支持可视化机柜布局。',
+        items: ['机柜编号和位置', '机柜规格（高度、宽度）', 'U位使用情况', '机柜内设备列表', '电力和制冷状态']
+      },
+      {
+        title: '机柜可视化',
+        text: '点击机柜可查看机柜内部设备分布图，直观展示U位占用情况，支持设备上架、下架操作。'
+      }
+    ]
   },
   {
     id: 5,
-    title: '数据报表生成指南',
-    description: '学习如何生成和导出各类业务报表',
-    icon: IconChartLine,
-    category: 'report',
-    categoryName: '报表分析',
-    updatedAt: '2026-03-17'
+    title: '网络架构管理指南',
+    description: '拓扑管理、流量分析、IP地址管理等网络运维功能详解',
+    icon: IconNetwork,
+    category: 'netarch',
+    categoryName: '网络架构',
+    updatedAt: '2026-03-17',
+    content: [
+      {
+        title: '网络架构管理概述',
+        text: '网络架构管理模块提供网络拓扑可视化、流量分析、IP地址管理等功能，帮助运维人员全面掌握网络架构。'
+      },
+      {
+        title: '拓扑管理',
+        text: '在"拓扑管理"中创建和管理网络拓扑图。',
+        items: ['手动创建拓扑图', '自动发现网络拓扑', '编辑设备连接关系', '设置拓扑图展示样式']
+      },
+      {
+        title: '自动感知拓扑图',
+        text: '系统可自动发现网络设备及其连接关系，生成动态拓扑图，实时反映网络架构变化。'
+      },
+      {
+        title: '流量分析管理',
+        text: '在"流量分析管理"中查看网络流量数据。',
+        items: ['查看端口流量统计', '分析流量趋势', '识别流量异常', '生成流量报表']
+      },
+      {
+        title: 'IP地址管理',
+        text: '在"IP地址管理"中管理IP地址资源。',
+        items: ['IP地址池管理', 'IP分配和回收', 'IP冲突检测', '子网划分管理']
+      }
+    ]
   },
   {
     id: 6,
-    title: '系统权限管理说明',
-    description: '用户角色和权限配置的详细讲解',
-    icon: IconSettings,
-    category: 'system',
-    categoryName: '系统设置',
-    updatedAt: '2026-03-16'
-  }
-])
-
-// 操作手册数据
-const manuals = ref([
-  {
-    id: 1,
-    title: '系统用户手册（完整版）',
-    description: '包含系统所有功能的详细说明和操作步骤',
-    format: 'PDF',
-    size: '5.2 MB',
-    updatedAt: '2026-03-01'
+    title: '资产管理操作手册',
+    description: '设备分类、设备信息、供应商等资产管理功能说明',
+    icon: IconPackage,
+    category: 'asset',
+    categoryName: '资产管理',
+    updatedAt: '2026-03-16',
+    content: [
+      {
+        title: '资产管理概述',
+        text: '资产管理模块用于管理IT资产的全生命周期，包括设备分类、设备信息、供应商管理等。'
+      },
+      {
+        title: '设备分类管理',
+        text: '在"设备分类管理"中建立设备分类体系。',
+        items: ['创建分类树形结构', '设置分类属性模板', '关联监控类型']
+      },
+      {
+        title: '设备管理',
+        text: '在"设备管理"中维护设备资产信息。',
+        items: [
+          '设备基本信息：名称、型号、序列号',
+          '设备位置：数据中心、楼层、机柜、U位',
+          '设备配置：IP地址、操作系统、配置参数',
+          '维保信息：购买日期、保修期限、供应商',
+          '设备状态：运行状态、健康状态'
+        ]
+      },
+      {
+        title: '供应商管理',
+        text: '在"供应商管理"中维护供应商信息。',
+        items: ['供应商名称和编码', '联系方式和地址', '服务范围和产品线', '合同和保修信息']
+      },
+      {
+        title: '批量导入',
+        text: '支持通过Excel批量导入设备信息，提高数据录入效率。'
+      }
+    ]
   },
   {
-    id: 2,
-    title: '快速入门指南',
-    description: '快速上手指南，适合新用户阅读',
-    format: 'PDF',
-    size: '1.8 MB',
-    updatedAt: '2026-03-01'
+    id: 7,
+    title: '工单管理使用指南',
+    description: '工单创建、分配、处理、关闭等完整流程说明',
+    icon: IconTicket,
+    category: 'ticket',
+    categoryName: '工单管理',
+    updatedAt: '2026-03-14',
+    content: [
+      {
+        title: '工单管理概述',
+        text: '工单管理模块提供运维工单的全流程管理，支持故障处理、服务请求、变更管理等场景。'
+      },
+      {
+        title: '创建工单',
+        text: '点击"新建工单"按钮，填写工单信息。',
+        items: ['选择工单类型', '填写工单标题和描述', '设置优先级', '指定处理人', '关联设备或告警']
+      },
+      {
+        title: '我的工单',
+        text: '在"我的工单"中查看分配给当前用户的待处理工单，支持按状态、优先级筛选。'
+      },
+      {
+        title: '所有工单',
+        text: '在"所有工单"中查看系统中的全部工单，管理员可进行工单分配和监督。'
+      },
+      {
+        title: '处理工单',
+        text: '工单处理流程包括：',
+        items: ['查看工单详情', '更新处理进度', '添加处理记录', '转派给其他人员', '关闭工单并填写处理结果']
+      }
+    ]
   },
   {
-    id: 3,
-    title: '运维管理规范',
-    description: '标准化的运维操作流程和规范文档',
-    format: 'Word',
-    size: '2.5 MB',
-    updatedAt: '2026-02-28'
-  },
-  {
-    id: 4,
-    title: '常见问题汇编',
-    description: '汇总了常见问题及解决方案',
-    format: 'PDF',
-    size: '3.1 MB',
-    updatedAt: '2026-03-10'
+    id: 8,
+    title: '集群采集配置指南',
+    description: '数据库、中间件、网络设备采集配置方法',
+    icon: IconDesk,
+    category: 'monitor',
+    categoryName: '综合监控',
+    updatedAt: '2026-03-12',
+    content: [
+      {
+        title: '采集控制中心概述',
+        text: '集群采集控制中心用于配置各类IT组件的数据采集，包括数据库、中间件、网络设备等。'
+      },
+      {
+        title: '数据库采集管理',
+        text: '在"数据库采集管理"中配置数据库监控采集。',
+        items: [
+          '支持MySQL、Oracle、SQL Server、PostgreSQL等',
+          '配置数据库连接信息',
+          '设置采集频率',
+          '选择采集指标'
+        ]
+      },
+      {
+        title: '中间件采集管理',
+        text: '在"中间件采集管理"中配置中间件监控采集。',
+        items: [
+          '支持Tomcat、Nginx、Redis、Kafka等',
+          '配置访问地址和认证信息',
+          '设置采集参数'
+        ]
+      },
+      {
+        title: '网络设备采集管理',
+        text: '在"网络设备采集管理"中配置网络设备采集。',
+        items: [
+          '支持SNMP、SSH等采集方式',
+          '配置设备IP和认证信息',
+          '设置采集协议和频率'
+        ]
+      }
+    ]
   }
 ])
 
@@ -409,24 +667,24 @@ const handleCategoryClick = (key: string) => {
 }
 
 const handleSearch = () => {
-  // 实现搜索逻辑
-  console.log('搜索:', searchQuery.value)
+  if (searchQuery.value) {
+    Message.info(`搜索关键词：${searchQuery.value}`)
+  }
 }
 
-const viewGuideDetail = (guide: any) => {
-  // 查看指南详情
-  console.log('查看指南:', guide)
-}
-
-const downloadManual = (manual: any) => {
-  // 下载手册
-  console.log('下载手册:', manual)
+const openGuideDetail = (guide: any) => {
+  currentGuide.value = guide
+  guideModalVisible.value = true
 }
 
 const openChat = () => {
-  // 打开在线客服
-  console.log('打开在线客服')
+  Message.info('在线客服功能即将上线')
 }
+
+defineExpose({
+  guideModalVisible,
+  currentGuide
+})
 </script>
 
 <style scoped lang="less">
@@ -498,8 +756,7 @@ const openChat = () => {
     padding: 140px 24px 80px;
     text-align: center;
     color: #fff;
-    overflow: hidden;
-
+    
     .banner-image {
       position: absolute;
       top: 0;
@@ -507,49 +764,49 @@ const openChat = () => {
       width: 100%;
       height: 100%;
       object-fit: cover;
-      z-index: 0;
     }
-
+    
     .banner-overlay {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
-      background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 100%);
-      z-index: 1;
     }
-
+    
     .banner-content {
       position: relative;
-      max-width: 800px;
-      margin: 0 auto;
-      z-index: 2;
-
+      z-index: 1;
+      
       h1 {
-        font-size: 48px;
-        font-weight: 700;
+        font-size: 42px;
+        font-weight: 600;
         margin-bottom: 16px;
-        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
       }
-
+      
       p {
         font-size: 18px;
-        margin-bottom: 40px;
-        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+        opacity: 0.9;
+        margin-bottom: 32px;
       }
-
+      
       .search-box {
         max-width: 600px;
         margin: 0 auto;
-
-        :deep(.arco-input) {
-          background: #fff;
+        
+        :deep(.arco-input-wrapper) {
+          background: rgba(255, 255, 255, 0.95);
           border: none;
-          font-size: 16px;
-
-          &::placeholder {
-            color: var(--color-text-3);
+          border-radius: 8px;
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+          
+          .arco-input {
+            font-size: 16px;
+            padding: 12px 16px;
+            
+            &::placeholder {
+              color: #86909c;
+            }
           }
         }
       }
@@ -563,283 +820,257 @@ const openChat = () => {
     .content-container {
       max-width: 1400px;
       margin: 0 auto;
-      display: grid;
-      grid-template-columns: 280px 1fr;
+      display: flex;
       gap: 32px;
+      
+      @media (max-width: 992px) {
+        flex-direction: column;
+      }
     }
     
+    // 左侧目录
     .help-sidebar {
-      position: sticky;
-      top: 100px;
-      height: fit-content;
-      background: #fff;
-      border-radius: 8px;
-      padding: 16px;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+      width: 240px;
+      flex-shrink: 0;
+      
+      @media (max-width: 992px) {
+        width: 100%;
+      }
       
       :deep(.arco-menu) {
-        background: transparent;
+        background: #fff;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+        padding: 12px 0;
         
         .arco-menu-item {
-          border-radius: 4px;
-          margin-bottom: 8px;
+          margin: 4px 8px;
+          border-radius: 6px;
           
           &.arco-menu-selected {
             background: rgb(var(--primary-1));
             color: rgb(var(--primary-6));
           }
-          
-          &:hover:not(.arco-menu-selected) {
-            background: var(--color-fill-2);
-          }
         }
       }
     }
     
+    // 右侧内容
     .help-main {
-      .help-section {
-        margin-bottom: 48px;
+      flex: 1;
+      min-width: 0;
+    }
+  }
+  
+  // 帮助区块
+  .help-section {
+    background: #fff;
+    border-radius: 8px;
+    padding: 32px;
+    margin-bottom: 24px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    
+    .section-title {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      font-size: 20px;
+      font-weight: 600;
+      color: var(--color-text-1);
+      margin-bottom: 24px;
+      padding-bottom: 16px;
+      border-bottom: 1px solid var(--color-border-2);
+      
+      svg {
+        width: 24px;
+        height: 24px;
+        color: rgb(var(--primary-6));
+      }
+    }
+    
+    .section-desc {
+      color: var(--color-text-3);
+      margin-bottom: 24px;
+    }
+  }
+  
+  // FAQ 列表
+  .faq-list {
+    :deep(.arco-collapse) {
+      border: none;
+      background: transparent;
+      
+      .arco-collapse-item {
+        margin-bottom: 12px;
+        border: 1px solid var(--color-border-2);
+        border-radius: 8px;
+        overflow: hidden;
         
-        .section-title {
-          font-size: 24px;
+        .arco-collapse-item-header {
+          background: #fafbfc;
+          padding: 16px 20px;
+          font-weight: 500;
+          
+          &:hover {
+            background: #f2f3f5;
+          }
+        }
+        
+        .arco-collapse-item-content {
+          padding: 20px;
+          background: #fff;
+        }
+      }
+    }
+    
+    .faq-answer {
+      color: var(--color-text-2);
+      line-height: 1.8;
+    }
+  }
+  
+  // 使用指南网格
+  .guide-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 20px;
+    
+    .guide-card {
+      background: #fafbfc;
+      border: 1px solid var(--color-border-2);
+      border-radius: 8px;
+      padding: 24px;
+      cursor: pointer;
+      transition: all 0.3s;
+      
+      &:hover {
+        border-color: rgb(var(--primary-6));
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        transform: translateY(-2px);
+        
+        .view-link {
+          color: rgb(var(--primary-6));
+        }
+      }
+      
+      .guide-icon {
+        width: 48px;
+        height: 48px;
+        background: rgb(var(--primary-1));
+        border-radius: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 16px;
+        
+        svg {
+          width: 24px;
+          height: 24px;
+          color: rgb(var(--primary-6));
+        }
+      }
+      
+      h3 {
+        font-size: 16px;
+        font-weight: 600;
+        color: var(--color-text-1);
+        margin-bottom: 8px;
+      }
+      
+      p {
+        font-size: 14px;
+        color: var(--color-text-3);
+        line-height: 1.6;
+        margin-bottom: 16px;
+      }
+      
+      .guide-meta {
+        display: flex;
+        justify-content: space-between;
+        font-size: 12px;
+        color: var(--color-text-4);
+        margin-bottom: 12px;
+        
+        .guide-category {
+          background: rgb(var(--primary-1));
+          color: rgb(var(--primary-6));
+          padding: 2px 8px;
+          border-radius: 4px;
+        }
+      }
+      
+      .guide-action {
+        .view-link {
+          font-size: 13px;
+          color: var(--color-text-3);
+          transition: color 0.3s;
+        }
+      }
+    }
+  }
+  
+  // 联系我们
+  .contact-section {
+    background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
+  }
+  
+  .contact-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 20px;
+    
+    .contact-card {
+      background: #fff;
+      border-radius: 12px;
+      padding: 24px;
+      display: flex;
+      align-items: flex-start;
+      gap: 16px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+      transition: all 0.3s;
+      
+      &:hover {
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+        transform: translateY(-2px);
+      }
+      
+      .contact-icon {
+        width: 48px;
+        height: 48px;
+        background: rgb(var(--primary-1));
+        border-radius: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        
+        svg {
+          width: 24px;
+          height: 24px;
+          color: rgb(var(--primary-6));
+        }
+      }
+      
+      .contact-content {
+        flex: 1;
+        
+        h3 {
+          font-size: 16px;
           font-weight: 600;
           color: var(--color-text-1);
-          margin-bottom: 24px;
-          display: flex;
-          align-items: center;
-          gap: 8px;
+          margin-bottom: 4px;
         }
         
-        // FAQ 样式
-        .faq-list {
-          :deep(.arco-collapse) {
-            border: none;
-            
-            .arco-collapse-item {
-              border: 1px solid var(--color-border);
-              border-radius: 8px;
-              margin-bottom: 16px;
-              
-              .arco-collapse-item-header {
-                padding: 16px 20px;
-                background: var(--color-fill-1);
-                font-weight: 500;
-              }
-              
-              .arco-collapse-item-content {
-                padding: 20px;
-                line-height: 1.8;
-                color: var(--color-text-2);
-              }
-            }
-          }
+        .contact-time {
+          font-size: 13px;
+          color: var(--color-text-3);
+          margin-bottom: 8px;
         }
         
-        // 指南网格
-        .guide-grid {
-          display: grid;
-          grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-          gap: 24px;
-          
-          .guide-card {
-            background: #fff;
-            border: 1px solid var(--color-border);
-            border-radius: 8px;
-            padding: 24px;
-            cursor: pointer;
-            transition: all 0.3s;
-            
-            &:hover {
-              border-color: rgb(var(--primary-6));
-              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-              transform: translateY(-4px);
-            }
-            
-            .guide-icon {
-              width: 48px;
-              height: 48px;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              background: rgb(var(--primary-1));
-              border-radius: 8px;
-              color: rgb(var(--primary-6));
-              font-size: 24px;
-              margin-bottom: 16px;
-            }
-            
-            h3 {
-              font-size: 18px;
-              font-weight: 600;
-              color: var(--color-text-1);
-              margin-bottom: 8px;
-            }
-            
-            p {
-              font-size: 14px;
-              color: var(--color-text-2);
-              line-height: 1.6;
-              margin-bottom: 16px;
-            }
-            
-            .guide-meta {
-              display: flex;
-              justify-content: space-between;
-              font-size: 12px;
-              color: var(--color-text-3);
-              
-              .guide-category {
-                background: var(--color-fill-2);
-                padding: 2px 8px;
-                border-radius: 4px;
-              }
-            }
-          }
-        }
-        
-        // 手册列表
-        .manual-list {
-          .manual-item {
-            display: flex;
-            align-items: center;
-            gap: 20px;
-            background: #fff;
-            border: 1px solid var(--color-border);
-            border-radius: 8px;
-            padding: 20px;
-            margin-bottom: 16px;
-            transition: all 0.3s;
-            
-            &:hover {
-              border-color: rgb(var(--primary-6));
-              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-            }
-            
-            .manual-icon {
-              width: 48px;
-              height: 48px;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              background: rgb(var(--success-1));
-              border-radius: 8px;
-              color: rgb(var(--success-6));
-              font-size: 24px;
-            }
-            
-            .manual-info {
-              flex: 1;
-              
-              h3 {
-                font-size: 16px;
-                font-weight: 600;
-                color: var(--color-text-1);
-                margin-bottom: 8px;
-              }
-              
-              p {
-                font-size: 14px;
-                color: var(--color-text-2);
-                margin-bottom: 12px;
-              }
-              
-              .manual-meta {
-                display: flex;
-                gap: 16px;
-                font-size: 12px;
-                color: var(--color-text-3);
-              }
-            }
-          }
-        }
-        
-        // 联系我们
-        .contact-section {
-          text-align: center;
-
-          .section-desc {
-            font-size: 16px;
-            color: var(--color-text-2);
-            margin-bottom: 32px;
-          }
-
-          .contact-cards {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: center;
-            gap: 24px;
-
-            .contact-card {
-              background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
-              border: 1px solid var(--color-border);
-              border-radius: 16px;
-              padding: 24px;
-              transition: all 0.3s;
-              flex: 1 1 300px;
-              max-width: 360px;
-              min-width: 280px;
-              display: flex;
-              align-items: center;
-              gap: 20px;
-
-              &:hover {
-                border-color: rgb(var(--primary-6));
-                box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
-                transform: translateY(-4px);
-              }
-
-              .contact-icon {
-                width: 56px;
-                height: 56px;
-                display: inline-flex;
-                align-items: center;
-                justify-content: center;
-                background: linear-gradient(135deg, rgb(var(--primary-6)) 0%, rgb(var(--primary-5)) 100%);
-                border-radius: 12px;
-                color: #fff;
-                flex-shrink: 0;
-                transition: all 0.3s;
-
-                svg {
-                  width: 28px;
-                  height: 28px;
-                }
-              }
-
-              &:hover .contact-icon {
-                transform: scale(1.05);
-                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-              }
-
-              .contact-content {
-                flex: 1;
-                text-align: left;
-
-                h3 {
-                  font-size: 16px;
-                  font-weight: 600;
-                  color: var(--color-text-1);
-                  margin-bottom: 8px;
-                }
-
-                .contact-time {
-                  font-size: 13px;
-                  color: var(--color-text-3);
-                  margin-bottom: 6px;
-                }
-
-                .contact-value {
-                  font-size: 15px;
-                  font-weight: 600;
-                  color: rgb(var(--primary-6));
-                }
-
-                .arco-btn {
-                  margin-top: 8px;
-                }
-              }
-            }
-          }
+        .contact-value {
+          font-size: 15px;
+          font-weight: 500;
+          color: rgb(var(--primary-6));
         }
       }
     }
@@ -847,89 +1078,75 @@ const openChat = () => {
   
   // 页脚
   .footer {
-    background: var(--color-bg-1);
+    background: #1d2129;
     padding: 24px;
     text-align: center;
-    border-top: 1px solid var(--color-border);
     
     .footer-content {
       max-width: 1400px;
       margin: 0 auto;
       
       p {
+        color: #86909c;
         font-size: 14px;
-        color: var(--color-text-3);
       }
     }
   }
-}
-
-// 响应式设计
-@media (max-width: 1024px) {
-  .help-page {
-    .help-content {
-      .content-container {
-        grid-template-columns: 1fr;
-      }
+  
+  // 使用指南详情弹窗
+  .guide-detail-content {
+    .guide-detail-header {
+      margin-bottom: 24px;
       
-      .help-sidebar {
-        position: static;
-        margin-bottom: 24px;
-      }
-    }
-  }
-}
-
-@media (max-width: 768px) {
-  .help-page {
-    .navbar {
-      .navbar-content {
-        .nav-links {
-          gap: 12px;
-          
-          a {
-            display: none;
-          }
+      .guide-detail-meta {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        
+        .guide-detail-date {
+          font-size: 13px;
+          color: var(--color-text-3);
         }
       }
     }
     
-    .help-banner {
-      padding: 100px 16px 60px;
-      
-      .banner-content {
-        h1 {
-          font-size: 32px !important;
+    .guide-detail-body {
+      .content-section {
+        margin-bottom: 24px;
+        
+        h3 {
+          font-size: 16px;
+          font-weight: 600;
+          color: var(--color-text-1);
+          margin-bottom: 12px;
+          padding-left: 12px;
+          border-left: 3px solid rgb(var(--primary-6));
         }
         
         p {
-          font-size: 16px !important;
+          font-size: 14px;
+          color: var(--color-text-2);
+          line-height: 1.8;
+          margin-bottom: 12px;
         }
-      }
-    }
-    
-    .help-content {
-      padding: 24px 16px;
-      
-      .guide-grid {
-        grid-template-columns: 1fr;
-      }
-      
-      .contact-cards {
-        flex-direction: column;
-        align-items: center;
-
-        .contact-card {
-          max-width: 100%;
-          flex: 1 1 100%;
-          flex-direction: column;
-          text-align: center;
-
-          .contact-content {
-            text-align: center;
+        
+        ul {
+          margin: 0;
+          padding-left: 24px;
+          
+          li {
+            font-size: 14px;
+            color: var(--color-text-2);
+            line-height: 1.8;
+            margin-bottom: 4px;
           }
         }
       }
+      
+      .guide-placeholder {
+        padding: 40px 0;
+        text-align: center;
+      }
     }
   }
 }
diff --git a/src/views/login/components/login-form.vue b/src/views/login/components/login-form.vue
index 093b401..375bba5 100644
--- a/src/views/login/components/login-form.vue
+++ b/src/views/login/components/login-form.vue
@@ -33,7 +33,6 @@
           <a-checkbox checked="rememberPassword" :model-value="loginConfig.rememberPassword" @change="setRememberPassword as any">
             {{ $t('login.form.rememberPassword') }}
           </a-checkbox>
-          <a-link>{{ $t('login.form.forgetPassword') }}</a-link>
         </div>
         <a-button type="primary" html-type="submit" long :loading="loading">
           {{ $t('login.form.login') }}
diff --git a/src/views/ops/pages/assets/classify/components/CategoryDetailDialog.vue b/src/views/ops/pages/assets/classify/components/CategoryDetailDialog.vue
index b9c4ba7..832bb6d 100644
--- a/src/views/ops/pages/assets/classify/components/CategoryDetailDialog.vue
+++ b/src/views/ops/pages/assets/classify/components/CategoryDetailDialog.vue
@@ -1,165 +1,181 @@
 <template>
   <a-modal
-    :visible="visible"
+    v-model:visible="dialogVisible"
     title="分类详情"
-    width="600px"
-    @cancel="handleCancel"
-    @update:visible="handleVisibleChange"
+    :width="600"
     :footer="false"
+    unmount-on-close
   >
-    <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-spin :loading="loading" style="width: 100%">
+      <a-descriptions
+        v-if="categoryDetail"
+        :column="2"
+        bordered
+        size="medium"
+      >
+        <a-descriptions-item label="分类名称">
+          {{ categoryDetail.name }}
+        </a-descriptions-item>
+        <a-descriptions-item label="分类编码">
+          {{ categoryDetail.code }}
+        </a-descriptions-item>
+        <a-descriptions-item label="层级">
+          <a-tag :color="getLevelColor(categoryDetail.level)">
+            第{{ categoryDetail.level }}级
+          </a-tag>
+        </a-descriptions-item>
+        <a-descriptions-item label="父级分类">
+          {{ categoryDetail.parent?.name || '-' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="资产数量">
+          <a-badge :count="categoryDetail.asset_count" :max-count="999" />
+        </a-descriptions-item>
+        <a-descriptions-item label="排序">
+          {{ categoryDetail.sort }}
+        </a-descriptions-item>
+        <a-descriptions-item label="状态">
+          <a-tag :color="categoryDetail.enabled ? 'green' : 'red'">
+            {{ categoryDetail.enabled ? '启用' : '禁用' }}
+          </a-tag>
+        </a-descriptions-item>
+        <a-descriptions-item label="颜色">
+          <div v-if="categoryDetail.color" style="display: flex; align-items: center; gap: 8px">
+            <div
+              :style="{
+                width: '20px',
+                height: '20px',
+                borderRadius: '4px',
+                backgroundColor: categoryDetail.color,
+              }"
+            />
+            <span>{{ categoryDetail.color }}</span>
+          </div>
+          <span v-else>-</span>
+        </a-descriptions-item>
+        <a-descriptions-item label="分类路径">
+          {{ categoryDetail.path || '-' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="描述" :span="2">
+          {{ categoryDetail.description || '-' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="备注" :span="2">
+          {{ categoryDetail.remarks || '-' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="创建人">
+          {{ categoryDetail.created_by || '-' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="更新人">
+          {{ categoryDetail.updated_by || '-' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="创建时间">
+          {{ formatDateTime(categoryDetail.created_at) }}
+        </a-descriptions-item>
+        <a-descriptions-item label="更新时间">
+          {{ formatDateTime(categoryDetail.updated_at) }}
+        </a-descriptions-item>
+      </a-descriptions>
+
+      <a-empty v-else-if="!loading" description="暂无数据" />
+    </a-spin>
   </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
-}
+import { ref, computed, watch } from 'vue'
+import { Message } from '@arco-design/web-vue'
+import { fetchCategoryDetail } from '@/api/ops/assetCategory'
+import type { AssetCategory } from '@/api/ops/assetCategory'
 
 interface Props {
   visible: boolean
-  category: Category | null
+  categoryId?: number
 }
 
 interface Emits {
-  (e: 'update:visible', value: boolean): void
+  (e: 'update:visible', visible: 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 props = withDefaults(defineProps<Props>(), {
+  visible: false,
+  categoryId: undefined,
 })
 
-// 格式化日期
-const formatDate = (dateStr?: string) => {
+const emit = defineEmits<Emits>()
+
+const loading = ref(false)
+const categoryDetail = ref<AssetCategory | null>(null)
+
+const dialogVisible = computed({
+  get: () => props.visible,
+  set: (val) => emit('update:visible', val),
+})
+
+// 获取层级颜色
+const getLevelColor = (level: number) => {
+  const colors: Record<number, string> = {
+    1: 'blue',
+    2: 'green',
+    3: 'orange',
+    4: 'purple',
+    5: 'cyan',
+  }
+  return colors[level] || 'gray'
+}
+
+// 格式化日期时间
+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',
-  })
+  try {
+    const date = new Date(dateStr)
+    return date.toLocaleString('zh-CN', {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+    })
+  } catch {
+    return dateStr
+  }
 }
 
-// 取消
-const handleCancel = () => {
-  emit('update:visible', false)
+// 加载分类详情
+const loadCategoryDetail = async () => {
+  if (!props.categoryId) return
+
+  loading.value = true
+  try {
+    const res = await fetchCategoryDetail(props.categoryId)
+    if (res.code === 0) {
+      categoryDetail.value = res.details
+    } else {
+      Message.error(res.message || '获取分类详情失败')
+      categoryDetail.value = null
+    }
+  } catch (error) {
+    console.error('获取分类详情失败:', error)
+    Message.error('获取分类详情失败')
+    categoryDetail.value = null
+  } finally {
+    loading.value = false
+  }
 }
 
-// 处理对话框可见性变化
-const handleVisibleChange = (visible: boolean) => {
-  emit('update:visible', visible)
-}
+// 监听 visible 变化
+watch(
+  () => props.visible,
+  (val) => {
+    if (val && props.categoryId) {
+      loadCategoryDetail()
+    } else {
+      categoryDetail.value = null
+    }
+  }
+)
 </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>
+</script>
\ No newline at end of file
diff --git a/src/views/ops/pages/assets/classify/components/CategoryFormDialog.vue b/src/views/ops/pages/assets/classify/components/CategoryFormDialog.vue
index b716e74..c03a8c5 100644
--- a/src/views/ops/pages/assets/classify/components/CategoryFormDialog.vue
+++ b/src/views/ops/pages/assets/classify/components/CategoryFormDialog.vue
@@ -1,137 +1,96 @@
 <template>
   <a-modal
-    :visible="visible"
-    :title="isEdit ? '编辑分类' : '新增分类'"
-    width="600px"
-    @ok="handleOk"
+    v-model:visible="dialogVisible"
+    :title="isEdit ? '编辑分类' : '新建分类'"
+    :width="520"
+    :mask-closable="false"
+    unmount-on-close
     @cancel="handleCancel"
-    @update:visible="handleVisibleChange"
-    :confirm-loading="submitting"
+    @ok="handleOk"
   >
-    <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 ref="formRef" :model="formData" :rules="rules" layout="vertical">
+      <a-form-item field="name" label="分类名称" required>
+        <a-input
+          v-model="formData.name"
+          placeholder="请输入分类名称"
+          :max-length="50"
         />
       </a-form-item>
 
-      <a-form-item label="备注" field="remarks">
+      <a-form-item field="code" label="分类编码" required>
+        <a-input
+          v-model="formData.code"
+          placeholder="请输入分类编码"
+          :max-length="50"
+          :disabled="isEdit"
+        />
+      </a-form-item>
+
+      <a-form-item field="parent_id" label="父级分类">
+        <a-tree-select
+          v-model="formData.parent_id"
+          :data="categoryTreeData"
+          placeholder="请选择父级分类（不选则为顶级分类）"
+          allow-clear
+          :field-names="{
+            key: 'id',
+            title: 'name',
+            children: 'children',
+          }"
+          :load-more="handleLoadMore"
+        />
+      </a-form-item>
+
+      <a-form-item field="sort" label="排序">
+        <a-input-number
+          v-model="formData.sort"
+          placeholder="请输入排序值"
+          :min="0"
+          :max="9999"
+          style="width: 100%"
+        />
+      </a-form-item>
+
+      <a-form-item field="color" label="颜色">
+        <a-input
+          v-model="formData.color"
+          placeholder="请输入颜色值，如 #1890ff"
+          :max-length="20"
+        >
+          <template #prefix>
+            <div
+              :style="{
+                width: '16px',
+                height: '16px',
+                borderRadius: '2px',
+                backgroundColor: formData.color || '#1890ff',
+              }"
+            />
+          </template>
+        </a-input>
+      </a-form-item>
+
+      <a-form-item field="enabled" label="是否启用">
+        <a-switch v-model="formData.enabled" />
+      </a-form-item>
+
+      <a-form-item field="description" label="描述">
         <a-textarea
-          v-model="form.remarks"
+          v-model="formData.description"
+          placeholder="请输入分类描述"
+          :max-length="200"
+          :auto-size="{ minRows: 2, maxRows: 4 }"
+          show-word-limit
+        />
+      </a-form-item>
+
+      <a-form-item field="remarks" label="备注">
+        <a-textarea
+          v-model="formData.remarks"
           placeholder="请输入备注"
-          :auto-size="{ minRows: 3, maxRows: 6 }"
-          :max-length="500"
+          :max-length="200"
+          :auto-size="{ minRows: 2, maxRows: 4 }"
+          show-word-limit
         />
       </a-form-item>
     </a-form>
@@ -139,167 +98,176 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watch, computed } from 'vue'
+import { ref, computed, watch } 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
-}
+import type { FormInstance } from '@arco-design/web-vue/es/form'
+import {
+  createCategory,
+  updateCategory,
+  fetchCategoryTree,
+  fetchCategoryChildren,
+} from '@/api/ops/assetCategory'
+import type { AssetCategory, CategoryFormData } from '@/api/ops/assetCategory'
 
 interface Props {
   visible: boolean
-  category: Category | null
-  parentCategories: any[]
-  fixedParentId?: number
-  showParentSelector?: boolean
+  category?: AssetCategory | null
 }
 
 interface Emits {
-  (e: 'update:visible', value: boolean): void
+  (e: 'update:visible', visible: boolean): void
   (e: 'success'): void
 }
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  visible: false,
+  category: null,
+})
+
 const emit = defineEmits<Emits>()
 
-const formRef = ref()
-const submitting = ref(false)
-const showColorPicker = ref(false)
+const formRef = ref<FormInstance>()
+const categoryTreeData = ref<any[]>([])
+const loading = 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 isEdit = computed(() => !!props.category?.id)
 
-// 表单数据
-const form = ref({
+const dialogVisible = computed({
+  get: () => props.visible,
+  set: (val) => emit('update:visible', val),
+})
+
+const defaultFormData = (): CategoryFormData => ({
   name: '',
   code: '',
   description: '',
-  icon: '',
-  color: '',
-  parent_id: undefined as number | undefined,
-  sort: 0,
+  color: '#1890ff',
+  parent_id: null,
   enabled: true,
+  sort: 0,
   remarks: '',
 })
 
-// 是否为编辑模式
-const isEdit = computed(() => !!props.category?.id)
+const formData = ref<CategoryFormData>(defaultFormData())
 
-// 父级分类下拉搜索过滤
-const filterParentOption = (input: string, option: any) => {
-  return option.label.toLowerCase().includes(input.toLowerCase())
+const rules = {
+  name: [
+    { required: true, message: '分类名称不能为空' },
+    { max: 50, message: '分类名称不能超过50个字符' },
+  ],
+  code: [
+    { required: true, message: '分类编码不能为空' },
+    { max: 50, message: '分类编码不能超过50个字符' },
+    {
+      match: /^[A-Z0-9_]+$/,
+      message: '分类编码只能包含大写字母、数字和下划线',
+    },
+  ],
+  color: [
+    {
+      match: /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/,
+      message: '请输入有效的颜色值，如 #1890ff',
+    },
+  ],
 }
 
-// 选择颜色
-const selectColor = (color: string) => {
-  form.value.color = color
-  showColorPicker.value = false
+// 加载分类树
+const loadCategoryTree = async () => {
+  try {
+    const res = await fetchCategoryTree()
+    categoryTreeData.value = res.details || []
+  } catch (error) {
+    console.error('加载分类树失败:', error)
+    categoryTreeData.value = []
+  }
 }
 
-// 监听对话框显示状态
+// 懒加载子节点
+const handleLoadMore = async (node: any) => {
+  if (node.children && node.children.length > 0) return
+  try {
+    const res = await fetchCategoryChildren(node.id)
+    node.children = res.details || []
+  } catch (error) {
+    console.error('加载子分类失败:', error)
+    node.children = []
+  }
+}
+
+// 重置表单
+const resetForm = () => {
+  formData.value = defaultFormData()
+  formRef.value?.resetFields()
+}
+
+// 监听 visible 变化
 watch(
   () => props.visible,
-  (newVal) => {
-    if (newVal) {
-      if (props.category && isEdit.value) {
-        // 编辑模式：填充表单
-        form.value = {
-          name: props.category.name || '',
-          code: props.category.code || '',
+  async (val) => {
+    if (val) {
+      await loadCategoryTree()
+      if (props.category) {
+        // 编辑模式，填充数据
+        formData.value = {
+          id: props.category.id,
+          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,
+          color: props.category.color || '#1890ff',
+          parent_id: props.category.parent_id || null,
+          enabled: props.category.enabled,
           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: '',
-        }
+        resetForm()
       }
-      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)
+  resetForm()
 }
 
-// 处理对话框可见性变化
-const handleVisibleChange = (visible: boolean) => {
-  emit('update:visible', visible)
+const handleOk = async () => {
+  try {
+    const valid = await formRef.value?.validate()
+    if (valid) return
+
+    loading.value = true
+    const submitData = { ...formData.value }
+
+    if (isEdit.value) {
+      // 编辑
+      const res = await updateCategory(submitData)
+      if (res.code === 0) {
+        Message.success('更新成功')
+        emit('success')
+        emit('update:visible', false)
+        resetForm()
+      } else {
+        Message.error(res.message || '更新失败')
+      }
+    } else {
+      // 新建
+      const res = await createCategory(submitData)
+      if (res.code === 0) {
+        Message.success('创建成功')
+        emit('success')
+        emit('update:visible', false)
+        resetForm()
+      } else {
+        Message.error(res.message || '创建失败')
+      }
+    }
+  } catch (error: any) {
+    console.error('提交失败:', error)
+    Message.error(error.message || '操作失败')
+  } finally {
+    loading.value = false
+  }
 }
 </script>
 
@@ -307,79 +275,4 @@ const handleVisibleChange = (visible: boolean) => {
 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>
+</script>
\ No newline at end of file
diff --git a/src/views/ops/pages/assets/classify/config/columns.ts b/src/views/ops/pages/assets/classify/config/columns.ts
new file mode 100644
index 0000000..896bf9d
--- /dev/null
+++ b/src/views/ops/pages/assets/classify/config/columns.ts
@@ -0,0 +1,69 @@
+import type { TableColumnData } from '@arco-design/web-vue/es/table/interface'
+
+export const columns: TableColumnData[] = [
+  {
+    title: '序号',
+    dataIndex: 'index',
+    slotName: 'index',
+    width: 80,
+  },
+  {
+    title: '分类名称',
+    dataIndex: 'name',
+    width: 180,
+  },
+  {
+    title: '分类编码',
+    dataIndex: 'code',
+    width: 150,
+  },
+  {
+    title: '层级',
+    dataIndex: 'level',
+    slotName: 'level',
+    width: 80,
+  },
+  {
+    title: '父级分类',
+    dataIndex: 'parent',
+    slotName: 'parent',
+    width: 150,
+  },
+  {
+    title: '资产数量',
+    dataIndex: 'asset_count',
+    slotName: 'asset_count',
+    width: 100,
+  },
+  {
+    title: '排序',
+    dataIndex: 'sort',
+    width: 80,
+  },
+  {
+    title: '状态',
+    dataIndex: 'enabled',
+    slotName: 'enabled',
+    width: 100,
+  },
+  {
+    title: '描述',
+    dataIndex: 'description',
+    ellipsis: true,
+    tooltip: true,
+    width: 200,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'created_at',
+    slotName: 'created_at',
+    width: 180,
+  },
+  {
+    title: '操作',
+    dataIndex: 'actions',
+    slotName: 'actions',
+    width: 320,
+    fixed: 'right' as const,
+  },
+]
\ No newline at end of file
diff --git a/src/views/ops/pages/assets/classify/config/search-form.ts b/src/views/ops/pages/assets/classify/config/search-form.ts
new file mode 100644
index 0000000..048bad5
--- /dev/null
+++ b/src/views/ops/pages/assets/classify/config/search-form.ts
@@ -0,0 +1,10 @@
+import type { FormItem } from '@/components/search-form/types'
+
+export const searchFormConfig: FormItem[] = [
+  {
+    field: 'keyword',
+    label: '关键词',
+    type: 'input',
+    placeholder: '请输入分类名称或编码',
+  },
+]
\ No newline at end of file
diff --git a/src/views/ops/pages/assets/classify/index.vue b/src/views/ops/pages/assets/classify/index.vue
index b99c778..e20cc94 100644
--- a/src/views/ops/pages/assets/classify/index.vue
+++ b/src/views/ops/pages/assets/classify/index.vue
@@ -18,7 +18,10 @@
     >
       <template #toolbar-left>
         <a-button type="primary" @click="handleCreate">
-          新增分类
+          <template #icon>
+            <icon-plus />
+          </template>
+          新建分类
         </a-button>
       </template>
 
@@ -27,29 +30,35 @@
         {{ rowIndex + 1 + (pagination.current - 1) * pagination.pageSize }}
       </template>
 
+      <!-- 层级 -->
+      <template #level="{ record }">
+        <a-tag :color="getLevelColor(record.level)">
+          第{{ record.level }}级
+        </a-tag>
+      </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 #asset_count="{ record }">
+        <a-badge :count="record.asset_count" :max-count="999" />
       </template>
 
-      <!-- 是否启用 -->
+      <!-- 状态 -->
       <template #enabled="{ record }">
         <a-tag :color="record.enabled ? 'green' : 'red'">
-          {{ record.enabled ? '是' : '否' }}
+          {{ record.enabled ? '启用' : '禁用' }}
         </a-tag>
       </template>
 
+      <!-- 创建时间 -->
+      <template #created_at="{ record }">
+        {{ formatDateTime(record.created_at) }}
+      </template>
+
       <!-- 操作 -->
       <template #actions="{ record }">
         <a-button type="text" size="small" @click="handleDetail(record)">
@@ -58,29 +67,31 @@
         <a-button type="text" size="small" @click="handleEdit(record)">
           编辑
         </a-button>
-        <a-button type="text" size="small" status="danger" @click="handleDelete(record)">
-          删除
+        <a-button type="text" size="small" @click="handleAddChild(record)">
+          添加子分类
         </a-button>
-        <a-button type="text" size="small" status="success" @click="handleAddChild(record)">
-          新增
+        <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"
-      :parent-categories="parentCategories"
-      :fixed-parent-id="fixedParentId"
-      :show-parent-selector="showParentSelector"
       @success="handleFormSuccess"
     />
 
     <!-- 分类详情对话框 -->
     <category-detail-dialog
       v-model:visible="detailVisible"
-      :category="currentCategory"
+      :category-id="currentCategoryId"
     />
   </div>
 </template>
@@ -91,21 +102,21 @@ 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 { searchFormConfig } from './config/search-form'
+import { columns as columnsConfig } from './config/columns'
 import {
   fetchCategoryList,
   deleteCategory,
-  fetchAllCategories,
-  fetchCategoryDetail,
 } from '@/api/ops/assetCategory'
+import type { AssetCategory } 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 tableData = ref<AssetCategory[]>([])
 const formModel = ref({
   keyword: '',
-  parent_id: '',
 })
 
 const pagination = reactive({
@@ -114,114 +125,46 @@ const pagination = reactive({
   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 formItems = computed<FormItem[]>(() => searchFormConfig)
 
 // 表格列配置
-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 columns = computed(() => columnsConfig)
 
 // 当前选中的分类
-const currentCategory = ref<any>(null)
-const editingCategory = ref<any>(null)
+const currentCategoryId = ref<number | undefined>(undefined)
+const editingCategory = ref<AssetCategory | null>(null)
 
 // 对话框可见性
 const formVisible = ref(false)
 const detailVisible = ref(false)
 
-// 固定的父级分类ID（用于新增子分类时）
-const fixedParentId = ref<number | undefined>(undefined)
+// 获取层级颜色
+const getLevelColor = (level: number) => {
+  const colors: Record<number, string> = {
+    1: 'blue',
+    2: 'green',
+    3: 'orange',
+    4: 'purple',
+    5: 'cyan',
+  }
+  return colors[level] || 'gray'
+}
 
-// 是否显示父级分类选择器
-const showParentSelector = ref(true)
-
-// 获取父级分类列表（用于下拉选择）
-const fetchParentCategories = async () => {
+// 格式化日期时间
+const formatDateTime = (dateStr?: string) => {
+  if (!dateStr) return '-'
   try {
-    const res = await fetchAllCategories()
-    parentCategories.value = res.details || []
-  } catch (error) {
-    console.error('获取父级分类列表失败:', error)
+    const date = new Date(dateStr)
+    return date.toLocaleString('zh-CN', {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+    })
+  } catch {
+    return dateStr
   }
 }
 
@@ -230,11 +173,10 @@ const fetchCategories = async () => {
   loading.value = true
 
   try {
-    const params: any = {
+    const params = {
       page: pagination.current,
       page_size: pagination.pageSize,
       keyword: formModel.value.keyword || undefined,
-      parent_id: formModel.value.parent_id || undefined,
     }
 
     const res = await fetchCategoryList(params)
@@ -266,7 +208,6 @@ const handleFormModelUpdate = (value: any) => {
 const handleReset = () => {
   formModel.value = {
     keyword: '',
-    parent_id: '',
   }
   pagination.current = 1
   fetchCategories()
@@ -284,53 +225,38 @@ const handleRefresh = () => {
   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)
+const handleEdit = (record: AssetCategory) => {
   editingCategory.value = record
   formVisible.value = true
 }
 
+// 添加子分类
+const handleAddChild = (record: AssetCategory) => {
+  editingCategory.value = {
+    parent_id: record.id,
+  } as AssetCategory
+  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 handleDetail = (record: AssetCategory) => {
+  currentCategoryId.value = record.id
+  detailVisible.value = true
 }
 
 // 删除分类
-const handleDelete = async (record: any) => {
-  console.log('删除分类:', record)
+const handleDelete = async (record: AssetCategory) => {
   try {
     Modal.confirm({
       title: '确认删除',
-      content: `确认删除分类 ${record.name} 吗？`,
+      content: `确认删除分类「${record.name}」吗？如果该分类下存在子分类或资产，将无法删除。`,
       onOk: async () => {
         const res = await deleteCategory(record.id)
         if (res.code === 0) {
@@ -348,21 +274,18 @@ const handleDelete = async (record: any) => {
 
 // 表单成功回调
 const handleFormSuccess = () => {
-  formVisible.value = false
   fetchCategories()
-  fetchParentCategories()
 }
 
 // 初始化加载数据
 onMounted(() => {
-  fetchParentCategories()
   fetchCategories()
 })
 </script>
 
 <script lang="ts">
 export default {
-  name: 'AssetClassify',
+  name: 'AssetCategory',
 }
 </script>
 
@@ -370,18 +293,4 @@ export default {
 .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>
+</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
deleted file mode 100644
index e48bb2e..0000000
--- a/src/views/ops/pages/assets/device/components/DeviceFormDialog.vue
+++ /dev/null
@@ -1,687 +0,0 @@
-<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/form/index.vue b/src/views/ops/pages/assets/device/form/index.vue
new file mode 100644
index 0000000..dae5ca4
--- /dev/null
+++ b/src/views/ops/pages/assets/device/form/index.vue
@@ -0,0 +1,794 @@
+<template>
+  <div class="device-form-page">
+    <!-- 页面头部 -->
+    <div class="page-header">
+      <div class="header-left">
+        <a-button type="text" @click="handleBack">
+          <template #icon><icon-left /></template>
+          返回列表
+        </a-button>
+        <a-divider direction="vertical" />
+        <h2 class="page-title">{{ pageTitle }}</h2>
+      </div>
+      <div class="header-right">
+        <a-space>
+          <a-button @click="handleBack">取消</a-button>
+          <a-button type="primary" :loading="submitting" @click="handleSubmit">
+            {{ isEdit ? '保存' : '创建' }}
+          </a-button>
+        </a-space>
+      </div>
+    </div>
+
+    <!-- 表单内容 -->
+    <div class="page-content">
+      <a-spin :loading="loading" style="width: 100%">
+        <a-form ref="formRef" :model="form" layout="vertical">
+          <!-- 基本信息 -->
+          <a-card class="info-card" title="基本信息">
+            <a-row :gutter="16">
+              <a-col :span="6">
+                <a-form-item label="资产名称" field="asset_name" required>
+                  <a-input
+                    v-model="form.asset_name"
+                    placeholder="请输入资产名称"
+                    :max-length="200"
+                    allow-clear
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="6">
+                <a-form-item label="资产编号" field="asset_code" required>
+                  <a-input
+                    v-model="form.asset_code"
+                    placeholder="请输入资产编号"
+                    :max-length="100"
+                    :disabled="isEdit"
+                    allow-clear
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="6">
+                <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="6">
+                <a-form-item label="规格型号" field="model">
+                  <a-input
+                    v-model="form.model"
+                    placeholder="请输入规格型号"
+                    :max-length="200"
+                    allow-clear
+                  />
+                </a-form-item>
+              </a-col>
+            </a-row>
+            <a-row :gutter="16">
+              <a-col :span="6">
+                <a-form-item label="生产厂商" field="manufacturer">
+                  <a-input
+                    v-model="form.manufacturer"
+                    placeholder="请输入生产厂商"
+                    :max-length="200"
+                    allow-clear
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="6">
+                <a-form-item label="序列号" field="serial_number">
+                  <a-input
+                    v-model="form.serial_number"
+                    placeholder="请输入序列号"
+                    :max-length="100"
+                    allow-clear
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="6">
+                <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="6">
+                <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="6">
+                <a-form-item label="供应商" field="supplier_id">
+                  <a-select
+                    v-model="form.supplier_id"
+                    placeholder="请选择供应商"
+                    allow-clear
+                    allow-search
+                    :loading="supplierLoading"
+                    :filter-option="false"
+                    @search="handleSupplierSearch"
+                    @dropdown-visible-change="handleSupplierDropdownChange"
+                  >
+                    <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="6">
+                <a-form-item label="质保期" field="warranty_period">
+                  <a-input
+                    v-model="form.warranty_period"
+                    placeholder="请输入质保期（如：36个月）"
+                    :max-length="50"
+                    allow-clear
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="6">
+                <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="6">
+                <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-card>
+
+          <!-- 使用信息 -->
+          <a-card class="info-card" title="使用信息">
+            <a-row :gutter="16">
+              <a-col :span="6">
+                <a-form-item label="使用部门" field="department">
+                  <a-input
+                    v-model="form.department"
+                    placeholder="请输入使用部门"
+                    :max-length="100"
+                    allow-clear
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="6">
+                <a-form-item label="使用人" field="user">
+                  <a-input
+                    v-model="form.user"
+                    placeholder="请输入使用人"
+                    :max-length="50"
+                    allow-clear
+                  />
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </a-card>
+
+          <!-- 位置信息 -->
+          <a-card class="info-card" title="位置信息">
+            <a-row :gutter="16">
+              <a-col :span="6">
+                <a-form-item label="所属数据中心" field="datacenter_id">
+                  <a-select
+                    v-model="form.datacenter_id"
+                    placeholder="请选择数据中心"
+                    allow-clear
+                    allow-search
+                    :loading="datacenterLoading"
+                    :filter-option="false"
+                    @search="handleDatacenterSearch"
+                    @change="handleDatacenterChange"
+                  >
+                    <a-option
+                      v-for="item in datacenterOptions"
+                      :key="item.value"
+                      :value="item.value"
+                      :label="item.label"
+                    />
+                  </a-select>
+                </a-form-item>
+              </a-col>
+              <a-col :span="6">
+                <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"
+                    :filter-option="false"
+                    @search="handleFloorSearch"
+                    @change="handleFloorChange"
+                  >
+                    <a-option
+                      v-for="item in floorOptions"
+                      :key="item.value"
+                      :value="item.value"
+                      :label="item.label"
+                    />
+                  </a-select>
+                </a-form-item>
+              </a-col>
+              <a-col :span="6">
+                <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"
+                    :filter-option="false"
+                    @search="handleRackSearch"
+                  >
+                    <a-option
+                      v-for="item in rackOptions"
+                      :key="item.id"
+                      :value="item.id"
+                    >
+                      {{ item.name }} ({{ item.code }})
+                    </a-option>
+                  </a-select>
+                </a-form-item>
+              </a-col>
+              <a-col :span="3">
+                <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="3">
+                <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-card>
+
+          <!-- 其他信息 -->
+          <a-card class="info-card" title="其他信息">
+            <a-row :gutter="16">
+              <a-col :span="6">
+                <a-form-item label="二维码标签" field="qr_code">
+                  <a-input
+                    v-model="form.qr_code"
+                    placeholder="请输入二维码标签"
+                    :max-length="100"
+                    allow-clear
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="6">
+                <a-form-item label="RFID标签" field="rfid_tag">
+                  <a-input
+                    v-model="form.rfid_tag"
+                    placeholder="请输入RFID标签"
+                    :max-length="100"
+                    allow-clear
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="6">
+                <a-form-item label="资产标签号" field="asset_tag">
+                  <a-input
+                    v-model="form.asset_tag"
+                    placeholder="请输入资产标签号"
+                    :max-length="100"
+                    allow-clear
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="6">
+                <a-form-item label="技术规格" field="specifications">
+                  <a-input
+                    v-model="form.specifications"
+                    placeholder="请输入技术规格"
+                    :max-length="500"
+                    allow-clear
+                  />
+                </a-form-item>
+              </a-col>
+            </a-row>
+            <a-row :gutter="16">
+              <a-col :span="12">
+                <a-form-item label="资产描述" field="description">
+                  <a-textarea
+                    v-model="form.description"
+                    placeholder="请输入资产描述"
+                    :auto-size="{ minRows: 3, maxRows: 6 }"
+                    :max-length="1000"
+                    show-word-limit
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="12">
+                <a-form-item label="备注" field="remarks">
+                  <a-textarea
+                    v-model="form.remarks"
+                    placeholder="请输入备注"
+                    :auto-size="{ minRows: 3, maxRows: 6 }"
+                    :max-length="500"
+                    show-word-limit
+                  />
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </a-card>
+        </a-form>
+      </a-spin>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { Message } from '@arco-design/web-vue'
+import type { FormInstance } from '@arco-design/web-vue/es/form'
+import {
+  createAsset,
+  updateAsset,
+  fetchAssetDetail,
+  fetchCategoryOptions,
+  assetStatusOptions,
+  AssetForm,
+} from '@/api/ops/asset'
+import { fetchAllSuppliers } from '@/api/ops/supplier'
+import { fetchDatacenterList, fetchRackListByFloor } from '@/api/ops/rack'
+import { fetchFloorListByDatacenter } from '@/api/ops/floor'
+
+const router = useRouter()
+const route = useRoute()
+
+// 页面状态
+const isEdit = ref(false)
+const deviceId = ref<number | null>(null)
+const pageTitle = ref('新增设备')
+const loading = ref(false)
+const submitting = ref(false)
+const formRef = ref<FormInstance>()
+
+// 下拉选项
+const categoryOptions = ref<any[]>([])
+const supplierOptions = ref<any[]>([])
+const datacenterOptions = ref<{ label: string; value: number }[]>([])
+const floorOptions = ref<{ label: string; value: number }[]>([])
+const rackOptions = ref<any[]>([])
+
+// 加载状态
+const categoryLoading = ref(false)
+const supplierLoading = ref(false)
+const datacenterLoading = ref(false)
+const floorLoading = ref(false)
+const rackLoading = ref(false)
+
+// 搜索防抖定时器
+let datacenterSearchTimer: number | undefined
+let floorSearchTimer: number | undefined
+let rackSearchTimer: number | undefined
+
+// 表单数据
+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 extractList = (res: any): any[] => {
+  const candidate =
+    res?.data?.data ?? res?.details?.data ?? res?.data ?? res?.details ?? []
+  return Array.isArray(candidate) ? candidate : []
+}
+
+// 加载下拉选项
+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
+  }
+
+  // 加载全部数据中心（默认列出全部，支持模糊搜索）
+  await fetchDatacenters()
+}
+
+// 加载供应商选项（默认20条，搜索时全部）
+const loadSupplierOptions = async (keyword?: string) => {
+  supplierLoading.value = true
+  try {
+    const res = await fetchAllSuppliers(keyword, 'active', keyword ? undefined : 20)
+    if (res.code === 0) {
+      supplierOptions.value = res.details?.data || res.details || []
+    }
+  } catch (error) {
+    console.error('加载供应商失败:', error)
+  } finally {
+    supplierLoading.value = false
+  }
+}
+
+// 供应商搜索
+const handleSupplierSearch = (keyword: string) => {
+  loadSupplierOptions(keyword)
+}
+
+// 供应商下拉框展开时加载
+const handleSupplierDropdownChange = (visible: boolean) => {
+  if (visible && supplierOptions.value.length === 0) {
+    loadSupplierOptions()
+  }
+}
+
+// 加载数据中心列表
+const fetchDatacenters = async (keyword?: string) => {
+  datacenterLoading.value = true
+  try {
+    const res: any = await fetchDatacenterList({ keyword })
+    const rows = extractList(res)
+    datacenterOptions.value = rows.map((d: any) => ({
+      label: d.name || d.code || String(d.id),
+      value: d.id,
+    }))
+  } catch (error) {
+    console.error('获取数据中心列表失败:', error)
+    datacenterOptions.value = []
+  } finally {
+    datacenterLoading.value = false
+  }
+}
+
+// 数据中心搜索（带防抖）
+const handleDatacenterSearch = (keyword: string) => {
+  if (datacenterSearchTimer) {
+    window.clearTimeout(datacenterSearchTimer)
+  }
+  datacenterSearchTimer = window.setTimeout(() => {
+    fetchDatacenters(keyword?.trim() || undefined)
+  }, 300)
+}
+
+// 加载楼层列表
+const fetchFloors = async (keyword?: string) => {
+  if (!form.value.datacenter_id) {
+    floorOptions.value = []
+    return
+  }
+  floorLoading.value = true
+  try {
+    const res: any = await fetchFloorListByDatacenter(form.value.datacenter_id, {
+      name: keyword || undefined,
+    })
+    const rows = extractList(res)
+    floorOptions.value = rows.map((floor: any) => ({
+      label: floor.name || floor.code || String(floor.id),
+      value: floor.id,
+    }))
+  } catch (error) {
+    console.error('获取楼层列表失败:', error)
+    floorOptions.value = []
+  } finally {
+    floorLoading.value = false
+  }
+}
+
+// 楼层搜索（带防抖）
+const handleFloorSearch = (keyword: string) => {
+  if (!form.value.datacenter_id) return
+  if (floorSearchTimer) {
+    window.clearTimeout(floorSearchTimer)
+  }
+  floorSearchTimer = window.setTimeout(() => {
+    fetchFloors(keyword?.trim() || undefined)
+  }, 300)
+}
+
+// 加载机柜列表
+const fetchRacks = async (keyword?: string) => {
+  if (!form.value.floor_id) {
+    rackOptions.value = []
+    return
+  }
+  rackLoading.value = true
+  try {
+    const res: any = await fetchRackListByFloor(form.value.floor_id, { name: keyword })
+    rackOptions.value = extractList(res)
+  } catch (error) {
+    console.error('获取机柜列表失败:', error)
+    rackOptions.value = []
+  } finally {
+    rackLoading.value = false
+  }
+}
+
+// 机柜搜索（带防抖）
+const handleRackSearch = (keyword: string) => {
+  if (!form.value.floor_id) return
+  if (rackSearchTimer) {
+    window.clearTimeout(rackSearchTimer)
+  }
+  rackSearchTimer = window.setTimeout(() => {
+    fetchRacks(keyword?.trim() || undefined)
+  }, 300)
+}
+
+// 数据中心变化时加载楼层
+const handleDatacenterChange = async (value: number | undefined) => {
+  form.value.floor_id = undefined
+  form.value.rack_id = undefined
+  floorOptions.value = []
+  rackOptions.value = []
+
+  if (value) {
+    await fetchFloors()
+  }
+}
+
+// 楼层变化时加载机柜
+const handleFloorChange = async (value: number | undefined) => {
+  form.value.rack_id = undefined
+  rackOptions.value = []
+
+  if (value) {
+    await fetchRacks()
+  }
+}
+
+// 初始化页面
+const initPage = async () => {
+  await loadOptions()
+
+  const id = route.query.id
+  if (id) {
+    isEdit.value = true
+    deviceId.value = Number(id)
+    pageTitle.value = '编辑设备'
+    await loadDeviceDetail()
+  }
+}
+
+// 加载设备详情
+const loadDeviceDetail = async () => {
+  if (!deviceId.value) return
+
+  loading.value = true
+  try {
+    const res = await fetchAssetDetail(deviceId.value)
+    if (res.code === 0) {
+      form.value = { ...res.details } as AssetForm
+
+      // 如果有供应商，加载供应商选项
+      if (res.details.supplier_id) {
+        try {
+          const supplierRes = await fetchAllSuppliers()
+          if (supplierRes.code === 0) {
+            supplierOptions.value = supplierRes.details?.data || supplierRes.details || []
+          }
+        } catch (error) {
+          console.error('加载供应商失败:', error)
+        }
+      }
+
+      // 如果有数据中心，加载楼层
+      if (res.details.datacenter_id) {
+        try {
+          const floorRes: any = await fetchFloorListByDatacenter(res.details.datacenter_id)
+          const rows = extractList(floorRes)
+          floorOptions.value = rows.map((floor: any) => ({
+            label: floor.name || floor.code || String(floor.id),
+            value: floor.id,
+          }))
+        } catch (error) {
+          console.error('加载楼层失败:', error)
+        }
+      }
+
+      // 如果有楼层，加载机柜
+      if (res.details.floor_id) {
+        try {
+          const rackRes: any = await fetchRackListByFloor(res.details.floor_id)
+          rackOptions.value = extractList(rackRes)
+        } catch (error) {
+          console.error('加载机柜失败:', error)
+        }
+      }
+    } else {
+      Message.error(res.message || '获取详情失败')
+      router.push('/ops/assets/device')
+    }
+  } catch (error) {
+    console.error('获取设备详情失败:', error)
+    Message.error('获取详情失败')
+    router.push('/ops/assets/device')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 返回上一级
+const handleBack = () => {
+  router.push('/assets/device')
+}
+
+// 提交表单
+const handleSubmit = async () => {
+  try {
+    const valid = await formRef.value?.validate()
+    if (valid) {
+      return
+    }
+
+    submitting.value = true
+
+    const data = { ...form.value }
+
+    let res
+    if (isEdit.value && deviceId.value) {
+      res = await updateAsset({ ...data, id: deviceId.value })
+    } else {
+      res = await createAsset(data)
+    }
+
+    if (res.code === 0) {
+      Message.success(isEdit.value ? '更新成功' : '创建成功')
+      handleBack()
+    } else {
+      Message.error(res.message || '操作失败')
+    }
+  } catch (error) {
+    console.error('提交表单失败:', error)
+    Message.error('操作失败')
+  } finally {
+    submitting.value = false
+  }
+}
+
+// 初始化
+onMounted(() => {
+  initPage()
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'DeviceForm',
+}
+</script>
+
+<style scoped lang="less">
+.device-form-page {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-fill-2);
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  background-color: var(--color-bg-2);
+  border-bottom: 1px solid var(--color-border);
+  flex-shrink: 0;
+
+  .header-left {
+    display: flex;
+    align-items: center;
+
+    .page-title {
+      margin: 0;
+      font-size: 18px;
+      font-weight: 500;
+    }
+  }
+}
+
+.page-content {
+  flex: 1;
+  padding: 20px;
+  overflow: auto;
+}
+
+.info-card {
+  margin-bottom: 16px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+// 表单项样式优化
+:deep(.arco-form-item) {
+  margin-bottom: 16px;
+}
+
+:deep(.arco-card) {
+  .arco-card-header {
+    border-bottom: 1px solid var(--color-border);
+  }
+}
+</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/list/index.vue
similarity index 91%
rename from src/views/ops/pages/assets/device/index.vue
rename to src/views/ops/pages/assets/device/list/index.vue
index e345a1e..23f6898 100644
--- a/src/views/ops/pages/assets/device/index.vue
+++ b/src/views/ops/pages/assets/device/list/index.vue
@@ -20,9 +20,6 @@
         <a-button type="primary" @click="handleCreate">
           新增设备
         </a-button>
-        <a-button @click="handleExport">
-          导出
-        </a-button>
       </template>
 
       <!-- 序号 -->
@@ -66,13 +63,6 @@
       </template>
     </search-table>
 
-    <!-- 设备表单对话框（新增/编辑） -->
-    <device-form-dialog
-      v-model:visible="formVisible"
-      :device="editingDevice"
-      @success="handleFormSuccess"
-    />
-
     <!-- 设备详情对话框 -->
     <device-detail-dialog
       v-model:visible="detailVisible"
@@ -83,6 +73,7 @@
 
 <script lang="ts" setup>
 import { ref, reactive, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
 import { Message, Modal } from '@arco-design/web-vue'
 import type { FormItem } from '@/components/search-form/types'
 import SearchTable from '@/components/search-table/index.vue'
@@ -94,8 +85,9 @@ import {
   getAssetStatusColor,
   assetStatusOptions,
 } from '@/api/ops/asset'
-import DeviceFormDialog from './components/DeviceFormDialog.vue'
-import DeviceDetailDialog from './components/DeviceDetailDialog.vue'
+import DeviceDetailDialog from '../components/DeviceDetailDialog.vue'
+
+const router = useRouter()
 
 // 状态管理
 const loading = ref(false)
@@ -204,17 +196,15 @@ const columns = computed(() => [
   {
     title: '操作',
     slotName: 'actions',
-    width: 280,
+    width: 220,
     fixed: 'right' as const,
   },
 ])
 
 // 当前选中的设备
 const currentDevice = ref<any>(null)
-const editingDevice = ref<any>(null)
 
 // 对话框可见性
-const formVisible = ref(false)
 const detailVisible = ref(false)
 
 // 获取设备列表
@@ -276,16 +266,17 @@ const handleRefresh = () => {
   Message.success('数据已刷新')
 }
 
-// 新增设备
+// 新增设备 - 跳转到新增页面
 const handleCreate = () => {
-  editingDevice.value = null
-  formVisible.value = true
+  router.push('/assets/device/form')
 }
 
-// 编辑设备
+// 编辑设备 - 跳转到编辑页面
 const handleEdit = (record: any) => {
-  editingDevice.value = record
-  formVisible.value = true
+  router.push({
+    path: '/assets/device/form',
+    query: { id: record.id },
+  })
 }
 
 // 详情
@@ -335,7 +326,7 @@ const handleExport = async () => {
       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' })
@@ -353,12 +344,6 @@ const handleExport = async () => {
   }
 }
 
-// 表单成功回调
-const handleFormSuccess = () => {
-  formVisible.value = false
-  fetchDevices()
-}
-
 // 格式化金额
 const formatMoney = (value: number | string | null | undefined) => {
   if (value === null || value === undefined || value === '') return '-'
@@ -389,7 +374,7 @@ onMounted(() => {
 
 <script lang="ts">
 export default {
-  name: 'DeviceManage',
+  name: 'DeviceList',
 }
 </script>
 
diff --git a/src/views/ops/pages/assets/supplier/components/SupplierFormDialog.vue b/src/views/ops/pages/assets/supplier/components/SupplierFormDialog.vue
deleted file mode 100644
index b071012..0000000
--- a/src/views/ops/pages/assets/supplier/components/SupplierFormDialog.vue
+++ /dev/null
@@ -1,464 +0,0 @@
-<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/form/index.vue b/src/views/ops/pages/assets/supplier/form/index.vue
new file mode 100644
index 0000000..7c95511
--- /dev/null
+++ b/src/views/ops/pages/assets/supplier/form/index.vue
@@ -0,0 +1,490 @@
+<template>
+  <div class="supplier-form-page">
+    <!-- 页面头部 -->
+    <div class="page-header">
+      <div class="header-left">
+        <a-button type="text" @click="handleBack">
+          <template #icon><icon-left /></template>
+          返回列表
+        </a-button>
+        <a-divider direction="vertical" />
+        <h2 class="page-title">{{ pageTitle }}</h2>
+      </div>
+      <div class="header-right">
+        <a-space>
+          <a-button @click="handleBack">取消</a-button>
+          <a-button type="primary" :loading="submitting" @click="handleSubmit">
+            {{ isEdit ? '保存' : '创建' }}
+          </a-button>
+        </a-space>
+      </div>
+    </div>
+
+    <!-- 表单内容 -->
+    <div class="page-content">
+      <a-spin :loading="loading" style="width: 100%">
+        <a-form ref="formRef" :model="form" layout="vertical">
+          <!-- 基本信息 -->
+          <a-card class="info-card" title="基本信息">
+            <a-row :gutter="16">
+              <a-col :span="6">
+                <a-form-item label="供应商名称" field="name" required>
+                  <a-input
+                    v-model="form.name"
+                    placeholder="请输入供应商名称"
+                    :max-length="200"
+                    allow-clear
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="6">
+                <a-form-item label="供应商编码" field="code" required>
+                  <a-input
+                    v-model="form.code"
+                    placeholder="请输入供应商编码"
+                    :max-length="100"
+                    :disabled="isEdit"
+                    allow-clear
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="6">
+                <a-form-item label="简称" field="short_name">
+                  <a-input
+                    v-model="form.short_name"
+                    placeholder="请输入简称"
+                    :max-length="100"
+                    allow-clear
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="6">
+                <a-form-item label="供应商类型" field="supplier_type" required>
+                  <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="6">
+                <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="6">
+                <a-form-item label="状态" field="status" required>
+                  <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-card>
+
+          <!-- 联系信息 -->
+          <a-card class="info-card" title="联系信息">
+            <a-row :gutter="16">
+              <a-col :span="6">
+                <a-form-item label="联系人" field="contact_person" required>
+                  <a-input
+                    v-model="form.contact_person"
+                    placeholder="请输入联系人"
+                    :max-length="50"
+                    allow-clear
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="6">
+                <a-form-item label="联系电话" field="contact_phone" required>
+                  <a-input
+                    v-model="form.contact_phone"
+                    placeholder="请输入联系电话"
+                    :max-length="20"
+                    allow-clear
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="6">
+                <a-form-item label="备用联系电话" field="contact_mobile" required>
+                  <a-input
+                    v-model="form.contact_mobile"
+                    placeholder="请输入备用联系电话"
+                    :max-length="20"
+                    allow-clear
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="6">
+                <a-form-item label="联系邮箱" field="contact_email" required>
+                  <a-input
+                    v-model="form.contact_email"
+                    placeholder="请输入联系邮箱"
+                    :max-length="100"
+                    allow-clear
+                  />
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </a-card>
+
+          <!-- 地址信息 -->
+          <a-card class="info-card" title="地址信息">
+            <a-row :gutter="16">
+              <a-col :span="6">
+                <a-form-item label="省份" field="province">
+                  <a-input
+                    v-model="form.province"
+                    placeholder="请输入省份"
+                    :max-length="50"
+                    allow-clear
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="6">
+                <a-form-item label="城市" field="city">
+                  <a-input
+                    v-model="form.city"
+                    placeholder="请输入城市"
+                    :max-length="50"
+                    allow-clear
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="6">
+                <a-form-item label="邮编" field="postal_code">
+                  <a-input
+                    v-model="form.postal_code"
+                    placeholder="请输入邮编"
+                    :max-length="10"
+                    allow-clear
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="6">
+                <a-form-item label="详细地址" field="address">
+                  <a-input
+                    v-model="form.address"
+                    placeholder="请输入详细地址"
+                    :max-length="200"
+                    allow-clear
+                  />
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </a-card>
+
+          <!-- 企业信息 -->
+          <a-card class="info-card" title="企业信息">
+            <a-row :gutter="16">
+              <a-col :span="6">
+                <a-form-item label="法定代表人" field="legal_representative">
+                  <a-input
+                    v-model="form.legal_representative"
+                    placeholder="请输入法定代表人"
+                    :max-length="50"
+                    allow-clear
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="6">
+                <a-form-item label="注册资本" field="registered_capital">
+                  <a-input
+                    v-model="form.registered_capital"
+                    placeholder="请输入注册资本"
+                    :max-length="50"
+                    allow-clear
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="6">
+                <a-form-item label="营业执照号" field="business_license">
+                  <a-input
+                    v-model="form.business_license"
+                    placeholder="请输入营业执照号"
+                    :max-length="100"
+                    allow-clear
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="6">
+                <a-form-item label="税号" field="tax_id">
+                  <a-input
+                    v-model="form.tax_id"
+                    placeholder="请输入税号"
+                    :max-length="50"
+                    allow-clear
+                  />
+                </a-form-item>
+              </a-col>
+            </a-row>
+            <a-row :gutter="16">
+              <a-col :span="6">
+                <a-form-item label="企业类型" field="company_type">
+                  <a-input
+                    v-model="form.company_type"
+                    placeholder="请输入企业类型"
+                    :max-length="50"
+                    allow-clear
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="6">
+                <a-form-item label="官网地址" field="website">
+                  <a-input
+                    v-model="form.website"
+                    placeholder="请输入官网地址"
+                    :max-length="200"
+                    allow-clear
+                  />
+                </a-form-item>
+              </a-col>
+            </a-row>
+            <a-row :gutter="16">
+              <a-col :span="12">
+                <a-form-item label="供应商描述" field="description">
+                  <a-textarea
+                    v-model="form.description"
+                    placeholder="请输入供应商描述"
+                    :auto-size="{ minRows: 3, maxRows: 6 }"
+                    :max-length="500"
+                    show-word-limit
+                  />
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </a-card>
+        </a-form>
+      </a-spin>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { Message } from '@arco-design/web-vue'
+import type { FormInstance } from '@arco-design/web-vue/es/form'
+import {
+  createSupplier,
+  updateSupplier,
+  fetchSupplierDetail,
+} 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
+}
+
+const router = useRouter()
+const route = useRoute()
+
+// 页面状态
+const isEdit = ref(false)
+const supplierId = ref<number | null>(null)
+const pageTitle = ref('新增供应商')
+const loading = ref(false)
+const submitting = ref(false)
+const formRef = ref<FormInstance>()
+
+// 表单数据
+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',
+})
+
+// 初始化页面
+const initPage = async () => {
+  const id = route.query.id
+  if (id) {
+    isEdit.value = true
+    supplierId.value = Number(id)
+    pageTitle.value = '编辑供应商'
+    await loadSupplierDetail()
+  }
+}
+
+// 加载供应商详情
+const loadSupplierDetail = async () => {
+  if (!supplierId.value) return
+
+  loading.value = true
+  try {
+    const res = await fetchSupplierDetail(supplierId.value)
+    if (res.code === 0) {
+      form.value = { ...res.details }
+    } else {
+      Message.error(res.message || '获取详情失败')
+      router.push('/assets/supplier')
+    }
+  } catch (error) {
+    console.error('获取供应商详情失败:', error)
+    Message.error('获取详情失败')
+    router.push('/assets/supplier')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 返回上一级
+const handleBack = () => {
+  router.push('/assets/supplier')
+}
+
+// 提交表单
+const handleSubmit = async () => {
+  try {
+    const valid = await formRef.value?.validate()
+    if (valid) {
+      return
+    }
+
+    submitting.value = true
+
+    const data = { ...form.value }
+
+    let res
+    if (isEdit.value && supplierId.value) {
+      res = await updateSupplier({ ...data, id: supplierId.value })
+    } else {
+      res = await createSupplier(data)
+    }
+
+    if (res.code === 0) {
+      Message.success(isEdit.value ? '更新成功' : '创建成功')
+      handleBack()
+    } else {
+      Message.error(res.message || '操作失败')
+    }
+  } catch (error) {
+    console.error('提交表单失败:', error)
+    Message.error('操作失败')
+  } finally {
+    submitting.value = false
+  }
+}
+
+// 初始化
+onMounted(() => {
+  initPage()
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'SupplierForm',
+}
+</script>
+
+<style scoped lang="less">
+.supplier-form-page {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-fill-2);
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  background-color: var(--color-bg-2);
+  border-bottom: 1px solid var(--color-border);
+  flex-shrink: 0;
+
+  .header-left {
+    display: flex;
+    align-items: center;
+
+    .page-title {
+      margin: 0;
+      font-size: 18px;
+      font-weight: 500;
+    }
+  }
+}
+
+.page-content {
+  flex: 1;
+  padding: 20px;
+  overflow: auto;
+}
+
+.info-card {
+  margin-bottom: 16px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+// 表单项样式优化
+:deep(.arco-form-item) {
+  margin-bottom: 16px;
+}
+
+:deep(.arco-card) {
+  .arco-card-header {
+    border-bottom: 1px solid var(--color-border);
+  }
+}
+</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/list/index.vue
similarity index 92%
rename from src/views/ops/pages/assets/supplier/index.vue
rename to src/views/ops/pages/assets/supplier/list/index.vue
index 36c6643..0fac2c6 100644
--- a/src/views/ops/pages/assets/supplier/index.vue
+++ b/src/views/ops/pages/assets/supplier/list/index.vue
@@ -58,13 +58,6 @@
       </template>
     </search-table>
 
-    <!-- 供应商表单对话框（新增/编辑） -->
-    <supplier-form-dialog
-      v-model:visible="formVisible"
-      :supplier="editingSupplier"
-      @success="handleFormSuccess"
-    />
-
     <!-- 供应商详情对话框 -->
     <supplier-detail-dialog
       v-model:visible="detailVisible"
@@ -75,6 +68,7 @@
 
 <script lang="ts" setup>
 import { ref, reactive, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
 import { Message, Modal } from '@arco-design/web-vue'
 import type { FormItem } from '@/components/search-form/types'
 import SearchTable from '@/components/search-table/index.vue'
@@ -83,8 +77,9 @@ import {
   deleteSupplier,
   fetchSupplierDetail,
 } from '@/api/ops/supplier'
-import SupplierFormDialog from './components/SupplierFormDialog.vue'
-import SupplierDetailDialog from './components/SupplierDetailDialog.vue'
+import SupplierDetailDialog from '../components/SupplierDetailDialog.vue'
+
+const router = useRouter()
 
 // 状态选项
 const statusOptions = [
@@ -200,10 +195,8 @@ const columns = computed(() => [
 
 // 当前选中的供应商
 const currentSupplier = ref<any>(null)
-const editingSupplier = ref<any>(null)
 
 // 对话框可见性
-const formVisible = ref(false)
 const detailVisible = ref(false)
 
 // 获取供应商列表
@@ -265,16 +258,17 @@ const handleRefresh = () => {
   Message.success('数据已刷新')
 }
 
-// 新增供应商
+// 新增供应商 - 跳转到新增页面
 const handleCreate = () => {
-  editingSupplier.value = null
-  formVisible.value = true
+  router.push('/assets/supplier/form')
 }
 
-// 编辑供应商
+// 编辑供应商 - 跳转到编辑页面（通过 query 参数传递 id）
 const handleEdit = (record: any) => {
-  editingSupplier.value = record
-  formVisible.value = true
+  router.push({
+    path: '/assets/supplier/form',
+    query: { id: record.id },
+  })
 }
 
 // 详情
@@ -314,12 +308,6 @@ const handleDelete = async (record: any) => {
   }
 }
 
-// 表单成功回调
-const handleFormSuccess = () => {
-  formVisible.value = false
-  fetchSuppliers()
-}
-
 // 获取状态颜色
 const getStatusColor = (status: string) => {
   const colorMap: Record<string, string> = {
@@ -373,7 +361,7 @@ onMounted(() => {
 
 <script lang="ts">
 export default {
-  name: 'SupplierManage',
+  name: 'SupplierList',
 }
 </script>
 
diff --git a/src/views/ops/pages/kb/review/index.vue b/src/views/ops/pages/kb/review/index.vue
index 65b2c09..757457b 100644
--- a/src/views/ops/pages/kb/review/index.vue
+++ b/src/views/ops/pages/kb/review/index.vue
@@ -146,7 +146,7 @@
 
 <script lang="ts" setup>
 import { ref, reactive, computed, onMounted } from 'vue'
-import { Message } from '@arco-design/web-vue'
+import { Message, Modal } from '@arco-design/web-vue'
 import dayjs from 'dayjs'
 import SearchTable from '@/components/search-table/index.vue'
 import type { FormItem } from '@/components/search-form/types'
@@ -378,25 +378,36 @@ const handleView = (record: ReviewListItem) => {
 }
 
 // 审核通过
-const handleApprove = async (record: ReviewListItem) => {
-  try {
-    loading.value = true
-    const res: any = await approveReview({
-      resource_type: record.type,
-      id: record.resource.id,
-    })
-    if (res?.code === 0) {
-      Message.success('审核通过')
-      await fetchData()
-    } else {
-      Message.error(res?.message || '审核失败')
-    }
-  } catch (error) {
-    console.error('审核失败:', error)
-    Message.error('审核失败')
-  } finally {
-    loading.value = false
-  }
+const handleApprove = (record: ReviewListItem) => {
+  const resourceTitle = getResourceTitle(record)
+  const resourceTypeText = getResourceTypeText(record.type)
+  
+  Modal.confirm({
+    title: '确认审核通过',
+    content: `确定要通过该${resourceTypeText}的审核吗？\n标题：${resourceTitle}`,
+    okText: '确认通过',
+    cancelText: '取消',
+    onOk: async () => {
+      try {
+        loading.value = true
+        const res: any = await approveReview({
+          resource_type: record.type,
+          id: record.resource.id,
+        })
+        if (res?.code === 0) {
+          Message.success('审核通过')
+          await fetchData()
+        } else {
+          Message.error(res?.message || '审核失败')
+        }
+      } catch (error) {
+        console.error('审核失败:', error)
+        Message.error('审核失败')
+      } finally {
+        loading.value = false
+      }
+    },
+  })
 }
 
 // 拒绝
diff --git a/src/views/ops/pages/kb/tags/components/CategoryFormDialog.vue b/src/views/ops/pages/kb/tags/components/CategoryFormDialog.vue
index 903c206..dec15c8 100644
--- a/src/views/ops/pages/kb/tags/components/CategoryFormDialog.vue
+++ b/src/views/ops/pages/kb/tags/components/CategoryFormDialog.vue
@@ -216,7 +216,7 @@ const handleOk = async () => {
       res = await createCategory(data)
     }
 
-    if (res.code === 200) {
+    if (res.code === 0) {
       Message.success(isEdit.value ? '编辑成功' : '创建成功')
       emit('success')
       emit('update:visible', false)
diff --git a/src/views/ops/pages/kb/tags/index.vue b/src/views/ops/pages/kb/tags/index.vue
index 0dd685a..5cbece4 100644
--- a/src/views/ops/pages/kb/tags/index.vue
+++ b/src/views/ops/pages/kb/tags/index.vue
@@ -6,6 +6,7 @@
       :data="tableData"
       :columns="columns"
       :loading="loading"
+      :pagination="pagination"
       title="分类管理"
       search-button-text="查询"
       reset-button-text="重置"
@@ -13,6 +14,8 @@
       @search="handleSearch"
       @reset="handleReset"
       @refresh="handleRefresh"
+      @page-change="handlePageChange"
+      @page-size-change="handlePageSizeChange"
     >
       <template #toolbar-left>
         <a-button type="primary" @click="handleCreate">
@@ -66,12 +69,20 @@ import CategoryFormDialog from './components/CategoryFormDialog.vue'
 
 // 状态管理
 const loading = ref(false)
-const tableData = ref<Category[]>([])
+const allData = ref<Category[]>([]) // 存储全量数据
+const tableData = ref<Category[]>([]) // 当前页数据
 const formModel = ref({
   keyword: '',
   type: '',
 })
 
+// 分页状态
+const pagination = ref({
+  current: 1,
+  pageSize: 20,
+  total: 0,
+})
+
 // 表单项配置
 const formItems = computed<FormItem[]>(() => [
   {
@@ -122,6 +133,12 @@ const columns = computed(() => [
     width: 120,
     align: 'center' as const,
   },
+  {
+    title: '排序',
+    dataIndex: 'sort_order',
+    width: 80,
+    align: 'center' as const,
+  },
   {
     title: '备注信息',
     dataIndex: 'remarks',
@@ -162,6 +179,14 @@ const getTypeColor = (type: string) => {
   return colorMap[type] || 'gray'
 }
 
+// 更新表格数据（前端分页）
+const updateTableData = () => {
+  const { current, pageSize } = pagination.value
+  const start = (current - 1) * pageSize
+  const end = start + pageSize
+  tableData.value = allData.value.slice(start, end)
+}
+
 // 获取分类列表
 const fetchCategories = async () => {
   loading.value = true
@@ -180,20 +205,29 @@ const fetchCategories = async () => {
       
       // 如果有关键词搜索，进行过滤
       if (formModel.value.keyword) {
-        data = data.filter((item: Category) => 
+        data = data.filter((item: Category) =>
           item.name.toLowerCase().includes(formModel.value.keyword.toLowerCase())
         )
       }
       
-      tableData.value = data
+      // 保存全量数据并更新分页
+      allData.value = data
+      pagination.value.total = data.length
+      // 重置到第一页
+      pagination.value.current = 1
+      updateTableData()
     } else {
       Message.error(res.message || '获取分类列表失败')
+      allData.value = []
       tableData.value = []
+      pagination.value.total = 0
     }
   } catch (error) {
     console.error('获取分类列表失败:', error)
     Message.error('获取分类列表失败')
+    allData.value = []
     tableData.value = []
+    pagination.value.total = 0
   } finally {
     loading.value = false
   }
@@ -224,6 +258,19 @@ const handleRefresh = () => {
   Message.success('数据已刷新')
 }
 
+// 分页切换
+const handlePageChange = (current: number) => {
+  pagination.value.current = current
+  updateTableData()
+}
+
+// 每页条数切换
+const handlePageSizeChange = (pageSize: number) => {
+  pagination.value.current = 1
+  pagination.value.pageSize = pageSize
+  updateTableData()
+}
+
 // 新增分类
 const handleCreate = () => {
   editingCategory.value = null
@@ -244,7 +291,7 @@ const handleDelete = async (record: Category) => {
     onOk: async () => {
       try {
         const res: any = await deleteCategory(record.id)
-        if (res.code === 200) {
+        if (res.code === 0) {
           Message.success('删除成功')
           fetchCategories()
         } else {