style: example code title

This commit is contained in:
jialin
2025-11-20 12:46:06 +08:00
parent de882dc62e
commit 9b63c1a515
3 changed files with 17 additions and 1 deletions
+13 -1
View File
@@ -12,6 +12,7 @@ interface ThemeType {
interface SegmentLineProps extends SegmentedProps { interface SegmentLineProps extends SegmentedProps {
height?: number; height?: number;
theme?: 'dark' | 'light'; theme?: 'dark' | 'light';
showTitle?: boolean;
} }
const darkTheme: ThemeType = { const darkTheme: ThemeType = {
@@ -30,7 +31,10 @@ const lightTheme: ThemeType = {
fontWeight: 500 fontWeight: 500
}; };
const SegmentedQwrapper = styled.div<{ $height: number; $theme: ThemeType }>` const SegmentedQwrapper = styled.div<{
$height: number;
$theme: ThemeType;
}>`
.ant-segmented.segment-line { .ant-segmented.segment-line {
padding: 0; padding: 0;
background-color: transparent; background-color: transparent;
@@ -76,6 +80,7 @@ const SegmentedQwrapper = styled.div<{ $height: number; $theme: ThemeType }>`
opacity: 1; opacity: 1;
} }
} }
.ant-segmented-item-selected { .ant-segmented-item-selected {
background-color: transparent; background-color: transparent;
box-shadow: none; box-shadow: none;
@@ -86,6 +91,11 @@ const SegmentedQwrapper = styled.div<{ $height: number; $theme: ThemeType }>`
} }
} }
} }
&.with-title .ant-segmented.segment-line {
.ant-segmented-item.ant-segmented-item-selected::after {
display: none;
}
}
`; `;
const SegmentLine: React.FC<SegmentLineProps> = (props) => { const SegmentLine: React.FC<SegmentLineProps> = (props) => {
@@ -95,11 +105,13 @@ const SegmentLine: React.FC<SegmentLineProps> = (props) => {
options = [], options = [],
className = 'segment-line', className = 'segment-line',
theme = 'dark', theme = 'dark',
showTitle = false,
...rest ...rest
} = props; } = props;
return ( return (
<SegmentedQwrapper <SegmentedQwrapper
className={showTitle ? 'with-title' : ''}
$height={height} $height={height}
$theme={theme === 'dark' ? darkTheme : lightTheme} $theme={theme === 'dark' ? darkTheme : lightTheme}
> >
@@ -11,6 +11,7 @@ interface ViewerProps {
options?: Global.BaseOption<string>[]; options?: Global.BaseOption<string>[];
defaultValue?: string; defaultValue?: string;
headerHeight?: number; headerHeight?: number;
showTitle?: boolean;
height?: number; height?: number;
lang?: string; lang?: string;
onChange?: (value: string | number) => void; onChange?: (value: string | number) => void;
@@ -33,6 +34,7 @@ const CommandViewer: React.FC<ViewerProps> = (props) => {
options = [], options = [],
headerHeight = 40, headerHeight = 40,
height = 380, height = 380,
showTitle = false,
lang, lang,
onChange onChange
} = props || {}; } = props || {};
@@ -54,6 +56,7 @@ const CommandViewer: React.FC<ViewerProps> = (props) => {
value={value} value={value}
size="small" size="small"
options={options} options={options}
showTitle={showTitle}
onChange={handlOnChange} onChange={handlOnChange}
></SegmentLine> ></SegmentLine>
@@ -123,6 +123,7 @@ const useGenericProxy = () => {
const GenericProxyCommandCode = ( const GenericProxyCommandCode = (
<CommandViewer <CommandViewer
showTitle={true}
code={modalStatus.codeValue} code={modalStatus.codeValue}
copyText={modalStatus.codeValue} copyText={modalStatus.codeValue}
options={langOptions} options={langOptions}