feat: 在线分享第一版-新增首页、新增国际化支持

components/default/Footer.vue

@@ -1,15 +1,69 @@
 <script setup lang="ts">
+import { useVueI18n } from "~/composables/useVueI18n"
+import { version } from "~/package.json"
+import { DateUtil } from "zhi-common"
+
+const { t } = useVueI18n()
+
 const color = useColorMode()
 const colorMode = computed({
   get: () => color.value === "dark",
   set: () => (color.preference = color.value === "dark" ? "light" : "dark"),
 })
+const toggleDark = () => {
+  colorMode.value = !colorMode.value
+}
+
+const v = ref(version)
+const nowYear = DateUtil.nowYear()
+
+const goGithub = () => {
+  window.open("https://github.com/terwer/siyuan-plugin-blog")
+}
+
+const goAbout = () => {
+  window.open("https://blog.terwer.space/about")
+}
 </script>
 
 <template>
   <div>
-    <el-switch v-model="colorMode" inline-prompt active-text="dark" inactive-text="light" size="large"></el-switch>
+    <div class="footer">
+      <div>
+        <span class="text"> &copy;2011-{{ nowYear }} </span>
+        <span class="text s-dark" @click="goGithub()">&nbsp;siyuan-plugin-blog&nbsp;</span>
+
+        <span class="text">v{{ v }}&nbsp;</span>
+
+        <span class="text s-dark" @click="goAbout()">{{ t("syp.about") }}</span>
+
+        <span class="text">.</span>
+        <span class="text s-dark" @click="toggleDark()">{{
+          colorMode ? t("theme.mode.light") : t("theme.mode.dark")
+        }}</span>
+      </div>
+
+      <!--
+       -----------------------------------------------------------------------------
+       -->
+    </div>
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.footer {
+  font-size: 12px;
+  color: #bbb;
+  text-align: center;
+  padding-bottom: 8px;
+}
+
+.footer .text {
+  vertical-align: middle;
+}
+
+.s-dark {
+  color: var(--el-color-primary);
+  cursor: pointer;
+}
+</style>

composables/useVueI18n.ts

@@ -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.
+ */
+
+import { normalize } from "pathe"
+
+/**
+ * 多语言封装，解决 CSP
+ *
+ * https://github.com/intlify/vue-i18n-next/issues/543
+ */
+export const useVueI18n = () => {
+  const { t } = useI18n()
+  return { t }
+}

i18n.config.ts

@@ -0,0 +1,11 @@
+import en_US from "~/locales/en_US"
+import zh_CN from "~/locales/zh_CN"
+
+export default defineI18nConfig(() => ({
+  legacy: false,
+  locale: "zh_CN",
+  messages: {
+    zh_CN,
+    en_US,
+  },
+}))

locales/en_US.ts

@@ -0,0 +1,47 @@
+/*
+ * 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.
+ */
+
+export default {
+  "syp.about": "About me",
+  "theme.mode.choose": "Mode",
+  "theme.mode.dark": "Dark mode",
+  "theme.mode.light": "Light mode",
+  "setting.conf.export": "Export config",
+  "setting.conf.import": "Import config",
+  "setting.conf.clear": "Clear config",
+  "setting.conf.transport": "Transport",
+  "main.opt.success": "Success",
+  "main.opt.failure": "Error",
+  "main.opt.edit": "Edit",
+  "main.opt.delete": "Delete",
+  "main.opt.loading": "In operation...",
+  "main.opt.warning": "Warn tips",
+  "main.opt.tip": "Kind tips",
+  "main.opt.ok": "Confirm",
+  "main.opt.cancel": "Cancel",
+  "main.opt.warning.tip": "This operation cannot be undone, continue?",
+  "switch.active.text": "Debug",
+  "switch.unactive.text": "Normal",
+}

locales/zh_CN.ts

@@ -0,0 +1,47 @@
+/*
+ * 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.
+ */
+
+export default {
+  "syp.about": "关于作者",
+  "theme.mode.choose": "切换模式",
+  "theme.mode.dark": "暗黑模式",
+  "theme.mode.light": "浅色模式",
+  "setting.conf.export": "导出配置",
+  "setting.conf.import": "导入配置",
+  "setting.conf.clear": "清空配置",
+  "setting.conf.transport": "导入导出",
+  "main.opt.success": "操作成功",
+  "main.opt.failure": "操作失败",
+  "main.opt.edit": "编辑",
+  "main.opt.delete": "删除",
+  "main.opt.loading": "操作中...",
+  "main.opt.warning": "警告信息",
+  "main.opt.tip": "温馨提示",
+  "main.opt.ok": "确认",
+  "main.opt.cancel": "取消",
+  "main.opt.warning.tip": "此操作不可恢复，是否继续？",
+  "switch.active.text": "调试模式",
+  "switch.unactive.text": "正常模式",
+}

nuxt.config.ts

@@ -59,6 +59,12 @@ export default defineNuxtConfig({
     enabled: true,
   },
 
+  i18n: {
+    // https://v8.i18n.nuxtjs.org/getting-started/basic-usage
+    // if you are using custom path, default
+    vueI18n: "./i18n.config.ts",
+  },
+
   app: {
     baseURL: appBase,
     head: {
@@ -93,7 +99,7 @@ export default defineNuxtConfig({
   css: ["~/assets/scss/index.scss"],
 
   // build modules
-  modules: ["@vueuse/nuxt", "@element-plus/nuxt", "@nuxtjs/color-mode"],
+  modules: ["@nuxtjs/i18n-edge", "@vueuse/nuxt", "@element-plus/nuxt", "@nuxtjs/color-mode"],
 
   // vueuse
   vueuse: {
@@ -117,6 +123,7 @@ export default defineNuxtConfig({
       },
     },
   },
+  // https://github.com/element-plus/element-plus-nuxt-starter/blob/main/nuxt.config.ts
   elementPlus: {
     icon: "ElIcon",
     importStyle: "scss",

package.json

@@ -1,6 +1,8 @@
 {
   "name": "siyuan-blog",
-  "private": true,
+  "version": "0.0.1",
+  "description": "The notions sharing function you want is here too",
+  "type": "module",
   "scripts": {
     "serve": "nuxt dev",
     "build": "pnpm pluginBuild && pnpm siyuanBuild",
@@ -16,6 +18,7 @@
     "@element-plus/nuxt": "^1.0.5",
     "@nuxt/devtools": "^0.6.0",
     "@nuxtjs/color-mode": "^3.2.0",
+    "@nuxtjs/i18n-edge": "8.0.0-beta.12-28113576.7bc33c3",
     "@terwer/esbuild-config-custom": "^1.0.12",
     "@terwer/eslint-config-custom": "^1.3.6",
     "@types/node": "^18",
@@ -32,6 +35,7 @@
     "@element-plus/icons-vue": "^2.1.0",
     "element-plus": "^2.3.6",
     "siyuan": "^0.7.4",
+    "zhi-common": "^1.11.0",
     "zhi-device": "^2.3.0",
     "zhi-lib-base": "^0.3.1"
   }

pages/about.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>
+    <h1>大家好，我是 <a href="https://github.saobby.my.eu.org.terwer" target="_blank">terwer</a> ， 一个后端老菜鸟。</h1>
+    <p>联系我：youweics@163.com</p>
+  </div>
+</template>
+
+<style scoped></style>

pages/index.vue

@@ -1,7 +1,15 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const goSetting = async () => {
+  await navigateTo("/setting")
+}
+</script>
 
 <template>
-  <div>index</div>
+  <div>
+    <el-empty description="啊哦，您还没设置自己的主页哟！">
+      <el-button type="primary" @click="goSetting">马上去设置我的主页</el-button>
+    </el-empty>
+  </div>
 </template>
 
 <style scoped></style>