clxx 2.1.8 → 3.0.1

package/AGENTS.md

@@ -1,2 +1,3 @@
 - 所有回答用中文
-- 任意修改都要检查是否创造了新的bug，如果有bug则修复
+- 任意修改都要检查是否创造了新的bug，如果有bug则修复
+- 一个文件只能有一个React组件

package/README.md

@@ -22,12 +22,24 @@
 - 📱 **响应式布局** — 基于 rem 的自适应方案，自动处理浏览器字体缩放
 - 🎨 **CSS-in-JS** — 使用 Emotion 实现样式隔离和动态样式
 - 🔧 **TypeScript** — 完整的类型定义，提供更好的开发体验
-- 🎪 **函数式调用** — Toast、Dialog、Loading、Alert 等支持命令式调用
+- 🎪 **函数式调用** — Toast、Dialog、Loading、Alert、Picker 等支持命令式调用
 - 🚀 **现代化** — 基于 React 19，使用最新的 Hooks API
 - 📦 **轻量级** — tree-shaking 友好，按需引入
 
 ---
 
+## 🆕 What's New (v3.0)
+
+- **新增 `DatePicker` / `showDatePicker`**：iOS 风格滚轮日期选择器，支持 day / hour / minute / second 多档精度，含 min/max 范围联动夹取。
+- **新增 `RegionPicker` / `showRegionPicker`**：iOS 风格三级（省/市/区）地区选择器，内置中国行政区数据。
+- **`Dialog` 健壮化**：关闭操作幂等（多次调用 close / 并发遮罩点击只触发一次动画）；用户 `onBlankClick` 改为同步触发，事件对象不再失效；动画走 `transform/opacity` GPU 合成；`onAnimationEnd` 严格匹配自身关键帧防止子元素动画冒泡误触。
+- **`CitySelect` 重构**：复用 `Dialog`（`pullLeft`）完成弹出/收起动画，删除组件内自管动画代码。
+- **性能优化**：`Toast` / `Flex` / `FlexItem` / `Fixed` / `SafeArea` / `AutoGrid` 中纯 CSS 属性赋值改走原生 inline `style`，省去 emotion 哈希；模块级常量替代 render 内对象字面量。
+
+> 公共 API 完全兼容，旧版 `showCitySelect` 等签名保持不变。
+
+---
+
 ## 📦 安装
 
 ```bash
@@ -434,20 +446,20 @@ import { CarouselNotice } from 'clxx';
 
 #### CitySelect / showCitySelect — 城市选择器
 
-移动端全屏城市选择器，支持字母侧边栏触摸导航、粘滞字母标题、列表与字母双向联动、搜索（含中文 IME 保护）、滑入/滑出动画、外部定位回显等。
+移动端全屏城市选择器，支持字母侧边栏触摸导航、粘滞字母标题、列表与字母双向联动、搜索（含中文 IME 保护）、外部定位回显等。弹出 / 收起动画由 `showDialog`（`pullLeft`）统一接管，与其它弹出组件行为一致。
 
 ```tsx
 import { CitySelect, showCitySelect } from 'clxx';
 
-// 组件方式
+// 组件方式（作为 showDialog 的内容渲染；弹出动画由 Dialog 提供）
 <CitySelect
   primary="#2f7dff"
   getLocation={async () => '北京'}
   onSelect={(city) => console.log(city)}
-  onClose={() => console.log('closed')}
+  onClose={() => console.log('请关闭')}
 />
 
-// 函数式方式（内部使用 Portal 挂载到 body，选中或点击退出后自动卸载）
+// 函数式方式（推荐）：内部用 showDialog 挂到 body，选中或退出时自动卸载
 showCitySelect({
   primary: '#2f7dff',
   // 同步返回
@@ -465,7 +477,7 @@ showCitySelect({
 | 属性 | 类型 | 默认值 | 说明 |
 |------|------|--------|------|
 | `onSelect` | `(city: SelectedCity) => void` | — | 选中城市时触发 |
-| `onClose` | `() => void` | — | 退出动画结束时触发 |
+| `onClose` | `() => void` | — | 请求关闭（由外部 `showCitySelect` 处理动画与卸载） |
 | `onLetterChange` | `(letter: string) => void` | — | 侧边栏当前字母变化回调 |
 | `getLocation` | `() => string \| null \| undefined \| Promise<string \| null \| undefined>` | — | 外部定位能力，可同步或异步，返回城市名或城市 code |
 | `primary` | `string` | `'#2f7dff'` | 主题主色，形如 `#rrggbb`；active 态颜色自动派生 |
@@ -488,11 +500,134 @@ interface SelectedCity {
 - **字母侧边栏触摸导航**：非 passive 触摸监听，滑动时实时切换字母并滚动列表；松开显示大字母提示。
 - **双向联动**：手动滚动列表时基于缓存的 `offsetTop` 二分查找激活对应字母；并通过 `ResizeObserver` 重新测量。
 - **搜索**：按拼音全拼、拼音首字母、中文名前缀匹配；中文输入法合成期间不触发搜索，避免中间态干扰。
-- **滑入滑出动画**：首次挂载右侧滑入；选中或点击退出时滑出，动画结束后才触发 `onClose`（首帧立即退出时直接回调，避免卡住）。
+- **弹出 / 收起动画**：由 `showDialog` 统一接管（`type: 'pullLeft'`，`showMask: false`，全宽覆盖）；不再在组件内自管动画。
 - **纯属性化主题**：无 `containerStyle`，只允许通过 `primary` 控制主题色。
 
 ---
 
+#### DatePicker / showDatePicker — 日期 / 时间选择器
+
+iOS 风格滚轮式日期选择器，支持年 / 月 / 日 / 时 / 分 / 秒 多档精度，自动夹取到 `[minDate, maxDate]` 范围内。弹出动画由 `showDialog`（`pullUp`）接管。
+
+```tsx
+import { DatePicker, showDatePicker } from 'clxx';
+
+// 函数式方式（推荐）
+showDatePicker({
+  title: '选择日期',
+  value: '2026-01-01',
+  precision: 'minute',         // 'day' | 'hour' | 'minute' | 'second'
+  minDate: '2024-01-01',
+  maxDate: '2030-12-31',
+  primary: '#2f7dff',
+  onConfirm: (d) => {
+    console.log(d.format('YYYY-MM-DD HH:mm'));   // dayjs 实例
+  },
+  onCancel: () => {},
+});
+
+// 组件方式：作为 Dialog 内容嵌入自定义弹出场景
+<DatePicker
+  precision="day"
+  showUnit
+  units={{ year: '年', month: '月', day: '日' }}
+  onConfirm={(d) => {}}
+  onClose={() => {}}
+/>
+```
+
+**Props：**
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `value` | `Date \| string \| number \| Dayjs` | `dayjs()` | 初始值；超出 min/max 自动夹取 |
+| `precision` | `'day' \| 'hour' \| 'minute' \| 'second'` | `'day'` | 精度档位 |
+| `title` | `ReactNode` | `'请选择'` | 头部标题 |
+| `cancelText` | `ReactNode` | `'取消'` | 取消按钮文案 |
+| `confirmText` | `ReactNode` | `'确定'` | 确认按钮文案 |
+| `maskClosable` | `boolean` | `true` | 点击遮罩是否可关闭（仅 `showDatePicker` 路径生效） |
+| `primary` | `string` | `'#2f7dff'` | 主题主色 |
+| `rounded` | `boolean` | `true` | 顶部圆角与中间选中条圆角 |
+| `showUnit` | `boolean` | `true` | 是否在数字后显示单位（年/月/日 等） |
+| `units` | `DatePickerUnits` | `{ year: '年', ... }` | 单位文案，可部分覆盖 |
+| `minDate` | `DateInput` | `'1900-01-01'` | 最小可选日期 |
+| `maxDate` | `DateInput` | `'2100-12-31 23:59:59'` | 最大可选日期 |
+| `onConfirm` | `(date: Dayjs) => void` | — | 确认回调，参数为 dayjs 对象 |
+| `onCancel` | `() => void` | — | 取消回调 |
+| `onClose` | `() => void` | — | 请求关闭（由外部处理动画与卸载） |
+
+**特性：**
+- **联动夹取**：上级列变化时下级自动重算范围（如年→月→日→时→分→秒），当前值越界自动夹到最近边界。
+- **月份溢出兜底**：使用 ISO 字符串构造日期，避免 `dayjs().set()` 链式赋值时的月末日溢出问题。
+- **滚轮列复用**：拆出 `Column` 子组件，items / value 变化时按需重渲染。
+
+---
+
+#### RegionPicker / showRegionPicker — 三级地区选择器
+
+iOS 风格的省 / 市 / 区三级联动选择器，内置中国行政区划数据。弹出动画由 `showDialog`（`pullUp`）接管。
+
+```tsx
+import { RegionPicker, showRegionPicker } from 'clxx';
+
+// 函数式方式（推荐）
+showRegionPicker({
+  title: '请选择地区',
+  value: ['110000', '110100', '110101'],   // 省/市/区 value
+  primary: '#2f7dff',
+  onConfirm: ({ province, city, district }) => {
+    console.log(province.label, city.label, district.label);
+    console.log(province.value, city.value, district.value);
+  },
+});
+
+// 组件方式
+<RegionPicker
+  data={customRegionData}   // 自定义数据源
+  labels={{ province: '省', city: '市', district: '区' }}
+  onConfirm={(selection) => {}}
+  onClose={() => {}}
+/>
+```
+
+**Props：**
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `value` | `[string?, string?, string?]` | — | 初始三级 value |
+| `data` | `TreeRegionItem[]` | 内置中国行政区 | 数据源 |
+| `title` | `ReactNode` | `'请选择地区'` | 头部标题 |
+| `cancelText` | `ReactNode` | `'取消'` | 取消按钮文案 |
+| `confirmText` | `ReactNode` | `'确定'` | 确认按钮文案 |
+| `labels` | `RegionLabels` | `{ province: '省', city: '市', district: '区' }` | tabs 未选占位文案 |
+| `maskClosable` | `boolean` | `true` | 点击遮罩是否可关闭（仅 `showRegionPicker` 路径生效） |
+| `primary` | `string` | `'#2f7dff'` | 主题主色 |
+| `rounded` | `boolean` | `true` | 顶部圆角 |
+| `onConfirm` | `(selection: RegionSelection) => void` | — | 确认回调，仅在三级齐全时可点击 |
+| `onCancel` | `() => void` | — | 取消回调 |
+| `onClose` | `() => void` | — | 请求关闭（由外部处理动画与卸载） |
+
+**RegionSelection：**
+
+```typescript
+interface RegionNode {
+  value: string;   // 行政区 code
+  label: string;   // 行政区名称
+}
+interface RegionSelection {
+  province: RegionNode;
+  city: RegionNode;
+  district: RegionNode;
+}
+```
+
+**特性：**
+- **tabs 联动**：选中后自动跳到下一级；切换上级会清空所有下级。
+- **滚动定位**：切 tab 时把当前选中项对齐到列表顶部（用 `getBoundingClientRect` 差分计算偏移，不依赖 offsetParent）。
+- **三级未齐时**：确认按钮置灰禁用，避免半选确认。
+
+---
+
 ### 🔔 反馈组件
 
 #### showToast / showUniqToast — 轻提示
@@ -1097,20 +1232,6 @@ unmount();                // 卸载并移除 DOM
 
 ---
 
-#### setContextValue / getContextValue — 全局上下文
-
-简单的全局键值存储，用于跨组件共享数据。
-
-```typescript
-import { setContextValue, getContextValue } from 'clxx';
-
-setContextValue({ token: 'xxx', userId: 123 });
-getContextValue('token');  // 'xxx'
-getContextValue();         // { token: 'xxx', userId: 123 }
-```
-
----
-
 ## 📋 完整导出列表
 
 ### 组件
@@ -1122,11 +1243,14 @@ getContextValue();         // { token: 'xxx', userId: 123 }
 | `Col` / `ColStart` ~ `ColEvenly` | 组件 | 垂直布局快捷组件 |
 | `AutoGrid` | 组件 | 自动网格 |
 | `SafeArea` | 组件 | 安全区域 |
+| `Fixed` | 组件 | 固定定位 |
 | `Clickable` | 组件 | 点击态 |
 | `Overlay` | 组件 | 覆盖层 |
 | `ScrollView` | 组件 | 滚动视图 |
 | `CarouselNotice` | 组件 | 轮播公告 |
 | `CitySelect` | 组件 | 城市选择器 |
+| `DatePicker` | 组件 | 日期 / 时间选择器 |
+| `RegionPicker` | 组件 | 三级地区选择器 |
 | `Indicator` | 组件 | 加载指示器 |
 | `Countdowner` | 组件 | 倒计时 |
 | `Ago` | 组件 | 相对时间 |
@@ -1139,6 +1263,8 @@ getContextValue();         // { token: 'xxx', userId: 123 }
 | `showAlert` | 弹窗提示 |
 | `showLoading` / `showLoadingAtLeast` | 加载指示 |
 | `showCitySelect` | 城市选择器 |
+| `showDatePicker` | 日期 / 时间选择器 |
+| `showRegionPicker` | 三级地区选择器 |
 
 ### Hooks
 | 导出 | 说明 |
@@ -1166,7 +1292,6 @@ getContextValue();         // { token: 'xxx', userId: 123 }
 | `defaultScroll` | 滚动控制 |
 | `uniqKey` | 唯一键 |
 | `createPortalDOM` | Portal 容器 |
-| `setContextValue` / `getContextValue` | 全局上下文 |
 
 ---
 

package/build/Alert/Wrapper.js

@@ -5,16 +5,17 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const Clickable_1 = require("../Clickable");
 const Row_1 = require("../Flex/Row");
 const style_1 = require("./style");
+// 按下态底色：模块级常量，Dialog 可能多次重提交（onConfirm 后重新 render）时避免重复分配
+const activeBg = { backgroundColor: 'rgba(0,0,0,.04)' };
 function AlertWrapper(props) {
-    const { title = '提示', description, confirm = '确定', confirmColor = '#007aff', cancel = '取消', cancelColor = '#6b7280', showCancel = false, onConfirm, onCancel, 
+    const { title = '提示', description, confirm = '确定', confirmColor = '#007aff', cancel = '取消', cancelColor = '#3c3c43', showCancel = false, onConfirm, onCancel, 
     // 可定制的样式
     titleStyle, descStyle, btnStyle, cancelStyle, confirmStyle, } = props;
     // 展示按钮组
     const btnBoxCss = [
         style_1.style.btnBox,
-        showCancel ? style_1.style.btnBoxWithCancel : {}
+        showCancel ? style_1.style.btnBoxWithCancel : null,
     ];
-    const activeBg = { backgroundColor: 'rgba(0,0,0,.04)' };
     return ((0, jsx_runtime_1.jsxs)("div", { css: style_1.style.container, children: [(0, jsx_runtime_1.jsxs)("div", { css: style_1.style.content, children: [(0, jsx_runtime_1.jsx)("div", { css: [style_1.style.title, titleStyle], children: title }), description && (0, jsx_runtime_1.jsx)("div", { css: [style_1.style.desc, descStyle], children: description })] }), (0, jsx_runtime_1.jsxs)(Row_1.Row, { alignItems: "stretch", css: btnBoxCss, children: [showCancel && ((0, jsx_runtime_1.jsx)(Clickable_1.Clickable, { css: [style_1.style.btn, btnStyle, cancelStyle, { color: cancelColor }], onClick: onCancel, activeStyle: activeBg, children: cancel })), (0, jsx_runtime_1.jsx)(Clickable_1.Clickable, { css: [
                             style_1.style.btn,
                             style_1.style.btnConfirm,

package/build/Alert/style.js

@@ -1,9 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.style = void 0;
+const theme_1 = require("../utils/theme");
 // 1px 硬边框（高清屏 hairline）
 const hairline = 1 / (typeof window !== "undefined" ? window.devicePixelRatio : 1);
-const fontStack = '-apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif';
+// iOS 风色板
+const textPrimary = "#000000";
+const textSecondary = "#3c3c43";
+const separator = "rgba(60,60,67,.29)"; // iOS opaqueSeparator
 exports.style = {
     container: {
         position: "relative",
@@ -11,8 +15,8 @@ exports.style = {
         backgroundColor: "#ffffff",
         borderRadius: ".28rem",
         width: (750 * 0.78) / 100 + "rem",
-        fontFamily: fontStack,
-        color: "#1f2328",
+        fontFamily: theme_1.fontStack,
+        color: textPrimary,
         WebkitFontSmoothing: "antialiased",
         MozOsxFontSmoothing: "grayscale",
         boxShadow: "0 .2rem .6rem rgba(0,0,0,.18)",
@@ -30,7 +34,7 @@ exports.style = {
             left: 0,
             right: 0,
             height: "1px",
-            backgroundColor: "#e5e7eb",
+            backgroundColor: separator,
             transform: `scale(1, ${hairline})`,
             transformOrigin: "0 100%",
         },
@@ -38,7 +42,7 @@ exports.style = {
     title: {
         textAlign: "center",
         lineHeight: 1.45,
-        color: "#1f2328",
+        color: textPrimary,
         fontSize: ".34rem",
         fontWeight: 600,
         letterSpacing: ".01rem",
@@ -46,7 +50,7 @@ exports.style = {
     desc: {
         textAlign: "center",
         lineHeight: 1.55,
-        color: "#6b7280",
+        color: textSecondary,
         fontSize: ".28rem",
         marginTop: ".18rem",
         wordBreak: "break-word",
@@ -64,7 +68,7 @@ exports.style = {
             left: "50%",
             marginLeft: "-.5px",
             width: "1px",
-            backgroundColor: "#e5e7eb",
+            backgroundColor: separator,
             transform: `scale(${hairline}, 1)`,
             transformOrigin: "0 0",
         },

package/build/AutoGrid/index.js

@@ -80,19 +80,25 @@ function AutoGrid(props) {
     }, [children, cols]);
     // 缓存 item 宽度计算
     const itemWidth = (0, react_1.useMemo)(() => `calc((100% - ${cols - 1} * ${gap}) / ${cols})`, [cols, gap]);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, extra, { css: containerStyle, children: gridData.map((row, rowIndex) => ((0, jsx_runtime_1.jsx)("div", { css: [
-                style_1.style.row,
-                { gap },
-                rowIndex !== gridData.length - 1 ? { marginBottom: gap } : undefined,
-            ], children: row.map((item, colIndex) => {
-                const isPlaceholder = item === null;
-                const boxCss = [
-                    style_1.style.itemBox,
-                    { width: itemWidth },
-                    isPlaceholder ? { visibility: 'hidden' } : undefined,
-                    isSquare ? style_1.style.itemBoxSquare : undefined,
-                    itemStyle,
-                ];
-                return isSquare ? ((0, jsx_runtime_1.jsx)("div", { css: boxCss, children: (0, jsx_runtime_1.jsx)("div", { css: style_1.style.itemInner, children: item }) }, colIndex)) : ((0, jsx_runtime_1.jsx)("div", { css: boxCss, children: item }, colIndex));
-            }) }, rowIndex))) })));
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, extra, { css: containerStyle, children: gridData.map((row, rowIndex) => {
+            // 行级布局属性走 inline style：纯属性赋值，无伪类/嵌套，避免 emotion 序列化
+            const rowInlineStyle = {
+                gap,
+                marginBottom: rowIndex !== gridData.length - 1 ? gap : undefined,
+            };
+            return ((0, jsx_runtime_1.jsx)("div", { css: style_1.style.row, style: rowInlineStyle, children: row.map((item, colIndex) => {
+                    const isPlaceholder = item === null;
+                    // cell 宽度 / 占位可见性走 inline style
+                    const cellInlineStyle = {
+                        width: itemWidth,
+                        visibility: isPlaceholder ? "hidden" : undefined,
+                    };
+                    const cellCss = [
+                        style_1.style.itemBox,
+                        isSquare ? style_1.style.itemBoxSquare : null,
+                        itemStyle,
+                    ];
+                    return isSquare ? ((0, jsx_runtime_1.jsx)("div", { css: cellCss, style: cellInlineStyle, children: (0, jsx_runtime_1.jsx)("div", { css: style_1.style.itemInner, children: item }) }, colIndex)) : ((0, jsx_runtime_1.jsx)("div", { css: cellCss, style: cellInlineStyle, children: item }, colIndex));
+                }) }, rowIndex));
+        }) })));
 }

package/build/CarouselNotice/index.d.ts

@@ -1,18 +1,26 @@
-import { Interpolation, Theme } from '@emotion/react';
-import * as CSS from 'csstype';
-export interface CarouselNoticeOption extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-    list: Array<React.ReactNode>;
-    width: CSS.Property.Width;
-    height: CSS.Property.Height;
-    justify: 'start' | 'center' | 'end';
-    duration: number;
-    interval: number;
+import { HTMLAttributes, ReactNode } from "react";
+import { Interpolation, Theme } from "@emotion/react";
+import * as CSS from "csstype";
+export interface CarouselNoticeProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    list: Array<ReactNode>;
+    width?: CSS.Property.Width;
+    height?: CSS.Property.Height;
+    justify?: "start" | "center" | "end";
+    duration?: number;
+    interval?: number;
     containerStyle?: Interpolation<Theme>;
     wrapperStyle?: Interpolation<Theme>;
     itemStyle?: Interpolation<Theme>;
 }
+export type CarouselNoticeOption = CarouselNoticeProps;
 /**
  * 滚动循环轮播公告
- * @param props
+ *
+ * 实现要点：
+ *  - 渲染当前条 + 下一条共两项，wrapper 高 200%
+ *  - 用 keyframes 把 wrapper 从 0 推到 -50%，配合 fill-mode: forwards
+ *    保证动画结束后定格在 -50%，与 React 提交解耦，杜绝"回弹闪烁"
+ *  - animationend 触发后同步切换 current（新 current 的第一项 = 旧 current 的第二项）
+ *    且 wrapper 因 key 变化重挂载，回到 0 即开始下一轮
  */
-export declare function CarouselNotice(props: Partial<CarouselNoticeOption>): false | import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function CarouselNotice(props: CarouselNoticeProps): import("@emotion/react/jsx-runtime").JSX.Element | null;

package/build/CarouselNotice/index.js

@@ -13,87 +13,93 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CarouselNotice = CarouselNotice;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("@emotion/react");
-const react_2 = require("react");
+const react_1 = require("react");
+const react_2 = require("@emotion/react");
 const useInterval_1 = require("../Effect/useInterval");
 const style_1 = require("./style");
+const justifyMap = {
+    start: style_1.style.justifyStart,
+    center: style_1.style.justifyCenter,
+    end: style_1.style.justifyEnd,
+};
 /**
  * 滚动循环轮播公告
- * @param props
+ *
+ * 实现要点：
+ *  - 渲染当前条 + 下一条共两项，wrapper 高 200%
+ *  - 用 keyframes 把 wrapper 从 0 推到 -50%，配合 fill-mode: forwards
+ *    保证动画结束后定格在 -50%，与 React 提交解耦，杜绝"回弹闪烁"
+ *  - animationend 触发后同步切换 current（新 current 的第一项 = 旧 current 的第二项）
+ *    且 wrapper 因 key 变化重挂载，回到 0 即开始下一轮
  */
 function CarouselNotice(props) {
-    const { width, height, justify = 'center', interval = 3000, duration = 200, list = [], containerStyle, wrapperStyle, itemStyle } = props, attrs = __rest(props, ["width", "height", "justify", "interval", "duration", "list", "containerStyle", "wrapperStyle", "itemStyle"]);
-    const [current, setCurrent] = (0, react_2.useState)(0);
-    const [animation, setAnimation] = (0, react_2.useState)(false);
-    /**
-     * 一旦列表发生更新时，触发的逻辑
-     */
-    (0, react_2.useEffect)(() => {
+    var _a;
+    const { width, height, justify = "center", interval = 3000, duration = 400, list, containerStyle, wrapperStyle, itemStyle } = props, attrs = __rest(props, ["width", "height", "justify", "interval", "duration", "list", "containerStyle", "wrapperStyle", "itemStyle"]);
+    const safeList = Array.isArray(list) ? list : [];
+    const len = safeList.length;
+    const [current, setCurrent] = (0, react_1.useState)(0);
+    const [animating, setAnimating] = (0, react_1.useState)(false);
+    // list 变化：归零 + 取消动画态；用引用比较保险
+    const lastListRef = (0, react_1.useRef)(safeList);
+    if (lastListRef.current !== safeList) {
+        lastListRef.current = safeList;
+    }
+    (0, react_1.useEffect)(() => {
         setCurrent(0);
-        setAnimation(false);
-    }, [list]);
-    /**
-     * 每隔多少秒更新一次动画
-     */
-    (0, useInterval_1.useInterval)(() => {
-        setAnimation(true);
-    }, list.length > 1 ? interval : null);
-    /**
-     * 当前显示的两条数据，只用两条数据来轮播
-     */
-    const showContent = () => {
-        const justifyStyle = {};
-        if (justify === 'center') {
-            justifyStyle.justifyContent = 'center';
-        }
-        else if (justify === 'start') {
-            justifyStyle.justifyContent = 'flex-start';
-        }
-        else if (justify === 'end') {
-            justifyStyle.justifyContent = 'flex-end';
-        }
-        else {
-            justifyStyle.justifyContent = 'center';
+        setAnimating(false);
+    }, [safeList]);
+    // current 越界保护（list 缩短时）
+    (0, react_1.useEffect)(() => {
+        if (len > 0 && current >= len) {
+            setCurrent(0);
+            setAnimating(false);
         }
-        const itemCss = [style_1.style.item, justifyStyle];
-        if (list.length === 1) {
-            return ((0, jsx_runtime_1.jsx)("div", { css: [itemCss, itemStyle], children: list[0] }, 0));
-        }
-        const showList = [];
-        if (current === list.length - 1) {
-            showList.push((0, jsx_runtime_1.jsx)("div", { css: [itemCss, itemStyle], children: list[list.length - 1] }, current));
-            showList.push((0, jsx_runtime_1.jsx)("div", { css: [itemCss, itemStyle], children: list[0] }, 0));
-        }
-        else {
-            showList.push((0, jsx_runtime_1.jsx)("div", { css: [itemCss, itemStyle], children: list[current] }, current));
-            showList.push((0, jsx_runtime_1.jsx)("div", { css: [itemCss, itemStyle], children: list[current + 1] }, current + 1));
-        }
-        return showList;
-    };
-    /**
-     * 获取动画
-     */
-    const getAnimation = () => {
-        if (!animation || list.length <= 1) {
-            return null;
-        }
-        return (0, react_1.css)({
-            animationName: style_1.Bubble,
-            animationTimingFunction: 'linear',
-            animationDuration: `${duration}ms`,
-        });
-    };
-    /**
-     * 一轮动画结束时触发下一轮
-     */
-    const animationEnd = () => {
-        let newIndex = current + 1;
-        if (current >= list.length - 1) {
-            newIndex = 0;
+    }, [len, current]);
+    // 定时触发动画；只有列表 >1 条且未在动画中才启动 interval
+    (0, useInterval_1.useInterval)(() => {
+        // 若上一轮动画还没结束（极端时序），跳过本次
+        if (!animating)
+            setAnimating(true);
+    }, len > 1 ? interval : null);
+    // 容器尺寸样式（仅在 width/height 变化时重建）
+    const sizeStyle = (0, react_1.useMemo)(() => ({ width, height }), [width, height]);
+    // 对齐样式（静态映射，无新对象产生）
+    const justifyStyle = (_a = justifyMap[justify]) !== null && _a !== void 0 ? _a : style_1.style.justifyCenter;
+    // 动画 css（仅依赖 duration，缓存复用）
+    const animationCss = (0, react_1.useMemo)(() => (0, react_2.css)({
+        animationName: `${style_1.Bubble}`,
+        animationTimingFunction: "ease-in-out",
+        animationDuration: `${duration}ms`,
+        animationFillMode: "forwards",
+    }), [duration]);
+    // 动画结束：切到下一条 + 重置动画态
+    const handleAnimationEnd = (0, react_1.useCallback)((e) => {
+        // 防止子元素动画事件冒泡误触
+        if (e.currentTarget !== e.target)
+            return;
+        setCurrent((prev) => (prev + 1) % len);
+        setAnimating(false);
+    }, [len]);
+    // 当前显示的两条
+    const items = (0, react_1.useMemo)(() => {
+        if (len === 0)
+            return [];
+        if (len === 1) {
+            return [
+                (0, jsx_runtime_1.jsx)("div", { css: [style_1.style.item, justifyStyle, itemStyle], children: safeList[0] }, "only"),
+            ];
         }
-        setCurrent(newIndex);
-        setAnimation(false);
-    };
-    return (Array.isArray(list) &&
-        list.length > 0 && ((0, jsx_runtime_1.jsx)("div", Object.assign({}, attrs, { css: [style_1.style.box, { width, height }, containerStyle], children: (0, jsx_runtime_1.jsx)("div", { onAnimationEnd: animationEnd, css: [style_1.style.wrapper, getAnimation(), wrapperStyle], children: showContent() }) }))));
+        const nextIndex = (current + 1) % len;
+        return [
+            (0, jsx_runtime_1.jsx)("div", { css: [style_1.style.item, justifyStyle, itemStyle], children: safeList[current] }, `a-${current}`),
+            (0, jsx_runtime_1.jsx)("div", { css: [style_1.style.item, justifyStyle, itemStyle], children: safeList[nextIndex] }, `b-${nextIndex}`),
+        ];
+    }, [safeList, current, len, justifyStyle, itemStyle]);
+    if (len === 0)
+        return null;
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, attrs, { css: [style_1.style.box, sizeStyle, containerStyle], children: (0, jsx_runtime_1.jsx)("div", { onAnimationEnd: handleAnimationEnd, css: [
+                style_1.style.wrapper,
+                animating && len > 1 ? animationCss : null,
+                wrapperStyle,
+            ], children: items }, animating ? `anim-${current}` : `idle-${current}`) })));
 }

package/build/CarouselNotice/style.js

@@ -2,20 +2,21 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.style = exports.Bubble = void 0;
 const react_1 = require("@emotion/react");
+// translate 走百分比；fill-mode: forwards 保证动画结束后定格在 -50%，
+// 与 React 的 setState 提交顺序解耦，杜绝"动画结束帧"回弹到 0 造成的闪烁
 exports.Bubble = (0, react_1.keyframes) `
   from {
-    transform: translateY(0);
+    transform: translate3d(0, 0, 0);
   }
   to {
-    transform: translateY(-50%);
+    transform: translate3d(0, -50%, 0);
   }
 `;
 exports.style = {
     box: {
         position: "relative",
         overflow: "hidden",
-        transition: "all 200ms",
-        height: '.8rem',
+        height: ".8rem",
     },
     wrapper: {
         position: "absolute",
@@ -23,6 +24,10 @@ exports.style = {
         top: 0,
         width: "100%",
         height: "200%",
+        // 提示分层，避免动画期间反复合成层切换
+        willChange: "transform",
+        // 默认静止态，由 animation 驱动
+        transform: "translate3d(0, 0, 0)",
     },
     item: {
         width: "100%",
@@ -30,5 +35,10 @@ exports.style = {
         display: "flex",
         alignItems: "center",
         fontSize: "initial",
+        // 避免子元素文本溢出影响 box 高度计算
+        overflow: "hidden",
     },
+    justifyStart: { justifyContent: "flex-start" },
+    justifyCenter: { justifyContent: "center" },
+    justifyEnd: { justifyContent: "flex-end" },
 };