import type { Message } from '../types'
|
|
import { computed, reactive } from 'vue'
|
|
/**
|
* 消息多选模式
|
*
|
* 模块级单例 reactive state；MessagePanel 子树内多处共享：
|
* - MessageItem 渲染勾选 + 切换勾选
|
* - MessageMultiSelectBar 底栏读选中数
|
* - MessageForwardDialog 转发成功后 exit
|
* - MessagePanel watch activeConversation 切会话 exit
|
*/
|
const state = reactive({
|
active: false,
|
/** 已选 clientMessageId 列表，按选中顺序保序 */
|
selectedClientMessageIds: [] as string[]
|
})
|
|
/** 已选 clientMessageId 集合；MessageItem 大量 has 查询走它，避免 array.includes O(N²) */
|
const selectedIdSet = computed(() => new Set(state.selectedClientMessageIds))
|
|
/** 进入多选模式，可附带初始勾选项 */
|
function enter(initialMessage?: Message) {
|
state.active = true
|
state.selectedClientMessageIds = initialMessage ? [initialMessage.clientMessageId] : []
|
}
|
|
/** 退出多选模式 */
|
function exit() {
|
state.active = false
|
state.selectedClientMessageIds = []
|
}
|
|
/** 切换某条消息的选中态 */
|
function toggle(message: Message) {
|
const ids = state.selectedClientMessageIds
|
const index = ids.indexOf(message.clientMessageId)
|
if (index === -1) {
|
ids.push(message.clientMessageId)
|
} else {
|
ids.splice(index, 1)
|
}
|
}
|
|
export function useMessageMultiSelect() {
|
return { state, selectedIdSet, enter, exit, toggle }
|
}
|
