Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
8d391d202f | ||
|
|
b3dd1549db | ||
| 2c6c0c0e2a |
87
.gitea/workflows/ci.yml
Normal file
87
.gitea/workflows/ci.yml
Normal file
@@ -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"
|
||||
@@ -1,4 +1,4 @@
|
||||
# 打包前端
|
||||
# 打包前端
|
||||
FROM node:18-alpine AS build-front
|
||||
|
||||
WORKDIR /front
|
||||
|
||||
1157
document/openapi.yaml
Normal file
1157
document/openapi.yaml
Normal file
File diff suppressed because it is too large
Load Diff
9
go.mod
9
go.mod
@@ -22,6 +22,7 @@ require (
|
||||
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
|
||||
@@ -43,14 +44,15 @@ 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.9 // indirect
|
||||
github.com/bytedance/sonic/loader v0.2.2 // 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.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.5 // 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
|
||||
@@ -78,7 +80,6 @@ require (
|
||||
github.com/jackc/puddle/v2 v2.2.1 // indirect
|
||||
github.com/jinzhu/inflection v1.0.0 // indirect
|
||||
github.com/jinzhu/now v1.1.5 // indirect
|
||||
github.com/joho/godotenv v1.5.1 // indirect
|
||||
github.com/jonboulle/clockwork v0.4.0 // indirect
|
||||
github.com/josharian/native v1.1.0 // indirect
|
||||
github.com/jpillora/backoff v1.0.0 // indirect
|
||||
|
||||
22
go.sum
22
go.sum
@@ -169,11 +169,12 @@ github.com/buger/jsonparser v1.1.1/go.mod h1:6RYKKt7H4d4+iWqouImQ9R2FZql3VbhNgx2
|
||||
github.com/bugsnag/bugsnag-go v0.0.0-20141110184014-b1d153021fcd/go.mod h1:2oa8nejYd4cQ/b0hMIopN0lCRxU0bueqREvZLWFrtK8=
|
||||
github.com/bugsnag/osext v0.0.0-20130617224835-0dd3f918b21b/go.mod h1:obH5gd0BsqsP2LwDJ9aOkm/6J86V6lyAXCoQWGw3K50=
|
||||
github.com/bugsnag/panicwrap v0.0.0-20151223152923-e2c28503fcd0/go.mod h1:D/8v3kj0zr8ZAKg1AQ6crr+5VwKN5eIywRkfhyM/+dE=
|
||||
github.com/bytedance/sonic v1.12.9 h1:Od1BvK55NnewtGaJsTDeAOSnLVO2BTSLOe0+ooKokmQ=
|
||||
github.com/bytedance/sonic v1.12.9/go.mod h1:uVvFidNmlt9+wa31S1urfwwthTWteBgG0hWuoKAXTx8=
|
||||
github.com/bytedance/sonic/loader v0.1.1/go.mod h1:ncP89zfokxS5LZrJxl5z0UJcsk4M4yY2JpfqGeCtNLU=
|
||||
github.com/bytedance/sonic/loader v0.2.2 h1:jxAJuN9fOot/cyz5Q6dUuMJF5OqQ6+5GfA8FjjQ0R4o=
|
||||
github.com/bytedance/sonic/loader v0.2.2/go.mod h1:N8A3vUdtUebEY2/VQC0MyhYeKUFosQU6FxH2JmUe6VI=
|
||||
github.com/bytedance/gopkg v0.1.3 h1:TPBSwH8RsouGCBcMBktLt1AymVo2TVsBVCY4b6TnZ/M=
|
||||
github.com/bytedance/gopkg v0.1.3/go.mod h1:576VvJ+eJgyCzdjS+c4+77QF3p7ubbtiKARP3TxducM=
|
||||
github.com/bytedance/sonic v1.15.0 h1:/PXeWFaR5ElNcVE84U0dOHjiMHQOwNIx3K4ymzh/uSE=
|
||||
github.com/bytedance/sonic v1.15.0/go.mod h1:tFkWrPz0/CUCLEF4ri4UkHekCIcdnkqXw9VduqpJh0k=
|
||||
github.com/bytedance/sonic/loader v0.5.0 h1:gXH3KVnatgY7loH5/TkeVyXPfESoqSBSBEiDd5VjlgE=
|
||||
github.com/bytedance/sonic/loader v0.5.0/go.mod h1:AR4NYCk5DdzZizZ5djGqQ92eEhCCcdf5x77udYiSJRo=
|
||||
github.com/caarlos0/env/v6 v6.10.1 h1:t1mPSxNpei6M5yAeu1qtRdPAK29Nbcf/n3G7x+b3/II=
|
||||
github.com/caarlos0/env/v6 v6.10.1/go.mod h1:hvp/ryKXKipEkcuYjs9mI4bBCg+UI0Yhgm5Zu0ddvwc=
|
||||
github.com/cenkalti/backoff/v4 v4.1.1/go.mod h1:scbssz8iZGpm3xbr14ovlUdkxfGXNInqkPWOWmG2CLw=
|
||||
@@ -213,9 +214,8 @@ github.com/cilium/ebpf v0.7.0/go.mod h1:/oI2+1shJiTGAMgl6/RgJr36Eo1jzrRcAWbcXO2u
|
||||
github.com/circonus-labs/circonus-gometrics v2.3.1+incompatible/go.mod h1:nmEj6Dob7S7YxXgwXpfOuvO54S+tGdZdw9fuRZt25Ag=
|
||||
github.com/circonus-labs/circonusllhist v0.1.3/go.mod h1:kMXHVDlOchFAehlya5ePtbp5jckzBHf4XRpQvBOLI+I=
|
||||
github.com/client9/misspell v0.3.4/go.mod h1:qj6jICC3Q7zFZvVWo7KLAzC3yx5G7kyvSDkc90ppPyw=
|
||||
github.com/cloudwego/base64x v0.1.5 h1:XPciSp1xaq2VCSt6lF0phncD4koWyULpl5bUxbfCyP4=
|
||||
github.com/cloudwego/base64x v0.1.5/go.mod h1:0zlkT4Wn5C6NdauXdJRhSKRlJvmclQ1hhJgA0rcu/8w=
|
||||
github.com/cloudwego/iasm v0.2.0/go.mod h1:8rXZaNYT2n95jn+zTI1sDr+IgcD2GVs0nlbbQPiEFhY=
|
||||
github.com/cloudwego/base64x v0.1.6 h1:t11wG9AECkCDk5fMSoxmufanudBtJ+/HemLstXDLI2M=
|
||||
github.com/cloudwego/base64x v0.1.6/go.mod h1:OFcloc187FXDaYHvrNIjxSe8ncn0OOM8gEHfghB2IPU=
|
||||
github.com/cncf/udpa/go v0.0.0-20191209042840-269d4d468f6f/go.mod h1:M8M6+tZqaGXZJjfX53e64911xZQV5JYwmTeXPW+k8Sc=
|
||||
github.com/cncf/udpa/go v0.0.0-20200629203442-efcf912fb354/go.mod h1:WmhPx2Nbnhtbo57+VJT5O0JRkEi1Wbu0z5j0R8u5Hbk=
|
||||
github.com/cncf/udpa/go v0.0.0-20201120205902-5459f2c99403/go.mod h1:WmhPx2Nbnhtbo57+VJT5O0JRkEi1Wbu0z5j0R8u5Hbk=
|
||||
@@ -812,10 +812,8 @@ github.com/klauspost/compress v1.11.13/go.mod h1:aoV0uJVorq1K+umq18yTdKaF57EivdY
|
||||
github.com/klauspost/compress v1.13.6/go.mod h1:/3/Vjq9QcHkK5uEr5lBEmyoZ1iFhe47etQ6QUkpK6sk=
|
||||
github.com/klauspost/compress v1.17.9 h1:6KIumPrER1LHsvBVuDa0r5xaG0Es51mhhB9BQB2qeMA=
|
||||
github.com/klauspost/compress v1.17.9/go.mod h1:Di0epgTjJY877eYKx5yC51cX2A2Vl2ibi7bDH9ttBbw=
|
||||
github.com/klauspost/cpuid/v2 v2.0.9/go.mod h1:FInQzS24/EEf25PyTYn52gqo7WaD8xa0213Md/qVLRg=
|
||||
github.com/klauspost/cpuid/v2 v2.2.9 h1:66ze0taIn2H33fBvCkXuv9BmCwDfafmiIVpKV9kKGuY=
|
||||
github.com/klauspost/cpuid/v2 v2.2.9/go.mod h1:rqkxqrZ1EhYM9G+hXH7YdowN5R5RGN6NK4QwQ3WMXF8=
|
||||
github.com/knz/go-libedit v1.10.1/go.mod h1:MZTVkCWyz0oBc7JOWP3wNAzd002ZbM/5hgShxwh4x8M=
|
||||
github.com/kolo/xmlrpc v0.0.0-20201022064351-38db28db192b/go.mod h1:pcaDhQK0/NJZEvtCO0qQPPropqV0sJOJ6YW7X+9kRwM=
|
||||
github.com/konsorten/go-windows-terminal-sequences v1.0.1/go.mod h1:T0+1ngSBFLxvqU3pZ+m/2kptfBszLMUkC4ZK/EgS/cQ=
|
||||
github.com/konsorten/go-windows-terminal-sequences v1.0.2/go.mod h1:T0+1ngSBFLxvqU3pZ+m/2kptfBszLMUkC4ZK/EgS/cQ=
|
||||
@@ -1178,6 +1176,7 @@ github.com/stretchr/objx v0.1.1/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+
|
||||
github.com/stretchr/objx v0.2.0/go.mod h1:qt09Ya8vawLte6SNmTgCsAVtYtaKzEcn8ATUoHMkEqE=
|
||||
github.com/stretchr/objx v0.4.0/go.mod h1:YvHI0jy2hoMjB+UWwv71VJQ9isScKT/TqJzVSSt89Yw=
|
||||
github.com/stretchr/objx v0.5.0/go.mod h1:Yh+to48EsGEfYuaHDzXPcE3xhTkx73EhmCGUpEOglKo=
|
||||
github.com/stretchr/objx v0.5.2/go.mod h1:FRsXN1f5AsAjCGJKqEizvkpNtU+EGNCLh3NxZ/8L+MA=
|
||||
github.com/stretchr/testify v0.0.0-20180303142811-b89eecf5ca5d/go.mod h1:a8OnRcib4nhh0OaRAV+Yts87kKdq0PP7pXfy6kDkUVs=
|
||||
github.com/stretchr/testify v1.2.2/go.mod h1:a8OnRcib4nhh0OaRAV+Yts87kKdq0PP7pXfy6kDkUVs=
|
||||
github.com/stretchr/testify v1.3.0/go.mod h1:M5WIy9Dh21IEIfnGCwXGc5bZfKNJtfHm1UVUgZn+9EI=
|
||||
@@ -1187,8 +1186,8 @@ github.com/stretchr/testify v1.6.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/
|
||||
github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
|
||||
github.com/stretchr/testify v1.7.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
|
||||
github.com/stretchr/testify v1.8.0/go.mod h1:yNjHg4UonilssWZ8iaSj1OCr/vHnekPRkoO+kdMU+MU=
|
||||
github.com/stretchr/testify v1.8.1/go.mod h1:w2LPCIKwWwSfY2zedu0+kehJoqGctiVI29o6fzry7u4=
|
||||
github.com/stretchr/testify v1.8.2/go.mod h1:w2LPCIKwWwSfY2zedu0+kehJoqGctiVI29o6fzry7u4=
|
||||
github.com/stretchr/testify v1.8.4/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
|
||||
github.com/stretchr/testify v1.10.0 h1:Xv5erBjTwe/5IxqUQTdXv5kgmIvbHo3QQyRwhJsOfJA=
|
||||
github.com/stretchr/testify v1.10.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
|
||||
github.com/subosito/gotenv v1.2.0/go.mod h1:N0PQaV/YGNqwC0u51sEeR/aUtSLEXKX9iv69rRypqCw=
|
||||
@@ -2050,7 +2049,6 @@ modernc.org/memory v1.5.0 h1:N+/8c5rE6EqugZwHii4IFsaJ7MUhoWX07J5tC/iI5Ds=
|
||||
modernc.org/memory v1.5.0/go.mod h1:PkUhL0Mugw21sHPeskwZW4D6VscE/GQJOnIpCnW6pSU=
|
||||
modernc.org/sqlite v1.23.1 h1:nrSBg4aRQQwq59JpvGEQ15tNxoO5pX/kUjcRNwSAGQM=
|
||||
modernc.org/sqlite v1.23.1/go.mod h1:OrDj17Mggn6MhE+iPbBNf7RGKODDE9NFT0f3EwDzJqk=
|
||||
nullprogram.com/x/optparse v1.0.0/go.mod h1:KdyPE+Igbe0jQUrVfMqDMeJQIJZEuyV7pjYmp6pbG50=
|
||||
rsc.io/binaryregexp v0.2.0/go.mod h1:qTv7/COck+e2FymRvadv62gMdZztPaShugOCi3I+8D8=
|
||||
rsc.io/quote/v3 v3.1.0/go.mod h1:yEA65RcK8LyAZtP9Kv3t0HmxON59tX3rD+tICJqUlj0=
|
||||
rsc.io/sampler v1.3.0/go.mod h1:T1hPZKmBbMNahiBKFy5HrXp6adAjACjK9JXDnKaTXpA=
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
@@ -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)
|
||||
|
||||
72
web/.aiassistant/rules/front_code_rule.md
Normal file
72
web/.aiassistant/rules/front_code_rule.md
Normal file
@@ -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` 和测试注释。
|
||||
* **一票否决**：违反任一强制规则（如白屏隐患、内存泄漏、样式全局污染），评审直接驳回。
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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()
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 }
|
||||
)
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user