diff --git a/frontend/src/pages/catalog/ColumnTable.tsx b/frontend/src/pages/catalog/ColumnTable.tsx index 26f49b9c..cec5a1ba 100644 --- a/frontend/src/pages/catalog/ColumnTable.tsx +++ b/frontend/src/pages/catalog/ColumnTable.tsx @@ -24,7 +24,10 @@ import type { ColumnDraft, ColumnField } from './model' // 不按视口:宽屏左右两栏时右栏也可能很窄。 // =========================================================================== -/** 窄框下的卡片式排法(容器查询,框宽 < 40rem 时生效)。表格元素改成块,表头藏起来,每格前面补上字段名 */ +/** + * 窄框下的卡片式排法(容器查询,框宽 < 40rem 时生效)。表格元素改成块,表头藏起来,每格前面补上字段名。 + * 字段名宽屏时 display:none,读屏不重复念;窄屏时表头藏了,读屏靠它知道是哪一项 + */ export const NARROW = { table: '@max-[40rem]:block @min-[40rem]:min-w-[860px] @min-[40rem]:table-fixed', head: '@max-[40rem]:hidden', @@ -121,7 +124,7 @@ const ColumnRow = memo(function ColumnRow({ col, editing, draft, initial, proble return ( // 窄框下没填的项不占行(编辑时照常列出来好填)
{CT.noRelations}
// 窄框(< 40rem)下和列表格一样排成卡片:状态在第一行,下面每项一行「字段名 值」,不用横向滚动 const cell = clsx('px-2 py-1.5 align-top', NARROW.cell) - const label = (text: string) => {text} + const label = (text: string) => {text} return (