vitepress-plugin-announcement 0.1.1 → 0.1.3

package/README.md

@@ -4,6 +4,7 @@
 
 ![](https://cdn.upyun.sugarat.top/mdImg/sugar/7af94a65e3b4dd05e61e3411daba7fdd)
 
+*介绍文章：[VitePress 公告插件开发实记](https://sugarat.top/technology/works/vitepress-plugin-announcement.html) · [archive](https://web.archive.org/web/20240921095008/https://sugarat.top/technology/works/vitepress-plugin-announcement.html) · [translated](https://sugarat-top.translate.goog/technology/works/vitepress-plugin-announcement.html?_x_tr_sl=zh-CN&_x_tr_tl=en&_x_tr_hl=zh-CN&_x_tr_pto=wapp)*
 ## 使用
 安装依赖 `pnpm/npm/yarn`
 ```sh
@@ -187,6 +188,11 @@ export interface AnnouncementOptions {
    * @param to 切换到的目标路由
    */
   onRouteChanged?: (to: Route, show: Ref<boolean>) => void
+
+  /**
+   * 国际化
+   */
+  locales?: Record<string, Omit<AnnouncementOptions, 'locales'>>
 }
 
 export declare namespace Announcement {

package/dist/components/Announcement.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { computed, h, onMounted, ref, watch } from 'vue'
-import { useRoute, useRouter } from 'vitepress'
+import { computed, h, ref, watch } from 'vue'
+import { useData, useRoute, useRouter } from 'vitepress'
 import type { Announcement, AnnouncementOptions } from 'vitepress-plugin-announcement'
 
 // @ts-expect-error
@@ -9,26 +9,28 @@ import AnnouncementButton from './AnnouncementButton.vue'
 import AnnouncementIcon from './AnnouncementIcon.vue'
 import { inBrowser, parseStringStyle, useDebounceFn, useWindowSize } from './util'
 
-const popoverProps: AnnouncementOptions = announcementOptions
+const { localeIndex } = useData()
 
-const show = ref((popoverProps?.duration ?? 0) >= 0)
+const popoverProps = computed<AnnouncementOptions>(() => ({ ...announcementOptions, ...announcementOptions?.locales?.[localeIndex.value] }))
+
+const show = ref((popoverProps.value?.duration ?? 0) >= 0)
 
 const bodyContent = computed(() => {
-  return popoverProps?.body || []
+  return popoverProps.value?.body || []
 })
 
 const footerContent = computed(() => {
-  return popoverProps?.footer || []
+  return popoverProps.value?.footer || []
 })
-const storageKey = 'vitepress-plugin-announcement'
-const closeFlag = `${storageKey}-close`
+const storageKey = computed(() => `vitepress-plugin-announcement-${localeIndex.value}`)
+const closeFlag = computed(() => `${storageKey.value}-close`)
 
 // 移动端最小化
 const { width } = useWindowSize()
 const router = useRouter()
 const route = useRoute()
-onMounted(() => {
-  if (!popoverProps?.title) {
+watch(popoverProps, () => {
+  if (!popoverProps.value?.title) {
     return
   }
 
@@ -37,50 +39,50 @@ onMounted(() => {
   }
 
   // 取旧值
-  const oldValue = localStorage.getItem(storageKey)
-  const newValue = JSON.stringify(popoverProps)
-  localStorage.setItem(storageKey, newValue)
+  const oldValue = localStorage.getItem(storageKey.value)
+  const newValue = JSON.stringify(popoverProps.value)
+  localStorage.setItem(storageKey.value, newValue)
 
   // 移动端最小化
-  if (width.value < 768 && popoverProps?.mobileMinify) {
+  if (width.value < 768 && popoverProps.value?.mobileMinify) {
     show.value = false
     return
   }
 
   // >= 0 每次都展示，区别是否自动消失
-  if (Number(popoverProps?.duration ?? '') >= 0) {
+  if (Number(popoverProps.value?.duration ?? '') >= 0) {
     show.value = true
-    if (popoverProps?.duration) {
+    if (popoverProps.value?.duration) {
       setTimeout(() => {
         show.value = false
-      }, popoverProps?.duration)
+      }, popoverProps.value?.duration)
     }
     return
   }
 
-  if (oldValue !== newValue && popoverProps?.duration === -1) {
+  if (oldValue !== newValue && popoverProps.value?.duration === -1) {
     // 当做新值处理
     show.value = true
-    localStorage.removeItem(closeFlag)
+    localStorage.removeItem(closeFlag.value)
     return
   }
 
   // 新旧相等，判断是否点击过close，没点击关闭依然展示
-  if (oldValue === newValue && popoverProps?.duration === -1 && !localStorage.getItem(closeFlag)) {
+  if (oldValue === newValue && popoverProps.value?.duration === -1 && !localStorage.getItem(closeFlag.value)) {
     show.value = true
   }
-})
+}, { immediate: true })
 
 const onAfterRouteChanged = useDebounceFn(() => {
-  popoverProps?.onRouteChanged?.(route, show)
+  popoverProps.value?.onRouteChanged?.(route, show)
 }, 10)
 
 watch(route, onAfterRouteChanged, { immediate: true })
 
 function handleClose() {
   show.value = false
-  if (popoverProps?.duration === -1) {
-    localStorage.setItem(closeFlag, `${+new Date()}`)
+  if (popoverProps.value?.duration === -1) {
+    localStorage.setItem(closeFlag.value, `${+new Date()}`)
   }
 }
 
@@ -140,7 +142,7 @@ function PopoverValue(props: { key: number; item: Announcement.Value },
 }
 
 const showReopen = computed(() => {
-  return !show.value && (popoverProps?.reopen ?? true) && !!popoverProps.title
+  return !show.value && (popoverProps.value?.reopen ?? true) && !!popoverProps.value.title
 })
 </script>
 

package/dist/index.d.mts

@@ -57,6 +57,10 @@ interface AnnouncementOptions {
      * @param to 切换到的目标路由
      */
     onRouteChanged?: (to: Route, show: Ref<boolean>) => void;
+    /**
+     * 国际化
+     */
+    locales?: Record<string, Omit<AnnouncementOptions, 'locales'>>;
 }
 declare namespace Announcement {
     interface Title {

package/dist/index.d.ts

@@ -57,6 +57,10 @@ interface AnnouncementOptions {
      * @param to 切换到的目标路由
      */
     onRouteChanged?: (to: Route, show: Ref<boolean>) => void;
+    /**
+     * 国际化
+     */
+    locales?: Record<string, Omit<AnnouncementOptions, 'locales'>>;
 }
 declare namespace Announcement {
     interface Title {

package/dist/index.js

@@ -89,7 +89,7 @@ import Announcement from './Announcement.vue'`);
     },
     load(id) {
       if (id === resolvedVirtualModuleId) {
-        return `export default ${(0, import_javascript_stringify.stringify)(options)}`;
+        return `export default ${(0, import_javascript_stringify.stringify)(componentOptions)}`;
       }
     }
   };

package/dist/index.mjs

@@ -54,7 +54,7 @@ import Announcement from './Announcement.vue'`);
     },
     load(id) {
       if (id === resolvedVirtualModuleId) {
-        return `export default ${stringify(options)}`;
+        return `export default ${stringify(componentOptions)}`;
       }
     }
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitepress-plugin-announcement",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "vitepress plugin, Announcement, 公告窗口",
   "author": "sugar",
   "license": "MIT",
@@ -43,7 +43,7 @@
     "tinyglobby": "^0.2.6",
     "typescript": "^5.5.4",
     "vite": "^5",
-    "vitepress": "^1.3.4",
+    "vitepress": "^1.4.1",
     "vue": "^3.4.26"
   },
   "scripts": {