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

feat(ui): replace emoji icons with fontawesome icons

Browse Source 
Add Font Awesome dependency and replace all emoji icons with corresponding Font Awesome icons across components. This provides better visual consistency and scalability.
This commit is contained in:
NanamiAdmin
2026-03-09 22:16:55 +08:00
parent 2f6cfe7704
commit b4c8b21142
8 changed files with 31 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
package-lock.json generated
View File

@@ -8,6 +8,7 @@
"name": "super-frpc-frontend",
"version": "0.0.1",
"dependencies": {
"@fortawesome/fontawesome-free": "^7.2.0",
"axios": "^1.6.0",
"chart.js": "^4.4.0",
"vue": "^3.4.0",
@@ -456,6 +457,15 @@
"node": ">=12"
}
},
"node_modules/@fortawesome/fontawesome-free": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-7.2.0.tgz",
"integrity": "sha512-3DguDv/oUE+7vjMeTSOjCSG+KeawgVQOHrKRnvUuqYh1mfArrh7s+s8hXW3e4RerBA1+Wh+hBqf8sJNpqNrBWg==",
"license": "(CC-BY-4.0 AND OFL-1.1 AND MIT)",
"engines": {
"node": ">=6"
}
},
"node_modules/@jridgewell/sourcemap-codec": {
"version": "1.5.5",
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",

1
package.json
View File

@@ -9,6 +9,7 @@
"preview": "vite preview"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^7.2.0",
"axios": "^1.6.0",
"chart.js": "^4.4.0",
"vue": "^3.4.0",

16
src/components/SideBar.vue
View File

@@ -8,13 +8,13 @@
class="menu-item"
active-class="active"
>
<span class="menu-icon">{{ item.icon }}</span>
<i :class="item.icon" class="menu-icon" aria-hidden="true"></i>
<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-icon"><i :class="isDarkMode ? 'fas fa-sun' : 'fas fa-moon'" aria-hidden="true"></i></span>
<span class="theme-text">{{ isDarkMode ? 'Dark Mode' : 'Light Mode' }}</span>
</button>
</div>
@@ -33,12 +33,12 @@ export default {
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'] }
{ path: '/instances', title: 'Instance Management', icon: 'fas fa-box', permission: ['superuser', 'admin', 'visitor'] },
{ path: '/users', title: 'User Management', icon: 'fas fa-users', permission: ['superuser'] },
{ path: '/sessions', title: 'Session Management', icon: 'fas fa-key', permission: ['superuser', 'admin'] },
{ path: '/logs', title: 'System Logs', icon: 'fas fa-file-alt', permission: ['superuser', 'admin'] },
{ path: '/monitor', title: 'System Monitoring', icon: 'fas fa-chart-bar', permission: ['superuser', 'admin', 'visitor'] },
{ path: '/system-info', title: 'System Information', icon: 'fas fa-info-circle', permission: ['superuser', 'admin', 'visitor'] }
];
const menuItems = computed(() => {

2
src/components/TopBar.vue
View File

@@ -11,7 +11,7 @@
placeholder="Search Instances..."
@input="handleSearch"
>
<span class="search-icon">🔍</span>
<i class="fas fa-search search-icon" aria-hidden="true"></i>
</div>
</div>
<div class="topbar-right">

1
src/main.js
View File

@@ -1,6 +1,7 @@
import { createApp } from 'vue';
import App from './App.vue';
import router from './router/index.js';
import '@fortawesome/fontawesome-free/css/all.css';
const app = createApp(App);
app.use(router);

3
src/views/Instances.vue
View File

@@ -2,6 +2,9 @@
<div class="instances-page">
<div class="page-header">
<h2>Instance Management</h2>
<button class="add-btn" @click="showAddModal = true">
<i class="fas fa-plus" aria-hidden="true"></i> Add Instance
</button>
</div>
<div class="instances-grid">
<div

2
src/views/Sessions.vue
View File

@@ -6,7 +6,7 @@
<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-icon"><i class="fas fa-key" aria-hidden="true"></i></div>
<div class="session-info">
<div class="session-user">{{ session.username }}</div>
<div class="session-id">{{ session.ID }}</div>

12
src/views/SystemInfo.vue
View File

@@ -6,7 +6,7 @@
<div class="info-grid">
<div class="info-card">
<div class="card-header">
<span class="card-icon">💻</span>
<span class="card-icon"><i class="fas fa-laptop" aria-hidden="true"></i></span>
<h3>Operating System</h3>
</div>
<div class="card-body">
@@ -27,7 +27,7 @@
<div class="info-card">
<div class="card-header">
<span class="card-icon">🔧</span>
<span class="card-icon"><i class="fas fa-tools" aria-hidden="true"></i></span>
<h3>Processor</h3>
</div>
<div class="card-body">
@@ -48,7 +48,7 @@
<div class="info-card">
<div class="card-header">
<span class="card-icon">💾</span>
<span class="card-icon"><i class="fas fa-memory" aria-hidden="true"></i></span>
<h3>Memory</h3>
</div>
<div class="card-body">
@@ -69,7 +69,7 @@
<div class="info-card">
<div class="card-header">
<span class="card-icon">💿</span>
<span class="card-icon"><i class="fas fa-hdd" aria-hidden="true"></i></span>
<h3>Disk</h3>
</div>
<div class="card-body">
@@ -90,7 +90,7 @@
<div class="info-card">
<div class="card-header">
<span class="card-icon">🌐</span>
<span class="card-icon"><i class="fas fa-globe" aria-hidden="true"></i></span>
<h3>Network</h3>
</div>
<div class="card-body">
@@ -111,7 +111,7 @@
<div class="info-card">
<div class="card-header">
<span class="card-icon">⏱️</span>
<span class="card-icon"><i class="fas fa-clock" aria-hidden="true"></i></span>
<h3>Uptime</h3>
</div>
<div class="card-body">