perf: 重构并美化整体UI

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>