refactor(system): 统一系统管理页面样式和表单布局

- 移除所有页面中的硬编码 coi-empty__action-btn 样式类
- 优化角色管理页面表单布局：应用紧凑表单设计规范
- 统一弹框宽度为800px，列间距为10px，标签宽度为90px
- 添加 compact-form 样式类和相关CSS样式
- 为所有表单项添加 mb-2 间距类，确保布局一致性
- 移除重复的空状态按钮样式定义，使用 NButton 原生主题色

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) {

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;

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) {

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 {
+.compact-form :deep(.n-form-item) {
-  position: relative;
+  margin-bottom: 8px !important;
-  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 {
+.compact-form :deep(.n-form-item .n-form-item-feedback-wrapper) {
-  content: '';
+  min-height: 0 !important;
-  position: absolute;
+  padding-top: 2px !important;
-  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 {
+.compact-form :deep(.n-form-item .n-form-item-label) {
-  transform: translateY(-2px);
+  padding-bottom: 2px !important;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
 }
 
-.coi-empty__action-btn:hover::before {
+.compact-form :deep(.n-input),
-  left: 100%;
+.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>