面具

src/views/chat/Chat.vue

@@ -18,6 +18,8 @@ import { fetchChatAPIProcess } from '@/api'
 import { t } from '@/locales'
 import { useTheme } from '@/hooks/useTheme'
 import { emitter } from '@/plugins'
+import maskIcon from '@/assets/png-mianju.png'
+import maskDarkIcon from '@/assets/png-mianju-dark.png'
 
 let controller = new AbortController()
 
@@ -478,6 +480,14 @@ const showVipTips = ref(false)
 function goVip() {
     emitter.emit('changeVipShow', true)
 }
+
+function handleAdd() {
+    if (isMobile.value) {
+        router.push('/mask')
+    } else {
+        showMask.value = true
+    }
+}
 </script>
 
 <template>
@@ -531,6 +541,9 @@ function goVip() {
         <footer :class="footerClass">
             <div class="w-full max-w-screen-xl m-auto">
                 <div class="flex items-center justify-between space-x-2">
+                    <HoverButton @click="handleAdd">
+                        <img class="w-[24px] h-[24px]" :src="isDark ? maskDarkIcon : maskIcon" alt="" />
+                    </HoverButton>
                     <HoverButton @click="handleClear">
                         <span class="text-xl text-[#4f555e] dark:text-white">
                             <SvgIcon icon="ri:delete-bin-line" />

src/views/chat/components/Header/index.vue

@@ -2,6 +2,12 @@
 import { computed, nextTick } from 'vue'
 import { HoverButton, SvgIcon, UserAvatar } from '@/components/common'
 import { useAppStore, useChatStore } from '@/store'
+import maskIcon from '@/assets/png-mianju.png'
+import maskDarkIcon from '@/assets/png-mianju-dark.png'
+import { useTheme } from '@/hooks/useTheme'
+import { emitter } from '@/plugins'
+
+const { isDark } = useTheme()
 
 interface Props {
     usingContext: boolean
@@ -44,6 +50,10 @@ function toggleUsingContext() {
 function goMine() {
     emit('goMine')
 }
+
+function handleAdd() {
+    emitter.emit('changeMask', true)
+}
 </script>
 
 <template>
@@ -64,14 +74,19 @@ function goMine() {
                 {{ currentChatHistory?.title ?? '' }}
             </h1>
             <div class="flex items-center space-x-2">
+
+                <HoverButton @click="handleAdd">
+                    <img class="w-[24px] h-[24px]" :src="isDark ? maskDarkIcon : maskIcon" alt="" />
+                </HoverButton>
+
                 <HoverButton @click="toggleUsingContext">
-                    <span class="text-xl" :class="{ 'text-[#4b9e5f]': usingContext, 'text-[#a8071a]': !usingContext }">
+                    <span class="text-[24px]" :class="{ 'text-[#4b9e5f]': usingContext, 'text-[#a8071a]': !usingContext }">
                         <SvgIcon icon="ri:chat-history-line" />
                     </span>
                 </HoverButton>
 
                 <HoverButton @click="handleExport">
-                    <span class="text-xl text-[#4f555e] dark:text-white">
+                    <span class="text-[24px] text-[#4f555e] dark:text-white">
                         <SvgIcon icon="ri:download-2-line" />
                     </span>
                 </HoverButton>