Upload 10 files

public/cloud-disk/.env.example

@@ -0,0 +1,11 @@
+# 应用配置
+SECRET_KEY=your-secret-key-here
+
+# 存储配置
+# Hugging Face Storage Buckets 路径（推荐，数据持久化）
+STORAGE_PATH=/data
+# 本地存储路径（重启后数据会丢失）
+# STORAGE_PATH=./storage
+
+# 服务配置
+PORT=7860

public/cloud-disk/Dockerfile

@@ -0,0 +1,23 @@
+FROM python:3.10-slim
+
+WORKDIR /app
+
+# Install dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application
+COPY . .
+
+# Create storage directory
+RUN mkdir -p /app/storage
+
+# Environment variables
+ENV PORT=7860
+ENV USE_LOCAL_STORAGE=false
+
+# Expose port
+EXPOSE 7860
+
+# Run the application
+CMD ["python", "app.py"]

public/cloud-disk/README.md

@@ -0,0 +1,155 @@
+---
+title: 云盘 - Cloud Disk
+emoji: 💾
+colorFrom: purple
+colorTo: pink
+sdk: docker
+app_file: app.py
+pinned: false
+---
+
+# 云盘 - Cloud Disk v2.0
+
+一个轻量级的个人云盘应用，支持用户注册登录、独立存储空间、文件上传下载、文件夹管理等功能。
+
+## ✨ 功能特性
+
+### v2.0 新功能
+- 👤 **用户系统**：支持注册、登录、退出
+- 🔒 **空间隔离**：每个用户独立存储空间，数据安全隔离
+- 💾 **存储配额**：每个用户 1GB 存储空间
+- 📊 **实时显示**：存储空间使用情况实时展示
+
+### 核心功能
+- 📁 **文件管理**：上传、下载、删除文件
+- 📂 **文件夹管理**：创建、浏览、删除文件夹
+- 🎨 **现代化界面**：美观的 UI 设计，支持响应式布局
+- 🖱️ **拖拽上传**：支持拖拽文件到上传区域
+- 🔐 **密码安全**：密码哈希存储，保护用户隐私
+
+## 🚀 部署到 Hugging Face Spaces
+
+### Docker 部署（推荐）
+
+1. 在 Hugging Face 创建一个新的 Space，选择 **Docker** 作为 SDK
+2. 将本项目的所有文件上传到 Space 仓库
+3. 等待部署完成后即可访问
+
+> 💡 **注意**：v2.0 版本默认使用本地存储，无需配置 HF_TOKEN 和 DATASET_REPO。但 Hugging Face Spaces 重启后数据可能会丢失。
+
+### 📦 使用 Storage Buckets 持久化存储（推荐）
+
+为了防止数据丢失，建议使用 Hugging Face 的 Storage Buckets 功能：
+
+1. 在你的 Space 设置中找到 **Storage Buckets** 部分
+2. 点击 **Mount a bucket** 挂载一个存储桶
+3. 挂载路径设置为 `/data`
+4. 重新部署 Space，数据就会自动保存到存储桶中
+
+> ✅ 使用 Storage Buckets 后，即使 Space 重启，数据也不会丢失！
+
+### 本地运行
+
+```bash
+# 安装依赖
+pip install -r requirements.txt
+
+# 运行
+python app.py
+```
+
+访问 http://localhost:7860 即可使用。
+
+## ⚙️ 环境变量配置
+
+| 变量名 | 说明 | 默认值 |
+|--------|------|--------|
+| `SECRET_KEY` | Session 加密密钥 | cloud-disk-secret-key-2024 |
+| `STORAGE_PATH` | 存储文件路径（Storage Buckets 设为 `/data`） | /data |
+| `PORT` | 服务端口 | 7860 |
+
+## 📝 使用说明
+
+### 注册账号
+1. 打开应用后点击"立即注册"
+2. 输入用户名（3-20位，支持字母、数字、下划线、中文）
+3. 设置密码（至少6位）并确认
+4. 点击"注册账号"完成注册
+
+### 登录账号
+1. 输入用户名和密码
+2. 点击"登录"进入云盘
+
+### 上传文件
+- 点击"上传文件"按钮选择文件
+- 或直接拖拽文件到上传区域
+- 支持批量上传多个文件
+- 上传前会检查剩余存储空间
+
+### 创建文件夹
+- 点击"新建文件夹"按钮
+- 输入文件夹名称并确认
+
+### 浏览文件
+- 点击文件夹进入
+- 使用面包屑导航返回上级目录
+- 点击刷新按钮重新加载文件列表
+
+### 下载/删除文件
+- 点击下载图标下载文件
+- 点击删除图标删除文件或文件夹（删除前会确认）
+
+### 查看存储空间
+- 顶部显示存储空间使用进度条
+- 上传、删除文件后会自动更新
+
+### 退出登录
+- 点击右上角的退出图标
+- 确认后返回登录页面
+
+## 🏗️ 技术栈
+
+- **后端**：Flask (Python)
+- **前端**：HTML + CSS + JavaScript + Font Awesome
+- **用户认证**：Werkzeug Security + Flask Session
+- **存储**：本地文件系统
+- **部署**：Docker / Hugging Face Spaces
+
+## 📁 项目结构
+
+```
+cloud-disk/
+├── app.py                 # Flask 后端应用
+├── requirements.txt       # Python 依赖
+├── Dockerfile             # Docker 部署配置
+├── README.md              # 说明文档
+├── .env.example           # 环境变量示例
+├── storage/               # 存储目录（运行时自动创建）
+│   ├── users.json         # 用户数据文件
+│   └── users/             # 用户存储目录
+│       └── {username}/    # 每个用户独立目录
+├── templates/
+│   ├── index.html         # 主页面
+│   ├── login.html         # 登录页面
+│   └── register.html      # 注册页面
+└── static/
+    ├── css/style.css      # 样式文件
+    └── js/app.js          # 前端交互逻辑
+```
+
+## 🔒 安全特性
+
+- **密码哈希**：使用 werkzeug.security 进行密码哈希存储
+- **路径安全**：防止路径遍历攻击，用户只能访问自己的文件
+- **空间隔离**：每个用户独立存储目录，数据互不干扰
+- **配额限制**：每个用户最多 1GB 存储空间，防止滥用
+
+## ⚠️ 注意事项
+
+1. **数据持久化**：建议使用 Storage Buckets 存储（路径 `/data`），这样 Space 重启后数据不会丢失
+2. **并发限制**：单用户演示用途，高并发场景可能需要优化
+3. **存储配额**：每个用户 1GB 空间，超出后无法上传新文件
+
+## 📄 License
+
+MIT License

public/cloud-disk/app.py

@@ -0,0 +1,561 @@
+import os
+import io
+import json
+import mimetypes
+from datetime import datetime
+from flask import Flask, render_template, request, jsonify, send_file, abort, session, redirect, url_for
+from werkzeug.security import generate_password_hash, check_password_hash
+import re
+
+def safe_filename(filename):
+    """安全的文件名处理，支持中文"""
+    if not filename:
+        return 'unnamed'
+    
+    # 移除路径分隔符和危险字符
+    filename = re.sub(r'[\\/:*?"<>|\x00-\x1f]', '_', filename)
+    # 移除开头的点和空格
+    filename = filename.lstrip('. ')
+    # 确保文件名不为空
+    if not filename:
+        filename = 'unnamed'
+    return filename
+
+def safe_username(username):
+    """安全的用户名处理"""
+    if not username:
+        return None
+    # 只允许字母、数字、下划线、中文
+    if not re.match(r'^[a-zA-Z0-9_\u4e00-\u9fa5]{3,20}$', username):
+        return None
+    return username
+
+app = Flask(__name__)
+app.config['MAX_CONTENT_LENGTH'] = 500 * 1024 * 1024  # 500MB max upload
+app.secret_key = os.environ.get('SECRET_KEY', 'cloud-disk-secret-key-2024')
+
+# Session cookie 配置（修复移动端登录跳转问题）
+app.config['SESSION_COOKIE_SAMESITE'] = 'Lax'
+app.config['SESSION_COOKIE_HTTPONLY'] = True
+app.config['SESSION_PERMANENT'] = True
+app.config['PERMANENT_SESSION_LIFETIME'] = 30 * 24 * 60 * 60  # 30天
+
+# 如果是 HTTPS 环境，取消下面两行的注释
+# app.config['SESSION_COOKIE_SAMESITE'] = 'None'
+# app.config['SESSION_COOKIE_SECURE'] = True
+
+# Configuration
+STORAGE_BASE_PATH = os.environ.get('STORAGE_PATH', '/data')
+USERS_FILE = os.path.join(STORAGE_BASE_PATH, 'users.json')
+MAX_STORAGE_PER_USER = 1 * 1024 * 1024 * 1024  # 1GB per user
+
+# Ensure storage directory exists
+os.makedirs(STORAGE_BASE_PATH, exist_ok=True)
+
+# Initialize users file
+if not os.path.exists(USERS_FILE):
+    with open(USERS_FILE, 'w', encoding='utf-8') as f:
+        json.dump({}, f)
+
+def load_users():
+    """加载用户数据"""
+    try:
+        with open(USERS_FILE, 'r', encoding='utf-8') as f:
+            return json.load(f)
+    except:
+        return {}
+
+def save_users(users):
+    """保存用户数据"""
+    with open(USERS_FILE, 'w', encoding='utf-8') as f:
+        json.dump(users, f, ensure_ascii=False, indent=2)
+
+def get_user_storage_path(username):
+    """获取用户的存储目录"""
+    return os.path.join(STORAGE_BASE_PATH, 'users', username)
+
+def ensure_user_storage(username):
+    """确保用户存储目录存在"""
+    path = get_user_storage_path(username)
+    os.makedirs(path, exist_ok=True)
+    return path
+
+def calculate_user_storage(username):
+    """计算用户已使用的存储空间"""
+    user_path = get_user_storage_path(username)
+    if not os.path.exists(user_path):
+        return 0
+    
+    total_size = 0
+    for dirpath, dirnames, filenames in os.walk(user_path):
+        for filename in filenames:
+            filepath = os.path.join(dirpath, filename)
+            try:
+                total_size += os.path.getsize(filepath)
+            except:
+                pass
+    return total_size
+
+def get_current_user():
+    """获取当前登录用户"""
+    return session.get('username')
+
+def login_required_api():
+    """API 登录检查装饰器辅助函数"""
+    username = get_current_user()
+    if not username:
+        return False, jsonify({'success': False, 'error': '请先登录', 'need_login': True})
+    return True, username
+
+def get_full_path(username, path=''):
+    """获取用户目录下的完整路径"""
+    user_path = get_user_storage_path(username)
+    if path and path != '/':
+        # 规范化路径，防止路径遍历
+        path = path.strip('/')
+        full_path = os.path.normpath(os.path.join(user_path, path))
+        # 确保路径在用户目录内
+        if not full_path.startswith(os.path.normpath(user_path)):
+            return None
+        return full_path
+    return user_path
+
+def list_files(username, path=''):
+    """列出用户目录下的文件"""
+    full_path = get_full_path(username, path)
+    if not full_path or not os.path.exists(full_path):
+        return []
+    
+    result = []
+    try:
+        for item in os.listdir(full_path):
+            item_path = os.path.join(full_path, item)
+            is_dir = os.path.isdir(item_path)
+            stat = os.stat(item_path)
+            
+            result.append({
+                'name': item,
+                'type': 'directory' if is_dir else 'file',
+                'size': stat.st_size if not is_dir else 0,
+                'modified': datetime.fromtimestamp(stat.st_mtime).strftime('%Y-%m-%d %H:%M:%S')
+            })
+        
+        # Sort: directories first, then files
+        result.sort(key=lambda x: (x['type'] != 'directory', x['name'].lower()))
+        return result
+    except Exception as e:
+        print(f"Error listing files: {e}")
+        return []
+
+def upload_file(username, file_storage, path=''):
+    """上��文件到用户目录"""
+    # 检查配额
+    used_storage = calculate_user_storage(username)
+    file_content = file_storage.read()
+    file_size = len(file_content)
+    
+    if used_storage + file_size > MAX_STORAGE_PER_USER:
+        return False, f"存储空间不足，您已使用 {format_size(used_storage)}，还剩 {format_size(MAX_STORAGE_PER_USER - used_storage)}"
+    
+    full_path = get_full_path(username, path)
+    if not full_path:
+        return False, "路径无效"
+    
+    try:
+        filename = safe_filename(file_storage.filename)
+        file_path = os.path.join(full_path, filename)
+        os.makedirs(os.path.dirname(file_path), exist_ok=True)
+        
+        with open(file_path, 'wb') as f:
+            f.write(file_content)
+        
+        return True, "上传成功"
+    except Exception as e:
+        print(f"Error uploading file: {e}")
+        return False, str(e)
+
+def download_file(username, filename, path=''):
+    """下载用户文件"""
+    full_path = get_full_path(username, path)
+    if not full_path:
+        return None
+    
+    file_path = os.path.join(full_path, filename)
+    if os.path.exists(file_path) and os.path.isfile(file_path):
+        return file_path
+    return None
+
+def create_directory(username, dirname, path=''):
+    """创建文件夹"""
+    full_path = get_full_path(username, path)
+    if not full_path:
+        return False, "路径无效"
+    
+    try:
+        dirname = safe_filename(dirname)
+        dir_path = os.path.join(full_path, dirname)
+        os.makedirs(dir_path, exist_ok=True)
+        return True, "文件夹创建成功"
+    except Exception as e:
+        print(f"Error creating directory: {e}")
+        return False, str(e)
+
+def delete_item(username, filename, path=''):
+    """删除文件或文件夹"""
+    full_path = get_full_path(username, path)
+    if not full_path:
+        return False, "路径无效"
+    
+    try:
+        item_path = os.path.join(full_path, filename)
+        if os.path.isdir(item_path):
+            import shutil
+            shutil.rmtree(item_path)
+        else:
+            os.remove(item_path)
+        return True, "删除成功"
+    except Exception as e:
+        print(f"Error deleting item: {e}")
+        return False, str(e)
+
+def format_size(size_bytes):
+    """格式化文件大小"""
+    if size_bytes == 0 or size_bytes == '-':
+        return '0 B'
+    try:
+        size_bytes = int(size_bytes)
+        for unit in ['B', 'KB', 'MB', 'GB', 'TB']:
+            if size_bytes < 1024.0:
+                return f"{size_bytes:.2f} {unit}"
+            size_bytes /= 1024.0
+        return f"{size_bytes:.2f} PB"
+    except:
+        return '-'
+
+# Template filter
+app.jinja_env.filters['format_size'] = format_size
+
+@app.route('/')
+def index():
+    """主页面"""
+    username = get_current_user()
+    if not username:
+        return redirect(url_for('login_page'))
+    
+    current_path = request.args.get('path', '')
+    files = list_files(username, current_path)
+    
+    # Build breadcrumb
+    breadcrumb = []
+    if current_path:
+        parts = current_path.strip('/').split('/')
+        acc = ''
+        for part in parts:
+            acc += '/' + part if acc else part
+            breadcrumb.append({'name': part, 'path': acc})
+    
+    # Calculate storage
+    used_storage = calculate_user_storage(username)
+    storage_percent = (used_storage / MAX_STORAGE_PER_USER) * 100
+    
+    return render_template('index.html', 
+                           username=username,
+                           files=files, 
+                           current_path=current_path,
+                           breadcrumb=breadcrumb,
+                           used_storage=used_storage,
+                           max_storage=MAX_STORAGE_PER_USER,
+                           storage_percent=storage_percent,
+                           used_storage_formatted=format_size(used_storage),
+                           max_storage_formatted=format_size(MAX_STORAGE_PER_USER))
+
+@app.route('/login', methods=['GET', 'POST'])
+def login_page():
+    """登录页面（支持表单提交）"""
+    if get_current_user():
+        return redirect(url_for('index'))
+    
+    error = None
+    
+    if request.method == 'POST':
+        # 表单提交方式
+        username = request.form.get('username', '').strip()
+        password = request.form.get('password', '')
+        
+        if not username or not password:
+            error = '请输入用户名和密码'
+        else:
+            users = load_users()
+            user = users.get(username)
+            
+            if not user or not check_password_hash(user['password_hash'], password):
+                error = '用户名或密码错误'
+            else:
+                # 登录成功
+                ensure_user_storage(username)
+                session['username'] = username
+                session.permanent = True
+                return redirect(url_for('index'))
+    
+    return render_template('login.html', error=error)
+
+@app.route('/register', methods=['GET', 'POST'])
+def register_page():
+    """注册页面（支持表单提交）"""
+    if get_current_user():
+        return redirect(url_for('index'))
+    
+    error = None
+    
+    if request.method == 'POST':
+        # 表单提交方式
+        username = request.form.get('username', '').strip()
+        password = request.form.get('password', '')
+        confirm_password = request.form.get('confirm_password', '')
+        
+        # 验证用户名
+        if not safe_username(username):
+            error = '用户名格式不正确，3-20位字母、数字、下划线或中文'
+        # 验证密码
+        elif len(password) < 6:
+            error = '密码至少6位'
+        elif password != confirm_password:
+            error = '两次密码不一致'
+        else:
+            # 检查用户是否存在
+            users = load_users()
+            if username in users:
+                error = '用户名已存在'
+            else:
+                # 创建用户
+                users[username] = {
+                    'password_hash': generate_password_hash(password),
+                    'created_at': datetime.now().isoformat(),
+                    'max_storage': MAX_STORAGE_PER_USER
+                }
+                save_users(users)
+                
+                # 创建用户目录
+                ensure_user_storage(username)
+                
+                # 自动登录
+                session['username'] = username
+                session.permanent = True
+                return redirect(url_for('index'))
+    
+    return render_template('register.html', error=error)
+
+# ========== Auth APIs ==========
+
+@app.route('/api/register', methods=['POST'])
+def api_register():
+    """注册 API"""
+    data = request.get_json()
+    username = data.get('username', '').strip()
+    password = data.get('password', '')
+    confirm_password = data.get('confirm_password', '')
+    
+    # 验证用户名
+    if not safe_username(username):
+        return jsonify({'success': False, 'error': '用户名格式不正确，3-20位字母、数字、下划线或中文'})
+    
+    # 验证密码
+    if len(password) < 6:
+        return jsonify({'success': False, 'error': '密码至少6位'})
+    
+    if password != confirm_password:
+        return jsonify({'success': False, 'error': '两次密码不一致'})
+    
+    # 检查用户是否存在
+    users = load_users()
+    if username in users:
+        return jsonify({'success': False, 'error': '用户名已存在'})
+    
+    # 创建用户
+    users[username] = {
+        'password_hash': generate_password_hash(password),
+        'created_at': datetime.now().isoformat(),
+        'max_storage': MAX_STORAGE_PER_USER
+    }
+    save_users(users)
+    
+    # 创建用户目录
+    ensure_user_storage(username)
+    
+    # 自动登录
+    session['username'] = username
+    
+    return jsonify({'success': True, 'message': '注册成功', 'username': username})
+
+@app.route('/api/login', methods=['POST'])
+def api_login():
+    """登录 API"""
+    data = request.get_json()
+    username = data.get('username', '').strip()
+    password = data.get('password', '')
+    
+    if not username or not password:
+        return jsonify({'success': False, 'error': '请输入用户名和密码'})
+    
+    users = load_users()
+    user = users.get(username)
+    
+    if not user or not check_password_hash(user['password_hash'], password):
+        return jsonify({'success': False, 'error': '用户名或密码错误'})
+    
+    # 确保用户目录存在
+    ensure_user_storage(username)
+    
+    session['username'] = username
+    return jsonify({'success': True, 'message': '登录成功', 'username': username})
+
+@app.route('/api/logout', methods=['POST'])
+def api_logout():
+    """退出登录 API"""
+    session.pop('username', None)
+    return jsonify({'success': True, 'message': '已退出登录'})
+
+@app.route('/api/user-info')
+def api_user_info():
+    """获取用户信息 API"""
+    is_logged_in, result = login_required_api()
+    if not is_logged_in:
+        return result
+    
+    username = result
+    used_storage = calculate_user_storage(username)
+    
+    return jsonify({
+        'success': True,
+        'username': username,
+        'used_storage': used_storage,
+        'max_storage': MAX_STORAGE_PER_USER,
+        'used_storage_formatted': format_size(used_storage),
+        'max_storage_formatted': format_size(MAX_STORAGE_PER_USER),
+        'storage_percent': (used_storage / MAX_STORAGE_PER_USER) * 100
+    })
+
+# ========== File APIs ==========
+
+@app.route('/api/list')
+def api_list():
+    """API: 列出文件"""
+    is_logged_in, result = login_required_api()
+    if not is_logged_in:
+        return result
+    
+    username = result
+    path = request.args.get('path', '')
+    files = list_files(username, path)
+    return jsonify({'success': True, 'files': files, 'path': path})
+
+@app.route('/api/upload', methods=['POST'])
+def api_upload():
+    """API: 上传文件"""
+    is_logged_in, result = login_required_api()
+    if not is_logged_in:
+        return result
+    
+    username = result
+    
+    if 'file' not in request.files:
+        return jsonify({'success': False, 'error': '没有选择文件'})
+    
+    file = request.files['file']
+    if file.filename == '':
+        return jsonify({'success': False, 'error': '没有选择文件'})
+    
+    path = request.form.get('path', '')
+    success, message = upload_file(username, file, path)
+    
+    return jsonify({'success': success, 'message': message})
+
+@app.route('/api/download')
+def api_download():
+    """API: 下载文件"""
+    is_logged_in, result = login_required_api()
+    if not is_logged_in:
+        return redirect(url_for('login_page'))
+    
+    username = result
+    filename = request.args.get('filename', '')
+    path = request.args.get('path', '')
+    
+    if not filename:
+        abort(400)
+    
+    file_path = download_file(username, filename, path)
+    if not file_path:
+        abort(404)
+    
+    # Determine MIME type
+    mime_type, _ = mimetypes.guess_type(filename)
+    if not mime_type:
+        mime_type = 'application/octet-stream'
+    
+    return send_file(
+        file_path,
+        mimetype=mime_type,
+        as_attachment=True,
+        download_name=filename
+    )
+
+@app.route('/api/mkdir', methods=['POST'])
+def api_mkdir():
+    """API: 创建文件夹"""
+    is_logged_in, result = login_required_api()
+    if not is_logged_in:
+        return result
+    
+    username = result
+    data = request.get_json()
+    dirname = data.get('dirname', '')
+    path = data.get('path', '')
+    
+    if not dirname:
+        return jsonify({'success': False, 'error': '请输入文件夹名称'})
+    
+    success, message = create_directory(username, dirname, path)
+    return jsonify({'success': success, 'message': message})
+
+@app.route('/api/delete', methods=['POST'])
+def api_delete():
+    """API: 删除文件/文件夹"""
+    is_logged_in, result = login_required_api()
+    if not is_logged_in:
+        return result
+    
+    username = result
+    data = request.get_json()
+    filename = data.get('filename', '')
+    path = data.get('path', '')
+    
+    if not filename:
+        return jsonify({'success': False, 'error': '请选择要删除的文件'})
+    
+    success, message = delete_item(username, filename, path)
+    return jsonify({'success': success, 'message': message})
+
+@app.route('/api/storage-info')
+def api_storage_info():
+    """API: 获取存储信息"""
+    is_logged_in, result = login_required_api()
+    if not is_logged_in:
+        return result
+    
+    username = result
+    used_storage = calculate_user_storage(username)
+    
+    return jsonify({
+        'success': True,
+        'storage_type': 'local',
+        'used_storage': used_storage,
+        'max_storage': MAX_STORAGE_PER_USER,
+        'used_storage_formatted': format_size(used_storage),
+        'max_storage_formatted': format_size(MAX_STORAGE_PER_USER),
+        'storage_percent': (used_storage / MAX_STORAGE_PER_USER) * 100
+    })
+
+if __name__ == '__main__':
+    port = int(os.environ.get('PORT', 7860))
+    app.run(host='0.0.0.0', port=port, debug=False)

public/cloud-disk/requirements.txt

@@ -0,0 +1,3 @@
+Flask==3.0.0
+python-dotenv==1.0.0
+Werkzeug==3.0.1

public/cloud-disk/static/css/style.css

@@ -0,0 +1,853 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    color: #333;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+    min-height: 100vh;
+}
+
+/* Header */
+.header {
+    background: white;
+    border-radius: 16px;
+    padding: 20px 24px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+    margin-bottom: 20px;
+}
+
+.header-left {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.header-icon {
+    font-size: 32px;
+    color: #667eea;
+}
+
+.header-title {
+    font-size: 24px;
+    font-weight: 700;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.storage-badge {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    padding: 6px 12px;
+    border-radius: 20px;
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.header-right {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+}
+
+/* Buttons */
+.btn {
+    padding: 10px 20px;
+    border: none;
+    border-radius: 10px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.btn:active {
+    transform: translateY(0);
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+}
+
+.btn-secondary {
+    background: #f0f0f0;
+    color: #333;
+}
+
+.btn-secondary:hover {
+    background: #e0e0e0;
+}
+
+.btn-danger {
+    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+    color: white;
+}
+
+.btn-icon {
+    padding: 10px;
+    background: #f0f0f0;
+    color: #666;
+    border-radius: 10px;
+}
+
+.btn-icon:hover {
+    background: #e0e0e0;
+    color: #333;
+}
+
+/* Breadcrumb */
+.breadcrumb {
+    background: white;
+    border-radius: 12px;
+    padding: 14px 20px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+    margin-bottom: 20px;
+    flex-wrap: wrap;
+}
+
+.breadcrumb-item {
+    color: #667eea;
+    text-decoration: none;
+    font-size: 14px;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    transition: color 0.3s;
+}
+
+.breadcrumb-item:hover {
+    color: #764ba2;
+}
+
+.breadcrumb-separator {
+    color: #ccc;
+    font-size: 12px;
+}
+
+/* Upload Zone */
+.upload-zone {
+    background: white;
+    border: 2px dashed #d0d0d0;
+    border-radius: 16px;
+    padding: 40px;
+    text-align: center;
+    margin-bottom: 20px;
+    transition: all 0.3s ease;
+    cursor: pointer;
+}
+
+.upload-zone:hover,
+.upload-zone.drag-over {
+    border-color: #667eea;
+    background: #f8f9ff;
+}
+
+.upload-zone-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+}
+
+.upload-icon {
+    font-size: 48px;
+    color: #667eea;
+    margin-bottom: 10px;
+}
+
+.upload-text {
+    font-size: 16px;
+    font-weight: 500;
+    color: #333;
+}
+
+.upload-subtext {
+    font-size: 13px;
+    color: #999;
+}
+
+/* File List */
+.file-list-container {
+    background: white;
+    border-radius: 16px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+}
+
+.file-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.file-table th {
+    background: #f8f9fa;
+    padding: 14px 20px;
+    text-align: left;
+    font-size: 13px;
+    font-weight: 600;
+    color: #666;
+    border-bottom: 1px solid #eee;
+}
+
+.file-table td {
+    padding: 14px 20px;
+    border-bottom: 1px solid #f5f5f5;
+    font-size: 14px;
+}
+
+.file-item:hover {
+    background: #f8f9ff;
+}
+
+.file-item:last-child td {
+    border-bottom: none;
+}
+
+.file-name-cell {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.folder-icon {
+    color: #ffc107;
+    font-size: 20px;
+}
+
+.file-icon {
+    color: #667eea;
+    font-size: 20px;
+}
+
+.file-name {
+    color: #333;
+    text-decoration: none;
+    font-weight: 500;
+}
+
+.file-name:hover {
+    color: #667eea;
+}
+
+.file-size {
+    color: #999;
+    font-size: 13px;
+}
+
+.file-modified {
+    color: #999;
+    font-size: 13px;
+}
+
+.file-actions {
+    display: flex;
+    gap: 8px;
+}
+
+.action-btn {
+    padding: 8px;
+    border: none;
+    background: transparent;
+    color: #999;
+    cursor: pointer;
+    border-radius: 8px;
+    transition: all 0.3s;
+}
+
+.action-btn:hover {
+    background: #f0f0f0;
+    color: #333;
+}
+
+.download-btn:hover {
+    color: #667eea;
+    background: #eef0ff;
+}
+
+.delete-btn:hover {
+    color: #f5576c;
+    background: #ffeef0;
+}
+
+/* Empty State */
+.empty-state {
+    padding: 80px 20px;
+    text-align: center;
+}
+
+.empty-icon {
+    font-size: 64px;
+    color: #ddd;
+    margin-bottom: 20px;
+}
+
+.empty-text {
+    font-size: 18px;
+    color: #999;
+    margin-bottom: 8px;
+}
+
+.empty-subtext {
+    font-size: 14px;
+    color: #ccc;
+}
+
+/* Modal */
+.modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 1000;
+    align-items: center;
+    justify-content: center;
+}
+
+.modal.show {
+    display: flex;
+}
+
+.modal-content {
+    background: white;
+    border-radius: 16px;
+    width: 90%;
+    max-width: 400px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    animation: modalSlideIn 0.3s ease;
+}
+
+@keyframes modalSlideIn {
+    from {
+        opacity: 0;
+        transform: translateY(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.modal-header {
+    padding: 20px 24px;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.modal-header h3 {
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.modal-close {
+    background: none;
+    border: none;
+    font-size: 24px;
+    color: #999;
+    cursor: pointer;
+    transition: color 0.3s;
+}
+
+.modal-close:hover {
+    color: #333;
+}
+
+.modal-body {
+    padding: 24px;
+}
+
+.modal-footer {
+    padding: 16px 24px;
+    border-top: 1px solid #eee;
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+}
+
+.form-input {
+    width: 100%;
+    padding: 12px 16px;
+    border: 2px solid #e0e0e0;
+    border-radius: 10px;
+    font-size: 14px;
+    transition: border-color 0.3s;
+    outline: none;
+}
+
+.form-input:focus {
+    border-color: #667eea;
+}
+
+.text-warning {
+    color: #f5576c;
+    font-size: 13px;
+    margin-top: 8px;
+}
+
+/* Upload Progress */
+.upload-progress {
+    display: none;
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background: white;
+    border-radius: 12px;
+    padding: 16px 20px;
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
+    z-index: 100;
+    min-width: 300px;
+}
+
+.upload-progress.show {
+    display: block;
+    animation: slideUp 0.3s ease;
+}
+
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.progress-content {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 10px;
+    font-size: 14px;
+    font-weight: 500;
+}
+
+.progress-content i {
+    color: #667eea;
+}
+
+.progress-bar {
+    height: 6px;
+    background: #f0f0f0;
+    border-radius: 3px;
+    overflow: hidden;
+}
+
+.progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+    border-radius: 3px;
+    width: 0%;
+    transition: width 0.3s ease;
+}
+
+/* Toast */
+.toast {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 2000;
+    transform: translateX(120%);
+    transition: transform 0.3s ease;
+}
+
+.toast.show {
+    transform: translateX(0);
+}
+
+.toast-content {
+    background: white;
+    padding: 14px 20px;
+    border-radius: 12px;
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 14px;
+    font-weight: 500;
+}
+
+.toast-icon.success {
+    color: #4caf50;
+}
+
+.toast-icon.error {
+    color: #f5576c;
+}
+
+.toast-icon.info {
+    color: #667eea;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .container {
+        padding: 10px;
+    }
+    
+    .header {
+        flex-direction: column;
+        gap: 16px;
+        padding: 16px;
+    }
+    
+    .header-right {
+        width: 100%;
+        justify-content: center;
+        flex-wrap: wrap;
+    }
+    
+    .file-table th:nth-child(2),
+    .file-table th:nth-child(3),
+    .file-table td:nth-child(2),
+    .file-table td:nth-child(3) {
+        display: none;
+    }
+    
+    .upload-zone {
+        padding: 30px 20px;
+    }
+}
+
+/* Auth Pages */
+.auth-body {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+}
+
+.auth-container {
+    display: flex;
+    gap: 40px;
+    max-width: 900px;
+    width: 100%;
+    align-items: center;
+}
+
+.auth-card {
+    background: white;
+    border-radius: 20px;
+    padding: 40px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
+    flex: 1;
+    max-width: 400px;
+}
+
+.auth-header {
+    text-align: center;
+    margin-bottom: 30px;
+}
+
+.auth-icon {
+    font-size: 48px;
+    color: #667eea;
+    margin-bottom: 10px;
+}
+
+.auth-header h1 {
+    font-size: 28px;
+    font-weight: 700;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin-bottom: 8px;
+}
+
+.auth-subtitle {
+    color: #999;
+    font-size: 14px;
+}
+
+.auth-form {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.form-group label {
+    font-size: 14px;
+    font-weight: 500;
+    color: #555;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.form-group label i {
+    color: #667eea;
+}
+
+.form-hint {
+    font-size: 12px;
+    color: #999;
+    margin-top: -4px;
+}
+
+.btn-block {
+    width: 100%;
+    justify-content: center;
+    padding: 14px;
+    font-size: 15px;
+}
+
+.auth-footer {
+    text-align: center;
+    margin-top: 24px;
+    padding-top: 20px;
+    border-top: 1px solid #f0f0f0;
+}
+
+.auth-footer p {
+    font-size: 14px;
+    color: #666;
+}
+
+.auth-link {
+    color: #667eea;
+    text-decoration: none;
+    font-weight: 500;
+    transition: color 0.3s;
+}
+
+.auth-link:hover {
+    color: #764ba2;
+}
+
+.auth-features {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+    color: white;
+}
+
+.feature-item {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.feature-icon {
+    font-size: 32px;
+    margin-bottom: 4px;
+    opacity: 0.9;
+}
+
+.feature-item h3 {
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.feature-item p {
+    font-size: 14px;
+    opacity: 0.85;
+    line-height: 1.6;
+}
+
+/* User Info in Header */
+.user-info {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding-right: 16px;
+    border-right: 1px solid #eee;
+    margin-right: 4px;
+}
+
+.storage-info {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    min-width: 120px;
+}
+
+.storage-bar {
+    height: 6px;
+    background: #f0f0f0;
+    border-radius: 3px;
+    overflow: hidden;
+}
+
+.storage-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+    border-radius: 3px;
+    transition: width 0.3s ease;
+}
+
+.storage-text {
+    font-size: 12px;
+    color: #999;
+    text-align: center;
+}
+
+.user-profile {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.user-avatar {
+    font-size: 28px;
+    color: #667eea;
+}
+
+.username {
+    font-size: 14px;
+    font-weight: 500;
+    color: #333;
+    max-width: 100px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.logout-btn {
+    color: #999;
+}
+
+.logout-btn:hover {
+    color: #f5576c;
+    background: #ffeef0;
+}
+
+.header-actions {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+}
+
+/* Toast Colors */
+.toast-success .toast-icon {
+    color: #4caf50;
+}
+
+.toast-error .toast-icon {
+    color: #f5576c;
+}
+
+.toast-info .toast-icon {
+    color: #667eea;
+}
+
+/* Responsive for Auth */
+@media (max-width: 768px) {
+    .auth-container {
+        flex-direction: column;
+        gap: 30px;
+    }
+    
+    .auth-card {
+        max-width: 100%;
+        padding: 30px 24px;
+    }
+    
+    .auth-features {
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 20px;
+        text-align: center;
+    }
+    
+    .feature-item {
+        flex: 1;
+        min-width: 120px;
+    }
+    
+    .feature-icon {
+        font-size: 24px;
+    }
+    
+    .feature-item h3 {
+        font-size: 14px;
+    }
+    
+    .feature-item p {
+        font-size: 12px;
+    }
+    
+    .user-info {
+        flex-direction: column;
+        gap: 8px;
+        padding-right: 0;
+        border-right: none;
+        margin-right: 0;
+        padding-bottom: 12px;
+        border-bottom: 1px solid #eee;
+        width: 100%;
+    }
+    
+    .storage-info {
+        min-width: 100%;
+    }
+    
+    .header-actions {
+        width: 100%;
+        justify-content: center;
+        flex-wrap: wrap;
+    }
+}
+
+/* 错误提示样式 */
+.auth-error {
+    background: #fff0f0;
+    border: 1px solid #ffcccc;
+    color: #f5576c;
+    padding: 12px 16px;
+    border-radius: 8px;
+    margin-bottom: 20px;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.auth-error i {
+    font-size: 16px;
+}

public/cloud-disk/static/js/app.js

@@ -0,0 +1,513 @@
+// DOM Elements
+const uploadBtn = document.getElementById('uploadBtn');
+const mkdirBtn = document.getElementById('mkdirBtn');
+const refreshBtn = document.getElementById('refreshBtn');
+const fileInput = document.getElementById('fileInput');
+const uploadZone = document.getElementById('uploadZone');
+const fileList = document.getElementById('fileList');
+
+// Modals
+const mkdirModal = document.getElementById('mkdirModal');
+const deleteModal = document.getElementById('deleteModal');
+const folderNameInput = document.getElementById('folderNameInput');
+const deleteFileName = document.getElementById('deleteFileName');
+
+// Progress
+const uploadProgress = document.getElementById('uploadProgress');
+const progressText = document.getElementById('progressText');
+const progressFill = document.getElementById('progressFill');
+
+// Toast
+const toast = document.getElementById('toast');
+const toastIcon = document.getElementById('toastIcon');
+const toastMessage = document.getElementById('toastMessage');
+
+// State
+let deleteTarget = null;
+let deleteType = null;
+
+// Toast function
+function showToast(message, type = 'success') {
+    toastMessage.textContent = message;
+    toastIcon.className = 'toast-icon fas ';
+    
+    if (type === 'success') {
+        toastIcon.classList.add('fa-check-circle', 'success');
+    } else if (type === 'error') {
+        toastIcon.classList.add('fa-exclamation-circle', 'error');
+    } else {
+        toastIcon.classList.add('fa-info-circle', 'info');
+    }
+    
+    toast.classList.add('show');
+    
+    setTimeout(() => {
+        toast.classList.remove('show');
+    }, 3000);
+}
+
+// Upload functions
+function uploadFiles(files) {
+    if (files.length === 0) return;
+    
+    uploadProgress.classList.add('show');
+    progressText.textContent = `正在上传 0/${files.length}...`;
+    progressFill.style.width = '0%';
+    
+    let uploaded = 0;
+    let failed = 0;
+    
+    const uploadNext = (index) => {
+        if (index >= files.length) {
+            setTimeout(() => {
+                uploadProgress.classList.remove('show');
+                if (failed > 0) {
+                    showToast(`${uploaded} 个文件上传成功，${failed} 个失败`, 'error');
+                } else {
+                    showToast(`${uploaded} 个文件上传成功！`, 'success');
+                }
+                refreshFileList();
+            }, 500);
+            return;
+        }
+        
+        const file = files[index];
+        progressText.textContent = `正在上传: ${file.name} (${index + 1}/${files.length})`;
+        progressFill.style.width = `${(index / files.length) * 100}%`;
+        
+        const formData = new FormData();
+        formData.append('file', file);
+        formData.append('path', currentPath);
+        
+        fetch('/api/upload', {
+            method: 'POST',
+            body: formData
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.success) {
+                uploaded++;
+            } else {
+                failed++;
+                console.error('Upload failed:', data.error);
+            }
+            progressFill.style.width = `${((index + 1) / files.length) * 100}%`;
+            uploadNext(index + 1);
+        })
+        .catch(error => {
+            failed++;
+            console.error('Upload error:', error);
+            uploadNext(index + 1);
+        });
+    };
+    
+    uploadNext(0);
+}
+
+// Refresh file list
+function refreshFileList() {
+    fetch(`/api/list?path=${encodeURIComponent(currentPath)}`)
+        .then(response => response.json())
+        .then(data => {
+            if (data.success) {
+                renderFileList(data.files);
+            }
+        })
+        .catch(error => {
+            console.error('Refresh error:', error);
+            showToast('刷新失败', 'error');
+        });
+}
+
+// Render file list
+function renderFileList(files) {
+    const container = document.querySelector('.file-list-container');
+    
+    if (!files || files.length === 0) {
+        container.innerHTML = `
+            <div class="empty-state">
+                <i class="fas fa-folder-open empty-icon"></i>
+                <p class="empty-text">此文件夹为空</p>
+                <p class="empty-subtext">上传文件或创建文件夹开始使用</p>
+            </div>
+        `;
+        return;
+    }
+    
+    // Sort: directories first
+    files.sort((a, b) => {
+        if (a.type === b.type) {
+            return a.name.localeCompare(b.name);
+        }
+        return a.type === 'directory' ? -1 : 1;
+    });
+    
+    const tableHtml = `
+        <table class="file-table">
+            <thead>
+                <tr>
+                    <th>名称</th>
+                    <th>大小</th>
+                    <th>修改时间</th>
+                    <th>操作</th>
+                </tr>
+            </thead>
+            <tbody id="fileList">
+                ${files.map(file => `
+                    <tr class="file-item" data-name="${file.name}" data-type="${file.type}">
+                        <td class="file-name-cell">
+                            ${file.type === 'directory' 
+                                ? `<i class="fas fa-folder folder-icon"></i>
+                                   <a href="/?path=${encodeURIComponent(currentPath ? currentPath + '/' + file.name : file.name)}" class="file-name">${file.name}</a>`
+                                : `<i class="fas fa-file file-icon"></i>
+                                   <span class="file-name">${file.name}</span>`
+                            }
+                        </td>
+                        <td class="file-size">${formatSize(file.size)}</td>
+                        <td class="file-modified">${file.modified || '-'}</td>
+                        <td class="file-actions">
+                            ${file.type === 'file' 
+                                ? `<button class="action-btn download-btn" title="下载" data-filename="${file.name}">
+                                       <i class="fas fa-download"></i>
+                                   </button>` 
+                                : ''
+                            }
+                            <button class="action-btn delete-btn" title="删除" data-filename="${file.name}" data-type="${file.type}">
+                                <i class="fas fa-trash"></i>
+                            </button>
+                        </td>
+                    </tr>
+                `).join('')}
+            </tbody>
+        </table>
+    `;
+    
+    container.innerHTML = tableHtml;
+    
+    // Re-attach event listeners
+    attachFileEventListeners();
+}
+
+// Format file size
+function formatSize(sizeBytes) {
+    if (!sizeBytes || sizeBytes === 0 || sizeBytes === '-') {
+        return '-';
+    }
+    try {
+        const size = parseInt(sizeBytes);
+        const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+        let i = 0;
+        let s = size;
+        while (s >= 1024 && i < units.length - 1) {
+            s /= 1024;
+            i++;
+        }
+        return s.toFixed(2) + ' ' + units[i];
+    } catch {
+        return '-';
+    }
+}
+
+// Attach event listeners to file items
+function attachFileEventListeners() {
+    // Download buttons
+    document.querySelectorAll('.download-btn').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const filename = btn.dataset.filename;
+            downloadFile(filename);
+        });
+    });
+    
+    // Delete buttons
+    document.querySelectorAll('.delete-btn').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const filename = btn.dataset.filename;
+            const type = btn.dataset.type;
+            showDeleteModal(filename, type);
+        });
+    });
+}
+
+// Download file
+function downloadFile(filename) {
+    const url = `/api/download?filename=${encodeURIComponent(filename)}&path=${encodeURIComponent(currentPath)}`;
+    window.location.href = url;
+}
+
+// Create directory
+function createDirectory(dirname) {
+    fetch('/api/mkdir', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            dirname: dirname,
+            path: currentPath
+        })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            showToast('文件夹创建成功！', 'success');
+            closeMkdirModal();
+            refreshFileList();
+        } else {
+            showToast(data.error || '创建失败', 'error');
+        }
+    })
+    .catch(error => {
+        console.error('Mkdir error:', error);
+        showToast('创建失败', 'error');
+    });
+}
+
+// Delete file/directory
+function deleteItem(filename) {
+    fetch('/api/delete', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            filename: filename,
+            path: currentPath
+        })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            showToast('删除成功！', 'success');
+            closeDeleteModal();
+            refreshFileList();
+        } else {
+            showToast(data.error || '删除失败', 'error');
+        }
+    })
+    .catch(error => {
+        console.error('Delete error:', error);
+        showToast('删除失败', 'error');
+    });
+}
+
+// Modal functions
+function showMkdirModal() {
+    mkdirModal.classList.add('show');
+    folderNameInput.value = '';
+    setTimeout(() => folderNameInput.focus(), 100);
+}
+
+function closeMkdirModal() {
+    mkdirModal.classList.remove('show');
+}
+
+function showDeleteModal(filename, type) {
+    deleteTarget = filename;
+    deleteType = type;
+    deleteFileName.textContent = filename;
+    deleteModal.classList.add('show');
+}
+
+function closeDeleteModal() {
+    deleteModal.classList.remove('show');
+    deleteTarget = null;
+    deleteType = null;
+}
+
+// Event Listeners
+
+// Upload button
+uploadBtn.addEventListener('click', () => {
+    fileInput.click();
+});
+
+fileInput.addEventListener('change', (e) => {
+    if (e.target.files.length > 0) {
+        uploadFiles(e.target.files);
+        fileInput.value = '';
+    }
+});
+
+// Upload zone click
+uploadZone.addEventListener('click', () => {
+    fileInput.click();
+});
+
+// Drag and drop
+uploadZone.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    uploadZone.classList.add('drag-over');
+});
+
+uploadZone.addEventListener('dragleave', (e) => {
+    e.preventDefault();
+    uploadZone.classList.remove('drag-over');
+});
+
+uploadZone.addEventListener('drop', (e) => {
+    e.preventDefault();
+    uploadZone.classList.remove('drag-over');
+    
+    if (e.dataTransfer.files.length > 0) {
+        uploadFiles(e.dataTransfer.files);
+    }
+});
+
+// Mkdir button
+mkdirBtn.addEventListener('click', showMkdirModal);
+
+document.getElementById('closeMkdirModal').addEventListener('click', closeMkdirModal);
+document.getElementById('cancelMkdir').addEventListener('click', closeMkdirModal);
+
+document.getElementById('confirmMkdir').addEventListener('click', () => {
+    const dirname = folderNameInput.value.trim();
+    if (dirname) {
+        createDirectory(dirname);
+    } else {
+        showToast('请输入文件夹名称', 'error');
+    }
+});
+
+folderNameInput.addEventListener('keypress', (e) => {
+    if (e.key === 'Enter') {
+        const dirname = folderNameInput.value.trim();
+        if (dirname) {
+            createDirectory(dirname);
+        }
+    }
+});
+
+// Delete modal
+document.getElementById('closeDeleteModal').addEventListener('click', closeDeleteModal);
+document.getElementById('cancelDelete').addEventListener('click', closeDeleteModal);
+
+document.getElementById('confirmDelete').addEventListener('click', () => {
+    if (deleteTarget) {
+        deleteItem(deleteTarget);
+    }
+});
+
+// Refresh button
+refreshBtn.addEventListener('click', () => {
+    refreshBtn.querySelector('i').classList.add('fa-spin');
+    refreshFileList();
+    setTimeout(() => {
+        refreshBtn.querySelector('i').classList.remove('fa-spin');
+    }, 500);
+});
+
+// Close modals on outside click
+mkdirModal.addEventListener('click', (e) => {
+    if (e.target === mkdirModal) {
+        closeMkdirModal();
+    }
+});
+
+deleteModal.addEventListener('click', (e) => {
+    if (e.target === deleteModal) {
+        closeDeleteModal();
+    }
+});
+
+// Keyboard shortcuts
+document.addEventListener('keydown', (e) => {
+    // Escape to close modals
+    if (e.key === 'Escape') {
+        closeMkdirModal();
+        closeDeleteModal();
+    }
+});
+
+// Initialize
+document.addEventListener('DOMContentLoaded', () => {
+    attachFileEventListeners();
+    initUserFeatures();
+});
+
+// User features
+function initUserFeatures() {
+    // Logout button
+    const logoutBtn = document.getElementById('logoutBtn');
+    if (logoutBtn) {
+        logoutBtn.addEventListener('click', logout);
+    }
+}
+
+// Logout function
+function logout() {
+    fetch('/api/logout', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        }
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            showToast('已退出登录', 'success');
+            setTimeout(() => {
+                window.location.href = '/login';
+            }, 500);
+        } else {
+            showToast(data.error || '退出失败', 'error');
+        }
+    })
+    .catch(error => {
+        console.error('Logout error:', error);
+        showToast('退出失败', 'error');
+    });
+}
+
+// Update storage info
+function updateStorageInfo() {
+    fetch('/api/storage-info')
+        .then(response => response.json())
+        .then(data => {
+            if (data.success) {
+                const storageFill = document.querySelector('.storage-fill');
+                const storageText = document.querySelector('.storage-text');
+                
+                if (storageFill) {
+                    storageFill.style.width = data.storage_percent + '%';
+                }
+                if (storageText) {
+                    storageText.textContent = `${data.used_storage_formatted} / ${data.max_storage_formatted}`;
+                }
+            }
+        })
+        .catch(error => {
+            console.error('Storage info error:', error);
+        });
+}
+
+// Override uploadFiles to update storage after
+const originalUploadFiles = uploadFiles;
+uploadFiles = function(files) {
+    originalUploadFiles(files);
+    // Update storage after upload completes (polling)
+    setTimeout(() => {
+        updateStorageInfo();
+    }, 2000);
+};
+
+// Override deleteItem to update storage after
+const originalDeleteItem = deleteItem;
+deleteItem = function(filename) {
+    originalDeleteItem(filename);
+    // Update storage after delete
+    setTimeout(() => {
+        updateStorageInfo();
+    }, 1000);
+};
+
+// Override createDirectory to update storage after
+const originalCreateDirectory = createDirectory;
+createDirectory = function(dirname) {
+    originalCreateDirectory(dirname);
+    // Update storage after mkdir
+    setTimeout(() => {
+        updateStorageInfo();
+    }, 1000);
+};

public/cloud-disk/templates/index.html

@@ -0,0 +1,185 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>云盘 - Cloud Disk</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+</head>
+<body>
+    <div class="container">
+        <!-- Header -->
+        <header class="header">
+            <div class="header-left">
+                <i class="fas fa-cloud header-icon"></i>
+                <h1 class="header-title">云盘</h1>
+            </div>
+            <div class="header-right">
+                <div class="user-info">
+                    <div class="storage-info">
+                        <div class="storage-bar">
+                            <div class="storage-fill" style="width: {{ storage_percent }}%"></div>
+                        </div>
+                        <span class="storage-text">{{ used_storage_formatted }} / {{ max_storage_formatted }}</span>
+                    </div>
+                    <div class="user-profile">
+                        <i class="fas fa-user-circle user-avatar"></i>
+                        <span class="username">{{ username }}</span>
+                    </div>
+                    <button class="btn btn-icon logout-btn" id="logoutBtn" title="退出登录">
+                        <i class="fas fa-sign-out-alt"></i>
+                    </button>
+                </div>
+                <div class="header-actions">
+                    <button class="btn btn-primary" id="uploadBtn">
+                        <i class="fas fa-upload"></i>
+                        上传文件
+                    </button>
+                    <button class="btn btn-secondary" id="mkdirBtn">
+                        <i class="fas fa-folder-plus"></i>
+                        新建文件夹
+                    </button>
+                    <button class="btn btn-icon" id="refreshBtn" title="刷新">
+                        <i class="fas fa-sync-alt"></i>
+                    </button>
+                </div>
+            </div>
+        </header>
+
+        <!-- Breadcrumb -->
+        <nav class="breadcrumb">
+            <a href="/" class="breadcrumb-item">
+                <i class="fas fa-home"></i>
+                根目录
+            </a>
+            {% for item in breadcrumb %}
+            <span class="breadcrumb-separator"><i class="fas fa-chevron-right"></i></span>
+            <a href="/?path={{ item.path }}" class="breadcrumb-item">{{ item.name }}</a>
+            {% endfor %}
+        </nav>
+
+        <!-- Upload Drop Zone -->
+        <div class="upload-zone" id="uploadZone">
+            <div class="upload-zone-content">
+                <i class="fas fa-cloud-upload-alt upload-icon"></i>
+                <p class="upload-text">拖拽文件到此处上传</p>
+                <p class="upload-subtext">或点击上方"上传文件"按钮</p>
+            </div>
+        </div>
+
+        <!-- File List -->
+        <div class="file-list-container">
+            {% if files %}
+            <table class="file-table">
+                <thead>
+                    <tr>
+                        <th>名称</th>
+                        <th>大小</th>
+                        <th>修改时间</th>
+                        <th>操作</th>
+                    </tr>
+                </thead>
+                <tbody id="fileList">
+                    {% for file in files %}
+                    <tr class="file-item" data-name="{{ file.name }}" data-type="{{ file.type }}">
+                        <td class="file-name-cell">
+                            {% if file.type == 'directory' %}
+                            <i class="fas fa-folder folder-icon"></i>
+                            <a href="/?path={{ (current_path + '/' + file.name) if current_path else file.name }}" class="file-name">
+                                {{ file.name }}
+                            </a>
+                            {% else %}
+                            <i class="fas fa-file file-icon"></i>
+                            <span class="file-name">{{ file.name }}</span>
+                            {% endif %}
+                        </td>
+                        <td class="file-size">{{ file.size | format_size }}</td>
+                        <td class="file-modified">{{ file.modified }}</td>
+                        <td class="file-actions">
+                            {% if file.type == 'file' %}
+                            <button class="action-btn download-btn" title="下载" data-filename="{{ file.name }}">
+                                <i class="fas fa-download"></i>
+                            </button>
+                            {% endif %}
+                            <button class="action-btn delete-btn" title="删除" data-filename="{{ file.name }}" data-type="{{ file.type }}">
+                                <i class="fas fa-trash"></i>
+                            </button>
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+            {% else %}
+            <div class="empty-state">
+                <i class="fas fa-folder-open empty-icon"></i>
+                <p class="empty-text">此文件夹为空</p>
+                <p class="empty-subtext">上传文件或创建文件夹开始使用</p>
+            </div>
+            {% endif %}
+        </div>
+    </div>
+
+    <!-- Hidden file input -->
+    <input type="file" id="fileInput" style="display: none;" multiple>
+
+    <!-- Modal: New Folder -->
+    <div class="modal" id="mkdirModal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3>新建文件夹</h3>
+                <button class="modal-close" id="closeMkdirModal">&times;</button>
+            </div>
+            <div class="modal-body">
+                <input type="text" id="folderNameInput" class="form-input" placeholder="请输入文件夹名称">
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-secondary" id="cancelMkdir">取消</button>
+                <button class="btn btn-primary" id="confirmMkdir">创建</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Modal: Confirm Delete -->
+    <div class="modal" id="deleteModal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3>确认删除</h3>
+                <button class="modal-close" id="closeDeleteModal">&times;</button>
+            </div>
+            <div class="modal-body">
+                <p>确定要删除 <strong id="deleteFileName"></strong> 吗？</p>
+                <p class="text-warning">此操作不可撤销！</p>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-secondary" id="cancelDelete">取消</button>
+                <button class="btn btn-danger" id="confirmDelete">删除</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Upload Progress -->
+    <div class="upload-progress" id="uploadProgress">
+        <div class="progress-content">
+            <i class="fas fa-spinner fa-spin"></i>
+            <span id="progressText">正在上传...</span>
+        </div>
+        <div class="progress-bar">
+            <div class="progress-fill" id="progressFill"></div>
+        </div>
+    </div>
+
+    <!-- Toast -->
+    <div class="toast" id="toast">
+        <div class="toast-content">
+            <i class="toast-icon" id="toastIcon"></i>
+            <span id="toastMessage"></span>
+        </div>
+    </div>
+
+    <script>
+        const currentPath = "{{ current_path }}";
+    </script>
+    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
+</body>
+</html>

public/cloud-disk/templates/login.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>登录 - 云盘</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+</head>
+<body class="auth-body">
+    <div class="auth-container">
+        <div class="auth-card">
+            <div class="auth-header">
+                <i class="fas fa-cloud auth-icon"></i>
+                <h1>云盘</h1>
+                <p class="auth-subtitle">安全、便捷的云端存储</p>
+            </div>
+            
+            {% if error %}
+            <div class="auth-error">
+                <i class="fas fa-exclamation-circle"></i>
+                {{ error }}
+            </div>
+            {% endif %}
+            
+            <form class="auth-form" method="POST" action="/login">
+                <div class="form-group">
+                    <label for="username">
+                        <i class="fas fa-user"></i>
+                        用户名
+                    </label>
+                    <input type="text" id="username" name="username" class="form-input" placeholder="请输入用户名" required>
+                </div>
+                
+                <div class="form-group">
+                    <label for="password">
+                        <i class="fas fa-lock"></i>
+                        密码
+                    </label>
+                    <input type="password" id="password" name="password" class="form-input" placeholder="请输入密码" required>
+                </div>
+                
+                <button type="submit" class="btn btn-primary btn-block">
+                    <i class="fas fa-sign-in-alt"></i>
+                    登录
+                </button>
+            </form>
+            
+            <div class="auth-footer">
+                <p>还没有账号？<a href="/register" class="auth-link">立即注册</a></p>
+            </div>
+        </div>
+        
+        <div class="auth-features">
+            <div class="feature-item">
+                <i class="fas fa-shield-alt feature-icon"></i>
+                <h3>安全存储</h3>
+                <p>每个用户独立空间，数据安全隔离</p>
+            </div>
+            <div class="feature-item">
+                <i class="fas fa-hdd feature-icon"></i>
+                <h3>1GB 空间</h3>
+                <p>免费享受 1GB 云端存储空间</p>
+            </div>
+            <div class="feature-item">
+                <i class="fas fa-bolt feature-icon"></i>
+                <h3>快速上传</h3>
+                <p>支持拖拽上传，大文件也能快速传输</p>
+            </div>
+        </div>
+    </div>
+</body>
+</html>

public/cloud-disk/templates/register.html

@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>注册 - 云盘</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+</head>
+<body class="auth-body">
+    <div class="auth-container">
+        <div class="auth-card">
+            <div class="auth-header">
+                <i class="fas fa-cloud auth-icon"></i>
+                <h1>注册账号</h1>
+                <p class="auth-subtitle">创建您的云盘账号，免费获得 1GB 空间</p>
+            </div>
+            
+            {% if error %}
+            <div class="auth-error">
+                <i class="fas fa-exclamation-circle"></i>
+                {{ error }}
+            </div>
+            {% endif %}
+            
+            <form class="auth-form" method="POST" action="/register">
+                <div class="form-group">
+                    <label for="username">
+                        <i class="fas fa-user"></i>
+                        用户名
+                    </label>
+                    <input type="text" id="username" name="username" class="form-input" placeholder="3-20位字母、数字、下划线或中文" required>
+                    <small class="form-hint">支持字母、数字、下划线和中文</small>
+                </div>
+                
+                <div class="form-group">
+                    <label for="password">
+                        <i class="fas fa-lock"></i>
+                        密码
+                    </label>
+                    <input type="password" id="password" name="password" class="form-input" placeholder="至少6位字符" required>
+                </div>
+                
+                <div class="form-group">
+                    <label for="confirm_password">
+                        <i class="fas fa-lock"></i>
+                        确认密码
+                    </label>
+                    <input type="password" id="confirm_password" name="confirm_password" class="form-input" placeholder="再次输入密码" required>
+                </div>
+                
+                <button type="submit" class="btn btn-primary btn-block">
+                    <i class="fas fa-user-plus"></i>
+                    注册账号
+                </button>
+            </form>
+            
+            <div class="auth-footer">
+                <p>已有账号？<a href="/login" class="auth-link">立即登录</a></p>
+            </div>
+        </div>
+        
+        <div class="auth-features">
+            <div class="feature-item">
+                <i class="fas fa-shield-alt feature-icon"></i>
+                <h3>安全存储</h3>
+                <p>每个用户独立空间，数据安全隔离</p>
+            </div>
+            <div class="feature-item">
+                <i class="fas fa-hdd feature-icon"></i>
+                <h3>1GB 空间</h3>
+                <p>免费享受 1GB 云端存储空间</p>
+            </div>
+            <div class="feature-item">
+                <i class="fas fa-bolt feature-icon"></i>
+                <h3>快速上传</h3>
+                <p>支持拖拽上传，大文件也能快速传输</p>
+            </div>
+        </div>
+    </div>
+</body>
+</html>