数据目录 F2b / D4 跟进:窄屏卡片里每项前面的字段名不再对读屏隐藏——表头收起后读屏靠它知道是哪一项;宽屏时它是 display:none,不会重复念

This commit is contained in:
ThearchyHelios
2026-10-04 03:18:38 +08:00
parent 042ae3161f
commit 67136f9798
2 changed files with 6 additions and 3 deletions
+5 -2
View File
@@ -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 (
// 窄框下没填的项不占行(编辑时照常列出来好填)
<td className={clsx('px-2 py-1.5 align-top', NARROW.cell, !it && !editing && '@max-[40rem]:hidden')} data-cell={f} data-status={it?.status}>
<span className={NARROW.label} aria-hidden>{CT.columnHead[f]}</span>
<span className={NARROW.label}>{CT.columnHead[f]}</span>
<div className="flex min-w-0 flex-1 items-start gap-1.5">
<div className="min-w-0 flex-1">{editing ? input : view}</div>
{it && !changed && (
+1 -1
View File
@@ -712,7 +712,7 @@ function RelationList({ relations, busy, targetOf, onOpen, onReview }: {
if (!relations.length) return <p className="rounded-lg border px-3 py-4 text-xs text-faint" data-relations-empty="">{CT.noRelations}</p>
// 窄框(< 40rem)下和列表格一样排成卡片:状态在第一行,下面每项一行「字段名 值」,不用横向滚动
const cell = clsx('px-2 py-1.5 align-top', NARROW.cell)
const label = (text: string) => <span className={NARROW.label} aria-hidden>{text}</span>
const label = (text: string) => <span className={NARROW.label}>{text}</span>
return (
<div className="@container relative overflow-x-auto rounded-lg border" data-catalog-relations="">
<table className="w-full border-collapse text-xs @max-[40rem]:block @min-[40rem]:min-w-[640px]">