🎨 cicd

🎨 优化页面
🎨 编辑
2026-04-02 18:54:03 +08:00 · 2026-03-30 17:08:46 +08:00 · 2025-12-13 07:35:49 +00:00 · 2025-03-04 09:01:29 +08:00 · 2025-03-04 08:48:06 +08:00 · 2025-03-03 16:53:05 +08:00
33 changed files with 3986 additions and 1053 deletions
--- a/.gitea/workflows/ci.yml
+++ b/.gitea/workflows/ci.yml
@@ -0,0 +1,87 @@
+name: CI
+
+on:
+  push:
+    tags:
+      - "v*"
+  pull_request:
+
+env:
+  GO_VERSION: "1.23.0"
+  NODE_VERSION: "18"
+  PNPM_VERSION: "8.6.10"
+  REGISTRY: code.mrx.ltd
+  IMAGE_NAME: code.mrx.ltd/pkg/wireguard-srv
+
+jobs:
+  backend-check:
+    name: Backend Check
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Go
+        uses: actions/setup-go@v5
+        with:
+          go-version: ${{ env.GO_VERSION }}
+          cache: true
+
+      - name: Download Go modules
+        run: go mod download
+
+      - name: Run Go test
+        run: go test ./...
+
+      - name: Verify backend build
+        run: go build -o /tmp/wgui .
+
+  frontend-build:
+    name: Frontend Build
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: web
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: ${{ env.PNPM_VERSION }}
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: pnpm
+          cache-dependency-path: web/pnpm-lock.yaml
+
+      - name: Install frontend dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build frontend
+        run: pnpm build
+
+  docker-publish:
+    name: Publish Docker Image
+    if: startsWith(github.ref, 'refs/tags/v')
+    needs:
+      - backend-check
+      - frontend-build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Login registry
+        run: echo "${{ secrets.DOCKER_PWD }}" | docker login "${{ env.REGISTRY }}" -u "${{ secrets.DOCKER_USER }}" --password-stdin
+
+      - name: Build image
+        run: docker build -t "${{ env.IMAGE_NAME }}:${GITHUB_REF_NAME}" -t "${{ env.IMAGE_NAME }}:latest" .
+
+      - name: Push image
+        run: |
+          docker push "${{ env.IMAGE_NAME }}:${GITHUB_REF_NAME}"
+          docker push "${{ env.IMAGE_NAME }}:latest"
--- a/4
+++ b/4
@@ -1,4 +1,4 @@
-# 打包前端
+# 打包前端 
 FROM node:18-alpine AS build-front

 WORKDIR /front
@@ -23,7 +23,7 @@ COPY --from=build-front /front/web/dist/ /build/dist
 ENV GO111MODULE=on
 ENV GOPROXY=https://goproxy.cn,direct

-RUN  go build -ldflags="-s -w" -o wgui && upx -9 wgui
+RUN go version && go build -ldflags="-s -w" -o wgui && upx -9 wgui

 RUN ls -lh && chmod +x ./wgui

--- a/cron/cron.go
+++ b/cron/cron.go
@@ -3,11 +3,16 @@ package cron
 import (
 	"gitee.ltd/lxh/logger/log"
 	"github.com/go-co-op/gocron/v2"
+	"github.com/spf13/cast"
+	"os"
 	"time"
 	"wireguard-ui/cron/task"
 )

 func Task() {
+	if !cast.ToBool(os.Getenv("ENABLED_CRON")) {
+		return
+	}
 	sch, err := gocron.NewScheduler(gocron.WithLocation(time.Local))
 	if err != nil {
 		log.Errorf("初始化定时任务失败")
--- a/document/openapi.yaml
+++ b/document/openapi.yaml
--- a/go.mod
+++ b/go.mod
@@ -1,24 +1,28 @@
 module wireguard-ui

-go 1.21
+go 1.22.7
+
+toolchain go1.23.0

 require (
-	gitee.ltd/lxh/logger v1.0.18
+	gitee.ltd/lxh/logger v1.0.19
 	github.com/charmbracelet/bubbles v0.20.0
 	github.com/charmbracelet/lipgloss v0.13.0
 	github.com/cowardmrx/go_aliyun_oss v1.0.7
 	github.com/dustin/go-humanize v1.0.1
 	github.com/eiannone/keyboard v0.0.0-20220611211555-0d226195f203
-	github.com/fsnotify/fsnotify v1.7.0
+	github.com/fsnotify/fsnotify v1.8.0
+	github.com/gin-contrib/pprof v1.5.2
 	github.com/gin-gonic/gin v1.10.0
 	github.com/glebarez/sqlite v1.11.0
 	github.com/go-co-op/gocron/v2 v2.12.4
 	github.com/go-playground/locales v0.14.1
 	github.com/go-playground/universal-translator v0.18.1
-	github.com/go-playground/validator/v10 v10.22.0
-	github.com/go-resty/resty/v2 v2.13.1
+	github.com/go-playground/validator/v10 v10.23.0
+	github.com/go-resty/resty/v2 v2.15.3
 	github.com/golang-jwt/jwt/v5 v5.2.1
 	github.com/google/uuid v1.6.0
+	github.com/joho/godotenv v1.5.1
 	github.com/jordan-wright/email v4.0.1-0.20210109023952-943e75fe5223+incompatible
 	github.com/json-iterator/go v1.1.12
 	github.com/mojocn/base64Captcha v1.3.6
@@ -40,31 +44,35 @@ require (
 	github.com/aliyun/aliyun-oss-go-sdk v2.2.5+incompatible // indirect
 	github.com/aymanbagabas/go-osc52/v2 v2.0.1 // indirect
 	github.com/beorn7/perks v1.0.1 // indirect
-	github.com/bytedance/sonic v1.12.5 // indirect
-	github.com/bytedance/sonic/loader v0.2.0 // indirect
+	github.com/bytedance/gopkg v0.1.3 // indirect
+	github.com/bytedance/sonic v1.15.0 // indirect
+	github.com/bytedance/sonic/loader v0.5.0 // indirect
 	github.com/caarlos0/env/v6 v6.10.1 // indirect
-	github.com/cespare/xxhash/v2 v2.2.0 // indirect
+	github.com/cespare/xxhash/v2 v2.3.0 // indirect
 	github.com/charmbracelet/bubbletea v1.1.0 // indirect
 	github.com/charmbracelet/x/ansi v0.2.3 // indirect
 	github.com/charmbracelet/x/term v0.2.0 // indirect
-	github.com/cloudwego/base64x v0.1.4 // indirect
-	github.com/cloudwego/iasm v0.2.0 // indirect
+	github.com/cloudwego/base64x v0.1.6 // indirect
 	github.com/cpuguy83/go-md2man/v2 v2.0.5 // indirect
+	github.com/davecgh/go-spew v1.1.2-0.20180830191138-d8f796af33cc // indirect
+	github.com/dennwc/varint v1.0.0 // indirect
 	github.com/dgryski/go-rendezvous v0.0.0-20200823014737-9f7001d12a5f // indirect
 	github.com/erikgeiser/coninput v0.0.0-20211004153227-1c3628e74d0f // indirect
-	github.com/gabriel-vasile/mimetype v1.4.3 // indirect
+	github.com/gabriel-vasile/mimetype v1.4.7 // indirect
 	github.com/gin-contrib/sse v0.1.0 // indirect
 	github.com/glebarez/go-sqlite v1.21.2 // indirect
 	github.com/go-kit/kit v0.12.0 // indirect
 	github.com/go-kit/log v0.2.1 // indirect
 	github.com/go-logfmt/logfmt v0.5.1 // indirect
 	github.com/go-sql-driver/mysql v1.7.0 // indirect
-	github.com/goccy/go-json v0.10.2 // indirect
+	github.com/goccy/go-json v0.10.4 // indirect
 	github.com/gogo/protobuf v1.3.2 // indirect
 	github.com/golang/freetype v0.0.0-20170609003504-e2365dfdc4a0 // indirect
-	github.com/golang/protobuf v1.5.3 // indirect
 	github.com/golang/snappy v0.0.4 // indirect
 	github.com/google/go-cmp v0.6.0 // indirect
+	github.com/grafana/loki-client-go v0.0.0-20240913122146-e119d400c3a5 // indirect
+	github.com/grafana/loki/pkg/push v0.0.0-20240912152814-63e84b476a9a // indirect
+	github.com/grafana/regexp v0.0.0-20220304095617-2e8d9baf4ac2 // indirect
 	github.com/hashicorp/hcl v1.0.0 // indirect
 	github.com/jackc/pgpassfile v1.0.0 // indirect
 	github.com/jackc/pgservicefile v0.0.0-20221227161230-091c0ba34f0a // indirect
@@ -75,15 +83,14 @@ require (
 	github.com/jonboulle/clockwork v0.4.0 // indirect
 	github.com/josharian/native v1.1.0 // indirect
 	github.com/jpillora/backoff v1.0.0 // indirect
-	github.com/klauspost/cpuid/v2 v2.2.7 // indirect
+	github.com/klauspost/cpuid/v2 v2.2.9 // indirect
+	github.com/kylelemons/godebug v1.1.0 // indirect
 	github.com/leodido/go-urn v1.4.0 // indirect
-	github.com/lixh00/loki-client-go v1.0.1 // indirect
 	github.com/lucasb-eyer/go-colorful v1.2.0 // indirect
 	github.com/magiconair/properties v1.8.7 // indirect
 	github.com/mattn/go-isatty v0.0.20 // indirect
 	github.com/mattn/go-localereader v0.0.1 // indirect
 	github.com/mattn/go-runewidth v0.0.16 // indirect
-	github.com/matttproud/golang_protobuf_extensions v1.0.2 // indirect
 	github.com/mdlayher/genetlink v1.3.2 // indirect
 	github.com/mdlayher/netlink v1.7.2 // indirect
 	github.com/mdlayher/socket v0.4.1 // indirect
@@ -93,16 +100,18 @@ require (
 	github.com/muesli/ansi v0.0.0-20230316100256-276c6243b2f6 // indirect
 	github.com/muesli/cancelreader v0.2.2 // indirect
 	github.com/muesli/termenv v0.15.2 // indirect
+	github.com/munnerz/goautoneg v0.0.0-20191010083416-a7dc8b61c822 // indirect
 	github.com/mwitkow/go-conntrack v0.0.0-20190716064945-2f068394615f // indirect
 	github.com/natefinch/lumberjack v2.0.0+incompatible // indirect
 	github.com/panjf2000/ants/v2 v2.10.0 // indirect
-	github.com/pelletier/go-toml/v2 v2.2.2 // indirect
+	github.com/pelletier/go-toml/v2 v2.2.3 // indirect
 	github.com/pkg/errors v0.9.1 // indirect
-	github.com/prometheus/client_golang v1.13.0 // indirect
-	github.com/prometheus/client_model v0.3.0 // indirect
-	github.com/prometheus/common v0.37.0 // indirect
-	github.com/prometheus/procfs v0.8.0 // indirect
-	github.com/prometheus/prometheus v1.8.2-0.20201028100903-3245b3267b24 // indirect
+	github.com/pmezard/go-difflib v1.0.1-0.20181226105442-5d4384ee4fb2 // indirect
+	github.com/prometheus/client_golang v1.20.5 // indirect
+	github.com/prometheus/client_model v0.6.1 // indirect
+	github.com/prometheus/common v0.61.0 // indirect
+	github.com/prometheus/procfs v0.15.1 // indirect
+	github.com/prometheus/prometheus v0.35.0 // indirect
 	github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec // indirect
 	github.com/rivo/uniseg v0.4.7 // indirect
 	github.com/robfig/cron/v3 v3.0.1 // indirect
@@ -112,27 +121,29 @@ require (
 	github.com/sourcegraph/conc v0.3.0 // indirect
 	github.com/spf13/afero v1.11.0 // indirect
 	github.com/spf13/pflag v1.0.5 // indirect
+	github.com/stretchr/testify v1.10.0 // indirect
 	github.com/subosito/gotenv v1.6.0 // indirect
 	github.com/twitchyliquid64/golang-asm v0.15.1 // indirect
 	github.com/ugorji/go/codec v1.2.12 // indirect
 	github.com/xrash/smetrics v0.0.0-20240521201337-686a1a2994c1 // indirect
-	go.uber.org/atomic v1.10.0 // indirect
-	go.uber.org/multierr v1.9.0 // indirect
+	go.uber.org/atomic v1.11.0 // indirect
+	go.uber.org/goleak v1.3.0 // indirect
+	go.uber.org/multierr v1.11.0 // indirect
 	go.uber.org/zap v1.23.0 // indirect
-	golang.org/x/arch v0.8.0 // indirect
+	golang.org/x/arch v0.12.0 // indirect
 	golang.org/x/image v0.18.0 // indirect
 	golang.org/x/net v0.33.0 // indirect
-	golang.org/x/oauth2 v0.18.0 // indirect
+	golang.org/x/oauth2 v0.24.0 // indirect
 	golang.org/x/sync v0.10.0 // indirect
 	golang.org/x/sys v0.28.0 // indirect
 	golang.org/x/text v0.21.0 // indirect
-	golang.org/x/time v0.5.0 // indirect
+	golang.org/x/time v0.8.0 // indirect
 	golang.zx2c4.com/wireguard v0.0.0-20230325221338-052af4a8072b // indirect
-	google.golang.org/appengine v1.6.8 // indirect
-	google.golang.org/genproto/googleapis/rpc v0.0.0-20240314234333-6e1732d8331c // indirect
-	google.golang.org/grpc v1.62.1 // indirect
-	google.golang.org/protobuf v1.34.1 // indirect
+	google.golang.org/genproto/googleapis/rpc v0.0.0-20241209162323-e6fa225c2576 // indirect
+	google.golang.org/grpc v1.69.0 // indirect
+	google.golang.org/protobuf v1.36.5 // indirect
 	gopkg.in/ini.v1 v1.67.0 // indirect
+	gopkg.in/natefinch/lumberjack.v2 v2.2.1 // indirect
 	gopkg.in/yaml.v2 v2.4.0 // indirect
 	gopkg.in/yaml.v3 v3.0.1 // indirect
 	modernc.org/libc v1.22.5 // indirect
--- a/go.sum
+++ b/go.sum
--- a/http/api/setting.go
+++ b/http/api/setting.go
@@ -184,6 +184,9 @@ func (setting) Import(c *gin.Context) {
 		response.R(c).FailedWithError(err)
 		return
 	}
+	defer func() {
+		_ = fileBytes.Close()
+	}()

 	var data vo.Export
 	if err := json.NewDecoder(fileBytes).Decode(&data); err != nil {
--- a/http/api/user.go
+++ b/http/api/user.go
@@ -140,8 +140,13 @@ func (UserApi) Delete(c *gin.Context) {
 		return
 	}

+	loginUser := GetCurrentLoginUser(c)
+	if c.IsAborted() {
+		return
+	}
+
 	// 是不是自己删除自己
-	if id == GetCurrentLoginUser(c).Id && c.IsAborted() {
+	if id == loginUser.Id {
 		response.R(c).FailedWithError("非法操作")
 		return
 	}
@@ -178,8 +183,13 @@ func (UserApi) Status(c *gin.Context) {
 		return
 	}

+	loginUser := GetCurrentLoginUser(c)
+	if c.IsAborted() {
+		return
+	}
+
 	// 是不是自己删除自己
-	if id == GetCurrentLoginUser(c).Id && c.IsAborted() {
+	if id == loginUser.Id {
 		response.R(c).FailedWithError("非法操作")
 		return
 	}
--- a/http/kernel.go
+++ b/http/kernel.go
@@ -3,7 +3,10 @@ package http
 import (
 	"fmt"
 	"gitee.ltd/lxh/logger/log"
+	"github.com/gin-contrib/pprof"
+	"github.com/spf13/cast"
 	"net/http"
+	"os"
 	"wireguard-ui/config"
 	"wireguard-ui/http/router"
 )
@@ -16,6 +19,10 @@ func Kernel() error {
 	handler := router.InitRouter()
 	addr := fmt.Sprintf(":%d", config.Config.Http.Port)

+	if cast.ToBool(os.Getenv("ENABLED_PPROF")) {
+		pprof.Register(handler, "/monitoring")
+	}
+
 	httpServer := http.Server{
 		Addr:    addr,
 		Handler: handler,
--- a/http/router/client.go
+++ b/http/router/client.go
@@ -10,7 +10,7 @@ import (
 // @description: 登陆相关API
 // @param r
 func ClientApi(r *gin.RouterGroup) {
-	client := r.Group("client", middleware.Authorization(), middleware.RequestLog())
+	client := r.Group("client", middleware.RequestLog(), middleware.Authorization())
 	{
 		client.POST("", api.Client().Save)                       // 新增/编辑客户端
 		client.DELETE("/:id", api.Client().Delete)               // 删除客户端
--- a/http/router/dashboard.go
+++ b/http/router/dashboard.go
@@ -10,7 +10,7 @@ import (
 // @description: 控制台相关接口
 // @param r
 func DashboardApi(r *gin.RouterGroup) {
-	dashboard := r.Group("dashboard", middleware.Authorization(), middleware.RequestLog())
+	dashboard := r.Group("dashboard", middleware.RequestLog(), middleware.Authorization())
 	{
 		dashboard.GET("/request/list", api.Dashboard().List)          // 请求日志
 		dashboard.GET("/daily-poetry", api.Dashboard().DailyPoetry)   // 每日诗词
--- a/http/router/root.go
+++ b/http/router/root.go
@@ -20,7 +20,7 @@ func InitRouter() *gin.Engine {
 	// 开启IP 追踪
 	r.ForwardedByClientIP = true
 	// 将请求打印至控制台
-	r.Use(gin.Logger())
+	r.Use(gin.Logger(), gin.Recovery())

 	if config.Config.File.Type == "local" {
 		r.Static("/assets", config.Config.File.Path)
--- a/http/router/setting.go
+++ b/http/router/setting.go
@@ -10,7 +10,7 @@ import (
 // @description: 设置相关API
 // @param r
 func SettingApi(r *gin.RouterGroup) {
-	setting := r.Group("setting", middleware.Authorization(), middleware.RequestLog())
+	setting := r.Group("setting", middleware.RequestLog(), middleware.Authorization())
 	{
 		setting.POST("", api.Setting().Set)                      // 新增/编辑设置
 		setting.DELETE("/:code", api.Setting().Delete)           // 删除配置
--- a/http/router/user.go
+++ b/http/router/user.go
@@ -10,7 +10,7 @@ import (
 // @description: 用户相关API
 // @param r
 func UserApi(r *gin.RouterGroup) {
-	userApi := r.Group("user", middleware.Authorization(), middleware.RequestLog())
+	userApi := r.Group("user", middleware.RequestLog(), middleware.Authorization())
 	{
 		userApi.GET("/info", api.User().GetLoginUser)                // 获取当前登陆用户信息
 		userApi.POST("", api.User().SaveUser)                        // 新增/编辑用户
--- a/initialize/init.go
+++ b/initialize/init.go
@@ -9,6 +9,7 @@ import (
 	"github.com/gin-gonic/gin"
 	"github.com/glebarez/sqlite"
 	"github.com/go-resty/resty/v2"
+	"github.com/joho/godotenv"
 	"github.com/redis/go-redis/v9"
 	"github.com/spf13/viper"
 	"golang.zx2c4.com/wireguard/wgctrl"
@@ -27,6 +28,7 @@ import (
 func Init() {
 	initLogger()     // 初始化日志
 	initConfig()     // 读取配置文件
+	initEnv()        // 加载环境变量文件
 	initWireguard()  // 初始化wireguard客户端
 	initDatabase()   // 初始化数据库
 	initRedis()      // 初始化redis
@@ -153,3 +155,11 @@ func initLogger() {
 		FileEnable: true,
 	})
 }
+
+// initEnv
+// @description: 初始化环境变量
+func initEnv() {
+	if err := godotenv.Load(".env"); err != nil {
+		log.Errorf("加载.env文件失败: %v", err.Error())
+	}
+}
--- a/model/wireguard.go
+++ b/model/wireguard.go
@@ -22,16 +22,3 @@ type Client struct {
 func (Client) TableName() string {
 	return "t_client"
 }
-
-// Watcher
-// @description: 监听日志
-type Watcher struct {
-	Base
-	ClientId     string `json:"clientId" gorm:"type:char(36);not null;comment:'客户端id'"`
-	NotifyResult string `json:"notifyResult" gorm:"type:text;default null;comment:'通知结果'"`
-	IsSend       int    `json:"isSend" gorm:"type:tinyint(1);default 0;comment:'是否已通知'"`
-}
-
-func (Watcher) TableName() string {
-	return "t_watcher"
-}
--- a/web/.aiassistant/rules/front_code_rule.md
+++ b/web/.aiassistant/rules/front_code_rule.md
@@ -0,0 +1,72 @@
+---
+apply: 始终
+---
+
+# 前端开发全局强制准则 (V1.0 - Multi-Framework Pro)
+
+## 1. 性能与资产安全 (Performance & Asset Safety)
+* **加载优化 (Loading)**：
+    * **强制路由懒加载**：所有页面组件必须使用动态 `import()` 导入。
+    * **按需引入**：UI 框架（Naive UI, Element Plus, AntD）必须配置插件实现自动按需引入，严禁全局注册。
+* **渲染性能 (Rendering)**：
+    * **长列表防御**：展示数据超过 50 条时，必须使用**虚拟列表 (Virtual List)** 或分页加载，禁止直接渲染大批量 DOM。
+    * **资产压缩**：禁止在页面加载超过 500KB 的原始图片，必须使用 WebP 格式或 CDN 缩略图参数。
+* **内存释放 (Cleanup)**：
+    * 定时器 (`setInterval`)、全局事件监听 (`window.addEventListener`)、WebSocket 必须在组件卸载钩子（`onUnmounted` / `useEffect cleanup`）中明确销毁。
+
+## 2. 状态管理与数据流 (State & Data Flow)
+* **状态分层原则**：
+    * **局部优先**：仅在跨页面/跨多级组件共享时才使用 Pinia 或 Redux。
+    * **不可变性 (Immutability)**：严禁直接修改复杂对象的属性，必须使用解构赋值或 `set` 函数确保引用更新。
+* **数据安全 (Safety)**：
+    * **可选链操作**：渲染后端异步数据必须使用 `?.` 可选链，严禁因 `undefined` 导致页面白屏。
+    * **声明式校验**：表单提交前必须通过 Schema 校验，严禁依赖后端接口反馈作为唯一拦截手段。
+
+## 3. 组件架构与规模控制 (Architecture & Scale)
+* **单文件硬指标**：**单个组件文件代码禁止超过 1000 行**。
+    * **重构门禁**：超过 800 行时，AI/开发者必须将业务逻辑抽离至 `Hooks` (Vue3 `useXXX` / React `useXXX`)。
+* **层级规范**：
+    * 目录嵌套严禁超过 4 层。
+    * **职责分离**：复杂的页面必须拆分为“逻辑容器组件”和“纯 UI 展示组件”。
+* **通用逻辑封装**：
+    * 业务无关的格式化、正则、计算函数必须存放在 `src/utils`。
+    * 跨组件复用的逻辑必须封装为 `Hooks`。
+
+## 4. 命名与样式规范 (Naming & CSS)
+* **精简命名**：
+    * **组件命名**：采用 `PascalCase`（如 `UserCard.vue`），严禁超过 3 个单词。
+    * **方法前缀**：事件处理函数使用 `handle`（如 `handleSearch`），数据获取使用 `fetch` 或 `get`。
+* **样式隔离 (Scoped CSS)**：
+    * 必须启用 `scoped` 或 `CSS Modules`，严禁定义可能污染全局的类名。
+    * **严禁内联样式**：禁止在 HTML 标签上写大量 `style` 属性。
+    * **变量化**：颜色、字号必须引用预定义的 CSS 变量，严禁在组件内散落十六进制颜色值。
+
+## 5. 框架专项标准 (Framework Specifics)
+
+### Vue3 (uniapp / Naive UI)
+* **语法糖**：必须使用 `<script setup>` 组合式 API。
+* **响应式选择**：单一基本类型用 `ref`，结构化对象用 `reactive`。
+* **uniapp 适配**：原生 API（扫码、支付）必须在 `src/utils/uni-tools.js` 中二次封装，禁止页面内直接调用原生接口。
+
+### React
+* **依赖闭包**：`useEffect` 和 `useCallback` 必须明确声明所有依赖项，严禁由于闭包陷阱导致状态陈旧。
+* **组件更新**：优先使用 `React.memo` 优化高频刷新的子组件。
+
+---
+
+## 🤖 智能体执行指令 (Agent Frontend Instructions)
+
+1. **预审行数**：AI 生成代码前统计当前行数。若生成后 > 1000 行，AI 必须拒绝直接输出并主动提供逻辑拆分（Hooks 提取）方案。
+2. **安全性补全**：
+    * 自动为后端返回的数据访问添加 `?.`。
+    * 自动在卸载钩子中生成资源清理代码（如 `clearInterval`）。
+3. **按需引入校验**：AI 生成的 UI 组件代码必须采用按需导入模式，严禁 `import { ... } from 'ui-lib'` 全量导入。
+4. **命名自检**：自动精简用户提供的冗长类名或方法名。
+
+---
+
+## 强制执行门禁 (Submission Gaterails)
+* **ESLint/Prettier**：必须 100% 通过校验。
+* **TS 约束**：严禁滥用 `any`。所有后端接口返回数据必须定义 `interface` 或 `type`。
+* **生产环境清理**：严禁残留 `console.log` 和测试注释。
+* **一票否决**：违反任一强制规则（如白屏隐患、内存泄漏、样式全局污染），评审直接驳回。
--- a/web/src/components/page/AppPage.vue
+++ b/web/src/components/page/AppPage.vue
@@ -1,8 +1,10 @@
 <template>
  <transition name="fade-slide" mode="out-in" appear>
-    <section class="cus-scroll-y wh-full flex-col bg-[#f5f6fb] p-15 dark:bg-hex-121212">
-      <slot />
-      <AppFooter v-if="showFooter" mt-15 />
+    <section class="app-page-shell cus-scroll-y wh-full">
+      <div class="app-page-body">
+        <slot />
+        <AppFooter v-if="showFooter" mt-15 />
+      </div>
      <n-back-top :bottom="20" />
    </section>
  </transition>
@@ -16,3 +18,19 @@ defineProps({
  },
 })
 </script>
+
+<style scoped lang="scss">
+.app-page-shell {
+  position: relative;
+  padding: 16px;
+  background: #f5f7fa;
+}
+
+.app-page-body {
+  position: relative;
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>
--- a/web/src/components/page/ClientListHeaderPage.vue
+++ b/web/src/components/page/ClientListHeaderPage.vue
@@ -18,19 +18,19 @@
    </div>
  </AppPage>
  <n-modal
-    style="width: 25%"
+    class="client-list-header-modal"
+    style="width: min(760px, calc(100vw - 48px))"
    v-model:show="addModalShow"
    preset="card"
    title="添加"
-    header-style="margin-left: 40%"
+    header-style="text-align: center"
  >
    <n-form
      ref="addModalFormRef"
+      class="client-list-header-form"
      :rules="addModalFormRules"
      :model="addModalForm"
-      label-placement="left"
-      label-width="auto"
-      label-align="left"
+      label-placement="top"
      require-mark-placement="right"
    >
      <n-form-item label="名称" path="name">
@@ -39,7 +39,7 @@
      <n-form-item label="邮箱" path="email">
        <n-input v-model:value="addModalForm.email"/>
      </n-form-item>
-      <n-form-item label="IP" path="addModalForm.ipAllocation">
+      <n-form-item class="client-list-header-form__full" label="IP" path="addModalForm.ipAllocation">
        <n-select
          v-model:value="addModalForm.ipAllocation"
          filterable
@@ -50,7 +50,7 @@
          :show="false"
        />
      </n-form-item>
-      <n-form-item label="可访问IP" path="allowedIps">
+      <n-form-item class="client-list-header-form__full" label="可访问IP" path="allowedIps">
        <n-select
          v-model:value="addModalForm.allowedIps"
          filterable
@@ -61,7 +61,7 @@
          :show="false"
        />
      </n-form-item>
-      <n-form-item label="可访问IP（扩展）" path="extraAllowedIps">
+      <n-form-item class="client-list-header-form__full" label="可访问IP（扩展）" path="extraAllowedIps">
        <n-select
          v-model:value="addModalForm.extraAllowedIps"
          filterable
@@ -72,35 +72,39 @@
          :show="false"
        />
      </n-form-item>
-      <n-form-item label="服务端DNS" path="useServerDns">
-        <n-radio value="1" :checked="addModalForm.useServerDns === 1" @change="addModalForm.useServerDns = 1">是</n-radio>
-        <n-radio value="0" :checked="addModalForm.useServerDns === 0" @change="addModalForm.useServerDns = 0">否</n-radio>
+      <n-form-item class="client-list-header-form__full" label="服务端DNS" path="useServerDns">
+        <n-radio-group class="client-list-header-form__radio" :value="addModalForm.useServerDns">
+          <n-radio :value="1" :checked="addModalForm.useServerDns === 1" @change="addModalForm.useServerDns = 1">是</n-radio>
+          <n-radio :value="0" :checked="addModalForm.useServerDns === 0" @change="addModalForm.useServerDns = 0">否</n-radio>
+        </n-radio-group>
      </n-form-item>
-      <n-form-item label="公钥" path="keys.publicKey">
+      <n-form-item class="client-list-header-form__full" label="公钥" path="keys.publicKey">
        <n-input v-model:value="addModalForm.keys.publicKey"></n-input>
      </n-form-item>
-      <n-form-item label="私钥" path="keys.privateKey">
+      <n-form-item class="client-list-header-form__full" label="私钥" path="keys.privateKey">
        <n-input v-model:value="addModalForm.keys.privateKey"></n-input>
      </n-form-item>
-      <n-form-item label="共享密钥" path="keys.presharedKey">
+      <n-form-item class="client-list-header-form__full" label="共享密钥" path="keys.presharedKey">
        <n-input v-model:value="addModalForm.keys.presharedKey"></n-input>
      </n-form-item>
-      <n-form-item>
-        <n-button style="margin-left: 28%" size="small" type="info" @click="generateKeys">生成密钥对</n-button>
+      <n-form-item class="client-list-header-form__full">
+        <n-button size="small" secondary type="primary" @click="generateKeys">生成密钥对</n-button>
      </n-form-item>
-      <n-form-item label="状态" path="editModalForm.enabled">
-        <n-radio-group :value="addModalForm.enabled">
+      <n-form-item class="client-list-header-form__full" label="状态" path="editModalForm.enabled">
+        <n-radio-group class="client-list-header-form__radio" :value="addModalForm.enabled">
          <n-radio :value="1" :checked="addModalForm.enabled === 1" @change="addModalForm.enabled = 1">启用</n-radio>
          <n-radio :value="0" :checked="addModalForm.enabled === 0" @change="addModalForm.enabled = 0">禁用</n-radio>
        </n-radio-group>
      </n-form-item>
-      <n-form-item label="离线监听" path="offlineMonitoring">
-        <n-radio-group :value="addModalForm.offlineMonitoring">
+      <n-form-item class="client-list-header-form__full" label="离线监听" path="offlineMonitoring">
+        <n-radio-group class="client-list-header-form__radio" :value="addModalForm.offlineMonitoring">
          <n-radio :value="1" :checked="addModalForm.offlineMonitoring === 1" @change="addModalForm.offlineMonitoring = 1">启用</n-radio>
          <n-radio :value="0" :checked="addModalForm.offlineMonitoring === 0" @change="addModalForm.offlineMonitoring = 0">禁用</n-radio>
        </n-radio-group>
      </n-form-item>
-      <n-button type="info" style="margin-left: 40%" @click="confirmAddClient()">确认</n-button>
+      <n-form-item class="client-list-header-form__full client-list-header-form__action">
+        <n-button type="primary" @click="confirmAddClient()">确认</n-button>
+      </n-form-item>
    </n-form>
  </n-modal>
 </template>
@@ -226,4 +230,74 @@ function refreshList() {
 }


-</script>
+</script>
+
+<style scoped lang="scss">
+.client-list-header-form {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0 18px;
+}
+
+.client-list-header-form__full {
+  grid-column: 1 / -1;
+}
+
+.client-list-header-form__radio {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 18px;
+  width: 100%;
+  padding: 10px 14px;
+  border: 1px solid rgba(148, 163, 184, 0.22);
+  border-radius: 12px;
+  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
+}
+
+.client-list-header-form__action {
+  margin-top: 8px;
+}
+
+.client-list-header-form__action :deep(.n-button) {
+  min-width: 148px;
+  height: 42px;
+  border-radius: 12px;
+}
+
+.client-list-header-form :deep(.n-form-item-label) {
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  color: #64748b;
+}
+
+.client-list-header-form :deep(.n-input),
+.client-list-header-form :deep(.n-base-selection) {
+  width: 100%;
+}
+
+.client-list-header-form :deep(.n-input .n-input__input-el),
+.client-list-header-form :deep(.n-base-selection .n-base-selection-label) {
+  min-height: 42px;
+}
+
+:deep(.client-list-header-modal .n-card) {
+  width: min(760px, calc(100vw - 48px));
+  border-radius: 20px;
+  overflow: hidden;
+}
+
+:deep(.client-list-header-modal .n-card-header) {
+  padding: 22px 24px 12px;
+}
+
+:deep(.client-list-header-modal .n-card__content) {
+  padding: 12px 24px 24px;
+}
+
+@media (max-width: 960px) {
+  .client-list-header-form {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
--- a/web/src/layout/components/header/index.vue
+++ b/web/src/layout/components/header/index.vue
@@ -1,14 +1,14 @@
 <template>
-  <div flex items-center>
+  <div class="header-left">
    <MenuCollapse />
-    <BreadCrumb ml-15 hidden sm:block />
+    <BreadCrumb class="header-breadcrumb" hidden sm:block />
  </div>
-  <div ml-auto flex items-center v-if="loginUser.account === 'admin'">
+  <div v-if="loginUser.account === 'admin'" class="header-actions">
    <Export/>
    <FullScreen />
    <UserAvatar />
  </div>
-  <div ml-auto flex items-center v-else>
+  <div v-else class="header-actions">
    <FullScreen />
    <UserAvatar />
  </div>
@@ -23,3 +23,24 @@ import Export from './components/Export.vue'
 import { useUserStore } from '@/store'
 const loginUser = useUserStore()
 </script>
+
+<style scoped lang="scss">
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  min-width: 0;
+}
+
+.header-breadcrumb {
+  min-width: 0;
+}
+
+.header-actions {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-left: 16px;
+}
+</style>
--- a/web/src/layout/components/sidebar/components/SideLogo.vue
+++ b/web/src/layout/components/sidebar/components/SideLogo.vue
@@ -1,9 +1,12 @@
 <template>
-  <router-link h-60 f-c-c to="/">
-    <img src="@/assets/images/logo.png" height="42" />
-    <h2 v-show="!appStore.collapsed" ml-10 max-w-140 flex-shrink-0 text-16 font-bold color-primary>
-      {{ title }}
-    </h2>
+  <router-link class="side-logo" to="/">
+    <div class="side-logo__mark">
+      <img src="@/assets/images/logo.png" height="42" />
+    </div>
+    <div v-show="!appStore.collapsed" class="side-logo__text">
+      <p class="side-logo__eyebrow">WireGuard Control</p>
+      <h2 class="side-logo__title">{{ title }}</h2>
+    </div>
  </router-link>
 </template>

@@ -13,3 +16,43 @@ const title = import.meta.env.VITE_TITLE

 const appStore = useAppStore()
 </script>
+
+<style scoped lang="scss">
+.side-logo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 14px;
+  padding: 10px 8px;
+  border-radius: 14px;
+  color: #0f172a;
+  background: #eef4fb;
+}
+
+.side-logo__mark {
+  display: grid;
+  width: 42px;
+  height: 42px;
+  place-items: center;
+  border-radius: 12px;
+  background: #ffffff;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
+}
+
+.side-logo__eyebrow {
+  margin: 0;
+  font-size: 11px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: #64748b;
+}
+
+.side-logo__title {
+  margin: 4px 0 0;
+  max-width: 110px;
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 1.2;
+  color: #0f172a;
+}
+</style>
--- a/web/src/layout/components/sidebar/components/SideMenu.vue
+++ b/web/src/layout/components/sidebar/components/SideMenu.vue
@@ -102,19 +102,82 @@ function handleMenuSelect(key, item) {
 }
 </script>

-<style lang="scss">
+<style scoped lang="scss">
+.side-menu {
+  flex: 1;
+  background: transparent !important;
+
+  :deep(.n-menu-item-content),
+  :deep(.n-submenu-children .n-menu-item-content),
+  :deep(.n-submenu-header) {
+    margin: 3px 0;
+    border-radius: 12px;
+  }
+
+  :deep(.n-menu-item-content) {
+    padding-left: 10px !important;
+    padding-right: 10px !important;
+  }
+
+  :deep(.n-menu-item-content::before),
+  :deep(.n-submenu-children .n-menu-item-content::before),
+  :deep(.n-submenu-header::before) {
+    left: 0 !important;
+    right: 0 !important;
+    border-radius: 12px;
+  }
+
+  :deep(.n-menu-item-content-header),
+  :deep(.n-menu-item-content__icon),
+  :deep(.n-menu-item-content__arrow),
+  :deep(.n-menu-item-content__icon svg),
+  :deep(.n-submenu-header),
+  :deep(.n-submenu-header .n-menu-item-content-header),
+  :deep(.n-submenu-header .n-menu-item-content__icon),
+  :deep(.n-submenu-header .n-menu-item-content__arrow),
+  :deep(.n-submenu-header .n-icon) {
+    color: #334155 !important;
+  }
+
+  :deep(.n-menu-item-content--selected),
+  :deep(.n-menu-item-content:hover),
+  :deep(.n-submenu-header:hover),
+  :deep(.n-submenu.n-submenu--child-active > .n-submenu-header) {
+    background: #eef4fb;
+  }
+
+  :deep(.n-menu-item-content--selected) {
+    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.18);
+  }
+
+  :deep(.n-menu-item-content--selected .n-menu-item-content-header),
+  :deep(.n-menu-item-content--selected .n-menu-item-content__icon),
+  :deep(.n-menu-item-content--selected .n-menu-item-content__icon svg),
+  :deep(.n-submenu.n-submenu--child-active > .n-submenu-header),
+  :deep(.n-submenu.n-submenu--child-active > .n-submenu-header .n-menu-item-content-header),
+  :deep(.n-submenu.n-submenu--child-active > .n-submenu-header .n-menu-item-content__icon),
+  :deep(.n-submenu.n-submenu--child-active > .n-submenu-header .n-icon) {
+    color: #0f172a !important;
+  }
+}
+
 .side-menu:not(.n-menu--collapsed) {
-  .n-menu-item-content {
+  :deep(.n-menu-item-content) {
    &::before {
-      left: 5px;
-      right: 5px;
+      left: 0;
+      right: 0;
    }
    &.n-menu-item-content--selected,
    &:hover {
      &::before {
-        border-left: 4px solid var(--primary-color);
+        border-left: 3px solid #3b82f6;
      }
    }
  }
+
+  :deep(.n-submenu-header) {
+    padding-left: 10px !important;
+    padding-right: 10px !important;
+  }
 }
 </style>
--- a/web/src/layout/components/sidebar/index.vue
+++ b/web/src/layout/components/sidebar/index.vue
@@ -4,6 +4,17 @@ import SideMenu from './components/SideMenu.vue'
 </script>

 <template>
-  <SideLogo />
-  <SideMenu />
+  <div class="sidebar-shell">
+    <SideLogo />
+    <SideMenu />
+  </div>
 </template>
+
+<style scoped lang="scss">
+.sidebar-shell {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  padding: 10px 8px 16px;
+}
+</style>
--- a/web/src/layout/components/tags/index.vue
+++ b/web/src/layout/components/tags/index.vue
@@ -93,8 +93,8 @@ async function handleContextMenu(e, tagItem) {
 }
 </script>

-<style>
-.n-tag__close {
+<style scoped>
+:deep(.n-tag__close) {
  box-sizing: content-box;
  border-radius: 50%;
  font-size: 12px;
--- a/web/src/layout/index.vue
+++ b/web/src/layout/index.vue
@@ -1,7 +1,7 @@
 <template>
-  <n-layout has-sider wh-full>
+  <n-layout class="app-shell" has-sider wh-full>
    <n-layout-sider
-      bordered
+      class="app-shell__sider"
      collapse-mode="width"
      :collapsed-width="64"
      :width="200"
@@ -11,19 +11,14 @@
      <SideBar />
    </n-layout-sider>

-    <article flex-col flex-1 overflow-hidden>
-      <header
-        border-b="1 solid #eee"
-        class="flex items-center bg-white px-15"
-        dark="bg-dark border-0"
-        :style="`height: ${header.height}px`"
-      >
+    <article class="app-shell__main">
+      <header class="app-shell__header" :style="`height: ${header.height}px`">
        <AppHeader />
      </header>
-      <section v-if="tags.visible" hidden border-b bc-eee sm:block dark:border-0>
+      <section v-if="tags.visible" class="app-shell__tags" hidden sm:block>
        <AppTags :style="{ height: `${tags.height}px` }" />
      </section>
-      <section flex-1 overflow-hidden bg-hex-f5f6fb dark:bg-hex-101014>
+      <section class="app-shell__content">
        <AppMain />
      </section>
    </article>
@@ -40,3 +35,53 @@ import { header, tags } from '~/settings'

 const appStore = useAppStore()
 </script>
+
+<style scoped lang="scss">
+.app-shell {
+  padding: 12px;
+  gap: 12px;
+  background: linear-gradient(180deg, #f3f6fa 0%, #ecf1f7 100%);
+}
+
+.app-shell__sider {
+  overflow: hidden;
+  border: 1px solid var(--app-shell-border);
+  border-radius: 18px;
+  background: #f8fafc;
+  box-shadow: var(--app-shell-shadow);
+}
+
+.app-shell__main {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
+  gap: 12px;
+  overflow: hidden;
+}
+
+.app-shell__header,
+.app-shell__tags {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--app-shell-border);
+  border-radius: 16px;
+  background: var(--app-shell-bg);
+  box-shadow: var(--app-shell-shadow);
+}
+
+.app-shell__header {
+  padding: 0 16px;
+}
+
+.app-shell__tags {
+  padding: 0 8px;
+}
+
+.app-shell__content {
+  min-height: 0;
+  flex: 1;
+  overflow: hidden;
+  border-radius: 18px;
+}
+</style>
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -11,12 +11,12 @@ import App from './App.vue'
 import { setupNaiveDiscreteApi } from './utils'
 import mitt from 'mitt'

-const EventMitt = mitt();
+const eventBus = mitt()

 async function setupApp() {
  const app = createApp(App)
  setupStore(app)
-  app.config.globalProperties.$bus = EventMitt;
+  app.config.globalProperties.$bus = eventBus
  await setupRouter(app)
  app.mount('#app')
  setupNaiveDiscreteApi()
--- a/web/src/styles/global.scss
+++ b/web/src/styles/global.scss
@@ -1,3 +1,20 @@
+body {
+  margin: 0;
+  color: #162033;
+  background: #eef3f8;
+  font-family: 'Avenir Next', 'PingFang SC', 'Helvetica Neue', sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+:root {
+  --app-shell-bg: #ffffff;
+  --app-shell-border: rgba(148, 163, 184, 0.14);
+  --app-shell-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
+  --app-panel-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
+  --app-panel-radius: 16px;
+}
+
 html,
 body {
  width: 100%;
@@ -10,6 +27,15 @@ body {
  height: 100%;
 }

+a {
+  color: inherit;
+}
+
+.n-card {
+  border-color: var(--app-shell-border);
+  box-shadow: var(--app-panel-shadow);
+}
+
 /* transition fade-slide */
 .fade-slide-leave-active,
 .fade-slide-enter-active {
--- a/web/src/utils/common/naiveTools.js
+++ b/web/src/utils/common/naiveTools.js
@@ -1,4 +1,5 @@
-import * as NaiveUI from 'naive-ui'
+import { computed } from 'vue'
+import { createDiscreteApi, darkTheme } from 'naive-ui'
 import { isNullOrUndef } from '@/utils'
 import { naiveThemeOverrides as themeOverrides } from '~/settings'
 import { useAppStore } from '@/store/modules/app'
@@ -84,10 +85,10 @@ export function setupDialog(NDialog) {
 export function setupNaiveDiscreteApi() {
  const appStore = useAppStore()
  const configProviderProps = computed(() => ({
-    theme: appStore.isDark ? NaiveUI.darkTheme : undefined,
+    theme: appStore.isDark ? darkTheme : undefined,
    themeOverrides,
  }))
-  const { message, dialog, notification, loadingBar } = NaiveUI.createDiscreteApi(
+  const { message, dialog, notification, loadingBar } = createDiscreteApi(
    ['message', 'dialog', 'notification', 'loadingBar'],
    { configProviderProps }
  )
--- a/web/src/views/client/index.vue
+++ b/web/src/views/client/index.vue
--- a/web/src/views/setting/index.vue
+++ b/web/src/views/setting/index.vue
@@ -1,12 +1,14 @@
 <template>
  <AppPage>
-    <n-card>
-      <n-tabs default-value="Server" justify-content="space-evenly" type="line" @update-value="tabChange">
+    <n-card class="setting-card form-surface" :bordered="false">
+      <n-tabs class="setting-tabs" default-value="Server" justify-content="space-evenly" type="line" @update-value="tabChange">
        <n-tab-pane name="Server" tab="服务端">
          <n-form
+            class="setting-form"
            ref="serverFormRef"
            :model="serverFormModel"
            :rules="serverFormRules"
+            label-placement="top"
          >
            <n-form-item label="IP段" path="ipScope" :rule="{
              required: true,
@@ -44,34 +46,36 @@
                trigger: ['change','blur']
              }
            ]">
-              <n-input-number :min="1120" :max="65535" v-model:value="serverFormModel.listenPort"/>
+              <n-input-number :min="1120" :max="65535" v-model:value="serverFormModel.listenPort" />
            </n-form-item>
            <n-form-item label="私钥" path="privateKey">
-              <n-input v-model:value="serverFormModel.privateKey"/>
+              <n-input v-model:value="serverFormModel.privateKey" />
            </n-form-item>
            <n-form-item label="公钥" path="publicKey">
-              <n-input v-model:value="serverFormModel.publicKey"/>
+              <n-input v-model:value="serverFormModel.publicKey" />
            </n-form-item>
            <n-form-item label="上行脚本" path="postUpScript">
-              <n-input v-model:value="serverFormModel.postUpScript"/>
+              <n-input v-model:value="serverFormModel.postUpScript" />
            </n-form-item>
            <n-form-item label="下行脚本" path="postDownScript">
-              <n-input v-model:value="serverFormModel.postDownScript"/>
+              <n-input v-model:value="serverFormModel.postDownScript" />
            </n-form-item>
-            <n-form-item>
-              <n-button type="info" @click="updateServerConf">确认</n-button>
+            <n-form-item class="setting-form__action">
+              <n-button type="primary" @click="updateServerConf">保存服务端配置</n-button>
            </n-form-item>
          </n-form>
        </n-tab-pane>
        <n-tab-pane name="Global" tab="全局">
          <n-form
+            class="setting-form"
            ref="globalFormRef"
            :model="globalFormModel"
            :rules="globalFormRules"
+            label-placement="top"
          >
-            <n-form-item label="公网IP" path="endpointAddress" class="pid">
-              <n-input v-model:value="globalFormModel.endpointAddress"/>
-              <n-button style="margin-top: 5px" size="small" type="warning" @click="getPublicAddr">获取地址</n-button>
+            <n-form-item label="公网IP" path="endpointAddress" class="setting-form__endpoint">
+              <n-input v-model:value="globalFormModel.endpointAddress" />
+              <n-button class="setting-form__inline-btn" size="small" secondary type="primary" @click="getPublicAddr">获取地址</n-button>
            </n-form-item>
            <n-form-item label="DNS" path="dnsServer" :rule="{
              required: true,
@@ -109,7 +113,7 @@
                trigger: ['change','blur']
              }
            ]">
-              <n-input-number :min="100" :max="3000" v-model:value="globalFormModel.MTU"/>
+              <n-input-number :min="100" :max="3000" v-model:value="globalFormModel.MTU" />
            </n-form-item>
            <n-form-item label="persistentKeepalive" path="persistentKeepalive" :rule="[
              {
@@ -131,24 +135,24 @@
                trigger: ['change','blur']
              }
            ]">
-              <n-input-number :min="15" :max="300" v-model:value="globalFormModel.persistentKeepalive"/>
+              <n-input-number :min="15" :max="300" v-model:value="globalFormModel.persistentKeepalive" />
            </n-form-item>
            <n-form-item label="firewallMark" path="firewallMark">
-              <n-input v-model:value="globalFormModel.firewallMark"/>
+              <n-input v-model:value="globalFormModel.firewallMark" />
            </n-form-item>
            <n-form-item label="table" path="table">
-              <n-input v-model:value="globalFormModel.table"/>
+              <n-input v-model:value="globalFormModel.table" />
            </n-form-item>
            <n-form-item label="configPath" path="configFilePath">
-              <n-input v-model:value="globalFormModel.configFilePath"/>
+              <n-input v-model:value="globalFormModel.configFilePath" />
            </n-form-item>
-            <n-form-item>
-              <n-button type="info" @click="updateGlobalConf">确认</n-button>
+            <n-form-item class="setting-form__action">
+              <n-button type="primary" @click="updateGlobalConf">保存全局配置</n-button>
            </n-form-item>
          </n-form>
        </n-tab-pane>
        <n-tab-pane name="Other" tab="其他">
-            <n-button style="float:right;margin-bottom: 10px" size="small" type="info" @click="showAddModal = !showAddModal">添加</n-button>
+            <n-button class="setting-other__add" size="small" type="primary" @click="showAddModal = !showAddModal">添加</n-button>
            <n-data-table
              :columns="tableColumns"
              :data="taleData.data"
@@ -160,15 +164,18 @@
      :title="editFormModel.describe"
      v-model:show="showEditModal"
      preset="card"
-      style="width: 30%"
+      class="setting-modal"
+      style="width: min(560px, calc(100vw - 48px))"
    >
      <n-form
+        class="setting-form setting-form--modal"
        ref="editFormRef"
        :model="editFormModel"
+        label-placement="top"
      >
        <n-form-item v-for="(item,index) in editFormModel.data" :label="index">
-          <n-input v-if="typeof item === 'string'" v-model:value="editFormModel.data[index]"/>
-          <n-input-number v-else-if="typeof item === 'number'" v-model:value="editFormModel.data[index]"/>
+          <n-input v-if="typeof item === 'string'" v-model:value="editFormModel.data[index]" />
+          <n-input-number v-else-if="typeof item === 'number'" v-model:value="editFormModel.data[index]" />
          <n-radio-group v-else-if="typeof item === 'boolean'" :value="editFormModel.data[index]">
            <n-radio :value="true" :checked="editFormModel.data[index] === true" @change="editFormModel.data[index] = true">是</n-radio>
            <n-radio :value="false" :checked="editFormModel.data[index] === false" @change="editFormModel.data[index] = false">否</n-radio>
@@ -177,8 +184,8 @@
        <n-form-item label="配置描述">
          <n-input v-model:value="editFormModel.describe" />
        </n-form-item>
-        <n-form-item>
-          <n-button type="info" @click="updateSetting">确认</n-button>
+        <n-form-item class="setting-form__action">
+          <n-button type="primary" @click="updateSetting">保存</n-button>
        </n-form-item>
      </n-form>
    </n-modal>
@@ -186,20 +193,21 @@
      title="添加"
      v-model:show="showAddModal"
      preset="card"
-      style="width: 30%"
+      class="setting-modal"
+      style="width: min(560px, calc(100vw - 48px))"
    >
-      <n-form :model="addFormModel" ref="addFormRef">
+      <n-form class="setting-form setting-form--modal" :model="addFormModel" ref="addFormRef" label-placement="top">
        <n-form-item label="Code">
-          <n-input v-model:value="addFormModel.code"></n-input>
+          <n-input v-model:value="addFormModel.code" />
        </n-form-item>
        <n-form-item label="选项">
-          <n-dynamic-input v-model:value="addFormModel.data" preset="pair" key-placeholder="键" value-placeholder="值"/>
+          <n-dynamic-input v-model:value="addFormModel.data" preset="pair" key-placeholder="键" value-placeholder="值" />
        </n-form-item>
        <n-form-item label="描述">
-          <n-input v-model:value="addFormModel.describe"></n-input>
+          <n-input v-model:value="addFormModel.describe" />
        </n-form-item>
-        <n-form-item>
-          <n-button type="info" @click="addSetting">确认</n-button>
+        <n-form-item class="setting-form__action">
+          <n-button type="primary" @click="addSetting">添加配置</n-button>
        </n-form-item>
      </n-form>
    </n-modal>
@@ -395,12 +403,11 @@ async function getPublicAddr() {
 }

 // 获取全部配置
-function allSetting() {
-  api.allSettings().then(res => {
-    if (res.data.code === 200) {
-      taleData.value.data = res.data.data
-    }
-  })
+async function allSetting() {
+  const res = await api.allSettings()
+  if (res.data.code === 200) {
+    taleData.value.data = res.data.data
+  }
 }

 // tab切换事件
@@ -490,7 +497,7 @@ async function addSetting() {
  }
 }

-$bus.on("refreshSetting",value => {
+const handleRefreshSetting = (value) => {
  if (value) {
    if (tabCode.value === "" || tabCode.value === undefined) {
      getServerConfig()
@@ -505,11 +512,127 @@ $bus.on("refreshSetting",value => {
      }
    }
  }
+}
+
+$bus.on("refreshSetting", handleRefreshSetting)
+
+onBeforeUnmount(() => {
+  $bus.off("refreshSetting", handleRefreshSetting)
 })
 getServerConfig()
 </script>
-<style lang="scss">
-.pid .n-form-item-blank {
-  display: inline;
+<style scoped lang="scss">
+.setting-card {
+  border-radius: 14px;
+  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
 }
-</style>
+
+.setting-tabs {
+  :deep(.n-tabs-nav) {
+    margin-bottom: 18px;
+  }
+}
+
+.setting-form {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0 18px;
+}
+
+.setting-form--modal {
+  grid-template-columns: 1fr;
+}
+
+.setting-form__wide {
+  grid-column: 1 / -1;
+}
+
+.setting-form :deep(.n-form-item) {
+  margin-bottom: 10px;
+}
+
+.setting-form :deep(.n-input),
+.setting-form :deep(.n-input-number),
+.setting-form :deep(.n-base-selection) {
+  width: 100%;
+}
+
+.setting-form :deep(.n-form-item-label) {
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  color: #64748b;
+}
+
+.setting-form :deep(.n-input .n-input__input-el),
+.setting-form :deep(.n-base-selection .n-base-selection-label),
+.setting-form :deep(.n-input-number .n-input__input-el) {
+  min-height: 42px;
+}
+
+.setting-form__action {
+  grid-column: 1 / -1;
+  margin-top: 8px;
+}
+
+.setting-form__action :deep(.n-button) {
+  min-width: 148px;
+  height: 42px;
+  border-radius: 12px;
+}
+
+.setting-form__inline-btn {
+  min-width: 104px;
+  height: 42px;
+  padding: 0 16px;
+  border-radius: 12px;
+}
+
+.setting-other__add {
+  float: right;
+  margin-bottom: 12px;
+}
+
+.setting-form__endpoint :deep(.n-form-item-blank) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 10px;
+}
+
+.setting-form__endpoint :deep(.n-input) {
+  flex: 1;
+}
+
+.setting-form :deep(.n-input-number .n-input-number-button) {
+  width: 34px;
+}
+
+.setting-form :deep(.n-input-number .n-input-number-button-icon) {
+  font-size: 14px;
+}
+
+:deep(.setting-modal) {
+  width: auto;
+}
+
+:deep(.setting-modal .n-card) {
+  width: min(560px, calc(100vw - 48px));
+  border-radius: 20px;
+  overflow: hidden;
+}
+
+:deep(.setting-modal .n-card-header) {
+  padding: 22px 24px 12px;
+}
+
+:deep(.setting-modal .n-card__content) {
+  padding: 12px 24px 24px;
+}
+
+@media (max-width: 960px) {
+  .setting-form {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
--- a/web/src/views/user/index.vue
+++ b/web/src/views/user/index.vue
@@ -13,8 +13,10 @@
         {{ $route.meta.title }}
      </template>
      <template #header-extra>
-        <n-button v-if="useUserStore().isAdmin === 1" size="small" type="info" @click="addUser()">添加</n-button>
-        <n-button style="margin-left: 5px" size="small" type="primary" @click="getUserList()">刷新</n-button>
+        <div class="user-header__actions">
+          <n-button v-if="useUserStore().isAdmin === 1" size="small" type="info" @click="addUser()">添加</n-button>
+          <n-button size="small" type="primary" @click="getUserList()">刷新</n-button>
+        </div>
      </template>
      <n-data-table
        remote
@@ -33,33 +35,32 @@
    :title="infoFormModel.nickname || '个人资料'"
    :bordered="false"
    size="large"
-    style="width: 400px"
+    class="user-form-modal"
+    style="width: min(520px, calc(100vw - 48px))"
    header-style="text-align: center"
  >
    <n-form
            ref="infoFormRef"
+            class="user-form"
            :rules="infoFormRules"
            :model="infoFormModel"
-            label-placement="left"
-            label-width="auto"
-            label-align="right"
-            require-mark-placement="left"
+            label-placement="top"
    >
      <n-form-item label="账号" path="account">
-        <n-input v-if="infoFormModel.id !== ''" disabled v-model:value="infoFormModel.account"></n-input>
-        <n-input v-else v-model:value="infoFormModel.account"></n-input>
+        <n-input v-if="infoFormModel.id !== ''" disabled v-model:value="infoFormModel.account" />
+        <n-input v-else v-model:value="infoFormModel.account" />
      </n-form-item>
      <n-form-item v-if="infoFormModel.id === ''" label="密码" path="password">
-        <n-input type="password" v-model:value="infoFormModel.password"></n-input>
+        <n-input type="password" v-model:value="infoFormModel.password" />
      </n-form-item>
      <n-form-item label="昵称" path="nickname">
-        <n-input v-model:value="infoFormModel.nickname"></n-input>
+        <n-input v-model:value="infoFormModel.nickname" />
      </n-form-item>
      <n-form-item label="联系方式" path="contact">
-        <n-input v-model:value="infoFormModel.contact"></n-input>
+        <n-input v-model:value="infoFormModel.contact" />
      </n-form-item>
-      <n-form-item label="管理员">
-        <n-space>
+      <n-form-item class="user-form__full" label="管理员">
+        <n-space class="user-form__radio">
          <n-radio
            :checked="infoFormModel.isAdmin === 1"
            value="1"
@@ -76,8 +77,8 @@
          </n-radio>
        </n-space>
      </n-form-item>
-      <n-form-item label="状态">
-        <n-space>
+      <n-form-item class="user-form__full" label="状态">
+        <n-space class="user-form__radio">
          <n-radio
            :checked="infoFormModel.status === 1"
            value="1"
@@ -94,7 +95,9 @@
          </n-radio>
        </n-space>
      </n-form-item>
-      <n-button style="margin-left: 20%" type="primary" @click="SaveUser(infoFormModel)">确认</n-button>
+      <n-form-item class="user-form__full user-form__action">
+        <n-button type="primary" @click="SaveUser(infoFormModel)">保存用户</n-button>
+      </n-form-item>
    </n-form>
  </n-modal>
 </template>
@@ -403,12 +406,93 @@ function addUser() {
  showInfoModel.value = true
 }

-$bus.on('refreshUserInfo',value => {
+const handleRefreshUserInfo = (value) => {
  if (value) {
-    getUserList();
+    getUserList()
  }
+}
+
+$bus.on('refreshUserInfo', handleRefreshUserInfo)
+
+onBeforeUnmount(() => {
+  $bus.off('refreshUserInfo', handleRefreshUserInfo)
 })

 getUserList()
 </script>
-<style></style>
+<style scoped lang="scss">
+.user-form {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0 18px;
+}
+
+.user-form__full {
+  grid-column: 1 / -1;
+}
+
+.user-header__actions {
+  display: flex;
+  gap: 8px;
+}
+
+.user-form__radio {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 18px;
+  width: 100%;
+  padding: 10px 14px;
+  border: 1px solid rgba(148, 163, 184, 0.22);
+  border-radius: 12px;
+  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
+}
+
+.user-form__action {
+  margin-top: 8px;
+}
+
+.user-form__action :deep(.n-button) {
+  min-width: 148px;
+  height: 42px;
+  border-radius: 12px;
+}
+
+.user-form :deep(.n-form-item-label) {
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  color: #64748b;
+}
+
+.user-form :deep(.n-input) {
+  width: 100%;
+}
+
+.user-form :deep(.n-input .n-input__input-el) {
+  min-height: 42px;
+}
+
+:deep(.user-form-modal) {
+  width: auto;
+}
+
+:deep(.user-form-modal .n-card) {
+  width: min(520px, calc(100vw - 48px));
+  border-radius: 20px;
+  overflow: hidden;
+}
+
+:deep(.user-form-modal .n-card-header) {
+  padding: 22px 24px 12px;
+}
+
+:deep(.user-form-modal .n-card__content) {
+  padding: 12px 24px 24px;
+}
+
+@media (max-width: 640px) {
+  .user-form {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
--- a/web/src/views/workbench/index.vue
+++ b/web/src/views/workbench/index.vue
@@ -1,46 +1,71 @@
 <template>
  <AppPage :show-footer="true">
-    <div class="flex">
-      <n-card class="w-30%">
-        <div class="flex items-center">
-          <n-avatar round :size="60" :src="userStore.avatar" />
-          <div class="ml-20 flex-col">
-            <span class="text-20 opacity-80">Hello, {{ userStore.nickname }}</span>
-            <span class="mt-4 opacity-50">今日事，今日毕。</span>
-          </div>
+    <section class="workbench-overview">
+      <div class="workbench-overview__title">
+        <h1>概览</h1>
+        <p>查看客户端连接和最近操作。</p>
+      </div>
+      <div class="workbench-overview__stats">
+        <span>在线客户端 {{ onlineCount }}</span>
+        <span>客户端总数 {{ connectionCount }}</span>
+        <span>日志 {{ paginate.itemCount }}</span>
+      </div>
+      <div class="workbench-overview__user">
+        <n-avatar round :size="40" :src="userStore.avatar" />
+        <div>
+          <strong>{{ userStore.nickname }}</strong>
+          <p>{{ dailyPoetry.content || '莫向外求，但从心觅，行有不得，反求诸己。' }}</p>
        </div>
+      </div>
+    </section>

-        <p class="mt-40 text-14 opacity-60">{{ dailyPoetry.content || '莫向外求，但从心觅，行有不得，反求诸己。' }}</p>
-        <p class="mt-32 text-right text-12 opacity-40">—— {{ dailyPoetry.author || '佚名' }}</p>
-      </n-card>
-      <n-card class="ml-12 w-70%">
+    <section class="workbench-grid">
+      <n-card class="panel-card" :bordered="false">
+        <template #header>
+          <div class="panel-card__header">
+            <h3>最近操作日志</h3>
+          </div>
+        </template>
        <n-data-table
+          class="dashboard-table"
          remote
          :columns="tableColumns"
          :data="tableData.data"
          :pagination="paginate"
        />
      </n-card>
-    </div>
-    <n-card>
-      <n-data-table
-        remote
-        :columns="connectionsColumns"
-        :data="connectionsData.data"
-        :row-props="rowProps"
-      />
-      <n-dropdown
-        placement="bottom-start"
-        trigger="manual"
-        size="small"
-        :x="xRef"
-        :y="yRef"
-        :options="rightMenuOpts"
-        @select="rowSelect"
-        @clickoutside="rowClick"
-        :show="showDropdownRef"
-      />
-    </n-card>
+
+      <n-card class="panel-card" :bordered="false">
+        <template #header>
+          <div class="panel-card__header">
+            <h3>客户端连接状态</h3>
+          </div>
+        </template>
+        <div
+          class="connections-panel"
+          @click="closeDropdown"
+          @contextmenu.prevent="openDropdown"
+        >
+          <n-data-table
+            class="dashboard-table"
+            remote
+            :columns="connectionsColumns"
+            :data="connectionsData.data"
+          />
+          <n-dropdown
+            placement="bottom-start"
+            trigger="manual"
+            size="small"
+            :x="xRef"
+            :y="yRef"
+            :options="rightMenuOpts"
+            @select="rowSelect"
+            @clickoutside="closeDropdown"
+            :show="showDropdownRef"
+          />
+        </div>
+      </n-card>
+    </section>
  </AppPage>
 </template>

@@ -49,8 +74,27 @@ import { useUserStore } from '@/store'
 import api from '@/views/workbench/api'
 import { debounce, renderIcon } from '@/utils'
 import { NTag } from 'naive-ui'
+
 const userStore = useUserStore()

+const tableData = ref({
+  data: []
+})
+
+const connectionsData = ref({
+  data: []
+})
+
+const dailyPoetry = ref({
+  author: '',
+  content: ''
+})
+
+const onlineCount = computed(
+  () => connectionsData.value.data.filter((item) => item.online === true).length
+)
+const connectionCount = computed(() => connectionsData.value.data.length)
+
 // 表格表头
 const tableColumns = [
  {
@@ -96,6 +140,7 @@ const tableColumns = [
    titleAlign: 'center'
  },
 ]
+
 // 链接信息列表
 const connectionsColumns = [
  {
@@ -130,15 +175,15 @@ const connectionsColumns = [
    render: (row) => {
      switch (row.online) {
        case true:
-          return h(NTag,{
+          return h(NTag, {
            type: 'info',
-          },{
+          }, {
            default: () => '在线'
          })
        case false:
-          return h(NTag,{
+          return h(NTag, {
            type: 'warning',
-          },{
+          }, {
            default: () => '离线'
          })
      }
@@ -164,77 +209,56 @@ const connectionsColumns = [
  }
 ]

-// 链接列表邮件刷新菜单
 const rightMenuOpts = [
  {
-    label: () => h('span',{ style: { color: 'green' }}, '刷新'),
-    key: "refresh",
-    icon: renderIcon('tabler:refresh',{ size: 14 })
+    label: () => h('span', { style: { color: 'green' } }, '刷新'),
+    key: 'refresh',
+    icon: renderIcon('tabler:refresh', { size: 14 })
  }
 ]

-// 右键菜单的设置
-const showDropdownRef = ref(false);
-const xRef = ref(0);
-const yRef = ref(0);
+const showDropdownRef = ref(false)
+const xRef = ref(0)
+const yRef = ref(0)

-// 右键菜单的基本位置逻辑
-function rowProps(row) {
-  return {
-    onContextmenu: (e) => {
-      // $message.info(JSON.stringify(row, null, 2));
-      e.preventDefault();
-      showDropdownRef.value = false;
-      nextTick().then(() => {
-        showDropdownRef.value = true;
-        xRef.value = e.clientX;
-        yRef.value = e.clientY;
-      });
-    }
-  };
+function openDropdown(e) {
+  showDropdownRef.value = false
+  nextTick().then(() => {
+    showDropdownRef.value = true
+    xRef.value = e.clientX
+    yRef.value = e.clientY
+  })
 }

-// 右键菜单的逻辑
-function rowSelect(row) {
-  switch (row) {
-    case "refresh":
-      getClientConnections()
-      showDropdownRef.value = false
-  }
-}
-
-function rowClick() {
+function closeDropdown() {
  showDropdownRef.value = false
 }

-// 表格数据
-const tableData = ref({
-  data: []
-})
+function onWindowKeydown(e) {
+  if (e.key === 'Escape') {
+    closeDropdown()
+  }
+}

-// 链接数据
-const connectionsData = ref({
-  data: []
-})
+function rowSelect(row) {
+  switch (row) {
+    case 'refresh':
+      getClientConnections()
+      closeDropdown()
+  }
+}

-const dailyPoetry = ref({
-  author: '',
-  content: ''
-})
-
-// 页码控件
 const paginate = reactive({
  page: 1,
  pageSize: 2,
  itemCount: 0,
  pageCount: 0,
  onChange: (page) => {
-    paginate.page = page;
+    paginate.page = page
    getLogsList()
  }
 })

-// 获取操作日志列表
 async function getLogsList() {
  try {
    const res = await api.logsList({
@@ -242,56 +266,153 @@ async function getLogsList() {
      size: paginate.pageSize,
    })
    if (res.data.code === 200) {
-      tableData.value.data = res.data.data.records;
-      paginate.itemCount = res.data.data.total;
-      paginate.pageCount = res.data.data.totalPage;
+      tableData.value.data = res.data.data.records
+      paginate.itemCount = res.data.data.total
+      paginate.pageCount = res.data.data.totalPage
    }
-  }catch (error) {
+  } catch (error) {
    return error
  }
 }

-// 每日诗词
 const dailyPoe = debounce(() => {
  getDailyPoetry()
-},800)
+}, 800)

-// 获取每日诗词
-function getDailyPoetry() {
+async function getDailyPoetry() {
  try {
-    api.dailyPoetry().then(res => {
-      if (res.data.code === 200) {
-        dailyPoetry.value.author = res.data.data.author;
-        dailyPoetry.value.content = res.data.data.content;
-      }
-    })
-  }catch (error) {
+    const res = await api.dailyPoetry()
+    if (res.data.code === 200) {
+      dailyPoetry.value.author = res.data.data.author
+      dailyPoetry.value.content = res.data.data.content
+    }
+  } catch (error) {
    return error
  }
 }

-const connectionList = debounce(() => {
-  getClientConnections()
-},300)
-
-// 获取客户端链接列表
 async function getClientConnections() {
  try {
    const res = await api.clientConnections()
    if (res.data.code === 200) {
-      connectionsData.value.data = res.data.data;
+      connectionsData.value.data = res.data.data
    }
-  }catch (e) {
+  } catch (e) {
    return e
  }
 }

 const initFunc = debounce(() => {
  getClientConnections()
-  // dailyPoe()
-  // connectionList()
-},500)
+  dailyPoe()
+}, 500)
+
+onMounted(() => {
+  window.addEventListener('keydown', onWindowKeydown)
+  window.addEventListener('blur', closeDropdown)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', onWindowKeydown)
+  window.removeEventListener('blur', closeDropdown)
+})

 getLogsList()
 initFunc()
 </script>
+
+<style scoped lang="scss">
+.workbench-overview {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 4px 2px;
+}
+
+.workbench-overview__title h1,
+.panel-card__header h3 {
+  margin: 0;
+  font-size: 18px;
+  line-height: 1.4;
+  color: #0f172a;
+}
+
+.workbench-overview__title p {
+  margin: 4px 0 0;
+  font-size: 13px;
+  color: #64748b;
+}
+
+.workbench-overview__stats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.workbench-overview__stats span {
+  padding: 6px 10px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 999px;
+  font-size: 13px;
+  color: #475569;
+  background: rgba(255, 255, 255, 0.9);
+}
+
+.workbench-overview__user {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  max-width: 360px;
+}
+
+.workbench-overview__user strong {
+  display: block;
+  font-size: 14px;
+  color: #0f172a;
+}
+
+.workbench-overview__user p {
+  margin: 4px 0 0;
+  font-size: 13px;
+  line-height: 1.6;
+  color: #64748b;
+}
+
+.workbench-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 16px;
+}
+
+.panel-card {
+  border-radius: 14px;
+  background: #ffffff;
+}
+
+.panel-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #0f172a;
+}
+
+.dashboard-table:deep(.n-data-table-wrapper) {
+  overflow: hidden;
+  border-radius: 10px;
+}
+
+.connections-panel {
+  position: relative;
+}
+
+@media (max-width: 960px) {
+  .workbench-overview {
+    flex-direction: column;
+  }
+
+  .workbench-overview__user {
+    max-width: none;
+  }
+}
+</style>
--- a/web/stats.html
+++ b/web/stats.html
Author	SHA1	Message	Date
comma	8d391d202f	🎨 cicd Some checks failed CI / Frontend Build (push) Has been cancelled Details CI / Publish Docker Image (push) Has been cancelled Details CI / Backend Check (push) Has been cancelled Details	2026-04-02 18:54:03 +08:00
comma	b3dd1549db	🎨 优化页面	2026-03-30 17:08:46 +08:00
coward	2c6c0c0e2a	🎨 编辑	2025-12-13 07:35:49 +00:00
coward	1dc677f3a0	:bug:修复bug All checks were successful continuous-integration/drone/tag Build is passing Details	2025-03-04 09:01:29 +08:00
coward	2f9a4b5f6c	:arrow_up:添加dontenv包，当环境变量不存在时读取env文件 All checks were successful continuous-integration/drone/tag Build is passing Details	2025-03-04 08:48:06 +08:00
coward	d4f9204b24	:art:优化API中间件顺序 All checks were successful continuous-integration/drone/tag Build is passing Details	2025-03-03 16:53:05 +08:00
coward	6a71ca56d0	🐳 All checks were successful continuous-integration/drone/tag Build is passing Details	2025-02-25 09:25:12 +08:00
coward	9c560ff352	:arrow_up:升级依赖以及添加一些环境变量 All checks were successful continuous-integration/drone/tag Build is passing Details	2025-02-25 08:52:52 +08:00
coward	06df5fa048	:arrow_up:升级了logger依赖 All checks were successful continuous-integration/drone/tag Build is passing Details	2025-02-11 16:15:47 +08:00