vue-element-ui-x 0.1.0

package/src/components/FilesCard/src/fileSvg/txt.vue

@@ -0,0 +1,38 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    fill="none"
+    version="1.1"
+    width="1em"
+    height="1em"
+    viewBox="0 0 150 175"
+  >
+    <g>
+      <g>
+        <path
+          d="M103.622,0L27.5981,0C12.355,0,0,12.3648,0,27.6155L0,147.384C0,162.637,12.357,175,27.5981,175L122.402,175C137.645,175,150,162.635,150,147.384L150,46.4069C150,40.1874,147.532,34.2239,143.136,29.8274L120.191,6.86822C115.795,2.47051,109.835,-0.00000298153,103.622,0Z"
+          fill="currentColor"
+          fill-opacity="1"
+          style="mix-blend-mode: passthrough"
+        />
+      </g>
+      <g>
+        <path
+          d="M143.163625,29.814453125L120.214825,6.865233125C116.922225,3.572843125,112.723525,1.335807125,108.154325,0.439453125L108.154325,26.197253125C108.154325,34.374953125,114.783225,41.003953125,122.960925,41.003953125L149.400625,41.003953125C148.401625,36.767253125,146.241625,32.892653125,143.163625,29.814453125ZM105.699225,62.048853125L75.957025,62.048853125C75.334625,61.921253125,74.692725,61.921253125,74.070325,62.048853125L44.328125,62.048853125C41.740235,62.048853125,39.640625,64.148453125,39.640625,66.736353125C39.640625,69.324253125,41.740235,71.423853125,44.328125,71.423853125L70.326225,71.423853125L70.326225,121.957453125C70.326225,124.544453125,72.425825,126.644453125,75.013725,126.644453125C77.60152500000001,126.644453125,79.701225,124.544453125,79.701225,121.957453125L79.701225,71.423853125L105.699225,71.423853125C108.287125,71.423853125,110.386725,69.324253125,110.386725,66.736353125C110.386725,64.148453125,108.287125,62.048853125,105.699225,62.048853125Z"
+          fill="#000000"
+          fill-opacity="0.20000000298023224"
+          style="mix-blend-mode: passthrough"
+        />
+      </g>
+      <g>
+        <path
+          d="M105.699225,59.7050702L75.957025,59.7050702C75.334625,59.5774746,74.692725,59.5774746,74.070325,59.7050702L44.328125,59.7050702C41.740235,59.7050702,39.640625,61.804675,39.640625,64.392575C39.640625,66.980465,41.740235,69.080065,44.328125,69.080065L70.326225,69.080065L70.326225,119.613275C70.326225,122.201175,72.425825,124.300775,75.013725,124.300775C77.60152500000001,124.300775,79.701225,122.201175,79.701225,119.613275L79.701225,69.080065L105.699225,69.080065C108.287125,69.080065,110.386725,66.980465,110.386725,64.392575C110.386725,61.804675,108.287125,59.7050702,105.699225,59.7050702Z"
+          fill="#FFFFFF"
+          fill-opacity="1"
+          style="mix-blend-mode: passthrough"
+        />
+      </g>
+    </g>
+  </svg>
+</template>

package/src/components/FilesCard/src/fileSvg/unknown.vue

@@ -0,0 +1,54 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    fill="none"
+    version="1.1"
+    width="1em"
+    height="1em"
+    viewBox="0 0 150 175"
+  >
+    <g>
+      <g>
+        <path
+          d="M103.622,0L27.5981,0C12.355,0,0,12.3648,0,27.6155L0,147.384C0,162.637,12.357,175,27.5981,175L122.402,175C137.645,175,150,162.635,150,147.384L150,46.4069C150,40.1874,147.532,34.2239,143.136,29.8274L120.191,6.86822C115.795,2.47051,109.835,-0.00000298153,103.622,0Z"
+          fill="currentColor"
+          fill-opacity="1"
+          style="mix-blend-mode: passthrough"
+        />
+      </g>
+      <g>
+        <path
+          d="M143.16410000000002,29.814453125L120.2148,6.865233125C116.9222,3.572843125,112.7235,1.335807125,108.1543,0.439453125L108.1543,26.197253125C108.1543,34.374953125,114.7832,41.003953125,122.9609,41.003953125L149.4005,41.003953125C148.4015,36.767253125,146.2415,32.892653125,143.16410000000002,29.814453125ZM74.8945,45.259753125C58.8594,45.259753125,45.8125,58.306653125,45.8125,74.341753125C45.8125,76.789053125,47.79492,78.771453125,50.24219,78.771453125C52.68945,78.771453125,54.67187,76.789053125,54.67187,74.341753125C54.67187,63.191453125,63.7441,54.119153125,74.8945,54.119153125C80.291,54.119153125,85.3672,56.224653125,89.18950000000001,60.046853125C93.01169999999999,63.869153125,95.1172,68.947253125,95.1172,74.341753125C95.1172,78.464853125,93.8848,82.429653125,91.5547,85.808553125C89.27340000000001,89.113253125,86.1074,91.646453125,82.3945,93.128953125C75.1465,96.025353125,70.4648,102.875453125,70.4648,110.576453125L70.4648,110.900453125C70.4648,113.347453125,72.4473,115.330453125,74.8945,115.330453125C77.3418,115.330453125,79.32419999999999,113.347453125,79.32419999999999,110.900453125L79.32419999999999,110.576453125C79.32419999999999,106.517453125,81.8203,102.898453125,85.6836,101.355453125C91.0215,99.222653125,95.5723,95.585953125,98.8476,90.839853125C102.2031,85.976553125,103.97659999999999,80.271453125,103.97659999999999,74.341753125C103.97659999999999,66.580053125,100.94919999999999,59.277353125,95.4531,53.781253125C89.959,48.287153125,82.6562,45.259753125,74.8945,45.259753125Z"
+          fill="#000000"
+          fill-opacity="0.20000000298023224"
+          style="mix-blend-mode: passthrough"
+        />
+      </g>
+      <g>
+        <path
+          d="M72.6373915234375,133.99798798828124C75.65232152343751,135.25198798828126,79.1127115234375,133.82158798828124,80.3623115234375,130.80481798828126C81.6118115234375,127.78806798828126,80.1764115234375,124.32978798828125,77.1578415234375,123.08463798828124C74.1429215234375,121.83063898828125,70.6825415234375,123.26100798828125,69.4329535234375,126.27776798828125C68.1833715234375,129.29452798828126,69.6188065234375,132.75278798828126,72.6373915234375,133.99798798828124Z"
+          fill="#9DC0C9"
+          fill-opacity="1"
+          style="mix-blend-mode: passthrough"
+        />
+      </g>
+      <g>
+        <path
+          d="M95.572240625,51.3906275C90.076140625,45.8945275,82.775340625,42.8671875,75.013640625,42.8671875C58.978540625,42.8671875,45.931640625,55.9140875,45.931640625,71.9491875C45.931640625,74.3964875,47.914060625,76.37888749999999,50.361330625,76.37888749999999C52.808590625,76.37888749999999,54.791010625,74.3964875,54.791010625,71.9491875C54.791010625,60.7987875,63.863240625,51.7265575,75.013640625,51.7265575C80.410140625,51.7265575,85.486340625,53.8319875,89.30864062500001,57.6542875C93.13084062499999,61.4765875,95.236340625,66.5546875,95.236340625,71.9491875C95.236340625,76.0722875,94.003940625,80.0370875,91.673840625,83.4159875C89.39254062500001,86.7206875,86.226540625,89.25388749999999,82.513640625,90.7362875C75.265640625,93.6327875,70.583940625,100.4823875,70.583940625,108.1835875L70.583940625,108.5077875C70.583940625,110.9550875,72.566440625,112.9374875,75.013640625,112.9374875C77.460940625,112.9374875,79.44334062499999,110.9550875,79.44334062499999,108.5077875L79.44334062499999,108.1835875C79.44334062499999,104.1249875,81.939440625,100.5058875,85.802740625,98.9628875C91.140640625,96.83008749999999,95.691440625,93.1933875,98.966740625,88.4472875C102.322240625,83.5839875,104.09574062499999,77.87888749999999,104.09574062499999,71.9491875C104.09574062499999,64.1874875,101.06834062499999,56.8866875,95.572240625,51.3906275Z"
+          fill="#FFFFFF"
+          fill-opacity="1"
+          style="mix-blend-mode: passthrough"
+        />
+      </g>
+      <g>
+        <path
+          d="M80.919921875,126.15234375Q80.919921875,126.29733375,80.912821875,126.44214375Q80.905721875,126.58696375,80.891521875,126.73125375Q80.877221875,126.87554375,80.856021875,127.01896375Q80.834721875,127.16238375,80.806421875,127.30459375Q80.778121875,127.44679375,80.74292187500001,127.58744375Q80.707721875,127.72808375,80.665621875,127.86683375Q80.623521875,128.00558375,80.574621875,128.14209375Q80.525821875,128.27861375,80.470321875,128.41256375Q80.414821875,128.54651375,80.352821875,128.67758375Q80.290821875,128.80865375,80.222521875,128.93652375Q80.154121875,129.06439375,80.079621875,129.18876375Q80.005121875,129.31312375,79.924521875,129.43367375Q79.844021875,129.55423375,79.757621875,129.67069375Q79.671221875,129.78714375,79.579221875,129.89922375Q79.48732187499999,130.01130375,79.389921875,130.11873375Q79.292521875,130.22616375,79.190021875,130.32869375Q79.087491875,130.43119375,78.980061875,130.52859375Q78.872631875,130.62599375,78.760551875,130.71789375Q78.648471875,130.80989375000001,78.532021875,130.89629375Q78.415561875,130.98269375,78.295001875,131.06319375Q78.174451875,131.14379375,78.05009187499999,131.21829375Q77.925721875,131.29279375,77.79785187499999,131.36119375Q77.669981875,131.42949375,77.538911875,131.49149375Q77.407841875,131.55349375,77.273891875,131.60899375Q77.139941875,131.66449375,77.003421875,131.71329375Q76.866911875,131.76219375,76.728161875,131.80429375Q76.589411875,131.84639375,76.448771875,131.88159375Q76.308121875,131.91679375,76.165921875,131.94509375Q76.023721875,131.97339375,75.880291875,131.99469375Q75.736871875,132.01589375,75.592581875,132.03019375Q75.448291875,132.04439375,75.303471875,132.05149375Q75.158661875,132.05859375,75.013671875,132.05859375Q74.868681875,132.05859375,74.723861875,132.05149375Q74.579051875,132.04439375,74.434751875,132.03019375Q74.290461875,132.01589375,74.147041875,131.99469375Q74.003621875,131.97339375,73.861421875,131.94509375Q73.719211875,131.91679375,73.578571875,131.88159375Q73.437921875,131.84639375,73.299171875,131.80429375Q73.160431875,131.76219375,73.023911875,131.71329375Q72.887401875,131.66449375,72.753441875,131.60899375Q72.619491875,131.55349375,72.488421875,131.49149375Q72.357351875,131.42949375,72.229481875,131.36119375Q72.101611875,131.29279375,71.977251875,131.21829375Q71.852891875,131.14379375,71.732331875,131.06319375Q71.611781875,130.98269375,71.495321875,130.89629375Q71.378861875,130.80989375000001,71.266781875,130.71789375Q71.154701875,130.62599375,71.047271875,130.52859375Q70.939841875,130.43119375,70.837321875,130.32869375Q70.734801875,130.22616375,70.637431875,130.11873375Q70.540061875,130.01130375,70.448081875,129.89922375Q70.356101875,129.78714375,70.269731875,129.67069375Q70.183351875,129.55423375,70.102803875,129.43367375Q70.022251875,129.31312375,69.947711875,129.18876375Q69.873171875,129.06439375,69.804823875,128.93652375Q69.736475875,128.80865375,69.674484875,128.67758375Q69.612493875,128.54651375,69.557007875,128.41256375Q69.501522875,128.27861375,69.452676875,128.14209375Q69.403830875,128.00558375,69.361742875,127.86683375Q69.319654875,127.72808375,69.284424875,127.58744375Q69.249194875,127.44679375,69.220908875,127.30459375Q69.192622575,127.16239375,69.171348075,127.01896375Q69.150073575,126.87554375,69.135862075,126.73125375Q69.121650575,126.58696375,69.114536205,126.44214375Q69.107421875,126.29733375,69.107421875,126.15234375Q69.107421875,126.00735375,69.114536205,125.86253375Q69.121650575,125.71772375,69.135862075,125.57342375Q69.150073575,125.42913375,69.171348075,125.28571375Q69.192622575,125.14229375,69.220908875,125.00009375Q69.249194875,124.85788375,69.284424875,124.71724375Q69.319654875,124.57659375,69.361742875,124.43784375Q69.403830875,124.29910375,69.452676875,124.16258375Q69.501522875,124.02607375,69.557007875,123.89211375Q69.612493875,123.75816375,69.674484875,123.62709375Q69.736475875,123.49602375,69.804823875,123.36815375Q69.873171875,123.24028375,69.947711875,123.11592375Q70.022251875,122.99156375,70.102803875,122.87100375Q70.183351875,122.75045375,70.269731875,122.63399375Q70.356101875,122.51753375,70.448081875,122.40545375Q70.540061875,122.29337375,70.637431875,122.18594375Q70.734801875,122.07851375,70.837321875,121.97599375Q70.939841875,121.87347375,71.047271875,121.77610375Q71.154701875,121.67873375,71.266781875,121.58675375Q71.378861875,121.49477375,71.495321875,121.40840375Q71.611781875,121.32202375,71.732331875,121.24147575Q71.852891875,121.16092375,71.977251875,121.08638375Q72.101611875,121.01184375,72.229481875,120.94349575Q72.357351875,120.87514775,72.488421875,120.81315675Q72.619491875,120.75116575,72.753441875,120.69567975Q72.887401875,120.64019475,73.023911875,120.59134875Q73.160431875,120.54250275,73.299171875,120.50041475Q73.437921875,120.45832675,73.578571875,120.42309675Q73.719211875,120.38786675,73.861421875,120.35958075Q74.003621875,120.33129445,74.147041875,120.31001995Q74.290461875,120.28874545,74.434751875,120.27453395Q74.579051875,120.26032245,74.723861875,120.25320808Q74.868681875,120.24609375,75.013671875,120.24609375Q75.158661875,120.24609375,75.303471875,120.25320808Q75.448291875,120.26032245,75.592581875,120.27453395Q75.736871875,120.28874545,75.880291875,120.31001995Q76.023711875,120.33129445,76.165921875,120.35958075Q76.308121875,120.38786675,76.448771875,120.42309675Q76.589411875,120.45832675,76.728161875,120.50041475Q76.866911875,120.54250275,77.003421875,120.59134875Q77.139941875,120.64019475,77.273891875,120.69567975Q77.407841875,120.75116575,77.538911875,120.81315675Q77.669981875,120.87514775,77.79785187499999,120.94349575Q77.925721875,121.01184375,78.05009187499999,121.08638375Q78.174451875,121.16092375,78.295001875,121.24147575Q78.415561875,121.32202375,78.532021875,121.40840375Q78.648471875,121.49477375,78.760551875,121.58675375Q78.872631875,121.67873375,78.980061875,121.77610375Q79.087491875,121.87347375,79.190021875,121.97599375Q79.292521875,122.07851375,79.389921875,122.18594375Q79.48732187499999,122.29337375,79.579221875,122.40545375Q79.671221875,122.51753375,79.757621875,122.63399375Q79.844021875,122.75045375,79.924521875,122.87100375Q80.005121875,122.99156375,80.079621875,123.11592375Q80.154121875,123.24028375,80.222521875,123.36815375Q80.290821875,123.49602375,80.352821875,123.62709375Q80.414821875,123.75816375,80.470321875,123.89211375Q80.525821875,124.02607375,80.574621875,124.16258375Q80.623521875,124.29910375,80.665621875,124.43784375Q80.707721875,124.57659375,80.74292187500001,124.71724375Q80.778121875,124.85788375,80.806421875,125.00009375Q80.834721875,125.14229375,80.856021875,125.28571375Q80.877221875,125.42913375,80.891521875,125.57342375Q80.905721875,125.71772375,80.912821875,125.86253375Q80.919921875,126.00735375,80.919921875,126.15234375Z"
+          fill="#FFFFFF"
+          fill-opacity="1"
+          style="mix-blend-mode: passthrough"
+        />
+      </g>
+    </g>
+  </svg>
+</template>

package/src/components/FilesCard/src/fileSvg/video.vue

@@ -0,0 +1,38 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    fill="none"
+    version="1.1"
+    width="1em"
+    height="1em"
+    viewBox="0 0 150 175"
+  >
+    <g>
+      <g>
+        <path
+          d="M103.622,0L27.5981,0C12.355,0,0,12.3648,0,27.6155L0,147.384C0,162.637,12.357,175,27.5981,175L122.402,175C137.645,175,150,162.635,150,147.384L150,46.405C150,40.1855,147.532,34.2219,143.136,29.8255L120.191,6.86627C115.797,2.46982,109.837,0,103.622,0Z"
+          fill="currentColor"
+          fill-opacity="1"
+          style="mix-blend-mode: passthrough"
+        />
+      </g>
+      <g>
+        <path
+          d="M143.6605,30.808L120.3316,6.73925C116.9845,3.28624,112.7164,0.940079,108.0716,0L108.0716,27.0143C108.0716,35.591,114.8101,42.5433,123.1232,42.5433L150,42.5433C148.98399999999998,38.1003,146.788,34.0369,143.6605,30.808ZM72.9483,74.8181L63.1549,63L52.06524,63L61.8587,74.8181L72.9483,74.8181ZM101.7527,74.8181L91.95920000000001,63L80.86959999999999,63L90.663,74.8181L101.7527,74.8181ZM87.3506,74.8181L77.55709999999999,63L66.4674,63L76.26089999999999,74.8181L87.3506,74.8181ZM105.9293,63L95.27170000000001,63L105.0652,74.8181L110.25,74.8181L110.25,67.4318C110.25,64.9204,108.3777,63,105.9293,63ZM48.75271,63L48.32065,63C45.87232,63,44,64.9204,44,67.4318L44,74.8181L58.5462,74.8181L48.75271,63ZM44,123.568C44,126.08,45.87232,128,48.32065,128L105.9293,128C108.3777,128,110.25,126.08,110.25,123.568L110.25,77.7727L44.00000388806,77.7727L44,123.568ZM67.0435,91.0682C67.0435,88.5568,69.0598,87.375,71.3642,87.375C72.0842,87.375,72.9483,87.5227,73.6685,87.9659L90.0869,97.7159C92.9674,99.3409,92.9674,103.477,90.0869,105.102L73.6685,114.852C72.9483,115.295,72.2283,115.443,71.3642,115.443C69.0598,115.443,67.0435,114.261,67.0435,111.75L67.0435,91.0682Z"
+          fill="#000000"
+          fill-opacity="0.20000000298023224"
+          style="mix-blend-mode: passthrough"
+        />
+      </g>
+      <g>
+        <path
+          d="M72.4022,71.8181L62.7935,60.000000528314L51.91306,60.000000528314L61.5218,71.8181L72.4022,71.8181ZM100.663,71.8181L91.0543,60.000000528314L80.1739,60.000000528314L89.7826,71.8181L100.663,71.8181ZM86.5326,71.8181L76.9239,60.000000528314L66.0435,60.000000528314L75.6522,71.8181L86.5326,71.8181ZM104.76089999999999,60L94.3043,60L103.913,71.8181L109,71.8181L109,64.43182C109,61.92043,107.163,60.000000528314,104.76089999999999,60ZM48.66304,60L48.23913,60C45.837,60,44,61.92043,44,64.43182L44,71.8181L58.2718,71.8181L48.66304,60ZM44,120.56819999999999C44,123.0796,45.837,125,48.23913,125L104.76089999999999,125C107.163,125,109,123.0796,109,120.56819999999999L109,74.7727L44.00000202137,74.7727L44,120.56819999999999ZM66.6087,88.0682C66.6087,85.5568,68.5869,84.375,70.8479,84.375C71.5543,84.375,72.4022,84.5227,73.1087,84.9659L89.2174,94.7159C92.0435,96.3409,92.0435,100.4773,89.2174,102.1023L73.1087,111.8523C72.4022,112.2955,71.6957,112.44319999999999,70.8479,112.44319999999999C68.5869,112.44319999999999,66.6087,111.26140000000001,66.6087,108.75L66.6087,88.0682Z"
+          fill="#FFFFFF"
+          fill-opacity="1"
+          style="mix-blend-mode: passthrough"
+        />
+      </g>
+    </g>
+  </svg>
+</template>

package/src/components/FilesCard/src/fileSvg/word.vue

@@ -0,0 +1,38 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    fill="none"
+    version="1.1"
+    width="1em"
+    height="1em"
+    viewBox="0 0 150 175"
+  >
+    <g>
+      <g>
+        <path
+          d="M103.622,0L27.5981,0C12.355,0,0,12.3648,0,27.6155L0,147.384C0,162.637,12.357,175,27.5981,175L122.402,175C137.645,175,150,162.635,150,147.384L150,46.405C150,40.1855,147.532,34.2219,143.136,29.8255L120.191,6.86627C115.797,2.46982,109.837,0,103.622,0Z"
+          fill="currentColor"
+          fill-opacity="1"
+          style="mix-blend-mode: passthrough"
+        />
+      </g>
+      <g>
+        <path
+          d="M101.48797106933594,57.88857593970299C98.90057106933594,57.88857593970299,96.80137106933594,59.989075939702985,96.80137106933594,62.57807593970299L96.80137106933594,106.78877593970299L78.37727106933593,88.56017593970299C76.55537106933593,86.758575939703,73.62427106933593,86.75267593970298,71.79847106933593,88.55037593970299L53.19664106933594,106.83977593970299L53.19664106933594,62.44917593970299C53.19664106933594,59.86007593970299,51.097441069335936,57.75957593970299,48.51005106933594,57.75957593970299C45.92267106933594,57.75957593970299,43.82347106933594,59.86007593970299,43.82347106933594,62.44917593970299L43.82347106933594,118.02177593970299C43.82347106933594,119.91177593970299,44.95606106933594,121.61577593970298,46.69791106933594,122.346775939703C48.438791069335934,123.07677593970298,50.44772106933594,122.69077593970299,51.79457106933594,121.367775939703L75.07327106933593,98.48237593970299L98.19377106933594,121.35777593970299C99.07137106933594,122.22577593970298,100.25587106933594,122.712775939703,101.48997106933594,122.71177593970299C102.09727106933593,122.71177593970299,102.71037106933593,122.59277593970299,103.29427106933593,122.349775939703C105.03867106933595,121.62177593970299,106.17457106933594,119.91477593970299,106.17457106933594,118.02177593970299L106.17457106933594,62.57807593970299C106.17457106933594,59.989075939702985,104.07737106933594,57.88857593970299,101.48797106933594,57.88857593970299ZM143.13607106933594,29.825575939702986L120.19137106933594,6.866355939702988C116.89937106933594,3.5725259397029876,112.70147106933594,1.3345169397029877,108.13317106933594,0.43777593970298767L108.13317106933594,26.206775939702986C108.13317106933594,34.388075939702986,114.76077106933593,41.019875939702985,122.93687106933594,41.019875939702985L149.37147106933594,41.019875939702985C148.37247106933594,36.78137593970299,146.21347106933592,32.90507593970299,143.13607106933594,29.825575939702986Z"
+          fill="#000000"
+          fill-opacity="0.20000000298023224"
+          style="mix-blend-mode: passthrough"
+        />
+      </g>
+      <g>
+        <path
+          d="M101.48997106933594,120.36685296020508C100.27927106933595,120.36685296020508,99.08807106933594,119.89785296020507,98.19367106933593,119.01275296020508L75.07327106933593,96.13755296020508L51.79457106933594,119.02255296020508C50.44803106933594,120.34665296020508,48.43872106933594,120.73265296020507,46.69791106933594,120.00145296020507C44.956681069335936,119.27155296020507,43.82347106933594,117.56685296020507,43.82347106933594,115.67735296020507L43.82347106933594,60.10429296020508C43.82347106933594,57.51527296020508,45.92267106933594,55.41475296020508,48.51005106933594,55.41475296020508C51.097441069335936,55.41475296020508,53.19664106933594,57.51527296020508,53.19664106933594,60.10429296020508L53.19664106933594,104.49665296020507L71.79847106933593,86.20745296020507C73.62627106933594,84.41175296020508,76.55727106933594,84.41565296020508,78.37727106933593,86.21725296020507L96.80137106933594,104.44585296020509L96.80137106933594,60.23325296020508C96.80137106933594,57.64424296020508,98.90057106933594,55.54371596020508,101.48797106933594,55.54371596020508C104.07537106933594,55.54371596020508,106.17457106933594,57.64424296020508,106.17457106933594,60.23325296020508L106.17457106933594,115.67735296020507C106.17457106933594,117.56875296020507,105.03807106933593,119.27655296020508,103.29427106933593,120.00535296020507C102.72247106933594,120.24345296020508,102.10927106933593,120.36625296020507,101.48997106933594,120.36685296020508Z"
+          fill="#FFFFFF"
+          fill-opacity="1"
+          style="mix-blend-mode: passthrough"
+        />
+      </g>
+    </g>
+  </svg>
+</template>

package/src/components/FilesCard/src/fileSvg/zip.vue

@@ -0,0 +1,38 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    fill="none"
+    version="1.1"
+    width="1em"
+    height="1em"
+    viewBox="0 0 150 175"
+  >
+    <g>
+      <g>
+        <path
+          d="M103.622,0L27.5981,0C12.355,0,0,12.3648,0,27.6155L0,147.384C0,162.637,12.357,175,27.5981,175L122.402,175C137.645,175,150,162.635,150,147.384L150,46.405C150,40.1855,147.532,34.2219,143.136,29.8255L120.191,6.86627C115.797,2.46982,109.837,-0.00000447229,103.622,0Z"
+          fill="currentColor"
+          fill-opacity="1"
+          style="mix-blend-mode: passthrough"
+        />
+      </g>
+      <g>
+        <path
+          d="M34.325330513916015,25.79257593970299L48.29132051391602,25.79257593970299C49.82622051391601,25.79257593970299,51.072020513916016,24.545875939702988,51.072020513916016,23.010075939702986L51.072020513916016,9.035265939702988C51.072020513916016,7.497485939702988,49.82622051391601,6.252805939702988,48.29132051391602,6.252805939702988L34.325330513916015,6.252805939702988C32.790480513916016,6.252805939702988,31.544626473216017,7.499445939702988,31.544626473216017,9.035265939702988L31.544626473216017,23.010075939702986C31.544626473216017,24.545875939702988,32.790480513916016,25.79257593970299,34.325330513916015,25.79257593970299ZM67.81882051391602,25.79257593970299L53.85272051391601,25.79257593970299C52.317920513916015,25.79257593970299,51.072020513916016,27.03917593970299,51.072020513916016,28.574975939702988L51.072020513916016,42.549875939702986C51.072020513916016,44.08767593970299,52.317920513916015,45.33227593970299,53.85272051391601,45.33227593970299L67.81882051391602,45.33227593970299C69.35362051391601,45.33227593970299,70.59952051391602,44.08567593970299,70.59952051391602,42.549875939702986L70.59952051391602,28.575075939702987C70.59952051391602,27.03917593970299,69.35362051391601,25.79257593970299,67.81882051391602,25.79257593970299ZM34.325330513916015,64.87207593970298L48.29132051391602,64.87207593970298C49.82622051391601,64.87207593970298,51.072020513916016,63.62547593970299,51.072020513916016,62.08957593970299L51.072020513916016,48.11477593970299C51.072020513916016,46.57697593970299,49.82622051391601,45.33227593970299,48.29132051391602,45.33227593970299L34.325330513916015,45.33227593970299C32.790480513916016,45.33227593970299,31.544626473216017,46.578975939702985,31.544626473216017,48.11477593970299L31.544626473216017,62.08957593970299C31.544626473216017,63.62547593970299,32.790480513916016,64.87207593970298,34.325330513916015,64.87207593970298ZM67.81882051391602,64.87207593970298L53.85272051391601,64.87207593970298C52.317920513916015,64.87207593970298,51.072020513916016,66.11867593970298,51.072020513916016,67.65447593970299L51.072020513916016,81.62937593970298C51.072020513916016,83.16717593970299,52.317920513916015,84.411875939703,53.85272051391601,84.411875939703L67.81882051391602,84.411875939703C69.35362051391601,84.411875939703,70.59952051391602,83.16517593970299,70.59952051391602,81.62937593970298L70.59952051391602,67.65447593970299C70.59952051391602,66.11867593970298,69.35362051391601,64.87207593970298,67.81882051391602,64.87207593970298ZM63.77272051391601,95.19977593970299L37.580550513916016,95.19977593970299C34.24722051391601,95.19977593970299,31.544620513916016,97.90407593970299,31.544620513916016,101.239775939703L31.544620513916016,131.61977593970298C31.544620513916016,134.955775939703,34.24722051391601,137.659775939703,37.580550513916016,137.659775939703L63.77272051391601,137.659775939703C67.10602051391601,137.659775939703,69.80862051391603,134.955775939703,69.80862051391603,131.61977593970298L69.80862051391603,101.239775939703C69.80862051391603,97.90407593970299,67.10602051391601,95.19977593970299,63.77272051391601,95.19977593970299ZM62.810020513916015,127.35977593970298C62.810020513916015,130.040775939703,60.63852051391602,132.213775939703,57.959420513916015,132.213775939703L43.39192051391602,132.213775939703C40.71275051391601,132.213775939703,38.54130051391601,130.040775939703,38.54130051391601,127.35977593970298L38.54130051391601,122.01377593970298C38.54130051391601,119.33377593970299,40.71275051391601,117.16077593970299,43.39192051391602,117.16077593970299L57.959420513916015,117.16077593970299C60.63852051391602,117.16077593970299,62.810020513916015,119.33277593970298,62.810020513916015,122.01377593970298L62.810020513916015,127.35977593970298ZM143.13562051391602,29.825575939702986L120.19142051391601,6.866355939702988C116.89942051391601,3.5725259397029876,112.70152051391601,1.3345199397029877,108.13322051391602,0.43777593970298767L108.13322051391602,26.206775939702986C108.13322051391602,34.388075939702986,114.76082051391602,41.019875939702985,122.93692051391602,41.019875939702985L149.371620513916,41.019875939702985C148.371620513916,36.78157593970299,146.21262051391602,32.905375939702985,143.13562051391602,29.825575939702986Z"
+          fill="#000000"
+          fill-opacity="0.20000000298023224"
+          style="mix-blend-mode: passthrough"
+        />
+      </g>
+      <g>
+        <path
+          d="M34.325330513916015,23.44775087814331L48.29132051391602,23.44775087814331C49.82622051391601,23.44775087814331,51.072020513916016,22.20105087814331,51.072020513916016,20.66525087814331L51.072020513916016,6.690410878143311C51.072020513916016,5.15263087814331,49.82622051391601,3.9079508781433105,48.29132051391602,3.9079508781433105L34.325330513916015,3.9079508781433105C32.790480513916016,3.9079508781433105,31.544626473216017,5.154590878143311,31.544626473216017,6.690410878143311L31.544626473216017,20.66525087814331C31.544626473216017,22.20105087814331,32.790480513916016,23.44775087814331,34.325330513916015,23.44775087814331ZM67.81882051391602,23.44775087814331L53.85272051391601,23.44775087814331C52.317920513916015,23.44775087814331,51.072020513916016,24.69435087814331,51.072020513916016,26.23015087814331L51.072020513916016,40.20505087814331C51.072020513916016,41.74275087814331,52.317920513916015,42.987450878143314,53.85272051391601,42.987450878143314L67.81882051391602,42.987450878143314C69.35362051391601,42.987450878143314,70.59952051391602,41.74085087814331,70.59952051391602,40.20505087814331L70.59952051391602,26.23015087814331C70.59952051391602,24.69435087814331,69.35362051391601,23.44775087814331,67.81882051391602,23.44775087814331ZM34.325330513916015,62.52725087814331L48.29132051391602,62.52725087814331C49.82622051391601,62.52725087814331,51.072020513916016,61.28055087814331,51.072020513916016,59.74475087814331L51.072020513916016,45.76995087814331C51.072020513916016,44.23215087814331,49.82622051391601,42.987450878143314,48.29132051391602,42.987450878143314L34.325330513916015,42.987450878143314C32.790480513916016,42.987450878143314,31.544626473216017,44.23405087814331,31.544626473216017,45.76995087814331L31.544626473216017,59.74475087814331C31.544626473216017,61.28055087814331,32.790480513916016,62.52725087814331,34.325330513916015,62.52725087814331ZM67.81882051391602,62.52725087814331L53.85272051391601,62.52725087814331C52.317920513916015,62.52725087814331,51.072020513916016,63.773850878143314,51.072020513916016,65.30965087814332L51.072020513916016,79.2845508781433C51.072020513916016,80.82235087814331,52.317920513916015,82.06695087814332,53.85272051391601,82.06695087814332L67.81882051391602,82.06695087814332C69.35362051391601,82.06695087814332,70.59952051391602,80.82035087814332,70.59952051391602,79.2845508781433L70.59952051391602,65.30965087814332C70.59952051391602,63.773850878143314,69.35362051391601,62.52725087814331,67.81882051391602,62.52725087814331ZM63.77272051391601,92.85485087814331L37.580550513916016,92.85485087814331C34.24722051391601,92.85485087814331,31.544620513916016,95.55915087814331,31.544620513916016,98.8945508781433L31.544620513916016,129.27495087814333C31.544620513916016,132.6099508781433,34.24722051391601,135.31495087814332,37.580550513916016,135.31495087814332L63.77272051391601,135.31495087814332C67.10602051391601,135.31495087814332,69.80862051391603,132.6099508781433,69.80862051391603,129.27495087814333L69.80862051391603,98.8945508781433C69.80862051391603,95.55915087814331,67.10602051391601,92.85485087814331,63.77272051391601,92.85485087814331ZM62.810020513916015,125.01495087814331C62.810020513916015,127.69595087814331,60.63852051391602,129.86895087814332,57.959420513916015,129.86895087814332L43.39192051391602,129.86895087814332C40.71275051391601,129.86895087814332,38.54130051391601,127.69595087814331,38.54130051391601,125.01495087814331L38.54130051391601,119.6689508781433C38.54130051391601,116.98795087814331,40.71275051391601,114.81595087814331,43.39192051391602,114.81595087814331L57.959420513916015,114.81595087814331C60.63852051391602,114.81595087814331,62.810020513916015,116.98795087814331,62.810020513916015,119.6689508781433L62.810020513916015,125.01495087814331Z"
+          fill="#FFFFFF"
+          fill-opacity="1"
+          style="mix-blend-mode: passthrough"
+        />
+      </g>
+    </g>
+  </svg>
+</template>

package/src/components/FilesCard/src/main.vue

@@ -0,0 +1,405 @@
+<template>
+  <div
+    :style="{
+      '--elx-files-card-icon-size': `${_iconSize}`,
+      '--elx-files-card-max-width': `${maxWidth}`,
+      ...styleConfig,
+      ...(isHovered && hoverStyle ? hoverStyle : {}),
+    }"
+    class="el-x-filescard"
+    :class="{
+      'el-x-filescard-square': isSquareVariant && isImageFile,
+      'el-x-filescard-hovered': isHovered,
+      'el-x-filescard-error': status === 'error',
+      'el-x-filescard-done': status === 'done',
+      'el-x-filescard-uploading': status === 'uploading',
+    }"
+    @mouseenter="isHovered = true"
+    @mouseleave="isHovered = false"
+  >
+    <div
+      v-if="status === 'uploading' && !(isSquareVariant && isImageFile)"
+      class="el-x-filescard-progress"
+      :style="{ width: `${percent || 0}%` }"
+    />
+
+    <slot
+      v-if="$slots.icon || _fileType"
+      name="icon"
+      :item="propsData"
+    >
+      <component
+        :is="svgIconMap[_fileType]"
+        v-if="!isImageFile"
+        class="el-x-filescard-icon"
+        :color="iconColor || colorMap[_fileType]"
+      />
+
+      <!-- 图片文件处理区域（新增遮罩层逻辑） -->
+      <template v-if="isImageFile">
+        <div
+          class="image-preview-container"
+          :class="{
+            'image-preview-container-square': isSquareVariant && isImageFile,
+          }"
+          @mouseenter="imageHovered = true"
+          @mouseleave="imageHovered = false"
+        >
+          <el-image
+            v-if="_previewImgUrl"
+            ref="imgRef"
+            class="el-x-filescard-img"
+            :src="_previewImgUrl"
+            :preview-src-list="imgPreview ? [_previewImgUrl] : []"
+            fit="cover"
+            :show-progress="false"
+            hide-on-click-modal
+            @show="handlePreviewAction('self')"
+          />
+
+          <!-- 无预览地址时显示默认图标 -->
+          <component
+            :is="svgIconMap[_fileType]"
+            v-else
+            class="el-x-filescard-img"
+            :color="iconColor || colorMap[_fileType]"
+          />
+
+          <!-- 遮罩层 -->
+          <!-- 悬停时才展示 -->
+          <transition name="fade">
+            <slot
+              v-if="imageHovered && _previewImgUrl && imgPreviewMask && imgPreview"
+              name="image-preview-actions"
+              :item="{ ...propsData, prefix: namePrefix, suffix: nameSuffix }"
+            >
+              <div
+                class="preview-mask"
+                @click="handlePreviewAction('mask')"
+              >
+                <i class="el-icon-view"></i>
+                <span>预览</span>
+              </div>
+            </slot>
+          </transition>
+
+          <!-- 如果有状态，不悬停，也展示 -->
+          <!-- 状态判断显示区域 -->
+          <div
+            v-if="status === 'uploading' && isSquareVariant"
+            class="preview-mask-loading"
+          >
+            <el-progress
+              color="#fff"
+              type="circle"
+              :percentage="percent"
+              class="circle-progress"
+            />
+          </div>
+          <div
+            v-else-if="status === 'error' && isSquareVariant"
+            class="preview-mask-error"
+          >
+            <span class="error-text">{{ errorTip || '上传失败' }}</span>
+          </div>
+        </div>
+      </template>
+    </slot>
+
+    <slot
+      v-if="($slots.content || name || description) && !(isSquareVariant && isImageFile)"
+      name="content"
+      :item="propsData"
+    >
+      <div class="el-x-filescard-content">
+        <div
+          v-if="name"
+          class="el-x-filescard-name"
+        >
+          <slot
+            name="name-prefix"
+            :item="{ ...propsData, prefix: namePrefix, suffix: nameSuffix }"
+          >
+            <div class="el-x-filescard-name-prefix">{{ namePrefix }}</div>
+          </slot>
+          <slot
+            name="name-suffix"
+            :item="{ ...propsData, prefix: namePrefix, suffix: nameSuffix }"
+          >
+            <div class="el-x-filescard-name-suffix">{{ nameSuffix }}</div>
+          </slot>
+        </div>
+
+        <slot
+          name="description"
+          :item="{ ...propsData, prefix: namePrefix, suffix: nameSuffix }"
+        >
+          <div
+            class="el-x-filescard-description"
+            :class="{
+              'el-x-filescard-description-error': status === 'error',
+              'el-x-filescard-description-done': status === 'done',
+              'el-x-filescard-description-uploading': status === 'uploading',
+            }"
+          >
+            {{ _description }}
+          </div>
+        </slot>
+      </div>
+    </slot>
+
+    <div
+      v-if="showDelIcon && isHovered"
+      class="el-x-filescard-delete-icon"
+      @click="handleDelete"
+    >
+      <slot
+        name="del-icon"
+        :item="propsData"
+      >
+        <i class="el-icon-error"></i>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+  import svgIconMap from './fileSvg/index.js';
+  import { colorMap } from './options.js';
+  import { previewImage, getFileType, getSize } from '../../../utils/index.js';
+
+  export default {
+    name: 'ElXFilesCard',
+    props: {
+      uid: {
+        type: [String, Number],
+        default: undefined,
+      },
+      name: {
+        type: String,
+        default: undefined,
+      },
+      fileSize: {
+        type: [String, Number],
+        default: undefined,
+      },
+      fileType: {
+        type: String,
+        default: undefined,
+      },
+      description: {
+        type: String,
+        default: undefined,
+      },
+      url: {
+        type: String,
+        default: undefined,
+      },
+      thumbUrl: {
+        type: String,
+        default: undefined,
+      },
+      imgFile: {
+        type: [Object, File],
+        default: undefined,
+      },
+      iconSize: {
+        type: String,
+        default: '42px',
+      },
+      iconColor: {
+        type: String,
+        default: undefined,
+      },
+      showDelIcon: {
+        type: Boolean,
+        default: false,
+      },
+      maxWidth: {
+        type: String,
+        default: '236px',
+      },
+      styleConfig: {
+        type: Object,
+        default: undefined,
+      },
+      hoverStyle: {
+        type: Object,
+        default: undefined,
+      },
+      imgVariant: {
+        type: String,
+        default: 'rectangle',
+      },
+      imgPreview: {
+        type: Boolean,
+        default: true,
+      },
+      imgPreviewMask: {
+        type: Boolean,
+        default: true,
+      },
+      status: {
+        type: String,
+        default: undefined,
+      },
+      percent: {
+        type: Number,
+        default: undefined,
+      },
+      errorTip: {
+        type: String,
+        default: undefined,
+      },
+    },
+    data() {
+      return {
+        namePrefix: '',
+        nameSuffix: '',
+        isHovered: false,
+        imageHovered: false,
+        svgIconMap: svgIconMap,
+        colorMap: colorMap,
+        previewImg: undefined,
+      };
+    },
+    computed: {
+      propsData() {
+        return {
+          uid: this.uid,
+          name: this.name,
+          fileSize: this.fileSize,
+          fileType: this.fileType,
+          description: this.description,
+          url: this.url,
+          thumbUrl: this.thumbUrl,
+          imgFile: this.imgFile,
+          iconSize: this.iconSize,
+          iconColor: this.iconColor,
+          showDelIcon: this.showDelIcon,
+          maxWidth: this.maxWidth,
+          styleConfig: this.styleConfig,
+          hoverStyle: this.hoverStyle,
+          imgVariant: this.imgVariant,
+          imgPreview: this.imgPreview,
+          imgPreviewMask: this.imgPreviewMask,
+          status: this.status,
+          percent: this.percent,
+          errorTip: this.errorTip,
+        };
+      },
+      _fileType() {
+        if (this.fileType) return this.fileType;
+        if (!this.name) return undefined;
+        if (!this.nameSuffix) {
+          return 'unknown';
+        }
+        return getFileType(this.nameSuffix).lowerCase;
+      },
+      _fileTypeUpperCase() {
+        if (this.fileType) return this.fileType;
+        if (!this.name) return '';
+        if (!this.nameSuffix) {
+          return 'Unknown';
+        }
+        return getFileType(this.nameSuffix).upperCase;
+      },
+      _description() {
+        if (this.description) {
+          return this.description;
+        }
+        const typeStr = this._fileTypeUpperCase;
+        const sizeStr = this.fileSize ? `・${getSize(this.fileSize)}` : '';
+        if (this.status === 'uploading') {
+          return `上传中...${`・${this.percent || 0}`}%${sizeStr}`;
+        }
+        if (this.status === 'error') {
+          return this.errorTip || '上传失败';
+        }
+        return `${typeStr}${sizeStr}`;
+      },
+      isImageFile() {
+        return this._fileType === 'image';
+      },
+      isSquareVariant() {
+        return this.imgVariant === 'square';
+      },
+      _previewImgUrl() {
+        if (!this.isImageFile) return undefined;
+        if (this.thumbUrl) return this.thumbUrl;
+        if (this.url) return this.url;
+        return this.previewImg;
+      },
+      _iconSize() {
+        if (
+          (this.isSquareVariant && this.isImageFile && !this.iconSize) ||
+          (this.isSquareVariant && this.isImageFile && this.iconSize === '42px')
+        )
+          return '64px';
+        return this.iconSize;
+      },
+    },
+    watch: {
+      imgFile: {
+        handler: async function (newFile) {
+          if (newFile) {
+            try {
+              const url = await previewImage(newFile);
+              this.previewImg = url;
+              // this.$set(this, 'previewImg', url)
+            } catch (error) {
+              console.error('Preview failed:', error);
+              this.previewImg = undefined;
+            }
+          } else {
+            this.$set(this, 'previewImg', undefined);
+            this.previewImg = undefined;
+          }
+        },
+        deep: true,
+        immediate: true,
+      },
+    },
+    mounted() {
+      this.parseFileName();
+    },
+    methods: {
+      handleDelete() {
+        this.$emit('delete', {
+          ...this.propsData,
+        });
+      },
+      handlePreviewAction(type) {
+        if (this.imgPreview && this.$refs.imgRef && this._previewImgUrl && type === 'mask') {
+          console.log(this.$refs.imgRef);
+          this.$refs.imgRef.clickHandler();
+          // this.$refs.imgRef.showPreview()
+        }
+        if (type === 'self') {
+          this.$emit('imagePreview', {
+            ...this.propsData,
+          });
+        }
+      },
+      parseFileName() {
+        if (!this.name) {
+          this.namePrefix = '';
+          this.nameSuffix = '';
+          return;
+        }
+
+        const lastDotIndex = this.name.lastIndexOf('.');
+        if (lastDotIndex === -1) {
+          this.namePrefix = this.name;
+          this.nameSuffix = '';
+        } else {
+          this.namePrefix = this.name.substring(0, lastDotIndex);
+          this.nameSuffix = this.name.substring(lastDotIndex);
+        }
+      },
+    },
+  };
+</script>
+<style lang="scss" scoped>
+  @import '../../../styles/FilesCard.scss';
+</style>

package/src/components/FilesCard/src/options.js

@@ -0,0 +1,18 @@
+export const colorMap = {
+  word: '#0078D4',
+  excel: '#00C851',
+  ppt: '#FF5722',
+  pdf: '#E53935',
+  txt: '#424242',
+  mark: '#6C6C6C',
+  image: '#FF80AB',
+  audio: '#FF7878',
+  video: '#8B72F7',
+  three: '#29B6F6',
+  code: '#00008B',
+  database: '#FF9800',
+  link: '#2962FF',
+  zip: '#673AB7',
+  file: '#FFC757',
+  unknown: '#6E9DA4',
+};