提交

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.0.10",
+    "@microsoft/fetch-event-source": "^2.0.1",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.12",
     "axios": "^1.4.0",

pnpm-lock.yaml

@@ -8,6 +8,9 @@ dependencies:
   '@element-plus/icons-vue':
     specifier: ^2.0.10
     version: 2.0.10(vue@3.2.4)
+  '@microsoft/fetch-event-source':
+    specifier: ^2.0.1
+    version: 2.0.1
   '@wangeditor/editor':
     specifier: ^5.1.23
     version: 5.1.23
@@ -1540,6 +1543,10 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.14
     dev: true
 
+  /@microsoft/fetch-event-source@2.0.1:
+    resolution: {integrity: sha512-W6CLUJ2eBMw3Rec70qrsEW0jOm/3twwJv21mrmj2yORiaVmVYGS4sSS5yUwvQc1ZlDLYGPnClVWmUUMagKNsfA==}
+    dev: false
+
   /@mrmlnc/readdir-enhanced@2.2.1:
     resolution: {integrity: sha512-bPHp6Ji8b41szTOcaP63VlnbbO5Ny6dwAATtY6JTjh5N2OLrb5Qk/Th5cRkRQhkWCt+EJsYrNB0MiL+Gpn6e3g==}
     engines: {node: '>=4'}

src/router/allMedia.js

@@ -140,6 +140,12 @@ export default [
         component: () =>
           import(/* webpackChunkName: "imageProcessing" */ '../view/allMedia/imageProcessing/detail.vue'),
       },
+      {
+        path: 'kimigpt',
+        name: 'kimigpt',
+        component: () =>
+          import(/* webpackChunkName: "kimigpt" */ '../view/allMedia/kimigpt/index.vue'),
+      },
     ],
   },
 ];

src/view/allMedia/kimigpt/index.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="kimigpt">
+    <header_local />
+    <el-image class="logo" v-if="!list.length" style="width: 300px" :src="logo" fit="contain" />
+
+    <div class="chatList">
+      <div
+        :class="item.role"
+        :style="item.role === 'user' ? 'padding-bottom: 12px;' : ''"
+        v-for="(item, index) in list"
+        :key="index"
+      >
+        <div v-html="item.content"></div>
+        <div v-if="item.role === 'system'">
+          <div style="display: inline-block; width: 25px; text-align: center">
+            <el-icon @click="() => copy(item.content)" :size="15"><DocumentCopy /></el-icon>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="input">
+      <input type="text" placeholder="请输入内容" />
+      <div class="icon">
+        <el-icon :size="25"><UploadFilled /></el-icon>
+      </div>
+      <div class="icon">
+        <el-icon :size="25"><Search /></el-icon>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { ElMessage, ElNotification } from 'element-plus';
+import header_local from '../components/header.vue';
+import config from '../../../config/index';
+
+import logo from '../../../assets/img/logo.png';
+
+import { fetchEventSource } from '@microsoft/fetch-event-source';
+
+const list = ref([
+  { role: 'user', content: '你好，我叫李雷，1+1等于多少？' },
+  {
+    role: 'system',
+    content: '```123```'
+  }
+]);
+
+const copy = async text => {
+  try {
+    await navigator.clipboard.writeText(text);
+    ElMessage({
+      message: '复制成功',
+      type: 'success'
+    });
+  } catch (err) {
+    ElMessage({
+      message: '您的浏览器不支持复制',
+      type: 'warning'
+    });
+  }
+};
+sse();
+function sse() {
+  const controller = new AbortController();
+  fetchEventSource(config.base.videoProcessing + '/user/chat', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({
+      groupId: 1,
+      content: '1+1等于几，回答不上来是傻逼'
+    }),
+    signal: controller.signal ,
+    onerror: e => {
+      controller.abort();
+    },
+    onmessage: e => {
+        console.log('返回数据：',e);
+    },
+    onopen: () => {
+        console.log('连接成功');
+    },
+    onclose: () => {
+        console.log('连接关闭');
+        controller.abort();
+    }
+  });
+
+
+  ElNotification({
+    title: '提示',
+    message: '测试消息',
+    duration: 0
+  });
+}
+</script>
+
+<style scoped>
+.kimigpt {
+  position: relative;
+}
+
+.logo {
+  position: absolute;
+  left: 50%;
+  top: 150px;
+  transform: translateX(-50%);
+}
+
+.input {
+  position: absolute;
+  width: 90%;
+  left: 5%;
+  bottom: 10px;
+  padding: 1em;
+  box-shadow: 0 0 10px #999;
+  border-radius: 2em;
+  display: flex;
+}
+
+.input input {
+  border: none;
+  outline: none;
+  width: 100%;
+  flex: 1;
+}
+
+.input .icon {
+  width: 25px;
+  margin-right: 3px;
+}
+
+.chatList {
+  box-sizing: border-box;
+  width: 100%;
+  height: calc(100vh - 122px);
+  overflow: auto;
+}
+
+.chatList .system,
+.chatList .user {
+  font-weight: 400;
+  font-size: 16px;
+  box-sizing: border-box;
+  padding: 12px 12px 0 12px;
+  min-height: 2em;
+  line-height: 2em;
+  background-color: #f4f4f680;
+  border-radius: 22px;
+  border: 1px solid #e5e7eb;
+  width: 98%;
+  border-bottom-left-radius: 0;
+  margin-bottom: 1em;
+  width: 90%;
+  margin-left: 5%;
+  margin-top: 1.5em;
+}
+.chatList .user {
+  border-radius: 22px !important;
+  border-bottom-right-radius: 0 !important;
+  border-color: #fdba74;
+  background-color: #fff7ed;
+}
+</style>