XuanShengHua/xsh-assistant-next
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 修复用户管理面板无法滚动

Browse Source
This commit is contained in:
Timothy Yin
2025-01-22 18:54:40 +08:00
parent 43e0dab504
commit c8bda7f951
2 changed files with 281 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
layouts/default.vue
View File

@@ -46,7 +46,7 @@ const items = [
slot: 'account', slot: 'account',
disabled: true, disabled: true,
}], [{ }], [{
label: '账号资料', label: '账号管理',
icon: 'i-tabler-user-circle', icon: 'i-tabler-user-circle',
to: '/profile' to: '/profile'
}], [{ }], [{

568
pages/generation/admin/users.vue
View File

@@ -517,11 +517,11 @@ const udpateBalance = (tag: ServiceTag, isActivate: boolean = false) => {
> >
<UCard <UCard
:ui="{ :ui="{
body: { base: 'flex-1' }, body: { base: 'flex-1 overflow-y-auto' },
ring: '', ring: '',
divide: 'divide-y divide-gray-100 dark:divide-gray-800', divide: 'divide-y divide-gray-100 dark:divide-gray-800',
}" }"
class="flex flex-col flex-1" class="flex flex-col overflow-hidden"
> >
<template #header> <template #header>
<UButton <UButton
@@ -540,142 +540,143 @@ const udpateBalance = (tag: ServiceTag, isActivate: boolean = false) => {
</p> </p>
</template> </template>
<UDivider <div class="">
label="服务用量管理" <UDivider
class="mb-4" label="服务用量管理"
:ui="{ label: 'text-primary-500 dark:text-primary-400' }" class="mb-4"
/> :ui="{ label: 'text-primary-500 dark:text-primary-400' }"
/>
<div class="border dark:border-neutral-700 rounded-md"> <div class="border dark:border-neutral-700 rounded-md">
<UTable <UTable
:columns="[ :columns="[
{ key: 'service', label: '服务' }, { key: 'service', label: '服务' },
{ key: 'status', label: '状态' }, { key: 'status', label: '状态' },
{ key: 'create_time', label: '开通时间' }, { key: 'create_time', label: '开通时间' },
{ key: 'expire_time', label: '过期时间' }, { key: 'expire_time', label: '过期时间' },
{ key: 'remain_count', label: '余量(秒)' }, { key: 'remain_count', label: '余量(秒)' },
{ key: 'actions' }, { key: 'actions' },
]" ]"
:loading="userBalancesStatus === 'pending'" :loading="userBalancesStatus === 'pending'"
:rows="[ :rows="[
...systemServices, ...systemServices,
// 如果 userBalances?.data.items 具有 systemServices 中没有的服务，则添加到列表中 // 如果 userBalances?.data.items 具有 systemServices 中没有的服务，则添加到列表中
...(userBalances?.data.items ...(userBalances?.data.items
.filter( .filter(
(row) => (row) =>
!systemServices.find((s) => s.tag === row.request_type) !systemServices.find((s) => s.tag === row.request_type)
) )
.map((row) => ({ .map((row) => ({
tag: row.request_type, tag: row.request_type,
name: row.request_type, name: row.request_type,
})) || []), })) || []),
]" ]"
> >
<template #service-data="{ row }: { row: ServiceType }"> <template #service-data="{ row }: { row: ServiceType }">
{{ {{
systemServices.find((s) => s.tag === row.tag)?.name || row.tag systemServices.find((s) => s.tag === row.tag)?.name || row.tag
}} }}
</template> </template>
<template #status-data="{ row }"> <template #status-data="{ row }">
<UBadge <UBadge
v-if="!getBalanceByTag(row.tag)" v-if="!getBalanceByTag(row.tag)"
color="gray" color="gray"
variant="solid" variant="solid"
size="xs" size="xs"
> >
未开通 未开通
</UBadge> </UBadge>
<UBadge <UBadge
v-else-if=" v-else-if="
getBalanceByTag(row.tag)!.expire_time < dayjs().unix() getBalanceByTag(row.tag)!.expire_time < dayjs().unix()
" "
color="red" color="red"
variant="subtle" variant="subtle"
size="xs" size="xs"
> >
已过期 已过期
</UBadge> </UBadge>
<UBadge <UBadge
v-else v-else
color="green" color="green"
variant="subtle" variant="subtle"
size="xs" size="xs"
> >
生效中 生效中
</UBadge> </UBadge>
</template> </template>
<template #create_time-data="{ row }"> <template #create_time-data="{ row }">
<span class="text-xs"> <span class="text-xs">
{{ {{
!!getBalanceByTag(row.tag) !!getBalanceByTag(row.tag)
? dayjs( ? dayjs(
getBalanceByTag(row.tag)!.create_time * 1000 getBalanceByTag(row.tag)!.create_time * 1000
).format('YYYY-MM-DD HH:mm:ss') ).format('YYYY-MM-DD HH:mm:ss')
: '未开通' : '未开通'
}} }}
</span> </span>
</template> </template>
<template #expire_time-data="{ row }"> <template #expire_time-data="{ row }">
<span class="text-xs"> <span class="text-xs">
{{ {{
!!getBalanceByTag(row.tag) !!getBalanceByTag(row.tag)
? dayjs( ? dayjs(
getBalanceByTag(row.tag)!.expire_time * 1000 getBalanceByTag(row.tag)!.expire_time * 1000
).format('YYYY-MM-DD HH:mm:ss') ).format('YYYY-MM-DD HH:mm:ss')
: '未开通' : '未开通'
}} }}
</span> </span>
</template> </template>
<template #remain_count-data="{ row }"> <template #remain_count-data="{ row }">
<span class="text-sm"> <span class="text-sm">
{{ getBalanceByTag(row.tag)?.remain_count || 0 }} {{ getBalanceByTag(row.tag)?.remain_count || 0 }}
</span> </span>
</template> </template>
<template #actions-data="{ row }"> <template #actions-data="{ row }">
<UButton <UButton
v-if="!getBalanceByTag(row.tag)" v-if="!getBalanceByTag(row.tag)"
color="green" color="green"
icon="tabler:clock-check" icon="tabler:clock-check"
size="xs" size="xs"
variant="soft" variant="soft"
@click=" @click="
() => { () => {
isActivateBalance = true isActivateBalance = true
userBalanceEditing = true userBalanceEditing = true
userBalanceState.request_type = row.tag userBalanceState.request_type = row.tag
} }
" "
> >
开通 开通
</UButton> </UButton>
<UButton <UButton
v-else-if="getBalanceByTag(row.tag)!.expire_time < dayjs().unix()" v-else-if="getBalanceByTag(row.tag)!.expire_time < dayjs().unix()"
color="teal" color="teal"
icon="tabler:clock-plus" icon="tabler:clock-plus"
size="xs" size="xs"
variant="soft" variant="soft"
@click=" @click="
() => { () => {
isActivateBalance = false isActivateBalance = false
userBalanceEditing = true userBalanceEditing = true
userBalanceState.request_type = row.tag userBalanceState.request_type = row.tag
} }
" "
> >
延续 延续
</UButton> </UButton>
<UButton <UButton
v-else v-else
color="sky" color="sky"
icon="tabler:rotate-clockwise" icon="tabler:rotate-clockwise"
size="xs" size="xs"
variant="soft" variant="soft"
@click=" @click="
() => { () => {
isActivateBalance = false isActivateBalance = false
userBalanceEditing = true userBalanceEditing = true
@@ -685,24 +686,24 @@ const udpateBalance = (tag: ServiceTag, isActivate: boolean = false) => {
userBalanceState.remain_count = getBalanceByTag(row.tag)!.remain_count userBalanceState.remain_count = getBalanceByTag(row.tag)!.remain_count
} }
" "
> >
更新 更新
</UButton> </UButton>
</template> </template>
</UTable> </UTable>
<UModal <UModal
v-model="isBalanceEditModalOpen" v-model="isBalanceEditModalOpen"
:ui="{ width: 'w-xl' }" :ui="{ width: 'w-xl' }"
>
<UCard
:ui="{
ring: '',
divide: 'divide-y divide-gray-100 dark:divide-gray-800',
}"
> >
<template #header> <UCard
<!-- 为 {{ viewingUser!.username }} :ui="{
ring: '',
divide: 'divide-y divide-gray-100 dark:divide-gray-800',
}"
>
<template #header>
<!-- 为 {{ viewingUser!.username }}
<span class="text-primary">{{ isActivateBalance ? '开通' : '续期' }}</span> <span class="text-primary">{{ isActivateBalance ? '开通' : '续期' }}</span>
服务： 服务：
{{ {{
@@ -710,154 +711,145 @@ const udpateBalance = (tag: ServiceTag, isActivate: boolean = false) => {
(s) => s.tag === userBalanceState.request_type (s) => s.tag === userBalanceState.request_type
)?.name || userBalanceState.request_type )?.name || userBalanceState.request_type
}} --> }} -->
<div class="flex justify-between items-center gap-1"> <div class="flex justify-between items-center gap-1">
<h1 class="text-sm font-medium"> <h1 class="text-sm font-medium">
{{ isActivateBalance ? '开通' : '续期' }} {{ isActivateBalance ? '开通' : '续期' }}
{{ {{
systemServices.find( systemServices.find(
(s) => s.tag === userBalanceState.request_type (s) => s.tag === userBalanceState.request_type
)?.name || userBalanceState.request_type )?.name || userBalanceState.request_type
}} }}
服务 服务
</h1> </h1>
<p <p
class="text-xs text-indigo-500 inline-flex items-center gap-1" class="text-xs text-indigo-500 inline-flex items-center gap-1"
> >
<UIcon <UIcon
name="tabler:user-circle" name="tabler:user-circle"
class="text-base" class="text-base"
/> />
{{ viewingUser!.username }} {{ viewingUser!.username }}
</p> </p>
</div> </div>
</template> </template>
<div class="flex justify-between gap-4"> <div class="flex justify-between gap-4">
<UFormGroup <UFormGroup
label="到期时间" label="到期时间"
class="flex-1" class="flex-1"
> >
<!-- <UInput <UPopover :popper="{ placement: 'bottom-start' }">
v-model="userBalanceState.expire_time" <UButton
type="datetime" block
/> --> variant="soft"
<UPopover :popper="{ placement: 'bottom-start' }"> icon="i-heroicons-calendar-days-20-solid"
:label="
dayjs(userBalanceState.expire_time).format(
'YYYY-MM-DD HH:mm'
)
"
/>
<template #panel="{ close }">
<DatePicker
v-model="userBalanceState.expire_time"
locale="cn"
mode="dateTime"
title-position="left"
is-required
is24hr
@close="close"
/>
</template>
</UPopover>
</UFormGroup>
<UFormGroup
label="服务时长(秒)"
class="flex-1"
>
<UInput v-model="userBalanceState.remain_count" />
</UFormGroup>
</div>
<template #footer>
<div class="flex items-center justify-end gap-2">
<UButton <UButton
block color="gray"
variant="soft" size="sm"
icon="i-heroicons-calendar-days-20-solid" variant="ghost"
:label=" @click="isBalanceEditModalOpen = false"
dayjs(userBalanceState.expire_time).format( >
'YYYY-MM-DD HH:mm' 取消
</UButton>
<UButton
color="primary"
icon="tabler:check"
size="sm"
@click="
udpateBalance(
userBalanceState.request_type as ServiceTag,
isActivateBalance
) )
" "
/> >
{{ isActivateBalance ? '开通' : '续期' }}
</UButton>
</div>
</template>
</UCard>
</UModal>
</div>
<template #panel="{ close }"> <UDivider
<DatePicker label="数字人权限管理"
v-model="userBalanceState.expire_time" class="my-4"
locale="cn" :ui="{ label: 'text-primary-500 dark:text-primary-400' }"
mode="dateTime"
title-position="left"
is-required
is24hr
@close="close"
/>
</template>
</UPopover>
</UFormGroup>
<UFormGroup
label="服务时长(秒)"
class="flex-1"
>
<UInput v-model="userBalanceState.remain_count" />
</UFormGroup>
</div>
<template #footer>
<div class="flex items-center justify-end gap-2">
<UButton
color="gray"
size="sm"
variant="ghost"
@click="isBalanceEditModalOpen = false"
>
取消
</UButton>
<UButton
color="primary"
icon="tabler:check"
size="sm"
@click="
udpateBalance(
userBalanceState.request_type as ServiceTag,
isActivateBalance
)
"
>
{{ isActivateBalance ? '开通' : '续期' }}
</UButton>
</div>
</template>
</UCard>
</UModal>
</div>
<UDivider
label="数字人权限管理"
class="my-4"
:ui="{ label: 'text-primary-500 dark:text-primary-400' }"
/>
<!-- <div class="flex w-full justify-end pb-4">
<UButton
icon="tabler:plus"
size="xs"
@click="isDigitalSelectorOpen = true"
>
新增授权
</UButton>
</div> -->
<div class="border dark:border-neutral-700 rounded-md">
<UTable
:columns="[
{ key: 'name', label: '名称' },
{ key: 'digital_human_id', label: '本地ID' },
{ key: 'model_id', label: '上游ID' },
{ key: 'actions' },
]"
:loading="digitalHumansDataStatus === 'pending'"
:rows="digitalHumansData?.data.items"
>
<template #actions-data="{ row }">
<UButton
color="gray"
icon="tabler:cancel"
size="xs"
variant="ghost"
@click="
revokeDigitalHuman(viewingUser?.id || 0, row.digital_human_id)
"
>
撤销授权
</UButton>
</template>
</UTable>
</div>
<div class="flex justify-between py-3.5">
<UButton
icon="tabler:plus"
size="xs"
@click="isDigitalSelectorOpen = true"
>
新增授权
</UButton>
<UPagination
v-if="(digitalHumansData?.data.total || -1) > 0"
v-model="dhPage"
:page-count="dhPageCount"
:total="digitalHumansData?.data.total || 0"
/> />
<div class="border dark:border-neutral-700 rounded-md">
<UTable
:columns="[
{ key: 'name', label: '名称' },
{ key: 'digital_human_id', label: '本地ID' },
{ key: 'model_id', label: '上游ID' },
{ key: 'actions' },
]"
:loading="digitalHumansDataStatus === 'pending'"
:rows="digitalHumansData?.data.items"
>
<template #actions-data="{ row }">
<UButton
color="gray"
icon="tabler:cancel"
size="xs"
variant="ghost"
@click="
revokeDigitalHuman(
viewingUser?.id || 0,
row.digital_human_id
)
"
>
撤销授权
</UButton>
</template>
</UTable>
</div>
<div class="flex justify-between py-3.5">
<UButton
icon="tabler:plus"
size="xs"
@click="isDigitalSelectorOpen = true"
>
新增授权
</UButton>
<UPagination
v-if="(digitalHumansData?.data.total || -1) > 0"
v-model="dhPage"
:page-count="dhPageCount"
:total="digitalHumansData?.data.total || 0"
/>
</div>
</div> </div>
</UCard> </UCard>
<ModalDigitalHumanSelect <ModalDigitalHumanSelect