JOJO/agent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: JOJO:d9eff0c80380beedaa371c6c7f396093e473641e
Branches Tags
JOJO:main
..
compare: JOJO:6921939c134074392b770175a89385f64b564a51
Branches Tags
JOJO:main

No commits in common. "d9eff0c80380beedaa371c6c7f396093e473641e" and "6921939c134074392b770175a89385f64b564a51" have entirely different histories.
d9eff0c803 ... 6921939c13

4 changed files with 508 additions and 1194 deletions
Show Stats Expand all files Collapse all files

134
static/app.js
View File

@ -200,10 +200,8 @@ async function bootstrapApp() {
// 对话压缩状态
compressing: false,
// 输入/快捷菜单状态
// 设置菜单状态
settingsOpen: false,
quickMenuOpen: false,
inputLineCount: 1,
// 思考块滚动锁
thinkingScrollLocks: new Map(),
@ -256,7 +254,8 @@ async function bootstrapApp() {
this.loadInitialData();
}, 500);
document.addEventListener('click', this.handleClickOutsideQuickMenu);
document.addEventListener('click', this.handleClickOutsideSettings);
document.addEventListener('click', this.handleClickOutsideToolMenu);
document.addEventListener('click', this.handleClickOutsidePanelMenu);
window.addEventListener('popstate', this.handlePopState);
@ -292,14 +291,11 @@ async function bootstrapApp() {
this.fetchSubAgents();
}
}, 5000);
this.$nextTick(() => {
this.autoResizeInput();
});
},
beforeUnmount() {
document.removeEventListener('click', this.handleClickOutsideQuickMenu);
document.removeEventListener('click', this.handleClickOutsideSettings);
document.removeEventListener('click', this.handleClickOutsideToolMenu);
document.removeEventListener('click', this.handleClickOutsidePanelMenu);
window.removeEventListener('popstate', this.handlePopState);
if (this.onDocumentClick) {
@ -319,12 +315,6 @@ async function bootstrapApp() {
this.subAgentPollTimer = null;
}
},
watch: {
inputMessage() {
this.autoResizeInput();
}
},
methods: {
openGuiFileManager() {
@ -1320,8 +1310,6 @@ async function bootstrapApp() {
this.settingsOpen = false;
this.toolMenuOpen = false;
this.quickMenuOpen = false;
this.inputLineCount = 1;
this.toolSettingsLoading = false;
this.toolSettings = [];
@ -1708,9 +1696,6 @@ async function bootstrapApp() {
const metadata = message.metadata || {};
const appendPayloadMeta = metadata.append_payload;
const modifyPayloadMeta = metadata.modify_payload;
const isAppendMessage = message.name === 'append_to_file';
const isModifyMessage = message.name === 'modify_file';
const containsAppendMarkers = /<<<\s*(APPEND|MODIFY)/i.test(content || '') || /<<<END_\s*(APPEND|MODIFY)>>>/i.test(content || '');
let textContent = content;
if (!message.reasoning_content) {
@ -1753,7 +1738,7 @@ async function bootstrapApp() {
console.log('添加modify占位信息:', modifyPayloadMeta.path);
}
if (textContent && !appendPayloadMeta && !modifyPayloadMeta && !isAppendMessage && !isModifyMessage && !containsAppendMarkers) {
if (textContent && !appendPayloadMeta && !modifyPayloadMeta) {
currentAssistantMessage.actions.push({
id: `history-text-${Date.now()}-${Math.random()}`,
type: 'text',
@ -1837,7 +1822,22 @@ async function bootstrapApp() {
}
console.log(`更新工具结果: ${message.name} -> ${message.content?.substring(0, 50)}...`);
// append_to_file 的摘要在 append_payload 占位中呈现，此处无需重复
if (message.name === 'append_to_file' && result && typeof result === 'object') {
const appendSummary = {
path: result.path || '未知文件',
success: result.success !== false,
summary: result.message || (result.success === false ? '追加失败' : '追加完成'),
lines: result.lines || 0,
bytes: result.bytes || 0,
forced: !!result.forced
};
currentAssistantMessage.actions.push({
id: `history-append-${Date.now()}-${Math.random()}`,
type: 'append',
append: appendSummary,
timestamp: Date.now()
});
}
} else {
console.warn('找不到对应的工具调用:', message.name, message.tool_call_id);
}
@ -2319,7 +2319,7 @@ async function bootstrapApp() {
if (message.startsWith('/')) {
this.socket.emit('send_command', { command: message });
this.inputMessage = '';
this.autoResizeInput();
this.settingsOpen = false;
return;
}
@ -2333,7 +2333,7 @@ async function bootstrapApp() {
this.inputMessage = '';
this.autoScrollEnabled = true;
this.scrollToBottom();
this.autoResizeInput();
this.settingsOpen = false;
// 发送消息后延迟更新当前上下文Token（关键修复：恢复原逻辑）
setTimeout(() => {
@ -2350,12 +2350,14 @@ async function bootstrapApp() {
this.stopRequested = true;
console.log('发送停止请求');
}
this.settingsOpen = false;
},
clearChat() {
if (confirm('确定要清除所有对话记录吗？')) {
this.socket.emit('send_command', { command: '/clear' });
}
this.settingsOpen = false;
},
async compressConversation() {
@ -2373,6 +2375,7 @@ async function bootstrapApp() {
return;
}
this.settingsOpen = false;
this.compressing = true;
try {
@ -2408,75 +2411,19 @@ async function bootstrapApp() {
this.toolMenuOpen = nextState;
if (nextState) {
this.settingsOpen = false;
if (!this.quickMenuOpen) {
this.quickMenuOpen = true;
}
this.loadToolSettings();
}
},
toggleQuickMenu() {
if (!this.isConnected) {
handleClickOutsideToolMenu(event) {
if (!this.toolMenuOpen) {
return;
}
const nextState = !this.quickMenuOpen;
this.quickMenuOpen = nextState;
if (!nextState) {
const dropdown = this.$refs.toolDropdown;
if (dropdown && !dropdown.contains(event.target)) {
this.toolMenuOpen = false;
this.settingsOpen = false;
}
},
closeQuickMenu() {
this.quickMenuOpen = false;
this.toolMenuOpen = false;
this.settingsOpen = false;
},
handleQuickUpload() {
if (this.uploading || !this.isConnected) {
return;
}
this.triggerFileUpload();
},
handleQuickModeToggle() {
if (!this.isConnected || this.streamingMessage) {
return;
}
this.toggleThinkingMode();
},
handleInputChange() {
this.autoResizeInput();
},
autoResizeInput() {
this.$nextTick(() => {
const textarea = this.$refs.stadiumInput;
if (!textarea) {
return;
}
textarea.style.height = 'auto';
const computedStyle = window.getComputedStyle(textarea);
const lineHeight = parseFloat(computedStyle.lineHeight || '20') || 20;
const maxHeight = lineHeight * 6;
const newHeight = Math.min(textarea.scrollHeight, maxHeight);
textarea.style.height = `${newHeight}px`;
this.inputLineCount = Math.max(1, Math.round(newHeight / lineHeight));
});
},
handleClickOutsideQuickMenu(event) {
if (!this.quickMenuOpen) {
return;
}
const shell = this.$refs.compactInputShell;
if (shell && shell.contains(event.target)) {
return;
}
this.closeQuickMenu();
},
handleClickOutsidePanelMenu(event) {
if (!this.panelMenuOpen) {
@ -2571,13 +2518,9 @@ async function bootstrapApp() {
if (!this.isConnected) {
return;
}
const nextState = !this.settingsOpen;
this.settingsOpen = nextState;
if (nextState) {
this.settingsOpen = !this.settingsOpen;
if (this.settingsOpen) {
this.toolMenuOpen = false;
if (!this.quickMenuOpen) {
this.quickMenuOpen = true;
}
}
},
@ -2586,8 +2529,19 @@ async function bootstrapApp() {
if (!this.rightCollapsed && this.rightWidth < this.minPanelWidth) {
this.rightWidth = this.minPanelWidth;
}
this.settingsOpen = false;
},
handleClickOutsideSettings(event) {
if (!this.settingsOpen) {
return;
}
const dropdown = this.$refs.settingsDropdown;
if (dropdown && !dropdown.contains(event.target)) {
this.settingsOpen = false;
}
},
addSystemMessage(content) {
this.appendSystemAction(content);
},

607
static/demo_compact_layout.html
View File

@ -1,607 +0,0 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>紧凑输入区 Demo</title>
<style>
:root {
--bg: #f1efe7;
--panel: rgba(255, 255, 255, 0.9);
--sidebar: rgba(255, 255, 255, 0.72);
--border: rgba(118, 103, 84, 0.35);
--text: #3d3929;
--muted: #8c8374;
--accent: #d37250;
--accent-strong: #b65937;
--shadow: 0 15px 40px rgba(61, 57, 41, 0.18);
--token-bg: rgba(255, 255, 255, 0.95);
--tool-bg: rgba(230, 224, 207, 0.4);
--success: #5e9f6d;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: "PingFang SC", "SF Pro Display", "Iowan Old Style", ui-serif, Georgia, serif;
background: var(--bg);
color: var(--text);
min-height: 100vh;
display: flex;
}
.demo-app {
display: grid;
grid-template-columns: 260px 1fr 300px;
width: 100%;
min-height: 100vh;
overflow: hidden;
}
aside {
padding: 24px 20px;
border-right: 1px solid var(--border);
background: var(--sidebar);
backdrop-filter: blur(18px);
}
.conversation-panel {
border-right: 1px solid var(--border);
}
.conversation-panel h2,
.workspace-panel h2 {
margin-bottom: 16px;
font-size: 17px;
}
.conversation-item {
padding: 10px 12px;
border: 1px solid transparent;
border-radius: 10px;
margin-bottom: 8px;
cursor: pointer;
transition: border 0.2s ease, background 0.2s ease;
}
.conversation-item.active {
border-color: var(--accent);
background: rgba(211, 114, 80, 0.08);
}
.chat-shell {
position: relative;
display: flex;
flex-direction: column;
padding: 32px 48px 24px;
overflow: hidden;
}
.status-beacon {
position: absolute;
top: 18px;
left: 32px;
width: 240px;
z-index: 2;
}
.status-card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 18px;
padding: 12px 16px;
box-shadow: var(--shadow);
}
.status-title {
font-size: 15px;
font-weight: 600;
margin-bottom: 4px;
}
.status-meta {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 13px;
color: var(--muted);
}
.status-meta span {
display: flex;
align-items: center;
gap: 6px;
}
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--success);
box-shadow: 0 0 10px rgba(94, 159, 109, 0.6);
}
.chat-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 18px;
padding-top: 96px;
}
.token-shelf {
width: min(820px, 85%);
margin: 0 auto;
position: relative;
transition: transform 0.35s ease;
}
.token-panel {
background: var(--token-bg);
border: 1px solid var(--border);
border-radius: 20px;
padding: 12px 20px;
box-shadow: var(--shadow);
transition: opacity 0.35s ease, transform 0.35s ease;
}
.token-shelf[data-collapsed="true"] .token-panel {
transform: translateY(-110%);
opacity: 0;
pointer-events: none;
}
.token-stats {
display: flex;
justify-content: space-between;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
}
.token-value {
font-size: 20px;
font-weight: 600;
color: var(--text);
margin-top: 6px;
}
.token-toggle {
position: absolute;
top: -12px;
left: 50%;
transform: translate(-50%, -100%);
width: 64px;
height: 32px;
border-radius: 999px 999px 0 0;
border: 1px solid var(--border);
border-bottom: none;
background: var(--panel);
cursor: pointer;
box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.08);
}
.token-toggle span {
display: inline-block;
transition: transform 0.3s ease;
}
.token-shelf[data-collapsed="true"] .token-toggle span {
transform: rotate(180deg);
}
.messages {
flex: 1;
min-height: 0;
border-radius: 24px;
padding: 28px 32px;
background: var(--panel);
border: 1px solid var(--border);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 18px;
}
.message {
padding: 16px 18px;
border-radius: 18px;
line-height: 1.6;
background: rgba(255, 255, 255, 0.8);
}
.message.user {
align-self: flex-end;
background: rgba(211, 114, 80, 0.15);
}
.message.assistant {
align-self: flex-start;
}
.tool-card {
background: var(--tool-bg);
border-radius: 14px;
padding: 12px 16px;
margin-top: 10px;
font-size: 13px;
}
.input-region {
padding-bottom: 12px;
}
.input-shell {
position: relative;
width: min(840px, 92%);
margin: 0 auto;
border: 1px solid var(--border);
border-radius: 999px;
background: rgba(255, 255, 255, 0.96);
box-shadow: var(--shadow);
padding: 8px 56px;
transition: border-radius 0.25s ease, padding 0.25s ease, min-height 0.25s ease;
display: flex;
align-items: center;
}
.input-shell.expanded {
border-radius: 34px;
padding-top: 18px;
padding-bottom: 18px;
align-items: flex-end;
}
.icon-btn {
position: absolute;
border: none;
background: transparent;
font-size: 22px;
cursor: pointer;
color: var(--text);
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease, transform 0.2s ease;
}
.icon-btn.plus {
left: 8px;
bottom: 10px;
}
.icon-btn.send {
right: 8px;
bottom: 10px;
background: var(--accent);
color: #fff;
box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);
}
.input-shell.expanded .icon-btn.plus,
.input-shell.expanded .icon-btn.send {
bottom: 14px;
}
.icon-btn:hover {
background: rgba(0, 0, 0, 0.05);
}
.icon-btn.send:hover {
background: var(--accent-strong);
}
.input-field {
width: 100%;
border: none;
resize: none;
font-size: 15px;
line-height: 1.5;
background: transparent;
color: var(--text);
padding: 4px 0;
outline: none;
max-height: calc(1.5em * 4);
transition: height 0.25s ease;
}
.primary-menu {
position: absolute;
left: 0;
bottom: calc(100% + 12px);
display: flex;
flex-direction: column;
gap: 6px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 18px;
box-shadow: var(--shadow);
padding: 10px;
width: 180px;
opacity: 0;
transform: translateY(10px);
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.primary-menu[data-open="true"] {
opacity: 1;
transform: translateY(0);
pointer-events: all;
}
.menu-entry {
background: transparent;
border: none;
padding: 8px 12px;
border-radius: 12px;
text-align: left;
font-size: 14px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
color: var(--text);
}
.menu-entry:hover {
background: rgba(0, 0, 0, 0.05);
}
.submenu-panel {
position: absolute;
bottom: calc(100% + 12px);
left: 190px;
width: 160px;
padding: 10px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: var(--shadow);
opacity: 0;
transform: translateY(10px);
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.submenu-panel[data-open="true"] {
opacity: 1;
transform: translateY(0);
pointer-events: all;
}
.submenu-panel button {
width: 100%;
border: none;
background: transparent;
padding: 8px;
text-align: left;
border-radius: 10px;
cursor: pointer;
font-size: 13px;
}
.submenu-panel button:hover {
background: rgba(0, 0, 0, 0.05);
}
.workspace-panel {
border-right: none;
border-left: 1px solid var(--border);
}
.workspace-panel .focus-card {
background: rgba(255, 255, 255, 0.85);
border-radius: 14px;
padding: 12px;
margin-bottom: 12px;
border: 1px solid rgba(61, 57, 41, 0.08);
}
@media (max-width: 1200px) {
.demo-app {
grid-template-columns: 220px 1fr;
}
.workspace-panel {
display: none;
}
}
@media (max-width: 960px) {
.demo-app {
grid-template-columns: 1fr;
}
aside {
display: none;
}
.chat-shell {
padding: 32px 20px;
}
.input-shell {
width: 100%;
}
}
</style>
</head>
<body>
<div class="demo-app">
<aside class="conversation-panel">
<h2>🗂️ 对话记录</h2>
<div class="conversation-item active">
最近：修复 token 面板交互
</div>
<div class="conversation-item">
设计新输入栏
</div>
<div class="conversation-item">
子智能体联调
</div>
</aside>
<div class="chat-shell">
<div class="status-beacon">
<div class="status-card">
<div class="status-title">🤖 AI Agent</div>
<div class="status-meta">
<span>版本号 · v0.9.5</span>
<span>模式 · 思考模式</span>
<span><span class="status-dot"></span> 已连接</span>
</div>
</div>
</div>
<div class="chat-content">
<div class="token-shelf" data-collapsed="false">
<div class="token-panel">
<div class="token-stats">
<div>
<span>当前上下文</span>
<div class="token-value">4,320</div>
</div>
<div>
<span>累计输入</span>
<div class="token-value">18,955</div>
</div>
<div>
<span>累计输出</span>
<div class="token-value">12,204</div>
</div>
</div>
</div>
<button class="token-toggle" type="button">
<span>▲</span>
</button>
</div>
<div class="messages">
<article class="message user">
我想让对话区域更高一些，顶部的状态栏太占地方了。
</article>
<article class="message assistant">
我们可以把顶部信息收纳在侧边栏上方，只留下 token 面板和消息流，视觉上能腾出大量空间。下面是一个示例工具调用卡片：
<div class="tool-card">
<strong>🛠️ read_file</strong>
<div>在 static/app.js 中定位输入框逻辑。</div>
</div>
</article>
<article class="message user">
输入栏需要合并工具按钮，保持 ChatGPT 的简洁风格。
</article>
<article class="message assistant">
已为你准备体育场式输入控件，并附带浮动菜单（上传文件、切换模式、工具禁用、设置等）。
</article>
</div>
<div class="input-region">
<div class="input-shell" data-state="single">
<button class="icon-btn plus" type="button" aria-label="展开菜单" data-role="menu-toggle">+</button>
<textarea class="input-field" rows="1" placeholder="输入内容，按 Enter 发送，Shift + Enter 换行"></textarea>
<button class="icon-btn send" type="button" aria-label="发送消息">→</button>
<div class="primary-menu" data-open="false">
<button class="menu-entry" type="button">上传文件</button>
<button class="menu-entry with-sub" type="button" data-menu-target="tools">工具禁用 <span>›</span></button>
<button class="menu-entry" type="button">快速 / 思考切换</button>
<button class="menu-entry with-sub" type="button" data-menu-target="settings">设置 <span>›</span></button>
</div>
<div class="submenu-panel" id="tools-submenu" data-open="false">
<button type="button">read_file</button>
<button type="button">run_command</button>
<button type="button">web_search</button>
</div>
<div class="submenu-panel" id="settings-submenu" data-open="false">
<button type="button">实时终端</button>
<button type="button">聚焦面板</button>
<button type="button">压缩对话</button>
</div>
</div>
</div>
</div>
</div>
<aside class="workspace-panel">
<h2>📁 聚焦与终端</h2>
<div class="focus-card">
<strong>focus_file · main.py</strong>
<p>状态：已锁定</p>
</div>
<div class="focus-card">
<strong>终端 #1</strong>
<p>pip install -r requirements.txt</p>
</div>
</aside>
</div>
<script>
const tokenShelf = document.querySelector('.token-shelf');
const tokenToggle = document.querySelector('.token-toggle');
const inputShell = document.querySelector('.input-shell');
const textarea = document.querySelector('.input-field');
const primaryMenu = document.querySelector('.primary-menu');
const plusButton = document.querySelector('[data-role="menu-toggle"]');
const submenuPanels = {
tools: document.getElementById('tools-submenu'),
settings: document.getElementById('settings-submenu')
};
tokenToggle.addEventListener('click', () => {
const collapsed = tokenShelf.getAttribute('data-collapsed') === 'true';
tokenShelf.setAttribute('data-collapsed', String(!collapsed));
});
const singleLineHeight = 28;
function autoResize() {
textarea.style.height = 'auto';
const maxHeight = parseFloat(getComputedStyle(textarea).lineHeight) * 4;
const newHeight = Math.min(textarea.scrollHeight, maxHeight);
textarea.style.height = newHeight + 'px';
if (newHeight > singleLineHeight + 4) {
inputShell.classList.add('expanded');
} else {
inputShell.classList.remove('expanded');
}
}
textarea.addEventListener('input', autoResize);
autoResize();
plusButton.addEventListener('click', (event) => {
event.stopPropagation();
const open = primaryMenu.getAttribute('data-open') === 'true';
primaryMenu.setAttribute('data-open', String(!open));
if (open) {
Object.values(submenuPanels).forEach(panel => panel.setAttribute('data-open', 'false'));
}
});
document.querySelectorAll('.menu-entry.with-sub').forEach(button => {
button.addEventListener('click', (event) => {
event.stopPropagation();
const target = button.getAttribute('data-menu-target');
const panel = submenuPanels[target];
const state = panel.getAttribute('data-open') === 'true';
Object.entries(submenuPanels).forEach(([key, node]) => {
node.setAttribute('data-open', key === target && !state ? 'true' : 'false');
});
});
});
document.addEventListener('click', (event) => {
if (!inputShell.contains(event.target)) {
primaryMenu.setAttribute('data-open', 'false');
Object.values(submenuPanels).forEach(panel => panel.setAttribute('data-open', 'false'));
}
});
</script>
</body>
</html>

279
static/index.html
View File

@ -38,6 +38,21 @@
<!-- Main UI (只在连接后显示) -->
<template v-else>
<!-- 顶部状态栏 -->
<header class="header">
<div class="header-left">
<span class="logo">🤖 AI Agent</span>
<span class="agent-version" v-if="agentVersion">{{ agentVersion }}</span>
</div>
<div class="header-right">
<span class="thinking-mode">{{ thinkingMode ? '思考模式' : '快速模式' }}</span>
<span class="connection-status" :class="{ connected: isConnected }">
<span class="status-dot" :class="{ active: isConnected }"></span>
{{ isConnected ? '已连接' : '未连接' }}
</span>
</div>
</header>
<div class="main-container">
<!-- 新增：对话历史侧边栏（最左侧） -->
<aside class="conversation-sidebar" :class="{ collapsed: sidebarCollapsed }">
@ -112,21 +127,6 @@
<!-- 左侧文件树 -->
<aside class="sidebar left-sidebar" :style="{ width: leftWidth + 'px' }">
<div class="sidebar-status">
<div class="compact-status-card">
<div class="status-top">
<span class="logo">🤖 AI Agent</span>
<span class="agent-version" v-if="agentVersion">{{ agentVersion }}</span>
</div>
<div class="status-bottom">
<span class="thinking-chip">{{ thinkingMode ? '思考模式' : '快速模式' }}</span>
<span class="connection-chip" :class="{ connected: isConnected }">
<span class="status-dot" :class="{ active: isConnected }"></span>
{{ isConnected ? '已连接' : '未连接' }}
</span>
</div>
</div>
</div>
<div class="sidebar-header">
<div class="panel-menu-wrapper" ref="panelMenuWrapper">
<button class="sidebar-view-toggle"
@ -222,18 +222,32 @@
<!-- 中间聊天区域 -->
<main class="chat-container">
<div class="token-drawer" v-if="currentConversationId" :class="{ collapsed: tokenPanelCollapsed }">
<div class="token-display-panel">
<!-- 当前对话信息栏 -->
<div class="current-conversation-info" v-if="currentConversationTitle">
<span class="conversation-title-display">{{ currentConversationTitle }}</span>
<span class="conversation-stats">
<span class="message-count">{{ messages.length }}条消息</span>
</span>
</div>
<!-- Token区域包装器 -->
<div class="token-wrapper" v-if="currentConversationId">
<!-- Token统计显示面板 -->
<div class="token-display-panel" :class="{ collapsed: tokenPanelCollapsed }">
<div class="token-panel-content">
<div class="token-stats">
<div class="token-item">
<span class="token-label">当前上下文</span>
<span class="token-value current">{{ formatTokenCount(currentContextTokens || 0) }}</span>
</div>
<div class="token-separator"></div>
<div class="token-item">
<span class="token-label">累计输入</span>
<span class="token-value input">{{ formatTokenCount(currentConversationTokens.cumulative_input_tokens || 0) }}</span>
</div>
<div class="token-item">
<span class="token-label">累计输出</span>
<span class="token-value output">{{ formatTokenCount(currentConversationTokens.cumulative_output_tokens || 0) }}</span>
@ -241,6 +255,12 @@
</div>
</div>
</div>
<!-- 独立的切换按钮 -->
<button @click="toggleTokenPanel" class="token-toggle-btn" :class="{ collapsed: tokenPanelCollapsed }">
<span v-if="!tokenPanelCollapsed">▲</span>
<span v-else>▼</span>
</button>
</div>
<div class="messages-area" ref="messagesArea">
@ -331,25 +351,6 @@
</div>
</div>
<!-- 追加结果摘要 -->
<div v-else-if="action.type === 'append'"
class="append-placeholder"
:class="{ 'append-error': action.append?.success === false }">
<div class="append-placeholder-content">
<div>
✏️ {{ action.append?.summary || '文件追加完成' }}
</div>
<div class="append-meta" v-if="action.append">
<span>{{ action.append.path || '目标文件' }}</span>
<span v-if="action.append.lines">· 行数 {{ action.append.lines }}</span>
<span v-if="action.append.bytes">· 字节 {{ action.append.bytes }}</span>
</div>
<div class="append-warning" v-if="action.append?.forced">
⚠️ 未检测到结束标记，请按提示继续补充。
</div>
</div>
</div>
<!-- 修改内容占位 -->
<div v-else-if="action.type === 'modify_payload'" class="modify-placeholder">
<div class="modify-placeholder-content">
@ -374,21 +375,6 @@
</div>
</div>
<!-- 修改结果摘要 -->
<div v-else-if="action.type === 'modify'" class="modify-placeholder">
<div class="modify-placeholder-content">
🛠️ {{ action.modify?.summary || `已处理 ${action.modify?.path || '目标文件'}` }}
<div class="modify-meta" v-if="action.modify">
<span v-if="action.modify.total">· 共 {{ action.modify.total }} 处</span>
<span v-if="action.modify.completed">· 完成 {{ action.modify.completed.length || action.modify.completed }} 处</span>
<span v-if="action.modify.failed">· 未完成 {{ action.modify.failed.length || action.modify.failed }} 处</span>
</div>
<div class="modify-warning" v-if="action.modify?.forced">
⚠️ 未检测到结束标记，系统已自动处理。
</div>
</div>
</div>
<!-- 工具块（修复版） -->
<div v-else-if="action.type === 'tool'"
class="collapsible-block tool-block"
@ -454,21 +440,7 @@
<!-- 系统消息 -->
<div v-else class="system-message">
<div class="collapsible-block system-block"
:class="{ expanded: expandedBlocks.has(`system-${index}`) }">
<div class="collapsible-header" @click="toggleBlock(`system-${index}`)">
<div class="arrow"></div>
<div class="status-icon">
<span class="tool-icon">ℹ️</span>
</div>
<span class="status-text">系统消息</span>
</div>
<div class="collapsible-content">
<div class="content-inner">
{{ msg.content }}
</div>
</div>
</div>
{{ msg.content }}
</div>
</div>
</div>
@ -487,123 +459,106 @@
</div>
<!-- 输入区域 -->
<div class="input-area compact-input-area">
<div class="stadium-shell" ref="compactInputShell" :class="{ expanded: inputLineCount > 1 }">
<input type="file"
ref="fileUploadInput"
class="file-input-hidden"
@change="handleFileSelected">
<button type="button"
class="stadium-btn add-btn"
@click.stop="toggleQuickMenu"
:disabled="!isConnected">
+
</button>
<textarea
ref="stadiumInput"
v-model="inputMessage"
@input="handleInputChange"
<div class="input-area">
<div class="input-wrapper">
<textarea
v-model="inputMessage"
@keydown.enter.ctrl="sendMessage"
placeholder="输入消息... (Ctrl+Enter 发送)"
class="stadium-input"
class="message-input"
:disabled="!isConnected || streamingMessage"
rows="1">
rows="3">
</textarea>
<button type="button"
class="stadium-btn send-btn"
@click="handleSendOrStop"
:disabled="!isConnected || (!inputMessage.trim() && !streamingMessage)">
<span v-if="streamingMessage">⏹</span>
<span v-else class="send-icon"></span>
</button>
<transition name="quick-menu">
<div class="quick-menu" v-if="quickMenuOpen" ref="quickMenu" @click.stop>
<div class="input-actions">
<div class="upload-control">
<input type="file"
ref="fileUploadInput"
class="file-input-hidden"
@change="handleFileSelected">
<button type="button"
class="menu-entry"
@click="handleQuickUpload"
class="btn upload-btn"
@click="triggerFileUpload"
:disabled="!isConnected || uploading">
{{ uploading ? '上传中...' : '上传文件' }}
</button>
</div>
<div class="tool-dropdown" ref="toolDropdown">
<button type="button"
class="menu-entry has-submenu"
@click.stop="toggleToolMenu"
:disabled="!isConnected">
工具禁用
<span class="entry-arrow">›</span>
class="btn tool-btn"
@click="toggleToolMenu"
:disabled="!isConnected || toolSettingsLoading">
工具
</button>
<button type="button"
class="menu-entry"
@click="handleQuickModeToggle"
:disabled="streamingMessage || !isConnected">
{{ thinkingMode ? '快速模式' : '思考模式' }}
</button>
<button type="button"
class="menu-entry has-submenu"
@click.stop="toggleSettings"
:disabled="!isConnected">
设置
<span class="entry-arrow">›</span>
</button>
<transition name="submenu-slide">
<div class="quick-submenu tool-submenu" v-if="toolMenuOpen">
<div class="submenu-status" v-if="toolSettingsLoading">
<transition name="settings-menu">
<div class="settings-menu tool-menu" v-if="toolMenuOpen">
<div class="tool-menu-status" v-if="toolSettingsLoading">
正在同步工具状态...
</div>
<div v-else-if="toolSettings.length === 0" class="submenu-empty">
<div v-else-if="toolSettings.length === 0" class="tool-menu-empty">
暂无可控工具
</div>
<div v-else class="submenu-list">
<button v-for="category in toolSettings"
<div v-else class="tool-menu-list">
<div v-for="category in toolSettings"
:key="category.id"
type="button"
class="menu-entry submenu-entry"
:class="{ disabled: !category.enabled }"
@click.stop="updateToolCategory(category.id, !category.enabled)"
:disabled="streamingMessage || !isConnected || toolSettingsLoading">
<span class="submenu-label">
<span class="submenu-icon">{{ toolCategoryEmoji(category.id) }}</span>
class="tool-category-item"
:class="{ disabled: !category.enabled }">
<span class="tool-category-label">
<span class="tool-category-icon">{{ toolCategoryEmoji(category.id) }}</span>
{{ category.label }}
</span>
<span class="entry-arrow">{{ category.enabled ? '禁用' : '启用' }}</span>
</button>
</div>
</div>
</transition>
<transition name="submenu-slide">
<div class="quick-submenu settings-submenu" v-if="settingsOpen">
<div class="submenu-list">
<button type="button"
class="menu-entry submenu-entry"
@click="openRealtimeTerminal"
:disabled="streamingMessage || !isConnected">
实时终端
</button>
<button type="button"
class="menu-entry submenu-entry"
@click="toggleFocusPanel"
:disabled="streamingMessage || !isConnected">
聚焦面板
</button>
<button type="button"
class="menu-entry submenu-entry"
@click="toggleTokenPanel"
:disabled="!currentConversationId">
用量统计
</button>
<button type="button"
class="menu-entry submenu-entry"
@click="compressConversation"
:disabled="compressing || streamingMessage || !isConnected">
{{ compressing ? '压缩中...' : '压缩对话' }}
</button>
<button type="button"
class="menu-btn tool-category-toggle"
@click="updateToolCategory(category.id, !category.enabled)"
:disabled="streamingMessage || !isConnected || toolSettingsLoading">
{{ category.enabled ? '禁用' : '启用' }}
</button>
</div>
</div>
</div>
</transition>
</div>
</transition>
<button @click="handleSendOrStop"
:disabled="!isConnected || (!inputMessage.trim() && !streamingMessage)"
:class="['btn', streamingMessage ? 'stop-btn' : 'send-btn']">
{{ streamingMessage ? '停止' : '发送' }}
</button>
<div class="settings-dropdown" ref="settingsDropdown">
<button type="button"
class="btn settings-btn"
@click="toggleSettings"
:disabled="!isConnected">
设置
</button>
<transition name="settings-menu">
<div class="settings-menu" v-if="settingsOpen">
<button type="button"
class="menu-btn realtime-entry"
@click="openRealtimeTerminal"
:disabled="streamingMessage || !isConnected">
实时终端
</button>
<button type="button"
class="menu-btn focus-entry"
@click="toggleFocusPanel"
:disabled="streamingMessage || !isConnected">
{{ rightCollapsed ? '展开聚焦面板' : '折叠聚焦面板' }}
</button>
<button type="button"
class="menu-btn mode-entry"
@click="toggleThinkingMode"
:disabled="streamingMessage || !isConnected">
{{ thinkingMode ? '快速模式' : '思考模式' }}
</button>
<button type="button"
class="menu-btn compress-entry"
@click="compressConversation"
:disabled="compressing || streamingMessage || !isConnected">
{{ compressing ? '压缩中...' : '压缩' }}
</button>
</div>
</transition>
</div>
</div>
</div>
</div>
</main>

682
static/style.css
View File

@ -110,7 +110,7 @@ body {
/* 主容器 */
.main-container {
display: flex;
height: var(--app-viewport, 100vh);
height: calc(var(--app-viewport, 100vh) - 56px);
background: var(--claude-bg);
position: relative;
align-items: stretch;
@ -130,8 +130,8 @@ body {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 50;
backdrop-filter: blur(12px);
height: var(--app-viewport, 100vh) !important;
min-height: var(--app-viewport, 100vh) !important;
height: calc(var(--app-viewport, 100vh) - 56px) !important;
min-height: calc(var(--app-viewport, 100vh) - 56px) !important;
border-bottom: 1px solid var(--claude-border);
}
@ -143,8 +143,8 @@ body {
.conversation-sidebar.collapsed {
width: 50px;
overflow: hidden;
height: var(--app-viewport, 100vh) !important;
min-height: var(--app-viewport, 100vh) !important;
height: calc(var(--app-viewport, 100vh) - 56px) !important;
min-height: calc(var(--app-viewport, 100vh) - 56px) !important;
}
.conversation-sidebar.collapsed .conversation-header {
@ -253,7 +253,7 @@ body {
}
.loading-conversations,
o-conversations {
.no-conversations {
text-align: center;
color: var(--claude-text-secondary);
padding: 30px 15px;
@ -393,6 +393,28 @@ o-conversations {
cursor: not-allowed;
}
/* 当前对话信息栏 */
.current-conversation-info {
background: var(--claude-panel);
backdrop-filter: blur(18px);
padding: 12px 20px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
color: var(--claude-text-secondary);
box-shadow: 0 12px 28px rgba(61, 57, 41, 0.06);
}
.conversation-title-display {
font-weight: 500;
color: var(--claude-text);
}
.conversation-message-count {
font-size: 12px;
}
/* 拖拽手柄 */
.resize-handle {
width: 4px;
@ -415,60 +437,6 @@ o-conversations {
border-left: none;
}
.sidebar-status {
padding: 18px 18px 8px;
}
.compact-status-card {
background: var(--claude-panel);
border: 1px solid var(--claude-border);
border-radius: 18px;
padding: 14px 16px;
box-shadow: 0 12px 30px rgba(61, 57, 41, 0.12);
display: flex;
flex-direction: column;
gap: 10px;
}
.status-top {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 15px;
}
.status-bottom {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.thinking-chip {
background: var(--claude-accent);
color: #fffef8;
padding: 4px 14px;
border-radius: 999px;
font-size: 12px;
letter-spacing: 0.02em;
}
.connection-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: 999px;
border: 1px solid rgba(118, 103, 84, 0.3);
font-size: 12px;
color: var(--claude-text-secondary);
}
.connection-chip.connected {
border-color: rgba(94, 159, 109, 0.5);
color: var(--claude-text);
}
.sidebar-header {
padding: 23px;
border-bottom: 1px solid var(--claude-border);
@ -744,6 +712,8 @@ o-conversations {
text-overflow: ellipsis;
font-family: inherit;
}
.folder-children {
margin-left: 14px;
padding-left: 6px;
@ -819,30 +789,19 @@ o-conversations {
backdrop-filter: blur(6px);
}
.chat-container button {
outline: none;
}
.chat-container button:focus,
.chat-container button:focus-visible {
outline: none;
box-shadow: none;
}
/* 消息区域 */
.messages-area {
flex: 1;
overflow-y: auto;
padding: 24px;
padding-top: 20px;
padding-bottom: calc(120px + var(--app-bottom-inset, 0px));
padding-bottom: calc(24px + var(--app-bottom-inset, 0px));
min-height: 0;
}
.scroll-lock-toggle {
position: absolute;
right: 28px;
bottom: 110px;
bottom: 200px;
z-index: 25;
display: flex;
align-items: center;
@ -1121,6 +1080,8 @@ o-conversations {
.append-placeholder {
margin: 12px 0;
}
.append-placeholder-content {
background: rgba(255, 255, 255, 0.82);
border-left: 4px solid rgba(218, 119, 86, 0.32);
@ -1456,274 +1417,174 @@ o-conversations {
}
/* 输入区域 */
.input-area {
position: absolute;
left: 0;
right: 0;
bottom: 32px;
background: transparent;
padding: 0 24px;
.token-wrapper {
flex-shrink: 0;
pointer-events: none;
z-index: 30;
}
.compact-input-area {
.input-area {
background: rgba(255, 255, 255, 0.82);
border-top: 1px solid var(--claude-border);
padding: 20px;
padding-bottom: calc(20px + var(--app-bottom-inset, 0px));
backdrop-filter: blur(12px);
flex-shrink: 0;
}
.input-wrapper {
display: flex;
justify-content: center;
pointer-events: none;
flex-direction: column;
gap: 12px;
}
.stadium-shell {
position: relative;
width: min(900px, 94%);
border: 1px solid var(--claude-border);
border-radius: 999px;
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 18px 36px rgba(61, 57, 41, 0.12);
padding: 10px 70px;
min-height: 56px;
transition: padding 0.25s ease, box-shadow 0.25s ease, border-radius 0.25s ease;
pointer-events: auto;
}
.stadium-shell.expanded {
padding-top: 18px;
padding-bottom: 18px;
border-radius: 28px;
}
.stadium-input {
.message-input {
width: 100%;
border: none;
resize: none;
background: transparent;
padding: 14px 16px;
border: 1px solid var(--claude-border);
border-radius: 12px;
font-size: 15px;
line-height: 1.6;
resize: none;
font-family: inherit;
background: rgba(255, 255, 255, 0.75);
color: var(--claude-text);
padding: 4px 0;
min-height: 24px;
outline: none;
overflow-y: auto;
scrollbar-width: none;
transition: all 0.2s ease;
}
.stadium-input:disabled {
opacity: 0.5;
.message-input:focus {
outline: none;
border-color: var(--claude-accent);
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 0 0 3px rgba(218, 119, 86, 0.2);
}
.input-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
flex-wrap: wrap;
}
/* 按钮 */
.btn {
padding: 10px 24px;
border: none;
border-radius: 980px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
letter-spacing: 0.03em;
}
.send-btn {
background: var(--claude-accent);
color: #fffdf8;
box-shadow: 0 12px 28px rgba(189, 93, 58, 0.25);
}
.send-btn:hover:not(:disabled) {
background: var(--claude-button-hover);
transform: scale(1.02);
box-shadow: 0 14px 32px rgba(189, 93, 58, 0.3);
}
.send-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.stadium-input::-webkit-scrollbar {
width: 0;
height: 0;
.stop-btn {
background: #d85a42;
color: #fffaf5;
}
.stadium-btn {
position: absolute;
bottom: 10px;
width: 40px;
height: 40px;
border: none;
border-radius: 50%;
background: transparent;
color: var(--claude-text);
font-size: 20px;
cursor: pointer;
.stop-btn:hover {
background: #bf422b;
}
.settings-dropdown {
position: relative;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease, transform 0.2s ease;
}
.stadium-shell.expanded .stadium-btn {
bottom: 14px;
}
.stadium-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.stadium-btn:hover:not(:disabled) {
background: rgba(0, 0, 0, 0.05);
}
.add-btn {
left: 12px;
font-size: 26px;
}
.stadium-btn.send-btn {
right: 12px;
background: var(--claude-accent);
color: #fffaf0;
box-shadow: 0 10px 20px rgba(189, 93, 58, 0.28);
}
.stadium-btn.send-btn:hover:not(:disabled) {
transform: translateY(-1px);
background: var(--claude-button-hover);
}
.stadium-btn.send-btn:disabled {
opacity: 0.4;
box-shadow: none;
}
.stadium-btn.send-btn span {
.tool-dropdown {
position: relative;
top: 1px;
display: flex;
align-items: center;
margin-right: auto;
}
.stadium-btn.send-btn .send-icon {
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 10px solid #fffaf0;
margin-left: 2px;
}
.stadium-btn.send-btn:disabled .send-icon {
border-left-color: rgba(255, 255, 255, 0.4);
.upload-control {
display: flex;
align-items: center;
}
.file-input-hidden {
display: none;
}
.quick-menu {
position: absolute;
left: 0;
bottom: calc(100% + 14px);
display: flex;
flex-direction: column;
gap: 6px;
width: 230px;
padding: 12px;
background: rgba(255, 255, 255, 0.98);
border: 1px solid var(--claude-border);
border-radius: 18px;
box-shadow: var(--claude-shadow);
z-index: 30;
pointer-events: auto;
}
.menu-entry {
border: none;
background: transparent;
padding: 10px 12px;
border-radius: 12px;
font-size: 14px;
text-align: left;
.upload-btn {
background: rgba(255, 255, 255, 0.78);
color: var(--claude-text);
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
transition: background 0.15s ease;
min-height: 44px;
border: 1px solid rgba(118, 103, 84, 0.2);
}
.menu-entry:hover:not(:disabled) {
background: rgba(0, 0, 0, 0.05);
.upload-btn:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.95);
}
.menu-entry:disabled {
opacity: 0.45;
.upload-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.menu-entry.has-submenu .entry-arrow {
margin-left: 10px;
color: var(--claude-text-secondary);
.tool-btn {
background: rgba(255, 255, 255, 0.78);
color: var(--claude-text);
border: 1px solid rgba(118, 103, 84, 0.2);
}
.quick-submenu {
position: absolute;
top: 0;
left: calc(100% + 12px);
width: 230px;
min-width: 0;
padding: 12px;
border-radius: 18px;
border: 1px solid var(--claude-border);
background: rgba(255, 255, 255, 0.98);
box-shadow: var(--claude-shadow);
z-index: 31;
.tool-btn:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.95);
}
.submenu-status,
.submenu-empty {
font-size: 13px;
color: var(--claude-text-secondary);
.tool-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.submenu-list {
display: flex;
flex-direction: column;
gap: 6px;
.settings-btn {
background: rgba(255, 255, 255, 0.78);
color: var(--claude-text);
border: 1px solid rgba(118, 103, 84, 0.2);
}
.quick-submenu.tool-submenu {
top: auto;
bottom: 0;
.settings-btn:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.95);
}
.menu-entry.submenu-entry {
width: 100%;
justify-content: space-between;
}
.menu-entry.submenu-entry .entry-arrow {
color: var(--claude-text-secondary);
}
.menu-entry.disabled {
opacity: 0.5;
}
.submenu-label {
display: inline-flex;
align-items: center;
gap: 8px;
}
.submenu-icon {
font-size: 16px;
}
.quick-menu-enter-active,
.quick-menu-leave-active {
transition: opacity 0.2s ease, transform 0.2s ease;
}
.quick-menu-enter-from,
.quick-menu-leave-to {
opacity: 0;
transform: translateY(8px);
}
.submenu-slide-enter-active,
.submenu-slide-leave-active {
transition: opacity 0.2s ease, transform 0.2s ease;
}
.submenu-slide-enter-from,
.submenu-slide-leave-to {
opacity: 0;
transform: translateX(10px);
.settings-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* 适应折叠屏/矮屏幕，保证输入区完整可见 */
@media (max-height: 900px) {
.input-area {
bottom: 12px;
padding: 0 12px;
.messages-area {
padding: 16px 18px;
}
.stadium-shell {
width: min(900px, 98%);
.token-wrapper {
margin-bottom: 8px;
}
.input-area {
padding: 14px;
}
.message-input {
padding: 12px 14px;
min-height: 120px;
}
.btn {
padding: 8px 18px;
}
}
@ -1887,7 +1748,7 @@ o-conversations {
padding: 16px;
}
o-files {
.no-files {
text-align: center;
color: var(--claude-text-secondary);
padding: 60px 20px;
@ -1947,8 +1808,15 @@ o-files {
}
/* 系统消息 */
.system-message .collapsible-block {
margin: 0;
.system-message {
text-align: center;
color: var(--claude-text-secondary);
font-size: 13px;
margin: 20px 0;
padding: 10px;
background: rgba(255, 255, 255, 0.7);
border-radius: 12px;
border: 1px solid var(--claude-border);
}
/* Markdown样式 */
@ -1988,6 +1856,8 @@ o-files {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
/* ========================================= */
/* 响应式设计 */
/* ========================================= */
@ -2027,56 +1897,100 @@ o-files {
display: none;
}
}
.conversation-stats {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.9em;
color: var(--claude-text-secondary);
}
.token-count {
color: var(--claude-accent);
font-weight: 500;
}
/* 顶部 Token 抽屉 */
.token-drawer {
position: absolute;
top: 20px;
left: 0;
right: 0;
width: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
z-index: 20;
pointer-events: none;
/* ========================================= */
/* Token 统计面板样式（无缝一体版）*/
/* ========================================= */
/* Token区域包装器 */
.token-wrapper {
position: relative;
z-index: 5;
margin-bottom: 0;
}
.token-display-panel {
width: min(860px, 92%);
/* 当前对话信息栏 - 移除底部边框 */
.current-conversation-info {
position: relative;
z-index: 10;
background: var(--claude-panel);
border: 1px solid var(--claude-border);
border-radius: 26px;
box-shadow: 0 24px 42px rgba(61, 57, 41, 0.18);
transition: transform 0.35s ease, opacity 0.35s ease;
pointer-events: auto;
backdrop-filter: blur(18px);
border-bottom: none; /* 移除边框，让它和下面的面板融为一体 */
padding: 12px 20px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
color: var(--claude-text-secondary);
border-radius: 0; /* 顶部保持直角 */
box-shadow: 0 12px 28px rgba(61, 57, 41, 0.06);
}
.token-drawer.collapsed .token-display-panel {
transform: translateY(-120%);
/* Token面板 - 与标题栏完全一体，底部圆角 */
.token-display-panel {
background: var(--claude-panel);
backdrop-filter: blur(18px);
border: none;
border-radius: 0 0 16px 16px;
box-shadow: 0 8px 18px rgba(189, 93, 58, 0.12);
overflow: hidden;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
width: 100%;
margin: 0;
padding: 0;
}
/* 展开状态 */
.token-display-panel:not(.collapsed) {
height: 80px;
opacity: 1;
}
/* 收起状态 */
.token-display-panel.collapsed {
height: 0;
opacity: 0;
border: none;
box-shadow: none;
}
.token-panel-content {
padding: 16px 24px;
height: 100%;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.token-display-panel.collapsed .token-panel-content {
opacity: 0;
pointer-events: none;
}
.token-panel-content {
padding: 16px 36px;
}
.token-stats {
display: flex;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
align-items: center;
justify-content: center;
font-size: 13px;
height: 100%;
}
.token-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
min-width: 120px;
min-width: 80px;
}
.token-label {
@ -2084,7 +1998,7 @@ o-files {
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.04em;
letter-spacing: 0.5px;
}
.token-value {
@ -2094,29 +2008,127 @@ o-files {
font-variant-numeric: tabular-nums;
}
.token-value.current {
.token-value.current {
color: var(--claude-accent);
font-size: 20px;
}
.token-value.input { color: var(--claude-success); }
.token-value.output { color: var(--claude-warning); }
@media (max-width: 900px) {
.token-stats {
flex-direction: column;
gap: 16px;
}
.token-item {
min-width: auto;
}
.token-panel-content {
padding: 18px 24px;
}
.token-separator {
width: 1px;
height: 35px;
background: linear-gradient(to bottom,
transparent,
rgba(218, 119, 86, 0.25) 20%,
rgba(218, 119, 86, 0.25) 80%,
transparent
);
margin: 0 8px;
}
/* 切换按钮 - 独立定位 */
.token-toggle-btn {
position: absolute;
right: 24px;
bottom: -18px; /* 相对于wrapper底部 */
width: 36px;
height: 36px;
border-radius: 50%;
border: 2px solid rgba(218, 119, 86, 0.3);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 15;
font-size: 14px;
font-weight: bold;
}
/* 展开状态 */
.token-toggle-btn:not(.collapsed) {
background: linear-gradient(135deg, #ffffff 0%, rgba(255, 248, 242, 0.9) 100%);
color: var(--claude-accent);
box-shadow: 0 3px 10px rgba(189, 93, 58, 0.18);
}
/* 收起状态 - 在标题栏下方露出一半 */
.token-toggle-btn.collapsed {
background: linear-gradient(135deg, var(--claude-accent) 0%, var(--claude-accent-strong) 100%);
color: #fff8f2;
border-color: rgba(255, 248, 242, 0.55);
box-shadow: 0 3px 11px rgba(189, 93, 58, 0.22);
}
.token-toggle-btn:hover {
transform: scale(1.05);
box-shadow: 0 5px 16px rgba(189, 93, 58, 0.26);
}
.token-toggle-btn.collapsed:hover {
background: linear-gradient(135deg, var(--claude-button-hover) 0%, var(--claude-button-active) 100%);
}
.token-toggle-btn:active {
transform: scale(1.02);
}
/* 箭头样式 - 移除浮动动画 */
.token-toggle-btn span {
transition: all 0.3s ease;
display: inline-block;
}
/* 移除动画效果 */
/* .token-toggle-btn:not(.collapsed) span {
animation: arrowBounceUp 2s ease-in-out infinite;
}
.token-toggle-btn.collapsed span {
animation: arrowBounceDown 2s ease-in-out infinite;
} */
/* 保留动画定义，但不使用 */
@keyframes arrowBounceUp {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
@keyframes arrowBounceDown {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(3px); }
}
/* 响应式调整 */
@media (max-width: 768px) {
.token-stats {
gap: 16px;
}
.token-item {
min-width: 60px;
}
.token-value {
font-size: 15px;
}
.token-value.current {
font-size: 17px;
}
.token-label {
font-size: 10px;
}
.token-toggle-btn {
width: 32px;
height: 32px;
font-size: 12px;
right: 16px;
}
}
/* Markdown列表样式 - 修复偏左问题 */
.text-content ul,
.text-content ol {