frontend/README.md

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:

git clone <repository-url>
cd Super-frpc/frontend

2. Install dependencies:

npm install

3. Configure backend API endpoint in vite.config.js:

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:

npm run dev

The application will be available at http://localhost:3000

Production Build

Build for production:

npm run build

The built files will be in the dist/ directory.

Preview Production Build

Preview the production build:

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:

{
  "success": true,
  "message": "success message",
  "data": { ... }
}

Error:

{
  "success": false,
  "message": "error message"
}

For detailed API documentation, see 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