后端改动:
GET /api/v1/accounts 现在返回分页格式 {items, total, page, size, total_pages, status_counts},默认每页 12 个
批量操作用 size=500 一次拉全部
前端改动:
base.html — 加了移动端汉堡菜单、全局响应式样式、pagination disabled 状态
dashboard.html — 账号卡片分页,统计数据从 API 的 status_counts 取,移动端单列布局
account_detail.html — 签到记录改成上下两行布局(topic+状态 / 消息+时间),分页用统一的上一页/下一页样式,移动端适配
分页逻辑统一:前后端都用 page/total_pages 字段,pagination 组件显示当前页 ±2 页码。
Weibo-HotSign Frontend
Flask-based web frontend for the Weibo-HotSign multi-user signin system.
Features
- User registration and login with JWT authentication
- Weibo account management (add, edit, delete)
- Signin task configuration with Cron expressions
- Signin log viewing with pagination and filtering
- Responsive design with clean UI
Setup
Prerequisites
- Python 3.8+
- pip
Installation
- Create a virtual environment:
python -m venv venv
source venv/bin/activate # On Windows: venv\Scripts\activate
- Install dependencies:
pip install -r requirements.txt
- Create
.envfile from.env.example:
cp .env.example .env
- Update
.envwith your configuration:
FLASK_ENV=development
FLASK_DEBUG=True
SECRET_KEY=your-secret-key-here
API_BASE_URL=http://localhost:8000
AUTH_BASE_URL=http://localhost:8001
Running
python app.py
The application will be available at http://localhost:5000
Project Structure
frontend/
├── app.py # Main Flask application
├── requirements.txt # Python dependencies
├── .env.example # Environment variables template
├── templates/ # HTML templates
│ ├── base.html # Base template with navigation
│ ├── login.html # Login page
│ ├── register.html # Registration page
│ ├── dashboard.html # Account list
│ ├── add_account.html # Add account form
│ ├── edit_account.html # Edit account form
│ ├── account_detail.html # Account details with tasks and logs
│ ├── add_task.html # Add task form
│ ├── 404.html # 404 error page
│ └── 500.html # 500 error page
└── README.md # This file
API Integration
The frontend communicates with two backend services:
-
Auth Service (default: http://localhost:8001)
/auth/register- User registration/auth/login- User login/auth/refresh- Token refresh/auth/me- Get current user
-
API Service (default: http://localhost:8000)
/api/v1/accounts- Account CRUD operations/api/v1/accounts/{id}/tasks- Task management/api/v1/accounts/{id}/signin-logs- Signin logs
Features
Authentication
- User registration with password strength validation
- Login with email and password
- JWT token-based authentication
- Automatic token refresh on expiration
Account Management
- Add multiple Weibo accounts with encrypted cookies
- View account list with status indicators
- Edit account details and cookies
- Delete accounts with cascade deletion
Task Configuration
- Create signin tasks with Cron expressions
- Enable/disable tasks
- Delete tasks
- View task status
Signin Logs
- View signin history for each account
- Pagination support
- Status filtering
- Reward information display
Security
- Passwords are validated for strength (uppercase, lowercase, number, special char, 8+ chars)
- Cookies are encrypted on the backend
- JWT tokens are used for authentication
- Session-based state management
- CSRF protection via Flask-Session
Styling
The frontend uses a custom CSS framework with:
- Responsive grid layout
- Card-based design
- Color-coded status badges
- Mobile-friendly navigation
- Smooth transitions and hover effects
Error Handling
- Graceful error messages for API failures
- Connection error handling
- Form validation
- 404 and 500 error pages
Development
To enable debug mode and auto-reload:
export FLASK_ENV=development
export FLASK_DEBUG=True
python app.py
License
MIT