人工智能之web前端开发（deepSeek与文心一言结合版）

一.项目功能：

• 智能问答（实时谈天+流通打字机效果+自动滚动）
  
• 克制天生（取消接口调用）、重新天生
  
• 复制功能、问答分页
  

二.效果展示：

三.技术分析：

• fetchEventSource：传统axios哀求是等接口将所有数据一次性相应回来后再渲染到页面上，当数据量较大时，相应速度较慢，且无法做到实时输出。而fetchEventSource允许客户端吸收来自服务器的实时更新，前端可以实时的将流式数据展示到页面上，类似于打字机的效果。
  
  1. fetchEventSource(url, {
  2.         method: "GET",
  3.         headers: {
  4.           "Content-type": "application/json",
  5.           Accept: "text/event-stream"
  6.         },
  7.         openWhenHidden: true,
  8.         onopen: (e) => {
  9.           //接口请求成功，但此时数据还未响应回来
  10.         },
  11.         onmessage: (event) => {
  12.          //响应数据持续数据
  13.         },
  14.         onclose: () => {
  15.          //请求关闭
  16.         },
  17.         onerror: () => {
  18.           //请求错误
  19.         }
  20.       })

  复制代码
  
  
• MarkdownIt ：SSE相应的数据格式是markdown，无法直接展示，需要使用MarkdownIt第三方库转换成html，然后通过v-model展示到页面上。
  
  1.     // 1、新建实例md：
  2.     const md = new MarkdownIt()
  3.     // 2.将markdown转化为html
  4.     const htmlStr= md.render(markdownStr)

  复制代码
  
  
• Clipboard+html-to-text：复制时，需要使用html-to-text第三方库将html转化为text，然后借助Clipboard复制到粘贴板上。
  
  1. //1.在html中设置“copy”类名，并绑定data-clipboard-text
  2. <el-icon class="copy" @click="copyFn(copyHtmlStr)" :data-clipboard-text="copyText"> </el-icon>
  4. //2.先将html转化成text，然后复制到粘贴板
  5. const copyFn = (copyHtmlStr) => {
  6.      copyText.value=htmlToText(copyHtmlStr)
  7.       const clipboard = new Clipboard(".copy")
  8.       // 成功
  9.       clipboard.on("success", function (e) {
  10.         ElMessage.success("复制成功")
  11.         e.clearSelection()
  12.         // 释放内存
  13.         clipboard.destroy()
  14.       })
  15.       // 失败
  16.       clipboard.on("error", function (e) {
  17.         ElMessage.error("复制失败")
  18.         clipboard.destroy()
  19.       })
  20.     }

  复制代码
  
  
• scrollEvent：由于数据流式输出，页面内容持续增加，大概会溢出屏幕，因此需要在fetchEventSource吸收消息onmessage的过程中，通过设置scrollTop =scrollHeight让页面实现自动滚动。
  
  1. fetchEventSource(url, {
  2.         ...,
  3.         onmessage: (event) => {
  4.          chatContainerRef.value.scrollTop = chatContainerRef.value.scrollHeight
  5.         },
  6.         ...
  7.       })

  复制代码
  
  

四：疑难点及办理方案：

1.  题目形貌：当页面哀求fetchEventSource已发出时，切换url到其他网站再切换回来到这个页面时，fetchEventSource会重复哀求，导致这两次哀求的内容重复。
     办理方案：设置openWhenHidden为true,表示当页面退至后台时仍保持连接，默认值为false
2.  题目形貌：前端调用AbortController的abort()方法取消哀求时，只有第一次取消见效，当重新哀求时，再次点击克制按钮不见效。
    办理方案：每哀求一次创建一个新的AbortController()实例，由于AbortController实例的abort()方法被设计为只能调用一次来取消哀求，一旦调用了abort()，与AbortController干系的AbortSigal的aborted属性就会被设置成true,表示哀求已取消，当再次调用abort()不会有任何效果。

3.  题目形貌：当在fetchEventSource的onmessage中设置scrollTop =scrollHeight时，在天生题目的过程中无法向上滚动，但业务想要边天生边滚动检察。
    办理方案：监听鼠标滚轮事件，在设置scrollTop =scrollHeight时添加判断，假如鼠标滚轮滑动且未到页面底部，则不自动滚动。

1. const isRolling = ref(false) //鼠标滚轮是否滚动
2. const isBottom = ref(false) //滚动参数
4. // 处理鼠标滚轮事件
5. const moveWheel1 = ref(true)
6. const moveWheel2 = ref(false)
7. const wheelClock = ref()
8. const stopWheel=()=> {
9.       if (moveWheel2.value == true) {
10.         moveWheel2.value = false
11.         moveWheel1.value = true
12.       }
13.     }
14. const moveWheel=()=> {
15.       if (moveWheel1.value == true) {
16.         isRolling.value = true
17.         moveWheel1.value = false
18.         moveWheel2.value = true
19.         //这里写开始滚动时调用的方法
20.         wheelClock.value = setTimeout(stopWheel, 200)
21.       } else {
22.         clearTimeout(wheelClock.value)
23.         wheelClock.value = setTimeout(stopWheel, 150)
24.       }
25.     }
26. const sendFn=()=>{
27.      fetchEventSource(url, {
28.         ...,
29.         onmessage: (event) => {
30.             if (isRolling.value === false) {
31.               chatContainerRef.value.scrollTop = chatContainerRef.value.scrollHeight
32.               isRolling.value = false
33.             }
34.             if (isBottom.value) {
35.               isRolling.value = false
36.               chatContainerRef.value.scrollTop = chatContainerRef.value.scrollHeight
37.             }
38.         },
39.         ...
40.       })
41. }

复制代码

4.  题目形貌：SSE相应回来的数据中表格样式未见效。
     办理方案：MarkdownIt第三方库将markdown转换成html时，部门样式会丢失，需使用github-markdown-css添加样式。

1. npm i github-markdown-css
2. import "github-markdown-css"

复制代码

五.完整代码示例：

   index.vue:

1. <template>
2.   <div class="report-page">
3.     <div class="chat-container" ref="chatContainerRef" @scroll="scrollEvent">
4.       <div v-for="(item, index) in chatList" :key="index" class="chat-list-container">
5.         <div class="chat-item" :class="item.type === 'user' ? 'user' : 'ai'">
6.           <div v-if="item.type === 'user'" class="question">
7.             <div class="message" v-if="item.message && item.message.length > 0">{{ item.message[0] }}</div>
8.             <img class="avatar" src="../../assets/chat/userAvatar.png" alt="" />
9.           </div>
10.           <div v-else-if="item.type === 'ai'">
11.             <div v-if="item.message.length > 0 || item.isLoading" class="answer-container">
12.               <div class="answer">
13.                 <div class="avatar-page">
14.                   <div><img class="avatar" src="../../assets/chat/aiAvatar.png" alt="" /></div>
15.                   <div class="page-container" v-if="item.message.length > 1">
16.                     <span class="pre-page" @click="preFn(index, item.answerIndex)">&lt;</span
17.                     >{{ item.answerIndex + 1 }} / {{ item.message.length
18.                     }}<span class="next-page" @click="nextFn(index, item.answerIndex)">&gt;</span>
19.                   </div>
20.                 </div>
22.                 <div class="answer-message">
23.                   <div v-if="item.isLoading">
24.                     <div v-html="currentHTML" class="markdown-body" />
25.                   </div>
26.                   <div v-else>
27.                     <div v-html="item.message[item.answerIndex]" class="markdown-body" />
28.                     <!-- <div v-if="item.reportFlag === 1">
29.                       <el-button @click="downloadReport(index, item.answerIndex)" class="download-btn">
30.                         <SvgIcon class="icon-img" name="download" />
31.                         下载尽调报告</el-button
32.                       >
33.                     </div> -->
34.                   </div>
35.                 </div>
36.               </div>
37.               <div class="btn-container">
38.                 <div class="opt-container">
39.                   <div v-if="index === chatList.length - 1">
40.                     <!-- <span v-if="item.isLoading" class="stop-btn" @click="stopFn">停止生成</span> -->
41.                     <span v-if="!item.isLoading && preInputValue" class="regenerate-btn" @click="regenerateFn"
42.                       >重新生成</span
43.                     >
44.                   </div>
45.                 </div>
46.                 <div class="tool-container" v-if="!item.isLoading">
47.                   <el-icon
48.                     class="copy"
49.                     :class="copyIndex === index ? 'copy-acive' : ''"
50.                     @click="copyFn(index, item.answerIndex)"
51.                     :data-clipboard-text="copyText"
52.                   >
53.                     <CopyDocument />
54.                   </el-icon>
55.                 </div>
56.               </div>
57.             </div>
58.           </div>
59.         </div>
60.       </div>
61.       <div class="loading-status" v-if="loadingStatus">
62.         <div><img class="avatar" src="../../assets/chat/aiAvatar.png" alt="" /></div>
63.         <div class="think">思考中…</div>
64.         <div><img class="loading-img" src="../../assets/chat/loading.gif" alt="" /></div>
65.       </div>
66.       <div v-if="!isLoading">
67.         <div class="scroll-container scroll-top" v-if="scrollTopShow">
68.           <el-icon style="vertical-align: middle" @click="scrollTopFn">
69.             <ArrowUp />
70.           </el-icon>
71.         </div>
72.         <div class="scroll-container scroll-bottom" v-else-if="scrollBottomShow">
73.           <el-icon style="vertical-align: middle" @click="scrollBottomFn">
74.             <ArrowDown />
75.           </el-icon>
76.         </div>
77.       </div>
78.     </div>
79.     <div class="input-container">
80.       <div class="stop-container" @click="stopFn" v-if="isLoading">
81.         <img class="stop-img" src="../../assets/chat/stop.png" alt="" />停止生成
82.       </div>
83.       <el-input
84.         class="input"
85.         type="textarea"
86.         v-model="inputValue"
87.         placeholder="你可以这样问：请写一份江苏省xxx有限公司的尽调报告"
88.         :autosize="{ minRows: 1, maxRows: 11 }"
89.         @keydown.enter.native="inputBlurFn($event)"
90.       />
91.       <div class="icon-container" :style="{ cursor: isLoading ? '' : 'pointer' }" @click="inputBlurFn">
92.         <img v-if="isLoading" class="loading-icon" src="../../assets/chat/loading.gif" alt="" />
93.         <img v-else-if="!isLoading && inputValue" src="../../assets/chat/send.svg" class="send-icon" alt="" />
94.         <img v-else src="../../assets/chat/unsend.svg" class="send-icon" alt="" />
95.       </div>
96.       <Agreement />
97.     </div>
98.     <ViewDialog ref="viewDialogRef" />
99.   </div>
100. </template>
101. <script lang="ts" src="./index.ts"></script>

复制代码

   index.ts:

1. import "./index.scss"
2. import { defineComponent, ref, computed, onMounted, onUnmounted, watch, nextTick } from "vue"
3. import { fetchEventSource } from "@microsoft/fetch-event-source"
4. import { ElMessageBox, ElMessage } from "element-plus"
5. import MarkdownIt from "markdown-it"
6. import "github-markdown-css"
7. import Clipboard from "clipboard"
8. import { htmlToText } from "html-to-text"
9. import type { ChatItem } from "../../../types/chat"
10. export default defineComponent({
11.   components: { },
12.   setup() {
13.     const inputValue = ref("")
14.     const preInputValue = ref("") //上一次查询输入内容,用于重新生成使用
15.     const isLoading = ref(false) //节流loading
16.     const loadingStatus = ref(false) //加载状态显示loading
17.     const chatList = ref<ChatItem[]>([])
18.     const contentItems = ref("") //当前正在输出的数据流
19.     const chatContainerRef = ref()
20.     const isRegenerate = ref(false) //是否重新生成
21.     const controller = ref()
22.     const signal = ref()
23.     const copyText = ref("") //复制的文字
24.     const copyIndex = ref<number>()
25.     const scrollTopShow = ref(false)
26.     const scrollBottomShow = ref(false)
27.     const isRolling = ref(false) //鼠标滚轮是否滚动
28.     const isBottom = ref(false) //滚动参数
29.     onMounted(() => {
30.       initFn()
31.       chatContainerRef.value.addEventListener("wheel", moveWheel)
32.       window.addEventListener("message", function (event) {
33.         // 处理接收到的消息
34.         if (event.data && event.data.message) {
35.           inputValue.value = event.data.message
36.           sendFn()
37.         }
38.       })
39.     })
40.     // 处理鼠标滚轮事件
41.     const moveWheel1 = ref(true)
42.     const moveWheel2 = ref(false)
43.     const wheelClock = ref()
44.     function stopWheel() {
45.       if (moveWheel2.value == true) {
46.         // console.log("滚轮停止了")
47.         // isRolling.value = false
48.         moveWheel2.value = false
49.         moveWheel1.value = true
50.       }
51.     }
52.     function moveWheel() {
53.       if (moveWheel1.value == true) {
54.         // console.log("滚动了")
55.         isRolling.value = true
56.         moveWheel1.value = false
57.         moveWheel2.value = true
58.         //这里写开始滚动时调用的方法
59.         wheelClock.value = setTimeout(stopWheel, 200)
60.       } else {
61.         clearTimeout(wheelClock.value)
62.         wheelClock.value = setTimeout(stopWheel, 150)
63.       }
64.     }
66.     //初始化
67.     const initFn = () => {
68.       chatList.value = []
69.     }
70.     //上一页
71.     const preFn = (index: number, answerIndex: number) => {
72.       if (isLoading.value) return ElMessage.error("正在生成内容,请勿切换。")
73.       if (answerIndex === 0) {
74.         chatList.value[index].answerIndex = chatList.value[index].message.length - 1
75.       } else {
76.         chatList.value[index].answerIndex = chatList.value[index].answerIndex - 1
77.       }
78.     }
79.     //下一页
80.     const nextFn = (index: number, answerIndex: number) => {
81.       if (isLoading.value) return ElMessage.error("正在生成内容,请勿切换。")
82.       if (answerIndex === chatList.value[index].message.length - 1) {
83.         chatList.value[index].answerIndex = 0
84.       } else {
85.         chatList.value[index].answerIndex = chatList.value[index].answerIndex + 1
86.       }
87.     }
88.     // 1、新建实例md：
89.     const md = new MarkdownIt()
90.     const currentHTML = computed(() => {
91.       // 先判断存不存在，因为一开始currentPost有可能是undefined，在没有拿回数据的时候。
92.       if (contentItems.value) {
93.         if (contentItems.value.includes("</sy_think>")) {
94.           const arr = contentItems.value.split("</sy_think>")
95.           const thinkStr = `
96.           <h4> 师爷模型深度思考中...</h4>
97.           <div style="color: gray;font-size:14px;padding-left:10px;margin-bottom:10px;line-height:25px;border-left:1px solid #e5e5e5">${arr[0]}</div>
98.           <div><div>
99.          `
100.           return thinkStr + md.render(arr[1])
101.         } else {
102.           const thinkStr = `
103.           <h4> 师爷模型深度思考中...</h4>
104.           <div style="color: gray;font-size:14px;padding-left:10px;margin-bottom:10px;line-height:25px;border-left:1px solid #e5e5e5">${contentItems.value}</div>
105.           <div><div>
106.           `
107.           return thinkStr
108.         }
109.       }
110.     })
111.     //发送问题调用接口
112.     const sendFn = () => {
113.       showList.value = false
114.       controller.value = new AbortController()
115.       signal.value = controller.value.signal
116.       //先判断inputStr有没有值,isRegenerate表示是否重新生成
117.       const inputStr = isRegenerate.value ? preInputValue.value : inputValue.value
118.       if (!inputStr) return ElMessage.error("请输入要查询的问题。")
119.       if (isLoading.value) return ElMessage.error("正在生成内容,请稍后。")
120.       isLoading.value = true
121.       if (!isRegenerate.value) {
122.         //第一次生成
123.         chatList.value.push({ type: "user", message: [inputStr], answerIndex: 0, isLoading: false, reportFlag: null })
124.       }
125.       loadingStatus.value = true
126.       const url = `/recheck-web/open/shiye/chat?message=${inputStr}`
127.       fetchEventSource(url, {
128.         method: "GET",
129.         headers: {
130.           "Content-type": "application/json",
131.           Accept: "text/event-stream"
132.         },
133.         signal: signal.value,
134.         openWhenHidden: true,
135.         // params: JSON.stringify({ message: inputStr }),
136.         onopen: (e) => {
137.           if (e.status === 500) return ElMessage.error("服务器忙，请稍后再试。")
138.           if (isRegenerate.value) {
139.             //重新生成
140.             chatList.value[chatList.value.length - 1].message.push("")
141.             chatList.value[chatList.value.length - 1].answerIndex =
142.               chatList.value[chatList.value.length - 1].message.length - 1
143.           } else {
144.             chatList.value.push({ type: "ai", message: [], answerIndex: 0, isLoading: true })
145.             preInputValue.value = inputValue.value
146.           }
147.           chatList.value[chatList.value.length - 1].isLoading = true
148.           inputValue.value = ""
149.           isLoading.value = true
150.           loadingStatus.value = false
151.         },
152.         onmessage: (event) => {
153.           const data = JSON.parse(event.data)
154.           const newItem = data ? data.content : ""
155.           contentItems.value = contentItems.value + newItem
156.           if (data.status !== "end") {
157.           } else {
158.             if (isRegenerate.value) {
159.               //重新生成
160.               chatList.value[chatList.value.length - 1].message[
161.                 chatList.value[chatList.value.length - 1].message.length - 1
162.               ] = currentHTML.value + ""
163.             } else {
164.               //第一次生成
165.               chatList.value[chatList.value.length - 1].message.push(currentHTML.value + "")
166.             }
167.             if (data.type) {
168.               chatList.value[chatList.value.length - 1].reportFlag = data.type
169.             }
170.           }
171.           nextTick(() => {
172.             if (isRolling.value === false) {
173.               chatContainerRef.value.scrollTop = chatContainerRef.value.scrollHeight
174.               isRolling.value = false
175.             }
176.             if (isBottom.value) {
177.               isRolling.value = false
178.               chatContainerRef.value.scrollTop = chatContainerRef.value.scrollHeight
179.             }
180.           })
181.         },
182.         onclose: () => {
183.           isLoading.value = false
184.           loadingStatus.value = false
185.           chatList.value[chatList.value.length - 1].isLoading = false
186.           contentItems.value = ""
187.         },
188.         onerror: () => {
189.           isLoading.value = false
190.           loadingStatus.value = false
191.           chatList.value[chatList.value.length - 1].isLoading = false
192.           contentItems.value = ""
193.         }
194.       })
195.     }
196.     //停止生成
197.     const stopFn = () => {
198.       isLoading.value = false
199.       loadingStatus.value = false
200.       controller.value.abort()
201.       //chatList最后一项
202.       const lastChatItem = chatList.value[chatList.value.length - 1]
203.       if (isRegenerate.value) {
204.         // lastChatItem.message[lastChatItem.message.length - 1] = md.render(contentItems.value + "\n" + "\n" + "停止生成")
205.         lastChatItem.message[lastChatItem.message.length - 1] =
206.           currentHTML.value + "<div style='font-size:16px;margin-top:10px'>停止生成</div>"
207.       } else {
208.         // lastChatItem.message.push(md.render(contentItems.value + "\n" + "\n" + "停止生成"))
209.         lastChatItem.message.push(currentHTML.value + "<div style='font-size:16px;margin-top:10px'>停止生成</div>")
210.       }
211.       contentItems.value = ""
212.       lastChatItem.isLoading = false
213.     }
214.     //重新生成
215.     const regenerateFn = () => {
216.       isRegenerate.value = true
217.       sendFn()
218.     }
219.     //发送
220.     const inputBlurFn = (event: any) => {
221.       if (!event.ctrlKey) {
222.         // 如果没有按下组合键ctrl，则会阻止默认事件
223.         event.preventDefault()
224.         isRegenerate.value = false
225.         sendFn()
226.       } else {
227.         // 如果同时按下ctrl+回车键，则会换行
228.         inputValue.value += "\n"
229.       }
230.     }
231.     //复制功能
232.     const copyFn = (index: number, answerIndex: number) => {
233.       copyIndex.value = index
234.       copyText.value = htmlToText(chatList.value[index].message[answerIndex])
235.       const clipboard = new Clipboard(".copy")
236.       // 成功
237.       clipboard.on("success", function (e) {
238.         ElMessage.success("复制成功")
239.         e.clearSelection()
240.         // 释放内存
241.         clipboard.destroy()
242.       })
243.       // 失败
244.       clipboard.on("error", function (e) {
245.         ElMessage.error("复制失败")
246.         clipboard.destroy()
247.       })
248.     }
249.     //试问
250.     const askFn = (question: string) => {
251.       inputValue.value = question
252.       isRegenerate.value = false
253.       sendFn()
254.     }
255.     //滚动事件
256.     const scrollEvent = (e: any) => {
257.       //如果滚动到底部,显示向上滚动按钮
258.       //如果滚动到顶部,显示向下滚动按钮
259.       const scrollTop = e.target.scrollTop
260.       const scrollHeight = e.target.scrollHeight
261.       const offsetHeight = Math.ceil(e.target.getBoundingClientRect().height)
262.       const currentHeight = scrollTop + offsetHeight
264.       if (currentHeight >= scrollHeight) {
265.         scrollTopShow.value = true
266.         isBottom.value = true
267.       } else {
268.         isBottom.value = false
269.         scrollTopShow.value = false
270.       }
272.       if (scrollHeight > offsetHeight) {
273.         scrollBottomShow.value = true
274.       } else {
275.         scrollBottomShow.value = false
276.       }
277.     }
278.     //向上滚动
279.     const scrollTopFn = () => {
280.       chatContainerRef.value.scrollTop = 0
281.     }
282.     //向下滚动
283.     const scrollBottomFn = () => {
284.       chatContainerRef.value.scrollTop = chatContainerRef.value.scrollHeight + 250
285.     }
286.     //下载尽调报告
287.     const downloadReport = (index: number, answerIndex: number) => {
288.       const downStr = chatList.value[index].message[answerIndex]
289.       const arr = downStr.split("<div><div>")
290.       const blob = new Blob([arr[1]], { type: "text/plain" })
291.       const link = document.createElement("a")
292.       link.href = URL.createObjectURL(blob)
293.       link.download = "尽调报告.docx"
294.       link.click()
295.     }
296.     const generateReport = (question: string) => {
297.       inputValue.value = question
298.       isRegenerate.value = false
299.       sendFn()
300.     }
301.     const viewDialogRef = ref()
302.     const viewFn = () => {
303.       viewDialogRef.value.dialogVisible = true
304.     }
305.     watch(
306.       () => chatList.value,
307.       () => {
308.         if (chatList.value && chatList.value.length > 0) {
309.           chatContainerRef.value.scrollTop = chatContainerRef.value.scrollHeight + 250
310.         }
311.       },
312.       { deep: true }
313.     )
314.     onUnmounted(() => {
315.       if (isLoading.value) {
316.         isLoading.value = false
317.         loadingStatus.value = false
318.         controller.value.abort()
319.       }
320.     })
321.     return {
322.       inputValue,
323.       isLoading,
324.       chatList,
325.       preFn,
326.       nextFn,
327.       sendFn,
328.       contentItems,
329.       stopFn,
330.       preInputValue,
331.       currentHTML,
332.       chatContainerRef,
333.       regenerateFn,
334.       inputBlurFn,
335.       copyFn,
336.       copyText,
337.       askFn,
338.       loadingStatus,
339.       copyIndex,
340.       downloadReport,
341.       generateReport,
342.       showList,
343.       scrollEvent,
344.       scrollTopFn,
345.       scrollBottomFn,
346.       scrollTopShow,
347.       scrollBottomShow,
348.       viewDialogRef,
349.       viewFn
350.     }
351.   }
352. })

复制代码

   index.scss:

1. .report-page {
2.   height: 100%;
3.   width: 1201px;
4.   margin: 20px calc((100% - 1201px) / 2 - 35px) 20px calc((100% - 1201px) / 2 + 35px);
5.   .chat-container::-webkit-scrollbar {
6.     width: 0; /* 对于垂直滚动条 */
7.   }
8.   .chat-container {
9.     height: 85vh;
10.     overflow-y: auto;
11.     padding-bottom: 170px;
12.     margin-top: 0px;
13.     box-sizing: border-box;
14.     .chat-list-container {
15.       margin-top: 30px;
16.       .chat-item {
17.         display: flex;
18.         margin-bottom: 20px;
19.         .avatar {
20.           width: 40px;
21.           height: 40px;
22.         }
23.         .question {
24.           display: flex;
25.           margin-bottom: 30px;
26.           margin-left: 70px;
27.           margin-right: 10px;
28.           .message {
29.             padding: 12px 10px 10px;
30.             border-radius: 14px 0px 14px 14px;
31.             background: linear-gradient(128deg, #4672ff -1.27%, #7daafc 109.62%);
32.             color: #fff;
33.           }
34.           .avatar {
35.             margin-left: 20px;
36.           }
37.         }
38.         .answer-container {
39.           margin-right: 70px;
40.           margin-bottom: 30px;
41.           .answer {
42.             display: flex;
43.             .avatar-page {
44.               width: 70px;
45.               position: relative;
46.               .avatar {
47.                 width: 60px;
48.                 height: 60px;
49.                 margin-right: 10px;
50.               }
52.               .page-container {
53.                 position: absolute;
54.                 top: 60px;
55.                 left: 3px;
56.                 color: #000;
57.                 font-family: "PingFang SC";
58.                 font-size: 14px;
59.                 font-style: normal;
60.                 font-weight: 400;
61.                 line-height: 24px;
62.                 .pre-page {
63.                   margin-right: 1px;
64.                   cursor: pointer;
65.                 }
66.                 .next-page {
67.                   margin-left: 1px;
68.                   cursor: pointer;
69.                 }
70.               }
71.             }
72.             .answer-message {
73.               background-color: #fff;
74.               padding: 20px;
75.               border-radius: 0 14px 14px 14px;
76.               min-width: 500px;
77.               .download-btn {
78.                 color: #333;
79.                 text-align: center;
80.                 font-family: "PingFang SC";
81.                 font-size: 14px;
82.                 font-style: normal;
83.                 font-weight: 400;
84.                 line-height: 14px;
85.                 background-color: #f2f3f8;
86.                 height: 34px;
87.                 margin-top: 20px;
88.                 border-radius: 6px;
89.                 border-color: transparent;
90.                 .icon-img {
91.                   width: 17px;
92.                   height: 17px;
93.                   margin-right: 5px;
94.                 }
95.                 &:hover {
96.                   background: linear-gradient(128deg, #4672ff -1.27%, #7daafc 109.62%);
97.                   color: #fff;
98.                 }
99.               }
100.             }
101.           }
102.           .btn-container {
103.             margin-left: 80px;
104.             margin-top: 18px;
105.             text-align: left;
106.             display: flex;
107.             justify-content: space-between;
108.             .opt-container {
109.               .stop-btn,
110.               .regenerate-btn {
111.                 cursor: pointer;
112.                 color: #57f;
113.                 font-family: "PingFang SC";
114.                 font-size: 14px;
115.                 font-style: normal;
116.                 font-weight: 500;
117.                 line-height: 24px;
118.               }
119.             }
120.             .tool-container {
121.               background-color: #fff;
122.               padding: 6px 10px 8px;
123.               height: 40px;
124.               border-radius: 20px;
125.               min-width: 70px;
126.               text-align: center;
127.               .copy {
128.                 width: 28px;
129.                 height: 28px;
130.                 cursor: pointer;
131.               }
132.               .copy-acive {
133.                 color: #5577ff;
134.               }
135.             }
136.           }
137.         }
138.       }
139.     }
140.     .user {
141.       flex-direction: row-reverse;
142.     }
143.     .loading-status {
144.       display: flex;
145.       .avatar {
146.         width: 60px;
147.         height: 60px;
148.         margin-right: 20px;
149.       }
150.       .think {
151.         height: 52px;
152.         line-height: 52px;
153.         background-color: #fff;
154.         text-align: center;
155.         border-radius: 0 14px 14px 14px;
156.         width: 100px;
157.         color: #999;
158.       }
159.       .loading-img {
160.         width: 40px;
161.         height: 40px;
162.       }
163.     }
164.     .scroll-container {
165.       width: 38px;
166.       height: 38px;
167.       background-color: #fff;
168.       border-radius: 19px;
169.       display: flex;
170.       justify-content: center;
171.       align-items: center;
172.       position: fixed;
173.       left: calc((100% - 1201px) / 2 + 175px + 1061px);
174.     }
175.     .scroll-top {
176.       bottom: 200px;
177.     }
178.     .scroll-bottom {
179.       top: 53px;
180.     }
181.   }
182.   .input-container {
183.     position: fixed;
184.     left: calc((100% - 1061px) / 2 + 35px);
185.     bottom: 5%;
186.     width: 1061px;
187.     .stop-container {
188.       cursor: pointer;
189.       width: 104px;
190.       height: 36px;
191.       background-color: #fff;
192.       color: #5863ff;
193.       line-height: 36px;
194.       text-align: center;
195.       border-radius: 18px;
196.       position: absolute;
197.       top: -50px;
198.       font-size: 14px;
199.       font-style: normal;
200.       font-weight: 400;
201.       .stop-img {
202.         width: 22px;
203.         height: 22px;
204.         vertical-align: middle;
205.         margin-right: 3px;
206.       }
207.     }
208.     .input {
209.       .el-textarea__inner {
210.         padding: 15px;
211.         border-radius: 14px;
212.         box-shadow: 14px 27px 45px 0px rgba(112, 144, 176, 0.2);
213.       }
214.       .el-textarea__inner::-webkit-scrollbar {
215.         width: 6px;
216.         height: 6px;
217.       }
218.       .el-textarea__inner::-webkit-scrollbar-thumb {
219.         border-radius: 3px;
220.         -moz-border-radius: 3px;
221.         -webkit-border-radius: 3px;
222.         background-color: #c3c3c3;
223.       }
224.       .el-textarea__inner::-webkit-scrollbar-track {
225.         background-color: transparent;
226.       }
227.     }
228.     .icon-container {
229.       position: absolute;
230.       right: 10px;
231.       bottom: 35px;
232.       z-index: 999;
233.       .loading-icon {
234.         width: 40px;
235.         height: 40px;
236.       }
237.       .send-icon {
238.         width: 35px;
239.         height: 35px;
240.       }
241.     }
242.   }
243. }
244. .markdown-body {
245.   box-sizing: border-box;
246.   max-width: 1021px !important;
247.   hr {
248.     display: none !important;
249.   }
250. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。