diff --git a/web/package-lock.json b/web/package-lock.json
index 4b3bfc65..652fb19a 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -24,14 +24,16 @@
         "markdown-it-mathjax": "^2.0.0",
         "markmap-common": "^0.16.0",
         "markmap-lib": "^0.16.1",
+        "markmap-toolbar": "^0.17.0",
         "markmap-view": "^0.16.0",
         "md-editor-v3": "^2.2.1",
+        "mitt": "^3.0.1",
         "pinia": "^2.1.4",
         "qrcode": "^1.5.3",
         "qs": "^6.11.1",
         "sortablejs": "^1.15.0",
         "three": "^0.128.0",
-        "v3-waterfall": "^1.2.1",
+        "v3-waterfall": "^1.3.3",
         "vant": "^4.5.0",
         "vue": "^3.2.13",
         "vue-router": "^4.0.15"
@@ -8335,6 +8337,18 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/markmap-toolbar": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmmirror.com/markmap-toolbar/-/markmap-toolbar-0.17.0.tgz",
+      "integrity": "sha512-zRkg+pYtjDefJ4lSG0KownAN3eqkJcrTei+HbobBWsWTsc7qdUMn2Ewd97SFHCkGoo1nrG0aW7dzDP6lHWuDkw==",
+      "dependencies": {
+        "@babel/runtime": "^7.22.6",
+        "@gera2ld/jsx-dom": "^2.2.2"
+      },
+      "peerDependencies": {
+        "markmap-common": "*"
+      }
+    },
     "node_modules/markmap-view": {
       "version": "0.16.0",
       "resolved": "https://registry.npmmirror.com/markmap-view/-/markmap-view-0.16.0.tgz",
@@ -8592,6 +8606,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
+    },
     "node_modules/mkdirp": {
       "version": "0.5.6",
       "resolved": "https://registry.npmmirror.com/mkdirp/-/mkdirp-0.5.6.tgz",
@@ -11513,9 +11532,9 @@
       }
     },
     "node_modules/v3-waterfall": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmmirror.com/v3-waterfall/-/v3-waterfall-1.2.1.tgz",
-      "integrity": "sha512-zjfT1FuHupsAahvS4mr3Yb8k2SHB8srW6st+/cBXwrsyhbCcj8Qhb1QtNUuEIx/tbpLQrMpxtJunZXkaKBfAEA=="
+      "version": "1.3.3",
+      "resolved": "https://registry.npmmirror.com/v3-waterfall/-/v3-waterfall-1.3.3.tgz",
+      "integrity": "sha512-jUmp0xpHGkEcUxaYKGRtI5b2NvogxI/UrfoCLmpTi0UbQndDdqjwufxJvWwiJjwZQyOIPpnq9ZOFtkBwxchq3Q=="
     },
     "node_modules/v8-compile-cache": {
       "version": "2.3.0",
@@ -19059,6 +19078,15 @@
         }
       }
     },
+    "markmap-toolbar": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmmirror.com/markmap-toolbar/-/markmap-toolbar-0.17.0.tgz",
+      "integrity": "sha512-zRkg+pYtjDefJ4lSG0KownAN3eqkJcrTei+HbobBWsWTsc7qdUMn2Ewd97SFHCkGoo1nrG0aW7dzDP6lHWuDkw==",
+      "requires": {
+        "@babel/runtime": "^7.22.6",
+        "@gera2ld/jsx-dom": "^2.2.2"
+      }
+    },
     "markmap-view": {
       "version": "0.16.0",
       "resolved": "https://registry.npmmirror.com/markmap-view/-/markmap-view-0.16.0.tgz",
@@ -19264,6 +19292,11 @@
         "yallist": "^4.0.0"
       }
     },
+    "mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
+    },
     "mkdirp": {
       "version": "0.5.6",
       "resolved": "https://registry.npmmirror.com/mkdirp/-/mkdirp-0.5.6.tgz",
@@ -21507,9 +21540,9 @@
       "dev": true
     },
     "v3-waterfall": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmmirror.com/v3-waterfall/-/v3-waterfall-1.2.1.tgz",
-      "integrity": "sha512-zjfT1FuHupsAahvS4mr3Yb8k2SHB8srW6st+/cBXwrsyhbCcj8Qhb1QtNUuEIx/tbpLQrMpxtJunZXkaKBfAEA=="
+      "version": "1.3.3",
+      "resolved": "https://registry.npmmirror.com/v3-waterfall/-/v3-waterfall-1.3.3.tgz",
+      "integrity": "sha512-jUmp0xpHGkEcUxaYKGRtI5b2NvogxI/UrfoCLmpTi0UbQndDdqjwufxJvWwiJjwZQyOIPpnq9ZOFtkBwxchq3Q=="
     },
     "v8-compile-cache": {
       "version": "2.3.0",
diff --git a/web/package.json b/web/package.json
index 0ab1234f..dcd7ab6a 100644
--- a/web/package.json
+++ b/web/package.json
@@ -14,7 +14,7 @@
     "compressorjs": "^1.2.1",
     "core-js": "^3.8.3",
     "echarts": "^5.5.0",
-    "element-plus": "^2.3.0",
+    "element-plus": "^2.4.0",
     "good-storage": "^1.1.1",
     "highlight.js": "^11.7.0",
     "json-bigint": "^1.0.0",
diff --git a/web/src/App.vue b/web/src/App.vue
index c57704ea..8349037d 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,12 +1,11 @@
 <template>
-  <el-config-provider :locale="zhCn">
+  <el-config-provider>
     <router-view/>
   </el-config-provider>
 </template>
 
 <script setup>
 import {ElConfigProvider} from 'element-plus';
-import zhCn from 'element-plus/es/locale/lang/zh-cn';
 
 const debounce = (fn, delay) => {
   let timer
diff --git a/web/src/assets/css/chat-app.styl b/web/src/assets/css/chat-app.styl
index a5bc9a8a..2cd29006 100644
--- a/web/src/assets/css/chat-app.styl
+++ b/web/src/assets/css/chat-app.styl
@@ -1,6 +1,6 @@
 .page-apps {
   background-color: #282c34;
-  height 100vh
+  height 100%
 
   .title {
     text-align center
diff --git a/web/src/assets/css/chat-plus.css b/web/src/assets/css/chat-plus.css
index a7376918..85163838 100644
--- a/web/src/assets/css/chat-plus.css
+++ b/web/src/assets/css/chat-plus.css
@@ -1,313 +1,378 @@
 #app {
-  height: 100%;
+    height: 100%;
 }
+
 #app .common-layout {
-  height: 100%;
+    height: 100%;
 }
+
 #app .common-layout .el-aside {
-  background-color: #252526;
+    background-color: #252526;
 }
+
 #app .common-layout .el-aside .title-box {
-  padding: 6px 10px;
-  display: flex;
-  color: #fff;
-  font-size: 20px;
+    padding: 6px 10px;
+    display: flex;
+    color: #fff;
+    font-size: 20px;
 }
+
 #app .common-layout .el-aside .title-box span {
-  padding-top: 5px;
-  padding-left: 10px;
+    padding-top: 5px;
+    padding-left: 10px;
 }
+
 #app .common-layout .el-aside .chat-list {
-  display: flex;
-  flex-flow: column;
-  background-color: #28292a;
-  border-top: 1px solid #2f3032;
-  border-right: 1px solid #2f3032;
+    display: flex;
+    flex-flow: column;
+    background-color: #28292a;
+    border-top: 1px solid #2f3032;
+    border-right: 1px solid #2f3032;
 }
+
 #app .common-layout .el-aside .chat-list .search-box {
-  flex-wrap: wrap;
-  padding: 10px 15px;
+    flex-wrap: wrap;
+    padding: 10px 15px;
 }
+
 #app .common-layout .el-aside .chat-list .search-box .el-input__wrapper {
-  background-color: #363535;
-  box-shadow: none;
+    background-color: #363535;
+    box-shadow: none;
 }
+
 #app .common-layout .el-aside .chat-list ::-webkit-scrollbar {
-  width: 0;
-  height: 0;
-  background-color: transparent;
+    width: 0;
+    height: 0;
+    background-color: transparent;
 }
+
 #app .common-layout .el-aside .chat-list .content {
-  width: 100%;
-  overflow-y: scroll;
+    width: 100%;
+    overflow-y: scroll;
 }
+
 #app .common-layout .el-aside .chat-list .content .chat-list-item {
-  display: flex;
-  width: 100%;
-  justify-content: flex-start;
-  padding: 8px 12px;
-  cursor: pointer;
+    display: flex;
+    width: 100%;
+    justify-content: flex-start;
+    padding: 8px 12px;
+    cursor: pointer;
 }
+
 #app .common-layout .el-aside .chat-list .content .chat-list-item:hover {
-  background-color: #343540;
+    background-color: #343540;
 }
+
 #app .common-layout .el-aside .chat-list .content .chat-list-item .avatar {
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
 }
+
 #app .common-layout .el-aside .chat-list .content .chat-list-item .chat-title-input {
-  font-size: 14px;
-  margin-top: 4px;
-  margin-left: 10px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  width: 190px;
+    font-size: 14px;
+    margin-top: 4px;
+    margin-left: 10px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    width: 190px;
 }
+
 #app .common-layout .el-aside .chat-list .content .chat-list-item .chat-title {
-  color: #c1c1c1;
-  padding: 5px 10px;
-  max-width: 220px;
-  font-size: 14px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+    color: #c1c1c1;
+    padding: 5px 10px;
+    max-width: 220px;
+    font-size: 14px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
+
 #app .common-layout .el-aside .chat-list .content .chat-list-item .btn {
-  display: none;
-  position: absolute;
-  right: 2px;
-  top: 16px;
-  color: #fff;
+    display: none;
+    position: absolute;
+    right: 2px;
+    top: 16px;
+    color: #fff;
 }
+
 #app .common-layout .el-aside .chat-list .content .chat-list-item .btn .el-icon {
-  margin-right: 8px;
+    margin-right: 8px;
 }
+
 #app .common-layout .el-aside .chat-list .content .chat-list-item.active {
-  background-color: #343540;
+    background-color: #343540;
 }
+
 #app .common-layout .el-aside .chat-list .content .chat-list-item.active .btn {
-  display: inline;
+    display: inline;
 }
+
 #app .common-layout .el-aside .tool-box {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  padding: 0 20px 10px 20px;
-  border-top: 1px solid #3c3c3c;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding: 0 20px 10px 20px;
+    border-top: 1px solid #3c3c3c;
 }
+
 #app .common-layout .el-aside .tool-box .user-info {
-  width: 100%;
-  padding-top: 10px;
+    width: 100%;
+    padding-top: 10px;
 }
+
 #app .common-layout .el-aside .tool-box .user-info .el-dropdown-link {
-  width: 100%;
-  cursor: pointer;
-  display: flex;
+    width: 100%;
+    cursor: pointer;
+    display: flex;
 }
+
 #app .common-layout .el-aside .tool-box .user-info .el-dropdown-link .el-image {
-  width: 20px;
-  height: 20px;
-  border-radius: 5px;
+    width: 20px;
+    height: 20px;
+    border-radius: 5px;
 }
+
 #app .common-layout .el-aside .tool-box .user-info .el-dropdown-link .username {
-  display: flex;
-  line-height: 22px;
-  width: 230px;
-  padding-left: 10px;
+    display: flex;
+    line-height: 22px;
+    width: 230px;
+    padding-left: 10px;
 }
+
 #app .common-layout .el-aside .tool-box .user-info .el-dropdown-link .el-icon {
-  color: #ccc;
-  line-height: 24px;
+    color: #ccc;
+    line-height: 24px;
 }
+
 #app .common-layout .el-main {
-  overflow: hidden;
-  --el-main-padding: 0;
-  margin: 0;
+    overflow: hidden;
+    --el-main-padding: 0;
+    margin: 0;
 }
+
 #app .common-layout .el-main .chat-head {
-  width: 100%;
-  height: 50px;
-  background-color: #28292a;
+    width: 100%;
+    height: 50px;
+    background-color: #28292a;
 }
+
 #app .common-layout .el-main .chat-head .chat-config {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  padding-top: 10px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding-top: 10px;
 }
+
 #app .common-layout .el-main .chat-head .chat-config .role-select-label {
-  color: #fff;
+    color: #fff;
 }
+
 #app .common-layout .el-main .chat-head .chat-config .el-select {
-  max-width: 150px;
-  margin-right: 10px;
+    max-width: 150px;
+    margin-right: 10px;
 }
+
 #app .common-layout .el-main .chat-head .chat-config .role-select {
-  max-width: 130px;
+    max-width: 130px;
 }
+
 #app .common-layout .el-main .chat-head .chat-config .el-button .el-icon {
-  margin-right: 5px;
+    margin-right: 5px;
 }
+
 #app .common-layout .el-main .chat-head .iconfont {
-  margin-right: 5px;
+    margin-right: 5px;
 }
+
 #app .common-layout .el-main .chat-head .is-circle {
-  margin-left: 5px;
+    margin-left: 5px;
 }
+
 #app .common-layout .el-main .chat-head .is-circle .iconfont {
-  margin-right: 0;
+    margin-right: 0;
 }
-#app .common-layout .el-main .right-box {
-  min-width: 0;
-  flex: 1;
-  background-color: #fff;
-  border-left: 1px solid #4f4f4f;
+
+#app .common-layout .el-main .chat-box {
+    min-width: 0;
+    flex: 1;
+    background-color: #fff;
+    border-left: 1px solid #4f4f4f;
 }
-#app .common-layout .el-main .right-box #container {
-  overflow: hidden;
-  width: 100%;
+
+#app .common-layout .el-main .chat-box #container {
+    overflow: hidden;
+    width: 100%;
 }
-#app .common-layout .el-main .right-box #container ::-webkit-scrollbar {
-  width: 0;
-  height: 0;
-  background-color: transparent;
+
+#app .common-layout .el-main .chat-box #container ::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+    background-color: transparent;
 }
-#app .common-layout .el-main .right-box #container .chat-box {
-  overflow-y: scroll;
-  --content-font-size: 16px;
-  --content-color: #c1c1c1;
-  font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
-  padding: 0 0 50px 0;
+
+#app .common-layout .el-main .chat-box #container .chat-box {
+    overflow-y: scroll;
+    --content-font-size: 16px;
+    --content-color: #c1c1c1;
+    font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+    padding: 0 0 50px 0;
 }
-#app .common-layout .el-main .right-box #container .chat-box .chat-line {
-  font-size: 14px;
-  display: flex;
-  align-items: flex-start;
+
+#app .common-layout .el-main .chat-box #container .chat-box .chat-line {
+    font-size: 14px;
+    display: flex;
+    align-items: flex-start;
 }
-#app .common-layout .el-main .right-box #container .re-generate {
-  position: relative;
-  display: flex;
-  justify-content: center;
+
+#app .common-layout .el-main .chat-box #container .re-generate {
+    position: relative;
+    display: flex;
+    justify-content: center;
 }
-#app .common-layout .el-main .right-box #container .re-generate .btn-box {
-  position: absolute;
-  bottom: 10px;
+
+#app .common-layout .el-main .chat-box #container .re-generate .btn-box {
+    position: absolute;
+    bottom: 10px;
 }
-#app .common-layout .el-main .right-box #container .re-generate .btn-box .el-button .el-icon {
-  margin-right: 5px;
+
+#app .common-layout .el-main .chat-box #container .re-generate .btn-box .el-button .el-icon {
+    margin-right: 5px;
 }
-#app .common-layout .el-main .right-box #container .input-box {
-  background-color: #fff;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  box-shadow: 0 2px 15px rgba(0,0,0,0.1);
-  padding: 0 15px;
+
+#app .common-layout .el-main .chat-box #container .input-box {
+    background-color: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
+    padding: 0 15px;
 }
-#app .common-layout .el-main .right-box #container .input-box .input-container {
-  width: 100%;
-  margin: 0;
-  border: none;
-  padding: 10px 0;
-  display: flex;
-  justify-content: center;
-  position: relative;
+
+#app .common-layout .el-main .chat-box #container .input-box .input-container {
+    width: 100%;
+    margin: 0;
+    border: none;
+    padding: 10px 0;
+    display: flex;
+    justify-content: center;
+    position: relative;
 }
-#app .common-layout .el-main .right-box #container .input-box .input-container .el-textarea .el-textarea__inner::-webkit-scrollbar {
-  width: 0;
-  height: 0;
+
+#app .common-layout .el-main .chat-box #container .input-box .input-container .el-textarea .el-textarea__inner::-webkit-scrollbar {
+    width: 0;
+    height: 0;
 }
-#app .common-layout .el-main .right-box #container .input-box .input-container .select-file {
-  position: absolute;
-  right: 48px;
-  top: 20px;
+
+#app .common-layout .el-main .chat-box #container .input-box .input-container .select-file {
+    position: absolute;
+    right: 48px;
+    top: 20px;
 }
-#app .common-layout .el-main .right-box #container .input-box .input-container .send-btn {
-  position: absolute;
-  right: 12px;
-  top: 20px;
+
+#app .common-layout .el-main .chat-box #container .input-box .input-container .send-btn {
+    position: absolute;
+    right: 12px;
+    top: 20px;
 }
-#app .common-layout .el-main .right-box #container .input-box .input-container .send-btn .el-button {
-  padding: 8px 5px;
-  border-radius: 6px;
-  background: #19c37d;
-  color: #fff;
-  font-size: 20px;
+
+#app .common-layout .el-main .chat-box #container .input-box .input-container .send-btn .el-button {
+    padding: 8px 5px;
+    border-radius: 6px;
+    background: #19c37d;
+    color: #fff;
+    font-size: 20px;
 }
-#app .common-layout .el-main .right-box #container::-webkit-scrollbar {
-  width: 0;
-  height: 0;
+
+#app .common-layout .el-main .chat-box #container::-webkit-scrollbar {
+    width: 0;
+    height: 0;
 }
+
 #app .el-message-box {
-  width: 90%;
-  max-width: 420px;
+    width: 90%;
+    max-width: 420px;
 }
+
 #app .el-message {
-  min-width: 100px;
-  max-width: 600px;
+    min-width: 100px;
+    max-width: 600px;
 }
+
 .el-select-dropdown__wrap .el-select-dropdown__item .role-option {
-  display: flex;
-  flex-flow: row;
-  margin-top: 8px;
+    display: flex;
+    flex-flow: row;
+    margin-top: 8px;
 }
+
 .el-select-dropdown__wrap .el-select-dropdown__item .role-option .el-image {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
 }
+
 .el-select-dropdown__wrap .el-select-dropdown__item .role-option span {
-  margin-left: 5px;
-  height: 20px;
-  line-height: 20px;
+    margin-left: 5px;
+    height: 20px;
+    line-height: 20px;
 }
+
 .account {
-  display: flex;
-  background-color: #90ffc2;
-  color: #000;
-  width: 100%;
-  border-radius: 10px;
-  padding: 10px;
+    display: flex;
+    background-color: #90ffc2;
+    color: #000;
+    width: 100%;
+    border-radius: 10px;
+    padding: 10px;
 }
+
 .account .vip-logo .el-image {
-  width: 40px;
-  height: 40px;
-  border-radius: 100%;
-  background-color: #fff;
+    width: 40px;
+    height: 40px;
+    border-radius: 100%;
+    background-color: #fff;
 }
+
 .account .vip-info {
-  padding: 0 10px 0 10px;
+    padding: 0 10px 0 10px;
 }
+
 .account .vip-info h4,
 .account .vip-info p {
-  margin: 0;
+    margin: 0;
 }
+
 .account .vip-info h4 {
-  font-weight: bold;
-  font-size: 16px;
+    font-weight: bold;
+    font-size: 16px;
 }
+
 .account .vip-info p {
-  color: #333;
+    color: #333;
 }
+
 .account .pay-btn {
-  width: 100%;
-  display: flex;
-  justify-content: right;
-  align-items: center;
+    width: 100%;
+    display: flex;
+    justify-content: right;
+    align-items: center;
 }
+
 .el-overlay-dialog .el-dialog .el-dialog__body .notice {
-  padding: 0 20px 0 20px;
-  line-height: 1.8;
+    padding: 0 20px 0 20px;
+    line-height: 1.8;
 }
+
 .el-overlay-dialog .el-dialog .el-dialog__body .notice .el-text {
-  font-size: 16px;
+    font-size: 16px;
 }
+
 .dialog-service {
-  text-align: center;
+    text-align: center;
 }
+
 .dialog-service .el-image {
-  width: 360px;
+    width: 360px;
 }
diff --git a/web/src/assets/css/chat-plus.styl b/web/src/assets/css/chat-plus.styl
index e77a016c..624c42d6 100644
--- a/web/src/assets/css/chat-plus.styl
+++ b/web/src/assets/css/chat-plus.styl
@@ -10,35 +10,26 @@ $borderColor = #4676d0;
     // left side
 
     .el-aside {
-      background-color: $sideBgColor;
-      height 100vh
-
-      .title-box {
-        padding: 6px 10px;
-        display: flex;
-        color: #ffffff;
-        font-size: 20px;
-
-        span {
-          padding-top: 5px;
-          padding-left: 10px;
-        }
-      }
+      //background-color: $sideBgColor;
+      padding 10px
+      width var(--el-aside-width, 320px)
 
       .chat-list {
         display: flex
         flex-flow: column
-        background-color: #28292A
-        border-top: 1px solid #2F3032
-        border-right: 1px solid #2F3032
+        //background-color: $sideBgColor
+        border-radius 10px
+        padding 10px 0
 
         .search-box {
           flex-wrap: wrap
-          padding: 10px 15px;
-          //background-color #343540
+          padding: 10px 0;
 
-          .el-input__wrapper {
-            background-color: #363535;
+          .search-input {
+            --el-input-bg-color: #363535
+            --el-input-border-color: #464545
+            --el-input-focus-border-color: #47fff1
+            --el-input-hover-border-color: #2DA39A
             box-shadow: none
           }
         }
@@ -52,9 +43,6 @@ $borderColor = #4676d0;
         }
 
         .content {
-          //display flex
-          //flex-wrap: wrap;
-          //flex-direction column
           width: 100%
           overflow-y: scroll
 
@@ -65,14 +53,17 @@ $borderColor = #4676d0;
             padding: 8px 12px
             //border-bottom: 1px solid #3c3c3c
             cursor: pointer
+            border: 1px solid #3c3c3c
+            margin-bottom 6px
+            border-radius 5px
 
             &:hover {
               background-color #343540
             }
 
             .avatar {
-              width: 28px;
-              height: 28px;
+              width: 32px;
+              height: 32px;
               border-radius: 50%;
             }
 
@@ -96,13 +87,17 @@ $borderColor = #4676d0;
               text-overflow: ellipsis;
             }
 
-            .btn {
-              display none
+
+            .chat-opt {
               position: absolute;
               right: 2px;
               top: 16px;
               color #ffffff
 
+              .el-dropdown-link {
+                color #ffffff
+              }
+
               .el-icon {
                 margin-right 8px;
               }
@@ -111,10 +106,7 @@ $borderColor = #4676d0;
 
           .chat-list-item.active {
             background-color: #343540;
-
-            .btn {
-              display inline
-            }
+            border-color #21aa93
           }
         }
       }
@@ -126,37 +118,6 @@ $borderColor = #4676d0;
         align-items: center;
         padding 0 20px 10px 20px;
         border-top 1px solid #3c3c3c;
-
-        .user-info {
-          width 100%
-          padding-top 10px;
-
-          .el-dropdown-link {
-            width 100%;
-            cursor: pointer
-            display flex
-
-            .el-image {
-              width: 20px;
-              height: 20px;
-              border-radius: 5px;
-            }
-
-            .username {
-              display flex
-              line-height 22px;
-              width 230px;
-              padding-left 10px;
-
-            }
-
-            .el-icon {
-              color: #cccccc;
-              line-height 24px;
-            }
-          }
-
-        }
       }
     }
 
@@ -210,11 +171,12 @@ $borderColor = #4676d0;
         }
       }
 
-      .right-box {
+
+      .chat-box {
         min-width: 0;
         flex: 1;
-        background-color: #ffffff
-        border-left: 1px solid #4f4f4f
+        background-color: var(--el-bg-color)
+        color var(--el-text-color-primary)
 
         #container {
           overflow: hidden;
diff --git a/web/src/assets/css/home.styl b/web/src/assets/css/home.styl
new file mode 100644
index 00000000..2d6ecdb1
--- /dev/null
+++ b/web/src/assets/css/home.styl
@@ -0,0 +1,156 @@
+.home {
+  display: flex;
+  height 100vh
+  width 100%
+  flex-flow column
+
+  .header {
+    display flex
+    justify-content space-between
+    height 50px
+    line-height 50px
+    background-color #1E1F22
+    padding-right 20px
+
+    .banner {
+      display flex
+
+      .logo {
+        display flex
+        padding 5px
+        cursor pointer
+
+        .el-image {
+          width 40px
+          height 40px
+        }
+      }
+
+      .title {
+        display: flex;
+        color: #ffffff;
+        font-size: 20px;
+        padding 0 10px
+      }
+    }
+
+    .navbar {
+      .user-info {
+        width 100%
+        padding 5px 0;
+
+        .el-dropdown-link {
+          width 100%;
+          cursor: pointer
+          display flex
+
+          .el-image {
+            width: 36px;
+            height: 36px;
+            border-radius: 50%
+          }
+
+          .el-icon {
+            color: #cccccc;
+            line-height 24px;
+          }
+        }
+
+      }
+    }
+  }
+
+
+  .main {
+    width 100%
+    display flex
+    flex-flow row
+
+    .navigator {
+      display flex
+      flex-flow column
+      width 50px
+      padding 10px 1px
+      border-right: 1px solid #3c3c3c
+      background-color: #1E1F22
+
+      .nav-items {
+        margin-top: 10px;
+        padding 0 5px
+
+        li {
+          margin-bottom 15px
+
+          a {
+            color #DADBDC
+            border-radius 10px
+            width 40px
+            height 40px
+            display flex
+            justify-content center
+            align-items center
+            cursor pointer
+            background-color #414348
+
+            .el-image {
+              border-radius 10px
+            }
+
+            .iconfont {
+              font-size 20px
+            }
+          }
+
+          a:hover, a.active {
+            color #47fff1
+            background-color #0F7A71
+          }
+
+          .title {
+            font-size: 12px
+            padding-top: 5px
+            color: #e5e7eb;
+            text-align: center;
+          }
+
+          .active {
+            color #47fff1
+          }
+        }
+      }
+
+    }
+
+    .content {
+      width: 100%
+      box-sizing: border-box
+      background-color #282c34
+    }
+  }
+
+}
+
+.el-popper {
+  .more-menus {
+    li {
+      padding 10px 15px
+      cursor pointer
+      border-radius 5px
+      margin 5px 0
+
+      .el-image {
+        position: relative
+        top 5px
+        right 5px
+      }
+
+      &:hover {
+        background-color #f1f1f1
+      }
+    }
+
+    li.active {
+      background-color #f1f1f1
+    }
+  }
+}
\ No newline at end of file
diff --git a/web/src/assets/css/image-mj.styl b/web/src/assets/css/image-mj.styl
index b322b334..1635871c 100644
--- a/web/src/assets/css/image-mj.styl
+++ b/web/src/assets/css/image-mj.styl
@@ -1,6 +1,6 @@
 .page-mj {
   background-color: #282c34;
-  height 100vh
+  height 100%
 
   .inner {
     display: flex;
@@ -235,7 +235,7 @@
 
     .task-list-box {
       width 100%
-      padding 10px
+      padding 0 10px 10px 10px
       color #ffffff
       overflow-x hidden
 
diff --git a/web/src/assets/css/image-sd.styl b/web/src/assets/css/image-sd.styl
index 9d3f30a1..4b46dee3 100644
--- a/web/src/assets/css/image-sd.styl
+++ b/web/src/assets/css/image-sd.styl
@@ -10,10 +10,12 @@
       border 1px solid #454545
       min-width 300px
       max-width 300px
-      padding 10px
+      padding 10px 10px 20px 10px
       border-radius 10px
       color #ffffff;
       font-size 14px
+      height 100%
+      overflow auto
 
       h2 {
         font-weight: bold;
@@ -83,7 +85,7 @@
 
     .task-list-box {
       width 100%
-      padding 10px
+      padding 0 10px 10px 10px
       color #ffffff
       overflow-x hidden
 
diff --git a/web/src/assets/css/mark-map.styl b/web/src/assets/css/mark-map.styl
index ace16f00..e2f62c34 100644
--- a/web/src/assets/css/mark-map.styl
+++ b/web/src/assets/css/mark-map.styl
@@ -1,6 +1,6 @@
 .page-mark-map {
   background-color: #282c34;
-  height 100vh
+  height 100%
 
   .inner {
     display: flex;
@@ -24,6 +24,7 @@
       }
 
       // 隐藏滚动条
+
       ::-webkit-scrollbar {
         width: 0;
         height: 0;
@@ -64,21 +65,15 @@
       }
     }
 
-    .right-box {
+
+    .chat-box {
       width 100%
 
       .top-bar {
         display flex
-        justify-content space-between
+        justify-content right
         align-items center
-
-        h2 {
-          color #ffffff
-        }
-
-        .el-button {
-          margin-right 20px
-        }
+        padding 10px 20px 10px 10px
       }
 
       .markdown {
diff --git a/web/src/assets/css/member.styl b/web/src/assets/css/member.styl
index 7eed89e3..77180851 100644
--- a/web/src/assets/css/member.styl
+++ b/web/src/assets/css/member.styl
@@ -1,6 +1,6 @@
 .member {
   background-color: #282c34;
-  height 100vh
+  height 100%
 
   .el-dialog {
     .el-dialog__body {
diff --git a/web/src/views/ChatApps.vue b/web/src/views/ChatApps.vue
index 9fe0cea0..fc7c7c93 100644
--- a/web/src/views/ChatApps.vue
+++ b/web/src/views/ChatApps.vue
@@ -1,9 +1,6 @@
 <template>
   <div>
     <div class="page-apps custom-scroll">
-      <div class="title">
-        AI 助手应用中心
-      </div>
       <div class="inner" :style="{height: listBoxHeight + 'px'}">
         <ItemList :items="list" v-if="list.length > 0" :gap="20" :width="250">
           <template #default="scope">
@@ -49,7 +46,7 @@ import {checkSession} from "@/action/session";
 import {arrayContains, removeArrayItem, substr} from "@/utils/libs";
 import {useRouter} from "vue-router";
 
-const listBoxHeight = window.innerHeight - 97
+const listBoxHeight = window.innerHeight - 147
 const list = ref([])
 const showLoginDialog = ref(false)
 const roles = ref([])
diff --git a/web/src/views/ChatPlus.vue b/web/src/views/ChatPlus.vue
index c62f42ea..162d9434 100644
--- a/web/src/views/ChatPlus.vue
+++ b/web/src/views/ChatPlus.vue
@@ -1,13 +1,18 @@
 <template>
-  <div class="common-layout theme-white">
+  <div class="common-layout">
     <el-container>
       <el-aside>
-        <div class="title-box">
-          <span>{{ title }}</span>
-        </div>
         <div class="chat-list">
+          <el-button @click="newChat" color="#21aa93">
+            <el-icon style="margin-right: 5px">
+              <Plus/>
+            </el-icon>
+            新建对话
+          </el-button>
+
           <div class="search-box">
-            <el-input v-model="chatName" class="w-50 m-2" size="small" placeholder="搜索会话" @keyup="searchChat">
+            <el-input v-model="chatName" placeholder="搜索会话" @keyup="searchChat($event)" style=""
+                      class="search-input">
               <template #prefix>
                 <el-icon class="el-input__icon">
                   <Search/>
@@ -22,111 +27,125 @@
                    @click="changeChat(chat)">
                 <el-image :src="chat.icon" class="avatar"/>
                 <span class="chat-title-input" v-if="chat.edit">
-              <el-input v-model="tmpChatTitle" size="small" @keydown="titleKeydown($event, chat)"
-                        placeholder="请输入会话标题"/>
-            </span>
+                  <el-input v-model="tmpChatTitle" size="small" @keydown="titleKeydown($event, chat)"
+                            :id="'chat-'+chat.chat_id"
+                            @blur="editConfirm(chat)"
+                            @click="stopPropagation($event)"
+                            placeholder="请输入标题"/>
+                </span>
                 <span v-else class="chat-title">{{ chat.title }}</span>
-                <span class="btn btn-check" v-if="chat.edit || chat.removing">
-                <el-icon @click="confirm($event, chat)"><Check/></el-icon>
-                <el-icon @click="cancel($event, chat)"><Close/></el-icon>
-              </span>
-                <span class="btn" v-else>
-                <el-icon title="编辑" @click="editChatTitle($event, chat)"><Edit/></el-icon>
-                <el-icon title="删除会话" @click="removeChat($event, chat)"><Delete/></el-icon>
-              </span>
+
+                <span class="chat-opt">
+                  <el-dropdown trigger="click">
+                    <span class="el-dropdown-link" @click="stopPropagation($event)">
+                      <el-icon><More/></el-icon>
+                    </span>
+                    <template #dropdown>
+                      <el-dropdown-menu>
+                        <el-dropdown-item :icon="Edit" @click="editChatTitle(chat)">重命名</el-dropdown-item>
+                        <el-dropdown-item :icon="Delete"
+                                          style="--el-text-color-regular: var(--el-color-danger);
+                                          --el-dropdown-menuItem-hover-fill:#F8E1DE;
+                                          --el-dropdown-menuItem-hover-color: var(--el-color-danger)"
+                                          @click="removeChat(chat)">删除</el-dropdown-item>
+                        <el-dropdown-item :icon="Share" @click="shareChat(chat)">分享</el-dropdown-item>
+                      </el-dropdown-menu>
+                    </template>
+                  </el-dropdown>
+                </span>
               </div>
             </el-row>
           </div>
         </div>
 
         <div class="tool-box">
-          <el-dropdown :hide-on-click="true" class="user-info" trigger="click" v-if="isLogin">
-                        <span class="el-dropdown-link">
-                          <el-image :src="loginUser.avatar"/>
-                          <span class="username">{{ loginUser.nickname }}</span>
-                          <el-icon><ArrowDown/></el-icon>
-                        </span>
-            <template #dropdown>
-              <el-dropdown-menu style="width: 296px;">
-                <el-dropdown-item @click="showConfig">
-                  <el-icon>
-                    <Tools/>
-                  </el-icon>
-                  <span>账户信息</span>
-                </el-dropdown-item>
+          <!--          <el-dropdown :hide-on-click="true" class="user-info" trigger="click" v-if="isLogin">-->
+          <!--                        <span class="el-dropdown-link">-->
+          <!--                          <el-image :src="loginUser.avatar"/>-->
+          <!--                          <span class="username">{{ loginUser.nickname }}</span>-->
+          <!--                          <el-icon><ArrowDown/></el-icon>-->
+          <!--                        </span>-->
+          <!--            <template #dropdown>-->
+          <!--              <el-dropdown-menu style="width: 296px;">-->
+          <!--                <el-dropdown-item @click="showConfig">-->
+          <!--                  <el-icon>-->
+          <!--                    <Tools/>-->
+          <!--                  </el-icon>-->
+          <!--                  <span>账户信息</span>-->
+          <!--                </el-dropdown-item>-->
 
-                <el-dropdown-item @click="clearAllChats">
-                  <el-icon>
-                    <Delete/>
-                  </el-icon>
-                  <span>清除所有会话</span>
-                </el-dropdown-item>
+          <!--                <el-dropdown-item @click="clearAllChats">-->
+          <!--                  <el-icon>-->
+          <!--                    <Delete/>-->
+          <!--                  </el-icon>-->
+          <!--                  <span>清除所有会话</span>-->
+          <!--                </el-dropdown-item>-->
 
-                <el-dropdown-item @click="logout">
-                  <i class="iconfont icon-logout"></i>
-                  <span>注销</span>
-                </el-dropdown-item>
+          <!--                <el-dropdown-item @click="logout">-->
+          <!--                  <i class="iconfont icon-logout"></i>-->
+          <!--                  <span>注销</span>-->
+          <!--                </el-dropdown-item>-->
 
-                <el-dropdown-item>
-                  <i class="iconfont icon-github"></i>
-                  <span>
-                    powered by
-                    <el-link type="primary" href="https://github.com/yangjian102621/chatgpt-plus" target="_blank">chatgpt-plus-v3</el-link>
-                 </span>
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
+          <!--                <el-dropdown-item>-->
+          <!--                  <i class="iconfont icon-github"></i>-->
+          <!--                  <span>-->
+          <!--                    powered by-->
+          <!--                    <el-link type="primary" href="https://github.com/yangjian102621/chatgpt-plus" target="_blank">chatgpt-plus-v3</el-link>-->
+          <!--                 </span>-->
+          <!--                </el-dropdown-item>-->
+          <!--              </el-dropdown-menu>-->
+          <!--            </template>-->
+          <!--          </el-dropdown>-->
         </div>
       </el-aside>
       <el-main v-loading="loading" element-loading-background="rgba(122, 122, 122, 0.3)">
-        <div class="chat-head">
-          <div class="chat-config">
-            <el-select v-model="roleId" filterable placeholder="角色" class="role-select" @change="_newChat"
-                       style="width:150px">
-              <el-option
-                  v-for="item in roles"
-                  :key="item.id"
-                  :label="item.name"
-                  :value="item.id"
-              >
-                <div class="role-option">
-                  <el-image :src="item.icon"></el-image>
-                  <span>{{ item.name }}</span>
-                </div>
-              </el-option>
-            </el-select>
+        <!--        <div class="chat-head">-->
+        <!--          <div class="chat-config">-->
+        <!--            <el-select v-model="roleId" filterable placeholder="角色" class="role-select" @change="_newChat"-->
+        <!--                       style="width:150px">-->
+        <!--              <el-option-->
+        <!--                  v-for="item in roles"-->
+        <!--                  :key="item.id"-->
+        <!--                  :label="item.name"-->
+        <!--                  :value="item.id"-->
+        <!--              >-->
+        <!--                <div class="role-option">-->
+        <!--                  <el-image :src="item.icon"></el-image>-->
+        <!--                  <span>{{ item.name }}</span>-->
+        <!--                </div>-->
+        <!--              </el-option>-->
+        <!--            </el-select>-->
 
-            <el-select v-model="modelID" placeholder="模型" @change="_newChat" :disabled="disableModel"
-                       style="width:150px">
-              <el-option
-                  v-for="item in models"
-                  :key="item.id"
-                  :label="item.name"
-                  :value="item.id"
-              >
-                <span>{{ item.name }}</span>
-                <el-tag style="margin-left: 5px; position: relative; top:-2px" type="info" size="small">{{
-                    item.power
-                  }}算力
-                </el-tag>
-              </el-option>
-            </el-select>
-            <el-button type="primary" @click="newChat">
-              <el-icon>
-                <Plus/>
-              </el-icon>
-              新建对话
-            </el-button>
+        <!--            <el-select v-model="modelID" placeholder="模型" @change="_newChat" :disabled="disableModel"-->
+        <!--                       style="width:150px">-->
+        <!--              <el-option-->
+        <!--                  v-for="item in models"-->
+        <!--                  :key="item.id"-->
+        <!--                  :label="item.name"-->
+        <!--                  :value="item.id"-->
+        <!--              >-->
+        <!--                <span>{{ item.name }}</span>-->
+        <!--                <el-tag style="margin-left: 5px; position: relative; top:-2px" type="info" size="small">{{-->
+        <!--                    item.power-->
+        <!--                  }}算力-->
+        <!--                </el-tag>-->
+        <!--              </el-option>-->
+        <!--            </el-select>-->
+        <!--            <el-button type="primary" @click="newChat">-->
+        <!--              <el-icon>-->
+        <!--                <Plus/>-->
+        <!--              </el-icon>-->
+        <!--              新建对话-->
+        <!--            </el-button>-->
 
-            <el-button type="success" @click="exportChat" plain>
-              <i class="iconfont icon-export"></i>
-              <span>导出会话</span>
-            </el-button>
-          </div>
-        </div>
+        <!--            <el-button type="success" @click="exportChat" plain>-->
+        <!--              <i class="iconfont icon-export"></i>-->
+        <!--              <span>导出会话</span>-->
+        <!--            </el-button>-->
+        <!--          </div>-->
+        <!--        </div>-->
 
-        <div class="right-box" :style="{height: mainWinHeight+'px'}">
+        <div class="chat-box" :style="{height: mainWinHeight+'px'}">
           <div>
             <div id="container">
               <div class="chat-box" id="chat-box" :style="{height: chatBoxHeight+'px'}">
@@ -207,7 +226,7 @@
     <el-dialog
         v-model="showNotice"
         :show-close="true"
-        custom-class="notice-dialog"
+        class="notice-dialog"
         title="网站公告"
     >
       <div class="notice">
@@ -232,19 +251,7 @@
 import {nextTick, onMounted, onUnmounted, ref} from 'vue'
 import ChatPrompt from "@/components/ChatPrompt.vue";
 import ChatReply from "@/components/ChatReply.vue";
-import {
-  ArrowDown,
-  Check,
-  Close,
-  Delete,
-  Edit,
-  Plus,
-  Promotion,
-  RefreshRight,
-  Search,
-  Tools,
-  VideoPause
-} from '@element-plus/icons-vue'
+import {Delete, Edit, More, Plus, Promotion, RefreshRight, Search, Share, VideoPause} from '@element-plus/icons-vue'
 import 'highlight.js/styles/a11y-dark.css'
 import {dateFormat, escapeHTML, isMobile, processContent, randString, removeArrayItem, UUID} from "@/utils/libs";
 import {ElMessage, ElMessageBox} from "element-plus";
@@ -414,9 +421,9 @@ const getRoleById = function (rid) {
 }
 
 const resizeElement = function () {
-  chatBoxHeight.value = window.innerHeight - 51 - 82 - 38;
-  mainWinHeight.value = window.innerHeight - 51;
-  leftBoxHeight.value = window.innerHeight - 43 - 47 - 45;
+  chatBoxHeight.value = window.innerHeight - 50 - 82 - 38;
+  mainWinHeight.value = window.innerHeight - 50;
+  leftBoxHeight.value = window.innerHeight - 90 - 45 - 82;
 };
 
 const _newChat = () => {
@@ -492,64 +499,73 @@ const loadChat = function (chat) {
 }
 
 // 编辑会话标题
-const curOpt = ref('')
 const tmpChatTitle = ref('');
-const editChatTitle = function (event, chat) {
-  event.stopPropagation();
+const editChatTitle = (chat) => {
   chat.edit = true;
-  curOpt.value = 'edit';
   tmpChatTitle.value = chat.title;
+  console.log(chat.chat_id)
+  nextTick(() => {
+    document.getElementById('chat-' + chat.chat_id).focus()
+  })
 };
 
 
 const titleKeydown = (e, chat) => {
   if (e.keyCode === 13) {
     e.stopPropagation();
-    confirm(e, chat)
+    editConfirm(chat)
   }
 }
+
+const stopPropagation = (e) => {
+  e.stopPropagation();
+}
 // 确认修改
-const confirm = function (event, chat) {
-  event.stopPropagation();
-  if (curOpt.value === 'edit') {
-    if (tmpChatTitle.value === '') {
-      return ElMessage.error("请输入会话标题！");
-    }
-    if (!chat.chat_id) {
-      return ElMessage.error("对话 ID 为空，请刷新页面再试！");
-    }
-    httpPost('/api/chat/update', {chat_id: chat.chat_id, title: tmpChatTitle.value}).then(() => {
-      chat.title = tmpChatTitle.value;
-      chat.edit = false;
-    }).catch(e => {
-      ElMessage.error("操作失败：" + e.message);
-    })
-  } else if (curOpt.value === 'remove') {
-    httpGet('/api/chat/remove?chat_id=' + chat.chat_id).then(() => {
-      chatList.value = removeArrayItem(chatList.value, chat, function (e1, e2) {
-        return e1.id === e2.id
-      })
-      // 重置会话
-      newChat();
-    }).catch(e => {
-      ElMessage.error("操作失败：" + e.message);
-    })
-
+const editConfirm = function (chat) {
+  if (tmpChatTitle.value === '') {
+    return ElMessage.error("请输入会话标题！");
+  }
+  if (!chat.chat_id) {
+    return ElMessage.error("对话 ID 为空，请刷新页面再试！");
+  }
+  if (tmpChatTitle.value === chat.title) {
+    chat.edit = false;
+    return
   }
 
-}
-// 取消修改
-const cancel = function (event, chat) {
-  event.stopPropagation();
-  chat.edit = false;
-  chat.removing = false;
-}
+  httpPost('/api/chat/update', {chat_id: chat.chat_id, title: tmpChatTitle.value}).then(() => {
+    chat.title = tmpChatTitle.value;
+    chat.edit = false;
+  }).catch(e => {
+    ElMessage.error("操作失败：" + e.message);
+  })
 
+}
 // 删除会话
-const removeChat = function (event, chat) {
-  event.stopPropagation();
-  chat.removing = true;
-  curOpt.value = 'remove';
+const removeChat = function (chat) {
+  ElMessageBox.confirm(
+      `该操作会删除"${chat.title}"`,
+      '删除聊天',
+      {
+        confirmButtonText: '删除',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+  )
+      .then(() => {
+        httpGet('/api/chat/remove?chat_id=' + chat.chat_id).then(() => {
+          chatList.value = removeArrayItem(chatList.value, chat, function (e1, e2) {
+            return e1.id === e2.id
+          })
+          // 重置会话
+          newChat();
+        }).catch(e => {
+          ElMessage.error("操作失败：" + e.message);
+        })
+      })
+      .catch(() => {
+      })
+
 }
 
 const latexPlugin = require('markdown-it-latex2img')
@@ -886,27 +902,29 @@ const reGenerate = function () {
 
 const chatName = ref('')
 // 搜索会话
-const searchChat = function () {
+const searchChat = function (e) {
   if (chatName.value === '') {
     chatList.value = allChats.value
     return
   }
-  const items = [];
-  for (let i = 0; i < allChats.value.length; i++) {
-    if (allChats.value[i].title.toLowerCase().indexOf(chatName.value.toLowerCase()) !== -1) {
-      items.push(allChats.value[i]);
+  if (e.keyCode === 13) {
+    const items = [];
+    for (let i = 0; i < allChats.value.length; i++) {
+      if (allChats.value[i].title.toLowerCase().indexOf(chatName.value.toLowerCase()) !== -1) {
+        items.push(allChats.value[i]);
+      }
     }
+    chatList.value = items;
   }
-  chatList.value = items;
 }
 
 // 导出会话
-const exportChat = () => {
-  if (!activeChat.value['chat_id']) {
+const shareChat = (chat) => {
+  if (!chat.chat_id) {
     return ElMessage.error("请先选中一个会话")
   }
 
-  const url = location.protocol + '//' + location.host + '/chat/export?chat_id=' + activeChat.value['chat_id']
+  const url = location.protocol + '//' + location.host + '/chat/export?chat_id=' + chat.chat_id
   // console.log(url)
   window.open(url, '_blank');
 }
diff --git a/web/src/views/Dalle.vue b/web/src/views/Dalle.vue
index 3d714d2f..375d407f 100644
--- a/web/src/views/Dalle.vue
+++ b/web/src/views/Dalle.vue
@@ -2,10 +2,10 @@
   <div>
     <div class="page-dall">
       <div class="inner custom-scroll">
-        <div class="sd-box">
+        <div class="sd-box" :style="{ height: paramBoxHeight + 'px' }">
           <h2>DALL-E 创作中心</h2>
 
-          <div class="sd-params" :style="{ height: paramBoxHeight + 'px' }">
+          <div class="sd-params">
             <el-form :model="params" label-width="80px" label-position="left">
               <div class="param-line" style="padding-top: 10px">
                 <el-form-item label="图片质量">
@@ -235,8 +235,8 @@ import Clipboard from "clipboard";
 import {checkSession} from "@/action/session";
 import LoginDialog from "@/components/LoginDialog.vue";
 
-const listBoxHeight = ref(window.innerHeight - 40)
-const paramBoxHeight = ref(window.innerHeight - 150)
+const listBoxHeight = ref(0)
+const paramBoxHeight = ref(0)
 const showLoginDialog = ref(false)
 const isLogin = ref(false)
 const loading = ref(true)
@@ -244,9 +244,13 @@ const colWidth = ref(240)
 const isOver = ref(false)
 const previewURL = ref("")
 
+const resizeElement = function () {
+  listBoxHeight.value = window.innerHeight - 90
+  paramBoxHeight.value = window.innerHeight - 110
+};
+resizeElement()
 window.onresize = () => {
-  listBoxHeight.value = window.innerHeight - 40
-  paramBoxHeight.value = window.innerHeight - 150
+  resizeElement()
 }
 const qualities = [
   {name: "标准", value: "standard"},
diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue
index 620804f2..d4c4395c 100644
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -1,49 +1,103 @@
 <template>
   <div class="home">
-    <div class="navigator">
-      <div class="logo">
-        <el-image :src="logo" @click="router.push('/')"/>
-        <div class="divider"></div>
+    <div class="header">
+      <div class="banner">
+        <div class="logo">
+          <el-image :src="logo" @click="router.push('/')"/>
+        </div>
+        <div class="title">
+          <span>{{ title }}</span>
+        </div>
       </div>
-      <ul class="nav-items">
-        <li v-for="item in mainNavs" :key="item.url">
-          <a @click="changeNav(item)" :class="item.url === curPath ? 'active' : ''">
-            <el-image :src="item.icon" style="width: 30px;height: 30px"/>
-          </a>
-          <div :class="item.url === curPath ? 'title active' : 'title'">{{ item.name }}</div>
-        </li>
 
-        <el-popover
-            v-if="moreNavs.length > 0"
-            placement="right-end"
-            trigger="hover"
-        >
-          <template #reference>
-            <li>
-              <a class="active">
-                <el-image src="/images/menu/more.png" style="width: 30px;height: 30px"/>
-              </a>
-            </li>
+      <div class="navbar">
+        <el-dropdown :hide-on-click="true" class="user-info" trigger="click" v-if="loginUser.id">
+                        <span class="el-dropdown-link">
+                          <el-image :src="loginUser.avatar"/>
+                        </span>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item>
+                <el-icon>
+                  <UserFilled/>
+                </el-icon>
+                <span class="username">{{ loginUser.nickname }}</span>
+              </el-dropdown-item>
+
+              <el-dropdown-item>
+                <i class="iconfont icon-book"></i>
+                <span>
+                    <el-link type="primary" href="https://github.com/yangjian102621/chatgpt-plus" target="_blank">
+                      用户手册
+                    </el-link>
+                 </span>
+              </el-dropdown-item>
+
+              <el-dropdown-item>
+                <i class="iconfont icon-github"></i>
+                <span>
+                    <el-link type="primary" href="https://ai.r9it.com/docs/" target="_blank">
+                      Geek-AI {{ version }}
+                    </el-link>
+                 </span>
+              </el-dropdown-item>
+
+              <el-dropdown-item @click="logout">
+                <i class="iconfont icon-logout"></i>
+                <span>退出登录</span>
+              </el-dropdown-item>
+            </el-dropdown-menu>
           </template>
-          <template #default>
-            <ul class="more-menus">
-              <li v-for="item in moreNavs" :key="item.url" :class="item.url === curPath ? 'active' : ''">
-                <a @click="changeNav(item)">
-                  <el-image :src="item.icon" style="width: 20px;height: 20px"/>
-                  <span :class="item.url === curPath ? 'title active' : 'title'">{{ item.name }}</span>
+        </el-dropdown>
+      </div>
+    </div>
+    <div class="main">
+      <div class="navigator">
+        <ul class="nav-items">
+          <li v-for="item in mainNavs" :key="item.url">
+            <el-tooltip
+                effect="light"
+                :content="item.name"
+                placement="right">
+              <a @click="changeNav(item)" :class="item.url === curPath ? 'active' : ''">
+                <el-image :src="item.icon" style="width: 30px;height: 30px"/>
+              </a>
+            </el-tooltip>
+          </li>
+
+          <el-popover
+              v-if="moreNavs.length > 0"
+              placement="right-end"
+              trigger="hover"
+          >
+            <template #reference>
+              <li>
+                <a class="active">
+                  <el-image src="/images/menu/more.png" style="width: 30px;height: 30px"/>
                 </a>
               </li>
-            </ul>
-          </template>
-        </el-popover>
-      </ul>
-    </div>
-    <div class="content">
-      <router-view v-slot="{ Component }">
-        <transition name="move" mode="out-in">
-          <component :is="Component"></component>
-        </transition>
-      </router-view>
+            </template>
+            <template #default>
+              <ul class="more-menus">
+                <li v-for="item in moreNavs" :key="item.url" :class="item.url === curPath ? 'active' : ''">
+                  <a @click="changeNav(item)">
+                    <el-image :src="item.icon" style="width: 20px;height: 20px"/>
+                    <span :class="item.url === curPath ? 'title active' : 'title'">{{ item.name }}</span>
+                  </a>
+                </li>
+              </ul>
+            </template>
+          </el-popover>
+        </ul>
+      </div>
+
+      <div class="content" :style="{height: mainWinHeight+'px'}">
+        <router-view v-slot="{ Component }">
+          <transition name="move" mode="out-in">
+            <component :is="Component"></component>
+          </transition>
+        </router-view>
+      </div>
     </div>
   </div>
 </template>
@@ -54,12 +108,19 @@ import {useRouter} from "vue-router";
 import {onMounted, ref} from "vue";
 import {httpGet} from "@/utils/http";
 import {ElMessage} from "element-plus";
+import {UserFilled} from "@element-plus/icons-vue";
+import {checkSession} from "@/action/session";
+import {removeUserToken} from "@/store/session";
 
 const router = useRouter();
 const logo = ref('/images/logo.png');
 const mainNavs = ref([])
 const moreNavs = ref([])
 const curPath = ref(router.currentRoute.value.path)
+const title = ref("")
+const mainWinHeight = window.innerHeight - 50
+const loginUser = ref({})
+const version = ref(process.env.VUE_APP_VERSION)
 
 if (curPath.value === "/external") {
   curPath.value = router.currentRoute.value.query.url
@@ -75,7 +136,8 @@ const changeNav = (item) => {
 
 onMounted(() => {
   httpGet("/api/config/get?key=system").then(res => {
-    logo.value = res.data['logo']
+    logo.value = res.data.logo
+    title.value = res.data.title
   }).catch(e => {
     ElMessage.error("获取系统配置失败：" + e.message)
   })
@@ -83,7 +145,7 @@ onMounted(() => {
   httpGet("/api/menu/list").then(res => {
     mainNavs.value = res.data
     // 根据窗口的高度计算应该显示多少菜单
-    const rows = Math.floor((window.innerHeight - 90) / 90)
+    const rows = Math.floor((window.innerHeight - 90) / 60)
     if (res.data.length > rows) {
       mainNavs.value = res.data.slice(0, rows)
       moreNavs.value = res.data.slice(rows)
@@ -91,119 +153,24 @@ onMounted(() => {
   }).catch(e => {
     ElMessage.error("获取系统菜单失败：" + e.message)
   })
+
+  checkSession().then(user => {
+    loginUser.value = user
+  }).catch(() => {
+  })
 })
+
+const logout = function () {
+  httpGet('/api/user/logout').then(() => {
+    removeUserToken()
+    router.push("/login")
+  }).catch(() => {
+    ElMessage.error('注销失败！');
+  })
+}
 </script>
 
 <style lang="stylus" scoped>
 @import '@/assets/iconfont/iconfont.css';
-.home {
-  display: flex;
-  height 100vh
-  width 100%
-
-  .navigator {
-    display flex
-    flex-flow column
-    width 60px
-    padding 10px 6px
-    border-right: 1px solid #3c3c3c
-    background-color: #25272D
-
-    .logo {
-      display flex
-      flex-flow column
-      align-items center
-      cursor pointer
-
-      .el-image {
-        width 50px
-        height 50px
-      }
-
-      .divider {
-        border-bottom 1px solid #4A4A4A
-        width 80%
-        height 10px
-      }
-    }
-
-    .nav-items {
-      margin-top: 10px;
-      padding 0 5px
-
-      li {
-        margin-bottom 15px
-
-        a {
-          color #DADBDC
-          border-radius 10px
-          width 48px
-          height 48px
-          display flex
-          justify-content center
-          align-items center
-          cursor pointer
-
-          .el-image {
-            border-radius 10px
-          }
-
-          .iconfont {
-            font-size 20px
-          }
-        }
-
-        a:hover, a.active {
-          color #47fff1
-          background-color #0F7A71
-        }
-
-        .title {
-          font-size: 12px
-          padding-top: 5px
-          color: #e5e7eb;
-          text-align: center;
-        }
-
-        .active {
-          color #47fff1
-        }
-      }
-    }
-
-  }
-
-  .content {
-    width: 100%
-    height: 100vh
-    box-sizing: border-box
-    background-color #282c34
-  }
-
-}
-
-.el-popper {
-  .more-menus {
-    li {
-      padding 10px 15px
-      cursor pointer
-      border-radius 5px
-      margin 5px 0
-
-      .el-image {
-        position: relative
-        top 5px
-        right 5px
-      }
-
-      &:hover {
-        background-color #f1f1f1
-      }
-    }
-
-    li.active {
-      background-color #f1f1f1
-    }
-  }
-}
+@import "@/assets/css/home.styl"
 </style>
diff --git a/web/src/views/ImageMj.vue b/web/src/views/ImageMj.vue
index 2f4aee9c..b29d087e 100644
--- a/web/src/views/ImageMj.vue
+++ b/web/src/views/ImageMj.vue
@@ -618,17 +618,22 @@ import {getSessionId} from "@/store/session";
 import {copyObj, removeArrayItem} from "@/utils/libs";
 import LoginDialog from "@/components/LoginDialog.vue";
 
-const listBoxHeight = ref(window.innerHeight - 40)
-const paramBoxHeight = ref(window.innerHeight - 150)
+const listBoxHeight = ref(0)
+const paramBoxHeight = ref(0)
 const showLoginDialog = ref(false)
 const loading = ref(true)
 const colWidth = ref(240)
 const previewURL = ref("")
 
+const resizeElement = function () {
+  listBoxHeight.value = window.innerHeight - 80
+  paramBoxHeight.value = window.innerHeight - 190
+};
+resizeElement()
 window.onresize = () => {
-  listBoxHeight.value = window.innerHeight - 40
-  paramBoxHeight.value = window.innerHeight - 150
+  resizeElement()
 }
+
 const rates = [
   {css: "square", value: "1:1", text: "1:1", img: "/images/mj/rate_1_1.png"},
   {css: "size1-2", value: "1:2", text: "1:2", img: "/images/mj/rate_1_2.png"},
diff --git a/web/src/views/ImageSd.vue b/web/src/views/ImageSd.vue
index c3f8937f..86b274d6 100644
--- a/web/src/views/ImageSd.vue
+++ b/web/src/views/ImageSd.vue
@@ -2,10 +2,10 @@
   <div>
     <div class="page-sd">
       <div class="inner custom-scroll">
-        <div class="sd-box">
+        <div class="sd-box" :style="{ height: paramBoxHeight + 'px' }">
           <h2>Stable Diffusion 创作中心</h2>
 
-          <div class="sd-params" :style="{ height: paramBoxHeight + 'px' }">
+          <div class="sd-params">
             <el-form :model="params" label-width="80px" label-position="left">
               <div class="param-line" style="padding-top: 10px">
                 <el-form-item label="采样方法">
@@ -513,8 +513,8 @@ import {useRouter} from "vue-router";
 import {getSessionId} from "@/store/session";
 import LoginDialog from "@/components/LoginDialog.vue";
 
-const listBoxHeight = ref(window.innerHeight - 40)
-const paramBoxHeight = ref(window.innerHeight - 150)
+const listBoxHeight = ref(0)
+const paramBoxHeight = ref(0)
 const fullImgHeight = ref(window.innerHeight - 60)
 const showTaskDialog = ref(false)
 const item = ref({})
@@ -523,9 +523,13 @@ const isLogin = ref(false)
 const loading = ref(true)
 const colWidth = ref(240)
 
+const resizeElement = function () {
+  listBoxHeight.value = window.innerHeight - 80
+  paramBoxHeight.value = window.innerHeight - 110
+};
+resizeElement()
 window.onresize = () => {
-  listBoxHeight.value = window.innerHeight - 40
-  paramBoxHeight.value = window.innerHeight - 150
+  resizeElement()
 }
 const samplers = ["Euler a", "DPM++ 2S a", "DPM++ 2M", "DPM++ SDE", "DPM++ 2M SDE", "UniPC", "Restart"]
 const schedulers = ["Automatic", "Karras", "Exponential", "Uniform"]
diff --git a/web/src/views/ImagesWall.vue b/web/src/views/ImagesWall.vue
index 05d3f443..318bf189 100644
--- a/web/src/views/ImagesWall.vue
+++ b/web/src/views/ImagesWall.vue
@@ -310,7 +310,7 @@ const data = ref({
 const loading = ref(true)
 const isOver = ref(false)
 const imgType = ref("mj") // 图片类别
-const listBoxHeight = window.innerHeight - 74
+const listBoxHeight = window.innerHeight - 124
 const colWidth = ref(240)
 const fullImgHeight = ref(window.innerHeight - 60)
 const showTaskDialog = ref(false)
@@ -395,6 +395,7 @@ onUnmounted(() => {
 })
 
 const changeImgType = () => {
+  console.log(imgType.value)
   document.getElementById('waterfall-box').scrollTo(0, 0)
   page.value = 0
   data.value = {
diff --git a/web/src/views/Invitation.vue b/web/src/views/Invitation.vue
index cb29d9b5..1e95c218 100644
--- a/web/src/views/Invitation.vue
+++ b/web/src/views/Invitation.vue
@@ -163,7 +163,7 @@ const initData = () => {
   display: flex;
   justify-content: center;
   background-color: #282c34;
-  height 100vh
+  height 100%
   overflow-x hidden
   overflow-y visible
 
@@ -176,6 +176,7 @@ const initData = () => {
 
     h2 {
       color #ffffff;
+      text-align center
     }
 
     .share-box {
diff --git a/web/src/views/MarkMap.vue b/web/src/views/MarkMap.vue
index 37382a0c..c9877666 100644
--- a/web/src/views/MarkMap.vue
+++ b/web/src/views/MarkMap.vue
@@ -2,10 +2,10 @@
   <div>
     <div class="page-mark-map">
       <div class="inner custom-scroll">
-        <div class="mark-map-box">
+        <div class="mark-map-box" :style="{ height: leftBoxHeight + 'px' }">
           <h2>思维导图创作中心</h2>
 
-          <div class="mark-map-params" :style="{ height: leftBoxHeight + 'px' }">
+          <div class="mark-map-params">
             <el-form label-width="80px" label-position="left">
               <div class="param-line">
                 你的需求？
@@ -69,9 +69,8 @@
           </div>
         </div>
 
-        <div class="right-box">
+        <div class="chat-box">
           <div class="top-bar">
-            <h2>思维导图</h2>
             <el-button @click="downloadImage" type="primary">
               <el-icon>
                 <Download/>
@@ -108,7 +107,7 @@ import {Download} from "@element-plus/icons-vue";
 import {Toolbar} from 'markmap-toolbar';
 
 const leftBoxHeight = ref(window.innerHeight - 105)
-const rightBoxHeight = ref(window.innerHeight - 85)
+const rightBoxHeight = ref(window.innerHeight - 115)
 
 const prompt = ref("")
 const text = ref(`# Geek-AI 助手
diff --git a/web/src/views/Member.vue b/web/src/views/Member.vue
index e586d5e9..d25e5481 100644
--- a/web/src/views/Member.vue
+++ b/web/src/views/Member.vue
@@ -1,9 +1,6 @@
 <template>
   <div>
     <div class="member custom-scroll">
-      <div class="title">
-        会员充值中心
-      </div>
       <div class="inner" :style="{height: listBoxHeight + 'px'}">
         <el-row :gutter="20">
           <el-col :span="7">
diff --git a/web/src/views/PowerLog.vue b/web/src/views/PowerLog.vue
index 09fdc8c0..6d442311 100644
--- a/web/src/views/PowerLog.vue
+++ b/web/src/views/PowerLog.vue
@@ -1,8 +1,6 @@
 <template>
   <div class="power-log" v-loading="loading">
     <div class="inner">
-      <h2>消费日志</h2>
-
       <div class="list-box" :style="{height: listBoxHeight + 'px'}">
         <div class="handle-box">
           <el-input v-model="query.model" placeholder="模型" class="handle-input mr10" clearable></el-input>