diff --git a/api/go/core/app_server.go b/api/go/core/app_server.go
index 3cacbbcf..b1b5ca41 100644
--- a/api/go/core/app_server.go
+++ b/api/go/core/app_server.go
@@ -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
 		}
diff --git a/api/go/handler/chat_role_handler.go b/api/go/handler/chat_role_handler.go
index 6b875d94..01ded3f3 100644
--- a/api/go/handler/chat_role_handler.go
+++ b/api/go/handler/chat_role_handler.go
@@ -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 {
diff --git a/web/package-lock.json b/web/package-lock.json
index 1e07dcf3..148c2539 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -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": {
diff --git a/web/package.json b/web/package.json
index b0164e2c..158776cd 100644
--- a/web/package.json
+++ b/web/package.json
@@ -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",
diff --git a/web/src/App.vue b/web/src/App.vue
index 6a46d3f6..d966ef20 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -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>
 
 
diff --git a/web/src/assets/css/color-dark.css b/web/src/assets/css/color-dark.css
new file mode 100644
index 00000000..7f322765
--- /dev/null
+++ b/web/src/assets/css/color-dark.css
@@ -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);
+}
\ No newline at end of file
diff --git a/web/src/assets/css/main.css b/web/src/assets/css/main.css
new file mode 100644
index 00000000..6b2241c9
--- /dev/null
+++ b/web/src/assets/css/main.css
@@ -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;
+}
\ No newline at end of file
diff --git a/web/src/assets/iconfont/iconfont.css b/web/src/assets/iconfont/iconfont.css
index f4eec58e..2a1f47eb 100644
--- a/web/src/assets/iconfont/iconfont.css
+++ b/web/src/assets/iconfont/iconfont.css
@@ -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";
 }
diff --git a/web/src/assets/iconfont/iconfont.js b/web/src/assets/iconfont/iconfont.js
index 10e33f86..9dd75e0c 100644
--- a/web/src/assets/iconfont/iconfont.js
+++ b/web/src/assets/iconfont/iconfont.js
@@ -1 +1 @@
-window._iconfont_svg_string_4125778='<svg><symbol id="icon-password" viewBox="0 0 1024 1024"><path d="M813.431725 388.476709l0-95.606475c0-153.48058-131.225717-277.965779-293.173133-277.965779-161.944346 0-293.170063 124.484176-293.170063 277.965779l0 94.015234c-71.494311 4.897543-127.878482 61.447491-127.878482 130.494053l0 359.726921c0 72.216765 61.756529 130.796952 137.960095 130.796952l552.494273 0c76.203566 0 137.960095-58.580187 137.960095-130.796952L927.624511 517.379521C927.624511 452.80276 878.305245 399.159002 813.431725 388.476709zM581.427744 723.688283l0 121.141034L477.951021 844.829318l0-119.194706c-34.651194-17.092283-58.304917-51.442626-58.304917-91.036389 0-56.644091 48.39522-102.558817 108.159372-102.558817 59.765175 0 108.162442 45.913703 108.162442 102.558817C635.967918 672.739914 614.016976 706.019879 581.427744 723.688283zM720.466404 386.535497 319.028499 386.535497l0-76.632331c0-105.090477 89.839121-190.349279 200.74607-190.349279 110.797455 0 200.690812 85.258803 200.690812 190.349279L720.46538 386.535497z"  ></path></symbol><symbol id="icon-send" viewBox="0 0 1024 1024"><path d="M0 1024l106.496-474.112 588.8-36.864-588.8-39.936L0 0l1024 512z" fill="" ></path></symbol><symbol id="icon-logout" viewBox="0 0 1024 1024"><path d="M737.024 210.208C733.312 210.4 732.352 210.336 728.672 210.88 721.76 211.936 715.04 214.08 708.832 217.28 702.624 220.48 696.96 224.704 692.096 229.728 688.224 233.728 684.864 238.272 682.144 243.136 673.984 257.888 671.936 275.616 676.576 291.808 678.88 299.872 682.784 307.456 688 314.016 690.336 316.928 691.04 317.536 693.632 320.224L696.736 323.04C710.592 334.752 723.424 347.552 734.912 361.6 762.88 395.776 782.816 436.224 792.704 479.264 800.704 514.208 802.08 550.624 796.864 586.08 791.456 622.848 778.944 658.496 760.064 690.496 745.408 715.296 727.008 737.792 705.696 757.152 684.992 775.936 661.6 791.744 636.352 803.84 608.96 816.96 579.488 825.664 549.344 829.536 514.976 833.984 479.84 832.192 446.112 824.288 410.912 816.064 377.344 801.184 347.68 780.576 315.712 758.336 288.384 729.536 267.712 696.544 246.464 662.656 232.48 624.352 226.88 584.736 220.704 541.248 224.608 496.48 238.176 454.72 248.672 422.4 264.928 392 286.048 365.344 295.84 352.96 306.72 341.536 318.336 330.848 322.272 327.328 326.272 323.936 330.176 320.416 332.768 317.728 333.472 317.12 335.776 314.208 340.992 307.616 344.864 300.032 347.168 291.968 349.44 283.904 350.144 275.392 349.152 267.072 348.352 260.128 346.4 253.344 343.392 247.04 340.416 240.736 336.384 234.912 331.52 229.92 319.776 217.824 303.392 210.752 286.528 210.496 280.96 210.4 275.36 211.072 269.952 212.416 263.168 214.144 256.704 216.96 250.816 220.736 245.6 224.128 240.96 228.352 236.32 232.48 229.696 238.336 223.232 244.416 216.992 250.688 191.424 276.352 169.216 305.408 151.168 336.832 120.32 390.592 101.792 451.168 97.184 512.96 92.544 574.848 101.856 637.6 124.448 695.392 140.288 735.904 162.56 773.824 190.112 807.456 216.672 839.904 248.096 868.352 283.104 891.424 322.496 917.376 366.304 936.48 412.096 947.776 465.472 960.928 521.344 963.424 575.68 955.072 626.08 947.328 674.944 930.24 719.136 904.832 760.352 881.12 797.504 850.304 828.384 814.176 853.92 784.32 875.168 750.848 891.296 715.04 922.816 644.96 934.368 566.432 924.544 490.272 918.688 444.96 905.312 400.672 885.056 359.712 868.288 325.824 846.88 294.24 821.6 266.112 811.488 254.848 800.736 244.224 789.504 234.048 786.208 231.136 782.848 228.224 779.488 225.376 776.576 223.04 775.904 222.4 772.768 220.384 766.88 216.608 760.384 213.792 753.632 212.096 749.504 211.072 745.408 210.624 741.216 210.272 739.808 210.24 738.432 210.24 737.024 210.208M576.032 576C576.032 592.96 569.28 609.248 557.28 621.248 545.28 633.248 528.992 640 512.032 640 495.04 640 478.784 633.248 466.784 621.248 454.784 609.248 448.032 592.96 448.032 576L448.032 128C448.032 111.008 454.784 94.752 466.784 82.72 478.784 70.72 495.04 64 512.032 64 528.992 64 545.28 70.72 557.28 82.72 569.28 94.752 576.032 111.008 576.032 128L576.032 576Z"  ></path></symbol><symbol id="icon-github" viewBox="0 0 1024 1024"><path d="M512 42.666667A464.64 464.64 0 0 0 42.666667 502.186667 460.373333 460.373333 0 0 0 363.52 938.666667c23.466667 4.266667 32-9.813333 32-22.186667v-78.08c-130.56 27.733333-158.293333-61.44-158.293333-61.44a122.026667 122.026667 0 0 0-52.053334-67.413333c-42.666667-28.16 3.413333-27.733333 3.413334-27.733334a98.56 98.56 0 0 1 71.68 47.36 101.12 101.12 0 0 0 136.533333 37.973334 99.413333 99.413333 0 0 1 29.866667-61.44c-104.106667-11.52-213.333333-50.773333-213.333334-226.986667a177.066667 177.066667 0 0 1 47.36-124.16 161.28 161.28 0 0 1 4.693334-121.173333s39.68-12.373333 128 46.933333a455.68 455.68 0 0 1 234.666666 0c89.6-59.306667 128-46.933333 128-46.933333a161.28 161.28 0 0 1 4.693334 121.173333A177.066667 177.066667 0 0 1 810.666667 477.866667c0 176.64-110.08 215.466667-213.333334 226.986666a106.666667 106.666667 0 0 1 32 85.333334v125.866666c0 14.933333 8.533333 26.88 32 22.186667A460.8 460.8 0 0 0 981.333333 502.186667 464.64 464.64 0 0 0 512 42.666667" fill="#231F20" ></path></symbol></svg>',function(n){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var o,i,c,l,d,a=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}o=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_4125778,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?a(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(o,0):(i=function(){document.removeEventListener("DOMContentLoaded",i,!1),o()},document.addEventListener("DOMContentLoaded",i,!1)):document.attachEvent&&(c=o,l=n.document,d=!1,r(),l.onreadystatechange=function(){"complete"==l.readyState&&(l.onreadystatechange=null,s())})}function s(){d||(d=!0,c())}function r(){try{l.documentElement.doScroll("left")}catch(t){return void setTimeout(r,50)}s()}}(window);
\ No newline at end of file
+window._iconfont_svg_string_4125778='<svg><symbol id="icon-home" viewBox="0 0 1024 1024"><path d="M958.400956 451.54921c-0.058328-5.760191-2.597151-11.215436-6.965645-14.97097L524.345166 69.511143c-7.498788-6.445806-18.581194-6.445806-26.079982 0L309.582871 231.6755l0-102.017488c0-11.04966-8.901741-19.532869-19.951401-19.532869l-88.034009 0c-11.048637 0-19.928888 8.482185-19.928888 19.532869l0 211.954343L71.176063 436.57824c-4.423753 3.800559-6.967692 9.341762-6.967692 15.173584l0 105.500822c0 7.819083 4.554736 14.921851 11.660574 18.183128 2.670829 1.226944 5.51562 1.824555 8.343015 1.824555 4.699022 0 9.346879-1.654686 13.048177-4.836145l53.29788-45.825698 0 324.100516c0 60.677964 49.364291 110.042255 110.042255 110.042255L764.792447 960.741257c60.677964 0 110.042255-49.364291 110.042255-110.042255L874.834702 527.026228l51.585889 44.335764c5.955642 5.119601 14.356986 6.282077 21.481244 2.965541 7.122211-3.313465 11.645225-10.488889 11.565407-18.342764L958.400956 451.54921zM221.578538 150.034085l48.095391 0 0 115.941616-48.095391 41.336454L221.578538 150.034085zM570.718333 920.725892 436.666244 920.725892 436.666244 700.642404c0-11.031241 8.976442-20.007683 20.007683-20.007683l94.0357 0c11.031241 0 20.007683 8.976442 20.007683 20.007683L570.71731 920.725892zM834.818313 495.895207l0 354.803795c0 38.612413-31.414477 70.02689-70.02689 70.02689l-154.058748 0L610.732675 700.642404c0-33.096792-26.926256-60.023048-60.023048-60.023048l-94.0357 0c-33.096792 0-60.023048 26.926256-60.023048 60.023048l0 220.084511L260.59925 920.726915c-38.612413 0-70.02689-31.414477-70.02689-70.02689L190.57236 495.895207c0-1.172709-0.121773-2.314719-0.315178-3.432169l322.113255-276.958846 322.70268 277.348726C834.921667 493.848595 834.818313 494.858598 834.818313 495.895207zM525.411451 173.947727c-7.502881-6.445806-18.587334-6.446829-26.086122 0.00307L104.223736 513.663896l0-52.726875 407.081439-349.870436 407.176606 349.9523 0.521886 51.205219L525.411451 173.947727z" fill="#272636" ></path></symbol><symbol id="icon-menu" viewBox="0 0 1024 1024"><path d="M411.4 112H202c-50.3 0-87.9 37.2-87.9 80.6v206.7c0 45.5 37.7 82.7 83.8 82.7h213.6c46.1 0 83.8-37.2 83.8-82.7V192.6c-4.3-43.4-42-80.6-83.9-80.6zM828.2 112H618.8c-46.1 0-83.8 37.2-83.8 80.6v206.7c0 45.5 37.7 82.7 83.8 82.7h209.4c46.1 0 83.8-37.2 83.8-82.7V192.6c2-43.4-35.7-80.6-83.8-80.6zM405.9 539.9H196.5c-50.3 0-87.9 37.2-87.9 80.6v206.7c0 45.5 37.7 82.7 83.8 82.7H406c46.1 0 83.8-37.2 83.8-82.7V620.5c-4.3-43.4-42-80.6-83.9-80.6zM827.8 539.9H618.4c-46.1 0-83.8 37.2-83.8 80.6v206.7c0 45.5 37.7 82.7 83.8 82.7h209.4c46.1 0 83.8-37.2 83.8-82.7V620.5c2-43.4-35.7-80.6-83.8-80.6z"  ></path></symbol><symbol id="icon-log" viewBox="0 0 1024 1024"><path d="M346.396444 310.840889c18.375111 0 33.223111-14.848 33.223111-33.223111L379.619556 144.611556c0-18.375111-14.904889-33.223111-33.223111-33.223111-18.375111 0-33.223111 14.848-33.223111 33.223111l0 132.949333C313.173333 295.992889 328.021333 310.840889 346.396444 310.840889zM512.568889 310.840889c18.375111 0 33.223111-14.848 33.223111-33.223111L545.792 144.611556c0-18.375111-14.848-33.223111-33.223111-33.223111-18.375111 0-33.223111 14.904889-33.223111 33.223111l0 132.949333C479.345778 295.992889 494.250667 310.840889 512.568889 310.840889zM412.899556 175.104l33.223111 0 0 66.446222-33.223111 0 0-66.446222ZM579.128889 175.104l33.223111 0 0 66.446222-33.223111 0 0-66.446222ZM911.36 811.121778l0-539.875556c0.113778-55.125333-44.657778-99.726222-99.669333-99.726222L745.244444 171.52l0 66.446222 66.446222 0c18.318222 0 33.336889 14.904889 33.336889 33.223111l0 539.932444c0 18.318222-15.018667 33.28-33.336889 33.28L213.447111 844.401778c-18.261333 0-33.223111-14.961778-33.223111-33.28L179.712 811.121778l0.512-539.875556c0-18.318222 14.904889-33.223111 33.223111-33.223111L279.893333 238.023111 279.893333 171.52 213.447111 171.52C158.435556 171.52 113.777778 216.120889 113.777778 271.246222l0 539.875556c0 55.239111 44.657778 99.726222 99.669333 99.726222l598.243556 0c53.418667 0 96.654222-41.927111 99.271111-94.776889 0.056889-0.284444 0.398222-0.625778 0.398222-0.910222l0-2.958222c0-0.398222 0.113778-0.739556 0.113778-1.137778L911.36 811.064889zM678.798222 310.840889c18.318222 0 33.223111-14.848 33.223111-33.223111L712.021333 144.611556c0-18.375111-14.904889-33.223111-33.223111-33.223111s-33.223111 14.848-33.223111 33.223111l0 132.949333C645.575111 295.992889 660.309333 310.840889 678.798222 310.840889zM312.604444 444.302222l398.848 0c18.204444 0 33.223111-14.904889 33.223111-33.223111 0-18.375111-15.018667-33.223111-33.223111-33.223111L312.604444 377.856c-18.375111 0-33.223111 14.848-33.223111 33.223111C279.381333 429.397333 294.229333 444.302222 312.604444 444.302222zM711.452444 541.866667 312.604444 541.866667c-18.375111 0-33.223111 14.904889-33.223111 33.223111s14.848 33.223111 33.223111 33.223111l398.848 0c18.204444 0 33.223111-14.904889 33.223111-33.223111S729.656889 541.866667 711.452444 541.866667zM711.452444 712.305778 312.604444 712.305778c-18.375111 0-33.223111 14.904889-33.223111 33.109333 0 18.375111 14.848 33.336889 33.223111 33.336889l398.848 0c18.204444 0 33.223111-14.961778 33.223111-33.336889C744.675556 727.153778 729.656889 712.305778 711.452444 712.305778z" fill="#272636" ></path></symbol><symbol id="icon-user-fill" viewBox="0 0 1024 1024"><path d="M512 512c123.776 0 224-100.224 224-224S635.776 64 512 64a223.936 223.936 0 0 0-224 224C288 411.776 388.224 512 512 512z m0 64c-149.504 0-448 85.76-448 256v128h896v-128c0-170.24-298.496-256-448-256z" fill="#262626" ></path></symbol><symbol id="icon-user-circle" viewBox="0 0 1024 1024"><path d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024z m-292.544-232.064s585.088 0 585.088 1.472V637.696C804.544 553.856 609.536 512 512 512c-97.536 0-292.544 41.92-292.544 125.696v154.24zM512 438.848a146.304 146.304 0 1 0 0-292.544 146.304 146.304 0 0 0 0 292.544z" fill="#262626" ></path></symbol><symbol id="icon-chart" viewBox="0 0 1252 1024"><path d="M231.129872 561.565957H33.639489a32.757106 32.757106 0 0 0-32.822468 32.844256v395.634383A32.757106 32.757106 0 0 0 33.639489 1022.910638h197.501277a32.757106 32.757106 0 0 0 32.811574-32.855149V594.410213c0.27234-18.344851-14.488511-32.855149-32.822468-32.855149z m-32.822468 395.351149H66.472851v-329.640851h131.834553v329.640851zM560.465702 363.607149h-197.501276a32.757106 32.757106 0 0 0-32.811575 32.855149v593.309957a32.757106 32.757106 0 0 0 32.822468 32.855149h197.490383a32.757106 32.757106 0 0 0 32.822468-32.855149v-593.04851a32.64817 32.64817 0 0 0-32.822468-33.116596z m-32.822468 593.309957H395.797787V429.589787h131.845447v527.327319zM889.790638 495.572426H692.300255a32.757106 32.757106 0 0 0-32.822468 32.855148v461.344681a32.757106 32.757106 0 0 0 32.822468 32.855149h197.501277a32.757106 32.757106 0 0 0 32.811574-32.855149v-461.344681a32.757106 32.757106 0 0 0-32.822468-32.855148z m-32.822468 461.34468H725.122723V561.565957h131.845447v395.362043zM1219.126468 231.903319h-197.501277a32.757106 32.757106 0 0 0-32.811574 32.855149v725.013787a32.757106 32.757106 0 0 0 32.822468 32.855149h197.490383a32.757106 32.757106 0 0 0 32.822468-32.855149V264.758468a32.931404 32.931404 0 0 0-32.822468-32.855149z m-32.833362 725.013787H1054.458553V297.613617h131.834553v659.303489z" fill="#2E323F" ></path><path d="M132.390128 429.589787c6.557957 0 13.126809-1.917277 18.867744-6.02417l313.19149-219.310298 311.557447 158.523915c12.037447 6.296511 26.798298 4.106894 36.929361-4.923915L1142.522553 58.313532c13.399149-12.309787 14.488511-33.116596 2.178724-46.537532-12.298894-13.420936-33.083915-14.510298-46.493958-2.189617l-312.646808 284.192681L476.486809 136.627745a32.953191 32.953191 0 0 0-33.91183 2.461957L113.511489 369.620426c-15.033191 10.414298-18.595404 30.937872-8.202893 46.003744a33.443404 33.443404 0 0 0 27.081532 13.965617z" fill="#2E323F" ></path></symbol><symbol id="icon-wechat" viewBox="0 0 1170 1024"><path d="M331.429 263.429q0-23.429-14.286-37.715t-37.714-14.285q-24.572 0-43.429 14.571t-18.857 37.429q0 22.285 18.857 36.857t43.429 14.571q23.428 0 37.714-14t14.286-37.428zM756 553.143q0-16-14.571-28.572T704 512q-15.429 0-28.286 12.857t-12.857 28.286q0 16 12.857 28.857T704 594.857q22.857 0 37.429-12.571T756 553.143zM621.143 263.429q0-23.429-14-37.715t-37.429-14.285q-24.571 0-43.428 14.571t-18.857 37.429q0 22.285 18.857 36.857t43.428 14.571q23.429 0 37.429-14t14-37.428zM984 553.143q0-16-14.857-28.572T932 512q-15.429 0-28.286 12.857t-12.857 28.286q0 16 12.857 28.857T932 594.857q22.286 0 37.143-12.571T984 553.143zM832 326.286Q814.286 324 792 324q-96.571 0-177.714 44T486.57 487.143 440 651.429q0 44.571 13.143 86.857-20 1.714-38.857 1.714-14.857 0-28.572-0.857t-31.428-3.714-25.429-4-31.143-6-28.571-6L124.57 792l41.143-124.571Q0 551.429 0 387.429q0-96.572 55.714-177.715T206.571 82t207.715-46.571q100.571 0 190 37.714T754 177.429t78 148.857z m338.286 320.571q0 66.857-39.143 127.714t-106 110.572l31.428 103.428-113.714-62.285q-85.714 21.143-124.571 21.143-96.572 0-177.715-40.286T512.857 797.714t-46.571-150.857T512.857 496t127.714-109.429 177.715-40.285q92 0 173.143 40.285t130 109.715 48.857 150.571z" fill="#0e932e" ></path></symbol><symbol id="icon-config" viewBox="0 0 1024 1024"><path d="M512 298.705455a212.014545 212.014545 0 0 0-150.900364 62.487272 212.014545 212.014545 0 0 0-62.510545 150.900364 212.014545 212.014545 0 0 0 62.510545 150.900364A212.014545 212.014545 0 0 0 512 725.504a212.014545 212.014545 0 0 0 150.900364-62.510545 212.014545 212.014545 0 0 0 62.510545-150.900364 212.014545 212.014545 0 0 0-62.510545-150.900364A212.014545 212.014545 0 0 0 512 298.705455z m0 362.58909A149.504 149.504 0 0 1 362.705455 512 149.504 149.504 0 0 1 512 362.705455 149.504 149.504 0 0 1 661.294545 512 149.504 149.504 0 0 1 512 661.294545z m448-57.297454v-183.994182l-105.099636-30.603636c-4.002909-11.194182-8.610909-22.295273-13.800728-33.093818l52.712728-96-130.094546-130.094546-95.906909 52.596364a371.432727 371.432727 0 0 0-33.303273-13.917091l-30.487272-104.890182h-184.017455l-30.487273 104.890182c-11.310545 4.119273-22.504727 8.704-33.326545 13.917091l-95.883636-52.596364-130.094546 130.094546 52.689455 96.116363a371.432727 371.432727 0 0 0-13.893819 33.28L64 419.909818v183.994182l105.192727 30.906182c4.096 11.170909 8.704 22.295273 13.800728 33.093818L130.094545 763.694545l130.094546 130.094546 96.209454-52.48c10.891636 5.189818 21.992727 9.774545 33.28 13.800727l30.324364 104.890182h183.994182l30.813091-105.006545c11.287273-4.096 22.481455-8.704 33.28-13.893819l95.604363 52.805819 130.094546-130.094546-52.596364-96.302545c5.12-10.705455 9.611636-21.713455 13.707637-32.907637l105.099636-30.603636z m-124.695273-22.993455h-20.712727l-6.493091 21.294546a311.156364 311.156364 0 0 1-22.900364 55.109818l-10.496 19.688727 15.290182 15.313455 35.304728 64.581818-68.305455 68.119273-65.792-36.305455-14.103273-14.010182-19.688727 10.496a308.596364 308.596364 0 0 1-55.109818 22.900364l-21.410909 6.516364v21.410909l-20.689455 70.586182H463.825455l-20.805819-72.215273v-19.781818l-21.410909-6.516364a308.596364 308.596364 0 0 1-55.086545-22.900364l-19.781818-10.589091-15.127273 15.290182-64.581818 35.211637-68.119273-68.096 36.305455-65.815273 14.103272-14.103273-10.496-19.688727a305.570909 305.570909 0 0 1-22.900363-55.109818l-6.516364-21.294546h-21.480727l-70.609455-20.712727v-96.372364l72.215273-20.805818h19.898182l6.493091-21.294545c5.701818-18.804364 13.498182-37.306182 22.900363-55.109818l10.496-19.712-14.708363-14.685091-35.700364-65.396364 68.119273-68.119273 65.186909 35.816728 14.615273 14.592 19.688727-10.496a301.428364 301.428364 0 0 1 55.109818-22.900364l21.410909-6.516364v-20.48l20.782546-71.400727h96.395636l20.805818 71.400727v20.48l21.410909 6.516364a305.570909 305.570909 0 0 1 55.086546 22.900364l19.898181 10.58909 14.49891-14.801454 65.093818-35.700364 68.119272 68.119273-35.816727 65.186909-14.685091 14.708364 10.472728 19.688727c9.425455 17.687273 17.128727 36.212364 22.923636 55.109818l6.516364 21.294546h20.689454l71.400727 20.805818v96.395636l-71.307636 20.805818z" fill="#333333" ></path></symbol><symbol id="icon-api-key" viewBox="0 0 1024 1024"><path d="M739.552 418.992c0-0.464 0.128-0.896 0.128-1.36v-100.688a236.8 236.8 0 1 0-473.6 0v100.688a23.008 23.008 0 0 0 0.352 3.504 132.608 132.608 0 0 0-106.992 129.904v260.368a132.576 132.576 0 0 0 132.432 132.432h440.224a132.576 132.576 0 0 0 132.416-132.432V551.04a132.464 132.464 0 0 0-124.96-132.048z m-425.456-102.048a188.8 188.8 0 1 1 377.6 0v100.688c0 0.336 0 0.656 0.096 0.992H313.984c0-0.336 0.112-0.656 0.112-0.992z m502.4 494.4a84.512 84.512 0 0 1-84.416 84.432H291.888a84.528 84.528 0 0 1-84.432-84.432V550.976a84.528 84.528 0 0 1 84.432-84.416h440.224a84.512 84.512 0 0 1 84.416 84.416z" fill="#666666" ></path><path d="M513.968 603.792a96.4 96.4 0 1 0 96.384 96.384 96.48 96.48 0 0 0-96.384-96.384z m0 144.784a48.4 48.4 0 1 1 48.384-48.4 48.448 48.448 0 0 1-48.384 48.4z" fill="#1771B9" ></path></symbol><symbol id="icon-role" viewBox="0 0 1024 1024"><path d="M790.428235 135.737598a111.649932 111.649932 0 0 0-38.630577 6.852356 248.293464 248.293464 0 0 1-24.355778 197.499109 111.884176 111.884176 0 1 0 62.986355-204.351465zM983.741988 630.85697l-59.266666-225.958397a45.274088 45.274088 0 0 0-65.004243-28.724577 147.224043 147.224043 0 0 1-138.573932 0.615244 45.155555 45.155555 0 0 0-59.379555 16.425333 123.692354 123.692354 0 0 1 13.998222-0.835378 128.024465 128.024465 0 0 1 123.638732 95.664866l52.397377 199.768175H939.799989a45.429311 45.429311 0 0 0 43.941999-56.955266zM233.569931 135.737598a111.649932 111.649932 0 0 1 38.633399 6.852356 248.290641 248.290641 0 0 0 24.355778 197.499109A111.884176 111.884176 0 1 1 233.567108 135.740421zM40.256177 630.85697l59.266666-225.958397a45.274088 45.274088 0 0 1 65.007066-28.724577 147.224043 147.224043 0 0 0 138.57111 0.615244 45.155555 45.155555 0 0 1 59.379554 16.425333 123.692354 123.692354 0 0 0-13.995399-0.835378 128.024465 128.024465 0 0 0-123.641554 95.664866l-52.394555 199.768175h-88.250888a45.429311 45.429311 0 0 1-43.942-56.955266z" fill="#231815" ></path><path d="M513.571061 213.563197m-203.411665 0a203.411664 203.411664 0 1 0 406.823329 0 203.411664 203.411664 0 1 0-406.823329 0Z" fill="#231815" ></path><path d="M865.02239 910.2993l-107.749621-410.799839c-13.464822-51.336222-71.509466-77.486932-118.183377-52.2224a267.65673 267.65673 0 0 1-251.931308 1.120423c-46.682377-24.731133-104.252888 1.391356-117.652798 52.493332l-107.385555 409.408484a82.592332 82.592332 0 0 0 79.888644 103.547332h543.125371a82.592332 82.592332 0 0 0 79.888644-103.547332zM651.679326 550.446216l-96.977199 65.275177a9.462911 9.462911 0 0 0-2.215445 13.620044l14.777156 19.213689a9.462911 9.462911 0 0 1 0.200377 11.271955l-18.525066 25.936222a9.462911 9.462911 0 0 0-1.433689 7.964311l40.400111 149.724531a9.462911 9.462911 0 0 1-1.865489 8.523111l-65.198977 78.237644a9.462911 9.462911 0 0 1-14.540089 0l-65.198977-78.237644a9.462911 9.462911 0 0 1-1.865489-8.523111l40.400111-149.724531a9.462911 9.462911 0 0 0-1.436511-7.967133l-18.522244-25.936222a9.462911 9.462911 0 0 1 0.197555-11.269133l14.779978-19.213689a9.462911 9.462911 0 0 0-2.215445-13.620044l-96.980021-65.275177a9.462911 9.462911 0 0 1 8.681156-16.684978l126.031976 48.474488a9.460089 9.460089 0 0 0 6.795911 0l126.029154-48.474488a9.462911 9.462911 0 0 1 8.681156 16.684978z" fill="#231815" ></path></symbol><symbol id="icon-dashboard" viewBox="0 0 1024 1024"><path d="M217.6 659.2c0-19.2-6.4-38.4-19.2-51.2s-32-25.6-51.2-25.6c-19.2 0-38.4 12.8-51.2 25.6-12.8 12.8-25.6 32-25.6 51.2 0 19.2 6.4 38.4 19.2 51.2s32 19.2 51.2 19.2c19.2 0 38.4-6.4 51.2-19.2s25.6-32 25.6-51.2z m108.8-256c0-19.2-6.4-38.4-19.2-51.2s-32-25.6-51.2-25.6c-19.2 0-38.4 6.4-51.2 19.2s-19.2 38.4-19.2 57.6c0 19.2 6.4 38.4 19.2 51.2 12.8 12.8 32 19.2 51.2 19.2 19.2 0 38.4-6.4 51.2-19.2s19.2-32 19.2-51.2zM576 678.4l57.6-217.6c0-12.8 0-19.2-6.4-25.6-6.4-12.8-12.8-19.2-19.2-19.2H576c-6.4 6.4-12.8 12.8-12.8 25.6l-57.6 217.6c-25.6 0-44.8 12.8-64 25.6-19.2 12.8-32 32-38.4 57.6-6.4 32-6.4 57.6 12.8 83.2 12.8 25.6 38.4 44.8 64 51.2s57.6 6.4 83.2-12.8c25.6-12.8 44.8-38.4 51.2-64 6.4-25.6 6.4-44.8-6.4-64 0-25.6-12.8-44.8-32-57.6z m377.6-19.2c0-19.2-6.4-38.4-19.2-51.2-12.8-12.8-32-19.2-51.2-19.2-19.2 0-38.4 6.4-51.2 19.2-12.8 12.8-19.2 32-19.2 51.2 0 19.2 6.4 38.4 19.2 51.2 12.8 12.8 32 19.2 51.2 19.2 19.2 0 38.4-6.4 51.2-19.2 6.4-12.8 19.2-32 19.2-51.2zM582.4 294.4c0-19.2-6.4-38.4-19.2-51.2-12.8-19.2-32-25.6-51.2-25.6-19.2 0-38.4 6.4-51.2 19.2-12.8 19.2-19.2 38.4-19.2 57.6 0 19.2 6.4 38.4 19.2 51.2 12.8 12.8 32 19.2 51.2 19.2 19.2 0 38.4-6.4 51.2-19.2 12.8-12.8 19.2-32 19.2-51.2z m256 108.8c0-19.2-6.4-38.4-19.2-51.2-12.8-12.8-32-19.2-51.2-19.2-19.2 0-38.4 6.4-51.2 19.2-12.8 12.8-19.2 32-19.2 51.2 0 19.2 6.4 38.4 19.2 51.2 12.8 12.8 32 19.2 51.2 19.2 19.2 0 38.4-6.4 51.2-19.2 12.8-12.8 19.2-32 19.2-51.2z m185.6 256c0 102.4-25.6 192-83.2 275.2-6.4 12.8-19.2 19.2-32 19.2H108.8c-12.8 0-25.6-6.4-32-19.2C25.6 851.2 0 755.2 0 659.2c0-70.4 12.8-134.4 38.4-198.4s64-115.2 108.8-166.4 102.4-83.2 166.4-108.8 128-38.4 198.4-38.4 134.4 12.8 198.4 38.4 115.2 64 166.4 108.8c44.8 44.8 83.2 102.4 108.8 166.4 25.6 64 38.4 128 38.4 198.4z" fill="#409EFF" ></path></symbol><symbol id="icon-password" viewBox="0 0 1024 1024"><path d="M813.431725 388.476709l0-95.606475c0-153.48058-131.225717-277.965779-293.173133-277.965779-161.944346 0-293.170063 124.484176-293.170063 277.965779l0 94.015234c-71.494311 4.897543-127.878482 61.447491-127.878482 130.494053l0 359.726921c0 72.216765 61.756529 130.796952 137.960095 130.796952l552.494273 0c76.203566 0 137.960095-58.580187 137.960095-130.796952L927.624511 517.379521C927.624511 452.80276 878.305245 399.159002 813.431725 388.476709zM581.427744 723.688283l0 121.141034L477.951021 844.829318l0-119.194706c-34.651194-17.092283-58.304917-51.442626-58.304917-91.036389 0-56.644091 48.39522-102.558817 108.159372-102.558817 59.765175 0 108.162442 45.913703 108.162442 102.558817C635.967918 672.739914 614.016976 706.019879 581.427744 723.688283zM720.466404 386.535497 319.028499 386.535497l0-76.632331c0-105.090477 89.839121-190.349279 200.74607-190.349279 110.797455 0 200.690812 85.258803 200.690812 190.349279L720.46538 386.535497z"  ></path></symbol><symbol id="icon-send" viewBox="0 0 1024 1024"><path d="M0 1024l106.496-474.112 588.8-36.864-588.8-39.936L0 0l1024 512z" fill="" ></path></symbol><symbol id="icon-logout" viewBox="0 0 1024 1024"><path d="M737.024 210.208C733.312 210.4 732.352 210.336 728.672 210.88 721.76 211.936 715.04 214.08 708.832 217.28 702.624 220.48 696.96 224.704 692.096 229.728 688.224 233.728 684.864 238.272 682.144 243.136 673.984 257.888 671.936 275.616 676.576 291.808 678.88 299.872 682.784 307.456 688 314.016 690.336 316.928 691.04 317.536 693.632 320.224L696.736 323.04C710.592 334.752 723.424 347.552 734.912 361.6 762.88 395.776 782.816 436.224 792.704 479.264 800.704 514.208 802.08 550.624 796.864 586.08 791.456 622.848 778.944 658.496 760.064 690.496 745.408 715.296 727.008 737.792 705.696 757.152 684.992 775.936 661.6 791.744 636.352 803.84 608.96 816.96 579.488 825.664 549.344 829.536 514.976 833.984 479.84 832.192 446.112 824.288 410.912 816.064 377.344 801.184 347.68 780.576 315.712 758.336 288.384 729.536 267.712 696.544 246.464 662.656 232.48 624.352 226.88 584.736 220.704 541.248 224.608 496.48 238.176 454.72 248.672 422.4 264.928 392 286.048 365.344 295.84 352.96 306.72 341.536 318.336 330.848 322.272 327.328 326.272 323.936 330.176 320.416 332.768 317.728 333.472 317.12 335.776 314.208 340.992 307.616 344.864 300.032 347.168 291.968 349.44 283.904 350.144 275.392 349.152 267.072 348.352 260.128 346.4 253.344 343.392 247.04 340.416 240.736 336.384 234.912 331.52 229.92 319.776 217.824 303.392 210.752 286.528 210.496 280.96 210.4 275.36 211.072 269.952 212.416 263.168 214.144 256.704 216.96 250.816 220.736 245.6 224.128 240.96 228.352 236.32 232.48 229.696 238.336 223.232 244.416 216.992 250.688 191.424 276.352 169.216 305.408 151.168 336.832 120.32 390.592 101.792 451.168 97.184 512.96 92.544 574.848 101.856 637.6 124.448 695.392 140.288 735.904 162.56 773.824 190.112 807.456 216.672 839.904 248.096 868.352 283.104 891.424 322.496 917.376 366.304 936.48 412.096 947.776 465.472 960.928 521.344 963.424 575.68 955.072 626.08 947.328 674.944 930.24 719.136 904.832 760.352 881.12 797.504 850.304 828.384 814.176 853.92 784.32 875.168 750.848 891.296 715.04 922.816 644.96 934.368 566.432 924.544 490.272 918.688 444.96 905.312 400.672 885.056 359.712 868.288 325.824 846.88 294.24 821.6 266.112 811.488 254.848 800.736 244.224 789.504 234.048 786.208 231.136 782.848 228.224 779.488 225.376 776.576 223.04 775.904 222.4 772.768 220.384 766.88 216.608 760.384 213.792 753.632 212.096 749.504 211.072 745.408 210.624 741.216 210.272 739.808 210.24 738.432 210.24 737.024 210.208M576.032 576C576.032 592.96 569.28 609.248 557.28 621.248 545.28 633.248 528.992 640 512.032 640 495.04 640 478.784 633.248 466.784 621.248 454.784 609.248 448.032 592.96 448.032 576L448.032 128C448.032 111.008 454.784 94.752 466.784 82.72 478.784 70.72 495.04 64 512.032 64 528.992 64 545.28 70.72 557.28 82.72 569.28 94.752 576.032 111.008 576.032 128L576.032 576Z"  ></path></symbol><symbol id="icon-github" viewBox="0 0 1024 1024"><path d="M512 42.666667A464.64 464.64 0 0 0 42.666667 502.186667 460.373333 460.373333 0 0 0 363.52 938.666667c23.466667 4.266667 32-9.813333 32-22.186667v-78.08c-130.56 27.733333-158.293333-61.44-158.293333-61.44a122.026667 122.026667 0 0 0-52.053334-67.413333c-42.666667-28.16 3.413333-27.733333 3.413334-27.733334a98.56 98.56 0 0 1 71.68 47.36 101.12 101.12 0 0 0 136.533333 37.973334 99.413333 99.413333 0 0 1 29.866667-61.44c-104.106667-11.52-213.333333-50.773333-213.333334-226.986667a177.066667 177.066667 0 0 1 47.36-124.16 161.28 161.28 0 0 1 4.693334-121.173333s39.68-12.373333 128 46.933333a455.68 455.68 0 0 1 234.666666 0c89.6-59.306667 128-46.933333 128-46.933333a161.28 161.28 0 0 1 4.693334 121.173333A177.066667 177.066667 0 0 1 810.666667 477.866667c0 176.64-110.08 215.466667-213.333334 226.986666a106.666667 106.666667 0 0 1 32 85.333334v125.866666c0 14.933333 8.533333 26.88 32 22.186667A460.8 460.8 0 0 0 981.333333 502.186667 464.64 464.64 0 0 0 512 42.666667" fill="#231F20" ></path></symbol></svg>',function(t){var l=(l=document.getElementsByTagName("script"))[l.length-1],c=l.getAttribute("data-injectcss"),l=l.getAttribute("data-disable-injectsvg");if(!l){var a,e,o,i,n,s=function(l,c){c.parentNode.insertBefore(l,c)};if(c&&!t.__iconfont__svg__cssinject__){t.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(l){console&&console.log(l)}}a=function(){var l,c=document.createElement("div");c.innerHTML=t._iconfont_svg_string_4125778,(c=c.getElementsByTagName("svg")[0])&&(c.setAttribute("aria-hidden","true"),c.style.position="absolute",c.style.width=0,c.style.height=0,c.style.overflow="hidden",c=c,(l=document.body).firstChild?s(c,l.firstChild):l.appendChild(c))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(a,0):(e=function(){document.removeEventListener("DOMContentLoaded",e,!1),a()},document.addEventListener("DOMContentLoaded",e,!1)):document.attachEvent&&(o=a,i=t.document,n=!1,h(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,d())})}function d(){n||(n=!0,o())}function h(){try{i.documentElement.doScroll("left")}catch(l){return void setTimeout(h,50)}d()}}(window);
\ No newline at end of file
diff --git a/web/src/assets/iconfont/iconfont.js:Zone.Identifier b/web/src/assets/iconfont/iconfont.js:Zone.Identifier
deleted file mode 100644
index df2640e1..00000000
--- a/web/src/assets/iconfont/iconfont.js:Zone.Identifier
+++ /dev/null
@@ -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
diff --git a/web/src/assets/iconfont/iconfont.json b/web/src/assets/iconfont/iconfont.json
index e3d0c29c..e73613e4 100644
--- a/web/src/assets/iconfont/iconfont.json
+++ b/web/src/assets/iconfont/iconfont.json
@@ -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": "密码",
diff --git a/web/src/assets/iconfont/iconfont.ttf b/web/src/assets/iconfont/iconfont.ttf
index 6b860991..13c4338a 100644
Binary files a/web/src/assets/iconfont/iconfont.ttf and b/web/src/assets/iconfont/iconfont.ttf differ
diff --git a/web/src/assets/iconfont/iconfont.woff b/web/src/assets/iconfont/iconfont.woff
index 9988cbfd..2b908ad3 100644
Binary files a/web/src/assets/iconfont/iconfont.woff and b/web/src/assets/iconfont/iconfont.woff differ
diff --git a/web/src/assets/iconfont/iconfont.woff2 b/web/src/assets/iconfont/iconfont.woff2
index cfd18dab..44724d87 100644
Binary files a/web/src/assets/iconfont/iconfont.woff2 and b/web/src/assets/iconfont/iconfont.woff2 differ
diff --git a/web/src/assets/img/avatar.jpg b/web/src/assets/img/avatar.jpg
new file mode 100644
index 00000000..580598a1
Binary files /dev/null and b/web/src/assets/img/avatar.jpg differ
diff --git a/web/src/components/ConfigDialog.vue b/web/src/components/ConfigDialog.vue
index 9a80c7f7..5626e5db 100644
--- a/web/src/components/ConfigDialog.vue
+++ b/web/src/components/ConfigDialog.vue
@@ -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) {
diff --git a/web/src/components/PasswordDialog.vue b/web/src/components/PasswordDialog.vue
index fd61e887..7b20e0d3 100644
--- a/web/src/components/PasswordDialog.vue
+++ b/web/src/components/PasswordDialog.vue
@@ -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) {
diff --git a/web/src/components/admin/AdminHeader.vue b/web/src/components/admin/AdminHeader.vue
new file mode 100644
index 00000000..0c964e5a
--- /dev/null
+++ b/web/src/components/admin/AdminHeader.vue
@@ -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>
diff --git a/web/src/components/admin/AdminSidebar.vue b/web/src/components/admin/AdminSidebar.vue
new file mode 100644
index 00000000..61298b3c
--- /dev/null
+++ b/web/src/components/admin/AdminSidebar.vue
@@ -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>
diff --git a/web/src/components/admin/AdminTags.vue b/web/src/components/admin/AdminTags.vue
new file mode 100644
index 00000000..00b79cf2
--- /dev/null
+++ b/web/src/components/admin/AdminTags.vue
@@ -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>
diff --git a/web/src/main.js b/web/src/main.js
index 18787504..67456354 100644
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -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')
 
 
diff --git a/web/src/store/sidebar.js b/web/src/store/sidebar.js
new file mode 100644
index 00000000..76bb2573
--- /dev/null
+++ b/web/src/store/sidebar.js
@@ -0,0 +1,15 @@
+import {defineStore} from 'pinia';
+
+export const useSidebarStore = defineStore('sidebar', {
+    state: () => {
+        return {
+            collapse: false
+        };
+    },
+    getters: {},
+    actions: {
+        handleCollapse() {
+            this.collapse = !this.collapse;
+        }
+    }
+});
diff --git a/web/src/store/tags.js b/web/src/store/tags.js
new file mode 100644
index 00000000..8887f9b6
--- /dev/null
+++ b/web/src/store/tags.js
@@ -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;
+                }
+            }
+        }
+    }
+});
diff --git a/web/src/views/ChatPlus.vue b/web/src/views/ChatPlus.vue
index f6a000b0..2a48ad87 100644
--- a/web/src/views/ChatPlus.vue
+++ b/web/src/views/ChatPlus.vue
@@ -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%
diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue
index b9a994fc..eff8187d 100644
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -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>
diff --git a/web/src/views/admin/Admin.vue b/web/src/views/admin/Admin.vue
index 80085bfe..05f09325 100644
--- a/web/src/views/admin/Admin.vue
+++ b/web/src/views/admin/Admin.vue
@@ -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>
diff --git a/web/src/views/admin/ApiKey.vue b/web/src/views/admin/ApiKey.vue
index 84279894..d77097c6 100644
--- a/web/src/views/admin/ApiKey.vue
+++ b/web/src/views/admin/ApiKey.vue
@@ -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;
diff --git a/web/src/views/admin/Home.vue b/web/src/views/admin/Home.vue
new file mode 100644
index 00000000..2dab90c1
--- /dev/null
+++ b/web/src/views/admin/Home.vue
@@ -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>
\ No newline at end of file
diff --git a/web/src/views/admin/LoginLog.vue b/web/src/views/admin/LoginLog.vue
index 4e8e38b5..2c6512ab 100644
--- a/web/src/views/admin/LoginLog.vue
+++ b/web/src/views/admin/LoginLog.vue
@@ -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;
diff --git a/web/src/views/admin/RoleList.vue b/web/src/views/admin/RoleList.vue
index d390a448..c6f37779 100644
--- a/web/src/views/admin/RoleList.vue
+++ b/web/src/views/admin/RoleList.vue
@@ -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;
diff --git a/web/src/views/admin/Welcome.vue b/web/src/views/admin/Welcome.vue
index daecaace..866f43e4 100644
--- a/web/src/views/admin/Welcome.vue
+++ b/web/src/views/admin/Welcome.vue
@@ -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%;
diff --git a/web/src/views/admin/demo/Editor.vue b/web/src/views/admin/demo/Editor.vue
new file mode 100644
index 00000000..5f1b4f66
--- /dev/null
+++ b/web/src/views/admin/demo/Editor.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="container">
+    <div class="plugins-tips">
+      md-editor-v3：vue3版本的 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>
diff --git a/web/src/views/admin/demo/Form.vue b/web/src/views/admin/demo/Form.vue
new file mode 100644
index 00000000..3ccd0526
--- /dev/null
+++ b/web/src/views/admin/demo/Form.vue
@@ -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>
diff --git a/web/src/views/admin/demo/Import.vue b/web/src/views/admin/demo/Import.vue
new file mode 100644
index 00000000..2c40a1cf
--- /dev/null
+++ b/web/src/views/admin/demo/Import.vue
@@ -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>
diff --git a/web/src/views/admin/demo/Table.vue b/web/src/views/admin/demo/Table.vue
new file mode 100644
index 00000000..32b26f30
--- /dev/null
+++ b/web/src/views/admin/demo/Table.vue
@@ -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>