重构Cookie监控系统：添加Web管理后台、Vue3前端界面、Cookie Cloud参数支持、5秒倒计时自动刷新、专业UI配色

backend/app.py

@@ -0,0 +1,52 @@
+"""
+Cookie监控管理系统 - 后台服务
+"""
+from flask import Flask, jsonify
+from flask_cors import CORS
+import os
+
+# 导入配置和数据库
+from config.settings import Config
+from models.database import db
+from routes.users import user_bp
+from routes.websites import website_bp
+from routes.cookies import cookie_bp
+from routes.detections import detection_bp
+from routes.notifications import notification_bp
+from routes.admin import admin_bp
+
+
+def create_app(config_class=Config):
+    """创建Flask应用"""
+    app = Flask(__name__)
+    app.config.from_object(config_class)
+
+    # 配置CORS（允许session cookie）
+    CORS(app, supports_credentials=True)
+
+    # 初始化数据库
+    db.init_app(app)
+
+    # 注册蓝图
+    app.register_blueprint(admin_bp)
+    app.register_blueprint(user_bp, url_prefix='/api/users')
+    app.register_blueprint(website_bp, url_prefix='/api/websites')
+    app.register_blueprint(cookie_bp, url_prefix='/api/cookies')
+    app.register_blueprint(detection_bp, url_prefix='/api/detections')
+    app.register_blueprint(notification_bp, url_prefix='/api/notifications')
+
+    # 健康检查接口
+    @app.route('/api/health', methods=['GET'])
+    def health_check():
+        return jsonify({'status': 'ok', 'message': '服务运行中'})
+
+    # 创建数据库表
+    with app.app_context():
+        db.create_all()
+
+    return app
+
+
+if __name__ == '__main__':
+    app = create_app()
+    app.run(host='0.0.0.0', port=5000, debug=True)

backend/config/settings.py

@@ -0,0 +1,12 @@
+"""
+配置文件
+"""
+import os
+
+class Config:
+    """基础配置"""
+    SECRET_KEY = os.environ.get('SECRET_KEY') or 'cookie-monitor-secret-key'
+    SQLALCHEMY_DATABASE_URI = os.environ.get('DATABASE_URL') or 'sqlite:///cookie_monitor.db'
+    SQLALCHEMY_TRACK_MODIFICATIONS = False
+    JSON_AS_ASCII = False
+    ADMIN_PASSWORD = os.environ.get('ADMIN_PASSWORD') or 'admin'

backend/models/database.py

@@ -0,0 +1,92 @@
+"""
+数据库模型定义
+"""
+from flask_sqlalchemy import SQLAlchemy
+from datetime import datetime
+
+db = SQLAlchemy()
+
+
+class User(db.Model):
+    """用户表"""
+    __tablename__ = 'users'
+
+    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
+    name = db.Column(db.String(100), nullable=False)
+    iyuu_token = db.Column(db.String(255))
+    max_fail_count = db.Column(db.Integer, default=3)
+    cookie_cloud_uuid = db.Column(db.String(255))
+    cookie_cloud_password = db.Column(db.String(255))
+    cookie_cloud_api_url = db.Column(db.String(255))
+    created_at = db.Column(db.DateTime, default=datetime.utcnow)
+    updated_at = db.Column(db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
+
+    # 关联关系
+    websites = db.relationship('Website', backref='user', lazy=True, cascade='all, delete-orphan')
+    notifications = db.relationship('Notification', backref='user', lazy=True)
+
+
+class Website(db.Model):
+    """网站表"""
+    __tablename__ = 'websites'
+
+    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
+    user_id = db.Column(db.Integer, db.ForeignKey('users.id'), nullable=False)
+    name = db.Column(db.String(100), nullable=False)
+    url = db.Column(db.String(255), nullable=False)
+    login_check_selector = db.Column(db.String(255))
+    success_text = db.Column(db.String(255))
+    interval_minutes = db.Column(db.Integer, default=30, name='interval')
+    status = db.Column(db.Integer, default=1)
+    created_at = db.Column(db.DateTime, default=datetime.utcnow)
+    updated_at = db.Column(db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
+
+    # 关联关系
+    cookies = db.relationship('Cookie', backref='website', lazy=True, cascade='all, delete-orphan')
+    detections = db.relationship('Detection', backref='website', lazy=True, cascade='all, delete-orphan')
+    notifications = db.relationship('Notification', backref='website', lazy=True)
+
+
+class Cookie(db.Model):
+    """Cookie表"""
+    __tablename__ = 'cookies'
+
+    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
+    website_id = db.Column(db.Integer, db.ForeignKey('websites.id'), nullable=False)
+    name = db.Column(db.String(100), nullable=False)
+    value = db.Column(db.Text, nullable=False)
+    domain = db.Column(db.String(255), nullable=False)
+    path = db.Column(db.String(255), default='/')
+    expiry = db.Column(db.DateTime)
+    secure = db.Column(db.Integer, default=0)
+    http_only = db.Column(db.Integer, default=0)
+    created_at = db.Column(db.DateTime, default=datetime.utcnow)
+    updated_at = db.Column(db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
+
+
+class Detection(db.Model):
+    """检测结果表"""
+    __tablename__ = 'detections'
+
+    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
+    website_id = db.Column(db.Integer, db.ForeignKey('websites.id'), nullable=False)
+    status = db.Column(db.Integer, nullable=False)
+    response_time = db.Column(db.Float)
+    http_status = db.Column(db.Integer)
+    message = db.Column(db.Text)
+    created_at = db.Column(db.DateTime, default=datetime.utcnow)
+
+
+class Notification(db.Model):
+    """通知表"""
+    __tablename__ = 'notifications'
+
+    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
+    user_id = db.Column(db.Integer, db.ForeignKey('users.id'), nullable=False)
+    website_id = db.Column(db.Integer, db.ForeignKey('websites.id'), nullable=False)
+    title = db.Column(db.String(100), nullable=False)
+    content = db.Column(db.Text, nullable=False)
+    status = db.Column(db.String(20), default='pending')
+    send_time = db.Column(db.DateTime)
+    created_at = db.Column(db.DateTime, default=datetime.utcnow)
+    updated_at = db.Column(db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)

backend/requirements.txt

@@ -0,0 +1,5 @@
+Flask==3.0.0
+Flask-SQLAlchemy==3.1.1
+Flask-CORS==4.0.0
+requests==2.31.0
+DrissionPage==4.1.1.2

backend/routes/admin.py

@@ -0,0 +1,40 @@
+"""
+后台管理路由
+"""
+from flask import Blueprint, render_template, request, jsonify, session
+from config.settings import Config
+
+admin_bp = Blueprint('admin', __name__)
+
+
+@admin_bp.route('/')
+@admin_bp.route('/<path:path>')
+def admin_page(path=None):
+    """管理后台页面"""
+    return render_template('index.html')
+
+
+@admin_bp.route('/api/admin/login', methods=['POST'])
+def admin_login():
+    """后台登录验证"""
+    data = request.json
+    password = data.get('password', '')
+    
+    if password == Config.ADMIN_PASSWORD:
+        session['admin_logged_in'] = True
+        return jsonify({'success': True, 'message': '登录成功'})
+    else:
+        return jsonify({'success': False, 'message': '密码错误'}), 401
+
+
+@admin_bp.route('/api/admin/logout', methods=['POST'])
+def admin_logout():
+    """后台退出登录"""
+    session.pop('admin_logged_in', None)
+    return jsonify({'success': True, 'message': '已退出'})
+
+
+@admin_bp.route('/api/admin/status', methods=['GET'])
+def admin_status():
+    """检查后台登录状态"""
+    return jsonify({'logged_in': session.get('admin_logged_in', False)})

backend/routes/cookies.py

@@ -0,0 +1,114 @@
+"""
+Cookie管理路由
+"""
+from flask import Blueprint, request, jsonify
+from models.database import db, Cookie
+from datetime import datetime
+
+cookie_bp = Blueprint('cookies', __name__)
+
+
+@cookie_bp.route('/websites/<int:website_id>', methods=['GET'])
+def get_cookies(website_id):
+    """获取网站的cookie"""
+    cookies = Cookie.query.filter_by(website_id=website_id).all()
+    return jsonify([cookie.to_dict() for cookie in cookies])
+
+
+@cookie_bp.route('/websites/<int:website_id>', methods=['POST'])
+def create_cookie(website_id):
+    """创建cookie"""
+    data = request.json
+
+    cookie = Cookie(
+        website_id=website_id,
+        name=data.get('name'),
+        value=data.get('value'),
+        domain=data.get('domain'),
+        path=data.get('path', '/'),
+        expiry=datetime.fromisoformat(data.get('expiry')) if data.get('expiry') else None,
+        secure=data.get('secure', 0),
+        http_only=data.get('http_only', 0)
+    )
+
+    db.session.add(cookie)
+    db.session.commit()
+
+    return jsonify(cookie.to_dict()), 201
+
+
+@cookie_bp.route('/<int:cookie_id>', methods=['PUT'])
+def update_cookie(cookie_id):
+    """更新cookie"""
+    cookie = Cookie.query.get_or_404(cookie_id)
+    data = request.json
+
+    cookie.name = data.get('name', cookie.name)
+    cookie.value = data.get('value', cookie.value)
+    cookie.domain = data.get('domain', cookie.domain)
+    cookie.path = data.get('path', cookie.path)
+    cookie.expiry = datetime.fromisoformat(data.get('expiry')) if data.get('expiry') else cookie.expiry
+    cookie.secure = data.get('secure', cookie.secure)
+    cookie.http_only = data.get('http_only', cookie.http_only)
+
+    db.session.commit()
+
+    return jsonify(cookie.to_dict())
+
+
+@cookie_bp.route('/<int:cookie_id>', methods=['DELETE'])
+def delete_cookie(cookie_id):
+    """删除cookie"""
+    cookie = Cookie.query.get_or_404(cookie_id)
+
+    db.session.delete(cookie)
+    db.session.commit()
+
+    return jsonify({'message': 'Cookie已删除'})
+
+
+@cookie_bp.route('/websites/<int:website_id>', methods=['PUT'])
+def batch_update_cookies(website_id):
+    """批量更新网站的cookie"""
+    data = request.json
+    cookies_data = data.get('cookies', [])
+
+    # 删除该网站的所有现有cookie
+    Cookie.query.filter_by(website_id=website_id).delete()
+
+    # 添加新的cookie
+    for cookie_data in cookies_data:
+        cookie = Cookie(
+            website_id=website_id,
+            name=cookie_data.get('name'),
+            value=cookie_data.get('value'),
+            domain=cookie_data.get('domain'),
+            path=cookie_data.get('path', '/'),
+            expiry=datetime.fromisoformat(cookie_data.get('expiry')) if cookie_data.get('expiry') else None,
+            secure=cookie_data.get('secure', 0),
+            http_only=cookie_data.get('http_only', 0)
+        )
+        db.session.add(cookie)
+
+    db.session.commit()
+
+    return jsonify({'message': 'Cookies已批量更新'})
+
+
+# 为Cookie模型添加to_dict方法
+def cookie_to_dict(self):
+    return {
+        'id': self.id,
+        'website_id': self.website_id,
+        'name': self.name,
+        'value': self.value,
+        'domain': self.domain,
+        'path': self.path,
+        'expiry': self.expiry.isoformat() if self.expiry else None,
+        'secure': self.secure,
+        'http_only': self.http_only,
+        'created_at': self.created_at.isoformat() if self.created_at else None,
+        'updated_at': self.updated_at.isoformat() if self.updated_at else None
+    }
+
+Cookie.to_dict = cookie_to_dict

backend/routes/detections.py

@@ -0,0 +1,83 @@
+"""
+检测结果路由
+"""
+from flask import Blueprint, request, jsonify
+from models.database import db, Detection
+
+detection_bp = Blueprint('detections', __name__)
+
+
+@detection_bp.route('/', methods=['GET'])
+def get_detections():
+    """获取检测结果"""
+    website_id = request.args.get('website_id')
+    
+    if website_id:
+        detections = Detection.query.filter_by(website_id=website_id).order_by(Detection.created_at.desc()).all()
+    else:
+        detections = Detection.query.order_by(Detection.created_at.desc()).all()
+    
+    return jsonify([detection.to_dict() for detection in detections])
+
+
+@detection_bp.route('/', methods=['POST'])
+def create_detection():
+    """保存检测结果"""
+    data = request.json
+
+    detection = Detection(
+        website_id=data.get('website_id'),
+        status=data.get('status'),
+        response_time=data.get('response_time'),
+        http_status=data.get('http_status'),
+        message=data.get('message')
+    )
+
+    db.session.add(detection)
+    db.session.commit()
+
+    return jsonify(detection.to_dict()), 201
+
+
+@detection_bp.route('/latest', methods=['GET'])
+def get_latest_detections():
+    """获取每个网站的最新检测结果"""
+    from sqlalchemy import func
+    subquery = db.session.query(
+        Detection.website_id,
+        func.max(Detection.id).label('max_id')
+    ).group_by(Detection.website_id).subquery()
+    
+    detections = db.session.query(Detection).join(
+        subquery,
+        (Detection.website_id == subquery.c.website_id) & 
+        (Detection.id == subquery.c.max_id)
+    ).all()
+    
+    result = {}
+    for d in detections:
+        result[d.website_id] = d.to_dict()
+    
+    return jsonify(result)
+
+
+@detection_bp.route('/<int:detection_id>', methods=['GET'])
+def get_detection(detection_id):
+    """获取单个检测结果"""
+    detection = Detection.query.get_or_404(detection_id)
+    return jsonify(detection.to_dict())
+
+
+# 为Detection模型添加to_dict方法
+def detection_to_dict(self):
+    return {
+        'id': self.id,
+        'website_id': self.website_id,
+        'status': self.status,
+        'response_time': self.response_time,
+        'http_status': self.http_status,
+        'message': self.message,
+        'created_at': self.created_at.isoformat() if self.created_at else None
+    }
+
+Detection.to_dict = detection_to_dict

backend/routes/notifications.py

@@ -0,0 +1,102 @@
+"""
+通知管理路由
+"""
+import requests
+from flask import Blueprint, request, jsonify
+from models.database import db, Notification, User
+from datetime import datetime
+
+notification_bp = Blueprint('notifications', __name__)
+
+
+@notification_bp.route('/', methods=['GET'])
+def get_notifications():
+    """获取通知列表"""
+    user_id = request.args.get('user_id')
+    
+    if user_id:
+        notifications = Notification.query.filter_by(user_id=user_id).order_by(Notification.created_at.desc()).all()
+    else:
+        notifications = Notification.query.order_by(Notification.created_at.desc()).all()
+    
+    return jsonify([notification.to_dict() for notification in notifications])
+
+
+@notification_bp.route('/', methods=['POST'])
+def send_notification():
+    """发送通知"""
+    data = request.json
+
+    user_id = data.get('user_id')
+    website_id = data.get('website_id')
+    title = data.get('title')
+    content = data.get('content')
+
+    # 获取用户的爱语飞飞令牌
+    user = User.query.get_or_404(user_id)
+    
+    if not user.iyuu_token:
+        return jsonify({'message': '用户未配置爱语飞飞令牌'}), 400
+
+    # 发送爱语飞飞通知
+    send_success = _send_iyuu_notification(user.iyuu_token, title, content)
+
+    # 创建通知记录
+    notification = Notification(
+        user_id=user_id,
+        website_id=website_id,
+        title=title,
+        content=content,
+        status='sent' if send_success else 'failed',
+        send_time=datetime.utcnow() if send_success else None
+    )
+
+    db.session.add(notification)
+    db.session.commit()
+
+    return jsonify(notification.to_dict()), 201
+
+
+def _send_iyuu_notification(token, title, content):
+    """通过爱语飞飞发送通知"""
+    try:
+        url = f"https://iyuu.cn/{token}.send"
+        
+        response = requests.post(
+            url,
+            json={
+                'text': title,
+                'desp': content
+            },
+            timeout=10
+        )
+
+        response.raise_for_status()
+        result = response.json()
+
+        if result.get('errcode') == 0:
+            return True
+        else:
+            return False
+
+    except requests.RequestException:
+        return False
+    except Exception:
+        return False
+
+
+# 为Notification模型添加to_dict方法
+def notification_to_dict(self):
+    return {
+        'id': self.id,
+        'user_id': self.user_id,
+        'website_id': self.website_id,
+        'title': self.title,
+        'content': self.content,
+        'status': self.status,
+        'send_time': self.send_time.isoformat() if self.send_time else None,
+        'created_at': self.created_at.isoformat() if self.created_at else None,
+        'updated_at': self.updated_at.isoformat() if self.updated_at else None
+    }
+
+Notification.to_dict = notification_to_dict

backend/routes/users.py

@@ -0,0 +1,78 @@
+"""
+用户管理路由
+"""
+from flask import Blueprint, request, jsonify
+from models.database import db, User
+
+user_bp = Blueprint('users', __name__)
+
+
+@user_bp.route('/', methods=['GET'])
+def get_users():
+    """获取所有用户"""
+    users = User.query.all()
+    return jsonify([user.to_dict() for user in users])
+
+
+@user_bp.route('/', methods=['POST'])
+def create_user():
+    """创建用户"""
+    data = request.json
+    user = User(
+        name=data.get('name'),
+        iyuu_token=data.get('iyuu_token'),
+        max_fail_count=data.get('max_fail_count', 3),
+        cookie_cloud_uuid=data.get('cookie_cloud_uuid'),
+        cookie_cloud_password=data.get('cookie_cloud_password'),
+        cookie_cloud_api_url=data.get('cookie_cloud_api_url')
+    )
+    db.session.add(user)
+    db.session.commit()
+    return jsonify(user.to_dict()), 201
+
+
+@user_bp.route('/<int:user_id>', methods=['GET'])
+def get_user(user_id):
+    """获取单个用户"""
+    user = User.query.get_or_404(user_id)
+    return jsonify(user.to_dict())
+
+
+@user_bp.route('/<int:user_id>', methods=['PUT'])
+def update_user(user_id):
+    """更新用户"""
+    user = User.query.get_or_404(user_id)
+    data = request.json
+    user.name = data.get('name', user.name)
+    user.iyuu_token = data.get('iyuu_token', user.iyuu_token)
+    user.max_fail_count = data.get('max_fail_count', user.max_fail_count)
+    user.cookie_cloud_uuid = data.get('cookie_cloud_uuid', user.cookie_cloud_uuid)
+    user.cookie_cloud_password = data.get('cookie_cloud_password', user.cookie_cloud_password)
+    user.cookie_cloud_api_url = data.get('cookie_cloud_api_url', user.cookie_cloud_api_url)
+    db.session.commit()
+    return jsonify(user.to_dict())
+
+
+@user_bp.route('/<int:user_id>', methods=['DELETE'])
+def delete_user(user_id):
+    """删除用户"""
+    user = User.query.get_or_404(user_id)
+    db.session.delete(user)
+    db.session.commit()
+    return jsonify({'message': '用户已删除'})
+
+
+def user_to_dict(self):
+    return {
+        'id': self.id,
+        'name': self.name,
+        'iyuu_token': self.iyuu_token,
+        'max_fail_count': self.max_fail_count,
+        'cookie_cloud_uuid': self.cookie_cloud_uuid,
+        'cookie_cloud_password': self.cookie_cloud_password,
+        'cookie_cloud_api_url': self.cookie_cloud_api_url,
+        'created_at': self.created_at.isoformat() if self.created_at else None,
+        'updated_at': self.updated_at.isoformat() if self.updated_at else None
+    }
+
+User.to_dict = user_to_dict

backend/routes/websites.py

@@ -0,0 +1,237 @@
+"""
+网站管理路由
+"""
+from flask import Blueprint, request, jsonify
+from models.database import db, Website
+from models.database import Cookie as CookieModel
+import requests as http_requests
+from datetime import datetime
+
+website_bp = Blueprint('websites', __name__)
+
+
+@website_bp.route('/check-network', methods=['GET'])
+def check_all_network():
+    """检测所有网站的网络可达性"""
+    websites = Website.query.all()
+    result = {}
+    
+    for website in websites:
+        try:
+            resp = http_requests.get(website.url, timeout=5, allow_redirects=True)
+            result[website.id] = {
+                'status': resp.status_code,
+                'reachable': resp.status_code < 400,
+                'response_time': resp.elapsed.total_seconds() * 1000
+            }
+        except Exception:
+            result[website.id] = {
+                'status': 0,
+                'reachable': False,
+                'response_time': 0
+            }
+    
+    return jsonify(result)
+
+
+@website_bp.route('/check-login/<int:website_id>', methods=['POST'])
+def check_website_login(website_id):
+    """检查网站登录状态"""
+    from DrissionPage import ChromiumPage, ChromiumOptions
+    
+    website = Website.query.get_or_404(website_id)
+    
+    try:
+        # 获取网站的cookie
+        cookies = CookieModel.query.filter_by(website_id=website_id).all()
+        if not cookies:
+            return jsonify({'success': False, 'message': '没有可用的cookie'})
+        
+        # 初始化浏览器
+        co = ChromiumOptions()
+        co.set_browser_path(r"C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe")
+        co.set_argument('--no-sandbox')
+        co.set_argument('--disable-dev-shm-usage')
+        browser = ChromiumPage(addr_or_opts=co)
+        
+        # 导入cookie
+        for cookie in cookies:
+            cookie_dict = {
+                'name': cookie.name,
+                'value': cookie.value,
+                'domain': cookie.domain,
+                'path': cookie.path
+            }
+            browser.set.cookies(cookie_dict)
+        
+        # 访问网站
+        browser.get(website.url)
+        browser.wait.doc_loaded(timeout=30)
+        
+        import time
+        time.sleep(2)
+        browser.refresh()
+        browser.wait.doc_loaded(timeout=30)
+        time.sleep(2)
+        
+        # 检查登录状态
+        login_success = False
+        check_selector = website.login_check_selector
+        success_text = website.success_text
+        
+        if check_selector:
+            try:
+                element = browser.ele(check_selector, timeout=10)
+                if element:
+                    element_text = element.text or ""
+                    if not success_text:
+                        login_success = True
+                    elif success_text in element_text:
+                        login_success = True
+            except:
+                pass
+        
+        if not login_success and success_text:
+            try:
+                page_text = browser.html or ""
+                if success_text in page_text:
+                    login_success = True
+            except:
+                pass
+        
+        # 如果登录成功，获取最新cookie
+        if login_success:
+            new_cookies = browser.cookies()
+            # 更新cookie
+            CookieModel.query.filter_by(website_id=website_id).delete()
+            for c in new_cookies:
+                new_cookie = CookieModel(
+                    website_id=website_id,
+                    name=c.get('name', ''),
+                    value=c.get('value', ''),
+                    domain=c.get('domain', ''),
+                    path=c.get('path', '/')
+                )
+                db.session.add(new_cookie)
+            
+            # 保存检测结果
+            from models.database import Detection
+            detection = Detection(
+                website_id=website_id,
+                status=1,
+                response_time=0,
+                http_status=200,
+                message='登录验证成功'
+            )
+            db.session.add(detection)
+            db.session.commit()
+            
+            result = {'success': True, 'message': '登录成功'}
+        else:
+            # 保存检测结果
+            from models.database import Detection
+            detection = Detection(
+                website_id=website_id,
+                status=0,
+                response_time=0,
+                http_status=200,
+                message='登录验证失败'
+            )
+            db.session.add(detection)
+            db.session.commit()
+            
+            result = {'success': False, 'message': '登录失败'}
+        
+        browser.quit()
+        return jsonify(result)
+        
+    except Exception as e:
+        return jsonify({'success': False, 'message': f'检测异常: {str(e)}'})
+
+
+@website_bp.route('/', methods=['GET'])
+def get_websites():
+    """获取所有网站"""
+    user_id = request.args.get('user_id')
+    
+    if user_id:
+        websites = Website.query.filter_by(user_id=user_id).all()
+    else:
+        websites = Website.query.all()
+    
+    return jsonify([website.to_dict() for website in websites])
+
+
+@website_bp.route('/', methods=['POST'])
+def create_website():
+    """创建网站"""
+    data = request.json
+
+    website = Website(
+        user_id=data.get('user_id'),
+        name=data.get('name'),
+        url=data.get('url'),
+        login_check_selector=data.get('login_check_selector'),
+        success_text=data.get('success_text'),
+        interval_minutes=data.get('interval_minutes', 30),
+        status=data.get('status', 1)
+    )
+
+    db.session.add(website)
+    db.session.commit()
+
+    return jsonify(website.to_dict()), 201
+
+
+@website_bp.route('/<int:website_id>', methods=['GET'])
+def get_website(website_id):
+    """获取单个网站"""
+    website = Website.query.get_or_404(website_id)
+    return jsonify(website.to_dict())
+
+
+@website_bp.route('/<int:website_id>', methods=['PUT'])
+def update_website(website_id):
+    """更新网站"""
+    website = Website.query.get_or_404(website_id)
+    data = request.json
+
+    website.name = data.get('name', website.name)
+    website.url = data.get('url', website.url)
+    website.login_check_selector = data.get('login_check_selector', website.login_check_selector)
+    website.success_text = data.get('success_text', website.success_text)
+    website.interval_minutes = data.get('interval_minutes', website.interval_minutes)
+    website.status = data.get('status', website.status)
+
+    db.session.commit()
+
+    return jsonify(website.to_dict())
+
+
+@website_bp.route('/<int:website_id>', methods=['DELETE'])
+def delete_website(website_id):
+    """删除网站"""
+    website = Website.query.get_or_404(website_id)
+
+    db.session.delete(website)
+    db.session.commit()
+
+    return jsonify({'message': '网站已删除'})
+
+
+# 为Website模型添加to_dict方法
+def website_to_dict(self):
+    return {
+        'id': self.id,
+        'user_id': self.user_id,
+        'name': self.name,
+        'url': self.url,
+        'login_check_selector': self.login_check_selector,
+        'success_text': self.success_text,
+        'interval_minutes': self.interval_minutes,
+        'status': self.status,
+        'created_at': self.created_at.isoformat() if self.created_at else None,
+        'updated_at': self.updated_at.isoformat() if self.updated_at else None
+    }
+
+Website.to_dict = website_to_dict

backend/static/css/style.css

@@ -0,0 +1,527 @@
+/* Cookie监控管理系统 - 专业版样式 */
+
+:root {
+    --primary-color: #4f6ef7;
+    --primary-dark: #3b5bdb;
+    --primary-light: #e8edff;
+    --success-color: #10b981;
+    --success-light: #d1fae5;
+    --danger-color: #ef4444;
+    --danger-light: #fee2e2;
+    --warning-color: #f59e0b;
+    --warning-light: #fef3c7;
+    --info-color: #6b7280;
+    --info-light: #f3f4f6;
+    --header-bg: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+    --card-bg: #ffffff;
+    --page-bg: #f0f2f5;
+    --text-primary: #1f2937;
+    --text-secondary: #6b7280;
+    --text-light: #9ca3af;
+    --border-color: #e5e7eb;
+    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
+    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
+    --radius: 8px;
+    --radius-lg: 12px;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+    background-color: var(--page-bg);
+    color: var(--text-primary);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.container {
+    min-height: 100vh;
+    background: var(--page-bg);
+}
+
+.el-header {
+    background: var(--header-bg);
+    color: #fff;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 32px;
+    height: 64px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.header-left {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
+.el-header h1 {
+    font-size: 20px;
+    font-weight: 600;
+    letter-spacing: 0.5px;
+    margin: 0;
+    background: linear-gradient(135deg, #fff 0%, #e0e7ff 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.header-right {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.header-right .el-button {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.2);
+    color: rgba(255, 255, 255, 0.9);
+    font-weight: 500;
+    transition: all 0.2s;
+}
+
+.header-right .el-button:hover {
+    background: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.3);
+    color: #fff;
+}
+
+.auto-refresh-indicator {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 13px;
+    padding: 6px 12px;
+    background: rgba(255, 255, 255, 0.08);
+    border-radius: 20px;
+    backdrop-filter: blur(4px);
+}
+
+.rotating-icon {
+    animation: rotate 5s linear infinite;
+    color: var(--primary-color);
+}
+
+.refresh-text {
+    font-size: 13px;
+    font-weight: 500;
+}
+
+@keyframes rotate {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
+.el-main {
+    background: var(--page-bg);
+    padding: 24px 32px;
+    min-height: calc(100vh - 64px);
+}
+
+/* 仪表板样式 */
+.dashboard-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 28px;
+    padding-bottom: 20px;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.dashboard-header h2 {
+    font-size: 24px;
+    font-weight: 700;
+    color: var(--text-primary);
+    margin: 0;
+    letter-spacing: -0.5px;
+}
+
+.dashboard-stats {
+    display: flex;
+    gap: 24px;
+}
+
+.dashboard-stats .el-statistic {
+    padding: 16px 24px;
+    background: var(--card-bg);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-sm);
+    min-width: 140px;
+    text-align: center;
+    transition: all 0.2s;
+}
+
+.dashboard-stats .el-statistic:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+}
+
+.dashboard-stats .el-statistic__title {
+    font-size: 12px;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    font-weight: 600;
+}
+
+.dashboard-stats .el-statistic__content {
+    font-size: 28px;
+    font-weight: 700;
+    color: var(--text-primary);
+}
+
+/* 用户区域卡片 */
+.user-section {
+    background: var(--card-bg);
+    border-radius: var(--radius-lg);
+    padding: 24px;
+    margin-bottom: 20px;
+    box-shadow: var(--shadow-sm);
+    border: 1px solid var(--border-color);
+    transition: box-shadow 0.2s;
+}
+
+.user-section:hover {
+    box-shadow: var(--shadow-md);
+}
+
+.user-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    padding-bottom: 16px;
+    border-bottom: 2px solid var(--primary-light);
+}
+
+.user-header h3 {
+    margin: 0;
+    color: var(--text-primary);
+    font-size: 18px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.user-header h3::before {
+    content: '';
+    display: inline-block;
+    width: 4px;
+    height: 20px;
+    background: var(--primary-color);
+    border-radius: 2px;
+}
+
+.user-header .el-tag {
+    padding: 6px 14px;
+    border-radius: 20px;
+    font-weight: 600;
+    font-size: 13px;
+    border: none;
+}
+
+/* 表格样式优化 */
+.el-table {
+    border-radius: var(--radius);
+    overflow: hidden;
+}
+
+.el-table th.el-table__cell {
+    background: var(--page-bg);
+    color: var(--text-secondary);
+    font-weight: 600;
+    font-size: 13px;
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+    border-bottom: 2px solid var(--border-color);
+}
+
+.el-table td.el-table__cell {
+    font-size: 14px;
+    color: var(--text-primary);
+    border-bottom: 1px solid var(--border-color);
+}
+
+.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
+    background-color: var(--primary-light);
+}
+
+.el-table::before {
+    display: none;
+}
+
+/* 状态标签样式 */
+.el-tag {
+    border-radius: 20px;
+    padding: 4px 12px;
+    font-weight: 500;
+    border: none;
+}
+
+.el-tag--success {
+    background: var(--success-light);
+    color: var(--success-color);
+}
+
+.el-tag--danger {
+    background: var(--danger-light);
+    color: var(--danger-color);
+}
+
+.el-tag--warning {
+    background: var(--warning-light);
+    color: var(--warning-color);
+}
+
+.el-tag--info {
+    background: var(--info-light);
+    color: var(--info-color);
+}
+
+/* 按钮样式 */
+.el-button--primary {
+    background: var(--primary-color);
+    border-color: var(--primary-color);
+    font-weight: 500;
+    border-radius: var(--radius);
+}
+
+.el-button--primary:hover {
+    background: var(--primary-dark);
+    border-color: var(--primary-dark);
+}
+
+.el-button--success {
+    background: var(--success-color);
+    border-color: var(--success-color);
+    font-weight: 500;
+    border-radius: var(--radius);
+}
+
+.el-button--success:hover {
+    background: #059669;
+    border-color: #059669;
+}
+
+.el-button--warning {
+    background: var(--warning-color);
+    border-color: var(--warning-color);
+    font-weight: 500;
+}
+
+.el-button--primary.is-plain {
+    background: transparent;
+    color: var(--primary-color);
+    border-color: var(--primary-color);
+}
+
+.el-button--primary.is-plain:hover {
+    background: var(--primary-light);
+}
+
+/* 链接样式 */
+.el-link--primary {
+    color: var(--primary-color);
+    font-weight: 500;
+}
+
+.el-link:hover {
+    opacity: 0.8;
+}
+
+/* 设置页面样式 */
+.website-manage-header,
+.admin-header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 24px;
+    padding-bottom: 16px;
+    border-bottom: 2px solid var(--primary-light);
+}
+
+.website-manage-header h2,
+.admin-header h2 {
+    margin: 0;
+    font-size: 24px;
+    font-weight: 700;
+    color: var(--text-primary);
+}
+
+.el-tabs {
+    background: var(--card-bg);
+    border-radius: var(--radius-lg);
+    padding: 20px;
+    box-shadow: var(--shadow-sm);
+    border: 1px solid var(--border-color);
+}
+
+.el-tabs__header {
+    margin-bottom: 20px;
+}
+
+.el-tabs__item {
+    font-weight: 500;
+    font-size: 14px;
+    color: var(--text-secondary);
+}
+
+.el-tabs__item.is-active {
+    color: var(--primary-color);
+    font-weight: 600;
+}
+
+.el-tabs__active-bar {
+    background: var(--primary-color);
+    height: 3px;
+    border-radius: 2px;
+}
+
+/* 表单样式 */
+.el-form-item__label {
+    font-weight: 500;
+    color: var(--text-secondary);
+}
+
+.el-input__inner {
+    border-radius: var(--radius);
+    border: 1px solid var(--border-color);
+    transition: all 0.2s;
+}
+
+.el-input__inner:focus {
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px var(--primary-light);
+}
+
+.el-input-number {
+    border-radius: var(--radius);
+}
+
+/* 对话框样式 */
+.el-dialog {
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-lg);
+}
+
+.el-dialog__header {
+    border-bottom: 1px solid var(--border-color);
+    padding-bottom: 16px;
+    margin-bottom: 20px;
+}
+
+.el-dialog__title {
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.el-dialog__footer {
+    border-top: 1px solid var(--border-color);
+    padding-top: 16px;
+}
+
+.el-divider__text {
+    font-weight: 600;
+    color: var(--primary-color);
+    background: var(--card-bg);
+    padding: 0 12px;
+}
+
+/* Cookie值样式 */
+.cookie-value {
+    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
+    font-size: 12px;
+    color: var(--text-secondary);
+    word-break: break-all;
+    background: var(--page-bg);
+    padding: 4px 8px;
+    border-radius: 4px;
+}
+
+/* 筛选表单 */
+.filter-form {
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+/* 空状态 */
+.el-empty {
+    padding: 60px 0;
+}
+
+.el-empty__description {
+    color: var(--text-secondary);
+    font-size: 14px;
+}
+
+/* 统计数字卡片颜色 */
+.stat-total .el-statistic__content {
+    color: var(--primary-color);
+}
+
+.stat-online .el-statistic__content {
+    color: var(--success-color);
+}
+
+.stat-offline .el-statistic__content {
+    color: var(--danger-color);
+}
+
+.stat-unknown .el-statistic__content {
+    color: var(--info-color);
+}
+
+/* 响应式适配 */
+@media (max-width: 768px) {
+    .el-header {
+        padding: 0 16px;
+    }
+    
+    .el-main {
+        padding: 16px;
+    }
+    
+    .dashboard-header {
+        flex-direction: column;
+        gap: 20px;
+        align-items: flex-start;
+    }
+    
+    .dashboard-stats {
+        flex-wrap: wrap;
+    }
+    
+    .user-section {
+        padding: 16px;
+    }
+}
+
+/* 滚动条美化 */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--page-bg);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--text-light);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--text-secondary);
+}

backend/static/js/app.js

@@ -0,0 +1,594 @@
+const { createApp, ref, onMounted, computed } = Vue;
+
+createApp({
+    setup() {
+        const activeTab = ref('dashboard');
+        const settingsTab = ref('users');
+        const manageTab = ref('cookies');
+        const currentWebsite = ref(null);
+        const currentUser = ref(null);
+        const isAdmin = ref(false);
+        
+        const users = ref([]);
+        const websites = ref([]);
+        const dashboardData = ref([]);
+        const websiteCookies = ref([]);
+        const websiteDetections = ref([]);
+        const detections = ref([]);
+        const notifications = ref([]);
+        
+        const stats = ref({ totalWebsites: 0, onlineCount: 0, offlineCount: 0, unknownCount: 0 });
+        const countdown = ref(5);
+        
+        const adminLoginVisible = ref(false);
+        const adminLoginForm = ref({ password: '' });
+        
+        const userDialogVisible = ref(false);
+        const userDialogTitle = ref('添加用户');
+        const userForm = ref({ id: null, name: '', iyuu_token: '', max_fail_count: 3, cookie_cloud_uuid: '', cookie_cloud_password: '', cookie_cloud_api_url: '' });
+        
+        const websiteDialogVisible = ref(false);
+        const websiteDialogTitle = ref('添加网站');
+        const websiteFormDialog = ref({
+            id: null, user_id: null, name: '', url: '',
+            login_check_selector: '', success_text: '',
+            interval_minutes: 30, status: 1
+        });
+        
+        const cookieDialogVisible = ref(false);
+        const cookieDialogTitle = ref('添加Cookie');
+        const cookieForm = ref({ id: null, name: '', value: '', domain: '', path: '/' });
+        
+        const websiteForm = ref({
+            id: null, user_id: null, name: '', url: '',
+            login_check_selector: '', success_text: '',
+            interval_minutes: 30
+        });
+        
+        const filterWebsiteUser = ref(null);
+        
+        const currentUserWebsites = computed(() => {
+            if (!currentUser.value) return [];
+            return websites.value.filter(w => w.user_id === currentUser.value.id);
+        });
+        
+        const filteredWebsites = computed(() => {
+            if (!filterWebsiteUser.value) return websites.value;
+            return websites.value.filter(w => w.user_id === filterWebsiteUser.value);
+        });
+        
+        const checkAdminStatus = async () => {
+            try {
+                const response = await axios.get('/api/admin/status');
+                isAdmin.value = response.data.logged_in;
+            } catch (error) {
+                isAdmin.value = false;
+            }
+        };
+        
+        const showAdminLogin = () => {
+            adminLoginForm.value = { password: '' };
+            adminLoginVisible.value = true;
+        };
+        
+        const adminLogin = async () => {
+            try {
+                const response = await axios.post('/api/admin/login', adminLoginForm.value);
+                if (response.data.success) {
+                    isAdmin.value = true;
+                    adminLoginVisible.value = false;
+                    ElementPlus.ElMessage.success('登录成功');
+                    activeTab.value = 'settings';
+                    settingsTab.value = 'users';
+                    await loadUsersWithWebsites();
+                }
+            } catch (error) {
+                ElementPlus.ElMessage.error('密码错误');
+            }
+        };
+        
+        const handleAdminCommand = async (command) => {
+            if (command === 'settings') {
+                stopAutoRefresh();
+                activeTab.value = 'settings';
+                settingsTab.value = 'users';
+                await loadUsersWithWebsites();
+            } else if (command === 'dashboard') {
+                activeTab.value = 'dashboard';
+                await loadDashboard();
+                startAutoRefresh();
+            } else if (command === 'logout') {
+                await axios.post('/api/admin/logout');
+                isAdmin.value = false;
+                activeTab.value = 'dashboard';
+                ElementPlus.ElMessage.success('已退出');
+            }
+        };
+        
+        const loadUsers = async () => {
+            try {
+                const response = await axios.get('/api/users');
+                users.value = response.data;
+            } catch (error) {
+                console.error('加载用户失败:', error);
+            }
+        };
+        
+        const loadUsersWithWebsites = async () => {
+            try {
+                const usersRes = await axios.get('/api/users');
+                const websitesRes = await axios.get('/api/websites');
+                users.value = usersRes.data;
+                websites.value = websitesRes.data;
+                
+                users.value = users.value.map(user => ({
+                    ...user,
+                    website_count: websitesRes.data.filter(w => w.user_id === user.id).length
+                }));
+            } catch (error) {
+                console.error('加载用户失败:', error);
+            }
+        };
+        
+        const loadWebsites = async () => {
+            try {
+                const response = await axios.get('/api/websites');
+                websites.value = response.data;
+            } catch (error) {
+                console.error('加载网站失败:', error);
+            }
+        };
+        
+        const loadDashboard = async () => {
+            try {
+                const usersRes = await axios.get('/api/users');
+                const websitesRes = await axios.get('/api/websites');
+                const latestDetectionsRes = await axios.get('/api/detections/latest');
+                const networkRes = await axios.get('/api/websites/check-network');
+                
+                const usersData = usersRes.data;
+                const allWebsites = websitesRes.data;
+                const latestDetections = latestDetectionsRes.data;
+                const networkStatus = networkRes.data;
+                
+                let onlineCount = 0, offlineCount = 0, unknownCount = 0, totalWebsites = allWebsites.length;
+                
+                dashboardData.value = usersData.map(user => {
+                    const userWebsites = allWebsites.filter(w => w.user_id === user.id);
+                    return {
+                        id: user.id,
+                        name: user.name,
+                        websites: userWebsites.map(w => {
+                            const detection = latestDetections[w.id];
+                            const net = networkStatus[w.id];
+                            let loginStatus = 'unknown';
+                            let lastCheckTime = '-';
+                            let networkStatusValue = 'unknown';
+                            
+                            if (net) {
+                                networkStatusValue = net.reachable ? 'online' : 'offline';
+                            }
+                            
+                            if (detection) {
+                                if (detection.status === 1) {
+                                    loginStatus = 'success';
+                                    onlineCount++;
+                                } else {
+                                    loginStatus = 'failed';
+                                    offlineCount++;
+                                }
+                                lastCheckTime = new Date(detection.created_at).toLocaleString();
+                            } else {
+                                unknownCount++;
+                            }
+                            
+                            return {
+                                ...w,
+                                networkStatus: networkStatusValue,
+                                loginStatus: loginStatus,
+                                lastCheckTime: lastCheckTime
+                            };
+                        })
+                    };
+                });
+                
+                stats.value = { totalWebsites, onlineCount, offlineCount, unknownCount };
+            } catch (error) {
+                console.error('加载仪表板失败:', error);
+            }
+        };
+        
+        const refreshDashboardStatus = async () => {
+            if (activeTab.value !== 'dashboard') return;
+            if (isRefreshing) return;
+            
+            isRefreshing = true;
+            try {
+                const [detectionsRes, networkRes] = await Promise.all([
+                    axios.get('/api/detections/latest'),
+                    axios.get('/api/websites/check-network')
+                ]);
+                
+                const latestDetections = detectionsRes.data;
+                const networkStatus = networkRes.data;
+                
+                let onlineCount = 0, offlineCount = 0, unknownCount = 0;
+                
+                dashboardData.value = dashboardData.value.map(user => {
+                    return {
+                        ...user,
+                        websites: user.websites.map(w => {
+                            const detection = latestDetections[w.id];
+                            const net = networkStatus[w.id];
+                            let loginStatus = w.loginStatus;
+                            let lastCheckTime = w.lastCheckTime;
+                            let networkStatusValue = 'unknown';
+                            
+                            if (net) {
+                                networkStatusValue = net.reachable ? 'online' : 'offline';
+                            }
+                            
+                            if (detection) {
+                                if (detection.status === 1) {
+                                    loginStatus = 'success';
+                                    onlineCount++;
+                                } else {
+                                    loginStatus = 'failed';
+                                    offlineCount++;
+                                }
+                                lastCheckTime = new Date(detection.created_at).toLocaleString();
+                            } else {
+                                unknownCount++;
+                            }
+                            
+                            return {
+                                ...w,
+                                networkStatus: networkStatusValue,
+                                loginStatus: loginStatus,
+                                lastCheckTime: lastCheckTime
+                            };
+                        })
+                    };
+                });
+                
+                stats.value = { 
+                    totalWebsites: onlineCount + offlineCount + unknownCount, 
+                    onlineCount, 
+                    offlineCount, 
+                    unknownCount 
+                };
+            } catch (error) {
+                // 静默失败，不显示错误提示
+            } finally {
+                isRefreshing = false;
+                if (activeTab.value === 'dashboard') {
+                    countdown.value = 5;
+                    startCountdown();
+                }
+            }
+        };
+        
+        let refreshTimer = null;
+        let countdownTimer = null;
+        let isRefreshing = false;
+        
+        const startAutoRefresh = () => {
+            stopAutoRefresh();
+            countdown.value = 5;
+            startCountdown();
+        };
+        
+        const startCountdown = () => {
+            if (countdownTimer) clearInterval(countdownTimer);
+            countdownTimer = setInterval(() => {
+                countdown.value--;
+                if (countdown.value <= 0) {
+                    clearInterval(countdownTimer);
+                    countdownTimer = null;
+                    refreshDashboardStatus();
+                }
+            }, 1000);
+        };
+        
+        const stopAutoRefresh = () => {
+            if (refreshTimer) {
+                clearInterval(refreshTimer);
+                refreshTimer = null;
+            }
+            if (countdownTimer) {
+                clearInterval(countdownTimer);
+                countdownTimer = null;
+            }
+            countdown.value = 5;
+        };
+        
+        const checkLogin = async (website) => {
+            website.loginStatus = 'checking';
+            
+            try {
+                const response = await axios.post(`/api/websites/check-login/${website.id}`);
+                
+                if (response.data.success) {
+                    website.loginStatus = 'success';
+                    updateStats(website.id, 'success');
+                    ElementPlus.ElMessage.success(response.data.message);
+                } else {
+                    website.loginStatus = 'failed';
+                    updateStats(website.id, 'failed');
+                    ElementPlus.ElMessage.error(response.data.message);
+                }
+                
+                website.lastCheckTime = new Date().toLocaleString();
+            } catch (error) {
+                website.loginStatus = 'failed';
+                updateStats(website.id, 'failed');
+                ElementPlus.ElMessage.error('检测失败');
+            }
+        };
+        
+        const updateStats = (websiteId, status) => {
+            let onlineCount = 0, offlineCount = 0, unknownCount = 0;
+            dashboardData.value.forEach(user => {
+                user.websites.forEach(w => {
+                    if (w.id === websiteId) {
+                        if (status === 'success') onlineCount++;
+                        else if (status === 'failed') offlineCount++;
+                    } else {
+                        if (w.loginStatus === 'success') onlineCount++;
+                        else if (w.loginStatus === 'failed') offlineCount++;
+                        else unknownCount++;
+                    }
+                });
+            });
+            stats.value = { totalWebsites: onlineCount + offlineCount + unknownCount, onlineCount, offlineCount, unknownCount };
+        };
+        
+        const manageWebsite = async (website) => {
+            stopAutoRefresh();
+            currentWebsite.value = website;
+            websiteForm.value = { ...website };
+            activeTab.value = 'website_manage';
+            manageTab.value = 'cookies';
+            await loadWebsiteCookies();
+        };
+        
+        const manageUserWebsites = (user) => {
+            stopAutoRefresh();
+            currentUser.value = user;
+            activeTab.value = 'user_websites';
+        };
+        
+        const loadWebsiteCookies = async () => {
+            if (!currentWebsite.value) return;
+            try {
+                const response = await axios.get(`/api/cookies/websites/${currentWebsite.value.id}`);
+                websiteCookies.value = response.data;
+            } catch (error) {
+                console.error('加载Cookie失败:', error);
+            }
+        };
+        
+        const loadWebsiteDetections = async () => {
+            if (!currentWebsite.value) return;
+            try {
+                const response = await axios.get(`/api/detections?website_id=${currentWebsite.value.id}`);
+                websiteDetections.value = response.data;
+            } catch (error) {
+                console.error('加载检测记录失败:', error);
+            }
+        };
+        
+        const showAddUserDialog = () => {
+            userDialogTitle.value = '添加用户';
+            userForm.value = { id: null, name: '', iyuu_token: '', max_fail_count: 3, cookie_cloud_uuid: '', cookie_cloud_password: '', cookie_cloud_api_url: '' };
+            userDialogVisible.value = true;
+        };
+        
+        const editUser = (user) => {
+            userDialogTitle.value = '编辑用户';
+            userForm.value = { 
+                id: user.id, 
+                name: user.name, 
+                iyuu_token: user.iyuu_token, 
+                max_fail_count: user.max_fail_count,
+                cookie_cloud_uuid: user.cookie_cloud_uuid || '',
+                cookie_cloud_password: user.cookie_cloud_password || '',
+                cookie_cloud_api_url: user.cookie_cloud_api_url || ''
+            };
+            userDialogVisible.value = true;
+        };
+        
+        const saveUser = async () => {
+            try {
+                if (userForm.value.id) {
+                    await axios.put(`/api/users/${userForm.value.id}`, userForm.value);
+                    ElementPlus.ElMessage.success('更新成功');
+                } else {
+                    await axios.post('/api/users', userForm.value);
+                    ElementPlus.ElMessage.success('添加成功');
+                }
+                userDialogVisible.value = false;
+                await loadUsersWithWebsites();
+            } catch (error) {
+                ElementPlus.ElMessage.error('保存失败');
+            }
+        };
+        
+        const deleteUser = async (user) => {
+            try {
+                await ElementPlus.ElMessageBox.confirm('确定要删除该用户吗?', '提示', { type: 'warning' });
+                await axios.delete(`/api/users/${user.id}`);
+                ElementPlus.ElMessage.success('删除成功');
+                await loadUsersWithWebsites();
+            } catch (error) {
+                if (error !== 'cancel') {
+                    ElementPlus.ElMessage.error('删除失败');
+                }
+            }
+        };
+        
+        const showAddWebsiteDialog = () => {
+            websiteDialogTitle.value = '添加网站';
+            websiteFormDialog.value = {
+                id: null, user_id: filterWebsiteUser.value || users.value[0]?.id,
+                name: '', url: '', login_check_selector: '', success_text: '',
+                interval_minutes: 30, status: 1
+            };
+            websiteDialogVisible.value = true;
+        };
+        
+        const showAddWebsiteDialogForUser = () => {
+            websiteDialogTitle.value = '添加网站';
+            websiteFormDialog.value = {
+                id: null, user_id: currentUser.value?.id,
+                name: '', url: '', login_check_selector: '', success_text: '',
+                interval_minutes: 30, status: 1
+            };
+            websiteDialogVisible.value = true;
+        };
+        
+        const editWebsite = (website) => {
+            websiteDialogTitle.value = '编辑网站';
+            websiteFormDialog.value = { ...website };
+            websiteDialogVisible.value = true;
+        };
+        
+        const saveWebsite = async () => {
+            try {
+                if (websiteFormDialog.value.id) {
+                    await axios.put(`/api/websites/${websiteFormDialog.value.id}`, websiteFormDialog.value);
+                    ElementPlus.ElMessage.success('更新成功');
+                } else {
+                    await axios.post('/api/websites', websiteFormDialog.value);
+                    ElementPlus.ElMessage.success('添加成功');
+                }
+                websiteDialogVisible.value = false;
+                await loadWebsites();
+                await loadUsersWithWebsites();
+            } catch (error) {
+                ElementPlus.ElMessage.error('保存失败');
+            }
+        };
+        
+        const deleteWebsite = async (website) => {
+            try {
+                await ElementPlus.ElMessageBox.confirm('确定要删除该网站吗?', '提示', { type: 'warning' });
+                await axios.delete(`/api/websites/${website.id}`);
+                ElementPlus.ElMessage.success('删除成功');
+                await loadWebsites();
+                await loadUsersWithWebsites();
+            } catch (error) {
+                if (error !== 'cancel') {
+                    ElementPlus.ElMessage.error('删除失败');
+                }
+            }
+        };
+        
+        const showAddCookieDialog = () => {
+            cookieDialogTitle.value = '添加Cookie';
+            cookieForm.value = { id: null, name: '', value: '', domain: currentWebsite.value?.url ? new URL(currentWebsite.value.url).hostname : '', path: '/' };
+            cookieDialogVisible.value = true;
+        };
+        
+        const editCookie = (cookie) => {
+            cookieDialogTitle.value = '编辑Cookie';
+            cookieForm.value = { ...cookie };
+            cookieDialogVisible.value = true;
+        };
+        
+        const saveCookie = async () => {
+            try {
+                if (cookieForm.value.id) {
+                    await axios.put(`/api/cookies/${cookieForm.value.id}`, cookieForm.value);
+                    ElementPlus.ElMessage.success('更新成功');
+                } else {
+                    await axios.post(`/api/cookies/websites/${currentWebsite.value.id}`, cookieForm.value);
+                    ElementPlus.ElMessage.success('添加成功');
+                }
+                cookieDialogVisible.value = false;
+                await loadWebsiteCookies();
+            } catch (error) {
+                ElementPlus.ElMessage.error('保存失败');
+            }
+        };
+        
+        const deleteCookie = async (cookie) => {
+            try {
+                await ElementPlus.ElMessageBox.confirm('确定要删除该Cookie吗?', '提示', { type: 'warning' });
+                await axios.delete(`/api/cookies/${cookie.id}`);
+                ElementPlus.ElMessage.success('删除成功');
+                await loadWebsiteCookies();
+            } catch (error) {
+                if (error !== 'cancel') {
+                    ElementPlus.ElMessage.error('删除失败');
+                }
+            }
+        };
+        
+        const saveWebsiteSettings = async () => {
+            try {
+                await axios.put(`/api/websites/${currentWebsite.value.id}`, websiteForm.value);
+                ElementPlus.ElMessage.success('保存成功');
+            } catch (error) {
+                ElementPlus.ElMessage.error('保存失败');
+            }
+        };
+        
+        const maskCookieValue = (value) => {
+            if (!value) return '';
+            return value.length > 30 ? value.substring(0, 30) + '...' : value;
+        };
+        
+        const loadDetections = async () => {
+            try {
+                const response = await axios.get('/api/detections');
+                detections.value = response.data;
+            } catch (error) {
+                console.error('加载检测结果失败:', error);
+            }
+        };
+        
+        const loadNotifications = async () => {
+            try {
+                const response = await axios.get('/api/notifications');
+                notifications.value = response.data;
+            } catch (error) {
+                console.error('加载通知失败:', error);
+            }
+        };
+        
+        const viewNotificationDetail = (notification) => {
+            ElementPlus.ElMessageBox.alert(notification.content, notification.title, { confirmButtonText: '确定' });
+        };
+        
+        onMounted(async () => {
+            await checkAdminStatus();
+            await loadUsers();
+            await loadWebsites();
+            await loadDashboard();
+            startAutoRefresh();
+        });
+        
+        return {
+            activeTab, settingsTab, manageTab, currentWebsite, currentUser, isAdmin,
+            users, websites, dashboardData, websiteCookies, websiteDetections, detections, notifications,
+            stats, countdown,
+            adminLoginVisible, adminLoginForm,
+            userDialogVisible, userDialogTitle, userForm,
+            websiteDialogVisible, websiteDialogTitle, websiteFormDialog,
+            cookieDialogVisible, cookieDialogTitle, cookieForm,
+            websiteForm, filterWebsiteUser,
+            currentUserWebsites, filteredWebsites,
+            checkAdminStatus, showAdminLogin, adminLogin, handleAdminCommand,
+            loadUsers, loadUsersWithWebsites, loadWebsites, loadDashboard, refreshDashboardStatus,
+            startAutoRefresh, stopAutoRefresh,
+            checkLogin, manageWebsite, manageUserWebsites,
+            loadWebsiteCookies, loadWebsiteDetections,
+            showAddUserDialog, editUser, saveUser, deleteUser,
+            showAddWebsiteDialog, showAddWebsiteDialogForUser, editWebsite, saveWebsite, deleteWebsite,
+            showAddCookieDialog, editCookie, saveCookie, deleteCookie,
+            saveWebsiteSettings, maskCookieValue,
+            loadDetections, loadNotifications, viewNotificationDetail
+        };
+    }
+}).use(ElementPlus).mount('#app');

backend/templates/index.html

@@ -0,0 +1,398 @@
+{% raw %}<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cookie监控管理系统</title>
+    <link rel="stylesheet" href="/static/css/style.css">
+    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <script src="https://unpkg.com/element-plus"></script>
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+</head>
+<body>
+    <div id="app">
+        <div class="container">
+            <el-container>
+                <el-header>
+                    <div class="header-left">
+                        <h1>Cookie监控管理系统</h1>
+                        <el-button v-if="activeTab === 'settings'" @click="activeTab = 'dashboard'" type="primary" plain>返回监控首页</el-button>
+                    </div>
+                    <div class="header-right">
+                        <div v-if="activeTab === 'dashboard'" class="auto-refresh-indicator">
+                            <el-icon class="rotating-icon"><Refresh /></el-icon>
+                            <span class="refresh-text">{{ countdown }}秒后自动刷新</span>
+                        </div>
+                        <el-button v-if="activeTab === 'dashboard'" @click="loadDashboard" type="primary" plain>刷新</el-button>
+                        <el-button @click="showAdminLogin" type="warning" plain v-if="!isAdmin">登录后台</el-button>
+                        <el-dropdown @command="handleAdminCommand" v-else>
+                            <el-button type="success" plain>后台管理 <el-icon><arrow-down /></el-icon></el-button>
+                            <template #dropdown>
+                                <el-dropdown-menu>
+                                    <el-dropdown-item command="settings">系统设置</el-dropdown-item>
+                                    <el-dropdown-item command="dashboard">监控首页</el-dropdown-item>
+                                    <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
+                                </el-dropdown-menu>
+                            </template>
+                        </el-dropdown>
+                    </div>
+                </el-header>
+                
+                <el-main>
+                    <!-- 监控仪表板 -->
+                    <div v-if="activeTab === 'dashboard'">
+                        <div class="dashboard-header">
+                            <h2>网站监控仪表板</h2>
+                            <div class="dashboard-stats">
+                                <el-statistic title="网站总数" :value="stats.totalWebsites" />
+                                <el-statistic title="在线" :value="stats.onlineCount">
+                                    <template #suffix><el-icon><circle-check /></el-icon></template>
+                                </el-statistic>
+                                <el-statistic title="离线" :value="stats.offlineCount">
+                                    <template #suffix><el-icon><circle-close /></el-icon></template>
+                                </el-statistic>
+                                <el-statistic title="未检测" :value="stats.unknownCount" />
+                            </div>
+                        </div>
+                        
+                        <div v-for="user in dashboardData" :key="user.id" class="user-section">
+                            <div class="user-header">
+                                <h3>{{ user.name }}</h3>
+                                <el-tag :type="user.websites.some(w => w.loginStatus === 'success') ? 'success' : user.websites.some(w => w.loginStatus === 'failed') ? 'danger' : 'info'">
+                                    {{ user.websites.filter(w => w.loginStatus === 'success').length }}/{{ user.websites.length }} 在线
+                                </el-tag>
+                            </div>
+                            
+                            <el-table :data="user.websites" style="width: 100%; margin-bottom: 20px">
+                                <el-table-column prop="name" label="网站名称" width="150"></el-table-column>
+                                <el-table-column prop="url" label="URL" width="250">
+                                    <template #default="scope">
+                                        <el-link :href="scope.row.url" target="_blank" type="primary">{{ scope.row.url }}</el-link>
+                                    </template>
+                                </el-table-column>
+                                <el-table-column label="网络状态" width="100">
+                                    <template #default="scope">
+                                        <el-tag :type="scope.row.networkStatus === 'online' ? 'success' : scope.row.networkStatus === 'offline' ? 'danger' : 'info'">
+                                            {{ scope.row.networkStatus === 'online' ? '在线' : scope.row.networkStatus === 'offline' ? '离线' : '未知' }}
+                                        </el-tag>
+                                    </template>
+                                </el-table-column>
+                                <el-table-column label="登录状态" width="100">
+                                    <template #default="scope">
+                                        <el-tag :type="scope.row.loginStatus === 'success' ? 'success' : scope.row.loginStatus === 'failed' ? 'danger' : scope.row.loginStatus === 'checking' ? 'warning' : 'info'">
+                                            {{ scope.row.loginStatus === 'success' ? '已登录' : scope.row.loginStatus === 'failed' ? '未登录' : scope.row.loginStatus === 'checking' ? '检测中' : '未检测' }}
+                                        </el-tag>
+                                    </template>
+                                </el-table-column>
+                                <el-table-column prop="lastCheckTime" label="最后检测" width="180"></el-table-column>
+                                <el-table-column label="操作" width="200">
+                                    <template #default="scope">
+                                        <el-button size="small" type="primary" @click="checkLogin(scope.row)" :loading="scope.row.loginStatus === 'checking'" :disabled="scope.row.loginStatus === 'checking'">
+                                            {{ scope.row.loginStatus === 'checking' ? '检测中' : '检测登录' }}
+                                        </el-button>
+                                        <el-button size="small" type="success" @click="manageWebsite(scope.row)" v-if="scope.row.loginStatus === 'success'">管理</el-button>
+                                    </template>
+                                </el-table-column>
+                            </el-table>
+                        </div>
+                        
+                        <el-empty v-if="dashboardData.length === 0" description="暂无网站数据"></el-empty>
+                    </div>
+                    
+                    <!-- 网站管理 -->
+                    <div v-if="activeTab === 'website_manage'">
+                        <div class="website-manage-header">
+                            <el-button @click="activeTab = 'dashboard'" type="info">返回监控首页</el-button>
+                            <h2>网站管理 - {{ currentWebsite?.name }}</h2>
+                        </div>
+                        
+                        <el-tabs v-model="manageTab">
+                            <el-tab-pane label="Cookie管理" name="cookies">
+                                <el-button @click="showAddCookieDialog" type="primary" size="small">添加Cookie</el-button>
+                                <el-button @click="loadWebsiteCookies" size="small">刷新</el-button>
+                                <el-table :data="websiteCookies" style="width: 100%; margin-top: 10px">
+                                    <el-table-column prop="name" label="名称" width="200"></el-table-column>
+                                    <el-table-column prop="value" label="值" width="300">
+                                        <template #default="scope">
+                                            <span class="cookie-value">{{ maskCookieValue(scope.row.value) }}</span>
+                                        </template>
+                                    </el-table-column>
+                                    <el-table-column prop="domain" label="域名" width="150"></el-table-column>
+                                    <el-table-column label="操作" width="150">
+                                        <template #default="scope">
+                                            <el-button size="small" @click="editCookie(scope.row)">编辑</el-button>
+                                            <el-button size="small" type="danger" @click="deleteCookie(scope.row)">删除</el-button>
+                                        </template>
+                                    </el-table-column>
+                                </el-table>
+                            </el-tab-pane>
+                            <el-tab-pane label="网站设置" name="settings">
+                                <el-form :model="websiteForm" label-width="120px" style="max-width: 500px">
+                                    <el-form-item label="网站名称">
+                                        <el-input v-model="websiteForm.name"></el-input>
+                                    </el-form-item>
+                                    <el-form-item label="URL">
+                                        <el-input v-model="websiteForm.url"></el-input>
+                                    </el-form-item>
+                                    <el-form-item label="登录检测选择器">
+                                        <el-input v-model="websiteForm.login_check_selector"></el-input>
+                                    </el-form-item>
+                                    <el-form-item label="登录成功文本">
+                                        <el-input v-model="websiteForm.success_text"></el-input>
+                                    </el-form-item>
+                                    <el-form-item label="检测间隔(分钟)">
+                                        <el-input-number v-model="websiteForm.interval_minutes" :min="1" :max="1440"></el-input-number>
+                                    </el-form-item>
+                                    <el-form-item>
+                                        <el-button type="primary" @click="saveWebsiteSettings">保存设置</el-button>
+                                    </el-form-item>
+                                </el-form>
+                            </el-tab-pane>
+                            <el-tab-pane label="检测记录" name="history">
+                                <el-button @click="loadWebsiteDetections" type="primary" size="small">刷新</el-button>
+                                <el-table :data="websiteDetections" style="width: 100%; margin-top: 10px">
+                                    <el-table-column prop="status" label="状态" width="80">
+                                        <template #default="scope">
+                                            <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
+                                                {{ scope.row.status === 1 ? '成功' : '失败' }}
+                                            </el-tag>
+                                        </template>
+                                    </el-table-column>
+                                    <el-table-column prop="message" label="消息"></el-table-column>
+                                    <el-table-column prop="created_at" label="时间" width="180"></el-table-column>
+                                </el-table>
+                            </el-tab-pane>
+                        </el-tabs>
+                    </div>
+                    
+                    <!-- 系统设置页面 -->
+                    <div v-if="activeTab === 'settings'">
+                        <h2>系统设置</h2>
+                        <el-tabs v-model="settingsTab">
+                            <el-tab-pane label="用户管理" name="users">
+                                <el-button @click="showAddUserDialog" type="primary" size="small" style="margin-bottom: 10px">添加用户</el-button>
+                                <el-table :data="users" style="width: 100%">
+                                    <el-table-column prop="id" label="ID" width="80"></el-table-column>
+                                    <el-table-column prop="name" label="用户名" width="150"></el-table-column>
+                                    <el-table-column prop="iyuu_token" label="爱语飞飞令牌" width="200"></el-table-column>
+                                    <el-table-column prop="max_fail_count" label="最大失败次数" width="120"></el-table-column>
+                                    <el-table-column prop="website_count" label="网站数量" width="100"></el-table-column>
+                                    <el-table-column label="操作">
+                                        <template #default="scope">
+                                            <el-button size="small" @click="editUser(scope.row)">编辑</el-button>
+                                            <el-button size="small" type="warning" @click="manageUserWebsites(scope.row)">管理网站</el-button>
+                                            <el-button size="small" type="danger" @click="deleteUser(scope.row)">删除</el-button>
+                                        </template>
+                                    </el-table-column>
+                                </el-table>
+                            </el-tab-pane>
+                            
+                            <el-tab-pane label="网站管理" name="websites">
+                                <div class="filter-form">
+                                    <el-select v-model="filterWebsiteUser" placeholder="选择用户" @change="loadWebsites">
+                                        <el-option label="全部用户" :value="null"></el-option>
+                                        <el-option v-for="user in users" :key="user.id" :label="user.name" :value="user.id"></el-option>
+                                    </el-select>
+                                    <el-button @click="showAddWebsiteDialog" type="primary" size="small" style="margin-left: 10px">添加网站</el-button>
+                                </div>
+                                <el-table :data="filteredWebsites" style="width: 100%">
+                                    <el-table-column prop="id" label="ID" width="80"></el-table-column>
+                                    <el-table-column prop="user_id" label="用户ID" width="100"></el-table-column>
+                                    <el-table-column prop="name" label="网站名称" width="150"></el-table-column>
+                                    <el-table-column prop="url" label="URL" width="250"></el-table-column>
+                                    <el-table-column prop="interval_minutes" label="间隔(分钟)" width="100"></el-table-column>
+                                    <el-table-column prop="status" label="状态" width="80">
+                                        <template #default="scope">
+                                            <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
+                                                {{ scope.row.status === 1 ? '启用' : '禁用' }}
+                                            </el-tag>
+                                        </template>
+                                    </el-table-column>
+                                    <el-table-column label="操作">
+                                        <template #default="scope">
+                                            <el-button size="small" @click="editWebsite(scope.row)">编辑</el-button>
+                                            <el-button size="small" type="danger" @click="deleteWebsite(scope.row)">删除</el-button>
+                                        </template>
+                                    </el-table-column>
+                                </el-table>
+                            </el-tab-pane>
+                            
+                            <el-tab-pane label="检测记录" name="detections">
+                                <el-button @click="loadDetections" type="primary" size="small" style="margin-bottom: 10px">刷新</el-button>
+                                <el-table :data="detections" style="width: 100%">
+                                    <el-table-column prop="id" label="ID" width="80"></el-table-column>
+                                    <el-table-column prop="website_id" label="网站ID" width="100"></el-table-column>
+                                    <el-table-column prop="status" label="状态" width="80">
+                                        <template #default="scope">
+                                            <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
+                                                {{ scope.row.status === 1 ? '成功' : '失败' }}
+                                            </el-tag>
+                                        </template>
+                                    </el-table-column>
+                                    <el-table-column prop="response_time" label="响应时间(ms)" width="120"></el-table-column>
+                                    <el-table-column prop="http_status" label="HTTP状态" width="100"></el-table-column>
+                                    <el-table-column prop="message" label="消息"></el-table-column>
+                                    <el-table-column prop="created_at" label="检测时间" width="180"></el-table-column>
+                                </el-table>
+                            </el-tab-pane>
+                            
+                            <el-tab-pane label="通知记录" name="notifications">
+                                <el-button @click="loadNotifications" type="primary" size="small" style="margin-bottom: 10px">刷新</el-button>
+                                <el-table :data="notifications" style="width: 100%">
+                                    <el-table-column prop="id" label="ID" width="80"></el-table-column>
+                                    <el-table-column prop="user_id" label="用户ID" width="100"></el-table-column>
+                                    <el-table-column prop="website_id" label="网站ID" width="100"></el-table-column>
+                                    <el-table-column prop="title" label="标题" width="200"></el-table-column>
+                                    <el-table-column prop="status" label="状态" width="80">
+                                        <template #default="scope">
+                                            <el-tag :type="scope.row.status === 'sent' ? 'success' : scope.row.status === 'failed' ? 'danger' : 'warning'">
+                                                {{ scope.row.status === 'sent' ? '已发送' : scope.row.status === 'failed' ? '失败' : '待发送' }}
+                                            </el-tag>
+                                        </template>
+                                    </el-table-column>
+                                    <el-table-column prop="send_time" label="发送时间" width="180"></el-table-column>
+                                    <el-table-column prop="created_at" label="创建时间" width="180"></el-table-column>
+                                    <el-table-column label="操作">
+                                        <template #default="scope">
+                                            <el-button size="small" @click="viewNotificationDetail(scope.row)">查看</el-button>
+                                        </template>
+                                    </el-table-column>
+                                </el-table>
+                            </el-tab-pane>
+                        </el-tabs>
+                    </div>
+                    
+                    <!-- 用户网站管理 -->
+                    <div v-if="activeTab === 'user_websites'">
+                        <div class="website-manage-header">
+                            <el-button @click="activeTab = 'settings'; settingsTab = 'users'" type="info">返回设置</el-button>
+                            <h2>网站管理 - {{ currentUser?.name }}</h2>
+                            <el-button @click="showAddWebsiteDialogForUser" type="primary">添加网站</el-button>
+                        </div>
+                        
+                        <el-table :data="currentUserWebsites" style="width: 100%">
+                            <el-table-column prop="id" label="ID" width="80"></el-table-column>
+                            <el-table-column prop="name" label="网站名称" width="150"></el-table-column>
+                            <el-table-column prop="url" label="URL" width="250"></el-table-column>
+                            <el-table-column prop="interval_minutes" label="间隔(分钟)" width="100"></el-table-column>
+                            <el-table-column prop="status" label="状态" width="80">
+                                <template #default="scope">
+                                    <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
+                                        {{ scope.row.status === 1 ? '启用' : '禁用' }}
+                                    </el-tag>
+                                </template>
+                            </el-table-column>
+                            <el-table-column label="操作">
+                                <template #default="scope">
+                                    <el-button size="small" @click="editWebsite(scope.row)">编辑</el-button>
+                                    <el-button size="small" type="danger" @click="deleteWebsite(scope.row)">删除</el-button>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                </el-main>
+            </el-container>
+        </div>
+        
+        <!-- 后台登录对话框 -->
+        <el-dialog v-model="adminLoginVisible" title="登录后台" width="400px">
+            <el-form :model="adminLoginForm" label-width="80px">
+                <el-form-item label="密码">
+                    <el-input v-model="adminLoginForm.password" type="password" show-password @keyup.enter="adminLogin"></el-input>
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <el-button @click="adminLoginVisible = false">取消</el-button>
+                <el-button type="primary" @click="adminLogin">登录</el-button>
+            </template>
+        </el-dialog>
+        
+        <!-- 用户对话框 -->
+        <el-dialog v-model="userDialogVisible" :title="userDialogTitle" width="600px">
+            <el-form :model="userForm" label-width="120px">
+                <el-form-item label="用户名">
+                    <el-input v-model="userForm.name"></el-input>
+                </el-form-item>
+                <el-form-item label="爱语飞飞令牌">
+                    <el-input v-model="userForm.iyuu_token"></el-input>
+                </el-form-item>
+                <el-form-item label="最大失败次数">
+                    <el-input-number v-model="userForm.max_fail_count" :min="1" :max="10"></el-input-number>
+                </el-form-item>
+                <el-divider content-position="left">Cookie Cloud 设置</el-divider>
+                <el-form-item label="UUID">
+                    <el-input v-model="userForm.cookie_cloud_uuid" placeholder="hu6n2vcUmzpu7mqUN2rVCg"></el-input>
+                </el-form-item>
+                <el-form-item label="密码">
+                    <el-input v-model="userForm.cookie_cloud_password" show-password></el-input>
+                </el-form-item>
+                <el-form-item label="API地址">
+                    <el-input v-model="userForm.cookie_cloud_api_url" placeholder="https://movie-pilot.org/cookiecloud"></el-input>
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <el-button @click="userDialogVisible = false">取消</el-button>
+                <el-button type="primary" @click="saveUser">保存</el-button>
+            </template>
+        </el-dialog>
+        
+        <!-- 网站对话框 -->
+        <el-dialog v-model="websiteDialogVisible" :title="websiteDialogTitle">
+            <el-form :model="websiteFormDialog" label-width="120px">
+                <el-form-item label="所属用户">
+                    <el-select v-model="websiteFormDialog.user_id" placeholder="选择用户">
+                        <el-option v-for="user in users" :key="user.id" :label="user.name" :value="user.id"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="网站名称">
+                    <el-input v-model="websiteFormDialog.name"></el-input>
+                </el-form-item>
+                <el-form-item label="URL">
+                    <el-input v-model="websiteFormDialog.url"></el-input>
+                </el-form-item>
+                <el-form-item label="登录检测选择器">
+                    <el-input v-model="websiteFormDialog.login_check_selector"></el-input>
+                </el-form-item>
+                <el-form-item label="登录成功文本">
+                    <el-input v-model="websiteFormDialog.success_text"></el-input>
+                </el-form-item>
+                <el-form-item label="检测间隔(分钟)">
+                    <el-input-number v-model="websiteFormDialog.interval_minutes" :min="1" :max="1440"></el-input-number>
+                </el-form-item>
+                <el-form-item label="状态">
+                    <el-switch v-model="websiteFormDialog.status" :active-value="1" :inactive-value="0"></el-switch>
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <el-button @click="websiteDialogVisible = false">取消</el-button>
+                <el-button type="primary" @click="saveWebsite">保存</el-button>
+            </template>
+        </el-dialog>
+        
+        <!-- Cookie对话框 -->
+        <el-dialog v-model="cookieDialogVisible" :title="cookieDialogTitle">
+            <el-form :model="cookieForm" label-width="100px">
+                <el-form-item label="名称">
+                    <el-input v-model="cookieForm.name"></el-input>
+                </el-form-item>
+                <el-form-item label="值">
+                    <el-input v-model="cookieForm.value" type="textarea" :rows="3"></el-input>
+                </el-form-item>
+                <el-form-item label="域名">
+                    <el-input v-model="cookieForm.domain"></el-input>
+                </el-form-item>
+                <el-form-item label="路径">
+                    <el-input v-model="cookieForm.path"></el-input>
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <el-button @click="cookieDialogVisible = false">取消</el-button>
+                <el-button type="primary" @click="saveCookie">保存</el-button>
+            </template>
+        </el-dialog>
+    </div>
+    
+    <script src="/static/js/app.js"></script>
+</body>
+</html>{% endraw %}