refactor: Simplify Segmented component styling

- Remove custom Segmented styling from AntdProvider
- Update HomeTabs Segmented component with refined styles
- Consolidate Segmented styling in a single location
- Improve visual consistency with rounded corners and transparent background
This commit is contained in:
kangfenmao 2025-02-28 23:25:30 +08:00
parent 28c59ea436
commit ac92f1a783
2 changed files with 14 additions and 17 deletions

View File

@ -13,7 +13,6 @@ import { useTheme } from './ThemeProvider'
const AntdProvider: FC<PropsWithChildren> = ({ children }) => {
const { language } = useSettings()
const { theme: _theme } = useTheme()
const isDarkTheme = _theme === 'dark'
return (
<ConfigProvider
@ -21,14 +20,6 @@ const AntdProvider: FC<PropsWithChildren> = ({ children }) => {
theme={{
algorithm: [_theme === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm],
components: {
Segmented: {
trackBg: 'transparent',
itemSelectedBg: isDarkTheme ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)',
boxShadowTertiary: undefined,
borderRadiusLG: 16,
borderRadiusSM: 16,
borderRadiusXS: 16
},
Menu: {
activeBarBorderWidth: 0,
darkItemBg: 'transparent'

View File

@ -98,14 +98,7 @@ const HomeTabs: FC<Props> = ({ activeAssistant, activeTopic, setActiveAssistant,
{showTab && (
<Segmented
value={tab}
style={{
borderRadius: 0,
padding: '10px 0',
margin: '0 10px',
paddingBottom: 10,
borderBottom: '0.5px solid var(--color-border)',
gap: 2
}}
style={{ borderRadius: 16, paddingTop: 10, margin: '0 10px', gap: 2 }}
options={
[
position === 'left' && topicPosition === 'left' ? assistantTab : undefined,
@ -173,6 +166,8 @@ const Segmented = styled(AntSegmented)`
line-height: 34px;
background-color: transparent;
user-select: none;
border-radius: var(--list-item-border-radius);
box-shadow: none;
}
.ant-segmented-item-selected {
background-color: var(--color-background-soft);
@ -204,7 +199,18 @@ const Segmented = styled(AntSegmented)`
transition: none !important;
background-color: var(--color-background-soft);
border: 0.5px solid var(--color-border);
border-radius: var(--list-item-border-radius);
box-shadow: none;
}
/* Added styles from AntdProvider */
&.ant-segmented {
background-color: transparent;
}
/* These styles ensure the same appearance as before */
border-radius: 16px;
box-shadow: none;
`
export default HomeTabs