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

<template>
  <section class="qa-view">
    <div class="qa-layout">
      <aside class="left-column">
        <article class="panel side-panel conversation-list">
          <header>
            <h3>问答会话</h3>
            <button class="outline-action" type="button" @click="emit('draft', '')">
              <i class="mdi mdi-plus"></i>
              <span>新建会话</span>
            </button>
          </header>

          <div class="session-scroll">
            <button
              v-for="item in sessions"
              :key="item.title"
              class="session-row"
              :class="{ active: item.active }"
              type="button"
              @click="applyPrompt(item.title)"
            >
              <span><i class="mdi mdi-message-processing-outline"></i></span>
              <strong>{{ item.title }}</strong>
              <time>{{ item.time }}</time>
            </button>
          </div>
        </article>
      </aside>

      <article class="panel chat-panel">
        <div ref="localMessageList" class="message-stream" aria-live="polite">
          <div class="talk-row user">
            <span class="avatar user-avatar">张</span>
            <div class="talk-content">
              <header><strong>张明</strong><time>10:32</time></header>
              <p class="user-question">北京出差，酒店超标报销怎么处理？</p>
            </div>
          </div>

          <div class="talk-row assistant">
            <span class="avatar assistant-avatar"><i class="mdi mdi-robot-outline"></i></span>
            <div class="talk-content">
              <header><strong>财务AI助手</strong><time>10:32</time></header>
              <div class="answer-card">
                <section>
                  <h4>结论</h4>
                  <p>酒店费用超过标准的部分原则上不予报销，特殊情况可申请例外报销。</p>
                </section>
                <section>
                  <h4>处理建议</h4>
                  <ul>
                    <li>超标部分由个人自理或按制度退回，保留超标说明和相关凭证。</li>
                    <li>符合公司相关政策的，可提交佐证材料，申请例外报销。</li>
                  </ul>
                </section>
                <section>
                  <h4>适用规则</h4>
                  <ul>
                    <li>《差旅报销管理办法（2024版）》第十二条：住宿标准及超标处理</li>
                    <li>《费用报销审批流程》附件1：国内差旅住宿标准</li>
                  </ul>
                </section>
                <footer>
                  <span>是否有帮助？</span>
                  <button type="button" aria-label="有帮助"><i class="mdi mdi-thumb-up-outline"></i></button>
                  <button type="button" aria-label="无帮助"><i class="mdi mdi-thumb-down-outline"></i></button>
                </footer>
              </div>
            </div>
          </div>

          <div class="talk-row user">
            <span class="avatar user-avatar">张</span>
            <div class="talk-content">
              <header><strong>张明</strong><time>10:35</time></header>
              <p class="user-question">如果出差地公司名称不一致还能报销吗？</p>
            </div>
          </div>

          <div class="talk-row assistant">
            <span class="avatar assistant-avatar"><i class="mdi mdi-robot-outline"></i></span>
            <div class="talk-content">
              <header><strong>财务AI助手</strong><time>10:35</time></header>
              <div class="answer-card compact">
                <section>
                  <h4>结论</h4>
                  <p>一般情况下，差旅地与参会公司名称不一致需按异常处理，建议提供情况说明并加盖公章或补充邀请材料。</p>
                </section>
                <section>
                  <h4>适用规则</h4>
                  <ul>
                    <li>《发票管理规定及失误销细则》第二章：发票基本要求</li>
                    <li>《差旅报销管理办法》附件1：报销凭证要求</li>
                  </ul>
                </section>
              </div>
            </div>
          </div>

          <div v-for="message in messages" :key="message.id" class="talk-row" :class="message.role === 'user' ? 'user' : 'assistant'">
            <span class="avatar" :class="message.role === 'user' ? 'user-avatar' : 'assistant-avatar'">
              <template v-if="message.role === 'user'">我</template>
              <i v-else class="mdi mdi-robot-outline"></i>
            </span>
            <div class="talk-content">
              <header>
                <strong>{{ message.role === 'user' ? '我' : '财务AI助手' }}</strong>
                <time>刚刚</time>
              </header>
              <p :class="message.role === 'user' ? 'user-question' : 'agent-answer'">{{ message.text }}</p>
            </div>
          </div>
        </div>

        <div class="composer-wrap">
          <div class="prompt-toolbar">
            <span>猜你想问</span>
            <button v-for="prompt in visiblePrompts" :key="prompt.text" type="button" @click="applyPrompt(prompt.text)">
              <i :class="prompt.icon"></i>
              {{ prompt.short }}
            </button>
            <button class="icon-refresh" type="button" aria-label="换一批问题" @click="rotatePrompts">
              <i class="mdi mdi-refresh"></i>
            </button>
          </div>

          <div class="composer">
            <textarea
              :value="draft"
              rows="2"
              placeholder="请输入你的问题，例如：差旅报销特殊标准是什么？"
              @input="emit('draft', $event.target.value)"
              @keydown.ctrl.enter.prevent="emit('send')"
            ></textarea>
            <button class="send-button" type="button" aria-label="发送问题" @click="emit('send')">
              <i class="mdi mdi-send"></i>
            </button>
          </div>
        </div>
      </article>

      <aside class="right-column">
        <article class="panel info-panel hot-top-panel">
          <header>
            <h3><i class="mdi mdi-fire"></i> 热门问题 Top10</h3>
            <button type="button" @click="rotatePrompts">换一批 <i class="mdi mdi-refresh"></i></button>
          </header>
          <div class="top-question-list">
            <button v-for="(item, index) in hotQuestions" :key="item" type="button" @click="applyPrompt(item)">
              <strong>{{ String(index + 1).padStart(2, '0') }}</strong>
              <span>{{ item }}</span>
              <i class="mdi mdi-chevron-right"></i>
            </button>
          </div>
        </article>

        <article class="panel info-panel similar-panel">
          <header>
            <h3>相似历史问题</h3>
            <button type="button">查看全部 <i class="mdi mdi-chevron-right"></i></button>
          </header>
          <div class="similar-scroll">
            <button v-for="item in similarQuestions" :key="item.text" class="similar-row" type="button" @click="applyPrompt(item.text)">
              <span><i class="mdi mdi-file-question-outline"></i>{{ item.text }}</span>
              <strong>{{ item.score }}</strong>
              <i class="mdi mdi-chevron-right"></i>
            </button>
          </div>
        </article>
      </aside>
    </div>
  </section>
</template>

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

<style scoped src="../assets/styles/views/chat-view.css"></style>