style: 调整样式

apps/web-velofex-b/package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@velofex-core/tabs-ui": "workspace:*",
+    "@velofex-core/shadcn-ui": "workspace:*",
     "@velofex/access": "workspace:*",
     "@velofex/common-ui": "workspace:*",
     "@velofex/constants": "workspace:*",

apps/web-velofex-b/src/views/home.vue

@@ -17,6 +17,7 @@ import {
   type SupportedLanguagesType,
 } from '@velofex/locales';
 import { preferences, updatePreferences } from '@velofex/preferences';
+import { VbenScrollbar } from '@velofex-core/shadcn-ui';
 import { TabsView } from '@velofex-core/tabs-ui';
 
 import {
@@ -719,7 +720,17 @@ function handleIframeLoad(event: Event) {
           </button>
         </div>
 
-        <div class="menu-scroll-wrap">
+        <!-- <div class="menu-scroll-wrap"> -->
+        <VbenScrollbar
+          :shadow-bottom="false"
+          :shadow-top="false"
+          class="h-full"
+          horizontal
+          scroll-bar-class="z-10 hidden "
+          shadow
+          shadow-left
+          shadow-right
+        >
           <Menu
             :items="leftMenuItems"
             :open-keys="openMenuKeys"
@@ -729,7 +740,8 @@ function handleIframeLoad(event: Event) {
             @click="(info: any) => handleLeftMenuClick(info)"
             @open-change="handleMenuOpenChange"
           />
-        </div>
+          <!-- </div> -->
+        </VbenScrollbar>
       </aside>
 
       <section class="right-panel">
@@ -868,6 +880,15 @@ function handleIframeLoad(event: Event) {
   height: 100vh;
   min-height: 100vh;
   overflow: hidden;
+  // background: radial-gradient(
+  //     circle at 78% 88%,
+  //     rgb(193 233 255 / 35%),
+  //     transparent 36%
+  //   ),
+  //   radial-gradient(circle at 70% 92%, rgb(255 216 199 / 30%), transparent 30%),
+  //   #f2f0f3;
+  background: url('@/assets/image/background.png') no-repeat;
+  background-size: cover;
 }
 
 .enterprise-shell {
@@ -875,7 +896,7 @@ function handleIframeLoad(event: Event) {
   height: 100vh;
   min-height: 100vh;
   overflow: hidden;
-  background: linear-gradient(180deg, #f8f6f8 0%, #fdf2f7 100%);
+  // background: linear-gradient(180deg, #f8f6f8 0%, #fdf2f7 100%);
   box-shadow: 0 10px 30px rgb(60 34 51 / 8%);
 }
 
@@ -904,7 +925,7 @@ function handleIframeLoad(event: Event) {
   min-height: 0;
   padding: 24px 16px;
   overflow: hidden;
-  background: linear-gradient(180deg, #f8f6f8 0%, #fdf2f7 100%);
+  // background: linear-gradient(180deg, #f8f6f8 0%, #fdf2f7 100%);
   border-right: none;
 }
 
@@ -1100,21 +1121,50 @@ function handleIframeLoad(event: Event) {
   opacity: 1;
 }
 
-:deep(.content-tabs-wrap [data-orientation='horizontal'] .bg-border) {
-  background: rgb(139 22 72 / 50%) !important;
+// :deep(.content-tabs-wrap [data-orientation='horizontal'] .bg-border) {
+//   background: rgb(139 22 72 / 50%) !important;
+// }
+
+:deep(.content-tabs-wrap .tabs-chrome__background-content) {
+  border-radius: 20px !important;
+}
+
+:deep(
+  .tabs-chrome__item:not(.dragging):hover:not(.is-active)
+    .tabs-chrome__background-content
+) {
+  background-color: #c4a7b6 !important;
+}
+
+:deep(.content-tabs-wrap .is-active) {
+  .tabs-chrome__background-content {
+    background: #7e0040;
+  }
 }
 
-:deep(.content-tabs-wrap .is-active .tabs-chrome__background-content) {
-  background: rgb(139 22 72 / 10%) !important;
+:deep(.content-tabs-wrap .is-active .tabs-chrome__extra svg) {
+  stroke: #fff;
+
+  &:hover {
+    background: transparent;
+  }
 }
 
 :deep(.content-tabs-wrap .is-active .text-sm) {
-  color: rgb(139 22 72) !important;
+  color: #fff !important;
+}
+
+:deep(.group.is-active .tabs-chrome__item-main) {
+  color: #fff;
 }
 
 :deep(.content-tabs-wrap .is-active .tabs-chrome__background-before),
 :deep(.content-tabs-wrap .is-active .tabs-chrome__background-after) {
-  fill: rgb(139 22 72 / 10%) !important;
+  display: none;
+}
+
+:deep(.tabs-chrome__item:last-child) {
+  margin-right: 0;
 }
 
 :deep(.content-tabs-wrap .home-tab-icon) {
@@ -1122,13 +1172,13 @@ function handleIframeLoad(event: Event) {
   align-items: center;
   justify-content: center;
   line-height: 1;
-  color: #111;
+  // color: #111;
   vertical-align: middle;
 }
 
-:deep(.content-tabs-wrap .is-active .home-tab-icon) {
-  color: #111 !important;
-}
+// :deep(.content-tabs-wrap .is-active .home-tab-icon) {
+//   color: #111 !important;
+// }
 
 :deep(.overflow-y-hidden) {
   overflow: hidden;
@@ -1139,7 +1189,7 @@ function handleIframeLoad(event: Event) {
   display: flex;
   flex: 1;
   flex-direction: column;
-  padding: 28px 32px;
+  padding: 12px 28px 32px;
   overflow: hidden;
   border-radius: 50px 0 0 50px;
 }
@@ -1163,10 +1213,10 @@ function handleIframeLoad(event: Event) {
 
 .top-bar {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   justify-content: space-between;
-  padding-bottom: 16px;
-  border-bottom: 1px solid #f0ebf1;
+  // padding-bottom: 16px;
+  // border-bottom: 1px solid #f0ebf1;
 }
 
 .title-wrap {
@@ -1177,8 +1227,8 @@ function handleIframeLoad(event: Event) {
 
 .crumb {
   margin-left: 8px;
-  font-size: 20px;
-  color: #3e2b33;
+  font-size: 14px;
+  color: #462424;
 }
 
 .top-actions {
@@ -1215,7 +1265,7 @@ function handleIframeLoad(event: Event) {
 .content-tabs-wrap {
   flex-shrink: 0;
   height: 42px;
-  padding: 0 10px;
+  padding: 4px 0;
   overflow: hidden;
   background: linear-gradient(180deg, #fcfafc 0%, #f7f3f6 100%);
   border-bottom: 1px solid #f0ebf1;
@@ -1225,11 +1275,8 @@ function handleIframeLoad(event: Event) {
   position: relative;
   flex: 1;
   min-height: 0;
-  overflow: auto;
-}
-
-.content-iframe-stack.home-active {
-  overflow: visible;
+  // overflow: hidden;
+  border-radius: 0 0 0 50px;
 }
 
 .content-iframe {

pnpm-lock.yaml

@@ -665,6 +665,9 @@ importers:
 
   apps/web-velofex-b:
     dependencies:
+      '@velofex-core/shadcn-ui':
+        specifier: workspace:*
+        version: link:../../packages/@core/ui-kit/shadcn-ui
       '@velofex-core/tabs-ui':
         specifier: workspace:*
         version: link:../../packages/@core/ui-kit/tabs-ui