shalu-agent-workflow/apps/web/src/views/agent/components/DetailModal.vue

<template>
	<el-dialog
		:model-value="modelValue"
		:title="t('pages.agent.agentDetail')"
		width="760px"
		destroy-on-close
		@update:model-value="emit('update:modelValue', $event)"
	>
		<div v-if="detailItem" class="detail-modal">
			<div class="hero">
				<div class="hero__avatar">{{ detailItem.avatar?.trim() || '🤖' }}</div>
				<div class="hero__content">
					<div class="hero__title">
						{{ detailItem.name || t('pages.agent.unnamedAgent') }}
					</div>
					<div class="hero__meta">
						<el-tag effect="plain">{{ formatModeLabel(detailItem.mode) }}</el-tag>
						<el-tag type="info" effect="plain">{{ formatTypeLabel(detailItem.type) }}</el-tag>
						<el-tag
							v-if="detailItem.is_builtin"
							type="success"
							effect="plain"
						>
							Built-in
						</el-tag>
					</div>
					<div class="hero__desc">
						{{ detailItem.description || t('pages.agent.noDescription') }}
					</div>
				</div>
			</div>

			<div class="section">
				<div class="section__title">基础信息</div>
				<div class="info-grid">
					<div v-for="item in basicItems" :key="item.label" class="info-card">
						<div class="info-card__label">{{ item.label }}</div>
						<div class="info-card__value">{{ item.value }}</div>
					</div>
				</div>
			</div>

			<div class="section">
				<div class="section__title">配置摘要</div>
				<div class="info-grid">
					<div v-for="item in configItems" :key="item.label" class="info-card">
						<div class="info-card__label">{{ item.label }}</div>
						<div class="info-card__value">{{ item.value }}</div>
					</div>
				</div>
			</div>

			<div v-if="promptItems.length" class="section">
				<div class="section__title">提示词</div>
				<div class="prompt-list">
					<div v-for="item in promptItems" :key="item.label" class="prompt-card">
						<div class="prompt-card__head">{{ item.label }}</div>
						<pre class="prompt-card__body">{{ item.value }}</pre>
					</div>
				</div>
			</div>
		</div>
	</el-dialog>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from '@/composables/useI18n'
import type { AgentItem } from '../type'

const props = defineProps<{
	modelValue: boolean
	detailItem: AgentItem | null
	modelNameMap: Record<string, string>
}>()

const emit = defineEmits<{
	'update:modelValue': [value: boolean]
}>()

const { t } = useI18n()

function formatModeLabel(mode?: string) {
	if (mode === 'quick-answer') return t('pages.agent.modeQuickAnswer')
	if (mode === 'smart-reasoning') return t('pages.agent.modeSmartReasoning')
	if (mode === 'agent') return 'Agent'
	return t('pages.agent.modeUnset')
}

function formatTypeLabel(type?: string) {
	if (type === 'knowledgeqa') return 'Knowledge'
	if (type === 'agent') return 'Agent'
	return type || '-'
}

function formatBoolean(value?: boolean) {
	return value ? '开启' : '关闭'
}

function formatModelName(id?: string) {
	if (!id) return '-'
	return props.modelNameMap[id] || id
}

const basicItems = computed(() => {
	const item = props.detailItem
	if (!item) return []

	return [
		{ label: '模型', value: formatModelName(item.config?.model_config?.model_id) },
		{ label: '重排模型', value: formatModelName(item.config?.model_config?.rerank_model_id) },
		{ label: 'VLM 模型', value: formatModelName(item.config?.img_vlm_config?.vlm_model_id) },
		{ label: 'ASR 模型', value: formatModelName(item.config?.img_vlm_config?.asr_model_id) },
		{ label: '创建时间', value: item.creationTime || '-' },
		{ label: '更新时间', value: item.updateTime || '-' }
	]
})

const configItems = computed(() => {
	const item = props.detailItem
	if (!item) return []

	return [
		{ label: '温度', value: `${item.config?.model_config?.temperature ?? '-'}` },
		{
			label: '最大 Token',
			value: `${item.config?.model_config?.max_completion_tokens ?? '-'}`
		},
		{ label: '思考模式', value: formatBoolean(item.config?.model_config?.thinking) },
		{
			label: '多轮对话',
			value: formatBoolean(item.config?.multiple_config?.multi_turn_enabled)
		},
		{
			label: '知识库数量',
			value: `${item.config?.kb_config?.knowledge_bases?.length ?? 0}`
		},
		{
			label: '工具数量',
			value: `${item.config?.setting_config?.allowed_tools?.length ?? 0}`
		}
	]
})

const promptItems = computed(() => {
	const item = props.detailItem
	if (!item) return []

	return [
		{
			label: '系统提示词',
			value: item.config?.basic_config?.system_prompt || ''
		},
		{
			label: '上下文模板',
			value: item.config?.basic_config?.context_template || ''
		},
		{
			label: '改写系统提示词',
			value: item.config?.advanced_config?.rewrite_prompt_system || ''
		},
		{
			label: '改写用户提示词',
			value: item.config?.advanced_config?.rewrite_prompt_user || ''
		},
		{
			label: '兜底提示词',
			value: item.config?.advanced_config?.fallback_prompt || ''
		}
	].filter((entry) => entry.value.trim())
})
</script>

<style scoped lang="less">
.detail-modal {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.hero {
	display: flex;
	gap: 16px;
	padding: 18px;
	border: 1px solid var(--border-light);
	border-radius: 18px;
	background: var(--bg-base);
}

.hero__avatar {
	width: 72px;
	height: 72px;
	flex-shrink: 0;
	border-radius: 20px;
	display: grid;
	place-items: center;
	font-size: 34px;
	background: var(--bg-overlay);
}

.hero__content {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.hero__title {
	font-size: 22px;
	font-weight: 700;
	color: var(--text-strong);
	word-break: break-word;
}

.hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.hero__desc {
	color: var(--text-secondary);
	line-height: 1.7;
	white-space: pre-wrap;
	word-break: break-word;
}

.section {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.section__title {
	font-size: 15px;
	font-weight: 700;
	color: var(--text-strong);
}

.info-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.info-card {
	padding: 14px 16px;
	border: 1px solid var(--border-light);
	border-radius: 14px;
	background: var(--bg-base);
}

.info-card__label {
	font-size: 12px;
	color: var(--text-tertiary);
}

.info-card__value {
	margin-top: 6px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--text-primary);
	word-break: break-word;
}

.prompt-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.prompt-card {
	border: 1px solid var(--border-light);
	border-radius: 14px;
	background: var(--bg-base);
	overflow: hidden;
}

.prompt-card__head {
	padding: 12px 14px;
	border-bottom: 1px solid var(--border-light);
	font-size: 13px;
	font-weight: 600;
	color: var(--text-secondary);
	background: var(--bg-overlay);
}

.prompt-card__body {
	margin: 0;
	padding: 14px;
	max-height: 280px;
	overflow: auto;
	white-space: pre-wrap;
	word-break: break-word;
	font-size: 13px;
	line-height: 1.7;
	color: var(--text-primary);
	font-family: Monaco, Consolas, 'Courier New', monospace;
}

@media (max-width: 768px) {
	.hero {
		flex-direction: column;
	}

	.info-grid {
		grid-template-columns: 1fr;
	}
}
</style>