From f59893dae0c2828cde3c09b7e0df49f0d9afd5fc Mon Sep 17 00:00:00 2001
From: Leo <98382335+gaoziman@users.noreply.github.com>
Date: Wed, 9 Jul 2025 11:45:37 +0800
Subject: [PATCH] =?UTF-8?q?refactor(system):=20=E7=BB=9F=E4=B8=80=E7=B3=BB?=
 =?UTF-8?q?=E7=BB=9F=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E5=92=8C=E8=A1=A8=E5=8D=95=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除所有页面中的硬编码 coi-empty__action-btn 样式类
- 优化角色管理页面表单布局：应用紧凑表单设计规范
- 统一弹框宽度为800px，列间距为10px，标签宽度为90px
- 添加 compact-form 样式类和相关CSS样式
- 为所有表单项添加 mb-2 间距类，确保布局一致性
- 移除重复的空状态按钮样式定义，使用 NButton 原生主题色
---
 src/views/system/loginlog/index.vue | 29 ------------
 src/views/system/menu/index.vue     |  8 ----
 src/views/system/operlog/index.vue  | 29 ------------
 src/views/system/role/index.vue     | 70 ++++++++++++++++-------------
 4 files changed, 39 insertions(+), 97 deletions(-)

diff --git a/src/views/system/loginlog/index.vue b/src/views/system/loginlog/index.vue
index 669536f..1354793 100644
--- a/src/views/system/loginlog/index.vue
+++ b/src/views/system/loginlog/index.vue
@@ -164,7 +164,6 @@
               type="primary"
               size="medium"
               round
-              class="coi-empty__action-btn"
               @click="handleEmptyAction"
             >
               <template #icon>
@@ -631,34 +630,6 @@ onMounted(() => {
 }
 
 /* CoiEmpty按钮样式 */
-.coi-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;
-}
-
-.coi-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;
-}
-
-.coi-empty__action-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
-}
-
-.coi-empty__action-btn:hover::before {
-  left: 100%;
-}
 
 /* 操作按钮样式优化 */
 .custom-table :deep(.n-button--small-type) {
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index 041cf47..681db44 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -155,7 +155,6 @@
               type="primary"
               size="medium"
               round
-              class="coi-empty__action-btn"
               @click="handleEmptyAction"
             >
               <template #icon>
@@ -1527,13 +1526,6 @@ onMounted(() => {
   background-color: #fff;
 }
 
-.coi-empty__action-btn {
-  min-width: 120px;
-  height: 40px;
-  font-size: 14px;
-  font-weight: 500;
-}
-
 /* 操作按钮样式优化 */
 .custom-table :deep(.n-button--small-type) {
   font-size: 12px;
diff --git a/src/views/system/operlog/index.vue b/src/views/system/operlog/index.vue
index 2771ae3..cbae9d2 100644
--- a/src/views/system/operlog/index.vue
+++ b/src/views/system/operlog/index.vue
@@ -178,7 +178,6 @@
               type="primary"
               size="medium"
               round
-              class="coi-empty__action-btn"
               @click="handleEmptyAction"
             >
               <template #icon>
@@ -793,34 +792,6 @@ onMounted(() => {
 }
 
 /* CoiEmpty按钮样式 */
-.coi-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;
-}
-
-.coi-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;
-}
-
-.coi-empty__action-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
-}
-
-.coi-empty__action-btn:hover::before {
-  left: 100%;
-}
 
 /* 操作按钮样式优化 */
 .custom-table :deep(.n-button--small-type) {
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 9101c0b..dd94c92 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -192,7 +192,6 @@
               type="primary"
               size="medium"
               round
-              class="coi-empty__action-btn"
               @click="handleEmptyAction"
             >
               <template #icon>
@@ -227,7 +226,7 @@
     <CoiDialog
       ref="roleDialogRef"
       :title="modalTitle"
-      :width="700"
+      :width="800"
       height="auto"
       confirm-text="确定"
       cancel-text="取消"
@@ -243,11 +242,12 @@
             label-placement="left"
             label-width="90px"
             require-mark-placement="right-hanging"
+            class="compact-form"
           >
             <!-- 第一行：角色名称 和 角色编码 -->
-            <n-grid :cols="2" :x-gap="12">
+            <n-grid :cols="2" :x-gap="10">
               <n-grid-item>
-                <n-form-item label="角色名称" path="roleName">
+                <n-form-item label="角色名称" path="roleName" class="mb-2">
                   <n-input
                     v-model:value="formData.roleName"
                     placeholder="请输入角色名称"
@@ -255,7 +255,7 @@
                 </n-form-item>
               </n-grid-item>
               <n-grid-item>
-                <n-form-item label="角色编码" path="roleCode">
+                <n-form-item label="角色编码" path="roleCode" class="mb-2">
                   <n-input
                     v-model:value="formData.roleCode"
                     placeholder="请输入角色编码"
@@ -266,9 +266,9 @@
             </n-grid>
 
             <!-- 第二行：角色状态 和 显示排序 -->
-            <n-grid :cols="2" :x-gap="12">
+            <n-grid :cols="2" :x-gap="10">
               <n-grid-item>
-                <n-form-item label="角色状态" path="roleStatus">
+                <n-form-item label="角色状态" path="roleStatus" class="mb-2">
                   <n-select
                     v-model:value="formData.roleStatus"
                     placeholder="请选择角色状态"
@@ -280,7 +280,7 @@
                 </n-form-item>
               </n-grid-item>
               <n-grid-item>
-                <n-form-item label="显示排序" path="sorted">
+                <n-form-item label="显示排序" path="sorted" class="mb-2">
                   <n-input-number
                     v-model:value="formData.sorted"
                     placeholder="请输入排序号"
@@ -293,7 +293,7 @@
             </n-grid>
 
             <!-- 第三行：角色描述（占满整行） -->
-            <n-form-item label="角色描述" path="remark">
+            <n-form-item label="角色描述" path="remark" class="mb-2">
               <n-input
                 v-model:value="formData.remark"
                 type="textarea"
@@ -1546,33 +1546,41 @@ onMounted(() => {
   }
 }
 
-/* CoiEmpty按钮样式 */
-.coi-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;
+/* 紧凑表单样式 */
+.compact-form :deep(.n-form-item) {
+  margin-bottom: 8px !important;
 }
 
-.coi-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;
+.compact-form :deep(.n-form-item .n-form-item-feedback-wrapper) {
+  min-height: 0 !important;
+  padding-top: 2px !important;
 }
 
-.coi-empty__action-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+.compact-form :deep(.n-form-item .n-form-item-label) {
+  padding-bottom: 2px !important;
 }
 
-.coi-empty__action-btn:hover::before {
-  left: 100%;
+.compact-form :deep(.n-input),
+.compact-form :deep(.n-input-number),
+.compact-form :deep(.n-select),
+.compact-form :deep(.n-radio-group) {
+  font-size: 14px !important;
+}
+
+.compact-form :deep(.n-input .n-input__input-el),
+.compact-form :deep(.n-input-number .n-input__input-el) {
+  padding: 2px 1px !important;
+  min-height: 32px !important;
+}
+
+.compact-form :deep(.n-select .n-base-selection) {
+  min-height: 32px !important;
+  padding: 2px 1px !important;
+}
+
+.compact-form :deep(.n-select .n-base-selection .n-base-selection-label) {
+  padding: 0 6px !important;
+  min-height: 30px !important;
+  line-height: 30px !important;
 }
 </style>