@tfdesign/b-end 1.0.6 → 1.0.8

package/src/_b_end_runtime/preview-registry.jsx

@@ -125,12 +125,34 @@ import fullScreenPageJsxRaw from './components/FullScreenPage.jsx?raw';
 /** 预览用：切换「初始开/关」时通过 key 重挂载，避免 defaultChecked 仅在 mount 生效 */
 function SwitchPreview({ variant = 'brand', defaultChecked, disabled }) {
   return (
-    <Switch
-      key={`sw-${defaultChecked}-${disabled}`}
-      variant={variant}
-      defaultChecked={defaultChecked}
-      disabled={disabled}
-    />
+    <FormControlPreviewWidth>
+      <Switch
+        key={`sw-${defaultChecked}-${disabled}`}
+        variant={variant}
+        defaultChecked={defaultChecked}
+        disabled={disabled}
+      />
+    </FormControlPreviewWidth>
+  );
+}
+
+const FORM_CONTROL_PREVIEW_WIDTH_STYLE = {
+  width: 'min(300px, 100%)',
+  maxWidth: '100%',
+};
+
+const FORM_CONTROL_PREVIEW_ITEM_STYLE = {
+  ...FORM_CONTROL_PREVIEW_WIDTH_STYLE,
+  display: 'flex',
+  justifyContent: 'center',
+};
+
+/** 仅用于体服 AI 设计平台预览画布，不改变组件自身规范或运行时默认宽度。 */
+function FormControlPreviewWidth({ children, style }) {
+  return (
+    <div style={{ ...FORM_CONTROL_PREVIEW_WIDTH_STYLE, ...style }}>
+      {children}
+    </div>
   );
 }
 
@@ -351,16 +373,18 @@ function formatUsageLiteral(value) {
 /** 预览用：key 保证切换配置时非受控 defaultValue 生效 */
 function SliderPreview({ min, max, step, defaultValue, showTooltip, marks, disabled, initialKey }) {
   return (
-    <Slider
-      key={`sl-${initialKey}-${min}-${max}-${step}-${Boolean(marks)}-${disabled}-${JSON.stringify(defaultValue)}`}
-      min={min}
-      max={max}
-      step={step}
-      defaultValue={defaultValue}
-      showTooltip={showTooltip}
-      marks={marks}
-      disabled={disabled}
-    />
+    <FormControlPreviewWidth>
+      <Slider
+        key={`sl-${initialKey}-${min}-${max}-${step}-${Boolean(marks)}-${disabled}-${JSON.stringify(defaultValue)}`}
+        min={min}
+        max={max}
+        step={step}
+        defaultValue={defaultValue}
+        showTooltip={showTooltip}
+        marks={marks}
+        disabled={disabled}
+      />
+    </FormControlPreviewWidth>
   );
 }
 
@@ -409,24 +433,6 @@ const TEXTAREA_MULTI_SUGGESTION_GROUPS = [
   ],
 ];
 
-const TAGINPUT_AI_SUGGESTION_GROUPS = [
-  [
-    ['改签', '门店变更'],
-    ['退款', '售后处理'],
-    ['物流异常', '催办'],
-  ],
-  [
-    ['优惠券', '核销异常'],
-    ['客服回访', '待跟进'],
-    ['资损风险', '升级处理'],
-  ],
-  [
-    ['履约异常', '商家侧'],
-    ['平台规则', '需复核'],
-    ['用户反馈', '已记录'],
-  ],
-];
-
 /** 预览用：key 随「填充 / 超长演示」切换重置非受控初值 */
 function TextAreaPreview({
   variant = 'default',
@@ -465,23 +471,25 @@ function TextAreaPreview({
   }, [hasMultiSuggestions, hasSingleSuggestion]);
 
   return (
-    <TextArea
-      key={`textarea-${variant}-${fillMode}-${countOverflow}-${disabled}-${status}-${resize}-${fillHeight}-${minRowsSafe}`}
-      variant={variant}
-      minRows={minRowsSafe}
-      status={status}
-      disabled={disabled}
-      placeholder={isCodeVariant ? '请输入 System Prompt、JSON 或代码' : '请输入'}
-      defaultValue={defaultValue}
-      showCount={showCountDemo}
-      {...(showCountDemo ? { maxLength: 140, enforceMaxLength } : {})}
-      resize={resize}
-      fillHeight={fillHeight}
-      aiSuggestion={hasSingleSuggestion ? TEXTAREA_SINGLE_SUGGESTIONS[singleIndex] : undefined}
-      aiSuggestions={hasMultiSuggestions ? TEXTAREA_MULTI_SUGGESTION_GROUPS[multiIndex] : undefined}
-      onRefreshAiSuggestions={hasSingleSuggestion || hasMultiSuggestions ? handleRefresh : undefined}
-      className={fillHeight ? 'flex-1 min-h-0 w-full' : (isCodeVariant ? 'w-[520px]' : '')}
-    />
+    <FormControlPreviewWidth>
+      <TextArea
+        key={`textarea-${variant}-${fillMode}-${countOverflow}-${disabled}-${status}-${resize}-${fillHeight}-${minRowsSafe}`}
+        variant={variant}
+        minRows={minRowsSafe}
+        status={status}
+        disabled={disabled}
+        placeholder={isCodeVariant ? '请输入 System Prompt、JSON 或代码' : '请输入'}
+        defaultValue={defaultValue}
+        showCount={showCountDemo}
+        {...(showCountDemo ? { maxLength: 140, enforceMaxLength } : {})}
+        resize={resize}
+        fillHeight={fillHeight}
+        aiSuggestion={hasSingleSuggestion ? TEXTAREA_SINGLE_SUGGESTIONS[singleIndex] : undefined}
+        aiSuggestions={hasMultiSuggestions ? TEXTAREA_MULTI_SUGGESTION_GROUPS[multiIndex] : undefined}
+        onRefreshAiSuggestions={hasSingleSuggestion || hasMultiSuggestions ? handleRefresh : undefined}
+        className={fillHeight ? 'flex-1 min-h-0 w-full' : ''}
+      />
+    </FormControlPreviewWidth>
   );
 }
 
@@ -503,12 +511,14 @@ function InputPreview(props) {
   }, [hasMultiSuggestions, hasSingleSuggestion]);
 
   return (
-    <Input
-      {...rest}
-      aiSuggestion={hasSingleSuggestion ? INPUT_SINGLE_SUGGESTIONS[singleIndex] : undefined}
-      aiSuggestions={hasMultiSuggestions ? INPUT_MULTI_SUGGESTION_GROUPS[multiIndex] : undefined}
-      onRefreshAiSuggestions={hasSingleSuggestion || hasMultiSuggestions ? handleRefresh : undefined}
-    />
+    <FormControlPreviewWidth>
+      <Input
+        {...rest}
+        aiSuggestion={hasSingleSuggestion ? INPUT_SINGLE_SUGGESTIONS[singleIndex] : undefined}
+        aiSuggestions={hasMultiSuggestions ? INPUT_MULTI_SUGGESTION_GROUPS[multiIndex] : undefined}
+        onRefreshAiSuggestions={hasSingleSuggestion || hasMultiSuggestions ? handleRefresh : undefined}
+      />
+    </FormControlPreviewWidth>
   );
 }
 
@@ -517,17 +527,43 @@ function InputNumberPreview({ content = 'empty', buttonMode = 'outer', disabled
   const defaultValue = content === 'filled' ? 12 : undefined;
   const innerButtons = buttonMode === 'inner';
   return (
-    <InputNumber
-      key={`input-number-${content}-${buttonMode}-${disabled}-${status}`}
-      status={status}
-      disabled={disabled}
-      innerButtons={innerButtons}
-      defaultValue={defaultValue}
-      min={0}
-      max={99}
-      step={1}
-      placeholder="请输入"
-    />
+    <FormControlPreviewWidth>
+      <InputNumber
+        key={`input-number-${content}-${buttonMode}-${disabled}-${status}`}
+        status={status}
+        disabled={disabled}
+        innerButtons={innerButtons}
+        defaultValue={defaultValue}
+        min={0}
+        max={99}
+        step={1}
+        placeholder="请输入"
+      />
+    </FormControlPreviewWidth>
+  );
+}
+
+function UploadPreview({ __previewKey, ...props }) {
+  return (
+    <FormControlPreviewWidth>
+      <Upload key={__previewKey} {...props} />
+    </FormControlPreviewWidth>
+  );
+}
+
+function DatePickerPreview(props) {
+  return (
+    <FormControlPreviewWidth>
+      <DatePicker {...props} />
+    </FormControlPreviewWidth>
+  );
+}
+
+function TimePickerPreview(props) {
+  return (
+    <FormControlPreviewWidth>
+      <TimePicker {...props} />
+    </FormControlPreviewWidth>
   );
 }
 
@@ -612,17 +648,19 @@ const CHATBUBBLE_PRESET_TIMESTAMPS = {
 function RadioPreview({ variant, layout, disabled, initialKey }) {
   const defaultValue = initialKey === 'a' ? 'a' : initialKey === 'b' ? 'b' : undefined;
   return (
-    <RadioGroup
-      key={`rp-${variant}-${layout}-${disabled}-${initialKey}`}
-      variant={variant}
-      layout={layout}
-      disabled={disabled}
-      defaultValue={defaultValue}
-    >
-      <Radio value="a">选项 A</Radio>
-      <Radio value="b">选项 B</Radio>
-      <Radio value="c" disabled>选项 C（单项禁用）</Radio>
-    </RadioGroup>
+    <FormControlPreviewWidth>
+      <RadioGroup
+        key={`rp-${variant}-${layout}-${disabled}-${initialKey}`}
+        variant={variant}
+        layout={layout}
+        disabled={disabled}
+        defaultValue={defaultValue}
+      >
+        <Radio value="a">选项 A</Radio>
+        <Radio value="b">选项 B</Radio>
+        <Radio value="c" disabled>选项 C（单项禁用）</Radio>
+      </RadioGroup>
+    </FormControlPreviewWidth>
   );
 }
 
@@ -630,33 +668,37 @@ function RadioPreview({ variant, layout, disabled, initialKey }) {
 function CheckboxPreview({ variant, size, layout, disabled, initialKey, previewMode }) {
   if (previewMode === 'indeterminate') {
     return (
-      <Checkbox
-        key={`cb-ind-${variant}-${size}-${disabled}`}
-        variant={variant}
-        size={size}
-        disabled={disabled}
-        indeterminate
-      >
-        半选状态（树形父级）
-      </Checkbox>
+      <FormControlPreviewWidth>
+        <Checkbox
+          key={`cb-ind-${variant}-${size}-${disabled}`}
+          variant={variant}
+          size={size}
+          disabled={disabled}
+          indeterminate
+        >
+          半选状态（树形父级）
+        </Checkbox>
+      </FormControlPreviewWidth>
     );
   }
   let defaultValue = [];
   if (initialKey === 'a') defaultValue = ['a'];
   else if (initialKey === 'ab') defaultValue = ['a', 'b'];
   return (
-    <CheckboxGroup
-      key={`cbg-${variant}-${size}-${layout}-${disabled}-${initialKey}`}
-      variant={variant}
-      size={size}
-      layout={layout}
-      disabled={disabled}
-      defaultValue={defaultValue}
-    >
-      <Checkbox value="a">选项 A</Checkbox>
-      <Checkbox value="b">选项 B</Checkbox>
-      <Checkbox value="c" disabled>选项 C（单项禁用）</Checkbox>
-    </CheckboxGroup>
+    <FormControlPreviewWidth>
+      <CheckboxGroup
+        key={`cbg-${variant}-${size}-${layout}-${disabled}-${initialKey}`}
+        variant={variant}
+        size={size}
+        layout={layout}
+        disabled={disabled}
+        defaultValue={defaultValue}
+      >
+        <Checkbox value="a">选项 A</Checkbox>
+        <Checkbox value="b">选项 B</Checkbox>
+        <Checkbox value="c" disabled>选项 C（单项禁用）</Checkbox>
+      </CheckboxGroup>
+    </FormControlPreviewWidth>
   );
 }
 
@@ -687,7 +729,7 @@ function SelectPreview({ status, disabled, initial, optionMode, selectType, aiSu
   }, [hasMultiSuggestions, hasSingleSuggestion]);
 
   return (
-    <div className="w-[300px] max-w-full">
+    <FormControlPreviewWidth>
       <Select
         key={`selp-${selectType}-${initial}-${optionMode}-${disabled}-${status}`}
         mode={isTagSelect ? 'tag' : 'default'}
@@ -701,7 +743,7 @@ function SelectPreview({ status, disabled, initial, optionMode, selectType, aiSu
         aiSuggestions={!isTagSelect && hasMultiSuggestions ? SELECT_AI_MULTI_SUGGESTION_GROUPS[multiIndex] : undefined}
         onRefreshAiSuggestions={!isTagSelect && (hasSingleSuggestion || hasMultiSuggestions) ? handleRefresh : undefined}
       />
-    </div>
+    </FormControlPreviewWidth>
   );
 }
 
@@ -825,26 +867,22 @@ function buildFormFieldAtomProps(fieldType, enums, controlValues = {}) {
   return {};
 }
 
-function TagInputPreview({ content, widthMode, disabled, status, tagVariant, tagSize, showAiSuggestions = true }) {
+function TagInputPreview({ content, widthMode, disabled, status, tagVariant, tagSize }) {
   const defaultValue = content === 'filled' ? TAGINPUT_SAMPLE_TAGS : [];
-  const widthClass = widthMode === 'narrow' ? '!w-[220px]' : widthMode === 'wide' ? '!w-[420px]' : '';
-  const [suggestionIndex, setSuggestionIndex] = useState(0);
-  const handleRefresh = useCallback(() => {
-    setSuggestionIndex((prev) => (prev + 1) % TAGINPUT_AI_SUGGESTION_GROUPS.length);
-  }, []);
+  const widthClass = widthMode === 'narrow' ? '!w-[220px] max-w-full' : widthMode === 'wide' ? '!w-[420px] max-w-full' : '';
   return (
-    <TagInput
-      key={`tag-input-${content}-${widthMode}-${disabled}-${status}-${tagVariant}-${tagSize}`}
-      status={status}
-      disabled={disabled}
-      defaultValue={defaultValue}
-      placeholder="请输入"
-      tagVariant={tagVariant}
-      tagSize={tagSize}
-      aiSuggestions={showAiSuggestions ? TAGINPUT_AI_SUGGESTION_GROUPS[suggestionIndex] : undefined}
-      onRefreshAiSuggestions={showAiSuggestions ? handleRefresh : undefined}
-      className={widthClass}
-    />
+    <FormControlPreviewWidth>
+      <TagInput
+        key={`tag-input-${content}-${widthMode}-${disabled}-${status}-${tagVariant}-${tagSize}`}
+        status={status}
+        disabled={disabled}
+        defaultValue={defaultValue}
+        placeholder="请输入"
+        tagVariant={tagVariant}
+        tagSize={tagSize}
+        className={widthClass}
+      />
+    </FormControlPreviewWidth>
   );
 }
 
@@ -918,7 +956,7 @@ function FormPreview({
     }))
     : baseItems;
 
-  return (
+  const preview = (
     <Form
       key={`form-${previewMode}-${fieldType}-${labelPosition}-${helpMode}-${validationState}-${size}-${labelOptional}-${labelRequired}-${labelAi}-${labelHelp}-${JSON.stringify(fieldAtomProps || {})}`}
       layout="vertical"
@@ -933,6 +971,10 @@ function FormPreview({
       className={previewMode === 'all' ? '!gap-10' : ''}
     />
   );
+
+  return previewMode === 'all'
+    ? preview
+    : <FormControlPreviewWidth>{preview}</FormControlPreviewWidth>;
 }
 
 export const PREVIEW_REGISTRY = {
@@ -2541,13 +2583,22 @@ export const PREVIEW_REGISTRY = {
       padding: '48px',
     }),
 
-    getPreviewItemStyle: ({ controlValues }) => ({
-      width: controlValues.previewMode === 'all' ? 'max-content' : 'auto',
-      minWidth: controlValues.previewMode === 'all' ? '300px' : undefined,
-      display: 'flex',
-      alignItems: controlValues.previewMode === 'all' ? 'flex-start' : 'center',
-      justifyContent: controlValues.previewMode === 'all' ? 'flex-start' : 'center',
-    }),
+    getPreviewItemStyle: ({ controlValues }) => {
+      if (controlValues.previewMode === 'all') {
+        return {
+          width: 'max-content',
+          minWidth: '300px',
+          display: 'flex',
+          alignItems: 'flex-start',
+          justifyContent: 'flex-start',
+        };
+      }
+
+      return {
+        ...FORM_CONTROL_PREVIEW_ITEM_STYLE,
+        alignItems: 'center',
+      };
+    },
 
     controls: [
       {
@@ -3674,7 +3725,7 @@ export const PREVIEW_REGISTRY = {
     },
   },
   upload: {
-    component: Upload,
+    component: UploadPreview,
     tokenMap: UPLOAD_TOKEN_MAP,
     jsxSource: uploadJsxRaw,
 
@@ -3764,7 +3815,7 @@ export const PREVIEW_REGISTRY = {
   },
 
   'date-picker': {
-    component: DatePicker,
+    component: DatePickerPreview,
     tokenMap: DATEPICKER_TOKEN_MAP,
     jsxSource: datePickerJsxRaw,
 
@@ -3776,12 +3827,14 @@ export const PREVIEW_REGISTRY = {
 
       if (isOpen) {
         return {
+          ...FORM_CONTROL_PREVIEW_ITEM_STYLE,
           transform: `translateY(-${Math.round((panelHeight + panelGap) / 2)}px)`,
           transition: 'transform 180ms ease',
         };
       }
 
       return {
+        ...FORM_CONTROL_PREVIEW_ITEM_STYLE,
         transform: 'translateY(-56px)',
         transition: 'transform 180ms ease',
       };
@@ -3877,7 +3930,7 @@ export const PREVIEW_REGISTRY = {
   },
 
   'time-picker': {
-    component: TimePicker,
+    component: TimePickerPreview,
     tokenMap: TIMEPICKER_TOKEN_MAP,
     jsxSource: timePickerJsxRaw,
 
@@ -3889,12 +3942,14 @@ export const PREVIEW_REGISTRY = {
 
       if (isOpen) {
         return {
+          ...FORM_CONTROL_PREVIEW_ITEM_STYLE,
           transform: `translateY(-${Math.round((panelHeight + panelGap) / 2)}px)`,
           transition: 'transform 180ms ease',
         };
       }
 
       return {
+        ...FORM_CONTROL_PREVIEW_ITEM_STYLE,
         transform: 'translateY(-56px)',
         transition: 'transform 180ms ease',
       };
@@ -4039,16 +4094,6 @@ export const PREVIEW_REGISTRY = {
         ],
         default: 'default',
       },
-      {
-        id: 'suggestionMode',
-        label: 'AI推荐',
-        type: 'seg',
-        options: [
-          { id: 'off', label: '隐藏' },
-          { id: 'on', label: '显示' },
-        ],
-        default: 'on',
-      },
     ],
 
     mapProps: (cv, enums) => ({
@@ -4059,7 +4104,6 @@ export const PREVIEW_REGISTRY = {
       status: enums.status || 'default',
       tagVariant: enums.tagVariant || 'grey',
       tagSize: enums.tagSize || 'm',
-      showAiSuggestions: (cv.suggestionMode || 'on') === 'on',
     }),
 
     generateUsage: (enums, cv) => {
@@ -4077,10 +4121,6 @@ export const PREVIEW_REGISTRY = {
       if (content === 'filled') {
         props.push('defaultValue={["标签", "标签", "标签", "标签", "标签", "标签"]}');
       }
-      if ((cv.suggestionMode || 'on') === 'on') {
-        props.push('aiSuggestions={[["改签", "门店变更"], ["退款", "售后处理"], ["物流异常", "催办"]]}');
-        props.push('onRefreshAiSuggestions={() => {}}');
-      }
 
       lines.push('');
       lines.push('<TagInput');

package/src/_b_end_runtime/tokens.js

@@ -110,7 +110,7 @@ export const TOKEN_SIZE = {
   'icon-14': '14px',
   'control-sm': '24px',
   'control-md': '36px',
-  'input-width': '300px',
+  'input-width': '100%',
 };
 
 export const TOKEN_LETTER_SPACING = {

package/src/index.d.ts

@@ -909,14 +909,6 @@ export interface TagInputProps extends TfdsCommonProps {
   onChange?: (...args: any[]) => any;
   /** function, default: null */
   onRemove?: (...args: any[]) => any;
-  /** array | string | object, default: null */
-  aiSuggestion?: unknown;
-  /** array, default: null */
-  aiSuggestions?: unknown[];
-  /** function, default: null */
-  onAdoptSuggestion?: (...args: any[]) => any;
-  /** function, default: null */
-  onRefreshAiSuggestions?: (...args: any[]) => any;
   /** boolean, default: true */
   closable?: boolean;
   /** enum<brand | red | orange | yellow | green | cyan | blue | purple | pink | teal | grey | white>, default: "grey" */

package/theme.css

@@ -317,7 +317,7 @@
   --size-icon-14: 14px;
   --size-control-sm: 24px;
   --size-control-md: 36px;
-  --size-input-width: 300px;
+  --size-input-width: 100%;
 
   /* ── Shadows ── */
   --shadow-none: 0 0 #0000;