refactor: 代码优化和注释完善

Former-commit-id: b68eb53030dd468534d49e64ea5f6c3bb834f1f8

src/components/Screenfull/index.vue

@@ -1,3 +1,7 @@
+<script setup lang="ts">
+const { isFullscreen, toggle } = useFullscreen();
+</script>
+
 <template>
   <div>
     <svg-icon
@@ -6,7 +10,3 @@
     />
   </div>
 </template>
-
-<script setup lang="ts">
-const { isFullscreen, toggle } = useFullscreen();
-</script>

src/lang/index.ts

@@ -1,9 +1,10 @@
-// 自定义国际化配置
 import { createI18n } from 'vue-i18n';
+import { useAppStore } from '@/store/modules/app';
 
+const appStore = useAppStore();
 // 本地语言包
-import enLocale from './en';
+import enLocale from './package/en';
-import zhCnLocale from './zh-cn';
+import zhCnLocale from './package/zh-cn';
 
 const messages = {
   'zh-cn': {
@@ -14,31 +15,9 @@ const messages = {
   }
 };
 
-/**
- * 获取当前系统使用语言字符串
- *
- * @returns zh-cn|en ...
- */
-export const getLanguage = () => {
-  // 本地缓存获取
-  let language = localStorage.getItem('language');
-  if (language) {
-    return language;
-  }
-  // 浏览器使用语言
-  language = navigator.language.toLowerCase();
-  const locales = Object.keys(messages);
-  for (const locale of locales) {
-    if (language.indexOf(locale) > -1) {
-      return locale;
-    }
-  }
-  return 'zh-cn';
-};
-
 const i18n = createI18n({
   legacy: false,
-  locale: getLanguage(),
+  locale: appStore.language,
   messages: messages
 });
 

src/layout/components/Settings/index.vue

@@ -29,6 +29,9 @@ const themeColors = ref<string[]>([
   '#f5222d'
 ]);
 
+/**
+ * 切换主题颜色
+ */
 function changeThemeColor(color: string) {
   document.documentElement.style.setProperty('--el-color-primary', color);
   settingsStore.changeSetting({ key: 'layout', value: color });

src/main.ts

@@ -13,8 +13,8 @@ import 'virtual:svg-icons-register';
 import i18n from '@/lang/index';
 
 // 样式
-import '@/styles/index.scss';
 import 'element-plus/theme-chalk/dark/css-vars.css';
+import '@/styles/index.scss';
 import 'uno.css';
 
 const app = createApp(App);

src/store/modules/app.ts

@@ -2,14 +2,13 @@ import { defineStore } from 'pinia';
 import { useStorage } from '@vueuse/core';
 import defaultSettings from '@/settings';
 
-// Element Plus 语言包
+// 导入 Element Plus 中英文语言包
 import zhCn from 'element-plus/es/locale/lang/zh-cn';
 import en from 'element-plus/es/locale/lang/en';
 
 // setup
 export const useAppStore = defineStore('app', () => {
   // state
-
   const device = useStorage('device', 'desktop');
   const size = useStorage<any>('size', defaultSettings.size);
   const language = useStorage('language', defaultSettings.language);
@@ -20,6 +19,9 @@ export const useAppStore = defineStore('app', () => {
     withoutAnimation: false
   });
 
+  /**
+   * 根据语言标识读取对应的语言包
+   */
   const locale = computed(() => {
     if (language?.value == 'en') {
       return en;
@@ -58,7 +60,11 @@ export const useAppStore = defineStore('app', () => {
   function changeSize(val: string) {
     size.value = val;
   }
-
+  /**
+   * 切换语言
+   *
+   * @param val
+   */
   function changeLanguage(val: string) {
     language.value = val;
   }