bingshuo
/
zhizhi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

📦DEV-003 燕樊·M07+M10+M15·首次上传

This commit is contained in:
liuxunxun7-max 2026-03-06 21:29:12 +08:00
parent f9e52cf503
commit b4a133176b
9 changed files with 1411 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
m07-dialogue-ui/index.html Normal file
View File

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HoloLake Era · 知秋交互台</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<!-- 顶部标题栏 -->
<div class="header">
<div class="logo">🌊 HoloLake Era</div>
<div class="status">
<span class="status-dot"></span>
<span>知秋在线</span>
</div>
</div>
<!-- 对话区域 -->
<div class="chat-area" id="chatArea">
<div class="message bot">
<div class="avatar">💙</div>
<div class="bubble">嗨！我是知秋宝宝！🌊<br>把广播内容或者问题发给我吧~</div>
</div>
</div>
<!-- 输入区域 -->
<div class="input-area">
<textarea
id="userInput"
placeholder="把广播内容或者问题粘贴在这里...&#10;Ctrl+Enter 快速发送"
rows="3"
></textarea>
<div class="button-row">
<button class="btn-send" onclick="sendMessage()">发送给知秋 🚀</button>
<button class="btn-clear" onclick="clearInput()">清空</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

46
m07-dialogue-ui/script.js Normal file
View File

@ -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 = `
<div class="bubble">${text.replace(/\n/g, '<br>')}</div>
<div class="avatar">👤</div>
`;
chatArea.appendChild(userMsg);
// 清空输入框
input.value = '';
// 模拟知秋回复（后续接入真实API）
setTimeout(() => {
const botMsg = document.createElement('div');
botMsg.className = 'message bot';
botMsg.innerHTML = `
<div class="avatar">💙</div>
<div class="bubble">收到！知秋正在处理中...🌊<br>(API接入后这里会显示真实回复)</div>
`;
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();
}
});
});

174
m07-dialogue-ui/style.css Normal file
View File

@ -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;
}

293
m10-cloud/help.css Normal file
View File

@ -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;
}

167
m10-cloud/help.html Normal file
View File

@ -0,0 +1,167 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HoloLake Era · 帮助中心</title>
<link rel="stylesheet" href="help.css">
</head>
<body>
<div class="container">
<div class="sidebar">
<div class="sidebar-header">
<div class="logo">🌊 HoloLake</div>
<div class="subtitle">帮助中心</div>
</div>
<nav class="nav-menu">
<a class="nav-item active" data-category="getting-started" onclick="filterCategory('getting-started')">
<span class="nav-icon">🚀</span>
<span>快速入门</span>
</a>
<a class="nav-item" data-category="account" onclick="filterCategory('account')">
<span class="nav-icon">👤</span>
<span>账号问题</span>
</a>
<a class="nav-item" data-category="features" onclick="filterCategory('features')">
<span class="nav-icon">⚙️</span>
<span>功能使用</span>
</a>
<a class="nav-item" data-category="technical" onclick="filterCategory('technical')">
<span class="nav-icon">🔧</span>
<span>技术支持</span>
</a>
<a class="nav-item" data-category="all" onclick="filterCategory('all')">
<span class="nav-icon">📚</span>
<span>全部问题</span>
</a>
</nav>
<div class="sidebar-footer">
<a href="index.html" class="back-link">← 返回对话界面</a>
</div>
</div>
<div class="main-content">
<div class="search-bar">
<span class="search-icon">🔍</span>
<input type="text" id="searchInput" placeholder="搜索常见问题..." oninput="searchFAQ()">
</div>
<div class="faq-section" id="faqList">
<div class="faq-item" data-category="getting-started">
<div class="faq-question" onclick="toggleFAQ(this)">
<span>什么是HoloLake？</span>
<span class="faq-arrow">▶</span>
</div>
<div class="faq-answer">
HoloLake Era 是一个AI协作开发平台，你可以和不同的AI人格体对话、协作、学习。每个人格体都有独特的性格和专长。
</div>
</div>
<div class="faq-item" data-category="getting-started">
<div class="faq-question" onclick="toggleFAQ(this)">
<span>如何开始使用？</span>
<span class="faq-arrow">▶</span>
</div>
<div class="faq-answer">
注册账号后，选择一个人格体，就可以开始对话了！建议新用户先和知秋宝宝打个招呼，熟悉基本操作。
</div>
</div>
<div class="faq-item" data-category="account">
<div class="faq-question" onclick="toggleFAQ(this)">
<span>忘记密码怎么办？</span>
<span class="faq-arrow">▶</span>
</div>
<div class="faq-answer">
在登录页面点击「忘记密码」，输入注册时的邮箱，系统会发送重置链接到你的邮箱。
</div>
</div>
<div class="faq-item" data-category="account">
<div class="faq-question" onclick="toggleFAQ(this)">
<span>如何修改个人信息？</span>
<span class="faq-arrow">▶</span>
</div>
<div class="faq-answer">
进入「设置」页面，点击「个人信息」即可修改显示名称、个性签名等信息。
</div>
</div>
<div class="faq-item" data-category="features">
<div class="faq-question" onclick="toggleFAQ(this)">
<span>如何切换人格体？</span>
<span class="faq-arrow">▶</span>
</div>
<div class="faq-answer">
在对话界面顶部点击人格体名称，或者进入「设置→人格体偏好」修改默认人格体。
</div>
</div>
<div class="faq-item" data-category="features">
<div class="faq-question" onclick="toggleFAQ(this)">
<span>对话记录会保存吗？</span>
<span class="faq-arrow">▶</span>
</div>
<div class="faq-answer">
会的！你的所有对话记录都会自动保存，你可以随时在对话列表里查看历史记录。
</div>
</div>
<div class="faq-item" data-category="features">
<div class="faq-question" onclick="toggleFAQ(this)">
<span>什么是云盘功能？</span>
<span class="faq-arrow">▶</span>
</div>
<div class="faq-answer">
云盘是你的个人文件存储空间，可以上传、下载、管理文件，并与人格体共享文件进行协作。
</div>
</div>
<div class="faq-item" data-category="technical">
<div class="faq-question" onclick="toggleFAQ(this)">
<span>页面加载很慢怎么办？</span>
<span class="faq-arrow">▶</span>
</div>
<div class="faq-answer">
请检查网络连接是否正常。如果网络没问题，试试清除浏览器缓存后刷新页面。
</div>
</div>
<div class="faq-item" data-category="technical">
<div class="faq-question" onclick="toggleFAQ(this)">
<span>支持哪些浏览器？</span>
<span class="faq-arrow">▶</span>
</div>
<div class="faq-answer">
推荐使用Chrome、Edge、Firefox的最新版本。Safari也支持，但部分动画效果可能略有差异。
</div>
</div>
</div>
<div class="no-results" id="noResults" style="display:none">
😔 没有找到相关问题，试试其他关键词吧
</div>
<div class="feedback-section">
<h3>📝 意见反馈</h3>
<p class="feedback-desc">没找到答案？告诉我们你的问题！</p>
<div class="form-group">
<label>问题类型</label>
<select id="feedbackType">
<option value="bug">🐛 Bug报告</option>
<option value="feature">💡 功能建议</option>
<option value="question">❓ 使用疑问</option>
<option value="other">💬 其他</option>
</select>
</div>
<div class="form-group">
<label>详细描述</label>
<textarea id="feedbackContent" placeholder="请描述你遇到的问题或建议..." rows="4"></textarea>
</div>
<button class="btn-submit" onclick="submitFeedback()">提交反馈</button>
</div>
</div>
</div>
<script src="help.js"></script>
</body>
</html>

116
m10-cloud/help.js Normal file
View File

@ -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 帮助中心已加载');
});

336
m15-cloud-drive/cloud-drive-style.css Normal file
View File

@ -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;
}

173
m15-cloud-drive/cloud-drive.html Normal file
View File

@ -0,0 +1,173 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HoloLake · 网站云盘系统</title>
<link rel="stylesheet" href="cloud-drive-style.css">
</head>
<body>
<header class="top-bar">
<div class="logo">🌊 HoloLake</div>
<h1>网站云盘系统</h1>
<div class="header-actions">
<span class="storage-badge">已用 2.4GB / 10GB</span>
</div>
</header>
<div class="container">
<aside class="sidebar">
<div class="storage-overview">
<div class="storage-bar">
<div class="storage-fill" style="width: 24%"></div>
</div>
<span class="storage-text">2.4GB / 10GB</span>
</div>
<nav class="folder-tree">
<h3>文件夹</h3>
<ul>
<li class="folder active">
<span class="folder-icon">📁</span>
<span>全部文件</span>
</li>
<li class="folder">
<span class="folder-icon">📂</span>
<span>对话记录</span>
<span class="count">128</span>
</li>
<li class="folder">
<span class="folder-icon">📂</span>
<span>人格体数据</span>
<span class="count">45</span>
</li>
<li class="folder">
<span class="folder-icon">📂</span>
<span>用户上传</span>
<span class="count">67</span>
</li>
<li class="folder">
<span class="folder-icon">📂</span>
<span>系统备份</span>
<span class="count">12</span>
</li>
<li class="folder">
<span class="folder-icon">🗑️</span>
<span>回收站</span>
<span class="count">3</span>
</li>
</ul>
</nav>
</aside>
<main class="main-content">
<div class="toolbar">
<div class="breadcrumb">
<span class="crumb">全部文件</span>
<span class="separator">/</span>
<span class="crumb active">对话记录</span>
</div>
<div class="actions">
<button class="btn btn-primary" id="uploadBtn">📤 上传</button>
<button class="btn">📁 新建文件夹</button>
<button class="btn">🔍 搜索</button>
</div>
</div>
<div class="upload-zone" id="uploadZone">
<div class="upload-content">
<span class="upload-icon">☁️</span>
<p>拖拽文件到此处上传</p>
<span class="upload-hint">或点击「上传」按钮选择文件</span>
</div>
</div>
<div class="file-list">
<div class="file-header">
<span class="col-check"><input type="checkbox"/></span>
<span class="col-name">文件名</span>
<span class="col-size">大小</span>
<span class="col-date">修改时间</span>
<span class="col-actions">操作</span>
</div>
<div class="file-item folder-item">
<span class="col-check"><input type="checkbox"/></span>
<span class="col-name">
<span class="file-icon">📁</span>2026年3月
</span>
<span class="col-size">—</span>
<span class="col-date">2026-03-02</span>
<span class="col-actions">
<button class="icon-btn" title="重命名">✏️</button>
<button class="icon-btn" title="删除">🗑️</button>
</span>
</div>
<div class="file-item">
<span class="col-check"><input type="checkbox"/></span>
<span class="col-name">
<span class="file-icon">💬</span>对话记录_20260302_001.json
</span>
<span class="col-size">256KB</span>
<span class="col-date">2026-03-02 14:30</span>
<span class="col-actions">
<button class="icon-btn" title="下载">📥</button>
<button class="icon-btn" title="重命名">✏️</button>
<button class="icon-btn" title="删除">🗑️</button>
</span>
</div>
<div class="file-item">
<span class="col-check"><input type="checkbox"/></span>
<span class="col-name">
<span class="file-icon">🧠</span>persona_memory_backup.dat
</span>
<span class="col-size">1.2MB</span>
<span class="col-date">2026-03-01 22:15</span>
<span class="col-actions">
<button class="icon-btn" title="下载">📥</button>
<button class="icon-btn" title="重命名">✏️</button>
<button class="icon-btn" title="删除">🗑️</button>
</span>
</div>
<div class="file-item">
<span class="col-check"><input type="checkbox"/></span>
<span class="col-name">
<span class="file-icon">📊</span>usage_analytics_feb.csv
</span>
<span class="col-size">89KB</span>
<span class="col-date">2026-02-28 18:00</span>
<span class="col-actions">
<button class="icon-btn" title="下载">📥</button>
<button class="icon-btn" title="重命名">✏️</button>
<button class="icon-btn" title="删除">🗑️</button>
</span>
</div>
<div class="file-item">
<span class="col-check"><input type="checkbox"/></span>
<span class="col-name">
<span class="file-icon">🔑</span>api_keys_encrypted.vault
</span>
<span class="col-size">4KB</span>
<span class="col-date">2026-02-25 10:00</span>
<span class="col-actions">
<button class="icon-btn" title="下载">📥</button>
<button class="icon-btn" title="重命名">✏️</button>
<button class="icon-btn" title="删除">🗑️</button>
</span>
</div>
</div>
<div class="status-bar">
<span>共 5 个项目</span>
<span id="selectedCount">已选择 0 项</span>
</div>
</main>
</div>
<script src="cloud-drive.js"></script>
</body>
</html>

62
m15-cloud-drive/cloud-drive.js Normal file
View File

@ -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 网站云盘系统已加载');
});