feat: Conversations封装、首页开发

src/views/home/components/history-conversation-drawer/delete-chat-modal.vue

@@ -0,0 +1,51 @@
+<template>
+  <a-modal v-model:visible="visible" title="删除对话" width="400px" @close="onClose">
+    <div class="flex items-center">
+      <img :src="icon1" width="20" height="20" class="mr-12px" />
+      <span>确认删除对话吗？删除后，聊天记录将不可恢复。</span>
+    </div>
+    <template #footer>
+      <a-button size="large" @click="onClose">取消</a-button>
+      <a-button type="primary" class="ml-16px !bg-#f64b31 !border-none" status="danger" size="large" @click="onDelete"
+        >确定</a-button
+      >
+    </template>
+  </a-modal>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { deleteTask, deleteBatchTasks } from '@/api/all/common';
+import icon1 from '@/assets/img/media-account/icon-warn-1.png';
+
+const emits = defineEmits(['update', 'close', 'batchUpdate']);
+
+const visible = ref(false);
+const chatId = ref(null);
+
+const isBatch = computed(() => Array.isArray(taskId.value));
+
+function onClose() {
+  visible.value = false;
+  chatId.value = null;
+  emits('close');
+}
+
+const open = (record) => {
+  const { id = null } = record;
+  chatId.value = id;
+
+  visible.value = true;
+};
+
+async function onDelete() {
+  const { code } = await deleteTask(chatId.value);
+  if (code === 200) {
+    AMessage.success('删除成功');
+    emits('delete', chatId.value);
+    onClose();
+  }
+}
+
+defineExpose({ open });
+</script>

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>

src/views/home/components/history-conversation-drawer/style.scss

@@ -0,0 +1,37 @@
+.ct-history-conversation-drawer {
+  border-radius: 8px;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
+  .ant-drawer-content {
+    .ant-drawer-header {
+      display: none;
+    }
+    .ant-drawer-body {
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      .header {
+        position: relative;
+        &::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 100%;
+          height: 1px;
+          margin: 0 16px;
+          background: #f2f3f5;
+        }
+      }
+      .content {
+        .ant-conversations {
+          gap: 0;
+          padding: 0;
+          .ant-conversations-item {
+            gap: 0;
+            padding: 8px;
+          }
+        }
+      }
+    }
+  }
+}