fix(ui): 侧边栏项目+其他会话共用单一滚动容器(side-scroll)；锁定 #main/#composer 使输入区永钉底部
This commit is contained in:
+10
-11
@@ -53,7 +53,7 @@
|
||||
html, body { height: 100%; }
|
||||
body {
|
||||
font-family: var(--font-ui);
|
||||
margin: 0; height: 100vh; display: flex; flex-direction: row;
|
||||
margin: 0; height: 100vh; display: flex; flex-direction: row; overflow: hidden;
|
||||
background: var(--bg-base); color: var(--text-primary);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: 14px;
|
||||
@@ -65,8 +65,8 @@ body {
|
||||
|
||||
/* === 侧边栏 (spec §2.1) === */
|
||||
#sidebar {
|
||||
width: 264px; background: var(--bg-surface); color: var(--text-primary);
|
||||
display: flex; flex-direction: column; flex-shrink: 0;
|
||||
width: 264px; height: 100vh; background: var(--bg-surface); color: var(--text-primary);
|
||||
display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden;
|
||||
border-right: 1px solid var(--border-subtle);
|
||||
transition: width .25s var(--ease);
|
||||
position: relative;
|
||||
@@ -112,9 +112,10 @@ body {
|
||||
#sidebar.collapsed #new-chat { margin: var(--sp-2) 10px var(--sp-3); padding: 10px 0; }
|
||||
#new-chat .ic-plus { display: inline-block; font-weight: 900; }
|
||||
#sidebar.collapsed #new-chat .nc-text { display: none; }
|
||||
/* 侧边栏分区（项目 / 其他会话） */
|
||||
/* 侧边栏分区（项目 / 其他会话）：品牌+新会话固定，两个列表共用一个滚动条 */
|
||||
.side-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
|
||||
.side-section { display: flex; flex-direction: column; min-height: 0; }
|
||||
#sidebar.collapsed .side-section { display: none; }
|
||||
#sidebar.collapsed .side-scroll { display: none; }
|
||||
.side-head {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
margin: var(--sp-3) var(--sp-4) var(--sp-2);
|
||||
@@ -130,9 +131,7 @@ body {
|
||||
transition: all var(--dur) var(--ease);
|
||||
}
|
||||
.side-add:hover { border-color: var(--accent); color: var(--accent); }
|
||||
#project-tree, #other-session-list { padding: 0 8px 8px; overflow-y: auto; }
|
||||
#project-tree { flex: 0 1 auto; }
|
||||
#sec-others { flex: 1; min-height: 0; }
|
||||
#project-tree, #other-session-list { padding: 0 8px 8px; }
|
||||
/* 项目分组 */
|
||||
.proj-group { margin: 2px 0; }
|
||||
.proj-row {
|
||||
@@ -184,7 +183,7 @@ body {
|
||||
.sess .avatar { display: none; }
|
||||
|
||||
/* === 主区 + 顶栏 (spec §2.2) === */
|
||||
#main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--bg-base); }
|
||||
#main { flex: 1; display: flex; flex-direction: column; min-width: 0; height: 100vh; overflow: hidden; background: var(--bg-base); }
|
||||
header {
|
||||
height: 48px; position: sticky; top: 0; z-index: 10;
|
||||
padding: 0 var(--sp-4); display: flex; align-items: center; gap: 14px;
|
||||
@@ -259,7 +258,7 @@ header h1 { font-size: 16px; font-weight: 700; letter-spacing: -.02em; margin: 0
|
||||
#rag-bar button:hover:not(:disabled) { box-shadow: 0 0 16px var(--accent-soft); }
|
||||
|
||||
/* === 聊天区 (spec §2.3) === */
|
||||
#chat { flex: 1; overflow-y: auto; padding: var(--sp-6) var(--sp-4); max-width: none; width: 100%; margin: 0; }
|
||||
#chat { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-6) var(--sp-4); max-width: none; width: 100%; margin: 0; }
|
||||
.msg { display: flex; margin: var(--sp-3) 0; padding-right: var(--composer-gutter); animation: zoomIn .25s var(--ease); position: relative; }
|
||||
.msg .bubble {
|
||||
max-width: 100%; padding: 11px 16px; border-radius: var(--r-lg);
|
||||
@@ -331,7 +330,7 @@ header h1 { font-size: 16px; font-weight: 700; letter-spacing: -.02em; margin: 0
|
||||
label.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
|
||||
|
||||
/* === 输入区 (spec §2.5) === */
|
||||
#composer { border-top: none; background: transparent; padding: var(--sp-3) var(--sp-4) var(--sp-4); }
|
||||
#composer { flex-shrink: 0; border-top: none; background: transparent; padding: var(--sp-3) var(--sp-4) var(--sp-4); }
|
||||
#composer-inner { max-width: none; margin: 0; display: flex; gap: var(--composer-gap); align-items: flex-end; }
|
||||
#input {
|
||||
flex: 1; border: 1px solid var(--border-strong); border-radius: var(--r-md);
|
||||
|
||||
@@ -62,6 +62,7 @@ body {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
background: var(--bg-base);
|
||||
color: var(--text-primary);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
@@ -83,11 +84,13 @@ body {
|
||||
}
|
||||
#sidebar {
|
||||
width: 264px;
|
||||
height: 100vh;
|
||||
background: var(--bg-surface);
|
||||
color: var(--text-primary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
border-right: 1px solid var(--border-subtle);
|
||||
transition: width .25s var(--ease);
|
||||
position: relative;
|
||||
@@ -206,12 +209,17 @@ body {
|
||||
#sidebar.collapsed #new-chat .nc-text {
|
||||
display: none;
|
||||
}
|
||||
.side-scroll {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.side-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
#sidebar.collapsed .side-section {
|
||||
#sidebar.collapsed .side-scroll {
|
||||
display: none;
|
||||
}
|
||||
.side-head {
|
||||
@@ -250,14 +258,6 @@ body {
|
||||
#project-tree,
|
||||
#other-session-list {
|
||||
padding: 0 8px 8px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
#project-tree {
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
#sec-others {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
.proj-group {
|
||||
margin: 2px 0;
|
||||
@@ -421,6 +421,8 @@ body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background: var(--bg-base);
|
||||
}
|
||||
header {
|
||||
@@ -613,6 +615,7 @@ header h1 {
|
||||
}
|
||||
#chat {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
padding: var(--sp-6) var(--sp-4);
|
||||
max-width: none;
|
||||
@@ -791,6 +794,7 @@ label.vh {
|
||||
border: 0;
|
||||
}
|
||||
#composer {
|
||||
flex-shrink: 0;
|
||||
border-top: none;
|
||||
background: transparent;
|
||||
padding: var(--sp-3) var(--sp-4) var(--sp-4);
|
||||
|
||||
@@ -15,16 +15,18 @@
|
||||
<div class="brand-name">Genesis<span class="brand-sub">概要设计书做成Agent</span></div>
|
||||
</div>
|
||||
<button id="new-chat" title="新建会话"><span class="ic-plus">+</span><span class="nc-text">新会话</span></button>
|
||||
<div class="side-section" id="sec-projects">
|
||||
<div class="side-head">
|
||||
<span class="side-title">项目</span>
|
||||
<button id="side-add-project" class="side-add" type="button" title="追加项目">+</button>
|
||||
<div class="side-scroll">
|
||||
<div class="side-section" id="sec-projects">
|
||||
<div class="side-head">
|
||||
<span class="side-title">项目</span>
|
||||
<button id="side-add-project" class="side-add" type="button" title="追加项目">+</button>
|
||||
</div>
|
||||
<div id="project-tree"></div>
|
||||
</div>
|
||||
<div class="side-section" id="sec-others">
|
||||
<div class="side-head"><span class="side-title">其他会话</span></div>
|
||||
<div id="other-session-list"></div>
|
||||
</div>
|
||||
<div id="project-tree"></div>
|
||||
</div>
|
||||
<div class="side-section" id="sec-others">
|
||||
<div class="side-head"><span class="side-title">其他会话</span></div>
|
||||
<div id="other-session-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user