From bd9af317e468e0b11536e4ab76216188bf23eb04 Mon Sep 17 00:00:00 2001
From: JOJO <1498581755@qq.com>
Date: Wed, 24 Jun 2026 12:41:56 +0800
Subject: [PATCH] =?UTF-8?q?feat(chat):=20=E4=BD=BF=E7=94=A8=20vue-pdf-embe?=
 =?UTF-8?q?d=20=E5=AE=9E=E7=8E=B0=20PDF=20=E5=8D=A1=E7=89=87=E5=86=85?=
 =?UTF-8?q?=E8=81=94=E6=BB=9A=E5=8A=A8=E9=A2=84=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 PdfPreview 组件，基于 vue-pdf-embed essential/legacy 构建
- PDF 文件卡片与其他文件卡片统一在卡片下半部分预览
- 移除 iframe 浏览器原生预览和 AndroidPdfBridge 原生预览分支
- 同步更新 Android App 版本号与更新说明
---
 android-webview-app/APP_CHANGELOG.md        |   4 +
 android-webview-app/app/build.gradle.kts    |   4 +-
 package-lock.json                           | 346 +++++++++++++++++++-
 package.json                                |   2 +
 static/src/components/chat/PdfPreview.vue   | 128 ++++++++
 static/src/components/chat/ShowFileCard.vue |  74 +----
 static/src/env.d.ts                         |   7 +
 7 files changed, 487 insertions(+), 78 deletions(-)
 create mode 100644 static/src/components/chat/PdfPreview.vue

diff --git a/android-webview-app/APP_CHANGELOG.md b/android-webview-app/APP_CHANGELOG.md
index d145ede..c9863ed 100644
--- a/android-webview-app/APP_CHANGELOG.md
+++ b/android-webview-app/APP_CHANGELOG.md
@@ -1,5 +1,9 @@
 # App 更新说明
 
+# 1.0.38
+- PDF 文件卡片改为前端 `vue-pdf-embed` 渲染：在卡片下方直接滚动预览多页，不再调用浏览器原生 PDF 预览或 Android 原生 PDF 预览 Activity
+- 与桌面端保持一致的文件卡片交互：PDF 和其他类型文件统一头部 + 下方预览布局
+
 # 1.0.37
 - 修复 Android App 内 PDF 文件卡片无法 inline 显示的问题：WebView 不支持 iframe PDF，改为卡片下方显示占位区，点击后调原生 PDF 预览
 - 修复进入含 PDF 卡片的对话自动弹出「已开始下载」的误报：移除 WebView `setDownloadListener`，避免把 PDF 加载请求误判为下载
diff --git a/android-webview-app/app/build.gradle.kts b/android-webview-app/app/build.gradle.kts
index 88306db..620a15b 100644
--- a/android-webview-app/app/build.gradle.kts
+++ b/android-webview-app/app/build.gradle.kts
@@ -16,8 +16,8 @@ android {
         applicationId = "com.cyjai.agent"
         minSdk = 24
         targetSdk = 35
-        versionCode = 39
-        versionName = "1.0.37"
+        versionCode = 40
+        versionName = "1.0.38"
 
         testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
     }
diff --git a/package-lock.json b/package-lock.json
index 5fd6786..9d74fe4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -35,10 +35,12 @@
         "socket.io-client": "^4.7.5",
         "unified": "^11.0.5",
         "vue": "^3.4.15",
+        "vue-pdf-embed": "^2.1.5",
         "vue-stick-to-bottom": "^1.0.0",
         "xterm": "^5.3.0"
       },
       "devDependencies": {
+        "@playwright/test": "^1.61.1",
         "@types/node": "^20.10.5",
         "@vitejs/plugin-vue": "^5.0.3",
         "@vue/eslint-config-prettier": "^9.0.0",
@@ -770,7 +772,6 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.5.tgz",
       "integrity": "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==",
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "@floating-ui/utils": "^0.2.11"
       }
@@ -780,7 +781,6 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.6.tgz",
       "integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==",
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "@floating-ui/core": "^1.7.5",
         "@floating-ui/utils": "^0.2.11"
@@ -790,8 +790,7 @@
       "version": "0.2.11",
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.11.tgz",
       "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
-      "license": "MIT",
-      "optional": true
+      "license": "MIT"
     },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.13.0",
@@ -868,6 +867,256 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@napi-rs/canvas": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas/-/canvas-0.1.100.tgz",
+      "integrity": "sha512-xglYA6q3XO5P3BNJYxVZ1IV7DLVjp1Py6nwag88YntrS+3vKHyYcMqXVS4ZztJmwz2uGvz1FWhI/4LgbR5uQDA==",
+      "license": "MIT",
+      "optional": true,
+      "workspaces": [
+        "e2e/*"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      },
+      "optionalDependencies": {
+        "@napi-rs/canvas-android-arm64": "0.1.100",
+        "@napi-rs/canvas-darwin-arm64": "0.1.100",
+        "@napi-rs/canvas-darwin-x64": "0.1.100",
+        "@napi-rs/canvas-linux-arm-gnueabihf": "0.1.100",
+        "@napi-rs/canvas-linux-arm64-gnu": "0.1.100",
+        "@napi-rs/canvas-linux-arm64-musl": "0.1.100",
+        "@napi-rs/canvas-linux-riscv64-gnu": "0.1.100",
+        "@napi-rs/canvas-linux-x64-gnu": "0.1.100",
+        "@napi-rs/canvas-linux-x64-musl": "0.1.100",
+        "@napi-rs/canvas-win32-arm64-msvc": "0.1.100",
+        "@napi-rs/canvas-win32-x64-msvc": "0.1.100"
+      }
+    },
+    "node_modules/@napi-rs/canvas-android-arm64": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-android-arm64/-/canvas-android-arm64-0.1.100.tgz",
+      "integrity": "sha512-hjhCKhntPv9+t4ckHymdx0phYNcVW+GKQR6Lzw2zE+pOVjOplSmtx9nNNknTjbEDLcuLZqA1y8ufKg1XfgftzQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-darwin-arm64": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-arm64/-/canvas-darwin-arm64-0.1.100.tgz",
+      "integrity": "sha512-2PcswRaC7Ly645DGt88///zuFDhJxJYdKAs1uU3mfk1atYkXufgcgLfBpk6Tm12nCQBaNt1wpybuPZ4qOhTo8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-darwin-x64": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-x64/-/canvas-darwin-x64-0.1.100.tgz",
+      "integrity": "sha512-ePNZtj7pNIva/siZMg+HmbeozkIjqUIYdoymH8HaA3qK7LfzFN4WMBM8G6HQ9ZC+H3+Dnn5pqtiXpgLykaPOhw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-arm-gnueabihf": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm-gnueabihf/-/canvas-linux-arm-gnueabihf-0.1.100.tgz",
+      "integrity": "sha512-d5cDB48oWFGU8/XPhUOFAlySgb/VAu7D+s8fi55K1Pcfg8aPplHWqMgibhVLU8ky7Pyg/fuiVLz4Nf3JrSTuUA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-arm64-gnu": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-gnu/-/canvas-linux-arm64-gnu-0.1.100.tgz",
+      "integrity": "sha512-rDxgxRu69RvDlX/bh9o22DxLsGr8EqsNgotL9+RwQE1S0b0cqeatqsw6aW45mukm0B42DIAaAacKaYQ8cqS1nw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-arm64-musl": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-musl/-/canvas-linux-arm64-musl-0.1.100.tgz",
+      "integrity": "sha512-K3mDW66N+xT2/V439u1alFANiBUjdEx2gLiNYnCmUsva5jZMxWTjafBYwTzYK+EMFMHrUoabuU+T1BIP5CgbYQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-riscv64-gnu": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-riscv64-gnu/-/canvas-linux-riscv64-gnu-0.1.100.tgz",
+      "integrity": "sha512-mooqUBTIsccZpnoQC4NgrC1v6C1vof39etLNMnBwCY+p0gajWJvAHLGQ6g/gGyS5YrpDW+GefSN4+Cvcr08UWw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-x64-gnu": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-gnu/-/canvas-linux-x64-gnu-0.1.100.tgz",
+      "integrity": "sha512-1eCvkDCazm7FFhsT7DfGOdSaHgZVK3bt/dSBl5EWHOWmnz+I7j8tPseJqqD81NF+MH21jKUK4wQSDjN0mdhnTg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-x64-musl": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-musl/-/canvas-linux-x64-musl-0.1.100.tgz",
+      "integrity": "sha512-20arT6lnI19S68qNlii73TSEDbECNgzMz2EpldC1V3mZFuRkeujXkcebRk0LRJe9SEUAooYiLokfMViY8IX7yA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-win32-arm64-msvc": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-win32-arm64-msvc/-/canvas-win32-arm64-msvc-0.1.100.tgz",
+      "integrity": "sha512-DZFFT1wIAg37LJw37yhMRFfjATd3vTQzjZ1Yki8u2vhO6Hi5VE6BVaGQ1aaDu7xb4iMErz+9EOwjpS7xcxFeBw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-win32-x64-msvc": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-win32-x64-msvc/-/canvas-win32-x64-msvc-0.1.100.tgz",
+      "integrity": "sha512-MyT1j3mHC2+Lu4pBi9mKyMJhtP6U7k7EldY7sj/uS5gJA65gTXt8MefJQXLJo5d/vZbuWmfxzkEUNc/urV3pHA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1243,6 +1492,22 @@
         "url": "https://opencollective.com/pkgr"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.61.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.61.1.tgz",
+      "integrity": "sha512-8nKv6+0RJSL9FE4jYOEGXnPeM/Hg12qZpmqzZjRh3qM0Y7c3z1mrOTfFLids72RDQYVh9WpLEfR5WdpNX4fkig==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.61.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.61.1",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.61.1.tgz",
@@ -5701,6 +5966,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/pdfjs-dist": {
+      "version": "5.7.284",
+      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-5.7.284.tgz",
+      "integrity": "sha512-h4EdYQczmGhbOlqc3PPZwxevn7ApdWPbovAuWXOB/DjIyigSnwfy2oze7c6mRcSr9XgLp3eN3EeL4DyySTPMFw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=22.13.0 || >=24"
+      },
+      "optionalDependencies": {
+        "@napi-rs/canvas": "^0.1.100"
+      }
+    },
     "node_modules/perfect-debounce": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
@@ -5747,6 +6024,53 @@
         }
       }
     },
+    "node_modules/playwright": {
+      "version": "1.61.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.61.1.tgz",
+      "integrity": "sha512-DWnY5o3YbLWK4GovuAVwpqL+1VwGNdUGrRr++8j8PtQQzvAVZUIMjKQ90fY689sEJZJBbZVw1rXaOKSTitkzPQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.61.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.61.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.61.1.tgz",
+      "integrity": "sha512-h7Qlt6m4REp25qvIdvbDtVmD4LqVXfpRxhORv9L0jzETM05p4fuPJ3dKyuSXQxDSbXnmS79HAgi9589lGSpLkg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.15",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz",
@@ -6967,7 +7291,7 @@
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -7245,6 +7569,18 @@
         "eslint": ">=6.0.0"
       }
     },
+    "node_modules/vue-pdf-embed": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/vue-pdf-embed/-/vue-pdf-embed-2.1.5.tgz",
+      "integrity": "sha512-IGFVBYlnOz2zSql1zk4YJyBu584EZa6RUykk5f8wkHF/AR31khCa+ruJoRag+Ff2UyntkWu0brENIKoikQ7F8g==",
+      "license": "MIT",
+      "dependencies": {
+        "pdfjs-dist": "^5.7.284"
+      },
+      "peerDependencies": {
+        "vue": "^3.3.0"
+      }
+    },
     "node_modules/vue-stick-to-bottom": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/vue-stick-to-bottom/-/vue-stick-to-bottom-1.0.0.tgz",
diff --git a/package.json b/package.json
index 71b703f..8d8b659 100644
--- a/package.json
+++ b/package.json
@@ -42,10 +42,12 @@
     "socket.io-client": "^4.7.5",
     "unified": "^11.0.5",
     "vue": "^3.4.15",
+    "vue-pdf-embed": "^2.1.5",
     "vue-stick-to-bottom": "^1.0.0",
     "xterm": "^5.3.0"
   },
   "devDependencies": {
+    "@playwright/test": "^1.61.1",
     "@types/node": "^20.10.5",
     "@vitejs/plugin-vue": "^5.0.3",
     "@vue/eslint-config-prettier": "^9.0.0",
diff --git a/static/src/components/chat/PdfPreview.vue b/static/src/components/chat/PdfPreview.vue
new file mode 100644
index 0000000..6d4fafa
--- /dev/null
+++ b/static/src/components/chat/PdfPreview.vue
@@ -0,0 +1,128 @@
+<template>
+  <div ref="containerRef" class="pdf-preview">
+    <div v-if="error" class="pdf-preview-error">{{ error }}</div>
+
+    <div v-show="loading" class="pdf-preview-loading">
+      <span class="pdf-preview-spinner"></span>
+      <span>PDF 加载中...</span>
+    </div>
+
+    <VuePdfEmbed
+      :source="props.source"
+      :width="pageWidth"
+      :text-layer="false"
+      :annotation-layer="false"
+      @loaded="onLoaded"
+      @loading-failed="onLoadingFailed"
+      @rendered="onRendered"
+      @rendering-failed="onRenderingFailed"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+import VuePdfEmbed, { GlobalWorkerOptions } from 'vue-pdf-embed/dist/index.essential.mjs';
+import pdfWorkerUrl from 'pdfjs-dist/legacy/build/pdf.worker.min.mjs?url';
+
+GlobalWorkerOptions.workerSrc = pdfWorkerUrl;
+
+defineOptions({ name: 'PdfPreview' });
+
+const props = defineProps<{
+  source: string;
+}>();
+
+const containerRef = ref<HTMLDivElement | null>(null);
+const pageWidth = ref<number | undefined>(undefined);
+const loading = ref(true);
+const error = ref('');
+
+let resizeObserver: ResizeObserver | null = null;
+let resizeHandler: (() => void) | null = null;
+
+function updateWidth() {
+  const el = containerRef.value;
+  if (!el) return;
+  const rect = el.getBoundingClientRect();
+  pageWidth.value = rect.width > 0 ? Math.floor(rect.width) : undefined;
+}
+
+onMounted(() => {
+  updateWidth();
+
+  if (typeof ResizeObserver !== 'undefined' && containerRef.value) {
+    resizeObserver = new ResizeObserver(() => updateWidth());
+    resizeObserver.observe(containerRef.value);
+  } else {
+    resizeHandler = () => updateWidth();
+    window.addEventListener('resize', resizeHandler);
+  }
+});
+
+onBeforeUnmount(() => {
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+    resizeObserver = null;
+  }
+  if (resizeHandler) {
+    window.removeEventListener('resize', resizeHandler);
+    resizeHandler = null;
+  }
+});
+
+function onLoaded() {
+  loading.value = false;
+}
+
+function onRendered() {
+  loading.value = false;
+}
+
+function onLoadingFailed(e: unknown) {
+  loading.value = false;
+  error.value = (e as Error)?.message || 'PDF 加载失败';
+}
+
+function onRenderingFailed(e: unknown) {
+  loading.value = false;
+  error.value = (e as Error)?.message || 'PDF 渲染失败';
+}
+</script>
+
+<style scoped lang="scss">
+.pdf-preview {
+  width: 100%;
+  min-height: 120px;
+}
+
+.pdf-preview-loading,
+.pdf-preview-error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 24px;
+  color: var(--text-tertiary);
+  font-size: 12px;
+}
+
+.pdf-preview-error {
+  color: var(--state-error);
+}
+
+.pdf-preview-spinner {
+  width: 14px;
+  height: 14px;
+  border: 2px solid var(--border-default);
+  border-top-color: var(--accent-primary);
+  border-radius: 50%;
+  animation: pdf-preview-spin 0.8s linear infinite;
+}
+
+@keyframes pdf-preview-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/static/src/components/chat/ShowFileCard.vue b/static/src/components/chat/ShowFileCard.vue
index b3b5299..875748b 100644
--- a/static/src/components/chat/ShowFileCard.vue
+++ b/static/src/components/chat/ShowFileCard.vue
@@ -69,28 +69,18 @@
       </template>
 
       <template v-else-if="fileType === 'pdf'">
-        <iframe
-          class="sfc-pdf"
-          :src="contentUrl"
-          :title="displayName"
-        ></iframe>
+        <PdfPreview v-if="contentUrl" :key="contentUrl" :source="contentUrl" />
       </template>
 
     </div>
-
-    <div v-else-if="canAndroidPdfPreview" class="sfc-android-pdf-preview" @click="previewPdf">
-      <div class="sfc-android-pdf-placeholder">
-        <span class="sfc-file-icon"></span>
-        <span>PDF 文件（点击预览）</span>
-      </div>
-    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import Prism from 'prismjs';
 import { renderMarkdown } from '../../composables/useMarkdownRenderer';
+import PdfPreview from './PdfPreview.vue';
 
 defineOptions({ name: 'ShowFileCard' });
 
@@ -102,15 +92,11 @@ const props = defineProps<{
   preview?: string;
 }>();
 
-// ---- 环境检测 ----
-const isAndroidApp = typeof window !== 'undefined' && Boolean((window as any).AndroidPdfBridge);
-
 // ---- 状态 ----
 const loading = ref(false);
 const error = ref('');
 const rawContent = ref('');
 const copied = ref(false);
-let objectUrl: string | null = null;
 const contentUrl = ref('');
 
 // ---- 计算属性 ----
@@ -119,15 +105,9 @@ const displayName = computed(() => props.name || props.path.split('/').pop() ||
 
 const canPreview = computed(() => {
   if (props.preview === 'off') return false;
-  // Android App 内 PDF 不走 iframe 内嵌预览（WebView 不支持），改用原生 PdfPreviewActivity
-  if (isAndroidApp && fileType.value === 'pdf') return false;
   return ['text', 'code', 'json', 'csv', 'markdown', 'image', 'pdf'].includes(fileType.value);
 });
 
-const canAndroidPdfPreview = computed(() => {
-  return isAndroidApp && fileType.value === 'pdf';
-});
-
 const canCopy = computed(() => ['text', 'code', 'json', 'csv', 'markdown'].includes(fileType.value));
 
 const metaText = computed(() => {
@@ -292,21 +272,10 @@ function openFullImage() {
   if (contentUrl.value) window.open(contentUrl.value, '_blank');
 }
 
-function previewPdf() {
-  const bridge = (window as any).AndroidPdfBridge;
-  if (bridge && typeof bridge.previewPdf === 'function') {
-    bridge.previewPdf(contentUrl.value);
-  }
-}
-
 function onImageError() {
   error.value = '图片加载失败';
 }
 
-onBeforeUnmount(() => {
-  if (objectUrl) URL.revokeObjectURL(objectUrl);
-});
-
 onMounted(() => {
   if (canPreview.value) {
     loadContent();
@@ -384,10 +353,6 @@ onMounted(() => {
   color: var(--accent-primary);
 }
 
-.sfc-btn-preview {
-  color: var(--accent-primary);
-}
-
 .sfc-preview {
   border-top: 1px solid var(--border-default);
   max-height: 360px;
@@ -500,37 +465,4 @@ onMounted(() => {
   padding: 12px;
 }
 
-.sfc-pdf {
-  width: 100%;
-  height: 400px;
-  border: none;
-  display: block;
-}
-
-.sfc-android-pdf-preview {
-  border-top: 1px solid var(--border-default);
-  background: var(--surface-base);
-}
-
-.sfc-android-pdf-placeholder {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  padding: 24px;
-  color: var(--text-secondary);
-  background: var(--surface-raised);
-  cursor: pointer;
-  transition: background 0.15s;
-}
-
-.sfc-android-pdf-placeholder:hover {
-  background: var(--surface-muted);
-}
-
-.sfc-android-pdf-placeholder .sfc-file-icon {
-  width: 20px;
-  height: 20px;
-  background-color: var(--text-secondary);
-}
 </style>
diff --git a/static/src/env.d.ts b/static/src/env.d.ts
index 2792ba9..816640f 100644
--- a/static/src/env.d.ts
+++ b/static/src/env.d.ts
@@ -10,3 +10,10 @@ declare module '*.md' {
   const content: string;
   export default content;
 }
+
+declare module 'vue-pdf-embed/dist/index.essential.mjs' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, any>;
+  export default component;
+  export const GlobalWorkerOptions: any;
+}