diff --git a/web/src/router/index.js b/web/src/router/index.js
index e263e74..38df679 100644
--- a/web/src/router/index.js
+++ b/web/src/router/index.js
@@ -143,12 +143,6 @@ export const constantRoutes = [
     name: '安全',
     meta: { title: '安全', icon: 'security' },
     children: [
-      {
-        path: 'attackProtection',
-        name: '攻击防护',
-        component: () => import('@/views/security/attackProtection/index'),
-        meta: { title: '攻击防护', icon: 'attackProtection' }
-      },
       {
         path: 'mfa',
         name: '多因素身份认证',
diff --git a/web/src/views/app/appDetail.vue b/web/src/views/app/appDetail.vue
index f3dc2dd..f918855 100644
--- a/web/src/views/app/appDetail.vue
+++ b/web/src/views/app/appDetail.vue
@@ -287,7 +287,7 @@
           <!-- 头部标题 -->
           <div class="section-header">
             <h3 class="section-title">管理对 API 资源的访问</h3>
-            <el-button type="primary" icon="el-icon-plus" @click="openApiAuthDialog">授权API资源</el-button>
+            <el-button size="small" type="primary" icon="el-icon-plus" @click="openApiAuthDialog">授权API资源</el-button>
           </div>
 
           <!-- 已授权的API资源列表 -->
@@ -296,11 +296,11 @@
               <span>已授权的API资源</span>
             </div>
 
-            <el-table :data="authorizedApis" style="width: 100%" v-loading="apiAuthLoading">
+            <el-table v-loading="apiAuthLoading" :data="authorizedApis" style="width: 100%">
               <el-table-column prop="apiName" label="API资源名称" min-width="150">
                 <template slot-scope="{ row }">
                   <div class="api-name-cell">
-                    <i class="el-icon-s-operation" style="margin-right: 8px; color: #409eff;"></i>
+                    <i class="el-icon-s-operation" style="margin-right: 8px; color: #409eff;" />
                     <span>{{ row.apiName }}</span>
                   </div>
                 </template>
@@ -366,7 +366,7 @@
           <el-card class="config-card role-card" shadow="never">
             <div slot="header">
               <span>分配的角色</span>
-              <el-button type="primary" size="small" icon="el-icon-plus" @click="openRoleDialog" style="float: right;">添加角色</el-button>
+              <el-button type="primary" size="small" icon="el-icon-plus" style="float: right;" @click="openRoleDialog">添加角色</el-button>
             </div>
 
             <el-table :data="assignedRoles" style="width: 100%">
@@ -407,7 +407,7 @@
 
     <!-- API授权添加/编辑弹窗 -->
     <el-dialog :title="isEditApiAuth ? '编辑API授权' : '授权API资源'" :visible.sync="apiAuthDialogVisible" width="600px">
-      <el-form :model="apiAuthForm" label-width="120px" :rules="apiAuthRules" ref="apiAuthForm">
+      <el-form ref="apiAuthForm" :model="apiAuthForm" label-width="120px" :rules="apiAuthRules">
         <el-form-item label="API资源" prop="apiId">
           <el-select v-model="apiAuthForm.apiId" placeholder="选择API资源" style="width: 100%" :disabled="isEditApiAuth">
             <el-option
@@ -445,7 +445,7 @@
 
     <!-- 添加角色弹窗 -->
     <el-dialog title="添加角色" :visible.sync="roleDialogVisible" width="500px">
-      <el-form :model="roleForm" label-width="100px" :rules="roleRules" ref="roleForm">
+      <el-form ref="roleForm" :model="roleForm" label-width="100px" :rules="roleRules">
         <el-form-item label="选择角色" prop="roleId">
           <el-select v-model="roleForm.roleId" placeholder="选择要分配的角色" style="width: 100%">
             <el-option
diff --git a/web/src/views/app/index.vue b/web/src/views/app/index.vue
index 3f106b9..610a0bc 100644
--- a/web/src/views/app/index.vue
+++ b/web/src/views/app/index.vue
@@ -65,7 +65,6 @@
 
         <el-table-column label="操作" width="200">
           <template slot-scope="{ row }">
-            <el-button size="mini" type="text" @click="detailApp(row)">详情</el-button>
             <el-button size="mini" type="text" @click="editApp(row)">编辑</el-button>
             <el-button size="mini" type="text" @click="enableApp(row)">禁用</el-button>
             <el-button size="mini" type="text" class="danger" @click="deleteApp(row)">删除</el-button>
@@ -128,7 +127,7 @@ export default {
       this.$router.push('/app/create')
     },
 
-    detailApp(appId) {
+    editApp(appId) {
       this.$router.push({
         name: 'AppDetail',
         params: { id: appId },
@@ -136,10 +135,6 @@ export default {
       })
     },
 
-    editApp(app) {
-      this.$message.info('打开编辑应用：' + app.name)
-    },
-
     enableApp(app) {
       this.$confirm(`确定禁用应用？`, '提示', { type: 'warning' })
         .then(() => this.$message.success('已禁用'))
diff --git a/web/src/views/auditLog/index.vue b/web/src/views/auditLog/index.vue
index cbe8a39..5249925 100644
--- a/web/src/views/auditLog/index.vue
+++ b/web/src/views/auditLog/index.vue
@@ -1,217 +1,1506 @@
 <template>
   <div class="audit-page">
+    <!-- 页面标题和统计 -->
+    <div class="page-header-section">
+      <div class="page-title-area">
+        <div>
+          <h2 class="page-title">审计日志</h2>
+          <p class="page-desc">追踪和审查系统中的所有操作行为，确保合规与安全</p>
+        </div>
+      </div>
 
-    <!-- 搜索卡片 -->
-    <el-card shadow="never" class="search-card">
-      <el-form :inline="true" :model="searchForm" size="small" label-width="80px">
-
-        <el-form-item label="操作用户">
-          <el-input v-model="searchForm.operator" clearable placeholder="请输入用户名称"/>
-        </el-form-item>
+      <!-- 统计卡片 -->
+      <el-row :gutter="16" class="stats-row">
+        <el-col :span="4">
+          <div class="stat-card">
+            <div class="stat-icon total">
+              <i class="el-icon-document-checked" />
+            </div>
+            <div class="stat-content">
+              <div class="stat-value">{{ stats.total }}</div>
+              <div class="stat-label">总操作数</div>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="4">
+          <div class="stat-card">
+            <div class="stat-icon success">
+              <i class="el-icon-circle-check" />
+            </div>
+            <div class="stat-content">
+              <div class="stat-value">{{ stats.success }}</div>
+              <div class="stat-label">成功操作</div>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="4">
+          <div class="stat-card">
+            <div class="stat-icon failed">
+              <i class="el-icon-circle-close" />
+            </div>
+            <div class="stat-content">
+              <div class="stat-value">{{ stats.failed }}</div>
+              <div class="stat-label">失败操作</div>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="4">
+          <div class="stat-card">
+            <div class="stat-icon warning">
+              <i class="el-icon-warning" />
+            </div>
+            <div class="stat-content">
+              <div class="stat-value">{{ stats.risks }}</div>
+              <div class="stat-label">风险事件</div>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="4">
+          <div class="stat-card">
+            <div class="stat-icon login">
+              <i class="el-icon-user" />
+            </div>
+            <div class="stat-content">
+              <div class="stat-value">{{ stats.logins }}</div>
+              <div class="stat-label">今日登录</div>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="4">
+          <div class="stat-card">
+            <div class="stat-icon users">
+              <i class="el-icon-s-custom" />
+            </div>
+            <div class="stat-content">
+              <div class="stat-value">{{ stats.activeUsers }}</div>
+              <div class="stat-label">活跃用户</div>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
 
-        <el-form-item label="资源类型">
-          <el-select v-model="searchForm.resource" clearable placeholder="请选择">
-            <el-option label="用户" value="user"/>
-            <el-option label="应用" value="app"/>
-            <el-option label="策略" value="policy"/>
-          </el-select>
-        </el-form-item>
+    <!-- 搜索和筛选 -->
+    <el-card shadow="never" class="filter-card">
+      <div slot="header" class="filter-header">
+        <span><i class="el-icon-search" /> 高级筛选</span>
+        <el-button type="text" @click="showMoreFilters = !showMoreFilters">
+          {{ showMoreFilters ? '收起' : '展开' }}<i :class="showMoreFilters ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" />
+        </el-button>
+      </div>
 
-        <el-form-item label="操作类型">
-          <el-select v-model="searchForm.action" clearable placeholder="请选择">
-            <el-option label="创建" value="create"/>
-            <el-option label="修改" value="update"/>
-            <el-option label="删除" value="delete"/>
-            <el-option label="登录" value="login"/>
-          </el-select>
+      <el-form :inline="true" :model="searchForm" size="small" label-width="90px">
+        <el-form-item label="关键词">
+          <el-input
+            v-model="searchForm.keyword"
+            placeholder="用户/资源/IP"
+            style="width: 200px"
+            clearable
+            prefix-icon="el-icon-search"
+          />
         </el-form-item>
 
         <el-form-item label="时间范围">
+          <el-radio-group v-model="timeRangeType" size="small" @change="handleTimeRangeChange">
+            <el-radio-button label="today">今日</el-radio-button>
+            <el-radio-button label="week">本周</el-radio-button>
+            <el-radio-button label="month">本月</el-radio-button>
+            <el-radio-button label="custom">自定义</el-radio-button>
+          </el-radio-group>
           <el-date-picker
+            v-if="timeRangeType === 'custom'"
             v-model="searchForm.timeRange"
             type="datetimerange"
             value-format="yyyy-MM-dd HH:mm:ss"
             range-separator="至"
             start-placeholder="开始时间"
             end-placeholder="结束时间"
+            style="width: 340px; margin-left: 10px;"
           />
         </el-form-item>
 
         <el-form-item>
           <el-button type="primary" @click="search">查询</el-button>
           <el-button @click="reset">重置</el-button>
-          <el-button type="success" plain @click="exportData">导出日志</el-button>
         </el-form-item>
       </el-form>
+
+      <!-- 更多筛选条件 -->
+      <el-collapse-transition>
+        <div v-show="showMoreFilters" class="more-filters">
+          <el-form :inline="true" :model="searchForm" size="small" label-width="90px">
+            <el-form-item label="操作类型">
+              <el-select v-model="searchForm.action" clearable placeholder="请选择" style="width: 140px">
+                <el-option v-for="item in actionTypes" :key="item.value" :label="item.label" :value="item.value">
+                  <span style="display: inline-block; width: 100%;">
+                    <i :class="item.icon" :style="{ color: item.color }" /> {{ item.label }}
+                  </span>
+                </el-option>
+              </el-select>
+            </el-form-item>
+
+            <el-form-item label="资源类型">
+              <el-select v-model="searchForm.resource" clearable placeholder="请选择" style="width: 140px">
+                <el-option v-for="item in resourceTypes" :key="item.value" :label="item.label" :value="item.value">
+                  <span style="display: inline-block; width: 100%;">
+                    <i :class="item.icon" :style="{ color: item.color }" /> {{ item.label }}
+                  </span>
+                </el-option>
+              </el-select>
+            </el-form-item>
+
+            <el-form-item label="操作结果">
+              <el-select v-model="searchForm.result" clearable placeholder="请选择" style="width: 140px">
+                <el-option label="成功" value="success">
+                  <el-tag size="mini" type="success">成功</el-tag>
+                </el-option>
+                <el-option label="失败" value="failed">
+                  <el-tag size="mini" type="danger">失败</el-tag>
+                </el-option>
+                <el-option label="警告" value="warning">
+                  <el-tag size="mini" type="warning">警告</el-tag>
+                </el-option>
+              </el-select>
+            </el-form-item>
+
+            <el-form-item label="风险等级">
+              <el-select v-model="searchForm.riskLevel" clearable placeholder="请选择" style="width: 140px">
+                <el-option label="高风险" value="high">
+                  <el-tag size="mini" effect="dark" type="danger">高风险</el-tag>
+                </el-option>
+                <el-option label="中风险" value="medium">
+                  <el-tag size="mini" effect="dark" type="warning">中风险</el-tag>
+                </el-option>
+                <el-option label="低风险" value="low">
+                  <el-tag size="mini" effect="dark" type="success">低风险</el-tag>
+                </el-option>
+              </el-select>
+            </el-form-item>
+
+            <el-form-item label="客户端">
+              <el-select v-model="searchForm.clientType" clearable placeholder="请选择" style="width: 140px">
+                <el-option label="Web" value="web" />
+                <el-option label="移动应用" value="mobile" />
+                <el-option label="API" value="api" />
+                <el-option label="CLI" value="cli" />
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-collapse-transition>
+
+      <!-- 快速筛选标签 -->
+      <div class="quick-filters">
+        <span class="quick-label">快速筛选:</span>
+        <el-tag
+          v-for="filter in quickFilters"
+          :key="filter.value"
+          :class="{ active: currentQuickFilter === filter.value }"
+          size="small"
+          effect="plain"
+          @click="applyQuickFilter(filter.value)"
+        >
+          {{ filter.label }}
+        </el-tag>
+      </div>
     </el-card>
 
-    <!-- 表格 -->
-    <el-card shadow="never">
-      <el-table :data="tableData" border stripe>
-
-        <el-table-column prop="id" label="ID" width="80"/>
-        <el-table-column prop="operator" label="操作用户" width="120"/>
-        <el-table-column prop="resource" label="资源类型" width="120"/>
-        <el-table-column prop="action" label="操作类型" width="120"/>
-
-        <el-table-column prop="ip" label="IP地址" width="140" />
-
-        <el-table-column prop="result" label="执行结果" width="100">
-          <template slot-scope="{ row }">
-            <el-tag v-if="row.result === 'success'" type="success">成功</el-tag>
-            <el-tag v-else type="danger">失败</el-tag>
-          </template>
-        </el-table-column>
-
-        <el-table-column prop="time" label="操作时间" width="160"/>
-
-        <el-table-column label="详情" width="100">
-          <template slot-scope="{ row }">
-            <el-button size="mini" type="text" @click="showDetail(row)">查看</el-button>
-          </template>
-        </el-table-column>
-
-      </el-table>
-
-      <!-- 分页 -->
-      <div class="pagination">
-        <el-pagination
-          background
-          layout="prev, pager, next, sizes, total"
-          :page-sizes="[10, 20, 50]"
-          :page-size="pageSize"
-          :current-page="currentPage"
-          :total="total"
-          @size-change="onSizeChange"
-          @current-change="onPageChange"
-        />
+    <!-- 日志列表 -->
+    <el-card shadow="never" class="log-card">
+      <div slot="header" class="log-header">
+        <div class="header-left">
+          <span>操作日志</span>
+          <el-badge :value="total" class="count-badge" />
+        </div>
+        <div class="header-right">
+          <el-button type="primary" size="mini" icon="el-icon-download" @click="exportDialogVisible = true">导出日志</el-button>
+          <el-divider direction="vertical" />
+          <el-radio-group v-model="viewMode" size="mini">
+            <el-radio-button label="list"><i class="el-icon-tickets" /> 列表</el-radio-button>
+            <el-radio-button label="timeline"><i class="el-icon-time" /> 时间轴</el-radio-button>
+          </el-radio-group>
+          <el-dropdown trigger="click" style="margin-left: 10px;">
+            <el-button size="mini" icon="el-icon-setting">列设置</el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item v-for="col in columnOptions" :key="col.prop">
+                <el-checkbox v-model="col.visible">{{ col.label }}</el-checkbox>
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
+      </div>
+
+      <!-- 列表视图 -->
+      <div v-if="viewMode === 'list'" v-loading="loading">
+        <el-table
+          :data="tableData"
+          border
+          stripe
+          size="small"
+          highlight-current-row
+          @row-click="handleRowClick"
+        >
+          <el-table-column type="index" width="50" align="center" />
+
+          <el-table-column label="事件" min-width="280" show-overflow-tooltip>
+            <template slot-scope="{ row }">
+              <div class="event-cell">
+                <div class="event-icon" :style="{ background: getActionColor(row.action) + '20' }">
+                  <i :class="getActionIcon(row.action)" :style="{ color: getActionColor(row.action) }" />
+                </div>
+                <div class="event-content">
+                  <div class="event-title">
+                    <el-link type="primary" @click.stop="showDetail(row)">{{ row.title }}</el-link>
+                    <el-tag v-if="row.riskLevel !== 'low'" size="mini" :type="getRiskType(row.riskLevel)" effect="dark" class="risk-tag">
+                      {{ row.riskLevel === 'high' ? '高风险' : '中风险' }}
+                    </el-tag>
+                  </div>
+                  <div class="event-desc">{{ row.description }}</div>
+                </div>
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column v-if="columnOptions[0].visible" label="操作用户" width="150">
+            <template slot-scope="{ row }">
+              <div class="user-cell">
+                <el-avatar size="small" :icon="row.userAvatar || 'el-icon-user-solid'" class="user-avatar" />
+                <div class="user-info">
+                  <div class="user-name">{{ row.operator }}</div>
+                  <div v-if="row.department" class="user-dept">{{ row.department }}</div>
+                </div>
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column v-if="columnOptions[1].visible" label="资源类型" width="120">
+            <template slot-scope="{ row }">
+              <span><i :class="getResourceIcon(row.resource)" class="resource-icon" /> {{ row.resourceLabel }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column v-if="columnOptions[2].visible" label="操作结果" width="100" align="center">
+            <template slot-scope="{ row }">
+              <el-tag :type="getResultType(row.result)" size="mini" effect="dark">
+                {{ row.result === 'success' ? '成功' : row.result === 'warning' ? '警告' : '失败' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+
+          <el-table-column v-if="columnOptions[3].visible" label="IP地址/位置" width="180">
+            <template slot-scope="{ row }">
+              <div class="ip-cell">
+                <span class="ip-address">{{ row.ip }}</span>
+                <span v-if="row.location" class="ip-location"><i class="el-icon-location" /> {{ row.location }}</span>
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column v-if="columnOptions[4].visible" label="客户端" width="140">
+            <template slot-scope="{ row }">
+              <div class="client-cell">
+                <i :class="getClientIcon(row.clientType)" />
+                <span>{{ row.clientInfo }}</span>
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column v-if="columnOptions[5].visible" label="操作时间" width="160">
+            <template slot-scope="{ row }">
+              <span :title="row.time">{{ formatTime(row.time) }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="操作" width="120" align="center" fixed="right">
+            <template slot-scope="{ row }">
+              <el-button size="mini" type="text" @click.stop="showDetail(row)">详情</el-button>
+              <el-button v-if="row.result === 'failed'" size="mini" type="text" @click.stop="showError(row)">查看错误</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <!-- 分页 -->
+        <div class="pagination">
+          <el-pagination
+            background
+            layout="total, sizes, prev, pager, next, jumper"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="pageSize"
+            :current-page="currentPage"
+            :total="total"
+            @size-change="onSizeChange"
+            @current-change="onPageChange"
+          />
+        </div>
+      </div>
+
+      <!-- 时间轴视图 -->
+      <div v-else v-loading="loading" class="timeline-view">
+        <el-timeline>
+          <el-timeline-item
+            v-for="item in tableData"
+            :key="item.id"
+            :type="getTimelineType(item)"
+            :color="getTimelineColor(item)"
+            :timestamp="formatFullTime(item.time)"
+          >
+            <div class="timeline-card" @click="showDetail(item)">
+              <div class="timeline-header">
+                <div class="timeline-title">{{ item.title }}</div>
+                <el-tag :type="getResultType(item.result)" size="mini" effect="dark">
+                  {{ item.result === 'success' ? '成功' : '失败' }}
+                </el-tag>
+              </div>
+              <div class="timeline-content">
+                <div class="timeline-info">
+                  <span><i class="el-icon-user" /> {{ item.operator }}</span>
+                  <span><i class="el-icon-monitor" /> {{ item.ip }}</span>
+                </div>
+                <div class="timeline-desc">{{ item.description }}</div>
+              </div>
+            </div>
+          </el-timeline-item>
+        </el-timeline>
+
+        <!-- 加载更多 -->
+        <div v-if="tableData.length < total" class="load-more">
+          <el-button type="text" :loading="loadingMore" @click="loadMore">加载更多</el-button>
+        </div>
       </div>
     </el-card>
 
-    <!-- 日志详情弹窗 -->
-    <el-dialog title="操作详情" :visible.sync="detailVisible" width="600px">
-      <el-descriptions :column="1" border>
-        <el-descriptions-item label="操作用户">{{ detail.operator }}</el-descriptions-item>
-        <el-descriptions-item label="资源类型">{{ detail.resource }}</el-descriptions-item>
-        <el-descriptions-item label="操作类型">{{ detail.action }}</el-descriptions-item>
-        <el-descriptions-item label="IP 地址">{{ detail.ip }}</el-descriptions-item>
-        <el-descriptions-item label="操作时间">{{ detail.time }}</el-descriptions-item>
-        <el-descriptions-item label="结果">
-          <el-tag :type="detail.result === 'success' ? 'success':'danger'">
-            {{ detail.result === 'success' ? '成功' : '失败' }}
-          </el-tag>
-        </el-descriptions-item>
-        <el-descriptions-item label="详情内容">
-          <pre class="detail-json">{{ detail.data }}</pre>
-        </el-descriptions-item>
-      </el-descriptions>
+    <!-- 日志详情抽屉 -->
+    <el-drawer
+      :visible.sync="detailDrawerVisible"
+      :size="600"
+      :with-header="false"
+    >
+      <div v-if="currentDetail" class="detail-drawer">
+        <div class="detail-header">
+          <div class="detail-title">
+            <i :class="getActionIcon(currentDetail.action)" :style="{ color: getActionColor(currentDetail.action) }" />
+            <span>{{ currentDetail.title }}</span>
+          </div>
+          <el-button icon="el-icon-close" circle size="small" @click="detailDrawerVisible = false" />
+        </div>
 
+        <div class="detail-body">
+          <!-- 基本信息 -->
+          <div class="detail-section">
+            <div class="section-title">基本信息</div>
+            <el-descriptions :column="1" size="small" border>
+              <el-descriptions-item label="操作ID">{{ currentDetail.id }}</el-descriptions-item>
+              <el-descriptions-item label="操作结果">
+                <el-tag :type="getResultType(currentDetail.result)" size="mini" effect="dark">
+                  {{ currentDetail.result === 'success' ? '成功' : '失败' }}
+                </el-tag>
+                <span v-if="currentDetail.result === 'failed'" class="error-reason">
+                  {{ currentDetail.errorMessage }}
+                </span>
+              </el-descriptions-item>
+              <el-descriptions-item label="风险等级">
+                <el-tag :type="getRiskType(currentDetail.riskLevel)" size="mini" effect="dark">
+                  {{ currentDetail.riskLevel === 'high' ? '高风险' : currentDetail.riskLevel === 'medium' ? '中风险' : '低风险' }}
+                </el-tag>
+              </el-descriptions-item>
+              <el-descriptions-item label="操作时间">{{ formatFullTime(currentDetail.time) }}</el-descriptions-item>
+            </el-descriptions>
+          </div>
+
+          <!-- 操作者信息 -->
+          <div class="detail-section">
+            <div class="section-title">操作者信息</div>
+            <div class="user-detail">
+              <el-avatar size="large" :icon="currentDetail.userAvatar || 'el-icon-user-solid'" />
+              <div class="user-detail-info">
+                <div class="detail-user-name">{{ currentDetail.operator }}</div>
+                <div class="detail-user-meta">
+                  <span v-if="currentDetail.department"><i class="el-icon-office-building" /> {{ currentDetail.department }}</span>
+                  <span v-if="currentDetail.userRole"><i class="el-icon-s-custom" /> {{ currentDetail.userRole }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 来源信息 -->
+          <div class="detail-section">
+            <div class="section-title">来源信息</div>
+            <el-descriptions :column="1" size="small" border>
+              <el-descriptions-item label="IP地址">
+                {{ currentDetail.ip }}
+                <el-button type="text" size="mini" @click="blockIP(currentDetail.ip)">加入黑名单</el-button>
+              </el-descriptions-item>
+              <el-descriptions-item v-if="currentDetail.location" label="地理位置">
+                <i class="el-icon-location" /> {{ currentDetail.location }}
+              </el-descriptions-item>
+              <el-descriptions-item label="客户端类型">{{ currentDetail.clientType }}</el-descriptions-item>
+              <el-descriptions-item label="浏览器/设备">{{ currentDetail.clientInfo }}</el-descriptions-item>
+              <el-descriptions-item v-if="currentDetail.userAgent" label="User Agent">
+                <el-tooltip :content="currentDetail.userAgent" placement="top">
+                  <span class="user-agent-text">{{ currentDetail.userAgent }}</span>
+                </el-tooltip>
+              </el-descriptions-item>
+            </el-descriptions>
+          </div>
+
+          <!-- 变更详情 -->
+          <div v-if="currentDetail.changes && currentDetail.changes.length > 0" class="detail-section">
+            <div class="section-title">变更详情</div>
+            <div class="changes-list">
+              <div v-for="(change, index) in currentDetail.changes" :key="index" class="change-item">
+                <div class="change-field">{{ change.field }}</div>
+                <div class="change-values">
+                  <div v-if="change.oldValue !== undefined" class="change-old">
+                    <span class="change-label">原值:</span>
+                    <span class="value old">{{ change.oldValue || '(空)' }}</span>
+                  </div>
+                  <div class="change-arrow"><i class="el-icon-arrow-right" /></div>
+                  <div class="change-new">
+                    <span class="change-label">新值:</span>
+                    <span class="value new">{{ change.newValue || '(空)' }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 原始数据 -->
+          <div v-if="currentDetail.rawData" class="detail-section">
+            <div class="section-title">
+              原始数据
+              <el-button type="text" size="mini" @click="copyRawData">复制</el-button>
+            </div>
+            <pre class="raw-json">{{ formatJson(currentDetail.rawData) }}</pre>
+          </div>
+        </div>
+
+        <div class="detail-footer">
+          <el-button @click="detailDrawerVisible = false">关闭</el-button>
+          <el-button type="primary" icon="el-icon-document-copy" @click="exportSingle(currentDetail)">导出此记录</el-button>
+        </div>
+      </div>
+    </el-drawer>
+
+    <!-- 导出对话框 -->
+    <el-dialog title="导出审计日志" :visible.sync="exportDialogVisible" width="500px">
+      <el-form :model="exportForm" label-width="100px">
+        <el-form-item label="时间范围">
+          <el-date-picker
+            v-model="exportForm.timeRange"
+            type="datetimerange"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            range-separator="至"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            style="width: 100%"
+          />
+        </el-form-item>
+        <el-form-item label="操作类型">
+          <el-select v-model="exportForm.action" multiple placeholder="全部类型" style="width: 100%">
+            <el-option v-for="item in actionTypes" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="资源类型">
+          <el-select v-model="exportForm.resource" multiple placeholder="全部资源" style="width: 100%">
+            <el-option v-for="item in resourceTypes" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="导出格式">
+          <el-radio-group v-model="exportForm.format">
+            <el-radio label="excel">Excel (.xlsx)</el-radio>
+            <el-radio label="csv">CSV (.csv)</el-radio>
+            <el-radio label="json">JSON (.json)</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
       <div slot="footer">
-        <el-button @click="detailVisible = false">关闭</el-button>
+        <el-button @click="exportDialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="exporting" @click="confirmExport">确认导出</el-button>
       </div>
     </el-dialog>
 
+    <!-- 错误详情对话框 -->
+    <el-dialog title="错误详情" :visible.sync="errorDialogVisible" width="500px">
+      <div v-if="currentError" class="error-detail">
+        <div class="error-icon">
+          <i class="el-icon-circle-close" />
+        </div>
+        <div class="error-message">{{ currentError.errorMessage }}</div>
+        <div v-if="currentError.errorStack" class="error-stack">
+          <pre>{{ currentError.errorStack }}</pre>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 export default {
-  name: "AuditLog",
-
+  name: 'AuditLog',
   data() {
     return {
+      loading: false,
+      loadingMore: false,
+
+      // 统计数据
+      stats: {
+        total: 12547,
+        success: 12389,
+        failed: 158,
+        risks: 23,
+        logins: 892,
+        activeUsers: 156
+      },
+
+      // 搜索表单
       searchForm: {
-        operator: "",
-        resource: "",
-        action: "",
-        timeRange: null
+        keyword: '',
+        timeRange: null,
+        action: '',
+        resource: '',
+        result: '',
+        riskLevel: '',
+        clientType: ''
       },
+      timeRangeType: 'today',
+      showMoreFilters: false,
+      currentQuickFilter: '',
 
-      tableData: [
-        {
-          id: 1,
-          operator: "admin",
-          resource: "用户",
-          action: "创建",
-          result: "success",
-          ip: "10.1.1.12",
-          time: "2025-01-10 10:20:00",
-          data: '{ "username": "test", "role": "user" }'
-        },
-        {
-          id: 2,
-          operator: "alice",
-          resource: "应用",
-          action: "删除",
-          result: "failed",
-          ip: "192.168.1.88",
-          time: "2025-01-10 11:00:00",
-          data: '{ "appId": 1234, "reason": "permission denied" }'
-        }
+      // 视图模式
+      viewMode: 'list',
+
+      // 列选项
+      columnOptions: [
+        { prop: 'operator', label: '操作用户', visible: true },
+        { prop: 'resource', label: '资源类型', visible: true },
+        { prop: 'result', label: '操作结果', visible: true },
+        { prop: 'ip', label: 'IP地址', visible: true },
+        { prop: 'client', label: '客户端', visible: true },
+        { prop: 'time', label: '操作时间', visible: true }
       ],
 
+      // 快速筛选
+      quickFilters: [
+        { label: '全部', value: '' },
+        { label: '登录相关', value: 'login' },
+        { label: '用户管理', value: 'user' },
+        { label: '权限变更', value: 'permission' },
+        { label: '失败操作', value: 'failed' },
+        { label: '高风险', value: 'risk' }
+      ],
+
+      // 操作类型
+      actionTypes: [
+        { value: 'create', label: '创建', icon: 'el-icon-plus', color: '#67C23A' },
+        { value: 'update', label: '修改', icon: 'el-icon-edit', color: '#409EFF' },
+        { value: 'delete', label: '删除', icon: 'el-icon-delete', color: '#F56C6C' },
+        { value: 'login', label: '登录', icon: 'el-icon-user', color: '#909399' },
+        { value: 'logout', label: '登出', icon: 'el-icon-switch-button', color: '#909399' },
+        { value: 'view', label: '查看', icon: 'el-icon-view', color: '#909399' },
+        { value: 'export', label: '导出', icon: 'el-icon-download', color: '#E6A23C' },
+        { value: 'import', label: '导入', icon: 'el-icon-upload2', color: '#E6A23C' },
+        { value: 'enable', label: '启用', icon: 'el-icon-circle-check', color: '#67C23A' },
+        { value: 'disable', label: '禁用', icon: 'el-icon-circle-close', color: '#F56C6C' },
+        { value: 'assign', label: '分配', icon: 'el-icon-s-check', color: '#409EFF' },
+        { value: 'revoke', label: '回收', icon: 'el-icon-remove', color: '#F56C6C' }
+      ],
+
+      // 资源类型
+      resourceTypes: [
+        { value: 'user', label: '用户', icon: 'el-icon-user', color: '#409EFF' },
+        { value: 'userGroup', label: '用户组', icon: 'el-icon-s-custom', color: '#409EFF' },
+        { value: 'role', label: '角色', icon: 'el-icon-medal', color: '#E6A23C' },
+        { value: 'app', label: '应用', icon: 'el-icon-s-platform', color: '#67C23A' },
+        { value: 'permission', label: '权限', icon: 'el-icon-key', color: '#F56C6C' },
+        { value: 'policy', label: '策略', icon: 'el-icon-document', color: '#909399' },
+        { value: 'identitySource', label: '身份源', icon: 'el-icon-share', color: '#409EFF' },
+        { value: 'apiResource', label: 'API资源', icon: 'el-icon-cpu', color: '#67C23A' },
+        { value: 'config', label: '配置', icon: 'el-icon-setting', color: '#909399' }
+      ],
+
+      // 表格数据
+      tableData: [],
       currentPage: 1,
-      pageSize: 10,
-      total: 20,
+      pageSize: 20,
+      total: 156,
+
+      // 详情抽屉
+      detailDrawerVisible: false,
+      currentDetail: null,
+
+      // 导出对话框
+      exportDialogVisible: false,
+      exportForm: {
+        timeRange: [],
+        action: [],
+        resource: [],
+        format: 'excel'
+      },
+      exporting: false,
+
+      // 错误对话框
+      errorDialogVisible: false,
+      currentError: null
+    }
+  },
 
-      detailVisible: false,
-      detail: {}
-    };
+  created() {
+    this.handleTimeRangeChange('today')
+    this.loadData()
   },
 
   methods: {
+    // 加载数据
+    loadData() {
+      this.loading = true
+      // 模拟API调用
+      setTimeout(() => {
+        this.tableData = this.generateMockData()
+        this.loading = false
+      }, 500)
+    },
+
+    generateMockData() {
+      const actions = ['create', 'update', 'delete', 'login', 'logout', 'view', 'assign']
+      const resources = ['user', 'userGroup', 'role', 'app', 'permission', 'policy']
+      const users = ['admin', 'zhangsan', 'lisi', 'wangwu', 'zhaoliu']
+      const ips = ['192.168.1.100', '10.0.0.50', '172.16.0.25', '192.168.2.200']
+
+      return Array.from({ length: 20 }, (_, i) => {
+        const action = actions[Math.floor(Math.random() * actions.length)]
+        const resource = resources[Math.floor(Math.random() * resources.length)]
+        const resourceLabel = this.resourceTypes.find(r => r.value === resource)?.label || resource
+        const result = Math.random() > 0.9 ? 'failed' : Math.random() > 0.95 ? 'warning' : 'success'
+        const riskLevel = result === 'failed' && Math.random() > 0.5 ? 'high' : Math.random() > 0.9 ? 'medium' : 'low'
+
+        return {
+          id: `AUD${Date.now()}${i}`,
+          title: `${this.getActionLabel(action)}${resourceLabel}`,
+          description: `${this.getActionLabel(action)}了${resourceLabel}: ${this.getRandomResourceName(resource)}`,
+          operator: users[Math.floor(Math.random() * users.length)],
+          department: '技术部',
+          userRole: '管理员',
+          resource,
+          resourceLabel,
+          action,
+          result,
+          riskLevel,
+          ip: ips[Math.floor(Math.random() * ips.length)],
+          location: '北京市',
+          clientType: ['web', 'mobile', 'api'][Math.floor(Math.random() * 3)],
+          clientInfo: 'Chrome 120.0 / Windows 10',
+          time: this.getRandomTime(),
+          userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
+          errorMessage: result === 'failed' ? '权限不足，无法执行此操作' : undefined,
+          changes: this.generateChanges(action),
+          rawData: { id: i, action, resource, timestamp: Date.now() }
+        }
+      })
+    },
+
+    getRandomResourceName(resource) {
+      const names = {
+        user: ['张三', '李四', '王五', '赵六'],
+        userGroup: ['开发组', '测试组', '产品组'],
+        role: ['管理员', '普通用户', '审计员'],
+        app: ['管理系统', '门户系统', 'API网关'],
+        permission: ['用户读取', '用户写入', '系统配置'],
+        policy: ['密码策略', '登录策略', '访问策略']
+      }
+      const list = names[resource] || ['资源']
+      return list[Math.floor(Math.random() * list.length)]
+    },
+
+    getRandomTime() {
+      const now = new Date()
+      const offset = Math.floor(Math.random() * 86400000)
+      return new Date(now - offset).toISOString()
+    },
+
+    generateChanges(action) {
+      if (action !== 'update') return []
+      return [
+        { field: '状态', oldValue: '启用', newValue: '禁用' },
+        { field: '角色', oldValue: '普通用户', newValue: '管理员' }
+      ]
+    },
+
+    // 时间范围处理
+    handleTimeRangeChange(type) {
+      const now = new Date()
+      const end = new Date(now)
+      const start = new Date(now)
+
+      switch (type) {
+        case 'today':
+          start.setHours(0, 0, 0, 0)
+          break
+        case 'week':
+          start.setDate(now.getDate() - 7)
+          break
+        case 'month':
+          start.setMonth(now.getMonth() - 1)
+          break
+        case 'custom':
+          return
+      }
+
+      this.searchForm.timeRange = [
+        this.formatDateTime(start),
+        this.formatDateTime(end)
+      ]
+    },
+
+    formatDateTime(date) {
+      const pad = n => n.toString().padStart(2, '0')
+      return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
+    },
+
+    // 搜索和筛选
     search() {
-      this.$message.success("筛选条件已应用（示例）");
+      this.currentPage = 1
+      this.loadData()
     },
 
     reset() {
       this.searchForm = {
-        operator: "",
-        resource: "",
-        action: "",
-        timeRange: null
-      };
+        keyword: '',
+        timeRange: null,
+        action: '',
+        resource: '',
+        result: '',
+        riskLevel: '',
+        clientType: ''
+      }
+      this.timeRangeType = 'today'
+      this.currentQuickFilter = ''
+      this.handleTimeRangeChange('today')
+      this.search()
+    },
+
+    applyQuickFilter(filter) {
+      this.currentQuickFilter = filter
+      // 根据快速筛选设置搜索条件
+      switch (filter) {
+        case 'login':
+          this.searchForm.action = 'login'
+          break
+        case 'user':
+          this.searchForm.resource = 'user'
+          break
+        case 'permission':
+          this.searchForm.resource = 'permission'
+          break
+        case 'failed':
+          this.searchForm.result = 'failed'
+          break
+        case 'risk':
+          this.searchForm.riskLevel = 'high'
+          break
+        default:
+          this.searchForm.action = ''
+          this.searchForm.resource = ''
+          this.searchForm.result = ''
+          this.searchForm.riskLevel = ''
+      }
+      this.search()
     },
 
+    // 分页
     onSizeChange(size) {
-      this.pageSize = size;
+      this.pageSize = size
+      this.loadData()
     },
 
     onPageChange(page) {
-      this.currentPage = page;
+      this.currentPage = page
+      this.loadData()
     },
 
-    exportData() {
-      this.$message.success("日志导出成功（示例）");
+    // 详情展示
+    showDetail(row) {
+      this.currentDetail = row
+      this.detailDrawerVisible = true
     },
 
-    showDetail(row) {
-      this.detail = row;
-      this.detailVisible = true;
+    handleRowClick(row) {
+      this.showDetail(row)
+    },
+
+    // 错误详情
+    showError(row) {
+      this.currentError = row
+      this.errorDialogVisible = true
+    },
+
+    // 导出
+    confirmExport() {
+      this.exporting = true
+      setTimeout(() => {
+        this.exporting = false
+        this.exportDialogVisible = false
+        this.$message.success('日志导出成功')
+      }, 1500)
+    },
+
+    exportSingle(row) {
+      this.$message.success('单条记录导出成功')
+    },
+
+    // 工具方法
+    getActionIcon(action) {
+      const map = {
+        create: 'el-icon-plus',
+        update: 'el-icon-edit',
+        delete: 'el-icon-delete',
+        login: 'el-icon-user',
+        logout: 'el-icon-switch-button',
+        view: 'el-icon-view',
+        export: 'el-icon-download',
+        import: 'el-icon-upload2',
+        enable: 'el-icon-circle-check',
+        disable: 'el-icon-circle-close',
+        assign: 'el-icon-s-check',
+        revoke: 'el-icon-remove'
+      }
+      return map[action] || 'el-icon-question'
+    },
+
+    getActionColor(action) {
+      const map = {
+        create: '#67C23A',
+        update: '#409EFF',
+        delete: '#F56C6C',
+        login: '#909399',
+        logout: '#909399',
+        view: '#909399',
+        export: '#E6A23C',
+        import: '#E6A23C',
+        enable: '#67C23A',
+        disable: '#F56C6C',
+        assign: '#409EFF',
+        revoke: '#F56C6C'
+      }
+      return map[action] || '#909399'
+    },
+
+    getActionLabel(action) {
+      const item = this.actionTypes.find(a => a.value === action)
+      return item ? item.label : action
+    },
+
+    getResourceIcon(resource) {
+      const item = this.resourceTypes.find(r => r.value === resource)
+      return item ? item.icon : 'el-icon-question'
+    },
+
+    getResultType(result) {
+      const map = { success: 'success', failed: 'danger', warning: 'warning' }
+      return map[result] || 'info'
+    },
+
+    getRiskType(level) {
+      const map = { high: 'danger', medium: 'warning', low: 'success' }
+      return map[level] || 'info'
+    },
+
+    getClientIcon(type) {
+      const map = {
+        web: 'el-icon-monitor',
+        mobile: 'el-icon-mobile-phone',
+        api: 'el-icon-cpu',
+        cli: 'el-icon-s-platform'
+      }
+      return map[type] || 'el-icon-question'
+    },
+
+    getTimelineType(item) {
+      if (item.result === 'failed') return 'danger'
+      if (item.riskLevel === 'high') return 'warning'
+      return 'primary'
+    },
+
+    getTimelineColor(item) {
+      if (item.result === 'failed') return '#F56C6C'
+      if (item.riskLevel === 'high') return '#E6A23C'
+      return '#409EFF'
+    },
+
+    formatTime(time) {
+      const date = new Date(time)
+      const now = new Date()
+      const diff = now - date
+
+      if (diff < 60000) return '刚刚'
+      if (diff < 3600000) return `${Math.floor(diff / 60000)}分钟前`
+      if (diff < 86400000) return `${Math.floor(diff / 3600000)}小时前`
+
+      return `${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`
+    },
+
+    formatFullTime(time) {
+      return new Date(time).toLocaleString('zh-CN')
+    },
+
+    formatJson(data) {
+      return JSON.stringify(data, null, 2)
+    },
+
+    copyRawData() {
+      this.$copyText(this.formatJson(this.currentDetail.rawData)).then(() => {
+        this.$message.success('已复制到剪贴板')
+      })
+    },
+
+    // 刷新
+    refreshData() {
+      this.loadData()
+      this.$message.success('数据已刷新')
+    },
+
+    // IP黑名单
+    blockIP(ip) {
+      this.$confirm(`确定将 IP ${ip} 加入黑名单吗？`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$message.success(`IP ${ip} 已加入黑名单`)
+      })
+    },
+
+    // 加载更多
+    loadMore() {
+      this.loadingMore = true
+      setTimeout(() => {
+        this.loadingMore = false
+        this.tableData.push(...this.generateMockData().slice(0, 10))
+      }, 500)
     }
   }
-};
+}
 </script>
 
 <style lang="scss" scoped>
 .audit-page {
   padding: 20px;
+  background: #f5f7fa;
+  min-height: 100vh;
+
+  // 页面头部统计
+  .page-header-section {
+    margin-bottom: 20px;
+
+    .page-title-area {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 16px;
+
+      .page-title {
+        font-size: 24px;
+        font-weight: 600;
+        margin: 0 0 8px 0;
+        color: #303133;
+      }
+
+      .page-desc {
+        color: #909399;
+        font-size: 14px;
+        margin: 0;
+      }
 
-  .search-card {
+      .page-actions {
+        display: flex;
+        gap: 10px;
+      }
+    }
+
+    .stats-row {
+      .stat-card {
+        background: #fff;
+        border-radius: 8px;
+        padding: 16px;
+        display: flex;
+        align-items: center;
+        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+
+        .stat-icon {
+          width: 48px;
+          height: 48px;
+          border-radius: 10px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-right: 12px;
+          font-size: 24px;
+
+          &.total {
+            background: #ecf5ff;
+            color: #409eff;
+          }
+          &.success {
+            background: #f0f9eb;
+            color: #67c23a;
+          }
+          &.failed {
+            background: #fef0f0;
+            color: #f56c6c;
+          }
+          &.warning {
+            background: #fdf6ec;
+            color: #e6a23c;
+          }
+          &.login {
+            background: #f4f4f5;
+            color: #909399;
+          }
+          &.users {
+            background: #f0f9eb;
+            color: #67c23a;
+          }
+        }
+
+        .stat-content {
+          .stat-value {
+            font-size: 24px;
+            font-weight: 600;
+            color: #303133;
+            line-height: 1.2;
+          }
+
+          .stat-label {
+            font-size: 12px;
+            color: #909399;
+            margin-top: 4px;
+          }
+        }
+      }
+    }
+  }
+
+  // 筛选卡片
+  .filter-card {
     margin-bottom: 16px;
+
+    .filter-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-weight: 600;
+
+      i {
+        margin-right: 6px;
+      }
+    }
+
+    .more-filters {
+      margin-top: 16px;
+      padding-top: 16px;
+      border-top: 1px solid #ebeef5;
+    }
+
+    .quick-filters {
+      margin-top: 16px;
+      padding-top: 16px;
+      border-top: 1px solid #ebeef5;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+
+      .quick-label {
+        color: #909399;
+        font-size: 13px;
+      }
+
+      .el-tag {
+        cursor: pointer;
+        transition: all 0.3s;
+
+        &:hover, &.active {
+          background-color: #ecf5ff;
+          border-color: #409eff;
+          color: #409eff;
+        }
+      }
+    }
   }
 
-  .pagination {
-    margin-top: 16px;
-    text-align: right;
+  // 日志卡片
+  .log-card {
+    .log-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .header-left {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        font-weight: 600;
+      }
+
+      .header-right {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+
+        .el-divider--vertical {
+          margin: 0;
+        }
+      }
+    }
+
+    // 事件单元格
+    .event-cell {
+      display: flex;
+      align-items: center;
+
+      .event-icon {
+        width: 36px;
+        height: 36px;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 12px;
+        flex-shrink: 0;
+
+        i {
+          font-size: 18px;
+        }
+      }
+
+      .event-content {
+        min-width: 0;
+        flex: 1;
+
+        .event-title {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          margin-bottom: 4px;
+
+          .risk-tag {
+            flex-shrink: 0;
+          }
+        }
+
+        .event-desc {
+          font-size: 12px;
+          color: #909399;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+
+    // 用户单元格
+    .user-cell {
+      display: flex;
+      align-items: center;
+
+      .user-avatar {
+        margin-right: 8px;
+      }
+
+      .user-info {
+        .user-name {
+          font-weight: 500;
+          color: #303133;
+        }
+
+        .user-dept {
+          font-size: 12px;
+          color: #909399;
+        }
+      }
+    }
+
+    // 资源图标
+    .resource-icon {
+      margin-right: 4px;
+    }
+
+    // IP单元格
+    .ip-cell {
+      .ip-address {
+        display: block;
+        font-family: monospace;
+        color: #606266;
+      }
+
+      .ip-location {
+        display: block;
+        font-size: 12px;
+        color: #909399;
+      }
+    }
+
+    // 客户端单元格
+    .client-cell {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      color: #606266;
+    }
+
+    // 时间轴视图
+    .timeline-view {
+      padding: 20px;
+
+      .timeline-card {
+        background: #fff;
+        border: 1px solid #ebeef5;
+        border-radius: 8px;
+        padding: 16px;
+        cursor: pointer;
+        transition: all 0.3s;
+
+        &:hover {
+          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+        }
+
+        .timeline-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 10px;
+
+          .timeline-title {
+            font-weight: 600;
+            color: #303133;
+          }
+        }
+
+        .timeline-content {
+          .timeline-info {
+            display: flex;
+            gap: 20px;
+            margin-bottom: 8px;
+            color: #606266;
+            font-size: 13px;
+
+            i {
+              margin-right: 4px;
+            }
+          }
+
+          .timeline-desc {
+            color: #909399;
+            font-size: 13px;
+          }
+        }
+      }
+
+      .load-more {
+        text-align: center;
+        margin-top: 20px;
+      }
+    }
+
+    // 分页
+    .pagination {
+      margin-top: 16px;
+      text-align: right;
+    }
   }
 
-  .detail-json {
-    background: #f7f7f7;
-    padding: 10px;
-    border-radius: 6px;
-    font-family: Menlo, monospace;
-    white-space: pre-wrap;
+  // 详情抽屉
+  .detail-drawer {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .detail-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 20px;
+      border-bottom: 1px solid #ebeef5;
+
+      .detail-title {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        font-size: 18px;
+        font-weight: 600;
+
+        i {
+          font-size: 24px;
+        }
+      }
+    }
+
+    .detail-body {
+      flex: 1;
+      overflow-y: auto;
+      padding: 20px;
+
+      .detail-section {
+        margin-bottom: 24px;
+
+        .section-title {
+          font-weight: 600;
+          color: #303133;
+          margin-bottom: 12px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+
+        .user-detail {
+          display: flex;
+          align-items: center;
+          padding: 16px;
+          background: #f5f7fa;
+          border-radius: 8px;
+
+          .user-detail-info {
+            margin-left: 16px;
+
+            .detail-user-name {
+              font-size: 16px;
+              font-weight: 600;
+              color: #303133;
+            }
+
+            .detail-user-meta {
+              margin-top: 8px;
+              color: #909399;
+              font-size: 13px;
+
+              span {
+                margin-right: 16px;
+              }
+
+              i {
+                margin-right: 4px;
+              }
+            }
+          }
+        }
+
+        .changes-list {
+          .change-item {
+            background: #f5f7fa;
+            border-radius: 8px;
+            padding: 12px 16px;
+            margin-bottom: 10px;
+
+            .change-field {
+              font-weight: 600;
+              color: #303133;
+              margin-bottom: 8px;
+            }
+
+            .change-values {
+              display: flex;
+              align-items: center;
+              gap: 12px;
+
+              .change-old, .change-new {
+                flex: 1;
+
+                .change-label {
+                  font-size: 12px;
+                  color: #909399;
+                  margin-right: 6px;
+                }
+
+                .value {
+                  padding: 4px 8px;
+                  border-radius: 4px;
+                  font-family: monospace;
+
+                  &.old {
+                    background: #fef0f0;
+                    color: #f56c6c;
+                    text-decoration: line-through;
+                  }
+
+                  &.new {
+                    background: #f0f9eb;
+                    color: #67c23a;
+                  }
+                }
+              }
+
+              .change-arrow {
+                color: #909399;
+              }
+            }
+          }
+        }
+
+        .raw-json {
+          background: #f7f7f7;
+          padding: 12px;
+          border-radius: 6px;
+          font-family: 'Courier New', monospace;
+          font-size: 12px;
+          overflow-x: auto;
+          max-height: 300px;
+          overflow-y: auto;
+        }
+
+        .user-agent-text {
+          max-width: 400px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          display: inline-block;
+          vertical-align: bottom;
+        }
+
+        .error-reason {
+          margin-left: 10px;
+          color: #f56c6c;
+        }
+      }
+    }
+
+    .detail-footer {
+      padding: 16px 20px;
+      border-top: 1px solid #ebeef5;
+      display: flex;
+      justify-content: flex-end;
+      gap: 10px;
+    }
+  }
+
+  // 错误详情
+  .error-detail {
+    text-align: center;
+    padding: 20px;
+
+    .error-icon {
+      font-size: 64px;
+      color: #f56c6c;
+      margin-bottom: 16px;
+    }
+
+    .error-message {
+      font-size: 16px;
+      color: #f56c6c;
+      margin-bottom: 20px;
+    }
+
+    .error-stack {
+      text-align: left;
+      background: #f7f7f7;
+      padding: 12px;
+      border-radius: 6px;
+
+      pre {
+        margin: 0;
+        font-size: 12px;
+        color: #606266;
+        white-space: pre-wrap;
+        word-break: break-all;
+      }
+    }
   }
 }
 </style>
diff --git a/web/src/views/identity/enterprise/create.vue b/web/src/views/identity/enterprise/create.vue
index 63def56..4b87160 100644
--- a/web/src/views/identity/enterprise/create.vue
+++ b/web/src/views/identity/enterprise/create.vue
@@ -82,55 +82,64 @@
         </div>
 
         <el-card class="config-card" shadow="never">
-          <el-form
-            ref="basicForm"
-            :model="form"
-            :rules="basicRules"
-            label-width="140px"
-            label-position="left"
-          >
-            <el-form-item label="身份源名称" prop="name">
-              <el-input
-                v-model="form.name"
-                placeholder="例如：公司主LDAP"
-                maxlength="50"
-                show-word-limit
-                style="max-width: 400px"
-              />
-            </el-form-item>
-
-            <el-form-item label="标识" prop="code">
-              <el-input
-                v-model="form.code"
-                placeholder="唯一标识，如 company-ldap"
-                maxlength="30"
-                style="max-width: 400px"
-              >
-                <template slot="prepend">idp_</template>
-              </el-input>
-            </el-form-item>
-
-            <el-form-item label="描述" prop="desc">
-              <el-input
-                v-model="form.desc"
-                type="textarea"
-                :rows="3"
-                placeholder="描述该身份源的用途"
-                maxlength="200"
-                show-word-limit
-                style="max-width: 500px"
-              />
-            </el-form-item>
-
-            <el-form-item label="状态">
-              <el-switch
-                v-model="form.enabled"
-                active-text="启用"
-                inactive-text="禁用"
-              />
-              <div class="form-tip">创建后是否立即启用该身份源</div>
-            </el-form-item>
-          </el-form>
+          <div class="config-section">
+            <h3 class="section-title">
+              <i class="el-icon-info" />
+              基本信息
+            </h3>
+            <el-form
+              ref="basicForm"
+              :model="form"
+              :rules="basicRules"
+              label-width="120px"
+              label-position="right"
+              class="compact-form"
+            >
+              <el-row :gutter="24">
+                <el-col :span="12">
+                  <el-form-item label="身份源名称" prop="name">
+                    <el-input
+                      v-model="form.name"
+                      placeholder="例如：公司主LDAP"
+                      maxlength="50"
+                      show-word-limit
+                    />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="标识" prop="code">
+                    <el-input
+                      v-model="form.code"
+                      placeholder="唯一标识，如 company-ldap"
+                      maxlength="30"
+                    >
+                      <template slot="prepend">idp_</template>
+                    </el-input>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+
+              <el-form-item label="描述" prop="desc" class="full-width-item">
+                <el-input
+                  v-model="form.desc"
+                  type="textarea"
+                  :rows="2"
+                  placeholder="描述该身份源的用途，方便其他管理员理解"
+                  maxlength="200"
+                  show-word-limit
+                />
+              </el-form-item>
+
+              <el-form-item label="状态" class="switch-item">
+                <el-switch
+                  v-model="form.enabled"
+                  active-text="启用"
+                  inactive-text="禁用"
+                />
+                <span class="form-tip-text">创建后立即启用该身份源</span>
+              </el-form-item>
+            </el-form>
+          </div>
         </el-card>
       </div>
 
@@ -154,10 +163,11 @@
                 ref="ldapForm"
                 :model="form"
                 :rules="ldapRules"
-                label-width="160px"
-                label-position="left"
+                label-width="120px"
+                label-position="right"
+                class="compact-form"
               >
-                <el-row :gutter="20">
+                <el-row :gutter="24">
                   <el-col :span="12">
                     <el-form-item label="服务器地址" prop="server">
                       <el-input
@@ -174,14 +184,14 @@
                 </el-row>
 
                 <el-form-item label="连接方式">
-                  <el-radio-group v-model="form.connectionType">
-                    <el-radio label="plain">普通连接</el-radio>
-                    <el-radio label="ssl">SSL/TLS</el-radio>
-                    <el-radio label="starttls">STARTTLS</el-radio>
+                  <el-radio-group v-model="form.connectionType" size="small">
+                    <el-radio-button label="plain">普通连接</el-radio-button>
+                    <el-radio-button label="ssl">SSL/TLS</el-radio-button>
+                    <el-radio-button label="starttls">STARTTLS</el-radio-button>
                   </el-radio-group>
                 </el-form-item>
 
-                <el-row :gutter="20">
+                <el-row :gutter="24">
                   <el-col :span="12">
                     <el-form-item label="Base DN" prop="baseDN">
                       <el-input v-model="form.baseDN" placeholder="dc=example,dc=com" />
@@ -196,8 +206,6 @@
               </el-form>
             </div>
 
-            <el-divider />
-
             <div class="config-section">
               <h3 class="section-title">
                 <i class="el-icon-user-solid" />
@@ -206,39 +214,50 @@
 
               <el-form
                 :model="form"
-                label-width="160px"
-                label-position="left"
+                label-width="120px"
+                label-position="right"
+                class="compact-form"
               >
-                <el-form-item label="管理员 DN" prop="bindDN">
-                  <el-input v-model="form.bindDN" placeholder="cn=admin,dc=example,dc=com" />
-                </el-form-item>
-
-                <el-form-item label="管理员密码" prop="password">
-                  <el-input v-model="form.password" show-password placeholder="输入管理员密码" />
-                </el-form-item>
+                <el-row :gutter="24">
+                  <el-col :span="12">
+                    <el-form-item label="管理员 DN" prop="bindDN">
+                      <el-input v-model="form.bindDN" placeholder="cn=admin,dc=example,dc=com" />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="12">
+                    <el-form-item label="管理员密码" prop="password">
+                      <el-input v-model="form.password" show-password placeholder="输入管理员密码" />
+                    </el-form-item>
+                  </el-col>
+                </el-row>
 
-                <el-form-item>
+                <el-form-item class="toggle-advanced-item">
                   <el-button type="text" @click="showAdvanced = !showAdvanced">
-                    {{ showAdvanced ? '收起' : '展开' }}高级配置
                     <i :class="showAdvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" />
+                    {{ showAdvanced ? '收起' : '展开' }}高级配置
                   </el-button>
                 </el-form-item>
 
                 <template v-if="showAdvanced">
-                  <el-form-item label="连接超时">
-                    <el-input-number v-model="form.timeout" :min="1" :max="60" />
-                    <span class="unit">秒</span>
-                  </el-form-item>
-
-                  <el-form-item label="同步频率">
-                    <el-select v-model="form.syncInterval" style="width: 200px">
-                      <el-option label="手动同步" value="manual" />
-                      <el-option label="每小时" value="1h" />
-                      <el-option label="每6小时" value="6h" />
-                      <el-option label="每12小时" value="12h" />
-                      <el-option label="每天" value="24h" />
-                    </el-select>
-                  </el-form-item>
+                  <el-row :gutter="24">
+                    <el-col :span="12">
+                      <el-form-item label="连接超时">
+                        <el-input-number v-model="form.timeout" :min="1" :max="60" />
+                        <span class="unit">秒</span>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                      <el-form-item label="同步频率">
+                        <el-select v-model="form.syncInterval" style="width: 100%">
+                          <el-option label="手动同步" value="manual" />
+                          <el-option label="每小时" value="1h" />
+                          <el-option label="每6小时" value="6h" />
+                          <el-option label="每12小时" value="12h" />
+                          <el-option label="每天" value="24h" />
+                        </el-select>
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
                 </template>
               </el-form>
             </div>
@@ -256,14 +275,15 @@
                 ref="oidcForm"
                 :model="form"
                 :rules="oidcRules"
-                label-width="160px"
-                label-position="left"
+                label-width="120px"
+                label-position="right"
+                class="compact-form"
               >
                 <el-form-item label="Issuer URL" prop="issuer">
                   <el-input v-model="form.issuer" placeholder="https://idp.example.com" />
                 </el-form-item>
 
-                <el-row :gutter="20">
+                <el-row :gutter="24">
                   <el-col :span="12">
                     <el-form-item label="Client ID" prop="clientId">
                       <el-input v-model="form.clientId" placeholder="输入Client ID" />
@@ -277,20 +297,20 @@
                 </el-row>
 
                 <el-form-item label="Scope">
-                  <el-checkbox-group v-model="form.scopes">
-                    <el-checkbox label="openid">openid</el-checkbox>
-                    <el-checkbox label="profile">profile</el-checkbox>
-                    <el-checkbox label="email">email</el-checkbox>
-                    <el-checkbox label="phone">phone</el-checkbox>
-                    <el-checkbox label="address">address</el-checkbox>
+                  <el-checkbox-group v-model="form.scopes" size="small">
+                    <el-checkbox-button label="openid">openid</el-checkbox-button>
+                    <el-checkbox-button label="profile">profile</el-checkbox-button>
+                    <el-checkbox-button label="email">email</el-checkbox-button>
+                    <el-checkbox-button label="phone">phone</el-checkbox-button>
+                    <el-checkbox-button label="address">address</el-checkbox-button>
                   </el-checkbox-group>
                 </el-form-item>
 
-                <el-form-item label="回调地址">
+                <el-form-item label="回调地址" class="copy-field-item">
                   <el-input :value="callbackUrl" readonly>
                     <el-button slot="append" icon="el-icon-document-copy" @click="copyCallback">复制</el-button>
                   </el-input>
-                  <div class="form-tip">请在您的IdP中将此地址配置为允许的回调地址</div>
+                  <span class="form-tip-text">请在您的IdP中将此地址配置为允许的回调地址</span>
                 </el-form-item>
               </el-form>
             </div>
@@ -308,13 +328,14 @@
                 ref="samlForm"
                 :model="form"
                 :rules="samlRules"
-                label-width="160px"
-                label-position="left"
+                label-width="120px"
+                label-position="right"
+                class="compact-form"
               >
                 <el-form-item label="配置方式">
-                  <el-radio-group v-model="form.samlConfigType">
-                    <el-radio label="url">Metadata URL</el-radio>
-                    <el-radio label="manual">手动配置</el-radio>
+                  <el-radio-group v-model="form.samlConfigType" size="small">
+                    <el-radio-button label="url">Metadata URL</el-radio-button>
+                    <el-radio-button label="manual">手动配置</el-radio-button>
                   </el-radio-group>
                 </el-form-item>
 
@@ -343,15 +364,15 @@
                   </el-form-item>
                 </template>
 
-                <el-divider />
+                <div class="config-section-sp"></div>
 
-                <el-form-item label="SP Entity ID">
+                <el-form-item label="SP Entity ID" class="copy-field-item">
                   <el-input :value="spEntityId" readonly>
                     <el-button slot="append" icon="el-icon-document-copy" @click="copyEntityId">复制</el-button>
                   </el-input>
                 </el-form-item>
 
-                <el-form-item label="ACS URL">
+                <el-form-item label="ACS URL" class="copy-field-item">
                   <el-input :value="acsUrl" readonly>
                     <el-button slot="append" icon="el-icon-document-copy" @click="copyAcsUrl">复制</el-button>
                   </el-input>
@@ -1044,34 +1065,119 @@ export default {
     border: 1px solid #e8e8e8;
 
     ::v-deep .el-card__body {
-      padding: 24px;
+      padding: 28px 32px;
     }
 
     .config-section {
+      &:not(:last-child) {
+        margin-bottom: 32px;
+        padding-bottom: 32px;
+        border-bottom: 1px solid #f0f0f0;
+      }
+
       .section-title {
-        font-size: 16px;
+        font-size: 15px;
         font-weight: 600;
         margin: 0 0 20px 0;
         display: flex;
         align-items: center;
         gap: 8px;
-        color: #333;
+        color: #262626;
 
         i {
           color: #1890ff;
+          font-size: 16px;
+        }
+      }
+    }
+
+    .compact-form {
+      .el-form-item {
+        margin-bottom: 20px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        .el-form-item__label {
+          font-size: 14px;
+          color: #595959;
+          font-weight: 500;
+          padding-right: 16px;
+        }
+
+        .el-form-item__content {
+          line-height: 32px;
+        }
+      }
+
+      .full-width-item {
+        .el-input,
+        .el-textarea {
+          width: 100%;
+        }
+      }
+
+      .switch-item {
+        .el-form-item__content {
+          display: flex;
+          align-items: center;
+          gap: 12px;
         }
       }
     }
 
     .form-tip {
       font-size: 12px;
-      color: #999;
+      color: #8c8c8c;
       margin-top: 4px;
+      line-height: 1.5;
+    }
+
+    .form-tip-text {
+      font-size: 13px;
+      color: #8c8c8c;
+      margin-left: 8px;
+    }
+
+    .toggle-advanced-item {
+      margin-top: 8px;
+
+      .el-button--text {
+        font-size: 13px;
+        color: #595959;
+
+        i {
+          margin-right: 4px;
+        }
+
+        &:hover {
+          color: #1890ff;
+        }
+      }
+    }
+
+    .copy-field-item {
+      .el-input-group__append {
+        background: #fff;
+        padding: 0 12px;
+
+        .el-button {
+          color: #1890ff;
+        }
+      }
+    }
+
+    .config-section-sp {
+      height: 16px;
+      border-top: 1px solid #f0f0f0;
+      margin: 20px 0;
     }
 
     .unit {
       margin-left: 8px;
-      color: #666;
+      color: #595959;
+      font-size: 13px;
     }
   }
 
diff --git a/web/src/views/identity/enterprise/index.vue b/web/src/views/identity/enterprise/index.vue
index cafc9b0..d2e3c7f 100644
--- a/web/src/views/identity/enterprise/index.vue
+++ b/web/src/views/identity/enterprise/index.vue
@@ -6,11 +6,6 @@
         <h1 class="page-title">企业身份源</h1>
         <p class="page-desc">连接和管理 LDAP、Active Directory、OIDC、SAML 等企业身份源，实现统一身份认证</p>
       </div>
-      <div class="header-right">
-        <el-button type="primary" icon="el-icon-plus" size="medium" @click="goCreate">
-          新建连接
-        </el-button>
-      </div>
     </div>
 
     <!-- 统计卡片 -->
@@ -183,7 +178,7 @@
 
     <!-- 列表视图 -->
     <el-card v-else class="list-view" shadow="never">
-      <el-table :data="filteredList" style="width: 100%" v-loading="loading">
+      <el-table v-loading="loading" :data="filteredList" style="width: 100%">
         <el-table-column label="身份源" min-width="250">
           <template slot-scope="{ row }">
             <div class="source-info">
@@ -265,208 +260,208 @@
 
 <script>
 export default {
-  name: "IdentitySourcePage",
+  name: 'IdentitySourcePage',
 
   data() {
     return {
       loading: false,
-      searchQuery: "",
-      filterType: "",
-      filterStatus: "",
-      viewMode: "card", // card | list
+      searchQuery: '',
+      filterType: '',
+      filterStatus: '',
+      viewMode: 'card', // card | list
 
       list: [
         {
           id: 1,
-          name: "公司 LDAP 服务器",
-          type: "LDAP",
-          status: "connected",
+          name: '公司 LDAP 服务器',
+          type: 'LDAP',
+          status: 'connected',
           users: 324,
           groups: 28,
-          updateTime: "2025-02-12 14:22:30",
-          description: "总部主LDAP服务器"
+          updateTime: '2025-02-12 14:22:30',
+          description: '总部主LDAP服务器'
         },
         {
           id: 2,
-          name: "总部 Active Directory",
-          type: "Active Directory",
-          status: "connected",
+          name: '总部 Active Directory',
+          type: 'Active Directory',
+          status: 'connected',
           users: 1124,
           groups: 156,
-          updateTime: "2025-02-12 13:10:15",
-          description: "Windows域控制器"
+          updateTime: '2025-02-12 13:10:15',
+          description: 'Windows域控制器'
         },
         {
           id: 3,
-          name: "Ping Identity OIDC",
-          type: "OIDC",
-          status: "error",
+          name: 'Ping Identity OIDC',
+          type: 'OIDC',
+          status: 'error',
           users: 0,
           groups: 0,
-          updateTime: "2025-02-01 09:15:00",
-          description: "外部OIDC提供商"
+          updateTime: '2025-02-01 09:15:00',
+          description: '外部OIDC提供商'
         },
         {
           id: 4,
-          name: "企业 SAML SSO",
-          type: "SAML",
-          status: "connected",
+          name: '企业 SAML SSO',
+          type: 'SAML',
+          status: 'connected',
           users: 234,
           groups: 12,
-          updateTime: "2025-02-10 09:30:45",
-          description: "企业统一登录"
+          updateTime: '2025-02-10 09:30:45',
+          description: '企业统一登录'
         },
         {
           id: 5,
-          name: "分部 LDAP",
-          type: "LDAP",
-          status: "disconnected",
+          name: '分部 LDAP',
+          type: 'LDAP',
+          status: 'disconnected',
           users: 0,
           groups: 0,
-          updateTime: "2025-01-15 16:20:00",
-          description: "上海分部LDAP"
+          updateTime: '2025-01-15 16:20:00',
+          description: '上海分部LDAP'
         }
       ]
-    };
+    }
   },
 
   computed: {
     filteredList() {
-      let result = this.list;
+      let result = this.list
 
       if (this.searchQuery) {
         result = result.filter(item =>
           item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
-        );
+        )
       }
 
       if (this.filterType) {
-        result = result.filter(item => item.type === this.filterType);
+        result = result.filter(item => item.type === this.filterType)
       }
 
       if (this.filterStatus) {
-        result = result.filter(item => item.status === this.filterStatus);
+        result = result.filter(item => item.status === this.filterStatus)
       }
 
-      return result;
+      return result
     },
 
     connectedCount() {
-      return this.list.filter(item => item.status === "connected").length;
+      return this.list.filter(item => item.status === 'connected').length
     },
 
     totalUsers() {
-      return this.list.reduce((sum, item) => sum + (item.users || 0), 0);
+      return this.list.reduce((sum, item) => sum + (item.users || 0), 0)
     },
 
     lastSyncTime() {
-      const connected = this.list.filter(item => item.status === "connected");
-      if (connected.length === 0) return "-";
+      const connected = this.list.filter(item => item.status === 'connected')
+      if (connected.length === 0) return '-'
 
       const latest = connected.sort((a, b) =>
         new Date(b.updateTime) - new Date(a.updateTime)
-      )[0];
-      return this.formatTime(latest.updateTime);
+      )[0]
+      return this.formatTime(latest.updateTime)
     }
   },
 
   methods: {
     getTypeClass(type) {
       const map = {
-        "LDAP": "ldap",
-        "Active Directory": "ad",
-        "OIDC": "oidc",
-        "SAML": "saml"
-      };
-      return map[type] || "default";
+        'LDAP': 'ldap',
+        'Active Directory': 'ad',
+        'OIDC': 'oidc',
+        'SAML': 'saml'
+      }
+      return map[type] || 'default'
     },
 
     getTypeIcon(type) {
       const map = {
-        "LDAP": "el-icon-s-cooperation",
-        "Active Directory": "el-icon-s-platform",
-        "OIDC": "el-icon-link",
-        "SAML": "el-icon-key"
-      };
-      return map[type] || "el-icon-s-tools";
+        'LDAP': 'el-icon-s-cooperation',
+        'Active Directory': 'el-icon-s-platform',
+        'OIDC': 'el-icon-link',
+        'SAML': 'el-icon-key'
+      }
+      return map[type] || 'el-icon-s-tools'
     },
 
     getStatusText(status) {
       const map = {
-        "connected": "已连接",
-        "disconnected": "未连接",
-        "error": "连接失败"
-      };
-      return map[status] || status;
+        'connected': '已连接',
+        'disconnected': '未连接',
+        'error': '连接失败'
+      }
+      return map[status] || status
     },
 
     formatTime(time) {
-      if (!time) return "-";
-      const date = new Date(time);
-      const now = new Date();
-      const diff = Math.floor((now - date) / 1000 / 60); // minutes
-
-      if (diff < 1) return "刚刚";
-      if (diff < 60) return `${diff}分钟前`;
-      if (diff < 1440) return `${Math.floor(diff / 60)}小时前`;
-      return `${Math.floor(diff / 1440)}天前`;
+      if (!time) return '-'
+      const date = new Date(time)
+      const now = new Date()
+      const diff = Math.floor((now - date) / 1000 / 60) // minutes
+
+      if (diff < 1) return '刚刚'
+      if (diff < 60) return `${diff}分钟前`
+      if (diff < 1440) return `${Math.floor(diff / 60)}小时前`
+      return `${Math.floor(diff / 1440)}天前`
     },
 
     goCreate() {
-      this.$router.push("/identity/create");
+      this.$router.push('/identity/create')
     },
 
     edit(row) {
-      this.$message.info(`编辑：${row.name}`);
+      this.$message.info(`编辑：${row.name}`)
     },
 
     sync(row) {
-      this.$message.success(`已启动同步：${row.name}`);
+      this.$message.success(`已启动同步：${row.name}`)
       // 模拟同步完成
       setTimeout(() => {
-        row.updateTime = new Date().toISOString();
-        this.$message.success(`${row.name} 同步完成`);
-      }, 2000);
+        row.updateTime = new Date().toISOString()
+        this.$message.success(`${row.name} 同步完成`)
+      }, 2000)
     },
 
     reconnect(row) {
-      this.$message.info(`正在重新连接：${row.name}`);
+      this.$message.info(`正在重新连接：${row.name}`)
       setTimeout(() => {
-        row.status = "connected";
-        this.$message.success(`${row.name} 连接成功`);
-      }, 1500);
+        row.status = 'connected'
+        this.$message.success(`${row.name} 连接成功`)
+      }, 1500)
     },
 
     testConnection(row) {
-      this.$message.info(`正在测试连接：${row.name}`);
+      this.$message.info(`正在测试连接：${row.name}`)
       setTimeout(() => {
-        if (row.status === "connected") {
-          this.$message.success("连接测试成功");
+        if (row.status === 'connected') {
+          this.$message.success('连接测试成功')
         } else {
-          this.$message.error("连接测试失败，请检查配置");
+          this.$message.error('连接测试失败，请检查配置')
         }
-      }, 1000);
+      }, 1000)
     },
 
     viewLogs(row) {
-      this.$message.info(`查看 ${row.name} 的同步日志`);
+      this.$message.info(`查看 ${row.name} 的同步日志`)
     },
 
     remove(row) {
-      this.$confirm(`确定删除 "${row.name}" 吗？删除后将无法恢复。`, "删除确认", {
-        confirmButtonText: "删除",
-        cancelButtonText: "取消",
-        type: "warning"
+      this.$confirm(`确定删除 "${row.name}" 吗？删除后将无法恢复。`, '删除确认', {
+        confirmButtonText: '删除',
+        cancelButtonText: '取消',
+        type: 'warning'
       }).then(() => {
-        const index = this.list.findIndex(item => item.id === row.id);
+        const index = this.list.findIndex(item => item.id === row.id)
         if (index > -1) {
-          this.list.splice(index, 1);
-          this.$message.success("已删除");
+          this.list.splice(index, 1)
+          this.$message.success('已删除')
         }
-      });
+      })
     }
   }
-};
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/web/src/views/identity/social/index.vue b/web/src/views/identity/social/index.vue
index 36384ff..5997126 100644
--- a/web/src/views/identity/social/index.vue
+++ b/web/src/views/identity/social/index.vue
@@ -1,110 +1,265 @@
 <template>
-  <div class="social-page">
-
-    <!-- 页面标题 -->
+  <div class="social-identity-page">
+    <!-- 页面头部 -->
     <div class="page-header">
-      <div>
-        <h2 class="page-title">社交身份源管理</h2>
-        <p class="page-desc">配置社交登录方式，允许用户使用第三方账号登录</p>
+      <div class="header-content">
+        <div class="title-section">
+          <h1 class="page-title">社交身份源</h1>
+          <p class="page-desc">配置社交登录方式，允许用户使用微信、钉钉等第三方账号登录</p>
+        </div>
+        <div class="header-actions">
+          <el-button icon="el-icon-refresh" @click="refreshData">刷新</el-button>
+        </div>
+      </div>
+
+      <!-- 统计卡片 -->
+      <div class="stats-row">
+        <div class="stat-card">
+          <div class="stat-icon enabled">
+            <i class="el-icon-check" />
+          </div>
+          <div class="stat-info">
+            <div class="stat-value">{{ enabledCount }}</div>
+            <div class="stat-label">已启用</div>
+          </div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-icon users">
+            <i class="el-icon-user" />
+          </div>
+          <div class="stat-info">
+            <div class="stat-value">{{ totalUsers }}</div>
+            <div class="stat-label">绑定用户</div>
+          </div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-icon logins">
+            <i class="el-icon-data-line" />
+          </div>
+          <div class="stat-info">
+            <div class="stat-value">{{ todayLogins }}</div>
+            <div class="stat-label">今日登录</div>
+          </div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-icon rate">
+            <i class="el-icon-trend-charts" />
+          </div>
+          <div class="stat-info">
+            <div class="stat-value">{{ socialLoginRate }}%</div>
+            <div class="stat-label">社交登录占比</div>
+          </div>
+        </div>
       </div>
-      <el-button type="primary" icon="el-icon-plus" @click="addSocialProvider">
-        添加身份源
-      </el-button>
     </div>
 
-    <!-- 社交登录提供商卡片 -->
-    <el-row :gutter="20">
-      <el-col :span="8" v-for="provider in providers" :key="provider.key">
-        <el-card class="provider-card" shadow="hover" :class="{ 'provider-enabled': provider.enabled }">
-          <div class="provider-header">
-            <div class="provider-info">
-              <div class="provider-icon" :style="{ background: provider.color }">
-                <i :class="provider.icon"></i>
-              </div>
-              <div>
-                <div class="provider-name">{{ provider.name }}</div>
-                <div class="provider-type">{{ provider.type }}</div>
-              </div>
+    <!-- 身份源卡片列表 -->
+    <div class="providers-section">
+      <div class="section-header">
+        <span class="section-title">已配置身份源</span>
+        <el-radio-group v-model="viewMode" size="small">
+          <el-radio-button label="grid">
+            <i class="el-icon-menu" />
+          </el-radio-button>
+          <el-radio-button label="list">
+            <i class="el-icon-s-unfold" />
+          </el-radio-button>
+        </el-radio-group>
+      </div>
+
+      <!-- 网格视图 -->
+      <div v-if="viewMode === 'grid'" class="providers-grid">
+        <div
+          v-for="provider in providers"
+          :key="provider.key"
+          class="provider-card"
+          :class="{ 'is-enabled': provider.enabled, 'is-error': provider.enabled && !provider.connected }"
+        >
+          <div class="card-header">
+            <div class="provider-icon" :style="{ background: provider.gradient || provider.color }">
+              <i :class="provider.icon" />
+            </div>
+            <div class="provider-status">
+              <el-switch
+                v-model="provider.enabled"
+                active-text="启用"
+                @change="handleToggle(provider)"
+              />
             </div>
-            <el-switch v-model="provider.enabled" @change="handleToggle(provider)" />
           </div>
 
-          <div class="provider-stats" v-if="provider.enabled">
-            <div class="stat-item">
-              <span class="stat-label">今日登录</span>
-              <span class="stat-value">{{ provider.todayLogins }}</span>
+          <div class="card-body">
+            <h3 class="provider-name">{{ provider.name }}</h3>
+            <p class="provider-type">{{ provider.type }}</p>
+
+            <div v-if="provider.enabled" class="connection-status">
+              <span class="status-dot" :class="provider.connected ? 'connected' : 'error'" />
+              <span class="status-text">{{ provider.connected ? '连接正常' : '连接异常' }}</span>
             </div>
-            <div class="stat-item">
-              <span class="stat-label">累计用户</span>
-              <span class="stat-value">{{ provider.totalUsers }}</span>
+
+            <div v-if="provider.enabled" class="provider-stats">
+              <div class="stat-item">
+                <span class="stat-num">{{ provider.totalUsers }}</span>
+                <span class="stat-label">绑定用户</span>
+              </div>
+              <div class="stat-item">
+                <span class="stat-num">{{ provider.todayLogins }}</span>
+                <span class="stat-label">今日登录</span>
+              </div>
             </div>
           </div>
 
-          <div class="provider-status" v-if="provider.enabled">
-            <el-tag :type="provider.connected ? 'success' : 'danger'" size="small">
-              {{ provider.connected ? '连接正常' : '连接异常' }}
-            </el-tag>
+          <div class="card-footer">
+            <el-button
+              v-if="provider.enabled"
+              type="text"
+              icon="el-icon-setting"
+              @click="configureProvider(provider)"
+            >
+              配置
+            </el-button>
+            <el-button
+              v-if="provider.enabled"
+              type="text"
+              icon="el-icon-user"
+              @click="viewUsers(provider)"
+            >
+              用户
+            </el-button>
+            <el-popconfirm
+              title="确定删除该身份源吗？"
+              @confirm="deleteProvider(provider)"
+            >
+              <el-button
+                slot="reference"
+                type="text"
+                class="danger"
+                icon="el-icon-delete"
+              >
+                删除
+              </el-button>
+            </el-popconfirm>
           </div>
+        </div>
 
-          <div class="provider-actions">
-            <el-button type="text" @click="configureProvider(provider)">配置</el-button>
-            <el-button type="text" @click="viewUsers(provider)">用户列表</el-button>
-            <el-button type="text" class="danger" @click="deleteProvider(provider)">删除</el-button>
+        <!-- 添加卡片 -->
+        <div class="provider-card add-card" @click="addSocialProvider">
+          <div class="add-content">
+            <div class="add-icon">
+              <i class="el-icon-plus" />
+            </div>
+            <div class="add-text">添加身份源</div>
+            <div class="add-desc">支持微信、钉钉、GitHub等</div>
           </div>
-        </el-card>
-      </el-col>
-    </el-row>
-
-    <!-- 社交登录设置 -->
-    <el-card class="settings-card" shadow="hover">
-      <div slot="header">
-        <span>社交登录设置</span>
+        </div>
       </div>
 
-      <el-form :model="socialSettings" label-width="180px">
-        <el-form-item label="社交登录开关">
-          <el-switch v-model="socialSettings.enabled" @change="handleSettingsChange" />
-        </el-form-item>
+      <!-- 列表视图 -->
+      <el-card v-else class="list-view" shadow="never">
+        <el-table :data="providers" style="width: 100%">
+          <el-table-column label="身份源" min-width="200">
+            <template slot-scope="{ row }">
+              <div class="provider-info">
+                <div class="provider-icon-small" :style="{ background: row.color }">
+                  <i :class="row.icon" />
+                </div>
+                <div class="provider-details">
+                  <div class="provider-name">{{ row.name }}</div>
+                  <div class="provider-type">{{ row.type }}</div>
+                </div>
+              </div>
+            </template>
+          </el-table-column>
 
-        <el-form-item label="登录页显示方式" v-if="socialSettings.enabled">
-          <el-radio-group v-model="socialSettings.displayMode">
-            <el-radio label="button">图标按钮</el-radio>
-            <el-radio label="list">列表样式</el-radio>
-          </el-radio-group>
-        </el-form-item>
+          <el-table-column label="状态" width="120">
+            <template slot-scope="{ row }">
+              <el-switch v-model="row.enabled" @change="handleToggle(row)" />
+            </template>
+          </el-table-column>
 
-        <el-form-item label="自动注册账号" v-if="socialSettings.enabled">
-          <el-switch v-model="socialSettings.autoRegister" />
-          <div class="form-hint">首次使用社交登录时自动创建本地账号</div>
-        </el-form-item>
+          <el-table-column label="连接状态" width="120">
+            <template slot-scope="{ row }">
+              <div v-if="row.enabled" class="status-badge" :class="row.connected ? 'connected' : 'error'">
+                <span class="status-dot-small" />
+                {{ row.connected ? '正常' : '异常' }}
+              </div>
+              <span v-else class="text-muted">-</span>
+            </template>
+          </el-table-column>
 
-        <el-form-item label="绑定已有账号" v-if="socialSettings.enabled">
-          <el-switch v-model="socialSettings.allowBind" />
-          <div class="form-hint">允许用户将社交账号绑定到已有账号</div>
-        </el-form-item>
+          <el-table-column label="绑定用户" width="100">
+            <template slot-scope="{ row }">
+              <span v-if="row.enabled">{{ row.totalUsers }}</span>
+              <span v-else class="text-muted">-</span>
+            </template>
+          </el-table-column>
 
-        <el-form-item label="默认用户组" v-if="socialSettings.enabled && socialSettings.autoRegister">
-          <el-select v-model="socialSettings.defaultGroup" style="width: 100%">
-            <el-option label="普通用户" value="user" />
-            <el-option label="访客" value="guest" />
-          </el-select>
-        </el-form-item>
+          <el-table-column label="今日登录" width="100">
+            <template slot-scope="{ row }">
+              <span v-if="row.enabled">{{ row.todayLogins }}</span>
+              <span v-else class="text-muted">-</span>
+            </template>
+          </el-table-column>
 
-        <el-form-item v-if="socialSettings.enabled">
-          <el-button type="primary" @click="saveSettings">保存设置</el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
+          <el-table-column label="操作" width="200" fixed="right">
+            <template slot-scope="{ row }">
+              <el-button
+                v-if="row.enabled"
+                type="text"
+                icon="el-icon-setting"
+                @click="configureProvider(row)"
+              >
+                配置
+              </el-button>
+              <el-button
+                v-if="row.enabled"
+                type="text"
+                icon="el-icon-user"
+                @click="viewUsers(row)"
+              >
+                用户
+              </el-button>
+              <el-popconfirm
+                title="确定删除该身份源吗？"
+                @confirm="deleteProvider(row)"
+              >
+                <el-button slot="reference" type="text" class="danger" icon="el-icon-delete">
+                  删除
+                </el-button>
+              </el-popconfirm>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-card>
+    </div>
 
     <!-- 配置对话框 -->
-    <el-dialog :title="currentProvider.name + ' 配置'" :visible.sync="configDialogVisible" width="550px">
-      <el-form :model="providerConfig" label-width="140px" :rules="configRules" ref="configForm">
+    <el-dialog
+      :title="currentProvider.name + ' 配置'"
+      :visible.sync="configDialogVisible"
+      width="600px"
+      :close-on-click-modal="false"
+    >
+      <el-form
+        ref="configForm"
+        :model="providerConfig"
+        label-width="140px"
+        :rules="configRules"
+        class="config-form"
+      >
+        <el-divider content-position="left">基础配置</el-divider>
+
         <el-form-item label="Client ID" prop="clientId">
           <el-input v-model="providerConfig.clientId" placeholder="输入应用ID" />
         </el-form-item>
 
         <el-form-item label="Client Secret" prop="clientSecret">
-          <el-input v-model="providerConfig.clientSecret" type="password" placeholder="输入应用密钥" show-password />
+          <el-input
+            v-model="providerConfig.clientSecret"
+            type="password"
+            placeholder="输入应用密钥"
+            show-password
+          />
         </el-form-item>
 
         <el-form-item label="授权范围">
@@ -117,78 +272,110 @@
 
         <el-form-item label="回调地址">
           <el-input v-model="providerConfig.redirectUri" readonly>
-            <el-button slot="append" icon="el-icon-document-copy" @click="copyRedirectUri">复制</el-button>
+            <el-button slot="append" icon="el-icon-document-copy" @click="copyRedirectUri">
+              复制
+            </el-button>
           </el-input>
+          <div class="form-hint">请在您的IdP中将此地址配置为允许的回调地址</div>
         </el-form-item>
 
-        <el-divider />
+        <el-divider content-position="left">字段映射</el-divider>
 
-        <el-form-item label="字段映射">
-          <div class="field-mapping">
-            <div class="mapping-item">
-              <span>用户ID</span>
-              <el-input v-model="providerConfig.mapping.id" size="small" placeholder="第三方字段名" />
-            </div>
-            <div class="mapping-item">
-              <span>用户名</span>
-              <el-input v-model="providerConfig.mapping.username" size="small" placeholder="第三方字段名" />
-            </div>
-            <div class="mapping-item">
-              <span>昵称</span>
-              <el-input v-model="providerConfig.mapping.nickname" size="small" placeholder="第三方字段名" />
-            </div>
-            <div class="mapping-item">
-              <span>邮箱</span>
-              <el-input v-model="providerConfig.mapping.email" size="small" placeholder="第三方字段名" />
-            </div>
-            <div class="mapping-item">
-              <span>头像</span>
-              <el-input v-model="providerConfig.mapping.avatar" size="small" placeholder="第三方字段名" />
-            </div>
+        <div class="field-mapping">
+          <div v-for="(value, key) in providerConfig.mapping" :key="key" class="mapping-item">
+            <span class="mapping-label">{{ fieldLabels[key] }}</span>
+            <el-input v-model="providerConfig.mapping[key]" size="small" placeholder="第三方字段名" />
           </div>
+        </div>
+
+        <el-divider content-position="left">登录设置</el-divider>
+
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="自动注册账号">
+              <el-switch v-model="providerConfig.autoRegister" />
+              <div class="form-hint">首次使用社交登录时自动创建本地账号</div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="绑定已有账号">
+              <el-switch v-model="providerConfig.allowBind" />
+              <div class="form-hint">允许用户将社交账号绑定到已有账号</div>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-form-item v-if="providerConfig.autoRegister" label="默认用户组">
+          <el-select v-model="providerConfig.defaultGroup" style="width: 100%">
+            <el-option label="普通用户" value="user" />
+            <el-option label="访客" value="guest" />
+          </el-select>
         </el-form-item>
       </el-form>
 
       <div slot="footer">
         <el-button @click="configDialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="testConnection">测试连接</el-button>
-        <el-button type="primary" @click="saveConfig">保存</el-button>
+        <el-button type="primary" icon="el-icon-connection" @click="testConnection">
+          测试连接
+        </el-button>
+        <el-button type="primary" icon="el-icon-check" @click="saveConfig">保存</el-button>
       </div>
     </el-dialog>
 
     <!-- 添加身份源对话框 -->
-    <el-dialog title="添加社交身份源" :visible.sync="addDialogVisible" width="500px">
-      <el-row :gutter="20">
-        <el-col :span="8" v-for="provider in availableProviders" :key="provider.key">
-          <div class="provider-option" @click="selectProvider(provider)">
-            <div class="option-icon" :style="{ background: provider.color }">
-              <i :class="provider.icon"></i>
-            </div>
-            <div class="option-name">{{ provider.name }}</div>
+    <el-dialog title="添加社交身份源" :visible.sync="addDialogVisible" width="600px">
+      <div class="provider-selector">
+        <div
+          v-for="provider in availableProviders"
+          :key="provider.key"
+          class="provider-option"
+          @click="selectProvider(provider)"
+        >
+          <div class="option-icon" :style="{ background: provider.gradient || provider.color }">
+            <i :class="provider.icon" />
           </div>
-        </el-col>
-      </el-row>
+          <div class="option-name">{{ provider.name }}</div>
+          <div class="option-type">{{ provider.type }}</div>
+        </div>
+      </div>
     </el-dialog>
 
     <!-- 用户列表对话框 -->
-    <el-dialog :title="currentProvider.name + ' 绑定用户'" :visible.sync="usersDialogVisible" width="700px">
+    <el-dialog
+      :title="currentProvider.name + ' 绑定用户'"
+      :visible.sync="usersDialogVisible"
+      width="800px"
+    >
       <el-table :data="boundUsers" size="small">
-        <el-table-column prop="username" label="本地用户名" />
+        <el-table-column prop="username" label="本地用户名">
+          <template slot-scope="{ row }">
+            <div class="user-cell">
+              <el-avatar :size="28" :src="row.avatar">{{ row.username.charAt(0) }}</el-avatar>
+              <span>{{ row.username }}</span>
+            </div>
+          </template>
+        </el-table-column>
         <el-table-column prop="socialId" label="社交账号ID" />
         <el-table-column prop="socialName" label="社交账号名称" />
         <el-table-column prop="bindTime" label="绑定时间" />
         <el-table-column label="操作" width="100">
           <template slot-scope="{ row }">
-            <el-button size="mini" type="text" class="danger" @click="unbindUser(row)">解绑</el-button>
+            <el-button size="mini" type="text" class="danger" @click="unbindUser(row)">
+              解绑
+            </el-button>
           </template>
         </el-table-column>
       </el-table>
 
       <div class="pagination">
-        <el-pagination background layout="prev, pager, next" :total="boundUsersTotal" :page-size="10" />
+        <el-pagination
+          background
+          layout="total, prev, pager, next"
+          :total="boundUsersTotal"
+          :page-size="10"
+        />
       </div>
     </el-dialog>
-
   </div>
 </template>
 
@@ -197,6 +384,7 @@ export default {
   name: 'SocialIdentity',
   data() {
     return {
+      viewMode: 'grid',
       providers: [
         {
           key: 'wechat',
@@ -204,6 +392,7 @@ export default {
           type: 'OAuth2',
           icon: 'el-icon-chat-dot-round',
           color: '#07c160',
+          gradient: 'linear-gradient(135deg, #07c160 0%, #10b981 100%)',
           enabled: true,
           connected: true,
           todayLogins: 128,
@@ -215,6 +404,7 @@ export default {
           type: 'OAuth2',
           icon: 'el-icon-sunny',
           color: '#e6162d',
+          gradient: 'linear-gradient(135deg, #e6162d 0%, #ef4444 100%)',
           enabled: true,
           connected: true,
           todayLogins: 45,
@@ -226,19 +416,13 @@ export default {
           type: 'OAuth2',
           icon: 'el-icon-cpu',
           color: '#24292e',
+          gradient: 'linear-gradient(135deg, #24292e 0%, #374151 100%)',
           enabled: false,
           connected: false,
           todayLogins: 0,
           totalUsers: 0
         }
       ],
-      socialSettings: {
-        enabled: true,
-        displayMode: 'button',
-        autoRegister: true,
-        allowBind: true,
-        defaultGroup: 'user'
-      },
       configDialogVisible: false,
       addDialogVisible: false,
       usersDialogVisible: false,
@@ -254,30 +438,61 @@ export default {
           nickname: 'name',
           email: 'email',
           avatar: 'avatar_url'
-        }
+        },
+        autoRegister: true,
+        allowBind: true,
+        defaultGroup: 'user'
       },
       configRules: {
         clientId: [{ required: true, message: '请输入Client ID', trigger: 'blur' }],
         clientSecret: [{ required: true, message: '请输入Client Secret', trigger: 'blur' }]
       },
+      fieldLabels: {
+        id: '用户ID',
+        username: '用户名',
+        nickname: '昵称',
+        email: '邮箱',
+        avatar: '头像'
+      },
       availableProviders: [
-        { key: 'dingtalk', name: '钉钉', icon: 'el-icon-bell', color: '#3370ff' },
-        { key: 'feishu', name: '飞书', icon: 'el-icon-document', color: '#3370ff' },
-        { key: 'qq', name: 'QQ', icon: 'el-icon-chat-square', color: '#12b7f5' },
-        { key: 'google', name: 'Google', icon: 'el-icon-search', color: '#4285f4' }
+        { key: 'dingtalk', name: '钉钉', icon: 'el-icon-bell', color: '#3370ff', type: 'OAuth2', gradient: 'linear-gradient(135deg, #3370ff 0%, #3b82f6 100%)' },
+        { key: 'feishu', name: '飞书', icon: 'el-icon-document', color: '#00d6b9', type: 'OAuth2', gradient: 'linear-gradient(135deg, #00d6b9 0%, #14b8a6 100%)' },
+        { key: 'qq', name: 'QQ', icon: 'el-icon-chat-square', color: '#12b7f5', type: 'OAuth2', gradient: 'linear-gradient(135deg, #12b7f5 0%, #0ea5e9 100%)' },
+        { key: 'google', name: 'Google', icon: 'el-icon-search', color: '#4285f4', type: 'OAuth2', gradient: 'linear-gradient(135deg, #4285f4 0%, #3b82f6 100%)' }
       ],
       boundUsers: [
-        { username: 'zhangsan', socialId: '12345678', socialName: '张三', bindTime: '2023-11-01 10:00:00' },
-        { username: 'lisi', socialId: '87654321', socialName: '李四', bindTime: '2023-11-05 14:30:00' }
+        { username: 'zhangsan', socialId: '12345678', socialName: '张三', bindTime: '2023-11-01 10:00:00', avatar: '' },
+        { username: 'lisi', socialId: '87654321', socialName: '李四', bindTime: '2023-11-05 14:30:00', avatar: '' }
       ],
-      boundUsersTotal: 2
+      boundUsersTotal: 2,
+      socialLoginRate: 35
+    }
+  },
+  computed: {
+    enabledCount() {
+      return this.providers.filter(p => p.enabled).length
+    },
+    totalUsers() {
+      return this.providers.reduce((sum, p) => sum + (p.totalUsers || 0), 0)
+    },
+    todayLogins() {
+      return this.providers.reduce((sum, p) => sum + (p.todayLogins || 0), 0)
     }
   },
   methods: {
+    refreshData() {
+      this.$message.success('数据已刷新')
+    },
     handleToggle(provider) {
       const status = provider.enabled ? '启用' : '禁用'
       this.$message.success(`${provider.name}已${status}`)
     },
+    handleSettingsChange(val) {
+      this.$message.success(`社交登录已${val ? '启用' : '禁用'}`)
+    },
+    saveSettings() {
+      this.$message.success('设置已保存')
+    },
     configureProvider(provider) {
       this.currentProvider = provider
       this.providerConfig = {
@@ -300,15 +515,11 @@ export default {
       this.usersDialogVisible = true
     },
     deleteProvider(provider) {
-      this.$confirm(`确定删除 ${provider.name} 身份源吗？`, '提示', {
-        type: 'warning'
-      }).then(() => {
-        const index = this.providers.findIndex(p => p.key === provider.key)
-        if (index > -1) {
-          this.providers.splice(index, 1)
-          this.$message.success('删除成功')
-        }
-      })
+      const index = this.providers.findIndex(p => p.key === provider.key)
+      if (index > -1) {
+        this.providers.splice(index, 1)
+        this.$message.success('删除成功')
+      }
     },
     addSocialProvider() {
       this.addDialogVisible = true
@@ -317,7 +528,6 @@ export default {
       this.addDialogVisible = false
       const newProvider = {
         ...provider,
-        type: 'OAuth2',
         enabled: false,
         connected: false,
         todayLogins: 0,
@@ -327,12 +537,6 @@ export default {
       this.$message.success(`已添加 ${provider.name}，请进行配置`)
       this.configureProvider(newProvider)
     },
-    handleSettingsChange(val) {
-      this.$message.success(`社交登录已${val ? '启用' : '禁用'}`)
-    },
-    saveSettings() {
-      this.$message.success('设置已保存')
-    },
     copyRedirectUri() {
       this.$copyText(this.providerConfig.redirectUri).then(() => {
         this.$message.success('已复制到剪贴板')
@@ -363,172 +567,473 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.social-page {
-  padding: 20px;
+.social-identity-page {
+  padding: 24px;
 
+  // 页面头部
   .page-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 20px;
+    margin-bottom: 24px;
 
-    .page-title {
-      font-size: 20px;
-      font-weight: 600;
-      margin-bottom: 8px;
-    }
+    .header-content {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      margin-bottom: 24px;
 
-    .page-desc {
-      color: #909399;
+      .title-section {
+        .page-title {
+          font-size: 24px;
+          font-weight: 600;
+          color: #1a1a1a;
+          margin: 0 0 8px 0;
+        }
+
+        .page-desc {
+          font-size: 14px;
+          color: #666;
+          margin: 0;
+        }
+      }
+
+      .header-actions {
+        display: flex;
+        gap: 12px;
+      }
     }
-  }
 
-  .provider-card {
-    border-radius: 10px;
-    margin-bottom: 20px;
+    // 统计卡片
+    .stats-row {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 16px;
 
-    &.provider-enabled {
-      border-color: #67c23a;
+      .stat-card {
+        background: #fff;
+        border-radius: 12px;
+        padding: 20px;
+        display: flex;
+        align-items: center;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+        border: 1px solid #e8e8e8;
+
+        .stat-icon {
+          width: 48px;
+          height: 48px;
+          border-radius: 12px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-right: 16px;
+          font-size: 24px;
+
+          &.enabled {
+            background: #e6f7e6;
+            color: #52c41a;
+          }
+
+          &.users {
+            background: #e6f4ff;
+            color: #1890ff;
+          }
+
+          &.logins {
+            background: #fff7e6;
+            color: #faad14;
+          }
+
+          &.rate {
+            background: #f6ffed;
+            color: #73d13d;
+          }
+        }
+
+        .stat-value {
+          font-size: 24px;
+          font-weight: 600;
+          color: #1a1a1a;
+          line-height: 1.2;
+        }
+
+        .stat-label {
+          font-size: 13px;
+          color: #666;
+          margin-top: 4px;
+        }
+      }
     }
+  }
 
-    .provider-header {
+  // 身份源列表
+  .providers-section {
+    margin-bottom: 24px;
+
+    .section-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      margin-bottom: 15px;
+      margin-bottom: 16px;
+
+      .section-title {
+        font-size: 16px;
+        font-weight: 600;
+        color: #1a1a1a;
+      }
+    }
+
+    .providers-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+      gap: 16px;
+
+      .provider-card {
+        background: #fff;
+        border-radius: 12px;
+        border: 1px solid #e8e8e8;
+        padding: 20px;
+        transition: all 0.3s ease;
+
+        &:hover {
+          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+        }
+
+        &.is-enabled {
+          border-color: #d9f7be;
+        }
+
+        &.is-error {
+          border-color: #ffccc7;
+        }
+
+        .card-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: flex-start;
+          margin-bottom: 16px;
+
+          .provider-icon {
+            width: 56px;
+            height: 56px;
+            border-radius: 14px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #fff;
+            font-size: 28px;
+          }
+        }
+
+        .card-body {
+          .provider-name {
+            font-size: 16px;
+            font-weight: 600;
+            color: #1a1a1a;
+            margin: 0 0 4px 0;
+          }
+
+          .provider-type {
+            font-size: 13px;
+            color: #999;
+            margin-bottom: 12px;
+          }
+
+          .connection-status {
+            display: flex;
+            align-items: center;
+            font-size: 13px;
+            margin-bottom: 16px;
+
+            .status-dot {
+              width: 8px;
+              height: 8px;
+              border-radius: 50%;
+              margin-right: 8px;
+
+              &.connected {
+                background: #52c41a;
+              }
+
+              &.error {
+                background: #ff4d4f;
+              }
+            }
+
+            .status-text {
+              color: #666;
+            }
+          }
+
+          .provider-stats {
+            display: flex;
+            gap: 24px;
+            padding: 12px;
+            background: #f5f5f5;
+            border-radius: 8px;
+
+            .stat-item {
+              display: flex;
+              flex-direction: column;
+
+              .stat-num {
+                font-size: 18px;
+                font-weight: 600;
+                color: #1a1a1a;
+              }
+
+              .stat-label {
+                font-size: 12px;
+                color: #999;
+                margin-top: 2px;
+              }
+            }
+          }
+        }
+
+        .card-footer {
+          display: flex;
+          gap: 16px;
+          margin-top: 16px;
+          padding-top: 16px;
+          border-top: 1px solid #f0f0f0;
+        }
+
+        &.add-card {
+          border-style: dashed;
+          background: #fafafa;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          min-height: 200px;
+
+          &:hover {
+            border-color: #1890ff;
+            background: #e6f4ff;
+          }
+
+          .add-content {
+            text-align: center;
+
+            .add-icon {
+              width: 56px;
+              height: 56px;
+              border-radius: 50%;
+              background: #e6f4ff;
+              color: #1890ff;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              font-size: 24px;
+              margin: 0 auto 12px;
+            }
+
+            .add-text {
+              font-size: 15px;
+              font-weight: 500;
+              color: #1a1a1a;
+              margin-bottom: 4px;
+            }
+
+            .add-desc {
+              font-size: 13px;
+              color: #999;
+            }
+          }
+        }
+      }
+    }
+
+    .list-view {
+      border-radius: 12px;
+
+      ::v-deep .el-card__body {
+        padding: 0;
+      }
 
       .provider-info {
         display: flex;
         align-items: center;
 
-        .provider-icon {
-          width: 48px;
-          height: 48px;
+        .provider-icon-small {
+          width: 40px;
+          height: 40px;
           border-radius: 10px;
           display: flex;
           align-items: center;
           justify-content: center;
           color: #fff;
-          font-size: 24px;
+          font-size: 18px;
           margin-right: 12px;
         }
 
         .provider-name {
-          font-size: 16px;
-          font-weight: 600;
+          font-weight: 500;
+          color: #1a1a1a;
         }
 
         .provider-type {
           font-size: 12px;
-          color: #909399;
-          margin-top: 4px;
+          color: #999;
         }
       }
-    }
 
-    .provider-stats {
-      display: flex;
-      gap: 20px;
-      padding: 15px 0;
-      border-top: 1px solid #ebeef5;
-      margin-bottom: 10px;
+      .status-badge {
+        display: inline-flex;
+        align-items: center;
+        padding: 4px 12px;
+        border-radius: 12px;
+        font-size: 13px;
+        font-weight: 500;
 
-      .stat-item {
-        display: flex;
-        flex-direction: column;
+        &.connected {
+          background: #e6f7e6;
+          color: #52c41a;
+        }
 
-        .stat-label {
-          font-size: 12px;
-          color: #909399;
+        &.error {
+          background: #fff2f0;
+          color: #ff4d4f;
         }
 
-        .stat-value {
-          font-size: 18px;
-          font-weight: 600;
-          color: #303133;
-          margin-top: 4px;
+        .status-dot-small {
+          width: 6px;
+          height: 6px;
+          border-radius: 50%;
+          margin-right: 6px;
+          background: currentColor;
         }
       }
     }
+  }
 
-    .provider-status {
-      margin-bottom: 10px;
-    }
+  // 配置表单
+  .config-form {
+    .field-mapping {
+      .mapping-item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 12px;
 
-    .provider-actions {
-      display: flex;
-      gap: 15px;
-      padding-top: 10px;
-      border-top: 1px solid #ebeef5;
-    }
-  }
+        .mapping-label {
+          width: 100px;
+          color: #606266;
+          flex-shrink: 0;
+        }
 
-  .settings-card {
-    border-radius: 10px;
-    margin-top: 20px;
+        .el-input {
+          flex: 1;
+        }
+      }
+    }
 
     .form-hint {
       font-size: 12px;
-      color: #909399;
-      margin-top: 5px;
+      color: #999;
+      margin-top: 4px;
     }
   }
 
-  .provider-option {
-    text-align: center;
-    padding: 20px;
-    border: 1px solid #ebeef5;
-    border-radius: 10px;
-    cursor: pointer;
-    transition: all 0.3s;
-    margin-bottom: 20px;
-
-    &:hover {
-      border-color: #409eff;
-      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-    }
+  // 选择器
+  .provider-selector {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 16px;
 
-    .option-icon {
-      width: 50px;
-      height: 50px;
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: #fff;
-      font-size: 24px;
-      margin: 0 auto 10px;
-    }
+    .provider-option {
+      text-align: center;
+      padding: 24px;
+      border: 1px solid #e8e8e8;
+      border-radius: 12px;
+      cursor: pointer;
+      transition: all 0.3s;
 
-    .option-name {
-      font-size: 14px;
-    }
-  }
+      &:hover {
+        border-color: #1890ff;
+        box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);
+      }
 
-  .field-mapping {
-    .mapping-item {
-      display: flex;
-      align-items: center;
-      margin-bottom: 10px;
+      .option-icon {
+        width: 56px;
+        height: 56px;
+        border-radius: 14px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #fff;
+        font-size: 28px;
+        margin: 0 auto 12px;
+      }
 
-      span {
-        width: 80px;
-        color: #606266;
+      .option-name {
+        font-size: 15px;
+        font-weight: 500;
+        color: #1a1a1a;
+        margin-bottom: 4px;
       }
 
-      .el-input {
-        flex: 1;
+      .option-type {
+        font-size: 12px;
+        color: #999;
       }
     }
   }
 
+  // 用户列表
+  .user-cell {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
   .pagination {
-    margin-top: 15px;
+    margin-top: 16px;
     text-align: right;
   }
 
   .danger {
-    color: #f56c6c;
+    color: #ff4d4f;
+  }
+
+  .text-muted {
+    color: #999;
+  }
+}
+
+// 响应式
+@media (max-width: 1200px) {
+  .social-identity-page {
+    .page-header {
+      .stats-row {
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
+
+    .providers-section {
+      .providers-grid {
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .social-identity-page {
+    padding: 16px;
+
+    .page-header {
+      .stats-row {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    .providers-section {
+      .providers-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    .provider-selector {
+      grid-template-columns: repeat(2, 1fr);
+    }
   }
 }
 </style>
diff --git a/web/src/views/permission/apiResource/index.vue b/web/src/views/permission/apiResource/index.vue
index 2588198..1fccf08 100644
--- a/web/src/views/permission/apiResource/index.vue
+++ b/web/src/views/permission/apiResource/index.vue
@@ -1,10 +1,18 @@
 <template>
   <div class="api-resource-page">
+    <!-- 页面头部 -->
+    <div class="page-header">
+      <div class="header-content">
+        <div class="title-section">
+          <h1 class="page-title">API资源</h1>
+          <p class="page-desc">管理后端API接口权限，控制角色对API的访问</p>
+        </div>
+      </div>
+    </div>
 
     <!-- 搜索区 -->
     <el-card class="search-card" shadow="hover">
       <el-form :inline="true" :model="searchForm" size="small" class="search-form">
-
         <el-form-item label="API名称">
           <el-input v-model="searchForm.name" placeholder="请输入API名称" clearable />
         </el-form-item>
@@ -24,25 +32,16 @@
         </el-form-item>
 
         <div class="search-btn-group">
-          <el-button type="primary" icon="el-icon-search" size="mini" @click="search">查询</el-button>
+          <el-button size="mini" type="primary" icon="el-icon-search" @click="search">查询</el-button>
           <el-button size="mini" icon="el-icon-refresh" @click="reset">重置</el-button>
         </div>
-
       </el-form>
     </el-card>
 
     <!-- 列表卡片 -->
     <el-card class="table-card" shadow="hover">
-
-      <!-- 顶部操作行 -->
       <div class="table-header-bar">
-        <el-button
-          size="small"
-          type="primary"
-          icon="el-icon-plus"
-          class="add-btn"
-          @click="addResource"
-        >
+        <el-button size="small" type="primary" icon="el-icon-plus" @click="addResource">
           新增API资源
         </el-button>
         <el-button
@@ -57,7 +56,6 @@
         </el-button>
       </div>
 
-      <!-- 表格 -->
       <el-table
         v-loading="loading"
         :data="tableData"
@@ -76,7 +74,7 @@
         </el-table-column>
         <el-table-column prop="method" label="方法" width="100">
           <template slot-scope="{ row }">
-            <el-tag :type="getMethodType(row.method)" size="small">{{ row.method }}</el-tag>
+            <el-tag :type="getMethodType(row.method)" size="small" effect="dark">{{ row.method }}</el-tag>
           </template>
         </el-table-column>
         <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
@@ -107,7 +105,6 @@
           @current-change="pageChange"
         />
       </div>
-
     </el-card>
 
     <!-- 新增/编辑API资源对话框 -->
@@ -162,7 +159,6 @@
         <el-button type="primary" :loading="submitLoading" @click="submitForm">确 定</el-button>
       </div>
     </el-dialog>
-
   </div>
 </template>
 
@@ -190,15 +186,11 @@ export default {
       currentPage: 1,
       total: 6,
       selectedRows: [],
-
-      // 对话框
       dialogVisible: false,
       dialogTitle: '新增API资源',
       isEdit: false,
       submitLoading: false,
       currentId: null,
-
-      // 表单
       resourceForm: {
         name: '',
         path: '',
@@ -206,16 +198,12 @@ export default {
         description: ''
       },
       resourceRules: {
-        name: [
-          { required: true, message: '请输入API名称', trigger: 'blur' }
-        ],
+        name: [{ required: true, message: '请输入API名称', trigger: 'blur' }],
         path: [
           { required: true, message: '请输入请求路径', trigger: 'blur' },
           { pattern: /^\/.*/, message: '路径必须以/开头', trigger: 'blur' }
         ],
-        method: [
-          { required: true, message: '请选择请求方法', trigger: 'change' }
-        ]
+        method: [{ required: true, message: '请选择请求方法', trigger: 'change' }]
       }
     }
   },
@@ -224,8 +212,7 @@ export default {
       this.loading = true
       setTimeout(() => {
         this.loading = false
-        this.$message.success('查询成功')
-      }, 500)
+      }, 300)
     },
     reset() {
       this.searchForm = {
@@ -275,11 +262,11 @@ export default {
     },
     getMethodType(method) {
       const typeMap = {
-        'GET': 'success',
-        'POST': 'primary',
-        'PUT': 'warning',
-        'DELETE': 'danger',
-        'PATCH': 'info'
+        GET: 'success',
+        POST: 'primary',
+        PUT: 'warning',
+        DELETE: 'danger',
+        PATCH: 'info'
       }
       return typeMap[method] || 'info'
     },
@@ -320,10 +307,7 @@ export default {
             if (this.isEdit) {
               const index = this.tableData.findIndex(item => item.id === this.currentId)
               if (index > -1) {
-                this.tableData[index] = {
-                  ...this.tableData[index],
-                  ...this.resourceForm
-                }
+                this.tableData[index] = { ...this.tableData[index], ...this.resourceForm }
               }
               this.$message.success('修改成功')
             } else {
@@ -347,54 +331,73 @@ export default {
 
 <style lang="scss" scoped>
 .api-resource-page {
-  padding: 20px;
+  padding: 24px;
 
-  .search-card {
-    margin-bottom: 16px;
-    border-radius: 10px;
-  }
+  // 页面头部
+  .page-header {
+    margin-bottom: 24px;
 
-  .search-form {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
+    .header-content {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+
+      .title-section {
+        .page-title {
+          font-size: 24px;
+          font-weight: 600;
+          color: #1a1a1a;
+          margin: 0 0 8px 0;
+        }
 
-    .el-form-item {
-      margin-right: 20px;
-      margin-bottom: 12px;
+        .page-desc {
+          font-size: 14px;
+          color: #666;
+          margin: 0;
+        }
+      }
+
+      .header-actions {
+        display: flex;
+        gap: 12px;
+      }
     }
+  }
+
+  .search-card {
+    margin-bottom: 16px;
+    border-radius: 12px;
 
-    .search-btn-group {
+    .search-form {
       display: flex;
+      flex-wrap: wrap;
       align-items: center;
-      margin-left: auto;
 
-      button {
-        margin-left: 8px;
+      .el-form-item {
+        margin-right: 20px;
+        margin-bottom: 0;
+      }
+
+      .search-btn-group {
+        display: flex;
+        align-items: center;
+        margin-left: auto;
+
+        button {
+          margin-left: 8px;
+        }
       }
     }
   }
 
   .table-card {
-    border-radius: 10px;
-    padding-bottom: 10px;
+    border-radius: 12px;
 
     .table-header-bar {
       display: flex;
       justify-content: flex-start;
       gap: 10px;
-      margin-bottom: 12px;
-
-      .add-btn {
-        border: none !important;
-        background-color: #409eff20;
-        color: #409eff;
-        font-weight: 500;
-      }
-
-      .add-btn:hover {
-        background-color: #409eff30;
-      }
+      margin-bottom: 16px;
     }
 
     .resource-table {
@@ -419,7 +422,7 @@ export default {
     }
 
     .pagination-box {
-      margin-top: 15px;
+      margin-top: 16px;
       text-align: right;
     }
   }
@@ -434,10 +437,22 @@ export default {
 }
 
 .danger {
-  color: #f56c6c;
+  color: #ff4d4f;
 }
 
-.danger:hover {
-  color: #f78989;
+@media (max-width: 768px) {
+  .api-resource-page {
+    padding: 16px;
+
+    .search-card {
+      .search-form {
+        .search-btn-group {
+          margin-left: 0;
+          margin-top: 12px;
+          width: 100%;
+        }
+      }
+    }
+  }
 }
 </style>
diff --git a/web/src/views/permission/generalResource/index.vue b/web/src/views/permission/generalResource/index.vue
index 3e19f9f..59f4d91 100644
--- a/web/src/views/permission/generalResource/index.vue
+++ b/web/src/views/permission/generalResource/index.vue
@@ -1,10 +1,18 @@
 <template>
   <div class="general-resource-page">
+    <!-- 页面头部 -->
+    <div class="page-header">
+      <div class="header-content">
+        <div class="title-section">
+          <h1 class="page-title">常规资源</h1>
+          <p class="page-desc">管理系统菜单、按钮和页面元素等常规资源</p>
+        </div>
+      </div>
+    </div>
 
     <!-- 搜索区 -->
     <el-card class="search-card" shadow="hover">
       <el-form :inline="true" :model="searchForm" size="small" class="search-form">
-
         <el-form-item label="资源名称">
           <el-input v-model="searchForm.name" placeholder="请输入资源名称" clearable />
         </el-form-item>
@@ -18,25 +26,16 @@
         </el-form-item>
 
         <div class="search-btn-group">
-          <el-button type="primary" icon="el-icon-search" size="mini" @click="search">查询</el-button>
+          <el-button size="mini" type="primary" icon="el-icon-search" @click="search">查询</el-button>
           <el-button size="mini" icon="el-icon-refresh" @click="reset">重置</el-button>
         </div>
-
       </el-form>
     </el-card>
 
-    <!-- 列表卡片 -->
+    <!-- 树形表格 -->
     <el-card class="table-card" shadow="hover">
-
-      <!-- 顶部操作行 -->
       <div class="table-header-bar">
-        <el-button
-          size="small"
-          type="primary"
-          icon="el-icon-plus"
-          class="add-btn"
-          @click="addResource"
-        >
+        <el-button size="small" type="primary" icon="el-icon-plus" @click="addResource">
           新增资源
         </el-button>
         <el-button
@@ -51,10 +50,9 @@
         </el-button>
       </div>
 
-      <!-- 树形表格 -->
       <el-table
         v-loading="loading"
-        :data="tableData"
+        :data="filteredTableData"
         class="resource-table"
         :header-cell-style="tableHeaderStyle"
         row-key="id"
@@ -65,7 +63,7 @@
         <el-table-column type="selection" width="55" />
         <el-table-column prop="name" label="资源名称" min-width="200">
           <template slot-scope="{ row }">
-            <i :class="getResourceIcon(row.type)" style="margin-right: 8px; color: #909399;" />
+            <i :class="getResourceIcon(row.type)" style="margin-right: 8px; color: #909399" />
             <span>{{ row.name }}</span>
           </template>
         </el-table-column>
@@ -84,23 +82,24 @@
         <el-table-column prop="sort" label="排序" width="80" align="center" />
         <el-table-column prop="status" label="状态" width="80">
           <template slot-scope="{ row }">
-            <el-switch v-model="row.status" active-value="enabled" inactive-value="disabled" @change="handleStatusChange(row)" />
+            <el-switch
+              v-model="row.status"
+              active-value="enabled"
+              inactive-value="disabled"
+              @change="handleStatusChange(row)"
+            />
           </template>
         </el-table-column>
         <el-table-column label="操作" width="180" fixed="right">
           <template slot-scope="{ row }">
             <el-button size="mini" type="text" icon="el-icon-plus" @click="addChild(row)">添加子项</el-button>
             <el-button size="mini" type="text" icon="el-icon-edit" @click="editResource(row)">编辑</el-button>
-            <el-popconfirm
-              title="确定删除该资源吗？"
-              @confirm="deleteResource(row)"
-            >
+            <el-popconfirm title="确定删除该资源吗？" @confirm="deleteResource(row)">
               <el-button slot="reference" size="mini" type="text" class="danger" icon="el-icon-delete">删除</el-button>
             </el-popconfirm>
           </template>
         </el-table-column>
       </el-table>
-
     </el-card>
 
     <!-- 新增/编辑资源对话框 -->
@@ -149,7 +148,7 @@
           <el-input v-model="resourceForm.path" placeholder="菜单填路由，按钮填权限标识" />
         </el-form-item>
 
-        <el-form-item label="图标" v-if="resourceForm.type === 'menu'">
+        <el-form-item v-if="resourceForm.type === 'menu'" label="图标">
           <el-input v-model="resourceForm.icon" placeholder="请输入图标类名，如：el-icon-user" />
         </el-form-item>
 
@@ -175,7 +174,6 @@
         <el-button type="primary" :loading="submitLoading" @click="submitForm">确 定</el-button>
       </div>
     </el-dialog>
-
   </div>
 </template>
 
@@ -239,15 +237,11 @@ export default {
         }
       ],
       selectedRows: [],
-
-      // 对话框
       dialogVisible: false,
       dialogTitle: '新增资源',
       isEdit: false,
       submitLoading: false,
       currentId: null,
-
-      // 表单
       resourceForm: {
         parentId: null,
         type: 'menu',
@@ -259,29 +253,46 @@ export default {
         status: 'enabled'
       },
       resourceRules: {
-        type: [
-          { required: true, message: '请选择资源类型', trigger: 'change' }
-        ],
-        name: [
-          { required: true, message: '请输入资源名称', trigger: 'blur' }
-        ],
-        code: [
-          { required: true, message: '请输入资源编码', trigger: 'blur' }
-        ]
+        type: [{ required: true, message: '请选择资源类型', trigger: 'change' }],
+        name: [{ required: true, message: '请输入资源名称', trigger: 'blur' }],
+        code: [{ required: true, message: '请输入资源编码', trigger: 'blur' }]
       },
       resourceOptions: []
     }
   },
+  computed: {
+    filteredTableData() {
+      if (!this.searchForm.name && !this.searchForm.type) {
+        return this.tableData
+      }
+      return this.filterTree(this.tableData)
+    }
+  },
   mounted() {
     this.generateResourceOptions()
   },
   methods: {
+    filterTree(data) {
+      return data.filter(item => {
+        let match = true
+        if (this.searchForm.name) {
+          match = item.name.toLowerCase().includes(this.searchForm.name.toLowerCase())
+        }
+        if (this.searchForm.type && match) {
+          match = item.type === this.searchForm.type
+        }
+        if (item.children && item.children.length) {
+          item.children = this.filterTree(item.children)
+          if (item.children.length) match = true
+        }
+        return match
+      })
+    },
     search() {
       this.loading = true
       setTimeout(() => {
         this.loading = false
-        this.$message.success('查询成功')
-      }, 500)
+      }, 300)
     },
     reset() {
       this.searchForm = { name: '', type: '' }
@@ -324,10 +335,12 @@ export default {
     batchDelete() {
       this.$confirm(`确定删除选中的 ${this.selectedRows.length} 个资源吗？`, '提示', {
         type: 'warning'
-      }).then(() => {
-        this.selectedRows = []
-        this.$message.success('批量删除成功')
-      }).catch(() => {})
+      })
+        .then(() => {
+          this.selectedRows = []
+          this.$message.success('批量删除成功')
+        })
+        .catch(() => {})
     },
     handleStatusChange(row) {
       const statusText = row.status === 'enabled' ? '启用' : '禁用'
@@ -335,23 +348,22 @@ export default {
     },
     getResourceIcon(type) {
       const iconMap = {
-        'menu': 'el-icon-folder-opened',
-        'button': 'el-icon-mouse',
-        'element': 'el-icon-s-operation'
+        menu: 'el-icon-folder-opened',
+        button: 'el-icon-mouse',
+        element: 'el-icon-s-operation'
       }
       return iconMap[type] || 'el-icon-question'
     },
     getTypeTag(type) {
-      const tagMap = { 'menu': '', 'button': 'success', 'element': 'warning' }
+      const tagMap = { menu: '', button: 'success', element: 'warning' }
       return tagMap[type] || 'info'
     },
     getTypeText(type) {
-      const textMap = { 'menu': '菜单', 'button': '按钮', 'element': '页面元素' }
+      const textMap = { menu: '菜单', button: '按钮', element: '页面元素' }
       return textMap[type] || type
     },
     generateResourceOptions() {
-      // 生成级联选择器的数据
-      const flatten = (data) => {
+      const flatten = data => {
         return data.map(item => {
           const result = { id: item.id, name: item.name }
           if (item.children && item.children.length) {
@@ -404,54 +416,73 @@ export default {
 
 <style lang="scss" scoped>
 .general-resource-page {
-  padding: 20px;
+  padding: 24px;
 
-  .search-card {
-    margin-bottom: 16px;
-    border-radius: 10px;
-  }
+  // 页面头部
+  .page-header {
+    margin-bottom: 24px;
+
+    .header-content {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+
+      .title-section {
+        .page-title {
+          font-size: 24px;
+          font-weight: 600;
+          color: #1a1a1a;
+          margin: 0 0 8px 0;
+        }
 
-  .search-form {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
+        .page-desc {
+          font-size: 14px;
+          color: #666;
+          margin: 0;
+        }
+      }
 
-    .el-form-item {
-      margin-right: 20px;
-      margin-bottom: 12px;
+      .header-actions {
+        display: flex;
+        gap: 12px;
+      }
     }
+  }
+
+  .search-card {
+    margin-bottom: 16px;
+    border-radius: 12px;
 
-    .search-btn-group {
+    .search-form {
       display: flex;
+      flex-wrap: wrap;
       align-items: center;
-      margin-left: auto;
 
-      button {
-        margin-left: 8px;
+      .el-form-item {
+        margin-right: 20px;
+        margin-bottom: 0;
+      }
+
+      .search-btn-group {
+        display: flex;
+        align-items: center;
+        margin-left: auto;
+
+        button {
+          margin-left: 8px;
+        }
       }
     }
   }
 
   .table-card {
-    border-radius: 10px;
-    padding-bottom: 10px;
+    border-radius: 12px;
 
     .table-header-bar {
       display: flex;
       justify-content: flex-start;
       gap: 10px;
-      margin-bottom: 12px;
-
-      .add-btn {
-        border: none !important;
-        background-color: #409eff20;
-        color: #409eff;
-        font-weight: 500;
-      }
-
-      .add-btn:hover {
-        background-color: #409eff30;
-      }
+      margin-bottom: 16px;
     }
 
     .resource-table {
@@ -486,10 +517,22 @@ export default {
 }
 
 .danger {
-  color: #f56c6c;
+  color: #ff4d4f;
 }
 
-.danger:hover {
-  color: #f78989;
+@media (max-width: 768px) {
+  .general-resource-page {
+    padding: 16px;
+
+    .search-card {
+      .search-form {
+        .search-btn-group {
+          margin-left: 0;
+          margin-top: 12px;
+          width: 100%;
+        }
+      }
+    }
+  }
 }
 </style>
diff --git a/web/src/views/security/attackProtection/index.vue b/web/src/views/security/attackProtection/index.vue
deleted file mode 100644
index e957930..0000000
--- a/web/src/views/security/attackProtection/index.vue
+++ /dev/null
@@ -1,420 +0,0 @@
-<template>
-  <div class="attack-protection-page">
-
-    <!-- 攻击防护开关卡片 -->
-    <el-row :gutter="20">
-      <el-col :span="6" v-for="item in protectionModules" :key="item.key">
-        <el-card class="protection-card" shadow="hover">
-          <div class="protection-header">
-            <div class="protection-icon" :style="{ background: item.color }">
-              <i :class="item.icon" />
-            </div>
-            <el-switch v-model="item.enabled" @change="handleModuleChange(item)" />
-          </div>
-          <div class="protection-title">{{ item.name }}</div>
-          <div class="protection-desc">{{ item.description }}</div>
-          <div class="protection-stats" v-if="item.enabled">
-            <span class="stat-item">
-              <span class="stat-label">今日拦截</span>
-              <span class="stat-value" :style="{ color: item.color }">{{ item.todayBlocked }}</span>
-            </span>
-            <span class="stat-item">
-              <span class="stat-label">累计拦截</span>
-              <span class="stat-value">{{ item.totalBlocked }}</span>
-            </span>
-          </div>
-        </el-card>
-      </el-col>
-    </el-row>
-
-    <!-- 防护配置 -->
-    <el-card class="config-card" shadow="hover">
-      <div slot="header">
-        <span>防护配置</span>
-      </div>
-
-      <el-tabs v-model="activeTab">
-        <el-tab-pane label="IP封禁" name="ip">
-          <div class="tab-header">
-            <el-button type="primary" size="small" icon="el-icon-plus" @click="addIpBlock">添加封禁IP</el-button>
-            <el-button size="small" icon="el-icon-upload2" @click="importIpList">批量导入</el-button>
-          </div>
-
-          <el-table :data="ipBlockList" size="small" class="config-table">
-            <el-table-column prop="ip" label="IP地址" width="150" />
-            <el-table-column prop="type" label="类型" width="100">
-              <template slot-scope="{ row }">
-                <el-tag :type="row.type === 'manual' ? 'warning' : 'info'" size="mini">
-                  {{ row.type === 'manual' ? '手动' : '自动' }}
-                </el-tag>
-              </template>
-            </el-table-column>
-            <el-table-column prop="reason" label="封禁原因" min-width="200" show-overflow-tooltip />
-            <el-table-column prop="blockTime" label="封禁时间" width="160" />
-            <el-table-column prop="expireTime" label="过期时间" width="160" />
-            <el-table-column prop="status" label="状态" width="80">
-              <template slot-scope="{ row }">
-                <el-tag :type="row.status === 'active' ? 'danger' : 'success'" size="mini">
-                  {{ row.status === 'active' ? '封禁中' : '已解封' }}
-                </el-tag>
-              </template>
-            </el-table-column>
-            <el-table-column label="操作" width="120" fixed="right">
-              <template slot-scope="{ row }">
-                <el-button v-if="row.status === 'active'" size="mini" type="text" @click="unblockIp(row)">解封</el-button>
-                <el-button size="mini" type="text" class="danger" @click="deleteIpBlock(row)">删除</el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-
-          <div class="pagination">
-            <el-pagination
-              background
-              layout="prev, pager, next"
-              :total="ipBlockTotal"
-              :page-size="10"
-            />
-          </div>
-        </el-tab-pane>
-
-        <el-tab-pane label="请求限流" name="rate">
-          <el-form :model="rateLimitConfig" label-width="150px" class="config-form">
-            <el-form-item label="全局QPS限制">
-              <el-input-number v-model="rateLimitConfig.globalQps" :min="100" :max="10000" :step="100" />
-              <span class="form-tip">请求/秒</span>
-            </el-form-item>
-            <el-form-item label="单IP QPS限制">
-              <el-input-number v-model="rateLimitConfig.ipQps" :min="10" :max="1000" :step="10" />
-              <span class="form-tip">请求/秒</span>
-            </el-form-item>
-            <el-form-item label="单用户 QPS限制">
-              <el-input-number v-model="rateLimitConfig.userQps" :min="10" :max="500" :step="10" />
-              <span class="form-tip">请求/秒</span>
-            </el-form-item>
-            <el-form-item label="限流触发动作">
-              <el-radio-group v-model="rateLimitConfig.action">
-                <el-radio label="block">拒绝请求</el-radio>
-                <el-radio label="captcha">要求验证码</el-radio>
-                <el-radio label="delay">延迟响应</el-radio>
-              </el-radio-group>
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" @click="saveRateLimitConfig">保存配置</el-button>
-            </el-form-item>
-          </el-form>
-        </el-tab-pane>
-
-        <el-tab-pane label="敏感词过滤" name="sensitive">
-          <div class="tab-header">
-            <el-button type="primary" size="small" icon="el-icon-plus" @click="addSensitiveWord">添加敏感词</el-button>
-            <el-button size="small" icon="el-icon-upload2" @click="importWords">批量导入</el-button>
-          </div>
-
-          <el-tag
-            v-for="word in sensitiveWords"
-            :key="word.id"
-            closable
-            :type="word.level === 'high' ? 'danger' : 'warning'"
-            @close="removeSensitiveWord(word)"
-            class="sensitive-tag"
-          >
-            {{ word.word }}
-          </el-tag>
-
-          <el-empty v-if="sensitiveWords.length === 0" description="暂无敏感词" />
-        </el-tab-pane>
-      </el-tabs>
-    </el-card>
-
-    <!-- 攻击日志 -->
-    <el-card class="log-card" shadow="hover">
-      <div slot="header">
-        <span>攻击拦截日志</span>
-        <el-button style="float: right; padding: 3px 0" type="text" @click="refreshLogs">刷新</el-button>
-      </div>
-
-      <el-table :data="attackLogs" size="small" class="log-table">
-        <el-table-column prop="time" label="时间" width="160" />
-        <el-table-column prop="type" label="攻击类型" width="120">
-          <template slot-scope="{ row }">
-            <el-tag :type="getAttackTypeTag(row.type)" size="mini">{{ row.type }}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="ip" label="来源IP" width="130" />
-        <el-table-column prop="target" label="攻击目标" min-width="200" show-overflow-tooltip />
-        <el-table-column prop="action" label="处理动作" width="100">
-          <template slot-scope="{ row }">
-            <span :class="{ 'text-danger': row.action === 'blocked' }">
-              {{ row.action === 'blocked' ? '已拦截' : '已告警' }}
-            </span>
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <div class="pagination">
-        <el-pagination
-          background
-          layout="prev, pager, next"
-          :total="logTotal"
-          :page-size="10"
-        />
-      </div>
-    </el-card>
-
-    <!-- 添加IP封禁对话框 -->
-    <el-dialog title="添加封禁IP" :visible.sync="ipDialogVisible" width="450px">
-      <el-form :model="ipForm" label-width="100px" :rules="ipRules" ref="ipForm">
-        <el-form-item label="IP地址" prop="ip">
-          <el-input v-model="ipForm.ip" placeholder="支持单个IP或CIDR格式" />
-        </el-form-item>
-        <el-form-item label="封禁原因" prop="reason">
-          <el-input v-model="ipForm.reason" type="textarea" :rows="2" placeholder="请输入封禁原因" />
-        </el-form-item>
-        <el-form-item label="封禁时长">
-          <el-select v-model="ipForm.duration" style="width: 100%">
-            <el-option label="1小时" value="1h" />
-            <el-option label="24小时" value="24h" />
-            <el-option label="7天" value="7d" />
-            <el-option label="30天" value="30d" />
-            <el-option label="永久" value="forever" />
-          </el-select>
-        </el-form-item>
-      </el-form>
-      <div slot="footer">
-        <el-button @click="ipDialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="submitIpBlock">确定</el-button>
-      </div>
-    </el-dialog>
-
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'AttackProtection',
-  data() {
-    return {
-      protectionModules: [
-        { key: 'sql', name: 'SQL注入防护', icon: 'el-icon-coin', color: '#f56c6c', enabled: true, description: '防止恶意SQL注入攻击', todayBlocked: 12, totalBlocked: 1258 },
-        { key: 'xss', name: 'XSS攻击防护', icon: 'el-icon-warning', color: '#e6a23c', enabled: true, description: '防止跨站脚本攻击', todayBlocked: 8, totalBlocked: 892 },
-        { key: 'csrf', name: 'CSRF防护', icon: 'el-icon-lock', color: '#67c23a', enabled: true, description: '防止跨站请求伪造', todayBlocked: 3, totalBlocked: 456 },
-        { key: 'brute', name: '暴力破解防护', icon: 'el-icon-key', color: '#409eff', enabled: true, description: '防止密码暴力破解', todayBlocked: 25, totalBlocked: 2341 }
-      ],
-      activeTab: 'ip',
-      ipBlockList: [
-        { id: 1, ip: '192.168.1.100', type: 'auto', reason: '暴力破解攻击', blockTime: '2023-12-01 10:30:00', expireTime: '2023-12-08 10:30:00', status: 'active' },
-        { id: 2, ip: '10.0.0.50', type: 'manual', reason: '恶意扫描', blockTime: '2023-12-01 09:15:00', expireTime: '永久', status: 'active' }
-      ],
-      ipBlockTotal: 2,
-      rateLimitConfig: {
-        globalQps: 1000,
-        ipQps: 100,
-        userQps: 60,
-        action: 'captcha'
-      },
-      sensitiveWords: [
-        { id: 1, word: '恶意代码', level: 'high' },
-        { id: 2, word: '攻击', level: 'medium' },
-        { id: 3, word: '入侵', level: 'high' }
-      ],
-      attackLogs: [
-        { time: '2023-12-01 14:30:25', type: 'SQL注入', ip: '192.168.1.100', target: '/api/users?id=1 OR 1=1', action: 'blocked' },
-        { time: '2023-12-01 14:28:10', type: 'XSS攻击', ip: '10.0.0.55', target: '/api/comments', action: 'blocked' },
-        { time: '2023-12-01 14:25:33', type: '暴力破解', ip: '172.16.0.20', target: '/login', action: 'blocked' }
-      ],
-      logTotal: 3,
-      ipDialogVisible: false,
-      ipForm: {
-        ip: '',
-        reason: '',
-        duration: '24h'
-      },
-      ipRules: {
-        ip: [{ required: true, message: '请输入IP地址', trigger: 'blur' }],
-        reason: [{ required: true, message: '请输入封禁原因', trigger: 'blur' }]
-      }
-    }
-  },
-  methods: {
-    handleModuleChange(item) {
-      const status = item.enabled ? '启用' : '禁用'
-      this.$message.success(`${item.name}已${status}`)
-    },
-    addIpBlock() {
-      this.ipForm = { ip: '', reason: '', duration: '24h' }
-      this.ipDialogVisible = true
-    },
-    submitIpBlock() {
-      this.$refs.ipForm.validate(valid => {
-        if (valid) {
-          this.ipBlockList.unshift({
-            id: Date.now(),
-            ip: this.ipForm.ip,
-            type: 'manual',
-            reason: this.ipForm.reason,
-            blockTime: new Date().toLocaleString(),
-            expireTime: this.ipForm.duration === 'forever' ? '永久' : this.ipForm.duration,
-            status: 'active'
-          })
-          this.ipBlockTotal++
-          this.ipDialogVisible = false
-          this.$message.success('IP封禁成功')
-        }
-      })
-    },
-    unblockIp(row) {
-      row.status = 'unblocked'
-      this.$message.success('IP已解封')
-    },
-    deleteIpBlock(row) {
-      const index = this.ipBlockList.findIndex(item => item.id === row.id)
-      if (index > -1) {
-        this.ipBlockList.splice(index, 1)
-        this.ipBlockTotal--
-        this.$message.success('删除成功')
-      }
-    },
-    importIpList() {
-      this.$message.info('批量导入功能')
-    },
-    saveRateLimitConfig() {
-      this.$message.success('限流配置已保存')
-    },
-    addSensitiveWord() {
-      this.$prompt('请输入敏感词', '添加敏感词', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消'
-      }).then(({ value }) => {
-        this.sensitiveWords.push({
-          id: Date.now(),
-          word: value,
-          level: 'medium'
-        })
-        this.$message.success('敏感词添加成功')
-      })
-    },
-    importWords() {
-      this.$message.info('批量导入敏感词')
-    },
-    removeSensitiveWord(word) {
-      const index = this.sensitiveWords.findIndex(item => item.id === word.id)
-      if (index > -1) {
-        this.sensitiveWords.splice(index, 1)
-        this.$message.success('敏感词已删除')
-      }
-    },
-    getAttackTypeTag(type) {
-      const tagMap = { 'SQL注入': 'danger', 'XSS攻击': 'warning', '暴力破解': 'primary', 'CSRF': 'success' }
-      return tagMap[type] || 'info'
-    },
-    refreshLogs() {
-      this.$message.success('日志已刷新')
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.attack-protection-page {
-  padding: 20px;
-
-  .protection-card {
-    border-radius: 10px;
-    margin-bottom: 20px;
-
-    .protection-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 15px;
-
-      .protection-icon {
-        width: 48px;
-        height: 48px;
-        border-radius: 10px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: #fff;
-        font-size: 24px;
-      }
-    }
-
-    .protection-title {
-      font-size: 16px;
-      font-weight: 600;
-      color: #303133;
-      margin-bottom: 8px;
-    }
-
-    .protection-desc {
-      font-size: 13px;
-      color: #909399;
-      margin-bottom: 15px;
-    }
-
-    .protection-stats {
-      display: flex;
-      gap: 20px;
-      padding-top: 15px;
-      border-top: 1px solid #ebeef5;
-
-      .stat-item {
-        display: flex;
-        flex-direction: column;
-
-        .stat-label {
-          font-size: 12px;
-          color: #909399;
-        }
-
-        .stat-value {
-          font-size: 20px;
-          font-weight: 600;
-          margin-top: 4px;
-        }
-      }
-    }
-  }
-
-  .config-card,
-  .log-card {
-    border-radius: 10px;
-    margin-bottom: 20px;
-
-    .tab-header {
-      margin-bottom: 15px;
-    }
-
-    .config-form {
-      max-width: 500px;
-
-      .form-tip {
-        margin-left: 10px;
-        color: #909399;
-      }
-    }
-
-    .config-table,
-    .log-table {
-      ::v-deep .el-table__header th {
-        background: #f5f7fa;
-        font-weight: bold;
-      }
-    }
-
-    .sensitive-tag {
-      margin: 0 10px 10px 0;
-    }
-
-    .pagination {
-      margin-top: 15px;
-      text-align: right;
-    }
-  }
-
-  .text-danger {
-    color: #f56c6c;
-  }
-}
-</style>
diff --git a/web/src/views/security/mfa/index.vue b/web/src/views/security/mfa/index.vue
index bbf16c9..69bcd90 100644
--- a/web/src/views/security/mfa/index.vue
+++ b/web/src/views/security/mfa/index.vue
@@ -1,142 +1,245 @@
 <template>
   <div class="mfa-page">
-
-    <!-- 全局MFA开关 -->
-    <el-card class="global-config-card" shadow="hover">
-      <div class="global-header">
-        <div>
-          <div class="global-title">多因素认证 (MFA)</div>
-          <div class="global-desc">为用户登录添加额外的安全验证层，保护账户安全</div>
+    <!-- 页面头部 -->
+    <div class="page-header">
+      <div class="header-content">
+        <div class="title-section">
+          <h1 class="page-title">多因素认证 (MFA)</h1>
+          <p class="page-desc">为用户登录添加额外的安全验证层，有效防止账户被盗用</p>
         </div>
-        <el-switch v-model="mfaEnabled" active-text="已启用" inactive-text="已禁用" @change="handleGlobalToggle" />
       </div>
-    </el-card>
 
-    <!-- MFA方式配置 -->
-    <el-row :gutter="20" style="margin-top: 20px;">
-      <el-col :span="8" v-for="method in mfaMethods" :key="method.key">
-        <el-card class="method-card" shadow="hover" :class="{ 'method-enabled': method.enabled }">
-          <div class="method-header">
-            <div class="method-icon" :style="{ background: method.color }">
-              <i :class="method.icon" />
-            </div>
-            <el-switch v-model="method.enabled" @change="handleMethodToggle(method)" />
+      <!-- 统计卡片 -->
+      <div class="stats-row">
+        <div class="stat-card">
+          <div class="stat-icon enabled">
+            <i class="el-icon-check" />
+          </div>
+          <div class="stat-info">
+            <div class="stat-value">{{ enabledUsers }}</div>
+            <div class="stat-label">已启用MFA</div>
+          </div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-icon rate">
+            <i class="el-icon-pie-chart" />
+          </div>
+          <div class="stat-info">
+            <div class="stat-value">{{ mfaRate }}%</div>
+            <div class="stat-label">启用率</div>
+          </div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-icon method">
+            <i class="el-icon-mobile-phone" />
+          </div>
+          <div class="stat-info">
+            <div class="stat-value">{{ enabledMethods }}</div>
+            <div class="stat-label">启用方式</div>
           </div>
-          <div class="method-name">{{ method.name }}</div>
-          <div class="method-desc">{{ method.description }}</div>
-          <div class="method-users" v-if="method.enabled">
-            <span class="users-count">{{ method.userCount }}</span> 位用户已绑定
+        </div>
+        <div class="stat-card">
+          <div class="stat-icon security">
+            <i class="el-icon-shield" />
           </div>
-          <div class="method-actions" v-if="method.enabled">
-            <el-button type="text" @click="configureMethod(method)">配置</el-button>
+          <div class="stat-info">
+            <div class="stat-value">{{ blockedAttacks }}</div>
+            <div class="stat-label">今日验证</div>
           </div>
-        </el-card>
-      </el-col>
-    </el-row>
-
-    <!-- MFA策略配置 -->
-    <el-card class="policy-card" shadow="hover">
-      <div slot="header">
-        <span>MFA策略配置</span>
+        </div>
       </div>
+    </div>
 
-      <el-form :model="mfaPolicy" label-width="180px" class="policy-form">
-        <el-form-item label="MFA启用范围">
-          <el-radio-group v-model="mfaPolicy.scope">
-            <el-radio label="all">所有用户</el-radio>
-            <el-radio label="admin">仅管理员</el-radio>
-            <el-radio label="custom">自定义用户组</el-radio>
-          </el-radio-group>
-        </el-form-item>
-
-        <el-form-item label="登录时MFA触发条件" v-if="mfaPolicy.scope !== 'all'">
-          <el-checkbox-group v-model="mfaPolicy.conditions">
-            <el-checkbox label="new_device">新设备登录</el-checkbox>
-            <el-checkbox label="new_location">新地点登录</el-checkbox>
-            <el-checkbox label="suspicious">可疑行为</el-checkbox>
-            <el-checkbox label="high_value">高价值操作</el-checkbox>
-          </el-checkbox-group>
-        </el-form-item>
-
-        <el-form-item label="记住设备时长">
-          <el-select v-model="mfaPolicy.rememberDays">
-            <el-option label="每次都需要" :value="0" />
-            <el-option label="1天" :value="1" />
-            <el-option label="7天" :value="7" />
-            <el-option label="30天" :value="30" />
-          </el-select>
-          <span class="form-tip">在此时间内同设备登录无需再次验证</span>
-        </el-form-item>
-
-        <el-form-item label="验证失败锁定">
-          <el-input-number v-model="mfaPolicy.maxFailures" :min="3" :max="10" />
-          <span class="form-tip">次失败后锁定账户</span>
-        </el-form-item>
-
-        <el-form-item label="备用验证码数量">
-          <el-input-number v-model="mfaPolicy.backupCodes" :min="5" :max="20" />
-          <span class="form-tip">个一次性备用验证码</span>
-        </el-form-item>
-
-        <el-form-item>
-          <el-button type="primary" @click="savePolicy">保存策略</el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
-
-    <!-- 用户MFA绑定情况 -->
-    <el-card class="user-card" shadow="hover">
-      <div slot="header">
-        <span>用户MFA绑定情况</span>
-        <el-input
-          v-model="userSearch"
-          placeholder="搜索用户"
-          size="small"
-          style="width: 200px; float: right;"
-          suffix-icon="el-icon-search"
-        />
+    <!-- MFA方式配置 -->
+    <div class="methods-section">
+      <div class="section-header">
+        <span class="section-title">认证方式配置</span>
       </div>
 
-      <el-table :data="userMfaList" size="small">
-        <el-table-column prop="username" label="用户名">
-          <template slot-scope="{ row }">
-            <div class="user-cell">
-              <el-avatar :size="32" :src="row.avatar">{{ row.username.charAt(0) }}</el-avatar>
-              <span>{{ row.username }}</span>
+      <div class="methods-grid">
+        <div
+          v-for="method in mfaMethods"
+          :key="method.key"
+          class="method-card"
+          :class="{ 'is-enabled': method.enabled }"
+        >
+          <div class="card-header">
+            <div class="method-icon" :style="{ background: method.gradient }">
+              <i :class="method.icon" />
+            </div>
+            <el-switch v-model="method.enabled" @change="handleMethodToggle(method)" />
+          </div>
+
+          <div class="card-body">
+            <h3 class="method-name">{{ method.name }}</h3>
+            <p class="method-desc">{{ method.description }}</p>
+
+            <div v-if="method.enabled" class="method-stats">
+              <div class="stat-row">
+                <span class="stat-label">绑定用户</span>
+                <span class="stat-value">{{ method.userCount }} 人</span>
+              </div>
+              <div class="stat-row">
+                <span class="stat-label">今日验证</span>
+                <span class="stat-value">{{ method.todayVerifications }} 次</span>
+              </div>
             </div>
-          </template>
-        </el-table-column>
-        <el-table-column prop="email" label="邮箱" />
-        <el-table-column prop="mfaMethod" label="绑定方式">
-          <template slot-scope="{ row }">
-            <el-tag v-if="row.mfaMethod" :type="getMethodTag(row.mfaMethod)" size="small">
-              {{ getMethodName(row.mfaMethod) }}
-            </el-tag>
-            <span v-else class="text-muted">未绑定</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="bindTime" label="绑定时间" />
-        <el-table-column prop="lastUsed" label="最后使用" />
-        <el-table-column label="操作" width="150">
-          <template slot-scope="{ row }">
-            <el-button v-if="row.mfaMethod" size="mini" type="text" @click="resetMfa(row)">重置MFA</el-button>
-            <el-button v-else size="mini" type="text" @click="enforceMfa(row)">强制启用</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <div class="pagination">
-        <el-pagination
-          background
-          layout="prev, pager, next"
-          :total="userTotal"
-          :page-size="10"
-        />
+          </div>
+
+          <div class="card-footer">
+            <el-button type="text" icon="el-icon-setting" @click="configureMethod(method)">
+              配置
+            </el-button>
+          </div>
+        </div>
       </div>
-    </el-card>
+    </div>
+
+    <!--    &lt;!&ndash; MFA策略配置 &ndash;&gt;-->
+    <!--    <el-card class="policy-card" shadow="hover">-->
+    <!--      <div slot="header">-->
+    <!--        <span>策略配置</span>-->
+    <!--        <el-button-->
+    <!--          type="primary"-->
+    <!--          size="small"-->
+    <!--          icon="el-icon-check"-->
+    <!--          style="float: right"-->
+    <!--          @click="savePolicy"-->
+    <!--        >-->
+    <!--          保存策略-->
+    <!--        </el-button>-->
+    <!--      </div>-->
+
+    <!--      <el-form :model="mfaPolicy" label-width="180px" class="policy-form">-->
+    <!--        <el-row :gutter="40">-->
+    <!--          <el-col :span="12">-->
+    <!--            <el-form-item label="MFA启用范围">-->
+    <!--              <el-radio-group v-model="mfaPolicy.scope">-->
+    <!--                <el-radio label="all">所有用户</el-radio>-->
+    <!--                <el-radio label="admin">仅管理员</el-radio>-->
+    <!--                <el-radio label="custom">自定义用户组</el-radio>-->
+    <!--              </el-radio-group>-->
+    <!--            </el-form-item>-->
+
+    <!--            <el-form-item v-if="mfaPolicy.scope !== 'all'" label="登录时MFA触发条件">-->
+    <!--              <el-checkbox-group v-model="mfaPolicy.conditions">-->
+    <!--                <el-checkbox label="new_device">新设备登录</el-checkbox>-->
+    <!--                <el-checkbox label="new_location">新地点登录</el-checkbox>-->
+    <!--                <el-checkbox label="suspicious">可疑行为</el-checkbox>-->
+    <!--                <el-checkbox label="high_value">高价值操作</el-checkbox>-->
+    <!--              </el-checkbox-group>-->
+    <!--            </el-form-item>-->
+
+    <!--            <el-form-item label="记住设备时长">-->
+    <!--              <el-select v-model="mfaPolicy.rememberDays" style="width: 200px">-->
+    <!--                <el-option label="每次都需要" :value="0" />-->
+    <!--                <el-option label="1天" :value="1" />-->
+    <!--                <el-option label="7天" :value="7" />-->
+    <!--                <el-option label="30天" :value="30" />-->
+    <!--              </el-select>-->
+    <!--              <div class="form-hint">在此时间内同设备登录无需再次验证</div>-->
+    <!--            </el-form-item>-->
+    <!--          </el-col>-->
+
+    <!--          <el-col :span="12">-->
+    <!--            <el-form-item label="验证失败锁定">-->
+    <!--              <el-input-number v-model="mfaPolicy.maxFailures" :min="3" :max="10" />-->
+    <!--              <span class="form-tip">次失败后锁定账户</span>-->
+    <!--            </el-form-item>-->
+
+    <!--            <el-form-item label="备用验证码数量">-->
+    <!--              <el-input-number v-model="mfaPolicy.backupCodes" :min="5" :max="20" />-->
+    <!--              <span class="form-tip">个一次性备用验证码</span>-->
+    <!--            </el-form-item>-->
+
+    <!--            <el-form-item label="强制启用MFA">-->
+    <!--              <el-switch v-model="mfaPolicy.enforceForAdmins" />-->
+    <!--              <div class="form-hint">管理员必须启用MFA才能登录</div>-->
+    <!--            </el-form-item>-->
+    <!--          </el-col>-->
+    <!--        </el-row>-->
+    <!--      </el-form>-->
+    <!--    </el-card>-->
+
+    <!--    &lt;!&ndash; 用户MFA绑定情况 &ndash;&gt;-->
+    <!--    <el-card class="user-card" shadow="hover">-->
+    <!--      <div slot="header">-->
+    <!--        <span>用户MFA绑定情况</span>-->
+    <!--        <div style="float: right; display: flex; gap: 12px">-->
+    <!--          <el-input-->
+    <!--            v-model="userSearch"-->
+    <!--            placeholder="搜索用户"-->
+    <!--            size="small"-->
+    <!--            style="width: 200px"-->
+    <!--            suffix-icon="el-icon-search"-->
+    <!--          />-->
+    <!--          <el-button type="primary" size="small" icon="el-icon-message" @click="notifyUnboundUsers">-->
+    <!--            提醒未绑定用户-->
+    <!--          </el-button>-->
+    <!--        </div>-->
+    <!--      </div>-->
+
+    <!--      <el-table :data="userMfaList" size="small" :header-cell-style="tableHeaderStyle">-->
+    <!--        <el-table-column prop="username" label="用户名" min-width="150">-->
+    <!--          <template slot-scope="{ row }">-->
+    <!--            <div class="user-cell">-->
+    <!--              <el-avatar :size="32" :src="row.avatar">{{ row.username.charAt(0).toUpperCase() }}</el-avatar>-->
+    <!--              <div class="user-info">-->
+    <!--                <div class="username">{{ row.username }}</div>-->
+    <!--                <div class="email">{{ row.email }}</div>-->
+    <!--              </div>-->
+    <!--            </div>-->
+    <!--          </template>-->
+    <!--        </el-table-column>-->
+    <!--        <el-table-column prop="department" label="部门" width="120" />-->
+    <!--        <el-table-column prop="role" label="角色" width="120">-->
+    <!--          <template slot-scope="{ row }">-->
+    <!--            <el-tag v-if="row.role === 'admin'" type="danger" size="small">管理员</el-tag>-->
+    <!--            <el-tag v-else type="info" size="small">普通用户</el-tag>-->
+    <!--          </template>-->
+    <!--        </el-table-column>-->
+    <!--        <el-table-column prop="mfaMethod" label="绑定方式" width="140">-->
+    <!--          <template slot-scope="{ row }">-->
+    <!--            <el-tag v-if="row.mfaMethod" :type="getMethodTag(row.mfaMethod)" size="small">-->
+    <!--              <i :class="getMethodIcon(row.mfaMethod)" style="margin-right: 4px" />-->
+    <!--              {{ getMethodName(row.mfaMethod) }}-->
+    <!--            </el-tag>-->
+    <!--            <span v-else class="text-muted">-->
+    <!--              <i class="el-icon-close" style="margin-right: 4px" />-->
+    <!--              未绑定-->
+    <!--            </span>-->
+    <!--          </template>-->
+    <!--        </el-table-column>-->
+    <!--        <el-table-column prop="bindTime" label="绑定时间" width="160" />-->
+    <!--        <el-table-column prop="lastUsed" label="最后使用" width="160" />-->
+    <!--        <el-table-column label="操作" width="150" fixed="right">-->
+    <!--          <template slot-scope="{ row }">-->
+    <!--            <el-button v-if="row.mfaMethod" size="mini" type="text" icon="el-icon-refresh" @click="resetMfa(row)">-->
+    <!--              重置-->
+    <!--            </el-button>-->
+    <!--            <el-button v-else size="mini" type="text" icon="el-icon-bell" @click="enforceMfa(row)">-->
+    <!--              提醒-->
+    <!--            </el-button>-->
+    <!--            <el-button size="mini" type="text" icon="el-icon-view" @click="viewMfaDetail(row)">-->
+    <!--              详情-->
+    <!--            </el-button>-->
+    <!--          </template>-->
+    <!--        </el-table-column>-->
+    <!--      </el-table>-->
+
+    <!--    <div class="pagination">-->
+    <!--      <el-pagination-->
+    <!--        background-->
+    <!--        layout="total, sizes, prev, pager, next"-->
+    <!--        :total="userTotal"-->
+    <!--        :page-sizes="[10, 20, 50]"-->
+    <!--        :page-size="10"-->
+    <!--      />-->
+    <!--    </div>-->
+    <!--    </el-card>-->
 
     <!-- 配置对话框 -->
-    <el-dialog :title="currentMethod.name + '配置'" :visible.sync="configDialogVisible" width="500px">
+    <el-dialog :title="currentMethod.name + ' 配置'" :visible.sync="configDialogVisible" width="500px">
       <el-form :model="methodConfig" label-width="120px">
         <el-form-item label="应用名称">
           <el-input v-model="methodConfig.issuer" placeholder="显示在验证器中的应用名称" />
@@ -158,6 +261,35 @@
       </div>
     </el-dialog>
 
+    <!-- MFA详情对话框 -->
+    <el-dialog title="MFA详情" :visible.sync="detailDialogVisible" width="500px">
+      <el-descriptions v-if="currentUser" :column="1" border>
+        <el-descriptions-item label="用户名">{{ currentUser.username }}</el-descriptions-item>
+        <el-descriptions-item label="邮箱">{{ currentUser.email }}</el-descriptions-item>
+        <el-descriptions-item label="MFA状态">
+          <el-tag v-if="currentUser.mfaMethod" type="success">已启用</el-tag>
+          <el-tag v-else type="info">未启用</el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item v-if="currentUser.mfaMethod" label="绑定方式">
+          {{ getMethodName(currentUser.mfaMethod) }}
+        </el-descriptions-item>
+        <el-descriptions-item v-if="currentUser.bindTime" label="绑定时间">
+          {{ currentUser.bindTime }}
+        </el-descriptions-item>
+        <el-descriptions-item v-if="currentUser.lastUsed" label="最后使用">
+          {{ currentUser.lastUsed }}
+        </el-descriptions-item>
+        <el-descriptions-item label="备用验证码">
+          <el-button type="text" size="small" @click="viewBackupCodes">查看备用验证码</el-button>
+        </el-descriptions-item>
+      </el-descriptions>
+      <div slot="footer">
+        <el-button @click="detailDialogVisible = false">关闭</el-button>
+        <el-button v-if="currentUser && currentUser.mfaMethod" type="warning" @click="resetMfa(currentUser)">
+          重置MFA
+        </el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -167,27 +299,88 @@ export default {
   data() {
     return {
       mfaEnabled: true,
+      enabledUsers: 77,
+      mfaRate: 85,
+      enabledMethods: 2,
+      blockedAttacks: 23,
       mfaMethods: [
-        { key: 'totp', name: 'TOTP验证器', icon: 'el-icon-mobile-phone', color: '#409eff', enabled: true, description: '使用Google Authenticator等应用生成验证码', userCount: 45 },
-        { key: 'sms', name: '短信验证码', icon: 'el-icon-message', color: '#67c23a', enabled: true, description: '通过短信接收验证码', userCount: 32 },
-        { key: 'email', name: '邮件验证码', icon: 'el-icon-message-box', color: '#e6a23c', enabled: false, description: '通过邮件接收验证码', userCount: 0 }
+        {
+          key: 'totp',
+          name: 'TOTP验证器',
+          icon: 'el-icon-mobile-phone',
+          gradient: 'linear-gradient(135deg, #409eff 0%, #36cfc9 100%)',
+          enabled: true,
+          description: '使用Google Authenticator、Microsoft Authenticator等应用生成验证码',
+          userCount: 45,
+          todayVerifications: 128
+        },
+        {
+          key: 'sms',
+          name: '短信验证码',
+          icon: 'el-icon-message',
+          gradient: 'linear-gradient(135deg, #67c23a 0%, #95de64 100%)',
+          enabled: true,
+          description: '通过短信接收验证码，适用于所有手机用户',
+          userCount: 32,
+          todayVerifications: 86
+        },
+        {
+          key: 'email',
+          name: '邮件验证码',
+          icon: 'el-icon-message-box',
+          gradient: 'linear-gradient(135deg, #e6a23c 0%, #ffc53d 100%)',
+          enabled: false,
+          description: '通过邮件接收验证码，作为备用验证方式',
+          userCount: 0,
+          todayVerifications: 0
+        }
       ],
       mfaPolicy: {
         scope: 'all',
         conditions: ['new_device', 'suspicious'],
         rememberDays: 7,
         maxFailures: 5,
-        backupCodes: 10
+        backupCodes: 10,
+        enforceForAdmins: true
       },
       userSearch: '',
       userMfaList: [
-        { username: 'admin', email: 'admin@example.com', avatar: '', mfaMethod: 'totp', bindTime: '2023-11-01 10:00:00', lastUsed: '2023-12-01 09:30:00' },
-        { username: 'zhangsan', email: 'zhangsan@example.com', avatar: '', mfaMethod: 'sms', bindTime: '2023-11-15 14:20:00', lastUsed: '2023-12-01 08:45:00' },
-        { username: 'lisi', email: 'lisi@example.com', avatar: '', mfaMethod: null, bindTime: '-', lastUsed: '-' }
+        {
+          username: 'admin',
+          email: 'admin@example.com',
+          department: '技术部',
+          role: 'admin',
+          avatar: '',
+          mfaMethod: 'totp',
+          bindTime: '2023-11-01 10:00:00',
+          lastUsed: '2023-12-01 09:30:00'
+        },
+        {
+          username: 'zhangsan',
+          email: 'zhangsan@example.com',
+          department: '产品部',
+          role: 'user',
+          avatar: '',
+          mfaMethod: 'sms',
+          bindTime: '2023-11-15 14:20:00',
+          lastUsed: '2023-12-01 08:45:00'
+        },
+        {
+          username: 'lisi',
+          email: 'lisi@example.com',
+          department: '测试部',
+          role: 'user',
+          avatar: '',
+          mfaMethod: null,
+          bindTime: '-',
+          lastUsed: '-'
+        }
       ],
       userTotal: 3,
       configDialogVisible: false,
+      detailDialogVisible: false,
       currentMethod: {},
+      currentUser: null,
       methodConfig: {
         issuer: 'SimpleAuth0',
         period: 30,
@@ -201,6 +394,7 @@ export default {
     },
     handleMethodToggle(method) {
       this.$message.success(`${method.name}已${method.enabled ? '启用' : '禁用'}`)
+      this.enabledMethods = this.mfaMethods.filter(m => m.enabled).length
     },
     configureMethod(method) {
       this.currentMethod = method
@@ -213,10 +407,17 @@ export default {
     savePolicy() {
       this.$message.success('MFA策略已保存')
     },
+    notifyUnboundUsers() {
+      this.$message.success('已向未绑定用户发送提醒')
+    },
     getMethodTag(method) {
       const tagMap = { totp: 'primary', sms: 'success', email: 'warning' }
       return tagMap[method] || 'info'
     },
+    getMethodIcon(method) {
+      const iconMap = { totp: 'el-icon-mobile-phone', sms: 'el-icon-message', email: 'el-icon-message-box' }
+      return iconMap[method] || 'el-icon-question'
+    },
     getMethodName(method) {
       const nameMap = { totp: 'TOTP验证器', sms: '短信验证码', email: '邮件验证码' }
       return nameMap[method] || method
@@ -228,15 +429,24 @@ export default {
         row.mfaMethod = null
         row.bindTime = '-'
         row.lastUsed = '-'
+        this.enabledUsers--
         this.$message.success('MFA已重置')
       })
     },
     enforceMfa(row) {
-      this.$confirm(`确定强制为用户 ${row.username} 启用MFA吗？`, '提示').then(() => {
-        row.mfaMethod = 'totp'
-        row.bindTime = new Date().toLocaleString()
-        this.$message.success('已强制启用MFA')
+      this.$confirm(`确定提醒用户 ${row.username} 启用MFA吗？`, '提示').then(() => {
+        this.$message.success('提醒已发送')
       })
+    },
+    viewMfaDetail(row) {
+      this.currentUser = row
+      this.detailDialogVisible = true
+    },
+    viewBackupCodes() {
+      this.$message.info('备用验证码：1234-5678, 8765-4321, ...')
+    },
+    tableHeaderStyle() {
+      return { background: '#f5f7fa', fontWeight: 'bold', color: '#303133' }
     }
   }
 }
@@ -244,112 +454,297 @@ export default {
 
 <style lang="scss" scoped>
 .mfa-page {
-  padding: 20px;
+  padding: 24px;
 
-  .global-config-card {
-    border-radius: 10px;
+  // 页面头部
+  .page-header {
+    margin-bottom: 24px;
 
-    .global-header {
+    .header-content {
       display: flex;
       justify-content: space-between;
-      align-items: center;
-
-      .global-title {
-        font-size: 18px;
-        font-weight: 600;
-        margin-bottom: 8px;
+      align-items: flex-start;
+      margin-bottom: 24px;
+
+      .title-section {
+        .page-title {
+          font-size: 24px;
+          font-weight: 600;
+          color: #1a1a1a;
+          margin: 0 0 8px 0;
+        }
+
+        .page-desc {
+          font-size: 14px;
+          color: #666;
+          margin: 0;
+        }
       }
+    }
 
-      .global-desc {
-        color: #909399;
+    .stats-row {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 16px;
+
+      .stat-card {
+        background: #fff;
+        border-radius: 12px;
+        padding: 20px;
+        display: flex;
+        align-items: center;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+        border: 1px solid #e8e8e8;
+
+        .stat-icon {
+          width: 48px;
+          height: 48px;
+          border-radius: 12px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-right: 16px;
+          font-size: 24px;
+
+          &.enabled {
+            background: #e6f7e6;
+            color: #52c41a;
+          }
+
+          &.rate {
+            background: #e6f4ff;
+            color: #1890ff;
+          }
+
+          &.method {
+            background: #f6ffed;
+            color: #73d13d;
+          }
+
+          &.security {
+            background: #fff2f0;
+            color: #ff4d4f;
+          }
+        }
+
+        .stat-value {
+          font-size: 24px;
+          font-weight: 600;
+          color: #1a1a1a;
+          line-height: 1.2;
+        }
+
+        .stat-label {
+          font-size: 13px;
+          color: #666;
+          margin-top: 4px;
+        }
       }
     }
   }
 
-  .method-card {
-    border-radius: 10px;
-    transition: all 0.3s;
-
-    &.method-enabled {
-      border-color: #409eff;
-    }
+  // 方法配置
+  .methods-section {
+    margin-bottom: 24px;
 
-    .method-header {
+    .section-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      margin-bottom: 15px;
+      margin-bottom: 16px;
 
-      .method-icon {
-        width: 48px;
-        height: 48px;
-        border-radius: 10px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: #fff;
-        font-size: 24px;
+      .section-title {
+        font-size: 16px;
+        font-weight: 600;
+        color: #1a1a1a;
       }
     }
 
-    .method-name {
-      font-size: 16px;
-      font-weight: 600;
-      margin-bottom: 8px;
+    .methods-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 16px;
+
+      .method-card {
+        background: #fff;
+        border-radius: 12px;
+        border: 1px solid #e8e8e8;
+        padding: 20px;
+        transition: all 0.3s ease;
+
+        &:hover {
+          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+        }
+
+        &.is-enabled {
+          border-color: #d9f7be;
+        }
+
+        .card-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: flex-start;
+          margin-bottom: 16px;
+
+          .method-icon {
+            width: 56px;
+            height: 56px;
+            border-radius: 14px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #fff;
+            font-size: 28px;
+          }
+        }
+
+        .card-body {
+          .method-name {
+            font-size: 16px;
+            font-weight: 600;
+            color: #1a1a1a;
+            margin: 0 0 8px 0;
+          }
+
+          .method-desc {
+            font-size: 13px;
+            color: #999;
+            margin-bottom: 16px;
+            line-height: 1.5;
+            min-height: 40px;
+          }
+
+          .method-stats {
+            background: #f5f5f5;
+            border-radius: 8px;
+            padding: 12px;
+
+            .stat-row {
+              display: flex;
+              justify-content: space-between;
+              margin-bottom: 8px;
+
+              &:last-child {
+                margin-bottom: 0;
+              }
+
+              .stat-label {
+                font-size: 13px;
+                color: #666;
+              }
+
+              .stat-value {
+                font-size: 13px;
+                font-weight: 500;
+                color: #1a1a1a;
+              }
+            }
+          }
+        }
+
+        .card-footer {
+          margin-top: 16px;
+          padding-top: 16px;
+          border-top: 1px solid #f0f0f0;
+        }
+      }
     }
+  }
+
+  // 策略卡片
+  .policy-card {
+    border-radius: 12px;
+    margin-bottom: 24px;
 
-    .method-desc {
-      font-size: 13px;
-      color: #909399;
-      margin-bottom: 15px;
-      min-height: 36px;
+    ::v-deep .el-card__header {
+      font-weight: 600;
     }
 
-    .method-users {
-      padding-top: 15px;
-      border-top: 1px solid #ebeef5;
-      color: #606266;
+    .policy-form {
+      max-width: 800px;
 
-      .users-count {
-        font-size: 20px;
-        font-weight: 600;
-        color: #409eff;
+      .form-hint {
+        font-size: 12px;
+        color: #999;
+        margin-top: 4px;
       }
-    }
 
-    .method-actions {
-      margin-top: 10px;
+      .form-tip {
+        margin-left: 10px;
+        color: #909399;
+      }
     }
   }
 
-  .policy-card,
+  // 用户卡片
   .user-card {
-    border-radius: 10px;
-    margin-top: 20px;
-
-    .policy-form {
-      max-width: 600px;
+    border-radius: 12px;
 
-      .form-tip {
-        margin-left: 10px;
-        color: #909399;
-      }
+    ::v-deep .el-card__header {
+      font-weight: 600;
     }
 
     .user-cell {
       display: flex;
       align-items: center;
-      gap: 10px;
+      gap: 12px;
+
+      .user-info {
+        .username {
+          font-weight: 500;
+          color: #1a1a1a;
+        }
+
+        .email {
+          font-size: 12px;
+          color: #999;
+        }
+      }
     }
 
     .text-muted {
-      color: #909399;
+      color: #999;
     }
 
     .pagination {
-      margin-top: 15px;
+      margin-top: 16px;
       text-align: right;
     }
   }
 }
+
+// 响应式
+@media (max-width: 1200px) {
+  .mfa-page {
+    .page-header {
+      .stats-row {
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
+
+    .methods-section {
+      .methods-grid {
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .mfa-page {
+    padding: 16px;
+
+    .page-header {
+      .stats-row {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    .methods-section {
+      .methods-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+  }
+}
 </style>
diff --git a/web/src/views/security/passwordPolicy/index.vue b/web/src/views/security/passwordPolicy/index.vue
index 18aaf5d..2f74a9c 100644
--- a/web/src/views/security/passwordPolicy/index.vue
+++ b/web/src/views/security/passwordPolicy/index.vue
@@ -1,219 +1,337 @@
 <template>
   <div class="password-policy-page">
-
-    <!-- 密码强度实时检测 -->
-    <el-card class="test-card" shadow="hover">
-      <div slot="header">
-        <span>密码强度测试</span>
+    <!-- 页面头部 -->
+    <div class="page-header">
+      <div class="header-content">
+        <div class="title-section">
+          <h1 class="page-title">密码策略</h1>
+          <p class="page-desc">配置密码强度要求和过期策略，提升账户安全性</p>
+        </div>
       </div>
 
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-input
-            v-model="testPassword"
-            type="password"
-            placeholder="输入密码测试强度"
-            show-password
-            @input="checkStrength"
-          />
-        </el-col>
-        <el-col :span="12">
-          <div class="strength-bar">
-            <div class="strength-label">强度: {{ strengthLabel }}</div>
-            <el-progress :percentage="strengthScore" :color="strengthColor" :stroke-width="10" />
+      <!-- 统计卡片 -->
+      <div class="stats-row">
+        <div class="stat-card">
+          <div class="stat-icon weak">
+            <i class="el-icon-warning" />
+          </div>
+          <div class="stat-info">
+            <div class="stat-value">{{ stats.weakPasswordUsers }}</div>
+            <div class="stat-label">弱密码用户</div>
           </div>
-        </el-col>
-      </el-row>
-
-      <div class="strength-checks">
-        <div class="check-item" :class="{ 'check-pass': checks.length }">
-          <i :class="checks.length ? 'el-icon-success' : 'el-icon-error'" />
-          长度至少 {{ policies.minLength }} 位
-        </div>
-        <div class="check-item" :class="{ 'check-pass': checks.uppercase }">
-          <i :class="checks.uppercase ? 'el-icon-success' : 'el-icon-error'" />
-          包含大写字母 (A-Z)
         </div>
-        <div class="check-item" :class="{ 'check-pass': checks.lowercase }">
-          <i :class="checks.lowercase ? 'el-icon-success' : 'el-icon-error'" />
-          包含小写字母 (a-z)
+        <div class="stat-card">
+          <div class="stat-icon expire">
+            <i class="el-icon-time" />
+          </div>
+          <div class="stat-info">
+            <div class="stat-value">{{ stats.expiringUsers }}</div>
+            <div class="stat-label">即将过期</div>
+          </div>
         </div>
-        <div class="check-item" :class="{ 'check-pass': checks.number }">
-          <i :class="checks.number ? 'el-icon-success' : 'el-icon-error'" />
-          包含数字 (0-9)
+        <div class="stat-card">
+          <div class="stat-icon recent">
+            <i class="el-icon-refresh" />
+          </div>
+          <div class="stat-info">
+            <div class="stat-value">{{ stats.recentlyChanged }}</div>
+            <div class="stat-label">近期修改</div>
+          </div>
         </div>
-        <div class="check-item" :class="{ 'check-pass': checks.special }">
-          <i :class="checks.special ? 'el-icon-success' : 'el-icon-error'" />
-          包含特殊字符 (!@#$%^&*)
+        <div class="stat-card">
+          <div class="stat-icon strong">
+            <i class="el-icon-check" />
+          </div>
+          <div class="stat-info">
+            <div class="stat-value">{{ stats.strongPasswordRate }}%</div>
+            <div class="stat-label">强密码占比</div>
+          </div>
         </div>
       </div>
-    </el-card>
-
-    <!-- 密码策略配置 -->
-    <el-card class="config-card" shadow="hover">
-      <div slot="header">
-        <span>密码策略配置</span>
-        <el-button type="primary" size="small" @click="saveConfig" style="float: right;">保存配置</el-button>
-      </div>
-
-      <el-row :gutter="40">
-        <el-col :span="12">
-          <h4 class="section-title">基础设置</h4>
-
-          <el-form :model="policies" label-width="160px">
-            <el-form-item label="最小密码长度">
-              <el-slider v-model="policies.minLength" :min="6" :max="32" show-input />
-            </el-form-item>
-
-            <el-form-item label="最大密码长度">
-              <el-slider v-model="policies.maxLength" :min="16" :max="128" show-input />
-            </el-form-item>
-
-            <el-form-item label="密码复杂度要求">
-              <el-checkbox-group v-model="policies.complexity">
-                <el-checkbox label="uppercase">大写字母</el-checkbox>
-                <el-checkbox label="lowercase">小写字母</el-checkbox>
-                <el-checkbox label="number">数字</el-checkbox>
-                <el-checkbox label="special">特殊字符</el-checkbox>
-              </el-checkbox-group>
-            </el-form-item>
-
-            <el-form-item label="密码过期策略">
-              <el-select v-model="policies.expiryDays" style="width: 100%">
-                <el-option label="永不过期" :value="0" />
-                <el-option label="30天" :value="30" />
-                <el-option label="60天" :value="60" />
-                <el-option label="90天" :value="90" />
-                <el-option label="180天" :value="180" />
-                <el-option label="365天" :value="365" />
-              </el-select>
-            </el-form-item>
-          </el-form>
-        </el-col>
-
-        <el-col :span="12">
-          <h4 class="section-title">高级设置</h4>
-
-          <el-form :model="policies" label-width="160px">
-            <el-form-item label="历史密码检查">
-              <el-input-number v-model="policies.historyCount" :min="0" :max="24" style="width: 120px" />
-              <span class="form-tip">次</span>
-              <div class="form-hint">禁止重复使用最近N次的历史密码</div>
-            </el-form-item>
-
-            <el-form-item label="密码修改冷却期">
-              <el-input-number v-model="policies.changeCooldown" :min="0" :max="72" style="width: 120px" />
-              <span class="form-tip">小时</span>
-              <div class="form-hint">修改密码后需等待多久才能再次修改</div>
-            </el-form-item>
-
-            <el-form-item label="首次登录修改密码">
-              <el-switch v-model="policies.forceChangeOnFirstLogin" />
-              <div class="form-hint">新用户首次登录必须修改密码</div>
-            </el-form-item>
-
-            <el-form-item label="重置密码后修改">
-              <el-switch v-model="policies.forceChangeAfterReset" />
-              <div class="form-hint">管理员重置密码后用户必须修改密码</div>
-            </el-form-item>
-
-            <el-form-item label="常见弱密码检查">
-              <el-switch v-model="policies.checkCommonPasswords" />
-              <div class="form-hint">禁止使用常见弱密码（如123456, password等）</div>
-            </el-form-item>
-
-            <el-form-item label="包含用户名检查">
-              <el-switch v-model="policies.checkUsername" />
-              <div class="form-hint">密码不能包含用户名</div>
-            </el-form-item>
-          </el-form>
-        </el-col>
-      </el-row>
-    </el-card>
-
-    <!-- 弱密码字典管理 -->
-    <el-card class="dictionary-card" shadow="hover">
-      <div slot="header">
-        <span>弱密码字典</span>
-        <el-button type="primary" size="small" icon="el-icon-plus" @click="addWeakPassword" style="float: right; margin-left: 10px;">添加</el-button>
-        <el-button size="small" icon="el-icon-upload2" @click="importWeakPasswords" style="float: right;">导入</el-button>
-      </div>
-
-      <el-tag
-        v-for="pwd in weakPasswords"
-        :key="pwd"
-        closable
-        type="danger"
-        @close="removeWeakPassword(pwd)"
-        class="weak-password-tag"
-      >
-        {{ pwd }}
-      </el-tag>
-
-      <el-empty v-if="weakPasswords.length === 0" description="暂无弱密码定义" />
-    </el-card>
-
-    <!-- 密码使用统计 -->
-    <el-card class="stats-card" shadow="hover">
-      <div slot="header">
-        <span>密码安全统计</span>
-      </div>
-
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <div class="stat-box">
-            <div class="stat-icon" style="background: #f56c6c20; color: #f56c6c;">
-              <i class="el-icon-warning" />
-            </div>
-            <div class="stat-info">
-              <div class="stat-value">{{ stats.weakPasswordUsers }}</div>
-              <div class="stat-label">弱密码用户</div>
-            </div>
+    </div>
+
+    <!-- 标签页内容 -->
+    <el-tabs v-model="activeTab" type="border-card" class="policy-tabs">
+      <!-- 策略配置 -->
+      <el-tab-pane label="策略配置" name="config">
+        <span slot="label">
+          <i class="el-icon-setting" /> 策略配置
+        </span>
+        <el-card class="tab-content-card" shadow="never">
+          <el-row :gutter="60">
+            <el-col :span="12">
+              <h4 class="section-title">
+                <i class="el-icon-setting" />
+                基础设置
+              </h4>
+
+              <el-form :model="policies" label-width="180px">
+                <el-form-item label="最小密码长度">
+                  <el-slider v-model="policies.minLength" :min="6" :max="32" show-input />
+                  <div class="form-hint">建议至少8位</div>
+                </el-form-item>
+
+                <el-form-item label="最大密码长度">
+                  <el-slider v-model="policies.maxLength" :min="16" :max="128" show-input />
+                </el-form-item>
+
+                <el-form-item label="密码复杂度要求">
+                  <el-checkbox-group v-model="policies.complexity">
+                    <el-checkbox label="uppercase">大写字母</el-checkbox>
+                    <el-checkbox label="lowercase">小写字母</el-checkbox>
+                    <el-checkbox label="number">数字</el-checkbox>
+                    <el-checkbox label="special">特殊字符</el-checkbox>
+                  </el-checkbox-group>
+                </el-form-item>
+
+                <el-form-item label="密码过期策略">
+                  <el-select v-model="policies.expiryDays" style="width: 100%">
+                    <el-option label="永不过期" :value="0" />
+                    <el-option label="30天" :value="30" />
+                    <el-option label="60天" :value="60" />
+                    <el-option label="90天" :value="90" />
+                    <el-option label="180天" :value="180" />
+                    <el-option label="365天" :value="365" />
+                  </el-select>
+                  <div class="form-hint">密码过期后用户必须修改密码</div>
+                </el-form-item>
+              </el-form>
+            </el-col>
+
+            <el-col :span="12">
+              <h4 class="section-title">
+                <i class="el-icon-s-tools" />
+                高级设置
+              </h4>
+
+              <el-form :model="policies" label-width="180px">
+                <el-form-item label="历史密码检查">
+                  <el-input-number v-model="policies.historyCount" :min="0" :max="24" style="width: 120px" />
+                  <span class="form-tip">次</span>
+                  <div class="form-hint">禁止重复使用最近N次的历史密码</div>
+                </el-form-item>
+
+                <el-form-item label="密码修改冷却期">
+                  <el-input-number v-model="policies.changeCooldown" :min="0" :max="72" style="width: 120px" />
+                  <span class="form-tip">小时</span>
+                  <div class="form-hint">修改密码后需等待多久才能再次修改</div>
+                </el-form-item>
+
+                <el-form-item label="首次登录修改密码">
+                  <el-switch v-model="policies.forceChangeOnFirstLogin" />
+                  <div class="form-hint">新用户首次登录必须修改初始密码</div>
+                </el-form-item>
+
+                <el-form-item label="重置密码后修改">
+                  <el-switch v-model="policies.forceChangeAfterReset" />
+                  <div class="form-hint">管理员重置密码后用户必须修改密码</div>
+                </el-form-item>
+
+                <el-form-item label="常见弱密码检查">
+                  <el-switch v-model="policies.checkCommonPasswords" />
+                  <div class="form-hint">禁止使用常见弱密码（如123456, password等）</div>
+                </el-form-item>
+
+                <el-form-item label="包含用户名检查">
+                  <el-switch v-model="policies.checkUsername" />
+                  <div class="form-hint">密码不能包含用户名</div>
+                </el-form-item>
+              </el-form>
+            </el-col>
+          </el-row>
+
+          <div class="tab-actions">
+            <el-button type="primary" icon="el-icon-check" @click="saveConfig">保存配置</el-button>
+            <el-button icon="el-icon-refresh" @click="resetConfig">重置</el-button>
+            <el-button icon="el-icon-document" @click="exportPolicy">导出配置</el-button>
           </div>
-        </el-col>
-        <el-col :span="6">
-          <div class="stat-box">
-            <div class="stat-icon" style="background: #e6a23c20; color: #e6a23c;">
-              <i class="el-icon-time" />
-            </div>
-            <div class="stat-info">
-              <div class="stat-value">{{ stats.expiringUsers }}</div>
-              <div class="stat-label">即将过期</div>
+        </el-card>
+      </el-tab-pane>
+
+      <!-- 强度测试 -->
+      <el-tab-pane label="强度测试" name="test">
+        <span slot="label">
+          <i class="el-icon-s-data" /> 强度测试
+        </span>
+        <el-card class="tab-content-card" shadow="never">
+          <div class="test-section">
+            <h4 class="section-title">
+              <i class="el-icon-s-data" />
+              密码强度实时检测
+              <el-tooltip content="输入密码测试当前策略下的强度">
+                <i class="el-icon-question" style="margin-left: 8px; color: #999; font-size: 14px;" />
+              </el-tooltip>
+            </h4>
+
+            <el-row :gutter="40" class="test-input-row">
+              <el-col :span="12">
+                <el-input
+                  v-model="testPassword"
+                  type="password"
+                  placeholder="输入密码测试强度"
+                  show-password
+                  size="large"
+                  @input="checkStrength"
+                />
+              </el-col>
+              <el-col :span="12">
+                <div class="strength-bar">
+                  <div class="strength-label">
+                    强度: <span :style="{ color: strengthColor }">{{ strengthLabel }}</span>
+                  </div>
+                  <el-progress :percentage="strengthScore" :color="strengthColor" :stroke-width="12" />
+                </div>
+              </el-col>
+            </el-row>
+
+            <div class="strength-checks">
+              <div class="check-item" :class="{ 'check-pass': checks.length }">
+                <i :class="checks.length ? 'el-icon-success' : 'el-icon-circle-close'" />
+                长度至少 {{ policies.minLength }} 位
+              </div>
+              <div class="check-item" :class="{ 'check-pass': checks.uppercase }">
+                <i :class="checks.uppercase ? 'el-icon-success' : 'el-icon-circle-close'" />
+                包含大写字母 (A-Z)
+              </div>
+              <div class="check-item" :class="{ 'check-pass': checks.lowercase }">
+                <i :class="checks.lowercase ? 'el-icon-success' : 'el-icon-circle-close'" />
+                包含小写字母 (a-z)
+              </div>
+              <div class="check-item" :class="{ 'check-pass': checks.number }">
+                <i :class="checks.number ? 'el-icon-success' : 'el-icon-circle-close'" />
+                包含数字 (0-9)
+              </div>
+              <div class="check-item" :class="{ 'check-pass': checks.special }">
+                <i :class="checks.special ? 'el-icon-success' : 'el-icon-circle-close'" />
+                包含特殊字符 (!@#$%^&*)
+              </div>
             </div>
           </div>
-        </el-col>
-        <el-col :span="6">
-          <div class="stat-box">
-            <div class="stat-icon" style="background: #409eff20; color: #409eff;">
-              <i class="el-icon-refresh" />
+        </el-card>
+      </el-tab-pane>
+
+      <!-- 弱密码管理 -->
+      <el-tab-pane label="弱密码管理" name="dictionary">
+        <span slot="label">
+          <i class="el-icon-warning-outline" /> 弱密码管理
+        </span>
+        <el-card class="tab-content-card" shadow="never">
+          <div class="dictionary-header">
+            <h4 class="section-title" style="margin: 0;">
+              <i class="el-icon-warning-outline" />
+              弱密码列表
+            </h4>
+            <div class="dictionary-actions">
+              <el-button type="primary" size="small" icon="el-icon-plus" @click="addWeakPassword">
+                添加弱密码
+              </el-button>
+              <el-button size="small" icon="el-icon-upload2" @click="importWeakPasswords">
+                批量导入
+              </el-button>
             </div>
-            <div class="stat-info">
-              <div class="stat-value">{{ stats.recentlyChanged }}</div>
-              <div class="stat-label">近期修改</div>
+          </div>
+
+          <div class="word-list">
+            <el-tag
+              v-for="pwd in weakPasswords"
+              :key="pwd"
+              closable
+              type="danger"
+              class="weak-password-tag"
+              size="medium"
+              @close="removeWeakPassword(pwd)"
+            >
+              {{ pwd }}
+            </el-tag>
+          </div>
+
+          <el-empty v-if="weakPasswords.length === 0" description="暂无弱密码定义" />
+
+          <!-- 弱密码用户处理 -->
+          <div class="weak-password-actions">
+            <h4 class="section-title">
+              <i class="el-icon-message" />
+              弱密码用户处理
+            </h4>
+            <div class="action-item">
+              <div class="action-info">
+                <div class="action-name">通知弱密码用户</div>
+                <div class="action-desc">当前有 <strong>{{ stats.weakPasswordUsers }}</strong> 位用户使用弱密码，发送邮件通知其修改密码</div>
+              </div>
+              <el-button type="warning" icon="el-icon-message" @click="notifyWeakPasswordUsers">
+                发送通知
+              </el-button>
             </div>
           </div>
-        </el-col>
-        <el-col :span="6">
-          <div class="stat-box">
-            <div class="stat-icon" style="background: #67c23a20; color: #67c23a;">
-              <i class="el-icon-check" />
+        </el-card>
+      </el-tab-pane>
+
+      <!-- 密码整改 -->
+      <el-tab-pane label="密码整改" name="remediation">
+        <span slot="label">
+          <i class="el-icon-s-check" /> 密码整改
+        </span>
+        <el-card class="tab-content-card" shadow="never">
+          <div class="remediation-section">
+            <h4 class="section-title">
+              <i class="el-icon-s-check" />
+              密码安全整改
+            </h4>
+            <p class="section-desc">针对密码安全问题进行全局整改操作，提升系统整体密码安全水平</p>
+
+            <div class="remediation-list">
+              <div class="remediation-card danger">
+                <div class="remediation-icon">
+                  <i class="el-icon-refresh" />
+                </div>
+                <div class="remediation-content">
+                  <div class="remediation-title">强制密码重置</div>
+                  <div class="remediation-desc">要求所有用户在下次登录时强制修改密码，适用于安全事件后的紧急处置</div>
+                </div>
+                <el-button type="danger" plain icon="el-icon-refresh" @click="forcePasswordReset">
+                  立即执行
+                </el-button>
+              </div>
+
+              <div class="remediation-card warning">
+                <div class="remediation-icon">
+                  <i class="el-icon-time" />
+                </div>
+                <div class="remediation-content">
+                  <div class="remediation-title">清理过期密码用户</div>
+                  <div class="remediation-desc">当前有 <strong>{{ stats.expiringUsers }}</strong> 位用户密码即将过期，可批量发送提醒或强制重置</div>
+                </div>
+                <el-button type="warning" plain icon="el-icon-message" @click="notifyExpiringUsers">
+                  发送提醒
+                </el-button>
+              </div>
+
+              <div class="remediation-card info">
+                <div class="remediation-icon">
+                  <i class="el-icon-lock" />
+                </div>
+                <div class="remediation-content">
+                  <div class="remediation-title">锁定长期未修改密码用户</div>
+                  <div class="remediation-desc">自动锁定超过密码有效期且未修改密码的用户账户，需管理员手动解锁</div>
+                </div>
+                <el-button type="primary" plain icon="el-icon-lock" @click="lockInactiveUsers">
+                  执行锁定
+                </el-button>
+              </div>
             </div>
-            <div class="stat-info">
-              <div class="stat-value">{{ stats.strongPasswordRate }}%</div>
-              <div class="stat-label">强密码占比</div>
+
+            <div class="remediation-tips">
+              <h5><i class="el-icon-info" /> 操作建议</h5>
+              <ul>
+                <li>强制密码重置将影响所有用户，建议在非工作时间执行，并提前通知用户</li>
+                <li>定期执行密码整改可有效降低弱密码带来的安全风险</li>
+                <li>建议在执行大规模整改前，先导出当前配置作为备份</li>
+              </ul>
             </div>
           </div>
-        </el-col>
-      </el-row>
-
-      <el-divider />
-
-      <div class="action-bar">
-        <el-button type="warning" icon="el-icon-message" @click="notifyWeakPasswordUsers">通知弱密码用户</el-button>
-        <el-button type="primary" icon="el-icon-refresh" @click="forcePasswordReset">强制所有用户修改密码</el-button>
-      </div>
-    </el-card>
-
+        </el-card>
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 
@@ -222,6 +340,7 @@ export default {
   name: 'PasswordPolicy',
   data() {
     return {
+      activeTab: 'config',
       testPassword: '',
       strengthScore: 0,
       strengthLabel: '未输入',
@@ -245,7 +364,7 @@ export default {
         checkCommonPasswords: true,
         checkUsername: true
       },
-      weakPasswords: ['123456', 'password', '12345678', 'qwerty', 'admin123', 'letmein'],
+      weakPasswords: ['123456', 'password', '12345678', 'qwerty', 'admin123', 'letmein', '123456789', '111111', '123123', 'welcome'],
       stats: {
         weakPasswordUsers: 3,
         expiringUsers: 8,
@@ -255,6 +374,9 @@ export default {
     }
   },
   methods: {
+    refreshData() {
+      this.$message.success('数据已刷新')
+    },
     checkStrength() {
       const pwd = this.testPassword
       if (!pwd) {
@@ -294,6 +416,21 @@ export default {
     saveConfig() {
       this.$message.success('密码策略配置已保存')
     },
+    resetConfig() {
+      this.policies = {
+        minLength: 8,
+        maxLength: 64,
+        complexity: ['uppercase', 'lowercase', 'number'],
+        expiryDays: 90,
+        historyCount: 5,
+        changeCooldown: 24,
+        forceChangeOnFirstLogin: true,
+        forceChangeAfterReset: true,
+        checkCommonPasswords: true,
+        checkUsername: true
+      }
+      this.$message.success('配置已重置')
+    },
     addWeakPassword() {
       this.$prompt('请输入弱密码', '添加弱密码', {
         confirmButtonText: '确定',
@@ -316,16 +453,42 @@ export default {
       }
     },
     notifyWeakPasswordUsers() {
-      this.$confirm(`确定向 ${this.stats.weakPasswordUsers} 位弱密码用户发送修改通知吗？`, '提示').then(() => {
+      this.$confirm(`确定向 ${this.stats.weakPasswordUsers} 位弱密码用户发送修改通知吗？`, '提示', {
+        confirmButtonText: '发送',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
         this.$message.success('通知已发送')
       })
     },
-    forcePasswordReset() {
-      this.$confirm('确定强制所有用户在下次登录时修改密码吗？', '警告', {
+    notifyExpiringUsers() {
+      this.$confirm(`确定向 ${this.stats.expiringUsers} 位密码即将过期的用户发送提醒吗？`, '提示', {
+        confirmButtonText: '发送',
+        cancelButtonText: '取消'
+      }).then(() => {
+        this.$message.success('提醒邮件已发送')
+      })
+    },
+    lockInactiveUsers() {
+      this.$confirm('确定要锁定长期未修改密码的用户账户吗？被锁定的用户需要联系管理员解锁。', '警告', {
+        confirmButtonText: '确定锁定',
+        cancelButtonText: '取消',
         type: 'warning'
+      }).then(() => {
+        this.$message.success('已锁定符合条件的用户账户')
+      })
+    },
+    forcePasswordReset() {
+      this.$confirm('确定强制所有用户在下次登录时修改密码吗？此操作不可撤销。', '警告', {
+        confirmButtonText: '强制重置',
+        cancelButtonText: '取消',
+        type: 'error'
       }).then(() => {
         this.$message.success('已设置强制密码修改')
       })
+    },
+    exportPolicy() {
+      this.$message.success('策略配置已导出')
     }
   }
 }
@@ -333,20 +496,321 @@ export default {
 
 <style lang="scss" scoped>
 .password-policy-page {
-  padding: 20px;
+  padding: 24px;
+
+  // 页面头部
+  .page-header {
+    margin-bottom: 24px;
+
+    .header-content {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      margin-bottom: 24px;
+
+      .title-section {
+        .page-title {
+          font-size: 24px;
+          font-weight: 600;
+          color: #1a1a1a;
+          margin: 0 0 8px 0;
+        }
+
+        .page-desc {
+          font-size: 14px;
+          color: #666;
+          margin: 0;
+        }
+      }
+
+      .header-actions {
+        display: flex;
+        gap: 12px;
+      }
+    }
+
+    .stats-row {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 16px;
+
+      .stat-card {
+        background: #fff;
+        border-radius: 12px;
+        padding: 20px;
+        display: flex;
+        align-items: center;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+        border: 1px solid #e8e8e8;
+
+        .stat-icon {
+          width: 48px;
+          height: 48px;
+          border-radius: 12px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-right: 16px;
+          font-size: 24px;
+
+          &.weak {
+            background: #fff2f0;
+            color: #ff4d4f;
+          }
+
+          &.expire {
+            background: #fff7e6;
+            color: #faad14;
+          }
+
+          &.recent {
+            background: #e6f4ff;
+            color: #1890ff;
+          }
+
+          &.strong {
+            background: #f6ffed;
+            color: #73d13d;
+          }
+        }
+
+        .stat-value {
+          font-size: 24px;
+          font-weight: 600;
+          color: #1a1a1a;
+          line-height: 1.2;
+        }
+
+        .stat-label {
+          font-size: 13px;
+          color: #666;
+          margin-top: 4px;
+        }
+      }
+    }
+  }
+
+  // 标签页样式
+  .policy-tabs {
+    border-radius: 12px;
+    overflow: hidden;
+
+    ::v-deep .el-tabs__header {
+      background: #f5f7fa;
+      margin: 0;
+    }
+
+    ::v-deep .el-tabs__nav {
+      border-radius: 0;
+    }
+
+    ::v-deep .el-tabs__item {
+      height: 48px;
+      line-height: 48px;
+      font-size: 14px;
+
+      i {
+        margin-right: 4px;
+      }
+    }
+
+    ::v-deep .el-tabs__content {
+      padding: 0;
+    }
+  }
+
+  .tab-content-card {
+    border: none;
+    border-radius: 0;
+    min-height: 500px;
+
+    ::v-deep .el-card__body {
+      padding: 24px;
+    }
+  }
+
+  .tab-actions {
+    margin-top: 24px;
+    padding-top: 24px;
+    border-top: 1px solid #ebeef5;
+    text-align: center;
+  }
 
-  .test-card,
-  .config-card,
-  .dictionary-card,
-  .stats-card {
-    border-radius: 10px;
+  // 测试区域样式
+  .test-section {
+    .test-input-row {
+      margin-top: 20px;
+      margin-bottom: 30px;
+    }
+  }
+
+  // 字典头部样式
+  .dictionary-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     margin-bottom: 20px;
+
+    .dictionary-actions {
+      display: flex;
+      gap: 10px;
+    }
+  }
+
+  // 弱密码用户处理
+  .weak-password-actions {
+    margin-top: 32px;
+    padding-top: 24px;
+    border-top: 1px solid #ebeef5;
+
+    .action-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 20px;
+      background: #fdf6ec;
+      border: 1px solid #f5dab1;
+      border-radius: 8px;
+
+      .action-info {
+        flex: 1;
+
+        .action-name {
+          font-size: 16px;
+          font-weight: 500;
+          color: #1a1a1a;
+          margin-bottom: 8px;
+        }
+
+        .action-desc {
+          font-size: 14px;
+          color: #666;
+        }
+      }
+    }
+  }
+
+  // 密码整改样式
+  .remediation-section {
+    .section-desc {
+      font-size: 14px;
+      color: #666;
+      margin-bottom: 24px;
+    }
+
+    .remediation-list {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      margin-bottom: 32px;
+    }
+
+    .remediation-card {
+      display: flex;
+      align-items: center;
+      padding: 24px;
+      border: 1px solid #ebeef5;
+      border-radius: 8px;
+      transition: all 0.3s;
+
+      &:hover {
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      }
+
+      &.danger {
+        background: #fef0f0;
+        border-color: #fde2e2;
+
+        .remediation-icon {
+          background: #f56c6c;
+          color: #fff;
+        }
+      }
+
+      &.warning {
+        background: #fdf6ec;
+        border-color: #faecd8;
+
+        .remediation-icon {
+          background: #e6a23c;
+          color: #fff;
+        }
+      }
+
+      &.info {
+        background: #f0f9ff;
+        border-color: #d9ecff;
+
+        .remediation-icon {
+          background: #409eff;
+          color: #fff;
+        }
+      }
+
+      .remediation-icon {
+        width: 48px;
+        height: 48px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 20px;
+        margin-right: 20px;
+        flex-shrink: 0;
+      }
+
+      .remediation-content {
+        flex: 1;
+
+        .remediation-title {
+          font-size: 16px;
+          font-weight: 500;
+          color: #1a1a1a;
+          margin-bottom: 6px;
+        }
+
+        .remediation-desc {
+          font-size: 14px;
+          color: #666;
+          line-height: 1.5;
+        }
+      }
+    }
+
+    .remediation-tips {
+      padding: 16px 20px;
+      background: #f5f7fa;
+      border-radius: 8px;
+
+      h5 {
+        margin: 0 0 12px 0;
+        font-size: 14px;
+        color: #1a1a1a;
+
+        i {
+          color: #409eff;
+          margin-right: 6px;
+        }
+      }
+
+      ul {
+        margin: 0;
+        padding-left: 20px;
+
+        li {
+          font-size: 13px;
+          color: #666;
+          line-height: 1.8;
+        }
+      }
+    }
   }
 
   .strength-bar {
     .strength-label {
       margin-bottom: 10px;
       font-weight: 500;
+      color: #1a1a1a;
     }
   }
 
@@ -359,7 +823,8 @@ export default {
     border-top: 1px solid #ebeef5;
 
     .check-item {
-      color: #909399;
+      color: #999;
+      font-size: 14px;
 
       i {
         margin-right: 5px;
@@ -367,6 +832,10 @@ export default {
 
       &.check-pass {
         color: #67c23a;
+
+        i {
+          color: #67c23a;
+        }
       }
     }
   }
@@ -375,7 +844,13 @@ export default {
     margin-bottom: 20px;
     padding-bottom: 10px;
     border-bottom: 1px solid #ebeef5;
-    color: #303133;
+    color: #1a1a1a;
+    font-size: 16px;
+
+    i {
+      margin-right: 8px;
+      color: #409eff;
+    }
   }
 
   .form-tip {
@@ -385,50 +860,80 @@ export default {
 
   .form-hint {
     font-size: 12px;
-    color: #909399;
-    margin-top: 5px;
+    color: #999;
+    margin-top: 4px;
+  }
+
+  .word-list {
+    padding: 8px 0;
   }
 
   .weak-password-tag {
     margin: 0 10px 10px 0;
   }
+}
 
-  .stat-box {
-    display: flex;
-    align-items: center;
-    padding: 20px;
-    background: #f5f7fa;
-    border-radius: 10px;
-
-    .stat-icon {
-      width: 50px;
-      height: 50px;
-      border-radius: 10px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 24px;
-      margin-right: 15px;
+// 响应式
+@media (max-width: 1200px) {
+  .password-policy-page {
+    .page-header {
+      .stats-row {
+        grid-template-columns: repeat(2, 1fr);
+      }
     }
+  }
+}
+
+@media (max-width: 768px) {
+  .password-policy-page {
+    padding: 16px;
 
-    .stat-info {
-      .stat-value {
-        font-size: 24px;
-        font-weight: 600;
-        color: #303133;
+    .page-header {
+      .stats-row {
+        grid-template-columns: 1fr;
       }
+    }
 
-      .stat-label {
-        font-size: 14px;
-        color: #909399;
-        margin-top: 4px;
+    .policy-tabs {
+      ::v-deep .el-tabs__item {
+        padding: 0 12px;
+        font-size: 12px;
+
+        i {
+          display: none;
+        }
       }
     }
-  }
 
-  .action-bar {
-    text-align: center;
-    padding: 10px;
+    .weak-password-actions {
+      .action-item {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 16px;
+      }
+    }
+
+    .remediation-section {
+      .remediation-card {
+        flex-direction: column;
+        text-align: center;
+        gap: 16px;
+
+        .remediation-icon {
+          margin-right: 0;
+        }
+
+        .remediation-content {
+          text-align: center;
+        }
+      }
+    }
+
+    .dictionary-header {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 12px;
+    }
   }
 }
 </style>
diff --git a/web/src/views/security/securityPolicy/index.vue b/web/src/views/security/securityPolicy/index.vue
index 4c7c4d1..ab11913 100644
--- a/web/src/views/security/securityPolicy/index.vue
+++ b/web/src/views/security/securityPolicy/index.vue
@@ -1,200 +1,232 @@
 <template>
   <div class="security-policy-page">
-
-    <!-- 密码策略 -->
-    <el-card class="policy-section" shadow="hover">
-      <div slot="header">
-        <span>密码策略</span>
-        <el-switch v-model="policies.password.enabled" active-text="启用" style="float: right;" @change="savePolicy('password')" />
-      </div>
-
-      <el-form :model="policies.password.config" label-width="180px" :disabled="!policies.password.enabled">
-        <el-form-item label="最小密码长度">
-          <el-slider v-model="policies.password.config.minLength" :min="6" :max="32" show-input />
-        </el-form-item>
-
-        <el-form-item label="密码复杂度要求">
-          <el-checkbox-group v-model="policies.password.config.complexity">
-            <el-checkbox label="uppercase">包含大写字母</el-checkbox>
-            <el-checkbox label="lowercase">包含小写字母</el-checkbox>
-            <el-checkbox label="number">包含数字</el-checkbox>
-            <el-checkbox label="special">包含特殊字符</el-checkbox>
-          </el-checkbox-group>
-        </el-form-item>
-
-        <el-form-item label="密码过期时间">
-          <el-select v-model="policies.password.config.expiryDays">
-            <el-option label="永不过期" :value="0" />
-            <el-option label="30天" :value="30" />
-            <el-option label="60天" :value="60" />
-            <el-option label="90天" :value="90" />
-            <el-option label="180天" :value="180" />
-          </el-select>
-        </el-form-item>
-
-        <el-form-item label="历史密码检查">
-          <el-input-number v-model="policies.password.config.historyCount" :min="0" :max="24" />
-          <span class="form-tip">不能重复使用最近N次密码</span>
-        </el-form-item>
-
-        <el-form-item>
-          <el-button type="primary" @click="savePolicy('password')">保存密码策略</el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
-
-    <!-- 登录策略 -->
-    <el-card class="policy-section" shadow="hover">
-      <div slot="header">
-        <span>登录策略</span>
-        <el-switch v-model="policies.login.enabled" active-text="启用" style="float: right;" @change="savePolicy('login')" />
+    <!-- 页面头部 -->
+    <div class="page-header">
+      <div class="header-content">
+        <div class="title-section">
+          <h1 class="page-title">登录验证策略</h1>
+          <p class="page-desc">配置登录安全策略、会话管理和审计规则</p>
+        </div>
       </div>
 
-      <el-form :model="policies.login.config" label-width="180px" :disabled="!policies.login.enabled">
-        <el-form-item label="最大登录失败次数">
-          <el-input-number v-model="policies.login.config.maxFailures" :min="3" :max="10" />
-          <span class="form-tip">次失败后锁定账户</span>
-        </el-form-item>
-
-        <el-form-item label="账户锁定时间">
-          <el-select v-model="policies.login.config.lockDuration">
-            <el-option label="5分钟" :value="5" />
-            <el-option label="15分钟" :value="15" />
-            <el-option label="30分钟" :value="30" />
-            <el-option label="1小时" :value="60" />
-            <el-option label="永久锁定（需管理员解锁）" :value="-1" />
-          </el-select>
-        </el-form-item>
-
-        <el-form-item label="会话超时时间">
-          <el-select v-model="policies.login.config.sessionTimeout">
-            <el-option label="15分钟" :value="15" />
-            <el-option label="30分钟" :value="30" />
-            <el-option label="1小时" :value="60" />
-            <el-option label="2小时" :value="120" />
-            <el-option label="4小时" :value="240" />
-            <el-option label="8小时" :value="480" />
-          </el-select>
-        </el-form-item>
-
-        <el-form-item label="并发登录限制">
-          <el-radio-group v-model="policies.login.config.concurrentLogin">
-            <el-radio label="single">单点登录（只允许一个设备）</el-radio>
-            <el-radio label="multiple">允许多设备同时登录</el-radio>
-          </el-radio-group>
-        </el-form-item>
-
-        <el-form-item label="IP白名单">
-          <el-switch v-model="policies.login.config.ipWhitelistEnabled" />
-        </el-form-item>
-
-        <el-form-item label="允许的IP范围" v-if="policies.login.config.ipWhitelistEnabled">
-          <el-input
-            v-model="policies.login.config.ipWhitelist"
-            type="textarea"
-            :rows="3"
-            placeholder="每行输入一个IP或CIDR，例如：&#10;192.168.1.0/24&#10;10.0.0.1"
-          />
-        </el-form-item>
-
-        <el-form-item>
-          <el-button type="primary" @click="savePolicy('login')">保存登录策略</el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
-
-    <!-- 审计策略 -->
-    <el-card class="policy-section" shadow="hover">
-      <div slot="header">
-        <span>审计策略</span>
-        <el-switch v-model="policies.audit.enabled" active-text="启用" style="float: right;" @change="savePolicy('audit')" />
-      </div>
-
-      <el-form :model="policies.audit.config" label-width="180px" :disabled="!policies.audit.enabled">
-        <el-form-item label="记录的操作类型">
-          <el-checkbox-group v-model="policies.audit.config.events">
-            <el-checkbox label="login">登录/登出</el-checkbox>
-            <el-checkbox label="password">密码修改</el-checkbox>
-            <el-checkbox label="user">用户管理</el-checkbox>
-            <el-checkbox label="role">角色管理</el-checkbox>
-            <el-checkbox label="permission">权限变更</el-checkbox>
-            <el-checkbox label="config">系统配置</el-checkbox>
-          </el-checkbox-group>
-        </el-form-item>
-
-        <el-form-item label="日志保留时间">
-          <el-select v-model="policies.audit.config.retentionDays">
-            <el-option label="30天" :value="30" />
-            <el-option label="90天" :value="90" />
-            <el-option label="180天" :value="180" />
-            <el-option label="1年" :value="365" />
-            <el-option label="永久保留" :value="0" />
-          </el-select>
-        </el-form-item>
-
-        <el-form-item label="异常告警">
-          <el-switch v-model="policies.audit.config.alertEnabled" />
-        </el-form-item>
-
-        <el-form-item label="告警条件" v-if="policies.audit.config.alertEnabled">
-          <div class="alert-conditions">
-            <div class="condition-item">
-              <span>连续登录失败超过</span>
-              <el-input-number v-model="policies.audit.config.alertLoginFailures" :min="3" :max="10" size="small" />
-              <span>次</span>
-            </div>
-            <div class="condition-item">
-              <span>单IP请求超过</span>
-              <el-input-number v-model="policies.audit.config.alertRequestsPerMinute" :min="100" :max="10000" :step="100" size="small" />
-              <span>次/分钟</span>
-            </div>
+      <!-- 安全概览 -->
+      <div class="stats-row">
+        <div class="stat-card">
+          <div class="stat-icon locked">
+            <i class="el-icon-lock" />
           </div>
-        </el-form-item>
-
-        <el-form-item>
-          <el-button type="primary" @click="savePolicy('audit')">保存审计策略</el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
-
-    <!-- 账户安全概览 -->
-    <el-card class="security-overview" shadow="hover">
-      <div slot="header">
-        <span>账户安全概览</span>
-        <el-button style="float: right; padding: 3px 0" type="text" @click="refreshOverview">刷新</el-button>
-      </div>
-
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <div class="stat-item">
-            <div class="stat-value text-danger">{{ overview.weakPasswordCount }}</div>
-            <div class="stat-label">弱密码用户</div>
-            <el-button v-if="overview.weakPasswordCount > 0" type="text" size="small" @click="notifyWeakPassword">通知修改</el-button>
+          <div class="stat-info">
+            <div class="stat-value">{{ overview.lockedCount }}</div>
+            <div class="stat-label">已锁定账户</div>
+            <el-button
+              v-if="overview.lockedCount > 0"
+              type="text"
+              size="mini"
+              @click="viewLockedAccounts"
+            >
+              查看
+            </el-button>
           </div>
-        </el-col>
-        <el-col :span="6">
-          <div class="stat-item">
-            <div class="stat-value text-warning">{{ overview.noMfaCount }}</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-icon mfa">
+            <i class="el-icon-mobile-phone" />
+          </div>
+          <div class="stat-info">
+            <div class="stat-value">{{ overview.noMfaCount }}</div>
             <div class="stat-label">未启用MFA的管理员</div>
-            <el-button v-if="overview.noMfaCount > 0" type="text" size="small" @click="enforceMfa">强制启用</el-button>
+            <el-button v-if="overview.noMfaCount > 0" type="text" size="mini" @click="enforceMfa">
+              强制启用
+            </el-button>
           </div>
-        </el-col>
-        <el-col :span="6">
-          <div class="stat-item">
-            <div class="stat-value">{{ overview.lockedCount }}</div>
-            <div class="stat-label">已锁定账户</div>
-            <el-button v-if="overview.lockedCount > 0" type="text" size="small" @click="viewLockedAccounts">查看</el-button>
+        </div>
+        <div class="stat-card">
+          <div class="stat-icon expire">
+            <i class="el-icon-time" />
           </div>
-        </el-col>
-        <el-col :span="6">
-          <div class="stat-item">
+          <div class="stat-info">
             <div class="stat-value">{{ overview.expiringPasswordCount }}</div>
             <div class="stat-label">即将过期密码</div>
-            <el-button v-if="overview.expiringPasswordCount > 0" type="text" size="small" @click="notifyExpiring">通知</el-button>
+            <el-button v-if="overview.expiringPasswordCount > 0" type="text" size="mini" @click="notifyExpiring">
+              通知
+            </el-button>
+          </div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-icon sessions">
+            <i class="el-icon-user" />
+          </div>
+          <div class="stat-info">
+            <div class="stat-value">{{ activeSessions }}</div>
+            <div class="stat-label">活跃会话</div>
+            <el-button type="text" size="mini" @click="viewActiveSessions">查看</el-button>
           </div>
-        </el-col>
-      </el-row>
-    </el-card>
+        </div>
+      </div>
+    </div>
+
+    <!-- 策略配置 -->
+    <div class="policies-section">
+      <div class="section-header">
+        <span class="section-title">策略配置</span>
+      </div>
+
+      <!-- 登录策略 -->
+      <el-card class="policy-card" shadow="hover">
+        <div slot="header">
+          <span>
+            <i class="el-icon-key" />
+            登录策略
+            <span>
+              <el-switch
+                v-model="policies.login.enabled"
+                active-text="启用"
+                style="float: right"
+                @change="savePolicy('login')"
+              />
+              </i></span></span></div>
+
+        <el-form :model="policies.login.config" label-width="180px" :disabled="!policies.login.enabled">
+          <el-row :gutter="40">
+            <el-col :span="12">
+              <el-form-item label="最大登录失败次数">
+                <el-input-number v-model="policies.login.config.maxFailures" :min="3" :max="10" />
+                <span class="form-tip">次失败后锁定账户</span>
+              </el-form-item>
+
+              <el-form-item label="账户锁定时间">
+                <el-select v-model="policies.login.config.lockDuration" style="width: 200px">
+                  <el-option label="5分钟" :value="5" />
+                  <el-option label="15分钟" :value="15" />
+                  <el-option label="30分钟" :value="30" />
+                  <el-option label="1小时" :value="60" />
+                  <el-option label="永久锁定（需管理员解锁）" :value="-1" />
+                </el-select>
+              </el-form-item>
+
+              <el-form-item label="会话超时时间">
+                <el-select v-model="policies.login.config.sessionTimeout" style="width: 200px">
+                  <el-option label="15分钟" :value="15" />
+                  <el-option label="30分钟" :value="30" />
+                  <el-option label="1小时" :value="60" />
+                  <el-option label="2小时" :value="120" />
+                  <el-option label="4小时" :value="240" />
+                  <el-option label="8小时" :value="480" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="并发登录限制">
+                <el-radio-group v-model="policies.login.config.concurrentLogin">
+                  <el-radio label="single">单点登录（只允许一个设备）</el-radio>
+                  <el-radio label="multiple">允许多设备同时登录</el-radio>
+                </el-radio-group>
+              </el-form-item>
+
+              <el-form-item label="IP白名单">
+                <el-switch v-model="policies.login.config.ipWhitelistEnabled" />
+                <div class="form-hint">启用后只有指定IP范围可以登录</div>
+              </el-form-item>
+
+              <el-form-item v-if="policies.login.config.ipWhitelistEnabled" label="允许的IP范围">
+                <el-input
+                  v-model="policies.login.config.ipWhitelist"
+                  type="textarea"
+                  :rows="3"
+                  placeholder="每行输入一个IP或CIDR，例如：&#10;192.168.1.0/24&#10;10.0.0.1"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-check" @click="savePolicy('login')">保存登录策略</el-button>
+          </el-form-item>
+        </el-form>
+      </el-card>
+
+      <!-- 审计策略 -->
+      <el-card class="policy-card" shadow="hover">
+        <div slot="header">
+          <span>
+            <i
+              class="el-icon-document-checked"
+            />
+            审计策略
+            <span>
+              <el-switch
+                v-model="policies.audit.enabled"
+                active-text="启用"
+                style="float: right"
+                @change="savePolicy('audit')"
+              />
+            </span>
+          </span></div>
+
+        <el-form :model="policies.audit.config" label-width="180px" :disabled="!policies.audit.enabled">
+          <el-row :gutter="40">
+            <el-col :span="12">
+              <el-form-item label="记录的操作类型">
+                <el-checkbox-group v-model="policies.audit.config.events">
+                  <el-checkbox label="login">登录/登出</el-checkbox>
+                  <el-checkbox label="password">密码修改</el-checkbox>
+                  <el-checkbox label="user">用户管理</el-checkbox>
+                  <el-checkbox label="role">角色管理</el-checkbox>
+                  <el-checkbox label="permission">权限变更</el-checkbox>
+                  <el-checkbox label="config">系统配置</el-checkbox>
+                </el-checkbox-group>
+              </el-form-item>
+
+              <el-form-item label="日志保留时间">
+                <el-select v-model="policies.audit.config.retentionDays" style="width: 200px">
+                  <el-option label="30天" :value="30" />
+                  <el-option label="90天" :value="90" />
+                  <el-option label="180天" :value="180" />
+                  <el-option label="1年" :value="365" />
+                  <el-option label="永久保留" :value="0" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="异常告警">
+                <el-switch v-model="policies.audit.config.alertEnabled" />
+                <div class="form-hint">检测到异常行为时发送告警通知</div>
+              </el-form-item>
+
+              <el-form-item v-if="policies.audit.config.alertEnabled" label="告警条件">
+                <div class="alert-conditions">
+                  <div class="condition-item">
+                    <span>连续登录失败超过</span>
+                    <el-input-number
+                      v-model="policies.audit.config.alertLoginFailures"
+                      :min="3"
+                      :max="10"
+                      size="small"
+                    />
+                    <span>次</span>
+                  </div>
+                  <div class="condition-item">
+                    <span>单IP请求超过</span>
+                    <el-input-number
+                      v-model="policies.audit.config.alertRequestsPerMinute"
+                      :min="100"
+                      :max="10000"
+                      :step="100"
+                      size="small"
+                    />
+                    <span>次/分钟</span>
+                  </div>
+                </div>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-check" @click="savePolicy('audit')">保存审计策略</el-button>
+          </el-form-item>
+        </el-form>
+      </el-card>
+    </div>
 
     <!-- 锁定账户对话框 -->
     <el-dialog title="已锁定账户" :visible.sync="lockedDialogVisible" width="700px">
@@ -202,14 +234,30 @@
         <el-table-column prop="username" label="用户名" />
         <el-table-column prop="lockTime" label="锁定时间" />
         <el-table-column prop="reason" label="锁定原因" />
+        <el-table-column prop="unlockTime" label="自动解锁" />
         <el-table-column label="操作" width="100">
           <template slot-scope="{ row }">
-            <el-button size="mini" type="text" @click="unlockAccount(row)">解锁</el-button>
+            <el-button size="mini" type="text" icon="el-icon-unlock" @click="unlockAccount(row)">解锁</el-button>
           </template>
         </el-table-column>
       </el-table>
     </el-dialog>
 
+    <!-- 活跃会话对话框 -->
+    <el-dialog title="活跃会话" :visible.sync="sessionsDialogVisible" width="800px">
+      <el-table :data="activeSessionsList" size="small">
+        <el-table-column prop="username" label="用户" />
+        <el-table-column prop="device" label="设备" />
+        <el-table-column prop="ip" label="IP地址" />
+        <el-table-column prop="location" label="位置" />
+        <el-table-column prop="loginTime" label="登录时间" />
+        <el-table-column label="操作" width="100">
+          <template slot-scope="{ row }">
+            <el-button size="mini" type="text" class="danger" @click="kickoutSession(row)">踢出</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
   </div>
 </template>
 
@@ -218,16 +266,8 @@ export default {
   name: 'SecurityPolicy',
   data() {
     return {
+      activeSessions: 128,
       policies: {
-        password: {
-          enabled: true,
-          config: {
-            minLength: 8,
-            complexity: ['uppercase', 'lowercase', 'number'],
-            expiryDays: 90,
-            historyCount: 5
-          }
-        },
         login: {
           enabled: true,
           config: {
@@ -251,33 +291,31 @@ export default {
         }
       },
       overview: {
-        weakPasswordCount: 3,
-        noMfaCount: 2,
         lockedCount: 1,
+        noMfaCount: 2,
         expiringPasswordCount: 5
       },
       lockedDialogVisible: false,
+      sessionsDialogVisible: false,
       lockedAccounts: [
-        { username: 'test_user', lockTime: '2023-12-01 10:30:00', reason: '连续登录失败5次' }
+        { username: 'test_user', lockTime: '2023-12-01 10:30:00', reason: '连续登录失败5次', unlockTime: '2023-12-01 11:00:00' }
+      ],
+      activeSessionsList: [
+        { username: 'admin', device: 'Chrome / Windows', ip: '192.168.1.100', location: '北京', loginTime: '2023-12-01 09:00:00' },
+        { username: 'zhangsan', device: 'Safari / macOS', ip: '192.168.1.101', location: '上海', loginTime: '2023-12-01 10:30:00' }
       ]
     }
   },
   methods: {
-    savePolicy(type) {
-      const policyName = { password: '密码', login: '登录', audit: '审计' }[type]
-      this.$message.success(`${policyName}策略已保存`)
-    },
-    refreshOverview() {
-      this.$message.success('安全概览已刷新')
+    refreshData() {
+      this.$message.success('数据已刷新')
     },
-    notifyWeakPassword() {
-      this.$message.success('已发送弱密码修改通知')
+    saveAllPolicies() {
+      this.$message.success('所有策略配置已保存')
     },
-    enforceMfa() {
-      this.$confirm('确定为所有未启用MFA的管理员强制启用MFA吗？', '提示').then(() => {
-        this.$message.success('已强制启用MFA')
-        this.overview.noMfaCount = 0
-      })
+    savePolicy(type) {
+      const policyName = { login: '登录', audit: '审计' }[type]
+      this.$message.success(`${policyName}策略已保存`)
     },
     viewLockedAccounts() {
       this.lockedDialogVisible = true
@@ -290,6 +328,23 @@ export default {
         this.$message.success(`账户 ${row.username} 已解锁`)
       }
     },
+    viewActiveSessions() {
+      this.sessionsDialogVisible = true
+    },
+    kickoutSession(row) {
+      const index = this.activeSessionsList.findIndex(item => item.username === row.username)
+      if (index > -1) {
+        this.activeSessionsList.splice(index, 1)
+        this.activeSessions--
+        this.$message.success(`用户 ${row.username} 已踢出`)
+      }
+    },
+    enforceMfa() {
+      this.$confirm('确定为所有未启用MFA的管理员强制启用MFA吗？', '提示').then(() => {
+        this.$message.success('已强制启用MFA')
+        this.overview.noMfaCount = 0
+      })
+    },
     notifyExpiring() {
       this.$message.success('已发送密码过期提醒')
     }
@@ -299,57 +354,174 @@ export default {
 
 <style lang="scss" scoped>
 .security-policy-page {
-  padding: 20px;
+  padding: 24px;
+
+  // 页面头部
+  .page-header {
+    margin-bottom: 24px;
+
+    .header-content {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      margin-bottom: 24px;
+
+      .title-section {
+        .page-title {
+          font-size: 24px;
+          font-weight: 600;
+          color: #1a1a1a;
+          margin: 0 0 8px 0;
+        }
 
-  .policy-section {
-    border-radius: 10px;
-    margin-bottom: 20px;
+        .page-desc {
+          font-size: 14px;
+          color: #666;
+          margin: 0;
+        }
+      }
 
-    ::v-deep .el-card__header {
-      font-weight: 600;
+      .header-actions {
+        display: flex;
+        gap: 12px;
+      }
     }
 
-    .form-tip {
-      margin-left: 10px;
-      color: #909399;
-    }
+    .stats-row {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 16px;
+
+      .stat-card {
+        background: #fff;
+        border-radius: 12px;
+        padding: 20px;
+        display: flex;
+        align-items: center;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+        border: 1px solid #e8e8e8;
+
+        .stat-icon {
+          width: 48px;
+          height: 48px;
+          border-radius: 12px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-right: 16px;
+          font-size: 24px;
+
+          &.locked {
+            background: #fff2f0;
+            color: #ff4d4f;
+          }
+
+          &.mfa {
+            background: #fff7e6;
+            color: #faad14;
+          }
 
-    .alert-conditions {
-      .condition-item {
-        margin-bottom: 10px;
+          &.expire {
+            background: #e6f4ff;
+            color: #1890ff;
+          }
 
-        span {
-          margin: 0 5px;
+          &.sessions {
+            background: #f6ffed;
+            color: #73d13d;
+          }
+        }
+
+        .stat-value {
+          font-size: 24px;
+          font-weight: 600;
+          color: #1a1a1a;
+          line-height: 1.2;
+        }
+
+        .stat-label {
+          font-size: 13px;
+          color: #666;
+          margin-top: 4px;
         }
       }
     }
   }
 
-  .security-overview {
-    border-radius: 10px;
+  // 策略配置
+  .policies-section {
+    .section-header {
+      margin-bottom: 16px;
+
+      .section-title {
+        font-size: 16px;
+        font-weight: 600;
+        color: #1a1a1a;
+      }
+    }
 
-    .stat-item {
-      text-align: center;
-      padding: 20px;
+    .policy-card {
+      border-radius: 12px;
+      margin-bottom: 24px;
 
-      .stat-value {
-        font-size: 32px;
+      ::v-deep .el-card__header {
         font-weight: 600;
-        margin-bottom: 8px;
 
-        &.text-danger {
-          color: #f56c6c;
+        i {
+          margin-right: 8px;
+          color: #409eff;
         }
+      }
+
+      .form-tip {
+        margin-left: 10px;
+        color: #909399;
+      }
+
+      .form-hint {
+        font-size: 12px;
+        color: #999;
+        margin-top: 4px;
+      }
+
+      .alert-conditions {
+        .condition-item {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          margin-bottom: 12px;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
 
-        &.text-warning {
-          color: #e6a23c;
+          span {
+            color: #606266;
+          }
         }
       }
+    }
+  }
+}
 
-      .stat-label {
-        color: #909399;
-        font-size: 14px;
-        margin-bottom: 10px;
+// 响应式
+@media (max-width: 1200px) {
+  .security-policy-page {
+    .page-header {
+      .stats-row {
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .security-policy-page {
+    padding: 16px;
+
+    .page-header {
+      .stats-row {
+        grid-template-columns: 1fr;
       }
     }
   }
diff --git a/web/src/views/userManagement/role.vue b/web/src/views/userManagement/role.vue
index 66097b2..7357a1b 100644
--- a/web/src/views/userManagement/role.vue
+++ b/web/src/views/userManagement/role.vue
@@ -7,18 +7,18 @@
 
         <!-- 常规搜索 -->
         <el-form-item label="角色名称">
-          <el-input v-model="searchForm.roleName" placeholder="请输入角色名称" clearable/>
+          <el-input v-model="searchForm.roleName" placeholder="请输入角色名称" clearable />
         </el-form-item>
 
         <el-form-item label="描述">
-          <el-input v-model="searchForm.description" placeholder="请输入描述" clearable/>
+          <el-input v-model="searchForm.description" placeholder="请输入描述" clearable />
         </el-form-item>
 
         <div class="search-btn-group">
           <el-button type="primary" icon="el-icon-search" size="mini" @click="search">查询</el-button>
           <el-button size="mini" icon="el-icon-refresh" @click="reset">重置</el-button>
           <el-button size="mini" type="text" class="toggle-advanced-btn" @click="toggleAdvanced">
-            <i :class="showAdvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
+            <i :class="showAdvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" />
             高级搜索
           </el-button>
         </div>
@@ -76,8 +76,8 @@
         :header-cell-style="tableHeaderStyle"
         @selection-change="handleSelectionChange"
       >
-        <el-table-column type="selection" width="55"/>
-        <el-table-column prop="id" label="ID" width="80"/>
+        <el-table-column type="selection" width="55" />
+        <el-table-column prop="id" label="ID" width="80" />
         <el-table-column prop="roleName" label="角色名称" min-width="150">
           <template slot-scope="{ row }">
             <div class="role-name-cell">
@@ -88,8 +88,8 @@
             </div>
           </template>
         </el-table-column>
-        <el-table-column prop="roleCode" label="角色编码" width="150"/>
-        <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip/>
+        <el-table-column prop="roleCode" label="角色编码" width="150" />
+        <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
         <el-table-column prop="permissionCount" label="权限数" width="100">
           <template slot-scope="{ row }">
             <el-button type="text" @click="viewPermissions(row)">{{ row.permissionCount }}</el-button>
@@ -100,7 +100,7 @@
             <el-button type="text" @click="viewUsers(row)">{{ row.userCount }}</el-button>
           </template>
         </el-table-column>
-        <el-table-column prop="createTime" label="创建时间" width="160"/>
+        <el-table-column prop="createTime" label="创建时间" width="160" />
         <el-table-column label="操作" width="200" fixed="right">
           <template slot-scope="{ row }">
             <el-button size="mini" type="text" icon="el-icon-edit" @click="editRole(row)">编辑</el-button>
@@ -147,7 +147,7 @@
         class="role-form"
       >
         <el-form-item label="角色名称" prop="roleName">
-          <el-input v-model="roleForm.roleName" placeholder="请输入角色名称" maxlength="50" show-word-limit/>
+          <el-input v-model="roleForm.roleName" placeholder="请输入角色名称" maxlength="50" show-word-limit />
         </el-form-item>
 
         <el-form-item label="角色编码" prop="roleCode">
@@ -237,9 +237,9 @@
       width="600px"
     >
       <el-table :data="currentUsers" size="small">
-        <el-table-column prop="username" label="用户名"/>
-        <el-table-column prop="nickname" label="昵称"/>
-        <el-table-column prop="email" label="邮箱"/>
+        <el-table-column prop="username" label="用户名" />
+        <el-table-column prop="nickname" label="昵称" />
+        <el-table-column prop="email" label="邮箱" />
       </el-table>
       <div slot="footer">
         <el-button @click="userListVisible = false">关 闭</el-button>
@@ -251,20 +251,20 @@
 
 <script>
 export default {
-  name: "RoleList",
+  name: 'RoleList',
   data() {
     return {
       loading: false,
       showAdvanced: false,
       searchForm: {
-        roleName: "",
-        description: "",
+        roleName: '',
+        description: '',
         createTime: null
       },
       tableData: [
-        { id: 1, roleName: "系统管理员", roleCode: "ADMIN", description: "拥有全部权限", permissionCount: 52, userCount: 2, createTime: "2023-04-10 10:00:00" },
-        { id: 2, roleName: "普通用户", roleCode: "USER", description: "仅可访问基础功能", permissionCount: 15, userCount: 25, createTime: "2023-05-01 09:00:00" },
-        { id: 3, roleName: "审计员", roleCode: "AUDITOR", description: "仅可查看日志和报表", permissionCount: 8, userCount: 3, createTime: "2023-06-15 11:30:00" }
+        { id: 1, roleName: '系统管理员', roleCode: 'ADMIN', description: '拥有全部权限', permissionCount: 52, userCount: 2, createTime: '2023-04-10 10:00:00' },
+        { id: 2, roleName: '普通用户', roleCode: 'USER', description: '仅可访问基础功能', permissionCount: 15, userCount: 25, createTime: '2023-05-01 09:00:00' },
+        { id: 3, roleName: '审计员', roleCode: 'AUDITOR', description: '仅可查看日志和报表', permissionCount: 8, userCount: 3, createTime: '2023-06-15 11:30:00' }
       ],
       pageSize: 10,
       currentPage: 1,
@@ -309,25 +309,25 @@ export default {
           { id: 12, name: '用户新增' },
           { id: 13, name: '用户编辑' },
           { id: 14, name: '用户删除' }
-        ]},
+        ] },
         { id: 2, name: '角色管理', children: [
           { id: 21, name: '角色查询' },
           { id: 22, name: '角色新增' },
           { id: 23, name: '角色编辑' },
           { id: 24, name: '角色删除' }
-        ]}
+        ] }
       ],
       menuPermissions: [
         { id: 1, name: '首页', children: [] },
         { id: 2, name: '应用管理', children: [
           { id: 21, name: '应用列表' },
           { id: 22, name: '创建应用' }
-        ]},
+        ] },
         { id: 3, name: '用户管理', children: [
           { id: 31, name: '用户列表' },
           { id: 32, name: '用户组' },
           { id: 33, name: '角色' }
-        ]}
+        ] }
       ],
 
       // 查看权限
@@ -337,135 +337,135 @@ export default {
       // 查看用户
       userListVisible: false,
       currentUsers: []
-    };
+    }
   },
   methods: {
     toggleAdvanced() {
-      this.showAdvanced = !this.showAdvanced;
+      this.showAdvanced = !this.showAdvanced
     },
     search() {
-      this.loading = true;
+      this.loading = true
       setTimeout(() => {
-        this.loading = false;
-        this.$message.success("查询成功");
-      }, 500);
+        this.loading = false
+        this.$message.success('查询成功')
+      }, 500)
     },
     reset() {
-      this.searchForm = { roleName: "", description: "", createTime: null };
-      this.search();
+      this.searchForm = { roleName: '', description: '', createTime: null }
+      this.search()
     },
     addRole() {
-      this.dialogTitle = '新增角色';
-      this.isEdit = false;
-      this.currentId = null;
-      this.resetForm();
-      this.dialogVisible = true;
+      this.dialogTitle = '新增角色'
+      this.isEdit = false
+      this.currentId = null
+      this.resetForm()
+      this.dialogVisible = true
     },
     editRole(row) {
-      this.dialogTitle = '编辑角色';
-      this.isEdit = true;
-      this.currentId = row.id;
+      this.dialogTitle = '编辑角色'
+      this.isEdit = true
+      this.currentId = row.id
       this.roleForm = {
         roleName: row.roleName,
         roleCode: row.roleCode,
         description: row.description || ''
-      };
-      this.dialogVisible = true;
+      }
+      this.dialogVisible = true
     },
     deleteRole(row) {
-      const index = this.tableData.findIndex(item => item.id === row.id);
+      const index = this.tableData.findIndex(item => item.id === row.id)
       if (index > -1) {
-        this.tableData.splice(index, 1);
-        this.total--;
-        this.$message.success('删除成功');
+        this.tableData.splice(index, 1)
+        this.total--
+        this.$message.success('删除成功')
       }
     },
     batchDelete() {
       this.$confirm(`确定删除选中的 ${this.selectedRows.length} 个角色吗？`, '提示', {
         type: 'warning'
       }).then(() => {
-        const ids = this.selectedRows.map(row => row.id);
-        this.tableData = this.tableData.filter(item => !ids.includes(item.id));
-        this.total -= ids.length;
-        this.selectedRows = [];
-        this.$message.success('批量删除成功');
-      }).catch(() => {});
+        const ids = this.selectedRows.map(row => row.id)
+        this.tableData = this.tableData.filter(item => !ids.includes(item.id))
+        this.total -= ids.length
+        this.selectedRows = []
+        this.$message.success('批量删除成功')
+      }).catch(() => {})
     },
     viewPermissions(row) {
-      this.currentPermissions = this.apiPermissions;
-      this.permissionListVisible = true;
+      this.currentPermissions = this.apiPermissions
+      this.permissionListVisible = true
     },
     viewUsers(row) {
       this.currentUsers = [
         { username: 'admin', nickname: '管理员', email: 'admin@example.com' },
         { username: 'zhangsan', nickname: '张三', email: 'zhangsan@example.com' }
-      ];
-      this.userListVisible = true;
+      ]
+      this.userListVisible = true
     },
     assignPermissions(row) {
-      this.currentId = row.id;
-      this.activePermissionTab = 'api';
-      this.dataPermission = 'all';
-      this.permissionDialogVisible = true;
+      this.currentId = row.id
+      this.activePermissionTab = 'api'
+      this.dataPermission = 'all'
+      this.permissionDialogVisible = true
     },
     savePermissions() {
-      this.permissionLoading = true;
+      this.permissionLoading = true
       setTimeout(() => {
-        this.permissionLoading = false;
-        this.permissionDialogVisible = false;
-        this.$message.success('权限分配成功');
-      }, 800);
+        this.permissionLoading = false
+        this.permissionDialogVisible = false
+        this.$message.success('权限分配成功')
+      }, 800)
     },
     getRoleType(code) {
       const typeMap = {
         'ADMIN': 'danger',
         'USER': 'success',
         'AUDITOR': 'warning'
-      };
-      return typeMap[code] || 'info';
+      }
+      return typeMap[code] || 'info'
     },
     pageChange(p) {
-      this.currentPage = p;
-      this.search();
+      this.currentPage = p
+      this.search()
     },
     handleSizeChange(size) {
-      this.pageSize = size;
-      this.search();
+      this.pageSize = size
+      this.search()
     },
     handleSelectionChange(selection) {
-      this.selectedRows = selection;
+      this.selectedRows = selection
     },
     tableHeaderStyle() {
-      return { background: "#f5f7fa", fontWeight: "bold", color: "#303133" };
+      return { background: '#f5f7fa', fontWeight: 'bold', color: '#303133' }
     },
     resetForm() {
       this.roleForm = {
         roleName: '',
         roleCode: '',
         description: ''
-      };
+      }
       this.$nextTick(() => {
-        this.$refs.roleForm && this.$refs.roleForm.clearValidate();
-      });
+        this.$refs.roleForm && this.$refs.roleForm.clearValidate()
+      })
     },
     handleDialogClose() {
-      this.resetForm();
+      this.resetForm()
     },
     submitForm() {
       this.$refs.roleForm.validate(valid => {
         if (valid) {
-          this.submitLoading = true;
+          this.submitLoading = true
           setTimeout(() => {
-            this.submitLoading = false;
+            this.submitLoading = false
             if (this.isEdit) {
-              const index = this.tableData.findIndex(item => item.id === this.currentId);
+              const index = this.tableData.findIndex(item => item.id === this.currentId)
               if (index > -1) {
                 this.tableData[index] = {
                   ...this.tableData[index],
                   ...this.roleForm
-                };
+                }
               }
-              this.$message.success('修改成功');
+              this.$message.success('修改成功')
             } else {
               const newRole = {
                 id: this.tableData.length + 1,
@@ -473,18 +473,18 @@ export default {
                 permissionCount: 0,
                 userCount: 0,
                 createTime: new Date().toLocaleString()
-              };
-              this.tableData.unshift(newRole);
-              this.total++;
-              this.$message.success('新增成功');
+              }
+              this.tableData.unshift(newRole)
+              this.total++
+              this.$message.success('新增成功')
             }
-            this.dialogVisible = false;
-          }, 800);
+            this.dialogVisible = false
+          }, 800)
         }
-      });
+      })
     }
   }
-};
+}
 </script>
 
 <style lang="scss" scoped>
@@ -546,8 +546,6 @@ export default {
 
       .add-btn {
         border: none !important;
-        background-color: #409eff20;
-        color: #409eff;
         font-weight: 500;
       }
 
diff --git a/web/src/views/userManagement/user.vue b/web/src/views/userManagement/user.vue
index 0a3d03e..5103211 100644
--- a/web/src/views/userManagement/user.vue
+++ b/web/src/views/userManagement/user.vue
@@ -1,11 +1,8 @@
 <template>
   <div class="user-page">
-
     <!-- 搜索区 -->
     <el-card class="search-card" shadow="hover">
       <el-form :inline="true" :model="searchForm" size="small" class="search-form">
-
-        <!-- 常规搜索 -->
         <el-form-item label="用户名">
           <el-input v-model="searchForm.username" placeholder="请输入用户名" clearable />
         </el-form-item>
@@ -19,15 +16,14 @@
         </el-form-item>
 
         <div class="search-btn-group">
-          <el-button type="primary" size="mini" icon="el-icon-search" @click="search">查询</el-button>
-          <el-button size="mini" icon="el-icon-refresh" @click="reset">重置</el-button>
-          <el-button size="mini" type="text" class="toggle-advanced-btn" @click="toggleAdvanced">
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="search">查询</el-button>
+          <el-button icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
+          <el-button type="text" class="toggle-advanced-btn" @click="toggleAdvanced">
             <i :class="showAdvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" />
-            高级搜索
+            {{ showAdvanced ? '收起' : '高级' }}
           </el-button>
         </div>
 
-        <!-- 折叠高级搜索 -->
         <transition name="slide-fade">
           <div v-show="showAdvanced" class="advanced-search">
             <el-form-item label="状态">
@@ -48,14 +44,11 @@
             </el-form-item>
           </div>
         </transition>
-
       </el-form>
     </el-card>
 
     <!-- 列表卡片 -->
     <el-card class="table-card" shadow="hover">
-
-      <!-- 顶部操作行 -->
       <div class="table-header-bar">
         <el-button
           size="small"
@@ -73,12 +66,9 @@
           plain
           :disabled="selectedRows.length === 0"
           @click="batchDelete"
-        >
-          批量删除
-        </el-button>
+        >批量删除</el-button>
       </div>
 
-      <!-- 表格 -->
       <el-table
         v-loading="loading"
         :data="tableData"
@@ -117,17 +107,13 @@
             <el-button size="mini" type="text" icon="el-icon-view" @click="viewUser(row)">查看</el-button>
             <el-button size="mini" type="text" icon="el-icon-edit" @click="editUser(row)">编辑</el-button>
             <el-button size="mini" type="text" icon="el-icon-key" @click="resetPassword(row)">重置密码</el-button>
-            <el-popconfirm
-              title="确定删除该用户吗？"
-              @confirm="deleteUser(row)"
-            >
+            <el-popconfirm title="确定删除该用户吗？" @confirm="deleteUser(row)">
               <el-button slot="reference" size="mini" type="text" class="danger" icon="el-icon-delete">删除</el-button>
             </el-popconfirm>
           </template>
         </el-table-column>
       </el-table>
 
-      <!-- 分页 -->
       <div class="pagination-box">
         <el-pagination
           background
@@ -140,7 +126,6 @@
           @current-change="pageChange"
         />
       </div>
-
     </el-card>
 
     <!-- 新增/编辑用户对话框 -->
@@ -151,13 +136,7 @@
       :close-on-click-modal="false"
       @close="handleDialogClose"
     >
-      <el-form
-        ref="userForm"
-        :model="userForm"
-        :rules="userRules"
-        label-width="100px"
-        class="user-form"
-      >
+      <el-form ref="userForm" :model="userForm" :rules="userRules" label-width="100px" class="user-form">
         <el-row :gutter="20">
           <el-col :span="12">
             <el-form-item label="用户名" prop="username">
@@ -187,57 +166,25 @@
         <el-row v-if="!isEdit" :gutter="20">
           <el-col :span="12">
             <el-form-item label="密码" prop="password">
-              <el-input
-                v-model="userForm.password"
-                type="password"
-                placeholder="请输入密码"
-                show-password
-              />
+              <el-input v-model="userForm.password" type="password" placeholder="请输入密码" show-password />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="确认密码" prop="confirmPassword">
-              <el-input
-                v-model="userForm.confirmPassword"
-                type="password"
-                placeholder="请再次输入密码"
-                show-password
-              />
+              <el-input v-model="userForm.confirmPassword" type="password" placeholder="请再次输入密码" show-password />
             </el-form-item>
           </el-col>
         </el-row>
 
         <el-form-item label="所属用户组" prop="groupIds">
-          <el-select
-            v-model="userForm.groupIds"
-            multiple
-            collapse-tags
-            placeholder="请选择用户组"
-            style="width: 100%"
-          >
-            <el-option
-              v-for="group in groupOptions"
-              :key="group.id"
-              :label="group.groupName"
-              :value="group.id"
-            />
+          <el-select v-model="userForm.groupIds" multiple collapse-tags placeholder="请选择用户组" style="width: 100%">
+            <el-option v-for="group in groupOptions" :key="group.id" :label="group.groupName" :value="group.id" />
           </el-select>
         </el-form-item>
 
         <el-form-item label="所属角色" prop="roleIds">
-          <el-select
-            v-model="userForm.roleIds"
-            multiple
-            collapse-tags
-            placeholder="请选择角色"
-            style="width: 100%"
-          >
-            <el-option
-              v-for="role in roleOptions"
-              :key="role.id"
-              :label="role.roleName"
-              :value="role.id"
-            />
+          <el-select v-model="userForm.roleIds" multiple collapse-tags placeholder="请选择角色" style="width: 100%">
+            <el-option v-for="role in roleOptions" :key="role.id" :label="role.roleName" :value="role.id" />
           </el-select>
         </el-form-item>
 
@@ -249,12 +196,7 @@
         </el-form-item>
 
         <el-form-item label="备注" prop="remark">
-          <el-input
-            v-model="userForm.remark"
-            type="textarea"
-            :rows="3"
-            placeholder="请输入备注信息"
-          />
+          <el-input v-model="userForm.remark" type="textarea" :rows="3" placeholder="请输入备注信息" />
         </el-form-item>
       </el-form>
 
@@ -265,11 +207,7 @@
     </el-dialog>
 
     <!-- 查看用户详情对话框 -->
-    <el-dialog
-      title="用户详情"
-      :visible.sync="detailVisible"
-      width="650px"
-    >
+    <el-dialog title="用户详情" :visible.sync="detailVisible" width="650px">
       <el-descriptions :column="2" border>
         <el-descriptions-item label="用户ID">{{ currentUser.id }}</el-descriptions-item>
         <el-descriptions-item label="用户名">{{ currentUser.username }}</el-descriptions-item>
@@ -282,15 +220,11 @@
         <el-descriptions-item label="手机号">{{ currentUser.phone || '-' }}</el-descriptions-item>
         <el-descriptions-item label="邮箱">{{ currentUser.email || '-' }}</el-descriptions-item>
         <el-descriptions-item label="所属用户组" :span="2">
-          <el-tag v-for="group in currentUser.groups" :key="group" size="small" style="margin-right: 8px">
-            {{ group }}
-          </el-tag>
+          <el-tag v-for="group in currentUser.groups" :key="group" size="small" style="margin-right: 8px">{{ group }}</el-tag>
           <span v-if="!currentUser.groups || currentUser.groups.length === 0">-</span>
         </el-descriptions-item>
         <el-descriptions-item label="所属角色" :span="2">
-          <el-tag v-for="role in currentUser.roles" :key="role" size="small" type="warning" style="margin-right: 8px">
-            {{ role }}
-          </el-tag>
+          <el-tag v-for="role in currentUser.roles" :key="role" size="small" type="warning" style="margin-right: 8px">{{ role }}</el-tag>
           <span v-if="!currentUser.roles || currentUser.roles.length === 0">-</span>
         </el-descriptions-item>
         <el-descriptions-item label="创建时间">{{ currentUser.createTime }}</el-descriptions-item>
@@ -304,33 +238,13 @@
     </el-dialog>
 
     <!-- 重置密码对话框 -->
-    <el-dialog
-      title="重置密码"
-      :visible.sync="pwdDialogVisible"
-      width="400px"
-      :close-on-click-modal="false"
-    >
-      <el-form
-        ref="pwdForm"
-        :model="pwdForm"
-        :rules="pwdRules"
-        label-width="100px"
-      >
+    <el-dialog title="重置密码" :visible.sync="pwdDialogVisible" width="400px" :close-on-click-modal="false">
+      <el-form ref="pwdForm" :model="pwdForm" :rules="pwdRules" label-width="100px">
         <el-form-item label="新密码" prop="newPassword">
-          <el-input
-            v-model="pwdForm.newPassword"
-            type="password"
-            placeholder="请输入新密码"
-            show-password
-          />
+          <el-input v-model="pwdForm.newPassword" type="password" placeholder="请输入新密码" show-password />
         </el-form-item>
         <el-form-item label="确认密码" prop="confirmPassword">
-          <el-input
-            v-model="pwdForm.confirmPassword"
-            type="password"
-            placeholder="请再次输入新密码"
-            show-password
-          />
+          <el-input v-model="pwdForm.confirmPassword" type="password" placeholder="请再次输入新密码" show-password />
         </el-form-item>
       </el-form>
       <div slot="footer">
@@ -338,7 +252,6 @@
         <el-button type="primary" :loading="pwdLoading" @click="submitPwd">确 定</el-button>
       </div>
     </el-dialog>
-
   </div>
 </template>
 
@@ -346,7 +259,6 @@
 export default {
   name: 'UserList',
   data() {
-    // 密码验证
     const validatePass = (rule, value, callback) => {
       if (value === '') {
         callback(new Error('请输入密码'))
@@ -432,15 +344,11 @@ export default {
       currentPage: 1,
       total: 3,
       selectedRows: [],
-
-      // 对话框相关
       dialogVisible: false,
       dialogTitle: '新增用户',
       isEdit: false,
       submitLoading: false,
       currentId: null,
-
-      // 用户表单
       userForm: {
         username: '',
         nickname: '',
@@ -458,27 +366,13 @@ export default {
           { required: true, message: '请输入用户名', trigger: 'blur' },
           { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
         ],
-        nickname: [
-          { max: 20, message: '长度不能超过 20 个字符', trigger: 'blur' }
-        ],
-        phone: [
-          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
-        ],
-        email: [
-          { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
-        ],
-        password: [
-          { required: true, validator: validatePass, trigger: 'blur' }
-        ],
-        confirmPassword: [
-          { required: true, validator: validatePass2, trigger: 'blur' }
-        ],
-        status: [
-          { required: true, message: '请选择状态', trigger: 'change' }
-        ]
+        nickname: [{ max: 20, message: '长度不能超过 20 个字符', trigger: 'blur' }],
+        phone: [{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }],
+        email: [{ type: 'email', message: '邮箱格式不正确', trigger: 'blur' }],
+        password: [{ required: true, validator: validatePass, trigger: 'blur' }],
+        confirmPassword: [{ required: true, validator: validatePass2, trigger: 'blur' }],
+        status: [{ required: true, message: '请选择状态', trigger: 'change' }]
       },
-
-      // 下拉选项
       groupOptions: [
         { id: 1, groupName: '管理员组' },
         { id: 2, groupName: '研发组' },
@@ -490,26 +384,14 @@ export default {
         { id: 2, roleName: '普通用户' },
         { id: 3, roleName: '审计员' }
       ],
-
-      // 详情对话框
       detailVisible: false,
       currentUser: {},
-
-      // 密码重置对话框
       pwdDialogVisible: false,
       pwdLoading: false,
-      pwdForm: {
-        newPassword: '',
-        confirmPassword: ''
-      },
+      pwdForm: { newPassword: '', confirmPassword: '' },
       pwdRules: {
-        newPassword: [
-          { required: true, message: '请输入新密码', trigger: 'blur' },
-          { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
-        ],
-        confirmPassword: [
-          { required: true, validator: validatePwd2, trigger: 'blur' }
-        ]
+        newPassword: [{ required: true, message: '请输入新密码', trigger: 'blur' }, { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }],
+        confirmPassword: [{ required: true, validator: validatePwd2, trigger: 'blur' }]
       },
       resetPwdUserId: null
     }
@@ -520,19 +402,10 @@ export default {
     },
     search() {
       this.loading = true
-      setTimeout(() => {
-        this.loading = false
-        this.$message.success('查询成功')
-      }, 500)
+      setTimeout(() => { this.loading = false }, 300)
     },
     reset() {
-      this.searchForm = {
-        username: '',
-        phone: '',
-        email: '',
-        status: '',
-        createTime: null
-      }
+      this.searchForm = { username: '', phone: '', email: '', status: '', createTime: null }
       this.search()
     },
     addUser() {
@@ -553,7 +426,7 @@ export default {
         email: row.email || '',
         password: '',
         confirmPassword: '',
-        groupIds: [1], // 模拟数据
+        groupIds: [1],
         roleIds: row.roles ? row.roles.map((r, i) => i + 1) : [],
         status: row.status,
         remark: row.remark || ''
@@ -577,9 +450,7 @@ export default {
       }
     },
     batchDelete() {
-      this.$confirm(`确定删除选中的 ${this.selectedRows.length} 个用户吗？`, '提示', {
-        type: 'warning'
-      }).then(() => {
+      this.$confirm(`确定删除选中的 ${this.selectedRows.length} 个用户吗？`, '提示', { type: 'warning' }).then(() => {
         const ids = this.selectedRows.map(row => row.id)
         this.tableData = this.tableData.filter(item => !ids.includes(item.id))
         this.total -= ids.length
@@ -595,9 +466,7 @@ export default {
       this.resetPwdUserId = row.id
       this.pwdForm = { newPassword: '', confirmPassword: '' }
       this.pwdDialogVisible = true
-      this.$nextTick(() => {
-        this.$refs.pwdForm && this.$refs.pwdForm.clearValidate()
-      })
+      this.$nextTick(() => { this.$refs.pwdForm && this.$refs.pwdForm.clearValidate() })
     },
     submitPwd() {
       this.$refs.pwdForm.validate(valid => {
@@ -626,21 +495,8 @@ export default {
       return { background: '#f5f7fa', fontWeight: 'bold', color: '#303133' }
     },
     resetForm() {
-      this.userForm = {
-        username: '',
-        nickname: '',
-        phone: '',
-        email: '',
-        password: '',
-        confirmPassword: '',
-        groupIds: [],
-        roleIds: [],
-        status: 'enabled',
-        remark: ''
-      }
-      this.$nextTick(() => {
-        this.$refs.userForm && this.$refs.userForm.clearValidate()
-      })
+      this.userForm = { username: '', nickname: '', phone: '', email: '', password: '', confirmPassword: '', groupIds: [], roleIds: [], status: 'enabled', remark: '' }
+      this.$nextTick(() => { this.$refs.userForm && this.$refs.userForm.clearValidate() })
     },
     handleDialogClose() {
       this.resetForm()
@@ -654,11 +510,7 @@ export default {
             if (this.isEdit) {
               const index = this.tableData.findIndex(item => item.id === this.currentId)
               if (index > -1) {
-                this.tableData[index] = {
-                  ...this.tableData[index],
-                  ...this.userForm,
-                  updateTime: new Date().toLocaleString()
-                }
+                this.tableData[index] = { ...this.tableData[index], ...this.userForm, updateTime: new Date().toLocaleString() }
               }
               this.$message.success('修改成功')
             } else {
@@ -666,14 +518,8 @@ export default {
                 id: this.tableData.length + 1,
                 ...this.userForm,
                 createTime: new Date().toLocaleString(),
-                groups: this.userForm.groupIds.map(id => {
-                  const group = this.groupOptions.find(g => g.id === id)
-                  return group ? group.groupName : ''
-                }).filter(Boolean),
-                roles: this.userForm.roleIds.map(id => {
-                  const role = this.roleOptions.find(r => r.id === id)
-                  return role ? role.roleName : ''
-                }).filter(Boolean)
+                groups: this.userForm.groupIds.map(id => { const group = this.groupOptions.find(g => g.id === id); return group ? group.groupName : '' }).filter(Boolean),
+                roles: this.userForm.roleIds.map(id => { const role = this.roleOptions.find(r => r.id === id); return role ? role.roleName : '' }).filter(Boolean)
               }
               this.tableData.unshift(newUser)
               this.total++
@@ -695,49 +541,46 @@ export default {
   .search-card {
     margin-bottom: 16px;
     border-radius: 10px;
-  }
-
-  .search-form {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-
-    .el-form-item {
-      margin-right: 20px;
-      margin-bottom: 12px;
-    }
 
-    .search-btn-group {
+    .search-form {
       display: flex;
+      flex-wrap: wrap;
       align-items: center;
-      margin-left: auto;
 
-      button {
-        margin-left: 8px;
+      .el-form-item {
+        margin-right: 20px;
+        margin-bottom: 12px;
       }
 
-      .toggle-advanced-btn {
+      .search-btn-group {
         display: flex;
         align-items: center;
-        padding: 0;
-        font-size: 13px;
-        color: #409eff;
+        margin-left: auto;
 
-        i {
-          margin-right: 2px;
-          font-size: 12px;
+        button {
+          margin-left: 8px;
+        }
+
+        .toggle-advanced-btn {
+          color: #409eff;
+          display: flex;
+          align-items: center;
+
+          i {
+            margin-right: 4px;
+          }
         }
       }
-    }
 
-    .advanced-search {
-      margin-top: 12px;
-      display: flex;
-      flex-wrap: wrap;
-      width: 100%;
+      .advanced-search {
+        margin-top: 12px;
+        display: flex;
+        flex-wrap: wrap;
+        width: 100%;
 
-      .el-form-item {
-        margin-right: 20px;
+        .el-form-item {
+          margin-right: 20px;
+        }
       }
     }
   }
@@ -754,8 +597,6 @@ export default {
 
       .add-btn {
         border: none !important;
-        background-color: #409eff20;
-        color: #409eff;
         font-weight: 500;
       }
 
@@ -791,26 +632,6 @@ export default {
           font-weight: 500;
         }
       }
-
-      .text-btn {
-        border: none;
-        background: transparent;
-        color: #409eff;
-        padding: 0 6px;
-      }
-
-      .text-btn:hover {
-        color: #66b1ff;
-        text-decoration: underline;
-      }
-
-      .danger {
-        color: #f56c6c;
-      }
-
-      .danger:hover {
-        color: #f78989;
-      }
     }
 
     .pagination-box {
@@ -826,7 +647,10 @@ export default {
   }
 }
 
-/* 高级搜索下拉动画 */
+.danger {
+  color: #ff4d4f;
+}
+
 .slide-fade-enter-active, .slide-fade-leave-active {
   transition: all 0.3s ease;
 }
@@ -835,4 +659,20 @@ export default {
   max-height: 0;
   overflow: hidden;
 }
+
+@media (max-width: 768px) {
+  .user-page {
+    padding: 12px;
+
+    .search-card {
+      .search-form {
+        .search-btn-group {
+          margin-left: 0;
+          margin-top: 12px;
+          width: 100%;
+        }
+      }
+    }
+  }
+}
 </style>
diff --git a/web/src/views/userManagement/userGroup.vue b/web/src/views/userManagement/userGroup.vue
index f6ea090..54339d4 100644
--- a/web/src/views/userManagement/userGroup.vue
+++ b/web/src/views/userManagement/userGroup.vue
@@ -7,18 +7,18 @@
 
         <!-- 常规搜索 -->
         <el-form-item label="用户组名称">
-          <el-input v-model="searchForm.groupName" placeholder="请输入用户组名称" clearable/>
+          <el-input v-model="searchForm.groupName" placeholder="请输入用户组名称" clearable />
         </el-form-item>
 
         <el-form-item label="描述">
-          <el-input v-model="searchForm.description" placeholder="请输入描述" clearable/>
+          <el-input v-model="searchForm.description" placeholder="请输入描述" clearable />
         </el-form-item>
 
         <div class="search-btn-group">
           <el-button type="primary" icon="el-icon-search" size="mini" @click="search">查询</el-button>
           <el-button size="mini" icon="el-icon-refresh" @click="reset">重置</el-button>
           <el-button size="mini" type="text" class="toggle-advanced-btn" @click="toggleAdvanced">
-            <i :class="showAdvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
+            <i :class="showAdvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" />
             高级搜索
           </el-button>
         </div>
@@ -76,23 +76,23 @@
         :header-cell-style="tableHeaderStyle"
         @selection-change="handleSelectionChange"
       >
-        <el-table-column type="selection" width="55"/>
-        <el-table-column prop="id" label="ID" width="80"/>
+        <el-table-column type="selection" width="55" />
+        <el-table-column prop="id" label="ID" width="80" />
         <el-table-column prop="groupName" label="用户组名称" min-width="150">
           <template slot-scope="{ row }">
             <div class="group-name-cell">
-              <el-avatar :size="32" icon="el-icon-user-solid" class="group-avatar"/>
+              <el-avatar :size="32" icon="el-icon-user-solid" class="group-avatar" />
               <span class="group-name">{{ row.groupName }}</span>
             </div>
           </template>
         </el-table-column>
-        <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip/>
+        <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
         <el-table-column prop="memberCount" label="成员数" width="100">
           <template slot-scope="{ row }">
             <el-button type="text" @click="viewMembers(row)">{{ row.memberCount }}</el-button>
           </template>
         </el-table-column>
-        <el-table-column prop="createTime" label="创建时间" width="160"/>
+        <el-table-column prop="createTime" label="创建时间" width="160" />
         <el-table-column label="操作" width="200" fixed="right">
           <template slot-scope="{ row }">
             <el-button size="mini" type="text" icon="el-icon-edit" @click="editGroup(row)">编辑</el-button>
@@ -139,7 +139,7 @@
         class="group-form"
       >
         <el-form-item label="组名称" prop="groupName">
-          <el-input v-model="groupForm.groupName" placeholder="请输入用户组名称" maxlength="50" show-word-limit/>
+          <el-input v-model="groupForm.groupName" placeholder="请输入用户组名称" maxlength="50" show-word-limit />
         </el-form-item>
 
         <el-form-item label="描述" prop="description">
@@ -192,9 +192,9 @@
       width="600px"
     >
       <el-table :data="currentMembers" size="small">
-        <el-table-column prop="username" label="用户名"/>
-        <el-table-column prop="nickname" label="昵称"/>
-        <el-table-column prop="email" label="邮箱"/>
+        <el-table-column prop="username" label="用户名" />
+        <el-table-column prop="nickname" label="昵称" />
+        <el-table-column prop="email" label="邮箱" />
       </el-table>
       <div slot="footer">
         <el-button @click="memberListVisible = false">关 闭</el-button>
@@ -206,21 +206,21 @@
 
 <script>
 export default {
-  name: "GroupList",
+  name: 'GroupList',
   data() {
     return {
       loading: false,
       showAdvanced: false,
       searchForm: {
-        groupName: "",
-        description: "",
+        groupName: '',
+        description: '',
         createTime: null
       },
       tableData: [
-        { id: 1, groupName: "管理员组", description: "系统管理员组，拥有全部权限", memberCount: 5, createTime: "2023-04-10 10:00:00" },
-        { id: 2, groupName: "研发组", description: "开发人员组", memberCount: 12, createTime: "2023-05-01 09:00:00" },
-        { id: 3, groupName: "测试组", description: "测试人员组", memberCount: 6, createTime: "2023-06-15 11:30:00" },
-        { id: 4, groupName: "运维组", description: "运维人员组", memberCount: 4, createTime: "2023-07-20 14:00:00" }
+        { id: 1, groupName: '管理员组', description: '系统管理员组，拥有全部权限', memberCount: 5, createTime: '2023-04-10 10:00:00' },
+        { id: 2, groupName: '研发组', description: '开发人员组', memberCount: 12, createTime: '2023-05-01 09:00:00' },
+        { id: 3, groupName: '测试组', description: '测试人员组', memberCount: 6, createTime: '2023-06-15 11:30:00' },
+        { id: 4, groupName: '运维组', description: '运维人员组', memberCount: 4, createTime: '2023-07-20 14:00:00' }
       ],
       pageSize: 10,
       currentPage: 1,
@@ -265,143 +265,143 @@ export default {
       // 查看成员
       memberListVisible: false,
       currentMembers: []
-    };
+    }
   },
   methods: {
     toggleAdvanced() {
-      this.showAdvanced = !this.showAdvanced;
+      this.showAdvanced = !this.showAdvanced
     },
     search() {
-      this.loading = true;
+      this.loading = true
       setTimeout(() => {
-        this.loading = false;
-        this.$message.success("查询成功");
-      }, 500);
+        this.loading = false
+        this.$message.success('查询成功')
+      }, 500)
     },
     reset() {
-      this.searchForm = { groupName: "", description: "", createTime: null };
-      this.search();
+      this.searchForm = { groupName: '', description: '', createTime: null }
+      this.search()
     },
     addGroup() {
-      this.dialogTitle = '新增用户组';
-      this.isEdit = false;
-      this.currentId = null;
-      this.resetForm();
-      this.dialogVisible = true;
+      this.dialogTitle = '新增用户组'
+      this.isEdit = false
+      this.currentId = null
+      this.resetForm()
+      this.dialogVisible = true
     },
     editGroup(row) {
-      this.dialogTitle = '编辑用户组';
-      this.isEdit = true;
-      this.currentId = row.id;
+      this.dialogTitle = '编辑用户组'
+      this.isEdit = true
+      this.currentId = row.id
       this.groupForm = {
         groupName: row.groupName,
         description: row.description || ''
-      };
-      this.dialogVisible = true;
+      }
+      this.dialogVisible = true
     },
     deleteGroup(row) {
-      const index = this.tableData.findIndex(item => item.id === row.id);
+      const index = this.tableData.findIndex(item => item.id === row.id)
       if (index > -1) {
-        this.tableData.splice(index, 1);
-        this.total--;
-        this.$message.success('删除成功');
+        this.tableData.splice(index, 1)
+        this.total--
+        this.$message.success('删除成功')
       }
     },
     batchDelete() {
       this.$confirm(`确定删除选中的 ${this.selectedRows.length} 个用户组吗？`, '提示', {
         type: 'warning'
       }).then(() => {
-        const ids = this.selectedRows.map(row => row.id);
-        this.tableData = this.tableData.filter(item => !ids.includes(item.id));
-        this.total -= ids.length;
-        this.selectedRows = [];
-        this.$message.success('批量删除成功');
-      }).catch(() => {});
+        const ids = this.selectedRows.map(row => row.id)
+        this.tableData = this.tableData.filter(item => !ids.includes(item.id))
+        this.total -= ids.length
+        this.selectedRows = []
+        this.$message.success('批量删除成功')
+      }).catch(() => {})
     },
     viewMembers(row) {
       // 模拟获取成员列表
       this.currentMembers = [
         { username: 'admin', nickname: '管理员', email: 'admin@example.com' },
         { username: 'zhangsan', nickname: '张三', email: 'zhangsan@example.com' }
-      ];
-      this.memberListVisible = true;
+      ]
+      this.memberListVisible = true
     },
     manageMembers(row) {
-      this.currentGroupId = row.id;
+      this.currentGroupId = row.id
       // 模拟已选择的成员
-      this.selectedMembers = [1, 2];
-      this.memberDialogVisible = true;
+      this.selectedMembers = [1, 2]
+      this.memberDialogVisible = true
     },
     filterUser(query, item) {
-      return item.label.indexOf(query) > -1;
+      return item.label.indexOf(query) > -1
     },
     saveMembers() {
-      this.memberLoading = true;
+      this.memberLoading = true
       setTimeout(() => {
-        this.memberLoading = false;
-        this.memberDialogVisible = false;
-        this.$message.success('成员分配成功');
-      }, 800);
+        this.memberLoading = false
+        this.memberDialogVisible = false
+        this.$message.success('成员分配成功')
+      }, 800)
     },
     pageChange(p) {
-      this.currentPage = p;
-      this.search();
+      this.currentPage = p
+      this.search()
     },
     handleSizeChange(size) {
-      this.pageSize = size;
-      this.search();
+      this.pageSize = size
+      this.search()
     },
     handleSelectionChange(selection) {
-      this.selectedRows = selection;
+      this.selectedRows = selection
     },
     tableHeaderStyle() {
-      return { background: "#f5f7fa", fontWeight: "bold", color: "#303133" };
+      return { background: '#f5f7fa', fontWeight: 'bold', color: '#303133' }
     },
     resetForm() {
       this.groupForm = {
         groupName: '',
         description: ''
-      };
+      }
       this.$nextTick(() => {
-        this.$refs.groupForm && this.$refs.groupForm.clearValidate();
-      });
+        this.$refs.groupForm && this.$refs.groupForm.clearValidate()
+      })
     },
     handleDialogClose() {
-      this.resetForm();
+      this.resetForm()
     },
     submitForm() {
       this.$refs.groupForm.validate(valid => {
         if (valid) {
-          this.submitLoading = true;
+          this.submitLoading = true
           setTimeout(() => {
-            this.submitLoading = false;
+            this.submitLoading = false
             if (this.isEdit) {
-              const index = this.tableData.findIndex(item => item.id === this.currentId);
+              const index = this.tableData.findIndex(item => item.id === this.currentId)
               if (index > -1) {
                 this.tableData[index] = {
                   ...this.tableData[index],
                   ...this.groupForm
-                };
+                }
               }
-              this.$message.success('修改成功');
+              this.$message.success('修改成功')
             } else {
               const newGroup = {
                 id: this.tableData.length + 1,
                 ...this.groupForm,
                 memberCount: 0,
                 createTime: new Date().toLocaleString()
-              };
-              this.tableData.unshift(newGroup);
-              this.total++;
-              this.$message.success('新增成功');
+              }
+              this.tableData.unshift(newGroup)
+              this.total++
+              this.$message.success('新增成功')
             }
-            this.dialogVisible = false;
-          }, 800);
+            this.dialogVisible = false
+          }, 800)
         }
-      });
+      })
     }
   }
-};
+}
 </script>
 
 <style lang="scss" scoped>
@@ -463,8 +463,6 @@ export default {
 
       .add-btn {
         border: none !important;
-        background-color: #409eff20;
-        color: #409eff;
         font-weight: 500;
       }