From 8b6d3a72e8ae7f7406aafae72167403b2fedf160 Mon Sep 17 00:00:00 2001
From: vince <vince292007@gmail.com>
Date: Tue, 16 Jul 2024 23:13:03 +0800
Subject: [PATCH] fix: style optimization

---
 .../@core/shared/design/src/css/global.css    | 15 +++++++++++
 .../src/components/layout-tabbar.vue          |  2 +-
 .../ui-kit/layout-ui/src/vben-layout.vue      |  2 +-
 .../src/components/tabs-chrome/tabs.vue       | 26 +++++++++----------
 .../tabs-ui/src/components/tabs/tabs.vue      | 10 +++----
 packages/effects/layouts/src/basic/layout.vue |  1 +
 .../layouts/src/basic/tabbar/tabbar.vue       |  3 ++-
 7 files changed, 38 insertions(+), 21 deletions(-)

diff --git a/packages/@core/shared/design/src/css/global.css b/packages/@core/shared/design/src/css/global.css
index ec819f3e..a03a5f93 100644
--- a/packages/@core/shared/design/src/css/global.css
+++ b/packages/@core/shared/design/src/css/global.css
@@ -41,6 +41,7 @@
 
   body {
     min-height: 100vh;
+    overflow: overlay;
     -webkit-font-smoothing: antialiased;
   }
 
@@ -88,6 +89,20 @@
   input[type='number']::-webkit-outer-spin-button {
     @apply m-0 appearance-none;
   }
+
+  /* 考虑只在mac下打开 */
+
+  /* *::-webkit-scrollbar {
+    @apply h-[1px] w-[10px];
+  }
+
+  *::-webkit-scrollbar-thumb {
+    @apply bg-border rounded-sm border-none;
+  }
+
+  *::-webkit-scrollbar-track {
+    @apply rounded-sm border-none bg-transparent shadow-none;
+  } */
 }
 
 @layer components {
diff --git a/packages/@core/ui-kit/layout-ui/src/components/layout-tabbar.vue b/packages/@core/ui-kit/layout-ui/src/components/layout-tabbar.vue
index e741f8d3..ca189af2 100644
--- a/packages/@core/ui-kit/layout-ui/src/components/layout-tabbar.vue
+++ b/packages/@core/ui-kit/layout-ui/src/components/layout-tabbar.vue
@@ -26,7 +26,7 @@ const style = computed((): CSSProperties => {
 <template>
   <section
     :style="style"
-    class="border-border bg-background flex w-full border-b transition-all duration-[100ms]"
+    class="border-border bg-background flex w-full border-b transition-all"
   >
     <slot></slot>
   </section>
diff --git a/packages/@core/ui-kit/layout-ui/src/vben-layout.vue b/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
index d4f8ad6b..3c7d0d44 100644
--- a/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
+++ b/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
@@ -553,7 +553,7 @@ function handleOpenMenu() {
     <div
       v-if="maskVisible"
       :style="maskStyle"
-      class="fixed left-0 top-0 h-full w-full bg-[rgb(0_0_0_/_40%)] transition-[background-color] duration-200"
+      class="bg-overlay fixed left-0 top-0 h-full w-full transition-[background-color] duration-200"
       @click="handleClickMask"
     ></div>
   </div>
diff --git a/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue b/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
index 87e16359..8eb0fc83 100644
--- a/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
+++ b/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
@@ -84,9 +84,9 @@ function scrollIntoView() {
       <div
         ref="contentRef"
         :class="contentClass"
-        class="relative !flex h-[calc(100%-2px)] w-max"
+        class="relative !flex h-full w-max"
       >
-        <TransitionGroup name="slide-up">
+        <TransitionGroup name="slide-left">
           <div
             v-for="(tab, i) in tabsView"
             :key="tab.key"
@@ -120,17 +120,17 @@ function scrollIntoView() {
                   class="tabs-chrome__background absolute z-[1] size-full px-[calc(var(--gap)-1px)] py-0 transition-opacity duration-150"
                 >
                   <div
-                    class="tabs-chrome__background-content h-full rounded-tl-[var(--gap)] rounded-tr-[var(--gap)] duration-150"
+                    class="tabs-chrome__background-content group-[.is-active]:bg-primary/15 dark:group-[.is-active]:bg-accent h-full rounded-tl-[var(--gap)] rounded-tr-[var(--gap)] duration-150"
                   ></div>
                   <svg
-                    class="tabs-chrome__background-before absolute bottom-0 left-[-1px] fill-transparent transition-all duration-150"
+                    class="tabs-chrome__background-before group-[.is-active]:fill-primary/15 dark:group-[.is-active]:fill-accent absolute bottom-0 left-[-1px] fill-transparent transition-all duration-150"
                     height="7"
                     width="7"
                   >
                     <path d="M 0 7 A 7 7 0 0 0 7 0 L 7 7 Z" />
                   </svg>
                   <svg
-                    class="tabs-chrome__background-after absolute bottom-0 right-[-1px] fill-transparent transition-all duration-150"
+                    class="tabs-chrome__background-after group-[.is-active]:fill-primary/15 dark:group-[.is-active]:fill-accent absolute bottom-0 right-[-1px] fill-transparent transition-all duration-150"
                     height="7"
                     width="7"
                   >
@@ -150,19 +150,19 @@ function scrollIntoView() {
                     v-show="
                       !tab.affixTab && tabsView.length > 1 && tab.closable
                     "
-                    class="hover:bg-accent stroke-accent-foreground/80 hover:stroke-accent-foreground group-[.is-active]:text-primary mt-[2px] size-3 cursor-pointer rounded-full transition-all"
+                    class="hover:bg-accent stroke-accent-foreground/80 hover:stroke-accent-foreground dark:group-[.is-active]:text-accent-foreground group-[.is-active]:text-primary mt-[2px] size-3 cursor-pointer rounded-full transition-all"
                     @click.stop="handleClose(tab.key)"
                   />
                   <MdiPin
                     v-show="tab.affixTab && tabsView.length > 1 && tab.closable"
-                    class="hover:bg-accent hover:stroke-accent-foreground group-[.is-active]:text-primary mt-[2px] size-3.5 cursor-pointer rounded-full transition-all"
+                    class="hover:bg-accent hover:stroke-accent-foreground group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground mt-[2px] size-3.5 cursor-pointer rounded-full transition-all"
                     @click.stop="handleUnpinTab(tab)"
                   />
                 </div>
 
                 <!-- tab-item-main -->
                 <div
-                  class="tabs-chrome__item-main group-[.is-active]:text-primary text-accent-foreground absolute left-0 right-0 z-[2] mx-[calc(var(--gap)*2)] my-0 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pr-4 duration-150 group-hover:pr-3"
+                  class="tabs-chrome__item-main group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground text-accent-foreground absolute left-0 right-0 z-[2] mx-[calc(var(--gap)*2)] my-0 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pr-4 duration-150 group-hover:pr-3"
                 >
                   <VbenIcon
                     v-if="showIcon"
@@ -214,7 +214,7 @@ function scrollIntoView() {
 
       .tabs-chrome__background {
         &-content {
-          @apply bg-primary/10 mx-1 rounded-md pb-2;
+          @apply bg-accent mx-1 rounded-md pb-2;
         }
 
         &-before,
@@ -236,14 +236,14 @@ function scrollIntoView() {
       .tabs-chrome__background {
         @apply opacity-100;
 
-        &-content {
-          @apply bg-primary/15;
+        /* &-content {
+          @apply bg-accent;
         }
 
         &-before,
         &-after {
-          @apply fill-primary/15;
-        }
+          @apply fill-heavy;
+        } */
       }
     }
   }
diff --git a/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue b/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
index f1c465f5..eb84dd8b 100644
--- a/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
+++ b/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
@@ -85,13 +85,13 @@ function scrollIntoView() {
         :class="contentClass"
         class="relative !flex h-full w-max items-center"
       >
-        <TransitionGroup name="slide-up">
+        <TransitionGroup name="slide-left">
           <div
             v-for="(tab, i) in tabsView"
             :key="tab.key"
             :class="[
               {
-                'is-active bg-primary/15': tab.key === active,
+                'is-active dark:bg-accent bg-primary/15': tab.key === active,
                 dragable: !tab.affixTab,
               },
               typeWithClass.content,
@@ -119,19 +119,19 @@ function scrollIntoView() {
                     v-show="
                       !tab.affixTab && tabsView.length > 1 && tab.closable
                     "
-                    class="hover:bg-accent stroke-accent-foreground/80 hover:stroke-accent-foreground group-[.is-active]:text-primary size-3 cursor-pointer rounded-full transition-all"
+                    class="hover:bg-accent stroke-accent-foreground/80 hover:stroke-accent-foreground dark:group-[.is-active]:text-accent-foreground group-[.is-active]:text-primary size-3 cursor-pointer rounded-full transition-all"
                     @click.stop="handleClose(tab.key)"
                   />
                   <MdiPin
                     v-show="tab.affixTab && tabsView.length > 1 && tab.closable"
-                    class="hover:bg-heavy hover:stroke-accent-foreground group-[.is-active]:text-primary mt-[2px] size-3.5 cursor-pointer rounded-full transition-all"
+                    class="hover:bg-accent hover:stroke-accent-foreground group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground mt-[2px] size-3.5 cursor-pointer rounded-full transition-all"
                     @click.stop="handleUnpinTab(tab)"
                   />
                 </div>
 
                 <!-- tab-item-main -->
                 <div
-                  class="group-[.is-active]:text-primary text-accent-foreground mx-3 mr-4 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pr-3 transition-all duration-300"
+                  class="text-accent-foreground group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground mx-3 mr-4 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pr-3 transition-all duration-300"
                 >
                   <!-- <div
                   class="mx-3 ml-3 mr-2 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] transition-all duration-300 group-hover:mr-2 group-hover:pr-4 group-[.is-active]:pr-4"
diff --git a/packages/effects/layouts/src/basic/layout.vue b/packages/effects/layouts/src/basic/layout.vue
index b903b01c..e920b754 100644
--- a/packages/effects/layouts/src/basic/layout.vue
+++ b/packages/effects/layouts/src/basic/layout.vue
@@ -258,6 +258,7 @@ function clearPreferencesAndLogout() {
       <LayoutTabbar
         v-if="preferences.tabbar.enable"
         :show-icon="preferences.tabbar.showIcon"
+        :theme="theme"
       />
     </template>
 
diff --git a/packages/effects/layouts/src/basic/tabbar/tabbar.vue b/packages/effects/layouts/src/basic/tabbar/tabbar.vue
index 8e0dc790..94eb346b 100644
--- a/packages/effects/layouts/src/basic/tabbar/tabbar.vue
+++ b/packages/effects/layouts/src/basic/tabbar/tabbar.vue
@@ -12,7 +12,7 @@ defineOptions({
   name: 'LayoutTabbar',
 });
 
-defineProps<{ showIcon?: boolean }>();
+defineProps<{ showIcon?: boolean; theme?: string }>();
 
 const coreTabbarStore = useCoreTabbarStore();
 
@@ -40,6 +40,7 @@ if (!preferences.tabbar.persist) {
 <template>
   <TabsView
     :active="currentActive"
+    :class="theme"
     :context-menus="createContextMenus"
     :dragable="preferences.tabbar.dragable"
     :show-icon="showIcon"