Commit 3394b6c8843d8f33c940ea141104edc3376f0274

Authored by 史婷婷
1 parent 61ae859b

feat: 徽智制联-deepSeek-增加loading效果+部分样式调整

1 1
2 2 .mark-down {
3 3 width: auto;
4   - max-width: 355px;
  4 + max-width: 320px;
5 5 background: #fff;
6 6 border-radius: 15px;
7 7 padding: 12px 28px 12px 16px;
... ...
... ... @@ -58,6 +58,7 @@ const example_2 = [
58 58
59 59 const DeepSeekIndex: React.FC = () => {
60 60 const [searchValue, setSearchValue] = useState<any>();
  61 + const [loading, setLoading] = useState<boolean>(false);
61 62 const [disabled, setDisabled] = useState<boolean>(false);
62 63 const [exampleFlag, setExampleFlag] = useState<string>('1')
63 64
... ... @@ -96,6 +97,7 @@ const DeepSeekIndex: React.FC = () => {
96 97
97 98 const send = async (_searchValue?: string) => {
98 99 if (disabled) return;
  100 + setLoading(true)
99 101 setDisabled(true);
100 102 console.log('searchValue', searchValue)
101 103 const _value = _searchValue ? _searchValue : searchValue;
... ... @@ -144,6 +146,7 @@ const DeepSeekIndex: React.FC = () => {
144 146 buffer += decoder?.decode(value, {stream: true});
145 147 const lines: any[] = buffer?.split('\n');
146 148 buffer = lines?.pop();
  149 + setLoading(false)
147 150 lines?.forEach(line => {
148 151 if (line.startsWith('data:')) {
149 152 const data = JSON.parse(line?.slice(5)?.trim());
... ... @@ -162,6 +165,7 @@ const DeepSeekIndex: React.FC = () => {
162 165
163 166 } catch (error) {
164 167 console.error('Stream error:', error);
  168 + setLoading(false)
165 169 }
166 170
167 171 }
... ... @@ -222,6 +226,13 @@ const DeepSeekIndex: React.FC = () => {
222 226
223 227 </div>
224 228 ))}
  229 + {
  230 + loading ? <div className="content-left">
  231 + <div className={'current-think'}>
  232 + 思考中...
  233 + </div>
  234 + </div> : ''
  235 + }
225 236 {currentResponse ? (
226 237 <div className="content-left">
227 238 <Markdown content={currentResponse || ''}/>
... ... @@ -237,7 +248,7 @@ const DeepSeekIndex: React.FC = () => {
237 248 onChange={(val: string) => setSearchValue(val)}
238 249 onKeyDown={handleKeyDown}
239 250 />
240   - <Button className={`deep-seek_footer-send ${disabled ? 'disabled' : ''}`} color={'primary'} onClick={() =>send}>发送</Button>
  251 + <Button className={`deep-seek_footer-send ${disabled ? 'disabled' : ''}`} color={'primary'} onClick={() =>send()}>发送</Button>
241 252 </div>
242 253
243 254 </div>
... ...
... ... @@ -157,7 +157,7 @@
157 157 padding: 12px 16px;
158 158 line-height: 22px;
159 159 width: auto;
160   - max-width: 355px;
  160 + max-width: 320px;
161 161 border-radius: 15px;
162 162 font-size: 16px;
163 163 color: #1C1C1C;
... ... @@ -166,6 +166,18 @@
166 166 .content-left {
167 167 display: flex;
168 168 padding-left: 10px;
  169 + .current-think {
  170 + display: inline-block;
  171 + background: #fff;
  172 + padding: 12px 16px;
  173 + line-height: 22px;
  174 + width: auto;
  175 + max-width: 320px;
  176 + border-radius: 15px;
  177 + font-size: 16px;
  178 + color: #aaa;
  179 +
  180 + }
169 181 .mark-down {
170 182 p {
171 183 overflow-wrap:break-word;
... ...