perf: 重构并美化整体UI

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;