实现了如下功能（使用react实现，原创）

实现功能：
1、对接gpt35模型问答，并实现了流式传输（在java端）
2、在实际使用中，我们的问答历史会经常分享给他人，所以下图的 copy all 按钮，可以copy成一个json然后通过社交软件发送给别人，别人就可以轻松应用你的问答历史。
3、选择文件，在我们预想当中，我们可能会经常遇到向文档提问（当时还不知道embedding的知识哈哈哈），通过拆分文档，一段段跟gpt提问，当前段落是否和用户内容相关，相关就回答段落问题（段落拆分通过java实现）

4、我们需要经常保存我们的聊天记录，特别是在调试我们的prompt的时候，所以加了一个缓存功能，可以随时提取缓存记录来提问。

5、利用这个分享的时候，设计了很多便利我去学习英语的prompt,避免老是手打提示词

role.js

export default {     "专业的英语翻译家": (text = "示例") => {         return "现在你充当我专业的翻译家。当我输入中文，你就翻译成英文。当我输入英文，你就翻译成中文。请翻译：" + text     },     "文章截断翻译": (text = "示例") => {         return "因为我是中国的软件开发工程师，我要面试美国的软件开发岗位，所以我要学习英语，我要你充当我的翻译家，" +             "所以我给一些中文的软件知识给你帮我翻译，但是你不能直译，因为中文说出来的知识，英语的表达有不一样，所" +             "以请你理解我的中文知识，按照自己的理解用英语表达出来，所以我给你一段文字，首先你要将文章拆分成一句一句，理解每" +             "一句的意思，然后用英语将你理解的意思输出。输出格式为一句中文，输出一个回车符，下一行输出你的英文理解。并且每一句末尾都" +             "给生僻词单独翻译。文章内容为：“" + text + "”"     },     "给出5个英语句子对应的词汇": (text = "示例") => {         return "我给你一个英文单词，请你用这个英文单词造出5个英文句子，句子要求是计算机互联网相关知识" +             "（包括但不限于前端专业细节知识，react专业细节知识，vue专业细节知识，js专业细节知识，管理系统的功能专业细节知识，" +             "http网络相关专业细节知识），并附带中文翻译。最后还要给出他的衍生词汇，" +             "给出他的发音以及词汇类型。单词为：" + text     },     "给你一个中文词汇，你给我说出英语一般用什么句式去表达": (text = "示例") => {         return "我给你一个中文词汇，你给我说出英语一般用什么句式去表达。" +             "例如：中文意思：确保一些东西是有效的，英语一般表达为：ensure that somethings is valid。" +             "这个（ensure that ... is valid）就是英语的常规表达句式。" +             "例如：允许轻松自定义表单验证，，英语一般表达为：ensure that somethings is valid。" +             "这个（allows for ... 。" +             "中文词汇为：" + text     },     "面试中怎么表达这个中文意思": (text = "示例") => {         return "在美国的it开发工程师英语面试当中，怎么表达：" + text + ", 请用三种或者三种以上不同的句式表达"     },     "在英语中有多少英文表达这个中文意思": (text = "示例") => {         return "在英语中有多少英文表达这个中文意思，请列举出来，中文为：" + text     },     "假设你是一个从小就在美国长大的人": (text = "示例") => {         return "假设你是一个从小就在美国长大的人，你已经30岁，在互联网公司工作8年，请你使用简洁的口语帮我将中文翻译成英文，重点是简洁，简洁，你自己听得懂就好。中文为：" + text     } } 

index.js

 import React, { useState, useCallback, useRef } from 'react'; import './index.css'; import { useEffect } from 'react'; import axios from 'axios'; import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter"; import { vscDarkPlus, coyWithoutShadows, darcula } from 'react-syntax-highlighter/dist/esm/styles/prism'; // 设置高亮的语言 import { jsx, javascript } from "react-syntax-highlighter/dist/esm/languages/prism"; import ReactMarkdown from 'react-markdown'; import ClipboardJS from 'clipboard'; import { Drawer, Input, message, Select } from 'antd'; import roles from "./roles";  const { Search } = Input; const { TextArea } = Input; const { Option } = Select;  function clearLocalStorage() {   localStorage.setItem("LOCALDATA", "[]"); }  // 封装localStorage的get方法 function getLocalStorage() {   let arrStr = localStorage.getItem("LOCALDATA");   if (arrStr) {     let arr = JSON.parse(arrStr);     return arr;   } else {     return [];   } }  const them = {   dark: vscDarkPlus,   light: coyWithoutShadows }; const ENDTEXT = "__END__";  let comments = []; let streaming = false  export default function App1() {   const [question, setQuestion] = useState("");   const [roleType, setRoleType] = useState("");   const [frontPrompts, setFrontPrompts] = useState("");    const list_container_id = useRef(null);   const currentTexts = useRef("");   const [count, setCount] = useState(0);   const [messageApi, contextHolder] = message.useMessage();   const [open, setOpen] = useState(false);   const [openMoreFunction, setOpenMoreFunction] = useState(false);    const [jsonData, setJsonData] = useState("{}");   const key = 'copy';   const postStreamList = async (callback) => {     let requestList = [];     comments.map((item) => {       if (item.type === "chatgpt-url") {         if (item.contents[0]) {           requestList.push({ "role": "user", "content": item.contents[0].hiddenQuestion });           requestList.push({ "role": "assistant", "content": item.contents[0].hiddenContent });         }       } else {         requestList.push({ "role": "user", "content": item.name });         if (item.contents[0] && item.contents[0].text) {           requestList.push({ "role": "assistant", "content": item.contents[0].text });         }       }     })      const requestOptions = {       method: 'POST',       headers: {         'Content-Type': 'application/json',         "Authorization": "Bearer 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"       },       body: JSON.stringify({         "model": "gpt-3.5-turbo",         "messages": requestList       })     };     let count = 0;     const streamResponse = await fetch('/chat', requestOptions);     // const streamResponse = await fetch('/search/api/dev/stream', requestOptions);     const reader = streamResponse.body.getReader();     let errText = "";     const read = () => {       return reader.read().then(({ done, value }) => {         count++;         if (done) {           console.log("victor react reviced: end");           callback(ENDTEXT);           return;         }          const textDecoder = new TextDecoder();         // console.log("返回的数据：", textDecoder.decode(value));         let text = "";         const strArr = (errText + textDecoder.decode(value)).split("data: ");         console.log("解析字符", textDecoder.decode(value))         if (strArr) {           for (let i = 0; i < strArr.length; i++) {             let json = {};             if (strArr[i] && strArr[i] !== "[DONE]") {               try {                 json = JSON.parse(strArr[i]);                 if (json.choices.length && json.choices[0].delta.content) {                   text = text + json.choices[0].delta.content;                 }                 errText = "";               } catch (e) {                 console.log("出错", strArr[i])                 errText = strArr[i];               }              }           }           callback(text);         }         return read();       });     }      read();   }    const postStreamListAudio = async (erjinzhi) => {     const requestOptions = {       method: 'POST',       headers: {         'Content-Type': 'application/json'       },       body: JSON.stringify({         "model": "gpt-3.5-turbo",         "messages": [{ "role": "assistant", "content": erjinzhi }]       })     };     let count = 0;     const streamResponse = await fetch('/chat', requestOptions);     // const streamResponse = await fetch('/search/api/dev/stream', requestOptions);     const reader = streamResponse.body.getReader();     let errText = "";     const read = () => {       return reader.read().then(({ done, value }) => {         count++;         if (done) {           console.log("victor react reviced: end");           return;         }          const textDecoder = new TextDecoder();         // console.log("返回的数据：", textDecoder.decode(value));         let text = "";         const strArr = (errText + textDecoder.decode(value)).split("data: ");         console.log("解析字符", textDecoder.decode(value))         if (strArr) {           for (let i = 0; i < strArr.length; i++) {             let json = {};             if (strArr[i] && strArr[i] !== "[DONE]") {               try {                 json = JSON.parse(strArr[i]);                 if (json.choices.length && json.choices[0].delta.content) {                   text = text + json.choices[0].delta.content;                 }                 errText = "";               } catch (e) {                 console.log("出错", strArr[i])                 errText = strArr[i];               }              }           }           console.log(text);         }         return read();       });     }     read();   }    const addLocalStorage = (dataArr) => {     var now = new Date();     var year = now.getFullYear(); //获取完整的年份(4位,1970-????)     var month = now.getMonth() + 1; //获取当前月份(0-11,0代表1月)     var date = now.getDate(); //获取当前日(1-31)     var hour = now.getHours(); //获取当前小时数(0-23)     var minute = now.getMinutes(); //获取当前分钟数(0-59)     var second = now.getSeconds(); //获取当前秒数(0-59)     var timestamp = year + "-" + (month < 10 ? "0" + month : month) + "-" + (date < 10 ? "0" + date : date) + " " + (hour < 10 ? "0" + hour : hour) + ":" + (minute < 10 ? "0" + minute : minute) + ":" + (second < 10 ? "0" + second : second);     try {       let arrStr = localStorage.getItem("LOCALDATA");       if (arrStr) {         let arr = JSON.parse(arrStr);         arr.push({           time: timestamp,           dataArr: dataArr         });         localStorage.setItem("LOCALDATA", JSON.stringify(arr));       } else {         let arr = [];         arr.push({           time: timestamp,           dataArr: dataArr         });         localStorage.setItem("LOCALDATA", JSON.stringify(arr));       }       messageApi.open({         key,         type: 'success',         content: '缓存成功',         duration: 1       });     } catch (err) {       console.error('localStorage set error: ', err);     }   }    const addComment = async (e) => {     if (question.trim() === '') {       alert('请输入问题');       return;     }     setQuestion('');     let index = comments.length;     comments.push({       id: Math.random(),       role: 'user',       type: "chatgpt",       name: question,       contents: []     });     setCount(count + 1);     setTimeout(async () => {       let responseList = await getList();       if (responseList[0].type === "chatgpt-url") {         comments[index].type = "chatgpt-url";       }       comments[index].contents = responseList;       setQuestion('');       setCount(0);     }, 0);   }    const getList = (question) => {     let requestList = [];     comments.map((item) => {       if (item.type === "chatgpt-url") {         if (item.contents[0]) {           requestList.push({ "role": "user", "content": item.contents[0].hiddenQuestion });           requestList.push({ "role": "assistant", "content": item.contents[0].hiddenContent });         }       } else {         requestList.push({ "role": "user", "content": item.name });         if (item.contents[0]) {           requestList.push({ "role": "assistant", "content": item.contents[0].text });         }       }     })     return new Promise((resolve) => {       axios.post('/search/send', {         frequency_penalty: 0,         max_tokens: 2048,         model: "text-davinci-003",         presence_penalty: 0,         message: requestList,         temperature: 0.5,         top_p: 1       }).then((response) => {          if (Array.isArray(response.data.choices)) {           // console.log('请求成功', response);           let arr = response.data.choices.map((item) => {             if (item.message.type === "chatgpt-url") {               return {                 type: item.message.type,                 index: item.index,                 text: "我已经对这个链接学习完成，你可以向我提问关于这个链接的内容",                 hiddenQuestion: item.message.question,                 hiddenContent: item.message.content               }             } else {               return {                 type: item.type,                 index: item.index,                 text: item.message.content               }             }           })           resolve(arr);         } else {           alert('程序错误');         }         // 请求成功       }).catch((error) => {         // 请求失败，         console.log(error);       });     })   }    const scrollBottom = () => {     if (!list_container_id.current) {       return;     }     setTimeout(() => {       list_container_id.current.scrollTop = list_container_id.current.scrollHeight     }, 0);   }    const updateScroll = useCallback(() => {     scrollBottom()   })    const addStreamComment = async ({     question1 = "",     isCreate = false,     isContinue = false   }) => {     if (question.trim() === '' && !question1 && isContinue === false) {       alert('请输入问题');       return;     }     streaming = true;     setQuestion('');     let index = 0;     // 修改不需要新数据, 创建就需要push新item     if (isCreate || comments.length === 0) {       console.log("走创建")       index = comments.length;       let questionText = question1 || question;       if (roles[roleType]) {         questionText = roles[roleType](question1 || question)       }       comments.push({         id: Math.random(),         role: 'user',         type: "chatgpt",         name: questionText,         edit: false,         contents: [{ index: Math.random(), text: "", edit: false }]       });     } else if (isContinue === true) {       console.log("走继续")       index = comments.length - 1;       comments[index] = {         ...comments[index],         id: Math.random(),         role: 'user',         type: "chatgpt",         edit: false       };     } else {       console.log("走编辑")       index = comments.length - 1;       comments[index] = {         id: Math.random(),         role: 'user',         type: "chatgpt",         name: question1 || question,         edit: false,         contents: [{ index: Math.random(), text: "", edit: false }]       };     }     setCount(count + 1);     let str = comments[index].contents[0].text;     const callback = (text) => {       if (text === ENDTEXT) {         streaming = false;         setCount(1);         return;       }       str = str + text;       comments[index].contents[0].text = str;       setQuestion('');       setCount((count) => count + 1);     }     postStreamList(callback);   }    const copy = (index) => {     const clipboard = new ClipboardJS("#copyBtn" + index);     clipboard.on('success', () => {       messageApi.open({         key,         type: 'success',         content: '复制成功',         duration: 1       });     });   }   useEffect(() => {     const clipboard = new ClipboardJS("#copyBtnAll");     clipboard.on('success', () => {       messageApi.open({         key,         type: 'success',         content: '复制成功',         duration: 1       });     });     comments.map((item, index) => {       const clipboard = new ClipboardJS("#copyBtn" + index);       clipboard.on('success', () => {         messageApi.open({           key,           type: 'success',           content: '复制成功',           duration: 2         });       });     })   })   console.log("comments", comments)   const renderList = () => {     return comments.length === 0 ?       (
{ flex: 1 }}>         
暂无问题，快去提问吧~
       
)       : (         
(el) => {             list_container_id.current = el;           }}           style={{ flex: 1 }}           className="list_container"         >           
{ color: 'white' }}>             {comments.map((item, index) => (               
item.id} style={{ color: 'white' }}>                 {                   item.name ? (                     
                       
{ marginLeft: 8 }}>                         
                           
提问：
                           
"copyBtn" + index} data-clipboard-text={item.name} onClick={(e) => copy(index)}>copy
                           {comments.length === index + 1 ? (                             
() => {                                 if (item.edit === false) {                                   item.edit = true;                                   setCount(count + 1);                                 } else {                                   addStreamComment({                                     question1: item.name,                                     isCreate: false,                                     isContinue: false                                   });                                 }                               }}>{!item.edit ? "edit" : "submit"}
                           ) : null}                           
() => {                               comments.splice(index, 1);                               setCount(count + 1);                             }}>delete
                          
                         {                           !item.edit ? 
{item.name}
 : (                             
                               4}                                 defaultValue={<!-- -->item.name}                                 onChange={<!-- -->(e) => {<!-- -->                                   item.name = e.target.value;                                 }}                               />                             </div>                           )                         }                       </div>                     </div>                   ) : null                 }                 {<!-- -->                   item.contents.length ? (                     <>                       <div                         className='answer'>                         <div style={<!-- -->{<!-- --> marginLeft: 8, marginBottom: 10 }} >                           <div className='action_btn'>                             <div>回答：</div>                             <div className="copy_button" id={<!-- -->"copyBtn" + index} data-clipboard-text={<!-- -->item.contents[0].text} onClick={<!-- -->(e) => copy(index)}>copy</div>                           </div>                           <pre style={<!-- -->{<!-- --> width: "100%" }}><OmsSyntaxHighlight textContent={<!-- -->item.contents[0].text} language={<!-- -->"javascript"} darkMode /></pre></div>                       </div>                       <div>{<!-- -->currentTexts.current}</div>                     </>                   ) : <div>                     <div style={<!-- -->{<!-- --> display: 'flex', justifyContent: 'center', backgroundColor: 'black' }}><div className='heike'  >chatgpt</div></div>                     <div className='answer2'>思考中...</div>                   </div>                 }               </li>             ))             }           </ul >         </div >       )   }   const handleForm = (e) => {<!-- -->     setQuestion(e.target.value)   }    const handleSelectChange = (value) => {<!-- -->     setFrontPrompts(value);     setRoleType(value);   };    useEffect(() => {<!-- -->     scrollBottom()   })    const overWriteData = (jsonData) => {<!-- -->     let jsonData1 = JSON.parse(jsonData);     // console.log("jsonData1", jsonData1)     comments = [];     jsonData1.map((item, index) => {<!-- -->       if (index % 2 === 0) {<!-- -->         comments.push({<!-- -->           id: Math.random(),           role: 'user',           type: "chatgpt",           name: item.content,           edit: false,           contents: [{<!-- -->             index: Math.random(),             edit: false,             text: jsonData1[index + 1].content           }]         })         // console.log(comments)         setCount(count + 1)       }     })   }    const handleLocalDataChange = (value) => {<!-- -->     overWriteData(value);   };    useEffect(() => {<!-- -->     const mp3File = document.getElementById('mp3-file');      mp3File.addEventListener('change', () => {<!-- -->       const file = mp3File.files[0];       const reader = new FileReader();        reader.addEventListener('loadend', () => {<!-- -->         const byteArray = new Uint8Array(reader.result);         // 将byteArray上传至服务器         console.log(byteArray)         postStreamListAudio(byteArray);       });        reader.readAsArrayBuffer(file);     });   }, [])    const renderHeader = () => {<!-- -->     return (       <div className='header_button'>         <div           className="copy_all_button"           style={<!-- -->{<!-- --> color: "white" }}           onClick={<!-- -->() => {<!-- -->             let tmp = [];             comments.map((item) => {<!-- -->               tmp.push({<!-- -->                 role: 'user',                 content: item.name,               })               tmp.push({<!-- -->                 role: 'assistant',                 content: item.contents[0].text               })             })             setJsonData(JSON.stringify(tmp));             setOpen(true);           }}>           copy all         </div>         <input type="file" id="mp3-file"></input>         <div           className="copy_all_button"           onClick={<!-- -->() => {<!-- -->             setOpenMoreFunction(true);           }}           style={<!-- -->{<!-- --> color: "white" }}         >           更多功能         </div>       </div>     )   }    const renderDrawerCopyBtnAll = () => {<!-- -->     return (       <Drawer         title={<!-- -->           <div style={<!-- -->{<!-- --> display: 'flex' }}>             <div               className='copy_button'               id={<!-- -->"copyBtnAll"}               data-clipboard-text={<!-- -->jsonData}               onClick={<!-- -->(e) => {<!-- -->                 const clipboard = new ClipboardJS("#copyBtnAll");                 clipboard.on('success', () => {<!-- -->                   messageApi.open({<!-- -->                     key,                     type: 'success',                     content: '复制成功',                     duration: 2                   });                 });               }}>copy</div>             <div className='copy_button' onClick={<!-- -->() => {<!-- -->               try {<!-- -->                 overWriteData(jsonData);                 setOpen(false);               } catch (e) {<!-- -->                 messageApi.open({<!-- -->                   key,                   type: 'error',                   content: 'json格式出错',                   duration: 2                 });               }             }}>               执行json             </div>             <div className='copy_button' onClick={<!-- -->() => {<!-- -->               try {<!-- -->                 addLocalStorage(jsonData);               } catch (e) {<!-- -->                 messageApi.open({<!-- -->                   key,                   type: 'error',                   content: 'json格式出错',                   duration: 2                 });               }             }}>               缓存             </div>           </div>         }         placement={<!-- -->"bottom"}         open={<!-- -->open}         size='small'         onClose={<!-- -->() => {<!-- -->           setOpen(false)         }}       >         <TextArea           rows={<!-- -->4}           value={<!-- -->jsonData}           onChange={<!-- -->(e) => {<!-- -->             setJsonData(e.target.value);           }}         />       </Drawer>     )   }    const renderDrawerMoreFunction = () => {<!-- -->     return (       <Drawer         title={<!-- -->"更多功能"}         placement={<!-- -->"bottom"}         open={<!-- -->openMoreFunction}         size='small'         onClose={<!-- -->() => {<!-- -->           setOpenMoreFunction(false)         }}       >         <div>           {<!-- -->             !streaming ? (               <button                 className="copy_all_button"                 onClick={<!-- -->() => {<!-- -->                   comments = [];                   setCount(0);                 }}>clear</button>             ) : null           }           {<!-- -->             <button               className="copy_all_button"               onClick={<!-- -->() => {<!-- -->                 clearLocalStorage();                 setCount(10);               }}>clearStorage</button>           }           <div>             <span>角色:</span>             <Select               style={<!-- -->{<!-- --> width: '100%' }}               defaultValue="origin"               onChange={<!-- -->handleSelectChange}               options={<!-- -->[                 {<!-- --> value: 'origin', label: 'origin' },                 ...Object.keys(roles).map((role) => ({<!-- --> value: role, label: role }))               ]}             />           </div>           <div>             <span>缓存:</span>             <Select               style={<!-- -->{<!-- --> width: '100%' }}               onChange={<!-- -->handleLocalDataChange}             >               {<!-- -->                 getLocalStorage().length ? getLocalStorage().map((item) => {<!-- -->                   return <Option value={<!-- -->item.dataArr} key={<!-- -->Math.random()}>{<!-- -->item.time}</Option>                 }) : <Option value={<!-- -->"0"} key="无">无</Option>               }             </Select>           </div>         </div>       </Drawer>     )   }    const renderFrontPrompts = () => {<!-- -->     if (frontPrompts && roles[frontPrompts]) {<!-- -->       return <div className='frontPrompts'>前置指令：{<!-- -->roles[frontPrompts]()}</div>;     } else {<!-- -->       return null;     }   }    const renderQuestion = () => {<!-- -->     return (       <div className='input_style'>         <TextArea           className='input_quertion'           type="text"           placeholder="请输入问题"           value={<!-- -->question}           name="question"           onChange={<!-- -->handleForm}           autoSize={<!-- -->{<!-- --> minRows: 1, maxRows: 5 }}         />         <div style={<!-- -->{<!-- --> width: '1vw' }}></div>         <button onClick={<!-- -->() => {<!-- -->           addStreamComment({<!-- -->             isContinue: true,             isCreate: false,             question1: ""           });         }} className="confirm_button" >继续</button>         <div style={<!-- -->{<!-- --> width: '1vw' }}></div>         <button onClick={<!-- -->() => {<!-- -->           const pattern = /(http|https):\/\/([\w.]+\/?)\S*/;           addStreamComment({<!-- --> isCreate: true, isContinue: false, question1: "" });         }} className="confirm_button" >提问</button>       </div>     )   }    return (     <div className='app_container'>       {<!-- -->renderHeader()}       {<!-- -->renderFrontPrompts()}       {<!-- -->renderList()}       {<!-- -->contextHolder}       {<!-- -->renderQuestion()}       {<!-- -->renderDrawerCopyBtnAll()}       {<!-- -->renderDrawerMoreFunction()}     </div>   )  }  const OmsSyntaxHighlight = (props) => {<!-- -->   const {<!-- --> textContent, darkMode, language = 'txt' } = props;   const [value, setValue] = useState(textContent);   if (typeof darkMode === 'undefined') {<!-- -->     them.light = darcula;   }   if (typeof darkMode === 'boolean') {<!-- -->     them.light = coyWithoutShadows;   }   useEffect(() => {<!-- -->     SyntaxHighlighter.registerLanguage("jsx", jsx);     SyntaxHighlighter.registerLanguage("javascript", javascript);     SyntaxHighlighter.registerLanguage("js", javascript);   }, []);   return (     <ReactMarkdown source={<!-- -->value} escapeHtml={<!-- -->false} language={<!-- -->language}>{<!-- -->textContent}</ReactMarkdown>   ); };  </code></pre> <h5>css文件</h5> <pre><code class="prism language-css">body, html {<!-- -->   margin: 0; }  ul, li, p {<!-- -->   padding: 0;   margin: 0;   list-style: none }  h3 {<!-- -->   margin-bottom: 0; }  .input_quertion {<!-- -->   width: 50vw;   height: 50px;   border-radius: 10px;   border: 1px solid black; }  pre {<!-- -->   white-space: pre-wrap;   white-space: -moz-pre-wrap;   white-space: -pre-wrap;   white-space: -o-pre-wrap;   word-wrap: break-word; }  .copy_button {<!-- -->   line-height: 35px;   margin-right: 4px;   border: 1px solid royalblue; }  .copy_all_button {<!-- -->   line-height: 44px;   margin-right: 4px;   border: 1px solid royalblue; }  .content {<!-- -->   width: 280px;   margin: 5px;   border: 1px solid black; }  .quickButton {<!-- -->   width: 70px;   border-radius: 10px;   background-color: #03b96b;   border: 0;   height: 30px;   color: white;   position: absolute;   right: 10px; }  .no-comment {<!-- -->   text-align: center;   padding: 20px;   color: white;   background-color: rgb(53, 54, 65); }   .frontPrompts {<!-- -->   text-align: left;   padding: 8px 46px;   color: white;   font-size: 12px;   background-color: rgb(53, 54, 65);   border-bottom: 1px solid black; }  .app_container {<!-- -->   width: 100%;   height: 100%;   display: flex;   flex-direction: column;   background-color: rgb(53, 54, 65); }  .confirm_button {<!-- -->   width: 26vw;   border-radius: 10px;   background-color: #03b96b;   border: 0;   height: 50px;   color: white;   box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24);   cursor: pointer;   outline: none;   transition: 0.2s all; }  .list_container {<!-- -->   overflow: auto;   flex: 1; }  .qiu {<!-- -->   width: 15%;   height: 15%; }  .chatGPTImg {<!-- -->   position: fixed;   top: 0;   right: 0;   bottom: 0;   left: 0;   margin: auto;   width: 300px;   height: 300px;   z-index: 999; }  .response {<!-- -->   overflow-wrap: break-word;   word-break: normal;   white-space: normal;   flex: 1; }  .header_button {<!-- -->   width: 100%;   height: 67px;   display: flex;   align-items: center;   bottom: 0;   padding: 10px 40px 10px;   border-bottom: 1px solid;   background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);   box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.3); }   .input_style {<!-- -->   width: 100%;   display: flex;   bottom: 0;   padding: 1%;   align-items: end; }  .action_btn {<!-- -->   display: flex;   align-items: flex-start;   color: white; }  .quiz {<!-- -->   display: flex;   align-items: flex-start;   padding: 10px 40px 10px;   color: white;   line-height: 41px;   background-color: rgb(53, 54, 65); }  .quiz_avatar {<!-- -->   width: 40px;   height: 40px; }  .answer {<!-- -->   display: flex;   background-color: #3b3d53;   color: white;   height: auto;   line-height: 35px;   padding: 20px 40px;   overflow: auto;   white-space: normal;   word-break: break-all; }  .answer2 {<!-- -->   text-align: center;   padding-top: 40px; }  .confirm_button:active {<!-- -->   transform: scale(0.98);   background-color: blue;   box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24); } </code></pre> <link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/markdown_views-f23dff6052.css" rel="stylesheet"><link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/style-c216769e99.css" rel="stylesheet">                <!--end::Text-->
            </div>
            <!--end::Description-->
            <div class="mt-5">
                <!--关键词搜索-->
                            </div>
            <div class="mt-5">
                <p class="fc-show-prev-next">
                    <strong>上一篇：</strong><a href="/kaifa/567757.html">macbook启动时间设置在哪里</a><br>
                </p>
                <p class="fc-show-prev-next">
                    <strong>下一篇：</strong><a href="/kaifa/567761.html">嵌入式linux系统中压力测试的方法</a>                </p>
            </div>
            <!--begin::Block-->
            <div class="d-flex flex-stack mb-2 mt-10">
                <!--begin::Title-->
                <h3 class="text-dark fs-5 fw-bold text-gray-800">相关内容</h3>
                <!--end::Title-->
            </div>
            <div class="separator separator-dashed mb-9"></div>
            <!--end::Block-->
            <div class="row g-10">
               

            </div>


        </div>
        <!--end::Table widget 14-->
    </div>
    <!--end::Col-->

    <!--begin::Col-->
    <div class="col-xl-4 mt-0">
        <!--begin::Chart Widget 35-->
        <div class="card card-flush h-md-100">
            <!--begin::Header-->
            <div class="card-header pt-5 ">
                <!--begin::Title-->
                <h3 class="card-title align-items-start flex-column">
                    <!--begin::Statistics-->
                    <div class="d-flex align-items-center mb-2">
                        <!--begin::Currency-->
                        <span class="fs-5 fw-bold text-gray-800 ">热门资讯</span>
                        <!--end::Currency-->
                    </div>
                    <!--end::Statistics-->
                </h3>
                <!--end::Title-->
            </div>
            <!--end::Header-->
            <!--begin::Body-->
            <div class="card-body pt-3">

                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('/uploadfile/202508/d77859926789b9.jpg')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/kaifa/1951499.html" class="text-dark fw-bold text-hover-primary fs-6">2分钟德州透视挂！hhpoke...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">2分钟德州透视挂！hhpoker开挂教程，德州透视插件，详细教程（有挂功能）1、完成德州透视插件透视...</span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('/uploadfile/202509/0ef43080b21d192.jpg')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/kaifa/1951496.html" class="text-dark fw-bold text-hover-primary fs-6">九分钟开辅助!wepoker辅...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">九分钟开辅助!wepoker辅助软件价格(透视底牌)详细辅助程序(本来是真的有挂)1、任何wepok...</span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('/uploadfile/202508/d77859926789b9.jpg')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/kaifa/1951491.html" class="text-dark fw-bold text-hover-primary fs-6">9分钟透视插件！hh poke...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">9分钟透视插件！hh poker软件，hhpoker是正品吗，详细教程（有挂智能）1、hh poke...</span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('https://img2.pic99.top/ypkjmy/202411/e7454104204e14b.jpg')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/kaifa/1951488.html" class="text-dark fw-bold text-hover-primary fs-6">7分钟插件辅助!wepoker...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">7分钟插件辅助!wepoker买钻石有用吗(透视底牌)详细辅助插件(果然是有挂)7分钟插件辅助!we...</span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('https://img2.pic99.top/ypkjmy/202411/063de7042079bb0.jpg')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/kaifa/1951483.html" class="text-dark fw-bold text-hover-primary fs-6">八分钟作弊实战！hhpoker...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">八分钟作弊实战！hhpoker脚本，hhpoker辅助靠谱吗，详细教程（有挂安装）1、完成hhpok...</span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('/uploadfile/202509/7a07cb965db981f.jpg')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/kaifa/1951479.html" class="text-dark fw-bold text-hover-primary fs-6">二分钟苹果版!wepoker有...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">二分钟苹果版!wepoker有辅助器吗(透视底牌)详细辅助免费(切实真的是有挂)1、点击下载安装，插...</span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('/uploadfile/202509/0ef43080b21d192.jpg')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/kaifa/1951475.html" class="text-dark fw-bold text-hover-primary fs-6">八分钟破解工具！德州透视hhp...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">八分钟破解工具！德州透视hhpoker，hh poker辅助器先试用，详细教程（有挂插件）1、该软件...</span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('/uploadfile/202509/e5da84560af6a4a.jpg')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/kaifa/1951470.html" class="text-dark fw-bold text-hover-primary fs-6">二分钟作弊!wepoker私人...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">二分钟作弊!wepoker私人局可以透视(透视底牌)详细辅助作弊器(本来真的有挂)；暗藏猫腻，小编详...</span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('/uploadfile/202509/f7d254cb3c8c5c5.jpg')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/kaifa/1951466.html" class="text-dark fw-bold text-hover-primary fs-6">五分钟外挂!德扑HHpoker...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">五分钟外挂!德扑HHpoker有挂吗(透视脚本)详细辅助助手(确实真的是有挂)1、任何ai辅助神器的...</span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('/uploadfile/202509/b6cf33cf801ad4f.jpg')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/kaifa/1951461.html" class="text-dark fw-bold text-hover-primary fs-6">5分钟新号!wepoker透视...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">5分钟新号!wepoker透视器免费(透视底牌)详细辅助外挂(确实是真的有挂)1、打开软件启动之后找...</span>
                    </div>
                    <!--end::Title-->
                </div>
                
            </div>
            <!--end::Body-->
        </div>
        <!--end::Chart Widget 35-->
    </div>
    <!--end::Col-->
</div>



</div>
<!--end::Content container-->
</div>
<!--end::Content-->
</div>
<!--end::Content wrapper-->
<!--begin::Footer-->
<div id="kt_app_footer" class="app-footer">
    <!--begin::Footer container-->
    <div class="app-container container-xxl d-flex flex-column flex-md-row flex-center flex-md-stack py-3">
        <!--begin::Copyright-->
        <div class="text-dark order-2 order-md-1">
            <span class="text-muted fw-semibold me-1">2025 ©</span>
            一品科技<a href="http://www.mj938.cn/">民间生活网</a><a href="http://code.shayuweb.com/">鲨鱼编程</a>        </div>
        <!--end::Copyright-->
        <!--begin::Menu-->
        <ul class="menu menu-gray-600 menu-hover-primary fw-semibold order-1">
                        <li class="menu-item">
                <a href="/news/" target="_blank" class="menu-link px-2">科技资讯</a>
            </li>
                        <li class="menu-item">
                <a href="/kaifa/" target="_blank" class="menu-link px-2">开发测试</a>
            </li>
                        <li class="menu-item">
                <a href="/jishu/" target="_blank" class="menu-link px-2">技术分享</a>
            </li>
                        <li class="menu-item">
                <a href="/zhishi/" target="_blank" class="menu-link px-2">知识问答</a>
            </li>
                    </ul>
        <!--end::Menu-->
    </div>
    <!--end::Footer container-->
</div>
<!--end::Footer-->
</div>
<!--end:::Main-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Page-->
</div>
<!--end::App-->
<div id="kt_scrolltop" class="scrolltop" data-kt-scrolltop="true">
    <!--begin::Svg Icon | path: icons/duotune/arrows/arr066.svg-->
    <span class="svg-icon">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect opacity="0.5" x="13" y="6" width="13" height="2" rx="1" transform="rotate(90 13 6)" fill="currentColor"></rect>
            <path d="M12.5657 8.56569L16.75 12.75C17.1642 13.1642 17.8358 13.1642 18.25 12.75C18.6642 12.3358 18.6642 11.6642 18.25 11.25L12.7071 5.70711C12.3166 5.31658 11.6834 5.31658 11.2929 5.70711L5.75 11.25C5.33579 11.6642 5.33579 12.3358 5.75 12.75C6.16421 13.1642 6.83579 13.1642 7.25 12.75L11.4343 8.56569C11.7467 8.25327 12.2533 8.25327 12.5657 8.56569Z" fill="currentColor"></path>
        </svg>
    </span>
    <!--end::Svg Icon-->
</div>
<!--begin::Javascript-->
<script>var hostUrl = "/static/default/pc/";</script>
<!--begin::Global Javascript Bundle(mandatory for all pages)-->
<script src="/static/default/pc/plugins/global/plugins.bundle.js"></script>
<script src="/static/default/pc/js/scripts.bundle.js"></script>
<!--end::Global Javascript Bundle-->

<!--end::Javascript-->
</body>
<!--end::Body-->
</html>