引入 postcss-nested

package.json

@@ -98,6 +98,7 @@
     "picocolors": "^1.0.1",
     "plop": "^4.0.1",
     "postcss": "^8.4.40",
+    "postcss-nested": "^6.2.0",
     "sass": "^1.77.8",
     "simple-git-hooks": "^2.11.1",
     "stylelint": "^16.8.1",

plop-templates/component/index.hbs

@@ -12,6 +12,6 @@ defineOptions({
   </div>
 </template>
 
-<style lang="scss" scoped>
-// 样式
+<style scoped>
+/* 样式 */
 </style>

plop-templates/page/index.hbs

@@ -17,6 +17,6 @@ defineOptions({
   </div>
 </template>
 
-<style lang="scss" scoped>
-// 样式
+<style scoped>
+/* 样式 */
 </style>

postcss.config.js

@@ -1,5 +1,6 @@
 export default {
   plugins: {
-    autoprefixer: {},
+    'autoprefixer': {},
+    'postcss-nested': {},
   },
 }

src/assets/styles/globals.scss → src/assets/styles/globals.css

@@ -1,20 +1,24 @@
-// 页面布局 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-tabbar-height: 50px;
-  // 工具栏高度
+
+  /* 工具栏高度 */
   --g-toolbar-height: 50px;
 }
 
-// 明暗模式 CSS 变量
+/* 明暗模式 CSS 变量 */
 /* stylelint-disable-next-line no-duplicate-selectors */
 :root {
   --g-box-shadow-color: rgb(0 0 0 / 12%);
@@ -87,35 +91,34 @@ body {
   box-sizing: inherit;
 }
 
-// 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width]
+/* 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width] */
 [data-fixed-calc-width] {
   position: fixed;
   right: 0;
   left: 50%;
   width: calc(100% - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
   transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
-}
 
-[data-mode="mobile"] {
-  [data-fixed-calc-width] {
+  [data-mode="mobile"] & {
     width: 100% !important;
     transform: translateX(-50%) !important;
   }
 }
-// textarea 字体跟随系统
+
+/* textarea 字体跟随系统 */
 textarea {
   font-family: inherit;
 }
 
 /* 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%);
 }
@@ -124,12 +127,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,

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;
 

src/components/FixedActionBar/index.vue

@@ -34,7 +34,7 @@ function onScroll() {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .fixed-action-bar {
   box-shadow: 0 0 1px 0 var(--g-box-shadow-color);
 

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;

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);

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);

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;
 }

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;
 }

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;
 }