增加弹窗功能 (#492)

* feat: add Popup feature

* fix: undefined error

Author: ShenKeeeew

service/src/index.ts

@@ -11,7 +11,7 @@ import type { ChatMessage } from './chatgpt'
 import { abortChatProcess, chatConfig, chatReplyProcess, containsSensitiveWords, initAuditService } from './chatgpt'
 import { auth, getUserId } from './middleware/auth'
 import { clearApiKeyCache, clearConfigCache, getApiKeys, getCacheApiKeys, getCacheConfig, getOriginConfig } from './storage/config'
-import type { AuditConfig, ChatInfo, ChatOptions, Config, KeyConfig, MailConfig, SiteConfig, UserConfig, UserInfo } from './storage/model'
+import type { AnnounceConfig, AuditConfig, ChatInfo, ChatOptions, Config, KeyConfig, MailConfig, SiteConfig, UserConfig, UserInfo } from './storage/model'
 import { AdvancedConfig, Status, UsageResponse, UserRole } from './storage/model'
 import {
   clearChat,
@@ -1175,6 +1175,30 @@ router.post('/mail-test', rootAuth, async (req, res) => {
   }
 })
 
+router.post('/setting-announce', rootAuth, async (req, res) => {
+  try {
+    const config = req.body as AnnounceConfig
+    const thisConfig = await getOriginConfig()
+    thisConfig.announceConfig = config
+    const result = await updateConfig(thisConfig)
+    clearConfigCache()
+    res.send({ status: 'Success', message: '操作成功 | Successfully', data: result.announceConfig })
+  }
+  catch (error) {
+    res.send({ status: 'Fail', message: error.message, data: null })
+  }
+})
+
+router.post('/announcement', async (req, res) => {
+  try {
+    const result = await getCacheConfig()
+    res.send({ status: 'Success', message: '操作成功 | Successfully', data: result.announceConfig })
+  }
+  catch (error) {
+    res.send({ status: 'Fail', message: error.message, data: null })
+  }
+})
+
 router.post('/setting-audit', rootAuth, async (req, res) => {
   try {
     const config = req.body as AuditConfig

service/src/storage/config.ts

@@ -2,7 +2,7 @@ import { ObjectId } from 'mongodb'
 import * as dotenv from 'dotenv'
 import type { TextAuditServiceProvider } from 'src/utils/textAudit'
 import { isNotEmptyString, isTextAuditServiceProvider } from '../utils/is'
-import { AdvancedConfig, AuditConfig, Config, KeyConfig, MailConfig, SiteConfig, TextAudioType, UserRole } from './model'
+import { AdvancedConfig, AnnounceConfig, AuditConfig, Config, KeyConfig, MailConfig, SiteConfig, TextAudioType, UserRole } from './model'
 import { getConfig, getKeys, upsertKey } from './mongo'
 
 dotenv.config()
@@ -106,6 +106,13 @@ export async function getOriginConfig() {
     )
   }
 
+  if (!config.announceConfig) {
+    config.announceConfig = new AnnounceConfig(
+      false,
+      '',
+    )
+  }
+
   if (!isNotEmptyString(config.siteConfig.chatModels))
     config.siteConfig.chatModels = 'gpt-3.5-turbo,gpt-4-turbo-preview,gpt-4-vision-preview'
 

service/src/storage/model.ts

@@ -188,6 +188,7 @@ export class Config {
     public mailConfig?: MailConfig,
     public auditConfig?: AuditConfig,
     public advancedConfig?: AdvancedConfig,
+    public announceConfig?: AnnounceConfig,
   ) { }
 }
 
@@ -207,6 +208,13 @@ export class SiteConfig {
   ) { }
 }
 
+export class AnnounceConfig {
+  constructor(
+    public enabled: boolean,
+    public announceWords: string,
+  ) { }
+}
+
 export class MailConfig {
   constructor(
     public smtpHost: string,

src/api/index.ts

@@ -1,9 +1,15 @@
 import type { AxiosProgressEvent, GenericAbortSignal } from 'axios'
 import { get, post } from '@/utils/request'
-import type { AuditConfig, ConfigState, KeyConfig, MailConfig, SiteConfig, Status, UserInfo, UserPassword } from '@/components/common/Setting/model'
+import type { AnnounceConfig, AuditConfig, ConfigState, KeyConfig, MailConfig, SiteConfig, Status, UserInfo, UserPassword } from '@/components/common/Setting/model'
 import { useAuthStore, useUserStore } from '@/store'
 import type { SettingsState } from '@/store/modules/user/helper'
 
+export function fetchAnnouncement<T = any>() {
+  return post<T>({
+    url: '/announcement',
+  })
+}
+
 export function fetchChatConfig<T = any>() {
   return post<T>({
     url: '/config',
@@ -313,6 +319,13 @@ export function fetchTestAudit<T = any>(text: string, audit: AuditConfig) {
   })
 }
 
+export function fetchUpdateAnnounce<T = any>(announce: AnnounceConfig) {
+  return post<T>({
+    url: '/setting-announce',
+    data: announce,
+  })
+}
+
 export function fetchUpdateAdvanced<T = any>(sync: boolean, advanced: SettingsState) {
   const data = { sync, ...advanced }
   return post<T>({

src/components/common/Setting/Anonuncement.vue

@@ -0,0 +1,76 @@
+<script setup lang='ts'>
+import { onMounted, ref } from 'vue'
+import { NButton, NInput, NSpin, NSwitch, useMessage } from 'naive-ui'
+import { AnnounceConfig, ConfigState } from './model'
+import { fetchChatConfig, fetchUpdateAnnounce } from '@/api'
+import { t } from '@/locales'
+
+const ms = useMessage()
+
+const loading = ref(false)
+const saving = ref(false)
+
+const config = ref<AnnounceConfig>()
+
+async function fetchConfig() {
+  try {
+    loading.value = true
+    const { data } = await fetchChatConfig<ConfigState>()
+    config.value = data.announceConfig
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+async function updateAnnouncement() {
+  saving.value = true
+  try {
+    const { data } = await fetchUpdateAnnounce(config.value as AnnounceConfig)
+    config.value = data
+    ms.success(t('common.success'))
+  }
+  catch (error: any) {
+    ms.error(error.message)
+  }
+  saving.value = false
+}
+
+onMounted(() => {
+  fetchConfig()
+})
+</script>
+
+<template>
+  <NSpin :show="loading">
+    <div class="space-y-6">
+      <div class="flex items-center space-x-4">
+        <span class="flex-shrink-0 w-[100px]">{{ $t('setting.announceEnabled') }}</span>
+        <div class="flex-1">
+          <NSwitch
+            :round="false" :value="config && config.enabled"
+            @update:value="(val) => { if (config) config.enabled = val }"
+          />
+        </div>
+      </div>
+      <div class="flex items-center space-x-4">
+        <span class="flex-shrink-0 w-[100px]">{{ $t('setting.announceWords') }}</span>
+        <div class="flex-1">
+          <NInput
+            :value="config && config.announceWords"
+            placeholder="输入公告内容 | Set AnnouncementWords"
+            type="textarea"
+            :autosize="{ minRows: 1, maxRows: 10 }"
+            @input="(val) => { if (config) config.announceWords = val }"
+          />
+        </div>
+      </div>
+      <span class="flex-shrink-0 w-[100px]" />
+      <div class="flex flex-wrap items-center gap-4">
+        <NButton :loading="saving" type="primary" @click="updateAnnouncement()">
+          {{ $t('common.save') }}
+        </NButton>
+      </div>
+    </div>
+  </NSpin>
+</template>

src/components/common/Setting/index.vue

@@ -12,6 +12,7 @@ import User from './User.vue'
 import Key from './Keys.vue'
 import Password from './Password.vue'
 import TwoFA from './TwoFA.vue'
+import Announcement from './Anonuncement.vue'
 import { SvgIcon } from '@/components/common'
 import { useAuthStore, useUserStore } from '@/store'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
@@ -105,6 +106,13 @@ const show = computed({
           </template>
           <Site />
         </NTabPane>
+        <NTabPane v-if="userStore.userInfo.root" name="AnnounceConfig" tab="AnnounceConfig">
+          <template #tab>
+            <SvgIcon class="text-lg" icon="ri:settings-line" />
+            <span class="ml-2">{{ $t('setting.announceConfig') }}</span>
+          </template>
+          <Announcement />
+        </NTabPane>
         <NTabPane v-if="userStore.userInfo.root" name="MailConfig" tab="MailConfig">
           <template #tab>
             <SvgIcon class="text-lg" icon="ri:mail-line" />

src/components/common/Setting/model.ts

@@ -13,6 +13,7 @@ export class ConfigState {
   siteConfig?: SiteConfig
   mailConfig?: MailConfig
   auditConfig?: AuditConfig
+  announceConfig?: AnnounceConfig
 }
 
 export class UserConfig {
@@ -63,6 +64,11 @@ export class AuditConfig {
   sensitiveWords?: string
 }
 
+export class AnnounceConfig {
+  enabled?: boolean
+  announceWords?: string
+}
+
 export enum Status {
   Normal = 0,
   Deleted = 1,

src/locales/en-US.ts

@@ -80,6 +80,9 @@ export default {
     disable2FAConfirm: 'Are you sure to disable 2FA for this user?',
   },
   setting: {
+    announceConfig: 'Announcement',
+    announceEnabled: 'Open Announcement',
+    announceWords: 'Announcement Content',
     globalAmount: 'Global Usage Amount for New User',
     limit_switch: 'Open Usage Limitation',
     usageCountLimit: 'Enable Usage Count Limit',

src/locales/ko-KR.ts

@@ -80,6 +80,9 @@ export default {
     disable2FAConfirm: 'Are you sure to disable 2FA for this user?',
   },
   setting: {
+    announceConfig: '网站公告',
+    announceEnabled: 'Open Announcement',
+    announceWords: 'Announcement Content',
     globalAmount: 'Global Usage Amount for New User',
     limit_switch: '오픈 횟수 제한',
     redeemCardNo: '질문 허용 횟수',

src/locales/zh-CN.ts

@@ -80,6 +80,9 @@ export default {
     disable2FAConfirm: '您确定要为此用户禁用两步验证吗？?',
   },
   setting: {
+    announceConfig: '网站公告',
+    announceEnabled: '公告开关',
+    announceWords: '公告内容',
     globalAmount: '新用户全局次数设置',
     limit_switch: '打开次数限制',
     usageCountLimit: '使用次数限制',

src/locales/zh-TW.ts

@@ -80,6 +80,9 @@ export default {
     disable2FAConfirm: '您确定要为此用户禁用两步验证吗？?',
   },
   setting: {
+    announceConfig: '网站公告',
+    announceEnabled: '打开公告',
+    announceWords: '公告内容',
     globalAmount: '新用户全局次数设置',
     limit_switch: '開啟次數限制',
     redeemCardNo: '兌換碼卡號',

src/views/chat/layout/sider/index.vue

@@ -1,12 +1,15 @@
 <script setup lang='ts'>
-import type { CSSProperties } from 'vue'
-import { computed, ref, watch } from 'vue'
-import { NButton, NLayoutSider } from 'naive-ui'
+import { CSSProperties, computed, onMounted, ref, watch } from 'vue'
+import { NButton, NLayoutSider, NModal } from 'naive-ui'
 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 { fetchAnnouncement } from '@/api'
+import { AnnounceConfig } from '@/components/common/Setting/model'
+
+const config = ref<AnnounceConfig>()
 
 const appStore = useAppStore()
 const authStore = useAuthStore()
@@ -56,6 +59,48 @@ watch(
     flush: 'post',
   },
 )
+
+const notice_text = ref('')
+const showNotice = ref(false)
+
+const closeModal = () => {
+  showNotice.value = false
+}
+
+const doNotShowToday = () => {
+  const today = new Date().toDateString()
+  localStorage.setItem('announcementLastClosed', today)
+  closeModal()
+}
+
+const checkDoNotShowToday = () => {
+  const today = new Date().toDateString()
+  const lastClosed = localStorage.getItem('announcementLastClosed')
+  if (lastClosed === today)
+    showNotice.value = false
+}
+
+async function fetchAnnounce() {
+  try {
+    // 从数据库获取公告配置
+    const { data } = await fetchAnnouncement()
+    config.value = data
+    if (config.value) {
+      if (config.value.enabled)
+        showNotice.value = true
+      checkDoNotShowToday()
+      return config.value
+    }
+  }
+  catch (error) {
+    console.error('Error fetching the announcement:', error)
+  }
+}
+
+onMounted(async () => {
+  const data = await fetchAnnounce()
+  notice_text.value = `${data?.announceWords}`
+})
 </script>
 
 <template>
@@ -94,4 +139,33 @@ watch(
     <div v-show="!collapsed" class="fixed inset-0 z-40 bg-black/40" @click="handleUpdateCollapsed" />
   </template>
   <PromptStore v-model:visible="show" />
+  <NModal v-model:show="showNotice" :auto-focus="false" preset="card" :style="{ width: !isMobile ? '33%' : '90%' }">
+    <div class="p-4 space-y-5 min-h-[200px]">
+      <div class="w-full markdown-body" v-html="notice_text" />
+    </div>
+    <div class="buttons-container">
+      <div class="button-wrapper">
+        <NButton type="primary" @click="closeModal">
+          关闭公告
+        </NButton>
+      </div>
+      <div class="button-wrapper">
+        <NButton type="default" @click="doNotShowToday">
+          今日不再提示
+        </NButton>
+      </div>
+    </div>
+  </NModal>
 </template>
+
+<style scoped>
+.buttons-container {
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-end;
+}
+
+.button-wrapper {
+  margin-left: 10px;
+}
+</style>