mirror of https://github.com/halo-dev/halo-admin
perf: filter dropdown selector (#704)
#### 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 优化文章管理的分类/标签/作者的筛选下拉框样式，以及支持搜索。 ```pull/706/head
Ryan Wang
2 years ago
committed by
GitHub
parent
e509ff3306
commit
d0efecc9b3
@ -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>
|
||||||
@ -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>
|
||||||
Loading…
Reference in new issue