diff --git a/package.json b/package.json
index 6ce5c683..f9add7f1 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,7 @@
     "plop": "^4.0.1",
     "postcss": "^8.4.40",
     "postcss-html": "^1.7.0",
+    "postcss-nested": "^6.2.0",
     "sass": "^1.77.8",
     "simple-git-hooks": "^2.11.1",
     "stylelint": "^16.8.1",
diff --git a/plop-templates/component/index.hbs b/plop-templates/component/index.hbs
index 69f75951..1d62a025 100644
--- a/plop-templates/component/index.hbs
+++ b/plop-templates/component/index.hbs
@@ -12,6 +12,6 @@ defineOptions({
   </div>
 </template>
 
-<style lang="scss" scoped>
-// 样式
+<style scoped>
+/* 样式 */
 </style>
diff --git a/plop-templates/page/index.hbs b/plop-templates/page/index.hbs
index e9223826..c5fb0215 100644
--- a/plop-templates/page/index.hbs
+++ b/plop-templates/page/index.hbs
@@ -10,6 +10,6 @@ defineOptions({
   </div>
 </template>
 
-<style lang="scss" scoped>
-// 样式
+<style scoped>
+/* 样式 */
 </style>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index eb4c9346..eb8c36b8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -147,6 +147,9 @@ importers:
       postcss-html:
         specifier: ^1.7.0
         version: 1.7.0
+      postcss-nested:
+        specifier: ^6.2.0
+        version: 6.2.0(postcss@8.4.40)
       sass:
         specifier: ^1.77.8
         version: 1.77.8
@@ -4357,6 +4360,12 @@ packages:
   postcss-media-query-parser@0.2.3:
     resolution: {integrity: sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==}
 
+  postcss-nested@6.2.0:
+    resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.2.14
+
   postcss-prefix-selector@1.16.0:
     resolution: {integrity: sha512-rdVMIi7Q4B0XbXqNUEI+Z4E+pueiu/CS5E6vRCQommzdQ/sgsS4dK42U7GX8oJR+TJOtT+Qv3GkNo6iijUMp3Q==}
     peerDependencies:
@@ -10180,6 +10189,11 @@ snapshots:
 
   postcss-media-query-parser@0.2.3: {}
 
+  postcss-nested@6.2.0(postcss@8.4.40):
+    dependencies:
+      postcss: 8.4.40
+      postcss-selector-parser: 6.1.1
+
   postcss-prefix-selector@1.16.0(postcss@5.2.18):
     dependencies:
       postcss: 5.2.18
diff --git a/postcss.config.js b/postcss.config.js
index b6dc0349..f20659c1 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,5 +1,6 @@
 export default {
   plugins: {
-    autoprefixer: {},
+    'autoprefixer': {},
+    'postcss-nested': {},
   },
 }
diff --git a/src/assets/styles/globals.scss b/src/assets/styles/globals.css
similarity index 78%
rename from src/assets/styles/globals.scss
rename to src/assets/styles/globals.css
index faa1feba..56680c57 100644
--- a/src/assets/styles/globals.scss
+++ b/src/assets/styles/globals.css
@@ -1,22 +1,27 @@
-// 页面布局 CSS 变量
+/* 页面布局 CSS 变量 */
 :root {
-  // 头部高度
+  /* 头部高度 */
   --g-header-height: 60px;
-  // 侧边栏宽度
+
+  /* 侧边栏宽度 */
   --g-main-sidebar-width: 80px;
   --g-sub-sidebar-width: 220px;
   --g-sub-sidebar-collapse-width: 64px;
-  // 侧边栏Logo高度
+
+  /* 侧边栏Logo高度 */
   --g-sidebar-logo-height: 50px;
-  // 顶栏高度
+
+  /* 顶栏高度 */
   --g-topbar-height: 50px;
-  // 窗口高度（仅在窗口预览时使用）
+
+  /* 窗口高度（仅在窗口预览时使用） */
   --g-window-height: 800px;
-  // 窗口预览缩放系数
+
+  /* 窗口预览缩放系数 */
   --g-window-perview-scale: 0.5;
 }
 
-// 明暗模式 CSS 变量
+/* 明暗模式 CSS 变量 */
 /* stylelint-disable-next-line no-duplicate-selectors */
 :root {
   --g-box-shadow-color: rgb(0 0 0 / 12%);
@@ -89,7 +94,7 @@ body {
   box-sizing: inherit;
 }
 
-// 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width]
+/* 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width] */
 [data-fixed-calc-width] {
   position: fixed;
   right: 0;
@@ -98,7 +103,7 @@ body {
   transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
 }
 
-// textarea 字体跟随系统
+/* textarea 字体跟随系统 */
 textarea {
   font-family: inherit;
 }
@@ -106,12 +111,12 @@ textarea {
 /* Overrides Floating Vue */
 .v-popper--theme-dropdown,
 .v-popper--theme-tooltip {
-  --at-apply: inline-flex;
+  --uno: inline-flex;
 }
 
 .v-popper--theme-dropdown .v-popper__inner,
 .v-popper--theme-tooltip .v-popper__inner {
-  --at-apply: bg-white dark-bg-stone-8 text-dark dark-text-white rounded shadow ring-1 ring-gray-200 dark-ring-gray-800 border border-solid border-stone/20 text-xs font-normal;
+  --uno: bg-white dark-bg-stone-8 text-dark dark-text-white rounded shadow ring-1 ring-gray-200 dark-ring-gray-800 border border-solid border-stone/20 text-xs font-normal;
 
   box-shadow: 0 6px 30px rgb(0 0 0 / 10%);
 }
@@ -120,12 +125,12 @@ textarea {
 .v-popper--theme-dropdown .v-popper__arrow-inner {
   visibility: visible;
 
-  --at-apply: border-white dark-border-stone-8;
+  --uno: border-white dark-border-stone-8;
 }
 
 .v-popper--theme-tooltip .v-popper__arrow-outer,
 .v-popper--theme-dropdown .v-popper__arrow-outer {
-  --at-apply: border-stone/20;
+  --uno: border-stone/20;
 }
 
 .v-popper--theme-tooltip.v-popper--shown,
diff --git a/src/components/ComponentBasicExampleAlert/index.vue b/src/components/ComponentBasicExampleAlert/index.vue
index dfcfb97a..35f8bc39 100644
--- a/src/components/ComponentBasicExampleAlert/index.vue
+++ b/src/components/ComponentBasicExampleAlert/index.vue
@@ -10,7 +10,7 @@
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .alert {
   padding: 10px;
   background-color: var(--g-app-bg);
diff --git a/src/components/FileUpload/index.vue b/src/components/FileUpload/index.vue
index 19b8e015..0af893da 100755
--- a/src/components/FileUpload/index.vue
+++ b/src/components/FileUpload/index.vue
@@ -114,7 +114,7 @@ const onPreview: UploadProps['onPreview'] = (e) => {
   </ElUpload>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 :deep(.el-upload.is-drag) {
   display: inline-block;
 
diff --git a/src/components/ImagePreview/index.vue b/src/components/ImagePreview/index.vue
index b61e5bef..c959dd36 100644
--- a/src/components/ImagePreview/index.vue
+++ b/src/components/ImagePreview/index.vue
@@ -34,7 +34,7 @@ const realHeight = computed(() => {
   </ElImage>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .el-image {
   background-color: var(--el-fill-color);
   border-radius: 5px;
diff --git a/src/components/ImageUpload/index.vue b/src/components/ImageUpload/index.vue
index e53ec86c..6eaf9d10 100755
--- a/src/components/ImageUpload/index.vue
+++ b/src/components/ImageUpload/index.vue
@@ -136,7 +136,7 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .upload-container {
   line-height: initial;
 }
@@ -160,14 +160,16 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
     transition: opacity 0.3s;
 
     .actions {
+      position: absolute;
+      top: 50%;
+      left: 50%;
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       justify-content: center;
       width: 100px;
       height: 100px;
-
-      @include position-center(xy);
+      transform: translateX(-50%) translateY(-50%);
 
       span {
         width: 50%;
@@ -235,9 +237,11 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
       }
 
       .el-progress {
+        position: absolute;
+        top: 50%;
+        left: 50%;
         z-index: 1;
-
-        @include position-center(xy);
+        transform: translateX(-50%) translateY(-50%);
 
         .el-progress__text {
           color: var(--el-text-color-placeholder);
diff --git a/src/components/ImagesUpload/index.vue b/src/components/ImagesUpload/index.vue
index 9024f87c..a40b189c 100755
--- a/src/components/ImagesUpload/index.vue
+++ b/src/components/ImagesUpload/index.vue
@@ -153,7 +153,7 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .upload-container {
   line-height: initial;
 }
@@ -180,14 +180,16 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
     transition: opacity 0.3s;
 
     .actions {
+      position: absolute;
+      top: 50%;
+      left: 50%;
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       justify-content: center;
       width: 100px;
       height: 100px;
-
-      @include position-center(xy);
+      transform: translateX(-50%) translateY(-50%);
 
       span {
         width: 50%;
@@ -260,9 +262,11 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
       }
 
       .el-progress {
+        position: absolute;
+        top: 50%;
+        left: 50%;
         z-index: 1;
-
-        @include position-center(xy);
+        transform: translateX(-50%) translateY(-50%);
 
         .el-progress__text {
           color: var(--el-text-color-placeholder);
diff --git a/src/components/LoginForm/index.vue b/src/components/LoginForm/index.vue
index 3a9357cd..605332a3 100644
--- a/src/components/LoginForm/index.vue
+++ b/src/components/LoginForm/index.vue
@@ -132,7 +132,7 @@ function testAccount(account: string) {
   </ElForm>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 :deep(input[type="password"]::-ms-reveal) {
   display: none;
 }
diff --git a/src/components/RegisterForm/index.vue b/src/components/RegisterForm/index.vue
index d0ad5749..72700cdc 100644
--- a/src/components/RegisterForm/index.vue
+++ b/src/components/RegisterForm/index.vue
@@ -113,7 +113,7 @@ function handleRegister() {
   </ElForm>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 :deep(input[type="password"]::-ms-reveal) {
   display: none;
 }
diff --git a/src/components/ResetPasswordForm/index.vue b/src/components/ResetPasswordForm/index.vue
index c4d122fe..050b022c 100644
--- a/src/components/ResetPasswordForm/index.vue
+++ b/src/components/ResetPasswordForm/index.vue
@@ -91,7 +91,7 @@ function handleReset() {
   </ElForm>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 :deep(input[type="password"]::-ms-reveal) {
   display: none;
 }
diff --git a/src/main.ts b/src/main.ts
index d68b55be..aff8d800 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -29,7 +29,7 @@ import icons from '@/iconify/index.json'
 import 'virtual:uno.css'
 
 // 全局样式
-import '@/assets/styles/globals.scss'
+import '@/assets/styles/globals.css'
 
 const app = createApp(App)
 app.use(FloatingVue, {
diff --git a/src/views/components/AppSetting/index.vue b/src/views/components/AppSetting/index.vue
index 345687e2..66f402fc 100644
--- a/src/views/components/AppSetting/index.vue
+++ b/src/views/components/AppSetting/index.vue
@@ -268,96 +268,96 @@ function handleCopy() {
   </HSlideover>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .divider {
-  --at-apply: flex items-center justify-between gap-4 my-4 whitespace-nowrap text-sm font-500;
+  --uno: flex items-center justify-between gap-4 my-4 whitespace-nowrap text-sm font-500;
 
   &::before,
   &::after {
-    --at-apply: content-empty w-full h-1px bg-stone-2 dark-bg-stone-6;
+    --uno: content-empty w-full h-1px bg-stone-2 dark-bg-stone-6;
   }
 }
 
 .menu-mode {
-  --at-apply: flex items-center justify-center gap-4 pb-4;
+  --uno: flex items-center justify-center gap-4 pb-4;
 
   .mode {
-    --at-apply: relative w-16 h-12 rounded-2 ring-1 ring-stone-2 dark-ring-stone-7 cursor-pointer transition;
+    --uno: relative w-16 h-12 rounded-2 ring-1 ring-stone-2 dark-ring-stone-7 cursor-pointer transition;
 
     &.active {
-      --at-apply: ring-ui-primary ring-2;
+      --uno: ring-ui-primary ring-2;
     }
 
     &::before,
     &::after,
     .mode-container {
-      --at-apply: absolute pointer-events-none;
+      --uno: absolute pointer-events-none;
     }
 
     &::before {
-      --at-apply: content-empty bg-ui-primary;
+      --uno: content-empty bg-ui-primary;
     }
 
     &::after {
-      --at-apply: content-empty bg-ui-primary/60;
+      --uno: content-empty bg-ui-primary/60;
     }
 
     .mode-container {
-      --at-apply: bg-ui-primary/20 border-width-1.5 border-dashed border-ui-primary;
+      --uno: bg-ui-primary/20 border-width-1.5 border-dashed border-ui-primary;
 
       &::before {
-        --at-apply: content-empty absolute w-full h-full;
+        --uno: content-empty absolute w-full h-full;
       }
     }
 
     &-side {
       &::before {
-        --at-apply: top-2 bottom-2 left-2 w-2 rounded-tl-1 rounded-bl-1;
+        --uno: top-2 bottom-2 left-2 w-2 rounded-tl-1 rounded-bl-1;
       }
 
       &::after {
-        --at-apply: top-2 bottom-2 left-4.5 w-3;
+        --uno: top-2 bottom-2 left-4.5 w-3;
       }
 
       .mode-container {
-        --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-8 rounded-tr-1 rounded-br-1;
+        --uno: inset-t-2 inset-r-2 inset-b-2 inset-l-8 rounded-tr-1 rounded-br-1;
       }
     }
 
     &-head {
       &::before {
-        --at-apply: top-2 left-2 right-2 h-2 rounded-tl-1 rounded-tr-1;
+        --uno: top-2 left-2 right-2 h-2 rounded-tl-1 rounded-tr-1;
       }
 
       &::after {
-        --at-apply: top-4.5 left-2 bottom-2 w-3 rounded-bl-1;
+        --uno: top-4.5 left-2 bottom-2 w-3 rounded-bl-1;
       }
 
       .mode-container {
-        --at-apply: inset-t-4.5 inset-r-2 inset-b-2 inset-l-5.5 rounded-br-1;
+        --uno: inset-t-4.5 inset-r-2 inset-b-2 inset-l-5.5 rounded-br-1;
       }
     }
 
     &-single {
       &::after {
-        --at-apply: top-2 left-2 bottom-2 w-3 rounded-tl-1 rounded-bl-1;
+        --uno: top-2 left-2 bottom-2 w-3 rounded-tl-1 rounded-bl-1;
       }
 
       .mode-container {
-        --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-5.5 rounded-tr-1 rounded-br-1;
+        --uno: inset-t-2 inset-r-2 inset-b-2 inset-l-5.5 rounded-tr-1 rounded-br-1;
       }
     }
   }
 }
 
 .setting-item {
-  --at-apply: flex items-center justify-between gap-4 px-4 py-2 rounded-2 transition hover-bg-stone-1 dark-hover-bg-stone-9;
+  --uno: flex items-center justify-between gap-4 px-4 py-2 rounded-2 transition hover-bg-stone-1 dark-hover-bg-stone-9;
 
   .label {
-    --at-apply: flex items-center flex-shrink-0 gap-2 text-sm;
+    --uno: flex items-center flex-shrink-0 gap-2 text-sm;
 
     i {
-      --at-apply: text-xl text-orange cursor-help;
+      --uno: text-xl text-orange cursor-help;
     }
   }
 }
diff --git a/src/views/components/Breadcrumb/index.vue b/src/views/components/Breadcrumb/index.vue
index d432d20b..dbf525f5 100644
--- a/src/views/components/Breadcrumb/index.vue
+++ b/src/views/components/Breadcrumb/index.vue
@@ -4,7 +4,7 @@
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 :deep(.breadcrumb-item) {
   &:first-child {
     .separator {
diff --git a/src/views/components/BuyIt/index.vue b/src/views/components/BuyIt/index.vue
index 48d184a8..9a26b332 100644
--- a/src/views/components/BuyIt/index.vue
+++ b/src/views/components/BuyIt/index.vue
@@ -89,7 +89,7 @@ function open(url: string) {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .buy-it {
   position: fixed;
   top: 50%;
@@ -132,23 +132,23 @@ function open(url: string) {
     }
 
     &:nth-child(1) {
-      --at-apply: bg-blue;
+      --uno: bg-blue;
     }
 
     &:nth-child(2) {
-      --at-apply: bg-pink;
+      --uno: bg-pink;
     }
 
     &:nth-child(3) {
-      --at-apply: bg-orange;
+      --uno: bg-orange;
     }
 
     &:nth-child(4) {
-      --at-apply: bg-green;
+      --uno: bg-green;
     }
 
     &:nth-child(5) {
-      --at-apply: bg-red;
+      --uno: bg-red;
     }
 
     i {
diff --git a/src/views/components/Copyright/index.vue b/src/views/components/Copyright/index.vue
index 5385fa83..ddfc62bd 100644
--- a/src/views/components/Copyright/index.vue
+++ b/src/views/components/Copyright/index.vue
@@ -22,17 +22,17 @@ const settingsStore = useSettingsStore()
   </footer>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .copyright {
-  --at-apply: flex items-center justify-center flex-wrap py-3 px-4 text-sm text-stone-5;
+  --uno: flex items-center justify-center flex-wrap py-3 px-4 text-sm text-stone-5;
 
   span,
   a {
-    --at-apply: px-1;
+    --uno: px-1;
   }
 
   a {
-    --at-apply: text-center no-underline text-stone-5 hover-text-dark dark-hover-text-light transition;
+    --uno: text-center no-underline text-stone-5 hover-text-dark dark-hover-text-light transition;
   }
 }
 </style>
diff --git a/src/views/components/Dashboard/Empty/index.vue b/src/views/components/Dashboard/Empty/index.vue
index bfb1e414..cad201b5 100644
--- a/src/views/components/Dashboard/Empty/index.vue
+++ b/src/views/components/Dashboard/Empty/index.vue
@@ -194,7 +194,7 @@ function open(url: string) {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .empty-container {
   height: 100%;
   overflow: auto;
@@ -204,28 +204,28 @@ function open(url: string) {
   }
 
   .page-main {
-    --at-apply: m-5 shadow;
+    --uno: m-5 shadow;
   }
 
   .ecology {
-    --at-apply: flex-1 m-0;
+    --uno: flex-1 m-0;
 
     :deep(.title-container) {
-      --at-apply: flex items-center justify-between flex-wrap gap-4;
+      --uno: flex items-center justify-between flex-wrap gap-4;
 
       .title-info {
-        --at-apply: flex items-center gap-4;
+        --uno: flex items-center gap-4;
 
         img {
-          --at-apply: block w-12 h-12;
+          --uno: block w-12 h-12;
         }
 
         h1 {
-          --at-apply: m-0 text-2xl;
+          --uno: m-0 text-2xl;
         }
 
         h2 {
-          --at-apply: m-0 text-base text-stone-5 font-normal;
+          --uno: m-0 text-base text-stone-5 font-normal;
         }
       }
     }
@@ -233,14 +233,14 @@ function open(url: string) {
 
   .question {
     .answer {
-      --at-apply: m-0 pl-6 text-stone-5;
+      --uno: m-0 pl-6 text-stone-5;
 
       li {
-        --at-apply: mb-2 lh-6 last:mb-0;
+        --uno: mb-2 lh-6 last:mb-0;
       }
 
       span {
-        --at-apply: text-stone-7 dark-text-stone-3 font-bold;
+        --uno: text-stone-7 dark-text-stone-3 font-bold;
       }
     }
   }
diff --git a/src/views/components/Dashboard/index.vue b/src/views/components/Dashboard/index.vue
index bcc1c87e..6b627fbf 100644
--- a/src/views/components/Dashboard/index.vue
+++ b/src/views/components/Dashboard/index.vue
@@ -155,34 +155,56 @@ function maskClick(windowName: string) {
   </HDialog>
 </template>
 
-<style lang="scss">
+<style>
 .contextmenu-custom {
+  --uno: fixed ring-1 ring-stone-2 dark-ring-stone-7 shadow-2xl;
+
+  background-color: var(--g-app-bg);
+
   .mx-context-menu-items .mx-context-menu-item {
-    .text {
-      display: flex;
-      align-items: center;
+    --uno: transition-background-color;
+
+    &:not(.disabled):hover {
+      --uno: cursor-pointer bg-stone-1 dark-bg-stone-9;
     }
 
-    &.disabled .text .icon {
-      color: #9f9f9f;
+    span {
+      color: initial;
+    }
+
+    .icon {
+      color: initial;
+    }
+
+    &.disabled span,
+    &.disabled .icon {
+      opacity: 0.25;
+    }
+  }
+
+  .mx-context-menu-item-sperator {
+    background-color: var(--g-app-bg);
+
+    &::after {
+      --uno: bg-stone-2 dark-bg-stone-7;
     }
   }
 }
 </style>
 
-<style lang="scss" scoped>
+<style scoped>
 .dashboard {
-  --at-apply: absolute top-0 bottom-0 w-full of-x-auto of-y-hidden transition;
+  --uno: absolute top-0 bottom-0 w-full of-x-auto of-y-hidden transition;
 
   &.preview-all {
-    --at-apply: fixed z-2000 top-0 bottom-0 left-0 right-0 of-y-auto bg-stone-200/75 dark-bg-stone-8/75 backdrop-blur-sm;
+    --uno: fixed z-2000 top-0 bottom-0 left-0 right-0 of-y-auto bg-stone-200/75 dark-bg-stone-8/75 backdrop-blur-sm;
 
     .preview-all-mode {
       display: block;
     }
 
     .dashboard-container {
-      --at-apply: flex-wrap justify-center bottom-a h-max pb-15;
+      --uno: flex-wrap justify-center bottom-a h-max pb-15;
 
       &:not(.mode-drag) {
         align-items: center;
@@ -222,11 +244,12 @@ function maskClick(windowName: string) {
     }
 
     .help {
+      position: absolute;
+      top: 50%;
       right: 20px;
       font-size: 18px;
       color: #ccc;
-
-      @include position-center(y);
+      transform: translateY(-50%);
     }
   }
 
@@ -246,7 +269,7 @@ function maskClick(windowName: string) {
     }
 
     .window-container {
-      --at-apply: shadow hover-shadow-lg transition;
+      --uno: shadow hover-shadow-lg transition;
 
       display: flex;
       flex: 1;
@@ -274,7 +297,7 @@ function maskClick(windowName: string) {
           align-items: center;
 
           .title {
-            --at-apply: c-dark dark-c-light;
+            --uno: c-dark dark-c-light;
 
             font-size: 14px;
             font-weight: bold;
@@ -289,7 +312,7 @@ function maskClick(windowName: string) {
           display: flex;
 
           .btn {
-            --at-apply: c-dark dark-c-light bg-stone-1 hover-bg-stone-2 dark-bg-stone-9 dark-hover-bg-stone-8 transition;
+            --uno: c-dark dark-c-light bg-stone-1 hover-bg-stone-2 dark-bg-stone-9 dark-hover-bg-stone-8 transition;
 
             display: flex;
             align-items: center;
@@ -303,7 +326,7 @@ function maskClick(windowName: string) {
       }
 
       .mask {
-        --at-apply: bg-stone-1/75 dark-bg-stone-9/75;
+        --uno: bg-stone-1/75 dark-bg-stone-9/75;
 
         position: absolute;
         top: 0;
diff --git a/src/views/components/Header/index.vue b/src/views/components/Header/index.vue
index 7b0e0556..04c6659b 100644
--- a/src/views/components/Header/index.vue
+++ b/src/views/components/Header/index.vue
@@ -61,7 +61,7 @@ function handlerMouserScroll(event: WheelEvent) {
   </Transition>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 header {
   position: fixed;
   top: 0;
@@ -115,10 +115,10 @@ header {
       overflow-x: auto;
       mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
 
-      // firefox隐藏滚动条
+      /* firefox隐藏滚动条 */
       scrollbar-width: none;
 
-      // chrome隐藏滚动条
+      /* chrome隐藏滚动条 */
       &::-webkit-scrollbar {
         display: none;
       }
@@ -151,7 +151,7 @@ header {
   }
 }
 
-// 头部动画
+/* 头部动画 */
 .header-enter-active,
 .header-leave-active {
   transition: transform 0.3s;
diff --git a/src/views/components/MainSidebar/index.vue b/src/views/components/MainSidebar/index.vue
index 3929834e..34e04d84 100644
--- a/src/views/components/MainSidebar/index.vue
+++ b/src/views/components/MainSidebar/index.vue
@@ -46,7 +46,7 @@ const { switchTo } = useMenu()
   </Transition>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .main-sidebar-container {
   position: relative;
   z-index: 1;
@@ -69,10 +69,10 @@ const { switchTo } = useMenu()
     overflow: hidden auto;
     overscroll-behavior: contain;
 
-    // firefox隐藏滚动条
+    /* firefox隐藏滚动条 */
     scrollbar-width: none;
 
-    // chrome隐藏滚动条
+    /* chrome隐藏滚动条 */
     &::-webkit-scrollbar {
       display: none;
     }
@@ -105,7 +105,7 @@ const { switchTo } = useMenu()
   }
 }
 
-// 主侧边栏动画
+/* 主侧边栏动画 */
 .main-sidebar-enter-active,
 .main-sidebar-leave-active {
   transition: 0.3s;
diff --git a/src/views/components/SubSidebar/index.vue b/src/views/components/SubSidebar/index.vue
index 4458e89f..85f3f4d9 100644
--- a/src/views/components/SubSidebar/index.vue
+++ b/src/views/components/SubSidebar/index.vue
@@ -77,7 +77,7 @@ onMounted(() => {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .sub-sidebar-container {
   position: absolute;
   top: 0;
@@ -120,10 +120,10 @@ onMounted(() => {
     overflow: hidden auto;
     overscroll-behavior: contain;
 
-    // firefox隐藏滚动条
+    /* firefox隐藏滚动条 */
     scrollbar-width: none;
 
-    // chrome隐藏滚动条
+    /* chrome隐藏滚动条 */
     &::-webkit-scrollbar {
       display: none;
     }
@@ -146,7 +146,7 @@ onMounted(() => {
   }
 }
 
-// 次侧边栏动画
+/* 次侧边栏动画 */
 .sub-sidebar-enter-active {
   transition: opacity 0.3s, transform 0.3s;
 }
diff --git a/src/views/components/Topbar/index.vue b/src/views/components/Topbar/index.vue
index 78a144dc..39b480ba 100644
--- a/src/views/components/Topbar/index.vue
+++ b/src/views/components/Topbar/index.vue
@@ -21,7 +21,7 @@ const settingsStore = useSettingsStore()
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .topbar-container {
   height: var(--g-topbar-height);
   background-color: var(--g-toolbar-bg);
diff --git a/src/views/index.vue b/src/views/index.vue
index e45d950e..b2307f94 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -66,7 +66,7 @@ const enableAppSetting = import.meta.env.VITE_APP_SETTING === 'true'
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .layout {
   height: 100%;
 }
@@ -156,7 +156,7 @@ header:not(.header-leave-active) + .wrapper {
 }
 
 .app-setting {
-  --at-apply: text-white dark-text-dark bg-ui-primary;
+  --uno: text-white dark-text-dark bg-ui-primary;
 
   position: fixed;
   top: calc(50% + 250px);
@@ -187,7 +187,7 @@ header:not(.header-leave-active) + .wrapper {
   }
 }
 
-// 主内容区动画
+/* 主内容区动画 */
 .main-enter-active {
   transition: 0.2s;
 }
diff --git a/src/views/login.vue b/src/views/login.vue
index bd0acc18..66b349a7 100755
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -52,7 +52,7 @@ const formRef = ref()
   <Copyright />
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .bg-banner {
   position: fixed;
   z-index: 0;
@@ -79,9 +79,10 @@ const formRef = ref()
     background-color: var(--g-main-bg);
 
     .banner {
+      position: absolute;
+      top: 50%;
       width: 100%;
-
-      @include position-center(y);
+      transform: translateY(-50%);
     }
   }
 
diff --git a/src/views/windows/ComponentBasicExample/components/button.vue b/src/views/windows/ComponentBasicExample/components/button.vue
index e5f987b8..d21d37e5 100644
--- a/src/views/windows/ComponentBasicExample/components/button.vue
+++ b/src/views/windows/ComponentBasicExample/components/button.vue
@@ -249,7 +249,7 @@
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .el-row {
   margin-bottom: 20px;
 }
diff --git a/src/views/windows/ComponentBasicExample/components/icon.vue b/src/views/windows/ComponentBasicExample/components/icon.vue
index da4c2a7f..7da0972a 100644
--- a/src/views/windows/ComponentBasicExample/components/icon.vue
+++ b/src/views/windows/ComponentBasicExample/components/icon.vue
@@ -28,7 +28,7 @@ const icon = icons.filter(item => item.prefix === 'ep')[0]
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .demo {
   > i {
     margin: 0 20px;
diff --git a/src/views/windows/ComponentBasicExample/components/link.vue b/src/views/windows/ComponentBasicExample/components/link.vue
index f23270cf..8e3d5148 100644
--- a/src/views/windows/ComponentBasicExample/components/link.vue
+++ b/src/views/windows/ComponentBasicExample/components/link.vue
@@ -63,7 +63,7 @@
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .el-link {
   margin: 0 5px;
 }
diff --git a/src/views/windows/ComponentBuiltInExample/index.vue b/src/views/windows/ComponentBuiltInExample/index.vue
index 2f316420..cd65dc79 100644
--- a/src/views/windows/ComponentBuiltInExample/index.vue
+++ b/src/views/windows/ComponentBuiltInExample/index.vue
@@ -133,12 +133,12 @@ const toggle = ref(false)
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .page-main {
-  --at-apply: flex-grow-1 flex-shrink-1 flex-basis-400px m-0 min-h-50;
+  --uno: flex-grow-1 flex-shrink-1 flex-basis-400px m-0 min-h-50;
 
   :deep(.main-container) {
-    --at-apply: flex items-center justify-center flex-1 gap-4;
+    --uno: flex items-center justify-center flex-1 gap-4;
   }
 }
 </style>
diff --git a/src/views/windows/ComponentExtendExamplePcas/index.vue b/src/views/windows/ComponentExtendExamplePcas/index.vue
index 1356b89b..5f8c9c3a 100644
--- a/src/views/windows/ComponentExtendExamplePcas/index.vue
+++ b/src/views/windows/ComponentExtendExamplePcas/index.vue
@@ -64,7 +64,3 @@ function submitForm() {
     </PageMain>
   </div>
 </template>
-
-<style lang="scss" scoped>
-// scss
-</style>
diff --git a/src/views/windows/ComponentExtendExampleSearchbar/index.vue b/src/views/windows/ComponentExtendExampleSearchbar/index.vue
index ba21b9fa..c37071ab 100644
--- a/src/views/windows/ComponentExtendExampleSearchbar/index.vue
+++ b/src/views/windows/ComponentExtendExampleSearchbar/index.vue
@@ -411,7 +411,7 @@ function onToggle(fold: boolean) {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .search-form {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
diff --git a/src/views/windows/ComponentExtendExampleTableautoheight/index.vue b/src/views/windows/ComponentExtendExampleTableautoheight/index.vue
index 31eb8878..4b5db637 100644
--- a/src/views/windows/ComponentExtendExampleTableautoheight/index.vue
+++ b/src/views/windows/ComponentExtendExampleTableautoheight/index.vue
@@ -126,7 +126,7 @@ const dataList = ref([
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .absolute-container {
   position: absolute;
   display: flex;
@@ -134,7 +134,7 @@ const dataList = ref([
   width: 100%;
   height: 100%;
 
-  // 让 page-main 的高度自适应
+  /* 让 page-main 的高度自适应 */
   .page-main {
     flex: 1;
     overflow: auto;
diff --git a/src/views/windows/IconExampleIconify/index.vue b/src/views/windows/IconExampleIconify/index.vue
index cc4e89a1..fd99e823 100644
--- a/src/views/windows/IconExampleIconify/index.vue
+++ b/src/views/windows/IconExampleIconify/index.vue
@@ -79,7 +79,7 @@ function showInfo(iconName: string) {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .el-card {
   margin-bottom: 15px;
 
diff --git a/src/views/windows/PersonalSetting/index.vue b/src/views/windows/PersonalSetting/index.vue
index e5afe181..8346a2bd 100644
--- a/src/views/windows/PersonalSetting/index.vue
+++ b/src/views/windows/PersonalSetting/index.vue
@@ -113,7 +113,7 @@ function editPassword() {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 :deep(.el-tabs) {
   .el-tabs__header .el-tabs__nav {
     .el-tabs__active-bar {