Super-frpc/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: finish basic WebUI interface

Browse Source
This commit is contained in:
NanamiAdmin
2026-03-09 21:17:22 +08:00
parent d2a2a4de36
commit 2f6cfe7704
23 changed files with 5028 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@@ -23,3 +23,6 @@ docs/_book
# TODO: where does this rule come from? # TODO: where does this rule come from?
test/ test/
node_modules/
agent.md

247
README.md
View File

@@ -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

27
index.html Normal file
View File

@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Super-frpc</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background-color: #f5f5f5;
}
#app {
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

9
logger.js Normal file
View File

@@ -0,0 +1,9 @@
const postLog={
debug: (msg) => console.log(`[${new Date().toISOString()} - \x1b[34mDEBUG\x1b[0m] ${msg}`),
info: (msg) => console.log(`[${new Date().toISOString()} - \x1b[32mINFO\x1b[0m] ${msg}`),
warn: (msg) => console.warn(`[${new Date().toISOString()} - \x1b[33mWARN\x1b[0m] ${msg}`),
error: (msg) => console.error(`[${new Date().toISOString()} - \x1b[35mERROR\x1b[0m] ${msg}`),
fatal: (msg) => console.error(`[${new Date().toISOString()} - \x1b[31mFATAL\x1b[0m] ${msg}`)
}
export { postLog };

1542
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

22
package.json Normal file
View File

@@ -0,0 +1,22 @@
{
"name": "super-frpc-frontend",
"version": "0.0.1",
"description": "Frontend for Super-frpc - frpc instance integrated management system",
"main": "index.html",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"axios": "^1.6.0",
"chart.js": "^4.4.0",
"vue": "^3.4.0",
"vue-chartjs": "^5.3.0",
"vue-router": "^4.2.0"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.0.0",
"vite": "^5.4.21"
}
}

110
src/App.vue Normal file
View File

@@ -0,0 +1,110 @@
<template>
<div :class="{ 'dark-mode': isDarkMode }">
<router-view />
</div>
</template>
<script>
import { ref, onMounted, watch, provide } from 'vue';
export default {
name: 'App',
setup() {
const isDarkMode = ref(false);
// 检查本地存储中的主题设置
onMounted(() => {
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
isDarkMode.value = savedTheme === 'dark';
} else {
// 检测系统主题偏好
isDarkMode.value = window.matchMedia('(prefers-color-scheme: dark)').matches;
}
updateTheme();
});
// 监听主题变化
watch(isDarkMode, () => {
updateTheme();
localStorage.setItem('theme', isDarkMode.value ? 'dark' : 'light');
});
// 更新主题
const updateTheme = () => {
if (isDarkMode.value) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
};
// 暴露方法给子组件
const toggleTheme = () => {
isDarkMode.value = !isDarkMode.value;
};
// 提供给子组件
provide('isDarkMode', isDarkMode);
provide('toggleTheme', toggleTheme);
return {
isDarkMode,
toggleTheme
};
}
};
</script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--bg-color: #f5f5f5;
--text-color: #333;
--sidebar-bg: #001529;
--sidebar-text: rgba(255, 255, 255, 0.65);
--sidebar-text-hover: white;
--sidebar-bg-hover: rgba(255, 255, 255, 0.1);
--sidebar-active-bg: #667eea;
--card-bg: white;
--border-color: #e8e8e8;
--primary-color: #667eea;
--mark-bg: #fffb8f;
}
.dark {
--bg-color: #1a1a1a;
--text-color: #e0e0e0;
--sidebar-bg: #121212;
--sidebar-text: rgba(255, 255, 255, 0.7);
--sidebar-text-hover: white;
--sidebar-bg-hover: rgba(255, 255, 255, 0.15);
--sidebar-active-bg: #7f56d9;
--card-bg: #2d2d2d;
--border-color: #3d3d3d;
--primary-color: #9e77ed;
--mark-bg: #4a4a00;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;
}
#app {
width: 100%;
min-height: 100vh;
}
mark {
background-color: var(--mark-bg);
padding: 0 2px;
}
</style>

115
src/api/index.js Normal file
View File

@@ -0,0 +1,115 @@
import axios from 'axios';
import { getCookie } from '../utils/functions.js';
const api = axios.create({
baseURL: '/api',
timeout: 10000
});
api.interceptors.request.use(
config => {
const token = getCookie('login-token');
if (token) {
config.headers['X-Token'] = token;
}
config.headers['X-Timestamp'] = Date.now();
return config;
},
error => {
return Promise.reject(error);
}
);
api.interceptors.response.use(
response => {
return response.data;
},
error => {
if (error.response) {
return Promise.reject(error.response.data);
}
return Promise.reject({ success: false, message: 'Network error' });
}
);
export const systemApi = {
getStatus: () => api.get('/system/getStatus'),
getSoftwareInfo: () => api.get('/system/getSoftwareInfo')
};
export const authApi = {
register: (username, passwd, type = 'visitor') =>
api.post('/register', { username, passwd, type }),
login: (username, passwd) =>
api.post('/login', { username, passwd }),
logout: () => api.get('/logout')
};
export const userApi = {
createUser: (username, passwd, type) =>
api.post('/userMgr/create', { username, passwd, type }),
removeUser: (targetUserID) =>
api.post('/userMgr/remove', { targetUserID }),
listUsers: () => api.get('/userMgr/list')
};
export const sessionApi = {
listSessions: () => api.get('/sessionMgr/list'),
removeSession: (sessionID) =>
api.post('/sessionMgr/remove', { sessionID })
};
export const instanceApi = {
createInstance: (instanceInfo, bootAtStart, runUser, additionalProperties) =>
api.post('/frpcAct/instanceMgr/create', {
instanceInfo,
bootAtStart,
runUser,
additionalProperties
}),
deleteInstance: (instanceName) =>
api.post('/frpcAct/instanceMgr/delete', { instanceName }),
modifyInstance: (instanceName, instanceID, type, modifiedData) =>
api.post('/frpcAct/instanceMgr/modify', {
instanceName,
instanceID,
type,
modifiedData
}),
listInstances: () => api.get('/frpcAct/instanceMgr/list'),
startInstance: (instanceName) =>
api.post('/frpcAct/instanceMgr/start', { instanceName }),
stopInstance: (instanceName) =>
api.post('/frpcAct/instanceMgr/stop', { instanceName }),
restartInstance: (instanceName) =>
api.post('/frpcAct/instanceMgr/restart', { instanceName }),
getInstanceLogs: (instanceName) =>
api.get('/frpcAct/instanceMgr/logs', { params: { instanceName } }),
getInstanceProxies: (instanceName) =>
api.get('/frpcAct/instanceMgr/proxies', { params: { instanceName } })
};
export const logApi = {
getLogs: (level) => api.get('/logMgr/list', { params: { level } })
};
export const monitorApi = {
getSystemStats: () => api.get('/monitor/stats')
};
export const systemInfoApi = {
getSystemInfo: () => api.get('/system/info')
};
export default api;
export const TODO_API_NOTES = {
instanceStart: 'TODO: /frpcAct/instanceMgr/start - 启动实例 API 未在 api-backend.md 中定义',
instanceStop: 'TODO: /frpcAct/instanceMgr/stop - 停止实例 API 未在 api-backend.md 中定义',
instanceRestart: 'TODO: /frpcAct/instanceMgr/restart - 重启实例 API 未在 api-backend.md 中定义',
instanceLogs: 'TODO: /frpcAct/instanceMgr/logs - 获取实例日志 API 未在 api-backend.md 中定义',
instanceProxies: 'TODO: /frpcAct/instanceMgr/proxies - 获取实例代理列表 API 未在 api-backend.md 中定义',
logList: 'TODO: /logMgr/list - 获取系统日志 API 未在 api-backend.md 中定义',
monitorStats: 'TODO: /monitor/stats - 获取系统监控数据 API 未在 api-backend.md 中定义',
systemInfo: 'TODO: /system/info - 获取系统信息 API 未在 api-backend.md 中定义'
};

141
src/components/SideBar.vue Normal file
View File

@@ -0,0 +1,141 @@
<template>
<div class="sidebar">
<div class="menu">
<router-link
v-for="item in menuItems"
:key="item.path"
:to="item.path"
class="menu-item"
active-class="active"
>
<span class="menu-icon">{{ item.icon }}</span>
<span class="menu-text">{{ item.title }}</span>
</router-link>
</div>
<div class="theme-toggle">
<button @click="toggleTheme" class="theme-button">
<span class="theme-icon">{{ isDarkMode ? '☀️' : '🌙' }}</span>
<span class="theme-text">{{ isDarkMode ? 'Dark Mode' : 'Light Mode' }}</span>
</button>
</div>
</div>
</template>
<script>
import { computed, inject } from 'vue';
import { getCookie } from '../utils/functions.js';
export default {
name: 'SideBar',
setup() {
const userType = getCookie('user-type') || 'visitor';
const isDarkMode = inject('isDarkMode');
const toggleTheme = inject('toggleTheme');
const allMenuItems = [
{ path: '/instances', title: 'Instance Management', icon: '📦', permission: ['superuser', 'admin', 'visitor'] },
{ path: '/users', title: 'User Management', icon: '👥', permission: ['superuser'] },
{ path: '/sessions', title: 'Session Management', icon: '🔑', permission: ['superuser', 'admin'] },
{ path: '/logs', title: 'System Logs', icon: '📋', permission: ['superuser', 'admin'] },
{ path: '/monitor', title: 'System Monitoring', icon: '📊', permission: ['superuser', 'admin', 'visitor'] },
{ path: '/system-info', title: 'System Information', icon: 'ℹ️', permission: ['superuser', 'admin', 'visitor'] }
];
const menuItems = computed(() => {
return allMenuItems.filter(item => item.permission.includes(userType));
});
return {
menuItems,
isDarkMode,
toggleTheme
};
}
};
</script>
<style scoped>
.sidebar {
position: fixed;
left: 0;
top: 64px;
bottom: 0;
width: 240px;
background: var(--sidebar-bg);
overflow-y: auto;
display: flex;
flex-direction: column;
}
.menu {
padding: 16px 0;
flex: 1;
}
.menu-item {
display: flex;
align-items: center;
padding: 12px 24px;
color: var(--sidebar-text);
text-decoration: none;
transition: all 0.3s;
margin: 4px 12px;
border-radius: 6px;
}
.menu-item:hover {
color: var(--sidebar-text-hover);
background: var(--sidebar-bg-hover);
}
.menu-item.active {
color: var(--sidebar-text-hover);
background: var(--sidebar-active-bg);
}
.menu-icon {
font-size: 18px;
margin-right: 12px;
width: 24px;
text-align: center;
}
.menu-text {
font-size: 14px;
font-weight: 500;
}
.theme-toggle {
padding: 16px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.theme-button {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 10px 16px;
background: rgba(255, 255, 255, 0.1);
color: var(--sidebar-text);
border: none;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s;
font-size: 14px;
}
.theme-button:hover {
background: rgba(255, 255, 255, 0.2);
color: var(--sidebar-text-hover);
}
.theme-icon {
font-size: 16px;
margin-right: 8px;
}
.theme-text {
font-weight: 500;
}
</style>

212
src/components/TopBar.vue Normal file
View File

@@ -0,0 +1,212 @@
<template>
<div class="topbar">
<div class="topbar-left">
<h1 class="logo">Super-frpc</h1>
</div>
<div class="topbar-center">
<div class="search-box">
<input
type="text"
v-model="searchQuery"
placeholder="Search Instances..."
@input="handleSearch"
>
<span class="search-icon">🔍</span>
</div>
</div>
<div class="topbar-right">
<div class="status-info">
<span :class="['status-dot', { online: isOnline }]"></span>
<span class="status-text">{{ isOnline ? 'Online' : 'Offline' }}</span>
</div>
<div class="version-info" v-if="softwareInfo">
<span>v{{ softwareInfo.Version }}</span>
</div>
<div class="user-info">
<div class="avatar">{{ username.charAt(0).toUpperCase() }}</div>
<span class="username">{{ username }}</span>
</div>
</div>
</div>
</template>
<script>
import { ref, onMounted } from 'vue';
import { systemApi } from '../api/index.js';
import { getCookie } from '../utils/functions.js';
export default {
name: 'TopBar',
emits: ['search'],
setup(props, { emit }) {
const searchQuery = ref('');
const isOnline = ref(false);
const softwareInfo = ref(null);
const username = ref(getCookie('username') || 'User');
const checkStatus = async () => {
try {
const result = await systemApi.getStatus();
isOnline.value = result.data.Status === 'Online';
} catch (error) {
isOnline.value = false;
}
};
const getSoftwareInfo = async () => {
try {
const result = await systemApi.getSoftwareInfo();
softwareInfo.value = result.data;
} catch (error) {
console.error('Failed to get software info:', error);
}
};
const handleSearch = () => {
emit('search', searchQuery.value);
};
onMounted(() => {
checkStatus();
getSoftwareInfo();
setInterval(checkStatus, 5000);
});
return {
searchQuery,
isOnline,
softwareInfo,
username,
handleSearch
};
}
};
</script>
<style scoped>
.topbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
height: 64px;
background: var(--card-bg);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
transition: background-color 0.3s;
}
.topbar-left {
display: flex;
align-items: center;
}
.logo {
font-size: 24px;
font-weight: 600;
color: var(--primary-color);
margin: 0;
}
.topbar-center {
flex: 1;
display: flex;
justify-content: center;
padding: 0 100px;
}
.search-box {
position: relative;
width: 100%;
max-width: 400px;
}
.search-box input {
width: 100%;
padding: 10px 40px 10px 16px;
border: 1px solid var(--border-color);
border-radius: 20px;
font-size: 14px;
transition: all 0.3s;
background: var(--bg-color);
color: var(--text-color);
}
.search-box input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.search-icon {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
color: #999;
}
.topbar-right {
display: flex;
align-items: center;
gap: 24px;
}
.status-info {
display: flex;
align-items: center;
gap: 8px;
}
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #ff4d4f;
}
.status-dot.online {
background: #52c41a;
}
.status-text {
font-size: 14px;
color: var(--text-color);
}
.version-info {
font-size: 14px;
color: #999;
}
.user-info {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
}
.avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-color) 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
font-size: 14px;
}
.username {
font-size: 14px;
color: var(--text-color);
font-weight: 500;
}
</style>

7
src/main.js Normal file
View File

@@ -0,0 +1,7 @@
import { createApp } from 'vue';
import App from './App.vue';
import router from './router/index.js';
const app = createApp(App);
app.use(router);
app.mount('#app');

87
src/router/index.js Normal file
View File

@@ -0,0 +1,87 @@
import { createRouter, createWebHistory } from 'vue-router';
import { getCookie } from '../utils/functions.js';
const routes = [
{
path: '/login',
name: 'Login',
component: () => import('../views/Login.vue'),
meta: { requiresAuth: false }
},
{
path: '/',
name: 'Home',
component: () => import('../views/Home.vue'),
meta: { requiresAuth: true },
redirect: '/instances',
children: [
{
path: 'instances',
name: 'Instances',
component: () => import('../views/Instances.vue')
},
{
path: 'instances/:name',
name: 'InstanceDetail',
component: () => import('../views/InstanceDetail.vue')
},
{
path: 'users',
name: 'Users',
component: () => import('../views/Users.vue'),
meta: { requiresAuth: true, permission: ['superuser'] }
},
{
path: 'sessions',
name: 'Sessions',
component: () => import('../views/Sessions.vue'),
meta: { requiresAuth: true, permission: ['superuser', 'admin'] }
},
{
path: 'logs',
name: 'Logs',
component: () => import('../views/Logs.vue'),
meta: { requiresAuth: true, permission: ['superuser', 'admin'] }
},
{
path: 'monitor',
name: 'Monitor',
component: () => import('../views/Monitor.vue'),
meta: { requiresAuth: true }
},
{
path: 'system-info',
name: 'SystemInfo',
component: () => import('../views/SystemInfo.vue'),
meta: { requiresAuth: true }
}
]
}
];
const router = createRouter({
history: createWebHistory(),
routes
});
router.beforeEach((to, from, next) => {
const token = getCookie('login-token');
const userType = getCookie('user-type');
if (to.meta.requiresAuth && !token) {
next('/login');
} else if (to.path === '/login' && token) {
next('/');
} else if (to.meta.permission) {
const permissions = to.meta.permission;
if (!permissions.includes(userType)) {
next('/instances');
} else {
next();
}
} else {
next();
}
});
export default router;

140
src/utils/functions.js Normal file
View File

@@ -0,0 +1,140 @@
import { postLog } from '../../logger.js';
function showNotification(message, type = 'info') {
const icons = {
success: '✓',
error: '✕',
info: 'ℹ',
warning: '⚠'
};
const colors = {
success: '#52c41a',
error: '#ff4d4f',
info: '#1890ff',
warning: '#faad14'
};
const notification = document.createElement('div');
notification.style.cssText = `
position: fixed;
top: -60px;
left: 50%;
transform: translateX(-50%);
background: ${colors[type] || colors.info};
color: white;
padding: 12px 24px;
border-radius: 8px;
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 500;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 10000;
transition: top 0.3s ease-out;
cursor: pointer;
`;
notification.innerHTML = `<span style="font-size: 18px;">${icons[type] || icons.info}</span><span>${message}</span>`;
document.body.appendChild(notification);
setTimeout(() => {
notification.style.top = '20px';
}, 10);
setTimeout(() => {
notification.style.top = '-60px';
setTimeout(() => {
document.body.removeChild(notification);
}, 300);
}, 3000);
notification.addEventListener('click', () => {
notification.style.top = '-60px';
setTimeout(() => {
document.body.removeChild(notification);
}, 300);
});
postLog.info(`Notification: ${message} (${type})`);
}
function setCookie(name, value, days = 7) {
const expires = new Date();
expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/`;
postLog.debug(`Cookie set: ${name}`);
}
function getCookie(name) {
const nameEQ = name + '=';
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
let cookie = cookies[i];
while (cookie.charAt(0) === ' ') {
cookie = cookie.substring(1, cookie.length);
}
if (cookie.indexOf(nameEQ) === 0) {
const value = cookie.substring(nameEQ.length, cookie.length);
postLog.debug(`Cookie get: ${name}`);
return value;
}
}
return null;
}
function deleteCookie(name) {
document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/`;
postLog.debug(`Cookie deleted: ${name}`);
}
function formatDate(timestamp) {
const date = new Date(timestamp);
return date.toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
}
function formatBytes(bytes) {
if (bytes === 0) return '0 B';
const k = 1024;
const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}
function highlightText(text, keyword) {
if (!keyword) return text;
const regex = new RegExp(`(${keyword})`, 'gi');
return text.replace(regex, '<mark style="background-color: #fffb8f; padding: 0 2px;">$1</mark>');
}
function debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
export {
showNotification,
setCookie,
getCookie,
deleteCookie,
formatDate,
formatBytes,
highlightText,
debounce
};

50
src/views/Home.vue Normal file
View File

@@ -0,0 +1,50 @@
<template>
<div class="home-container">
<TopBar @search="handleSearch" />
<SideBar />
<div class="main-content">
<router-view :searchQuery="searchQuery" />
</div>
</div>
</template>
<script>
import { ref } from 'vue';
import TopBar from '../components/TopBar.vue';
import SideBar from '../components/SideBar.vue';
export default {
name: 'Home',
components: {
TopBar,
SideBar
},
setup() {
const searchQuery = ref('');
const handleSearch = (query) => {
searchQuery.value = query;
};
return {
searchQuery,
handleSearch
};
}
};
</script>
<style scoped>
.home-container {
min-height: 100vh;
background: var(--bg-color);
transition: background-color 0.3s;
}
.main-content {
margin-left: 240px;
margin-top: 64px;
padding: 24px;
min-height: calc(100vh - 64px);
}
</style>

342
src/views/InstanceDetail.vue Normal file
View File

@@ -0,0 +1,342 @@
<template>
<div class="instance-detail-page">
<div class="page-header">
<button class="back-btn" @click="goBack">
← Back
</button>
<h2>{{ instanceName }} - Details</h2>
</div>
<div class="detail-content">
<div class="section">
<h3>Configuration</h3>
<div class="config-list">
<div class="config-item" v-for="(value, key) in instanceConfig" :key="key">
<span class="config-key">{{ key }}:</span>
<span class="config-value">{{ value }}</span>
</div>
</div>
</div>
<div class="section">
<h3>Proxy List</h3>
<div v-if="proxies.length > 0" class="proxy-list">
<div v-for="proxy in proxies" :key="proxy.name" class="proxy-item">
<div class="proxy-header">
<span class="proxy-name">{{ proxy.name }}</span>
<span :class="['proxy-status', proxy.status]">
{{ proxy.status }}
</span>
</div>
<div class="proxy-details">
<div class="proxy-detail" v-for="(value, key) in proxy.details" :key="key">
<span class="detail-key">{{ key }}:</span>
<span class="detail-value">{{ value }}</span>
</div>
</div>
</div>
</div>
<div v-else class="empty-state">
<p>No proxies available</p>
</div>
</div>
<div class="section">
<h3>Logs</h3>
<div class="logs-container">
<div v-if="logs.length > 0" class="log-list">
<div v-for="(log, index) in logs" :key="index" class="log-item">
<span class="log-time">{{ log.time }}</span>
<span :class="['log-level', log.level]">{{ log.level }}</span>
<span class="log-message">{{ log.message }}</span>
</div>
</div>
<div v-else class="empty-state">
<p>No logs available</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { instanceApi } from '../api/index.js';
import { showNotification, formatDate } from '../utils/functions.js';
export default {
name: 'InstanceDetail',
setup() {
const route = useRoute();
const router = useRouter();
const instanceName = ref(route.params.name);
const instanceConfig = ref({});
const proxies = ref([]);
const logs = ref([]);
const loadInstanceConfig = async () => {
try {
const result = await instanceApi.listInstances();
const instance = result.data.find(i => i.name === instanceName.value);
if (instance) {
instanceConfig.value = {
'Server Address': instance.serverAddr,
'Server Port': instance.serverPort,
'Auth Method': instance.auth_method,
'Boot At Start': instance.bootAtStart ? 'Yes' : 'No',
'Run User': instance.runUser,
'Config Path': instance.configPath,
'Created At': formatDate(instance.createdAt)
};
}
} catch (error) {
showNotification('Load instance configuration failed', 'error');
}
};
const loadProxies = async () => {
try {
const result = await instanceApi.getInstanceProxies(instanceName.value);
proxies.value = result.data.map(proxy => ({
name: proxy.name,
status: proxy.status || 'unknown',
details: proxy
}));
} catch (error) {
showNotification('Load proxy list failed', 'error');
}
};
const loadLogs = async () => {
try {
const result = await instanceApi.getInstanceLogs(instanceName.value);
logs.value = result.data.map(log => ({
time: formatDate(log.timestamp),
level: log.level,
message: log.message
}));
} catch (error) {
showNotification('Load logs failed', 'error');
}
};
const goBack = () => {
router.push('/instances');
};
onMounted(() => {
loadInstanceConfig();
loadProxies();
loadLogs();
});
return {
instanceName,
instanceConfig,
proxies,
logs,
goBack
};
}
};
</script>
<style scoped>
.instance-detail-page {
padding: 24px;
}
.page-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 24px;
}
.back-btn {
padding: 8px 16px;
background: #f0f0f0;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: all 0.3s;
}
.back-btn:hover {
background: #e0e0e0;
}
.page-header h2 {
font-size: 24px;
color: var(--text-color);
margin: 0;
transition: color 0.3s;
}
.detail-content {
display: flex;
flex-direction: column;
gap: 24px;
}
.section {
background: var(--card-bg);
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: background-color 0.3s;
}
.section h3 {
font-size: 18px;
color: var(--text-color);
margin: 0 0 16px 0;
transition: color 0.3s;
}
.config-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.config-item {
display: flex;
justify-content: space-between;
padding: 12px;
background: #f9f9f9;
border-radius: 6px;
}
.config-key {
color: #666;
font-weight: 500;
}
.config-value {
color: var(--text-color);
transition: color 0.3s;
}
.proxy-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.proxy-item {
padding: 16px;
background: #f9f9f9;
border-radius: 6px;
}
.proxy-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.proxy-name {
font-size: 16px;
font-weight: 600;
color: var(--text-color);
transition: color 0.3s;
}
.proxy-status {
padding: 4px 12px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
}
.proxy-status.active {
background: #f6ffed;
color: #52c41a;
}
.proxy-status.inactive {
background: #fff1f0;
color: #ff4d4f;
}
.proxy-details {
display: flex;
flex-direction: column;
gap: 8px;
}
.proxy-detail {
display: flex;
justify-content: space-between;
font-size: 14px;
}
.detail-key {
color: #666;
}
.detail-value {
color: var(--text-color);
transition: color 0.3s;
}
.logs-container {
max-height: 400px;
overflow-y: auto;
}
.log-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.log-item {
display: flex;
gap: 12px;
padding: 8px;
background: #f9f9f9;
border-radius: 4px;
font-size: 14px;
}
.log-time {
color: #999;
min-width: 140px;
}
.log-level {
min-width: 60px;
font-weight: 500;
}
.log-level.INFO {
color: #1890ff;
}
.log-level.WARN {
color: #faad14;
}
.log-level.ERROR {
color: #ff4d4f;
}
.log-message {
color: var(--text-color);
flex: 1;
transition: color 0.3s;
}
.empty-state {
text-align: center;
padding: 40px 20px;
color: #999;
font-size: 14px;
}
</style>

266
src/views/Instances.vue Normal file
View File

@@ -0,0 +1,266 @@
<template>
<div class="instances-page">
<div class="page-header">
<h2>Instance Management</h2>
</div>
<div class="instances-grid">
<div
v-for="instance in filteredInstances"
:key="instance.name"
class="instance-card"
@click="goToDetail(instance.name)"
>
<div class="card-header">
<h3 class="instance-name">{{ highlightText(instance.name, searchQuery) }}</h3>
<span :class="['status-badge', instance.status]">
{{ instance.status === 'running' ? 'Running' : 'Stopped' }}
</span>
</div>
<div class="card-body">
<div class="info-row" v-if="instance.webuiPort">
<span class="label">WebUI Port:</span>
<span class="value">{{ instance.webuiPort }}</span>
</div>
<div class="info-row">
<span class="label">Created At:</span>
<span class="value">{{ formatDate(instance.createdAt) }}</span>
</div>
<div class="info-row">
<span class="label">Last Active:</span>
<span class="value">{{ formatDate(instance.lastActive) }}</span>
</div>
</div>
<div class="card-footer" @click.stop>
<button
v-if="instance.status !== 'running'"
class="action-btn start-btn"
@click="startInstance(instance.name)"
>
Start
</button>
<button
v-else
class="action-btn stop-btn"
@click="stopInstance(instance.name)"
>
Stop
</button>
</div>
</div>
</div>
<div v-if="filteredInstances.length === 0" class="empty-state">
<p>No instances available</p>
</div>
</div>
</template>
<script>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { instanceApi } from '../api/index.js';
import { showNotification, formatDate, highlightText } from '../utils/functions.js';
export default {
name: 'Instances',
props: {
searchQuery: {
type: String,
default: ''
}
},
setup(props) {
const router = useRouter();
const instances = ref([]);
const filteredInstances = computed(() => {
if (!props.searchQuery) return instances.value;
return instances.value.filter(instance =>
instance.name.toLowerCase().includes(props.searchQuery.toLowerCase())
);
});
const loadInstances = async () => {
try {
const result = await instanceApi.listInstances();
instances.value = result.data.map(instance => ({
...instance,
status: 'stopped'
}));
} catch (error) {
showNotification('Load instance list failed', 'error');
}
};
const startInstance = async (instanceName) => {
try {
await instanceApi.startInstance(instanceName);
showNotification('Instance started successfully', 'success');
await loadInstances();
} catch (error) {
showNotification(error.message || 'Start instance failed', 'error');
}
};
const stopInstance = async (instanceName) => {
try {
await instanceApi.stopInstance(instanceName);
showNotification('Instance stopped successfully', 'success');
await loadInstances();
} catch (error) {
showNotification(error.message || 'Stop instance failed', 'error');
}
};
const goToDetail = (instanceName) => {
router.push(`/instances/${instanceName}`);
};
onMounted(() => {
loadInstances();
});
return {
instances,
filteredInstances,
startInstance,
stopInstance,
goToDetail,
formatDate,
highlightText
};
}
};
</script>
<style scoped>
.instances-page {
padding: 24px;
}
.page-header {
margin-bottom: 24px;
}
.page-header h2 {
font-size: 24px;
color: var(--text-color);
margin: 0;
transition: color 0.3s;
}
.instances-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.instance-card {
background: var(--card-bg);
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
cursor: pointer;
transition: all 0.3s;
}
.instance-card:hover {
transform: translateY(-4px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.instance-name {
font-size: 18px;
font-weight: 600;
color: var(--text-color);
margin: 0;
transition: color 0.3s;
}
.status-badge {
padding: 4px 12px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
}
.status-badge.running {
background: #f6ffed;
color: #52c41a;
}
.status-badge.stopped {
background: #fff1f0;
color: #ff4d4f;
}
.card-body {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px;
}
.info-row {
display: flex;
justify-content: space-between;
font-size: 14px;
}
.info-row .label {
color: #666;
}
.info-row .value {
color: var(--text-color);
font-weight: 500;
transition: color 0.3s;
}
.card-footer {
display: flex;
gap: 8px;
}
.action-btn {
flex: 1;
padding: 8px 16px;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s;
}
.start-btn {
background: #52c41a;
color: white;
}
.start-btn:hover {
background: #45a049;
}
.stop-btn {
background: #ff4d4f;
color: white;
}
.stop-btn:hover {
background: #f04142;
}
.empty-state {
text-align: center;
padding: 60px 20px;
color: #999;
font-size: 16px;
}
</style>

236
src/views/Login.vue Normal file
View File

@@ -0,0 +1,236 @@
<template>
<div class="login-container">
<div class="login-box">
<h1 class="title">Super-frpc</h1>
<div class="tabs">
<button
:class="['tab', { active: activeTab === 'login' }]"
@click="activeTab = 'login'"
>
Login
</button>
<button
:class="['tab', { active: activeTab === 'register' }]"
@click="activeTab = 'register'"
>
Register
</button>
</div>
<form @submit.prevent="handleSubmit" class="form">
<div class="form-group">
<label>Username</label>
<input
type="text"
v-model="formData.username"
placeholder="Enter username"
required
>
</div>
<div class="form-group">
<label>Password</label>
<input
type="password"
v-model="formData.passwd"
placeholder="Enter password"
required
>
</div>
<div class="form-group" v-if="activeTab === 'register'">
<label>Confirm Password</label>
<input
type="password"
v-model="formData.confirmPasswd"
placeholder="Enter password again"
required
>
</div>
<button type="submit" class="submit-btn" :disabled="loading">
{{ loading ? 'Processing...' : (activeTab === 'login' ? 'Login' : 'Register') }}
</button>
</form>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { authApi } from '../api/index.js';
import { showNotification, setCookie } from '../utils/functions.js';
export default {
name: 'Login',
setup() {
const router = useRouter();
const activeTab = ref('login');
const loading = ref(false);
const formData = ref({
username: '',
passwd: '',
confirmPasswd: ''
});
const handleSubmit = async () => {
if (activeTab.value === 'register') {
if (formData.value.passwd !== formData.value.confirmPasswd) {
showNotification('Passwords do not match', 'error');
return;
}
if (formData.value.passwd.length < 8) {
showNotification('Password must be at least 8 characters long', 'error');
return;
}
}
loading.value = true;
try {
if (activeTab.value === 'register') {
const result = await authApi.register(
formData.value.username,
formData.value.passwd
);
showNotification('Registration successful, logging in...', 'success');
const loginResult = await authApi.login(
formData.value.username,
formData.value.passwd
);
handleLoginSuccess(loginResult);
} else {
const result = await authApi.login(
formData.value.username,
formData.value.passwd
);
handleLoginSuccess(result);
}
} catch (error) {
showNotification(error.message || 'Login failed', 'error');
} finally {
loading.value = false;
}
};
const handleLoginSuccess = (result) => {
setCookie('login-token', result.data.token);
setCookie('user-id', result.data.userID);
setCookie('username', result.data.username);
setCookie('user-type', result.data.type);
showNotification('Login successful', 'success');
router.push('/');
};
return {
activeTab,
loading,
formData,
handleSubmit
};
}
};
</script>
<style scoped>
.login-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.login-box {
background: var(--card-bg, white);
padding: 40px;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
width: 400px;
transition: background-color 0.3s;
}
.title {
text-align: center;
color: var(--text-color, #333);
margin-bottom: 30px;
font-size: 28px;
transition: color 0.3s;
}
.tabs {
display: flex;
margin-bottom: 30px;
border-bottom: 2px solid var(--border-color, #e8e8e8);
}
.tab {
flex: 1;
padding: 12px;
border: none;
background: none;
cursor: pointer;
font-size: 16px;
color: #666;
transition: all 0.3s;
}
.tab.active {
color: var(--primary-color, #667eea);
border-bottom: 2px solid var(--primary-color, #667eea);
margin-bottom: -2px;
}
.form {
display: flex;
flex-direction: column;
gap: 20px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.form-group label {
font-size: 14px;
color: #666;
font-weight: 500;
}
.form-group input {
padding: 12px;
border: 1px solid var(--border-color, #ddd);
border-radius: 6px;
font-size: 14px;
transition: border-color 0.3s;
background: var(--bg-color, #f5f5f5);
color: var(--text-color, #333);
}
.form-group input:focus {
outline: none;
border-color: var(--primary-color, #667eea);
}
.submit-btn {
padding: 12px;
background: linear-gradient(135deg, var(--primary-color, #667eea) 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 6px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
}
.submit-btn:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.submit-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
</style>

180
src/views/Logs.vue Normal file
View File

@@ -0,0 +1,180 @@
<template>
<div class="logs-page">
<div class="page-header">
<h2>System Logs</h2>
<div class="filter-controls">
<select v-model="selectedLevel" @change="loadLogs">
<option value="">All Levels</option>
<option value="DEBUG">DEBUG</option>
<option value="INFO">INFO</option>
<option value="WARN">WARN</option>
<option value="ERROR">ERROR</option>
<option value="FATAL">FATAL</option>
</select>
</div>
</div>
<div class="logs-container">
<div v-if="logs.length > 0" class="log-list">
<div v-for="(log, index) in logs" :key="index" class="log-item">
<span class="log-time">{{ log.time }}</span>
<span :class="['log-level', log.level]">{{ log.level }}</span>
<span class="log-message">{{ log.message }}</span>
</div>
</div>
<div v-else class="empty-state">
<p>No logs available</p>
</div>
</div>
</div>
</template>
<script>
import { ref, onMounted } from 'vue';
import { logApi } from '../api/index.js';
import { showNotification, formatDate } from '../utils/functions.js';
export default {
name: 'Logs',
setup() {
const logs = ref([]);
const selectedLevel = ref('');
const loadLogs = async () => {
try {
const result = await logApi.getLogs(selectedLevel.value);
logs.value = result.data.map(log => ({
time: formatDate(log.timestamp),
level: log.level,
message: log.message
}));
} catch (error) {
showNotification('Failed to load logs', 'error');
}
};
onMounted(() => {
loadLogs();
});
return {
logs,
selectedLevel,
loadLogs
};
}
};
</script>
<style scoped>
.logs-page {
padding: 24px;
}
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.page-header h2 {
font-size: 24px;
color: var(--text-color);
margin: 0;
transition: color 0.3s;
}
.filter-controls select {
padding: 8px 16px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 14px;
background: var(--card-bg);
color: var(--text-color);
cursor: pointer;
transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.filter-controls select:focus {
outline: none;
border-color: var(--primary-color);
}
.logs-container {
background: var(--card-bg);
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
max-height: calc(100vh - 200px);
overflow-y: auto;
transition: background-color 0.3s;
}
.log-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.log-item {
display: flex;
gap: 12px;
padding: 12px;
background: #f9f9f9;
border-radius: 6px;
font-size: 14px;
font-family: 'Consolas', 'Monaco', monospace;
}
.log-time {
color: #999;
min-width: 160px;
}
.log-level {
min-width: 70px;
font-weight: 600;
text-align: center;
padding: 2px 8px;
border-radius: 4px;
}
.log-level.DEBUG {
color: #52c41a;
background: #f6ffed;
}
.log-level.INFO {
color: #1890ff;
background: #e6f7ff;
}
.log-level.WARN {
color: #faad14;
background: #fffbe6;
}
.log-level.ERROR {
color: #ff4d4f;
background: #fff1f0;
}
.log-level.FATAL {
color: #cf1322;
background: #fff1f0;
}
.log-message {
color: var(--text-color);
flex: 1;
word-break: break-all;
transition: color 0.3s;
}
.empty-state {
text-align: center;
padding: 60px 20px;
color: #999;
font-size: 16px;
}
</style>

338
src/views/Monitor.vue Normal file
View File

@@ -0,0 +1,338 @@
<template>
<div class="monitor-page">
<div class="page-header">
<h2>System Monitoring</h2>
</div>
<div class="monitor-grid">
<div class="monitor-card">
<div class="card-header">
<h3>CPU Usage</h3>
<span class="card-value">{{ cpuUsage }}%</span>
</div>
<div class="chart-container">
<canvas ref="cpuChart"></canvas>
</div>
</div>
<div class="monitor-card">
<div class="card-header">
<h3>Memory Usage</h3>
<span class="card-value">{{ memoryUsage }}%</span>
</div>
<div class="chart-container">
<canvas ref="memoryChart"></canvas>
</div>
</div>
<div class="monitor-card">
<div class="card-header">
<h3>Disk Usage</h3>
<span class="card-value">{{ diskUsage }}%</span>
</div>
<div class="chart-container">
<canvas ref="diskChart"></canvas>
</div>
</div>
<div class="monitor-card">
<div class="card-header">
<h3>Network Traffic</h3>
</div>
<div class="network-stats">
<div class="network-item">
<span class="network-label">Upload:</span>
<span class="network-value">{{ formatBytes(networkUpload) }}/s</span>
</div>
<div class="network-item">
<span class="network-label">Download:</span>
<span class="network-value">{{ formatBytes(networkDownload) }}/s</span>
</div>
</div>
<div class="chart-container">
<canvas ref="networkChart"></canvas>
</div>
</div>
</div>
</div>
</template>
<script>
import { ref, onMounted, onUnmounted } from 'vue';
import { Chart, registerables } from 'chart.js';
import { monitorApi } from '../api/index.js';
import { showNotification, formatBytes } from '../utils/functions.js';
Chart.register(...registerables);
export default {
name: 'Monitor',
setup() {
const cpuUsage = ref(0);
const memoryUsage = ref(0);
const diskUsage = ref(0);
const networkUpload = ref(0);
const networkDownload = ref(0);
const cpuChart = ref(null);
const memoryChart = ref(null);
const diskChart = ref(null);
const networkChart = ref(null);
let cpuChartInstance = null;
let memoryChartInstance = null;
let diskChartInstance = null;
let networkChartInstance = null;
let updateInterval = null;
const createChart = (canvas, data, label, color) => {
return new Chart(canvas, {
type: 'line',
data: {
labels: Array(20).fill(''),
datasets: [{
label: label,
data: data,
borderColor: color,
backgroundColor: color + '20',
fill: true,
tension: 0.4,
pointRadius: 0,
borderWidth: 2
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
}
},
scales: {
y: {
beginAtZero: true,
max: 100,
ticks: {
callback: (value) => value + '%'
}
},
x: {
display: false
}
},
animation: {
duration: 0
}
}
});
};
const createNetworkChart = (canvas, uploadData, downloadData) => {
return new Chart(canvas, {
type: 'line',
data: {
labels: Array(20).fill(''),
datasets: [
{
label: '上传',
data: uploadData,
borderColor: '#52c41a',
backgroundColor: '#52c41a20',
fill: true,
tension: 0.4,
pointRadius: 0,
borderWidth: 2
},
{
label: '下载',
data: downloadData,
borderColor: '#1890ff',
backgroundColor: '#1890ff20',
fill: true,
tension: 0.4,
pointRadius: 0,
borderWidth: 2
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: true,
position: 'top'
}
},
scales: {
y: {
beginAtZero: true,
ticks: {
callback: (value) => formatBytes(value) + '/s'
}
},
x: {
display: false
}
},
animation: {
duration: 0
}
}
});
};
const updateStats = async () => {
try {
const result = await monitorApi.getSystemStats();
const stats = result.data;
cpuUsage.value = stats.cpuUsage || 0;
memoryUsage.value = stats.memoryUsage || 0;
diskUsage.value = stats.diskUsage || 0;
networkUpload.value = stats.networkUpload || 0;
networkDownload.value = stats.networkDownload || 0;
if (cpuChartInstance) {
cpuChartInstance.data.datasets[0].data.push(cpuUsage.value);
cpuChartInstance.data.datasets[0].data.shift();
cpuChartInstance.update('none');
}
if (memoryChartInstance) {
memoryChartInstance.data.datasets[0].data.push(memoryUsage.value);
memoryChartInstance.data.datasets[0].data.shift();
memoryChartInstance.update('none');
}
if (diskChartInstance) {
diskChartInstance.data.datasets[0].data.push(diskUsage.value);
diskChartInstance.data.datasets[0].data.shift();
diskChartInstance.update('none');
}
if (networkChartInstance) {
networkChartInstance.data.datasets[0].data.push(networkUpload.value);
networkChartInstance.data.datasets[0].data.shift();
networkChartInstance.data.datasets[1].data.push(networkDownload.value);
networkChartInstance.data.datasets[1].data.shift();
networkChartInstance.update('none');
}
} catch (error) {
console.error('Failed to update stats:', error);
}
};
onMounted(() => {
const initialData = Array(20).fill(0);
cpuChartInstance = createChart(cpuChart.value, [...initialData], 'CPU', '#ff4d4f');
memoryChartInstance = createChart(memoryChart.value, [...initialData], '内存', '#1890ff');
diskChartInstance = createChart(diskChart.value, [...initialData], '磁盘', '#faad14');
networkChartInstance = createNetworkChart(networkChart.value, [...initialData], [...initialData]);
updateStats();
updateInterval = setInterval(updateStats, 2000);
});
onUnmounted(() => {
if (updateInterval) {
clearInterval(updateInterval);
}
if (cpuChartInstance) cpuChartInstance.destroy();
if (memoryChartInstance) memoryChartInstance.destroy();
if (diskChartInstance) diskChartInstance.destroy();
if (networkChartInstance) networkChartInstance.destroy();
});
return {
cpuUsage,
memoryUsage,
diskUsage,
networkUpload,
networkDownload,
cpuChart,
memoryChart,
diskChart,
networkChart,
formatBytes
};
}
};
</script>
<style scoped>
.monitor-page {
padding: 24px;
}
.page-header {
margin-bottom: 24px;
}
.page-header h2 {
font-size: 24px;
color: var(--text-color);
margin: 0;
transition: color 0.3s;
}
.monitor-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 20px;
}
.monitor-card {
background: var(--card-bg);
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: background-color 0.3s;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.card-header h3 {
font-size: 16px;
color: var(--text-color);
margin: 0;
transition: color 0.3s;
}
.card-value {
font-size: 24px;
font-weight: 600;
color: var(--primary-color);
}
.chart-container {
height: 200px;
position: relative;
}
.network-stats {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px;
}
.network-item {
display: flex;
justify-content: space-between;
font-size: 14px;
}
.network-label {
color: #666;
}
.network-value {
color: var(--text-color);
font-weight: 500;
transition: color 0.3s;
}
</style>

205
src/views/Sessions.vue Normal file
View File

@@ -0,0 +1,205 @@
<template>
<div class="sessions-page">
<div class="page-header">
<h2>Session Management</h2>
</div>
<div class="sessions-grid">
<div v-for="session in sessions" :key="session.ID" class="session-card">
<div class="card-header">
<div class="session-icon">🔑</div>
<div class="session-info">
<div class="session-user">{{ session.username }}</div>
<div class="session-id">{{ session.ID }}</div>
</div>
</div>
<div class="card-body">
<div class="info-row">
<span class="label">User ID:</span>
<span class="value">{{ session.userID }}</span>
</div>
<div class="info-row">
<span class="label">Create Time:</span>
<span class="value">{{ formatDate(session.expireAt) }}</span>
</div>
<div class="info-row">
<span class="label">Expire Time:</span>
<span class="value">{{ formatDate(session.expireAt) }}</span>
</div>
</div>
<div class="card-footer">
<button class="action-btn delete-btn" @click="deleteSession(session.ID)">
Delete Session
</button>
</div>
</div>
</div>
<div v-if="sessions.length === 0" class="empty-state">
<p>No active sessions</p>
</div>
</div>
</template>
<script>
import { ref, onMounted } from 'vue';
import { sessionApi } from '../api/index.js';
import { showNotification, formatDate } from '../utils/functions.js';
export default {
name: 'Sessions',
setup() {
const sessions = ref([]);
const loadSessions = async () => {
try {
const result = await sessionApi.listSessions();
sessions.value = result.data;
} catch (error) {
showNotification('Load session list failed', 'error');
}
};
const deleteSession = async (sessionId) => {
if (!confirm('Are you sure you want to delete this session? This will force the user to re-login.')) return;
try {
await sessionApi.removeSession(sessionId);
showNotification('Session deleted successfully', 'success');
await loadSessions();
} catch (error) {
showNotification(error.message || 'Delete session failed', 'error');
}
};
onMounted(() => {
loadSessions();
});
return {
sessions,
deleteSession,
formatDate
};
}
};
</script>
<style scoped>
.sessions-page {
padding: 24px;
}
.page-header {
margin-bottom: 24px;
}
.page-header h2 {
font-size: 24px;
color: var(--text-color);
margin: 0;
transition: color 0.3s;
}
.sessions-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 20px;
}
.session-card {
background: var(--card-bg);
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: background-color 0.3s;
}
.card-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 16px;
}
.session-icon {
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-color) 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.session-info {
flex: 1;
}
.session-user {
font-size: 16px;
font-weight: 600;
color: var(--text-color);
margin-bottom: 4px;
transition: color 0.3s;
}
.session-id {
font-size: 12px;
color: #999;
font-family: monospace;
}
.card-body {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px;
}
.info-row {
display: flex;
justify-content: space-between;
font-size: 14px;
}
.info-row .label {
color: #666;
}
.info-row .value {
color: var(--text-color);
font-weight: 500;
transition: color 0.3s;
}
.card-footer {
display: flex;
gap: 8px;
}
.action-btn {
flex: 1;
padding: 8px 16px;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s;
}
.delete-btn {
background: #ff4d4f;
color: white;
}
.delete-btn:hover {
background: #f04142;
}
.empty-state {
text-align: center;
padding: 60px 20px;
color: #999;
font-size: 16px;
}
</style>

252
src/views/SystemInfo.vue Normal file
View File

@@ -0,0 +1,252 @@
<template>
<div class="system-info-page">
<div class="page-header">
<h2>System Information</h2>
</div>
<div class="info-grid">
<div class="info-card">
<div class="card-header">
<span class="card-icon">💻</span>
<h3>Operating System</h3>
</div>
<div class="card-body">
<div class="info-item">
<span class="info-label">Operating System:</span>
<span class="info-value">{{ systemInfo.os || '-' }}</span>
</div>
<div class="info-item">
<span class="info-label">Hostname:</span>
<span class="info-value">{{ systemInfo.hostname || '-' }}</span>
</div>
<div class="info-item">
<span class="info-label">Kernel Version:</span>
<span class="info-value">{{ systemInfo.kernel || '-' }}</span>
</div>
</div>
</div>
<div class="info-card">
<div class="card-header">
<span class="card-icon">🔧</span>
<h3>Processor</h3>
</div>
<div class="card-body">
<div class="info-item">
<span class="info-label">Processor Model:</span>
<span class="info-value">{{ systemInfo.cpuModel || '-' }}</span>
</div>
<div class="info-item">
<span class="info-label">CPU Cores:</span>
<span class="info-value">{{ systemInfo.cpuCores || '-' }}</span>
</div>
<div class="info-item">
<span class="info-label">CPU Frequency:</span>
<span class="info-value">{{ systemInfo.cpuFrequency || '-' }}</span>
</div>
</div>
</div>
<div class="info-card">
<div class="card-header">
<span class="card-icon">💾</span>
<h3>Memory</h3>
</div>
<div class="card-body">
<div class="info-item">
<span class="info-label">Total Memory:</span>
<span class="info-value">{{ formatBytes(systemInfo.totalMemory || 0) }}</span>
</div>
<div class="info-item">
<span class="info-label">Available Memory:</span>
<span class="info-value">{{ formatBytes(systemInfo.availableMemory || 0) }}</span>
</div>
<div class="info-item">
<span class="info-label">Used Memory:</span>
<span class="info-value">{{ formatBytes(systemInfo.usedMemory || 0) }}</span>
</div>
</div>
</div>
<div class="info-card">
<div class="card-header">
<span class="card-icon">💿</span>
<h3>Disk</h3>
</div>
<div class="card-body">
<div class="info-item">
<span class="info-label">Total Disk Space:</span>
<span class="info-value">{{ formatBytes(systemInfo.totalDisk || 0) }}</span>
</div>
<div class="info-item">
<span class="info-label">Available Disk Space:</span>
<span class="info-value">{{ formatBytes(systemInfo.availableDisk || 0) }}</span>
</div>
<div class="info-item">
<span class="info-label">Used Disk Space:</span>
<span class="info-value">{{ formatBytes(systemInfo.usedDisk || 0) }}</span>
</div>
</div>
</div>
<div class="info-card">
<div class="card-header">
<span class="card-icon">🌐</span>
<h3>Network</h3>
</div>
<div class="card-body">
<div class="info-item">
<span class="info-label">IP Address:</span>
<span class="info-value">{{ systemInfo.ipAddress || '-' }}</span>
</div>
<div class="info-item">
<span class="info-label">MAC Address:</span>
<span class="info-value">{{ systemInfo.macAddress || '-' }}</span>
</div>
<div class="info-item">
<span class="info-label">Network Interface:</span>
<span class="info-value">{{ systemInfo.networkInterface || '-' }}</span>
</div>
</div>
</div>
<div class="info-card">
<div class="card-header">
<span class="card-icon">⏱️</span>
<h3>Uptime</h3>
</div>
<div class="card-body">
<div class="info-item">
<span class="info-label">System Uptime:</span>
<span class="info-value">{{ formatUptime(systemInfo.uptime || 0) }}</span>
</div>
<div class="info-item">
<span class="info-label">Boot Time:</span>
<span class="info-value">{{ formatDate(systemInfo.bootTime || 0) }}</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { ref, onMounted } from 'vue';
import { systemInfoApi } from '../api/index.js';
import { showNotification, formatBytes, formatDate } from '../utils/functions.js';
export default {
name: 'SystemInfo',
setup() {
const systemInfo = ref({});
const loadSystemInfo = async () => {
try {
const result = await systemInfoApi.getSystemInfo();
systemInfo.value = result.data;
} catch (error) {
showNotification('Load System Info Failed', 'error');
}
};
const formatUptime = (seconds) => {
const days = Math.floor(seconds / 86400);
const hours = Math.floor((seconds % 86400) / 3600);
const minutes = Math.floor((seconds % 3600) / 60);
const parts = [];
if (days > 0) parts.push(`${days} day${days > 1 ? 's' : ''}`);
if (hours > 0) parts.push(`${hours} hour${hours > 1 ? 's' : ''}`);
if (minutes > 0) parts.push(`${minutes} minute${minutes > 1 ? 's' : ''}`);
return parts.length > 0 ? parts.join(' ') : '0 minute';
};
onMounted(() => {
loadSystemInfo();
});
return {
systemInfo,
formatBytes,
formatDate,
formatUptime
};
}
};
</script>
<style scoped>
.system-info-page {
padding: 24px;
}
.page-header {
margin-bottom: 24px;
}
.page-header h2 {
font-size: 24px;
color: var(--text-color);
margin: 0;
transition: color 0.3s;
}
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 20px;
}
.info-card {
background: var(--card-bg);
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: background-color 0.3s;
}
.card-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border-color);
}
.card-icon {
font-size: 24px;
}
.card-header h3 {
font-size: 16px;
color: var(--text-color);
margin: 0;
transition: color 0.3s;
}
.card-body {
display: flex;
flex-direction: column;
gap: 12px;
}
.info-item {
display: flex;
justify-content: space-between;
font-size: 14px;
}
.info-label {
color: #666;
font-weight: 500;
}
.info-value {
color: var(--text-color);
font-weight: 500;
text-align: right;
word-break: break-all;
transition: color 0.3s;
}
</style>

482
src/views/Users.vue Normal file
View File

@@ -0,0 +1,482 @@
<template>
<div class="users-page">
<div class="page-header">
<h2>User Management</h2>
<button class="add-btn" @click="showAddModal = true">
+ Add User
</button>
</div>
<div class="users-list">
<div v-for="user in users" :key="user.userID" class="user-item">
<div class="user-info">
<div class="user-avatar">{{ user.username.charAt(0).toUpperCase() }}</div>
<div class="user-details">
<div class="user-name">{{ user.username }}</div>
<div class="user-type">
<span :class="['type-badge', user.type]">
{{ getTypeLabel(user.type) }}
</span>
</div>
</div>
</div>
<div class="user-meta">
<div class="meta-item">
<span class="meta-label">Created At:</span>
<span class="meta-value">{{ formatDate(user.createdAt) }}</span>
</div>
<div class="meta-item">
<span class="meta-label">Last Active:</span>
<span class="meta-value">{{ formatDate(user.lastActive) }}</span>
</div>
</div>
<div class="user-actions">
<button class="action-btn edit-btn" @click="editUser(user)">
Edit
</button>
<button class="action-btn delete-btn" @click="deleteUser(user.userID)">
Delete
</button>
</div>
</div>
</div>
<div v-if="users.length === 0" class="empty-state">
<p>No users available.</p>
</div>
<div v-if="showAddModal || showEditModal" class="modal-overlay" @click="closeModal">
<div class="modal" @click.stop>
<h3>{{ showAddModal ? 'Add User' : 'Edit User' }}</h3>
<form @submit.prevent="handleSubmit" class="form">
<div class="form-group">
<label>Username</label>
<input
type="text"
v-model="formData.username"
:disabled="showEditModal"
required
>
</div>
<div class="form-group" v-if="showAddModal">
<label>Password</label>
<input
type="password"
v-model="formData.passwd"
required
>
</div>
<div class="form-group">
<label>Permission Level</label>
<select v-model="formData.type" required>
<option value="visitor">Visitor</option>
<option value="admin">Admin</option>
<option value="superuser">Superuser</option>
</select>
</div>
<div class="form-actions">
<button type="button" class="cancel-btn" @click="closeModal">Cancel</button>
<button type="submit" class="submit-btn" :disabled="loading">
{{ loading ? 'Processing...' : 'Submit' }}
</button>
</div>
</form>
</div>
</div>
</div>
</template>
<script>
import { ref, onMounted } from 'vue';
import { userApi } from '../api/index.js';
import { showNotification, formatDate } from '../utils/functions.js';
export default {
name: 'Users',
setup() {
const users = ref([]);
const showAddModal = ref(false);
const showEditModal = ref(false);
const loading = ref(false);
const formData = ref({
username: '',
passwd: '',
type: 'visitor'
});
const editingUserId = ref(null);
const loadUsers = async () => {
try {
const result = await userApi.listUsers();
users.value = result.data;
} catch (error) {
showNotification('Failed to load user list', 'error');
}
};
const getTypeLabel = (type) => {
const labels = {
superuser: 'Superuser',
admin: 'Admin',
visitor: 'Visitor'
};
return labels[type] || type;
};
const handleSubmit = async () => {
if (showAddModal.value) {
if (formData.value.passwd.length < 8) {
showNotification('Password must be at least 8 characters long', 'error');
return;
}
loading.value = true;
try {
await userApi.createUser(
formData.value.username,
formData.value.passwd,
formData.value.type
);
showNotification('User created successfully', 'success');
closeModal();
await loadUsers();
} catch (error) {
showNotification(error.message || 'Failed to create user', 'error');
} finally {
loading.value = false;
}
} else if (showEditModal.value) {
showNotification('Edit user feature is not implemented yet', 'warning');
}
};
const editUser = (user) => {
editingUserId.value = user.userID;
formData.value = {
username: user.username,
passwd: '',
type: user.type
};
showEditModal.value = true;
};
const deleteUser = async (userId) => {
if (!confirm('Are you sure you want to delete this user?')) return;
try {
await userApi.removeUser(userId);
showNotification('User deleted successfully', 'success');
await loadUsers();
} catch (error) {
showNotification(error.message || 'Failed to delete user', 'error');
}
};
const closeModal = () => {
showAddModal.value = false;
showEditModal.value = false;
formData.value = {
username: '',
passwd: '',
type: 'visitor'
};
editingUserId.value = null;
};
onMounted(() => {
loadUsers();
});
return {
users,
showAddModal,
showEditModal,
loading,
formData,
getTypeLabel,
handleSubmit,
editUser,
deleteUser,
closeModal,
formatDate
};
}
};
</script>
<style scoped>
.users-page {
padding: 24px;
}
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.page-header h2 {
font-size: 24px;
color: var(--text-color);
margin: 0;
transition: color 0.3s;
}
.add-btn {
padding: 10px 20px;
background: var(--primary-color);
color: white;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s;
}
.add-btn:hover {
background: #5568d3;
}
.users-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.user-item {
background: var(--card-bg);
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
display: flex;
align-items: center;
gap: 20px;
transition: background-color 0.3s;
}
.user-info {
display: flex;
align-items: center;
gap: 16px;
flex: 1;
}
.user-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-color) 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
font-size: 18px;
}
.user-details {
display: flex;
flex-direction: column;
gap: 4px;
}
.user-name {
font-size: 16px;
font-weight: 600;
color: var(--text-color);
transition: color 0.3s;
}
.type-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
}
.type-badge.superuser {
background: #fff7e6;
color: #fa8c16;
}
.type-badge.admin {
background: #e6f7ff;
color: #1890ff;
}
.type-badge.visitor {
background: #f9f9f9;
color: #666;
}
.user-meta {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.meta-item {
display: flex;
gap: 8px;
font-size: 14px;
}
.meta-label {
color: #666;
}
.meta-value {
color: var(--text-color);
transition: color 0.3s;
}
.user-actions {
display: flex;
gap: 8px;
}
.action-btn {
padding: 8px 16px;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s;
}
.edit-btn {
background: #f0f0f0;
color: var(--text-color);
}
.edit-btn:hover {
background: #e0e0e0;
}
.delete-btn {
background: #ff4d4f;
color: white;
}
.delete-btn:hover {
background: #f04142;
}
.empty-state {
text-align: center;
padding: 60px 20px;
color: #999;
font-size: 16px;
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.modal {
background: var(--card-bg);
border-radius: 12px;
padding: 24px;
width: 400px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s;
}
.modal h3 {
font-size: 20px;
color: var(--text-color);
margin: 0 0 20px 0;
transition: color 0.3s;
}
.form {
display: flex;
flex-direction: column;
gap: 16px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.form-group label {
font-size: 14px;
color: #666;
font-weight: 500;
}
.form-group input,
.form-group select {
padding: 10px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 14px;
background: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.form-group input:focus,
.form-group select:focus {
outline: none;
border-color: var(--primary-color);
}
.form-group input:disabled {
background: #f5f5f5;
cursor: not-allowed;
}
.form-actions {
display: flex;
gap: 12px;
margin-top: 8px;
}
.cancel-btn,
.submit-btn {
flex: 1;
padding: 10px;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s;
}
.cancel-btn {
background: #f0f0f0;
color: var(--text-color);
}
.cancel-btn:hover {
background: #e0e0e0;
}
.submit-btn {
background: var(--primary-color);
color: white;
}
.submit-btn:hover:not(:disabled) {
background: #5568d3;
}
.submit-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
</style>

16
vite.config.js Normal file
View File

@@ -0,0 +1,16 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
server: {
port: 3000,
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
})