From b4c8b2114211aa6b8da3a416518b257fe0b07f79 Mon Sep 17 00:00:00 2001
From: NanamiAdmin <yzt114@yeah.net>
Date: Mon, 9 Mar 2026 22:16:55 +0800
Subject: [PATCH] feat(ui): replace emoji icons with fontawesome icons

Add Font Awesome dependency and replace all emoji icons with corresponding Font Awesome icons across components. This provides better visual consistency and scalability.
---
 package-lock.json          | 10 ++++++++++
 package.json               |  1 +
 src/components/SideBar.vue | 16 ++++++++--------
 src/components/TopBar.vue  |  2 +-
 src/main.js                |  1 +
 src/views/Instances.vue    |  3 +++
 src/views/Sessions.vue     |  2 +-
 src/views/SystemInfo.vue   | 12 ++++++------
 8 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4b6516b..5e3af5c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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",
diff --git a/package.json b/package.json
index 434fa75..4dd21cb 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index 80cd208..1b54ea9 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -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(() => {
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index c4e2aee..e8e8945 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -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">
diff --git a/src/main.js b/src/main.js
index 5fecdfe..ca2c3d2 100644
--- a/src/main.js
+++ b/src/main.js
@@ -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);
diff --git a/src/views/Instances.vue b/src/views/Instances.vue
index 6d410ad..5445606 100644
--- a/src/views/Instances.vue
+++ b/src/views/Instances.vue
@@ -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 
diff --git a/src/views/Sessions.vue b/src/views/Sessions.vue
index 1273258..548bf6b 100644
--- a/src/views/Sessions.vue
+++ b/src/views/Sessions.vue
@@ -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>
diff --git a/src/views/SystemInfo.vue b/src/views/SystemInfo.vue
index 46b5274..cd0759e 100644
--- a/src/views/SystemInfo.vue
+++ b/src/views/SystemInfo.vue
@@ -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">