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;

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>