fix: 修复用户管理面板无法滚动
This commit is contained in:
@@ -46,7 +46,7 @@ const items = [
|
||||
slot: 'account',
|
||||
disabled: true,
|
||||
}], [{
|
||||
label: '账号资料',
|
||||
label: '账号管理',
|
||||
icon: 'i-tabler-user-circle',
|
||||
to: '/profile'
|
||||
}], [{
|
||||
|
||||
@@ -517,11 +517,11 @@ const udpateBalance = (tag: ServiceTag, isActivate: boolean = false) => {
|
||||
>
|
||||
<UCard
|
||||
:ui="{
|
||||
body: { base: 'flex-1' },
|
||||
body: { base: 'flex-1 overflow-y-auto' },
|
||||
ring: '',
|
||||
divide: 'divide-y divide-gray-100 dark:divide-gray-800',
|
||||
}"
|
||||
class="flex flex-col flex-1"
|
||||
class="flex flex-col overflow-hidden"
|
||||
>
|
||||
<template #header>
|
||||
<UButton
|
||||
@@ -540,142 +540,143 @@ const udpateBalance = (tag: ServiceTag, isActivate: boolean = false) => {
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<UDivider
|
||||
label="服务用量管理"
|
||||
class="mb-4"
|
||||
:ui="{ label: 'text-primary-500 dark:text-primary-400' }"
|
||||
/>
|
||||
<div class="">
|
||||
<UDivider
|
||||
label="服务用量管理"
|
||||
class="mb-4"
|
||||
:ui="{ label: 'text-primary-500 dark:text-primary-400' }"
|
||||
/>
|
||||
|
||||
<div class="border dark:border-neutral-700 rounded-md">
|
||||
<UTable
|
||||
:columns="[
|
||||
{ key: 'service', label: '服务' },
|
||||
{ key: 'status', label: '状态' },
|
||||
{ key: 'create_time', label: '开通时间' },
|
||||
{ key: 'expire_time', label: '过期时间' },
|
||||
{ key: 'remain_count', label: '余量(秒)' },
|
||||
{ key: 'actions' },
|
||||
]"
|
||||
:loading="userBalancesStatus === 'pending'"
|
||||
:rows="[
|
||||
...systemServices,
|
||||
// 如果 userBalances?.data.items 具有 systemServices 中没有的服务，则添加到列表中
|
||||
...(userBalances?.data.items
|
||||
.filter(
|
||||
(row) =>
|
||||
!systemServices.find((s) => s.tag === row.request_type)
|
||||
)
|
||||
.map((row) => ({
|
||||
tag: row.request_type,
|
||||
name: row.request_type,
|
||||
})) || []),
|
||||
]"
|
||||
>
|
||||
<template #service-data="{ row }: { row: ServiceType }">
|
||||
{{
|
||||
systemServices.find((s) => s.tag === row.tag)?.name || row.tag
|
||||
}}
|
||||
</template>
|
||||
<div class="border dark:border-neutral-700 rounded-md">
|
||||
<UTable
|
||||
:columns="[
|
||||
{ key: 'service', label: '服务' },
|
||||
{ key: 'status', label: '状态' },
|
||||
{ key: 'create_time', label: '开通时间' },
|
||||
{ key: 'expire_time', label: '过期时间' },
|
||||
{ key: 'remain_count', label: '余量(秒)' },
|
||||
{ key: 'actions' },
|
||||
]"
|
||||
:loading="userBalancesStatus === 'pending'"
|
||||
:rows="[
|
||||
...systemServices,
|
||||
// 如果 userBalances?.data.items 具有 systemServices 中没有的服务，则添加到列表中
|
||||
...(userBalances?.data.items
|
||||
.filter(
|
||||
(row) =>
|
||||
!systemServices.find((s) => s.tag === row.request_type)
|
||||
)
|
||||
.map((row) => ({
|
||||
tag: row.request_type,
|
||||
name: row.request_type,
|
||||
})) || []),
|
||||
]"
|
||||
>
|
||||
<template #service-data="{ row }: { row: ServiceType }">
|
||||
{{
|
||||
systemServices.find((s) => s.tag === row.tag)?.name || row.tag
|
||||
}}
|
||||
</template>
|
||||
|
||||
<template #status-data="{ row }">
|
||||
<UBadge
|
||||
v-if="!getBalanceByTag(row.tag)"
|
||||
color="gray"
|
||||
variant="solid"
|
||||
size="xs"
|
||||
>
|
||||
未开通
|
||||
</UBadge>
|
||||
<UBadge
|
||||
v-else-if="
|
||||
<template #status-data="{ row }">
|
||||
<UBadge
|
||||
v-if="!getBalanceByTag(row.tag)"
|
||||
color="gray"
|
||||
variant="solid"
|
||||
size="xs"
|
||||
>
|
||||
未开通
|
||||
</UBadge>
|
||||
<UBadge
|
||||
v-else-if="
|
||||
getBalanceByTag(row.tag)!.expire_time < dayjs().unix()
|
||||
"
|
||||
color="red"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
已过期
|
||||
</UBadge>
|
||||
<UBadge
|
||||
v-else
|
||||
color="green"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
生效中
|
||||
</UBadge>
|
||||
</template>
|
||||
color="red"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
已过期
|
||||
</UBadge>
|
||||
<UBadge
|
||||
v-else
|
||||
color="green"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
生效中
|
||||
</UBadge>
|
||||
</template>
|
||||
|
||||
<template #create_time-data="{ row }">
|
||||
<span class="text-xs">
|
||||
{{
|
||||
!!getBalanceByTag(row.tag)
|
||||
? dayjs(
|
||||
getBalanceByTag(row.tag)!.create_time * 1000
|
||||
).format('YYYY-MM-DD HH:mm:ss')
|
||||
: '未开通'
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
<template #create_time-data="{ row }">
|
||||
<span class="text-xs">
|
||||
{{
|
||||
!!getBalanceByTag(row.tag)
|
||||
? dayjs(
|
||||
getBalanceByTag(row.tag)!.create_time * 1000
|
||||
).format('YYYY-MM-DD HH:mm:ss')
|
||||
: '未开通'
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<template #expire_time-data="{ row }">
|
||||
<span class="text-xs">
|
||||
{{
|
||||
!!getBalanceByTag(row.tag)
|
||||
? dayjs(
|
||||
getBalanceByTag(row.tag)!.expire_time * 1000
|
||||
).format('YYYY-MM-DD HH:mm:ss')
|
||||
: '未开通'
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
<template #expire_time-data="{ row }">
|
||||
<span class="text-xs">
|
||||
{{
|
||||
!!getBalanceByTag(row.tag)
|
||||
? dayjs(
|
||||
getBalanceByTag(row.tag)!.expire_time * 1000
|
||||
).format('YYYY-MM-DD HH:mm:ss')
|
||||
: '未开通'
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<template #remain_count-data="{ row }">
|
||||
<span class="text-sm">
|
||||
{{ getBalanceByTag(row.tag)?.remain_count || 0 }}
|
||||
</span>
|
||||
</template>
|
||||
<template #remain_count-data="{ row }">
|
||||
<span class="text-sm">
|
||||
{{ getBalanceByTag(row.tag)?.remain_count || 0 }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<template #actions-data="{ row }">
|
||||
<UButton
|
||||
v-if="!getBalanceByTag(row.tag)"
|
||||
color="green"
|
||||
icon="tabler:clock-check"
|
||||
size="xs"
|
||||
variant="soft"
|
||||
@click="
|
||||
() => {
|
||||
isActivateBalance = true
|
||||
userBalanceEditing = true
|
||||
userBalanceState.request_type = row.tag
|
||||
}
|
||||
"
|
||||
>
|
||||
开通
|
||||
</UButton>
|
||||
<UButton
|
||||
v-else-if="getBalanceByTag(row.tag)!.expire_time < dayjs().unix()"
|
||||
color="teal"
|
||||
icon="tabler:clock-plus"
|
||||
size="xs"
|
||||
variant="soft"
|
||||
@click="
|
||||
() => {
|
||||
isActivateBalance = false
|
||||
userBalanceEditing = true
|
||||
userBalanceState.request_type = row.tag
|
||||
}
|
||||
"
|
||||
>
|
||||
延续
|
||||
</UButton>
|
||||
<UButton
|
||||
v-else
|
||||
color="sky"
|
||||
icon="tabler:rotate-clockwise"
|
||||
size="xs"
|
||||
variant="soft"
|
||||
@click="
|
||||
<template #actions-data="{ row }">
|
||||
<UButton
|
||||
v-if="!getBalanceByTag(row.tag)"
|
||||
color="green"
|
||||
icon="tabler:clock-check"
|
||||
size="xs"
|
||||
variant="soft"
|
||||
@click="
|
||||
() => {
|
||||
isActivateBalance = true
|
||||
userBalanceEditing = true
|
||||
userBalanceState.request_type = row.tag
|
||||
}
|
||||
"
|
||||
>
|
||||
开通
|
||||
</UButton>
|
||||
<UButton
|
||||
v-else-if="getBalanceByTag(row.tag)!.expire_time < dayjs().unix()"
|
||||
color="teal"
|
||||
icon="tabler:clock-plus"
|
||||
size="xs"
|
||||
variant="soft"
|
||||
@click="
|
||||
() => {
|
||||
isActivateBalance = false
|
||||
userBalanceEditing = true
|
||||
userBalanceState.request_type = row.tag
|
||||
}
|
||||
"
|
||||
>
|
||||
延续
|
||||
</UButton>
|
||||
<UButton
|
||||
v-else
|
||||
color="sky"
|
||||
icon="tabler:rotate-clockwise"
|
||||
size="xs"
|
||||
variant="soft"
|
||||
@click="
|
||||
() => {
|
||||
isActivateBalance = false
|
||||
userBalanceEditing = true
|
||||
@@ -685,24 +686,24 @@ const udpateBalance = (tag: ServiceTag, isActivate: boolean = false) => {
|
||||
userBalanceState.remain_count = getBalanceByTag(row.tag)!.remain_count
|
||||
}
|
||||
"
|
||||
>
|
||||
更新
|
||||
</UButton>
|
||||
</template>
|
||||
</UTable>
|
||||
>
|
||||
更新
|
||||
</UButton>
|
||||
</template>
|
||||
</UTable>
|
||||
|
||||
<UModal
|
||||
v-model="isBalanceEditModalOpen"
|
||||
:ui="{ width: 'w-xl' }"
|
||||
>
|
||||
<UCard
|
||||
:ui="{
|
||||
ring: '',
|
||||
divide: 'divide-y divide-gray-100 dark:divide-gray-800',
|
||||
}"
|
||||
<UModal
|
||||
v-model="isBalanceEditModalOpen"
|
||||
:ui="{ width: 'w-xl' }"
|
||||
>
|
||||
<template #header>
|
||||
<!-- 为 {{ viewingUser!.username }}
|
||||
<UCard
|
||||
:ui="{
|
||||
ring: '',
|
||||
divide: 'divide-y divide-gray-100 dark:divide-gray-800',
|
||||
}"
|
||||
>
|
||||
<template #header>
|
||||
<!-- 为 {{ viewingUser!.username }}
|
||||
<span class="text-primary">{{ isActivateBalance ? '开通' : '续期' }}</span>
|
||||
服务：
|
||||
{{
|
||||
@@ -710,154 +711,145 @@ const udpateBalance = (tag: ServiceTag, isActivate: boolean = false) => {
|
||||
(s) => s.tag === userBalanceState.request_type
|
||||
)?.name || userBalanceState.request_type
|
||||
}} -->
|
||||
<div class="flex justify-between items-center gap-1">
|
||||
<h1 class="text-sm font-medium">
|
||||
{{ isActivateBalance ? '开通' : '续期' }}
|
||||
{{
|
||||
systemServices.find(
|
||||
(s) => s.tag === userBalanceState.request_type
|
||||
)?.name || userBalanceState.request_type
|
||||
}}
|
||||
服务
|
||||
</h1>
|
||||
<p
|
||||
class="text-xs text-indigo-500 inline-flex items-center gap-1"
|
||||
>
|
||||
<UIcon
|
||||
name="tabler:user-circle"
|
||||
class="text-base"
|
||||
/>
|
||||
{{ viewingUser!.username }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
<div class="flex justify-between items-center gap-1">
|
||||
<h1 class="text-sm font-medium">
|
||||
{{ isActivateBalance ? '开通' : '续期' }}
|
||||
{{
|
||||
systemServices.find(
|
||||
(s) => s.tag === userBalanceState.request_type
|
||||
)?.name || userBalanceState.request_type
|
||||
}}
|
||||
服务
|
||||
</h1>
|
||||
<p
|
||||
class="text-xs text-indigo-500 inline-flex items-center gap-1"
|
||||
>
|
||||
<UIcon
|
||||
name="tabler:user-circle"
|
||||
class="text-base"
|
||||
/>
|
||||
{{ viewingUser!.username }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="flex justify-between gap-4">
|
||||
<UFormGroup
|
||||
label="到期时间"
|
||||
class="flex-1"
|
||||
>
|
||||
<!-- <UInput
|
||||
v-model="userBalanceState.expire_time"
|
||||
type="datetime"
|
||||
/> -->
|
||||
<UPopover :popper="{ placement: 'bottom-start' }">
|
||||
<div class="flex justify-between gap-4">
|
||||
<UFormGroup
|
||||
label="到期时间"
|
||||
class="flex-1"
|
||||
>
|
||||
<UPopover :popper="{ placement: 'bottom-start' }">
|
||||
<UButton
|
||||
block
|
||||
variant="soft"
|
||||
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
|
||||
block
|
||||
variant="soft"
|
||||
icon="i-heroicons-calendar-days-20-solid"
|
||||
:label="
|
||||
dayjs(userBalanceState.expire_time).format(
|
||||
'YYYY-MM-DD HH:mm'
|
||||
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>
|
||||
|
||||
<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
|
||||
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"
|
||||
<UDivider
|
||||
label="数字人权限管理"
|
||||
class="my-4"
|
||||
:ui="{ label: 'text-primary-500 dark:text-primary-400' }"
|
||||
/>
|
||||
|
||||
<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>
|
||||
</UCard>
|
||||
<ModalDigitalHumanSelect
|
||||
|
||||
Reference in New Issue
Block a user