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)