feat: 在线分享第一版-自定义站点信息

app.config.ts

@@ -23,9 +23,13 @@
  * questions.
  */
 
-type ThemeType = "dark" | "light"
+type ThemeType = "system" | "dark" | "light"
 
 interface AppConfig {
+  siteTitle?: string
+  siteSlogan?: string
+  siteDescription?: string
+
   theme?: {
     mode?: ThemeType
     lightTheme?: string
@@ -37,8 +41,12 @@ interface AppConfig {
 }
 
 export default defineAppConfig<AppConfig>({
+  siteTitle: "浅海拾贝",
+  siteSlogan: "寻找未知的技术拼图",
+  siteDescription: "专注于Java后端开发及服务端、软件架构、微服务、自然语言处理等领域的技术分享。",
+
   theme: {
-    mode: "dark",
+    mode: "system",
     lightTheme: "Zhihu",
     darkTheme: "Zhihu",
   },

composables/useThemeMode.ts

@@ -117,23 +117,12 @@ export const useThemeMode = async () => {
   }
 
   // 设置主题模式
-  const setThemeMode = (isDarkMode: boolean, isDelay = false) => {
+  const setThemeMode = (isDarkMode: boolean) => {
     if (BrowserUtil.isInBrowser) {
-      // 使用 setTimeout 确保在 CSS 加载完成后再执行函数
-      const waitTime = parseInt(env.public.waitTime ?? 500)
-      if (isDelay) {
-        setTimeout(() => {
-          setCssAndThemeMode(isDarkMode)
-          // 记录日志
-          logger.debug(isDarkMode ? "Browser Dark Mode" : "Browser Light Mode")
-          logger.info(`Auto set mode, isDark => ${isDarkMode}`)
-        }, waitTime)
-      } else {
-        setCssAndThemeMode(isDarkMode)
-        // 记录日志
-        logger.debug(isDarkMode ? "Browser Dark Mode" : "Browser Light Mode")
-        logger.info(`Auto set mode, isDark => ${isDarkMode}`)
-      }
+      setCssAndThemeMode(isDarkMode)
+      // 记录日志
+      logger.debug(isDarkMode ? "Browser Dark Mode" : "Browser Light Mode")
+      logger.info(`Auto set mode, isDark => ${isDarkMode}`)
     }
 
     color.preference = isDarkMode ? "dark" : "light"

pages/about.vue

@@ -1,8 +1,12 @@
 <script setup lang="ts">
+import { useSettingStore } from "~/stores/useSettingStore"
+
 const { t } = useI18n()
+const { getSetting } = useSettingStore()
 
+const setting = await getSetting()
 const seoMeta = {
-  title: `${t("syp.about")} - ${t("blog.site.title")}`,
+  title: `${t("syp.about")} - ${setting?.siteTitle ?? t("blog.site.title")}`,
   ogTitle: t("syp.about"),
   description: t("syp.about.desc"),
   ogDescription: t("syp.about.desc"),

pages/index.vue

@@ -1,6 +1,19 @@
 <script setup lang="ts">
+import { useSettingStore } from "~/stores/useSettingStore"
+
 const { t } = useI18n()
+const { getSetting } = useSettingStore()
+
+const setting = await getSetting()
+const seoMeta = {
+  title: `${setting?.siteTitle ?? t("blog.site.title")} -${setting?.siteSlogan ?? t("blog.site.slogan")}`,
+  ogTitle: t("syp.about"),
+  description: t("syp.about.desc"),
+  ogDescription: t("syp.about.desc"),
+} as any
+useSeoMeta(seoMeta)
 
+// methods
 const goSetting = async () => {
   await navigateTo("/setting")
 }

stores/common/useCommonStorageAsync.ts

@@ -26,18 +26,22 @@
 import CommonStorage from "~/stores/common/commonStorage"
 import { StorageSerializers } from "@vueuse/core"
 import { createAppLogger } from "~/common/appLogger"
+import { ObjectUtil, StrUtil } from "zhi-common"
 
 /**
  * https://vueuse.org/core/useStorageAsync/
  *
- * @param storageKey
+ * @param storageKey - 存储key
+ * @param initialValue - 默认值
  */
-export const useCommonStorageAsync = <T extends string | number | boolean | object | null>(storageKey: string) => {
+export const useCommonStorageAsync = <T extends string | number | boolean | object | null>(
+  storageKey: string,
+  initialValue: T
+) => {
   const logger = createAppLogger("common-storage-async")
   const commonStorage = new CommonStorage(storageKey)
 
   // 获取 initialValue 类型对应的序列化器，如果不存在则使用默认序列化器
-  const initialValue = {} as T
   const rawInit: T = toValue(initialValue)
   const type = guessSerializerType<T>(rawInit) as
     | "boolean"
@@ -54,9 +58,17 @@ export const useCommonStorageAsync = <T extends string | number | boolean | obje
   // 定义 commonStore 对象
   const commonStore = {
     async get(): Promise<T> {
+      logger.debug("Fetching data from common storage...")
       const rawValue = (await commonStorage.getItem(commonStorage.key)) ?? "{}"
-      const ret = await serializer.read(rawValue)
-      return ret ?? {}
+      let ret = (await serializer.read(rawValue)) ?? {}
+
+      if (ObjectUtil.isEmptyObject(ret)) {
+        logger.info("Initial data not found in common storage. Setting initial value...")
+        await commonStorage.setItem(commonStorage.key, serializer.write(initialValue))
+        logger.info("Initial value set:", initialValue)
+        ret = initialValue
+      }
+      return ret
     },
     async set(value: T): Promise<void> {
       await commonStorage.setItem(commonStorage.key, serializer.write(value))

stores/useSettingStore.ts

@@ -10,12 +10,30 @@ import { useCommonStorageAsync } from "~/stores/common/useCommonStorageAsync"
 export const useSettingStore = defineStore("setting", () => {
   const logger = createAppLogger("use-setting-store")
   const storageKey = "/data/storage/petal/siyuan-blog/app.config.json"
-  const { commonStore } = useCommonStorageAsync<typeof AppConfig>(storageKey)
+  const initialValue = AppConfig
+  const { commonStore } = useCommonStorageAsync<typeof AppConfig>(storageKey, initialValue)
+  const settingRef = ref<typeof AppConfig | null>(null)
 
-  const getSetting = async (): Promise<typeof AppConfig> => {
+  const getSettingRef = computed(async () => {
     const setting = await commonStore.get()
     logger.info("get data from setting=>", setting)
+    settingRef.value = setting
     return setting
+  })
+
+  /**
+   * 获取配置
+   */
+  const getSetting = async (): Promise<typeof AppConfig> => {
+    if (settingRef.value === null) {
+      logger.info("Setting not initialized. Initializing now...")
+      // 如果设置还没有被初始化，则调用 getSettingRef 函数
+      const setting = getSettingRef.value
+      logger.info(`Loaded setting from remote api`)
+      return setting ?? {}
+    }
+    logger.info(`Loaded setting from cached.`)
+    return settingRef.value ?? {}
   }
 
   /**
@@ -26,6 +44,7 @@ export const useSettingStore = defineStore("setting", () => {
   const updateSetting = async (setting: Partial<typeof AppConfig>) => {
     logger.info("update setting=>", setting)
     await commonStore.set(setting)
+    settingRef.value = { ...settingRef.value, ...setting }
   }
 
   return { getSetting, updateSetting }