root/financial-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Seven
2026-01-20 01:24:15 +07:00
parent e3916d8ac4
commit 0867fefa6c
8 changed files with 126 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
build/plugins/index.ts
View File

@@ -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),

2
package.json
View File

@@ -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:*",

12
pnpm-lock.yaml generated
View File

@@ -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
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)))'
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.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':
resolution: {tarball: http://192.168.1.2:9538/api/capp-eden-0.0.23.tgz}
version: 0.0.23
'@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.27.tgz}
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))

58
src/components/common/user-select.vue
View File

@@ -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>

32
src/views/kyc/index.vue
View File

@@ -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,

28
src/views/user/components/wallet.vue
View File

@@ -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',
title: 'ID'
key: 'walletType.name',
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>

6
src/views/user/index.vue
View File

@@ -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',
title: 'UID'
key: 'userId',
title: '用户',
component: UserSelect
},
{
key: 'username',

8
src/views/withdraw/index.vue
View File

@@ -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',
title: '用户UID'
key: 'userId',
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' },