feat: 用户页面&部分基础组件&arco 组件样式覆盖

This commit is contained in:
baiqi 2023-06-16 15:37:34 +08:00 committed by rubylliu
parent 800de216e8
commit 8786725057
22 changed files with 1228 additions and 21 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

View File

@ -34,11 +34,28 @@
padding: 24px;
.arco-modal-header {
@apply h-auto border-b-0 p-0;
margin-bottom: 16px;
.arco-modal-title {
@apply flex items-center font-semibold;
font-size: 14px;
.arco-modal-title-icon {
@apply flex items-center;
.arco-icon {
font-size: 20px;
}
}
}
}
.arco-modal-body {
color: var(--color-text-2);
}
.arco-modal-footer {
@apply border-t-0 p-0 text-right;
margin-top: 16px;
text-align: right;
}
}
.ms-modal-weak {
@ -48,9 +65,46 @@
}
}
}
.ms-modal-warning {
.arco-modal-title-icon {
.arco-icon {
color: rgb(var(--danger-6));
}
}
}
.ms-modal-form {
.arco-modal-body {
padding: 8px 0;
}
}
.ms-modal-upload {
.arco-modal-body {
padding: 2px 0;
.arco-upload {
@apply w-full;
}
}
}
.ms-modal-medium {
.arco-modal {
width: 680px;
}
}
.ms-modal-large {
.arco-modal {
width: 960px;
}
}
/** 按钮 **/
.arco-btn-primary {
background-color: rgb(var(--primary-5)) !important;
&:not(:disabled):hover {
background-color: rgb(var(--primary-4)) !important;
}
&:not(:disabled):active {
background-color: rgb(var(--primary-7)) !important;
}
&:disabled {
background-color: rgb(var(--primary-3)) !important;
}
@ -104,13 +158,77 @@
}
}
/** 输入框 **/
.arco-input-wrapper {
/** 输入框,选择器 **/
.arco-input-wrapper,
.arco-input-tag,
.arco-select {
border: 1px solid var(--color-text-input-border);
background-color: var(--color-text-fff) !important;
&:not(:disabled):hover {
border-color: rgb(var(--primary-5));
}
input::placeholder {
color: var(--color-text-brand);
}
}
.arco-select,
.arco-input-tag {
.arco-icon {
font-size: 14px;
color: var(--color-text-4);
}
}
.arco-select-view-inner,
.arco-input-tag-inner {
.arco-tag {
background-color: var(--color-text-n8) !important;
}
}
.arco-input-error,
.arco-input-tag-error {
border-color: rgb(var(--danger-6)) !important;
background-color: var(--color-bg-2) !important;
box-shadow: 0 0 0 0 var(--color-danger-light-2) !important;
}
/** form-item **/
.arco-form-item-content-flex {
@apply flex-wrap;
}
.arco-form-item-message {
width: 100%;
}
.hidden-item {
@apply mb-0 flex-1;
.arco-form-item-label-col {
@apply !hidden;
}
}
/** 多选框 **/
.arco-checkbox-checked {
.arco-checkbox-icon {
@apply !border-none;
}
.arco-checkbox-icon-check {
@apply text-white;
.arco-checkbox-icon {
background-color: rgb(var(--primary-5));
}
}
}
.arco-checkbox {
.arco-checkbox-icon {
border: 1px solid var(--color-text-input-border);
}
}
.arco-checkbox-disabled,
.arco-checkbox-disabled:hover {
.arco-checkbox-icon {
@apply bg-white;
border: 1px solid var(--color-text-input-border);
}
}
/** Message **/
@ -149,3 +267,11 @@
.ms-contentiner {
height: calc(100vh - 84px);
}
/** 气泡弹窗 **/
.arco-popover-title {
font-size: 14px;
}
.arco-popover-content {
font-size: 12px;
}

View File

@ -0,0 +1,24 @@
<svg width="193" height="40" viewBox="0 0 193 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M62.3111 31.1105L61.1382 19.3784L57.8421 31.1105H54.0036L50.7837 19.3784L49.5689 31.1105L44.2632 31.0657L46.8526 13.7484H53.6121L55.9296 21.9887L58.2694 13.7484H64.8706L67.5048 31.112H62.3111V31.1105Z" fill="#783887"/>
<path d="M80.3396 23.8429V26.0363H73.3574L73.3439 26.4353C73.3439 27.272 73.6771 27.7546 74.1896 27.9354C74.5886 28.049 75.0413 28.1043 75.5463 28.1043H75.8511C77.2078 28.1043 79.1906 27.798 80.6145 27.5051H80.6369L80.0632 30.6025C80.0632 30.6399 79.3968 30.9237 78.1013 31.1344C77.287 31.2256 76.3532 31.2704 75.2983 31.2704C72.5849 31.2704 70.8337 30.3545 70.0418 28.5241C69.7475 27.801 69.4771 27.0464 69.4771 26.256V23.2946C69.4771 21.1236 70.514 19.6772 72.3369 18.9615C73.1437 18.6985 74.0058 18.5656 74.9263 18.5656C77.4813 18.5656 79.1383 19.3978 79.9003 21.0638C80.1932 21.7167 80.3396 22.6446 80.3396 23.8429ZM76.6819 23.2662C76.6819 22.407 76.4249 21.8333 76.0558 21.6749C75.7764 21.4866 75.3461 21.4582 74.9472 21.4582C73.9296 21.4582 73.4216 21.9364 73.4216 22.8941L73.3589 23.4709H76.6834V23.2662H76.6819Z" fill="#783887"/>
<path d="M103.87 23.8429V26.0363H96.8877L96.8742 26.4353C96.8742 27.272 97.2074 27.7546 97.7199 27.9354C98.1188 28.049 98.5716 28.1043 99.0766 28.1043H99.3814C100.738 28.1043 102.721 27.798 104.145 27.5051H104.167L103.593 30.6025C103.593 30.6399 102.927 30.9237 101.632 31.1344C100.817 31.2256 99.8834 31.2704 98.8286 31.2704C96.1152 31.2704 94.364 30.3545 93.5721 28.5241C93.2778 27.801 93.0073 27.0464 93.0073 26.256V23.2946C93.0073 21.1236 94.0443 19.6772 95.8671 18.9615C96.674 18.6985 97.5361 18.5656 98.4565 18.5656C101.012 18.5656 102.669 19.3978 103.431 21.0638C103.723 21.7167 103.87 22.6446 103.87 23.8429ZM100.212 23.2662C100.212 22.407 99.9552 21.8333 99.5861 21.6749C99.3067 21.4866 98.8764 21.4582 98.4774 21.4582C97.4599 21.4582 96.9519 21.9364 96.9519 22.8941L96.8891 23.4709H100.214V23.2662H100.212Z" fill="#783887"/>
<path d="M168.813 23.8429V26.0363H161.831L161.817 26.4353C161.817 27.272 162.15 27.7546 162.663 27.9354C163.062 28.049 163.515 28.1043 164.02 28.1043H164.324C165.681 28.1043 167.664 27.798 169.088 27.5051H169.11L168.536 30.6025C168.536 30.6399 167.87 30.9237 166.575 31.1344C165.76 31.2256 164.826 31.2704 163.772 31.2704C161.058 31.2704 159.307 30.3545 158.515 28.5241C158.221 27.801 157.95 27.0464 157.95 26.256V23.2946C157.95 21.1236 158.986 19.6772 160.81 18.9615C161.617 18.6985 162.479 18.5656 163.4 18.5656C165.955 18.5656 167.612 19.3978 168.374 21.0638C168.666 21.7167 168.813 22.6446 168.813 23.8429ZM165.155 23.2662C165.155 22.407 164.898 21.8333 164.529 21.6749C164.25 21.4866 163.819 21.4582 163.42 21.4582C162.403 21.4582 161.895 21.9364 161.895 22.8941L161.832 23.4709H165.157V23.2662H165.155Z" fill="#783887"/>
<path d="M192.345 23.8429V26.0363H185.363L185.35 26.4353C185.35 27.272 185.683 27.7546 186.195 27.9354C186.594 28.049 187.047 28.1043 187.552 28.1043H187.857C189.214 28.1043 191.196 27.798 192.62 27.5051H192.643L192.069 30.6025C192.069 30.6399 191.403 30.9237 190.107 31.1344C189.293 31.2256 188.359 31.2704 187.304 31.2704C184.591 31.2704 182.839 30.3545 182.048 28.5241C181.753 27.801 181.483 27.0464 181.483 26.256V23.2946C181.483 21.1236 182.52 19.6772 184.343 18.9615C185.149 18.6985 186.012 18.5656 186.932 18.5656C189.487 18.5656 191.144 19.3978 191.906 21.0638C192.197 21.7167 192.345 22.6446 192.345 23.8429ZM188.688 23.2662C188.688 22.407 188.431 21.8333 188.062 21.6749C187.782 21.4866 187.352 21.4582 186.953 21.4582C185.935 21.4582 185.427 21.9364 185.427 22.8941L185.365 23.4709H188.689V23.2662H188.688Z" fill="#783887"/>
<path d="M91.4874 31.1569H89.2402C88.8487 31.1569 88.5126 31.145 88.2347 31.1226C87.4891 31.0703 86.878 30.9298 86.4028 30.7042C85.8231 30.4263 85.3823 29.9989 85.0805 29.4267C84.7413 28.7782 84.5725 27.9116 84.5725 26.8268L84.5501 21.9439H82.6958V18.7673H84.5501V16.308L86.4058 16.2557L88.3482 16.0106V18.7673H91.2424L90.8464 21.9439H88.3482V26.6132C88.3482 26.7193 88.3512 26.8089 88.3602 26.8851C88.3751 27.0809 88.405 27.2437 88.4513 27.3707C88.5649 27.68 88.8054 27.8952 89.1745 28.0147C89.4614 28.1357 91.1752 28.1118 91.1752 28.1118L91.4874 31.1569Z" fill="#783887"/>
<path d="M114.991 18.7882L114.935 21.7377C114.609 21.7212 113.685 21.7242 112.719 21.9454C111.856 22.1426 110.959 22.546 110.447 22.7343V31.1105H106.671V18.6761H110.134C110.134 18.6761 110.051 19.3246 110.118 19.5801L111 19.2529C111.527 19.0721 112.096 18.9466 112.803 18.8569C113.871 18.721 114.514 18.7792 114.991 18.7882Z" fill="#783887"/>
<path d="M180.223 18.7882L180.167 21.7377C179.842 21.7212 178.917 21.7242 177.952 21.9454C177.088 22.1426 176.191 22.546 175.679 22.7343V31.1105H171.903V18.6761H175.367C175.367 18.6761 175.283 19.3246 175.35 19.5801L176.232 19.2529C176.759 19.0721 177.328 18.9466 178.035 18.8569C179.102 18.721 179.746 18.7792 180.223 18.7882Z" fill="#783887"/>
<path d="M122.347 31.6365C121.458 31.6365 120.483 31.5797 119.42 31.4676C119.014 31.4228 118.596 31.369 118.165 31.3092L116.502 31.1508L116.538 26.8716L119.145 27.2795C119.145 27.2795 120.17 27.4259 120.638 27.4722C121.195 27.5245 121.701 27.5514 122.153 27.5514C123.795 27.5514 124.746 27.1779 125.003 26.4323C125.146 26.123 125.139 25.8212 124.98 25.5283C124.822 25.2041 124.487 24.9262 123.975 24.6916C123.756 24.5945 123.482 24.4914 123.15 24.3868L122.177 24.0924C121.747 23.9864 121.363 23.8818 121.024 23.7757C120.586 23.6397 120.187 23.4963 119.825 23.3454C118.929 22.9688 118.231 22.531 117.734 22.0335C117.258 21.5285 116.954 20.9114 116.818 20.1792C116.719 19.6593 116.709 19.0676 116.783 18.4042C116.986 16.4902 117.804 15.1753 119.237 14.4596C119.772 14.1727 120.416 13.9665 121.17 13.838C121.464 13.7932 121.799 13.7558 122.176 13.7245L123.148 13.6572H123.804C124.55 13.6572 125.372 13.7021 126.268 13.7932L127.365 13.9172L128.639 14.0861L128.665 17.8409C128.175 17.7198 127.558 17.6108 126.811 17.5137C125.853 17.3777 124.986 17.3104 124.211 17.3104C122.492 17.3104 121.899 17.675 121.597 18.452C121.484 18.7762 121.476 19.1019 121.509 19.4202C121.55 19.7982 121.526 19.8983 122.289 20.2943C122.522 20.4004 122.817 20.5124 123.171 20.6335L125.409 21.2999C125.839 21.4358 126.223 21.5748 126.563 21.7182C127.384 22.0649 128.006 22.4638 128.427 22.9165C128.925 23.4141 129.245 24.0357 129.388 24.7812C129.485 25.3162 129.497 25.8974 129.422 26.5219C129.219 28.421 128.27 30.1259 126.837 30.8565C126.31 31.1434 125.666 31.3466 124.904 31.4676C124.61 31.5124 124.275 31.5498 123.898 31.5812L123.027 31.6379H122.347V31.6365Z" fill="#783887"/>
<path d="M131.877 18.7224H135.315L135.212 19.5368C135.559 19.356 135.898 19.2021 136.23 19.0736C136.636 18.9152 137.04 18.7986 137.44 18.7224C138.42 18.5192 139.366 18.5611 140.277 18.8465C140.865 19.0347 141.37 19.3664 141.792 19.8416C141.951 20.0149 142.094 20.2106 142.221 20.4288L142.368 20.6888C142.405 20.7635 142.442 20.8427 142.481 20.9263C142.64 21.3551 142.804 21.8407 142.873 22.3607C142.955 22.9479 143.034 23.695 143.034 24.6438V25.3475C143.034 27.1943 142.924 28.1909 142.568 28.8723C142.078 30.0258 140.9 30.6115 138.625 30.6832C138.319 30.6922 137.833 30.6847 137.328 30.6697L136.484 30.6473C136.171 30.6488 135.95 30.6324 135.701 30.6399V35.9949L131.88 36.2459V18.7224H131.877ZM135.698 27.4528C136.424 27.5888 136.839 27.5783 137.455 27.5425L138.091 27.4603C138.8 27.3019 139.101 26.8223 139.101 26.0603V23.683C139.101 23.3364 139.072 23.0809 139.01 22.9151C138.785 22.1471 138.159 21.8452 137.134 22.0111L136.715 22.0783L135.992 22.2815L135.698 22.3831V27.4528Z" fill="#783887"/>
<path d="M156.277 24.3779V31.1345H152.434V23.7907C152.434 23.329 152.165 22.6596 151.627 22.3443C151.243 22.1187 150.596 22.1576 150.384 22.1919C149.873 22.2741 149.3 22.5834 149.032 22.8299V31.1345H145.212V13.2733L149.032 13.2494V19.5622C149.5 19.4038 150 19.2066 150.535 19.1244C150.972 19.0572 151.433 18.981 151.802 18.981C153.996 18.981 155.161 19.6011 155.696 20.7471C155.989 21.1759 156.277 22.434 156.277 24.3779Z" fill="#783887"/>
<g clip-path="url(#clip0_690_192454)">
<path d="M17.3111 0.531247L34.1408 10.2484V29.6811L17.3111 39.3983L0.481388 29.6811V10.2484L17.3111 0.531247ZM17.3111 0L0.0206299 9.98195V29.9458L17.3111 39.9278L34.6016 29.9458V9.98195L17.3111 0Z" fill="#783887"/>
<path d="M2.73364 11.2302L17.3094 2.81445L31.8869 11.2302L17.3094 19.6459L2.73364 11.2302Z" fill="#783887"/>
<path d="M2.4585 11.7081V28.5396L17.0343 36.9553V20.1238L2.4585 11.7081ZM12.4576 30.7952L12.449 24.8655L10.3206 29.5402L8.48446 28.4639L7.49761 21.96L6.36463 27.2192L3.82874 25.7097L5.88324 18.1708L9.11542 20.0671L9.83578 24.6506L11.3436 21.3737L14.5001 23.2254L14.9419 32.2514L12.4576 30.7952Z" fill="#783887"/>
<path d="M17.5862 20.1238V36.9553L32.162 28.5396V11.7081L17.5862 20.1238ZM29.0742 25.8455C28.9899 26.975 28.4725 28.1665 27.6593 28.9161C27.3601 29.2015 26.9922 29.468 26.5555 29.7121C26.387 29.8066 26.1945 29.9046 25.9778 30.0095L25.4775 30.2433L25.0873 30.4015C24.5749 30.6078 24.011 30.8021 23.3972 30.9843C23.1617 31.0531 22.9193 31.1201 22.6717 31.1855L21.7107 31.4812L21.6574 29.0347L23.1669 28.6616C23.1669 28.6616 23.76 28.5069 24.0299 28.4244C24.3514 28.3247 24.6437 28.2232 24.905 28.1183C25.8523 27.7367 26.3939 27.3034 26.528 26.8186C26.6054 26.6088 26.595 26.4386 26.4988 26.308C26.4025 26.1601 26.203 26.0793 25.9039 26.0656C25.7767 26.0604 25.6151 26.0673 25.4225 26.0828L24.8569 26.1412C24.6076 26.1808 24.3841 26.21 24.1864 26.2289C23.9319 26.253 23.6998 26.265 23.4884 26.2616C22.9657 26.2547 22.5548 26.167 22.2608 26.0002C21.9789 25.8231 21.7915 25.5412 21.7003 25.1561C21.635 24.8827 21.6178 24.5475 21.6505 24.152C21.7347 23.0139 22.1834 22.0752 22.9967 21.3342C23.301 21.0471 23.6689 20.7789 24.1004 20.5313C24.2689 20.4367 24.4614 20.3387 24.6781 20.2339L25.2368 19.9691L25.6151 19.8161C26.0449 19.6425 26.5194 19.4774 27.0386 19.321L27.673 19.137L28.4106 18.9376L28.4896 21.0711C28.2043 21.1158 27.8466 21.1967 27.4151 21.3153C26.8615 21.4597 26.3595 21.623 25.9125 21.8035C24.9222 22.2024 24.5852 22.548 24.4253 23.0603C24.3652 23.2718 24.3669 23.4592 24.391 23.6328C24.4202 23.8391 24.4082 23.901 24.8552 23.9509C24.991 23.956 25.1629 23.9526 25.3692 23.9389L26.6707 23.7996C26.92 23.7772 27.1452 23.7669 27.3429 23.7704C27.8226 23.7772 28.1871 23.8598 28.4381 24.0197C28.7338 24.1881 28.9281 24.4684 29.0243 24.8586C29.0897 25.144 29.1069 25.4707 29.0742 25.8455Z" fill="#783887"/>
</g>
<defs>
<clipPath id="clip0_690_192454">
<rect width="34.6136" height="40" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 10 KiB

View File

@ -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_79317)">
<path d="M6 21H21V3H6V7H11C11.5523 7 12 7.44772 12 8V17C12 17.5523 11.5523 18 11 18H6V21ZM19 15C19.5523 15 20 15.4477 20 16C20 16.5523 19.5523 17 19 17H15C14.4477 17 14 16.5523 14 16C14 15.4477 14.4477 15 15 15H19ZM5.18361 9H4.10783C3.75234 9 3.46416 9.28818 3.46416 9.64367C3.46416 9.76901 3.50075 9.89163 3.56945 9.99646L5.11295 12.352L3.36391 14.9928C3.16602 15.2916 3.24782 15.6942 3.5466 15.8921C3.65285 15.9625 3.77746 16 3.9049 16H5.00122C5.07065 16 5.13512 15.964 5.17153 15.9049L6.49767 13.751L7.81907 15.9046C7.85545 15.9639 7.92 16 7.98954 16H9.09282C9.45399 16 9.74678 15.7072 9.74678 15.346C9.74678 15.218 9.70917 15.0927 9.63861 14.9858L7.92536 12.3902L9.46537 9.99236C9.65764 9.69299 9.57082 9.29444 9.27145 9.10217C9.16759 9.03546 9.04675 9 8.92331 9H7.86127C7.78881 9 7.72202 9.03919 7.68667 9.10244L6.54064 11.1535L5.35688 9.10011C5.32117 9.03817 5.25511 9 5.18361 9ZM19 11C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H15C14.4477 13 14 12.5523 14 12C14 11.4477 14.4477 11 15 11H19ZM19 7C19.5523 7 20 7.44772 20 8C20 8.55228 19.5523 9 19 9H15C14.4477 9 14 8.55228 14 8C14 7.44772 14.4477 7 15 7H19ZM2 18C1.44772 18 1 17.5523 1 17V8C1 7.44772 1.44772 7 2 7H4V3C4 1.89543 4.89543 1 6 1H21C22.1046 1 23 1.89543 23 3V21C23 22.1046 22.1046 23 21 23H6C4.89543 23 4 22.1046 4 21V18H2Z" fill="#00C261"/>
</g>
<defs>
<clipPath id="clip0_40_79317">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -0,0 +1,105 @@
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 3C1 1.89543 1.89543 1 3 1H16.5C17.6046 1 18.5 1.89543 18.5 3V19C18.5 20.1046 17.6046 21 16.5 21H3C1.89543 21 1 20.1046 1 19V3Z" fill="url(#paint0_linear_96_107911)"/>
<g filter="url(#filter0_d_96_107911)">
<path d="M2 4C2 2.89543 2.89543 2 4 2H15.5C16.6046 2 17.5 2.89543 17.5 4V18C17.5 19.1046 16.6046 20 15.5 20H4C2.89543 20 2 19.1046 2 18V4Z" fill="url(#paint1_linear_96_107911)"/>
<path d="M2.1 4C2.1 2.95066 2.95066 2.1 4 2.1H15.5C16.5493 2.1 17.4 2.95066 17.4 4V18C17.4 19.0493 16.5493 19.9 15.5 19.9H4C2.95066 19.9 2.1 19.0493 2.1 18V4Z" stroke="url(#paint2_linear_96_107911)" stroke-width="0.2"/>
</g>
<g filter="url(#filter1_d_96_107911)">
<rect x="11.5" y="5.5" width="5" height="1.5" rx="0.75" fill="white"/>
</g>
<g filter="url(#filter2_d_96_107911)">
<rect x="11.5" y="9" width="5" height="1.5" rx="0.75" fill="white"/>
</g>
<g filter="url(#filter3_d_96_107911)">
<path d="M3 6.27909V15.7523L10.2123 17V5L3 6.28318V6.27909Z" fill="white"/>
</g>
<g filter="url(#filter4_d_96_107911)">
<circle cx="17" cy="17" r="6" fill="url(#paint3_linear_96_107911)"/>
<circle cx="17" cy="17" r="6.2" stroke="url(#paint4_linear_96_107911)" stroke-width="0.4"/>
</g>
<g filter="url(#filter5_d_96_107911)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.6605 14.2272C17.3566 13.924 16.8646 13.9243 16.5611 14.2278L14.2278 16.5611C13.9241 16.8649 13.9241 17.3573 14.2278 17.6611C14.5315 17.9648 15.024 17.9648 15.3277 17.6611L16.3333 16.6555V20.3951C16.3333 20.7292 16.6816 21 17.1111 21C17.5407 21 17.8889 20.7292 17.8889 20.3951V16.6526L18.8951 17.6565C19.1992 17.9599 19.6916 17.9594 19.995 17.6553C20.2984 17.3512 20.2979 16.8588 19.9938 16.5554L17.6605 14.2272Z" fill="#811FA3"/>
</g>
<defs>
<filter id="filter0_d_96_107911" x="1" y="2" width="17.5" height="20" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.505882 0 0 0 0 0.121569 0 0 0 0 0.639216 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_96_107911"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_96_107911" result="shape"/>
</filter>
<filter id="filter1_d_96_107911" x="11.3" y="5.5" width="5.4" height="1.9" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="0.2"/>
<feGaussianBlur stdDeviation="0.1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.513726 0 0 0 0 0.129412 0 0 0 0 0.647059 0 0 0 0.26 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_96_107911"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_96_107911" result="shape"/>
</filter>
<filter id="filter2_d_96_107911" x="11.3" y="9" width="5.4" height="1.9" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="0.2"/>
<feGaussianBlur stdDeviation="0.1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.513726 0 0 0 0 0.129412 0 0 0 0 0.647059 0 0 0 0.26 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_96_107911"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_96_107911" result="shape"/>
</filter>
<filter id="filter3_d_96_107911" x="2.8" y="5" width="7.61191" height="12.4" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="0.2"/>
<feGaussianBlur stdDeviation="0.1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.513726 0 0 0 0 0.129412 0 0 0 0 0.647059 0 0 0 0.26 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_96_107911"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_96_107911" result="shape"/>
</filter>
<filter id="filter4_d_96_107911" x="10.1996" y="10.6" width="13.6008" height="13.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="0.4"/>
<feGaussianBlur stdDeviation="0.2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.505882 0 0 0 0 0.121569 0 0 0 0 0.639216 0 0 0 0.18 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_96_107911"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_96_107911" result="shape"/>
</filter>
<filter id="filter5_d_96_107911" x="13.8" y="14" width="6.62266" height="7.4" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="0.2"/>
<feGaussianBlur stdDeviation="0.1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.513726 0 0 0 0 0.129412 0 0 0 0 0.647059 0 0 0 0.26 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_96_107911"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_96_107911" result="shape"/>
</filter>
<linearGradient id="paint0_linear_96_107911" x1="9" y1="19" x2="9" y2="1" gradientUnits="userSpaceOnUse">
<stop stop-color="#811FA3"/>
<stop offset="1" stop-color="#E28EFF"/>
</linearGradient>
<linearGradient id="paint1_linear_96_107911" x1="9" y1="2" x2="9" y2="18" gradientUnits="userSpaceOnUse">
<stop stop-color="#FCF2FF"/>
<stop offset="1" stop-color="#F8E2FF"/>
</linearGradient>
<linearGradient id="paint2_linear_96_107911" x1="9" y1="2" x2="9" y2="18" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#E6D2ED"/>
</linearGradient>
<linearGradient id="paint3_linear_96_107911" x1="17" y1="11" x2="17" y2="23" gradientUnits="userSpaceOnUse">
<stop stop-color="#FCF2FF"/>
<stop offset="1" stop-color="#F8E2FF"/>
</linearGradient>
<linearGradient id="paint4_linear_96_107911" x1="17" y1="11" x2="17" y2="29" gradientUnits="userSpaceOnUse">
<stop offset="0.127695" stop-color="white"/>
<stop offset="1" stop-color="#F4D6FF"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 6.9 KiB

View File

@ -0,0 +1,27 @@
<svg width="474" height="77" viewBox="0 0 474 77" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 12C0 5.37258 5.37258 0 12 0H462C468.627 0 474 5.37258 474 12V77H0V12Z" fill="#F9F9FE"/>
<g opacity="0.02">
<path d="M176.439 58.1398L174.36 37.3458L168.518 58.1398H161.715L156.008 37.3458L153.855 58.1398L144.451 58.0603L149.041 27.3673H161.021L165.129 41.9723L169.276 27.3673H180.976L185.644 58.1424H176.439V58.1398Z" fill="#783887"/>
<path d="M208.393 45.2589V49.1465H196.018L195.994 49.8536C195.994 51.3366 196.584 52.192 197.493 52.5125C198.2 52.7137 199.002 52.8117 199.897 52.8117H200.438C202.842 52.8117 206.356 52.2688 208.88 51.7498H208.92L207.903 57.2395C207.903 57.3057 206.722 57.8089 204.426 58.1823C202.983 58.3439 201.327 58.4233 199.458 58.4233C194.649 58.4233 191.545 56.7999 190.141 53.5559C189.62 52.2741 189.14 50.9368 189.14 49.5358V44.287C189.14 40.4392 190.978 37.8757 194.209 36.6072C195.639 36.1411 197.167 35.9054 198.798 35.9054C203.327 35.9054 206.264 37.3805 207.614 40.3332C208.133 41.4905 208.393 43.1351 208.393 45.2589ZM201.91 44.2367C201.91 42.714 201.455 41.6971 200.8 41.4164C200.305 41.0827 199.543 41.0324 198.835 41.0324C197.032 41.0324 196.132 41.8798 196.132 43.5773L196.02 44.5995H201.913V44.2367H201.91Z" fill="#783887"/>
<path d="M250.098 45.2589V49.1465H237.723L237.699 49.8536C237.699 51.3366 238.289 52.192 239.198 52.5125C239.905 52.7137 240.707 52.8117 241.602 52.8117H242.142C244.547 52.8117 248.061 52.2688 250.585 51.7498H250.625L249.608 57.2395C249.608 57.3057 248.427 57.8089 246.131 58.1823C244.687 58.3439 243.032 58.4233 241.163 58.4233C236.353 58.4233 233.25 56.7999 231.846 53.5559C231.324 52.2741 230.845 50.9368 230.845 49.5358V44.287C230.845 40.4392 232.683 37.8757 235.914 36.6072C237.344 36.1411 238.872 35.9054 240.503 35.9054C245.032 35.9054 247.969 37.3805 249.319 40.3332C249.838 41.4905 250.098 43.1351 250.098 45.2589ZM243.615 44.2367C243.615 42.714 243.159 41.6971 242.505 41.4164C242.01 41.0827 241.247 41.0324 240.54 41.0324C238.737 41.0324 237.836 41.8798 237.836 43.5773L237.725 44.5995H243.618V44.2367H243.615Z" fill="#783887"/>
<path d="M365.202 45.2589V49.1465H352.826L352.802 49.8536C352.802 51.3366 353.393 52.192 354.301 52.5125C355.008 52.7137 355.811 52.8117 356.706 52.8117H357.246C359.651 52.8117 363.165 52.2688 365.689 51.7498H365.729L364.712 57.2395C364.712 57.3057 363.53 57.8089 361.234 58.1823C359.791 58.3439 358.136 58.4233 356.266 58.4233C351.457 58.4233 348.353 56.7999 346.95 53.5559C346.428 52.2741 345.949 50.9368 345.949 49.5358V44.287C345.949 40.4392 347.784 37.8757 351.018 36.6072C352.448 36.1411 353.976 35.9054 355.607 35.9054C360.135 35.9054 363.072 37.3805 364.423 40.3332C364.942 41.4905 365.202 43.1351 365.202 45.2589ZM358.719 44.2367C358.719 42.714 358.263 41.6971 357.609 41.4164C357.114 41.0827 356.351 41.0324 355.644 41.0324C353.841 41.0324 352.94 41.8798 352.94 43.5773L352.829 44.5995H358.721V44.2367H358.719Z" fill="#783887"/>
<path d="M406.911 45.2589V49.1465H394.536L394.512 49.8536C394.512 51.3366 395.102 52.192 396.011 52.5125C396.718 52.7137 397.52 52.8117 398.415 52.8117H398.956C401.36 52.8117 404.874 52.2688 407.398 51.7498H407.438L406.421 57.2395C406.421 57.3057 405.24 57.8089 402.944 58.1823C401.501 58.3439 399.845 58.4233 397.976 58.4233C393.167 58.4233 390.063 56.7999 388.659 53.5559C388.138 52.2741 387.658 50.9368 387.658 49.5358V44.287C387.658 40.4392 389.496 37.8757 392.727 36.6072C394.157 36.1411 395.685 35.9054 397.316 35.9054C401.845 35.9054 404.782 37.3805 406.132 40.3332C406.649 41.4905 406.911 43.1351 406.911 45.2589ZM400.428 44.2367C400.428 42.714 399.972 41.6971 399.318 41.4164C398.823 41.0827 398.06 41.0324 397.353 41.0324C395.55 41.0324 394.65 41.8798 394.65 43.5773L394.538 44.5995H400.431V44.2367H400.428Z" fill="#783887"/>
<path d="M228.151 58.2221H224.168C223.475 58.2221 222.879 58.2009 222.386 58.1612C221.065 58.0685 219.981 57.8195 219.139 57.4197C218.112 56.9271 217.331 56.1697 216.796 55.1554C216.195 54.0061 215.895 52.4701 215.895 50.5475L215.856 41.8931H212.569V36.2629H215.856V31.904L219.145 31.8113L222.587 31.377V36.2629H227.717L227.015 41.8931H222.587V50.1688C222.587 50.3568 222.593 50.5157 222.609 50.6508C222.635 50.9977 222.688 51.2864 222.77 51.5115C222.971 52.0596 223.398 52.441 224.052 52.6528C224.56 52.8674 227.598 52.825 227.598 52.825L228.151 58.2221Z" fill="#783887"/>
<path d="M269.807 36.2999L269.709 41.5275C269.132 41.4984 267.493 41.5037 265.782 41.8956C264.251 42.2452 262.662 42.9602 261.754 43.2939V58.1399H255.062V36.1013H261.201C261.201 36.1013 261.052 37.2507 261.171 37.7035L262.734 37.1235C263.669 36.8031 264.678 36.5806 265.93 36.4218C267.824 36.1808 268.963 36.284 269.807 36.2999Z" fill="#783887"/>
<path d="M385.425 36.2999L385.327 41.5275C384.749 41.4984 383.11 41.5037 381.399 41.8956C379.869 42.2452 378.28 42.9602 377.371 43.2939V58.1399H370.679V36.1013H376.818C376.818 36.1013 376.67 37.2507 376.789 37.7035L378.351 37.1235C379.286 36.8031 380.295 36.5806 381.548 36.4218C383.438 36.1808 384.58 36.284 385.425 36.2999Z" fill="#783887"/>
<path d="M282.847 59.072C281.272 59.072 279.542 58.9713 277.66 58.7727C276.939 58.6933 276.198 58.5979 275.435 58.492L272.488 58.2113L272.551 50.6268L277.172 51.3497C277.172 51.3497 278.989 51.6093 279.818 51.6914C280.806 51.784 281.701 51.8317 282.503 51.8317C285.414 51.8317 287.098 51.1697 287.553 49.8482C287.808 49.3 287.794 48.7651 287.514 48.246C287.233 47.6713 286.64 47.1788 285.731 46.763C285.345 46.5909 284.857 46.4081 284.27 46.2228L282.546 45.7011C281.783 45.513 281.102 45.3277 280.501 45.1396C279.725 44.8986 279.018 44.6444 278.377 44.3769C276.788 43.7096 275.552 42.9337 274.67 42.0518C273.828 41.1567 273.287 40.063 273.046 38.7653C272.872 37.8438 272.853 36.7951 272.985 35.6192C273.346 32.2269 274.794 29.8964 277.334 28.6279C278.282 28.1194 279.423 27.754 280.761 27.5262C281.282 27.4468 281.876 27.3806 282.543 27.325L284.267 27.2058H285.429C286.751 27.2058 288.207 27.2853 289.796 27.4468L291.74 27.6666L293.999 27.9659L294.044 34.6209C293.176 34.4063 292.082 34.213 290.758 34.0409C289.06 33.7999 287.524 33.6807 286.15 33.6807C283.104 33.6807 282.053 34.3269 281.518 35.704C281.317 36.2786 281.304 36.856 281.362 37.42C281.433 38.09 281.391 38.2675 282.744 38.9693C283.157 39.1573 283.679 39.3559 284.307 39.5704L288.274 40.7515C289.036 40.9925 289.717 41.2388 290.318 41.493C291.775 42.1074 292.876 42.8145 293.623 43.6169C294.505 44.4988 295.072 45.6004 295.326 46.9219C295.498 47.87 295.519 48.9001 295.387 50.0071C295.027 53.373 293.345 56.3946 290.805 57.6896C289.871 58.1981 288.729 58.5582 287.379 58.7727C286.857 58.8522 286.264 58.9184 285.596 58.974L284.052 59.0746H282.847V59.072Z" fill="#783887"/>
<path d="M299.737 36.1834H305.831L305.648 37.6267C306.263 37.3063 306.864 37.0335 307.452 36.8058C308.172 36.525 308.887 36.3185 309.597 36.1834C311.334 35.8233 313.01 35.8974 314.626 36.4032C315.666 36.7369 316.562 37.3248 317.311 38.1669C317.592 38.4741 317.846 38.8211 318.071 39.2077L318.331 39.6685C318.397 39.8009 318.463 39.9413 318.532 40.0896C318.813 40.8496 319.104 41.7103 319.226 42.6319C319.371 43.6726 319.512 44.9967 319.512 46.6784V47.9257C319.512 51.1989 319.316 52.9653 318.685 54.1729C317.817 56.2173 315.73 57.2554 311.697 57.3825C311.154 57.3984 310.293 57.3852 309.398 57.3587L307.902 57.3189C307.348 57.3216 306.956 57.2925 306.514 57.3057V66.797L299.743 67.2419V36.1834H299.737ZM306.509 51.657C307.796 51.898 308.532 51.8795 309.623 51.8159L310.751 51.6703C312.007 51.3896 312.542 50.5395 312.542 49.1889V44.9755C312.542 44.3612 312.489 43.9083 312.38 43.6144C311.98 42.2532 310.87 41.7182 309.054 42.0122L308.312 42.1313L307.031 42.4915L306.509 42.6716V51.657Z" fill="#783887"/>
<path d="M342.984 46.2071V58.1824H336.173V45.1663C336.173 44.348 335.696 43.1616 334.742 42.6028C334.062 42.2029 332.915 42.2718 332.539 42.3327C331.633 42.4783 330.617 43.0265 330.142 43.4635V58.1824H323.371V26.5254L330.142 26.483V37.6718C330.971 37.3911 331.859 37.0415 332.807 36.8959C333.58 36.7767 334.398 36.6416 335.052 36.6416C338.94 36.6416 341.006 37.7407 341.954 39.7719C342.473 40.5319 342.984 42.7617 342.984 46.2071Z" fill="#783887"/>
<g clip-path="url(#clip0_690_192478)">
<path d="M96.682 3.94158L126.511 21.1642V55.6064L96.682 72.829L66.8533 55.6064V21.1642L96.682 3.94158ZM96.682 3L66.0366 20.6919V56.0757L96.682 73.7675L127.327 56.0757V20.6919L96.682 3Z" fill="#783887"/>
<path d="M70.845 22.9042L96.6789 7.98828L122.516 22.9042L96.6789 37.8201L70.845 22.9042Z" fill="#783887"/>
<path d="M70.3574 23.7512V53.583L96.1914 68.4989V38.6671L70.3574 23.7512ZM88.0798 57.5809L88.0645 47.0712L84.2921 55.3565L81.0378 53.449L79.2887 41.9215L77.2806 51.2428L72.786 48.5674L76.4274 35.2055L82.1561 38.5666L83.4328 46.6903L86.1052 40.8824L91.6998 44.1642L92.4829 60.1619L88.0798 57.5809Z" fill="#783887"/>
<path d="M97.1696 38.6671V68.4989L123.003 53.583V23.7512L97.1696 38.6671ZM117.531 48.8081C117.381 50.8101 116.464 52.9218 115.023 54.2504C114.493 54.7562 113.841 55.2285 113.067 55.6612C112.768 55.8288 112.427 56.0025 112.043 56.1884L111.156 56.6028L110.464 56.8831C109.556 57.2488 108.557 57.5931 107.469 57.9161C107.052 58.038 106.622 58.1568 106.183 58.2726L104.48 58.7968L104.385 54.4606L107.061 53.7994C107.061 53.7994 108.112 53.5251 108.59 53.3789C109.16 53.2021 109.678 53.0224 110.141 52.8365C111.82 52.16 112.78 51.3921 113.018 50.5328C113.155 50.1611 113.137 49.8594 112.966 49.6278C112.795 49.3658 112.442 49.2225 111.912 49.1982C111.686 49.189 111.4 49.2012 111.059 49.2286L110.056 49.3322C109.614 49.4023 109.218 49.4541 108.868 49.4876C108.417 49.5303 108.005 49.5516 107.63 49.5455C106.704 49.5333 105.976 49.3779 105.455 49.0824C104.955 48.7685 104.623 48.2688 104.461 47.5862C104.346 47.1017 104.315 46.5075 104.373 45.8067C104.522 43.7894 105.318 42.1257 106.759 40.8123C107.298 40.3035 107.95 39.8281 108.715 39.3893C109.014 39.2217 109.355 39.048 109.739 38.8621L110.729 38.3929L111.4 38.1217C112.162 37.8139 113.003 37.5214 113.923 37.2441L115.047 36.9181L116.355 36.5646L116.495 40.3461C115.989 40.4253 115.355 40.5686 114.59 40.7788C113.609 41.0348 112.719 41.3243 111.927 41.6442C110.172 42.3512 109.575 42.9636 109.291 43.8717C109.185 44.2465 109.188 44.5786 109.23 44.8864C109.282 45.2521 109.261 45.3618 110.053 45.4501C110.294 45.4593 110.598 45.4532 110.964 45.4288L113.271 45.182C113.713 45.1424 114.112 45.1241 114.462 45.1302C115.312 45.1424 115.958 45.2886 116.403 45.572C116.927 45.8706 117.272 46.3673 117.442 47.059C117.558 47.5649 117.589 48.1438 117.531 48.8081Z" fill="#783887"/>
</g>
</g>
<defs>
<clipPath id="clip0_690_192478">
<rect width="61.3487" height="70.8955" fill="white" transform="translate(66 3)"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 10 KiB

View File

@ -4,17 +4,19 @@
<template #content>
<template v-for="item of props.list">
<a-divider v-if="item.isDivider" :key="`${item.label}-divider`" class="mx-0 my-[6px]" />
<a-doption v-else :key="item.label" :class="item.danger ? 'error-6' : ''">{{ item.label }}</a-doption>
<a-doption v-else :key="item.label" :class="item.danger ? 'error-6' : ''">{{ t(item.label || '') }}</a-doption>
</template>
</template>
</a-dropdown>
</template>
<script setup lang="ts">
import { useI18n } from '@/hooks/useI18n';
import MsButton from '@/components/pure/ms-button/index.vue';
import type { ActionsItem, SelectedValue } from './types';
const { t } = useI18n();
const props = defineProps<{
list: ActionsItem[];
}>();
@ -22,7 +24,7 @@
const emit = defineEmits(['select']);
function selectHandler(value: SelectedValue) {
const item = props.list.find((e: ActionsItem) => e.label === value);
const item = props.list.find((e: ActionsItem) => t(e.label || '') === value);
emit('select', item);
}
</script>

View File

@ -16,16 +16,20 @@ export interface ModalOptions extends ModalConfig {
export default function useModal() {
return {
openModal: (options: ModalOptions) =>
Modal[options.type]({
...options,
titleAlign: 'start',
modalClass: `ms-modal-${options.mode || 'default'} ms-modal-${options.size || 'medium'}`,
// error 使用 warning的感叹号图标
Modal[options.type === 'error' ? 'warning' : options.type]({
// 默认设置按钮属性也可通过options传入覆盖
okButtonProps: {
type: options.mode === 'weak' ? 'text' : 'primary',
},
cancelButtonProps: {
type: options.mode === 'weak' ? 'text' : 'secondary',
},
...options,
titleAlign: 'start',
modalClass: `ms-modal-${options.mode || 'default'} ms-modal-${options.size || 'medium'} ms-modal-${
options.type
}`,
}),
};
}

View File

@ -7,6 +7,7 @@ import localeLogin from '@/views/login/locale/en-US';
import localeTable from '@/components/pure/ms-table/locale/en-US';
import localeApiTest from '@/views/api-test/locale/en-US';
import localeSystem from '@/views/system/locale/en-US';
import baseLocale from '@/views/base/locale/en-US';
export default {
message: {
@ -24,6 +25,7 @@ export default {
...localeTable,
...localeApiTest,
...localeSystem,
...baseLocale,
},
dayjsLocale,
dayjsLocaleName: 'en-US',

View File

@ -7,6 +7,7 @@ import localeLogin from '@/views/login/locale/zh-CN';
import localeTable from '@/components/pure/ms-table/locale/zh-CN';
import localeApiTest from '@/views/api-test/locale/zh-CN';
import localeSystem from '@/views/system/locale/zh-CN';
import baseLocale from '@/views/base/locale/zh-CN';
export default {
message: {
@ -25,6 +26,7 @@ export default {
...localeTable,
...localeApiTest,
...localeSystem,
...baseLocale,
},
dayjsLocale,
dayjsLocaleName: 'zh-CN',

View File

@ -1,6 +1,7 @@
export const WHITE_LIST = [
{ name: 'notFound', children: [] },
{ name: 'login', children: [] },
{ name: 'invite', children: [] },
];
export const NOT_FOUND = {

View File

@ -3,7 +3,7 @@ import NProgress from 'nprogress'; // progress bar
import 'nprogress/nprogress.css';
import appRoutes from './routes';
import { REDIRECT_MAIN, NOT_FOUND_ROUTE } from './routes/base';
import { REDIRECT_MAIN, NOT_FOUND_ROUTE, INVITE_ROUTE } from './routes/base';
import createRouteGuard from './guard';
NProgress.configure({ showSpinner: false }); // NProgress Configuration
@ -26,6 +26,7 @@ const router = createRouter({
...appRoutes,
REDIRECT_MAIN,
NOT_FOUND_ROUTE,
INVITE_ROUTE,
],
scrollBehavior() {
return { top: 0 };

View File

@ -15,7 +15,7 @@ export const REDIRECT_MAIN: RouteRecordRaw = {
{
path: '/redirect/:path',
name: REDIRECT_ROUTE_NAME,
component: () => import('@/views/redirect/index.vue'),
component: () => import('@/views/base/redirect/index.vue'),
meta: {
hideInMenu: true,
},
@ -26,5 +26,14 @@ export const REDIRECT_MAIN: RouteRecordRaw = {
export const NOT_FOUND_ROUTE: RouteRecordRaw = {
path: '/:pathMatch(.*)*',
name: 'notFound',
component: () => import('@/views/not-found/index.vue'),
component: () => import('@/views/base/not-found/index.vue'),
};
export const INVITE_ROUTE: RouteRecordRaw = {
path: '/invite',
name: 'invite',
component: () => import('@/views/base/invite/index.vue'),
meta: {
hideInMenu: true,
},
};

View File

@ -0,0 +1,53 @@
// 邮箱校验
export const emailRegex = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
// 手机号校验11位
export const phoneRegex = /^\d{11}$/;
// 密码校验8-32位
export const passwordLengthRegex = /^.{8,32}$/;
// 密码校验,必须包含数字和字母
export const passwordWordRegex = /^(?=.*[a-zA-Z])(?=.*[0-9])[a-zA-Z0-9]+$/;
/**
*
* @param email
* @returns boolean
*/
export function validateEmail(email: string): boolean {
return emailRegex.test(email);
}
/**
*
* @param phone
* @returns boolean
*/
export function validatePhone(phone: string): boolean {
return phoneRegex.test(phone);
}
/**
*
* @param password
* @returns boolean
*/
export function validatePasswordLength(password: string): boolean {
return passwordLengthRegex.test(password);
}
/**
*
* @param password
* @returns boolean
*/
export function validateWordPassword(password: string): boolean {
return passwordWordRegex.test(password);
}
/**
*
* @param password
* @returns boolean
*/
export function validatePassword(password: string): boolean {
return validatePasswordLength(password) && validateWordPassword(password);
}

View File

@ -0,0 +1,146 @@
<template>
<div class="invite-page">
<div class="form-box w-1/3 rounded-[12px] bg-white">
<div class="form-box-title">{{ t('invite.title') }}</div>
<a-form class="p-[24px_40px_40px_40px]" :model="form" :rules="rules" layout="vertical" @submit="confirmInvite">
<a-form-item field="email" class="hidden-item">
<a-input v-model="form.email" :placeholder="t('invite.emailPlaceholder')" allow-clear />
</a-form-item>
<a-form-item field="name" class="hidden-item">
<a-input v-model="form.name" :placeholder="t('invite.namePlaceholder')" allow-clear />
</a-form-item>
<a-form-item field="password" class="hidden-item">
<a-popover position="tl" trigger="focus" :title="t('invite.passwordTipTitle')">
<a-input-password
v-model="form.password"
:placeholder="t('invite.passwordPlaceholder')"
allow-clear
@input="validatePsw"
@clear="validatePsw(form.password)"
/>
<template #content>
<div class="check-list-item">
<template v-if="pswLengthValidateRes">
<icon-check-circle-fill class="check-list-item--success" />{{ t('invite.passwordLengthRule') }}
</template>
<template v-else>
<icon-close-circle-fill class="check-list-item--error" />{{ t('invite.passwordLengthRule') }}
</template>
</div>
<div class="check-list-item">
<template v-if="pswValidateRes">
<icon-check-circle-fill class="check-list-item--success" />{{ t('invite.passwordWordRule') }}
</template>
<template v-else>
<icon-close-circle-fill class="check-list-item--error" />{{ t('invite.passwordWordRule') }}
</template>
</div>
</template>
</a-popover>
</a-form-item>
<a-form-item field="repassword" class="hidden-item">
<a-input-password v-model="form.repassword" :placeholder="t('invite.repasswordPlaceholder')" allow-clear />
</a-form-item>
<a-button type="primary" html-type="submit">{{ t('invite.confirm') }}</a-button>
</a-form>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useI18n } from '@/hooks/useI18n';
import { validateEmail, validatePasswordLength, validateWordPassword } from '@/utils/validate';
const { t } = useI18n();
const form = ref({
name: '',
email: '',
password: '',
repassword: '',
});
const pswValidateRes = ref(false);
const pswLengthValidateRes = ref(false);
const rules = {
email: [
{ required: true, message: t('invite.emailNotNull') },
{
validator: (value: string, callback: (error?: string) => void) => {
if (!validateEmail(value)) {
callback(t('invite.emailErr'));
}
},
},
],
name: [{ required: true, message: t('invite.nameNotNull') }],
password: [
{ required: true, message: t('invite.passwordNotNull') },
{
validator: (value: string, callback: (error?: string) => void) => {
pswValidateRes.value = validateWordPassword(value);
pswLengthValidateRes.value = validatePasswordLength(value);
if (!pswLengthValidateRes.value) {
callback(t('invite.passwordLengthRule'));
} else if (!pswValidateRes.value) {
callback(t('invite.passwordWordRule'));
}
},
},
],
repassword: [{ required: true, message: t('invite.repasswordNotNull') }],
};
function validatePsw(value: string) {
pswValidateRes.value = validateWordPassword(value);
pswLengthValidateRes.value = validatePasswordLength(value);
}
function confirmInvite() {}
</script>
<style lang="less" scoped>
.invite-page {
@apply flex items-center justify-center;
width: 100vw;
height: 100vh;
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: url('@/assets/images/invite-bg.jpg');
.form-box {
@apply flex flex-col items-center justify-center;
border: 3px solid #ffffff;
box-shadow: 0 6px 30px rgb(120 56 135 / 5%), 0 16px 24px rgb(120 56 135 / 5%), 0 8px 10px rgb(120 56 135 / 5%);
.form-box-title {
@apply w-full text-center font-medium;
padding: 24px;
font-size: 24px;
border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
background-color: var(--color-text-n9);
}
.hidden-item {
margin-bottom: 24px;
}
}
}
.check-list-item {
@apply flex items-center gap-2;
&:first-child {
@apply mt-2;
}
&:not(:last-child) {
@apply mb-2;
}
.check-list-item--success {
color: rgb(var(--success-6));
}
.check-list-item--error {
color: rgb(var(--danger-6));
}
}
</style>

View File

@ -0,0 +1,17 @@
export default {
'invite.title': 'Join MeterSphere',
'invite.emailPlaceholder': 'Please enter the email address',
'invite.emailNotNull': 'Email address cannot be empty',
'invite.emailErr': 'Please enter the correct email',
'invite.namePlaceholder': 'Please enter your name',
'invite.nameNotNull': 'The name cannot be empty',
'invite.passwordPlaceholder': 'Please enter the password',
'invite.passwordNotNull': 'Password cannot be empty',
'invite.repasswordPlaceholder': 'Please enter the password again',
'invite.repasswordNotNull': 'Confirm password cannot be empty',
'invite.repasswordNotSame': 'The passwords entered twice are inconsistent',
'invite.confirm': 'Confirm',
'invite.passwordTipTitle': 'The passwords must match both, only the following rules are supported',
'invite.passwordLengthRule': 'The length is 8-32 digits',
'invite.passwordWordRule': 'Must contain numbers and letters, Chinese or spaces are not allowed',
};

View File

@ -0,0 +1,17 @@
export default {
'invite.title': '加入 MeterSphere',
'invite.emailPlaceholder': '请输入邮箱地址',
'invite.emailNotNull': '邮箱地址不能为空',
'invite.emailErr': '请输入正确的邮箱',
'invite.namePlaceholder': '请输入姓名',
'invite.nameNotNull': '姓名不能为空',
'invite.passwordPlaceholder': '请输入密码',
'invite.passwordNotNull': '密码不能为空',
'invite.repasswordPlaceholder': '请再次输入密码',
'invite.repasswordNotNull': '确认密码不能为空',
'invite.repasswordNotSame': '两次输入的密码不一致',
'invite.confirm': '确认',
'invite.passwordTipTitle': '密码须同时符合,仅支持以下规则',
'invite.passwordLengthRule': '长度为8-32位',
'invite.passwordWordRule': '必须包含数字和字母,不允许输入中文或空格',
};

View File

@ -1,5 +1,5 @@
export default {
system: {
'system': {
userGroup: {
searchHolder: 'Please input user group name',
inSystem: 'In system',
@ -34,4 +34,65 @@ export default {
searchPlacehoder: 'Search by ID/Name',
},
},
'system.user.createUser': 'Create User',
'system.user.emailInvite': 'Email Invite',
'system.user.importUser': 'Import User',
'system.user.searchUser': 'Search by name or email address',
'system.user.editUser': 'Edit',
'system.user.resetPassword': 'Reset PSW',
'system.user.disable': 'Disable',
'system.user.delete': 'Delete',
'system.user.deleteUserStart': 'Are you sure to delete the user',
'system.user.deleteUserEnd': '?',
'system.user.deleteUserContent': "Only delete user information, does not handle the user's system data",
'system.user.deleteUserConfirm': 'Delete',
'system.user.deleteUserCancel': 'Cancel',
'system.user.deleteUserSuccess': 'Delete successful',
'system.user.disableUserStart': 'Are you sure to disable the user',
'system.user.disableUserEnd': '?',
'system.user.disableUserContent': "Disabled users can't log in to the system",
'system.user.disableUserConfirm': 'Disabled',
'system.user.disableUserCancel': 'Cancel',
'system.user.disableUserSuccess': 'Disabled successful',
'system.user.resetPswStart': 'Reset the password of',
'system.user.resetPswEnd': 'to its initial password?',
'system.user.resetPswContent': "The initial password is the user's mailbox, which will take effect at the next login",
'system.user.resetPswConfirm': 'Reset',
'system.user.resetPswCancel': 'Cancel',
'system.user.resetPswSuccess': 'Reset successful',
'system.user.createUserModalTitle': 'Create a user',
'system.user.addUser': 'Add user',
'system.user.createUserName': 'Name',
'system.user.createUserNameNotNull': 'Name cannot be blank',
'system.user.createUserNameOverLength': 'Name length cannot exceed 50',
'system.user.createUserNamePlaceholder': 'Please enter user name',
'system.user.createUserEmail': 'Email',
'system.user.createUserEmailNotNull': 'Email cannot be empty',
'system.user.createUserEmailErr': 'Please enter the correct email',
'system.user.createUserEmailNoRepeat': 'Email cannot be repeated',
'system.user.createUserEmailPlaceholder': 'Please input the email address',
'system.user.createUserPhone': 'Phone',
'system.user.createUserPhoneErr': 'Please enter 11 digit mobile number',
'system.user.createUserPhonePlaceholder': 'Please enter an 11-digit mobile number',
'system.user.createUserOrgnization': 'Orgnization',
'system.user.createUserOrgnizationPlaceholder': 'Please select user organization',
'system.user.createUserUserGroup': 'UserGroup',
'system.user.createUserUserGroupPlaceholder': 'Please select a user group',
'system.user.editUserModalTitle': 'Edit the user',
'system.user.editUserModalCancelCreate': 'Cancel',
'system.user.editUserModalSaveAndContinue': 'Save & Continue',
'system.user.editUserModalCreateUser': 'Create',
'system.user.editUserModalEditUser': 'Save',
'system.user.invite': 'Email invite',
'system.user.inviteEmail': 'Email',
'system.user.inviteEmailPlaceholder': 'Enter multiple email addresses, separated by spaces or carriage returns',
'system.user.inviteSendEmail': 'SendEmail',
'system.user.importModalTitle': 'Import user',
'system.user.importDownload': 'Download the template',
'system.user.importModalTip': 'User groups only support adding user groups that exist in the system',
'system.user.importModalDragtext': 'Drag or click this area to select a file',
'system.user.importModalFileTip': 'Only supports xls/xlsx format files, and the file size should not exceed 50M',
'system.user.importModalCancel': 'Cancel',
'system.user.importModalConfirm': 'Import',
'system.user.importModalUploading': 'File is uploading...',
};

View File

@ -1,5 +1,5 @@
export default {
system: {
'system': {
userGroup: {
global: '全局用户组',
searchHolder: '请输入用户组名称',
@ -34,4 +34,66 @@ export default {
searchPlacehoder: '通过ID/名称搜索',
},
},
'system.user.createUser': '创建用户',
'system.user.emailInvite': '邮箱邀请',
'system.user.importUser': '导入用户',
'system.user.searchUser': '通过名称或邮箱搜索搜索',
'system.user.editUser': '编辑',
'system.user.resetPassword': '重置密码',
'system.user.disable': '禁用',
'system.user.delete': '删除',
'system.user.deleteUserStart': '确认删除',
'system.user.deleteUserEnd': '这个用户吗?',
'system.user.deleteUserContent': '仅删除用户信息,不处理该用户的系统数据',
'system.user.deleteUserConfirm': '确认删除',
'system.user.deleteUserCancel': '取消',
'system.user.deleteUserSuccess': '删除成功',
'system.user.disableUserStart': '确认禁用',
'system.user.disableUserEnd': '这个用户吗?',
'system.user.disableUserContent': '禁用的用户无法登录系统',
'system.user.disableUserConfirm': '确认禁用',
'system.user.disableUserCancel': '取消',
'system.user.disableUserSuccess': '禁用成功',
'system.user.resetPswStart': '是否将',
'system.user.resetPswEnd': '的密码重置为初始密码?',
'system.user.resetPswContent': '初始的密码为用户邮箱,下次登录时生效',
'system.user.resetPswConfirm': '确认重置',
'system.user.resetPswCancel': '取消',
'system.user.resetPswSuccess': '重置成功',
'system.user.createUserModalTitle': '创建用户',
'system.user.addUser': '添加用户',
'system.user.createUserName': '姓名',
'system.user.createUserNameNotNull': '姓名不能为空',
'system.user.createUserNameOverLength': '姓名长度不能超过50',
'system.user.createUserNamePlaceholder': '请输入用户姓名',
'system.user.createUserEmail': '邮箱',
'system.user.createUserEmailNotNull': '邮箱不能为空',
'system.user.createUserEmailErr': '请输入正确的邮箱',
'system.user.createUserEmailNoRepeat': '邮箱不能重复',
'system.user.createUserEmailPlaceholder': '请输入邮箱地址',
'system.user.createUserPhone': '手机',
'system.user.createUserPhoneErr': '请输入11位手机号',
'system.user.createUserPhonePlaceholder': '请输入 11 位手机号',
'system.user.createUserOrgnization': '组织',
'system.user.createUserOrgnizationPlaceholder': '请选择用户组织',
'system.user.createUserUserGroup': '用户组',
'system.user.createUserUserGroupPlaceholder': '请选择用户组',
'system.user.editUserModalTitle': '编辑用户',
'system.user.editUserModalCancelCreate': '取消',
'system.user.editUserModalSaveAndContinue': '保存并继续创建',
'system.user.editUserModalCreateUser': '创建',
'system.user.editUserModalEditUser': '保存',
'system.user.invite': '邮箱邀请',
'system.user.inviteEmail': '邮箱',
'system.user.inviteCancel': '取消',
'system.user.inviteEmailPlaceholder': '可输入多个邮箱地址,空格或回车分隔',
'system.user.inviteSendEmail': '发送邮件',
'system.user.importModalTitle': '导入用户',
'system.user.importModalTip': '用户组仅支持添加系统存在的用户组',
'system.user.importDownload': '下载模板',
'system.user.importModalDragtext': '拖拽或点击此区域选择文件',
'system.user.importModalFileTip': '只支持 xls/xlsx格式文件文件大小不超过 50M',
'system.user.importModalCancel': '取消',
'system.user.importModalConfirm': '导入',
'system.user.importModalUploading': '文件上传中...',
};

View File

@ -1,21 +1,559 @@
<template>
<div>
<a-button @click="open">Modal</a-button>
<div class="p-6">
<div class="mb-4 flex items-center justify-between">
<div>
<a-button class="mr-3" type="primary" @click="showUserModal('batch')">{{
t('system.user.createUser')
}}</a-button>
<a-button class="mr-3" type="outline" @click="showEmailInviteModal">{{
t('system.user.emailInvite')
}}</a-button>
<a-button class="mr-3" type="outline" @click="showImportModal">{{ t('system.user.importUser') }}</a-button>
</div>
<div>
<a-input-search
:placeholder="t('system.user.searchUser')"
class="w-[230px]"
@search="searchUser"
></a-input-search>
</div>
</div>
<ms-base-table v-bind="propsRes" v-on="propsEvent">
<template #action="{ record }">
<MsButton @click="showUserModal('edit')">{{ t('system.user.editUser') }}</MsButton>
<MsTableMoreAction :list="tableActions" @select="handleSelect($event, record)"></MsTableMoreAction>
</template>
</ms-base-table>
<a-modal
v-model:visible="visible"
:title="userFormMode === 'create' ? t('system.user.createUserModalTitle') : t('system.user.editUserModalTitle')"
title-align="start"
class="ms-modal-form ms-modal-medium"
:loading="loading"
>
<a-form ref="userFormRef" class="rounded-[4px]" :model="userForm" layout="vertical">
<div class="mb-[16px] overflow-y-auto rounded-[4px] bg-[var(--color-fill-1)] p-[12px]">
<a-scrollbar class="max-h-[30vh] overflow-y-auto">
<div class="flex flex-wrap items-start justify-between gap-[8px]">
<template v-for="(item, i) of userForm.list" :key="`user-item-${item}`">
<div class="flex w-full items-start justify-between gap-[8px]">
<a-form-item
:field="`username${item}`"
:class="i > 0 ? 'hidden-item' : 'mb-0 flex-1'"
:rules="[
{ required: true, message: t('system.user.createUserNameNotNull') },
{ validator: checkUerName },
]"
:label="i === 0 ? t('system.user.createUserName') : ''"
>
<a-input
v-model="userForm[`username${item}`]"
class="mb-[4px] flex-1"
:placeholder="t('system.user.createUserNamePlaceholder')"
allow-clear
/>
</a-form-item>
<a-form-item
:field="`email${item}`"
:class="i > 0 ? 'hidden-item' : 'mb-0 flex-1'"
:rules="[
{ required: true, message: t('system.user.createUserEmailNotNull') },
{ validator: (value, callback) => checkUerEmail(value, callback, i) },
]"
:label="i === 0 ? t('system.user.createUserEmail') : ''"
>
<a-input
v-model="userForm[`email${item}`]"
class="mb-[4px] flex-1"
:placeholder="t('system.user.createUserEmailPlaceholder')"
allow-clear
/>
</a-form-item>
<a-form-item
:field="`phone${item}`"
:class="i > 0 ? 'hidden-item' : 'mb-0 flex-1'"
:rules="[{ validator: checkUerPhone }]"
:label="i === 0 ? t('system.user.createUserPhone') : ''"
>
<a-input
v-model="userForm[`phone${item}`]"
class="mb-[4px] flex-1"
:placeholder="t('system.user.createUserPhonePlaceholder')"
:max-length="11"
allow-clear
/>
</a-form-item>
<div
v-show="userForm.list.length > 1"
:class="[
'flex',
'h-full',
'w-[32px]',
'cursor-pointer',
'items-center',
'justify-center',
i === 0 ? 'mt-[6%]' : 'mt-[5px]',
]"
@click="removeUserField(item, i)"
>
<icon-minus-circle />
</div>
</div>
</template>
</div>
</a-scrollbar>
<div class="w-full">
<a-button class="px-0" type="text" @click="addUserField">
<template #icon>
<icon-plus class="text-[14px]" />
</template>
{{ t('system.user.addUser') }}
</a-button>
</div>
</div>
<a-form-item class="mb-0" field="userGroup" :label="t('system.user.createUserUserGroup')">
<a-select
v-model="userForm.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="cancelCreate">{{ t('system.user.editUserModalCancelCreate') }}</a-button>
<a-button v-if="userFormMode === 'batch'" type="secondary" @click="saveAndContinue">{{
t('system.user.editUserModalSaveAndContinue')
}}</a-button>
<a-button type="primary" @click="beforeCreateUser">{{
t(userFormMode === 'create' ? 'system.user.editUserModalCreateUser' : 'system.user.editUserModalEditUser')
}}</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')"
title-align="start"
class="ms-modal-upload"
:loading="importLoading"
>
<a-alert class="mb-[16px]" closable>
{{ 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>
</a-modal>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { Message } from '@arco-design/web-vue';
import useModal from '@/hooks/useModal';
import { useI18n } from '@/hooks/useI18n';
import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
import useTable from '@/components/pure/ms-table/useTable';
import MsButton from '@/components/pure/ms-button/index.vue';
import MsTableMoreAction from '@/components/pure/ms-table-more-action/index.vue';
import { getTableList } from '@/api/modules/api-test/index';
import { validateEmail, validatePhone } from '@/utils/validate';
import { cloneDeep } from 'lodash-es';
import type { FormInstance, ValidatedError } from '@arco-design/web-vue';
import type { MsTableColumn } from '@/components/pure/ms-table/type';
import type { ActionsItem } from '@/components/pure/ms-table-more-action/types';
const columns: MsTableColumn = [
{
title: '邮箱',
dataIndex: 'email',
width: 200,
},
{
title: '姓名',
dataIndex: 'name',
},
{
title: '手机',
dataIndex: 'phone',
},
{
title: '组织',
dataIndex: 'organization',
},
{
title: '用户组',
dataIndex: 'userGroup',
},
{
title: '状态',
dataIndex: 'status',
},
{
title: '操作',
slotName: 'action',
fixed: 'right',
width: 80,
},
];
const { t } = useI18n();
const tableActions: ActionsItem[] = [
{
label: 'system.user.resetPassword',
eventTag: 'resetPassword',
},
{
label: 'system.user.disable',
eventTag: 'disabled',
},
{
isDivider: true,
},
{
label: 'system.user.delete',
eventTag: 'delete',
danger: true,
},
];
const { openModal } = useModal();
function open() {
function resetPassword(record: any) {
openModal({
mode: 'weak',
type: 'info',
content: '这是一个弱提示',
type: 'warning',
title: `${t('system.user.resetPswStart')} '${record.name}' ${t('system.user.resetPswEnd')}`,
content: t('system.user.resetPswContent'),
okText: t('system.user.resetPswConfirm'),
cancelText: t('system.user.resetPswCancel'),
onBeforeOk: async () => {
try {
Message.success(t('system.user.resetPswSuccess'));
return true;
} catch (error) {
console.log(error);
return false;
}
},
hideCancel: false,
});
}
function disabledUser(record: any) {
openModal({
type: 'warning',
title: `${t('system.user.disableUserStart')} '${record.name}' ${t('system.user.disableUserEnd')}`,
content: t('system.user.disableUserContent'),
okText: t('system.user.disableUserConfirm'),
cancelText: t('system.user.disableUserCancel'),
onBeforeOk: async () => {
try {
Message.success(t('system.user.disableUserSuccess'));
return true;
} catch (error) {
console.log(error);
return false;
}
},
hideCancel: false,
});
}
function deleteUser(record: any) {
openModal({
type: 'warning',
title: `${t('system.user.deleteUserStart')} '${record.name}' ${t('system.user.deleteUserEnd')}`,
content: t('system.user.deleteUserContent'),
okText: t('system.user.deleteUserConfirm'),
cancelText: t('system.user.deleteUserCancel'),
okButtonProps: {
status: 'danger',
},
onBeforeOk: async () => {
try {
Message.success(t('system.user.deleteUserSuccess'));
return true;
} catch (error) {
console.log(error);
return false;
}
},
hideCancel: false,
});
}
function handleSelect(item: ActionsItem, record: any) {
switch (item.eventTag) {
case 'resetPassword':
resetPassword(record);
break;
case 'disabled':
disabledUser(record);
break;
case 'delete':
deleteUser(record);
break;
default:
break;
}
}
const { propsRes, propsEvent, loadList } = useTable(getTableList, {
columns,
selectable: true,
});
onMounted(async () => {
await loadList();
});
type UserModalMode = 'create' | 'edit' | 'batch';
const visible = ref(false);
const loading = ref(false);
const userFormMode = ref<UserModalMode>('create');
const userFormRef = ref<FormInstance | null>(null);
const defaulUserForm = {
email0: '',
phone0: '',
username0: '',
list: [0],
userGroup: [],
};
interface UserForm {
list: number[];
userGroup: string[];
[key: string]: any;
}
const userForm = ref<UserForm>(cloneDeep(defaulUserForm));
const userGroupOptions = ref([
{
label: 'Beijing',
value: 'Beijing',
},
{
label: 'Shanghai',
value: 'Shanghai',
},
{
label: 'Guangzhou',
value: 'Guangzhou',
},
]);
function userFormValidate(cb: () => Promise<any>) {
userFormRef.value?.validate(async (errors: undefined | Record<string, ValidatedError>) => {
if (errors) {
return;
}
try {
loading.value = true;
await cb();
} catch (error) {
console.log(error);
} finally {
loading.value = false;
}
});
}
function addUserField() {
userFormValidate(async () => {
const lastIndex = userForm.value.list.length - 1;
const lastOrder = userForm.value.list[lastIndex] + 1;
userForm.value.list.push(lastOrder); //
userForm.value[`username${lastOrder}`] = '';
userForm.value[`email${lastOrder}`] = '';
userForm.value[`phone${lastOrder}`] = '';
});
}
function removeUserField(index: number, i: number) {
delete userForm.value[`username${index}`];
delete userForm.value[`email${index}`];
delete userForm.value[`phone${index}`];
userForm.value.list.splice(i, 1);
}
function checkUerName(value: string | undefined, callback: (error?: string) => void) {
if (value === '' || value === undefined) {
callback(t('system.user.createUserNameNotNull'));
} else if (value.length > 50) {
callback(t('system.user.createUserNameOverLength'));
}
}
function checkUerEmail(value: string | undefined, callback: (error?: string) => void, index: number) {
if (value === '' || value === undefined) {
callback(t('system.user.createUserEmailNotNull'));
} else if (!validateEmail(value)) {
callback(t('system.user.createUserEmailErr'));
} else {
const hasEmails: string[] = userForm.value.list.map((item: any, i: number) => {
if (i !== index) {
return userForm.value[`email${item}`];
}
return null;
});
if (hasEmails.includes(value)) {
callback(t('createUserEmailNoRepeat'));
}
}
}
function checkUerPhone(value: string | undefined, callback: (error?: string) => void) {
if (value !== '' && value !== undefined && !validatePhone(value)) {
callback(t('system.user.createUserPhoneErr'));
}
}
function cancelCreate() {
visible.value = false;
userFormRef.value?.resetFields();
userForm.value = cloneDeep(defaulUserForm);
}
async function updateUser() {
console.log('updateUser');
}
async function createUser() {
console.log('createUser');
}
function beforeCreateUser() {
if (userFormMode.value === 'create') {
userFormValidate(createUser);
} else {
userFormValidate(updateUser);
}
}
function saveAndContinue() {
userFormValidate(async () => {
await createUser();
userFormRef.value?.resetFields();
userForm.value = cloneDeep(defaulUserForm);
});
}
function showUserModal(mode: UserModalMode) {
visible.value = true;
userFormMode.value = mode;
}
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);
function showImportModal() {
importVisible.value = true;
}
function importUser() {}
async function searchUser() {}
</script>
<style lang="less" scoped></style>
<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>