xiangyuan-app/src/pages/home/chat/components/Footer/ChatMulitSelectBar.vue

<template>  
  <FlexRow align="center" justify="space-between" gap="gap.sm">
    <span>已选择 {{ selectedCount }} 条消息</span>
    <FlexRow align="center" gap="gap.sm" overflow="auto">
      <Button
        type="danger" 
        icon="trash"
        :disabled="!isAnyItemSelected" 
        @click="sessionManager.onDeleteMessages(selectedMessageIds)"
      >
        删除
      </Button>
      <Button type="primary" icon="select" @click="emit('cancel')">
        完成
      </Button>
    </FlexRow>
  </FlexRow>
</template>

<script setup lang="ts">
import { useChatSelectionChild } from '../../composables/useChatSelection';
import { useChatExportSave } from '../../composables/useChatExportSave';
import type { ChatMessage } from '../../model/Message';
import type { ChatSessionManager } from '../../composables/useChatSession';
import FlexRow from '@/components/layout/FlexRow.vue';
import Button from '@/components/basic/Button.vue';

const props = defineProps<{
  selectedCount: number;
  messages: ChatMessage[];
  sessionManager: ChatSessionManager;
}>();

const emit = defineEmits<{
  (e: 'cancel'): void;
  (e: 'delete'): void;
}>();

const {
  isAnyItemSelected,
  selectedMessageIds
} = useChatSelectionChild();
</script>