From 851b36abf15ee17c73a539679a3986f1df66c447 Mon Sep 17 00:00:00 2001
From: CNWei <t6g888@163.com>
Date: Sun, 1 Nov 2026 20:44:29 +0800
Subject: [PATCH] =?UTF-8?q?feat(ui):=20Ticker=20=E6=94=AF=E6=8C=81=20gap?=
 =?UTF-8?q?=20=E5=8F=82=E6=95=B0=EF=BC=8C=E6=9D=A1=E7=9B=AE=E4=B8=8D?=
 =?UTF-8?q?=E5=86=8D=E8=A2=AB=20space-evenly=20=E6=8B=89=E5=BC=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 gap（px），走 --ticker-gap；不传时仍是 --su-space-8
- 一份内容改成 flex-start + 尾部同间距 padding，循环处不会突然变宽
- 位移仍按实测的一份宽度，接缝不变
---
 src/components/Ticker.module.css | 10 ++++++----
 src/components/Ticker.tsx        | 14 ++++++++++++--
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/Ticker.module.css b/src/components/Ticker.module.css
index dd01123..61b3a9e 100644
--- a/src/components/Ticker.module.css
+++ b/src/components/Ticker.module.css
@@ -24,13 +24,15 @@
   animation-play-state: paused;
 }
 
-/* 一份内容最少占满整条轨道，内容短的时候也不会挤成一小撮 */
+/* 一份内容：按 --ticker-gap 排布，尾部同样留一个间距，
+   这样「最后一条 → 下一份第一条」的距离和条目之间一致，循环处不会突然变宽 */
 .group {
   display: inline-flex;
+  flex: none;
   align-items: center;
-  justify-content: space-evenly;
-  gap: var(--su-space-8);
-  min-width: 100%;
+  justify-content: flex-start;
+  gap: var(--ticker-gap, var(--su-space-8));
+  padding-right: var(--ticker-gap, var(--su-space-8));
 }
 
 /* 位移量由组件量出「一份」的宽度写进 --ticker-shift；回退值只兜第一帧 */
diff --git a/src/components/Ticker.tsx b/src/components/Ticker.tsx
index 65e1705..9b81aa8 100644
--- a/src/components/Ticker.tsx
+++ b/src/components/Ticker.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, type ReactNode } from 'react'
+import { useEffect, useRef, type CSSProperties, type ReactNode } from 'react'
 import styles from './Ticker.module.css'
 
 /**
@@ -11,6 +11,8 @@ export type TickerProps = {
   children: ReactNode
   /** 滚完一份内容所需的秒数，默认 24（越大越慢） */
   speed?: number
+  /** 内容条目之间的间距（px），默认用 --su-space-8 */
+  gap?: number
   /** 暂停滚动（保留进度） */
   paused?: boolean
   /** 读屏用的整体描述，如「运行状态」 */
@@ -19,7 +21,14 @@ export type TickerProps = {
   className?: string
 }
 
-export function Ticker({ children, speed = 24, paused = false, label, className }: TickerProps) {
+export function Ticker({
+  children,
+  speed = 24,
+  gap,
+  paused = false,
+  label,
+  className,
+}: TickerProps) {
   const trackRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
@@ -51,6 +60,7 @@ export function Ticker({ children, speed = 24, paused = false, label, className
       className={[styles.root, className].filter(Boolean).join(' ')}
       role="marquee"
       aria-label={label}
+      style={gap === undefined ? undefined : ({ '--ticker-gap': `${gap}px` } as CSSProperties)}
     >
       <div
         ref={trackRef}