refactor: 多语言切换

src/App.vue

@@ -30,7 +30,7 @@ import AppLayout from "~/src/layouts/AppLayout.vue"
 import "~/src/assets/style.css"
 import "~/src/assets/style.dark.css"
 import { inject } from "vue"
-import { InjectKeys } from "~/src/utils/inject-keys.ts"
+import { InjectKeys } from "~/src/utils/injectKeys.ts"
 
 // Vue 实例
 // const vueInstance = inject(InjectKeys.VUE_INSTANCE)

src/components/publish/PublishIndex.vue

@@ -24,10 +24,10 @@
   -->
 
 <script setup lang="ts">
-import { createLogger } from "~/src/utils/simple-logger.ts"
+import { createLogger } from "~/src/utils/simpleLogger.ts"
 import { inject, onBeforeMount } from "vue"
-import { InjectKeys } from "~/src/utils/inject-keys.ts"
-import { AppInstance } from "~/src/app-instance.ts"
+import { InjectKeys } from "~/src/utils/injectKeys.ts"
+import { AppInstance } from "~/src/appInstance.ts"
 import { Utils } from "~/src/utils/utils.ts"
 import { SiYuanApiAdaptor, SiyuanConfig } from "zhi-siyuan-api"
 

src/components/set/GeneralSetting.vue

@@ -0,0 +1,36 @@
+<!--
+  - Copyright (c) 2023, Terwer . All rights reserved.
+  - DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
+  -
+  - This code is free software; you can redistribute it and/or modify it
+  - under the terms of the GNU General Public License version 2 only, as
+  - published by the Free Software Foundation.  Terwer designates this
+  - particular file as subject to the "Classpath" exception as provided
+  - by Terwer in the LICENSE file that accompanied this code.
+  -
+  - This code is distributed in the hope that it will be useful, but WITHOUT
+  - ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  - FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License
+  - version 2 for more details (a copy is included in the LICENSE file that
+  - accompanied this code).
+  -
+  - You should have received a copy of the GNU General Public License version
+  - 2 along with this work; if not, write to the Free Software Foundation,
+  - Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
+  -
+  - Please contact Terwer, Shenzhen, Guangdong, China, youweics@163.com
+  - or visit www.terwer.space if you need additional information or have any
+  - questions.
+  -->
+
+<script setup lang="ts">
+import ChangeLocal from "~/src/components/set/preference/ChangeLocal.vue"
+</script>
+
+<template>
+  <div class="general-setting">
+    <change-local />
+  </div>
+</template>
+
+<style scoped></style>

src/components/set/SetIndex.vue

@@ -0,0 +1,41 @@
+<!--
+  - Copyright (c) 2023, Terwer . All rights reserved.
+  - DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
+  -
+  - This code is free software; you can redistribute it and/or modify it
+  - under the terms of the GNU General Public License version 2 only, as
+  - published by the Free Software Foundation.  Terwer designates this
+  - particular file as subject to the "Classpath" exception as provided
+  - by Terwer in the LICENSE file that accompanied this code.
+  -
+  - This code is distributed in the hope that it will be useful, but WITHOUT
+  - ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  - FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License
+  - version 2 for more details (a copy is included in the LICENSE file that
+  - accompanied this code).
+  -
+  - You should have received a copy of the GNU General Public License version
+  - 2 along with this work; if not, write to the Free Software Foundation,
+  - Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
+  -
+  - Please contact Terwer, Shenzhen, Guangdong, China, youweics@163.com
+  - or visit www.terwer.space if you need additional information or have any
+  - questions.
+  -->
+
+<script setup lang="ts">
+import GeneralSetting from "~/src/components/set/GeneralSetting.vue"
+import { useVueI18n } from "~/src/composables/useVueI18n.ts"
+
+const { t } = useVueI18n()
+</script>
+
+<template>
+  <el-tabs tab-position="left">
+    <el-tab-pane :label="t('service.tab.change.local')">
+      <general-setting />
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<style scoped></style>

src/components/set/preference/ChangeLocal.vue

@@ -0,0 +1,71 @@
+<!--
+  - Copyright (c) 2023, Terwer . All rights reserved.
+  - DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
+  -
+  - This code is free software; you can redistribute it and/or modify it
+  - under the terms of the GNU General Public License version 2 only, as
+  - published by the Free Software Foundation.  Terwer designates this
+  - particular file as subject to the "Classpath" exception as provided
+  - by Terwer in the LICENSE file that accompanied this code.
+  -
+  - This code is distributed in the hope that it will be useful, but WITHOUT
+  - ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  - FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License
+  - version 2 for more details (a copy is included in the LICENSE file that
+  - accompanied this code).
+  -
+  - You should have received a copy of the GNU General Public License version
+  - 2 along with this work; if not, write to the Free Software Foundation,
+  - Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
+  -
+  - Please contact Terwer, Shenzhen, Guangdong, China, youweics@163.com
+  - or visit www.terwer.space if you need additional information or have any
+  - questions.
+  -->
+
+<script setup lang="ts">
+import { onMounted } from "vue"
+import { useVueI18n } from "~/src/composables/useVueI18n.ts"
+import configUtil from "~/src/stores/configUtil.ts"
+import { ConfigKeys } from "~/src/stores/configKeys.ts"
+
+const { t, locale } = useVueI18n()
+const langs = [
+  {
+    value: "zh_CN",
+    label: "简体中文",
+  },
+  {
+    value: "en_US",
+    label: "English",
+  },
+]
+
+const langChanged = async (lang) => {
+  locale.value = lang
+  await configUtil.setConf(ConfigKeys.LANG_KEY, lang)
+}
+
+onMounted(async () => {
+  // 设置默认语言
+  const defaultLang = await configUtil.getConf(ConfigKeys.LANG_KEY)
+  if (defaultLang !== "") {
+    locale.value = defaultLang
+  }
+})
+</script>
+
+<template>
+  <div class="locale-changer">
+    <el-form label-width="150px">
+      <!-- 语言选项 -->
+      <el-form-item :label="t('lang.choose')">
+        <el-select v-model="locale" :placeholder="t('lang.choose.placeholder')" @change="langChanged">
+          <el-option v-for="(lang, i) in langs" :key="i" :label="lang.label" :value="lang.value" />
+        </el-select>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<style scoped></style>

src/composables/useVueI18n.ts

@@ -30,11 +30,12 @@ import { useI18n } from "vue-i18n"
  * https://github.com/intlify/vue-i18n-next/issues/543
  */
 export const useVueI18n = () => {
+  const { messages, locale } = useI18n()
+
   const translate = (key) => {
-    const { messages, locale } = useI18n()
     const localeMessages = messages.value?.[locale.value]
     return localeMessages[key] || key
   }
 
-  return { t: translate }
+  return { t: translate, locale }
 }

src/layouts/default/DefaultFooter.vue

@@ -59,11 +59,6 @@
         -->
         <!-- 思源地址设置弹窗 -->
 
-        <!-- 导入导出弹窗 -->
-        <el-dialog v-model="transportFormVisible" :title="t('setting.conf.transport')">
-          <transport-select />
-        </el-dialog>
-
         <!-- 通用设置弹窗 -->
         <el-dialog v-model="generalSettingFormVisible" :title="t('setting.blog.index')">
           <set-index />
@@ -77,9 +72,10 @@
 import { useDark, useToggle } from "@vueuse/core"
 import { ref } from "vue"
 import { version } from "../../../package.json"
-import { createLogger } from "~/src/utils/simple-logger.ts"
+import { createLogger } from "~/src/utils/simpleLogger.ts"
 import { useVueI18n } from "~/src/composables/useVueI18n.ts"
 import { Utils } from "~/src/utils/utils.ts"
+import SetIndex from "~/src/components/set/SetIndex.vue"
 
 const logger = createLogger("layouts/default/DefaultFooter")
 const common = Utils.zhiCommon()

src/layouts/default/DefaultHeader.vue

@@ -28,7 +28,7 @@
 </template>
 
 <script lang="ts" setup>
-import { createLogger } from "~/src/utils/simple-logger"
+import { createLogger } from "~/src/utils/simpleLogger.ts"
 import { useVueI18n } from "~/src/composables/useVueI18n.ts"
 
 const { t } = useVueI18n()

src/loader.ts

@@ -23,12 +23,12 @@
  * questions.
  */
 
-import { AppInstance } from "~/src/app-instance.ts"
+import { AppInstance } from "~/src/appInstance.ts"
 import { DeviceDetection, DeviceTypeEnum, SiyuanDevice } from "zhi-device"
 import { Env } from "zhi-env"
 import { crossChalk, LogFactory } from "zhi-log"
 import { ZhiCommon, ZhiUtil } from "zhi-common"
-import {BlogAdaptor, BlogApi, BlogConstants, BlogTypeEnum} from "zhi-blog-api"
+import { BlogAdaptor, BlogApi, BlogConstants, BlogTypeEnum } from "zhi-blog-api"
 import { SiYuanApiAdaptor, SiyuanConfig, SiyuanConstants, SiyuanKernelApi } from "zhi-siyuan-api"
 
 export const initLibs = async (appInstance: AppInstance) => {

src/main.ts

@@ -25,24 +25,26 @@
 
 import { createApp } from "vue"
 import App from "./App.vue"
-import { createLogger } from "./utils/simple-logger.ts"
+import { createLogger } from "./utils/simpleLogger.ts"
 import { useRouter } from "./composables/useRouter.ts"
 // 国际化
 import i18n from "~/src/locales"
 
 // Element-Plus
+import ElementPlus from "element-plus"
 import "element-plus/dist/index.css"
 import "element-plus/theme-chalk/dark/css-vars.css"
 
-import { InjectKeys } from "~/src/utils/inject-keys.ts"
-import { AppInstance } from "~/src/app-instance.ts"
+import { InjectKeys } from "~/src/utils/injectKeys.ts"
+import { AppInstance } from "~/src/appInstance.ts"
 
 /**
  * 初始化 Vue 实例
  */
 ;(async () => {
   const logger = createLogger("vue-main-entry")
 
+  // https://stackoverflow.com/a/62383325/4037224
   const app = createApp(App)
 
   // 国际化
@@ -57,6 +59,9 @@ import { AppInstance } from "~/src/app-instance.ts"
   await appInstance.init()
   app.provide(InjectKeys.APP_INSTANCE, appInstance)
 
+  // ElementPlus
+  app.use(ElementPlus)
+
   // 挂载 vue app
   app.mount("#app")
 

src/stores/configKeys.ts

@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2023, Terwer . All rights reserved.
+ * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
+ *
+ * This code is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License version 2 only, as
+ * published by the Free Software Foundation.  Terwer designates this
+ * particular file as subject to the "Classpath" exception as provided
+ * by Terwer in the LICENSE file that accompanied this code.
+ *
+ * This code is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License
+ * version 2 for more details (a copy is included in the LICENSE file that
+ * accompanied this code).
+ *
+ * You should have received a copy of the GNU General Public License version
+ * 2 along with this work; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
+ *
+ * Please contact Terwer, Shenzhen, Guangdong, China, youweics@163.com
+ * or visit www.terwer.space if you need additional information or have any
+ * questions.
+ */
+
+/**
+ * 配置通用 key ， 注意：必须全局唯一
+ *
+ * @version 0.9.0
+ * @since 0.0.1
+ */
+export enum ConfigKeys {
+  LANG_KEY = "lang",
+}

src/stores/configUtil.ts

@@ -0,0 +1,77 @@
+/*
+ * Copyright (c) 2023, Terwer . All rights reserved.
+ * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
+ *
+ * This code is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License version 2 only, as
+ * published by the Free Software Foundation.  Terwer designates this
+ * particular file as subject to the "Classpath" exception as provided
+ * by Terwer in the LICENSE file that accompanied this code.
+ *
+ * This code is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License
+ * version 2 for more details (a copy is included in the LICENSE file that
+ * accompanied this code).
+ *
+ * You should have received a copy of the GNU General Public License version
+ * 2 along with this work; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
+ *
+ * Please contact Terwer, Shenzhen, Guangdong, China, youweics@163.com
+ * or visit www.terwer.space if you need additional information or have any
+ * questions.
+ */
+
+import { getLocalStorageAdaptor } from "~/src/stores/localStorageAdaptor.ts"
+import { createLogger } from "~/src/utils/simpleLogger.ts"
+import { toRaw } from "vue"
+
+const logger = createLogger("localstorage-config")
+
+/**
+ * 获取配置：这个是所有数据保存的根方法
+ *
+ * @param key key
+ */
+export const getConf = async (key: string): Promise<string> => {
+  logger.debug("尝试从localStorage获取数据，key=>", key)
+
+  const store = await getLocalStorageAdaptor()
+  const value = store.getItem(key)
+  if (!value) {
+    logger.error("未找到对应数据，key=>", key)
+    return ""
+  }
+  logger.debug("从localStorage获取数据=>", value)
+  return value
+}
+
+/**
+ * 保存配置：这个是所有数据保存的根方法
+ *
+ * @param key
+ * @param value
+ * @author terwer
+ * @version 0.9.0
+ * @since 0.0.1
+ */
+const setConf = async (key: string, value: string): Promise<void> => {
+  if (!value || value === "") {
+    logger.warn("空值，不保存")
+    return
+  }
+
+  logger.debug("尝试保存数据到localStorage里key=>", key)
+  logger.debug("保存数据到localStorage=>", value)
+
+  const store = await getLocalStorageAdaptor()
+  store.setItem(key, value)
+}
+
+const configUtil = {
+  setConf,
+  getConf,
+}
+
+export default configUtil