Commit 3394b6c8843d8f33c940ea141104edc3376f0274
1 parent
61ae859b
feat: 徽智制联-deepSeek-增加loading效果+部分样式调整
Showing
3 changed files
with
26 additions
and
3 deletions
... | ... | @@ -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; | ... | ... |