feat: 添加Bot配置页面
- 创建botConfig.vue页面,展示Bot ID、状态、最近使用时间、最近使用IP和过期时间 - 实现生成和重置Bot Secret功能,并提供复制Secret按钮 - 加载Bot信息并在页面上显示相关数据dev_1.0.2
parent
4cc420799e
commit
af221e4486
|
|
@ -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>
|
||||
Loading…
Reference in New Issue