📝 docs: Add documentation

2025-12-11 03:29:07 +00:00
parent 50e695a1bb
commit 99e7f6062d
135 changed files with 79115 additions and 8 deletions
@@ -0,0 +1,225 @@
+# Dashboard
+
+Dashboard is the homepage of the admin panel, displaying real-time system core data and operational status.
+
+## Page Overview
+
+Dashboard consists of three main areas:
+
+1. **Key Metrics Cards** - 6 core business indicators
+2. **Statistics Charts** - Revenue, user, and traffic statistics
+3. **Sponsor Display** - Shows PPanel sponsors
+
+## Key Metrics Cards
+
+Top section displays 6 key business metric cards:
+
+### Online Users
+- **Display**: Current number of online users
+- **Subtitle**: "Currently Online"
+- **Click Action**: Jump to `/dashboard/user` user management page
+- **Icon**: Blue user icon
+
+### Today's Traffic
+- **Display**: Today's total upload + download traffic
+- **Subtitle**: Shows upload/download traffic breakdown
+  - ↑ Upload traffic
+  - ↓ Download traffic
+- **Icon**: Purple exchange icon
+- **Format**: Auto-converts to appropriate units (KB/MB/GB/TB)
+
+### Monthly Traffic
+- **Display**: This month's total upload + download traffic
+- **Subtitle**: Shows monthly upload/download traffic breakdown
+- **Icon**: Orange cloud data icon
+- **Format**: Auto-converts to appropriate units
+
+### Total Servers
+- **Display**: Online servers + Offline servers
+- **Subtitle**: Shows online/offline server count breakdown
+  - "Online X Offline Y"
+- **Click Action**: Jump to `/dashboard/servers` server management page
+- **Icon**: Green server icon
+
+### Pending Tickets
+- **Display**: Number of tickets awaiting admin reply
+- **Subtitle**: "Pending"
+- **Click Action**: Jump to `/dashboard/ticket` ticket management page
+- **Icon**: Red ticket icon
+
+### System Version Info
+- **Display**:
+  - Backend service version number
+  - Web admin version number
+  - Version update status
+- **Operations**:
+  - Check for updates
+  - One-click update (if new version available)
+  - Restart system
+  - View update logs
+
+::: tip Tip
+Click cards with links to quickly jump to the corresponding management page.
+:::
+
+## Statistics Charts
+
+### Revenue Statistics Chart
+
+Displays system revenue data with three time dimensions:
+
+**Time Dimensions**:
+- **Today**: Today's revenue data
+- **Month**: Daily revenue trend for this month
+- **Total**: Historical cumulative revenue data
+
+**Today's Data** - Pie Chart:
+- **New Purchase**: Revenue from new user orders
+- **Renewal**: Revenue from renewal orders
+- **Center Number**: Today's total revenue
+
+**Month Data** - Bar Chart:
+- X-axis: Daily dates
+- Y-axis: Revenue amount
+- Shows daily revenue bars for the month
+- Hover to view detailed data
+
+**Total Data** - Area Chart:
+- **New Purchase Orders**: Cumulative new purchase order count
+- **Renewal Orders**: Cumulative renewal order count
+- **Total Orders**: Total cumulative orders
+- Area chart showing long-term trends
+
+**Bottom Summary**:
+- New purchase amount / order count
+- Renewal amount / order count
+- Total amount / total order count
+
+### User Statistics Chart
+
+Displays user-related data with three time dimensions:
+
+**Time Dimensions**:
+- **Today**: Today's user data
+- **Month**: Daily user trend for this month
+- **Total**: Historical cumulative user data
+
+**Today's Data** - Pie Chart:
+- **Register**: Today's new registered users
+- **New Purchase**: Today's first-time buyers
+- **Repurchase**: Today's renewal users
+- **Center Number**: Today's total users (register + new purchase + repurchase)
+
+**Month Data** - Bar Chart:
+- X-axis: Daily dates
+- Y-axis: User count
+- Three colored bars:
+  - Registered users (blue)
+  - New purchase users (green)
+  - Renewal users (orange)
+
+**Total Data** - Area Chart:
+- **Registered Users**: Cumulative registration trend
+- **New Purchase Users**: Cumulative new purchase trend
+- **Renewal Users**: Cumulative renewal trend
+- Three area curves showing long-term changes
+
+**Bottom Summary**:
+- Total registered users
+- Total new purchase users
+- Total renewal users
+
+### Traffic Ranking Chart
+
+Displays node or user traffic usage ranking:
+
+**Time Toggle** (top-right tabs):
+- **Today**: Today's traffic ranking
+- **Yesterday**: Yesterday's traffic ranking
+
+**Type Selection** (dropdown):
+- **Node Traffic (Nodes)**: Shows server node traffic consumption ranking
+- **User Traffic (Users)**: Shows user traffic usage ranking
+
+**Chart Display** - Horizontal Bar Chart:
+- Y-axis: Ranking number (1, 2, 3...)
+- X-axis: Traffic size (auto-converts units)
+- Bars: Traffic size visualization
+- Bar Labels: Shows node name or user ID
+
+**Interactions**:
+- Hover: Display detailed traffic data
+- Node Mode: Shows node name and traffic
+- User Mode: Shows user subscription details (ID, package, expiry, etc.)
+
+**Empty State**:
+- Shows empty state message when no data
+
+::: tip Traffic Calculation
+Traffic = Upload traffic + Download traffic, automatically converted to KB/MB/GB/TB units.
+:::
+
+## Sponsor Display
+
+Bottom of page shows sponsors supporting the PPanel project:
+
+**Display Content**:
+- Sponsor logo
+- Sponsor name
+- Brief description
+
+**Data Source**:
+- Fetches latest sponsor list from GitHub repository
+- CDN accelerated access
+- Auto-filters expired sponsors
+
+**Interaction**:
+- Click card to visit sponsor website
+- Opens in new window
+
+::: tip Support PPanel
+Sponsoring helps PPanel continue releasing updates! Click sponsor cards to visit their services.
+:::
+
+## Data Refresh
+
+- **Auto Refresh**: Page data updates automatically based on query configuration
+- **Manual Refresh**: Refresh browser to immediately update all data
+- **Real-time**: Key metrics fetch latest data in real-time
+
+## Usage Recommendations
+
+1. **Daily Review**: Check Dashboard daily to understand operational status
+2. **Monitor Metrics**: Focus on real-time indicators like online users and pending tickets
+3. **Trend Analysis**: Regularly review chart trends to analyze business changes
+4. **Handle Anomalies**: Click cards to jump and handle issues when detecting data anomalies
+5. **Version Updates**: Update system promptly when new version is available
+
+## Troubleshooting
+
+### Inaccurate Data?
+
+1. Refresh browser page to re-fetch data
+2. Check if server time is correct
+3. Review system logs for errors
+
+### Chart Showing Empty?
+
+Possible causes:
+- No data in the time period
+- Data statistics service issue
+- Try refreshing the page
+
+### Sponsors Not Showing?
+
+Possible causes:
+- Network connection issue, cannot access CDN
+- No valid sponsors in current period
+- Browser blocking external resources
+
+## Next Steps
+
+- [User Management](/admin/users-support/users) - View user details and traffic usage
+- [Ticket Management](/admin/users-support/tickets) - Handle pending tickets
+- [Server Management](/admin/maintenance/servers) - Manage server nodes
+- [Order Management](/admin/commerce/orders) - View revenue and order details