diff --git a/m07-dialogue-ui/index.html b/m07-dialogue-ui/index.html new file mode 100644 index 00000000..5fe3136d --- /dev/null +++ b/m07-dialogue-ui/index.html @@ -0,0 +1,44 @@ + + + + + + HoloLake Era · 知秋交互台 + + + +
+ +
+ +
+ + 知秋在线 +
+
+ + +
+
+
💙
+
嗨!我是知秋宝宝!🌊
把广播内容或者问题发给我吧~
+
+
+ + +
+ +
+ + +
+
+
+ + + + \ No newline at end of file diff --git a/m07-dialogue-ui/script.js b/m07-dialogue-ui/script.js new file mode 100644 index 00000000..a0ff6e03 --- /dev/null +++ b/m07-dialogue-ui/script.js @@ -0,0 +1,46 @@ +function sendMessage() { + const input = document.getElementById('userInput'); + const chatArea = document.getElementById('chatArea'); + const text = input.value.trim(); + + if (!text) return; + + // 显示用户消息 + const userMsg = document.createElement('div'); + userMsg.className = 'message user'; + userMsg.innerHTML = ` +
${text.replace(/\n/g, '
')}
+
👤
+ `; + chatArea.appendChild(userMsg); + + // 清空输入框 + input.value = ''; + + // 模拟知秋回复(后续接入真实API) + setTimeout(() => { + const botMsg = document.createElement('div'); + botMsg.className = 'message bot'; + botMsg.innerHTML = ` +
💙
+
收到!知秋正在处理中...🌊
(API接入后这里会显示真实回复)
+ `; + chatArea.appendChild(botMsg); + chatArea.scrollTop = chatArea.scrollHeight; + }, 500); + + chatArea.scrollTop = chatArea.scrollHeight; +} + +function clearInput() { + document.getElementById('userInput').value = ''; +} + +// 支持 Ctrl+Enter 发送 +document.addEventListener('DOMContentLoaded', () => { + document.getElementById('userInput').addEventListener('keydown', (e) => { + if (e.ctrlKey && e.key === 'Enter') { + sendMessage(); + } + }); +}); \ No newline at end of file diff --git a/m07-dialogue-ui/style.css b/m07-dialogue-ui/style.css new file mode 100644 index 00000000..b0720dc0 --- /dev/null +++ b/m07-dialogue-ui/style.css @@ -0,0 +1,174 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif; + background: #0a0a1a; + color: #e0e0f0; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + +.container { + width: 800px; + height: 90vh; + background: #12122a; + border-radius: 16px; + border: 1px solid #2a2a5a; + display: flex; + flex-direction: column; + overflow: hidden; + box-shadow: 0 0 40px rgba(100, 100, 255, 0.1); +} + +.header { + padding: 20px 24px; + background: #1a1a3a; + border-bottom: 1px solid #2a2a5a; + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo { + font-size: 18px; + font-weight: 600; + color: #a0a0ff; +} + +.status { + display: flex; + align-items: center; + gap: 8px; + font-size: 13px; + color: #60ff80; +} + +.status-dot { + width: 8px; + height: 8px; + background: #60ff80; + border-radius: 50%; + animation: pulse 2s infinite; +} + +@keyframes pulse { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.4; } +} + +.chat-area { + flex: 1; + padding: 24px; + overflow-y: auto; + display: flex; + flex-direction: column; + gap: 16px; +} + +.message { + display: flex; + gap: 12px; + align-items: flex-start; +} + +.message.user { + flex-direction: row-reverse; +} + +.avatar { + width: 36px; + height: 36px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 18px; + flex-shrink: 0; + background: #1a1a3a; + border: 1px solid #2a2a5a; +} + +.bubble { + max-width: 70%; + padding: 12px 16px; + border-radius: 12px; + font-size: 14px; + line-height: 1.6; + background: #1a1a3a; + border: 1px solid #2a2a5a; +} + +.message.user .bubble { + background: #2a2a5a; + border-color: #4a4aaa; +} + +.input-area { + padding: 16px 24px 24px; + border-top: 1px solid #2a2a5a; + background: #1a1a3a; +} + +textarea { + width: 100%; + background: #0a0a1a; + border: 1px solid #2a2a5a; + border-radius: 8px; + color: #e0e0f0; + padding: 12px; + font-size: 14px; + resize: none; + outline: none; + font-family: inherit; + line-height: 1.6; +} + +textarea:focus { + border-color: #6060ff; +} + +.button-row { + display: flex; + gap: 8px; + margin-top: 8px; + justify-content: flex-end; +} + +.btn-send { + background: #4040cc; + color: white; + border: none; + padding: 10px 24px; + border-radius: 8px; + cursor: pointer; + font-size: 14px; + font-family: inherit; + transition: background 0.2s; +} + +.btn-send:hover { + background: #5050dd; +} + +.btn-clear { + background: transparent; + color: #8080aa; + border: 1px solid #2a2a5a; + padding: 10px 16px; + border-radius: 8px; + cursor: pointer; + font-size: 14px; + font-family: inherit; + transition: all 0.2s; +} + +.btn-clear:hover { + border-color: #6060ff; + color: #a0a0ff; +} \ No newline at end of file diff --git a/m10-cloud/help.css b/m10-cloud/help.css new file mode 100644 index 00000000..abc9b5b4 --- /dev/null +++ b/m10-cloud/help.css @@ -0,0 +1,293 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif; + background: #0a0a1a; + color: #e0e0f0; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + +.container { + width: 960px; + height: 90vh; + background: #12122a; + border-radius: 16px; + border: 1px solid #2a2a5a; + display: flex; + overflow: hidden; + box-shadow: 0 0 40px rgba(100, 100, 255, 0.1); +} + +.sidebar { + width: 220px; + background: #1a1a3a; + border-right: 1px solid #2a2a5a; + display: flex; + flex-direction: column; + padding: 24px 0; +} + +.sidebar-header { + padding: 0 20px 24px; + border-bottom: 1px solid #2a2a5a; +} + +.logo { + font-size: 18px; + font-weight: 600; + color: #a0a0ff; +} + +.subtitle { + font-size: 12px; + color: #6060aa; + margin-top: 4px; +} + +.nav-menu { + flex: 1; + padding: 16px 12px; + display: flex; + flex-direction: column; + gap: 4px; +} + +.nav-item { + display: flex; + align-items: center; + gap: 12px; + padding: 12px 16px; + border-radius: 8px; + color: #8080aa; + text-decoration: none; + cursor: pointer; + transition: all 0.2s; + font-size: 14px; +} + +.nav-item:hover { + background: rgba(100, 100, 255, 0.1); + color: #c0c0ff; +} + +.nav-item.active { + background: rgba(100, 100, 255, 0.15); + color: #a0a0ff; +} + +.nav-icon { + font-size: 16px; +} + +.sidebar-footer { + padding: 16px 20px; + border-top: 1px solid #2a2a5a; +} + +.back-link { + color: #6060aa; + text-decoration: none; + font-size: 13px; +} + +.back-link:hover { + color: #a0a0ff; +} + +.main-content { + flex: 1; + padding: 32px; + overflow-y: auto; +} + +.search-bar { + display: flex; + align-items: center; + background: #0a0a1a; + border: 1px solid #2a2a5a; + border-radius: 10px; + padding: 12px 16px; + margin-bottom: 28px; + transition: border-color 0.2s; +} + +.search-bar:focus-within { + border-color: #6060ff; +} + +.search-icon { + font-size: 16px; + margin-right: 12px; +} + +.search-bar input { + flex: 1; + background: transparent; + border: none; + color: #e0e0f0; + font-size: 14px; + outline: none; + font-family: inherit; +} + +.search-bar input::placeholder { + color: #4040aa; +} + +.faq-item { + margin-bottom: 8px; + border: 1px solid #2a2a5a; + border-radius: 10px; + overflow: hidden; + transition: border-color 0.2s; +} + +.faq-item:hover { + border-color: #4040aa; +} + +.faq-question { + display: flex; + justify-content: space-between; + align-items: center; + padding: 16px 20px; + cursor: pointer; + font-size: 14px; + font-weight: 500; + color: #c0c0e0; + transition: background 0.2s; +} + +.faq-question:hover { + background: rgba(100, 100, 255, 0.05); +} + +.faq-arrow { + font-size: 10px; + color: #6060aa; + transition: transform 0.3s; +} + +.faq-item.open .faq-arrow { + transform: rotate(90deg); +} + +.faq-answer { + padding: 0 20px; + max-height: 0; + overflow: hidden; + transition: max-height 0.3s, padding 0.3s; + font-size: 13px; + color: #8080aa; + line-height: 1.8; +} + +.faq-item.open .faq-answer { + padding: 0 20px 16px; + max-height: 200px; +} + +.no-results { + text-align: center; + padding: 40px; + color: #4040aa; + font-size: 14px; +} + +.feedback-section { + margin-top: 40px; + padding-top: 32px; + border-top: 1px solid #2a2a5a; +} + +.feedback-section h3 { + font-size: 18px; + color: #e0e0ff; + margin-bottom: 8px; +} + +.feedback-desc { + font-size: 13px; + color: #6060aa; + margin-bottom: 24px; +} + +.form-group { + margin-bottom: 20px; +} + +.form-group label { + display: block; + font-size: 13px; + color: #8080aa; + margin-bottom: 8px; + font-weight: 500; +} + +select, textarea { + width: 100%; + max-width: 500px; + background: #0a0a1a; + border: 1px solid #2a2a5a; + border-radius: 8px; + color: #e0e0f0; + padding: 10px 14px; + font-size: 14px; + font-family: inherit; + outline: none; + transition: border-color 0.2s; +} + +select:focus, textarea:focus { + border-color: #6060ff; +} + +select { + cursor: pointer; + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236060aa' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 12px center; + padding-right: 32px; +} + +.btn-submit { + background: #4040cc; + color: white; + border: none; + padding: 10px 32px; + border-radius: 8px; + cursor: pointer; + font-size: 14px; + font-family: inherit; + transition: background 0.2s; +} + +.btn-submit:hover { + background: #5050dd; +} + +.submit-toast { + position: fixed; + top: 24px; + right: 24px; + background: #2a5a2a; + color: #60ff80; + padding: 12px 24px; + border-radius: 8px; + font-size: 14px; + opacity: 0; + transition: opacity 0.3s; + pointer-events: none; +} + +.submit-toast.show { + opacity: 1; +} diff --git a/m10-cloud/help.html b/m10-cloud/help.html new file mode 100644 index 00000000..54c31eb1 --- /dev/null +++ b/m10-cloud/help.html @@ -0,0 +1,167 @@ + + + + + + HoloLake Era · 帮助中心 + + + +
+ + +
+ + +
+
+
+ 什么是HoloLake? + +
+
+ HoloLake Era 是一个AI协作开发平台,你可以和不同的AI人格体对话、协作、学习。每个人格体都有独特的性格和专长。 +
+
+ +
+
+ 如何开始使用? + +
+
+ 注册账号后,选择一个人格体,就可以开始对话了!建议新用户先和知秋宝宝打个招呼,熟悉基本操作。 +
+
+ +
+
+ 忘记密码怎么办? + +
+
+ 在登录页面点击「忘记密码」,输入注册时的邮箱,系统会发送重置链接到你的邮箱。 +
+
+ +
+
+ 如何修改个人信息? + +
+
+ 进入「设置」页面,点击「个人信息」即可修改显示名称、个性签名等信息。 +
+
+ +
+
+ 如何切换人格体? + +
+
+ 在对话界面顶部点击人格体名称,或者进入「设置→人格体偏好」修改默认人格体。 +
+
+ +
+
+ 对话记录会保存吗? + +
+
+ 会的!你的所有对话记录都会自动保存,你可以随时在对话列表里查看历史记录。 +
+
+ +
+
+ 什么是云盘功能? + +
+
+ 云盘是你的个人文件存储空间,可以上传、下载、管理文件,并与人格体共享文件进行协作。 +
+
+ +
+
+ 页面加载很慢怎么办? + +
+
+ 请检查网络连接是否正常。如果网络没问题,试试清除浏览器缓存后刷新页面。 +
+
+ +
+
+ 支持哪些浏览器? + +
+
+ 推荐使用Chrome、Edge、Firefox的最新版本。Safari也支持,但部分动画效果可能略有差异。 +
+
+
+ + + + +
+
+ + + diff --git a/m10-cloud/help.js b/m10-cloud/help.js new file mode 100644 index 00000000..810c9f1a --- /dev/null +++ b/m10-cloud/help.js @@ -0,0 +1,116 @@ +function toggleFAQ(element) { + var item = element.parentElement; + var wasOpen = item.classList.contains('open'); + + // 关闭所有其他 FAQ + document.querySelectorAll('.faq-item').forEach(function(el) { + el.classList.remove('open'); + }); + + // 如果当前没打开,就打开它 + if (!wasOpen) { + item.classList.add('open'); + } +} + +function filterCategory(category) { + // 更新导航高亮 + document.querySelectorAll('.nav-item').forEach(function(item) { + if (item.dataset.category === category) { + item.classList.add('active'); + } else { + item.classList.remove('active'); + } + }); + + // 过滤 FAQ 显示 + var items = document.querySelectorAll('.faq-item'); + var visibleCount = 0; + + items.forEach(function(item) { + if (category === 'all' || item.dataset.category === category) { + item.style.display = 'block'; + visibleCount++; + } else { + item.style.display = 'none'; + } + }); + + // 显示/隐藏"无结果"提示 + document.getElementById('noResults').style.display = visibleCount === 0 ? 'block' : 'none'; + + // 清空搜索框 + document.getElementById('searchInput').value = ''; +} + +function searchFAQ() { + var query = document.getElementById('searchInput').value.toLowerCase(); + var items = document.querySelectorAll('.faq-item'); + var visibleCount = 0; + + // 重置导航为"全部" + document.querySelectorAll('.nav-item').forEach(function(item) { + if (item.dataset.category === 'all') { + item.classList.add('active'); + } else { + item.classList.remove('active'); + } + }); + + // 搜索过滤 + items.forEach(function(item) { + var question = item.querySelector('.faq-question span').textContent.toLowerCase(); + var answer = item.querySelector('.faq-answer').textContent.toLowerCase(); + + if (question.indexOf(query) !== -1 || answer.indexOf(query) !== -1 || query === '') { + item.style.display = 'block'; + visibleCount++; + } else { + item.style.display = 'none'; + } + }); + + // 显示/隐藏"无结果"提示 + document.getElementById('noResults').style.display = visibleCount === 0 ? 'block' : 'none'; +} + +function submitFeedback() { + var type = document.getElementById('feedbackType').value; + var content = document.getElementById('feedbackContent').value; + + if (!content.trim()) { + showToast('请先填写反馈内容 🙏'); + return; + } + + // 这里以后会连接后端 API + console.log('Feedback submitted:', { type: type, content: content }); + + // 清空表单 + document.getElementById('feedbackContent').value = ''; + + showToast('反馈已提交,感谢你! ✅'); +} + +function showToast(message) { + var toast = document.getElementById('submitToast'); + + if (!toast) { + toast = document.createElement('div'); + toast.id = 'submitToast'; + toast.className = 'submit-toast'; + document.body.appendChild(toast); + } + + toast.textContent = message; + toast.classList.add('show'); + + setTimeout(function() { + toast.classList.remove('show'); + }, 2000); +} + +// 页面加载完成后的初始化 +document.addEventListener('DOMContentLoaded', function() { + console.log('✅ HoloLake 帮助中心已加载'); +}); diff --git a/m15-cloud-drive/cloud-drive-style.css b/m15-cloud-drive/cloud-drive-style.css new file mode 100644 index 00000000..7b05d71a --- /dev/null +++ b/m15-cloud-drive/cloud-drive-style.css @@ -0,0 +1,336 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + --bg-primary: #0a0a0f; + --bg-secondary: #12121a; + --bg-card: #1a1a2e; + --bg-sidebar: #0f0f18; + --border-color: #2a2a3e; + --text-primary: #e0e0e0; + --text-secondary: #8888aa; + --accent-cyan: #00d4ff; + --accent-green: #00ff88; + --accent-red: #ff4466; + --accent-yellow: #ffaa00; + --accent-purple: #aa66ff; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + background: var(--bg-primary); + color: var(--text-primary); + min-height: 100vh; + display: flex; + flex-direction: column; +} + +.top-bar { + display: flex; + align-items: center; + padding: 16px 24px; + background: var(--bg-secondary); + border-bottom: 1px solid var(--border-color); + gap: 16px; +} + +.logo { + font-size: 20px; + font-weight: 700; + color: var(--accent-cyan); +} + +.top-bar h1 { + font-size: 18px; + font-weight: 600; + flex: 1; +} + +.storage-badge { + background: rgba(0, 212, 255, 0.1); + color: var(--accent-cyan); + padding: 4px 12px; + border-radius: 12px; + font-size: 12px; + border: 1px solid rgba(0, 212, 255, 0.3); +} + +.container { + display: flex; + flex: 1; + overflow: hidden; +} + +.sidebar { + width: 240px; + background: var(--bg-sidebar); + border-right: 1px solid var(--border-color); + padding: 20px 16px; + display: flex; + flex-direction: column; + gap: 24px; +} + +.storage-overview { + display: flex; + flex-direction: column; + gap: 8px; +} + +.storage-bar { + height: 6px; + background: var(--border-color); + border-radius: 3px; + overflow: hidden; +} + +.storage-fill { + height: 100%; + background: linear-gradient(90deg, var(--accent-cyan), var(--accent-green)); + border-radius: 3px; + transition: width 1s ease; +} + +.storage-text { + font-size: 12px; + color: var(--text-secondary); +} + +.folder-tree h3 { + font-size: 12px; + text-transform: uppercase; + letter-spacing: 1px; + color: var(--text-secondary); + margin-bottom: 12px; +} + +.folder-tree ul { + list-style: none; + display: flex; + flex-direction: column; + gap: 4px; +} + +.folder { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 12px; + border-radius: 8px; + cursor: pointer; + font-size: 14px; + transition: all 0.2s ease; +} + +.folder:hover { + background: rgba(0, 212, 255, 0.1); +} + +.folder.active { + background: rgba(0, 212, 255, 0.15); + color: var(--accent-cyan); +} + +.folder .count { + margin-left: auto; + font-size: 11px; + color: var(--text-secondary); + background: var(--border-color); + padding: 2px 8px; + border-radius: 10px; +} + +.main-content { + flex: 1; + display: flex; + flex-direction: column; + padding: 20px 24px; + overflow-y: auto; +} + +.toolbar { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 16px; +} + +.breadcrumb { + display: flex; + align-items: center; + gap: 8px; + font-size: 14px; +} + +.crumb { + color: var(--text-secondary); + cursor: pointer; +} + +.crumb.active { + color: var(--text-primary); +} + +.separator { + color: var(--text-secondary); +} + +.actions { + display: flex; + gap: 8px; +} + +.btn { + padding: 8px 16px; + border-radius: 8px; + border: 1px solid var(--border-color); + background: transparent; + color: var(--text-primary); + cursor: pointer; + font-size: 13px; + transition: all 0.2s ease; +} + +.btn:hover { + border-color: var(--accent-cyan); + background: rgba(0, 212, 255, 0.1); +} + +.btn-primary { + background: rgba(0, 212, 255, 0.15); + border-color: var(--accent-cyan); + color: var(--accent-cyan); +} + +.btn-primary:hover { + background: rgba(0, 212, 255, 0.25); +} + +.upload-zone { + border: 2px dashed var(--border-color); + border-radius: 12px; + padding: 24px; + text-align: center; + margin-bottom: 16px; + transition: all 0.3s ease; + cursor: pointer; + display: none; +} + +.upload-zone.visible { + display: block; +} + +.upload-zone.dragover { + border-color: var(--accent-cyan); + background: rgba(0, 212, 255, 0.05); +} + +.upload-icon { + font-size: 36px; + display: block; + margin-bottom: 8px; +} + +.upload-zone p { + font-size: 14px; + margin-bottom: 4px; +} + +.upload-hint { + font-size: 12px; + color: var(--text-secondary); +} + +.file-header { + display: grid; + grid-template-columns: 40px 1fr 100px 160px 120px; + align-items: center; + padding: 8px 12px; + border-bottom: 1px solid var(--border-color); + font-size: 12px; + color: var(--text-secondary); + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.file-item { + display: grid; + grid-template-columns: 40px 1fr 100px 160px 120px; + align-items: center; + padding: 12px; + border-bottom: 1px solid rgba(42, 42, 62, 0.5); + font-size: 14px; + transition: all 0.2s ease; + cursor: pointer; +} + +.file-item:hover { + background: rgba(0, 212, 255, 0.05); +} + +.file-item.selected { + background: rgba(0, 212, 255, 0.1); +} + +.file-icon { + margin-right: 8px; +} + +.col-size, .col-date { + color: var(--text-secondary); + font-size: 13px; +} + +.col-actions { + display: flex; + gap: 4px; + opacity: 0; + transition: opacity 0.2s ease; +} + +.file-item:hover .col-actions { + opacity: 1; +} + +.icon-btn { + background: transparent; + border: none; + cursor: pointer; + font-size: 14px; + padding: 4px 8px; + border-radius: 4px; + transition: background 0.2s ease; +} + +.icon-btn:hover { + background: rgba(0, 212, 255, 0.2); +} + +input[type="checkbox"] { + appearance: none; + width: 16px; + height: 16px; + border: 1px solid var(--border-color); + border-radius: 4px; + background: transparent; + cursor: pointer; +} + +input[type="checkbox"]:checked { + background: var(--accent-cyan); + border-color: var(--accent-cyan); +} + +.status-bar { + display: flex; + gap: 16px; + padding: 12px 0; + font-size: 12px; + color: var(--text-secondary); + border-top: 1px solid var(--border-color); + margin-top: auto; +} diff --git a/m15-cloud-drive/cloud-drive.html b/m15-cloud-drive/cloud-drive.html new file mode 100644 index 00000000..137b3b32 --- /dev/null +++ b/m15-cloud-drive/cloud-drive.html @@ -0,0 +1,173 @@ + + + + + + HoloLake · 网站云盘系统 + + + +
+ +

网站云盘系统

+
+ 已用 2.4GB / 10GB +
+
+ +
+ + +
+
+ +
+ + + +
+
+ +
+
+ ☁️ +

拖拽文件到此处上传

+ 或点击「上传」按钮选择文件 +
+
+ +
+
+ + 文件名 + 大小 + 修改时间 + 操作 +
+ +
+ + + 📁2026年3月 + + + 2026-03-02 + + + + +
+ +
+ + + 💬对话记录_20260302_001.json + + 256KB + 2026-03-02 14:30 + + + + + +
+ +
+ + + 🧠persona_memory_backup.dat + + 1.2MB + 2026-03-01 22:15 + + + + + +
+ +
+ + + 📊usage_analytics_feb.csv + + 89KB + 2026-02-28 18:00 + + + + + +
+ +
+ + + 🔑api_keys_encrypted.vault + + 4KB + 2026-02-25 10:00 + + + + + +
+
+ +
+ 共 5 个项目 + 已选择 0 项 +
+
+
+ + + + diff --git a/m15-cloud-drive/cloud-drive.js b/m15-cloud-drive/cloud-drive.js new file mode 100644 index 00000000..6d85b691 --- /dev/null +++ b/m15-cloud-drive/cloud-drive.js @@ -0,0 +1,62 @@ +document.addEventListener('DOMContentLoaded', function() { + // 文件夹切换 + const folders = document.querySelectorAll('.folder'); + folders.forEach(folder => { + folder.addEventListener('click', function() { + folders.forEach(f => f.classList.remove('active')); + this.classList.add('active'); + }); + }); + + // 文件选中 + const fileItems = document.querySelectorAll('.file-item'); + fileItems.forEach(item => { + item.addEventListener('click', function(e) { + if (e.target.type === 'checkbox' || e.target.closest('.icon-btn')) return; + this.classList.toggle('selected'); + const cb = this.querySelector('input[type="checkbox"]'); + if (cb) cb.checked = !cb.checked; + updateCount(); + }); + }); + + // 上传区域显隐 + var uploadBtn = document.getElementById('uploadBtn'); + var uploadZone = document.getElementById('uploadZone'); + if (uploadBtn && uploadZone) { + uploadBtn.addEventListener('click', function() { + uploadZone.classList.toggle('visible'); + }); + } + + // 拖拽效果 + if (uploadZone) { + document.addEventListener('dragover', function(e) { + e.preventDefault(); + uploadZone.classList.add('visible'); + uploadZone.classList.add('dragover'); + }); + document.addEventListener('dragleave', function(e) { + if (!e.relatedTarget) uploadZone.classList.remove('dragover'); + }); + document.addEventListener('drop', function(e) { + e.preventDefault(); + uploadZone.classList.remove('dragover'); + }); + } + + // 选中计数 + function updateCount() { + var n = document.querySelectorAll('.file-item.selected').length; + var el = document.getElementById('selectedCount'); + if (el) el.textContent = '已选择 ' + n + ' 项'; + } + + // 存储条动画 + setTimeout(function() { + var fill = document.querySelector('.storage-fill'); + if (fill) fill.style.width = fill.style.width; + }, 500); + + console.log('✅ HoloLake 网站云盘系统已加载'); +});