style: 代码格式化和样式

packages/@core/base/design/src/css/global.css

@@ -16,11 +16,11 @@
   html {
     @apply text-foreground font-sans text-[100%];
 
-    /* 浅色主题 - 添加线性渐变背景 */
-    background: linear-gradient(135deg, #FFFCF5 0%, #FFF8ED 50%, #FFF0D4 100%);
-
     font-variation-settings: normal;
     line-height: 1.15;
+
+    /* 浅色主题 - 添加线性渐变背景 */
+    background: linear-gradient(135deg, #fffcf5 0%, #fff8ed 50%, #fff0d4 100%);
     text-size-adjust: 100%;
     font-synthesis-weight: none;
     scroll-behavior: smooth;
@@ -159,65 +159,70 @@
   }
 
   /* ============= 毛玻璃卡片全局样式覆盖 ============= */
-  
+
   /* 统一卡片毛玻璃效果 - 覆盖所有卡片类型（包括 scoped 样式） */
   .bg-card,
   .ant-card,
   div.ant-card,
   .device-card.ant-card {
+    position: relative !important;
     background: rgb(var(--glass-surface)) !important;
-    backdrop-filter: blur(24px) !important;
-    -webkit-backdrop-filter: blur(24px) !important;
     border: 1px solid rgb(var(--glass-border)) !important;
     border-radius: 2rem !important;
     box-shadow: var(--glass-shadow) !important;
+    backdrop-filter: blur(24px) !important;
+    backdrop-filter: blur(24px) !important;
     transition: all 0.3s ease-out !important;
-    position: relative !important;
   }
-  
+
   /* 统一顶部高光效果 */
   .bg-card::before,
   .ant-card::before,
   div.ant-card::before,
   .device-card.ant-card::before {
-    content: '' !important;
     position: absolute !important;
     top: 0 !important;
-    left: 0 !important;
     right: 0 !important;
-    height: 1px !important;
-    background: linear-gradient(90deg, transparent, white, transparent) !important;
-    opacity: 0.7 !important;
-    pointer-events: none !important;
-    border-radius: 2rem 2rem 0 0 !important;
+    left: 0 !important;
     z-index: 1 !important;
+    height: 1px !important;
+    pointer-events: none !important;
+    content: '' !important;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      white,
+      transparent
+    ) !important;
+    border-radius: 2rem 2rem 0 0 !important;
+    opacity: 0.7 !important;
   }
-  
+
   /* 统一悬浮效果 */
   .bg-card:hover,
   .ant-card:hover,
   div.ant-card:hover,
   .device-card.ant-card:hover {
-    transform: translateY(-4px) !important;
     box-shadow: var(--glass-shadow-hover) !important;
+    transform: translateY(-4px) !important;
   }
-  
+
   /* Card 子元素样式调整 */
   .ant-card-body {
+    position: relative !important;
+    z-index: 2 !important;
     padding: 24px !important;
-    position: relative !important;
-    z-index: 2 !important;
   }
-  
+
   .ant-card-head {
-    border-bottom: 1px solid rgb(var(--glass-border)) !important;
-    background: transparent !important;
     position: relative !important;
     z-index: 2 !important;
+    background: transparent !important;
+    border-bottom: 1px solid rgb(var(--glass-border)) !important;
   }
 
   /* ============= VxeTable/VxeGrid 全局毛玻璃样式覆盖 ============= */
-  
+
   /* VxeTable 主容器 */
   .vxe-table,
   .vxe-grid,
@@ -225,69 +230,69 @@
   div.vxe-grid {
     background: transparent !important;
   }
-  
+
   /* VxeTable 表格容器 */
   .vxe-table--main-wrapper,
   div.vxe-table--main-wrapper {
+    overflow: hidden !important;
     background: rgb(var(--glass-surface)) !important;
-    backdrop-filter: blur(24px) !important;
-    -webkit-backdrop-filter: blur(24px) !important;
     border: 1px solid rgb(var(--glass-border)) !important;
     border-radius: 1.5rem !important;
-    overflow: hidden !important;
+    backdrop-filter: blur(24px) !important;
+    backdrop-filter: blur(24px) !important;
   }
-  
+
   /* 表头样式 */
   .vxe-table--header-wrapper,
   div.vxe-table--header-wrapper {
-    background: rgba(255, 255, 255, 0.3) !important;
+    background: rgb(255 255 255 / 30%) !important;
+    backdrop-filter: blur(16px) !important;
     backdrop-filter: blur(16px) !important;
-    -webkit-backdrop-filter: blur(16px) !important;
   }
-  
+
   .vxe-header--column,
   th.vxe-header--column {
     background: transparent !important;
     border-bottom: 1px solid rgb(var(--glass-border)) !important;
   }
-  
+
   /* 表格主体 */
   .vxe-table--body-wrapper,
   div.vxe-table--body-wrapper {
     background: transparent !important;
   }
-  
+
   .vxe-body--row,
   tr.vxe-body--row {
     background: transparent !important;
   }
-  
+
   .vxe-body--row:hover,
   tr.vxe-body--row:hover {
-    background: rgba(255, 255, 255, 0.2) !important;
+    background: rgb(255 255 255 / 20%) !important;
   }
-  
+
   /* 表格边框 */
   .vxe-table--border-line {
     border-color: rgb(var(--glass-border)) !important;
   }
-  
+
   .vxe-body--column,
   .vxe-header--column,
   .vxe-footer--column,
   td.vxe-body--column,
   th.vxe-header--column,
   td.vxe-footer--column {
-    border-color: rgba(255, 255, 255, 0.1) !important;
+    border-color: rgb(255 255 255 / 10%) !important;
   }
-  
+
   /* 工具栏 */
   .vxe-toolbar,
   div.vxe-toolbar {
     background: transparent !important;
     border-bottom: 1px solid rgb(var(--glass-border)) !important;
   }
-  
+
   /* 分页器 */
   .vxe-pager,
   div.vxe-pager {
@@ -296,49 +301,49 @@
   }
 
   /* ============= 毛玻璃卡片工具类 ============= */
-  
+
   /* 玻璃表面背景 + 毛玻璃模糊 */
   .glass-card {
     background: rgb(var(--glass-surface));
     backdrop-filter: blur(24px);
-    -webkit-backdrop-filter: blur(24px);
+    backdrop-filter: blur(24px);
   }
-  
+
   /* 玻璃边框 */
   .glass-border {
     border: 1px solid rgb(var(--glass-border));
   }
-  
+
   /* 玻璃阴影 */
   .glass-shadow {
     box-shadow: var(--glass-shadow);
   }
-  
+
   /* 玻璃悬浮阴影 */
   .glass-shadow-hover {
     box-shadow: var(--glass-shadow-hover);
   }
-  
+
   /* 软阴影 */
   .shadow-soft {
     box-shadow: var(--shadow-soft);
   }
-  
+
   /* 顶部高光效果 - 使用伪元素 */
   .glass-highlight {
     position: relative;
   }
-  
+
   .glass-highlight::before {
-    content: '';
     position: absolute;
     top: 0;
-    left: 0;
     right: 0;
+    left: 0;
     height: 1px;
+    pointer-events: none;
+    content: '';
     background: linear-gradient(90deg, transparent, white, transparent);
     opacity: 0.7;
-    pointer-events: none;
   }
 }
 

packages/@core/base/design/src/design-tokens/dark.css

@@ -108,13 +108,13 @@
   --tabbar: 222.34deg 10.43% 12.27%;
 
   /* ============= 毛玻璃卡片系统 (深色模式适配) ============= */
-  
+
   /* 深色模式毛玻璃 - 更低的透明度 */
   --glass-surface: 255 255 255 / 0.08;
   --glass-border: 255 255 255 / 0.1;
-  --glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.3);
-  --glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 0.4);
-  --shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 0.2);
+  --glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 30%);
+  --glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 40%);
+  --shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 20%);
 
   color-scheme: dark;
 }
@@ -148,9 +148,9 @@
   /* 毛玻璃卡片系统 */
   --glass-surface: 255 255 255 / 0.08;
   --glass-border: 255 255 255 / 0.1;
-  --glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.3);
-  --glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 0.4);
-  --shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 0.2);
+  --glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 30%);
+  --glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 40%);
+  --shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 20%);
 }
 
 .dark[data-theme='pink'],
@@ -182,9 +182,9 @@
   /* 毛玻璃卡片系统 */
   --glass-surface: 255 255 255 / 0.08;
   --glass-border: 255 255 255 / 0.1;
-  --glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.3);
-  --glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 0.4);
-  --shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 0.2);
+  --glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 30%);
+  --glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 40%);
+  --shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 20%);
 }
 
 .dark[data-theme='rose'],
@@ -216,9 +216,9 @@
   /* 毛玻璃卡片系统 */
   --glass-surface: 255 255 255 / 0.08;
   --glass-border: 255 255 255 / 0.1;
-  --glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.3);
-  --glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 0.4);
-  --shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 0.2);
+  --glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 30%);
+  --glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 40%);
+  --shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 20%);
 }
 
 .dark[data-theme='sky-blue'],
@@ -250,9 +250,9 @@
   /* 毛玻璃卡片系统 */
   --glass-surface: 255 255 255 / 0.08;
   --glass-border: 255 255 255 / 0.1;
-  --glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.3);
-  --glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 0.4);
-  --shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 0.2);
+  --glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 30%);
+  --glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 40%);
+  --shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 20%);
 }
 
 .dark[data-theme='deep-blue'],
@@ -284,9 +284,9 @@
   /* 毛玻璃卡片系统 */
   --glass-surface: 255 255 255 / 0.08;
   --glass-border: 255 255 255 / 0.1;
-  --glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.3);
-  --glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 0.4);
-  --shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 0.2);
+  --glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 30%);
+  --glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 40%);
+  --shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 20%);
 }
 
 .dark[data-theme='green'],
@@ -318,9 +318,9 @@
   /* 毛玻璃卡片系统 */
   --glass-surface: 255 255 255 / 0.08;
   --glass-border: 255 255 255 / 0.1;
-  --glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.3);
-  --glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 0.4);
-  --shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 0.2);
+  --glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 30%);
+  --glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 40%);
+  --shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 20%);
 }
 
 .dark[data-theme='deep-green'],
@@ -352,9 +352,9 @@
   /* 毛玻璃卡片系统 */
   --glass-surface: 255 255 255 / 0.08;
   --glass-border: 255 255 255 / 0.1;
-  --glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.3);
-  --glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 0.4);
-  --shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 0.2);
+  --glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 30%);
+  --glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 40%);
+  --shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 20%);
 }
 
 .dark[data-theme='orange'],
@@ -386,9 +386,9 @@
   /* 毛玻璃卡片系统 */
   --glass-surface: 255 255 255 / 0.08;
   --glass-border: 255 255 255 / 0.1;
-  --glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.3);
-  --glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 0.4);
-  --shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 0.2);
+  --glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 30%);
+  --glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 40%);
+  --shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 20%);
 }
 
 .dark[data-theme='yellow'],
@@ -420,9 +420,9 @@
   /* 毛玻璃卡片系统 */
   --glass-surface: 255 255 255 / 0.08;
   --glass-border: 255 255 255 / 0.1;
-  --glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.3);
-  --glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 0.4);
-  --shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 0.2);
+  --glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 30%);
+  --glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 40%);
+  --shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 20%);
 }
 
 .dark[data-theme='zinc'],
@@ -454,9 +454,9 @@
   /* 毛玻璃卡片系统 */
   --glass-surface: 255 255 255 / 0.08;
   --glass-border: 255 255 255 / 0.1;
-  --glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.3);
-  --glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 0.4);
-  --shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 0.2);
+  --glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 30%);
+  --glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 40%);
+  --shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 20%);
 }
 
 .dark[data-theme='neutral'],
@@ -488,9 +488,9 @@
   /* 毛玻璃卡片系统 */
   --glass-surface: 255 255 255 / 0.08;
   --glass-border: 255 255 255 / 0.1;
-  --glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.3);
-  --glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 0.4);
-  --shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 0.2);
+  --glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 30%);
+  --glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 40%);
+  --shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 20%);
 }
 
 .dark[data-theme='slate'],
@@ -522,9 +522,9 @@
   /* 毛玻璃卡片系统 */
   --glass-surface: 255 255 255 / 0.08;
   --glass-border: 255 255 255 / 0.1;
-  --glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.3);
-  --glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 0.4);
-  --shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 0.2);
+  --glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 30%);
+  --glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 40%);
+  --shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 20%);
 }
 
 .dark[data-theme='gray'],
@@ -556,7 +556,7 @@
   /* 毛玻璃卡片系统 */
   --glass-surface: 255 255 255 / 0.08;
   --glass-border: 255 255 255 / 0.1;
-  --glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.3);
-  --glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 0.4);
-  --shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 0.2);
+  --glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 30%);
+  --glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 40%);
+  --shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 20%);
 }

packages/@core/base/design/src/design-tokens/default.css

@@ -88,21 +88,21 @@
   /* ============= custom ============= */
 
   /* ============= 毛玻璃卡片系统 ============= */
-  
+
   /* 玻璃表面 - 45% 透明度白色 */
   --glass-surface: 255 255 255 / 0.45;
-  
+
   /* 玻璃边框 - 60% 透明度白色 */
   --glass-border: 255 255 255 / 0.6;
-  
+
   /* 玻璃阴影 */
-  --glass-shadow: 0 8px 32px 0 rgb(31 38 135 / 0.05);
-  
+  --glass-shadow: 0 8px 32px 0 rgb(31 38 135 / 5%);
+
   /* 玻璃悬浮阴影 */
-  --glass-shadow-hover: 0 16px 48px 0 rgb(31 38 135 / 0.08);
-  
+  --glass-shadow-hover: 0 16px 48px 0 rgb(31 38 135 / 8%);
+
   /* 软阴影 (通用) */
-  --shadow-soft: 0 4px 16px 0 rgb(31 38 135 / 0.03);
+  --shadow-soft: 0 4px 16px 0 rgb(31 38 135 / 3%);
 
   /* 遮罩颜色 */
   --overlay: 0 0% 0% / 45%;
@@ -114,15 +114,15 @@
   /* =============component & UI============= */
 
   /* menu */
-  --sidebar: 37 40% 98%;  /* 微妙橙色调 - 浅奶黄色 */
-  --sidebar-deep: 37 45% 97%;  /* 微妙橙色调 - 稍深 */
+  --sidebar: 37 40% 98%; /* 微妙橙色调 - 浅奶黄色 */
+  --sidebar-deep: 37 45% 97%; /* 微妙橙色调 - 稍深 */
   --menu: var(--sidebar);
 
   /* header */
-  --header: 37 40% 98%;  /* 微妙橙色调 - 与侧边栏一致 */
+  --header: 37 40% 98%; /* 微妙橙色调 - 与侧边栏一致 */
 
   /* tabbar */
-  --tabbar: 37 40% 98%;  /* 微妙橙色调 - 与侧边栏、顶部栏一致 */
+  --tabbar: 37 40% 98%; /* 微妙橙色调 - 与侧边栏、顶部栏一致 */
 
   accent-color: var(--primary);
   color-scheme: light;