chenmoranzhi/writing-agent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

壳完善

Browse Source
This commit is contained in:
moranzhi
2026-08-14 14:25:31 +08:00
parent 120d67ee82
commit 20938b04d7
24 changed files with 1495 additions and 426 deletions
Download Patch File Download Diff File Expand all files Collapse all files

401
web/styles.css
View File

@@ -1,4 +1,4 @@
/* Functional layout 鈥<EFBFBD> agent-first, no production-line chrome */
/* Functional layout — agent-first, no production-line chrome */
:root {
--bg: #f4f4f5;
@@ -22,7 +22,7 @@
color: var(--text);
}
/* 寮€鍒涗綔鍚庣缉杩涘乏渚ф爮 */
/* 开创作后缩进左侧栏 */
body.rail-collapsed {
--books-w: var(--books-w-collapsed);
}
@@ -31,7 +31,7 @@ body.rail-collapsed {
html, body {
height: 100%;
margin: 0;
overflow: hidden; /* 娴忚<EFBFBD>鍣ㄥ眰姘镐笉鍑虹幇椤甸潰婊氬姩鏉<EFBFBD> */
overflow: hidden; /* 浏览器层永不出现页面滚动条 */
}
button, input, textarea { font: inherit; }
a.link { color: var(--accent); text-decoration: none; }
@@ -138,7 +138,7 @@ body.rail-collapsed .rail-tab {
}
body.rail-collapsed .rail-panels { display: none; }
body.rail-collapsed .panel-rail { align-items: stretch; }
/* composer 鎸夊唴瀹硅嚜閫傚簲锛涗腑闂村尯鍚冩帀鍓╀綑楂樺害锛屾暣椤甸攣鍦ㄨ<EFBFBD>鍙ｅ唴 */
/* composer 按内容自适应；中间区吃掉剩余高度，整页锁在视口内 */
.panel-main {
display: grid;
grid-template-rows: var(--head-h) minmax(0, 1fr) auto;
@@ -195,7 +195,7 @@ body.rail-collapsed .panel-rail { align-items: stretch; }
.panel-head-actions { display: flex; gap: 4px; align-items: center; }
.btn-sm.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
/* Books 鈥<EFBFBD> explorer breadcrumb + list */
/* Books — explorer breadcrumb + list */
.path-bar {
display: flex; align-items: center; flex-wrap: nowrap; gap: 2px;
margin: 6px 8px 4px; padding: 6px 10px;
@@ -267,7 +267,7 @@ body.rail-collapsed .panel-rail { align-items: stretch; }
body[data-lifecycle="play"] { --accent: #16a34a; --accent-soft: #dcfce7; --bg: #f0fdf4; }
body[data-lifecycle="play"] .panel-rail { background: #f7fef9; }
/* Skill picker 鈥<EFBFBD> primary action when starting */
/* Skill picker — primary action when starting */
.skill-picker {
padding: 16px;
border-bottom: 2px solid var(--accent);
@@ -285,7 +285,7 @@ body[data-lifecycle="play"] .panel-rail { background: #f7fef9; }
.skill-card-desc { font-size: 12px; color: var(--muted); line-height: 1.4; }
.skill-card-tag { font-size: 11px; color: var(--accent); margin-top: 6px; }
/* Feed 鈥<EFBFBD> SillyTavern 寮忓<EFBFBD>璇濇皵娉<EFBFBD> */
/* Feed — SillyTavern 式对话气泡 */
.message-feed {
flex: 1;
overflow-y: auto;
@@ -557,7 +557,7 @@ body.rail-collapsed .message-feed {
margin: 0 0 8px;
}
/* 涓诲<EFBFBD>璇濋獙鏀跺崱锛氬悆婊′腑闂存爮 */
/* 主对话验收卡：吃满中间栏 */
.msg-review {
align-self: stretch;
width: 100%;
@@ -594,7 +594,7 @@ body.rail-collapsed .message-feed {
.msg-review .ws-focus-hint { margin-bottom: 0; font-size: 11px; }
.msg-review .review-worker-set { margin: 0 0 6px; }
/* 浜х墿绱у噾鍗★細妯<EFBFBD>悜涓昏酱锛岄<EFBFBD>瑙堜竴琛<EFBFBD> */
/* 产物紧凑卡：横向主轴，预览一行 */
.artifact-compact-list {
display: flex;
flex-direction: column;
@@ -650,8 +650,8 @@ body.rail-collapsed .message-feed {
border-radius: 999px;
background: var(--accent-soft);
}
.artifact-compact-toggle::before { content: "灞曞紑"; }
.artifact-compact[open] .artifact-compact-toggle::before { content: "鏀惰捣"; }
.artifact-compact-toggle::before { content: "展开"; }
.artifact-compact[open] .artifact-compact-toggle::before { content: "收起"; }
.artifact-compact-preview {
margin: 0;
font-family: var(--font-read);
@@ -707,7 +707,7 @@ body.rail-collapsed .message-feed {
}
.ws-focus-body .artifact-compact-list { margin: 0; }
/* 灞曞紑鍖猴細mosaic / 鐡风爾缃戞牸锛屽悆婊℃í鍚戝<E98D9A>搴<EFBFBD> */
/* 展开区：mosaic / 瓷砖网格，吃满横向宽度 */
.af-mosaic {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -818,7 +818,7 @@ body.rail-collapsed .af-mosaic {
gap: 5px;
}
/* 鎶€鑳戒笓鐢ㄦ<EFBFBD>鏂囧崱 */
/* 技能专用正文卡 */
.skill-view {
display: flex;
flex-direction: column;
@@ -1244,7 +1244,7 @@ body.rail-collapsed .af-mosaic {
.msg-q-list li { margin: 0.35rem 0; }
.msg-q-lead { margin: 0; line-height: 1.55; font-size: 14px; }
/* Cursor 寮忚<EFBFBD>闂<EFBFBD>崱锛氳创鍦ㄦ秷鎭<EFBFBD>祦涓嬫柟锛屽崰婊″崗璋冨垪瀹藉害锛屼笉閬<EFBFBD>洊鍘嗗彶 */
/* Cursor 式询问卡：贴在消息流下方，占满协调列宽度，不遮盖历史 */
.questions-card-host {
flex: 0 1 auto;
width: 100%;
@@ -1255,7 +1255,7 @@ body.rail-collapsed .af-mosaic {
min-height: 0;
}
.questions-card-host[hidden] { display: none !important; }
/* 寮€鍚<EFBFBD>椂鍗<EFBFBD> feed 鍓╀綑楂樺害鐨勪笂闄愶紝涓嶆妸鏁撮〉鎾戝嚭瑙嗗彛锛涘嬁涓<E5AC81> [hidden] 骞跺瓨鎶<EFBFBD> display */
/* 开启时占 feed 剩余高度的上限，不把整页撑出视口；勿与 [hidden] 并存抢 display */
.questions-card-host.is-open:not([hidden]) {
display: flex;
flex-direction: column;
@@ -1276,7 +1276,7 @@ body.rail-collapsed .af-mosaic {
background: var(--surface, #fff);
overflow: hidden;
}
/* 鎮<EFBFBD>诞鎺т欢灞傦細涓嶅崰鏂囨。娴侀珮搴<EFBFBD> */
/* 悬浮控件层：不占文档流高度 */
.qcard-float {
position: absolute;
inset: 0;
@@ -1349,7 +1349,7 @@ body.rail-collapsed .af-mosaic {
flex: 1 1 auto;
min-height: 0;
padding: 10px 12px;
overflow: auto; /* 浠呭崱鍐呮粴鍔<EFBFBD>紱椤甸潰鏈<EFBFBD>韩涓嶆粴 */
overflow: auto; /* 仅卡内滚动；页面本身不滚 */
}
.qcard.has-pager .qcard-body { padding-top: 36px; }
.qcard.has-skip .qcard-body { padding-bottom: 40px; }
@@ -1461,7 +1461,7 @@ body.rail-collapsed .af-mosaic {
}
.ws-slot-chip.ws-slot-on { background: var(--accent-soft); border-color: transparent; }
.ws-slot-chip.ws-slot-off { opacity: 0.55; text-decoration: line-through; }
/* 浜х墿缁撴瀯鍖栧睍绀<EFBFBD> 鈥<> 瀵归綈 qcard / flow-step / ws-badge */
/* 产物结构化展示 — 对齐 qcard / flow-step / ws-badge */
.artifact-friendly { display: flex; flex-direction: column; gap: 10px; }
.artifact-list { margin: 0; padding-left: 18px; line-height: 1.5; }
.artifact-hero {
@@ -1561,7 +1561,7 @@ body.rail-collapsed .af-mosaic {
.artifact-kv-row.complex .artifact-kv-key { margin-bottom: 2px; }
.artifact-kv-val { min-width: 0; font-size: 13px; line-height: 1.45; }
/* 鐧惧垎姣旇繘搴︽潯 */
/* 百分比进度条 */
.pct-meter {
display: flex;
flex-direction: column;
@@ -1913,7 +1913,7 @@ body.rail-collapsed .af-mosaic {
.timeline-item { padding: 6px 0; border-bottom: 1px solid var(--border); }
.timeline-empty { color: var(--muted); }
/* Composer 鈥<EFBFBD> 楂樺害闅忓唴瀹癸紝浣嗘湁涓婇檺锛岄伩鍏嶆尋鐖嗚<E99096>鍙<EFBFBD> */
/* Composer — 高度随内容，但有上限，避免挤爆视口 */
.composer {
border-top: 1px solid var(--border);
padding: 10px 12px;
@@ -2001,81 +2001,362 @@ body.rail-collapsed .af-mosaic {
body:not(.rail-collapsed) .rail-panels { display: none; }
}
/* —— 游玩呈现壳 present.v1（P2 最小） —— */
/* —— 游玩呈现壳 present.v1 —— */
.present-shell {
--present-ink: #1c1917;
--present-muted: #78716c;
--present-line: #e7e5e4;
--present-soft: #f5f5f4;
--present-accent: #0f766e;
--present-body: 17.5px;
--present-body-lh: 1.78;
--present-body-hero: 19px;
--present-body-read: 18.5px;
display: flex;
flex-direction: column;
gap: 10px;
gap: 0;
position: relative;
padding: 10px 12px 12px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--surface);
padding: 14px 16px 16px;
border: 1px solid var(--present-line);
border-radius: 12px;
background: var(--surface, #fff);
color: var(--present-ink);
}
.present-shell-badge {
align-self: flex-start;
font-size: 11px;
margin-bottom: 10px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--muted);
padding: 1px 7px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--present-muted);
padding: 2px 8px;
border-radius: 4px;
border: 1px solid var(--border);
background: var(--surface-2, rgba(0, 0, 0, 0.03));
border: 1px solid var(--present-line);
background: var(--present-soft);
}
.present-stack,
.present-board,
.present-split,
.present-reader {
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
}
.present-region {
display: flex;
flex-direction: column;
gap: 4px;
gap: 6px;
min-width: 0;
}
.present-region-title {
margin: 0;
font-size: 11px;
font-weight: 700;
color: var(--muted);
letter-spacing: 0.04em;
color: var(--present-muted);
letter-spacing: 0.05em;
}
.present-region-body {
margin: 0;
line-height: 1.55;
line-height: 1.65;
white-space: pre-wrap;
font-size: 14px;
}
.present-region--monitor .present-region-body,
.present-region--aside .present-region-body {
font-size: 13px;
color: var(--text, inherit);
padding: 6px 8px;
/* P0：正文舞台 —— 随字数伸展（600~3000 靠外层滚动，不塞进小框） */
.present-stage {
flex: 1 1 auto;
min-height: 0;
min-width: 0;
}
.present-region--body {
min-width: 0;
}
.present-region--body .present-region-body,
.present-stage .present-region--body .present-region-body,
.present-stage.present-region--body .present-region-body {
font-size: var(--present-body);
line-height: var(--present-body-lh);
letter-spacing: 0.01em;
max-height: none;
overflow: visible;
}
.present-stage--hero .present-region-body {
font-size: var(--present-body-hero);
line-height: 1.82;
padding: 4px 2px 8px;
}
.present-stage--read .present-region-body {
font-family: var(--font-read);
font-size: var(--present-body-read);
line-height: 1.9;
max-width: 42rem;
}
/* 双栏：侧栏钉住，正文再长也能对照 */
.present-board-side,
.present-split-side,
.present-reader-aside {
position: sticky;
top: 0.75rem;
align-self: start;
max-height: calc(100dvh - 3rem);
overflow-y: auto;
}
/* P2：监控芯片 */
.present-chips {
display: flex;
flex-wrap: wrap;
gap: 6px 8px;
}
.present-chip {
display: inline-flex;
align-items: baseline;
gap: 6px;
padding: 4px 10px;
border-radius: 6px;
border: 1px solid var(--border);
background: var(--surface-2, rgba(0, 0, 0, 0.03));
border: 1px solid var(--present-line);
background: var(--present-soft);
font-size: 12px;
line-height: 1.35;
}
.present-shell--chat_monitor .present-region--monitor {
order: -1;
}
.present-shell--turn_panel {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 10px;
}
.present-shell--chapter_reader .present-region--header .present-region-body {
font-size: 15px;
.present-chip-k {
color: var(--present-muted);
font-weight: 600;
}
.present-chip-v {
color: var(--present-ink);
font-weight: 500;
}
.present-region--monitor .present-region-body,
.present-region--aside .present-region-body,
.present-region--footer .present-region-body {
font-size: 12.5px;
line-height: 1.45;
color: var(--present-ink);
padding: 8px 10px;
border-radius: 8px;
border: 1px solid var(--present-line);
background: var(--present-soft);
}
.present-region--header .present-region-body {
font-size: 14px;
font-weight: 650;
letter-spacing: 0.01em;
line-height: 1.4;
}
/* P1：行动 */
.present-action-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.present-action {
display: inline-flex;
align-items: center;
padding: 7px 12px;
border-radius: 8px;
border: 1px solid color-mix(in srgb, var(--present-accent) 35%, var(--present-line));
background: color-mix(in srgb, var(--present-accent) 8%, #fff);
color: var(--present-ink);
font-size: 13px;
font-weight: 550;
line-height: 1.3;
}
.present-actions {
margin: 0;
padding-left: 18px;
line-height: 1.45;
font-size: 13px;
}
.present-tone--messenger .present-region--body {
border-left: 3px solid var(--border);
padding-left: 10px;
/* —— 各壳布局 —— */
.present-shell--chat_monitor {
--present-accent: #0369a1;
background:
linear-gradient(180deg, #f0f9ff 0%, #fff 48px);
}
.present-tone--book .present-region--body {
max-width: 42rem;
.present-shell--chat_monitor .present-stage {
padding: 14px 16px;
border-radius: 10px;
border: 1px solid var(--present-line);
background: #fff;
}
.present-tone--terminal .present-region-body {
.present-shell--spotlight {
--present-accent: #b45309;
padding-top: 14px;
}
.present-shell--spotlight .present-stack--spotlight {
gap: 14px;
}
.present-shell--spotlight .present-stage--hero {
padding: 6px 4px 4px;
}
.present-shell--spotlight .present-region--monitor .present-region-title {
display: none;
}
.present-shell--turn_panel {
--present-accent: #047857;
background: linear-gradient(165deg, #f0fdf4 0%, #fff 28%);
}
.present-board-top {
display: flex;
flex-direction: column;
gap: 8px;
}
.present-board-mid {
display: grid;
grid-template-columns: minmax(0, 1.7fr) minmax(140px, 0.85fr);
gap: 12px;
align-items: start;
}
.present-board-side {
display: flex;
flex-direction: column;
gap: 8px;
}
.present-shell--turn_panel .present-stage {
padding: 16px;
border-radius: 10px;
border: 1px solid var(--present-line);
background: #fff;
}
.present-shell--split_board {
--present-accent: #4338ca;
}
.present-split {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(150px, 0.9fr);
gap: 14px 16px;
align-items: start;
}
.present-split-main {
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
}
.present-split-side {
min-width: 0;
padding: 10px;
border-radius: 10px;
border: 1px solid var(--present-line);
background: var(--present-soft);
}
.present-split .present-region--actions {
grid-column: 1 / -1;
}
.present-shell--choice_dock {
--present-accent: #be123c;
}
.present-stack--dock {
gap: 10px;
}
.present-dock {
margin-top: 4px;
padding: 12px;
border-radius: 12px;
border: 1px solid color-mix(in srgb, var(--present-accent) 28%, var(--present-line));
background: color-mix(in srgb, var(--present-accent) 6%, #fff);
/* 长正文时选项坞钉在视口底，读完仍看得到 */
position: sticky;
bottom: 0;
z-index: 2;
box-shadow: 0 -8px 20px color-mix(in srgb, #fff 70%, transparent);
}
.present-dock .present-region-title {
margin-bottom: 2px;
}
.present-dock .present-action {
padding: 9px 14px;
font-size: 13.5px;
border-width: 1.5px;
}
.present-shell--chapter_reader {
--present-accent: #44403c;
background:
linear-gradient(90deg, transparent 0, transparent),
linear-gradient(180deg, #fafaf9 0%, #fff 40%);
}
.present-reader {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(120px, 0.42fr);
gap: 18px;
align-items: start;
}
.present-reader-main {
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
}
.present-reader-aside {
font-size: 12px;
padding-top: 4px;
border-left: 1px solid var(--present-line);
padding-left: 14px;
}
.present-shell--chapter_reader .present-region--header .present-region-body {
font-family: var(--font-read);
font-size: 20px;
font-weight: 600;
}
.present-shell--prose .present-stage--read {
padding: 6px 2px;
}
.present-shell--prose .present-region--footer .present-region-body {
opacity: 0.85;
}
@media (max-width: 640px) {
.present-board-mid,
.present-split,
.present-reader {
grid-template-columns: 1fr;
}
.present-board-side,
.present-split-side,
.present-reader-aside {
position: static;
max-height: none;
}
.present-reader-aside {
border-left: none;
border-top: 1px solid var(--present-line);
padding-left: 0;
padding-top: 12px;
}
}
.present-tone--messenger .present-stage {
border-left: 3px solid #7dd3fc;
padding-left: 12px;
}
.present-tone--book .present-stage--read .present-region-body,
.present-tone--book .present-stage .present-region-body {
font-family: var(--font-read);
max-width: 38rem;
}
.present-tone--terminal {
--present-ink: #d6d3d1;
--present-muted: #a8a29e;
--present-line: #3f3f46;
--present-soft: #27272a;
background: #18181b;
color: #e7e5e4;
}
.present-tone--terminal .present-chip,
.present-tone--terminal .present-stage,
.present-tone--terminal .present-dock,
.present-tone--terminal .present-split-side {
background: #27272a;
border-color: #3f3f46;
}
.present-tone--terminal .present-region-body,
.present-tone--terminal .present-action {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 13px;
}
.present-tone--terminal .present-region--body .present-region-body {
font-size: calc(var(--present-body) - 0.5px);
}
.present-tone--terminal .present-action {
font-size: 13px;
color: #e7e5e4;
background: #3f3f46;
}