update

.env

@@ -8,3 +8,6 @@ VITE_GLOB_OPEN_LONG_REPLY=false
 
 # When you want to use PWA
 VITE_GLOB_APP_PWA=false
+
+# 触发弹层提示所需聊天次数
+VITE_GLOB_CHAT_TIP_THRESHOLD=6

.eslintrc.cjs

@@ -1,4 +1,7 @@
 module.exports = {
   root: true,
   extends: ['@antfu'],
+	rules: {
+		"no-tabs": "off"
+	}
 }

src/hooks/useChatTip/TipNode.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { NButton, NModal } from 'naive-ui'
+const { show } = defineProps<{
+  show: boolean
+}>()
+
+const emit = defineEmits<{
+  (event: 'increase'): void
+}>()
+</script>
+
+<template>
+  <NModal :show="show">
+    <div class="card">
+      <div class="title">
+        ❤️ ❤️️如果你觉得这个项目对你有帮助，并且情况允许的话，可以给我一点点支持，非常感谢支持～
+      </div>
+      <div class="pics">
+        <div class="item">
+          <img src="./qr-wx.png" alt="qr-img">
+          <div class="color-green">
+            微信
+          </div>
+        </div>
+        <div class="item">
+          <img src="./qr-zfb.png" alt="qr-img">
+          <div class="color-blue">
+            支付宝
+          </div>
+        </div>
+      </div>
+      <div class="foot">
+        <NButton type="success" size="large" block style="font-size: 18px;" @click="emit('increase')">
+          知道了🐶
+        </NButton>
+      </div>
+    </div>
+  </NModal>
+</template>
+
+<style scoped>
+.card {
+	border-radius: 6px;
+	background-color: #fff;
+	text-align: center;
+	max-width: 660px;
+	padding: 32px;
+	max-height: 60vh;
+	overflow: auto;
+}
+
+.title {
+	font-size: 24px;
+}
+
+.pics {
+	display: flex;
+}
+
+.item {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	border: 1px solid #e5e5e5;
+	border-radius: 12px;
+	overflow: hidden;
+	margin: 12px 24px;
+	padding: 12px;
+	padding-bottom: 8px;
+
+	> img {
+		width: 300px;
+	}
+}
+
+.foot {
+	max-width: 320px;
+	margin: 0 auto;
+	margin-top: 32px;
+}
+
+.color-green {
+	color: rgb(82, 158, 70);
+	font-size: 18px;
+	font-weight: bold;
+}
+
+.color-blue {
+	color: rgb(70, 157, 225);
+	font-size: 18px;
+	font-weight: bold;
+}
+
+@media screen and (max-width: 768px) {
+	.pics {
+		display: block;
+	}
+}
+</style>

src/hooks/useChatTip/common.ts

@@ -0,0 +1,6 @@
+export const TIP_THRESHOLD = strNum2Num(import.meta.env.VITE_GLOB_CHAT_TIP_THRESHOLD) || 6
+
+export function strNum2Num(str: string) {
+  const n = parseInt(str, 10)
+  return isNaN(n) ? 0 : n
+}

src/hooks/useChatTip/useChatTip.ts

@@ -0,0 +1,34 @@
+import { onMounted, ref } from 'vue'
+import { TIP_THRESHOLD, strNum2Num } from './common.js'
+
+const countCacheKey = '__chat_tip_count__'
+
+export function useChatTip() {
+  const tipCount = ref(0)
+
+  onMounted(() => {
+    forceSyncCount()
+  })
+
+  /** 从localStorage中同步count */
+  function forceSyncCount() {
+    const cacheCount = strNum2Num(localStorage.getItem(countCacheKey) || '0')
+
+    if (cacheCount !== tipCount.value)
+      tipCount.value = cacheCount
+  }
+
+  function increase() {
+    tipCount.value++
+
+    if (tipCount.value > TIP_THRESHOLD)
+      tipCount.value = 0
+
+    localStorage.setItem(countCacheKey, String(tipCount.value))
+  }
+
+  return {
+    increase,
+    count: tipCount,
+  }
+}

src/views/chat/index.vue

@@ -5,6 +5,9 @@ import { useRoute } from 'vue-router'
 import { storeToRefs } from 'pinia'
 import { NAutoComplete, NButton, NInput, useDialog, useMessage } from 'naive-ui'
 import html2canvas from 'html2canvas'
+import { useChatTip } from '../../hooks/useChatTip/useChatTip.js'
+import TipNode from '../../hooks/useChatTip/TipNode.vue'
+import { TIP_THRESHOLD } from '../../hooks/useChatTip/common.js'
 import { Message } from './components'
 import { useScroll } from './hooks/useScroll'
 import { useChat } from './hooks/useChat'
@@ -27,6 +30,8 @@ const ms = useMessage()
 
 const chatStore = useChatStore()
 
+const tipCount = useChatTip()
+
 useCopyCode()
 
 const { isMobile } = useBasicLayout()
@@ -155,6 +160,8 @@ async function onConversation() {
     }
 
     await fetchChatAPIOnce()
+
+    tipCount.increase()
   }
   catch (error: any) {
     const errorMessage = error?.message ?? t('common.wrong')
@@ -556,5 +563,10 @@ onUnmounted(() => {
         </div>
       </div>
     </footer>
+
+    <TipNode
+      :show="tipCount.count.value === TIP_THRESHOLD"
+      @increase="tipCount.increase"
+    />
   </div>
 </template>