CalvinBackup/CyberStrikeAI
1
0
Fork 0
mirror of https://github.com/Ed1s0nZ/CyberStrikeAI.git synced 2026-05-17 21:44:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
公明
2026-01-28 20:19:02 +08:00
committed by GitHub
parent a99387fd6d
commit 895061911c
3 changed files with 280 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/static/css/style.css
+132 -7
View File
@@ -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 {
web/static/js/chat.js
+111 -1
View File
@@ -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,
}),
});
web/templates/index.html
+37 -1
View File
@@ -1284,8 +1284,44 @@ version: 1.0.0<br>
<div class="modal-body create-group-body">
<p class="create-group-description">分组功能可将对话集中归类管理，让对话更加井然有序。</p>
<div class="create-group-input-wrapper">
<span class="group-icon-input">😊</span>
<button type="button" class="group-icon-input" id="create-group-icon-btn" onclick="toggleGroupIconPicker()" title="点击选择图标">📁</button>
<input type="text" id="create-group-name-input" placeholder="请输入分组名称" />
<!-- Emoji选择器面板 -->
<div id="group-icon-picker" class="group-icon-picker" style="display: none;">
<div class="icon-picker-header">
<span>选择图标</span>
<div class="icon-picker-custom">
<input type="text" id="custom-icon-input" class="custom-icon-input" placeholder="自定义" maxlength="2" />
<button type="button" class="custom-icon-btn" onclick="applyCustomIcon()">确定</button>
</div>
</div>
<div class="icon-picker-grid">
<span class="icon-option" onclick="selectGroupIcon('📁')">📁</span>
<span class="icon-option" onclick="selectGroupIcon('🔒')">🔒</span>
<span class="icon-option" onclick="selectGroupIcon('🛡️')">🛡️</span>
<span class="icon-option" onclick="selectGroupIcon('⚔️')">⚔️</span>
<span class="icon-option" onclick="selectGroupIcon('🎯')">🎯</span>
<span class="icon-option" onclick="selectGroupIcon('🔍')">🔍</span>
<span class="icon-option" onclick="selectGroupIcon('💻')">💻</span>
<span class="icon-option" onclick="selectGroupIcon('🐛')">🐛</span>
<span class="icon-option" onclick="selectGroupIcon('🚀')">🚀</span>
<span class="icon-option" onclick="selectGroupIcon('⚡')">⚡</span>
<span class="icon-option" onclick="selectGroupIcon('🔥')">🔥</span>
<span class="icon-option" onclick="selectGroupIcon('💡')">💡</span>
<span class="icon-option" onclick="selectGroupIcon('🎮')">🎮</span>
<span class="icon-option" onclick="selectGroupIcon('🏴‍☠️')">🏴‍☠️</span>
<span class="icon-option" onclick="selectGroupIcon('🕵️')">🕵️</span>
<span class="icon-option" onclick="selectGroupIcon('🔑')">🔑</span>
<span class="icon-option" onclick="selectGroupIcon('📡')">📡</span>
<span class="icon-option" onclick="selectGroupIcon('🌐')">🌐</span>
<span class="icon-option" onclick="selectGroupIcon('📊')">📊</span>
<span class="icon-option" onclick="selectGroupIcon('📝')">📝</span>
<span class="icon-option" onclick="selectGroupIcon('🗂️')">🗂️</span>
<span class="icon-option" onclick="selectGroupIcon('📌')">📌</span>
<span class="icon-option" onclick="selectGroupIcon('⭐')">⭐</span>
<span class="icon-option" onclick="selectGroupIcon('💎')">💎</span>
</div>
</div>
</div>
<div class="create-group-suggestions">
<div class="suggestion-tag" onclick="selectSuggestion('渗透测试')">渗透测试</div>