Initial commit: finish basic WebUI interface

2026-03-09 21:17:22 +08:00
parent d2a2a4de36
commit 2f6cfe7704
23 changed files with 5028 additions and 1 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -23,3 +23,6 @@ docs/_book
 # TODO: where does this rule come from?
 test/

+node_modules/
+
+agent.md
--- a/README.md
+++ b/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
--- a/index.html
+++ b/index.html
@@ -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>
--- a/logger.js
+++ b/logger.js
@@ -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 };
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -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"
+  }
+}
--- a/src/App.vue
+++ b/src/App.vue
@@ -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>
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -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 中定义'
+};
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -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>
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -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>
--- a/src/main.js
+++ b/src/main.js
@@ -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');
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -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;
--- a/src/utils/functions.js
+++ b/src/utils/functions.js
@@ -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
+};
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -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>
--- a/src/views/InstanceDetail.vue
+++ b/src/views/InstanceDetail.vue
@@ -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>
--- a/src/views/Instances.vue
+++ b/src/views/Instances.vue
@@ -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>
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -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>
--- a/src/views/Logs.vue
+++ b/src/views/Logs.vue
@@ -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>
--- a/src/views/Monitor.vue
+++ b/src/views/Monitor.vue
@@ -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>
--- a/src/views/Sessions.vue
+++ b/src/views/Sessions.vue
@@ -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>
--- a/src/views/SystemInfo.vue
+++ b/src/views/SystemInfo.vue
@@ -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>
--- a/src/views/Users.vue
+++ b/src/views/Users.vue
@@ -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>
--- a/vite.config.js
+++ b/vite.config.js
@@ -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/, '')
+            }
+        }
+    }
+})