console: 分栏改独立容器，修模块间空白间距
PR #130 的共享网格行是根因：一行高度由该行最高模块决定， 任务列表撑高第 2 行后，对话（第 3 行）只能从任务列表底下开始， 派发/环境等短模块下面空出一大截；align-items:start 只让盒子 不拉伸，拉不上来下一行。 修法：App.tsx 把模块包进三个独立 .dash-col（左：任务+项目， 中：派发+对话，右：环境+Workers+技能+自动化+分诊+管理区+ API Key），栏内 flex 纵向紧贴；中屏两栏（左+中上右下）、宽屏 三栏并排；窄屏用 display:contents + 每模块 order 恢复原单列 顺序。构建产物 316093 字节，sha 与构建输出一致。
This commit is contained in:
host committed
1 parent
e7f7edf5c2
commit
e5aa5c2acb
3 files changed
+118
-93
No files matched your search
@@ -22,10 +22,19 @@ import TriageSection from "./sections/TriageSection";
|
||||
// Layout only: ONE scrollable console page in GitHub Primer style —
|
||||
// a dark header bar (name + real connection status + health + quota
|
||||
// + refresh stamp + anchor nav as header links), a data-cards row,
|
||||
// then every module as a bordered section in order. No icon-rail
|
||||
// column, no left list column, no right panel column, no view
|
||||
// switching. Detail/context panels sit under their own sections
|
||||
// below (detail under 对话, members under 项目, and so on).
|
||||
// then every module as a bordered section. At medium/wide widths the
|
||||
// sections live in three independent column wrappers (left: tasks +
|
||||
// projects; middle: dispatch + conversation; right: environments +
|
||||
// Workers + skills + automations + triage + admin + API key) so each
|
||||
// column's modules stack tightly on their own, instead of sharing
|
||||
// grid rows with the other columns — shared rows were the blank-gap
|
||||
// bug (a tall task list in row 2 held the whole row tall, so the
|
||||
// conversation in row 3 started far below a short dispatch box).
|
||||
// At narrow width the wrappers use display:contents plus an explicit
|
||||
// order per section, so the single column stacks in the original
|
||||
// DOM order (dispatch, tasks, conversation, projects, …), not in
|
||||
// column-group order. Detail/context panels sit under their own
|
||||
// sections below (detail under 对话, members under 项目, and so on).
|
||||
const NAV: Array<[string, string]> = [
|
||||
["#sec-dispatch", "派发"], ["#sec-tasks", "任务"], ["#sec-conv", "对话"],
|
||||
["#sec-projects", "项目"], ["#sec-env", "环境"], ["#sec-workers", "Workers"],
|
||||
@@ -78,48 +87,54 @@ export default function App() {
|
||||
<TopBar />
|
||||
<main className="dash-page">
|
||||
<DataCards />
|
||||
<section id="sec-dispatch" className="dash-section">
|
||||
<DispatchSection />
|
||||
</section>
|
||||
<section id="sec-tasks" className="dash-section card">
|
||||
<h2>任务列表</h2>
|
||||
<TaskListSection onNew={scrollToDispatch} />
|
||||
</section>
|
||||
<section id="sec-conv" className="dash-section">
|
||||
<div className="card">
|
||||
<h2>对话</h2>
|
||||
<ConversationSection />
|
||||
</div>
|
||||
<TaskDetailPanel />
|
||||
</section>
|
||||
<section id="sec-projects" className="dash-section">
|
||||
<ProjectsSection />
|
||||
<MembersPanel />
|
||||
</section>
|
||||
<section id="sec-env" className="dash-section">
|
||||
<EnvSection />
|
||||
<EnvContextPanel />
|
||||
</section>
|
||||
<section id="sec-workers" className="dash-section">
|
||||
<WorkersSection />
|
||||
<HealthPanel />
|
||||
</section>
|
||||
<section id="sec-skills" className="dash-section">
|
||||
<SkillsSection />
|
||||
<SkillsToolsPanel />
|
||||
</section>
|
||||
<section id="sec-automations" className="dash-section">
|
||||
<AutomationsSection />
|
||||
</section>
|
||||
<section id="sec-triage" className="dash-section">
|
||||
<TriageSection />
|
||||
</section>
|
||||
<section id="sec-admin" className="dash-section">
|
||||
<AdminSection />
|
||||
</section>
|
||||
<section id="sec-key" className="dash-section">
|
||||
<ApiKeySection />
|
||||
</section>
|
||||
<div className="dash-col dash-col-left">
|
||||
<section id="sec-tasks" className="dash-section card">
|
||||
<h2>任务列表</h2>
|
||||
<TaskListSection onNew={scrollToDispatch} />
|
||||
</section>
|
||||
<section id="sec-projects" className="dash-section">
|
||||
<ProjectsSection />
|
||||
<MembersPanel />
|
||||
</section>
|
||||
</div>
|
||||
<div className="dash-col dash-col-mid">
|
||||
<section id="sec-dispatch" className="dash-section">
|
||||
<DispatchSection />
|
||||
</section>
|
||||
<section id="sec-conv" className="dash-section">
|
||||
<div className="card">
|
||||
<h2>对话</h2>
|
||||
<ConversationSection />
|
||||
</div>
|
||||
<TaskDetailPanel />
|
||||
</section>
|
||||
</div>
|
||||
<div className="dash-col dash-col-right">
|
||||
<section id="sec-env" className="dash-section">
|
||||
<EnvSection />
|
||||
<EnvContextPanel />
|
||||
</section>
|
||||
<section id="sec-workers" className="dash-section">
|
||||
<WorkersSection />
|
||||
<HealthPanel />
|
||||
</section>
|
||||
<section id="sec-skills" className="dash-section">
|
||||
<SkillsSection />
|
||||
<SkillsToolsPanel />
|
||||
</section>
|
||||
<section id="sec-automations" className="dash-section">
|
||||
<AutomationsSection />
|
||||
</section>
|
||||
<section id="sec-triage" className="dash-section">
|
||||
<TriageSection />
|
||||
</section>
|
||||
<section id="sec-admin" className="dash-section">
|
||||
<AdminSection />
|
||||
</section>
|
||||
<section id="sec-key" className="dash-section">
|
||||
<ApiKeySection />
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</ConsoleContext.Provider>
|
||||
);
|
||||
|
||||
@@ -4,9 +4,11 @@
|
||||
no pill shapes, no coloured page backgrounds, no shadows beyond
|
||||
GitHub's hairline button shadow. Layout is width-adaptive (see the
|
||||
"Width-adaptive columns" block below): 1 column under 900px,
|
||||
2 columns at 900-1399px, 3 columns at 1400px and up — CSS grid
|
||||
placement per section id only, DOM order untouched, so the narrow
|
||||
single-column order is the original stacked order. */
|
||||
2 columns at 900-1399px, 3 columns at 1400px and up — each column
|
||||
is an independent wrapper (.dash-col) whose sections stack tightly
|
||||
on their own; the narrow single column is restored to the original
|
||||
stacked order with display:contents plus an explicit order per
|
||||
section (see the narrow block). */
|
||||
:root{
|
||||
--text:#1f2328; --muted:#656d76; --subtle:#6e7781;
|
||||
--line:#d0d7de; --line-muted:#d8dee4;
|
||||
@@ -151,45 +153,53 @@ pre{background:var(--inset-bg);color:var(--text);border:1px solid var(--line);bo
|
||||
.gh-comment-box textarea:focus{box-shadow:none}
|
||||
.gh-comment-footer{display:flex;justify-content:flex-end;gap:8px;padding:8px;border-top:1px solid var(--line);background:var(--subtle-bg)}
|
||||
.conv-divider{border-top:1px solid var(--line);margin:4px 0}
|
||||
/* Width-adaptive columns — CSS grid placement only, no DOM change,
|
||||
no duplicated sections, nothing hidden at any width.
|
||||
Narrow (<900px): .dash-page stays the base flex column, so sections
|
||||
stack in DOM order (dispatch, tasks, conversation, projects,
|
||||
environments, Workers, skills, automations, triage, admin, API key).
|
||||
Medium (900-1399px): left = tasks + projects; right = everything
|
||||
else, in DOM order down the right column. Wide (>=1400px): left =
|
||||
tasks + projects; middle (flexible) = dispatch + conversation;
|
||||
right = environments + Workers + skills + automations + triage +
|
||||
admin + API Key. Each section gets an explicit grid-column AND
|
||||
grid-row per breakpoint (not auto-placement), so the stacking is
|
||||
deterministic and each column's sections stay in DOM order;
|
||||
align-items:start keeps every box only as tall as its content
|
||||
instead of stretching to its row. .dash-cards spans all columns
|
||||
at every grid width. */
|
||||
/* Width-adaptive columns — independent column wrappers, NOT shared
|
||||
grid rows. Why: the previous layout gave every section an explicit
|
||||
grid-column AND grid-row, so one grid row's height was the tallest
|
||||
section in that row. A tall task list in row 2 held the whole row
|
||||
tall, and the conversation (row 3) started far below a short
|
||||
dispatch box — align-items:start only kept each box at its own
|
||||
content height, it never pulled the next row up. That is the
|
||||
blank gap between modules. Now each .dash-col is one grid item
|
||||
whose sections stack in a flex column with a 20px gap, so a module
|
||||
always follows the previous module in its own column, whatever
|
||||
the other columns' heights are. The only blank left is at the
|
||||
bottom of a shorter column, which is normal for column layouts,
|
||||
not a gap between two modules.
|
||||
Medium (900-1399px): left = tasks + projects; right column =
|
||||
middle wrapper (dispatch + conversation) followed by the right
|
||||
wrapper (environments + Workers + skills + automations + triage +
|
||||
admin + API Key), in that order. Wide (>=1400px): left / middle /
|
||||
right wrappers side by side. .dash-cards spans all columns at
|
||||
every grid width. Nothing is duplicated or hidden at any width. */
|
||||
.dash-col{display:flex;flex-direction:column;gap:20px;min-width:0}
|
||||
.dash-col > *{min-width:0}
|
||||
@media (min-width:900px) and (max-width:1399px){
|
||||
.dash-page{display:grid;grid-template-columns:320px minmax(0,1fr);align-items:start}
|
||||
.dash-page > .dash-cards{grid-column:1 / -1;grid-row:1}
|
||||
.dash-section{min-width:0}
|
||||
#sec-tasks{grid-column:1;grid-row:2} #sec-projects{grid-column:1;grid-row:3}
|
||||
#sec-dispatch{grid-column:2;grid-row:2} #sec-conv{grid-column:2;grid-row:3}
|
||||
#sec-env{grid-column:2;grid-row:4} #sec-workers{grid-column:2;grid-row:5}
|
||||
#sec-skills{grid-column:2;grid-row:6} #sec-automations{grid-column:2;grid-row:7}
|
||||
#sec-triage{grid-column:2;grid-row:8} #sec-admin{grid-column:2;grid-row:9}
|
||||
#sec-key{grid-column:2;grid-row:10}
|
||||
.dash-col-left{grid-column:1;grid-row:2}
|
||||
.dash-col-mid{grid-column:2;grid-row:2}
|
||||
.dash-col-right{grid-column:2;grid-row:3}
|
||||
}
|
||||
@media (min-width:1400px){
|
||||
.dash-page{max-width:1560px;display:grid;grid-template-columns:310px minmax(0,1fr) 330px;align-items:start}
|
||||
.dash-page > .dash-cards{grid-column:1 / -1;grid-row:1}
|
||||
.dash-cards{grid-template-columns:repeat(6,1fr)}
|
||||
.dash-section{min-width:0}
|
||||
#sec-tasks{grid-column:1;grid-row:2} #sec-projects{grid-column:1;grid-row:3}
|
||||
#sec-dispatch{grid-column:2;grid-row:2} #sec-conv{grid-column:2;grid-row:3}
|
||||
#sec-env{grid-column:3;grid-row:2} #sec-workers{grid-column:3;grid-row:3}
|
||||
#sec-skills{grid-column:3;grid-row:4} #sec-automations{grid-column:3;grid-row:5}
|
||||
#sec-triage{grid-column:3;grid-row:6} #sec-admin{grid-column:3;grid-row:7}
|
||||
#sec-key{grid-column:3;grid-row:8}
|
||||
.dash-col-left{grid-column:1;grid-row:2}
|
||||
.dash-col-mid{grid-column:2;grid-row:2}
|
||||
.dash-col-right{grid-column:3;grid-row:2}
|
||||
}
|
||||
@media (max-width:899px){ /* 899, not 900: narrow is strictly <900px, so 900px exactly already gets the 2-column grid + 3-per-row cards */
|
||||
/* Narrow single column: unwrap the column wrappers so sections
|
||||
stack as direct flex items of .dash-page, in the ORIGINAL order
|
||||
(dispatch first), not in column-group order (tasks first).
|
||||
Browsers without display:contents degrade to grouped stacking,
|
||||
which is still tight — just in a different order. */
|
||||
.dash-col{display:contents}
|
||||
#sec-dispatch{order:1} #sec-tasks{order:2} #sec-conv{order:3}
|
||||
#sec-projects{order:4} #sec-env{order:5} #sec-workers{order:6}
|
||||
#sec-skills{order:7} #sec-automations{order:8} #sec-triage{order:9}
|
||||
#sec-admin{order:10} #sec-key{order:11}
|
||||
.dash-cards{grid-template-columns:repeat(2,1fr)}
|
||||
.dash-hide-sm{display:none}
|
||||
.dash-page{padding:14px}
|
||||
|
||||
Reference in new issue
Block a user