update

web/src/views/HomeView.vue

@@ -1,14 +1,12 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import { useRouter } from 'vue-router'
-import { getClients, addClient } from '../api'
-import type { ClientStatus, ProxyRule } from '../types'
+import { NCard, NButton, NSpace, NTag, NStatistic, NGrid, NGi, NEmpty } from 'naive-ui'
+import { getClients } from '../api'
+import type { ClientStatus } from '../types'
 
 const router = useRouter()
 const clients = ref<ClientStatus[]>([])
-const showModal = ref(false)
-const newClientId = ref('')
-const newRules = ref<ProxyRule[]>([])
 
 const loadClients = async () => {
   try {
@@ -19,33 +17,16 @@ const loadClients = async () => {
   }
 }
 
+const onlineClients = computed(() => {
+  return clients.value.filter(client => client.online).length
+})
+
+const totalRules = computed(() => {
+  return clients.value.reduce((sum, client) => sum + client.rule_count, 0)
+})
+
 onMounted(loadClients)
 
-const openAddModal = () => {
-  newClientId.value = ''
-  newRules.value = [{ name: '', local_ip: '127.0.0.1', local_port: 80, remote_port: 8080 }]
-  showModal.value = true
-}
-
-const addRule = () => {
-  newRules.value.push({ name: '', local_ip: '127.0.0.1', local_port: 80, remote_port: 8080 })
-}
-
-const removeRule = (index: number) => {
-  newRules.value.splice(index, 1)
-}
-
-const saveClient = async () => {
-  if (!newClientId.value) return
-  try {
-    await addClient({ id: newClientId.value, rules: newRules.value })
-    showModal.value = false
-    loadClients()
-  } catch (e) {
-    alert('添加失败')
-  }
-}
-
 const viewClient = (id: string) => {
   router.push(`/client/${id}`)
 }
@@ -53,139 +34,49 @@ const viewClient = (id: string) => {
 
 <template>
   <div class="home">
-    <div class="toolbar">
-      <h2>客户端列表</h2>
-      <button class="btn primary" @click="openAddModal">添加客户端</button>
+    <div style="margin-bottom: 24px;">
+      <h2 style="margin: 0 0 8px 0;">客户端管理</h2>
+      <p style="margin: 0; color: #666;">查看已连接的隧道客户端</p>
     </div>
 
-    <div class="client-grid">
-      <div v-for="client in clients" :key="client.id" class="client-card" @click="viewClient(client.id)">
-        <div class="card-header">
-          <span class="client-id">{{ client.id }}</span>
-          <span :class="['status', client.online ? 'online' : 'offline']"></span>
-        </div>
-        <div class="card-info">
-          <span>{{ client.rule_count }} 条规则</span>
-        </div>
-      </div>
-    </div>
+    <n-grid :cols="3" :x-gap="16" :y-gap="16" style="margin-bottom: 24px;">
+      <n-gi>
+        <n-card>
+          <n-statistic label="总客户端" :value="clients.length" />
+        </n-card>
+      </n-gi>
+      <n-gi>
+        <n-card>
+          <n-statistic label="在线客户端" :value="onlineClients" />
+        </n-card>
+      </n-gi>
+      <n-gi>
+        <n-card>
+          <n-statistic label="总规则数" :value="totalRules" />
+        </n-card>
+      </n-gi>
+    </n-grid>
 
-    <div v-if="clients.length === 0" class="empty">暂无客户端配置</div>
+    <n-empty v-if="clients.length === 0" description="暂无客户端连接" />
 
-    <!-- 添加客户端模态框 -->
-    <div v-if="showModal" class="modal-overlay" @click.self="showModal = false">
-      <div class="modal">
-        <h3>添加客户端</h3>
-        <div class="form-group">
-          <label>客户端 ID</label>
-          <input v-model="newClientId" placeholder="例如: client-a" />
-        </div>
-        <div class="form-group">
-          <label>代理规则</label>
-          <div v-for="(rule, i) in newRules" :key="i" class="rule-row">
-            <input v-model="rule.name" placeholder="名称" />
-            <input v-model="rule.local_ip" placeholder="本地IP" />
-            <input v-model.number="rule.local_port" type="number" placeholder="本地端口" />
-            <input v-model.number="rule.remote_port" type="number" placeholder="远程端口" />
-            <button class="btn-icon" @click="removeRule(i)">×</button>
-          </div>
-          <button class="btn secondary" @click="addRule">+ 添加规则</button>
-        </div>
-        <div class="modal-actions">
-          <button class="btn" @click="showModal = false">取消</button>
-          <button class="btn primary" @click="saveClient">保存</button>
-        </div>
-      </div>
-    </div>
+    <n-grid v-else :cols="3" :x-gap="16" :y-gap="16" responsive="screen" cols-s="1" cols-m="2">
+      <n-gi v-for="client in clients" :key="client.id">
+        <n-card hoverable style="cursor: pointer;" @click="viewClient(client.id)">
+          <n-space justify="space-between" align="center">
+            <div>
+              <h3 style="margin: 0 0 4px 0;">{{ client.nickname || client.id }}</h3>
+              <p v-if="client.nickname" style="margin: 0 0 8px 0; color: #999; font-size: 12px;">{{ client.id }}</p>
+              <n-space>
+                <n-tag :type="client.online ? 'success' : 'default'" size="small">
+                  {{ client.online ? '在线' : '离线' }}
+                </n-tag>
+                <n-tag type="info" size="small">{{ client.rule_count }} 条规则</n-tag>
+              </n-space>
+            </div>
+            <n-button size="small" @click.stop="viewClient(client.id)">查看详情</n-button>
+          </n-space>
+        </n-card>
+      </n-gi>
+    </n-grid>
   </div>
 </template>
-
-<style scoped>
-.toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
-}
-.toolbar h2 { font-size: 18px; color: #2c3e50; }
-.btn {
-  padding: 8px 16px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-}
-.btn.primary { background: #3498db; color: #fff; }
-.btn.secondary { background: #95a5a6; color: #fff; }
-.client-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 16px;
-}
-.client-card {
-  background: #fff;
-  border-radius: 8px;
-  padding: 16px;
-  cursor: pointer;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-  transition: transform 0.2s;
-}
-.client-card:hover { transform: translateY(-2px); }
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 8px;
-}
-.client-id { font-weight: 600; }
-.status { width: 10px; height: 10px; border-radius: 50%; }
-.status.online { background: #27ae60; }
-.status.offline { background: #95a5a6; }
-.card-info { font-size: 14px; color: #666; }
-.empty { text-align: center; color: #999; padding: 40px; }
-.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;
-}
-.modal {
-  background: #fff;
-  border-radius: 8px;
-  padding: 24px;
-  width: 500px;
-  max-width: 90%;
-}
-.modal h3 { margin-bottom: 16px; }
-.form-group { margin-bottom: 16px; }
-.form-group label { display: block; margin-bottom: 8px; font-weight: 500; }
-.form-group input {
-  width: 100%;
-  padding: 8px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  box-sizing: border-box;
-}
-.rule-row {
-  display: flex;
-  gap: 8px;
-  margin-bottom: 8px;
-}
-.rule-row input { flex: 1; width: auto; }
-.btn-icon {
-  background: #e74c3c;
-  color: #fff;
-  border: none;
-  border-radius: 4px;
-  width: 32px;
-  cursor: pointer;
-}
-.modal-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  margin-top: 16px;
-}
-</style>