85 lines
2.4 KiB
Vue
85 lines
2.4 KiB
Vue
<script lang="jsx">
|
|
import { Drawer } from 'ant-design-vue';
|
|
import TextoverTips from '@/components/text-over-tips';
|
|
import Conversations from '@/components/xt-chat/xt-conversations';
|
|
import SvgIcon from '@/components/svg-icon';
|
|
import { Button, Flex, Input } from 'ant-design-vue';
|
|
import DeleteChatModal from './delete-chat-modal.vue';
|
|
|
|
import { handleUserHome } from '@/utils/user';
|
|
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;
|
|
handleUserHome({ 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>
|