694 lines
16 KiB
Vue
694 lines
16 KiB
Vue
<template>
|
||
<div class="api-key-page">
|
||
<div class="api-key-shell">
|
||
<div class="page-header">
|
||
<div class="title-block">
|
||
<div class="title-line">
|
||
<span class="key-icon">
|
||
<i class="el-icon-key"></i>
|
||
</span>
|
||
<h2>API Key 管理</h2>
|
||
</div>
|
||
<p>创建和管理访问令牌，用于在外部系统中安全调用你的能力接口。</p>
|
||
</div>
|
||
<div class="header-actions">
|
||
<el-button
|
||
size="small"
|
||
class="ghost-btn"
|
||
icon="el-icon-refresh"
|
||
:loading="tableLoading"
|
||
@click="fetchApiKeyList"
|
||
>
|
||
刷新
|
||
</el-button>
|
||
<el-button
|
||
size="small"
|
||
type="primary"
|
||
class="create-btn"
|
||
icon="el-icon-plus"
|
||
:loading="createLoading"
|
||
@click="handleCreateApiKey"
|
||
>
|
||
创建新令牌
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="safe-card">
|
||
<div class="safe-title">
|
||
<i class="el-icon-warning-outline"></i>
|
||
<h3>API 密钥安全指南</h3>
|
||
</div>
|
||
<div class="safe-list">
|
||
<div v-for="item in safeTips" :key="item" class="safe-item">
|
||
<span></span>
|
||
<p>{{ item }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stat-row">
|
||
<div class="stat-card" v-for="item in statCards" :key="item.label" :class="item.type">
|
||
<div class="stat-icon">
|
||
<i :class="item.icon"></i>
|
||
</div>
|
||
<div>
|
||
<span>{{ item.label }}</span>
|
||
<strong>{{ item.value }}</strong>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="table-card">
|
||
<div class="table-header">
|
||
<div>
|
||
<h3>令牌列表</h3>
|
||
<p>查看已创建的访问令牌，后续可接入创建、查看和禁用接口。</p>
|
||
</div>
|
||
<span>共 {{ tokenList.length }} 条</span>
|
||
</div>
|
||
|
||
<div class="table-wrap">
|
||
<el-table
|
||
v-loading="tableLoading"
|
||
:data="tokenList"
|
||
class="api-key-table"
|
||
style="width: 100%"
|
||
>
|
||
<el-table-column prop="name" label="令牌名称" min-width="220">
|
||
<template slot-scope="scope">
|
||
<span class="token-name">{{ scope.row.name || '默认令牌' }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="apikey" label="API Key" min-width="260">
|
||
<template slot-scope="scope">
|
||
<span class="masked-key">{{ maskApiKey(scope.row.opc_apikey ) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
|
||
<el-table-column label="操作" width="120" align="center">
|
||
<template slot-scope="scope">
|
||
<el-button type="text" size="small" class="view-btn" @click="copyApiKey(scope.row)">复制</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
|
||
<el-dialog
|
||
title="添加令牌"
|
||
:visible.sync="createDialogVisible"
|
||
width="420px"
|
||
custom-class="create-token-dialog"
|
||
append-to-body
|
||
@close="resetCreateForm"
|
||
>
|
||
<el-form
|
||
ref="createFormRef"
|
||
class="create-token-form"
|
||
:model="createForm"
|
||
:rules="createRules"
|
||
label-width="90px"
|
||
@submit.native.prevent
|
||
>
|
||
<el-form-item label="令牌名称" prop="appname">
|
||
<el-input
|
||
v-model.trim="createForm.appname"
|
||
maxlength="64"
|
||
clearable
|
||
placeholder="请输入令牌名称"
|
||
/>
|
||
<p class="create-token-tip">用于标识当前令牌的业务应用，建议填写便于识别的令牌名称</p>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button class="dialog-cancel-btn" @click="createDialogVisible = false">取消</el-button>
|
||
<el-button class="dialog-submit-btn" type="primary" :loading="createLoading" @click="submitCreateApiKey">确定</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { reqApikeyList, reqCreateApikey } from '@/api/model/model'
|
||
|
||
export default {
|
||
name: 'TokenManagement',
|
||
data() {
|
||
return {
|
||
tableLoading: false,
|
||
createLoading: false,
|
||
createDialogVisible: false,
|
||
createForm: {
|
||
appname: ''
|
||
},
|
||
createRules: {
|
||
appname: [
|
||
{ required: true, message: '请输入令牌名称', trigger: ['blur', 'change'] }
|
||
]
|
||
},
|
||
safeTips: [
|
||
'请不要与他人共享您的 API Keys，暴露 API Key 可能会破坏您的帐户安全和访问的服务。',
|
||
'避免将 API Key 暴露在浏览器或其他客户端代码中。',
|
||
'为了保护您的帐户安全，一旦 API Keys 被发现泄露，平台发现后可能会将其禁用。'
|
||
],
|
||
tokenList: []
|
||
}
|
||
},
|
||
computed: {
|
||
statCards() {
|
||
return [
|
||
{ label: '令牌总数', value: this.tokenList.length, icon: 'el-icon-key', type: 'primary' },
|
||
{ label: '启用中', value: this.enabledCount, icon: 'el-icon-success', type: 'success' }
|
||
]
|
||
},
|
||
enabledCount() {
|
||
return this.tokenList.filter(item => this.isEnabled(item)).length
|
||
}
|
||
},
|
||
created() {
|
||
this.fetchApiKeyList()
|
||
},
|
||
methods: {
|
||
getUserId() {
|
||
return sessionStorage.getItem('userId') || localStorage.getItem('userId') || ''
|
||
},
|
||
getUserParams() {
|
||
const userid = this.getUserId()
|
||
if (!userid || userid === 'null') {
|
||
this.$message.warning('请先登录后再管理 API Key')
|
||
return null
|
||
}
|
||
return { userid }
|
||
},
|
||
async fetchApiKeyList() {
|
||
const params = this.getUserParams()
|
||
if (!params) return
|
||
|
||
this.tableLoading = true
|
||
try {
|
||
const res = await reqApikeyList(params)
|
||
if (res && res.status === false) {
|
||
throw new Error(res.msg || '获取 API Key 列表失败')
|
||
}
|
||
this.tokenList = this.normalizeApiKeyList(res)
|
||
} catch (error) {
|
||
this.tokenList = []
|
||
this.$message.error(error && error.message ? error.message : '获取 API Key 列表失败')
|
||
} finally {
|
||
this.tableLoading = false
|
||
}
|
||
},
|
||
handleCreateApiKey() {
|
||
this.createDialogVisible = true
|
||
this.$nextTick(() => {
|
||
if (this.$refs.createFormRef) {
|
||
this.$refs.createFormRef.clearValidate()
|
||
}
|
||
})
|
||
},
|
||
async submitCreateApiKey() {
|
||
const isValid = await new Promise(resolve => {
|
||
if (!this.$refs.createFormRef) {
|
||
resolve(false)
|
||
return
|
||
}
|
||
this.$refs.createFormRef.validate(valid => resolve(valid))
|
||
})
|
||
if (!isValid) return
|
||
const appname = this.createForm.appname
|
||
|
||
const params = this.getUserParams()
|
||
if (!params) return
|
||
|
||
this.createLoading = true
|
||
try {
|
||
const res = await reqCreateApikey({ ...params, appname })
|
||
if (res && res.status === false) {
|
||
throw new Error(res.msg || '创建 API Key 失败')
|
||
}
|
||
this.$message.success('API Key 创建成功')
|
||
this.createDialogVisible = false
|
||
this.resetCreateForm()
|
||
await this.fetchApiKeyList()
|
||
} catch (error) {
|
||
this.$message.error(error && error.message ? error.message : '创建 API Key 失败')
|
||
} finally {
|
||
this.createLoading = false
|
||
}
|
||
},
|
||
resetCreateForm() {
|
||
if (this.$refs.createFormRef) {
|
||
this.$refs.createFormRef.resetFields()
|
||
} else {
|
||
this.createForm.appname = ''
|
||
}
|
||
},
|
||
normalizeApiKeyList(res) {
|
||
const data = res && res.data !== undefined ? res.data : res
|
||
const list = Array.isArray(data)
|
||
? data
|
||
: Array.isArray(data && data.apikeys)
|
||
? data.apikeys
|
||
: Array.isArray(data && data.list)
|
||
? data.list
|
||
: Array.isArray(data && data.apikey_list)
|
||
? data.apikey_list
|
||
: Array.isArray(data && data.data)
|
||
? data.data
|
||
: data && typeof data === 'object'
|
||
? [data]
|
||
: []
|
||
|
||
return list.map((item, index) => this.normalizeApiKeyItem(item, index))
|
||
},
|
||
normalizeApiKeyItem(item, index) {
|
||
if (typeof item === 'string') {
|
||
return {
|
||
id: index + 1,
|
||
name: `API Key ${index + 1}`,
|
||
apikey: item,
|
||
status: 1
|
||
}
|
||
}
|
||
|
||
return {
|
||
...item,
|
||
id: item.id || item.apikeyid || item.apikey_id || index + 1,
|
||
name: item.name || item.api_key_name || item.apikey_name || `API Key ${index + 1}`,
|
||
apikey: item.apikey || item.apikeyid || item.api_key || item.key || item.token || item.id || '-',
|
||
created_at: item.created_at || item.create_time || item.updated_at || '',
|
||
status: item.status !== undefined ? item.status : 1
|
||
}
|
||
},
|
||
isEnabled(row) {
|
||
return Number(row.status) !== 0 && row.status !== 'disabled'
|
||
},
|
||
getStatusText(row) {
|
||
return this.isEnabled(row) ? '启用' : '禁用'
|
||
},
|
||
getStatusType(row) {
|
||
return this.isEnabled(row) ? 'success' : 'info'
|
||
},
|
||
maskApiKey(value) {
|
||
const key = String(value || '').trim()
|
||
if (!key) return '-'
|
||
if (key.length <= 8) return key
|
||
const prefix = key.slice(0, 6)
|
||
const suffix = key.slice(-4)
|
||
return `${prefix}****${suffix}`
|
||
},
|
||
copyApiKey(row) {
|
||
const value = row && (row.opc_apikey || row.apikey)
|
||
if (!value || value === '-') {
|
||
this.$message.warning('暂无可复制的 API Key')
|
||
return
|
||
}
|
||
|
||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||
navigator.clipboard.writeText(value).then(() => {
|
||
this.$message.success('API Key 已复制')
|
||
}).catch(() => {
|
||
this.copyByInput(value)
|
||
})
|
||
return
|
||
}
|
||
|
||
this.copyByInput(value)
|
||
},
|
||
copyByInput(value) {
|
||
const input = document.createElement('input')
|
||
input.value = value
|
||
document.body.appendChild(input)
|
||
input.select()
|
||
document.execCommand('copy')
|
||
document.body.removeChild(input)
|
||
this.$message.success('API Key 已复制')
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.api-key-page {
|
||
min-height: 100vh;
|
||
padding: 24px;
|
||
background: linear-gradient(180deg, #f3f7ff 0%, #f7f9fc 44%, #ffffff 100%);
|
||
}
|
||
|
||
.api-key-shell {
|
||
position: relative;
|
||
min-height: calc(100vh - 48px);
|
||
padding: 24px;
|
||
color: #1f2d3d;
|
||
background: #ffffff;
|
||
border: 1px solid #edf1f7;
|
||
border-radius: 18px;
|
||
box-shadow: 0 12px 30px rgba(31, 45, 61, 0.06);
|
||
overflow: hidden;
|
||
|
||
&::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: -80px;
|
||
right: -80px;
|
||
width: 220px;
|
||
height: 220px;
|
||
background: radial-gradient(circle, rgba(64, 158, 255, 0.12) 0%, rgba(64, 158, 255, 0) 70%);
|
||
pointer-events: none;
|
||
}
|
||
}
|
||
|
||
.page-header {
|
||
position: relative;
|
||
z-index: 1;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.title-line {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin-bottom: 8px;
|
||
|
||
h2 {
|
||
margin: 0;
|
||
color: #1f2d3d;
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
|
||
.key-icon {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 34px;
|
||
height: 34px;
|
||
color: #409eff;
|
||
font-size: 18px;
|
||
background: #eef5ff;
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.title-block p {
|
||
margin: 0;
|
||
color: #909399;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.header-actions {
|
||
display: flex;
|
||
gap: 12px;
|
||
}
|
||
|
||
.ghost-btn {
|
||
color: #606266;
|
||
background: #f5f7fa;
|
||
border-color: #e4e7ed;
|
||
border-radius: 10px;
|
||
|
||
&:hover,
|
||
&:focus {
|
||
color: #409eff;
|
||
background: #ecf5ff;
|
||
border-color: #b3d8ff;
|
||
}
|
||
}
|
||
|
||
.create-btn {
|
||
background: #409eff;
|
||
border-color: #409eff;
|
||
border-radius: 10px;
|
||
box-shadow: 0 8px 18px rgba(64, 158, 255, 0.24);
|
||
}
|
||
|
||
.safe-card {
|
||
position: relative;
|
||
z-index: 1;
|
||
padding: 22px 24px;
|
||
margin-bottom: 20px;
|
||
background: linear-gradient(135deg, #f8fbff 0%, #f2f7ff 100%);
|
||
border: 1px solid #edf1f7;
|
||
border-radius: 14px;
|
||
}
|
||
|
||
.safe-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-bottom: 14px;
|
||
|
||
i {
|
||
color: #409eff;
|
||
font-size: 18px;
|
||
}
|
||
|
||
h3 {
|
||
margin: 0;
|
||
color: #1f2d3d;
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
|
||
.safe-list {
|
||
display: grid;
|
||
gap: 8px;
|
||
}
|
||
|
||
.safe-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 8px;
|
||
|
||
span {
|
||
width: 5px;
|
||
height: 5px;
|
||
margin-top: 8px;
|
||
background: #409eff;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
p {
|
||
margin: 0;
|
||
color: #606266;
|
||
font-size: 13px;
|
||
line-height: 1.7;
|
||
}
|
||
}
|
||
|
||
.stat-row {
|
||
width: 100%;
|
||
// display: grid;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
// grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 14px;
|
||
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.stat-card {
|
||
width: 48%;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
padding: 20px 22px;
|
||
background: #ffffff;
|
||
border: 1px solid #edf1f7;
|
||
border-radius: 14px;
|
||
box-shadow: 0 10px 28px rgba(31, 45, 61, 0.06);
|
||
|
||
.stat-icon {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 44px;
|
||
height: 44px;
|
||
color: #409eff;
|
||
font-size: 20px;
|
||
background: #eef5ff;
|
||
border-radius: 14px;
|
||
}
|
||
|
||
&.success .stat-icon {
|
||
color: #67c23a;
|
||
background: #f0f9eb;
|
||
}
|
||
|
||
span {
|
||
display: block;
|
||
margin-bottom: 8px;
|
||
color: #909399;
|
||
font-size: 13px;
|
||
}
|
||
|
||
strong {
|
||
color: #303133;
|
||
font-size: 28px;
|
||
line-height: 1;
|
||
}
|
||
}
|
||
|
||
.table-card {
|
||
padding: 20px;
|
||
background: #ffffff;
|
||
border: 1px solid #edf1f7;
|
||
border-radius: 16px;
|
||
box-shadow: 0 10px 28px rgba(31, 45, 61, 0.06);
|
||
}
|
||
|
||
.table-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 14px;
|
||
|
||
h3 {
|
||
margin: 0 0 6px;
|
||
color: #1f2d3d;
|
||
font-size: 18px;
|
||
}
|
||
|
||
p {
|
||
margin: 0;
|
||
color: #909399;
|
||
font-size: 13px;
|
||
}
|
||
|
||
span {
|
||
color: #909399;
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
|
||
.table-wrap {
|
||
max-height: 360px;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
|
||
&::-webkit-scrollbar {
|
||
width: 8px;
|
||
}
|
||
|
||
&::-webkit-scrollbar-track {
|
||
background: #f1f2f4;
|
||
}
|
||
|
||
&::-webkit-scrollbar-thumb {
|
||
background: #c0c4cc;
|
||
border-radius: 999px;
|
||
}
|
||
}
|
||
|
||
.api-key-table {
|
||
color: #606266;
|
||
background: transparent;
|
||
|
||
/deep/ .el-table__header th {
|
||
color: #475467;
|
||
background: #f8fbff;
|
||
border-bottom: 1px solid #edf1f7;
|
||
}
|
||
|
||
/deep/ .el-table__row {
|
||
background: #ffffff;
|
||
}
|
||
|
||
/deep/ tr:hover > td {
|
||
background: #f8fbff !important;
|
||
}
|
||
|
||
/deep/ td {
|
||
color: #606266;
|
||
background: #ffffff;
|
||
border-bottom: 1px solid #edf1f7;
|
||
}
|
||
|
||
/deep/ .el-table__empty-block {
|
||
background: #ffffff;
|
||
}
|
||
|
||
/deep/ &::before {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.token-name {
|
||
color: #1f2d3d;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.masked-key,
|
||
.view-btn {
|
||
color: #409eff;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/deep/ .create-token-dialog {
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
box-shadow: 0 20px 48px rgba(15, 23, 42, 0.18);
|
||
|
||
.el-dialog__header {
|
||
padding: 18px 22px 12px;
|
||
border-bottom: 1px solid #eef2f7;
|
||
}
|
||
|
||
.el-dialog__title {
|
||
color: #1f2d3d;
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.el-dialog__body {
|
||
padding: 18px 22px 8px;
|
||
}
|
||
|
||
.el-dialog__footer {
|
||
padding: 14px 22px 18px;
|
||
}
|
||
}
|
||
|
||
.create-token-form {
|
||
/deep/ .el-form-item__label {
|
||
color: #4b5565;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/deep/ .el-input__inner {
|
||
height: 38px;
|
||
border-radius: 10px;
|
||
border-color: #d8e3f0;
|
||
}
|
||
}
|
||
|
||
.create-token-tip {
|
||
margin: 8px 0 0;
|
||
color: #8a94a6;
|
||
font-size: 12px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.dialog-footer {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 10px;
|
||
}
|
||
|
||
.dialog-cancel-btn {
|
||
min-width: 74px;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.dialog-submit-btn {
|
||
min-width: 90px;
|
||
border-radius: 8px;
|
||
}
|
||
</style>
|