lingji-work-fe/src/views/home/components/history-conversation-drawer/index.vue

<script lang="jsx">
import { Drawer } from 'ant-design-vue';
import TextoverTips from '@/components/text-over-tips';
import Conversations from '@/components/xt-chat/conversations';
import SvgIcon from '@/components/svg-icon';
import { Button, Flex, Input } from 'ant-design-vue';
import DeleteChatModal from './delete-chat-modal.vue';
import { useRouter } from 'vue-router';

export default {
  setup(props, { emit, expose }) {
    const router = useRouter();
    const open = ref(false);
    const dataSource = ref([]);
    const activeKey = ref('');
    const deleteChatModalRef = ref(null);

    const showDrawer = () => {
      getData();
      open.value = true;
    };
    const getData = () => {
      dataSource.value = Array.from({ length: 4 }).map((conversation, index) => ({
        id: `${index + 1}`,
        key: `item${index + 1}`,
        label: `Conversation Item ${index + 1}Conversation Item 1`,
      }));
    };
    const onClose = () => {
      open.value = false;
    };
    const handleMenuClick = (menuInfo) => {
      const { item, key } = menuInfo;
      switch (key) {
        case 'pin':
          console.log('置顶');
          break;
        case 'rename':
          item.editing = true;
          break;
        case 'delete':
          deleteChatModalRef.value.open(item);
          break;
      }
    };
    const handleRename = (item) => {
      console.log('handleRename', item);
    };
    const handleActiveChange = (item) => {
      const { id } = item;
      router.push({
        name: 'Home',
        params: {
          conversationId: id,
        },
      });
    };

    expose({
      showDrawer,
    });

    return () => (
      <Drawer width={240} rootClassName="ct-history-conversation-drawer" v-model:open={open.value} onClose={onClose}>
        <header class="header h-40px px-12px flex justify-between items-center">
          <span class="s1">历史对话</span>
          <icon-close size={16} class="color-#211F24 cursor-pointer" onClick={onClose} />
        </header>
        <section class="flex-1 overflow-y-auto content p-12px">
          <Conversations
            v-model={activeKey.value}
            dataSource={dataSource.value}
            onMenuClick={handleMenuClick}
            onRename={handleRename}
            onActiveChange={handleActiveChange}
          />
        </section>
        <DeleteChatModal ref={deleteChatModalRef} />
      </Drawer>
    );
  },
};
</script>

<style lang="scss">
@import './style.scss';
</style>