feat: 实现coze流的对话第一次提交

2025-11-26 16:57:21 +08:00
commit 6cdd5279a3
19 changed files with 3208 additions and 0 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,18 @@
+<script setup>
+import McChat from './components/McChat.vue';
+</script>
+
+<template>
+  <div class="app-container">
+      <McChat />
+  </div>
+</template>
+
+<style scoped>
+.app-container {
+  height: 100vh;
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+}
+</style>
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -0,0 +1,86 @@
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;
+
+  --vt-c-indigo: #2c3e50;
+
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);
+
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);
+
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);
+
+  --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
+
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
+
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition:
+    color 0.5s,
+    background-color 0.5s;
+  line-height: 1.6;
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
+    sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
--- a/src/assets/chat_avatar.svg
+++ b/src/assets/chat_avatar.svg
--- a/src/assets/chat_logo.png
+++ b/src/assets/chat_logo.png
--- a/src/assets/chat_logo.svg
+++ b/src/assets/chat_logo.svg
@@ -0,0 +1,44 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5483 47.8994C10.7002 48.005 9.52586 45.9542 10.5523 44.4138L16.2493 35.8647C16.3933 35.6486 16.4579 35.3892 16.4321 35.1308L15.5776 26.5826C15.4527 25.333 16.3773 24.2241 17.6289 24.1222L39.4688 22.3438L27.6899 47.0337L12.5483 47.8994V47.8994Z" fill="url(#paint0_linear_0_201)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M55.124 45.4762C56.1859 46.9926 55.0588 49.0703 53.2086 49.007L42.9447 48.6555C42.685 48.6467 42.4303 48.7282 42.224 48.8862L35.4066 54.1071C34.4095 54.8707 32.98 54.6676 32.235 53.6566L19.2317 36.0109L46.4213 33.0494L55.124 45.4762V45.4762Z" fill="url(#paint1_linear_0_201)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.1698 9.75638C32.9767 8.0901 35.3402 8.06209 36.1864 9.70873L40.8801 18.843C40.9989 19.0742 41.1942 19.2569 41.4327 19.3601L49.3134 22.7697C50.466 23.2684 50.9852 24.6157 50.4653 25.7589L41.3911 45.7121L25.5578 23.411L32.1698 9.75638V9.75638Z" fill="url(#paint2_linear_0_201)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.1698 9.75638C32.9767 8.0901 35.3402 8.06209 36.1864 9.70873L40.8801 18.843C40.9989 19.0742 41.1942 19.2569 41.4327 19.3601L49.3134 22.7697C50.466 23.2684 50.9852 24.6157 50.4653 25.7589L41.3911 45.7121L25.5578 23.411L32.1698 9.75638V9.75638Z" fill="url(#paint3_linear_0_201)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M39.4687 22.3438L33.3862 34.4701L17.5514 35.4628C16.9489 35.5006 16.4245 35.055 16.3645 34.4543L15.5776 26.5826C15.4527 25.333 16.3772 24.2241 17.6288 24.1222L39.4687 22.3438V22.3438Z" fill="url(#paint4_linear_0_201)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.33589 31.9765C8.0982 31.9765 7.09485 32.9802 7.09485 34.2185C7.09485 35.4567 8.0982 36.4604 9.33589 36.4604C9.93765 36.4604 10.484 36.2232 10.8866 35.837V35.8456L12.5949 34.1365H11.5755C11.5323 32.9362 10.5461 31.9765 9.33589 31.9765Z" fill="url(#paint5_linear_0_201)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M47.4867 14.6305C48.1059 13.5584 47.739 12.1874 46.6671 11.5683C45.5952 10.9492 44.2243 11.3164 43.6051 12.3885C43.3062 12.9059 43.2371 13.4929 43.366 14.0314L43.358 14.0268L43.9828 16.3611L44.4882 15.4861C45.5502 16.0551 46.8796 15.6815 47.4867 14.6305Z" fill="url(#paint6_linear_0_201)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M43.3568 56.1077C43.976 57.1798 45.347 57.547 46.4188 56.9279C47.4907 56.3088 47.8576 54.9378 47.2384 53.8657C46.9372 53.3442 46.4582 52.9895 45.9222 52.834L45.9265 52.8315L43.5923 52.2062L44.1027 53.0899C43.0879 53.7282 42.752 55.0605 43.3568 56.1077Z" fill="url(#paint7_linear_0_201)"/>
+<defs>
+<linearGradient id="paint0_linear_0_201" x1="39.4688" y1="22.3438" x2="8.05859" y2="22.3438" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3EB9FC"/>
+<stop offset="1" stop-color="#3AE5F6"/>
+</linearGradient>
+<linearGradient id="paint1_linear_0_201" x1="54.0079" y1="46.1761" x2="39.5026" y2="23.3232" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3CB2FD"/>
+<stop offset="1" stop-color="#2170F3"/>
+</linearGradient>
+<linearGradient id="paint2_linear_0_201" x1="56.6755" y1="18.2599" x2="34.1303" y2="5.70763" gradientUnits="userSpaceOnUse">
+<stop stop-color="#50D3AB"/>
+<stop offset="1" stop-color="#6DBFFF"/>
+</linearGradient>
+<linearGradient id="paint3_linear_0_201" x1="36.1009" y1="10.2466" x2="23.789" y2="33.5907" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F280FF"/>
+<stop offset="1" stop-color="#A723E4"/>
+</linearGradient>
+<linearGradient id="paint4_linear_0_201" x1="39.4687" y1="22.3437" x2="15.3502" y2="22.3437" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3EB9FC"/>
+<stop offset="1" stop-color="#3AE5F6"/>
+</linearGradient>
+<linearGradient id="paint5_linear_0_201" x1="7.0949" y1="31.9764" x2="7.0949" y2="36.4604" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3EB9FC"/>
+<stop offset="1" stop-color="#3AE5F6"/>
+</linearGradient>
+<linearGradient id="paint6_linear_0_201" x1="42.7688" y1="14.6941" x2="46.058" y2="16.5277" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F280FF"/>
+<stop offset="1" stop-color="#A723E4"/>
+</linearGradient>
+<linearGradient id="paint7_linear_0_201" x1="45.2215" y1="51.6527" x2="41.8927" y2="53.6102" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3CB2FD"/>
+<stop offset="1" stop-color="#2170F3"/>
+</linearGradient>
+</defs>
+</svg>
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -0,0 +1,31 @@
+@import './base.css';
+
+#app {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-weight: normal;
+  overflow: hidden;
+}
+
+a,
+.green {
+  text-decoration: none;
+  color: hsla(160, 100%, 37%, 1);
+  transition: 0.4s;
+  padding: 3px;
+}
+
+@media (hover: hover) {
+  a:hover {
+    background-color: hsla(160, 100%, 37%, 0.2);
+  }
+}
+
+@media (min-width: 1024px) {
+
+  #app {
+    display: block;
+  }
+}
--- a/src/components/McChat.vue
+++ b/src/components/McChat.vue
@@ -0,0 +1,265 @@
+<template>
+  <McLayout class="container">
+    <McHeader :logoImg="logoImg">
+      <template #operationArea>
+        <div class="operations">
+          <!-- <i class="icon-helping"></i> -->
+        </div>
+      </template>
+    </McHeader>
+    <McLayoutContent
+      v-if="startPage"
+      style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px"
+    >
+      <McIntroduction
+        :logoImg="logoImg"
+        :subTitle="'Hi，欢迎使用 NIANXX'"
+        :description="description"
+      ></McIntroduction>
+      <McPrompt
+        :list="introPrompt.list"
+        :direction="introPrompt.direction"
+        class="intro-prompt"
+        @itemClick="onSubmit($event.label)"
+      ></McPrompt>
+    </McLayoutContent>
+    <McLayoutContent class="content-container" v-else>
+      <template v-for="(msg, idx) in messages" :key="idx">
+        <McBubble
+          v-if="msg.from === 'user'"
+          :content="msg.content"
+          :align="'right'"
+          :avatarConfig="{ imgSrc: avatarImg }"
+        >
+        </McBubble>
+        <McBubble v-else :avatarConfig="{ imgSrc: chatLogoImg }" :loading="msg.loading"> 
+          <McMarkdownCard :content="msg.content"> </McMarkdownCard>
+        </McBubble>
+      </template>
+    </McLayoutContent>
+    <div class="shortcut" style="display: flex; align-items: center; gap: 8px">
+      <McPrompt
+        v-if="!startPage"
+        :list="simplePrompt"
+        :direction="'horizontal'"
+        style="flex: 1"
+        @itemClick="onSubmit($event.label)"
+      ></McPrompt>
+      <Button
+        style="margin-left: auto"
+        icon="add"
+        shape="circle"
+        title="新建对话"
+        size="md"
+        @click="newConversation"
+      />
+    </div>
+    <McLayoutSender>
+      <McInput :value="inputValue" :maxLength="2000" @change="(e) => (inputValue = e)" @submit="onSubmit">
+        <template #extra>
+          <div class="input-foot-wrapper">
+            <div class="input-foot-left">
+              <!-- <span v-for="(item, index) in inputFootIcons" :key="index">
+                <i :class="item.icon"></i>
+                {{ item.text }}
+              </span>
+              <span class="input-foot-dividing-line"></span> -->
+              <span class="input-foot-maxlength">{{ inputValue.length }}/2000</span>
+            </div>
+            <div class="input-foot-right">
+              <Button icon="op-clearup" shape="round" :disabled="!inputValue" @click="inputValue = ''"><span class="demo-button-content">清空输入</span></Button>
+            </div>
+          </div>
+        </template>
+      </McInput>
+    </McLayoutSender>
+  </McLayout>
+</template>
+
+<script setup lang="ts">
+import logoImg from '@/assets/logo.png';
+import avatarImg from '@/assets/chat_avatar.svg';
+import chatLogoImg from '@/assets/chat_logo.png';
+
+import { ref } from 'vue';
+import { Button } from 'vue-devui/button';
+import 'vue-devui/button/style.css';
+import { CozeAPI } from "@coze/api";
+
+
+const description = [
+  'NIANXX 可以辅助研发人员编码、查询知识和相关作业信息、编写文档等。',
+  '作为AI模型，NIANXX 提供的答案可能不总是确定或准确的，但您的反馈可以帮助 NIANXX 做的更好。',
+];
+const introPrompt = {
+  direction: 'horizontal',
+  list: [
+    {
+      value: 'quickSort',
+      label: '帮我写一个推广帖子',
+      iconConfig: { name: 'icon-info-o', color: '#5e7ce0' },
+      desc: '云从朵花适合疗愈、养生的推广帖子',
+    },
+    {
+      value: 'helpMd',
+      label: '你可以帮我做些什么？',
+      iconConfig: { name: 'icon-star', color: 'rgb(255, 215, 0)' },
+      desc: '了解当前大模型可以帮你做的事',
+    },
+    {
+      value: 'bindProjectSpace',
+      label: '亲子家庭的种草笔记',
+      iconConfig: { name: 'icon-priority', color: '#3ac295' },
+      desc: '要突出孩子能玩的项目和解放父母的特点',
+    },
+  ],
+};
+const simplePrompt = [
+  {
+    value: 'quickSort',
+    iconConfig: { name: 'icon-info-o', color: '#5e7ce0' },
+    label: '亲子种草笔记',
+  },
+  {
+    value: 'helpMd',
+    iconConfig: { name: 'icon-star', color: 'rgb(255, 215, 0)' },
+    label: '你可以帮我做些什么？',
+  },
+];
+const startPage = ref(true);
+const inputValue = ref('');
+const inputFootIcons = [
+  { icon: 'icon-at', text: '智能体' },
+  { icon: 'icon-standard', text: '词库' },
+  { icon: 'icon-add', text: '附件' },
+];
+
+const apiClient = new CozeAPI({
+  token: "cztei_lZ7Dx1q6NKcVFg0d6iT0Aesdmo5vnhgBH7TCacaxEBk9D2fIBTOwNCgxFh0a7Vo7Z",
+  baseURL: "https://api.coze.cn",
+});
+
+const messages = ref<any[]>([]);
+
+const newConversation = () => {
+  startPage.value = true;
+  messages.value = [];
+}
+
+const onSubmit = async (evt) => {
+  if (!evt.trim()) return;
+
+  inputValue.value='';
+  startPage.value = false;
+
+  // 用户发送消息
+  messages.value.push({
+    from: 'user',
+    content: evt,
+  });
+
+  // 创建 AI 项目
+  const aiMsg = {from: "model", content: "", loading: true};
+  messages.value.push(aiMsg);
+  const lastIndex = messages.value.length - 1;
+
+  try {
+    const stream = await apiClient.workflows.runs.stream({
+        workflow_id: "7576194460502753314",
+        parameters: {
+          theme: evt,
+        },
+    });
+  
+    // 流式处理
+    for await (const chunk of stream) {
+      if (messages.value[lastIndex].loading) {
+        messages.value[lastIndex].loading = false;
+        messages.value[lastIndex].content = "";
+      }
+
+      if (chunk && chunk.event === "Message" && chunk.data?.content) {
+        messages.value[lastIndex].content += chunk.data.content;
+      }
+
+      if (chunk && chunk.event === "End") {
+        const content = messages.value[lastIndex].content;
+        if (!content || messages.value[lastIndex].loading) {
+          messages.value[lastIndex].content = "未获取到内容，请重试";
+          messages.value[lastIndex].loading = false;
+        }
+      }
+    }
+    
+  } catch (error) {
+    console.error("调用 API 发生错误:", error);
+    messages.value[lastIndex].content = "未获取到内容，请重试";
+    messages.value[lastIndex].loading = false;
+  } finally {
+  }
+};
+
+</script>
+
+<style>
+.container {
+  width: 1000px;
+  margin: 20px auto;
+  height: calc(100vh - 82px);
+  padding: 20px;
+  gap: 8px;
+  background: #fff;
+  border: 1px solid #ddd;
+  border-radius: 16px;
+}
+
+.content-container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow: auto;
+}
+
+.input-foot-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  margin-right: 8px;
+
+  .input-foot-left {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    span {
+      font-size: 14px;
+      line-height: 18px;
+      color: #252b3a;
+      cursor: pointer;
+    }
+
+    .input-foot-dividing-line {
+      width: 1px;
+      height: 14px;
+      background-color: #d7d8da;
+    }
+
+    .input-foot-maxlength {
+      font-size: 14px;
+      color: #71757f;
+    }
+  }
+
+  .input-foot-right {
+    .demo-button-content {
+      font-size: 14px;
+    }
+
+    & > *:not(:first-child) {
+      margin-left: 8px;
+    }
+  }
+}
+</style>
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,6 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import MateChat from '@matechat/core';
+import '@devui-design/icons/icomoon/devui-icon.css';
+
+createApp(App).use(MateChat).mount('#app');