🦄 refactor: 迁移至UnoCSS

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <el-container class="app__container">
-    <el-header class="app-header flex align-center">
+    <el-header class="app-header flex items-center">
       <el-icon v-show="mdLess" size="30" @click="showVerticalHeaderMenu = true">
         <icon-cs-menu />
       </el-icon>
@@ -39,7 +39,9 @@
   >
     <h3 v-show="!showAppTitle" class="app__title text-center">社团展示系统</h3>
     <header-user v-if="userStore.logined" @login="showLoginRegisterDialog = true" />
-    <div v-else class="app-vertical-drawer__not-login-title flex center">尚未登录</div>
+    <div v-else class="app-vertical-drawer__not-login-title flex justify-center items-center">
+      尚未登录
+    </div>
     <el-button
       v-if="userStore.logined"
       class="app-vertical-drawer__logout"
@@ -120,15 +122,15 @@ import { useMediaStore } from '@/stores/media';
 import { usePageStore } from '@/stores/page.js';
 import { useUserStore } from '@/stores/user';
 import { CloseBold } from '@element-plus/icons-vue';
+import { useMediaQuery } from '@vueuse/core';
 import type { AxiosError } from 'axios';
 import { ElMessage } from 'element-plus';
 import { storeToRefs } from 'pinia';
 import { provide, ref, watch } from 'vue';
 import { loginResponseSchema, registerResponseSchema } from './schemas/response';
-import { useMediaQuery } from '@vueuse/core';
 const userStore = useUserStore();
 const pageStore = usePageStore();
-const { smLess, mdLess } = storeToRefs(useMediaStore());
+const { mdLess } = storeToRefs(useMediaStore());
 const showAppTitle = useMediaQuery('(width >= 390px)');
 const showLoginRegisterDialog = ref(false);
 provide(loginImplKey, async (params) => {

src/assets/global.scss

@@ -13,44 +13,3 @@ body {
 #app {
   min-height: 100vh;
 }
-.flex {
-  display: flex !important;
-}
-.flex-column {
-  flex-direction: column;
-}
-.flex-stretch {
-  flex: 1;
-}
-.align-center {
-  align-items: center;
-}
-.justify-start {
-  justify-content: flex-start;
-}
-.justify-center {
-  justify-content: center;
-}
-.justify-between {
-  justify-content: space-between;
-}
-.justify-end {
-  justify-content: flex-end;
-}
-.center {
-  @extend .justify-center;
-  @extend .align-center;
-}
-.absolute-self-center {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-.text-center {
-  text-align: center;
-}
-.size-stretch {
-  width: 100%;
-  height: 100%;
-}

src/components/app/HeaderUser.vue

@@ -1,13 +1,13 @@
 <template>
   <div
-    class="app-header-user flex center"
+    class="app-header-user flex justify-center items-center"
     v-loading="userStore.initializing"
     @click="userStore.logined && $emit('click')"
   >
     <template v-if="!userStore.initializing">
       <!-- 仅收紧类型 -->
       <template v-if="userInfo && userStore.logined">
-        <div class="flex align-center">
+        <div class="flex items-center">
           <el-avatar :icon="userInfo.avatar ?? undefined" />
         </div>
         <div class="app-header-user__username">

src/components/app/LoginRegisterDialog.vue

@@ -2,7 +2,7 @@
   <el-dialog
     v-model="show"
     :fullscreen="smLess"
-    align-center
+    items-center
     class="login-register-dialog"
     width="400"
   >

src/components/gobang/CreateGobangRoomDialog.vue

@@ -3,7 +3,7 @@
     class="create-gobang-room-dialog"
     v-model="show"
     title="创建房间"
-    align-center
+    items-center
     :fullscreen="smLess"
   >
     <el-button type="success" @click="onCreateRoomButtonClick">创建房间</el-button>

src/components/gobang/GobangHeader.vue

@@ -1,7 +1,7 @@
 <template>
-  <el-header class="gobang-header flex align-center">
+  <el-header class="gobang-header flex items-center">
     <router-link custom :to="{ name: 'GobangList' }" v-slot="{ navigate }">
-      <div class="gobang-header__left flex align-center" @click="navigate">
+      <div class="gobang-header__left flex items-center" @click="navigate">
         <el-icon :size="30"><icon-cs-gobang /></el-icon>
         <h2 v-show="!smLess" class="gobang-header__title">五子棋</h2>
       </div>

src/components/gobang/GobangUser.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="gobang-play-page-aside-user flex center" :class="{ 'flex-column': !footer }">
+  <div class="gobang-play-page-aside-user flex justify-center items-center" :class="{ 'flex-col': !footer }">
     <el-avatar :size="40" :icon="user.avatar ?? undefined" />
     <div class="gobang-play-page-aside-user__name">{{ user.name }}</div>
   </div>

src/main.ts

@@ -1,3 +1,4 @@
+import 'virtual:uno.css';
 import '@/assets/global.scss';
 import 'element-plus/theme-chalk/index.css';
 import 'element-plus/theme-chalk/display.css';

src/views/ErrorPage.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-main class="error-page flex flex-column center">
+  <el-main class="error-page !flex flex-col justify-center items-center">
     <div class="error-page__reason">{{ descriptionMap[type] }}</div>
     <router-link custom v-slot="{ navigate }" to="/">
       <el-button type="primary" @click="navigate">返回首页</el-button>

src/views/Game2048Page.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-main class="game-2048-page__wrapper flex justify-center">
+  <el-main class="game-2048-page__wrapper !flex justify-center">
     <div class="game-2048-page">
       <div class="game-header">
         <div class="game-title">

src/views/GobangListPage.vue

@@ -1,8 +1,8 @@
 <template>
-  <el-main class="gobang-list-page__wrapper flex">
+  <el-main class="gobang-list-page__wrapper !flex">
     <el-container>
       <gobang-header class="justify-between">
-        <div class="flex align-center">
+        <div class="flex items-center">
           <el-button type="primary" :loading="loading" @click="refresh">刷新</el-button>
           <el-button type="success" :disabled="loading" @click="showDialog = true">
             创建房间
@@ -13,7 +13,7 @@
       <el-main
         v-loading="loading"
         :element-loading-text="loadingText"
-        class="gobang-list-page-main flex-column"
+        class="gobang-list-page-main flex-col"
         :class="{ flex: !rooms.length, center: !rooms.length }"
       >
         <template v-if="rooms.length || !loading">

src/views/GobangPlayPage.vue

@@ -1,20 +1,24 @@
 <template>
   <el-main
     v-loading="state !== 'GAMING' && state !== 'WAITING'"
-    class="gobang-play-page__wrapper flex"
+    class="gobang-play-page__wrapper !flex"
   >
     <el-container direction="vertical" v-if="state !== 'FIRST_LOADING'">
       <gobang-header class="justify-between">
-        <div class="flex align-center">
+        <div class="flex items-center">
           <template v-if="roomId">
             <h2 v-show="!smLess">蓝色基因对战平台</h2>
-            <h3 class="gobang-play-page__brief-id flex center">#{{ roomId.slice(0, 8) }}</h3>
+            <h3
+              class="gobang-play-page__brief-id flex justify-center items-center absolute-self-center"
+            >
+              #{{ roomId.slice(0, 8) }}
+            </h3>
           </template>
           <h2 v-else>单人游戏</h2>
         </div>
       </gobang-header>
       <el-container direction="horizontal">
-        <el-main class="gobang-play-page-main center flex flex-column">
+        <el-main class="gobang-play-page-main !flex flex-col justify-center items-center">
           <div class="gobang__state">
             <!-- {{ stateDisplayMap[state] }} -->
           </div>
@@ -44,31 +48,23 @@
         </el-main>
         <el-aside
           v-if="!mdLess"
-          class="gobang-play-page-aside flex flex-column align-center justify-between"
+          class="gobang-play-page-aside !flex flex-col items-center justify-between"
         >
           <gobang-user v-if="otherUser" :footer="false" :user="otherUser" />
           <div class="gobang-play-page-aside__vs absolute-self-center">VS</div>
         </el-aside>
       </el-container>
-      <el-footer v-if="mdLess" class="gobang-play-page-footer flex align-center">
+      <el-footer v-if="mdLess" class="gobang-play-page-footer flex items-center">
         <gobang-user v-if="userStore.userInfo" footer :user="userStore.userInfo" />
       </el-footer>
     </el-container>
   </el-main>
 </template>
 <style lang="scss" scoped>
-:deep(.gobang-header__content-left) {
-  position: relative;
-  z-index: 1;
-}
 .gobang-play-page {
   &__wrapper {
     background-color: white;
   }
-  &__brief-id {
-    position: absolute;
-    inset: 0;
-  }
   &-main {
     --el-main-padding: 0;
     margin-top: var(--header-height);

vite.config.ts

@@ -1,8 +1,7 @@
-import vue from '@vitejs/plugin-vue';
-import vueJsx from '@vitejs/plugin-vue-jsx';
 import legacy from '@vitejs/plugin-legacy';
+import vue from '@vitejs/plugin-vue';
 import { resolve } from 'node:path';
-import AutoImport from 'unplugin-auto-import/vite';
+import UnoCSS from 'unocss/vite';
 import { FileSystemIconLoader } from 'unplugin-icons/loaders';
 import IconsResolver from 'unplugin-icons/resolver';
 import Icons from 'unplugin-icons/vite';
@@ -43,6 +42,7 @@ export default defineConfig({
         cs: FileSystemIconLoader('./src/assets/icons'),
       },
     }),
+    UnoCSS(),
   ],
   resolve: {
     alias: {