feat: 徽智制联-deepSeek-按照UI稿重新写一版，再增加切换问题功能

 
 .mark-down {
   width: auto;
-  max-width: 60%;
+  max-width: 355px;
   background: #fff;
-  border-radius: 10px;
-  padding: 20px;
+  border-radius: 15px;
+  padding: 12px 28px 12px 16px;
   .group {
     margin-bottom: 10px;
   }
 }
-
-.role {
-  width: 40px;
-  height: 28px;
-  line-height: 28px;
-  font-size: 14px;
-  border-radius: 14px;
-  text-align: center;
-}
-
-.text-right {
-  display: flex;
-  flex-direction: row-reverse;
-  padding-right: 2%;
-  .role {
-    margin-left: 20px;
-    background: #0A84FE;
-    color: #fff;
-  }
-  .mark-down {
-    background: #0A84FE;
-    color: #fff;
-    padding: 10px;
-  }
-}
-.text-left {
-  display: flex;
-  padding-left: 2%;
-  .role {
-    margin-right: 20px;
-    background: #fff;
-  }
-  .mark-down {
-    p {
-      overflow-wrap:break-word;
-      word-break: break-all;
-    }
-  }
-}
\ No newline at end of file

 import React, {useState, useEffect, useRef} from "react";
 import './style.less'
-import { Button, Input } from 'antd';
+import { Input, Button } from '@chatui/core';
 import Markdown from '@/components/deepSeekIndex/Markdown'
-import laBanner from "./laBanner.png";
+import banner from "./banner_base.png";
+import bg from "./bg_base.jpg";
+import refresh from "./refresh.png";
+import _ from 'lodash';
+
+export const getTime = () => {
+    // 创建 Date 对象
+    const now = new Date();
+
+    // 获取月份（0-11，需 +1 转为实际月份）
+    const month = String(now.getMonth() + 1).padStart(2, '0'); // 补零成两位数
+    // 获取日期
+    const day = String(now.getDate()).padStart(2, '0');
+    // 获取小时
+    const hours = String(now.getHours()).padStart(2, '0');
+    // 获取分钟
+    const minutes = String(now.getMinutes()).padStart(2, '0');
+    // 组合成目标格式
+    const result = `${month}月${day}日 ${hours}:${minutes}`;
+
+    console.log(result); // 示例输出：07月15日 08:30
+
+    return result;
+}
+const example_1 = [
+    {
+        name: '联通提供哪些服务?',
+        id: '1'
+    },
+    {
+        name: '怎么办理国际漫游服务?',
+        id: '2'
+    },
+    {
+        name: '如何办理宽带?',
+        id: '3'
+    }
+]
+
+const example_2 = [
+    {
+        name: '5G套餐推荐',
+        id: '4'
+    },
+    {
+        name: '如何办理语音通话和短信的基础套餐?',
+        id: '5'
+    },
+    {
+        name: '上不了网怎么办?',
+        id: '6'
+    }
+]
 
 const DeepSeekIndex: React.FC = () => {
     const [searchValue, setSearchValue] = useState<any>();
+    const [disabled, setDisabled] = useState<boolean>(false);
+    const [exampleFlag, setExampleFlag] = useState<string>('1')
 
     const [chatHistory, setChatHistory] = useState<any[]>([]);
     const [currentResponse, setCurrentResponse] = useState<string>('');
 
     const chatRef = useRef(null);
 
-    const send = async () => {
+    useEffect(() => {
+        const _time = getTime();
+        const newHistory = [...chatHistory,
+            {role: 'time', answer: _time},
+            {
+                role: 'example',
+                answer: example_1
+            }
+        ];
+        console.log('newHistory', newHistory)
+        setChatHistory(newHistory);
+    }, [])
+
+    const refreshFun = () => {
+        const _exampleFlag = _.cloneDeep(exampleFlag);
+        const _example = _exampleFlag === '1' ? example_2 : example_1;
+        const _chatHistory = _.cloneDeep(chatHistory);
+        _chatHistory?.forEach((item: any) => {
+            if (item?.role === 'example') {
+                item.answer = _example
+            }
+        })
+        setChatHistory(_chatHistory);
+        const _newExampleFlag = _exampleFlag === '1' ? '2' : '1'
+        setExampleFlag(_newExampleFlag);
+    }
+
+    const send = async (_searchValue?: string) => {
+        if (disabled) return;
+        setDisabled(true);
         console.log('searchValue', searchValue)
+        const _value = _searchValue ? _searchValue : searchValue;
         const data = {
-            "query": searchValue,
+            "query": _value,
             "inputs": {},
             "response_mode": "streaming",
             "user": "11",
             "conversation_id": ""
         }
         const customHeaders = {
-            'Authorization': 'Bearer app-nvw8Y9taTRWuKg9ZfaoMXwNC'
+            'Authorization': 'Bearer app-XxOBqpQr6u4c43tIl6by4vpK'
         }
 
-        const newHistory = [...chatHistory, { role: 'user', answer: searchValue }];
+        const _time = getTime();
+        const newHistory = [...chatHistory,
+            {role: 'time', answer: _time},
+            {role: 'user', answer: _value}
+        ];
         setChatHistory(newHistory);
         setSearchValue('');
         let _currentResponse = '';
 
         try {
-            const response = await fetch('http://10.9.5.168/v1/chat-messages', {
+            const response = await fetch('http://36.34.99.80:8088/v1/chat-messages', {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
                     // 这里可以添加自定义请求头
                     ...customHeaders
                 },
-                body: JSON.stringify({...data })
+                body: JSON.stringify({...data})
             });
 
             if (!response.ok) {
@@ -50,9 +138,9 @@ const DeepSeekIndex: React.FC = () => {
             let buffer = '';
 
             while (true) {
-                const { done, value } = await reader.read();
+                const {done, value} = await reader.read();
                 if (done) break;
-                buffer += decoder?.decode(value, { stream: true });
+                buffer += decoder?.decode(value, {stream: true});
                 const lines = buffer?.split('\n');
                 buffer = lines.pop();
                 lines.forEach(line => {
@@ -64,10 +152,12 @@ const DeepSeekIndex: React.FC = () => {
                 });
             }
 
-            const updatedHistory = [...newHistory, { role: 'assistant', answer: _currentResponse }];
+            const updatedHistory = [...newHistory, {role: 'assistant', answer: _currentResponse}];
             setChatHistory(updatedHistory);
             setCurrentResponse('');
 
+            setDisabled(false);
+
 
         } catch (error) {
             console.error('Stream error:', error);
@@ -87,45 +177,68 @@ const DeepSeekIndex: React.FC = () => {
         console.log('chatHistory', chatHistory)
     }, [chatHistory])
 
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault(); // 阻止默认换行
+            send();
+        }
+    };
+
     return (
-       <div className={'deep-seek'}>
-           <div className={'deep-seek_header'}>
-               <img src={laBanner} alt=""/>
-           </div>
-           <div
-               ref={chatRef}
-               className={'deep-seek_content'}
-           >
-               {chatHistory?.map((msg, index) => (
-                   <p key={index} className={`mb-2 ${msg.role === 'user' ? 'text-right' : 'text-left'}`}>
-                       {
-                           msg?.role ? <div className={'role'}>
-                               {msg?.role === 'user' ? '问' : msg?.role === 'assistant' ? '答' : ''}
-                           </div> : ''
-                       }
-                       <Markdown content={msg?.answer}/>
-                   </p>
-               ))}
-               {currentResponse && (
-                   <p className="mb-2 text-left current">
-                       <div className={'role'}>答</div>
-                       <Markdown content={currentResponse} />
-                   </p>
-               )}
-           </div>
-           <div className={'deep-seek_footer'}>
-               <Input
-                   type="text"
-                   value={searchValue}
-                   className="company-list-search-input"
-                   placeholder="输入..."
-                   onChange={(e) => setSearchValue(e.target.value)}
-                   onPressEnter={send}
-               />
-               <Button type={'primary'} onClick={send}>发送</Button>
-           </div>
-
-       </div>
+        <div className={'deep-seek'}>
+            <img className={'deep-seek_bg'} src={bg} alt=""/>
+            <div
+                ref={chatRef}
+                className={'deep-seek_content'}
+            >
+                <div className={'deep-seek_header'}>
+                    <img src={banner} alt=""/>
+                </div>
+                {chatHistory?.map((msg, index) => (
+                    <div key={index} className={`${msg.role === 'user' ? 'content-right' : msg.role === 'assistant' ? 'content-left' : 'content-center' }`}>
+                        {
+                            msg.role === 'time' ?
+                                <div className={'current-time'}>{msg?.answer}</div>:
+                            msg.role ===  'example'? <div className={'current-example'}>
+                                <div className={'current-example_head'}>
+                                    <p className={'current-example_head-name'}>你想了解什么呢</p>
+                                    <img src={refresh} className={'refresh'} alt="" onClick={refreshFun}/>
+                                </div>
+                                {
+                                    msg?.answer?.map((item:any) => {
+                                        return <div
+                                            className={'omit1 current-example_title'}
+                                            key={item?.id}
+                                            onClick={() => send(item?.name || '')}
+                                        >{item?.name}</div>
+                                    })
+                                }
+                                </div> :
+                            msg.role === 'user' ? <p className={'current-ask'}>{msg?.answer}</p> :
+                                <Markdown content={msg?.answer}/>
+                        }
+
+                    </div>
+                ))}
+                {currentResponse && (
+                    <div className="content-left">
+                        <Markdown content={currentResponse}/>
+                    </div>
+                )}
+            </div>
+            <div className={'deep-seek_footer'}>
+                <Input
+                    type="text"
+                    value={searchValue}
+                    className="deep-seek_footer-search"
+                    placeholder="输入..."
+                    onChange={(val: string) => setSearchValue(val)}
+                    onKeyDown={handleKeyDown}
+                />
+                <Button className={`deep-seek_footer-send ${disabled ? 'disabled' : ''}`} color={'primary'} onClick={send}>发送</Button>
+            </div>
+
+        </div>
     );
 };
 

 .deep-seek {
-  background: #f1f1f1;
   height: 100%;
   width: 100%;
-  padding-bottom: calc( 2% + 50px);
-  padding-top: calc( 2% + 300px);
+  padding-bottom: calc(71px + constant(safe-area-inset-bottom));
+  padding-bottom: calc(71px + env(safe-area-inset-bottom));
 
-  &_header {
+  &_bg {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
+    bottom: 0;
+    z-index: 1;
+    width: 100vw;
+    height: 100vh;
+  }
+
+  &_header {
+    padding-top: 15px;
+    margin-bottom: 4px;
     img {
-      height: 300px;
-      width: auto;
+      width: 345px;
+      height: 96px;
+      margin: 0  auto;
     }
   }
 
   &_footer {
     position: fixed;
-    bottom: 2%;
-    left: 0;
-    right: 0;
+    bottom: calc(10px + constant(safe-area-inset-bottom));
+    bottom: calc(10px + env(safe-area-inset-bottom));
+    left: 10px;
+    right: 10px;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0 20%;
-    input {
-      width: 80%;
+    z-index: 3;
+    background: #FFFFFF;
+    border-radius: 15px;
+    padding: 11px 12px 11px 20px;
+    &-search {
+      width: 250px;
+      height: 32px;
+      line-height: 32px;
+      border: none;
+      padding: 0;
+      font-size: 16px;
+    }
+    &-send {
+      width: 54px;
+      min-width: 54px;
+      background: #F53F3F !important;
+      border-radius: 5px;
+      height: 32px;
+      line-height: 32px;
+      font-size: 14px;
+      color: #FFFFFF;
+      text-align: center;
+      padding: 0;
+      &.disabled {
+        opacity: 0.5;
+      }
     }
   }
 
@@ -37,6 +70,9 @@
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 0.3s;
 
+    position: relative;
+    z-index: 2;
+
     /* Webkit 浏览器（Chrome, Safari, Edge） */
     ::-webkit-scrollbar {
       width: 5px; /* 或者 height: 12px; 对于水平滚动条 */
@@ -56,3 +92,84 @@
   }
 }
 
+.content-center {
+  .current-time {
+    height: 48px;
+    line-height: 48px;
+    font-size: 12px;
+    color: #999999;
+    text-align: center;
+  }
+  .current-example {
+    margin: 0 10px 4px;
+    background: #FFFFFF;
+    box-shadow: 0 4px 0 0 rgba(217,217,217,0.50);
+    border-radius: 15px;
+    overflow: hidden;
+    &_head {
+      height: 50px;
+      width: 100%;
+      background: url("./head_base.png") center center no-repeat;
+      background-size: cover;
+      padding-left: 109px;
+      padding-top: 17px;
+      display: flex;
+      justify-content: space-between;
+      padding-right: 15px;
+
+      &-name {
+        font-size: 16px;
+        color: #1C1C1C;
+        line-height: 24px;
+        height: 24px;
+        font-weight: 500;
+      }
+      .refresh {
+        width: 20px;
+        height: 20px;
+        margin-top: 2px;
+      }
+    }
+    &_title {
+      width: 327px;
+      margin: 0 12px 12px;
+      background: #F5F9FE;
+      border-radius: 3px;
+      font-size: 15px;
+      color: #00A1FF;
+      line-height: 48px;
+      height: 48px;
+      text-align: center;
+      padding: 0 10px;
+      cursor: pointer;
+    }
+  }
+}
+
+.content-right {
+  padding-right: 10px;
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 14px;
+  .current-ask {
+    display: inline-block;
+    background: #F8E4DD;
+    padding: 12px 16px;
+    line-height: 22px;
+    width: auto;
+    max-width: 355px;
+    border-radius: 15px;
+    font-size: 16px;
+    color: #1C1C1C;
+  }
+}
+.content-left {
+  display: flex;
+  padding-left: 10px;
+  .mark-down {
+    p {
+      overflow-wrap:break-word;
+      word-break: break-all;
+    }
+  }
+}

@@ -3,8 +3,8 @@ import react from '@vitejs/plugin-react'
 import postCssPxToViewport from 'postcss-px-to-viewport';
 
 const _pxToViewPort = {
-  viewportWidth: 750, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
-  viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
+  viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
+  viewportHeight: 667, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
   unitPrecision: 5, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
   viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
   selectorBlackList: [], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名