feat: upload组件
This commit is contained in:
baiqi
刘瑞斌
parent
0ce383421e
commit
8920a12690
|
|
@ -0,0 +1,10 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_40_79316)">
|
||||
<path d="M15 1C15.3038 1 15.5911 1.13809 15.7809 1.3753L19.7727 6.3652L19.8149 6.42032L19.82 6.428L19.8294 6.4414L19.84 6.459L19.82 6.428L19.7809 6.37531L19.845 6.467L19.8722 6.51088C19.8862 6.53547 19.8991 6.56083 19.9109 6.58679C19.9167 6.60014 19.9224 6.61347 19.9278 6.62692C19.9395 6.65535 19.9497 6.68443 19.9585 6.71409C19.9612 6.72378 19.964 6.73385 19.9667 6.74397C19.9789 6.78946 19.9878 6.83591 19.9933 6.88338L20 7V9H21C22.1046 9 23 9.89543 23 11V18C23 19.1046 22.1046 20 21 20H20V22C20 22.5523 19.5523 23 19 23H5C4.44772 23 4 22.5523 4 22V20H3C1.89543 20 1 19.1046 1 18V11C1 9.89543 1.89543 9 3 9H4V2C4 1.44772 4.44772 1 5 1H15ZM18 20H6V21H18V20ZM21 11H3V18H21V11ZM6.18333 11.4478C6.87042 11.4478 7.41055 11.5867 7.8037 11.8645C8.19686 12.1423 8.48894 12.5689 8.67994 13.1444L7.19164 13.4755C7.13955 13.3094 7.08498 13.1878 7.02793 13.1109C6.93367 12.9819 6.81833 12.8827 6.68191 12.8133C6.54548 12.7438 6.39293 12.7091 6.22426 12.7091C5.84226 12.7091 5.54956 12.8629 5.34616 13.1705C5.19237 13.3987 5.11548 13.7571 5.11548 14.2457C5.11548 14.851 5.20726 15.2658 5.39081 15.4903C5.57437 15.7148 5.83234 15.827 6.16472 15.827C6.48719 15.827 6.7309 15.7365 6.89585 15.5554C7.0608 15.3744 7.18048 15.1114 7.2549 14.7666L8.73203 15.2131C8.63281 15.6274 8.47654 15.9734 8.26321 16.2512C8.04989 16.529 7.7851 16.7386 7.46884 16.88C7.15258 17.0214 6.75012 17.0921 6.26146 17.0921C5.66863 17.0921 5.18431 17.0059 4.80852 16.8335C4.43273 16.6611 4.1084 16.3579 3.83555 15.9238C3.5627 15.4897 3.42627 14.9341 3.42627 14.2569C3.42627 13.354 3.66626 12.6601 4.14623 12.1752C4.6262 11.6902 5.30524 11.4478 6.18333 11.4478ZM11.7793 11.4478C12.4763 11.4478 13.0078 11.5774 13.3736 11.8366C13.7395 12.0958 13.9572 12.5082 14.0266 13.0737L12.4379 13.1667C12.3957 12.9212 12.307 12.7426 12.1718 12.6309C12.0367 12.5193 11.85 12.4635 11.6119 12.4635C11.4159 12.4635 11.2683 12.5051 11.1691 12.5882C11.0699 12.6713 11.0203 12.7723 11.0203 12.8914C11.0203 12.9782 11.0612 13.0563 11.1431 13.1258C11.2224 13.1977 11.4109 13.2647 11.7086 13.3267C12.4453 13.4855 12.973 13.6461 13.2918 13.8086C13.6105 13.971 13.8424 14.1726 13.9876 14.4132C14.1327 14.6538 14.2052 14.9229 14.2052 15.2206C14.2052 15.5703 14.1085 15.8928 13.915 16.188C13.7215 16.4831 13.4511 16.707 13.1039 16.8596C12.7566 17.0121 12.3188 17.0884 11.7905 17.0884C10.8628 17.0884 10.2203 16.9098 9.86313 16.5526C9.50594 16.1954 9.30378 15.7415 9.25665 15.1908L10.8603 15.0903C10.895 15.3508 10.9657 15.5492 11.0724 15.6857C11.246 15.9064 11.494 16.0168 11.8165 16.0168C12.0571 16.0168 12.2425 15.9604 12.3728 15.8475C12.503 15.7347 12.5681 15.6038 12.5681 15.455C12.5681 15.3136 12.5061 15.1871 12.3821 15.0755C12.258 14.9638 11.9703 14.8584 11.5189 14.7592C10.7797 14.593 10.2526 14.3722 9.93754 14.0969C9.62004 13.8216 9.46129 13.4706 9.46129 13.0439C9.46129 12.7637 9.54252 12.4989 9.705 12.2496C9.86747 12.0003 10.1118 11.8043 10.438 11.6617C10.7642 11.5191 11.2113 11.4478 11.7793 11.4478ZM16.2777 11.5408L17.5055 15.4661L18.7147 11.5408H20.4263L18.4022 16.9954H16.5753L14.514 11.5408H16.2777ZM13 3H6V9H18V8H14C13.4477 8 13 7.55228 13 7V3ZM15 3.6V6H16.92L15 3.6Z" fill="#00C261"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_40_79316">
|
||||
<rect width="24" height="24" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
|
|
@ -0,0 +1,10 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_40_79318)">
|
||||
<path d="M20.3333 1C21.8061 1 23 2.1939 23 3.66667V20.3333C23 21.8061 21.8061 23 20.3333 23H3.66667C2.1939 23 1 21.8061 1 20.3333V3.66667C1 2.19391 2.19391 1 3.66667 1H20.3333ZM15.885 14.4591L11.0023 18.8544C10.66 19.1625 10.1568 19.1939 9.78151 18.9452L9.68254 18.8704L6.402 16.0581L2.99994 18.611L3 20.3333C3 20.7015 3.29847 21 3.66667 21H20.3333C20.7015 21 21 20.7015 21 20.3333L20.9999 19.109L15.885 14.4591ZM20.3333 3H3.66667C3.29848 3 3 3.29848 3 3.66667L2.99994 16.111L5.84444 13.9778C6.2194 13.6966 6.73937 13.7135 7.09524 14.0185L10.317 16.7791L15.2199 12.3678C15.6017 12.0243 16.1816 12.0257 16.5616 12.3712L20.9999 16.406L21 3.66667C21 3.29847 20.7015 3 20.3333 3ZM8.66667 4.88889C10.7531 4.88889 12.4444 6.58027 12.4444 8.66667C12.4444 10.7531 10.7531 12.4444 8.66667 12.4444C6.58027 12.4444 4.88889 10.7531 4.88889 8.66667C4.88889 6.58027 6.58027 4.88889 8.66667 4.88889ZM8.66667 6.88889C7.68484 6.88889 6.88889 7.68484 6.88889 8.66667C6.88889 9.64849 7.68484 10.4444 8.66667 10.4444C9.64849 10.4444 10.4444 9.64849 10.4444 8.66667C10.4444 7.68484 9.64849 6.88889 8.66667 6.88889Z" fill="#FFC14E"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_40_79318">
|
||||
<rect width="24" height="24" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1,10 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_40_79319)">
|
||||
<path d="M15 1C15.3038 1 15.5911 1.13809 15.7809 1.3753L19.7727 6.3652L19.8149 6.42032L19.82 6.428L19.8294 6.4414L19.84 6.459L19.82 6.428L19.7809 6.37531L19.845 6.467L19.8722 6.51088C19.8862 6.53547 19.8991 6.56083 19.9109 6.58679C19.9167 6.60014 19.9224 6.61347 19.9278 6.62692C19.9395 6.65535 19.9497 6.68443 19.9585 6.71409C19.9612 6.72378 19.964 6.73385 19.9667 6.74397C19.9789 6.78946 19.9878 6.83591 19.9933 6.88338L20 7V9H21C22.1046 9 23 9.89543 23 11V18C23 19.1046 22.1046 20 21 20H20V22C20 22.5523 19.5523 23 19 23H5C4.44772 23 4 22.5523 4 22V20H3C1.89543 20 1 19.1046 1 18V11C1 9.89543 1.89543 9 3 9H4V2C4 1.44772 4.44772 1 5 1H15ZM18 20H6V21H18V20ZM21 11H3V18H21V11ZM11.5 11.5C13.1568 11.5 14.5 12.8432 14.5 14.5C14.5 16.1568 13.1568 17.5 11.5 17.5H10.5C9.94771 17.5 9.5 17.0523 9.5 16.5V12.5C9.5 11.9477 9.94771 11.5 10.5 11.5H11.5ZM6.75 11.5C7.99263 11.5 9 12.5074 9 13.75C9 14.9926 7.99263 16 6.75 16H6V16.5C6 17.0523 5.55228 17.5 5 17.5C4.44772 17.5 4 17.0523 4 16.5V12.5C4 11.9477 4.44772 11.5 5 11.5H6.75ZM18.5 11.5C19.0523 11.5 19.5 11.9477 19.5 12.5C19.5 13.0523 19.0523 13.5 18.5 13.5H17V14H18.5C19.0523 14 19.5 14.4477 19.5 15C19.5 15.5523 19.0523 16 18.5 16H17V16.5C17 17.0128 16.614 17.4355 16.1166 17.4933L16 17.5C15.4477 17.5 15 17.0523 15 16.5V12.5C15 11.9477 15.4477 11.5 16 11.5H18.5ZM11.5 13.5V15.5C12.0523 15.5 12.5 15.0523 12.5 14.5C12.5 13.9477 12.0523 13.5 11.5 13.5ZM6.75 13.5H6V14H6.75C6.88807 14 7 13.8881 7 13.75C7 13.6119 6.88807 13.5 6.75 13.5ZM13 3H6V9H18V8H14C13.4477 8 13 7.55228 13 7V3ZM15 3.6V6H16.92L15 3.6Z" fill="#F02929"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_40_79319">
|
||||
<rect width="24" height="24" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -0,0 +1,10 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_40_79322)">
|
||||
<path d="M15 1C15.3038 1 15.5911 1.13809 15.7809 1.3753L19.7727 6.3652L19.8149 6.42032L19.82 6.428L19.8294 6.4414L19.84 6.459L19.82 6.428L19.7809 6.37531L19.845 6.467L19.8722 6.51088C19.8862 6.53547 19.8991 6.56083 19.9109 6.58679C19.9167 6.60014 19.9224 6.61347 19.9278 6.62692C19.9395 6.65535 19.9497 6.68443 19.9585 6.71409C19.9612 6.72378 19.964 6.73385 19.9667 6.74397C19.9789 6.78946 19.9878 6.83591 19.9933 6.88338L20 7V9H21C22.1046 9 23 9.89543 23 11V18C23 19.1046 22.1046 20 21 20H20V22C20 22.5523 19.5523 23 19 23H5C4.44772 23 4 22.5523 4 22V20H3C1.89543 20 1 19.1046 1 18V11C1 9.89543 1.89543 9 3 9H4V2C4 1.44772 4.44772 1 5 1H15ZM18 20H6V21H18V20ZM21 11H3V18H21V11ZM11.9888 11.4478C12.9238 11.4478 13.6456 11.6988 14.1541 12.2009C14.6626 12.703 14.9169 13.4216 14.9169 14.3567C14.9169 15.1892 14.712 15.8553 14.3021 16.3549C14.5198 16.506 14.662 16.6008 14.7286 16.6392C14.8285 16.6956 14.963 16.7609 15.1321 16.8352L14.6479 17.8112C14.4045 17.6934 14.1637 17.5531 13.9255 17.3905C13.6872 17.2278 13.5207 17.1055 13.4259 17.0235C13.0417 17.19 12.5601 17.2733 11.9811 17.2733C11.1255 17.2733 10.4504 17.0504 9.956 16.6046C9.37191 16.0769 9.07987 15.3353 9.07987 14.3797C9.07987 13.4523 9.33541 12.7318 9.84648 12.2182C10.3576 11.7046 11.0717 11.4478 11.9888 11.4478ZM5.91735 11.4478C6.63721 11.4478 7.18607 11.5816 7.56393 11.8493C7.9418 12.117 8.16659 12.5429 8.23832 13.127L6.5975 13.2231C6.55395 12.9695 6.46237 12.785 6.32275 12.6697C6.18313 12.5544 5.99036 12.4968 5.74443 12.4968C5.54204 12.4968 5.38962 12.5397 5.28715 12.6255C5.18468 12.7114 5.13344 12.8157 5.13344 12.9387C5.13344 13.0284 5.17571 13.1091 5.26025 13.1808C5.34223 13.2551 5.53692 13.3243 5.84434 13.3883C6.60519 13.5523 7.1502 13.7181 7.47939 13.8859C7.80858 14.0537 8.04811 14.2619 8.19797 14.5104C8.34784 14.7589 8.42277 15.0368 8.42277 15.3442C8.42277 15.7054 8.32286 16.0385 8.12304 16.3433C7.92322 16.6482 7.64399 16.8794 7.28534 17.0369C6.92669 17.1945 6.47453 17.2733 5.92887 17.2733C4.97077 17.2733 4.30726 17.0888 3.93837 16.7199C3.56947 16.351 3.36069 15.8822 3.31201 15.3135L4.9682 15.2097C5.00407 15.4787 5.07708 15.6837 5.18724 15.8246C5.36656 16.0526 5.62274 16.1666 5.95577 16.1666C6.20427 16.1666 6.39576 16.1083 6.53025 15.9917C6.66475 15.8752 6.73199 15.74 6.73199 15.5863C6.73199 15.4403 6.66795 15.3096 6.53986 15.1944C6.41177 15.0791 6.1146 14.9702 5.64836 14.8677C4.88495 14.6961 4.34057 14.4681 4.01522 14.1837C3.68731 13.8994 3.52336 13.5369 3.52336 13.0963C3.52336 12.8068 3.60726 12.5333 3.77505 12.2759C3.94285 12.0184 4.19519 11.816 4.53206 11.6687C4.86894 11.5214 5.3307 11.4478 5.91735 11.4478ZM17.5952 11.5438V15.79H20.312V17.1772H15.8545V11.5438H17.5952ZM11.9849 12.7658C11.6391 12.7658 11.3586 12.89 11.1434 13.1385C10.9282 13.387 10.8206 13.7751 10.8206 14.3029C10.8206 14.9177 10.9256 15.3494 11.1357 15.5978C11.3458 15.8463 11.634 15.9706 12.0003 15.9706C12.1181 15.9706 12.2296 15.9591 12.3346 15.936C12.1886 15.7951 11.958 15.6619 11.6429 15.5364L11.9158 14.91C12.0695 14.9382 12.1892 14.9728 12.2751 15.0138C12.3609 15.0547 12.528 15.1623 12.7765 15.3365C12.8354 15.3775 12.8995 15.4198 12.9687 15.4634C13.107 15.2149 13.1762 14.8434 13.1762 14.349C13.1762 13.7803 13.0705 13.3742 12.8591 13.1308C12.6478 12.8875 12.3564 12.7658 11.9849 12.7658ZM13 3H6V9H18V8H14C13.4477 8 13 7.55228 13 7V3ZM15 3.6V6H16.92L15 3.6Z" fill="#3370FF"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_40_79322">
|
||||
<rect width="24" height="24" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
|
|
@ -0,0 +1,10 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_40_79323)">
|
||||
<path d="M20.5 1C21.8807 1 23 2.11929 23 3.5V20.5C23 21.8807 21.8807 23 20.5 23H3.5C2.11929 23 1 21.8807 1 20.5V3.5C1 2.11929 2.11929 1 3.5 1H20.5ZM20.5 3H3.5C3.22386 3 3 3.22386 3 3.5V20.5C3 20.7761 3.22386 21 3.5 21H20.5C20.7761 21 21 20.7761 21 20.5V3.5C21 3.22386 20.7761 3 20.5 3ZM10.8889 18.5556C10.3366 18.5556 9.88889 18.1078 9.88889 17.5556C9.88889 17.0033 10.3366 16.5556 10.8889 16.5556L11 16.555V8.66667L11.006 8.555L8.55556 8.55556V9.22222C8.55556 9.73506 8.16952 10.1577 7.67218 10.2155L7.55556 10.2222C7.00327 10.2222 6.55556 9.77451 6.55556 9.22222V7.55556C6.55556 7.00327 7.00327 6.55556 7.55556 6.55556H16.4444C16.9967 6.55556 17.4444 7.00327 17.4444 7.55556V9.22222C17.4444 9.77451 16.9967 10.2222 16.4444 10.2222C15.8922 10.2222 15.4444 9.77451 15.4444 9.22222L15.4436 8.55556L12.9938 8.555C12.9979 8.59166 13 8.62892 13 8.66667V16.555L13.1111 16.5556C13.6634 16.5556 14.1111 17.0033 14.1111 17.5556C14.1111 18.1078 13.6634 18.5556 13.1111 18.5556H10.8889Z" fill="#3370FF"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_40_79323">
|
||||
<rect width="24" height="24" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1,10 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_40_79325)">
|
||||
<path d="M20.3333 1C21.8061 1 23 2.1939 23 3.66667V20.3333C23 21.8061 21.8061 23 20.3333 23H3.66667C2.1939 23 1 21.8061 1 20.3333V3.66667C1 2.19391 2.19391 1 3.66667 1H20.3333ZM21 7.99989H3V20.3333C3 20.7015 3.29847 21 3.66667 21H20.3333C20.7015 21 21 20.7015 21 20.3333V7.99989ZM10.5556 9.98831L13.4722 11.6723L16.3889 13.3562C17.0556 13.7411 17.0556 14.7033 16.3889 15.0882L13.4722 16.7722L10.5556 18.4561C9.88889 18.841 9.05556 18.3599 9.05556 17.5901V10.8543C9.05556 10.0845 9.88889 9.60341 10.5556 9.98831ZM11.0556 12.5863V15.8573L12.4722 15.0401L13.8886 14.2213L12.4722 13.4043L11.0556 12.5863ZM8.464 2.99989L3.66667 3C3.29848 3 3 3.29848 3 3.66667V5.99989H6.464L8.464 2.99989ZM20.3333 3L17.535 2.99989L15.534 5.99989H21V3.66667C21 3.29847 20.7015 3 20.3333 3ZM15.13 2.99989H10.868L8.868 5.99989H13.131L15.13 2.99989Z" fill="#3370FF"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_40_79325">
|
||||
<rect width="24" height="24" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1,14 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_40_79326)">
|
||||
<path d="M21 1C22.1046 1 23 1.89543 23 3V21C23 22.1046 22.1046 23 21 23H6C4.89543 23 4 22.1046 4 21V17H6V21H21V3H6V6H4V3C4 1.89543 4.89543 1 6 1H21Z" fill="#3370FF"/>
|
||||
<path d="M19 7H15C14.4477 7 14 7.44772 14 8C14 8.55228 14.4477 9 15 9H19C19.5523 9 20 8.55228 20 8C20 7.44772 19.5523 7 19 7Z" fill="#3370FF"/>
|
||||
<path d="M19 11H15C14.4477 11 14 11.4477 14 12C14 12.5523 14.4477 13 15 13H19C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11Z" fill="#3370FF"/>
|
||||
<path d="M19 15H15C14.4477 15 14 15.4477 14 16C14 16.5523 14.4477 17 15 17H19C19.5523 17 20 16.5523 20 16C20 15.4477 19.5523 15 19 15Z" fill="#3370FF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 6C11.5523 6 12 6.44772 12 7V16C12 16.5523 11.5523 17 11 17H2C1.44772 17 1 16.5523 1 16V7C1 6.44772 1.44772 6 2 6H11ZM3.16495 8H2.91675C2.85625 8 2.796 8.00776 2.73747 8.02309C2.35945 8.1221 2.13327 8.50882 2.23229 8.88684L3.67706 14.4027C3.76923 14.7546 4.08719 15 4.45095 15H4.8904C5.2632 15 5.58658 14.7425 5.67008 14.3792L6.49535 10.7881L7.34975 14.3849C7.4354 14.7455 7.75748 15 8.12809 15H8.56182C8.92613 15 9.24444 14.7539 9.33609 14.4013L10.7711 8.88051C10.7861 8.82272 10.7938 8.76324 10.7938 8.70352C10.7938 8.31498 10.4788 8 10.0902 8H9.84901C9.46198 8 9.13046 8.27705 9.06173 8.65793L8.3847 12.4096L7.4879 8.61596C7.40257 8.25498 7.08029 8 6.70936 8H6.2726C5.89927 8 5.57558 8.25821 5.49261 8.6222L4.62927 12.4096L3.95224 8.65793C3.8835 8.27705 3.55198 8 3.16495 8Z" fill="#3370FF"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_40_79326">
|
||||
<rect width="24" height="24" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
|
|
@ -0,0 +1,14 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_40_79314)">
|
||||
<path d="M21 1C22.1046 1 23 1.89543 23 3V21C23 22.1046 22.1046 23 21 23H6C4.89543 23 4 22.1046 4 21V17H6V21H21V3H6V6H4V3C4 1.89543 4.89543 1 6 1H21Z" fill="#F02929"/>
|
||||
<path d="M19 7H15C14.4477 7 14 7.44772 14 8C14 8.55228 14.4477 9 15 9H19C19.5523 9 20 8.55228 20 8C20 7.44772 19.5523 7 19 7Z" fill="#F02929"/>
|
||||
<path d="M19 11H15C14.4477 11 14 11.4477 14 12C14 12.5523 14.4477 13 15 13H19C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11Z" fill="#F02929"/>
|
||||
<path d="M19 15H15C14.4477 15 14 15.4477 14 16C14 16.5523 14.4477 17 15 17H19C19.5523 17 20 16.5523 20 16C20 15.4477 19.5523 15 19 15Z" fill="#F02929"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 6C11.5523 6 12 6.44772 12 7V16C12 16.5523 11.5523 17 11 17H2C1.44772 17 1 16.5523 1 16V7C1 6.44772 1.44772 6 2 6H11ZM2.71745 9.9353C2.48734 9.9353 2.26138 9.95311 2.04087 9.9874C2.01392 10.1836 2 10.3839 2 10.5876C2 11.3447 2.19253 12.0568 2.53131 12.6776C2.78225 12.6328 3.04062 12.6094 3.30445 12.6094C3.77602 12.6094 4.23013 12.6841 4.65789 12.8223C4.66843 12.9461 4.67381 13.0714 4.67381 13.198C4.67381 13.7722 4.56303 14.3206 4.36168 14.823C5.00855 15.4287 5.83972 15.84 6.76206 15.9636C6.91803 15.5831 7.02188 15.1759 7.0648 14.7519C7.0674 14.7263 7.06978 14.7007 7.07175 14.6748C7.08186 14.5534 7.08702 14.4307 7.08738 14.3053C7.08738 11.8918 5.13094 9.9353 2.71745 9.9353ZM9.77795 12.9988C9.94349 13.0178 10.1118 13.0276 10.2825 13.0276C10.5126 13.0276 10.7386 13.0098 10.9591 12.9755C10.9861 12.7793 11 12.579 11 12.3754C11 11.6182 10.8074 10.9061 10.4687 10.2853C10.2177 10.3301 9.95932 10.3535 9.69546 10.3535C9.22356 10.3535 8.76912 10.2787 8.34178 10.1412C8.33124 10.0174 8.32586 9.89212 8.32586 9.76557C8.32586 9.19132 8.43665 8.64291 8.63796 8.14057C7.99109 7.53485 7.15992 7.12359 6.23758 7C6.08173 7.3801 5.97792 7.78702 5.93512 8.21103C5.93217 8.23994 5.92952 8.26893 5.92715 8.29777C5.91752 8.41619 5.91262 8.53595 5.91262 8.65686C5.91262 8.85462 5.92575 9.04931 5.95108 9.24C5.98955 9.52892 6.05625 9.80892 6.1513 10.085C6.20306 10.2347 6.26274 10.3808 6.32956 10.5229C6.43197 10.7396 6.55166 10.9465 6.68686 11.1418L6.69639 11.1547C6.74469 11.2239 6.79494 11.2916 6.84679 11.3583C6.9543 11.4949 7.06977 11.6249 7.19252 11.7477L7.20795 11.7622C7.21801 11.7722 7.22812 11.7821 7.23827 11.7919L7.33516 11.8841C7.77226 12.2836 8.29082 12.5955 8.86304 12.7919L8.89654 12.8024L8.91884 12.8106C9.10058 12.8703 9.28757 12.9183 9.47936 12.9531L9.586 12.971L9.77795 12.9988Z" fill="#F02929"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_40_79314">
|
||||
<rect width="24" height="24" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
|
|
@ -0,0 +1,10 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_40_79315)">
|
||||
<path d="M15 1C15.3038 1 15.5911 1.13809 15.7809 1.3753L19.7727 6.3652L19.8149 6.42032L19.82 6.428L19.8294 6.4414L19.84 6.459L19.82 6.428L19.7809 6.37531L19.845 6.467L19.8722 6.51088C19.8862 6.53547 19.8991 6.56083 19.9109 6.58679C19.9167 6.60014 19.9224 6.61347 19.9278 6.62692C19.9395 6.65535 19.9497 6.68443 19.9585 6.71409C19.9612 6.72378 19.964 6.73385 19.9667 6.74397C19.9789 6.78946 19.9878 6.83591 19.9933 6.88338L20 7V9H21C22.1046 9 23 9.89543 23 11V18C23 19.1046 22.1046 20 21 20H20V22C20 22.5523 19.5523 23 19 23H5C4.44772 23 4 22.5523 4 22V20H3C1.89543 20 1 19.1046 1 18V11C1 9.89543 1.89543 9 3 9H4V2C4 1.44772 4.44772 1 5 1H15ZM18 20H6V21H18V20ZM21 11H3V18H21V11ZM8.5 11.5C9.32405 11.5 9.79443 12.4408 9.3 13.1L7.5 15.5H8.5C9.01284 15.5 9.43551 15.886 9.49327 16.3834L9.5 16.5C9.5 17.0523 9.05229 17.5 8.5 17.5H5.5C4.67595 17.5 4.20557 16.5592 4.7 15.9L6.5 13.5H5.5C4.98716 13.5 4.56449 13.114 4.50673 12.6166L4.5 12.5C4.5 11.9477 4.94772 11.5 5.5 11.5H8.5ZM12 11.5C12.5523 11.5 13 11.9477 13 12.5V16.5C13 17.0523 12.5523 17.5 12 17.5C11.4477 17.5 11 17.0523 11 16.5V12.5C11 11.9477 11.4477 11.5 12 11.5ZM17.25 11.5C18.4926 11.5 19.5 12.5074 19.5 13.75C19.5 14.9926 18.4926 16 17.25 16H16.5V16.5C16.5 17.0523 16.0523 17.5 15.5 17.5C14.9477 17.5 14.5 17.0523 14.5 16.5V12.5C14.5 11.9477 14.9477 11.5 15.5 11.5H17.25ZM17.25 13.5H16.5V14H17.25C17.3881 14 17.5 13.8881 17.5 13.75C17.5 13.6119 17.3881 13.5 17.25 13.5ZM13 3H6V9H18V8H14C13.4477 8 13 7.55228 13 7V3ZM15 3.6V6H16.92L15 3.6Z" fill="#3370FF"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_40_79315">
|
||||
<rect width="24" height="24" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
|
|
@ -0,0 +1,98 @@
|
|||
<template>
|
||||
<a-upload v-bind="{ ...props }" :accept="UploadAcceptEnum[props.accept]">
|
||||
<template #upload-button>
|
||||
<div class="ms-upload-area">
|
||||
<div class="ms-upload-icon-box">
|
||||
<div class="ms-upload-icon ms-upload-icon--excel"></div>
|
||||
</div>
|
||||
<div v-if="props.mainText" class="ms-upload-main-text">{{ t(props.mainText) }}</div>
|
||||
<div v-if="props.subText" class="ms-upload-sub-text">{{ t(props.subText) }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-upload>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import { UploadAcceptEnum } from '@/enums/uploadEnum';
|
||||
|
||||
import type { UploadType } from './types';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
// 上传 组件 props
|
||||
type UploadProps = Partial<{
|
||||
mainText: string;
|
||||
subText: string;
|
||||
multiple: boolean;
|
||||
limit: number;
|
||||
imagePreview: boolean;
|
||||
showFileList: boolean;
|
||||
}> & {
|
||||
accept: UploadType;
|
||||
};
|
||||
|
||||
const props = defineProps<UploadProps>();
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.ms-upload-area {
|
||||
@apply flex w-full flex-col items-center justify-center;
|
||||
|
||||
height: 154px;
|
||||
border: 1px dashed var(--color-text-input-border);
|
||||
border-radius: var(--border-radius-small);
|
||||
background-color: var(--color-text-n9);
|
||||
.ms-upload-icon-box {
|
||||
@apply rounded-full bg-white;
|
||||
|
||||
margin-bottom: 16px;
|
||||
padding: 8px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
.ms-upload-icon {
|
||||
@apply h-full w-full bg-cover bg-no-repeat;
|
||||
|
||||
background-image: url('@/assets/svg/icons/uploadfile.svg');
|
||||
&--excel {
|
||||
background-image: url('@/assets/svg/icons/excel.svg');
|
||||
}
|
||||
&--word {
|
||||
background-image: url('@/assets/svg/icons/word.svg');
|
||||
}
|
||||
&--pdf {
|
||||
background-image: url('@/assets/svg/icons/pdf.svg');
|
||||
}
|
||||
&--txt {
|
||||
background-image: url('@/assets/svg/icons/txt.svg');
|
||||
}
|
||||
&--vedio {
|
||||
background-image: url('@/assets/svg/icons/vedio.svg');
|
||||
}
|
||||
&--sql {
|
||||
background-image: url('@/assets/svg/icons/sql.svg');
|
||||
}
|
||||
&--csv {
|
||||
background-image: url('@/assets/svg/icons/csv.svg');
|
||||
}
|
||||
&--zip {
|
||||
background-image: url('@/assets/svg/icons/zip.svg');
|
||||
}
|
||||
&--xmind {
|
||||
background-image: url('@/assets/svg/icons/xmind.svg');
|
||||
}
|
||||
&--image {
|
||||
background-image: url('@/assets/svg/icons/image.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
.ms-upload-main-text {
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
.ms-upload-sub-text {
|
||||
margin-bottom: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--color-text-4);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
// 上传类型
|
||||
export type UploadType = 'excel' | 'word' | 'pdf' | 'txt' | 'vedio' | 'sql' | 'csv' | 'zip' | 'xmind' | 'image';
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
export enum UploadAcceptEnum {
|
||||
excel = '.xlsx,.xls',
|
||||
word = '.docx,.doc',
|
||||
pdf = '.pdf',
|
||||
txt = '.txt',
|
||||
vedio = '.mp4',
|
||||
sql = '.sql',
|
||||
csv = '.csv',
|
||||
zip = '.zip',
|
||||
xmind = '.xmind',
|
||||
image = '.jpg,.png',
|
||||
}
|
||||
|
||||
export default UploadAcceptEnum;
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
<template>
|
||||
<a-modal
|
||||
v-model:visible="inviteVisible"
|
||||
:title="t('system.user.invite')"
|
||||
title-align="start"
|
||||
class="ms-modal-form ms-modal-medium"
|
||||
:loading="inviteLoading"
|
||||
>
|
||||
<a-form ref="inviteFormRef" class="rounded-[4px]" :model="emailForm" layout="vertical">
|
||||
<a-form-item
|
||||
field="emails"
|
||||
:label="t('system.user.inviteEmail')"
|
||||
:rules="[{ required: true, message: t('system.user.createUserEmailNotNull') }]"
|
||||
>
|
||||
<a-input-tag v-model="emailForm.emails" :placeholder="t('system.user.inviteEmailPlaceholder')" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item class="mb-0" field="userGroup" :label="t('system.user.createUserUserGroup')">
|
||||
<a-select
|
||||
v-model="emailForm.userGroup"
|
||||
multiple
|
||||
:placeholder="t('system.user.createUserUserGroupPlaceholder')"
|
||||
allow-clear
|
||||
>
|
||||
<a-option v-for="item of userGroupOptions" :key="item.value">{{ item.label }}</a-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<template #footer>
|
||||
<a-button type="secondary" @click="cancelInvite">{{ t('system.user.inviteCancel') }}</a-button>
|
||||
<a-button type="primary" @click="emailInvite">
|
||||
{{ t('system.user.inviteSendEmail') }}
|
||||
</a-button>
|
||||
</template>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import { FormInstance, Message, ValidatedError } from '@arco-design/web-vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const props = defineProps<{
|
||||
visible: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits(['update:visible']);
|
||||
|
||||
const inviteVisible = ref(false);
|
||||
const inviteLoading = ref(false);
|
||||
const inviteFormRef = ref<FormInstance | null>(null);
|
||||
const defaulInviteForm = {
|
||||
emails: [],
|
||||
userGroup: [],
|
||||
};
|
||||
const emailForm = ref(cloneDeep(defaulInviteForm));
|
||||
const userGroupOptions = ref([
|
||||
{
|
||||
label: 'Beijing',
|
||||
value: 'Beijing',
|
||||
},
|
||||
{
|
||||
label: 'Shanghai',
|
||||
value: 'Shanghai',
|
||||
},
|
||||
{
|
||||
label: 'Guangzhou',
|
||||
value: 'Guangzhou',
|
||||
},
|
||||
]);
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(val) => {
|
||||
inviteVisible.value = val;
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => inviteVisible.value,
|
||||
(val) => {
|
||||
emit('update:visible', val);
|
||||
}
|
||||
);
|
||||
|
||||
function cancelInvite() {
|
||||
inviteVisible.value = false;
|
||||
inviteFormRef.value?.resetFields();
|
||||
emailForm.value = cloneDeep(defaulInviteForm);
|
||||
}
|
||||
|
||||
function emailInvite() {
|
||||
inviteFormRef.value?.validate(async (errors: Record<string, ValidatedError> | undefined) => {
|
||||
if (!errors) {
|
||||
try {
|
||||
inviteLoading.value = true;
|
||||
cancelInvite();
|
||||
Message.success(t('system.user.inviteSuccess'));
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
} finally {
|
||||
inviteLoading.value = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
|
|
@ -182,39 +182,6 @@
|
|||
}}</a-button>
|
||||
</template>
|
||||
</a-modal>
|
||||
<a-modal
|
||||
v-model:visible="inviteVisible"
|
||||
:title="t('system.user.invite')"
|
||||
title-align="start"
|
||||
class="ms-modal-form ms-modal-medium"
|
||||
:loading="inviteLoading"
|
||||
>
|
||||
<a-form ref="inviteFormRef" class="rounded-[4px]" :model="emailForm" layout="vertical">
|
||||
<a-form-item
|
||||
field="emails"
|
||||
:label="t('system.user.inviteEmail')"
|
||||
:rules="[{ required: true, message: t('system.user.createUserEmailNotNull') }]"
|
||||
>
|
||||
<a-input-tag v-model="emailForm.emails" :placeholder="t('system.user.inviteEmailPlaceholder')" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item class="mb-0" field="userGroup" :label="t('system.user.createUserUserGroup')">
|
||||
<a-select
|
||||
v-model="emailForm.userGroup"
|
||||
multiple
|
||||
:placeholder="t('system.user.createUserUserGroupPlaceholder')"
|
||||
allow-clear
|
||||
>
|
||||
<a-option v-for="item of userGroupOptions" :key="item.value">{{ item.label }}</a-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<template #footer>
|
||||
<a-button type="secondary" @click="cancelInvite">{{ t('system.user.inviteCancel') }}</a-button>
|
||||
<a-button type="primary" @click="emailInvite">
|
||||
{{ t('system.user.inviteSendEmail') }}
|
||||
</a-button>
|
||||
</template>
|
||||
</a-modal>
|
||||
<a-modal
|
||||
v-model:visible="importVisible"
|
||||
:title="t('system.user.importModalTitle')"
|
||||
|
|
@ -226,17 +193,13 @@
|
|||
{{ t('system.user.importModalTip') }}
|
||||
<a-button type="text" size="small">{{ t('system.user.importDownload') }} </a-button>
|
||||
</a-alert>
|
||||
<a-upload action="/" accept=".xls,.xlsx" :show-file-list="false">
|
||||
<template #upload-button>
|
||||
<div class="ms-upload-area">
|
||||
<div class="ms-upload-icon-box">
|
||||
<div class="ms-upload-icon ms-upload-icon--excel"></div>
|
||||
</div>
|
||||
<div class="ms-upload-main-text">{{ t('system.user.importModalDragtext') }}</div>
|
||||
<div class="ms-upload-sub-text">{{ t('system.user.importModalFileTip') }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-upload>
|
||||
<MsUpload
|
||||
action="/"
|
||||
accept="excel"
|
||||
main-text="system.user.importModalDragtext"
|
||||
sub-text="system.user.importModalFileTip"
|
||||
:show-file-list="false"
|
||||
></MsUpload>
|
||||
<template #footer>
|
||||
<a-button type="secondary" @click="cancelImport">{{ t('system.user.importModalCancel') }}</a-button>
|
||||
<a-button type="primary" @click="importUser">
|
||||
|
|
@ -288,6 +251,7 @@
|
|||
</a-button>
|
||||
</template>
|
||||
</a-modal>
|
||||
<inviteModal v-model:visible="inviteVisible"></inviteModal>
|
||||
<batchModal
|
||||
v-model:visible="showBatchModal"
|
||||
:table-selected="tableSelected"
|
||||
|
|
@ -310,6 +274,8 @@
|
|||
import { getUserList, batchCreateUser } from '@/api/modules/system/user';
|
||||
import { validateEmail, validatePhone } from '@/utils/validate';
|
||||
import batchModal from './components/batchModal.vue';
|
||||
import inviteModal from './components/inviteModal.vue';
|
||||
import MsUpload from '@/components/pure/ms-upload/index.vue';
|
||||
|
||||
import type { FormInstance, ValidatedError } from '@arco-design/web-vue';
|
||||
import type { MsTableColumn } from '@/components/pure/ms-table/type';
|
||||
|
|
@ -609,14 +575,6 @@
|
|||
list: [0],
|
||||
userGroup: [],
|
||||
};
|
||||
|
||||
interface UserForm {
|
||||
list: number[];
|
||||
userGroup: string[];
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
const userForm = ref<UserForm>(cloneDeep(defaulUserForm));
|
||||
const userGroupOptions = ref([
|
||||
{
|
||||
label: 'Beijing',
|
||||
|
|
@ -632,6 +590,14 @@
|
|||
},
|
||||
]);
|
||||
|
||||
interface UserForm {
|
||||
list: number[];
|
||||
userGroup: string[];
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
const userForm = ref<UserForm>(cloneDeep(defaulUserForm));
|
||||
|
||||
/**
|
||||
* 触发创建用户表单校验
|
||||
* @param cb 校验通过后执行回调
|
||||
|
|
@ -785,6 +751,11 @@
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示用户表单弹窗
|
||||
* @param mode 模式，编辑或创建
|
||||
* @param record 编辑时传入的用户信息
|
||||
*/
|
||||
function showUserModal(mode: UserModalMode, record?: UserListItem) {
|
||||
visible.value = true;
|
||||
userFormMode.value = mode;
|
||||
|
|
@ -797,28 +768,10 @@
|
|||
}
|
||||
|
||||
const inviteVisible = ref(false);
|
||||
const inviteLoading = ref(false);
|
||||
const inviteFormRef = ref<FormInstance | null>(null);
|
||||
const defaulInviteForm = {
|
||||
emails: [],
|
||||
userGroup: [],
|
||||
};
|
||||
const emailForm = ref(cloneDeep(defaulInviteForm));
|
||||
|
||||
function showEmailInviteModal() {
|
||||
inviteVisible.value = true;
|
||||
}
|
||||
|
||||
function emailInvite() {
|
||||
inviteFormRef.value?.validate();
|
||||
}
|
||||
|
||||
function cancelInvite() {
|
||||
inviteVisible.value = false;
|
||||
inviteFormRef.value?.resetFields();
|
||||
emailForm.value = cloneDeep(defaulInviteForm);
|
||||
}
|
||||
|
||||
const importVisible = ref(false);
|
||||
const importLoading = ref(false);
|
||||
const importResultVisible = ref(false);
|
||||
|
|
@ -872,37 +825,4 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.ms-upload-area {
|
||||
@apply flex w-full flex-col items-center justify-center;
|
||||
|
||||
height: 154px;
|
||||
border: 1px dashed var(--color-text-input-border);
|
||||
border-radius: var(--border-radius-small);
|
||||
background-color: var(--color-text-n9);
|
||||
.ms-upload-icon-box {
|
||||
@apply rounded-full bg-white;
|
||||
|
||||
margin-bottom: 16px;
|
||||
padding: 8px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
.ms-upload-icon {
|
||||
@apply h-full w-full bg-cover bg-no-repeat;
|
||||
|
||||
background-image: url('@/assets/svg/icons/uploadfile.svg');
|
||||
&--excel {
|
||||
background-image: url('@/assets/svg/icons/excel.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
.ms-upload-main-text {
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
.ms-upload-sub-text {
|
||||
margin-bottom: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--color-text-4);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped></style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue