EOF # 3. 创建CSS样式文件（美化页面） cat > css/style.css << 'EOF' * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Microsoft Yahei"; background: #f5f5f5; } .login-page { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } .login-box { width: 400px; padding: 30px; background: #fff; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } .login-box h1 { text-align: center; margin-bottom: 20px; color: #333; } .form-item { margin-bottom: 15px; display: flex; align-items: center; } .form-item label { width: 80px; font-size: 14px; color: #666; } .form-item input { flex: 1; padding: 8px 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; } button { width: 100%; padding: 10px; background: #1890ff; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; } button:hover { background: #40a9ff; } .error { margin-top: 10px; color: #f5222d; font-size: 12px; text-align: center; } .admin-page { width: 100%; height: 100vh; display: flex; flex-direction: column; } .header { height: 60px; line-height: 60px; background: #1890ff; color: #fff; padding: 0 20px; display: flex; justify-content: space-between; } .menu { width: 200px; background: #fff; height: calc(100vh - 60px); float: left; } .menu ul { list-style: none; } .menu li { padding: 15px 20px; cursor: pointer; border-bottom: 1px solid #f5f5f5; } .menu li:hover { background: #f0f8ff; } .content { margin-left: 200px; padding: 20px; background: #fff; height: calc(100vh - 60px); } EOF # 4. 创建JS逻辑文件（对接后台接口） cat > js/app.js << 'EOF' // 全局变量 let token = localStorage.getItem('token') || ''; let userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}'); // 页面加载时检查登录状态 window.onload = function() { if (token) { showAdminPage(); } } // 登录函数 function login() { const username = document.getElementById('username').value; const password = document.getElementById('password').value; const errorMsg = document.getElementById('errorMsg'); // 调用后台登录接口 fetch('/api/auth/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username, password }) }) .then(res => res.json()) .then(data => { if (data.code === 200) { // 保存token和用户信息 token = data.data.token; userInfo = data.data.userInfo; localStorage.setItem('token', token); localStorage.setItem('userInfo', JSON.stringify(userInfo)); // 显示管理页面 showAdminPage(); } else { errorMsg.innerText = data.message || '登录失败'; } }) .catch(err => { errorMsg.innerText = '接口请求失败，请检查后台服务'; console.error(err); }); } // 显示管理页面 function showAdminPage() { document.getElementById('loginPage').style.display = 'none'; document.getElementById('adminPage').style.display = 'block'; document.getElementById('loginUser').innerText = userInfo.username || 'admin'; showPage('home'); } // 退出登录 function logout() { localStorage.removeItem('token'); localStorage.removeItem('userInfo'); token = ''; userInfo = {}; document.getElementById('adminPage').style.display = 'none'; document.getElementById('loginPage').style.display = 'block'; document.getElementById('errorMsg').innerText = ''; } // 切换页面 function showPage(type) { const content = document.getElementById('content'); const headers = { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token }; switch(type) { case 'home': content.innerHTML = '

欢迎使用装修后台管理系统

当前登录账号：' + (userInfo.username || 'admin') + '

'; break; case 'user': // 获取小程序用户列表 fetch('/api/wxUser/list', { headers }) .then(res => res.json()) .then(data => { if (data.code === 200) { let html = '

小程序用户管理

'; html += ''; data.data.list.forEach(user => { html += ``; }); html += '
手机号昵称创建时间
${user.phone}${user.nickname}${new Date(user.createdAt).toLocaleString()}
'; content.innerHTML = html; } else { content.innerHTML = '

小程序用户管理

' + data.message + '

'; } }); break; case 'case': content.innerHTML = '

装修案例管理

案例列表加载中...

'; // 可扩展案例管理逻辑 break; case 'contract': content.innerHTML = '

合同管理

合同列表加载中...

'; // 可扩展合同管理逻辑 break; case 'dynamic': content.innerHTML = '

工地动态管理

动态列表加载中...

'; // 可扩展动态管理逻辑 break; default: content.innerHTML = '

页面不存在

'; } } EOF