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

console: 一页式控制台排版 + 数据卡片

Browse Source 
保持 Muse 风格（白底、细线、灰/浅蓝气泡），不再四栏切视图：
顶栏（连接/健康/配额/刷新 + 锚点导航）+ 6 张数据卡片
（健康、配额、任务、Workers、项目、项目数据，均取自已有
store 数据，未加载不以 0 充数）+ 所有模块按顺序铺在一页
（派发、任务列表、对话+详情、项目、环境、Workers、技能、
自动化、分诊、管理区、API Key）。图标栏与右侧栏删除，
内容分别移到顶栏与各自模块下；今天列表与任务列表重复，
不再单独保留；对话为空时不再重复渲染派发表单。
含自动选第一个项目修复（主要聊天不再空）与继续消息
历史，console 标记单测本地 53 项通过。
This commit is contained in:
host committed 2026-10-29 09:57:26 +08:00
1 parent a13762cfbe
commit 8b455c6554
9 files changed
+263 -272
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

cloud/console-react/src/tokens.css
+28 -57
View File
@@ -37,55 +37,28 @@ button.danger:hover{background:#fee4e2}
.icon-btn{width:32px;height:32px;padding:0;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--text);font-size:16px;line-height:1}
.icon-btn:hover{background:#f9fafb}
/* App shell: icon rail + list + conversation + right panel, full viewport.
Columns are separated by hairlines, not gaps or cards. */
.muse-app{display:grid;grid-template-columns:56px 260px minmax(0,1fr) 300px;height:100vh;background:#fff}
.muse-app.no-right{grid-template-columns:56px 260px minmax(0,1fr)}
.icon-rail{border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 0;overflow-y:auto}
.icon-rail button{width:40px;height:40px;border:0;border-radius:12px;background:transparent;display:grid;place-items:center;color:var(--text);padding:0;flex:none}
.icon-rail button:hover{background:#f2f2f2}
.icon-rail button.active{background:var(--accent-soft);color:var(--accent)}
.icon-rail svg{width:22px;height:22px}
.list-col{border-right:1px solid var(--line);overflow-y:auto;padding:16px 12px;min-width:0}
.search-box{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:8px 12px;background:#fff}
.search-box svg{flex:none;color:var(--muted)}
.search-box input{border:0;padding:0;flex:1;min-width:0;font-size:14px;background:transparent}
.search-box input:focus{box-shadow:none;outline:none}
.list-section-head{display:flex;align-items:center;justify-content:space-between;padding:16px 4px 8px;font-weight:600;font-size:14px}
.list-section-head button{width:28px;height:28px;padding:0;display:grid;place-items:center;border-radius:50%}
.muse-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.muse-item{padding:10px 12px;border-radius:12px;cursor:pointer;overflow:hidden}
.muse-item:hover{background:#f9fafb}
.muse-item.selected{background:#f2f2f2}
.muse-item-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.muse-item-sub{display:flex;gap:6px;align-items:center;color:var(--muted);font-size:12px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task-dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.center-col{min-width:0;display:flex;flex-direction:column;overflow-y:auto;background:#fff}
.center-topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#fff;border-bottom:1px solid var(--line)}
.center-inner{max-width:760px;margin:0 auto;width:100%;padding:24px 20px 16px;display:flex;flex-direction:column;gap:20px;flex:1}
.right-col{border-left:1px solid var(--line);overflow-y:auto;padding:20px 16px;display:flex;flex-direction:column;gap:20px;min-width:0}
.right-profile{text-align:center;position:relative}
.right-profile .icon-btn{position:absolute;top:0;right:0}
.right-avatar{width:72px;height:72px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:28px;font-weight:700;margin:0 auto}
.right-name{font-weight:700;font-size:17px;margin-top:10px}
.right-status{color:var(--green);font-size:13px;font-weight:600}
.right-status.off{color:var(--muted)}
.right-icon-row{display:flex;gap:4px;justify-content:space-between;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 4px}
.right-icon-row button{width:36px;height:36px;border:0;border-radius:12px;background:transparent;display:grid;place-items:center;color:var(--text);padding:0}
.right-icon-row button:hover{background:#f2f2f2}
.right-icon-row button.active{background:var(--accent-soft);color:var(--accent)}
.right-icon-row svg{width:20px;height:20px}
.today-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.today-item{display:flex;gap:10px;cursor:pointer;align-items:flex-start}
.today-check{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line-strong);display:grid;place-items:center;flex:none;font-size:13px;color:var(--muted)}
.today-check.done{border-color:var(--green);background:var(--green);color:#fff}
.today-item-main{flex:1;min-width:0;display:block}
.today-item-title{display:block;font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.today-item-sub{display:block;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.today-item-time{color:var(--muted);font-size:12px;flex:none;white-space:nowrap}
.right-detail summary{font-weight:600;font-size:14px;cursor:pointer;padding:8px 0}
.right-detail .card{border:0;padding:0;box-shadow:none}
.right-detail .card h2{font-size:16px}
/* Dashboard shell: ONE scrollable console page, same Muse tokens.
Slim sticky top bar (name + status + health + quota + refresh
stamp + anchor nav), a data-cards row, then every module as a
section. No icon-rail column, no left list column, no right
panel column — the old shell classes are gone with them. */
.dash-topbar{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--line);padding:10px 20px 8px}
.dash-topbar-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.dash-brand{font-weight:700;font-size:17px}
.dash-status{font-size:13px;font-weight:600;color:var(--muted)}
.dash-status.ok{color:var(--green)}
.dash-stamp{margin-left:auto}
.dash-nav{display:flex;gap:4px;flex-wrap:wrap;margin-top:8px}
.dash-nav a{color:var(--text);text-decoration:none;font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px}
.dash-nav a:hover{background:#f2f2f2}
.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:20px}
.dash-section.card{padding:20px}
.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 18px;min-width:0}
.dash-card-label{color:var(--muted);font-size:13px;font-weight:600}
.dash-card-value{font-size:28px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
/* Cards: flat white sections with a hairline border, no shadow. */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:none;padding:20px}
@@ -158,19 +131,17 @@ pre{background:#f9fafb;color:var(--text);border:1px solid var(--line);border-rad
.chat-send{width:36px;height:36px;border-radius:50%;background:var(--bubble-user);border:0;color:var(--accent-dark);padding:0;display:grid;place-items:center;font-size:18px;line-height:1;flex:none}
.chat-send:disabled{opacity:.45;background:#f2f2f2;color:var(--muted)}
.conv-divider{border-top:1px solid var(--line);margin:4px 0}
@media (max-width:1240px){
.muse-app{grid-template-columns:56px 260px minmax(0,1fr)}
.muse-app.no-right{grid-template-columns:56px 260px minmax(0,1fr)}
.right-col{grid-column:1 / -1;border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:900px){
.muse-app,.muse-app.no-right{grid-template-columns:1fr}
.icon-rail{display:none}
.center-inner{padding:16px 14px}
.dash-cards{grid-template-columns:repeat(2,1fr)}
.dash-hide-sm{display:none}
.dash-page{padding:14px}
.dash-section.card{padding:16px}
.card{padding:16px}
th:nth-child(2),td:nth-child(2),th:nth-child(3),td:nth-child(3),th:nth-child(7),td:nth-child(7){display:none}
}
@media (max-width:560px){
.dash-cards{grid-template-columns:1fr}
.dash-nav{flex-wrap:nowrap;overflow-x:auto}
.card{padding:16px}
th:nth-child(6),td:nth-child(6),th:nth-child(9),td:nth-child(9){display:none}
.bar > input[type="text"],.bar > input[type="password"],.bar > select{flex:1 1 100%}