feat: switching languages

src/directive/sidebarDraggable.ts

@@ -9,7 +9,7 @@ export const draggable = {
       const newWidth = startWidth + (event.clientX - startX);
 
       // 确保宽度在合理范围内
-      if (newWidth >= 240 && newWidth <= 600) {
+      if (newWidth >= 300 && newWidth <= 600) {
         el.style.width = `${newWidth}px`;
 
         // 更新传递的 ref 变量

src/languages/modules/en.ts

@@ -11,16 +11,19 @@ export default {
   General: 'General',
   GUI: 'GUI',
   CLI: 'CLI',
+  Search: 'Search',
   'Web Terminal': 'Web Terminal',
   'Theme Reset': 'The theme color has been reset to',
   'Custom Setting': 'Custom Setting',
-  'Dark Mode': '黑暗模式',
+  'Dark Mode': 'Dark Mode',
   'Theme Settings': 'Theme Settings',
   'Language Settings': 'Language Settings',
   'Page Configuration': 'Page Configuration',
   'Please Select': 'Please Select',
   'Language Selection': 'Language Selection',
   'Asset Async': 'Asynchronous loading',
+  'Asset Tree': 'Asset Tree',
+  'Asset Type': 'Asset Type',
   'Asset Async Explain': 'Whether assets are loaded asynchronously',
   'Primary Color': 'Primary Color'
 };

src/languages/modules/zh.ts

@@ -11,6 +11,7 @@ export default {
   General: '通用配置',
   GUI: '图形化配置',
   CLI: '命令行配置',
+  Search: '搜索',
   'Web Terminal': 'Web 终端',
   'Theme Reset': '主题颜色已重置为',
   'Custom Setting': '自定义设置',
@@ -20,6 +21,8 @@ export default {
   'Page Configuration': '页面配置',
   'Please Select': '请选择',
   'Asset Async': '异步加载',
+  'Asset Tree': '资产树',
+  'Asset Type': '类型数',
   'Asset Async Explain': '是否异步加载资产',
   'Language Selection': '语言选择',
   'Primary Color': '主题颜色'

src/layouts/components/FileManagement/index.vue

@@ -1,6 +1,6 @@
 <template>
   <n-tabs type="segment" animated>
-    <n-tab-pane name="chap1" tab="资产树">
+    <n-tab-pane name="chap1" :tab="t('Asset Tree')">
       <n-input v-model:value="pattern" placeholder="搜索" />
       <n-tree
         checkable
@@ -14,8 +14,8 @@
         :on-update:expanded-keys="updatePrefixWithExpaned"
       />
     </n-tab-pane>
-    <n-tab-pane name="chap2" tab="类型树">
-      <n-input v-model:value="pattern" placeholder="搜索" />
+    <n-tab-pane name="chap2" :tab="t('Asset Type')">
+      <n-input v-model:value="pattern" :placeholder="t('Search')" />
       <n-tree
         block-line
         :pattern="pattern"
@@ -29,16 +29,20 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, h, onUnmounted, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { storeToRefs } from 'pinia';
 import { getTreeSource } from '@/API/modules/tree';
 import { useTreeStore } from '@/stores/modules/tree.ts';
 import { useMessage, NIcon, TreeOption } from 'naive-ui';
+import { reactive, ref, h, onUnmounted, onMounted } from 'vue';
 import { Folder, FolderOpenOutline, FileTrayFullOutline } from '@vicons/ionicons5';
-import mittBus from '@/utils/mittBus.ts';
+
 import type { Tree } from '@/API/interface';
 
+import mittBus from '@/utils/mittBus.ts';
+
 const treeStore = useTreeStore();
+const { t } = useI18n();
 const { isAsync } = storeToRefs(treeStore);
 
 const message = useMessage();

src/layouts/components/SettingDrawer/index.vue

@@ -1,5 +1,12 @@
 <template>
-  <n-drawer v-model:show="showSettingDrawer" :default-width="290" placement="right" resizable>
+  <n-drawer
+    resizable
+    placement="right"
+    :width="defaultWidth"
+    v-model:show="showSettingDrawer"
+    :default-width="defaultWidth"
+    style="transition: width 0.7s ease-in-out"
+  >
     <n-drawer-content :title="t('Custom Setting')" class="drawer-content" closable>
       <n-divider> {{ t('Theme Settings') }} </n-divider>
       <n-flex>
@@ -38,7 +45,6 @@
             v-model:value="pageOptionValue"
             :options="pageOptions"
             :placeholder="t('Please Select')"
-            @update-value="handlePageConfigurationChange"
           />
         </n-flex>
       </n-flex>
@@ -64,9 +70,10 @@ import { useI18n } from 'vue-i18n';
 import { storeToRefs } from 'pinia';
 import { SelectOption } from 'naive-ui';
 import { useTheme } from '@/hooks/useTheme.ts';
-import { onBeforeUnmount, reactive, ref } from 'vue';
+import { useTranslations } from '@/hooks/useTranslate';
 import { useTreeStore } from '@/stores/modules/tree.ts';
 import { useGlobalStore } from '@/stores/modules/global.ts';
+import { watch, onBeforeUnmount, reactive, ref } from 'vue';
 
 import mittBus from '@/utils/mittBus.ts';
 import {
@@ -76,8 +83,13 @@ import {
   ArrowForwardCircleOutline
 } from '@vicons/ionicons5';
 
+interface CustomSelectOption extends SelectOption {
+  onClick?: () => void;
+}
+
 const treeStore = useTreeStore();
 const globalStore = useGlobalStore();
+const { updateTranslations } = useTranslations();
 
 const { t } = useI18n();
 const { switchDark } = useTheme();
@@ -86,24 +98,12 @@ const { isAsync } = storeToRefs(treeStore);
 
 const darkModeActive = isDark;
 const assetAsyncActive = isAsync;
-const showSettingDrawer = ref<Boolean>(false);
 
-const handleDarkModeChange = (value: Boolean) => {
-  globalStore.setGlobalState('isDark', value);
-  switchDark();
-};
-const handleAssetAsyncChange = (value: Boolean) => {
-  treeStore.changeState(value);
-  mittBus.emit('tree-load');
-};
-
-const handlePageConfigurationChange = (value: string, option: SelectOption) => {
-  console.log(value);
-  console.log(option);
-};
+const showSettingDrawer = ref<Boolean>(false);
+const defaultWidth = ref(globalStore.language === 'en' ? 390 : 300);
 
-const pageOptionValue = ref('');
-const languageOptionValue = ref('');
+const pageOptionValue = ref();
+const languageOptionValue = ref(globalStore.language);
 const pageOptions = reactive([
   {
     label: t('General'),
@@ -121,22 +121,61 @@ const pageOptions = reactive([
 const languageOptions = reactive([
   {
     label: 'English',
-    value: 'General'
+    value: 'en',
+    onClick: () => {
+      globalStore.setGlobalState('language', 'en');
+      updateTranslations('en');
+    }
   },
   {
     label: '中文',
-    value: 'Chinese'
+    value: 'zh',
+    onClick: () => {
+      globalStore.setGlobalState('language', 'zh');
+      updateTranslations('zh');
+    }
   },
   {
     label: '中文(繁體)',
-    value: 'Chinese-hant'
+    value: 'zh-hant',
+    onClick: () => {
+      globalStore.setGlobalState('language', 'zh-hant');
+      updateTranslations('zh-hant');
+    }
   },
   {
     label: '日本語',
-    value: 'Japanese'
+    value: 'ja',
+    onClick: () => {
+      globalStore.setGlobalState('language', 'ja');
+      updateTranslations('ja');
+    }
   }
 ]);
 
+const handleDarkModeChange = (value: Boolean) => {
+  globalStore.setGlobalState('isDark', value);
+  switchDark();
+};
+const handleAssetAsyncChange = (value: Boolean) => {
+  treeStore.changeState(value);
+  mittBus.emit('tree-load');
+};
+
+/* eslint-disable-next-line no-unused-vars */
+const handlePageConfigurationChange = (value: string, option: CustomSelectOption) => {
+  if (option.onClick) {
+    option.onClick();
+  }
+};
+
+watch(
+  () => globalStore.language,
+  newLang => {
+    defaultWidth.value = newLang === 'en' ? 390 : 290;
+  }
+);
+
 mittBus.on('open-setting-drawer', () => {
   showSettingDrawer.value = true;
 });
@@ -159,12 +198,14 @@ onBeforeUnmount(() => {
       margin-top: 15px;
     }
     .page-setting {
+      flex-wrap: nowrap;
       margin-top: 15px;
       .n-select {
         width: 150px;
       }
     }
     .language-setting {
+      flex-wrap: nowrap;
       .n-select {
         width: 150px;
       }

src/layouts/index.vue

@@ -38,7 +38,7 @@ import SettingDrawer from './components/SettingDrawer/index.vue';
 import { useLoadingStore } from '@/stores/modules/loading.ts';
 import mittBus from '@/utils/mittBus.ts';
 
-const sideWidth = ref(240);
+const sideWidth = ref(300);
 const isCollapsed = ref(false);
 const languageLoaded = ref(false);
 
@@ -55,7 +55,7 @@ const handleTriggerClick = () => {
   isCollapsed.value = !isCollapsed.value;
 
   if (!isCollapsed.value) {
-    sideWidth.value = 240;
+    sideWidth.value = 300;
   }
 };