@tfdesign/b-end 1.0.4

package/src/_b_end_runtime/components/NavBar.tokens.js

@@ -0,0 +1,97 @@
+export const NAVBAR_TOKEN_MAP = {
+  品牌: [
+    { label: '品牌语义', cssProp: 'content', value: '顶部文案展示真实平台名称；OLA 仅为模板示意，不是固定文案' },
+    { label: '平台默认', cssProp: 'variant', value: '默认使用 OLA 类型菜单栏结构；ByteHi 仅限明确“客服工作台”场景' },
+    { label: '文字色', cssProp: 'color', token: '--color-foreground', value: '#182230', semanticRef: 'text-primary' },
+    { label: '字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+    { label: '字重', cssProp: 'font-weight', value: '900' },
+    { label: '行高', cssProp: 'line-height', token: '--leading-5', value: '20px' },
+  ],
+  业务卡: [
+    { label: '背景', cssProp: 'background', token: '--color-card-secondary', value: 'rgba(255,255,255,0.65)', semanticRef: 'bg-card-secondary' },
+    { label: '悬浮底', cssProp: 'background', token: '--color-surface', value: '#FFFFFF', semanticRef: 'bg-surface', state: 'hover' },
+    { label: '描边', cssProp: 'border-color', token: '--color-white', value: '#FFFFFF' },
+    { label: '圆角', cssProp: 'border-radius', token: '--radius-md', value: '8px' },
+    { label: '图标底', cssProp: 'background', token: '--color-foreground', value: '#182230', semanticRef: 'text-primary' },
+    { label: '下拉选项间距', cssProp: 'gap', token: '--spacing-1', value: '4px', state: 'dropdown' },
+  ],
+  模块: [
+    { label: '菜单身份', cssProp: 'semantics', value: 'moduleLabel 是 OLA 第一个菜单项，默认文案“平台首页”，不是装饰标题' },
+    { label: '首页默认', cssProp: 'state', value: 'AI 新生成页面或明确为首页时，默认 selectedItemId="module" / activeModule=true' },
+    { label: '默认色', cssProp: 'color', token: '--color-foreground-muted', value: '#667085', semanticRef: 'text-tertiary', state: 'default' },
+    { label: '激活色', cssProp: 'color', token: '--color-foreground', value: '#182230', semanticRef: 'text-primary', state: 'active' },
+    { label: '图标色', cssProp: 'color', token: '--color-brand-500', value: '#56D3BC', state: 'active' },
+    { label: '悬浮底', cssProp: 'background', token: '--color-card-secondary', value: 'rgba(255,255,255,0.65)', semanticRef: 'bg-card-secondary', state: 'hover' },
+    { label: '激活底', cssProp: 'background', token: '--color-card-secondary', value: 'rgba(255,255,255,0.65)', semanticRef: 'bg-card-secondary', state: 'active' },
+    { label: '激活悬浮', cssProp: 'background', token: '--color-surface', value: '#FFFFFF', semanticRef: 'bg-surface', state: 'active-hover' },
+    { label: '描边', cssProp: 'border-color', token: '--color-white', value: '#FFFFFF', state: 'active' },
+    { label: '圆角', cssProp: 'border-radius', token: '--radius-md', value: '8px' },
+  ],
+  导航: [
+    { label: '自由切换', cssProp: 'interaction', value: '平台首页、所有主导航项和可选底部工具项都必须支持点击切换' },
+    { label: '选中状态源', cssProp: 'state', value: '推荐 selectedItemId + onSelect 单一受控状态；不要同时混用多套 active* 状态源' },
+    { label: '默认色', cssProp: 'color', token: '--color-foreground-muted', value: '#667085', semanticRef: 'text-tertiary', state: 'default' },
+    { label: '激活色', cssProp: 'color', token: '--color-foreground', value: '#182230', semanticRef: 'text-primary', state: 'active' },
+    { label: '图标色', cssProp: 'color', token: '--color-brand-500', value: '#56D3BC', state: 'active' },
+    { label: '悬浮底', cssProp: 'background', token: '--color-card-secondary', value: 'rgba(255,255,255,0.65)', semanticRef: 'bg-card-secondary', state: 'hover' },
+    { label: '激活底', cssProp: 'background', token: '--color-card-secondary', value: 'rgba(255,255,255,0.65)', semanticRef: 'bg-card-secondary', state: 'active' },
+    { label: '激活悬浮', cssProp: 'background', token: '--color-surface', value: '#FFFFFF', semanticRef: 'bg-surface', state: 'active-hover' },
+    { label: '描边', cssProp: 'border-color', token: '--color-white', value: '#FFFFFF', state: 'active' },
+    { label: '字号', cssProp: 'font-size', token: '--text-xs', value: '12px' },
+    { label: '行高', cssProp: 'line-height', token: '--leading-4', value: '16px' },
+    { label: '按钮宽', cssProp: 'width', value: '88px' },
+    { label: '按钮高', cssProp: 'height', value: '60px' },
+  ],
+  工具: [
+    { label: '图标色', cssProp: 'color', token: '--color-foreground-muted', value: '#667085', semanticRef: 'text-tertiary' },
+    { label: '选中色', cssProp: 'color', token: '--color-brand-500', value: '#56D3BC', state: 'active' },
+    { label: '悬浮底', cssProp: 'background', token: '--color-card-secondary', value: 'rgba(255,255,255,0.65)', semanticRef: 'bg-card-secondary', state: 'hover' },
+    { label: '选中底', cssProp: 'background', token: '--color-card-secondary', value: 'rgba(255,255,255,0.65)', semanticRef: 'bg-card-secondary', state: 'active' },
+    { label: '选中悬浮', cssProp: 'background', token: '--color-surface', value: '#FFFFFF', semanticRef: 'bg-surface', state: 'active-hover' },
+    { label: '描边', cssProp: 'border-color', token: '--color-white', value: '#FFFFFF', state: 'active' },
+    { label: '按钮高', cssProp: 'height', value: '52px' },
+    { label: '圆角', cssProp: 'border-radius', token: '--radius-md', value: '8px' },
+  ],
+  头像: [
+    { label: '尺寸', cssProp: 'width/height', value: '24px' },
+    { label: '圆角', cssProp: 'border-radius', token: '--radius-full', value: '9999px' },
+  ],
+  尺寸: [
+    { label: 'OLA宽度', cssProp: 'width', value: '120px' },
+    { label: 'ByteHi布局占位宽度', cssProp: 'width', value: '60px' },
+    { label: 'ByteHi展开面板宽度', cssProp: 'width', value: '180px', state: 'hover-expanded-panel' },
+    { label: 'ByteHi展开方式', cssProp: 'position', value: '外层固定占位 60px；内部面板 absolute 覆盖展开，不挤压右侧内容', state: 'hover-expanded-panel' },
+    { label: '顶栏高度', cssProp: 'height', value: '48px', state: 'bytehi-header' },
+    { label: '首项间距', cssProp: 'padding-top', token: '--spacing-4', value: '16px', state: 'bytehi-first-nav-gap' },
+    { label: '高度', cssProp: 'height', value: '100%（随父容器撑满）' },
+    { label: '横向边距', cssProp: 'padding-inline', token: '--spacing-4', value: '16px' },
+    { label: '纵向节奏', cssProp: 'gap', token: '--spacing-1', value: '4px' },
+  ],
+  ByteHi导航: [
+    { label: '容器底色', cssProp: 'background', token: '--color-blueGrey-200', value: '#F2F4F7' },
+    { label: '展开阴影', cssProp: 'box-shadow', value: '0 1px 6px 0 rgba(0,0,0,0.1), 0 0 1px 0 rgba(0,0,0,0.15)', state: 'expanded' },
+    { label: '选中底', cssProp: 'background', token: '--color-surface', value: '#FFFFFF', semanticRef: 'bg-surface', state: 'active' },
+    { label: '默认文字', cssProp: 'color', token: '--color-foreground-muted', value: '#667085', semanticRef: 'text-tertiary', state: 'default' },
+    { label: '选中文字', cssProp: 'color', token: '--color-foreground', value: '#182230', semanticRef: 'text-primary', state: 'active' },
+    { label: '图标尺寸', cssProp: 'icon-size', value: '20px' },
+    { label: '字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+    { label: '默认字重', cssProp: 'font-weight', token: '--font-medium', value: '500', state: 'default' },
+    { label: '选中字重', cssProp: 'font-weight', token: '--font-semibold', value: '600', state: 'active' },
+    { label: '行高', cssProp: 'line-height', token: '--leading-5', value: '20px' },
+    { label: '圆角', cssProp: 'border-radius', token: '--radius-md', value: '8px' },
+  ],
+  ByteHi底部: [
+    { label: '网络图标', cssProp: 'color', token: '--color-success', value: '#3EB346', semanticRef: 'status-success' },
+    { label: '说明文字', cssProp: 'color', token: '--color-foreground-secondary', value: '#475467', semanticRef: 'text-secondary' },
+    { label: '主标题', cssProp: 'color', token: '--color-foreground', value: '#182230', semanticRef: 'text-primary' },
+    { label: '网络卡高', cssProp: 'height', value: '56px' },
+    { label: '网络圆角', cssProp: 'border-radius', token: '--radius-avatar', value: '3px' },
+    { label: '头像尺寸', cssProp: 'width/height', value: '32px' },
+    { label: '默认头像', cssProp: 'content', value: 'ByteHi image 头像未传 src 时固定使用本地成员“段然”，hover/展开不随机变化' },
+    { label: '辅助字号', cssProp: 'font-size', token: '--text-xs', value: '12px' },
+  ],
+  引用组件: [
+    { label: '导航图标', cssProp: '—', value: 'Icon / hiai-logo / icon-logo-douyin / home-smile-stroked / if-stroked / book-open-01-stroked / tool-01-stroked / message-chat-circle-stroked / grid-03-stroked / bell-03-stroked / settings-02-stroked / dots-grid-stroked / message-dots-circle-stroked / message-dots-square-stroked / clock-stroked / shield-tick-stroked / menu-03-stroked / phone-stroked / server-01-stroked / server-02-stroked / help-circle-stroked / wifi-stroked' },
+    { label: '用户头像', cssProp: '—', value: 'Avatar / type=image|robot|fallback / size=xs|s / shape=round' },
+  ],
+};

package/src/_b_end_runtime/components/NavBarPreview.jsx

@@ -0,0 +1,11 @@
+import NavBar from './NavBar';
+
+const CANVAS = 'flex h-full min-h-0 w-full items-stretch justify-start';
+
+export default function NavBarPreview(props) {
+  return (
+    <div className={CANVAS}>
+      <NavBar {...props} />
+    </div>
+  );
+}

package/src/_b_end_runtime/components/Radio.jsx

@@ -0,0 +1,227 @@
+/**
+ * Radio / RadioGroup — B端设计系统 (Tailwind 内联)
+ *
+ * 单选组：API 对齐 HiUI Radio（RadioGroup + Radio、value/defaultValue/onChange、禁用）。
+ * **选型**：互斥单选且选项少（建议 ≤5）、需平铺展示 → Radio；选项多或占位窄 → `Select`；多选 → `CheckboxGroup`；单布尔即时切换 → `Switch`。
+ * 视觉参考 HIUIpackage 内 @douyinfe/semi-ui 的 `.semi-radio` 规范（umd/view.css）：
+ * 默认 16×16px、1px 边框（未选）、hover/active 填充态、选中为实心主色圆 + 中心白点、
+ * 纵向组 row-gap 12px、横向组 gap 16px、项内图文间距 8px、指示器 margin-top 2px 与 20px 行高对齐。
+ *
+ * @component RadioGroup
+ * @prop {'brand'|'black'} [variant='brand'] — 色系：brand 选中绿色、black 选中深灰
+ * @prop {'vertical'|'horizontal'} [layout='vertical'] — 布局：vertical 纵向 12px / horizontal 横向 16px
+ * @prop {boolean} [disabled=false] — 禁用整组
+ * @prop {string} [value] — 受控选中值
+ * @prop {string} [defaultValue] — 非受控初始值
+ * @prop {(value, event) => void} [onChange] — 选中回调
+ * @prop {string} [name] — 原生 name（同组共享，未传时自动生成）
+ * @prop {string} [className='']
+ *
+ * @component Radio（须在 RadioGroup 内）
+ * @prop {string} value — 选项标识（必填）
+ * @prop {boolean} [disabled=false] — 单项禁用
+ * @prop {string} [className='']
+ * @prop {ReactNode} children — 文案
+ */
+
+import {
+  createContext,
+  useContext,
+  useId,
+  useMemo,
+  useState,
+  useCallback,
+} from 'react';
+
+const RadioContext = createContext(null);
+
+/* ── 布局方向 → 纵向组距 12px / 横向组距 16px ── */
+const LAYOUT_CLASS = {
+  vertical: 'flex flex-col gap-3',
+  horizontal: 'inline-flex flex-row flex-wrap items-start gap-4',
+};
+
+/* ── 基础 → 组容器字体继承 ── */
+const GROUP_BASE = '[font-family:inherit]';
+
+const LABEL_ROW = 'group inline-flex items-start gap-2 select-none rounded-sm';
+
+/* ── 指示器 → 内包裹层，margin-top 2px 与 20px 行高对齐 ── */
+const INNER_WRAP = 'relative mt-[2px] inline-flex shrink-0';
+
+/* ── 指示圈 → 外圈基础样式（16×16、1px solid、圆角 full） ── */
+const OUTER_BASE = [
+  'relative flex shrink-0 items-center justify-center rounded-full',
+  'border border-solid transition-colors duration-150',
+].join(' ');
+
+const OUTER_SIZE = 'size-[16px]';
+
+const INNER_DOT = 'size-[6px]';
+
+const LABEL_TEXT = 'text-sm leading-[20px]';
+
+const FOCUS_OUTLINE = {
+  brand: 'has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-brand-200',
+  black: 'has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-grey-400',
+};
+
+function buildDisplayClass(checked, disabled, variant) {
+  const sz = OUTER_SIZE;
+  if (disabled) {
+    if (checked) {
+      if (variant === 'black') {
+        return [
+          OUTER_BASE, sz,
+          'opacity-75 bg-blueGrey-400 border-blueGrey-400',
+        ].join(' ');
+      }
+      return [
+        OUTER_BASE, sz,
+        'opacity-75 bg-brand-200 border-brand-200',
+      ].join(' ');
+    }
+    return [
+      OUTER_BASE, sz,
+      'opacity-75 bg-disabled border-border-default',
+    ].join(' ');
+  }
+
+  if (checked) {
+    if (variant === 'black') {
+      return [
+        OUTER_BASE, sz,
+        'bg-grey-950 border-grey-950',
+        'group-hover:bg-grey-900 group-hover:border-grey-900',
+        'group-active:bg-grey-800 group-active:border-grey-800',
+      ].join(' ');
+    }
+    return [
+      OUTER_BASE, sz,
+      'bg-brand-500 border-brand-500',
+      'group-hover:bg-brand-600 group-hover:border-brand-600',
+      'group-active:bg-brand-700 group-active:border-brand-700',
+    ].join(' ');
+  }
+
+  return [
+    OUTER_BASE, sz,
+    'border-foreground-muted bg-transparent',
+    'group-hover:bg-fill group-hover:border-border-brand',
+    'group-active:bg-blueGrey-100',
+  ].join(' ');
+}
+
+export function Radio({ value, disabled: itemDisabled = false, className = '', children }) {
+  const ctx = useContext(RadioContext);
+  if (!ctx) return null;
+
+  const {
+    selected,
+    setSelected,
+    groupDisabled,
+    variant,
+    name,
+  } = ctx;
+
+  const disabled = groupDisabled || itemDisabled;
+  const checked = String(selected) === String(value);
+  const fo = FOCUS_OUTLINE[variant] || FOCUS_OUTLINE.brand;
+
+  const displayCls = buildDisplayClass(checked, disabled, variant);
+
+  const dot = INNER_DOT;
+  const textCls = LABEL_TEXT;
+
+  const onChange = useCallback((e) => {
+    if (disabled) return;
+    setSelected(value, e);
+  }, [disabled, setSelected, value]);
+
+  return (
+    <label
+      className={[`tfds-radio`, [
+        LABEL_ROW,
+        fo,
+        disabled ? 'cursor-not-allowed' : 'cursor-pointer',
+        className,
+      ].filter(Boolean).join(' ')].filter(Boolean).join(' ')}
+     data-tfds-component="Radio">
+      <span className={INNER_WRAP}>
+        <input
+          type="radio"
+          name={name}
+          value={String(value)}
+          checked={checked}
+          disabled={disabled}
+          onChange={onChange}
+          className="sr-only"
+        />
+        <span className={displayCls} aria-hidden>
+          {checked ? (
+            <span className={`rounded-full bg-white ${dot}`} />
+          ) : null}
+        </span>
+      </span>
+      {children != null && children !== false ? (
+        <span
+          className={[
+            textCls,
+            disabled ? 'text-foreground-disabled' : 'text-foreground',
+          ].filter(Boolean).join(' ')}
+        >
+          {children}
+        </span>
+      ) : null}
+    </label>
+  );
+}
+
+export default function RadioGroup({
+  variant = 'brand',
+  size: _size = 'md',
+  layout = 'vertical',
+  disabled = false,
+  value,
+  defaultValue,
+  onChange,
+  name: nameProp,
+  className = '',
+  children,
+  ...rest
+}) {
+  const uid = useId();
+  const name = nameProp ?? `radio-group-${uid.replace(/:/g, '')}`;
+  const isControlled = value !== undefined;
+  const [inner, setInner] = useState(defaultValue);
+
+  const selected = isControlled ? value : inner;
+
+  const setSelected = useCallback((next, e) => {
+    if (!isControlled) setInner(next);
+    onChange?.(next, e);
+  }, [isControlled, onChange]);
+
+  const ctxValue = useMemo(() => ({
+    selected,
+    setSelected,
+    groupDisabled: disabled,
+    variant,
+    name,
+  }), [selected, setSelected, disabled, variant, name]);
+
+  const layoutCls = LAYOUT_CLASS[layout] || LAYOUT_CLASS.vertical;
+  const sizeText = 'text-sm';
+
+  return (
+    <RadioContext.Provider value={ctxValue}>
+      <div
+        role="radiogroup"
+        className={[GROUP_BASE, sizeText, 'leading-[20px]', layoutCls, className].filter(Boolean).join(' ')}
+        {...rest}
+      >
+        {children}
+      </div>
+    </RadioContext.Provider>
+  );
+}

package/src/_b_end_runtime/components/Radio.tokens.js

@@ -0,0 +1,59 @@
+/**
+ * Radio / RadioGroup — TOKEN_MAP（供平台属性面板展示）
+ *
+ * 与 HIUIpackage 中 Semi `.semi-radio` / `.semi-radioGroup` 语义对齐后，映射到 B 端 tokens.js。
+ */
+export const RADIO_TOKEN_MAP = {
+  base: [
+    { label: '纵向间距', cssProp: 'row-gap', token: '--spacing-3', value: '12px' },
+    { label: '横向间距', cssProp: 'gap', token: '--spacing-4', value: '16px' },
+  ],
+  组内排版: [
+    { label: '图文间距', cssProp: 'column-gap', token: '--spacing-2', value: '8px' },
+    { label: '顶部偏移', cssProp: 'margin-top', value: '2px' },
+    { label: '默认行高', cssProp: 'line-height', value: '20px' },
+  ],
+  标签文字: [
+    { label: '默认颜色', cssProp: 'color', token: '--color-foreground', value: '#182230', semanticRef: 'text-primary' },
+    { label: '禁用颜色', cssProp: 'color', token: '--color-foreground-disabled', value: '#98A2B3', semanticRef: 'text-disabled', state: 'disabled' },
+  ],
+  variants: {
+    brand: [
+      { label: '选中填充', cssProp: 'background / border-color', token: '--color-brand-500', value: '#56D3BC', semanticRef: 'status-primary', state: 'checked' },
+      { label: '选中悬浮', cssProp: 'background / border-color', token: '--color-brand-600', value: '#32C4AC', state: 'checked+hover' },
+      { label: '选中按下', cssProp: 'background / border-color', token: '--color-brand-700', value: '#18B49D', state: 'checked+active' },
+      { label: '中心点', cssProp: 'background', token: '--color-white', value: '#FFFFFF', state: 'checked' },
+      { label: '聚焦环', cssProp: 'outline-color', token: '--color-brand-200', value: '#A8E8D7', state: 'focus' },
+      { label: '禁用选中', cssProp: 'background / border-color', token: '--color-brand-200', value: '#A8E8D7', state: 'disabled+checked' },
+    ],
+    black: [
+      { label: '选中填充', cssProp: 'background / border-color', token: '--color-grey-950', value: '#111116', state: 'checked' },
+      { label: '选中悬浮', cssProp: 'background / border-color', token: '--color-grey-900', value: '#1C1C23', state: 'checked+hover' },
+      { label: '选中按下', cssProp: 'background / border-color', token: '--color-grey-800', value: '#2E2F38', state: 'checked+active' },
+      { label: '中心点', cssProp: 'background', token: '--color-white', value: '#FFFFFF', state: 'checked' },
+      { label: '聚焦环', cssProp: 'outline-color', token: '--color-blueGrey-400', value: '#D0D5DD', state: 'focus' },
+      { label: '禁用选中', cssProp: 'background / border-color', token: '--color-blueGrey-400', value: '#D0D5DD', state: 'disabled+checked' },
+    ],
+  },
+  指示圈: [
+    { label: '边框色', cssProp: 'border-color', token: '--color-foreground-muted', value: '#667085', semanticRef: 'text-tertiary' },
+    { label: '悬浮背景', cssProp: 'background', token: '--color-blueGrey-50', value: '#FCFCFD', state: 'hover' },
+    { label: '悬浮边框', cssProp: 'border-color', token: '--color-blueGrey-400', value: '#D0D5DD', state: 'hover' },
+    { label: '按下背景', cssProp: 'background', token: '--color-blueGrey-100', value: '#F9FAFB', state: 'active' },
+    { label: '禁用透明度', cssProp: 'opacity', value: '0.75', state: 'disabled' },
+    { label: '禁用背景', cssProp: 'background', token: '--color-disabled', value: '#F9FAFB', semanticRef: 'bg-disabled', state: 'disabled' },
+    { label: '禁用边框', cssProp: 'border-color', token: '--color-border-default', value: '#E4E7EC', semanticRef: 'border-default', state: 'disabled' },
+  ],
+  sizes: {
+    sm: [
+      { label: '外圆边长', cssProp: 'width / height', value: '14px' },
+      { label: '白点尺寸', cssProp: 'width / height', value: '5px' },
+      { label: '标签字号', cssProp: 'font-size', token: '--text-xs', value: '12px' },
+    ],
+    md: [
+      { label: '外圆边长', cssProp: 'width / height', value: '16px' },
+      { label: '白点尺寸', cssProp: 'width / height', value: '6px' },
+      { label: '标签字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+    ],
+  },
+};