初始化仓库，前端完成

2025-12-23 22:19:02 +08:00
commit d446347981
5 changed files with 580 additions and 0 deletions
--- a/.trae/documents/App分发系统优化.md
+++ b/.trae/documents/App分发系统优化.md
@@ -0,0 +1,38 @@
 ## 优化计划
 ### 1. CSS样式简化
 - 删除所有装饰性样式（颜色、背景、阴影、圆角、过渡等）
 - 只保留基本布局和定位
 - 保持所有CSS选择器不变，方便后续手动设计
 ### 2. 添加后端API调用
 - 在JavaScript中添加后端API基础URL配置
 - 将localStorage存储替换为后端API调用
 - 修改以下函数：
  - `getAppsFromStorage()` → 调用 GET /api/apps
  - `saveAppsToStorage()` → 调用 POST /api/apps
  - `uploadApp()` → 调用 POST /api/apps 上传文件
 ### 3. 后端API设计
 - 端口：3000
 - 无需鉴权
 - 接口列表：
  - `GET /api/apps` - 获取App列表
  - `POST /api/apps` - 上传App（支持multipart/form-data）
  - `GET /api/apps/:id` - 下载指定App
 ### 4. 前端修改要点
 - 保持现有登录逻辑不变
 - 保持所有HTML结构不变
 - 保持所有CSS选择器不变
 - 只修改JavaScript中的数据存储逻辑
 ### 5. 文件修改清单
 - `style.css` - 简化样式
 - `script.js` - 添加后端API调用
 ### 6. 技术要求
 - 后端API采用RESTful设计
 - 支持CORS跨域请求
 - 支持文件上传和下载
 - 简单易用，便于快速实现
--- a/README.md
+++ b/README.md
@@ -0,0 +1,181 @@
 # 极简App分发系统
 一个纯前端实现的App分发系统，支持管理员登录、App上传和无需登录下载功能。
 ## 功能特性
 - ✅ 管理员登录（密码：admin123）
 - ✅ App上传（支持.apk、.ipa、.zip文件，最大100MB）
 - ✅ 无需登录即可下载
 - ✅ 响应式设计
 - ✅ 纯前端实现，无框架依赖
 - ✅ 支持后端API扩展
 ## 快速开始
 ### 1. 启动前端服务
 ```bash
 # 使用Python启动简单HTTP服务器
 python -m http.server 8000
 # 或使用Node.js
 npx http-server -p 8000
 ```
 访问地址：http://localhost:8000
 ### 2. 后端API实现（可选）
 如果需要持久化存储和多用户访问，可以实现后端API。
 #### 后端要求
 - 端口：3000
 - 无需鉴权
 - 支持CORS跨域请求
 #### API接口
 | 方法 | 路径 | 描述 | 请求体 | 响应 |
 |------|------|------|--------|------|
 | GET | /api/apps | 获取App列表 | - | `[{id: string, name: string, fileName: string, date: string}]` |
 | POST | /api/apps | 上传App | multipart/form-data<br>`name`: App名称（可选，不填则使用文件名作为默认值）<br>`file`: 文件 | `{success: boolean, message?: string}` |
 | GET | /api/apps/:id | 下载指定App | - | 文件流 |
 #### 后端实现示例（Node.js + Express）
 ```javascript
 const express = require('express');
 const multer = require('multer');
 const cors = require('cors');
 const app = express();
 const upload = multer({ dest: 'uploads/' });
 app.use(cors());
 // 模拟数据存储
 let apps = [];
 // 获取App列表
 app.get('/api/apps', (req, res) => {
    res.json(apps);
 });
 // 上传App
 app.post('/api/apps', upload.single('file'), (req, res) => {
    let { name } = req.body;
    const file = req.file;
    if (!file) {
        return res.json({ success: false, message: '缺少文件' });
    }
    // 如果name为空，使用文件名作为默认值（去除扩展名）
    if (!name || !name.trim()) {
        name = file.originalname.replace(/\.[^/.]+$/, '');
    }
    const app = {
        id: Date.now().toString(),
        name,
        fileName: file.originalname,
        date: new Date().toLocaleString('zh-CN')
    };
    apps.unshift(app);
    res.json({ success: true });
 });
 // 下载App
 app.get('/api/apps/:id', (req, res) => {
    const app = apps.find(a => a.id === req.params.id);
    if (!app) {
        return res.status(404).json({ success: false, message: 'App不存在' });
    }
    // 实际实现中，这里应该返回真实的文件流
    res.send('文件下载功能待实现');
 });
 app.listen(3000, () => {
    console.log('Server running on port 3000');
 });
 ```
 ## 技术栈
 - HTML5
 - CSS3
 - JavaScript (ES6+)
 ## 文件结构
 ```
 ├── index.html          # 主页面
 ├── style.css           # 样式文件
 ├── script.js           # 核心逻辑
 └── README.md           # 说明文档
 ```
 ## 使用说明
 ### 管理员登录
 1. 在登录框中输入密码：admin123
 2. 点击"登录"按钮
 3. 成功后将显示上传区域
 ### 上传App
 1. 登录成功后，在上传区域填写App名称（可选，不填写则使用文件名作为默认值）
 2. 选择要上传的文件（.apk、.ipa、.zip）
 3. 点击"上传"按钮
 4. 上传成功后，App将显示在下载列表中
 ### 下载App
 1. 在下载区域找到要下载的App
 2. 点击"下载"按钮即可开始下载
 3. 点击"复制直链"按钮可以复制App的直接下载链接
 ## 自定义配置
 ### 修改管理员密码
 在 `script.js` 中修改：
 ```javascript
 const ADMIN_PASSWORD = 'your_new_password';
 ```
 ### 修改后端API地址
 在 `script.js` 中修改：
 ```javascript
 const API_BASE_URL = 'http://your-backend-url:port/api';
 ```
 ### 自定义样式
 CSS选择器保持不变，可以直接修改 `style.css` 文件来自定义样式。
 ## 浏览器兼容性
 - Chrome 60+
 - Firefox 55+
 - Safari 12+
 - Edge 79+
 ## 注意事项
 1. 默认使用localStorage存储，数据只保存在浏览器中
 2. 建议部署后端API以实现持久化存储
 3. 生产环境中请修改默认密码
 4. 建议添加HTTPS支持，尤其是在公网环境中
 ## 许可证
 MIT
--- a/index.html
+++ b/index.html
@@ -0,0 +1,41 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>极简App分发系统</title>
    <link rel="stylesheet" href="style.css">
 </head>
 <body>
    <div class="container">
        <header>
            <h1>App分发系统</h1>
        </header>
        <!-- 登录区域 -->
        <div id="loginSection" class="section">
            <h2>管理员登录</h2>
            <input type="password" id="password" placeholder="请输入密码" maxlength="20">
            <button onclick="login()">登录</button>
            <p id="loginMessage"></p>
        </div>
        <!-- 上传区域 -->
        <div id="uploadSection" class="section" style="display: none;">
            <h2>上传App</h2>
            <input type="text" id="appName" placeholder="App名称" maxlength="50">
            <input type="file" id="appFile" accept=".apk,.ipa,.zip">
            <button onclick="uploadApp()">上传</button>
            <p id="uploadMessage"></p>
        </div>
        <!-- 下载区域 -->
        <div id="downloadSection" class="section">
            <h2>可用App</h2>
            <div id="appList"></div>
        </div>
    </div>
    <script src="script.js"></script>
 </body>
 </html>
--- a/script.js
+++ b/script.js
@@ -0,0 +1,209 @@
 // 配置
 const ADMIN_PASSWORD = 'admin123'; // 管理员密码
 const API_BASE_URL = 'http://localhost:3000/api'; // 后端API基础URL
 // 初始化
 function init() {
    checkLoginStatus();
    loadAppList();
 }
 // 检查登录状态
 function checkLoginStatus() {
    const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
    if (isLoggedIn) {
        showUploadSection();
    }
 }
 // 登录功能
 function login() {
    const password = document.getElementById('password').value;
    const message = document.getElementById('loginMessage');
    if (password === ADMIN_PASSWORD) {
        localStorage.setItem('isLoggedIn', 'true');
        showUploadSection();
        message.textContent = '登录成功！';
        message.style.color = '#0000ff';
        document.getElementById('password').value = '';
    } else {
        message.textContent = '密码错误，请重试！';
        message.style.color = '#ff0000';
    }
 }
 // 显示上传区域
 function showUploadSection() {
    document.getElementById('loginSection').style.display = 'none';
    document.getElementById('uploadSection').style.display = 'block';
    const loginSection = document.getElementById('loginSection');
    const logoutBtn = document.createElement('button');
    logoutBtn.textContent = '退出登录';
    logoutBtn.className = 'logout-btn';
    logoutBtn.onclick = logout;
    loginSection.appendChild(logoutBtn);
 }
 // 退出登录
 function logout() {
    localStorage.removeItem('isLoggedIn');
    location.reload();
 }
 // 加载App列表
 function loadAppList() {
    const appList = document.getElementById('appList');
    fetch(`${API_BASE_URL}/apps`)
        .then(response => response.json())
        .then(apps => {
            if (apps.length === 0) {
                appList.innerHTML = '<p style="text-align: center;">暂无App</p>';
                return;
            }
            appList.innerHTML = '';
            apps.forEach(app => {
                const appItem = document.createElement('div');
                appItem.className = 'app-item';
                const appInfo = document.createElement('div');
                appInfo.className = 'app-info';
                const appName = document.createElement('h3');
                appName.textContent = app.name;
                const appDate = document.createElement('p');
                appDate.textContent = `上传时间：${app.date}`;
                const downloadBtn = document.createElement('button');
                downloadBtn.className = 'download-btn';
                downloadBtn.textContent = '下载';
                downloadBtn.onclick = () => downloadApp(app.id, app.fileName);
                const copyLinkBtn = document.createElement('button');
                copyLinkBtn.className = 'download-btn';
                copyLinkBtn.textContent = '复制直链';
                copyLinkBtn.onclick = () => copyDirectLink(app.id, app.fileName);
                appInfo.appendChild(appName);
                appInfo.appendChild(appDate);
                appItem.appendChild(appInfo);
                const buttonsContainer = document.createElement('div');
                buttonsContainer.style.display = 'flex';
                buttonsContainer.style.gap = '10px';
                buttonsContainer.appendChild(downloadBtn);
                buttonsContainer.appendChild(copyLinkBtn);
                appItem.appendChild(buttonsContainer);
                appList.appendChild(appItem);
            });
        })
        .catch(error => {
            console.error('获取App列表失败:', error);
            appList.innerHTML = '<p style="color: #ff0000; text-align: center;">获取App列表失败</p>';
        });
 }
 // 上传App
 function uploadApp() {
    let appName = document.getElementById('appName').value;
    const appFile = document.getElementById('appFile').files[0];
    const message = document.getElementById('uploadMessage');
    if (!appFile) {
        message.textContent = '请选择文件！';
        message.style.color = '#ff0000';
        return;
    }
    if (appFile.size > 100 * 1024 * 1024) { // 限制100MB
        message.textContent = '文件大小不能超过100MB！';
        message.style.color = '#ff0000';
        return;
    }
    // 如果App名称为空，使用文件名作为默认值
    if (!appName.trim()) {
        // 去除文件扩展名
        appName = appFile.name.replace(/\.[^/.]+$/, '');
    }
    const formData = new FormData();
    formData.append('name', appName);
    formData.append('file', appFile);
    fetch(`${API_BASE_URL}/apps`, {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(result => {
        if (result.success) {
            message.textContent = '上传成功！';
            message.style.color = '#0000ff';
            loadAppList();
            // 清空表单
            document.getElementById('appName').value = '';
            document.getElementById('appFile').value = '';
        } else {
            message.textContent = '上传失败：' + (result.message || '未知错误');
            message.style.color = '#ff0000';
        }
    })
    .catch(error => {
        console.error('上传失败:', error);
        message.textContent = '上传失败，请重试！';
        message.style.color = '#ff0000';
    });
 }
 // 下载App
 function downloadApp(appId, fileName) {
    const link = document.createElement('a');
    link.href = `${API_BASE_URL}/apps/${appId}`;
    link.download = fileName;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
 }
 // 复制直链
 function copyDirectLink(appId, fileName) {
    const directLink = `${API_BASE_URL}/apps/${appId}`;
    // 复制到剪贴板
    navigator.clipboard.writeText(directLink)
        .then(() => {
            // 显示复制成功提示
            const message = document.createElement('div');
            message.textContent = '直链已复制到剪贴板！';
            message.style.cssText = `
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background-color: #000;
                color: #fff;
                padding: 10px 20px;
                border-radius: 5px;
                font-size: 14px;
                z-index: 1000;
            `;
            document.body.appendChild(message);
            // 3秒后移除提示
            setTimeout(() => {
                document.body.removeChild(message);
            }, 3000);
        })
        .catch(err => {
            console.error('复制失败:', err);
        });
 }
 // 页面加载完成后初始化
 window.onload = init;
--- a/style.css
+++ b/style.css
@@ -0,0 +1,111 @@
 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
 }
 body {
    font-family: Arial, sans-serif;
 }
 .container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
 }
 header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #000;
 }
 header h1 {
    font-size: 24px;
 }
 .section {
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid #000;
 }
 .section h2 {
    font-size: 18px;
    margin-bottom: 15px;
 }
 input {
    display: block;
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #000;
    font-size: 14px;
 }
 button {
    border: 1px solid #000;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 14px;
 }
 p {
    margin-top: 10px;
    font-size: 14px;
 }
 .app-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    margin-bottom: 10px;
    border: 1px solid #000;
 }
 .app-info {
    flex: 1;
 }
 .app-info h3 {
    font-size: 16px;
    margin-bottom: 5px;
 }
 .app-info p {
    font-size: 12px;
    margin: 0;
 }
 .download-btn {
    padding: 8px 15px;
    font-size: 12px;
 }
 .logout-btn {
    margin-top: 10px;
    font-size: 12px;
 }
@media (max-width: 600px) {
    .container {
        margin: 10px;
        padding: 15px;
    }
    .section {
        padding: 15px;
    }
    .app-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .download-btn {
        margin-top: 10px;
    }
 }