面具

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,19 +541,22 @@ 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">
+                        <span class="text-[24px] text-[#4f555e] dark:text-white">
                             <SvgIcon icon="ri:delete-bin-line" />
                         </span>
                     </HoverButton>
                     <HoverButton v-if="!isMobile" @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>
                     <HoverButton v-if="!isMobile" @click="toggleUsingContext">
                         <span
-                            class="text-xl"
+                            class="text-[24px]"
                             :class="{ 'text-[#4b9e5f]': usingContext, 'text-[#a8071a]': !usingContext }"
                         >
                             <SvgIcon icon="ri:chat-history-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
@@ -40,10 +46,13 @@ function toggleUsingContext() {
     emit('toggleUsingContext')
 }
 
-
 function goMine() {
     emit('goMine')
 }
+
+function handleAdd() {
+    emitter.emit('changeMask', true)
+}
 </script>
 
 <template>
@@ -64,14 +73,17 @@ 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>