refactor: replace tailwindcss with unocss (#86)

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

Hide file tree

Showing 20 changed files with 1,179 additions and 625 deletions.
diff --git a/build.gradle b/build.gradle
@@ -51,6 +51,6 @@ build {
 }
 
 halo {
-    version = '2.15'
+    version = '2.17'
     debug = true
 }
diff --git a/console/.env b/console/.env
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/env.d.ts b/console/env.d.ts
@@ -1,6 +1,2 @@
 /// <reference types="vite/client" />
-
-declare module "*.vue" {
-  import Vue from "vue";
-  export default Vue;
-}
+/// <reference types="unplugin-icons/types/vue" />
diff --git a/console/package.json b/console/package.json
@@ -31,22 +31,20 @@
     "@types/jsdom": "^16.2.15",
     "@types/lodash.clonedeep": "^4.5.9",
     "@types/node": "^16.18.103",
+    "@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": "^2.8.8",
-    "prettier-plugin-tailwindcss": "^0.1.13",
     "sass": "^1.77.8",
-    "tailwindcss": "^3.4.6",
     "typescript": "~5.5.3",
+    "unocss": "^0.61.5",
     "unplugin-icons": "^0.15.3",
     "vite": "^5.3.4",
     "vite-plugin-vue-setup-extend": "^0.4.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,6 @@
 module.exports = {
-  plugins: [require("prettier-plugin-tailwindcss")],
+  printWidth: 120,
+  tabWidth: 2,
+  useTabs: false,
+  endOfLine: "lf",
 };
diff --git a/console/src/components/GroupEditingModal.vue b/console/src/components/GroupEditingModal.vue
@@ -53,8 +53,7 @@ const handleCreateOrUpdateGroup = async () => {
   annotationsFormRef.value?.handleSubmit();
   await nextTick();
 
-  const { customAnnotations, annotations, customFormInvalid, specFormInvalid } =
-    annotationsFormRef.value || {};
+  const { customAnnotations, annotations, customFormInvalid, specFormInvalid } = annotationsFormRef.value || {};
   if (customFormInvalid || specFormInvalid) {
     return;
   }
@@ -72,10 +71,7 @@ const handleCreateOrUpdateGroup = async () => {
         formState.value
       );
     } else {
-      await axiosInstance.post(
-        "/apis/core.halo.run/v1alpha1/linkgroups",
-        formState.value
-      );
+      await axiosInstance.post("/apis/core.halo.run/v1alpha1/linkgroups", formState.value);
     }
 
     Toast.success("保存成功");
@@ -111,12 +107,7 @@ watch(
 );
 </script>
 <template>
-  <VModal
-    :visible="visible"
-    :width="600"
-    :title="modalTitle"
-    @update:visible="onVisibleChange"
-  >
+  <VModal :visible="visible" :width="600" :title="modalTitle" @update:visible="onVisibleChange">
     <FormKit
       v-if="formVisible"
       id="link-group-form"
@@ -129,16 +120,11 @@ watch(
       <div class="md:grid md:grid-cols-4 md:gap-6">
         <div class="md:col-span-1">
           <div class="sticky top-0">
-            <span class="text-base font-medium text-gray-900"> 常规 </span>
+            <span class="text-base text-gray-900 font-medium"> 常规 </span>
           </div>
         </div>
-        <div class="mt-5 divide-y divide-gray-100 md:col-span-3 md:mt-0">
-          <FormKit
-            name="displayName"
-            label="分组名称"
-            type="text"
-            validation="required"
-          ></FormKit>
+        <div class="mt-5 md:col-span-3 md:mt-0 divide-y divide-gray-100">
+          <FormKit name="displayName" label="分组名称" type="text" validation="required"></FormKit>
         </div>
       </div>
     </FormKit>
@@ -150,10 +136,10 @@ watch(
     <div class="md:grid md:grid-cols-4 md:gap-6">
       <div class="md:col-span-1">
         <div class="sticky top-0">
-          <span class="text-base font-medium text-gray-900"> 元数据 </span>
+          <span class="text-base text-gray-900 font-medium"> 元数据 </span>
         </div>
       </div>
-      <div class="mt-5 divide-y divide-gray-100 md:col-span-3 md:mt-0">
+      <div class="mt-5 md:col-span-3 md:mt-0 divide-y divide-gray-100">
         <AnnotationsForm
           v-if="visible"
           :key="formState.metadata.name"
@@ -167,13 +153,7 @@ watch(
 
     <template #footer>
       <VSpace>
-        <VButton
-          :loading="saving"
-          type="secondary"
-          @click="$formkit.submit('link-group-form')"
-        >
-          提交
-        </VButton>
+        <VButton :loading="saving" type="secondary" @click="$formkit.submit('link-group-form')"> 提交 </VButton>
         <VButton @click="onVisibleChange(false)"> 取消</VButton>
       </VSpace>
     </template>

diff --git a/console/src/components/GroupList.vue b/console/src/components/GroupList.vue
@@ -48,10 +48,7 @@ const onPriorityChange = async () => {
       if (group.spec) {
         group.spec.priority = index;
       }
-      return axiosInstance.put(
-        `/apis/core.halo.run/v1alpha1/linkgroups/${group.metadata.name}`,
-        group
-      );
+      return axiosInstance.put(`/apis/core.halo.run/v1alpha1/linkgroups/${group.metadata.name}`, group);
     });
     if (promises) {
       await Promise.all(promises);
@@ -70,9 +67,7 @@ const handleDelete = async (group: LinkGroup) => {
     confirmType: "danger",
     onConfirm: async () => {
       try {
-        await axiosInstance.delete(
-          `/apis/core.halo.run/v1alpha1/linkgroups/${group.metadata.name}`
-        );
+        await axiosInstance.delete(`/apis/core.halo.run/v1alpha1/linkgroups/${group.metadata.name}`);
 
         const { data } = await axiosInstance.get<LinkList>(
           `/apis/api.plugin.halo.run/v1alpha1/plugins/PluginLinks/links`,
@@ -86,9 +81,7 @@ const handleDelete = async (group: LinkGroup) => {
         );
 
         const deleteLinkPromises = data.items.map((link) =>
-          axiosInstance.delete(
-            `/apis/core.halo.run/v1alpha1/links/${link.metadata.name}`
-          )
+          axiosInstance.delete(`/apis/core.halo.run/v1alpha1/links/${link.metadata.name}`)
         );
 
         if (deleteLinkPromises) {
@@ -113,17 +106,13 @@ function onEditingModalClose() {
 }
 </script>
 <template>
-  <GroupEditingModal
-    v-model:visible="groupEditingModal"
-    :group="selectedGroup"
-    @close="onEditingModalClose"
-  />
+  <GroupEditingModal v-model:visible="groupEditingModal" :group="selectedGroup" @close="onEditingModalClose" />
   <VCard :body-class="['!p-0']" title="分组">
     <VLoading v-if="isLoading" />
     <Transition v-else appear name="fade">
       <Draggable
         v-model="draggableGroups"
-        class="links-box-border links-h-full links-w-full links-divide-y links-divide-gray-100"
+        class="box-border size-full divide-y divide-gray-100"
         group="group"
         handle=".drag-element"
         item-key="metadata.name"
@@ -132,7 +121,7 @@ function onEditingModalClose() {
       >
         <template #header>
           <li @click="groupQuery = ''">
-            <VEntity class="links-group" :is-selected="!groupQuery">
+            <VEntity class="group" :is-selected="!groupQuery">
               <template #start>
                 <VEntityField title="全部"> </VEntityField>
               </template>
@@ -141,13 +130,10 @@ function onEditingModalClose() {
         </template>
         <template #item="{ element: group }">
           <li @click="groupQuery = group.metadata.name">
-            <VEntity
-              :is-selected="groupQuery === group.metadata.name"
-              class="links-group"
-            >
+            <VEntity :is-selected="groupQuery === group.metadata.name" class="group">
               <template #prepend>
                 <div
-                  class="drag-element links-absolute links-inset-y-0 links-left-0 links-hidden links-w-3.5 links-cursor-move links-items-center links-bg-gray-100 links-transition-all hover:links-bg-gray-200 group-hover:links-flex"
+                  class="drag-element absolute inset-y-0 left-0 hidden w-3.5 cursor-move items-center bg-gray-100 transition-all group-hover:flex hover:bg-gray-200"
                 >
                   <IconList class="h-3.5 w-3.5" />
                 </div>
@@ -166,12 +152,8 @@ function onEditingModalClose() {
               </template>
 
               <template #dropdownItems>
-                <VDropdownItem @click="handleOpenEditingModal(group)">
-                  修改
-                </VDropdownItem>
-                <VDropdownItem type="danger" @click="handleDelete(group)">
-                  删除
-                </VDropdownItem>
+                <VDropdownItem @click="handleOpenEditingModal(group)"> 修改 </VDropdownItem>
+                <VDropdownItem type="danger" @click="handleDelete(group)"> 删除 </VDropdownItem>
               </template>
             </VEntity>
           </li>

diff --git a/console/src/components/LinkEditingModal.vue b/console/src/components/LinkEditingModal.vue
@@ -91,8 +91,7 @@ const handleSaveLink = async () => {
   annotationsFormRef.value?.handleSubmit();
   await nextTick();
 
-  const { customAnnotations, annotations, customFormInvalid, specFormInvalid } =
-    annotationsFormRef.value || {};
+  const { customAnnotations, annotations, customFormInvalid, specFormInvalid } = annotationsFormRef.value || {};
   if (customFormInvalid || specFormInvalid) {
     return;
   }
@@ -111,10 +110,7 @@ const handleSaveLink = async () => {
       );
     } else {
       formState.value.spec.groupName = groupQuery.value;
-      await axiosInstance.post<Link>(
-        `/apis/core.halo.run/v1alpha1/links`,
-        formState.value
-      );
+      await axiosInstance.post<Link>(`/apis/core.halo.run/v1alpha1/links`, formState.value);
     }
 
     Toast.success("保存成功");
@@ -156,12 +152,7 @@ const handleGetLinkDetail = async () => {
 };
 </script>
 <template>
-  <VModal
-    :title="modalTitle"
-    :visible="visible"
-    :width="650"
-    @update:visible="onVisibleChange"
-  >
+  <VModal :title="modalTitle" :visible="visible" :width="650" @update:visible="onVisibleChange">
     <template #actions>
       <slot name="append-actions" />
     </template>
@@ -179,36 +170,25 @@ const handleGetLinkDetail = async () => {
       <div class="md:grid md:grid-cols-4 md:gap-6">
         <div class="md:col-span-1">
           <div class="sticky top-0">
-            <span class="text-base font-medium text-gray-900"> 常规 </span>
+            <span class="text-base text-gray-900 font-medium"> 常规 </span>
           </div>
         </div>
-        <div class="mt-5 divide-y divide-gray-100 md:col-span-3 md:mt-0">
+        <div class="mt-5 md:col-span-3 md:mt-0 divide-y divide-gray-100">
           <FormKit type="url" name="url" validation="required" label="网站地址">
             <template #suffix>
               <div
                 v-tooltip="{
                   content: '获取网站信息',
                 }"
-                class="group flex h-full cursor-pointer items-center px-3 transition-all"
+                class="group h-full flex cursor-pointer items-center px-3 transition-all"
                 @click="handleGetLinkDetail"
               >
-                <VLoading
-                  v-if="loading"
-                  class="h-4 w-4 text-gray-500 group-hover:text-gray-700"
-                />
-                <MdiWebRefresh
-                  v-else
-                  class="h-4 w-4 text-gray-500 group-hover:text-gray-700"
-                />
+                <VLoading v-if="loading" class="size-4 text-gray-500 group-hover:text-gray-700" />
+                <MdiWebRefresh v-else class="size-4 text-gray-500 group-hover:text-gray-700" />
               </div>
             </template>
           </FormKit>
-          <FormKit
-            type="text"
-            name="displayName"
-            validation="required"
-            label="网站名称"
-          ></FormKit>
+          <FormKit type="text" name="displayName" validation="required" label="网站名称"></FormKit>
           <FormKit type="attachment" name="logo" label="Logo"></FormKit>
           <FormKit type="textarea" name="description" label="描述"></FormKit>
         </div>
@@ -222,10 +202,10 @@ const handleGetLinkDetail = async () => {
     <div class="md:grid md:grid-cols-4 md:gap-6">
       <div class="md:col-span-1">
         <div class="sticky top-0">
-          <span class="text-base font-medium text-gray-900"> 元数据 </span>
+          <span class="text-base text-gray-900 font-medium"> 元数据 </span>
         </div>
       </div>
-      <div class="mt-5 divide-y divide-gray-100 md:col-span-3 md:mt-0">
+      <div class="mt-5 md:col-span-3 md:mt-0 divide-y divide-gray-100">
         <AnnotationsForm
           v-if="visible"
           :key="formState.metadata.name"
@@ -239,13 +219,7 @@ const handleGetLinkDetail = async () => {
 
     <template #footer>
       <VSpace>
-        <VButton
-          :loading="saving"
-          type="secondary"
-          @click="$formkit.submit('link-form')"
-        >
-          提交
-        </VButton>
+        <VButton :loading="saving" type="secondary" @click="$formkit.submit('link-form')"> 提交 </VButton>
         <VButton @click="onVisibleChange(false)">取消</VButton>
       </VSpace>
     </template>

diff --git a/console/src/composables/use-link.ts b/console/src/composables/use-link.ts
@@ -3,12 +3,7 @@ import { axiosInstance } from "@halo-dev/api-client";
 import { useQuery } from "@tanstack/vue-query";
 import { ref, type Ref } from "vue";
 
-export function useLinkFetch(
-  page: Ref<number>,
-  size: Ref<number>,
-  keyword?: Ref<string>,
-  group?: Ref<string>
-) {
+export function useLinkFetch(page: Ref<number>, size: Ref<number>, keyword?: Ref<string>, group?: Ref<string>) {
   const total = ref(0);
 
   const {
@@ -37,9 +32,7 @@ export function useLinkFetch(
     },
     refetchOnWindowFocus: false,
     refetchInterval(data) {
-      const deletingLinks = data?.filter(
-        (link) => !!link.metadata.deletionTimestamp
-      );
+      const deletingLinks = data?.filter((link) => !!link.metadata.deletionTimestamp);
       return deletingLinks?.length ? 1000 : false;
     },
   });
@@ -60,9 +53,7 @@ export function useLinkGroupFetch() {
   } = useQuery<LinkGroup[]>({
     queryKey: ["link-groups"],
     queryFn: async () => {
-      const { data } = await axiosInstance.get<LinkGroupList>(
-        "/apis/core.halo.run/v1alpha1/linkgroups"
-      );
+      const { data } = await axiosInstance.get<LinkGroupList>("/apis/core.halo.run/v1alpha1/linkgroups");
 
       return data.items
         .map((group) => {