feat(proxy): add instance proxy display

- Change API endpoint and parameter from instanceName to instanceID for getInstanceProxies
- Update proxy list UI with type badge and structured details display
- Add async/await for mounted lifecycle hooks
- Improve proxy item styling with better spacing and visual hierarchy

src/api/index.js

@@ -85,8 +85,8 @@ export const instanceApi = {
         api.post('/frpcAct/instanceMgr/restart', { instanceName }),
     getInstanceLogs: (instanceName) => 
         api.get('/frpcAct/instanceMgr/logs', { params: { instanceName } }),
-    getInstanceProxies: (instanceName) => 
-        api.get('/frpcAct/instanceMgr/proxies', { params: { instanceName } }),
+    getInstanceProxies: (instanceID) => 
+        api.get('/frpcAct/proxyMgr/list', { params: { instanceID } }),
     createProxy: (instanceID, proxyInfo) => 
         api.post('/frpcAct/proxyMgr/create', { instanceID, proxyInfo })
 };

src/styles/common.css

@@ -518,7 +518,10 @@
 }
 
 .proxy-item {
-    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 12px;
     background: #f9f9f9;
     border-radius: 6px;
 }
@@ -527,20 +530,31 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 12px;
 }
 
 .proxy-name {
-    font-size: 16px;
+    font-size: 18px;
     font-weight: 600;
     color: var(--text-color);
     transition: color 0.3s;
 }
 
+.proxy-type {
+    display: inline-block;
+    padding: 4px 12px;
+    border-radius: 12px;
+    font-size: 14px;
+    font-weight: 500;
+    background: var(--primary-bg);
+    color: var(--primary-color);
+    text-transform: uppercase;
+}
+
 .proxy-details {
     display: flex;
     flex-direction: column;
     gap: 8px;
+    padding-left: 12px;
 }
 
 .proxy-detail {

src/views/InstanceDetail.vue

@@ -133,14 +133,16 @@
                     <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>
+                            <span class="proxy-type">{{ proxy.type }}</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 class="config-item proxy-detail">
+                                <span class="config-key">Local Address</span>
+                                <span class="config-value">{{ proxy.localIP }}:{{ proxy.localPort }}</span>
+                            </div>
+                            <div class="config-item proxy-detail">
+                                <span class="config-key">Remote Port</span>
+                                <span class="config-value">{{ proxy.remotePort }}</span>
                             </div>
                         </div>
                     </div>
@@ -283,11 +285,14 @@ export default {
 
         const loadProxies = async () => {
             try {
-                const result = await instanceApi.getInstanceProxies(instanceName.value);
-                proxies.value = result.data.map(proxy => ({
+                const result = await instanceApi.getInstanceProxies(instanceID.value);
+                const proxyList = result.data.proxies || [];
+                proxies.value = proxyList.map(proxy => ({
                     name: proxy.name,
-                    status: proxy.status || 'unknown',
-                    details: proxy
+                    type: proxy.type,
+                    localIP: proxy.local_ip,
+                    localPort: proxy.local_port,
+                    remotePort: proxy.remote_port
                 }));
             } catch (error) {
                 showNotification('Load proxy list failed', 'error');
@@ -424,10 +429,10 @@ export default {
             }
         };
 
-        onMounted(() => {
-            loadInstanceConfig();
-            loadProxies();
-            loadLogs();
+        onMounted(async () => {
+            await loadInstanceConfig();
+            await loadProxies();
+            await loadLogs();
         });
 
         return {
@@ -482,6 +487,57 @@ export default {
     gap: 12px;
 }
 
+.proxy-item {
+    padding: 16px;
+    border-radius: 8px;
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+}
+
+.proxy-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 12px;
+    gap: 12px;
+}
+
+.proxy-name {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--text-color);
+}
+
+.proxy-type {
+    display: inline-block;
+    padding: 4px 12px;
+    border-radius: 12px;
+    font-size: 12px;
+    font-weight: 500;
+    background: var(--primary-bg);
+    color: var(--primary-color);
+    text-transform: uppercase;
+}
+
+.proxy-detail {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+    border: 5px solid var(--border-color);
+}
+
+.proxy-key {
+    color: var(--text-secondary);
+    font-weight: 500;
+    min-width: 90px;
+}
+
+.proxy-value {
+    color: var(--text-color);
+    font-family: monospace;
+}
+
 .log-item {
     padding: 8px;
     border-radius: 4px;