20260807230157

code/fms/fms-vue/src/views/module-management/index.vue

@@ -1138,7 +1138,34 @@ void permissionStore
         <main class="mm-main">
           <FmsLoadingOverlay :loading="configLoading">
             <template v-if="selectedModule">
-              <!-- 顶部栏：tabs + 开关 + 操作 -->
+              <!-- 顶部操作栏：模块级操作（保存 / 启用 / 显示菜单），独立于 tab 导航 -->
+              <div class="mm-action-bar">
+                <a-button
+                  v-if="canManage('update')"
+                  type="primary"
+                  :loading="configSaving"
+                  :disabled="configLoading || configSyncing"
+                  @click="saveAll"
+                >
+                  保存
+                </a-button>
+                <div class="mm-action-bar__switches">
+                  <label class="mm-switch"><span>启用</span><a-switch
+                    :checked="drafts.module?.b_canuse === 1"
+                    :disabled="busy"
+                    @update:checked="(v) => onSetField('b_canuse', v ? 1 : 0)"
+                  /></label>
+                  <template v-if="drafts.module?.b_module_type !== 'data'">
+                    <label class="mm-switch"><span>显示菜单</span><a-switch
+                      :checked="drafts.module?.b_canmenu === 1"
+                      :disabled="busy || ['data', 'data_category'].includes(drafts.module?.b_module_type)"
+                      @update:checked="(v) => onSetField('b_canmenu', v ? 1 : 0)"
+                    /></label>
+                  </template>
+                </div>
+              </div>
+
+              <!-- 顶部栏：tab 导航 -->
               <div class="mm-tab-bar">
                 <nav class="mm-tab-nav">
                   <button
@@ -1152,29 +1179,6 @@ void permissionStore
                     {{ tab.tab }}
                   </button>
                 </nav>
-                <div class="mm-tab-bar__right">
-                  <label class="mm-switch"><span>启用</span><a-checkbox
-                    :checked="drafts.module?.b_canuse === 1"
-                    :disabled="busy"
-                    @update:checked="(v) => onSetField('b_canuse', v ? 1 : 0)"
-                  /></label>
-                  <template v-if="drafts.module?.b_module_type !== 'data'">
-                    <label class="mm-switch"><span>显示菜单</span><a-checkbox
-                      :checked="drafts.module?.b_canmenu === 1"
-                      :disabled="busy || ['data', 'data_category'].includes(drafts.module?.b_module_type)"
-                      @update:checked="(v) => onSetField('b_canmenu', v ? 1 : 0)"
-                    /></label>
-                  </template>
-                  <a-button
-                    v-if="canManage('update')"
-                    type="primary"
-                    :loading="configSaving"
-                    :disabled="configLoading || configSyncing"
-                    @click="saveAll"
-                  >
-                    保存
-                  </a-button>
-                </div>
               </div>
 
               <!-- 面板内容 -->
@@ -1353,20 +1357,32 @@ void permissionStore
   background: var(--fms-surface);
 }
 
-/* ---- 顶部栏：tabs + 开关 + 操作 ---- */
+/* ---- 顶部操作栏：模块级操作（启用 / 显示菜单 / 保存），独立于 tab 导航 ---- */
+.mm-action-bar {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 16px;
+  min-height: 48px;
+  padding: 0 20px;
+
+  &__switches {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    min-width: 0;
+  }
+}
+
+/* ---- 顶部栏：tab 导航 ---- */
 .mm-tab-bar {
   display: flex;
   flex: none;
   align-items: center;
   height: 44px;
   padding: 0 20px;
-
-  &__right {
-    display: flex;
-    flex: none;
-    align-items: center;
-    gap: 12px;
-  }
+  border-bottom: 1px solid #e4e4e7;
 }
 
 .mm-switch {
@@ -1383,12 +1399,19 @@ void permissionStore
   display: flex;
   flex: 1;
   min-width: 0;
+  align-self: stretch;
   align-items: center;
   gap: 2px;
+  overflow-x: auto;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 
   &__item {
     display: inline-flex;
-    height: 32px;
+    align-self: stretch;
     align-items: center;
     padding: 0 12px;
     border: 0;
@@ -1397,6 +1420,7 @@ void permissionStore
     color: #71717a;
     cursor: pointer;
     font-size: 13px;
+    position: relative;
     transition:
       background-color 0.15s ease,
       color 0.15s ease;
@@ -1407,13 +1431,24 @@ void permissionStore
     }
 
     &.active {
-      background: #f4f4f5;
-      color: #0a0a0a;
+      color: #3f3f46;
       font-weight: 500;
+      background: transparent;
+
+      &::after {
+        content: '';
+        position: absolute;
+        left: 12px;
+        right: 12px;
+        bottom: -1px;
+        height: 2px;
+        border-radius: 2px;
+        background: #3f3f46;
+      }
 
       &:hover {
-        background: #ebebeb;
-        color: #0a0a0a;
+        background: #f4f4f5;
+        color: #3f3f46;
       }
     }
   }