@tfdesign/b-end 1.0.4

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

@@ -0,0 +1,99 @@
+/**
+ * DatePicker — TOKEN_MAP（供平台属性面板展示）
+ *
+ * 对齐 HiUI DatePicker Trigger + Panel（Date / Datetime / Daterange / DatetimeRange）
+ * 分组顺序：文本 → 图标 → 触发器 → 面板容器 → 日历结构 → 底部栏 → 类型尺寸
+ */
+export const DATEPICKER_TOKEN_MAP = {
+  base: [
+    { label: '默认高度', cssProp: 'height', value: '36px' },
+  ],
+  值文本: [
+    { label: '颜色', cssProp: 'color', token: '--color-foreground', value: '#182230', semanticRef: 'text-primary' },
+    { label: '字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+    { label: '行高', cssProp: 'line-height', value: '20px' },
+  ],
+  占位符: [
+    { label: '颜色', cssProp: 'color', token: '--color-foreground-muted', value: '#667085', semanticRef: 'text-tertiary' },
+    { label: '字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+    { label: '行高', cssProp: 'line-height', value: '20px' },
+  ],
+  范围分隔: [
+    { label: '颜色', cssProp: 'color', token: '--color-foreground-muted', value: '#667085', semanticRef: 'text-tertiary' },
+    { label: '字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+  ],
+  图标: [
+    { label: '颜色', cssProp: 'color', token: '--color-foreground-disabled', value: '#98A2B3', semanticRef: 'text-disabled' },
+    { label: '尺寸', cssProp: 'width / height', value: '16px' },
+  ],
+  触发器: [
+    { label: '背景色', cssProp: 'background', token: '--color-surface', value: '#FFFFFF', semanticRef: 'bg-surface' },
+    { label: '边框色', cssProp: 'border-color', token: '--color-border-default', value: '#E4E7EC', semanticRef: 'border-default' },
+    { label: '圆角', cssProp: 'border-radius', token: '--radius-md', value: '8px' },
+    { label: '左内边距', cssProp: 'padding-left', token: '--spacing-3', value: '12px' },
+    { label: '右内边距', cssProp: 'padding-right', token: '--spacing-2', value: '8px' },
+    { label: '元素间距', cssProp: 'gap', token: '--spacing-2', value: '8px' },
+    { label: '悬浮边框', cssProp: 'border-color', token: '--color-blueGrey-400', value: '#D0D5DD', state: 'hover' },
+    { label: '聚焦边框', cssProp: 'border-color', token: '--color-primary', value: '#56D3BC', semanticRef: 'status-primary', state: 'focus' },
+    { 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' },
+    { label: '透明度', cssProp: 'opacity', value: '0.6', state: 'disabled' },
+  ],
+  面板容器: [
+    { label: '背景色', cssProp: 'background', token: '--color-surface', value: '#FFFFFF', semanticRef: 'bg-surface' },
+    { label: '边框色', cssProp: 'border-color', token: '--color-border-default', value: '#E4E7EC', semanticRef: 'border-default' },
+    { label: '圆角', cssProp: 'border-radius', value: '6px' },
+    { label: '阴影', cssProp: 'box-shadow', value: '0 4px 14px rgba(0,0,0,0.1)' },
+  ],
+  月标题栏: [
+    { 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: '600' },
+    { label: '导航图标', cssProp: 'color', token: '--color-foreground-secondary', value: '#475467', semanticRef: 'text-secondary' },
+    { label: '悬停背景', cssProp: 'background', token: '--color-fill', value: 'rgba(83,96,143,0.07)', semanticRef: 'fill-default', state: 'hover' },
+  ],
+  星期标题: [
+    { label: '颜色', cssProp: 'color', token: '--color-foreground-muted', value: '#667085', semanticRef: 'text-tertiary' },
+    { label: '字号', cssProp: 'font-size', value: '12px' },
+    { label: '字重', cssProp: 'font-weight', value: '600' },
+    { label: '行高', cssProp: 'line-height', value: '16px' },
+  ],
+  日期默认: [
+    { label: '文字色', cssProp: 'color', token: '--color-foreground', value: '#182230', semanticRef: 'text-primary' },
+    { label: '字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+    { label: '格子尺寸', cssProp: 'width / height', value: 'auto / 36px' },
+    { label: '内层选中块', cssProp: 'inner width / height', value: '32px / 32px' },
+  ],
+  日期今天: [
+    { label: '背景色', cssProp: 'background', value: 'rgba(52,59,58,0.05)' },
+    { label: '文字色', cssProp: 'color', token: '--color-primary', value: '#56D3BC', semanticRef: 'status-primary' },
+    { label: '字重', cssProp: 'font-weight', value: '600' },
+  ],
+  日期选中: [
+    { label: '背景色', cssProp: 'background', token: '--color-primary', value: '#56D3BC', semanticRef: 'status-primary' },
+    { label: '文字色', cssProp: 'color', token: '--color-foreground-inverse', value: '#FFFFFF', semanticRef: 'text-inverse' },
+    { label: '圆角', cssProp: 'border-radius', value: '3px' },
+  ],
+  范围高亮: [
+    { label: '背景色', cssProp: 'background', token: '--color-brand-50', value: '#EAFAF6', semanticRef: 'status-primary.bg' },
+    { label: '起止圆角', cssProp: 'border-radius', value: '3px（仅起止端）' },
+  ],
+  时间底栏: [
+    { label: '上边框', cssProp: 'border-top-color', token: '--color-border-default', value: '#E4E7EC', semanticRef: 'border-default' },
+    { label: '日期文字', cssProp: 'color', token: '--color-foreground', value: '#182230', semanticRef: 'text-primary' },
+    { label: '时间文字', cssProp: 'color', token: '--color-foreground-muted', value: '#667085', semanticRef: 'text-tertiary' },
+    { label: '图标色', cssProp: 'color', token: '--color-foreground-secondary', value: '#475467', semanticRef: 'text-secondary' },
+  ],
+  面板尺寸: [
+    { label: '面板宽度', cssProp: 'width', value: 'same as trigger, min 280px' },
+    { label: '纯日期高度', cssProp: 'height', value: '312px' },
+    { label: '日期时间高度', cssProp: 'height', value: '348px' },
+    { label: '日期范围高度', cssProp: 'height', value: '312px' },
+    { label: '日时范围高度', cssProp: 'height', value: '348px' },
+  ],
+  类型宽度: [
+    { label: '日期类宽', cssProp: 'width', value: '300px' },
+    { label: '范围宽度', cssProp: 'width', value: '300px' },
+    { label: '加宽范围', cssProp: 'width', value: '400px' },
+  ],
+};

package/src/_b_end_runtime/components/Empty.jsx

@@ -0,0 +1,141 @@
+import Button from './Button';
+
+import imgFailure       from './empty-assets/failure.svg';
+import imgIdle          from './empty-assets/idle.svg';
+import imgNoResult      from './empty-assets/no-result.svg';
+import imgNotFound      from './empty-assets/not-found.svg';
+import imgSuccess       from './empty-assets/success.svg';
+import imgConstruction  from './empty-assets/construction.svg';
+import imgNoAccess      from './empty-assets/no-access.svg';
+import imgNoContent     from './empty-assets/no-content.svg';
+import imgAdmin1        from './empty-assets/administrator-1.svg';
+import imgAdmin2        from './empty-assets/administrator-2.svg';
+
+/**
+ * Empty — B端空状态占位组件（Tailwind 内联）
+ *
+ * 固定布局：插画 → 文案区 → 操作区，所有内容区域均可按需配置，不传则不渲染。
+ * 通过 props 自由组合出不同场景，见 components.js examples 中的常见用法建议。
+ *
+ * **插画选型建议**：
+ *  - 数据为空       → illustrationType="no-content"
+ *  - 搜索无结果     → illustrationType="no-result"
+ *  - 页面不存在     → illustrationType="not-found"
+ *  - 无权限         → illustrationType="no-access"
+ *  - 加载/网络失败  → illustrationType="failure"
+ *  - 功能建设中     → illustrationType="construction"
+ *
+ * @prop {'no-result'|'no-content'|'not-found'|'no-access'|'failure'|'idle'|'success'|'construction'|'administrator-1'|'administrator-2'} [illustrationType='no-content'] — 插画类型
+ * @prop {string} [title=''] — 标题文案，不传则不渲染标题行
+ * @prop {string} [description=''] — 描述文案，不传则不渲染描述行
+ * @prop {string} [linkPrefix=''] — 内嵌链接前缀文案（如"页面出错了，"），不传则不渲染链接行
+ * @prop {string} [linkText=''] — 内嵌链接可点击文字（如"刷新重试"），不传则不渲染链接行
+ * @prop {Function} [onLinkClick=null] — 链接点击回调
+ * @prop {string} [primaryLabel=''] — 一级按钮文案，不传则不渲染
+ * @prop {Function} [onPrimary=null] — 一级按钮点击回调
+ * @prop {string} [secondaryLabel=''] — 二级按钮文案（outline-black 样式），不传则不渲染
+ * @prop {Function} [onSecondary=null] — 二级按钮点击回调
+ * @prop {string} [tertiaryLabel=''] — 文字按钮文案（text-brand 样式），不传则不渲染
+ * @prop {Function} [onTertiary=null] — 文字按钮点击回调
+ * @prop {'row'|'column'} [buttonLayout='row'] — 按钮排列方向，row 横排 / column 竖排
+ * @prop {string} [className=''] — 自定义类名
+ */
+
+/* ── 插画类型 → 图片资源 ── */
+const ILLUSTRATION_SRC = {
+  'no-result':       imgNoResult,
+  'no-content':      imgNoContent,
+  'not-found':       imgNotFound,
+  'no-access':       imgNoAccess,
+  'failure':         imgFailure,
+  'idle':            imgIdle,
+  'success':         imgSuccess,
+  'construction':    imgConstruction,
+  'administrator-1': imgAdmin1,
+  'administrator-2': imgAdmin2,
+};
+
+/* ── 按钮组排列方向 ── */
+const BUTTON_LAYOUT_CLASS = {
+  row:    'flex-row',
+  column: 'flex-col',
+};
+
+export default function Empty({
+  illustrationType = 'no-content',
+  title = '',
+  description = '',
+  linkPrefix = '',
+  linkText = '',
+  onLinkClick = null,
+  primaryLabel = '',
+  onPrimary = null,
+  secondaryLabel = '',
+  onSecondary = null,
+  tertiaryLabel = '',
+  onTertiary = null,
+  buttonLayout = 'row',
+  className = '',
+}) {
+  const src = ILLUSTRATION_SRC[illustrationType] ?? imgNoContent;
+  const hasActions = primaryLabel || secondaryLabel || tertiaryLabel;
+  const hasLinkLine = linkText;
+
+  return (
+    <div className={[`tfds-empty`, ['flex flex-col items-center gap-6', className].filter(Boolean).join(' ')].filter(Boolean).join(' ')} data-tfds-component="Empty">
+      {/* 插画 */}
+      <img src={src} alt="" className="size-[200px] shrink-0 object-contain" />
+
+      {/* 文案区：标题 + 描述 */}
+      {(title || description) && (
+        <div className="flex flex-col items-center gap-4 text-center">
+          {title && (
+            <p className="text-xl [font-weight:var(--font-semibold)] text-foreground leading-7 w-[400px] max-w-full">
+              {title}
+            </p>
+          )}
+          {description && (
+            <p className="text-sm text-foreground-secondary leading-5 w-[400px] max-w-full">
+              {description}
+            </p>
+          )}
+        </div>
+      )}
+
+      {/* 链接行：轻量错误提示专用（如"页面出错了，刷新试试"） */}
+      {hasLinkLine && (
+        <p className="text-sm text-foreground-secondary leading-5 text-center w-[400px] max-w-full">
+          {linkPrefix}
+          <button
+            type="button"
+            onClick={onLinkClick ?? undefined}
+            className="[font-weight:var(--font-semibold)] text-brand-800 hover:text-brand-900 active:text-brand-950 focus-visible:outline-brand-300 focus-visible:outline-2 focus-visible:outline-offset-1 hover:underline underline-offset-2 cursor-pointer"
+          >
+            {linkText}
+          </button>
+        </p>
+      )}
+
+      {/* 操作区：按钮组 */}
+      {hasActions && (
+        <div className={['flex items-center gap-3', BUTTON_LAYOUT_CLASS[buttonLayout]].join(' ')}>
+          {secondaryLabel && (
+            <Button variant="outline-black" size="md" onClick={onSecondary ?? undefined}>
+              {secondaryLabel}
+            </Button>
+          )}
+          {primaryLabel && (
+            <Button variant="primary" size="md" onClick={onPrimary ?? undefined}>
+              {primaryLabel}
+            </Button>
+          )}
+          {tertiaryLabel && (
+            <Button variant="text-brand" size="md" onClick={onTertiary ?? undefined}>
+              {tertiaryLabel}
+            </Button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,40 @@
+export const EMPTY_TOKEN_MAP = {
+  插画: [
+    { label: '尺寸', cssProp: 'width / height', value: '200px' },
+  ],
+
+  标题: [
+    { label: '字色', cssProp: 'color', token: '--color-foreground', value: '#182230' },
+    { label: '字号', cssProp: 'font-size', token: '--text-xl', value: '20px' },
+    { label: '字重', cssProp: 'font-weight', value: '600' },
+    { label: '行高', cssProp: 'line-height', value: '28px' },
+    { label: '最大宽', cssProp: 'width', value: '400px' },
+  ],
+
+  描述文案: [
+    { label: '字色', cssProp: 'color', token: '--color-foreground-secondary', value: 'rgba(24,34,48,0.6)' },
+    { label: '字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+    { label: '字重', cssProp: 'font-weight', value: '400' },
+    { label: '行高', cssProp: 'line-height', value: '20px' },
+    { label: '最大宽', cssProp: 'width', value: '400px' },
+  ],
+
+  链接文字: [
+    { label: '默认色', cssProp: 'color', token: '--color-brand-800', value: '#129683' },
+    { label: '悬浮色', cssProp: 'color', token: '--color-brand-900', value: '#0D786A', state: 'hover' },
+    { label: '字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+    { label: '字重', cssProp: 'font-weight', value: '600' },
+  ],
+
+  间距: [
+    { label: '纵向间距', cssProp: 'gap', token: '--spacing-6', value: '24px' },
+    { label: '文字区间距', cssProp: 'gap (text area)', token: '--spacing-4', value: '16px' },
+    { label: '按钮间距', cssProp: 'gap (buttons)', token: '--spacing-3', value: '12px' },
+  ],
+
+  引用组件: [
+    { label: '一级按钮', cssProp: '—', value: 'Button primary md' },
+    { label: '二级按钮', cssProp: '—', value: 'Button outline-black md' },
+    { label: '文字按钮', cssProp: '—', value: 'Button text-brand md' },
+  ],
+};