refactor: use `tailwindcss` replace `unocss`

.eslintignore

@@ -2,3 +2,9 @@ public
 dist
 *.d.ts
 package.json
+.eslintrc.js
+.prettierrc.js
+commitlint.config.js
+postcss.config.js
+tailwind.config.js
+stylelint.config.js

.vscode/extensions.json

@@ -3,13 +3,13 @@
     "vscode-icons-team.vscode-icons",
     "davidanson.vscode-markdownlint",
     "stylelint.vscode-stylelint",
+    "bradlc.vscode-tailwindcss",
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
     "lokalise.i18n-ally",
     "mikestead.dotenv",
     "eamodio.gitlens",
     "antfu.iconify",
-    "antfu.unocss",
     "Vue.volar"
   ]
 }

build/plugins.ts

@@ -1,5 +1,4 @@
 import { resolve } from "path";
-import Unocss from "unocss/vite";
 import vue from "@vitejs/plugin-vue";
 import { viteBuildInfo } from "./info";
 import svgLoader from "vite-svg-loader";
@@ -27,7 +26,6 @@ export function getPluginsList(command, VITE_LEGACY) {
     }),
     // jsx、tsx语法支持
     vueJsx(),
-    Unocss(),
     DefineOptions(),
     // 线上环境删除console
     removeConsole({ external: ["src/assets/iconfont/iconfont.js"] }),

package.json

@@ -13,8 +13,8 @@
     "typecheck": "tsc --noEmit && vue-tsc --noEmit --skipLibCheck",
     "cloc": "cross-env --max_old_space_size=4096 cloc . --exclude-dir=node_modules --exclude-lang=YAML",
     "clean:cache": "rm -rf node_modules && rm -rf .eslintcache && pnpm install",
-    "lint:eslint": "eslint --cache --max-warnings 0  \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
-    "lint:prettier": "prettier --write  \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
+    "lint:eslint": "eslint --cache --max-warnings 0  \"{src,mock,build}/**/*.{vue,js,ts,tsx}\" --fix",
+    "lint:prettier": "prettier --write  \"src/**/*.{js,ts,json,tsx,css,less,scss,vue,html,md}\"",
     "lint:stylelint": "stylelint --cache --fix \"**/*.{vue,css,scss,postcss,less}\" --cache --cache-location node_modules/.cache/stylelint/",
     "lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.js",
     "lint:pretty": "pretty-quick --staged",
@@ -100,7 +100,7 @@
     "picocolors": "^1.0.0",
     "postcss": "^8.4.16",
     "postcss-html": "^1.5.0",
-    "postcss-import": "^14.1.0",
+    "postcss-import": "^15.0.0",
     "postcss-scss": "^4.0.4",
     "prettier": "^2.5.1",
     "pretty-quick": "3.1.1",
@@ -114,9 +114,9 @@
     "stylelint-config-recommended": "^6.0.0",
     "stylelint-config-standard": "^24.0.0",
     "stylelint-order": "^5.0.0",
+    "tailwindcss": "^3.1.8",
     "terser": "^5.15.0",
     "typescript": "^4.7.4",
-    "unocss": "^0.45.15",
     "unplugin-vue-define-options": "0.7.3",
     "vite": "^3.1.0",
     "vite-plugin-mock": "^2.9.6",

postcss.config.js

@@ -1,3 +1,7 @@
 module.exports = {
-  plugins: [require("autoprefixer"), require("postcss-import")]
+  plugins: {
+    "postcss-import": {},
+    tailwindcss: {},
+    autoprefixer: {}
+  }
 };

src/layout/components/navbar.vue

@@ -55,13 +55,13 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
       <!-- 国际化 -->
       <el-dropdown id="header-translation" trigger="click">
         <globalization
-          class="navbar-bg-hover w-40px h-48px p-11px cursor-pointer outline-none"
+          class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-none"
         />
         <template #dropdown>
           <el-dropdown-menu class="translation">
             <el-dropdown-item
               :style="getDropdownItemStyle(locale, 'zh')"
-              :class="['!dark:color-white', getDropdownItemClass(locale, 'zh')]"
+              :class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
               @click="translationCh"
             >
               <IconifyIconOffline
@@ -73,7 +73,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
             </el-dropdown-item>
             <el-dropdown-item
               :style="getDropdownItemStyle(locale, 'en')"
-              :class="['!dark:color-white', getDropdownItemClass(locale, 'en')]"
+              :class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
               @click="translationEn"
             >
               <span class="check-en" v-show="locale === 'en'">
@@ -88,7 +88,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
       <el-dropdown trigger="click">
         <span class="el-dropdown-link navbar-bg-hover">
           <img v-if="avatars" :src="avatars" :style="avatarsStyle" />
-          <p v-if="username" class="dark:color-white">{{ username }}</p>
+          <p v-if="username" class="dark:text-white">{{ username }}</p>
         </span>
         <template #dropdown>
           <el-dropdown-menu class="logout">

src/layout/components/notice/noticeItem.vue

@@ -45,7 +45,7 @@ function hoverDescription(event, description) {
 
 <template>
   <div
-    class="notice-container border-b-1 border-[#f0f0f0] dark:border-[#303030]"
+    class="notice-container border-b-[1px] border-solid border-[#f0f0f0] dark:border-[#303030]"
   >
     <el-avatar
       v-if="props.noticeItem.avatar"
@@ -54,7 +54,7 @@ function hoverDescription(event, description) {
       class="notice-container-avatar"
     />
     <div class="notice-container-text">
-      <div class="notice-text-title color-[#000000d9] dark:color-white">
+      <div class="notice-text-title text-[#000000d9] dark:text-white">
         <el-tooltip
           popper-class="notice-title-popper"
           :disabled="!titleTooltip"
@@ -93,7 +93,7 @@ function hoverDescription(event, description) {
           {{ props.noticeItem.description }}
         </div>
       </el-tooltip>
-      <div class="notice-text-datetime color-[#00000073] dark:color-white">
+      <div class="notice-text-datetime text-[#00000073] dark:text-white">
         {{ props.noticeItem.datetime }}
       </div>
     </div>

src/layout/components/panel/index.vue

@@ -21,12 +21,14 @@ emitter.on("openPanel", () => {
     <div ref="target" class="right-panel bg-white dark:bg-dark">
       <div class="right-panel-items">
         <div class="project-configuration">
-          <h3>项目配置</h3>
+          <h3 class="dark:text-white">项目配置</h3>
           <el-icon title="关闭配置" class="el-icon-close" @click="show = !show">
             <IconifyIconOffline icon="close" />
           </el-icon>
         </div>
-        <div class="border-b-1 border-[#dcdfe6] dark:border-[#303030]" />
+        <div
+          class="border-b-[1px] border-solid border-[#dcdfe6] dark:border-[#303030]"
+        />
         <slot />
       </div>
     </div>

src/layout/components/screenfull/index.vue

@@ -8,7 +8,7 @@ const { isFullscreen, toggle } = useFullscreen();
 
 <template>
   <div
-    class="screen-full w-36px h-48px flex-ac cursor-pointer navbar-bg-hover"
+    class="screen-full w-[36px] h-[48px] flex-ac cursor-pointer navbar-bg-hover"
     @click="toggle"
   >
     <FontIcon

src/layout/components/search/components/SearchFooter.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="search-footer color-[#333] dark:color-white">
+  <div class="search-footer text-[#333] dark:text-white">
     <span class="search-footer-item">
       <enterOutlined class="icon" />
       确认

src/layout/components/search/index.vue

@@ -9,7 +9,7 @@ function handleSearch() {
 
 <template>
   <div
-    class="search-container w-40px h-48px flex-c cursor-pointer navbar-bg-hover"
+    class="search-container w-[40px] h-[48px] flex-c cursor-pointer navbar-bg-hover"
     @click="handleSearch"
   >
     <IconifyIconOffline icon="search" />

src/layout/components/setting/index.vue

@@ -309,7 +309,7 @@ nextTick(() => {
     <el-divider>界面显示</el-divider>
     <ul class="setting">
       <li>
-        <span>灰色模式</span>
+        <span class="dark:text-white">灰色模式</span>
         <el-switch
           v-model="settings.greyVal"
           inline-prompt
@@ -320,7 +320,7 @@ nextTick(() => {
         />
       </li>
       <li>
-        <span>色弱模式</span>
+        <span class="dark:text-white">色弱模式</span>
         <el-switch
           v-model="settings.weakVal"
           inline-prompt
@@ -331,7 +331,7 @@ nextTick(() => {
         />
       </li>
       <li>
-        <span>隐藏标签页</span>
+        <span class="dark:text-white">隐藏标签页</span>
         <el-switch
           v-model="settings.tabsVal"
           inline-prompt
@@ -342,7 +342,7 @@ nextTick(() => {
         />
       </li>
       <li>
-        <span>侧边栏Logo</span>
+        <span class="dark:text-white">侧边栏Logo</span>
         <el-switch
           v-model="logoVal"
           inline-prompt
@@ -355,7 +355,7 @@ nextTick(() => {
         />
       </li>
       <li>
-        <span>标签页持久化</span>
+        <span class="dark:text-white">标签页持久化</span>
         <el-switch
           v-model="settings.multiTagsCache"
           inline-prompt
@@ -367,7 +367,7 @@ nextTick(() => {
       </li>
 
       <li>
-        <span>标签风格</span>
+        <span class="dark:text-white">标签风格</span>
         <el-radio-group v-model="markValue" size="small" @change="onChange">
           <el-radio label="card">卡片</el-radio>
           <el-radio label="smart">灵动</el-radio>

src/layout/components/sidebar/horizontal.vue

@@ -67,13 +67,13 @@ watch(
       <!-- 国际化 -->
       <el-dropdown id="header-translation" trigger="click">
         <globalization
-          class="navbar-bg-hover w-40px h-48px p-11px cursor-pointer outline-none"
+          class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-none"
         />
         <template #dropdown>
           <el-dropdown-menu class="translation">
             <el-dropdown-item
               :style="getDropdownItemStyle(locale, 'zh')"
-              :class="['!dark:color-white', getDropdownItemClass(locale, 'zh')]"
+              :class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
               @click="translationCh"
             >
               <span class="check-zh" v-show="locale === 'zh'">
@@ -83,7 +83,7 @@ watch(
             </el-dropdown-item>
             <el-dropdown-item
               :style="getDropdownItemStyle(locale, 'en')"
-              :class="['!dark:color-white', getDropdownItemClass(locale, 'en')]"
+              :class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
               @click="translationEn"
             >
               <span class="check-en" v-show="locale === 'en'">
@@ -98,7 +98,7 @@ watch(
       <el-dropdown trigger="click">
         <span class="el-dropdown-link navbar-bg-hover">
           <img v-if="avatars" :src="avatars" :style="avatarsStyle" />
-          <p v-if="username" class="dark:color-white">{{ username }}</p>
+          <p v-if="username" class="dark:text-white">{{ username }}</p>
         </span>
         <template #dropdown>
           <el-dropdown-menu class="logout">

src/layout/components/sidebar/leftCollapse.vue

@@ -28,7 +28,7 @@ const toggleClick = () => {
     >
       <IconifyIconOffline
         :icon="props.isActive ? 'menu-fold' : 'menu-unfold'"
-        class="cursor-pointer inline-block align-middle color-primary hover:color-primary !dark:hover:color-white w-16px h-16px ml-4 mb-1"
+        class="cursor-pointer inline-block align-middle text-primary hover:text-primary dark:hover:!text-white w-[16px] h-[16px] ml-4 mb-1"
         @click="toggleClick"
       />
     </el-tooltip>

src/layout/components/sidebar/mixNav.vue

@@ -99,13 +99,13 @@ watch(
       <!-- 国际化 -->
       <el-dropdown id="header-translation" trigger="click">
         <globalization
-          class="navbar-bg-hover w-40px h-48px p-11px cursor-pointer outline-none"
+          class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-none"
         />
         <template #dropdown>
           <el-dropdown-menu class="translation">
             <el-dropdown-item
               :style="getDropdownItemStyle(locale, 'zh')"
-              :class="['!dark:color-white', getDropdownItemClass(locale, 'zh')]"
+              :class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
               @click="translationCh"
             >
               <span class="check-zh" v-show="locale === 'zh'">
@@ -115,7 +115,7 @@ watch(
             </el-dropdown-item>
             <el-dropdown-item
               :style="getDropdownItemStyle(locale, 'en')"
-              :class="['!dark:color-white', getDropdownItemClass(locale, 'en')]"
+              :class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
               @click="translationEn"
             >
               <span class="check-en" v-show="locale === 'en'">
@@ -130,7 +130,7 @@ watch(
       <el-dropdown trigger="click">
         <span class="el-dropdown-link navbar-bg-hover">
           <img v-if="avatars" :src="avatars" :style="avatarsStyle" />
-          <p v-if="username" class="dark:color-white">{{ username }}</p>
+          <p v-if="username" class="dark:text-white">{{ username }}</p>
         </span>
         <template #dropdown>
           <el-dropdown-menu class="logout">

src/layout/components/sidebar/topCollapse.vue

@@ -24,7 +24,7 @@ const toggleClick = () => {
   >
     <IconifyIconOffline
       :icon="props.isActive ? 'menu-fold' : 'menu-unfold'"
-      class="inline-block align-middle hover:color-primary !dark:hover:color-white"
+      class="inline-block align-middle hover:text-primary dark:hover:!text-white"
     />
   </div>
 </template>

src/layout/components/tag/index.vue

@@ -490,7 +490,7 @@ onMounted(() => {
         >
           <router-link
             :to="item.path"
-            class="!dark:color-text_color_primary !dark:hover:color-primary"
+            class="dark:!text-text_color_primary dark:hover:!text-primary"
           >
             {{ transformI18n(item.meta.title) }}
           </router-link>
@@ -555,7 +555,7 @@ onMounted(() => {
           placement="bottom-end"
           @command="handleCommand"
         >
-          <IconifyIconOffline icon="arrow-down" class="dark:color-white" />
+          <IconifyIconOffline icon="arrow-down" class="dark:text-white" />
           <template #dropdown>
             <el-dropdown-menu>
               <el-dropdown-item

src/layout/hooks/useNav.ts

@@ -34,7 +34,7 @@ export function useNav() {
 
   const getDropdownItemClass = computed(() => {
     return (locale, t) => {
-      return locale === t ? "" : "!dark:hover:color-primary";
+      return locale === t ? "" : "dark:hover:!text-primary";
     };
   });
 

src/layout/index.vue

@@ -144,8 +144,8 @@ const layoutHeader = defineComponent({
                   {
                     default: () => [
                       !pureSetting.hiddenSideBar
-                        ? h(fullScreen, { class: "dark:color-white" })
-                        : h(exitScreen, { class: "dark:color-white" })
+                        ? h(fullScreen, { class: "dark:text-white" })
+                        : h(exitScreen, { class: "dark:text-white" })
                     ]
                   }
                 )

src/main.ts

@@ -13,7 +13,6 @@ import { injectResponsiveStorage } from "/@/utils/responsive";
 // import Table from "@pureadmin/table";
 // import PureDescriptions from "@pureadmin/descriptions";
 
-import "uno.css";
 import "animate.css";
 // 引入重置样式
 import "./style/reset.scss";

src/style/dark.scss

@@ -127,7 +127,8 @@ html.dark {
   }
 
   .vxe-modal--title,
-  .vxe-button--content {
+  .vxe-button--content,
+  .vxe-modal--header-title {
     color: var(--el-text-color-primary);
   }
 
@@ -135,6 +136,10 @@ html.dark {
     background: var(--el-color-primary) !important;
   }
 
+  .vxe-button {
+    background-color: transparent;
+  }
+
   /* 项目配置面板 */
   .right-panel-items {
     .el-divider__text {

src/style/index.scss

@@ -3,6 +3,7 @@
 @import "./element-plus.scss";
 @import "./sidebar.scss";
 @import "./dark.scss";
+@import "./tailwind.css";
 
 :root {
   --pure-transition-duration: 0.016s;

src/style/tailwind.css

@@ -0,0 +1,29 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .bg-dark {
+    @apply bg-bg_color;
+  }
+
+  .wh-full {
+    @apply w-full h-full;
+  }
+
+  .flex-c {
+    @apply flex justify-center items-center;
+  }
+
+  .flex-ac {
+    @apply flex justify-around items-center;
+  }
+
+  .flex-bc {
+    @apply flex justify-between items-center;
+  }
+
+  .navbar-bg-hover {
+    @apply dark:text-white dark:hover:!bg-[#242424];
+  }
+}

src/views/error/403.vue

@@ -7,7 +7,7 @@ defineOptions({
 </script>
 
 <template>
-  <div class="flex justify-center items-center h-screen-sm">
+  <div class="flex justify-center items-center h-[640px]">
     <noAccess />
     <div class="ml-12">
       <p

src/views/error/404.vue

@@ -7,7 +7,7 @@ defineOptions({
 </script>
 
 <template>
-  <div class="flex justify-center items-center h-screen-sm">
+  <div class="flex justify-center items-center h-[640px]">
     <noExist />
     <div class="ml-12">
       <p

src/views/error/500.vue

@@ -7,7 +7,7 @@ defineOptions({
 </script>
 
 <template>
-  <div class="flex justify-center items-center h-screen-sm">
+  <div class="flex justify-center items-center h-[640px]">
     <noServer />
     <div class="ml-12">
       <p

src/views/login/index.vue

@@ -102,13 +102,13 @@ dataThemeChange();
       <!-- 国际化 -->
       <el-dropdown trigger="click">
         <globalization
-          class="hover:color-primary !hover:bg-transparent w-20px h-20px ml-1.5 cursor-pointer outline-none duration-300"
+          class="hover:text-primary hover:!bg-[transparent] w-[20px] h-[20px] ml-1.5 cursor-pointer outline-none duration-300"
         />
         <template #dropdown>
           <el-dropdown-menu class="translation">
             <el-dropdown-item
               :style="getDropdownItemStyle(locale, 'zh')"
-              :class="['!dark:color-white', getDropdownItemClass(locale, 'zh')]"
+              :class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
               @click="translationCh"
             >
               <IconifyIconOffline
@@ -120,7 +120,7 @@ dataThemeChange();
             </el-dropdown-item>
             <el-dropdown-item
               :style="getDropdownItemStyle(locale, 'en')"
-              :class="['!dark:color-white', getDropdownItemClass(locale, 'en')]"
+              :class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
               @click="translationEn"
             >
               <span class="check-en" v-show="locale === 'en'">
@@ -202,7 +202,7 @@ dataThemeChange();
 
             <Motion :delay="250">
               <el-form-item>
-                <div class="w-full h-20px flex justify-between items-center">
+                <div class="w-full h-[20px] flex justify-between items-center">
                   <el-checkbox v-model="checked">
                     {{ t("login.remember") }}
                   </el-checkbox>
@@ -228,7 +228,7 @@ dataThemeChange();
 
             <Motion :delay="300">
               <el-form-item>
-                <div class="w-full h-20px flex justify-between items-center">
+                <div class="w-full h-[20px] flex justify-between items-center">
                   <el-button
                     v-for="(item, index) in operates"
                     :key="index"

tailwind.config.js

@@ -0,0 +1,20 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: "class",
+  corePlugins: {
+    preflight: false
+  },
+  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
+  theme: {
+    extend: {
+      colors: {
+        bg_color: "var(--el-bg-color)",
+        primary: "var(--el-color-primary)",
+        primary_light_9: "var(--el-color-primary-light-9)",
+        text_color_primary: "var(--el-text-color-primary)",
+        text_color_regular: "var(--el-text-color-regular)",
+        text_color_disabled: "var(--el-text-color-disabled)"
+      }
+    }
+  }
+};

uno.config.ts

@@ -1,49 +0,0 @@
-import { defineConfig, presetUno } from "unocss";
-
-// https://github.com/unocss/unocss#readme
-export default defineConfig({
-  // unocss默认不扫描 node_modules、dist、css以及其扩展 具体实现：https://github.com/unocss/unocss/blob/03c8abe8f5020b3baaed3dfbfe8e2258dd041a7e/packages/vite/src/utils.ts#L3
-  exclude: [
-    "node_modules",
-    "dist",
-    ".git",
-    ".github",
-    ".husky",
-    ".vscode",
-    "build",
-    "locales",
-    "mock",
-    "public",
-    "types",
-    ".eslintrc.js",
-    ".prettierrc.js",
-    "postcss.config.js",
-    "stylelint.config.js",
-    "commitlint.config.js",
-    "README.md",
-    "CHANGELOG.md",
-    "README.en-US.md",
-    "CHANGELOG.en_US.md",
-    "CHANGELOG.zh_CN.md"
-  ],
-  presets: [presetUno({ dark: "class" })],
-  shortcuts: {
-    "bg-dark": "bg-bg_color",
-    "wh-full": "w-full h-full",
-    "flex-wrap": "flex flex-wrap",
-    "flex-c": "flex justify-center items-center",
-    "flex-ac": "flex justify-around items-center",
-    "flex-bc": "flex justify-between items-center",
-    "navbar-bg-hover": "dark:color-white !dark:hover:bg-[#242424]"
-  },
-  theme: {
-    colors: {
-      bg_color: "var(--el-bg-color)",
-      primary: "var(--el-color-primary)",
-      primary_light_9: "var(--el-color-primary-light-9)",
-      text_color_primary: "var(--el-text-color-primary)",
-      text_color_regular: "var(--el-text-color-regular)",
-      text_color_disabled: "var(--el-text-color-disabled)"
-    }
-  }
-});