From 895061911c8d9b525985b300264096ba55c63c63 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=85=AC=E6=98=8E?= <83812544+Ed1s0nZ@users.noreply.github.com> Date: Wed, 28 Jan 2026 20:19:02 +0800 Subject: [PATCH] Add files via upload --- web/static/css/style.css | 139 +++++++++++++++++++++++++++++++++++++-- web/static/js/chat.js | 112 ++++++++++++++++++++++++++++++- web/templates/index.html | 38 ++++++++++- 3 files changed, 280 insertions(+), 9 deletions(-) diff --git a/web/static/css/style.css b/web/static/css/style.css index ca5efb6f..d79a8455 100644 --- a/web/static/css/style.css +++ b/web/static/css/style.css @@ -6754,21 +6754,146 @@ header { .group-icon-input { position: absolute; - left: 16px; + left: 8px; top: 50%; transform: translateY(-50%); - width: auto; - height: auto; + width: 28px; + height: 28px; display: flex; align-items: center; justify-content: center; - background: none; - border-radius: 0; + background: #f5f5f5; + border: 1px solid #e0e0e0; + border-radius: 6px; font-size: 1rem; - pointer-events: none; - z-index: 1; + cursor: pointer; + z-index: 2; box-shadow: none; line-height: 1; + transition: all 0.2s ease; +} + +.group-icon-input:hover { + background: #e8e8e8; + border-color: #d0d0d0; + transform: translateY(-50%) scale(1.05); +} + +.group-icon-input:active { + transform: translateY(-50%) scale(0.98); + background: #ddd; +} + +/* 图标选择器面板 */ +.group-icon-picker { + position: absolute; + top: calc(100% + 8px); + left: 0; + width: 280px; + background: #ffffff; + border: 1px solid #e0e0e0; + border-radius: 12px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); + z-index: 100; + overflow: hidden; +} + +.icon-picker-header { + padding: 10px 14px; + font-size: 0.8125rem; + font-weight: 600; + color: #666; + background: #fafafa; + border-bottom: 1px solid #f0f0f0; + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; +} + +.icon-picker-header > span { + flex-shrink: 0; +} + +.icon-picker-custom { + display: flex; + align-items: center; + gap: 6px; +} + +.custom-icon-input { + width: 60px; + padding: 4px 8px; + border: 1px solid #e0e0e0; + border-radius: 6px; + font-size: 0.875rem; + text-align: center; + background: #ffffff; + transition: all 0.2s ease; +} + +.custom-icon-input:focus { + outline: none; + border-color: #667eea; + box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1); +} + +.custom-icon-input::placeholder { + color: #bbb; + font-size: 0.75rem; +} + +.custom-icon-btn { + padding: 4px 10px; + font-size: 0.75rem; + font-weight: 500; + color: #fff; + background: #667eea; + border: none; + border-radius: 6px; + cursor: pointer; + transition: all 0.2s ease; + white-space: nowrap; +} + +.custom-icon-btn:hover { + background: #5a6fd6; +} + +.custom-icon-btn:active { + transform: scale(0.96); +} + +.icon-picker-grid { + display: grid; + grid-template-columns: repeat(6, 1fr); + gap: 4px; + padding: 12px; + max-height: 180px; + overflow-y: auto; +} + +.icon-option { + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.25rem; + cursor: pointer; + border-radius: 8px; + transition: all 0.15s ease; + user-select: none; +} + +.icon-option:hover { + background: #f0f0f0; + transform: scale(1.15); +} + +.icon-option:active { + transform: scale(1); + background: #e0e0e0; } #create-group-name-input { diff --git a/web/static/js/chat.js b/web/static/js/chat.js index 349f9bb6..bf062e83 100644 --- a/web/static/js/chat.js +++ b/web/static/js/chat.js @@ -4994,9 +4994,25 @@ function closeBatchManageModal() { function showCreateGroupModal(andMoveConversation = false) { const modal = document.getElementById('create-group-modal'); const input = document.getElementById('create-group-name-input'); + const iconBtn = document.getElementById('create-group-icon-btn'); + const iconPicker = document.getElementById('group-icon-picker'); + const customInput = document.getElementById('custom-icon-input'); + if (input) { input.value = ''; } + // 重置图标为默认值 + if (iconBtn) { + iconBtn.textContent = '📁'; + } + // 清空自定义图标输入框 + if (customInput) { + customInput.value = ''; + } + // 关闭图标选择器 + if (iconPicker) { + iconPicker.style.display = 'none'; + } if (modal) { modal.style.display = 'flex'; modal.dataset.moveConversation = andMoveConversation ? 'true' : 'false'; @@ -5016,6 +5032,21 @@ function closeCreateGroupModal() { if (input) { input.value = ''; } + // 重置图标为默认值 + const iconBtn = document.getElementById('create-group-icon-btn'); + if (iconBtn) { + iconBtn.textContent = '📁'; + } + // 清空自定义图标输入框 + const customInput = document.getElementById('custom-icon-input'); + if (customInput) { + customInput.value = ''; + } + // 关闭图标选择器 + const iconPicker = document.getElementById('group-icon-picker'); + if (iconPicker) { + iconPicker.style.display = 'none'; + } } // 选择建议标签 @@ -5027,6 +5058,81 @@ function selectSuggestion(name) { } } +// 切换图标选择器显示状态 +function toggleGroupIconPicker() { + const picker = document.getElementById('group-icon-picker'); + if (picker) { + const isVisible = picker.style.display !== 'none'; + picker.style.display = isVisible ? 'none' : 'block'; + } +} + +// 选择分组图标 +function selectGroupIcon(icon) { + const iconBtn = document.getElementById('create-group-icon-btn'); + if (iconBtn) { + iconBtn.textContent = icon; + } + // 清空自定义输入框 + const customInput = document.getElementById('custom-icon-input'); + if (customInput) { + customInput.value = ''; + } + // 关闭选择器 + const picker = document.getElementById('group-icon-picker'); + if (picker) { + picker.style.display = 'none'; + } +} + +// 应用自定义图标 +function applyCustomIcon() { + const customInput = document.getElementById('custom-icon-input'); + if (!customInput) return; + + const customIcon = customInput.value.trim(); + if (!customIcon) { + return; + } + + const iconBtn = document.getElementById('create-group-icon-btn'); + if (iconBtn) { + iconBtn.textContent = customIcon; + } + + // 清空输入框并关闭选择器 + customInput.value = ''; + const picker = document.getElementById('group-icon-picker'); + if (picker) { + picker.style.display = 'none'; + } +} + +// 自定义图标输入框回车键处理 +document.addEventListener('DOMContentLoaded', function() { + const customInput = document.getElementById('custom-icon-input'); + if (customInput) { + customInput.addEventListener('keydown', function(e) { + if (e.key === 'Enter') { + e.preventDefault(); + applyCustomIcon(); + } + }); + } +}); + +// 点击外部关闭图标选择器 +document.addEventListener('click', function(event) { + const picker = document.getElementById('group-icon-picker'); + const iconBtn = document.getElementById('create-group-icon-btn'); + if (picker && iconBtn) { + // 如果点击的不是图标按钮和选择器本身，则关闭选择器 + if (!picker.contains(event.target) && !iconBtn.contains(event.target)) { + picker.style.display = 'none'; + } + } +}); + // 创建分组 async function createGroup(event) { // 阻止事件冒泡 @@ -5071,6 +5177,10 @@ async function createGroup(event) { console.error('检查分组名称失败:', error); } + // 获取选中的图标 + const iconBtn = document.getElementById('create-group-icon-btn'); + const selectedIcon = iconBtn ? iconBtn.textContent.trim() : '📁'; + try { const response = await apiFetch('/api/groups', { method: 'POST', @@ -5079,7 +5189,7 @@ async function createGroup(event) { }, body: JSON.stringify({ name: name, - icon: '📁', + icon: selectedIcon, }), }); diff --git a/web/templates/index.html b/web/templates/index.html index 6a7e2696..4cb53dc2 100644 --- a/web/templates/index.html +++ b/web/templates/index.html @@ -1284,8 +1284,44 @@ version: 1.0.0

分组功能可将对话集中归类管理，让对话更加井然有序。

- 😊 + + +
渗透测试