refactor: replace tailwindcss with unocss (#55)

使用 UnoCSS 代替 TailwindCSS，移除 class 的前缀并保证不会污染 Core 的样式。 /kind improvement ```release-note None ```
halo-sigs · Aug 12, 2024 · 130075b · 130075b
1 parent 416cd3f
commit 130075b
Show file tree

Hide file tree

Showing 36 changed files with 3,264 additions and 2,775 deletions.
diff --git a/console/.eslintrc.cjs b/console/.eslintrc.cjs
@@ -8,6 +8,7 @@ module.exports = {
     "eslint:recommended",
     "@vue/eslint-config-typescript/recommended",
     "@vue/eslint-config-prettier",
+    "@unocss"
   ],
   env: {
     "vue/setup-compiler-macros": true,

diff --git a/console/package.json b/console/package.json
@@ -7,7 +7,7 @@
     "test:unit": "vitest --environment jsdom",
     "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
-    "prettier": "prettier --write './src/**/*.{vue,js,jsx,ts,tsx,css,scss,json,yml,yaml,html}'"
+    "prettier": "prettier --write src/"
   },
   "dependencies": {
     "@halo-dev/api-client": "^2.17.0",
@@ -36,21 +36,19 @@
     "@types/jsdom": "^16.2.15",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^16.18.101",
+    "@unocss/eslint-config": "^0.61.5",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vue/eslint-config-prettier": "^7.1.0",
     "@vue/eslint-config-typescript": "^10.0.0",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.1.3",
-    "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "eslint-plugin-vue": "^8.7.1",
     "jsdom": "^19.0.0",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.39",
     "prettier": "^3.3.2",
-    "prettier-plugin-tailwindcss": "^0.6.5",
-    "tailwindcss": "^3.4.4",
     "typescript": "~5.1.6",
+    "unocss": "^0.61.5",
     "unplugin-icons": "^0.16.6",
     "vite": "^5.3.2",
     "vitest": "^0.33.0",

diff --git a/console/pnpm-lock.yaml b/console/pnpm-lock.yaml
diff --git a/console/postcss.config.cjs b/console/postcss.config.cjs
diff --git a/console/prettier.config.cjs b/console/prettier.config.cjs
@@ -1,3 +1,7 @@
 module.exports = {
-  plugins: ["prettier-plugin-tailwindcss"],
-};
+  semi: false,
+  tabWidth: 2,
+  singleQuote: true,
+  printWidth: 100,
+  trailingComma: 'none'
+}
diff --git a/console/src/components/AttachmentPolicy.vue b/console/src/components/AttachmentPolicy.vue
@@ -1,109 +1,97 @@
 <script setup lang="ts">
-import type { MigrateAttachment } from "@/types";
-import { coreApiClient, type Policy } from "@halo-dev/api-client";
-import { VAlert } from "@halo-dev/components";
-import { useQuery } from "@tanstack/vue-query";
-import { groupBy } from "lodash-es";
-import { computed, reactive, ref, watch } from "vue";
+import type { MigrateAttachment } from '@/types'
+import { coreApiClient, type Policy } from '@halo-dev/api-client'
+import { VAlert } from '@halo-dev/components'
+import { useQuery } from '@tanstack/vue-query'
+import { groupBy } from 'lodash-es'
+import { computed, reactive, ref, watch } from 'vue'
 
 const props = defineProps<{
-  activatedPluginNames: string[];
-  attachments?: MigrateAttachment[];
-}>();
+  activatedPluginNames: string[]
+  attachments?: MigrateAttachment[]
+}>()
 
 const emit = defineEmits<{
-  (event: "policyChange", value: Map<string, string>): void;
-}>();
+  (event: 'policyChange', value: Map<string, string>): void
+}>()
 
-const attachmentTypes = ref<{ type: string; policyName: string }[]>([]);
-const isSelectLocal = ref(false);
-const policyOptions = ref<
-  { label: string; value: string; templateName: string }[]
->([]);
-const localPolicyOptions = ref<
-  { label: string; value: string; templateName: string }[]
->([]);
+const attachmentTypes = ref<{ type: string; policyName: string }[]>([])
+const isSelectLocal = ref(false)
+const policyOptions = ref<{ label: string; value: string; templateName: string }[]>([])
+const localPolicyOptions = ref<{ label: string; value: string; templateName: string }[]>([])
 
 useQuery({
-  queryKey: ["attachment-policy"],
+  queryKey: ['attachment-policy'],
   queryFn: async () => {
     if (!props.attachments) {
-      return;
+      return
     }
 
-    const { data } = await coreApiClient.storage.policy.listPolicy();
-    return data.items;
+    const { data } = await coreApiClient.storage.policy.listPolicy()
+    return data.items
   },
   onSuccess(data: Policy[]) {
     policyOptions.value = data.map((policy) => {
       return {
         label: policy.spec.displayName,
         value: policy.metadata.name,
-        templateName: policy.spec.templateName,
-      };
-    });
-    attachmentTypes.value = Object.keys(groupBy(props.attachments, "type")).map(
-      (type) => {
-        return {
-          type: type,
-          policyName:
-            type == "LOCAL"
-              ? localPolicyOptions.value[0]?.value
-              : policyOptions.value[0]?.value,
-        };
-      },
-    );
-    localPolicyOptions.value = policyOptions.value.filter(
-      (item) => item.templateName === "local",
-    );
-    if (!props.activatedPluginNames.includes("PluginS3ObjectStorage")) {
-      policyOptions.value = localPolicyOptions.value;
+        templateName: policy.spec.templateName
+      }
+    })
+    attachmentTypes.value = Object.keys(groupBy(props.attachments, 'type')).map((type) => {
+      return {
+        type: type,
+        policyName:
+          type == 'LOCAL' ? localPolicyOptions.value[0]?.value : policyOptions.value[0]?.value
+      }
+    })
+    localPolicyOptions.value = policyOptions.value.filter((item) => item.templateName === 'local')
+    if (!props.activatedPluginNames.includes('PluginS3ObjectStorage')) {
+      policyOptions.value = localPolicyOptions.value
     }
   },
-  enabled: computed(() => !!props.attachments),
-});
+  enabled: computed(() => !!props.attachments)
+})
 
-const typeToPolicyMap = reactive(new Map<string, string>());
+const typeToPolicyMap = reactive(new Map<string, string>())
 
 watch(
   () => attachmentTypes.value,
   (newAttachmentTypes) => {
-    let isToast = false;
+    let isToast = false
     for (let { type, policyName } of newAttachmentTypes) {
-      if (type !== "LOCAL") {
+      if (type !== 'LOCAL') {
         isToast =
           policyOptions.value.filter(
-            (item) =>
-              item.value === policyName && item.templateName === "local",
-          ).length > 0;
+            (item) => item.value === policyName && item.templateName === 'local'
+          ).length > 0
       }
       if (isToast) {
-        break;
+        break
       }
     }
-    isSelectLocal.value = isToast;
+    isSelectLocal.value = isToast
     newAttachmentTypes.forEach((item) => {
-      typeToPolicyMap.set(item.type, item.policyName);
-    });
-    emit("policyChange", typeToPolicyMap);
+      typeToPolicyMap.set(item.type, item.policyName)
+    })
+    emit('policyChange', typeToPolicyMap)
   },
   {
-    deep: true,
-  },
-);
+    deep: true
+  }
+)
 </script>
 <template>
   <div>
-    <div class="migrate-mb-5">
+    <div class="mb-5">
       <VAlert
         v-if="!activatedPluginNames.includes('PluginS3ObjectStorage')"
         title="警告"
         type="warning"
         :closable="false"
       >
         <template #description>
-          当前未安装/启用 S3
-          插件，所有附件只能导入到本地，原云存储文件将无法远程管理。可前往
+          当前未安装/启用 S3 插件，所有附件只能导入到本地，原云存储文件将无法远程管理。可前往
           <a href="https://halo.run/store/apps/app-Qxhpp" target="_blank">
             https://halo.run/store/apps/app-Qxhpp
           </a>
@@ -118,11 +106,7 @@ watch(
     </div>
 
     <ul>
-      <li
-        v-for="(type, index) in attachmentTypes"
-        :key="index"
-        class="migrate-mb-4"
-      >
+      <li v-for="(type, index) in attachmentTypes" :key="index" class="mb-4">
         <FormKit
           v-model="type.policyName"
           type="select"

diff --git a/console/src/components/FileSelector.vue b/console/src/components/FileSelector.vue
@@ -1,42 +1,42 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
-import { type UseFileDialogOptions, useFileDialog } from "@vueuse/core";
-const { files, open, reset } = useFileDialog();
+import { type UseFileDialogOptions, useFileDialog } from '@vueuse/core'
+import { ref, watch } from 'vue'
+const { files, open, reset } = useFileDialog()
 const props = defineProps<{
-  options?: UseFileDialogOptions;
-}>();
+  options?: UseFileDialogOptions
+}>()
 
 const emit = defineEmits<{
-  (event: "fileChange", files: FileList): void;
-}>();
+  (event: 'fileChange', files: FileList): void
+}>()
 
-const selectedFileName = ref<string>();
+const selectedFileName = ref<string>()
 
 const handleOpenFile = () => {
-  reset();
-  open(props.options);
-};
+  reset()
+  open(props.options)
+}
 
 watch(
   () => files.value,
   () => {
     if (!files.value) {
-      return;
+      return
     }
     for (let i = 0; i < files.value.length; i++) {
-      selectedFileName.value = files.value[i].name + " ";
+      selectedFileName.value = files.value[i].name + ' '
     }
-    emit("fileChange", files.value);
-  },
-);
+    emit('fileChange', files.value)
+  }
+)
 </script>
 <template>
-  <div class="migrate-w-full" @click="handleOpenFile">
+  <div class="w-full" @click="handleOpenFile">
     <label
-      class="migrate-text-blue migrate-border-blue migrate-flex migrate-cursor-pointer migrate-flex-col migrate-items-center migrate-rounded-lg migrate-border migrate-bg-white migrate-px-4 migrate-py-6 migrate-tracking-wide hover:migrate-bg-blue-400 hover:migrate-text-white"
+      class="text-blue border-blue flex cursor-pointer flex-col items-center rounded-lg border bg-white px-4 py-6 tracking-wide hover:bg-blue-400 hover:text-white"
     >
       <svg
-        class="migrate-h-8 migrate-w-8"
+        class="h-8 w-8"
         fill="currentColor"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 20 20"
@@ -45,13 +45,8 @@ watch(
           d="M16.88 9.1A4 4 0 0 1 16 17H5a5 5 0 0 1-1-9.9V7a3 3 0 0 1 4.52-2.59A4.98 4.98 0 0 1 17 8c0 .38-.04.74-.12 1.1zM11 11h3l-4-4-4 4h3v3h2v-3z"
         />
       </svg>
-      <span class="migrate-mt-2 migrate-text-base migrate-leading-normal">
-        选择文件
-      </span>
-      <p
-        v-if="selectedFileName"
-        class="text-xs text-gray-500 dark:text-gray-400"
-      >
+      <span class="mt-2 text-base leading-normal"> 选择文件 </span>
+      <p v-if="selectedFileName" class="text-xs text-gray-500 dark:text-gray-400">
         已选择文件: {{ selectedFileName }}
       </p>
     </label>