refactor(web): 重构前端界面组件和导航结构

- 替换 naive-ui 导航组件为自定义玻璃态设计组件
- 引入 GlassModal、GlassSwitch、GlassTag 等自定义组件
- 更新 App.vue 中的布局结构和样式设计
- 重构客户端视图中的表单验证逻辑
- 移除 tabs 组件改用侧边栏导航菜单
- 添加内联日志面板组件
- 优化响应式布局和移动端适配
- 更新图标组件引用方式
- 简化表单验证实现方式
- 添加插件下拉菜单功能
- 优化客户端管理界面UI
- 更新依赖注入声明文件
- 重构用户菜单交互逻辑
- 移除路由跳转相关代码优化性能

web/src/views/ClientView.vue

@@ -1,17 +1,16 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import {
-  NButton, NSpace, NTag, NEmpty,
-  NForm, NFormItem, NInput, NInputNumber, NSelect, NModal, NSwitch,
-  NIcon, useMessage, useDialog, NSpin, NGrid, NGridItem,
-  NTooltip, NDropdown, type FormInst, type FormRules
-} from 'naive-ui'
 import {
   ArrowBackOutline, CreateOutline, TrashOutline,
   PushOutline, AddOutline, StorefrontOutline, DocumentTextOutline,
   ExtensionPuzzleOutline, SettingsOutline, CloudDownloadOutline, RefreshOutline
 } from '@vicons/ionicons5'
+import GlassModal from '../components/GlassModal.vue'
+import GlassTag from '../components/GlassTag.vue'
+import GlassSwitch from '../components/GlassSwitch.vue'
+import { useToast } from '../composables/useToast'
+import { useConfirm } from '../composables/useConfirm'
 import {
   getClient, updateClient, deleteClient, pushConfigToClient, disconnectClient, restartClient,
   getClientPluginConfig, updateClientPluginConfig,
@@ -20,11 +19,12 @@ import {
 } from '../api'
 import type { ProxyRule, ClientPlugin, ConfigField, StorePluginInfo, RuleSchemasMap } from '../types'
 import LogViewer from '../components/LogViewer.vue'
+import InlineLogPanel from '../components/InlineLogPanel.vue'
 
 const route = useRoute()
 const router = useRouter()
-const message = useMessage()
-const dialog = useDialog()
+const message = useToast()
+const dialog = useConfirm()
 const clientId = route.params.id as string
 
 // Data
@@ -67,7 +67,6 @@ const builtinTypes = [
 // Modal Control for Rules
 const showRuleModal = ref(false)
 const ruleModalType = ref<'create' | 'edit'>('create')
-const ruleFormRef = ref<FormInst | null>(null)
 // Default Rule Model
 const defaultRule = {
   name: '',
@@ -91,37 +90,6 @@ const getExtraFields = (type: string): ConfigField[] => {
   return schema?.extra_fields || []
 }
 
-// Validation Rules
-const ruleValidationRules: FormRules = {
-  name: { required: true, message: '请输入规则名称', trigger: 'blur' },
-  type: { required: true, message: '请选择类型', trigger: ['blur', 'change'] },
-  remote_port: [
-    { required: true, type: 'number', message: '请输入远程端口', trigger: ['blur', 'change'] },
-    { type: 'number', min: 1, max: 65535, message: '端口范围 1-65535', trigger: ['blur', 'change'] }
-  ],
-  local_ip: {
-    required: true,
-    validator(_rule, value) {
-      if (needsLocalAddr(ruleForm.value.type || 'tcp')) {
-        if (!value) return new Error('请输入本地IP')
-      }
-      return true
-    },
-    trigger: 'blur'
-  },
-  local_port: {
-    required: true,
-    validator(_rule, value) {
-      if (needsLocalAddr(ruleForm.value.type || 'tcp')) {
-        if (!value && value !== 0) return new Error('请输入本地端口')
-        if (typeof value === 'number' && (value < 1 || value > 65535)) return new Error('端口范围 1-65535')
-      }
-      return true
-    },
-    trigger: ['blur', 'change']
-  }
-}
-
 // Actions
 const loadClient = async () => {
   loading.value = true
@@ -262,29 +230,42 @@ const saveRules = async (newRules: ProxyRule[]) => {
   }
 }
 
-const handleRuleSubmit = (e: MouseEvent) => {
-  e.preventDefault()
-  ruleFormRef.value?.validate(async (errors) => {
-    if (!errors) {
-      let newRules = [...rules.value]
-      if (ruleModalType.value === 'create') {
-        if (newRules.some(r => r.name === ruleForm.value.name)) {
-          message.error('规则名称已存在')
-          return
-        }
-        newRules.push({ ...ruleForm.value })
-      } else {
-        const index = newRules.findIndex(r => r.name === ruleForm.value.name)
-        if (index > -1) {
-          newRules[index] = { ...ruleForm.value }
-        }
-      }
-      await saveRules(newRules)
-      showRuleModal.value = false
-    } else {
-      message.error('请检查表单填写')
+const handleRuleSubmit = async () => {
+  // Simple validation
+  if (!ruleForm.value.name) {
+    message.error('请输入规则名称')
+    return
+  }
+  if (!ruleForm.value.remote_port || ruleForm.value.remote_port < 1 || ruleForm.value.remote_port > 65535) {
+    message.error('请输入有效的远程端口 (1-65535)')
+    return
+  }
+  if (needsLocalAddr(ruleForm.value.type || 'tcp')) {
+    if (!ruleForm.value.local_ip) {
+      message.error('请输入本地IP')
+      return
     }
-  })
+    if (!ruleForm.value.local_port || ruleForm.value.local_port < 1 || ruleForm.value.local_port > 65535) {
+      message.error('请输入有效的本地端口 (1-65535)')
+      return
+    }
+  }
+
+  let newRules = [...rules.value]
+  if (ruleModalType.value === 'create') {
+    if (newRules.some(r => r.name === ruleForm.value.name)) {
+      message.error('规则名称已存在')
+      return
+    }
+    newRules.push({ ...ruleForm.value })
+  } else {
+    const index = newRules.findIndex(r => r.name === ruleForm.value.name)
+    if (index > -1) {
+      newRules[index] = { ...ruleForm.value }
+    }
+  }
+  await saveRules(newRules)
+  showRuleModal.value = false
 }
 
 // Store & Plugin Logic
@@ -445,6 +426,12 @@ onMounted(() => {
 // Log Viewer
 const showLogViewer = ref(false)
 
+// Plugin Menu
+const activePluginMenu = ref('')
+const togglePluginMenu = (pluginId: string) => {
+  activePluginMenu.value = activePluginMenu.value === pluginId ? '' : pluginId
+}
+
 // Plugin Status Actions
 const handleStartPlugin = async (plugin: ClientPlugin) => {
     const rule = rules.value.find(r => r.type === plugin.name)
@@ -611,22 +598,17 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
                 </div>
                 <div v-for="rule in rules" :key="rule.name" class="table-row">
                   <span class="rule-name">{{ rule.name }}</span>
-                  <span><n-tag size="small" :type="rule.type==='websocket'?'info':'default'">{{ (rule.type || 'tcp').toUpperCase() }}</n-tag></span>
+                  <span><GlassTag :type="rule.type==='websocket'?'info':'default'">{{ (rule.type || 'tcp').toUpperCase() }}</GlassTag></span>
                   <span class="rule-mapping">
                     {{ needsLocalAddr(rule.type||'tcp') ? `${rule.local_ip}:${rule.local_port}` : '-' }}
                     →
                     :{{ rule.remote_port }}
                   </span>
                   <span>
-                    <n-switch :value="rule.enabled !== false" @update:value="(v: boolean) => { rule.enabled = v; saveRules(rules) }" size="small" />
+                    <GlassSwitch :model-value="rule.enabled !== false" @update:model-value="(v: boolean) => { rule.enabled = v; saveRules(rules) }" size="small" />
                   </span>
                   <span class="rule-actions">
-                    <n-tooltip v-if="rule.plugin_managed">
-                      <template #trigger>
-                        <n-tag type="info" size="small">插件托管</n-tag>
-                      </template>
-                      此规则由插件管理
-                    </n-tooltip>
+                    <GlassTag v-if="rule.plugin_managed" type="info" title="此规则由插件管理">插件托管</GlassTag>
                     <template v-else>
                       <button class="icon-btn" @click="openEditRule(rule)">编辑</button>
                       <button class="icon-btn danger" @click="handleDeleteRule(rule)">删除</button>
@@ -642,7 +624,7 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
             <div class="card-header">
               <h3>已安装扩展</h3>
               <button class="glass-btn small" @click="openStoreModal">
-                <n-icon size="14"><StorefrontOutline /></n-icon>
+                <StorefrontOutline class="btn-icon" />
                 插件商店
               </button>
             </div>
@@ -653,142 +635,149 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
               <div v-else class="plugins-list">
                 <div v-for="plugin in clientPlugins" :key="plugin.id" class="plugin-item">
                   <div class="plugin-info">
-                    <n-icon size="18" color="#a78bfa"><ExtensionPuzzleOutline /></n-icon>
+                    <ExtensionPuzzleOutline class="plugin-icon" />
                     <span class="plugin-name">{{ plugin.name }}</span>
                     <span class="plugin-version">v{{ plugin.version }}</span>
                   </div>
                   <div class="plugin-meta">
                     <span>端口: {{ plugin.remote_port || '-' }}</span>
-                    <n-tag :type="plugin.running ? 'success' : 'default'" size="small" round>
+                    <GlassTag :type="plugin.running ? 'success' : 'default'" round>
                       {{ plugin.running ? '运行中' : '已停止' }}
-                    </n-tag>
-                    <n-switch :value="plugin.enabled" size="small" @update:value="toggleClientPlugin(plugin)" />
+                    </GlassTag>
+                    <GlassSwitch :model-value="plugin.enabled" size="small" @update:model-value="toggleClientPlugin(plugin)" />
                   </div>
                   <div class="plugin-actions">
                     <button v-if="plugin.running && plugin.remote_port" class="icon-btn success" @click="handleOpenPlugin(plugin)">打开</button>
                     <button v-if="!plugin.running" class="icon-btn" @click="handleStartPlugin(plugin)" :disabled="!online || !plugin.enabled">启动</button>
-                    <n-dropdown :options="[
-                      { label: '重启', key: 'restart', disabled: !plugin.running },
-                      { label: '配置', key: 'config' },
-                      { label: '停止', key: 'stop', disabled: !plugin.running },
-                      { label: '删除', key: 'delete' }
-                    ]" @select="(k: string) => {
-                      if(k==='restart') handleRestartPlugin(plugin);
-                      if(k==='config') openConfigModal(plugin);
-                      if(k==='delete') handleDeletePlugin(plugin);
-                      if(k==='stop') handleStopPlugin(plugin);
-                    }">
-                      <button class="icon-btn"><n-icon size="16"><SettingsOutline /></n-icon></button>
-                    </n-dropdown>
+                    <div class="dropdown-wrapper">
+                      <button class="icon-btn" @click="togglePluginMenu(plugin.id)">
+                        <SettingsOutline class="settings-icon" />
+                      </button>
+                      <div v-if="activePluginMenu === plugin.id" class="dropdown-menu">
+                        <button @click="handleRestartPlugin(plugin); activePluginMenu = ''" :disabled="!plugin.running">重启</button>
+                        <button @click="openConfigModal(plugin); activePluginMenu = ''">配置</button>
+                        <button @click="handleStopPlugin(plugin); activePluginMenu = ''" :disabled="!plugin.running">停止</button>
+                        <button class="danger" @click="handleDeletePlugin(plugin); activePluginMenu = ''">删除</button>
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
+
+          <!-- Inline Log Panel -->
+          <div class="glass-card">
+            <InlineLogPanel :client-id="clientId" />
+          </div>
         </div>
       </div>
     </div>
 
     <!-- Rule Modal -->
-    <n-modal v-model:show="showRuleModal" preset="card" :title="ruleModalType==='create'?'添加规则':'编辑规则'" style="width: 500px">
-      <n-form ref="ruleFormRef" :model="ruleForm" :rules="ruleValidationRules" label-placement="left" label-width="80">
-        <n-form-item label="名称" path="name">
-          <n-input v-model:value="ruleForm.name" placeholder="请输入规则名称" :disabled="ruleModalType==='edit'" />
-        </n-form-item>
-        <n-form-item label="类型" path="type">
-          <n-select v-model:value="ruleForm.type" :options="builtinTypes" />
-        </n-form-item>
-        <template v-if="needsLocalAddr(ruleForm.type || 'tcp')">
-          <n-form-item label="本地IP" path="local_ip">
-            <n-input v-model:value="ruleForm.local_ip" placeholder="127.0.0.1" />
-          </n-form-item>
-          <n-form-item label="本地端口" path="local_port">
-            <n-input-number v-model:value="ruleForm.local_port" :min="1" :max="65535" style="width: 100%" />
-          </n-form-item>
-        </template>
-        <n-form-item label="远程端口" path="remote_port">
-          <n-input-number v-model:value="ruleForm.remote_port" :min="1" :max="65535" style="width: 100%" />
-        </n-form-item>
-        <template v-for="field in getExtraFields(ruleForm.type || '')" :key="field.key">
-          <n-form-item :label="field.label">
-            <n-input v-if="field.type==='string'" v-model:value="ruleForm.plugin_config![field.key]" />
-            <n-input v-if="field.type==='password'" type="password" v-model:value="ruleForm.plugin_config![field.key]" show-password-on="click" />
-            <n-switch v-if="field.type==='bool'" :value="ruleForm.plugin_config![field.key]==='true'" @update:value="(v) => ruleForm.plugin_config![field.key] = String(v)" />
-          </n-form-item>
-        </template>
-      </n-form>
-      <template #footer>
-        <n-space justify="end">
-          <n-button @click="showRuleModal = false">取消</n-button>
-          <n-button type="primary" @click="handleRuleSubmit">保存</n-button>
-        </n-space>
+    <GlassModal :show="showRuleModal" :title="ruleModalType==='create'?'添加规则':'编辑规则'" @close="showRuleModal = false">
+      <div class="form-group">
+        <label class="form-label">名称</label>
+        <input v-model="ruleForm.name" class="form-input" placeholder="请输入规则名称" :disabled="ruleModalType==='edit'" />
+      </div>
+      <div class="form-group">
+        <label class="form-label">类型</label>
+        <select v-model="ruleForm.type" class="form-select">
+          <option v-for="t in builtinTypes" :key="t.value" :value="t.value">{{ t.label }}</option>
+        </select>
+      </div>
+      <template v-if="needsLocalAddr(ruleForm.type || 'tcp')">
+        <div class="form-group">
+          <label class="form-label">本地IP</label>
+          <input v-model="ruleForm.local_ip" class="form-input" placeholder="127.0.0.1" />
+        </div>
+        <div class="form-group">
+          <label class="form-label">本地端口</label>
+          <input v-model.number="ruleForm.local_port" type="number" class="form-input" min="1" max="65535" />
+        </div>
       </template>
-    </n-modal>
+      <div class="form-group">
+        <label class="form-label">远程端口</label>
+        <input v-model.number="ruleForm.remote_port" type="number" class="form-input" min="1" max="65535" />
+      </div>
+      <template v-for="field in getExtraFields(ruleForm.type || '')" :key="field.key">
+        <div class="form-group">
+          <label class="form-label">{{ field.label }}</label>
+          <input v-if="field.type==='string'" v-model="ruleForm.plugin_config![field.key]" class="form-input" />
+          <input v-if="field.type==='password'" type="password" v-model="ruleForm.plugin_config![field.key]" class="form-input" />
+          <label v-if="field.type==='bool'" class="form-toggle">
+            <input type="checkbox" :checked="ruleForm.plugin_config![field.key]==='true'" @change="(e: Event) => ruleForm.plugin_config![field.key] = String((e.target as HTMLInputElement).checked)" />
+            <span>启用</span>
+          </label>
+        </div>
+      </template>
+      <template #footer>
+        <button class="glass-btn" @click="showRuleModal = false">取消</button>
+        <button class="glass-btn primary" @click="handleRuleSubmit">保存</button>
+      </template>
+    </GlassModal>
 
     <!-- Config Modal -->
-    <n-modal v-model:show="showConfigModal" preset="card" :title="`${configPluginName} 配置`" style="width: 500px;">
-      <n-empty v-if="configLoading" description="加载中..." />
-      <n-form v-else label-placement="left" label-width="100">
-        <n-form-item v-for="field in configSchema" :key="field.key" :label="field.label">
-          <n-input v-if="field.type==='string'" v-model:value="configValues[field.key]" />
-          <n-input v-if="field.type==='password'" type="password" v-model:value="configValues[field.key]" />
-          <n-input-number v-if="field.type==='number'" :value="Number(configValues[field.key])" @update:value="(v) => configValues[field.key] = String(v)" />
-          <n-switch v-if="field.type==='bool'" :value="configValues[field.key]==='true'" @update:value="(v) => configValues[field.key] = String(v)" />
-        </n-form-item>
-      </n-form>
-      <template #footer>
-        <n-space justify="end">
-          <n-button @click="showConfigModal = false">取消</n-button>
-          <n-button type="primary" @click="savePluginConfig">保存</n-button>
-        </n-space>
+    <GlassModal :show="showConfigModal" :title="`${configPluginName} 配置`" @close="showConfigModal = false">
+      <div v-if="configLoading" class="loading-state">加载中...</div>
+      <template v-else>
+        <div v-for="field in configSchema" :key="field.key" class="form-group">
+          <label class="form-label">{{ field.label }}</label>
+          <input v-if="field.type==='string'" v-model="configValues[field.key]" class="form-input" />
+          <input v-if="field.type==='password'" type="password" v-model="configValues[field.key]" class="form-input" />
+          <input v-if="field.type==='number'" type="number" :value="Number(configValues[field.key])" @input="(e: Event) => configValues[field.key] = (e.target as HTMLInputElement).value" class="form-input" />
+          <label v-if="field.type==='bool'" class="form-toggle">
+            <input type="checkbox" :checked="configValues[field.key]==='true'" @change="(e: Event) => configValues[field.key] = String((e.target as HTMLInputElement).checked)" />
+            <span>启用</span>
+          </label>
+        </div>
       </template>
-    </n-modal>
+      <template #footer>
+        <button class="glass-btn" @click="showConfigModal = false">取消</button>
+        <button class="glass-btn primary" @click="savePluginConfig">保存</button>
+      </template>
+    </GlassModal>
 
     <!-- Rename Modal -->
-    <n-modal v-model:show="showRenameModal" preset="card" title="重命名客户端" style="width: 400px;">
-      <n-input v-model:value="renameValue" placeholder="请输入新名称" />
+    <GlassModal :show="showRenameModal" title="重命名客户端" width="400px" @close="showRenameModal = false">
+      <div class="form-group">
+        <label class="form-label">新名称</label>
+        <input v-model="renameValue" class="form-input" placeholder="请输入新名称" />
+      </div>
       <template #footer>
-        <n-space justify="end">
-          <n-button @click="showRenameModal = false">取消</n-button>
-          <n-button type="primary" @click="saveRename">保存</n-button>
-        </n-space>
+        <button class="glass-btn" @click="showRenameModal = false">取消</button>
+        <button class="glass-btn primary" @click="saveRename">保存</button>
       </template>
-    </n-modal>
+    </GlassModal>
 
     <!-- Store Modal -->
-    <n-modal v-model:show="showStoreModal" preset="card" title="插件商店" style="width: 600px;">
-      <n-spin :show="storeLoading">
-        <n-grid :x-gap="12" :y-gap="12" cols="1 600:2">
-          <n-grid-item v-for="plugin in storePlugins" :key="plugin.name">
-            <div class="store-plugin-card">
-              <div class="store-plugin-header">
-                <span class="store-plugin-name">{{ plugin.name }}</span>
-                <n-tag size="small">v{{ plugin.version }}</n-tag>
-              </div>
-              <p class="store-plugin-desc">{{ plugin.description }}</p>
-              <button class="glass-btn primary small full" @click="handleInstallStorePlugin(plugin)">
-                安装
-              </button>
-            </div>
-          </n-grid-item>
-        </n-grid>
-      </n-spin>
-    </n-modal>
+    <GlassModal :show="showStoreModal" title="插件商店" width="600px" @close="showStoreModal = false">
+      <div v-if="storeLoading" class="loading-state">加载中...</div>
+      <div v-else class="store-grid">
+        <div v-for="plugin in storePlugins" :key="plugin.name" class="store-plugin-card">
+          <div class="store-plugin-header">
+            <span class="store-plugin-name">{{ plugin.name }}</span>
+            <n-tag size="small">v{{ plugin.version }}</n-tag>
+          </div>
+          <p class="store-plugin-desc">{{ plugin.description }}</p>
+          <button class="glass-btn primary small full" @click="handleInstallStorePlugin(plugin)">
+            安装
+          </button>
+        </div>
+      </div>
+    </GlassModal>
 
     <!-- Install Config Modal -->
-    <n-modal v-model:show="showInstallConfigModal" preset="card" title="安装配置" style="width: 400px;">
-      <n-form label-placement="left">
-        <n-form-item label="远程端口">
-          <n-input-number v-model:value="installRemotePort" :min="1" :max="65535" style="width: 100%" />
-        </n-form-item>
-      </n-form>
+    <GlassModal :show="showInstallConfigModal" title="安装配置" width="400px" @close="showInstallConfigModal = false">
+      <div class="form-group">
+        <label class="form-label">远程端口</label>
+        <input v-model.number="installRemotePort" type="number" class="form-input" min="1" max="65535" />
+      </div>
       <template #footer>
-        <n-space justify="end">
-          <n-button @click="showInstallConfigModal = false">取消</n-button>
-          <n-button type="primary" @click="confirmInstallPlugin">确认安装</n-button>
-        </n-space>
+        <button class="glass-btn" @click="showInstallConfigModal = false">取消</button>
+        <button class="glass-btn primary" @click="confirmInstallPlugin">确认安装</button>
       </template>
-    </n-modal>
+    </GlassModal>
 
     <LogViewer :visible="showLogViewer" @close="showLogViewer = false" :client-id="clientId" />
   </div>
@@ -1201,4 +1190,159 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
   margin: 0 0 12px 0;
   line-height: 1.5;
 }
+
+/* Store Grid */
+.store-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+}
+
+@media (max-width: 500px) {
+  .store-grid { grid-template-columns: 1fr; }
+}
+
+/* Form Styles */
+.form-group {
+  margin-bottom: 16px;
+}
+
+.form-label {
+  display: block;
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.7);
+  margin-bottom: 6px;
+}
+
+.form-input {
+  width: 100%;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 8px;
+  padding: 10px 12px;
+  color: white;
+  font-size: 14px;
+  outline: none;
+  transition: border-color 0.2s;
+  box-sizing: border-box;
+}
+
+.form-input:focus {
+  border-color: rgba(167, 139, 250, 0.5);
+}
+
+.form-input::placeholder {
+  color: rgba(255, 255, 255, 0.4);
+}
+
+.form-input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.form-select {
+  width: 100%;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 8px;
+  padding: 10px 12px;
+  color: white;
+  font-size: 14px;
+  outline: none;
+  cursor: pointer;
+}
+
+.form-select option {
+  background: #1e1b4b;
+  color: white;
+}
+
+.form-toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.form-toggle input[type="checkbox"] {
+  width: 18px;
+  height: 18px;
+  accent-color: #a78bfa;
+}
+
+.loading-state {
+  text-align: center;
+  padding: 32px;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+/* Dropdown Menu */
+.dropdown-wrapper {
+  position: relative;
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 4px;
+  background: rgba(30, 27, 75, 0.95);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 8px;
+  padding: 4px;
+  min-width: 100px;
+  z-index: 100;
+}
+
+.dropdown-menu button {
+  display: block;
+  width: 100%;
+  padding: 8px 12px;
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+
+.dropdown-menu button:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.1);
+  color: white;
+}
+
+.dropdown-menu button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.dropdown-menu button.danger {
+  color: #fca5a5;
+}
+
+.dropdown-menu button.danger:hover:not(:disabled) {
+  background: rgba(239, 68, 68, 0.2);
+}
+
+/* Icon styles */
+.btn-icon {
+  width: 14px;
+  height: 14px;
+}
+
+.plugin-icon {
+  width: 18px;
+  height: 18px;
+  color: #a78bfa;
+}
+
+.settings-icon {
+  width: 16px;
+  height: 16px;
+}
 </style>

web/src/views/HomeView.vue

@@ -1,10 +1,8 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue'
-import { useRouter } from 'vue-router'
 import { getClients } from '../api'
 import type { ClientStatus } from '../types'
 
-const router = useRouter()
 const clients = ref<ClientStatus[]>([])
 
 // Mock data for traffic (API not implemented yet)
@@ -15,6 +13,23 @@ const trafficStats = ref({
   outboundUnit: 'GB'
 })
 
+// Mock 24h traffic data for chart
+const trafficHistory = ref<Array<{ hour: string; inbound: number; outbound: number }>>([])
+
+const generateMockTrafficData = () => {
+  const data = []
+  const now = new Date()
+  for (let i = 23; i >= 0; i--) {
+    const hour = new Date(now.getTime() - i * 60 * 60 * 1000)
+    data.push({
+      hour: hour.getHours().toString().padStart(2, '0') + ':00',
+      inbound: Math.random() * 100,
+      outbound: Math.random() * 80
+    })
+  }
+  trafficHistory.value = data
+}
+
 const loadClients = async () => {
   try {
     const { data } = await getClients()
@@ -28,11 +43,26 @@ const onlineClients = computed(() => {
   return clients.value.filter(client => client.online).length
 })
 
-onMounted(loadClients)
+const totalRules = computed(() => {
+  return clients.value.reduce((sum, c) => sum + (c.rule_count || 0), 0)
+})
 
-const viewClient = (id: string) => {
-  router.push(`/client/${id}`)
+// Chart helpers
+const maxTraffic = computed(() => {
+  const max = Math.max(
+    ...trafficHistory.value.map(d => Math.max(d.inbound, d.outbound))
+  )
+  return max || 100
+})
+
+const getBarHeight = (value: number) => {
+  return (value / maxTraffic.value) * 100
 }
+
+onMounted(() => {
+  loadClients()
+  generateMockTrafficData()
+})
 </script>
 
 <template>
@@ -64,15 +94,10 @@ const viewClient = (id: string) => {
             </svg>
           </div>
           <div class="stat-content">
-            <span class="stat-label">Outbound Traffic</span>
+            <span class="stat-label">出站流量</span>
             <span class="stat-value">{{ trafficStats.outbound.toFixed(2) }}</span>
             <span class="stat-unit">{{ trafficStats.outboundUnit }}</span>
           </div>
-          <div class="stat-trend up">
-            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
-            </svg>
-          </div>
         </div>
 
         <!-- Inbound Traffic -->
@@ -83,15 +108,10 @@ const viewClient = (id: string) => {
             </svg>
           </div>
           <div class="stat-content">
-            <span class="stat-label">Inbound Traffic</span>
+            <span class="stat-label">入站流量</span>
             <span class="stat-value">{{ trafficStats.inbound.toFixed(2) }}</span>
             <span class="stat-unit">{{ trafficStats.inboundUnit }}</span>
           </div>
-          <div class="stat-trend up">
-            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
-            </svg>
-          </div>
         </div>
 
         <!-- Client Count -->
@@ -102,79 +122,58 @@ const viewClient = (id: string) => {
             </svg>
           </div>
           <div class="stat-content">
-            <span class="stat-label">Clients</span>
+            <span class="stat-label">客户端</span>
             <div class="client-count">
               <span class="stat-value online">{{ onlineClients }}</span>
               <span class="stat-separator">/</span>
               <span class="stat-value total">{{ clients.length }}</span>
             </div>
-            <span class="stat-unit">online / total</span>
+            <span class="stat-unit">在线 / 总数</span>
           </div>
           <div class="online-indicator" :class="{ active: onlineClients > 0 }">
             <span class="pulse"></span>
           </div>
         </div>
+
+        <!-- Rules Count -->
+        <div class="stat-card glass-stat">
+          <div class="stat-icon rules">
+            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
+            </svg>
+          </div>
+          <div class="stat-content">
+            <span class="stat-label">代理规则</span>
+            <span class="stat-value">{{ totalRules }}</span>
+            <span class="stat-unit">条规则</span>
+          </div>
+        </div>
       </div>
 
-      <!-- Client List Section -->
-      <div class="clients-section">
+      <!-- Traffic Chart Section -->
+      <div class="chart-section">
         <div class="section-header">
-          <h2 class="text-xl font-semibold text-white">Connected Clients</h2>
-          <span class="client-badge">{{ clients.length }} clients</span>
+          <h2 class="section-title">24小时流量趋势</h2>
+          <div class="chart-legend">
+            <span class="legend-item inbound"><span class="legend-dot"></span>入站</span>
+            <span class="legend-item outbound"><span class="legend-dot"></span>出站</span>
+          </div>
         </div>
 
-        <!-- Empty State -->
-        <div v-if="clients.length === 0" class="empty-state glass-card">
-          <svg xmlns="http://www.w3.org/2000/svg" class="w-16 h-16 text-white/30 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-          </svg>
-          <p class="text-white/50 text-lg">No clients connected</p>
-          <p class="text-white/30 text-sm mt-2">Waiting for tunnel connections...</p>
-        </div>
-
-        <!-- Client Cards Grid -->
-        <div v-else class="clients-grid">
-          <div
-            v-for="client in clients"
-            :key="client.id"
-            class="client-card glass-card"
-            @click="viewClient(client.id)"
-          >
-            <div class="client-header">
-              <div class="client-status" :class="{ online: client.online }">
-                <span class="status-dot"></span>
-              </div>
-              <h3 class="client-name">{{ client.nickname || client.id }}</h3>
-            </div>
-
-            <p v-if="client.nickname" class="client-id">{{ client.id }}</p>
-
-            <div class="client-info">
-              <div v-if="client.remote_addr && client.online" class="info-item">
-                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
-                </svg>
-                <span>{{ client.remote_addr }}</span>
-              </div>
-              <div class="info-item">
-                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
-                </svg>
-                <span>{{ client.rule_count }} rules</span>
+        <div class="chart-card glass-card">
+          <div class="chart-container">
+            <div class="chart-bars">
+              <div v-for="(data, index) in trafficHistory" :key="index" class="bar-group">
+                <div class="bar-wrapper">
+                  <div class="bar inbound" :style="{ height: getBarHeight(data.inbound) + '%' }"></div>
+                  <div class="bar outbound" :style="{ height: getBarHeight(data.outbound) + '%' }"></div>
+                </div>
+                <span class="bar-label">{{ data.hour }}</span>
               </div>
             </div>
-
-            <div class="client-tags">
-              <span class="tag" :class="client.online ? 'tag-online' : 'tag-offline'">
-                {{ client.online ? 'Online' : 'Offline' }}
-              </span>
-            </div>
-
-            <div class="card-arrow">
-              <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-              </svg>
-            </div>
+          </div>
+          <div class="chart-hint">
+            <span>流量统计功能开发中，当前显示模拟数据</span>
           </div>
         </div>
       </div>
@@ -269,12 +268,18 @@ const viewClient = (id: string) => {
 /* Stats Grid */
 .stats-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 24px;
-  margin-bottom: 40px;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+  margin-bottom: 32px;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 1024px) {
+  .stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 640px) {
   .stats-grid {
     grid-template-columns: 1fr;
   }
@@ -328,6 +333,11 @@ const viewClient = (id: string) => {
   box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
 }
 
+.stat-icon.rules {
+  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
+  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
+}
+
 .stat-icon svg {
   color: white;
 }
@@ -419,8 +429,8 @@ const viewClient = (id: string) => {
   50% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
 }
 
-/* Clients Section */
-.clients-section {
+/* Chart Section */
+.chart-section {
   margin-top: 16px;
 }
 
@@ -431,157 +441,102 @@ const viewClient = (id: string) => {
   margin-bottom: 20px;
 }
 
-.client-badge {
-  background: rgba(255, 255, 255, 0.1);
-  color: rgba(255, 255, 255, 0.7);
-  padding: 6px 12px;
-  border-radius: 20px;
-  font-size: 13px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-/* Empty state */
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 64px 32px;
-  text-align: center;
-}
-
-/* Clients grid */
-.clients-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 20px;
-}
-
-@media (max-width: 1024px) {
-  .clients-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (max-width: 640px) {
-  .clients-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-/* Client card */
-.client-card {
-  background: rgba(255, 255, 255, 0.06);
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  border-radius: 16px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  padding: 20px;
-  cursor: pointer;
-  position: relative;
-  transition: all 0.2s ease;
-}
-
-.client-card:hover {
-  background: rgba(255, 255, 255, 0.1);
-  transform: translateY(-2px);
-  border-color: rgba(255, 255, 255, 0.2);
-}
-
-.client-card:active {
-  transform: translateY(0) scale(0.98);
-}
-
-/* Client header */
-.client-header {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 8px;
-}
-
-.client-status {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.3);
-}
-
-.client-status.online {
-  background: #34d399;
-  box-shadow: 0 0 8px rgba(52, 211, 153, 0.6);
-}
-
-.client-name {
-  font-size: 16px;
+.section-title {
+  font-size: 18px;
   font-weight: 600;
   color: white;
   margin: 0;
 }
 
-.client-id {
-  font-size: 12px;
-  color: rgba(255, 255, 255, 0.4);
-  margin: 0 0 12px 0;
-}
-
-/* Client info */
-.client-info {
+.chart-legend {
   display: flex;
-  flex-direction: column;
-  gap: 6px;
-  margin-bottom: 12px;
+  gap: 16px;
 }
 
-.info-item {
+.legend-item {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
   font-size: 13px;
-  color: rgba(255, 255, 255, 0.6);
+  color: rgba(255, 255, 255, 0.7);
 }
 
-.info-item svg {
-  flex-shrink: 0;
-  opacity: 0.6;
+.legend-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
 }
 
-/* Client tags */
-.client-tags {
+.legend-item.inbound .legend-dot {
+  background: #a78bfa;
+}
+
+.legend-item.outbound .legend-dot {
+  background: #60a5fa;
+}
+
+/* Chart Card */
+.chart-card {
+  padding: 24px;
+}
+
+.chart-container {
+  height: 200px;
+  overflow-x: auto;
+}
+
+.chart-bars {
   display: flex;
+  gap: 4px;
+  height: 100%;
+  min-width: 600px;
+  align-items: flex-end;
+}
+
+.bar-group {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   gap: 8px;
 }
 
-.tag {
-  padding: 4px 10px;
-  border-radius: 6px;
+.bar-wrapper {
+  flex: 1;
+  width: 100%;
+  display: flex;
+  gap: 2px;
+  align-items: flex-end;
+}
+
+.bar {
+  flex: 1;
+  border-radius: 3px 3px 0 0;
+  min-height: 2px;
+  transition: height 0.3s ease;
+}
+
+.bar.inbound {
+  background: linear-gradient(180deg, #a78bfa 0%, #8b5cf6 100%);
+}
+
+.bar.outbound {
+  background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%);
+}
+
+.bar-label {
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.4);
+  white-space: nowrap;
+}
+
+.chart-hint {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  text-align: center;
   font-size: 12px;
-  font-weight: 500;
-}
-
-.tag-online {
-  background: rgba(52, 211, 153, 0.2);
-  color: #34d399;
-}
-
-.tag-offline {
-  background: rgba(255, 255, 255, 0.1);
-  color: rgba(255, 255, 255, 0.5);
-}
-
-/* Card arrow */
-.card-arrow {
-  position: absolute;
-  right: 16px;
-  top: 50%;
-  transform: translateY(-50%);
-  color: rgba(255, 255, 255, 0.3);
-  transition: all 0.2s ease;
-}
-
-.client-card:hover .card-arrow {
-  color: rgba(255, 255, 255, 0.6);
-  transform: translateY(-50%) translateX(4px);
+  color: rgba(255, 255, 255, 0.4);
 }
 
 /* Glass card base */

web/src/views/PluginsView.vue

@@ -1,23 +1,21 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue'
+import { ExtensionPuzzleOutline, CodeSlashOutline, SettingsOutline } from '@vicons/ionicons5'
+import GlassModal from '../components/GlassModal.vue'
+import GlassTag from '../components/GlassTag.vue'
+import GlassSwitch from '../components/GlassSwitch.vue'
+import { useToast } from '../composables/useToast'
 import {
-  NButton, NSpace, NTag, NIcon, NSwitch, NModal, NInput, NInputNumber, NSelect,
-  useMessage
-} from 'naive-ui'
-import { ExtensionPuzzleOutline, StorefrontOutline, CodeSlashOutline, SettingsOutline } from '@vicons/ionicons5'
-import {
-  getPlugins, enablePlugin, disablePlugin, getStorePlugins, getJSPlugins,
-  pushJSPluginToClient, getClients, installStorePlugin, updateJSPluginConfig, setJSPluginEnabled
+  getPlugins, enablePlugin, disablePlugin, getJSPlugins,
+  pushJSPluginToClient, getClients, updateJSPluginConfig, setJSPluginEnabled
 } from '../api'
-import type { PluginInfo, StorePluginInfo, JSPlugin, ClientStatus } from '../types'
+import type { PluginInfo, JSPlugin, ClientStatus } from '../types'
 
-const message = useMessage()
+const message = useToast()
 const plugins = ref<PluginInfo[]>([])
-const storePlugins = ref<StorePluginInfo[]>([])
 const jsPlugins = ref<JSPlugin[]>([])
 const clients = ref<ClientStatus[]>([])
 const loading = ref(true)
-const storeLoading = ref(false)
 const jsLoading = ref(false)
 const activeTab = ref('installed')
 
@@ -32,18 +30,6 @@ const loadPlugins = async () => {
   }
 }
 
-const loadStorePlugins = async () => {
-  storeLoading.value = true
-  try {
-    const { data } = await getStorePlugins()
-    storePlugins.value = data.plugins || []
-  } catch (e) {
-    console.error('Failed to load store plugins', e)
-  } finally {
-    storeLoading.value = false
-  }
-}
-
 const proxyPlugins = computed(() => plugins.value.filter(p => p.type === 'proxy'))
 const appPlugins = computed(() => plugins.value.filter(p => p.type === 'app'))
 
@@ -68,7 +54,6 @@ const getTypeLabel = (type: string) => {
 }
 
 const handleTabChange = (tab: string) => {
-  if (tab === 'store' && storePlugins.value.length === 0) loadStorePlugins()
   if (tab === 'js' && jsPlugins.value.length === 0) loadJSPlugins()
 }
 
@@ -172,58 +157,6 @@ const toggleJSPlugin = async (plugin: JSPlugin) => {
   }
 }
 
-// Store Plugin Install
-const showInstallModal = ref(false)
-const selectedStorePlugin = ref<StorePluginInfo | null>(null)
-const selectedClientId = ref('')
-const installing = ref(false)
-const installRemotePort = ref<number | null>(8080)
-const installAuthEnabled = ref(false)
-const installAuthUsername = ref('')
-const installAuthPassword = ref('')
-
-const openInstallModal = (plugin: StorePluginInfo) => {
-  selectedStorePlugin.value = plugin
-  selectedClientId.value = ''
-  installRemotePort.value = 8080
-  installAuthEnabled.value = false
-  installAuthUsername.value = ''
-  installAuthPassword.value = ''
-  showInstallModal.value = true
-}
-
-const handleInstallStorePlugin = async () => {
-  if (!selectedStorePlugin.value || !selectedClientId.value) {
-    message.warning('请选择要安装到的客户端')
-    return
-  }
-  if (!selectedStorePlugin.value.download_url || !selectedStorePlugin.value.signature_url) {
-    message.error('该插件缺少下载地址或签名')
-    return
-  }
-  installing.value = true
-  try {
-    await installStorePlugin(
-      selectedStorePlugin.value.name,
-      selectedStorePlugin.value.download_url,
-      selectedStorePlugin.value.signature_url,
-      selectedClientId.value,
-      installRemotePort.value || 8080,
-      selectedStorePlugin.value.version,
-      selectedStorePlugin.value.config_schema,
-      installAuthEnabled.value,
-      installAuthUsername.value,
-      installAuthPassword.value
-    )
-    message.success(`已安装 ${selectedStorePlugin.value.name}`)
-    showInstallModal.value = false
-  } catch (e: any) {
-    message.error(e.response?.data || '安装失败')
-  } finally {
-    installing.value = false
-  }
-}
-
 onMounted(() => {
   loadPlugins()
   loadClients()
@@ -243,7 +176,7 @@ onMounted(() => {
       <!-- Header -->
       <div class="page-header">
         <h1 class="page-title">插件管理</h1>
-        <p class="page-subtitle">管理已安装插件和浏览插件商店</p>
+        <p class="page-subtitle">管理已安装插件和 JS 插件</p>
       </div>
 
       <!-- Stats Row -->
@@ -268,9 +201,6 @@ onMounted(() => {
           <button class="tab-btn" :class="{ active: activeTab === 'installed' }" @click="activeTab = 'installed'">
             已安装插件
           </button>
-          <button class="tab-btn" :class="{ active: activeTab === 'store' }" @click="activeTab = 'store'; handleTabChange('store')">
-            插件商店
-          </button>
           <button class="tab-btn" :class="{ active: activeTab === 'js' }" @click="activeTab = 'js'; handleTabChange('js')">
             JS 插件
           </button>
@@ -284,50 +214,23 @@ onMounted(() => {
             <div v-for="plugin in plugins" :key="plugin.name" class="plugin-card">
               <div class="plugin-header">
                 <div class="plugin-icon">
-                  <n-icon size="20" color="#a78bfa"><ExtensionPuzzleOutline /></n-icon>
+                  <ExtensionPuzzleOutline class="icon-purple" />
                 </div>
                 <span class="plugin-name">{{ plugin.name }}</span>
-                <n-switch :value="plugin.enabled" size="small" @update:value="togglePlugin(plugin)" />
+                <GlassSwitch :model-value="plugin.enabled" size="small" @update:model-value="togglePlugin(plugin)" />
               </div>
               <div class="plugin-tags">
-                <n-tag size="small">v{{ plugin.version }}</n-tag>
-                <n-tag size="small" :type="plugin.type === 'proxy' ? 'info' : 'success'">{{ getTypeLabel(plugin.type) }}</n-tag>
-                <n-tag size="small" :type="plugin.source === 'builtin' ? 'default' : 'warning'">
+                <GlassTag>v{{ plugin.version }}</GlassTag>
+                <GlassTag :type="plugin.type === 'proxy' ? 'info' : 'success'">{{ getTypeLabel(plugin.type) }}</GlassTag>
+                <GlassTag :type="plugin.source === 'builtin' ? 'default' : 'warning'">
                   {{ plugin.source === 'builtin' ? '内置' : 'JS' }}
-                </n-tag>
+                </GlassTag>
               </div>
               <p class="plugin-desc">{{ plugin.description }}</p>
             </div>
           </div>
         </div>
 
-        <!-- Store Tab -->
-        <div v-if="activeTab === 'store'" class="tab-content">
-          <div v-if="storeLoading" class="loading-state">加载中...</div>
-          <div v-else-if="storePlugins.length === 0" class="empty-state">插件商店暂无可用插件</div>
-          <div v-else class="plugins-grid">
-            <div v-for="plugin in storePlugins" :key="plugin.name" class="plugin-card">
-              <div class="plugin-header">
-                <div class="plugin-icon store">
-                  <n-icon size="20" color="#60a5fa"><StorefrontOutline /></n-icon>
-                </div>
-                <span class="plugin-name">{{ plugin.name }}</span>
-                <button
-                  v-if="plugin.download_url && plugin.signature_url && onlineClients.length > 0"
-                  class="glass-btn primary tiny"
-                  @click="openInstallModal(plugin)"
-                >安装</button>
-              </div>
-              <div class="plugin-tags">
-                <n-tag size="small">v{{ plugin.version }}</n-tag>
-                <n-tag size="small" :type="plugin.type === 'proxy' ? 'info' : 'success'">{{ getTypeLabel(plugin.type) }}</n-tag>
-              </div>
-              <p class="plugin-desc">{{ plugin.description }}</p>
-              <p class="plugin-author">作者: {{ plugin.author }}</p>
-            </div>
-          </div>
-        </div>
-
         <!-- JS Plugins Tab -->
         <div v-if="activeTab === 'js'" class="tab-content">
           <div v-if="jsLoading" class="loading-state">加载中...</div>
@@ -336,30 +239,30 @@ onMounted(() => {
             <div v-for="plugin in jsPlugins" :key="plugin.name" class="plugin-card js">
               <div class="plugin-header">
                 <div class="plugin-icon js">
-                  <n-icon size="20" color="#fbbf24"><CodeSlashOutline /></n-icon>
+                  <CodeSlashOutline class="icon-yellow" />
                 </div>
                 <span class="plugin-name">{{ plugin.name }}</span>
-                <n-tag v-if="plugin.version" size="small">v{{ plugin.version }}</n-tag>
-                <n-switch :value="plugin.enabled" size="small" @update:value="toggleJSPlugin(plugin)" />
+                <GlassTag v-if="plugin.version">v{{ plugin.version }}</GlassTag>
+                <GlassSwitch :model-value="plugin.enabled" size="small" @update:model-value="toggleJSPlugin(plugin)" />
               </div>
               <div class="plugin-tags">
-                <n-tag size="small" type="warning">JS</n-tag>
-                <n-tag v-if="plugin.auto_start" size="small" type="success">自动启动</n-tag>
-                <n-tag v-if="plugin.signature" size="small" type="info">已签名</n-tag>
+                <GlassTag type="warning">JS</GlassTag>
+                <GlassTag v-if="plugin.auto_start" type="success">自动启动</GlassTag>
+                <GlassTag v-if="plugin.signature" type="info">已签名</GlassTag>
               </div>
               <p class="plugin-desc">{{ plugin.description || '无描述' }}</p>
               <p v-if="plugin.author" class="plugin-author">作者: {{ plugin.author }}</p>
               <div v-if="Object.keys(plugin.config || {}).length > 0" class="plugin-config-preview">
                 <span class="config-label">配置:</span>
-                <n-space :size="4" wrap>
-                  <n-tag v-for="(value, key) in plugin.config" :key="key" size="small">
+                <div class="config-tags">
+                  <GlassTag v-for="(value, key) in plugin.config" :key="key">
                     {{ key }}: {{ String(value).length > 10 ? String(value).slice(0, 10) + '...' : value }}
-                  </n-tag>
-                </n-space>
+                  </GlassTag>
+                </div>
               </div>
               <div class="plugin-actions">
                 <button class="glass-btn tiny" @click="openJSConfigModal(plugin)">
-                  <n-icon size="14"><SettingsOutline /></n-icon>
+                  <SettingsOutline class="btn-icon" />
                   配置
                 </button>
                 <button v-if="onlineClients.length > 0" class="glass-btn primary tiny" @click="openPushModal(plugin)">
@@ -372,78 +275,47 @@ onMounted(() => {
       </div>
     </div>
 
-    <!-- Install Modal -->
-    <n-modal v-model:show="showInstallModal" preset="card" title="安装插件" style="width: 450px;">
-      <n-space vertical :size="16">
-        <div v-if="selectedStorePlugin">
-          <p style="margin: 0 0 8px 0;"><strong>插件:</strong> {{ selectedStorePlugin.name }}</p>
-          <p style="margin: 0; color: #666;">{{ selectedStorePlugin.description }}</p>
-        </div>
-        <n-select v-model:value="selectedClientId" placeholder="选择客户端"
-          :options="onlineClients.map(c => ({ label: c.nickname || c.id, value: c.id }))" />
-        <div>
-          <p style="margin: 0 0 8px 0; color: #666; font-size: 13px;">远程端口:</p>
-          <n-input-number v-model:value="installRemotePort" :min="1" :max="65535" style="width: 100%;" />
-        </div>
-        <n-space align="center" :size="8">
-          <n-switch v-model:value="installAuthEnabled" />
-          <span style="color: #666;">启用 HTTP Basic Auth</span>
-        </n-space>
-        <template v-if="installAuthEnabled">
-          <n-input v-model:value="installAuthUsername" placeholder="用户名" />
-          <n-input v-model:value="installAuthPassword" type="password" placeholder="密码" show-password-on="click" />
-        </template>
-      </n-space>
-      <template #footer>
-        <n-space justify="end">
-          <n-button @click="showInstallModal = false">取消</n-button>
-          <n-button type="primary" :loading="installing" :disabled="!selectedClientId" @click="handleInstallStorePlugin">安装</n-button>
-        </n-space>
-      </template>
-    </n-modal>
-
     <!-- JS Config Modal -->
-    <n-modal v-model:show="showJSConfigModal" preset="card" :title="`${currentJSPlugin?.name || ''} 配置`" style="width: 500px;">
-      <n-space vertical :size="12">
-        <p style="margin: 0; color: #666; font-size: 13px;">编辑插件配置参数</p>
-        <div v-for="(item, index) in jsConfigItems" :key="index">
-          <n-space :size="8" align="center">
-            <n-input v-model:value="item.key" placeholder="参数名" style="width: 150px;" />
-            <n-input v-model:value="item.value" placeholder="参数值" style="width: 200px;" />
-            <n-button v-if="jsConfigItems.length > 1" quaternary type="error" size="small" @click="removeJSConfigItem(index)">删除</n-button>
-          </n-space>
-        </div>
-        <n-button dashed size="small" @click="addJSConfigItem">添加配置项</n-button>
-      </n-space>
+    <GlassModal :show="showJSConfigModal" :title="`${currentJSPlugin?.name || ''} 配置`" @close="showJSConfigModal = false">
+      <p class="config-hint">编辑插件配置参数</p>
+      <div v-for="(item, index) in jsConfigItems" :key="index" class="config-row">
+        <input v-model="item.key" class="form-input config-key" placeholder="参数名" />
+        <input v-model="item.value" class="form-input config-value" placeholder="参数值" />
+        <button v-if="jsConfigItems.length > 1" class="icon-btn danger" @click="removeJSConfigItem(index)">删除</button>
+      </div>
+      <button class="glass-btn small dashed" @click="addJSConfigItem">添加配置项</button>
       <template #footer>
-        <n-space justify="end">
-          <n-button @click="showJSConfigModal = false">取消</n-button>
-          <n-button type="primary" :loading="jsConfigSaving" @click="saveJSPluginConfig">保存</n-button>
-        </n-space>
+        <button class="glass-btn" @click="showJSConfigModal = false">取消</button>
+        <button class="glass-btn primary" :disabled="jsConfigSaving" @click="saveJSPluginConfig">
+          {{ jsConfigSaving ? '保存中...' : '保存' }}
+        </button>
       </template>
-    </n-modal>
+    </GlassModal>
 
     <!-- Push Modal -->
-    <n-modal v-model:show="showPushModal" preset="card" title="推送插件到客户端" style="width: 400px;">
-      <n-space vertical :size="16">
-        <div v-if="selectedJSPlugin">
-          <p style="margin: 0 0 8px 0;"><strong>插件:</strong> {{ selectedJSPlugin.name }}</p>
-          <p style="margin: 0; color: #666;">{{ selectedJSPlugin.description || '无描述' }}</p>
-        </div>
-        <n-select v-model:value="pushClientId" placeholder="选择客户端"
-          :options="onlineClients.map(c => ({ label: c.nickname || c.id, value: c.id }))" />
-        <div>
-          <p style="margin: 0 0 8px 0; color: #666; font-size: 13px;">远程端口:</p>
-          <n-input-number v-model:value="pushRemotePort" :min="1" :max="65535" style="width: 100%;" />
-        </div>
-      </n-space>
+    <GlassModal :show="showPushModal" title="推送插件到客户端" width="400px" @close="showPushModal = false">
+      <div v-if="selectedJSPlugin" class="plugin-info-box">
+        <p class="plugin-info-name">插件: {{ selectedJSPlugin.name }}</p>
+        <p class="plugin-info-desc">{{ selectedJSPlugin.description || '无描述' }}</p>
+      </div>
+      <div class="form-group">
+        <label class="form-label">选择客户端</label>
+        <select v-model="pushClientId" class="form-select">
+          <option value="" disabled>选择客户端</option>
+          <option v-for="c in onlineClients" :key="c.id" :value="c.id">{{ c.nickname || c.id }}</option>
+        </select>
+      </div>
+      <div class="form-group">
+        <label class="form-label">远程端口</label>
+        <input v-model.number="pushRemotePort" type="number" class="form-input" min="1" max="65535" />
+      </div>
       <template #footer>
-        <n-space justify="end">
-          <n-button @click="showPushModal = false">取消</n-button>
-          <n-button type="primary" :loading="pushing" :disabled="!pushClientId" @click="handlePushJSPlugin">推送</n-button>
-        </n-space>
+        <button class="glass-btn" @click="showPushModal = false">取消</button>
+        <button class="glass-btn primary" :disabled="!pushClientId || pushing" @click="handlePushJSPlugin">
+          {{ pushing ? '推送中...' : '推送' }}
+        </button>
       </template>
-    </n-modal>
+    </GlassModal>
   </div>
 </template>
 
@@ -711,4 +583,180 @@ onMounted(() => {
   padding: 4px 10px;
   font-size: 11px;
 }
+
+.glass-btn.small {
+  padding: 6px 12px;
+  font-size: 12px;
+}
+
+.glass-btn.dashed {
+  border-style: dashed;
+}
+
+.glass-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Form Styles */
+.form-group {
+  margin-bottom: 16px;
+}
+
+.form-label {
+  display: block;
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.7);
+  margin-bottom: 6px;
+}
+
+.form-input {
+  width: 100%;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 8px;
+  padding: 10px 12px;
+  color: white;
+  font-size: 14px;
+  outline: none;
+  transition: border-color 0.2s;
+  box-sizing: border-box;
+}
+
+.form-input:focus {
+  border-color: rgba(167, 139, 250, 0.5);
+}
+
+.form-input::placeholder {
+  color: rgba(255, 255, 255, 0.4);
+}
+
+.form-select {
+  width: 100%;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 8px;
+  padding: 10px 12px;
+  color: white;
+  font-size: 14px;
+  outline: none;
+  cursor: pointer;
+}
+
+.form-select option {
+  background: #1e1b4b;
+  color: white;
+}
+
+.form-toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.form-toggle input[type="checkbox"] {
+  width: 18px;
+  height: 18px;
+  accent-color: #a78bfa;
+}
+
+/* Plugin Info Box */
+.plugin-info-box {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 8px;
+  padding: 12px;
+  margin-bottom: 16px;
+}
+
+.plugin-info-name {
+  margin: 0 0 4px 0;
+  color: white;
+  font-weight: 500;
+}
+
+.plugin-info-desc {
+  margin: 0;
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 13px;
+}
+
+/* Config Row */
+.config-hint {
+  margin: 0 0 12px 0;
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 13px;
+}
+
+.config-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.config-key {
+  width: 150px;
+  flex-shrink: 0;
+}
+
+.config-value {
+  flex: 1;
+}
+
+.icon-btn {
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+  border-radius: 6px;
+  padding: 6px 10px;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.icon-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: white;
+}
+
+.icon-btn.danger {
+  color: #fca5a5;
+}
+
+.icon-btn.danger:hover {
+  background: rgba(239, 68, 68, 0.2);
+}
+
+/* Icon styles */
+.icon-purple {
+  width: 20px;
+  height: 20px;
+  color: #a78bfa;
+}
+
+.icon-blue {
+  width: 20px;
+  height: 20px;
+  color: #60a5fa;
+}
+
+.icon-yellow {
+  width: 20px;
+  height: 20px;
+  color: #fbbf24;
+}
+
+.btn-icon {
+  width: 14px;
+  height: 14px;
+}
+
+.config-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
 </style>

web/src/views/SettingsView.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import {
-  NTag, NIcon, useMessage, useDialog
-} from 'naive-ui'
 import { CloudDownloadOutline, RefreshOutline, ServerOutline } from '@vicons/ionicons5'
+import GlassTag from '../components/GlassTag.vue'
+import { useToast } from '../composables/useToast'
+import { useConfirm } from '../composables/useConfirm'
 import {
   getVersionInfo, checkServerUpdate, applyServerUpdate,
   type UpdateInfo, type VersionInfo
 } from '../api'
 
-const message = useMessage()
-const dialog = useDialog()
+const message = useToast()
+const dialog = useConfirm()
 
 const versionInfo = ref<VersionInfo | null>(null)
 const serverUpdate = ref<UpdateInfo | null>(null)
@@ -106,7 +106,7 @@ onMounted(() => {
       <div class="glass-card">
         <div class="card-header">
           <h3>版本信息</h3>
-          <n-icon size="20" color="#a78bfa"><ServerOutline /></n-icon>
+          <ServerOutline class="header-icon" />
         </div>
         <div class="card-body">
           <div v-if="loading" class="loading-state">加载中...</div>
@@ -145,7 +145,7 @@ onMounted(() => {
         <div class="card-header">
           <h3>服务端更新</h3>
           <button class="glass-btn small" :disabled="checkingServer" @click="handleCheckServerUpdate">
-            <n-icon size="14"><RefreshOutline /></n-icon>
+            <RefreshOutline class="btn-icon" />
             检查更新
           </button>
         </div>
@@ -163,7 +163,7 @@ onMounted(() => {
 
             <div v-if="serverUpdate.download_url" class="download-info">
               下载文件: {{ serverUpdate.asset_name }}
-              <n-tag size="small" style="margin-left: 8px;">{{ formatBytes(serverUpdate.asset_size) }}</n-tag>
+              <GlassTag style="margin-left: 8px;">{{ formatBytes(serverUpdate.asset_size) }}</GlassTag>
             </div>
 
             <div v-if="serverUpdate.release_note" class="release-note">
@@ -177,7 +177,7 @@ onMounted(() => {
               :disabled="updatingServer"
               @click="handleApplyServerUpdate"
             >
-              <n-icon size="16"><CloudDownloadOutline /></n-icon>
+              <CloudDownloadOutline class="btn-icon" />
               下载并更新服务端
             </button>
           </template>
@@ -394,4 +394,16 @@ onMounted(() => {
   background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
   border: none;
 }
+
+/* Icon styles */
+.header-icon {
+  width: 20px;
+  height: 20px;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.btn-icon {
+  width: 14px;
+  height: 14px;
+}
 </style>