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

refactor: clean up template and script formatting for improved readability

Browse Source
This commit is contained in:
wxg0103 2025-07-08 14:49:13 +08:00
parent 8f00184122
commit e346137a48
1 changed files with 62 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
ui/src/views/application-overview/index.vue
View File

@ -11,21 +11,9 @@
<div class="title flex align-center"> <div class="title flex align-center">
<div <div
class="edit-avatar mr-12" class="edit-avatar mr-12"
@mouseenter="showEditIcon = true"
@mouseleave="showEditIcon = false"
> >
<el-avatar shape="square" :size="32" style="background: none"> <el-avatar shape="square" :size="32" style="background: none">
<img :src="resetUrl(detail?.icon, resetUrl('./favicon.ico'))" alt="" /> <img :src="resetUrl(detail?.icon, resetUrl('./favicon.ico'))" alt=""/>
</el-avatar>
<el-avatar
v-if="showEditIcon"
shape="square"
class="edit-mask"
:size="32"
@click="openEditAvatar"
>
<el-icon><EditPen /></el-icon>
</el-avatar> </el-avatar>
</div> </div>
@ -36,8 +24,9 @@
<el-col :span="12" class="mt-16"> <el-col :span="12" class="mt-16">
<div class="flex"> <div class="flex">
<el-text type="info">{{ <el-text type="info">{{
$t('views.applicationOverview.appInfo.publicAccessLink') $t('views.applicationOverview.appInfo.publicAccessLink')
}}</el-text> }}
</el-text>
<el-switch <el-switch
v-model="accessToken.is_active" v-model="accessToken.is_active"
class="ml-8" class="ml-8"
@ -65,7 +54,9 @@
text text
style="margin-left: 1px" style="margin-left: 1px"
> >
<el-icon><RefreshRight /></el-icon> <el-icon>
<RefreshRight/>
</el-icon>
</el-button> </el-button>
</el-tooltip> </el-tooltip>
</div> </div>
@ -94,7 +85,9 @@
</el-button> </el-button>
<!-- 访问限制 --> <!-- 访问限制 -->
<el-button @click="openLimitDialog" v-if="permissionPrecise.overview_access(id)"> <el-button @click="openLimitDialog" v-if="permissionPrecise.overview_access(id)">
<el-icon class="mr-4"><Lock /></el-icon> <el-icon class="mr-4">
<Lock/>
</el-icon>
{{ $t('views.applicationOverview.appInfo.accessControl') }} {{ $t('views.applicationOverview.appInfo.accessControl') }}
</el-button> </el-button>
<!-- 显示设置 --> <!-- 显示设置 -->
@ -102,7 +95,9 @@
@click="openDisplaySettingDialog" @click="openDisplaySettingDialog"
v-if="permissionPrecise.overview_display(id)" v-if="permissionPrecise.overview_display(id)"
> >
<el-icon class="mr-4"><Setting /></el-icon> <el-icon class="mr-4">
<Setting/>
</el-icon>
{{ $t('views.applicationOverview.appInfo.displaySetting') }} {{ $t('views.applicationOverview.appInfo.displaySetting') }}
</el-button> </el-button>
</div> </div>
@ -110,13 +105,15 @@
<el-col :span="12" class="mt-16"> <el-col :span="12" class="mt-16">
<div class="flex"> <div class="flex">
<el-text type="info" <el-text type="info"
>{{ $t('views.applicationOverview.appInfo.apiAccessCredentials') }} >{{ $t('views.applicationOverview.appInfo.apiAccessCredentials') }}
</el-text> </el-text>
</div> </div>
<div class="mt-4 mb-16 url-height"> <div class="mt-4 mb-16 url-height">
<div> <div>
<el-text>API {{ $t('common.fileUpload.document') }}：</el-text <el-text>API {{ $t('common.fileUpload.document') }}：
><el-button </el-text
>
<el-button
type="primary" type="primary"
link link
@click="toUrl(apiUrl)" @click="toUrl(apiUrl)"
@ -131,8 +128,8 @@
</span> </span>
<span class="vertical-middle lighter break-all ellipsis-1">{{ <span class="vertical-middle lighter break-all ellipsis-1">{{
baseUrl + id baseUrl + id
}}</span> }}</span>
<el-tooltip effect="dark" :content="$t('common.copy')" placement="top"> <el-tooltip effect="dark" :content="$t('common.copy')" placement="top">
<el-button type="primary" text @click="copyClick(baseUrl + id)"> <el-button type="primary" text @click="copyClick(baseUrl + id)">
<AppIcon iconName="app-copy"></AppIcon> <AppIcon iconName="app-copy"></AppIcon>
@ -145,8 +142,11 @@
@click="openAPIKeyDialog" @click="openAPIKeyDialog"
v-if="permissionPrecise.overview_api_key(id)" v-if="permissionPrecise.overview_api_key(id)"
> >
<el-icon class="mr-4"><Key /></el-icon> <el-icon class="mr-4">
{{ $t('views.applicationOverview.appInfo.apiKey') }}</el-button <Key/>
</el-icon>
{{ $t('views.applicationOverview.appInfo.apiKey') }}
</el-button
> >
</div> </div>
</el-col> </el-col>
@ -183,7 +183,7 @@
/> />
</div> </div>
<div v-loading="statisticsLoading"> <div v-loading="statisticsLoading">
<StatisticsCharts :data="statisticsData" /> <StatisticsCharts :data="statisticsData"/>
</div> </div>
</el-card> </el-card>
</div> </div>
@ -194,18 +194,18 @@
:data="detail" :data="detail"
:api-input-params="mapToUrlParams(apiInputParams)" :api-input-params="mapToUrlParams(apiInputParams)"
/> />
<APIKeyDialog ref="APIKeyDialogRef" /> <APIKeyDialog ref="APIKeyDialogRef"/>
<EditAvatarDialog ref="EditAvatarDialogRef" @refresh="refreshIcon" /> <EditAvatarDialog ref="EditAvatarDialogRef" @refresh="refreshIcon"/>
<!-- 社区版访问限制 --> <!-- 社区版访问限制 -->
<component :is="currentLimitDialog" ref="LimitDialogRef" @refresh="refresh" /> <component :is="currentLimitDialog" ref="LimitDialogRef" @refresh="refresh"/>
<!-- 显示设置 --> <!-- 显示设置 -->
<component :is="currentDisplaySettingDialog" ref="DisplaySettingDialogRef" @refresh="refresh" /> <component :is="currentDisplaySettingDialog" ref="DisplaySettingDialogRef" @refresh="refresh"/>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed, onMounted, shallowRef, nextTick } from 'vue' import {ref, computed, onMounted, shallowRef, nextTick} from 'vue'
import { useRoute } from 'vue-router' import {useRoute} from 'vue-router'
import EmbedDialog from './component/EmbedDialog.vue' import EmbedDialog from './component/EmbedDialog.vue'
import APIKeyDialog from './component/APIKeyDialog.vue' import APIKeyDialog from './component/APIKeyDialog.vue'
import LimitDialog from './component/LimitDialog.vue' import LimitDialog from './component/LimitDialog.vue'
@ -215,15 +215,15 @@ import XPackDisplaySettingDialog from './xpack-component/XPackDisplaySettingDial
import EditAvatarDialog from './component/EditAvatarDialog.vue' import EditAvatarDialog from './component/EditAvatarDialog.vue'
import StatisticsCharts from './component/StatisticsCharts.vue' import StatisticsCharts from './component/StatisticsCharts.vue'
import applicationApi from '@/api/application/application' import applicationApi from '@/api/application/application'
import { nowDate, beforeDay } from '@/utils/time' import {nowDate, beforeDay} from '@/utils/time'
import { MsgSuccess, MsgConfirm } from '@/utils/message' import {MsgSuccess, MsgConfirm} from '@/utils/message'
import { copyClick } from '@/utils/clipboard' import {copyClick} from '@/utils/clipboard'
import { isAppIcon, resetUrl } from '@/utils/common' import {isAppIcon, resetUrl} from '@/utils/common'
import { mapToUrlParams } from '@/utils/application' import {mapToUrlParams} from '@/utils/application'
import useStore from '@/stores' import useStore from '@/stores'
import { t } from '@/locales' import {t} from '@/locales'
import { EditionConst } from '@/utils/permission/data' import {EditionConst} from '@/utils/permission/data'
import { hasPermission } from '@/utils/permission/index' import {hasPermission} from '@/utils/permission/index'
import permissionMap from '@/permission' import permissionMap from '@/permission'
const route = useRoute() const route = useRoute()
@ -235,9 +235,9 @@ const permissionPrecise = computed(() => {
return permissionMap['application'][apiType.value] return permissionMap['application'][apiType.value]
}) })
const { user, application } = useStore() const {user, application} = useStore()
const { const {
params: { id }, params: {id},
} = route as any } = route as any
const apiUrl = window.location.origin + '/doc/chat/' const apiUrl = window.location.origin + '/doc/chat/'
@ -308,6 +308,7 @@ function toUrl(url: string) {
// 显示设置 // 显示设置
const DisplaySettingDialogRef = ref() const DisplaySettingDialogRef = ref()
const currentDisplaySettingDialog = shallowRef<any>(null) const currentDisplaySettingDialog = shallowRef<any>(null)
function openDisplaySettingDialog() { function openDisplaySettingDialog() {
// 企业版和专业版 // 企业版和专业版
if (hasPermission([EditionConst.IS_EE, EditionConst.IS_PE], 'OR')) { if (hasPermission([EditionConst.IS_EE, EditionConst.IS_PE], 'OR')) {
@ -330,6 +331,7 @@ function openDisplaySettingDialog() {
// 访问限制 // 访问限制
const LimitDialogRef = ref() const LimitDialogRef = ref()
const currentLimitDialog = shallowRef<any>(null) const currentLimitDialog = shallowRef<any>(null)
function openLimitDialog() { function openLimitDialog() {
// 企业版和专业版 // 企业版和专业版
if (hasPermission([EditionConst.IS_EE, EditionConst.IS_PE], 'OR')) { if (hasPermission([EditionConst.IS_EE, EditionConst.IS_PE], 'OR')) {
@ -384,8 +386,10 @@ function refreshAccessToken() {
const str = t('views.applicationOverview.appInfo.refreshToken.refreshSuccess') const str = t('views.applicationOverview.appInfo.refreshToken.refreshSuccess')
updateAccessToken(obj, str) updateAccessToken(obj, str)
}) })
.catch(() => {}) .catch(() => {
})
} }
function changeState(bool: boolean) { function changeState(bool: boolean) {
const obj = { const obj = {
is_active: !bool, is_active: !bool,
@ -410,9 +414,11 @@ async function updateAccessToken(obj: any, str: string) {
function openAPIKeyDialog() { function openAPIKeyDialog() {
APIKeyDialogRef.value.open() APIKeyDialogRef.value.open()
} }
function openDialog() { function openDialog() {
EmbedDialogRef.value.open(accessToken.value?.access_token) EmbedDialogRef.value.open(accessToken.value?.access_token)
} }
function getAccessToken() { function getAccessToken() {
application.asyncGetAccessToken(id, loading).then((res: any) => { application.asyncGetAccessToken(id, loading).then((res: any) => {
accessToken.value = res?.data accessToken.value = res?.data
@ -427,20 +433,20 @@ function getDetail() {
.map((v: any) => { .map((v: any) => {
apiInputParams.value = v.properties.api_input_field_list apiInputParams.value = v.properties.api_input_field_list
? v.properties.api_input_field_list.map((v: any) => { ? v.properties.api_input_field_list.map((v: any) => {
return { return {
name: v.variable, name: v.variable,
value: v.default_value, value: v.default_value,
} }
}) })
: v.properties.input_field_list : v.properties.input_field_list
? v.properties.input_field_list ? v.properties.input_field_list
.filter((v: any) => v.assignment_method === 'api_input') .filter((v: any) => v.assignment_method === 'api_input')
.map((v: any) => { .map((v: any) => {
return { return {
name: v.variable, name: v.variable,
value: v.default_value, value: v.default_value,
} }
}) })
: [] : []
}) })
}) })
@ -463,6 +469,7 @@ onMounted(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.overview-card { .overview-card {
position: relative; position: relative;
.active-button { .active-button {
position: absolute; position: absolute;
right: 16px; right: 16px;