feat: 调整 License 导入样式 (#4305)

frontend/src/components/system-upgrade/index.vue

@@ -14,6 +14,10 @@
             </el-button>
             <el-divider direction="vertical" />
         </span>
+        <el-button type="primary" link @click="toHalo">
+            {{ isProductPro ? $t('license.pro') : $t('license.community') }}
+            <span class="version">{{ ': ' + version }}</span>
+        </el-button>
         <el-badge is-dot class="item" v-if="version !== 'Waiting' && globalStore.hasNewVersion">
             <el-button type="primary" link @click="onLoadUpgradeInfo">
                 <span>（{{ $t('setting.hasNewVersion') }}）</span>
@@ -77,6 +81,7 @@ import { ElMessageBox } from 'element-plus';
 const globalStore = GlobalStore();
 
 const version = ref<string>('');
+const isProductPro = ref();
 const loading = ref(false);
 const drawerVisible = ref(false);
 const upgradeInfo = ref();
@@ -98,6 +103,10 @@ const handleClose = () => {
     drawerVisible.value = false;
 };
 
+const toHalo = () => {
+    window.open('https://halo.test.lxware.cn/', '_blank', 'noopener,noreferrer');
+};
+
 const toDoc = () => {
     window.open('https://1panel.cn/docs/', '_blank', 'noopener,noreferrer');
 };
@@ -149,6 +158,7 @@ const onUpgrade = async () => {
 };
 
 onMounted(() => {
+    isProductPro.value = globalStore.isProductPro;
     search();
 });
 </script>

frontend/src/lang/modules/en.ts

@@ -1462,8 +1462,9 @@ const message = {
         expiresAt: 'Expiration Time',
         productName: 'Product Name',
         productStatus: 'Product Status',
-        lost01: 'Lost * 1',
-        lost02: 'Lost * 2',
+        Lost01: 'Lost * 1',
+        Lost02: 'Lost * 2',
+        Lost03: 'Lost',
         Enable: 'Enabled',
         Disable: 'Disabled',
         lostHelper:

frontend/src/lang/modules/tw.ts

@@ -1362,8 +1362,9 @@ const message = {
         authorizedUser: '被授權方',
         productName: '產品名稱',
         productStatus: '產品狀態',
-        lost01: '失聯 * 1',
-        lost02: '失聯 * 2',
+        Lost01: '失聯 * 1',
+        Lost02: '失聯 * 2',
+        Lost03: '失聯',
         Enable: '已啟用',
         Disable: '未啟用',
         lostHelper: 'License 需要定時同步是否可用，請確保正常外網訪問，失聯三次後將解除 License 綁定',

frontend/src/lang/modules/zh.ts

@@ -1357,20 +1357,23 @@ const message = {
     license: {
         community: '社区版',
         pro: '专业版',
-        trial: '实验版',
+        trial: '试用版',
         office: '正式版',
+        trialInfo: '版本',
         authorizationId: '订阅授权 ID',
         authorizedUser: '被授权方',
         expiresAt: '到期时间',
         productName: '产品名称',
         productStatus: '产品状态',
-        lost01: '失联 * 1',
-        lost02: '失联 * 2',
+        Lost01: '失联 * 1',
+        Lost02: '失联 * 2',
+        Lost03: '已失联',
         Enable: '已激活',
         Disable: '未激活',
         lostHelper: 'License 需要定时同步是否可用，请保证正常外网访问，失联三次后将解除 License 绑定',
         quickUpdate: '快速更新',
         import: '导入',
+        power: '授权',
         importLicense: '导入 License',
         importHelper: '点击或将 License 文件拖拽到此处',
         technicalAdvice: '技术咨询',
@@ -1378,8 +1381,6 @@ const message = {
         indefinitePeriod: '无限期',
         levelUpPro: '升级专业版',
         knowMorePro: '了解更多专业版信息',
-        noLicense: '该部分为 Xpack 功能，请先在 面板设置-许可证 界面导入 License',
-        goImport: '去导入',
         closeAlert: '当前页面可在面板设置中关闭显示',
     },
     clean: {

frontend/src/views/home/index.vue

@@ -10,14 +10,8 @@
         >
             <template #route-button>
                 <div class="router-button">
-                    <span class="version" v-if="show">
-                        {{ $t('license.community') }}
-                    </span>
-                    <span class="version" v-else>{{ $t('license.pro') }}</span>
-
-                    <template v-if="show">
-                        <el-divider direction="vertical" />
-                        <el-button link type="primary" @click="dialogFormVisible = true">
+                    <template v-if="!isProductPro">
+                        <el-button link type="primary" @click="toUpload">
                             {{ $t('license.levelUpPro') }}
                         </el-button>
                     </template>
@@ -25,23 +19,6 @@
             </template>
         </RouterButton>
 
-        <el-dialog v-model="dialogFormVisible" :title="$t('license.levelUpPro')" width="500">
-            <div style="text-align: center; margin-top: 20px">
-                <div style="justify-self: center">
-                    <img style="width: 80px" src="@/assets/images/1panel-logo-light.png" />
-                </div>
-                <h3>{{ $t('setting.description') }}</h3>
-                <el-button type="primary" plain @click="toUpload">
-                    {{ $t('license.importLicense') }}
-                </el-button>
-                <div style="margin-top: 10px">
-                    <el-link @click="toHalo">
-                        <span>{{ $t('license.knowMorePro') }}</span>
-                    </el-link>
-                </div>
-            </div>
-        </el-dialog>
-
         <el-alert
             v-if="!isSafety && globalStore.showEntranceWarn"
             style="margin-top: 20px"
@@ -207,7 +184,7 @@
                                         </span>
                                     </template>
                                     {{
-                                        baseInfo.platformVersion === ''
+                                        baseInfo.platformVersion
                                             ? baseInfo.platform
                                             : baseInfo.platform + '-' + baseInfo.platformVersion
                                     }}
@@ -257,7 +234,7 @@
             </el-col>
         </el-row>
 
-        <Upload ref="uploadRef" @search="search()" />
+        <License ref="licenseRef" />
     </div>
 </template>
 
@@ -273,9 +250,9 @@ import { dateFormatForSecond, computeSize } from '@/utils/util';
 import { useRouter } from 'vue-router';
 import { loadBaseInfo, loadCurrentInfo } from '@/api/modules/dashboard';
 import { getIOOptions, getNetworkOptions } from '@/api/modules/monitor';
-import { getLicense, getSettingInfo, loadUpgradeInfo } from '@/api/modules/setting';
+import { getSettingInfo, loadUpgradeInfo } from '@/api/modules/setting';
 import { GlobalStore } from '@/store';
-import Upload from '@/views/setting/license/upload/index.vue';
+import License from '@/views/home/license/index.vue';
 const router = useRouter();
 const globalStore = GlobalStore();
 
@@ -300,21 +277,8 @@ const timeNetDatas = ref<Array<string>>([]);
 const ioOptions = ref();
 const netOptions = ref();
 
-const dialogFormVisible = ref(false);
-
-const uploadRef = ref();
-const loading = ref();
-const show = ref(null);
-
-const license = reactive({
-    licenseName: '',
-    trial: true,
-    expiresAt: '',
-    assigneeName: '',
-    productName: '',
-
-    status: '',
-});
+const licenseRef = ref();
+const isProductPro = ref();
 
 const searchInfo = reactive({
     ioOption: 'all',
@@ -596,30 +560,12 @@ const onBlur = () => {
     isActive.value = false;
 };
 
-const search = async () => {
-    loading.value = true;
-    await getLicense()
-        .then((res) => {
-            loading.value = false;
-            license.status = res.data.status;
-            show.value = license.status !== 'Enable';
-        })
-        .catch(() => {
-            show.value = true;
-            loading.value = false;
-        });
-};
-
-const toHalo = () => {
-    window.open('https://halo.test.lxware.cn/', '_blank', 'noopener,noreferrer');
-};
-
 const toUpload = () => {
-    uploadRef.value.acceptParams();
+    licenseRef.value.acceptParams();
 };
 
 onMounted(() => {
-    search();
+    isProductPro.value = globalStore.isProductPro;
     window.addEventListener('focus', onFocus);
     window.addEventListener('blur', onBlur);
     loadSafeStatus();

frontend/src/views/home/license/index.vue

@@ -0,0 +1,113 @@
+<template>
+    <div>
+        <el-dialog v-model="open" :close-on-click-modal="false" @close="handleClose">
+            <div style="text-align: center">
+                <span class="text-3xl font-medium">{{ $t('license.levelUpPro') }}</span>
+                <el-row type="flex" justify="center" class="mt-6">
+                    <el-col :span="22">
+                        <el-upload
+                            action="#"
+                            :auto-upload="false"
+                            ref="uploadRef"
+                            class="upload-demo"
+                            drag
+                            :limit="1"
+                            :on-change="fileOnChange"
+                            :on-exceed="handleExceed"
+                            v-model:file-list="uploaderFiles"
+                        >
+                            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+                            <div class="el-upload__text">
+                                {{ $t('license.importHelper') }}
+                            </div>
+                        </el-upload>
+                    </el-col>
+                </el-row>
+                <el-button
+                    type="primary"
+                    class="mt-3 w-52"
+                    :disabled="loading || uploaderFiles.length == 0"
+                    plain
+                    @click="submit"
+                >
+                    {{ $t('license.power') }}
+                </el-button>
+                <div class="mt-3">
+                    <el-link @click="toHalo">
+                        <span>{{ $t('license.knowMorePro') }}</span>
+                    </el-link>
+                </div>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script setup lang="ts">
+import i18n from '@/lang';
+import { ref } from 'vue';
+import { MsgSuccess } from '@/utils/message';
+import { UploadFileData } from '@/api/modules/setting';
+import { GlobalStore } from '@/store';
+import { UploadFile, UploadFiles, UploadInstance, UploadProps, UploadRawFile, genFileId } from 'element-plus';
+const globalStore = GlobalStore();
+
+const loading = ref(false);
+const open = ref(false);
+const uploadRef = ref<UploadInstance>();
+const uploaderFiles = ref<UploadFiles>([]);
+
+const handleClose = () => {
+    open.value = false;
+    uploadRef.value!.clearFiles();
+};
+
+const fileOnChange = (_uploadFile: UploadFile, uploadFiles: UploadFiles) => {
+    uploaderFiles.value = uploadFiles;
+};
+
+const handleExceed: UploadProps['onExceed'] = (files) => {
+    uploadRef.value!.clearFiles();
+    const file = files[0] as UploadRawFile;
+    file.uid = genFileId();
+    uploadRef.value!.handleStart(file);
+};
+
+const toHalo = () => {
+    window.open('https://halo.test.lxware.cn/', '_blank', 'noopener,noreferrer');
+};
+
+const submit = async () => {
+    if (uploaderFiles.value.length !== 1) {
+        return;
+    }
+    const file = uploaderFiles.value[0];
+    const formData = new FormData();
+    formData.append('file', file.raw);
+    loading.value = true;
+    await UploadFileData(formData)
+        .then(async () => {
+            loading.value = false;
+            uploadRef.value!.clearFiles();
+            uploaderFiles.value = [];
+            globalStore.isProductPro = true;
+            open.value = false;
+            MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
+            window.location.reload();
+        })
+        .catch(() => {
+            loading.value = false;
+            uploadRef.value!.clearFiles();
+            uploaderFiles.value = [];
+        });
+};
+
+const acceptParams = () => {
+    uploaderFiles.value = [];
+    uploadRef.value?.clearFiles();
+    open.value = true;
+};
+
+defineExpose({
+    acceptParams,
+});
+</script>

frontend/src/views/setting/license/index.vue

@@ -8,23 +8,33 @@
                             <el-descriptions :column="1" direction="horizontal" size="large" border>
                                 <el-descriptions-item :label="$t('license.authorizationId')">
                                     {{ license.licenseName || '-' }}
-                                    <el-button type="primary" class="ml-3" plain @click="onSync" size="small">
+                                    <el-button
+                                        type="primary"
+                                        class="ml-3"
+                                        plain
+                                        @click="onSync"
+                                        size="small"
+                                        v-if="showSync()"
+                                    >
                                         {{ $t('commons.button.sync') }}
                                     </el-button>
                                 </el-descriptions-item>
                                 <el-descriptions-item :label="$t('license.authorizedUser')">
                                     {{ license.assigneeName || '-' }}
                                 </el-descriptions-item>
-                                <el-descriptions-item :label="$t('license.expiresAt')">
-                                    {{ license.expiresAt || '-' }}
-                                </el-descriptions-item>
                                 <el-descriptions-item :label="$t('license.productName')">
                                     {{ license.productName || '-' }}
                                 </el-descriptions-item>
+                                <el-descriptions-item :label="$t('license.trialInfo')">
+                                    {{ license.trial ? $t('license.trial') : $t('license.office') }}
+                                </el-descriptions-item>
+                                <el-descriptions-item :label="$t('license.expiresAt')">
+                                    {{ license.expiresAt || '-' }}
+                                </el-descriptions-item>
                                 <el-descriptions-item :label="$t('license.productStatus')">
                                     <div v-if="license.status">
                                         <el-tooltip
-                                            v-if="license.status.indexOf('lost') !== -1"
+                                            v-if="license.status.indexOf('Lost') !== -1"
                                             :content="$t('license.lostHelper')"
                                         >
                                             <el-tag type="info">
@@ -40,7 +50,7 @@
 
                         <CardWithHeader :header="$t('home.overview')" height="160px" v-if="!hasLicense()">
                             <template #body>
-                                <div class="h-overview">
+                                <div class="h-app-card">
                                     <el-row>
                                         <el-col :span="6">
                                             <span>{{ $t('setting.license') }}</span>
@@ -58,7 +68,7 @@
                         <CardWithHeader :header="$t('license.quickUpdate')" height="160px">
                             <template #body>
                                 <div class="h-app-card">
-                                    <el-row :gutter="10">
+                                    <el-row>
                                         <el-col :span="15">
                                             <div class="h-app-content">{{ $t('license.importLicense') }}：</div>
                                         </el-col>
@@ -70,7 +80,7 @@
                                     </el-row>
                                 </div>
                                 <div class="h-app-card">
-                                    <el-row :gutter="10">
+                                    <el-row>
                                         <el-col :span="15">
                                             <div class="h-app-content">{{ $t('license.technicalAdvice') }}：</div>
                                         </el-col>
@@ -177,6 +187,10 @@ const hasLicense = () => {
     return license.status === 'Enable';
 };
 
+const showSync = () => {
+    return license.status.indexOf('Lost') !== -1 || license.status === 'Disable';
+};
+
 const toUpload = () => {
     uploadRef.value.acceptParams();
 };
@@ -191,17 +205,6 @@ onMounted(() => {
     padding: 10px 15px;
     margin-right: 10px;
     line-height: 18px;
-
-    .h-app-content {
-        padding-left: 15px;
-        .h-app-desc {
-            span {
-                font-weight: 400;
-                font-size: 12px;
-                color: var(--el-text-color-regular);
-            }
-        }
-    }
     &:hover {
         background-color: rgba(0, 94, 235, 0.03);
     }

frontend/src/views/setting/license/upload/index.vue

@@ -46,6 +46,8 @@ import { UploadFileData } from '@/api/modules/setting';
 import i18n from '@/lang';
 import DrawerHeader from '@/components/drawer-header/index.vue';
 import { MsgSuccess } from '@/utils/message';
+import { GlobalStore } from '@/store';
+const globalStore = GlobalStore();
 
 const loading = ref(false);
 const open = ref(false);
@@ -85,7 +87,7 @@ const submit = async () => {
             loading.value = false;
             uploadRef.value!.clearFiles();
             uploaderFiles.value = [];
-            em('search');
+            globalStore.isProductPro = true;
             open.value = false;
             MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
             window.location.reload();