问题:侧栏贴左边,内容区却用 mx-auto max-w-6xl 居中,窗口一宽就出现 "侧栏到内容之间一大片空白、内容右侧又一大片空白"的割裂感。2K 屏上尤其明显。 做法(用户给的两个方向里选"侧栏贴边 + 内容自适应"): - AppShell 内容区去掉居中与固定宽度,改为随窗口铺开,断点加宽内边距 (lg 32 / xl 48 / 2xl 64),侧栏在 xl 从 240 加宽到 264 - 宽了之后不能只是把元素拉长,所以同步改成"用宽度"而不是"被拉长": - 任务行:md 以上标题左、状态/优先级/截止/标签右对齐成一行,窄屏仍折两行 - 知识、工单列表:md 两列 / 2xl 三列,卡片不再横跨整屏 - 看板本来就是四等分列,自适应后自然铺满 - PageHeader 的描述文字限 max-w-3xl,宽屏下不出现过长的行宽 e2e/shots.mjs 支持 VIEWPORT=2560x1400 SUFFIX=-wide 覆盖视口,用来核对宽屏。 三个 e2e 复跑全绿;tsc 0 错,构建 242.02 kB / gzip 76.78 kB。
This commit is contained in:
@@ -256,16 +256,17 @@ export function TasksPage() {
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="min-w-0 flex-1">
|
||||
{/* 宽屏把元信息推到右侧,一行读完;窄屏仍折到标题下面 */}
|
||||
<div className="min-w-0 flex-1 md:flex md:items-center md:gap-3">
|
||||
<button
|
||||
className={`block w-full truncate text-left text-sm transition-colors ${
|
||||
className={`block w-full truncate text-left text-sm transition-colors md:flex-1 ${
|
||||
done ? "text-ink-400 line-through" : "text-ink-900 hover:text-primary-700"
|
||||
}`}
|
||||
onClick={() => setOpenId(item.id)}
|
||||
>
|
||||
{item.title}
|
||||
</button>
|
||||
<div className="mt-1.5 flex flex-wrap items-center gap-1.5 text-2xs">
|
||||
<div className="mt-1.5 flex flex-wrap items-center gap-1.5 text-2xs md:mt-0 md:shrink-0 md:justify-end">
|
||||
<StatusPill status={item.status} label={STATUS_LABEL[item.status]} />
|
||||
{item.priority > 0 && (
|
||||
<span className="chip">
|
||||
|
||||
Reference in New Issue
Block a user