905 lines
31 KiB
HTML
905 lines
31 KiB
HTML
<!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> |