feat: simple demo"

package.json

@@ -29,7 +29,6 @@
         "html2canvas": "^1.4.1",
         "js-cookie": "^3.0.5",
         "jszip": "^3.10.1",
-        "lodash": "^4.17.21",
         "lodash-es": "^4.17.21",
         "pdfjs-dist": "2.4.456",
         "pptxtojson": "^1.3.1",
@@ -37,8 +36,6 @@
         "txml": "^5.1.1",
         "vue": "2.7.16",
         "vue-router": "^3.5.1",
-        "vuex": "^3.0.1",
-        "wisdom-ui": "^1.0.4-beta.5",
         "x-data-spreadsheet": "^1.1.9",
         "xlsx": "^0.18.5"
     }

pnpm-lock.yaml

@@ -38,9 +38,6 @@ dependencies:
   jszip:
     specifier: ^3.10.1
     version: 3.10.1
-  lodash:
-    specifier: ^4.17.21
-    version: 4.17.21
   lodash-es:
     specifier: ^4.17.21
     version: 4.17.21
@@ -62,12 +59,6 @@ dependencies:
   vue-router:
     specifier: ^3.5.1
     version: 3.6.5(vue@2.7.16)
-  vuex:
-    specifier: ^3.0.1
-    version: 3.6.2(vue@2.7.16)
-  wisdom-ui:
-    specifier: ^1.0.4-beta.5
-    version: 1.0.4-beta.6
   x-data-spreadsheet:
     specifier: ^1.1.9
     version: 1.1.9
@@ -93,7 +84,7 @@ devDependencies:
     version: 2.9.18(less@4.3.0)
   vite-plugin-vue2:
     specifier: ^2.0.3
-    version: 2.0.3(lodash@4.17.21)(vite@2.9.18)(vue-template-compiler@2.7.16)(vue@2.7.16)
+    version: 2.0.3(vite@2.9.18)(vue-template-compiler@2.7.16)(vue@2.7.16)
   vue-template-compiler:
     specifier: ^2.7.16
     version: 2.7.16
@@ -497,13 +488,6 @@ packages:
       - supports-color
     dev: true
 
-  /@babel/runtime@7.27.0:
-    resolution: {integrity: sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      regenerator-runtime: 0.14.1
-    dev: false
-
   /@babel/template@7.27.0:
     resolution: {integrity: sha512-2ncevenBqXI6qRMukPlXwHKHchC7RyMuu4xv5JBXRfOGVcTy1mXCD12qrp7Jsoxll1EV3+9sE4GugBVRjT2jFA==}
     engines: {node: '>=6.9.0'}
@@ -633,22 +617,6 @@ packages:
       node-dir: 0.1.17
     dev: true
 
-  /@riophae/vue-treeselect@0.4.0(vue@2.6.11):
-    resolution: {integrity: sha512-J4atYmBqXQmiPFK/0B5sXKjtnGc21mBJEiyKIDZwk0Q9XuynVFX6IJ4EpaLmUgL5Tve7HAS7wkiGGSti6Uaxcg==}
-    peerDependencies:
-      vue: ^2.2.0
-    dependencies:
-      '@babel/runtime': 7.27.0
-      babel-helper-vue-jsx-merge-props: 2.0.3
-      easings-css: 1.0.0
-      fuzzysearch: 1.0.3
-      is-promise: 2.2.2
-      lodash: 4.17.21
-      material-colors: 1.2.6
-      vue: 2.6.11
-      watch-size: 2.0.0
-    dev: false
-
   /@rollup/pluginutils@4.2.1:
     resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
     engines: {node: '>= 8.0.0'}
@@ -823,10 +791,10 @@ packages:
     optionalDependencies:
       prettier: 2.8.8
 
-  /@vue/component-compiler-utils@3.3.0(lodash@4.17.21):
+  /@vue/component-compiler-utils@3.3.0:
     resolution: {integrity: sha512-97sfH2mYNU+2PzGrmK2haqffDpVASuib9/w2/noxiFi31Z54hW+q3izKQXXQZSNhtiUpAI36uSuYepeBe4wpHQ==}
     dependencies:
-      consolidate: 0.15.1(lodash@4.17.21)
+      consolidate: 0.15.1
       hash-sum: 1.0.2
       lru-cache: 4.1.5
       merge-source-map: 1.1.0
@@ -974,12 +942,6 @@ packages:
       zip-stream: 4.1.1
     dev: false
 
-  /argparse@1.0.10:
-    resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
-    dependencies:
-      sprintf-js: 1.0.3
-    dev: false
-
   /async-validator@1.8.5:
     resolution: {integrity: sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==}
     dependencies:
@@ -1067,28 +1029,6 @@ packages:
     resolution: {integrity: sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==}
     dev: true
 
-  /bmaplib.curveline@1.0.0:
-    resolution: {integrity: sha512-9wcFMVhiYxNPqpvsLDAADn3qDhNzXp2mA6VyHSHg2XOAgSooC7ZiujdFhy0sp+0QYjTfJ/MjmLuNoUg2HHxH4Q==}
-    dev: false
-
-  /bmaplib.heatmap@1.0.4:
-    resolution: {integrity: sha512-rmhqUARBpUSJ9jXzUI2j7dIOqnc38bqubkx/8a349U2qtw/ulLUwyzRD535OrA8G7w5cz4aPKm6/rNvUAarg/Q==}
-    dev: false
-
-  /bmaplib.lushu@1.0.7:
-    resolution: {integrity: sha512-LVvgpESPii6xGxyjnQjq8u+ic4NjvhdCPV/RiSS/PGTUdZKeTDS7prSpleJLZH3ES0+oc0gYn8bw0LtPYUSz2w==}
-    dev: false
-
-  /bmaplib.markerclusterer@1.0.13:
-    resolution: {integrity: sha512-VrLyWSiuDEVNi0yUfwOhFQ6z1oEEHS4w36GNu3iASu6p52QIx9uAXMUkuSCHReNR0bj2Cp9SA1dSx5RpojXajQ==}
-    dependencies:
-      bmaplib.texticonoverlay: 1.0.2
-    dev: false
-
-  /bmaplib.texticonoverlay@1.0.2:
-    resolution: {integrity: sha512-4ZTWr4ZP3B6qEWput5Tut16CfZgII38YwM3bpyb4gFTQyORlKYryFp9WHWrwZZaHlOyYDAXG9SX0hka43jTADg==}
-    dev: false
-
   /brace-expansion@1.1.11:
     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
     dependencies:
@@ -1242,7 +1182,7 @@ packages:
   /concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
-  /consolidate@0.15.1(lodash@4.17.21):
+  /consolidate@0.15.1:
     resolution: {integrity: sha512-DW46nrsMJgy9kqAbPt5rKaCr7uFtpo4mSUvLHIUbJEjm0vo+aY5QLwBUq3FK4tRnJr/X0Psc0C4jf/h+HtXSMw==}
     engines: {node: '>= 0.10.0'}
     deprecated: Please upgrade to consolidate v1.0.0+ as it has been modernized with several long-awaited fixes implemented. Maintenance is supported by Forward Email at https://forwardemail.net ; follow/watch https://github.com/ladjs/consolidate for updates and release changelog
@@ -1409,10 +1349,9 @@ packages:
         optional: true
     dependencies:
       bluebird: 3.7.2
-      lodash: 4.17.21
     dev: true
 
-  /consolidate@0.16.0(lodash@4.17.21):
+  /consolidate@0.16.0:
     resolution: {integrity: sha512-Nhl1wzCslqXYTJVDyJCu3ODohy9OfBMB5uD2BiBTzd7w+QY0lBzafkR8y8755yMYHAaMD4NuzbAw03/xzfw+eQ==}
     engines: {node: '>= 0.10.0'}
     deprecated: Please upgrade to consolidate v1.0.0+ as it has been modernized with several long-awaited fixes implemented. Maintenance is supported by Forward Email at https://forwardemail.net ; follow/watch https://github.com/ladjs/consolidate for updates and release changelog
@@ -1579,7 +1518,6 @@ packages:
         optional: true
     dependencies:
       bluebird: 3.7.2
-      lodash: 4.17.21
     dev: true
 
   /convert-source-map@2.0.0:
@@ -1701,28 +1639,10 @@ packages:
       readable-stream: 2.3.8
     dev: false
 
-  /easings-css@1.0.0:
-    resolution: {integrity: sha512-7Uq7NdazNfVtr0RNmPAys8it0zKCuaqxJStYKEl72D3j4gbvXhhaM7iWNbqhA4C94ygCye6VuyhzBRQC4szeBg==}
-    dev: false
-
   /electron-to-chromium@1.5.139:
     resolution: {integrity: sha512-GGnRYOTdN5LYpwbIr0rwP/ZHOQSvAF6TG0LSzp28uCBb9JiXHJGmaaKw29qjNJc5bGnnp6kXJqRnGMQoELwi5w==}
     dev: true
 
-  /element-ui@2.15.14(vue@2.6.11):
-    resolution: {integrity: sha512-2v9fHL0ZGINotOlRIAJD5YuVB8V7WKxrE9Qy7dXhRipa035+kF7WuU/z+tEmLVPBcJ0zt8mOu1DKpWcVzBK8IA==}
-    peerDependencies:
-      vue: ^2.5.17
-    dependencies:
-      async-validator: 1.8.5
-      babel-helper-vue-jsx-merge-props: 2.0.3
-      deepmerge: 1.5.2
-      normalize-wheel: 1.0.1
-      resize-observer-polyfill: 1.5.1
-      throttle-debounce: 1.1.0
-      vue: 2.6.11
-    dev: false
-
   /element-ui@2.15.14(vue@2.7.16):
     resolution: {integrity: sha512-2v9fHL0ZGINotOlRIAJD5YuVB8V7WKxrE9Qy7dXhRipa035+kF7WuU/z+tEmLVPBcJ0zt8mOu1DKpWcVzBK8IA==}
     peerDependencies:
@@ -1749,10 +1669,6 @@ packages:
       once: 1.4.0
     dev: false
 
-  /entities@1.1.2:
-    resolution: {integrity: sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==}
-    dev: false
-
   /errno@0.1.8:
     resolution: {integrity: sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==}
     hasBin: true
@@ -2119,10 +2035,6 @@ packages:
   /function-bind@1.1.2:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
 
-  /fuzzysearch@1.0.3:
-    resolution: {integrity: sha512-s+kNWQuI3mo9OALw0HJ6YGmMbLqEufCh2nX/zzV5CrICQ/y4AwPxM+6TIiF9ItFCHXFCyM/BfCCmN57NTIJuPg==}
-    dev: false
-
   /gensync@1.0.0-beta.2:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
@@ -2329,10 +2241,6 @@ packages:
     engines: {node: '>=4'}
     dev: false
 
-  /is-promise@2.2.2:
-    resolution: {integrity: sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==}
-    dev: false
-
   /is-stream@1.1.0:
     resolution: {integrity: sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==}
     engines: {node: '>=0.10.0'}
@@ -2430,12 +2338,6 @@ packages:
       immediate: 3.0.6
     dev: false
 
-  /linkify-it@2.2.0:
-    resolution: {integrity: sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==}
-    dependencies:
-      uc.micro: 1.0.6
-    dev: false
-
   /listenercount@1.0.1:
     resolution: {integrity: sha512-3mk/Zag0+IJxeDrxSgaDPy4zZ3w05PRZeJNnlWhzFz5OkX49J4krc+A8X2d2M69vGMBEX0uyl8M+W+8gH+kBqQ==}
     dev: false
@@ -2503,6 +2405,7 @@ packages:
 
   /lodash@4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+    dev: false
 
   /lru-cache@4.1.5:
     resolution: {integrity: sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==}
@@ -2534,30 +2437,11 @@ packages:
     dev: true
     optional: true
 
-  /markdown-it@8.4.2:
-    resolution: {integrity: sha512-GcRz3AWTqSUphY3vsUqQSFMbgR38a4Lh3GWlHRh/7MRwz8mcu9n2IO7HOh+bXHrR9kOPDl5RNCaEsrneb+xhHQ==}
-    hasBin: true
-    dependencies:
-      argparse: 1.0.10
-      entities: 1.1.2
-      linkify-it: 2.2.0
-      mdurl: 1.0.1
-      uc.micro: 1.0.6
-    dev: false
-
-  /material-colors@1.2.6:
-    resolution: {integrity: sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==}
-    dev: false
-
   /math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
     dev: false
 
-  /mdurl@1.0.1:
-    resolution: {integrity: sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==}
-    dev: false
-
   /merge-source-map@1.1.0:
     resolution: {integrity: sha512-Qkcp7P2ygktpMPh2mCQZaf3jhN6D3Z/qVZHSdWvQ+2Ef5HgRAPBO57A77+ENm0CPx2+1Ce/MYKi3ymqdfuqibw==}
     dependencies:
@@ -2898,10 +2782,6 @@ packages:
     dev: false
     optional: true
 
-  /regenerator-runtime@0.14.1:
-    resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
-    dev: false
-
   /regexp-to-ast@0.4.0:
     resolution: {integrity: sha512-4qf/7IsIKfSNHQXSwial1IFmfM1Cc/whNBQqRwe0V2stPe7KmN1U0tWQiIx6JiirgSrisjE0eECdNf7Tav1Ntw==}
     requiresBuild: true
@@ -3030,10 +2910,6 @@ packages:
     deprecated: Please use @jridgewell/sourcemap-codec instead
     dev: true
 
-  /sprintf-js@1.0.3:
-    resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
-    dev: false
-
   /ssf@0.11.2:
     resolution: {integrity: sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==}
     engines: {node: '>=0.8'}
@@ -3118,11 +2994,6 @@ packages:
     engines: {node: '>=4'}
     dev: false
 
-  /throttle-debounce@3.0.1:
-    resolution: {integrity: sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==}
-    engines: {node: '>=10'}
-    dev: false
-
   /through2@3.0.2:
     resolution: {integrity: sha512-enaDQ4MUyP2W6ZyT6EsMzqBPZaM/avg8iuo+l2d3QCs0J+6RaqkHV/2/lOwDTueBHeJ/2LG9lrLW3d5rWPucuQ==}
     dependencies:
@@ -3176,10 +3047,6 @@ packages:
     hasBin: true
     dev: true
 
-  /uc.micro@1.0.6:
-    resolution: {integrity: sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==}
-    dev: false
-
   /undici-types@6.21.0:
     resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
     dev: true
@@ -3236,7 +3103,7 @@ packages:
     hasBin: true
     dev: false
 
-  /vite-plugin-vue2@2.0.3(lodash@4.17.21)(vite@2.9.18)(vue-template-compiler@2.7.16)(vue@2.7.16):
+  /vite-plugin-vue2@2.0.3(vite@2.9.18)(vue-template-compiler@2.7.16)(vue@2.7.16):
     resolution: {integrity: sha512-t3Tu93GWsMHbpeIv66MTO5e/rRAo8/+/eWoUtFYuAdKDMyEnn1dqsrXh+CfG+SJAlxJvcTP8U0eXkzhLjKNyMg==}
     peerDependencies:
       vite: ^2.0.0 || ^3.0.0 || ^4.0.0
@@ -3259,8 +3126,8 @@ packages:
       '@rollup/pluginutils': 4.2.1
       '@vue/babel-helper-vue-jsx-merge-props': 1.4.0
       '@vue/babel-preset-jsx': 1.4.0(@babel/core@7.26.10)(vue@2.7.16)
-      '@vue/component-compiler-utils': 3.3.0(lodash@4.17.21)
-      consolidate: 0.16.0(lodash@4.17.21)
+      '@vue/component-compiler-utils': 3.3.0
+      consolidate: 0.16.0
       debug: 4.4.0
       fs-extra: 10.1.0
       hash-sum: 2.0.0
@@ -3356,48 +3223,6 @@ packages:
       fsevents: 2.3.3
     dev: true
 
-  /vue-baidu-map@0.21.22(vue@2.6.11):
-    resolution: {integrity: sha512-WQMPCih4UTh0AZCKKH/OVOYnyAWjfRNeK6BIeoLmscyY5aF8zzlJhz/NOHLb3mdztIpB0Z6aohn4Jd9mfCSjQw==}
-    peerDependencies:
-      vue: ^2.1.8
-    dependencies:
-      bmaplib.curveline: 1.0.0
-      bmaplib.heatmap: 1.0.4
-      bmaplib.lushu: 1.0.7
-      bmaplib.markerclusterer: 1.0.13
-      markdown-it: 8.4.2
-      vue: 2.6.11
-    dev: false
-
-  /vue-class-component@7.2.6(vue@2.6.11):
-    resolution: {integrity: sha512-+eaQXVrAm/LldalI272PpDe3+i4mPis0ORiMYxF6Ae4hyuCh15W8Idet7wPUEs4N4YptgFHGys4UrgNQOMyO6w==}
-    peerDependencies:
-      vue: ^2.0.0
-    dependencies:
-      vue: 2.6.11
-    dev: false
-
-  /vue-cropper@0.5.11:
-    resolution: {integrity: sha512-UeA3qL2BLCTGkOEAxEsxSNFO+qLYAn6YRHv4oS32cP9lMhF1vFmnAf/z+ZamtR0/Fh3sbZeZUCLVR2Ol2/dpTQ==}
-    dev: false
-
-  /vue-property-decorator@8.5.1(vue@2.6.11):
-    resolution: {integrity: sha512-O6OUN2OMsYTGPvgFtXeBU3jPnX5ffQ9V4I1WfxFQ6dqz6cOUbR3Usou7kgFpfiXDvV7dJQSFcJ5yUPgOtPPm1Q==}
-    peerDependencies:
-      vue: '*'
-    dependencies:
-      vue: 2.6.11
-      vue-class-component: 7.2.6(vue@2.6.11)
-    dev: false
-
-  /vue-router@3.6.5(vue@2.6.11):
-    resolution: {integrity: sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ==}
-    peerDependencies:
-      vue: ^2
-    dependencies:
-      vue: 2.6.11
-    dev: false
-
   /vue-router@3.6.5(vue@2.7.16):
     resolution: {integrity: sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ==}
     peerDependencies:
@@ -3440,15 +3265,6 @@ packages:
     resolution: {integrity: sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==}
     dev: true
 
-  /vue-virtual-scroll-list@2.3.5:
-    resolution: {integrity: sha512-YFK6u5yltqtAOfTBcij/KGAS2SoZvzbNIAf9qTULauPObEp53xj22tDuohrrM2vNkgoD5kejXICIUBt2Q4ZDqQ==}
-    dev: false
-
-  /vue@2.6.11:
-    resolution: {integrity: sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==}
-    deprecated: Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.
-    dev: false
-
   /vue@2.7.16:
     resolution: {integrity: sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==}
     deprecated: Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.
@@ -3456,35 +3272,6 @@ packages:
       '@vue/compiler-sfc': 2.7.16
       csstype: 3.1.3
 
-  /vuex@3.6.2(vue@2.7.16):
-    resolution: {integrity: sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==}
-    peerDependencies:
-      vue: ^2.0.0
-    dependencies:
-      vue: 2.7.16
-    dev: false
-
-  /watch-size@2.0.0:
-    resolution: {integrity: sha512-M92R89dNoTPWyCD+HuUEDdhaDnh9jxPGOwlDc0u51jAgmjUvzqaEMynXSr3BaWs+QdHYk4KzibPy1TFtjLmOZQ==}
-    dev: false
-
-  /wisdom-ui@1.0.4-beta.6:
-    resolution: {integrity: sha512-7E9Q44CjpQdaxFapo0+u6gJqje7+gtTyahxamj5JgYUbuNSwdEOqPKwRNc7acWIQDRrwwsj3yrL0CCD5y2E6JQ==}
-    dependencies:
-      '@riophae/vue-treeselect': 0.4.0(vue@2.6.11)
-      core-js: 3.41.0
-      element-ui: 2.15.14(vue@2.6.11)
-      resize-observer-polyfill: 1.5.1
-      throttle-debounce: 3.0.1
-      vue: 2.6.11
-      vue-baidu-map: 0.21.22(vue@2.6.11)
-      vue-class-component: 7.2.6(vue@2.6.11)
-      vue-cropper: 0.5.11
-      vue-property-decorator: 8.5.1(vue@2.6.11)
-      vue-router: 3.6.5(vue@2.6.11)
-      vue-virtual-scroll-list: 2.3.5
-    dev: false
-
   /wmf@1.0.2:
     resolution: {integrity: sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==}
     engines: {node: '>=0.8'}

src/App.vue

@@ -1,13 +1,13 @@
 <!--
  * @Author: LiZhiWei
- * @Date: 2025-04-09 09:06:21
+ * @Date: 2025-04-23 09:33:35
  * @LastEditors: LiZhiWei
- * @LastEditTime: 2025-04-16 08:37:57
+ * @LastEditTime: 2025-04-23 15:48:07
  * @Description: 
 -->
 <template>
   <div id="app">
-    <router-view/>
+    <router-view />
   </div>
 </template>
 
@@ -15,34 +15,24 @@
 export default {
   name: "App",
   data() {
-    return {
-      excelInstance: null,
-    }
-  },
-  methods: {
-   
+    return {}
   },
+  methods: {},
 }
 </script>
 
-<style>
-#app {
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  color: #2c3e50;
-  margin: 20px;
-}
-
-.header {
-  margin-bottom: 20px;
+<style lang="less">
+html,
+body {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
 }
 
-#excel-container {
+#app {
   width: 100%;
-  min-height: 500px;
-  border: 1px solid #ddd;
-  padding: 10px;
-  box-sizing: border-box;
+  height: 100%;
 }
 </style>

src/components/file_detail/index.less

@@ -1,48 +0,0 @@
-
-.detail-box {
-  width: 350px;
-  height: 100%;
-  background: #f2f2f2;
-  border: 1px solid #ddd;
-  margin: 15px;
-  padding-bottom: 60px;
-  position: relative;
-  .header-box {
-    color: rgba(0, 0, 0, 0.85);
-    padding: 13px 24px;
-    font-size: 16px;
-    font-weight: 500;
-    text-align: center;
-    margin-bottom: 20px;
-    border-bottom: 1px solid #ddd;
-  }
-  .row-item {
-    display: flex;
-    line-height: 30px;
-    font-size: 14px;
-    .row-label {
-      width: 100px;
-      display: inline-block;
-      text-align: right;
-      margin-right: 20px;
-      font-weight: 500;
-    }
-    span {
-      &:nth-child(2) {
-        flex: 1;
-      }
-    }
-  }
-  .content-box {
-    height: ~'calc(100vh - 410px)';
-    // overflow: scroll;
-  }
-  .operation-footer {
-    text-align: center;
-    position: absolute;
-    bottom: 0;
-    padding: 20px 0;
-    width: 100%;
-  }
-}
-

src/components/file_detail/index.vue

@@ -1,318 +0,0 @@
-<!--
- * @Author: ChenYaJin
- * @Date: 2021-06-07 17:46:34
- * @LastEditors: LiZhiWei
- * @LastEditTime: 2025-04-16 10:20:31
- * @Description: 文件柜-文件详情
--->
-<template>
-  <div>
-    <div class="detail-box">
-      <header class="header-box">
-        <span class="title">文件信息</span>
-      </header>
-      <div class="content-box" v-loading="loading || loadingFile">
-        <div class="info-item">
-          <i class="el-icon-document"></i>
-          <div class="info-content">
-            <div class="label">文件名</div>
-            <div class="value">{{fileDetail.name || '-'}}</div>
-          </div>
-        </div>
-        <div class="info-item">
-          <i class="el-icon-tickets"></i>
-          <div class="info-content">
-            <div class="label">文件类型</div>
-            <div class="value">{{fileDetail.type || '-'}}</div>
-          </div>
-        </div>
-        <div class="info-item">
-          <i class="el-icon-files"></i>
-          <div class="info-content">
-            <div class="label">文件大小</div>
-            <div class="value">{{getFileSize || '-'}}</div>
-          </div>
-        </div>
-      </div>
-      <div class="operation-footer">
-        <el-button 
-          type="success" 
-          @click="onDownload" 
-          :loading="downloadLoading" 
-          v-hasAuth="'FileDownload'"
-          icon="el-icon-download">
-          下载
-        </el-button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="less" scoped>
-
-</style>
-<script>
-import { mapActions, mapState } from 'vuex'
-import { debounce } from 'lodash-es'
-
-import { downloadWithProgress } from '../../ libs/util'
-import commJs from '../../comm_js/index'
-import { downloadFile } from '../../ libs/file'
-
-// import EditFileModal from '../../components/file_list/modal/edit_file'
-// import PasswordConfirmModal from '../password_confirm'
-
-export default {
-  name: 'FileDetailModal',
-  components: {
-    // PasswordConfirmModal,
-    // EditFileModal
-  },
-  props: {
-    id: {
-      type: String,
-      default: null
-    },
-    showClose: {
-      type: Boolean,
-      default: false
-    },
-    file: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    },
-    loadingFile: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data () {
-    return {
-      fileDetail: {},
-      fileInfo: {
-        isShow: false,
-        row: this.file
-      },
-      passwordConfirmInfo: {
-        isShow: false,
-        id: '',
-        okType: 'danger',
-        tips: '',
-        row: {}
-      },
-      loading: false,
-      downloadLoading: false,
-      deleteLoading: false
-    }
-  },
-  computed: {
-    ...mapState({
-      directoryTree: state => state.fileManage.directoryTree
-    }),
-    getSecretLevel () {
-      return this.file.secretLevel === 'secret' ? '机密' : '普通'
-    },
-    getFileSize () {
-      return commJs.fileSizeFormat(this.file.size, 'KB')
-    }
-  },
-  watch: {
-    'file': {
-      handler (value) {
-        if (value) {
-          this.fileDetail = JSON.parse(JSON.stringify(value))
-        }
-      },
-      immediate: true,
-      deep: true
-    }
-  },
-  methods: {
-    ...mapActions('fileManage', ['getFileDetail', 'deleteFile']),
-    updateSuccess () {
-      this.$emit('updateSuccess')
-      this.getFileDetailFun()
-    },
-    getFileDetailFun () {
-      if (!this.id) {
-        return
-      }
-      this.loading = true
-      this.getFileDetail(this.id)
-        .then(res => {
-          this.fileDetail = res
-          const stringArr = commJs.getParentList(this.directoryTree, res.cabinetDirectoryId)
-          this.fileDetail.directoryName = stringArr.join('/')
-        })
-        .finally(_ => {
-          this.loading = false
-        })
-    },
-    handleClose () {
-      this.$emit('close')
-    },
-    toEdit () {
-      this.fileInfo.isShow = true
-      this.fileInfo.row = JSON.parse(JSON.stringify(this.fileDetail))
-    },
-    onClose () {
-      this.fileInfo.isShow = false
-      this.passwordConfirmInfo.isShow = false
-    },
-    onDownload () {
-      if (this.fileDetail.secretLevel === 'secret') {
-        this.passwordConfirmInfo = {
-          isShow: true,
-          type: 'download',
-          okType: 'warning',
-          tips: '为防止他人恶意下载导致文件泄露，请输入登录密码确认后再批量下载。下载后，请勿随意传播，如因个人传播泄密导致公司利益受损，将追求个人的法律责任。',
-          row: this.fileDetail
-        }
-      } else {
-        this.downloadFileFun2(this.fileDetail.url)
-      }
-    },
-    downloadFileFun: debounce(function (fileId) {
-      this.downloadLoading = true
-      const { name, type, size } = this.fileDetail
-      const url = `serve/cabinetFile/download/${fileId}`
-      const fileInfo = { name: name + '.' + type, size: size }
-      downloadWithProgress(url, this, 'downloadLoading', fileInfo)
-    }, 500),
-    downloadFileFun2 :debounce(function (url) {
-      this.downloadLoading = true
-      const { name, type, size } = this.fileDetail
-      const fileInfo = { name: name + '.' + type, size: size }
-      downloadWithProgress(url, this, 'downloadLoading', fileInfo)
-    }, 500),
-    onDeleteFile () {
-      if (this.fileDetail.secretLevel === 'secret') {
-        this.passwordConfirmInfo = {
-          isShow: true,
-          type: 'delete',
-          okType: 'danger',
-          tips: '删除后不可查看或下载，为防止他人恶意操作，请输入账登录密码确认删除。',
-          row: this.fileDetail
-        }
-      } else {
-        this.$confirm(
-          '删除后不可查看或下载，请谨慎操作！',
-          '确认删除文件？',
-          {
-            confirmButtonText: '确定',
-            cancelButtonText: '取消',
-            type: 'error'
-          })
-          .then(_ => {
-            this.deleteFileFun()
-          })
-      }
-    },
-    deleteFileFun (id) {
-      this.deleteLoading = true
-      this.deleteFile(this.fileDetail.id)
-        .then(res => {
-          this.$message.success('删除文件成功')
-          this.passwordConfirmInfo.isShow = false
-          this.back()
-        })
-        .finally(_ => {
-          this.deleteLoading = false
-        })
-    },
-    back () {
-      this.$emit('back', true) // 返回需要刷新数据
-    }
-  }
-}
-</script>
-<style lang="less">
-@import './index.less';
-.detail-box {
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
-  
-  .header-box {
-    padding: 20px;
-    border-bottom: 1px solid #ebeef5;
-    
-    .title {
-      font-size: 16px;
-      font-weight: 500;
-      color: #303133;
-      position: relative;
-      padding-left: 12px;
-      
-    //   &::before {
-    //     content: '';
-    //     position: absolute;
-    //     left: 0;
-    //     top: 50%;
-    //     transform: translateY(-50%);
-    //     width: 4px;
-    //     height: 16px;
-    //     background: #409eff;
-    //     border-radius: 2px;
-    //   }
-    }
-  }
-  
-  .content-box {
-    padding: 20px;
-    min-height: 200px;
-    
-    .info-item {
-      display: flex;
-      align-items: flex-start;
-      margin-bottom: 24px;
-      
-      &:last-child {
-        margin-bottom: 0;
-      }
-      
-      i {
-        font-size: 20px;
-        color: #409eff;
-        margin-right: 12px;
-        margin-top: 2px;
-      }
-      
-      .info-content {
-        flex: 1;
-        
-        .label {
-          font-size: 14px;
-          color: #909399;
-          margin-bottom: 8px;
-        }
-        
-        .value {
-          font-size: 14px;
-          color: #303133;
-          word-break: break-all;
-          line-height: 1.4;
-        }
-      }
-    }
-  }
-  
-  .operation-footer {
-    border-top: 1px solid #ebeef5;
-     .el-button {
-      padding: 9px 20px;
-      
-      [class^="el-icon-"] {
-        margin-right: 4px;
-      }
-    }
-  }
-}
-
-.el-loading-mask {
-  background-color: rgba(255, 255, 255, 0.9);
-  border-radius: 8px;
-}
-</style>

src/components/view_file/components/index.vue

@@ -1,474 +0,0 @@
-<!--
- * @Author: ChenYaJin
- * @Date: 2021-06-16 14:21:39
- * @LastEditors: LiZhiWei
- * @LastEditTime: 2025-04-17 12:11:59
- * @Description: 文件柜-预览文件
--->
-<template>
-    <div class="">
-        <w-header desc="预览文件详情。" class="header-rewrite">
-            <template>
-                <el-select v-model="downloadUrl" filterable allow-create default-first-option clearable
-                    placeholder="请选择或输入文件预览地址" class="input-with-button">
-                    <el-option v-for="item in urlOptions" :key="item.value" :label="item.label" :value="item.value">
-                        <span class="url-label">{{ item.label }}</span>
-                        <span class="url-value">{{ item.value }}</span>
-                    </el-option>
-                </el-select>
-                <el-button type="primary" :loading="downloading" @click="handleDownload" style="margin-left: 10px;">
-                    预览文件
-                </el-button>
-                <el-upload class="upload-demo" action="" :show-file-list="false" :auto-upload="false"
-                    :on-change="handleFileChange">
-                    <el-button type="primary" style="margin-left: 10px;">选择本地文件</el-button>
-                </el-upload>
-            </template>
-        </w-header>
-        <div class="modal-height">
-            <div class="file-box">
-                <p class="file-name">{{file.name}}</p>
-                <div class="view-wrapper">
-                    <div class="preview-wrapper" ref="wrapper" v-if="isAbleView">
-                        <div v-if="renderLoading && !showError" class="loading-process">
-                            <el-progress class="file-progress" :text-inside="true" :stroke-width="15"
-                                :percentage="percentage"></el-progress>
-                            <span class="load-text">
-                                <template v-if="renderLoading && loadLoading">文件加载中....</template>
-                                <template v-else>加载完成，文件显示中....</template>
-                            </span>
-                        </div>
-                        <template v-if="!showError">
-                            <div class="preview-inner" ref="preview-inner">
-                                <div class="preview-mark" ref="bg-mark" id="bg-mark"></div>
-                                <div v-show="!renderLoading" class="output" ref="output"></div>
-                            </div>
-                        </template>
-                        <div class="error-wrapper" v-show="showError && !loadLoading">
-                            <wc-page-tip tip="未找到相应文件信息" type="errorData" />
-                        </div>
-                    </div>
-                    <!-- <view-other-component v-else  :file="currentFile" /> -->
-                </div>
-            </div>
-            <div>
-                <file-detail-modal :id="fileId" :loadingFile="loadingFile" :file="currentFile"
-                    @updateSuccess="updateSuccess" @back="turnBack" />
-            </div>
-        </div>
-    </div>
-</template>
-<script>
-import { mapActions, mapState } from 'vuex'
-
-import commJs from '../../../comm_js/index'
-import file from '@/api/module/file.js'
-
-import { readBuffer, render } from './util'
-import FileDetailModal from '../../file_detail'
-import ViewOtherComponent from './vendors/other/index'
-import WcPageTip from '@/components/wc-page-tip'
-export default {
-  name: 'ViewFileComponent',
-  components: {
-    FileDetailModal,
-    WcPageTip,
-    ViewOtherComponent
-  },
-  props: {
-    fileId: {
-      type: String,
-      default: null
-    },
-    file: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    },
-    onTurnBack: Function
-  },
-  data () {
-    return {
-      currentFile: {},
-      reFreshFlag: false,
-      loadingFile: false,
-      loadLoading: false, // 文件加载
-      renderLoading: false, // 文件渲染
-      showError: false, // 文件出错
-      percentage: 0,
-      downloadUrl: '', // 添加输入框绑定值
-      downloading: false, // 添加加载状态
-      urlOptions: [
-        {
-          value: 'https://501351981.github.io/vue-office/examples/dist/static/test-files/test.pptx',
-          label: 'PPT示例文件'
-        },
-        {
-          value: 'https://501351981.github.io/vue-office/examples/dist/static/test-files/test.docx',
-          label: 'Word示例文件'
-        },
-        {   
-          value: 'https://501351981.github.io/vue-office/examples/dist/static/test-files/test.pdf',
-          label: 'PDF示例文件'
-        },
-        {
-          value: 'https://501351981.github.io/vue-office/examples/dist/static/test-files/test.xlsx',
-          label: 'Excel示例文件'
-        },
-        {
-       
-          value: 'https://fastly.picsum.photos/id/641/800/600.jpg?hmac=DJCZbdxrCoJPFV0jAsSIG1Ny0oc48zL3iqeMFqtKlD4',
-          label: '图片示例文件'
-        },
-      ]
-    }
-  },
-  computed: {
-    ...mapState({
-      directoryTree: state => state.fileManage.directoryTree
-    }),
-    // 可在在线预览文件类型
-    isAbleView () {
-      const lowType = (this.file.type || '').toLowerCase()
-      const typeObject = {
-        doc: ['docx'],
-        xlsx: ['xlsx'],
-        pdf: ['pdf'],
-        ppt: ['pptx'],
-        image: ['gif', 'jpg', 'jpeg', 'bmp', 'tiff', 'tif', 'png', 'svg'],
-        text: [ 'txt', 'json', 'js', 'css', 'java', 'py', 'html', 'jsx', 'ts', 'tsx', 'xml', 'md', 'log' ]
-      }
-      const ablePreviewTypes = Object.values(typeObject).flat()
-      return ablePreviewTypes.includes(lowType)
-    },
-    markMessage () {
-      const mobile = this.currentFile.mobile
-      const mobileSub = mobile ? mobile.substr(mobile.length - 4, 4) : ''
-      return this.currentFile.loginName + mobileSub
-    }
-  },
-  watch: {
-    'fileId': {
-      handler (value) {
-        if (value) {
-          this.getFileDetailFun()
-          if (this.isAbleView) {
-            this.loadFile()
-          }
-        }
-      },
-      immediate: true
-    },
-  },
-  methods: {
-    ...mapActions('fileManage', ['getFileDetail']),
-    updateSuccess () {
-      this.reFreshFlag = true
-    },
-    turnBack (reFresh) {
-      this.reFreshFlag = this.reFreshFlag || reFresh
-      this.onTurnBack(this.reFreshFlag)
-    },
-    getFileDetailFun () {
-      this.currentFile = { ...this.file }
-      this.reFreshFlag = false
-      this.loadingFile = true
-      try {
-        this.getFileDetail(this.fileId)
-          .then(res => {
-            this.currentFile = { ...this.file, ...res }
-            const stringArr = commJs.getParentList(this.directoryTree, res.cabinetDirectoryId)
-            this.currentFile.directoryName = stringArr.join('/')
-            this.currentFile.markMessage = this.markMessage
-          })
-          .finally(_ => {
-            this.loadingFile = false
-          })
-      } catch (error) {
-        this.loadingFile = false
-        this.$message.error('未查询到文件！')
-      }
-    },
-    async loadFile () {
-      this.loadLoading = true
-      this.renderLoading = true
-      this.showError = false
-      const progressFunc = progress => {
-        const percentage = Number(Number(progress.loaded / progress.total) * 100).toFixed(2)
-        this.percentage = Number(percentage)
-        if (progress.loaded >= progress.total) {
-          this.percentage = 100
-          this.loadLoading = false
-          const progressBar = document.querySelector('.file-progress .el-progress-bar__outer')
-          progressBar.style.backgroundColor = '#409eff'
-        }
-      }
-      file.previewCabinetFile(this.fileId, progressFunc).then(res => {
-        this.percentage = 100
-        const _this = this
-        readBuffer(res.data).then(arrayBuffer => {
-          this.renderResult(arrayBuffer, this.file.type)
-            .then(_ => {
-              const output = this.$refs['output']
-              const mark = this.$refs['bg-mark']
-              const isXlsx = ['xlsx'].includes(this.file.type)
-              if (isXlsx) {
-                // TODO 解决xlsx类型时，水印渲染限制table的滚动
-                _this.$refs['preview-inner'].removeChild(mark)
-                commJs.addWaterMarker(output, this.currentFile.markMessage)
-              }
-              if (mark && output && !isXlsx) {
-                mark.style.height = output.height + 'px'
-                commJs.addWaterMarker(mark, this.currentFile.markMessage)
-              }
-            })
-        })
-          .finally(_ => {
-            this.loadLoading = false
-            this.renderLoading = false
-          })
-      }, _ => {
-        this.loadLoading = false
-        this.showError = true
-      }).finally(_ => {
-        this.loadLoading = false
-        this.renderLoading = false
-      })
-    },
-    /**
-     * @{params} buffer 文件字节流
-     * @{params} extend 文件扩展名
-     */
-    renderResult (buffer, extend) {
-      const { output } = this.$refs
-      output.innerHTML = ''
-      const node = document.createElement('div')
-      const child = output.appendChild(node)
-      return new Promise((resolve, reject) =>
-        render(buffer, extend, child).then(resolve).catch(reject)
-      )
-    },
-    handleDownload() {
-      if (!this.downloadUrl) {
-        this.$message.warning('请输入文件预览地址')
-        return
-      }
-      
-      this.downloading = true
-      this.loadLoading = true
-      this.renderLoading = true
-      this.showError = false
-      
-      const progressFunc = progress => {
-        const percentage = Number(Number(progress.loaded / progress.total) * 100).toFixed(2)
-        this.percentage = Number(percentage)
-        if (progress.loaded >= progress.total) {
-          this.percentage = 100
-          this.loadLoading = false
-          const progressBar = document.querySelector('.file-progress .el-progress-bar__outer')
-          progressBar.style.backgroundColor = '#409eff'
-        }
-      }
-      
-      const config = {
-        onDownloadProgress: progressFunc,
-        timeout: 1000 * 60 * 10,
-        withCredentials: false, // Disable credentials for cross-origin requests
-        headers: {
-          'Accept': 'application/json;charset=utf-8'
-        }
-      }
-      
-      file.previewCabinetFileByUrl(this.downloadUrl, config)
-        .then(res => {
-          this.percentage = 100
-          // 从URL中获取文件名和类型
-          const urlParts = this.downloadUrl.split('/')
-          const fileName = urlParts[urlParts.length - 1]
-          const fileNameWithParams = urlParts[urlParts.length - 1]
-          const fileType = fileNameWithParams.split('?')[0].match(/\.([^.]+)$/)?.[1]?.toLowerCase() || ''
-          //文件大小
-          const fileSize = res.headers['content-length']/1024
-          // 更新文件信息
-          this.file = {
-            name: fileName.split('.')[0],
-            type: fileType,
-            url: this.downloadUrl,
-            size: fileSize
-          } 
-          this.currentFile = {...this.file }
-          return readBuffer(res.data).then(arrayBuffer => {
-            return this.renderResult(arrayBuffer, fileType)
-          })
-        })
-        .then(() => {
-        //   const output = this.$refs['output']
-        //   const mark = this.$refs['bg-mark']
-        //   const isXlsx = ['xlsx'].includes(this.file.type)
-          
-        //   if (isXlsx) {
-        //     this.$refs['preview-inner'].removeChild(mark)
-        //     commJs.addWaterMarker(output, this.currentFile.markMessage)
-        //   }
-        //   if (mark && output) {
-        //     mark.style.height = output.height + 'px'
-        //     commJs.addWaterMarker(mark, this.currentFile.markMessage)
-        //   }
-          
-          this.$message.success('文件加载成功')
-        })
-        .catch(error => {
-          this.$message.error('文件加载失败：' + error.message)
-          this.showError = true
-        })
-        .finally(() => {
-          this.downloading = false
-          this.loadLoading = false
-          this.renderLoading = false
-        })
-    },
-    async handleFileChange(file) {
-      if (!file) {
-        this.$message.warning('请选择文件')
-        return
-      }
-      
-      this.downloading = true
-      this.loadLoading = true
-      this.renderLoading = true
-      this.showError = false
-      this.percentage = 0
-      
-      try {
-        // 获取文件类型
-        const fileName = file.name
-        const fileType = fileName.split('.').pop().toLowerCase()
-        
-        // 检查文件类型是否支持
-        const typeObject = {
-          doc: ['docx'],
-          xlsx: ['xlsx'],
-          pdf: ['pdf'],
-          ppt: ['pptx'],
-          image: ['gif', 'jpg', 'jpeg', 'bmp', 'tiff', 'tif', 'png', 'svg'],
-          text: ['txt', 'json', 'js', 'css', 'java', 'py', 'html', 'jsx', 'ts', 'tsx', 'xml', 'md', 'log']
-        }
-        const ablePreviewTypes = Object.values(typeObject).flat()
-        
-        if (!ablePreviewTypes.includes(fileType)) {
-          throw new Error('不支持的文件类型')
-        }
-        
-        // 更新文件信息
-        this.file = {
-          name: fileName.split('.')[0],
-          type: fileType,
-          size: file.size / 1024
-        }
-        this.currentFile = { ...this.file }
-        
-        // 读取文件
-        const arrayBuffer = await new Promise((resolve, reject) => {
-          const reader = new FileReader()
-          reader.onload = () => resolve(reader.result)
-          reader.onerror = reject
-          reader.readAsArrayBuffer(file.raw)
-          
-          reader.onprogress = (event) => {
-            if (event.lengthComputable) {
-              const percentage = Number(Number(event.loaded / event.total) * 100).toFixed(2)
-              this.percentage = Number(percentage)
-            }
-          }
-        })
-        
-        // 渲染文件
-        await this.renderResult(arrayBuffer, fileType)
-        this.$message.success('文件加载成功')
-        
-      } catch (error) {
-        this.$message.error('文件加载失败：' + error.message)
-        this.showError = true
-      } finally {
-        this.downloading = false
-        this.loadLoading = false
-        this.renderLoading = false
-      }
-    }
-  }
-}
-</script>
-<style lang="less">
-.docx-wrapper {
-    background: unset !important;
-    padding: 0 !important;
-
-    &>section.docx {
-        background: unset !important;
-    }
-}
-</style>
-<style lang="less" scoped>
-@import './index.less';
-@deep: ~'>>>';
-
-@{deep} .header-rewrite {
-    margin-bottom: 0 !important;
-}
-
-.modal-height {
-    display: flex;
-    justify-content: space-between;
-
-    .file-box {
-        flex: 1;
-        padding: 15px 40px;
-        overflow: scroll;
-        text-align: center;
-
-        .file-name {
-            line-height: 36px;
-            text-align: center;
-            font-size: 16px;
-            font-weight: 500;
-        }
-
-        .view-wrapper {
-            position: relative;
-            width: 100%;
-            height: ~'calc(100% - 36px)';
-            overflow: hidden;
-        }
-
-        .output {
-            // border: 1px solid #ccc;
-        }
-    }
-}
-
-.input-with-button {
-    width: 400px;
-
-    .url-label {
-        float: left;
-        color: #606266;
-    }
-
-    .url-value {
-        float: right;
-        color: #909399;
-        font-size: 13px;
-    }
-}
-
-@{deep} .el-select-dropdown__item {
-    padding: 0 20px;
-    height: 40px;
-    line-height: 40px;
-}
-</style>
-.upload-demo {
-display: inline-block;
-}
-</style>

src/components/view_file/components/util.js

@@ -1,41 +0,0 @@
-import renders from './renders'
-
-export async function readBuffer (file) {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader()
-    reader.onload = loadEvent => resolve(loadEvent.target.result)
-    reader.onerror = e => reject(e)
-    reader.readAsArrayBuffer(file)
-  })
-}
-
-export async function readDataURL (buffer) {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader()
-    reader.onload = loadEvent => resolve(loadEvent.target.result)
-    reader.onerror = e => reject(e)
-    reader.readAsDataURL(new Blob([buffer]))
-  })
-}
-
-export async function readText (buffer) {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader()
-    reader.onload = loadEvent => resolve(loadEvent.target.result)
-    reader.onerror = e => reject(e)
-    reader.readAsText(new Blob([buffer]), 'utf-8')
-  })
-}
-
-export function getExtend (name) {
-  const dot = name.lastIndexOf('.')
-  return name.substr(dot + 1)
-}
-
-export async function render (buffer, type, target) {
-  const handler = renders[type]
-  if (handler) {
-    return handler(buffer, target)
-  }
-  return renders.error(buffer, target, type)
-}

src/components/view_file/components/vendors/image/ImageViewer.vue

@@ -1,37 +0,0 @@
-<!--
- * @Author: LiZhiWei
- * @Date: 2025-04-09 08:10:23
- * @LastEditors: LiZhiWei
- * @LastEditTime: 2025-04-16 11:44:40
- * @Description:
--->
-<template>
-    <div>
-        <!-- <img v-for="item in images" alt="图片" :src="item.src" :key="item.index" class="image" /> -->
-        <w-image :src="images[0]" :previewList="images" width="100%" height="100%" :preview="true" />
-    </div>
-</template>
-
-<script>
-export default {
-  name: 'ImageViewer',
-  props: {
-    image: String
-  },
-  computed: {
-    images () {
-        console.log('first', [this.image])
-      return this.image ? [this.image] : []
-    }
-  }
-}
-</script>
-
-<style scoped>
-.image {
-    display: block;
-    width: auto;
-    height: 100%;
-    margin: 0 auto;
-}
-</style>

src/components/view_file/components/vendors/other/index.vue

@@ -1,61 +0,0 @@
-<!--
- * @Author: ChenYaJin
- * @Date: 2021-06-16 14:46:07
- * @LastEditors: LiZhiWei
- * @LastEditTime: 2025-04-15 15:37:16
- * @Description: 文件柜-预览其他
--->
-<template>
-  <div class="view-other">
-    <el-image :src="viewOffImage" class="view-off-icon">
-        <div slot="error" class="image-slot">
-          <i class="el-icon-picture-outline"></i>
-        </div>
-      </el-image>
-      <p>{{file.name}}.{{file.type}}<span class="size-item">{{getFileSize}}</span></p>
-      <p><big><strong>该类型文件不支持在线预览，请下载后查看。</strong></big></p>
-  </div>
-</template>
-<script>
-import commJs from '@/comm_js/index'
-import viewOffImage from '../../../assets/view_off.svg'
-
-export default {
-  name: 'ViewOtherComponent',
-  props: {
-    file: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    }
-  },
-  data () {
-    return {
-      viewOffImage
-    }
-  },
-  computed: {
-    getFileSize () {
-      return commJs.fileSizeFormat(this.file.size, 'KB')
-    }
-  },
-  methods: {
-  },
-  mounted () {
-  }
-}
-</script>
-<style lang="less" scoped>
-.view-other {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  .size-item {
-    margin-left: 10px;
-  }
-}
-
-</style>

src/components/view_file/index.vue

@@ -1,65 +1,157 @@
-<!--
- * @Author: ChenYaJin
- * @Date: 2021-05-28 11:21:37
- * @LastEditors: ChenYaJin
- * @LastEditTime: 2021-06-21 10:33:48
- * @Description: 文件柜-预览文件主页
--->
 <template>
-  <w-layout>
-    <w-content :tabList="tabList" @change="onTabChange"></w-content>
-  </w-layout>
+  <div class="container">
+    <div class="modal-height">
+      <div class="file-box">
+        <p class="file-name" v-show="!renderLoading">{{ file.filename }}</p>
+        <div class="view-wrapper">
+          <div class="preview-wrapper" ref="wrapper" v-if="isAbleView">
+            <div class="preview-inner" ref="preview-inner">
+              <div class="preview-mark" ref="bg-mark" id="bg-mark"></div>
+              <div class="output" v-show="!renderLoading" ref="output"></div>
+            </div>
+          </div>
+          <view-other-component
+            v-else-if="file.type && !isAbleView"
+            :file="file"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
-import ViewFileComponent from './components/index'
-
+import commJs from "@/comm_js"
+import { render } from "@/components/view_file/util"
+import ViewOtherComponent from "@/components/view_file/vendors/other/index"
 export default {
-  name: 'ViewFileIndex',
+  name: "ViewFileComponent",
+  components: {
+    ViewOtherComponent,
+  },
   props: {
-    fileId: {
-      type: String,
-      default: null
-    },
     file: {
       type: Object,
       default: () => {
         return {}
-      }
-    }
+      },
+    },
+    renderLoading: {
+      type: Boolean,
+      default: false,
+    },
   },
-  data () {
-    const _this = this
+  data() {
     return {
-      activeTab: 'fileDetail',
-      currentFile: {},
-      tabList: [
-        {
-          name: '文件预览',
-          key: 'fileDetail',
-          component: ViewFileComponent,
-          props: {
-            get activeTab () {
-              return _this.activeTab
-            },
-            get fileId () {
-              return _this.fileId
-            },
-            get file () {
-              return _this.file
-            },
-            onTurnBack: _this.handleTurnBack
-          }
-        }
-      ]
+      reFreshFlag: false,
     }
   },
+  computed: {
+    // 可在在线预览文件类型
+    isAbleView() {
+      const lowType = (this.file.type || "").toLowerCase()
+      const typeObject = {
+        doc: ["docx"],
+        xlsx: ["xlsx"],
+        pdf: ["pdf"],
+        ppt: ["pptx"],
+        image: ["gif", "jpg", "jpeg", "bmp", "tiff", "tif", "png", "svg"],
+        text: [
+          "txt",
+          "json",
+          "js",
+          "css",
+          "java",
+          "py",
+          "html",
+          "jsx",
+          "ts",
+          "tsx",
+          "xml",
+          "md",
+          "log",
+        ],
+      }
+      const ablePreviewTypes = Object.values(typeObject).flat()
+      return ablePreviewTypes.includes(lowType)
+    },
+  },
   methods: {
-    onTabChange (tab) {
-      this.activeTab = tab
+    /**
+     * @{params} buffer 文件字节流
+     * @{params} extend 文件扩展名
+     */
+    renderResult(buffer, extend) {
+      const { output } = this.$refs
+      output.innerHTML = ""
+      const node = document.createElement("div")
+      const child = output.appendChild(node)
+      return new Promise((resolve, reject) =>
+        render(buffer, extend, child).then(resolve).catch(reject)
+      )
     },
-    handleTurnBack (reFresh) {
-      this.$emit('turnBack', reFresh)
+  },
+  watch: {
+    file: {
+      handler(newFile) {
+        if (newFile && newFile.type) {
+          try {
+            this.renderResult(newFile.fileBuffer, newFile.type)
+          } catch (error) {
+            console.warn(error)
+          }
+        }
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+}
+</script>
+<style lang="less">
+.container {
+  width: 100%;
+  height: 100%;
+  .docx-wrapper {
+    background: unset !important;
+    padding: 0 !important;
+
+    & > section.docx {
+      background: unset !important;
     }
   }
 }
-</script>
+</style>
+<style lang="less" scoped>
+@import url("./index.less");
+@deep: ~">>>";
+
+@{deep} .header-rewrite {
+  margin-bottom: 0 !important;
+}
+
+.modal-height {
+  display: flex;
+  justify-content: space-between;
+  height: 100%;
+  .file-box {
+    flex: 1;
+    padding: 15px 40px;
+    overflow: scroll;
+    text-align: center;
+
+    .file-name {
+      line-height: 36px;
+      text-align: center;
+      font-size: 16px;
+      font-weight: 500;
+    }
+
+    .view-wrapper {
+      position: relative;
+      width: 100%;
+      height: ~"calc(100% - 36px)";
+      overflow: hidden;
+    }
+  }
+}
+</style>

src/components/view_file/util.js

@@ -0,0 +1,41 @@
+import renders from "./renders"
+
+export async function readBuffer(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = (loadEvent) => resolve(loadEvent.target.result)
+    reader.onerror = (e) => reject(e)
+    reader.readAsArrayBuffer(file)
+  })
+}
+
+export async function readDataURL(buffer) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = (loadEvent) => resolve(loadEvent.target.result)
+    reader.onerror = (e) => reject(e)
+    reader.readAsDataURL(new Blob([buffer]))
+  })
+}
+
+export async function readText(buffer) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = (loadEvent) => resolve(loadEvent.target.result)
+    reader.onerror = (e) => reject(e)
+    reader.readAsText(new Blob([buffer]), "utf-8")
+  })
+}
+
+export function getExtend(name) {
+  const dot = name.lastIndexOf(".")
+  return name.substr(dot + 1)
+}
+
+export async function render(buffer, type, target) {
+  const handler = renders[type]
+  if (handler) {
+    return handler(buffer, target)
+  }
+  return renders.error(buffer, target, type)
+}

src/components/view_file/vendors/image/ImageViewer.vue

@@ -0,0 +1,42 @@
+<!--
+ * @Author: LiZhiWei
+ * @Date: 2025-04-09 08:10:23
+ * @LastEditors: LiZhiWei
+ * @LastEditTime: 2025-04-23 16:16:22
+ * @Description:
+-->
+<template>
+  <div>
+    <!-- <img v-for="item in images" alt="图片" :src="item.src" :key="item.index" class="image" /> -->
+    <el-image
+      :src="images[0]"
+      :preview-src-list="images"
+      width="100%"
+      height="100%"
+      :preview="true"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ImageViewer",
+  props: {
+    image: String,
+  },
+  computed: {
+    images() {
+      return this.image ? [this.image] : []
+    },
+  },
+}
+</script>
+
+<style scoped>
+.image {
+  display: block;
+  width: auto;
+  height: 100%;
+  margin: 0 auto;
+}
+</style>

src/components/view_file/vendors/other/index.vue

@@ -0,0 +1,63 @@
+<!--
+ * @Author: ChenYaJin
+ * @Date: 2021-06-16 14:46:07
+ * @LastEditors: LiZhiWei
+ * @LastEditTime: 2025-04-23 15:32:26
+ * @Description: 文件柜-预览其他
+-->
+<template>
+  <div class="view-other">
+    <el-image :src="viewOffImage" class="view-off-icon">
+      <div slot="error" class="image-slot">
+        <i class="el-icon-picture-outline"></i>
+      </div>
+    </el-image>
+    <p>
+      {{ file.name }}.{{ file.type
+      }}<span class="size-item">{{ getFileSize }}</span>
+    </p>
+    <p>
+      <big><strong>该类型文件不支持在线预览，请下载后查看。</strong></big>
+    </p>
+  </div>
+</template>
+<script>
+import commJs from "@/comm_js/index"
+import viewOffImage from "../../assets/view_off.svg"
+
+export default {
+  name: "ViewOtherComponent",
+  props: {
+    file: {
+      type: Object,
+      default: () => {
+        return {}
+      },
+    },
+  },
+  data() {
+    return {
+      viewOffImage,
+    }
+  },
+  computed: {
+    getFileSize() {
+      return commJs.fileSizeFormat(this.file.size, "KB")
+    },
+  },
+  methods: {},
+  mounted() {},
+}
+</script>
+<style lang="less" scoped>
+.view-other {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  .size-item {
+    margin-left: 10px;
+  }
+}
+</style>

src/components/view_file/components/vendors/xlsx/Table.vue → src/components/view_file/vendors/xlsx/Table.vue

@@ -1,54 +1,54 @@
 <template>
-    <div>
-        <div ref="spreadsheet" class="spreadsheet-container" id="spreadsheet"></div>
-    </div>
+  <div>
+    <div ref="spreadsheet" class="spreadsheet-container" id="spreadsheet"></div>
+  </div>
 </template>
 
 <script>
-import Spreadsheet from 'x-data-spreadsheet'
-import { indexedColors } from './color'
-import { zhCN } from 'handsontable/i18n'
-import _ from 'lodash'
-import tinycolor from 'tinycolor2'
-Spreadsheet.locale('zh-cn', zhCN)
+import Spreadsheet from "x-data-spreadsheet"
+import { indexedColors } from "./color"
+import { zhCN } from "handsontable/i18n"
+import _ from "lodash-es"
+import tinycolor from "tinycolor2"
+Spreadsheet.locale("zh-cn", zhCN)
 
 export default {
-  name: 'ExcelViewer',
+  name: "ExcelViewer",
   props: {
-    workbook: Object
+    workbook: Object,
   },
-  data () {
+  data() {
     return {
       spreadsheet: null,
-      themeColors: []
+      themeColors: [],
     }
   },
-  mounted () {
+  mounted() {
     this.initSpreadsheet()
   },
   watch: {
-    workbook () {
+    workbook() {
       this.parseTheme()
       this.updateTable()
-    }
+    },
   },
   computed: {
-    sheets () {
+    sheets() {
       if (this.workbook.worksheets) {
         return this.workbook.worksheets.filter((sheet) => sheet._rows.length)
       }
       return []
-    }
+    },
   },
   methods: {
-    initSpreadsheet () {
+    initSpreadsheet() {
       // 优化性能配置
       this.spreadsheet = new Spreadsheet(this.$refs.spreadsheet, {
         view: {
           height: () => document.documentElement.clientHeight - 120,
-          width: () => document.documentElement.clientWidth - 40
+          width: () => document.documentElement.clientWidth - 40,
         },
-        mode: 'read', // 只读模式
+        mode: "read", // 只读模式
         showToolbar: false,
         showGrid: true,
         showContextmenu: false, // 禁用右键菜单提高性能
@@ -57,28 +57,28 @@ export default {
         row: {
           len: 100, // 限制初始行数
           height: 25, // 固定行高
-          autoHeight: true
+          autoHeight: true,
         },
         col: {
           len: 26, // 限制初始列数
           width: 50, // 固定列宽
           indexWidth: 60, // 行索引宽度
           minWidth: 30, // 最小列宽
-          autoWidth: true // 自动调整列宽
+          autoWidth: true, // 自动调整列宽
         },
         style: {
           // 确保默认样式正确
-          bgcolor: '#ffffff',
-          color: '#333333',
-          align: 'left',
-          valign: 'middle',
+          bgcolor: "#ffffff",
+          color: "#333333",
+          align: "left",
+          valign: "middle",
           textwrap: false,
           strike: false,
           underline: false,
           italic: false,
           bold: false,
-          fontSize: 12
-        }
+          fontSize: 12,
+        },
       }).loadData({})
 
       // 延迟加载数据，避免初始化时卡死
@@ -87,22 +87,22 @@ export default {
         this.updateSpreadsheet()
       })
     },
-    updateSpreadsheet () {
+    updateSpreadsheet() {
       if (!this.spreadsheet) return
       // 显示加载状态
-      this.$refs.spreadsheet.classList.add('loading')
+      this.$refs.spreadsheet.classList.add("loading")
       try {
         const data = this.convertWorksheetToData()
         if (this.spreadsheet) {
-          this.$refs.spreadsheet.innerHTML = ''
+          this.$refs.spreadsheet.innerHTML = ""
         }
         // 重新创建实例
         this.spreadsheet = new Spreadsheet(this.$refs.spreadsheet, {
           view: {
             height: () => document.documentElement.clientHeight - 120,
-            width: () => document.documentElement.clientWidth - 40
+            width: () => document.documentElement.clientWidth - 40,
           },
-          mode: 'read',
+          mode: "read",
           showToolbar: false,
           showGrid: true,
           showContextmenu: false,
@@ -111,46 +111,41 @@ export default {
           row: {
             len: 100,
             height: 25,
-            autoHeight: true
+            autoHeight: true,
           },
           col: {
             len: 26,
             width: 50,
             indexWidth: 60,
             minWidth: 30,
-            autoWidth: true
-          }
+            autoWidth: true,
+          },
         })
           .loadData(data)
-          .change((data) => {
-            console.log('数据已更改:', data)
-          })
-      } catch (error) {
-        console.error('加载Excel数据失败:', error)
       } finally {
-        this.$refs.spreadsheet.classList.remove('loading')
+        this.$refs.spreadsheet.classList.remove("loading")
       }
     },
 
-    convertWorksheetToData () {
+    convertWorksheetToData() {
       let data = []
       this.sheets.forEach((sheet) => {
         const sheetIndex = sheet.id
         const sheetData = {
           name: sheet._name,
-          freeze: 'A1',
+          freeze: "A1",
           styles: [
             {
-              bgcolor: '#ffffff',
-              color: '#000000',
-              align: 'left',
-              valign: 'middle',
-              fontSize: 12
-            }
+              bgcolor: "#ffffff",
+              color: "#000000",
+              align: "left",
+              valign: "middle",
+              fontSize: 12,
+            },
           ],
           merges: [],
           rows: {},
-          cols: {}
+          cols: {},
         }
         try {
           // 预处理合并单元格
@@ -163,11 +158,10 @@ export default {
           this.processColumns(sheet, sheetData)
           data.push(sheetData)
         } catch (error) {
-          console.error('转换工作表数据失败:', error)
           data[sheetIndex] = {
-            name: sheet._name || 'Sheet1',
+            name: sheet._name || "Sheet1",
             rows: {},
-            cols: {}
+            cols: {},
           }
         }
       })
@@ -175,25 +169,21 @@ export default {
     },
 
     // 处理合并单元格
-    processMerges (sheet, sheetData) {
+    processMerges(sheet, sheetData) {
       if (!sheet._merges) return
 
       Object.values(sheet._merges).forEach((merge) => {
-        try {
-          const { top, left, bottom, right } = merge
+        const { top, left, bottom, right } = merge
           sheetData.merges.push(
             `${this.columnIndexToLetter(
               left - 1
             )}${top}:${this.columnIndexToLetter(right - 1)}${bottom}`
           )
-        } catch (e) {
-          console.warn('处理合并单元格出错:', e)
-        }
       })
     },
 
     // 处理行和单元格数据
-    processRows (sheet, sheetData, styleCache) {
+    processRows(sheet, sheetData, styleCache) {
       // 增加最大行数限制，确保所有行都能显示
       const maxRows = Math.min(sheet.rowCount || 50, 100)
 
@@ -205,7 +195,7 @@ export default {
         let maxHeight = 25 // 最小行高
         sheetData.rows[rowIndex] = {
           cells: {},
-          height: maxHeight
+          height: maxHeight,
         }
 
         // 如果行不存在，创建一个空行
@@ -219,11 +209,11 @@ export default {
         for (let colIndex = 0; colIndex < maxCols; colIndex++) {
           try {
             const cell = row.getCell(colIndex + 1)
-            if (!cell || (cell.type === 'null' && !cell.style)) {
+            if (!cell || (cell.type === "null" && !cell.style)) {
               // 对于空单元格，添加一个默认样式的空单元格
               sheetData.rows[rowIndex].cells[colIndex] = {
-                text: '',
-                style: 0
+                text: "",
+                style: 0,
               }
               continue
             }
@@ -252,26 +242,20 @@ export default {
                 style: styleIndex,
                 merge: [
                   mergeInfo.bottom - mergeInfo.top,
-                  mergeInfo.right - mergeInfo.left
-                ]
+                  mergeInfo.right - mergeInfo.left,
+                ],
               }
             } else {
               sheetData.rows[rowIndex].cells[colIndex] = {
                 text: cellText,
-                style: styleIndex
+                style: styleIndex,
               }
             }
           } catch (error) {
-            console.warn(
-              '处理单元格时出错:',
-              error,
-              '位置:',
-              rowIndex + 1,
-              colIndex + 1
-            )
+
             sheetData.rows[rowIndex].cells[colIndex] = {
-              text: '',
-              style: 0
+              text: "",
+              style: 0,
             }
           }
         }
@@ -282,20 +266,20 @@ export default {
     },
 
     // 获取单元格文本和计算高度
-    getCellTextAndHeight (cell) {
-      let cellText = ''
+    getCellTextAndHeight(cell) {
+      let cellText = ""
       try {
         // 处理不同类型的单元格内容
         if (!cell || cell.value === null || cell.value === undefined) {
-          cellText = ''
+          cellText = ""
         } else if (
-          cell.type === 'date' ||
+          cell.type === "date" ||
           (cell.numFmt &&
-            (cell.numFmt.includes('yy') ||
-              cell.numFmt.includes('mm') ||
-              cell.numFmt.includes('dd') ||
-              cell.numFmt.includes('h') ||
-              cell.numFmt.includes('m:s')))
+            (cell.numFmt.includes("yy") ||
+              cell.numFmt.includes("mm") ||
+              cell.numFmt.includes("dd") ||
+              cell.numFmt.includes("h") ||
+              cell.numFmt.includes("m:s")))
         ) {
           // 处理日期类型或带有日期格式的数字
           try {
@@ -303,7 +287,7 @@ export default {
             let date
             if (cell.value instanceof Date) {
               date = cell.value
-            } else if (typeof cell.value === 'number') {
+            } else if (typeof cell.value === "number") {
               // Excel日期是从1900年1月1日开始的天数
               // 需要转换为JavaScript日期
               const excelEpoch = new Date(1899, 11, 30) // Excel的起始日期
@@ -317,48 +301,48 @@ export default {
             if (!isNaN(date.getTime())) {
               // 格式化日期
               const year = date.getFullYear()
-              const month = (date.getMonth() + 1).toString().padStart(2, '0')
-              const day = date.getDate().toString().padStart(2, '0')
+              const month = (date.getMonth() + 1).toString().padStart(2, "0")
+              const day = date.getDate().toString().padStart(2, "0")
 
               // 检查是否需要显示时间
               if (
                 cell.numFmt &&
-                (cell.numFmt.includes('h') || cell.numFmt.includes('s'))
+                (cell.numFmt.includes("h") || cell.numFmt.includes("s"))
               ) {
-                const hour = date.getHours().toString().padStart(2, '0')
-                const minute = date.getMinutes().toString().padStart(2, '0')
-                const second = date.getSeconds().toString().padStart(2, '0')
+                const hour = date.getHours().toString().padStart(2, "0")
+                const minute = date.getMinutes().toString().padStart(2, "0")
+                const second = date.getSeconds().toString().padStart(2, "0")
                 cellText = `${year}/${month}/${day} ${hour}:${minute}:${second}`
               } else {
                 cellText = `${year}/${month}/${day}`
               }
             } else {
               // 如果不是有效日期，使用原始文本
-              cellText = String(cell.text || cell.value || '')
+              cellText = String(cell.text || cell.value || "")
             }
           } catch (e) {
-            console.warn('日期转换错误:', e)
-            cellText = String(cell.text || cell.value || '')
+        
+            cellText = String(cell.text || cell.value || "")
           }
-        } else if (typeof cell.value === 'object' && cell.value !== null) {
+        } else if (typeof cell.value === "object" && cell.value !== null) {
           if (cell.value.hyperlink) {
-            cellText = '[链接]'
+            cellText = "[链接]"
           } else if (cell.value.image) {
-            cellText = '[图片]'
+            cellText = "[图片]"
           } else if (cell.value.richText) {
             cellText = cell.value.richText
-              .map((t) => String(t?.text || ''))
-              .join('')
+              .map((t) => String(t?.text || ""))
+              .join("")
           } else {
-            cellText = String(cell.text || '')
+            cellText = String(cell.text || "")
           }
         } else if (cell.formula) {
           // 检查公式结果是否可能是日期
           if (
             cell.numFmt &&
-            (cell.numFmt.includes('yy') ||
-              cell.numFmt.includes('mm') ||
-              cell.numFmt.includes('dd'))
+            (cell.numFmt.includes("yy") ||
+              cell.numFmt.includes("mm") ||
+              cell.numFmt.includes("dd"))
           ) {
             try {
               // 尝试将结果转换为日期
@@ -369,37 +353,37 @@ export default {
 
               if (!isNaN(date.getTime())) {
                 const year = date.getFullYear()
-                const month = (date.getMonth() + 1).toString().padStart(2, '0')
-                const day = date.getDate().toString().padStart(2, '0')
+                const month = (date.getMonth() + 1).toString().padStart(2, "0")
+                const day = date.getDate().toString().padStart(2, "0")
                 cellText = `${year}-${month}-${day}`
               } else {
-                cellText = String(cell.result || cell.value || '')
+                cellText = String(cell.result || cell.value || "")
               }
             } catch (e) {
-              cellText = String(cell.result || cell.value || '')
+              cellText = String(cell.result || cell.value || "")
             }
           } else {
             cellText =
               cell.result !== undefined && cell.result !== null
                 ? String(cell.result)
-                : String(cell.value || '')
+                : String(cell.value || "")
           }
         } else {
           cellText =
             cell.text !== undefined && cell.text !== null
               ? String(cell.text)
               : cell.value !== undefined && cell.value !== null
-                ? String(cell.value)
-                : ''
+              ? String(cell.value)
+              : ""
         }
       } catch (e) {
-        console.warn('获取单元格文本出错:', e)
-        cellText = '[格式错误]'
+  
+        cellText = "[格式错误]"
       }
 
       // 计算行高
-      const lineBreaks = ((cellText || '').match(/\n/g) || []).length + 1
-      const chars = [...(cellText || '')]
+      const lineBreaks = ((cellText || "").match(/\n/g) || []).length + 1
+      const chars = [...(cellText || "")]
       const lines = Math.ceil(chars.length / 40)
       const neededHeight = Math.max(lineBreaks, lines) * 20
 
@@ -407,34 +391,34 @@ export default {
     },
 
     // 获取单元格样式
-    getCellStyle (cell, styleCache, styles) {
+    getCellStyle(cell, styleCache, styles) {
       // 创建样式对象
       const cellStyle = {
-        bgcolor: '#ffffff',
-        color: '#000000',
-        align: cell.alignment?.horizontal || 'left',
-        valign: cell.alignment?.vertical || 'middle',
+        bgcolor: "#ffffff",
+        color: "#000000",
+        align: cell.alignment?.horizontal || "left",
+        valign: cell.alignment?.vertical || "middle",
         fontSize: cell.font?.size || 12,
         textwrap: true,
         bold: cell.font?.bold,
         italic: cell.font?.italic,
         underline: false,
-        strike: false
+        strike: false,
       }
 
       // 处理背景色
-      if (cell.fill && cell.fill.type === 'pattern') {
+      if (cell.fill && cell.fill.type === "pattern") {
         const fgColor = cell.fill.fgColor || {}
 
         // 处理索引颜色
-        if (typeof fgColor.indexed === 'number') {
+        if (typeof fgColor.indexed === "number") {
           const indexedColor = indexedColors[fgColor.indexed]
           if (indexedColor) {
             cellStyle.bgcolor = `#${indexedColor}`
           }
         }
         // 处理主题颜色
-        else if (typeof fgColor.theme === 'number') {
+        else if (typeof fgColor.theme === "number") {
           // Excel主题颜色索引映射
           const themeColorMap = {
             0: 1, // 浅色1
@@ -446,7 +430,7 @@ export default {
             6: 6, // 强调色3
             7: 7, // 强调色4
             8: 8, // 强调色5
-            9: 9 // 强调色6
+            9: 9, // 强调色6
           }
 
           const mappedIndex =
@@ -458,7 +442,7 @@ export default {
             let color = `#${this.themeColors[mappedIndex]}`
 
             // 应用色调调整
-            if (typeof fgColor.tint === 'number' && fgColor.tint !== 0) {
+            if (typeof fgColor.tint === "number" && fgColor.tint !== 0) {
               color = this.applyTint(color, fgColor.tint)
             }
 
@@ -483,14 +467,14 @@ export default {
         const fontColor = cell.font.color
 
         // 处理索引颜色
-        if (typeof fontColor.indexed === 'number') {
+        if (typeof fontColor.indexed === "number") {
           const indexedColor = indexedColors[fontColor.indexed]
           if (indexedColor) {
             cellStyle.color = `#${indexedColor}`
           }
         }
         // 处理主题颜色
-        else if (typeof fontColor.theme === 'number') {
+        else if (typeof fontColor.theme === "number") {
           // Excel主题颜色索引映射
           const themeColorMap = {
             0: 1, // 浅色1
@@ -502,7 +486,7 @@ export default {
             6: 6, // 强调色3
             7: 7, // 强调色4
             8: 8, // 强调色5
-            9: 9 // 强调色6
+            9: 9, // 强调色6
           }
 
           const mappedIndex =
@@ -514,7 +498,7 @@ export default {
             let color = `#${this.themeColors[mappedIndex]}`
 
             // 应用色调调整
-            if (typeof fontColor.tint === 'number' && fontColor.tint !== 0) {
+            if (typeof fontColor.tint === "number" && fontColor.tint !== 0) {
               color = this.applyTint(color, fontColor.tint)
             }
 
@@ -547,7 +531,7 @@ export default {
 
       return styleIndex
     },
-    applyTint (hexColor, tint) {
+    applyTint(hexColor, tint) {
       try {
         // 将十六进制颜色转换为RGB
         const color = tinycolor(hexColor)
@@ -574,13 +558,13 @@ export default {
         // 返回调整后的颜色
         return tinycolor({ r, g, b }).toHexString()
       } catch (e) {
-        console.warn('应用色调调整出错:', e)
+      
         return hexColor
       }
     },
 
     // 处理列宽
-    processColumns (sheet, sheetData) {
+    processColumns(sheet, sheetData) {
       const maxCols = Math.min(sheet.columnCount || 26, 50)
       const colWidthCache = new Map()
       const mergedCols = new Set()
@@ -600,27 +584,27 @@ export default {
             const cell = row.getCell(colIndex + 1)
             if (!cell) continue
             // 安全获取单元格文本
-            let cellText = ''
+            let cellText = ""
             try {
               if (cell.text !== undefined && cell.text !== null) {
                 cellText = String(cell.text)
               } else if (cell.value !== undefined && cell.value !== null) {
-                if (typeof cell.value === 'object') {
+                if (typeof cell.value === "object") {
                   cellText = cell.value?.richText
                     ? cell.value.richText
-                      .map((t) => String(t?.text || ''))
-                      .join('')
+                        .map((t) => String(t?.text || ""))
+                        .join("")
                     : cell.value?.hyperlink
-                      ? '[链接]'
-                      : cell.value?.image
-                        ? '[图片]'
-                        : ''
+                    ? "[链接]"
+                    : cell.value?.image
+                    ? "[图片]"
+                    : ""
                 } else {
                   cellText = String(cell.value)
                 }
               }
             } catch (e) {
-              cellText = ''
+              cellText = ""
             }
             // 计算文本宽度
             if (cellText) {
@@ -682,12 +666,12 @@ export default {
         // 设置合理的列宽范围
         const width = Math.max(40, Math.min(300, maxWidth * 9))
         sheetData.cols[colIndex] = {
-          width: width
+          width: width,
         }
       }
     },
     // ARGB 转 Hex 颜色方法
-    convertArgbToHex (argb) {
+    convertArgbToHex(argb) {
       if (!argb) return null
       try {
         const matches =
@@ -695,15 +679,15 @@ export default {
         if (!matches) return null
         return `#${matches[2]}${matches[3]}${matches[4]}`
       } catch (e) {
-        console.error('Color conversion error:', e)
+     
         return null
       }
     },
-    columnIndexToLetter (index) {
+    columnIndexToLetter(index) {
       let temp
-      let letter = ''
+      let letter = ""
       // 修复列索引转字母的算法
-      if (index < 0) return ''
+      if (index < 0) return ""
       do {
         temp = index % 26
         letter = String.fromCharCode(temp + 65) + letter
@@ -711,31 +695,31 @@ export default {
       } while (index >= 0)
       return letter
     },
-    parseTheme () {
+    parseTheme() {
       const theme = this.workbook._themes?.theme1
       if (!theme) {
         // Office默认主题颜色
         this.themeColors = [
-          'FFFFFF', // 白色 - 浅色1
-          '000000', // 黑色 - 深色1
-          'EEECE1', // 浅灰 - 浅色2
-          '1F497D', // 深灰 - 深色2
-          '4F81BD', // 蓝色 - 强调色1
-          'C0504D', // 红色 - 强调色2
-          '9BBB59', // 绿色 - 强调色3
-          '8064A2', // 紫色 - 强调色4
-          '4BACC6', // 青色 - 强调色5
-          'F79646' // 橙色 - 强调色6
+          "FFFFFF", // 白色 - 浅色1
+          "000000", // 黑色 - 深色1
+          "EEECE1", // 浅灰 - 浅色2
+          "1F497D", // 深灰 - 深色2
+          "4F81BD", // 蓝色 - 强调色1
+          "C0504D", // 红色 - 强调色2
+          "9BBB59", // 绿色 - 强调色3
+          "8064A2", // 紫色 - 强调色4
+          "4BACC6", // 青色 - 强调色5
+          "F79646", // 橙色 - 强调色6
         ]
         return
       }
       try {
         const parser = new DOMParser()
-        const doc = parser.parseFromString(theme, 'text/xml')
+        const doc = parser.parseFromString(theme, "text/xml")
         // 获取颜色方案元素
-        const clrScheme = doc.getElementsByTagName('a:clrScheme')[0]
+        const clrScheme = doc.getElementsByTagName("a:clrScheme")[0]
         if (!clrScheme) {
-          throw new Error('找不到颜色方案元素')
+          throw new Error("找不到颜色方案元素")
         }
         // 初始化主题颜色数组
         this.themeColors = []
@@ -744,80 +728,80 @@ export default {
         for (const element of colorElements) {
           let colorValue = null
           // 查找颜色定义元素
-          const srgbClr = element.getElementsByTagName('a:srgbClr')[0]
-          const sysClr = element.getElementsByTagName('a:sysClr')[0]
+          const srgbClr = element.getElementsByTagName("a:srgbClr")[0]
+          const sysClr = element.getElementsByTagName("a:sysClr")[0]
           if (srgbClr) {
-            colorValue = srgbClr.getAttribute('val')
+            colorValue = srgbClr.getAttribute("val")
           } else if (sysClr) {
             colorValue =
-              sysClr.getAttribute('lastClr') || sysClr.getAttribute('val')
+              sysClr.getAttribute("lastClr") || sysClr.getAttribute("val")
           }
-          this.themeColors.push(colorValue || 'FFFFFF')
+          this.themeColors.push(colorValue || "FFFFFF")
         }
       } catch (error) {
-        console.error('解析主题颜色出错:', error)
+      
         this.themeColors = [
-          'FFFFFF', // 白色 - 浅色1
-          '000000', // 黑色 - 深色1
-          'EEECE1', // 浅灰 - 浅色2
-          '1F497D', // 深灰 - 深色2
-          '4F81BD', // 蓝色 - 强调色1
-          'C0504D', // 红色 - 强调色2
-          '9BBB59', // 绿色 - 强调色3
-          '8064A2', // 紫色 - 强调色4
-          '4BACC6', // 青色 - 强调色5
-          'F79646' // 橙色 - 强调色6
+          "FFFFFF", // 白色 - 浅色1
+          "000000", // 黑色 - 深色1
+          "EEECE1", // 浅灰 - 浅色2
+          "1F497D", // 深灰 - 深色2
+          "4F81BD", // 蓝色 - 强调色1
+          "C0504D", // 红色 - 强调色2
+          "9BBB59", // 绿色 - 强调色3
+          "8064A2", // 紫色 - 强调色4
+          "4BACC6", // 青色 - 强调色5
+          "F79646", // 橙色 - 强调色6
         ]
       }
-    }
-  }
+    },
+  },
 }
 </script>
 
 <style scoped>
 .spreadsheet-container {
-    width: 100%;
-    height: calc(100vh - 120px);
-    position: relative;
+  width: 100%;
+  height: calc(100vh - 120px);
+  position: relative;
 }
 
 .spreadsheet-container.loading::after {
-    content: "加载中...";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(255, 255, 255, 0.7);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 18px;
-    z-index: 1000;
+  content: "加载中...";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  z-index: 1000;
 }
 
 .sheet-btn {
-    border: 1px solid #ccc;
-    background-color: #f0f0f0;
-    cursor: pointer;
-    margin-right: 5px;
-    border-radius: 4px;
-    padding: 5px 15px;
+  border: 1px solid #ccc;
+  background-color: #f0f0f0;
+  cursor: pointer;
+  margin-right: 5px;
+  border-radius: 4px;
+  padding: 5px 15px;
 }
 
 .sheet-btn.active {
-    background-color: #4caf50;
-    color: white;
-    border-color: #388e3c;
+  background-color: #4caf50;
+  color: white;
+  border-color: #388e3c;
 }
 
 .btn-group {
-    margin-bottom: 10px;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 5px;
-    padding: 8px;
-    background-color: #f8f8f8;
-    border-radius: 4px;
+  margin-bottom: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  padding: 8px;
+  background-color: #f8f8f8;
+  border-radius: 4px;
 }
 </style>

src/components/view_file/components/vendors/xlsx/index.js → src/components/view_file/vendors/xlsx/index.js

@@ -2,7 +2,7 @@
  * @Author: LiZhiWei
  * @Date: 2025-04-09 10:49:05
  * @LastEditors: LiZhiWei
- * @LastEditTime: 2025-04-14 18:00:04
+ * @LastEditTime: 2025-04-23 17:45:30
  * @Description:
  */
 import ExcelJS from 'exceljs'
@@ -23,6 +23,5 @@ export default async function render (buffer, target) {
         }
       })
   }).$mount(target)
-  console.log('el', el)
   return el
 }

src/components/wc-page-tip/index.js

@@ -1,9 +0,0 @@
-/*
- * @Author: ChenYaJin
- * @Date: 2021-07-02 16:56:40
- * @LastEditors: ChenYaJin
- * @LastEditTime: 2021-07-02 16:59:03
- * @Description:
- */
-import WcPageTip from './wc-page-tip.vue'
-export default WcPageTip

src/components/wc-page-tip/wc-page-tip.vue

@@ -1,93 +0,0 @@
-<!--
- * @Author: ChenYaJin
- * @Date: 2021-07-02 16:02:41
- * @LastEditors: mzr
- * @LastEditTime: 2022-11-22 09:59:57
- * @Description: 页面提示组件
--->
-<template>
-  <div class="wc-tip">
-    <el-image :src="matchSrc" alt="" class="tip-icon" :class="size">
-      <div slot="error" class="image-slot">
-        <i class="el-icon-picture-outline"></i>
-      </div>
-    </el-image>
-    <div class="desc">
-      <slot>
-        <div v-html="tip"></div>
-      </slot>
-    </div>
-  </div>
-</template>
-<script>
-import empty from './images/empty.png'
-import noAuth from './images/no_auth.png'
-import errorData from './images/error_data.png'
-
-export default {
-  name: 'WcPageTip',
-  props: {
-    desc: {
-      type: String,
-      default: '暂无数据'
-    },
-    tip: {
-      type: String,
-      default: '暂无数据'
-    },
-    type: {
-      type: String,
-      default: 'empty'
-    },
-    size: {
-      type: String,
-      default: 'small' // medium / small / mini
-    }
-  },
-  data () {
-    return {
-      typeMenu: {
-        empty: empty,
-        noAuth: noAuth,
-        errorData: errorData
-      }
-    }
-  },
-  computed: {
-    matchSrc () {
-      return this.typeMenu[this.type]
-    }
-  }
-}
-</script>
-<style lang="less" scoped>
-.wc-tip {
-  font-size: 14px;
-  width: 100%;
-  height: 100%;
-  color: #c5c8ce;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  .desc{
-    margin: 20px 0;
-    text-align: center;
-  }
-  .medium{
-    width: 320px;
-    height: 260px;
-  }
-  .small{
-    width: 160px;
-    height: 130px;
-  }
-  .mini{
-    width: 80px;
-    height: 65px;
-  }
-  p {
-    margin: 20px 0;
-  }
-}
-</style>

src/main.ts

@@ -2,21 +2,17 @@
  * @Author: LiZhiWei
  * @Date: 2025-04-09 09:06:37
  * @LastEditors: LiZhiWei
- * @LastEditTime: 2025-04-16 08:38:26
+ * @LastEditTime: 2025-04-23 16:35:19
  * @Description:
  */
 import Vue from "vue"
-import router from './router'
+import router from "./router"
 
-import ElementUI from 'element-ui'
-import 'element-ui/lib/theme-chalk/index.css'
-import WisdomUI from 'wisdom-ui'
-import 'wisdom-ui/lib/theme/index.css'
+import ElementUI from "element-ui"
+import "element-ui/lib/theme-chalk/index.css"
 import App from "./App.vue"
 
-
-Vue.use(ElementUI, { size: 'small' })
-Vue.use(WisdomUI)
+Vue.use(ElementUI, { size: "small" })
 
 new Vue({
   el: "#app",

src/router/index.ts

@@ -1,25 +1,25 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
-import ViewFile from '@/components/view_file'
+/*
+ * @Author: LiZhiWei
+ * @Date: 2025-04-23 09:33:35
+ * @LastEditors: LiZhiWei
+ * @LastEditTime: 2025-04-23 17:29:01
+ * @Description:
+ */
+import Vue from "vue"
+import VueRouter from "vue-router"
 
 Vue.use(VueRouter)
 
 const routes = [
   {
-    path: '/',
-    name: 'home',
-    component: ViewFile
+    path: "/",
+    name: "home",
+    component: () => import("@/views/index.vue"),
   },
-  {
-    path: '/preview/:id',
-    name: 'preview',
-    component: ViewFile,
-    props: true
-  }
 ]
 
 const router = new VueRouter({
-  routes
+  routes,
 })
 
-export default router
+export default router

src/utils/pptxToJson/pptxtojson.js

@@ -121,17 +121,12 @@ async function getContentTypes (zip) {
 async function getAllThemes (zip) {
   const themeMap = new Map()
 
-  try {
-    const filesInfo = await getContentTypes(zip)
+  const filesInfo = await getContentTypes(zip)
 
     // 从 Content_Types.xml 中获取主题文件路径
     for (const themePath of filesInfo.themes) {
-      try {
         const themeContent = await readXmlFile(zip, themePath)
         themeMap.set(themePath, { themeContent, masterId: null })
-      } catch (error) {
-        console.warn('读取主题文件失败:', error, themePath)
-      }
     }
 
     // 获取母版与主题的对应关系
@@ -171,7 +166,6 @@ async function getAllThemes (zip) {
               'slideMasters/_rels/slideMaster'
             ) + '.rels'
 
-          try {
             const masterRels = await readXmlFile(zip, masterRelsPath)
             if (masterRels && masterRels['Relationships']) {
               const relationships = masterRels['Relationships']['Relationship']
@@ -195,15 +189,9 @@ async function getAllThemes (zip) {
                 }
               }
             }
-          } catch (error) {
-            console.warn('读取母版关系文件失败:', error, masterRelsPath)
-          }
         }
       }
     }
-  } catch (error) {
-    console.warn('获取主题文件失败:', error)
-  }
 
   return themeMap
 }
@@ -308,7 +296,6 @@ async function getSlideTheme (zip, slideFilename, themeMap) {
 
     return { themeContent: themeData.themeContent, themeColors }
   } catch (error) {
-    console.warn('获取幻灯片主题失败:', error)
     return { themeContent: {}, themeColors: [] }
   }
 }

src/views/index.vue

@@ -0,0 +1,317 @@
+<!--
+ * @Author: LiZhiWei
+ * @Date: 2025-04-23 16:56:47
+ * @LastEditors: LiZhiWei
+ * @LastEditTime: 2025-04-24 09:38:53
+ * @Description: 
+-->
+<template>
+  <div class="file-viewer-container">
+    <div class="header">
+      <el-select
+        v-model="downloadUrl"
+        filterable
+        allow-create
+        default-first-option
+        clearable
+        placeholder="请选择或输入文件预览地址"
+        class="input-with-button"
+      >
+        <el-option
+          v-for="item in urlOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+          <span class="url-label">{{ item.label }}</span>
+          <span class="url-value">{{ item.value }}</span>
+        </el-option>
+      </el-select>
+      <el-button
+        type="primary"
+        :loading="downloading"
+        @click="handlePreview"
+        style="margin-left: 10px"
+      >
+        预览文件
+      </el-button>
+      <el-upload
+        class="upload-demo"
+        action=""
+        :show-file-list="false"
+        :auto-upload="false"
+        :on-change="handleFileChange"
+      >
+        <el-button type="primary" style="margin-left: 10px"
+          >选择本地文件</el-button
+        >
+      </el-upload>
+    </div>
+    <div v-if="renderLoading && !showError" class="loading-process">
+      <el-progress
+        class="file-progress"
+        :text-inside="true"
+        :stroke-width="15"
+        :percentage="percentage"
+      ></el-progress>
+      <span class="load-text">
+        <template v-if="renderLoading && loadLoading">文件加载中....</template>
+        <template v-else>加载完成，文件显示中....</template>
+      </span>
+    </div>
+    <view-file-component :file="previewFile" :render-loading="renderLoading" />
+  </div>
+</template>
+
+<script>
+import ViewFileComponent from "@/components/view_file/index.vue"
+import file from "@/api/module/file.js"
+import { readBuffer } from "@/components/view_file/util"
+
+export default {
+  components: {
+    ViewFileComponent,
+  },
+  data() {
+    return {
+      previewFile: {
+        filename: "",
+        type: "",
+        fileBuffer: null,
+      },
+      loadLoading: false, // 文件加载
+      renderLoading: false, // 文件渲染
+      showError: false, // 文件出错
+      percentage: 0,
+      downloadUrl: "", // 添加输入框绑定值
+      downloading: false, // 添加加载状态
+      urlOptions: [
+        {
+          value:
+            "https://501351981.github.io/vue-office/examples/dist/static/test-files/test.pptx",
+          label: "PPT示例文件",
+        },
+        {
+          value:
+            "https://501351981.github.io/vue-office/examples/dist/static/test-files/test.docx",
+          label: "Word示例文件",
+        },
+        {
+          value:
+            "https://501351981.github.io/vue-office/examples/dist/static/test-files/test.pdf",
+          label: "PDF示例文件",
+        },
+        {
+          value:
+            "https://501351981.github.io/vue-office/examples/dist/static/test-files/test.xlsx",
+          label: "Excel示例文件",
+        },
+        {
+          value:
+            "https://fastly.picsum.photos/id/641/800/600.jpg?hmac=DJCZbdxrCoJPFV0jAsSIG1Ny0oc48zL3iqeMFqtKlD4",
+          label: "图片示例文件",
+        },
+      ],
+    }
+  },
+  methods: {
+    handlePreview() {
+      if (!this.downloadUrl) {
+        this.$message.warning("请输入文件预览地址")
+        return
+      }
+
+      this.downloading = true
+      this.loadLoading = true
+      this.renderLoading = true
+      this.showError = false
+
+      const progressFunc = (progress) => {
+        const percentage = Number(
+          Number(progress.loaded / progress.total) * 100
+        ).toFixed(2)
+        this.percentage = Number(percentage)
+        if (progress.loaded >= progress.total) {
+          this.percentage = 100
+          this.loadLoading = false
+          const progressBar = document.querySelector(
+            ".file-progress .el-progress-bar__outer"
+          )
+          progressBar.style.backgroundColor = "#409eff"
+        }
+      }
+
+      const config = {
+        onDownloadProgress: progressFunc,
+        timeout: 1000 * 60 * 10,
+        withCredentials: false, // Disable credentials for cross-origin requests
+        headers: {
+          Accept: "application/json;charset=utf-8",
+        },
+      }
+
+      file
+        .previewCabinetFileByUrl(this.downloadUrl, config)
+        .then((res) => {
+          this.percentage = 100
+          // 从URL中获取文件名和类型
+          const urlParts = this.downloadUrl.split("/")
+          const fileName = urlParts[urlParts.length - 1]
+          const fileType =
+            fileName
+              .split("?")[0]
+              .match(/\.([^.]+)$/)?.[1]
+              ?.toLowerCase() || ""
+
+          this.previewFile.filename = fileName.split(".")[0]
+          this.previewFile.type = fileType
+          // 更新文件信息
+          return readBuffer(res.data).then((arrayBuffer) => {
+            this.previewFile.fileBuffer = arrayBuffer
+            return arrayBuffer
+          })
+        })
+        .then(() => {
+          this.$message.success("文件加载成功")
+        })
+        .catch((error) => {
+          this.$message.error("文件加载失败：" + error.message)
+          this.showError = true
+          console.log("this.showError", this.showError)
+        })
+        .finally(() => {
+          this.downloading = false
+          this.loadLoading = false
+          this.renderLoading = false
+        })
+    },
+    async handleFileChange(file) {
+      if (!file) {
+        this.$message.warning("请选择文件")
+        return
+      }
+
+      this.downloading = true
+      this.loadLoading = true
+      this.renderLoading = true
+      this.showError = false
+      this.percentage = 0
+
+      try {
+        // 获取文件类型
+        const fileName = file.name
+        const fileType = fileName.split(".").pop().toLowerCase()
+
+        // 检查文件类型是否支持
+        const typeObject = {
+          doc: ["docx"],
+          xlsx: ["xlsx"],
+          pdf: ["pdf"],
+          ppt: ["pptx"],
+          image: ["gif", "jpg", "jpeg", "bmp", "tiff", "tif", "png", "svg"],
+          text: [
+            "txt",
+            "json",
+            "js",
+            "css",
+            "java",
+            "py",
+            "html",
+            "jsx",
+            "ts",
+            "tsx",
+            "xml",
+            "md",
+            "log",
+          ],
+        }
+        const ablePreviewTypes = Object.values(typeObject).flat()
+
+        if (!ablePreviewTypes.includes(fileType)) {
+          throw new Error("不支持的文件类型")
+        }
+
+        this.previewFile.filename = fileName.split(".")[0]
+        this.previewFile.type = fileType
+        // 读取文件
+        const arrayBuffer = await new Promise((resolve, reject) => {
+          const reader = new FileReader()
+          reader.onload = () => resolve(reader.result)
+          reader.onerror = reject
+          reader.readAsArrayBuffer(file.raw)
+
+          reader.onprogress = (event) => {
+            if (event.lengthComputable) {
+              const percentage = Number(
+                Number(event.loaded / event.total) * 100
+              ).toFixed(2)
+              this.percentage = Number(percentage)
+            }
+          }
+        })
+
+        // 设置文件缓冲区
+        this.previewFile.fileBuffer = arrayBuffer
+        this.$message.success("文件加载成功")
+      } catch (error) {
+        this.$message.error("文件加载失败：" + error.message)
+        this.showError = true
+      } finally {
+        this.downloading = false
+        this.loadLoading = false
+        this.renderLoading = false
+      }
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.file-viewer-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.header {
+  padding: 20px;
+  border-bottom: 1px solid #eee;
+}
+
+.loading-process {
+  width: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  left: 50%;
+  z-index: 10;
+  .load-text {
+    line-height: 28px;
+  }
+}
+
+.input-with-button {
+  width: 400px;
+
+  .url-label {
+    float: left;
+    color: #606266;
+  }
+
+  .url-value {
+    float: right;
+    color: #909399;
+    font-size: 13px;
+  }
+}
+
+.upload-demo {
+  display: inline-block;
+}
+
+:deep(.el-select-dropdown__item) {
+  padding: 0 20px;
+  height: 40px;
+  line-height: 40px;
+}
+</style>