From d0efecc9b3c6b97c417590cecd43cba4ae0b5b10 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Thu, 24 Nov 2022 13:51:01 +0800
Subject: [PATCH] perf: filter dropdown selector (#704)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind improvement
/milestone 2.0

#### What this PR does / why we need it:

优化文章管理的分类/标签/作者的筛选下拉框样式，以及支持搜索。

#### Screenshots:

<img width="525" alt="image" src="https://user-images.githubusercontent.com/21301288/203499340-b7c59b2f-9be8-4804-9e21-9c5bfbca99bc.png">


#### Special notes for your reviewer:

/cc @halo-dev/sig-halo-console

测试方式：检查文章管理的分类 / 标签 / 作者筛选功能是否正常。

#### Does this PR introduce a user-facing change?

```release-note
优化文章管理的分类/标签/作者的筛选下拉框样式，以及支持搜索。
```
---
 .../CategoryDropdownSelector.vue              | 119 +++++++++++++++
 .../dropdown-selector/TagDropdownSelector.vue | 114 ++++++++++++++
 .../UserDropdownSelector.vue                  |  93 ++++++++----
 src/modules/contents/posts/PostList.vue       | 140 ++----------------
 4 files changed, 307 insertions(+), 159 deletions(-)
 create mode 100644 src/components/dropdown-selector/CategoryDropdownSelector.vue
 create mode 100644 src/components/dropdown-selector/TagDropdownSelector.vue

diff --git a/src/components/dropdown-selector/CategoryDropdownSelector.vue b/src/components/dropdown-selector/CategoryDropdownSelector.vue
new file mode 100644
index 00000000..250d1d1e
--- /dev/null
+++ b/src/components/dropdown-selector/CategoryDropdownSelector.vue
@@ -0,0 +1,119 @@
+<script lang="ts" setup>
+import type { Category } from "@halo-dev/api-client";
+import { VEntity, VEntityField } from "@halo-dev/components";
+import { setFocus } from "@/formkit/utils/focus";
+import { computed, ref, watch } from "vue";
+import Fuse from "fuse.js";
+import { usePostCategory } from "@/modules/contents/posts/categories/composables/use-post-category";
+
+const props = withDefaults(
+  defineProps<{
+    selected?: Category;
+  }>(),
+  {
+    selected: undefined,
+  }
+);
+
+const emit = defineEmits<{
+  (event: "update:selected", category?: Category): void;
+  (event: "select", category?: Category): void;
+}>();
+
+const { categories, handleFetchCategories } = usePostCategory({
+  fetchOnMounted: false,
+});
+
+const handleSelect = (category: Category) => {
+  if (
+    props.selected &&
+    category.metadata.name === props.selected.metadata.name
+  ) {
+    emit("update:selected", undefined);
+    emit("select", undefined);
+    return;
+  }
+
+  emit("update:selected", category);
+  emit("select", category);
+};
+
+function onDropdownShow() {
+  handleFetchCategories();
+  setTimeout(() => {
+    setFocus("categoryDropdownSelectorInput");
+  }, 200);
+}
+
+// search
+const keyword = ref("");
+
+let fuse: Fuse<Category> | undefined = undefined;
+
+watch(
+  () => categories.value,
+  () => {
+    fuse = new Fuse(categories.value, {
+      keys: ["spec.displayName", "metadata.name"],
+      useExtendedSearch: true,
+    });
+  }
+);
+
+const searchResults = computed(() => {
+  if (!fuse || !keyword.value) {
+    return categories.value;
+  }
+
+  return fuse?.search(keyword.value).map((item) => item.item);
+});
+</script>
+
+<template>
+  <FloatingDropdown @show="onDropdownShow">
+    <slot />
+    <template #popper>
+      <div class="h-96 w-80">
+        <div class="border-b border-b-gray-100 bg-white p-4">
+          <FormKit
+            id="categoryDropdownSelectorInput"
+            v-model="keyword"
+            placeholder="输入关键词搜索"
+            type="text"
+          ></FormKit>
+        </div>
+        <div>
+          <ul
+            class="box-border h-full w-full divide-y divide-gray-100"
+            role="list"
+          >
+            <li
+              v-for="(category, index) in searchResults"
+              :key="index"
+              v-close-popper
+              @click="handleSelect(category)"
+            >
+              <VEntity
+                :is-selected="
+                  selected?.metadata.name === category.metadata.name
+                "
+              >
+                <template #start>
+                  <VEntityField
+                    :title="category.spec.displayName"
+                    :description="category.status?.permalink"
+                  />
+                </template>
+                <template #end>
+                  <VEntityField
+                    :description="`${category.status?.postCount || 0} 篇文章`"
+                  />
+                </template>
+              </VEntity>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </template>
+  </FloatingDropdown>
+</template>
diff --git a/src/components/dropdown-selector/TagDropdownSelector.vue b/src/components/dropdown-selector/TagDropdownSelector.vue
new file mode 100644
index 00000000..2fc86642
--- /dev/null
+++ b/src/components/dropdown-selector/TagDropdownSelector.vue
@@ -0,0 +1,114 @@
+<script lang="ts" setup>
+import type { Tag } from "@halo-dev/api-client";
+import { VEntity, VEntityField } from "@halo-dev/components";
+import { setFocus } from "@/formkit/utils/focus";
+import { computed, ref, watch } from "vue";
+import Fuse from "fuse.js";
+import { usePostTag } from "@/modules/contents/posts/tags/composables/use-post-tag";
+import PostTag from "@/modules/contents/posts/tags/components/PostTag.vue";
+
+const props = withDefaults(
+  defineProps<{
+    selected?: Tag;
+  }>(),
+  {
+    selected: undefined,
+  }
+);
+
+const emit = defineEmits<{
+  (event: "update:selected", tag?: Tag): void;
+  (event: "select", tag?: Tag): void;
+}>();
+
+const { tags, handleFetchTags } = usePostTag({ fetchOnMounted: false });
+
+const handleSelect = (tag: Tag) => {
+  if (props.selected && tag.metadata.name === props.selected.metadata.name) {
+    emit("update:selected", undefined);
+    emit("select", undefined);
+    return;
+  }
+
+  emit("update:selected", tag);
+  emit("select", tag);
+};
+
+function onDropdownShow() {
+  handleFetchTags();
+  setTimeout(() => {
+    setFocus("tagDropdownSelectorInput");
+  }, 200);
+}
+
+// search
+const keyword = ref("");
+
+let fuse: Fuse<Tag> | undefined = undefined;
+
+watch(
+  () => tags.value,
+  () => {
+    fuse = new Fuse(tags.value, {
+      keys: ["spec.displayName", "metadata.name", "spec.email"],
+      useExtendedSearch: true,
+    });
+  }
+);
+
+const searchResults = computed(() => {
+  if (!fuse || !keyword.value) {
+    return tags.value;
+  }
+
+  return fuse?.search(keyword.value).map((item) => item.item);
+});
+</script>
+
+<template>
+  <FloatingDropdown @show="onDropdownShow">
+    <slot />
+    <template #popper>
+      <div class="h-96 w-80">
+        <div class="border-b border-b-gray-100 bg-white p-4">
+          <FormKit
+            id="tagDropdownSelectorInput"
+            v-model="keyword"
+            placeholder="输入关键词搜索"
+            type="text"
+          ></FormKit>
+        </div>
+        <div>
+          <ul
+            class="box-border h-full w-full divide-y divide-gray-100"
+            role="list"
+          >
+            <li
+              v-for="(tag, index) in searchResults"
+              :key="index"
+              v-close-popper
+              @click="handleSelect(tag)"
+            >
+              <VEntity
+                :is-selected="selected?.metadata.name === tag.metadata.name"
+              >
+                <template #start>
+                  <VEntityField :description="tag.status?.permalink">
+                    <template #title>
+                      <PostTag :tag="tag" />
+                    </template>
+                  </VEntityField>
+                </template>
+                <template #end>
+                  <VEntityField
+                    :description="`${tag.status?.postCount || 0} 篇文章`"
+                  />
+                </template>
+              </VEntity>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </template>
+  </FloatingDropdown>
+</template>
diff --git a/src/components/dropdown-selector/UserDropdownSelector.vue b/src/components/dropdown-selector/UserDropdownSelector.vue
index 619d67eb..47051071 100644
--- a/src/components/dropdown-selector/UserDropdownSelector.vue
+++ b/src/components/dropdown-selector/UserDropdownSelector.vue
@@ -1,7 +1,10 @@
 <script lang="ts" setup>
 import type { User } from "@halo-dev/api-client";
 import { useUserFetch } from "@/modules/system/users/composables/use-user";
-import { IconCheckboxCircle, VAvatar } from "@halo-dev/components";
+import { VAvatar, VEntity, VEntityField } from "@halo-dev/components";
+import { setFocus } from "@/formkit/utils/focus";
+import { computed, ref, watch } from "vue";
+import Fuse from "fuse.js";
 
 const props = withDefaults(
   defineProps<{
@@ -32,7 +35,33 @@ const handleSelect = (user: User) => {
 
 function onDropdownShow() {
   handleFetchUsers();
+  setTimeout(() => {
+    setFocus("userDropdownSelectorInput");
+  }, 200);
 }
+
+// search
+const keyword = ref("");
+
+let fuse: Fuse<User> | undefined = undefined;
+
+watch(
+  () => users.value,
+  () => {
+    fuse = new Fuse(users.value, {
+      keys: ["spec.displayName", "metadata.name", "spec.email"],
+      useExtendedSearch: true,
+    });
+  }
+);
+
+const searchResults = computed(() => {
+  if (!fuse || !keyword.value) {
+    return users.value;
+  }
+
+  return fuse?.search(keyword.value).map((item) => item.item);
+});
 </script>
 
 <template>
@@ -40,42 +69,44 @@ function onDropdownShow() {
     <slot />
     <template #popper>
       <div class="h-96 w-80">
-        <div class="bg-white p-4">
-          <!--TODO: Auto Focus-->
-          <FormKit placeholder="输入关键词搜索" type="text"></FormKit>
+        <div class="border-b border-b-gray-100 bg-white p-4">
+          <FormKit
+            id="userDropdownSelectorInput"
+            v-model="keyword"
+            placeholder="输入关键词搜索"
+            type="text"
+          ></FormKit>
         </div>
-        <div class="mt-2">
-          <ul class="divide-y divide-gray-200" role="list">
+        <div>
+          <ul
+            class="box-border h-full w-full divide-y divide-gray-100"
+            role="list"
+          >
             <li
-              v-for="(user, index) in users"
+              v-for="(user, index) in searchResults"
               :key="index"
               v-close-popper
-              class="cursor-pointer hover:bg-gray-50"
-              :class="{
-                'bg-gray-100': selected?.metadata.name === user.metadata.name,
-              }"
               @click="handleSelect(user)"
             >
-              <div class="flex items-center space-x-4 px-4 py-3">
-                <div class="flex flex-shrink-0 items-center">
-                  <VAvatar
-                    :alt="user.spec.displayName"
-                    :src="user.spec.avatar"
-                    size="md"
-                  ></VAvatar>
-                </div>
-                <div class="min-w-0 flex-1">
-                  <p class="truncate text-sm font-medium text-gray-900">
-                    {{ user.spec.displayName }}
-                  </p>
-                  <p class="truncate text-sm text-gray-500">
-                    @{{ user.metadata.name }}
-                  </p>
-                </div>
-                <div v-if="selected?.metadata.name === user.metadata.name">
-                  <IconCheckboxCircle class="text-primary" />
-                </div>
-              </div>
+              <VEntity
+                :is-selected="selected?.metadata.name === user.metadata.name"
+              >
+                <template #start>
+                  <VEntityField>
+                    <template #description>
+                      <VAvatar
+                        :alt="user.spec.displayName"
+                        :src="user.spec.avatar"
+                        size="md"
+                      ></VAvatar>
+                    </template>
+                  </VEntityField>
+                  <VEntityField
+                    :title="user.spec.displayName"
+                    :description="user.metadata.name"
+                  />
+                </template>
+              </VEntity>
             </li>
           </ul>
         </div>
diff --git a/src/modules/contents/posts/PostList.vue b/src/modules/contents/posts/PostList.vue
index 4a336db1..568a5618 100644
--- a/src/modules/contents/posts/PostList.vue
+++ b/src/modules/contents/posts/PostList.vue
@@ -23,6 +23,7 @@ import {
   VLoading,
 } from "@halo-dev/components";
 import UserDropdownSelector from "@/components/dropdown-selector/UserDropdownSelector.vue";
+import CategoryDropdownSelector from "@/components/dropdown-selector/CategoryDropdownSelector.vue";
 import PostSettingModal from "./components/PostSettingModal.vue";
 import PostTag from "../posts/tags/components/PostTag.vue";
 import { computed, onMounted, ref, watch } from "vue";
@@ -35,14 +36,13 @@ import type {
 } from "@halo-dev/api-client";
 import { apiClient } from "@/utils/api-client";
 import { formatDatetime } from "@/utils/date";
-import { usePostCategory } from "@/modules/contents/posts/categories/composables/use-post-category";
-import { usePostTag } from "@/modules/contents/posts/tags/composables/use-post-tag";
 import { usePermission } from "@/utils/permission";
 import { onBeforeRouteLeave } from "vue-router";
 import { postLabels } from "@/constants/labels";
 import FilterTag from "@/components/filter/FilterTag.vue";
 import FilteCleanButton from "@/components/filter/FilterCleanButton.vue";
 import { getNode } from "@formkit/core";
+import TagDropdownSelector from "@/components/dropdown-selector/TagDropdownSelector.vue";
 
 const { currentUserHasPermission } = usePermission();
 
@@ -366,9 +366,6 @@ const SortItems: SortItem[] = [
   },
 ];
 
-const { categories } = usePostCategory({ fetchOnMounted: true });
-const { tags } = usePostTag({ fetchOnMounted: true });
-
 const selectedVisibleItem = ref<VisibleItem>(VisibleItems[0]);
 const selectedPublishStatusItem = ref<PublishStatuItem>(PublishStatuItems[0]);
 const selectedSortItem = ref<SortItem>();
@@ -631,7 +628,10 @@ const hasFilters = computed(() => {
                     </div>
                   </template>
                 </FloatingDropdown>
-                <FloatingDropdown>
+                <CategoryDropdownSelector
+                  v-model:selected="selectedCategory"
+                  @select="handleCategoryChange"
+                >
                   <div
                     class="flex cursor-pointer select-none items-center text-sm text-gray-700 hover:text-black"
                   >
@@ -640,69 +640,11 @@ const hasFilters = computed(() => {
                       <IconArrowDown />
                     </span>
                   </div>
-                  <template #popper>
-                    <div class="h-96 w-80">
-                      <div class="bg-white p-4">
-                        <FormKit
-                          placeholder="输入关键词搜索"
-                          type="text"
-                        ></FormKit>
-                      </div>
-                      <div class="mt-2">
-                        <ul
-                          class="box-border h-full w-full divide-y divide-gray-100"
-                        >
-                          <li
-                            v-for="(category, index) in categories"
-                            :key="index"
-                            v-close-popper
-                            @click="handleCategoryChange(category)"
-                          >
-                            <div
-                              class="group relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50"
-                              :class="{
-                                'bg-gray-100':
-                                  selectedCategory?.metadata.name ===
-                                  category.metadata.name,
-                              }"
-                            >
-                              <div class="relative flex flex-row items-center">
-                                <div class="flex-1">
-                                  <div class="flex flex-col sm:flex-row">
-                                    <span
-                                      class="mr-0 truncate text-sm font-medium text-gray-900 sm:mr-2"
-                                    >
-                                      {{ category.spec.displayName }}
-                                    </span>
-                                    <VSpace class="mt-1 sm:mt-0"></VSpace>
-                                  </div>
-                                  <div class="mt-1 flex">
-                                    <span class="text-xs text-gray-500">
-                                      {{ category.status?.permalink }}
-                                    </span>
-                                  </div>
-                                </div>
-                                <div class="flex">
-                                  <div
-                                    class="inline-flex flex-col items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
-                                  >
-                                    <div
-                                      class="cursor-pointer text-sm text-gray-500 hover:text-gray-900"
-                                    >
-                                      {{ category.status?.postCount || 0 }}
-                                      篇文章
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          </li>
-                        </ul>
-                      </div>
-                    </div>
-                  </template>
-                </FloatingDropdown>
-                <FloatingDropdown>
+                </CategoryDropdownSelector>
+                <TagDropdownSelector
+                  v-model:selected="selectedTag"
+                  @select="handleTagChange"
+                >
                   <div
                     class="flex cursor-pointer select-none items-center text-sm text-gray-700 hover:text-black"
                   >
@@ -711,65 +653,7 @@ const hasFilters = computed(() => {
                       <IconArrowDown />
                     </span>
                   </div>
-                  <template #popper>
-                    <div class="h-96 w-80">
-                      <div class="bg-white p-4">
-                        <FormKit
-                          placeholder="输入关键词搜索"
-                          type="text"
-                        ></FormKit>
-                      </div>
-
-                      <div class="mt-2">
-                        <ul
-                          class="box-border h-full w-full divide-y divide-gray-100"
-                          role="list"
-                        >
-                          <li
-                            v-for="(tag, index) in tags"
-                            :key="index"
-                            v-close-popper
-                            @click="handleTagChange(tag)"
-                          >
-                            <div
-                              class="relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50"
-                              :class="{
-                                'bg-gray-100':
-                                  selectedTag?.metadata.name ===
-                                  tag.metadata.name,
-                              }"
-                            >
-                              <div class="relative flex flex-row items-center">
-                                <div class="flex-1">
-                                  <div class="flex flex-col sm:flex-row">
-                                    <PostTag :tag="tag" />
-                                  </div>
-                                  <div class="mt-1 flex">
-                                    <span class="text-xs text-gray-500">
-                                      {{ tag.status?.permalink }}
-                                    </span>
-                                  </div>
-                                </div>
-                                <div class="flex">
-                                  <div
-                                    class="inline-flex flex-col items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
-                                  >
-                                    <div
-                                      class="cursor-pointer text-sm text-gray-500 hover:text-gray-900"
-                                    >
-                                      {{ tag.status?.postCount || 0 }}
-                                      篇文章
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          </li>
-                        </ul>
-                      </div>
-                    </div>
-                  </template>
-                </FloatingDropdown>
+                </TagDropdownSelector>
                 <UserDropdownSelector
                   v-model:selected="selectedContributor"
                   @select="handleContributorChange"