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

@@ -9,6 +9,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 {
@@ -585,7 +586,17 @@ function handleUserMenuClick({ key }: { key: string }) {
           </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"
@@ -595,7 +606,8 @@ function handleUserMenuClick({ key }: { key: string }) {
             @click="(info: any) => handleLeftMenuClick(info)"
             @open-change="handleMenuOpenChange"
           />
-        </div>
+          <!-- </div> -->
+        </VbenScrollbar>
       </aside>
 
       <section class="right-panel">
@@ -719,13 +731,15 @@ function handleUserMenuClick({ key }: { key: string }) {
   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: 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 {
@@ -733,7 +747,7 @@ function handleUserMenuClick({ key }: { key: string }) {
   height: 100vh;
   min-height: 100vh;
   overflow: hidden;
-  background: #f8f6f8;
+  // background: #f8f6f8;
   box-shadow: 0 10px 30px rgb(60 34 51 / 8%);
 }
 
@@ -762,7 +776,7 @@ function handleUserMenuClick({ key }: { key: string }) {
   min-height: 0;
   padding: 24px 16px;
   overflow: hidden;
-  background: #f8f6f8;
+  // background: #f8f6f8;
   border-right: none;
 }
 
@@ -958,21 +972,50 @@ function handleUserMenuClick({ key }: { key: string }) {
   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: rgb(139 22 72 / 10%) !important;
+:deep(.content-tabs-wrap .is-active) {
+  .tabs-chrome__background-content {
+    background: #7e0040;
+  }
+}
+
+: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(.overflow-y-hidden) {
@@ -984,7 +1027,7 @@ function handleUserMenuClick({ key }: { key: string }) {
   display: flex;
   flex: 1;
   flex-direction: column;
-  padding: 28px 32px;
+  padding: 12px 28px 32px;
   overflow: hidden;
   border-radius: 50px 0 0 50px;
   box-shadow: 0 8px 20px rgb(95 67 84 / 10%);
@@ -1005,10 +1048,10 @@ function handleUserMenuClick({ key }: { key: string }) {
 
 .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 {
@@ -1019,8 +1062,8 @@ function handleUserMenuClick({ key }: { key: string }) {
 
 .crumb {
   margin-left: 8px;
-  font-size: 20px;
-  color: #3e2b33;
+  font-size: 14px;
+  color: #462424;
 }
 
 .top-actions {
@@ -1053,7 +1096,6 @@ function handleUserMenuClick({ key }: { key: string }) {
 .content-tabs-wrap {
   flex-shrink: 0;
   height: 42px;
-  padding: 0 10px;
   overflow: hidden;
   background: linear-gradient(180deg, #fcfafc 0%, #f7f3f6 100%);
   border-bottom: 1px solid #f0ebf1;
@@ -1063,6 +1105,8 @@ function handleUserMenuClick({ key }: { key: string }) {
   position: relative;
   flex: 1;
   min-height: 0;
+  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