@tfdesign/b-end 1.0.15 → 1.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tfdesign/b-end",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "private": false,
   "type": "module",
   "description": "TFDS B-end React components + Tailwind v4 theme.css; self-contained npm install (no monorepo clone required).",
@@ -30,7 +30,7 @@
     "access": "public"
   },
   "bin": {
-    "tfds-setup": "./scripts/setup.mjs"
+    "tfds-setup": "scripts/setup.mjs"
   },
   "scripts": {
     "prepack": "node ../../scripts/generate-tfds-b-end-bundle.mjs && node ../../scripts/generate-tfds-b-end-types.mjs",

package/skills/tfds/LAYOUT_RULES.md

@@ -46,7 +46,7 @@ TFDS 是**桌面优先**的 B 端工具产品，响应式策略和 C 端不同
 | `1280 × 768` | 筛选栏、Tabs、按钮组、表格工具条不溢出；底部操作 / 输入区可达 |
 | `1024 × 768` | 次要侧栏允许折叠 / 收窄 / 内滚；主内容仍可完成核心任务 |
 
-⛔ **禁止**通过浏览器缩放、隐藏关键控件或让 body 横向滚动来掩盖布局问题。  
+⛔ **禁止**通过浏览器缩放、隐藏关键控件或让 body 横向滚动来掩盖布局问题。
 ✅ 横向超宽内容只能在对应组件 / 面板内部滚动，例如 Table、代码区、Tabs viewport、InfoDisplayPanel 栏内内容。
 
 ---
@@ -335,7 +335,7 @@ prompt editor / prompt workspace / runtime / run result /
 
 ### 1.5.5 AI 入口页（ChatHomePagePattern）背景与白卡边界（强约束）
 
-AI 入口页的核心是「**从 0 发起任务**」：用户第一步是输入一句需求 / 搜索助手 / 从模板开始。它的视觉应该是**浅灰大背景承载整页氛围**，并在灰底上直接组织 Hero、筛选行与卡片网格。  
+AI 入口页的核心是「**从 0 发起任务**」：用户第一步是输入一句需求 / 搜索助手 / 从模板开始。它的视觉应该是**浅灰大背景承载整页氛围**，并在灰底上直接组织 Hero、筛选行与卡片网格。
 ⚠️ 这里最常见的误用是：为了“看起来更像后台”，在右侧内容区外又包了一整张白色大卡片容器，导致页面层级变成“灰底 → 大白卡 → 卡片”，整体像嵌套面板，入口页气质被破坏。
 
 - ✅ **正确**：灰底为主，白卡只出现在**推荐卡片本身**（`<Card color="white" />`）

package/skills/tfds/components.index.json

@@ -1,7 +1,7 @@
 {
   "system": "b-end",
   "skill": "tfds",
-  "generatedAt": "2026-05-13T11:12:08.290Z",
+  "generatedAt": "2026-05-13T13:51:39.617Z",
   "summary": "B 端 COMPONENTS 37 条 + 列表页模板 4 + PATTERNS 6；import 一律来自 @tfdesign/b-end。",
   "components": [
     {

package/skills/tfds/components.summary.json

@@ -1,7 +1,7 @@
 {
   "system": "b-end",
   "skill": "tfds",
-  "generatedAt": "2026-05-13T11:12:08.290Z",
+  "generatedAt": "2026-05-13T13:51:39.617Z",
   "purpose": "轻量组件与页面模板目录。AI 先读本文件做选型；确定命中组件后，再到 components.index.json 按 id 读取 props / rules / examples。",
   "counts": {
     "total": 47,

package/src/_b_end_runtime/components/Table.jsx

@@ -135,16 +135,16 @@ const TABLE_SHELL = [
 ].join(' ');
 
 const TABLE = 'flex w-full min-w-0 flex-1 min-h-0 flex-col';
-const TABLE_VIEWPORT = 'flex flex-col flex-1 min-h-0 w-full overflow-x-auto overflow-y-hidden';
+const TABLE_VIEWPORT = 'flex flex-col flex-1 min-h-0 w-full overflow-auto';
 const TABLE_CONTENT = 'flex w-full flex-1 min-h-0 flex-col';
-const TABLE_BODY = 'flex-1 min-h-0 w-full overflow-y-auto';
+const TABLE_BODY = 'flex-1 min-h-0 w-full';
 
 /* ── 表头 / 单元格 ──
  * Table 自身不带任何背景色，行/单元格全部透明，由外部容器决定底色。
  * sticky 表头与固定列因此在滚动时会与内容色一致；如业务需要遮挡，
  * 请在外层容器设置背景色（白卡 / 灰底 page 等）。
  */
-const HEADER_ROW = 'grid w-full min-w-0';
+const HEADER_ROW = 'sticky top-0 z-40 grid w-full min-w-0 bg-surface';
 const BODY_ROW = 'grid w-full min-w-0';
 
 const HEADER_CELL = [
@@ -226,6 +226,7 @@ const PAGE_ELLIPSIS = 'inline-flex size-8 items-center justify-center text-sm fo
 
 /* ── 空态 ── */
 const EMPTY_CELL = 'px-4 py-10 text-center text-sm font-normal leading-5 text-foreground-muted';
+const PINNED_SURFACE_BACKGROUND = 'var(--color-surface, #FFFFFF)';
 
 /* ── 卡片型表单 ── */
 const CARD_FORM_BODY = 'flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto';
@@ -318,6 +319,34 @@ function getColumnTemplateMinWidth(columns) {
   return columns.reduce((sum, column) => sum + resolveColumnMetrics(column).minWidth, 0);
 }
 
+function getPinnedColumnStates(columns, fixedColumnsMode) {
+  const states = columns.map(() => null);
+
+  if (!columns.length || fixedColumnsMode === 'none') {
+    return states;
+  }
+
+  const lastColumnIndex = columns.length - 1;
+
+  if (isFirstColumnFixed(fixedColumnsMode)) {
+    states[0] = {
+      side: 'left',
+      offset: 0,
+      edge: 'right',
+    };
+  }
+
+  if (isLastColumnFixed(fixedColumnsMode) && lastColumnIndex > 0) {
+    states[lastColumnIndex] = {
+      side: 'right',
+      offset: 0,
+      edge: 'left',
+    };
+  }
+
+  return states;
+}
+
 function buildCellClass(baseClass, sizeKey, extraClass = '') {
   return [
     baseClass,
@@ -327,11 +356,9 @@ function buildCellClass(baseClass, sizeKey, extraClass = '') {
 }
 
 function getPinnedCellStyle({
-  columnIndex,
-  columnsLength,
   align,
   minHeight,
-  fixedColumnsMode,
+  pinnedState,
   isHeader = false,
 }) {
   const style = {
@@ -339,24 +366,28 @@ function getPinnedCellStyle({
     textAlign: align || 'left',
   };
 
-  const fixFirst = isFirstColumnFixed(fixedColumnsMode) && columnIndex === 0;
-  const fixLast = isLastColumnFixed(fixedColumnsMode) && columnIndex === columnsLength - 1;
-
-  if (!fixFirst && !fixLast) {
+  if (!pinnedState) {
     return style;
   }
 
   style.position = 'sticky';
-  style.background = 'inherit';
-  style.zIndex = isHeader ? 30 : 20;
+  style.background = PINNED_SURFACE_BACKGROUND;
+  style.backgroundClip = 'padding-box';
+  style.zIndex = isHeader ? 50 : 30;
+
+  if (pinnedState.side === 'left') {
+    style.left = `${pinnedState.offset}px`;
+  }
+
+  if (pinnedState.side === 'right') {
+    style.right = `${pinnedState.offset}px`;
+  }
 
-  if (fixFirst) {
-    style.left = 0;
+  if (pinnedState.edge === 'right') {
     style.boxShadow = '2px 0 0 rgba(45, 66, 107, 0.06)';
   }
 
-  if (fixLast) {
-    style.right = 0;
+  if (pinnedState.edge === 'left') {
     style.boxShadow = '-2px 0 0 rgba(45, 66, 107, 0.06)';
   }
 
@@ -1107,6 +1138,10 @@ export default function Table({
     : [pageSize];
   const columnTemplate = useMemo(() => buildColumnGridTemplate(columns), [columns]);
   const columnTemplateMinWidth = useMemo(() => getColumnTemplateMinWidth(columns), [columns]);
+  const pinnedColumnStates = useMemo(
+    () => getPinnedColumnStates(columns, fixedColumnsMode),
+    [columns, fixedColumnsMode],
+  );
   const selectValue = Number.isNaN(Number(pageSize)) ? pageSize : Number(pageSize);
   const selectOptions = useMemo(() => {
     const normalized = Array.from(new Set([...pageSizeOptions, pageSize]));
@@ -1269,7 +1304,7 @@ export default function Table({
             <div className={TABLE} role="grid" aria-rowcount={visibleDataSource.length + 1} aria-colcount={columns.length}>
               <div className={HEADER_ROW} role="row" style={{ gridTemplateColumns: columnTemplate }}>
                 {columns.map((column, columnIndex) => (
-                    <div
+                  <div
                     key={column.key || column.dataIndex || column.title}
                     className={[
                       HEADER_CELL,
@@ -1277,11 +1312,9 @@ export default function Table({
                     ].join(' ')}
                     role="columnheader"
                     style={getPinnedCellStyle({
-                      columnIndex,
-                      columnsLength: columns.length,
                       align: column.align,
                       minHeight: HEADER_MIN_HEIGHT[normalizeCellSize(column.cellSize)] || HEADER_MIN_HEIGHT.default,
-                      fixedColumnsMode,
+                      pinnedState: pinnedColumnStates[columnIndex],
                       isHeader: true,
                     })}
                   >
@@ -1317,11 +1350,9 @@ export default function Table({
                             )}
                             role="gridcell"
                             style={getPinnedCellStyle({
-                              columnIndex,
-                              columnsLength: columns.length,
                               align: column.align,
                               minHeight: getTypeMinHeight(normalizeColumnType(column.type), normalizeCellSize(column.cellSize)),
-                              fixedColumnsMode,
+                              pinnedState: pinnedColumnStates[columnIndex],
                             })}
                           >
                             <div className="w-full min-w-0">

package/src/_b_end_runtime/preview-registry.jsx

@@ -4453,6 +4453,7 @@ export const PREVIEW_REGISTRY = {
     hideBaseVariantControl: true,
 
     getPreviewAreaStyle: () => ({
+      background: '#FFFFFF',
       alignItems: 'stretch',
       justifyContent: 'flex-start',
       padding: '24px',