From 64c8952c2015d7b0eda48b6ad3cfbf30bf6fdf74 Mon Sep 17 00:00:00 2001
From: BrunoGao <bruno@example.com>
Date: Mon, 22 Sep 2025 20:18:47 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E8=A7=92=E8=89=B2?=
 =?UTF-8?q?=E5=92=8C=E7=94=A8=E6=88=B7=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E6=93=8D=E4=BD=9C=E6=8C=89=E9=92=AE=E5=B8=83=E5=B1=80=E4=B8=8E?=
 =?UTF-8?q?=E7=BE=8E=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 角色管理页面优化:
  * 将操作按钮整合为两个下拉菜单：权限管理和更多操作
  * 权限管理菜单包含：菜单权限、按钮权限
  * 更多操作菜单包含：编辑、删除
  * 操作列宽度从300px缩减到200px，避免布局溢出
  * 美化按钮样式：渐变背景、悬停动画、圆角设计
  * 添加响应式设计，移动端自适应

- 用户管理页面优化:
  * 将所有操作整合到管理下拉菜单中
  * 管理菜单包含：编辑、重置密码、权责设置、删除
  * 保留健康档案独立按钮，突出重要功能
  * 操作列宽度优化至200px
  * 修复Vue渲染函数语法问题，解决JSX兼容性
  * 使用h()函数替代JSX，确保Vue 3稳定性
  * 添加完善的错误处理和调试日志

- 视觉美化:
  * 统一的渐变色彩方案
  * 流畅的悬停动画效果
  * 圆角边框和柔和阴影
  * 彩色图标区分操作类型
  * 表格整体样式优化

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 ljwx-admin/src/views/manage/role/index.vue    | 287 +++++++++----
 .../manage/user/modules/user-page-table.vue   | 388 +++++++++++++-----
 2 files changed, 506 insertions(+), 169 deletions(-)

diff --git a/ljwx-admin/src/views/manage/role/index.vue b/ljwx-admin/src/views/manage/role/index.vue
index df12280..a09c30e 100644
--- a/ljwx-admin/src/views/manage/role/index.vue
+++ b/ljwx-admin/src/views/manage/role/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="tsx">
 import { computed } from 'vue';
-import { NButton, NPopconfirm, NTag } from 'naive-ui';
+import { NButton, NPopconfirm, NTag, NDropdown, NSpace, NDivider } from 'naive-ui';
 import { useBoolean } from '@sa/hooks';
 import { fetchDeleteRole, fetchGetRoleList } from '@/service/api';
 import { useAppStore } from '@/store/modules/app';
@@ -122,52 +122,55 @@ const { columns, columnChecks, data, loading, getData, getDataByPage, mobilePagi
       key: 'operate',
       title: $t('common.operate'),
       align: 'center',
-      width: 300,
-      render: row => (
-        <div class="flex-center gap-12px">
-          {hasAuth('sys:role:menu:add') && (
-            <NButton
-              type="info"
-              secondary
-              size="small"
-              class="permission-btn menu-permission-btn"
-              onClick={() => handleMenuAuth(row.id)}
-              renderIcon={() => <SvgIcon icon="material-symbols:menu-book" class="text-14px" />}
-            >
-              {$t('page.manage.role.menuAuth')}
-            </NButton>
-          )}
-          {hasAuth('sys:role:permission:add') && (
-            <NButton
-              type="warning"
-              secondary
-              size="small"
-              class="permission-btn button-permission-btn"
-              onClick={() => handleButtonAuth(row.id)}
-              renderIcon={() => <SvgIcon icon="material-symbols:smart-button" class="text-14px" />}
-            >
-              {$t('page.manage.role.buttonAuth')}
-            </NButton>
-          )}
-          {hasAuth('sys:role:update') && (
-            <NButton type="primary" quaternary size="small" onClick={() => edit(row.id)}>
-              {$t('common.edit')}
-            </NButton>
-          )}
-          {hasAuth('sys:role:delete') && (
-            <NPopconfirm onPositiveClick={() => handleDelete(row.id)}>
-              {{
-                default: () => $t('common.confirmDelete'),
-                trigger: () => (
-                  <NButton type="error" quaternary size="small">
-                    {$t('common.delete')}
-                  </NButton>
-                )
-              }}
-            </NPopconfirm>
-          )}
-        </div>
-      )
+      width: 200,
+      render: row => {
+        const permissionOptions = getPermissionMenuOptions(row);
+        const operateOptions = getOperateMenuOptions(row);
+        
+        return (
+          <NSpace size="small" justify="center">
+            {/* 权限管理下拉菜单 */}
+            {permissionOptions.length > 0 && (
+              <NDropdown
+                trigger="click"
+                options={permissionOptions}
+                size="small"
+                placement="bottom-start"
+              >
+                <NButton
+                  type="primary"
+                  size="small"
+                  class="permission-dropdown-btn"
+                  renderIcon={() => <SvgIcon icon="material-symbols:security" class="text-14px" />}
+                >
+                  权限管理
+                  <SvgIcon icon="material-symbols:arrow-drop-down" class="text-12px ml-4px" />
+                </NButton>
+              </NDropdown>
+            )}
+            
+            {/* 操作下拉菜单 */}
+            {operateOptions.length > 0 && (
+              <NDropdown
+                trigger="click"
+                options={operateOptions}
+                size="small"
+                placement="bottom-start"
+              >
+                <NButton
+                  type="default"
+                  size="small" 
+                  class="operate-dropdown-btn"
+                  renderIcon={() => <SvgIcon icon="material-symbols:more-vert" class="text-14px" />}
+                >
+                  更多
+                  <SvgIcon icon="material-symbols:arrow-drop-down" class="text-12px ml-4px" />
+                </NButton>
+              </NDropdown>
+            )}
+          </NSpace>
+        );
+      }
     }
   ]
 });
@@ -204,6 +207,68 @@ function handleButtonAuth(id: string) {
   handleId(id);
   openButtonModal();
 }
+
+// 权限管理下拉菜单选项
+function getPermissionMenuOptions(row: any) {
+  const options = [];
+  
+  if (hasAuth('sys:role:menu:add')) {
+    options.push({
+      label: $t('page.manage.role.menuAuth'),
+      key: 'menu',
+      icon: () => <SvgIcon icon="material-symbols:menu-book" class="text-16px text-blue-500" />,
+      props: {
+        onClick: () => handleMenuAuth(row.id)
+      }
+    });
+  }
+  
+  if (hasAuth('sys:role:permission:add')) {
+    options.push({
+      label: $t('page.manage.role.buttonAuth'),
+      key: 'button',
+      icon: () => <SvgIcon icon="material-symbols:smart-button" class="text-16px text-orange-500" />,
+      props: {
+        onClick: () => handleButtonAuth(row.id)
+      }
+    });
+  }
+  
+  return options;
+}
+
+// 操作下拉菜单选项
+function getOperateMenuOptions(row: any) {
+  const options = [];
+  
+  if (hasAuth('sys:role:update')) {
+    options.push({
+      label: $t('common.edit'),
+      key: 'edit',
+      icon: () => <SvgIcon icon="material-symbols:edit" class="text-16px text-blue-500" />,
+      props: {
+        onClick: () => edit(row.id)
+      }
+    });
+  }
+  
+  if (hasAuth('sys:role:delete')) {
+    options.push({
+      type: 'divider',
+      key: 'divider'
+    });
+    options.push({
+      label: $t('common.delete'),
+      key: 'delete',
+      icon: () => <SvgIcon icon="material-symbols:delete" class="text-16px text-red-500" />,
+      props: {
+        onClick: () => handleDelete(row.id)
+      }
+    });
+  }
+  
+  return options;
+}
 </script>
 
 <template>
@@ -250,39 +315,123 @@ function handleButtonAuth(id: string) {
 </template>
 
 <style scoped>
-.permission-btn {
-  border-radius: 6px;
-  font-weight: 500;
-  transition: all 0.3s ease;
-  min-width: 100px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-.menu-permission-btn {
+/* 下拉按钮样式 */
+.permission-dropdown-btn {
   background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
   border: 1px solid #3b82f6;
   color: white;
+  border-radius: 8px;
+  font-weight: 500;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
+  min-width: 90px;
 }
 
-.menu-permission-btn:hover {
+.permission-dropdown-btn:hover {
   background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
-  transform: translateY(-1px);
-  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.25);
 }
 
-.button-permission-btn {
-  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
-  border: 1px solid #f59e0b;
-  color: white;
+.operate-dropdown-btn {
+  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+  border: 1px solid #cbd5e1;
+  color: #475569;
+  border-radius: 8px;
+  font-weight: 500;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 2px 8px rgba(71, 85, 105, 0.1);
+  min-width: 70px;
 }
 
-.button-permission-btn:hover {
-  background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%);
-  transform: translateY(-1px);
-  box-shadow: 0 4px 8px rgba(245, 158, 11, 0.3);
+.operate-dropdown-btn:hover {
+  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
+  border-color: #94a3b8;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 16px rgba(71, 85, 105, 0.15);
 }
 
-.permission-btn :deep(.n-button__icon) {
-  margin-right: 6px;
+/* 图标样式优化 */
+.permission-dropdown-btn :deep(.n-button__icon),
+.operate-dropdown-btn :deep(.n-button__icon) {
+  margin-right: 4px;
+}
+
+/* 下拉菜单样式优化 */
+:deep(.n-dropdown-menu) {
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
+  border: 1px solid #e5e7eb;
+}
+
+:deep(.n-dropdown-option) {
+  padding: 10px 16px;
+  transition: all 0.2s ease;
+}
+
+:deep(.n-dropdown-option:hover) {
+  background-color: #f8fafc;
+}
+
+:deep(.n-dropdown-option .n-dropdown-option__icon) {
+  margin-right: 8px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .permission-dropdown-btn,
+  .operate-dropdown-btn {
+    min-width: 60px;
+    font-size: 12px;
+    padding: 0 8px;
+  }
+  
+  .permission-dropdown-btn span,
+  .operate-dropdown-btn span {
+    display: none;
+  }
+  
+  .permission-dropdown-btn :deep(.n-button__icon),
+  .operate-dropdown-btn :deep(.n-button__icon) {
+    margin-right: 0;
+  }
+}
+
+/* 表格整体优化 */
+:deep(.n-data-table-th) {
+  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+  font-weight: 600;
+  color: #374151;
+  border-bottom: 2px solid #e5e7eb;
+}
+
+:deep(.n-data-table-td) {
+  border-bottom: 1px solid #f3f4f6;
+  transition: background-color 0.2s ease;
+}
+
+:deep(.n-data-table-tr:hover .n-data-table-td) {
+  background-color: #f8fafc;
+}
+
+/* 角色标签样式优化 */
+:deep(.n-tag) {
+  border-radius: 6px;
+  font-weight: 500;
+  padding: 4px 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+/* 卡片样式优化 */
+.card-wrapper {
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  border: 1px solid #e5e7eb;
+  background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
+}
+
+.card-wrapper :deep(.n-card__content) {
+  padding: 20px;
 }
 </style>
diff --git a/ljwx-admin/src/views/manage/user/modules/user-page-table.vue b/ljwx-admin/src/views/manage/user/modules/user-page-table.vue
index 90bc0bf..1d8aba6 100644
--- a/ljwx-admin/src/views/manage/user/modules/user-page-table.vue
+++ b/ljwx-admin/src/views/manage/user/modules/user-page-table.vue
@@ -1,5 +1,5 @@
 <script setup lang="tsx">
-import { NButton, NCard, NDataTable, NIcon, NModal, NP, NSpin, NTag, NText, NUpload, NUploadDragger, useModal } from 'naive-ui';
+import { NButton, NCard, NDataTable, NIcon, NModal, NP, NSpin, NTag, NText, NUpload, NUploadDragger, useModal, NDropdown, NSpace, NDivider, NPopconfirm } from 'naive-ui';
 import { computed, h, reactive, ref, watch } from 'vue';
 import SvgIcon from '@/components/custom/svg-icon.vue';
 import {
@@ -65,33 +65,74 @@ const getApiFn = (mode: Api.SystemManage.ViewMode) => {
 };
 type ButtonDropdownKey = 'delete' | 'resetPassword' | 'userResponsibilities';
 
-// 根据视图模式和用户类型动态生成操作选项
-const getOperationOptions = (user: Api.SystemManage.User) => {
-  const baseOptions: CommonType.ButtonDropdown<ButtonDropdownKey, Api.SystemManage.User>[] = [
-    {
-      key: 'delete',
-      label: $t('common.delete'),
-      show: hasAuth('sys:user:delete') && (!user.isAdmin || hasAuth('sys:user:manage:admin')),
-      handler: (_key, row) => handleDelete(row.id)
-    },
-    {
-      key: 'resetPassword',
-      label: $t('page.manage.user.resetPwd'),
-      show: hasAuth('sys:user:resetPassword'),
-      handler: (_key, row) => handleResetPassword(row.id)
-    },
-    {
-      key: 'userResponsibilities',
-      show: hasAuth('sys:user:responsibilities'),
-      label: $t('page.manage.user.responsibilities'),
-      handler: (_key, row) => handleResponsibilities(row.id)
+// 管理操作下拉菜单选项
+function getManageMenuOptions(row: Api.SystemManage.User) {
+  if (!row || !row.id) {
+    console.warn('用户行数据无效:', row);
+    return [];
+  }
+  
+  const options: any[] = [];
+  
+  try {
+    // 编辑操作
+    if (hasAuth('sys:user:update') && (!row.isAdmin || hasAuth('sys:user:manage:admin'))) {
+      options.push({
+        label: '编辑',
+        key: 'edit',
+        icon: renderIcon('material-symbols:edit')
+      });
     }
-  ];
+    
+    if (hasAuth('sys:user:resetPassword')) {
+      options.push({
+        label: '重置密码',
+        key: 'resetPassword',
+        icon: renderIcon('material-symbols:lock-reset')
+      });
+    }
+    
+    if (hasAuth('sys:user:responsibilities')) {
+      options.push({
+        label: '权责设置',
+        key: 'responsibilities',
+        icon: renderIcon('material-symbols:admin-panel-settings')
+      });
+    }
+    
+    // 添加分隔线（如果有删除权限）
+    if (hasAuth('sys:user:delete') && (!row.isAdmin || hasAuth('sys:user:manage:admin')) && options.length > 0) {
+      options.push({
+        type: 'divider',
+        key: 'divider'
+      });
+    }
+    
+    // 删除操作
+    if (hasAuth('sys:user:delete') && (!row.isAdmin || hasAuth('sys:user:manage:admin'))) {
+      options.push({
+        label: '删除',
+        key: 'delete',
+        icon: renderIcon('material-symbols:delete')
+      });
+    }
+    
+    console.log('生成的管理选项:', options, '用户:', row.userName);
+  } catch (error) {
+    console.error('生成管理菜单选项时出错:', error);
+  }
+  
+  return options;
+}
 
-  return baseOptions;
-};
+// 图标渲染辅助函数
+function renderIcon(icon: string) {
+  return () => h(SvgIcon, { icon, class: 'text-16px' });
+}
 
-const { renderDropdown } = useButtonAuthDropdown(getOperationOptions({} as Api.SystemManage.User));
+// 移除危险操作下拉菜单选项（已整合到管理菜单中）
+
+// 移除旧的下拉菜单逻辑
 
 // API参数
 const apiParams = reactive({
@@ -225,26 +266,78 @@ const getDynamicColumns = (mode: Api.SystemManage.ViewMode) => {
       align: 'center',
       fixed: 'right',
       width: 200,
-      render: (row: Api.SystemManage.User) => (
-        <div class="flex-center gap-8px">
-          {hasAuth('sys:user:update') && (!row.isAdmin || hasAuth('sys:user:manage:admin')) && (
-            <NButton type="primary" quaternary size="small" onClick={() => edit(row.id)}>
-              {$t('common.edit')}
-            </NButton>
-          )}
-          <NButton
-            type="success"
-            secondary
-            size="small"
-            class="permission-btn health-permission-btn"
-            onClick={() => handleDeviceSubmitted(row.deviceSn)}
-            renderIcon={() => <SvgIcon icon="material-symbols:health-and-safety" class="text-14px" />}
-          >
-            {$t('route.health_profile')}
-          </NButton>
-          <div class="operation-more-btn">{renderDropdown(row)}</div>
-        </div>
-      )
+      render: (row: Api.SystemManage.User) => {
+        try {
+          if (!row) {
+            console.warn('用户行数据为空');
+            return h('div', '数据错误');
+          }
+          
+          const manageOptions = getManageMenuOptions(row);
+          
+          return h(NSpace, { 
+            size: 'small', 
+            justify: 'center', 
+            wrap: false 
+          }, {
+            default: () => [
+              // 健康档案按钮
+              h(NButton, {
+                type: 'success',
+                size: 'small',
+                class: 'user-action-btn health-btn',
+                onClick: () => handleDeviceSubmitted(row.deviceSn || ''),
+                renderIcon: () => h(SvgIcon, { icon: 'material-symbols:health-and-safety', class: 'text-14px' })
+              }, {
+                default: () => '健康档案'
+              }),
+              
+              // 管理操作下拉菜单（包含编辑、重置密码、权责设置、删除）
+              manageOptions.length > 0 ? h(NDropdown, {
+                trigger: 'click',
+                options: manageOptions,
+                size: 'small',
+                placement: 'bottom-start',
+                showArrow: false,
+                onSelect: (key: string) => {
+                  console.log('下拉菜单选择:', key, '用户ID:', row.id);
+                  switch (key) {
+                    case 'edit':
+                      edit(row.id);
+                      break;
+                    case 'resetPassword':
+                      handleResetPassword(row.id);
+                      break;
+                    case 'responsibilities':
+                      handleResponsibilities(row.id);
+                      break;
+                    case 'delete':
+                      handleDelete(row.id);
+                      break;
+                    default:
+                      console.warn('未知的菜单选项:', key);
+                  }
+                }
+              }, {
+                default: () => h(NButton, {
+                  type: 'primary',
+                  size: 'small',
+                  class: 'user-action-btn manage-btn',
+                  renderIcon: () => h(SvgIcon, { icon: 'material-symbols:settings', class: 'text-14px' })
+                }, {
+                  default: () => [
+                    '管理',
+                    h(SvgIcon, { icon: 'material-symbols:arrow-drop-down', class: 'text-12px ml-4px' })
+                  ]
+                })
+              }) : null
+            ].filter(Boolean)
+          });
+        } catch (error) {
+          console.error('渲染操作列时出错:', error);
+          return h('div', '渲染错误');
+        }
+      }
     }
   );
 
@@ -719,88 +812,183 @@ watch(viewMode, () => {
   gap: 8px;
 }
 
-/* 企业级权限按钮样式 */
-:deep(.permission-btn) {
-  border-radius: 6px;
+/* 用户操作按钮通用样式 */
+.user-action-btn {
+  border-radius: 8px;
   font-weight: 500;
-  transition: all 0.3s ease;
-  min-width: 100px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  min-width: 68px;
+  height: 28px;
+  font-size: 12px;
 }
 
-:deep(.health-permission-btn) {
+.user-action-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+}
+
+/* 移除已不使用的编辑和危险操作按钮样式 */
+
+/* 健康档案按钮样式 */
+.health-btn {
   background: linear-gradient(135deg, #10b981 0%, #059669 100%);
   border: 1px solid #10b981;
   color: white;
 }
 
-:deep(.health-permission-btn:hover) {
+.health-btn:hover {
   background: linear-gradient(135deg, #059669 0%, #047857 100%);
-  transform: translateY(-1px);
-  box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
+  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
 }
 
-:deep(.permission-btn .n-button__icon) {
-  margin-right: 6px;
-}
-
-.operation-more-btn {
-  display: inline-flex;
-  align-items: center;
-}
-
-/* 更多按钮下拉菜单美化 */
-:deep(.operation-more-btn .n-dropdown-trigger) {
-  background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
-  border: none;
+/* 管理按钮样式（调整为蓝色系） */
+.manage-btn {
+  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+  border: 1px solid #3b82f6;
   color: white;
-  font-weight: 500;
-  transition: all 0.3s ease;
-  box-shadow: 0 2px 4px rgba(229, 62, 62, 0.3);
-  border-radius: 4px;
-  padding: 4px 12px;
-  height: 28px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
 }
 
-:deep(.operation-more-btn .n-dropdown-trigger:hover) {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 8px rgba(229, 62, 62, 0.4);
-  background: linear-gradient(135deg, #c53030 0%, #9c2626 100%);
+.manage-btn:hover {
+  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
+  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
 }
 
-/* 下拉菜单项美化 */
-:deep(.n-dropdown-menu .n-dropdown-option) {
+/* 移除危险操作按钮样式（已不使用） */
+
+/* 按钮图标样式 */
+.user-action-btn :deep(.n-button__icon) {
+  margin-right: 4px;
+}
+
+/* 下拉菜单样式优化 */
+:deep(.n-dropdown-menu) {
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
+  border: 1px solid #e5e7eb;
+  min-width: 140px;
+}
+
+:deep(.n-dropdown-option) {
+  padding: 12px 16px;
   transition: all 0.2s ease;
+  border-radius: 0;
 }
 
-:deep(.n-dropdown-menu .n-dropdown-option:hover) {
-  background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
-  transform: translateX(2px);
+:deep(.n-dropdown-option:hover) {
+  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+  transform: translateX(4px);
 }
 
-/* 操作列宽度调整 */
+:deep(.n-dropdown-option .n-dropdown-option__icon) {
+  margin-right: 8px;
+}
+
+/* 表格整体优化 */
+:deep(.n-data-table-th) {
+  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+  font-weight: 600;
+  color: #374151;
+  border-bottom: 2px solid #e5e7eb;
+}
+
+:deep(.n-data-table-td) {
+  border-bottom: 1px solid #f3f4f6;
+  transition: background-color 0.2s ease;
+}
+
+:deep(.n-data-table-tr:hover .n-data-table-td) {
+  background-color: #f8fafc;
+}
+
+/* 用户类型标签样式优化 */
+:deep(.n-tag) {
+  border-radius: 6px;
+  font-weight: 500;
+  padding: 4px 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+/* 卡片样式优化 */
+.card-wrapper {
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  border: 1px solid #e5e7eb;
+  background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
+}
+
+.card-wrapper :deep(.n-card__content) {
+  padding: 20px;
+}
+
+/* 视图模式选择器美化 */
+.view-mode-selector {
+  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+  border-radius: 12px;
+  padding: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  border: 1px solid #e5e7eb;
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  .user-action-btn {
+    min-width: 60px;
+    padding: 0 8px;
+  }
+  
+  .user-action-btn span {
+    display: none;
+  }
+  
+  .user-action-btn :deep(.n-button__icon) {
+    margin-right: 0;
+  }
+}
+
+@media (max-width: 768px) {
+  .user-action-btn {
+    min-width: 32px;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border-radius: 50%;
+  }
+  
+  .manage-btn .n-button__content span:last-child {
+    display: none;
+  }
+}
+
+/* 操作列固定优化 */
 :deep(.n-data-table-td:last-child) {
   padding: 8px 12px;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(8px);
 }
 
-/* 按钮容器间距优化 */
-.flex-center > * + * {
-  margin-left: 6px;
+/* 批量选择优化 */
+:deep(.n-data-table-th:first-child),
+:deep(.n-data-table-td:first-child) {
+  background: rgba(248, 250, 252, 0.95);
+  backdrop-filter: blur(8px);
 }
 
-/* 响应式优化 */
-@media (max-width: 768px) {
-  :deep(.operation-btn-edit),
-  :deep(.operation-btn-health) {
-    padding: 2px 6px;
-    font-size: 12px;
-  }
+/* 加载状态优化 */
+:deep(.n-data-table--loading) {
+  position: relative;
+}
 
-  .flex-center > * + * {
-    margin-left: 4px;
-  }
+:deep(.n-data-table--loading::after) {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(2px);
+  z-index: 1;
 }
 </style>