Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2026-01-01 09:49:03 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

refactor: animate auto get dimension (#8831)

Browse Source
This commit is contained in:
one 2025-08-05 09:55:37 +08:00 committed by GitHub
parent 93979e4762
commit 028884ded6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 42 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/renderer/src/assets/styles/animation.scss
View File

@ -53,3 +53,18 @@
animation-fill-mode: both;
animation-duration: 0.25s;
}
// 旋转动画
@keyframes animation-rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.animation-rotate {
transform-origin: center;
animation: animation-rotate 0.75s linear infinite;
}

45
src/renderer/src/components/Icons/SvgSpinners180Ring.tsx
View File

@ -2,41 +2,20 @@ import { SVGProps } from 'react'
export function SvgSpinners180Ring(props: SVGProps<SVGSVGElement> & { size?: number | string }) {
const { size = '1em', ...svgProps } = props
// 避免与全局样式冲突
const animationClassName = 'svg-spinner-anim-180-ring'
return (
<>
{/* CSS transform 硬件加速 */}
<style>
{`
@keyframes svg-spinner-rotate-180-ring {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.${animationClassName} {
transform-origin: center;
animation: svg-spinner-rotate-180-ring 0.75s linear infinite;
}
`}
</style>
<svg
xmlns="http://www.w3.org/2000/svg"
width={size}
height={size}
viewBox="0 0 24 24"
{...svgProps}
className={`${animationClassName} ${svgProps.className || ''}`.trim()}>
{/* Icon from SVG Spinners by Utkarsh Verma - https://github.com/n3r4zzurr0/svg-spinners/blob/main/LICENSE */}
<path
fill="currentColor"
d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z"></path>
</svg>
</>
<svg
xmlns="http://www.w3.org/2000/svg"
width={size}
height={size}
viewBox="0 0 24 24"
{...svgProps}
className={`animation-rotate ${svgProps.className || ''}`.trim()}>
{/* Icon from SVG Spinners by Utkarsh Verma - https://github.com/n3r4zzurr0/svg-spinners/blob/main/LICENSE */}
<path
fill="currentColor"
d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z"></path>
</svg>
)
}
export default SvgSpinners180Ring

5
src/renderer/src/components/InputEmbeddingDimension.tsx
View File

@ -77,10 +77,9 @@ const InputEmbeddingDimension = ({
<Button
role="button"
aria-label="Get embedding dimension"
icon={<RefreshIcon size={16} />}
loading={loading}
disabled={disabled}
disabled={disabled || loading}
onClick={handleFetchDimension}
icon={<RefreshIcon size={16} className={loading ? 'animation-rotate' : ''} />}
/>
</Tooltip>
</Space.Compact>

6
src/renderer/src/components/__tests__/InputEmbeddingDimension.test.tsx
View File

@ -47,9 +47,9 @@ vi.mock('antd', () => {
/>
)
const MockButton: React.FC<any> = ({ children, onClick, loading, disabled, icon, ...rest }) => (
<button type="button" onClick={onClick} disabled={disabled || loading} {...rest}>
{loading ? 'Loading...' : icon}
const MockButton: React.FC<any> = ({ children, onClick, disabled, icon, className, ...rest }) => (
<button type="button" onClick={onClick} disabled={disabled} {...rest} className={className}>
{icon}
{children}
</button>
)

11
src/renderer/src/components/__tests__/__snapshots__/InputEmbeddingDimension.test.tsx.snap
View File

@ -23,6 +23,7 @@ exports[`InputEmbeddingDimension > basic rendering > should match snapshot with
>
<svg
aria-label="refresh"
class=""
data-testid="refresh-icon"
role="img"
size="16"
@ -56,7 +57,15 @@ exports[`InputEmbeddingDimension > basic rendering > should match snapshot with
role="button"
type="button"
>
Loading...
<svg
aria-label="refresh"
class="animation-rotate"
data-testid="refresh-icon"
role="img"
size="16"
>
RefreshIcon
</svg>
</button>
</div>
</div>