feat(web): AI 工作台附件改为卡片化展示并支持单项移除

- PersonalWorkbenchAiMode 附件区由计数条改为按类型图标/名称/类型标签的卡片列表，支持单项移除（removeAiModeFile），复用 buildFileIdentity 作为 key - resolveAiComposerFileType 按 pdf/图片/表格/文档/压缩包/文件归类，分别对应图标与色调 - .gitignore 补充忽略 server/storage/receipt_folder/ 运行时票据存储目录
feat(web): 差旅领导意见事件结构化与申请审批信息增强
2026-06-21 23:24:16 +08:00 · 2026-06-21 23:24:09 +08:00 · 2026-06-21 23:23:59 +08:00
15 changed files with 540 additions and 199 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -21,6 +21,7 @@ server/.secrets/
 server/logs/
 server/storage/expense_claims/
 server/storage/finance_reports/
+server/storage/receipt_folder/
 test-results/
 .codex-remote-attachments/
 tmp-*.png
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -32,7 +32,7 @@ services:
      - >
        apt-get update &&
        DEBIAN_FRONTEND=noninteractive apt-get install -y --no-install-recommends
-        python3 python3-pip python3-venv fontconfig openssh-server &&
+        python3 python3-pip python3-venv fontconfig openssh-server poppler-data &&
        if ! fc-match 'Noto Sans CJK SC' | grep -qi 'Noto'; then if ! timeout "${CJK_FONT_INSTALL_TIMEOUT_SECONDS:-45}" sh -lc 'DEBIAN_FRONTEND=noninteractive apt-get install -y --no-install-recommends fonts-noto-cjk fonts-noto-cjk-extra'; then printf '%s\n' '[WARN] CJK font installation timed out or failed; continuing startup without blocking the app.'; fi; fi &&
        printf '%s\n'
        '<?xml version="1.0"?>'
--- a/server/rules/finance-rules/公司通信费报销规则.xlsx
+++ b/server/rules/finance-rules/公司通信费报销规则.xlsx
--- a/server/scripts/bootstrap_paddleocr_gpu.sh
+++ b/server/scripts/bootstrap_paddleocr_gpu.sh
@@ -14,7 +14,7 @@ if ! command -v "${PYTHON_BIN}" >/dev/null 2>&1; then
 fi

 apt-get update
-apt-get install -y --no-install-recommends libgl1 libglib2.0-0 poppler-utils
+apt-get install -y --no-install-recommends libgl1 libglib2.0-0 poppler-utils poppler-data

 rm -rf "${OCR_VENV_DIR}"
 "${PYTHON_BIN}" -m venv "${OCR_VENV_DIR}"
--- a/server/scripts/bootstrap_paddleocr_mobile.sh
+++ b/server/scripts/bootstrap_paddleocr_mobile.sh
@@ -13,7 +13,7 @@ if ! command -v "${PYTHON_BIN}" >/dev/null 2>&1; then
 fi

 apt-get update
-apt-get install -y --no-install-recommends libgl1 libglib2.0-0 poppler-utils
+apt-get install -y --no-install-recommends libgl1 libglib2.0-0 poppler-utils poppler-data

 "${PYTHON_BIN}" -m venv "${OCR_VENV_DIR}"
 "${OCR_VENV_DIR}/bin/pip" install --upgrade pip
--- a/server/src/app/services/ocr.py
+++ b/server/src/app/services/ocr.py
@@ -77,8 +77,6 @@ class OcrService:
        documents: list[OcrRecognizeDocumentRead] = []
        prepared_inputs: list[PreparedOcrInput] = []
        cleanup_paths: list[Path] = []
-        python_bin = self._resolve_python_bin()
-        worker_path = self._resolve_worker_path()
        worker_payload: dict = {}
        cache_keys_by_source: dict[str, str] = {}

@@ -144,6 +142,16 @@ class OcrService:
                            cleanup_paths=cleanup_paths,
                            text_layer=text_layer,
                        )
+                        if self._has_usable_pdf_text_layer(text_layer):
+                            document = self._build_text_layer_document(
+                                filename=normalized_name,
+                                media_type=resolved_media_type,
+                                text_layer=text_layer,
+                                pdf_inputs=pdf_inputs,
+                            )
+                            documents.append(document)
+                            self._write_cached_document(cache_key, document)
+                            continue
                        prepared_inputs.extend(pdf_inputs)
                        for item in pdf_inputs:
                            cache_keys_by_source.setdefault(item.source_key, cache_key)
@@ -175,6 +183,8 @@ class OcrService:
                cache_keys_by_source[source_key] = cache_key

            if prepared_inputs:
+                python_bin = self._resolve_python_bin()
+                worker_path = self._resolve_worker_path()
                worker_payload = self._invoke_worker(
                    python_bin=python_bin,
                    worker_path=worker_path,
@@ -308,6 +318,23 @@ class OcrService:
            while len(cls._result_cache) > OCR_RESULT_CACHE_LIMIT:
                cls._result_cache.popitem(last=False)

+    @classmethod
+    def _write_cached_document(cls, cache_key: str, document: OcrRecognizeDocumentRead) -> None:
+        if not cache_key:
+            return
+        with cls._cache_lock:
+            cls._result_cache[cache_key] = document.model_copy(
+                update={
+                    "receipt_id": "",
+                    "receipt_status": "",
+                    "receipt_preview_url": "",
+                    "receipt_source_url": "",
+                }
+            )
+            cls._result_cache.move_to_end(cache_key)
+            while len(cls._result_cache) > OCR_RESULT_CACHE_LIMIT:
+                cls._result_cache.popitem(last=False)
+
    @classmethod
    def _resolve_worker_semaphore(cls, limit: int) -> threading.Semaphore:
        normalized_limit = max(1, int(limit or 1))
@@ -568,6 +595,30 @@ class OcrService:

        return documents

+    def _build_text_layer_document(
+        self,
+        *,
+        filename: str,
+        media_type: str,
+        text_layer: str,
+        pdf_inputs: list[PreparedOcrInput],
+    ) -> OcrRecognizeDocumentRead:
+        first_input = pdf_inputs[0] if pdf_inputs else None
+        aggregated = AggregatedOcrDocument(
+            filename=filename,
+            media_type=media_type,
+            source_key=first_input.source_key if first_input is not None else uuid4().hex,
+            page_count=max(1, len(pdf_inputs)),
+            preview_kind=str(first_input.preview_kind if first_input is not None else ""),
+            preview_data_url=str(first_input.preview_data_url if first_input is not None else ""),
+        )
+        aggregated.text_layer_fragments.append(text_layer)
+        return self._finalize_document(aggregated)
+
+    @classmethod
+    def _has_usable_pdf_text_layer(cls, text_layer: str) -> bool:
+        return cls._meaningful_char_count(text_layer) >= 8
+
    @staticmethod
    def _collect_descriptor_text_layer(descriptors: list[PreparedOcrInput]) -> str:
        for descriptor in descriptors:
--- a/server/tests/test_ocr_service.py
+++ b/server/tests/test_ocr_service.py
@@ -8,6 +8,18 @@ from app.core.config import get_settings
 from app.services.ocr import OcrService


+def test_ocr_runtime_installers_include_poppler_cjk_data() -> None:
+    repo_root = Path(__file__).resolve().parents[2]
+    dependency_sources = [
+        repo_root / "docker-compose.yml",
+        repo_root / "server" / "scripts" / "bootstrap_paddleocr_mobile.sh",
+        repo_root / "server" / "scripts" / "bootstrap_paddleocr_gpu.sh",
+    ]
+
+    for path in dependency_sources:
+        assert "poppler-data" in path.read_text(encoding="utf-8")
+
+
 def test_ocr_service_uses_worker_runtime_and_keeps_unsupported_files_as_warnings(
    monkeypatch,
    tmp_path: Path,
@@ -220,6 +232,59 @@ def test_ocr_service_converts_pdf_to_images_and_returns_image_preview(
    assert recognized.lines[1].page_index == 1


+def test_ocr_service_uses_pdf_text_layer_without_worker_runtime(
+    monkeypatch,
+    tmp_path: Path,
+) -> None:
+    def fake_convert_pdf_to_images(self, *, pdf_path: Path, output_dir: Path) -> list[Path]:
+        page = output_dir / "page-1.png"
+        page.write_bytes(b"fake-rendered-page")
+        return [page]
+
+    def fail_resolve_python(self) -> str:
+        raise AssertionError("PDF 文本层可用时不应强制解析 OCR worker。")
+
+    def fail_invoke_worker(self, **kwargs) -> dict:
+        raise AssertionError("PDF 文本层可用时不应调用 OCR worker。")
+
+    monkeypatch.setenv("STORAGE_ROOT_DIR", str(tmp_path / "storage"))
+    monkeypatch.setattr(OcrService, "_resolve_python_bin", fail_resolve_python)
+    monkeypatch.setattr(OcrService, "_resolve_worker_path", lambda self: "worker.py")
+    monkeypatch.setattr(OcrService, "_convert_pdf_to_images", fake_convert_pdf_to_images)
+    monkeypatch.setattr(OcrService, "_invoke_worker", fail_invoke_worker)
+    monkeypatch.setattr(
+        OcrService,
+        "_extract_pdf_text_layer",
+        lambda self, pdf_path: (
+            "电子发票（铁路电子客票）\n"
+            "发票号码:26429165800002785705\n"
+            "武汉站\n"
+            "上海虹桥站\n"
+            "G458\n"
+            "票价:￥354.00\n"
+            "电子客票号:6580061086021391007342026"
+        ),
+    )
+    get_settings.cache_clear()
+    try:
+        result = OcrService().recognize_files(
+            [
+                ("train-ticket.pdf", b"%PDF-1.7 fake", "application/pdf"),
+            ]
+        )
+    finally:
+        get_settings.cache_clear()
+
+    recognized = result.documents[0]
+    assert result.success_count == 1
+    assert recognized.document_type == "train_ticket"
+    assert "电子发票（铁路电子客票）" in recognized.text
+    assert "电子客票号:6580061086021391007342026" in recognized.text
+    assert any(field.label == "金额" and field.value == "354元" for field in recognized.document_fields)
+    assert recognized.preview_kind == "image"
+    assert recognized.preview_data_url.startswith("data:image/png;base64,")
+
+
 def test_ocr_service_reuses_cached_document_for_same_content(
    monkeypatch,
    tmp_path: Path,
@@ -351,5 +416,5 @@ def test_ocr_service_prefers_pdf_text_layer_when_rendered_ocr_is_placeholder_hea
    assert "上海虹桥站" in recognized.text
    assert "□□□□" not in recognized.summary
    assert recognized.document_type == "train_ticket"
-    assert recognized.preview_kind == ""
-    assert recognized.preview_data_url == ""
+    assert recognized.preview_kind == "image"
+    assert recognized.preview_data_url.startswith("data:image/png;base64,")
--- a/web/src/assets/styles/views/travel-request-detail-view.css
+++ b/web/src/assets/styles/views/travel-request-detail-view.css
@@ -718,11 +718,10 @@
 .application-leader-opinion {
  display: grid;
  gap: 12px;
-  margin-top: 14px;
-  padding: 14px;
-  border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), .16);
-  background: linear-gradient(180deg, rgba(248, 251, 255, .98) 0%, #ffffff 100%);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86);
+  margin-top: 12px;
+  padding: 14px 0 4px;
+  border-top: 1px solid #e5edf5;
+  background: #ffffff;
 }

 .application-leader-opinion-head {
@@ -730,8 +729,6 @@
  align-items: center;
  justify-content: space-between;
  gap: 12px;
-  padding-bottom: 10px;
-  border-bottom: 1px solid #e2e8f0;
  color: #334155;
  font-size: 14px;
  line-height: 1.5;
@@ -742,209 +739,238 @@
  align-items: center;
  gap: 8px;
  color: #0f172a;
-  font-weight: 850;
-  font-size: 16px;
+  font-weight: 700;
+  font-size: 15px;
 }

 .application-leader-opinion-head span i {
-  width: 28px;
-  height: 28px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--theme-primary-active, #255b7d);
-  border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), .22);
-  border-radius: 999px;
-  background: rgba(var(--theme-primary-rgb, 58, 124, 165), .08);
-  font-size: 18px;
+  color: #64748b;
+  font-size: 17px;
+  line-height: 1;
 }

 .application-leader-opinion-head strong {
-  padding: 4px 10px;
-  border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), .18);
-  border-radius: 999px;
-  background: rgba(var(--theme-primary-rgb, 58, 124, 165), .08);
-  color: var(--theme-primary-active);
-  font-weight: 800;
+  color: #64748b;
+  font-weight: 600;
  font-size: 13px;
 }

 .application-leader-opinion-timeline {
  position: relative;
  display: grid;
-  gap: 10px;
-  padding-left: 18px;
-}
-
-.application-leader-opinion-timeline::before {
-  content: "";
-  position: absolute;
-  top: 6px;
-  bottom: 6px;
-  left: 5px;
-  width: 1px;
-  background: #dbe4ee;
-}
-
-.application-leader-opinion-timeline.is-single {
-  padding-left: 0;
-}
-
-.application-leader-opinion-timeline.is-single::before,
-.application-leader-opinion-timeline.is-single .application-leader-opinion-event::before {
-  display: none;
+  gap: 0;
+  padding: 2px 0 0;
 }

 .application-leader-opinion-event {
-  --leader-opinion-tone: var(--theme-primary, #3a7ca5);
-  --leader-opinion-soft-bg: #f8fbff;
-  --leader-opinion-soft-border: #dbeafe;
+  --leader-opinion-tone: #16a34a;
  position: relative;
  display: grid;
-  gap: 10px;
-  padding: 14px 16px 14px 18px;
-  border: 1px solid #dbe4ee;
-  border-left: 4px solid var(--leader-opinion-tone);
-  border-radius: 4px;
-  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
-  box-shadow: 0 14px 30px rgba(15, 23, 42, .08);
-  overflow: hidden;
+  grid-template-columns: 104px 28px minmax(0, 1fr);
+  gap: 12px;
+  padding: 0 0 16px;
 }

-.application-leader-opinion-event::before {
+.application-leader-opinion-event:last-child {
+  padding-bottom: 0;
+}
+
+.application-leader-opinion-event-time {
+  display: grid;
+  gap: 3px;
+  justify-items: end;
+  padding-top: 1px;
+  color: #64748b;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.35;
+}
+
+.application-leader-opinion-event-time strong {
+  color: #334155;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.application-leader-opinion-event-time em {
+  color: #94a3b8;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 600;
+}
+
+.application-leader-opinion-event-rail {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  padding-top: 1px;
+}
+
+.application-leader-opinion-event-rail::after {
  content: "";
  position: absolute;
-  top: 17px;
-  left: -18px;
-  width: 9px;
-  height: 9px;
-  border: 2px solid #ffffff;
+  top: 24px;
+  bottom: -16px;
+  left: 50%;
+  width: 2px;
+  transform: translateX(-50%);
  border-radius: 999px;
-  background: var(--theme-primary, #3a7ca5);
-  box-shadow: 0 0 0 1px rgba(var(--theme-primary-rgb, 58, 124, 165), .34);
+  background: #e2e8f0;
+}
+
+.application-leader-opinion-event:last-child .application-leader-opinion-event-rail::after {
+  display: none;
 }

 .application-leader-opinion-event.danger {
  --leader-opinion-tone: #dc2626;
-  --leader-opinion-soft-bg: #fff7f7;
-  --leader-opinion-soft-border: #fecaca;
-}
-
-.application-leader-opinion-event.danger::before {
-  background: #dc2626;
-  box-shadow: 0 0 0 1px rgba(220, 38, 38, .32);
 }

 .application-leader-opinion-event.success {
  --leader-opinion-tone: #16a34a;
-  --leader-opinion-soft-bg: #f0fdf4;
-  --leader-opinion-soft-border: #bbf7d0;
-}
-
-.application-leader-opinion-event.success::before {
-  background: #16a34a;
-  box-shadow: 0 0 0 1px rgba(22, 163, 74, .32);
-}
-
-.application-leader-opinion-event-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.application-leader-opinion-event-head span {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  color: #0f172a;
-  font-size: 14px;
-  font-weight: 850;
 }

 .application-leader-opinion-event-status {
-  min-height: 30px;
-  padding: 4px 10px;
-  border: 1px solid var(--leader-opinion-soft-border);
+  position: relative;
+  z-index: 1;
+  width: 22px;
+  height: 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--leader-opinion-tone);
  border-radius: 999px;
-  background: var(--leader-opinion-soft-bg);
-  color: var(--leader-opinion-tone);
+  background: var(--leader-opinion-tone);
+  color: #ffffff;
+  box-shadow: 0 0 0 4px #ffffff;
 }

-.application-leader-opinion-event-head i {
-  color: currentColor;
-  font-size: 16px;
+.application-leader-opinion-event-status i {
+  font-size: 13px;
+  line-height: 1;
 }

-.application-leader-opinion-event.danger .application-leader-opinion-event-head i {
-  color: #dc2626;
-}
-
-.application-leader-opinion-event.success .application-leader-opinion-event-head i {
-  color: #16a34a;
-}
-
-.application-leader-opinion-event-head time,
-.application-leader-opinion-event footer {
-  color: #64748b;
-  font-size: 12px;
-  font-weight: 720;
-}
-
-.application-leader-opinion-event-head time {
-  padding: 4px 9px;
-  border: 1px solid #e2e8f0;
-  border-radius: 999px;
-  background: #ffffff;
-  color: #475569;
-  white-space: nowrap;
-}
-
-.application-leader-opinion-event-body {
+.application-leader-opinion-record {
+  min-width: 0;
  display: grid;
-  gap: 5px;
-  padding: 10px 12px;
-  border: 1px solid var(--leader-opinion-soft-border);
-  border-radius: 4px;
-  background: var(--leader-opinion-soft-bg);
+  gap: 9px;
+  padding: 0 0 16px;
+  border-bottom: 1px solid #edf2f7;
+  background: #ffffff;
 }

-.application-leader-opinion-event-body span {
+.application-leader-opinion-event:last-child .application-leader-opinion-record {
+  padding-bottom: 0;
+  border-bottom: 0;
+}
+
+.application-leader-opinion-record-head {
+  display: grid;
+  gap: 6px;
+}
+
+.application-leader-opinion-record-title {
+  min-width: 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+}
+
+.application-leader-opinion-record-title strong {
+  color: #0f172a;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1.35;
+}
+
+.application-leader-opinion-record-title::after {
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: var(--leader-opinion-tone);
+}
+
+.application-leader-opinion-record-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 16px;
+  margin: 0;
+}
+
+.application-leader-opinion-record-meta div {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.application-leader-opinion-record-meta dt,
+.application-leader-opinion-record-meta dd {
+  margin: 0;
+  color: #64748b;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 1.45;
+}
+
+.application-leader-opinion-record-meta dt {
+  color: #94a3b8;
+}
+
+.application-leader-opinion-record-meta dd {
+  color: #475569;
+}
+
+.application-leader-opinion-record p {
+  margin: 0;
+  padding: 9px 10px;
+  border: 1px solid #edf2f7;
+  border-radius: 4px;
+  background: #f8fafc;
+  color: #334155;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.6;
+}
+
+.application-leader-opinion-event-foot {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
  color: #64748b;
  font-size: 12px;
-  font-weight: 850;
  line-height: 1.4;
 }

-.application-leader-opinion-event-body p {
-  margin: 0;
-  color: #0f172a;
-  font-size: 15px;
-  font-weight: 850;
-  line-height: 1.65;
-}
-
-.application-leader-opinion-event footer {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
 .application-leader-opinion-event-foot span {
-  min-height: 26px;
  display: inline-flex;
  align-items: center;
-  gap: 5px;
-  padding: 3px 9px;
-  border: 1px solid #e2e8f0;
-  border-radius: 999px;
-  background: #ffffff;
-  color: #475569;
+  color: inherit;
 }

-.application-leader-opinion-event-foot i {
-  color: var(--leader-opinion-tone);
-  font-size: 14px;
+@media (max-width: 720px) {
+  .application-leader-opinion {
+    padding-top: 12px;
+  }
+
+  .application-leader-opinion-event {
+    grid-template-columns: 76px 24px minmax(0, 1fr);
+    gap: 8px;
+  }
+
+  .application-leader-opinion-event-status {
+    width: 20px;
+    height: 20px;
+  }
+
+  .application-leader-opinion-event-time strong {
+    font-size: 12px;
+  }
+
+  .application-leader-opinion-event-time em {
+    font-size: 11px;
+  }
 }

 .detail-expense-table {
--- a/web/src/components/business/PersonalWorkbenchAiMode.vue
+++ b/web/src/components/business/PersonalWorkbenchAiMode.vue
@@ -175,9 +175,25 @@
          </div>
        </form>

-        <div v-if="selectedFiles.length" class="workbench-ai-file-strip">
-          <span>已选择 {{ selectedFiles.length }} 份附件</span>
-          <button type="button" :disabled="isAiModeInputLocked" @click="clearAiModeFiles">清空</button>
+        <div v-if="selectedFileCards.length" class="workbench-ai-file-strip" aria-label="已选择附件">
+          <article v-for="file in selectedFileCards" :key="file.key" class="workbench-ai-file-card">
+            <span class="workbench-ai-file-card__icon" :class="`type-${file.tone}`" aria-hidden="true">
+              <i :class="file.icon"></i>
+            </span>
+            <span class="workbench-ai-file-card__body">
+              <strong :title="file.name">{{ file.name }}</strong>
+              <small>{{ file.typeLabel }}</small>
+            </span>
+            <button
+              type="button"
+              class="workbench-ai-file-card__remove"
+              :disabled="isAiModeInputLocked"
+              :aria-label="`移除附件 ${file.name}`"
+              @click="removeAiModeFile(file.key)"
+            >
+              <i class="mdi mdi-close"></i>
+            </button>
+          </article>
        </div>

        <div class="workbench-ai-quick-start-section">
@@ -469,9 +485,25 @@
        </div>

        <div class="workbench-ai-conversation-bottom">
-          <div v-if="selectedFiles.length" class="workbench-ai-file-strip inline">
-            <span>已选择 {{ selectedFiles.length }} 份附件</span>
-            <button type="button" :disabled="isAiModeInputLocked" @click="clearAiModeFiles">清空</button>
+          <div v-if="selectedFileCards.length" class="workbench-ai-file-strip inline" aria-label="已选择附件">
+            <article v-for="file in selectedFileCards" :key="file.key" class="workbench-ai-file-card">
+              <span class="workbench-ai-file-card__icon" :class="`type-${file.tone}`" aria-hidden="true">
+                <i :class="file.icon"></i>
+              </span>
+              <span class="workbench-ai-file-card__body">
+                <strong :title="file.name">{{ file.name }}</strong>
+                <small>{{ file.typeLabel }}</small>
+              </span>
+              <button
+                type="button"
+                class="workbench-ai-file-card__remove"
+                :disabled="isAiModeInputLocked"
+                :aria-label="`移除附件 ${file.name}`"
+                @click="removeAiModeFile(file.key)"
+              >
+                <i class="mdi mdi-close"></i>
+              </button>
+            </article>
          </div>

          <form class="workbench-ai-composer workbench-ai-composer--inline" @submit.prevent="submitAiModePrompt">
@@ -742,6 +774,7 @@ import {
  buildRequiredApplicationSelectionText,
  filterRequiredApplicationCandidates
 } from '../../views/scripts/travelReimbursementApplicationLinkModel.js'
+import { buildFileIdentity } from '../../views/scripts/travelReimbursementAttachmentModel.js'
 import {
  calculateTravelReimbursement,
  extractExpenseClaimItems,
@@ -787,6 +820,14 @@ const INLINE_ANSWER_STREAM_CHUNK_SIZE = 6
 const INLINE_ANSWER_STREAM_DELAY_MS = 24
 const INLINE_AUTO_SCROLL_THRESHOLD = 96
 const INLINE_LAYOUT_SETTLE_SCROLL_DELAY_MS = 260
+const AI_COMPOSER_FILE_TYPE_META = {
+  pdf: { label: 'PDF', icon: 'mdi mdi-file-pdf-box', tone: 'pdf' },
+  image: { label: '图片', icon: 'mdi mdi-file-image-outline', tone: 'image' },
+  spreadsheet: { label: '表格', icon: 'mdi mdi-file-excel-outline', tone: 'spreadsheet' },
+  document: { label: '文档', icon: 'mdi mdi-file-document-outline', tone: 'document' },
+  archive: { label: '压缩包', icon: 'mdi mdi-folder-zip-outline', tone: 'archive' },
+  file: { label: '文件', icon: 'mdi mdi-file-outline', tone: 'file' }
+}
 const {
  applicationPreviewEditor,
  resolveApplicationPreviewEditorControl,
@@ -854,6 +895,12 @@ const aiModeActionItems = [
  }
 ]

+const selectedFileCards = computed(() => selectedFiles.value.map((file) => ({
+  key: buildFileIdentity(file),
+  name: resolveAiComposerFileName(file),
+  ...resolveAiComposerFileType(file)
+})))
+
 const displayUserName = computed(() => {
  const user = currentUser.value || {}
  return String(user.name || user.username || '同事').trim() || '同事'
@@ -2815,6 +2862,32 @@ function markInlineMessageFeedback(message, feedback) {
  toast(feedback === 'up' ? '已记录有帮助反馈。' : '已记录需要改进反馈。')
 }

+function resolveAiComposerFileName(file) {
+  return String(file?.name || '未命名附件').trim() || '未命名附件'
+}
+
+function resolveAiComposerFileType(file) {
+  const fileName = resolveAiComposerFileName(file).toLowerCase()
+  const mimeType = String(file?.type || '').toLowerCase()
+  const extension = fileName.includes('.') ? fileName.split('.').pop() : ''
+  if (extension === 'pdf' || mimeType.includes('pdf')) {
+    return AI_COMPOSER_FILE_TYPE_META.pdf
+  }
+  if (/^(png|jpe?g|gif|webp|bmp|svg|heic)$/.test(extension) || mimeType.startsWith('image/')) {
+    return AI_COMPOSER_FILE_TYPE_META.image
+  }
+  if (/^(xls|xlsx|csv|numbers)$/.test(extension) || mimeType.includes('spreadsheet') || mimeType.includes('excel')) {
+    return AI_COMPOSER_FILE_TYPE_META.spreadsheet
+  }
+  if (/^(doc|docx|txt|md|pages)$/.test(extension) || mimeType.includes('word') || mimeType.includes('text')) {
+    return AI_COMPOSER_FILE_TYPE_META.document
+  }
+  if (/^(zip|rar|7z|tar|gz)$/.test(extension) || mimeType.includes('zip') || mimeType.includes('compressed')) {
+    return AI_COMPOSER_FILE_TYPE_META.archive
+  }
+  return AI_COMPOSER_FILE_TYPE_META.file
+}
+
 function triggerAiModeFileUpload() {
  if (isAiModeInputLocked.value) {
    toast('请等待费用测算完成后再继续操作。')
@@ -2831,6 +2904,14 @@ function handleAiModeFilesChange(event) {
  focusAiModeInput()
 }

+function removeAiModeFile(fileKey) {
+  selectedFiles.value = selectedFiles.value.filter((file) => buildFileIdentity(file) !== fileKey)
+  if (!selectedFiles.value.length && fileInputRef.value) {
+    fileInputRef.value.value = ''
+  }
+  focusAiModeInput()
+}
+
 function clearAiModeFiles() {
  selectedFiles.value = []
  if (fileInputRef.value) {
--- a/web/src/utils/applicationApproval.js
+++ b/web/src/utils/applicationApproval.js
@@ -37,6 +37,42 @@ function formatDateTime(value) {
  return `${year}-${month}-${day} ${hours}:${minutes}`
 }

+function formatDateLabel(value) {
+  const date = toDate(value)
+  if (!date) {
+    return ''
+  }
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  return `${year}-${month}-${day}`
+}
+
+function formatTimeLabel(value) {
+  const date = toDate(value)
+  if (!date) {
+    return ''
+  }
+  const hours = String(date.getHours()).padStart(2, '0')
+  const minutes = String(date.getMinutes()).padStart(2, '0')
+  return `${hours}:${minutes}`
+}
+
+function resolveApprovalRole(event, returned) {
+  return resolveDisplayName(
+    event?.operator_position,
+    event?.operatorPosition,
+    event?.operator_title,
+    event?.operatorTitle,
+    event?.approver_position,
+    event?.approverPosition,
+    event?.approval_role,
+    event?.approvalRole,
+    event?.previous_approval_stage,
+    event?.previousApprovalStage
+  ) || (returned ? '直属领导审批节点' : '直属领导')
+}
+
 function getRiskFlags(request) {
  const flags = request?.riskFlags || request?.risk_flags_json || []
  return Array.isArray(flags) ? flags : []
@@ -102,6 +138,8 @@ export function buildLeaderApprovalEvents(request) {
        request?.managerName
      ) || '直属领导'
      const time = formatDateTime(rawTime)
+      const dateLabel = formatDateLabel(rawTime) || '待记录'
+      const timeLabel = formatTimeLabel(rawTime)
      const opinion = normalizeText(event.opinion)
        || normalizeText(event.leader_opinion || event.leaderOpinion)
        || normalizeText(event.reason)
@@ -115,7 +153,10 @@ export function buildLeaderApprovalEvents(request) {
        tone: returned ? 'danger' : 'success',
        title: returned ? '领导退回' : '领导审批通过',
        operator,
+        role: resolveApprovalRole(event, returned),
        time,
+        dateLabel,
+        timeLabel,
        sortAt: rawTime,
        opinion,
        returnCount,
--- a/web/src/views/TravelRequestDetailView.vue
+++ b/web/src/views/TravelRequestDetailView.vue
@@ -164,24 +164,36 @@
                    class="application-leader-opinion-event"
                    :class="event.tone"
                  >
-                    <div class="application-leader-opinion-event-head">
-                      <span class="application-leader-opinion-event-status">
+                    <time class="application-leader-opinion-event-time" :datetime="event.time || undefined">
+                      <strong>{{ event.dateLabel }}</strong>
+                      <em v-if="event.timeLabel">{{ event.timeLabel }}</em>
+                    </time>
+                    <div class="application-leader-opinion-event-rail">
+                      <span class="application-leader-opinion-event-status" :title="event.title">
                        <i :class="event.type === 'returned' ? 'mdi mdi-arrow-u-left-top' : 'mdi mdi-check-circle-outline'"></i>
-                        {{ event.title }}
                      </span>
-                      <time v-if="event.time">{{ event.time }}</time>
                    </div>
-                    <div class="application-leader-opinion-event-body">
-                      <span>意见</span>
+                    <div class="application-leader-opinion-record">
+                      <header class="application-leader-opinion-record-head">
+                        <div class="application-leader-opinion-record-title">
+                          <strong>{{ event.title }}</strong>
+                        </div>
+                        <dl class="application-leader-opinion-record-meta">
+                          <div>
+                            <dt>审批人</dt>
+                            <dd>{{ event.operator }}</dd>
+                          </div>
+                          <div>
+                            <dt>节点</dt>
+                            <dd>{{ event.role }}</dd>
+                          </div>
+                        </dl>
+                      </header>
                      <p>{{ event.opinion }}</p>
-                    </div>
-                    <footer class="application-leader-opinion-event-foot">
-                      <span class="application-leader-opinion-operator">
-                        <em>审批人</em>
-                        {{ event.operator }}
-                      </span>
+                      <footer v-if="event.returnCount" class="application-leader-opinion-event-foot">
                        <span v-if="event.returnCount">第 {{ event.returnCount }} 次退回</span>
                      </footer>
+                    </div>
                  </article>
                </div>
              </div>
--- a/web/src/views/scripts/travelReimbursementAttachmentModel.js
+++ b/web/src/views/scripts/travelReimbursementAttachmentModel.js
@@ -64,7 +64,7 @@ export function normalizeOcrDocuments(payload) {
  return documents.slice(0, MAX_OCR_DOCUMENTS).map((item) => ({
    filename: item.filename,
    summary: item.summary,
-    text: String(item.text || '').slice(0, 240),
+    text: String(item.text || ''),
    avg_score: Number(item.avg_score || 0),
    line_count: Number(item.line_count || 0),
    document_type: String(item.document_type || 'other').trim() || 'other',
--- a/web/tests/application-approval-info.test.mjs
+++ b/web/tests/application-approval-info.test.mjs
@@ -83,9 +83,12 @@ test('buildLeaderApprovalEvents returns leader return and approval timeline in e
  assert.deepEqual(events.map((event) => event.type), ['returned', 'approved'])
  assert.deepEqual(events.map((event) => event.tone), ['danger', 'success'])
  assert.equal(events[0].operator, 'Leader Li')
+  assert.equal(events[0].role, '直属领导审批节点')
  assert.equal(events[0].opinion, 'Need clearer budget explanation.')
  assert.equal(events[0].returnCount, 1)
  assert.equal(events[0].time, '2026-05-25 09:00')
+  assert.equal(events[0].dateLabel, '2026-05-25')
+  assert.equal(events[0].timeLabel, '09:00')
  assert.equal(Object.hasOwn(events[0], 'sortAt'), false)
 })

--- a/web/tests/attachment-association-confirmation.test.mjs
+++ b/web/tests/attachment-association-confirmation.test.mjs
@@ -210,6 +210,47 @@ test('OCR receipt folder ids are kept for final draft attachment association', (
  assert.equal(Object.getOwnPropertyDescriptor(files[0], 'receiptId')?.enumerable, false)
 })

+test('OCR documents keep full recognized text for backend context', () => {
+  const longText = [
+    '增值税电子发票',
+    '购买方名称：远光软件股份有限公司',
+    '销售方名称：上海高铁服务有限公司',
+    '项目名称：客运服务',
+    '出发地：武汉',
+    '到达地：上海',
+    '乘车日期：2026-02-20',
+    '车次：G1234',
+    '座位等级：二等座',
+    '金额：354.00元',
+    '税额：10.62元',
+    '发票号码：12345678901234567890',
+    '开票日期：2026-02-21',
+    '购买方纳税人识别号：91440400618256625E',
+    '销售方纳税人识别号：91310000132234123X',
+    '备注：本票据用于差旅报销，请核对出发城市、到达城市、车次、座位等级、金额、税额和电子客票号。',
+    '电子客票号：E1234567890'
+  ].join('\n')
+
+  assert.ok(longText.length > 240)
+
+  const documents = normalizeOcrDocuments({
+    documents: [
+      {
+        filename: 'train-ticket.pdf',
+        text: longText,
+        summary: '铁路电子客票 武汉-上海',
+        document_fields: [
+          { key: 'amount', label: '金额', value: '354.00元' },
+          { key: 'ticket_no', label: '电子客票号', value: 'E1234567890' }
+        ]
+      }
+    ]
+  })
+
+  assert.equal(documents[0].text, longText)
+  assert.match(documents[0].text, /电子客票号：E1234567890/)
+})
+
 test('receipt files are collected through a single OCR persistence entry before draft association', async () => {
  const files = [
    { name: 'invoice.png' }
--- a/web/tests/travel-request-detail-leader-approval.test.mjs
+++ b/web/tests/travel-request-detail-leader-approval.test.mjs
@@ -129,11 +129,20 @@ test('approval-mode detail collects leader opinion inside confirm dialog before
  assert.match(detailTemplate, /v-for="event in leaderApprovalEvents"/)
  assert.match(detailTemplate, /class="application-leader-opinion-event"/)
  assert.match(detailTemplate, /event\.type === 'returned'/)
+  assert.match(detailTemplate, /class="application-leader-opinion-event-time"/)
+  assert.match(detailTemplate, /event\.dateLabel/)
+  assert.match(detailTemplate, /event\.timeLabel/)
+  assert.match(detailTemplate, /class="application-leader-opinion-event-rail"/)
  assert.match(detailTemplate, /class="application-leader-opinion-event-status"/)
-  assert.match(detailTemplate, /class="application-leader-opinion-event-body"/)
-  assert.match(detailTemplate, /审批意见/)
+  assert.match(detailTemplate, /:title="event\.title"/)
+  assert.match(detailTemplate, /class="application-leader-opinion-record"/)
+  assert.match(detailTemplate, /class="application-leader-opinion-record-head"/)
+  assert.match(detailTemplate, /class="application-leader-opinion-record-title"/)
+  assert.match(detailTemplate, /class="application-leader-opinion-record-meta"/)
+  assert.match(detailTemplate, /event\.operator/)
+  assert.match(detailTemplate, /event\.role/)
+  assert.match(detailTemplate, /event\.opinion/)
  assert.match(detailTemplate, /class="application-leader-opinion-event-foot"/)
-  assert.match(detailTemplate, /class="application-leader-opinion-operator"/)
  assert.doesNotMatch(detailTemplate, /leaderApprovalReadonlyText/)
  assert.doesNotMatch(detailTemplate, /\u5f85\u76f4\u5c5e\u9886\u5bfc\u586b\u5199\u5ba1\u6279\u610f\u89c1/)
  assert.match(detailTemplate, /领导意见/)
@@ -200,22 +209,33 @@ test('approval-mode detail collects leader opinion inside confirm dialog before
  assert.match(confirmDialog, /\.shared-confirm-card--approval \.shared-confirm-body \{[\s\S]*max-height: min\(270px, calc\(100dvh - 238px\)\);/)
  assert.match(confirmDialog, /\.shared-confirm-card--approval \.shared-confirm-btn \{[\s\S]*min-width: 118px;[\s\S]*min-height: 38px;/)

+  const leaderOpinionPanelRule = detailStyles.match(/^\.application-leader-opinion \{[\s\S]*?\n\}/m)?.[0] ?? ''
+  const leaderOpinionTimelineRule = detailStyles.match(/^\.application-leader-opinion-timeline \{[\s\S]*?\n\}/m)?.[0] ?? ''
+  const leaderOpinionEventRule = detailStyles.match(/^\.application-leader-opinion-event \{[\s\S]*?\n\}/m)?.[0] ?? ''
+
  assert.match(detailStyles, /\.detail-card-title-with-icon \{[\s\S]*display: inline-flex;[\s\S]*align-items: center;[\s\S]*gap: 8px;/)
  assert.match(detailStyles, /\.detail-card-title-with-icon i \{[\s\S]*font-size: 18px;[\s\S]*line-height: 1;/)
  assert.match(detailStyles, /\.application-leader-opinion-head span \{[\s\S]*display: inline-flex;[\s\S]*align-items: center;[\s\S]*gap: 8px;/)
+  assert.match(leaderOpinionPanelRule, /border-top: 1px solid #e5edf5;/)
+  assert.match(leaderOpinionPanelRule, /background: #ffffff;/)
+  assert.doesNotMatch(leaderOpinionPanelRule, /linear-gradient|box-shadow/)
  assert.doesNotMatch(detailStyles, /\.leader-approval-card/)
  assert.doesNotMatch(detailStyles, /\.inline-leader-opinion/)
-  assert.match(detailStyles, /\.application-leader-opinion-timeline \{/)
-  assert.match(detailStyles, /\.application-leader-opinion-timeline\.is-single \{[\s\S]*padding-left: 0;/)
-  assert.match(detailStyles, /\.application-leader-opinion-timeline\.is-single::before,[\s\S]*\.application-leader-opinion-timeline\.is-single \.application-leader-opinion-event::before \{[\s\S]*display: none;/)
+  assert.match(leaderOpinionTimelineRule, /gap: 0;/)
+  assert.match(leaderOpinionTimelineRule, /padding: 2px 0 0;/)
  assert.match(detailStyles, /\.application-leader-opinion-event \{/)
-  assert.match(detailStyles, /\.application-leader-opinion-event \{[\s\S]*border-left: 4px solid var\(--leader-opinion-tone/)
-  assert.match(detailStyles, /\.application-leader-opinion-event-status \{[\s\S]*border-radius: 999px;/)
-  assert.match(detailStyles, /\.application-leader-opinion-event-body \{[\s\S]*background: var\(--leader-opinion-soft-bg/)
-  assert.match(detailStyles, /\.application-leader-opinion-event-body p \{[\s\S]*font-size: 15px;/)
-  assert.match(detailStyles, /\.application-leader-opinion-event-foot span \{[\s\S]*border-radius: 999px;/)
-  assert.match(detailStyles, /\.application-leader-opinion-event\.danger::before \{/)
-  assert.match(detailStyles, /\.application-leader-opinion-event\.success::before \{/)
+  assert.match(leaderOpinionEventRule, /grid-template-columns: 104px 28px minmax\(0, 1fr\);/)
+  assert.match(leaderOpinionEventRule, /padding: 0 0 16px;/)
+  assert.doesNotMatch(leaderOpinionEventRule, /linear-gradient|box-shadow/)
+  assert.match(detailStyles, /\.application-leader-opinion-event-time \{[\s\S]*justify-items: end;[\s\S]*font-variant-numeric: tabular-nums;/)
+  assert.match(detailStyles, /\.application-leader-opinion-event-rail \{[\s\S]*justify-content: center;/)
+  assert.match(detailStyles, /\.application-leader-opinion-event-rail::after \{[\s\S]*width: 2px;[\s\S]*background: #e2e8f0;/)
+  assert.match(detailStyles, /\.application-leader-opinion-event-status \{[\s\S]*width: 22px;[\s\S]*height: 22px;[\s\S]*border-radius: 999px;/)
+  assert.match(detailStyles, /\.application-leader-opinion-record \{[\s\S]*border-bottom: 1px solid #edf2f7;[\s\S]*background: #ffffff;/)
+  assert.match(detailStyles, /\.application-leader-opinion-record-meta \{[\s\S]*display: flex;[\s\S]*gap: 6px 16px;/)
+  assert.match(detailStyles, /\.application-leader-opinion-record p \{[\s\S]*background: #f8fafc;[\s\S]*font-size: 14px;/)
+  assert.match(detailStyles, /\.application-leader-opinion-event\.danger \{[\s\S]*--leader-opinion-tone: #dc2626;/)
+  assert.match(detailStyles, /\.application-leader-opinion-event\.success \{[\s\S]*--leader-opinion-tone: #16a34a;/)

  assert.match(reimbursementService, /export function approveExpenseClaim\(claimId, payload = \{\}\)/)
  assert.match(reimbursementService, /\/approve/)