zhuchaowe/maxkb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: APIKey样式修改

Browse Source
This commit is contained in:
wangdan-fit2cloud 2024-07-11 11:20:27 +08:00
parent 655586bc86
commit b23a31b55e
1 changed files with 57 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
ui/src/layout/components/top-bar/avatar/APIKeyDialog.vue
View File

@ -1,16 +1,18 @@
<template> <template>
<el-dialog :title="$t('layout.topbar.avatar.apiKey')" v-model="dialogVisible" width="800"> <el-dialog :title="$t('layout.topbar.avatar.apiKey')" v-model="dialogVisible" width="800">
<div class="mb-16 grey-background"> <el-card shadow="never" class="layout-bg mb-16">
<el-text type="info">{{ $t('layout.topbar.avatar.apiServiceAddress') }}</el-text> <el-text type="info" class="color-secondary">{{
$t('layout.topbar.avatar.apiServiceAddress')
}}</el-text>
<p style="margin-top: 10px"> <p style="margin-top: 10px">
<a target="_blank" :href="apiUrl" class="vertical-middle lighter break-all" style="color: black;"> <span class="vertical-middle lighter break-all">
{{ apiUrl }} {{ apiUrl }}
</a> </span>
<el-button type="primary" text @click="copyClick(apiUrl)"> <el-button type="primary" text @click="copyClick(apiUrl)">
<AppIcon iconName="app-copy"></AppIcon> <AppIcon iconName="app-copy"></AppIcon>
</el-button> </el-button>
</p> </p>
</div> </el-card>
<el-button type="primary" class="mb-16" @click="createApiKey"> <el-button type="primary" class="mb-16" @click="createApiKey">
{{ $t('views.applicationOverview.appInfo.APIKeyDialog.creatApiKey') }} {{ $t('views.applicationOverview.appInfo.APIKeyDialog.creatApiKey') }}
@ -27,78 +29,78 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
:label="$t('views.applicationOverview.appInfo.APIKeyDialog.status')" :label="$t('views.applicationOverview.appInfo.APIKeyDialog.status')"
width="60" width="60"
> >
<template #default="{ row }"> <template #default="{ row }">
<div @click.stop> <div @click.stop>
<el-switch size="small" v-model="row.is_active" @change="changeState($event, row)"/> <el-switch size="small" v-model="row.is_active" @change="changeState($event, row)" />
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="name" prop="name"
:label="$t('views.applicationOverview.appInfo.APIKeyDialog.creationDate')" :label="$t('views.applicationOverview.appInfo.APIKeyDialog.creationDate')"
width="170" width="170"
> >
<template #default="{ row }"> <template #default="{ row }">
{{ datetimeFormat(row.create_time) }} {{ datetimeFormat(row.create_time) }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
:label="$t('views.applicationOverview.appInfo.APIKeyDialog.operations')" :label="$t('views.applicationOverview.appInfo.APIKeyDialog.operations')"
align="left" align="left"
width="80" width="80"
> >
<template #default="{ row }"> <template #default="{ row }">
<span class="mr-4"> <span class="mr-4">
<el-tooltip <el-tooltip
effect="dark" effect="dark"
:content="$t('views.applicationOverview.appInfo.APIKeyDialog.settings')" :content="$t('views.applicationOverview.appInfo.APIKeyDialog.settings')"
placement="top" placement="top"
> >
<el-button type="primary" text @click.stop="settingApiKey(row)"> <el-button type="primary" text @click.stop="settingApiKey(row)">
<el-icon><Setting/></el-icon> <el-icon><Setting /></el-icon>
</el-button> </el-button>
</el-tooltip> </el-tooltip>
</span> </span>
<el-tooltip <el-tooltip
effect="dark" effect="dark"
:content="$t('views.applicationOverview.appInfo.APIKeyDialog.delete')" :content="$t('views.applicationOverview.appInfo.APIKeyDialog.delete')"
placement="top" placement="top"
> >
<el-button type="primary" text @click="deleteApiKey(row)"> <el-button type="primary" text @click="deleteApiKey(row)">
<el-icon> <el-icon>
<Delete/> <Delete />
</el-icon> </el-icon>
</el-button> </el-button>
</el-tooltip> </el-tooltip>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<SettingAPIKeyDialog ref="SettingAPIKeyDialogRef" @refresh="refresh"/> <SettingAPIKeyDialog ref="SettingAPIKeyDialogRef" @refresh="refresh" />
</el-dialog> </el-dialog>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import {ref, watch} from 'vue' import { ref, watch } from 'vue'
import {useRoute} from 'vue-router' import { useRoute } from 'vue-router'
import {copyClick} from '@/utils/clipboard' import { copyClick } from '@/utils/clipboard'
import overviewApi from '@/api/system-api-key' import systemKeyApi from '@/api/system-api-key'
import {datetimeFormat} from '@/utils/time' import { datetimeFormat } from '@/utils/time'
import {MsgSuccess, MsgConfirm} from '@/utils/message' import { MsgSuccess, MsgConfirm } from '@/utils/message'
import {t} from '@/locales' import { t } from '@/locales'
import SettingAPIKeyDialog from "./SettingAPIKeyDialog.vue"; import SettingAPIKeyDialog from './SettingAPIKeyDialog.vue'
const route = useRoute() const route = useRoute()
const { const {
params: {id} params: { id }
} = route } = route
const props = defineProps({ const props = defineProps({
userId: { userId: {
type: String, type: String,
default: '' default: ''
}, }
}) })
const emit = defineEmits(['addData']) const emit = defineEmits(['addData'])
@ -108,7 +110,6 @@ const dialogVisible = ref<boolean>(false)
const loading = ref(false) const loading = ref(false)
const apiKey = ref<any>(null) const apiKey = ref<any>(null)
watch(dialogVisible, (bool) => { watch(dialogVisible, (bool) => {
if (!bool) { if (!bool) {
apiKey.value = null apiKey.value = null
@ -121,23 +122,22 @@ function settingApiKey(row: any) {
function deleteApiKey(row: any) { function deleteApiKey(row: any) {
MsgConfirm( MsgConfirm(
// @ts-ignore // @ts-ignore
`${t('views.applicationOverview.appInfo.APIKeyDialog.msgConfirm1')}: ${row.secret_key}?`, `${t('views.applicationOverview.appInfo.APIKeyDialog.msgConfirm1')}: ${row.secret_key}?`,
t('views.applicationOverview.appInfo.APIKeyDialog.msgConfirm2'), t('views.applicationOverview.appInfo.APIKeyDialog.msgConfirm2'),
{ {
confirmButtonText: t('views.applicationOverview.appInfo.APIKeyDialog.confirmDelete'), confirmButtonText: t('views.applicationOverview.appInfo.APIKeyDialog.confirmDelete'),
cancelButtonText: t('views.applicationOverview.appInfo.APIKeyDialog.cancel'), cancelButtonText: t('views.applicationOverview.appInfo.APIKeyDialog.cancel'),
confirmButtonClass: 'danger' confirmButtonClass: 'danger'
} }
) )
.then(() => { .then(() => {
overviewApi.delAPIKey(row.id, loading).then(() => { systemKeyApi.delAPIKey(row.id, loading).then(() => {
MsgSuccess(t('views.applicationOverview.appInfo.APIKeyDialog.deleteSuccess')) MsgSuccess(t('views.applicationOverview.appInfo.APIKeyDialog.deleteSuccess'))
getApiKeyList() getApiKeyList()
})
})
.catch(() => {
}) })
})
.catch(() => {})
} }
function changeState(bool: Boolean, row: any) { function changeState(bool: Boolean, row: any) {
@ -145,16 +145,16 @@ function changeState(bool: Boolean, row: any) {
is_active: bool is_active: bool
} }
const str = bool const str = bool
? t('views.applicationOverview.appInfo.APIKeyDialog.enabledSuccess') ? t('views.applicationOverview.appInfo.APIKeyDialog.enabledSuccess')
: t('views.applicationOverview.appInfo.APIKeyDialog.disabledSuccess') : t('views.applicationOverview.appInfo.APIKeyDialog.disabledSuccess')
overviewApi.putAPIKey(row.id, obj, loading).then((res) => { systemKeyApi.putAPIKey(row.id, obj, loading).then((res) => {
MsgSuccess(str) MsgSuccess(str)
getApiKeyList() getApiKeyList()
}) })
} }
function createApiKey() { function createApiKey() {
overviewApi.postAPIKey(loading).then((res) => { systemKeyApi.postAPIKey(loading).then((res) => {
getApiKeyList() getApiKeyList()
}) })
} }
@ -165,7 +165,7 @@ const open = () => {
} }
function getApiKeyList() { function getApiKeyList() {
overviewApi.getAPIKey().then((res) => { systemKeyApi.getAPIKey().then((res) => {
apiKey.value = res.data apiKey.value = res.data
}) })
} }
@ -174,12 +174,6 @@ function refresh() {
getApiKeyList() getApiKeyList()
} }
defineExpose({open}) defineExpose({ open })
</script> </script>
<style lang="scss" scope> <style lang="scss" scope></style>
.grey-background {
background-color: #f2f2f2; /* 灰色背景 */
padding: 20px; /* 内边距 */
border-radius: 8px; /* 可选：添加圆角 */
}
</style>