feat: add page watermark (#526)

Signed-off-by: Bob Du <i@bobdu.cc>

Author: BobDu

package.json

@@ -49,7 +49,7 @@
     "lint-staged": "^13.1.2",
     "markdown-it": "^13.0.1",
     "markdown-it-link-attributes": "^4.0.1",
-    "naive-ui": "^2.38.1",
+    "naive-ui": "^2.38.2",
     "npm-run-all": "^4.1.5",
     "pinia": "^2.0.33",
     "postcss": "^8.4.35",

pnpm-lock.yaml

@@ -645,6 +645,7 @@ router.post('/session', async (req, res) => {
             title: config.siteConfig.siteTitle,
             chatModels,
             allChatModels: chatModelOptions,
+            showWatermark: config.siteConfig?.showWatermark,
           },
         })
         return
@@ -699,6 +700,7 @@ router.post('/session', async (req, res) => {
           chatModels,
           allChatModels: chatModelOptions,
           usageCountLimit: config.siteConfig?.usageCountLimit,
+          showWatermark: config.siteConfig?.showWatermark,
           userInfo,
         },
       })
@@ -716,6 +718,7 @@ router.post('/session', async (req, res) => {
         title: config.siteConfig.siteTitle,
         chatModels: chatModelOptions, // if userId is null which means in nologin mode, open all model options, otherwise user can only choose gpt-3.5-turbo
         allChatModels: chatModelOptions,
+        showWatermark: config.siteConfig?.showWatermark,
         userInfo,
       },
     })

service/src/index.ts

@@ -205,6 +205,7 @@ export class SiteConfig {
     public chatModels?: string,
     public globalAmount?: number,
     public usageCountLimit?: boolean,
+    public showWatermark?: boolean,
   ) { }
 }
 

service/src/storage/model.ts

@@ -147,6 +147,16 @@ onMounted(() => {
             />
           </div>
         </div>
+        <div class="flex items-center space-x-4">
+          <span class="flex-shrink-0 w-[100px]">{{ $t('setting.showWatermark') }}</span>
+          <div class="flex-1">
+            <NSwitch
+              :round="false"
+              :value="config && config.showWatermark"
+              @update:value="(val) => { if (config) config.showWatermark = val }"
+            />
+          </div>
+        </div>
         <div class="flex items-center space-x-4">
           <span class="flex-shrink-0 w-[100px]" />
           <NButton :loading="saving" type="primary" @click="updateSiteInfo(config)">

src/components/common/Setting/Site.vue

@@ -32,6 +32,7 @@ export class SiteConfig {
   chatModels?: string
   globalAmount?: number
   usageCountLimit?: boolean
+  showWatermark?: boolean
 }
 
 export class MailConfig {

src/components/common/Setting/model.ts

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { NWatermark } from 'naive-ui'
+import { computed } from 'vue'
+import { useUserStore } from '@/store'
+
+const userStore = useUserStore()
+const content = computed(() => `${document.title}\n\n\n${userStore.userInfo.name}`)
+</script>
+
+<template>
+  <NWatermark
+    :content="content"
+    cross
+    fullscreen
+    :font-size="16"
+    :line-height="16"
+    font-family="monospace"
+    font-color="rgba(128, 128, 128, .15)"
+    :width="384"
+    :height="384"
+    :x-offset="12"
+    :y-offset="65"
+    :rotate="-15"
+    :z-index="3000"
+    text-align="center"
+  />
+</template>

src/components/common/Watermark/index.vue

@@ -5,5 +5,6 @@ import SvgIcon from './SvgIcon/index.vue'
 import UserAvatar from './UserAvatar/index.vue'
 import Setting from './Setting/index.vue'
 import PromptStore from './PromptStore/index.vue'
+import Watermark from './Watermark/index.vue'
 
-export { HoverButton, NaiveProvider, SvgIcon, UserAvatar, Setting, PromptStore, GithubSite }
+export { HoverButton, NaiveProvider, SvgIcon, UserAvatar, Setting, PromptStore, GithubSite, Watermark }

src/components/common/index.ts

@@ -88,6 +88,7 @@ export default {
     globalAmount: 'Global Usage Amount for New User',
     limit_switch: 'Open Usage Limitation',
     usageCountLimit: 'Enable Usage Count Limit',
+    showWatermark: 'Show Watermark',
     redeemCardNo: 'Redeem CardNo',
     useAmount: 'No. of questions',
     setting: 'Setting',

src/locales/en-US.ts

@@ -88,6 +88,7 @@ export default {
     globalAmount: '新用户全局次数设置',
     limit_switch: '打开次数限制',
     usageCountLimit: '使用次数限制',
+    showWatermark: '显示水印',
     redeemCardNo: '兑换码卡号',
     useAmount: '可提问次数',
     setting: '设置',

src/locales/zh-CN.ts

@@ -25,6 +25,7 @@ interface SessionResponse {
     value: string
   }[]
   usageCountLimit: boolean
+  showWatermark: boolean
   userInfo: { name: string; description: string; avatar: string; userId: string; root: boolean; config: UserConfig }
 }
 

src/store/modules/auth/index.ts

@@ -5,7 +5,7 @@ import List from './List.vue'
 import Footer from './Footer.vue'
 import { useAppStore, useAuthStore, useChatStore } from '@/store'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
-import { GithubSite, PromptStore } from '@/components/common'
+import { GithubSite, PromptStore, Watermark } from '@/components/common'
 import { fetchAnnouncement } from '@/api'
 import { AnnounceConfig } from '@/components/common/Setting/model'
 
@@ -156,6 +156,7 @@ onMounted(async () => {
       </div>
     </div>
   </NModal>
+  <Watermark v-if="authStore.session?.showWatermark" />
 </template>
 
 <style scoped>