fix(web): 宽屏下侧栏贴边而内容固定居中,中间空出一大块
CI / backend (push) Canceled after 0s

问题:侧栏贴左边,内容区却用 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:
dadao
2026-10-28 22:49:49 +08:00
parent aa396f2c26
commit c94e0424ed
6 changed files with 27 additions and 12 deletions
+1 -1
View File
@@ -221,7 +221,7 @@ export function KnowledgePage() {
/>
</div>
) : (
<ul className="space-y-2">
<ul className="grid gap-2 md:grid-cols-2 2xl:grid-cols-3">
{docs.map((d) => (
<li
key={d.id}
+4 -3
View File
@@ -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">
+1 -1
View File
@@ -149,7 +149,7 @@ export function TicketsPage() {
/>
</div>
) : (
<ul className="space-y-2">
<ul className="grid gap-2 md:grid-cols-2 2xl:grid-cols-3">
{tickets.map((t) => (
<li
key={t.id}