style: optimize dark theme styles (#12944)

frontend/src/layout/components/Sidebar/components/Collapse.vue

@@ -67,8 +67,11 @@
                         </div>
                     </el-scrollbar>
                     <div v-if="showMoreNodes" class="dropdown-item more-node-button" @click.stop="openNodeDrawer">
-                        <span>{{ $t('tabs.more') }}...</span>
-                        <span class="more-node-count">{{ nodeOptions.length - defaultNodeLimit }}</span>
+                        <span class="more-node-label">{{ $t('tabs.more') }}</span>
+                        <span class="more-node-count">+{{ nodeOptions.length - defaultNodeLimit }}</span>
+                        <el-icon class="more-node-arrow">
+                            <ArrowRight />
+                        </el-icon>
                     </div>
                 </div>
                 <el-divider class="divider" />
@@ -381,23 +384,33 @@ onMounted(() => {
     white-space: nowrap;
 }
 .more-node-button {
-    padding-left: 34px;
+    margin: 4px 8px 0;
+    padding: 5px 8px 5px 26px;
+    border-radius: 4px;
     color: var(--el-color-primary);
+    font-size: 12px;
+    line-height: 24px;
+}
+.more-node-label {
+    flex: 1;
+    min-width: 0;
 }
 .more-node-count {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-width: 20px;
+    min-width: 24px;
     height: 18px;
-    padding: 0 6px;
+    padding: 0 7px;
     border-radius: 9px;
     color: var(--el-color-primary);
-    background: var(--el-color-primary-light-9);
     line-height: 18px;
+    font-size: 12px;
+    font-weight: 500;
 }
-.dropdown-item:hover {
-    background: var(--el-menu-item-bg-color-active);
+.more-node-arrow {
+    margin-left: 2px;
+    font-size: 12px;
 }
 .ellipsis-text {
     display: inline-block;

frontend/src/layout/components/Sidebar/components/node-drawer/index.vue

@@ -219,6 +219,7 @@ watch(
 .node-grid {
     display: grid;
     grid-template-columns: 1fr;
+    align-content: start;
     gap: 8px;
     flex: 1;
     min-height: 0;

frontend/src/styles/element-dark.scss

@@ -290,8 +290,11 @@ html.dark {
         background: var(--panel-main-bg-color-9);
     }
 
-    .el-button--primary.is-link.is-disabled {
-        color: var(--panel-main-bg-color-8);
+    .el-button--primary.is-link.is-disabled,
+    .el-button--primary.is-link.is-disabled:hover,
+    .el-button--primary.is-link.is-disabled:focus,
+    .el-button--primary.is-link.is-disabled:active {
+        color: var(--panel-main-bg-color-6);
     }
 
     .el-dropdown-menu__item:hover {

frontend/src/styles/fu.scss

@@ -34,15 +34,6 @@
     white-space: nowrap;
 }
 
-html.dark .fu-table-operations {
-    --fu-table-operations-disabled-color: var(--panel-main-bg-color-4);
-}
-
-.fu-table-operations__button.is-link.is-disabled,
-.fu-table-operations__button.is-link.is-disabled:hover {
-    color: var(--fu-table-operations-disabled-color);
-}
-
 .fu-table-more-button {
     display: inline-flex;
 }

frontend/src/views/login/components/login-form.vue

@@ -663,15 +663,7 @@ const getSetting = async () => {
     } catch (error) {}
 };
 
-onMounted(() => {
-    isOnRestart.value = false;
-    passkeySupported.value = !!window.PublicKeyCredential && window.isSecureContext;
-    getSetting();
-    getXpackSettingForTheme();
-    if (!ignoreCaptcha.value) {
-        loginVerify();
-    }
-    document.title = themeConfig.value.panelName;
+const applyLoginButtonTheme = () => {
     loginBtnLinkColor.value = themeConfig.value.loginBtnLinkColor || '#005eeb';
     document.documentElement.style.setProperty('--login-btn-link-color', loginBtnLinkColor.value);
     document.documentElement.style.setProperty(
@@ -682,6 +674,23 @@ onMounted(() => {
         '--login-loading-mask-color',
         adjustColorToRGBA(loginBtnLinkColor.value, 30, 15),
     );
+};
+
+onMounted(async () => {
+    isOnRestart.value = false;
+    passkeySupported.value = !!window.PublicKeyCredential && window.isSecureContext;
+    applyLoginButtonTheme();
+    await getSetting();
+    try {
+        await getXpackSettingForTheme();
+    } catch (error) {
+        // 即使获取失败也不影响登录，默认为之前的主题配置
+    }
+    applyLoginButtonTheme();
+    if (!ignoreCaptcha.value) {
+        loginVerify();
+    }
+    document.title = themeConfig.value.panelName;
     nextTick(() => {
         userNameRef.value?.focus();
     });