style: 调整 Xpack 界面样式与菜单位置 (#4323)

frontend/src/lang/modules/en.ts

@@ -1458,11 +1458,12 @@ const message = {
 
         license: 'License',
     },
-    license: {
+    License: {
         community: 'Community Edition',
         pro: 'Professional Edition',
-        trial: 'Trial Version',
-        office: 'Official Version',
+        trial: 'Trial Edition',
+        office: 'Official Edition',
+        trialInfo: 'Version',
         authorizationId: 'Subscription Authorization ID',
         authorizedUser: 'Authorized User',
         expiresAt: 'Expiration Time',
@@ -1474,16 +1475,23 @@ const message = {
         Enable: 'Enabled',
         Disable: 'Disabled',
         lostHelper:
-            'The license needs to be regularly synchronized for availability. Please ensure normal access to the external network. After three losses of contact, the license binding will be released.',
+            'The License needs to be periodically synchronized for availability. Please ensure normal external network access. After three losses of connection, the License binding will be released.',
         quickUpdate: 'Quick Update',
         import: 'Import',
+        power: 'Authorize',
         importLicense: 'Import License',
-        importHelper: 'Click or drag the License file here',
+        importHelper: 'Please click or drag the license file here',
         technicalAdvice: 'Technical Advice',
         advice: 'Consultation',
         indefinitePeriod: 'Indefinite Period',
         levelUpPro: 'Upgrade to Professional Edition',
-        knowMorePro: 'Learn More about Professional Edition',
+        knowMorePro: 'Learn More',
+        closeAlert: 'The current page can be closed in the panel settings',
+        introduce: 'Feature Introduction',
+        waf: '1Panel WAF effectively prevents common attacks such as CC attacks, malicious data collection, API abuse, and hacker penetration testing behaviors, providing strong protection for your website security.',
+        tamper: '1Panel Tamper Protection effectively safeguards data from tampering and malicious attacks, ensuring data reliability and security.',
+        setting:
+            '1Panel interface settings allow you to customize panel logos, welcome messages, and other information.',
     },
     clean: {
         scan: 'Start Scanning',

frontend/src/lang/modules/tw.ts

@@ -1358,30 +1358,38 @@ const message = {
 
         license: '許可證',
     },
-    license: {
+    License: {
         community: '社區版',
         pro: '專業版',
         trial: '試用版',
-        office: '正式版本',
+        office: '正式版',
+        trialInfo: '版本',
         authorizationId: '訂閱授權 ID',
         authorizedUser: '被授權方',
+        expiresAt: '到期時間',
         productName: '產品名稱',
         productStatus: '產品狀態',
         Lost01: '失聯 * 1',
         Lost02: '失聯 * 2',
-        Lost03: '失聯',
+        Lost03: '已失聯',
         Enable: '已啟用',
         Disable: '未啟用',
-        lostHelper: 'License 需要定時同步是否可用，請確保正常外網訪問，失聯三次後將解除 License 綁定',
+        lostHelper: '許可證需要定時同步是否可用，請保證正常外網訪問，失聯三次後將解除許可證綁定',
         quickUpdate: '快速更新',
         import: '導入',
-        importLicense: '導入 License',
-        importHelper: '點擊或將 License 文件拖拽到此處',
+        power: '授 權',
+        importLicense: '導入許可證',
+        importHelper: '請點擊或拖動許可文件到此處',
         technicalAdvice: '技術諮詢',
         advice: '諮詢',
         indefinitePeriod: '無限期',
         levelUpPro: '升級專業版',
-        knowMorePro: '了解更多專業版信息',
+        knowMorePro: '了解更多',
+        closeAlert: '當前頁面可在面板設置中關閉顯示',
+        introduce: '功能介紹',
+        waf: '1Panel WAF 有效防 CC 攻擊、防惡意采集、防刷接口等常見攻擊和黑客滲透測試行為，強力守護您網站業務安全。',
+        tamper: '1Panel 防篡改有效保護數據免受篡改和惡意攻擊，確保數據的可靠性和安全性。',
+        setting: '1Panel 介面設置可自定義面板 Logo、歡迎簡介等信息。',
     },
     clean: {
         scan: '開始掃描',

frontend/src/lang/modules/zh.ts

@@ -1376,18 +1376,22 @@ const message = {
         Lost03: '已失联',
         Enable: '已激活',
         Disable: '未激活',
-        lostHelper: 'License 需要定时同步是否可用，请保证正常外网访问，失联三次后将解除 License 绑定',
+        lostHelper: '许可证需要定时同步是否可用，请保证正常外网访问，失联三次后将解除许可证绑定',
         quickUpdate: '快速更新',
         import: '导入',
-        power: '授权',
-        importLicense: '导入 License',
-        importHelper: '点击或将 License 文件拖拽到此处',
+        power: '授 权',
+        importLicense: '导入许可证',
+        importHelper: '请点击或拖动许可文件到此处',
         technicalAdvice: '技术咨询',
         advice: '咨询',
         indefinitePeriod: '无限期',
         levelUpPro: '升级专业版',
-        knowMorePro: '了解更多专业版信息',
+        knowMorePro: '了解更多',
         closeAlert: '当前页面可在面板设置中关闭显示',
+        introduce: '功能介绍',
+        waf: '1Panel WAF 有效防CC攻击、防恶意采集、防刷接口等常见攻击和黑客渗透测试行为，强力守护您网站业务安全。',
+        tamper: '1Panel 防篡改有效保护数据免受篡改和恶意攻击，确保数据的可靠性和安全性。',
+        setting: '1Panel 界面设置可自定义面板 Logo、欢迎简介等信息。',
     },
     clean: {
         scan: '开始扫描',

frontend/src/routers/modules/setting.ts

@@ -1,7 +1,7 @@
 import { Layout } from '@/routers/constant';
 
 const settingRouter = {
-    sort: 9,
+    sort: 10,
     path: '/settings',
     component: Layout,
     redirect: '/settings/panel',

frontend/src/views/home/index.vue

@@ -234,7 +234,7 @@
             </el-col>
         </el-row>
 
-        <License ref="licenseRef" />
+        <LicenseImport ref="licenseRef" />
     </div>
 </template>
 
@@ -243,6 +243,7 @@ import { onMounted, onBeforeUnmount, ref, reactive } from 'vue';
 import Status from '@/views/home/status/index.vue';
 import App from '@/views/home/app/index.vue';
 import VCharts from '@/components/v-charts/index.vue';
+import LicenseImport from '@/components/license-import/index.vue';
 import CardWithHeader from '@/components/card-with-header/index.vue';
 import i18n from '@/lang';
 import { Dashboard } from '@/api/interface/dashboard';
@@ -252,7 +253,6 @@ import { loadBaseInfo, loadCurrentInfo } from '@/api/modules/dashboard';
 import { getIOOptions, getNetworkOptions } from '@/api/modules/monitor';
 import { getSettingInfo, loadUpgradeInfo } from '@/api/modules/setting';
 import { GlobalStore } from '@/store';
-import License from '@/views/home/license/index.vue';
 const router = useRouter();
 const globalStore = GlobalStore();
 

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

@@ -98,7 +98,7 @@
             </template>
         </LayoutContent>
 
-        <Upload ref="uploadRef" @search="search()" />
+        <LicenseImport ref="licenseRef" />
     </div>
 </template>
 
@@ -106,12 +106,12 @@
 import { ref, reactive, onMounted } from 'vue';
 import { getLicense, syncLicense } from '@/api/modules/setting';
 import CardWithHeader from '@/components/card-with-header/index.vue';
-import Upload from '@/views/setting/license/upload/index.vue';
+import LicenseImport from '@/components/license-import/index.vue';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { GlobalStore } from '@/store';
 const loading = ref();
-const uploadRef = ref();
+const licenseRef = ref();
 const globalStore = GlobalStore();
 
 const license = reactive({
@@ -194,7 +194,7 @@ const showSync = () => {
 };
 
 const toUpload = () => {
-    uploadRef.value.acceptParams();
+    licenseRef.value.acceptParams();
 };
 
 onMounted(() => {

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

@@ -1,109 +0,0 @@
-<template>
-    <el-drawer
-        v-model="open"
-        :before-close="handleClose"
-        size="30%"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-    >
-        <template #header>
-            <DrawerHeader :header="$t('license.importLicense')" :back="handleClose" />
-        </template>
-        <div v-loading="loading">
-            <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>
-        </div>
-
-        <template #footer>
-            <span class="dialog-footer">
-                <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button type="primary" @click="submit()" :disabled="loading || uploaderFiles.length == 0">
-                    {{ $t('commons.button.confirm') }}
-                </el-button>
-            </span>
-        </template>
-    </el-drawer>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import { UploadFile, UploadFiles, UploadInstance, UploadProps, UploadRawFile, genFileId } from 'element-plus';
-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);
-
-const em = defineEmits(['search']);
-
-const uploadRef = ref<UploadInstance>();
-const uploaderFiles = ref<UploadFiles>([]);
-
-const handleClose = () => {
-    open.value = false;
-    uploadRef.value!.clearFiles();
-    em('search');
-};
-
-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 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>