From 053ebdbcb051e08929b28f488dc8f7cdb6c607c7 Mon Sep 17 00:00:00 2001
From: "WIN-JHFT4D3SIVT\\caoxiaozhu" <leocaoxiaozhu@163.com>
Date: Thu, 30 Apr 2026 17:10:30 +0800
Subject: [PATCH] feat: add travel reimbursement creation page

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 src/views/TravelReimbursementCreateView.vue | 803 ++++++++++++++++++++
 1 file changed, 803 insertions(+)
 create mode 100644 src/views/TravelReimbursementCreateView.vue

diff --git a/src/views/TravelReimbursementCreateView.vue b/src/views/TravelReimbursementCreateView.vue
new file mode 100644
index 0000000..23b2b6b
--- /dev/null
+++ b/src/views/TravelReimbursementCreateView.vue
@@ -0,0 +1,803 @@
+<template>
+  <section class="create-expense-view">
+    <article class="assistant-panel panel">
+      <header class="assistant-head">
+        <button class="back-btn" type="button" aria-label="返回差旅申请/报销" @click="emit('backToRequests')">
+          <i class="pi pi-arrow-left"></i>
+          <span>返回</span>
+        </button>
+      </header>
+
+      <div class="chat-scroll" aria-live="polite">
+        <div class="message-row user">
+          <div class="message-bubble user-bubble">
+            <p>我要报销昨天去上海出差的费用。</p>
+            <time>09:41 <i class="pi pi-check"></i></time>
+          </div>
+          <span class="avatar user-avatar"><i class="pi pi-user"></i></span>
+        </div>
+
+        <div class="message-row assistant">
+          <span class="avatar ai-avatar"><i class="pi pi-sparkles"></i></span>
+          <div class="message-bubble">
+            <p>好的，我已识别到这是一次差旅报销。我建议你先补充行程日期、交通票据和酒店发票。</p>
+            <div class="message-actions">
+              <button type="button" aria-label="赞同"><i class="pi pi-thumbs-up"></i></button>
+              <button type="button" aria-label="不赞同"><i class="pi pi-thumbs-down"></i></button>
+            </div>
+            <time>09:42</time>
+          </div>
+        </div>
+
+        <div class="message-row assistant">
+          <span class="avatar ai-avatar"><i class="pi pi-sparkles"></i></span>
+          <div class="message-bubble wide">
+            <p>已自动识别</p>
+            <div class="detected-grid">
+              <article v-for="item in detectedItems" :key="item.label">
+                <i :class="item.icon"></i>
+                <strong>{{ item.label }}</strong>
+                <span>{{ item.count }}</span>
+              </article>
+            </div>
+            <time>09:42</time>
+          </div>
+        </div>
+
+        <div class="message-row user">
+          <div class="message-bubble user-bubble compact">
+            <p>现在到哪一步了？</p>
+            <time>09:43 <i class="pi pi-check"></i></time>
+          </div>
+          <span class="avatar user-avatar"><i class="pi pi-user"></i></span>
+        </div>
+
+        <div class="message-row assistant">
+          <span class="avatar ai-avatar"><i class="pi pi-sparkles"></i></span>
+          <div class="message-bubble">
+            <p>当前已完成票据识别与费用归类，下一步请确认费用明细并提交审批。</p>
+            <ul class="check-list">
+              <li><i class="pi pi-check"></i>票据识别：已完成</li>
+              <li><i class="pi pi-check"></i>费用归类：已完成</li>
+              <li><i class="pi pi-circle"></i>明细确认：待你确认</li>
+              <li><i class="pi pi-circle"></i>提交审批：待提交</li>
+            </ul>
+            <div class="message-actions">
+              <button type="button" aria-label="赞同"><i class="pi pi-thumbs-up"></i></button>
+              <button type="button" aria-label="不赞同"><i class="pi pi-thumbs-down"></i></button>
+            </div>
+            <time>09:43</time>
+          </div>
+        </div>
+      </div>
+
+      <div class="quick-actions" aria-label="快捷操作">
+        <button v-for="action in quickActions" :key="action.label" type="button">
+          <i :class="action.icon"></i>
+          <span>{{ action.label }}</span>
+        </button>
+      </div>
+
+      <form class="assistant-composer" @submit.prevent>
+        <textarea rows="2" placeholder="请输入你的问题，或让 AI 帮你填写报销..."></textarea>
+        <div class="composer-foot">
+          <div class="tool-set">
+            <button type="button" aria-label="上传附件"><i class="pi pi-paperclip"></i></button>
+            <button type="button" aria-label="上传图片"><i class="pi pi-image"></i></button>
+            <button type="button" aria-label="语音输入"><i class="pi pi-microphone"></i></button>
+          </div>
+          <button class="send-btn" type="submit" aria-label="发送">
+            <i class="pi pi-send"></i>
+          </button>
+        </div>
+      </form>
+    </article>
+
+    <aside class="create-side">
+      <article class="progress-card panel">
+        <header>
+          <h3>当前报销状态</h3>
+          <strong>整体进度 <span>72%</span></strong>
+        </header>
+        <div class="progress-steps">
+          <div v-for="step in progressSteps" :key="step.label" class="step" :class="{ active: step.active, done: step.done }">
+            <span>{{ step.index }}</span>
+            <strong>{{ step.label }}</strong>
+            <small>{{ step.time }}</small>
+          </div>
+        </div>
+      </article>
+
+      <div class="side-grid">
+        <article class="side-card panel">
+          <header>
+            <h3>当前摘要</h3>
+            <button type="button">查看详情 <i class="pi pi-angle-right"></i></button>
+          </header>
+          <dl class="summary-list">
+            <template v-for="item in summaryItems" :key="item.label">
+              <dt><i :class="item.icon"></i>{{ item.label }}</dt>
+              <dd :class="{ money: item.money }">{{ item.value }}</dd>
+            </template>
+          </dl>
+        </article>
+
+        <article class="side-card panel">
+          <h3>待办提醒</h3>
+          <div class="todo-list">
+            <div v-for="item in todos" :key="item.text">
+              <i :class="item.icon"></i>
+              <span>{{ item.text }}</span>
+              <b :class="item.tone">{{ item.tag }}</b>
+            </div>
+          </div>
+        </article>
+
+        <article class="side-card panel">
+          <h3>AI 建议</h3>
+          <ul class="advice-list">
+            <li v-for="item in advice" :key="item.text">
+              <i :class="item.icon"></i>
+              <span>{{ item.text }}</span>
+            </li>
+          </ul>
+          <button class="more-link" type="button">查看更多建议 <i class="pi pi-angle-right"></i></button>
+        </article>
+
+        <article class="side-card panel">
+          <h3>注意事项</h3>
+          <ul class="notice-list">
+            <li v-for="item in notices" :key="item">{{ item }}</li>
+          </ul>
+          <button class="more-link" type="button">查看差旅管理制度 <i class="pi pi-angle-right"></i></button>
+        </article>
+      </div>
+
+      <article class="recent-card panel">
+        <header>
+          <h3>最近操作</h3>
+          <button type="button">查看全部 <i class="pi pi-angle-right"></i></button>
+        </header>
+        <ol>
+          <li v-for="item in recentOps" :key="item.time">
+            <time>{{ item.time }}</time>
+            <span>{{ item.text }}</span>
+          </li>
+        </ol>
+      </article>
+    </aside>
+  </section>
+</template>
+
+<script setup>
+const emit = defineEmits(['backToRequests'])
+
+const detectedItems = [
+  { label: '机票', count: '2 张', icon: 'pi pi-send' },
+  { label: '酒店发票', count: '1 张', icon: 'pi pi-building' },
+  { label: '出租车发票', count: '3 张', icon: 'pi pi-car' },
+  { label: '其他票据', count: '0 张', icon: 'pi pi-file' }
+]
+
+const quickActions = [
+  { label: '一键生成报销单', icon: 'pi pi-file-edit' },
+  { label: '检查缺失材料', icon: 'pi pi-verified' },
+  { label: '查看审批进度', icon: 'pi pi-list-check' },
+  { label: '差旅标准查询', icon: 'pi pi-search' }
+]
+
+const progressSteps = [
+  { index: '✓', label: '发起报销', time: '07-12 09:20', done: true },
+  { index: '✓', label: '票据识别', time: '07-12 09:25', done: true },
+  { index: '✓', label: '费用归类', time: '07-12 09:35', done: true },
+  { index: '4', label: '待确认提交', time: '当前步骤', active: true },
+  { index: '5', label: '审批中', time: '', active: false }
+]
+
+const summaryItems = [
+  { label: '报销类型', value: '差旅报销', icon: 'pi pi-tags' },
+  { label: '申请人', value: '张晓明', icon: 'pi pi-user' },
+  { label: '金额预估', value: '￥3,680', icon: 'pi pi-wallet', money: true },
+  { label: '出差时间', value: '07-11 ~ 07-12', icon: 'pi pi-calendar' },
+  { label: '单据数量', value: '6', icon: 'pi pi-copy' }
+]
+
+const todos = [
+  { text: '缺少酒店入住清单', tag: '缺失', tone: 'danger', icon: 'pi pi-times-circle' },
+  { text: '发票抬头已识别为个人，建议核对', tag: '警告', tone: 'warning', icon: 'pi pi-exclamation-triangle' },
+  { text: '有 1 笔出租车费用超过标准', tag: '注意', tone: 'notice', icon: 'pi pi-info-circle' },
+  { text: '请在今日 18:00 前提交以保证本周审批', tag: '提醒', tone: 'success', icon: 'pi pi-clock' }
+]
+
+const advice = [
+  { text: '建议补充酒店入住清单，提升审批通过率', icon: 'pi pi-lightbulb' },
+  { text: '出租车费用超标 ￥28，建议说明原因或调整', icon: 'pi pi-car' },
+  { text: '可合并同类票据，减少审批批次', icon: 'pi pi-check-circle' }
+]
+
+const notices = [
+  '差旅住宿标准：一线城市 ￥500 / 晚',
+  '餐补标准：￥80 / 天',
+  '市内交通标准：￥100 / 天'
+]
+
+const recentOps = [
+  { time: '09:48', text: '检测到缺失材料：酒店入住清单' },
+  { time: '09:45', text: '费用归类完成，总计 ￥3,680' },
+  { time: '09:42', text: '识别发票完成，共 6 张票据' }
+]
+</script>
+
+<style scoped>
+.create-expense-view {
+  min-height: 0;
+  height: 100%;
+  display: grid;
+  grid-template-columns: minmax(620px, 1.35fr) minmax(420px, .95fr);
+  gap: 16px;
+  animation: fadeUp 220ms var(--ease) both;
+}
+
+.assistant-panel,
+.create-side,
+.side-card,
+.progress-card,
+.recent-card {
+  min-width: 0;
+}
+
+.assistant-panel {
+  min-height: 0;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto auto;
+  overflow: hidden;
+}
+
+.assistant-head {
+  min-height: 64px;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 14px;
+  padding: 14px 22px;
+  border-bottom: 1px solid #e6edf5;
+}
+
+.back-btn {
+  min-height: 36px;
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 0 12px;
+  border: 1px solid #d7e0ea;
+  border-radius: 8px;
+  background: #f8fafc;
+  color: #334155;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.back-btn i {
+  color: #059669;
+}
+
+.progress-card h3,
+.side-card h3,
+.recent-card h3 {
+  color: #0f172a;
+  font-size: 18px;
+  font-weight: 900;
+}
+
+.side-card header button,
+.recent-card header button {
+  min-height: 36px;
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  border: 1px solid #d7e0ea;
+  border-radius: 8px;
+  background: #fff;
+  color: #334155;
+  font-size: 13px;
+  font-weight: 750;
+}
+
+.chat-scroll {
+  min-height: 0;
+  display: grid;
+  align-content: start;
+  gap: 16px;
+  padding: 18px 22px 20px;
+  overflow-y: auto;
+}
+
+.message-row {
+  display: grid;
+  align-items: start;
+  gap: 12px;
+}
+
+.message-row.user {
+  grid-template-columns: minmax(0, .42fr) 38px;
+  justify-content: end;
+}
+
+.message-row.assistant {
+  grid-template-columns: 38px minmax(0, .72fr);
+}
+
+.avatar {
+  width: 36px;
+  height: 36px;
+  display: grid;
+  place-items: center;
+  border-radius: 999px;
+  background: #dff7ee;
+  color: #059669;
+  font-size: 18px;
+}
+
+.message-bubble {
+  padding: 14px 16px;
+  border: 1px solid #dce5ef;
+  border-radius: 10px;
+  background: #fff;
+  color: #24324a;
+  font-size: 14px;
+  line-height: 1.65;
+}
+
+.message-bubble p {
+  margin: 0;
+}
+
+.user-bubble {
+  background: linear-gradient(135deg, rgba(16,185,129,.14), rgba(16,185,129,.06));
+  border-color: rgba(16,185,129,.22);
+}
+
+.message-bubble.compact {
+  justify-self: end;
+}
+
+.message-bubble.wide {
+  max-width: 620px;
+}
+
+.message-bubble time {
+  float: right;
+  margin-left: 12px;
+  color: #64748b;
+  font-size: 12px;
+}
+
+.message-bubble time i {
+  color: #3b82f6;
+}
+
+.message-actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 8px;
+}
+
+.message-actions button {
+  border: 0;
+  background: transparent;
+  color: #64748b;
+}
+
+.detected-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
+  margin-top: 12px;
+}
+
+.detected-grid article {
+  min-height: 58px;
+  display: grid;
+  grid-template-columns: 26px minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+  padding: 10px;
+  border-radius: 8px;
+  background: #f7fafc;
+}
+
+.detected-grid i {
+  grid-row: span 2;
+  color: #3b82f6;
+  font-size: 20px;
+}
+
+.detected-grid article:nth-child(2) i { color: #10b981; }
+.detected-grid article:nth-child(3) i { color: #f59e0b; }
+
+.detected-grid strong {
+  color: #334155;
+  font-size: 13px;
+  font-weight: 850;
+}
+
+.detected-grid span {
+  color: #64748b;
+  font-size: 12px;
+}
+
+.check-list {
+  display: grid;
+  gap: 5px;
+  margin: 10px 0 0;
+  padding: 0;
+  list-style: none;
+  color: #334155;
+}
+
+.check-list i {
+  margin-right: 8px;
+  color: #059669;
+}
+
+.quick-actions {
+  display: flex;
+  gap: 12px;
+  padding: 14px 22px 10px;
+  border-top: 1px solid #eef2f7;
+}
+
+.quick-actions button {
+  min-height: 34px;
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 0 13px;
+  border: 1px solid #d7e0ea;
+  border-radius: 999px;
+  background: #fff;
+  color: #334155;
+  font-size: 13px;
+  font-weight: 750;
+}
+
+.quick-actions i {
+  color: #059669;
+}
+
+.assistant-composer {
+  margin: 0 22px 18px;
+  border: 1px solid #d7e0ea;
+  border-radius: 10px;
+  background: #fff;
+  overflow: hidden;
+}
+
+.assistant-composer textarea {
+  width: 100%;
+  min-height: 56px;
+  resize: none;
+  border: 0;
+  padding: 14px 16px 4px;
+  color: #0f172a;
+  font-size: 14px;
+}
+
+.assistant-composer textarea:focus {
+  outline: none;
+}
+
+.composer-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 10px 10px 12px;
+}
+
+.tool-set {
+  display: flex;
+  gap: 8px;
+}
+
+.tool-set button,
+.send-btn {
+  width: 34px;
+  height: 34px;
+  display: grid;
+  place-items: center;
+  border: 0;
+  border-radius: 8px;
+}
+
+.tool-set button {
+  background: #f8fafc;
+  color: #42526b;
+}
+
+.send-btn {
+  background: #10b981;
+  color: #fff;
+}
+
+.create-side {
+  min-height: 0;
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr);
+  gap: 14px;
+  overflow-y: auto;
+}
+
+.progress-card,
+.side-card,
+.recent-card {
+  padding: 18px 20px;
+}
+
+.progress-card header,
+.side-card header,
+.recent-card header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.progress-card header strong {
+  color: #64748b;
+  font-size: 14px;
+}
+
+.progress-card header span {
+  color: #059669;
+  font-size: 25px;
+  font-weight: 900;
+}
+
+.progress-steps {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 8px;
+  margin-top: 20px;
+}
+
+.step {
+  position: relative;
+  display: grid;
+  justify-items: center;
+  gap: 7px;
+  text-align: center;
+}
+
+.step:not(:last-child)::after {
+  content: "";
+  position: absolute;
+  top: 16px;
+  left: calc(50% + 20px);
+  width: calc(100% - 28px);
+  height: 2px;
+  background: #d7e0ea;
+}
+
+.step.done:not(:last-child)::after,
+.step.active:not(:last-child)::after {
+  background: #10b981;
+}
+
+.step > span {
+  position: relative;
+  z-index: 1;
+  width: 34px;
+  height: 34px;
+  display: grid;
+  place-items: center;
+  border-radius: 999px;
+  background: #e5e7eb;
+  color: #64748b;
+  font-weight: 900;
+}
+
+.step.done > span,
+.step.active > span {
+  background: #10b981;
+  color: #fff;
+  box-shadow: 0 9px 18px rgba(16,185,129,.22);
+}
+
+.step strong {
+  color: #0f172a;
+  font-size: 13px;
+  font-weight: 850;
+}
+
+.step small {
+  color: #64748b;
+  font-size: 12px;
+}
+
+.step.active small {
+  color: #059669;
+  font-weight: 850;
+}
+
+.side-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.side-card header button,
+.recent-card header button {
+  border: 0;
+  background: transparent;
+  color: #64748b;
+}
+
+.summary-list {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  row-gap: 14px;
+  margin: 18px 0 0;
+}
+
+.summary-list dt,
+.summary-list dd {
+  margin: 0;
+}
+
+.summary-list dt {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: #64748b;
+  font-size: 13px;
+  font-weight: 750;
+}
+
+.summary-list dt i,
+.advice-list i,
+.notice-list li::before {
+  color: #059669;
+}
+
+.summary-list dd {
+  color: #0f172a;
+  font-size: 13px;
+  font-weight: 850;
+}
+
+.summary-list dd.money {
+  color: #059669;
+  font-size: 17px;
+}
+
+.todo-list,
+.advice-list,
+.notice-list {
+  display: grid;
+  gap: 12px;
+  margin-top: 18px;
+}
+
+.todo-list div {
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 9px;
+  color: #334155;
+  font-size: 13px;
+}
+
+.todo-list i {
+  color: #f59e0b;
+}
+
+.todo-list b {
+  padding: 3px 7px;
+  border-radius: 7px;
+  font-size: 12px;
+}
+
+.todo-list .danger { background: #fee2e2; color: #ef4444; }
+.todo-list .warning { background: #ffedd5; color: #f97316; }
+.todo-list .notice { background: #ffedd5; color: #f97316; }
+.todo-list .success { background: #dff7ee; color: #059669; }
+
+.advice-list,
+.notice-list {
+  padding: 0;
+  list-style: none;
+}
+
+.advice-list li {
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr);
+  gap: 8px;
+  color: #334155;
+  font-size: 13px;
+  line-height: 1.55;
+}
+
+.notice-list li {
+  position: relative;
+  padding-left: 16px;
+  color: #334155;
+  font-size: 13px;
+}
+
+.notice-list li::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: .58em;
+  width: 7px;
+  height: 7px;
+  border-radius: 999px;
+  background: #10b981;
+}
+
+.more-link {
+  margin-top: 16px;
+  border: 0;
+  background: transparent;
+  color: #059669;
+  font-size: 13px;
+  font-weight: 850;
+}
+
+.recent-card ol {
+  display: grid;
+  gap: 10px;
+  margin: 16px 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.recent-card li {
+  display: grid;
+  grid-template-columns: 48px minmax(0, 1fr);
+  gap: 10px;
+  color: #64748b;
+  font-size: 13px;
+}
+
+.recent-card time {
+  color: #64748b;
+  font-weight: 850;
+}
+
+.recent-card span {
+  color: #334155;
+}
+
+@media (max-width: 1280px) {
+  .create-expense-view {
+    grid-template-columns: 1fr;
+    overflow-y: auto;
+  }
+
+  .create-side {
+    overflow: visible;
+  }
+}
+
+@media (max-width: 760px) {
+  .detected-grid,
+  .side-grid,
+  .progress-steps {
+    grid-template-columns: 1fr;
+  }
+
+  .message-row.assistant,
+  .message-row.user {
+    grid-template-columns: 34px minmax(0, 1fr);
+  }
+
+  .message-row.user {
+    grid-template-columns: minmax(0, 1fr) 34px;
+  }
+
+  .quick-actions {
+    flex-wrap: wrap;
+  }
+}
+</style>