feat(i18n): add internationalization support for knowledge module

- Add English, Chinese, and Japanese translations for knowledge management UI
- Update knowledge page and components to use i18n strings
- Fix menu ID inconsistency in sidebar component
- Improve sidebar active state handling with route watcher
- Update text color binding in sidebar to use style binding

src/components/SideMenus/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="w-[80px] h-full box-border flex flex-col items-center pb-[8px]">
-        <div :class="['flex flex-col gap-[16px]', { 'mt-auto mb-[8px] shrink-1': item.id === 4 }]"
+        <div :class="['flex flex-col gap-[16px]', { 'mt-auto mb-[8px] shrink-1': item.id === 3 }]"
             v-for="(item) in menus" :key="item.id">
             <div :class="['cursor-pointer flex flex-col items-center justify-center']" @click="handleClick(item)">
                 <div :class="['box-border rounded-[16px] p-[8px]', { 'bg-white': item.id === currentId }]">
@@ -9,7 +9,8 @@
                 </div>
 
                 <div
-                    :class="['text-[14px] mt-[4px] mb-[8px]', item.id === currentId ? `text-[${item.activeColor}]` : item.color]">
+                    class="text-[14px] mt-[4px] mb-[8px]"
+                    :style="{ color: item.id === currentId ? item.activeColor : item.color }">
                     {{ item.name }}
                 </div>
             </div>
@@ -21,11 +22,20 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
 import { menus, type MenuItem } from '@constant/menus'
 
 const currentId = ref(1)
 const router = useRouter()
+const route = useRoute()
+
+watch(() => route.path, (newPath) => {
+    const currentMenu = menus.find(m => newPath.startsWith(m.url))
+    if (currentMenu) {
+        currentId.value = currentMenu.id
+    }
+}, { immediate: true })
 
 const handleClick = async (item: MenuItem) => {
     console.log("🚀 ~ handleClick ~ item:", item)

src/constant/menus.ts

@@ -36,7 +36,7 @@ export const menus: MenuItem[] = [
     //     url: '/task',
     // },
     {
-        id: 4,
+        id: 3,
         name: '设置',
         icon: RiSettingsLine,
         color: '#525866',

src/i18n/locales/en/knowledge.json

@@ -1 +1,54 @@
-{}
+{
+  "title": "Knowledge Management",
+  "desc": "Content Management",
+  "roomTypeManager": "Room Type Management",
+  "eventManager": "Event Management",
+  "event": {
+    "addEvent": "Add Event",
+    "eventName": "Event Name",
+    "eventDesc": "Event Description",
+    "effectiveTime": "Effective Time",
+    "endTime": "End Time",
+    "relatedImage": "Related Image",
+    "enableDisable": "Enable/Disable",
+    "operation": "Operation",
+    "viewImage": "View Image",
+    "uploadImage": "Upload Image",
+    "pleaseEnter": "Please enter",
+    "effectiveTimeRange": "Effective Time Range",
+    "to": "to",
+    "startDate": "Start Date",
+    "endDate": "End Date",
+    "pleaseEnterEventName": "Please enter the event name",
+    "lengthValidation": "Length between 3 and 50 characters",
+    "pleaseEnterEventDesc": "Please enter the event description",
+    "pleaseSelectTimeRange": "Please select the effective time range"
+  },
+  "upload": {
+    "title": "Upload Image",
+    "step1": "Upload Image 1",
+    "step2": "Image Description 2",
+    "dragText": "Choose a file or drag and drop it here",
+    "formatDesc": "JPEG, PNG, PDF, and MP4 formats up to 50MB.",
+    "tipText": "If you don't want to enter prompt words for now, click confirm and operate in the list",
+    "pleaseUploadFirst": "Please upload an image first",
+    "uploadSuccess": "Image uploaded successfully",
+    "pleaseEnter": "Please enter"
+  },
+  "eventPic": {
+    "copySuccess": "Copied successfully",
+    "copyFail": "Copy failed",
+    "backToEvent": "Back to Event Management"
+  },
+  "roomType": {
+    "ctrip": "Ctrip",
+    "fliggy": "Fliggy",
+    "douyinHotel": "Douyin (Xifeng Nanshan Tianmu Hot Spring Hotel)",
+    "douyinHotSpring": "Douyin (Xifeng Nanshan Tianmu Hot Spring)",
+    "meituan": "Meituan"
+  },
+  "common": {
+    "cancel": "Cancel",
+    "confirm": "Confirm"
+  }
+}

src/i18n/locales/ja/knowledge.json

@@ -1 +1,54 @@
-{}
+{
+  "title": "ナレッジ管理",
+  "desc": "コンテンツ管理",
+  "roomTypeManager": "部屋タイプ管理",
+  "eventManager": "イベント管理",
+  "event": {
+    "addEvent": "イベントを追加",
+    "eventName": "イベント名",
+    "eventDesc": "イベントの説明",
+    "effectiveTime": "有効時間",
+    "endTime": "終了時間",
+    "relatedImage": "関連画像",
+    "enableDisable": "有効/無効",
+    "operation": "操作",
+    "viewImage": "画像を表示",
+    "uploadImage": "画像をアップロード",
+    "pleaseEnter": "入力してください",
+    "effectiveTimeRange": "有効期間",
+    "to": "から",
+    "startDate": "開始日",
+    "endDate": "終了日",
+    "pleaseEnterEventName": "イベント名を入力してください",
+    "lengthValidation": "3〜50文字の長さ",
+    "pleaseEnterEventDesc": "イベントの説明を入力してください",
+    "pleaseSelectTimeRange": "有効期間を選択してください"
+  },
+  "upload": {
+    "title": "画像をアップロード",
+    "step1": "画像のアップロード 1",
+    "step2": "画像の説明 2",
+    "dragText": "ファイルを選択するか、ここにドラッグアンドドロップしてください",
+    "formatDesc": "JPEG、PNG、PDF、およびMP4形式で最大50MB。",
+    "tipText": "プロンプトを入力しない場合は、確認をクリックしてリストで操作できます",
+    "pleaseUploadFirst": "最初に画像をアップロードしてください",
+    "uploadSuccess": "画像のアップロードに成功しました",
+    "pleaseEnter": "入力してください"
+  },
+  "eventPic": {
+    "copySuccess": "コピーに成功しました",
+    "copyFail": "コピーに失敗しました",
+    "backToEvent": "イベント管理に戻る"
+  },
+  "roomType": {
+    "ctrip": "Ctrip",
+    "fliggy": "Fliggy",
+    "douyinHotel": "Douyin (Xifeng Nanshan Tianmu Hot Spring Hotel)",
+    "douyinHotSpring": "Douyin (Xifeng Nanshan Tianmu Hot Spring)",
+    "meituan": "Meituan"
+  },
+  "common": {
+    "cancel": "キャンセル",
+    "confirm": "確認"
+  }
+}

src/i18n/locales/zh/knowledge.json

@@ -1 +1,54 @@
-{}
+{
+  "title": "知识库管理",
+  "desc": "内容管理",
+  "roomTypeManager": "房型管理",
+  "eventManager": "事件管理",
+  "event": {
+    "addEvent": "添加事件",
+    "eventName": "事件名称",
+    "eventDesc": "事件描述",
+    "effectiveTime": "生效时间",
+    "endTime": "结束时间",
+    "relatedImage": "关联图片",
+    "enableDisable": "启用/停用",
+    "operation": "操作",
+    "viewImage": "查看图片",
+    "uploadImage": "上传图片",
+    "pleaseEnter": "请输入",
+    "effectiveTimeRange": "生效时间段",
+    "to": "至",
+    "startDate": "开始日期",
+    "endDate": "结束日期",
+    "pleaseEnterEventName": "请输入活动名称",
+    "lengthValidation": "长度在 3 到 50 个字符",
+    "pleaseEnterEventDesc": "请输入活动描述",
+    "pleaseSelectTimeRange": "请选择生效时间段"
+  },
+  "upload": {
+    "title": "上传图片",
+    "step1": "上传图片 1",
+    "step2": "图片描述 2",
+    "dragText": "选择一个文件或将其拖放到此处",
+    "formatDesc": "JPEG,PNG,PDF,和 MP4 格式最大不超过50MB。",
+    "tipText": "若暂时不想输入提示词可点击确认，到列表操作",
+    "pleaseUploadFirst": "请先上传图片",
+    "uploadSuccess": "图片上传成功",
+    "pleaseEnter": "请输入"
+  },
+  "eventPic": {
+    "copySuccess": "复制成功",
+    "copyFail": "复制失败",
+    "backToEvent": "返回事件管理"
+  },
+  "roomType": {
+    "ctrip": "携程",
+    "fliggy": "飞猪",
+    "douyinHotel": "抖音（息烽南山天沐温泉酒店）",
+    "douyinHotSpring": "抖音（息烽南山天沐温泉）",
+    "meituan": "美团"
+  },
+  "common": {
+    "cancel": "取消",
+    "confirm": "确认"
+  }
+}

src/pages/knowledge/components/EventManager/UploadImage.vue

@@ -1,11 +1,11 @@
 <template>
-  <el-dialog v-model="model" title="上传图片" :width="width" :before-close="handleClose" :close-on-click-modal="false"
+  <el-dialog v-model="model" :title="t('knowledge.upload.title')" :width="width" :before-close="handleClose" :close-on-click-modal="false"
     :close-on-press-escape="false" append-to-body>
     <div class="flex justify-center">
       <div class="w-[500px] mt-[20px]">
         <el-steps style="max-width: 500px" :active="activeIndex" simple finish-status="success">
-          <el-step title="上传图片 1" />
-          <el-step title="图片描述 2" />
+          <el-step :title="t('knowledge.upload.step1')" />
+          <el-step :title="t('knowledge.upload.step2')" />
         </el-steps>
       </div>
     </div>
@@ -13,17 +13,17 @@
       <el-upload drag action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple>
         <el-icon class="el-icon--upload"><upload-filled /></el-icon>
         <div class="text-[14px] text-[#171717]">
-          选择一个文件或将其拖放到此处
+          {{ t('knowledge.upload.dragText') }}
         </div>
         <div class="text-[12px] text-[#99A0AE]">
-          JPEG,PNG,PDF,和 MP4 格式最大不超过50MB。
+          {{ t('knowledge.upload.formatDesc') }}
         </div>
       </el-upload>
     </div>
     <div v-else-if="activeIndex === 1" class="p-[20px]">
       <el-alert type="info" show-icon>
         <div class="flex justify-between items-center">
-          <span class="flex-1">若暂时不想输入提示词可点击确认，到列表操作</span>
+          <span class="flex-1">{{ t('knowledge.upload.tipText') }}</span>
         </div>
         <template #icon>
           <component :is="RiMagicFill" color="#717784" class="w-[20px] h-[20px]" />
@@ -38,27 +38,30 @@
         </div>
         <div class="flex">
           <img src="@assets/images/task/xc.png" class="w-[120px] h-[120px] mr-[16px] rounded-[8px]" />
-          <el-input v-model="item.desc" maxlength="200" placeholder="请输入" show-word-limit word-limit-position="outside"
+          <el-input v-model="item.desc" maxlength="200" :placeholder="t('knowledge.upload.pleaseEnter')" show-word-limit word-limit-position="outside"
             type="textarea" :autosize="{ minRows: 5, maxRows: 5 }" class="rounded-[10px]" />
         </div>
       </div>
     </div>
     <template #footer>
       <div class="dialog-footer">
-        <el-button @click="model = false">取消</el-button>
-        <el-button type="primary" @click="submitForm(ruleFormRef)">
-          确认
+        <el-button @click="model = false">{{ t('knowledge.common.cancel') }}</el-button>
+        <el-button type="primary" @click="submitForm()">
+          {{ t('knowledge.common.confirm') }}
         </el-button>
       </div>
     </template>
   </el-dialog>
 </template>
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n';
 import { UploadFilled } from '@element-plus/icons-vue';
 import { RiMagicFill, RiDeleteBinLine } from '@remixicon/vue';
 import { ElMessage } from 'element-plus'
 import { ref, defineModel, onMounted, watch } from 'vue';
 
+const { t } = useI18n();
+
 const model = defineModel({ type: Boolean, default: false })
 defineProps({
   width: { type: String, default: '80%' },
@@ -86,7 +89,7 @@ const submitForm = async () => {
     upSuccess();
   } else {
     ElMessage({
-      message: '请先上传图片',
+      message: t('knowledge.upload.pleaseUploadFirst'),
       type: 'warning',
     })
     return;
@@ -99,7 +102,7 @@ const upSuccess = () => {
   } else if (activeIndex.value === 1) {
     model.value = false;
     ElMessage({
-      message: '图片上传成功',
+      message: t('knowledge.upload.uploadSuccess'),
       type: 'success',
     })
   }

src/pages/knowledge/components/EventManager/addDialog.vue

@@ -1,18 +1,18 @@
 <template>
-  <el-dialog v-model="visible" title="添加事件" width="500" :before-close="handleClose" :close-on-click-modal="false"
+  <el-dialog v-model="visible" :title="t('knowledge.event.addEvent')" width="500" :before-close="handleClose" :close-on-click-modal="false"
     :close-on-press-escape="false" append-to-body>
     <div class="p-[20px]">
       <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-position="top"
         label-width="auto">
-        <el-form-item label="事件名称" prop="name">
-          <el-input v-model="ruleForm.name" placeholder="请输入" />
+        <el-form-item :label="t('knowledge.event.eventName')" prop="name">
+          <el-input v-model="ruleForm.name" :placeholder="t('knowledge.event.pleaseEnter')" />
         </el-form-item>
-        <el-form-item label="事件描述" prop="des">
-          <el-input v-model="ruleForm.des" placeholder="请输入" />
+        <el-form-item :label="t('knowledge.event.eventDesc')" prop="des">
+          <el-input v-model="ruleForm.des" :placeholder="t('knowledge.event.pleaseEnter')" />
         </el-form-item>
-        <el-form-item label="生效时间段" prop="time">
-          <el-date-picker type="daterange" v-model="ruleForm.time" range-separator="至" start-placeholder="开始日期"
-            end-placeholder="结束日期">
+        <el-form-item :label="t('knowledge.event.effectiveTimeRange')" prop="time">
+          <el-date-picker type="daterange" v-model="ruleForm.time" :range-separator="t('knowledge.event.to')" :start-placeholder="t('knowledge.event.startDate')"
+            :end-placeholder="t('knowledge.event.endDate')">
             <template #suffix>
               <el-icon class="el-input__icon">
                 <calendar />
@@ -24,9 +24,9 @@
     </div>
     <template #footer>
       <div class="dialog-footer">
-        <el-button @click="visible = false">取消</el-button>
+        <el-button @click="visible = false">{{ t('knowledge.common.cancel') }}</el-button>
         <el-button type="primary" @click="submitForm(ruleFormRef)">
-          确认
+          {{ t('knowledge.common.confirm') }}
         </el-button>
       </div>
     </template>
@@ -34,8 +34,11 @@
 </template>
 
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n';
 import type { FormInstance } from 'element-plus';
-import { ref, reactive } from 'vue';
+import { ref, reactive, computed } from 'vue';
+
+const { t } = useI18n();
 
 const visible = ref(false)
 
@@ -45,19 +48,19 @@ interface RuleForm {
   time: string[]
 }
 const ruleFormRef = ref<any>();
-const rules = ref<any>({
+const rules = computed(() => ({
   name: [
-    { required: true, message: '请输入活动名称', trigger: 'blur' },
-    { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' },
+    { required: true, message: t('knowledge.event.pleaseEnterEventName'), trigger: 'blur' },
+    { min: 3, max: 50, message: t('knowledge.event.lengthValidation'), trigger: 'blur' },
   ],
   des: [
-    { required: true, message: '请输入活动描述', trigger: 'blur' },
-    { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' },
+    { required: true, message: t('knowledge.event.pleaseEnterEventDesc'), trigger: 'blur' },
+    { min: 3, max: 50, message: t('knowledge.event.lengthValidation'), trigger: 'blur' },
   ],
   time: [
-    { required: true, message: '请选择生效时间段', trigger: 'change' },
+    { required: true, message: t('knowledge.event.pleaseSelectTimeRange'), trigger: 'change' },
   ],
-});
+}));
 const ruleForm = reactive<RuleForm>({
   name: '',
   des: '',

src/pages/knowledge/components/EventManager/index.vue

@@ -1,27 +1,27 @@
 <template>
   <div>
     <el-row class="mb-[20px]">
-      <el-button class="button" type="primary" :icon="Plus" @click="dialogVisible = true">添加事件</el-button>
+      <el-button class="button" type="primary" :icon="Plus" @click="dialogVisible = true">{{ t('knowledge.event.addEvent') }}</el-button>
     </el-row>
 
     <el-table :data="tableData" show-overflow-tooltip border>
-      <el-table-column prop="date" label="事件名称" width="180" align="center" />
-      <el-table-column prop="name" label="事件描述" width="180" align="center" />
-      <el-table-column prop="address" label="生效时间" align="center" />
-      <el-table-column prop="address" label="结束事件" align="center" />
-      <el-table-column prop="address" label="关联图片" align="center" />
-      <el-table-column prop="address" label="启用/停用" align="center">
+      <el-table-column prop="date" :label="t('knowledge.event.eventName')" width="180" align="center" />
+      <el-table-column prop="name" :label="t('knowledge.event.eventDesc')" width="180" align="center" />
+      <el-table-column prop="address" :label="t('knowledge.event.effectiveTime')" align="center" />
+      <el-table-column prop="address" :label="t('knowledge.event.endTime')" align="center" />
+      <el-table-column prop="address" :label="t('knowledge.event.relatedImage')" align="center" />
+      <el-table-column prop="address" :label="t('knowledge.event.enableDisable')" align="center">
         <template #default="scope">
           <el-switch v-model="scope.row.switch" size="small" />
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" width="150">
+      <el-table-column :label="t('knowledge.event.operation')" align="center" width="150">
         <template #default="scope">
-          <el-button link size="small" type="primary" @click="emits('change', '查看图片', scope.row)">
-            查看图片
+          <el-button link size="small" type="primary" @click="emits('change', t('knowledge.event.viewImage'), scope.row)">
+            {{ t('knowledge.event.viewImage') }}
           </el-button>
           <el-button link size="small" type="primary" @click="uploadImageChange(scope.row)">
-            上传图片
+            {{ t('knowledge.event.uploadImage') }}
           </el-button>
         </template>
       </el-table-column>
@@ -35,11 +35,14 @@
 </template>
 
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n';
 import { ref, reactive } from 'vue';
 import { Plus } from '@element-plus/icons-vue';
 import AddDialog from './addDialog.vue';
 import UploadImage from './UploadImage.vue';
 
+const { t } = useI18n();
+
 const emits = defineEmits(["update:change"]);
 
 const dialogVisible = ref(false);

src/pages/knowledge/components/EventPic/index.vue

@@ -2,7 +2,7 @@
   <div class="bg-white box-border w-full h-full p-[20px]">
     <TitleSection @back-to="handleBack" :title="data.date" :desc="data.name">
       <template #right>
-        <el-button class="button" type="primary" :icon="Plus" @click="dialogVisible = true">添加事件</el-button>
+        <el-button class="button" type="primary" :icon="Plus" @click="dialogVisible = true">{{ t('knowledge.event.addEvent') }}</el-button>
       </template>
     </TitleSection>
     <div class="flex flex-wrap items-center">
@@ -42,6 +42,7 @@
 </template>
 
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n';
 import { ref } from 'vue';
 import { ElMessage } from 'element-plus';
 import { DocumentCopy, Plus } from '@element-plus/icons-vue';
@@ -49,6 +50,8 @@ import { RiInformationLine, RiEditLine, RiDeleteBinLine } from '@remixicon/vue';
 import TitleSection from '@src/components/TitleSection/index.vue';
 import UploadImage from '../../components/EventManager/UploadImage.vue';
 
+const { t } = useI18n();
+
 const props = defineProps({
   data: {
     type: Object,
@@ -65,12 +68,12 @@ const copyText = async (text: string) => {
   try {
     await navigator.clipboard.writeText(text);
     ElMessage({
-      message: '复制成功',
+      message: t('knowledge.eventPic.copySuccess'),
       type: 'success',
     });
   } catch (err) {
     ElMessage({
-      message: '复制失败',
+      message: t('knowledge.eventPic.copyFail'),
       type: 'warning',
     });
   }
@@ -78,7 +81,7 @@ const copyText = async (text: string) => {
 
 // 返回上一页
 const handleBack = (val: string) => {
-  emits("change", '返回事件管理');
+  emits("change", t('knowledge.eventPic.backToEvent'));
 };
 
 </script>

src/pages/knowledge/components/RoomTypeManager/index.vue

@@ -2,35 +2,35 @@
   <div class="mt-[10px]">
     <el-table :data="tableData" border>
       <el-table-column prop="pmsName" label="PMS" align="center" />
-      <el-table-column prop="xcName" label="携程" align="center">
+      <el-table-column prop="xcName" :label="t('knowledge.roomType.ctrip')" align="center">
         <template #default="{ row }">
           <el-tag v-if="row.xcName" type="info" :disable-transitions="false" class="mb-[10px] mr-[8px]">
             {{ row.xcName }}
           </el-tag>
         </template>
       </el-table-column>
-      <el-table-column prop="fzName" label="飞猪" align="center">
+      <el-table-column prop="fzName" :label="t('knowledge.roomType.fliggy')" align="center">
         <template #default="{ row }">
           <el-tag v-if="row.fzName" type="info" :disable-transitions="false" class="mb-[10px] mr-[8px]">
             {{ row.fzName }}
           </el-tag>
         </template>
       </el-table-column>
-      <el-table-column prop="dyHotelName" label="抖音（息烽南山天沐温泉酒店）" align="center">
+      <el-table-column prop="dyHotelName" :label="t('knowledge.roomType.douyinHotel')" align="center">
         <template #default="{ row }">
           <el-tag v-if="row.dyHotelName" type="info" :disable-transitions="false" class="mb-[10px] mr-[8px]">
             {{ row.dyHotelName }}
           </el-tag>
         </template>
       </el-table-column>
-      <el-table-column prop="dyHotSrpingName" label="抖音（息烽南山天沐温泉）" align="center">
+      <el-table-column prop="dyHotSrpingName" :label="t('knowledge.roomType.douyinHotSpring')" align="center">
         <template #default="{ row }">
           <el-tag v-if="row.dyHotSrpingName" type="info" :disable-transitions="false" class="mb-[10px] mr-[8px]">
             {{ row.dyHotSrpingName }}
           </el-tag>
         </template>
       </el-table-column>
-      <el-table-column prop="mtName" label="美团" align="center">
+      <el-table-column prop="mtName" :label="t('knowledge.roomType.meituan')" align="center">
         <template #default="{ row }">
           <el-tag v-if="row.mtName" type="info" :disable-transitions="false" class="mb-[10px] mr-[8px]">
             {{ row.mtName }}
@@ -42,9 +42,12 @@
 </template>
 
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n';
 import { ref } from 'vue';
 import { hotelStaffTypeMappingPageListUsingPost, RoomTypeMapping } from '@api/index';
 
+const { t } = useI18n();
+
 const tableData = ref([]);
 
 // 获取房型列表数据

src/pages/knowledge/index.vue

@@ -1,12 +1,12 @@
 <template>
   <layout>
     <div class="bg-white box-border w-full h-full p-[20px] rounded-[16px]">
-      <TitleSection title="知识库管理" desc="内容管理" />
+      <TitleSection :title="t('knowledge.title')" :desc="t('knowledge.desc')" />
       <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
-        <el-tab-pane label="房型管理" name="roomType">
+        <el-tab-pane :label="t('knowledge.roomTypeManager')" name="roomType">
           <RoomTypeManager />
         </el-tab-pane>
-        <el-tab-pane label="事件管理" name="event">
+        <el-tab-pane :label="t('knowledge.eventManager')" name="event">
           <EventManager />
         </el-tab-pane>
       </el-tabs>
@@ -16,12 +16,15 @@
 </template>
 
 <script setup lang="ts" name="KnowledgePage">
+import { useI18n } from 'vue-i18n';
 import TitleSection from '@src/components/TitleSection/index.vue'
 import EventManager from './components/EventManager/index.vue'
 import RoomTypeManager from './components/RoomTypeManager/index.vue'
 import { ref } from 'vue';
 import type { TabsPaneContext } from 'element-plus';
 
+const { t } = useI18n();
+
 const activeName = ref('roomType');
 
 const handleClick = (tab: TabsPaneContext, event: Event) => {