feat: display all pdf pages and add DocumentPreview (#88)

* feat: add DocumentPreview

* feat: display all pdf pages

web/.umirc.ts

@@ -1,6 +1,16 @@
+import path from 'path';
 import { defineConfig } from 'umi';
 import routes from './src/routes';
 
+const cMapsDir = path.join(
+  path.dirname(require.resolve('pdfjs-dist/package.json')),
+  'cmaps',
+);
+const standardFontsDir = path.join(
+  path.dirname(require.resolve('pdfjs-dist/package.json')),
+  'standard_fonts',
+);
+
 export default defineConfig({
   outputPath: 'dist',
   // alias: { '@': './src' },
@@ -28,4 +38,11 @@ export default defineConfig({
       // pathRewrite: { '^/v1': '/v1' },
     },
   },
+  copy: [
+    { from: cMapsDir, to: 'cmaps/' },
+    { from: standardFontsDir, to: 'standard_fonts/' },
+  ],
+  chainWebpack(memo, args) {
+    console.info(memo);
+  },
 });

web/package-lock.json

@@ -9,6 +9,7 @@
         "@ant-design/icons": "^5.2.6",
         "@ant-design/pro-components": "^2.6.46",
         "@ant-design/pro-layout": "^7.17.16",
+        "ahooks": "^3.7.10",
         "antd": "^5.12.7",
         "axios": "^1.6.3",
         "classnames": "^2.5.1",
@@ -22,6 +23,7 @@
         "react-i18next": "^14.0.0",
         "react-infinite-scroll-component": "^6.1.0",
         "react-markdown": "^9.0.1",
+        "react-pdf": "^7.7.1",
         "react-string-replace": "^1.1.1",
         "umi": "^4.0.90",
         "umi-request": "^1.4.0",
@@ -2098,6 +2100,109 @@
       "resolved": "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/@mapbox/node-pre-gyp": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmmirror.com/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.11.tgz",
+      "integrity": "sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==",
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^2.0.0",
+        "https-proxy-agent": "^5.0.0",
+        "make-dir": "^3.1.0",
+        "node-fetch": "^2.6.7",
+        "nopt": "^5.0.0",
+        "npmlog": "^5.0.1",
+        "rimraf": "^3.0.2",
+        "semver": "^7.3.5",
+        "tar": "^6.1.11"
+      },
+      "bin": {
+        "node-pre-gyp": "bin/node-pre-gyp"
+      }
+    },
+    "node_modules/@mapbox/node-pre-gyp/node_modules/detect-libc": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/detect-libc/-/detect-libc-2.0.2.tgz",
+      "integrity": "sha512-UX6sGumvvqSaXgdKGUsgZWqcUyIXZ/vZTrlRT/iobiKhGL0zL4d3osHj3uqllWJK+i+sixDS/3COVEOFbupFyw==",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@mapbox/node-pre-gyp/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "optional": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@mapbox/node-pre-gyp/node_modules/make-dir": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/make-dir/-/make-dir-3.1.0.tgz",
+      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+      "optional": true,
+      "dependencies": {
+        "semver": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@mapbox/node-pre-gyp/node_modules/make-dir/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmmirror.com/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "optional": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@mapbox/node-pre-gyp/node_modules/node-fetch": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmmirror.com/node-fetch/-/node-fetch-2.7.0.tgz",
+      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+      "optional": true,
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mapbox/node-pre-gyp/node_modules/semver": {
+      "version": "7.6.0",
+      "resolved": "https://registry.npmmirror.com/semver/-/semver-7.6.0.tgz",
+      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
+      "optional": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@mapbox/node-pre-gyp/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "optional": true
+    },
     "node_modules/@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmmirror.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -4582,6 +4687,12 @@
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
       "peer": true
     },
+    "node_modules/abbrev": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/abbrev/-/abbrev-1.1.1.tgz",
+      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
+      "optional": true
+    },
     "node_modules/acorn": {
       "version": "8.11.3",
       "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.11.3.tgz",
@@ -4628,6 +4739,18 @@
         "node": ">= 10.0.0"
       }
     },
+    "node_modules/agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmmirror.com/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "optional": true,
+      "dependencies": {
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
     "node_modules/aggregate-error": {
       "version": "3.1.0",
       "resolved": "https://registry.npmmirror.com/aggregate-error/-/aggregate-error-3.1.0.tgz",
@@ -4641,6 +4764,27 @@
         "node": ">=8"
       }
     },
+    "node_modules/ahooks": {
+      "version": "3.7.10",
+      "resolved": "https://registry.npmmirror.com/ahooks/-/ahooks-3.7.10.tgz",
+      "integrity": "sha512-/HLYif7sFA/5qSuWKrwvjDbf3bq+sdaMrUWS7XGCDRWdC2FrG/i+u5LZdakMYc6UIgJTMQ7tGiJCV7sdU4kSIw==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0",
+        "dayjs": "^1.9.1",
+        "intersection-observer": "^0.12.0",
+        "js-cookie": "^2.x.x",
+        "lodash": "^4.17.21",
+        "resize-observer-polyfill": "^1.5.1",
+        "screenfull": "^5.0.0",
+        "tslib": "^2.4.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmmirror.com/ajv/-/ajv-6.12.6.tgz",
@@ -4769,6 +4913,25 @@
         "node": ">= 8"
       }
     },
+    "node_modules/aproba": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/aproba/-/aproba-2.0.0.tgz",
+      "integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==",
+      "optional": true
+    },
+    "node_modules/are-we-there-yet": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz",
+      "integrity": "sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==",
+      "optional": true,
+      "dependencies": {
+        "delegates": "^1.0.0",
+        "readable-stream": "^3.6.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/argparse": {
       "version": "1.0.10",
       "resolved": "https://registry.npmmirror.com/argparse/-/argparse-1.0.10.tgz",
@@ -5602,6 +5765,21 @@
       "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001574.tgz",
       "integrity": "sha512-BtYEK4r/iHt/txm81KBudCUcTy7t+s9emrIaHqjYurQ10x71zJ5VQ9x1dYPcz/b+pKSp4y/v1xSI67A+LzpNyg=="
     },
+    "node_modules/canvas": {
+      "version": "2.11.2",
+      "resolved": "https://registry.npmmirror.com/canvas/-/canvas-2.11.2.tgz",
+      "integrity": "sha512-ItanGBMrmRV7Py2Z+Xhs7cT+FNt5K0vPL4p9EZ/UX/Mu7hFbkxSjKF2KVtPwX7UYWp7dRKnrTvReflgrItJbdw==",
+      "hasInstallScript": true,
+      "optional": true,
+      "dependencies": {
+        "@mapbox/node-pre-gyp": "^1.0.0",
+        "nan": "^2.17.0",
+        "simple-get": "^3.0.3"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/ccount": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/ccount/-/ccount-2.0.1.tgz",
@@ -5660,6 +5838,15 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/chownr": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/chownr/-/chownr-2.0.0.tgz",
+      "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
+      "optional": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/chrome-trace-event": {
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
@@ -5790,6 +5977,14 @@
         "node": ">=12"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/clsx/-/clsx-2.1.0.tgz",
+      "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/coa": {
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/coa/-/coa-2.0.2.tgz",
@@ -5830,6 +6025,15 @@
       "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.3.tgz",
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
     },
+    "node_modules/color-support": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmmirror.com/color-support/-/color-support-1.1.3.tgz",
+      "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==",
+      "optional": true,
+      "bin": {
+        "color-support": "bin.js"
+      }
+    },
     "node_modules/colord": {
       "version": "2.9.3",
       "resolved": "https://registry.npmmirror.com/colord/-/colord-2.9.3.tgz",
@@ -5886,6 +6090,12 @@
       "resolved": "https://registry.npmmirror.com/console-browserify/-/console-browserify-1.2.0.tgz",
       "integrity": "sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA=="
     },
+    "node_modules/console-control-strings": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/console-control-strings/-/console-control-strings-1.1.0.tgz",
+      "integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==",
+      "optional": true
+    },
     "node_modules/constants-browserify": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/constants-browserify/-/constants-browserify-1.0.0.tgz",
@@ -6679,6 +6889,18 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/decompress-response": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmmirror.com/decompress-response/-/decompress-response-4.2.1.tgz",
+      "integrity": "sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==",
+      "optional": true,
+      "dependencies": {
+        "mimic-response": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmmirror.com/deep-is/-/deep-is-0.1.4.tgz",
@@ -6855,6 +7077,12 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/delegates": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/delegates/-/delegates-1.0.0.tgz",
+      "integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==",
+      "optional": true
+    },
     "node_modules/dequal": {
       "version": "2.0.3",
       "resolved": "https://registry.npmmirror.com/dequal/-/dequal-2.0.3.tgz",
@@ -8678,6 +8906,36 @@
         "node": ">=12"
       }
     },
+    "node_modules/fs-minipass": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/fs-minipass/-/fs-minipass-2.1.0.tgz",
+      "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
+      "optional": true,
+      "dependencies": {
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/fs-minipass/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmmirror.com/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "optional": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fs-minipass/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "optional": true
+    },
     "node_modules/fs-monkey": {
       "version": "1.0.5",
       "resolved": "https://registry.npmmirror.com/fs-monkey/-/fs-monkey-1.0.5.tgz",
@@ -8725,6 +8983,26 @@
       "resolved": "https://registry.npmmirror.com/functions-have-names/-/functions-have-names-1.2.3.tgz",
       "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ=="
     },
+    "node_modules/gauge": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/gauge/-/gauge-3.0.2.tgz",
+      "integrity": "sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==",
+      "optional": true,
+      "dependencies": {
+        "aproba": "^1.0.3 || ^2.0.0",
+        "color-support": "^1.1.2",
+        "console-control-strings": "^1.0.0",
+        "has-unicode": "^2.0.1",
+        "object-assign": "^4.1.1",
+        "signal-exit": "^3.0.0",
+        "string-width": "^4.2.3",
+        "strip-ansi": "^6.0.1",
+        "wide-align": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmmirror.com/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -9051,6 +9329,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/has-unicode": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/has-unicode/-/has-unicode-2.0.1.tgz",
+      "integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==",
+      "optional": true
+    },
     "node_modules/has-value": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/has-value/-/has-value-1.0.0.tgz",
@@ -9391,6 +9675,19 @@
       "resolved": "https://registry.npmmirror.com/https-browserify/-/https-browserify-1.0.0.tgz",
       "integrity": "sha512-J+FkSdyD+0mA0N+81tMotaRMfSL9SGi+xpD3T6YApKsc3bGSXJlfXri3VyFOeYkfLRQisDk1W+jIFFKBeUBbBg=="
     },
+    "node_modules/https-proxy-agent": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
+      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+      "optional": true,
+      "dependencies": {
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/human-signals": {
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/human-signals/-/human-signals-2.1.0.tgz",
@@ -9568,6 +9865,11 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/intersection-observer": {
+      "version": "0.12.2",
+      "resolved": "https://registry.npmmirror.com/intersection-observer/-/intersection-observer-0.12.2.tgz",
+      "integrity": "sha512-7m1vEcPCxXYI8HqnL8CKI6siDyD+eIWSwgB3DZA+ZTogxk9I4CDnj4wilt9x/+/QbHI4YG5YZNmC6458/e9Ktg=="
+    },
     "node_modules/intl": {
       "version": "1.2.5",
       "resolved": "https://registry.npmmirror.com/intl/-/intl-1.2.5.tgz",
@@ -10455,6 +10757,11 @@
       "resolved": "https://registry.npmmirror.com/js-base64/-/js-base64-3.7.5.tgz",
       "integrity": "sha512-3MEt5DTINKqfScXKfJFrRbxkrnk2AxPWGBL/ycjz4dK8iqiSJ06UxD8jh8xuh6p10TX4t2+7FsBYVxxQbMg+qA=="
     },
+    "node_modules/js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmmirror.com/js-cookie/-/js-cookie-2.2.1.tgz",
+      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -10984,6 +11291,11 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/make-cancellable-promise": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmmirror.com/make-cancellable-promise/-/make-cancellable-promise-1.3.2.tgz",
+      "integrity": "sha512-GCXh3bq/WuMbS+Ky4JBPW1hYTOU+znU+Q5m9Pu+pI8EoUqIHk9+tviOKC6/qhHh8C4/As3tzJ69IF32kdz85ww=="
+    },
     "node_modules/make-dir": {
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/make-dir/-/make-dir-2.1.0.tgz",
@@ -11006,6 +11318,11 @@
         "semver": "bin/semver"
       }
     },
+    "node_modules/make-event-props": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmmirror.com/make-event-props/-/make-event-props-1.6.2.tgz",
+      "integrity": "sha512-iDwf7mA03WPiR8QxvcVHmVWEPfMY1RZXerDVNCRYW7dUr2ppH3J58Rwb39/WG39yTZdRSxr3x+2v22tvI0VEvA=="
+    },
     "node_modules/makeerror": {
       "version": "1.0.12",
       "resolved": "https://registry.npmmirror.com/makeerror/-/makeerror-1.0.12.tgz",
@@ -11212,6 +11529,19 @@
         "node": ">=10"
       }
     },
+    "node_modules/merge-refs": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmmirror.com/merge-refs/-/merge-refs-1.2.2.tgz",
+      "integrity": "sha512-RwcT7GsQR3KbuLw1rRuodq4Nt547BKEBkliZ0qqsrpyNne9bGTFtsFIsIpx82huWhcl3kOlOlH4H0xkPk/DqVw==",
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -11504,6 +11834,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/mimic-response": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/mimic-response/-/mimic-response-2.1.0.tgz",
+      "integrity": "sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/min-document": {
       "version": "2.19.0",
       "resolved": "https://registry.npmmirror.com/min-document/-/min-document-2.19.0.tgz",
@@ -11572,6 +11911,46 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/minipass": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/minipass/-/minipass-5.0.0.tgz",
+      "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minizlib": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmmirror.com/minizlib/-/minizlib-2.1.2.tgz",
+      "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
+      "optional": true,
+      "dependencies": {
+        "minipass": "^3.0.0",
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/minizlib/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmmirror.com/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "optional": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minizlib/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "optional": true
+    },
     "node_modules/mixin-deep": {
       "version": "1.3.2",
       "resolved": "https://registry.npmmirror.com/mixin-deep/-/mixin-deep-1.3.2.tgz",
@@ -11610,6 +11989,12 @@
       "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
+    "node_modules/nan": {
+      "version": "2.18.0",
+      "resolved": "https://registry.npmmirror.com/nan/-/nan-2.18.0.tgz",
+      "integrity": "sha512-W7tfG7vMOGtD30sHoZSSc/JVYiyDPEyQVso/Zz+/uQd0B0L46gtC+pHha5FFMRpil6fm/AoEcRWyOVi4+E/f8w==",
+      "optional": true
+    },
     "node_modules/nanoid": {
       "version": "3.3.7",
       "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.7.tgz",
@@ -11795,6 +12180,21 @@
       "resolved": "https://registry.npmmirror.com/node-releases/-/node-releases-2.0.14.tgz",
       "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw=="
     },
+    "node_modules/nopt": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/nopt/-/nopt-5.0.0.tgz",
+      "integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==",
+      "optional": true,
+      "dependencies": {
+        "abbrev": "1"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/normalize-package-data": {
       "version": "3.0.3",
       "resolved": "https://registry.npmmirror.com/normalize-package-data/-/normalize-package-data-3.0.3.tgz",
@@ -11870,6 +12270,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/npmlog": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/npmlog/-/npmlog-5.0.1.tgz",
+      "integrity": "sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==",
+      "optional": true,
+      "dependencies": {
+        "are-we-there-yet": "^2.0.0",
+        "console-control-strings": "^1.1.0",
+        "gauge": "^3.0.0",
+        "set-blocking": "^2.0.0"
+      }
+    },
     "node_modules/nth-check": {
       "version": "2.1.1",
       "resolved": "https://registry.npmmirror.com/nth-check/-/nth-check-2.1.1.tgz",
@@ -12402,6 +12814,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/path2d-polyfill": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/path2d-polyfill/-/path2d-polyfill-2.0.1.tgz",
+      "integrity": "sha512-ad/3bsalbbWhmBo0D6FZ4RNMwsLsPpL6gnvhuSaU5Vm7b06Kr5ubSltQQ0T7YKsiJQO+g22zJ4dJKNTXIyOXtA==",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/pbkdf2": {
       "version": "3.1.2",
       "resolved": "https://registry.npmmirror.com/pbkdf2/-/pbkdf2-3.1.2.tgz",
@@ -12417,6 +12838,18 @@
         "node": ">=0.12"
       }
     },
+    "node_modules/pdfjs-dist": {
+      "version": "3.11.174",
+      "resolved": "https://registry.npmmirror.com/pdfjs-dist/-/pdfjs-dist-3.11.174.tgz",
+      "integrity": "sha512-TdTZPf1trZ8/UFu5Cx/GXB7GZM30LT+wWUNfsi6Bq8ePLnb+woNKtDymI2mxZYBpMbonNFqKmiz684DIfnd8dA==",
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "canvas": "^2.11.2",
+        "path2d-polyfill": "^2.0.1"
+      }
+    },
     "node_modules/performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/performance-now/-/performance-now-2.1.0.tgz",
@@ -14413,6 +14846,32 @@
       "resolved": "https://registry.npmmirror.com/react-merge-refs/-/react-merge-refs-1.1.0.tgz",
       "integrity": "sha512-alTKsjEL0dKH/ru1Iyn7vliS2QRcBp9zZPGoWxUOvRGWPUYgjo+V01is7p04It6KhgrzhJGnIj9GgX8W4bZoCQ=="
     },
+    "node_modules/react-pdf": {
+      "version": "7.7.1",
+      "resolved": "https://registry.npmmirror.com/react-pdf/-/react-pdf-7.7.1.tgz",
+      "integrity": "sha512-cbbf/PuRtGcPPw+HLhMI1f6NSka8OJgg+j/yPWTe95Owf0fK6gmVY7OXpTxMeh92O3T3K3EzfE0ML0eXPGwR5g==",
+      "dependencies": {
+        "clsx": "^2.0.0",
+        "dequal": "^2.0.3",
+        "make-cancellable-promise": "^1.3.1",
+        "make-event-props": "^1.6.0",
+        "merge-refs": "^1.2.1",
+        "pdfjs-dist": "3.11.174",
+        "prop-types": "^15.6.2",
+        "tiny-invariant": "^1.0.0",
+        "warning": "^4.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.14.0",
       "resolved": "https://registry.npmmirror.com/react-refresh/-/react-refresh-0.14.0.tgz",
@@ -14969,7 +15428,6 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmmirror.com/rimraf/-/rimraf-3.0.2.tgz",
       "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-      "peer": true,
       "dependencies": {
         "glob": "^7.1.3"
       },
@@ -15124,6 +15582,14 @@
         "node": ">= 10.13.0"
       }
     },
+    "node_modules/screenfull": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmmirror.com/screenfull/-/screenfull-5.2.0.tgz",
+      "integrity": "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/scroll-into-view-if-needed": {
       "version": "3.1.0",
       "resolved": "https://registry.npmmirror.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-3.1.0.tgz",
@@ -15154,6 +15620,12 @@
         "randombytes": "^2.1.0"
       }
     },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+      "optional": true
+    },
     "node_modules/set-function-length": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/set-function-length/-/set-function-length-1.1.1.tgz",
@@ -15293,6 +15765,23 @@
       "resolved": "https://registry.npmmirror.com/signal-exit/-/signal-exit-3.0.7.tgz",
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
     },
+    "node_modules/simple-concat": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/simple-concat/-/simple-concat-1.0.1.tgz",
+      "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
+      "optional": true
+    },
+    "node_modules/simple-get": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmmirror.com/simple-get/-/simple-get-3.1.1.tgz",
+      "integrity": "sha512-CQ5LTKGfCpvE1K0n2us+kuMPbk/q0EKl82s4aheV9oXjFEz6W/Y7oQFVJuU6QG77hRT4Ghb5RURteF5vnWjupA==",
+      "optional": true,
+      "dependencies": {
+        "decompress-response": "^4.2.0",
+        "once": "^1.3.1",
+        "simple-concat": "^1.0.0"
+      }
+    },
     "node_modules/single-spa": {
       "version": "5.9.5",
       "resolved": "https://registry.npmmirror.com/single-spa/-/single-spa-5.9.5.tgz",
@@ -16329,6 +16818,41 @@
         "node": ">=6"
       }
     },
+    "node_modules/tar": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmmirror.com/tar/-/tar-6.2.0.tgz",
+      "integrity": "sha512-/Wo7DcT0u5HUV486xg675HtjNd3BXZ6xDbzsCUZPt5iw8bTQ63bP0Raut3mvro9u+CUyq7YQd8Cx55fsZXxqLQ==",
+      "optional": true,
+      "dependencies": {
+        "chownr": "^2.0.0",
+        "fs-minipass": "^2.0.0",
+        "minipass": "^5.0.0",
+        "minizlib": "^2.1.1",
+        "mkdirp": "^1.0.3",
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/tar/node_modules/mkdirp": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/mkdirp/-/mkdirp-1.0.4.tgz",
+      "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+      "optional": true,
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/tar/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "optional": true
+    },
     "node_modules/terser": {
       "version": "5.26.0",
       "resolved": "https://registry.npmmirror.com/terser/-/terser-5.26.0.tgz",
@@ -16469,9 +16993,7 @@
     "node_modules/tiny-invariant": {
       "version": "1.3.1",
       "resolved": "https://registry.npmmirror.com/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
-      "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==",
-      "dev": true,
-      "peer": true
+      "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw=="
     },
     "node_modules/tiny-warning": {
       "version": "1.0.3",
@@ -16584,6 +17106,12 @@
       "resolved": "https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz",
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
     },
+    "node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmmirror.com/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
+      "optional": true
+    },
     "node_modules/trim-lines": {
       "version": "3.0.1",
       "resolved": "https://registry.npmmirror.com/trim-lines/-/trim-lines-3.0.1.tgz",
@@ -17795,6 +18323,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
+      "optional": true
+    },
     "node_modules/webpack": {
       "version": "5.89.0",
       "resolved": "https://registry.npmmirror.com/webpack/-/webpack-5.89.0.tgz",
@@ -17865,6 +18399,16 @@
       "resolved": "https://registry.npmmirror.com/whatwg-fetch/-/whatwg-fetch-3.6.20.tgz",
       "integrity": "sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg=="
     },
+    "node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "optional": true,
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/which/-/which-2.0.2.tgz",
@@ -17939,6 +18483,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/wide-align": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmmirror.com/wide-align/-/wide-align-1.1.5.tgz",
+      "integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==",
+      "optional": true,
+      "dependencies": {
+        "string-width": "^1.0.2 || 2 || 3 || 4"
+      }
+    },
     "node_modules/wrap-ansi": {
       "version": "7.0.0",
       "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz",

web/package.json

@@ -13,6 +13,7 @@
     "@ant-design/icons": "^5.2.6",
     "@ant-design/pro-components": "^2.6.46",
     "@ant-design/pro-layout": "^7.17.16",
+    "ahooks": "^3.7.10",
     "antd": "^5.12.7",
     "axios": "^1.6.3",
     "classnames": "^2.5.1",
@@ -26,6 +27,7 @@
     "react-i18next": "^14.0.0",
     "react-infinite-scroll-component": "^6.1.0",
     "react-markdown": "^9.0.1",
+    "react-pdf": "^7.7.1",
     "react-string-replace": "^1.1.1",
     "umi": "^4.0.90",
     "umi-request": "^1.4.0",

web/src/constants/knowledge.ts

@@ -48,3 +48,8 @@ export enum LlmModelType {
   Image2text = 'image2text',
   Speech2text = 'speech2text',
 }
+
+export enum KnowledgeSearchParams {
+  DocumentId = 'doc_id',
+  KnowledgeId = 'id',
+}

web/src/hooks/knowledgeHook.ts

@@ -1,4 +1,5 @@
 import showDeleteConfirm from '@/components/deleting-confirm';
+import { KnowledgeSearchParams } from '@/constants/knowledge';
 import { IKnowledge, ITenantInfo } from '@/interfaces/database/knowledge';
 import { useCallback, useEffect, useMemo } from 'react';
 import { useDispatch, useSearchParams, useSelector } from 'umi';
@@ -181,3 +182,14 @@ export const useFetchFileThumbnails = (docIds?: Array<string>) => {
 
   return { fileThumbnails, fetchFileThumbnails };
 };
+
+export const useGetKnowledgeSearchParams = () => {
+  const [currentQueryParameters] = useSearchParams();
+
+  return {
+    documentId:
+      currentQueryParameters.get(KnowledgeSearchParams.DocumentId) || '',
+    knowledgeId:
+      currentQueryParameters.get(KnowledgeSearchParams.KnowledgeId) || '',
+  };
+};

web/src/pages/add-knowledge/components/knowledge-chunk/components/document-preview/hooks.ts

@@ -0,0 +1,20 @@
+import { useSize } from 'ahooks';
+import { useCallback, useEffect, useState } from 'react';
+
+export const useDocumentResizeObserver = () => {
+  const [containerWidth, setContainerWidth] = useState<number>();
+  const [containerRef, setContainerRef] = useState<HTMLElement | null>(null);
+  const size = useSize(containerRef);
+
+  const onResize = useCallback((width?: number) => {
+    if (width) {
+      setContainerWidth(width);
+    }
+  }, []);
+
+  useEffect(() => {
+    onResize(size?.width);
+  }, [size?.width, onResize]);
+
+  return { containerWidth, setContainerRef };
+};

web/src/pages/add-knowledge/components/knowledge-chunk/components/document-preview/index.less

@@ -0,0 +1,6 @@
+.documentContainer {
+  width: 100%;
+  height: calc(100vh - 284px);
+  overflow-y: auto;
+  overflow-x: hidden;
+}

web/src/pages/add-knowledge/components/knowledge-chunk/components/document-preview/index.tsx

@@ -0,0 +1,75 @@
+import { useGetKnowledgeSearchParams } from '@/hooks/knowledgeHook';
+import { api_host } from '@/utils/api';
+import { useMemo, useState } from 'react';
+import { Document, Page, pdfjs } from 'react-pdf';
+
+import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
+import 'react-pdf/dist/esm/Page/TextLayer.css';
+import { useDocumentResizeObserver } from './hooks';
+
+import styles from './index.less';
+
+// type PDFFile = string | File | null;
+
+pdfjs.GlobalWorkerOptions.workerSrc = new URL(
+  'pdfjs-dist/build/pdf.worker.min.js',
+  import.meta.url,
+).toString();
+
+// const options = {
+//   cMapUrl: '/cmaps/',
+//   standardFontDataUrl: '/standard_fonts/',
+// };
+
+const DocumentPreview = () => {
+  const [numPages, setNumPages] = useState<number>();
+  const { documentId } = useGetKnowledgeSearchParams();
+  //   const [file, setFile] = useState<PDFFile>(null);
+  const { containerWidth, setContainerRef } = useDocumentResizeObserver();
+
+  function onDocumentLoadSuccess({ numPages }: { numPages: number }): void {
+    setNumPages(numPages);
+  }
+
+  //   const handleChange = (e: any) => {
+  //     console.info(e.files);
+  //     setFile(e.target.files[0] || null);
+  //   };
+
+  const url = useMemo(() => {
+    return `${api_host}/document/get/${documentId}`;
+  }, [documentId]);
+
+  //   const fetch_document_file = useCallback(async () => {
+  //     const ret: Blob = await getDocumentFile(documentId);
+  //     console.info(ret);
+  //     const f = new File([ret], 'xx.pdf', { type: ret.type });
+  //     setFile(f);
+  //   }, [documentId]);
+
+  //   useEffect(() => {
+  //     // dispatch({ type: 'kFModel/fetch_document_file', payload: documentId });
+  //     fetch_document_file();
+  //   }, [fetch_document_file]);
+
+  return (
+    <div ref={setContainerRef} className={styles.documentContainer}>
+      <Document
+        file={url}
+        onLoadSuccess={onDocumentLoadSuccess}
+        //   options={options}
+      >
+        {Array.from(new Array(numPages), (el, index) => (
+          <Page
+            key={`page_${index + 1}`}
+            pageNumber={index + 1}
+            width={containerWidth}
+          />
+        ))}
+      </Document>
+      {/* <input type="file" onChange={handleChange} /> */}
+    </div>
+  );
+};
+
+export default DocumentPreview;

web/src/pages/add-knowledge/components/knowledge-chunk/hooks.ts

@@ -0,0 +1,9 @@
+import { IKnowledgeFile } from '@/interfaces/database/knowledge';
+import { useSelector } from 'umi';
+
+export const useSelectDocumentInfo = () => {
+  const documentInfo: IKnowledgeFile = useSelector(
+    (state: any) => state.chunkModel.documentInfo,
+  );
+  return documentInfo;
+};

web/src/pages/add-knowledge/components/knowledge-chunk/index.less

@@ -23,6 +23,11 @@
     }
   }
 
+  .documentPreview {
+    width: 40%;
+    height: 100%;
+  }
+
   .chunkContainer {
     height: calc(100vh - 320px);
     overflow: auto;

web/src/pages/add-knowledge/components/knowledge-chunk/index.tsx

@@ -1,6 +1,6 @@
 import { getOneNamespaceEffectsLoading } from '@/utils/storeUtil';
 import type { PaginationProps } from 'antd';
-import { Divider, Pagination, Space, Spin, message } from 'antd';
+import { Divider, Flex, Pagination, Space, Spin, message } from 'antd';
 import { useCallback, useEffect, useState } from 'react';
 import { useDispatch, useSearchParams, useSelector } from 'umi';
 import CreatingModal from './components/chunk-creating-modal';
@@ -8,6 +8,8 @@ import CreatingModal from './components/chunk-creating-modal';
 import { useDeleteChunkByIds } from '@/hooks/knowledgeHook';
 import ChunkCard from './components/chunk-card';
 import ChunkToolBar from './components/chunk-toolbar';
+import DocumentPreview from './components/document-preview';
+import { useSelectDocumentInfo } from './hooks';
 import styles from './index.less';
 import { ChunkModelState } from './model';
 
@@ -33,6 +35,7 @@ const Chunk = () => {
   const documentId: string = searchParams.get('doc_id') || '';
   const [chunkId, setChunkId] = useState<string | undefined>();
   const { removeChunk } = useDeleteChunkByIds();
+  const documentInfo = useSelectDocumentInfo();
 
   const getChunkList = useCallback(() => {
     const payload: PayloadType = {
@@ -158,39 +161,51 @@ const Chunk = () => {
           switchChunk={switchChunk}
         ></ChunkToolBar>
         <Divider></Divider>
-        <div className={styles.pageContent}>
-          <Spin spinning={loading} className={styles.spin} size="large">
-            <Space
-              direction="vertical"
-              size={'middle'}
-              className={styles.chunkContainer}
-            >
-              {data.map((item) => (
-                <ChunkCard
-                  item={item}
-                  key={item.chunk_id}
-                  editChunk={handleEditChunk}
-                  checked={selectedChunkIds.some((x) => x === item.chunk_id)}
-                  handleCheckboxClick={handleSingleCheckboxClick}
-                  switchChunk={switchChunk}
-                ></ChunkCard>
-              ))}
-            </Space>
-          </Spin>
-        </div>
-        <div className={styles.pageFooter}>
-          <Pagination
-            responsive
-            showLessItems
-            showQuickJumper
-            showSizeChanger
-            onChange={onPaginationChange}
-            pageSize={pagination.pageSize}
-            pageSizeOptions={[10, 30, 60, 90]}
-            current={pagination.current}
-            total={total}
-          />
-        </div>
+        <Flex flex={1} gap={'middle'}>
+          <Flex flex={1} vertical>
+            <div className={styles.pageContent}>
+              <Spin spinning={loading} className={styles.spin} size="large">
+                <Space
+                  direction="vertical"
+                  size={'middle'}
+                  className={styles.chunkContainer}
+                >
+                  {data.map((item) => (
+                    <ChunkCard
+                      item={item}
+                      key={item.chunk_id}
+                      editChunk={handleEditChunk}
+                      checked={selectedChunkIds.some(
+                        (x) => x === item.chunk_id,
+                      )}
+                      handleCheckboxClick={handleSingleCheckboxClick}
+                      switchChunk={switchChunk}
+                    ></ChunkCard>
+                  ))}
+                </Space>
+              </Spin>
+            </div>
+            <div className={styles.pageFooter}>
+              <Pagination
+                responsive
+                showLessItems
+                showQuickJumper
+                showSizeChanger
+                onChange={onPaginationChange}
+                pageSize={pagination.pageSize}
+                pageSizeOptions={[10, 30, 60, 90]}
+                current={pagination.current}
+                total={total}
+              />
+            </div>
+          </Flex>
+
+          {documentInfo.type === 'pdf' && (
+            <section className={styles.documentPreview}>
+              <DocumentPreview></DocumentPreview>
+            </section>
+          )}
+        </Flex>
       </div>
       <CreatingModal doc_id={documentId} chunkId={chunkId} />
     </>

web/src/pages/add-knowledge/components/knowledge-chunk/model.ts

@@ -13,7 +13,7 @@ export interface ChunkModelState extends BaseState {
   chunk_id: string;
   doc_id: string;
   chunkInfo: any;
-  documentInfo: Partial<IKnowledgeFile>;
+  documentInfo: IKnowledgeFile;
   available?: number;
 }
 
@@ -26,7 +26,7 @@ const model: DvaModel<ChunkModelState> = {
     chunk_id: '',
     doc_id: '',
     chunkInfo: {},
-    documentInfo: {},
+    documentInfo: {} as IKnowledgeFile,
     pagination: {
       current: 1,
       pageSize: 10,

web/src/pages/add-knowledge/components/knowledge-file/model.ts

@@ -1,6 +1,6 @@
 import { BaseState } from '@/interfaces/common';
 import { IKnowledgeFile } from '@/interfaces/database/knowledge';
-import kbService from '@/services/kbService';
+import kbService, { getDocumentFile } from '@/services/kbService';
 import { message } from 'antd';
 import omit from 'lodash/omit';
 import pick from 'lodash/pick';
@@ -212,6 +212,16 @@ const model: DvaModel<KFModelState> = {
         yield put({ type: 'setFileThumbnails', payload: data.data });
       }
     },
+    *fetch_document_file({ payload = {} }, { call }) {
+      const documentId = payload;
+      try {
+        const ret = yield call(getDocumentFile, documentId);
+        console.info('fetch_document_file:', ret);
+        return ret;
+      } catch (error) {
+        console.warn(error);
+      }
+    },
   },
 };
 export default model;

web/src/pages/add-knowledge/components/knowledge-testing/testing-result/index.tsx

@@ -29,7 +29,7 @@ const ChunkTitle = ({ item }: { item: ITestingChunk }) => {
           <span className={styles.similarityCircle}>
             {((item[x.field] as number) * 100).toFixed(2)}%
           </span>
-          <span className={styles.similarityText}>Hybrid Similarity</span>
+          <span className={styles.similarityText}>{x.label}</span>
         </Space>
       ))}
     </Flex>

web/src/services/kbService.ts

@@ -1,6 +1,7 @@
 import api from '@/utils/api';
 import registerServer from '@/utils/registerServer';
 import request from '@/utils/request';
+import pureRequest from 'umi-request';
 
 const {
   create_kb,
@@ -23,6 +24,7 @@ const {
   retrieval_test,
   document_rename,
   document_run,
+  get_document_file,
 } = api;
 
 const methods = {
@@ -113,4 +115,39 @@ const methods = {
 
 const kbService = registerServer<keyof typeof methods>(methods, request);
 
+export const getDocumentFile = (documentId: string) => {
+  return pureRequest(get_document_file + '/' + documentId, {
+    responseType: 'blob',
+    method: 'get',
+    parseResponse: false,
+    // getResponse: true,
+  })
+    .then((res) => {
+      const x = res.headers.get('content-disposition');
+      console.info(res);
+      console.info(x);
+      return res.blob();
+    })
+    .then((res) => {
+      // const objectURL = URL.createObjectURL(res);
+
+      // let btn = document.createElement('a');
+
+      // btn.download = '文件名.pdf';
+
+      // btn.href = objectURL;
+
+      // btn.click();
+
+      // URL.revokeObjectURL(objectURL);
+
+      // btn = null;
+
+      return res;
+    })
+    .catch((err) => {
+      console.info(err);
+    });
+};
+
 export default kbService;

web/src/utils/api.ts

@@ -43,6 +43,7 @@ export default {
   document_run: `${api_host}/document/run`,
   document_change_parser: `${api_host}/document/change_parser`,
   document_thumbnails: `${api_host}/document/thumbnails`,
+  get_document_file: `${api_host}/document/get`,
 
   setDialog: `${api_host}/dialog/set`,
   getDialog: `${api_host}/dialog/get`,

web/src/utils/request.ts

@@ -106,7 +106,10 @@ request.interceptors.request.use((url: string, options: any) => {
  * 请求response拦截器
  * */
 
-request.interceptors.response.use(async (response: any, request) => {
+request.interceptors.response.use(async (response: any, options) => {
+  if (options.responseType === 'blob') {
+    return response;
+  }
   const data: ResponseType = await response.clone().json();
   // response 拦截