refactor: use tailwindcss replace unocss

2022-09-07 16:04:26 +08:00 · 2022-09-07 16:04:26 +08:00 · 60cdaf4697
commit 60cdaf4697
parent d3cabb0f33
30 changed files with 472 additions and 730 deletions
--- a/.eslintignore
+++ b/.eslintignore
@ -1,4 +1,10 @@
 public
 dist
 *.d.ts
-package.json
+package.json
+.eslintrc.js
+.prettierrc.js
+commitlint.config.js
+postcss.config.js
+tailwind.config.js
+stylelint.config.js
--- a/.vscode/extensions.json
+++ b/.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"
  ]
 }
--- a/build/plugins.ts
+++ b/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"] }),
--- a/package.json
+++ b/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",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/postcss.config.js
+++ b/postcss.config.js
@ -1,3 +1,7 @@
 module.exports = {
-  plugins: [require("autoprefixer"), require("postcss-import")]
+  plugins: {
+    "postcss-import": {},
+    tailwindcss: {},
+    autoprefixer: {}
+  }
 };
--- a/src/layout/components/navbar.vue
+++ b/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">
--- a/src/layout/components/notice/noticeItem.vue
+++ b/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>
--- a/src/layout/components/panel/index.vue
+++ b/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>
--- a/src/layout/components/screenfull/index.vue
+++ b/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
--- a/src/layout/components/search/components/SearchFooter.vue
+++ b/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" />
      确认
--- a/src/layout/components/search/index.vue
+++ b/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" />
--- a/src/layout/components/setting/index.vue
+++ b/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>
--- a/src/layout/components/sidebar/horizontal.vue
+++ b/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">
--- a/src/layout/components/sidebar/leftCollapse.vue
+++ b/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>
--- a/src/layout/components/sidebar/mixNav.vue
+++ b/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">
--- a/src/layout/components/sidebar/topCollapse.vue
+++ b/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>
--- a/src/layout/components/tag/index.vue
+++ b/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
--- a/src/layout/hooks/useNav.ts
+++ b/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";
    };
  });

--- a/src/layout/index.vue
+++ b/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" })
                    ]
                  }
                )
--- a/src/main.ts
+++ b/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";
--- a/src/style/dark.scss
+++ b/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 {
--- a/src/style/index.scss
+++ b/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;
--- a/src/style/tailwind.css
+++ b/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];
+  }
+}
--- a/src/views/error/403.vue
+++ b/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
--- a/src/views/error/404.vue
+++ b/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
--- a/src/views/error/500.vue
+++ b/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
--- a/src/views/login/index.vue
+++ b/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"
--- a/tailwind.config.js
+++ b/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)"
+      }
+    }
+  }
+};
--- a/uno.config.ts
+++ b/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)"
-    }
-  }
-});