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; | ... | ... |