refactor: adjust frontend layout
This commit is contained in:
parent
d10ae0c4bb
commit
d9eff0c803
134
static/app.js
134
static/app.js
@ -200,8 +200,10 @@ async function bootstrapApp() {
|
||||
// 对话压缩状态
|
||||
compressing: false,
|
||||
|
||||
// 设置菜单状态
|
||||
// 输入/快捷菜单状态
|
||||
settingsOpen: false,
|
||||
quickMenuOpen: false,
|
||||
inputLineCount: 1,
|
||||
// 思考块滚动锁
|
||||
thinkingScrollLocks: new Map(),
|
||||
|
||||
@ -254,8 +256,7 @@ async function bootstrapApp() {
|
||||
this.loadInitialData();
|
||||
}, 500);
|
||||
|
||||
document.addEventListener('click', this.handleClickOutsideSettings);
|
||||
document.addEventListener('click', this.handleClickOutsideToolMenu);
|
||||
document.addEventListener('click', this.handleClickOutsideQuickMenu);
|
||||
document.addEventListener('click', this.handleClickOutsidePanelMenu);
|
||||
window.addEventListener('popstate', this.handlePopState);
|
||||
|
||||
@ -291,11 +292,14 @@ async function bootstrapApp() {
|
||||
this.fetchSubAgents();
|
||||
}
|
||||
}, 5000);
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.autoResizeInput();
|
||||
});
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
document.removeEventListener('click', this.handleClickOutsideSettings);
|
||||
document.removeEventListener('click', this.handleClickOutsideToolMenu);
|
||||
document.removeEventListener('click', this.handleClickOutsideQuickMenu);
|
||||
document.removeEventListener('click', this.handleClickOutsidePanelMenu);
|
||||
window.removeEventListener('popstate', this.handlePopState);
|
||||
if (this.onDocumentClick) {
|
||||
@ -316,6 +320,12 @@ async function bootstrapApp() {
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
inputMessage() {
|
||||
this.autoResizeInput();
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
openGuiFileManager() {
|
||||
window.open('/file-manager', '_blank');
|
||||
@ -1310,6 +1320,8 @@ async function bootstrapApp() {
|
||||
|
||||
this.settingsOpen = false;
|
||||
this.toolMenuOpen = false;
|
||||
this.quickMenuOpen = false;
|
||||
this.inputLineCount = 1;
|
||||
this.toolSettingsLoading = false;
|
||||
this.toolSettings = [];
|
||||
|
||||
@ -1696,6 +1708,9 @@ 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) {
|
||||
@ -1738,7 +1753,7 @@ async function bootstrapApp() {
|
||||
console.log('添加modify占位信息:', modifyPayloadMeta.path);
|
||||
}
|
||||
|
||||
if (textContent && !appendPayloadMeta && !modifyPayloadMeta) {
|
||||
if (textContent && !appendPayloadMeta && !modifyPayloadMeta && !isAppendMessage && !isModifyMessage && !containsAppendMarkers) {
|
||||
currentAssistantMessage.actions.push({
|
||||
id: `history-text-${Date.now()}-${Math.random()}`,
|
||||
type: 'text',
|
||||
@ -1822,22 +1837,7 @@ async function bootstrapApp() {
|
||||
}
|
||||
console.log(`更新工具结果: ${message.name} -> ${message.content?.substring(0, 50)}...`);
|
||||
|
||||
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()
|
||||
});
|
||||
}
|
||||
// append_to_file 的摘要在 append_payload 占位中呈现，此处无需重复
|
||||
} 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.settingsOpen = false;
|
||||
this.autoResizeInput();
|
||||
return;
|
||||
}
|
||||
|
||||
@ -2333,7 +2333,7 @@ async function bootstrapApp() {
|
||||
this.inputMessage = '';
|
||||
this.autoScrollEnabled = true;
|
||||
this.scrollToBottom();
|
||||
this.settingsOpen = false;
|
||||
this.autoResizeInput();
|
||||
|
||||
// 发送消息后延迟更新当前上下文Token（关键修复：恢复原逻辑）
|
||||
setTimeout(() => {
|
||||
@ -2350,14 +2350,12 @@ 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() {
|
||||
@ -2375,7 +2373,6 @@ async function bootstrapApp() {
|
||||
return;
|
||||
}
|
||||
|
||||
this.settingsOpen = false;
|
||||
this.compressing = true;
|
||||
|
||||
try {
|
||||
@ -2411,20 +2408,76 @@ async function bootstrapApp() {
|
||||
this.toolMenuOpen = nextState;
|
||||
if (nextState) {
|
||||
this.settingsOpen = false;
|
||||
if (!this.quickMenuOpen) {
|
||||
this.quickMenuOpen = true;
|
||||
}
|
||||
this.loadToolSettings();
|
||||
}
|
||||
},
|
||||
|
||||
handleClickOutsideToolMenu(event) {
|
||||
if (!this.toolMenuOpen) {
|
||||
toggleQuickMenu() {
|
||||
if (!this.isConnected) {
|
||||
return;
|
||||
}
|
||||
const dropdown = this.$refs.toolDropdown;
|
||||
if (dropdown && !dropdown.contains(event.target)) {
|
||||
const nextState = !this.quickMenuOpen;
|
||||
this.quickMenuOpen = nextState;
|
||||
if (!nextState) {
|
||||
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) {
|
||||
return;
|
||||
@ -2518,9 +2571,13 @@ async function bootstrapApp() {
|
||||
if (!this.isConnected) {
|
||||
return;
|
||||
}
|
||||
this.settingsOpen = !this.settingsOpen;
|
||||
if (this.settingsOpen) {
|
||||
const nextState = !this.settingsOpen;
|
||||
this.settingsOpen = nextState;
|
||||
if (nextState) {
|
||||
this.toolMenuOpen = false;
|
||||
if (!this.quickMenuOpen) {
|
||||
this.quickMenuOpen = true;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -2529,17 +2586,6 @@ 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) {
|
||||
|
||||
@ -38,21 +38,6 @@
|
||||
|
||||
<!-- 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 }">
|
||||
@ -127,6 +112,21 @@
|
||||
|
||||
<!-- 左侧文件树 -->
|
||||
<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,32 +222,18 @@
|
||||
|
||||
<!-- 中间聊天区域 -->
|
||||
<main class="chat-container">
|
||||
<!-- 当前对话信息栏 -->
|
||||
<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-drawer" v-if="currentConversationId" :class="{ collapsed: tokenPanelCollapsed }">
|
||||
<div class="token-display-panel">
|
||||
<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>
|
||||
@ -255,12 +241,6 @@
|
||||
</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">
|
||||
@ -351,6 +331,25 @@
|
||||
</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">
|
||||
@ -375,6 +374,21 @@
|
||||
</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"
|
||||
@ -440,7 +454,21 @@
|
||||
|
||||
<!-- 系统消息 -->
|
||||
<div v-else class="system-message">
|
||||
{{ msg.content }}
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -459,106 +487,123 @@
|
||||
</div>
|
||||
|
||||
<!-- 输入区域 -->
|
||||
<div class="input-area">
|
||||
<div class="input-wrapper">
|
||||
<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"
|
||||
@keydown.enter.ctrl="sendMessage"
|
||||
placeholder="输入消息... (Ctrl+Enter 发送)"
|
||||
class="message-input"
|
||||
class="stadium-input"
|
||||
:disabled="!isConnected || streamingMessage"
|
||||
rows="3">
|
||||
rows="1">
|
||||
</textarea>
|
||||
<div class="input-actions">
|
||||
<div class="upload-control">
|
||||
<input type="file"
|
||||
ref="fileUploadInput"
|
||||
class="file-input-hidden"
|
||||
@change="handleFileSelected">
|
||||
<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>
|
||||
<button type="button"
|
||||
class="btn upload-btn"
|
||||
@click="triggerFileUpload"
|
||||
class="menu-entry"
|
||||
@click="handleQuickUpload"
|
||||
:disabled="!isConnected || uploading">
|
||||
{{ uploading ? '上传中...' : '上传文件' }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="tool-dropdown" ref="toolDropdown">
|
||||
<button type="button"
|
||||
class="btn tool-btn"
|
||||
@click="toggleToolMenu"
|
||||
:disabled="!isConnected || toolSettingsLoading">
|
||||
工具
|
||||
class="menu-entry has-submenu"
|
||||
@click.stop="toggleToolMenu"
|
||||
:disabled="!isConnected">
|
||||
工具禁用
|
||||
<span class="entry-arrow">›</span>
|
||||
</button>
|
||||
<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="tool-menu-empty">
|
||||
暂无可控工具
|
||||
</div>
|
||||
<div v-else class="tool-menu-list">
|
||||
<div v-for="category in toolSettings"
|
||||
:key="category.id"
|
||||
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>
|
||||
<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>
|
||||
<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"
|
||||
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="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>
|
||||
|
||||
<transition name="submenu-slide">
|
||||
<div class="quick-submenu tool-submenu" v-if="toolMenuOpen">
|
||||
<div class="submenu-status" v-if="toolSettingsLoading">
|
||||
正在同步工具状态...
|
||||
</div>
|
||||
<div v-else-if="toolSettings.length === 0" class="submenu-empty">
|
||||
暂无可控工具
|
||||
</div>
|
||||
<div v-else class="submenu-list">
|
||||
<button 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>
|
||||
{{ 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>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
650
static/style.css
650
static/style.css
@ -110,7 +110,7 @@ body {
|
||||
/* 主容器 */
|
||||
.main-container {
|
||||
display: flex;
|
||||
height: calc(var(--app-viewport, 100vh) - 56px);
|
||||
height: var(--app-viewport, 100vh);
|
||||
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: calc(var(--app-viewport, 100vh) - 56px) !important;
|
||||
min-height: calc(var(--app-viewport, 100vh) - 56px) !important;
|
||||
height: var(--app-viewport, 100vh) !important;
|
||||
min-height: var(--app-viewport, 100vh) !important;
|
||||
border-bottom: 1px solid var(--claude-border);
|
||||
}
|
||||
|
||||
@ -143,8 +143,8 @@ body {
|
||||
.conversation-sidebar.collapsed {
|
||||
width: 50px;
|
||||
overflow: hidden;
|
||||
height: calc(var(--app-viewport, 100vh) - 56px) !important;
|
||||
min-height: calc(var(--app-viewport, 100vh) - 56px) !important;
|
||||
height: var(--app-viewport, 100vh) !important;
|
||||
min-height: var(--app-viewport, 100vh) !important;
|
||||
}
|
||||
|
||||
.conversation-sidebar.collapsed .conversation-header {
|
||||
@ -253,7 +253,7 @@ body {
|
||||
}
|
||||
|
||||
.loading-conversations,
|
||||
.no-conversations {
|
||||
o-conversations {
|
||||
text-align: center;
|
||||
color: var(--claude-text-secondary);
|
||||
padding: 30px 15px;
|
||||
@ -393,28 +393,6 @@ body {
|
||||
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;
|
||||
@ -437,6 +415,60 @@ body {
|
||||
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);
|
||||
@ -712,8 +744,6 @@ body {
|
||||
text-overflow: ellipsis;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
|
||||
.folder-children {
|
||||
margin-left: 14px;
|
||||
padding-left: 6px;
|
||||
@ -789,19 +819,30 @@ body {
|
||||
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-bottom: calc(24px + var(--app-bottom-inset, 0px));
|
||||
padding-top: 20px;
|
||||
padding-bottom: calc(120px + var(--app-bottom-inset, 0px));
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.scroll-lock-toggle {
|
||||
position: absolute;
|
||||
right: 28px;
|
||||
bottom: 200px;
|
||||
bottom: 110px;
|
||||
z-index: 25;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -1080,8 +1121,6 @@ body {
|
||||
.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);
|
||||
@ -1417,174 +1456,274 @@ body {
|
||||
}
|
||||
|
||||
/* 输入区域 */
|
||||
.token-wrapper {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.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);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 32px;
|
||||
background: transparent;
|
||||
padding: 0 24px;
|
||||
flex-shrink: 0;
|
||||
pointer-events: none;
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
.compact-input-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.message-input {
|
||||
width: 100%;
|
||||
padding: 14px 16px;
|
||||
.stadium-shell {
|
||||
position: relative;
|
||||
width: min(900px, 94%);
|
||||
border: 1px solid var(--claude-border);
|
||||
border-radius: 12px;
|
||||
font-size: 15px;
|
||||
resize: none;
|
||||
font-family: inherit;
|
||||
background: rgba(255, 255, 255, 0.75);
|
||||
color: var(--claude-text);
|
||||
transition: all 0.2s ease;
|
||||
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;
|
||||
}
|
||||
|
||||
.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);
|
||||
.stadium-shell.expanded {
|
||||
padding-top: 18px;
|
||||
padding-bottom: 18px;
|
||||
border-radius: 28px;
|
||||
}
|
||||
|
||||
.input-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* 按钮 */
|
||||
.btn {
|
||||
padding: 10px 24px;
|
||||
.stadium-input {
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-radius: 980px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
resize: none;
|
||||
background: transparent;
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
font-family: inherit;
|
||||
color: var(--claude-text);
|
||||
padding: 4px 0;
|
||||
min-height: 24px;
|
||||
outline: none;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.stadium-input:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.stadium-input::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.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;
|
||||
transition: all 0.2s ease;
|
||||
letter-spacing: 0.03em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
background: var(--claude-accent);
|
||||
color: #fffdf8;
|
||||
box-shadow: 0 12px 28px rgba(189, 93, 58, 0.25);
|
||||
.stadium-shell.expanded .stadium-btn {
|
||||
bottom: 14px;
|
||||
}
|
||||
|
||||
.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 {
|
||||
.stadium-btn:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.stop-btn {
|
||||
background: #d85a42;
|
||||
color: #fffaf5;
|
||||
.stadium-btn:hover:not(:disabled) {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.stop-btn:hover {
|
||||
background: #bf422b;
|
||||
.add-btn {
|
||||
left: 12px;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.settings-dropdown {
|
||||
.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 {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.tool-dropdown {
|
||||
position: relative;
|
||||
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;
|
||||
}
|
||||
|
||||
.upload-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.stadium-btn.send-btn:disabled .send-icon {
|
||||
border-left-color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.file-input-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.upload-btn {
|
||||
background: rgba(255, 255, 255, 0.78);
|
||||
.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;
|
||||
color: var(--claude-text);
|
||||
border: 1px solid rgba(118, 103, 84, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s ease;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.upload-btn:hover:not(:disabled) {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
.menu-entry:hover:not(:disabled) {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.upload-btn:disabled {
|
||||
opacity: 0.4;
|
||||
.menu-entry:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.tool-btn {
|
||||
background: rgba(255, 255, 255, 0.78);
|
||||
color: var(--claude-text);
|
||||
border: 1px solid rgba(118, 103, 84, 0.2);
|
||||
.menu-entry.has-submenu .entry-arrow {
|
||||
margin-left: 10px;
|
||||
color: var(--claude-text-secondary);
|
||||
}
|
||||
|
||||
.tool-btn:hover:not(:disabled) {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
.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:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
.submenu-status,
|
||||
.submenu-empty {
|
||||
font-size: 13px;
|
||||
color: var(--claude-text-secondary);
|
||||
}
|
||||
|
||||
.settings-btn {
|
||||
background: rgba(255, 255, 255, 0.78);
|
||||
color: var(--claude-text);
|
||||
border: 1px solid rgba(118, 103, 84, 0.2);
|
||||
.submenu-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.settings-btn:hover:not(:disabled) {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
.quick-submenu.tool-submenu {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.settings-btn:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
.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);
|
||||
}
|
||||
|
||||
/* 适应折叠屏/矮屏幕，保证输入区完整可见 */
|
||||
@media (max-height: 900px) {
|
||||
.messages-area {
|
||||
padding: 16px 18px;
|
||||
}
|
||||
.token-wrapper {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.input-area {
|
||||
padding: 14px;
|
||||
bottom: 12px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
.message-input {
|
||||
padding: 12px 14px;
|
||||
min-height: 120px;
|
||||
}
|
||||
.btn {
|
||||
padding: 8px 18px;
|
||||
.stadium-shell {
|
||||
width: min(900px, 98%);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1748,7 +1887,7 @@ body {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.no-files {
|
||||
o-files {
|
||||
text-align: center;
|
||||
color: var(--claude-text-secondary);
|
||||
padding: 60px 20px;
|
||||
@ -1808,15 +1947,8 @@ body {
|
||||
}
|
||||
|
||||
/* 系统消息 */
|
||||
.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);
|
||||
.system-message .collapsible-block {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Markdown样式 */
|
||||
@ -1856,8 +1988,6 @@ body {
|
||||
0%, 50% { opacity: 1; }
|
||||
51%, 100% { opacity: 0; }
|
||||
}
|
||||
|
||||
|
||||
/* ========================================= */
|
||||
/* 响应式设计 */
|
||||
/* ========================================= */
|
||||
@ -1897,100 +2027,56 @@ body {
|
||||
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区域包装器 */
|
||||
.token-wrapper {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* 当前对话信息栏 - 移除底部边框 */
|
||||
.current-conversation-info {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
background: var(--claude-panel);
|
||||
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面板 - 与标题栏完全一体，底部圆角 */
|
||||
.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);
|
||||
/* 顶部 Token 抽屉 */
|
||||
.token-drawer {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
z-index: 20;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 展开状态 */
|
||||
.token-display-panel:not(.collapsed) {
|
||||
height: 80px;
|
||||
opacity: 1;
|
||||
.token-display-panel {
|
||||
width: min(860px, 92%);
|
||||
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;
|
||||
}
|
||||
|
||||
/* 收起状态 */
|
||||
.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 {
|
||||
.token-drawer.collapsed .token-display-panel {
|
||||
transform: translateY(-120%);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.token-panel-content {
|
||||
padding: 16px 36px;
|
||||
}
|
||||
|
||||
.token-stats {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 32px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
height: 100%;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.token-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
min-width: 80px;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.token-label {
|
||||
@ -1998,7 +2084,7 @@ body {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.token-value {
|
||||
@ -2012,123 +2098,25 @@ body {
|
||||
color: var(--claude-accent);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.token-value.input { color: var(--claude-success); }
|
||||
.token-value.output { color: var(--claude-warning); }
|
||||
|
||||
.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) {
|
||||
@media (max-width: 900px) {
|
||||
.token-stats {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.token-item {
|
||||
min-width: 60px;
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.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;
|
||||
.token-panel-content {
|
||||
padding: 18px 24px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Markdown列表样式 - 修复偏左问题 */
|
||||
.text-content ul,
|
||||
.text-content ol {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user