Skip to content

Commit

Permalink
perf(view): ⚡ 优化已删除好友的界面展示
Browse files Browse the repository at this point in the history
  • Loading branch information
@nongyehong
nongyehong committed Jan 20, 2025
1 parent eea52ea commit 69d7722
Show file tree
Hide file tree
Showing 5 changed files with 130 additions and 92 deletions.
4 changes: 2 additions & 2 deletions src/components/rightBox/MsgInput.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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 虚拟列表 */
Expand Down
186 changes: 108 additions & 78 deletions src/components/rightBox/chatBox/ChatFooter.vue
View file
Original file line number Diff line number Diff line change
@@ -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)
})
/**
* 选择表情，并把表情插入输入框
Expand Down
26 changes: 16 additions & 10 deletions src/components/rightBox/chatBox/ChatHeader.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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">
Expand All @@ -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>

Expand Down
2 changes: 1 addition & 1 deletion src/components/rightBox/chatBox/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<!-- 中间聊天框内容 -->
<ChatMain :active-item="activeItemRef" />
<!-- 输入框和操作列表 -->
<ChatFooter class="flex-1" />
<ChatFooter class="flex-1" :friendId="activeItemRef.friendId" />
</n-flex>
<ChatSidebar />
</n-flex>
Expand Down
4 changes: 3 additions & 1 deletion uno.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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]'
}
})

0 comments on commit 69d7722

Please sign in to comment.