From 494e0160b79a22b2e0df71e61d9bb4de333cadbd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=89=AB=E5=9C=B0=E5=83=A7?= <357099073@qq.com>
Date: Sun, 2 Nov 2025 13:17:10 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=A7=9F=E6=88=B7=E5=82=A8?=
 =?UTF-8?q?=E5=AD=98=E5=AE=B9=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pc/src/components/CommonAside.vue             |   2 +-
 pc/src/router/index.js                        |  50 -
 pc/src/views/Main.vue                         | 167 ++-
 .../views/apps/knowledge/category/index.vue   | 170 +++-
 .../apps/knowledge/components/detail.vue      | 319 +++---
 .../views/apps/knowledge/components/edit.vue  | 368 +++----
 pc/src/views/apps/knowledge/index.vue         | 923 ++++++-----------
 pc/src/views/apps/knowledge/tag/index.vue     | 175 ++++
 pc/src/views/dashboard/index.vue              | 962 +++++++++++-------
 .../views/system/tenant/components/audit.vue  | 227 +++++
 .../views/system/tenant/components/detail.vue | 215 ++++
 .../views/system/tenant/components/edit.vue   | 236 +++++
 pc/src/views/system/tenant/index.vue          | 738 +++++---------
 server/models/tenant.go                       |  14 +-
 14 files changed, 2621 insertions(+), 1945 deletions(-)

diff --git a/pc/src/components/CommonAside.vue b/pc/src/components/CommonAside.vue
index 75a5155..f0565a2 100644
--- a/pc/src/components/CommonAside.vue
+++ b/pc/src/components/CommonAside.vue
@@ -362,7 +362,7 @@ const findMenuItemByPath = (menus, path) => {
 }
 
 h3{
-  line-height: 60px;
+  line-height: 80px;
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/pc/src/router/index.js b/pc/src/router/index.js
index c79a119..c3969cf 100644
--- a/pc/src/router/index.js
+++ b/pc/src/router/index.js
@@ -65,28 +65,22 @@ export async function loadAndAddDynamicRoutes() {
   // 创建加载 Promise
   routesLoadingPromise = (async () => {
     try {
-      console.log('[路由加载] 开始从 API 加载动态路由...');
-      
       // 直接从 API 获取菜单数据
       const { getAllMenus } = await import("@/api/menu");
       const res = await getAllMenus();
       
       if (res && res.success && res.data) {
-        console.log('[路由加载] API 返回菜单数量:', res.data.length);
         // 添加动态路由
         addDynamicRoutes(res.data);
-        console.log('[路由加载] 动态路由加载完成');
         dynamicRoutesAdded = true;
         routesLoadingPromise = null;
         return Promise.resolve();
       } else {
-        console.warn('[路由加载] API 返回数据格式异常:', res);
         dynamicRoutesAdded = true;
         routesLoadingPromise = null;
         return Promise.resolve();
       }
     } catch (error) {
-      console.error('[路由加载] 加载动态路由失败:', error);
       // 即使出错也标记为已加载，避免无限重试
       dynamicRoutesAdded = true;
       routesLoadingPromise = null;
@@ -100,15 +94,11 @@ export async function loadAndAddDynamicRoutes() {
 // 添加动态路由到 Main 的 children 中
 function addDynamicRoutes(menus) {
   if (!menus?.length) {
-    console.warn('[路由加载] 菜单数据为空，跳过添加动态路由');
     return;
   }
   
-  console.log('[路由加载] 开始添加动态路由，菜单数量:', menus.length);
-  
   // 如果已经添加过，先移除旧路由（刷新时可能需要重新添加）
   if (dynamicRoutesAdded) {
-    console.log('[路由加载] 检测到已添加的路由，先移除旧路由');
     // 移除 Main 路由以便重新添加
     if (router.hasRoute('Main')) {
       router.removeRoute('Main');
@@ -120,18 +110,10 @@ function addDynamicRoutes(menus) {
   const filteredMenus = menus.filter(menu => menu.id !== 1);
   
   const dynamicRoutes = convertMenusToRoutes(filteredMenus);
-  console.log('[路由加载] 转换后的动态路由数量:', dynamicRoutes.length);
-  console.log('[路由加载] 动态路由列表:', dynamicRoutes.map(r => ({
-    path: r.path,
-    name: r.name,
-    hasComponent: !!r.component,
-    childrenCount: r.children?.length || 0
-  })));
   
   // 获取主路由
   const mainRoute = router.getRoutes().find(r => r.name === 'Main');
   if (!mainRoute) {
-    console.error('[路由加载] 找不到 Main 路由');
     return;
   }
   
@@ -157,7 +139,6 @@ function addDynamicRoutes(menus) {
   };
   
   router.addRoute(newMainRoute);
-  console.log('[路由加载] Main 路由已更新，子路由总数:', newMainRoute.children.length);
   
   // 添加知识库的子路由（详情页和编辑页）
   // 直接在 Main 路由下添加完整路径的子路由
@@ -227,22 +208,16 @@ router.beforeEach(async (to, from, next) => {
   
   // 3. 已登录，确保动态路由已加载（必须在检查 404 之前）
   if (!dynamicRoutesAdded) {
-    console.log('[路由守卫] 开始加载动态路由, 目标路径:', to.path);
     await loadAndAddDynamicRoutes();
-    console.log('[路由守卫] 动态路由加载完成, dynamicRoutesAdded:', dynamicRoutesAdded);
-    
     // 如果路由加载后仍然未添加（API 失败）
     if (!dynamicRoutesAdded) {
-      console.warn('[路由守卫] 路由加载失败，可能是 API 错误或 token 无效');
       // 重新检查 token，如果 token 不存在或无效，跳转到登录页
       const currentToken = localStorage.getItem('token');
       if (!currentToken) {
-        console.log('[路由守卫] 未找到 token，跳转到登录页');
         next({ path: "/login", query: { redirect: to.path } });
         return;
       }
       // 如果 token 存在但路由加载失败，可能是 token 过期或无效，清除 token 并跳转登录
-      console.warn('[路由守卫] Token 存在但路由加载失败，清除 token 并跳转登录页');
       localStorage.removeItem('token');
       localStorage.removeItem('userInfo');
       next({ path: "/login", query: { redirect: to.path } });
@@ -254,23 +229,14 @@ router.beforeEach(async (to, from, next) => {
     
     // 重新解析路径检查是否能匹配
     const resolved = router.resolve(to.path);
-    console.log('[路由守卫] 路由解析结果:', {
-      path: to.path,
-      resolved: resolved.path,
-      matched: resolved.matched.length,
-      name: resolved.name,
-      matchedRoutes: resolved.matched.map(m => ({ name: m.name, path: m.path }))
-    });
     
     // 如果能匹配到路由，使用完整路径重新导航（确保Vue Router正确更新）
     if (resolved.matched.length > 0 && resolved.name !== "NotFound") {
-      console.log('[路由守卫] 路由匹配成功，重新导航确保正确加载');
       next({ path: to.fullPath || to.path, replace: true });
       return;
     }
     
     // 如果无法匹配，使用原始路径重新导航
-    console.log('[路由守卫] 路由未匹配，重新导航到:', to.path);
     next({ path: to.fullPath || to.path, replace: true });
     return;
   }
@@ -278,29 +244,13 @@ router.beforeEach(async (to, from, next) => {
   // 3.5 如果路由已加载但当前路径未匹配，可能是刷新问题
   // 注意：这里需要排除根路径和已知的静态路由
   if (to.matched.length === 0 && to.name !== "NotFound" && to.path !== "/" && to.path !== "/dashboard") {
-    console.log('[路由守卫] 路由已加载但未匹配，尝试重新解析:', to.path);
     // 重新解析路径，看看是否能够匹配
     const resolved = router.resolve(to.path);
-    console.log('[路由守卫] 重新解析结果:', {
-      matched: resolved.matched.length,
-      name: resolved.name,
-      matchedRoutes: resolved.matched.map(m => ({ name: m.name, path: m.path }))
-    });
     
     if (resolved.matched.length > 0 && resolved.name !== "NotFound") {
       // 能够匹配，说明路由表正常，使用路径重新导航
-      console.log('[路由守卫] 重新解析匹配成功，重新导航');
       next({ path: to.path, replace: true });
       return;
-    } else {
-      console.warn('[路由守卫] 路由确实无法匹配，可能是路径错误:', to.path);
-      // 打印所有已注册的路由用于调试
-      const allRoutes = router.getRoutes();
-      console.log('[路由守卫] 所有已注册的路由:', allRoutes.map(r => ({
-        name: r.name,
-        path: r.path,
-        children: r.children?.map(c => ({ name: c.name, path: c.path }))
-      })));
     }
   }
   
diff --git a/pc/src/views/Main.vue b/pc/src/views/Main.vue
index 1477cca..9e9ef1c 100644
--- a/pc/src/views/Main.vue
+++ b/pc/src/views/Main.vue
@@ -4,7 +4,7 @@ import CommonHeader from '@/components/CommonHeader.vue';
 import { useTabsStore } from '@/stores';
 import { useRouter, useRoute } from 'vue-router';
 import { ref, watch, reactive, nextTick, onMounted } from 'vue';
-import { More, DArrowRight } from '@element-plus/icons-vue'
+import { More, Close, CircleClose } from '@element-plus/icons-vue'
 
 const tabsStore = useTabsStore();
 const router = useRouter();
@@ -175,16 +175,20 @@ function closeAllTabs() {
                 @contextmenu="onTabContextMenu($event, tab)"
               />
             </el-tabs>
-            <!-- 跟随浮动到 tabs 最右侧的批量按钮 -->
-            <div class="floated-tabs-extra-btn">
-              <el-dropdown>
-                <span class="extra-action-btn">
-                  <el-icon><DArrowRight /></el-icon>
-                </span>
+            <!-- 右侧操作按钮 -->
+            <div class="tabs-extra-actions">
+              <el-dropdown trigger="click">
+                <el-button type="primary" link size="small" class="extra-btn">
+                  <el-icon><More /></el-icon>
+                </el-button>
                 <template #dropdown>
                   <el-dropdown-menu>
-                    <el-dropdown-item @click="closeOthers">关闭其他</el-dropdown-item>
-                    <el-dropdown-item @click="closeAll">关闭全部</el-dropdown-item>
+                    <el-dropdown-item @click="closeOthers">
+                      关闭其他
+                    </el-dropdown-item>
+                    <el-dropdown-item @click="closeAll">
+                      关闭全部
+                    </el-dropdown-item>
                   </el-dropdown-menu>
                 </template>
               </el-dropdown>
@@ -220,47 +224,132 @@ function closeAllTabs() {
   .main-header {
     background-color: var(--header-bg-color, #0081ff);
     transition: background-color 0.3s ease;
-    height: 60px;
+    height: 80px;
     padding: 0;
   }
   .right-main {
-    background-color: var(--bg-color-page);
-    color: var(--text-color-primary);
+    background-color: var(--el-bg-color-page);
+    color: var(--el-text-color-primary);
     transition: background-color 0.3s ease, color 0.3s ease;
     padding: 20px;
     overflow-y: auto;
-    // 注意：overflow-y: auto 不会影响 fixed 定位的元素（fixed 相对于 viewport）
+    
     .multi-tabs-wrapper {
       position: relative;
-      zoom: 1;
-      min-height: 45px;
-    }
-    .floated-tabs-extra-btn {
-      float: right;
-      margin-top: -40px;
-      margin-right: 12px;
-      z-index: 10;
-    }
-    .extra-action-btn {
-      display: inline-flex;
+      display: flex;
       align-items: center;
-      font-size: 20px;
-      cursor: pointer;
-      color: #888;
-      background: none;
-      border: none;
-      padding: 0 8px;
-      border-radius: 4px;
-      transition: color 0.2s;
-      &:hover {
-        color: #409eff;
-        background: none;
+      gap: 12px;
+      margin-bottom: 16px;
+      background: var(--el-bg-color);
+      border-radius: 8px;
+      padding: 8px 12px;
+      border: 1px solid var(--el-border-color-lighter);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+    }
+    
+    .multi-tabs {
+      flex: 1;
+      min-width: 0;
+      
+      :deep(.el-tabs__header) {
+        margin: 0;
+        border-bottom: none;
+      }
+      
+      :deep(.el-tabs__nav-wrap) {
+        overflow-x: auto;
+        overflow-y: hidden;
+        scrollbar-width: thin;
+        scrollbar-color: var(--el-border-color) transparent;
+        
+        &::-webkit-scrollbar {
+          height: 4px;
+        }
+        
+        &::-webkit-scrollbar-track {
+          background: transparent;
+        }
+        
+        &::-webkit-scrollbar-thumb {
+          background: var(--el-border-color);
+          border-radius: 2px;
+          
+          &:hover {
+            background: var(--el-border-color-darker);
+          }
+        }
+      }
+      
+      :deep(.el-tabs__item) {
+        border: 1px solid var(--el-border-color-lighter);
+        border-radius: 6px;
+        margin-right: 8px;
+        padding: 8px 16px;
+        height: 36px;
+        line-height: 20px;
+        color: var(--el-text-color-regular);
+        background: var(--el-fill-color-lighter);
+        transition: all 0.3s;
+        
+        &:hover {
+          color: var(--el-color-primary);
+          border-color: var(--el-color-primary-light-7);
+          background: var(--el-color-primary-light-9);
+        }
+        
+        &.is-active {
+          color: var(--el-color-primary);
+          border-color: #4f84ff;
+          background: #4f84ff;
+          color: #fff;
+          
+          .el-icon-close {
+            color: rgba(255, 255, 255, 0.8);
+            
+            &:hover {
+              color: #fff;
+              background-color: rgba(255, 255, 255, 0.2);
+            }
+          }
+        }
+        
+        .el-icon-close {
+          margin-left: 8px;
+          border-radius: 50%;
+          width: 16px;
+          height: 16px;
+          line-height: 16px;
+          transition: all 0.2s;
+          
+          &:hover {
+            background-color: var(--el-fill-color);
+          }
+        }
+      }
+      
+      :deep(.el-tabs__nav) {
+        border: none;
+      }
+      
+      :deep(.el-tabs__content) {
+        display: none;
       }
     }
-    .more-menu {
-      font-size: 13px;
-      margin-left: 10px;
-      cursor: pointer;
+    
+    .tabs-extra-actions {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      
+      .extra-btn {
+        padding: 8px;
+        font-size: 18px;
+        color: var(--el-text-color-regular);
+        
+        &:hover {
+          color: var(--el-color-primary);
+        }
+      }
     }
   }
 }
diff --git a/pc/src/views/apps/knowledge/category/index.vue b/pc/src/views/apps/knowledge/category/index.vue
index 65d7a47..9252099 100644
--- a/pc/src/views/apps/knowledge/category/index.vue
+++ b/pc/src/views/apps/knowledge/category/index.vue
@@ -1,13 +1,173 @@
 <template>
-    <div>
-123
+  <div class="category-manage">
+    <div class="page-header">
+      <h2 class="page-title">分类管理</h2>
+      <el-button type="primary" @click="handleAdd">
+        <el-icon><Plus /></el-icon>
+        添加分类
+      </el-button>
     </div>
+
+    <div class="category-content">
+      <el-card shadow="never">
+        <el-table :data="categoryList" style="width: 100%" v-loading="loading">
+          <el-table-column prop="categoryId" label="ID" width="80" />
+          <el-table-column prop="categoryName" label="分类名称" />
+          <el-table-column label="操作" width="200">
+            <template #default="{ row }">
+              <el-button type="primary" link size="small" @click="handleEdit(row)">
+                编辑
+              </el-button>
+              <el-button type="danger" link size="small" @click="handleDelete(row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-card>
+    </div>
+
+    <!-- 添加/编辑对话框 -->
+    <el-dialog
+      v-model="dialogVisible"
+      :title="dialogTitle"
+      width="500px"
+    >
+      <el-form
+        :model="formData"
+        :rules="rules"
+        ref="formRef"
+        label-width="100px"
+      >
+        <el-form-item label="分类名称" prop="categoryName">
+          <el-input
+            v-model="formData.categoryName"
+            placeholder="请输入分类名称"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleSubmit">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import { getCategoryList, addCategory } from '@/api/knowledge'
 
+const loading = ref(false)
+const categoryList = ref<any[]>([])
+const dialogVisible = ref(false)
+const dialogTitle = ref('添加分类')
+const formRef = ref<FormInstance>()
+
+const formData = reactive({
+  categoryId: 0,
+  categoryName: '',
+})
+
+const rules = reactive<FormRules>({
+  categoryName: [
+    { required: true, message: '请输入分类名称', trigger: 'blur' },
+  ],
+})
+
+const fetchList = async () => {
+  loading.value = true
+  try {
+    const res = await getCategoryList()
+    const data = res.code === 0 && res.data ? res.data : res.data || []
+    categoryList.value = Array.isArray(data) ? data : []
+  } catch (e: any) {
+    ElMessage.error(e.message || '获取分类列表失败')
+  } finally {
+    loading.value = false
+}
+
+const handleAdd = () => {
+  dialogTitle.value = '添加分类'
+  formData.categoryId = 0
+  formData.categoryName = ''
+  dialogVisible.value = true
+}
+
+const handleEdit = (row: any) => {
+  dialogTitle.value = '编辑分类'
+  formData.categoryId = row.categoryId
+  formData.categoryName = row.categoryName
+  dialogVisible.value = true
+}
+
+const handleDelete = (row: any) => {
+  ElMessageBox.confirm('确认删除该分类？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(async () => {
+    try {
+      // TODO: 实现删除API
+      ElMessage.success('删除成功')
+      fetchList()
+    } catch (e: any) {
+      ElMessage.error(e.message || '删除失败')
+    }
+  })
+}
+
+const handleSubmit = () => {
+  if (!formRef.value) return
+  formRef.value.validate(async (valid: boolean) => {
+    if (!valid) return
+    try {
+      await addCategory({
+        categoryName: formData.categoryName,
+      })
+      ElMessage.success('操作成功')
+      dialogVisible.value = false
+      fetchList()
+    } catch (e: any) {
+      ElMessage.error(e.message || '操作失败')
+    }
+  })
+}
+
+onMounted(() => {
+  fetchList()
+})
 </script>
 
-<style lang="scss" scoped>
+<style scoped lang="less">
+.category-manage {
+  padding: 24px;
+  min-height: 100%;
+  background-color: var(--el-bg-color-page);
+}
 
-</style>
\ No newline at end of file
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+
+  .page-title {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--el-text-color-primary);
+  }
+}
+
+.category-content {
+  :deep(.el-card) {
+    background: var(--el-bg-color);
+    border: 1px solid var(--el-border-color-lighter);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  }
+}
+</style>
diff --git a/pc/src/views/apps/knowledge/components/detail.vue b/pc/src/views/apps/knowledge/components/detail.vue
index 2bafd4d..5565891 100644
--- a/pc/src/views/apps/knowledge/components/detail.vue
+++ b/pc/src/views/apps/knowledge/components/detail.vue
@@ -2,68 +2,76 @@
   <div class="knowledge-detail">
     <!-- 顶部标题栏 -->
     <div class="detail-header">
-      <el-button type="text" @click="goBack"
-        ><i class="fas fa-arrow-left"></i> 返回</el-button
-      >
-      <h2>{{ knowledgeTitle }}</h2>
+      <el-button type="primary" link @click="goBack">
+        <el-icon><ArrowLeft /></el-icon>
+        返回
+      </el-button>
+      <h2 class="detail-title">{{ knowledgeTitle }}</h2>
+      <div class="header-actions">
+        <el-button type="primary" @click="handleEdit">
+          <el-icon><Edit /></el-icon>
+          编辑
+        </el-button>
+        <el-button type="danger" @click="handleDelete">
+          <el-icon><Delete /></el-icon>
+          删除
+        </el-button>
+      </div>
     </div>
 
     <!-- 主体内容区 -->
     <div class="detail-body">
       <!-- 左侧信息面板 -->
       <div class="info-panel">
-        <el-card shadow="never">
-          <div slot="header" class="header">
-            <span>基本信息</span>
-          </div>
+        <div class="info-card">
+          <h3 class="info-title">基本信息</h3>
           <el-divider />
-          <el-form label-width="80px" size="small">
-            <el-form-item label="标题：">
-              <span>{{ formData.title }}</span>
-            </el-form-item>
-            <el-form-item label="分类：">
-              <el-tag size="small">{{ formData.category }}</el-tag>
-            </el-form-item>
-            <el-form-item label="标签：">
-              <el-tag
-                v-for="tag in formData.tags"
-                :key="tag"
-                size="small"
-                style="margin-right: 4px"
-                >{{ tag }}</el-tag
-              >
-            </el-form-item>
-            <el-form-item label="作者：">
-              <span>{{ formData.author }}</span>
-            </el-form-item>
-            <el-form-item label="创建时间：">
-              <span>{{ formData.createTime }}</span>
-            </el-form-item>
-            <el-form-item label="更新时间：">
-              <span>{{ formData.updateTime }}</span>
-            </el-form-item>
-          </el-form>
-          <el-form label-width="80px" align="center">
-            <el-divider />
-            <el-button type="primary" @click="handleEdit"
-              ><i class="fas fa-edit"></i> 编辑</el-button
-            >
-            <el-button type="danger" @click="handleDelete"
-              ><i class="fas fa-trash"></i> 删除</el-button
-            >
-          </el-form>
-        </el-card>
+          <div class="info-content">
+            <div class="info-item">
+              <span class="info-label">标题：</span>
+              <span class="info-value">{{ formData.title }}</span>
+            </div>
+            <div class="info-item">
+              <span class="info-label">分类：</span>
+              <el-tag size="small" type="info">{{ formData.category }}</el-tag>
+            </div>
+            <div class="info-item">
+              <span class="info-label">标签：</span>
+              <div class="tags-wrapper">
+                <el-tag
+                  v-for="tag in formData.tags"
+                  :key="tag"
+                  size="small"
+                  effect="plain"
+                  style="margin-right: 6px; margin-bottom: 6px;"
+                >
+                  {{ tag }}
+                </el-tag>
+              </div>
+            </div>
+            <div class="info-item">
+              <span class="info-label">作者：</span>
+              <span class="info-value">{{ formData.author }}</span>
+            </div>
+            <div class="info-item">
+              <span class="info-label">创建时间：</span>
+              <span class="info-value">{{ formData.createTime }}</span>
+            </div>
+            <div class="info-item">
+              <span class="info-label">更新时间：</span>
+              <span class="info-value">{{ formData.updateTime }}</span>
+            </div>
+          </div>
+        </div>
       </div>
 
       <!-- 右侧内容面板 -->
       <div class="content-panel">
-        <el-card shadow="never">
-          <div slot="header">
-            <span>正文内容</span>
-          </div>
+        <div class="content-card">
+          <h3 class="content-title">正文内容</h3>
           <el-divider />
           <div class="markdown-body" v-html="compiledMarkdown"></div>
-        </el-card>
+        </div>
       </div>
     </div>
   </div>
@@ -73,6 +81,7 @@
 import { ref, computed, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
+import { ArrowLeft, Edit, Delete } from '@element-plus/icons-vue'
 import { marked } from "marked"
 import { getKnowledgeDetail, deleteKnowledge } from "@/api/knowledge"
 
@@ -90,6 +99,7 @@ interface FormData {
   updateTime: string,
   content: string,
 }
+
 const formData = ref<FormData>({
   title: "",
   category: "",
@@ -124,7 +134,6 @@ async function fetchDetail() {
   try {
     const idValue = id.value as string | number
     const res = await getKnowledgeDetail(idValue)
-    // API 返回的数据结构: { code: 0, data: {...}, message: "success" }
     const data = (res.code === 0 && res.data) ? res.data : (res.data || res)
     formData.value = {
       title: data.title || '',
@@ -142,14 +151,17 @@ async function fetchDetail() {
     ElMessage.error("获取详情失败")
   }
 }
+
 onMounted(fetchDetail)
 
 function goBack() {
   router.push("/apps/knowledge")
 }
+
 function handleEdit() {
   router.push(`/apps/knowledge/edit/${id.value}`)
 }
+
 function handleDelete() {
   ElMessageBox.confirm(
     "确认删除该知识？",
@@ -163,7 +175,6 @@ function handleDelete() {
     try {
       const idValue = id.value as string | number
       const res = await deleteKnowledge(idValue)
-      // API 返回的数据结构: { code: 0, message: "删除成功", data: null }
       if (res.code === 0) {
         ElMessage.success("删除成功")
         goBack()
@@ -178,32 +189,35 @@ function handleDelete() {
 </script>
 
 <style scoped lang="less">
-/* 知识详情页面样式 - 使用主题变量 */
 .knowledge-detail {
-  background-color: var(--bg-color-page);
-  min-height: 100%;
   padding: 24px;
-  transition: background-color 0.3s ease;
+  min-height: 100%;
+  background-color: var(--el-bg-color-page);
 }
 
 .detail-header {
+  background: var(--el-bg-color);
+  border-radius: 12px;
+  padding: 20px 24px;
+  margin-bottom: 20px;
   display: flex;
   align-items: center;
-  margin-bottom: 20px;
-  background-color: var(--card-bg-color);
-  padding: 16px 24px;
-  border-radius: 12px;
-  box-shadow: var(--box-shadow);
-  border: 1px solid var(--border-color-lighter);
-  transition: all 0.3s ease;
-}
+  gap: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid var(--el-border-color-lighter);
 
-.detail-header h2 {
-  margin: 0 0 0 12px;
-  font-size: 20px;
-  font-weight: 600;
-  color: var(--text-color-primary);
-  transition: color 0.3s ease;
+  .detail-title {
+    flex: 1;
+    margin: 0;
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--el-text-color-primary);
+  }
+
+  .header-actions {
+    display: flex;
+    gap: 12px;
+  }
 }
 
 .detail-body {
@@ -215,94 +229,120 @@ function handleDelete() {
   width: 320px;
   flex-shrink: 0;
 
-  :deep(.el-card) {
-    background-color: var(--card-bg-color);
-    border-color: var(--border-color-lighter);
-    transition: all 0.3s ease;
-  }
+  .info-card {
+    background: var(--el-bg-color);
+    border-radius: 12px;
+    padding: 24px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+    border: 1px solid var(--el-border-color-lighter);
 
-  .header {
-    color: var(--text-color-primary);
-    font-weight: 600;
-    transition: color 0.3s ease;
-  }
+    .info-title {
+      margin: 0 0 16px;
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--el-text-color-primary);
+    }
 
-  :deep(.el-form-item__label) {
-    color: var(--text-color-secondary);
-    transition: color 0.3s ease;
-  }
+    .info-content {
+      .info-item {
+        margin-bottom: 20px;
 
-  :deep(.el-form-item__content) {
-    color: var(--text-color-primary);
-    transition: color 0.3s ease;
-  }
+        &:last-child {
+          margin-bottom: 0;
+        }
 
-  :deep(.el-tag) {
-    background-color: var(--fill-color-light);
-    border-color: var(--border-color-lighter);
-    color: var(--text-color-primary);
-    transition: all 0.3s ease;
+        .info-label {
+          display: block;
+          font-size: 13px;
+          color: var(--el-text-color-regular);
+          margin-bottom: 8px;
+          font-weight: 500;
+        }
+
+        .info-value {
+          font-size: 14px;
+          color: var(--el-text-color-primary);
+          word-break: break-word;
+        }
+
+        .tags-wrapper {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 6px;
+        }
+      }
+    }
   }
 }
 
 .content-panel {
   flex: 1;
+  min-width: 0;
 
-  :deep(.el-card) {
-    background-color: var(--card-bg-color);
-    border-color: var(--border-color-lighter);
-    transition: all 0.3s ease;
-  }
+  .content-card {
+    background: var(--el-bg-color);
+    border-radius: 12px;
+    padding: 24px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+    border: 1px solid var(--el-border-color-lighter);
 
-  :deep(.el-card__header) {
-    color: var(--text-color-primary);
-    border-bottom-color: var(--border-color-lighter);
-    transition: all 0.3s ease;
+    .content-title {
+      margin: 0 0 16px;
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--el-text-color-primary);
+    }
   }
 }
 
 .markdown-body {
-  font-size: 14px;
+  font-size: 15px;
   line-height: 1.8;
-  color: var(--text-color-primary);
-  transition: color 0.3s ease;
+  color: var(--el-text-color-primary);
+  min-height: 400px;
 
-  // Markdown 内容样式适配主题
   :deep(h1), :deep(h2), :deep(h3), :deep(h4), :deep(h5), :deep(h6) {
-    color: var(--text-color-primary);
-    margin-top: 16px;
-    margin-bottom: 8px;
+    color: var(--el-text-color-primary);
+    margin-top: 24px;
+    margin-bottom: 12px;
+    font-weight: 600;
   }
 
+  :deep(h1) { font-size: 28px; }
+  :deep(h2) { font-size: 24px; }
+  :deep(h3) { font-size: 20px; }
+
   :deep(p), :deep(li), :deep(span), :deep(div) {
-    color: var(--text-color-primary);
-    margin: 8px 0;
+    color: var(--el-text-color-primary);
+    margin: 12px 0;
   }
 
   :deep(a) {
-    color: var(--primary-color);
+    color: #4f84ff;
     text-decoration: none;
     
     &:hover {
-      opacity: 0.8;
+      text-decoration: underline;
     }
   }
 
   :deep(code) {
-    background-color: var(--fill-color-light);
-    color: var(--text-color-primary);
-    border-color: var(--border-color-lighter);
+    background-color: var(--el-fill-color-light);
+    color: var(--el-text-color-primary);
+    border: 1px solid var(--el-border-color-lighter);
     padding: 2px 6px;
-    border-radius: 3px;
+    border-radius: 4px;
     font-family: 'Courier New', monospace;
+    font-size: 14px;
   }
 
   :deep(pre) {
-    background-color: var(--fill-color-light);
-    border-color: var(--border-color-lighter);
-    padding: 12px;
+    background-color: var(--el-fill-color-light);
+    border: 1px solid var(--el-border-color-lighter);
+    padding: 16px;
     border-radius: 8px;
     overflow-x: auto;
+    margin: 16px 0;
     
     code {
       background-color: transparent;
@@ -314,21 +354,24 @@ function handleDelete() {
   :deep(img) {
     max-width: 100%;
     border-radius: 8px;
-    margin: 8px 0;
+    margin: 16px 0;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   }
 
   :deep(ul), :deep(ol) {
-    color: var(--text-color-primary);
-    margin: 8px 0;
+    color: var(--el-text-color-primary);
+    margin: 12px 0;
     padding-left: 24px;
   }
 
   :deep(blockquote) {
-    border-left: 4px solid var(--primary-color);
+    border-left: 4px solid #4f84ff;
     padding-left: 16px;
     margin: 16px 0;
-    color: var(--text-color-secondary);
-    background-color: var(--fill-color-extra-light);
+    color: var(--el-text-color-regular);
+    background-color: var(--el-fill-color-lighter);
+    padding: 12px 16px;
+    border-radius: 4px;
   }
 
   :deep(table) {
@@ -337,28 +380,23 @@ function handleDelete() {
     margin: 16px 0;
     
     th, td {
-      border: 1px solid var(--border-color-lighter);
-      padding: 8px 12px;
-      color: var(--text-color-primary);
+      border: 1px solid var(--el-border-color-lighter);
+      padding: 12px;
+      color: var(--el-text-color-primary);
+      text-align: left;
     }
     
     th {
-      background-color: var(--fill-color-light);
+      background-color: var(--el-fill-color-light);
       font-weight: 600;
     }
   }
 }
 
-.actions {
-  margin-top: 16px;
-  text-align: center;
-}
-
 /* 响应式布局 */
 @media (max-width: 768px) {
   .detail-body {
     flex-direction: column;
-    padding: 0 16px 16px;
   }
 
   .info-panel {
@@ -366,11 +404,14 @@ function handleDelete() {
   }
 
   .detail-header {
-    padding: 12px 16px;
-  }
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
 
-  .detail-header h2 {
-    font-size: 16px;
+    .header-actions {
+      width: 100%;
+      justify-content: flex-end;
+    }
   }
 }
 </style>
diff --git a/pc/src/views/apps/knowledge/components/edit.vue b/pc/src/views/apps/knowledge/components/edit.vue
index 7e73594..47a241c 100644
--- a/pc/src/views/apps/knowledge/components/edit.vue
+++ b/pc/src/views/apps/knowledge/components/edit.vue
@@ -2,15 +2,18 @@
   <div class="knowledge-edit">
     <!-- 顶部标题栏 -->
     <div class="edit-header">
-      <el-button type="text" @click="goBack"
-        ><i class="fas fa-arrow-left"></i> 返回</el-button
-      >
-      <h2>{{ isEdit ? "编辑知识" : "新建知识" }}</h2>
+      <el-button type="primary" link @click="goBack">
+        <el-icon><ArrowLeft /></el-icon>
+        返回
+      </el-button>
+      <h2 class="edit-title">{{ isEdit ? "编辑知识" : "新建知识" }}</h2>
     </div>
 
     <!-- 基本信息 -->
     <div class="edit-meta">
-      <el-card shadow="never">
+      <div class="meta-card">
+        <h3 class="meta-title">基本信息</h3>
+        <el-divider />
         <el-form
           :model="formData"
           :rules="rules"
@@ -18,16 +21,16 @@
           label-width="80px"
           size="default"
         >
-        <el-row :gutter="20" style="margin-bottom: 20px;">
-          <el-col :span="24">
-            <el-form-item label="标题：" prop="title">
-              <el-input v-model="formData.title" placeholder="请输入标题" />
-            </el-form-item>
-          </el-col>
-        </el-row>
+          <el-row :gutter="20">
+            <el-col :span="24">
+              <el-form-item label="标题" prop="title">
+                <el-input v-model="formData.title" placeholder="请输入标题" />
+              </el-form-item>
+            </el-col>
+          </el-row>
           <el-row :gutter="20">
             <el-col :span="6">
-              <el-form-item label="分类：" prop="category">
+              <el-form-item label="分类" prop="category">
                 <el-select
                   v-model="formData.category"
                   placeholder="请选择分类"
@@ -44,7 +47,7 @@
               </el-form-item>
             </el-col>
             <el-col :span="6">
-              <el-form-item label="标签：" prop="tags">
+              <el-form-item label="标签" prop="tags">
                 <el-select
                   v-model="formData.tags"
                   multiple
@@ -63,12 +66,12 @@
               </el-form-item>
             </el-col>
             <el-col :span="6">
-              <el-form-item label="作者：" prop="author">
+              <el-form-item label="作者" prop="author">
                 <el-input v-model="formData.author" placeholder="请输入作者" />
               </el-form-item>
             </el-col>
             <el-col :span="6">
-              <el-form-item label="权限：" prop="share">
+              <el-form-item label="权限" prop="share">
                 <el-radio-group v-model="formData.share">
                   <el-radio-button :label="0">个人</el-radio-button>
                   <el-radio-button :label="1">共享</el-radio-button>
@@ -77,35 +80,35 @@
             </el-col>
           </el-row>
         </el-form>
-        <el-divider />
         <div class="meta-actions">
-          <el-button type="primary" @click="handleSubmit"
-            ><i class="fas fa-save"></i> 保存</el-button
-          >
+          <el-button type="primary" @click="handleSubmit">
+            <el-icon><Check /></el-icon>
+            保存
+          </el-button>
           <el-button @click="goBack">取消</el-button>
         </div>
-      </el-card>
+      </div>
     </div>
 
     <!-- 正文内容区 - 左右结构 -->
     <div class="edit-body">
       <!-- 左侧编辑器 -->
       <div class="editor-panel">
-        <el-card shadow="never">
-          <template #header>
-            <span>编辑正文</span>
-          </template>
-          <WangEditor v-model="formData.content" />
-        </el-card>
+        <div class="editor-card">
+          <h3 class="editor-title">编辑正文</h3>
+          <el-divider />
+          <div class="editor-content">
+            <WangEditor v-model="formData.content" />
+          </div>
+        </div>
       </div>
       <!-- 右侧预览 -->
       <div class="preview-panel">
-        <el-card shadow="never">
-          <template #header>
-            <span>预览效果</span>
-          </template>
+        <div class="preview-card">
+          <h3 class="preview-title">预览效果</h3>
+          <el-divider />
           <div class="markdown-body" v-html="compiledMarkdown"></div>
-        </el-card>
+        </div>
       </div>
     </div>
   </div>
@@ -115,18 +118,18 @@
 import { ref, reactive, computed, onMounted, watch } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { marked } from "marked";
+import { ArrowLeft, Check } from '@element-plus/icons-vue'
 // @ts-ignore
-import { getKnowledgeDetail, createKnowledge, updateKnowledge, getCategoryList, getTagList } from "@/api/knowledge"; // Changed to getKnowledgeDetail
+import { getKnowledgeDetail, createKnowledge, updateKnowledge, getCategoryList, getTagList } from "@/api/knowledge";
 import { ElMessage, ElMessageBox } from "element-plus";
 import type { FormInstance, FormRules } from "element-plus";
+import WangEditor from '@/views/components/WangEditor.vue';
 
-// 表单 DOM 引用
 const formRef = ref<FormInstance>();
 
 const router = useRouter();
 const route = useRoute();
 
-// 表单数据
 const formData = reactive<{
   title: string;
   category: string;
@@ -145,7 +148,6 @@ const formData = reactive<{
   share: 0, 
 });
 
-// 校验规则
 const rules = reactive<FormRules>({
   title: [{ required: true, message: "请输入标题", trigger: "blur" }],
   category: [{ required: true, message: "请选择分类", trigger: "change" }],
@@ -153,7 +155,6 @@ const rules = reactive<FormRules>({
   content: [{ required: true, message: "请输入正文", trigger: "blur" }],
 });
 
-// 分类与标签数据
 interface CategoryItem {
   categoryId: number;
   categoryName: string;
@@ -161,18 +162,14 @@ interface CategoryItem {
 const categoryList = ref<CategoryItem[]>([]);
 const tagList = ref<string[]>([]);
 
-// id: 编辑时有，新增为 'new'
 const id = computed(() => route.params.id || route.query.id);
 const isEdit = computed(() => {
   const currentId = id.value;
   return !!currentId && currentId !== "new" && currentId !== "";
 });
 
-// markdown 预览
 const compiledMarkdown = computed(() => marked(formData.content || ""));
 
-// TODO: 后续可以集成 wangEditor
-// 暂时使用 textarea，监听内容变化
 watch(
   () => formData.content,
   () => {
@@ -180,7 +177,6 @@ watch(
   }
 );
 
-// 获取登录用户信息
 const getLoginUser = () => {
   const userStr = localStorage.getItem("user");
   if (userStr) {
@@ -194,25 +190,20 @@ const getLoginUser = () => {
   return "";
 };
 
-// 获取详情
 const fetchDetail = async () => {
   try {
     const currentId = id.value as string;
     if (currentId && currentId !== "new") {
-      const res = await getKnowledgeDetail(parseInt(currentId as string)); // Changed to getKnowledgeDetail
-      // API 返回的数据结构: { code: 0, data: {...}, message: "success" }
+      const res = await getKnowledgeDetail(parseInt(currentId as string));
       const data = res.code === 0 && res.data ? res.data : res.data || res;
 
-      // 映射后端数据到前端表单
-      // categoryName 是从数据库联查得到的分类名称
       formData.title = data.title || "";
       formData.category = data.categoryName || "";
       formData.categoryId = data.categoryId || 0;
       formData.author = data.author || "";
       formData.content = data.content || "";
-      formData.share = data.share || 0; // Added share loading
+      formData.share = data.share || 0;
 
-      // 如果没有 categoryId，尝试根据 categoryName 查找
       if (!formData.categoryId && formData.category) {
         const foundCategory = categoryList.value.find(
           (item) => item.categoryName === formData.category
@@ -222,14 +213,12 @@ const fetchDetail = async () => {
         }
       }
 
-      // Tags 可能是 JSON 字符串，需要解析
       if (data.tags) {
         try {
           const parsed =
             typeof data.tags === "string" ? JSON.parse(data.tags) : data.tags;
           formData.tags = Array.isArray(parsed) ? parsed : [];
         } catch {
-          // 如果解析失败，尝试作为字符串数组处理
           formData.tags = Array.isArray(data.tags) ? data.tags : [];
         }
       } else {
@@ -241,7 +230,6 @@ const fetchDetail = async () => {
   }
 };
 
-// 获取分类和标签
 const loadCategoryAndTag = async () => {
   try {
     const [catRes, tagRes] = await Promise.all([
@@ -249,14 +237,12 @@ const loadCategoryAndTag = async () => {
       getTagList(),
     ]);
 
-    // API 返回的数据结构: { code: 0, data: [...], message: "success" }
     const categories =
       catRes.code === 0 && catRes.data ? catRes.data : catRes.data || [];
     const tags =
       tagRes.code === 0 && tagRes.data ? tagRes.data : tagRes.data || [];
 
     categoryList.value = Array.isArray(categories) ? categories : [];
-    // 标签数据可能是 { tagId, tagName } 格式，需要提取 tagName
     tagList.value = Array.isArray(tags)
       ? tags.map((tag) => tag.tagName || tag)
       : [];
@@ -267,7 +253,6 @@ const loadCategoryAndTag = async () => {
   }
 };
 
-// 处理分类变化
 const handleCategoryChange = (categoryName: string) => {
   const selectedCategory = categoryList.value.find(
     (item) => item.categoryName === categoryName
@@ -277,12 +262,10 @@ const handleCategoryChange = (categoryName: string) => {
   }
 };
 
-// 返回
 const goBack = () => {
   router.push("/apps/knowledge");
 };
 
-// 保存
 const handleSubmit = () => {
   if (!formRef.value) return;
   formRef.value.validate(async (valid: boolean) => {
@@ -290,14 +273,11 @@ const handleSubmit = () => {
 
     const currentId = id.value as string;
 
-    // 检查 categoryId 是否已设置
     if (!formData.categoryId) {
       ElMessage.warning("请选择分类");
       return;
     }
 
-    // 准备提交的数据（符合后端格式，字段名对应后端 JSON tag）
-    // 确保数据类型正确：categoryId 必须是数字
     const submitData: any = {
       title: formData.title || "",
       categoryId: Number(formData.categoryId) || 0,
@@ -307,21 +287,18 @@ const handleSubmit = () => {
         Array.isArray(formData.tags) && formData.tags.length > 0
           ? JSON.stringify(formData.tags)
           : "[]",
-      status: 1, // 默认已发布
-      share: formData.share, // Added share in params
+      status: 1,
+      share: formData.share,
     };
 
     if (isEdit.value && currentId !== "new") {
-      // 编辑：需要添加 id（后端 JSON tag 是 "id"）
       const knowledgeId = parseInt(currentId as string);
       if (isNaN(knowledgeId) || knowledgeId <= 0) {
         ElMessage.error("知识ID无效");
         return;
       }
-      // updateKnowledge 函数会将 id 合并到 data 中，所以这里不需要手动添加
       try {
         const res = await updateKnowledge(knowledgeId, submitData);
-        // API 返回的数据结构: { code: 0, message: "更新成功", data: null }
         if (res.code === 0) {
           ElMessage.success("保存成功");
           goBack();
@@ -335,10 +312,8 @@ const handleSubmit = () => {
         ElMessage.error(errorMessage);
       }
     } else {
-      // 新建：不包含 id 字段
       try {
         const res = await createKnowledge(submitData);
-        // API 返回的数据结构: { code: 0, message: "创建成功", data: { id: ... } }
         if (res.code === 0) {
           ElMessage.success("创建成功");
           goBack();
@@ -355,41 +330,17 @@ const handleSubmit = () => {
   });
 };
 
-//删除功能
-const handleDelete = async () => {
-  try {
-    // Assuming deleteKnowledge is imported or defined elsewhere
-    // await deleteKnowledge(id.value as string); 
-    ElMessage.success("删除成功");
-    goBack();
-  } catch (e: any) {
-    console.error("删除失败:", e);
-  }
-  ElMessageBox.confirm("确认删除该知识？", "提示", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
-  }).then(async () => {
-    await handleDelete();
-  });
-};
-
-// 初始化
 onMounted(async () => {
-  // 获取作者信息
   const author = getLoginUser();
   if (author && !isEdit.value) {
     formData.author = author;
   }
 
-  // 先加载分类和标签
   await loadCategoryAndTag();
 
-  // 如果是编辑模式，获取详情
   if (isEdit.value) {
     await fetchDetail();
   } else {
-    // 如果是新建模式，设置默认分类
     if (categoryList.value.length > 0 && !formData.category) {
       formData.category = categoryList.value[0].categoryName;
       formData.categoryId = categoryList.value[0].categoryId;
@@ -397,7 +348,6 @@ onMounted(async () => {
   }
 });
 
-// 暴露到模板
 defineExpose({
   formRef,
 });
@@ -405,165 +355,123 @@ defineExpose({
 
 <style scoped lang="less">
 .knowledge-edit {
-  background-color: var(--bg-color-page);
-  min-height: 100%;
   padding: 24px;
-  transition: background-color 0.3s ease;
+  min-height: 100%;
+  background-color: var(--el-bg-color-page);
 }
 
 .edit-header {
+  background: var(--el-bg-color);
+  border-radius: 12px;
+  padding: 20px 24px;
+  margin-bottom: 20px;
   display: flex;
   align-items: center;
-  margin-bottom: 20px;
-  background-color: var(--card-bg-color);
-  padding: 16px 24px;
-  border-radius: 12px;
-  box-shadow: var(--box-shadow);
-  border: 1px solid var(--border-color-lighter);
-  transition: all 0.3s ease;
+  gap: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid var(--el-border-color-lighter);
+
+  .edit-title {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--el-text-color-primary);
+  }
 }
 
-.edit-header h2 {
-  margin: 0 0 0 12px;
-  font-size: 20px;
-  font-weight: 600;
-  color: var(--text-color-primary);
-  transition: color 0.3s ease;
-}
-
-/* 基本信息区 */
 .edit-meta {
   margin-bottom: 20px;
 
-  :deep(.el-card) {
-    background-color: var(--card-bg-color);
-    border-color: var(--border-color-lighter);
-    transition: all 0.3s ease;
-  }
+  .meta-card {
+    background: var(--el-bg-color);
+    border-radius: 12px;
+    padding: 24px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+    border: 1px solid var(--el-border-color-lighter);
 
-  :deep(.el-card__header) {
-    color: var(--text-color-primary);
-    border-bottom-color: var(--border-color-lighter);
-    transition: all 0.3s ease;
-  }
+    .meta-title {
+      margin: 0 0 16px;
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--el-text-color-primary);
+    }
 
-  :deep(.el-divider) {
-    border-color: var(--border-color-lighter);
-    transition: border-color 0.3s ease;
+    .meta-actions {
+      margin-top: 24px;
+      text-align: right;
+    }
   }
 }
 
-.meta-actions {
-  margin-top: 16px;
-  text-align: right;
-}
-
-/* 正文编辑区 - 左右结构 */
 .edit-body {
   display: flex;
   gap: 20px;
   min-height: 600px;
 }
 
-.editor-panel {
-  flex: 1;
-  min-width: 0;
-
-  :deep(.el-card) {
-    background-color: var(--card-bg-color);
-    border-color: var(--border-color-lighter);
-    transition: all 0.3s ease;
-    height: 100%;
-  }
-
-  :deep(.el-card__header) {
-    color: var(--text-color-primary);
-    border-bottom-color: var(--border-color-lighter);
-    transition: all 0.3s ease;
-  }
-}
-
+.editor-panel,
 .preview-panel {
   flex: 1;
   min-width: 0;
+}
 
-  :deep(.el-card) {
-    background-color: var(--card-bg-color);
-    border-color: var(--border-color-lighter);
-    transition: all 0.3s ease;
-    height: 100%;
+.editor-card,
+.preview-card {
+  background: var(--el-bg-color);
+  border-radius: 12px;
+  padding: 24px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid var(--el-border-color-lighter);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .editor-title,
+  .preview-title {
+    margin: 0 0 16px;
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--el-text-color-primary);
   }
 
-  :deep(.el-card__header) {
-    color: var(--text-color-primary);
-    border-bottom-color: var(--border-color-lighter);
-    transition: all 0.3s ease;
+  .editor-content {
+    flex: 1;
+    min-height: 400px;
   }
 }
 
-.markdown-body {
-  font-size: 14px;
-  line-height: 1.8;
-  color: var(--text-color-primary);
-  min-height: 400px;
-  padding: 14px 16px;
-  transition: color 0.3s ease;
-
-  :deep(h1),
-  :deep(h2),
-  :deep(h3),
-  :deep(h4),
-  :deep(h5),
-  :deep(h6) {
-    color: var(--text-color-primary);
-    margin-top: 16px;
-    margin-bottom: 8px;
-  }
-
-  :deep(p),
-  :deep(li),
-  :deep(span),
-  :deep(div) {
-    color: var(--text-color-primary);
-    margin: 8px 0;
-  }
-
-  :deep(a) {
-    color: var(--primary-color);
-    text-decoration: none;
-
-    &:hover {
-      opacity: 0.8;
-    }
-  }
-
-  :deep(code) {
-    background-color: var(--fill-color-light);
-    color: var(--text-color-primary);
-    border-color: var(--border-color-lighter);
-    padding: 2px 6px;
-    border-radius: 3px;
-    font-family: "Courier New", monospace;
-  }
-
-  :deep(pre) {
-    background-color: var(--fill-color-light);
-    border-color: var(--border-color-lighter);
-    padding: 12px;
+.preview-card {
+  .markdown-body {
+    flex: 1;
+    overflow-y: auto;
+    font-size: 14px;
+    line-height: 1.8;
+    color: var(--el-text-color-primary);
+    padding: 16px;
+    background: var(--el-fill-color-lighter);
     border-radius: 8px;
-    overflow-x: auto;
 
-    code {
-      background-color: transparent;
-      border: none;
-      padding: 0;
+    :deep(h1), :deep(h2), :deep(h3) {
+      margin-top: 16px;
+      margin-bottom: 8px;
     }
-  }
 
-  :deep(img) {
-    max-width: 100%;
-    border-radius: 8px;
-    margin: 8px 0;
+    :deep(p), :deep(li) {
+      margin: 8px 0;
+    }
+
+    :deep(code) {
+      background-color: var(--el-fill-color-light);
+      padding: 2px 6px;
+      border-radius: 3px;
+    }
+
+    :deep(pre) {
+      background-color: var(--el-fill-color-light);
+      padding: 12px;
+      border-radius: 8px;
+      overflow-x: auto;
+    }
   }
 }
 
@@ -578,33 +486,5 @@ defineExpose({
   .preview-panel {
     width: 100%;
   }
-
-  .edit-header {
-    padding: 12px 16px;
-  }
-
-  .edit-header h2 {
-    font-size: 16px;
-  }
-}
-:deep(.el-form-item--default) {
-  margin-bottom: 0px;
-}
-
-:deep(.el-input__wrapper),
-:deep(.el-textarea__inner) {
-  background-color: var(--fill-color-blank) !important;
-  border-color: var(--border-color) !important;
-  color: var(--text-color-primary) !important;
-}
-
-:deep(.el-textarea__inner) {
-  &::placeholder {
-    color: var(--text-color-placeholder) !important;
-  }
-
-  &:focus {
-    border-color: var(--primary-color) !important;
-  }
 }
 </style>
diff --git a/pc/src/views/apps/knowledge/index.vue b/pc/src/views/apps/knowledge/index.vue
index 94c3363..785bef2 100644
--- a/pc/src/views/apps/knowledge/index.vue
+++ b/pc/src/views/apps/knowledge/index.vue
@@ -1,32 +1,31 @@
 <template>
   <div class="knowledge-home">
-    <!-- 顶部横幅 - 按示例重设计 -->
-    <div class="hero new-style">
-      <div class="hero-content">
-        <h1>知识库</h1>
-        <p>全国单一窗口同步更新，实时最新</p>
+    <!-- 顶部搜索区域 -->
+    <div class="search-section">
+      <div class="search-content">
+        <h1 class="page-title">知识库</h1>
+        <p class="page-subtitle">全国单一窗口同步更新，实时最新</p>
 
-        <!-- 搜索区域 -->
-        <div class="search-container">
+        <!-- 搜索框 -->
+        <div class="search-wrapper">
           <el-input
             v-model="keyword"
             placeholder="请输入关键字、产品编码进行查询"
-            size="default"
-            class="search-input"
+            size="large"
+            clearable
             @keyup.enter="handleSearch"
-          />
-          <el-button
-            type="primary"
-            size="default"
-            class="search-button"
-            @click="handleSearch"
           >
+            <template #prefix>
+              <el-icon><Search /></el-icon>
+            </template>
+          </el-input>
+          <el-button type="primary" size="large" @click="handleSearch">
             查询
           </el-button>
         </div>
 
         <!-- 热门搜索 -->
-        <div class="hot-search">
+        <div class="hot-tags">
           <span class="hot-label">热门搜索：</span>
           <el-tag
             v-for="tag in hotTags"
@@ -42,222 +41,232 @@
       </div>
     </div>
 
-    <!-- 统计卡片区域 -->
-    <el-row :gutter="20" class="statistics-section">
-      <el-col
-        :xs="12"
-        :sm="6"
+    <!-- 统计卡片 -->
+    <div class="stats-grid">
+      <div
         v-for="(stat, index) in statsList"
         :key="index"
-        class="stat-col"
+        class="stat-card"
       >
-        <div class="stat-card">
-          <div class="stat-icon">
-            <i :class="stat.icon"></i>
-          </div>
-          <div class="stat-info">
-            <div class="stat-label">{{ stat.label }}</div>
-            <div class="stat-value">{{ stat.value }}</div>
-          </div>
+        <div class="stat-icon-wrapper">
+          <i :class="stat.icon"></i>
         </div>
-      </el-col>
-    </el-row>
+        <div class="stat-content">
+          <div class="stat-value">{{ stat.value }}</div>
+          <div class="stat-label">{{ stat.label }}</div>
+        </div>
+      </div>
+    </div>
 
-    <!-- 知识库列表区域 -->
-    <div class="knowledge-repos">
-      <div class="repos-header">
-        <h2>知识库列表</h2>
-        <div>
-          <el-button type="primary" @click="handleCreate" class="create-btn">
-            <i class="fa-solid fa-plus"></i>
+    <!-- 知识库列表 -->
+    <div class="repos-section">
+      <div class="section-header">
+        <h2 class="section-title">知识库列表</h2>
+        <div class="action-buttons">
+          <el-button type="primary" @click="handleCreate">
+            <el-icon><Plus /></el-icon>
             新建知识库
           </el-button>
-          <el-button type="primary" @click="handleCategory" class="create-btn">
-            <i class="fas fa-folder-open"></i>
+          <el-button @click="handleCategory">
+            <el-icon><Folder /></el-icon>
             分类管理
           </el-button>
-          <el-button type="primary" @click="handleTags" class="create-btn">
-            <i class="fas fa-tags"></i>
+          <el-button @click="handleTags">
+            <el-icon><PriceTag /></el-icon>
             标签管理
           </el-button>
         </div>
       </div>
 
-      <!-- Tabs for personal and shared -->
-      <el-tabs v-model="activeTab" type="card" class="knowledge-tabs">
+      <!-- 标签页 -->
+      <el-tabs v-model="activeTab" class="repos-tabs">
         <el-tab-pane label="个人知识库" name="personal">
-          <div class="repos-grid">
-            <div class="repo-card" v-for="repo in personalList" :key="repo.id">
-              <!-- 卡片头部 -->
+          <div class="repos-grid" v-if="personalList.length > 0">
+            <div
+              v-for="repo in personalList"
+              :key="repo.id"
+              class="repo-card"
+            >
               <div class="repo-header">
                 <div class="repo-icon">
                   <i class="fa-solid fa-book"></i>
                 </div>
-                <div class="repo-title-container">
-                  <h3 class="repo-name">{{ repo.title }}</h3>
+                <div class="repo-info">
+                  <h3 class="repo-title">{{ repo.title }}</h3>
                   <div class="repo-meta">
-                    <el-tag size="small" class="category-tag">
+                    <el-tag size="small" type="info">
                       {{ repo.categoryName || "未分类" }}
                     </el-tag>
-                    <span class="repo-owner">
-                      <i class="fa-solid fa-user"></i>
+                    <span class="repo-author">
+                      <el-icon><User /></el-icon>
                       {{ repo.author }}
                     </span>
                   </div>
                 </div>
               </div>
 
-              <!-- 卡片内容 -->
-              <div class="repo-content">
-                <div class="repo-tags" v-if="repo.tags">
+              <div class="repo-body">
+                <div class="repo-tags" v-if="repo.tags && parseTags(repo.tags).length > 0">
                   <el-tag
                     v-for="tag in parseTags(repo.tags)"
                     :key="tag"
                     size="small"
-                    class="tag-item"
+                    effect="plain"
                   >
                     {{ tag }}
                   </el-tag>
                 </div>
-
                 <div class="repo-stats">
                   <div class="stat-item">
-                    <i class="fa-solid fa-eye"></i>
-                    <span>{{ repo.viewCount || 0 }} 浏览</span>
+                    <el-icon><View /></el-icon>
+                    <span>{{ repo.viewCount || 0 }}</span>
                   </div>
                   <div class="stat-item">
-                    <i class="fa-solid fa-heart"></i>
-                    <span>{{ repo.likeCount || 0 }} 点赞</span>
+                    <el-icon><Star /></el-icon>
+                    <span>{{ repo.likeCount || 0 }}</span>
                   </div>
                   <div class="stat-item">
-                    <i class="fa-solid fa-clock"></i>
+                    <el-icon><Clock /></el-icon>
                     <span>{{ formatDate(repo.createTime) }}</span>
                   </div>
                 </div>
               </div>
 
-              <!-- 卡片底部操作区 -->
-              <div class="repo-actions">
-                <button class="action-btn view-btn" @click.stop="handleView(repo)">
-                  <i class="el-icon-view"></i> 查看
-                </button>
-                <button class="action-btn edit-btn" @click.stop="handleEdit(repo)">
-                  <i class="el-icon-edit"></i> 编辑
-                </button>
-                <button
-                  class="action-btn delete-btn"
+              <div class="repo-footer">
+                <el-button
+                  type="primary"
+                  link
+                  size="small"
+                  @click.stop="handleView(repo)"
+                >
+                  查看
+                </el-button>
+                <el-button
+                  type="success"
+                  link
+                  size="small"
+                  @click.stop="handleEdit(repo)"
+                >
+                  编辑
+                </el-button>
+                <el-button
+                  type="danger"
+                  link
+                  size="small"
                   @click.stop="handleDelete(repo)"
                 >
-                  <i class="el-icon-delete"></i> 删除
-                </button>
+                  删除
+                </el-button>
               </div>
             </div>
-
-            <!-- 空状态 for personal -->
-            <div class="empty-state" v-if="personalList.length === 0">
-              <div class="empty-icon">
-                <i class="fa-solid fa-folder-open"></i>
-              </div>
-              <h3>暂无个人知识库</h3>
-              <p>点击下方按钮创建您的第一个知识库</p>
-              <el-button type="primary" @click="handleCreate">
-                <i class="fa-solid fa-plus"></i>
-                新建知识库
-              </el-button>
-            </div>
           </div>
+
+          <!-- 空状态 -->
+          <el-empty v-else description="暂无个人知识库">
+            <el-button type="primary" @click="handleCreate">
+              <el-icon><Plus /></el-icon>
+              新建知识库
+            </el-button>
+          </el-empty>
         </el-tab-pane>
 
         <el-tab-pane label="共享知识库" name="shared">
-          <div class="repos-grid">
-            <div class="repo-card" v-for="repo in sharedList" :key="repo.id">
-              <!-- 卡片头部 -->
+          <div class="repos-grid" v-if="sharedList.length > 0">
+            <div
+              v-for="repo in sharedList"
+              :key="repo.id"
+              class="repo-card"
+            >
               <div class="repo-header">
                 <div class="repo-icon">
                   <i class="fa-solid fa-book"></i>
                 </div>
-                <div class="repo-title-container">
-                  <h3 class="repo-name">{{ repo.title }}</h3>
+                <div class="repo-info">
+                  <h3 class="repo-title">{{ repo.title }}</h3>
                   <div class="repo-meta">
-                    <el-tag size="small" class="category-tag">
+                    <el-tag size="small" type="info">
                       {{ repo.categoryName || "未分类" }}
                     </el-tag>
-                    <span class="repo-owner">
-                      <i class="fa-solid fa-user"></i>
+                    <span class="repo-author">
+                      <el-icon><User /></el-icon>
                       {{ repo.author }}
                     </span>
                   </div>
                 </div>
               </div>
 
-              <!-- 卡片内容 -->
-              <div class="repo-content">
-                <div class="repo-tags" v-if="repo.tags">
+              <div class="repo-body">
+                <div class="repo-tags" v-if="repo.tags && parseTags(repo.tags).length > 0">
                   <el-tag
                     v-for="tag in parseTags(repo.tags)"
                     :key="tag"
                     size="small"
-                    class="tag-item"
+                    effect="plain"
                   >
                     {{ tag }}
                   </el-tag>
                 </div>
-
                 <div class="repo-stats">
                   <div class="stat-item">
-                    <i class="fa-solid fa-eye"></i>
-                    <span>{{ repo.viewCount || 0 }} 浏览</span>
+                    <el-icon><View /></el-icon>
+                    <span>{{ repo.viewCount || 0 }}</span>
                   </div>
                   <div class="stat-item">
-                    <i class="fa-solid fa-heart"></i>
-                    <span>{{ repo.likeCount || 0 }} 点赞</span>
+                    <el-icon><Star /></el-icon>
+                    <span>{{ repo.likeCount || 0 }}</span>
                   </div>
                   <div class="stat-item">
-                    <i class="fa-solid fa-clock"></i>
+                    <el-icon><Clock /></el-icon>
                     <span>{{ formatDate(repo.createTime) }}</span>
                   </div>
                 </div>
               </div>
 
-              <!-- 卡片底部操作区 -->
-              <div class="repo-actions">
-                <button class="action-btn view-btn" @click.stop="handleView(repo)">
-                  <i class="el-icon-view"></i> 查看
-                </button>
-                <button class="action-btn edit-btn" @click.stop="handleEdit(repo)">
-                  <i class="el-icon-edit"></i> 编辑
-                </button>
-                <button
-                  class="action-btn delete-btn"
+              <div class="repo-footer">
+                <el-button
+                  type="primary"
+                  link
+                  size="small"
+                  @click.stop="handleView(repo)"
+                >
+                  查看
+                </el-button>
+                <el-button
+                  type="success"
+                  link
+                  size="small"
+                  @click.stop="handleEdit(repo)"
+                >
+                  编辑
+                </el-button>
+                <el-button
+                  type="danger"
+                  link
+                  size="small"
                   @click.stop="handleDelete(repo)"
                 >
-                  <i class="el-icon-delete"></i> 删除
-                </button>
+                  删除
+                </el-button>
               </div>
             </div>
-
-            <!-- 空状态 for shared -->
-            <div class="empty-state" v-if="sharedList.length === 0">
-              <div class="empty-icon">
-                <i class="fa-solid fa-folder-open"></i>
-              </div>
-              <h3>暂无共享知识库</h3>
-              <p>暂无共享内容</p>
-            </div>
           </div>
+
+          <!-- 空状态 -->
+          <el-empty v-else description="暂无共享知识库" />
         </el-tab-pane>
       </el-tabs>
 
       <!-- 分页 -->
-      <el-pagination
-        background
-        layout="prev, pager, next"
-        :total="activeTab === 'personal' ? personalList.length : sharedList.length"
-        :page-size="pageSize"
-        :current-page="currentPage"
-        @current-change="handlePageChange"
-        class="repo-pagination"
-      />
+      <div class="pagination-wrapper" v-if="(activeTab === 'personal' ? personalList.length : sharedList.length) > 0">
+        <el-pagination
+          background
+          layout="prev, pager, next, total"
+          :total="activeTab === 'personal' ? personalList.length : sharedList.length"
+          :page-size="pageSize"
+          :current-page="currentPage"
+          @current-change="handlePageChange"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -266,6 +275,7 @@
 import { ref, reactive, computed, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import { ElMessage, ElMessageBox } from "element-plus";
+import { Search, Plus, Folder, PriceTag, User, View, Star, Clock } from "@element-plus/icons-vue";
 
 // @ts-ignore
 import { getKnowledgeList, deleteKnowledge } from "@/api/knowledge";
@@ -481,661 +491,346 @@ onMounted(() => {
 </script>
 
 <style lang="less" scoped>
-// 顶部横幅样式 - 简约大气版本
-.hero.new-style {
-  background: var(--card-bg-color);
-  padding: 48px 24px;
-  margin-bottom: 32px;
-  border-radius: 12px;
-  border: 1px solid var(--border-color-lighter);
-  box-shadow: var(--box-shadow);
-  transition: all 0.3s ease;
+.knowledge-home {
+  padding: 24px;
+  min-height: 100%;
+  background-color: var(--el-bg-color-page);
+}
 
-  .hero-content {
-    max-width: 1200px;
+// 搜索区域
+.search-section {
+  background: var(--el-bg-color);
+  border-radius: 12px;
+  padding: 40px;
+  margin-bottom: 24px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid var(--el-border-color-lighter);
+
+  .search-content {
+    max-width: 800px;
     margin: 0 auto;
     text-align: center;
   }
 
-  h1 {
-    font-size: 36px;
+  .page-title {
+    font-size: 32px;
     font-weight: 600;
-    color: var(--text-color-primary);
+    color: var(--el-text-color-primary);
     margin: 0 0 8px;
-    letter-spacing: -0.3px;
-    transition: color 0.3s ease;
   }
 
-  p {
-    font-size: 15px;
-    color: var(--text-color-secondary);
+  .page-subtitle {
+    font-size: 14px;
+    color: var(--el-text-color-regular);
     margin: 0 0 32px;
-    font-weight: 400;
-    transition: color 0.3s ease;
   }
 
-  .search-container {
+  .search-wrapper {
     display: flex;
-    align-items: stretch;
-    max-width: 800px;
-    margin: 0 auto 24px;
-    background: var(--fill-color-blank);
-    border-radius: 8px;
-    border: 1px solid var(--border-color);
-    box-shadow: none;
-    transition: all 0.3s ease;
-    overflow: hidden;
+    gap: 12px;
+    margin-bottom: 24px;
 
-    &:hover {
-      border-color: var(--primary-color);
+    .el-input {
+      flex: 1;
     }
 
-    &:focus-within {
-      border-color: var(--primary-color);
-      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
+    .el-button {
+      min-width: 100px;
     }
   }
 
-  .search-select {
-    border-right: 1px solid var(--border-color-lighter);
-    border-radius: 0;
-
-    :deep(.el-input__wrapper) {
-      border: none;
-      box-shadow: none;
-    }
-
-    :deep(.el-input__inner) {
-      padding: 12px 16px;
-      font-weight: 400;
-      background-color: transparent;
-      color: var(--text-color-primary);
-    }
-  }
-
-  .search-input {
-    flex: 1;
-
-    :deep(.el-input__wrapper) {
-      border: none !important;
-    }
-
-    :deep(.el-input__wrapper) {
-      border: none;
-      box-shadow: none;
-    }
-
-    :deep(.el-input__inner) {
-      border: none;
-      padding: 12px 16px;
-      font-size: 15px;
-    }
-  }
-
-  .search-button {
-    background-color: var(--primary-color);
-    border: none;
-    border-left: 1px solid;
-    padding: 0 28px;
-    font-size: 15px;
-    font-weight: 500;
-    color: #fff;
-    transition: all 0.3s ease;
-    border-radius: 0;
-
-    &:hover {
-      background-color: var(--primary-color);
-      opacity: 0.9;
-    }
-  }
-
-  .hot-search {
+  .hot-tags {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
-    gap: 10px;
-  }
+    gap: 8px;
 
-  .hot-label {
-    color: var(--text-color-secondary);
-    font-size: 13px;
-    font-weight: 400;
-    transition: color 0.3s ease;
-  }
+    .hot-label {
+      font-size: 13px;
+      color: var(--el-text-color-regular);
+      margin-right: 4px;
+    }
 
-  .hot-tag {
-    background-color: var(--fill-color-light);
-    color: var(--text-color-primary);
-    border: 1px solid var(--border-color-lighter);
-    cursor: pointer;
-    transition: all 0.2s ease;
-    padding: 12px;
-    border-radius: 4px;
-    font-size: 13px;
+    .hot-tag {
+      cursor: pointer;
+      transition: all 0.2s;
 
-    &:hover {
-      background-color: var(--fill-color);
-      border-color: var(--primary-color);
-      color: var(--primary-color);
+      &:hover {
+        background-color: var(--el-color-primary-light-9);
+        border-color: var(--el-color-primary);
+        color: var(--el-color-primary);
+      }
     }
   }
 }
 
-// 统计卡片样式
-.statistics-section {
-  margin: 30px 0;
-
-  .stat-col {
-    margin-bottom: 20px;
-  }
+// 统计卡片
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 20px;
+  margin-bottom: 24px;
 
   .stat-card {
-    background: var(--card-bg-color);
+    background: var(--el-bg-color);
     border-radius: 12px;
     padding: 24px;
-    box-shadow: var(--box-shadow);
     display: flex;
     align-items: center;
-    transition: all 0.3s ease;
-    border: 1px solid var(--border-color-lighter);
-    height: 100%;
+    gap: 16px;
+    border: 1px solid var(--el-border-color-lighter);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+    transition: all 0.3s;
 
     &:hover {
-      transform: translateY(-5px);
-      box-shadow: var(--box-shadow-dark);
-      border-color: var(--primary-color);
+      transform: translateY(-4px);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+      border-color: var(--el-color-primary-light-7);
     }
 
-    .stat-icon {
+    .stat-icon-wrapper {
       width: 56px;
       height: 56px;
       border-radius: 12px;
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      background: linear-gradient(135deg, #062da3 0%, #4f84ff 100%);
       display: flex;
       align-items: center;
       justify-content: center;
-      margin-right: 16px;
       flex-shrink: 0;
-      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
 
       i {
         font-size: 24px;
-        color: white;
+        color: #fff;
       }
     }
 
-    .stat-info {
-      flex-grow: 1;
-
-      .stat-label {
-        font-size: 14px;
-        color: var(--text-color-secondary);
-        margin-bottom: 8px;
-        font-weight: 500;
-        transition: color 0.3s ease;
-      }
+    .stat-content {
+      flex: 1;
 
       .stat-value {
         font-size: 28px;
         font-weight: 700;
-        color: var(--text-color-primary);
+        color: var(--el-text-color-primary);
         line-height: 1;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        background-clip: text;
-        transition: color 0.3s ease;
+        margin-bottom: 8px;
+      }
+
+      .stat-label {
+        font-size: 14px;
+        color: var(--el-text-color-regular);
       }
     }
   }
 }
 
-// 知识库列表样式
-.knowledge-repos {
-  margin-bottom: 40px;
+// 知识库列表区域
+.repos-section {
+  background: var(--el-bg-color);
+  border-radius: 12px;
+  padding: 24px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid var(--el-border-color-lighter);
 
-  .repos-header {
+  .section-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 24px;
 
-    h2 {
-      font-size: 24px;
-      font-weight: 700;
-      color: var(--text-color-primary);
+    .section-title {
+      font-size: 20px;
+      font-weight: 600;
+      color: var(--el-text-color-primary);
       margin: 0;
-      transition: color 0.3s ease;
     }
 
-    .create-btn {
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      border: none;
-      padding: 12px 24px;
-      border-radius: 8px;
-      font-weight: 500;
-      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
-      transition: all 0.3s ease;
+    .action-buttons {
+      display: flex;
+      gap: 12px;
+    }
+  }
 
-      &:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
-      }
-
-      i {
-        margin-right: 6px;
-      }
+  .repos-tabs {
+    :deep(.el-tabs__header) {
+      margin-bottom: 20px;
     }
   }
 
   .repos-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-    gap: 24px;
-    margin-bottom: 30px;
+    gap: 20px;
   }
 
   .repo-card {
-    background: var(--card-bg-color);
+    background: var(--el-bg-color);
     border-radius: 12px;
+    border: 1px solid var(--el-border-color-lighter);
     overflow: hidden;
-    box-shadow: var(--box-shadow);
-    transition: all 0.3s ease;
-    border: 1px solid var(--border-color-lighter);
+    transition: all 0.3s;
     display: flex;
     flex-direction: column;
-    height: 100%;
 
     &:hover {
-      transform: translateY(-8px);
-      box-shadow: var(--box-shadow-dark);
-      border-color: var(--primary-color);
+      transform: translateY(-4px);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+      border-color: var(--el-color-primary-light-7);
     }
 
     .repo-header {
-      padding: 24px;
-      border-bottom: 1px solid var(--border-color-lighter);
+      padding: 20px;
+      border-bottom: 1px solid var(--el-border-color-lighter);
       display: flex;
-      flex-shrink: 0;
-      transition: border-color 0.3s ease;
+      gap: 12px;
 
       .repo-icon {
         width: 48px;
         height: 48px;
         border-radius: 10px;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        background: linear-gradient(135deg, #062da3 0%, #4f84ff 100%);
         display: flex;
         align-items: center;
         justify-content: center;
-        margin-right: 16px;
         flex-shrink: 0;
-        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
 
         i {
           font-size: 20px;
-          color: white;
+          color: #fff;
         }
       }
 
-      .repo-title-container {
-        flex-grow: 1;
+      .repo-info {
+        flex: 1;
         min-width: 0;
 
-        .repo-name {
-          font-size: 18px;
+        .repo-title {
+          font-size: 16px;
           font-weight: 600;
-          color: var(--text-color-primary);
-          margin: 0 0 10px 0;
-          white-space: nowrap;
+          color: var(--el-text-color-primary);
+          margin: 0 0 8px;
           overflow: hidden;
           text-overflow: ellipsis;
-          line-height: 1.4;
-          transition: color 0.3s ease;
+          white-space: nowrap;
         }
 
         .repo-meta {
           display: flex;
           align-items: center;
-          gap: 10px;
+          gap: 8px;
           flex-wrap: wrap;
 
-          .category-tag {
-            background: var(--fill-color-light);
-            color: var(--primary-color);
-            border-color: var(--border-color);
-            font-weight: 500;
-            transition: background-color 0.3s ease, color 0.3s ease,
-              border-color 0.3s ease;
-          }
-
-          .repo-owner {
-            font-size: 13px;
-            color: var(--text-color-secondary);
+          .repo-author {
+            font-size: 12px;
+            color: var(--el-text-color-regular);
             display: flex;
             align-items: center;
-            gap: 6px;
-            transition: color 0.3s ease;
-
-            i {
-              font-size: 12px;
-            }
+            gap: 4px;
           }
         }
       }
     }
 
-    .repo-content {
-      padding: 20px 24px;
-      flex-grow: 1;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
+    .repo-body {
+      padding: 16px 20px;
+      flex: 1;
 
       .repo-tags {
         display: flex;
         flex-wrap: wrap;
-        gap: 8px;
+        gap: 6px;
         margin-bottom: 16px;
-
-        .tag-item {
-          background: var(--fill-color-lighter);
-          color: var(--text-color-regular);
-          border-color: var(--border-color-lighter);
-          font-size: 12px;
-          padding: 4px 12px;
-          transition: background-color 0.3s ease, color 0.3s ease,
-            border-color 0.3s ease;
-        }
       }
 
       .repo-stats {
         display: flex;
         align-items: center;
-        justify-content: space-between;
-        font-size: 13px;
-        color: var(--text-color-placeholder);
-        padding-top: 16px;
-        border-top: 1px solid var(--border-color-lighter);
-        transition: color 0.3s ease, border-color 0.3s ease;
+        gap: 16px;
+        font-size: 12px;
+        color: var(--el-text-color-regular);
+        padding-top: 12px;
+        border-top: 1px solid var(--el-border-color-lighter);
 
         .stat-item {
           display: flex;
           align-items: center;
-          gap: 6px;
-
-          i {
-            font-size: 14px;
-          }
+          gap: 4px;
         }
       }
     }
 
-    .repo-actions {
-      padding: 16px 24px;
-      border-top: 1px solid var(--border-color-lighter);
+    .repo-footer {
+      padding: 12px 20px;
+      border-top: 1px solid var(--el-border-color-lighter);
       display: flex;
-      justify-content: space-between;
+      justify-content: flex-end;
       gap: 8px;
-      background: var(--fill-color-lighter);
-      flex-shrink: 0;
-      transition: background-color 0.3s ease, border-color 0.3s ease;
-
-      .action-btn {
-        background: transparent;
-        border: none;
-        padding: 8px 16px;
-        font-size: 13px;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        border-radius: 6px;
-        transition: all 0.2s ease;
-        font-weight: 500;
-        flex: 1;
-        justify-content: center;
-
-        i {
-          font-size: 14px;
-        }
-
-        &:hover {
-          background-color: var(--fill-color-blank);
-          transform: translateY(-1px);
-          box-shadow: var(--box-shadow-light);
-        }
-      }
-
-      .view-btn {
-        color: var(--primary-color);
-
-        &:hover {
-          color: var(--primary-color);
-          opacity: 0.8;
-        }
-      }
-
-      .edit-btn {
-        color: var(--success-color);
-
-        &:hover {
-          color: var(--success-color);
-          opacity: 0.8;
-        }
-      }
-
-      .delete-btn {
-        color: var(--danger-color);
-
-        &:hover {
-          color: var(--danger-color);
-          opacity: 0.8;
-        }
-      }
+      background: var(--el-fill-color-lighter);
     }
   }
 
-  // 空状态样式
-  .empty-state {
-    text-align: center;
-    padding: 80px 20px;
-    background: var(--card-bg-color);
-    border-radius: 12px;
-    border: 2px dashed var(--border-color);
-    transition: all 0.3s ease;
-    grid-column: 1 / -1;
-
-    &:hover {
-      border-color: var(--primary-color);
-      background: var(--fill-color-lighter);
-    }
-
-    .empty-icon {
-      width: 80px;
-      height: 80px;
-      border-radius: 50%;
-      background: var(--fill-color-light);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin: 0 auto 24px;
-      transition: all 0.3s ease;
-
-      i {
-        font-size: 36px;
-        color: var(--text-color-placeholder);
-        transition: color 0.3s ease;
-      }
-    }
-
-    h3 {
-      font-size: 20px;
-      color: var(--text-color-primary);
-      margin: 0 0 12px 0;
-      font-weight: 600;
-      transition: color 0.3s ease;
-    }
-
-    p {
-      font-size: 15px;
-      color: var(--text-color-secondary);
-      margin: 0 0 24px 0;
-      transition: color 0.3s ease;
-    }
-
-    .el-button {
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      border: none;
-      padding: 12px 24px;
-      border-radius: 8px;
-      font-weight: 500;
-
-      i {
-        margin-right: 6px;
-      }
-    }
-  }
-
-  .repo-pagination {
-    text-align: right;
-    margin-top: 32px;
+  .pagination-wrapper {
+    margin-top: 24px;
+    display: flex;
+    justify-content: flex-end;
   }
 }
 
-// Tabs styling for theme fit
-.knowledge-tabs {
-  margin-bottom: 20px;
-  transition: all 0.3s ease;
-
-  :deep(.el-tabs__item) {
-    background-color: var(--fill-color-light);
-    border-color: var(--border-color);
-    color: var(--text-color-primary);
-
-  }
-}
-
-// 响应式调整
+// 响应式
 @media (max-width: 768px) {
-  .hero.new-style {
-    padding: 32px 16px;
-    border-radius: 8px;
+  .knowledge-home {
+    padding: 16px;
+  }
 
-    h1 {
-      font-size: 28px;
+  .search-section {
+    padding: 24px 16px;
+
+    .page-title {
+      font-size: 24px;
     }
 
-    p {
-      font-size: 14px;
-    }
-
-    .search-container {
+    .search-wrapper {
       flex-direction: column;
-      border-radius: 8px;
 
-      .search-select {
-        border-right: none;
-        border-bottom: 1px solid var(--border-color-lighter);
-      }
-
-      .search-button {
+      .el-button {
         width: 100%;
-        border-radius: 0 0 8px 8px;
       }
     }
-
-    .hot-search {
-      justify-content: flex-start;
-    }
   }
 
-  .statistics-section {
-    .stat-col {
-      width: 50%;
-      margin-bottom: 16px;
-    }
+  .stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
+  }
 
-    .stat-card {
-      padding: 20px;
+  .repos-section {
+    padding: 16px;
 
-      .stat-icon {
-        width: 48px;
-        height: 48px;
-        margin-right: 12px;
+    .section-header {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 16px;
 
-        i {
-          font-size: 20px;
+      .action-buttons {
+        width: 100%;
+        flex-wrap: wrap;
+
+        .el-button {
+          flex: 1;
+          min-width: 100px;
         }
       }
-
-      .stat-info .stat-value {
-        font-size: 24px;
-      }
     }
-  }
 
-  .knowledge-repos {
     .repos-grid {
       grid-template-columns: 1fr;
-      gap: 20px;
-    }
-
-    .repo-pagination {
-      text-align: center;
     }
   }
 }
 
 @media (max-width: 480px) {
-  .statistics-section {
-    .stat-col {
-      width: 100%;
-    }
-  }
-
-  .knowledge-repos {
-    .repos-header {
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 16px;
-
-      h2 {
-        font-size: 20px;
-      }
-
-      .create-btn {
-        width: 100%;
-      }
-    }
-
-    .repo-card {
-      .repo-header {
-        padding: 20px;
-
-        .repo-icon {
-          width: 40px;
-          height: 40px;
-          margin-right: 12px;
-        }
-      }
-
-      .repo-content {
-        padding: 16px 20px;
-      }
-
-      .repo-actions {
-        padding: 12px 20px;
-        flex-wrap: wrap;
-
-        .action-btn {
-          flex: 1 1 calc(33.333% - 8px);
-          min-width: 0;
-          padding: 8px 8px;
-          font-size: 12px;
-        }
-      }
-    }
+  .stats-grid {
+    grid-template-columns: 1fr;
   }
 }
 </style>
diff --git a/pc/src/views/apps/knowledge/tag/index.vue b/pc/src/views/apps/knowledge/tag/index.vue
index e69de29..3a2e79a 100644
--- a/pc/src/views/apps/knowledge/tag/index.vue
+++ b/pc/src/views/apps/knowledge/tag/index.vue
@@ -0,0 +1,175 @@
+<template>
+  <div class="tag-manage">
+    <div class="page-header">
+      <h2 class="page-title">标签管理</h2>
+      <el-button type="primary" @click="handleAdd">
+        <el-icon><Plus /></el-icon>
+        添加标签
+      </el-button>
+    </div>
+
+    <div class="tag-content">
+      <el-card shadow="never">
+        <el-table :data="tagList" style="width: 100%" v-loading="loading">
+          <el-table-column prop="tagId" label="ID" width="80" />
+          <el-table-column prop="tagName" label="标签名称" />
+          <el-table-column label="操作" width="200">
+            <template #default="{ row }">
+              <el-button type="primary" link size="small" @click="handleEdit(row)">
+                编辑
+              </el-button>
+              <el-button type="danger" link size="small" @click="handleDelete(row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-card>
+    </div>
+
+    <!-- 添加/编辑对话框 -->
+    <el-dialog
+      v-model="dialogVisible"
+      :title="dialogTitle"
+      width="500px"
+    >
+      <el-form
+        :model="formData"
+        :rules="rules"
+        ref="formRef"
+        label-width="100px"
+      >
+        <el-form-item label="标签名称" prop="tagName">
+          <el-input
+            v-model="formData.tagName"
+            placeholder="请输入标签名称"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleSubmit">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import { getTagList, addTag } from '@/api/knowledge'
+
+const loading = ref(false)
+const tagList = ref<any[]>([])
+const dialogVisible = ref(false)
+const dialogTitle = ref('添加标签')
+const formRef = ref<FormInstance>()
+
+const formData = reactive({
+  tagId: 0,
+  tagName: '',
+})
+
+const rules = reactive<FormRules>({
+  tagName: [
+    { required: true, message: '请输入标签名称', trigger: 'blur' },
+  ],
+})
+
+const fetchList = async () => {
+  loading.value = true
+  try {
+    const res = await getTagList()
+    const data = res.code === 0 && res.data ? res.data : res.data || []
+    tagList.value = Array.isArray(data) ? data : []
+  } catch (e: any) {
+    ElMessage.error(e.message || '获取标签列表失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleAdd = () => {
+  dialogTitle.value = '添加标签'
+  formData.tagId = 0
+  formData.tagName = ''
+  dialogVisible.value = true
+}
+
+const handleEdit = (row: any) => {
+  dialogTitle.value = '编辑标签'
+  formData.tagId = row.tagId
+  formData.tagName = row.tagName
+  dialogVisible.value = true
+}
+
+const handleDelete = (row: any) => {
+  ElMessageBox.confirm('确认删除该标签？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(async () => {
+    try {
+      // TODO: 实现删除API
+      ElMessage.success('删除成功')
+      fetchList()
+    } catch (e: any) {
+      ElMessage.error(e.message || '删除失败')
+    }
+  })
+}
+
+const handleSubmit = () => {
+  if (!formRef.value) return
+  formRef.value.validate(async (valid: boolean) => {
+    if (!valid) return
+    try {
+      await addTag({
+        tagName: formData.tagName,
+      })
+      ElMessage.success('操作成功')
+      dialogVisible.value = false
+      fetchList()
+    } catch (e: any) {
+      ElMessage.error(e.message || '操作失败')
+    }
+  })
+}
+
+onMounted(() => {
+  fetchList()
+})
+</script>
+
+<style scoped lang="less">
+.tag-manage {
+  padding: 24px;
+  min-height: 100%;
+  background-color: var(--el-bg-color-page);
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+
+  .page-title {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--el-text-color-primary);
+  }
+}
+
+.tag-content {
+  :deep(.el-card) {
+    background: var(--el-bg-color);
+    border: 1px solid var(--el-border-color-lighter);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  }
+}
+</style>
+
diff --git a/pc/src/views/dashboard/index.vue b/pc/src/views/dashboard/index.vue
index 5738dfb..eff0a47 100644
--- a/pc/src/views/dashboard/index.vue
+++ b/pc/src/views/dashboard/index.vue
@@ -1,89 +1,236 @@
 <template>
-  <div class="dashboard-v2">
-    <!-- 信息总览卡片 -->
-    <section class="dashboard-overview">
-      <div class="overview-card" v-for="stat in stats" :key="stat.label">
-        <div class="overview-icon" :class="stat.type">
-          <svg-icon :name="stat.icon" :size="28" />
+  <div class="dashboard">
+    <!-- 欢迎区域 -->
+    <div class="welcome-section">
+      <div class="welcome-content">
+        <h1 class="welcome-title">欢迎回来！</h1>
+        <p class="welcome-subtitle">今天是 {{ currentDate }}，祝您工作愉快</p>
+      </div>
+    </div>
+
+    <!-- 统计卡片 -->
+    <div class="stats-grid">
+      <div
+        v-for="(stat, index) in stats"
+        :key="index"
+        class="stat-card"
+        :class="stat.type"
+      >
+        <div class="stat-icon-wrapper">
+          <el-icon :size="28">
+            <component :is="stat.icon" />
+          </el-icon>
         </div>
-        <div>
-          <div class="overview-value">{{ stat.value }}</div>
-          <div class="overview-label">{{ stat.label }}</div>
+        <div class="stat-content">
+          <div class="stat-value">{{ stat.value }}</div>
+          <div class="stat-label">{{ stat.label }}</div>
         </div>
         <div
-          class="overview-trend"
+          class="stat-trend"
           :class="stat.change > 0 ? 'up' : stat.change < 0 ? 'down' : 'flat'"
         >
-          <span v-if="stat.change > 0">↑</span>
-          <span v-else-if="stat.change < 0">↓</span>
-          <span v-else>-</span>
-          {{ stat.change > 0 ? "+" : "" }}{{ stat.change }}%
+          <el-icon v-if="stat.change > 0" :size="14"><ArrowUp /></el-icon>
+          <el-icon v-else-if="stat.change < 0" :size="14"><ArrowDown /></el-icon>
+          <span>{{ stat.change > 0 ? '+' : '' }}{{ stat.change }}%</span>
         </div>
       </div>
-    </section>
-    <!-- 图表区/两栏/移动一栏 -->
-    <section class="dashboard-charts">
-      <div class="dashboard-chart-card">
-        <div class="chart-title">月收入走势</div>
-        <div class="chart-main">
+    </div>
+
+    <!-- 图表区域 -->
+    <div class="charts-section">
+      <div class="chart-card">
+        <div class="card-header">
+          <h3 class="card-title">月收入走势</h3>
+          <el-dropdown trigger="click">
+            <el-button type="primary" link>
+              <el-icon><MoreFilled /></el-icon>
+            </el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item>查看详情</el-dropdown-item>
+                <el-dropdown-item>导出数据</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
+        <div class="chart-container">
           <canvas id="lineChart" height="160"></canvas>
         </div>
       </div>
-      <div class="dashboard-chart-card">
-        <div class="chart-title">用户活跃分布</div>
-        <div class="chart-main">
+
+      <div class="chart-card">
+        <div class="card-header">
+          <h3 class="card-title">用户活跃分布</h3>
+          <el-dropdown trigger="click">
+            <el-button type="primary" link>
+              <el-icon><MoreFilled /></el-icon>
+            </el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item>查看详情</el-dropdown-item>
+                <el-dropdown-item>导出数据</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
+        <div class="chart-container">
           <canvas id="barChart" height="160"></canvas>
         </div>
       </div>
-    </section>
-    <!-- 任务与动态 -->
-    <section class="dashboard-lists">
-      <div class="dashboard-list-card">
-        <div class="list-title">待办任务</div>
-        <ul class="dashboard-task-list">
-          <li v-for="(task, idx) in tasks" :key="idx" :class="{done:task.completed}">
-            <input type="checkbox" :checked="task.completed" :id="'task-'+idx" />
-            <label :for="'task-'+idx"></label>
-            <span class="task-title">{{ task.title }}</span>
-            <span class="task-date">{{ task.date }}</span>
-            <span class="task-priority" :class="task.priority.toLowerCase()">{{ task.priority }}</span>
-          </li>
-        </ul>
+    </div>
+
+    <!-- 列表区域 -->
+    <div class="lists-section">
+      <div class="list-card">
+        <div class="card-header">
+          <h3 class="card-title">待办任务</h3>
+          <el-button type="primary" link size="small">
+            <el-icon><Plus /></el-icon>
+            添加任务
+          </el-button>
+        </div>
+        <div class="list-content">
+          <div
+            v-for="(task, idx) in tasks"
+            :key="idx"
+            class="task-item"
+            :class="{ done: task.completed }"
+          >
+            <el-checkbox
+              v-model="task.completed"
+              @change="handleTaskChange(task)"
+            />
+            <div class="task-info">
+              <div class="task-title">{{ task.title }}</div>
+              <div class="task-meta">
+                <span class="task-date">{{ task.date }}</span>
+                <el-tag
+                  :type="getPriorityType(task.priority)"
+                  size="small"
+                  effect="plain"
+                >
+                  {{ task.priority }}
+                </el-tag>
+              </div>
+            </div>
+          </div>
+          <el-empty
+            v-if="tasks.filter(t => !t.completed).length === 0"
+            description="暂无待办任务"
+            :image-size="80"
+          />
+        </div>
       </div>
-      <div class="dashboard-list-card">
-        <div class="list-title">最新动态</div>
-        <ul class="dashboard-activity-list">
-          <li v-for="(activity, idx) in activities" :key="idx">
-            <img :src="activity.avatar" class="activity-avatar" alt="avatar" />
-            <div class="activity-detail">
-              <div><b>{{ activity.user }}</b>&nbsp;{{ activity.action }}</div>
+
+      <div class="list-card">
+        <div class="card-header">
+          <h3 class="card-title">最新动态</h3>
+          <el-button type="primary" link size="small">查看全部</el-button>
+        </div>
+        <div class="list-content">
+          <div
+            v-for="(activity, idx) in activities"
+            :key="idx"
+            class="activity-item"
+          >
+            <el-avatar :src="activity.avatar" :size="40" />
+            <div class="activity-info">
+              <div class="activity-text">
+                <span class="activity-user">{{ activity.user }}</span>
+                <span class="activity-action">{{ activity.action }}</span>
+              </div>
               <div class="activity-time">{{ activity.time }}</div>
             </div>
-          </li>
-        </ul>
+          </div>
+          <el-empty
+            v-if="activities.length === 0"
+            description="暂无动态"
+            :image-size="80"
+          />
+        </div>
       </div>
-    </section>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, computed, onMounted } from "vue";
 import { Chart, registerables } from "chart.js";
+import {
+  Money,
+  User,
+  ShoppingCart,
+  TrendCharts,
+  ArrowUp,
+  ArrowDown,
+  MoreFilled,
+  Plus,
+} from "@element-plus/icons-vue";
+
 Chart.register(...registerables);
 
-// 卡片数据
+// 当前日期
+const currentDate = computed(() => {
+  const date = new Date();
+  const weekdays = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  const weekday = weekdays[date.getDay()];
+  return `${month}月${day}日 ${weekday}`;
+});
+
+// 统计数据
 const stats = ref([
-  { label: "本月收入", value: "￥ 35,800", change: 10.4, icon: "dollar-sign", type: "first" },
-  { label: "新用户", value: "842", change: 3.7, icon: "users", type: "second" },
-  { label: "订单量", value: "1,376", change: -1.6, icon: "shopping-cart", type: "third" },
-  { label: "活跃率", value: "27.3%", change: 2.2, icon: "activity", type: "fourth" }
+  {
+    label: "本月收入",
+    value: "￥ 35,800",
+    change: 10.4,
+    icon: Money,
+    type: "income",
+  },
+  {
+    label: "新用户",
+    value: "842",
+    change: 3.7,
+    icon: User,
+    type: "users",
+  },
+  {
+    label: "订单量",
+    value: "1,376",
+    change: -1.6,
+    icon: ShoppingCart,
+    type: "orders",
+  },
+  {
+    label: "活跃率",
+    value: "27.3%",
+    change: 2.2,
+    icon: TrendCharts,
+    type: "active",
+  },
 ]);
 
 // 任务列表
 const tasks = ref([
-  { title: "完成Q2预算审核", date: "2024-06-11", priority: "High", completed: false },
-  { title: "发邮件通知团队", date: "2024-06-10", priority: "Medium", completed: true },
-  { title: "产品需求讨论会", date: "2024-06-09", priority: "Low", completed: false }
+  {
+    title: "完成Q2预算审核",
+    date: "2024-06-11",
+    priority: "High",
+    completed: false,
+  },
+  {
+    title: "发邮件通知团队",
+    date: "2024-06-10",
+    priority: "Medium",
+    completed: true,
+  },
+  {
+    title: "产品需求讨论会",
+    date: "2024-06-09",
+    priority: "Low",
+    completed: false,
+  },
 ]);
 
 // 动态记录
@@ -92,360 +239,453 @@ const activities = ref([
     user: "Emma",
     action: "添加了新用户",
     time: "1 小时前",
-    avatar: "https://picsum.photos/id/1027/32/32"
+    avatar: "https://picsum.photos/id/1027/40/40",
   },
   {
     user: "John",
     action: "修改了高级权限",
     time: "3 小时前",
-    avatar: "https://picsum.photos/id/1012/32/32"
+    avatar: "https://picsum.photos/id/1012/40/40",
   },
   {
     user: "Jessica",
     action: "完成订单分析报表",
     time: "昨天",
-    avatar: "https://picsum.photos/id/1000/32/32"
-  }
+    avatar: "https://picsum.photos/id/1000/40/40",
+  },
 ]);
 
-// 图表
+// 获取优先级类型
+const getPriorityType = (priority: string) => {
+  const map: Record<string, string> = {
+    High: "danger",
+    Medium: "warning",
+    Low: "success",
+  };
+  return map[priority] || "info";
+};
+
+// 任务状态改变
+const handleTaskChange = (task: any) => {
+  console.log("Task changed:", task);
+};
+
+// 初始化图表
 onMounted(() => {
   // 折线图
-  new Chart(document.getElementById('lineChart') as HTMLCanvasElement, {
+  new Chart(document.getElementById("lineChart") as HTMLCanvasElement, {
     type: "line",
     data: {
-      labels: ["1月","2月","3月","4月","5月","6月","7月"],
-      datasets: [{
-        label: "收入（元）",
-        data: [16800,19400,23100,24600,27600,31000,35800],
-        fill: true,
-        borderColor: "#4287f6",
-        backgroundColor: "rgba(66,135,246,0.13)",
-        tension: 0.36,
-        pointRadius: 3,
-        pointHoverRadius: 6,
-      }]
+      labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
+      datasets: [
+        {
+          label: "收入（元）",
+          data: [16800, 19400, 23100, 24600, 27600, 31000, 35800],
+          fill: true,
+          borderColor: "#4f84ff",
+          backgroundColor: "rgba(79, 132, 255, 0.1)",
+          tension: 0.4,
+          pointRadius: 4,
+          pointHoverRadius: 6,
+          pointBackgroundColor: "#4f84ff",
+          pointBorderColor: "#fff",
+          pointBorderWidth: 2,
+        },
+      ],
     },
     options: {
-      plugins: { legend: {display: false} },
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          backgroundColor: "rgba(0, 0, 0, 0.8)",
+          padding: 12,
+          titleFont: { size: 14 },
+          bodyFont: { size: 13 },
+          cornerRadius: 6,
+        },
+      },
       scales: {
-        y: { 
-          beginAtZero: true, 
-          ticks: { color: "var(--text-color-secondary)" }, 
-          grid:{color:"var(--border-color-lighter)"} 
+        y: {
+          beginAtZero: true,
+          ticks: {
+            color: "var(--el-text-color-regular)",
+            font: { size: 12 },
+          },
+          grid: {
+            color: "var(--el-border-color-lighter)",
+            drawBorder: false,
+          },
         },
-        x: { 
-          ticks: { color: "var(--text-color-secondary)" }, 
-          grid: { display: false } 
+        x: {
+          ticks: {
+            color: "var(--el-text-color-regular)",
+            font: { size: 12 },
+          },
+          grid: {
+            display: false,
+          },
         },
-      }
-    }
+      },
+    },
   });
+
   // 柱状图
-  new Chart(document.getElementById('barChart') as HTMLCanvasElement, {
+  new Chart(document.getElementById("barChart") as HTMLCanvasElement, {
     type: "bar",
     data: {
-      labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
-      datasets: [{
-        label: "活跃用户",
-        data: [140,162,189,176,206,238,205],
-        backgroundColor: "rgba(67,186,162,0.85)",
-        borderRadius: 8,
-        barPercentage: 0.58,
-      }]
+      labels: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+      datasets: [
+        {
+          label: "活跃用户",
+          data: [140, 162, 189, 176, 206, 238, 205],
+          backgroundColor: "rgba(79, 132, 255, 0.8)",
+          borderRadius: 6,
+          barPercentage: 0.6,
+          borderSkipped: false,
+        },
+      ],
     },
     options: {
-      plugins: { legend: { display: false } },
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          backgroundColor: "rgba(0, 0, 0, 0.8)",
+          padding: 12,
+          titleFont: { size: 14 },
+          bodyFont: { size: 13 },
+          cornerRadius: 6,
+        },
+      },
       scales: {
-        y: { beginAtZero: true, ticks: { color: "#adadad"}, grid:{color:"#eee"} },
-        x: { ticks: { color: "#adadad" }, grid: { display: false } }
-      }
-    }
+        y: {
+          beginAtZero: true,
+          ticks: {
+            color: "var(--el-text-color-regular)",
+            font: { size: 12 },
+          },
+          grid: {
+            color: "var(--el-border-color-lighter)",
+            drawBorder: false,
+          },
+        },
+        x: {
+          ticks: {
+            color: "var(--el-text-color-regular)",
+            font: { size: 12 },
+          },
+          grid: {
+            display: false,
+          },
+        },
+      },
+    },
   });
 });
 </script>
 
 <style lang="less" scoped>
-@cardRadius: 12px;
-@color1: #3b82f6;
-@color2: #10b981;
-@color3: #f59e42;
-@color4: #7367f0;
-// 使用主题变量
-@colorBg: var(--bg-color-page);
-@colorFont: var(--text-color-primary);
-@colorSub: var(--text-color-secondary);
-@colorCard: var(--card-bg-color);
-@shadowMain: var(--box-shadow);
+.dashboard {
+  padding: 24px;
+  min-height: 100%;
+  background-color: var(--el-bg-color-page);
+}
 
-//顶栏
-.dashboard-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 32px;
-  height: 58px;
-  font-weight: 500;
-  font-size: 18px;
-  background: var(--card-bg-color);
-  box-shadow: var(--box-shadow-light);
-  color: var(--text-color-primary);
-  transition: background-color 0.3s ease, color 0.3s ease;
+// 欢迎区域
+.welcome-section {
+  margin-bottom: 24px;
+  padding: 32px;
+  background: linear-gradient(135deg, #062da3 0%, #4f84ff 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(6, 45, 163, 0.2);
 
-  .dashboard-title {
-    display: flex;
-    align-items: center;
-    letter-spacing: 1px;
-  }
-  .dashboard-user {
-    display: flex;
-    align-items: center;
-    .user-avatar {
-      border-radius: 50%;
-      margin-right: 8px;
-      width: 36px;
-      height: 36px;
+  .welcome-content {
+    .welcome-title {
+      margin: 0 0 8px;
+      font-size: 28px;
+      font-weight: 600;
+      color: #fff;
     }
-    .username {
-      color: @colorSub;
-      font-size: 16px;
-      font-weight: 400;
-      letter-spacing: .5px;
+
+    .welcome-subtitle {
+      margin: 0;
+      font-size: 15px;
+      color: rgba(255, 255, 255, 0.9);
     }
   }
 }
-.dashboard-v2 {
-  min-height: 100vh;
-  background: var(--bg-color-page);
-  color: var(--text-color-primary);
-  transition: background-color 0.3s ease, color 0.3s ease;
-}
 
-// 总览统计
-.dashboard-overview {
-  display: flex;
-  gap: 24px;
-  padding: 24px 32px 0;
-  .overview-card {
-    flex: 1;
-    background: var(--card-bg-color);
-    border: 1px solid var(--border-color-lighter);
-    border-radius: @cardRadius;
-    box-shadow: var(--box-shadow);
+// 统计卡片
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 20px;
+  margin-bottom: 24px;
+
+  .stat-card {
+    background: var(--el-bg-color);
+    border-radius: 12px;
+    padding: 24px;
     display: flex;
     align-items: center;
-    padding: 22px 28px;
-    gap: 18px;
+    gap: 16px;
+    border: 1px solid var(--el-border-color-lighter);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+    transition: all 0.3s;
     position: relative;
     overflow: hidden;
-    min-width: 170px;
-    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
-    
+
     &:hover {
-      box-shadow: var(--box-shadow-dark);
-      transform: translateY(-2px);
+      transform: translateY(-4px);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+      border-color: var(--el-color-primary-light-7);
     }
 
-    .overview-icon {
-      border-radius: 50%;
-      width: 54px;
-      height: 54px;
+    .stat-icon-wrapper {
+      width: 56px;
+      height: 56px;
+      border-radius: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 28px;
-      margin-right: 6px;
-      &.first { background: fade(@color1,20%); color: @color1;}
-      &.second { background: fade(@color2,20%); color: @color2;}
-      &.third { background: fade(@color3,20%); color: @color3;}
-      &.fourth { background: fade(@color4,20%); color: @color4;}
+      flex-shrink: 0;
+
+      .el-icon {
+        color: #fff;
+      }
     }
-    .overview-label { 
-      font-size: 15px; 
-      color: var(--text-color-secondary); 
-      margin-top: 2px;
-      transition: color 0.3s ease;
+
+    &.income .stat-icon-wrapper {
+      background: linear-gradient(135deg, #062da3 0%, #4f84ff 100%);
     }
-    .overview-value { 
-      font-size: 22px; 
-      color: var(--text-color-primary); 
-      margin-bottom: 2px; 
-      font-weight: 600;
-      transition: color 0.3s ease;
+
+    &.users .stat-icon-wrapper {
+      background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
     }
-    .overview-trend {
-      position: absolute;
-      right: 20px; bottom: 16px; font-size: 14px; font-weight: 500;
-      &.up { color: #10b981;}
-      &.down { color: #ef4444;}
-      &.flat { color: #888;}
-      font-family: "Roboto",Arial,sans-serif;
+
+    &.orders .stat-icon-wrapper {
+      background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
+    }
+
+    &.active .stat-icon-wrapper {
+      background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
+    }
+
+    .stat-content {
+      flex: 1;
+      min-width: 0;
+
+      .stat-value {
+        font-size: 28px;
+        font-weight: 700;
+        color: var(--el-text-color-primary);
+        line-height: 1;
+        margin-bottom: 8px;
+      }
+
+      .stat-label {
+        font-size: 14px;
+        color: var(--el-text-color-regular);
+      }
+    }
+
+    .stat-trend {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      font-size: 13px;
+      font-weight: 500;
+      padding: 4px 8px;
+      border-radius: 6px;
+
+      &.up {
+        color: #10b981;
+        background: rgba(16, 185, 129, 0.1);
+      }
+
+      &.down {
+        color: #ef4444;
+        background: rgba(239, 68, 68, 0.1);
+      }
+
+      &.flat {
+        color: var(--el-text-color-placeholder);
+        background: var(--el-fill-color-lighter);
+      }
     }
   }
 }
 
 // 图表区域
-.dashboard-charts {
-  display: flex;
-  gap: 24px;
-  padding: 22px 32px 0;
+.charts-section {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  gap: 20px;
+  margin-bottom: 24px;
 
-  .dashboard-chart-card {
-    flex: 1;
-    background: var(--card-bg-color);
-    border: 1px solid var(--border-color-lighter);
-    border-radius: @cardRadius;
-    box-shadow: var(--box-shadow);
-    padding: 20px 24px 12px;
-    display: flex;
-    flex-direction: column;
-    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
-    
-    .chart-title {
-      font-size: 16px;
-      font-weight: 500;
-      margin-bottom: 14px;
-      color: var(--text-color-primary);
-      letter-spacing: .5px;
-      transition: color 0.3s ease;
+  .chart-card {
+    background: var(--el-bg-color);
+    border-radius: 12px;
+    padding: 24px;
+    border: 1px solid var(--el-border-color-lighter);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+    transition: all 0.3s;
+
+    &:hover {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
     }
-    .chart-main {
-      flex: 1;
+
+    .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 20px;
+
+      .card-title {
+        margin: 0;
+        font-size: 18px;
+        font-weight: 600;
+        color: var(--el-text-color-primary);
+      }
+    }
+
+    .chart-container {
+      height: 280px;
+      position: relative;
     }
   }
 }
 
-// 列表组件区
-.dashboard-lists {
-  display: flex;
-  gap: 24px;
-  padding: 22px 32px 0;
-  margin-bottom: 40px;
+// 列表区域
+.lists-section {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  gap: 20px;
 
-  .dashboard-list-card {
-    flex: 1;
-    background: var(--card-bg-color);
-    border: 1px solid var(--border-color-lighter);
-    border-radius: @cardRadius;
-    box-shadow: var(--box-shadow);
-    padding: 20px 0 8px;
-    min-width: 280px;
-    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
-    
-    .list-title {
-      font-size: 16px;
-      font-weight: 500;
-      margin-bottom: 12px;
-      padding: 0 20px;
-      letter-spacing: .5px;
-      color: var(--text-color-primary);
-      transition: color 0.3s ease;
+  .list-card {
+    background: var(--el-bg-color);
+    border-radius: 12px;
+    padding: 24px;
+    border: 1px solid var(--el-border-color-lighter);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+    transition: all 0.3s;
+
+    &:hover {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
     }
-    ul {
-      margin: 0;
-      padding: 0;
-      list-style: none;
-    }
-    // 任务样式
-    .dashboard-task-list {
-      li {
-        display: flex;
-        align-items: center;
-        padding: 9px 20px;
-        border-bottom: 1px solid var(--border-color-lighter);
-        gap: 10px;
-        font-size: 15px;
-        position: relative;
-        color: var(--text-color-primary);
-        transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
-        
-        &:hover {
-          background-color: var(--fill-color-lighter);
-        }
-        
-        &.done .task-title {
-          text-decoration: line-through;
-          color: var(--text-color-secondary);
-          opacity: 0.72;
-        }
-        input[type="checkbox"] {
-          appearance: none;
-          width: 16px;
-          height: 16px;
-          border-radius: 4px;
-          border: 1.5px solid var(--border-color);
-          margin-right: 6px;
-          outline:none;
-          cursor:pointer;
-          transition: border-color 0.2s, background-color 0.2s;
-          background-color: var(--fill-color-blank);
-          &:checked {
-            background: var(--success-color);
-            border-color: var(--success-color);
-          }
-        }
-        label {
-          position: absolute;
-          left: 0; top: 50%; transform: translateY(-50%);
-          width: 16px; height: 16px;
-        }
-        .task-title { 
-          flex: 1;
-          color: var(--text-color-primary);
-          transition: color 0.3s ease;
-        }
-        .task-date {
-          color: var(--text-color-placeholder);
-          margin-right: 14px;
-          font-size: 13px;
-        }
-        .task-priority {
-          font-size: 12px;
-          padding: 0 7px;
-          border-radius: 6px;
-          background: var(--fill-color);
-          color: var(--text-color-secondary);
-          &.high { background: rgba(239, 68, 68, 0.1); color: var(--danger-color);}
-          &.medium { background: rgba(230, 162, 60, 0.1); color: var(--warning-color);}
-          &.low { background: rgba(16, 185, 129, 0.1); color: var(--success-color);}
-        }
+
+    .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 20px;
+
+      .card-title {
+        margin: 0;
+        font-size: 18px;
+        font-weight: 600;
+        color: var(--el-text-color-primary);
       }
     }
-    // 活动样式
-    .dashboard-activity-list {
-      li {
+
+    .list-content {
+      .task-item {
         display: flex;
         align-items: flex-start;
-        gap: 10px;
-        padding: 11px 20px;
-        font-size: 15px;
-        border-bottom: 1px solid var(--border-color-lighter);
-        color: var(--text-color-primary);
-        transition: background-color 0.2s ease, border-color 0.2s ease;
-        
+        gap: 12px;
+        padding: 12px 0;
+        border-bottom: 1px solid var(--el-border-color-lighter);
+
+        &:last-child {
+          border-bottom: none;
+        }
+
         &:hover {
-          background-color: var(--fill-color-lighter);
+          background: var(--el-fill-color-lighter);
+          margin: 0 -24px;
+          padding-left: 24px;
+          padding-right: 24px;
+          border-radius: 8px;
         }
-        
-        .activity-avatar {
-          width: 30px;
-          height: 30px;
-          border-radius: 50%;
-          margin-top: 2px;
-          border: 2px solid var(--border-color-lighter);
-        }
-        .activity-detail {
-          flex: 1;
-          color: var(--text-color-primary);
-          
-          b {
-            color: var(--text-color-primary);
+
+        &.done {
+          .task-info {
+            .task-title {
+              text-decoration: line-through;
+              color: var(--el-text-color-placeholder);
+              opacity: 0.7;
+            }
           }
-          
-          .activity-time { 
-            color: var(--text-color-placeholder); 
-            font-size: 13px; 
-            margin-top: 2px;
+        }
+
+        .task-info {
+          flex: 1;
+          min-width: 0;
+
+          .task-title {
+            font-size: 14px;
+            color: var(--el-text-color-primary);
+            margin-bottom: 6px;
+            font-weight: 500;
+          }
+
+          .task-meta {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+
+            .task-date {
+              font-size: 12px;
+              color: var(--el-text-color-placeholder);
+            }
+          }
+        }
+      }
+
+      .activity-item {
+        display: flex;
+        align-items: flex-start;
+        gap: 12px;
+        padding: 12px 0;
+        border-bottom: 1px solid var(--el-border-color-lighter);
+
+        &:last-child {
+          border-bottom: none;
+        }
+
+        &:hover {
+          background: var(--el-fill-color-lighter);
+          margin: 0 -24px;
+          padding-left: 24px;
+          padding-right: 24px;
+          border-radius: 8px;
+        }
+
+        .activity-info {
+          flex: 1;
+          min-width: 0;
+
+          .activity-text {
+            font-size: 14px;
+            color: var(--el-text-color-primary);
+            margin-bottom: 4px;
+
+            .activity-user {
+              font-weight: 600;
+              color: var(--el-text-color-primary);
+            }
+
+            .activity-action {
+              color: var(--el-text-color-regular);
+            }
+          }
+
+          .activity-time {
+            font-size: 12px;
+            color: var(--el-text-color-placeholder);
           }
         }
       }
@@ -454,23 +694,43 @@ onMounted(() => {
 }
 
 // 响应式
-@media (max-width: 980px) {
-  .dashboard-overview,
-  .dashboard-charts,
-  .dashboard-lists { flex-direction: column; gap: 14px;}
-  .dashboard-overview, .dashboard-charts, .dashboard-lists {
-    padding-left: 3vw;
-    padding-right: 3vw;
-  }
-  .dashboard-list-card, .dashboard-chart-card, .overview-card {
-    min-width: 0 !important;
+@media (max-width: 1200px) {
+  .charts-section,
+  .lists-section {
+    grid-template-columns: 1fr;
   }
 }
 
-@media (max-width: 600px) {
-  .dashboard-header { padding: 0 10px; font-size: 15px;}
-  .dashboard-overview, .dashboard-charts, .dashboard-lists {
-    padding: 14px 3vw 0;
+@media (max-width: 768px) {
+  .dashboard {
+    padding: 16px;
+  }
+
+  .welcome-section {
+    padding: 24px 16px;
+
+    .welcome-title {
+      font-size: 24px;
+    }
+  }
+
+  .stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
+  }
+
+  .stat-card {
+    padding: 16px;
+
+    .stat-value {
+      font-size: 24px;
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .stats-grid {
+    grid-template-columns: 1fr;
   }
 }
 </style>
diff --git a/pc/src/views/system/tenant/components/audit.vue b/pc/src/views/system/tenant/components/audit.vue
index e69de29..3e50315 100644
--- a/pc/src/views/system/tenant/components/audit.vue
+++ b/pc/src/views/system/tenant/components/audit.vue
@@ -0,0 +1,227 @@
+<template>
+  <el-dialog
+    title="租户审核"
+    v-model="visible"
+    width="700px"
+    :close-on-click-modal="false"
+    @close="handleClose"
+  >
+    <div class="audit-content" v-loading="loading">
+      <!-- 租户信息展示 -->
+      <div class="tenant-info-section">
+        <h3 class="section-title">租户信息</h3>
+        <el-descriptions :column="2" border>
+          <el-descriptions-item label="租户ID">
+            {{ tenantData.id }}
+          </el-descriptions-item>
+          <el-descriptions-item label="租户名称">
+            {{ tenantData.name }}
+          </el-descriptions-item>
+          <el-descriptions-item label="租户编码">
+            {{ tenantData.code }}
+          </el-descriptions-item>
+          <el-descriptions-item label="负责人">
+            {{ tenantData.owner }}
+          </el-descriptions-item>
+          <el-descriptions-item label="联系电话">
+            {{ tenantData.phone || '未设置' }}
+          </el-descriptions-item>
+          <el-descriptions-item label="邮箱">
+            {{ tenantData.email || '未设置' }}
+          </el-descriptions-item>
+          <el-descriptions-item label="状态">
+            <el-tag :type="tenantData.status === 'enabled' ? 'success' : 'info'">
+              {{ tenantData.status === 'enabled' ? '启用' : '禁用' }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="创建时间">
+            {{ tenantData.created_at }}
+          </el-descriptions-item>
+          <el-descriptions-item label="备注" :span="2">
+            {{ tenantData.remark || '无' }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </div>
+
+      <!-- 审核表单 -->
+      <div class="audit-form-section">
+        <h3 class="section-title">审核信息</h3>
+        <el-form
+          :model="auditForm"
+          :rules="auditRules"
+          ref="auditFormRef"
+          label-width="100px"
+        >
+          <el-form-item label="审核结果" prop="result">
+            <el-radio-group v-model="auditForm.result">
+              <el-radio value="approved">通过</el-radio>
+              <el-radio value="rejected">拒绝</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="审核意见" prop="comment">
+            <el-input
+              v-model="auditForm.comment"
+              type="textarea"
+              :rows="4"
+              placeholder="请输入审核意见"
+            />
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <template #footer>
+      <el-button @click="handleClose">取消</el-button>
+      <el-button type="primary" @click="handleSubmit" :loading="submitting">
+        提交审核
+      </el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch, computed } from 'vue';
+import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
+import { auditTenant } from '@/api/tenant';
+
+interface Props {
+  modelValue: boolean;
+  tenant: any;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  tenant: () => ({}),
+});
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean];
+  success: [];
+}>();
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+});
+
+const loading = ref(false);
+const submitting = ref(false);
+const tenantData = ref<any>({});
+
+// 审核表单
+const auditForm = reactive({
+  result: '',
+  comment: '',
+});
+
+const auditFormRef = ref<FormInstance>();
+
+const auditRules: FormRules = {
+  result: [{ required: true, message: '请选择审核结果', trigger: 'change' }],
+  comment: [{ required: true, message: '请输入审核意见', trigger: 'blur' }],
+};
+
+// 获取当前用户
+function getCurrentUser() {
+  const userStr = localStorage.getItem('user');
+  if (userStr) {
+    try {
+      const user = JSON.parse(userStr);
+      return user.username || user.name || user.userName || 'system';
+    } catch {
+      return 'system';
+    }
+  }
+  return 'system';
+}
+
+// 提交审核
+async function handleSubmit() {
+  if (!auditFormRef.value) return;
+  
+  await auditFormRef.value.validate();
+  submitting.value = true;
+  try {
+    const auditData = {
+      audit_status: auditForm.result,
+      audit_comment: auditForm.comment,
+      audit_by: getCurrentUser(),
+    };
+
+    const res = await auditTenant(tenantData.value.id, auditData);
+    if (res.success) {
+      const action = auditForm.result === 'approved' ? '通过' : '拒绝';
+      ElMessage.success(`审核${action}成功`);
+      handleClose();
+      emit('success');
+    } else {
+      ElMessage.error(res.message || '审核失败，请重试');
+    }
+  } catch (e: any) {
+    ElMessage.error(e.message || '审核失败，请重试');
+  } finally {
+    submitting.value = false;
+  }
+}
+
+const handleClose = () => {
+  visible.value = false;
+  auditForm.result = '';
+  auditForm.comment = '';
+  auditFormRef.value?.resetFields();
+};
+
+// 监听 tenant 变化
+watch(
+  () => props.tenant,
+  (newTenant) => {
+    if (newTenant && Object.keys(newTenant).length > 0) {
+      tenantData.value = {
+        ...newTenant,
+        created_at: newTenant.create_time || newTenant.created_at,
+        updated_at: newTenant.update_time || newTenant.updated_at,
+      };
+    }
+  },
+  { immediate: true, deep: true }
+);
+</script>
+
+<style lang="less" scoped>
+.audit-content {
+  padding: 16px 0;
+}
+
+.tenant-info-section,
+.audit-form-section {
+  margin-bottom: 24px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.section-title {
+  margin: 0 0 16px 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+  border-bottom: 2px solid #4f84ff;
+  padding-bottom: 8px;
+}
+
+.audit-form-section {
+  :deep(.el-form) {
+    margin-top: 16px;
+  }
+
+  :deep(.el-radio-group) {
+    display: flex;
+    gap: 24px;
+  }
+
+  :deep(.el-radio) {
+    margin-right: 0;
+  }
+}
+</style>
+
diff --git a/pc/src/views/system/tenant/components/detail.vue b/pc/src/views/system/tenant/components/detail.vue
index e69de29..e346204 100644
--- a/pc/src/views/system/tenant/components/detail.vue
+++ b/pc/src/views/system/tenant/components/detail.vue
@@ -0,0 +1,215 @@
+<template>
+  <el-dialog
+    title="租户详情"
+    v-model="visible"
+    width="600px"
+    :close-on-click-modal="false"
+    @close="handleClose"
+  >
+    <div class="tenant-detail" v-loading="loading">
+      <el-descriptions :column="2" border>
+        <el-descriptions-item label="租户ID">
+          {{ tenantData.id }}
+        </el-descriptions-item>
+        <el-descriptions-item label="租户名称">
+          {{ tenantData.name }}
+        </el-descriptions-item>
+        <el-descriptions-item label="租户编码">
+          {{ tenantData.code }}
+        </el-descriptions-item>
+        <el-descriptions-item label="负责人">
+          {{ tenantData.owner }}
+        </el-descriptions-item>
+        <el-descriptions-item label="联系电话">
+          {{ tenantData.phone || '未设置' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="邮箱">
+          {{ tenantData.email || '未设置' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="审核状态">
+          <el-tag :type="getAuditStatusType(tenantData.audit_status)">
+            {{ getAuditStatusText(tenantData.audit_status) }}
+          </el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item label="状态">
+          <el-tag :type="tenantData.status === 'enabled' ? 'success' : 'info'">
+            {{ tenantData.status === 'enabled' ? '启用' : '禁用' }}
+          </el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item label="存储容量">
+          <span>{{ formatCapacity(tenantData.capacity) }}</span>
+        </el-descriptions-item>
+        <el-descriptions-item label="已使用">
+          <span>{{ formatCapacity(tenantData.capacity_used || 0) }}</span>
+          <el-progress
+            :percentage="getCapacityPercentage(tenantData.capacity, tenantData.capacity_used)"
+            :color="getCapacityColor(tenantData.capacity, tenantData.capacity_used)"
+            :stroke-width="6"
+            style="margin-top: 8px; width: 200px;"
+          />
+        </el-descriptions-item>
+        <el-descriptions-item label="创建时间">
+          {{ tenantData.created_at }}
+        </el-descriptions-item>
+        <el-descriptions-item label="更新时间">
+          {{ tenantData.updated_at || '未更新' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="备注" :span="2">
+          {{ tenantData.remark || '无' }}
+        </el-descriptions-item>
+      </el-descriptions>
+    </div>
+    <template #footer>
+      <el-button @click="handleClose">关闭</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue';
+import { ElMessage } from 'element-plus';
+import { getTenantDetail } from '@/api/tenant';
+
+interface Props {
+  modelValue: boolean;
+  tenantId?: number | null;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  tenantId: null,
+});
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean];
+}>();
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+});
+
+const loading = ref(false);
+const tenantData = ref<any>({});
+
+// 审核状态相关方法
+function getAuditStatusType(status: string): 'warning' | 'success' | 'danger' | 'info' {
+  const statusMap: Record<string, 'warning' | 'success' | 'danger' | 'info'> = {
+    pending: 'warning',
+    approved: 'success',
+    rejected: 'danger',
+  };
+  return statusMap[status] || 'info';
+}
+
+function getAuditStatusText(status: string) {
+  const statusMap: Record<string, string> = {
+    pending: '待审核',
+    approved: '已通过',
+    rejected: '已拒绝',
+  };
+  return statusMap[status] || '未知';
+}
+
+// 格式化容量显示（后端返回的是 MB，直接格式化）
+function formatCapacity(mb: number | undefined | null): string {
+  if (mb === null || mb === undefined) {
+    return '0.00 MB';
+  }
+  const mbValue = Number(mb);
+  if (isNaN(mbValue) || mbValue < 0) {
+    return '0.00 MB';
+  }
+  // 后端返回的是 MB，如果小于 1024 MB，直接显示 MB
+  if (mbValue < 1024) {
+    return `${mbValue.toFixed(2)} MB`;
+  }
+  // 大于等于 1024 MB，转换为 GB 显示
+  const gb = mbValue / 1024;
+  return `${gb.toFixed(2)} GB`;
+}
+
+// 计算容量使用百分比
+function getCapacityPercentage(capacity: number | undefined, used: number | undefined): number {
+  if (!capacity || capacity === 0) return 0;
+  const usedValue = used || 0;
+  return Math.min(Math.round((usedValue / capacity) * 100), 100);
+}
+
+// 获取容量进度条颜色
+function getCapacityColor(capacity: number | undefined, used: number | undefined): string {
+  const percentage = getCapacityPercentage(capacity, used);
+  if (percentage >= 90) return '#f56c6c'; // 红色
+  if (percentage >= 70) return '#e6a23c'; // 橙色
+  return '#67c23a'; // 绿色
+}
+
+// 获取租户详情
+async function fetchDetail() {
+  if (!props.tenantId) return;
+  
+  loading.value = true;
+  try {
+    const res = await getTenantDetail(props.tenantId);
+    if (res.success && res.data) {
+      const tenant = res.data;
+      tenantData.value = {
+        ...tenant,
+        created_at: tenant.create_time || tenant.created_at,
+        updated_at: tenant.update_time || tenant.updated_at,
+      };
+    } else {
+      ElMessage.error(res.message || '获取租户详情失败');
+    }
+  } catch (err: any) {
+    ElMessage.error(err.message || '获取租户详情失败');
+  } finally {
+    loading.value = false;
+  }
+}
+
+const handleClose = () => {
+  visible.value = false;
+  tenantData.value = {};
+};
+
+// 监听弹窗打开和 tenantId 变化
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    if (newVal && props.tenantId) {
+      fetchDetail();
+    }
+  },
+  { immediate: true }
+);
+
+watch(
+  () => props.tenantId,
+  () => {
+    if (visible.value && props.tenantId) {
+      fetchDetail();
+    }
+  }
+);
+</script>
+
+<style lang="less" scoped>
+.tenant-detail {
+  padding: 16px 0;
+
+  :deep(.el-descriptions) {
+    margin-top: 0;
+  }
+
+  :deep(.el-descriptions-item__label) {
+    font-weight: 600;
+    color: var(--el-text-color-regular);
+  }
+
+  :deep(.el-descriptions-item__content) {
+    color: var(--el-text-color-primary);
+  }
+}
+</style>
+
diff --git a/pc/src/views/system/tenant/components/edit.vue b/pc/src/views/system/tenant/components/edit.vue
index e69de29..8dc82a9 100644
--- a/pc/src/views/system/tenant/components/edit.vue
+++ b/pc/src/views/system/tenant/components/edit.vue
@@ -0,0 +1,236 @@
+<template>
+  <el-dialog
+    :title="isEditing ? '编辑租户' : '添加租户'"
+    v-model="visible"
+    width="500px"
+    :close-on-click-modal="false"
+    @close="handleClose"
+  >
+    <el-form
+      :model="tenantForm"
+      :rules="formRules"
+      ref="tenantFormRef"
+      label-width="90px"
+    >
+      <el-form-item label="租户名称" prop="name">
+        <el-input v-model="tenantForm.name" placeholder="请输入租户名称" />
+      </el-form-item>
+      <el-form-item label="租户编码" prop="code">
+        <el-input v-model="tenantForm.code" placeholder="请输入租户编码" />
+      </el-form-item>
+      <el-form-item label="负责人" prop="owner">
+        <el-input v-model="tenantForm.owner" placeholder="请输入负责人" />
+      </el-form-item>
+      <el-form-item label="联系电话" prop="phone">
+        <el-input v-model="tenantForm.phone" placeholder="请输入联系电话" />
+      </el-form-item>
+      <el-form-item label="邮箱" prop="email">
+        <el-input v-model="tenantForm.email" placeholder="请输入邮箱" />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="tenantForm.status" placeholder="请选择状态" style="width: 100%">
+          <el-option label="启用" value="enabled" />
+          <el-option label="禁用" value="disabled" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="存储容量" prop="capacity">
+        <el-input-number
+          v-model="tenantForm.capacity"
+          :min="0"
+          :precision="2"
+          :step="100"
+          style="width: 100%"
+          placeholder="请输入存储容量（MB）"
+        />
+        <div class="form-tip">单位：MB，1GB = 1024MB</div>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="tenantForm.remark"
+          type="textarea"
+          :rows="3"
+          placeholder="请输入备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="handleClose">取消</el-button>
+      <el-button type="primary" @click="handleSubmit" :loading="submitting">
+        保存
+      </el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch, computed } from 'vue';
+import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
+import { createTenant, updateTenant } from '@/api/tenant';
+
+interface Props {
+  modelValue: boolean;
+  tenant?: any;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  tenant: null,
+});
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean];
+  success: [];
+}>();
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+});
+
+const submitting = ref(false);
+const tenantFormRef = ref<FormInstance>();
+
+// 判断是否为编辑模式
+const isEditing = computed(() => {
+  return !!(props.tenant && props.tenant.id);
+});
+
+// 表单数据
+const tenantForm = reactive({
+  id: null as number | null,
+  name: '',
+  code: '',
+  owner: '',
+  phone: '',
+  email: '',
+  status: 'enabled',
+  capacity: 0,
+  remark: '',
+});
+
+const formRules: FormRules = {
+  name: [{ required: true, message: '请输入租户名称', trigger: 'blur' }],
+  code: [{ required: true, message: '请输入租户编码', trigger: 'blur' }],
+  owner: [{ required: true, message: '请输入负责人', trigger: 'blur' }],
+  phone: [
+    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' },
+  ],
+  email: [{ type: 'email', message: '请输入正确的邮箱', trigger: 'blur' }],
+  status: [{ required: true, message: '请选择状态', trigger: 'change' }],
+  capacity: [
+    { required: true, message: '请输入存储容量', trigger: 'blur' },
+    { type: 'number', min: 0, message: '存储容量不能小于0', trigger: 'blur' },
+  ],
+};
+
+// 重置表单
+function resetForm() {
+  tenantForm.id = null;
+  tenantForm.name = '';
+  tenantForm.code = '';
+  tenantForm.owner = '';
+  tenantForm.phone = '';
+  tenantForm.email = '';
+  tenantForm.status = 'enabled';
+  tenantForm.capacity = 0;
+  tenantForm.remark = '';
+  tenantFormRef.value?.resetFields();
+}
+
+// 初始化表单数据
+function initFormData() {
+  if (props.tenant && props.tenant.id) {
+    tenantForm.id = props.tenant.id;
+    tenantForm.name = props.tenant.name || '';
+    tenantForm.code = props.tenant.code || '';
+    tenantForm.owner = props.tenant.owner || '';
+    tenantForm.phone = props.tenant.phone || '';
+    tenantForm.email = props.tenant.email || '';
+    tenantForm.status = props.tenant.status || 'enabled';
+    // capacity 后端返回的是 MB，直接使用
+    tenantForm.capacity = props.tenant.capacity != null ? Number(props.tenant.capacity) : 0;
+    tenantForm.remark = props.tenant.remark || '';
+  } else {
+    resetForm();
+  }
+}
+
+// 提交表单
+async function handleSubmit() {
+  if (!tenantFormRef.value) return;
+
+  await tenantFormRef.value.validate();
+  submitting.value = true;
+  try {
+    const tenantData = {
+      name: tenantForm.name,
+      code: tenantForm.code,
+      owner: tenantForm.owner,
+      phone: tenantForm.phone || '',
+      email: tenantForm.email || '',
+      status: tenantForm.status,
+      // capacity 前后端都使用 MB
+      capacity: tenantForm.capacity || 0,
+      remark: tenantForm.remark || '',
+    };
+
+    let res;
+    if (isEditing.value && tenantForm.id) {
+      res = await updateTenant(tenantForm.id, tenantData);
+    } else {
+      res = await createTenant(tenantData);
+    }
+
+    if (res.success) {
+      if (isEditing.value) {
+        ElMessage.success('租户信息已更新');
+      } else {
+        ElMessage.success('租户添加成功');
+      }
+      handleClose();
+      emit('success');
+    } else {
+      ElMessage.error(res.message || '操作失败，请重试');
+    }
+  } catch (err: any) {
+    ElMessage.error(err.message || '操作失败，请重试');
+  } finally {
+    submitting.value = false;
+  }
+}
+
+const handleClose = () => {
+  visible.value = false;
+  resetForm();
+};
+
+// 监听 tenant 变化，初始化表单
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    if (newVal) {
+      initFormData();
+    }
+  },
+  { immediate: true }
+);
+
+watch(
+  () => props.tenant,
+  () => {
+    if (visible.value) {
+      initFormData();
+    }
+  },
+  { deep: true }
+);
+</script>
+
+<style lang="less" scoped>
+.form-tip {
+  font-size: 12px;
+  color: var(--el-text-color-placeholder);
+  margin-top: 4px;
+}
+</style>
+
diff --git a/pc/src/views/system/tenant/index.vue b/pc/src/views/system/tenant/index.vue
index 2accfee..fa16da2 100644
--- a/pc/src/views/system/tenant/index.vue
+++ b/pc/src/views/system/tenant/index.vue
@@ -1,96 +1,117 @@
 <template>
-  <div class="container-box">
-    <div class="header-bar">
-      <h2>租户管理</h2>
+  <div class="tenant-management">
+    <div class="page-header">
+      <h2 class="page-title">租户管理</h2>
       <div class="header-actions">
         <el-button @click="fetchTenants" title="刷新租户列表" :loading="loading">
           <el-icon><Refresh /></el-icon>
           刷新
         </el-button>
-        <el-button type="primary" @click="showAddTenantDialog = true">
+        <el-button type="primary" @click="handleAdd">
           <el-icon><Plus /></el-icon>
           添加租户
         </el-button>
       </div>
     </div>
 
-    <el-divider></el-divider>
+    <el-divider />
 
     <!-- 加载状态 -->
-    <div v-if="loading" class="loading-state">
-      <div class="loading-spinner"></div>
-      <p>正在加载租户数据...</p>
+    <div v-if="loading && tenants.length === 0" class="loading-state">
+      <el-skeleton :rows="5" animated />
     </div>
 
     <!-- 错误状态 -->
     <div v-else-if="error" class="error-state">
       <el-alert title="加载失败" :message="error" type="error" show-icon />
-      <el-button type="primary" @click="fetchTenants">重试</el-button>
+      <el-button type="primary" @click="fetchTenants" style="margin-top: 16px">
+        重试
+      </el-button>
     </div>
 
     <!-- 租户列表 -->
     <div v-else>
-      <el-table 
-        :data="tenants" 
-        stripe 
-        style="width: 100%" 
-        v-loading="loading"
-      >
-        <el-table-column prop="id" label="ID" width="80" align="center" />
-        <el-table-column prop="name" label="租户名称" min-width="120" />
-        <el-table-column prop="code" label="租户编码" width="120" />
-        <el-table-column prop="owner" label="负责人" width="100" />
-        <el-table-column prop="created_at" label="创建时间" width="150" />
-        <el-table-column label="审核状态" width="100">
-          <template #default="{ row }">
-            <el-tag :type="getAuditStatusType(row.audit_status)">
-              {{ getAuditStatusText(row.audit_status) }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="状态" width="80">
-          <template #default="{ row }">
-            <el-tag :type="row.status === 'enabled' ? 'success' : 'info'">
-              {{ row.status === 'enabled' ? '启用' : '禁用' }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="300" align="center">
-          <template #default="{ row }">
-            <el-button size="small" @click="handleView(row)">
-              <el-icon><View /></el-icon>
-              查看
-            </el-button>
-            <el-button 
-              size="small" 
-              type="success" 
-              v-if="row.audit_status === 'pending'"
-              @click="handleAuditDialog(row)"
-            >
-              <el-icon><Check /></el-icon>
-              审核
-            </el-button>
-            <el-button 
-              size="small" 
-              @click="handleEdit(row)"
-              v-if="row.audit_status !== 'approved'"
-            >
-              <el-icon><Edit /></el-icon>
-              编辑
-            </el-button>
-            <el-button
-              size="small"
-              type="danger"
-              @click="handleDelete(row)"
-              v-if="row.audit_status !== 'approved'"
-            >
-              <el-icon><Delete /></el-icon>
-              删除
-            </el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <div class="pagination-bar">
+      <el-card shadow="never">
+        <el-table
+          :data="tenants"
+          stripe
+          style="width: 100%"
+          v-loading="loading"
+        >
+          <el-table-column prop="id" label="ID" width="80" align="center" />
+          <el-table-column prop="name" label="租户名称" min-width="120" />
+          <el-table-column prop="code" label="租户编码" width="120" />
+          <el-table-column prop="owner" label="负责人" width="100" />
+          <el-table-column label="存储容量" min-width="240">
+            <template #default="{ row }">
+              <div class="capacity-cell">
+                <div class="capacity-info">
+                  <span>{{ formatCapacity(row.capacity_used ?? 0) }}</span>
+                  <span class="capacity-divider">/</span>
+                  <span>{{ formatCapacity(row.capacity ?? 0) }}</span>
+                </div>
+                <el-progress
+                  :percentage="getCapacityPercentage(row.capacity, row.capacity_used)"
+                  :color="getCapacityColor(row.capacity, row.capacity_used)"
+                  :stroke-width="4"
+                  style="margin-top: 4px;"
+                />
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="created_at" label="创建时间" width="150" />
+          <el-table-column label="审核状态" width="100">
+            <template #default="{ row }">
+              <el-tag :type="getAuditStatusType(row.audit_status)">
+                {{ getAuditStatusText(row.audit_status) }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" width="80">
+            <template #default="{ row }">
+              <el-tag :type="row.status === 'enabled' ? 'success' : 'info'">
+                {{ row.status === 'enabled' ? '启用' : '禁用' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="300" align="center" fixed="right">
+            <template #default="{ row }">
+              <el-button size="small" @click="handleView(row)">
+                <el-icon><View /></el-icon>
+                查看
+              </el-button>
+              <el-button
+                size="small"
+                type="success"
+                v-if="row.audit_status === 'pending'"
+                @click="handleAudit(row)"
+              >
+                <el-icon><Check /></el-icon>
+                审核
+              </el-button>
+              <el-button
+                size="small"
+                @click="handleEdit(row)"
+                v-if="row.audit_status !== 'approved'"
+              >
+                <el-icon><Edit /></el-icon>
+                编辑
+              </el-button>
+              <el-button
+                size="small"
+                type="danger"
+                @click="handleDelete(row)"
+                v-if="row.audit_status !== 'approved'"
+              >
+                <el-icon><Delete /></el-icon>
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-card>
+
+      <div class="pagination-wrapper">
         <el-pagination
           background
           :current-page="page"
@@ -102,258 +123,74 @@
       </div>
     </div>
 
-    <!-- 租户详情查看弹窗 -->
-    <el-dialog
-      title="租户详情"
+    <!-- 详情组件 -->
+    <TenantDetail
       v-model="showViewDialog"
-      width="600px"
-      :close-on-click-modal="false"
-    >
-      <div class="tenant-detail">
-        <el-descriptions :column="2" border>
-          <el-descriptions-item label="租户ID">
-            {{ currentTenant.id }}
-          </el-descriptions-item>
-          <el-descriptions-item label="租户名称">
-            {{ currentTenant.name }}
-          </el-descriptions-item>
-          <el-descriptions-item label="租户编码">
-            {{ currentTenant.code }}
-          </el-descriptions-item>
-          <el-descriptions-item label="负责人">
-            {{ currentTenant.owner }}
-          </el-descriptions-item>
-          <el-descriptions-item label="联系电话">
-            {{ currentTenant.phone || '未设置' }}
-          </el-descriptions-item>
-          <el-descriptions-item label="邮箱">
-            {{ currentTenant.email || '未设置' }}
-          </el-descriptions-item>
-          <el-descriptions-item label="审核状态">
-            <el-tag :type="getAuditStatusType(currentTenant.audit_status)">
-              {{ getAuditStatusText(currentTenant.audit_status) }}
-            </el-tag>
-          </el-descriptions-item>
-          <el-descriptions-item label="状态">
-            <el-tag :type="currentTenant.status === 'enabled' ? 'success' : 'info'">
-              {{ currentTenant.status === 'enabled' ? '启用' : '禁用' }}
-            </el-tag>
-          </el-descriptions-item>
-          <el-descriptions-item label="创建时间">
-            {{ currentTenant.created_at }}
-          </el-descriptions-item>
-          <el-descriptions-item label="更新时间">
-            {{ currentTenant.updated_at || '未更新' }}
-          </el-descriptions-item>
-          <el-descriptions-item label="备注" :span="2">
-            {{ currentTenant.remark || '无' }}
-          </el-descriptions-item>
-        </el-descriptions>
-      </div>
-      <template #footer>
-        <el-button @click="showViewDialog = false">关闭</el-button>
-      </template>
-    </el-dialog>
+      :tenant-id="currentTenant?.id"
+    />
 
-    <!-- 审核弹窗 -->
-    <el-dialog
-      title="租户审核"
+    <!-- 审核组件 -->
+    <TenantAudit
       v-model="showAuditDialog"
-      width="700px"
-      :close-on-click-modal="false"
-    >
-      <div class="audit-content">
-        <!-- 租户信息展示 -->
-        <div class="tenant-info-section">
-          <h3>租户信息</h3>
-          <el-descriptions :column="2" border>
-            <el-descriptions-item label="租户ID">
-              {{ currentTenant.id }}
-            </el-descriptions-item>
-            <el-descriptions-item label="租户名称">
-              {{ currentTenant.name }}
-            </el-descriptions-item>
-            <el-descriptions-item label="租户编码">
-              {{ currentTenant.code }}
-            </el-descriptions-item>
-            <el-descriptions-item label="负责人">
-              {{ currentTenant.owner }}
-            </el-descriptions-item>
-            <el-descriptions-item label="联系电话">
-              {{ currentTenant.phone || '未设置' }}
-            </el-descriptions-item>
-            <el-descriptions-item label="邮箱">
-              {{ currentTenant.email || '未设置' }}
-            </el-descriptions-item>
-            <el-descriptions-item label="状态">
-              <el-tag :type="currentTenant.status === 'enabled' ? 'success' : 'info'">
-                {{ currentTenant.status === 'enabled' ? '启用' : '禁用' }}
-              </el-tag>
-            </el-descriptions-item>
-            <el-descriptions-item label="创建时间">
-              {{ currentTenant.created_at }}
-            </el-descriptions-item>
-            <el-descriptions-item label="备注" :span="2">
-              {{ currentTenant.remark || '无' }}
-            </el-descriptions-item>
-          </el-descriptions>
-        </div>
+      :tenant="currentTenant"
+      @success="handleAuditSuccess"
+    />
 
-        <!-- 审核表单 -->
-        <div class="audit-form-section">
-          <h3>审核信息</h3>
-          <el-form :model="auditForm" :rules="auditRules" ref="auditFormRef" label-width="100px">
-            <el-form-item label="审核结果" prop="result">
-              <el-radio-group v-model="auditForm.result">
-                <el-radio value="approved">通过</el-radio>
-                <el-radio value="rejected">拒绝</el-radio>
-              </el-radio-group>
-            </el-form-item>
-            <el-form-item label="审核意见" prop="comment">
-              <el-input 
-                v-model="auditForm.comment" 
-                type="textarea" 
-                :rows="4" 
-                placeholder="请输入审核意见"
-              />
-            </el-form-item>
-          </el-form>
-        </div>
-      </div>
-      <template #footer>
-        <el-button @click="showAuditDialog = false">取消</el-button>
-        <el-button type="primary" @click="submitAudit">提交审核</el-button>
-      </template>
-    </el-dialog>
-
-    <!-- 新增/编辑租户弹窗 -->
-    <el-dialog
-      :title="isEditing ? '编辑租户' : '添加租户'"
-      v-model="showAddTenantDialog"
-      width="450px"
-      :close-on-click-modal="false"
-    >
-      <el-form :model="tenantForm" :rules="formRules" ref="tenantFormRef" label-width="90px">
-        <el-form-item label="租户名称" prop="name">
-          <el-input v-model="tenantForm.name" />
-        </el-form-item>
-        <el-form-item label="租户编码" prop="code">
-          <el-input v-model="tenantForm.code" />
-        </el-form-item>
-        <el-form-item label="负责人" prop="owner">
-          <el-input v-model="tenantForm.owner" />
-        </el-form-item>
-        <el-form-item label="联系电话" prop="phone">
-          <el-input v-model="tenantForm.phone" />
-        </el-form-item>
-        <el-form-item label="邮箱" prop="email">
-          <el-input v-model="tenantForm.email" />
-        </el-form-item>
-        <el-form-item label="状态" prop="status">
-          <el-select v-model="tenantForm.status">
-            <el-option label="启用" value="enabled" />
-            <el-option label="禁用" value="disabled" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="tenantForm.remark" type="textarea" :rows="3" />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <el-button @click="showAddTenantDialog = false">取消</el-button>
-        <el-button type="primary" @click="submitTenantForm">
-          保存
-        </el-button>
-      </template>
-    </el-dialog>
+    <!-- 编辑组件 -->
+    <TenantEdit
+      v-model="showEditDialog"
+      :tenant="currentTenant"
+      @success="handleEditSuccess"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted } from "vue";
-import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from "element-plus";
-import { Plus, Check, View, Edit, Delete } from "@element-plus/icons-vue";
-import {
-  getAllTenants,
-  createTenant,
-  updateTenant,
-  deleteTenant,
-  auditTenant,
-  getTenantDetail,
-} from "@/api/tenant";
+import { ref, onMounted } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { Plus, Check, View, Edit, Delete, Refresh } from '@element-plus/icons-vue';
+import { getAllTenants, deleteTenant } from '@/api/tenant';
+import TenantDetail from './components/detail.vue';
+import TenantAudit from './components/audit.vue';
+import TenantEdit from './components/edit.vue';
 
 const tenants = ref<any[]>([]);
 const loading = ref(false);
-const error = ref("");
+const error = ref('');
 const page = ref(1);
 const pageSize = ref(10);
 const total = ref(0);
 
 // 弹窗状态
-const showAddTenantDialog = ref(false);
 const showViewDialog = ref(false);
 const showAuditDialog = ref(false);
-const isEditing = ref(false);
-
-// 当前查看的租户
-const currentTenant = ref<any>({});
-
-// 审核表单
-const auditForm = reactive({
-  result: '',
-  comment: ''
-});
-const auditFormRef = ref<FormInstance>();
-
-// 表单数据
-const tenantForm = reactive({
-  id: null,
-  name: "",
-  code: "",
-  owner: "",
-  phone: "",
-  email: "",
-  status: "enabled",
-  remark: ""
-});
-const tenantFormRef = ref<FormInstance>();
-
-const formRules: FormRules = {
-  name: [{ required: true, message: "请输入租户名称", trigger: "blur" }],
-  code: [{ required: true, message: "请输入租户编码", trigger: "blur" }],
-  owner: [{ required: true, message: "请输入负责人", trigger: "blur" }],
-  phone: [{ pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号", trigger: "blur" }],
-  email: [{ type: "email", message: "请输入正确的邮箱", trigger: "blur" }],
-  status: [{ required: true, message: "请选择状态", trigger: "change" }]
-};
-
-const auditRules: FormRules = {
-  result: [{ required: true, message: "请选择审核结果", trigger: "change" }],
-  comment: [{ required: true, message: "请输入审核意见", trigger: "blur" }]
-};
+const showEditDialog = ref(false);
+const currentTenant = ref<any>(null);
 
+// 获取租户列表
 async function fetchTenants() {
   loading.value = true;
-  error.value = "";
+  error.value = '';
   try {
     const res = await getAllTenants();
-    // 后端返回格式: { success: true, message: "...", data: [...] }
     if (res.success && res.data) {
       const allTenants = Array.isArray(res.data) ? res.data : [];
-      // 处理字段名映射：后端返回 create_time，前端显示 created_at
       tenants.value = allTenants.map((tenant: any) => ({
         ...tenant,
         created_at: tenant.create_time || tenant.created_at,
         updated_at: tenant.update_time || tenant.updated_at,
+        // 确保 capacity 和 capacity_used 是数字类型
+        capacity: tenant.capacity != null ? Number(tenant.capacity) : 0,
+        capacity_used: tenant.capacity_used != null ? Number(tenant.capacity_used) : 0,
       }));
       total.value = tenants.value.length;
     } else {
-      error.value = res.message || "获取租户列表失败";
+      error.value = res.message || '获取租户列表失败';
       tenants.value = [];
       total.value = 0;
     }
   } catch (err: any) {
-    error.value = err.message || "获取租户列表失败";
+    error.value = err.message || '获取租户列表失败';
     tenants.value = [];
     total.value = 0;
   } finally {
@@ -367,12 +204,15 @@ const handlePageChange = (val: number) => {
 };
 
 // 审核状态相关方法
-function getAuditStatusType(status: string): 'warning' | 'success' | 'danger' | 'info' {
-  const statusMap: Record<string, 'warning' | 'success' | 'danger' | 'info'> = {
-    pending: 'warning',
-    approved: 'success',
-    rejected: 'danger'
-  };
+function getAuditStatusType(
+  status: string
+): 'warning' | 'success' | 'danger' | 'info' {
+  const statusMap: Record<string, 'warning' | 'success' | 'danger' | 'info'> =
+    {
+      pending: 'warning',
+      approved: 'success',
+      rejected: 'danger',
+    };
   return statusMap[status] || 'info';
 }
 
@@ -380,127 +220,100 @@ function getAuditStatusText(status: string) {
   const statusMap: Record<string, string> = {
     pending: '待审核',
     approved: '已通过',
-    rejected: '已拒绝'
+    rejected: '已拒绝',
   };
   return statusMap[status] || '未知';
 }
 
-// 查看租户详情（只读）
-async function handleView(row: any) {
-  try {
-    loading.value = true;
-    const res = await getTenantDetail(row.id);
-    if (res.success && res.data) {
-      const tenant = res.data;
-      currentTenant.value = {
-        ...tenant,
-        created_at: tenant.create_time || tenant.created_at,
-        updated_at: tenant.update_time || tenant.updated_at,
-      };
-      showViewDialog.value = true;
-    } else {
-      ElMessage.error(res.message || "获取租户详情失败");
-    }
-  } catch (err: any) {
-    ElMessage.error(err.message || "获取租户详情失败");
-  } finally {
-    loading.value = false;
+// 格式化容量显示（后端返回的是 MB，直接格式化）
+function formatCapacity(mb: number | string | undefined | null): string {
+  // 处理 null/undefined/空字符串，确保是数字类型
+  if (mb === null || mb === undefined || mb === '') {
+    return '0.00 MB';
   }
+  // 转换为数字类型
+  const mbValue = typeof mb === 'string' ? parseFloat(mb) : Number(mb);
+  // 检查是否为有效数字
+  if (isNaN(mbValue) || mbValue < 0) {
+    return '0.00 MB';
+  }
+  // 后端返回的是 MB，如果小于 1024 MB，直接显示 MB
+  if (mbValue < 1024) {
+    return `${mbValue.toFixed(2)} MB`;
+  }
+  // 大于等于 1024 MB，转换为 GB 显示
+  const gb = mbValue / 1024;
+  return `${gb.toFixed(2)} GB`;
+}
+
+// 计算容量使用百分比
+function getCapacityPercentage(capacity: number | undefined, used: number | undefined): number {
+  if (!capacity || capacity === 0) return 0;
+  const usedValue = used || 0;
+  return Math.min(Math.round((usedValue / capacity) * 100), 100);
+}
+
+// 获取容量进度条颜色
+function getCapacityColor(capacity: number | undefined, used: number | undefined): string {
+  const percentage = getCapacityPercentage(capacity, used);
+  if (percentage >= 90) return '#f56c6c'; // 红色
+  if (percentage >= 70) return '#e6a23c'; // 橙色
+  return '#67c23a'; // 绿色
+}
+
+// 查看租户详情
+function handleView(row: any) {
+  currentTenant.value = row;
+  showViewDialog.value = true;
 }
 
 // 打开审核弹窗
-function handleAuditDialog(row: any) {
+function handleAudit(row: any) {
   currentTenant.value = { ...row };
-  // 重置审核表单
-  auditForm.result = '';
-  auditForm.comment = '';
   showAuditDialog.value = true;
 }
 
-// 提交审核
-async function submitAudit() {
-  await auditFormRef.value?.validate();
-  loading.value = true;
-  try {
-    const auditData = {
-      audit_status: auditForm.result,
-      audit_comment: auditForm.comment,
-      audit_by: getCurrentUser(),
-    };
-    
-    const res = await auditTenant(currentTenant.value.id, auditData);
-    if (res.success) {
-      const action = auditForm.result === 'approved' ? '通过' : '拒绝';
-      ElMessage.success(`审核${action}成功`);
-      showAuditDialog.value = false;
-      // 重新获取租户列表
-      await fetchTenants();
-    } else {
-      ElMessage.error(res.message || "审核失败，请重试");
-    }
-  } catch (e: any) {
-    ElMessage.error(e.message || "审核失败，请重试");
-  } finally {
-    loading.value = false;
-  }
+// 审核成功回调
+function handleAuditSuccess() {
+  fetchTenants();
 }
 
-// 获取当前用户
-function getCurrentUser() {
-  const userStr = localStorage.getItem("user");
-  if (userStr) {
-    try {
-      const user = JSON.parse(userStr);
-      return user.username || user.name || user.userName || "system";
-    } catch {
-      return "system";
-    }
-  }
-  return "system";
-}
-
-function resetTenantForm() {
-  tenantForm.id = null;
-  tenantForm.name = "";
-  tenantForm.code = "";
-  tenantForm.owner = "";
-  tenantForm.phone = "";
-  tenantForm.email = "";
-  tenantForm.status = "enabled";
-  tenantForm.remark = "";
+// 添加租户
+function handleAdd() {
+  currentTenant.value = null;
+  showEditDialog.value = true;
 }
 
+// 编辑租户
 function handleEdit(row: any) {
-  isEditing.value = true;
-  tenantForm.id = row.id;
-  tenantForm.name = row.name;
-  tenantForm.code = row.code;
-  tenantForm.owner = row.owner;
-  tenantForm.phone = row.phone || "";
-  tenantForm.email = row.email || "";
-  tenantForm.status = row.status;
-  tenantForm.remark = row.remark || "";
-  showAddTenantDialog.value = true;
+  currentTenant.value = { ...row };
+  showEditDialog.value = true;
 }
 
+// 编辑成功回调
+function handleEditSuccess() {
+  fetchTenants();
+}
+
+// 删除租户
 async function handleDelete(row: any) {
   try {
     await ElMessageBox.confirm(
       `确定要删除租户「${row.name}」? 删除后不可恢复。`,
-      "警告",
-      { type: "warning" }
+      '警告',
+      { type: 'warning' }
     );
     loading.value = true;
     try {
       const res = await deleteTenant(row.id);
       if (res.success) {
-        ElMessage.success("删除成功");
+        ElMessage.success('删除成功');
         await fetchTenants();
       } else {
-        ElMessage.error(res.message || "删除失败");
+        ElMessage.error(res.message || '删除失败');
       }
     } catch (err: any) {
-      ElMessage.error(err.message || "删除失败");
+      ElMessage.error(err.message || '删除失败');
     } finally {
       loading.value = false;
     }
@@ -509,138 +322,71 @@ async function handleDelete(row: any) {
   }
 }
 
-function submitTenantForm() {
-  (tenantFormRef.value as FormInstance).validate(async (valid) => {
-    if (!valid) return;
-    loading.value = true;
-    try {
-      const tenantData = {
-        name: tenantForm.name,
-        code: tenantForm.code,
-        owner: tenantForm.owner,
-        phone: tenantForm.phone || "",
-        email: tenantForm.email || "",
-        status: tenantForm.status,
-        remark: tenantForm.remark || "",
-      };
-
-      let res;
-      if (isEditing.value && tenantForm.id) {
-        // 编辑租户
-        res = await updateTenant(tenantForm.id, tenantData);
-      } else {
-        // 新增租户
-        res = await createTenant(tenantData);
-      }
-
-      if (res.success) {
-        if (isEditing.value) {
-          ElMessage.success("租户信息已更新");
-        } else {
-          ElMessage.success("租户添加成功");
-        }
-        showAddTenantDialog.value = false;
-        resetTenantForm();
-        isEditing.value = false;
-        await fetchTenants();
-      } else {
-        ElMessage.error(res.message || "操作失败，请重试");
-      }
-    } catch (err: any) {
-      ElMessage.error(err.message || "操作失败，请重试");
-    } finally {
-      loading.value = false;
-    }
-  });
-}
-
 onMounted(() => {
   fetchTenants();
 });
 </script>
 
 <style lang="less" scoped>
-.tenant-management-module {
-  padding: 20px;
-  min-height: 600px;
-  background: var(--card-bg);
-  border-radius: var(--border-radius-lg);
-  box-shadow: var(--card-shadow);
-  transition: var(--transition-base);
+.tenant-management {
+  padding: 24px;
+  min-height: 100%;
+  background-color: var(--el-bg-color-page);
 }
 
-.header-actions {
+.page-header {
   display: flex;
-  gap: 8px;
+  justify-content: space-between;
   align-items: center;
+  margin-bottom: 20px;
+
+  .page-title {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--el-text-color-primary);
+  }
+
+  .header-actions {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+  }
 }
-.loading-state, .error-state {
+
+.loading-state,
+.error-state {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 40px 0;
 }
-.loading-spinner {
-  width: 36px;
-  height: 36px;
-  border: 4px solid var(--border-color);
-  border-left-color: var(--primary-color);
-  border-radius: var(--border-radius-full);
-  animation: spin 1s linear infinite;
-  margin-bottom: 16px;
+
+.pagination-wrapper {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
 }
-@keyframes spin {
-  100% {
-    transform: rotate(360deg);
+
+:deep(.el-card) {
+  background: var(--el-bg-color);
+  border: 1px solid var(--el-border-color-lighter);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.capacity-cell {
+  .capacity-info {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 13px;
+    color: var(--el-text-color-primary);
+
+    .capacity-divider {
+      color: var(--el-text-color-placeholder);
+      margin: 0 2px;
+    }
   }
 }
-
-.tenant-detail {
-  padding: 16px 0;
-}
-
-.tenant-detail .el-descriptions {
-  margin-top: 0;
-}
-
-.tenant-detail .el-descriptions-item__label {
-  font-weight: 600;
-  color: var(--text-secondary);
-}
-
-.tenant-detail .el-descriptions-item__content {
-  color: var(--text-color);
-}
-
-.audit-content {
-  padding: 16px 0;
-}
-
-.tenant-info-section,
-.audit-form-section {
-  margin-bottom: 24px;
-}
-
-.tenant-info-section h3,
-.audit-form-section h3 {
-  margin: 0 0 16px 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--text-color);
-  border-bottom: 2px solid var(--primary-color);
-  padding-bottom: 8px;
-}
-
-.audit-form-section .el-form {
-  margin-top: 16px;
-}
-
-.audit-form-section .el-radio-group {
-  display: flex;
-  gap: 24px;
-}
-
-.audit-form-section .el-radio {
-  margin-right: 0;
-}
 </style>
+
diff --git a/server/models/tenant.go b/server/models/tenant.go
index 4fa8d34..67137e7 100644
--- a/server/models/tenant.go
+++ b/server/models/tenant.go
@@ -14,11 +14,13 @@ type Tenant struct {
 	Owner        string     `orm:"size(50)" json:"owner"`
 	Phone        string     `orm:"size(20);null" json:"phone"`
 	Email        string     `orm:"size(100);null" json:"email"`
-	Status       string     `orm:"size(20);default(enabled)" json:"status"`       // enabled, disabled
-	AuditStatus  string     `orm:"size(20);default(pending)" json:"audit_status"` // pending, approved, rejected
+	Status       string     `orm:"size(20);default(enabled)" json:"status"`
+	AuditStatus  string     `orm:"size(20);default(pending)" json:"audit_status"`
 	AuditComment string     `orm:"type(text);null" json:"audit_comment"`
 	AuditBy      string     `orm:"size(50);null" json:"audit_by"`
 	AuditTime    *time.Time `orm:"null;type(datetime)" json:"audit_time"`
+	Capacity     int        `orm:"default(0)" json:"capacity"`
+	CapacityUsed int        `orm:"default(0)" json:"capacity_used"`
 	Remark       string     `orm:"type(text);null" json:"remark"`
 	CreateTime   time.Time  `orm:"auto_now_add;type(datetime)" json:"create_time"`
 	UpdateTime   time.Time  `orm:"auto_now;type(datetime)" json:"update_time"`
@@ -69,7 +71,7 @@ func UpdateTenant(id int, data map[string]interface{}) error {
 	return err
 }
 
-// DeleteTenant 软删除租户（设置 delete_time）
+// DeleteTenant 软删除租户
 func DeleteTenant(id int) error {
 	o := orm.NewOrm()
 	deleteTime := time.Now()
@@ -77,7 +79,7 @@ func DeleteTenant(id int) error {
 	return err
 }
 
-// AuditTenant 审核租户（只能审核未删除的）
+// AuditTenant 审核租户
 func AuditTenant(id int, auditStatus, auditComment, auditBy string) error {
 	o := orm.NewOrm()
 	tenant := Tenant{}
@@ -99,7 +101,7 @@ func AuditTenant(id int, auditStatus, auditComment, auditBy string) error {
 	return err
 }
 
-// GetTenantById 根据ID获取租户详情（只返回未删除的）
+// GetTenantById 根据ID获取租户详情
 func GetTenantById(id int) (*Tenant, error) {
 	o := orm.NewOrm()
 	tenant := Tenant{}
@@ -111,7 +113,7 @@ func GetTenantById(id int) (*Tenant, error) {
 	return &tenant, err
 }
 
-// GetTenantByName 根据名称获取租户详情（只返回未删除的）
+// GetTenantByName 根据名称获取租户详情
 func GetTenantByName(name string) (*Tenant, error) {
 	o := orm.NewOrm()
 	tenant := Tenant{}