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

build/plugins/index.ts

@@ -12,7 +12,7 @@ export function setupVitePlugins(viteEnv: Env.ImportMeta, buildTime: string) {
   const plugins: PluginOption = [
     vue(),
     vueJsx(),
-    setupDevtoolsPlugin(viteEnv),
+    // setupDevtoolsPlugin(viteEnv),
     setupElegantRouter(),
     setupUnocss(viteEnv),
     ...setupUnplugin(viteEnv),

package.json

@@ -51,7 +51,7 @@
     "@better-scroll/core": "2.5.1",
     "@elysiajs/eden": "^1.4.5",
     "@iconify/vue": "5.0.0",
-    "@riwa/api-types": "http://192.168.1.2:9538/api/capp-eden-0.0.27.tgz",
+    "@riwa/api-types": "http://192.168.1.2:9538/api/capp-eden-0.0.29.tgz",
     "@sa/axios": "workspace:*",
     "@sa/color": "workspace:*",
     "@sa/hooks": "workspace:*",

pnpm-lock.yaml

@@ -18,8 +18,8 @@ importers:
         specifier: 5.0.0
         version: 5.0.0(vue@3.5.25(typescript@5.9.3))
       '@riwa/api-types':
-        specifier: http://192.168.1.2:9538/api/capp-eden-0.0.23.tgz
+        specifier: http://192.168.1.2:9538/api/capp-eden-0.0.27.tgz
-        version: '@capp/eden@http://192.168.1.2:9538/api/capp-eden-0.0.23.tgz(@elysiajs/eden@1.4.5(elysia@1.4.19(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)))'
+        version: '@capp/eden@http://192.168.1.2:9538/api/capp-eden-0.0.27.tgz(@elysiajs/eden@1.4.5(elysia@1.4.19(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)))'
       '@sa/axios':
         specifier: workspace:*
         version: link:packages/axios
@@ -496,9 +496,9 @@ packages:
   '@borewit/text-codec@0.1.1':
     resolution: {integrity: sha512-5L/uBxmjaCIX5h8Z+uu+kA9BQLkc/Wl06UGR5ajNRxu+/XjonB5i8JpgFMrPj3LXTCPA0pv8yxUvbUi+QthGGA==}
 
-  '@capp/eden@http://192.168.1.2:9538/api/capp-eden-0.0.23.tgz':
+  '@capp/eden@http://192.168.1.2:9538/api/capp-eden-0.0.27.tgz':
-    resolution: {tarball: http://192.168.1.2:9538/api/capp-eden-0.0.23.tgz}
+    resolution: {tarball: http://192.168.1.2:9538/api/capp-eden-0.0.27.tgz}
-    version: 0.0.23
+    version: 0.0.27
     peerDependencies:
       '@elysiajs/eden': ^1.4.6
 
@@ -4871,7 +4871,7 @@ snapshots:
 
   '@borewit/text-codec@0.1.1': {}
 
-  '@capp/eden@http://192.168.1.2:9538/api/capp-eden-0.0.23.tgz(@elysiajs/eden@1.4.5(elysia@1.4.19(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)))':
+  '@capp/eden@http://192.168.1.2:9538/api/capp-eden-0.0.27.tgz(@elysiajs/eden@1.4.5(elysia@1.4.19(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)))':
     dependencies:
       '@elysiajs/eden': 1.4.5(elysia@1.4.19(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3))
 

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>

src/views/kyc/index.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
 import { h, useTemplateRef } from 'vue';
-import { NImage } from 'naive-ui';
+import { NImage, NSelect } from 'naive-ui';
 import dayjs from 'dayjs';
 import { client, safeClient } from '@/service/api';
-import type { TableBaseColumns, TableFetchData, TableInst } from '@/components/table';
+import type { TableBaseColumns, TableFetchData, TableFilterColumns, TableInst } from '@/components/table';
+import UserSelect from '@/components/common/user-select.vue';
 
 defineOptions({
   name: 'KycPage'
@@ -41,14 +42,14 @@ const columns: TableBaseColumns = [
     key: 'fileId1',
     title: '证件照片正面',
     render: (row: any) => {
-      return row.fileId1 ? h(NImage, { src: row.fileId1, width: 100 }) : '无';
+      return row.fileId1 ? h(NImage, { src: row.fileId1, class: 'h-[60px]' }) : '无';
     }
   },
   {
     key: 'fileId2',
     title: '证件照片背面',
     render: (row: any) => {
-      return row.fileId2 ? h(NImage, { src: row.fileId2, width: 100 }) : '无';
+      return row.fileId2 ? h(NImage, { src: row.fileId2, class: 'h-[60px]' }) : '无';
     }
   },
   {
@@ -120,6 +121,28 @@ const columns: TableBaseColumns = [
     ]
   }
 ];
+
+const filterColumns: TableFilterColumns = [
+  {
+    key: 'userId',
+    title: '用户',
+    component: UserSelect
+  },
+  {
+    key: 'status',
+    title: '审核状态',
+    component: NSelect,
+    componentProps: {
+      clearable: true,
+      options: [
+        { label: '未实名', value: 'unverified' },
+        { label: '审核中', value: 'pending' },
+        { label: '已通过', value: 'approved' },
+        { label: '已拒绝', value: 'rejected' }
+      ]
+    }
+  }
+];
 </script>
 
 <template>
@@ -127,6 +150,7 @@ const columns: TableBaseColumns = [
     ref="tableInst"
     :fetch-data="fetchData"
     :columns="columns"
+    :filter-columns="filterColumns"
     :scroll-x="1200"
     :header-operations="{
       add: false,

src/views/user/components/wallet.vue

@@ -13,19 +13,39 @@ const props = defineProps<{
 
 const tableInst = useTemplateRef<TableInst>('tableInst');
 const fetchData: TableFetchData = ({ pagination, filter }) => {
-  return safeClient(() => client.api.admin.wallet.balances.get({ query: { userId: props.userId } }));
+  return safeClient(() => client.api.admin.wallet.wallets.get({ query: { userId: props.userId } }));
 };
 
 const columns: TableBaseColumns = [
   {
-    key: 'id',
+    key: 'walletType.name',
-    title: 'ID'
+    title: '钱包类型'
+  },
+  {
+    key: 'frozen',
+    title: '冻结金额',
+    render: (row: any) => {
+      return Number(row.frozen);
+    }
+  },
+  {
+    key: 'available',
+    title: '可用金额',
+    render: (row: any) => {
+      return Number(row.available);
+    }
   }
 ];
 </script>
 
 <template>
-  <TableBase ref="tableInst" :fetch-data="fetchData" :columns="columns" />
+  <TableBase
+    ref="tableInst"
+    :fetch-data="fetchData"
+    :columns="columns"
+    :scroll-x="800"
+    :show-header-operation="false"
+  />
 </template>
 
 <style lang="css" scoped></style>

src/views/user/index.vue

@@ -4,6 +4,7 @@ import { useDialog } from 'naive-ui';
 import dayjs from 'dayjs';
 import { client, safeClient } from '@/service/api';
 import type { TableBaseColumns, TableFetchData, TableFilterColumns, TableInst } from '@/components/table';
+import UserSelect from '@/components/common/user-select.vue';
 import Wallet from './components/wallet.vue';
 import Address from './components/address.vue';
 import Payment from './components/payment.vue';
@@ -157,8 +158,9 @@ const columns: TableBaseColumns = [
 
 const filterColumns: TableFilterColumns = [
   {
-    key: 'uid',
+    key: 'userId',
-    title: 'UID'
+    title: '用户',
+    component: UserSelect
   },
   {
     key: 'username',

src/views/withdraw/index.vue

@@ -1,9 +1,11 @@
 <script lang="ts" setup>
+import { clear } from 'node:console';
 import { useTemplateRef } from 'vue';
 import { NSelect } from 'naive-ui';
 import dayjs from 'dayjs';
 import { client, safeClient } from '@/service/api';
 import type { TableBaseColumns, TableFetchData, TableFilterColumns, TableInst } from '@/components/table';
+import UserSelect from '@/components/common/user-select.vue';
 
 defineOptions({
   name: 'WithdrawPage'
@@ -143,8 +145,9 @@ const columns: TableBaseColumns = [
 
 const filterColumns: TableFilterColumns = [
   {
-    key: 'uid',
+    key: 'userId',
-    title: '用户UID'
+    title: '用户',
+    component: UserSelect
   },
   {
     key: 'orderNo',
@@ -155,6 +158,7 @@ const filterColumns: TableFilterColumns = [
     title: '状态',
     component: NSelect,
     componentProps: {
+      clearable: true,
       options: [
         { label: '审核中', value: 'pending_review' },
         { label: '待打款', value: 'pending_payout' },