admin/codex-app-server
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

console: 按宽度自适应分栏（一栏/两栏/三栏）

Browse Source 
GitHub 风格不变，仅 tokens.css 改布局：窄屏 <900px 一栏
（按原 DOM 顺序堆叠），中屏 900–1399px 两栏（左：任务列表
+ 项目，右：派发 + 对话 + 详情 + 环境 + Workers + 技能 +
自动化 + 分诊 + 管理区 + API Key），宽屏 >=1400px 三栏
（左 310px：任务列表 + 项目，中弹性：派发 + 对话 + 详情，
右 330px：环境 + Workers + 技能 + 自动化 + 分诊 + 管理区
+ API Key），盒子按内容高度不拉伸，页面最大宽 1560px，
窄屏断点修正为 899px 避免与 900px 重叠。console 标记单测
本地 53 项通过。
This commit is contained in:
host committed 2026-10-29 10:30:16 +08:00
1 parent 4c3420ae8e
commit c89c157e5d
2 files changed
+47 -5
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

cloud/console-react/src/tokens.css
+46 -4
View File
@@ -2,9 +2,11 @@
This supersedes the Muse web/desktop palette: Primer canvas,
borders, foregrounds and accents only. No grey/blue chat bubbles,
no pill shapes, no coloured page backgrounds, no shadows beyond
GitHub's hairline button shadow. Layout is unchanged (one
scrollable console page: dark header + data cards + stacked
sections); only the visual system moved to Primer. */
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. */
:root{
--text:#1f2328; --muted:#656d76; --subtle:#6e7781;
--line:#d0d7de; --line-muted:#d8dee4;
@@ -53,6 +55,8 @@ button.danger:hover{background:var(--danger-bg);color:var(--danger)}
.dash-nav a{color:#fff;text-decoration:none;font-size:13px;font-weight:600;padding:6px 12px;border-radius:var(--radius)}
.dash-nav a:hover{background:rgba(255,255,255,.12);text-decoration:none}
.dash-page{max-width:1180px;margin:0 auto;padding:20px;display:flex;flex-direction:column;gap:20px}
.dash-page > *{min-width:0} /* grid/flex children must shrink, never push the page wider; long lines scroll inside pre/.trace-box/.table-wrap instead */
.dash-section > *{min-width:0}
.dash-section{scroll-margin-top:130px;display:flex;flex-direction:column;gap:16px}
.dash-section.card{padding:16px}
.dash-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@@ -147,7 +151,45 @@ 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}
@media (max-width:900px){
/* 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. */
@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}
}
@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}
}
@media (max-width:899px){ /* 899, not 900: narrow is strictly <900px, so 900px exactly already gets the 2-column grid + 3-per-row cards */
.dash-cards{grid-template-columns:repeat(2,1fr)}
.dash-hide-sm{display:none}
.dash-page{padding:14px}
cloud/console.html
+1 -1
View File
@@ -69,7 +69,7 @@ Error generating stack: `+a.message+`
`),R.error_text&&(Z+=`=== error ===
`+R.error_text.slice(0,8e3)+`
`),O(Z||"（暂无 result/error 输出）")}catch{}dl(H.id),Bl(H.id),Ye(H.id),Vt(H.id),Hl(H),ol(H.id),ll(H.id),ml(H.id),ql(H.id)}},[dl,Bl,Ye,Vt,Hl,ol,ll,ml,ql]),yn=y.useCallback(async H=>{const R=le.current;if(!R)return;const Z={cancel:"确定取消该任务吗？",merge:"确定把 completed 任务标为 merged 吗？",pr:"确定为该任务提 PR 吗？（会在仓库真实建 PR）"};if(!(Z[H]&&!window.confirm(Z[H])))try{const F=await lt(P.taskAction(R.id,H),"POST",{});E(H+" 已提交："+JSON.stringify(F).slice(0,300)),r(),await Wl(R.id)}catch(F){E(H+" 失败："+F.message)}},[Wl,r]),Ke=y.useCallback(async()=>{const H=le.current;if(H)try{const R=await lt(P.taskCost(H.id));b(JSON.stringify(R,null,2).slice(0,4e3))}catch(R){b("查成本失败："+R.message)}},[]),La=y.useCallback(async H=>{const R=le.current;if(R){if(!H.trim()){et("分支消息必填");return}if(!cu.includes(R.status)){et("仅终态任务可分支");return}try{const Z=await lt(P.taskFork(R.id),"POST",{message:H.trim()});et("分支任务已建："+Z.id.slice(0,8)),r()}catch(Z){et("分支失败："+Z.message)}}},[r]),va=y.useCallback(async H=>{const R=le.current;if(R)try{await lt(P.taskReviews(R.id),"POST",H),Ft("评审已登记（requested）"),await Ye(R.id)}catch(Z){Ft("登记评审需求失败："+Z.message)}},[Ye]),fu=y.useCallback(H=>{const R=le.current;if(!R)return;const Z=window.prompt("输入该条评审的 findings（将写回记录并标为 completed）：");Z!==null&&lt(P.taskReviewFindings(R.id,H),"POST",{findings:Z}).then(()=>void Ye(R.id)).catch(F=>Ft("写 findings 失败："+F.message))},[Ye]),ru=y.useCallback((H,R)=>{const Z=le.current;if(!Z)return;const F=R==="approved"?"approve":"deny";lt(P.taskApprovalDecision(Z.id,H,F),"POST",{}).then(()=>{J("已记录"+(R==="approved"?"允许":"拒绝")+"（当前版本只留回执，不拦截实时行为）"),Vt(Z.id)}).catch(Nt=>J("决定失败："+Nt.message))},[Vt]),$l=y.useCallback(async(H,R,Z)=>{const F=le.current;if(F){if(!R.trim()){Q("目标任务 id 不能为空");return}if(!Z.trim()){Q("消息正文不能为空");return}try{const Nt=await lt(P.taskMessagesTo(R.trim()),"POST",{from_task_id:F.id,body:Z.trim(),mode:H});Q("已发送（"+Nt.delivery+"）"),await ll(F.id)}catch(Nt){Q("发送失败："+Nt.message)}}},[ll]),pe=y.useCallback((H,R)=>{const Z=le.current;if(!Z)return;if(!["completed","failed","interrupted"].includes(Z.status)){Gt("仅 completed/failed/interrupted 任务可操作线程（merged/merge-failed 不可改，服务端同样 409）");return}const F={};if(H==="rename"){if(!R.trim()){Gt("新线程名不能为空");return}F.name=R.trim()}lt(P.taskThreadAction(Z.id,H),"POST",F).then(Nt=>{Gt(H+" 已提交："+JSON.stringify(Nt).slice(0,300)),ml(Z.id),ql(Z.id)}).catch(Nt=>Gt(H+" 失败："+Nt.message))},[ml,ql]),hl=y.useCallback(async H=>{const R=le.current;if(!R)return;const Z=H.trim();if(!Z){ee("消息不能为空");return}try{cu.includes(R.status)&&R.status!=="merged"?(await lt(P.taskContinue(R.id),"POST",{message:Z}),ee("已重新排队，同一会话继续"),r(),await Wl(R.id)):["queued","running"].includes(R.status)?(await lt(P.taskFollowups(R.id),"POST",{body:Z,mode:"direct"}),ee("已直接发送"),await dl(R.id),await Bl(R.id)):ee("merged/merge-failed 任务不可继续，也不可发后续消息")}catch(F){ee("发送失败："+F.message)}},[Wl,r,dl,Bl]),be=y.useCallback(async()=>{const H=le.current;if(!H){te("先选一个任务");return}try{const R=await lt(P.taskTrace(H.id)),Z=new Blob([JSON.stringify({task_id:H.id,status:R.status,note:R.note||"",count:(R.entries||[]).length,entries:R.entries||[]},null,2)],{type:"application/json"}),F=document.createElement("a");F.href=URL.createObjectURL(Z),F.download="trace-"+H.id.slice(0,8)+".json",document.body.appendChild(F),F.click(),F.remove(),setTimeout(()=>URL.revokeObjectURL(F.href),1e3),te("已下载完整链路 "+(R.entries||[]).length+" 条")}catch(R){te("下载失败："+R.message)}},[]);return y.useEffect(()=>()=>qe(),[qe]),{currentTask:m,detailBody:_,actionMsg:N,actionReasons:X,costBox:G,forkVisible:w,setForkVisible:at,forkMsg:st,coordChildren:k,agents:Ut,agentsNote:Me,reviews:fe,reviewMsg:vt,reviewError:Pt,traceEntries:re,traceNote:tl,traceDone:q,traceKind:tt,setTraceKind:xt,traceMsg:yt,followups:ze,approvals:v,approvalMsg:W,peerMessages:gt,peerMsg:jt,threadText:nt,threadGateNote:Va,threadMsg:Le,threadList:Ot,chatMsg:Fl,chatHistory:ha,showDetail:Wl,refreshDetailLists:vn,doAction:yn,taskCost:Ke,forkTask:La,postReview:va,submitFindings:fu,decideApproval:ru,postPeer:$l,threadAction:pe,sendChatMessage:hl,downloadTrace:be,refreshReviews:()=>void Ye(),refreshApprovals:()=>void Vt()}}function Jy(i){const[r,m]=y.useState([]),[o,_]=y.useState(""),[O,N]=y.useState(null),[E,X]=y.useState(""),D=y.useCallback(async at=>{const st=at!==void 0?at:i();if(!st){m([]);return}try{const et=await lt(P.projectAutomations(st));m(et.automations||[])}catch(et){_("自动化加载失败："+et.message)}},[i]),G=y.useCallback(async(at,st,Line truncated
<style rel="stylesheet" crossorigin>:root{--text:#1f2328;--muted:#656d76;--subtle:#6e7781;--line:#d0d7de;--line-muted:#d8dee4;--paper:#ffffff;--card:#ffffff;--subtle-bg:#f6f8fa;--inset-bg:#f6f8fa;--accent:#0969da;--accent-emphasis:#0969da;--green:#2da44e;--green-hover:#2c974b;--success:#1a7f37;--danger:#d1242f;--danger-bg:#ffebe9;--attention:#9a6700;--done:#8250df;--selected-bg:#ddf4ff;--radius:6px;--shadow:0 1px 0 rgba(27,31,36,.04);--sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif;--mono:ui-monospace,SFMono-Regular,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;--ctl:32px}*{box-sizing:border-box}html,body,#root{height:100%}body{font-family:var(--sans);margin:0;color:var(--text);background:#fff;line-height:1.5;font-size:14px}a{color:var(--accent);text-underline-offset:3px}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}.muted{color:var(--muted);font-size:12px;line-height:1.5}.err{color:var(--danger)}.ok{color:var(--success)}button{cursor:pointer;font-weight:500;border-radius:var(--radius);border:1px solid var(--line);background:#fff;color:var(--text);box-shadow:var(--shadow)}button:hover{background:var(--subtle-bg)}button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}button.primary,button.seal{background:var(--green);border-color:#1b1f2426;color:#fff}button.primary:hover,button.seal:hover{background:var(--green-hover)}button.danger{color:var(--danger);border-color:var(--line);background:#fff}button.danger:hover{background:var(--danger-bg);color:var(--danger)}.icon-btn{width:32px;height:32px;padding:0;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--text);font-size:16px;line-height:1}.icon-btn:hover{background:var(--subtle-bg)}.dash-topbar{position:sticky;top:0;z-index:10;background:#24292f;color:#fff;border-bottom:1px solid rgba(255,255,255,.15);padding:10px 20px 8px}.dash-topbar .muted{color:#ffffffbf}.dash-topbar-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.dash-brand{font-weight:600;font-size:16px;color:#fff}.dash-status{font-size:13px;font-weight:600;color:#ffffffbf}.dash-status.ok{color:#2da44e}.dash-stamp{margin-left:auto}.dash-nav{display:flex;gap:4px;flex-wrap:wrap;margin-top:8px}.dash-nav a{color:#fff;text-decoration:none;font-size:13px;font-weight:600;padding:6px 12px;border-radius:var(--radius)}.dash-nav a:hover{background:#ffffff1f;text-decoration:none}.dash-page{max-width:1180px;margin:0 auto;padding:20px;display:flex;flex-direction:column;gap:20px}.dash-section{scroll-margin-top:130px;display:flex;flex-direction:column;gap:16px}.dash-section.card{padding:16px}.dash-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.dash-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;min-width:0}.dash-card-label{color:var(--muted);font-size:12px;font-weight:600}.dash-card-value{font-size:24px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:none;padding:16px}.card h2{font-size:14px;margin:0 0 12px;font-weight:600}.card h3{font-size:14px;margin:24px 0 12px;padding-top:16px;border-top:1px solid var(--line);font-weight:600}.card h3:first-of-type{border-top:0;padding-top:0}.composer h2{font-size:16px}.composer textarea.prompt{min-height:148px;font-size:14px;padding:12px;border-radius:var(--radius)}.composer textarea.coord{font-family:var(--mono);font-size:13px}.bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0}.bar>button,.bar>label{display:inline-flex;align-items:center;height:var(--ctl);min-height:var(--ctl);padding:0 16px;box-sizing:border-box;white-space:nowrap}.bar>input,.bar>select{height:var(--ctl);min-height:var(--ctl)}input,select,textarea,button{font:inherit;font-size:14px;padding:5px 12px;border-radius:var(--radius);border:1px solid var(--line);background:#fff;color:var(--text)}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #0969da4d}select{-moz-appearance:none;appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:34px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23656d76' stroke-width='1.5' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 12px center}select::-ms-expand{display:none}select:disabled,input:disabled{color:var(--muted);background:var(--subtle-bg);cursor:not-allowed}input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent)}input[type=file]{height:var(--ctl);display:inline-flex;align-items:center;padding:0 12px;border:1px dashed var(--line);border-radius:var(--radius);background:#fff}input[type=file]::file-selecLine truncated
<style rel="stylesheet" crossorigin>:root{--text:#1f2328;--muted:#656d76;--subtle:#6e7781;--line:#d0d7de;--line-muted:#d8dee4;--paper:#ffffff;--card:#ffffff;--subtle-bg:#f6f8fa;--inset-bg:#f6f8fa;--accent:#0969da;--accent-emphasis:#0969da;--green:#2da44e;--green-hover:#2c974b;--success:#1a7f37;--danger:#d1242f;--danger-bg:#ffebe9;--attention:#9a6700;--done:#8250df;--selected-bg:#ddf4ff;--radius:6px;--shadow:0 1px 0 rgba(27,31,36,.04);--sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif;--mono:ui-monospace,SFMono-Regular,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;--ctl:32px}*{box-sizing:border-box}html,body,#root{height:100%}body{font-family:var(--sans);margin:0;color:var(--text);background:#fff;line-height:1.5;font-size:14px}a{color:var(--accent);text-underline-offset:3px}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}.muted{color:var(--muted);font-size:12px;line-height:1.5}.err{color:var(--danger)}.ok{color:var(--success)}button{cursor:pointer;font-weight:500;border-radius:var(--radius);border:1px solid var(--line);background:#fff;color:var(--text);box-shadow:var(--shadow)}button:hover{background:var(--subtle-bg)}button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}button.primary,button.seal{background:var(--green);border-color:#1b1f2426;color:#fff}button.primary:hover,button.seal:hover{background:var(--green-hover)}button.danger{color:var(--danger);border-color:var(--line);background:#fff}button.danger:hover{background:var(--danger-bg);color:var(--danger)}.icon-btn{width:32px;height:32px;padding:0;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--text);font-size:16px;line-height:1}.icon-btn:hover{background:var(--subtle-bg)}.dash-topbar{position:sticky;top:0;z-index:10;background:#24292f;color:#fff;border-bottom:1px solid rgba(255,255,255,.15);padding:10px 20px 8px}.dash-topbar .muted{color:#ffffffbf}.dash-topbar-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.dash-brand{font-weight:600;font-size:16px;color:#fff}.dash-status{font-size:13px;font-weight:600;color:#ffffffbf}.dash-status.ok{color:#2da44e}.dash-stamp{margin-left:auto}.dash-nav{display:flex;gap:4px;flex-wrap:wrap;margin-top:8px}.dash-nav a{color:#fff;text-decoration:none;font-size:13px;font-weight:600;padding:6px 12px;border-radius:var(--radius)}.dash-nav a:hover{background:#ffffff1f;text-decoration:none}.dash-page{max-width:1180px;margin:0 auto;padding:20px;display:flex;flex-direction:column;gap:20px}.dash-page>*{min-width:0}.dash-section>*{min-width:0}.dash-section{scroll-margin-top:130px;display:flex;flex-direction:column;gap:16px}.dash-section.card{padding:16px}.dash-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.dash-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;min-width:0}.dash-card-label{color:var(--muted);font-size:12px;font-weight:600}.dash-card-value{font-size:24px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:none;padding:16px}.card h2{font-size:14px;margin:0 0 12px;font-weight:600}.card h3{font-size:14px;margin:24px 0 12px;padding-top:16px;border-top:1px solid var(--line);font-weight:600}.card h3:first-of-type{border-top:0;padding-top:0}.composer h2{font-size:16px}.composer textarea.prompt{min-height:148px;font-size:14px;padding:12px;border-radius:var(--radius)}.composer textarea.coord{font-family:var(--mono);font-size:13px}.bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0}.bar>button,.bar>label{display:inline-flex;align-items:center;height:var(--ctl);min-height:var(--ctl);padding:0 16px;box-sizing:border-box;white-space:nowrap}.bar>input,.bar>select{height:var(--ctl);min-height:var(--ctl)}input,select,textarea,button{font:inherit;font-size:14px;padding:5px 12px;border-radius:var(--radius);border:1px solid var(--line);background:#fff;color:var(--text)}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #0969da4d}select{-moz-appearance:none;appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:34px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23656d76' stroke-width='1.5' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 12px center}select::-ms-expand{display:none}select:disabled,input:disabled{color:var(--muted);background:var(--subtle-bg);cursor:not-allowed}input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent)}input[type=file]{height:var(--ctl);display:inline-flex;align-items:center;padding:0 12px;border:1px dashed var(--line);border-radius:var(-Line truncated
</head>
<body>
<div id="root"></div>