diff --git a/static/app.js b/static/app.js index 16679b2..e305128 100644 --- a/static/app.js +++ b/static/app.js @@ -36,6 +36,86 @@ const SOCKET_IO_CDN_SOURCES = [ 'https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.5/socket.io.min.js' ]; +const ICONS = Object.freeze({ + bot: '/static/icons/bot.svg', + book: '/static/icons/book.svg', + brain: '/static/icons/brain.svg', + camera: '/static/icons/camera.svg', + check: '/static/icons/check.svg', + checkbox: '/static/icons/checkbox.svg', + circleAlert: '/static/icons/circle-alert.svg', + clipboard: '/static/icons/clipboard.svg', + clock: '/static/icons/clock.svg', + eye: '/static/icons/eye.svg', + file: '/static/icons/file.svg', + flag: '/static/icons/flag.svg', + folder: '/static/icons/folder.svg', + folderOpen: '/static/icons/folder-open.svg', + globe: '/static/icons/globe.svg', + hammer: '/static/icons/hammer.svg', + info: '/static/icons/info.svg', + laptop: '/static/icons/laptop.svg', + menu: '/static/icons/menu.svg', + monitor: '/static/icons/monitor.svg', + octagon: '/static/icons/octagon.svg', + pencil: '/static/icons/pencil.svg', + python: '/static/icons/python.svg', + recycle: '/static/icons/recycle.svg', + save: '/static/icons/save.svg', + search: '/static/icons/search.svg', + settings: '/static/icons/settings.svg', + sparkles: '/static/icons/sparkles.svg', + stickyNote: '/static/icons/sticky-note.svg', + terminal: '/static/icons/terminal.svg', + trash: '/static/icons/trash.svg', + triangleAlert: '/static/icons/triangle-alert.svg', + user: '/static/icons/user.svg', + wrench: '/static/icons/wrench.svg', + x: '/static/icons/x.svg' +}); + +const TOOL_ICON_MAP = Object.freeze({ + append_to_file: 'pencil', + close_sub_agent: 'octagon', + create_file: 'file', + create_folder: 'folder', + create_sub_agent: 'bot', + delete_file: 'trash', + extract_webpage: 'globe', + focus_file: 'eye', + modify_file: 'pencil', + ocr_image: 'camera', + read_file: 'book', + rename_file: 'pencil', + run_command: 'terminal', + run_python: 'python', + save_webpage: 'save', + sleep: 'clock', + todo_create: 'stickyNote', + todo_finish: 'flag', + todo_finish_confirm: 'circleAlert', + todo_update_task: 'check', + terminal_input: 'terminal', + terminal_reset: 'recycle', + terminal_session: 'monitor', + terminal_snapshot: 'clipboard', + unfocus_file: 'eye', + update_memory: 'brain', + wait_sub_agent: 'clock', + web_search: 'search' +}); + +const TOOL_CATEGORY_ICON_MAP = Object.freeze({ + network: 'globe', + file_edit: 'pencil', + read_focus: 'eye', + terminal_realtime: 'monitor', + terminal_command: 'terminal', + memory: 'brain', + todo: 'stickyNote', + sub_agent: 'bot' +}); + function injectScriptSequentially(urls, onSuccess, onFailure) { let index = 0; const tryLoad = () => { @@ -220,20 +300,8 @@ async function bootstrapApp() { // TODO 列表 todoList: null, - todoEmoji: '🗒️', - fileEmoji: '📁', - todoDoneEmoji: '☑️', - todoPendingEmoji: '⬜️', - toolCategoryEmojis: { - network: '🌐', - file_edit: '📝', - read_focus: '🔍', - terminal_realtime: '🖥️', - terminal_command: '⌨️', - memory: '🧠', - todo: '🗒️', - sub_agent: '🤖' - }, + icons: ICONS, + toolCategoryIcons: TOOL_CATEGORY_ICON_MAP, // 右键菜单相关 contextMenu: { @@ -330,6 +398,22 @@ async function bootstrapApp() { }, methods: { + iconStyle(iconKey, size) { + const iconPath = this.icons ? this.icons[iconKey] : null; + if (!iconPath) { + return {}; + } + const style = { '--icon-src': `url(${iconPath})` }; + if (size) { + style['--icon-size'] = size; + } + return style; + }, + + toolCategoryIcon(categoryId) { + return this.toolCategoryIcons[categoryId] || 'settings'; + }, + openGuiFileManager() { window.open('/file-manager', '_blank'); }, @@ -1303,7 +1387,7 @@ async function bootstrapApp() { this.activeTools.clear(); this.toolActionIndex.clear(); - // ✨ 新增：将所有未完成的工具标记为已完成 + // 新增：将所有未完成的工具标记为已完成 this.messages.forEach(msg => { if (msg.role === 'assistant' && msg.actions) { msg.actions.forEach(action => { @@ -2195,19 +2279,6 @@ async function bootstrapApp() { } }, - formatTaskStatus(task) { - if (!task) { - return ''; - } - return task.status === 'done' - ? `${this.todoDoneEmoji} 完成` - : `${this.todoPendingEmoji} 未完成`; - }, - - toolCategoryEmoji(categoryId) { - return this.toolCategoryEmojis[categoryId] || '⚙️'; - }, - async fetchSubAgents() { try { const resp = await fetch('/api/sub_agents'); @@ -2666,38 +2737,8 @@ async function bootstrapApp() { // 修复：工具相关方法 - 接收tool对象而不是name getToolIcon(tool) { - const toolName = typeof tool === 'string' ? tool : tool.name; - const icons = { - 'create_file': '📄', - 'sleep': '⏱️', - 'read_file': '📖', - 'ocr_image': '📸', - 'delete_file': '🗑️', - 'rename_file': '✏️', - 'modify_file': '✏️', - 'append_to_file': '✏️', - 'create_folder': '📁', - 'focus_file': '👁️', - 'unfocus_file': '👁️', - 'web_search': '🔍', - 'extract_webpage': '🌐', - 'save_webpage': '💾', - 'run_python': '🐍', - 'run_command': '$', - 'update_memory': '🧠', - 'terminal_session': '💻', - 'terminal_input': '⌨️', - 'terminal_snapshot': '📋', - 'terminal_reset': '♻️', - 'todo_create': '🗒️', - 'todo_update_task': '☑️', - 'todo_finish': '🏁', - 'todo_finish_confirm': '❗', - 'create_sub_agent': '🤖', - 'wait_sub_agent': '⏳', - 'close_sub_agent': '🛑' - }; - return icons[toolName] || '⚙️'; + const toolName = typeof tool === 'string' ? tool : (tool && tool.name); + return TOOL_ICON_MAP[toolName] || 'settings'; }, getToolAnimationClass(tool) { @@ -3066,7 +3107,7 @@ async function bootstrapApp() {
${language} - + 
${content}
`; @@ -3243,6 +3284,10 @@ async function bootstrapApp() { } }, methods: { + iconStyle(iconKey) { + const iconPath = ICONS[iconKey]; + return iconPath ? { '--icon-src': `url(${iconPath})` } : {}; + }, toggle() { if (this.node.type === 'folder') { this.$emit('toggle-folder', this.node.path); @@ -3254,7 +3299,9 @@ async function bootstrapApp() {
@@ -3270,7 +3317,9 @@ async function bootstrapApp() {
- 📄 + {{ node.name }} {{ node.annotation }}
diff --git a/static/icons/book.svg b/static/icons/book.svg new file mode 100644 index 0000000..4abdae3 --- /dev/null +++ b/static/icons/book.svg @@ -0,0 +1,13 @@ + + + diff --git a/static/icons/bot.svg b/static/icons/bot.svg new file mode 100644 index 0000000..1a622f9 --- /dev/null +++ b/static/icons/bot.svg @@ -0,0 +1,18 @@ + + + + + + + + diff --git a/static/icons/brain.svg b/static/icons/brain.svg new file mode 100644 index 0000000..25cbe75 --- /dev/null +++ b/static/icons/brain.svg @@ -0,0 +1,20 @@ + + + + + + + + + + diff --git a/static/icons/camera.svg b/static/icons/camera.svg new file mode 100644 index 0000000..1e82bf4 --- /dev/null +++ b/static/icons/camera.svg @@ -0,0 +1,14 @@ + + + + diff --git a/static/icons/check.svg b/static/icons/check.svg new file mode 100644 index 0000000..5abe152 --- /dev/null +++ b/static/icons/check.svg @@ -0,0 +1,13 @@ + + + diff --git a/static/icons/checkbox.svg b/static/icons/checkbox.svg new file mode 100644 index 0000000..b4f1565 --- /dev/null +++ b/static/icons/checkbox.svg @@ -0,0 +1,13 @@ + + + diff --git a/static/icons/circle-alert.svg b/static/icons/circle-alert.svg new file mode 100644 index 0000000..578d25c --- /dev/null +++ b/static/icons/circle-alert.svg @@ -0,0 +1,15 @@ + + + + + diff --git a/static/icons/clipboard.svg b/static/icons/clipboard.svg new file mode 100644 index 0000000..de4cc01 --- /dev/null +++ b/static/icons/clipboard.svg @@ -0,0 +1,14 @@ + + + + diff --git a/static/icons/clock.svg b/static/icons/clock.svg new file mode 100644 index 0000000..ff6a4fb --- /dev/null +++ b/static/icons/clock.svg @@ -0,0 +1,14 @@ + + + + diff --git a/static/icons/eye.svg b/static/icons/eye.svg new file mode 100644 index 0000000..e5e7870 --- /dev/null +++ b/static/icons/eye.svg @@ -0,0 +1,14 @@ + + + + diff --git a/static/icons/file.svg b/static/icons/file.svg new file mode 100644 index 0000000..161be7a --- /dev/null +++ b/static/icons/file.svg @@ -0,0 +1,14 @@ + + + + diff --git a/static/icons/flag.svg b/static/icons/flag.svg new file mode 100644 index 0000000..7a15001 --- /dev/null +++ b/static/icons/flag.svg @@ -0,0 +1,13 @@ + + + diff --git a/static/icons/folder-open.svg b/static/icons/folder-open.svg new file mode 100644 index 0000000..07e3b8f --- /dev/null +++ b/static/icons/folder-open.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/icons/folder.svg b/static/icons/folder.svg new file mode 100644 index 0000000..ef69b34 --- /dev/null +++ b/static/icons/folder.svg @@ -0,0 +1,13 @@ + + + diff --git a/static/icons/globe.svg b/static/icons/globe.svg new file mode 100644 index 0000000..53c80ee --- /dev/null +++ b/static/icons/globe.svg @@ -0,0 +1,15 @@ + + + + + diff --git a/static/icons/hammer.svg b/static/icons/hammer.svg new file mode 100644 index 0000000..0f39323 --- /dev/null +++ b/static/icons/hammer.svg @@ -0,0 +1,15 @@ + + + + + diff --git a/static/icons/info.svg b/static/icons/info.svg new file mode 100644 index 0000000..49db302 --- /dev/null +++ b/static/icons/info.svg @@ -0,0 +1,15 @@ + + + + + diff --git a/static/icons/laptop.svg b/static/icons/laptop.svg new file mode 100644 index 0000000..613afff --- /dev/null +++ b/static/icons/laptop.svg @@ -0,0 +1,14 @@ + + + + diff --git a/static/icons/menu.svg b/static/icons/menu.svg new file mode 100644 index 0000000..0ec9745 --- /dev/null +++ b/static/icons/menu.svg @@ -0,0 +1,15 @@ + + + + + diff --git a/static/icons/monitor.svg b/static/icons/monitor.svg new file mode 100644 index 0000000..e869f2f --- /dev/null +++ b/static/icons/monitor.svg @@ -0,0 +1,15 @@ + + + + + diff --git a/static/icons/octagon.svg b/static/icons/octagon.svg new file mode 100644 index 0000000..b598095 --- /dev/null +++ b/static/icons/octagon.svg @@ -0,0 +1,13 @@ + + + diff --git a/static/icons/pencil.svg b/static/icons/pencil.svg new file mode 100644 index 0000000..7384498 --- /dev/null +++ b/static/icons/pencil.svg @@ -0,0 +1,14 @@ + + + + diff --git a/static/icons/python.svg b/static/icons/python.svg new file mode 100644 index 0000000..30587d8 --- /dev/null +++ b/static/icons/python.svg @@ -0,0 +1 @@ +Python \ No newline at end of file diff --git a/static/icons/recycle.svg b/static/icons/recycle.svg new file mode 100644 index 0000000..bd207b3 --- /dev/null +++ b/static/icons/recycle.svg @@ -0,0 +1,18 @@ + + + + + + + + diff --git a/static/icons/save.svg b/static/icons/save.svg new file mode 100644 index 0000000..07af070 --- /dev/null +++ b/static/icons/save.svg @@ -0,0 +1,15 @@ + + + + + diff --git a/static/icons/search.svg b/static/icons/search.svg new file mode 100644 index 0000000..03e442a --- /dev/null +++ b/static/icons/search.svg @@ -0,0 +1,14 @@ + + + + diff --git a/static/icons/settings.svg b/static/icons/settings.svg new file mode 100644 index 0000000..4c6263a --- /dev/null +++ b/static/icons/settings.svg @@ -0,0 +1,14 @@ + + + + diff --git a/static/icons/sparkles.svg b/static/icons/sparkles.svg new file mode 100644 index 0000000..2d74939 --- /dev/null +++ b/static/icons/sparkles.svg @@ -0,0 +1,16 @@ + + + + + + diff --git a/static/icons/sticky-note.svg b/static/icons/sticky-note.svg new file mode 100644 index 0000000..25f5cad --- /dev/null +++ b/static/icons/sticky-note.svg @@ -0,0 +1,14 @@ + + + + diff --git a/static/icons/terminal.svg b/static/icons/terminal.svg new file mode 100644 index 0000000..c09409f --- /dev/null +++ b/static/icons/terminal.svg @@ -0,0 +1,14 @@ + + + + diff --git a/static/icons/trash.svg b/static/icons/trash.svg new file mode 100644 index 0000000..690270a --- /dev/null +++ b/static/icons/trash.svg @@ -0,0 +1,15 @@ + + + + + diff --git a/static/icons/triangle-alert.svg b/static/icons/triangle-alert.svg new file mode 100644 index 0000000..3232fb0 --- /dev/null +++ b/static/icons/triangle-alert.svg @@ -0,0 +1,15 @@ + + + + + diff --git a/static/icons/user.svg b/static/icons/user.svg new file mode 100644 index 0000000..8e61592 --- /dev/null +++ b/static/icons/user.svg @@ -0,0 +1,14 @@ + + + + diff --git a/static/icons/wrench.svg b/static/icons/wrench.svg new file mode 100644 index 0000000..3624343 --- /dev/null +++ b/static/icons/wrench.svg @@ -0,0 +1,13 @@ + + + diff --git a/static/icons/x.svg b/static/icons/x.svg new file mode 100644 index 0000000..e317943 --- /dev/null +++ b/static/icons/x.svg @@ -0,0 +1,14 @@ + + + + diff --git a/static/index.html b/static/index.html index be1d764..9acdddf 100644 --- a/static/index.html +++ b/static/index.html @@ -79,8 +79,11 @@ 新建对话 @@ -166,7 +169,12 @@
- + {{ agentVersion }}
@@ -185,22 +193,36 @@
+ title="项目文件"> + + + title="待办列表"> + + + title="子智能体"> + +
@@ -210,9 +232,24 @@ 管理

- {{ fileEmoji }} 项目文件 - {{ todoEmoji }} 待办列表 - 🤖 子智能体 + + + 项目文件 + + + + 待办列表 + + + + 子智能体 +

@@ -226,7 +263,12 @@ :key="task.index" :class="{ done: task.status === 'done' }"> task{{ task.index }}：{{ task.title }} - {{ formatTaskStatus(task) }} + + + {{ task.status === 'done' ? '完成' : '未完成' }} +
{{ todoList.instruction }}
@@ -298,13 +340,23 @@
-
👤 用户
+
+ + 用户 +
{{ msg.content }}
-
🤖 AI Assistant
+
+ + AI Assistant +
- 🧠 + + +
{{ action.streaming ? '正在思考...' : '思考过程' }}
@@ -362,10 +418,20 @@ :class="{ 'append-error': action.append?.success === false }">
@@ -375,8 +441,11 @@ · 字节 {{ action.append.bytes }}
-
- ⚠️ 未检测到结束标记，请根据提示继续补充。 +
+ + 未检测到结束标记，请根据提示继续补充。
@@ -386,16 +455,22 @@ class="append-placeholder" :class="{ 'append-error': action.append?.success === false }">
-
- ✏️ {{ action.append?.summary || '文件追加完成' }} +
+ + {{ action.append?.summary || '文件追加完成' }}
{{ action.append.path || '目标文件' }} · 行数 {{ action.append.lines }} · 字节 {{ action.append.bytes }}
-
- ⚠️ 未检测到结束标记，请按提示继续补充。 +
+ + 未检测到结束标记，请按提示继续补充。
@@ -403,7 +478,12 @@
- 🛠️ 已对 {{ action.modify?.path || '目标文件' }} 执行补丁 + + + 已对 {{ action.modify?.path || '目标文件' }} 执行补丁 +
· 共 {{ action.modify.total }} 处 @@ -415,11 +495,17 @@ · 未完成 {{ action.modify.failed.length }} 处
-
- ⚠️ 未检测到结束标记，系统已在流结束时执行补丁。 +
+ + 未检测到结束标记，系统已在流结束时执行补丁。
-
- ⚠️ 未完成的序号：{{ action.modify.failed.map(f => f.index || f).join('、') || action.modify.failed.join('、') }}，请根据提示重新输出。 +
+ + 未完成的序号：{{ action.modify.failed.map(f => f.index || f).join('、') || action.modify.failed.join('、') }}，请根据提示重新输出。
@@ -427,14 +513,22 @@
- 🛠️ {{ action.modify?.summary || `已处理 ${action.modify?.path || '目标文件'}` }} +
+ + {{ action.modify?.summary || `已处理 ${action.modify?.path || '目标文件'}` }} +
· 共 {{ action.modify.total }} 处 · 完成 {{ action.modify.completed.length || action.modify.completed }} 处 · 未完成 {{ action.modify.failed.length || action.modify.failed }} 处
-
- ⚠️ 未检测到结束标记，系统已自动处理。 +
+ + 未检测到结束标记，系统已自动处理。
@@ -451,10 +545,10 @@
- - {{ getToolIcon(action.tool) }} - +
{{ getToolStatusText(action.tool) }} @@ -509,7 +603,9 @@
- ℹ️ +
系统消息
@@ -622,9 +718,11 @@ :class="{ disabled: !category.enabled }" @click.stop="updateToolCategory(category.id, !category.enabled)" :disabled="streamingMessage || !isConnected || toolSettingsLoading"> - - {{ toolCategoryEmoji(category.id) }} - {{ category.label }} + + + {{ category.label }} {{ category.enabled ? '禁用' : '启用' }} @@ -675,7 +773,12 @@ :class="{ collapsed: rightCollapsed }" :style="{ width: rightCollapsed ? '0px' : rightWidth + 'px' }">
-

👁️ 聚焦文件 ({{ Object.keys(focusedFiles).length }}/3)

+

+ + 聚焦文件 ({{ Object.keys(focusedFiles).length }}/3) +

@@ -740,25 +843,24 @@ // 使用保存的原始代码内容 const codeContent = codeElement.dataset.originalCode || codeElement.textContent; - // 首次点击时保存原始图标 - if (!button.dataset.originalIcon) { - button.dataset.originalIcon = button.textContent; + // 保存原始提示文本 + if (!button.dataset.originalLabel) { + button.dataset.originalLabel = button.getAttribute('aria-label') || '复制代码'; } navigator.clipboard.writeText(codeContent).then(() => { - button.textContent = '✓'; button.classList.add('copied'); + button.setAttribute('aria-label', '已复制'); setTimeout(() => { - // 使用保存的原始图标恢复 - button.textContent = button.dataset.originalIcon || '📋'; button.classList.remove('copied'); + button.setAttribute('aria-label', button.dataset.originalLabel); }, 2000); }).catch(err => { console.error('复制失败:', err); // 即使失败也要恢复状态 - button.textContent = button.dataset.originalIcon || '📋'; button.classList.remove('copied'); + button.setAttribute('aria-label', button.dataset.originalLabel || '复制代码'); }); } // 使用事件委托处理复制按钮点击 diff --git a/static/style.css b/static/style.css index 2cec0df..1c904f6 100644 --- a/static/style.css +++ b/static/style.css @@ -27,6 +27,46 @@ --claude-warning: #d99845; } +/* 全局图标工具类 */ +.icon { + --icon-size: 1em; + width: var(--icon-size); + height: var(--icon-size); + display: inline-block; + vertical-align: middle; + background-color: currentColor; + mask-image: var(--icon-src); + mask-repeat: no-repeat; + mask-position: center; + mask-size: contain; + -webkit-mask-image: var(--icon-src); + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center; + -webkit-mask-size: contain; +} + +.icon-sm { + --icon-size: 16px; +} + +.icon-md { + --icon-size: 20px; +} + +.icon-lg { + --icon-size: 24px; +} + +.icon-xl { + --icon-size: 32px; +} + +.icon-label { + display: inline-flex; + align-items: center; + gap: 6px; +} + html, body { height: var(--app-viewport, 100vh); } @@ -1298,6 +1338,15 @@ o-conversations { gap: 4px; } +.append-status { + font-weight: 500; + color: var(--claude-text); +} + +.append-error-text { + color: #b0432a; +} + .append-warning { color: var(--claude-warning); font-weight: 500; @@ -1416,12 +1465,30 @@ o-conversations { background: transparent; color: var(--claude-text-secondary); border: 1px solid rgba(121, 109, 94, 0.35); - padding: 6px 10px; + padding: 0; border-radius: 6px; - font-size: 16px; + width: 36px; + height: 32px; cursor: pointer; transition: all 0.2s ease; - line-height: 1; + display: inline-flex; + align-items: center; + justify-content: center; +} + +.copy-code-btn::before { + content: ''; + width: 18px; + height: 18px; + background-color: currentColor; + mask-image: url('/static/icons/clipboard.svg'); + mask-repeat: no-repeat; + mask-position: center; + mask-size: contain; + -webkit-mask-image: url('/static/icons/clipboard.svg'); + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center; + -webkit-mask-size: contain; } .copy-code-btn:hover { @@ -1435,6 +1502,11 @@ o-conversations { color: #f6fff8; } +.copy-code-btn.copied::before { + mask-image: url('/static/icons/check.svg'); + -webkit-mask-image: url('/static/icons/check.svg'); +} + /* 代码块内容区 */ .code-block-wrapper pre { background: #ffffff !important; @@ -1529,6 +1601,7 @@ o-conversations { align-items: center; justify-content: center; font-size: 18px; + color: var(--claude-text); } /* 内容区域 */ @@ -1950,10 +2023,6 @@ o-conversations { gap: 8px; } -.submenu-icon { - font-size: 16px; -} - .quick-menu-enter-active, .quick-menu-leave-active { transition: opacity 0.2s ease, transform 0.2s ease;