one-design-next 0.0.72 → 0.0.74

package/dist/clarify-dock/auto-height.d.ts

@@ -7,9 +7,11 @@ export interface AutoHeightProps extends React.HTMLAttributes<HTMLDivElement> {
     anchor?: 'top' | 'bottom';
     /**
      * 内容身份键（如翻页 page）。
-     * 变化时走旧题渐隐 → 新题渐现；有高度差时同步高度。
+     * 变化时按等高 / 不等高走不同过渡。
      */
     contentKey?: React.Key;
+    /** 翻页过渡结束（或首次就绪）后回调；用于延后选项 autofocus。 */
+    onSettle?: () => void;
 }
 /**
  * 只动画「题面内容」的高度与透明度；卡面描边应由外层稳定承载，勿把整卡塞进来做 opacity。
@@ -18,4 +20,4 @@ export interface AutoHeightProps extends React.HTMLAttributes<HTMLDivElement> {
  * `readyRef` 钉死或把 outer 压成 0，重开后不再测量就会「只剩底栏」。
  * 因此：未就绪时忽略 0 高；已就绪时忽略「从正高塌到 0」；重现正高时再同步。
  */
-export declare function AutoHeight({ children, anchor, contentKey, style, ...props }: AutoHeightProps): React.JSX.Element;
+export declare function AutoHeight({ children, anchor, contentKey, onSettle, style, ...props }: AutoHeightProps): React.JSX.Element;

package/dist/clarify-dock/auto-height.js

@@ -3,20 +3,27 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "anchor", "contentKey", "style"];
+var _excluded = ["children", "anchor", "contentKey", "onSettle", "style"];
 import React, { useLayoutEffect, useRef, useState } from 'react';
 
 /**
- * 翻页（contentKey 变化）：
- *   旧题渐隐 → 新题渐现（不交叉，避免半透明叠字）
- *   有高度差时，高度与整段同起同止；等高则只做显隐。
+ * 翻页（contentKey 变化）分两套：
+ *
+ * 等高：同位短交叉淡（无空窗、不动高度、无遮罩底板）
+ * 不等高：高度同步 + 内容交叉淡；旧层用不透明底板防错位叠字
  */
-var FADE_OUT_MS = 140;
-var FADE_IN_MS = 180;
-var HEIGHT_MS = FADE_OUT_MS + FADE_IN_MS;
-var FADE_IN_DELAY_MS = FADE_OUT_MS;
-var TOTAL_MS = HEIGHT_MS;
+
+/** 等高 · 交叉淡（旧/新同起同止，无空窗） */
+var EQUAL_FADE_MS = 200;
+var EQUAL_TOTAL_MS = EQUAL_FADE_MS;
+
+/** 不等高 · 高度主导；内容交叉淡同样 0 延迟 */
+var UNEQUAL_HEIGHT_MS = 320;
+var UNEQUAL_FADE_MS = 200;
+var UNEQUAL_TOTAL_MS = UNEQUAL_HEIGHT_MS;
 var HEIGHT_EPS = 0.5;
+/** 几乎看不出的高度差并入等高，避免无意义高度动画 */
+var EQUAL_HEIGHT_SLACK = 2;
 var EASING = 'ease-in-out';
 /**
  * 只动画「题面内容」的高度与透明度；卡面描边应由外层稳定承载，勿把整卡塞进来做 opacity。
@@ -30,6 +37,7 @@ export function AutoHeight(_ref) {
     _ref$anchor = _ref.anchor,
     anchor = _ref$anchor === void 0 ? 'top' : _ref$anchor,
     contentKey = _ref.contentKey,
+    onSettle = _ref.onSettle,
     style = _ref.style,
     props = _objectWithoutProperties(_ref, _excluded);
   var outerRef = useRef(null);
@@ -40,6 +48,8 @@ export function AutoHeight(_ref) {
   var heightRef = useRef(0);
   var prevKeyRef = useRef(contentKey);
   var prevChildrenRef = useRef(children);
+  var onSettleRef = useRef(onSettle);
+  onSettleRef.current = onSettle;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     outgoing = _useState2[0],
@@ -59,7 +69,7 @@ export function AutoHeight(_ref) {
     outer.style.transition = '';
     outer.style.height = "".concat(start, "px");
     void outer.offsetHeight;
-    outer.style.transition = "height ".concat(HEIGHT_MS, "ms ").concat(EASING);
+    outer.style.transition = "height ".concat(UNEQUAL_HEIGHT_MS, "ms ").concat(EASING);
     outer.style.height = "".concat(target, "px");
   };
 
@@ -67,6 +77,10 @@ export function AutoHeight(_ref) {
   var isCollapsedMeasure = function isCollapsedMeasure(h) {
     return h < HEIGHT_EPS;
   };
+  var prefersReducedMotion = function prefersReducedMotion() {
+    var _window$matchMedia, _window;
+    return typeof window !== 'undefined' && ((_window$matchMedia = (_window = window).matchMedia) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.call(_window, '(prefers-reduced-motion: reduce)').matches);
+  };
   useLayoutEffect(function () {
     var outer = outerRef.current;
     var current = currentRef.current;
@@ -86,9 +100,11 @@ export function AutoHeight(_ref) {
       var h = measure();
       /* 抽屉刚挂载时常量到 0：先不 ready，等 ResizeObserver 拿到正高 */
       if (!isCollapsedMeasure(h)) {
+        var _onSettleRef$current;
         outer.style.height = "".concat(h, "px");
         heightRef.current = h;
         readyRef.current = true;
+        (_onSettleRef$current = onSettleRef.current) === null || _onSettleRef$current === void 0 || _onSettleRef$current.call(onSettleRef);
       }
       prevKeyRef.current = contentKey;
       prevChildrenRef.current = children;
@@ -101,7 +117,6 @@ export function AutoHeight(_ref) {
       var oldChildren = prevChildrenRef.current;
       prevKeyRef.current = contentKey;
       prevChildrenRef.current = children;
-      /* 等高 / 不等高都走渐隐渐现；高度差在 outgoing 阶段再处理 */
       setOutgoing(oldChildren);
       return function () {
         return outer.removeEventListener('transitionend', onTransitionEnd);
@@ -128,8 +143,7 @@ export function AutoHeight(_ref) {
   }, [children, contentKey, outgoing]);
 
   /**
-   * 旧题先隐尽，再显新题——中间不交叉半透明，避免叠字鬼影。
-   * 有高度差时高度整段同步；等高只做显隐。旧层用不透明底盖住下层。
+   * 按等高 / 不等高分流过渡；均避免「隐尽 → 空窗 → 再显」。
    */
   useLayoutEffect(function () {
     if (outgoing === null || outgoing === undefined) return;
@@ -139,7 +153,24 @@ export function AutoHeight(_ref) {
     if (!outer || !current) return;
     var start = heightRef.current;
     var target = current.getBoundingClientRect().height;
-    var heightChanged = Math.abs(start - target) >= HEIGHT_EPS;
+    var heightChanged = Math.abs(start - target) >= EQUAL_HEIGHT_SLACK;
+    var reduced = prefersReducedMotion();
+    if (reduced || isCollapsedMeasure(target)) {
+      var _onSettleRef$current2;
+      finishHeight(outer, isCollapsedMeasure(target) ? start : target);
+      current.style.transition = '';
+      current.style.opacity = '1';
+      if (outEl) {
+        outEl.style.transition = '';
+        outEl.style.opacity = '';
+        outEl.style.visibility = '';
+        outEl.style.background = '';
+      }
+      setOutgoing(null);
+      animatingRef.current = false;
+      (_onSettleRef$current2 = onSettleRef.current) === null || _onSettleRef$current2 === void 0 || _onSettleRef$current2.call(onSettleRef);
+      return;
+    }
     animatingRef.current = true;
     outer.style.transition = '';
     outer.style.height = "".concat(start, "px");
@@ -148,38 +179,63 @@ export function AutoHeight(_ref) {
     if (outEl) {
       outEl.style.transition = 'none';
       outEl.style.opacity = '1';
+      outEl.style.visibility = '';
+      /* 仅不等高盖底板；等高交叉淡保持透明 */
+      outEl.style.background = heightChanged ? 'var(--odn-color-bg-elevated)' : 'transparent';
     }
     void outer.offsetHeight;
-    if (heightChanged && !isCollapsedMeasure(target)) {
-      outer.style.transition = "height ".concat(HEIGHT_MS, "ms ").concat(EASING);
-      outer.style.height = "".concat(target, "px");
-    }
-    if (outEl) {
-      outEl.style.transition = "opacity ".concat(FADE_OUT_MS, "ms ").concat(EASING);
-      outEl.style.opacity = '0';
-    }
-    var fadeInTimer = window.setTimeout(function () {
+    var doneTimer = 0;
+    if (!heightChanged) {
+      /* —— 等高：同位交叉淡，无遮罩、不动高度 —— */
       if (outEl) {
-        outEl.style.visibility = 'hidden';
+        outEl.style.transition = "opacity ".concat(EQUAL_FADE_MS, "ms ").concat(EASING);
+        outEl.style.opacity = '0';
       }
-      current.style.transition = "opacity ".concat(FADE_IN_MS, "ms ").concat(EASING);
-      current.style.opacity = '1';
-    }, FADE_IN_DELAY_MS);
-    var doneTimer = window.setTimeout(function () {
-      setOutgoing(null);
-      animatingRef.current = false;
-      var h = current.getBoundingClientRect().height;
-      if (!isCollapsedMeasure(h)) finishHeight(outer, h);
-      current.style.transition = '';
+      current.style.transition = "opacity ".concat(EQUAL_FADE_MS, "ms ").concat(EASING);
       current.style.opacity = '1';
+      doneTimer = window.setTimeout(function () {
+        var _onSettleRef$current3;
+        setOutgoing(null);
+        animatingRef.current = false;
+        finishHeight(outer, target);
+        current.style.transition = '';
+        current.style.opacity = '1';
+        if (outEl) {
+          outEl.style.transition = '';
+          outEl.style.opacity = '';
+          outEl.style.visibility = '';
+          outEl.style.background = '';
+        }
+        (_onSettleRef$current3 = onSettleRef.current) === null || _onSettleRef$current3 === void 0 || _onSettleRef$current3.call(onSettleRef);
+      }, EQUAL_TOTAL_MS);
+    } else {
+      /* —— 不等高：高度全程同步 + 内容交叉淡（有底板） —— */
+      outer.style.transition = "height ".concat(UNEQUAL_HEIGHT_MS, "ms ").concat(EASING);
+      outer.style.height = "".concat(target, "px");
       if (outEl) {
-        outEl.style.transition = '';
-        outEl.style.opacity = '';
-        outEl.style.visibility = '';
+        outEl.style.transition = "opacity ".concat(UNEQUAL_FADE_MS, "ms ").concat(EASING);
+        outEl.style.opacity = '0';
       }
-    }, TOTAL_MS);
+      current.style.transition = "opacity ".concat(UNEQUAL_FADE_MS, "ms ").concat(EASING);
+      current.style.opacity = '1';
+      doneTimer = window.setTimeout(function () {
+        var _onSettleRef$current4;
+        setOutgoing(null);
+        animatingRef.current = false;
+        var h = current.getBoundingClientRect().height;
+        if (!isCollapsedMeasure(h)) finishHeight(outer, h);
+        current.style.transition = '';
+        current.style.opacity = '1';
+        if (outEl) {
+          outEl.style.transition = '';
+          outEl.style.opacity = '';
+          outEl.style.visibility = '';
+          outEl.style.background = '';
+        }
+        (_onSettleRef$current4 = onSettleRef.current) === null || _onSettleRef$current4 === void 0 || _onSettleRef$current4.call(onSettleRef);
+      }, UNEQUAL_TOTAL_MS);
+    }
     return function () {
-      window.clearTimeout(fadeInTimer);
       window.clearTimeout(doneTimer);
     };
   }, [outgoing]);
@@ -199,9 +255,11 @@ export function AutoHeight(_ref) {
       if (animatingRef.current || outgoing !== null && outgoing !== undefined) return;
       var target = current.getBoundingClientRect().height;
       if (!readyRef.current) {
+        var _onSettleRef$current5;
         if (isCollapsedMeasure(target)) return;
         finishHeight(outer, target);
         readyRef.current = true;
+        (_onSettleRef$current5 = onSettleRef.current) === null || _onSettleRef$current5 === void 0 || _onSettleRef$current5.call(onSettleRef);
         return;
       }
 
@@ -241,7 +299,7 @@ export function AutoHeight(_ref) {
       position: 'absolute',
       left: 0,
       right: 0
-    }, pin, 0), "pointerEvents", 'none'), "background", 'var(--odn-color-bg-elevated)'), "zIndex", 1)
+    }, pin, 0), "pointerEvents", 'none'), "background", 'transparent'), "zIndex", 1)
   }, outgoing) : null, /*#__PURE__*/React.createElement("div", {
     ref: currentRef,
     "data-odn-clarify-auto-height-inner": true

package/dist/clarify-dock/index.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import type { ClarifyInput } from './types';
 import './style';
+import type { ClarifyInput } from './types';
 /** @deprecated 仅兼容旧 Host；上移 morph 已改为 FLIP，不再需要 layoutId / LayoutGroup。 */
 export declare function clarifyDockLayoutId(msgId: string): string;
-export type { ClarifyInput, ClarifyOption } from './types';
 export { parseClarifyBoundDate, toISODate } from './types';
+export type { ClarifyInput, ClarifyOption } from './types';
 export interface ClarifyDockQuestion {
     key: string;
     /** 题面文案。 */

package/dist/clarify-dock/index.js

@@ -14,8 +14,8 @@ import Input from "../input";
 import Pagination from "../pagination";
 import { AutoHeight } from "./auto-height";
 import { discardClarifyDockMorph, stashClarifyDockMorph, takeClarifyDockMorph } from "./morph-handoff";
-import { parseClarifyBoundDate, toISODate } from "./types";
 import "./style";
+import { parseClarifyBoundDate, toISODate } from "./types";
 
 /** @deprecated 仅兼容旧 Host；上移 morph 已改为 FLIP，不再需要 layoutId / LayoutGroup。 */
 export function clarifyDockLayoutId(msgId) {
@@ -138,8 +138,9 @@ export function ClarifyDockTrigger(_ref) {
     };
   }, [msgId, morphDisabled, reduceMotion, items]);
   if (!items || items.length === 0) return null;
-  var multi = items.length > 1;
-  var mainLabel = multi ? "\u5DF2\u786E\u8BA4 ".concat(items.length, " \u9898") : formatLockedLine(items[0].label, items[0].answer);
+
+  /* 单题 / 多题共用骨架：折叠短摘要 + 展开小票（对齐 Approval） */
+  var mainLabel = "\u5DF2\u786E\u8BA4 ".concat(items.length, " \u9898");
   var handleToggle = function handleToggle() {
     if (expanded) {
       setExpanded(false);
@@ -169,7 +170,7 @@ export function ClarifyDockTrigger(_ref) {
     "data-odn-clarify-dock-locked-icon": true
   }), /*#__PURE__*/React.createElement("span", {
     "data-odn-clarify-dock-locked-main": true
-  }, mainLabel)), multi ? /*#__PURE__*/React.createElement("button", {
+  }, mainLabel)), /*#__PURE__*/React.createElement("button", {
     type: "button",
     "data-odn-clarify-dock-locked-toggle": true,
     "aria-expanded": expanded,
@@ -178,7 +179,7 @@ export function ClarifyDockTrigger(_ref) {
     name: "chevron-down",
     size: 14,
     "data-odn-clarify-dock-locked-chevron": true
-  })) : null)), multi ? /*#__PURE__*/React.createElement("div", {
+  })))), /*#__PURE__*/React.createElement("div", {
     "data-odn-clarify-dock-locked-panel": true,
     "data-open": expanded ? 'true' : 'false',
     "data-collapsed-settled": collapsedSettled ? '' : undefined,
@@ -192,7 +193,7 @@ export function ClarifyDockTrigger(_ref) {
       key: item.key,
       "data-odn-clarify-dock-locked-line": true
     }, formatLockedLine(item.label, item.answer));
-  })))) : null));
+  }))))));
 }
 
 /* ================================================================== */
@@ -255,6 +256,11 @@ export function ClarifyDockPanel(_ref2) {
     _useState14 = _slicedToArray(_useState13, 2),
     dateRangeDraft = _useState14[0],
     setDateRangeDraft = _useState14[1];
+  /** AutoHeight 过渡结束后再递增，驱动选项延后 autofocus */
+  var _useState15 = useState(0),
+    _useState16 = _slicedToArray(_useState15, 2),
+    inputFocusEpoch = _useState16[0],
+    setInputFocusEpoch = _useState16[1];
   var question = spec.questions[page];
   var answer = answers[page];
   var input = question.input;
@@ -317,7 +323,7 @@ export function ClarifyDockPanel(_ref2) {
   var canConfirmAll = useMemo(function () {
     if (!canAdvance) return false;
     return answers.every(function (a, i) {
-      return i === page ? true : a != null;
+      return i === page ? true : a !== undefined;
     });
   }, [answers, canAdvance, page]);
   var formatAnswer = function formatAnswer(q, ans) {
@@ -456,10 +462,10 @@ export function ClarifyDockPanel(_ref2) {
     setAnswers(synced);
     if (isLastPage) {
       if (!synced.every(function (a) {
-        return a != null;
+        return a !== undefined;
       })) {
         var firstIncomplete = synced.findIndex(function (a) {
-          return a == null;
+          return a === undefined;
         });
         if (firstIncomplete >= 0) goToPage(firstIncomplete, synced);
         return;
@@ -481,14 +487,14 @@ export function ClarifyDockPanel(_ref2) {
     setDateRangeDraft(null);
     /* 不按顺序跳过：任意一题跳过后若已全部有值（含已跳），直接提交 */
     if (next.every(function (a) {
-      return a != null;
+      return a !== undefined;
     })) {
       setAnswers(next);
       submit(next);
       return;
     }
     var firstIncomplete = next.findIndex(function (a) {
-      return a == null;
+      return a === undefined;
     });
     goToPage(firstIncomplete >= 0 ? firstIncomplete : page, next);
   };
@@ -510,7 +516,12 @@ export function ClarifyDockPanel(_ref2) {
     "aria-label": "\u6F84\u6E05\u95EE\u9898 ".concat(page + 1, " / ").concat(total)
   }, /*#__PURE__*/React.createElement(AutoHeight, {
     anchor: "bottom",
-    contentKey: page
+    contentKey: page,
+    onSettle: function onSettle() {
+      return setInputFocusEpoch(function (n) {
+        return n + 1;
+      });
+    }
   }, /*#__PURE__*/React.createElement("div", {
     "data-odn-clarify-dock-body": true
   }, spec.title ? /*#__PURE__*/React.createElement("div", {
@@ -525,9 +536,11 @@ export function ClarifyDockPanel(_ref2) {
     "data-odn-clarify-dock-q-row": true
   }, /*#__PURE__*/React.createElement("div", {
     "data-odn-clarify-dock-q": true
-  }, question.label, input.kind === 'options-multi' ? /*#__PURE__*/React.createElement("span", {
+  }, question.label), input.kind === 'options' ? /*#__PURE__*/React.createElement("span", {
     "data-odn-clarify-dock-q-hint": true
-  }, "\uFF08\u53EF\u591A\u9009\uFF09") : null)), /*#__PURE__*/React.createElement("div", {
+  }, "\u5355\u9009") : input.kind === 'options-multi' ? /*#__PURE__*/React.createElement("span", {
+    "data-odn-clarify-dock-q-hint": true
+  }, "\u53EF\u591A\u9009") : null), /*#__PURE__*/React.createElement("div", {
     "data-odn-clarify-dock-input-shell": true,
     "data-skipped": isSkipped ? '' : undefined
   }, /*#__PURE__*/React.createElement("div", {
@@ -537,6 +550,7 @@ export function ClarifyDockPanel(_ref2) {
     input: input,
     maxOptions: resolveMaxOptions(spec.maxOptions),
     answer: isSkipped ? undefined : answer,
+    focusEpoch: inputFocusEpoch,
     otherDraft: otherDraft,
     dateDraft: dateDraft,
     dateRangeDraft: dateRangeDraft,
@@ -664,6 +678,7 @@ function QuestionInput(_ref3) {
   var input = _ref3.input,
     maxOptions = _ref3.maxOptions,
     answer = _ref3.answer,
+    focusEpoch = _ref3.focusEpoch,
     otherDraft = _ref3.otherDraft,
     dateDraft = _ref3.dateDraft,
     dateRangeDraft = _ref3.dateRangeDraft,
@@ -673,16 +688,21 @@ function QuestionInput(_ref3) {
     onPickSingle = _ref3.onPickSingle,
     onToggleMulti = _ref3.onToggleMulti;
   if (input.kind === 'options' || input.kind === 'options-multi') {
-    return /*#__PURE__*/React.createElement(OptionsList, {
-      options: withOtherOption(input.options, input.allowOther, maxOptions),
-      multi: input.kind === 'options-multi',
-      answer: answer,
-      otherDraft: otherDraft,
-      otherPlaceholder: input.otherPlaceholder,
-      onOtherDraftChange: onOtherDraftChange,
-      onPickSingle: onPickSingle,
-      onToggleMulti: onToggleMulti
-    });
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line @typescript-eslint/no-use-before-define -- 同文件后置实现
+      React.createElement(OptionsList, {
+        options: withOtherOption(input.options, input.allowOther, maxOptions),
+        multi: input.kind === 'options-multi',
+        answer: answer,
+        focusEpoch: focusEpoch,
+        otherDraft: otherDraft,
+        otherPlaceholder: input.otherPlaceholder,
+        onOtherDraftChange: onOtherDraftChange,
+        onPickSingle: onPickSingle,
+        onToggleMulti: onToggleMulti
+      })
+    );
   }
   if (input.kind === 'date') {
     return /*#__PURE__*/React.createElement("div", {
@@ -721,24 +741,34 @@ function OptionsList(_ref4) {
   var options = _ref4.options,
     multi = _ref4.multi,
     answer = _ref4.answer,
+    focusEpoch = _ref4.focusEpoch,
     otherDraft = _ref4.otherDraft,
     otherPlaceholder = _ref4.otherPlaceholder,
     onOtherDraftChange = _ref4.onOtherDraftChange,
     onPickSingle = _ref4.onPickSingle,
     onToggleMulti = _ref4.onToggleMulti;
   var optionRefs = useRef([]);
-  var optionKey = options.map(function (o) {
-    return o.value;
-  }).join('|');
-
-  /* 切题时把焦点放到首项/已选项，便于立刻 ↑↓ */
-  useEffect(function () {
+  /** roving tabindex：当前键盘焦点项；与选中态解耦，避免重渲染丢焦 */
+  var _useState17 = useState(0),
+    _useState18 = _slicedToArray(_useState17, 2),
+    focusedIdx = _useState18[0],
+    setFocusedIdx = _useState18[1];
+  /** 选中态导致「其他」编辑行等结构切换后，在 layout 再聚焦 */
+  var pendingFocusIdxRef = useRef(null);
+  var resolveSelectedIdx = function resolveSelectedIdx() {
     var selectedIdx = options.findIndex(function (o) {
       if ((answer === null || answer === void 0 ? void 0 : answer.kind) === 'options') return answer.value === o.value;
       if ((answer === null || answer === void 0 ? void 0 : answer.kind) === 'options-multi') return answer.values.includes(o.value);
       return false;
     });
-    var focusIdx = selectedIdx >= 0 ? selectedIdx : 0;
+    return selectedIdx >= 0 ? selectedIdx : 0;
+  };
+
+  /* 等 AutoHeight 过渡 settle 后再聚焦，避免渐现中途冒出焦点环 */
+  useEffect(function () {
+    if (focusEpoch <= 0) return;
+    var focusIdx = resolveSelectedIdx();
+    setFocusedIdx(focusIdx);
     var id = window.requestAnimationFrame(function () {
       var _optionRefs$current$f;
       (_optionRefs$current$f = optionRefs.current[focusIdx]) === null || _optionRefs$current$f === void 0 || _optionRefs$current$f.focus();
@@ -746,29 +776,45 @@ function OptionsList(_ref4) {
     return function () {
       return window.cancelAnimationFrame(id);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- 只在选项集切换时重聚焦
-  }, [optionKey]);
-  var focusAt = function focusAt(idx) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- 仅在 settle 后聚焦当前选项集
+  }, [focusEpoch]);
+  useLayoutEffect(function () {
     var _optionRefs$current$n;
-    var next = Math.max(0, Math.min(options.length - 1, idx));
+    var pending = pendingFocusIdxRef.current;
+    if (pending === null) return;
+    pendingFocusIdxRef.current = null;
+    var next = Math.max(0, Math.min(options.length - 1, pending));
+    setFocusedIdx(next);
     (_optionRefs$current$n = optionRefs.current[next]) === null || _optionRefs$current$n === void 0 || _optionRefs$current$n.focus();
+  });
+  var focusAt = function focusAt(idx) {
+    var _optionRefs$current$n2;
+    var next = Math.max(0, Math.min(options.length - 1, idx));
+    setFocusedIdx(next);
+    (_optionRefs$current$n2 = optionRefs.current[next]) === null || _optionRefs$current$n2 === void 0 || _optionRefs$current$n2.focus();
+  };
+  var moveTo = function moveTo(idx) {
+    var next = Math.max(0, Math.min(options.length - 1, idx));
+    if (!multi) {
+      /* 单选会改 answer，可能切到「其他」编辑行导致 button 卸载；延后到 layout 再聚焦 */
+      pendingFocusIdxRef.current = next;
+      onPickSingle(options[next]);
+      return;
+    }
+    focusAt(next);
   };
   var handleOptionKeyDown = function handleOptionKeyDown(idx, opt) {
     return function (e) {
       if (e.key === 'ArrowDown') {
         e.preventDefault();
         e.stopPropagation();
-        var next = (idx + 1) % options.length;
-        focusAt(next);
-        if (!multi) onPickSingle(options[next]);
+        moveTo((idx + 1) % options.length);
         return;
       }
       if (e.key === 'ArrowUp') {
         e.preventDefault();
         e.stopPropagation();
-        var _next = (idx - 1 + options.length) % options.length;
-        focusAt(_next);
-        if (!multi) onPickSingle(options[_next]);
+        moveTo((idx - 1 + options.length) % options.length);
         return;
       }
       if (e.key === 'Enter' || e.key === ' ') {
@@ -824,11 +870,13 @@ function OptionsList(_ref4) {
             });
             var next = e.key === 'ArrowDown' ? (otherIdx + 1) % options.length : (otherIdx - 1 + options.length) % options.length;
             if (!multi) {
+              pendingFocusIdxRef.current = next;
               onPickSingle(options[next]);
+            } else {
+              requestAnimationFrame(function () {
+                return focusAt(next);
+              });
             }
-            requestAnimationFrame(function () {
-              return focusAt(next);
-            });
           }
           if (multi && e.key === 'Escape') {
             e.preventDefault();
@@ -859,30 +907,16 @@ function OptionsList(_ref4) {
       "data-odn-clarify-dock-option-label": true
     }, opt.label));
 
-    /* 不用 data-odn-button：避免 Button small 固定 height 把通栏选项撑坏 */
-    if (active && !multi) {
-      return /*#__PURE__*/React.createElement("button", {
-        key: opt.value,
-        type: "button",
-        ref: function ref(el) {
-          optionRefs.current[idx] = el;
-        },
-        role: "radio",
-        "aria-checked": true,
-        tabIndex: idx === 0 ? 0 : -1,
-        onClick: function onClick() {
-          return onPickSingle(opt);
-        },
-        onKeyDown: handleOptionKeyDown(idx, opt),
-        "data-odn-clarify-dock-option": true,
-        "data-active": true,
-        "data-other": isOther || undefined
-      }, optionContent);
-    }
+    /*
+     * 单选 / 多选统一 HoverFill + button 结构。
+     * 旧版单选已选项改裸 button，↑↓ 选中时 DOM 重挂载 → 焦点丢失、按键失灵。
+     * 单选已选：HoverFill 色透明，选中态仍由 data-active CSS 绘制。
+     */
+    var singleActive = Boolean(active && !multi);
     return /*#__PURE__*/React.createElement(HoverFill, {
       key: opt.value,
-      hoverColor: multi ? active ? MULTI_SELECTED_HOVER_FILL : MULTI_UNSELECTED_HOVER_FILL : MULTI_UNSELECTED_HOVER_FILL,
-      activeColor: multi ? active ? MULTI_SELECTED_HOVER_FILL : MULTI_UNSELECTED_ACTIVE_FILL : MULTI_UNSELECTED_ACTIVE_FILL,
+      hoverColor: singleActive ? 'transparent' : multi ? active ? MULTI_SELECTED_HOVER_FILL : MULTI_UNSELECTED_HOVER_FILL : MULTI_UNSELECTED_HOVER_FILL,
+      activeColor: singleActive ? 'transparent' : multi ? active ? MULTI_SELECTED_HOVER_FILL : MULTI_UNSELECTED_ACTIVE_FILL : MULTI_UNSELECTED_ACTIVE_FILL,
       "data-odn-clarify-dock-option-fill": true
     }, /*#__PURE__*/React.createElement("button", {
       type: "button",
@@ -891,7 +925,10 @@ function OptionsList(_ref4) {
       },
       role: multi ? 'checkbox' : 'radio',
       "aria-checked": active,
-      tabIndex: idx === 0 ? 0 : -1,
+      tabIndex: focusedIdx === idx ? 0 : -1,
+      onFocus: function onFocus() {
+        return setFocusedIdx(idx);
+      },
       onClick: function onClick() {
         return multi ? onToggleMulti(opt) : onPickSingle(opt);
       },
@@ -913,10 +950,10 @@ function OptionsList(_ref4) {
  *   - recordAnswer 后 Panel 消失，Trigger 切 Approval 式锁态卡
  */
 export function useClarifyDockState(messages, sessionKey, resetVer) {
-  var _useState15 = useState({}),
-    _useState16 = _slicedToArray(_useState15, 2),
-    answers = _useState16[0],
-    setAnswers = _useState16[1];
+  var _useState19 = useState({}),
+    _useState20 = _slicedToArray(_useState19, 2),
+    answers = _useState20[0],
+    setAnswers = _useState20[1];
 
   /* 切换会话或点「重置」时清空已答标记，避免 Panel / Trigger 状态脱节 */
   useEffect(function () {

package/dist/clarify-dock/style/index.css

@@ -85,10 +85,13 @@ div[data-odn-clarify-dock] [data-odn-clarify-dock-body] {
 [data-odn-clarify-dock-q-row] {
   display: flex;
   align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
   min-width: 0;
 }
 
 [data-odn-clarify-dock] [data-odn-clarify-dock-q] {
+  flex: 1;
   min-width: 0;
   font-size: 14px;
   font-weight: 400;
@@ -97,13 +100,11 @@ div[data-odn-clarify-dock] [data-odn-clarify-dock-body] {
   margin: 0;
 }
 
-/* 多选题干后缀（与题干同字号、同色）；负 margin 收紧与问号间的全角留白 */
 [data-odn-clarify-dock-q-hint] {
-  font-size: inherit;
-  line-height: inherit;
-  font-weight: inherit;
-  color: var(--odn-color-black-12);
-  margin-left: -0.6em;
+  flex-shrink: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--odn-color-black-8);
 }
 
 /* ---------- 底栏 · 对齐 approval-actions（含顶部分割线） ---------- */
@@ -206,14 +207,9 @@ div[data-odn-clarify-dock] [data-odn-clarify-dock-body] {
 }
 [data-odn-clarify-dock] [data-odn-clarify-dock-option]:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--odn-color-black-8) 20%, transparent);
-}
-
-/* 单选未包 HoverFill 时，灰底直接画在 button 上 */
-[data-odn-clarify-dock] [data-odn-clarify-dock-options] > [data-odn-clarify-dock-option] {
-  background: var(--odn-color-black-2);
 }
 
+/* 单选已选态由 data-active 绘制；选项均包在 HoverFill 内 */
 [data-odn-clarify-dock] [data-odn-clarify-dock-option][data-active] {
   background: color-mix(in srgb, var(--odn-color-brand-6) 12%, transparent);
   color: var(--odn-color-brand-7);

package/dist/composer/index.d.ts

@@ -228,6 +228,12 @@ export interface ComposerProps {
      * @default image/*,.pdf,...,.7z
      */
     accept?: string;
+    /**
+     * 自定义"格式不支持"提示文案。接收被拒绝的文件扩展名（不含前导点，已大写），
+     * 返回用于 Message.warning 的字符串。
+     * @default (ext) => `不支持「${ext}」格式`
+     */
+    fileRejectMessage?: (ext: string) => string;
     /**
      * 参数面板内容渲染。提供后 invocation chip 可点击打开面板；
      * `SkillItem.initialState='pending'` 插入后会自动打开。

package/dist/composer/index.js

@@ -137,6 +137,7 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
     maxTotalSize = _ref.maxTotalSize,
     _ref$accept = _ref.accept,
     accept = _ref$accept === void 0 ? DEFAULT_ACCEPT : _ref$accept,
+    fileRejectMessage = _ref.fileRejectMessage,
     renderParamPanel = _ref.renderParamPanel,
     onToolClick = _ref.onToolClick,
     className = _ref.className,
@@ -500,7 +501,8 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
       _iterator.f();
     }
     if (unsupportedExt) {
-      Message.warning("\u4E0D\u652F\u6301\u300C".concat(unsupportedExt.replace(/^\./, '').toUpperCase(), "\u300D\u683C\u5F0F"));
+      var _ext = unsupportedExt.replace(/^\./, '').toUpperCase();
+      Message.warning(fileRejectMessage ? fileRejectMessage(_ext) : "\u4E0D\u652F\u6301\u300C".concat(_ext, "\u300D\u683C\u5F0F"));
     }
     if (oversizedName) {
       Message.warning("\u300C".concat(oversizedName, "\u300D\u8D85\u8FC7 ").concat(formatSizeMb(maxFileSize), "\uFF0C\u8BF7\u538B\u7F29\u540E\u91CD\u8BD5"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "one-design-next",
-  "version": "0.0.72",
+  "version": "0.0.74",
   "description": "One Design Next from TAD@tencent.com",
   "license": "MIT",
   "type": "module",
@@ -41,9 +41,10 @@
     "test": "vitest",
     "test:a11y": "echo 'axe-core smoke run（待 P5 接入）'",
     "test:changed": "vitest run --changed",
-    "test:ci": "vitest run",
+    "test:ci": "vitest run --exclude '**/visual.test.tsx'",
+    "test:visual": "vitest run '**/visual.test.tsx'",
     "test:visual:docker": "bash scripts/visual-baseline-docker.sh",
-    "test:visual:update": "UPDATE_VISUAL=1 vitest run",
+    "test:visual:update": "UPDATE_VISUAL=1 vitest run '**/visual.test.tsx'",
     "test:visual:update:docker": "bash scripts/visual-baseline-docker.sh update",
     "typecheck": "tsc -p tsconfig.ci.json"
   },