<template>
|
<ElCard class="art-table-card ai-param-runtime-summary-card !mb-5" shadow="never">
|
<div class="mb-3 flex items-start justify-between gap-4">
|
<div>
|
<h3 class="text-base font-semibold text-[var(--art-gray-900)]">{{ t('pages.system.aiParam.summary.title') }}</h3>
|
<p class="mt-0.5 text-xs text-[var(--art-gray-500)]">{{ t('pages.system.aiParam.summary.subtitle') }}</p>
|
</div>
|
<ElButton text :loading="loading" @click="loadSummary">{{ t('pages.system.aiParam.summary.refresh') }}</ElButton>
|
</div>
|
|
<ElAlert
|
v-if="errorMessage"
|
type="warning"
|
:closable="false"
|
class="!mb-5"
|
:title="errorMessage"
|
/>
|
|
<div class="grid gap-2.5 lg:grid-cols-3" v-loading="loading">
|
<div class="rounded-2xl border border-[var(--art-border-color)] bg-[var(--art-main-bg-color)] px-3 py-3">
|
<div class="flex items-center gap-2.5">
|
<div class="flex size-8 items-center justify-center rounded-xl bg-sky-50 text-sky-600">
|
<ArtSvgIcon icon="ri:robot-2-line" class="text-base" />
|
</div>
|
<div class="min-w-0 flex-1">
|
<p class="text-[11px] text-[var(--art-gray-500)]">{{ t('pages.system.aiParam.summary.activeModel') }}</p>
|
<h4 class="truncate text-sm font-semibold text-[var(--art-gray-900)]">
|
{{ summary.activeModel || '--' }}
|
</h4>
|
</div>
|
</div>
|
<div class="mt-2 flex items-center justify-between gap-3">
|
<p class="truncate text-xs text-[var(--art-gray-700)]">{{ summary.activeParamName || '--' }}</p>
|
<ElTag size="small" :type="validateMeta.type" effect="light">
|
{{ validateMeta.text }}
|
</ElTag>
|
</div>
|
<p class="mt-1 text-[11px] text-[var(--art-gray-500)]">{{ summary.activeParamValidatedAt || t('pages.system.aiParam.validation.notTested') }}</p>
|
</div>
|
|
<div class="rounded-2xl border border-[var(--art-border-color)] bg-[var(--art-main-bg-color)] px-3 py-3">
|
<div class="flex items-center gap-2.5">
|
<div class="flex size-8 items-center justify-center rounded-xl bg-violet-50 text-violet-600">
|
<ArtSvgIcon icon="ri:lightbulb-flash-line" class="text-base" />
|
</div>
|
<div class="min-w-0 flex-1">
|
<p class="text-[11px] text-[var(--art-gray-500)]">{{ t('pages.system.aiParam.summary.activePrompt') }}</p>
|
<h4 class="truncate text-sm font-semibold text-[var(--art-gray-900)]">
|
{{ summary.promptName || '--' }}
|
</h4>
|
</div>
|
</div>
|
<p class="mt-2 truncate text-xs text-[var(--art-gray-700)]">
|
{{ [summary.promptCode, summary.promptScene].filter(Boolean).join(' / ') || '--' }}
|
</p>
|
<p class="mt-1 text-[11px] text-[var(--art-gray-500)]">
|
{{ t('pages.system.aiParam.summary.lastPromptUpdate', { value: summary.activePromptUpdatedAt || '--' }) }}
|
</p>
|
</div>
|
|
<div class="rounded-2xl border border-[var(--art-border-color)] bg-[var(--art-main-bg-color)] px-3 py-3">
|
<div class="flex items-center gap-2.5">
|
<div class="flex size-8 items-center justify-center rounded-xl bg-emerald-50 text-emerald-600">
|
<ArtSvgIcon icon="ri:plug-2-line" class="text-base" />
|
</div>
|
<div class="min-w-0 flex-1">
|
<p class="text-[11px] text-[var(--art-gray-500)]">{{ t('pages.system.aiParam.summary.enabledMcp') }}</p>
|
<h4 class="text-sm font-semibold text-[var(--art-gray-900)]">
|
{{ t('pages.system.aiParam.summary.enabledMcpCount', { count: summary.enabledMcpCount ?? 0 }) }}
|
</h4>
|
</div>
|
</div>
|
<div class="mt-2 flex flex-wrap gap-1.5">
|
<ElTag
|
v-for="name in enabledMcpNames"
|
:key="name"
|
size="small"
|
effect="plain"
|
>
|
{{ name }}
|
</ElTag>
|
<span v-if="!enabledMcpNames.length" class="text-xs text-[var(--art-gray-500)]">{{ t('pages.system.aiParam.summary.noMcp') }}</span>
|
</div>
|
</div>
|
</div>
|
</ElCard>
|
</template>
|
|
<script setup>
|
import { guardRequestWithMessage } from '@/utils/sys/requestGuard'
|
import { useI18n } from 'vue-i18n'
|
import { fetchGetAiConfigSummary } from '@/api/ai-config'
|
import { getAiParamValidateStatusMeta } from '../aiParamPage.helpers'
|
|
const props = defineProps({
|
promptCode: { type: String, default: '' }
|
})
|
|
const loading = ref(false)
|
const summary = ref({})
|
const errorMessage = ref('')
|
const { t } = useI18n()
|
|
const validateMeta = computed(() =>
|
getAiParamValidateStatusMeta(summary.value?.activeParamValidateStatus)
|
)
|
|
const enabledMcpNames = computed(() =>
|
Array.isArray(summary.value?.enabledMcpNames) ? summary.value.enabledMcpNames : []
|
)
|
|
async function loadSummary() {
|
loading.value = true
|
errorMessage.value = ''
|
const data = await guardRequestWithMessage(
|
fetchGetAiConfigSummary(props.promptCode),
|
null,
|
{
|
timeoutMessage: t('pages.system.aiParam.messages.summaryTimeout')
|
}
|
)
|
loading.value = false
|
if (!data) {
|
errorMessage.value = t('pages.system.aiParam.messages.summaryUnavailable')
|
summary.value = {}
|
return
|
}
|
summary.value = data
|
}
|
|
onMounted(() => {
|
loadSummary()
|
})
|
</script>
|
|
<style scoped>
|
.ai-param-runtime-summary-card {
|
flex: none;
|
}
|
|
.ai-param-runtime-summary-card :deep(.el-card__body) {
|
height: auto;
|
}
|
</style>
|
