feat: 添加用户选择组件，整合到多个页面的过滤功能，优化用户体验

src/components/common/user-select.vue

@@ -1,5 +1,59 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import type { SelectOption } from 'naive-ui';
+import { client, safeClient } from '@/service/api';
 
-<template>Hello world</template>
+type Query = Treaty.Query<typeof client.api.admin.users.search.get>;
+
+const model = defineModel<string>('value');
+
+const query = ref<Query>({
+  keyword: '',
+  offset: 0,
+  limit: 20
+});
+
+const { data, execute, isPending } = safeClient(() => client.api.admin.users.search.get({ query: query.value }));
+
+const isFinished = computed(() => {
+  return data.value?.pagination.hasNextPage === false;
+});
+
+const options = computed<SelectOption[]>(
+  () =>
+    data.value?.data.map(item => ({
+      label: `${item.name} (${item.username})`,
+      value: item.id
+    })) || []
+);
+
+function handleSearch(value: string) {
+  query.value.keyword = value;
+  query.value.offset = 0;
+  execute();
+}
+function handleScroll(e: Event) {
+  if (isFinished.value) return;
+  const currentTarget = e.currentTarget as HTMLElement;
+  if (currentTarget.scrollTop + currentTarget.offsetHeight >= currentTarget.scrollHeight) {
+    query.value.offset! += query.value.limit!;
+    execute();
+  }
+}
+</script>
+
+<template>
+  <NSelect
+    v-model:value="model"
+    :options="options"
+    placeholder="请选择用户"
+    remote
+    filterable
+    clearable
+    :loading="isPending"
+    @search="handleSearch"
+    @scroll="handleScroll"
+  />
+</template>
 
 <style lang="css" scoped></style>