refactor(components): 优化 Segments 组件

- 修复组件名称拼写错误,将 HSegmengts 改为 Segmengts
- 增加禁用状态处理,优化用户体验
- 调整样式,确保禁用状态下的视觉反馈
This commit is contained in:
Vixalie
2025-08-12 22:31:18 +08:00
parent 032e3af282
commit dd8c632e69

View File

@@ -25,7 +25,7 @@ interface SegmentsProps {
onChange?: (value: Option['value'] | undefined) => void; onChange?: (value: Option['value'] | undefined) => void;
} }
export const HSegmengts: Component<SegmentsProps> = (props) => { export const Segmengts: Component<SegmentsProps> = (props) => {
const mProps = mergeProps<SegmentsProps[]>( const mProps = mergeProps<SegmentsProps[]>(
{ {
options: [], options: [],
@@ -62,12 +62,15 @@ export const HSegmengts: Component<SegmentsProps> = (props) => {
}); });
const handleSelect = (value: Option['value']) => { const handleSelect = (value: Option['value']) => {
if (mProps.disabled) {
return;
}
setSelected(value); setSelected(value);
mProps.onChange?.(value); mProps.onChange?.(value);
}; };
return ( return (
<div class="inline-block overflow-hidden rounded-sm bg-neutral p-1 select-none"> <div class="inline-block overflow-hidden rounded-sm p-1 select-none bg-neutral">
<div <div
class={cx( class={cx(
'relative flex', 'relative flex',
@@ -77,11 +80,12 @@ export const HSegmengts: Component<SegmentsProps> = (props) => {
{(option, index) => ( {(option, index) => (
<div <div
ref={(el) => (optionRefs[index] = el)} ref={(el) => (optionRefs[index] = el)}
aria-disabled={mProps.disabled}
class={cx( class={cx(
'z-[5] cursor-pointer rounded-sm px-2 py-1', 'z-[5] cursor-pointer rounded-sm px-2 py-1',
selected() === option().value selected() === option().value
? 'text-on-primary-surface hover:bg-primary-surface-hover/45' ? 'not-aria-disabled:text-on-primary-surface aria-disabled:text-primary-disabled hover:not-aria-disabled:bg-primary-surface-hover/45'
: 'text-on-surface hover:bg-surface/35', : 'not-aria-disabled:text-on-surface aria-disabled:text-surface-disabled hover:not-aria-disabled:bg-surface/35',
)} )}
onClick={() => handleSelect(option().value)}> onClick={() => handleSelect(option().value)}>
{option().label} {option().label}