feat(系统设置): 授权管理页面搭建和联调

frontend/src/api/modules/setting/authorizedManagement.ts

@@ -0,0 +1,11 @@
+import MSR from '@/api/http/index';
+import { getLicenseUrl, addLicenseUrl } from '@/api/requrls/setting/authorizedManagement';
+import type { LicenseInfo } from '@/models/setting/authorizedManagement';
+// 获取当前信息
+export function getLicenseInfo() {
+  return MSR.get<LicenseInfo>({ url: getLicenseUrl });
+}
+// 添加License
+export function addLicense(data: string) {
+  return MSR.post({ url: addLicenseUrl, data });
+}

frontend/src/api/requrls/setting/authorizedManagement.ts

@@ -0,0 +1,2 @@
+export const getLicenseUrl = '/license/validate';
+export const addLicenseUrl = '/license/add';

frontend/src/assets/style/arco-reset.less

@@ -249,6 +249,14 @@
     }
   }
 }
+.arco-form-item-status-success .arco-input-wrapper:not(.arco-input-disabled).arco-input-focus {
+  border: 1px solid rgb(var(--primary-5)) !important;
+  background: none;
+  box-shadow: none;
+}
+.arco-form-item-status-success .arco-input-wrapper:not(.arco-input-disabled) {
+  border-color: var(--color-text-input-border);
+}
 
 /** form-item **/
 .arco-form-item-content-flex {

frontend/src/assets/svg/authorized_logo.svg

@@ -0,0 +1,24 @@
+<svg width="380" height="79" viewBox="0 0 380 79" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M122.912 61.3678L120.599 38.2253L114.097 61.3678H106.525L100.174 38.2253L97.7774 61.3678L87.3114 61.2794L92.4191 27.1197H105.753L110.324 43.3743L114.94 27.1197H127.961L133.157 61.3708H122.912V61.3678Z" fill="white"/>
+<path d="M158.475 47.032V51.3587H144.702L144.675 52.1456C144.675 53.7961 145.333 54.7481 146.344 55.1047C147.131 55.3287 148.024 55.4378 149.02 55.4378H149.621C152.297 55.4378 156.208 54.8336 159.017 54.2559H159.061L157.93 60.3657C157.93 60.4394 156.615 60.9994 154.06 61.415C152.453 61.5948 150.611 61.6832 148.531 61.6832C143.178 61.6832 139.724 59.8765 138.162 56.266C137.581 54.8395 137.048 53.3511 137.048 51.7919V45.9503C137.048 41.6678 139.093 38.8148 142.689 37.403C144.28 36.8843 145.981 36.622 147.797 36.622C152.837 36.622 156.105 38.2636 157.608 41.5499C158.186 42.8379 158.475 44.6682 158.475 47.032ZM151.26 45.8943C151.26 44.1996 150.753 43.0678 150.025 42.7554C149.474 42.384 148.625 42.328 147.838 42.328C145.831 42.328 144.829 43.2712 144.829 45.1604L144.705 46.2981H151.263V45.8943H151.26Z" fill="white"/>
+<path d="M204.89 47.032V51.3587H191.117L191.09 52.1456C191.09 53.7961 191.748 54.7481 192.758 55.1047C193.545 55.3287 194.438 55.4378 195.435 55.4378H196.036C198.712 55.4378 202.623 54.8336 205.432 54.2559H205.476L204.344 60.3657C204.344 60.4394 203.03 60.9994 200.475 61.415C198.868 61.5948 197.026 61.6832 194.945 61.6832C189.593 61.6832 186.139 59.8765 184.577 56.266C183.996 54.8395 183.463 53.3511 183.463 51.7919V45.9503C183.463 41.6678 185.508 38.8148 189.104 37.403C190.695 36.8843 192.396 36.622 194.211 36.622C199.251 36.622 202.52 38.2636 204.023 41.5499C204.601 42.8379 204.89 44.6682 204.89 47.032ZM197.675 45.8943C197.675 44.1996 197.168 43.0678 196.44 42.7554C195.889 42.384 195.04 42.328 194.253 42.328C192.246 42.328 191.244 43.2712 191.244 45.1604L191.12 46.2981H197.678V45.8943H197.675Z" fill="white"/>
+<path d="M332.996 47.032V51.3587H319.223L319.197 52.1456C319.197 53.7961 319.854 54.7481 320.865 55.1047C321.652 55.3287 322.545 55.4378 323.541 55.4378H324.142C326.818 55.4378 330.729 54.8336 333.538 54.2559H333.582L332.451 60.3657C332.451 60.4394 331.136 60.9994 328.581 61.415C326.975 61.5948 325.132 61.6832 323.052 61.6832C317.699 61.6832 314.245 59.8765 312.683 56.266C312.102 54.8395 311.569 53.3511 311.569 51.7919V45.9503C311.569 41.6678 313.611 38.8148 317.21 37.403C318.802 36.8843 320.502 36.622 322.318 36.622C327.358 36.622 330.626 38.2636 332.129 41.5499C332.707 42.8379 332.996 44.6682 332.996 47.032ZM325.781 45.8943C325.781 44.1996 325.274 43.0678 324.546 42.7554C323.995 42.384 323.146 42.328 322.359 42.328C320.352 42.328 319.35 43.2712 319.35 45.1604L319.226 46.2981H325.784V45.8943H325.781Z" fill="white"/>
+<path d="M379.413 47.032V51.3587H365.64L365.614 52.1456C365.614 53.7961 366.271 54.7481 367.282 55.1047C368.069 55.3287 368.962 55.4378 369.958 55.4378H370.559C373.236 55.4378 377.147 54.8336 379.956 54.2559H380L378.868 60.3657C378.868 60.4394 377.554 60.9994 374.998 61.415C373.392 61.5948 371.55 61.6832 369.469 61.6832C364.117 61.6832 360.662 59.8765 359.1 56.266C358.52 54.8395 357.986 53.3511 357.986 51.7919V45.9503C357.986 41.6678 360.032 38.8148 363.627 37.403C365.219 36.8843 366.92 36.622 368.735 36.622C373.775 36.622 377.044 38.2636 378.547 41.5499C379.121 42.8379 379.413 44.6682 379.413 47.032ZM372.198 45.8943C372.198 44.1996 371.691 43.0678 370.963 42.7554C370.412 42.384 369.563 42.328 368.776 42.328C366.769 42.328 365.767 43.2712 365.767 45.1604L365.643 46.2981H372.201V45.8943H372.198Z" fill="white"/>
+<path d="M180.465 61.4592H176.032C175.26 61.4592 174.597 61.4356 174.049 61.3914C172.578 61.2883 171.373 61.0112 170.435 60.5662C169.292 60.0179 168.422 59.175 167.827 58.0462C167.158 56.767 166.825 55.0576 166.825 52.9178L166.781 43.2859H163.123V37.0199H166.781V32.1685L170.441 32.0654L174.273 31.582V37.0199H179.982L179.201 43.2859H174.273V52.4963C174.273 52.7056 174.279 52.8824 174.296 53.0328C174.326 53.4189 174.385 53.7401 174.476 53.9906C174.7 54.6007 175.175 55.0252 175.903 55.2609C176.468 55.4997 179.849 55.4525 179.849 55.4525L180.465 61.4592Z" fill="white"/>
+<path d="M226.827 37.0611L226.718 42.8792C226.075 42.8467 224.251 42.8526 222.347 43.2888C220.643 43.6779 218.875 44.4737 217.864 44.845V61.3678H210.416V36.8401H217.248C217.248 36.8401 217.083 38.1192 217.215 38.6232L218.954 37.9777C219.995 37.6211 221.118 37.3735 222.512 37.1967C224.619 36.9285 225.886 37.0434 226.827 37.0611Z" fill="white"/>
+<path d="M355.502 37.0611L355.393 42.8792C354.75 42.8467 352.926 42.8526 351.022 43.2888C349.318 43.6779 347.55 44.4737 346.539 44.845V61.3678H339.091V36.8401H345.923C345.923 36.8401 345.758 38.1192 345.89 38.6232L347.629 37.9777C348.67 37.6211 349.793 37.3735 351.187 37.1967C353.291 36.9285 354.562 37.0434 355.502 37.0611Z" fill="white"/>
+<path d="M241.339 62.4053C239.586 62.4053 237.661 62.2933 235.566 62.0722C234.764 61.9838 233.939 61.8777 233.09 61.7598L229.809 61.4474L229.88 53.0062L235.023 53.8108C235.023 53.8108 237.045 54.0997 237.968 54.1911C239.067 54.2942 240.063 54.3473 240.956 54.3473C244.195 54.3473 246.07 53.6104 246.577 52.1397C246.86 51.5296 246.845 50.9342 246.533 50.3566C246.22 49.717 245.56 49.1688 244.549 48.7061C244.119 48.5145 243.576 48.3111 242.922 48.1048L241.003 47.5242C240.155 47.3149 239.397 47.1086 238.728 46.8993C237.864 46.6311 237.078 46.3482 236.364 46.0505C234.596 45.3078 233.219 44.4442 232.238 43.4627C231.301 42.4665 230.699 41.2493 230.431 39.8051C230.237 38.7794 230.216 37.6123 230.363 36.3036C230.764 32.5281 232.377 29.9344 235.203 28.5227C236.258 27.9568 237.528 27.55 239.017 27.2966C239.598 27.2082 240.258 27.1345 241 27.0726L242.919 26.9399H244.213C245.684 26.9399 247.305 27.0284 249.073 27.2082L251.237 27.4528L253.751 27.7858L253.801 35.1925C252.834 34.9538 251.617 34.7386 250.143 34.547C248.254 34.2788 246.544 34.1462 245.015 34.1462C241.625 34.1462 240.455 34.8653 239.86 36.398C239.636 37.0375 239.621 37.6801 239.686 38.3078C239.766 39.0535 239.718 39.251 241.224 40.032C241.684 40.2413 242.265 40.4623 242.963 40.7011L247.378 42.0156C248.227 42.2838 248.985 42.5579 249.654 42.8408C251.275 43.5246 252.501 44.3116 253.332 45.2046C254.314 46.1861 254.944 47.4122 255.227 48.8829C255.419 49.938 255.442 51.0846 255.295 52.3165C254.894 56.0626 253.023 59.4255 250.196 60.8668C249.156 61.4327 247.885 61.8335 246.382 62.0722C245.802 62.1607 245.141 62.2343 244.399 62.2962L242.68 62.4082H241.339V62.4053Z" fill="white"/>
+<path d="M260.138 36.9314H266.919L266.716 38.5377C267.4 38.1811 268.069 37.8775 268.723 37.6241C269.525 37.3116 270.321 37.0817 271.111 36.9314C273.044 36.5306 274.91 36.6131 276.708 37.1761C277.866 37.5474 278.862 38.2017 279.696 39.139C280.009 39.4809 280.292 39.867 280.542 40.2973L280.831 40.8101C280.905 40.9575 280.978 41.1137 281.055 41.2788C281.367 42.1246 281.692 43.0825 281.827 44.1082C281.989 45.2665 282.145 46.7402 282.145 48.6117V49.9999C282.145 53.6428 281.927 55.6087 281.226 56.9527C280.259 59.2281 277.937 60.3834 273.448 60.5249C272.844 60.5426 271.886 60.5278 270.89 60.4984L269.224 60.4541C268.608 60.4571 268.172 60.4247 267.68 60.4394V71.0027L260.144 71.4978V36.9314H260.138ZM267.674 54.1527C269.106 54.4209 269.926 54.4003 271.14 54.3296L272.396 54.1675C273.793 53.8551 274.388 52.909 274.388 51.4058V46.7166C274.388 46.0328 274.329 45.5288 274.208 45.2017C273.763 43.6867 272.528 43.0914 270.506 43.4185L269.681 43.5512L268.255 43.952L267.674 44.1524V54.1527Z" fill="white"/>
+<path d="M308.268 48.0871V61.415H300.687V46.9288C300.687 46.0181 300.156 44.6977 299.095 44.0758C298.338 43.6307 297.062 43.7074 296.643 43.7751C295.635 43.9372 294.503 44.5473 293.976 45.0337V61.415H286.44V26.1825L293.976 26.1353V38.5878C294.898 38.2754 295.886 37.8864 296.941 37.7243C297.801 37.5916 298.712 37.4413 299.44 37.4413C303.767 37.4413 306.066 38.6645 307.121 40.9251C307.699 41.771 308.268 44.2526 308.268 48.0871Z" fill="white"/>
+<g clip-path="url(#clip0_919_204192)">
+<path d="M34.1474 1.04792L67.3453 20.2158V58.5481L34.1474 77.716L0.949576 58.5481V20.2158L34.1474 1.04792ZM34.1474 0L0.0406961 19.6901V59.0704L34.1474 78.7605L68.2541 59.0704V19.6901L34.1474 0Z" fill="white"/>
+<path d="M5.39223 22.1522L34.144 5.55162L62.8992 22.1522L34.144 38.7528L5.39223 22.1522Z" fill="white"/>
+<path d="M4.84962 23.095V56.2963L33.6014 72.8969V39.6956L4.84962 23.095ZM24.5737 60.7457L24.5567 49.049L20.3582 58.27L16.7363 56.147L14.7896 43.3176L12.5547 53.6917L7.55252 50.7141L11.6052 35.8431L17.9809 39.5837L19.4019 48.6251L22.3761 42.1612L28.6026 45.8136L29.4741 63.6182L24.5737 60.7457Z" fill="white"/>
+<path d="M34.69 39.6956V72.8969L63.4418 56.2963V23.095L34.69 39.6956ZM57.351 50.982C57.1848 53.2101 56.164 55.5603 54.5599 57.039C53.9698 57.6019 53.2441 58.1276 52.3827 58.6092C52.0503 58.7957 51.6705 58.989 51.2432 59.1959L50.2563 59.6571L49.4865 59.9691C48.4758 60.376 47.3635 60.7593 46.1528 61.1188C45.6882 61.2544 45.21 61.3867 44.7216 61.5155L42.8259 62.0989L42.7207 57.273L45.6983 56.5371C45.6983 56.5371 46.8683 56.2318 47.4008 56.069C48.035 55.8723 48.6115 55.6723 49.127 55.4654C50.9956 54.7125 52.0639 53.8579 52.3284 52.9015C52.481 52.4878 52.4607 52.152 52.2707 51.8943C52.0808 51.6026 51.6874 51.4433 51.0973 51.4161C50.8464 51.4059 50.5276 51.4195 50.1478 51.45L49.032 51.5653C48.5403 51.6433 48.0994 51.701 47.7094 51.7383C47.2075 51.7858 46.7496 51.8095 46.3325 51.8027C45.3015 51.7892 44.491 51.6162 43.9111 51.2873C43.3549 50.9379 42.9853 50.3818 42.8055 49.6221C42.6766 49.0829 42.6427 48.4216 42.7072 47.6416C42.8733 45.3965 43.7585 43.5448 45.3626 42.0832C45.9628 41.5168 46.6886 40.9877 47.5398 40.4994C47.8722 40.3129 48.252 40.1196 48.6793 39.9127L49.7815 39.3904L50.5276 39.0886C51.3754 38.7461 52.3114 38.4205 53.3356 38.1119L54.587 37.749L56.0419 37.3556L56.1979 41.5643C55.635 41.6525 54.9296 41.8118 54.0783 42.0458C52.9863 42.3307 51.996 42.6529 51.1143 43.009C49.1609 43.7958 48.4962 44.4774 48.1808 45.4881C48.0621 45.9052 48.0655 46.2749 48.113 46.6174C48.1706 47.0243 48.1469 47.1464 49.0286 47.2448C49.2965 47.2549 49.6357 47.2482 50.0426 47.221L52.6099 46.9463C53.1016 46.9022 53.5459 46.8819 53.9359 46.8887C54.8821 46.9022 55.601 47.065 56.0962 47.3804C56.6795 47.7128 57.0627 48.2656 57.2526 49.0354C57.3815 49.5984 57.4154 50.2427 57.351 50.982Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_919_204192">
+<rect width="68.2779" height="78.9029" fill="white"/>
+</clipPath>
+</defs>
+</svg>

frontend/src/components/pure/ms-upload/index.vue

@@ -18,7 +18,7 @@
             <div class="ms-upload-main-text">
               {{ t(props.mainText || 'ms.upload.importModalDragtext') }}
             </div>
-            <div class="ms-upload-sub-text">
+            <div v-if="showSubText" class="ms-upload-sub-text">
               {{
                 t(props.subText || 'ms.upload.importModalFileTip', {
                   type: UploadAcceptEnum[props.accept],
@@ -55,6 +55,7 @@
   type UploadProps = Partial<{
     mainText: string; // 主要文案
     subText: string; // 次要文案
+    showSubText: boolean; // 是否显示次要文案
     class: string;
     multiple: boolean;
     imagePreview: boolean;
@@ -68,7 +69,9 @@
     fileList: FileItem[];
   };
 
-  const props = defineProps<UploadProps>();
+  const props = withDefaults(defineProps<UploadProps>(), {
+    showSubText: true,
+  });
   const emit = defineEmits(['update:fileList']);
 
   const defaultMaxSize = 50;
@@ -101,6 +104,7 @@
     xmind: 'icon-icon_file-xmind_colorful1',
     image: 'icon-icon_file-image_colorful1',
     jar: 'icon-icon_file-jar_colorful',
+    none: 'icon-icon_file-text_colorful1',
   };
 
   async function beforeUpload(file: File) {

frontend/src/enums/uploadEnum.ts

@@ -10,6 +10,7 @@ export enum UploadAcceptEnum {
   xmind = '.xmind',
   image = '.jpg,.jpeg,.png,.svg',
   jar = '.jar',
+  none = 'none',
 }
 
 export default UploadAcceptEnum;

frontend/src/locale/en-US/index.ts

@@ -32,6 +32,7 @@ export default {
     'menu.settings.organization.member': 'Member',
     'menu.settings.organization.serviceIntegration': 'Service Integration',
     'menu.settings.system.usergroup': 'User Group',
+    'menu.settings.system.authorizedManagement': 'Authorized Management',
     'menu.settings.system.pluginmanger': 'Plugin Manger',
     'menu.settings.system.user': 'User',
     'menu.settings.system.organizationAndProject': 'Org & Project',

frontend/src/locale/zh-CN/index.ts

@@ -32,6 +32,7 @@ export default {
     'menu.settings.organization.serviceIntegration': '服务集成',
     'menu.settings.system.user': '用户',
     'menu.settings.system.usergroup': '用户组',
+    'menu.settings.system.authorizedManagement': '授权管理',
     'menu.settings.system.pluginmanger': '插件管理',
     'menu.settings.system.organizationAndProject': '组织与项目',
     'menu.settings.system.resourcePool': '资源池',

frontend/src/models/setting/authorizedManagement.ts

@@ -0,0 +1,13 @@
+export interface License {
+  corporation: string; // 客户名称
+  expired: string; // 授权时间
+  product: string; // 产品名称
+  edition: string; // 版本
+  licenseVersion: string; // 授权版本
+  count: number; // 授权数量
+}
+
+export interface LicenseInfo {
+  status?: string;
+  license?: License;
+}

frontend/src/models/setting/serviceIntegration.ts

@@ -0,0 +1,23 @@
+export interface ServiceItem {
+  id?: string;
+  pluginId: string; // 插件id
+  title: string;
+  description: string;
+  enable: boolean;
+  config: boolean;
+  logo: string;
+  organizationId: string; // 组织id
+  configuration?: null; // 配置项
+}
+
+export type ServiceList = ServiceItem[];
+
+// 创建和更新服务
+
+export interface AddOrUpdateServiceModel {
+  id?: string;
+  pluginId: string;
+  enable: boolean;
+  organizationId: string;
+  configuration: any;
+}

frontend/src/router/routes/modules/setting.ts

@@ -89,6 +89,16 @@ const Setting: AppRouteRecordRaw = {
             ],
           },
         },
+        {
+          path: 'authorizedmanagement',
+          name: 'settingSystemAuthorizedManagement',
+          component: () => import('@/views/setting/system/authorizedManagement/index.vue'),
+          meta: {
+            locale: 'menu.settings.system.authorizedManagement',
+            roles: ['*'],
+            isTopMenu: true,
+          },
+        },
         {
           path: 'pluginmanger',
           name: 'settingSystemPluginManger',

frontend/src/views/setting/system/authorizedManagement/index.vue

@@ -0,0 +1,234 @@
+<template>
+  <MsCard :loading="loading" simple>
+    <div class="wrapper">
+      <div class="content-wrapper">
+        <div class="authorized_logo">
+          <div>
+            <svg-icon width="380px" height="78px" name="authorized_logo" />
+          </div>
+        </div>
+        <div class="ms-info-wrapper">
+          <ul class="info">
+            <li>
+              <span>{{ t('system.authorized.customerName') }}</span>
+              <div>
+                <span>{{ licenseInfo.license?.corporation }}</span>
+              </div>
+            </li>
+            <li>
+              <span>{{ t('system.authorized.authorizationTime') }}</span>
+              <div
+                ><span>{{ licenseInfo.license?.expired }}</span></div
+              >
+            </li>
+            <li>
+              <span>{{ t('system.authorized.productName') }}</span>
+              <div
+                ><span>{{ licenseInfo.license?.product }}</span></div
+              >
+            </li>
+            <li>
+              <span>{{ t('system.authorized.productionVersion') }}</span>
+              <div
+                ><span>{{ licenseInfo.license?.edition }}</span></div
+              >
+            </li>
+            <li>
+              <span>{{ t('system.authorized.authorizedVersion') }}</span>
+              <div>
+                <span>{{ licenseInfo.license?.licenseVersion }}</span></div
+              >
+            </li>
+            <li>
+              <span>{{ t('system.authorized.authorizationsCount') }}</span>
+              <div
+                ><span>{{ licenseInfo.license?.count }}</span></div
+              >
+            </li>
+            <li>
+              <span>{{ t('system.authorized.authorizationStatus') }}</span>
+              <div
+                ><span>{{
+                  licenseInfo.status === 'valid'
+                    ? t('system.authorized.valid')
+                    : licenseInfo.status === 'expired'
+                    ? t('system.authorized.invalid')
+                    : t('system.authorized.failure')
+                }}</span></div
+              >
+            </li>
+            <li>
+              <a class="text-[rgb(var(--primary-5))]" href="javascript:;" @click="authChecking">{{
+                t('system.authorized.authorityChecking')
+              }}</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <MsDrawer
+      v-model:visible="authDrawer"
+      :title="t('system.authorized.authorityChecking')"
+      :ok-text="t('system.authorized.authorization')"
+      :ok-loading="drawerLoading"
+      :width="480"
+      @confirm="confirmHanlder"
+      @cancel="cancelHanlder"
+    >
+      <a-form ref="authFormRef" :model="authorizedForm" layout="vertical">
+        <a-row class="grid-demo">
+          <a-form-item
+            :label="t('system.authorized.license')"
+            field="licenseCode"
+            asterisk-position="end"
+            required
+            :validate-trigger="['input']"
+          >
+            <MsUpload
+              v-model:file-list="fileList"
+              accept="none"
+              :show-sub-text="false"
+              :show-file-list="false"
+              :auto-upload="false"
+            />
+            <a-textarea
+              v-model="authorizedForm.licenseCode"
+              class="mt-4"
+              :placeholder="t('system.authorized.licenseCode')"
+              :rules="[{ required: true }]"
+            ></a-textarea>
+          </a-form-item>
+        </a-row>
+      </a-form>
+    </MsDrawer>
+  </MsCard>
+</template>
+
+<script setup lang="ts">
+  import { ref, onBeforeMount, watch, reactive } from 'vue';
+  import MsCard from '@/components/pure/ms-card/index.vue';
+  import { getLicenseInfo, addLicense } from '@/api/modules/setting/authorizedManagement';
+  import type { LicenseInfo } from '@/models/setting/authorizedManagement';
+  import MsDrawer from '@/components/pure/ms-drawer/index.vue';
+  import MsUpload from '@/components/pure/ms-upload/index.vue';
+  import { FormInstance, Message, ValidatedError } from '@arco-design/web-vue';
+  import { useI18n } from '@/hooks/useI18n';
+
+  const { t } = useI18n();
+
+  const loading = ref<boolean>(false);
+  const licenseInfo = ref<LicenseInfo>({});
+  const authorizedForm = reactive<any>({
+    licenseCode: '',
+  });
+
+  // 获取License信息
+  const getLicenseDetail = async () => {
+    loading.value = true;
+    try {
+      const result = await getLicenseInfo();
+      licenseInfo.value = result;
+    } catch (error) {
+      console.log(error);
+    } finally {
+      loading.value = false;
+    }
+  };
+  const authDrawer = ref<boolean>(false);
+  const drawerLoading = ref<boolean>(false);
+  const authFormRef = ref<FormInstance | null>(null);
+  const fileList = ref([]);
+
+  const confirmHanlder = () => {
+    authFormRef.value?.validate(async (errors: undefined | Record<string, ValidatedError>) => {
+      if (!errors) {
+        drawerLoading.value = true;
+        try {
+          await addLicense(authorizedForm.licenseCode);
+          authDrawer.value = false;
+          Message.success(t('system.authorized.licenseSuccessTip'));
+        } catch (error) {
+          console.log(error);
+        } finally {
+          drawerLoading.value = false;
+        }
+      } else {
+        return false;
+      }
+    });
+  };
+
+  const cancelHanlder = () => {
+    authDrawer.value = false;
+    fileList.value = [];
+    authFormRef.value?.resetFields();
+  };
+
+  const authChecking = () => {
+    authDrawer.value = true;
+  };
+
+  const handlePreview = () => {
+    const reader = new FileReader();
+    if (typeof FileReader === 'undefined') {
+      Message.warning(t('system.plugin.uploadFileTip'));
+    }
+    reader.readAsText((fileList.value[0] as any)?.file, 'UTF-8');
+    reader.onload = (e) => {
+      authorizedForm.licenseCode = e.target?.result;
+    };
+  };
+
+  watch(
+    () => fileList.value,
+    (val) => {
+      if (val.length) {
+        handlePreview();
+      }
+    }
+  );
+
+  onBeforeMount(() => {
+    getLicenseDetail();
+  });
+</script>
+
+<style scoped lang="less">
+  .wrapper {
+    width: 100%;
+    height: calc(100vh - 138px);
+    @apply flex items-center justify-center;
+  }
+  .content-wrapper {
+    width: 888px;
+    min-height: 400px;
+    box-shadow: 0 0 10px rgb(120 56 135 / 10%);
+    .authorized_logo {
+      width: 888px;
+      height: 181px;
+      background: url('@/assets/images/authorized_bg.png');
+      background-size: cover;
+      @apply flex items-center justify-center;
+    }
+    .ms-info-wrapper {
+      width: 100%;
+      .info {
+        margin: auto;
+        padding: 42px;
+        width: 532px;
+        height: 360px;
+        @apply flex flex-col justify-between;
+        li {
+          @apply flex justify-between;
+          div {
+            width: 100px;
+          }
+        }
+      }
+      @apply flex flex-col justify-between;
+    }
+  }
+  :deep(.ms-upload-area) {
+    width: 446px;
+  }
+</style>

frontend/src/views/setting/system/authorizedManagement/locale/en-US.ts

@@ -0,0 +1,17 @@
+export default {
+  'system.authorized.customerName': 'Customer Name',
+  'system.authorized.authorizationTime': 'Authorization time',
+  'system.authorized.productName': 'Product Name',
+  'system.authorized.productionVersion': 'Production Version',
+  'system.authorized.authorizedVersion': 'The authorized version',
+  'system.authorized.authorizationsCount': 'Number of authorizations',
+  'system.authorized.authorizationStatus': 'Authorization status',
+  'system.authorized.authorityChecking': 'Authority Checking',
+  'system.authorized.valid': 'valid',
+  'system.authorized.invalid': 'invalid',
+  'system.authorized.failure': 'failure',
+  'system.authorized.authorization': 'Accredit',
+  'system.authorized.license': 'License',
+  'system.authorized.licenseCode': 'License Code',
+  'system.authorized.licenseSuccessTip': 'Authorized Successfully！',
+};

frontend/src/views/setting/system/authorizedManagement/locale/zh-CN.ts

@@ -0,0 +1,17 @@
+export default {
+  'system.authorized.customerName': '客户名称',
+  'system.authorized.authorizationTime': '授权时间',
+  'system.authorized.productName': '产品名称',
+  'system.authorized.productionVersion': '产品版本',
+  'system.authorized.authorizedVersion': '授权版本',
+  'system.authorized.authorizationsCount': '授权数量',
+  'system.authorized.authorizationStatus': '授权状态',
+  'system.authorized.authorityChecking': '授权验证',
+  'system.authorized.valid': '有效',
+  'system.authorized.invalid': '无效',
+  'system.authorized.failure': '失败',
+  'system.authorized.authorization': '授权',
+  'system.authorized.license': 'License',
+  'system.authorized.licenseCode': 'License Code',
+  'system.authorized.licenseSuccessTip': '授权成功',
+};

frontend/src/views/setting/system/pluginManager/locale/zh-CN.ts

@@ -60,7 +60,7 @@ export default {
   'system.plugin.disablePluginSuccess': '禁用成功',
   'system.plugin.disablePluginContent': '项目无法与该平台集成且该平台默认模版不可用，谨慎操作！',
   'system.plugin.alertDescribe':
-    'MeterSphereV2.10LTS版本支持DevOps、API导入、请求、项目管理、协议类型的插件，具体支持插件请',
+    'MeterSphereV2.10LTS 版本支持 DevOps、API 导入、请求、项目管理、协议类型的插件，具体支持插件请',
   'system.plugin.viewTable': '查看表格',
   'system.plugin.downAddress': '更多开源插件，请在此下载',
   'system.plugin.goDownload': '去下载',