From a179c8e69b822a790b28c1fd023966acf6877bda Mon Sep 17 00:00:00 2001
From: ShineKOT <1917095344@qq.com>
Date: Wed, 9 Apr 2025 10:15:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=20=E6=9B=B4=E6=96=B0=E6=9C=80=E5=B0=8F?=
 =?UTF-8?q?=E5=8C=96=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/theme/studio-dark/app.scss            | 352 +++++++++++-------
 1 file changed, 208 insertions(+), 144 deletions(-)

diff --git a/packages/studio-theme/src/theme/studio-dark/app.scss b/packages/studio-theme/src/theme/studio-dark/app.scss
index 0feddf85..8ac4a9c5 100644
--- a/packages/studio-theme/src/theme/studio-dark/app.scss
+++ b/packages/studio-theme/src/theme/studio-dark/app.scss
@@ -1,164 +1,228 @@
 /* stylelint-disable selector-class-pattern */
 :root.studio_dark {
-    // 应用标题
-    @include b(panel-app-title) {
-        #{getCssVarName('panel-app-title', 'font-size')}: getCssVar(font-size, header, 6);
+  // 应用标题
+  @include b(panel-app-title) {
+    #{getCssVarName('panel-app-title', 'font-size')}: getCssVar(
+      font-size,
+      header,
+      6
+    );
+  }
+
+  // 应用头部
+  @include b(panel-app-header) {
+    #{getCssVarName(panel-app-header, color)}: rgba(204 204 204 / 60%);
+    #{getCssVarName(panel-app-header, bg-color)}: getCssVar(color, bg, 3);
+    #{getCssVarName(panel-app-header, hover-bg-color)}: getCssVar(
+      color,
+      primary,
+      hover
+    );
+    #{getCssVarName(panel-app-header, select-bg-color)}: getCssVar(
+      color,
+      primary,
+      active
+    );
+    #{getCssVarName(panel-app-header, horizontal-color)}: rgba(
+      204 204 204 / 60%
+    );
+    #{getCssVarName(panel-app-header, horizontal-bg-color)}: getCssVar(
+      color,
+      bg,
+      3
+    );
+    #{getCssVarName(panel-app-header, horizontal-hover-bg-color)}: getCssVar(
+      color,
+      primary,
+      hover
+    );
+    #{getCssVarName(panel-app-header, horizontal-select-bg-color)}: getCssVar(
+      color,
+      primary,
+      active
+    );
+    #{getCssVarName(panel-app-header, border-color)}: getCssVar(color, border);
+  }
+
+  // 视图头部
+  @include b(panel-view-header) {
+    height: 40px;
+  }
+  @include b(panel-exp-header) {
+    height: 40px;
+  }
+  @include b(exp-bar-caption) {
+    font-size: getCssVar(font-size, header, 6);
+  }
+
+  // 导航栏
+  @include b(nav-tabs) {
+    #{getCssVarName(nav-tabs, padding)}: getCssVar(spacing, none);
+    #{getCssVarName(nav-tabs, item-height)}: 35px;
+    #{getCssVarName(nav-tabs-item, bg-color)}: getCssVar(color, bg, 2);
+    #{getCssVarName(nav-tabs-item, color)}: getCssVar(color, text, 0);
+    #{getCssVarName(nav-tabs-item, hover-color)}: getCssVar(color, text, 0);
+    #{getCssVarName(nav-tabs-item, active-color)}: getCssVar(color, bg, 0);
+    #{getCssVarName(nav-tabs-item, margin)}: getCssVar(spacing, none);
+    #{getCssVarName(nav-tabs-item, border)}: none;
+
+    @include e(left) {
+      background-color: getCssVar(color, bg, 1);
     }
-
-    // 应用头部
-    @include b(panel-app-header) {
-        #{getCssVarName(panel-app-header, color)}:rgba(204 204 204 / 60%);
-        #{getCssVarName(panel-app-header, bg-color)}:getCssVar(color, bg, 3);
-        #{getCssVarName(panel-app-header, hover-bg-color)}:getCssVar(color, primary, hover);
-        #{getCssVarName(panel-app-header, select-bg-color)}:getCssVar(color, primary, active);
-        #{getCssVarName(panel-app-header, horizontal-color)}:rgba(204 204 204 / 60%);
-        #{getCssVarName(panel-app-header, horizontal-bg-color)}:getCssVar(color, bg, 3);
-        #{getCssVarName(panel-app-header, horizontal-hover-bg-color)}:getCssVar(color, primary, hover);
-        #{getCssVarName(panel-app-header, horizontal-select-bg-color)}: getCssVar(color, primary, active);
-        #{getCssVarName(panel-app-header, border-color)}:getCssVar(color, border);
-    }
-
-    // 视图头部
-    @include b(panel-view-header) {
-        height: 40px;
+    @include e(right) {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: getCssVar('nav-tabs-item', 'height');
+      background-color: getCssVar(color, bg, 1);
+
+      .el-button ion-icon {
+        font-size: getCssVar(width-icon, medium);
+      }
     }
-    @include b(panel-exp-header) {
-        height: 40px;
-    }
-    @include b(exp-bar-caption) {
-        font-size: getCssVar(font-size, header, 6);
+  }
+
+  // 用户姓名
+  @include b(user-info) {
+    #{getCssVarName(user-info, font-size)}: getCssVar(font-size, regular);
+    #{getCssVarName(user-info, height)}: 36px;
+  }
+
+  // 首页导航栏
+  @include b(nav-pos-index) {
+    padding: 0;
+  }
+
+  // 表单锚点
+  @include b(anchor-bar-list) {
+    #{getCssVarName(anchor-bar, hover-color)}: getCssVar(
+      color,
+      primary,
+      hover,
+      text
+    );
+    #{getCssVarName(anchor-bar, select-color)}: getCssVar(
+      color,
+      primary,
+      active,
+      text
+    );
+    #{getCssVarName(anchor-bar, select-bar-color)}: getCssVar(
+      color,
+      primary,
+      light,
+      default
+    );
+  }
+
+  @include b(action-toolbar) {
+    #{getCssVarName(action-toolbar, item-margin)}: 0;
+    #{getCssVarName(action-toolbar, item-padding)}: getCssVar(
+        'spacing',
+        'extra-tight'
+      )
+      getCssVar('spacing', 'tight');
+  }
+
+  @include b(drawer) {
+    .#{bem(view)} {
+      #{getCssVarName(view, bg, color)}: transparent;
     }
 
-    // 导航栏
-    @include b(nav-tabs) {
-        #{getCssVarName(nav-tabs, padding)}: getCssVar(spacing, none);
-        #{getCssVarName(nav-tabs, item-height)}: 35px;
-        #{getCssVarName(nav-tabs-item, bg-color)}: getCssVar(color, bg, 2);
-        #{getCssVarName(nav-tabs-item, color)}: getCssVar(color, text, 0);
-        #{getCssVarName(nav-tabs-item, hover-color)}: getCssVar(color, text, 0);
-        #{getCssVarName(nav-tabs-item, active-color)}: getCssVar(color, bg, 0);
-        #{getCssVarName(nav-tabs-item, margin)}: getCssVar(spacing, none);
-        #{getCssVarName(nav-tabs-item, border)}: none;
-
-        @include e(left) {
-            background-color: getCssVar(color, bg, 1);
-        }
-        @include e(right) {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            height: getCssVar('nav-tabs-item', 'height');
-            background-color: getCssVar(color, bg, 1);
-
-            .el-button ion-icon {
-                font-size: getCssVar(width-icon, medium);
-            }
-        }
+    .el-drawer__header {
+      .el-drawer__close-btn {
+        top: 8px;
+      }
     }
+  }
 
-    // 用户姓名
-    @include b(user-info) {
-        #{getCssVarName(user-info, font-size)}: getCssVar(font-size, regular);
-        #{getCssVarName(user-info, height)}: 36px;
-    }
+  .#{bem(grid-edit-item, tooltip-popper)} {
+    color: var(--ibiz-color-primary-text);
+    background-color: getCssVar(color, bg, 1);
+  }
 
-    // 首页导航栏
-    @include b(nav-pos-index) {
-        padding: 0;
-    }
+  @include b(popover) {
+    background-color: getCssVar(color, bg, 1);
 
-    // 表单锚点
-    @include b(anchor-bar-list) {
-        #{getCssVarName(anchor-bar, hover-color)}: getCssVar(color, primary, hover, text);
-        #{getCssVarName(anchor-bar, select-color)}: getCssVar(color, primary, active, text);
-        #{getCssVarName(anchor-bar, select-bar-color)}: getCssVar(color, primary, light, default);
+    .el-button--primary {
+      --el-button-bg-color: #{getCssVar(color, primary, hover)};
     }
-
-    @include b(action-toolbar) {
-        #{getCssVarName(action-toolbar, item-margin)}: 0;
-        #{getCssVarName(action-toolbar, item-padding)}: getCssVar('spacing', 'extra-tight') getCssVar('spacing', 'tight');
+  }
+
+  // 树上下文菜单
+  .#{bem('context-menu', 'popover')} {
+    border-radius: getCssVar(border-radius, large);
+    outline: 1px solid getCssVar(color, border);
+    box-shadow: 0 2px 8px #0000005c;
+
+    .el-button {
+      position: relative;
+      width: calc(100% - var(--ibiz-spacing-tight) * 2);
+      margin: 0 getCssVar(spacing, tight);
+      border-radius: getCssVar(border-radius, large);
+      #{getCssVarName(context-menu, popover, button, padding)}: 0 26px;
+
+      --el-button-size: 26px;
+
+      &:hover {
+        color: getCssVar(color, primary, active, text);
+        background-color: getCssVar(color, primary, light, active);
+      }
     }
-
-    @include b(drawer) {
-        .#{bem(view)} {
-            #{getCssVarName(view, bg, color)}: transparent;
-        }
-
-        .el-drawer__header {
-            .el-drawer__close-btn {
-                top: 8px;
-            }
-        }
+    .#{bem(context-menu, action-content-icon)} {
+      position: absolute;
+      left: getCssVar(spacing, base);
+      font-size: getCssVar(font-size, regular);
     }
-
-    .#{bem(grid-edit-item, tooltip-popper)} {
-        color: var(--ibiz-color-primary-text);
-        background-color: getCssVar(color, bg, 1);
+    .#{bem('context-menu', 'separator')} {
+      width: 100%;
+      margin: 5px 0;
     }
+  }
+
+  @include b(x6-design-context-menu) {
+    &.mx-context-menu {
+      padding: getCssVar(spacing, tight) 0;
+      border-radius: getCssVar(border-radius, large);
+
+      .mx-context-menu-item {
+        position: relative;
+        width: calc(100% - getCssVar(spacing, tight) * 2);
+        height: 26px;
+        padding: 0 26px;
+        margin: 0 getCssVar(spacing, tight);
+        cursor: pointer;
+        border-radius: getCssVar(border-radius, large);
 
-    @include b(popover) {
-        background-color: getCssVar(color, bg, 1);
-
-        .el-button--primary {
-            --el-button-bg-color: #{getCssVar(color, primary, hover)};
+        .mx-icon-placeholder.preserve-width {
+          position: absolute;
+          left: getCssVar(spacing, base);
+          width: getCssVar(font-size, regular);
+          height: getCssVar(font-size, regular);
+          margin-right: getCssVar(spacing, extra, tight);
+          font-size: getCssVar(font-size, regular);
         }
+      }
     }
-
-    // 树上下文菜单
-    .#{bem('context-menu', 'popover')} {
-        border-radius: getCssVar(border-radius, large);
-        outline: 1px solid getCssVar(color, border);
-        box-shadow: 0 2px 8px #0000005c;
-
-        .el-button {
-            position: relative;
-            width: calc(100% - var(--ibiz-spacing-tight) * 2);
-            margin: 0 getCssVar(spacing, tight);
-            border-radius: getCssVar(border-radius, large);
-            #{getCssVarName(context-menu, popover, button, padding)}: 0 26px;
-
-            --el-button-size: 26px;
-
-            
-            &:hover {
-                color: getCssVar(color, primary, active, text);
-                background-color: getCssVar(color, primary, light, active);
-            }
-        }
-        .#{bem(context-menu, action-content-icon)} {
-            position: absolute;
-            left: getCssVar(spacing, base);
-            font-size: getCssVar(font-size, regular);
-        }
-        .#{bem('context-menu', 'separator')} {
-            width: 100%;
-            margin: 5px 0;
+  }
+
+  // 最小化组件样式
+  @include b('short-cut') {
+    right: 36px;
+    bottom: 36px;
+    @include e('operate') {
+      .el-tooltip__trigger {
+        &:hover {
+          color: getCssVar(color, text, 0);
+          background-color: getCssVar(color, fill, 1);
+          border-radius: getCssVar(border, radius, extra, small);
         }
+      }
     }
-
-    @include b(x6-design-context-menu) {
-        &.mx-context-menu {
-            padding: getCssVar(spacing, tight) 0;
-            border-radius: getCssVar(border-radius, large);
-      
-            .mx-context-menu-item {
-                position: relative;
-                width: calc(100% - getCssVar(spacing, tight) * 2);
-                height: 26px;
-                padding: 0 26px;
-                margin: 0 getCssVar(spacing, tight);
-                cursor: pointer;
-                border-radius: getCssVar(border-radius, large);
-      
-                .mx-icon-placeholder.preserve-width {
-                    position: absolute;
-                    left: getCssVar(spacing, base);
-                    width: getCssVar(font-size, regular);
-                    height: getCssVar(font-size, regular);
-                    margin-right: getCssVar(spacing, extra, tight);
-                    font-size: getCssVar(font-size, regular);;
-                }
-            }
-        }
+  }
+  .#{bem('short-cut', 'item')} {
+    .drag-icon {
+      fill: currentColor;
     }
-}
\ No newline at end of file
+  }
+}
-- 
Gitee