feat: 实现coze流的对话 第一次提交
This commit is contained in:
zoujing
36
.gitignore
vendored
Normal file
36
.gitignore
vendored
Normal 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
.vscode/extensions.json
vendored
Normal file
3
.vscode/extensions.json
vendored
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"recommendations": ["Vue.volar"]
|
||||||
|
}
|
||||||
38
README.md
Normal file
38
README.md
Normal 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
index.html
Normal file
13
index.html
Normal 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
jsconfig.json
Normal file
8
jsconfig.json
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"exclude": ["node_modules", "dist"]
|
||||||
|
}
|
||||||
26
package.json
Normal file
26
package.json
Normal 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"
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
public/chat_logo.png
Normal file
BIN
public/chat_logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
18
src/App.vue
Normal file
18
src/App.vue
Normal 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
src/assets/base.css
Normal file
86
src/assets/base.css
Normal 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
src/assets/chat_avatar.svg
Normal file
1
src/assets/chat_avatar.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.3 KiB |
BIN
src/assets/chat_logo.png
Normal file
BIN
src/assets/chat_logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
44
src/assets/chat_logo.svg
Normal file
44
src/assets/chat_logo.svg
Normal 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 |
BIN
src/assets/logo.png
Normal file
BIN
src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
31
src/assets/main.css
Normal file
31
src/assets/main.css
Normal 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
src/components/McChat.vue
Normal file
265
src/components/McChat.vue
Normal 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
src/main.js
Normal file
6
src/main.js
Normal 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
vite.config.js
Normal file
15
vite.config.js
Normal 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))
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user