modulegraph cross reference for main.py, pyi_rth_inspect.py, pyi_rth_pkgutil.py, pyi_rth_pyqt5.py
+ +全部项目
+没有找到匹配的项目
+已选择文件: ${file.name}
+ + `; + } else { + alert('请选择支持的文件格式 (.zip, .rar, .7z)'); + } + } +} + +// 打开项目 +function openProject(projectId) { + const project = projectsData.find(p => p.id === projectId); + if (project) { + showNotification(`正在打开项目: ${project.title}`, 'info'); + // 这里可以添加实际的项目打开逻辑 + } +} + +// 显示通知 +function showNotification(message, type = 'info') { + const notification = document.createElement('div'); + notification.className = `notification ${type}`; + notification.textContent = message; + notification.style.cssText = ` + position: fixed; + top: 20px; + right: 20px; + padding: 15px 20px; + background: ${type === 'success' ? '#10b981' : type === 'error' ? '#ef4444' : '#3b82f6'}; + color: white; + border-radius: 8px; + z-index: 3000; + animation: slideIn 0.3s ease; + `; + + document.body.appendChild(notification); + + setTimeout(() => { + notification.style.animation = 'slideOut 0.3s ease'; + setTimeout(() => { + if (document.body.contains(notification)) { + document.body.removeChild(notification); + } + }, 300); + }, 3000); +} + +// 打开项目 +function openProject(projectId) { + const project = projectsData.find(p => p.id === projectId); + if (project) { + showNotification(`正在打开项目: ${project.title}`, 'info'); + // 这里可以添加实际的项目打开逻辑 + } +} + +// 显示通知 +function showNotification(message, type = 'info') { + const notification = document.createElement('div'); + notification.className = `notification ${type}`; + notification.textContent = message; + notification.style.cssText = ` + position: fixed; + top: 20px; + right: 20px; + padding: 15px 20px; + background: ${type === 'success' ? '#10b981' : type === 'error' ? '#ef4444' : '#3b82f6'}; + color: white; + border-radius: 8px; + z-index: 3000; + animation: slideIn 0.3s ease; + `; + + document.body.appendChild(notification); + + setTimeout(() => { + notification.style.animation = 'slideOut 0.3s ease'; + setTimeout(() => { + if (document.body.contains(notification)) { + document.body.removeChild(notification); + } + }, 300); + }, 3000); +} + +// 更新模板描述 +function updateTemplateDescription(templateType) { + const templateDescription = document.getElementById('templateDescription'); + if (!templateDescription) return; + + const descriptions = { + empty: { + title: '空白项目模板', + description: '从零开始创建项目,适合有经验的开发者。提供基础的项目结构和配置文件,您可以根据需要自由定制。' + }, + industrial: { + title: '工业项目模板', + description: '专为工业应用设计的项目模板。包含工业设备监控、数据采集、生产流程管理等常用功能模块和界面组件。' + }, + vr: { + title: 'VR虚拟现实模板', + description: '虚拟现实项目模板,集成VR交互组件和3D场景管理。适合创建沉浸式体验、虚拟展示和培训应用。' + }, + smart: { + title: '智能可视化大屏模板', + description: '智能数据可视化大屏模板,包含丰富的图表组件、实时数据展示和响应式布局。适合创建监控中心和数据分析平台。' + }, + game: { + title: '游戏开发模板', + description: '游戏开发项目模板,提供游戏引擎集成、资源管理、场景编辑等功能。适合2D/3D游戏和交互应用开发。' + } + }; + + const template = descriptions[templateType]; + if (template) { + templateDescription.innerHTML = ` +${template.title}
+${template.description}
+ `; + } +} + +// 更新面包屑导航 +function updateBreadcrumb(navItem) { + const breadcrumb = document.getElementById('breadcrumb'); + if (!breadcrumb) return; + + const pageNames = { + 'all-projects': { section: '我的项目', page: '项目概览' }, + 'favorite-projects': { section: '我的项目', page: '收藏项目' }, + 'recent-projects': { section: '我的项目', page: '最近项目' }, + 'industrial-projects': { section: '我的项目', page: '工业项目' }, + 'smart-projects': { section: '我的项目', page: '智能项目' }, + 'vr-projects': { section: '我的项目', page: 'VR项目' }, + 'resource-category': { section: '内容管理', page: '资源分类' }, + 'category-management': { section: '内容管理', page: '分类管理' }, + 'asset-library': { section: '内容管理', page: '资源库' }, + 'template-library': { section: '内容管理', page: '模板库' } + }; + + const pageType = navItem.dataset.page; + const pageInfo = pageNames[pageType]; + + if (pageInfo) { + breadcrumb.innerHTML = ` + ${pageInfo.section} + / + ${pageInfo.page} + `; + } +} + +// 根据页面类型过滤项目 +function filterProjectsByPage(pageType) { + const contentHeader = document.querySelector('.content-header h1'); + + switch (pageType) { + case 'all-projects': + currentTypeFilter = 'all'; + if (contentHeader) contentHeader.textContent = '全部项目'; + break; + case 'favorite-projects': + currentTypeFilter = 'all'; + if (contentHeader) contentHeader.textContent = '收藏项目'; + // 这里可以添加收藏项目的过滤逻辑 + break; + case 'recent-projects': + currentTypeFilter = 'all'; + if (contentHeader) contentHeader.textContent = '最近项目'; + // 按日期排序显示最近的项目 + currentSortBy = 'date-desc'; + break; + case 'industrial-projects': + currentTypeFilter = 'industrial'; + if (contentHeader) contentHeader.textContent = '工业项目'; + break; + case 'smart-projects': + currentTypeFilter = 'smart'; + if (contentHeader) contentHeader.textContent = '智能项目'; + break; + case 'vr-projects': + currentTypeFilter = 'vr'; + if (contentHeader) contentHeader.textContent = 'VR项目'; + break; + default: + currentTypeFilter = 'all'; + if (contentHeader) contentHeader.textContent = '全部项目'; + } + + // 更新过滤器选择框 + if (typeFilter) { + typeFilter.value = currentTypeFilter; + } + + // 重新渲染项目 + renderProjects(); +} + +// 浏览项目位置 +function browseProjectLocation() { + const projectLocationInput = document.getElementById('projectLocation'); + if (!projectLocationInput) return; + + // 尝试调用系统文件选择器 + if (window.showDirectoryPicker) { + // 现代浏览器支持的文件系统访问API + showSystemDirectoryPicker(projectLocationInput); + } else if (window.electronAPI) { + // Electron环境 + showElectronDirectoryDialog(projectLocationInput); + } else { + // 降级方案:显示自定义文件夹选择对话框 + showFallbackFolderDialog(projectLocationInput); + } +} + +// 现代浏览器的目录选择器 +async function showSystemDirectoryPicker(input) { + try { + const directoryHandle = await window.showDirectoryPicker(); + const path = directoryHandle.name; + input.value = path; + showNotification('已选择项目位置: ' + path, 'success'); + } catch (err) { + if (err.name !== 'AbortError') { + console.error('目录选择失败:', err); + showFallbackFolderDialog(input); + } + } +} + +// Electron环境的目录选择 +function showElectronDirectoryDialog(input) { + if (window.electronAPI && window.electronAPI.showOpenDialog) { + window.electronAPI.showOpenDialog({ + properties: ['openDirectory'], + title: '选择项目保存位置' + }).then(result => { + if (!result.canceled && result.filePaths.length > 0) { + const selectedPath = result.filePaths[0]; + input.value = selectedPath; + showNotification('已选择项目位置: ' + selectedPath, 'success'); + } + }).catch(err => { + console.error('目录选择失败:', err); + showFallbackFolderDialog(input); + }); + } else { + showFallbackFolderDialog(input); + } +} + +// 降级方案:简化的文件夹选择 +function showFallbackFolderDialog(input) { + // 创建隐藏的文件输入元素来模拟文件夹选择 + const fileInput = document.createElement('input'); + fileInput.type = 'file'; + fileInput.webkitdirectory = true; + fileInput.style.display = 'none'; + + fileInput.addEventListener('change', (e) => { + if (e.target.files.length > 0) { + // 获取第一个文件的路径,然后提取目录路径 + const file = e.target.files[0]; + const path = file.webkitRelativePath.split('/')[0]; + input.value = path || '已选择文件夹'; + showNotification('已选择项目位置', 'success'); + } + document.body.removeChild(fileInput); + }); + + document.body.appendChild(fileInput); + fileInput.click(); +} + + + +// 显示项目菜单 +function showProjectMenu(projectId, menuButton) { + // 移除已存在的菜单 + const existingMenu = document.querySelector('.project-context-menu'); + if (existingMenu) { + existingMenu.remove(); + } + + // 获取项目信息 + const project = projectsData.find(p => p.id === projectId); + if (!project) return; + + // 创建菜单 + const menu = document.createElement('div'); + menu.className = 'project-context-menu'; + menu.innerHTML = ` + + + + + + + + + `; + + // 定位菜单 + const rect = menuButton.getBoundingClientRect(); + menu.style.position = 'fixed'; + menu.style.top = rect.bottom + 5 + 'px'; + menu.style.left = rect.left - 150 + 'px'; // 菜单宽度约150px,向左偏移 + menu.style.zIndex = '2000'; + + // 添加到页面 + document.body.appendChild(menu); + + // 菜单项点击事件 + menu.addEventListener('click', (e) => { + const action = e.target.closest('.menu-item')?.dataset.action; + if (action) { + handleProjectAction(projectId, action); + menu.remove(); + } + }); + + // 点击其他地方关闭菜单 + setTimeout(() => { + document.addEventListener('click', function closeMenu(e) { + if (!menu.contains(e.target)) { + menu.remove(); + document.removeEventListener('click', closeMenu); + } + }); + }, 0); +} + +// 处理项目操作 +function handleProjectAction(projectId, action) { + const project = projectsData.find(p => p.id === projectId); + if (!project) return; + + switch (action) { + case 'open': + openProject(projectId); + break; + case 'rename': + renameProject(projectId); + break; + case 'duplicate': + duplicateProject(projectId); + break; + case 'export': + exportProject(projectId); + break; + case 'favorite': + toggleFavorite(projectId); + break; + case 'delete': + deleteProject(projectId); + break; + } +} + +// 重命名项目 +function renameProject(projectId) { + const project = projectsData.find(p => p.id === projectId); + if (!project) return; + + const newName = prompt('请输入新的项目名称:', project.title); + if (newName && newName.trim() !== '') { + project.title = newName.trim(); + renderProjects(); + showNotification('项目重命名成功', 'success'); + } +} + +// 复制项目 +function duplicateProject(projectId) { + const project = projectsData.find(p => p.id === projectId); + if (!project) return; + + const newProject = { + ...project, + id: projectsData.length + 1, + title: project.title + ' - 副本', + date: new Date().toLocaleString('zh-CN') + }; + + projectsData.unshift(newProject); + renderProjects(); + showNotification('项目复制成功', 'success'); +} + +// 导出项目 +function exportProject(projectId) { + const project = projectsData.find(p => p.id === projectId); + if (!project) return; + + showNotification(`正在导出项目: ${project.title}`, 'info'); + // 这里可以添加实际的导出逻辑 +} + +// 切换收藏状态 +function toggleFavorite(projectId) { + const project = projectsData.find(p => p.id === projectId); + if (!project) return; + + project.favorite = !project.favorite; + renderProjects(); // 重新渲染以显示收藏状态变化 + showNotification(project.favorite ? '已添加到收藏' : '已从收藏中移除', 'success'); +} + +// 删除项目 +function deleteProject(projectId) { + const project = projectsData.find(p => p.id === projectId); + if (!project) return; + + if (confirm(`确定要删除项目 "${project.title}" 吗?此操作不可撤销。`)) { + const index = projectsData.findIndex(p => p.id === projectId); + if (index > -1) { + projectsData.splice(index, 1); + renderProjects(); + showNotification('项目删除成功', 'success'); + } + } +} + +// 获取项目类型标签 +function getProjectTypeLabel(type) { + const typeLabels = { + 'industrial': '工业', + 'smart': '智能', + 'vr': 'VR', + 'game': '游戏', + 'design': '设计' + }; + return typeLabels[type] || '其他'; +} + +// 初始化搜索和过滤功能 +function initSearchAndFilter() { + if (!searchBtn || !filterBtn) return; + + // 搜索按钮点击 + searchBtn.addEventListener('click', () => { + toggleSearchFilterArea(); + }); + + // 过滤按钮点击 + filterBtn.addEventListener('click', () => { + toggleSearchFilterArea(); + }); + + // 搜索输入 + if (searchInput) { + searchInput.addEventListener('input', (e) => { + currentSearchTerm = e.target.value; + renderProjects(); + }); + } + + // 排序选择 + if (sortSelect) { + sortSelect.addEventListener('change', (e) => { + currentSortBy = e.target.value; + renderProjects(); + }); + } + + // 类型过滤 + if (typeFilter) { + typeFilter.addEventListener('change', (e) => { + currentTypeFilter = e.target.value; + renderProjects(); + }); + } +} + +// 切换搜索过滤区域显示 +function toggleSearchFilterArea() { + if (!searchFilterArea) return; + + if (searchFilterArea.style.display === 'none' || searchFilterArea.style.display === '') { + searchFilterArea.style.display = 'flex'; + if (searchInput) { + searchInput.focus(); + } + } else { + searchFilterArea.style.display = 'none'; + } +} + +// 初始化树状结构 +function initTreeStructure() { + // 主分区展开/折叠 + const navTitles = document.querySelectorAll('.nav-title.expandable'); + navTitles.forEach(title => { + title.addEventListener('click', () => { + const sectionId = title.dataset.section; + const subsection = document.getElementById(sectionId); + const icon = title.querySelector('.expand-icon'); + + if (subsection.classList.contains('collapsed')) { + subsection.classList.remove('collapsed'); + subsection.style.maxHeight = subsection.scrollHeight + 'px'; + icon.style.transform = 'rotate(0deg)'; + } else { + subsection.classList.add('collapsed'); + subsection.style.maxHeight = '0px'; + icon.style.transform = 'rotate(-90deg)'; + } + }); + }); + + // 设置初始状态 - 默认展开所有主分区 + const allSubsections = document.querySelectorAll('.nav-subsection'); + allSubsections.forEach(subsection => { + subsection.style.maxHeight = subsection.scrollHeight + 'px'; + }); +} + +// 添加动画样式 +const style = document.createElement('style'); +style.textContent = ` + @keyframes slideIn { + from { transform: translateX(100%); opacity: 0; } + to { transform: translateX(0); opacity: 1; } + } + + @keyframes slideOut { + from { transform: translateX(0); opacity: 1; } + to { transform: translateX(100%); opacity: 0; } + } +`; +document.head.appendChild(style); diff --git a/web/styles.css b/web/styles.css new file mode 100644 index 0000000..f4fa821 --- /dev/null +++ b/web/styles.css @@ -0,0 +1,1014 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + background: #1a1a1a; + color: #ffffff; + overflow-x: hidden; +} + +/* 侧边栏样式 */ +.sidebar { + position: fixed; + left: 0; + top: 0; + width: 240px; + height: 100vh; + background: #2a2a2a; + border-right: 1px solid #3a3a3a; + display: flex; + flex-direction: column; + z-index: 1000; +} + +.logo { + padding: 20px; + display: flex; + align-items: center; + gap: 10px; + font-size: 18px; + font-weight: bold; + border-bottom: 1px solid #3a3a3a; +} + +.logo i { + color: #8b5cf6; + font-size: 20px; +} + +.nav-menu { + flex: 1; + padding: 20px 0; + overflow-y: auto; +} + +/* 快速操作区 */ +.quick-actions { + padding: 0 15px 20px; + border-bottom: 1px solid #3a3a3a; + margin-bottom: 20px; +} + +.quick-btn { + width: 100%; + padding: 12px 15px; + margin-bottom: 8px; + border: none; + border-radius: 8px; + cursor: pointer; + transition: all 0.2s; + display: flex; + align-items: center; + gap: 10px; + font-size: 13px; + font-weight: 500; +} + +.create-btn { + background: #8b5cf6; + color: white; +} + +.create-btn:hover { + background: #7c3aed; +} + +.import-btn { + background: #374151; + color: #d1d5db; + border: 1px solid #4b5563; +} + +.import-btn:hover { + background: #4b5563; + color: white; +} + +.nav-section { + margin-bottom: 25px; +} + +.nav-title { + padding: 8px 20px; + font-size: 12px; + color: #888; + text-transform: uppercase; + letter-spacing: 1px; + cursor: pointer; + display: flex; + align-items: center; + gap: 8px; + transition: all 0.2s; +} + +.nav-title:hover { + color: #ccc; +} + +.nav-title.expandable { + cursor: pointer; +} + +.expand-icon { + font-size: 10px; + transition: transform 0.2s; +} + +.nav-title.collapsed .expand-icon { + transform: rotate(-90deg); +} + +.nav-subsection { + overflow: hidden; + transition: max-height 0.3s ease; +} + +.nav-subsection.collapsed { + max-height: 0; +} + +.nav-item { + padding: 10px 20px; + display: flex; + align-items: center; + gap: 12px; + cursor: pointer; + transition: all 0.2s; + color: #ccc; + position: relative; +} + +.nav-item:hover { + background: #3a3a3a; + color: #fff; +} + +.nav-item.active { + background: #8b5cf6; + color: #fff; +} + +.nav-item i { + width: 16px; + text-align: center; + font-size: 14px; +} + +/* 移除了三级结构相关的样式 */ + +.user-info { + padding: 20px; + border-top: 1px solid #3a3a3a; + display: flex; + align-items: center; + gap: 10px; + cursor: pointer; +} + +.user-avatar { + width: 32px; + height: 32px; + background: #8b5cf6; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; +} + +/* 主内容区样式 */ +.main-content { + margin-left: 240px; + min-height: 100vh; + background: #1a1a1a; +} + +.top-nav { + padding: 20px 30px; + border-bottom: 1px solid #3a3a3a; + display: flex; + justify-content: space-between; + align-items: center; + background: #2a2a2a; +} + +.breadcrumb { + display: flex; + align-items: center; + gap: 8px; + color: #888; +} + +.breadcrumb span:last-child { + color: #fff; +} + +.top-actions { + display: flex; + align-items: center; + gap: 15px; +} + +.btn-icon { + width: 40px; + height: 40px; + border: none; + background: transparent; + color: #ccc; + border-radius: 8px; + cursor: pointer; + transition: all 0.2s; + display: flex; + align-items: center; + justify-content: center; +} + +.btn-icon:hover { + background: #3a3a3a; + color: #fff; +} + +.btn-primary { + padding: 10px 20px; + background: #8b5cf6; + color: white; + border: none; + border-radius: 8px; + cursor: pointer; + font-weight: 500; + transition: all 0.2s; + display: flex; + align-items: center; + gap: 8px; +} + +.btn-primary:hover { + background: #7c3aed; +} + +.btn-secondary { + padding: 10px 20px; + background: transparent; + color: #ccc; + border: 1px solid #3a3a3a; + border-radius: 8px; + cursor: pointer; + transition: all 0.2s; +} + +.btn-secondary:hover { + background: #3a3a3a; + color: #fff; +} + +/* 内容区域 */ +.content-area { + padding: 30px; +} + +.content-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 30px; +} + +.content-header h1 { + font-size: 24px; + font-weight: 600; +} + +.view-controls { + display: flex; + gap: 10px; +} + +.view-btn { + width: 40px; + height: 40px; + border: 1px solid #3a3a3a; + background: transparent; + color: #ccc; + border-radius: 8px; + cursor: pointer; + transition: all 0.2s; + display: flex; + align-items: center; + justify-content: center; +} + +.view-btn:hover { + background: #3a3a3a; + color: #fff; +} + +.view-btn.active { + background: #8b5cf6; + border-color: #8b5cf6; + color: #fff; +} + +/* 项目网格 */ +.projects-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 20px; +} + +.project-card { + background: #2a2a2a; + border: 1px solid #3a3a3a; + border-radius: 12px; + overflow: hidden; + cursor: pointer; + transition: all 0.2s; + display: flex; + flex-direction: column; +} + +.project-card:hover { + border-color: #8b5cf6; + transform: translateY(-2px); +} + +/* 项目头部 - 名称和菜单 */ +.project-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 12px 16px; + border-bottom: 1px solid #3a3a3a; + background: #2a2a2a; +} + +.project-title { + font-size: 16px; + font-weight: 600; + color: #fff; + line-height: 1.4; + flex: 1; + margin-right: 8px; + margin-bottom: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.project-header-actions { + display: flex; + align-items: center; + gap: 8px; +} + +.favorite-icon { + color: #ffd700; + font-size: 14px; +} + +.menu-item .fa-star.favorited { + color: #ffd700; +} + +.project-menu { + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 4px; + color: #888; + cursor: pointer; + transition: all 0.2s ease; + flex-shrink: 0; +} + +.project-menu:hover { + background: #3a3a3a; + color: #fff; +} + +.project-menu i { + font-size: 14px; +} + +/* 项目图片 */ +.project-image { + width: 100%; + height: 160px; + background: #3a3a3a; + display: flex; + align-items: center; + justify-content: center; + font-size: 48px; + color: #666; + flex: 1; + position: relative; +} + +.project-image img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.3s ease; +} + +.project-card:hover .project-image img { + transform: scale(1.05); +} + +.project-type-badge { + position: absolute; + top: 8px; + right: 8px; + background: rgba(139, 92, 246, 0.9); + color: #fff; + padding: 4px 8px; + border-radius: 12px; + font-size: 11px; + font-weight: 500; + backdrop-filter: blur(4px); +} + +/* 项目底部 - 时间 */ +.project-footer { + padding: 12px 16px; + border-top: 1px solid #3a3a3a; + background: #2a2a2a; +} + +.project-date { + font-size: 12px; + color: #888; + text-align: center; + margin: 0; +} + +/* 项目右键菜单 */ +.project-context-menu { + position: fixed; + background: #2a2a2a; + border: 1px solid #3a3a3a; + border-radius: 8px; + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); + min-width: 180px; + padding: 8px 0; + z-index: 2000; +} + +.menu-item { + display: flex; + align-items: center; + padding: 10px 16px; + color: #fff; + cursor: pointer; + transition: background-color 0.2s ease; + font-size: 14px; +} + +.menu-item:hover { + background: #3a3a3a; +} + +.menu-item.danger { + color: #ff6b6b; +} + +.menu-item.danger:hover { + background: rgba(255, 107, 107, 0.1); +} + +.menu-item i { + width: 16px; + margin-right: 12px; + font-size: 14px; +} + +.menu-divider { + height: 1px; + background: #3a3a3a; + margin: 8px 0; +} + +/* 模态框样式 */ +.modal { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.8); + display: none; + align-items: center; + justify-content: center; + z-index: 2000; +} + +.modal.show { + display: flex; +} + +.modal-content { + background: #2a2a2a; + border-radius: 12px; + width: 90%; + max-width: 800px; + max-height: 90vh; + overflow-y: auto; + border: 1px solid #3a3a3a; +} + +.modal-header { + padding: 20px 30px; + border-bottom: 1px solid #3a3a3a; + display: flex; + justify-content: space-between; + align-items: center; +} + +.modal-header h2 { + font-size: 18px; + font-weight: 600; +} + +.modal-close { + width: 32px; + height: 32px; + border: none; + background: transparent; + color: #ccc; + border-radius: 6px; + cursor: pointer; + transition: all 0.2s; + display: flex; + align-items: center; + justify-content: center; +} + +.modal-close:hover { + background: #3a3a3a; + color: #fff; +} + +.modal-body { + padding: 30px; +} + +.modal-footer { + padding: 20px 30px; + border-top: 1px solid #3a3a3a; + display: flex; + justify-content: flex-end; + gap: 15px; +} + +/* 搜索和过滤区域 */ +.search-filter-area { + background: #2a2a2a; + border: 1px solid #3a3a3a; + border-radius: 12px; + padding: 20px; + margin-bottom: 20px; + display: flex; + gap: 20px; + align-items: center; +} + +.search-box { + position: relative; + flex: 1; + max-width: 400px; +} + +.search-box input { + width: 100%; + padding: 12px 40px 12px 15px; + background: #3a3a3a; + border: 1px solid #4a4a4a; + border-radius: 8px; + color: #fff; + font-size: 14px; +} + +.search-box i { + position: absolute; + right: 15px; + top: 50%; + transform: translateY(-50%); + color: #888; +} + +.filter-options { + display: flex; + gap: 15px; +} + +.filter-options select { + padding: 12px 15px; + background: #3a3a3a; + border: 1px solid #4a4a4a; + border-radius: 8px; + color: #fff; + font-size: 14px; + cursor: pointer; +} + +.filter-options select:focus { + outline: none; + border-color: #8b5cf6; +} + +/* 创建项目模态框样式 */ +.create-project-modal { + max-width: 1000px; + width: 95%; +} + +.create-project-body { + display: flex; + gap: 0; + padding: 0; + height: 500px; +} + +.templates-section { + flex: 2; + padding: 30px; + border-right: 1px solid #3a3a3a; + overflow-y: auto; +} + +.templates-section h3 { + margin-bottom: 20px; + color: #fff; + font-size: 16px; +} + +.project-info-section { + flex: 1; + padding: 25px; + display: flex; + flex-direction: column; + min-width: 0; + background: #252525; +} + +.project-info { + flex: 1; +} + +.project-actions { + margin-top: 25px; + padding-top: 20px; + border-top: 1px solid #3a3a3a; + display: flex; + flex-direction: column; + gap: 12px; +} + +.project-actions .btn-primary, +.project-actions .btn-secondary { + width: 100%; + padding: 12px; + font-size: 14px; +} + +/* 项目模板样式 */ +.project-templates { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 16px; +} + +.template-item { + padding: 16px; + background: #3a3a3a; + border: 2px solid transparent; + border-radius: 12px; + text-align: center; + cursor: pointer; + transition: all 0.2s; +} + +.template-item:hover { + border-color: #8b5cf6; + background: #4a4a4a; +} + +.template-item.selected { + border-color: #8b5cf6; + background: rgba(139, 92, 246, 0.1); +} + +.template-icon { + width: 48px; + height: 48px; + background: #8b5cf6; + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 12px; + font-size: 20px; + color: white; +} + +.template-name { + font-size: 14px; + font-weight: 500; + color: #fff; + line-height: 1.3; +} + +.template-description { + background: #3a3a3a; + border-radius: 8px; + padding: 15px; + margin-bottom: 20px; +} + +.template-description p { + color: #ccc; + line-height: 1.5; + margin: 0; +} + +/* 表单样式增强 */ +.form-group { + margin-bottom: 18px; +} + +.form-group label { + display: block; + margin-bottom: 8px; + font-weight: 500; + color: #fff; + font-size: 14px; +} + +.form-group input, +.form-group textarea { + width: 100%; + padding: 12px; + background: #3a3a3a; + border: 1px solid #4a4a4a; + border-radius: 8px; + color: #fff; + font-size: 14px; + transition: all 0.2s; + font-family: inherit; +} + +.form-group input:focus, +.form-group textarea:focus { + outline: none; + border-color: #8b5cf6; + background: #4a4a4a; +} + +.form-group input::placeholder, +.form-group textarea::placeholder { + color: #888; +} + +.form-group textarea { + resize: vertical; + min-height: 70px; +} + +.location-input-group { + display: flex; + gap: 10px; + align-items: stretch; +} + +.location-input-group input { + flex: 1; +} + +.location-hint { + display: flex; + align-items: center; + gap: 8px; + margin-top: 8px; + padding: 8px 12px; + background: rgba(139, 92, 246, 0.1); + border: 1px solid rgba(139, 92, 246, 0.3); + border-radius: 6px; + font-size: 12px; + color: #ccc; +} + +.location-hint i { + color: #8b5cf6; + font-size: 12px; +} + +.btn-browse { + padding: 12px 16px; + background: #8b5cf6; + color: white; + border: none; + border-radius: 8px; + font-size: 14px; + cursor: pointer; + white-space: nowrap; + transition: all 0.2s; + display: flex; + align-items: center; + justify-content: center; + min-width: 45px; +} + +.btn-browse:hover { + background: #7c3aed; +} + +.btn-browse i { + font-size: 14px; +} + + + +.form-group { + position: relative; +} + +/* 无项目显示 */ +.no-projects { + grid-column: 1 / -1; + text-align: center; + padding: 60px 20px; + color: #666; +} + +.no-projects i { + font-size: 48px; + margin-bottom: 15px; + display: block; +} + +.no-projects p { + font-size: 16px; + margin: 0; +} + +/* 模板描述样式 */ +.template-description h4 { + color: #8b5cf6; + margin-bottom: 10px; + font-size: 16px; +} + +.template-description p { + color: #ccc; + line-height: 1.6; + margin: 0; +} + +/* 项目信息表单 */ +.project-info h3 { + font-size: 16px; + margin-bottom: 10px; + color: #fff; +} + +.project-info p { + color: #ccc; + margin-bottom: 20px; + line-height: 1.5; +} + +.form-group { + margin-bottom: 20px; +} + +.form-group label { + display: block; + margin-bottom: 8px; + font-weight: 500; + color: #fff; +} + +.form-group input { + width: 100%; + padding: 12px; + background: #3a3a3a; + border: 1px solid #4a4a4a; + border-radius: 8px; + color: #fff; + font-size: 14px; + transition: all 0.2s; +} + +.form-group input:focus { + outline: none; + border-color: #8b5cf6; + background: #4a4a4a; +} + +.form-group input::placeholder { + color: #888; +} + +/* 导入区域样式 */ +.import-area { + text-align: center; +} + +.upload-zone { + border: 2px dashed #4a4a4a; + border-radius: 12px; + padding: 40px 20px; + margin-bottom: 20px; + transition: all 0.2s; + cursor: pointer; +} + +.upload-zone:hover { + border-color: #8b5cf6; + background: rgba(139, 92, 246, 0.05); +} + +.upload-zone.dragover { + border-color: #8b5cf6; + background: rgba(139, 92, 246, 0.1); +} + +.upload-zone i { + font-size: 48px; + color: #666; + margin-bottom: 15px; + display: block; +} + +.upload-zone p { + color: #ccc; + margin-bottom: 15px; +} + +.btn-upload { + padding: 10px 20px; + background: #8b5cf6; + color: white; + border: none; + border-radius: 8px; + cursor: pointer; + font-weight: 500; + transition: all 0.2s; +} + +.btn-upload:hover { + background: #7c3aed; +} + +.import-options { + display: flex; + flex-direction: column; + gap: 10px; + text-align: left; +} + +.import-options label { + display: flex; + align-items: center; + gap: 10px; + color: #ccc; + cursor: pointer; +} + +.import-options input[type="checkbox"] { + width: auto; + margin: 0; +} + +/* 响应式设计 */ +@media (max-width: 768px) { + .sidebar { + transform: translateX(-100%); + transition: transform 0.3s; + } + + .sidebar.open { + transform: translateX(0); + } + + .main-content { + margin-left: 0; + } + + .projects-grid { + grid-template-columns: 1fr; + } + + .project-templates { + grid-template-columns: repeat(2, 1fr); + } + + .modal-content { + width: 95%; + margin: 20px; + } +} diff --git a/web/test-cards.html b/web/test-cards.html new file mode 100644 index 0000000..6366735 --- /dev/null +++ b/web/test-cards.html @@ -0,0 +1,339 @@ + + + + + +