fix: intake 所有工作区表格表头 sticky 固定

- 所有 workspace 表格 thead 添加 sticky top-0 z-10,滚动时表头固定
- 外层容器 overflow-hidden 改为 overflow-auto,配合滚动生效
- 基础信息 SKU 表格合并双层 div 为单层,添加 max-h-[60vh] 高度约束
- BOM 表格同步添加 sticky thead
This commit is contained in:
WuYongJie 2026-06-12 18:40:06 +08:00
parent e7d2c8626c
commit e1b78d602e
11 changed files with 25 additions and 29 deletions

View File

@ -124,7 +124,7 @@ export function FinishedSampleShipmentWorkspace({
</div>
</div>
<div className="min-h-0 min-w-0 flex-1 overflow-hidden p-3">
<div className="min-h-0 min-w-0 flex-1 overflow-auto p-3">
{allRows.length === 0 ? (
<div className="flex min-h-[260px] items-center justify-center rounded-apple-xl border border-dashed border-apple-separator text-sm text-apple-label-secondary">
当前还没有 SKU 信息,先维护 SKU 后再进行成品寄样。
@ -134,9 +134,9 @@ export function FinishedSampleShipmentWorkspace({
当前批次还没有 SKU 信息。
</div>
) : (
<div className="non-integrated-table-scroll non-integrated-workspace-table-scroll h-full max-w-full rounded-apple-lg border border-apple-separator">
<div className="non-integrated-table-scroll non-integrated-workspace-table-scroll h-full max-w-full rounded-apple-lg border border-apple-separator" style={{ overflowY: 'visible' }}>
<table className="min-w-[1760px] w-full border-collapse text-xs">
<thead className="bg-apple-bg-secondary/40 text-apple-label-secondary">
<thead className="sticky top-0 z-10 bg-apple-bg-primary text-apple-label-secondary">
<tr>
{[
"寄样",

View File

@ -89,7 +89,7 @@ export function FirstQualityWorkspace({
</div>
</div>
<div className="min-h-0 min-w-0 flex-1 overflow-hidden p-3">
<div className="min-h-0 min-w-0 flex-1 overflow-auto p-3">
{allRows.length === 0 ? (
<div className="flex min-h-[260px] items-center justify-center rounded-apple-xl border border-dashed border-apple-separator text-sm text-apple-label-secondary">
当前还没有 SKU 信息,先维护 SKU 后再进行首批质检。
@ -99,9 +99,9 @@ export function FirstQualityWorkspace({
当前批次还没有 SKU 信息。
</div>
) : (
<div className="non-integrated-table-scroll non-integrated-workspace-table-scroll h-full max-w-full rounded-apple-lg border border-apple-separator">
<div className="non-integrated-table-scroll non-integrated-workspace-table-scroll h-full max-w-full rounded-apple-lg border border-apple-separator" style={{ overflowY: 'visible' }}>
<table className="min-w-[2120px] w-full border-collapse text-xs">
<thead className="bg-apple-bg-secondary/40 text-apple-label-secondary">
<thead className="sticky top-0 z-10 bg-apple-bg-primary text-apple-label-secondary">
<tr>
{[
"批次",

View File

@ -96,7 +96,7 @@ export function ProductLimitWorkspace({
</div>
</div>
<div className="min-h-0 min-w-0 flex-1 overflow-hidden p-3">
<div className="min-h-0 min-w-0 flex-1 overflow-auto p-3">
{allRows.length === 0 ? (
<div className="flex min-h-[260px] items-center justify-center rounded-apple-xl border border-dashed border-apple-separator text-sm text-apple-label-secondary">
当前还没有 SKU 信息,先维护 SKU 后再填写产品限价。
@ -106,9 +106,9 @@ export function ProductLimitWorkspace({
当前批次还没有 SKU 信息。
</div>
) : (
<div className="non-integrated-table-scroll non-integrated-workspace-table-scroll h-full max-w-full rounded-apple-lg border border-apple-separator">
<div className="non-integrated-table-scroll non-integrated-workspace-table-scroll h-full max-w-full rounded-apple-lg border border-apple-separator" style={{ overflowY: 'visible' }}>
<table className="min-w-[1480px] w-full border-collapse text-xs">
<thead className="bg-apple-bg-secondary/40 text-apple-label-secondary">
<thead className="sticky top-0 z-10 bg-apple-bg-primary text-apple-label-secondary">
<tr>
{[
"产品图片",

View File

@ -113,7 +113,7 @@ export function ProductPricingWorkspace({
</div>
</div>
<div className="min-h-0 min-w-0 flex-1 overflow-hidden p-3">
<div className="min-h-0 min-w-0 flex-1 overflow-auto p-3">
{allRows.length === 0 ? (
<div className="flex min-h-[260px] items-center justify-center rounded-apple-xl border border-dashed border-apple-separator text-sm text-apple-label-secondary">
当前还没有 SKU 信息,先维护 SKU 后再核价。
@ -123,9 +123,9 @@ export function ProductPricingWorkspace({
当前批次还没有 SKU 信息。
</div>
) : (
<div className="non-integrated-table-scroll non-integrated-workspace-table-scroll h-full max-w-full rounded-apple-lg border border-apple-separator">
<div className="non-integrated-table-scroll non-integrated-workspace-table-scroll h-full max-w-full rounded-apple-lg border border-apple-separator" style={{ overflowY: 'visible' }}>
<table className="min-w-[1280px] w-full border-collapse text-xs">
<thead className="bg-apple-bg-secondary/40 text-apple-label-secondary">
<thead className="sticky top-0 z-10 bg-apple-bg-primary text-apple-label-secondary">
<tr>
{[
"型号",

View File

@ -85,7 +85,7 @@ export function SampleMeasurementWorkspace({
</div>
</div>
<div className="min-h-0 min-w-0 flex-1 overflow-hidden p-3">
<div className="min-h-0 min-w-0 flex-1 overflow-auto p-3">
{allRows.length === 0 ? (
<div className="flex min-h-[260px] items-center justify-center rounded-apple-xl border border-dashed border-apple-separator text-sm text-apple-label-secondary">
当前还没有 SKU 信息,先维护 SKU 后再进行样包测量。
@ -95,9 +95,9 @@ export function SampleMeasurementWorkspace({
当前批次还没有 SKU 信息。
</div>
) : (
<div className="non-integrated-table-scroll non-integrated-workspace-table-scroll h-full max-w-full rounded-apple-lg border border-apple-separator">
<div className="non-integrated-table-scroll non-integrated-workspace-table-scroll h-full max-w-full rounded-apple-lg border border-apple-separator" style={{ overflowY: 'visible' }}>
<table className="min-w-[2120px] w-full border-collapse text-xs">
<thead className="bg-apple-bg-secondary/40 text-apple-label-secondary">
<thead className="sticky top-0 z-10 bg-apple-bg-primary text-apple-label-secondary">
<tr>
{[
"型号",

View File

@ -67,10 +67,9 @@ export function ComponentSkuTable({
onSelectComponentCode: (code: string) => void;
}) {
return (
<div className="overflow-hidden rounded-apple-lg border border-apple-separator">
<div className="non-integrated-table-scroll overflow-x-auto">
<div className="non-integrated-table-scroll non-integrated-workspace-table-scroll max-h-[60vh] max-w-full rounded-apple-lg border border-apple-separator">
<table className="min-w-[1660px] w-full text-left text-xs">
<thead className="bg-apple-bg-secondary/60 text-apple-label-secondary">
<thead className="sticky top-0 z-10 bg-apple-bg-primary text-apple-label-secondary">
<tr>
{COMPONENT_SKU_TABLE_HEADERS.map((label) => (
<th
@ -165,7 +164,6 @@ export function ComponentSkuTable({
)}
</tbody>
</table>
</div>
</div>
);
}

View File

@ -50,14 +50,13 @@ export function SkuInfoTableShell({
(showActionColumn ? 1 : 0);
return (
<div className="overflow-hidden rounded-apple-lg border border-apple-separator">
<div className="non-integrated-table-scroll overflow-x-auto">
<div className="non-integrated-table-scroll non-integrated-workspace-table-scroll max-h-[60vh] max-w-full rounded-apple-lg border border-apple-separator">
<table
className={`${
isSeriesComponentDetailProduct ? "min-w-[2260px]" : "min-w-[2180px]"
} w-full text-left text-xs`}
>
<thead className="bg-apple-bg-secondary/60 text-apple-label-secondary">
<thead className="sticky top-0 z-10 bg-apple-bg-primary text-apple-label-secondary">
<tr>
{headers.map((label) => (
<th
@ -83,7 +82,6 @@ export function SkuInfoTableShell({
{children}
</tbody>
</table>
</div>
</div>
);
}

View File

@ -28,7 +28,7 @@ export function BomRowsTableShell({
className="w-full min-w-full text-left text-xs"
style={{ minWidth: `${tableMinWidth}px` }}
>
<thead className="bg-apple-bg-secondary/60 text-apple-label-secondary">
<thead className="sticky top-0 z-10 bg-apple-bg-primary text-apple-label-secondary">
<tr>
{columns.map((column) => (
<th

View File

@ -96,9 +96,9 @@ export function ProductFactoryInfoTable({
};
return (
<div className="non-integrated-table-scroll non-integrated-workspace-table-scroll h-full max-w-full rounded-apple-lg border border-apple-separator">
<div className="non-integrated-table-scroll non-integrated-workspace-table-scroll h-full max-w-full rounded-apple-lg border border-apple-separator" style={{ overflowY: 'visible' }}>
<table className="min-w-[2160px] w-full border-collapse text-xs">
<thead className="bg-apple-bg-secondary/40 text-apple-label-secondary">
<thead className="sticky top-0 z-10 bg-apple-bg-primary text-apple-label-secondary">
<tr>
{[
"定厂",

View File

@ -8,9 +8,9 @@ export function ProductFactorySkuInfoTable({
rows: NonIntegratedFactoryRow[];
}) {
return (
<div className="non-integrated-table-scroll non-integrated-workspace-table-scroll h-full max-w-full rounded-apple-lg border border-apple-separator">
<div className="non-integrated-table-scroll non-integrated-workspace-table-scroll h-full max-w-full rounded-apple-lg border border-apple-separator" style={{ overflowY: 'visible' }}>
<table className="min-w-[980px] w-full border-collapse text-xs">
<thead className="bg-apple-bg-secondary/40 text-apple-label-secondary">
<thead className="sticky top-0 z-10 bg-apple-bg-primary text-apple-label-secondary">
<tr>
{[
"定厂",

View File

@ -91,7 +91,7 @@ export function ProductFactoryWorkspace({
/>
</div>
<div className="min-h-0 min-w-0 flex-1 overflow-hidden p-3">
<div className="min-h-0 min-w-0 flex-1 overflow-auto p-3">
{allRows.length === 0 ? (
<div className="flex min-h-[260px] items-center justify-center rounded-apple-xl border border-dashed border-apple-separator text-sm text-apple-label-secondary">
当前还没有 SKU 信息,先维护 SKU 后再定厂。