refactor: refactor the frame layout of admin module

This commit is contained in:
RockYang 2023-06-21 14:22:28 +08:00
parent 0e6606e469
commit 3674d9da85
35 changed files with 1758 additions and 334 deletions

View File

@ -136,7 +136,7 @@ func authorizeMiddleware(s *AppServer) gin.HandlerFunc {
if c.Request.URL.Path == "/api/user/login" ||
c.Request.URL.Path == "/api/admin/login" ||
c.Request.URL.Path == "/api/user/register" ||
c.Request.URL.Path == "/api/config/get" {
c.Request.URL.Path == "/api/admin/config/get" {
c.Next()
return
}

View File

@ -30,23 +30,24 @@ func (h *ChatRoleHandler) List(c *gin.Context) {
resp.ERROR(c, "No roles found,"+res.Error.Error())
return
}
userId := h.GetInt(c, "user_id", 0)
if userId > 0 {
var user model.User
h.db.First(&user, userId)
var roleKeys []string
err := utils.JsonDecode(user.ChatRoles, &roleKeys)
if err == nil {
for index, r := range roles {
if utils.ContainsStr(roleKeys, r.Key) {
roles = append(roles[:index], roles[index+1:]...)
}
}
}
user, err := utils.GetLoginUser(c, h.db)
if err != nil {
resp.NotAuth(c)
return
}
var roleKeys []string
err = utils.JsonDecode(user.ChatRoles, &roleKeys)
if err != nil {
resp.ERROR(c, "角色解析失败!")
return
}
// 转成 vo
var roleVos = make([]vo.ChatRole, 0)
for _, r := range roles {
if !utils.ContainsStr(roleKeys, r.Key) {
continue
}
var v vo.ChatRole
err := utils.CopyObject(r, &v)
if err == nil {

450
web/package-lock.json generated
View File

@ -17,6 +17,8 @@
"highlight.js": "^11.7.0",
"json-bigint": "^1.0.0",
"markdown-it": "^13.0.1",
"md-editor-v3": "^2.2.1",
"pinia": "^2.1.4",
"qs": "^6.11.1",
"sortablejs": "^1.15.0",
"vue": "^3.2.13",
@ -1863,8 +1865,7 @@
"node_modules/@jridgewell/sourcemap-codec": {
"version": "1.4.14",
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
"integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
"dev": true
"integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
},
"node_modules/@jridgewell/trace-mapping": {
"version": "0.3.18",
@ -2771,65 +2772,49 @@
}
},
"node_modules/@vue/compiler-core": {
"version": "3.2.33",
"resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.2.33.tgz",
"integrity": "sha512-AAmr52ji3Zhk7IKIuigX2osWWsb2nQE5xsdFYjdnmtQ4gymmqXbjLvkSE174+fF3A3kstYrTgGkqgOEbsdLDpw==",
"version": "3.3.4",
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.4.tgz",
"integrity": "sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==",
"dependencies": {
"@babel/parser": "^7.16.4",
"@vue/shared": "3.2.33",
"@babel/parser": "^7.21.3",
"@vue/shared": "3.3.4",
"estree-walker": "^2.0.2",
"source-map": "^0.6.1"
}
},
"node_modules/@vue/compiler-core/node_modules/source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"engines": {
"node": ">=0.10.0"
"source-map-js": "^1.0.2"
}
},
"node_modules/@vue/compiler-dom": {
"version": "3.2.33",
"resolved": "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.2.33.tgz",
"integrity": "sha512-GhiG1C8X98Xz9QUX/RlA6/kgPBWJkjq0Rq6//5XTAGSYrTMBgcLpP9+CnlUg1TFxnnCVughAG+KZl28XJqw8uQ==",
"version": "3.3.4",
"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz",
"integrity": "sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==",
"dependencies": {
"@vue/compiler-core": "3.2.33",
"@vue/shared": "3.2.33"
"@vue/compiler-core": "3.3.4",
"@vue/shared": "3.3.4"
}
},
"node_modules/@vue/compiler-sfc": {
"version": "3.2.33",
"resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.2.33.tgz",
"integrity": "sha512-H8D0WqagCr295pQjUYyO8P3IejM3vEzeCO1apzByAEaAR/WimhMYczHfZVvlCE/9yBaEu/eu9RdiWr0kF8b71Q==",
"version": "3.3.4",
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz",
"integrity": "sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==",
"dependencies": {
"@babel/parser": "^7.16.4",
"@vue/compiler-core": "3.2.33",
"@vue/compiler-dom": "3.2.33",
"@vue/compiler-ssr": "3.2.33",
"@vue/reactivity-transform": "3.2.33",
"@vue/shared": "3.2.33",
"@babel/parser": "^7.20.15",
"@vue/compiler-core": "3.3.4",
"@vue/compiler-dom": "3.3.4",
"@vue/compiler-ssr": "3.3.4",
"@vue/reactivity-transform": "3.3.4",
"@vue/shared": "3.3.4",
"estree-walker": "^2.0.2",
"magic-string": "^0.25.7",
"magic-string": "^0.30.0",
"postcss": "^8.1.10",
"source-map": "^0.6.1"
}
},
"node_modules/@vue/compiler-sfc/node_modules/source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"engines": {
"node": ">=0.10.0"
"source-map-js": "^1.0.2"
}
},
"node_modules/@vue/compiler-ssr": {
"version": "3.2.33",
"resolved": "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.2.33.tgz",
"integrity": "sha512-XQh1Xdk3VquDpXsnoCd7JnMoWec9CfAzQDQsaMcSU79OrrO2PNR0ErlIjm/mGq3GmBfkQjzZACV+7GhfRB8xMQ==",
"version": "3.3.4",
"resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.4.tgz",
"integrity": "sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==",
"dependencies": {
"@vue/compiler-dom": "3.2.33",
"@vue/shared": "3.2.33"
"@vue/compiler-dom": "3.3.4",
"@vue/shared": "3.3.4"
}
},
"node_modules/@vue/component-compiler-utils": {
@ -2902,65 +2887,65 @@
"dev": true
},
"node_modules/@vue/devtools-api": {
"version": "6.1.4",
"resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.1.4.tgz",
"integrity": "sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ=="
"version": "6.5.0",
"resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.5.0.tgz",
"integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
},
"node_modules/@vue/reactivity": {
"version": "3.2.33",
"resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.2.33.tgz",
"integrity": "sha512-62Sq0mp9/0bLmDuxuLD5CIaMG2susFAGARLuZ/5jkU1FCf9EDbwUuF+BO8Ub3Rbodx0ziIecM/NsmyjardBxfQ==",
"version": "3.3.4",
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.4.tgz",
"integrity": "sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==",
"dependencies": {
"@vue/shared": "3.2.33"
"@vue/shared": "3.3.4"
}
},
"node_modules/@vue/reactivity-transform": {
"version": "3.2.33",
"resolved": "https://registry.npmmirror.com/@vue/reactivity-transform/-/reactivity-transform-3.2.33.tgz",
"integrity": "sha512-4UL5KOIvSQb254aqenW4q34qMXbfZcmEsV/yVidLUgvwYQQ/D21bGX3DlgPUGI3c4C+iOnNmDCkIxkILoX/Pyw==",
"version": "3.3.4",
"resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.4.tgz",
"integrity": "sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==",
"dependencies": {
"@babel/parser": "^7.16.4",
"@vue/compiler-core": "3.2.33",
"@vue/shared": "3.2.33",
"@babel/parser": "^7.20.15",
"@vue/compiler-core": "3.3.4",
"@vue/shared": "3.3.4",
"estree-walker": "^2.0.2",
"magic-string": "^0.25.7"
"magic-string": "^0.30.0"
}
},
"node_modules/@vue/runtime-core": {
"version": "3.2.33",
"resolved": "https://registry.npmmirror.com/@vue/runtime-core/-/runtime-core-3.2.33.tgz",
"integrity": "sha512-N2D2vfaXsBPhzCV3JsXQa2NECjxP3eXgZlFqKh4tgakp3iX6LCGv76DLlc+IfFZq+TW10Y8QUfeihXOupJ1dGw==",
"version": "3.3.4",
"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.4.tgz",
"integrity": "sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==",
"dependencies": {
"@vue/reactivity": "3.2.33",
"@vue/shared": "3.2.33"
"@vue/reactivity": "3.3.4",
"@vue/shared": "3.3.4"
}
},
"node_modules/@vue/runtime-dom": {
"version": "3.2.33",
"resolved": "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.2.33.tgz",
"integrity": "sha512-LSrJ6W7CZTSUygX5s8aFkraDWlO6K4geOwA3quFF2O+hC3QuAMZt/0Xb7JKE3C4JD4pFwCSO7oCrZmZ0BIJUnw==",
"version": "3.3.4",
"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.4.tgz",
"integrity": "sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==",
"dependencies": {
"@vue/runtime-core": "3.2.33",
"@vue/shared": "3.2.33",
"csstype": "^2.6.8"
"@vue/runtime-core": "3.3.4",
"@vue/shared": "3.3.4",
"csstype": "^3.1.1"
}
},
"node_modules/@vue/server-renderer": {
"version": "3.2.33",
"resolved": "https://registry.npmmirror.com/@vue/server-renderer/-/server-renderer-3.2.33.tgz",
"integrity": "sha512-4jpJHRD4ORv8PlbYi+/MfP8ec1okz6rybe36MdpkDrGIdEItHEUyaHSKvz+ptNEyQpALmmVfRteHkU9F8vxOew==",
"version": "3.3.4",
"resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.4.tgz",
"integrity": "sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==",
"dependencies": {
"@vue/compiler-ssr": "3.2.33",
"@vue/shared": "3.2.33"
"@vue/compiler-ssr": "3.3.4",
"@vue/shared": "3.3.4"
},
"peerDependencies": {
"vue": "3.2.33"
"vue": "3.3.4"
}
},
"node_modules/@vue/shared": {
"version": "3.2.33",
"resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.2.33.tgz",
"integrity": "sha512-UBc1Pg1T3yZ97vsA2ueER0F6GbJebLHYlEi4ou1H5YL4KWvMOOWwpYo9/QpWq93wxKG6Wo13IY74Hcn/f7c7Bg=="
"version": "3.3.4",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.4.tgz",
"integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ=="
},
"node_modules/@vue/web-component-wrapper": {
"version": "1.3.0",
@ -4708,9 +4693,9 @@
}
},
"node_modules/csstype": {
"version": "2.6.20",
"resolved": "https://registry.npmmirror.com/csstype/-/csstype-2.6.20.tgz",
"integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
},
"node_modules/dayjs": {
"version": "1.11.2",
@ -5717,7 +5702,7 @@
},
"node_modules/estree-walker": {
"version": "2.0.2",
"resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz",
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
},
"node_modules/esutils": {
@ -7348,11 +7333,14 @@
}
},
"node_modules/magic-string": {
"version": "0.25.9",
"resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.25.9.tgz",
"integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
"version": "0.30.0",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.0.tgz",
"integrity": "sha512-LA+31JYDJLs82r2ScLrlz1GjSgu66ZV518eyWT+S8VhyQn/JL0u9MeBOvQMGYiPk1DBiSN9DDMOcXvigJZaViQ==",
"dependencies": {
"sourcemap-codec": "^1.4.8"
"@jridgewell/sourcemap-codec": "^1.4.13"
},
"engines": {
"node": ">=12"
}
},
"node_modules/make-dir": {
@ -7398,6 +7386,14 @@
"url": "https://github.com/fb55/entities?sponsor=1"
}
},
"node_modules/md-editor-v3": {
"version": "2.11.3",
"resolved": "https://registry.npmjs.org/md-editor-v3/-/md-editor-v3-2.11.3.tgz",
"integrity": "sha512-SCfS4qMy0HldFdplcIGUMCpSv8qkNWkYShSdv2gTHeViKduA34zV89BOrWcqls2EZSlvt2n3G7nHRzYUvJjDKw==",
"peerDependencies": {
"vue": "^3.2.47"
}
},
"node_modules/mdn-data": {
"version": "2.0.14",
"resolved": "https://registry.npmmirror.com/mdn-data/-/mdn-data-2.0.14.tgz",
@ -8253,6 +8249,56 @@
"node": ">=8.6"
}
},
"node_modules/pinia": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/pinia/-/pinia-2.1.4.tgz",
"integrity": "sha512-vYlnDu+Y/FXxv1ABo1vhjC+IbqvzUdiUC3sfDRrRyY2CQSrqqaa+iiHmqtARFxJVqWQMCJfXx1PBvFs9aJVLXQ==",
"dependencies": {
"@vue/devtools-api": "^6.5.0",
"vue-demi": ">=0.14.5"
},
"funding": {
"url": "https://github.com/sponsors/posva"
},
"peerDependencies": {
"@vue/composition-api": "^1.4.0",
"typescript": ">=4.4.4",
"vue": "^2.6.14 || ^3.3.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
},
"typescript": {
"optional": true
}
}
},
"node_modules/pinia/node_modules/vue-demi": {
"version": "0.14.5",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.5.tgz",
"integrity": "sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==",
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/pkg-dir": {
"version": "4.2.0",
"resolved": "https://registry.npmmirror.com/pkg-dir/-/pkg-dir-4.2.0.tgz",
@ -8919,9 +8965,9 @@
}
},
"node_modules/punycode": {
"version": "2.1.1",
"resolved": "https://registry.npmmirror.com/punycode/-/punycode-2.1.1.tgz",
"integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
"integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
"dev": true,
"engines": {
"node": ">=6"
@ -9639,11 +9685,6 @@
"node": ">=0.10.0"
}
},
"node_modules/sourcemap-codec": {
"version": "1.4.8",
"resolved": "https://registry.npmmirror.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
"integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
},
"node_modules/spdx-correct": {
"version": "3.1.1",
"resolved": "https://registry.npmmirror.com/spdx-correct/-/spdx-correct-3.1.1.tgz",
@ -10398,15 +10439,15 @@
}
},
"node_modules/vue": {
"version": "3.2.33",
"resolved": "https://registry.npmmirror.com/vue/-/vue-3.2.33.tgz",
"integrity": "sha512-si1ExAlDUrLSIg/V7D/GgA4twJwfsfgG+t9w10z38HhL/HA07132pUQ2KuwAo8qbCyMJ9e6OqrmWrOCr+jW7ZQ==",
"version": "3.3.4",
"resolved": "https://registry.npmjs.org/vue/-/vue-3.3.4.tgz",
"integrity": "sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==",
"dependencies": {
"@vue/compiler-dom": "3.2.33",
"@vue/compiler-sfc": "3.2.33",
"@vue/runtime-dom": "3.2.33",
"@vue/server-renderer": "3.2.33",
"@vue/shared": "3.2.33"
"@vue/compiler-dom": "3.3.4",
"@vue/compiler-sfc": "3.3.4",
"@vue/runtime-dom": "3.3.4",
"@vue/server-renderer": "3.3.4",
"@vue/shared": "3.3.4"
}
},
"node_modules/vue-eslint-parser": {
@ -12598,8 +12639,7 @@
"@jridgewell/sourcemap-codec": {
"version": "1.4.14",
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
"integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
"dev": true
"integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
},
"@jridgewell/trace-mapping": {
"version": "0.3.18",
@ -13361,63 +13401,49 @@
}
},
"@vue/compiler-core": {
"version": "3.2.33",
"resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.2.33.tgz",
"integrity": "sha512-AAmr52ji3Zhk7IKIuigX2osWWsb2nQE5xsdFYjdnmtQ4gymmqXbjLvkSE174+fF3A3kstYrTgGkqgOEbsdLDpw==",
"version": "3.3.4",
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.4.tgz",
"integrity": "sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==",
"requires": {
"@babel/parser": "^7.16.4",
"@vue/shared": "3.2.33",
"@babel/parser": "^7.21.3",
"@vue/shared": "3.3.4",
"estree-walker": "^2.0.2",
"source-map": "^0.6.1"
},
"dependencies": {
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
}
"source-map-js": "^1.0.2"
}
},
"@vue/compiler-dom": {
"version": "3.2.33",
"resolved": "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.2.33.tgz",
"integrity": "sha512-GhiG1C8X98Xz9QUX/RlA6/kgPBWJkjq0Rq6//5XTAGSYrTMBgcLpP9+CnlUg1TFxnnCVughAG+KZl28XJqw8uQ==",
"version": "3.3.4",
"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz",
"integrity": "sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==",
"requires": {
"@vue/compiler-core": "3.2.33",
"@vue/shared": "3.2.33"
"@vue/compiler-core": "3.3.4",
"@vue/shared": "3.3.4"
}
},
"@vue/compiler-sfc": {
"version": "3.2.33",
"resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.2.33.tgz",
"integrity": "sha512-H8D0WqagCr295pQjUYyO8P3IejM3vEzeCO1apzByAEaAR/WimhMYczHfZVvlCE/9yBaEu/eu9RdiWr0kF8b71Q==",
"version": "3.3.4",
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz",
"integrity": "sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==",
"requires": {
"@babel/parser": "^7.16.4",
"@vue/compiler-core": "3.2.33",
"@vue/compiler-dom": "3.2.33",
"@vue/compiler-ssr": "3.2.33",
"@vue/reactivity-transform": "3.2.33",
"@vue/shared": "3.2.33",
"@babel/parser": "^7.20.15",
"@vue/compiler-core": "3.3.4",
"@vue/compiler-dom": "3.3.4",
"@vue/compiler-ssr": "3.3.4",
"@vue/reactivity-transform": "3.3.4",
"@vue/shared": "3.3.4",
"estree-walker": "^2.0.2",
"magic-string": "^0.25.7",
"magic-string": "^0.30.0",
"postcss": "^8.1.10",
"source-map": "^0.6.1"
},
"dependencies": {
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
}
"source-map-js": "^1.0.2"
}
},
"@vue/compiler-ssr": {
"version": "3.2.33",
"resolved": "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.2.33.tgz",
"integrity": "sha512-XQh1Xdk3VquDpXsnoCd7JnMoWec9CfAzQDQsaMcSU79OrrO2PNR0ErlIjm/mGq3GmBfkQjzZACV+7GhfRB8xMQ==",
"version": "3.3.4",
"resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.4.tgz",
"integrity": "sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==",
"requires": {
"@vue/compiler-dom": "3.2.33",
"@vue/shared": "3.2.33"
"@vue/compiler-dom": "3.3.4",
"@vue/shared": "3.3.4"
}
},
"@vue/component-compiler-utils": {
@ -13484,62 +13510,62 @@
}
},
"@vue/devtools-api": {
"version": "6.1.4",
"resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.1.4.tgz",
"integrity": "sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ=="
"version": "6.5.0",
"resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.5.0.tgz",
"integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
},
"@vue/reactivity": {
"version": "3.2.33",
"resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.2.33.tgz",
"integrity": "sha512-62Sq0mp9/0bLmDuxuLD5CIaMG2susFAGARLuZ/5jkU1FCf9EDbwUuF+BO8Ub3Rbodx0ziIecM/NsmyjardBxfQ==",
"version": "3.3.4",
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.4.tgz",
"integrity": "sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==",
"requires": {
"@vue/shared": "3.2.33"
"@vue/shared": "3.3.4"
}
},
"@vue/reactivity-transform": {
"version": "3.2.33",
"resolved": "https://registry.npmmirror.com/@vue/reactivity-transform/-/reactivity-transform-3.2.33.tgz",
"integrity": "sha512-4UL5KOIvSQb254aqenW4q34qMXbfZcmEsV/yVidLUgvwYQQ/D21bGX3DlgPUGI3c4C+iOnNmDCkIxkILoX/Pyw==",
"version": "3.3.4",
"resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.4.tgz",
"integrity": "sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==",
"requires": {
"@babel/parser": "^7.16.4",
"@vue/compiler-core": "3.2.33",
"@vue/shared": "3.2.33",
"@babel/parser": "^7.20.15",
"@vue/compiler-core": "3.3.4",
"@vue/shared": "3.3.4",
"estree-walker": "^2.0.2",
"magic-string": "^0.25.7"
"magic-string": "^0.30.0"
}
},
"@vue/runtime-core": {
"version": "3.2.33",
"resolved": "https://registry.npmmirror.com/@vue/runtime-core/-/runtime-core-3.2.33.tgz",
"integrity": "sha512-N2D2vfaXsBPhzCV3JsXQa2NECjxP3eXgZlFqKh4tgakp3iX6LCGv76DLlc+IfFZq+TW10Y8QUfeihXOupJ1dGw==",
"version": "3.3.4",
"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.4.tgz",
"integrity": "sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==",
"requires": {
"@vue/reactivity": "3.2.33",
"@vue/shared": "3.2.33"
"@vue/reactivity": "3.3.4",
"@vue/shared": "3.3.4"
}
},
"@vue/runtime-dom": {
"version": "3.2.33",
"resolved": "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.2.33.tgz",
"integrity": "sha512-LSrJ6W7CZTSUygX5s8aFkraDWlO6K4geOwA3quFF2O+hC3QuAMZt/0Xb7JKE3C4JD4pFwCSO7oCrZmZ0BIJUnw==",
"version": "3.3.4",
"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.4.tgz",
"integrity": "sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==",
"requires": {
"@vue/runtime-core": "3.2.33",
"@vue/shared": "3.2.33",
"csstype": "^2.6.8"
"@vue/runtime-core": "3.3.4",
"@vue/shared": "3.3.4",
"csstype": "^3.1.1"
}
},
"@vue/server-renderer": {
"version": "3.2.33",
"resolved": "https://registry.npmmirror.com/@vue/server-renderer/-/server-renderer-3.2.33.tgz",
"integrity": "sha512-4jpJHRD4ORv8PlbYi+/MfP8ec1okz6rybe36MdpkDrGIdEItHEUyaHSKvz+ptNEyQpALmmVfRteHkU9F8vxOew==",
"version": "3.3.4",
"resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.4.tgz",
"integrity": "sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==",
"requires": {
"@vue/compiler-ssr": "3.2.33",
"@vue/shared": "3.2.33"
"@vue/compiler-ssr": "3.3.4",
"@vue/shared": "3.3.4"
}
},
"@vue/shared": {
"version": "3.2.33",
"resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.2.33.tgz",
"integrity": "sha512-UBc1Pg1T3yZ97vsA2ueER0F6GbJebLHYlEi4ou1H5YL4KWvMOOWwpYo9/QpWq93wxKG6Wo13IY74Hcn/f7c7Bg=="
"version": "3.3.4",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.4.tgz",
"integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ=="
},
"@vue/web-component-wrapper": {
"version": "1.3.0",
@ -14924,9 +14950,9 @@
}
},
"csstype": {
"version": "2.6.20",
"resolved": "https://registry.npmmirror.com/csstype/-/csstype-2.6.20.tgz",
"integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
},
"dayjs": {
"version": "1.11.2",
@ -15716,7 +15742,7 @@
},
"estree-walker": {
"version": "2.0.2",
"resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz",
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
},
"esutils": {
@ -17032,11 +17058,11 @@
}
},
"magic-string": {
"version": "0.25.9",
"resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.25.9.tgz",
"integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
"version": "0.30.0",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.0.tgz",
"integrity": "sha512-LA+31JYDJLs82r2ScLrlz1GjSgu66ZV518eyWT+S8VhyQn/JL0u9MeBOvQMGYiPk1DBiSN9DDMOcXvigJZaViQ==",
"requires": {
"sourcemap-codec": "^1.4.8"
"@jridgewell/sourcemap-codec": "^1.4.13"
}
},
"make-dir": {
@ -17072,6 +17098,12 @@
}
}
},
"md-editor-v3": {
"version": "2.11.3",
"resolved": "https://registry.npmjs.org/md-editor-v3/-/md-editor-v3-2.11.3.tgz",
"integrity": "sha512-SCfS4qMy0HldFdplcIGUMCpSv8qkNWkYShSdv2gTHeViKduA34zV89BOrWcqls2EZSlvt2n3G7nHRzYUvJjDKw==",
"requires": {}
},
"mdn-data": {
"version": "2.0.14",
"resolved": "https://registry.npmmirror.com/mdn-data/-/mdn-data-2.0.14.tgz",
@ -17752,6 +17784,23 @@
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
"dev": true
},
"pinia": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/pinia/-/pinia-2.1.4.tgz",
"integrity": "sha512-vYlnDu+Y/FXxv1ABo1vhjC+IbqvzUdiUC3sfDRrRyY2CQSrqqaa+iiHmqtARFxJVqWQMCJfXx1PBvFs9aJVLXQ==",
"requires": {
"@vue/devtools-api": "^6.5.0",
"vue-demi": ">=0.14.5"
},
"dependencies": {
"vue-demi": {
"version": "0.14.5",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.5.tgz",
"integrity": "sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==",
"requires": {}
}
}
},
"pkg-dir": {
"version": "4.2.0",
"resolved": "https://registry.npmmirror.com/pkg-dir/-/pkg-dir-4.2.0.tgz",
@ -18198,9 +18247,9 @@
}
},
"punycode": {
"version": "2.1.1",
"resolved": "https://registry.npmmirror.com/punycode/-/punycode-2.1.1.tgz",
"integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
"integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
"dev": true
},
"qs": {
@ -18803,11 +18852,6 @@
}
}
},
"sourcemap-codec": {
"version": "1.4.8",
"resolved": "https://registry.npmmirror.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
"integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
},
"spdx-correct": {
"version": "3.1.1",
"resolved": "https://registry.npmmirror.com/spdx-correct/-/spdx-correct-3.1.1.tgz",
@ -19391,15 +19435,15 @@
"dev": true
},
"vue": {
"version": "3.2.33",
"resolved": "https://registry.npmmirror.com/vue/-/vue-3.2.33.tgz",
"integrity": "sha512-si1ExAlDUrLSIg/V7D/GgA4twJwfsfgG+t9w10z38HhL/HA07132pUQ2KuwAo8qbCyMJ9e6OqrmWrOCr+jW7ZQ==",
"version": "3.3.4",
"resolved": "https://registry.npmjs.org/vue/-/vue-3.3.4.tgz",
"integrity": "sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==",
"requires": {
"@vue/compiler-dom": "3.2.33",
"@vue/compiler-sfc": "3.2.33",
"@vue/runtime-dom": "3.2.33",
"@vue/server-renderer": "3.2.33",
"@vue/shared": "3.2.33"
"@vue/compiler-dom": "3.3.4",
"@vue/compiler-sfc": "3.3.4",
"@vue/runtime-dom": "3.3.4",
"@vue/server-renderer": "3.3.4",
"@vue/shared": "3.3.4"
}
},
"vue-eslint-parser": {

View File

@ -17,6 +17,8 @@
"highlight.js": "^11.7.0",
"json-bigint": "^1.0.0",
"markdown-it": "^13.0.1",
"md-editor-v3": "^2.2.1",
"pinia": "^2.1.4",
"qs": "^6.11.1",
"sortablejs": "^1.15.0",
"vue": "^3.2.13",

View File

@ -1,15 +1,12 @@
<template>
<router-view></router-view>
<el-config-provider :locale="zhCn">
<router-view/>
</el-config-provider>
</template>
<script>
import {defineComponent} from 'vue'
export default defineComponent({
setup() {
// TODO:
},
})
<script setup>
import {ElConfigProvider} from 'element-plus';
import zhCn from 'element-plus/es/locale/lang/zh-cn';
</script>

View File

@ -0,0 +1,23 @@
.header{
background-color: #242f42;
}
.login-wrap{
background: #324157;
}
.plugins-tips{
background: #eef1f6;
}
.plugins-tips a{
color: #20a0ff;
}
.tags-li.active {
border: 1px solid #409EFF;
background-color: #409EFF;
}
.message-title{
color: #20a0ff;
}
.collapse-btn:hover{
background: rgb(40,52,70);
}

138
web/src/assets/css/main.css Normal file
View File

@ -0,0 +1,138 @@
* {
margin: 0;
padding: 0;
}
html,
body,
#app,
.wrapper {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif;
}
a {
text-decoration: none
}
.content-box {
position: absolute;
left: 250px;
right: 0;
top: 70px;
bottom: 0;
padding-bottom: 30px;
-webkit-transition: left .3s ease-in-out;
transition: left .3s ease-in-out;
background: #f0f0f0;
}
.content {
width: auto;
height: 100%;
padding: 10px;
overflow-y: scroll;
box-sizing: border-box;
}
.content-collapse {
left: 65px;
}
.container {
padding: 30px;
background: #fff;
border: 1px solid #ddd;
border-radius: 5px;
}
.crumbs {
margin: 10px 0;
}
.el-table th {
background-color: #f5f7fa !important;
}
.pagination {
margin: 20px 0;
text-align: right;
}
.plugins-tips {
padding: 20px 10px;
margin-bottom: 20px;
}
.el-button + .el-tooltip {
margin-left: 10px;
}
.el-table tr:hover {
background: #f6faff;
}
.mgb20 {
margin-bottom: 20px;
}
.move-enter-active,
.move-leave-active {
transition: opacity .1s ease;
}
.move-enter-from,
.move-leave-to {
opacity: 0;
}
/*BaseForm*/
.form-box {
width: 600px;
}
.form-box .line {
text-align: center;
}
.el-time-panel__content::after,
.el-time-panel__content::before {
margin-top: -7px;
}
.el-time-spinner__wrapper .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) {
padding-bottom: 0;
}
[class*=" el-icon-"], [class^=el-icon-] {
speak: none;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
vertical-align: baseline;
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.el-sub-menu [class^=el-icon-] {
vertical-align: middle;
margin-right: 5px;
width: 24px;
text-align: center;
font-size: 18px;
}
[hidden] {
display: none !important;
}

View File

@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 4125778 */
src: url('iconfont.woff2?t=1686901862117') format('woff2'),
url('iconfont.woff?t=1686901862117') format('woff'),
url('iconfont.ttf?t=1686901862117') format('truetype');
src: url('iconfont.woff2?t=1687320603149') format('woff2'),
url('iconfont.woff?t=1687320603149') format('woff'),
url('iconfont.ttf?t=1687320603149') format('truetype');
}
.iconfont {
@ -13,6 +13,50 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-home:before {
content: "\e6cb";
}
.icon-menu:before {
content: "\e6a6";
}
.icon-log:before {
content: "\e61c";
}
.icon-user-fill:before {
content: "\e7d5";
}
.icon-user-circle:before {
content: "\e860";
}
.icon-chart:before {
content: "\e631";
}
.icon-wechat:before {
content: "\e621";
}
.icon-config:before {
content: "\e612";
}
.icon-api-key:before {
content: "\e7d8";
}
.icon-role:before {
content: "\e60a";
}
.icon-dashboard:before {
content: "\e602";
}
.icon-password:before {
content: "\e62a";
}

File diff suppressed because one or more lines are too long

View File

@ -1,4 +0,0 @@
[ZoneTransfer]
ZoneId=3
ReferrerUrl=https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4125778
HostUrl=https://www.iconfont.cn/api/project/download.zip?spm=a313x.7781069.1998910419.d7543c303&pid=4125778&ctoken=SHhMU2NkC6BavrZsXJmrL-LS

View File

@ -5,6 +5,83 @@
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "673799",
"name": "首页",
"font_class": "home",
"unicode": "e6cb",
"unicode_decimal": 59083
},
{
"icon_id": "11808058",
"name": "menu",
"font_class": "menu",
"unicode": "e6a6",
"unicode_decimal": 59046
},
{
"icon_id": "1166053",
"name": "日志",
"font_class": "log",
"unicode": "e61c",
"unicode_decimal": 58908
},
{
"icon_id": "6151151",
"name": "user-fill",
"font_class": "user-fill",
"unicode": "e7d5",
"unicode_decimal": 59349
},
{
"icon_id": "6172778",
"name": "user-circle",
"font_class": "user-circle",
"unicode": "e860",
"unicode_decimal": 59488
},
{
"icon_id": "7821146",
"name": "chart",
"font_class": "chart",
"unicode": "e631",
"unicode_decimal": 58929
},
{
"icon_id": "8430216",
"name": "wechat",
"font_class": "wechat",
"unicode": "e621",
"unicode_decimal": 58913
},
{
"icon_id": "9769247",
"name": "config",
"font_class": "config",
"unicode": "e612",
"unicode_decimal": 58898
},
{
"icon_id": "10055632",
"name": "API密钥",
"font_class": "api-key",
"unicode": "e7d8",
"unicode_decimal": 59352
},
{
"icon_id": "11466716",
"name": "mg-role",
"font_class": "role",
"unicode": "e60a",
"unicode_decimal": 58890
},
{
"icon_id": "4194141",
"name": "首页dashboard",
"font_class": "dashboard",
"unicode": "e602",
"unicode_decimal": 58882
},
{
"icon_id": "611345",
"name": "密码",

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.4 KiB

View File

@ -1,14 +1,13 @@
<template>
<el-dialog
v-model="show"
v-model="showDialog"
:close-on-click-modal="false"
:show-close="true"
:before-close="close"
:top="top"
title="用户设置"
>
<div class="user-info" id="user-info">
<el-form :model="form" label-width="120px">
<el-form v-if="form.id" :model="form" label-width="120px">
<el-form-item label="昵称">
<el-input v-model="form['nickname']"/>
</el-form-item>
@ -77,6 +76,9 @@ const props = defineProps({
models: Array,
});
const showDialog = computed(() => {
return props.show
})
const form = ref({})
const top = computed(() => {
if (window.innerHeight < 768) {

View File

@ -1,6 +1,6 @@
<template>
<el-dialog
v-model="show"
v-model="showDialog"
:close-on-click-modal="false"
:show-close="true"
:before-close="close"
@ -32,20 +32,17 @@
</template>
<script setup>
import {onMounted, ref} from "vue"
import {computed, ref} from "vue"
import {httpPost} from "@/utils/http";
import {ElMessage} from "element-plus";
const props = defineProps({
show: Boolean,
});
const form = ref({})
onMounted(() => {
const showDialog = computed(() => {
return props.show
})
const form = ref({})
const emits = defineEmits(['hide', 'logout']);
const save = function () {
if (!form.value['password'] || form.value['password'].length < 8) {

View File

@ -0,0 +1,168 @@
<template>
<div class="header">
<!-- 折叠按钮 -->
<div class="collapse-btn" @click="collapseChange">
<el-icon v-if="sidebar.collapse">
<Expand/>
</el-icon>
<el-icon v-else>
<Fold/>
</el-icon>
</div>
<div class="logo">后台管理系统</div>
<div class="header-right">
<div class="header-user-con">
<!-- 消息中心 -->
<div class="btn-bell">
<el-tooltip
effect="dark"
:content="message ? `有${message}条未读消息` : `消息中心`"
placement="bottom"
>
<i class="el-icon-lx-notice"></i>
</el-tooltip>
<span class="btn-bell-badge" v-if="message"></span>
</div>
<!-- 用户头像 -->
<el-avatar class="user-avatar" :size="30" :src="imgUrl"/>
<!-- 用户名下拉菜单 -->
<el-dropdown class="user-name" trigger="click" @command="handleCommand">
<span class="el-dropdown-link">
{{ username }}
<el-icon class="el-icon--right">
<arrow-down/>
</el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<a href="https://github.com/lin-xin/vue-manage-system" target="_blank">
<el-dropdown-item>项目仓库</el-dropdown-item>
</a>
<el-dropdown-item command="user">个人中心</el-dropdown-item>
<el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
</div>
</template>
<script setup>
import {onMounted, ref} from 'vue';
import {useSidebarStore} from '@/store/sidebar';
import {useRouter} from 'vue-router';
import imgUrl from '../../assets/img/avatar.jpg';
import {ArrowDown, Expand, Fold} from "@element-plus/icons-vue";
const message = ref(5);
const username = ref('极客学长')
const sidebar = useSidebarStore();
//
const collapseChange = () => {
sidebar.handleCollapse();
};
onMounted(() => {
if (document.body.clientWidth < 1024) {
collapseChange();
}
});
//
const router = useRouter();
const handleCommand = (command) => {
if (command === 'logout') {
localStorage.removeItem('ms_username');
router.push('/login');
}
};
</script>
<style scoped>
.header {
position: relative;
box-sizing: border-box;
width: 100%;
height: 70px;
font-size: 22px;
color: #fff;
}
.collapse-btn {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
float: left;
padding: 0 21px;
cursor: pointer;
}
.header .logo {
float: left;
width: 250px;
line-height: 70px;
}
.header-right {
float: right;
padding-right: 50px;
}
.header-user-con {
display: flex;
height: 70px;
align-items: center;
}
.btn-fullscreen {
transform: rotate(45deg);
margin-right: 5px;
font-size: 24px;
}
.btn-bell,
.btn-fullscreen {
position: relative;
width: 30px;
height: 30px;
text-align: center;
border-radius: 15px;
cursor: pointer;
display: flex;
align-items: center;
}
.btn-bell-badge {
position: absolute;
right: 4px;
top: 0px;
width: 8px;
height: 8px;
border-radius: 4px;
background: #f56c6c;
color: #fff;
}
.btn-bell .el-icon-lx-notice {
color: #fff;
}
.user-name {
margin-left: 10px;
}
.user-avatar {
margin-left: 20px;
}
.el-dropdown-link {
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
}
.el-dropdown-menu__item {
text-align: center;
}
</style>

View File

@ -0,0 +1,132 @@
<template>
<div class="sidebar">
<el-menu
class="sidebar-el-menu"
:default-active="onRoutes"
:collapse="sidebar.collapse"
background-color="#324157"
text-color="#bfcbd9"
active-text-color="#20a0ff"
unique-opened
router
>
<template v-for="item in items">
<template v-if="item.subs">
<el-sub-menu :index="item.index" :key="item.index">
<template #title>
<i :class="'iconfont '+item.icon"></i>
<span>{{ item.title }}</span>
</template>
<template v-for="subItem in item.subs">
<el-sub-menu
v-if="subItem.subs"
:index="subItem.index"
:key="subItem.index"
>
<template #title>{{ subItem.title }}</template>
<el-menu-item v-for="(threeItem, i) in subItem.subs" :key="i" :index="threeItem.index">
{{ threeItem.title }}
</el-menu-item>
</el-sub-menu>
<el-menu-item v-else :index="subItem.index">
{{ subItem.title }}
</el-menu-item>
</template>
</el-sub-menu>
</template>
<template v-else>
<el-menu-item :index="item.index" :key="item.index">
<i :class="'iconfont icon-'+item.icon"></i>
<template #title>{{ item.title }}</template>
</el-menu-item>
</template>
</template>
</el-menu>
</div>
</template>
<script setup>
import {computed} from 'vue';
import {useSidebarStore} from '@/store/sidebar';
import {useRoute} from 'vue-router';
const items = [
{
icon: 'home',
index: '/admin/welcome',
title: '系统首页',
},
{
icon: 'config',
index: '/admin/system',
title: '系统设置',
},
{
icon: 'menu',
index: '1',
title: '常用模板页面',
subs: [
{
icon: 'menu',
index: '/admin/demo/form',
title: '表单页面',
},
{
index: '/admin/demo/table',
title: '常用表格',
},
{
index: '/admin/demo/import',
title: '导入Excel',
},
{
index: '/admin/demo/editor',
title: '富文本编辑器',
},
],
},
];
const route = useRoute();
const onRoutes = computed(() => {
return route.path;
});
const sidebar = useSidebarStore();
</script>
<style scoped lang="stylus">
.sidebar {
display: block;
position: absolute;
left: 0;
top: 70px;
bottom: 0;
overflow-y: scroll;
ul {
height: 100%;
.el-menu-item {
.iconfont {
font-size 16px;
margin-right 5px;
}
}
.el-menu-item.is-active {
background-color #242f42
}
}
.sidebar-el-menu:not(.el-menu--collapse) {
width: 250px;
}
}
.sidebar::-webkit-scrollbar {
width: 0;
}
</style>

View File

@ -0,0 +1,171 @@
<template>
<div class="tags" v-if="tags.show">
<ul>
<li
class="tags-li"
v-for="(item, index) in tags.list"
:class="{ active: isActive(item.path) }"
:key="index"
>
<router-link :to="item.path" class="tags-li-title">{{ item.title }}</router-link>
<el-icon @click="closeTags(index)">
<Close/>
</el-icon>
</li>
</ul>
<div class="tags-close-box">
<el-dropdown @command="handleTags">
<el-button size="small" type="primary">
标签选项
<el-icon class="el-icon--right">
<arrow-down/>
</el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu size="small">
<el-dropdown-item command="other">关闭其他</el-dropdown-item>
<el-dropdown-item command="all">关闭所有</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
</template>
<script setup>
import {useTagsStore} from '@/store/tags';
import {onBeforeRouteUpdate, useRoute, useRouter} from 'vue-router';
import {ArrowDown, Close} from "@element-plus/icons-vue";
const route = useRoute();
const router = useRouter();
const isActive = (path) => {
return path === route.fullPath;
};
const tags = useTagsStore();
//
const closeTags = (index) => {
const delItem = tags.list[index];
tags.delTagsItem(index);
const item = tags.list[index] ? tags.list[index] : tags.list[index - 1];
if (item) {
delItem.path === route.fullPath && router.push(item.path);
} else {
router.push('/');
}
};
//
const setTags = (route) => {
const isExist = tags.list.some(item => {
return item.path === route.fullPath;
});
if (!isExist) {
if (tags.list.length >= 8) tags.delTagsItem(0);
tags.setTagsItem({
name: route.name,
title: route.meta.title,
path: route.fullPath
});
}
};
setTags(route);
onBeforeRouteUpdate(to => {
setTags(to);
});
//
const closeAll = () => {
tags.clearTags();
router.push('/');
};
//
const closeOther = () => {
const curItem = tags.list.filter(item => {
return item.path === route.fullPath;
});
tags.closeTagsOther(curItem);
};
const handleTags = (command) => {
command === 'other' ? closeOther() : closeAll();
};
//
// tags.closeCurrentTag({
// $router: router,
// $route: route
// });
</script>
<style>
.tags {
position: relative;
height: 30px;
overflow: hidden;
background: #fff;
padding-right: 120px;
box-shadow: 0 5px 10px #ddd;
}
.tags ul {
box-sizing: border-box;
width: 100%;
height: 100%;
}
.tags-li {
display: flex;
align-items: center;
float: left;
margin: 3px 5px 2px 3px;
border-radius: 3px;
font-size: 12px;
overflow: hidden;
cursor: pointer;
height: 23px;
border: 1px solid #e9eaec;
background: #fff;
padding: 0 5px 0 12px;
color: #666;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.tags-li:not(.active):hover {
background: #f8f8f8;
}
.tags-li.active {
color: #fff;
}
.tags-li-title {
float: left;
max-width: 80px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-right: 5px;
color: #666;
}
.tags-li.active .tags-li-title {
color: #fff;
}
.tags-close-box {
position: absolute;
right: 0;
top: 0;
box-sizing: border-box;
padding-top: 1px;
text-align: center;
width: 110px;
height: 30px;
background: #fff;
box-shadow: -3px 0 15px 3px rgba(0, 0, 0, 0.1);
z-index: 10;
}
</style>

View File

@ -5,21 +5,89 @@ import "element-plus/dist/index.css"
import App from './App.vue'
import ChatPlus from "@/views/ChatPlus.vue";
import NotFound from './views/404.vue'
import TestPage from './views/Test.vue'
import Home from "@/views/Home.vue";
import Admin from "@/views/admin/Admin.vue";
import Login from "@/views/Login.vue"
import Register from "@/views/Register.vue";
import AdminLogin from "@/views/admin/Login.vue"
import {createPinia} from "pinia";
const routes = [
{name: 'home', path: '/', component: Home, meta: {title: 'ChatGPT-Plus'}},
{name: 'login', path: '/login', component: Login, meta: {title: '用户登录'}},
{name: 'register', path: '/register', component: Register, meta: {title: '用户注册'}},
{name: 'plus', path: '/chat', component: ChatPlus, meta: {title: 'ChatGPT-智能助手V3'}},
{name: 'admin', path: '/admin', component: Admin, meta: {title: 'Chat-Plus 控制台'}},
{name: 'admin-login', path: '/admin/login', component: AdminLogin, meta: {title: 'Chat-Plus 控制台登录'}},
{name: 'test', path: '/test', component: TestPage, meta: {title: '测试页面'}},
// {name: 'admin', path: '/admin', component: Admin, meta: {title: 'Chat-Plus 控制台'}},
{name: 'admin/login', path: '/admin/login', component: AdminLogin, meta: {title: 'Chat-Plus 控制台登录'}},
{
name: 'admin',
path: '/admin',
redirect: '/admin/welcome',
component: () => import("@/views/admin/Home.vue"),
meta: {title: 'ChatGPT-Plus 管理后台'},
children: [
{
path: '/admin/welcome',
name: 'home',
meta: {title: '系统首页'},
component: () => import('@/views/admin/Welcome.vue'),
},
{
path: '/admin/system',
name: 'system',
meta: {title: '系统设置'},
component: () => import('@/views/admin/SysConfig.vue'),
},
{
path: '/admin/user',
name: 'user',
meta: {title: '用户管理'},
component: () => import('@/views/admin/UserList.vue'),
},
{
path: '/admin/role',
name: 'role',
meta: {title: '角色管理'},
component: () => import('@/views/admin/RoleList.vue'),
},
{
path: '/admin/apikey',
name: 'apikey',
meta: {title: 'API-KEY 管理'},
component: () => import('@/views/admin/ApiKey.vue'),
},
{
path: '/admin/loginLog',
name: 'loginLog',
meta: {title: '登录日志'},
component: () => import('@/views/admin/LoginLog.vue'),
},
{
path: '/admin/demo/form',
name: 'form',
meta: {title: '表单页面'},
component: () => import('@/views/admin/demo/Form.vue'),
},
{
path: '/admin/demo/table',
name: 'table',
meta: {title: '数据列表'},
component: () => import('@/views/admin/demo/Table.vue'),
},
{
path: '/admin/demo/import',
name: 'import',
meta: {title: '导入数据'},
component: () => import('@/views/admin/demo/Import.vue'),
},
{
path: '/admin/demo/editor',
name: 'editor',
meta: {title: '富文本编辑器'},
component: () => import('@/views/admin/demo/Editor.vue'),
},
]
},
{name: 'test', path: '/test', component: () => import('@/views/Test.vue'), meta: {title: '测试页面'}},
{name: 'NotFound', path: '/:all(.*)', component: NotFound, meta: {title: '页面没有找到'}},
]
@ -32,12 +100,13 @@ const router = createRouter({
// dynamic change the title when router change
router.beforeEach((to, from, next) => {
if (to.meta.title) {
document.title = to.meta.title
document.title = `${to.meta.title} | ChatGPT-PLUS`
}
next()
})
const app = createApp(App)
app.use(createPinia())
app.use(router).use(ElementPlus).mount('#app')

15
web/src/store/sidebar.js Normal file
View File

@ -0,0 +1,15 @@
import {defineStore} from 'pinia';
export const useSidebarStore = defineStore('sidebar', {
state: () => {
return {
collapse: false
};
},
getters: {},
actions: {
handleCollapse() {
this.collapse = !this.collapse;
}
}
});

47
web/src/store/tags.js Normal file
View File

@ -0,0 +1,47 @@
import {defineStore} from 'pinia';
export const useTagsStore = defineStore('tags', {
state: () => {
return {
list: []
};
},
getters: {
show: state => {
return state.list.length > 0;
},
nameList: state => {
return state.list.map(item => item.name);
}
},
actions: {
delTagsItem(index) {
this.list.splice(index, 1);
},
setTagsItem(data) {
this.list.push(data);
},
clearTags() {
this.list = [];
},
closeTagsOther(data) {
this.list = data;
},
closeCurrentTag(data) {
for (let i = 0, len = this.list.length; i < len; i++) {
const item = this.list[i];
if (item.path === data.$route.fullPath) {
if (i < len - 1) {
data.$router.push(this.list[i + 1].path);
} else if (i > 0) {
data.$router.push(this.list[i - 1].path);
} else {
data.$router.push('/admin');
}
this.list.splice(i, 1);
break;
}
}
}
}
});

View File

@ -183,9 +183,10 @@
</el-main>
</el-container>
<config-dialog v-if="user" :show="showConfigDialog" :models="models" @hide="showConfigDialog = false"
<config-dialog v-if="isLogin" :show="showConfigDialog" :models="models" @hide="showConfigDialog = false"
@update-user="updateUser"/>
<password-dialog v-if="user" :show="showPasswordDialog" @hide="showPasswordDialog = false" @logout="logout"/>
<password-dialog v-if="isLogin" :show="showPasswordDialog" @hide="showPasswordDialog = false"
@logout="logout"/>
</div>
@ -237,47 +238,45 @@ const newChatItem = ref(null);
const router = useRouter();
const showConfigDialog = ref(false);
const showPasswordDialog = ref(false);
const isLogin = ref(false)
if (!user.value) {
router.push("login");
} else {
onMounted(() => {
resizeElement();
checkSession().then(() => {
//
httpGet(`/api/role/list?user_id=${user.value.id}`).then((res) => {
roles.value = res.data;
roleId.value = roles.value[0]['id'];
//
loadChats();
//
newChat();
}).catch((e) => {
console.log(e)
ElMessage.error('获取聊天角色失败')
})
}).catch(() => {
router.push('login')
});
const clipboard = new Clipboard('.copy-reply');
clipboard.on('success', () => {
ElMessage.success('复制成功!');
onMounted(() => {
resizeElement();
checkSession().then(() => {
isLogin.value = true
//
httpGet(`/api/role/list?user_id=${user.value.id}`).then((res) => {
roles.value = res.data;
roleId.value = roles.value[0]['id'];
//
loadChats();
//
newChat();
}).catch((e) => {
console.log(e)
ElMessage.error('获取聊天角色失败')
})
clipboard.on('error', () => {
ElMessage.error('复制失败!');
//
httpGet('/api/admin/config/get?key=system').then(res => {
title.value = res.data.title;
models.value = res.data.models;
}).catch(e => {
ElMessage.error("加载系统配置失败: " + e.message)
})
}).catch(() => {
router.push('login')
});
//
httpGet('/api/admin/config/get?key=system').then(res => {
title.value = res.data.title;
models.value = res.data.models;
}).catch(e => {
ElMessage.error("加载系统配置失败: " + e.message)
const clipboard = new Clipboard('.copy-reply');
clipboard.on('success', () => {
ElMessage.success('复制成功!');
})
}
clipboard.on('error', () => {
ElMessage.error('复制失败!');
})
});
const checkSession = function () {
return new Promise((resolve, reject) => {
@ -851,6 +850,7 @@ $borderColor = #4676d0;
justify-content: flex-end;
align-items: center;
padding 5px 20px;
border-top 1px solid #3c3c3c;
.user-info {
width 100%

View File

@ -1,21 +1,40 @@
<template>
<div>{{ title }}</div>
<div class="home" :style="{ height: winHeight + 'px' }">
<h1>{{ title }}</h1>
</div>
</template>
<script setup>
import {onMounted, ref} from "vue"
import {isMobile} from "@/utils/libs";
import {ref} from "vue"
import {useRouter} from "vue-router"; // useRouter
const title = ref("Loading page...");
const title = ref("HI, ChatGPT PLUS!");
const winHeight = ref(window.innerHeight)
const router = useRouter();
onMounted(() => {
if (isMobile()) {
router.push("mobile");
} else {
router.push("chat");
}
})
// onMounted(() => {
// if (isMobile()) {
// router.push("mobile");
// } else {
// router.push("chat");
// }
// })
</script>
<style lang="stylus" scoped>
.home {
display: flex;
justify-content: center;
align-items: center;
color: #202020;
background-color: #282c34;
h1 {
font-size: 300%;
font-weight: bold;
letter-spacing: 0.1em;
text-shadow: -1px -1px 1px #111111, 2px 2px 1px #363636;
}
}
</style>

View File

@ -343,32 +343,31 @@ $borderColor = #4676d0;
display: flex;
flex-flow: column;
.content-tabs {
.el-tabs {
background: #ffffff;
padding 10px 20px;
.el-tabs__item {
height 35px
line-height 35px
}
.el-tabs__content {
padding 10px 20px 20px 20px;
}
}
}
}
}
</style>
<style lang="stylus">
.pagination {
padding 20px;
padding-top 20px;
display flex
justify-content center
width 100%
}
.el-tabs__item {
height 35px
line-height 35px
}
.el-tabs__content {
padding-bottom 20px;
}
</style>

View File

@ -151,7 +151,7 @@ const remove = function (row) {
.opt-box {
padding-bottom: 10px;
display flex;
justify-content end
justify-content flex-end
.el-icon {
margin-right: 5px;

View File

@ -0,0 +1,34 @@
<template>
<div>
<admin-header/>
<admin-sidebar/>
<div class="content-box" :class="{ 'content-collapse': sidebar.collapse }">
<admin-tags/>
<div class="content">
<router-view v-slot="{ Component }">
<transition name="move" mode="out-in">
<keep-alive :include="tags.nameList">
<component :is="Component"></component>
</keep-alive>
</transition>
</router-view>
</div>
</div>
</div>
</template>
<script setup>
import {useSidebarStore} from '@/store/sidebar';
import {useTagsStore} from '@/store/tags';
import AdminHeader from "@/components/admin/AdminHeader.vue";
import AdminSidebar from "@/components/admin/AdminSidebar.vue";
import AdminTags from "@/components/admin/AdminTags.vue";
const sidebar = useSidebarStore();
const tags = useTagsStore();
</script>
<style lang="stylus">
@import '@/assets/css/main.css';
@import '@/assets/css/color-dark.css';
@import '@/assets/iconfont/iconfont.css';
</style>

View File

@ -10,16 +10,6 @@
<span>{{ dateFormat(scope.row['created_at']) }}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="180">
<template #default="scope">
<el-popconfirm title="确定要删除当前记录吗?" @confirm="remove(scope.row)">
<template #reference>
<el-button size="small" type="danger">删除</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
</el-row>
@ -77,7 +67,7 @@ const fetchList = function (_page, _pageSize) {
.opt-box {
padding-bottom: 10px;
display flex;
justify-content end
justify-content flex-start
.el-icon {
margin-right: 5px;

View File

@ -293,7 +293,7 @@ const removeContext = function (index) {
.opt-box {
padding-bottom: 10px;
display flex;
justify-content end
justify-content flex-end
.el-icon {
margin-right 5px;

View File

@ -1,19 +1,10 @@
<template>
<div class="welcome" :style="{ height: winHeight + 'px' }">
<div class="welcome">
<h1>ChatGPT-PLUS 控制台</h1>
</div>
</template>
<script setup>
import {defineComponent, onMounted, ref} from "vue"
const winHeight = ref(window.innerHeight)
onMounted(() => {
window.addEventListener("resize", function () {
winHeight.value = window.innerHeight
})
})
</script>
<script setup></script>
<style lang="stylus" scoped>
.welcome {
@ -22,6 +13,7 @@ onMounted(() => {
align-items: center;
color: #202020;
background-color: #282c34;
height 100%;
h1 {
font-size: 300%;

View File

@ -0,0 +1,21 @@
<template>
<div class="container">
<div class="plugins-tips">
md-editor-v3vue3版本的 markdown 编辑器配置丰富请详看文档 访问地址
<a href="https://imzbf.github.io/md-editor-v3/index" target="_blank">md-editor-v3</a>
</div>
<md-editor class="mgb20" v-model="text" @on-upload-img="onUploadImg"/>
<el-button type="primary">提交</el-button>
</div>
</template>
<script setup>
import {MdEditor} from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import {ref} from "vue";
const text = ref('Hello Editor!');
const onUploadImg = (files) => {
console.log(files);
};
</script>

View File

@ -0,0 +1,155 @@
<template>
<div class="container">
<div class="form-box">
<el-form ref="formRef" :rules="rules" :model="form" label-width="80px">
<el-form-item label="表单名称" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="选择器" prop="region">
<el-select v-model="form.region" placeholder="请选择">
<el-option key="小明" label="小明" value="小明"></el-option>
<el-option key="小红" label="小红" value="小红"></el-option>
<el-option key="小白" label="小白" value="小白"></el-option>
</el-select>
</el-form-item>
<el-form-item label="日期时间">
<el-col :span="11">
<el-form-item prop="date1">
<el-date-picker
type="date"
placeholder="选择日期"
v-model="form.date1"
style="width: 100%"
></el-date-picker>
</el-form-item>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-form-item prop="date2">
<el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%">
</el-time-picker>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="城市级联" prop="options">
<el-cascader :options="options" v-model="form.options"></el-cascader>
</el-form-item>
<el-form-item label="选择开关" prop="delivery">
<el-switch v-model="form.delivery"></el-switch>
</el-form-item>
<el-form-item label="多选框" prop="type">
<el-checkbox-group v-model="form.type">
<el-checkbox label="小明" name="type"></el-checkbox>
<el-checkbox label="小红" name="type"></el-checkbox>
<el-checkbox label="小白" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="单选框" prop="resource">
<el-radio-group v-model="form.resource">
<el-radio label="小明"></el-radio>
<el-radio label="小红"></el-radio>
<el-radio label="小白"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="文本框" prop="desc">
<el-input type="textarea" rows="5" v-model="form.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit(formRef)">表单提交</el-button>
<el-button @click="onReset(formRef)">重置表单</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script setup>
import {reactive, ref} from 'vue';
import {ElMessage} from 'element-plus';
const options = [
{
value: 'guangdong',
label: '广东省',
children: [
{
value: 'guangzhou',
label: '广州市',
children: [
{
value: 'tianhe',
label: '天河区',
},
{
value: 'haizhu',
label: '海珠区',
},
],
},
{
value: 'dongguan',
label: '东莞市',
children: [
{
value: 'changan',
label: '长安镇',
},
{
value: 'humen',
label: '虎门镇',
},
],
},
],
},
{
value: 'hunan',
label: '湖南省',
children: [
{
value: 'changsha',
label: '长沙市',
children: [
{
value: 'yuelu',
label: '岳麓区',
},
],
},
],
},
];
const rules = {
name: [{required: true, message: '请输入表单名称', trigger: 'blur'}],
};
const formRef = ref(null);
const form = reactive({
name: '',
region: '',
date1: '',
date2: '',
delivery: true,
type: ['小明'],
resource: '小红',
desc: '',
options: [],
});
//
const onSubmit = (formEl) => {
//
if (!formEl) return;
formEl.validate((valid) => {
if (valid) {
console.log(form);
ElMessage.success('提交成功!');
} else {
return false;
}
});
};
//
const onReset = (formEl) => {
if (!formEl) return;
formEl.resetFields();
};
</script>

View File

@ -0,0 +1,71 @@
<template>
<div>
<div class="container">
<div class="handle-box">
<el-upload
action="#"
:limit="1"
accept=".xlsx, .xls"
:show-file-list="false"
>
<el-button class="mr10" type="success">批量导入</el-button>
</el-upload>
<el-link href="/template.xlsx" target="_blank">下载模板</el-link>
</div>
<el-table :data="tableData" border class="table" header-cell-class-name="table-header">
<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="sno" label="学号"></el-table-column>
<el-table-column prop="class" label="班级"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="sex" label="性别"></el-table-column>
</el-table>
</div>
</div>
</template>
<script setup>
import {ref} from 'vue';
const tableData = ref([]);
//
const getData = () => {
tableData.value = [
{
id: 1,
name: '小明',
sno: 'S001',
class: '一班',
age: '10',
sex: '男',
},
{
id: 2,
name: '小红',
sno: 'S002',
class: '一班',
age: '9',
sex: '女',
},
];
};
getData();
</script>
<style scoped>
.handle-box {
display: flex;
margin-bottom: 20px;
}
.table {
width: 100%;
font-size: 14px;
}
.mr10 {
margin-right: 10px;
}
</style>

View File

@ -0,0 +1,220 @@
<template>
<div>
<div class="container">
<div class="handle-box">
<el-select v-model="query.address" placeholder="地址" class="handle-select mr10">
<el-option key="1" label="广东省" value="广东省"></el-option>
<el-option key="2" label="湖南省" value="湖南省"></el-option>
</el-select>
<el-input v-model="query.name" placeholder="用户名" class="handle-input mr10"></el-input>
<el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
<el-button type="primary" :icon="Plus">新增</el-button>
</div>
<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
<el-table-column prop="name" label="用户名"></el-table-column>
<el-table-column label="账户余额">
<template #default="scope">{{ scope.row.money }}</template>
</el-table-column>
<el-table-column label="头像(查看大图)" align="center">
<template #default="scope">
<el-image
class="table-td-thumb"
:src="scope.row.thumb"
:z-index="10"
:preview-src-list="[scope.row.thumb]"
preview-teleported
>
</el-image>
</template>
</el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
<el-table-column label="状态" align="center">
<template #default="scope">
<el-tag
:type="scope.row.state === '成功' ? 'success' : scope.row.state === '失败' ? 'danger' : ''"
>
{{ scope.row.state }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="date" label="注册时间"></el-table-column>
<el-table-column label="操作" width="220" align="center">
<template #default="scope">
<el-button text :icon="Edit" @click="handleEdit(scope.$index, scope.row)" v-permiss="15">
编辑
</el-button>
<el-button text :icon="Delete" class="red" @click="handleDelete(scope.$index)" v-permiss="16">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination
background
layout="total, prev, pager, next"
:current-page="query.pageIndex"
:page-size="query.pageSize"
:total="pageTotal"
@current-change="handlePageChange"
></el-pagination>
</div>
</div>
<!-- 编辑弹出框 -->
<el-dialog title="编辑" v-model="editVisible" width="30%">
<el-form label-width="70px">
<el-form-item label="用户名">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="地址">
<el-input v-model="form.address"></el-input>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="editVisible = false"> </el-button>
<el-button type="primary" @click="saveEdit"> </el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script setup>
import {reactive, ref} from 'vue';
import {ElMessage, ElMessageBox} from 'element-plus';
import {Delete, Edit, Plus, Search} from '@element-plus/icons-vue';
const query = reactive({
address: '',
name: '',
pageIndex: 1,
pageSize: 10
});
const tableData = ref();
const pageTotal = ref(0);
//
const getData = () => {
tableData.value = [{
"id": 1,
"name": "张三",
"money": 123,
"address": "广东省东莞市长安镇",
"state": "成功",
"date": "2019-11-1",
"thumb": "https://lin-xin.gitee.io/images/post/wms.png"
},
{
"id": 2,
"name": "李四",
"money": 456,
"address": "广东省广州市白云区",
"state": "成功",
"date": "2019-10-11",
"thumb": "https://lin-xin.gitee.io/images/post/node3.png"
},
{
"id": 3,
"name": "王五",
"money": 789,
"address": "湖南省长沙市",
"state": "失败",
"date": "2019-11-11",
"thumb": "https://lin-xin.gitee.io/images/post/parcel.png"
},
{
"id": 4,
"name": "赵六",
"money": 1011,
"address": "福建省厦门市鼓浪屿",
"state": "成功",
"date": "2019-10-20",
"thumb": "https://lin-xin.gitee.io/images/post/notice.png"
}
]
pageTotal.value = 5
};
getData();
//
const handleSearch = () => {
query.pageIndex = 1;
getData();
};
//
const handlePageChange = (val) => {
query.pageIndex = val;
getData();
};
//
const handleDelete = (index) => {
//
ElMessageBox.confirm('确定要删除吗?', '提示', {
type: 'warning'
})
.then(() => {
ElMessage.success('删除成功');
tableData.value.splice(index, 1);
})
.catch(() => {
});
};
//
const editVisible = ref(false);
let form = reactive({
name: '',
address: ''
});
let idx = -1;
const handleEdit = (index, row) => {
idx = index;
form.name = row.name;
form.address = row.address;
editVisible.value = true;
};
const saveEdit = () => {
editVisible.value = false;
ElMessage.success(`修改第 ${idx + 1} 行成功`);
tableData.value[idx].name = form.name;
tableData.value[idx].address = form.address;
};
</script>
<style scoped>
.handle-box {
margin-bottom: 20px;
}
.handle-select {
width: 120px;
}
.handle-input {
width: 300px;
}
.table {
width: 100%;
font-size: 14px;
}
.red {
color: #F56C6C;
}
.mr10 {
margin-right: 10px;
}
.table-td-thumb {
display: block;
margin: auto;
width: 40px;
height: 40px;
}
</style>