@sugarat/theme 0.2.9 → 0.2.10

package/README.md

@@ -18,7 +18,7 @@ npm create @sugarat/theme@latest
 yarn create @sugarat/theme
 
 # With Bun
-bunx @sugarat/create-theme --bun
+bun create @sugarat/theme
 ```
 
 ![](https://img.cdn.sugarat.top/mdImg/MTY4OTQyMDE1NTcxMA==689420155710)

package/node.js

@@ -36,7 +36,7 @@ __export(node_exports, {
 });
 module.exports = __toCommonJS(node_exports);
 
-// ../../node_modules/.pnpm/vitepress-plugin-tabs@0.2.0_vitepress@1.0.0-rc.31_vue@3.3.4/node_modules/vitepress-plugin-tabs/dist/index.js
+// ../../node_modules/.pnpm/vitepress-plugin-tabs@0.2.0_vitepress@1.0.0-rc.32_vue@3.3.4/node_modules/vitepress-plugin-tabs/dist/index.js
 var tabsMarker = "=tabs";
 var tabsMarkerLen = tabsMarker.length;
 var ruleBlockTabs = (state, startLine, endLine, silent) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sugarat/theme",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "description": "简约风的 Vitepress 博客主题，sugarat vitepress blog theme",
   "author": "sugar",
   "license": "MIT",
@@ -54,7 +54,7 @@
     "pagefind": "1.0.3",
     "sass": "^1.56.1",
     "typescript": "^4.8.2",
-    "vitepress": "1.0.0-rc.31",
+    "vitepress": "1.0.0-rc.32",
     "vue": "^3.3.4"
   },
   "scripts": {

package/src/components/BlogAlert.vue

@@ -5,9 +5,9 @@ import { useBlogConfig } from '../composables/config/blog'
 
 const { alert: alertProps } = useBlogConfig()
 const show = ref(false)
-
+const storageKey = 'theme-blog-alert'
+const closeFlag = `${storageKey}-close`
 onMounted(() => {
-  const storageKey = 'theme-blog-alert'
   // 取旧值
   const oldValue = localStorage.getItem(storageKey)
   const newValue = JSON.stringify(alertProps)
@@ -21,13 +21,28 @@ onMounted(() => {
         show.value = false
       }, alertProps?.duration)
     }
+    return
   }
 
   if (oldValue !== newValue && alertProps?.duration === -1) {
     // 当做新值处理
     show.value = true
+    localStorage.removeItem(closeFlag)
+    return
+  }
+
+  // 新旧相等，判断是否点击过close，没点击关闭依然展示
+  if (oldValue === newValue && alertProps?.duration === -1 && !localStorage.getItem(closeFlag)) {
+    show.value = true
   }
 })
+
+function handleClose() {
+  show.value = false
+  if (alertProps?.duration === -1) {
+    localStorage.setItem(closeFlag, `${+new Date()}`)
+  }
+}
 </script>
 
 <template>
@@ -40,6 +55,7 @@ onMounted(() => {
       :closable="alertProps?.closable"
       :close-text="alertProps?.closeText"
       :description="alertProps?.description"
+      @close="handleClose"
     >
       <div v-if="alertProps?.html" v-html="alertProps?.html" />
     </ElAlert>

package/src/components/BlogPopover.vue

@@ -17,13 +17,14 @@ const bodyContent = computed(() => {
 const footerContent = computed(() => {
   return popoverProps?.footer || []
 })
+const storageKey = 'theme-blog-popover'
+const closeFlag = `${storageKey}-close`
 
 onMounted(() => {
   if (!popoverProps?.title) {
     return
   }
 
-  const storageKey = 'theme-blog-popover'
   // 取旧值
   const oldValue = localStorage.getItem(storageKey)
   const newValue = JSON.stringify(popoverProps)
@@ -37,14 +38,29 @@ onMounted(() => {
         show.value = false
       }, popoverProps?.duration)
     }
+    return
   }
 
   if (oldValue !== newValue && popoverProps?.duration === -1) {
     // 当做新值处理
     show.value = true
+    localStorage.removeItem(closeFlag)
+    return
+  }
+
+  // 新旧相等，判断是否点击过close，没点击关闭依然展示
+  if (oldValue === newValue && popoverProps?.duration === -1 && !localStorage.getItem(closeFlag)) {
+    show.value = true
   }
 })
 
+function handleClose() {
+  show.value = false
+  if (popoverProps?.duration === -1) {
+    localStorage.setItem(closeFlag, `${+new Date()}`)
+  }
+}
+
 function PopoverValue(props: { key: number; item: BlogPopover.Value },
   { slots }: any) {
   const { key, item } = props
@@ -105,7 +121,7 @@ function PopoverValue(props: { key: number; item: BlogPopover.Value },
         </ElIcon>
         <span class="title">{{ popoverProps?.title }}</span>
       </div>
-      <ElIcon class="close-icon" size="20px" @click="show = false">
+      <ElIcon class="close-icon" size="20px" @click="handleClose">
         <CircleCloseFilled />
       </ElIcon>
     </div>