feat: 首页调整

src/views/home/components/conversation-detail/index.vue

@@ -0,0 +1,112 @@
+<script lang="tsx">
+import { message } from 'ant-design-vue';
+import { BubbleList } from 'ant-design-x-vue';
+import type { BubbleListProps } from 'ant-design-x-vue';
+import { useRoute } from 'vue-router';
+import SenderInput from '../sender-input/index.vue';
+import markdownit from 'markdown-it';
+import { Typography } from 'ant-design-vue';
+
+const QUESTION_ROLE = 'question';
+const ANSWER_ROLE = 'text';
+
+export default {
+  setup(props, { emit, expose }) {
+    const route = useRoute();
+    const senderRef = ref(null);
+    const searchValue = ref('');
+    const generateLoading = ref(false);
+    const conversationList = ref([]);
+    const md = markdownit({ html: true, breaks: true });
+
+    const conversationId = computed(() => {
+      return route.params.conversationId;
+    });
+
+    const handleSubmit = () => {
+      generateLoading.value = true;
+      conversationList.value.push({
+        role: QUESTION_ROLE,
+        content: searchValue.value,
+      });
+      
+      const tempId = Date.now();
+      const tempIndex = conversationList.value.length;
+      conversationList.value.push({
+        id: tempId,
+        loading: true,
+        role: ANSWER_ROLE
+      });
+      
+      setTimeout(() => {
+        const content = `> Render as markdown content to show rich text!
+          Link: [Ant Design X](https://x.ant.design)
+      `;
+        searchValue.value = '';
+        conversationList.value.splice(tempIndex, 1, {
+          id: tempId,
+          loading: false,
+          role: ANSWER_ROLE,
+          content,
+          messageRender: (content) => (
+            <Typography>
+              <div v-html={md.render(content)}></div>
+            </Typography>
+          ),
+        });
+      }, 1000);
+    };
+
+    const handleCancel = () => {
+      generateLoading.value = false;
+      message.info('取消生成');
+    };
+
+    const roles: BubbleListProps['roles'] = {
+      [ANSWER_ROLE]: {
+        placement: 'start',
+        variant: 'borderless',
+        typing: { step: 2, interval: 100 },
+        onTypingComplete: () => {
+          generateLoading.value = false;
+        },
+      },
+      [QUESTION_ROLE]: {
+        placement: 'end',
+        shape: 'round',
+        styles: {
+          content: {
+            padding: '6px 12px',
+          },
+        },
+      },
+    };
+
+    return () => (
+      <div class="conversation-detail-wrap w-full h-full flex">
+        <div class="flex-1 flex justify-center">
+          <section class="main w-600px h-full relative flex flex-col pt-20px">
+            <BubbleList class="flex-1" roles={roles} items={conversationList.value} />
+            <div class="w-full flex flex-col justify-center items-center">
+              <SenderInput
+                class="w-full"
+                ref={senderRef}
+                placeholder="继续追问..."
+                v-model={searchValue.value}
+                loading={generateLoading.value}
+                onSubmit={handleSubmit}
+                onCancel={handleCancel}
+              />
+              <p class="cts !color-#939499 text-12px !lh-20px my-4px">内容由AI生成，仅供参考</p>
+            </div>
+          </section>
+        </div>
+      </div>
+    );
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import './style.scss';
+</style>