Initial commit: finish basic WebUI interface
This commit is contained in:
141
src/components/SideBar.vue
Normal file
141
src/components/SideBar.vue
Normal file
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<div class="sidebar">
|
||||
<div class="menu">
|
||||
<router-link
|
||||
v-for="item in menuItems"
|
||||
:key="item.path"
|
||||
:to="item.path"
|
||||
class="menu-item"
|
||||
active-class="active"
|
||||
>
|
||||
<span class="menu-icon">{{ item.icon }}</span>
|
||||
<span class="menu-text">{{ item.title }}</span>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="theme-toggle">
|
||||
<button @click="toggleTheme" class="theme-button">
|
||||
<span class="theme-icon">{{ isDarkMode ? '☀️' : '🌙' }}</span>
|
||||
<span class="theme-text">{{ isDarkMode ? 'Dark Mode' : 'Light Mode' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { computed, inject } from 'vue';
|
||||
import { getCookie } from '../utils/functions.js';
|
||||
|
||||
export default {
|
||||
name: 'SideBar',
|
||||
setup() {
|
||||
const userType = getCookie('user-type') || 'visitor';
|
||||
const isDarkMode = inject('isDarkMode');
|
||||
const toggleTheme = inject('toggleTheme');
|
||||
|
||||
const allMenuItems = [
|
||||
{ path: '/instances', title: 'Instance Management', icon: '📦', permission: ['superuser', 'admin', 'visitor'] },
|
||||
{ path: '/users', title: 'User Management', icon: '👥', permission: ['superuser'] },
|
||||
{ path: '/sessions', title: 'Session Management', icon: '🔑', permission: ['superuser', 'admin'] },
|
||||
{ path: '/logs', title: 'System Logs', icon: '📋', permission: ['superuser', 'admin'] },
|
||||
{ path: '/monitor', title: 'System Monitoring', icon: '📊', permission: ['superuser', 'admin', 'visitor'] },
|
||||
{ path: '/system-info', title: 'System Information', icon: 'ℹ️', permission: ['superuser', 'admin', 'visitor'] }
|
||||
];
|
||||
|
||||
const menuItems = computed(() => {
|
||||
return allMenuItems.filter(item => item.permission.includes(userType));
|
||||
});
|
||||
|
||||
return {
|
||||
menuItems,
|
||||
isDarkMode,
|
||||
toggleTheme
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 64px;
|
||||
bottom: 0;
|
||||
width: 240px;
|
||||
background: var(--sidebar-bg);
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.menu {
|
||||
padding: 16px 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 24px;
|
||||
color: var(--sidebar-text);
|
||||
text-decoration: none;
|
||||
transition: all 0.3s;
|
||||
margin: 4px 12px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
color: var(--sidebar-text-hover);
|
||||
background: var(--sidebar-bg-hover);
|
||||
}
|
||||
|
||||
.menu-item.active {
|
||||
color: var(--sidebar-text-hover);
|
||||
background: var(--sidebar-active-bg);
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
font-size: 18px;
|
||||
margin-right: 12px;
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu-text {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
padding: 16px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.theme-button {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px 16px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: var(--sidebar-text);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.theme-button:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: var(--sidebar-text-hover);
|
||||
}
|
||||
|
||||
.theme-icon {
|
||||
font-size: 16px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.theme-text {
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
212
src/components/TopBar.vue
Normal file
212
src/components/TopBar.vue
Normal file
@@ -0,0 +1,212 @@
|
||||
<template>
|
||||
<div class="topbar">
|
||||
<div class="topbar-left">
|
||||
<h1 class="logo">Super-frpc</h1>
|
||||
</div>
|
||||
<div class="topbar-center">
|
||||
<div class="search-box">
|
||||
<input
|
||||
type="text"
|
||||
v-model="searchQuery"
|
||||
placeholder="Search Instances..."
|
||||
@input="handleSearch"
|
||||
>
|
||||
<span class="search-icon">🔍</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="topbar-right">
|
||||
<div class="status-info">
|
||||
<span :class="['status-dot', { online: isOnline }]"></span>
|
||||
<span class="status-text">{{ isOnline ? 'Online' : 'Offline' }}</span>
|
||||
</div>
|
||||
<div class="version-info" v-if="softwareInfo">
|
||||
<span>v{{ softwareInfo.Version }}</span>
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<div class="avatar">{{ username.charAt(0).toUpperCase() }}</div>
|
||||
<span class="username">{{ username }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { systemApi } from '../api/index.js';
|
||||
import { getCookie } from '../utils/functions.js';
|
||||
|
||||
export default {
|
||||
name: 'TopBar',
|
||||
emits: ['search'],
|
||||
setup(props, { emit }) {
|
||||
const searchQuery = ref('');
|
||||
const isOnline = ref(false);
|
||||
const softwareInfo = ref(null);
|
||||
const username = ref(getCookie('username') || 'User');
|
||||
|
||||
const checkStatus = async () => {
|
||||
try {
|
||||
const result = await systemApi.getStatus();
|
||||
isOnline.value = result.data.Status === 'Online';
|
||||
} catch (error) {
|
||||
isOnline.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const getSoftwareInfo = async () => {
|
||||
try {
|
||||
const result = await systemApi.getSoftwareInfo();
|
||||
softwareInfo.value = result.data;
|
||||
} catch (error) {
|
||||
console.error('Failed to get software info:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
emit('search', searchQuery.value);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
checkStatus();
|
||||
getSoftwareInfo();
|
||||
setInterval(checkStatus, 5000);
|
||||
});
|
||||
|
||||
return {
|
||||
searchQuery,
|
||||
isOnline,
|
||||
softwareInfo,
|
||||
username,
|
||||
handleSearch
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.topbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 24px;
|
||||
height: 64px;
|
||||
background: var(--card-bg);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.topbar-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: var(--primary-color);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.topbar-center {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0 100px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.search-box input {
|
||||
width: 100%;
|
||||
padding: 10px 40px 10px 16px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s;
|
||||
background: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.search-box input:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 16px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.topbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.status-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #ff4d4f;
|
||||
}
|
||||
|
||||
.status-dot.online {
|
||||
background: #52c41a;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 14px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.version-info {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-size: 14px;
|
||||
color: var(--text-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user