fix(intake): polish development toolbar controls

This commit is contained in:
WuYongJie 2026-06-30 14:31:39 +08:00
parent 4629eea670
commit 70594a287d

View File

@ -98,11 +98,15 @@ function createRestoredNonIntegratedProduct(
const PENDING_PAGE_SIZE = 50;
const TABLE_ACTION_BUTTON_BASE =
"!h-8 !min-h-8 !w-8 !rounded-md !px-0 !py-0 !shadow-none";
"!h-8 !min-h-8 !w-8 !rounded-apple-md !px-0 !py-0 !shadow-none";
const TABLE_ACTION_BUTTON_SECONDARY = `${TABLE_ACTION_BUTTON_BASE} !border-zinc-200 !bg-white !text-zinc-500 hover:!border-zinc-300 hover:!bg-zinc-50 hover:!text-zinc-950 focus:!border-zinc-400 disabled:!border-zinc-100 disabled:!bg-zinc-50 disabled:!text-zinc-300`;
const TABLE_ACTION_BUTTON_PRIMARY = `${TABLE_ACTION_BUTTON_BASE} !border-zinc-950 !bg-zinc-950 !text-white hover:!border-zinc-800 hover:!bg-zinc-800 focus:!border-zinc-600 disabled:!border-zinc-200 disabled:!bg-zinc-200 disabled:!text-zinc-400`;
const INTAKE_PRIMARY_BUTTON_CLASS =
"!border-zinc-950 !bg-zinc-950 !bg-none !text-white !shadow-none hover:!border-zinc-800 hover:!bg-zinc-800 focus:!border-zinc-600 disabled:!border-zinc-200 disabled:!bg-zinc-200 disabled:!text-zinc-400";
const INTAKE_TOOLBAR_BUTTON_CLASS =
"!h-8 !min-h-8 !rounded-apple-md !px-3 text-xs max-md:!h-7 max-md:!min-h-7 max-md:!px-2 max-md:text-[11px]";
const INTAKE_TOOLBAR_DARK_SELECT_CLASS =
"h-8 w-full rounded-apple-md border border-zinc-950 bg-zinc-950 px-3 text-xs font-apple-medium text-white shadow-none outline-none transition-colors max-md:h-7 max-md:px-2 max-md:text-[11px]";
const TABLE_HEADER_CELL_CLASS =
"sticky top-0 z-10 bg-apple-bg-primary px-3 py-2.5 font-apple-medium whitespace-nowrap";
const TABLE_HEADER_CENTER_CELL_CLASS =
@ -891,13 +895,22 @@ export function NonIntegratedPendingDetail({
const filterFields = isStockDevelopmentList
? stockFilterFields
: seriesProductFilterFields;
const createActionCount = [
onOpenNewNonIntegratedProductWorkspace,
onOpenSecondaryNewNonIntegratedProductWorkspace,
].filter(Boolean).length;
const hasMultipleCreateActions = createActionCount > 1;
const filterGridColumnClass =
filterFields.length === 8
? hasCreateAction
? "md:grid-cols-[116px_repeat(8,minmax(0,1fr))_72px_216px]"
? hasMultipleCreateActions
? "md:grid-cols-[116px_repeat(8,minmax(0,1fr))_72px_216px]"
: "md:grid-cols-[116px_repeat(8,minmax(0,1fr))_72px_132px]"
: "md:grid-cols-[116px_repeat(8,minmax(0,1fr))_72px]"
: hasCreateAction
? "md:grid-cols-[116px_repeat(7,minmax(0,1fr))_72px_216px]"
? hasMultipleCreateActions
? "md:grid-cols-[116px_repeat(7,minmax(0,1fr))_72px_216px]"
: "md:grid-cols-[116px_repeat(7,minmax(0,1fr))_72px_132px]"
: "md:grid-cols-[116px_repeat(7,minmax(0,1fr))_72px]";
const quickScopes: Array<{ key: NonIntegratedQuickScope; label: string }> = [
{ key: "all", label: "全部" },
@ -927,7 +940,7 @@ export function NonIntegratedPendingDetail({
);
setCurrentPage(1);
}}
className="h-8 w-full rounded-apple-md border border-zinc-950 bg-zinc-950 px-2.5 text-xs font-apple-medium text-white outline-none max-md:h-7 max-md:px-2 max-md:text-[11px]"
className={INTAKE_TOOLBAR_DARK_SELECT_CLASS}
>
{quickScopes.map((scope) => (
<option key={scope.key} value={scope.key}>
@ -979,7 +992,7 @@ export function NonIntegratedPendingDetail({
<div className="flex min-w-[68px] items-end md:min-w-0">
<Button
size="small"
className={`h-8 w-full text-xs max-md:!h-7 max-md:!min-h-7 max-md:px-2 max-md:text-[11px] ${INTAKE_PRIMARY_BUTTON_CLASS}`}
className={`${INTAKE_TOOLBAR_BUTTON_CLASS} w-full ${INTAKE_PRIMARY_BUTTON_CLASS}`}
onClick={() => {
setAppliedQuery(queryDraft);
setCurrentPage(1);
@ -989,11 +1002,17 @@ export function NonIntegratedPendingDetail({
</Button>
</div>
{hasCreateAction ? (
<div className="flex min-w-[172px] items-end justify-end gap-2 max-md:min-w-[126px] md:min-w-0">
<div
className={`flex items-end justify-end gap-2 md:min-w-0 ${
hasMultipleCreateActions
? "min-w-[172px] max-md:min-w-[126px]"
: "min-w-[118px] max-md:min-w-[104px]"
}`}
>
{onOpenNewNonIntegratedProductWorkspace ? (
<Button
size="small"
className={`h-8 min-w-0 flex-1 px-3 text-xs max-md:!h-7 max-md:!min-h-7 max-md:px-2 max-md:text-[11px] ${INTAKE_PRIMARY_BUTTON_CLASS}`}
className={`${INTAKE_TOOLBAR_BUTTON_CLASS} min-w-0 flex-1 ${INTAKE_PRIMARY_BUTTON_CLASS}`}
onClick={onOpenNewNonIntegratedProductWorkspace}
>
<Plus className="h-3.5 w-3.5" aria-hidden="true" />
@ -1004,7 +1023,7 @@ export function NonIntegratedPendingDetail({
secondaryCreateButtonLabel ? (
<Button
size="small"
className={`h-8 min-w-0 flex-1 px-3 text-xs max-md:!h-7 max-md:!min-h-7 max-md:px-2 max-md:text-[11px] ${INTAKE_PRIMARY_BUTTON_CLASS}`}
className={`${INTAKE_TOOLBAR_BUTTON_CLASS} min-w-0 flex-1 ${INTAKE_PRIMARY_BUTTON_CLASS}`}
onClick={onOpenSecondaryNewNonIntegratedProductWorkspace}
>
<Plus className="h-3.5 w-3.5" aria-hidden="true" />