Initial commit: finish basic WebUI interface
This commit is contained in:
247
README.md
247
README.md
@@ -1,2 +1,247 @@
|
||||
# frontend
|
||||
# Super-frpc Frontend
|
||||
|
||||
Frontend application for Super-frpc - a frpc instance integrated management system. This project provides a user-friendly web interface for managing frpc instances, users, sessions, and monitoring system resources.
|
||||
|
||||
## Features
|
||||
|
||||
- User authentication with token-based login and registration
|
||||
- Instance management (create, delete, modify, start, stop, restart)
|
||||
- User management (create, edit, delete users)
|
||||
- Session management (view and delete active sessions)
|
||||
- System logs viewing with filtering capabilities
|
||||
- Real-time system monitoring (CPU, memory, disk, network)
|
||||
- System information display
|
||||
- Role-based access control (superuser, admin, visitor)
|
||||
- Responsive design with modern UI
|
||||
|
||||
## Technology Stack
|
||||
|
||||
- **Vue.js 3** - Progressive JavaScript framework
|
||||
- **Vue Router 4** - Official router for Vue.js
|
||||
- **Axios** - HTTP client for API requests
|
||||
- **Chart.js** - Charting library for data visualization
|
||||
- **Vite** - Build tool and dev server
|
||||
|
||||
## Project Structure
|
||||
|
||||
```
|
||||
frontend/
|
||||
├── index.html # Entry HTML file
|
||||
├── package.json # Project dependencies and scripts
|
||||
├── vite.config.js # Vite configuration
|
||||
├── src/
|
||||
│ ├── main.js # Application entry point
|
||||
│ ├── App.vue # Root component
|
||||
│ ├── router/
|
||||
│ │ └── index.js # Vue Router configuration
|
||||
│ ├── api/
|
||||
│ │ └── index.js # API service layer
|
||||
│ ├── utils/
|
||||
│ │ └── functions.js # Utility functions
|
||||
│ ├── components/
|
||||
│ │ ├── TopBar.vue # Top navigation bar
|
||||
│ │ └── SideBar.vue # Side navigation menu
|
||||
│ └── views/
|
||||
│ ├── Login.vue # Login/Register page
|
||||
│ ├── Home.vue # Main layout
|
||||
│ ├── Instances.vue # Instance management
|
||||
│ ├── InstanceDetail.vue # Instance details
|
||||
│ ├── Users.vue # User management
|
||||
│ ├── Sessions.vue # Session management
|
||||
│ ├── Logs.vue # System logs
|
||||
│ ├── Monitor.vue # System monitoring
|
||||
│ └── SystemInfo.vue # System information
|
||||
├── logger.js # Logging utility
|
||||
├── api-backend.md # Backend API documentation
|
||||
└── README.md # This file
|
||||
```
|
||||
|
||||
## Installation
|
||||
|
||||
### Prerequisites
|
||||
|
||||
- Node.js (v16 or higher)
|
||||
- npm or yarn
|
||||
- Backend server running (see backend README)
|
||||
|
||||
### Steps
|
||||
|
||||
1. Clone the repository:
|
||||
```bash
|
||||
git clone <repository-url>
|
||||
cd Super-frpc/frontend
|
||||
```
|
||||
|
||||
2. Install dependencies:
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
3. Configure backend API endpoint in `vite.config.js`:
|
||||
```javascript
|
||||
server: {
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:8080', // Change to your backend address
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(/^\/api/, '')
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### Development Mode
|
||||
|
||||
Start the development server:
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
The application will be available at `http://localhost:3000`
|
||||
|
||||
### Production Build
|
||||
|
||||
Build for production:
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
The built files will be in the `dist/` directory.
|
||||
|
||||
### Preview Production Build
|
||||
|
||||
Preview the production build:
|
||||
```bash
|
||||
npm run preview
|
||||
```
|
||||
|
||||
## User Roles and Permissions
|
||||
|
||||
| Feature | superuser | admin | visitor |
|
||||
|---------|-----------|-------|---------|
|
||||
| Login/Register | ✓ | ✓ | ✓ |
|
||||
| Instance Management | ✓ | ✓ | ✓ (view only) |
|
||||
| User Management | ✓ | ✗ | ✗ |
|
||||
| Session Management | ✓ | ✓ | ✗ |
|
||||
| System Logs | ✓ | ✓ | ✗ |
|
||||
| System Monitoring | ✓ | ✓ | ✓ |
|
||||
| System Information | ✓ | ✓ | ✓ |
|
||||
|
||||
## API Integration
|
||||
|
||||
The frontend communicates with the backend through RESTful APIs. All API calls are centralized in `src/api/index.js`.
|
||||
|
||||
### Authentication
|
||||
|
||||
All requests (except `/register`, `/login`, `/system/getStatus`, `/system/getSoftwareInfo`) require authentication via the `X-Token` header.
|
||||
|
||||
### Response Format
|
||||
|
||||
All API responses follow this format:
|
||||
|
||||
**Success:**
|
||||
```json
|
||||
{
|
||||
"success": true,
|
||||
"message": "success message",
|
||||
"data": { ... }
|
||||
}
|
||||
```
|
||||
|
||||
**Error:**
|
||||
```json
|
||||
{
|
||||
"success": false,
|
||||
"message": "error message"
|
||||
}
|
||||
```
|
||||
|
||||
For detailed API documentation, see [api-backend.md](api-backend.md).
|
||||
|
||||
## Development Guidelines
|
||||
|
||||
### Code Style
|
||||
|
||||
- Follow Vue.js official style guide
|
||||
- Use component-based architecture
|
||||
- Keep components small and focused
|
||||
- Use composition API for new components
|
||||
- Add comments for complex logic
|
||||
|
||||
### File Naming
|
||||
|
||||
- Components: PascalCase (e.g., `TopBar.vue`)
|
||||
- Views: PascalCase (e.g., `Instances.vue`)
|
||||
- Utilities: camelCase (e.g., `functions.js`)
|
||||
|
||||
### State Management
|
||||
|
||||
- Use Vue 3 Composition API for local state
|
||||
- Use cookies for authentication state
|
||||
- Use reactive refs for component data
|
||||
|
||||
### API Calls
|
||||
|
||||
- All API calls should go through `src/api/index.js`
|
||||
- Handle errors appropriately
|
||||
- Show user-friendly notifications
|
||||
- Log errors using the `postLog` function
|
||||
|
||||
## Browser Support
|
||||
|
||||
- Chrome (latest)
|
||||
- Firefox (latest)
|
||||
- Safari (latest)
|
||||
- Edge (latest)
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Common Issues
|
||||
|
||||
1. **API connection failed**
|
||||
- Check if backend server is running
|
||||
- Verify proxy configuration in `vite.config.js`
|
||||
- Check browser console for CORS errors
|
||||
|
||||
2. **Login not working**
|
||||
- Verify backend API is accessible
|
||||
- Check browser console for error messages
|
||||
- Ensure cookies are enabled in browser
|
||||
|
||||
3. **Build errors**
|
||||
- Clear `node_modules` and reinstall: `rm -rf node_modules && npm install`
|
||||
- Check Node.js version compatibility
|
||||
|
||||
## Contributing
|
||||
|
||||
Contributions are welcome! Please follow these steps:
|
||||
|
||||
1. Fork the repository
|
||||
2. Create a feature branch (`git checkout -b feature/amazing-feature`)
|
||||
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
|
||||
4. Push to the branch (`git push origin feature/amazing-feature`)
|
||||
5. Open a Pull Request
|
||||
|
||||
### Development Workflow
|
||||
|
||||
1. Ensure all tests pass
|
||||
2. Follow the code style guidelines
|
||||
3. Add comments for complex logic
|
||||
4. Update documentation as needed
|
||||
5. Test thoroughly before submitting
|
||||
|
||||
## License
|
||||
|
||||
GPL-3.0
|
||||
|
||||
## Contact
|
||||
|
||||
For issues and questions, please open an issue on the repository.
|
||||
|
||||
## Acknowledgments
|
||||
|
||||
- Vue.js team for the amazing framework
|
||||
- Chart.js for the visualization library
|
||||
- All contributors who helped make this project better
|
||||
|
||||
Reference in New Issue
Block a user