fix: 修复选中问题

This commit is contained in:
Teo 2025-01-23 16:35:55 +08:00 committed by 亢奋猫
parent fd1629e004
commit 8c66f0e41a
3 changed files with 15 additions and 7 deletions

View File

@ -8,8 +8,16 @@ interface Props {
activeTab?: SettingsTab
}
const SettingsPopup: FC<Props> = ({ actionButton, activeTab }) => {
const SettingsPopup: FC<Props> = (props) => {
const [open, setOpen] = useState(false)
const [activeTab, setActiveTab] = useState<SettingsTab | undefined>(props.activeTab)
const onOpen = () => {
if (props.activeTab) {
setActiveTab(props.activeTab)
}
setOpen(true)
}
const onCancel = () => {
setOpen(false)
@ -17,7 +25,7 @@ const SettingsPopup: FC<Props> = ({ actionButton, activeTab }) => {
return (
<>
<div onClick={() => setOpen(true)}>{actionButton}</div>
<div onClick={onOpen}>{props.actionButton}</div>
<GlobalStyle />
<StyledModal
transitionName="ant-move-down"
@ -26,7 +34,7 @@ const SettingsPopup: FC<Props> = ({ actionButton, activeTab }) => {
open={open}
onCancel={onCancel}
footer={null}>
<SettingsPage activeTab={activeTab} />
<SettingsPage activeTab={activeTab} onTabChange={setActiveTab} />
</StyledModal>
</>
)
@ -48,7 +56,6 @@ const StyledModal = styled(Modal)`
padding: 0;
overflow: hidden;
border-radius: 12px;
/* border: 0.5px solid var(--color-border); */
}
.ant-modal-close {
top: 4px;

View File

@ -34,6 +34,7 @@ export type SettingsTab =
interface Props {
activeTab?: SettingsTab
onTabChange?: (tab: SettingsTab) => void
}
interface MenuItem {
label: string
@ -44,9 +45,10 @@ interface MenuItem {
const SettingsPage: FC<Props> = (props) => {
const { t } = useTranslation()
const [activeTab, setActiveTab] = useState<string>(props.activeTab || 'provider')
const [collapsed, setCollapsed] = useState(false)
const activeTab = props.activeTab || 'provider'
const settingMenus = useMemo<MenuItem[]>(
() => [
{
@ -141,7 +143,7 @@ const SettingsPage: FC<Props> = (props) => {
<Title>{t('settings.title')}</Title>
<Menu
mode="inline"
onClick={(e) => setActiveTab(e.key)}
onClick={(e) => props.onTabChange?.(e.key as SettingsTab)}
selectedKeys={[activeTab]}
items={settingMenus.filter((item) => item.enabled)}
inlineCollapsed={collapsed}

View File

@ -12,7 +12,6 @@ export const SettingContainer = styled.div<{ theme?: ThemeMode }>`
padding-top: 15px;
overflow-y: scroll;
font-family: Ubuntu;
/* background: ${(props) => (props.theme === 'dark' ? 'transparent' : 'var(--color-background-soft)')}; */
&::-webkit-scrollbar {
display: none;