feat(web): 成员管理——清单表、开户令牌明文、重发与启停
This commit is contained in:
@@ -1,13 +1,227 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 成员管理（交互设计-成员管理）：清单表 · 开户 · 令牌明文/重发 · 启停
|
||||
*/
|
||||
import { computed, h, reactive, ref } from "vue";
|
||||
import { Tooltip, message } from "antdv-next";
|
||||
import { QuestionCircleOutlined } from "@antdv-next/icons";
|
||||
import type { MemberItem } from "@new-api-key-usage/core";
|
||||
import type { ApiError } from "@/api/http.ts";
|
||||
import PageHeader from "@/components/common/page-header.vue";
|
||||
import MemberTokenModal from "@/components/admin/member-token-modal.vue";
|
||||
import {
|
||||
useCreateMember,
|
||||
useIssueMemberToken,
|
||||
useMembers,
|
||||
usePatchMember,
|
||||
} from "@/queries/admin.ts";
|
||||
import { formatMinute } from "@/utils/time.ts";
|
||||
|
||||
const membersQuery = useMembers();
|
||||
const createMember = useCreateMember();
|
||||
const patchMember = usePatchMember();
|
||||
const issueToken = useIssueMemberToken();
|
||||
|
||||
const createOpen = ref(false);
|
||||
const tokenOpen = ref(false);
|
||||
const plainToken = ref("");
|
||||
const tokenMemberName = ref("");
|
||||
|
||||
const createForm = reactive({ name: "", remark: "" });
|
||||
const createError = ref("");
|
||||
|
||||
function tipTitle(label: string, tip: string) {
|
||||
return h("span", { class: "overview-col-title" }, [
|
||||
label,
|
||||
h(
|
||||
Tooltip,
|
||||
{ title: tip },
|
||||
() =>
|
||||
h(QuestionCircleOutlined, {
|
||||
class: "overview-col-title__icon",
|
||||
"aria-hidden": "true",
|
||||
}),
|
||||
),
|
||||
]);
|
||||
}
|
||||
|
||||
const columns = [
|
||||
{ title: "名称", key: "name", width: 140 },
|
||||
{ title: "备注", key: "remark" },
|
||||
{ title: "状态", key: "status", width: 100 },
|
||||
{
|
||||
title: tipTitle("令牌签发", "明文已不可找回，如需新令牌请重发"),
|
||||
key: "token_issued_at",
|
||||
width: 170,
|
||||
},
|
||||
{ title: "名下 Key 数", key: "key_count", width: 110 },
|
||||
{ title: "操作", key: "actions", width: 200 },
|
||||
];
|
||||
|
||||
const rows = computed(() => membersQuery.data.value ?? []);
|
||||
|
||||
async function onCreate() {
|
||||
createError.value = "";
|
||||
const name = createForm.name.trim();
|
||||
if (!name) {
|
||||
createError.value = "请填写成员名称";
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const res = await createMember.mutateAsync({
|
||||
name,
|
||||
remark: createForm.remark.trim(),
|
||||
});
|
||||
createOpen.value = false;
|
||||
createForm.name = "";
|
||||
createForm.remark = "";
|
||||
plainToken.value = res.token;
|
||||
tokenMemberName.value = res.member.name;
|
||||
tokenOpen.value = true;
|
||||
} catch (e) {
|
||||
const err = e as ApiError;
|
||||
createError.value = err.message || "开户失败";
|
||||
}
|
||||
}
|
||||
|
||||
async function onReissue(record: MemberItem) {
|
||||
try {
|
||||
const res = await issueToken.mutateAsync(record.id);
|
||||
plainToken.value = res.token;
|
||||
tokenMemberName.value = record.name;
|
||||
tokenOpen.value = true;
|
||||
} catch (e) {
|
||||
message.error((e as ApiError).message || "重发失败");
|
||||
}
|
||||
}
|
||||
|
||||
async function onToggle(record: MemberItem) {
|
||||
const next = record.status === "active" ? "disabled" : "active";
|
||||
try {
|
||||
await patchMember.mutateAsync({
|
||||
id: record.id,
|
||||
body: { status: next },
|
||||
});
|
||||
message.success(
|
||||
next === "disabled"
|
||||
? "已停用——该成员视图立即不可访问，数据保留"
|
||||
: "已启用——下一请求即恢复",
|
||||
);
|
||||
} catch (e) {
|
||||
message.error((e as ApiError).message || "状态更新失败");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section>
|
||||
<PageHeader
|
||||
title="成员管理"
|
||||
subtitle="开户、令牌、停用（信息结构见交互设计-成员管理）"
|
||||
<PageHeader title="成员管理" subtitle="开户、访问令牌与启停">
|
||||
<template #actions>
|
||||
<a-button type="primary" @click="createOpen = true">新建成员</a-button>
|
||||
</template>
|
||||
</PageHeader>
|
||||
|
||||
<a-empty
|
||||
v-if="!membersQuery.isPending.value && rows.length === 0"
|
||||
description="还没有成员——为每位分摊朋友开户并发放访问令牌"
|
||||
>
|
||||
<a-button @click="createOpen = true">新建成员</a-button>
|
||||
</a-empty>
|
||||
|
||||
<a-table
|
||||
v-else
|
||||
:columns="columns"
|
||||
:data-source="rows"
|
||||
:row-key="(r: MemberItem) => r.id"
|
||||
:loading="membersQuery.isPending.value || membersQuery.isFetching.value"
|
||||
:pagination="false"
|
||||
size="middle"
|
||||
:scroll="{ x: 900 }"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'remark'">
|
||||
{{ record.remark || "—" }}
|
||||
</template>
|
||||
<template v-else-if="column.key === 'status'">
|
||||
<a-badge
|
||||
:status="record.status === 'active' ? 'success' : 'default'"
|
||||
:text="record.status === 'active' ? '启用中' : '已停用'"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'token_issued_at'">
|
||||
{{ formatMinute(record.token_issued_at) }}
|
||||
</template>
|
||||
<template v-else-if="column.key === 'key_count'">
|
||||
{{ record.key_count }}
|
||||
</template>
|
||||
<template v-else-if="column.key === 'actions'">
|
||||
<a-space>
|
||||
<a-popconfirm
|
||||
title="重发后旧令牌立即失效"
|
||||
description="该成员正在用的访问将中断"
|
||||
ok-text="重发"
|
||||
cancel-text="取消"
|
||||
@confirm="() => onReissue(record)"
|
||||
>
|
||||
<a-button size="small">重发令牌</a-button>
|
||||
</a-popconfirm>
|
||||
<a-popconfirm
|
||||
v-if="record.status === 'active'"
|
||||
title="停用后该成员的视图立即不可访问"
|
||||
description="令牌验证含状态检查；数据保留"
|
||||
ok-text="停用"
|
||||
cancel-text="取消"
|
||||
@confirm="() => onToggle(record)"
|
||||
>
|
||||
<a-button size="small" danger>停用</a-button>
|
||||
</a-popconfirm>
|
||||
<a-button v-else size="small" @click="() => onToggle(record)">
|
||||
启用
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
<a-modal
|
||||
v-model:open="createOpen"
|
||||
title="新建成员"
|
||||
:confirm-loading="createMember.isPending.value"
|
||||
ok-text="开户并签发令牌"
|
||||
cancel-text="取消"
|
||||
@ok="onCreate"
|
||||
>
|
||||
<a-form layout="vertical">
|
||||
<a-form-item label="名称" required>
|
||||
<a-input v-model:value="createForm.name" placeholder="成员名称" />
|
||||
</a-form-item>
|
||||
<a-form-item label="备注">
|
||||
<a-input v-model:value="createForm.remark" placeholder="备注（可选）" />
|
||||
</a-form-item>
|
||||
<a-alert v-if="createError" type="error" show-icon :message="createError" />
|
||||
</a-form>
|
||||
</a-modal>
|
||||
|
||||
<MemberTokenModal
|
||||
v-model:open="tokenOpen"
|
||||
:token="plainToken"
|
||||
:member-name="tokenMemberName"
|
||||
@update:open="(v: boolean) => { if (!v) { plainToken = ''; tokenMemberName = ''; } }"
|
||||
/>
|
||||
<a-skeleton active :paragraph="{ rows: 4 }" />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.overview-col-title {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.overview-col-title__icon {
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
cursor: help;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user