@tfdesign/b-end 1.0.11 → 1.0.13

package/src/_b_end_runtime/preview-registry.jsx

@@ -37,6 +37,7 @@ import DatePicker from './components/DatePicker';
 import TimePicker from './components/TimePicker';
 import Toast from './components/Toast';
 import Tag from './components/Tag';
+import Filter from './components/Filter';
 import TagInput from './components/TagInput';
 import TagGridPreview from './components/TagGridPreview';
 import TablePreview, {
@@ -77,6 +78,7 @@ import { DATEPICKER_TOKEN_MAP } from './components/DatePicker.tokens';
 import { TIMEPICKER_TOKEN_MAP } from './components/TimePicker.tokens';
 import { TOAST_TOKEN_MAP } from './components/Toast.tokens';
 import { TAG_TOKEN_MAP } from './components/Tag.tokens';
+import { FILTER_TOKEN_MAP } from './components/Filter.tokens';
 import { TAGINPUT_TOKEN_MAP } from './components/TagInput.tokens';
 import { TABLE_TOKEN_MAP } from './components/Table.tokens';
 import { TOOLTIP_TOKEN_MAP } from './components/Tooltip.tokens';
@@ -112,6 +114,7 @@ import datePickerJsxRaw from './components/DatePicker.jsx?raw';
 import timePickerJsxRaw from './components/TimePicker.jsx?raw';
 import toastJsxRaw from './components/Toast.jsx?raw';
 import tagJsxRaw from './components/Tag.jsx?raw';
+import filterJsxRaw from './components/Filter.jsx?raw';
 import tagInputJsxRaw from './components/TagInput.jsx?raw';
 import tableJsxRaw from './components/Table.jsx?raw';
 import tooltipJsxRaw from './components/Tooltip.jsx?raw';
@@ -136,6 +139,37 @@ function SwitchPreview({ variant = 'brand', defaultChecked, disabled }) {
   );
 }
 
+const FILTER_SAMPLE_OPTIONS = [
+  { label: '选项一', value: 'option-1' },
+  { label: '选项二', value: 'option-2' },
+  { label: '选项三', value: 'option-3' },
+  { label: '禁用项', value: 'option-4', disabled: true },
+];
+
+function FilterPreview({
+  initial = 'empty',
+  disabled = false,
+}) {
+  const [singleValues, setSingleValues] = useState(
+    initial === 'selected' ? ['option-1'] : [],
+  );
+
+  useEffect(() => {
+    setSingleValues(initial === 'selected' ? ['option-1'] : []);
+  }, [initial]);
+
+  return (
+    <Filter
+      label="筛选项"
+      options={FILTER_SAMPLE_OPTIONS}
+      selectedValues={singleValues}
+      onChange={setSingleValues}
+      disabled={disabled}
+      onClear={() => {}}
+    />
+  );
+}
+
 const FORM_CONTROL_PREVIEW_WIDTH_STYLE = {
   width: 'min(300px, 100%)',
   maxWidth: '100%',
@@ -645,20 +679,22 @@ const CHATBUBBLE_PRESET_TIMESTAMPS = {
 };
 
 /** 预览用：key 保证切换初始选中 / 禁用 / 枚举时 defaultValue 生效 */
-function RadioPreview({ variant, layout, disabled, initialKey }) {
+function RadioPreview({ variant, styleType, layout, disabled, initialKey }) {
   const defaultValue = initialKey === 'a' ? 'a' : initialKey === 'b' ? 'b' : undefined;
+  const isCardStyle = styleType === 'card' || styleType === 'pureCard';
   return (
     <FormControlPreviewWidth>
       <RadioGroup
-        key={`rp-${variant}-${layout}-${disabled}-${initialKey}`}
+        key={`rp-${variant}-${styleType}-${layout}-${disabled}-${initialKey}`}
         variant={variant}
+        styleType={styleType}
         layout={layout}
         disabled={disabled}
         defaultValue={defaultValue}
       >
-        <Radio value="a">选项 A</Radio>
-        <Radio value="b">选项 B</Radio>
-        <Radio value="c" disabled>选项 C（单项禁用）</Radio>
+        <Radio value="a">{isCardStyle ? '单选框标题' : '选项 A'}</Radio>
+        <Radio value="b">{isCardStyle ? '单选框标题' : '选项 B'}</Radio>
+        <Radio value="c">{isCardStyle ? '单选框标题' : '选项 C'}</Radio>
       </RadioGroup>
     </FormControlPreviewWidth>
   );
@@ -2042,6 +2078,8 @@ export const PREVIEW_REGISTRY = {
         options: [
           { id: 'task-plan', label: '任务规划' },
           { id: 'config-form', label: '配置表单' },
+          { id: 'option-card', label: '澄清确认卡片1' },
+          { id: 'form-card', label: '澄清确认卡片2' },
         ],
         default: 'task-plan',
         hidden: ({ controlValues }) => (controlValues.subComponent || 'execution-flow') !== 'card',
@@ -2212,6 +2250,59 @@ export const PREVIEW_REGISTRY = {
             '  timestamp="18:16"',
             '/>',
           ],
+          'option-card': [
+            '<ChatMessage',
+            '  header',
+            '  title=""',
+            '  steps={null}',
+            '  confirms={[',
+            '    {',
+            '      mode: "option-card",',
+            '      title: "澄清确认",',
+            '      iconName: "clipboard-check-stroked",',
+            '      primaryActionLabel: "确认",',
+            '      defaultSelectedValue: "handoff-guide",',
+            '      options: [',
+            '        { value: "handoff-guide", label: "方案1： 用户请求转人工但系统未触发转接，持续引导自助操作" },',
+            '        { value: "handoff", label: "方案2： 用户请求转人工" },',
+            '        { value: "self-service", label: "方案3： 持续引导自助操作" },',
+            '      ],',
+            '      onPrimaryAction: ({ value, option }) => {},',
+            '    },',
+            '  ]}',
+            '  actions',
+            '  timestamp="18:16"',
+            '/>',
+          ],
+          'form-card': [
+            '<ChatMessage',
+            '  header',
+            '  title=""',
+            '  steps={null}',
+            '  confirms={[',
+            '    {',
+            '      mode: "form-card",',
+            '      title: "澄清确认",',
+            '      iconName: "clipboard-check-stroked",',
+            '      primaryActionLabel: "确认",',
+            '      formItems: [',
+            '        { id: "scene", label: "业务场景", type: "select", placeholder: "请选择业务场景", defaultValue: "after-sales", options: [',
+            '          { value: "after-sales", label: "售后服务" },',
+            '          { value: "pre-sales", label: "售前咨询" },',
+            '          { value: "logistics", label: "物流配送" },',
+            '        ], fullWidth: true },',
+            '        { id: "channel", label: "处理渠道", type: "select", placeholder: "请选择处理渠道", defaultValue: "self-service", options: [',
+            '          { value: "self-service", label: "自助引导" },',
+            '          { value: "handoff", label: "转人工" },',
+            '        ], fullWidth: true },',
+            '        { id: "remark", label: "补充说明", type: "input", placeholder: "请输入补充说明（可选）", fullWidth: true },',
+            '      ],',
+            '    },',
+            '  ]}',
+            '  actions',
+            '  timestamp="18:16"',
+            '/>',
+          ],
         },
         'user-message': {
           text: [
@@ -3227,6 +3318,17 @@ export const PREVIEW_REGISTRY = {
     jsxSource: radioJsxRaw,
 
     controls: [
+      {
+        id: 'styleType',
+        label: '样式分类',
+        type: 'seg',
+        options: [
+          { id: 'basic', label: '基础样式' },
+          { id: 'card', label: '带圆点单选卡片' },
+          { id: 'pureCard', label: '单选卡片' },
+        ],
+        default: 'basic',
+      },
       {
         id: 'initialKey',
         label: '初始选中',
@@ -3251,6 +3353,7 @@ export const PREVIEW_REGISTRY = {
     ],
 
     mapProps: (cv) => ({
+      styleType: cv.styleType || 'basic',
       initialKey: cv.initialKey || 'none',
       disabled: cv.state === 'disabled',
     }),
@@ -3258,7 +3361,9 @@ export const PREVIEW_REGISTRY = {
     generateUsage: (enums, cv) => {
       const lines = [`import RadioGroup, { Radio } from './components/Radio';`];
       const props = [];
+      const styleType = cv.styleType || 'basic';
       if (enums.variant && enums.variant !== 'brand') props.push(`variant="${enums.variant}"`);
+      if (styleType !== 'basic') props.push(`styleType="${styleType}"`);
       if (enums.layout && enums.layout !== 'vertical') props.push(`layout="${enums.layout}"`);
       if (cv.initialKey === 'a') props.push('defaultValue="a"');
       if (cv.initialKey === 'b') props.push('defaultValue="b"');
@@ -3268,9 +3373,15 @@ export const PREVIEW_REGISTRY = {
       lines.push('<RadioGroup');
       props.forEach((p) => lines.push(`  ${p}`));
       lines.push('>');
-      lines.push('  <Radio value="a">选项 A</Radio>');
-      lines.push('  <Radio value="b">选项 B</Radio>');
-      lines.push('  <Radio value="c" disabled>选项 C（单项禁用）</Radio>');
+      if (styleType === 'card' || styleType === 'pureCard') {
+        lines.push('  <Radio value="a">单选框标题</Radio>');
+        lines.push('  <Radio value="b">单选框标题</Radio>');
+        lines.push('  <Radio value="c" disabled>单选框标题</Radio>');
+      } else {
+        lines.push('  <Radio value="a">选项 A</Radio>');
+        lines.push('  <Radio value="b">选项 B</Radio>');
+        lines.push('  <Radio value="c" disabled>选项 C（单项禁用）</Radio>');
+      }
       lines.push('</RadioGroup>');
       return lines.join('\n');
     },
@@ -4081,6 +4192,67 @@ export const PREVIEW_REGISTRY = {
     },
   },
 
+  filter: {
+    component: FilterPreview,
+    tokenMap: FILTER_TOKEN_MAP,
+    jsxSource: filterJsxRaw,
+
+    getPreviewAreaStyle: () => ({
+      alignItems: 'center',
+      justifyContent: 'center',
+      overflow: 'auto',
+      padding: '32px',
+    }),
+
+    controls: [
+      {
+        id: 'initial',
+        label: '初始值',
+        type: 'seg',
+        options: [
+          { id: 'empty', label: '空' },
+          { id: 'selected', label: '已选' },
+        ],
+        default: 'empty',
+      },
+      {
+        id: 'state',
+        label: '交互',
+        type: 'seg',
+        options: [
+          { id: 'default', label: '可点' },
+          { id: 'disabled', label: '禁用' },
+        ],
+        default: 'default',
+      },
+    ],
+
+    mapProps: (cv) => ({
+      initial: cv.initial || 'empty',
+      disabled: cv.state === 'disabled',
+    }),
+
+    generateUsage: (_enums, cv) => {
+      const lines = [`import Filter from './components/Filter';`];
+      const props = ['label="筛选项"'];
+      props.push('options={options}');
+      if ((cv.initial || 'empty') === 'selected') props.push('defaultValue={["option-1"]}');
+      if (cv.state === 'disabled') props.push('disabled');
+
+      lines.push('');
+      lines.push('const options = [');
+      lines.push('  { label: "选项一", value: "option-1" },');
+      lines.push('  { label: "选项二", value: "option-2" },');
+      lines.push('  { label: "选项三", value: "option-3" },');
+      lines.push('];');
+      lines.push('');
+      lines.push('<Filter');
+      props.forEach((p) => lines.push(`  ${p}`));
+      lines.push('/>');
+      return lines.join('\n');
+    },
+  },
+
   'tag-input': {
     component: TagInputPreview,
     tokenMap: TAGINPUT_TOKEN_MAP,

package/src/index.d.ts

@@ -636,10 +636,12 @@ export interface SelectProps extends TfdsCommonProps {
 }
 export const Select: React.FC<SelectProps>;
 
-/** RadioGroup — 互斥单选：同一组内只能选一个值。适合选项少、需要并排或纵列展示全部标签的表单场景。多选请用 CheckboxGroup；布尔即时开关请用 Switch；选项很多请用 Select。 */
+/** RadioGroup — 互斥单选：同一组内只能选一个值。支持基础样式、带圆点单选卡片、单选卡片 3 类形态，适合选项少且需要平铺比较的表单场景。多选请用 CheckboxGroup；布尔即时开关请用 Switch；选项很多请用 Select。 */
 export interface RadioGroupProps extends TfdsCommonProps {
   /** enum<brand | black>, default: "brand" */
   variant?: "brand" | "black";
+  /** enum<basic | card | pureCard>, default: "basic" */
+  styleType?: "basic" | "card" | "pureCard";
   /** enum<vertical | horizontal>, default: "vertical" */
   layout?: "vertical" | "horizontal";
   /** boolean, default: false */
@@ -949,6 +951,33 @@ export interface TagProps extends TfdsCommonProps {
 }
 export const Tag: React.FC<TagProps>;
 
+/** Filter — 筛选胶囊项：用于筛选栏中的单个筛选触发器或已选条件展示，36px 高、全圆角、标签 semibold + 值 regular。支持点击展开下拉面板、多选、白底常态、填充态、品牌选中态、禁用态和可清除态。 */
+export interface FilterProps extends TfdsCommonProps {
+  /** string, default: "筛选项" */
+  label?: string;
+  /** string|number|null, default: null */
+  value?: unknown;
+  /** array, default: [] */
+  options?: unknown[];
+  /** array, default: undefined */
+  selectedValues?: unknown[];
+  /** array, default: [] */
+  defaultValue?: unknown[];
+  /** function, default: null */
+  onChange?: (...args: any[]) => any;
+  /** boolean, default: false */
+  selected?: boolean;
+  /** boolean, default: false */
+  filled?: boolean;
+  /** boolean, default: false */
+  disabled?: boolean;
+  /** boolean, default: false */
+  closable?: boolean;
+  /** function, default: null */
+  onClear?: (...args: any[]) => any;
+}
+export const Filter: React.FC<FilterProps>;
+
 /** Toast — 轻量反馈条：信息/成功/警示/错误四态，左侧状态图标（相对行首额外 4px 左边距）+ 主文案 + 可选文字操作（绿色文字 Button）+ 可关闭；宽度随内容收缩（w-fit），最大不超过 min(100%,560px)；圆角 12px、可选语义描边（bordered）、内距 12px、主文案 14px 半粗，行内纵向居中对齐。规范仅覆盖单条条目视觉；全局队列、停留时长与 Portal 由业务集成（对齐 HiUI Toast）。 */
 export interface ToastProps extends TfdsCommonProps {
   /** enum<info | success | warning | error>, default: "info" */

package/src/index.js

@@ -1,5 +1,5 @@
 /**
- * @tf-designsystem/b-end 公开 API（由 scripts/generate-tfds-b-end-bundle.mjs 生成，勿手改）
+ * @tfdesign/b-end 公开 API（由 scripts/generate-tfds-b-end-bundle.mjs 生成，勿手改）
  * 实现位于包内 ./src/_b_end_runtime/（与主仓 src/data/systems/b-end 同步，可独立 npm 安装）
  */
 
@@ -35,6 +35,7 @@ export { default as Modal } from './_b_end_runtime/components/Modal.jsx';
 export { default as Sheet } from './_b_end_runtime/components/Sheet.jsx';
 export { default as TagInput } from './_b_end_runtime/components/TagInput.jsx';
 export { default as Tag } from './_b_end_runtime/components/Tag.jsx';
+export { default as Filter } from './_b_end_runtime/components/Filter.jsx';
 export { default as Toast } from './_b_end_runtime/components/Toast.jsx';
 export { default as Tooltip } from './_b_end_runtime/components/Tooltip.jsx';
 export { default as Empty } from './_b_end_runtime/components/Empty.jsx';