From 1789e26611198e28af9aa87be20af924a7525f13 Mon Sep 17 00:00:00 2001
From: Leo <98382335+gaoziman@users.noreply.github.com>
Date: Mon, 7 Jul 2025 14:26:19 +0800
Subject: [PATCH] =?UTF-8?q?feat(role):=20=E4=BC=98=E5=8C=96=E8=A7=92?=
 =?UTF-8?q?=E8=89=B2=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2UI=E4=BA=A4?=
 =?UTF-8?q?=E4=BA=92=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 优化操作按钮样式，采用圆形按钮设计提升视觉效果
- 角色编码和排序字段改用主题色标签，保持界面一致性
- 新增NovaEmpty空状态组件，提供更好的无数据提示
- 完善按钮tooltip提示，增强用户操作引导
- 统一表格操作列宽度，优化布局紧凑性
- 移除用户类型标签的圆角，保持设计风格统一

优化要点：
- 操作按钮使用渐变色和悬停动效
- 标签颜色与主题紫色保持一致
- 空状态页面提供智能操作建议
---
 docker-compose.product.yml      |   8 -
 src/views/system/role/index.vue | 255 +++++++++++++++++++++++++++++---
 2 files changed, 235 insertions(+), 28 deletions(-)
 delete mode 100644 docker-compose.product.yml

diff --git a/docker-compose.product.yml b/docker-compose.product.yml
deleted file mode 100644
index d48a8bc..0000000
--- a/docker-compose.product.yml
+++ /dev/null
@@ -1,8 +0,0 @@
-services:
-  nova-admin:
-    build:
-      context: .
-      dockerfile: ./docker/dockerfile.product
-    container_name: nova-admin
-    ports:
-      - 80:80
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 2b59f19..e41405c 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -131,7 +131,9 @@
 
       <!-- 表格内容 -->
       <div class="table-wrapper flex-1 overflow-auto pt-4">
+        <!-- 数据表格 -->
         <n-data-table
+          v-if="tableData.length > 0 || loading"
           :columns="columns"
           :data="tableData"
           :loading="loading"
@@ -142,10 +144,40 @@
           class="custom-table"
           @update:checked-row-keys="handleRowSelectionChange"
         />
+
+        <!-- 空状态 -->
+        <NovaEmpty
+          v-else
+          :type="getEmptyType()"
+          :title="getEmptyTitle()"
+          :description="getEmptyDescription()"
+          :show-action="true"
+          :action-text="getEmptyActionText()"
+          size="medium"
+          @action="handleEmptyAction"
+        >
+          <template #action>
+            <NButton
+              type="primary"
+              size="medium"
+              round
+              class="nova-empty__action-btn"
+              @click="handleEmptyAction"
+            >
+              <template #icon>
+                <NIcon>
+                  <icon-park-outline:refresh v-if="hasSearchConditions()" />
+                  <icon-park-outline:plus v-else />
+                </NIcon>
+              </template>
+              {{ getEmptyActionText() }}
+            </NButton>
+          </template>
+        </NovaEmpty>
       </div>
 
       <!-- 分页器 -->
-      <div class="flex items-center px-4 py-2 border-t border-gray-100">
+      <div v-if="tableData.length > 0" class="flex items-center px-4 py-2 border-t border-gray-100">
         <div class="text-sm text-gray-500 mr-4">
           共 {{ pagination.itemCount }} 条
         </div>
@@ -337,8 +369,12 @@
 <script setup lang="ts">
 import { h, nextTick, onMounted, ref, watch } from 'vue'
 import type { DataTableColumns, FormInst } from 'naive-ui'
-import { NButton, NIcon, NPopconfirm, NSpace, NSwitch, NTag, NTree } from 'naive-ui'
+import { NButton, NIcon, NPopconfirm, NSpace, NSwitch, NTag, NTooltip, NTree } from 'naive-ui'
+import IconParkOutlineEditOne from '~icons/icon-park-outline/edit-one'
+import IconParkOutlineDelete from '~icons/icon-park-outline/delete'
+import IconParkOutlineShield from '~icons/icon-park-outline/shield'
 import NovaDialog from '@/components/common/NovaDialog.vue'
+import NovaEmpty from '@/components/common/NovaEmpty.vue'
 import {
   addRole,
   batchDeleteRoles,
@@ -459,7 +495,7 @@ const columns: DataTableColumns<RoleVo> = [
     width: 150,
     align: 'center',
     render: (row) => {
-      return h('code', { class: 'bg-gray-100 px-2 py-1 rounded text-sm text-blue-600' }, row.roleCode)
+      return h(NTag, { type: 'primary', size: 'small' }, { default: () => row.roleCode })
     },
   },
   {
@@ -502,7 +538,7 @@ const columns: DataTableColumns<RoleVo> = [
     width: 80,
     align: 'center',
     render: (row) => {
-      return h(NTag, { type: 'info', size: 'small' }, { default: () => row.sorted || '-' })
+      return h(NTag, { type: 'primary', size: 'small' }, { default: () => row.sorted || '-' })
     },
   },
   {
@@ -517,7 +553,7 @@ const columns: DataTableColumns<RoleVo> = [
   {
     title: '操作',
     key: 'actions',
-    width: 280,
+    width: 160,
     align: 'center',
     fixed: 'right',
     render: (row) => {
@@ -525,13 +561,19 @@ const columns: DataTableColumns<RoleVo> = [
 
       // 编辑按钮
       if (hasButton(PERMISSIONS.ROLE.UPDATE)) {
-        buttons.push(h(NButton, {
-          type: 'primary',
-          size: 'small',
-          onClick: () => handleEdit(row),
+        buttons.push(h(NTooltip, {
+          trigger: 'hover',
         }, {
-          icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, { default: () => h('icon-park-outline:edit') }),
           default: () => '编辑',
+          trigger: () => h(NButton, {
+            type: 'primary',
+            size: 'medium',
+            circle: true,
+            class: 'action-btn action-btn-edit',
+            onClick: () => handleEdit(row),
+          }, {
+            icon: () => h(NIcon, { size: 18 }, { default: () => h(IconParkOutlineEditOne) }),
+          }),
         }))
       }
 
@@ -543,26 +585,38 @@ const columns: DataTableColumns<RoleVo> = [
           positiveText: '确定',
         }, {
           default: () => row.roleId === 1 ? '超级管理员角色不可删除' : '确定删除此角色吗？',
-          trigger: () => h(NButton, {
-            type: 'error',
-            size: 'small',
-            disabled: row.roleId === 1,
+          trigger: () => h(NTooltip, {
+            trigger: 'hover',
           }, {
-            icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, { default: () => h('icon-park-outline:delete') }),
             default: () => '删除',
+            trigger: () => h(NButton, {
+              type: 'error',
+              size: 'medium',
+              circle: true,
+              class: 'action-btn action-btn-delete',
+              disabled: row.roleId === 1,
+            }, {
+              icon: () => h(NIcon, { size: 18 }, { default: () => h(IconParkOutlineDelete) }),
+            }),
           }),
         }))
       }
 
       // 分配权限按钮 - 超级管理员不显示
       if (hasButton(PERMISSIONS.ROLE.MENU) && row.roleId !== 1) {
-        buttons.push(h(NButton, {
-          type: 'warning',
-          size: 'small',
-          onClick: () => handleAssignMenu(row),
+        buttons.push(h(NTooltip, {
+          trigger: 'hover',
         }, {
-          icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, { default: () => h('icon-park-outline:setting') }),
           default: () => '分配权限',
+          trigger: () => h(NButton, {
+            type: 'warning',
+            size: 'medium',
+            circle: true,
+            class: 'action-btn action-btn-warning',
+            onClick: () => handleAssignMenu(row),
+          }, {
+            icon: () => h(NIcon, { size: 18 }, { default: () => h(IconParkOutlineShield) }),
+          }),
         }))
       }
 
@@ -1102,6 +1156,61 @@ async function handleSubmit() {
 function handleCancel() {
   roleDialogRef.value?.novaClose()
 }
+
+// 判断是否有搜索条件
+function hasSearchConditions() {
+  return Object.values(searchForm.value).some((value) => {
+    if (value === null || value === undefined || value === '') {
+      return false
+    }
+    if (Array.isArray(value) && value.length === 0) {
+      return false
+    }
+    return true
+  })
+}
+
+// 获取空状态类型
+function getEmptyType() {
+  if (hasSearchConditions()) {
+    return 'search'
+  }
+  return 'default'
+}
+
+// 获取空状态标题
+function getEmptyTitle() {
+  if (hasSearchConditions()) {
+    return '搜索无结果'
+  }
+  return '暂无角色数据'
+}
+
+// 获取空状态描述
+function getEmptyDescription() {
+  if (hasSearchConditions()) {
+    return '未找到符合搜索条件的角色，请尝试调整搜索条件或重置筛选'
+  }
+  return '当前还没有角色数据，点击"新增"按钮创建第一个角色'
+}
+
+// 获取空状态操作文字
+function getEmptyActionText() {
+  if (hasSearchConditions()) {
+    return '重置筛选'
+  }
+  return '新增角色'
+}
+
+// 处理空状态操作
+function handleEmptyAction() {
+  if (hasSearchConditions()) {
+    handleReset()
+  }
+  else {
+    handleAdd()
+  }
+}
 // 监听选中状态变化，自动更新全选按钮状态
 watch(checkedKeys, (newKeys) => {
   const allKeys = getAllMenuKeys(menuData.value)
@@ -1302,4 +1411,110 @@ onMounted(() => {
     width: 900px !important;
   }
 }
+
+/* NovaEmpty按钮样式 */
+.nova-empty__action-btn {
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+  border: none;
+}
+
+.nova-empty__action-btn::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+  transition: left 0.6s ease;
+}
+
+.nova-empty__action-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+}
+
+.nova-empty__action-btn:hover::before {
+  left: 100%;
+}
+
+/* 操作按钮样式 */
+.action-btn {
+  width: 36px !important;
+  height: 36px !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  border-radius: 50% !important;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
+  border: none !important;
+  position: relative !important;
+  overflow: hidden !important;
+}
+
+.action-btn:hover {
+  transform: translateY(-2px) !important;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
+}
+
+.action-btn:active {
+  transform: translateY(0) !important;
+  transition: all 0.1s !important;
+}
+
+/* 编辑按钮 */
+.action-btn-edit {
+  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
+  color: white !important;
+}
+
+.action-btn-edit:hover {
+  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%) !important;
+  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4) !important;
+}
+
+/* 删除按钮 */
+.action-btn-delete {
+  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
+  color: white !important;
+}
+
+.action-btn-delete:hover {
+  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
+  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4) !important;
+}
+
+/* 警告按钮 */
+.action-btn-warning {
+  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
+  color: white !important;
+}
+
+.action-btn-warning:hover {
+  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
+  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4) !important;
+}
+
+/* 图标居中对齐 */
+.action-btn .n-icon {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  margin: 0 !important;
+}
+
+/* 移除默认边框和背景 */
+.action-btn.n-button {
+  border: none !important;
+}
+
+.action-btn.n-button:focus {
+  outline: none !important;
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
+}
 </style>