feat: 添加Bot配置页面

- 创建botConfig.vue页面,展示Bot ID、状态、最近使用时间、最近使用IP和过期时间
- 实现生成和重置Bot Secret功能,并提供复制Secret按钮
- 加载Bot信息并在页面上显示相关数据
dev_1.0.2
chenhao 2026-03-20 16:54:55 +08:00
parent 4cc420799e
commit af221e4486
1 changed files with 124 additions and 0 deletions

View File

@ -0,0 +1,124 @@
<template>
<div>
<el-alert
title="Bot Secret 只会在生成后返回一次,请立即保存。服务端仅保存哈希值。"
type="warning"
:closable="false"
show-icon
style="margin-bottom: 16px;"
/>
<el-descriptions :column="1" border v-loading="loading">
<el-descriptions-item label="Bot ID">
<span v-if="botInfo.botId">{{ botInfo.botId }}</span>
<span v-else class="text-muted">未生成</span>
</el-descriptions-item>
<el-descriptions-item label="状态">
<el-tag v-if="botInfo.hasBot" :type="botInfo.status === '0' ? 'success' : 'danger'">
{{ botInfo.status === '0' ? '启用' : '停用' }}
</el-tag>
<span v-else class="text-muted">未生成</span>
</el-descriptions-item>
<el-descriptions-item label="最近使用时间">
{{ botInfo.lastAccessTime || '-' }}
</el-descriptions-item>
<el-descriptions-item label="最近使用 IP">
{{ botInfo.lastAccessIp || '-' }}
</el-descriptions-item>
<el-descriptions-item label="过期时间">
{{ botInfo.expireTime || '不过期' }}
</el-descriptions-item>
</el-descriptions>
<el-form label-width="100px" style="margin-top: 20px;">
<el-form-item label="最新 Secret">
<el-input
v-model="latestSecret"
type="textarea"
:rows="3"
readonly
placeholder="点击生成后显示,仅本次可见"
/>
<div style="margin-top: 8px;">
<el-button
size="mini"
type="text"
:disabled="!latestSecret"
v-clipboard:copy="latestSecret"
v-clipboard:success="clipboardSuccess"
>
复制 Secret
</el-button>
</div>
</el-form-item>
<el-form-item>
<el-button type="primary" size="mini" :loading="submitLoading" @click="generateBot">
{{ botInfo.hasBot ? '重置 Secret' : '生成 Bot 凭证' }}
</el-button>
<el-button size="mini" @click="loadBotInfo"></el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { generateUserBotProfile, getUserBotProfile } from "@/api/system/user"
export default {
name: "BotConfig",
data() {
return {
loading: false,
submitLoading: false,
latestSecret: "",
botInfo: {
hasBot: false,
botId: "",
status: "",
expireTime: null,
lastAccessTime: null,
lastAccessIp: ""
}
}
},
created() {
this.loadBotInfo()
},
methods: {
loadBotInfo() {
this.loading = true
getUserBotProfile().then(response => {
this.botInfo = Object.assign({}, this.botInfo, response.data || {})
}).finally(() => {
this.loading = false
})
},
generateBot() {
this.submitLoading = true
generateUserBotProfile().then(response => {
const data = response.data || {}
this.latestSecret = data.botSecret || ""
this.botInfo = Object.assign({}, this.botInfo, {
hasBot: true,
botId: data.botId,
status: data.status,
expireTime: data.expireTime
})
this.$modal.msgSuccess("Bot 凭证已生成")
this.loadBotInfo()
}).finally(() => {
this.submitLoading = false
})
},
clipboardSuccess() {
this.$modal.msgSuccess("Secret 已复制")
}
}
}
</script>
<style scoped>
.text-muted {
color: #909399;
}
</style>