722 lines
22 KiB
HTML
722 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>共享空间</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
|
|
}
|
|
|
|
body {
|
|
background-color: #f5f7fa;
|
|
color: #333;
|
|
line-height: 1.6;
|
|
padding: 20px;
|
|
max-width: 100%;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.container {
|
|
max-width: 400px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
border-radius: 20px;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
|
|
overflow: hidden;
|
|
}
|
|
|
|
header {
|
|
text-align: center;
|
|
padding: 30px 20px 20px;
|
|
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
|
|
color: white;
|
|
}
|
|
|
|
header h1 {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
header p {
|
|
opacity: 0.9;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.status-indicator {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: 10px 0 20px;
|
|
}
|
|
|
|
.status-badge {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 20px;
|
|
padding: 6px 15px;
|
|
font-size: 12px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.content {
|
|
padding: 0 20px 30px;
|
|
animation: fadeIn 0.5s ease;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.space-info {
|
|
background: #f8f9fa;
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.space-name {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.space-status {
|
|
color: #666;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.create-space-card {
|
|
background: white;
|
|
border-radius: 16px;
|
|
padding: 30px 20px;
|
|
text-align: center;
|
|
margin: 30px 0;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.create-icon {
|
|
width: 80px;
|
|
height: 80px;
|
|
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 20px;
|
|
font-size: 32px;
|
|
color: white;
|
|
}
|
|
|
|
.create-title {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.create-desc {
|
|
color: #666;
|
|
font-size: 14px;
|
|
margin-bottom: 25px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.action-btn {
|
|
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 12px;
|
|
padding: 15px 30px;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
box-shadow: 0 4px 12px rgba(37, 117, 252, 0.3);
|
|
width: 100%;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.action-btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 16px rgba(37, 117, 252, 0.4);
|
|
}
|
|
|
|
.secondary-btn {
|
|
background: white;
|
|
color: #2575fc;
|
|
border: 1px solid #2575fc;
|
|
border-radius: 12px;
|
|
padding: 15px 30px;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
width: 100%;
|
|
}
|
|
|
|
.secondary-btn:hover {
|
|
background: #f0f7ff;
|
|
}
|
|
|
|
.invite-section {
|
|
background: white;
|
|
border-radius: 12px;
|
|
border: 1px solid #e1e5e9;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.invite-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.invite-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.invite-toggle {
|
|
background: #f0f2f5;
|
|
border: none;
|
|
border-radius: 6px;
|
|
padding: 5px 10px;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
color: #666;
|
|
}
|
|
|
|
.invite-content {
|
|
display: none;
|
|
}
|
|
|
|
.invite-content.active {
|
|
display: block;
|
|
}
|
|
|
|
.invite-link {
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
margin-bottom: 15px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.link-text {
|
|
font-size: 14px;
|
|
color: #666;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
flex: 1;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.copy-btn {
|
|
background: #2575fc;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 6px;
|
|
padding: 8px 12px;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.copy-btn:hover {
|
|
background: #1a68e8;
|
|
}
|
|
|
|
.qrcode-container {
|
|
text-align: center;
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.qrcode {
|
|
width: 120px;
|
|
height: 120px;
|
|
background: #f0f2f5;
|
|
border-radius: 8px;
|
|
margin: 0 auto 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #999;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.share-options {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.share-btn {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: #666;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.share-icon {
|
|
width: 35px;
|
|
height: 35px;
|
|
border-radius: 50%;
|
|
background: #f0f2f5;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 5px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.form-control {
|
|
width: 100%;
|
|
padding: 15px;
|
|
border: 1px solid #e1e5e9;
|
|
border-radius: 12px;
|
|
font-size: 16px;
|
|
transition: border 0.2s;
|
|
}
|
|
|
|
.form-control:focus {
|
|
border-color: #2575fc;
|
|
outline: none;
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
padding: 20px;
|
|
color: #999;
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* 用户列表样式 */
|
|
.user-list-container {
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.user-list-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
margin-bottom: 15px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.user-count {
|
|
background: #2575fc;
|
|
color: white;
|
|
border-radius: 12px;
|
|
padding: 2px 10px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.user-list {
|
|
background: white;
|
|
border-radius: 12px;
|
|
border: 1px solid #e1e5e9;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.user-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 15px;
|
|
border-bottom: 1px solid #f0f2f5;
|
|
}
|
|
|
|
.user-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.user-avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-weight: 600;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.user-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.user-name {
|
|
font-weight: 500;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.user-role {
|
|
font-size: 12px;
|
|
color: #666;
|
|
}
|
|
|
|
.owner-badge {
|
|
background: #ffd700;
|
|
color: #333;
|
|
font-size: 10px;
|
|
padding: 2px 6px;
|
|
border-radius: 8px;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.user-action-btn {
|
|
background: #f0f2f5;
|
|
border: none;
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.user-action-btn:hover {
|
|
background: #e1e5e9;
|
|
}
|
|
|
|
.leave-btn {
|
|
background: #ff6b6b;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 12px;
|
|
padding: 15px;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
margin-top: 20px;
|
|
width: 100%;
|
|
}
|
|
|
|
.leave-btn:hover {
|
|
background: #ff5252;
|
|
}
|
|
|
|
.switch-mode {
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.switch-btn {
|
|
background: none;
|
|
border: none;
|
|
color: #2575fc;
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<h1>共享空间</h1>
|
|
<p id="header-subtitle">与朋友共享您的空间</p>
|
|
<div class="status-indicator">
|
|
<div class="status-badge" id="status-badge">🔒 未加入任何空间</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="content" id="main-content">
|
|
<!-- 主要内容将根据状态动态生成 -->
|
|
</div>
|
|
|
|
<footer>
|
|
<p>共享空间 © 2023 - 保护您的隐私安全</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<script>
|
|
// 应用状态管理
|
|
const appState = {
|
|
hasSpace: false, // 用户是否有自己的空间
|
|
spaceName: "我的共享空间",
|
|
spaceMembers: [
|
|
{ id: 1, name: "我自己", role: "创建者", status: "在线", avatar: "我" },
|
|
{ id: 2, name: "张三", role: "成员", status: "在线", avatar: "张" },
|
|
{ id: 3, name: "李四", role: "成员", status: "10分钟前活跃", avatar: "李" }
|
|
],
|
|
inviteLink: "https://share.space/invite/abc123def456"
|
|
};
|
|
|
|
// 初始化页面
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
renderContent();
|
|
setupEventListeners();
|
|
});
|
|
|
|
// 渲染内容
|
|
function renderContent() {
|
|
const mainContent = document.getElementById('main-content');
|
|
const statusBadge = document.getElementById('status-badge');
|
|
const headerSubtitle = document.getElementById('header-subtitle');
|
|
|
|
if (appState.hasSpace) {
|
|
// 用户有空间时的界面
|
|
statusBadge.innerHTML = "🏠 拥有空间";
|
|
headerSubtitle.textContent = "管理您的共享空间";
|
|
|
|
mainContent.innerHTML = `
|
|
<div class="space-info">
|
|
<div class="space-name">${appState.spaceName}</div>
|
|
<div class="space-status">已创建 · ${appState.spaceMembers.length - 1}人已加入</div>
|
|
</div>
|
|
|
|
<div class="invite-section">
|
|
<div class="invite-header">
|
|
<div class="invite-title">邀请好友加入</div>
|
|
<button class="invite-toggle">展开</button>
|
|
</div>
|
|
|
|
<div class="invite-content active">
|
|
<div class="invite-link">
|
|
<div class="link-text">${appState.inviteLink}</div>
|
|
<button class="copy-btn">复制链接</button>
|
|
</div>
|
|
|
|
<div class="qrcode-container">
|
|
<p>或使用二维码邀请</p>
|
|
<div class="qrcode">二维码区域</div>
|
|
</div>
|
|
|
|
<div class="share-options">
|
|
<button class="share-btn">
|
|
<div class="share-icon">微</div>
|
|
<span>微信</span>
|
|
</button>
|
|
<button class="share-btn">
|
|
<div class="share-icon">Q</div>
|
|
<span>QQ</span>
|
|
</button>
|
|
<button class="share-btn">
|
|
<div class="share-icon">链</div>
|
|
<span>复制链接</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="user-list-container">
|
|
<div class="user-list-title">
|
|
<span>空间成员</span>
|
|
<span class="user-count">${appState.spaceMembers.length}人</span>
|
|
</div>
|
|
<div class="user-list">
|
|
${appState.spaceMembers.map(member => `
|
|
<div class="user-item">
|
|
<div class="user-avatar">${member.avatar}</div>
|
|
<div class="user-info">
|
|
<div class="user-name">${member.name} ${member.role === '创建者' ? '<span class="owner-badge">创建者</span>' : ''}</div>
|
|
<div class="user-role">${member.status}</div>
|
|
</div>
|
|
<div style="display: flex; gap: 8px;">
|
|
${member.role !== '创建者' ?
|
|
'<button class="user-action-btn remove-user" data-userid="' + member.id + '" title="移除">❌</button>' :
|
|
'<button class="user-action-btn" title="设置">⚙️</button>'
|
|
}
|
|
</div>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
</div>
|
|
|
|
<button class="leave-btn" id="delete-space-btn">删除空间</button>
|
|
|
|
<div class="switch-mode">
|
|
<button class="switch-btn" id="switch-to-join">退出并加入其他空间</button>
|
|
</div>
|
|
`;
|
|
} else {
|
|
// 用户没有空间时的简洁创建引导界面
|
|
statusBadge.innerHTML = "🔒 未加入任何空间";
|
|
headerSubtitle.textContent = "与朋友共享您的空间";
|
|
|
|
mainContent.innerHTML = `
|
|
<div class="create-space-card">
|
|
<div class="create-icon">🏠</div>
|
|
<div class="create-title">创建共享空间</div>
|
|
<div class="create-desc">创建一个专属空间，邀请朋友加入，共享文件、聊天和协作</div>
|
|
<button class="action-btn" id="create-space-btn">创建我的空间</button>
|
|
</div>
|
|
|
|
<div style="text-align: center; margin: 30px 0; color: #666; font-size: 14px;">
|
|
或
|
|
</div>
|
|
|
|
<div style="text-align: center;">
|
|
<button class="secondary-btn" id="join-space-btn">加入已有空间</button>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
// 渲染加入空间界面
|
|
function renderJoinSpace() {
|
|
const mainContent = document.getElementById('main-content');
|
|
const statusBadge = document.getElementById('status-badge');
|
|
const headerSubtitle = document.getElementById('header-subtitle');
|
|
|
|
statusBadge.innerHTML = "🔍 加入空间";
|
|
headerSubtitle.textContent = "输入邀请信息加入空间";
|
|
|
|
mainContent.innerHTML = `
|
|
<div class="form-group">
|
|
<label for="invite-code">邀请码</label>
|
|
<input type="text" id="invite-code" class="form-control" placeholder="请输入6位邀请码">
|
|
</div>
|
|
|
|
<button class="action-btn" id="confirm-join-btn">加入空间</button>
|
|
|
|
<div style="text-align: center; margin: 20px 0; color: #666; font-size: 14px;">
|
|
或
|
|
</div>
|
|
|
|
<button class="secondary-btn">
|
|
<span>扫码加入</span>
|
|
</button>
|
|
|
|
<div class="switch-mode">
|
|
<button class="switch-btn" id="back-to-main">返回</button>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// 设置事件监听器
|
|
function setupEventListeners() {
|
|
// 创建空间功能
|
|
document.addEventListener('click', function (e) {
|
|
if (e.target.id === 'create-space-btn') {
|
|
appState.hasSpace = true;
|
|
renderContent();
|
|
}
|
|
|
|
if (e.target.id === 'join-space-btn') {
|
|
renderJoinSpace();
|
|
}
|
|
|
|
if (e.target.id === 'back-to-main') {
|
|
renderContent();
|
|
}
|
|
|
|
if (e.target.id === 'switch-to-join') {
|
|
if (confirm('确定要删除当前空间并加入其他空间吗？')) {
|
|
appState.hasSpace = false;
|
|
renderJoinSpace();
|
|
}
|
|
}
|
|
|
|
if (e.target.id === 'delete-space-btn') {
|
|
if (confirm('确定要删除这个空间吗？此操作不可撤销。')) {
|
|
appState.hasSpace = false;
|
|
renderContent();
|
|
}
|
|
}
|
|
});
|
|
|
|
// 复制链接功能
|
|
document.addEventListener('click', function (e) {
|
|
if (e.target.classList.contains('copy-btn')) {
|
|
const linkText = e.target.closest('.invite-link').querySelector('.link-text').textContent;
|
|
navigator.clipboard.writeText(linkText).then(() => {
|
|
const originalText = e.target.textContent;
|
|
e.target.textContent = '已复制';
|
|
setTimeout(() => {
|
|
e.target.textContent = originalText;
|
|
}, 2000);
|
|
});
|
|
}
|
|
});
|
|
|
|
// 邀请区域展开/收起功能
|
|
document.addEventListener('click', function (e) {
|
|
if (e.target.classList.contains('invite-toggle')) {
|
|
const inviteContent = e.target.closest('.invite-section').querySelector('.invite-content');
|
|
inviteContent.classList.toggle('active');
|
|
e.target.textContent = inviteContent.classList.contains('active') ? '收起' : '展开';
|
|
}
|
|
});
|
|
|
|
// 移除用户功能
|
|
document.addEventListener('click', function (e) {
|
|
if (e.target.classList.contains('remove-user')) {
|
|
const userId = parseInt(e.target.getAttribute('data-userid'));
|
|
const userName = e.target.closest('.user-item').querySelector('.user-name').textContent.split(' ')[0];
|
|
|
|
if (confirm(`确定要移除 ${userName} 吗？`)) {
|
|
// 从成员列表中移除
|
|
appState.spaceMembers = appState.spaceMembers.filter(member => member.id !== userId);
|
|
renderContent();
|
|
}
|
|
}
|
|
});
|
|
|
|
// 加入空间功能
|
|
document.addEventListener('click', function (e) {
|
|
if (e.target.id === 'confirm-join-btn') {
|
|
const inviteCode = document.getElementById('invite-code').value;
|
|
if (inviteCode && inviteCode.length === 6) {
|
|
// 模拟加入空间
|
|
alert(`成功加入空间！邀请码: ${inviteCode}`);
|
|
|
|
// 这里可以添加实际加入空间的逻辑
|
|
// 例如：appState.hasSpace = true; 并设置空间信息
|
|
|
|
// 返回主界面
|
|
renderContent();
|
|
} else {
|
|
alert('请输入有效的6位邀请码');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |