Update app.py

app.py

@@ -3,24 +3,28 @@ import time
 import threading
 import requests
 import logging
+import secrets
+from functools import wraps
 from datetime import datetime
-from flask import Flask, render_template_string, request, jsonify
+from flask import Flask, render_template_string, request, jsonify, session, redirect, url_for
 from flask_sqlalchemy import SQLAlchemy
 
 # ================= 配置区域 =================
-# 优先从环境变量获取数据库连接字符串 (适配 Docker)
-# 如果没有环境变量，则使用默认值 (请修改下方的默认值)
 DEFAULT_DB_URI = 'postgresql://postgres:password@192.168.1.10:5432/alist_sync'
 DB_URI = os.environ.get('DB_URI', DEFAULT_DB_URI)
 
+# 兼容性修复
+if DB_URI and DB_URI.startswith("postgres://"):
+    DB_URI = DB_URI.replace("postgres://", "postgresql://", 1)
+
 PORT = int(os.environ.get('PORT', 5000))
 # ===========================================
 
-# 初始化
 app = Flask(__name__)
+app.secret_key = os.environ.get('SECRET_KEY', secrets.token_hex(16))
 app.config['SQLALCHEMY_DATABASE_URI'] = DB_URI
 app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
-app.config['SQLALCHEMY_ENGINE_OPTIONS'] = {'pool_pre_ping': True} # 自动检测断开的连接
+app.config['SQLALCHEMY_ENGINE_OPTIONS'] = {'pool_pre_ping': True}
 
 db = SQLAlchemy(app)
 logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(message)s')
@@ -33,10 +37,11 @@ class AppConfig(db.Model):
     url = db.Column(db.String(255), default="http://localhost:5244")
     username = db.Column(db.String(255), default="admin")
     password = db.Column(db.String(255), default="")
-    path1 = db.Column(db.String(500), default="") # 源路径
-    path2 = db.Column(db.String(500), default="") # 目标路径
-    interval = db.Column(db.Integer, default=60)  # 分钟
+    path1 = db.Column(db.String(500), default="")
+    path2 = db.Column(db.String(500), default="")
+    interval = db.Column(db.Integer, default=60)
     auto_sync = db.Column(db.Boolean, default=False)
+    web_password = db.Column(db.String(255), default="123456")
 
 class AppLog(db.Model):
     __tablename__ = 'logs'
@@ -44,22 +49,29 @@ class AppLog(db.Model):
     timestamp = db.Column(db.DateTime, default=datetime.now)
     message = db.Column(db.Text)
 
-# --- 工具函数 ---
+# --- 装饰器与逻辑 ---
+def login_required(f):
+    @wraps(f)
+    def decorated_function(*args, **kwargs):
+        if 'logged_in' not in session:
+            return redirect(url_for('login'))
+        return f(*args, **kwargs)
+    return decorated_function
+
 def add_log(msg):
-    """写入日志到数据库 (线程安全)"""
-    print(f"[系统日志] {msg}")
+    print(f"[Log] {msg}")
     try:
         with app.app_context():
             log = AppLog(message=str(msg), timestamp=datetime.now())
             db.session.add(log)
             db.session.commit()
-            # 清理旧日志 (保留最近500条)
-            last_id = db.session.query(db.func.max(AppLog.id)).scalar()
-            if last_id and last_id > 1000:
-                AppLog.query.filter(AppLog.id < (last_id - 500)).delete()
+            # 自动清理日志
+            last = db.session.query(db.func.max(AppLog.id)).scalar()
+            if last and last > 1000:
+                AppLog.query.filter(AppLog.id < (last - 500)).delete()
                 db.session.commit()
-    except Exception as e:
-        print(f"日志写入失败: {e}")
+    except:
+        pass
 
 def get_token(base_url, username, password):
     try:
@@ -72,17 +84,15 @@ def get_token(base_url, username, password):
     return None
 
 def list_files(base_url, token, path):
-    files = []
     try:
         res = requests.post(f"{base_url.rstrip('/')}/api/fs/list", 
                            headers={'Authorization': token},
                            json={"path": path, "password": "", "page": 1, "per_page": 0, "refresh": True}, timeout=30)
         if res.status_code == 200:
-            data = res.json().get('data', {}).get('content', [])
-            if data: files = data
+            return res.json().get('data', {}).get('content', [])
     except Exception as e:
-        add_log(f"获取列表失败: {path} - {e}")
-    return files
+        add_log(f"获取列表失败: {e}")
+    return []
 
 def copy_files_api(base_url, token, src_dir, dst_dir, file_names):
     try:
@@ -90,168 +100,431 @@ def copy_files_api(base_url, token, src_dir, dst_dir, file_names):
                            headers={'Authorization': token},
                            json={"src_dir": src_dir, "dst_dir": dst_dir, "names": file_names}, timeout=30)
         return res.json()
-    except Exception as e:
-        return {"code": 500, "message": str(e)}
+    except:
+        return {"code": 500}
 
-# --- 后台守护线程 ---
+# --- 后台任务 ---
 def background_worker():
-    """后台执行自动同步任务"""
-    add_log("✅ 后台守护线程已启动")
     while True:
         try:
             with app.app_context():
                 cfg = AppConfig.query.first()
-                if not cfg: # 初始化配���
-                    cfg = AppConfig()
-                    db.session.add(cfg)
+                if not cfg:
+                    db.session.add(AppConfig(web_password="123456"))
                     db.session.commit()
-                
-                if not cfg.auto_sync:
-                    time.sleep(10)
                     continue
                 
-                # 开始任务
-                interval = cfg.interval if cfg.interval > 0 else 60
-                add_log(f"⏳ 开始执行定时同步任务 (间隔: {interval}分钟)...")
-                
-                token = get_token(cfg.url, cfg.username, cfg.password)
-                if token:
-                    src_list = list_files(cfg.url, token, cfg.path1)
-                    dst_list = list_files(cfg.url, token, cfg.path2)
-                    
-                    if src_list:
-                        dst_names = {f['name'] for f in dst_list}
-                        missing_files = [item['name'] for item in src_list if item['name'] not in dst_names]
-                        
-                        if missing_files:
-                            add_log(f"发现 {len(missing_files)} 个缺失文件，开始推送任务...")
-                            # 分批处理，每批20个
-                            batch_size = 20
-                            for i in range(0, len(missing_files), batch_size):
-                                batch = missing_files[i:i+batch_size]
-                                res = copy_files_api(cfg.url, token, cfg.path1, cfg.path2, batch)
-                                if res.get('code') == 200:
-                                    add_log(f"✅ 指令发送成功: {batch}")
-                                else:
-                                    add_log(f"❌ 指令发送失败: {res.get('message')}")
-                        else:
-                            add_log("无差异文件，无需同步")
-                
-                add_log(f"💤 任务结束，休眠 {interval} 分钟")
-                time.sleep(interval * 60)
-
+                if cfg.auto_sync:
+                    interval = max(1, cfg.interval)
+                    token = get_token(cfg.url, cfg.username, cfg.password)
+                    if token:
+                        src = list_files(cfg.url, token, cfg.path1)
+                        dst = list_files(cfg.url, token, cfg.path2)
+                        if src:
+                            dst_names = {f['name'] for f in dst}
+                            missing = [i['name'] for i in src if i['name'] not in dst_names]
+                            if missing:
+                                add_log(f"自动同步: 发现 {len(missing)} 个文件，开始复制")
+                                for i in range(0, len(missing), 20):
+                                    copy_files_api(cfg.url, token, cfg.path1, cfg.path2, missing[i:i+20])
+                    time.sleep(interval * 60)
+                else:
+                    time.sleep(10)
         except Exception as e:
-            add_log(f"❌ 后台线程异常: {e}")
+            print(f"后台错误: {e}")
             time.sleep(60)
 
-# --- Web 路由 ---
-HTML_TEMPLATE = """
-<!DOCTYPE html>
-<html lang="zh-CN">
+# ==========================================
+# Material 3 风格前端模板
+# ==========================================
+
+# 通用头部，包含 Material Web 组件加载
+HEAD_COMMON = """
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Alist 自动同步 (PostgreSQL版)</title>
-    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
+    <title>Alist Sync Panel</title>
+    <!-- Roboto Font & Icons -->
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" rel="stylesheet">
+    
+    <!-- Material Web Components (ESM) -->
+    <script type="importmap">
+      {
+        "imports": {
+          "@material/web/": "https://esm.run/@material/web/"
+        }
+      }
+    </script>
+    <script type="module">
+      import '@material/web/all.js';
+      import {styles as typescaleStyles} from '@material/web/typography/md-typescale-styles.js';
+      document.adoptedStyleSheets.push(typescaleStyles.styleSheet);
+    </script>
+
     <style>
-        body { background: #f4f7f6; padding-top: 30px; }
-        .log-box { height: 400px; overflow-y: scroll; background: #1e1e1e; color: #00ff00; padding: 10px; font-family: 'Consolas', monospace; font-size: 13px; border-radius: 5px; }
+        :root {
+            /* M3 Color Tokens (Baseline Purple) */
+            --md-sys-color-primary: #6750A4;
+            --md-sys-color-on-primary: #FFFFFF;
+            --md-sys-color-primary-container: #EADDFF;
+            --md-sys-color-on-primary-container: #21005D;
+            --md-sys-color-secondary: #625B71;
+            --md-sys-color-surface: #FEF7FF;
+            --md-sys-color-surface-container: #F3EDF7;
+            --md-sys-color-on-surface: #1D1B20;
+            --md-sys-color-outline: #79747E;
+            --md-sys-color-error: #B3261E;
+            
+            --md-ref-typeface-plain: 'Roboto', sans-serif;
+        }
+        
+        body {
+            font-family: var(--md-ref-typeface-plain);
+            background-color: var(--md-sys-color-surface);
+            color: var(--md-sys-color-on-surface);
+            margin: 0;
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+            height: 100vh;
+            overflow: hidden;
+        }
+        
+        /* Utilities */
+        .d-flex { display: flex; }
+        .flex-column { flex-direction: column; }
+        .align-center { align-items: center; }
+        .justify-center { justify_content: center; }
+        .gap-1 { gap: 8px; }
+        .gap-2 { gap: 16px; }
+        .w-100 { width: 100%; }
+        .mt-2 { margin-top: 16px; }
+        
+        /* Card Style using CSS (Lightweight) */
+        .m3-card {
+            background: var(--md-sys-color-surface-container);
+            border-radius: 16px;
+            padding: 24px;
+            box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
+        }
+        
+        /* Scrollbar */
+        ::-webkit-scrollbar { width: 8px; height: 8px; }
+        ::-webkit-scrollbar-track { background: transparent; }
+        ::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
+        ::-webkit-scrollbar-thumb:hover { background: #aaa; }
     </style>
 </head>
+"""
+
+LOGIN_HTML = HEAD_COMMON + """
 <body>
-<div class="container">
-    <div class="row">
-        <div class="col-lg-8 offset-lg-2">
-            <div class="card shadow">
-                <div class="card-header bg-dark text-white d-flex justify-content-between">
-                    <h5 class="mb-0">Alist 增量同步控制台</h5>
-                    <span class="badge bg-info">DB: PostgreSQL/MySQL</span>
+    <div style="display:flex; justify-content:center; align-items:center; height:100%; width:100%;">
+        <div class="m3-card" style="width: 100%; max-width: 400px; display:flex; flex-direction:column; gap:24px;">
+            <div style="text-align: center;">
+                <span class="material-symbols-outlined" style="font-size: 48px; color: var(--md-sys-color-primary);">sync_lock</span>
+                <h1 class="md-typescale-headline-small" style="margin: 8px 0;">Alist Sync</h1>
+                <p class="md-typescale-body-medium" style="color: var(--md-sys-color-secondary); margin:0;">请输入面板访问密码</p>
+            </div>
+
+            {% if error %}
+            <div style="color: var(--md-sys-color-error); background: #f9dedc; padding: 10px; border-radius: 8px; font-size: 14px; display:flex; align-items:center; gap:8px;">
+                <span class="material-symbols-outlined" style="font-size:18px;">error</span> {{ error }}
+            </div>
+            {% endif %}
+
+            <form method="post" style="display:flex; flex-direction:column; gap:16px;">
+                <md-outlined-text-field 
+                    label="Password" 
+                    type="password" 
+                    name="password" 
+                    required
+                    style="width: 100%;">
+                    <md-icon slot="leading-icon">key</md-icon>
+                </md-outlined-text-field>
+                
+                <md-filled-button type="submit" style="width: 100%;">
+                    登 录
+                </md-filled-button>
+            </form>
+            
+            <div style="text-align:center;">
+                <span class="md-typescale-label-small" style="color: var(--md-sys-color-outline);">Default: 123456</span>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
+"""
+
+INDEX_HTML = HEAD_COMMON + """
+<body style="overflow-y: auto;">
+    <!-- App Bar -->
+    <header style="background: var(--md-sys-color-surface-container); padding: 16px 24px; display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; z-index:1000; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
+        <div class="d-flex align-center gap-2">
+            <span class="material-symbols-outlined" style="color: var(--md-sys-color-primary); font-size: 28px;">cloud_sync</span>
+            <span class="md-typescale-title-large">Alist Sync Panel</span>
+        </div>
+        <div>
+            <md-text-button href="/logout" onclick="window.location.href='/logout'">
+                <md-icon slot="icon">logout</md-icon>
+                退出
+            </md-text-button>
+        </div>
+    </header>
+
+    <main style="padding: 24px; max-width: 1200px; margin: 0 auto; width: 100%; box-sizing: border-box; display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 24px;">
+        
+        <!-- Config Card -->
+        <div class="m3-card" style="grid-column: span 2;">
+            <div class="d-flex align-center gap-2" style="margin-bottom: 24px;">
+                <md-icon style="color: var(--md-sys-color-primary);">settings</md-icon>
+                <span class="md-typescale-title-medium">同步配置</span>
+            </div>
+            
+            <form id="configForm" style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
+                <!-- Full Width -->
+                <md-outlined-text-field label="Alist URL" id="url" style="grid-column: span 2;">
+                    <md-icon slot="leading-icon">link</md-icon>
+                </md-outlined-text-field>
+
+                <!-- Half Width -->
+                <md-outlined-text-field label="Username" id="username">
+                    <md-icon slot="leading-icon">person</md-icon>
+                </md-outlined-text-field>
+
+                <md-outlined-text-field label="Password" id="password" type="password">
+                    <md-icon slot="leading-icon">lock</md-icon>
+                </md-outlined-text-field>
+                
+                <div style="grid-column: span 2; height: 1px; background: var(--md-sys-color-outline); opacity: 0.2; margin: 8px 0;"></div>
+
+                <md-outlined-text-field label="Source Path (源路径)" id="path1" placeholder="/阿里云盘/Video">
+                    <md-icon slot="leading-icon">folder_open</md-icon>
+                </md-outlined-text-field>
+
+                <md-outlined-text-field label="Target Path (目标路径)" id="path2" placeholder="/本地存储/Video">
+                    <md-icon slot="leading-icon">save_alt</md-icon>
+                </md-outlined-text-field>
+
+                <div class="d-flex align-center gap-2" style="grid-column: span 2; margin-top: 16px; background: rgba(0,0,0,0.03); padding: 16px; border-radius: 12px; justify-content: space-between;">
+                    <div class="d-flex align-center gap-2">
+                         <md-outlined-text-field label="间隔 (分钟)" id="interval" type="number" style="width: 120px;" value="60"></md-outlined-text-field>
+                         
+                         <label style="display:flex; align-items:center; gap:12px; cursor:pointer;">
+                            <md-switch id="auto_sync" icons></md-switch>
+                            <span class="md-typescale-body-large">开启后台自动同步</span>
+                         </label>
+                    </div>
+                    
+                    <md-filled-button type="button" id="saveBtn">
+                        <md-icon slot="icon">save</md-icon>
+                        保存并应用
+                    </md-filled-button>
                 </div>
-                <div class="card-body">
-                    <form id="cfgForm">
-                        <div class="row g-3">
-                            <div class="col-md-4"><label class="form-label">Alist URL</label><input type="text" class="form-control" name="url"></div>
-                            <div class="col-md-4"><label class="form-label">用户名</label><input type="text" class="form-control" name="username"></div>
-                            <div class="col-md-4"><label class="form-label">密码</label><input type="password" class="form-control" name="password"></div>
-                            <div class="col-12"><hr></div>
-                            <div class="col-md-6"><label class="form-label">源路径 (Source)</label><input type="text" class="form-control" name="path1" placeholder="/阿里云盘/电影"></div>
-                            <div class="col-md-6"><label class="form-label">目标路径 (Target)</label><input type="text" class="form-control" name="path2" placeholder="/本地存储/电影"></div>
-                            <div class="col-md-6"><label class="form-label">同步间隔 (分钟)</label><input type="number" class="form-control" name="interval"></div>
-                            <div class="col-md-6 d-flex align-items-end">
-                                <div class="form-check form-switch mb-2">
-                                    <input class="form-check-input" type="checkbox" id="auto_sync" name="auto_sync">
-                                    <label class="form-check-label fw-bold" for="auto_sync">开启后台自动同步</label>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="mt-4 text-end">
-                            <button type="button" class="btn btn-success" onclick="saveConfig()">💾 保存配置并应用</button>
-                        </div>
-                    </form>
+            </form>
+        </div>
+
+        <!-- Status & Security Card -->
+        <div class="d-flex flex-column gap-2">
+            <!-- Status -->
+            <div class="m3-card" style="flex: 1;">
+                <div class="d-flex align-center gap-2" style="margin-bottom: 16px;">
+                    <md-icon style="color: var(--md-sys-color-primary);">analytics</md-icon>
+                    <span class="md-typescale-title-medium">运行状态</span>
+                </div>
+                <div style="display:flex; flex-direction:column; align-items:center; justify-content:center; height: 120px;">
+                    <div id="status-indicator" style="display:flex; align-items:center; gap:8px; margin-bottom:8px;">
+                         <md-icon id="status-icon" style="font-size: 48px;">stop_circle</md-icon>
+                    </div>
+                    <span id="status-text" class="md-typescale-headline-small">已停止</span>
                 </div>
             </div>
 
-            <div class="card shadow mt-4">
-                <div class="card-header bg-secondary text-white">
-                    运行日志 <button class="btn btn-sm btn-light float-end" onclick="loadLogs()">刷新</button>
+            <!-- Security -->
+            <div class="m3-card">
+                 <div class="d-flex align-center gap-2" style="margin-bottom: 16px;">
+                    <md-icon style="color: var(--md-sys-color-primary);">security</md-icon>
+                    <span class="md-typescale-title-medium">修改面板密码</span>
+                </div>
+                <div class="d-flex gap-2">
+                    <md-outlined-text-field label="新密码" id="new_pass" type="password" style="flex:1;"></md-outlined-text-field>
+                    <md-tonal-button id="changePassBtn">
+                        修改
+                    </md-tonal-button>
                 </div>
-                <div class="card-body p-0">
-                    <div class="log-box" id="logContainer">加载中...</div>
+            </div>
+        </div>
+
+        <!-- Logs Card -->
+        <div class="m3-card" style="grid-column: span 2; display: flex; flex-direction: column; height: 500px;">
+             <div class="d-flex align-center justify-between" style="margin-bottom: 16px; justify-content: space-between;">
+                <div class="d-flex align-center gap-2">
+                    <md-icon style="color: var(--md-sys-color-primary);">terminal</md-icon>
+                    <span class="md-typescale-title-medium">系统日志</span>
                 </div>
+                <md-icon-button id="refreshLogBtn">
+                    <md-icon>refresh</md-icon>
+                </md-icon-button>
+            </div>
+            <div id="logContainer" style="flex: 1; background: #1e1e1e; border-radius: 8px; padding: 16px; overflow-y: auto; font-family: 'Roboto Mono', monospace; font-size: 13px; color: #00e676;">
+                加载中...
             </div>
         </div>
+    </main>
+    
+    <!-- Toast Notification -->
+    <div id="toast" style="position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--md-sys-color-on-surface); color: var(--md-sys-color-surface); padding: 12px 24px; border-radius: 24px; opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 2000; box-shadow: 0 4px 8px rgba(0,0,0,0.2);">
+        Notification
     </div>
-</div>
-<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
-<script>
-    function loadData() {
-        $.get('/api/config', function(res) {
-            $('input[name="url"]').val(res.url);
-            $('input[name="username"]').val(res.username);
-            $('input[name="password"]').val(res.password);
-            $('input[name="path1"]').val(res.path1);
-            $('input[name="path2"]').val(res.path2);
-            $('input[name="interval"]').val(res.interval);
-            $('#auto_sync').prop('checked', res.auto_sync);
+
+    <script>
+        // Helper for Toast
+        function showToast(msg) {
+            const t = document.getElementById('toast');
+            t.textContent = msg;
+            t.style.opacity = '1';
+            setTimeout(() => t.style.opacity = '0', 3000);
+        }
+
+        // API Helpers
+        async function fetchAPI(url, method='GET', data=null) {
+            const opts = { method: method, headers: {'Content-Type': 'application/json'} };
+            if (data) opts.body = JSON.stringify(data);
+            const res = await fetch(url, opts);
+            return res.json();
+        }
+
+        // Load Data
+        async function loadConfig() {
+            try {
+                const data = await fetchAPI('/api/config');
+                
+                // Populate Fields
+                document.getElementById('url').value = data.url;
+                document.getElementById('username').value = data.username;
+                document.getElementById('password').value = data.password;
+                document.getElementById('path1').value = data.path1;
+                document.getElementById('path2').value = data.path2;
+                document.getElementById('interval').value = data.interval;
+                document.getElementById('auto_sync').selected = data.auto_sync;
+
+                updateStatusUI(data.auto_sync);
+            } catch(e) {
+                console.error(e);
+            }
+        }
+
+        function updateStatusUI(isRunning) {
+            const icon = document.getElementById('status-icon');
+            const text = document.getElementById('status-text');
+            
+            if (isRunning) {
+                icon.textContent = 'sync';
+                icon.style.color = '#00c853'; // Green
+                icon.style.animation = 'spin 2s linear infinite';
+                text.textContent = '后台运行中';
+                text.style.color = '#00c853';
+            } else {
+                icon.textContent = 'pause_circle';
+                icon.style.color = '#b00020'; // Red
+                icon.style.animation = 'none';
+                text.textContent = '已停止';
+                text.style.color = '#b00020';
+            }
+        }
+
+        // Events
+        document.getElementById('saveBtn').addEventListener('click', async () => {
+            const payload = {
+                url: document.getElementById('url').value,
+                username: document.getElementById('username').value,
+                password: document.getElementById('password').value,
+                path1: document.getElementById('path1').value,
+                path2: document.getElementById('path2').value,
+                interval: parseInt(document.getElementById('interval').value),
+                auto_sync: document.getElementById('auto_sync').selected
+            };
+
+            await fetchAPI('/api/config', 'POST', payload);
+            showToast('配置已保存并应用');
+            updateStatusUI(payload.auto_sync);
+            loadLogs();
         });
-        loadLogs();
-    }
-    function saveConfig() {
-        const data = {
-            url: $('input[name="url"]').val(),
-            username: $('input[name="username"]').val(),
-            password: $('input[name="password"]').val(),
-            path1: $('input[name="path1"]').val(),
-            path2: $('input[name="path2"]').val(),
-            interval: parseInt($('input[name="interval"]').val()),
-            auto_sync: $('#auto_sync').is(':checked')
-        };
-        $.ajax({ url: '/api/config', type: 'POST', contentType: 'application/json', data: JSON.stringify(data), 
-            success: function() { alert('保存成功！后台将在下一周期应用新配置。'); loadLogs(); }});
-    }
-    function loadLogs() {
-        $.get('/api/logs', function(res) {
-            let html = '';
-            res.forEach(l => { html += `<div>[${l.timestamp}] ${l.message}</div>`; });
-            $('#logContainer').html(html);
+
+        document.getElementById('changePassBtn').addEventListener('click', async () => {
+            const pass = document.getElementById('new_pass').value;
+            if(!pass) return showToast('密码不能为空');
+            const res = await fetch('/api/change_pass', {
+                method: 'POST',
+                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
+                body: 'password=' + encodeURIComponent(pass)
+            });
+            const json = await res.json();
+            showToast(json.msg);
+            document.getElementById('new_pass').value = '';
         });
-    }
-    loadData();
-    setInterval(loadLogs, 10000);
-</script>
+
+        async function loadLogs() {
+            const logs = await fetchAPI('/api/logs');
+            const container = document.getElementById('logContainer');
+            container.innerHTML = logs.map(l => 
+                `<div style="margin-bottom:4px; border-bottom: 1px solid #333; padding-bottom: 2px;">
+                    <span style="color:#888;">[${l.timestamp}]</span> ${l.message}
+                 </div>`
+            ).join('');
+        }
+
+        document.getElementById('refreshLogBtn').addEventListener('click', loadLogs);
+
+        // Add CSS Animation for spinner
+        const styleSheet = document.createElement("style");
+        styleSheet.innerText = `@keyframes spin { 100% { transform: rotate(360deg); } }`;
+        document.head.appendChild(styleSheet);
+
+        // Init
+        loadConfig();
+        loadLogs();
+        setInterval(loadLogs, 10000);
+    </script>
 </body>
 </html>
 """
 
+# --- 路由逻辑 (保持不变) ---
+@app.route('/login', methods=['GET', 'POST'])
+def login():
+    error = None
+    if request.method == 'POST':
+        input_pass = request.form.get('password')
+        with app.app_context():
+            cfg = AppConfig.query.first()
+            real_pass = cfg.web_password if cfg else "123456"
+        
+        if input_pass == real_pass:
+            session['logged_in'] = True
+            return redirect(url_for('index'))
+        else:
+            error = "密码错误 (默认为 123456)"
+    return render_template_string(LOGIN_HTML, error=error)
+
+@app.route('/logout')
+def logout():
+    session.pop('logged_in', None)
+    return redirect(url_for('login'))
+
 @app.route('/')
+@login_required
 def index():
-    return render_template_string(HTML_TEMPLATE)
+    return render_template_string(INDEX_HTML)
 
 @app.route('/api/config', methods=['GET', 'POST'])
+@login_required
 def api_config():
     cfg = AppConfig.query.first()
     if not cfg:
-        cfg = AppConfig()
+        cfg = AppConfig(web_password="123456")
         db.session.add(cfg)
         db.session.commit()
 
@@ -263,11 +536,8 @@ def api_config():
         cfg.path1 = data.get('path1')
         cfg.path2 = data.get('path2')
         cfg.interval = data.get('interval')
-        status_change = data.get('auto_sync') != cfg.auto_sync
         cfg.auto_sync = data.get('auto_sync')
         db.session.commit()
-        if status_change:
-            add_log(f"用户手动{'开启' if cfg.auto_sync else '关闭'}了自动同步")
         return jsonify({'success': True})
     
     return jsonify({
@@ -276,25 +546,29 @@ def api_config():
         'interval': cfg.interval, 'auto_sync': cfg.auto_sync
     })
 
+@app.route('/api/change_pass', methods=['POST'])
+@login_required
+def api_change_pass():
+    new_pass = request.form.get('password')
+    if new_pass:
+        cfg = AppConfig.query.first()
+        cfg.web_password = new_pass
+        db.session.commit()
+        return jsonify({'msg': '面板密码已修改'})
+    return jsonify({'msg': '无效密码'})
+
 @app.route('/api/logs')
+@login_required
 def api_logs():
-    logs = AppLog.query.order_by(AppLog.timestamp.desc()).limit(50).all()
-    return jsonify([{'timestamp': l.timestamp.strftime("%m-%d %H:%M:%S"), 'message': l.message} for l in logs])
+    logs = AppLog.query.order_by(AppLog.timestamp.desc()).limit(100).all()
+    return jsonify([{'timestamp': l.timestamp.strftime("%H:%M:%S"), 'message': l.message} for l in logs])
 
-# --- 启动逻辑 ---
 if __name__ == '__main__':
-    # 等待数据库准备好 (针对 Docker compose 启动慢的情况)
     with app.app_context():
         try:
             db.create_all()
-            print("✅ 数据库连接成功，表结构已就绪。")
-        except Exception as e:
-            print(f"❌ 数据库连接失败，请检查配置: {e}")
-            # 不退出，让用户看报错信息
+        except: pass
     
-    # 启动后台线程
     t = threading.Thread(target=background_worker, daemon=True)
     t.start()
-    
-    # 启动 Flask
     app.run(host='0.0.0.0', port=PORT, debug=False, use_reloader=False)