refactor: 升级tailwindcss至v4版本，带来更快的构建速度、更简化的安装和配置、提供专属vite插件 (#1203)

2025-11-09 13:53:38 +08:00 · 2025-04-09 19:09:45 +08:00
parent 583feae7b7
commit e08626d443
107 changed files with 2300 additions and 2173 deletions
--- a/src/layout/components/lay-navbar/index.vue
+++ b/src/layout/components/lay-navbar/index.vue
@@ -33,7 +33,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
 </script>

 <template>
-  <div class="navbar bg-[#fff] shadow-sm shadow-[rgba(0,21,41,0.08)]">
+  <div class="navbar bg-[#fff] shadow-xs shadow-[rgba(0,21,41,0.08)]">
    <LaySidebarTopCollapse
      v-if="device === 'mobile'"
      class="hamburger-container"
@@ -54,13 +54,13 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
      <!-- 国际化 -->
      <el-dropdown id="header-translation" trigger="click">
        <GlobalizationIcon
-          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-hidden"
        />
        <template #dropdown>
          <el-dropdown-menu class="translation">
            <el-dropdown-item
              :style="getDropdownItemStyle(locale, 'zh')"
-              :class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
+              :class="['dark:text-white!', getDropdownItemClass(locale, 'zh')]"
              @click="translationCh"
            >
              <IconifyIconOffline
@@ -72,7 +72,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
            </el-dropdown-item>
            <el-dropdown-item
              :style="getDropdownItemStyle(locale, 'en')"
-              :class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
+              :class="['dark:text-white!', getDropdownItemClass(locale, 'en')]"
              @click="translationEn"
            >
              <span v-show="locale === 'en'" class="check-en">
--- a/src/layout/components/lay-notice/components/NoticeItem.vue
+++ b/src/layout/components/lay-notice/components/NoticeItem.vue
@@ -49,7 +49,7 @@ function hoverDescription(event, description) {

 <template>
  <div
-    class="notice-container border-b-[1px] border-solid border-[#f0f0f0] dark:border-[#303030]"
+    class="notice-container border-0 border-b-[1px] border-solid border-[#f0f0f0] dark:border-[#303030]"
  >
    <el-avatar
      v-if="noticeItem.avatar"
--- a/src/layout/components/lay-panel/index.vue
+++ b/src/layout/components/lay-panel/index.vue
@@ -16,7 +16,7 @@ const iconClass = computed(() => {
    "flex",
    "justify-center",
    "items-center",
-    "outline-none",
+    "outline-hidden",
    "rounded-[4px]",
    "cursor-pointer",
    "transition-colors",
@@ -51,7 +51,7 @@ onBeforeUnmount(() => {
    <div class="right-panel-background" />
    <div ref="target" class="right-panel bg-bg_color">
      <div
-        class="project-configuration border-b-[1px] border-solid border-[var(--pure-border-color)]"
+        class="project-configuration border-0 border-b-[1px] border-solid border-[var(--pure-border-color)]"
      >
        <h4 class="dark:text-white">
          {{ t("panel.pureSystemSet") }}
@@ -78,7 +78,7 @@ onBeforeUnmount(() => {
      </el-scrollbar>

      <div
-        class="flex justify-end p-3 border-t-[1px] border-solid border-[var(--pure-border-color)]"
+        class="flex justify-end p-3 border-0 border-t-[1px] border-solid border-[var(--pure-border-color)]"
      >
        <el-button
          v-tippy="{
--- a/src/layout/components/lay-setting/index.vue
+++ b/src/layout/components/lay-setting/index.vue
@@ -20,8 +20,8 @@ import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
 import { useDark, useGlobal, debounce, isNumber } from "@pureadmin/utils";

 import Check from "~icons/ep/check";
-import LeftArrow from "~icons/ri/arrow-left-s-line";
-import RightArrow from "~icons/ri/arrow-right-s-line";
+import LeftArrow from "~icons/ri/arrow-left-s-line?width=20&height=20";
+import RightArrow from "~icons/ri/arrow-right-s-line?width=20&height=20";
 import DayIcon from "@/assets/svg/day.svg?component";
 import DarkIcon from "@/assets/svg/dark.svg?component";
 import SystemIcon from "@/assets/svg/system.svg?component";
@@ -189,7 +189,7 @@ const getThemeColor = computed(() => {
 });

 const pClass = computed(() => {
-  return ["mb-[12px]", "font-medium", "text-sm", "dark:text-white"];
+  return ["mb-[12px]!", "font-medium", "text-sm", "dark:text-white"];
 });

 const themeOptions = computed<Array<OptionsType>>(() => {
@@ -335,7 +335,7 @@ onUnmounted(() => removeMatchMedia);
        "
      />

-      <p :class="['mt-5', pClass]">{{ t("panel.pureThemeColor") }}</p>
+      <p :class="['mt-5!', pClass]">{{ t("panel.pureThemeColor") }}</p>
      <ul class="theme-color">
        <li
          v-for="(item, index) in themeColors"
@@ -354,7 +354,7 @@ onUnmounted(() => removeMatchMedia);
        </li>
      </ul>

-      <p :class="['mt-5', pClass]">{{ t("panel.pureLayoutModel") }}</p>
+      <p :class="['mt-5!', pClass]">{{ t("panel.pureLayoutModel") }}</p>
      <ul class="pure-theme">
        <li
          ref="verticalRef"
@@ -397,7 +397,7 @@ onUnmounted(() => removeMatchMedia);
      </ul>

      <span v-if="useAppStoreHook().getViewportWidth > 1280">
-        <p :class="['mt-5', pClass]">{{ t("panel.pureStretch") }}</p>
+        <p :class="['mt-5!', pClass]">{{ t("panel.pureStretch") }}</p>
        <Segmented
          resize
          class="mb-2 select-none"
@@ -426,21 +426,19 @@ onUnmounted(() => removeMatchMedia);
          >
            <IconifyIconOffline
              :icon="settings.stretch ? RightArrow : LeftArrow"
-              height="20"
            />
            <div
-              class="flex-grow border-b border-dashed"
+              class="grow border-0 border-b border-dashed"
              style="border-color: var(--el-color-primary)"
            />
            <IconifyIconOffline
              :icon="settings.stretch ? LeftArrow : RightArrow"
-              height="20"
            />
          </div>
        </button>
      </span>

-      <p :class="['mt-4', pClass]">{{ t("panel.pureTagsStyle") }}</p>
+      <p :class="['mt-4!', pClass]">{{ t("panel.pureTagsStyle") }}</p>
      <Segmented
        resize
        class="select-none"
@@ -449,7 +447,7 @@ onUnmounted(() => removeMatchMedia);
        @change="onChange"
      />

-      <p class="mt-5 font-medium text-sm dark:text-white">
+      <p class="mt-5! font-medium text-sm dark:text-white">
        {{ t("panel.pureInterfaceDisplay") }}
      </p>
      <ul class="setting">
--- a/src/layout/components/lay-sidebar/NavHorizontal.vue
+++ b/src/layout/components/lay-sidebar/NavHorizontal.vue
@@ -84,13 +84,13 @@ onMounted(() => {
      <!-- 国际化 -->
      <el-dropdown id="header-translation" trigger="click">
        <GlobalizationIcon
-          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-hidden"
        />
        <template #dropdown>
          <el-dropdown-menu class="translation">
            <el-dropdown-item
              :style="getDropdownItemStyle(locale, 'zh')"
-              :class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
+              :class="['dark:text-white!', getDropdownItemClass(locale, 'zh')]"
              @click="translationCh"
            >
              <span v-show="locale === 'zh'" class="check-zh">
@@ -100,7 +100,7 @@ onMounted(() => {
            </el-dropdown-item>
            <el-dropdown-item
              :style="getDropdownItemStyle(locale, 'en')"
-              :class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
+              :class="['dark:text-white!', getDropdownItemClass(locale, 'en')]"
              @click="translationEn"
            >
              <span v-show="locale === 'en'" class="check-en">
--- a/src/layout/components/lay-sidebar/NavMix.vue
+++ b/src/layout/components/lay-sidebar/NavMix.vue
@@ -105,13 +105,13 @@ watch(
      <!-- 国际化 -->
      <el-dropdown id="header-translation" trigger="click">
        <GlobalizationIcon
-          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-hidden"
        />
        <template #dropdown>
          <el-dropdown-menu class="translation">
            <el-dropdown-item
              :style="getDropdownItemStyle(locale, 'zh')"
-              :class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
+              :class="['dark:text-white!', getDropdownItemClass(locale, 'zh')]"
              @click="translationCh"
            >
              <span v-show="locale === 'zh'" class="check-zh">
@@ -121,7 +121,7 @@ watch(
            </el-dropdown-item>
            <el-dropdown-item
              :style="getDropdownItemStyle(locale, 'en')"
-              :class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
+              :class="['dark:text-white!', getDropdownItemClass(locale, 'en')]"
              @click="translationEn"
            >
              <span v-show="locale === 'en'" class="check-en">
--- a/src/layout/components/lay-sidebar/components/SidebarBreadCrumb.vue
+++ b/src/layout/components/lay-sidebar/components/SidebarBreadCrumb.vue
@@ -105,12 +105,12 @@ watch(
 </script>

 <template>
-  <el-breadcrumb class="!leading-[50px] select-none" separator="/">
+  <el-breadcrumb class="leading-[50px]! select-none" separator="/">
    <transition-group name="breadcrumb">
      <el-breadcrumb-item
        v-for="item in levelList"
        :key="item.path"
-        class="!inline !items-stretch"
+        class="inline! items-stretch!"
      >
        <a @click.prevent="handleLink(item)">
          {{ transformI18n(item.meta.title) }}
--- a/src/layout/components/lay-sidebar/components/SidebarItem.vue
+++ b/src/layout/components/lay-sidebar/components/SidebarItem.vue
@@ -144,7 +144,7 @@ function resolvePath(routePath) {
            item?.pathList?.length === 2)
        "
        truncated
-        class="!w-full !pl-4 !text-inherit"
+        class="w-full! pl-4! text-inherit!"
      >
        {{ transformI18n(onlyOneChild.meta.title) }}
      </el-text>
@@ -156,7 +156,7 @@ function resolvePath(routePath) {
              offset: [0, -10],
              theme: tooltipEffect
            }"
-            class="!w-full !text-inherit"
+            class="w-full! text-inherit!"
          >
            {{ transformI18n(onlyOneChild.meta.title) }}
          </ReText>
@@ -196,9 +196,9 @@ function resolvePath(routePath) {
          theme: tooltipEffect
        }"
        :class="{
-          '!w-full': true,
-          '!text-inherit': true,
-          '!pl-4':
+          'w-full!': true,
+          'text-inherit!': true,
+          'pl-4!':
            layout !== 'horizontal' &&
            isCollapse &&
            !toRaw(item.meta.icon) &&
--- a/src/layout/components/lay-sidebar/components/SidebarLeftCollapse.vue
+++ b/src/layout/components/lay-sidebar/components/SidebarLeftCollapse.vue
@@ -23,7 +23,7 @@ const iconClass = computed(() => {
    "mb-1",
    "w-[16px]",
    "h-[16px]",
-    "inline-block",
+    "inline-block!",
    "align-middle",
    "cursor-pointer",
    "duration-[100ms]"
--- a/src/layout/components/lay-sidebar/components/SidebarTopCollapse.vue
+++ b/src/layout/components/lay-sidebar/components/SidebarTopCollapse.vue
@@ -32,7 +32,7 @@ const toggleClick = () => {
  >
    <IconifyIconOffline
      :icon="isActive ? MenuFold : MenuUnfold"
-      class="inline-block align-middle hover:text-primary dark:hover:!text-white"
+      class="inline-block align-middle hover:text-primary dark:hover:text-white!"
    />
  </div>
 </template>
--- a/src/layout/components/lay-tag/index.vue
+++ b/src/layout/components/lay-tag/index.vue
@@ -589,7 +589,7 @@ onBeforeUnmount(() => {
        >
          <template v-if="showModel !== 'chrome'">
            <span
-              class="tag-title dark:!text-text_color_primary dark:hover:!text-primary"
+              class="tag-title dark:text-text_color_primary! dark:hover:text-primary!"
            >
              {{ transformI18n(item.meta.title) }}
            </span>
--- a/src/layout/hooks/useNav.ts
+++ b/src/layout/hooks/useNav.ts
@@ -64,7 +64,7 @@ export function useNav() {

  const getDropdownItemClass = computed(() => {
    return (locale, t) => {
-      return locale === t ? "" : "dark:hover:!text-primary";
+      return locale === t ? "" : "dark:hover:text-primary!";
    };
  });