style(Segments): 优化样式和布局

- 调整 padding: 将 p-1 替换为 px-1 py-1，提供更精确的内边距
- 添加 flex gap: 在 flex 布局中加入 gap-1，增加选项之间的间隔
- 调整选项样式: 将 py-1 替换为 py-0.5，使选项高度更加合适

src/components/Segments.tsx

@@ -77,10 +77,10 @@ const Segments: Component<SegmentsProps> = (props) => {
   };
 
   return (
-    <div class="inline-block overflow-hidden rounded-sm p-1 select-none bg-neutral">
+    <div class="inline-block overflow-hidden rounded-sm px-1 py-1 select-none bg-neutral">
       <div
         class={cx(
-          'relative flex',
+          'relative flex gap-1',
           mProps.direction === 'horizontal' ? 'flex-row items-center' : 'flex-col',
         )}>
         <Index each={mProps.options}>
@@ -89,7 +89,7 @@ const Segments: Component<SegmentsProps> = (props) => {
               ref={(el) => (optionRefs[index] = el)}
               aria-disabled={mProps.disabled}
               class={cx(
-                'z-[5] cursor-pointer rounded-sm px-2 py-1',
+                'z-[5] cursor-pointer rounded-sm px-2 py-0.5',
                 selected() === option().value
                   ? 'not-aria-disabled:text-on-primary-surface aria-disabled:text-primary-disabled hover:not-aria-disabled:bg-primary-surface-hover/45'
                   : 'not-aria-disabled:text-on-surface aria-disabled:text-surface-disabled  hover:not-aria-disabled:bg-surface/35',