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/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) => {