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:
kangfenmao 2025-05-09 20:50:13 +08:00
parent ce8b85020b
commit a6a8324cdb
2 changed files with 26 additions and 22 deletions

View File

@ -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 { Navbar, NavbarCenter, NavbarRight } from '@renderer/components/app/Navbar'
import { HStack } from '@renderer/components/Layout'
@ -20,6 +20,7 @@ import type { PaintingAction, PaintingsState } from '@renderer/types'
import { getErrorMessage, uuid } from '@renderer/utils'
import { Avatar, Button, Input, InputNumber, Radio, Segmented, Select, Slider, Switch, Tooltip, Upload } from 'antd'
import TextArea from 'antd/es/input/TextArea'
import { Info } from 'lucide-react'
import type { FC } from 'react'
import { useEffect, useMemo, useRef, useState } from 'react'
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.upscale'), value: 'upscale' }
]
const getNewPainting = () => {
return {
...DEFAULT_PAINTING,
@ -278,14 +280,6 @@ const AihubmixPage: FC<{ Options: string[] }> = ({ Options }) => {
}
removePainting(mode, paintingToDelete)
if (filteredPaintings.length === 1) {
const defaultPainting = {
...DEFAULT_PAINTING,
id: uuid()
}
setPainting(defaultPainting)
}
}
const translate = async () => {
@ -334,6 +328,7 @@ const AihubmixPage: FC<{ Options: string[] }> = ({ Options }) => {
navigate('../' + providerId, { replace: true })
}
}
// 处理模式切换
const handleModeChange = (value: string) => {
setMode(value as keyof PaintingsState)
@ -494,8 +489,9 @@ const AihubmixPage: FC<{ Options: string[] }> = ({ Options }) => {
useEffect(() => {
if (filteredPaintings.length === 0) {
addPainting(mode, getNewPainting())
setPainting(DEFAULT_PAINTING)
const newPainting = getNewPainting()
addPainting(mode, newPainting)
setPainting(newPainting)
}
}, [filteredPaintings, mode, addPainting, painting])
@ -674,11 +670,17 @@ const ToolbarMenu = styled.div`
gap: 6px;
`
const InfoIcon = styled(InfoCircleFilled)`
const InfoIcon = styled(Info)`
margin-left: 5px;
cursor: help;
color: #8d94a6;
font-size: 12px;
color: var(--color-text-2);
opacity: 0.6;
width: 14px;
height: 16px;
&:hover {
opacity: 1;
}
`
const SliderContainer = styled.div`

View File

@ -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_2 from '@renderer/assets/images/paintings/image-size-1-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 { Button, Input, InputNumber, Radio, Select, Slider, Switch, Tooltip } from 'antd'
import TextArea from 'antd/es/input/TextArea'
import { Info } from 'lucide-react'
import type { FC } from 'react'
import { useEffect, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
@ -90,7 +91,7 @@ const DEFAULT_PAINTING: Painting = {
const PaintingsPage: FC<{ Options: string[] }> = ({ Options }) => {
const { t } = useTranslation()
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 providers = useAllProviders()
const providerOptions = Options.map((option) => {
@ -260,10 +261,6 @@ const PaintingsPage: FC<{ Options: string[] }> = ({ Options }) => {
}
removePainting('paintings', paintingToDelete)
if (paintings.length === 1) {
setPainting(getNewPainting())
}
}
const onSelectPainting = (newPainting: Painting) => {
@ -326,8 +323,11 @@ const PaintingsPage: FC<{ Options: string[] }> = ({ Options }) => {
useEffect(() => {
if (paintings.length === 0) {
addPainting('paintings', getNewPainting())
const newPainting = getNewPainting()
addPainting('paintings', newPainting)
setPainting(newPainting)
}
return () => {
if (spaceClickTimer.current) {
clearTimeout(spaceClickTimer.current)
@ -602,11 +602,13 @@ const RadioButton = styled(Radio.Button)`
align-items: center;
`
const InfoIcon = styled(QuestionCircleOutlined)`
const InfoIcon = styled(Info)`
margin-left: 5px;
cursor: help;
color: var(--color-text-2);
opacity: 0.6;
width: 16px;
height: 16px;
&:hover {
opacity: 1;