fix: 解决 i18n 导致页面错误的问题 (#4247)

frontend/.gitignore

@@ -7,6 +7,7 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 pnpm-lock.yaml
+package-lock.json
 
 node_modules
 dist

frontend/package.json

@@ -29,7 +29,7 @@
         "axios": "^1.6.0",
         "echarts": "^5.3.0",
         "echarts-liquidfill": "^3.1.0",
-        "element-plus": "^2.6.0",
+        "element-plus": "^2.3.4",
         "fit2cloud-ui-plus": "^1.1.3",
         "js-base64": "^3.7.2",
         "js-md5": "^0.7.3",
@@ -46,7 +46,7 @@
         "vue": "^3.2.25",
         "vue-clipboard3": "^2.0.0",
         "vue-codemirror": "^6.1.1",
-        "vue-i18n": "^9.1.9",
+        "vue-i18n": "^9.10.2",
         "vue-router": "^4.0.12",
         "vue3-seamless-scroll": "^1.2.0",
         "xterm": "^4.19.0",

frontend/src/components/config-card/index.vue

@@ -25,7 +25,6 @@ defineProps({
 <style lang="scss" scoped>
 .config-card {
     cursor: pointer;
-    margin: 10px;
     .config-header {
         margin-bottom: 18px;
         display: flex;

frontend/src/lang/modules/en.ts

@@ -1446,8 +1446,8 @@ const message = {
         doc: 'Official document',
         star: 'Star',
         description: '1Panel, Modern, open source Linux server operation and maintenance management panel.',
-        forum: 'Forum',
-        doc2: 'Document',
+        forum: 'Forum Help',
+        doc2: 'User Manual',
         currentVersion: 'Version',
     },
     clean: {
@@ -2274,6 +2274,9 @@ const message = {
             execRule: 'Hit rule',
             acl: 'ACL',
             sql: 'SQL injection',
+            cc: 'CC attack',
+            isBlocking: 'Blocking',
+            isFree: 'Unblocked',
         },
         monitor: {
             name: 'Website Monitor',

frontend/src/lang/modules/tw.ts

@@ -1347,8 +1347,8 @@ const message = {
         doc: '官方文檔',
         star: '點亮 Star',
         description: '1Panel，現代化、開源的 Linux 服務器運維管理面板。',
-        forum: '論壇',
-        doc2: '文檔',
+        forum: '論壇求助',
+        doc2: '使用手冊',
         currentVersion: '當前運行版本：',
     },
     clean: {
@@ -2128,6 +2128,9 @@ const message = {
             execRule: '命中規則',
             acl: 'ACL',
             sql: 'SQL 注入',
+            cc: 'CC 攻擊',
+            isBlocking: '封鎖中',
+            isFree: '已解封',
         },
         monitor: {
             name: '網站監控',

frontend/src/lang/modules/zh.ts

@@ -1348,8 +1348,8 @@ const message = {
         doc: '官方文档',
         star: '点亮 Star',
         description: '1Panel，现代化、开源的 Linux 服务器运维管理面板。',
-        forum: '论坛',
-        doc2: '文档',
+        forum: '论坛求助',
+        doc2: '使用手冊',
         currentVersion: '当前运行版本：',
     },
     clean: {
@@ -2129,6 +2129,9 @@ const message = {
             execRule: '命中规则',
             acl: 'ACL',
             sql: 'SQL 注入',
+            cc: 'CC 攻击',
+            isBlocking: '封禁中',
+            isFree: '已解封',
         },
         monitor: {
             name: '网站监控',

frontend/src/utils/util.ts

@@ -502,9 +502,19 @@ export async function copyText(content: string) {
 }
 
 export function getRuleType(ruleType: string) {
+    if (ruleType == '') {
+        return '';
+    }
     return i18n.global.t(`xpack.waf.${ruleType}`);
 }
 
 export function getAction(action: string) {
+    if (action == '') {
+        return '';
+    }
     return i18n.global.t(`xpack.waf.${action}`);
 }
+
+export function getLanguage() {
+    return localStorage.getItem('lang') || 'zh';
+}

frontend/src/views/app-store/apps/index.vue

@@ -174,8 +174,8 @@ import Detail from '../detail/index.vue';
 import Install from '../detail/install/index.vue';
 import router from '@/routers';
 import { MsgSuccess } from '@/utils/message';
-import { useI18n } from 'vue-i18n';
 import { GlobalStore } from '@/store';
+import { getLanguage } from '@/utils/util';
 
 const globalStore = GlobalStore();
 
@@ -183,7 +183,7 @@ const mobile = computed(() => {
     return globalStore.isMobile();
 });
 
-const language = useI18n().locale.value;
+const language = getLanguage();
 
 const paginationConfig = reactive({
     cacheSizeKey: 'app-page-size',

frontend/src/views/app-store/detail/index.vue

@@ -78,13 +78,13 @@
 import { GetApp, GetAppDetail } from '@/api/modules/app';
 import MdEditor from 'md-editor-v3';
 import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
 import Install from './install/index.vue';
 import router from '@/routers';
 import { GlobalStore } from '@/store';
+import { getLanguage } from '@/utils/util';
 const globalStore = GlobalStore();
 
-const language = useI18n().locale.value;
+const language = getLanguage();
 
 const app = ref<any>({});
 const appDetail = ref<any>({});

frontend/src/views/app-store/installed/detail/index.vue

@@ -122,7 +122,6 @@ import { App } from '@/api/interface/app';
 import { GetAppInstallParams, UpdateAppInstallParams } from '@/api/modules/app';
 import { reactive, ref } from 'vue';
 import Header from '@/components/drawer-header/index.vue';
-import { useI18n } from 'vue-i18n';
 import { FormInstance } from 'element-plus';
 import { Rules, checkNumberRange } from '@/global/form-rules';
 import { MsgSuccess } from '@/utils/message';
@@ -130,6 +129,7 @@ import i18n from '@/lang';
 import { Codemirror } from 'vue-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
 import { oneDark } from '@codemirror/theme-one-dark';
+import { getLanguage } from '@/utils/util';
 
 const extensions = [javascript(), oneDark];
 
@@ -228,7 +228,7 @@ const get = async () => {
 };
 
 const getLabel = (row: EditForm): string => {
-    const language = useI18n().locale.value;
+    const language = getLanguage();
     if (language == 'zh' || language == 'tw') {
         return row.labelZh;
     } else {

frontend/src/views/app-store/installed/index.vue

@@ -317,11 +317,10 @@ import AppDetail from '../detail/index.vue';
 import ComposeLogs from '@/components/compose-log/index.vue';
 import { App } from '@/api/interface/app';
 import Status from '@/components/status/index.vue';
-import { getAge } from '@/utils/util';
+import { getAge, getLanguage } from '@/utils/util';
 import { useRouter } from 'vue-router';
 import { MsgSuccess } from '@/utils/message';
 import { toFolder } from '@/global/business';
-import { useI18n } from 'vue-i18n';
 
 const data = ref<any>();
 const loading = ref(false);
@@ -361,7 +360,7 @@ const router = useRouter();
 const activeName = ref(i18n.global.t('app.installed'));
 const mode = ref('installed');
 const moreTag = ref('');
-const language = useI18n().locale.value;
+const language = getLanguage();
 const appDetail = ref();
 
 const sync = () => {

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

@@ -43,11 +43,11 @@
 <script lang="ts" setup>
 import { App } from '@/api/interface/app';
 import { SearchApp } from '@/api/modules/app';
+import { getLanguage } from '@/utils/util';
 import { reactive, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 const router = useRouter();
-const language = useI18n().locale.value;
+const language = getLanguage();
 
 let req = reactive({
     name: '',

frontend/src/views/website/runtime/php/edit/index.vue

@@ -24,8 +24,8 @@
 <script setup lang="ts">
 import { App } from '@/api/interface/app';
 import { Rules } from '@/global/form-rules';
+import { getLanguage } from '@/utils/util';
 import { computed, onMounted, reactive, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
 
 interface ParamObj extends App.InstallParams {
     prop: string;
@@ -97,7 +97,7 @@ const handleParams = () => {
 };
 
 const getLabel = (row: ParamObj): string => {
-    const language = useI18n().locale.value;
+    const language = getLanguage();
     if (language == 'zh' || language == 'tw') {
         return row.labelZh;
     } else {

frontend/src/views/website/runtime/php/param/index.vue

@@ -24,8 +24,8 @@
 <script setup lang="ts">
 import { App } from '@/api/interface/app';
 import { Rules } from '@/global/form-rules';
+import { getLanguage } from '@/utils/util';
 import { computed, onMounted, reactive, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
 
 interface ParamObj extends App.FromField {
     services: App.AppService[];
@@ -93,7 +93,7 @@ const handleParams = () => {
 };
 
 const getLabel = (row: ParamObj): string => {
-    const language = useI18n().locale.value;
+    const language = getLanguage();
     if (language == 'zh' || language == 'tw') {
         return row.labelZh;
     } else {