Skip to content

style(shell): 收紧外壳、侧栏与输入框样式（超椭圆输入框与弹出菜单统一） #223

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lioensky merged 1 commit into from
Oct 2, 2026
Merged

style(shell): 收紧外壳、侧栏与输入框样式（超椭圆输入框与弹出菜单统一） #223

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 12 additions & 13 deletions main.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -483,9 +483,17 @@ <h3 id="currentChatAgentName">选择一个Agent开始聊天</h3>
</path>
</svg>
</button>
<button id="voiceChatBtn" class="header-button" type="button" title="语音聊天"
style="margin-right: 5px; display: none;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"
stroke="currentColor" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<rect x="5" y="1.5" width="6" height="9" rx="3"></rect>
<path d="M2.35 8.675C3.075 11.3 5.2 13.125 8 13.125C10.8 13.125 12.925 11.3 13.65 8.675M8 13.125V15"></path>
</svg>
</button>

<button id="currentAgentSettingsBtn" class="header-button" type="button" title="当前Agent设置" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110 44" width="110" height="44"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="2.6 0 97 44" width="97" height="44"
aria-hidden="true">
<g transform="translate(1 2) scale(1.62)" stroke="currentColor" stroke-width="2" fill="none"
stroke-linejoin="round" stroke-linecap="round">
Expand All @@ -497,21 +505,12 @@ <h3 id="currentChatAgentName">选择一个Agent开始聊天</h3>
</g>
<g fill="currentColor" font-family="system-ui, -apple-system, sans-serif" font-size="15"
font-weight="500">
<text x="45" y="17">CREATE</text>
<text x="45" y="33">TOPIC</text>
<text x="45" y="19">CREATE</text>
<text x="45" y="35">TOPIC</text>
</g>
</svg>
<span class="button-label">新建聊天话题</span>
</button>
<button id="voiceChatBtn" class="header-button" type="button" title="语音聊天"
style="margin-right: 5px; display: none;">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 19v3"></path>
<path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
<rect x="9" y="2" width="6" height="13" rx="3"></rect>
</svg>
</button>
<span id="nextUiChatNotificationHost" class="next-ui-notification-toggle-host"></span>
</div>
</header>
Expand Down Expand Up @@ -605,7 +604,7 @@ <h3 id="currentChatAgentName">选择一个Agent开始聊天</h3>
</div>
</footer>
</main>
<div class="resizer" id="resizerRight"></div>
<div class="resizer vcp-ui-scope" id="resizerRight"></div>
<aside class="notifications-sidebar vcp-ui-scope" id="notificationsSidebar">
<header class="notifications-header">
<h4 id="notificationTitle" style="display: none;">VCP 通知</h4>
Expand Down
2 changes: 1 addition & 1 deletion modules/chatManager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -609,7 +609,7 @@ export const chatManager = (() => {
currentItemActionBtn.style.display = 'inline-flex';

if (voiceChatBtn) {
voiceChatBtn.style.display = itemType === 'agent' ? 'inline-block' : 'none';
voiceChatBtn.style.display = itemType === 'agent' ? 'inline-flex' : 'none';
}

itemListManager.highlightActiveItem(itemId, itemType);
Expand Down
4 changes: 2 additions & 2 deletions scripts/next-delta-shared-baseline.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"modules/chatManager.js": {
"sha256": "b2525a25fb0996fa9ff74483dc117e1058a588fb2656ea075d38d6bbdcb9418e",
"reason": "upstream chat core plus exact Surface stream routing, independent conversation capability, initiating-Surface cleanup, injected send-state capability, durable history authority, and no direct IPC fallback; deletion and topic-summary completion replace immutable selection snapshots through their authority; outgoing attachment draft identity changes on append so a file added during durable persistence is preserved; selection intent persists before watcher/history work and restore waits for topic projection before reporting completion; named ChatManager lifecycle retracts canvas subscriptions, observer, forward timers and selection authority before draining persistence queues; file-history sync now captures selection/topic generations and revalidates the active conversation after its read, protects stream ids captured before the read from terminal/delete races, reconciles active StreamProjection snapshots after history/DOM replacement without taking over durable persistence, and routes last-open settings updates through operation-aware path patches to avoid complete-snapshot overwrite"
"sha256": "c419c32dd4f83389c6bfb8b5509f14478db518dd879ed8697fea6fe20d508bd0",
"reason": "upstream chat core plus exact Surface stream routing, independent conversation capability, initiating-Surface cleanup, injected send-state capability, durable history authority, and no direct IPC fallback; deletion and topic-summary completion replace immutable selection snapshots through their authority; outgoing attachment draft identity changes on append so a file added during durable persistence is preserved; selection intent persists before watcher/history work and restore waits for topic projection before reporting completion; named ChatManager lifecycle retracts canvas subscriptions, observer, forward timers and selection authority before draining persistence queues; file-history sync now captures selection/topic generations and revalidates the active conversation after its read, protects stream ids captured before the read from terminal/delete races, reconciles active StreamProjection snapshots after history/DOM replacement without taking over durable persistence, and routes last-open settings updates through operation-aware path patches to avoid complete-snapshot overwrite; voice chat button uses inline-flex to match the header button layout"
},
"modules/messageRenderer.js": {
"sha256": "9172101e6ac05bd9c4dfec5186cfeb7ba2c65d724dbfc65ace79188d21e00700",
Expand Down
2 changes: 1 addition & 1 deletion scripts/test-appearance-engine.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ assert.match(appearanceCss, /\.vcp-material-optics\s*\{[^}]*position:\s*fixed/s)
assert.match(appearanceCss, /html\[data-vcp-radius="square"\] \.vcp-ui-scope/);
assert.doesNotMatch(appearanceCss, /data-ui-mode/);
assert.match(appearanceCss, /--vcp-ui-font-family:\s*var\(--vcp-appearance-font-family\)/);
assert.match(appearanceCss, /\.chat-input-card\s*\{\s*border-radius:\s*var\(--vcp-ui-composer-radius, 24px\)/s);
assert.match(appearanceCss, /\.chat-input-card\s*\{\s*border-radius:\s*var\(--vcp-ui-composer-radius, 28px\)/s);
assert.match(appearanceCss, /--vcp-ui-shell-radius:\s*0px/);
assert.match(appearanceCss, /--vcp-ui-shell-radius:\s*18px/);
assert.match(appearanceCss, /data-vcp-shell-radius="tuned"/);
Expand Down
62 changes: 53 additions & 9 deletions styles/appearance.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,7 +184,7 @@
}

html[data-vcp-composer-radius="tuned"],
html[data-vcp-composer-radius="tuned"] .vcp-ui-scope { --vcp-ui-composer-radius: 24px; }
html[data-vcp-composer-radius="tuned"] .vcp-ui-scope { --vcp-ui-composer-radius: 28px; }
html[data-vcp-composer-radius="follow"],
html[data-vcp-composer-radius="follow"] .vcp-ui-scope { --vcp-ui-composer-radius: var(--vcp-ui-radius-xl); }
html[data-vcp-composer-radius="square"],
Expand Down Expand Up @@ -330,18 +330,27 @@

html .vcp-ui-scope {
--vcp-ui-font-family: var(--vcp-appearance-font-family);
--vcp-ui-font-caption: calc(12px * var(--vcp-appearance-font-scale));
--vcp-ui-font-micro: calc(10px * var(--vcp-appearance-font-scale));
--vcp-ui-font-helper: calc(13px * var(--vcp-appearance-font-scale));
--vcp-ui-font-body: calc(14px * var(--vcp-appearance-font-scale));
--vcp-ui-font-emphasis: calc(15px * var(--vcp-appearance-font-scale));
--vcp-ui-font-title: calc(18px * var(--vcp-appearance-font-scale));
--vcp-ui-font-display: calc(22px * var(--vcp-appearance-font-scale));
--vcp-ui-font-size: calc(14px * var(--vcp-appearance-font-scale));
--vcp-ui-text-xl: calc(var(--vcp-ui-font-size) + 4px);
--vcp-ui-text-lg: calc(var(--vcp-ui-font-size) + 2px);
--vcp-ui-text-base: var(--vcp-ui-font-size);
--vcp-ui-text-caption: calc(var(--vcp-ui-font-size) - 1px);
--vcp-ui-text-sm: calc(var(--vcp-ui-font-size) - 2px);
--vcp-ui-text-xs: calc(var(--vcp-ui-font-size) - 4px);
/* Compatibility aliases for the existing VCPUI components. */
--vcp-ui-font-caption: var(--vcp-ui-text-sm);
--vcp-ui-font-micro: var(--vcp-ui-text-xs);
--vcp-ui-font-helper: var(--vcp-ui-text-caption);
--vcp-ui-font-body: var(--vcp-ui-text-base);
--vcp-ui-font-emphasis: var(--vcp-ui-text-base);
--vcp-ui-font-section: var(--vcp-ui-text-lg);
--vcp-ui-font-title: var(--vcp-ui-text-xl);
--vcp-ui-font-display: var(--vcp-ui-text-xl);
font-family: var(--vcp-ui-font-family);
}

html .vcp-ui-scope .chat-input-card {
border-radius: var(--vcp-ui-composer-radius, 24px);
border-radius: var(--vcp-ui-composer-radius, 28px);
}

html[data-vcp-content-width="centered"] .chat-messages {
Expand Down Expand Up @@ -378,3 +387,38 @@
.appearance-settings-grid { grid-template-columns: 1fr; }
}
}

/* Advanced-reply popover (+ button / send right-click): same surface as the
composer card it opens from, with the soft composer-popover lift and a
superellipse corner; rows inset 4px take 12px to stay concentric. */
html body .tavern-popover {
border: 1px solid var(--vcp-ui-composer-border);
border-radius: 16px;
background: var(--vcp-ui-composer-input);
box-shadow: var(--vcp-ui-composer-popover-shadow);
}

html body .tavern-popover .tavern-rule-row {
border-radius: 12px;
}

html body .tavern-popover .tavern-popover-search-input:not(:focus) {
border-color: var(--vcp-ui-composer-border);
}

/* The light theme gives the mini switch track a 1px border, but the knob kept
its borderless 2px offset, which is measured inside that border: it sat 3px
from the top and 1px from the bottom. 1px inside the border puts it 2px
from every edge, in both positions. */
html body:is(.light-theme, [data-vcp-theme="light"]) .tavern-popover .tavern-switch .tavern-slider::before {
top: 1px;
left: 1px;
}

/* stylelint-disable property-no-unknown, function-no-unknown */
@supports (corner-shape: superellipse(1.5)) {
html body .tavern-popover {
corner-shape: superellipse(1.5);
}
}
/* stylelint-enable property-no-unknown, function-no-unknown */
4 changes: 0 additions & 4 deletions styles/components.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -447,10 +447,6 @@ body:not(.light-theme) .chat-actions .header-button {
flex-shrink: 0;
}

.chat-actions .header-button#voiceChatBtn svg {
transform: translateY(1.4px);
}

.chat-actions .header-button#currentAgentSettingsBtn svg {
transform: translate(3px, 0);
}
Expand Down
Loading
Loading