mirror of
https://github.com/CherryHQ/cherry-studio.git
synced 2025-12-23 18:10:26 +08:00
refactor: update icon usage and improve painting state management
* replaced InfoCircleFilled icon with Info from lucide-react for consistency * simplified painting state initialization and handling in AihubmixPage and PaintingsPage * removed unnecessary conditional logic for setting default painting
This commit is contained in:
parent
ce8b85020b
commit
a6a8324cdb
@ -1,4 +1,4 @@
|
|||||||
import { InfoCircleFilled, PlusOutlined, RedoOutlined } from '@ant-design/icons'
|
import { PlusOutlined, RedoOutlined } from '@ant-design/icons'
|
||||||
import IcImageUp from '@renderer/assets/images/paintings/ic_ImageUp.svg'
|
import IcImageUp from '@renderer/assets/images/paintings/ic_ImageUp.svg'
|
||||||
import { Navbar, NavbarCenter, NavbarRight } from '@renderer/components/app/Navbar'
|
import { Navbar, NavbarCenter, NavbarRight } from '@renderer/components/app/Navbar'
|
||||||
import { HStack } from '@renderer/components/Layout'
|
import { HStack } from '@renderer/components/Layout'
|
||||||
@ -20,6 +20,7 @@ import type { PaintingAction, PaintingsState } from '@renderer/types'
|
|||||||
import { getErrorMessage, uuid } from '@renderer/utils'
|
import { getErrorMessage, uuid } from '@renderer/utils'
|
||||||
import { Avatar, Button, Input, InputNumber, Radio, Segmented, Select, Slider, Switch, Tooltip, Upload } from 'antd'
|
import { Avatar, Button, Input, InputNumber, Radio, Segmented, Select, Slider, Switch, Tooltip, Upload } from 'antd'
|
||||||
import TextArea from 'antd/es/input/TextArea'
|
import TextArea from 'antd/es/input/TextArea'
|
||||||
|
import { Info } from 'lucide-react'
|
||||||
import type { FC } from 'react'
|
import type { FC } from 'react'
|
||||||
import { useEffect, useMemo, useRef, useState } from 'react'
|
import { useEffect, useMemo, useRef, useState } from 'react'
|
||||||
import { useTranslation } from 'react-i18next'
|
import { useTranslation } from 'react-i18next'
|
||||||
@ -72,6 +73,7 @@ const AihubmixPage: FC<{ Options: string[] }> = ({ Options }) => {
|
|||||||
{ label: t('paintings.mode.remix'), value: 'remix' },
|
{ label: t('paintings.mode.remix'), value: 'remix' },
|
||||||
{ label: t('paintings.mode.upscale'), value: 'upscale' }
|
{ label: t('paintings.mode.upscale'), value: 'upscale' }
|
||||||
]
|
]
|
||||||
|
|
||||||
const getNewPainting = () => {
|
const getNewPainting = () => {
|
||||||
return {
|
return {
|
||||||
...DEFAULT_PAINTING,
|
...DEFAULT_PAINTING,
|
||||||
@ -278,14 +280,6 @@ const AihubmixPage: FC<{ Options: string[] }> = ({ Options }) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
removePainting(mode, paintingToDelete)
|
removePainting(mode, paintingToDelete)
|
||||||
|
|
||||||
if (filteredPaintings.length === 1) {
|
|
||||||
const defaultPainting = {
|
|
||||||
...DEFAULT_PAINTING,
|
|
||||||
id: uuid()
|
|
||||||
}
|
|
||||||
setPainting(defaultPainting)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const translate = async () => {
|
const translate = async () => {
|
||||||
@ -334,6 +328,7 @@ const AihubmixPage: FC<{ Options: string[] }> = ({ Options }) => {
|
|||||||
navigate('../' + providerId, { replace: true })
|
navigate('../' + providerId, { replace: true })
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 处理模式切换
|
// 处理模式切换
|
||||||
const handleModeChange = (value: string) => {
|
const handleModeChange = (value: string) => {
|
||||||
setMode(value as keyof PaintingsState)
|
setMode(value as keyof PaintingsState)
|
||||||
@ -494,8 +489,9 @@ const AihubmixPage: FC<{ Options: string[] }> = ({ Options }) => {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (filteredPaintings.length === 0) {
|
if (filteredPaintings.length === 0) {
|
||||||
addPainting(mode, getNewPainting())
|
const newPainting = getNewPainting()
|
||||||
setPainting(DEFAULT_PAINTING)
|
addPainting(mode, newPainting)
|
||||||
|
setPainting(newPainting)
|
||||||
}
|
}
|
||||||
}, [filteredPaintings, mode, addPainting, painting])
|
}, [filteredPaintings, mode, addPainting, painting])
|
||||||
|
|
||||||
@ -674,11 +670,17 @@ const ToolbarMenu = styled.div`
|
|||||||
gap: 6px;
|
gap: 6px;
|
||||||
`
|
`
|
||||||
|
|
||||||
const InfoIcon = styled(InfoCircleFilled)`
|
const InfoIcon = styled(Info)`
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
cursor: help;
|
cursor: help;
|
||||||
color: #8d94a6;
|
color: var(--color-text-2);
|
||||||
font-size: 12px;
|
opacity: 0.6;
|
||||||
|
width: 14px;
|
||||||
|
height: 16px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
const SliderContainer = styled.div`
|
const SliderContainer = styled.div`
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import { PlusOutlined, QuestionCircleOutlined, RedoOutlined } from '@ant-design/icons'
|
import { PlusOutlined, RedoOutlined } from '@ant-design/icons'
|
||||||
import ImageSize1_1 from '@renderer/assets/images/paintings/image-size-1-1.svg'
|
import ImageSize1_1 from '@renderer/assets/images/paintings/image-size-1-1.svg'
|
||||||
import ImageSize1_2 from '@renderer/assets/images/paintings/image-size-1-2.svg'
|
import ImageSize1_2 from '@renderer/assets/images/paintings/image-size-1-2.svg'
|
||||||
import ImageSize3_2 from '@renderer/assets/images/paintings/image-size-3-2.svg'
|
import ImageSize3_2 from '@renderer/assets/images/paintings/image-size-3-2.svg'
|
||||||
@ -26,6 +26,7 @@ import type { FileType, Painting } from '@renderer/types'
|
|||||||
import { getErrorMessage, uuid } from '@renderer/utils'
|
import { getErrorMessage, uuid } from '@renderer/utils'
|
||||||
import { Button, Input, InputNumber, Radio, Select, Slider, Switch, Tooltip } from 'antd'
|
import { Button, Input, InputNumber, Radio, Select, Slider, Switch, Tooltip } from 'antd'
|
||||||
import TextArea from 'antd/es/input/TextArea'
|
import TextArea from 'antd/es/input/TextArea'
|
||||||
|
import { Info } from 'lucide-react'
|
||||||
import type { FC } from 'react'
|
import type { FC } from 'react'
|
||||||
import { useEffect, useRef, useState } from 'react'
|
import { useEffect, useRef, useState } from 'react'
|
||||||
import { useTranslation } from 'react-i18next'
|
import { useTranslation } from 'react-i18next'
|
||||||
@ -90,7 +91,7 @@ const DEFAULT_PAINTING: Painting = {
|
|||||||
const PaintingsPage: FC<{ Options: string[] }> = ({ Options }) => {
|
const PaintingsPage: FC<{ Options: string[] }> = ({ Options }) => {
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
const { paintings, addPainting, removePainting, updatePainting } = usePaintings()
|
const { paintings, addPainting, removePainting, updatePainting } = usePaintings()
|
||||||
const [painting, setPainting] = useState<Painting>(DEFAULT_PAINTING)
|
const [painting, setPainting] = useState<Painting>(paintings[0] || DEFAULT_PAINTING)
|
||||||
const { theme } = useTheme()
|
const { theme } = useTheme()
|
||||||
const providers = useAllProviders()
|
const providers = useAllProviders()
|
||||||
const providerOptions = Options.map((option) => {
|
const providerOptions = Options.map((option) => {
|
||||||
@ -260,10 +261,6 @@ const PaintingsPage: FC<{ Options: string[] }> = ({ Options }) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
removePainting('paintings', paintingToDelete)
|
removePainting('paintings', paintingToDelete)
|
||||||
|
|
||||||
if (paintings.length === 1) {
|
|
||||||
setPainting(getNewPainting())
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const onSelectPainting = (newPainting: Painting) => {
|
const onSelectPainting = (newPainting: Painting) => {
|
||||||
@ -326,8 +323,11 @@ const PaintingsPage: FC<{ Options: string[] }> = ({ Options }) => {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (paintings.length === 0) {
|
if (paintings.length === 0) {
|
||||||
addPainting('paintings', getNewPainting())
|
const newPainting = getNewPainting()
|
||||||
|
addPainting('paintings', newPainting)
|
||||||
|
setPainting(newPainting)
|
||||||
}
|
}
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
if (spaceClickTimer.current) {
|
if (spaceClickTimer.current) {
|
||||||
clearTimeout(spaceClickTimer.current)
|
clearTimeout(spaceClickTimer.current)
|
||||||
@ -602,11 +602,13 @@ const RadioButton = styled(Radio.Button)`
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
`
|
`
|
||||||
|
|
||||||
const InfoIcon = styled(QuestionCircleOutlined)`
|
const InfoIcon = styled(Info)`
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
cursor: help;
|
cursor: help;
|
||||||
color: var(--color-text-2);
|
color: var(--color-text-2);
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user