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

refactor(AgentSettings): extract styled components to shared module

Browse Source 
Move styled components from AgentSettingsPopup to shared.tsx to improve code reusability and maintainability
This commit is contained in:
icarus 2025-09-26 00:13:13 +08:00
parent cab79ef185
commit 3c4bb72a82
2 changed files with 58 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/renderer/src/pages/settings/AgentSettings/AgentSettingsPopup.tsx
View File

@ -2,16 +2,14 @@ import { Alert, Spinner } from '@heroui/react'
import { TopView } from '@renderer/components/TopView' import { TopView } from '@renderer/components/TopView'
import { useAgent } from '@renderer/hooks/agents/useAgent' import { useAgent } from '@renderer/hooks/agents/useAgent'
import { useUpdateAgent } from '@renderer/hooks/agents/useUpdateAgent' import { useUpdateAgent } from '@renderer/hooks/agents/useUpdateAgent'
import { Menu, Modal } from 'antd'
import { useState } from 'react' import { useState } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import styled from 'styled-components'
import AgentAdvancedSettings from './AgentAdvancedSettings' import AgentAdvancedSettings from './AgentAdvancedSettings'
import AgentEssentialSettings from './AgentEssentialSettings' import AgentEssentialSettings from './AgentEssentialSettings'
import AgentPromptSettings from './AgentPromptSettings' import AgentPromptSettings from './AgentPromptSettings'
import AgentToolingSettings from './AgentToolingSettings' import AgentToolingSettings from './AgentToolingSettings'
import { AgentLabel } from './shared' import { AgentLabel, LeftMenu, Settings, StyledMenu, StyledModal } from './shared'
interface AgentSettingPopupShowParams { interface AgentSettingPopupShowParams {
agentId: string agentId: string
@ -137,61 +135,6 @@ const AgentSettingPopupContainer: React.FC<AgentSettingPopupParams> = ({ tab, ag
) )
} }
const LeftMenu = styled.div`
height: 100%;
border-right: 0.5px solid var(--color-border);
`
const Settings = styled.div`
display: flex;
flex-direction: column;
flex: 1;
padding: 16px 16px;
`
const StyledModal = styled(Modal)`
.ant-modal-title {
font-size: 14px;
}
.ant-modal-close {
top: 4px;
right: 4px;
}
.ant-menu-item {
height: 36px;
color: var(--color-text-2);
display: flex;
align-items: center;
border: 0.5px solid transparent;
border-radius: 6px;
.ant-menu-title-content {
line-height: 36px;
}
}
.ant-menu-item-active {
background-color: var(--color-background-soft) !important;
transition: none;
}
.ant-menu-item-selected {
background-color: var(--color-background-soft);
border: 0.5px solid var(--color-border);
.ant-menu-title-content {
color: var(--color-text-1);
font-weight: 500;
}
}
`
const StyledMenu = styled(Menu)`
width: 220px;
padding: 5px;
background: transparent;
margin-top: 2px;
.ant-menu-item {
margin-bottom: 7px;
}
`
export default class AgentSettingsPopup { export default class AgentSettingsPopup {
static show(props: AgentSettingPopupShowParams) { static show(props: AgentSettingPopupShowParams) {
return new Promise<void>((resolve) => { return new Promise<void>((resolve) => {

57
src/renderer/src/pages/settings/AgentSettings/shared.tsx
View File

@ -2,7 +2,9 @@ import { Avatar, AvatarProps, cn } from '@heroui/react'
import { getAgentAvatar } from '@renderer/config/agent' import { getAgentAvatar } from '@renderer/config/agent'
import { getAgentTypeLabel } from '@renderer/i18n/label' import { getAgentTypeLabel } from '@renderer/i18n/label'
import { AgentType } from '@renderer/types' import { AgentType } from '@renderer/types'
import { Menu, Modal } from 'antd'
import React, { ReactNode } from 'react' import React, { ReactNode } from 'react'
import styled from 'styled-components'
import { SettingDivider } from '..' import { SettingDivider } from '..'
@ -72,3 +74,58 @@ export const SettingsContainer: React.FC<React.ComponentPropsWithRef<'div'>> = (
</div> </div>
) )
} }
export const LeftMenu = styled.div`
height: 100%;
border-right: 0.5px solid var(--color-border);
`
export const Settings = styled.div`
display: flex;
flex-direction: column;
flex: 1;
padding: 16px 16px;
`
export const StyledModal = styled(Modal)`
.ant-modal-title {
font-size: 14px;
}
.ant-modal-close {
top: 4px;
right: 4px;
}
.ant-menu-item {
height: 36px;
color: var(--color-text-2);
display: flex;
align-items: center;
border: 0.5px solid transparent;
border-radius: 6px;
.ant-menu-title-content {
line-height: 36px;
}
}
.ant-menu-item-active {
background-color: var(--color-background-soft) !important;
transition: none;
}
.ant-menu-item-selected {
background-color: var(--color-background-soft);
border: 0.5px solid var(--color-border);
.ant-menu-title-content {
color: var(--color-text-1);
font-weight: 500;
}
}
`
export const StyledMenu = styled(Menu)`
width: 220px;
padding: 5px;
background: transparent;
margin-top: 2px;
.ant-menu-item {
margin-bottom: 7px;
}
`