c263fc9752
Views: - AppShellRouteView.vue: update route view - SettingsView.vue: update settings view - TravelReimbursementCreateView.vue: update travel form view - scripts/SettingsView.js: update settings view logic - scripts/TravelReimbursementCreateView.js: update travel form logic Services: - services/orchestrator.js: update orchestrator service client
472 lines
23 KiB
Vue
472 lines
23 KiB
Vue
<template>
|
||
<Teleport to="body">
|
||
<Transition name="assistant-modal">
|
||
<div class="assistant-overlay" @click.self="emit('close')">
|
||
<section class="assistant-modal">
|
||
<header class="assistant-header">
|
||
<div class="assistant-header-main">
|
||
<span class="assistant-badge">AI Workspace</span>
|
||
<div>
|
||
<h2>统一对话工作台</h2>
|
||
<p>个人工作台、发起报销、智能录入统一走这里，右侧会根据你的意图实时切换状态视图。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="assistant-header-actions">
|
||
<span class="source-pill">{{ sourceLabel }}</span>
|
||
<button class="close-btn" type="button" aria-label="关闭对话工作台" @click="emit('close')">
|
||
<i class="mdi mdi-close"></i>
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="assistant-layout" :class="{ 'has-insight': showInsightPanel }">
|
||
<section class="dialog-panel">
|
||
<div class="dialog-toolbar">
|
||
<button
|
||
v-for="shortcut in shortcuts"
|
||
:key="shortcut.label"
|
||
type="button"
|
||
class="shortcut-chip"
|
||
@click="runShortcut(shortcut.prompt)"
|
||
>
|
||
<i :class="shortcut.icon"></i>
|
||
<span>{{ shortcut.label }}</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div ref="messageListRef" class="message-list" aria-live="polite">
|
||
<article
|
||
v-for="message in messages"
|
||
:key="message.id"
|
||
class="message-row"
|
||
:class="message.role"
|
||
>
|
||
<span class="message-avatar">
|
||
<i :class="message.role === 'assistant' ? 'mdi mdi-robot-excited-outline' : 'mdi mdi-account-circle-outline'"></i>
|
||
</span>
|
||
|
||
<div class="message-bubble">
|
||
<header class="message-meta">
|
||
<strong>{{ message.role === 'assistant' ? 'AI 助手' : '我' }}</strong>
|
||
<time>{{ message.time }}</time>
|
||
</header>
|
||
<p>{{ message.text }}</p>
|
||
|
||
<div v-if="message.role === 'assistant' && message.meta?.length" class="message-meta-row">
|
||
<span v-for="item in message.meta" :key="item" class="message-meta-chip">{{ item }}</span>
|
||
</div>
|
||
|
||
<div v-if="message.role === 'assistant' && message.riskFlags?.length" class="message-detail-block">
|
||
<strong>风险标签</strong>
|
||
<div class="message-detail-chip-row">
|
||
<span v-for="item in message.riskFlags" :key="item" class="message-risk-chip">{{ item }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="message.role === 'assistant' && message.citations?.length" class="message-detail-block">
|
||
<strong>引用依据</strong>
|
||
<div class="message-citation-list">
|
||
<article v-for="item in message.citations" :key="`${message.id}-${item.code}`" class="message-citation-card">
|
||
<header>
|
||
<span>{{ item.title }}</span>
|
||
<small>{{ item.version || item.source_type }}</small>
|
||
</header>
|
||
<p>{{ item.excerpt || item.code }}</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="message.role === 'assistant' && message.suggestedActions?.length" class="message-detail-block">
|
||
<strong>建议动作</strong>
|
||
<div class="message-detail-chip-row">
|
||
<span
|
||
v-for="item in message.suggestedActions"
|
||
:key="`${message.id}-${item.action_type}-${item.label}`"
|
||
class="message-action-chip"
|
||
>
|
||
{{ item.label }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="message.role === 'assistant' && message.reviewPayload" class="message-detail-block">
|
||
<strong>系统识别</strong>
|
||
<p class="review-summary">{{ message.reviewPayload.intent_summary }}</p>
|
||
<div v-if="message.reviewPayload.slot_cards?.length" class="review-mini-grid">
|
||
<article
|
||
v-for="item in message.reviewPayload.slot_cards.slice(0, 4)"
|
||
:key="`${message.id}-${item.key}`"
|
||
class="review-slot-card compact"
|
||
:class="item.status"
|
||
>
|
||
<span>{{ item.label }}</span>
|
||
<strong>{{ item.value || '待补充' }}</strong>
|
||
</article>
|
||
</div>
|
||
<div v-if="message.reviewPayload.confirmation_actions?.length" class="action-list compact">
|
||
<article
|
||
v-for="item in message.reviewPayload.confirmation_actions"
|
||
:key="`${message.id}-${item.action_type}-${item.label}`"
|
||
class="action-card"
|
||
:class="item.emphasis"
|
||
>
|
||
<div>
|
||
<strong>{{ item.label }}</strong>
|
||
<p>{{ item.description }}</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="message.role === 'assistant' && message.draftPayload" class="draft-preview">
|
||
<header>
|
||
<strong>{{ message.draftPayload.title }}</strong>
|
||
<span>待人工确认</span>
|
||
</header>
|
||
<pre>{{ message.draftPayload.body }}</pre>
|
||
</div>
|
||
|
||
<div v-if="message.attachments?.length" class="message-files">
|
||
<span v-for="file in message.attachments" :key="file" class="file-chip">
|
||
<i class="mdi mdi-paperclip"></i>
|
||
{{ file }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
|
||
<form class="composer" @submit.prevent="submitComposer">
|
||
<input
|
||
ref="fileInputRef"
|
||
class="hidden-file-input"
|
||
type="file"
|
||
multiple
|
||
accept=".pdf,.jpg,.jpeg,.png,.webp,.doc,.docx,.xls,.xlsx"
|
||
@change="handleFilesChange"
|
||
/>
|
||
|
||
<div class="composer-shell">
|
||
<textarea
|
||
v-model="composerDraft"
|
||
rows="3"
|
||
:placeholder="composerPlaceholder"
|
||
:disabled="submitting"
|
||
@keydown.ctrl.enter.prevent="submitComposer"
|
||
/>
|
||
|
||
<div v-if="attachedFiles.length" class="composer-files">
|
||
<span v-for="file in attachedFiles" :key="file.name" class="file-chip active">
|
||
<i class="mdi mdi-paperclip"></i>
|
||
{{ file.name }}
|
||
</span>
|
||
</div>
|
||
|
||
<div class="composer-foot">
|
||
<div class="composer-tools">
|
||
<button type="button" class="tool-btn" :disabled="submitting" aria-label="上传附件" @click="triggerFileUpload">
|
||
<i class="mdi mdi-paperclip"></i>
|
||
</button>
|
||
<span class="composer-tip">Ctrl + Enter 发送</span>
|
||
</div>
|
||
|
||
<button class="send-btn" type="submit" :disabled="!canSubmit" aria-label="发送">
|
||
<i :class="submitting ? 'mdi mdi-loading mdi-spin' : 'mdi mdi-send'"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</section>
|
||
|
||
<Transition name="insight-panel">
|
||
<aside v-if="showInsightPanel" class="insight-panel">
|
||
<div class="insight-head">
|
||
<div>
|
||
<span class="intent-pill" :class="currentInsight.intent">{{ currentIntentLabel }}</span>
|
||
<h3>{{ currentInsight.title }}</h3>
|
||
<p>{{ currentInsight.summary }}</p>
|
||
</div>
|
||
|
||
<div class="confidence-card">
|
||
<span>{{ currentInsight.metricLabel }}</span>
|
||
<strong>{{ currentInsight.metricValue }}</strong>
|
||
</div>
|
||
</div>
|
||
|
||
<Transition name="insight-switch" mode="out-in">
|
||
<div :key="currentInsight.intent + currentInsight.title" class="insight-body">
|
||
<template v-if="currentInsight.intent === 'agent' && currentInsight.agent">
|
||
<section class="insight-card primary">
|
||
<div class="card-head">
|
||
<h4>调度结果</h4>
|
||
<span class="status-pill" :class="currentInsight.agent.statusTone">{{ currentInsight.agent.statusLabel }}</span>
|
||
</div>
|
||
<div class="metric-grid">
|
||
<div class="metric-item">
|
||
<span>运行 ID</span>
|
||
<strong>{{ currentInsight.agent.runId }}</strong>
|
||
</div>
|
||
<div class="metric-item">
|
||
<span>执行 Agent</span>
|
||
<strong>{{ currentInsight.agent.selectedAgent }}</strong>
|
||
</div>
|
||
<div class="metric-item">
|
||
<span>场景 / 意图</span>
|
||
<strong>{{ currentInsight.agent.scenario }} / {{ currentInsight.agent.intent }}</strong>
|
||
</div>
|
||
<div class="metric-item">
|
||
<span>权限</span>
|
||
<strong>{{ currentInsight.agent.permissionLevel }}</strong>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section v-if="currentInsight.agent.reviewPayload" class="insight-card">
|
||
<div class="card-head">
|
||
<h4>识别结果</h4>
|
||
</div>
|
||
<div class="note-block">
|
||
<span>{{ currentInsight.agent.reviewPayload.intent }}</span>
|
||
<strong>{{ currentInsight.agent.reviewPayload.intent_summary }}</strong>
|
||
<p v-if="currentInsight.agent.reviewPayload.missing_slots?.length">
|
||
当前仍缺少：{{ currentInsight.agent.reviewPayload.missing_slots.join('、') }}
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="insight-card">
|
||
<div class="card-head">
|
||
<h4>运行明细</h4>
|
||
</div>
|
||
<div class="metric-grid">
|
||
<div class="metric-item">
|
||
<span>路由原因</span>
|
||
<strong>{{ currentInsight.agent.routeReason }}</strong>
|
||
</div>
|
||
<div class="metric-item">
|
||
<span>工具调用</span>
|
||
<strong>{{ currentInsight.agent.toolCount }} / 失败 {{ currentInsight.agent.failedToolCount }}</strong>
|
||
</div>
|
||
<div class="metric-item">
|
||
<span>确认要求</span>
|
||
<strong>{{ currentInsight.agent.requiresConfirmation ? '需要人工确认' : '无需确认' }}</strong>
|
||
</div>
|
||
<div class="metric-item">
|
||
<span>降级状态</span>
|
||
<strong>{{ currentInsight.agent.degraded ? '已降级' : '正常' }}</strong>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section v-if="currentInsight.agent.reviewPayload?.risk_briefs?.length" class="insight-card">
|
||
<div class="card-head">
|
||
<h4>历史风险与注意事项</h4>
|
||
</div>
|
||
<div class="review-brief-list">
|
||
<article
|
||
v-for="item in currentInsight.agent.reviewPayload.risk_briefs"
|
||
:key="`${item.title}-${item.level}`"
|
||
class="review-brief-card"
|
||
:class="item.level"
|
||
>
|
||
<strong>{{ item.title }}</strong>
|
||
<p>{{ item.content }}</p>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section v-if="currentInsight.agent.reviewPayload?.slot_cards?.length" class="insight-card">
|
||
<div class="card-head">
|
||
<h4>待确认字段</h4>
|
||
</div>
|
||
<div class="review-slot-grid">
|
||
<article
|
||
v-for="item in currentInsight.agent.reviewPayload.slot_cards"
|
||
:key="item.key"
|
||
class="review-slot-card"
|
||
:class="item.status"
|
||
>
|
||
<header>
|
||
<span>{{ item.label }}</span>
|
||
<small>{{ item.source }}</small>
|
||
</header>
|
||
<strong>{{ item.value || '待补充' }}</strong>
|
||
<p v-if="item.hint">{{ item.hint }}</p>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section v-if="currentInsight.agent.reviewPayload?.claim_groups?.length" class="insight-card">
|
||
<div class="card-head">
|
||
<h4>分单建议</h4>
|
||
</div>
|
||
<div class="review-claim-list">
|
||
<article
|
||
v-for="item in currentInsight.agent.reviewPayload.claim_groups"
|
||
:key="item.group_code"
|
||
class="review-claim-card"
|
||
>
|
||
<header>
|
||
<strong>{{ item.title }}</strong>
|
||
<span>{{ item.scene_label }}</span>
|
||
</header>
|
||
<p>{{ item.rationale }}</p>
|
||
<div class="message-detail-chip-row">
|
||
<span class="message-action-chip">票据 {{ item.document_indexes.join('、') || '待补' }}</span>
|
||
<span class="message-action-chip">金额 {{ item.amount_total.toFixed(2) }} 元</span>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section v-if="currentInsight.agent.reviewPayload?.document_cards?.length" class="insight-card">
|
||
<div class="card-head">
|
||
<h4>票据识别结果</h4>
|
||
</div>
|
||
<div class="review-document-list">
|
||
<article
|
||
v-for="item in currentInsight.agent.reviewPayload.document_cards"
|
||
:key="`${item.index}-${item.filename}`"
|
||
class="review-document-card"
|
||
>
|
||
<header>
|
||
<div>
|
||
<strong>票据 {{ item.index }}</strong>
|
||
<span>{{ item.filename }}</span>
|
||
</div>
|
||
<span class="message-action-chip">{{ item.scene_label }}</span>
|
||
</header>
|
||
|
||
<div class="document-preview" :class="resolveDocumentPreview(currentInsight.agent.filePreviews, item.filename)?.kind || 'file'">
|
||
<img
|
||
v-if="resolveDocumentPreview(currentInsight.agent.filePreviews, item.filename)?.kind === 'image'"
|
||
:src="resolveDocumentPreview(currentInsight.agent.filePreviews, item.filename)?.url"
|
||
:alt="item.filename"
|
||
/>
|
||
<div v-else class="document-preview-placeholder">
|
||
<i class="mdi mdi-file-document-outline"></i>
|
||
<span>{{ resolveDocumentPreview(currentInsight.agent.filePreviews, item.filename)?.kind === 'pdf' ? 'PDF' : '附件' }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<p>{{ item.summary || '暂无摘要。' }}</p>
|
||
|
||
<div v-if="item.fields?.length" class="review-doc-field-grid">
|
||
<article v-for="field in item.fields" :key="`${item.filename}-${field.label}`" class="review-doc-field-card">
|
||
<span>{{ field.label }}</span>
|
||
<strong>{{ field.value }}</strong>
|
||
</article>
|
||
</div>
|
||
|
||
<div v-if="item.warnings?.length" class="message-detail-chip-row">
|
||
<span v-for="warning in item.warnings" :key="warning" class="message-risk-chip">{{ warning }}</span>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section v-if="currentInsight.agent.reviewPayload?.confirmation_actions?.length" class="insight-card">
|
||
<div class="card-head">
|
||
<h4>确认动作</h4>
|
||
</div>
|
||
<div class="action-list">
|
||
<article
|
||
v-for="item in currentInsight.agent.reviewPayload.confirmation_actions"
|
||
:key="`${item.action_type}-${item.label}`"
|
||
class="action-card"
|
||
:class="item.emphasis"
|
||
>
|
||
<div>
|
||
<strong>{{ item.label }}</strong>
|
||
<p>{{ item.description || item.action_type }}</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section v-if="currentInsight.agent.selectedCapabilityCodes?.length" class="insight-card">
|
||
<div class="card-head">
|
||
<h4>命中能力</h4>
|
||
</div>
|
||
<div class="capability-chip-row">
|
||
<span v-for="item in currentInsight.agent.selectedCapabilityCodes" :key="item" class="capability-chip">
|
||
{{ item }}
|
||
</span>
|
||
</div>
|
||
</section>
|
||
|
||
<section v-if="currentInsight.agent.fileNames?.length" class="insight-card">
|
||
<div class="card-head">
|
||
<h4>附件上下文</h4>
|
||
</div>
|
||
<ul class="bullet-list">
|
||
<li>本次对话已带入 {{ currentInsight.agent.fileNames.length }} 份附件名称。</li>
|
||
<li v-for="item in currentInsight.agent.fileNames" :key="item">{{ item }}</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section v-if="currentInsight.agent.riskFlags?.length" class="insight-card">
|
||
<div class="card-head">
|
||
<h4>风险标签</h4>
|
||
</div>
|
||
<div class="capability-chip-row">
|
||
<span v-for="item in currentInsight.agent.riskFlags" :key="item" class="risk-chip">{{ item }}</span>
|
||
</div>
|
||
</section>
|
||
|
||
<section v-if="currentInsight.agent.citations?.length" class="insight-card">
|
||
<div class="card-head">
|
||
<h4>引用依据</h4>
|
||
</div>
|
||
<div class="citation-stack">
|
||
<article v-for="item in currentInsight.agent.citations" :key="item.code" class="citation-card">
|
||
<header>
|
||
<strong>{{ item.title }}</strong>
|
||
<span>{{ item.version || item.source_type }}</span>
|
||
</header>
|
||
<p>{{ item.excerpt || item.code }}</p>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section v-if="currentInsight.agent.suggestedActions?.length" class="insight-card">
|
||
<div class="card-head">
|
||
<h4>建议动作</h4>
|
||
</div>
|
||
<div class="action-list">
|
||
<article v-for="item in currentInsight.agent.suggestedActions" :key="item.label" class="action-card">
|
||
<div>
|
||
<strong>{{ item.label }}</strong>
|
||
<p>{{ item.description || item.action_type }}</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section v-if="currentInsight.agent.draftPayload" class="insight-card">
|
||
<div class="card-head">
|
||
<h4>草稿内容</h4>
|
||
</div>
|
||
<div class="note-block">
|
||
<span>{{ currentInsight.agent.draftPayload.draft_type }}</span>
|
||
<strong>{{ currentInsight.agent.draftPayload.title }}</strong>
|
||
<p>{{ currentInsight.agent.draftPayload.body }}</p>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
</div>
|
||
</Transition>
|
||
</aside>
|
||
</Transition>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</Transition>
|
||
</Teleport>
|
||
</template>
|
||
|
||
<script src="./scripts/TravelReimbursementCreateView.js"></script>
|
||
|
||
<style scoped src="../assets/styles/views/travel-reimbursement-create-view.css"></style>
|