mirror of
https://github.com/ThearchyHelios/AgentLab.git
synced 2026-11-15 00:41:59 +00:00
数据目录 F2b / D4 跟进:窄屏卡片里每项前面的字段名不再对读屏隐藏——表头收起后读屏靠它知道是哪一项;宽屏时它是 display:none,不会重复念
This commit is contained in:
@@ -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 && (
|
||||
|
||||
@@ -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]">
|
||||
|
||||
Reference in New Issue
Block a user