mirror of
https://github.com/CherryHQ/cherry-studio.git
synced 2025-12-19 06:30:10 +08:00
chore: code cleanup
This commit is contained in:
parent
ab21c0d56c
commit
530e6516fd
@ -1,131 +0,0 @@
|
||||
import { cn } from '@heroui/react'
|
||||
import type { ComponentPropsWithoutRef, ComponentPropsWithRef } from 'react'
|
||||
import { useMemo } from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
export const ListItem = ({ children, className, ...props }: ComponentPropsWithoutRef<'div'>) => {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'mb-2 flex w-[calc(var(--assistants-width)-20px)] cursor-pointer flex-col justify-between rounded-lg px-3 py-2 text-sm',
|
||||
'transition-colors duration-100',
|
||||
'hover:bg-[var(--color-list-item-hover)]',
|
||||
'[.active]:bg-[var(--color-list-item)] [.active]:shadow-[0_1px_2px_0_rgba(0,0,0,0.05)]',
|
||||
'[&_.menu]:text-[var(--color-text-3)] [&_.menu]:opacity-0',
|
||||
'hover:[&_.menu]:opacity-100',
|
||||
'[.active]:[&_.menu]:opacity-100 [.active]:[&_.menu]:hover:text-[var(--color-text-2)]',
|
||||
'[.singlealone.active]:border-[var(--color-primary)] [.singlealone.active]:shadow-none [.singlealone]:rounded-none [.singlealone]:border-transparent [.singlealone]:border-l-2 [.singlealone]:hover:bg-[var(--color-background-soft)]',
|
||||
className
|
||||
)}
|
||||
{...props}>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export const ListItemNameContainer = ({ children, className, ...props }: ComponentPropsWithoutRef<'div'>) => {
|
||||
return (
|
||||
<div className={cn('flex h-5 flex-row items-center justify-between gap-1', className)} {...props}>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// This component involves complex animations and will not be migrated for now.
|
||||
export const ListItemName = styled.div`
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
will-change: background-position, width;
|
||||
|
||||
--color-shimmer-mid: var(--color-text-1);
|
||||
--color-shimmer-end: color-mix(in srgb, var(--color-text-1) 25%, transparent);
|
||||
|
||||
&.shimmer {
|
||||
background: linear-gradient(to left, var(--color-shimmer-end), var(--color-shimmer-mid), var(--color-shimmer-end));
|
||||
background-size: 200% 100%;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
animation: shimmer 3s linear infinite;
|
||||
}
|
||||
|
||||
&.typing {
|
||||
display: block;
|
||||
-webkit-line-clamp: unset;
|
||||
-webkit-box-orient: unset;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
animation: typewriter 0.5s steps(40, end);
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes typewriter {
|
||||
from {
|
||||
width: 0;
|
||||
}
|
||||
to {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const ListItemEditInput = ({ className, ...props }: ComponentPropsWithRef<'input'>) => {
|
||||
return (
|
||||
<input
|
||||
className={cn(
|
||||
'w-full border-none bg-[var(--color-background)] p-0 font-inherit text-[var(--color-text-1)] text-sm outline-none',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export const ListContainer = ({ children, className, ...props }: ComponentPropsWithoutRef<'div'>) => {
|
||||
return (
|
||||
<div className={cn('flex h-full w-full flex-col p-2', className)} {...props}>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const MenuButton = ({ children, className, ...props }: ComponentPropsWithoutRef<'div'>) => {
|
||||
return (
|
||||
<div className={cn('menu', 'flex min-h-5 min-w-5 flex-row items-center justify-center', className)} {...props}>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const StatusIndicator = ({ variant }: { variant: 'pending' | 'fulfilled' }) => {
|
||||
const colors = useMemo(() => {
|
||||
switch (variant) {
|
||||
case 'pending':
|
||||
return {
|
||||
wave: 'bg-warning-400',
|
||||
back: 'bg-warning-500'
|
||||
}
|
||||
case 'fulfilled':
|
||||
return {
|
||||
wave: 'bg-success-400',
|
||||
back: 'bg-success-500'
|
||||
}
|
||||
}
|
||||
}, [variant])
|
||||
return (
|
||||
<div className="absolute top-4 left-1 flex size-1">
|
||||
<span className={cn('absolute inline-flex h-full w-full animate-ping rounded-full opacity-75', colors.wave)} />
|
||||
<span className={cn('relative inline-flex size-1 rounded-full bg-warning-500', colors.back)} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -97,8 +97,7 @@ const initialState: RuntimeState = {
|
||||
},
|
||||
websearch: {
|
||||
activeSearches: {}
|
||||
},
|
||||
iknow: {}
|
||||
}
|
||||
}
|
||||
|
||||
const runtimeSlice = createSlice({
|
||||
|
||||
Loading…
Reference in New Issue
Block a user