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

View File

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

View File

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