Skip to content

Commit 5dbee84

Browse files
awsl233777awsl233777
committed
feat(web-ui): refine layout hierarchy inspired by dory
1 parent 8c473bc commit 5dbee84

5 files changed

Lines changed: 268 additions & 102 deletions

File tree

‎web-ui/partials/index/layout-header.html‎

Lines changed: 37 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,38 @@
88
</span>
99
</button>
1010

11-
<div class="hero" v-if="!sessionStandalone">
12-
<img class="hero-logo" src="/res/logo.png" alt="Codex Mate logo">
13-
<div class="hero-title">
14-
Codex <span class="accent">Mate.</span>
15-
</div>
16-
<div class="hero-subtitle">
17-
配置中枢：管理 Codex / Claude / OpenClaw / 会话
18-
<span class="sr-only">本地配置中枢，统一管理 Codex / Claude Code / OpenClaw / 会话。</span>
11+
<section class="hero-surface" v-if="!sessionStandalone">
12+
<div class="hero-copy">
13+
<div class="hero-eyebrow">LOCAL AI WORKSPACE</div>
14+
<div class="hero-title-row">
15+
<img class="hero-logo" src="/res/logo.png" alt="Codex Mate logo">
16+
<div class="hero-title-block">
17+
<div class="hero-title">
18+
Codex <span class="accent">Mate.</span>
19+
</div>
20+
<div class="hero-subtitle">
21+
参考 Dory 的层级组织方式，但只保留 codexmate 真正需要的入口、状态和操作，不把界面硬凑成别人的样子。
22+
<span class="sr-only">本地配置中枢，统一管理 Codex / Claude Code / OpenClaw / 会话。</span>
23+
</div>
24+
</div>
25+
</div>
26+
<div class="hero-actions-row">
27+
<a
28+
class="hero-link-pill"
29+
href="https://github.com/SakuraByteCore/codexmate"
30+
target="_blank"
31+
rel="noopener"
32+
title="打开 GitHub 仓库">
33+
<span class="hero-link-label">GitHub</span>
34+
<span class="hero-link-value">SakuraByteCore/codexmate</span>
35+
</a>
36+
<div class="hero-summary-pill">
37+
<span class="hero-summary-label">当前区域</span>
38+
<span class="hero-summary-value">{{ mainTab === 'config' ? '配置中心' : (mainTab === 'sessions' ? '会话浏览' : (mainTab === 'usage' ? 'Usage' : (mainTab === 'market' ? '技能市场' : '设置'))) }}</span>
39+
</div>
40+
</div>
1941
</div>
20-
</div>
42+
</section>
2143
<div v-if="!sessionStandalone" class="hero-github">
2244
<a
2345
class="github-badge github-badge-mobile"
@@ -257,23 +279,12 @@
257279
</div>
258280
</aside>
259281
<main class="main-panel">
260-
<div class="panel-header" v-if="!sessionStandalone">
261-
<h1 class="main-title">
262-
{{ mainTab === 'config' ? '配置中心' : (mainTab === 'sessions' ? '会话浏览' : (mainTab === 'usage' ? 'Usage' : (mainTab === 'market' ? '技能市场' : '设置'))) }}
263-
</h1>
264-
<p class="subtitle" v-if="mainTab === 'config'">
265-
配置中枢：管理 Codex / Claude / OpenClaw
266-
<span class="sr-only">本地配置中枢，统一管理 Codex / Claude Code / OpenClaw。</span>
267-
</p>
268-
<p class="subtitle" v-else-if="mainTab === 'sessions'">
269-
统一查看与导出 Codex / Claude 会话。
270-
</p>
271-
<p class="subtitle" v-else-if="mainTab === 'usage'">
272-
单独查看本地会话用量、趋势与高频路径。
273-
</p>
274-
<p class="subtitle" v-else-if="mainTab === 'market'">
275-
统一管理 Codex / Claude Skills，并聚焦本地导入与分发。
276-
</p>
282+
<div class="panel-header panel-header-dory" v-if="!sessionStandalone">
283+
<div class="panel-header-copy">
284+
<div class="panel-kicker">{{ mainTab === 'config' ? '配置中心' : (mainTab === 'sessions' ? '会话浏览' : (mainTab === 'usage' ? 'Usage' : (mainTab === 'market' ? '技能市场' : '设置'))) }}</div>
285+
<h1 class="main-title">{{ mainTab === 'config' ? '本地 AI 工作台' : (mainTab === 'sessions' ? '会话与上下文' : (mainTab === 'usage' ? '本地用量与趋势' : (mainTab === 'market' ? '技能与分发' : '运行与数据设置'))) }}</h1>
286+
<p class="subtitle">{{ mainTab === 'config' ? '集中整理 Codex、Claude Code 与 OpenClaw 的关键配置，保持入口清爽、信息成组。' : (mainTab === 'sessions' ? '统一查看、检索和导出 Codex / Claude 会话，不把信息挤成一坨。' : (mainTab === 'usage' ? '把用量统计独立出来，避免会话浏览和趋势信息互相打架。' : (mainTab === 'market' ? '围绕本地 Skills 的安装、导入与同步建立清晰工作流。' : '处理下载、数据管理与全局行为，不往别的面板乱塞杂项。'))) }}</p>
287+
</div>
277288
</div>
278289

279290
<div class="status-strip" v-if="!sessionStandalone && mainTab === 'config'">

‎web-ui/styles/layout-shell.css‎

Lines changed: 120 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,11 @@ body::before {
55
content: "";
66
position: fixed;
77
inset: 0;
8-
background-image:
9-
linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
10-
opacity: 0.16;
8+
background:
9+
radial-gradient(circle at top left, rgba(208, 88, 58, 0.1), transparent 34%),
10+
radial-gradient(circle at top right, rgba(245, 201, 160, 0.24), transparent 28%),
11+
linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0));
12+
opacity: 0.92;
1113
pointer-events: none;
1214
z-index: 0;
1315
}
@@ -18,10 +20,10 @@ body::after {
1820
position: fixed;
1921
inset: 0;
2022
background-image:
21-
linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
22-
linear-gradient(0deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
23-
background-size: 180px 180px;
24-
opacity: 0.08;
23+
linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
24+
linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
25+
background-size: 160px 160px;
26+
opacity: 0.06;
2527
pointer-events: none;
2628
z-index: 0;
2729
}
@@ -33,7 +35,7 @@ body::after {
3335
width: 100%;
3436
max-width: 2200px;
3537
margin: 0 auto;
36-
padding: 16px 12px 28px;
38+
padding: 24px 20px 36px;
3739
position: relative;
3840
z-index: 1;
3941
}
@@ -43,8 +45,8 @@ body::after {
4345
============================================ */
4446
.app-shell {
4547
display: grid;
46-
grid-template-columns: 260px minmax(0, 1fr) 340px;
47-
gap: 16px;
48+
grid-template-columns: 272px minmax(0, 1fr) 332px;
49+
gap: 20px;
4850
align-items: flex-start;
4951
}
5052

@@ -58,13 +60,14 @@ body::after {
5860
align-self: start;
5961
display: flex;
6062
flex-direction: column;
61-
gap: var(--spacing-sm);
62-
padding: var(--spacing-md) var(--spacing-sm);
63-
background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 250, 245, 0.9) 100%);
64-
border: 1px solid rgba(216, 201, 184, 0.65);
65-
border-radius: var(--radius-xl);
66-
box-shadow: var(--shadow-card);
63+
gap: 18px;
64+
padding: 18px 14px;
65+
background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 250, 245, 0.82) 100%);
66+
border: 1px solid rgba(216, 201, 184, 0.5);
67+
border-radius: 24px;
68+
box-shadow: 0 18px 48px rgba(31, 26, 23, 0.08);
6769
min-height: 420px;
70+
backdrop-filter: blur(18px);
6871
}
6972

7073
.side-rail .brand-title {
@@ -162,9 +165,9 @@ body::after {
162165
grid-template-columns: 48px 1fr;
163166
grid-template-rows: auto auto;
164167
column-gap: var(--spacing-sm);
165-
row-gap: 2px;
168+
row-gap: 4px;
166169
align-items: center;
167-
margin-bottom: var(--spacing-md);
170+
margin-bottom: 8px;
168171
}
169172

170173
.brand-logo-wrap {
@@ -200,10 +203,11 @@ body::after {
200203
}
201204

202205
.brand-subtitle {
203-
margin-top: 8px;
204-
font-size: var(--font-size-secondary);
206+
margin-top: 4px;
207+
font-size: 12px;
205208
color: var(--color-text-tertiary);
206-
line-height: 1.45;
209+
line-height: 1.5;
210+
max-width: 18ch;
207211
}
208212

209213
.github-badge {
@@ -213,16 +217,17 @@ body::after {
213217
justify-content: space-between;
214218
gap: 10px;
215219
margin-top: 6px;
216-
padding: 6px 10px;
220+
padding: 7px 11px;
217221
border-radius: 999px;
218-
border: 1px solid var(--color-border-soft);
219-
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.72) 100%);
222+
border: 1px solid rgba(216, 201, 184, 0.5);
223+
background: rgba(255, 255, 255, 0.78);
220224
color: var(--color-text-secondary);
221225
font-size: var(--font-size-caption);
222226
text-decoration: none;
223227
box-shadow: var(--shadow-subtle);
224228
transition: all var(--transition-fast) var(--ease-spring);
225229
min-width: 0;
230+
backdrop-filter: blur(10px);
226231
}
227232

228233
.github-badge-rail {
@@ -328,3 +333,94 @@ body::after {
328333
transform: translateY(-1px);
329334
border-color: rgba(201, 94, 75, 0.5);
330335
}
336+
337+
.hero-surface {
338+
margin-bottom: 20px;
339+
padding: 24px 28px;
340+
border-radius: 30px;
341+
border: 1px solid rgba(216, 201, 184, 0.5);
342+
background:
343+
linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 247, 240, 0.88) 100%),
344+
radial-gradient(circle at top right, rgba(208, 88, 58, 0.08), transparent 28%);
345+
box-shadow: 0 24px 60px rgba(31, 26, 23, 0.08);
346+
position: relative;
347+
overflow: hidden;
348+
}
349+
350+
.hero-surface::after {
351+
content: "";
352+
position: absolute;
353+
inset: auto -40px -80px auto;
354+
width: 240px;
355+
height: 240px;
356+
border-radius: 50%;
357+
background: radial-gradient(circle, rgba(208, 88, 58, 0.08), transparent 68%);
358+
pointer-events: none;
359+
}
360+
361+
.hero-copy {
362+
position: relative;
363+
z-index: 1;
364+
display: flex;
365+
flex-direction: column;
366+
gap: 18px;
367+
}
368+
369+
.hero-eyebrow {
370+
font-size: 12px;
371+
font-weight: 700;
372+
letter-spacing: 0.18em;
373+
color: var(--color-text-tertiary);
374+
}
375+
376+
.hero-title-row {
377+
display: flex;
378+
align-items: center;
379+
gap: 18px;
380+
}
381+
382+
.hero-title-block {
383+
display: flex;
384+
flex-direction: column;
385+
gap: 8px;
386+
}
387+
388+
.hero-actions-row {
389+
display: flex;
390+
flex-wrap: wrap;
391+
gap: 12px;
392+
align-items: center;
393+
}
394+
395+
.hero-link-pill,
396+
.hero-summary-pill {
397+
display: inline-flex;
398+
align-items: center;
399+
gap: 10px;
400+
min-height: 40px;
401+
padding: 0 14px;
402+
border-radius: 999px;
403+
border: 1px solid rgba(216, 201, 184, 0.56);
404+
background: rgba(255, 255, 255, 0.78);
405+
box-shadow: var(--shadow-subtle);
406+
}
407+
408+
.hero-link-pill {
409+
color: var(--color-text-primary);
410+
text-decoration: none;
411+
}
412+
413+
.hero-link-label,
414+
.hero-summary-label {
415+
font-size: 11px;
416+
letter-spacing: 0.08em;
417+
text-transform: uppercase;
418+
color: var(--color-text-tertiary);
419+
}
420+
421+
.hero-link-value,
422+
.hero-summary-value {
423+
font-size: 13px;
424+
font-weight: 600;
425+
color: var(--color-text-primary);
426+
}

0 commit comments

Comments
 (0)