From 6dcc6ce8933d980e2ef02e1431fea82a0d287686 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=AD=90=E9=BB=98?= <925456043@qq.com>
Date: Sat, 7 Mar 2026 21:04:54 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E9=87=8D=E6=9E=84=E5=B9=B6=E7=BE=8E?=
 =?UTF-8?q?=E5=8C=96=E6=95=B4=E4=BD=93UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/src/components/page/ListPageShell.vue | 64 +++++++++++++----
 .../views/datacenter/DatacenterTableList.vue  | 49 ++++++++++---
 .../base/design/src/design-tokens/dark.css    |  4 ++
 .../base/design/src/design-tokens/default.css |  4 ++
 .../src/components/layout-content.vue         | 32 +++++----
 .../src/components/layout-header.vue          | 20 ++----
 .../src/components/layout-sidebar.vue         | 70 ++++++++++---------
 .../src/components/layout-tabbar.vue          | 19 ++---
 .../widgets/sidebar-fixed-button.vue          | 11 ++-
 .../ui-kit/layout-ui/src/easyflow-layout.vue  | 34 +++++----
 .../src/components/breadcrumb/breadcrumb.vue  | 63 +++++++++++++----
 .../src/components/tabs-chrome/tabs.vue       | 37 ++++++++--
 .../@core/ui-kit/tabs-ui/src/tabs-view.vue    | 18 ++---
 .../layouts/src/basic/header/header.vue       | 33 +++------
 14 files changed, 290 insertions(+), 168 deletions(-)

diff --git a/easyflow-ui-admin/app/src/components/page/ListPageShell.vue b/easyflow-ui-admin/app/src/components/page/ListPageShell.vue
index 490224d..3f2ccf7 100644
--- a/easyflow-ui-admin/app/src/components/page/ListPageShell.vue
+++ b/easyflow-ui-admin/app/src/components/page/ListPageShell.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import type { CSSProperties } from 'vue';
-
-import { computed, useSlots } from 'vue';
+import type {CSSProperties} from 'vue';
+import {computed, useSlots} from 'vue';
 
 interface Props {
   contentPadding?: number | string;
@@ -33,8 +32,8 @@ const contentStyle = computed((): CSSProperties => {
 
 <template>
   <section
+    class="list-page-shell"
     :class="[
-      'list-page-shell',
       `is-${surface}`,
       {
         'is-dense': dense,
@@ -43,12 +42,10 @@ const contentStyle = computed((): CSSProperties => {
   >
     <div
       v-if="hasToolbar"
-      :class="[
-        'list-page-shell__toolbar',
-        {
-          'is-sticky': stickyToolbar,
-        },
-      ]"
+      class="list-page-shell__toolbar"
+      :class="{
+        'is-sticky': stickyToolbar,
+      }"
     >
       <div v-if="$slots.filters" class="list-page-shell__filters">
         <slot name="filters"></slot>
@@ -117,18 +114,57 @@ const contentStyle = computed((): CSSProperties => {
   flex: 1;
   flex-direction: column;
   min-height: 0;
+  position: relative;
+  overflow: hidden;
   padding: var(--list-page-shell-content-padding);
-  background: hsl(var(--surface-panel));
-  border: none;
+  background: linear-gradient(
+    180deg,
+    hsl(var(--glass-border) / 0.84) 0%,
+    hsl(var(--surface-panel) / 0.94) 28%,
+    hsl(var(--surface-panel) / 0.97) 100%
+  );
+  border: 1px solid hsl(var(--glass-border) / 0.58);
   border-radius: 24px;
-  box-shadow: var(--shadow-subtle);
+  box-shadow:
+    inset 0 1px 0 hsl(var(--glass-border) / 0.72),
+    0 24px 54px -42px hsl(var(--primary) / 0.22),
+    0 18px 42px -34px hsl(var(--foreground) / 0.1);
+  backdrop-filter: blur(calc(var(--glass-blur) * 0.7)) saturate(145%);
 }
 
 .list-page-shell.is-subtle .list-page-shell__content {
-  background: hsl(var(--surface-contrast-soft));
+  background: linear-gradient(
+    180deg,
+    hsl(var(--glass-tint) / 0.84) 0%,
+    hsl(var(--surface-contrast-soft) / 0.94) 100%
+  );
   box-shadow: none;
 }
 
+.list-page-shell__content::before {
+  position: absolute;
+  inset: 0 0 auto;
+  height: 220px;
+  pointer-events: none;
+  content: '';
+  background:
+    radial-gradient(
+      ellipse 84% 72% at 10% 0%,
+      hsl(var(--nav-ambient) / 0.18) 0%,
+      transparent 68%
+    ),
+    linear-gradient(
+      180deg,
+      hsl(var(--nav-flow-trace) / 0.08) 0%,
+      transparent 78%
+    );
+}
+
+.list-page-shell__content > * {
+  position: relative;
+  z-index: 1;
+}
+
 .list-page-shell__content :deep(.page-data-container) {
   display: flex;
   flex: 1;
diff --git a/easyflow-ui-admin/app/src/views/datacenter/DatacenterTableList.vue b/easyflow-ui-admin/app/src/views/datacenter/DatacenterTableList.vue
index 0437bc5..1be8ae7 100644
--- a/easyflow-ui-admin/app/src/views/datacenter/DatacenterTableList.vue
+++ b/easyflow-ui-admin/app/src/views/datacenter/DatacenterTableList.vue
@@ -1,9 +1,5 @@
 <script setup lang="ts">
-import type { FormInstance } from 'element-plus';
-
-import { markRaw, onMounted, ref } from 'vue';
-
-import { Delete, MoreFilled, Plus } from '@element-plus/icons-vue';
+import type {FormInstance} from 'element-plus';
 import {
   ElButton,
   ElDropdown,
@@ -15,13 +11,17 @@ import {
   ElTableColumn,
 } from 'element-plus';
 
-import { api } from '#/api/request';
+import {markRaw, onMounted, ref} from 'vue';
+
+import {Delete, MoreFilled, Plus} from '@element-plus/icons-vue';
+
+import {api} from '#/api/request';
 import HeaderSearch from '#/components/headerSearch/HeaderSearch.vue';
 import ListPageShell from '#/components/page/ListPageShell.vue';
 import PageData from '#/components/page/PageData.vue';
-import { $t } from '#/locales';
-import { router } from '#/router';
-import { useDictStore } from '#/store';
+import {$t} from '#/locales';
+import {router} from '#/router';
+import {useDictStore} from '#/store';
 
 import DatacenterTableModal from './DatacenterTableModal.vue';
 
@@ -94,7 +94,7 @@ function toDetailPage(row: any) {
 </script>
 
 <template>
-  <div class="flex h-full flex-col gap-6 p-6">
+  <div class="datacenter-table-page flex h-full flex-col gap-6 p-6">
     <DatacenterTableModal ref="saveDialog" @reload="reset" />
     <ListPageShell>
       <template #filters>
@@ -174,4 +174,31 @@ function toDetailPage(row: any) {
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.datacenter-table-page {
+  position: relative;
+}
+
+.datacenter-table-page::before {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  content: '';
+  background:
+    radial-gradient(
+      ellipse 76% 34% at 2% 0%,
+      hsl(var(--nav-ambient) / 0.16) 0%,
+      transparent 64%
+    ),
+    radial-gradient(
+      ellipse 56% 22% at 24% 12%,
+      hsl(var(--nav-flow-core) / 0.08) 0%,
+      transparent 68%
+    );
+}
+
+.datacenter-table-page > * {
+  position: relative;
+  z-index: 1;
+}
+</style>
diff --git a/easyflow-ui-admin/packages/@core/base/design/src/design-tokens/dark.css b/easyflow-ui-admin/packages/@core/base/design/src/design-tokens/dark.css
index 95b804f..599d8f8 100644
--- a/easyflow-ui-admin/packages/@core/base/design/src/design-tokens/dark.css
+++ b/easyflow-ui-admin/packages/@core/base/design/src/design-tokens/dark.css
@@ -154,6 +154,10 @@
   --modal-preview-glow: 211 100% 62%;
   --nav-ambient: 214 100% 44%;
   --nav-ambient-secondary: 194 82% 40%;
+  --nav-flow-core: 211 92% 56%;
+  --nav-flow-secondary: 194 78% 48%;
+  --nav-flow-accent: 214 88% 70%;
+  --nav-flow-trace: 189 62% 56%;
   --nav-sheen: 210 100% 96%;
   --shadow-subtle: 0 18px 42px -30px hsl(212 100% 5% / 0.48);
   --shadow-toolbar: 0 28px 54px -36px hsl(212 100% 4% / 0.58);
diff --git a/easyflow-ui-admin/packages/@core/base/design/src/design-tokens/default.css b/easyflow-ui-admin/packages/@core/base/design/src/design-tokens/default.css
index ce1d1b7..963d2d9 100644
--- a/easyflow-ui-admin/packages/@core/base/design/src/design-tokens/default.css
+++ b/easyflow-ui-admin/packages/@core/base/design/src/design-tokens/default.css
@@ -154,6 +154,10 @@
   --modal-preview-glow: 211 100% 56%;
   --nav-ambient: 212 100% 84%;
   --nav-ambient-secondary: 194 93% 82%;
+  --nav-flow-core: 209 94% 74%;
+  --nav-flow-secondary: 195 90% 76%;
+  --nav-flow-accent: 214 100% 88%;
+  --nav-flow-trace: 191 78% 84%;
   --nav-sheen: 0 0% 100%;
   --shadow-subtle: 0 18px 42px -30px hsl(211 78% 48% / 0.16);
   --shadow-toolbar: 0 28px 54px -34px hsl(211 78% 48% / 0.2);
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/components/layout-content.vue b/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/components/layout-content.vue
index 8eb90b2..1313cce 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/components/layout-content.vue
+++ b/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/components/layout-content.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import type { CSSProperties } from 'vue';
+import type {CSSProperties} from 'vue';
+import {computed} from 'vue';
 
-import type { ContentCompactType } from '@easyflow-core/typings';
+import type {ContentCompactType} from '@easyflow-core/typings';
 
-import { computed } from 'vue';
-
-import { useLayoutContentStyle } from '@easyflow-core/composables';
-import { Slot } from '@easyflow-core/shadcn-ui';
+import {useLayoutContentStyle} from '@easyflow-core/composables';
+import {Slot} from '@easyflow-core/shadcn-ui';
 
 interface Props {
   /**
@@ -27,6 +26,10 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {});
 
 const { contentElement, overlayStyle } = useLayoutContentStyle();
+const flowContinuationStyle: CSSProperties = {
+  backgroundImage:
+    'radial-gradient(ellipse 96% 34% at -4% -6%, hsl(var(--nav-flow-core) / 0.18) 0%, hsl(var(--nav-flow-core) / 0.08) 30%, transparent 62%), radial-gradient(ellipse 74% 24% at 20% 8%, hsl(var(--nav-ambient) / 0.2) 0%, transparent 64%), linear-gradient(128deg, hsl(var(--nav-flow-trace) / 0.1) 0%, hsl(var(--nav-flow-secondary) / 0.08) 12%, transparent 24%, transparent 48%, hsl(var(--nav-flow-core) / 0.05) 66%, transparent 88%), radial-gradient(ellipse 52% 18% at 50% 26%, hsl(var(--nav-flow-accent) / 0.05) 0%, transparent 72%)',
+};
 
 const style = computed((): CSSProperties => {
   const {
@@ -44,6 +47,9 @@ const style = computed((): CSSProperties => {
       : {};
   return {
     ...compactStyle,
+    backgroundColor: 'hsl(var(--surface-canvas) / 0.72)',
+    backgroundImage:
+      'linear-gradient(180deg, hsl(var(--nav-surface) / 0.72) 0%, hsl(var(--surface-canvas) / 0.92) 16%, hsl(var(--background) / 0.98) 100%)',
     flex: 1,
     padding: `${padding}px`,
     paddingBottom: `${paddingBottom}px`,
@@ -55,14 +61,16 @@ const style = computed((): CSSProperties => {
 </script>
 
 <template>
-  <main
-    ref="contentElement"
-    :style="style"
-    class="relative overflow-hidden bg-[radial-gradient(circle_at_top,hsl(var(--glass-tint))/0.34,transparent_40%),linear-gradient(180deg,hsl(var(--surface-canvas)),hsl(var(--background-deep)))]"
-  >
+  <main ref="contentElement" :style="style" class="relative overflow-hidden">
+    <div
+      :style="flowContinuationStyle"
+      class="pointer-events-none absolute inset-0"
+    ></div>
     <Slot :style="overlayStyle">
       <slot name="overlay"></slot>
     </Slot>
-    <slot></slot>
+    <div class="relative z-[1] h-full">
+      <slot></slot>
+    </div>
   </main>
 </template>
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/components/layout-header.vue b/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/components/layout-header.vue
index acd4d92..44f6e4e 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/components/layout-header.vue
+++ b/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/components/layout-header.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import type { CSSProperties } from 'vue';
-
-import { computed, useSlots } from 'vue';
+import type {CSSProperties} from 'vue';
+import {computed, useSlots} from 'vue';
 
 interface Props {
   /**
@@ -47,11 +46,10 @@ const style = computed((): CSSProperties => {
   const right = !show || !fullWidth ? undefined : 0;
 
   return {
-    backgroundColor: 'hsl(var(--nav-surface) / 0.86)',
-    backgroundImage:
-      'linear-gradient(180deg, hsl(var(--nav-surface) / 0.96), hsl(var(--glass-tint) / 0.82))',
-    backdropFilter: 'blur(var(--glass-blur)) saturate(160%)',
-    boxShadow: 'var(--shadow-subtle)',
+    backgroundColor: 'transparent',
+    backgroundImage: 'none',
+    backdropFilter: 'none',
+    boxShadow: 'none',
     height: `${height}px`,
     marginTop: show ? 0 : `-${height}px`,
     right,
@@ -63,10 +61,6 @@ const logoStyle = computed((): CSSProperties => {
     minWidth: `${props.isMobile ? 40 : props.sidebarWidth}px`,
   };
 });
-const ambientStyle: CSSProperties = {
-  backgroundImage:
-    'radial-gradient(circle at left top, hsl(var(--nav-ambient) / 0.42) 0%, hsl(var(--nav-ambient) / 0.18) 22%, transparent 56%), radial-gradient(circle at 20% 0%, hsl(var(--nav-ambient-secondary) / 0.22) 0%, transparent 40%), linear-gradient(180deg, hsl(var(--nav-sheen) / 0.22), transparent 48%)',
-};
 </script>
 
 <template>
@@ -75,8 +69,6 @@ const ambientStyle: CSSProperties = {
     :style="style"
     class="relative top-0 flex w-full flex-[0_0_auto] items-center gap-1 overflow-x-hidden overflow-y-visible px-3 transition-[margin-top,background-color,box-shadow] duration-200"
   >
-    <div :style="ambientStyle" class="pointer-events-none absolute inset-0"></div>
-
     <div v-if="slots.logo" :style="logoStyle" class="relative z-10">
       <slot name="logo"></slot>
     </div>
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue b/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
index 0e6707c..b49c988 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
+++ b/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import type { CSSProperties } from 'vue';
+import type {CSSProperties} from 'vue';
+import {computed, shallowRef, useSlots, watchEffect} from 'vue';
 
-import { computed, shallowRef, useSlots, watchEffect } from 'vue';
+import {EasyFlowScrollbar} from '@easyflow-core/shadcn-ui';
 
-import { EasyFlowScrollbar } from '@easyflow-core/shadcn-ui';
+import {useScrollLock} from '@vueuse/core';
 
-import { useScrollLock } from '@vueuse/core';
-
-import { SidebarCollapseButton, SidebarFixedButton } from './widgets';
+import {SidebarCollapseButton, SidebarFixedButton} from './widgets';
 
 interface Props {
   /**
@@ -123,12 +122,12 @@ const style = computed((): CSSProperties => {
 
   return {
     '--scroll-shadow': 'var(--surface-elevated)',
-    backgroundColor: 'hsl(var(--nav-surface-subtle) / 0.44)',
+    backgroundColor: 'hsl(var(--nav-surface-subtle) / 0.16)',
     backgroundImage:
-      'linear-gradient(180deg, hsl(var(--nav-surface) / 0.66) 0%, hsl(var(--nav-surface-subtle) / 0.5) 28%, hsl(var(--glass-tint) / 0.36) 100%)',
+      'linear-gradient(180deg, hsl(var(--nav-surface) / 0.3) 0%, hsl(var(--nav-surface-subtle) / 0.2) 28%, hsl(var(--glass-tint) / 0.12) 100%)',
     backdropFilter: 'blur(calc(var(--glass-blur) * 1.5)) saturate(188%)',
     boxShadow:
-      '0 26px 64px -42px hsl(var(--primary) / 0.28), inset 0 1px 0 hsl(var(--nav-sheen) / 0.42), inset -1px 0 0 hsl(var(--nav-sheen) / 0.14)',
+      'inset 0 1px 0 hsl(var(--nav-sheen) / 0.14), inset -1px 0 0 hsl(var(--nav-border) / 0.08)',
     ...calcMenuWidthStyle(false),
     height: `calc(100% - ${marginTop}px)`,
     marginTop: `${marginTop}px`,
@@ -142,26 +141,17 @@ const extraStyle = computed((): CSSProperties => {
   const { extraWidth, show, width, zIndex } = props;
 
   return {
-    backgroundColor: 'hsl(var(--nav-surface-subtle) / 0.4)',
+    backgroundColor: 'hsl(var(--nav-surface-subtle) / 0.12)',
     backgroundImage:
-      'linear-gradient(180deg, hsl(var(--nav-surface-subtle) / 0.62) 0%, hsl(var(--glass-tint) / 0.34) 100%)',
+      'linear-gradient(180deg, hsl(var(--nav-surface-subtle) / 0.24) 0%, hsl(var(--glass-tint) / 0.12) 100%)',
     backdropFilter: 'blur(calc(var(--glass-blur) * 1.34)) saturate(182%)',
     boxShadow:
-      '0 26px 64px -42px hsl(var(--primary) / 0.24), inset 0 1px 0 hsl(var(--nav-sheen) / 0.34), inset -1px 0 0 hsl(var(--nav-sheen) / 0.1)',
+      'inset 0 1px 0 hsl(var(--nav-sheen) / 0.12), inset -1px 0 0 hsl(var(--nav-border) / 0.08)',
     left: `${width}px`,
     width: extraVisible.value && show ? `${extraWidth}px` : 0,
     zIndex,
   };
 });
-const shellAmbientStyle: CSSProperties = {
-  backgroundImage:
-    'radial-gradient(circle at left top, hsl(var(--nav-ambient) / 0.58) 0%, hsl(var(--nav-ambient) / 0.22) 20%, transparent 56%), radial-gradient(circle at 14% 0%, hsl(var(--nav-ambient-secondary) / 0.24) 0%, transparent 34%), linear-gradient(180deg, hsl(var(--nav-sheen) / 0.34), transparent 16%)',
-};
-const extraAmbientStyle: CSSProperties = {
-  backgroundImage:
-    'radial-gradient(circle at left top, hsl(var(--nav-ambient) / 0.42) 0%, hsl(var(--nav-ambient) / 0.16) 18%, transparent 44%), linear-gradient(180deg, hsl(var(--nav-sheen) / 0.28), transparent 16%)',
-};
-
 const extraTitleStyle = computed((): CSSProperties => {
   const { headerHeight } = props;
 
@@ -211,6 +201,10 @@ const toolStyle = computed((): CSSProperties => {
     top: `${Math.max(10, (props.headerHeight - 36) / 2)}px`,
   };
 });
+const pinToolStyle: CSSProperties = {
+  bottom: '16px',
+  left: '12px',
+};
 
 watchEffect(() => {
   extraVisible.value = props.fixedExtra ? true : extraVisible.value;
@@ -240,11 +234,7 @@ function calcMenuWidthStyle(isHiddenDom: boolean): CSSProperties {
   };
 }
 
-function handleMouseenter(e: MouseEvent) {
-  if (e?.offsetX < 10) {
-    return;
-  }
-
+function handleMouseenter() {
   // 未开启和未折叠状态不生效
   if (expandOnHover.value) {
     return;
@@ -271,6 +261,22 @@ function handleMouseleave() {
   collapse.value = true;
   extraVisible.value = false;
 }
+
+function handleFixedToggle(nextValue: boolean) {
+  if (nextValue) {
+    collapse.value = false;
+    extraVisible.value = true;
+    expandOnHovering.value = false;
+    return;
+  }
+
+  collapse.value = true;
+  extraVisible.value = false;
+  expandOnHovering.value = false;
+  if (props.isSidebarMixed) {
+    isLocked.value = false;
+  }
+}
 </script>
 
 <template>
@@ -289,11 +295,10 @@ function handleMouseleave() {
       },
     ]"
     :style="style"
-    class="fixed left-0 top-0 h-full overflow-hidden transition-all duration-150"
+  class="fixed left-0 top-0 h-full overflow-hidden transition-all duration-150"
     @mouseenter="handleMouseenter"
     @mouseleave="handleMouseleave"
   >
-    <div :style="shellAmbientStyle" class="pointer-events-none absolute inset-0"></div>
     <div
       v-if="slots.logo"
       :style="headerStyle"
@@ -306,12 +311,13 @@ function handleMouseleave() {
     </EasyFlowScrollbar>
 
     <div
-      v-if="!isSidebarMixed && !collapse && showFixedButton"
-      :style="toolStyle"
-      class="absolute right-3 z-20 flex"
+      v-if="!isSidebarMixed && showFixedButton"
+      :style="pinToolStyle"
+      class="absolute z-20 flex"
     >
       <SidebarFixedButton
         v-model:expand-on-hover="expandOnHover"
+        @toggle="handleFixedToggle"
       />
     </div>
     <div
@@ -320,7 +326,6 @@ function handleMouseleave() {
       :style="extraStyle"
       class="fixed top-0 h-full overflow-hidden transition-all duration-200"
     >
-      <div :style="extraAmbientStyle" class="pointer-events-none absolute inset-0"></div>
       <div
         v-if="!extraCollapse"
         :style="extraTitleStyle"
@@ -346,6 +351,7 @@ function handleMouseleave() {
         <SidebarFixedButton
           v-if="!extraCollapse"
           v-model:expand-on-hover="expandOnHover"
+          @toggle="handleFixedToggle"
         />
       </div>
     </div>
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/components/layout-tabbar.vue b/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/components/layout-tabbar.vue
index d1ce79b..616a5a9 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/components/layout-tabbar.vue
+++ b/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/components/layout-tabbar.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import type { CSSProperties } from 'vue';
-
-import { computed } from 'vue';
+import type {CSSProperties} from 'vue';
+import {computed} from 'vue';
 
 interface Props {
   /**
@@ -15,18 +14,13 @@ const props = withDefaults(defineProps<Props>(), {});
 const style = computed((): CSSProperties => {
   const { height } = props;
   return {
-    backgroundColor: 'hsl(var(--glass-tint) / 0.68)',
-    backgroundImage:
-      'linear-gradient(180deg, hsl(var(--nav-surface-subtle) / 0.92), hsl(var(--glass-tint) / 0.74))',
-    backdropFilter: 'blur(calc(var(--glass-blur) * 0.9)) saturate(155%)',
-    boxShadow: '0 18px 36px -30px hsl(var(--primary) / 0.12)',
+    backgroundColor: 'transparent',
+    backgroundImage: 'none',
+    backdropFilter: 'none',
+    boxShadow: 'none',
     height: `${height}px`,
   };
 });
-const ambientStyle: CSSProperties = {
-  backgroundImage:
-    'radial-gradient(circle at left top, hsl(var(--nav-ambient) / 0.24) 0%, transparent 38%), linear-gradient(180deg, hsl(var(--nav-sheen) / 0.14), transparent 62%)',
-};
 </script>
 
 <template>
@@ -34,7 +28,6 @@ const ambientStyle: CSSProperties = {
     :style="style"
     class="relative flex w-full overflow-hidden transition-all"
   >
-    <div :style="ambientStyle" class="pointer-events-none absolute inset-0"></div>
     <div class="relative z-10 flex w-full">
       <slot></slot>
     </div>
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-fixed-button.vue b/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-fixed-button.vue
index 47d7fcb..916eaaf 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-fixed-button.vue
+++ b/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-fixed-button.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
-import type { CSSProperties } from 'vue';
+import type {CSSProperties} from 'vue';
 
-import { Pin, PinOff } from '@easyflow-core/icons';
+import {Pin, PinOff} from '@easyflow-core/icons';
 
 const expandOnHover = defineModel<boolean>('expandOnHover');
+const emit = defineEmits<{
+  toggle: [value: boolean];
+}>();
 const buttonStyle: CSSProperties = {
   backgroundColor: 'hsl(var(--nav-tool-bg) / 0.92)',
   backgroundImage:
@@ -13,7 +16,9 @@ const buttonStyle: CSSProperties = {
 };
 
 function toggleFixed() {
-  expandOnHover.value = !expandOnHover.value;
+  const nextValue = !expandOnHover.value;
+  expandOnHover.value = nextValue;
+  emit('toggle', nextValue);
 }
 </script>
 
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/easyflow-layout.vue b/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/easyflow-layout.vue
index 1163554..274e3cb 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/easyflow-layout.vue
+++ b/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/easyflow-layout.vue
@@ -1,20 +1,19 @@
 <script setup lang="ts">
-import type { CSSProperties } from 'vue';
+import type {CSSProperties} from 'vue';
+import {computed, ref, watch} from 'vue';
 
-import type { EasyFlowLayoutProps } from './easyflow-layout';
-
-import { computed, ref, watch } from 'vue';
+import type {EasyFlowLayoutProps} from './easyflow-layout';
 
 import {
   SCROLL_FIXED_CLASS,
   useLayoutFooterStyle,
   useLayoutHeaderStyle,
 } from '@easyflow-core/composables';
-import { IconifyIcon } from '@easyflow-core/icons';
-import { EasyFlowIconButton } from '@easyflow-core/shadcn-ui';
-import { ELEMENT_ID_MAIN_CONTENT } from '@easyflow-core/shared/constants';
+import {IconifyIcon} from '@easyflow-core/icons';
+import {EasyFlowIconButton} from '@easyflow-core/shadcn-ui';
+import {ELEMENT_ID_MAIN_CONTENT} from '@easyflow-core/shared/constants';
 
-import { useMouse, useScroll, useThrottleFn } from '@vueuse/core';
+import {useMouse, useScroll, useThrottleFn} from '@vueuse/core';
 
 import {
   LayoutContent,
@@ -23,7 +22,7 @@ import {
   LayoutSidebar,
   LayoutTabbar,
 } from './components';
-import { useLayout } from './hooks/use-layout';
+import {useLayout} from './hooks/use-layout';
 
 interface Props extends EasyFlowLayoutProps {}
 
@@ -40,13 +39,13 @@ const headerToggleButtonStyle: CSSProperties = {
   border: '1px solid hsl(var(--glass-border) / 0.2)',
   boxShadow: '0 18px 36px -28px hsl(var(--primary) / 0.24)',
 };
-const layoutAmbientLeftStyle: CSSProperties = {
+const layoutFlowFieldStyle: CSSProperties = {
   backgroundImage:
-    'radial-gradient(circle at left top, hsl(var(--nav-ambient) / 0.34) 0%, hsl(var(--nav-ambient) / 0.14) 28%, transparent 72%)',
+    'radial-gradient(ellipse 14% 18% at 5% 3%, hsl(var(--nav-flow-core) / 0.34) 0%, hsl(var(--nav-flow-core) / 0.14) 34%, transparent 74%), radial-gradient(ellipse 48% 18% at 16% 8%, hsl(var(--nav-flow-core) / 0.12) 0%, transparent 68%), radial-gradient(ellipse 68% 34% at 28% 18%, hsl(var(--nav-flow-secondary) / 0.1) 0%, transparent 70%), linear-gradient(122deg, hsl(var(--nav-flow-trace) / 0.13) 0%, hsl(var(--nav-flow-trace) / 0.1) 8%, hsl(var(--nav-flow-core) / 0.08) 14%, transparent 24%, transparent 42%, hsl(var(--nav-flow-secondary) / 0.06) 58%, hsl(var(--nav-flow-trace) / 0.04) 70%, transparent 88%), radial-gradient(ellipse 84% 34% at 34% 26%, hsl(var(--nav-flow-core) / 0.08) 0%, transparent 72%), radial-gradient(ellipse 74% 30% at 48% 38%, hsl(var(--nav-flow-secondary) / 0.06) 0%, transparent 74%), radial-gradient(ellipse 62% 26% at 60% 48%, hsl(var(--nav-flow-accent) / 0.04) 0%, transparent 76%)',
 };
-const layoutAmbientRightStyle: CSSProperties = {
+const layoutFlowGlowStyle: CSSProperties = {
   backgroundImage:
-    'radial-gradient(circle at left top, hsl(var(--nav-ambient-secondary) / 0.14) 0%, transparent 72%)',
+    'radial-gradient(ellipse 18% 20% at 6% 4%, hsl(var(--nav-flow-core) / 0.18) 0%, transparent 74%), radial-gradient(ellipse 72% 28% at 26% 16%, hsl(var(--nav-flow-trace) / 0.08) 0%, transparent 70%), radial-gradient(ellipse 68% 26% at 44% 28%, hsl(var(--nav-flow-secondary) / 0.05) 0%, transparent 72%), radial-gradient(ellipse 58% 22% at 62% 42%, hsl(var(--nav-flow-trace) / 0.04) 0%, transparent 74%)',
 };
 
 const props = withDefaults(defineProps<Props>(), {
@@ -335,6 +334,11 @@ const headerZIndex = computed(() => {
 const headerWrapperStyle = computed((): CSSProperties => {
   const fixed = headerFixed.value;
   return {
+    backdropFilter: 'blur(calc(var(--glass-blur) * 1.1)) saturate(158%)',
+    backgroundColor: 'hsl(var(--glass-tint) / 0.18)',
+    backgroundImage:
+      'linear-gradient(180deg, hsl(var(--nav-surface) / 0.22), hsl(var(--glass-tint) / 0.08))',
+    boxShadow: 'inset 0 -1px 0 hsl(var(--nav-border) / 0.05)',
     height: isFullContent.value ? '0' : `${headerWrapperHeight.value}px`,
     left: isMixedNav.value ? 0 : mainStyle.value.sidebarAndExtraWidth,
     position: fixed ? 'fixed' : 'static',
@@ -501,8 +505,8 @@ const idMainContent = ELEMENT_ID_MAIN_CONTENT;
 <template>
   <div class="relative flex min-h-full w-full">
     <div class="pointer-events-none absolute inset-0 overflow-hidden">
-      <div :style="layoutAmbientLeftStyle" class="absolute -left-16 top-0 h-[320px] w-[320px] rounded-full blur-3xl"></div>
-      <div :style="layoutAmbientRightStyle" class="absolute right-[-120px] top-[-40px] h-[260px] w-[320px] rounded-full blur-3xl"></div>
+      <div :style="layoutFlowFieldStyle" class="absolute inset-0"></div>
+      <div :style="layoutFlowGlowStyle" class="absolute inset-0 blur-3xl"></div>
     </div>
     <LayoutSidebar
       v-if="sidebarEnableState"
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb.vue b/easyflow-ui-admin/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb.vue
index 1ff3124..f54f90a 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb.vue
+++ b/easyflow-ui-admin/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import type { BreadcrumbProps } from './types';
+import type {BreadcrumbProps} from './types';
 
-import { ChevronDown } from '@easyflow-core/icons';
+import {ChevronDown} from '@easyflow-core/icons';
 
 import {
   Breadcrumb,
@@ -15,7 +15,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '../../ui';
-import { EasyFlowIcon } from '../icon';
+import {EasyFlowIcon} from '../icon';
 
 interface Props extends BreadcrumbProps {}
 
@@ -45,7 +45,11 @@ function handleClick(path?: string) {
             <div v-if="item.items?.length ?? 0 > 0">
               <DropdownMenu>
                 <DropdownMenuTrigger class="easyflow-breadcrumb__link">
-                  <EasyFlowIcon v-if="showIcon" :icon="item.icon" class="size-4" />
+                  <EasyFlowIcon
+                    v-if="showIcon"
+                    :icon="item.icon"
+                    class="size-4"
+                  />
                   <span class="max-w-[180px] truncate">{{ item.title }}</span>
                   <ChevronDown class="size-3.5" />
                 </DropdownMenuTrigger>
@@ -77,10 +81,7 @@ function handleClick(path?: string) {
                 <span class="max-w-[180px] truncate">{{ item.title }}</span>
               </div>
             </BreadcrumbLink>
-            <BreadcrumbPage
-              v-else
-              class="easyflow-breadcrumb__current"
-            >
+            <BreadcrumbPage v-else class="easyflow-breadcrumb__current">
               <div class="flex items-center">
                 <EasyFlowIcon
                   v-if="showIcon"
@@ -130,23 +131,55 @@ function handleClick(path?: string) {
 }
 
 .easyflow-breadcrumb__current {
+  position: relative;
   display: inline-flex;
   align-items: center;
   gap: 4px;
   min-width: 0;
-  padding: 4px 10px;
+  padding: 4px 8px 6px;
   color: hsl(var(--breadcrumb-current));
   font-weight: 600;
   letter-spacing: 0.01em;
+  isolation: isolate;
+}
+
+.easyflow-breadcrumb__current::before {
+  position: absolute;
+  inset: -8px -10px -2px;
+  z-index: -1;
+  content: '';
   background: linear-gradient(
-    135deg,
-    hsl(var(--nav-item-active) / 0.88),
-    hsl(var(--glass-tint) / 0.92)
+    180deg,
+    hsl(var(--nav-item-active) / 0.36) 0%,
+    hsl(var(--nav-item-active) / 0.18) 42%,
+    hsl(var(--glass-tint) / 0.08) 82%,
+    transparent 100%
   );
-  border-radius: 999px;
+  border-radius: 14px 14px 10px 10px;
   box-shadow:
-    inset 0 1px 0 hsl(var(--nav-sheen) / 0.42),
-    0 10px 22px -18px hsl(var(--primary) / 0.22);
+    inset 1px 0 0 hsl(var(--nav-border) / 0.54),
+    inset -1px 0 0 hsl(var(--nav-border) / 0.54),
+    inset 0 1px 0 hsl(var(--nav-sheen) / 0.68),
+    0 10px 22px -22px hsl(var(--primary) / 0.2);
+}
+
+.easyflow-breadcrumb__current::after {
+  position: absolute;
+  right: -6px;
+  bottom: 0;
+  left: -6px;
+  height: 1px;
+  z-index: -1;
+  content: '';
+  background: linear-gradient(
+    90deg,
+    transparent,
+    hsl(var(--nav-item-active) / 0.2) 22%,
+    hsl(var(--nav-item-active) / 0.26) 50%,
+    hsl(var(--nav-item-active) / 0.2) 78%,
+    transparent
+  );
+  opacity: 0.72;
 }
 
 .easyflow-breadcrumb__separator {
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue b/easyflow-ui-admin/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
index fe5927c..01ebc4a 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
+++ b/easyflow-ui-admin/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { TabDefinition } from '@easyflow-core/typings';
+import type {TabDefinition} from '@easyflow-core/typings';
 
-import type { TabConfig, TabsProps } from '../../types';
+import type {TabConfig, TabsProps} from '../../types';
 
-import { computed, ref } from 'vue';
+import {computed, ref} from 'vue';
 
-import { Pin, X } from '@easyflow-core/icons';
-import { EasyFlowContextMenu, EasyFlowIcon } from '@easyflow-core/shadcn-ui';
+import {Pin, X} from '@easyflow-core/icons';
+import {EasyFlowContextMenu, EasyFlowIcon} from '@easyflow-core/shadcn-ui';
 
 interface Props extends TabsProps {}
 
@@ -110,7 +110,8 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
               class="tabs-chrome__background absolute inset-0 z-[-1] px-0 py-0 transition-opacity duration-150"
             >
               <div
-                class="tabs-chrome__background-content h-[calc(100%-8px)] rounded-2xl bg-transparent transition-all duration-150 group-[.is-active]:bg-[hsl(var(--glass-tint))/0.74] group-[.is-active]:shadow-[0_16px_28px_-24px_hsl(var(--foreground)/0.34)]"
+                :class="{ 'is-active': tab.key === active }"
+                class="tabs-chrome__background-content h-[calc(100%-8px)] rounded-2xl bg-transparent transition-all duration-150"
               ></div>
             </div>
 
@@ -141,7 +142,9 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
                 class="mr-2 flex size-[15px] items-center overflow-hidden"
               />
 
-              <span class="flex-1 overflow-hidden whitespace-nowrap text-[13px]">
+              <span
+                class="flex-1 overflow-hidden whitespace-nowrap text-[13px]"
+              >
                 {{ tab.title }}
               </span>
             </div>
@@ -154,6 +157,26 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
 
 <style scoped>
 .tabs-chrome {
+  &__background-content {
+    position: relative;
+    overflow: visible;
+  }
+
+  &__background-content.is-active::before {
+    position: absolute;
+    inset: 1px -5px -1px;
+    content: '';
+    background: hsl(var(--background));
+    border-radius: 15px 15px 0 0;
+    border-top: 2px solid hsl(var(--primary) / 0.38);
+    border-right: 1px solid hsl(var(--primary) / 0.16);
+    border-left: 1px solid hsl(var(--primary) / 0.16);
+  }
+
+  &__background-content.is-active::after {
+    display: none;
+  }
+
   &__item:not(.dragging) {
     @apply cursor-pointer;
 
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/tabs-ui/src/tabs-view.vue b/easyflow-ui-admin/packages/@core/ui-kit/tabs-ui/src/tabs-view.vue
index 4abf3bd..93bf567 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/tabs-ui/src/tabs-view.vue
+++ b/easyflow-ui-admin/packages/@core/ui-kit/tabs-ui/src/tabs-view.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { TabsEmits, TabsProps } from './types';
+import type {TabsEmits, TabsProps} from './types';
 
-import { useForwardPropsEmits } from '@easyflow-core/composables';
-import { ChevronLeft, ChevronRight } from '@easyflow-core/icons';
-import { EasyFlowScrollbar } from '@easyflow-core/shadcn-ui';
+import {useForwardPropsEmits} from '@easyflow-core/composables';
+import {ChevronLeft, ChevronRight} from '@easyflow-core/icons';
+import {EasyFlowScrollbar} from '@easyflow-core/shadcn-ui';
 
-import { Tabs, TabsChrome } from './components';
-import { useTabsDrag } from './use-tabs-drag';
-import { useTabsViewScroll } from './use-tabs-view-scroll';
+import {Tabs, TabsChrome} from './components';
+import {useTabsDrag} from './use-tabs-drag';
+import {useTabsViewScroll} from './use-tabs-view-scroll';
 
 interface Props extends TabsProps {}
 
@@ -56,7 +56,7 @@ useTabsDrag(props, emit);
         'cursor-pointer text-[hsl(var(--nav-item-muted-foreground))] hover:bg-[hsl(var(--surface-contrast-soft))] hover:text-foreground': !scrollIsAtLeft,
         'pointer-events-none opacity-30': scrollIsAtLeft,
       }"
-      class="mx-1 my-1 flex items-center rounded-2xl border border-transparent bg-[hsl(var(--glass-tint))/0.44] px-2 shadow-[0_10px_24px_-24px_hsl(var(--foreground)/0.3)] backdrop-blur-xl transition-[background-color,color,transform]"
+      class="mx-1 my-1 flex items-center rounded-2xl border border-transparent bg-[hsl(var(--glass-tint))/0.18] px-2 shadow-none backdrop-blur-xl transition-[background-color,color,transform]"
       @click="scrollDirection('left')"
     >
       <ChevronLeft class="size-4 h-full" />
@@ -97,7 +97,7 @@ useTabsDrag(props, emit);
         'cursor-pointer text-[hsl(var(--nav-item-muted-foreground))] hover:bg-[hsl(var(--surface-contrast-soft))] hover:text-foreground': !scrollIsAtRight,
         'pointer-events-none opacity-30': scrollIsAtRight,
       }"
-      class="mx-1 my-1 flex items-center rounded-2xl border border-transparent bg-[hsl(var(--glass-tint))/0.44] px-2 shadow-[0_10px_24px_-24px_hsl(var(--foreground)/0.3)] backdrop-blur-xl transition-[background-color,color,transform]"
+      class="mx-1 my-1 flex items-center rounded-2xl border border-transparent bg-[hsl(var(--glass-tint))/0.18] px-2 shadow-none backdrop-blur-xl transition-[background-color,color,transform]"
       @click="scrollDirection('right')"
     >
       <ChevronRight class="size-4 h-full" />
diff --git a/easyflow-ui-admin/packages/effects/layouts/src/basic/header/header.vue b/easyflow-ui-admin/packages/effects/layouts/src/basic/header/header.vue
index e9ec1d7..7293446 100644
--- a/easyflow-ui-admin/packages/effects/layouts/src/basic/header/header.vue
+++ b/easyflow-ui-admin/packages/effects/layouts/src/basic/header/header.vue
@@ -1,14 +1,13 @@
 <script lang="ts" setup>
-import type { CSSProperties } from 'vue';
+import type {CSSProperties} from 'vue';
+import {computed, useSlots} from 'vue';
 
-import { computed, useSlots } from 'vue';
+import {useRefresh} from '@easyflow/hooks';
+import {RotateCw} from '@easyflow/icons';
+import {preferences, usePreferences} from '@easyflow/preferences';
+import {useAccessStore} from '@easyflow/stores';
 
-import { useRefresh } from '@easyflow/hooks';
-import { RotateCw } from '@easyflow/icons';
-import { preferences, usePreferences } from '@easyflow/preferences';
-import { useAccessStore } from '@easyflow/stores';
-
-import { EasyFlowFullScreen, EasyFlowIconButton } from '@easyflow-core/shadcn-ui';
+import {EasyFlowFullScreen, EasyFlowIconButton} from '@easyflow-core/shadcn-ui';
 
 import {
   GlobalSearch,
@@ -45,17 +44,6 @@ const toolbarButtonStyle: CSSProperties = {
   border: '1px solid transparent',
   boxShadow: '0 18px 36px -28px hsl(var(--primary) / 0.24)',
 };
-const breadcrumbShellStyle: CSSProperties = {
-  backgroundColor: 'hsl(var(--glass-tint) / 0.66)',
-  backgroundImage:
-    'linear-gradient(180deg, hsl(var(--glass-tint) / 0.8), hsl(var(--nav-surface-subtle) / 0.58))',
-  border: '1px solid transparent',
-  boxShadow:
-    'inset 0 1px 0 hsl(var(--nav-sheen) / 0.42), 0 18px 36px -30px hsl(var(--primary) / 0.14)',
-};
-const rightShellStyle: CSSProperties = {
-  backgroundColor: 'hsl(var(--glass-tint) / 0.28)',
-};
 
 const accessStore = useAccessStore();
 const { globalSearchShortcutKey, preferencesButtonPosition } = usePreferences();
@@ -144,8 +132,7 @@ function clearPreferencesAndLogout() {
 <template>
   <div
     v-if="$slots.breadcrumb"
-    :style="breadcrumbShellStyle"
-    class="hidden min-w-0 max-w-[min(520px,46vw)] items-center rounded-full px-3 py-1.5 lg:flex"
+    class="hidden min-w-0 max-w-[min(520px,46vw)] items-center px-2 py-1 lg:flex"
   >
     <slot name="breadcrumb"></slot>
   </div>
@@ -164,11 +151,11 @@ function clearPreferencesAndLogout() {
   </template>
   <div
     :class="`menu-align-${preferences.header.menuAlign}`"
-    class="flex h-full min-w-0 flex-1 items-center px-3"
+    class="flex h-full min-w-0 flex-1 items-center px-2"
   >
     <slot name="menu"></slot>
   </div>
-  <div :style="rightShellStyle" class="flex h-full min-w-0 flex-shrink-0 items-center gap-1 rounded-full px-2 py-1 pl-2">
+  <div class="flex h-full min-w-0 flex-shrink-0 items-center gap-1 px-1 py-1">
     <template v-for="slot in rightSlots" :key="slot.name">
       <slot :name="slot.name">
         <template v-if="slot.name === 'global-search'">