WebUI Usage Guide

Login and Authentication

First Access

1. Open your browser and visit the AstrNest frontend address (default: http://localhost:3000)
2. If it's your first time using, the system will prompt you to create an administrator account
3. Fill in administrator information and complete registration

User Authentication

• Administrator Account: Has all permissions, can manage users and system settings
• Regular User: Can only manage their own images and albums
• Guest Mode: Read-only permissions, can browse public images

Dashboard Overview

Home Dashboard

• Upload Statistics: Shows total uploads, today's uploads, storage usage
• Recent Uploads: Displays list of recently uploaded images
• System Status: Shows server status, database connection status
• Quick Actions: One-click upload, create album, view statistics

Navigation Menu

• Home: System overview and quick actions
• Image Management: Manage all uploaded images
• Album Management: Create and manage image albums
• User Management (Admin only): Manage user accounts and permissions
• System Settings (Admin only): Configure system parameters

Image Upload

Single File Upload

1. Click "Upload" button or drag files to upload area
2. Select image files to upload (supports JPG, PNG, GIF, WebP)
3. Set image title, description and tags (optional)
4. Select album (optional)
5. Click "Upload" to complete operation

Batch Upload

1. Click "Batch Upload" button
2. Select multiple image files (supports up to 50 files)
3. Set unified title prefix and tags
4. System automatically generates unique identifiers for each file
5. Shows progress and status during upload

Upload Options

• Image Compression: Automatically compress large images to reduce file size
• Watermark Addition: Add custom watermark to images
• Privacy Settings: Set images as public or private
• CDN Acceleration: Enable CDN for faster image access

Image Management

Image List

• Grid View: Display all images in grid format
• List View: Display detailed information in list format
• Filter Function: Filter by date, size, type, tags
• Search Function: Search images by title, description, tags

Image Operations

• View Details: Click image to view detailed information
• Edit Information: Modify title, description, tags
• Download Image: Download original or compressed version
• Share Link: Copy direct link or share code
• Delete Image: Delete unwanted images

Batch Operations

• Batch Selection: Select multiple images for operations
• Batch Delete: Delete selected multiple images
• Batch Move: Move images to specified album
• Batch Tagging: Add same tags to multiple images

Album Management

Create Album

1. Click "Create Album" button
2. Enter album name and description
3. Set album cover (optional)
4. Set album permissions (public/private)
5. Save album settings

Manage Album

• Add Images: Add images to album
• Remove Images: Remove images from album
• Edit Information: Modify album name and description
• Set Cover: Select album cover image
• Delete Album: Delete entire album

Album Sharing

• Public Album: Anyone can view
• Private Album: Only album creator can view
• Share Link: Generate album share link
• Embed Code: Get album embed code

User Management (Admin Function)

User List

• View all registered users
• View basic user information (username, email, registration time)
• View user upload statistics
• Manage user status (enable/disable)

Permission Management

• Admin Permissions: Grant user administrator permissions
• Upload Permissions: Control user upload permissions
• Storage Limits: Set user storage space limits
• API Permissions: Control user API access permissions

System Settings (Admin Function)

Basic Settings

• Site Name: Set website display name
• Site Description: Set website description
• Logo Settings: Upload website logo
• Theme Settings: Select interface theme color

Upload Settings

• File Size Limit: Set maximum upload file size
• File Type Limit: Set allowed upload file types
• Image Quality Settings: Set image compression quality
• Watermark Settings: Configure image watermark

Security Settings

• User Registration: Enable/disable user registration function
• API Access: Configure API access permissions
• Rate Limiting: Set API call frequency limits
• Log Settings: Configure system log recording

Keyboard Shortcuts

General Shortcuts

• Ctrl/Cmd + U: Open upload dialog
• Ctrl/Cmd + F: Focus search box
• Ctrl/Cmd + S: Save current edit
• Esc: Close dialog or cancel operation

Image Browsing Shortcuts

• ← →: Previous/next image
• Space: Play/pause slideshow
• F: Toggle fullscreen mode
• Z: Zoom image to fit size

Mobile Usage

Responsive Design

AstrNest WebUI fully supports mobile access:

• Adaptive Layout: Automatically adjusts layout based on screen size
• Touch Optimization: Optimized touch operation experience
• Gesture Support: Supports zoom, swipe and other gesture operations
• Offline Support: Supports offline browsing of cached images

Mobile Features

• Camera Upload: Directly take photos and upload using mobile camera
• Geolocation: Add geolocation information to images
• Sharing Function: One-click share images to social platforms
• Push Notifications: Receive system notifications like upload completion