From 69d77225dbac590fd6df90d675ece8b107cd5a6b Mon Sep 17 00:00:00 2001
From: Dawn <2439646234@qq.com>
Date: Mon, 20 Jan 2025 15:50:11 +0800
Subject: [PATCH] =?UTF-8?q?perf(view):=20:zap:=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=B7=B2=E5=88=A0=E9=99=A4=E5=A5=BD=E5=8F=8B=E7=9A=84=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/rightBox/MsgInput.vue          |   4 +-
 .../rightBox/chatBox/ChatFooter.vue           | 186 ++++++++++--------
 .../rightBox/chatBox/ChatHeader.vue           |  26 ++-
 src/components/rightBox/chatBox/index.vue     |   2 +-
 uno.config.ts                                 |   4 +-
 5 files changed, 130 insertions(+), 92 deletions(-)

diff --git a/src/components/rightBox/MsgInput.vue b/src/components/rightBox/MsgInput.vue
index 7e73f7c9..348884eb 100644
--- a/src/components/rightBox/MsgInput.vue
+++ b/src/components/rightBox/MsgInput.vue
@@ -151,7 +151,7 @@
 <script setup lang="ts">
 import { lightTheme, darkTheme, VirtualListInst } from 'naive-ui'
 import { MacOsKeyEnum, MittEnum, RoomTypeEnum, ThemeEnum, WinKeyEnum } from '@/enums'
-import { CacheUserItem, MockItem } from '@/services/types.ts'
+import { CacheUserItem, SessionItem } from '@/services/types.ts'
 import { emit } from '@tauri-apps/api/event'
 import { useSettingStore } from '@/stores/setting.ts'
 import { WebviewWindow } from '@tauri-apps/api/webviewWindow'
@@ -173,7 +173,7 @@ const { themes } = storeToRefs(settingStore)
 const arrow = ref(false)
 /** 输入框dom元素 */
 const messageInputDom = ref()
-const activeItem = ref(inject('activeItem') as MockItem)
+const activeItem = ref(inject('activeItem') as SessionItem)
 /** ait 虚拟列表 */
 const virtualListInstAit = useTemplateRef<VirtualListInst>('virtualListInst-ait')
 /** AI 虚拟列表 */
diff --git a/src/components/rightBox/chatBox/ChatFooter.vue b/src/components/rightBox/chatBox/ChatFooter.vue
index d75300c5..270f740c 100644
--- a/src/components/rightBox/chatBox/ChatFooter.vue
+++ b/src/components/rightBox/chatBox/ChatFooter.vue
@@ -1,105 +1,135 @@
 <template>
   <!-- 底部栏 -->
-  <main class="size-full relative z-10 border-t-(1px solid [--right-chat-footer-line-color]) color-[--icon-color]">
-    <!-- 输入框顶部选项栏 -->
-    <n-flex align="center" justify="space-between" class="p-[10px_22px_5px] select-none">
-      <n-flex align="center" :size="0" class="input-options">
-        <!-- emoji表情 -->
-        <n-popover
-          v-model:show="emojiShow"
-          trigger="click"
-          :show-arrow="false"
-          placement="top-start"
-          style="
-            padding: 0;
-            background: var(--bg-emoji);
-            backdrop-filter: blur(10px);
-            -webkit-backdrop-filter: blur(10px);
-            box-shadow: 2px 2px 12px 2px var(--box-shadow-color);
-            border: 1px solid var(--box-shadow-color);
-          ">
-          <template #trigger>
-            <n-popover trigger="hover" :show-arrow="false" placement="bottom">
-              <template #trigger>
-                <svg class="mr-18px"><use href="#smiling-face"></use></svg>
-              </template>
-              <span>表情</span>
-            </n-popover>
-          </template>
-          <Emoji @emojiHandle="emojiHandle" :all="false" />
-        </n-popover>
+  <main class="border-t-(1px solid [--right-chat-footer-line-color]) relative">
+    <!-- 添加遮罩层 -->
+    <div
+      v-if="isSingleChat && !isFriend"
+      class="absolute inset-0 z-20 backdrop-blur-md cursor-default flex-center select-none pointer-events-auto light:bg-[rgba(255,255,255,0.1)] dark:bg-[rgba(33,33,33,0.1)]">
+      <n-flex align="center" justify="center" class="pb-60px">
+        <svg class="size-24px"><use href="#cloudError"></use></svg>
+        <span class="text-(14px [--chat-text-color])">你们当前已经不是好友关系</span>
+      </n-flex>
+    </div>
+
+    <div class="size-full relative z-10 color-[--icon-color]">
+      <!-- 输入框顶部选项栏 -->
+      <n-flex align="center" justify="space-between" class="p-[10px_22px_5px] select-none">
+        <n-flex align="center" :size="0" class="input-options">
+          <!-- emoji表情 -->
+          <n-popover
+            v-model:show="emojiShow"
+            trigger="click"
+            :show-arrow="false"
+            placement="top-start"
+            style="
+              padding: 0;
+              background: var(--bg-emoji);
+              backdrop-filter: blur(10px);
+              -webkit-backdrop-filter: blur(10px);
+              box-shadow: 2px 2px 12px 2px var(--box-shadow-color);
+              border: 1px solid var(--box-shadow-color);
+            ">
+            <template #trigger>
+              <n-popover trigger="hover" :show-arrow="false" placement="bottom">
+                <template #trigger>
+                  <svg class="mr-18px"><use href="#smiling-face"></use></svg>
+                </template>
+                <span>表情</span>
+              </n-popover>
+            </template>
+            <Emoji @emojiHandle="emojiHandle" :all="false" />
+          </n-popover>
+
+          <n-popover trigger="hover" :show-arrow="false" placement="bottom">
+            <template #trigger>
+              <div class="flex-center gap-2px mr-12px">
+                <svg @click="handleCap()"><use href="#screenshot"></use></svg>
+                <svg style="width: 14px; height: 14px"><use href="#down"></use></svg>
+              </div>
+            </template>
+            <span>截图</span>
+          </n-popover>
+          <n-popover trigger="hover" :show-arrow="false" placement="bottom">
+            <template #trigger>
+              <div class="flex-center gap-2px mr-12px">
+                <svg @click="open()"><use href="#file2"></use></svg>
+                <svg style="width: 14px; height: 14px"><use href="#down"></use></svg>
+              </div>
+            </template>
+            <span>文件</span>
+          </n-popover>
+          <n-popover trigger="hover" :show-arrow="false" placement="bottom">
+            <template #trigger>
+              <svg @click="open({ accept: 'image/**' })" class="mr-18px"><use href="#photo"></use></svg>
+            </template>
+            <span>图片</span>
+          </n-popover>
+          <!--        <n-popover trigger="hover" :show-arrow="false" placement="bottom">-->
+          <!--          <template #trigger>-->
+          <!--            <svg class="mr-18px"><use href="#shake"></use></svg>-->
+          <!--          </template>-->
+          <!--          <span>窗口抖动</span>-->
+          <!--        </n-popover>-->
+          <!--        <n-popover trigger="hover" :show-arrow="false" placement="bottom">-->
+          <!--          <template #trigger>-->
+          <!--            <svg class="mr-18px"><use href="#red-packet"></use></svg>-->
+          <!--          </template>-->
+          <!--          <span>红包</span>-->
+          <!--        </n-popover>-->
+          <n-popover trigger="hover" :show-arrow="false" placement="bottom">
+            <template #trigger>
+              <svg class="mr-18px"><use href="#voice"></use></svg>
+            </template>
+            <span>语音信息</span>
+          </n-popover>
+        </n-flex>
 
         <n-popover trigger="hover" :show-arrow="false" placement="bottom">
           <template #trigger>
-            <div class="flex-center gap-2px mr-12px">
-              <svg @click="handleCap()"><use href="#screenshot"></use></svg>
-              <svg style="width: 14px; height: 14px"><use href="#down"></use></svg>
-            </div>
-          </template>
-          <span>截图</span>
-        </n-popover>
-        <n-popover trigger="hover" :show-arrow="false" placement="bottom">
-          <template #trigger>
-            <div class="flex-center gap-2px mr-12px">
-              <svg @click="open()"><use href="#file2"></use></svg>
-              <svg style="width: 14px; height: 14px"><use href="#down"></use></svg>
-            </div>
-          </template>
-          <span>文件</span>
-        </n-popover>
-        <n-popover trigger="hover" :show-arrow="false" placement="bottom">
-          <template #trigger>
-            <svg @click="open({ accept: 'image/**' })" class="mr-18px"><use href="#photo"></use></svg>
-          </template>
-          <span>图片</span>
-        </n-popover>
-        <!--        <n-popover trigger="hover" :show-arrow="false" placement="bottom">-->
-        <!--          <template #trigger>-->
-        <!--            <svg class="mr-18px"><use href="#shake"></use></svg>-->
-        <!--          </template>-->
-        <!--          <span>窗口抖动</span>-->
-        <!--        </n-popover>-->
-        <!--        <n-popover trigger="hover" :show-arrow="false" placement="bottom">-->
-        <!--          <template #trigger>-->
-        <!--            <svg class="mr-18px"><use href="#red-packet"></use></svg>-->
-        <!--          </template>-->
-        <!--          <span>红包</span>-->
-        <!--        </n-popover>-->
-        <n-popover trigger="hover" :show-arrow="false" placement="bottom">
-          <template #trigger>
-            <svg class="mr-18px"><use href="#voice"></use></svg>
+            <svg class="w-22px h-22px cursor-pointer outline-none"><use href="#history"></use></svg>
           </template>
-          <span>语音信息</span>
+          <span>聊天记录</span>
         </n-popover>
       </n-flex>
 
-      <n-popover trigger="hover" :show-arrow="false" placement="bottom">
-        <template #trigger>
-          <svg class="w-22px h-22px cursor-pointer outline-none"><use href="#history"></use></svg>
-        </template>
-        <span>聊天记录</span>
-      </n-popover>
-    </n-flex>
-
-    <!-- 输入框及其发送按钮 -->
-    <div class="pl-20px flex flex-col items-end gap-6px">
-      <MsgInput ref="MsgInputRef" />
+      <!-- 输入框及其发送按钮 -->
+      <div class="pl-20px flex flex-col items-end gap-6px">
+        <MsgInput ref="MsgInputRef" />
+      </div>
     </div>
   </main>
 </template>
 
 <script setup lang="ts">
 import { useFileDialog } from '@vueuse/core'
-import { LimitEnum, MsgEnum } from '@/enums'
+import { LimitEnum, MsgEnum, RoomTypeEnum } from '@/enums'
 import { SelectionRange, useCommon } from '@/hooks/useCommon.ts'
 import { WebviewWindow } from '@tauri-apps/api/webviewWindow'
 import { emitTo } from '@tauri-apps/api/event'
+import { useGlobalStore } from '@/stores/global.ts'
+import { useContactStore } from '@/stores/contacts.ts'
+import type { ContactItem, SessionItem } from '@/services/types'
 
+const { friendId } = defineProps<{
+  friendId: SessionItem['friendId']
+}>()
+const globalStore = useGlobalStore()
+const contactStore = useContactStore()
 const { open, onChange, reset } = useFileDialog()
 const MsgInputRef = ref()
 const msgInputDom = ref<HTMLInputElement | null>(null)
 const emojiShow = ref()
 const { insertNodeAtRange, triggerInputEvent, imgPaste, FileOrVideoPaste } = useCommon()
+// 判断是否为单聊
+const isSingleChat = computed(() => {
+  return globalStore.currentSession?.type === RoomTypeEnum.SINGLE
+})
+
+// 判断是否为好友
+const isFriend = computed(() => {
+  if (!isSingleChat.value) return true
+  return contactStore.contactsList.some((contact: ContactItem) => contact.uid === friendId)
+})
 
 /**
  * 选择表情，并把表情插入输入框
diff --git a/src/components/rightBox/chatBox/ChatHeader.vue b/src/components/rightBox/chatBox/ChatHeader.vue
index bc739377..27dd09ce 100644
--- a/src/components/rightBox/chatBox/ChatHeader.vue
+++ b/src/components/rightBox/chatBox/ChatHeader.vue
@@ -15,16 +15,25 @@
             <use href="#auth"></use>
           </svg>
           <n-flex v-else-if="activeItem.type === RoomTypeEnum.SINGLE" align="center">
-            <n-badge :color="isOnline ? '#1ab292' : '#909090'" dot />
-            <p class="text-(12px [--text-color])">
-              {{ isOnline ? '在线' : '离线' }}
-            </p>
+            <template v-if="shouldShowDeleteFriend">
+              <n-badge :color="isOnline ? '#1ab292' : '#909090'" dot />
+              <p class="text-(12px [--text-color])">
+                {{ isOnline ? '在线' : '离线' }}
+              </p>
+            </template>
+
+            <template v-else>
+              <n-flex align="center" :size="4">
+                <svg class="size-16px color-#d03553"><use href="#close"></use></svg>
+                <p class="text-(12px [--text-color])">好友状态异常</p>
+              </n-flex>
+            </template>
           </n-flex>
         </n-flex>
       </Transition>
     </n-flex>
     <!-- 顶部右边选项栏 -->
-    <nav class="options flex-y-center gap-20px color-[--icon-color]">
+    <nav v-if="shouldShowDeleteFriend || chatStore.isGroup" class="options flex-y-center gap-20px color-[--icon-color]">
       <div class="options-box">
         <n-popover trigger="hover" :show-arrow="false" placement="bottom">
           <template #trigger>
@@ -76,7 +85,7 @@
     </nav>
 
     <!-- 侧边选项栏 -->
-    <Transition name="sidebar">
+    <Transition v-if="shouldShowDeleteFriend || chatStore.isGroup" name="sidebar">
       <div v-if="sidebarShow" style="border: 1px solid rgba(90, 90, 90, 0.1)" class="sidebar">
         <!-- 单聊侧边栏选项 -->
         <template v-if="!chatStore.isGroup">
@@ -103,10 +112,7 @@
             <p>删除聊天记录</p>
           </div>
 
-          <div
-            v-if="shouldShowDeleteFriend"
-            class="box-item flex-x-center cursor-pointer"
-            @click="handleDelete(RoomActEnum.DELETE_FRIEND)">
+          <div class="box-item flex-x-center cursor-pointer" @click="handleDelete(RoomActEnum.DELETE_FRIEND)">
             <p class="color-#d03553">删除好友</p>
           </div>
 
diff --git a/src/components/rightBox/chatBox/index.vue b/src/components/rightBox/chatBox/index.vue
index 8f78f3e2..25dab4f4 100644
--- a/src/components/rightBox/chatBox/index.vue
+++ b/src/components/rightBox/chatBox/index.vue
@@ -6,7 +6,7 @@
       <!-- 中间聊天框内容  -->
       <ChatMain :active-item="activeItemRef" />
       <!-- 输入框和操作列表 -->
-      <ChatFooter class="flex-1" />
+      <ChatFooter class="flex-1" :friendId="activeItemRef.friendId" />
     </n-flex>
     <ChatSidebar />
   </n-flex>
diff --git a/uno.config.ts b/uno.config.ts
index f1896c92..287e5466 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -48,6 +48,8 @@ export default defineConfig({
     'fixed-lb': 'fixed left-0 bottom-0',
     'fixed-rt': 'fixed right-0 top-0',
     'fixed-rb': 'fixed right-0 bottom-0',
-    'fixed-center': 'fixed-lt flex-center size-full'
+    'fixed-center': 'fixed-lt flex-center size-full',
+    'light:': '&[data-theme=light]',
+    'dark:': '&[data-theme=dark]'
   }
 })