refactor: use tailwindcss replace unocss

2022-09-07 16:04:26 +08:00
parent d3cabb0f33
commit 60cdaf4697
30 changed files with 472 additions and 730 deletions
--- 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"