@chenghongyu/xpt-file-viewer 1.1.0

package/src/assets/icons/upload.svg

@@ -0,0 +1,50 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" width="782.04441" height="701.88002"
+     viewBox="0 0 782.04441 701.88002" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <path d="M609.48783,100.59015l-25.44631,6.56209L270.53735,187.9987,245.091,194.56079A48.17927,48.17927,0,0,0,210.508,253.17865L320.849,681.05606a48.17924,48.17924,0,0,0,58.61776,34.58317l.06572-.01695,364.26536-93.93675.06572-.01695a48.17923,48.17923,0,0,0,34.58309-58.6178l-110.341-427.87741A48.17928,48.17928,0,0,0,609.48783,100.59015Z"
+          transform="translate(-208.9778 -99.05999)" fill="#f2f2f2"/>
+    <path d="M612.94784,114.00532l-30.13945,7.77236L278.68955,200.20385l-30.139,7.77223a34.30949,34.30949,0,0,0-24.6275,41.74308l110.341,427.87741a34.30946,34.30946,0,0,0,41.7431,24.62736l.06572-.01695,364.26536-93.93674.06619-.01707a34.30935,34.30935,0,0,0,24.627-41.7429l-110.341-427.87741A34.30938,34.30938,0,0,0,612.94784,114.00532Z"
+          transform="translate(-208.9778 -99.05999)" fill="#fff"/>
+    <path d="M590.19,252.56327,405.917,300.08359a8.01411,8.01411,0,0,1-4.00241-15.52046l184.273-47.52033A8.01412,8.01412,0,0,1,590.19,252.56327Z"
+          transform="translate(-208.9778 -99.05999)" fill="#f2f2f2"/>
+    <path d="M628.955,270.49906,412.671,326.27437a8.01411,8.01411,0,1,1-4.00241-15.52046l216.284-55.77531a8.01411,8.01411,0,0,1,4.00242,15.52046Z"
+          transform="translate(-208.9778 -99.05999)" fill="#f2f2f2"/>
+    <path d="M620.45825,369.93676l-184.273,47.52032a8.01411,8.01411,0,1,1-4.00242-15.52046l184.273-47.52032a8.01411,8.01411,0,1,1,4.00241,15.52046Z"
+          transform="translate(-208.9778 -99.05999)" fill="#f2f2f2"/>
+    <path d="M659.22329,387.87255l-216.284,55.77531a8.01411,8.01411,0,1,1-4.00242-15.52046l216.284-55.77531a8.01411,8.01411,0,0,1,4.00242,15.52046Z"
+          transform="translate(-208.9778 -99.05999)" fill="#f2f2f2"/>
+    <path d="M650.72653,487.31025l-184.273,47.52033a8.01412,8.01412,0,0,1-4.00242-15.52047l184.273-47.52032a8.01411,8.01411,0,0,1,4.00242,15.52046Z"
+          transform="translate(-208.9778 -99.05999)" fill="#f2f2f2"/>
+    <path d="M689.49156,505.246l-216.284,55.77532a8.01412,8.01412,0,1,1-4.00241-15.52047l216.284-55.77531a8.01411,8.01411,0,0,1,4.00242,15.52046Z"
+          transform="translate(-208.9778 -99.05999)" fill="#f2f2f2"/>
+    <path d="M374.45884,348.80871l-65.21246,16.817a3.847,3.847,0,0,1-4.68062-2.76146L289.5963,304.81607a3.847,3.847,0,0,1,2.76145-4.68061l65.21247-16.817a3.847,3.847,0,0,1,4.68061,2.76145l14.96947,58.04817A3.847,3.847,0,0,1,374.45884,348.80871Z"
+          transform="translate(-208.9778 -99.05999)" fill="#e6e6e6"/>
+    <path d="M404.72712,466.1822l-65.21247,16.817a3.847,3.847,0,0,1-4.68062-2.76146l-14.96946-58.04816A3.847,3.847,0,0,1,322.626,417.509l65.21246-16.817a3.847,3.847,0,0,1,4.68062,2.76145l14.96946,58.04817A3.847,3.847,0,0,1,404.72712,466.1822Z"
+          transform="translate(-208.9778 -99.05999)" fill="#e6e6e6"/>
+    <path d="M434.99539,583.55569l-65.21246,16.817a3.847,3.847,0,0,1-4.68062-2.76145l-14.96946-58.04817a3.847,3.847,0,0,1,2.76145-4.68062l65.21247-16.817a3.847,3.847,0,0,1,4.68061,2.76146l14.96947,58.04816A3.847,3.847,0,0,1,434.99539,583.55569Z"
+          transform="translate(-208.9778 -99.05999)" fill="#e6e6e6"/>
+    <path d="M863.63647,209.0517H487.31811a48.17928,48.17928,0,0,0-48.125,48.12512V699.05261a48.17924,48.17924,0,0,0,48.125,48.12507H863.63647a48.17924,48.17924,0,0,0,48.125-48.12507V257.17682A48.17928,48.17928,0,0,0,863.63647,209.0517Z"
+          transform="translate(-208.9778 -99.05999)" fill="#e6e6e6"/>
+    <path d="M863.637,222.90589H487.31811a34.30948,34.30948,0,0,0-34.271,34.27093V699.05261a34.30947,34.30947,0,0,0,34.271,34.27088H863.637a34.30936,34.30936,0,0,0,34.27051-34.27088V257.17682A34.30937,34.30937,0,0,0,863.637,222.90589Z"
+          transform="translate(-208.9778 -99.05999)" fill="#fff"/>
+    <circle cx="694.19401" cy="614.02963" r="87.85039" fill="#5a9cf8"/>
+    <path d="M945.18722,701.63087H914.63056V671.07421a11.45875,11.45875,0,0,0-22.9175,0v30.55666H861.1564a11.45875,11.45875,0,0,0,0,22.9175h30.55666V755.105a11.45875,11.45875,0,1,0,22.9175,0V724.54837h30.55666a11.45875,11.45875,0,0,0,0-22.9175Z"
+          transform="translate(-208.9778 -99.05999)" fill="#fff"/>
+    <path d="M807.00068,465.71551H616.699a8.01412,8.01412,0,1,1,0-16.02823H807.00068a8.01412,8.01412,0,0,1,0,16.02823Z"
+          transform="translate(-208.9778 -99.05999)" fill="#e6e6e6"/>
+    <path d="M840.05889,492.76314H616.699a8.01412,8.01412,0,1,1,0-16.02823H840.05889a8.01411,8.01411,0,1,1,0,16.02823Z"
+          transform="translate(-208.9778 -99.05999)" fill="#e6e6e6"/>
+    <path d="M807.00068,586.929H616.699a8.01412,8.01412,0,1,1,0-16.02823H807.00068a8.01411,8.01411,0,0,1,0,16.02823Z"
+          transform="translate(-208.9778 -99.05999)" fill="#e6e6e6"/>
+    <path d="M840.05889,613.97661H616.699a8.01412,8.01412,0,1,1,0-16.02823H840.05889a8.01412,8.01412,0,1,1,0,16.02823Z"
+          transform="translate(-208.9778 -99.05999)" fill="#e6e6e6"/>
+    <path d="M574.07028,505.04162H506.72434a3.847,3.847,0,0,1-3.84278-3.84278V441.25158a3.847,3.847,0,0,1,3.84278-3.84278h67.34594a3.847,3.847,0,0,1,3.84278,3.84278v59.94726A3.847,3.847,0,0,1,574.07028,505.04162Z"
+          transform="translate(-208.9778 -99.05999)" fill="#e6e6e6"/>
+    <path d="M574.07028,626.25509H506.72434a3.847,3.847,0,0,1-3.84278-3.84278V562.46505a3.847,3.847,0,0,1,3.84278-3.84278h67.34594a3.847,3.847,0,0,1,3.84278,3.84278v59.94726A3.847,3.847,0,0,1,574.07028,626.25509Z"
+          transform="translate(-208.9778 -99.05999)" fill="#e6e6e6"/>
+    <path d="M807.21185,330.781H666.91017a8.01411,8.01411,0,0,1,0-16.02823H807.21185a8.01411,8.01411,0,0,1,0,16.02823Z"
+          transform="translate(-208.9778 -99.05999)" fill="#ccc"/>
+    <path d="M840.27007,357.82862H666.91017a8.01411,8.01411,0,1,1,0-16.02822h173.3599a8.01411,8.01411,0,0,1,0,16.02822Z"
+          transform="translate(-208.9778 -99.05999)" fill="#ccc"/>
+    <path d="M635.85911,390.6071H506.51316a3.847,3.847,0,0,1-3.84277-3.84277V285.81706a3.847,3.847,0,0,1,3.84277-3.84277H635.85911a3.847,3.847,0,0,1,3.84277,3.84277V386.76433A3.847,3.847,0,0,1,635.85911,390.6071Z"
+          transform="translate(-208.9778 -99.05999)" fill="#5a9cf8"/>
+</svg>

package/src/assets/icons/zfile-basic.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="287px" height="252px" viewBox="0 0 287 252" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>logo 纵向</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="logo-纵向" fill-rule="nonzero">
+            <g id="ZFILE" transform="translate(8.300000, 167.600000)">
+                <polygon id="路径" fill="#595BB3" points="1.42108547e-14 69.4 55.5 69.4 55.5 56.2 18.3 56.2 18.3 55.6 52.9 13.1 52.9 -2.84217094e-14 1.9 -2.84217094e-14 1.9 13.1 34.1 13.1 34.2 13.7 1.42108547e-14 55.8"></polygon>
+                <polygon id="路径" fill="#000000" points="115.4 13.2 115.4 -2.84217094e-14 73 -2.84217094e-14 73 69.4 88.2 69.4 88.2 42.4 113.4 42.4 113.4 29.3 88.2 29.3 88.2 13.2"></polygon>
+                <polygon id="路径" fill="#000000" points="132.6 69.4 147.8 69.4 147.8 -2.84217094e-14 132.6 -2.84217094e-14"></polygon>
+                <polygon id="路径" fill="#000000" points="184.1 56.2 184.1 -2.84217094e-14 168.9 -2.84217094e-14 168.9 69.4 211.7 69.4 211.7 56.2"></polygon>
+                <polygon id="路径" fill="#000000" points="242.6 56.2 242.6 40.2 267.8 40.2 267.8 27.5 242.6 27.5 242.6 13.2 269.8 13.2 269.8 -2.84217094e-14 227.4 -2.84217094e-14 227.4 69.4 271.2 69.4 271.2 56.2"></polygon>
+            </g>
+            <path d="M155.303566,34.8843743 C143.014443,29.7463611 128.839849,32.5252418 119.400426,41.9230624 C109.961003,51.3208831 107.119541,65.4830638 112.203222,77.7947622 C117.286904,90.1064605 129.29251,98.1383638 142.612485,98.1383638 C151.319007,98.1578447 159.676691,94.7178188 165.846729,88.5749741 C172.016767,82.4321294 175.493676,74.0897209 175.513125,65.3831971 C175.57119,52.0633514 167.59269,40.0223874 155.303566,34.8843743 Z" id="路径" fill="#F4CA1C"></path>
+            <path d="M234.965485,82.8451971 C234.902832,69.0287019 228.809887,55.9284521 218.283833,46.9784997 C207.757779,38.0285474 193.848266,34.1213759 180.201485,36.2811971 C174.82387,18.3284796 159.76454,4.9549997 141.30214,1.73652475 C122.839739,-1.4819502 104.143536,6.00706534 93.0084849,21.0811971 C86.5932216,29.7336192 83.2301823,40.2701107 83.4464849,51.0391971 C62.9603859,54.3195973 48.4484851,72.812069 50.1328507,93.4906615 C51.8172162,114.169254 69.1305536,130.069415 89.8774849,129.991484 L192.958485,129.991484 C193.963224,129.984369 194.951497,129.735329 195.839485,129.265197 C218.406796,125.316997 234.894863,105.75517 234.965485,82.8451971 L234.965485,82.8451971 Z M187.615485,117.474699 L89.8774849,117.474699 C80.1121566,117.533383 71.0631901,112.357596 66.1633607,103.9103 C61.2635313,95.4630038 61.2635313,85.0383905 66.1633607,76.5910944 C71.0631901,68.1437983 80.1121566,62.9680114 89.8774849,63.0271971 C90.4535248,63.0187072 91.0256184,62.9305375 91.5774849,62.7651971 C94.7965405,62.0685748 96.9207179,58.9910781 96.4304849,55.7341971 C94.9630708,46.1041774 97.3863191,36.2859503 103.165872,28.444563 C108.945424,20.6031757 117.606596,15.3826562 127.239485,13.9341971 C145.453006,11.1172622 162.942487,22.2047025 168.165485,39.8791971 C151.224797,47.4677777 140.306113,64.2825514 140.265485,82.8451971 C140.265485,86.3163068 143.079375,89.1301971 146.550485,89.1301971 C150.021595,89.1301971 152.835485,86.3163068 152.835485,82.8451971 C152.774757,68.7650048 161.209669,56.0374193 174.200642,50.6069386 C187.191615,45.1764578 202.17514,48.114679 212.153069,58.0492876 C222.130997,67.9838962 225.134384,82.9544952 219.760479,95.9689735 C214.386573,108.983452 201.695808,117.474699 187.615485,117.474699 L187.615485,117.474699 Z" id="形状" fill="#595BB3"></path>
+        </g>
+    </g>
+</svg>

package/src/assets/icons/zfile-horizontal.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="538px" height="143px" viewBox="0 0 538 143" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>logo 横向</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="logo-横向" fill-rule="nonzero">
+            <g id="ZFILE" transform="translate(248.300000, 38.600000)">
+                <path d="M52.9,0 L52.9,13.1 L18.3,55.6 L18.3,56.2 L55.5,56.2 L55.5,69.4 L0,69.4 L0,55.8 L34.2,13.7 L34.1,13.1 L1.9,13.1 L1.9,0 L52.9,0 Z M115.4,0 L115.4,13.2 L88.2,13.2 L88.2,29.3 L113.4,29.3 L113.4,42.4 L88.2,42.4 L88.2,69.4 L73,69.4 L73,0 L115.4,0 Z" id="路径-2" fill="#595BB3"></path>
+                <polygon id="路径" fill="#000000" points="132.6 69.4 147.8 69.4 147.8 0 132.6 0"></polygon>
+                <polygon id="路径" fill="#000000" points="184.1 56.2 184.1 0 168.9 0 168.9 69.4 211.7 69.4 211.7 56.2"></polygon>
+                <polygon id="路径" fill="#000000" points="242.6 56.2 242.6 40.2 267.8 40.2 267.8 27.5 242.6 27.5 242.6 13.2 269.8 13.2 269.8 0 227.4 0 227.4 69.4 271.2 69.4 271.2 56.2"></polygon>
+            </g>
+            <path d="M128.512807,71.3831971 C128.57119,58.0633514 120.59269,46.0223874 108.303566,40.8843743 C96.0144427,35.7463611 81.8398493,38.5252418 72.4004264,47.9230624 C62.9610034,57.3208831 60.1195406,71.4830638 65.2032225,83.7947622 C70.2869044,96.1064605 82.2925097,104.138281 95.6124849,104.138281 C104.319007,104.157845 112.676691,100.717819 118.846729,94.5749741 C125.016767,88.4321294 128.493676,80.0897209 128.512807,71.3831971 L128.512807,71.3831971 Z" id="路径" fill="#F4CA1C"></path>
+            <path d="M187.965485,88.8451971 C187.902832,75.0287019 181.809887,61.9284521 171.283833,52.9784997 C160.757779,44.0285474 146.848266,40.1213759 133.201485,42.2811971 C127.82387,24.3284796 112.76454,10.9549997 94.3021397,7.73652475 C75.8397393,4.5180498 57.1435358,12.0070653 46.0084849,27.0811971 C39.5932216,35.7336192 36.2301823,46.2701107 36.4464849,57.0391971 C15.9603859,60.3195973 1.44848513,78.812069 3.13285068,99.4906615 C4.81721623,120.169254 22.1305536,136.069415 42.8774849,135.991484 L145.958485,135.991484 C146.963224,135.984369 147.951497,135.735329 148.839485,135.265197 C171.406796,131.316997 187.894863,111.75517 187.965485,88.8451971 L187.965485,88.8451971 Z M140.615485,123.474699 L42.8774849,123.474699 C33.1121566,123.533383 24.0631901,118.357596 19.1633607,109.9103 C14.2635313,101.463004 14.2635313,91.0383905 19.1633607,82.5910944 C24.0631901,74.1437983 33.1121566,68.9680114 42.8774849,69.0271971 C43.4535248,69.0187072 44.0256184,68.9305375 44.5774849,68.7651971 C47.7965405,68.0685748 49.9207179,64.9910781 49.4304849,61.7341971 C47.9630708,52.1041774 50.3863191,42.2859503 56.1658718,34.444563 C61.9454244,26.6031757 70.6065959,21.3826562 80.2394849,19.9341971 C98.4530058,17.1172622 115.942487,28.2047025 121.165485,45.8791971 C104.224797,53.4677777 93.3061126,70.2825514 93.2654849,88.8451971 C93.2654849,92.3163068 96.0793752,95.1301971 99.5504849,95.1301971 C103.021595,95.1301971 105.835485,92.3163068 105.835485,88.8451971 C105.774757,74.7650048 114.209669,62.0374193 127.200642,56.6069386 C140.191615,51.1764578 155.17514,54.114679 165.153069,64.0492876 C175.130997,73.9838962 178.134384,88.9544952 172.760479,101.968973 C167.386573,114.983452 154.695808,123.474699 140.615485,123.474699 L140.615485,123.474699 Z" id="形状" fill="#595BB3"></path>
+        </g>
+    </g>
+</svg>

package/src/assets/icons/zfile.svg

@@ -0,0 +1 @@
+<svg t="1641979577685" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6856" width="200" height="200"><path d="M678.64064 514.00704a168.448 168.448 0 1 0-168.448 167.7056 168.06912 168.06912 0 0 0 168.448-167.7056z" fill="#F4CA1C" p-id="6857"></path><path d="M983.04 603.41248a242.48832 242.48832 0 0 0-280.39168-238.40768 253.32224 253.32224 0 0 0-446.42816-77.824 249.13408 249.13408 0 0 0-48.95744 153.38496A203.39712 203.39712 0 0 0 240.18944 844.8h527.77472a31.98976 31.98976 0 0 0 14.75072-3.71712A242.03776 242.03776 0 0 0 983.04 603.41248z m-242.432 177.30048H240.18944a139.38688 139.38688 0 1 1 0-278.76864 31.96928 31.96928 0 0 0 8.704-1.34144 31.96416 31.96416 0 0 0 24.84736-35.99872 187.81184 187.81184 0 0 1 157.74208-214.016A188.46208 188.46208 0 0 1 641.024 383.42656a241.62816 241.62816 0 0 0-142.848 219.98592 32.1792 32.1792 0 0 0 64.3584 0 178.06848 178.06848 0 1 1 178.0736 177.30048z" fill="#595BB3" p-id="6858"></path></svg>

package/src/assets/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="77" height="47" fill="none" aria-labelledby="vite-logo-title" viewBox="0 0 77 47"><title id="vite-logo-title">Vite</title><style>.parenthesis{fill:#000}@media (prefers-color-scheme:dark){.parenthesis{fill:#fff}}</style><path fill="#9135ff" d="M40.151 45.71c-.663.844-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.493c-.92 0-1.457-1.04-.92-1.788l7.479-10.471c1.07-1.498 0-3.578-1.842-3.578H15.443c-.92 0-1.456-1.04-.92-1.788l9.696-13.576c.213-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.472c-1.07 1.497 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.087.89 1.83L40.153 45.712z"/><mask id="a" width="48" height="47" x="14" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M40.047 45.71c-.663.843-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.389c-.92 0-1.457-1.04-.92-1.788l7.479-10.472c1.07-1.497 0-3.578-1.842-3.578H15.34c-.92 0-1.456-1.04-.92-1.788l9.696-13.575c.213-.297.556-.474.92-.474H53.93c.92 0 1.456 1.04.92 1.788L47.37 13.03c-1.07 1.498 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.088.89 1.831L40.049 45.712z"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#eee6ff" rx="5.508" ry="14.704" transform="rotate(269.814 20.96 11.29)scale(-1 1)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#eee6ff" rx="10.399" ry="29.851" transform="rotate(89.814 -16.902 -8.275)scale(1 -1)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#8900ff" rx="5.508" ry="30.487" transform="rotate(89.814 -19.197 -7.127)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.928 4.177)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.738 5.52)scale(1 -1)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#eee6ff" rx="14.072" ry="22.078" transform="rotate(93.35 31.245 55.578)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx="14.592" cy="9.743" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(39.51 14.592 9.743)"/></g><g filter="url(#k)"><ellipse cx="61.728" cy="-5.321" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 61.728 -5.32)"/></g><g filter="url(#l)"><ellipse cx="55.618" cy="7.104" fill="#00c2ff" rx="5.971" ry="9.665" transform="rotate(37.892 55.618 7.104)"/></g><g filter="url(#m)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#n)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#o)"><ellipse cx="49.857" cy="30.678" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 49.857 30.678)"/></g><g filter="url(#p)"><ellipse cx="52.623" cy="33.171" fill="#00c2ff" rx="5.971" ry="15.297" transform="rotate(37.892 52.623 33.17)"/></g></g><path d="M6.919 0c-9.198 13.166-9.252 33.575 0 46.789h6.215c-9.25-13.214-9.196-33.623 0-46.789zm62.424 0h-6.215c9.198 13.166 9.252 33.575 0 46.789h6.215c9.25-13.214 9.196-33.623 0-46.789" class="parenthesis"/><defs><filter id="b" width="60.045" height="41.654" x="-5.564" y="16.92" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-40.407" y="-6.762" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-35.435" y="2.801" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-30.84" y="20.8" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-29.307" y="21.949" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="29.961" y="-17.13" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-13.43" y="-22.082" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="34.321" y="-37.644" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="38.847" y="-10.552" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="22.45" y="-1.645" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="32.919" y="11.36" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter></defs></svg>

package/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/src/components/HelloWorld.vue

@@ -0,0 +1,319 @@
+<script setup lang="ts">
+import { ref, computed, watch, nextTick } from 'vue'
+import { getFileType } from '~/utils'
+import PdfViewer from '~/components/file/preview/PdfViewer.vue'
+import VideoPlayer from '~/components/file/preview/VideoPlayer.vue'
+import AudioPlayer from '~/components/file/preview/AudioPlayer.vue'
+import ImageViewer from '~/components/file/preview/ImageViewer.vue'
+import OfficeViewer from '~/components/file/preview/OfficeViewer.vue'
+import KkFileViewer from '~/components/file/preview/KkFileViewer.vue'
+import Three3dPreview from '~/components/file/preview/Three3dPreview.vue'
+// import TextViewer from '~/components/file/preview/TextViewer.vue'
+// import MarkdownViewer from '~/components/file/preview/MarkdownViewer.vue'
+
+// 定义文件类型接口
+interface FileInfo {
+  name: string
+  path: string
+  type?: string
+  fileType?: string
+}
+
+// 定义 Props
+const props = withDefaults(defineProps<{
+  fileList?: FileInfo[]
+  fileName?: string
+  filePath?: string
+  defaultIndex?: number
+  showFileList?: boolean
+}>(), {
+  fileList: () => [],
+  defaultIndex: 0,
+  showFileList: true
+})
+
+// 定义 Emits
+const emit = defineEmits<{
+  fileSelect: [file: FileInfo | null]
+  fileLoaded: [file: FileInfo]
+  fileError: [error: Error]
+}>()
+
+// 当前文件类型
+const fileType = ref<string>('')
+
+// 当前选中的文件
+const selectedFile = ref<FileInfo | null>(null)
+
+// 预览组件的 key，用于强制重新渲染
+const previewKey = ref<number>(0)
+
+// 处理文件列表，支持单个文件或文件列表
+const files = computed<FileInfo[]>(() => {
+  if (props.fileName && props.filePath) {
+    return [{
+      name: props.fileName,
+      path: props.filePath,
+      type: 'FILE'
+    }]
+  }
+  return props.fileList || []
+})
+
+// 获取唯一标识
+const getUniqueKey = (file: FileInfo, index: number): string => {
+  return `${file.path}_${index}_${Date.now()}`
+}
+
+// 监听外部传入的文件变化
+watch(() => [props.fileName, props.filePath], ([newName, newPath]) => {
+  if (newName && newPath) {
+    const file: FileInfo = { name: newName, path: newPath, type: 'FILE' }
+    selectedFile.value = file
+    fileType.value = getFileType(newName)
+    previewKey.value++
+    nextTick(() => {
+      emit('fileSelect', file)
+    })
+  }
+}, { immediate: true })
+
+// 监听文件列表变化，自动选中默认文件
+watch(() => props.fileList, (newList) => {
+  if (newList && newList.length > 0 && !selectedFile.value) {
+    const index = props.defaultIndex ?? 0
+    if (newList[index]) {
+      selectFile(newList[index])
+    }
+  }
+}, { immediate: true })
+
+// 处理文件点击事件
+const selectFile = (file: FileInfo) => {
+  if (!file) return
+  selectedFile.value = file
+  fileType.value = getFileType(file.name)
+  previewKey.value++
+  nextTick(() => {
+    emit('fileSelect', file)
+  })
+}
+
+// 处理预览加载完成
+const handleFileLoaded = () => {
+  if (selectedFile.value) {
+    emit('fileLoaded', selectedFile.value)
+  }
+}
+
+// 处理预览加载失败
+const handleFileError = (error: Error) => {
+  emit('fileError', error)
+}
+</script>
+
+<template>
+  <div class="file-viewer-container">
+    <!-- 文件列表（可选显示） -->
+    <div v-if="showFileList && files.length > 1" class="file-list">
+      <h3>文件列表</h3>
+      <ul>
+        <li 
+          v-for="(file, index) in files" 
+          :key="getUniqueKey(file, index)"
+          @click="selectFile(file)"
+          :class="{ active: selectedFile?.path === file.path }"
+          role="button"
+          tabindex="0"
+          @keydown.enter="selectFile(file)"
+        >
+          {{ file.name }}
+        </li>
+      </ul>
+    </div>
+
+    <!-- 预览区域 -->
+    <div class="preview-area">
+      <!-- PDF 预览 -->
+      <PdfViewer 
+        v-if="fileType === 'pdf' && selectedFile"
+        :key="previewKey"
+        :file-name="selectedFile.name" 
+        :file-url="selectedFile.path"
+        @load="handleFileLoaded"
+        @error="handleFileError"
+      />
+      
+      <!-- 视频预览 -->
+      <VideoPlayer 
+        v-else-if="fileType === 'video' && selectedFile"
+        :key="previewKey"
+        :file-name="selectedFile.name" 
+        :file-url="selectedFile.path"
+        @load="handleFileLoaded"
+        @error="handleFileError"
+      />
+      
+      <!-- 音频预览 -->
+      <AudioPlayer 
+        v-else-if="fileType === 'audio' && selectedFile"
+        :key="previewKey"
+        :file-name="selectedFile.name" 
+        :file-url="selectedFile.path"
+        @load="handleFileLoaded"
+        @error="handleFileError"
+      />
+      
+      <!-- 图片预览 -->
+      <ImageViewer 
+        v-else-if="fileType === 'image' && selectedFile"
+        :key="previewKey"
+        :file-name="selectedFile.name" 
+        :file-url="selectedFile.path"
+        @load="handleFileLoaded"
+        @error="handleFileError"
+      />
+      <!-- 文本预览 -->
+       <div v-else-if="fileType === 'text' && selectedFile">
+        <!-- <TextViewer 
+                    :key="selectedFile?.path" 
+                    :file-name="selectedFile.name" 
+                    :file-url="selectedFile.path" 
+                    v-if="selectedFile.name.indexOf('.md') === -1" />
+        <MarkdownViewer :file-name="selectedFile.name" 
+                    :file-url="selectedFile.path" 
+                    v-if="selectedFile.name.indexOf('.md') !== -1"></MarkdownViewer> -->
+       </div>
+      <!-- Office 文档预览 -->
+      <OfficeViewer 
+        v-else-if="fileType === 'office' && selectedFile"
+        :key="previewKey"
+        :file-name="selectedFile.name" 
+        :file-url="selectedFile.path"
+        @load="handleFileLoaded"
+        @error="handleFileError"
+      />
+      
+      <!-- 其他类型预览 -->
+      <KkFileViewer 
+        v-else-if="fileType === 'kkfileview' && selectedFile"
+        :key="previewKey"
+        :file-name="selectedFile.name" 
+        :file-url="selectedFile.path"
+        @load="handleFileLoaded"
+        @error="handleFileError"
+      />
+      
+      <Three3dPreview 
+        v-else-if="fileType === 'three3d' && selectedFile"
+        :key="previewKey"
+        :file-name="selectedFile.name" 
+        :file-url="selectedFile.path"
+        @load="handleFileLoaded"
+        @error="handleFileError"
+      />
+      
+      <!-- 不支持预览 -->
+      <div v-else-if="selectedFile" class="not-supported">
+        <p>当前文件不支持预览</p>
+      </div>
+      
+      <!-- 未选择文件 -->
+      <div v-else class="no-file">
+        <p>请选择一个文件进行预览</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.file-viewer-container {
+  display: flex;
+  /* gap: 20px; */
+  /* padding: 20px; */
+  height: 100%;
+  /* box-sizing: border-box; */
+}
+
+.file-list {
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 15px;
+  width: 250px;
+  flex-shrink: 0;
+  background: #fff;
+}
+
+.file-list h3 {
+  margin-top: 0;
+  margin-bottom: 15px;
+  font-size: 16px;
+  color: #333;
+}
+
+.file-list ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  max-height: calc(100% - 50px);
+  overflow-y: auto;
+}
+
+.file-list li {
+  padding: 10px;
+  cursor: pointer;
+  border-bottom: 1px solid #eee;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}
+
+.file-list li:hover {
+  background-color: #f5f5f5;
+}
+
+.file-list li.active {
+  background-color: #e6f7ff;
+  font-weight: bold;
+  color: #1890ff;
+}
+
+.file-list li:focus {
+  outline: 2px solid #1890ff;
+  outline-offset: -2px;
+}
+
+.preview-area {
+  flex: 1;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 15px;
+  min-height: 500px;
+  background: #fff;
+  position: relative;
+}
+
+.not-supported,
+.no-file {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #999;
+  font-size: 14px;
+}
+
+/* 响应式布局 */
+@media (max-width: 768px) {
+  .file-viewer-container {
+    flex-direction: column;
+  }
+  
+  .file-list {
+    width: 100%;
+    max-height: 200px;
+  }
+}
+</style>

package/src/components/common/QrCodePreview.vue

@@ -0,0 +1,118 @@
+<template>
+	<div class="relative inline-block group" v-bind="attrs">
+		<el-image
+			:src="props.src"
+			:alt="props.alt"
+			:fit="props.imgFit"
+			class="block w-full h-full"
+		/>
+		<el-tooltip v-if="props.showDownload" content="下载二维码" placement="top">
+			<span
+				class="absolute top-2 right-2 inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/80 backdrop-blur-sm text-blue-400 shadow ring-1 ring-blue-200/60 transition duration-200 opacity-0 scale-90 cursor-pointer group-hover:opacity-100 group-hover:scale-100 group-hover:bg-blue-50 group-hover:text-blue-500 group-hover:ring-blue-200 focus-visible:opacity-100 focus-visible:scale-100 focus-visible:bg-blue-50 focus-visible:text-blue-500 focus-visible:ring-blue-200 group-focus-within:opacity-100 group-focus-within:scale-100"
+				:class="downloading ? 'pointer-events-none opacity-70' : ''"
+				role="button"
+				tabindex="0"
+				aria-label="下载二维码"
+				:aria-busy="downloading"
+				@click.stop="downloadAsPng"
+				@keydown.stop="handleKeydown"
+			>
+				<i-mdi-download class="text-base" />
+			</span>
+		</el-tooltip>
+	</div>
+</template>
+
+<script setup>
+import { ref, useAttrs } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps({
+	src: {
+		type: String,
+		required: true
+	},
+	showDownload: {
+		type: Boolean,
+		default: true
+	},
+	filename: {
+		type: String,
+		default: 'qrcode.png'
+	},
+	alt: {
+		type: String,
+		default: ''
+	},
+	imgFit: {
+		type: String,
+		default: 'contain'
+	}
+})
+
+const attrs = useAttrs()
+const downloading = ref(false)
+
+const handleKeydown = (event) => {
+	if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar' || event.key === 'Space') {
+		event.preventDefault()
+		downloadAsPng()
+	}
+}
+
+const downloadAsPng = async () => {
+	if (!props.src || downloading.value) {
+		return
+	}
+	downloading.value = true
+	try {
+		const image = await loadImage(props.src)
+		const canvas = document.createElement('canvas')
+		canvas.width = image.naturalWidth || image.width
+		canvas.height = image.naturalHeight || image.height
+		const ctx = canvas.getContext('2d')
+		if (!ctx) {
+			throw new Error('Canvas not supported')
+		}
+		ctx.drawImage(image, 0, 0)
+		const blob = await canvasToBlob(canvas)
+		const url = URL.createObjectURL(blob)
+		const link = document.createElement('a')
+		link.href = url
+		link.download = props.filename || 'qrcode.png'
+		document.body.appendChild(link)
+		link.click()
+		document.body.removeChild(link)
+		URL.revokeObjectURL(url)
+	} catch (error) {
+		console.error('Failed to download QR code', error)
+		if (typeof ElMessage !== 'undefined') {
+			ElMessage.error('二维码下载失败，请重试')
+		}
+	} finally {
+		downloading.value = false
+	}
+}
+
+const loadImage = (src) => {
+	return new Promise((resolve, reject) => {
+		const img = new Image()
+		img.onload = () => resolve(img)
+		img.onerror = reject
+		img.src = src
+	})
+}
+
+const canvasToBlob = (canvas) => {
+	return new Promise((resolve, reject) => {
+		canvas.toBlob((blob) => {
+			if (blob) {
+				resolve(blob)
+			} else {
+				reject(new Error('Failed to convert canvas to blob'))
+			}
+		}, 'image/png')
+	})
+}
+</script>