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

This commit is contained in:
zoujing committed 2025-11-26 16:57:21 +08:00
commit 6cdd5279a3
19 files changed
+3208

No files matched your search

+36
View File
@@ -0,0 +1,36 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
.DS_Store
dist
dist-ssr
coverage
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
*.tsbuildinfo
.eslintcache
# Cypress
/cypress/videos/
/cypress/screenshots/
# Vitest
__screenshots__/
+3
View File
@@ -0,0 +1,3 @@
{
"recommendations": ["Vue.volar"]
}
+38
View File
@@ -0,0 +1,38 @@
# code-start
This template should help get you started developing with Vue 3 in Vite.
## Recommended IDE Setup
[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
## Recommended Browser Setup
- Chromium-based browsers (Chrome, Edge, Brave, etc.):
- [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
- [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
- Firefox:
- [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
- [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
## Customize configuration
See [Vite Configuration Reference](https://vite.dev/config/).
## Project Setup
```sh
npm install
```
### Compile and Hot-Reload for Development
```sh
npm run dev
```
### Compile and Minify for Production
```sh
npm run build
```
+13
View File
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/chat_logo.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NIANXX</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
+8
View File
@@ -0,0 +1,8 @@
{
"compilerOptions": {
"paths": {
"@/*": ["./src/*"]
}
},
"exclude": ["node_modules", "dist"]
}
+26
View File
@@ -0,0 +1,26 @@
{
"name": "code-start",
"version": "0.0.0",
"private": true,
"type": "module",
"engines": {
"node": "^20.19.0 || >=22.12.0"
},
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"@coze/api": "^1.3.8",
"@devui-design/icons": "^1.4.0",
"@matechat/core": "^1.10.0",
"vue": "^3.5.22",
"vue-devui": "^1.6.34"
},
"devDependencies": {
"@vitejs/plugin-vue": "^6.0.1",
"vite": "^7.1.11",
"vite-plugin-vue-devtools": "^8.0.3"
}
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

+18
View File
@@ -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>
+86
View File
@@ -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;
}
+1
View File
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1735356149868" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5272" xmlns:xlink="http://www.w3.org/1999/xlink" width="200.1953125" height="200"><path d="M513.8875 0C231.1375 0 1.891667 229.25 1.891667 512c0 174.154167 86.9875 327.979167 219.8625 420.475 25.9375-90.3375 91.558333-158.35 180.8375-189.3375a310.0875 310.0875 0 0 1 10.029166-3.2875c0.954167-0.295833 1.904167-0.608333 2.866667-0.9a328.041667 328.041667 0 0 1 26.495833-6.741667c1.204167-0.254167 2.425-0.479167 3.6375-0.720833a332.75 332.75 0 0 1 24.3125-3.945833c1.379167-0.175 2.75-0.366667 4.133334-0.525a357.916667 357.916667 0 0 1 14.079166-1.358334h18.545834c1.770833 0.120833 3.658333 0.120833 5.55 0h1.654166c-130.470833 0-236.6625-103.670833-240.858333-233.120833-0.145833-0.091667-0.291667-0.166667-0.4375-0.258333-8.295833-155.104167 131.7875-250.454167 233.391667-248.5375 2.629167-0.0875 5.254167-0.2 7.904166-0.2 2.516667 0 5.004167 0.1125 7.495834 0.1875 29.391667-0.5 61.9375 7.083333 93.2125 21.8625a241.125 241.125 0 0 1 57.345833 37.083333c50.608333 43.075 87.366667 108.058333 83.004167 189.6l-0.195834 0.116667c-4.120833 129.520833-110.3375 233.2625-240.8625 233.2625h25.983334a356.083333 356.083333 0 0 1 14.058333 1.358333c1.4 0.158333 2.779167 0.35 4.170833 0.529167a309.825 309.825 0 0 1 14.358334 2.1125c3.3 0.558333 6.570833 1.166667 9.820833 1.816666 1.254167 0.25 2.5125 0.479167 3.754167 0.745834a327.791667 327.791667 0 0 1 26.379166 6.7125c1.033333 0.3125 2.054167 0.645833 3.0875 0.966666 3.283333 1.020833 6.5375 2.083333 9.7625 3.204167 89.25 30.9625 154.895833 98.954167 180.9125 189.270833 132.7875-92.504167 219.708333-246.279167 219.708334-420.370833C1025.891667 229.25 796.641667 0 513.8875 0z" fill="#F08E83" p-id="5273"></path><path d="M754.754167 492.391667c-63.754167 39.791667-230.933333-17.7625-280.608334-105.491667-46.325 81.2625-124.820833 153.2375-201.1125 105.633333 4.195833 129.45 110.383333 233.120833 240.858334 233.120834 130.520833 0 236.7375-103.741667 240.8625-233.2625zM614.6 265.591667a260.729167 260.729167 0 0 1 57.345833 37.083333 241.158333 241.158333 0 0 0-57.345833-37.083333zM521.3875 243.729167c-2.495833-0.075-4.979167-0.1875-7.495833-0.1875-2.65 0-5.275 0.1125-7.904167 0.2 2.533333 0.05 5.066667 0.104167 7.554167 0.275 2.575-0.179167 5.208333-0.245833 7.845833-0.2875z" fill="#FCE9EA" p-id="5274"></path><path d="M441.979167 732.204167c1.204167-0.254167 2.425-0.479167 3.6375-0.720834-1.2125 0.241667-2.433333 0.470833-3.6375 0.720834zM455.566667 729.645833zM553.929167 727.0125c1.4 0.158333 2.779167 0.35 4.170833 0.529167-1.391667-0.179167-2.770833-0.370833-4.170833-0.529167zM567.941667 728.916667zM412.616667 739.845833c0.954167-0.295833 1.904167-0.608333 2.866666-0.9-0.9625 0.291667-1.908333 0.604167-2.866666 0.9zM582.283333 731.470833c1.25 0.25 2.5125 0.483333 3.754167 0.745834-1.241667-0.266667-2.5-0.5-3.754167-0.745834zM612.416667 738.929167c1.033333 0.3125 2.054167 0.645833 3.0875 0.966666-1.029167-0.320833-2.05-0.654167-3.0875-0.966666zM625.266667 743.1l2.1375 0.758333a119.479167 119.479167 0 0 1-10.475 22.158334c17.145833 26.404167 12.841667 141.5375-12.925 123.341666l-45.116667-31.654166-45-31.654167 2.95-2.079167c-0.983333 0.025-1.9625 0.075-2.95 0.075-1.029167 0-2.045833-0.054167-3.070833-0.079166l2.95 2.083333-45 31.654167-45.116667 31.654166c-25.9125 18.229167-30.204167-97.329167-12.883333-123.470833a119.583333 119.583333 0 0 1-10.379167-21.975c0.733333-0.2625 1.4625-0.520833 2.195833-0.775-89.279167 30.991667-154.9 99.004167-180.8375 189.3375 82.854167 57.679167 183.5375 91.525 292.1375 91.525 108.666667 0 209.404167-33.8875 292.291667-91.629167-26.0125-90.316667-91.658333-158.3125-180.908333-189.270833zM469.929167 727.5375c1.379167-0.175 2.75-0.366667 4.133333-0.525-1.3875 0.158333-2.754167 0.35-4.133333 0.525z" fill="#CFE07D" p-id="5275"></path><path d="M410.770833 765.8875c3.441667-5.195833 7.733333-6.879167 12.883334-3.258333l45.116666 31.654166 42.045834 29.6875c1.025 0.025 2.041667 0.079167 3.070833 0.079167 0.9875 0 1.9625-0.05 2.95-0.075l42.054167-29.691667 45.116666-31.654166c5.175-3.654167 9.475-1.9125 12.925 3.3875a119.479167 119.479167 0 0 0 10.475-22.158334l-2.1375-0.758333a318.3625 318.3625 0 0 0-9.7625-3.204167c-1.033333-0.320833-2.054167-0.654167-3.0875-0.966666a327.791667 327.791667 0 0 0-26.379166-6.7125c-1.245833-0.2625-2.508333-0.495833-3.754167-0.745834a349.516667 349.516667 0 0 0-14.341667-2.554166 353.654167 353.654167 0 0 0-9.8375-1.375c-1.391667-0.179167-2.770833-0.370833-4.170833-0.529167a356.083333 356.083333 0 0 0-14.058333-1.358333h-27.6375c-1.891667 0.120833-3.779167 0.120833-5.55 0h-18.545834a357.916667 357.916667 0 0 0-14.079166 1.358333c-1.3875 0.158333-2.754167 0.35-4.133334 0.525a343.516667 343.516667 0 0 0-14.3625 2.108333c-3.341667 0.566667-6.658333 1.179167-9.95 1.8375-1.2125 0.Line truncated

After

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

+44
View File
@@ -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>

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

+31
View File
@@ -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;
}
}
+265
View File
@@ -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>
+6
View File
@@ -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');
+15
View File
@@ -0,0 +1,15 @@
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
vue(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
},
},
})
+2618
View File
File diff suppressed because it is too large. Load diff