feat: Conversations封装、首页开发

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

@@ -0,0 +1,74 @@
+<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';
+
+export default {
+  setup(props, { emit, expose }) {
+    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) => ({
+        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);
+    };
+
+    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}
+          />
+        </section>
+        <DeleteChatModal ref={deleteChatModalRef} />
+      </Drawer>
+    );
+  },
+};
+</script>
+
+<style lang="scss">
+@import './style.scss';
+</style>