Files
Ubuntu 32b43f85bd a
2026-07-03 16:58:28 +08:00

905 lines
31 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>玩Android - 我的</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Roboto', 'Noto Sans SC', sans-serif; background: #F5F5F5; }
/* 容器 */
.container { max-width: 750px; margin: 0 auto; background: white; min-height: 100vh; padding-bottom: 80px; }
/* 顶部用户信息块 */
.user-block {
background: linear-gradient(135deg, #6200EE 0%, #3700B3 100%);
color: white;
padding: 30px 20px;
display: flex;
align-items: center;
border-radius: 0 0 20px 20px;
box-shadow: 0 4px 20px rgba(98, 0, 238, 0.2);
margin-bottom: 20px;
}
.user-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
background: white;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20px;
overflow: hidden;
border: 3px solid rgba(255, 255, 255, 0.3);
cursor: pointer;
}
.user-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.user-avatar .default-avatar {
font-size: 40px;
color: #6200EE;
}
.user-info {
flex: 1;
}
.user-name {
font-size: 24px;
font-weight: 500;
margin-bottom: 8px;
}
.user-id {
font-size: 14px;
opacity: 0.8;
margin-bottom: 12px;
}
.login-prompt {
font-size: 16px;
color: rgba(255, 255, 255, 0.9);
cursor: pointer;
}
.login-prompt:hover {
text-decoration: underline;
}
/* 功能列表 */
.function-list {
padding: 0 20px;
}
.function-item {
display: flex;
align-items: center;
padding: 20px 0;
border-bottom: 1px solid #EEEEEE;
cursor: pointer;
transition: all 0.3s;
}
.function-item:last-child {
border-bottom: none;
}
.function-item:hover {
background: rgba(98, 0, 238, 0.05);
transform: translateX(5px);
}
.function-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: rgba(98, 0, 238, 0.1);
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
font-size: 20px;
color: #6200EE;
}
.function-content {
flex: 1;
}
.function-title {
font-size: 16px;
font-weight: 500;
color: #333;
margin-bottom: 4px;
}
.function-desc {
font-size: 12px;
color: #666;
}
.function-value {
font-size: 16px;
font-weight: 500;
color: #6200EE;
margin-right: 10px;
}
.arrow-icon {
color: #999;
font-size: 14px;
}
/* 底部导航 */
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: white;
border-top: 1px solid #EEEEEE;
display: flex;
justify-content: space-around;
padding: 12px 0;
max-width: 750px;
margin: 0 auto;
z-index: 100;
}
.tab-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 8px 16px;
border-radius: 12px;
transition: all 0.3s;
cursor: pointer;
}
.tab-item.active {
background: rgba(98, 0, 238, 0.08);
}
.tab-icon {
font-size: 24px;
margin-bottom: 4px;
}
.tab-text {
font-size: 12px;
color: #666;
}
.tab-item.active .tab-text {
color: #6200EE;
font-weight: 500;
}
/* 安全区域 */
.safe-area {
height: env(safe-area-inset-bottom);
}
/* 模态框 */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
align-items: center;
justify-content: center;
}
.modal-content {
background: white;
border-radius: 16px;
width: 90%;
max-width: 400px;
overflow: hidden;
animation: modalSlideIn 0.3s ease;
}
@keyframes modalSlideIn {
from {
opacity: 0;
transform: translateY(-50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.modal-header {
padding: 20px;
border-bottom: 1px solid #EEEEEE;
text-align: center;
font-size: 18px;
font-weight: 500;
color: #333;
}
.modal-body {
padding: 20px;
}
.modal-footer {
padding: 20px;
border-top: 1px solid #EEEEEE;
display: flex;
justify-content: flex-end;
gap: 10px;
}
.btn {
padding: 10px 20px;
border-radius: 8px;
border: none;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s;
}
.btn-primary {
background: #6200EE;
color: white;
}
.btn-primary:hover {
background: #3700B3;
}
.btn-secondary {
background: #EEEEEE;
color: #666;
}
.btn-secondary:hover {
background: #DDDDDD;
}
.form-group {
margin-bottom: 20px;
}
.form-label {
display: block;
margin-bottom: 8px;
font-size: 14px;
color: #666;
}
.form-input {
width: 100%;
padding: 12px;
border: 1px solid #DDDDDD;
border-radius: 8px;
font-size: 14px;
transition: border-color 0.3s;
}
.form-input:focus {
outline: none;
border-color: #6200EE;
}
/* 加载状态 */
.loading {
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
color: #666;
}
.loading-spinner {
width: 20px;
height: 20px;
border: 2px solid #EEEEEE;
border-top-color: #6200EE;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-right: 10px;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* 错误状态 */
.error-message {
background: #FFEBEE;
color: #D32F2F;
padding: 12px;
border-radius: 8px;
margin: 20px;
text-align: center;
font-size: 14px;
}
/* 空状态 */
.empty-state {
text-align: center;
padding: 40px 20px;
color: #666;
}
.empty-icon {
font-size: 48px;
margin-bottom: 20px;
opacity: 0.5;
}
/* 响应式调整 */
@media (max-width: 480px) {
.user-avatar {
width: 60px;
height: 60px;
}
.user-avatar .default-avatar {
font-size: 30px;
}
.user-name {
font-size: 20px;
}
.function-item {
padding: 16px 0;
}
}
</style>
</head>
<body>
<div class="container">
<!-- 用户信息块 -->
<div class="user-block" id="userBlock">
<div class="user-avatar" id="userAvatar">
<div class="default-avatar">👤</div>
</div>
<div class="user-info">
<div class="user-name" id="userName">点击登录</div>
<div class="user-id" id="userId">ID: --</div>
<div class="login-prompt" id="loginPrompt">点击头像或此处登录</div>
</div>
</div>
<!-- 功能列表 -->
<div class="function-list">
<!-- 我的积分 -->
<div class="function-item" id="coinItem">
<div class="function-icon">🏅</div>
<div class="function-content">
<div class="function-title">我的积分</div>
<div class="function-desc">查看积分详情和排行榜</div>
</div>
<div class="function-value" id="coinValue">--</div>
<div class="arrow-icon">›</div>
</div>
<!-- 我的收藏 -->
<div class="function-item" id="collectItem">
<div class="function-icon">⭐</div>
<div class="function-content">
<div class="function-title">我的收藏</div>
<div class="function-desc">查看收藏的文章列表</div>
</div>
<div class="function-value" id="collectValue">--</div>
<div class="arrow-icon">›</div>
</div>
<!-- 我的分享 -->
<div class="function-item" id="shareItem">
<div class="function-icon">📤</div>
<div class="function-content">
<div class="function-title">我的分享</div>
<div class="function-desc">查看分享的文章列表</div>
</div>
<div class="function-value" id="shareValue">--</div>
<div class="arrow-icon">›</div>
</div>
<!-- 关于作者 -->
<div class="function-item" id="aboutItem">
<div class="function-icon">💖</div>
<div class="function-content">
<div class="function-title">关于作者</div>
<div class="function-desc">开发者信息</div>
</div>
<div class="arrow-icon">›</div>
</div>
</div>
<!-- 加载状态 -->
<div class="loading" id="loadingState">
<div class="loading-spinner"></div>
<span>加载中...</span>
</div>
<!-- 错误状态 -->
<div class="error-message" id="errorState" style="display: none;">
加载失败,请检查网络连接
</div>
</div>
<!-- 底部导航 -->
<div class="tab-bar">
<div class="tab-item" onclick="switchTab('home', event)">
<div class="tab-icon">🏠</div>
<div class="tab-text">首页</div>
</div>
<div class="tab-item" onclick="switchTab('project', event)">
<div class="tab-icon">📦</div>
<div class="tab-text">项目</div>
</div>
<div class="tab-item" onclick="switchTab('wechat', event)">
<div class="tab-icon">📱</div>
<div class="tab-text">公众号</div>
</div>
<div class="tab-item" onclick="switchTab('system', event)">
<div class="tab-icon">🌳</div>
<div class="tab-text">体系</div>
</div>
<div class="tab-item active" onclick="switchTab('profile', event)">
<div class="tab-icon">👤</div>
<div class="tab-text">我的</div>
</div>
</div>
<div class="safe-area"></div>
<!-- 登录模态框 -->
<div class="modal" id="loginModal">
<div class="modal-content">
<div class="modal-header">登录玩Android</div>
<div class="modal-body">
<div class="form-group">
<label class="form-label">用户名</label>
<input type="text" class="form-input" id="loginUsername" placeholder="请输入用户名">
</div>
<div class="form-group">
<label class="form-label">密码</label>
<input type="password" class="form-input" id="loginPassword" placeholder="请输入密码">
</div>
<div class="error-message" id="loginError" style="display: none;"></div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" onclick="closeLoginModal()">取消</button>
<button class="btn btn-primary" onclick="doLogin()">登录</button>
</div>
</div>
</div>
<!-- 关于作者模态框 -->
<div class="modal" id="aboutModal">
<div class="modal-content">
<div class="modal-header">关于作者</div>
<div class="modal-body">
<div style="text-align: center; margin-bottom: 20px;">
<div style="font-size: 48px; margin-bottom: 10px;">🐱</div>
<h3 style="color: #6200EE; margin-bottom: 10px;">nanobot 🐈</h3>
<p style="color: #666; margin-bottom: 20px;">可爱的AI助手</p>
</div>
<div style="background: #F5F5F5; padding: 15px; border-radius: 8px; margin-bottom: 20px;">
<h4 style="color: #333; margin-bottom: 10px;">开发者信息</h4>
<p style="color: #666; margin-bottom: 8px;">👨‍💻 开发者:蔡叔叔的AI助手</p>
<p style="color: #666; margin-bottom: 8px;">🎯 目标:帮助蔡叔叔开发玩Android应用</p>
<p style="color: #666; margin-bottom: 8px;">💝 特点:友好、专业、高效</p>
</div>
<div style="background: #E8F5E9; padding: 15px; border-radius: 8px;">
<h4 style="color: #2E7D32; margin-bottom: 10px;">已开发模块</h4>
<p style="color: #666; margin-bottom: 5px;">✅ 首页模块 - 文章浏览和搜索</p>
<p style="color: #666; margin-bottom: 5px;">✅ 项目模块 - 开源项目浏览</p>
<p style="color: #666; margin-bottom: 5px;">✅ 体系模块 - Android知识体系</p>
<p style="color: #666; margin-bottom: 5px;">✅ 我的模块 - 个人中心</p>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" onclick="closeAboutModal()">确定</button>
</div>
</div>
</div>
<!-- 个人详情模态框 -->
<div class="modal" id="profileModal">
<div class="modal-content">
<div class="modal-header">个人详情</div>
<div class="modal-body">
<div style="text-align: center; margin-bottom: 30px;">
<div class="user-avatar" style="margin: 0 auto 15px; width: 100px; height: 100px;">
<div class="default-avatar">👤</div>
</div>
<h3 id="profileName" style="color: #333; margin-bottom: 5px;">--</h3>
<p id="profileId" style="color: #666; margin-bottom: 20px;">ID: --</p>
</div>
<div class="function-list" style="padding: 0;">
<div class="function-item">
<div class="function-icon">📧</div>
<div class="function-content">
<div class="function-title">邮箱</div>
<div class="function-desc" id="profileEmail">--</div>
</div>
</div>
<div class="function-item">
<div class="function-icon">🏅</div>
<div class="function-content">
<div class="function-title">积分</div>
<div class="function-desc" id="profileCoin">--</div>
</div>
</div>
<div class="function-item">
<div class="function-icon">📅</div>
<div class="function-content">
<div class="function-title">注册时间</div>
<div class="function-desc" id="profileRegDate">--</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" onclick="closeProfileModal()">关闭</button>
<button class="btn btn-primary" onclick="logout()" style="background: #F44336;">退出登录</button>
</div>
</div>
</div>
<script>
// 全局状态
let isLoggedIn = false;
let userData = null;
let coinData = null;
let collectData = null;
let shareData = null;
// 页面加载完成
document.addEventListener('DOMContentLoaded', function() {
console.log('我的模块加载完成');
// 检查登录状态
checkLoginStatus();
// 绑定事件
bindEvents();
// 隐藏加载状态
setTimeout(() => {
document.getElementById('loadingState').style.display = 'none';
}, 500);
});
// 检查登录状态
async function checkLoginStatus() {
try {
// 从本地存储获取登录状态
const savedLogin = localStorage.getItem('wanandroid_login');
if (savedLogin) {
const loginInfo = JSON.parse(savedLogin);
if (loginInfo && loginInfo.username) {
// 尝试获取用户信息验证登录状态
await loadUserData();
}
}
} catch (error) {
console.log('检查登录状态失败:', error);
showNotLoggedInState();
}
}
// 加载用户数据
async function loadUserData() {
try {
// 显示加载状态
document.getElementById('loadingState').style.display = 'flex';
document.getElementById('errorState').style.display = 'none';
// 这里应该调用实际的API,但由于跨域限制,我们使用模拟数据
// 在实际应用中,应该通过后端代理调用wanandroid API
// 模拟登录成功
setTimeout(() => {
// 模拟用户数据
userData = {
username: '蔡叔叔',
id: 'user_001',
email: 'caishushu@example.com',
coinCount: 128,
collectCount: 24,
shareCount: 8,
registerDate: '2024-01-01'
};
// 更新UI
updateUserUI();
// 隐藏加载状态
document.getElementById('loadingState').style.display = 'none';
}, 1000);
} catch (error) {
console.error('加载用户数据失败:', error);
document.getElementById('loadingState').style.display = 'none';
document.getElementById('errorState').style.display = 'block';
showNotLoggedInState();
}
}
// 更新用户UI
function updateUserUI() {
if (userData) {
isLoggedIn = true;
// 更新用户信息块
document.getElementById('userName').textContent = userData.username;
document.getElementById('userId').textContent = `ID: ${userData.id}`;
document.getElementById('loginPrompt').textContent = '点击查看个人详情';
// 更新功能项数值
document.getElementById('coinValue').textContent = userData.coinCount;
document.getElementById('collectValue').textContent = userData.collectCount;
document.getElementById('shareValue').textContent = userData.shareCount;
// 保存登录状态到本地存储
localStorage.setItem('wanandroid_login', JSON.stringify({
username: userData.username,
id: userData.id,
timestamp: Date.now()
}));
}
}
// 显示未登录状态
function showNotLoggedInState() {
isLoggedIn = false;
userData = null;
// 重置用户信息块
document.getElementById('userName').textContent = '点击登录';
document.getElementById('userId').textContent = 'ID: --';
document.getElementById('loginPrompt').textContent = '点击头像或此处登录';
// 重置功能项数值
document.getElementById('coinValue').textContent = '--';
document.getElementById('collectValue').textContent = '--';
document.getElementById('shareValue').textContent = '--';
// 清除本地存储
localStorage.removeItem('wanandroid_login');
}
// 绑定事件
function bindEvents() {
// 用户块点击事件
document.getElementById('userBlock').addEventListener('click', function() {
if (isLoggedIn) {
showProfileModal();
} else {
showLoginModal();
}
});
// 积分项点击事件
document.getElementById('coinItem').addEventListener('click', function() {
if (isLoggedIn) {
alert('积分详情功能开发中...\n\n总积分: ' + (userData?.coinCount || 0));
} else {
alert('请先登录查看积分');
}
});
// 收藏项点击事件
document.getElementById('collectItem').addEventListener('click', function() {
if (isLoggedIn) {
alert('收藏列表功能开发中...\n\n收藏数量: ' + (userData?.collectCount || 0));
} else {
alert('请先登录查看收藏');
}
});
// 分享项点击事件
document.getElementById('shareItem').addEventListener('click', function() {
if (isLoggedIn) {
alert('分享列表功能开发中...\n\n分享数量: ' + (userData?.shareCount || 0));
} else {
alert('请先登录查看分享');
}
});
// 关于项点击事件
document.getElementById('aboutItem').addEventListener('click', function() {
showAboutModal();
});
}
// 显示登录模态框
function showLoginModal() {
document.getElementById('loginModal').style.display = 'flex';
document.getElementById('loginUsername').value = '';
document.getElementById('loginPassword').value = '';
document.getElementById('loginError').style.display = 'none';
}
// 关闭登录模态框
function closeLoginModal() {
document.getElementById('loginModal').style.display = 'none';
}
// 执行登录
function doLogin() {
const username = document.getElementById('loginUsername').value.trim();
const password = document.getElementById('loginPassword').value.trim();
const errorEl = document.getElementById('loginError');
if (!username || !password) {
errorEl.textContent = '请输入用户名和密码';
errorEl.style.display = 'block';
return;
}
// 显示加载状态
errorEl.style.display = 'none';
const loginBtn = document.querySelector('#loginModal .btn-primary');
const originalText = loginBtn.textContent;
loginBtn.textContent = '登录中...';
loginBtn.disabled = true;
// 模拟登录过程
setTimeout(() => {
// 模拟登录成功
userData = {
username: username || '测试用户',
id: 'user_' + Date.now().toString().slice(-6),
email: username + '@example.com',
coinCount: Math.floor(Math.random() * 100) + 50,
collectCount: Math.floor(Math.random() * 30) + 10,
shareCount: Math.floor(Math.random() * 15) + 5,
registerDate: new Date().toISOString().split('T')[0]
};
// 更新UI
updateUserUI();
// 关闭模态框
closeLoginModal();
// 恢复按钮状态
loginBtn.textContent = originalText;
loginBtn.disabled = false;
// 显示登录成功提示
alert('登录成功!欢迎回来,' + userData.username);
}, 1500);
}
// 显示关于作者模态框
function showAboutModal() {
document.getElementById('aboutModal').style.display = 'flex';
}
// 关闭关于作者模态框
function closeAboutModal() {
document.getElementById('aboutModal').style.display = 'none';
}
// 显示个人详情模态框
function showProfileModal() {
if (!userData) return;
// 更新模态框内容
document.getElementById('profileName').textContent = userData.username;
document.getElementById('profileId').textContent = `ID: ${userData.id}`;
document.getElementById('profileEmail').textContent = userData.email;
document.getElementById('profileCoin').textContent = `${userData.coinCount} 积分`;
document.getElementById('profileRegDate').textContent = userData.registerDate;
document.getElementById('profileModal').style.display = 'flex';
}
// 关闭个人详情模态框
function closeProfileModal() {
document.getElementById('profileModal').style.display = 'none';
}
// 退出登录
function logout() {
if (confirm('确定要退出登录吗?')) {
// 清除用户数据
showNotLoggedInState();
// 关闭模态框
closeProfileModal();
// 显示退出成功提示
alert('已退出登录');
}
}
// Tab切换函数
function switchTab(tab, event) {
console.log('switchTab called with:', tab);
// 更新选中状态
document.querySelectorAll('.tab-item').forEach(item => {
item.classList.remove('active');
});
// 确保event存在
if (event && event.target) {
const tabItem = event.target.closest('.tab-item');
if (tabItem) {
tabItem.classList.add('active');
}
}
// 根据tab进行跳转或提示
switch(tab) {
case 'home':
console.log('首页Tab - 跳转到首页');
window.location.href = '/index.html';
break;
case 'project':
console.log('项目Tab - 跳转到项目页面');
window.location.href = '/projects_fixed.html';
break;
case 'wechat':
console.log('公众号Tab - 显示开发中提示');
window.location.href = '/wechat.html';
break;
case 'system':
console.log('体系Tab - 跳转到体系页面');
window.location.href = '/tree.html';
break;
case 'profile':
console.log('我的Tab - 当前页面');
// 我的页面,不需要跳转
break;
default:
console.log('未知Tab:', tab);
}
}
// 点击模态框外部关闭
window.addEventListener('click', function(event) {
const modals = document.querySelectorAll('.modal');
modals.forEach(modal => {
if (event.target === modal) {
modal.style.display = 'none';
}
});
});
// 键盘事件
document.addEventListener('keydown', function(event) {
// ESC键关闭所有模态框
if (event.key === 'Escape') {
document.querySelectorAll('.modal').forEach(modal => {
modal.style.display = 'none';
});
}
// 登录模态框中的回车键
if (event.key === 'Enter' && document.getElementById('loginModal').style.display === 'flex') {
doLogin();
}
});
</script>
</body>
</html>