X-Financial/web/src/views/TravelReimbursementCreateView.vue

<template>
  <Teleport to="body">
    <Transition name="assistant-modal">
      <div class="assistant-overlay">
        <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">
                    <img
                      :src="message.role === 'assistant' ? aiAvatar : userAvatar"
                      :alt="message.role === 'assistant' ? 'AI 助手头像' : '用户头像'"
                    />
                  </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.reviewPayload && 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.reviewPayload && 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.reviewPayload && 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.reviewPayload && 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.body_message || '相关识别信息已在右侧展示，请核对。' }}</p>
                      <div v-if="message.reviewPayload.confirmation_actions?.length" class="review-inline-actions">
                        <button
                          v-for="item in message.reviewPayload.confirmation_actions"
                          :key="`${message.id}-${item.action_type}-${item.label}`"
                          type="button"
                          class="review-inline-btn"
                          :class="item.emphasis"
                          :disabled="reviewActionBusy"
                          @click="handleReviewAction(message, item)"
                        >
                          {{ item.label }}
                        </button>
                      </div>
                      <div v-if="message.reviewPayload.missing_slots?.length" class="review-inline-note">
                        当前仍需补充：{{ message.reviewPayload.missing_slots.join('、') }}
                      </div>
                    </div>

                    <div v-if="message.role === 'assistant' && !message.reviewPayload && 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 || reviewActionBusy"
                    @keydown.enter.exact.stop
                    @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 || reviewActionBusy" aria-label="上传附件" @click="triggerFileUpload">
                        <i class="mdi mdi-paperclip"></i>
                      </button>
                      <span class="composer-tip">Enter 换行，Ctrl + Enter 发送</span>
                    </div>

                    <button class="send-btn" type="submit" :disabled="!canSubmit || reviewActionBusy" 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>{{ activeReviewPayload ? '报销识别核对' : currentInsight.title }}</h3>
                    <p>{{ activeReviewPayload?.intent_summary || currentInsight.summary }}</p>
                  </div>

                  <div class="confidence-card" v-if="activeReviewPayload">
                    <span>当前状态</span>
                    <strong>{{ activeReviewPayload.can_proceed ? '可进入下一步' : '待补充' }}</strong>
                  </div>
                  <div class="confidence-card" v-else>
                    <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">
                      <template v-if="activeReviewPayload">
                        <section class="insight-card primary">
                          <div class="card-head">
                            <h4>识别结论</h4>
                          </div>
                          <div class="note-block review-conclusion">
                            <strong>{{ activeReviewPayload.intent_summary }}</strong>
                            <p>{{ activeReviewPayload.body_message }}</p>
                            <p v-if="activeReviewPayload.missing_slots?.length">
                              当前仍缺少：{{ activeReviewPayload.missing_slots.join('、') }}
                            </p>
                          </div>
                        </section>

                        <section v-if="recognizedSlotCards.length" class="insight-card">
                          <div class="card-head">
                            <h4>已识别字段</h4>
                          </div>
                          <div class="review-slot-grid">
                            <article
                              v-for="item in recognizedSlotCards"
                              :key="item.key"
                              class="review-slot-card"
                              :class="item.status"
                            >
                              <header>
                                <span>{{ item.label }}</span>
                                <small>{{ item.source_label || item.source }}</small>
                              </header>
                              <strong>{{ item.value || '待补充' }}</strong>
                              <div class="review-slot-meta-list">
                                <div v-if="item.raw_value && item.raw_value !== item.value" class="review-slot-meta-item">
                                  <span>原始表达</span>
                                  <strong>{{ item.raw_value }}</strong>
                                </div>
                                <div v-if="item.normalized_value" class="review-slot-meta-item">
                                  <span>标准值</span>
                                  <strong>{{ item.normalized_value }}</strong>
                                </div>
                                <div class="review-slot-meta-item">
                                  <span>置信度</span>
                                  <strong>{{ Math.round((item.confidence || 0) * 100) }}%</strong>
                                </div>
                              </div>
                              <p v-if="item.evidence">{{ item.evidence }}</p>
                              <p v-else-if="item.hint">{{ item.hint }}</p>
                            </article>
                          </div>
                        </section>

                        <section v-if="missingSlotCards.length" class="insight-card">
                          <div class="card-head">
                            <h4>待补字段</h4>
                          </div>
                          <div class="review-slot-grid">
                            <article
                              v-for="item in missingSlotCards"
                              :key="item.key"
                              class="review-slot-card missing"
                            >
                              <header>
                                <span>{{ item.label }}</span>
                                <small>待用户补充</small>
                              </header>
                              <strong>待补充</strong>
                              <p>{{ item.hint || '请补充该字段后再继续。' }}</p>
                            </article>
                          </div>
                        </section>
                      </template>

                      <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?.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(activeReviewFilePreviews, item.filename)?.kind || 'file'">
                              <img
                                v-if="resolveDocumentPreview(activeReviewFilePreviews, item.filename)?.kind === 'image'"
                                :src="resolveDocumentPreview(activeReviewFilePreviews, item.filename)?.url"
                                :alt="item.filename"
                              />
                              <div v-else class="document-preview-placeholder">
                                <i class="mdi mdi-file-document-outline"></i>
                                <span>{{ resolveDocumentPreview(activeReviewFilePreviews, 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.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>

                      <template v-if="!activeReviewPayload">
                        <section class="insight-card primary">
                          <div class="card-head">
                            <h4>识别结果</h4>
                          </div>
                          <div class="note-block">
                            <strong>{{ currentInsight.title }}</strong>
                            <p>{{ currentInsight.summary }}</p>
                          </div>
                        </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>
                      </template>
                    </template>
                  </div>
                </Transition>
              </aside>
            </Transition>
          </div>
        </section>
      </div>
    </Transition>

    <Transition name="assistant-modal">
      <div v-if="reviewCancelDialogOpen" class="assistant-overlay review-overlay">
        <section class="review-confirm-modal">
          <header>
            <span class="assistant-badge warning">取消核对</span>
            <h3>确认放弃本次识别结果？</h3>
            <p>关闭后将退出当前核对窗口，本次尚未确认的修改不会继续保留。</p>
          </header>
          <div class="review-confirm-actions">
            <button type="button" class="secondary-dialog-btn" :disabled="reviewActionBusy" @click="closeCancelReviewDialog">返回继续核对</button>
            <button type="button" class="danger-dialog-btn" :disabled="reviewActionBusy" @click="confirmCancelReview">确认取消</button>
          </div>
        </section>
      </div>
    </Transition>

    <Transition name="assistant-modal">
      <div v-if="reviewEditDialogOpen" class="assistant-overlay review-overlay">
        <section class="review-edit-modal">
          <header class="review-edit-head">
            <div>
              <span class="assistant-badge">修改识别信息</span>
              <h3>请按当前识别结果逐项修改</h3>
              <p>修改后会重新发送到智能体，右侧识别结果会按新内容刷新。</p>
            </div>
            <button class="close-btn" type="button" aria-label="关闭修改面板" :disabled="reviewActionBusy" @click="closeEditReviewDialog">
              <i class="mdi mdi-close"></i>
            </button>
          </header>

          <div class="review-edit-form">
            <label
              v-for="item in reviewEditFields"
              :key="item.key"
              class="review-edit-field"
              :class="item.group"
            >
              <span>{{ item.label }}<em v-if="item.required">*</em></span>
              <textarea
                v-if="item.field_type === 'textarea'"
                v-model="item.value"
                rows="3"
                :placeholder="item.placeholder"
                :disabled="reviewActionBusy"
              ></textarea>
              <input
                v-else
                v-model="item.value"
                type="text"
                :placeholder="item.placeholder"
                :disabled="reviewActionBusy"
              />
            </label>
          </div>

          <div class="review-edit-actions">
            <button type="button" class="secondary-dialog-btn" :disabled="reviewActionBusy" @click="closeEditReviewDialog">取消</button>
            <button type="button" class="primary-dialog-btn" :disabled="reviewActionBusy" @click="applyEditedReview">
              {{ reviewActionBusy ? '提交中...' : '确认修改' }}
            </button>
          </div>
        </section>
      </div>
    </Transition>
  </Teleport>
</template>

<script src="./scripts/TravelReimbursementCreateView.js"></script>

<style scoped src="../assets/styles/views/travel-reimbursement-create-view.css"></style>