diff --git a/web/public/images/menu/app1.png b/web/public/images/menu/app1.png
deleted file mode 100644
index f0307dd0..00000000
Binary files a/web/public/images/menu/app1.png and /dev/null differ
diff --git a/web/public/images/menu/bbs1.png b/web/public/images/menu/bbs1.png
deleted file mode 100644
index a9d44662..00000000
Binary files a/web/public/images/menu/bbs1.png and /dev/null differ
diff --git a/web/public/images/menu/docs1.png b/web/public/images/menu/docs1.png
deleted file mode 100644
index d11deacc..00000000
Binary files a/web/public/images/menu/docs1.png and /dev/null differ
diff --git a/web/public/images/menu/log1.png b/web/public/images/menu/log1.png
deleted file mode 100644
index 03870d66..00000000
Binary files a/web/public/images/menu/log1.png and /dev/null differ
diff --git a/web/public/images/menu/member1.png b/web/public/images/menu/member1.png
deleted file mode 100644
index cceac4ca..00000000
Binary files a/web/public/images/menu/member1.png and /dev/null differ
diff --git a/web/public/images/menu/share1.png b/web/public/images/menu/share1.png
deleted file mode 100644
index 8d84b074..00000000
Binary files a/web/public/images/menu/share1.png and /dev/null differ
diff --git a/web/public/images/menu/xmind1.png b/web/public/images/menu/xmind1.png
deleted file mode 100644
index 910dc486..00000000
Binary files a/web/public/images/menu/xmind1.png and /dev/null differ
diff --git a/web/src/assets/css/chat-app.css b/web/src/assets/css/chat-app.css
index 064cd4c2..6362f163 100644
--- a/web/src/assets/css/chat-app.css
+++ b/web/src/assets/css/chat-app.css
@@ -51,6 +51,6 @@
   color: #999;
 }
 .page-apps .inner .list-box .app-item:hover {
-  box-shadow: 0 0 10px rgba(71,255,241,0.6); /* 添加阴影效果 */
+  box-shadow: 0 0 10px var(--shadow-color); /* 添加阴影效果 */
   transform: translateY(-10px); /* 向上移动10像素 */
 }
diff --git a/web/src/assets/css/chat-app.styl b/web/src/assets/css/chat-app.styl
index a34dfdd7..63f4e74b 100644
--- a/web/src/assets/css/chat-app.styl
+++ b/web/src/assets/css/chat-app.styl
@@ -1,30 +1,38 @@
 .page-apps {
-  background-color: #282c34;
+  // background-color: #282c34;
   height 100%
 
   .apps-type-nav{
-    height 43px
+    height 50px
     padding 8px 0;
-    margin-bottom 3px
+    margin 10px auto
   }
 
   .scrollbar-type-nav{
     display flex
     align-items center
-    height 43px
-    padding 0 5px
+   
+    padding 2px
+    background-color #f4f1f7
+    width fit-content
+    border 1px solid rgba(79,89,102,.078)
+    border-radius: 20px 
+    margin: 0 auto
+    // background: var(--chat-bg);
+    // width 100%
     li{
       flex-shrink 0
       display flex
       align-items center
       justify-content center
-      margin 0 10px
+      margin 5px 8px
       height 26px
       border-radius 4px
-      border 1px solid rgb(80,80,80)
+      // border 1px solid rgb(80,80,80)
       padding 2px 12px
-      background rgba(60,60,60 0.9)
-      color #fff
+      // background rgba(60,60,60 0.9)
+      color var(--theme-text-tertiary)
+      font-weight: bold
       font-size 14px
       cursor pointer
 
@@ -34,9 +42,12 @@
         overflow hidden
         margin-right 5px
         border-radius 50%
+    
       }
       &.active{
-        background #21aa93;
+        background #fff;
+        color: var(--el-color-primary);
+        border-radius 20px
       }
     }
   }
@@ -53,16 +64,24 @@
       .item {
         display flex
         flex-flow row
-        border 1px solid rgb(80,80,80)
+        // border 1px solid rgb(80,80,80)
         padding 10px
-        background rgba(60,60,60 0.5)
+        background: var(--chat-bg);
+        border-radius 8px
 
         .image {
           width 80px
           height 80px
           min-width 80px
-          border-radius 5px
+          border-radius 50%
           overflow hidden
+          object-fit: contain
+          display: flex
+          align-items center
+          justify-content center
+          flex-shrink 0
+          border: 2px solid #f5f7fd
+          background: #fff
         }
 
         .inner {
@@ -75,7 +94,7 @@
             text-align left
 
             .info-title {
-              color var(--el-text-color)
+              color: var(--text-theme-color)
               font-size 1.25rem
               line-height 1.75rem
               letter-spacing: .025em;
@@ -96,7 +115,8 @@
               word-break: break-all;
               height 34px
               font-size: .875rem;
-              color #999999
+              color var(--el-text-color-primary)
+
             }
           }
 
diff --git a/web/src/assets/css/chat-plus.styl b/web/src/assets/css/chat-plus.styl
index fe3972a6..f6989cb2 100644
--- a/web/src/assets/css/chat-plus.styl
+++ b/web/src/assets/css/chat-plus.styl
@@ -1,5 +1,4 @@
-$sideBgColor = #252526;
-$borderColor = #4676d0;
+
 #app {
 
   height: 100%;
@@ -33,7 +32,7 @@ $borderColor = #4676d0;
           // .search-input {
           //   --el-input-bg-color: #363535
           //   --el-input-border-color: #464545
-          //   --el-input-focus-border-color: #47fff1
+          //   --el-input-focus-border-color:#b0a0f8
           //   --el-input-hover-border-color: #2DA39A
           //   box-shadow: none
           // }
diff --git a/web/src/assets/css/common.styl b/web/src/assets/css/common.styl
index 2edb8c67..b7be7059 100644
--- a/web/src/assets/css/common.styl
+++ b/web/src/assets/css/common.styl
@@ -2,6 +2,7 @@
   --sm-txt:rgba(163, 174, 208, 1);
   --text-secondary: #8a939d;
   --el-color-primary: rgb(107, 80, 225);
+  --theme-textcolor-normal:#b0a0f8;
   --el-border-radius-base: 8px;
   --el-color-primary-light-5:rgb(107, 85, 255);
   --el-color-primary-light-3:rgb(78, 51, 254);
@@ -19,9 +20,18 @@
   --theme-border-primary: rgba(86, 86, 95, .322); //主题边框颜色
   --theme-border-hover: rgb(107, 85, 255);//主题边框hover颜色
   --text--hover:rgba(215, 211, 240, 0.581) //主题色hover色系
- 
-  
+ --el-input-focus-border-color: #b0a0f8;
+ --little-btn-bg:#e9d3f6;
+ --gray-btn-bg:#ededf591;
+  --a-link-color: #3561ff
+  --shadow-color:rgba(223,71,255,0.6)
+  --sm-btn-bg:#6052ed;
+--theme-text-tertiary: #595959;
+--theme-btn-fill-tertiary: #f0ebff;
+--theme-text-btn-tertiary: #6841ea;
 
+
+// #e7e7e8
 }
 .el-dialog{
     --el-border-radius-base: 20px;
@@ -90,13 +100,13 @@
 /* 滚动条的轨道背景颜色 */
 
 ::-webkit-scrollbar-track {
-  background: #f1f1f1; /* 滚动条轨道颜色 */
+  background: #f1f1f1 !important; /* 滚动条轨道颜色 */
   border-radius: 6px; /* 可选：轨道圆角 */
 }
 
 /* 滚动条滑块的颜色 */
 ::-webkit-scrollbar-thumb {
-  background: #888; /* 滑块颜色 */
+  background: #888 !important; /* 滑块颜色 */
   border-radius: 6px; /* 可选：滑块圆角 */
 }
 
@@ -115,4 +125,13 @@
     --text-color:var(--theme-text-color-primary)
     font-size: 16px
   }
-}
\ No newline at end of file
+}
+.sm-btn-theme{
+      background-color: var(--theme-btn-fill-tertiary) !important;
+    color: var(--theme-text-btn-tertiary) !important;
+    border: none;
+  }
+  
+  .el-tag, .el-tag.el-tag--primary{
+  --el-tag-bg-color:#f0ebff
+  }
\ No newline at end of file
diff --git a/web/src/assets/css/custom-scroll.css b/web/src/assets/css/custom-scroll.css
index eb7e1d0a..923a4a35 100644
--- a/web/src/assets/css/custom-scroll.css
+++ b/web/src/assets/css/custom-scroll.css
@@ -1,13 +1,18 @@
 .custom-scroll ::-webkit-scrollbar {
   width: 8px; /* 滚动条宽度 */
+  display:none;
 }
 .custom-scroll ::-webkit-scrollbar-track {
   background-color: #282c34;
+  display:none;
 }
 .custom-scroll ::-webkit-scrollbar-thumb {
   background-color: #444;
   border-radius: 8px;
+  display:none;
 }
 .custom-scroll ::-webkit-scrollbar-thumb:hover {
   background-color: #666;
+  display:none;
 }
+
diff --git a/web/src/assets/css/home.styl b/web/src/assets/css/home.styl
index 49ac5e8a..17a95392 100644
--- a/web/src/assets/css/home.styl
+++ b/web/src/assets/css/home.styl
@@ -15,7 +15,9 @@
   .tab-box{
     align-items: center
     background-color: var(--card-bg)
-    height: 100%
+    // height: 100%
+    // position: fixed;
+    height: 100vh;
     .title{
       font-size: 28px
       font-weight: 700
@@ -173,6 +175,13 @@
   background: var(--theme-bg-all);
   // background-image: linear-gradient(180deg, rgba(247, 232, 255, .54), rgba(191, 223, 255, .35));
   width: 100%;
+  .loginMask{
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 999;
+    }
   .topheader{
     display: flex;
     position: fixed;
diff --git a/web/src/assets/css/image-dall.styl b/web/src/assets/css/image-dall.styl
index 331d4f7a..5dc19c25 100644
--- a/web/src/assets/css/image-dall.styl
+++ b/web/src/assets/css/image-dall.styl
@@ -1,25 +1,25 @@
 .page-dall {
-  background-color: #282c34;
+  // background-color: #282c34;
 
   .inner {
     display: flex;
 
     .sd-box {
       margin 10px
-      background-color #262626
-      border 1px solid #454545
+      // background-color #262626
+      // border 1px solid #454545
       min-width 300px
       max-width 300px
       padding 10px
       border-radius 10px
-      color #ffffff;
+      color var(--text-theme-color);
       font-size 14px
 
       h2 {
         font-weight: bold;
         font-size 20px
         text-align center
-        color #47fff1
+        color#b0a0f8
       }
 
       // 隐藏滚动条
@@ -66,25 +66,24 @@
         text-align center
 
         .el-button {
-          width 100%
+          width 200px
 
-          span {
-            color #2D3A4B
-          }
+          
         }
       }
     }
 
     .el-form {
       .el-form-item__label {
-        color #ffffff
+        color var(--text-theme-color)
       }
     }
 
     .task-list-box {
+      background: var(--chat-bg);
       width 100%
       padding 10px
-      color #ffffff
+      color var(--text-theme-color)
       overflow-x hidden
 
       .task-list-inner {
@@ -93,26 +92,26 @@
         }
 
         .el-tabs__item {
-          color: #fff;
+          color: var(--text-theme-color);
           font-size: 18px;
         }
 
         .title-tabs .el-tabs__item.is-active {
-          color: #47FFF1;
+          color:#b0a0f8;
           font-size: 18px;
         }
 
         .title-tabs .el-tabs__active-bar {
-          background-color: #47FFF1;
+          background-color:#b0a0f8;
         }
 
         .el-textarea {
-          --el-input-focus-border-color: #47FFF1;
+          // --el-input-focus-border-color:#b0a0f8;
         }
 
         .el-textarea__inner {
           background: transparent;
-          color: #fff;
+          color: var(--text-theme-color);
         }
 
         .el-input__wrapper {
@@ -141,7 +140,7 @@
         }
 
         .el-form-item__label {
-          color #ffffff
+          color var(--text-theme-color)
         }
 
         // 图片上传样式
diff --git a/web/src/assets/css/image-mj.css b/web/src/assets/css/image-mj.css
index f595bc43..19d3d4c2 100644
--- a/web/src/assets/css/image-mj.css
+++ b/web/src/assets/css/image-mj.css
@@ -365,7 +365,7 @@
   display: block;
 }
 .page-mj .inner .task-list-box .task-list-inner .job-list-box .finish-job-list .animate:hover {
-  box-shadow: 0 0 10px rgba(71,255,241,0.6); /* 添加阴影效果 */
+  box-shadow: 0 0 10px rgba(223,71,255,0.6); /* 添加阴影效果 */
   transform: translateY(-10px); /* 向上移动10像素 */
 }
 .page-mj .inner .task-list-box .task-list-inner .job-list-box .el-image {
diff --git a/web/src/assets/css/image-mj.styl b/web/src/assets/css/image-mj.styl
index 7e5f13c1..0e7f9760 100644
--- a/web/src/assets/css/image-mj.styl
+++ b/web/src/assets/css/image-mj.styl
@@ -1,26 +1,30 @@
 .page-mj {
-  background-color: #282c34;
+  // background-color: #282c34;
   height 100%
 
   .inner {
     display: flex;
+    // height: 100%
 
     .mj-box {
       margin 10px
-      background-color #262626
-      border 1px solid #454545
+      // background-color #262626
+      // border 1px solid #454545
+      // height: calc(100vh - 50px)
+      // overflow: scroll
       min-width 300px
       max-width 300px
       padding 10px
       border-radius 10px
-      color #ffffff;
+      color var(--text-theme-color);
       font-size 14px
+      overflow auto
 
       h2 {
         font-weight: bold;
         font-size 20px
         text-align center
-        color #47fff1
+        color var( --theme-textcolor-normal)
       }
 
       // 隐藏滚动条
@@ -44,16 +48,20 @@
           }
 
           .grid-content {
-            background-color #383838
-            border-radius 5px
+            // background-color #383838
+            background: var(--card-bg);
+            border-radius: 8px;
             padding 8px 14px
             display flex
             cursor pointer
             margin-bottom: 10px;
-            border 1px solid #383838
+            // border 1px solid #383838
+            border 1px solid var(--chat-bg)
+
 
             &:hover {
-              background-color #585858
+              border 1px solid var(--theme-border-hover)
+
             }
 
             .icon {
@@ -70,28 +78,30 @@
 
 
           .grid-content.active {
-            color #47fff1
-            background-color #585858
-            border 1px solid #47fff1
+            // color #47fff1
+            // background-color #585858
+            border 1px solid var(--theme-border-hover)
           }
 
           .model {
-            background-color #383838
-            border 1px solid #454545
-            border-radius 5px
+            background: var(--card-bg);
+            // border 1px solid #454545
+            border-radius 8px
             padding 5px
             margin-bottom 10px
             display flex
             flex-flow column
             align-items center
             cursor pointer
+            border 1px solid var(--chat-bg)
 
             &:hover {
-              background-color #585858
+              border 1px solid var(--theme-border-hover)
+
             }
 
             .el-image {
-              height 30px
+              height 40px
               width 100%
             }
 
@@ -103,9 +113,10 @@
           }
 
           .model.active {
-            color #47fff1
-            background-color #585858
-            border 1px solid #47fff1
+            // color #47fff1
+            // background-color #585858
+            border 1px solid var(--theme-border-hover)
+
           }
 
           .form-item-inner {
@@ -113,16 +124,16 @@
             align-items: center
 
             .el-select {
-              --el-select-input-focus-border-color: #47FFF1;
-              --el-input-focus-border-color: #47FFF1;
+              --el-select-input-focus-border-color: var(--el-color-primary)
+              --el-input-focus-border-color: var(--el-color-primary)
             }
 
             .el-input__wrapper {
-              background: #383838;
+              background: var(--chat-bg)
             }
 
             .el-input__inner {
-              color: #fff
+              color: var(--text-theme-color)
             }
 
             .el-icon {
@@ -167,7 +178,7 @@
 
     .el-form {
       .el-form-item__label {
-        color #ffffff
+        color var(--text-theme-color)
       }
 
       .el-input, .el-slider {
@@ -182,9 +193,10 @@
     }
 
     .task-list-box {
+      background: var(--chat-bg);
       width 100%
       padding 0 10px 10px 10px
-      color #ffffff
+      color var(--text-theme-color)
       overflow-x hidden
 
       .task-list-inner {
@@ -193,26 +205,26 @@
         }
 
         .el-tabs__item {
-          color: #fff;
+          color: var(--text-theme-color);
           font-size: 18px;
         }
 
         .title-tabs .el-tabs__item.is-active {
-          color: #47FFF1;
+          color: var( --theme-textcolor-normal);
           font-size: 18px;
         }
 
         .title-tabs .el-tabs__active-bar {
-          background-color: #47FFF1;
+          background-color: var( --theme-textcolor-normal);
         }
 
         .el-textarea {
-          --el-input-focus-border-color: #47FFF1;
+          --el-input-focus-border-color: var(--el-color-primary)
         }
 
         .el-textarea__inner {
           background: transparent;
-          color: #fff;
+          color: var(--text-theme-color);
         }
 
         .el-input__wrapper {
@@ -241,7 +253,7 @@
         }
 
         .el-form-item__label {
-          color #ffffff
+          color var(--text-theme-color)
         }
 
         // 图片上传样式
@@ -367,7 +379,7 @@
                             display block
                             cursor pointer
                             background-color #4E5058
-                            color #ffffff
+                            color var(--text-theme-color)
 
                             &:hover {
                               background-color #6D6F78
@@ -422,7 +434,7 @@
               justify-content center
               align-items center
               min-height 220px
-              color #ffffff
+              color var(--text-theme-color)
               overflow hidden
 
               .err-msg-container {
diff --git a/web/src/assets/css/image-sd.css b/web/src/assets/css/image-sd.css
index 00177432..864f566f 100644
--- a/web/src/assets/css/image-sd.css
+++ b/web/src/assets/css/image-sd.css
@@ -250,7 +250,7 @@
   display: block;
 }
 .page-sd .inner .task-list-box .task-list-inner .job-list-box .finish-job-list .animate:hover {
-  box-shadow: 0 0 10px rgba(71,255,241,0.6); /* 添加阴影效果 */
+  box-shadow: 0 0 10px rgba(223,71,255,0.6); /* 添加阴影效果 */
   transform: translateY(-10px); /* 向上移动10像素 */
 }
 .page-sd .inner .task-list-box .task-list-inner .job-list-box .el-image {
diff --git a/web/src/assets/css/image-sd.styl b/web/src/assets/css/image-sd.styl
index 90594e59..357d5e95 100644
--- a/web/src/assets/css/image-sd.styl
+++ b/web/src/assets/css/image-sd.styl
@@ -1,18 +1,18 @@
 .page-sd {
-  background-color: #282c34;
+  // background-color: #282c34;
 
   .inner {
     display: flex;
 
     .sd-box {
       margin 10px
-      background-color #262626
-      border 1px solid #454545
+      // background-color #262626
+      // border 1px solid #454545
       min-width 300px
       max-width 300px
       padding 10px 10px 20px 10px
       border-radius 10px
-      color #ffffff;
+      color var(--text-theme-color);
       font-size 14px
       overflow auto
 
@@ -20,7 +20,8 @@
         font-weight: bold;
         font-size 20px
         text-align center
-        color #47fff1
+        color var( --theme-textcolor-normal)
+
       }
 
       // 隐藏滚动条
@@ -67,25 +68,24 @@
         text-align center
 
         .el-button {
-          width 100%
+          width 200px
 
-          span {
-            color #2D3A4B
-          }
+         
         }
       }
     }
 
     .el-form {
       .el-form-item__label {
-        color #ffffff
+        color: var(--text-theme-color)
       }
     }
 
     .task-list-box {
+      background: var(--chat-bg);
       width 100%
       padding 0 10px 10px 10px
-      color #ffffff
+      color: var(--text-theme-color)
       overflow-x hidden
 
       .task-list-inner {
@@ -108,7 +108,7 @@
         }
 
         .el-textarea {
-          --el-input-focus-border-color: #47FFF1;
+          // --el-input-focus-border-color: #47FFF1;
         }
 
         .el-textarea__inner {
@@ -142,7 +142,7 @@
         }
 
         .el-form-item__label {
-          color #ffffff
+          color: var(--text-theme-color)
         }
 
         // 图片上传样式
diff --git a/web/src/assets/css/images-wall.styl b/web/src/assets/css/images-wall.styl
index d64b82bc..5fad6e0f 100644
--- a/web/src/assets/css/images-wall.styl
+++ b/web/src/assets/css/images-wall.styl
@@ -9,11 +9,11 @@
 
 .page-images-wall {
   display: flex;
-  background-color: #282c34;
+  // background-color: #282c34;
 
   .inner {
     width 100%
-    color #ffffff
+    color var(--text-theme-color);
     overflow hidden
 
     .header {
@@ -33,7 +33,7 @@
           font-size 16px
 
           .el-radio {
-            color #ffffff
+            color var(--text-theme-color);
           }
 
         }
@@ -68,7 +68,7 @@
           width 100%
           bottom 0
           left 0
-          color #ffffff
+          color var(--text-theme-color);
           padding 8px 10px
           line-height 1.2
           border-top-right-radius 10px
@@ -77,11 +77,15 @@
           span {
             word-break break-all
           }
+          .iconfont{
+            
 
+          }
           .el-icon, .iconfont {
             top 2px
             cursor pointer
-            border 1px solid #ffffff
+           color: #fff !important;
+            border 1px solid #fff !important;
             border-radius 5px
             padding 2px
             font-size 16px;
diff --git a/web/src/assets/css/luma.styl b/web/src/assets/css/luma.styl
index a3b95efb..450e0af5 100644
--- a/web/src/assets/css/luma.styl
+++ b/web/src/assets/css/luma.styl
@@ -1,12 +1,14 @@
 .page-luma {
   display flex
   height 100%
-  background-color #0E0808
+  // background-color #0E0808
+  // background: var(--chat-bg);
+
   overflow auto
   //justify-content center
   flex-flow column
   align-items center
-  background: linear-gradient(180deg, rgba(75, 62, 53, 0.8), rgba(144, 50, 181, 0.3));
+  // background: linear-gradient(180deg, rgba(75, 62, 53, 0.8), rgba(144, 50, 181, 0.3));
 
 
   .prompt-box {
@@ -50,7 +52,7 @@
       .btn-swap {
         margin-right 10px
         .icon-exchange{
-          color #ffffff
+          color var(--text-theme-color)
           cursor pointer
         }
       }
@@ -60,18 +62,20 @@
     .prompt-container {
       width: 100%;
       .input-container {
-        background: linear-gradient(90deg, rgba(75, 62, 53, 0.8), rgba(144, 50, 181, 0.3));
+        background: var(--chat-bg);
+        // background: linear-gradient(90deg, rgba(75, 62, 53, 0.8), rgba(144, 50, 181, 0.3));
         border-radius: 28px;
         padding: 10px 20px;
         display: flex;
         align-items: center;
-        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+        margin-bottom: 16px;
+        // box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
 
         .prompt-input {
           background: transparent;
           border: none;
           outline: none;
-          color: white;
+          color var(--text-theme-color);
           font-size: 14px;
           width: 100%;
           padding: 10px;
@@ -82,16 +86,14 @@
           overflow-wrap: break-word;
 
           scrollbar-width: none; /* 隐藏滚动条 */
-          &::placeholder {
-            color: rgba(255, 255, 255, 0.6);
-          }
+         
           &::-webkit-scrollbar {
             display: none;
           }
         }
 
         .upload-icon, .send-icon {
-          color #e1e1e1
+          color var( --el-color-primary)
           .iconfont {
             font-size 20px
             cursor pointer
@@ -104,7 +106,7 @@
       .params {
         display flex
         justify-content right
-        color #e1e1e1
+        color var(--text-theme-color);
         font-size 14px
         padding 10px 30px
 
@@ -129,9 +131,9 @@
     padding 0 40px
 
     .h-title {
-      color #ffffff
+      color var(--text-theme-color)
       width 100%
-      font-size 36px
+      // font-size 36px
       text-align left
     }
 
@@ -147,9 +149,7 @@
         cursor pointer
         margin-bottom 10px
 
-        &:hover {
-          background-color #2A2525
-        }
+       
 
         .left {
           .container {
@@ -189,7 +189,8 @@
               border-radius 5px
               background rgba(100, 100, 100, 0.3)
               cursor pointer
-              color #ffffff
+              color var(--text-theme-color)
+              
               opacity 0
               transform: translate(-50%, 0px);
               transition opacity 0.3s ease 0s
@@ -222,7 +223,8 @@
             text-overflow ellipsis
           }
           .prompt {
-            color rgb(250 247 245)
+            color var( --el-text-color-primary)
+            cursor: text
           }
           .failed {
             color #E4696B
@@ -248,7 +250,7 @@
 
               .text {
                 margin-right 10px
-                color #e1e1e1
+                color #000
               }
             }
 
@@ -259,8 +261,9 @@
               color #726E6C
 
               &:hover {
-                background #5f5958
-                color #e1e1e1
+                // background #5f5958
+                // color #e1e1e1
+                color:var(--el-color-primary)
               }
 
               .downloading {
@@ -317,7 +320,7 @@
     //        border-radius 20px
     //        padding 3px 15px
     //        cursor pointer
-    //        color #ffffff
+    //        color var(--text-theme-color)
     //        font-size 14px
     //
     //        .iconfont {
@@ -344,14 +347,14 @@
 
   .btn {
     margin-right 10px
-    background-color #363030
     border none
     border-radius 5px
     padding 5px 10px
     cursor pointer
+    color #000
 
     &:hover {
-      background-color #5F5958
+      opacity: 0.7
     }
   }
 
diff --git a/web/src/assets/css/mark-map.styl b/web/src/assets/css/mark-map.styl
index e2f62c34..3f735e07 100644
--- a/web/src/assets/css/mark-map.styl
+++ b/web/src/assets/css/mark-map.styl
@@ -1,5 +1,5 @@
 .page-mark-map {
-  background-color: #282c34;
+  // background-color: #282c34;
   height 100%
 
   .inner {
@@ -7,20 +7,20 @@
 
     .mark-map-box {
       margin 10px
-      background-color #262626
-      border 1px solid #454545
+      // background-color #262626
+      // border 1px solid #454545
       min-width 300px
       max-width 300px
       padding 10px
       border-radius 10px
-      color #ffffff;
+      color var(--text-theme-color);
       font-size 14px
 
       h2 {
         font-weight: bold;
         font-size 20px
         text-align center
-        color #47fff1
+        color var( --theme-textcolor-normal)
       }
 
       // 隐藏滚动条
@@ -43,7 +43,7 @@
             width 100%
 
             span {
-              color #2D3A4B
+              color #fff
             }
           }
 
@@ -61,13 +61,15 @@
 
     .el-form {
       .el-form-item__label {
-        color #ffffff
+        color var(--text-theme-color)
       }
     }
 
 
     .chat-box {
       width 100%
+      background: var(--chat-bg);
+
 
       .top-bar {
         display flex
@@ -77,13 +79,13 @@
       }
 
       .markdown {
-        color #ffffff
+        color var(--text-theme-color)
         display flex
         justify-content center
         align-items center
 
         h1 {
-          color: #47fff1;
+          color: var( --theme-textcolor-normal);
         }
 
         h2 {
@@ -116,7 +118,7 @@
 
         .markmap {
           width 100%
-          color #ffffff
+          color var(--text-theme-color)
           font-size 12px
 
           .markmap-foreign {
@@ -139,7 +141,7 @@
 
             .mm-toolbar-item {
               cursor pointer
-              color var(--el-color-white)
+              color var( --el-text-color-primary)
             }
           }
 
diff --git a/web/src/assets/css/markdown/vue.css b/web/src/assets/css/markdown/vue.css
index 296b9a7c..862aaadf 100644
--- a/web/src/assets/css/markdown/vue.css
+++ b/web/src/assets/css/markdown/vue.css
@@ -4,10 +4,11 @@
         list-style: normal;
     }
     a {
-        color: #42b983;
-        font-weight: 600;
+        
+        color :var(--a-link-color);
+        text-decoration: underline;
+       
         padding: 0 2px;
-        text-decoration: none;
     }
 
     h1,
diff --git a/web/src/assets/css/member.css b/web/src/assets/css/member.css
index 0627f47e..55cc374c 100644
--- a/web/src/assets/css/member.css
+++ b/web/src/assets/css/member.css
@@ -141,7 +141,7 @@
   margin-right: 5px;
 }
 .member .inner .product-box .list-box .product-item:hover {
-  box-shadow: 0 0 10px rgba(71,255,241,0.6); /* 添加阴影效果 */
+  box-shadow: 0 0 10px var(--shadow-color); /* 添加阴影效果 */
   transform: translateY(-10px); /* 向上移动10像素 */
 }
 .member .inner .product-box .headline {
diff --git a/web/src/assets/css/member.styl b/web/src/assets/css/member.styl
index aca86dbf..d638d087 100644
--- a/web/src/assets/css/member.styl
+++ b/web/src/assets/css/member.styl
@@ -1,18 +1,18 @@
 .member {
-  background-color: #282c34;
+  // background-color: #282c34;
   height 100%
 
   .title {
     text-align center
     background-color #25272d
     font-size 24px
-    color #ffffff
+    color var(--text-theme-color)
     padding 10px
     border-bottom 1px solid #3c3c3c
   }
 
   .inner {
-    color #ffffff
+    color var(--text-theme-color)
     padding 15px 0 15px 15px;
     overflow-x hidden
     overflow-y visible
@@ -22,13 +22,13 @@
     .user-profile {
       padding 10px 20px 20px 20px
       width 300px
-      background-color #393F4A
-      color #ffffff
+      background-color var(--chat-bg)
+      color var(--text-theme-color)
       border-radius 10px
       //height 100vh
 
       .el-form-item__label {
-        color #ffffff
+        color var(--text-theme-color)
         justify-content start
       }
 
@@ -58,7 +58,8 @@
 
       .list-box {
         .product-item {
-          border 1px solid #666666
+          // border 1px solid #666666
+          background-color var(--chat-bg)
           border-radius 6px
           overflow hidden
           cursor pointer
@@ -87,7 +88,7 @@
               text-align center
               font-size 16px
               font-weight bold
-              color #47fff1
+              color var( --el-color-primary)
             }
           }
 
@@ -138,14 +139,14 @@
                 padding 0
 
                 .icon-alipay,.icon-wechat-pay {
-                  color #ffffff
+                  color var(--text-theme-color)
                 }
                 .icon-qq {
                   color #15A6E8
                   font-size 24px
                 }
                 .icon-jd-pay {
-                  color #ffffff
+                  color var(--text-theme-color)
                   font-size 24px
                 }
                 .icon-douyin {
@@ -161,7 +162,7 @@
           }
 
           &:hover {
-            box-shadow: 0 0 10px rgba(71, 255, 241, 0.6); /* 添加阴影效果 */
+            // box-shadow: 0 0 10px rgba(71, 255, 241, 0.6); /* 添加阴影效果 */
             transform: translateY(-10px); /* 向上移动10像素 */
           }
         }
diff --git a/web/src/assets/css/running-job-list.styl b/web/src/assets/css/running-job-list.styl
index 9e870283..51d66638 100644
--- a/web/src/assets/css/running-job-list.styl
+++ b/web/src/assets/css/running-job-list.styl
@@ -12,7 +12,7 @@
     height 200px
     overflow hidden
     padding 2px
-    background-color #555555
+    background-color var( --gray-btn-bg)
 
     .job-item-inner {
       position relative
diff --git a/web/src/assets/css/suno.styl b/web/src/assets/css/suno.styl
index 7e787589..adf528f7 100644
--- a/web/src/assets/css/suno.styl
+++ b/web/src/assets/css/suno.styl
@@ -1,7 +1,7 @@
 .page-suno {
   display flex
   height 100%
-  background-color #0E0808
+  // background-color #0E0808
   overflow auto
 
   .left-bar {
@@ -24,7 +24,7 @@
 
     .params {
       padding 20px 0
-      color rgb(250 247 245)
+      color: var(--text-theme-color);
       position relative
 
       .pure-music {
@@ -77,6 +77,7 @@
             opacity: 0.9;
           }
         }
+        
 
         .song {
           display flex
@@ -137,6 +138,8 @@
           bottom 10px
           font-size 12px
           padding 2px 5px
+          background-color var(--sm-btn-bg)
+    color: #fff
         }
       }
 
@@ -154,12 +157,16 @@
           .tag {
             margin-right 10px
             word-break keep-all
-            background-color #312C2C
-            color #e1e1e1
-            border-radius 5px
+            background: var(--card-bg);
+            color:var(--theme-text-color-primary);
+            opacity 0.7
+            border-radius 8px
             padding 3px 6px
             cursor pointer
             font-size 13px
+            &:hover{
+              color:var( --el-color-primary)
+            }
           }
         }
       }
@@ -169,6 +176,8 @@
     width 100%
     color rgb(250 247 245)
     overflow auto
+    background: var(--chat-bg)
+
 
     .list-box {
       padding 0 0 0 20px
@@ -180,7 +189,7 @@
         margin-bottom 10px
 
         &:hover {
-          background-color #2A2525
+         background: rgba(188,149,236,0.08)
         }
 
         .left {
@@ -247,18 +256,18 @@
             font-weight 700
 
             a {
-              color rgb(250 247 245)
+              color vae( --a-link-color)
               &:hover {
                 text-decoration underline
               }
             }
 
             .model {
-              color #E2E8F0
-              background-color #1C1616
-              border 1px solid #8f8f8f
+              color #8f8f8f
+              // background-color #1C1616
+              // border 1px solid #8f8f8f
               font-weight normal
-              font-size 14px
+              font-size 12px
               padding 1px 3px
               border-radius 5px
               margin-left 10px
@@ -271,7 +280,7 @@
 
           .tags {
             font-size 14px
-            color #d1d1d1
+            color var(--el-text-color-primary)
             padding 3px 0
           }
         }
@@ -303,8 +312,9 @@
               color #726E6C
 
               &:hover {
-                background #5f5958
-                color #e1e1e1
+                // background #5f5958
+                // color #e1e1e1
+                color:var(--el-color-primary)
               }
 
               .downloading {
@@ -372,14 +382,25 @@
 
   .btn {
     margin-right 10px
-    background-color #363030
+    color: #000
     border none
     border-radius 5px
     padding 5px 10px
     cursor pointer
+    
 
     &:hover {
-      background-color #5F5958
+      opacity :0.8
     }
   }
+}
+.submit-btn {
+  display flex
+  align-items: center
+  margin: 20px 0
+  justify-content: center;
+  .el-button {
+    width 200px
+  }
+
 }
\ No newline at end of file
diff --git a/web/src/assets/css/theme-dark.styl b/web/src/assets/css/theme-dark.styl
index 9fbf743b..591cc15f 100644
--- a/web/src/assets/css/theme-dark.styl
+++ b/web/src/assets/css/theme-dark.styl
@@ -20,7 +20,9 @@
   }
   --btnColor: linear-gradient(88deg, #af61f0 1.44%, #5b62ce);
   --border-active:rgba(255, 255, 255, 0.1);
-  --card-bg: rgba(17, 28, 68, 1);
+  // --card-bg: rgba(17, 28, 68, 1);
+  --card-bg: #1f243f;
+   --card-bg-table: rgba(17, 28, 68, 1);
   --theme-bg:rgb(13, 20, 53);
   --theme-bg-all:rgb(13, 20, 53);
    --sign-bg: rgba(27, 37, 75, 1);
@@ -28,7 +30,7 @@
   --text-color-primary: #d1c7ff;
   --el-text-color-regular: rgba(163, 174, 208, 1)
   --el-border-color:rgb(79, 80, 85)
-  --el-text-color-primary: #fff;
+  --el-text-color-primary: #fff;//黑白切换
    --el-bg-color-overlay: rgba(17, 28, 68, 1);
    --el-border-color-light: rgba(255, 255, 255, 0.2);
   --line-box:rgba(255, 255, 255, 0.1);
@@ -39,6 +41,7 @@
 --el-color-primary-light-9:rgba(86, 86, 95, .2);
 --chat-wel-bg:#2d2f388a;
   --theme-text-color-secondary: #a3aed0;
+  // --el-pagination-button-bg-color: rgba(86,86,95,0.2); 
 
    //layout 
   .more-menus li.moreTitle,
@@ -52,9 +55,14 @@
   .more-menus span.title{
     color:#000;
   }
+  .menu-list .menu-list-item.active .el-icon{
+    background: #0080006e;
+  }
 
   --theme-text-color-primary: #fff;
   --theme-text-primary: #f3f3f3;
   --chat-content-bg:rgba(86, 86, 95, .2);
   --chat-content-bg-list:rgba(86, 86, 95, .2);
+  
+  // --theme-text-tertiary: #e1e1e1;
 }
\ No newline at end of file
diff --git a/web/src/assets/css/theme-light.styl b/web/src/assets/css/theme-light.styl
index b23e7e0c..30dfb64e 100644
--- a/web/src/assets/css/theme-light.styl
+++ b/web/src/assets/css/theme-light.styl
@@ -45,7 +45,7 @@
   --chat-list-bg: #0302020a;
 --chat-content-bg-list:#fff;
 --chat-wel-bg:rgba(247, 247, 248, 1);
-
+--el-pagination-button-bg-color: rgba(86,86,95,0.2);
 
 }
 
diff --git a/web/src/assets/css/waterfall-list.styl b/web/src/assets/css/waterfall-list.styl
index 071c5302..4c9ccd0d 100644
--- a/web/src/assets/css/waterfall-list.styl
+++ b/web/src/assets/css/waterfall-list.styl
@@ -73,7 +73,7 @@
 
       .animate {
         &:hover {
-          box-shadow: 0 0 10px rgba(71, 255, 241, 0.6); /* 添加阴影效果 */
+          box-shadow: 0 0 10px var(--shadow-color); /* 添加阴影效果 */
           transform: translateY(-10px); /* 向上移动10像素 */
         }
       }
diff --git a/web/src/assets/img/no-data.png b/web/src/assets/img/no-data.png
new file mode 100644
index 00000000..7358e2f4
Binary files /dev/null and b/web/src/assets/img/no-data.png differ
diff --git a/web/src/components/ChatReply.vue b/web/src/components/ChatReply.vue
index a2d76594..c258a1c0 100644
--- a/web/src/components/ChatReply.vue
+++ b/web/src/components/ChatReply.vue
@@ -256,7 +256,7 @@ const reGenerate = (prompt) => {
 
             code {
               color:var(--theme-text-color-primary);
-              background-color #e7e7e8
+              background-color var(--el-color-primary-light-3)
               padding 0 3px;
               border-radius 5px;
             }
@@ -348,7 +348,7 @@ const reGenerate = (prompt) => {
           padding 10px 10px 10px 0;
 
           .bar-item {
-            background-color #e7e7e8;
+            background-color var( --little-btn-bg);
             color #888
             padding 3px 5px;
             margin-right 10px;
@@ -433,7 +433,7 @@ const reGenerate = (prompt) => {
 
               code {
                 color:var(--theme-text-color-primary);
-                background-color #e7e7e8
+                background-color var( --little-btn-bg)
                 padding 0 3px;
                 border-radius 5px;
               }
@@ -539,7 +539,7 @@ const reGenerate = (prompt) => {
           }
 
           .bar-item.bg {
-            background-color #e7e7e8
+            background-color var( --gray-btn-bg)
             cursor pointer
           }
 
diff --git a/web/src/components/InviteList.vue b/web/src/components/InviteList.vue
index 6fe482ed..332b8cea 100644
--- a/web/src/components/InviteList.vue
+++ b/web/src/components/InviteList.vue
@@ -1,76 +1,90 @@
 <template>
   <div class="invite-list" v-loading="loading">
     <el-row v-if="items.length > 0">
-      <el-table :data="items" :row-key="row => row.id" table-layout="auto" border
-                style="--el-table-border-color:#373C47;
-                --el-table-tr-bg-color:#2D323B;
-                --el-table-row-hover-bg-color:#373C47;
-                --el-table-header-bg-color:#474E5C;
-                --el-table-text-color:#d1d1d1">
-        <el-table-column prop="username" label="用户"/>
-        <el-table-column prop="invite_code" label="邀请码"/>
-        <el-table-column prop="remark" label="邀请奖励"/>
+      <el-table
+        :data="items"
+        :row-key="(row) => row.id"
+        table-layout="auto"
+        border
+        style="
+          --el-table-border-color: #373c47;
+          --el-table-tr-bg-color: #2d323b;
+          --el-table-row-hover-bg-color: #373c47;
+          --el-table-header-bg-color: #474e5c;
+          --el-table-text-color: #d1d1d1;
+        "
+      >
+        <el-table-column prop="username" label="用户" />
+        <el-table-column prop="invite_code" label="邀请码" />
+        <el-table-column prop="remark" label="邀请奖励" />
 
         <el-table-column label="注册时间">
           <template #default="scope">
-            <span>{{ dateFormat(scope.row['created_at']) }}</span>
+            <span>{{ dateFormat(scope.row["created_at"]) }}</span>
           </template>
         </el-table-column>
       </el-table>
     </el-row>
-    <el-empty :image-size="100" v-else/>
+    <el-empty :image-size="100" :image="nodata" description="暂无数据" v-else />
     <div class="pagination">
-      <el-pagination v-if="total > 0" background
-                     layout="total,prev, pager, next"
-                     :hide-on-single-page="true"
-                     v-model:current-page="page"
-                     v-model:page-size="pageSize"
-                     @current-change="fetchData()"
-                     :total="total"/>
-
+      <el-pagination
+        v-if="total > 0"
+        background
+        layout="total,prev, pager, next"
+        :hide-on-single-page="true"
+        v-model:current-page="page"
+        v-model:page-size="pageSize"
+        style="--el-pagination-button-bg-color: rgba(86, 86, 95, 0.2)"
+        @current-change="fetchData()"
+        :total="total"
+      />
     </div>
   </div>
 </template>
 
 <script setup>
-import {onMounted, ref} from "vue";
-import {httpGet} from "@/utils/http";
-import {ElMessage} from "element-plus";
-import {dateFormat} from "@/utils/libs";
+import nodata from "@/assets/img/no-data.png";
+
+import { onMounted, ref } from "vue";
+import { httpGet } from "@/utils/http";
+import { ElMessage } from "element-plus";
+import { dateFormat } from "@/utils/libs";
 import Clipboard from "clipboard";
 
-const items = ref([])
-const total = ref(0)
-const page = ref(1)
-const pageSize = ref(10)
-const loading = ref(true)
+const items = ref([]);
+const total = ref(0);
+const page = ref(1);
+const pageSize = ref(10);
+const loading = ref(true);
 
 onMounted(() => {
-  fetchData()
-  const clipboard = new Clipboard('.copy-order-no');
-  clipboard.on('success', () => {
+  fetchData();
+  const clipboard = new Clipboard(".copy-order-no");
+  clipboard.on("success", () => {
     ElMessage.success("复制成功！");
-  })
+  });
 
-  clipboard.on('error', () => {
-    ElMessage.error('复制失败！');
-  })
-})
+  clipboard.on("error", () => {
+    ElMessage.error("复制失败！");
+  });
+});
 
 // 获取数据
 const fetchData = () => {
-  httpGet('/api/invite/list', {page: page.value, page_size: pageSize.value}).then((res) => {
-    if (res.data) {
-      items.value = res.data.items
-      total.value = res.data.total
-      page.value = res.data.page
-      pageSize.value = res.data.page_size
-    }
-    loading.value = false
-  }).catch(e => {
-    ElMessage.error("获取数据失败：" + e.message);
-  })
-}
+  httpGet("/api/invite/list", { page: page.value, page_size: pageSize.value })
+    .then((res) => {
+      if (res.data) {
+        items.value = res.data.items;
+        total.value = res.data.total;
+        page.value = res.data.page;
+        pageSize.value = res.data.page_size;
+      }
+      loading.value = false;
+    })
+    .catch((e) => {
+      ElMessage.error("获取数据失败：" + e.message);
+    });
+};
 </script>
 
 <style scoped lang="stylus">
@@ -90,4 +104,4 @@ const fetchData = () => {
     color #20a0ff
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/web/src/components/RealtimeConversation.vue b/web/src/components/RealtimeConversation.vue
index b89954c8..77739034 100644
--- a/web/src/components/RealtimeConversation.vue
+++ b/web/src/components/RealtimeConversation.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-container class="realtime-conversation" :style="{height: height}">
+  <el-container class="realtime-conversation" :style="{ height: height }">
     <!-- connection animation -->
     <el-container class="connection-container" v-if="!isConnected">
       <div class="phone-container">
@@ -36,14 +36,18 @@
         </div>
       </div>
       <div class="call-controls">
-        <el-tooltip content="长按发送语音" placement="top" effect="light">
+        <el-tooltip content="长按发送语音" placement="top">
           <ripple-button>
-            <button class="call-button answer" @mousedown="startRecording" @mouseup="stopRecording">
+            <button
+              class="call-button answer"
+              @mousedown="startRecording"
+              @mouseup="stopRecording"
+            >
               <i class="iconfont icon-mic-bold"></i>
             </button>
           </ripple-button>
         </el-tooltip>
-        <el-tooltip content="结束通话" placement="top" effect="light">
+        <el-tooltip content="结束通话" placement="top">
           <button class="call-button hangup" @click="hangUp">
             <i class="iconfont icon-hung-up"></i>
           </button>
@@ -51,32 +55,31 @@
       </div>
     </div>
   </el-container>
-
 </template>
 
 <script setup>
 import RippleButton from "@/components/ui/RippleButton.vue";
-import { ref, onMounted, onUnmounted } from 'vue';
-import { RealtimeClient } from '@openai/realtime-api-beta';
-import { WavRecorder, WavStreamPlayer } from '@/lib/wavtools/index.js';
-import { instructions } from '@/utils/conversation_config.js';
-import { WavRenderer } from '@/utils/wav_renderer';
-import {showMessageError} from "@/utils/dialog";
-import {getUserToken} from "@/store/session";
+import { ref, onMounted, onUnmounted } from "vue";
+import { RealtimeClient } from "@openai/realtime-api-beta";
+import { WavRecorder, WavStreamPlayer } from "@/lib/wavtools/index.js";
+import { instructions } from "@/utils/conversation_config.js";
+import { WavRenderer } from "@/utils/wav_renderer";
+import { showMessageError } from "@/utils/dialog";
+import { getUserToken } from "@/store/session";
 
 // eslint-disable-next-line no-unused-vars,no-undef
 const props = defineProps({
   height: {
     type: String,
-    default: '100vh'
+    default: "100vh"
   }
-})
+});
 // eslint-disable-next-line no-undef
-const emits = defineEmits(['close']);
+const emits = defineEmits(["close"]);
 
 /********************** connection animation code *************************/
 const fullText = "正在接通中...";
-const connectingText = ref("")
+const connectingText = ref("");
 let index = 0;
 const typeText = () => {
   if (index < fullText.length) {
@@ -85,12 +88,12 @@ const typeText = () => {
     setTimeout(typeText, 200); // 每300毫秒显示一个字
   } else {
     setTimeout(() => {
-      connectingText.value = '';
+      connectingText.value = "";
       index = 0;
       typeText();
     }, 1000); // 等待1秒后重新开始
   }
-}
+};
 /*************************** end of code ****************************************/
 
 /********************** conversation process code ***************************/
@@ -102,31 +105,29 @@ const animateVoice = () => {
   rightVoiceActive.value = Math.random() > 0.5;
 };
 
-
-
 const wavRecorder = ref(new WavRecorder({ sampleRate: 24000 }));
 const wavStreamPlayer = ref(new WavStreamPlayer({ sampleRate: 24000 }));
-let host = process.env.VUE_APP_WS_HOST
-if (host === '') {
-  if (location.protocol === 'https:') {
-    host = 'wss://' + location.host;
+let host = process.env.VUE_APP_WS_HOST;
+if (host === "") {
+  if (location.protocol === "https:") {
+    host = "wss://" + location.host;
   } else {
-    host = 'ws://' + location.host;
+    host = "ws://" + location.host;
   }
 }
 const client = ref(
-    new RealtimeClient({
-      url: `${host}/api/realtime`,
-      apiKey: getUserToken(),
-      dangerouslyAllowAPIKeyInBrowser: true,
-    })
+  new RealtimeClient({
+    url: `${host}/api/realtime`,
+    apiKey: getUserToken(),
+    dangerouslyAllowAPIKeyInBrowser: true
+  })
 );
 // // Set up client instructions and transcription
 client.value.updateSession({
   instructions: instructions,
   turn_detection: null,
-  input_audio_transcription: { model: 'whisper-1' },
-  voice: 'alloy',
+  input_audio_transcription: { model: "whisper-1" },
+  voice: "alloy"
 });
 
 // set voice wave canvas
@@ -137,62 +138,66 @@ const isRecording = ref(false);
 const backgroundAudio = ref(null);
 const hangUpAudio = ref(null);
 function sleep(ms) {
-  return new Promise(resolve => setTimeout(resolve, ms));
+  return new Promise((resolve) => setTimeout(resolve, ms));
 }
 const connect = async () => {
   if (isConnected.value) {
-    return
+    return;
   }
   // 播放背景音乐
   if (backgroundAudio.value) {
-    backgroundAudio.value.play().catch(error => {
-      console.error('播放失败，可能是浏览器的自动播放策略导致的:', error);
+    backgroundAudio.value.play().catch((error) => {
+      console.error("播放失败，可能是浏览器的自动播放策略导致的:", error);
     });
   }
   // 模拟拨号延时
-  await sleep(3000)
+  await sleep(3000);
   try {
     await client.value.connect();
     await wavRecorder.value.begin();
     await wavStreamPlayer.value.connect();
-    console.log("对话连接成功！")
+    console.log("对话连接成功！");
     if (!client.value.isConnected()) {
-      return
+      return;
     }
 
     isConnected.value = true;
-    backgroundAudio.value?.pause()
-    backgroundAudio.value.currentTime = 0
+    backgroundAudio.value?.pause();
+    backgroundAudio.value.currentTime = 0;
     client.value.sendUserMessageContent([
       {
-        type: 'input_text',
-        text: '你好，我是极客学长!',
-      },
+        type: "input_text",
+        text: "你好，我是极客学长!"
+      }
     ]);
-    if (client.value.getTurnDetectionType() === 'server_vad') {
-      await wavRecorder.value.record((data) => client.value.appendInputAudio(data.mono));
+    if (client.value.getTurnDetectionType() === "server_vad") {
+      await wavRecorder.value.record((data) =>
+        client.value.appendInputAudio(data.mono)
+      );
     }
   } catch (e) {
-    console.error(e)
+    console.error(e);
   }
 };
 
 // 开始语音输入
 const startRecording = async () => {
   if (isRecording.value) {
-    return
+    return;
   }
 
   isRecording.value = true;
   try {
-   const trackSampleOffset = await wavStreamPlayer.value.interrupt();
-   if (trackSampleOffset?.trackId) {
-     const { trackId, offset } = trackSampleOffset;
-     client.value.cancelResponse(trackId, offset);
-   }
-   await wavRecorder.value.record((data) => client.value.appendInputAudio(data.mono));
+    const trackSampleOffset = await wavStreamPlayer.value.interrupt();
+    if (trackSampleOffset?.trackId) {
+      const { trackId, offset } = trackSampleOffset;
+      client.value.cancelResponse(trackId, offset);
+    }
+    await wavRecorder.value.record((data) =>
+      client.value.appendInputAudio(data.mono)
+    );
   } catch (e) {
-   console.error(e)
+    console.error(e);
   }
 };
 
@@ -203,7 +208,7 @@ const stopRecording = async () => {
     await wavRecorder.value.pause();
     client.value.createResponse();
   } catch (e) {
-    console.error(e)
+    console.error(e);
   }
 };
 
@@ -232,13 +237,13 @@ const initialize = async () => {
           canvas.width = canvas.offsetWidth;
           canvas.height = canvas.offsetHeight;
         }
-        const ctx = canvas.getContext('2d');
+        const ctx = canvas.getContext("2d");
         if (ctx) {
           ctx.clearRect(0, 0, canvas.width, canvas.height);
           const result = wavRecorder.value.recording
-              ? wavRecorder.value.getFrequencies('voice')
-              : { values: new Float32Array([0]) };
-          WavRenderer.drawBars(canvas, ctx, result.values, '#0099ff', 10, 0, 8);
+            ? wavRecorder.value.getFrequencies("voice")
+            : { values: new Float32Array([0]) };
+          WavRenderer.drawBars(canvas, ctx, result.values, "#0099ff", 10, 0, 8);
         }
       }
       if (serverCanvasRef.value) {
@@ -247,13 +252,13 @@ const initialize = async () => {
           canvas.width = canvas.offsetWidth;
           canvas.height = canvas.offsetHeight;
         }
-        const ctx = canvas.getContext('2d');
+        const ctx = canvas.getContext("2d");
         if (ctx) {
           ctx.clearRect(0, 0, canvas.width, canvas.height);
           const result = wavStreamPlayer.value.analyser
-              ?  wavStreamPlayer.value.getFrequencies('voice')
-              : { values: new Float32Array([0]) };
-          WavRenderer.drawBars(canvas, ctx, result.values, '#009900', 10, 0, 8);
+            ? wavStreamPlayer.value.getFrequencies("voice")
+            : { values: new Float32Array([0]) };
+          WavRenderer.drawBars(canvas, ctx, result.values, "#009900", 10, 0, 8);
         }
       }
       requestAnimationFrame(render);
@@ -261,17 +266,17 @@ const initialize = async () => {
   };
   render();
 
-  client.value.on('error', (event) => {
-    showMessageError(event.error)
+  client.value.on("error", (event) => {
+    showMessageError(event.error);
   });
 
-  client.value.on('realtime.event', (re) => {
-    if (re.event.type === 'error') {
-      showMessageError(re.event.error)
+  client.value.on("realtime.event", (re) => {
+    if (re.event.type === "error") {
+      showMessageError(re.event.error);
     }
   });
 
-  client.value.on('conversation.interrupted', async () => {
+  client.value.on("conversation.interrupted", async () => {
     const trackSampleOffset = await wavStreamPlayer.value.interrupt();
     if (trackSampleOffset?.trackId) {
       const { trackId, offset } = trackSampleOffset;
@@ -279,21 +284,20 @@ const initialize = async () => {
     }
   });
 
-  client.value.on('conversation.updated', async ({ item, delta }) => {
+  client.value.on("conversation.updated", async ({ item, delta }) => {
     // console.log('item updated', item, delta)
     if (delta?.audio) {
       wavStreamPlayer.value.add16BitPCM(delta.audio, item.id);
     }
   });
-
-}
+};
 
 const voiceInterval = ref(null);
 onMounted(() => {
-  initialize()
+  initialize();
   // 启动聊天进行中的动画
   voiceInterval.value = setInterval(animateVoice, 200);
-  typeText()
+  typeText();
 });
 
 onUnmounted(() => {
@@ -304,32 +308,31 @@ onUnmounted(() => {
 // 挂断通话
 const hangUp = async () => {
   try {
-    isConnected.value = false
+    isConnected.value = false;
     // 停止播放拨号音乐
     if (backgroundAudio.value?.currentTime) {
-      backgroundAudio.value?.pause()
-      backgroundAudio.value.currentTime = 0
+      backgroundAudio.value?.pause();
+      backgroundAudio.value.currentTime = 0;
     }
     // 断开客户端的连接
-    client.value.reset()
+    client.value.reset();
     // 中断语音输入和输出服务
-    await wavRecorder.value.end()
-    await wavStreamPlayer.value.interrupt()
+    await wavRecorder.value.end();
+    await wavStreamPlayer.value.interrupt();
   } catch (e) {
-    console.error(e)
+    console.error(e);
   } finally {
     // 播放挂断音乐
-    hangUpAudio.value?.play()
-    emits('close')
+    hangUpAudio.value?.play();
+    emits("close");
   }
 };
 
 // eslint-disable-next-line no-undef
-defineExpose({ connect,hangUp });
+defineExpose({ connect, hangUp });
 </script>
 
 <style scoped lang="stylus">
 
 @import "@/assets/css/realtime.styl"
-
-</style>
\ No newline at end of file
+</style>
diff --git a/web/src/components/TaskList.vue b/web/src/components/TaskList.vue
index 86ced83a..382fe33b 100644
--- a/web/src/components/TaskList.vue
+++ b/web/src/components/TaskList.vue
@@ -3,12 +3,14 @@
     <div class="running-job-box" v-if="list.length > 0">
       <div class="job-item" v-for="item in list" :key="item.id">
         <div v-if="item.progress > 0" class="job-item-inner">
-
-        <div class="progress" v-if="item.progress > 0">
-          <el-progress type="circle" :percentage="item.progress" :width="100"
-                       color="#47fff1"/>
-        </div>
-
+          <div class="progress" v-if="item.progress > 0">
+            <el-progress
+              type="circle"
+              :percentage="item.progress"
+              :width="100"
+              color="#47fff1"
+            />
+          </div>
         </div>
         <el-image fit="cover" v-else>
           <template #error>
@@ -20,21 +22,22 @@
         </el-image>
       </div>
     </div>
-    <el-empty :image-size="100" v-else/>
+    <el-empty :image-size="100" v-else :image="nodata" description="暂无任务" />
   </div>
 </template>
 
 <script setup>
+import nodata from "@/assets/img/no-data.png";
+
 // eslint-disable-next-line no-undef
 const props = defineProps({
   list: {
     type: Array,
-    default:[],
+    default: []
   }
-})
-
+});
 </script>
 
 <style scoped lang="stylus">
 @import "~@/assets/css/running-job-list.styl"
-</style>
\ No newline at end of file
+</style>
diff --git a/web/src/components/UserOrder.vue b/web/src/components/UserOrder.vue
index ffbbc4e5..52149acd 100644
--- a/web/src/components/UserOrder.vue
+++ b/web/src/components/UserOrder.vue
@@ -1,95 +1,111 @@
 <template>
-  <div class="user-bill" v-loading="loading" element-loading-background="rgba(255,255,255,.3)">
+  <div
+    class="user-bill"
+    v-loading="loading"
+    element-loading-background="rgba(255,255,255,.3)"
+  >
     <el-row v-if="items.length > 0">
-      <el-table :data="items" :row-key="row => row.id" table-layout="auto" border
-                style="--el-table-border-color:#373C47;
-                --el-table-tr-bg-color:#2D323B;
-                --el-table-row-hover-bg-color:#373C47;
-                --el-table-header-bg-color:#474E5C;
-                --el-table-text-color:#d1d1d1">
+      <el-table
+        :data="items"
+        :row-key="(row) => row.id"
+        table-layout="auto"
+        border
+      >
         <el-table-column prop="order_no" label="订单号">
           <template #default="scope">
             <span>{{ scope.row.order_no }}</span>
-            <el-icon class="copy-order-no" :data-clipboard-text="scope.row.order_no">
-              <DocumentCopy/>
+            <el-icon
+              class="copy-order-no"
+              :data-clipboard-text="scope.row.order_no"
+            >
+              <DocumentCopy />
             </el-icon>
           </template>
         </el-table-column>
-        <el-table-column prop="subject" label="产品名称"/>
-        <el-table-column prop="amount" label="订单金额"/>
+        <el-table-column prop="subject" label="产品名称" />
+        <el-table-column prop="amount" label="订单金额" />
         <el-table-column label="订单算力">
           <template #default="scope">
             <span>{{ scope.row.remark?.power }}</span>
           </template>
         </el-table-column>
-        <el-table-column prop="pay_method" label="支付渠道"/>
-        <el-table-column prop="pay_name" label="支付名称"/>
+        <el-table-column prop="pay_method" label="支付渠道" />
+        <el-table-column prop="pay_name" label="支付名称" />
         <el-table-column label="支付时间">
           <template #default="scope">
-            <span v-if="scope.row['pay_time']">{{ dateFormat(scope.row['pay_time']) }}</span>
+            <span v-if="scope.row['pay_time']">{{
+              dateFormat(scope.row["pay_time"])
+            }}</span>
             <el-tag v-else>未支付</el-tag>
           </template>
         </el-table-column>
       </el-table>
     </el-row>
-    <el-empty :image-size="100" v-else/>
+    <el-empty :image-size="100" v-else />
     <div class="pagination">
-      <el-pagination v-if="total > 0" background
-                     layout="total,prev, pager, next"
-                     :hide-on-single-page="true"
-                     v-model:current-page="page"
-                     v-model:page-size="pageSize"
-                     @current-change="fetchData()"
-                     :total="total"/>
-
+      <el-pagination
+        v-if="total > 0"
+        background
+        layout="total,prev, pager, next"
+        :hide-on-single-page="true"
+        v-model:current-page="page"
+        v-model:page-size="pageSize"
+        @current-change="fetchData()"
+        style="--el-pagination-button-bg-color: rgba(86, 86, 95, 0.2)"
+        :total="total"
+      />
     </div>
   </div>
 </template>
 
 <script setup>
-import {onMounted, ref} from "vue";
-import {httpGet} from "@/utils/http";
-import {ElMessage} from "element-plus";
-import {dateFormat} from "@/utils/libs";
-import {DocumentCopy} from "@element-plus/icons-vue";
+import { onMounted, ref } from "vue";
+import { httpGet } from "@/utils/http";
+import { ElMessage } from "element-plus";
+import { dateFormat } from "@/utils/libs";
+import { DocumentCopy } from "@element-plus/icons-vue";
 import Clipboard from "clipboard";
 
-const items = ref([])
-const total = ref(0)
-const page = ref(1)
-const pageSize = ref(12)
-const loading = ref(true)
+const items = ref([]);
+const total = ref(0);
+const page = ref(1);
+const pageSize = ref(12);
+const loading = ref(true);
 
 onMounted(() => {
-  fetchData()
-  const clipboard = new Clipboard('.copy-order-no');
-  clipboard.on('success', () => {
+  fetchData();
+  const clipboard = new Clipboard(".copy-order-no");
+  clipboard.on("success", () => {
     ElMessage.success("复制成功！");
-  })
+  });
 
-  clipboard.on('error', () => {
-    ElMessage.error('复制失败！');
-  })
-})
+  clipboard.on("error", () => {
+    ElMessage.error("复制失败！");
+  });
+});
 
 // 获取数据
 const fetchData = () => {
-  httpGet('/api/order/list', {page: page.value, page_size: pageSize.value}).then((res) => {
-    if (res.data) {
-      items.value = res.data.items
-      total.value = res.data.total
-      page.value = res.data.page
-      pageSize.value = res.data.page_size
-    }
-    loading.value = false
-  }).catch(e => {
-    ElMessage.error("获取数据失败：" + e.message);
-  })
-}
+  httpGet("/api/order/list", { page: page.value, page_size: pageSize.value })
+    .then((res) => {
+      if (res.data) {
+        items.value = res.data.items;
+        total.value = res.data.total;
+        page.value = res.data.page;
+        pageSize.value = res.data.page_size;
+      }
+      loading.value = false;
+    })
+    .catch((e) => {
+      ElMessage.error("获取数据失败：" + e.message);
+    });
+};
 </script>
 
 <style scoped lang="stylus">
 .user-bill {
+  background-color: var(--chat-bg);
+
   .pagination {
     margin: 20px 0 0 0;
     display: flex;
@@ -105,4 +121,4 @@ const fetchData = () => {
     color #20a0ff
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/web/src/components/UserProfile.vue b/web/src/components/UserProfile.vue
index 25ab0e95..6b052250 100644
--- a/web/src/components/UserProfile.vue
+++ b/web/src/components/UserProfile.vue
@@ -3,77 +3,92 @@
     <el-form :model="user" label-width="100px">
       <el-row>
         <el-upload
-            class="avatar-uploader"
-            :auto-upload="true"
-            :show-file-list="false"
-            :http-request="afterRead"
-            accept=".png,.jpg,.jpeg,.bmp"
+          class="avatar-uploader"
+          :auto-upload="true"
+          :show-file-list="false"
+          :http-request="afterRead"
+          accept=".png,.jpg,.jpeg,.bmp"
         >
-          <el-avatar v-if="user.avatar" :src="user.avatar" shape="circle" :size="100"/>
+          <el-avatar
+            v-if="user.avatar"
+            :src="user.avatar"
+            shape="circle"
+            :size="100"
+          />
           <el-icon v-else class="avatar-uploader-icon">
-            <Plus/>
+            <Plus />
           </el-icon>
         </el-upload>
       </el-row>
       <el-form-item label="昵称">
-        <el-input v-model="user['nickname']"/>
+        <el-input v-model="user['nickname']" />
       </el-form-item>
       <el-form-item label="账号">
-        <span>{{ user.username }}</span>
-        <el-tooltip
+        <div class="flex">
+          <span>{{ user.username }}</span>
+          <el-tooltip
             class="box-item"
-            effect="light"
             content="您已经是 VIP 会员"
             placement="right"
-        >
-          <span class="vip-icon"><el-image v-if="user.vip" :src="vipImg" style="height: 25px;margin-left: 10px"/></span>
-        </el-tooltip>
+          >
+            <span class="vip-icon"
+              ><el-image
+                v-if="user.vip"
+                :src="vipImg"
+                style="height: 25px; margin-left: 10px"
+            /></span>
+          </el-tooltip>
+        </div>
       </el-form-item>
       <el-form-item label="剩余算力">
-        <el-tag>{{ user['power'] }}</el-tag>
+        <el-text type="warning">{{ user["power"] }}</el-text>
       </el-form-item>
-      <el-form-item label="会员到期时间" v-if="user['expired_time']  > 0">
-        <el-tag type="danger">{{ dateFormat(user['expired_time']) }}</el-tag>
+      <el-form-item label="会员到期时间" v-if="user['expired_time'] > 0">
+        <el-tag type="danger">{{ dateFormat(user["expired_time"]) }}</el-tag>
       </el-form-item>
 
       <el-row class="opt-line">
-        <el-button color="#47fff1" :dark="false" @click="save">保存</el-button>
+        <el-button :dark="false" type="primary" @click="save">保存</el-button>
       </el-row>
     </el-form>
   </div>
 </template>
 
 <script setup>
-import {onMounted, ref} from "vue"
-import {httpGet, httpPost} from "@/utils/http";
-import {ElMessage} from "element-plus";
-import {Plus} from "@element-plus/icons-vue";
+import { onMounted, ref } from "vue";
+import { httpGet, httpPost } from "@/utils/http";
+import { ElMessage } from "element-plus";
+import { Plus } from "@element-plus/icons-vue";
 import Compressor from "compressorjs";
-import {dateFormat} from "@/utils/libs";
-import {checkSession} from "@/store/cache";
+import { dateFormat } from "@/utils/libs";
+import { checkSession } from "@/store/cache";
 
 const user = ref({
   vip: false,
-  username: '演示数据',
-  nickname: '演示数据',
-  avatar: '/images/vip.png',
-  mobile: '演示数据',
-  power: 99999,
-})
-const vipImg = ref("/images/vip.png")
+  username: "演示数据",
+  nickname: "演示数据",
+  avatar: "/images/menu/member.png",
+  mobile: "演示数据",
+  power: 99999
+});
+const vipImg = ref("/images/menu/member.png");
 
 onMounted(() => {
-  checkSession().then(() => {
-    // 获取最新用户信息
-    httpGet('/api/user/profile').then(res => {
-      user.value = res.data
-    }).catch(e => {
-      ElMessage.error("获取用户信息失败：" + e.message)
+  checkSession()
+    .then(() => {
+      // 获取最新用户信息
+      httpGet("/api/user/profile")
+        .then((res) => {
+          user.value = res.data;
+        })
+        .catch((e) => {
+          ElMessage.error("获取用户信息失败：" + e.message);
+        });
+    })
+    .catch((e) => {
+      console.log(e);
     });
-  }).catch(e => {
-    console.log(e)
-  })
-})
+});
 
 const afterRead = (file) => {
   // 压缩图片并上传
@@ -81,28 +96,32 @@ const afterRead = (file) => {
     quality: 0.6,
     success(result) {
       const formData = new FormData();
-      formData.append('file', result, result.name);
+      formData.append("file", result, result.name);
       // 执行上传操作
-      httpPost('/api/upload', formData).then((res) => {
-        user.value.avatar = res.data.url
-        ElMessage.success({message: "上传成功", duration: 500})
-      }).catch((e) => {
-        ElMessage.error('图片上传失败:' + e.message)
-      })
+      httpPost("/api/upload", formData)
+        .then((res) => {
+          user.value.avatar = res.data.url;
+          ElMessage.success({ message: "上传成功", duration: 500 });
+        })
+        .catch((e) => {
+          ElMessage.error("图片上传失败:" + e.message);
+        });
     },
     error(err) {
       console.log(err.message);
-    },
+    }
   });
 };
 
 const save = () => {
-  httpPost('/api/user/profile/update', user.value).then(() => {
-    ElMessage.success({message: '更新成功', duration: 500})
-  }).catch((e) => {
-    ElMessage.error('更新失败：' + e.message)
-  })
-}
+  httpPost("/api/user/profile/update", user.value)
+    .then(() => {
+      ElMessage.success({ message: "更新成功", duration: 500 });
+    })
+    .catch((e) => {
+      ElMessage.error("更新失败：" + e.message);
+    });
+};
 </script>
 
 <style lang="stylus" scoped>
@@ -127,4 +146,4 @@ const save = () => {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/web/src/components/Welcome.vue b/web/src/components/Welcome.vue
index df4c319a..a058f571 100644
--- a/web/src/components/Welcome.vue
+++ b/web/src/components/Welcome.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="welcome">
     <div class="container">
-      <h1 class="title">{{ title }}-{{ version }}</h1>
+      <h2 class="title">{{ title }}-{{ version }}</h2>
 
       <el-row :gutter="20">
         <el-col :span="8">
@@ -128,10 +128,11 @@ const send = (text) => {
     width 100%
 
     .title {
-      font-size: 2.25rem
+      // font-size: 2.25rem
       line-height: 2.5rem
       font-weight 600
       margin-bottom: 4rem
+      color var( --theme-textcolor-normal)
     }
 
     .grid-content {
diff --git a/web/src/components/ui/BlackInput.vue b/web/src/components/ui/BlackInput.vue
index 57acb553..0edc856b 100644
--- a/web/src/components/ui/BlackInput.vue
+++ b/web/src/components/ui/BlackInput.vue
@@ -1,57 +1,58 @@
 <template>
   <div class="black-input-wrapper">
-    <el-input v-model="model" :type="type" :rows="rows"
-              @input="onInput"
-              style="--el-input-bg-color:#252020;
-            --el-input-border-color:#414141;
-            --el-input-focus-border-color:#414141;
-            --el-text-color-regular: #f1f1f1;
-            --el-input-border-radius: 10px;
-            --el-border-color-hover:#616161"
-              resize="none"
-              :placeholder="placeholder" :maxlength="maxlength"/>
+    <el-input
+      v-model="model"
+      :type="type"
+      :rows="rows"
+      @input="onInput"
+      resize="none"
+      :placeholder="placeholder"
+      :maxlength="maxlength"
+    />
     <div class="word-stat" v-if="rows > 1">
-      <span>{{value.length}}</span>/<span>{{maxlength}}</span>
+      <span>{{ value.length }}</span
+      >/<span>{{ maxlength }}</span>
     </div>
   </div>
-
 </template>
 
 <script setup>
-
-import {ref, watch} from "vue";
+import { ref, watch } from "vue";
 
 const props = defineProps({
-  value : {
+  value: {
     type: String,
-    default: '',
+    default: ""
   },
   placeholder: {
     type: String,
-    default: '',
+    default: ""
   },
   type: {
     type: String,
-    default: 'input',
+    default: "input"
   },
   rows: {
     type: Number,
-    default: 5,
+    default: 5
   },
   maxlength: {
     type: Number,
     default: 1024
   }
 });
-watch(() => props.value, (newValue) => {
-  model.value = newValue
-})
-const model = ref(props.value)
+watch(
+  () => props.value,
+  (newValue) => {
+    model.value = newValue;
+  }
+);
+const model = ref(props.value);
 // eslint-disable-next-line no-undef
-const emits = defineEmits(['update:value']);
+const emits = defineEmits(["update:value"]);
 const onInput = (value) => {
-  emits('update:value',value)
-}
+  emits("update:value", value);
+};
 </script>
 
 <style lang="stylus">
@@ -77,4 +78,4 @@ const onInput = (value) => {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/web/src/components/ui/BlackSelect.vue b/web/src/components/ui/BlackSelect.vue
index 0359b1ba..1d68b9d9 100644
--- a/web/src/components/ui/BlackSelect.vue
+++ b/web/src/components/ui/BlackSelect.vue
@@ -1,33 +1,32 @@
 <template>
-
-  <el-select v-model="model" :placeholder="placeholder"
-             :value="value" @change="$emit('update:value', $event)"
-             style="--el-fill-color-blank:#252020;
-                   --el-text-color-regular: #a1a1a1;
-                   --el-select-disabled-color:#0E0808;
-                   --el-color-primary-light-9:#0E0808;
-                   --el-border-radius-base:20px;
-                   --el-border-color:#0E0808;">
-    <el-option v-for="item in options"
-               :key="item.value"
-               :label="item.label"
-               :value="item.value">
+  <el-select
+    v-model="model"
+    :placeholder="placeholder"
+    :value="value"
+    @change="$emit('update:value', $event)"
+    style="--el-border-radius-base: 20px"
+  >
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value"
+    >
     </el-option>
   </el-select>
-
 </template>
 
 <script>
 export default {
-  name: 'BlackSelect',
+  name: "BlackSelect",
   props: {
-    value : {
+    value: {
       type: String,
-      default: '',
+      default: ""
     },
     placeholder: {
       type: String,
-      default: '请选择',
+      default: "请选择"
     },
     options: {
       type: Array,
@@ -37,7 +36,7 @@ export default {
   data() {
     return {
       model: this.value
-    }
+    };
   }
-}
+};
 </script>
diff --git a/web/src/components/ui/BlackSwitch.vue b/web/src/components/ui/BlackSwitch.vue
index 13733275..b956676d 100644
--- a/web/src/components/ui/BlackSwitch.vue
+++ b/web/src/components/ui/BlackSwitch.vue
@@ -1,24 +1,26 @@
 <template>
-
-  <el-switch v-model="model" :size="size"
-             @change="$emit('update:value', $event)"
-             style="--el-switch-on-color:#555555;--el-color-white:#0E0808"/>
-
+  <el-switch
+    v-model="model"
+    :size="size"
+    @change="$emit('update:value', $event)"
+  />
 </template>
 
 <script setup>
-
-import {ref, watch} from "vue";
+import { ref, watch } from "vue";
 const props = defineProps({
-  value : Boolean,
+  value: Boolean,
   size: {
     type: String,
-    default: 'default',
+    default: "default"
   }
 });
-const model = ref(props.value)
+const model = ref(props.value);
 
-watch(() => props.value, (newValue) => {
-  model.value = newValue
-})
+watch(
+  () => props.value,
+  (newValue) => {
+    model.value = newValue;
+  }
+);
 </script>
diff --git a/web/src/views/ChatApps.vue b/web/src/views/ChatApps.vue
index 684421f4..0d4b01c7 100644
--- a/web/src/views/ChatApps.vue
+++ b/web/src/views/ChatApps.vue
@@ -1,26 +1,32 @@
 <template>
   <div>
-
     <div class="page-apps custom-scroll">
       <div class="apps-type-nav">
         <el-scrollbar>
           <ul class="scrollbar-type-nav">
-            <li :class="{active: typeId === ''}" @click="getAppList('')">全部分类</li>
-            <li v-for="item in appTypes" :key="item.id" :class="{active: typeId === item.id}" @click="getAppList(item.id)">
+            <li :class="{ active: typeId === '' }" @click="getAppList('')">
+              全部分类
+            </li>
+            <li
+              v-for="item in appTypes"
+              :key="item.id"
+              :class="{ active: typeId === item.id }"
+              @click="getAppList(item.id)"
+            >
               <div class="image" v-if="item.icon">
-                <el-image :src="item.icon" fit="cover"/>
+                <el-image :src="item.icon" fit="cover" />
               </div>
               {{ item.name }}
             </li>
           </ul>
         </el-scrollbar>
-      </div>      
-      <div class="app-list-container" :style="{height: listBoxHeight + 'px'}">
+      </div>
+      <div class="app-list-container" :style="{ height: listBoxHeight + 'px' }">
         <ItemList :items="list" v-if="list.length > 0" :gap="15" :width="300">
           <template #default="scope">
             <div class="item">
               <div class="image">
-                <el-image :src="scope.item.icon" fit="cover"/>
+                <el-image :src="scope.item.icon" fit="cover" />
               </div>
 
               <div class="inner">
@@ -29,17 +35,34 @@
                   <div class="info-text">{{ scope.item.hello_msg }}</div>
                 </div>
                 <div class="btn">
-                  <el-button size="small" color="#21aa93" @click="useRole(scope.item)">使用</el-button>
-                  <el-tooltip effect="light" content="从工作区移除" placement="top" v-if="hasRole(scope.item.key)">
-                    <el-button size="small" type="danger" @click="updateRole(scope.item,'remove')">移除</el-button>
+                  <el-button
+                    size="small"
+                    class="sm-btn-theme"
+                    @click="useRole(scope.item)"
+                    >使用</el-button
+                  >
+                  <el-tooltip
+                    content="从工作区移除"
+                    placement="top"
+                    v-if="hasRole(scope.item.key)"
+                  >
+                    <el-button
+                      size="small"
+                      type="danger"
+                      @click="updateRole(scope.item, 'remove')"
+                      >移除</el-button
+                    >
                   </el-tooltip>
-                  <el-tooltip effect="light" content="添加到工作区" placement="top" v-else>
-                    <el-button size="small" style="--el-color-primary:#009999" @click="updateRole(scope.item, 'add')">添加</el-button>
+                  <el-tooltip content="添加到工作区" placement="top" v-else>
+                    <el-button
+                      size="small"
+                      style="--el-color-primary: #009999"
+                      @click="updateRole(scope.item, 'add')"
+                      >添加</el-button
+                    >
                   </el-tooltip>
                 </div>
               </div>
-
-
             </div>
             <!--            <div class="app-item">-->
             <!--              <el-image :src="scope.item.icon" fit="cover"/>-->
@@ -73,95 +96,108 @@
 </template>
 
 <script setup>
-import {onMounted, ref} from "vue"
-import {ElMessage} from "element-plus";
-import {httpGet, httpPost} from "@/utils/http";
-import {checkSession} from "@/store/cache";
-import {arrayContains, removeArrayItem, substr} from "@/utils/libs";
-import {useRouter} from "vue-router";
-import {useSharedStore} from "@/store/sharedata";
+import { onMounted, ref } from "vue";
+import { ElMessage } from "element-plus";
+import { httpGet, httpPost } from "@/utils/http";
+import { checkSession } from "@/store/cache";
+import { arrayContains, removeArrayItem, substr } from "@/utils/libs";
+import { useRouter } from "vue-router";
+import { useSharedStore } from "@/store/sharedata";
 import ItemList from "@/components/ItemList.vue";
 
-const listBoxHeight = window.innerHeight - 133
+const listBoxHeight = window.innerHeight - 133;
 
-const typeId = ref('')
-const appTypes = ref([])
-const list = ref([])
-const roles = ref([])
+const typeId = ref("");
+const appTypes = ref([]);
+const list = ref([]);
+const roles = ref([]);
 const store = useSharedStore();
 
 onMounted(() => {
-  getAppType()
-  getAppList()
-  getRoles()
-})
+  getAppType();
+  getAppList();
+  getRoles();
+});
 
 const getRoles = () => {
-  checkSession().then(user => {
-    roles.value = user.chat_roles
-  }).catch(e => {
-    console.log(e.message)
-  })
-}
+  checkSession()
+    .then((user) => {
+      roles.value = user.chat_roles;
+    })
+    .catch((e) => {
+      console.log(e.message);
+    });
+};
 
 const getAppType = () => {
-  httpGet("/api/app/type/list").then((res) => {
-    appTypes.value = res.data
-  }).catch(e => {
-    ElMessage.error("获取分类失败：" + e.message)
-  })
-}
+  httpGet("/api/app/type/list")
+    .then((res) => {
+      appTypes.value = res.data;
+    })
+    .catch((e) => {
+      ElMessage.error("获取分类失败：" + e.message);
+    });
+};
 
-const getAppList = (tid = '') => {
+const getAppList = (tid = "") => {
   typeId.value = tid;
-  httpGet("/api/app/list", { tid }).then((res) => {
-    const items = res.data
-    // 处理 hello message
-    for (let i = 0; i < items.length; i++) {
-      items[i].intro = substr(items[i].hello_msg, 80)
-    }
-    list.value = items
-  }).catch(e => {
-    ElMessage.error("获取应用失败：" + e.message)
-  })
-}
+  httpGet("/api/app/list", { tid })
+    .then((res) => {
+      const items = res.data;
+      // 处理 hello message
+      for (let i = 0; i < items.length; i++) {
+        items[i].intro = substr(items[i].hello_msg, 80);
+      }
+      list.value = items;
+    })
+    .catch((e) => {
+      ElMessage.error("获取应用失败：" + e.message);
+    });
+};
 
 const updateRole = (row, opt) => {
-  checkSession().then(() => {
-    const title = ref("")
-    if (opt === "add") {
-      title.value = "添加应用"
-      const exists = arrayContains(roles.value, row.key)
-      if (exists) {
-        return
+  checkSession()
+    .then(() => {
+      const title = ref("");
+      if (opt === "add") {
+        title.value = "添加应用";
+        const exists = arrayContains(roles.value, row.key);
+        if (exists) {
+          return;
+        }
+        roles.value.push(row.key);
+      } else {
+        title.value = "移除应用";
+        const exists = arrayContains(roles.value, row.key);
+        if (!exists) {
+          return;
+        }
+        roles.value = removeArrayItem(roles.value, row.key);
       }
-      roles.value.push(row.key)
-    } else {
-      title.value = "移除应用"
-      const exists = arrayContains(roles.value, row.key)
-      if (!exists) {
-        return
-      }
-      roles.value = removeArrayItem(roles.value, row.key)
-    }
-    httpPost("/api/app/update", {keys: roles.value}).then(() => {
-      ElMessage.success({message: title.value + "成功！", duration: 1000})
-    }).catch(e => {
-      ElMessage.error(title.value + "失败：" + e.message)
+      httpPost("/api/app/update", { keys: roles.value })
+        .then(() => {
+          ElMessage.success({
+            message: title.value + "成功！",
+            duration: 1000
+          });
+        })
+        .catch((e) => {
+          ElMessage.error(title.value + "失败：" + e.message);
+        });
     })
-  }).catch(() => {
-    store.setShowLoginDialog(true)
-  })
-}
+    .catch(() => {
+      store.setShowLoginDialog(true);
+    });
+};
 
 const hasRole = (roleKey) => {
-  return arrayContains(roles.value, roleKey, (v1, v2) => v1 === v2)
-}
+  return arrayContains(roles.value, roleKey, (v1, v2) => v1 === v2);
+};
 
-const router = useRouter()
+const router = useRouter();
 const useRole = (role) => {
-  router.push(`/chat?role_id=${role.id}`)
-}
+  router.push(`/chat?role_id=${role.id}`);
+};
 </script>
 
 <style lang="stylus">
diff --git a/web/src/views/ChatPlus.vue b/web/src/views/ChatPlus.vue
index a5fcda3f..429b005f 100644
--- a/web/src/views/ChatPlus.vue
+++ b/web/src/views/ChatPlus.vue
@@ -880,6 +880,7 @@ const autofillPrompt = (text) => {
 // 发送消息
 const sendMessage = function () {
   if (!isLogin.value) {
+    console.log("未登录");
     store.setShowLoginDialog(true);
     return;
   }
diff --git a/web/src/views/Dalle.vue b/web/src/views/Dalle.vue
index 41f405c3..05f9aad1 100644
--- a/web/src/views/Dalle.vue
+++ b/web/src/views/Dalle.vue
@@ -11,8 +11,13 @@
                 <el-form-item label="图片质量">
                   <template #default>
                     <div class="form-item-inner">
-                      <el-select v-model="params.quality" style="width:176px">
-                        <el-option v-for="v in qualities" :label="v.name" :value="v.value" :key="v.value"/>
+                      <el-select v-model="params.quality" style="width: 176px">
+                        <el-option
+                          v-for="v in qualities"
+                          :label="v.name"
+                          :value="v.value"
+                          :key="v.value"
+                        />
                       </el-select>
                     </div>
                   </template>
@@ -23,8 +28,13 @@
                 <el-form-item label="图片尺寸">
                   <template #default>
                     <div class="form-item-inner">
-                      <el-select v-model="params.size" style="width:176px">
-                        <el-option v-for="v in sizes" :label="v" :value="v" :key="v"/>
+                      <el-select v-model="params.size" style="width: 176px">
+                        <el-option
+                          v-for="v in sizes"
+                          :label="v"
+                          :value="v"
+                          :key="v"
+                        />
                       </el-select>
                     </div>
                   </template>
@@ -35,17 +45,21 @@
                 <el-form-item label="图片样式">
                   <template #default>
                     <div class="form-item-inner">
-                      <el-select v-model="params.style" style="width:176px">
-                        <el-option v-for="v in styles" :label="v.name" :value="v.value" :key="v.value"/>
+                      <el-select v-model="params.style" style="width: 176px">
+                        <el-option
+                          v-for="v in styles"
+                          :label="v.name"
+                          :value="v.value"
+                          :key="v.value"
+                        />
                       </el-select>
                       <el-tooltip
-                          effect="light"
-                          content="生动使模型倾向于生成超真实和戏剧性的图像"
-                          raw-content
-                          placement="right"
+                        content="生动使模型倾向于生成超真实和戏剧性的图像"
+                        raw-content
+                        placement="right"
                       >
                         <el-icon class="info-icon">
-                          <InfoFilled/>
+                          <InfoFilled />
                         </el-icon>
                       </el-tooltip>
                     </div>
@@ -55,52 +69,68 @@
 
               <div class="param-line">
                 <el-input
-                    v-model="params.prompt"
-                    :autosize="{ minRows: 4, maxRows: 6 }"
-                    type="textarea"
-                    ref="promptRef"
-                    placeholder="请在此输入绘画提示词，您也可以点击下面的提示词助手生成绘画提示词"
-                    v-loading="isGenerating"
-                    style="--el-mask-color:rgba(100, 100, 100, 0.8)"
+                  v-model="params.prompt"
+                  :autosize="{ minRows: 4, maxRows: 6 }"
+                  type="textarea"
+                  ref="promptRef"
+                  placeholder="请在此输入绘画提示词，您也可以点击下面的提示词助手生成绘画提示词"
+                  v-loading="isGenerating"
+                  style="--el-mask-color: rgba(100, 100, 100, 0.8)"
                 />
               </div>
 
               <el-row class="text-info">
-                <el-button class="generate-btn" size="small" @click="generatePrompt" color="#5865f2" :disabled="isGenerating">
-                  <i class="iconfont icon-chuangzuo" style="margin-right: 5px"></i>
+                <el-button
+                  class="generate-btn"
+                  size="small"
+                  @click="generatePrompt"
+                  color="#5865f2"
+                  :disabled="isGenerating"
+                >
+                  <i
+                    class="iconfont icon-chuangzuo"
+                    style="margin-right: 5px"
+                  ></i>
                   <span>生成专业绘画指令</span>
                 </el-button>
               </el-row>
 
               <div class="text-info">
                 <el-row :gutter="10">
-                  <el-col :span="12">
-                    <el-tag>每次绘图消耗{{ dallPower }}算力</el-tag>
-                  </el-col>
-                  <el-col :span="12">
-                    <el-tag type="success">当前可用{{ power }}算力</el-tag>
-                  </el-col>
+                  <el-text type="primary"
+                    >每次绘图消耗
+                    <el-text type="warning"
+                      >{{ dallPower }}算力；</el-text
+                    ></el-text
+                  >
+                  &nbsp;&nbsp;
+                  <el-text type="primary"
+                    >当前可用
+                    <el-text type="warning"> {{ power }}算力</el-text>
+                  </el-text>
                 </el-row>
               </div>
-
             </el-form>
           </div>
           <div class="submit-btn">
-            <el-button color="#47fff1" :dark="false" round @click="generate">
+            <el-button type="primary" :dark="false" round @click="generate">
               立即生成
             </el-button>
           </div>
         </div>
         <div class="task-list-box">
-          <div class="task-list-inner" :style="{ height: listBoxHeight + 'px' }">
+          <div
+            class="task-list-inner"
+            :style="{ height: listBoxHeight + 'px' }"
+          >
             <div class="job-list-box">
               <h2>任务列表</h2>
               <task-list :list="runningJobs" />
-
-              <h2>创作记录</h2>
-              <div class="finish-job-list">
-                <div v-if="finishedJobs.length > 0">
-                  <v3-waterfall
+              <template v-if="finishedJobs.length > 0">
+                <h2>创作记录</h2>
+                <div class="finish-job-list">
+                  <div v-if="finishedJobs.length > 0">
+                    <v3-waterfall
                       id="waterfall"
                       :list="finishedJobs"
                       srcKey="img_thumb"
@@ -110,331 +140,390 @@
                       :distanceToScroll="100"
                       :isLoading="loading"
                       :isOver="isOver"
-                      @scrollReachBottom="fetchFinishJobs()">
-                    <template #default="slotProp">
-                      <div class="job-item">
-                        <el-image
+                      @scrollReachBottom="fetchFinishJobs()"
+                    >
+                      <template #default="slotProp">
+                        <div class="job-item">
+                          <el-image
                             v-if="slotProp.item.img_url !== ''"
                             @click="previewImg(slotProp.item)"
                             :src="slotProp.item['img_thumb']"
                             fit="cover"
-                            loading="lazy">
-                          <template #placeholder>
-                            <div class="image-slot">
-                              正在加载图片
-                            </div>
-                          </template>
+                            loading="lazy"
+                          >
+                            <template #placeholder>
+                              <div class="image-slot">正在加载图片</div>
+                            </template>
 
-                          <template #error>
-                            <div class="image-slot">
-                              <el-icon>
-                                <Picture/>
-                              </el-icon>
-                            </div>
-                          </template>
-                        </el-image>
+                            <template #error>
+                              <div class="image-slot">
+                                <el-icon>
+                                  <Picture />
+                                </el-icon>
+                              </div>
+                            </template>
+                          </el-image>
 
-                        <el-image v-else-if="slotProp.item.progress === 101">
-                          <template #error>
-                            <div class="image-slot">
-                              <div class="err-msg-container">
-                                <div class="title">任务失败</div>
-                                <div class="opt">
-                                  <el-popover title="错误详情" trigger="click" :width="250" :content="slotProp.item['err_msg']" placement="top">
-                                    <template #reference>
-                                      <el-button type="info">详情</el-button>
-                                    </template>
-                                  </el-popover>
-                                  <el-button type="danger"  @click="removeImage(slotProp.item)">删除</el-button>
+                          <el-image v-else-if="slotProp.item.progress === 101">
+                            <template #error>
+                              <div class="image-slot">
+                                <div class="err-msg-container">
+                                  <div class="title">任务失败</div>
+                                  <div class="opt">
+                                    <el-popover
+                                      title="错误详情"
+                                      trigger="click"
+                                      :width="250"
+                                      :content="slotProp.item['err_msg']"
+                                      placement="top"
+                                    >
+                                      <template #reference>
+                                        <el-button type="info">详情</el-button>
+                                      </template>
+                                    </el-popover>
+                                    <el-button
+                                      type="danger"
+                                      @click="removeImage(slotProp.item)"
+                                      >删除</el-button
+                                    >
+                                  </div>
                                 </div>
                               </div>
-                            </div>
-                          </template>
-                        </el-image>
+                            </template>
+                          </el-image>
 
-                        <el-image v-else>
-                          <template #error>
-                            <div class="image-slot">
-                              <i class="iconfont icon-loading"></i>
-                              <span>正在下载图片</span>
-                            </div>
-                          </template>
-                        </el-image>
+                          <el-image v-else>
+                            <template #error>
+                              <div class="image-slot">
+                                <i class="iconfont icon-loading"></i>
+                                <span>正在下载图片</span>
+                              </div>
+                            </template>
+                          </el-image>
 
-                        <div class="remove">
-                          <el-tooltip content="删除" placement="top" effect="light">
-                            <el-button type="danger" :icon="Delete" @click="removeImage(slotProp.item)" circle/>
-                          </el-tooltip>
-                          <el-tooltip content="取消分享" placement="top" effect="light" v-if="slotProp.item.publish">
-                            <el-button type="warning"
-                                       @click="publishImage(slotProp.item, false)"
-                                       circle>
-                              <i class="iconfont icon-cancel-share"></i>
-                            </el-button>
-                          </el-tooltip>
-                          <el-tooltip content="分享" placement="top" effect="light" v-else>
-                            <el-button type="success" @click="publishImage(slotProp.item, true)" circle>
-                              <i class="iconfont icon-share-bold"></i>
-                            </el-button>
-                          </el-tooltip>
+                          <div class="remove">
+                            <el-tooltip content="删除" placement="top">
+                              <el-button
+                                type="danger"
+                                :icon="Delete"
+                                @click="removeImage(slotProp.item)"
+                                circle
+                              />
+                            </el-tooltip>
+                            <el-tooltip
+                              content="取消分享"
+                              placement="top"
+                              v-if="slotProp.item.publish"
+                            >
+                              <el-button
+                                type="warning"
+                                @click="publishImage(slotProp.item, false)"
+                                circle
+                              >
+                                <i class="iconfont icon-cancel-share"></i>
+                              </el-button>
+                            </el-tooltip>
+                            <el-tooltip content="分享" placement="top" v-else>
+                              <el-button
+                                type="success"
+                                @click="publishImage(slotProp.item, true)"
+                                circle
+                              >
+                                <i class="iconfont icon-share-bold"></i>
+                              </el-button>
+                            </el-tooltip>
 
-                          <el-tooltip content="复制提示词" placement="top" effect="light">
-                            <el-button type="info" circle class="copy-prompt"
-                                       :data-clipboard-text="slotProp.item.prompt">
-                              <i class="iconfont icon-file"></i>
-                            </el-button>
-                          </el-tooltip>
+                            <el-tooltip content="复制提示词" placement="top">
+                              <el-button
+                                type="info"
+                                circle
+                                class="copy-prompt"
+                                :data-clipboard-text="slotProp.item.prompt"
+                              >
+                                <i class="iconfont icon-file"></i>
+                              </el-button>
+                            </el-tooltip>
+                          </div>
                         </div>
-                      </div>
-                    </template>
-
-                    <template #footer>
-                      <div class="no-more-data">
-                        <span>没有更多数据了</span>
-                        <i class="iconfont icon-face"></i>
-                      </div>
-                    </template>
-                  </v3-waterfall>
+                      </template>
 
+                      <template #footer>
+                        <div class="no-more-data">
+                          <span>没有更多数据了</span>
+                          <i class="iconfont icon-face"></i>
+                        </div>
+                      </template>
+                    </v3-waterfall>
+                  </div>
+                  <el-empty
+                    :image-size="100"
+                    :image="nodata"
+                    description="暂无记录"
+                    v-else
+                  />
                 </div>
-                <el-empty :image-size="100" v-else/>
-              </div> <!-- end finish job list-->
+              </template>
+
+              <!-- end finish job list-->
             </div>
           </div>
-          <back-top :right="30" :bottom="30" bg-color="#0f7a71"/>
-        </div><!-- end task list box -->
+          <back-top :right="30" :bottom="30" />
+        </div>
+        <!-- end task list box -->
       </div>
-
     </div>
 
-    <el-image-viewer @close="() => { previewURL = '' }" v-if="previewURL !== ''" :url-list="[previewURL]"/>
+    <el-image-viewer
+      @close="
+        () => {
+          previewURL = '';
+        }
+      "
+      v-if="previewURL !== ''"
+      :url-list="[previewURL]"
+    />
   </div>
 </template>
 
 <script setup>
-import {nextTick, onMounted, onUnmounted, ref} from "vue"
-import {Delete, InfoFilled, Picture} from "@element-plus/icons-vue";
-import {httpGet, httpPost} from "@/utils/http";
-import {ElMessage, ElMessageBox} from "element-plus";
+import nodata from "@/assets/img/no-data.png";
+
+import { nextTick, onMounted, onUnmounted, ref } from "vue";
+import { Delete, InfoFilled, Picture } from "@element-plus/icons-vue";
+import { httpGet, httpPost } from "@/utils/http";
+import { ElMessage, ElMessageBox } from "element-plus";
 import Clipboard from "clipboard";
-import {checkSession, getClientId, getSystemInfo} from "@/store/cache";
-import {useSharedStore} from "@/store/sharedata";
+import { checkSession, getClientId, getSystemInfo } from "@/store/cache";
+import { useSharedStore } from "@/store/sharedata";
 import TaskList from "@/components/TaskList.vue";
 import BackTop from "@/components/BackTop.vue";
-import {showMessageError} from "@/utils/dialog";
+import { showMessageError } from "@/utils/dialog";
 
-const listBoxHeight = ref(0)
+const listBoxHeight = ref(0);
 // const paramBoxHeight = ref(0)
-const isLogin = ref(false)
-const loading = ref(true)
-const colWidth = ref(220)
-const isOver = ref(false)
-const previewURL = ref("")
+const isLogin = ref(false);
+const loading = ref(true);
+const colWidth = ref(220);
+const isOver = ref(false);
+const previewURL = ref("");
 const store = useSharedStore();
 
 const resizeElement = function () {
-  listBoxHeight.value = window.innerHeight - 90
+  listBoxHeight.value = window.innerHeight - 90;
   // paramBoxHeight.value = window.innerHeight - 110
 };
-resizeElement()
+resizeElement();
 window.onresize = () => {
-  resizeElement()
-}
+  resizeElement();
+};
 const qualities = [
-  {name: "标准", value: "standard"},
-  {name: "高清", value: "hd"},
-]
-const sizes = ["1024x1024", "1792x1024", "1024x1792"]
+  { name: "标准", value: "standard" },
+  { name: "高清", value: "hd" }
+];
+const sizes = ["1024x1024", "1792x1024", "1024x1792"];
 const styles = [
-  {name: "生动", value: "vivid"},
-  {name: "自然", value: "natural"}
-]
+  { name: "生动", value: "vivid" },
+  { name: "自然", value: "natural" }
+];
 const params = ref({
   client_id: getClientId(),
   quality: "standard",
   size: "1024x1024",
   style: "vivid",
   prompt: ""
-})
+});
 
-const finishedJobs = ref([])
-const runningJobs = ref([])
-const power = ref(0)
-const dallPower = ref(0) // 画一张 SD 图片消耗算力
-const clipboard = ref(null)
-const userId = ref(0)
+const finishedJobs = ref([]);
+const runningJobs = ref([]);
+const power = ref(0);
+const dallPower = ref(0); // 画一张 SD 图片消耗算力
+const clipboard = ref(null);
+const userId = ref(0);
 onMounted(() => {
-  initData()
-  clipboard.value = new Clipboard('.copy-prompt');
-  clipboard.value.on('success', () => {
+  initData();
+  clipboard.value = new Clipboard(".copy-prompt");
+  clipboard.value.on("success", () => {
     ElMessage.success("复制成功！");
-  })
+  });
 
-  clipboard.value.on('error', () => {
-    ElMessage.error('复制失败！');
-  })
+  clipboard.value.on("error", () => {
+    ElMessage.error("复制失败！");
+  });
 
-  getSystemInfo().then(res => {
-    dallPower.value = res.data["dall_power"]
-  }).catch(e => {
-    ElMessage.error("获取系统配置失败：" + e.message)
-  })
+  getSystemInfo()
+    .then((res) => {
+      dallPower.value = res.data["dall_power"];
+    })
+    .catch((e) => {
+      ElMessage.error("获取系统配置失败：" + e.message);
+    });
 
-  store.addMessageHandler("dall",(data) => {
+  store.addMessageHandler("dall", (data) => {
     // 丢弃无关消息
     if (data.channel !== "dall" || data.clientId !== getClientId()) {
-      return
+      return;
     }
 
     if (data.body === "FINISH" || data.body === "FAIL") {
-      page.value = 0
-      isOver.value = false
-      fetchFinishJobs()
+      page.value = 0;
+      isOver.value = false;
+      fetchFinishJobs();
     }
-    nextTick(() => fetchRunningJobs())
-  })
-})
+    nextTick(() => fetchRunningJobs());
+  });
+});
 
 onUnmounted(() => {
-  clipboard.value.destroy()
-  store.removeMessageHandler("dall")
-})
+  clipboard.value.destroy();
+  store.removeMessageHandler("dall");
+});
 
 const initData = () => {
-  checkSession().then(user => {
-    power.value = user['power']
-    userId.value = user.id
-    isLogin.value = true
+  checkSession()
+    .then((user) => {
+      power.value = user["power"];
+      userId.value = user.id;
+      isLogin.value = true;
 
-    page.value = 0
-    fetchRunningJobs()
-    fetchFinishJobs()
-  }).catch(() => {
-  });
-}
+      page.value = 0;
+      fetchRunningJobs();
+      fetchFinishJobs();
+    })
+    .catch(() => {});
+};
 
 const fetchRunningJobs = () => {
   if (!isLogin.value) {
-    return
+    return;
   }
   // 获取运行中的任务
-  httpGet(`/api/dall/jobs?finish=false`).then(res => {
-    runningJobs.value = res.data.items
-  }).catch(e => {
-    ElMessage.error("获取任务失败：" + e.message)
-  })
-}
+  httpGet(`/api/dall/jobs?finish=false`)
+    .then((res) => {
+      runningJobs.value = res.data.items;
+    })
+    .catch((e) => {
+      ElMessage.error("获取任务失败：" + e.message);
+    });
+};
 
-const page = ref(1)
-const pageSize = ref(15)
+const page = ref(1);
+const pageSize = ref(15);
 // 获取已完成的任务
 const fetchFinishJobs = () => {
   if (!isLogin.value) {
-    return
+    return;
   }
 
-  loading.value = true
-  page.value = page.value + 1
+  loading.value = true;
+  page.value = page.value + 1;
 
-  httpGet(`/api/dall/jobs?finish=true&page=${page.value}&page_size=${pageSize.value}`).then(res => {
-    if (res.data.items.length < pageSize.value) {
-      isOver.value = true
-    }
-    const imageList = res.data.items
-    for (let i = 0; i < imageList.length; i++) {
-      imageList[i]["img_thumb"] = imageList[i]["img_url"] + "?imageView2/4/w/300/h/0/q/75"
-    }
-    if (page.value === 1) {
-      finishedJobs.value = imageList
-    } else {
-      finishedJobs.value = finishedJobs.value.concat(imageList)
-    }
-
-    loading.value = false
-  }).catch(e => {
-    ElMessage.error("获取任务失败：" + e.message)
-  })
-}
+  httpGet(
+    `/api/dall/jobs?finish=true&page=${page.value}&page_size=${pageSize.value}`
+  )
+    .then((res) => {
+      if (res.data.items.length < pageSize.value) {
+        isOver.value = true;
+      }
+      const imageList = res.data.items;
+      for (let i = 0; i < imageList.length; i++) {
+        imageList[i]["img_thumb"] =
+          imageList[i]["img_url"] + "?imageView2/4/w/300/h/0/q/75";
+      }
+      if (page.value === 1) {
+        finishedJobs.value = imageList;
+      } else {
+        finishedJobs.value = finishedJobs.value.concat(imageList);
+      }
 
+      loading.value = false;
+    })
+    .catch((e) => {
+      ElMessage.error("获取任务失败：" + e.message);
+    });
+};
 
 // 创建绘图任务
-const promptRef = ref(null)
+const promptRef = ref(null);
 const generate = () => {
-  if (params.value.prompt === '') {
-    promptRef.value.focus()
-    return ElMessage.error("请输入绘画提示词！")
+  if (params.value.prompt === "") {
+    promptRef.value.focus();
+    return ElMessage.error("请输入绘画提示词！");
   }
 
   if (!isLogin.value) {
-    store.setShowLoginDialog(true)
-    return
+    store.setShowLoginDialog(true);
+    return;
   }
-  httpPost("/api/dall/image", params.value).then(() => {
-    ElMessage.success("任务执行成功！")
-    power.value -= dallPower.value
-    fetchRunningJobs()
-  }).catch(e => {
-    ElMessage.error("任务执行失败：" + e.message)
-  })
-}
+  httpPost("/api/dall/image", params.value)
+    .then(() => {
+      ElMessage.success("任务执行成功！");
+      power.value -= dallPower.value;
+      fetchRunningJobs();
+    })
+    .catch((e) => {
+      ElMessage.error("任务执行失败：" + e.message);
+    });
+};
 
 const removeImage = (item) => {
-  ElMessageBox.confirm(
-      '此操作将会删除任务和图片，继续操作码?',
-      '删除提示',
-      {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'warning',
-      }
-  ).then(() => {
-    httpGet("/api/dall/remove", {id: item.id}).then(() => {
-      ElMessage.success("任务删除成功")
-      page.value = 0
-      isOver.value = false
-      fetchFinishJobs()
-    }).catch(e => {
-      ElMessage.error("任务删除失败：" + e.message)
-    })
-  }).catch(() => {
+  ElMessageBox.confirm("此操作将会删除任务和图片，继续操作码?", "删除提示", {
+    confirmButtonText: "确认",
+    cancelButtonText: "取消",
+    type: "warning"
   })
-}
+    .then(() => {
+      httpGet("/api/dall/remove", { id: item.id })
+        .then(() => {
+          ElMessage.success("任务删除成功");
+          page.value = 0;
+          isOver.value = false;
+          fetchFinishJobs();
+        })
+        .catch((e) => {
+          ElMessage.error("任务删除失败：" + e.message);
+        });
+    })
+    .catch(() => {});
+};
 
 const previewImg = (item) => {
-  previewURL.value = item.img_url
-}
+  previewURL.value = item.img_url;
+};
 
 // 发布图片到作品墙
 const publishImage = (item, action) => {
-  let text = "图片发布"
+  let text = "图片发布";
   if (action === false) {
-    text = "取消发布"
+    text = "取消发布";
   }
-  httpGet("/api/dall/publish", {id: item.id, action: action}).then(() => {
-    ElMessage.success(text + "成功")
-    item.publish = action
-    page.value = 0
-    isOver.value = false
-  }).catch(e => {
-    ElMessage.error(text + "失败：" + e.message)
-  })
-}
+  httpGet("/api/dall/publish", { id: item.id, action: action })
+    .then(() => {
+      ElMessage.success(text + "成功");
+      item.publish = action;
+      page.value = 0;
+      isOver.value = false;
+    })
+    .catch((e) => {
+      ElMessage.error(text + "失败：" + e.message);
+    });
+};
 
-const isGenerating = ref(false)
+const isGenerating = ref(false);
 const generatePrompt = () => {
   if (params.value.prompt === "") {
-    return showMessageError("请输入原始提示词")
+    return showMessageError("请输入原始提示词");
   }
-  isGenerating.value = true
-  httpPost("/api/prompt/image", {prompt: params.value.prompt}).then(res => {
-    params.value.prompt = res.data
-    isGenerating.value = false
-  }).catch(e => {
-    showMessageError("生成提示词失败："+e.message)
-    isGenerating.value = false
-  })
-}
-
+  isGenerating.value = true;
+  httpPost("/api/prompt/image", { prompt: params.value.prompt })
+    .then((res) => {
+      params.value.prompt = res.data;
+      isGenerating.value = false;
+    })
+    .catch((e) => {
+      showMessageError("生成提示词失败：" + e.message);
+      isGenerating.value = false;
+    });
+};
 </script>
 
 <style lang="stylus">
diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue
index 76ec8aa9..5dcbe992 100644
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -180,7 +180,14 @@
         </ul>
       </div>
     </div>
+    <!-- :style="{ 'padding-left': isCollapse ? '65px' : '170px' }" -->
     <div class="right-main">
+      <div
+        v-if="loginUser.id === undefined || !loginUser.id"
+        class="loginMask"
+        :style="{ left: isCollapse ? '65px' : '170px' }"
+        @click="showNoticeLogin = true"
+      ></div>
       <div class="topheader" v-if="loginUser.id === undefined || !loginUser.id">
         <el-button
           @click="router.push('/login')"
@@ -189,6 +196,7 @@
           >登录</el-button
         >
       </div>
+      <!-- <div class="content custom-scroll"> -->
       <div class="content custom-scroll">
         <router-view :key="routerViewKey" v-slot="{ Component }">
           <transition name="move" mode="out-in">
@@ -196,6 +204,7 @@
           </transition>
         </router-view>
       </div>
+      <!-- </div> -->
     </div>
     <config-dialog
       v-if="loginUser.id"
@@ -203,12 +212,21 @@
       @hide="showConfigDialog = false"
     />
   </div>
+  <el-dialog v-model="showNoticeLogin">
+    <el-result icon="warning" title="未登录" sub-title="登录后解锁功能">
+      <template #extra>
+        <el-button type="primary" @click="router.push('/login')"
+          >登录</el-button
+        >
+      </template>
+    </el-result>
+  </el-dialog>
 </template>
 
 <script setup>
 import { CirclePlus, Setting } from "@element-plus/icons-vue";
 import ThemeChange from "@/components/ThemeChange.vue";
-import { avatarImg } from "@/assets/img/avatar.jpg";
+import avatarImg from "@/assets/img/avatar.jpg";
 import { useRouter } from "vue-router";
 import { onMounted, ref, watch } from "vue";
 import { httpGet } from "@/utils/http";
@@ -226,10 +244,37 @@ const router = useRouter();
 const logo = ref("");
 const mainNavs = ref([]);
 const moreNavs = ref([]);
-const curPath = ref(router.currentRoute.value.path);
+// const curPath = ref(router.currentRoute.value.path);
+const curPath = ref();
+
 const title = ref("");
+const showNoticeLogin = ref(false);
 // const mainWinHeight = window.innerHeight - 50;
 
+/**
+ * 从路径名中提取第一个路径段
+ * @param pathname - URL 的路径名部分，例如 '/chat/12345'
+ * @returns 第一个路径段（不含斜杠），例如 'chat'，如果不存在则返回 null
+ */
+const extractFirstSegment = (pathname) => {
+  const segments = pathname.split("/").filter((segment) => segment.length > 0);
+  return segments.length > 0 ? segments[0] : null;
+};
+const getFirstPathSegment = (url) => {
+  try {
+    // 尝试使用 URL 构造函数解析完整的 URL
+    const parsedUrl = new URL(url);
+    return extractFirstSegment(parsedUrl.pathname);
+  } catch (error) {
+    // 如果解析失败，假设是相对路径，使用当前窗口的位置作为基准
+    if (typeof window !== "undefined") {
+      const parsedUrl = new URL(url, window.location.origin);
+      return extractFirstSegment(parsedUrl.pathname);
+    }
+    // 如果无法解析，返回 null
+    return null;
+  }
+};
 const loginUser = ref({});
 const mainWinHeight = loginUser.value.id
   ? window.innerHeight
@@ -252,10 +297,10 @@ watch(
 );
 
 // 监听路由变化
-router.beforeEach((to, from, next) => {
-  curPath.value = to.path;
-  next();
-});
+// router.beforeEach((to, from, next) => {
+//   curPath.value = to.path;
+//   next();
+// });
 
 if (curPath.value === "/external") {
   curPath.value = router.currentRoute.value.query.url;
@@ -302,7 +347,7 @@ onMounted(() => {
       license.value = { de_copy: false };
       showMessageError("获取 License 配置：" + e.message);
     });
-
+  curPath.value = "/" + getFirstPathSegment(window.location.href);
   init();
 });
 
diff --git a/web/src/views/ImageMj.vue b/web/src/views/ImageMj.vue
index 8b3d717b..70ef9364 100644
--- a/web/src/views/ImageMj.vue
+++ b/web/src/views/ImageMj.vue
@@ -8,9 +8,9 @@
           <el-form :model="params" label-width="80px" label-position="left">
             <div class="param-line pt">
               <span>图片比例：</span>
-              <el-tooltip effect="light" content="生成图片的尺寸比例" placement="right">
+              <el-tooltip content="生成图片的尺寸比例" placement="right">
                 <el-icon>
-                  <InfoFilled/>
+                  <InfoFilled />
                 </el-icon>
               </el-tooltip>
             </div>
@@ -18,10 +18,20 @@
             <div class="param-line pt">
               <el-row :gutter="10">
                 <el-col :span="8" v-for="item in rates" :key="item.value">
-                  <div class="flex-col items-center"
-                       :class="item.value === params.rate ? 'grid-content active' : 'grid-content'"
-                       @click="changeRate(item)">
-                    <el-image class="icon" :src="item.img" fit="cover"></el-image>
+                  <div
+                    class="flex-col items-center"
+                    :class="
+                      item.value === params.rate
+                        ? 'grid-content active'
+                        : 'grid-content'
+                    "
+                    @click="changeRate(item)"
+                  >
+                    <el-image
+                      class="icon"
+                      :src="item.img"
+                      fit="cover"
+                    ></el-image>
                     <div class="text">{{ item.text }}</div>
                   </div>
                 </el-col>
@@ -32,16 +42,25 @@
               <el-form-item label="图片画质">
                 <template #default>
                   <div class="form-item-inner flex-row items-center">
-                    <el-select v-model="params.quality" placeholder="请选择" style="width:175px">
-                      <el-option v-for="item in options"
-                                 :key="item.value"
-                                 :label="item.label"
-                                 :value="item.value">
+                    <el-select
+                      v-model="params.quality"
+                      placeholder="请选择"
+                      style="width: 175px"
+                    >
+                      <el-option
+                        v-for="item in options"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      >
                       </el-option>
                     </el-select>
-                    <el-tooltip effect="light" content="生成的图片质量，质量越好出图越慢" placement="right">
+                    <el-tooltip
+                      content="生成的图片质量，质量越好出图越慢"
+                      placement="right"
+                    >
                       <el-icon>
-                        <InfoFilled/>
+                        <InfoFilled />
                       </el-icon>
                     </el-tooltip>
                   </div>
@@ -51,18 +70,25 @@
 
             <div class="param-line pt">
               <span>模型选择：</span>
-              <el-tooltip effect="light" content="MJ: 偏真实通用模型 <br/>NIJI: 偏动漫风格、适用于二次元模型" raw-content
-                          placement="right">
+              <el-tooltip
+                content="MJ: 偏真实通用模型 <br/>NIJI: 偏动漫风格、适用于二次元模型"
+                raw-content
+                placement="right"
+              >
                 <el-icon>
-                  <InfoFilled/>
+                  <InfoFilled />
                 </el-icon>
               </el-tooltip>
             </div>
             <div class="param-line pt">
               <el-row :gutter="10">
                 <el-col :span="12" v-for="item in models" :key="item.value">
-                  <div :class="item.value === params.model ? 'model active' : 'model'"
-                       @click="changeModel(item)">
+                  <div
+                    :class="
+                      item.value === params.model ? 'model active' : 'model'
+                    "
+                    @click="changeModel(item)"
+                  >
                     <el-image :src="item.img" fit="cover"></el-image>
                     <div class="text">{{ item.text }}</div>
                   </div>
@@ -74,12 +100,14 @@
               <el-form-item label="重复平铺">
                 <template #default>
                   <div class="form-item-inner">
-                    <el-switch v-model="params.tile" inactive-color="#464649" active-color="#47fff1"/>
-                    <el-tooltip effect="light"
-                                content="重复：--tile，参数释义：生成可用作重复平铺的图像，以创建无缝图案。" raw-content
-                                placement="right">
+                    <el-switch v-model="params.tile" inactive-color="#464649" />
+                    <el-tooltip
+                      content="重复：--tile，参数释义：生成可用作重复平铺的图像，以创建无缝图案。"
+                      raw-content
+                      placement="right"
+                    >
                       <el-icon>
-                        <InfoFilled/>
+                        <InfoFilled />
                       </el-icon>
                     </el-tooltip>
                   </div>
@@ -87,18 +115,18 @@
               </el-form-item>
             </div>
 
-
             <div class="param-line">
               <el-form-item label="原始模式">
                 <template #default>
                   <div class="form-item-inner">
-                    <el-switch v-model="params.raw" inactive-color="#464649" active-color="#47fff1"/>
-                    <el-tooltip effect="light"
-                                content="启用新的RAW模式，呈现的人物写实感更加逼真，人物细节、光源、流畅度也更加接近原始作品。<br/> 同时也意味着您需要添加更长的提示。"
-                                raw-content
-                                placement="right">
+                    <el-switch v-model="params.raw" inactive-color="#464649" />
+                    <el-tooltip
+                      content="启用新的RAW模式，呈现的人物写实感更加逼真，人物细节、光源、流畅度也更加接近原始作品。<br/> 同时也意味着您需要添加更长的提示。"
+                      raw-content
+                      placement="right"
+                    >
                       <el-icon>
-                        <InfoFilled/>
+                        <InfoFilled />
                       </el-icon>
                     </el-tooltip>
                   </div>
@@ -110,13 +138,19 @@
               <el-form-item label="创意度">
                 <template #default>
                   <div class="form-item-inner">
-                    <el-slider v-model.number="params.chaos" :max="100" :step="1"
-                               style="width: 180px;--el-slider-main-bg-color:#47fff1"/>
-                    <el-tooltip effect="light"
-                                content="参数用法：--chaos 或--c，取值范围: 0-100 <br/> 取值越高结果越发散，反之则稳定收敛<br /> 默认值0最为精准稳定"
-                                raw-content placement="right">
+                    <el-slider
+                      v-model.number="params.chaos"
+                      :max="100"
+                      :step="1"
+                      style="width: 180px"
+                    />
+                    <el-tooltip
+                      content="参数用法：--chaos 或--c，取值范围: 0-100 <br/> 取值越高结果越发散，反之则稳定收敛<br /> 默认值0最为精准稳定"
+                      raw-content
+                      placement="right"
+                    >
                       <el-icon>
-                        <InfoFilled/>
+                        <InfoFilled />
                       </el-icon>
                     </el-tooltip>
                   </div>
@@ -128,13 +162,20 @@
               <el-form-item label="风格化">
                 <template #default>
                   <div class="form-item-inner">
-                    <el-slider v-model.number="params.stylize" :min="0" :max="1000" :step="1"
-                               style="width: 180px;--el-slider-main-bg-color:#47fff1"/>
-                    <el-tooltip effect="light"
-                                content="风格化：--stylize 或 --s，范围 1-1000，默认值100 <br/>高取值会产生非常艺术化但与提示关联性较低的图像"
-                                raw-content placement="right">
+                    <el-slider
+                      v-model.number="params.stylize"
+                      :min="0"
+                      :max="1000"
+                      :step="1"
+                      style="width: 180px"
+                    />
+                    <el-tooltip
+                      content="风格化：--stylize 或 --s，范围 1-1000，默认值100 <br/>高取值会产生非常艺术化但与提示关联性较低的图像"
+                      raw-content
+                      placement="right"
+                    >
                       <el-icon>
-                        <InfoFilled/>
+                        <InfoFilled />
                       </el-icon>
                     </el-tooltip>
                   </div>
@@ -146,13 +187,14 @@
               <el-form-item label="随机种子">
                 <template #default>
                   <div class="form-item-inner">
-                    <el-input v-model.number="params.seed" style="--el-input-focus-border-color:#47fff1"/>
-                    <el-tooltip effect="light"
-                                content="随机种子：--seed，默认值0表示随机产生 <br/>使用相同的种子参数和描述将产生相似的图像"
-                                raw-content
-                                placement="right">
+                    <el-input v-model.number="params.seed" />
+                    <el-tooltip
+                      content="随机种子：--seed，默认值0表示随机产生 <br/>使用相同的种子参数和描述将产生相似的图像"
+                      raw-content
+                      placement="right"
+                    >
                       <el-icon>
-                        <InfoFilled/>
+                        <InfoFilled />
                       </el-icon>
                     </el-tooltip>
                   </div>
@@ -166,16 +208,23 @@
         <div class="task-list-inner" :style="{ height: listBoxHeight + 'px' }">
           <div class="extra-params">
             <el-form>
-              <el-tabs v-model="activeName" class="title-tabs" @tabChange="tabChange">
+              <el-tabs
+                v-model="activeName"
+                class="title-tabs"
+                @tabChange="tabChange"
+              >
                 <el-tab-pane label="文生图" name="txt2img">
                   <div class="prompt-box">
                     <div class="param-line pt">
                       <div class="flex-row justify-between items-center">
                         <div class="flex-row justify-start items-center">
                           <span>提示词：</span>
-                          <el-tooltip effect="light" content="输入你想要的内容，用逗号分割" placement="right">
+                          <el-tooltip
+                            content="输入你想要的内容，用逗号分割"
+                            placement="right"
+                          >
                             <el-icon>
-                              <InfoFilled/>
+                              <InfoFilled />
                             </el-icon>
                           </el-tooltip>
                         </div>
@@ -183,15 +232,25 @@
                     </div>
 
                     <div class="param-line pt" style="position: relative">
-                      <el-input v-model="params.prompt" :autosize="{ minRows: 4, maxRows: 6 }" type="textarea"
-                                ref="promptRef"
-                                v-loading="isGenerating"
-                                style="--el-mask-color:rgba(100, 100, 100, 0.8)"
-                                placeholder="请在此输入绘画提示词，您也可以点击下面的提示词助手生成绘画提示词"/>
+                      <el-input
+                        v-model="params.prompt"
+                        :autosize="{ minRows: 4, maxRows: 6 }"
+                        type="textarea"
+                        ref="promptRef"
+                        v-loading="isGenerating"
+                        style="--el-mask-color: rgba(100, 100, 100, 0.8)"
+                        placeholder="请在此输入绘画提示词，您也可以点击下面的提示词助手生成绘画提示词"
+                      />
                     </div>
 
                     <el-row class="text-info">
-                      <el-button class="generate-btn" size="small" @click="generatePrompt" color="#5865f2" :disabled="isGenerating">
+                      <el-button
+                        class="generate-btn"
+                        size="small"
+                        @click="generatePrompt"
+                        color="#5865f2"
+                        :disabled="isGenerating"
+                      >
                         <i class="iconfont icon-chuangzuo"></i>
                         <span>生成专业绘画指令</span>
                       </el-button>
@@ -201,9 +260,12 @@
                       <div class="flex-row justify-between items-center">
                         <div class="flex-row justify-start items-center">
                           <span>不希望出现的内容：（可选）</span>
-                          <el-tooltip effect="light" content="不想出现在图片上的元素(例如：树，建筑)" placement="right">
+                          <el-tooltip
+                            content="不想出现在图片上的元素(例如：树，建筑)"
+                            placement="right"
+                          >
                             <el-icon>
-                              <InfoFilled/>
+                              <InfoFilled />
                             </el-icon>
                           </el-tooltip>
                         </div>
@@ -211,28 +273,46 @@
                     </div>
 
                     <div class="param-line pt">
-                      <el-input v-model="params.neg_prompt" :autosize="{ minRows: 4, maxRows: 6 }" type="textarea"
-                                ref="promptRef"
-                                placeholder="请在此输入你不希望出现在图片上的内容，系统会自动翻译中文提示词"/>
+                      <el-input
+                        v-model="params.neg_prompt"
+                        :autosize="{ minRows: 4, maxRows: 6 }"
+                        type="textarea"
+                        ref="promptRef"
+                        placeholder="请在此输入你不希望出现在图片上的内容，系统会自动翻译中文提示词"
+                      />
                     </div>
                   </div>
                 </el-tab-pane>
                 <el-tab-pane label="图生图" name="img2img">
-                  <div class="text">图生图：以某张图片为底稿参考来创作绘画，生成类似风格或类型图像，支持 PNG 和 JPG 格式图片；
+                  <div class="text">
+                    图生图：以某张图片为底稿参考来创作绘画，生成类似风格或类型图像，支持
+                    PNG 和 JPG 格式图片；
                   </div>
                   <div class="param-line">
                     <div class="img-inline">
                       <div class="img-list-box">
-                        <div class="img-item" v-for="imgURL in imgList" :key="imgURL">
-                          <el-image :src="imgURL" fit="cover"/>
-                          <el-button type="danger" :icon="Delete" @click="removeUploadImage(imgURL)" circle/>
+                        <div
+                          class="img-item"
+                          v-for="imgURL in imgList"
+                          :key="imgURL"
+                        >
+                          <el-image :src="imgURL" fit="cover" />
+                          <el-button
+                            type="danger"
+                            :icon="Delete"
+                            @click="removeUploadImage(imgURL)"
+                            circle
+                          />
                         </div>
-
                       </div>
-                      <el-upload class="img-uploader" :auto-upload="true" :show-file-list="false"
-                                 :http-request="uploadImg" style="--el-color-primary:#47fff1">
+                      <el-upload
+                        class="img-uploader"
+                        :auto-upload="true"
+                        :show-file-list="false"
+                        :http-request="uploadImg"
+                      >
                         <el-icon class="uploader-icon">
-                          <Plus/>
+                          <Plus />
                         </el-icon>
                       </el-upload>
                     </div>
@@ -242,13 +322,19 @@
                     <el-form-item label="参考权重：">
                       <template #default>
                         <div class="form-item-inner">
-                          <el-slider v-model.number="params.iw" :max="1" :step="0.01"
-                                     style="width: 180px;--el-slider-main-bg-color:#47fff1"/>
-                          <el-tooltip effect="light"
-                                      content="使用图像权重参数--iw来调整图像 URL 与文本的重要性 <br/>权重较高时意味着图像提示将对完成的作业产生更大的影响"
-                                      raw-content placement="right">
+                          <el-slider
+                            v-model.number="params.iw"
+                            :max="1"
+                            :step="0.01"
+                            style="width: 180px"
+                          />
+                          <el-tooltip
+                            content="使用图像权重参数--iw来调整图像 URL 与文本的重要性 <br/>权重较高时意味着图像提示将对完成的作业产生更大的影响"
+                            raw-content
+                            placement="right"
+                          >
                             <el-icon>
-                              <InfoFilled/>
+                              <InfoFilled />
                             </el-icon>
                           </el-tooltip>
                         </div>
@@ -261,9 +347,12 @@
                       <div class="flex-row justify-between items-center">
                         <div class="flex-row justify-start items-center">
                           <span>提示词：</span>
-                          <el-tooltip effect="light" content="输入你想要的内容，用逗号分割" placement="right">
+                          <el-tooltip
+                            content="输入你想要的内容，用逗号分割"
+                            placement="right"
+                          >
                             <el-icon>
-                              <InfoFilled/>
+                              <InfoFilled />
                             </el-icon>
                           </el-tooltip>
                         </div>
@@ -271,15 +360,25 @@
                     </div>
 
                     <div class="param-line pt">
-                      <el-input v-model="params.prompt" :autosize="{ minRows: 4, maxRows: 6 }" type="textarea"
-                                ref="promptRef"
-                                v-loading="isGenerating"
-                                style="--el-mask-color:rgba(100, 100, 100, 0.8)"
-                                placeholder="请在此输入绘画提示词，系统会自动翻译中文提示词，高手请直接输入英文提示词"/>
+                      <el-input
+                        v-model="params.prompt"
+                        :autosize="{ minRows: 4, maxRows: 6 }"
+                        type="textarea"
+                        ref="promptRef"
+                        v-loading="isGenerating"
+                        style="--el-mask-color: rgba(100, 100, 100, 0.8)"
+                        placeholder="请在此输入绘画提示词，系统会自动翻译中文提示词，高手请直接输入英文提示词"
+                      />
                     </div>
 
                     <el-row class="text-info">
-                      <el-button class="generate-btn" size="small" @click="generatePrompt" color="#5865f2" :disabled="isGenerating">
+                      <el-button
+                        class="generate-btn"
+                        size="small"
+                        @click="generatePrompt"
+                        color="#5865f2"
+                        :disabled="isGenerating"
+                      >
                         <i class="iconfont icon-chuangzuo"></i>
                         <span>生成专业绘画指令</span>
                       </el-button>
@@ -289,9 +388,12 @@
                       <div class="flex-row justify-between items-center">
                         <div class="flex-row justify-start items-center">
                           <span>不希望出现的内容：（可选）</span>
-                          <el-tooltip effect="light" content="不想出现在图片上的元素(例如：树，建筑)" placement="right">
+                          <el-tooltip
+                            content="不想出现在图片上的元素(例如：树，建筑)"
+                            placement="right"
+                          >
                             <el-icon>
-                              <InfoFilled/>
+                              <InfoFilled />
                             </el-icon>
                           </el-tooltip>
                         </div>
@@ -299,46 +401,78 @@
                     </div>
 
                     <div class="param-line pt">
-                      <el-input v-model="params.neg_prompt" :autosize="{ minRows: 4, maxRows: 6 }" type="textarea"
-                                ref="promptRef"
-                                placeholder="请在此输入你不希望出现在图片上的内容，系统会自动翻译中文提示词"/>
+                      <el-input
+                        v-model="params.neg_prompt"
+                        :autosize="{ minRows: 4, maxRows: 6 }"
+                        type="textarea"
+                        ref="promptRef"
+                        placeholder="请在此输入你不希望出现在图片上的内容，系统会自动翻译中文提示词"
+                      />
                     </div>
                   </div>
                 </el-tab-pane>
 
                 <el-tab-pane label="融图" name="blend">
-                  <div class="text">请上传两张以上的图片，最多不超过五张，超过五张图片请使用图生图功能</div>
+                  <div class="text">
+                    请上传两张以上的图片，最多不超过五张，超过五张图片请使用图生图功能
+                  </div>
                   <div class="img-inline">
                     <div class="img-list-box">
-                      <div class="img-item" v-for="imgURL in imgList" :key="imgURL">
-                        <el-image :src="imgURL" fit="cover"/>
-                        <el-button type="danger" :icon="Delete" @click="removeUploadImage(imgURL)" circle/>
+                      <div
+                        class="img-item"
+                        v-for="imgURL in imgList"
+                        :key="imgURL"
+                      >
+                        <el-image :src="imgURL" fit="cover" />
+                        <el-button
+                          type="danger"
+                          :icon="Delete"
+                          @click="removeUploadImage(imgURL)"
+                          circle
+                        />
                       </div>
-
                     </div>
-                    <el-upload class="img-uploader" :auto-upload="true" :show-file-list="false"
-                               :http-request="uploadImg" style="--el-color-primary:#47fff1">
+                    <el-upload
+                      class="img-uploader"
+                      :auto-upload="true"
+                      :show-file-list="false"
+                      :http-request="uploadImg"
+                    >
                       <el-icon class="uploader-icon">
-                        <Plus/>
+                        <Plus />
                       </el-icon>
                     </el-upload>
                   </div>
                 </el-tab-pane>
 
                 <el-tab-pane label="换脸" name="swapFace">
-                  <div class="text">请上传两张有脸部的图片，用左边图片的脸替换右边图片的脸</div>
+                  <div class="text">
+                    请上传两张有脸部的图片，用左边图片的脸替换右边图片的脸
+                  </div>
                   <div class="img-inline">
                     <div class="img-list-box">
-                      <div class="img-item" v-for="imgURL in imgList" :key="imgURL">
-                        <el-image :src="imgURL" fit="cover"/>
-                        <el-button type="danger" :icon="Delete" @click="removeUploadImage(imgURL)" circle/>
+                      <div
+                        class="img-item"
+                        v-for="imgURL in imgList"
+                        :key="imgURL"
+                      >
+                        <el-image :src="imgURL" fit="cover" />
+                        <el-button
+                          type="danger"
+                          :icon="Delete"
+                          @click="removeUploadImage(imgURL)"
+                          circle
+                        />
                       </div>
-
                     </div>
-                    <el-upload class="img-uploader" :auto-upload="true" :show-file-list="false"
-                               :http-request="uploadImg" style="--el-color-primary:#47fff1">
+                    <el-upload
+                      class="img-uploader"
+                      :auto-upload="true"
+                      :show-file-list="false"
+                      :http-request="uploadImg"
+                    >
                       <el-icon class="uploader-icon">
-                        <Plus/>
+                        <Plus />
                       </el-icon>
                     </el-upload>
                   </div>
@@ -351,21 +485,31 @@
                     </el-badge>
                   </template>
 
-                  <div class="text">注意：只有于 niji6 和 v6 模型支持一致性功能，如果选择其他模型此功能将会生成失败。</div>
+                  <div class="text">
+                    注意：只有于 niji6 和 v6
+                    模型支持一致性功能，如果选择其他模型此功能将会生成失败。
+                  </div>
                   <div class="param-line">
                     <el-form-item label="角色一致性：" prop="cref">
-                      <el-input v-model="params.cref" placeholder="请输入图片URL或者上传图片"
-                                style="--el-input-focus-border-color:#47fff1;--el-input-text-color:#ffffff; max-width: 500px; width: 100%"
-                                size="small">
+                      <el-input
+                        v-model="params.cref"
+                        placeholder="请输入图片URL或者上传图片"
+                        style="
+                          --el-input-focus-border-color: #b0a0f8;
+                          max-width: 500px;
+                          width: 100%;
+                        "
+                        size="small"
+                      >
                         <template #append>
                           <el-upload
-                              :auto-upload="true"
-                              :show-file-list="false"
-                              @click="beforeUpload('cref')"
-                              :http-request="uploadImg"
+                            :auto-upload="true"
+                            :show-file-list="false"
+                            @click="beforeUpload('cref')"
+                            :http-request="uploadImg"
                           >
                             <el-icon class="uploader-icon">
-                              <UploadFilled/>
+                              <UploadFilled />
                             </el-icon>
                           </el-upload>
                         </template>
@@ -375,18 +519,25 @@
 
                   <div class="param-line">
                     <el-form-item label="风格一致性：" prop="sref">
-                      <el-input v-model="params.sref" placeholder="请输入图片URL或者上传图片"
-                                style="--el-input-focus-border-color:#47fff1; --el-input-text-color:#ffffff; max-width: 500px; width: 100%"
-                                size="small">
+                      <el-input
+                        v-model="params.sref"
+                        placeholder="请输入图片URL或者上传图片"
+                        style="
+                          --el-input-focus-border-color: #b0a0f8;
+                          max-width: 500px;
+                          width: 100%;
+                        "
+                        size="small"
+                      >
                         <template #append>
                           <el-upload
-                              :auto-upload="true"
-                              :show-file-list="false"
-                              @click="beforeUpload('sref')"
-                              :http-request="uploadImg"
+                            :auto-upload="true"
+                            :show-file-list="false"
+                            @click="beforeUpload('sref')"
+                            :http-request="uploadImg"
                           >
                             <el-icon class="uploader-icon">
-                              <UploadFilled/>
+                              <UploadFilled />
                             </el-icon>
                           </el-upload>
                         </template>
@@ -398,13 +549,19 @@
                     <el-form-item label="参考权重：">
                       <template #default>
                         <div class="form-item-inner">
-                          <el-slider v-model.number="params.cw" :max="100" :step="1"
-                                     style="width: 180px;--el-slider-main-bg-color:#47fff1"/>
-                          <el-tooltip effect="light"
-                                      content="取值范围 0-100 <br/>默认值100参考原图的脸部、头发和衣服<br/>0则表示只换脸"
-                                      raw-content placement="right">
+                          <el-slider
+                            v-model.number="params.cw"
+                            :max="100"
+                            :step="1"
+                            style="width: 180px"
+                          />
+                          <el-tooltip
+                            content="取值范围 0-100 <br/>默认值100参考原图的脸部、头发和衣服<br/>0则表示只换脸"
+                            raw-content
+                            placement="right"
+                          >
                             <el-icon>
-                              <InfoFilled/>
+                              <InfoFilled />
                             </el-icon>
                           </el-tooltip>
                         </div>
@@ -417,9 +574,12 @@
                       <div class="flex-row justify-between items-center">
                         <div class="flex-row justify-start items-center">
                           <span>提示词：</span>
-                          <el-tooltip effect="light" content="输入你想要的内容，用逗号分割" placement="right">
+                          <el-tooltip
+                            content="输入你想要的内容，用逗号分割"
+                            placement="right"
+                          >
                             <el-icon>
-                              <InfoFilled/>
+                              <InfoFilled />
                             </el-icon>
                           </el-tooltip>
                         </div>
@@ -427,18 +587,25 @@
                     </div>
 
                     <div class="param-line pt">
-                      <el-input v-model="params.prompt" :autosize="{ minRows: 4, maxRows: 6 }" type="textarea"
-                                ref="promptRef"
-                                placeholder="请在此输入绘画提示词，系统会自动翻译中文提示词，高手请直接输入英文提示词"/>
+                      <el-input
+                        v-model="params.prompt"
+                        :autosize="{ minRows: 4, maxRows: 6 }"
+                        type="textarea"
+                        ref="promptRef"
+                        placeholder="请在此输入绘画提示词，系统会自动翻译中文提示词，高手请直接输入英文提示词"
+                      />
                     </div>
 
                     <div class="param-line pt">
                       <div class="flex-row justify-between items-center">
                         <div class="flex-row justify-start items-center">
                           <span>不希望出现的内容：（可选）</span>
-                          <el-tooltip effect="light" content="不想出现在图片上的元素(例如：树，建筑)" placement="right">
+                          <el-tooltip
+                            content="不想出现在图片上的元素(例如：树，建筑)"
+                            placement="right"
+                          >
                             <el-icon>
-                              <InfoFilled/>
+                              <InfoFilled />
                             </el-icon>
                           </el-tooltip>
                         </div>
@@ -446,21 +613,37 @@
                     </div>
 
                     <div class="param-line pt">
-                      <el-input v-model="params.neg_prompt" :autosize="{ minRows: 4, maxRows: 6 }" type="textarea"
-                                ref="promptRef"
-                                placeholder="请在此输入你不希望出现在图片上的内容，系统会自动翻译中文提示词"/>
+                      <el-input
+                        v-model="params.neg_prompt"
+                        :autosize="{ minRows: 4, maxRows: 6 }"
+                        type="textarea"
+                        ref="promptRef"
+                        placeholder="请在此输入你不希望出现在图片上的内容，系统会自动翻译中文提示词"
+                      />
                     </div>
                   </div>
                 </el-tab-pane>
               </el-tabs>
 
               <el-row class="text-info">
-                <el-tag>每次绘图消耗{{ mjPower }}算力，U/V 操作消耗{{ mjActionPower }}算力</el-tag>
-                <el-tag type="success">当前可用算力：{{ power }}</el-tag>
+                <el-text type="primary"
+                  >每次绘图消耗
+                  <el-text type="warning">{{ mjPower }}算力;</el-text>
+                  &nbsp;&nbsp; U/V 操作消耗<el-text type="warning"
+                    >{{ mjActionPower }}算力;</el-text
+                  > </el-text
+                >&nbsp;&nbsp;
+                <el-text type="primary"
+                  >当前可用算力：<el-text type="warning">{{
+                    power
+                  }}</el-text></el-text
+                >
               </el-row>
 
               <div class="submit-btn">
-                <el-button color="#47fff1" :dark="false" @click="generate" round>立即生成</el-button>
+                <el-button type="primary" :dark="false" @click="generate" round
+                  >立即生成</el-button
+                >
               </div>
             </el-form>
           </div>
@@ -468,11 +651,11 @@
           <div class="job-list-box">
             <h2>任务列表</h2>
             <task-list :list="runningJobs" />
-
-            <h2>创作记录</h2>
-            <div class="finish-job-list">
-              <div v-if="finishedJobs.length > 0">
-                <v3-waterfall
+            <template v-if="finishedJobs.length > 0">
+              <h2>创作记录</h2>
+              <div class="finish-job-list">
+                <div v-if="finishedJobs.length > 0">
+                  <v3-waterfall
                     id="waterfall"
                     :list="finishedJobs"
                     srcKey="thumb_url"
@@ -482,219 +665,321 @@
                     :distanceToScroll="100"
                     :isLoading="loading"
                     :isOver="isOver"
-                    @scrollReachBottom="fetchFinishJobs()">
-                  <template #default="slotProp">
-                    <div class="job-item">
-                      <el-image
+                    @scrollReachBottom="fetchFinishJobs()"
+                  >
+                    <template #default="slotProp">
+                      <div class="job-item">
+                        <el-image
                           v-if="slotProp.item.img_url !== ''"
                           :src="slotProp.item['thumb_url']"
-                          :class="slotProp.item['can_opt'] ? '' : 'upscale'" @click="previewImg(slotProp.item)"
-                          fit="cover" :initial-index="slotProp.index"
-                          loading="lazy">
-                        <template #placeholder>
-                          <div class="image-slot">
-                            正在加载图片
-                          </div>
-                        </template>
-                        <template #error>
-                          <div class="image-slot">
-                            <el-icon>
-                              <Picture/>
-                            </el-icon>
-                          </div>
-                        </template>
-                      </el-image>
-                      <el-image v-else-if="slotProp.item.progress === 101">
-                        <template #error>
-                          <div class="image-slot">
-                            <div class="err-msg-container">
-                              <div class="title">任务失败</div>
-                              <div class="opt">
-                                <el-popover title="错误详情" trigger="click" :width="250" :content="slotProp.item['err_msg']" placement="top">
-                                  <template #reference>
-                                    <el-button type="info">详情</el-button>
-                                  </template>
-                                </el-popover>
-                                <el-button type="danger"  @click="removeImage(slotProp.item)">删除</el-button>
+                          :class="slotProp.item['can_opt'] ? '' : 'upscale'"
+                          @click="previewImg(slotProp.item)"
+                          fit="cover"
+                          :initial-index="slotProp.index"
+                          loading="lazy"
+                        >
+                          <template #placeholder>
+                            <div class="image-slot">正在加载图片</div>
+                          </template>
+                          <template #error>
+                            <div class="image-slot">
+                              <el-icon>
+                                <Picture />
+                              </el-icon>
+                            </div>
+                          </template>
+                        </el-image>
+                        <el-image v-else-if="slotProp.item.progress === 101">
+                          <template #error>
+                            <div class="image-slot">
+                              <div class="err-msg-container">
+                                <div class="title">任务失败</div>
+                                <div class="opt">
+                                  <el-popover
+                                    title="错误详情"
+                                    trigger="click"
+                                    :width="250"
+                                    :content="slotProp.item['err_msg']"
+                                    placement="top"
+                                  >
+                                    <template #reference>
+                                      <el-button type="info">详情</el-button>
+                                    </template>
+                                  </el-popover>
+                                  <el-button
+                                    type="danger"
+                                    @click="removeImage(slotProp.item)"
+                                    >删除</el-button
+                                  >
+                                </div>
                               </div>
                             </div>
-                          </div>
-                        </template>
-                      </el-image>
-                      <el-image v-else>
-                        <template #error>
-                          <div class="image-slot">
-                            <i class="iconfont icon-loading"></i>
-                            <span>正在下载图片</span>
-                          </div>
-                        </template>
-                      </el-image>
+                          </template>
+                        </el-image>
+                        <el-image v-else>
+                          <template #error>
+                            <div class="image-slot">
+                              <i class="iconfont icon-loading"></i>
+                              <span>正在下载图片</span>
+                            </div>
+                          </template>
+                        </el-image>
 
-                      <div class="opt" v-if="slotProp.item['can_opt']">
-                        <div class="opt-line">
-                          <ul>
-                            <li><a @click="upscale(1, slotProp.item)">U1</a></li>
-                            <li><a @click="upscale(2, slotProp.item)">U2</a></li>
-                            <li><a @click="upscale(3, slotProp.item)">U3</a></li>
-                            <li><a @click="upscale(4, slotProp.item)">U4</a></li>
-                            <li class="show-prompt">
-
-                              <el-popover placement="left" title="提示词" :width="240" trigger="hover">
-                                <template #reference>
-                                  <el-icon>
-                                    <ChromeFilled/>
-                                  </el-icon>
-                                </template>
-
-                                <template #default>
-                                  <div class="mj-list-item-prompt">
-                                    <span>{{ slotProp.item.prompt }}</span>
-                                    <el-icon class="copy-prompt-mj"
-                                             :data-clipboard-text="slotProp.item.prompt">
-                                      <DocumentCopy/>
+                        <div class="opt" v-if="slotProp.item['can_opt']">
+                          <div class="opt-line">
+                            <ul>
+                              <li>
+                                <a @click="upscale(1, slotProp.item)">U1</a>
+                              </li>
+                              <li>
+                                <a @click="upscale(2, slotProp.item)">U2</a>
+                              </li>
+                              <li>
+                                <a @click="upscale(3, slotProp.item)">U3</a>
+                              </li>
+                              <li>
+                                <a @click="upscale(4, slotProp.item)">U4</a>
+                              </li>
+                              <li class="show-prompt">
+                                <el-popover
+                                  placement="left"
+                                  title="提示词"
+                                  :width="240"
+                                  trigger="hover"
+                                >
+                                  <template #reference>
+                                    <el-icon>
+                                      <ChromeFilled />
                                     </el-icon>
-                                  </div>
-                                </template>
-                              </el-popover>
-                            </li>
-                          </ul>
+                                  </template>
+
+                                  <template #default>
+                                    <div class="mj-list-item-prompt">
+                                      <span>{{ slotProp.item.prompt }}</span>
+                                      <el-icon
+                                        class="copy-prompt-mj"
+                                        :data-clipboard-text="
+                                          slotProp.item.prompt
+                                        "
+                                      >
+                                        <DocumentCopy />
+                                      </el-icon>
+                                    </div>
+                                  </template>
+                                </el-popover>
+                              </li>
+                            </ul>
+                          </div>
+
+                          <div class="opt-line">
+                            <ul>
+                              <li>
+                                <a @click="variation(1, slotProp.item)">V1</a>
+                              </li>
+                              <li>
+                                <a @click="variation(2, slotProp.item)">V2</a>
+                              </li>
+                              <li>
+                                <a @click="variation(3, slotProp.item)">V3</a>
+                              </li>
+                              <li>
+                                <a @click="variation(4, slotProp.item)">V4</a>
+                              </li>
+                            </ul>
+                          </div>
                         </div>
 
-                        <div class="opt-line">
-                          <ul>
-                            <li><a @click="variation(1, slotProp.item)">V1</a></li>
-                            <li><a @click="variation(2, slotProp.item)">V2</a></li>
-                            <li><a @click="variation(3, slotProp.item)">V3</a></li>
-                            <li><a @click="variation(4, slotProp.item)">V4</a></li>
-                          </ul>
+                        <div
+                          class="remove"
+                          v-if="slotProp.item.progress === 100"
+                        >
+                          <el-tooltip content="删除任务" placement="top">
+                            <el-button
+                              type="danger"
+                              :icon="Delete"
+                              @click="removeImage(slotProp.item)"
+                              circle
+                            />
+                          </el-tooltip>
+                          <el-tooltip
+                            content="取消发布"
+                            placement="top"
+                            v-if="slotProp.item.publish"
+                          >
+                            <el-button
+                              type="warning"
+                              @click="publishImage(slotProp.item, false)"
+                              circle
+                            >
+                              <i class="iconfont icon-cancel-share"></i>
+                            </el-button>
+                          </el-tooltip>
+                          <el-tooltip content="发布图片" placement="top" v-else>
+                            <el-button
+                              type="success"
+                              @click="publishImage(slotProp.item, true)"
+                              circle
+                            >
+                              <i class="iconfont icon-share-bold"></i>
+                            </el-button>
+                          </el-tooltip>
+
+                          <el-tooltip content="复制提示词" placement="top">
+                            <el-button
+                              type="success"
+                              class="copy-prompt-mj"
+                              :data-clipboard-text="slotProp.item.prompt"
+                              circle
+                            >
+                              <el-icon><DocumentCopy /></el-icon>
+                            </el-button>
+                          </el-tooltip>
                         </div>
                       </div>
+                    </template>
 
-                      <div class="remove" v-if="slotProp.item.progress === 100">
-                        <el-tooltip effect="light" content="删除任务" placement="top">
-                          <el-button type="danger" :icon="Delete" @click="removeImage(slotProp.item)" circle/>
-                        </el-tooltip>
-                        <el-tooltip effect="light" content="取消发布" placement="top" v-if="slotProp.item.publish">
-                          <el-button type="warning"
-                                     @click="publishImage(slotProp.item, false)"
-                                     circle>
-                            <i class="iconfont icon-cancel-share"></i>
-                          </el-button>
-                        </el-tooltip>
-                        <el-tooltip effect="light" content="发布图片" placement="top" v-else>
-                          <el-button type="success" @click="publishImage(slotProp.item, true)" circle>
-                            <i class="iconfont icon-share-bold"></i>
-                          </el-button>
-                        </el-tooltip>
-
-                        <el-tooltip effect="light" content="复制提示词" placement="top">
-                          <el-button type="success" class="copy-prompt-mj"
-                                     :data-clipboard-text="slotProp.item.prompt" circle>
-                            <el-icon><DocumentCopy/></el-icon>
-                          </el-button>
-                        </el-tooltip>
-
+                    <template #footer>
+                      <div class="no-more-data">
+                        <span>没有更多数据了</span>
+                        <i class="iconfont icon-face"></i>
                       </div>
-                    </div>
-                  </template>
-
-                  <template #footer>
-                    <div class="no-more-data">
-                      <span>没有更多数据了</span>
-                      <i class="iconfont icon-face"></i>
-                    </div>
-                  </template>
-                </v3-waterfall>
+                    </template>
+                  </v3-waterfall>
+                </div>
+                <el-empty
+                  :image-size="100"
+                  :image="nodata"
+                  description="暂无记录"
+                  v-else
+                />
               </div>
-              <el-empty :image-size="100" v-else/>
-            </div> <!-- end finish job list-->
+            </template>
+
+            <!-- end finish job list-->
           </div>
         </div>
-        <back-top :right="30" :bottom="30" bg-color="#0f7a71"/>
-      </div><!-- end task list box -->
+        <back-top :right="30" :bottom="30" />
+      </div>
+      <!-- end task list box -->
     </div>
 
-    <el-image-viewer @close="() => { previewURL = '' }" v-if="previewURL !== ''" :url-list="[previewURL]"/>
+    <el-image-viewer
+      @close="
+        () => {
+          previewURL = '';
+        }
+      "
+      v-if="previewURL !== ''"
+      :url-list="[previewURL]"
+    />
   </div>
 </template>
 
 <script setup>
-import {nextTick, onMounted, onUnmounted, ref} from "vue"
-import {ChromeFilled, Delete, DocumentCopy, InfoFilled, Picture, Plus, UploadFilled} from "@element-plus/icons-vue";
+import { nextTick, onMounted, onUnmounted, ref } from "vue";
+import {
+  ChromeFilled,
+  Delete,
+  DocumentCopy,
+  InfoFilled,
+  Picture,
+  Plus,
+  UploadFilled
+} from "@element-plus/icons-vue";
+import nodata from "@/assets/img/no-data.png";
 import Compressor from "compressorjs";
-import {httpGet, httpPost} from "@/utils/http";
-import {ElMessage, ElMessageBox, ElNotification} from "element-plus";
+import { httpGet, httpPost } from "@/utils/http";
+import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
 import Clipboard from "clipboard";
-import {checkSession, getClientId, getSystemInfo} from "@/store/cache";
-import {useRouter} from "vue-router";
-import {getSessionId} from "@/store/session";
-import {copyObj, removeArrayItem} from "@/utils/libs";
-import {useSharedStore} from "@/store/sharedata";
+import { checkSession, getClientId, getSystemInfo } from "@/store/cache";
+import { useRouter } from "vue-router";
+import { getSessionId } from "@/store/session";
+import { copyObj, removeArrayItem } from "@/utils/libs";
+import { useSharedStore } from "@/store/sharedata";
 import TaskList from "@/components/TaskList.vue";
 import BackTop from "@/components/BackTop.vue";
-import {showMessageError} from "@/utils/dialog";
+import { showMessageError } from "@/utils/dialog";
 
-const listBoxHeight = ref(0)
-const paramBoxHeight = ref(0)
-const loading = ref(true)
-const colWidth = ref(220)
-const previewURL = ref("")
+const listBoxHeight = ref(0);
+const paramBoxHeight = ref(0);
+const loading = ref(true);
+const colWidth = ref(220);
+const previewURL = ref("");
 const store = useSharedStore();
 
 const resizeElement = function () {
-  listBoxHeight.value = window.innerHeight - 80
-  paramBoxHeight.value = window.innerHeight - 160
+  // listBoxHeight.value = window.innerHeight - 80;
+  listBoxHeight.value = window.innerHeight - 30;
+  // paramBoxHeight.value = window.innerHeight - 160;
+  paramBoxHeight.value = window.innerHeight - 110;
 };
-resizeElement()
+resizeElement();
 window.onresize = () => {
-  resizeElement()
-}
+  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"},
-  {css: "size2-1", value: "2:1", text: "2:1", img: "/images/mj/rate_2_1.png"},
-  {css: "size2-3", value: "2:3", text: "2:3", img: "/images/mj/rate_3_4.png"},
-  {css: "size3-2", value: "3:2", text: "3:2", img: "/images/mj/rate_4_3.png"},
-  {css: "size3-4", value: "3:4", text: "3:4", img: "/images/mj/rate_3_4.png"},
-  {css: "size4-3", value: "4:3", text: "4:3", img: "/images/mj/rate_4_3.png"},
-  {css: "size16-9", value: "16:9", text: "16:9", img: "/images/mj/rate_16_9.png"},
-  {css: "size9-16", value: "9:16", text: "9:16", img: "/images/mj/rate_9_16.png"},
-]
+  { 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" },
+  { css: "size2-1", value: "2:1", text: "2:1", img: "/images/mj/rate_2_1.png" },
+  { css: "size2-3", value: "2:3", text: "2:3", img: "/images/mj/rate_3_4.png" },
+  { css: "size3-2", value: "3:2", text: "3:2", img: "/images/mj/rate_4_3.png" },
+  { css: "size3-4", value: "3:4", text: "3:4", img: "/images/mj/rate_3_4.png" },
+  { css: "size4-3", value: "4:3", text: "4:3", img: "/images/mj/rate_4_3.png" },
+  {
+    css: "size16-9",
+    value: "16:9",
+    text: "16:9",
+    img: "/images/mj/rate_16_9.png"
+  },
+  {
+    css: "size9-16",
+    value: "9:16",
+    text: "9:16",
+    img: "/images/mj/rate_9_16.png"
+  }
+];
 const models = [
-  {text: "写实模式MJ-6.1", value: " --v 6.1", img: "/images/mj/mj-v6.png"},
-  {text: "优质模式MJ-6.0", value: " --v 6", img: "/images/mj/mj-v5.2.png"},
-  {text: "优质模式MJ-5.2", value: " --v 5.2", img: "/images/mj/mj-v5.1.jpg"},
-  {text: "虚幻模式MJ-5.1", value: " --v 5.1", img: "/images/mj/mj-v5.jpg"},
-  {text: "真实模式MJ-4", value: " --v 4", img: "/images/mj/mj-v4.jpg"},
-  {text: "动漫风-niji4", value: " --niji 4", img: "/images/mj/nj4.jpg"},
-  {text: "动漫风-niji5", value: " --niji 5", img: "/images/mj/mj-niji.png"},
-  {text: "动漫风-niji5 可爱", value: " --niji 5 --style cute", img: "/images/mj/nj1.jpg"},
-  {text: "动漫风-niji5 风景", value: " --niji 5 --style scenic", img: "/images/mj/nj2.jpg"},
-  {text: "动漫风-niji6", value: " --niji 6", img: "/images/mj/nj3.jpg"},
-
-]
+  { text: "写实模式MJ-6.1", value: " --v 6.1", img: "/images/mj/mj-v6.png" },
+  { text: "优质模式MJ-6.0", value: " --v 6", img: "/images/mj/mj-v5.2.png" },
+  { text: "优质模式MJ-5.2", value: " --v 5.2", img: "/images/mj/mj-v5.1.jpg" },
+  { text: "虚幻模式MJ-5.1", value: " --v 5.1", img: "/images/mj/mj-v5.jpg" },
+  { text: "真实模式MJ-4", value: " --v 4", img: "/images/mj/mj-v4.jpg" },
+  { text: "动漫风-niji4", value: " --niji 4", img: "/images/mj/nj4.jpg" },
+  { text: "动漫风-niji5", value: " --niji 5", img: "/images/mj/mj-niji.png" },
+  {
+    text: "动漫风-niji5 可爱",
+    value: " --niji 5 --style cute",
+    img: "/images/mj/nj1.jpg"
+  },
+  {
+    text: "动漫风-niji5 风景",
+    value: " --niji 5 --style scenic",
+    img: "/images/mj/nj2.jpg"
+  },
+  { text: "动漫风-niji6", value: " --niji 6", img: "/images/mj/nj3.jpg" }
+];
 
 const options = [
   {
     value: 0,
-    label: '默认'
+    label: "默认"
   },
   {
     value: 0.25,
-    label: '普通'
+    label: "普通"
   },
   {
     value: 0.5,
-    label: '清晰'
+    label: "清晰"
   },
   {
     value: 1,
-    label: '高清'
-  },
-]
+    label: "高清"
+  }
+];
 
-const router = useRouter()
+const router = useRouter();
 const initParams = {
   client_id: getClientId(),
   task_type: "image",
@@ -712,169 +997,179 @@ const initParams = {
   quality: 0,
   cref: "",
   sref: "",
-  cw: 0,
-}
-const params = ref(copyObj(initParams))
+  cw: 0
+};
+const params = ref(copyObj(initParams));
 
-const imgList = ref([])
+const imgList = ref([]);
 
-const activeName = ref('txt2img')
+const activeName = ref("txt2img");
 
-const runningJobs = ref([])
-const finishedJobs = ref([])
+const runningJobs = ref([]);
+const finishedJobs = ref([]);
 
-const power = ref(0)
-const userId = ref(0)
-const isLogin = ref(false)
+const power = ref(0);
+const userId = ref(0);
+const isLogin = ref(false);
 
-const clipboard = ref(null)
+const clipboard = ref(null);
 onMounted(() => {
-  initData()
-  clipboard.value = new Clipboard('.copy-prompt-mj');
-  clipboard.value.on('success', () => {
+  initData();
+  clipboard.value = new Clipboard(".copy-prompt-mj");
+  clipboard.value.on("success", () => {
     ElMessage.success("复制成功！");
-  })
+  });
 
-  clipboard.value.on('error', () => {
-    ElMessage.error('复制失败！');
-  })
+  clipboard.value.on("error", () => {
+    ElMessage.error("复制失败！");
+  });
 
-  store.addMessageHandler("mj",(data) => {
+  store.addMessageHandler("mj", (data) => {
     // 丢弃无关消息
     if (data.channel !== "mj" || data.clientId !== getClientId()) {
-      return
+      return;
     }
 
     if (data.body === "FINISH" || data.body === "FAIL") {
-      page.value = 0
-      isOver.value = false
-      fetchFinishJobs()
+      page.value = 0;
+      isOver.value = false;
+      fetchFinishJobs();
     }
-    nextTick(() => fetchRunningJobs())
-  })
-})
+    nextTick(() => fetchRunningJobs());
+  });
+});
 
 onUnmounted(() => {
-  clipboard.value.destroy()
-  store.removeMessageHandler("mj")
-})
+  clipboard.value.destroy();
+  store.removeMessageHandler("mj");
+});
 
 // 初始化数据
 const initData = () => {
-  checkSession().then(user => {
-    power.value = user['power']
-    userId.value = user.id
-    isLogin.value = true
-    page.value = 0
-    fetchRunningJobs()
-    fetchFinishJobs()
-  }).catch(() => {
+  checkSession()
+    .then((user) => {
+      power.value = user["power"];
+      userId.value = user.id;
+      isLogin.value = true;
+      page.value = 0;
+      fetchRunningJobs();
+      fetchFinishJobs();
+    })
+    .catch(() => {});
+};
 
+const mjPower = ref(1);
+const mjActionPower = ref(1);
+getSystemInfo()
+  .then((res) => {
+    mjPower.value = res.data["mj_power"];
+    mjActionPower.value = res.data["mj_action_power"];
+  })
+  .catch((e) => {
+    ElMessage.error("获取系统配置失败：" + e.message);
   });
-}
-
-const mjPower = ref(1)
-const mjActionPower = ref(1)
-getSystemInfo().then(res => {
-  mjPower.value = res.data["mj_power"]
-  mjActionPower.value = res.data["mj_action_power"]
-}).catch(e => {
-  ElMessage.error("获取系统配置失败：" + e.message)
-})
 
 // 获取运行中的任务
 const fetchRunningJobs = () => {
   if (!isLogin.value) {
-    return
+    return;
   }
 
-  httpGet(`/api/mj/jobs?finish=false`).then(res => {
-    const jobs = res.data.items
-    const _jobs = []
-    for (let i = 0; i < jobs.length; i++) {
-      if (jobs[i].progress === 101) {
-        ElNotification({
-          title: '任务执行失败',
-          dangerouslyUseHTMLString: true,
-          message: `任务ID：${jobs[i]['task_id']}<br />原因：${jobs[i]['err_msg']}`,
-          type: 'error',
-          duration: 0,
-        })
-        if (jobs[i].type === 'image') {
-          power.value += mjPower.value
-        } else {
-          power.value += mjActionPower.value
+  httpGet(`/api/mj/jobs?finish=false`)
+    .then((res) => {
+      const jobs = res.data.items;
+      const _jobs = [];
+      for (let i = 0; i < jobs.length; i++) {
+        if (jobs[i].progress === 101) {
+          ElNotification({
+            title: "任务执行失败",
+            dangerouslyUseHTMLString: true,
+            message: `任务ID：${jobs[i]["task_id"]}<br />原因：${jobs[i]["err_msg"]}`,
+            type: "error",
+            duration: 0
+          });
+          if (jobs[i].type === "image") {
+            power.value += mjPower.value;
+          } else {
+            power.value += mjActionPower.value;
+          }
         }
+        _jobs.push(jobs[i]);
       }
-      _jobs.push(jobs[i])
-    }
-    runningJobs.value = _jobs
-  }).catch(e => {
-    ElMessage.error("获取任务失败：" + e.message)
-  })
-}
+      runningJobs.value = _jobs;
+    })
+    .catch((e) => {
+      ElMessage.error("获取任务失败：" + e.message);
+    });
+};
 
-const page = ref(0)
-const pageSize = ref(15)
-const isOver = ref(false)
+const page = ref(0);
+const pageSize = ref(15);
+const isOver = ref(false);
 const fetchFinishJobs = () => {
   if (!isLogin.value || isOver.value) {
-    return
+    return;
   }
 
-  loading.value = true
-  page.value = page.value + 1
+  loading.value = true;
+  page.value = page.value + 1;
   // 获取已完成的任务
-  httpGet(`/api/mj/jobs?finish=true&page=${page.value}&page_size=${pageSize.value}`).then(res => {
-    const jobs = res.data.items
-    for (let i = 0; i < jobs.length; i++) {
-      if (jobs[i]['img_url'] !== "") {
-        if (jobs[i].type === 'upscale' || jobs[i].type === 'swapFace') {
-          jobs[i]['thumb_url'] = jobs[i]['img_url'] + '?imageView2/1/w/480/h/600/q/75'
+  httpGet(
+    `/api/mj/jobs?finish=true&page=${page.value}&page_size=${pageSize.value}`
+  )
+    .then((res) => {
+      const jobs = res.data.items;
+      for (let i = 0; i < jobs.length; i++) {
+        if (jobs[i]["img_url"] !== "") {
+          if (jobs[i].type === "upscale" || jobs[i].type === "swapFace") {
+            jobs[i]["thumb_url"] =
+              jobs[i]["img_url"] + "?imageView2/1/w/480/h/600/q/75";
+          } else {
+            jobs[i]["thumb_url"] =
+              jobs[i]["img_url"] + "?imageView2/1/w/480/h/480/q/75";
+          }
         } else {
-          jobs[i]['thumb_url'] = jobs[i]['img_url'] + '?imageView2/1/w/480/h/480/q/75'
+          jobs[i]["thumb_url"] = "/images/img-placeholder.jpg";
         }
-      } else {
-        jobs[i]['thumb_url'] = '/images/img-placeholder.jpg'
-      }
 
-      if (jobs[i].type !== 'upscale' && jobs[i].progress === 100){
-        jobs[i]['can_opt'] = true
+        if (jobs[i].type !== "upscale" && jobs[i].progress === 100) {
+          jobs[i]["can_opt"] = true;
+        }
       }
-    }
-    if (jobs.length < pageSize.value) {
-      isOver.value = true
-    }
-    if (page.value === 1) {
-      finishedJobs.value = jobs
-    } else {
-      finishedJobs.value = finishedJobs.value.concat(jobs)
-    }
-    loading.value = false
-  }).catch(e => {
-    ElMessage.error("获取任务失败：" + e.message)
-  })
-}
+      if (jobs.length < pageSize.value) {
+        isOver.value = true;
+      }
+      if (page.value === 1) {
+        finishedJobs.value = jobs;
+      } else {
+        finishedJobs.value = finishedJobs.value.concat(jobs);
+      }
+      loading.value = false;
+    })
+    .catch((e) => {
+      ElMessage.error("获取任务失败：" + e.message);
+    });
+};
 
 // 切换图片比例
 const changeRate = (item) => {
-  params.value.rate = item.value
-}
+  params.value.rate = item.value;
+};
 // 切换模型
 const changeModel = (item) => {
-  params.value.model = item.value
-}
+  params.value.model = item.value;
+};
 
-const imgKey = ref("")
+const imgKey = ref("");
 const beforeUpload = (key) => {
-  imgKey.value = key
-}
+  imgKey.value = key;
+};
 
 // 图片上传
 const uploadImg = (file) => {
   if (!isLogin.value) {
-    store.setShowLoginDialog(true)
-    return
+    store.setShowLoginDialog(true);
+    return;
   }
 
   // 压缩图片并上传
@@ -882,64 +1177,69 @@ const uploadImg = (file) => {
     quality: 0.6,
     success(result) {
       const formData = new FormData();
-      formData.append('file', result, result.name);
+      formData.append("file", result, result.name);
       // 执行上传操作
-      httpPost('/api/upload', formData).then((res) => {
-        if (imgKey.value === '') {
-          imgList.value.push(res.data.url)
-        } else { // 单张图片上传
-          params.value[imgKey.value] = res.data.url
-          imgKey.value = ''
-        }
-        ElMessage.success('上传成功')
-      }).catch((e) => {
-        ElMessage.error('上传失败:' + e.message)
-      })
+      httpPost("/api/upload", formData)
+        .then((res) => {
+          if (imgKey.value === "") {
+            imgList.value.push(res.data.url);
+          } else {
+            // 单张图片上传
+            params.value[imgKey.value] = res.data.url;
+            imgKey.value = "";
+          }
+          ElMessage.success("上传成功");
+        })
+        .catch((e) => {
+          ElMessage.error("上传失败:" + e.message);
+        });
     },
     error(err) {
       console.log(err.message);
-    },
+    }
   });
 };
 
 // 创建绘图任务
-const promptRef = ref(null)
+const promptRef = ref(null);
 const generate = () => {
   if (!isLogin.value) {
-    store.setShowLoginDialog(true)
-    return
+    store.setShowLoginDialog(true);
+    return;
   }
 
-  if (params.value.prompt === '' && params.value.task_type === "image") {
-    promptRef.value.focus()
-    return ElMessage.error("请输入绘画提示词！")
+  if (params.value.prompt === "" && params.value.task_type === "image") {
+    promptRef.value.focus();
+    return ElMessage.error("请输入绘画提示词！");
   }
   if (params.value.model.indexOf("niji") !== -1 && params.value.raw) {
-    return ElMessage.error("动漫模型不允许启用原始模式")
+    return ElMessage.error("动漫模型不允许启用原始模式");
   }
   if (imgList.value.length !== 2 && params.value.task_type === "swapFace") {
-    return ElMessage.error("换脸操作需要上传两张图片")
+    return ElMessage.error("换脸操作需要上传两张图片");
   }
-  params.value.session_id = getSessionId()
-  params.value.img_arr = imgList.value
-  httpPost("/api/mj/image", params.value).then(() => {
-    ElMessage.success("绘画任务推送成功，请耐心等待任务执行...")
-    power.value -= mjPower.value
-    fetchRunningJobs()
-  }).catch(e => {
-    ElMessage.error("任务推送失败：" + e.message)
-  })
-}
+  params.value.session_id = getSessionId();
+  params.value.img_arr = imgList.value;
+  httpPost("/api/mj/image", params.value)
+    .then(() => {
+      ElMessage.success("绘画任务推送成功，请耐心等待任务执行...");
+      power.value -= mjPower.value;
+      fetchRunningJobs();
+    })
+    .catch((e) => {
+      ElMessage.error("任务推送失败：" + e.message);
+    });
+};
 
 // 图片放大任务
 const upscale = (index, item) => {
-  send('/api/mj/upscale', index, item)
-}
+  send("/api/mj/upscale", index, item);
+};
 
 // 图片变换任务
 const variation = (index, item) => {
-  send('/api/mj/variation', index, item)
-}
+  send("/api/mj/variation", index, item);
+};
 
 const send = (url, index, item) => {
   httpPost(url, {
@@ -949,89 +1249,96 @@ const send = (url, index, item) => {
     message_id: item.message_id,
     message_hash: item.hash,
     session_id: getSessionId(),
-    prompt: item.prompt,
-  }).then(() => {
-    ElMessage.success("任务推送成功，请耐心等待任务执行...")
-    power.value -= mjActionPower.value
-    fetchRunningJobs()
-  }).catch(e => {
-    ElMessage.error("任务推送失败：" + e.message)
+    prompt: item.prompt
   })
-}
+    .then(() => {
+      ElMessage.success("任务推送成功，请耐心等待任务执行...");
+      power.value -= mjActionPower.value;
+      fetchRunningJobs();
+    })
+    .catch((e) => {
+      ElMessage.error("任务推送失败：" + e.message);
+    });
+};
 
 const removeImage = (item) => {
-  ElMessageBox.confirm(
-      '此操作将会删除任务和图片，继续操作码?',
-      '删除提示',
-      {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'warning',
-      }
-  ).then(() => {
-    httpGet("/api/mj/remove", {id: item.id, user_id: item.user_id}).then(() => {
-      ElMessage.success("任务删除成功")
-      page.value = 0
-      isOver.value = false
-      fetchFinishJobs()
-    }).catch(e => {
-      ElMessage.error("任务删除失败：" + e.message)
-    })
-  }).catch(() => {
+  ElMessageBox.confirm("此操作将会删除任务和图片，继续操作码?", "删除提示", {
+    confirmButtonText: "确认",
+    cancelButtonText: "取消",
+    type: "warning"
   })
-}
+    .then(() => {
+      httpGet("/api/mj/remove", { id: item.id, user_id: item.user_id })
+        .then(() => {
+          ElMessage.success("任务删除成功");
+          page.value = 0;
+          isOver.value = false;
+          fetchFinishJobs();
+        })
+        .catch((e) => {
+          ElMessage.error("任务删除失败：" + e.message);
+        });
+    })
+    .catch(() => {});
+};
 
 // 发布图片到作品墙
 const publishImage = (item, action) => {
-  let text = "图片发布"
+  let text = "图片发布";
   if (action === false) {
-    text = "取消发布"
+    text = "取消发布";
   }
-  httpGet("/api/mj/publish", {id: item.id, action: action,user_id: item.user_id}).then(() => {
-    ElMessage.success(text + "成功")
-    item.publish = action
-    page.value = 0
-    isOver.value = false
-    item.publish = action
-  }).catch(e => {
-    ElMessage.error(text + "失败：" + e.message)
+  httpGet("/api/mj/publish", {
+    id: item.id,
+    action: action,
+    user_id: item.user_id
   })
-}
+    .then(() => {
+      ElMessage.success(text + "成功");
+      item.publish = action;
+      page.value = 0;
+      isOver.value = false;
+      item.publish = action;
+    })
+    .catch((e) => {
+      ElMessage.error(text + "失败：" + e.message);
+    });
+};
 
 const previewImg = (item) => {
-  previewURL.value = item.img_url
-
-}
+  previewURL.value = item.img_url;
+};
 
 // 切换菜单
 const tabChange = (tab) => {
   if (tab === "txt2img" || tab === "img2img" || tab === "cref") {
-    params.value.task_type = "image"
+    params.value.task_type = "image";
   } else {
-    params.value.task_type = tab
+    params.value.task_type = tab;
   }
-}
+};
 
 // 删除已上传图片
 const removeUploadImage = (url) => {
-  imgList.value = removeArrayItem(imgList.value, url)
-}
+  imgList.value = removeArrayItem(imgList.value, url);
+};
 
-const isGenerating = ref(false)
+const isGenerating = ref(false);
 const generatePrompt = () => {
   if (params.value.prompt === "") {
-    return showMessageError("请输入原始提示词")
+    return showMessageError("请输入原始提示词");
   }
-  isGenerating.value = true
-  httpPost("/api/prompt/image", {prompt: params.value.prompt}).then(res => {
-    params.value.prompt = res.data
-    isGenerating.value = false
-  }).catch(e => {
-    showMessageError("生成提示词失败："+e.message)
-    isGenerating.value = false
-  })
-}
-
+  isGenerating.value = true;
+  httpPost("/api/prompt/image", { prompt: params.value.prompt })
+    .then((res) => {
+      params.value.prompt = res.data;
+      isGenerating.value = false;
+    })
+    .catch((e) => {
+      showMessageError("生成提示词失败：" + e.message);
+      isGenerating.value = false;
+    });
+};
 </script>
 
 <style lang="stylus">
diff --git a/web/src/views/ImageSd.vue b/web/src/views/ImageSd.vue
index 441b56eb..261f133f 100644
--- a/web/src/views/ImageSd.vue
+++ b/web/src/views/ImageSd.vue
@@ -11,17 +11,21 @@
                 <el-form-item label="采样方法">
                   <template #default>
                     <div class="form-item-inner">
-                      <el-select v-model="params.sampler" style="width:176px">
-                        <el-option v-for="item in samplers" :label="item" :value="item" :key="item"/>
+                      <el-select v-model="params.sampler" style="width: 176px">
+                        <el-option
+                          v-for="item in samplers"
+                          :label="item"
+                          :value="item"
+                          :key="item"
+                        />
                       </el-select>
                       <el-tooltip
-                          effect="light"
-                          content="出图效果比较好的一般是 Euler 和 DPM 系列算法"
-                          raw-content
-                          placement="right"
+                        content="出图效果比较好的一般是 Euler 和 DPM 系列算法"
+                        raw-content
+                        placement="right"
                       >
                         <el-icon class="info-icon">
-                          <InfoFilled/>
+                          <InfoFilled />
                         </el-icon>
                       </el-tooltip>
                     </div>
@@ -33,17 +37,24 @@
                 <el-form-item label="采样调度">
                   <template #default>
                     <div class="form-item-inner">
-                      <el-select v-model="params.scheduler" style="width:176px">
-                        <el-option v-for="item in schedulers" :label="item" :value="item" :key="item"/>
+                      <el-select
+                        v-model="params.scheduler"
+                        style="width: 176px"
+                      >
+                        <el-option
+                          v-for="item in schedulers"
+                          :label="item"
+                          :value="item"
+                          :key="item"
+                        />
                       </el-select>
                       <el-tooltip
-                          effect="light"
-                          content="推荐自动或者 Karras"
-                          raw-content
-                          placement="right"
+                        content="推荐自动或者 Karras"
+                        raw-content
+                        placement="right"
                       >
                         <el-icon class="info-icon">
-                          <InfoFilled/>
+                          <InfoFilled />
                         </el-icon>
                       </el-tooltip>
                     </div>
@@ -57,10 +68,16 @@
                     <div class="form-item-inner">
                       <el-row :gutter="20">
                         <el-col :span="12">
-                          <el-input v-model.number="params.width" placeholder="图片宽度"/>
+                          <el-input
+                            v-model.number="params.width"
+                            placeholder="图片宽度"
+                          />
                         </el-col>
                         <el-col :span="12">
-                          <el-input v-model.number="params.height" placeholder="图片高度"/>
+                          <el-input
+                            v-model.number="params.height"
+                            placeholder="图片高度"
+                          />
                         </el-col>
                       </el-row>
                     </div>
@@ -72,15 +89,14 @@
                 <el-form-item label="迭代步数">
                   <template #default>
                     <div class="form-item-inner">
-                      <el-input v-model.number="params.steps"/>
+                      <el-input v-model.number="params.steps" />
                       <el-tooltip
-                          effect="light"
-                          content="值越大则代表细节越多，同时也意味着出图速度越慢"
-                          raw-content
-                          placement="right"
+                        content="值越大则代表细节越多，同时也意味着出图速度越慢"
+                        raw-content
+                        placement="right"
                       >
                         <el-icon class="info-icon">
-                          <InfoFilled/>
+                          <InfoFilled />
                         </el-icon>
                       </el-tooltip>
                     </div>
@@ -92,15 +108,14 @@
                 <el-form-item label="引导系数">
                   <template #default>
                     <div class="form-item-inner">
-                      <el-input v-model.number="params.cfg_scale"/>
+                      <el-input v-model.number="params.cfg_scale" />
                       <el-tooltip
-                          effect="light"
-                          content="提示词引导系数，图像在多大程度上服从提示词<br/> 较低值会产生更有创意的结果"
-                          raw-content
-                          placement="right"
+                        content="提示词引导系数，图像在多大程度上服从提示词<br/> 较低值会产生更有创意的结果"
+                        raw-content
+                        placement="right"
                       >
                         <el-icon class="info-icon">
-                          <InfoFilled/>
+                          <InfoFilled />
                         </el-icon>
                       </el-tooltip>
                     </div>
@@ -112,26 +127,24 @@
                 <el-form-item label="随机因子">
                   <template #default>
                     <div class="form-item-inner">
-                      <el-input v-model.number="params.seed"/>
+                      <el-input v-model.number="params.seed" />
                       <el-tooltip
-                          effect="light"
-                          content="随机数种子，相同的种子会得到相同的结果<br/> 设置为 -1 则每次随机生成种子"
-                          raw-content
-                          placement="right"
+                        content="随机数种子，相同的种子会得到相同的结果<br/> 设置为 -1 则每次随机生成种子"
+                        raw-content
+                        placement="right"
                       >
                         <el-icon class="info-icon">
-                          <InfoFilled/>
+                          <InfoFilled />
                         </el-icon>
                       </el-tooltip>
 
                       <el-tooltip
-                          effect="light"
-                          content="使用随机数"
-                          raw-content
-                          placement="right"
+                        content="使用随机数"
+                        raw-content
+                        placement="right"
                       >
                         <el-icon @click="params.seed = -1" class="info-icon">
-                          <Orange/>
+                          <Orange />
                         </el-icon>
                       </el-tooltip>
                     </div>
@@ -143,15 +156,18 @@
                 <el-form-item label="高清修复">
                   <template #default>
                     <div class="form-item-inner">
-                      <el-switch v-model="params.hd_fix" style="--el-switch-on-color: #47fff1;" size="large"/>
+                      <el-switch
+                        v-model="params.hd_fix"
+                        style="--el-switch-on-color: #47fff1"
+                        size="large"
+                      />
                       <el-tooltip
-                          effect="light"
-                          content="先以较小的分辨率生成图像，接着方法图像<br />然后在不更改构图的情况下再修改细节"
-                          raw-content
-                          placement="right"
+                        content="先以较小的分辨率生成图像，接着方法图像<br />然后在不更改构图的情况下再修改细节"
+                        raw-content
+                        placement="right"
                       >
                         <el-icon style="margin-left: 10px; top: 12px">
-                          <InfoFilled/>
+                          <InfoFilled />
                         </el-icon>
                       </el-tooltip>
                     </div>
@@ -164,16 +180,22 @@
                   <el-form-item label="重绘幅度">
                     <template #default>
                       <div class="form-item-inner">
-                        <el-slider v-model.number="params.hd_redraw_rate" :max="1" :step="0.1"
-                                   style="width: 180px;--el-slider-main-bg-color:#47fff1"/>
+                        <el-slider
+                          v-model.number="params.hd_redraw_rate"
+                          :max="1"
+                          :step="0.1"
+                          style="
+                            width: 180px;
+                            --el-slider-main-bg-color: #47fff1;
+                          "
+                        />
                         <el-tooltip
-                            effect="light"
-                            content="决定算法对图像内容的影响程度<br />较大的值将得到越有创意的图像"
-                            raw-content
-                            placement="right"
+                          content="决定算法对图像内容的影响程度<br />较大的值将得到越有创意的图像"
+                          raw-content
+                          placement="right"
                         >
                           <el-icon class="info-icon">
-                            <InfoFilled/>
+                            <InfoFilled />
                           </el-icon>
                         </el-tooltip>
                       </div>
@@ -185,17 +207,24 @@
                   <el-form-item label="放大算法">
                     <template #default>
                       <div class="form-item-inner">
-                        <el-select v-model="params.hd_scale_alg" style="width:176px">
-                          <el-option v-for="item in scaleAlg" :label="item" :value="item" :key="item"/>
+                        <el-select
+                          v-model="params.hd_scale_alg"
+                          style="width: 176px"
+                        >
+                          <el-option
+                            v-for="item in scaleAlg"
+                            :label="item"
+                            :value="item"
+                            :key="item"
+                          />
                         </el-select>
                         <el-tooltip
-                            effect="light"
-                            content="高清修复放大算法，主流算法有Latent和ESRGAN_4x"
-                            raw-content
-                            placement="right"
+                          content="高清修复放大算法，主流算法有Latent和ESRGAN_4x"
+                          raw-content
+                          placement="right"
                         >
                           <el-icon class="info-icon">
-                            <InfoFilled/>
+                            <InfoFilled />
                           </el-icon>
                         </el-tooltip>
                       </div>
@@ -207,15 +236,14 @@
                   <el-form-item label="放大倍数">
                     <template #default>
                       <div class="form-item-inner">
-                        <el-input v-model.number="params.hd_scale"/>
+                        <el-input v-model.number="params.hd_scale" />
                         <el-tooltip
-                            effect="light"
-                            content="随机数种子，相同的种子会得到相同的结果<br/> 设置为 -1 则每次随机生成种子"
-                            raw-content
-                            placement="right"
+                          content="随机数种子，相同的种子会得到相同的结果<br/> 设置为 -1 则每次随机生成种子"
+                          raw-content
+                          placement="right"
                         >
                           <el-icon class="info-icon">
-                            <InfoFilled/>
+                            <InfoFilled />
                           </el-icon>
                         </el-tooltip>
                       </div>
@@ -227,15 +255,14 @@
                   <el-form-item label="迭代步数">
                     <template #default>
                       <div class="form-item-inner">
-                        <el-input v-model.number="params.hd_steps"/>
+                        <el-input v-model.number="params.hd_steps" />
                         <el-tooltip
-                            effect="light"
-                            content="重绘迭代步数，如果设置为0，则设置跟原图相同的迭代步数"
-                            raw-content
-                            placement="right"
+                          content="重绘迭代步数，如果设置为0，则设置跟原图相同的迭代步数"
+                          raw-content
+                          placement="right"
                         >
                           <el-icon class="info-icon">
-                            <InfoFilled/>
+                            <InfoFilled />
                           </el-icon>
                         </el-tooltip>
                       </div>
@@ -246,19 +273,28 @@
 
               <div class="param-line">
                 <el-input
-                    v-model="params.prompt"
-                    :autosize="{ minRows: 4, maxRows: 6 }"
-                    type="textarea"
-                    ref="promptRef"
-                    placeholder="请在此输入绘画提示词，您也可以点击下面的提示词助手生成绘画提示词"
-                    v-loading="isGenerating"
-                    style="--el-mask-color:rgba(100, 100, 100, 0.8)"
+                  v-model="params.prompt"
+                  :autosize="{ minRows: 4, maxRows: 6 }"
+                  type="textarea"
+                  ref="promptRef"
+                  placeholder="请在此输入绘画提示词，您也可以点击下面的提示词助手生成绘画提示词"
+                  v-loading="isGenerating"
+                  style="--el-mask-color: rgba(100, 100, 100, 0.8)"
                 />
               </div>
 
               <el-row class="text-info">
-                <el-button class="generate-btn" size="small" @click="generatePrompt" color="#5865f2" :disabled="isGenerating">
-                  <i class="iconfont icon-chuangzuo" style="margin-right: 5px"></i>
+                <el-button
+                  class="generate-btn"
+                  size="small"
+                  @click="generatePrompt"
+                  color="#5865f2"
+                  :disabled="isGenerating"
+                >
+                  <i
+                    class="iconfont icon-chuangzuo"
+                    style="margin-right: 5px"
+                  ></i>
                   <span>生成专业绘画指令</span>
                 </el-button>
               </el-row>
@@ -266,51 +302,62 @@
               <div class="param-line pt">
                 <span>反向提示词：</span>
                 <el-tooltip
-                    effect="light"
-                    content="不希望出现的元素，下面给了默认的起手式"
-                    placement="right"
+                  content="不希望出现的元素，下面给了默认的起手式"
+                  placement="right"
                 >
                   <el-icon class="info-icon">
-                    <InfoFilled/>
+                    <InfoFilled />
                   </el-icon>
                 </el-tooltip>
               </div>
               <div class="param-line">
                 <el-input
-                    v-model="params.neg_prompt"
-                    :autosize="{ minRows: 4, maxRows: 6 }"
-                    type="textarea"
-                    placeholder="反向提示词"
+                  v-model="params.neg_prompt"
+                  :autosize="{ minRows: 4, maxRows: 6 }"
+                  type="textarea"
+                  placeholder="反向提示词"
                 />
               </div>
 
               <div class="text-info">
                 <el-row :gutter="10">
                   <el-col :span="12">
-                    <el-tag>单次绘图消耗{{ sdPower }}算力</el-tag>
+                    <el-text type="primary"
+                      >单次绘图消耗
+                      <el-text type="warning">{{ sdPower }}算力;</el-text>
+                    </el-text>
                   </el-col>
                   <el-col :span="12">
-                    <el-tag type="success">当前可用{{ power }}算力</el-tag>
+                    <el-text type="primary"
+                      >当前可用
+                      <el-text type="warning">
+                        {{ power }}算力</el-text
+                      ></el-text
+                    >
                   </el-col>
                 </el-row>
               </div>
-
             </el-form>
           </div>
           <div class="submit-btn">
-            <el-button color="#47fff1" :dark="false" round @click="generate">立即生成</el-button>
+            <el-button type="primary" :dark="false" round @click="generate"
+              >立即生成</el-button
+            >
           </div>
         </div>
         <div class="task-list-box">
-          <div class="task-list-inner" :style="{ height: listBoxHeight + 'px' }">
+          <div
+            class="task-list-inner"
+            :style="{ height: listBoxHeight + 'px' }"
+          >
             <div class="job-list-box">
               <h2>任务列表</h2>
               <task-list :list="runningJobs" />
-              
-              <h2>创作记录</h2>
-              <div class="finish-job-list">
-                <div v-if="finishedJobs.length > 0">
-                  <v3-waterfall
+              <template v-if="finishedJobs.length > 0">
+                <h2>创作记录</h2>
+                <div class="finish-job-list">
+                  <div v-if="finishedJobs.length > 0">
+                    <v3-waterfall
                       id="waterfall"
                       :list="finishedJobs"
                       srcKey="img_thumb"
@@ -320,95 +367,136 @@
                       :distanceToScroll="100"
                       :isLoading="loading"
                       :isOver="isOver"
-                      @scrollReachBottom="fetchFinishJobs()">
-                    <template #default="slotProp">
-                      <div class="job-item animate">
-                        <el-image v-if="slotProp.item.progress === 101">
-                          <template #error>
-                            <div class="image-slot">
-                              <div class="err-msg-container">
-                                <div class="title">任务失败</div>
-                                <div class="opt">
-                                  <el-popover title="错误详情" trigger="click" :width="250" :content="slotProp.item['err_msg']" placement="top">
-                                    <template #reference>
-                                      <el-button type="info">详情</el-button>
-                                    </template>
-                                  </el-popover>
-                                  <el-button type="danger"  @click="removeImage(slotProp.item)">删除</el-button>
+                      @scrollReachBottom="fetchFinishJobs()"
+                    >
+                      <template #default="slotProp">
+                        <div class="job-item animate">
+                          <el-image v-if="slotProp.item.progress === 101">
+                            <template #error>
+                              <div class="image-slot">
+                                <div class="err-msg-container">
+                                  <div class="title">任务失败</div>
+                                  <div class="opt">
+                                    <el-popover
+                                      title="错误详情"
+                                      trigger="click"
+                                      :width="250"
+                                      :content="slotProp.item['err_msg']"
+                                      placement="top"
+                                    >
+                                      <template #reference>
+                                        <el-button type="info">详情</el-button>
+                                      </template>
+                                    </el-popover>
+                                    <el-button
+                                      type="danger"
+                                      @click="removeImage(slotProp.item)"
+                                      >删除</el-button
+                                    >
+                                  </div>
                                 </div>
                               </div>
-                            </div>
-                          </template>
-                        </el-image>
-                        <div v-else>
-                          <el-image
+                            </template>
+                          </el-image>
+                          <div v-else>
+                            <el-image
                               :src="slotProp.item['img_thumb']"
                               @click="showTask(slotProp.item)"
                               fit="cover"
-                              loading="lazy"/>
-                          <div class="remove">
-                            <el-button type="danger" :icon="Delete" @click="removeImage(slotProp.item)" circle/>
-                            <el-button type="warning" v-if="slotProp.item.publish"
-                                       @click="publishImage(slotProp.item, false)"
-                                       circle>
-                              <i class="iconfont icon-cancel-share"></i>
-                            </el-button>
-                            <el-button type="success" v-else @click="publishImage(slotProp.item, true)" circle>
-                              <i class="iconfont icon-share-bold"></i>
-                            </el-button>
+                              loading="lazy"
+                            />
+                            <div class="remove">
+                              <el-button
+                                type="danger"
+                                :icon="Delete"
+                                @click="removeImage(slotProp.item)"
+                                circle
+                              />
+                              <el-button
+                                type="warning"
+                                v-if="slotProp.item.publish"
+                                @click="publishImage(slotProp.item, false)"
+                                circle
+                              >
+                                <i class="iconfont icon-cancel-share"></i>
+                              </el-button>
+                              <el-button
+                                type="success"
+                                v-else
+                                @click="publishImage(slotProp.item, true)"
+                                circle
+                              >
+                                <i class="iconfont icon-share-bold"></i>
+                              </el-button>
+                            </div>
                           </div>
                         </div>
-                      </div>
-                    </template>
-
-                    <template #footer>
-                      <div class="no-more-data">
-                        <span>没有更多数据了</span>
-                        <i class="iconfont icon-face"></i>
-                      </div>
-                    </template>
-                  </v3-waterfall>
+                      </template>
 
+                      <template #footer>
+                        <div class="no-more-data">
+                          <span>没有更多数据了</span>
+                          <i class="iconfont icon-face"></i>
+                        </div>
+                      </template>
+                    </v3-waterfall>
+                  </div>
+                  <el-empty
+                    :image-size="100"
+                    v-else
+                    :image="nodata"
+                    description="暂无记录"
+                  />
                 </div>
-                <el-empty :image-size="100" v-else/>
-              </div> <!-- end finish job list-->
+              </template>
+
+              <!-- end finish job list-->
             </div>
           </div>
-          <back-top :right="30" :bottom="30" bg-color="#0f7a71"/>
-        </div><!-- end task list box -->
+          <back-top :right="30" :bottom="30" />
+        </div>
+        <!-- end task list box -->
       </div>
 
       <!-- 任务详情弹框 -->
-      <el-dialog v-model="showTaskDialog" title="绘画任务详情" :fullscreen="true">
+      <el-dialog
+        v-model="showTaskDialog"
+        title="绘画任务详情"
+        :fullscreen="true"
+      >
         <el-row :gutter="20">
           <el-col :span="16">
-            <div class="img-container" :style="{maxHeight: fullImgHeight+'px'}">
-              <el-image :src="item['img_url']" fit="contain"/>
+            <div
+              class="img-container"
+              :style="{ maxHeight: fullImgHeight + 'px' }"
+            >
+              <el-image :src="item['img_url']" fit="contain" />
             </div>
           </el-col>
           <el-col :span="8">
             <div class="task-info">
               <div class="info-line">
-                <el-divider>
-                  正向提示词
-                </el-divider>
+                <el-divider> 正向提示词 </el-divider>
                 <div class="prompt">
                   <span>{{ item.prompt }}</span>
-                  <el-icon class="copy-prompt-sd" :data-clipboard-text="item.prompt">
-                    <DocumentCopy/>
+                  <el-icon
+                    class="copy-prompt-sd"
+                    :data-clipboard-text="item.prompt"
+                  >
+                    <DocumentCopy />
                   </el-icon>
                 </div>
-
               </div>
 
               <div class="info-line">
-                <el-divider>
-                  反向提示词
-                </el-divider>
+                <el-divider> 反向提示词 </el-divider>
                 <div class="prompt">
                   <span>{{ item.params.neg_prompt }}</span>
-                  <el-icon class="copy-prompt-sd" :data-clipboard-text="item.params.neg_prompt">
-                    <DocumentCopy/>
+                  <el-icon
+                    class="copy-prompt-sd"
+                    :data-clipboard-text="item.params.neg_prompt"
+                  >
+                    <DocumentCopy />
                   </el-icon>
                 </div>
               </div>
@@ -423,7 +511,9 @@
               <div class="info-line">
                 <div class="wrapper">
                   <label>图片尺寸：</label>
-                  <div class="item-value">{{ item.params.width }} x {{ item.params.height }}</div>
+                  <div class="item-value">
+                    {{ item.params.width }} x {{ item.params.height }}
+                  </div>
                 </div>
               </div>
 
@@ -449,13 +539,13 @@
               </div>
 
               <div v-if="item.params.hd_fix">
-                <el-divider>
-                  高清修复
-                </el-divider>
+                <el-divider> 高清修复 </el-divider>
                 <div class="info-line">
                   <div class="wrapper">
                     <label>重绘幅度：</label>
-                    <div class="item-value">{{ item.params.hd_redraw_rate }}</div>
+                    <div class="item-value">
+                      {{ item.params.hd_redraw_rate }}
+                    </div>
                   </div>
                 </div>
 
@@ -482,53 +572,68 @@
               </div>
 
               <div class="copy-params">
-                <el-button type="primary" round @click="copyParams(item)">画一张同款的</el-button>
+                <el-button type="primary" round @click="copyParams(item)"
+                  >画一张同款的</el-button
+                >
               </div>
-
             </div>
           </el-col>
         </el-row>
-
       </el-dialog>
     </div>
   </div>
 </template>
 
 <script setup>
-import {nextTick, onMounted, onUnmounted, ref} from "vue"
-import {Delete, DocumentCopy, InfoFilled, Orange} from "@element-plus/icons-vue";
-import {httpGet, httpPost} from "@/utils/http";
-import {ElMessage, ElMessageBox} from "element-plus";
+import { nextTick, onMounted, onUnmounted, ref } from "vue";
+import {
+  Delete,
+  DocumentCopy,
+  InfoFilled,
+  Orange
+} from "@element-plus/icons-vue";
+import nodata from "@/assets/img/no-data.png";
+
+import { httpGet, httpPost } from "@/utils/http";
+import { ElMessage, ElMessageBox } from "element-plus";
 import Clipboard from "clipboard";
-import {checkSession, getClientId, getSystemInfo} from "@/store/cache";
-import {useRouter} from "vue-router";
-import {getSessionId} from "@/store/session";
-import {useSharedStore} from "@/store/sharedata";
+import { checkSession, getClientId, getSystemInfo } from "@/store/cache";
+import { useRouter } from "vue-router";
+import { getSessionId } from "@/store/session";
+import { useSharedStore } from "@/store/sharedata";
 import TaskList from "@/components/TaskList.vue";
 import BackTop from "@/components/BackTop.vue";
-import {showMessageError} from "@/utils/dialog";
+import { showMessageError } from "@/utils/dialog";
 
-const listBoxHeight = ref(0)
+const listBoxHeight = ref(0);
 // const paramBoxHeight = ref(0)
-const fullImgHeight = ref(window.innerHeight - 60)
-const showTaskDialog = ref(false)
-const item = ref({})
-const isLogin = ref(false)
-const loading = ref(true)
-const colWidth = ref(220)
+const fullImgHeight = ref(window.innerHeight - 60);
+const showTaskDialog = ref(false);
+const item = ref({});
+const isLogin = ref(false);
+const loading = ref(true);
+const colWidth = ref(220);
 const store = useSharedStore();
 
 const resizeElement = function () {
-  listBoxHeight.value = window.innerHeight - 80
+  listBoxHeight.value = window.innerHeight - 80;
   // paramBoxHeight.value = window.innerHeight - 200
 };
-resizeElement()
+resizeElement();
 window.onresize = () => {
-  resizeElement()
-}
-const samplers = ["Euler a", "DPM++ 2S a", "DPM++ 2M", "DPM++ SDE", "DPM++ 2M SDE", "UniPC", "Restart"]
-const schedulers = ["Automatic", "Karras", "Exponential", "Uniform"]
-const scaleAlg = ["Latent", "ESRGAN_4x", "R-ESRGAN 4x+", "SwinIR_4x", "LDSR"]
+  resizeElement();
+};
+const samplers = [
+  "Euler a",
+  "DPM++ 2S a",
+  "DPM++ 2M",
+  "DPM++ SDE",
+  "DPM++ 2M SDE",
+  "UniPC",
+  "Restart"
+];
+const schedulers = ["Automatic", "Karras", "Exponential", "Uniform"];
+const scaleAlg = ["Latent", "ESRGAN_4x", "R-ESRGAN 4x+", "SwinIR_4x", "LDSR"];
 const params = ref({
   client_id: getClientId(),
   width: 1024,
@@ -544,209 +649,221 @@ const params = ref({
   hd_scale_alg: scaleAlg[0],
   hd_steps: 0,
   prompt: "",
-  neg_prompt: "nsfw, paintings,low quality,easynegative,ng_deepnegative ,lowres,bad anatomy,bad hands,bad feet",
-})
+  neg_prompt:
+    "nsfw, paintings,low quality,easynegative,ng_deepnegative ,lowres,bad anatomy,bad hands,bad feet"
+});
 
-const runningJobs = ref([])
-const finishedJobs = ref([])
-const router = useRouter()
+const runningJobs = ref([]);
+const finishedJobs = ref([]);
+const router = useRouter();
 // 检查是否有画同款的参数
-const _params = router.currentRoute.value.params["copyParams"]
+const _params = router.currentRoute.value.params["copyParams"];
 if (_params) {
-  params.value = JSON.parse(_params)
+  params.value = JSON.parse(_params);
 }
-const power = ref(0)
-const sdPower = ref(0) // 画一张 SD 图片消耗算力
+const power = ref(0);
+const sdPower = ref(0); // 画一张 SD 图片消耗算力
 
-const userId = ref(0)
-const clipboard = ref(null)
+const userId = ref(0);
+const clipboard = ref(null);
 onMounted(() => {
-  initData()
-  clipboard.value = new Clipboard('.copy-prompt-sd');
-  clipboard.value.on('success', () => {
+  initData();
+  clipboard.value = new Clipboard(".copy-prompt-sd");
+  clipboard.value.on("success", () => {
     ElMessage.success("复制成功！");
-  })
+  });
 
-  clipboard.value.on('error', () => {
-    ElMessage.error('复制失败！');
-  })
+  clipboard.value.on("error", () => {
+    ElMessage.error("复制失败！");
+  });
 
-  getSystemInfo().then(res => {
-    sdPower.value = res.data.sd_power
-    params.value.neg_prompt = res.data.sd_neg_prompt
-  }).catch(e => {
-    ElMessage.error("获取系统配置失败：" + e.message)
-  })
+  getSystemInfo()
+    .then((res) => {
+      sdPower.value = res.data.sd_power;
+      params.value.neg_prompt = res.data.sd_neg_prompt;
+    })
+    .catch((e) => {
+      ElMessage.error("获取系统配置失败：" + e.message);
+    });
 
-  store.addMessageHandler("sd",(data) => {
+  store.addMessageHandler("sd", (data) => {
     // 丢弃无关消息
     if (data.channel !== "sd" || data.clientId !== getClientId()) {
-      return
+      return;
     }
 
     if (data.body === "FINISH" || data.body === "FAIL") {
-      page.value = 0
-      isOver.value = false
-      fetchFinishJobs()
+      page.value = 0;
+      isOver.value = false;
+      fetchFinishJobs();
     }
-    nextTick(() => fetchRunningJobs())
-  })
-
-})
+    nextTick(() => fetchRunningJobs());
+  });
+});
 
 onUnmounted(() => {
-  clipboard.value.destroy()
-  store.removeMessageHandler("sd")
-})
-
+  clipboard.value.destroy();
+  store.removeMessageHandler("sd");
+});
 
 const initData = () => {
-  checkSession().then(user => {
-    power.value = user['power']
-    userId.value = user.id
-    isLogin.value = true
-    page.value = 0
-    fetchRunningJobs()
-    fetchFinishJobs()
-  }).catch(() => {
-  });
-}
+  checkSession()
+    .then((user) => {
+      power.value = user["power"];
+      userId.value = user.id;
+      isLogin.value = true;
+      page.value = 0;
+      fetchRunningJobs();
+      fetchFinishJobs();
+    })
+    .catch(() => {});
+};
 
 const fetchRunningJobs = () => {
   if (!isLogin.value) {
-    return
+    return;
   }
 
   // 获取运行中的任务
-  httpGet(`/api/sd/jobs?finish=0`).then(res => {
-    runningJobs.value = res.data.items
-  }).catch(e => {
-    ElMessage.error("获取任务失败：" + e.message)
-  })
-}
+  httpGet(`/api/sd/jobs?finish=0`)
+    .then((res) => {
+      runningJobs.value = res.data.items;
+    })
+    .catch((e) => {
+      ElMessage.error("获取任务失败：" + e.message);
+    });
+};
 
-const page = ref(0)
-const pageSize = ref(20)
-const isOver = ref(false)
+const page = ref(0);
+const pageSize = ref(20);
+const isOver = ref(false);
 // 获取已完成的任务
 const fetchFinishJobs = () => {
   if (!isLogin.value || isOver.value === true) {
-    return
+    return;
   }
-  loading.value = true
-  page.value = page.value + 1
+  loading.value = true;
+  page.value = page.value + 1;
 
-  httpGet(`/api/sd/jobs?finish=1&page=${page.value}&page_size=${pageSize.value}`).then(res => {
-    if (res.data.items.length < pageSize.value) {
-      isOver.value = true
-    }
-    const imageList = res.data.items
-    for (let i = 0; i < imageList.length; i++) {
-      imageList[i]["img_thumb"] = imageList[i]["img_url"] + "?imageView2/4/w/300/h/0/q/75"
-    }
-    if (page.value === 1) {
-      finishedJobs.value = imageList
-    } else {
-      finishedJobs.value = finishedJobs.value.concat(imageList)
-    }
-
-    loading.value = false
-  }).catch(e => {
-    ElMessage.error("获取任务失败：" + e.message)
-  })
-}
+  httpGet(
+    `/api/sd/jobs?finish=1&page=${page.value}&page_size=${pageSize.value}`
+  )
+    .then((res) => {
+      if (res.data.items.length < pageSize.value) {
+        isOver.value = true;
+      }
+      const imageList = res.data.items;
+      for (let i = 0; i < imageList.length; i++) {
+        imageList[i]["img_thumb"] =
+          imageList[i]["img_url"] + "?imageView2/4/w/300/h/0/q/75";
+      }
+      if (page.value === 1) {
+        finishedJobs.value = imageList;
+      } else {
+        finishedJobs.value = finishedJobs.value.concat(imageList);
+      }
 
+      loading.value = false;
+    })
+    .catch((e) => {
+      ElMessage.error("获取任务失败：" + e.message);
+    });
+};
 
 // 创建绘图任务
-const promptRef = ref(null)
+const promptRef = ref(null);
 const generate = () => {
-  if (params.value.prompt === '') {
-    promptRef.value.focus()
-    return ElMessage.error("请输入绘画提示词！")
+  if (params.value.prompt === "") {
+    promptRef.value.focus();
+    return ElMessage.error("请输入绘画提示词！");
   }
 
   if (!isLogin.value) {
-    store.setShowLoginDialog(true)
-    return
+    store.setShowLoginDialog(true);
+    return;
   }
 
   if (!params.value.seed) {
-    params.value.seed = -1
+    params.value.seed = -1;
   }
-  params.value.session_id = getSessionId()
-  httpPost("/api/sd/image", params.value).then(() => {
-    ElMessage.success("绘画任务推送成功，请耐心等待任务执行...")
-    power.value -= sdPower.value
-    fetchRunningJobs()
-  }).catch(e => {
-    ElMessage.error("任务推送失败：" + e.message)
-  })
-}
+  params.value.session_id = getSessionId();
+  httpPost("/api/sd/image", params.value)
+    .then(() => {
+      ElMessage.success("绘画任务推送成功，请耐心等待任务执行...");
+      power.value -= sdPower.value;
+      fetchRunningJobs();
+    })
+    .catch((e) => {
+      ElMessage.error("任务推送失败：" + e.message);
+    });
+};
 
 const showTask = (row) => {
-  item.value = row
-  showTaskDialog.value = true
-}
+  item.value = row;
+  showTaskDialog.value = true;
+};
 
 const copyParams = (row) => {
-  params.value = row.params
-  showTaskDialog.value = false
-}
+  params.value = row.params;
+  showTaskDialog.value = false;
+};
 
 const removeImage = (item) => {
-  ElMessageBox.confirm(
-      '此操作将会删除任务和图片，继续操作码?',
-      '删除提示',
-      {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'warning',
-      }
-  ).then(() => {
-    httpGet("/api/sd/remove", {id: item.id}).then(() => {
-      ElMessage.success("任务删除成功")
-      page.value = 0
-      isOver.value = false
-      fetchFinishJobs()
-    }).catch(e => {
-      ElMessage.error("任务删除失败：" + e.message)
-    })
-  }).catch(() => {
+  ElMessageBox.confirm("此操作将会删除任务和图片，继续操作码?", "删除提示", {
+    confirmButtonText: "确认",
+    cancelButtonText: "取消",
+    type: "warning"
   })
-}
+    .then(() => {
+      httpGet("/api/sd/remove", { id: item.id })
+        .then(() => {
+          ElMessage.success("任务删除成功");
+          page.value = 0;
+          isOver.value = false;
+          fetchFinishJobs();
+        })
+        .catch((e) => {
+          ElMessage.error("任务删除失败：" + e.message);
+        });
+    })
+    .catch(() => {});
+};
 
 // 发布图片到作品墙
 const publishImage = (item, action) => {
-  let text = "图片发布"
+  let text = "图片发布";
   if (action === false) {
-    text = "取消发布"
+    text = "取消发布";
   }
-  httpGet("/api/sd/publish", {id: item.id, action: action}).then(() => {
-    ElMessage.success(text + "成功")
-    item.publish = action
-    page.value = 0
-    isOver.value = false
-    item.publish = action
-  }).catch(e => {
-    ElMessage.error(text + "失败：" + e.message)
-  })
-}
+  httpGet("/api/sd/publish", { id: item.id, action: action })
+    .then(() => {
+      ElMessage.success(text + "成功");
+      item.publish = action;
+      page.value = 0;
+      isOver.value = false;
+      item.publish = action;
+    })
+    .catch((e) => {
+      ElMessage.error(text + "失败：" + e.message);
+    });
+};
 
-const isGenerating = ref(false)
+const isGenerating = ref(false);
 const generatePrompt = () => {
   if (params.value.prompt === "") {
-    return showMessageError("请输入原始提示词")
+    return showMessageError("请输入原始提示词");
   }
-  isGenerating.value = true
-  httpPost("/api/prompt/image", {prompt: params.value.prompt}).then(res => {
-    params.value.prompt = res.data
-    isGenerating.value = false
-  }).catch(e => {
-    showMessageError("生成提示词失败："+e.message)
-    isGenerating.value = false
-  })
-}
-
+  isGenerating.value = true;
+  httpPost("/api/prompt/image", { prompt: params.value.prompt })
+    .then((res) => {
+      params.value.prompt = res.data;
+      isGenerating.value = false;
+    })
+    .catch((e) => {
+      showMessageError("生成提示词失败：" + e.message);
+      isGenerating.value = false;
+    });
+};
 </script>
 
 <style lang="stylus">
diff --git a/web/src/views/ImagesWall.vue b/web/src/views/ImagesWall.vue
index 8f3b7533..b1e56b19 100644
--- a/web/src/views/ImagesWall.vue
+++ b/web/src/views/ImagesWall.vue
@@ -11,37 +11,43 @@
           </el-radio-group>
         </div>
       </div>
-      <div class="waterfall" :style="{ height:listBoxHeight + 'px' }" id="waterfall-box">
-        <v3-waterfall v-if="imgType === 'mj'"
-                      id="waterfall"
-                      :list="data['mj']"
-                      srcKey="img_thumb"
-                      :gap="12"
-                      :bottomGap="-5"
-                      :colWidth="colWidth"
-                      :distanceToScroll="100"
-                      :isLoading="loading"
-                      :isOver="isOver"
-                      @scrollReachBottom="getNext">
+      <div
+        class="waterfall"
+        :style="{ height: listBoxHeight + 'px' }"
+        id="waterfall-box"
+      >
+        <v3-waterfall
+          v-if="imgType === 'mj'"
+          id="waterfall"
+          :list="data['mj']"
+          srcKey="img_thumb"
+          :gap="12"
+          :bottomGap="-5"
+          :colWidth="colWidth"
+          :distanceToScroll="100"
+          :isLoading="loading"
+          :isOver="isOver"
+          @scrollReachBottom="getNext"
+        >
           <template #default="slotProp">
             <div class="list-item">
               <div class="image">
-                <el-image :src="slotProp.item['img_thumb']"
-                          :zoom-rate="1.2"
-                          :preview-src-list="[slotProp.item['img_url']]"
-                          :preview-teleported="true"
-                          :initial-index="10"
-                          loading="lazy">
+                <el-image
+                  :src="slotProp.item['img_thumb']"
+                  :zoom-rate="1.2"
+                  :preview-src-list="[slotProp.item['img_url']]"
+                  :preview-teleported="true"
+                  :initial-index="10"
+                  loading="lazy"
+                >
                   <template #placeholder>
-                    <div class="image-slot">
-                      正在加载图片
-                    </div>
+                    <div class="image-slot">正在加载图片</div>
                   </template>
 
                   <template #error>
                     <div class="image-slot">
                       <el-icon>
-                        <Picture/>
+                        <Picture />
                       </el-icon>
                     </div>
                   </template>
@@ -49,59 +55,61 @@
               </div>
               <div class="opt">
                 <el-tooltip
-                    class="box-item"
-                    effect="light"
-                    content="复制提示词"
-                    placement="top"
+                  class="box-item"
+                  content="复制提示词"
+                  placement="top"
                 >
-                  <el-icon class="copy-prompt-wall" :data-clipboard-text="slotProp.item.prompt">
-                    <DocumentCopy/>
+                  <el-icon
+                    class="copy-prompt-wall"
+                    :data-clipboard-text="slotProp.item.prompt"
+                  >
+                    <DocumentCopy />
                   </el-icon>
                 </el-tooltip>
 
-                <el-tooltip
-                    class="box-item"
-                    effect="light"
-                    content="画同款"
-                    placement="top"
-                >
-                  <i class="iconfont icon-palette-pen" @click="drawSameMj(slotProp.item)"></i>
+                <el-tooltip class="box-item" content="画同款" placement="top">
+                  <i
+                    class="iconfont icon-palette-pen"
+                    @click="drawSameMj(slotProp.item)"
+                  ></i>
                 </el-tooltip>
               </div>
             </div>
           </template>
         </v3-waterfall>
 
-        <v3-waterfall v-else-if="imgType === 'dall'"
-                      id="waterfall"
-                      :list="data['dall']"
-                      srcKey="img_thumb"
-                      :gap="12"
-                      :bottomGap="-5"
-                      :colWidth="colWidth"
-                      :distanceToScroll="100"
-                      :isLoading="loading"
-                      :isOver="isOver"
-                      @scrollReachBottom="getNext">
+        <v3-waterfall
+          v-else-if="imgType === 'dall'"
+          id="waterfall"
+          :list="data['dall']"
+          srcKey="img_thumb"
+          :gap="12"
+          :bottomGap="-5"
+          :colWidth="colWidth"
+          :distanceToScroll="100"
+          :isLoading="loading"
+          :isOver="isOver"
+          @scrollReachBottom="getNext"
+        >
           <template #default="slotProp">
             <div class="list-item">
               <div class="image">
-                <el-image :src="slotProp.item['img_thumb']"
-                          :zoom-rate="1.2"
-                          :preview-src-list="[slotProp.item['img_url']]"
-                          :preview-teleported="true"
-                          :initial-index="10"
-                          loading="lazy">
+                <el-image
+                  :src="slotProp.item['img_thumb']"
+                  :zoom-rate="1.2"
+                  :preview-src-list="[slotProp.item['img_url']]"
+                  :preview-teleported="true"
+                  :initial-index="10"
+                  loading="lazy"
+                >
                   <template #placeholder>
-                    <div class="image-slot">
-                      正在加载图片
-                    </div>
+                    <div class="image-slot">正在加载图片</div>
                   </template>
 
                   <template #error>
                     <div class="image-slot">
                       <el-icon>
-                        <Picture/>
+                        <Picture />
                       </el-icon>
                     </div>
                   </template>
@@ -109,13 +117,15 @@
               </div>
               <div class="opt">
                 <el-tooltip
-                    class="box-item"
-                    effect="light"
-                    content="复制提示词"
-                    placement="top"
+                  class="box-item"
+                  content="复制提示词"
+                  placement="top"
                 >
-                  <el-icon class="copy-prompt-wall" :data-clipboard-text="slotProp.item.prompt">
-                    <DocumentCopy/>
+                  <el-icon
+                    class="copy-prompt-wall"
+                    :data-clipboard-text="slotProp.item.prompt"
+                  >
+                    <DocumentCopy />
                   </el-icon>
                 </el-tooltip>
               </div>
@@ -123,32 +133,35 @@
           </template>
         </v3-waterfall>
 
-        <v3-waterfall v-else
-                      id="waterfall"
-                      :list="data['sd']"
-                      srcKey="img_thumb"
-                      :gap="12"
-                      :bottomGap="-5"
-                      :colWidth="colWidth"
-                      :distanceToScroll="100"
-                      :isLoading="loading"
-                      :isOver="isOver"
-                      @scrollReachBottom="getNext">
+        <v3-waterfall
+          v-else
+          id="waterfall"
+          :list="data['sd']"
+          srcKey="img_thumb"
+          :gap="12"
+          :bottomGap="-5"
+          :colWidth="colWidth"
+          :distanceToScroll="100"
+          :isLoading="loading"
+          :isOver="isOver"
+          @scrollReachBottom="getNext"
+        >
           <template #default="slotProp">
             <div class="list-item">
               <div class="image">
-                <el-image :src="slotProp.item['img_thumb']" loading="lazy"
-                          @click="showTask(slotProp.item)">
+                <el-image
+                  :src="slotProp.item['img_thumb']"
+                  loading="lazy"
+                  @click="showTask(slotProp.item)"
+                >
                   <template #placeholder>
-                    <div class="image-slot">
-                      正在加载图片
-                    </div>
+                    <div class="image-slot">正在加载图片</div>
                   </template>
 
                   <template #error>
                     <div class="image-slot">
                       <el-icon>
-                        <Picture/>
+                        <Picture />
                       </el-icon>
                     </div>
                   </template>
@@ -159,31 +172,36 @@
         </v3-waterfall>
 
         <div class="footer" v-if="isOver">
-          <span>没有更多数据了</span>
-          <i class="iconfont icon-face"></i>
+          <el-empty
+            :image-size="100"
+            :image="nodata"
+            description="没有更多数据了"
+          />
+          <!-- <span>没有更多数据了</span>
+          <i class="iconfont icon-face"></i> -->
         </div>
 
-        <back-top :right="30" :bottom="30" bg-color="#0f7a71"/>
-
-      </div><!-- end of waterfall -->
-
+        <back-top :right="30" :bottom="30" />
+      </div>
+      <!-- end of waterfall -->
     </div>
     <!-- 任务详情弹框 -->
     <el-dialog v-model="showTaskDialog" title="绘画任务详情" :fullscreen="true">
       <el-row :gutter="20">
         <el-col :span="16">
-          <div class="img-container" :style="{maxHeight: fullImgHeight+'px'}">
+          <div
+            class="img-container"
+            :style="{ maxHeight: fullImgHeight + 'px' }"
+          >
             <el-image :src="item['img_url']" fit="contain">
               <template #placeholder>
-                <div class="image-slot">
-                  正在加载图片
-                </div>
+                <div class="image-slot">正在加载图片</div>
               </template>
 
               <template #error>
                 <div class="image-slot">
                   <el-icon>
-                    <Picture/>
+                    <Picture />
                   </el-icon>
                 </div>
               </template>
@@ -193,26 +211,27 @@
         <el-col :span="8">
           <div class="task-info">
             <div class="info-line">
-              <el-divider>
-                正向提示词
-              </el-divider>
+              <el-divider> 正向提示词 </el-divider>
               <div class="prompt">
                 <span>{{ item.prompt }}</span>
-                <el-icon class="copy-prompt-wall" :data-clipboard-text="item.prompt">
-                  <DocumentCopy/>
+                <el-icon
+                  class="copy-prompt-wall"
+                  :data-clipboard-text="item.prompt"
+                >
+                  <DocumentCopy />
                 </el-icon>
               </div>
-
             </div>
 
             <div class="info-line">
-              <el-divider>
-                反向提示词
-              </el-divider>
+              <el-divider> 反向提示词 </el-divider>
               <div class="prompt">
                 <span>{{ item.params.negative_prompt }}</span>
-                <el-icon class="copy-prompt-wall" :data-clipboard-text="item.params.negative_prompt">
-                  <DocumentCopy/>
+                <el-icon
+                  class="copy-prompt-wall"
+                  :data-clipboard-text="item.params.negative_prompt"
+                >
+                  <DocumentCopy />
                 </el-icon>
               </div>
             </div>
@@ -227,7 +246,9 @@
             <div class="info-line">
               <div class="wrapper">
                 <label>图片尺寸：</label>
-                <div class="item-value">{{ item.params.width }} x {{ item.params.height }}</div>
+                <div class="item-value">
+                  {{ item.params.width }} x {{ item.params.height }}
+                </div>
               </div>
             </div>
 
@@ -253,9 +274,7 @@
             </div>
 
             <div v-if="item.params.hd_fix">
-              <el-divider>
-                高清修复
-              </el-divider>
+              <el-divider> 高清修复 </el-divider>
               <div class="info-line">
                 <div class="wrapper">
                   <label>重绘幅度：</label>
@@ -286,146 +305,151 @@
             </div>
 
             <div class="copy-params">
-              <el-button type="primary" round @click="drawSameSd(item)">画一张同款的</el-button>
+              <el-button type="primary" round @click="drawSameSd(item)"
+                >画一张同款的</el-button
+              >
             </div>
-
           </div>
         </el-col>
       </el-row>
-
     </el-dialog>
   </div>
 </template>
 
 <script setup>
-import {nextTick, onMounted, onUnmounted, ref} from "vue"
-import {DocumentCopy, Picture} from "@element-plus/icons-vue";
-import {httpGet} from "@/utils/http";
-import {ElMessage} from "element-plus";
+import nodata from "@/assets/img/no-data.png";
+import { nextTick, onMounted, onUnmounted, ref } from "vue";
+import { DocumentCopy, Picture } from "@element-plus/icons-vue";
+import { httpGet } from "@/utils/http";
+import { ElMessage } from "element-plus";
 import Clipboard from "clipboard";
-import {useRouter} from "vue-router";
+import { useRouter } from "vue-router";
 import BackTop from "@/components/BackTop.vue";
 
 const data = ref({
-  "mj": [],
-  "sd": [],
-  "dall": [],
-})
-const loading = ref(true)
-const isOver = ref(false)
-const imgType = ref("mj") // 图片类别
-const listBoxHeight = window.innerHeight - 124
-const colWidth = ref(220)
-const fullImgHeight = ref(window.innerHeight - 60)
-const showTaskDialog = ref(false)
-const item = ref({})
+  mj: [],
+  sd: [],
+  dall: []
+});
+const loading = ref(true);
+const isOver = ref(false);
+const imgType = ref("mj"); // 图片类别
+const listBoxHeight = window.innerHeight - 124;
+const colWidth = ref(220);
+const fullImgHeight = ref(window.innerHeight - 60);
+const showTaskDialog = ref(false);
+const item = ref({});
 
 // 计算瀑布流列宽度
 const calcColWidth = () => {
-  const listBoxWidth = window.innerWidth - 60 - 80
-  const rows = Math.floor(listBoxWidth / colWidth.value)
-  colWidth.value = Math.floor((listBoxWidth - (rows - 1) * 12) / rows)
-}
-calcColWidth()
+  const listBoxWidth = window.innerWidth - 60 - 80;
+  const rows = Math.floor(listBoxWidth / colWidth.value);
+  colWidth.value = Math.floor((listBoxWidth - (rows - 1) * 12) / rows);
+};
+calcColWidth();
 window.onresize = () => {
-  calcColWidth()
-}
+  calcColWidth();
+};
 
-const page = ref(0)
-const pageSize = ref(15)
+const page = ref(0);
+const pageSize = ref(15);
 // 获取下一页数据
 const getNext = () => {
   if (isOver.value) {
-    return
+    return;
   }
 
-  loading.value = true
-  page.value = page.value + 1
-  let url = ""
+  loading.value = true;
+  page.value = page.value + 1;
+  let url = "";
   switch (imgType.value) {
     case "mj":
-      url = "/api/mj/imgWall"
-      break
+      url = "/api/mj/imgWall";
+      break;
     case "sd":
-      url = "/api/sd/imgWall"
-      break
+      url = "/api/sd/imgWall";
+      break;
     case "dall":
-      url = "/api/dall/imgWall"
-      break
+      url = "/api/dall/imgWall";
+      break;
   }
-  httpGet(`${url}?page=${page.value}&page_size=${pageSize.value}`).then(res => {
-    loading.value = false
-    if (!res.data.items || res.data.items.length === 0) {
-      isOver.value = true
-      return
-    }
+  httpGet(`${url}?page=${page.value}&page_size=${pageSize.value}`)
+    .then((res) => {
+      loading.value = false;
+      if (!res.data.items || res.data.items.length === 0) {
+        isOver.value = true;
+        return;
+      }
 
-    // 生成缩略图
-    const imageList = res.data.items
-    for (let i = 0; i < imageList.length; i++) {
-      imageList[i]["img_thumb"] = imageList[i]["img_url"] + "?imageView2/4/w/300/h/0/q/75"
-    }
-    if (data.value[imgType.value].length === 0) {
-      data.value[imgType.value] = imageList
-      return
-    }
+      // 生成缩略图
+      const imageList = res.data.items;
+      for (let i = 0; i < imageList.length; i++) {
+        imageList[i]["img_thumb"] =
+          imageList[i]["img_url"] + "?imageView2/4/w/300/h/0/q/75";
+      }
+      if (data.value[imgType.value].length === 0) {
+        data.value[imgType.value] = imageList;
+        return;
+      }
 
-    if (imageList.length < pageSize.value) {
-      isOver.value = true
-    }
-    data.value[imgType.value] = data.value[imgType.value].concat(imageList)
+      if (imageList.length < pageSize.value) {
+        isOver.value = true;
+      }
+      data.value[imgType.value] = data.value[imgType.value].concat(imageList);
+    })
+    .catch((e) => {
+      ElMessage.error("获取图片失败：" + e.message);
+    });
+};
 
-  }).catch(e => {
-    ElMessage.error("获取图片失败：" + e.message)
-  })
-}
+getNext();
 
-getNext()
-
-const clipboard = ref(null)
+const clipboard = ref(null);
 onMounted(() => {
-  clipboard.value = new Clipboard('.copy-prompt-wall');
-  clipboard.value.on('success', () => {
+  clipboard.value = new Clipboard(".copy-prompt-wall");
+  clipboard.value.on("success", () => {
     ElMessage.success("复制成功！");
-  })
+  });
 
-  clipboard.value.on('error', () => {
-    ElMessage.error('复制失败！');
-  })
-})
+  clipboard.value.on("error", () => {
+    ElMessage.error("复制失败！");
+  });
+});
 
 onUnmounted(() => {
-  clipboard.value.destroy()
-})
+  clipboard.value.destroy();
+});
 
 const changeImgType = () => {
-  console.log(imgType.value)
-  document.getElementById('waterfall-box').scrollTo(0, 0)
-  page.value = 0
+  console.log(imgType.value);
+  document.getElementById("waterfall-box").scrollTo(0, 0);
+  page.value = 0;
   data.value = {
-    "mj": [],
-    "sd": [],
-    "dall": [],
-  }
-  loading.value = true
-  isOver.value = false
-  nextTick(() => getNext())
-}
+    mj: [],
+    sd: [],
+    dall: []
+  };
+  loading.value = true;
+  isOver.value = false;
+  nextTick(() => getNext());
+};
 
 const showTask = (row) => {
-  item.value = row
-  showTaskDialog.value = true
-}
+  item.value = row;
+  showTaskDialog.value = true;
+};
 
-
-const router = useRouter()
+const router = useRouter();
 const drawSameSd = (row) => {
-  router.push({name: "image-sd", params: {copyParams: JSON.stringify(row.params)}})
-}
+  router.push({
+    name: "image-sd",
+    params: { copyParams: JSON.stringify(row.params) }
+  });
+};
 
 const drawSameMj = (row) => {
-  router.push({name: "image-mj", params: {prompt: row.prompt}})
-}
+  router.push({ name: "image-mj", params: { prompt: row.prompt } });
+};
 </script>
 
 <style lang="stylus">
diff --git a/web/src/views/Index.vue b/web/src/views/Index.vue
index cb4d7ba8..506bb452 100644
--- a/web/src/views/Index.vue
+++ b/web/src/views/Index.vue
@@ -15,7 +15,6 @@
             <el-tooltip
               v-if="!license.de_copy"
               class="box-item"
-              effect="light"
               content="部署文档"
               placement="bottom"
             >
@@ -26,7 +25,6 @@
             <el-tooltip
               v-if="!license.de_copy"
               class="box-item"
-              effect="light"
               content="项目源码"
               placement="bottom"
             >
diff --git a/web/src/views/Invitation.vue b/web/src/views/Invitation.vue
index 0aa08d03..a7807918 100644
--- a/web/src/views/Invitation.vue
+++ b/web/src/views/Invitation.vue
@@ -5,18 +5,25 @@
         <h2>会员推广计划</h2>
         <div class="share-box">
           <div class="info">
-            我们非常欢迎您把此应用分享给您身边的朋友，分享成功注册后您和被邀请人都将获得 <strong>{{ invitePower }}</strong>
+            我们非常欢迎您把此应用分享给您身边的朋友，分享成功注册后您和被邀请人都将获得
+            <strong>{{ invitePower }}</strong>
             算力额度作为奖励。
             你可以保存下面的二维码或者直接复制分享您的专属推广链接发送给微信好友。
           </div>
 
           <div class="invite-qrcode">
-            <el-image :src="qrImg"/>
+            <el-image :src="qrImg" />
           </div>
 
           <div class="invite-url">
             <span>{{ inviteURL }}</span>
-            <el-button type="primary" plain class="copy-link" :data-clipboard-text="inviteURL">复制链接</el-button>
+            <el-button
+              type="primary"
+              plain
+              class="copy-link"
+              :data-clipboard-text="inviteURL"
+              >复制链接</el-button
+            >
           </div>
         </div>
 
@@ -76,10 +83,10 @@
           </el-row>
         </div>
 
-        <h2>您推荐用户</h2>
+        <h2>您推荐的用户</h2>
 
         <div class="invite-logs">
-          <invite-list v-if="isLogin"/>
+          <invite-list v-if="isLogin" />
         </div>
       </div>
     </div>
@@ -87,69 +94,79 @@
 </template>
 
 <script setup>
-import {onMounted, ref} from "vue"
+import { onMounted, ref } from "vue";
 import QRCode from "qrcode";
-import {httpGet} from "@/utils/http";
-import {ElMessage} from "element-plus";
+import { httpGet } from "@/utils/http";
+import { ElMessage } from "element-plus";
 import Clipboard from "clipboard";
 import InviteList from "@/components/InviteList.vue";
-import {checkSession, getSystemInfo} from "@/store/cache";
-import {useSharedStore} from "@/store/sharedata";
+import { checkSession, getSystemInfo } from "@/store/cache";
+import { useSharedStore } from "@/store/sharedata";
 
-const inviteURL = ref("")
-const qrImg = ref("/images/wx.png")
-const invitePower = ref(0)
-const hits = ref(0)
-const regNum = ref(0)
-const rate = ref(0)
-const isLogin = ref(false)
-const store = useSharedStore()
+const inviteURL = ref("");
+const qrImg = ref("/images/wx.png");
+const invitePower = ref(0);
+const hits = ref(0);
+const regNum = ref(0);
+const rate = ref(0);
+const isLogin = ref(false);
+const store = useSharedStore();
 
 onMounted(() => {
-  initData()
+  initData();
 
   // 复制链接
-  const clipboard = new Clipboard('.copy-link');
-  clipboard.on('success', () => {
-    ElMessage.success('复制成功！');
-  })
+  const clipboard = new Clipboard(".copy-link");
+  clipboard.on("success", () => {
+    ElMessage.success("复制成功！");
+  });
 
-  clipboard.on('error', () => {
-    ElMessage.error('复制失败！');
-  })
-})
+  clipboard.on("error", () => {
+    ElMessage.error("复制失败！");
+  });
+});
 
 const initData = () => {
-  checkSession().then(() => {
-    isLogin.value = true
-    httpGet("/api/invite/code").then(res => {
-      const text = `${location.protocol}//${location.host}/register?invite_code=${res.data.code}`
-      hits.value = res.data["hits"]
-      regNum.value = res.data["reg_num"]
-      if (hits.value > 0) {
-        rate.value = ((regNum.value / hits.value) * 100).toFixed(2)
-      }
-      QRCode.toDataURL(text, {width: 400, height: 400, margin: 2}, (error, url) => {
-        if (error) {
-          console.error(error)
-        } else {
-          qrImg.value = url;
-        }
-      });
-      inviteURL.value = text
-    }).catch(e => {
-      ElMessage.error("获取邀请码失败：" + e.message)
-    })
+  checkSession()
+    .then(() => {
+      isLogin.value = true;
+      httpGet("/api/invite/code")
+        .then((res) => {
+          const text = `${location.protocol}//${location.host}/register?invite_code=${res.data.code}`;
+          hits.value = res.data["hits"];
+          regNum.value = res.data["reg_num"];
+          if (hits.value > 0) {
+            rate.value = ((regNum.value / hits.value) * 100).toFixed(2);
+          }
+          QRCode.toDataURL(
+            text,
+            { width: 400, height: 400, margin: 2 },
+            (error, url) => {
+              if (error) {
+                console.error(error);
+              } else {
+                qrImg.value = url;
+              }
+            }
+          );
+          inviteURL.value = text;
+        })
+        .catch((e) => {
+          ElMessage.error("获取邀请码失败：" + e.message);
+        });
 
-    getSystemInfo().then(res => {
-      invitePower.value = res.data["invite_power"]
-    }).catch(e => {
-      ElMessage.error("获取系统配置失败：" + e.message)
+      getSystemInfo()
+        .then((res) => {
+          invitePower.value = res.data["invite_power"];
+        })
+        .catch((e) => {
+          ElMessage.error("获取系统配置失败：" + e.message);
+        });
     })
-  }).catch(() => {
-    store.setShowLoginDialog(true)
-  });
-}
+    .catch(() => {
+      store.setShowLoginDialog(true);
+    });
+};
 </script>
 
 <style lang="stylus" scoped>
@@ -157,7 +174,7 @@ const initData = () => {
 .page-invitation {
   display: flex;
   justify-content: center;
-  background-color: #282c34;
+  // background-color: #282c34;
   height 100%
   overflow-x hidden
   overflow-y visible
@@ -167,17 +184,18 @@ const initData = () => {
     flex-flow column
     max-width 1000px
     width 100%
-    color #e1e1e1
+    color: var(--text-theme-color);
 
     h2 {
-      color #ffffff;
+      color: var(--theme-textcolor-normal);
       text-align center
     }
 
     .share-box {
       .info {
         line-height 1.5
-        border 1px solid #444444
+        // border 1px solid #444444
+        background:var(--chat-bg)
         border-radius 10px
         padding 10px
 
diff --git a/web/src/views/Luma.vue b/web/src/views/Luma.vue
index edce7526..5c0c83b9 100644
--- a/web/src/views/Luma.vue
+++ b/web/src/views/Luma.vue
@@ -4,7 +4,7 @@
       <div class="images">
         <template v-for="(img, index) in images" :key="img">
           <div class="item">
-            <el-image :src="replaceImg(img)" fit="cover"/>
+            <el-image :src="replaceImg(img)" fit="cover" />
             <el-icon @click="remove(img)"><CircleCloseFilled /></el-icon>
           </div>
           <div class="btn-swap" v-if="images.length === 2 && index === 0">
@@ -16,22 +16,23 @@
         <div class="input-container">
           <div class="upload-icon" v-if="images.length < 2">
             <el-upload
-                class="avatar-uploader"
-                :auto-upload="true"
-                :show-file-list="false"
-                :http-request="upload"
-                accept=".jpg,.png,.jpeg"
+              class="avatar-uploader"
+              :auto-upload="true"
+              :show-file-list="false"
+              :http-request="upload"
+              accept=".jpg,.png,.jpeg"
             >
               <i class="iconfont icon-image"></i>
             </el-upload>
           </div>
           <textarea
-              class="prompt-input"
-              :rows="row"
-              v-model="formData.prompt"
-              placeholder="请输入提示词或者上传图片"
-              autofocus>
-                      </textarea>
+            class="prompt-input"
+            :rows="row"
+            v-model="formData.prompt"
+            placeholder="请输入提示词或者上传图片"
+            autofocus
+          >
+          </textarea>
           <div class="send-icon" @click="create">
             <i class="iconfont icon-send"></i>
           </div>
@@ -39,26 +40,34 @@
 
         <div class="params">
           <div class="item-group">
-            <el-button class="generate-btn" size="small" @click="generatePrompt" color="#5865f2" :disabled="isGenerating">
+            <el-button
+              class="generate-btn"
+              size="small"
+              @click="generatePrompt"
+              color="#5865f2"
+              :disabled="isGenerating"
+            >
               <i class="iconfont icon-chuangzuo" style="margin-right: 5px"></i>
               <span>生成AI视频提示词</span>
             </el-button>
           </div>
           <div class="item-group">
             <span class="label">循环参考图</span>
-            <el-switch  v-model="formData.loop" size="small" style="--el-switch-on-color:#BF78BF;" />
+            <el-switch v-model="formData.loop" size="small" />
           </div>
           <div class="item-group">
             <span class="label">提示词优化</span>
-            <el-switch  v-model="formData.expand_prompt" size="small" style="--el-switch-on-color:#BF78BF;" />
+            <el-switch v-model="formData.expand_prompt" size="small" />
           </div>
         </div>
       </div>
     </div>
 
-
-
-    <el-container class="video-container" v-loading="loading" element-loading-background="rgba(100,100,100,0.3)">
+    <el-container
+      class="video-container"
+      v-loading="loading"
+      element-loading-background="rgba(100,100,100,0.3)"
+    >
       <h2 class="h-title">你的作品</h2>
 
       <div class="list-box" v-if="!noData">
@@ -67,36 +76,63 @@
             <div class="left">
               <div class="container">
                 <div v-if="item.progress === 100">
-                  <video class="video" :src="replaceImg(item.video_url)"  preload="auto" loop="loop" muted="muted">
+                  <video
+                    class="video"
+                    :src="replaceImg(item.video_url)"
+                    preload="auto"
+                    loop="loop"
+                    muted="muted"
+                  >
                     您的浏览器不支持视频播放
                   </video>
                   <button class="play" @click="play(item)">
-                    <img src="/images/play.svg" alt=""/>
+                    <img src="/images/play.svg" alt="" />
                   </button>
                 </div>
-                <el-image :src="item.cover_url" fit="cover" v-else-if="item.progress > 100" />
+                <el-image
+                  :src="item.cover_url"
+                  fit="cover"
+                  v-else-if="item.progress > 100"
+                />
                 <generating message="正在生成视频" v-else />
-
               </div>
             </div>
             <div class="center">
-              <div class="failed" v-if="item.progress === 101">任务执行失败：{{item.err_msg}}，任务提示词：{{item.prompt}}</div>
-              <div class="prompt" v-else>{{item.prompt}}</div>
+              <div class="failed" v-if="item.progress === 101">
+                任务执行失败：{{ item.err_msg }}，任务提示词：{{ item.prompt }}
+              </div>
+              <div class="prompt" v-else>{{ item.prompt }}</div>
             </div>
             <div class="right" v-if="item.progress === 100">
               <div class="tools">
                 <button class="btn btn-publish">
                   <span class="text">发布</span>
-                  <black-switch v-model:value="item.publish" @change="publishJob(item)" size="small" />
+                  <black-switch
+                    v-model:value="item.publish"
+                    @change="publishJob(item)"
+                    size="small"
+                  />
                 </button>
 
-                <el-tooltip effect="light" content="下载视频" placement="top">
-                  <button class="btn btn-icon" @click="download(item)" :disabled="item.downloading">
-                    <i class="iconfont icon-download" v-if="!item.downloading"></i>
-                    <el-image src="/images/loading.gif" class="downloading" fit="cover" v-else />
+                <el-tooltip content="下载视频" placement="top">
+                  <button
+                    class="btn btn-icon"
+                    @click="download(item)"
+                    :disabled="item.downloading"
+                  >
+                    <i
+                      class="iconfont icon-download"
+                      v-if="!item.downloading"
+                    ></i>
+                    <el-image
+                      src="/images/loading.gif"
+                      class="downloading"
+                      fit="cover"
+                      v-else
+                    />
                   </button>
                 </el-tooltip>
-                <el-tooltip effect="light" content="删除" placement="top">
+                <el-tooltip content="删除" placement="top">
                   <button class="btn btn-icon" @click="removeJob(item)">
                     <i class="iconfont icon-remove"></i>
                   </button>
@@ -111,210 +147,243 @@
           </div>
         </div>
       </div>
-      <el-empty :image-size="100" description="没有任何作品，赶紧去创作吧！" v-else />
+      <el-empty
+        :image-size="100"
+        :image="nodata"
+        description="没有任何作品，赶紧去创作吧！"
+        v-else
+      />
 
       <div class="pagination">
-        <el-pagination v-if="total > pageSize" background
-          style="--el-pagination-button-bg-color:#414141;
-          --el-pagination-button-color:#d1d1d1;
-          --el-disabled-bg-color:#414141;
-          --el-color-primary:#666666;
-          --el-pagination-hover-color:#e1e1e1"
+        <el-pagination
+          v-if="total > pageSize"
+          background
+          style="--el-pagination-button-bg-color: rgba(86, 86, 95, 0.2)"
           layout="total,prev, pager, next"
           :hide-on-single-page="true"
           v-model:current-page="page"
           v-model:page-size="pageSize"
           @current-change="fetchData(page)"
-          :total="total"/>
+          :total="total"
+        />
       </div>
     </el-container>
-    <black-dialog v-model:show="showDialog" title="预览视频" hide-footer @cancal="showDialog = false" width="auto">
-      <video style="width: 100%; max-height: 90vh;" :src="currentVideoUrl"  preload="auto" :autoplay="true" loop="loop" muted="muted" v-show="showDialog">
+    <black-dialog
+      v-model:show="showDialog"
+      title="预览视频"
+      hide-footer
+      @cancal="showDialog = false"
+      width="auto"
+    >
+      <video
+        style="width: 100%; max-height: 90vh"
+        :src="currentVideoUrl"
+        preload="auto"
+        :autoplay="true"
+        loop="loop"
+        muted="muted"
+        v-show="showDialog"
+      >
         您的浏览器不支持视频播放
       </video>
-    </black-dialog>    
+    </black-dialog>
   </div>
 </template>
 
 <script setup>
-import {onMounted, onUnmounted, reactive, ref} from "vue";
-import {CircleCloseFilled} from "@element-plus/icons-vue";
-import {httpDownload, httpPost, httpGet} from "@/utils/http";
-import {checkSession, getClientId} from "@/store/cache";
-import {showMessageError, showMessageOK} from "@/utils/dialog";
-import { replaceImg } from "@/utils/libs"
-import {ElMessage, ElMessageBox} from "element-plus";
+import nodata from "@/assets/img/no-data.png";
+
+import { onMounted, onUnmounted, reactive, ref } from "vue";
+import { CircleCloseFilled } from "@element-plus/icons-vue";
+import { httpDownload, httpPost, httpGet } from "@/utils/http";
+import { checkSession, getClientId } from "@/store/cache";
+import { showMessageError, showMessageOK } from "@/utils/dialog";
+import { replaceImg } from "@/utils/libs";
+import { ElMessage, ElMessageBox } from "element-plus";
 import BlackSwitch from "@/components/ui/BlackSwitch.vue";
 import Generating from "@/components/ui/Generating.vue";
 import BlackDialog from "@/components/ui/BlackDialog.vue";
-import {useSharedStore} from "@/store/sharedata";
+import { useSharedStore } from "@/store/sharedata";
 
-const showDialog = ref(false)
-const currentVideoUrl = ref('')
-const row = ref(1)
-const images = ref([])
+const showDialog = ref(false);
+const currentVideoUrl = ref("");
+const row = ref(1);
+const images = ref([]);
 
 const formData = reactive({
   client_id: getClientId(),
-  prompt: '',
+  prompt: "",
   expand_prompt: false,
   loop: false,
-  first_frame_img: '',
-  end_frame_img: ''
-})
+  first_frame_img: "",
+  end_frame_img: ""
+});
 
-const store = useSharedStore()
-onMounted(()=>{
+const store = useSharedStore();
+onMounted(() => {
   checkSession().then(() => {
-    fetchData(1)
-  })
+    fetchData(1);
+  });
 
-  store.addMessageHandler("luma",(data) => {
+  store.addMessageHandler("luma", (data) => {
     // 丢弃无关消息
     if (data.channel !== "luma" || data.clientId !== getClientId()) {
-      return
+      return;
     }
 
     if (data.body === "FINISH" || data.body === "FAIL") {
-      fetchData(1)
+      fetchData(1);
     }
-  })
-})
+  });
+});
 
 onUnmounted(() => {
-  store.removeMessageHandler("luma")
-})
+  store.removeMessageHandler("luma");
+});
 
 const download = (item) => {
-  const url = replaceImg(item.video_url)
-  const downloadURL = `${process.env.VUE_APP_API_HOST}/api/download?url=${url}`
+  const url = replaceImg(item.video_url);
+  const downloadURL = `${process.env.VUE_APP_API_HOST}/api/download?url=${url}`;
   // parse filename
   const urlObj = new URL(url);
-  const fileName = urlObj.pathname.split('/').pop();
-  item.downloading = true
-  httpDownload(downloadURL).then(response  => {
-    const blob = new Blob([response.data]);
-    const link = document.createElement('a');
-    link.href = URL.createObjectURL(blob);
-    link.download = fileName;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    URL.revokeObjectURL(link.href);
-    item.downloading = false
-  }).catch(() => {
-    showMessageError("下载失败")
-    item.downloading = false
-  })
-}
+  const fileName = urlObj.pathname.split("/").pop();
+  item.downloading = true;
+  httpDownload(downloadURL)
+    .then((response) => {
+      const blob = new Blob([response.data]);
+      const link = document.createElement("a");
+      link.href = URL.createObjectURL(blob);
+      link.download = fileName;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(link.href);
+      item.downloading = false;
+    })
+    .catch(() => {
+      showMessageError("下载失败");
+      item.downloading = false;
+    });
+};
 
 const play = (item) => {
-  currentVideoUrl.value = replaceImg(item.video_url)
-  showDialog.value = true
-}
+  currentVideoUrl.value = replaceImg(item.video_url);
+  showDialog.value = true;
+};
 
 const removeJob = (item) => {
-  ElMessageBox.confirm(
-      '此操作将会删除任务相关文件，继续操作码?',
-      '删除提示',
-      {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'warning',
-      }
-  ).then(() => {
-    httpGet("/api/video/remove", {id: item.id}).then(() => {
-      ElMessage.success("任务删除成功")
-      fetchData()
-    }).catch(e => {
-      ElMessage.error("任务删除失败：" + e.message)
-    })
-  }).catch(() => {
+  ElMessageBox.confirm("此操作将会删除任务相关文件，继续操作码?", "删除提示", {
+    confirmButtonText: "确认",
+    cancelButtonText: "取消",
+    type: "warning"
   })
-}
+    .then(() => {
+      httpGet("/api/video/remove", { id: item.id })
+        .then(() => {
+          ElMessage.success("任务删除成功");
+          fetchData();
+        })
+        .catch((e) => {
+          ElMessage.error("任务删除失败：" + e.message);
+        });
+    })
+    .catch(() => {});
+};
 
 const publishJob = (item) => {
-  httpGet("/api/video/publish", {id: item.id, publish:item.publish}).then(() => {
-    ElMessage.success("操作成功")
-  }).catch(e => {
-    ElMessage.error("操作失败：" + e.message)
-  })
-}
+  httpGet("/api/video/publish", { id: item.id, publish: item.publish })
+    .then(() => {
+      ElMessage.success("操作成功");
+    })
+    .catch((e) => {
+      ElMessage.error("操作失败：" + e.message);
+    });
+};
 
 const upload = (file) => {
   const formData = new FormData();
-  formData.append('file', file.file, file.name);
+  formData.append("file", file.file, file.name);
   // 执行上传操作
-  httpPost('/api/upload', formData).then((res) => {
-    images.value.push(res.data.url)
-    ElMessage.success({message: "上传成功", duration: 500})
-  }).catch((e) => {
-    ElMessage.error('图片上传失败:' + e.message)
-  })
+  httpPost("/api/upload", formData)
+    .then((res) => {
+      images.value.push(res.data.url);
+      ElMessage.success({ message: "上传成功", duration: 500 });
+    })
+    .catch((e) => {
+      ElMessage.error("图片上传失败:" + e.message);
+    });
 };
 
 const remove = (img) => {
-  images.value = images.value.filter(item => item !== img)
-}
+  images.value = images.value.filter((item) => item !== img);
+};
 
 const switchReverse = () => {
-  images.value = images.value.reverse()
-}
-const loading = ref(false)
-const list = ref([])
-const noData = ref(true)
-const page = ref(1)
-const pageSize = ref(10)
-const total = ref(0)
+  images.value = images.value.reverse();
+};
+const loading = ref(false);
+const list = ref([]);
+const noData = ref(true);
+const page = ref(1);
+const pageSize = ref(10);
+const total = ref(0);
 const fetchData = (_page) => {
   if (_page) {
-    page.value = _page
+    page.value = _page;
   }
-  httpGet("/api/video/list",{page:page.value, page_size:pageSize.value, type: 'luma'}).then(res => {
-    total.value = res.data.total
-    loading.value = false
-    list.value = res.data.items
-    noData.value = list.value.length === 0
-  }).catch(() => {
-    loading.value = false
-    noData.value = true
+  httpGet("/api/video/list", {
+    page: page.value,
+    page_size: pageSize.value,
+    type: "luma"
   })
-}
+    .then((res) => {
+      total.value = res.data.total;
+      loading.value = false;
+      list.value = res.data.items;
+      noData.value = list.value.length === 0;
+    })
+    .catch(() => {
+      loading.value = false;
+      noData.value = true;
+    });
+};
 
 // 创建视频
 const create = () => {
-
-  const len =  images.value.length;
-  if(len){
-    formData.first_frame_img = images.value[0]
-    if(len === 2){
-      formData.end_frame_img = images.value[1]
+  const len = images.value.length;
+  if (len) {
+    formData.first_frame_img = images.value[0];
+    if (len === 2) {
+      formData.end_frame_img = images.value[1];
     }
   }
 
-  httpPost("/api/video/luma/create", formData).then(() => {
-    fetchData(1)
-    showMessageOK("创建任务成功")
-  }).catch(e => {
-    showMessageError("创建任务失败："+e.message)
-  })
-}
+  httpPost("/api/video/luma/create", formData)
+    .then(() => {
+      fetchData(1);
+      showMessageOK("创建任务成功");
+    })
+    .catch((e) => {
+      showMessageError("创建任务失败：" + e.message);
+    });
+};
 
-const isGenerating = ref(false)
+const isGenerating = ref(false);
 const generatePrompt = () => {
   if (formData.prompt === "") {
-    return showMessageError("请输入原始提示词")
+    return showMessageError("请输入原始提示词");
   }
-  isGenerating.value = true
-  httpPost("/api/prompt/image", {prompt: formData.prompt}).then(res => {
-    formData.prompt = res.data
-    isGenerating.value = false
-  }).catch(e => {
-    showMessageError("生成提示词失败："+e.message)
-    isGenerating.value = false
-  })
-}
-
+  isGenerating.value = true;
+  httpPost("/api/prompt/image", { prompt: formData.prompt })
+    .then((res) => {
+      formData.prompt = res.data;
+      isGenerating.value = false;
+    })
+    .catch((e) => {
+      showMessageError("生成提示词失败：" + e.message);
+      isGenerating.value = false;
+    });
+};
 </script>
 
 <style lang="stylus" scoped>
diff --git a/web/src/views/MarkMap.vue b/web/src/views/MarkMap.vue
index 71040f76..68f9c6e2 100644
--- a/web/src/views/MarkMap.vue
+++ b/web/src/views/MarkMap.vue
@@ -7,64 +7,81 @@
 
           <div class="mark-map-params">
             <el-form label-width="80px" label-position="left">
-              <div class="param-line">
-                你的需求？
-              </div>
+              <div class="param-line">你的需求？</div>
               <div class="param-line">
                 <el-input
-                    v-model="prompt"
-                    :autosize="{ minRows: 4, maxRows: 6 }"
-                    type="textarea"
-                    placeholder="请给AI输入提示词，让AI帮你完善"
+                  v-model="prompt"
+                  :autosize="{ minRows: 4, maxRows: 6 }"
+                  type="textarea"
+                  placeholder="请给AI输入提示词，让AI帮你完善"
                 />
               </div>
 
+              <div class="param-line">请选择生成思维导图的AI模型</div>
               <div class="param-line">
-                请选择生成思维导图的AI模型
-              </div>
-              <div class="param-line">
-                <el-select v-model="modelID" placeholder="请选择模型" style="width:100%">
+                <el-select
+                  v-model="modelID"
+                  placeholder="请选择模型"
+                  style="width: 100%"
+                >
                   <el-option
-                      v-for="item in models"
-                      :key="item.id"
-                      :label="item.name"
-                      :value="item.id"
+                    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
+                      style="margin-left: 5px; position: relative; top: -2px"
+                      type="info"
+                      size="small"
+                      >{{ item.power }}算力
                     </el-tag>
                   </el-option>
                 </el-select>
               </div>
 
               <div class="text-info">
-                <el-tag type="success">当前可用算力：{{ loginUser.power }}</el-tag>
+                <el-text type="primary"
+                  >当前可用算力：<el-text type="warning">{{
+                    loginUser.power
+                  }}</el-text></el-text
+                >
               </div>
 
-              <div class="param-line">
-                <el-button color="#47fff1" :dark="false" round @click="generateAI" :loading="loading">
+              <div class="submit-btn flex-center">
+                <el-button
+                  style="width: 200px"
+                  type="primary"
+                  :dark="false"
+                  round
+                  @click="generateAI"
+                  :loading="loading"
+                >
                   生成思维导图
                 </el-button>
               </div>
 
-              <div class="param-line">
-                使用已有内容生成？
-              </div>
+              <div class="param-line">使用已有内容生成？</div>
               <div class="param-line">
                 <el-input
-                    v-model="content"
-                    :autosize="{ minRows: 4, maxRows: 6 }"
-                    type="textarea"
-                    placeholder="请用markdown语法输入您想要生成思维导图的内容！"
+                  v-model="content"
+                  :autosize="{ minRows: 4, maxRows: 6 }"
+                  type="textarea"
+                  placeholder="请用markdown语法输入您想要生成思维导图的内容！"
                 />
               </div>
 
-              <div class="param-line">
-                <el-button color="#C5F9AE" :dark="false" round @click="generate">直接生成（免费）</el-button>
+              <div class="param-line flex-center">
+                <el-button
+                  color="rgb(78, 51, 254)"
+                  style="width: 200px"
+                  :dark="false"
+                  round
+                  @click="generate"
+                  >直接生成（免费）</el-button
+                >
               </div>
-
             </el-form>
           </div>
         </div>
@@ -73,188 +90,196 @@
           <div class="top-bar">
             <el-button @click="downloadImage" type="primary">
               <el-icon>
-                <Download/>
+                <Download />
               </el-icon>
               <span>下载图片</span>
             </el-button>
           </div>
 
           <div class="body" id="markmap">
-            <svg ref="svgRef" :style="{ height: rightBoxHeight + 'px' }"/>
+            <svg ref="svgRef" :style="{ height: rightBoxHeight + 'px' }" />
             <div id="toolbar"></div>
           </div>
-        </div><!-- end task list box -->
+        </div>
+        <!-- end task list box -->
       </div>
-
     </div>
   </div>
 </template>
 
 <script setup>
-import {nextTick, ref} from 'vue';
-import {Markmap} from 'markmap-view';
-import {Transformer} from 'markmap-lib';
-import {checkSession, getSystemInfo} from "@/store/cache";
-import {httpGet, httpPost} from "@/utils/http";
-import {ElMessage} from "element-plus";
-import {Download} from "@element-plus/icons-vue";
-import {Toolbar} from 'markmap-toolbar';
-import {useSharedStore} from "@/store/sharedata";
+import { nextTick, ref } from "vue";
+import { Markmap } from "markmap-view";
+import { Transformer } from "markmap-lib";
+import { checkSession, getSystemInfo } from "@/store/cache";
+import { httpGet, httpPost } from "@/utils/http";
+import { ElMessage } from "element-plus";
+import { Download } from "@element-plus/icons-vue";
+import { Toolbar } from "markmap-toolbar";
+import { useSharedStore } from "@/store/sharedata";
 
-const leftBoxHeight = ref(window.innerHeight - 105)
-const rightBoxHeight = ref(window.innerHeight - 115)
+const leftBoxHeight = ref(window.innerHeight - 105);
+const rightBoxHeight = ref(window.innerHeight - 115);
 
-const prompt = ref("")
-const text = ref("")
-const content = ref(text.value)
-const html = ref("")
+const prompt = ref("");
+const text = ref("");
+const content = ref(text.value);
+const html = ref("");
 
-const isLogin = ref(false)
-const loginUser = ref({power: 0})
+const isLogin = ref(false);
+const loginUser = ref({ power: 0 });
 const transformer = new Transformer();
 const store = useSharedStore();
-const loading = ref(false)
+const loading = ref(false);
 
-const svgRef = ref(null)
-const markMap = ref(null)
-const models = ref([])
-const modelID = ref(0)
+const svgRef = ref(null);
+const markMap = ref(null);
+const models = ref([]);
+const modelID = ref(0);
 
-getSystemInfo().then(res => {
-  text.value = res.data['mark_map_text']
-  content.value = text.value
-  initData()
-  nextTick(() => {
-    try {
-      markMap.value = Markmap.create(svgRef.value)
-      const {el} = Toolbar.create(markMap.value);
-      document.getElementById('toolbar').append(el);
-      update()
-    } catch (e) {
-      console.error(e)
-    }
+getSystemInfo()
+  .then((res) => {
+    text.value = res.data["mark_map_text"];
+    content.value = text.value;
+    initData();
+    nextTick(() => {
+      try {
+        markMap.value = Markmap.create(svgRef.value);
+        const { el } = Toolbar.create(markMap.value);
+        document.getElementById("toolbar").append(el);
+        update();
+      } catch (e) {
+        console.error(e);
+      }
+    });
   })
-}).catch(e => {
-  ElMessage.error("获取系统配置失败：" + e.message)
-})
+  .catch((e) => {
+    ElMessage.error("获取系统配置失败：" + e.message);
+  });
 
 const initData = () => {
-  httpGet("/api/model/list").then(res => {
-    for (let v of res.data) {
-      models.value.push(v)
-    }
-    modelID.value = models.value[0].id
-  }).catch(e => {
-    ElMessage.error("获取模型失败：" + e.message)
-  })
-  
-  checkSession().then(user => {
-    loginUser.value = user
-    isLogin.value = true
-  }).catch(() => {
-  });
-}
+  httpGet("/api/model/list")
+    .then((res) => {
+      for (let v of res.data) {
+        models.value.push(v);
+      }
+      modelID.value = models.value[0].id;
+    })
+    .catch((e) => {
+      ElMessage.error("获取模型失败：" + e.message);
+    });
+
+  checkSession()
+    .then((user) => {
+      loginUser.value = user;
+      isLogin.value = true;
+    })
+    .catch(() => {});
+};
 
 const update = () => {
   try {
-    const {root} = transformer.transform(processContent(text.value))
-    markMap.value.setData(root)
-    markMap.value.fit()
+    const { root } = transformer.transform(processContent(text.value));
+    markMap.value.setData(root);
+    markMap.value.fit();
   } catch (e) {
-    console.error(e)
+    console.error(e);
   }
-}
+};
 
 const processContent = (text) => {
   if (!text) {
-    return text
+    return text;
   }
 
-  const arr = []
-  const lines = text.split("\n")
+  const arr = [];
+  const lines = text.split("\n");
   for (let line of lines) {
     if (line.indexOf("```") !== -1) {
-      continue
+      continue;
     }
-    line = line.replace(/([*_~`>])|(\d+\.)\s/g, '')
-    arr.push(line)
+    line = line.replace(/([*_~`>])|(\d+\.)\s/g, "");
+    arr.push(line);
   }
-  return arr.join("\n")
-}
+  return arr.join("\n");
+};
 
 window.onresize = () => {
-  leftBoxHeight.value = window.innerHeight - 145
-  rightBoxHeight.value = window.innerHeight - 85
-}
+  leftBoxHeight.value = window.innerHeight - 145;
+  rightBoxHeight.value = window.innerHeight - 85;
+};
 
 const generate = () => {
-  text.value = content.value
-  update()
-}
+  text.value = content.value;
+  update();
+};
 
 // 使用 AI 智能生成
 const generateAI = () => {
-  html.value = ''
-  text.value = ''
-  if (prompt.value === '') {
-    return ElMessage.error("请输入你的需求")
+  html.value = "";
+  text.value = "";
+  if (prompt.value === "") {
+    return ElMessage.error("请输入你的需求");
   }
   if (!isLogin.value) {
-    store.setShowLoginDialog(true)
-    return
+    store.setShowLoginDialog(true);
+    return;
   }
-  loading.value = true
+  loading.value = true;
   httpPost("/api/markMap/gen", {
-    prompt:prompt.value,
+    prompt: prompt.value,
     model_id: modelID.value
-  }).then(res => {
-    text.value = res.data
-    content.value = processContent(text.value)
-    const model = getModelById(modelID.value)
-    loginUser.value.power -= model.power
-    nextTick(() => update())
-    loading.value = false
-  }).catch(e => {
-    ElMessage.error("生成思维导图失败：" + e.message)
-    loading.value = false
   })
-}
+    .then((res) => {
+      text.value = res.data;
+      content.value = processContent(text.value);
+      const model = getModelById(modelID.value);
+      loginUser.value.power -= model.power;
+      nextTick(() => update());
+      loading.value = false;
+    })
+    .catch((e) => {
+      ElMessage.error("生成思维导图失败：" + e.message);
+      loading.value = false;
+    });
+};
 
 const getModelById = (modelId) => {
   for (let m of models.value) {
     if (m.id === modelId) {
-      return m
+      return m;
     }
   }
-}
+};
 
 // download SVG to png file
 const downloadImage = () => {
   const svgElement = document.getElementById("markmap");
   // 将 SVG 渲染到图片对象
-  const serializer = new XMLSerializer()
-  const source = '<?xml version="1.0" standalone="no"?>\r\n' + serializer.serializeToString(svgRef.value)
-  const image = new Image()
-  image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source)
+  const serializer = new XMLSerializer();
+  const source =
+    '<?xml version="1.0" standalone="no"?>\r\n' +
+    serializer.serializeToString(svgRef.value);
+  const image = new Image();
+  image.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);
 
   // 将图片对象渲染
-  const canvas = document.createElement('canvas')
-  canvas.width = svgElement.offsetWidth
-  canvas.height = svgElement.offsetHeight
-  let context = canvas.getContext('2d')
+  const canvas = document.createElement("canvas");
+  canvas.width = svgElement.offsetWidth;
+  canvas.height = svgElement.offsetHeight;
+  let context = canvas.getContext("2d");
   context.clearRect(0, 0, canvas.width, canvas.height);
-  context.fillStyle = 'white';
+  context.fillStyle = "white";
   context.fillRect(0, 0, canvas.width, canvas.height);
 
   image.onload = function () {
-    context.drawImage(image, 0, 0)
-    const a = document.createElement('a')
-    a.download = "geek-ai-xmind.png"
-    a.href = canvas.toDataURL(`image/png`)
-    a.click()
-  }
-}
-
+    context.drawImage(image, 0, 0);
+    const a = document.createElement("a");
+    a.download = "geek-ai-xmind.png";
+    a.href = canvas.toDataURL(`image/png`);
+    a.click();
+  };
+};
 </script>
 
 <style lang="stylus">
diff --git a/web/src/views/Member.vue b/web/src/views/Member.vue
index 6662e61e..e1a5cf38 100644
--- a/web/src/views/Member.vue
+++ b/web/src/views/Member.vue
@@ -1,25 +1,39 @@
 <template>
   <div>
-    <div class="member custom-scroll" v-loading="loading" element-loading-background="rgba(255,255,255,.3)" :element-loading-text="loadingText">
+    <div
+      class="member custom-scroll"
+      v-loading="loading"
+      element-loading-background="rgba(255,255,255,.3)"
+      :element-loading-text="loadingText"
+    >
       <div class="inner">
         <div class="user-profile">
-          <user-profile :key="profileKey"/>
+          <user-profile :key="profileKey" />
 
           <el-row class="user-opt" :gutter="20">
             <el-col :span="12">
-              <el-button type="primary" @click="showBindEmailDialog = true">绑定邮箱</el-button>
+              <el-button type="primary" @click="showBindEmailDialog = true"
+                >绑定邮箱</el-button
+              >
             </el-col>
             <el-col :span="12">
-              <el-button type="primary" @click="showBindMobileDialog = true">绑定手机</el-button>
+              <el-button type="primary" @click="showBindMobileDialog = true"
+                >绑定手机</el-button
+              >
             </el-col>
             <el-col :span="12">
-              <el-button type="primary" @click="showThirdLoginDialog = true">第三方登录</el-button>
+              <el-button type="primary" @click="showThirdLoginDialog = true"
+                >第三方登录</el-button
+              >
             </el-col>
             <el-col :span="12">
-              <el-button type="primary" @click="showPasswordDialog = true">修改密码</el-button>
+              <el-button type="primary" @click="showPasswordDialog = true"
+                >修改密码</el-button
+              >
             </el-col>
             <el-col :span="24">
-              <el-button type="primary" @click="showRedeemVerifyDialog = true">卡密兑换
+              <el-button type="primary" @click="showRedeemVerifyDialog = true"
+                >卡密兑换
               </el-button>
             </el-col>
           </el-row>
@@ -36,7 +50,7 @@
             <el-col v-for="item in list" :key="item" :span="6">
               <div class="product-item">
                 <div class="image-container">
-                  <el-image :src="vipImg" fit="cover"/>
+                  <el-image :src="vipImg" fit="cover" />
                 </div>
                 <div class="product-title">
                   <span class="name">{{ item.name }}</span>
@@ -44,7 +58,9 @@
                 <div class="product-info">
                   <div class="info-line">
                     <span class="label">商品原价：</span>
-                    <span class="price"><del>￥{{ item.price }}</del></span>
+                    <span class="price"
+                      ><del>￥{{ item.price }}</del></span
+                    >
                   </div>
                   <div class="info-line">
                     <span class="label">优惠价：</span>
@@ -52,7 +68,9 @@
                   </div>
                   <div class="info-line">
                     <span class="label">有效期：</span>
-                    <span class="expire" v-if="item.days > 0">{{ item.days }}天</span>
+                    <span class="expire" v-if="item.days > 0"
+                      >{{ item.days }}天</span
+                    >
                     <span class="expire" v-else>长期有效</span>
                   </div>
 
@@ -62,22 +80,42 @@
                   </div>
 
                   <div class="pay-way">
-
-                    <span type="primary" v-for="payWay in payWays" @click="pay(item,payWay)" :key="payWay">
-                      <el-button v-if="payWay.pay_type==='alipay'" color="#15A6E8" circle>
-                        <i class="iconfont icon-alipay" ></i>
+                    <span
+                      type="primary"
+                      v-for="payWay in payWays"
+                      @click="pay(item, payWay)"
+                      :key="payWay"
+                    >
+                      <el-button
+                        v-if="payWay.pay_type === 'alipay'"
+                        color="#15A6E8"
+                        circle
+                      >
+                        <i class="iconfont icon-alipay"></i>
                       </el-button>
-                      <el-button v-else-if="payWay.pay_type==='qqpay'" circle>
+                      <el-button v-else-if="payWay.pay_type === 'qqpay'" circle>
                         <i class="iconfont icon-qq"></i>
                       </el-button>
-                      <el-button v-else-if="payWay.pay_type==='paypal'" class="paypal" round>
+                      <el-button
+                        v-else-if="payWay.pay_type === 'paypal'"
+                        class="paypal"
+                        round
+                      >
                         <i class="iconfont icon-paypal"></i>
                       </el-button>
-                      <el-button v-else-if="payWay.pay_type==='jdpay'" color="#E1251B" circle>
+                      <el-button
+                        v-else-if="payWay.pay_type === 'jdpay'"
+                        color="#E1251B"
+                        circle
+                      >
                         <i class="iconfont icon-jd-pay"></i>
                       </el-button>
-                      <el-button v-else-if="payWay.pay_type==='douyin'" class="douyin" circle>
-                         <i class="iconfont icon-douyin"></i>
+                      <el-button
+                        v-else-if="payWay.pay_type === 'douyin'"
+                        class="douyin"
+                        circle
+                      >
+                        <i class="iconfont icon-douyin"></i>
                       </el-button>
                       <el-button v-else circle class="wechat" color="#67C23A">
                         <i class="iconfont icon-wechat-pay"></i>
@@ -93,116 +131,155 @@
           <h2 class="headline">消费账单</h2>
 
           <div class="user-order">
-            <user-order v-if="isLogin" :key="userOrderKey"/>
+            <user-order v-if="isLogin" :key="userOrderKey" />
           </div>
         </div>
       </div>
 
-      <password-dialog v-if="isLogin" :show="showPasswordDialog" @hide="showPasswordDialog = false"/>
-      <bind-mobile v-if="isLogin" :show="showBindMobileDialog" @hide="showBindMobileDialog = false"/>
-      <bind-email v-if="isLogin" :show="showBindEmailDialog" @hide="showBindEmailDialog = false"/>
-      <third-login v-if="isLogin" :show="showThirdLoginDialog" @hide="showThirdLoginDialog = false"/>
-      <redeem-verify v-if="isLogin" :show="showRedeemVerifyDialog" @hide="redeemCallback"/>
-
+      <password-dialog
+        v-if="isLogin"
+        :show="showPasswordDialog"
+        @hide="showPasswordDialog = false"
+      />
+      <bind-mobile
+        v-if="isLogin"
+        :show="showBindMobileDialog"
+        @hide="showBindMobileDialog = false"
+      />
+      <bind-email
+        v-if="isLogin"
+        :show="showBindEmailDialog"
+        @hide="showBindEmailDialog = false"
+      />
+      <third-login
+        v-if="isLogin"
+        :show="showThirdLoginDialog"
+        @hide="showThirdLoginDialog = false"
+      />
+      <redeem-verify
+        v-if="isLogin"
+        :show="showRedeemVerifyDialog"
+        @hide="redeemCallback"
+      />
     </div>
 
-    <el-dialog v-model="showDialog" :show-close=false :close-on-click-modal="false" hide-footer width="auto" class="pay-dialog">
+    <el-dialog
+      v-model="showDialog"
+      :show-close="false"
+      :close-on-click-modal="false"
+      hide-footer
+      width="auto"
+      class="pay-dialog"
+    >
       <div v-if="qrImg !== ''">
-        <div class="product-info">请使用微信扫码支付：<span class="price">￥{{price}}</span></div>
+        <div class="product-info">
+          请使用微信扫码支付：<span class="price">￥{{ price }}</span>
+        </div>
         <el-image :src="qrImg" fit="cover" />
       </div>
       <div style="padding-bottom: 10px; text-align: center">
-        <el-button type="success" @click="payCallback(true)">支付成功</el-button>
-        <el-button type="danger" @click="payCallback(false)">支付失败</el-button>
+        <el-button type="success" @click="payCallback(true)"
+          >支付成功</el-button
+        >
+        <el-button type="danger" @click="payCallback(false)"
+          >支付失败</el-button
+        >
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script setup>
-import {onMounted, ref} from "vue"
-import {ElMessage} from "element-plus";
-import {httpGet, httpPost} from "@/utils/http";
-import {checkSession, getSystemInfo} from "@/store/cache";
+import { onMounted, ref } from "vue";
+import { ElMessage } from "element-plus";
+import { httpGet, httpPost } from "@/utils/http";
+import { checkSession, getSystemInfo } from "@/store/cache";
 import UserProfile from "@/components/UserProfile.vue";
 import PasswordDialog from "@/components/PasswordDialog.vue";
 import BindMobile from "@/components/BindMobile.vue";
 import RedeemVerify from "@/components/RedeemVerify.vue";
 import UserOrder from "@/components/UserOrder.vue";
-import {useSharedStore} from "@/store/sharedata";
+import { useSharedStore } from "@/store/sharedata";
 import BindEmail from "@/components/BindEmail.vue";
 import ThirdLogin from "@/components/ThirdLogin.vue";
 import QRCode from "qrcode";
 
-const list = ref([])
-const vipImg = ref("/images/vip.png")
-const enableReward = ref(false) // 是否启用众筹功能
-const rewardImg = ref('/images/reward.png')
-const showPasswordDialog = ref(false)
-const showBindMobileDialog = ref(false)
-const showBindEmailDialog = ref(false)
-const showRedeemVerifyDialog = ref(false)
-const showThirdLoginDialog = ref(false)
-const user = ref(null)
-const isLogin = ref(false)
-const orderTimeout = ref(1800)
-const loading = ref(true)
-const loadingText = ref("加载中...")
-const orderPayInfoText = ref("")
-
-const payWays = ref([])
-const vipInfoText = ref("")
-const store = useSharedStore()
-const profileKey = ref(0)
-const userOrderKey = ref(0)
-const showDialog = ref(false)
-const qrImg = ref("")
-const price = ref(0)
+const list = ref([]);
+const vipImg = ref("/images/menu/member.png");
+const enableReward = ref(false); // 是否启用众筹功能
+const rewardImg = ref("/images/reward.png");
+const showPasswordDialog = ref(false);
+const showBindMobileDialog = ref(false);
+const showBindEmailDialog = ref(false);
+const showRedeemVerifyDialog = ref(false);
+const showThirdLoginDialog = ref(false);
+const user = ref(null);
+const isLogin = ref(false);
+const orderTimeout = ref(1800);
+const loading = ref(true);
+const loadingText = ref("加载中...");
+const orderPayInfoText = ref("");
 
+const payWays = ref([]);
+const vipInfoText = ref("");
+const store = useSharedStore();
+const profileKey = ref(0);
+const userOrderKey = ref(0);
+const showDialog = ref(false);
+const qrImg = ref("");
+const price = ref(0);
 
 onMounted(() => {
-  checkSession().then(_user => {
-    user.value = _user
-    isLogin.value = true
-  }).catch(() => {
-    store.setShowLoginDialog(true)
-  })
+  checkSession()
+    .then((_user) => {
+      user.value = _user;
+      isLogin.value = true;
+    })
+    .catch(() => {
+      store.setShowLoginDialog(true);
+    });
 
-  httpGet("/api/product/list").then((res) => {
-    list.value = res.data
-    loading.value = false
-  }).catch(e => {
-    ElMessage.error("获取产品套餐失败：" + e.message)
-  })
+  httpGet("/api/product/list")
+    .then((res) => {
+      list.value = res.data;
+      loading.value = false;
+    })
+    .catch((e) => {
+      ElMessage.error("获取产品套餐失败：" + e.message);
+    });
 
-  getSystemInfo().then(res => {
-    rewardImg.value = res.data['reward_img']
-    enableReward.value = res.data['enabled_reward']
-    orderPayInfoText.value = res.data['order_pay_info_text']
-    if (res.data['order_pay_timeout'] > 0) {
-      orderTimeout.value = res.data['order_pay_timeout']
-    }
-    vipInfoText.value = res.data['vip_info_text']
-  }).catch(e => {
-    ElMessage.error("获取系统配置失败：" + e.message)
-  })
+  getSystemInfo()
+    .then((res) => {
+      rewardImg.value = res.data["reward_img"];
+      enableReward.value = res.data["enabled_reward"];
+      orderPayInfoText.value = res.data["order_pay_info_text"];
+      if (res.data["order_pay_timeout"] > 0) {
+        orderTimeout.value = res.data["order_pay_timeout"];
+      }
+      vipInfoText.value = res.data["vip_info_text"];
+    })
+    .catch((e) => {
+      ElMessage.error("获取系统配置失败：" + e.message);
+    });
 
-  httpGet("/api/payment/payWays").then(res => {
-    payWays.value = res.data
-  }).catch(e => {
-    ElMessage.error("获取支付方式失败：" + e.message)
-  })
-})
+  httpGet("/api/payment/payWays")
+    .then((res) => {
+      payWays.value = res.data;
+    })
+    .catch((e) => {
+      ElMessage.error("获取支付方式失败：" + e.message);
+    });
+});
 
 const pay = (product, payWay) => {
   if (!isLogin.value) {
-    store.setShowLoginDialog(true)
-    return
+    store.setShowLoginDialog(true);
+    return;
   }
-  loading.value = true
-  loadingText.value = "正在生成支付订单..."
-  let host = process.env.VUE_APP_API_HOST
-  if (host === '') {
+  loading.value = true;
+  loadingText.value = "正在生成支付订单...";
+  let host = process.env.VUE_APP_API_HOST;
+  if (host === "") {
     host = `${location.protocol}//${location.host}`;
   }
   httpPost(`${process.env.VUE_APP_API_HOST}/api/payment/doPay`, {
@@ -212,45 +289,49 @@ const pay = (product, payWay) => {
     user_id: user.value.id,
     host: host,
     device: "jump"
-  }).then(res => {
-    showDialog.value = true
-    loading.value = false
-    if (payWay.pay_way === 'wechat') {
-      price.value = Number(product.discount)
-      QRCode.toDataURL(res.data, {width: 300, height: 300, margin: 2}, (error, url) => {
-        if (error) {
-          console.error(error)
-        } else {
-          qrImg.value = url;
-        }
-      })
-    } else {
-      window.open(res.data, '_blank');
-    }
-  }).catch(e => {
-    setTimeout(() => {
-      ElMessage.error("生成支付订单失败：" + e.message)
-      loading.value = false
-    }, 500)
   })
-}
+    .then((res) => {
+      showDialog.value = true;
+      loading.value = false;
+      if (payWay.pay_way === "wechat") {
+        price.value = Number(product.discount);
+        QRCode.toDataURL(
+          res.data,
+          { width: 300, height: 300, margin: 2 },
+          (error, url) => {
+            if (error) {
+              console.error(error);
+            } else {
+              qrImg.value = url;
+            }
+          }
+        );
+      } else {
+        window.open(res.data, "_blank");
+      }
+    })
+    .catch((e) => {
+      setTimeout(() => {
+        ElMessage.error("生成支付订单失败：" + e.message);
+        loading.value = false;
+      }, 500);
+    });
+};
 
 const redeemCallback = (success) => {
-  showRedeemVerifyDialog.value = false
+  showRedeemVerifyDialog.value = false;
   if (success) {
-    profileKey.value += 1
+    profileKey.value += 1;
   }
-}
+};
 
 const payCallback = (success) => {
-  showDialog.value = false
+  showDialog.value = false;
   if (success) {
-    profileKey.value += 1
-    userOrderKey.value += 1
+    profileKey.value += 1;
+    userOrderKey.value += 1;
   }
-}
-
-
+};
 </script>
 
 <style lang="stylus">
diff --git a/web/src/views/PowerLog.vue b/web/src/views/PowerLog.vue
index 84df9cb1..dc5f15fd 100644
--- a/web/src/views/PowerLog.vue
+++ b/web/src/views/PowerLog.vue
@@ -1,127 +1,160 @@
 <template>
   <div class="power-log custom-scroll" v-loading="loading">
-    <div class="inner" :style="{height: listBoxHeight + 'px'}">
+    <!-- :style="{ height: listBoxHeight + 'px' }" -->
+    <div class="inner">
       <div class="list-box">
         <div class="handle-box">
-          <el-input v-model="query.model" placeholder="模型" class="handle-input mr10" clearable></el-input>
+          <el-input
+            v-model="query.model"
+            placeholder="模型"
+            class="handle-input mr10"
+            clearable
+          ></el-input>
           <el-date-picker
-              v-model="query.date"
-              type="daterange"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              format="YYYY-MM-DD"
-              value-format="YYYY-MM-DD"
-              style="margin: 0 10px;width: 200px;"
+            v-model="query.date"
+            type="daterange"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
+            style="margin: 0 10px; width: 200px"
           />
-          <el-button color="#21aa93" :icon="Search" @click="fetchData">搜索</el-button>
+          <el-button type="primary" :icon="Search" @click="fetchData"
+            >搜索</el-button
+          >
         </div>
 
         <el-row v-if="items.length > 0">
-          <el-table :data="items" :row-key="row => row.id" table-layout="auto" border
-                    style="--el-table-border-color:#373C47;
-                --el-table-tr-bg-color:#2D323B;
-                --el-table-row-hover-bg-color:#373C47;
-                --el-table-header-bg-color:#474E5C;
-                --el-table-text-color:#d1d1d1">
-            <el-table-column prop="username" label="用户" width="130px"/>
-            <el-table-column prop="model" label="模型" width="130px"/>
+          <el-table
+            :data="items"
+            :row-key="(row) => row.id"
+            table-layout="auto"
+            border
+          >
+            <el-table-column prop="username" label="用户" width="130px" />
+            <el-table-column prop="model" label="模型" width="130px" />
             <el-table-column prop="type" label="类型">
               <template #default="scope">
-                <el-tag size="small" :type="tagColors[scope.row.type]">{{ scope.row.type_str }}</el-tag>
+                <el-tag size="small" :type="tagColors[scope.row.type]">{{
+                  scope.row.type_str
+                }}</el-tag>
               </template>
             </el-table-column>
             <el-table-column label="数额">
               <template #default="scope">
                 <div>
-                  <el-text type="success" v-if="scope.row.mark === 1">+{{ scope.row.amount }}</el-text>
-                  <el-text type="danger" v-if="scope.row.mark === 0">-{{ scope.row.amount }}</el-text>
+                  <el-text type="success" v-if="scope.row.mark === 1"
+                    >+{{ scope.row.amount }}</el-text
+                  >
+                  <el-text type="danger" v-if="scope.row.mark === 0"
+                    >-{{ scope.row.amount }}</el-text
+                  >
                 </div>
               </template>
             </el-table-column>
-            <el-table-column prop="balance" label="余额"/>
+            <el-table-column prop="balance" label="余额" />
             <el-table-column label="发生时间" width="160px">
               <template #default="scope">
-                <span>{{ dateFormat(scope.row['created_at']) }}</span>
+                <span>{{ dateFormat(scope.row["created_at"]) }}</span>
               </template>
             </el-table-column>
-            <el-table-column prop="remark" label="备注"/>
+            <el-table-column prop="remark" label="备注" />
           </el-table>
 
           <div class="pagination">
-            <el-pagination v-if="total > 0" background
-                           layout="total,prev, pager, next"
-                           :hide-on-single-page="true"
-                           v-model:current-page="page"
-                           v-model:page-size="pageSize"
-                           @current-change="fetchData()"
-                           :total="total"/>
-
+            <el-pagination
+              v-if="total > 0"
+              background
+              layout="total,prev, pager, next"
+              style="--el-pagination-button-bg-color: rgba(86, 86, 95, 0.2)"
+              :hide-on-single-page="true"
+              v-model:current-page="page"
+              v-model:page-size="pageSize"
+              @current-change="fetchData()"
+              :total="total"
+            />
           </div>
         </el-row>
-        <el-empty :image-size="100" v-else/>
+        <el-empty
+          :image-size="100"
+          v-else
+          :image="nodata"
+          description="暂无数据"
+        />
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import {onMounted, ref} from "vue"
-import {dateFormat} from "@/utils/libs";
-import {Search} from "@element-plus/icons-vue";
-import Clipboard from "clipboard";
-import {ElMessage} from "element-plus";
-import {httpPost} from "@/utils/http";
-import {checkSession} from "@/store/cache";
+import nodata from "@/assets/img/no-data.png";
 
-const items = ref([])
-const total = ref(0)
-const page = ref(1)
-const pageSize = ref(20)
-const loading = ref(false)
-const listBoxHeight = window.innerHeight - 87
+import { onMounted, ref } from "vue";
+import { dateFormat } from "@/utils/libs";
+import { Search } from "@element-plus/icons-vue";
+import Clipboard from "clipboard";
+import { ElMessage } from "element-plus";
+import { httpPost } from "@/utils/http";
+import { checkSession } from "@/store/cache";
+
+const items = ref([]);
+const total = ref(0);
+const page = ref(1);
+const pageSize = ref(20);
+const loading = ref(false);
+const listBoxHeight = window.innerHeight - 87;
 const query = ref({
   model: "",
   date: []
-})
-const tagColors = ref(["primary", "success", "primary", "danger", "info", "warning"])
+});
+const tagColors = ref([
+  "primary",
+  "success",
+  "primary",
+  "danger",
+  "info",
+  "warning"
+]);
 
 onMounted(() => {
-  checkSession().then(() => {
-    fetchData()
-  }).catch(() => {
-  })
-  const clipboard = new Clipboard('.copy-order-no');
-  clipboard.on('success', () => {
+  checkSession()
+    .then(() => {
+      fetchData();
+    })
+    .catch(() => {});
+  const clipboard = new Clipboard(".copy-order-no");
+  clipboard.on("success", () => {
     ElMessage.success("复制成功！");
-  })
+  });
 
-  clipboard.on('error', () => {
-    ElMessage.error('复制失败！');
-  })
-})
+  clipboard.on("error", () => {
+    ElMessage.error("复制失败！");
+  });
+});
 
 // 获取数据
 const fetchData = () => {
-  loading.value = true
-  httpPost('/api/powerLog/list', {
+  loading.value = true;
+  httpPost("/api/powerLog/list", {
     model: query.value.model,
     date: query.value.date,
     page: page.value,
     page_size: pageSize.value
-  }).then((res) => {
-    if (res.data) {
-      items.value = res.data.items
-      total.value = res.data.total
-      page.value = res.data.page
-      pageSize.value = res.data.page_size
-    }
-    loading.value = false
-  }).catch(e => {
-    loading.value = false
-    ElMessage.error("获取数据失败：" + e.message);
   })
-}
-
+    .then((res) => {
+      if (res.data) {
+        items.value = res.data.items;
+        total.value = res.data.total;
+        page.value = res.data.page;
+        pageSize.value = res.data.page_size;
+      }
+      loading.value = false;
+    })
+    .catch((e) => {
+      loading.value = false;
+      ElMessage.error("获取数据失败：" + e.message);
+    });
+};
 </script>
 
 <style lang="stylus" scoped>
@@ -135,7 +168,10 @@ const fetchData = () => {
     .list-box {
       overflow-x hidden
       //overflow-y auto
-
+      background: var(--chat-bg);
+      padding: 20px;
+      margin-top: 20px;
+      border-radius: 10px;
       .handle-box {
         padding 20px 0
 
diff --git a/web/src/views/Song.vue b/web/src/views/Song.vue
index 1443661e..d053dbab 100644
--- a/web/src/views/Song.vue
+++ b/web/src/views/Song.vue
@@ -1,93 +1,104 @@
 <template>
   <div class="page-song" :style="{ height: winHeight + 'px' }">
     <div class="inner">
-      <h2 class="title">{{song.title}}</h2>
+      <h2 class="title">{{ song.title }}</h2>
       <div class="row tags" v-if="song.tags">
-        <span>{{song.tags}}</span>
+        <span>{{ song.tags }}</span>
       </div>
 
       <div class="row author">
         <span>
           <el-avatar :size="32" :src="song.user?.avatar" />
         </span>
-        <span class="nickname">{{song.user?.nickname}}</span>
+        <span class="nickname">{{ song.user?.nickname }}</span>
         <button class="btn btn-icon" @click="play">
-          <i class="iconfont icon-play"></i> {{song.play_times}}
+          <i class="iconfont icon-play"></i> {{ song.play_times }}
         </button>
 
-        <el-tooltip effect="light" content="复制歌曲链接" placement="top">
-          <button class="btn btn-icon copy-link" :data-clipboard-text="getShareURL(song)" >
+        <el-tooltip content="复制歌曲链接" placement="top">
+          <button
+            class="btn btn-icon copy-link"
+            :data-clipboard-text="getShareURL(song)"
+          >
             <i class="iconfont icon-share1"></i>
           </button>
         </el-tooltip>
       </div>
 
       <div class="row date">
-        <span>{{dateFormat(song.created_at)}}</span>
-        <span class="version">{{song.raw_data?.major_model_version}}</span>
+        <span>{{ dateFormat(song.created_at) }}</span>
+        <span class="version">{{ song.raw_data?.major_model_version }}</span>
       </div>
 
       <div class="row">
-        <textarea class="prompt" maxlength="2000" rows="18" readonly>{{song.prompt}}</textarea>
+        <textarea class="prompt" maxlength="2000" rows="18" readonly>{{
+          song.prompt
+        }}</textarea>
       </div>
     </div>
 
     <div class="music-player" v-if="playList.length > 0">
-      <music-player :songs="playList" ref="playerRef" @play="song.play_times += 1"/>
+      <music-player
+        :songs="playList"
+        ref="playerRef"
+        @play="song.play_times += 1"
+      />
     </div>
   </div>
 </template>
 
 <script setup>
-import {onMounted, onUnmounted, ref} from "vue"
-import {useRouter} from "vue-router";
-import {httpGet} from "@/utils/http";
-import {showMessageError} from "@/utils/dialog";
-import {dateFormat} from "@/utils/libs";
+import { onMounted, onUnmounted, ref } from "vue";
+import { useRouter } from "vue-router";
+import { httpGet } from "@/utils/http";
+import { showMessageError } from "@/utils/dialog";
+import { dateFormat } from "@/utils/libs";
 import Clipboard from "clipboard";
-import {ElMessage} from "element-plus";
+import { ElMessage } from "element-plus";
 import MusicPlayer from "@/components/MusicPlayer.vue";
 
-const router = useRouter()
-const id = router.currentRoute.value.params.id
-const song = ref({title:""})
-const playList = ref([])
-const playerRef = ref(null)
+const router = useRouter();
+const id = router.currentRoute.value.params.id;
+const song = ref({ title: "" });
+const playList = ref([]);
+const playerRef = ref(null);
 
-httpGet("/api/suno/detail",{song_id:id}).then(res => {
-  song.value = res.data
-  playList.value = [song.value]
-  document.title = song.value?.title+ " | By "+song.value?.user.nickname+" | Suno音乐"
-}).catch(e => {
-  showMessageError("获取歌曲详情失败："+e.message)
-})
+httpGet("/api/suno/detail", { song_id: id })
+  .then((res) => {
+    song.value = res.data;
+    playList.value = [song.value];
+    document.title =
+      song.value?.title + " | By " + song.value?.user.nickname + " | Suno音乐";
+  })
+  .catch((e) => {
+    showMessageError("获取歌曲详情失败：" + e.message);
+  });
 
-const clipboard = ref(null)
+const clipboard = ref(null);
 onMounted(() => {
-  clipboard.value = new Clipboard('.copy-link');
-  clipboard.value.on('success', () => {
+  clipboard.value = new Clipboard(".copy-link");
+  clipboard.value.on("success", () => {
     ElMessage.success("复制歌曲链接成功！");
-  })
+  });
 
-  clipboard.value.on('error', () => {
-    ElMessage.error('复制失败！');
-  })
-})
+  clipboard.value.on("error", () => {
+    ElMessage.error("复制失败！");
+  });
+});
 
 onUnmounted(() => {
-  clipboard.value.destroy()
-})
+  clipboard.value.destroy();
+});
 
 // 播放歌曲
 const play = () => {
-  playerRef.value.play()
-}
+  playerRef.value.play();
+};
 
-
-const winHeight = ref(window.innerHeight-50)
+const winHeight = ref(window.innerHeight - 50);
 const getShareURL = (item) => {
-  return `${location.protocol}//${location.host}/song/${item.id}`
-}
+  return `${location.protocol}//${location.host}/song/${item.id}`;
+};
 </script>
 
 <style lang="stylus" scoped>
diff --git a/web/src/views/Suno.vue b/web/src/views/Suno.vue
index 97aed467..4be312bf 100644
--- a/web/src/views/Suno.vue
+++ b/web/src/views/Suno.vue
@@ -1,98 +1,140 @@
 <template>
+  <!-- :style="{ height: winHeight + 'px' }" -->
   <div class="page-suno" :style="{ height: winHeight + 'px' }">
     <div class="left-bar">
       <div class="bar-top">
-        <el-tooltip effect="light" content="定义模式" placement="top">
-          <black-switch  v-model:value="custom" size="large"  />
+        <el-tooltip content="定义模式" placement="top">
+          <black-switch v-model:value="custom" size="large" />
         </el-tooltip>
-        <el-tooltip effect="light" content="请上传6-60秒的原始音频，检测到人声的音频将仅设为私人音频。" placement="bottom-end">
+        <el-tooltip
+          content="请上传6-60秒的原始音频，检测到人声的音频将仅设为私人音频。"
+          placement="bottom-end"
+        >
           <el-upload
-              class="avatar-uploader"
-              :auto-upload="true"
-              :show-file-list="false"
-              :http-request="uploadAudio"
-              accept=".wav,.mp3"
+            class="avatar-uploader"
+            :auto-upload="true"
+            :show-file-list="false"
+            :http-request="uploadAudio"
+            accept=".wav,.mp3"
           >
-          <el-button class="upload-music" color="#363030" round>
-            <i class="iconfont icon-upload"></i>
-            <span>上传音乐</span>
-          </el-button>
+            <el-button class="upload-music" round type="primary">
+              <i class="iconfont icon-upload"></i>
+              <span>上传音乐</span>
+            </el-button>
           </el-upload>
         </el-tooltip>
-        <black-select v-model:value="data.model" :options="models" placeholder="请选择模型" style="width: 100px" />
+        <black-select
+          v-model:value="data.model"
+          :options="models"
+          placeholder="请选择模型"
+          style="width: 100px"
+        />
       </div>
 
       <div class="params">
         <div class="pure-music">
-          <span class="switch"><black-switch  v-model:value="data.instrumental" size="default"  /></span>
+          <span class="switch"
+            ><black-switch v-model:value="data.instrumental" size="default"
+          /></span>
           <span class="text">纯音乐</span>
         </div>
         <div v-if="custom">
           <div class="item-group" v-if="!data.instrumental">
             <div class="label">
               <span class="text">歌词</span>
-              <el-popover placement="right"
-                          :width="200"
-                          trigger="hover" content="自己写歌词或寻求 AI 的帮助。使用两节歌词（8 行）可获得最佳效果。">
+              <el-popover
+                placement="right"
+                :width="200"
+                trigger="hover"
+                content="自己写歌词或寻求 AI 的帮助。使用两节歌词（8 行）可获得最佳效果。"
+              >
                 <template #reference>
                   <el-icon>
-                    <InfoFilled/>
+                    <InfoFilled />
                   </el-icon>
                 </template>
               </el-popover>
             </div>
-            <div class="item"
-                 v-loading="isGenerating"
-                 element-loading-text="正在生成歌词..."
-                 element-loading-background="rgba(122, 122, 122, 0.8)">
-              <black-input v-model:value="data.lyrics" type="textarea" :rows="10" :placeholder="promptPlaceholder"/>
-              <button class="btn btn-lyric" @click="createLyric">生成歌词</button>
+            <div
+              class="item"
+              v-loading="isGenerating"
+              element-loading-text="正在生成歌词..."
+              element-loading-background="rgba(122, 122, 122, 0.8)"
+            >
+              <black-input
+                v-model:value="data.lyrics"
+                type="textarea"
+                :rows="10"
+                :placeholder="promptPlaceholder"
+              />
+              <button class="btn btn-lyric" @click="createLyric">
+                生成歌词
+              </button>
             </div>
           </div>
 
           <div class="item-group">
             <div class="label">
               <span class="text">音乐风格</span>
-              <el-popover placement="right"
-                          :width="200"
-                          trigger="hover" content="描述您想要的音乐风格（例如“原声流行音乐”）。Sunos 模特无法识别艺术家的名字，但能够理解音乐流派和氛围。">
+              <el-popover
+                placement="right"
+                :width="200"
+                trigger="hover"
+                content="描述您想要的音乐风格（例如“原声流行音乐”）。Sunos 模特无法识别艺术家的名字，但能够理解音乐流派和氛围。"
+              >
                 <template #reference>
                   <el-icon>
-                    <InfoFilled/>
+                    <InfoFilled />
                   </el-icon>
                 </template>
               </el-popover>
             </div>
             <div class="item">
-              <black-input v-model:value="data.tags" type="textarea" :maxlength="120" :rows="3" placeholder="请输入音乐风格，多个风格之间用英文逗号隔开..."/>
+              <black-input
+                v-model:value="data.tags"
+                type="textarea"
+                :maxlength="120"
+                :rows="3"
+                placeholder="请输入音乐风格，多个风格之间用英文逗号隔开..."
+              />
             </div>
 
             <div class="tag-select">
               <div class="inner">
                 <span
-                    class="tag"
-                    @click="selectTag(tag)"
-                    v-for="tag in tags"
-                    :key="tag.value">{{ tag.label }}</span>
-              </div>
+                  class="tag"
+                  @click="selectTag(tag)"
+                  v-for="tag in tags"
+                  :key="tag.value"
+                  >{{ tag.label }}</span
+                >
               </div>
+            </div>
           </div>
 
           <div class="item-group">
             <div class="label">
               <span class="text">歌曲名称</span>
-              <el-popover placement="right"
-                          :width="200"
-                          trigger="hover" content="给你的歌曲起一个标题，以便于分享、发现和组织。">
+              <el-popover
+                placement="right"
+                :width="200"
+                trigger="hover"
+                content="给你的歌曲起一个标题，以便于分享、发现和组织。"
+              >
                 <template #reference>
                   <el-icon>
-                    <InfoFilled/>
+                    <InfoFilled />
                   </el-icon>
                 </template>
               </el-popover>
             </div>
             <div class="item">
-              <black-input v-model:value="data.title" type="textarea" :rows="1" placeholder="请输入歌曲名称..."/>
+              <black-input
+                v-model:value="data.title"
+                type="textarea"
+                :rows="1"
+                placeholder="请输入歌曲名称..."
+              />
             </div>
           </div>
         </div>
@@ -100,30 +142,41 @@
         <div v-else>
           <div class="label">
             <span class="text">歌曲描述</span>
-            <el-popover placement="right"
-                        :width="200"
-                        trigger="hover" content="描述您想要的音乐风格和主题（例如：关于假期的流行音乐）。请使用流派和氛围，而不是特定的艺术家和歌曲风格，AI无法识别。">
+            <el-popover
+              placement="right"
+              :width="200"
+              trigger="hover"
+              content="描述您想要的音乐风格和主题（例如：关于假期的流行音乐）。请使用流派和氛围，而不是特定的艺术家和歌曲风格，AI无法识别。"
+            >
               <template #reference>
                 <el-icon>
-                  <InfoFilled/>
+                  <InfoFilled />
                 </el-icon>
               </template>
             </el-popover>
           </div>
           <div class="item">
-            <black-input v-model:value="data.prompt" type="textarea" :rows="10" placeholder="例如：一首关于爱情的摇滚歌曲..."/>
+            <black-input
+              v-model:value="data.prompt"
+              type="textarea"
+              :rows="10"
+              placeholder="例如：一首关于爱情的摇滚歌曲..."
+            />
           </div>
         </div>
 
         <div class="ref-song" v-if="refSong">
           <div class="label">
             <span class="text">续写</span>
-            <el-popover placement="right"
-                        :width="200"
-                        trigger="hover" content="输入额外的歌词，根据您之前的歌词来扩展歌曲。">
+            <el-popover
+              placement="right"
+              :width="200"
+              trigger="hover"
+              content="输入额外的歌词，根据您之前的歌词来扩展歌曲。"
+            >
               <template #reference>
                 <el-icon>
-                  <InfoFilled/>
+                  <InfoFilled />
                 </el-icon>
               </template>
             </el-popover>
@@ -132,89 +185,122 @@
           <div class="item">
             <div class="song">
               <el-image :src="refSong.cover_url" fit="cover" />
-              <span class="title">{{refSong.title}}</span>
-              <el-button type="info" @click="removeRefSong" size="small" :icon="Delete" circle />
+              <span class="title">{{ refSong.title }}</span>
+              <el-button
+                type="info"
+                @click="removeRefSong"
+                size="small"
+                :icon="Delete"
+                circle
+              />
             </div>
             <div class="extend-secs">
-              从  <input v-model="refSong.extend_secs" type="text"/> 秒开始续写
+              从 <input v-model="refSong.extend_secs" type="text" /> 秒开始续写
             </div>
           </div>
         </div>
 
-        <div class="item">
-          <button class="create-btn" @click="create">
-            <img src="/images/create-new.svg" alt=""/>
-            <span>{{btnText}}</span>
-          </button>
+        <div class="submit-btn">
+          <el-button type="primary" @click="create" :dark="false" round>
+            <img src="/images/create-new.svg" alt="" />
+            <span>{{ btnText }}</span>
+          </el-button>
         </div>
       </div>
     </div>
-    <div class="right-box" v-loading="loading" element-loading-background="rgba(100,100,100,0.3)">
+    <div
+      class="right-box"
+      v-loading="loading"
+      element-loading-background="rgba(100,100,100,0.3)"
+    >
       <div class="list-box" v-if="!noData">
         <div v-for="item in list" :key="item.id">
           <div class="item" v-if="item.progress === 100">
             <div class="left">
               <div class="container">
                 <el-image :src="item.cover_url" fit="cover" />
-                <div class="duration">{{formatTime(item.duration)}}</div>
+                <div class="duration">{{ formatTime(item.duration) }}</div>
                 <button class="play" @click="play(item)">
-                  <img src="/images/play.svg" alt=""/>
+                  <img src="/images/play.svg" alt="" />
                 </button>
               </div>
             </div>
             <div class="center">
               <div class="title">
-                <a :href="'/song/'+item.song_id"  target="_blank">{{item.title}}</a>
-                <span class="model" v-if="item.major_model_version">{{item.major_model_version}}</span>
+                <a :href="'/song/' + item.song_id" target="_blank">{{
+                  item.title
+                }}</a>
+                <span class="model" v-if="item.major_model_version">{{
+                  item.major_model_version
+                }}</span>
                 <span class="model" v-if="item.type === 4">用户上传</span>
                 <span class="model" v-if="item.type === 3">
                   <i class="iconfont icon-mp3"></i>
                   完整歌曲
                 </span>
                 <span class="model" v-if="item.ref_song">
-                    <i class="iconfont icon-link"></i>
-                    {{item.ref_song.title}}
-                  </span>
+                  <i class="iconfont icon-link"></i>
+                  {{ item.ref_song.title }}
+                </span>
               </div>
-              <div class="tags" v-if="item.tags">{{item.tags}}</div>
+              <div class="tags" v-if="item.tags">{{ item.tags }}</div>
             </div>
             <div class="right">
               <div class="tools">
-                <el-tooltip effect="light" content="以当前歌曲为素材继续创作" placement="top">
+                <el-tooltip content="以当前歌曲为素材继续创作" placement="top">
                   <button class="btn" @click="extend(item)">续写</button>
                 </el-tooltip>
 
                 <button class="btn btn-publish">
                   <span class="text">发布</span>
-                  <black-switch v-model:value="item.publish" @change="publishJob(item)" size="small" />
+                  <black-switch
+                    v-model:value="item.publish"
+                    @change="publishJob(item)"
+                    size="small"
+                  />
                 </button>
 
-                <el-tooltip effect="light" content="下载歌曲" placement="top">
+                <el-tooltip content="下载歌曲" placement="top">
                   <button class="btn btn-icon" @click="download(item)">
-                    <i class="iconfont icon-download" v-if="!item.downloading"></i>
-                    <el-image src="/images/loading.gif" class="downloading" fit="cover" v-else />
+                    <i
+                      class="iconfont icon-download"
+                      v-if="!item.downloading"
+                    ></i>
+                    <el-image
+                      src="/images/loading.gif"
+                      class="downloading"
+                      fit="cover"
+                      v-else
+                    />
                   </button>
                 </el-tooltip>
 
-                <el-tooltip effect="light" content="获取完整歌曲" placement="top" v-if="item.ref_song">
+                <el-tooltip
+                  content="获取完整歌曲"
+                  placement="top"
+                  v-if="item.ref_song"
+                >
                   <button class="btn btn-icon" @click="merge(item)">
                     <i class="iconfont icon-concat"></i>
                   </button>
                 </el-tooltip>
 
-                <el-tooltip effect="light" content="复制歌曲链接" placement="top">
-                  <button class="btn btn-icon copy-link" :data-clipboard-text="getShareURL(item)" >
+                <el-tooltip content="复制歌曲链接" placement="top">
+                  <button
+                    class="btn btn-icon copy-link"
+                    :data-clipboard-text="getShareURL(item)"
+                  >
                     <i class="iconfont icon-share1"></i>
                   </button>
                 </el-tooltip>
 
-                <el-tooltip effect="light" content="编辑" placement="top">
+                <el-tooltip content="编辑" placement="top">
                   <button class="btn btn-icon" @click="update(item)">
                     <i class="iconfont icon-edit"></i>
                   </button>
                 </el-tooltip>
 
-                <el-tooltip effect="light" content="删除" placement="top">
+                <el-tooltip content="删除" placement="top">
                   <button class="btn btn-icon" @click="removeJob(item)">
                     <i class="iconfont icon-remove"></i>
                   </button>
@@ -225,13 +311,13 @@
           <div class="task" v-else>
             <div class="left">
               <div class="title">
-                <span v-if="item.title">{{item.title}}</span>
-                <span v-else>{{item.prompt}}</span>
+                <span v-if="item.title">{{ item.title }}</span>
+                <span v-else>{{ item.prompt }}</span>
               </div>
             </div>
             <div class="center">
               <div class="failed" v-if="item.progress === 101">
-                {{item.err_msg}}
+                {{ item.err_msg }}
               </div>
               <generating v-else message="正在生成歌曲" />
             </div>
@@ -243,30 +329,44 @@
           </div>
         </div>
       </div>
-      <el-empty :image-size="100" description="没有任何作品，赶紧去创作吧！" v-else/>
+      <el-empty
+        :image-size="100"
+        :image="nodata"
+        description="没有任何作品，赶紧去创作吧！"
+        v-else
+      />
 
       <div class="pagination">
-        <el-pagination v-if="total > pageSize" background
-                       style="--el-pagination-button-bg-color:#414141;
-                       --el-pagination-button-color:#d1d1d1;
-                       --el-disabled-bg-color:#414141;
-                       --el-color-primary:#666666;
-                       --el-pagination-hover-color:#e1e1e1"
-                       layout="total,prev, pager, next"
-                       :hide-on-single-page="true"
-                       v-model:current-page="page"
-                       v-model:page-size="pageSize"
-                       @current-change="fetchData(page)"
-                       :total="total"/>
-
+        <el-pagination
+          v-if="total > pageSize"
+          background
+          style="--el-pagination-button-bg-color: rgba(86, 86, 95, 0.2)"
+          layout="total,prev, pager, next"
+          :hide-on-single-page="true"
+          v-model:current-page="page"
+          v-model:page-size="pageSize"
+          @current-change="fetchData(page)"
+          :total="total"
+        />
       </div>
 
       <div class="music-player" v-if="showPlayer">
-        <music-player :songs="playList" ref="playerRef" :show-close="true" @close="showPlayer = false" />
+        <music-player
+          :songs="playList"
+          ref="playerRef"
+          :show-close="true"
+          @close="showPlayer = false"
+        />
       </div>
     </div>
 
-    <black-dialog v-model:show="showDialog" title="修改歌曲" @cancal="showDialog = false" @confirm="updateSong" :width="500+'px'">
+    <black-dialog
+      v-model:show="showDialog"
+      title="修改歌曲"
+      @cancal="showDialog = false"
+      @confirm="updateSong"
+      :width="500 + 'px'"
+    >
       <form class="form">
         <div class="form-item">
           <div class="label">歌曲名称</div>
@@ -276,13 +376,13 @@
         <div class="form-item">
           <div class="label">封面图片</div>
           <el-upload
-              class="avatar-uploader"
-              :auto-upload="true"
-              :show-file-list="false"
-              :http-request="uploadCover"
-              accept=".png,.jpg,.jpeg,.bmp"
+            class="avatar-uploader"
+            :auto-upload="true"
+            :show-file-list="false"
+            :http-request="uploadCover"
+            accept=".png,.jpg,.jpeg,.bmp"
           >
-            <el-avatar :src="editData.cover" shape="square" :size="100"/>
+            <el-avatar :src="editData.cover" shape="square" :size="100" />
           </el-upload>
         </div>
       </form>
@@ -291,48 +391,50 @@
 </template>
 
 <script setup>
-import {nextTick, onMounted, onUnmounted, ref, watch} from "vue"
-import {Delete, InfoFilled} from "@element-plus/icons-vue";
+import nodata from "@/assets/img/no-data.png";
+
+import { nextTick, onMounted, onUnmounted, ref, watch } from "vue";
+import { Delete, InfoFilled } from "@element-plus/icons-vue";
 import BlackSelect from "@/components/ui/BlackSelect.vue";
 import BlackSwitch from "@/components/ui/BlackSwitch.vue";
 import BlackInput from "@/components/ui/BlackInput.vue";
 import MusicPlayer from "@/components/MusicPlayer.vue";
-import {compact} from "lodash";
-import {httpDownload, httpGet, httpPost} from "@/utils/http";
-import {showMessageError, showMessageOK} from "@/utils/dialog";
-import {checkSession, getClientId} from "@/store/cache";
-import {ElMessage, ElMessageBox} from "element-plus";
-import {formatTime, replaceImg} from "@/utils/libs";
+import { compact } from "lodash";
+import { httpDownload, httpGet, httpPost } from "@/utils/http";
+import { showMessageError, showMessageOK } from "@/utils/dialog";
+import { checkSession, getClientId } from "@/store/cache";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { formatTime, replaceImg } from "@/utils/libs";
 import Clipboard from "clipboard";
 import BlackDialog from "@/components/ui/BlackDialog.vue";
 import Compressor from "compressorjs";
 import Generating from "@/components/ui/Generating.vue";
-import {useSharedStore} from "@/store/sharedata";
+import { useSharedStore } from "@/store/sharedata";
 
-const winHeight = ref(window.innerHeight - 50)
-const custom = ref(false)
+const winHeight = ref(window.innerHeight - 50);
+const custom = ref(false);
 const models = ref([
-  {label: "v3.0", value: "chirp-v3-0"},
-  {label: "v3.5", value:"chirp-v3-5"}
-])
+  { label: "v3.0", value: "chirp-v3-0" },
+  { label: "v3.5", value: "chirp-v3-5" }
+]);
 const tags = ref([
-  {label: "女声", value: "female vocals"},
-  {label: "男声", value: "male vocals"},
-  {label: "流行", value: "pop"},
-  {label: "摇滚", value: "rock"},
-  {label: "硬摇滚", value: "hard rock"},
-  {label: "电音", value: "electronic"},
-  {label: "金属", value: "metal"},
-  {label: "重金属", value: "heavy metal"},
-  {label: "节拍", value: "beat"},
-  {label: "弱拍", value: "upbeat"},
-  {label: "合成器", value: "synth"},
-  {label: "吉他", value: "guitar"},
-  {label: "钢琴", value: "piano"},
-  {label: "小提琴", value: "violin"},
-  {label: "贝斯", value: "bass"},
-  {label: "嘻哈", value: "hip hop"},
-])
+  { label: "女声", value: "female vocals" },
+  { label: "男声", value: "male vocals" },
+  { label: "流行", value: "pop" },
+  { label: "摇滚", value: "rock" },
+  { label: "硬摇滚", value: "hard rock" },
+  { label: "电音", value: "electronic" },
+  { label: "金属", value: "metal" },
+  { label: "重金属", value: "heavy metal" },
+  { label: "节拍", value: "beat" },
+  { label: "弱拍", value: "upbeat" },
+  { label: "合成器", value: "synth" },
+  { label: "吉他", value: "guitar" },
+  { label: "钢琴", value: "piano" },
+  { label: "小提琴", value: "violin" },
+  { label: "贝斯", value: "bass" },
+  { label: "嘻哈", value: "hip hop" }
+]);
 const data = ref({
   client_id: getClientId(),
   model: "chirp-v3-0",
@@ -343,250 +445,275 @@ const data = ref({
   instrumental: false,
   ref_task_id: "",
   extend_secs: 0,
-  ref_song_id: "",
-})
-const loading = ref(false)
-const noData = ref(true)
-const playList = ref([])
-const playerRef = ref(null)
-const showPlayer = ref(false)
-const list = ref([])
-const btnText = ref("开始创作")
-const refSong = ref(null)
-const showDialog = ref(false)
-const editData = ref({title:"",cover:"",id:0})
-const promptPlaceholder = ref('请在这里输入你自己写的歌词...')
-const store = useSharedStore()
-const clipboard = ref(null)
+  ref_song_id: ""
+});
+const loading = ref(false);
+const noData = ref(true);
+const playList = ref([]);
+const playerRef = ref(null);
+const showPlayer = ref(false);
+const list = ref([]);
+const btnText = ref("开始创作");
+const refSong = ref(null);
+const showDialog = ref(false);
+const editData = ref({ title: "", cover: "", id: 0 });
+const promptPlaceholder = ref("请在这里输入你自己写的歌词...");
+const store = useSharedStore();
+const clipboard = ref(null);
 onMounted(() => {
-  clipboard.value = new Clipboard('.copy-link');
-  clipboard.value.on('success', () => {
+  clipboard.value = new Clipboard(".copy-link");
+  clipboard.value.on("success", () => {
     ElMessage.success("复制歌曲链接成功！");
-  })
+  });
 
-  clipboard.value.on('error', () => {
-    ElMessage.error('复制失败！');
-  })
+  clipboard.value.on("error", () => {
+    ElMessage.error("复制失败！");
+  });
 
-  checkSession().then(() => {
-    fetchData(1)
-  }).catch(() => {})
+  checkSession()
+    .then(() => {
+      fetchData(1);
+    })
+    .catch(() => {});
 
-  store.addMessageHandler("suno",(data) => {
+  store.addMessageHandler("suno", (data) => {
     // 丢弃无关消息
     if (data.channel !== "suno" || data.clientId !== getClientId()) {
-      return
+      return;
     }
 
     if (data.body === "FINISH" || data.body === "FAIL") {
-      fetchData(1)
+      fetchData(1);
     }
-  })
-})
+  });
+});
 
 onUnmounted(() => {
-  clipboard.value.destroy()
-  store.removeMessageHandler("suno")
-})
+  clipboard.value.destroy();
+  store.removeMessageHandler("suno");
+});
 
-const page = ref(1)
-const pageSize = ref(10)
-const total = ref(0)
+const page = ref(1);
+const pageSize = ref(10);
+const total = ref(0);
 const fetchData = (_page) => {
   if (_page) {
-    page.value = _page
+    page.value = _page;
   }
-  loading.value = true
-  httpGet("/api/suno/list",{page:page.value, page_size:pageSize.value}).then(res => {
-    total.value = res.data.total
-    const items = []
-    for (let v of res.data.items) {
-      if (v.progress === 100) {
-        v.major_model_version = v['raw_data']['major_model_version']
+  loading.value = true;
+  httpGet("/api/suno/list", { page: page.value, page_size: pageSize.value })
+    .then((res) => {
+      total.value = res.data.total;
+      const items = [];
+      for (let v of res.data.items) {
+        if (v.progress === 100) {
+          v.major_model_version = v["raw_data"]["major_model_version"];
+        }
+        items.push(v);
       }
-      items.push(v)
-    }
-    loading.value = false
-    list.value = items
-    noData.value = list.value.length === 0
-  }).catch(e => {
-    loading.value = false
-    noData.value = true
-    showMessageError("获取作品列表失败："+e.message)
-  })
-}
+      loading.value = false;
+      list.value = items;
+      noData.value = list.value.length === 0;
+    })
+    .catch((e) => {
+      loading.value = false;
+      noData.value = true;
+      showMessageError("获取作品列表失败：" + e.message);
+    });
+};
 
 // 创建新的歌曲
 const create = () => {
-  data.value.type = custom.value ? 2 : 1
-  data.value.ref_task_id = refSong.value ? refSong.value.task_id : ""
-  data.value.ref_song_id = refSong.value ? refSong.value.song_id : ""
-  data.value.extend_secs = refSong.value ? refSong.value.extend_secs : 0
+  data.value.type = custom.value ? 2 : 1;
+  data.value.ref_task_id = refSong.value ? refSong.value.task_id : "";
+  data.value.ref_song_id = refSong.value ? refSong.value.song_id : "";
+  data.value.extend_secs = refSong.value ? refSong.value.extend_secs : 0;
   if (refSong.value) {
     if (data.value.extend_secs > refSong.value.duration) {
-      return showMessageError("续写开始时间不能超过原歌曲长度")
+      return showMessageError("续写开始时间不能超过原歌曲长度");
     }
   } else if (custom.value) {
     if (data.value.lyrics === "") {
-      return showMessageError("请输入歌词")
+      return showMessageError("请输入歌词");
     }
     if (data.value.title === "") {
-      return showMessageError("请输入歌曲标题")
+      return showMessageError("请输入歌曲标题");
     }
   } else {
     if (data.value.prompt === "") {
-      return showMessageError("请输入歌曲描述")
+      return showMessageError("请输入歌曲描述");
     }
   }
 
-  httpPost("/api/suno/create", data.value).then(() => {
-    fetchData(1)
-    showMessageOK("创建任务成功")
-  }).catch(e => {
-    showMessageError("创建任务失败："+e.message)
-  })
-}
+  httpPost("/api/suno/create", data.value)
+    .then(() => {
+      fetchData(1);
+      showMessageOK("创建任务成功");
+    })
+    .catch((e) => {
+      showMessageError("创建任务失败：" + e.message);
+    });
+};
 
 // 拼接歌曲
 const merge = (item) => {
-  httpPost("/api/suno/create", {song_id: item.song_id, type:3}).then(() => {
-    fetchData(1)
-    showMessageOK("创建任务成功")
-  }).catch(e => {
-    showMessageError("合并歌曲失败："+e.message)
-  })
-}
+  httpPost("/api/suno/create", { song_id: item.song_id, type: 3 })
+    .then(() => {
+      fetchData(1);
+      showMessageOK("创建任务成功");
+    })
+    .catch((e) => {
+      showMessageError("合并歌曲失败：" + e.message);
+    });
+};
 
 // 下载歌曲
 const download = (item) => {
-  const url = replaceImg(item.audio_url)
-  const downloadURL = `${process.env.VUE_APP_API_HOST}/api/download?url=${url}`
+  const url = replaceImg(item.audio_url);
+  const downloadURL = `${process.env.VUE_APP_API_HOST}/api/download?url=${url}`;
   // parse filename
   const urlObj = new URL(url);
-  const fileName = urlObj.pathname.split('/').pop();
-  item.downloading = true
-  httpDownload(downloadURL).then(response  => {
-    const blob = new Blob([response.data]);
-    const link = document.createElement('a');
-    link.href = URL.createObjectURL(blob);
-    link.download = fileName;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    URL.revokeObjectURL(link.href);
-    item.downloading = false
-  }).catch(() => {
-    showMessageError("下载失败")
-    item.downloading = false
-  })
-}
+  const fileName = urlObj.pathname.split("/").pop();
+  item.downloading = true;
+  httpDownload(downloadURL)
+    .then((response) => {
+      const blob = new Blob([response.data]);
+      const link = document.createElement("a");
+      link.href = URL.createObjectURL(blob);
+      link.download = fileName;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(link.href);
+      item.downloading = false;
+    })
+    .catch(() => {
+      showMessageError("下载失败");
+      item.downloading = false;
+    });
+};
 
 const uploadAudio = (file) => {
   const formData = new FormData();
-  formData.append('file', file.file, file.name);
+  formData.append("file", file.file, file.name);
   // 执行上传操作
-  httpPost('/api/upload', formData).then((res) => {
-    httpPost("/api/suno/create", {audio_url: res.data.url, title:res.data.name, type:4}).then(() => {
-      fetchData(1)
-      showMessageOK("歌曲上传成功")
-    }).catch(e => {
-      showMessageError("歌曲上传失败："+e.message)
+  httpPost("/api/upload", formData)
+    .then((res) => {
+      httpPost("/api/suno/create", {
+        audio_url: res.data.url,
+        title: res.data.name,
+        type: 4
+      })
+        .then(() => {
+          fetchData(1);
+          showMessageOK("歌曲上传成功");
+        })
+        .catch((e) => {
+          showMessageError("歌曲上传失败：" + e.message);
+        });
+      removeRefSong();
+      ElMessage.success({ message: "上传成功", duration: 500 });
     })
-    removeRefSong()
-    ElMessage.success({message: "上传成功", duration: 500})
-  }).catch((e) => {
-    ElMessage.error('文件传失败:' + e.message)
-  })
+    .catch((e) => {
+      ElMessage.error("文件传失败:" + e.message);
+    });
 };
 
-
 // 续写歌曲
 const extend = (item) => {
-  refSong.value = item
-  refSong.value.extend_secs = item.duration
-  data.value.title = item.title
-  custom.value = true
-  btnText.value = "续写歌曲"
-  promptPlaceholder.value = "输入额外的歌词，根据您之前的歌词来扩展歌曲..."
-}
+  refSong.value = item;
+  refSong.value.extend_secs = item.duration;
+  data.value.title = item.title;
+  custom.value = true;
+  btnText.value = "续写歌曲";
+  promptPlaceholder.value = "输入额外的歌词，根据您之前的歌词来扩展歌曲...";
+};
 
 // 更细歌曲
 const update = (item) => {
-  showDialog.value = true
-  editData.value.title = item.title
-  editData.value.cover = item.cover_url
-  editData.value.id = item.id
-}
+  showDialog.value = true;
+  editData.value.title = item.title;
+  editData.value.cover = item.cover_url;
+  editData.value.id = item.id;
+};
 
-const updateSong = ()  => {
+const updateSong = () => {
   if (editData.value.title === "" || editData.value.cover === "") {
-    return showMessageError("歌曲标题和封面不能为空")
+    return showMessageError("歌曲标题和封面不能为空");
   }
-  httpPost("/api/suno/update", editData.value).then(() => {
-    showMessageOK("更新歌曲成功")
-    showDialog.value = false
-    fetchData()
-  }).catch(e => {
-    showMessageError("更新歌曲失败："+e.message)
-  })
-}
+  httpPost("/api/suno/update", editData.value)
+    .then(() => {
+      showMessageOK("更新歌曲成功");
+      showDialog.value = false;
+      fetchData();
+    })
+    .catch((e) => {
+      showMessageError("更新歌曲失败：" + e.message);
+    });
+};
 
-watch(() => custom.value, (newValue) => {
-  if (!newValue) {
-    removeRefSong()
+watch(
+  () => custom.value,
+  (newValue) => {
+    if (!newValue) {
+      removeRefSong();
+    }
   }
-})
+);
 
 const removeRefSong = () => {
-  refSong.value = null
-  btnText.value = "开始创作"
-  promptPlaceholder.value = "请在这里输入你自己写的歌词..."
-}
+  refSong.value = null;
+  btnText.value = "开始创作";
+  promptPlaceholder.value = "请在这里输入你自己写的歌词...";
+};
 
 const play = (item) => {
-  playList.value = [item]
-  showPlayer.value = true
-  nextTick(()=> playerRef.value.play())
-}
+  playList.value = [item];
+  showPlayer.value = true;
+  nextTick(() => playerRef.value.play());
+};
 
 const selectTag = (tag) => {
   if (data.value.tags.length + tag.value.length >= 119) {
-    return
+    return;
   }
-  data.value.tags = compact([...data.value.tags.split(","), tag.value]).join(",")
-}
+  data.value.tags = compact([...data.value.tags.split(","), tag.value]).join(
+    ","
+  );
+};
 
 const removeJob = (item) => {
-  ElMessageBox.confirm(
-      '此操作将会删除任务相关文件，继续操作码?',
-      '删除提示',
-      {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'warning',
-      }
-  ).then(() => {
-    httpGet("/api/suno/remove", {id: item.id}).then(() => {
-      ElMessage.success("任务删除成功")
-      fetchData()
-    }).catch(e => {
-      ElMessage.error("任务删除失败：" + e.message)
-    })
-  }).catch(() => {
+  ElMessageBox.confirm("此操作将会删除任务相关文件，继续操作码?", "删除提示", {
+    confirmButtonText: "确认",
+    cancelButtonText: "取消",
+    type: "warning"
   })
-}
+    .then(() => {
+      httpGet("/api/suno/remove", { id: item.id })
+        .then(() => {
+          ElMessage.success("任务删除成功");
+          fetchData();
+        })
+        .catch((e) => {
+          ElMessage.error("任务删除失败：" + e.message);
+        });
+    })
+    .catch(() => {});
+};
 
 const publishJob = (item) => {
-  httpGet("/api/suno/publish", {id: item.id, publish:item.publish}).then(() => {
-    ElMessage.success("操作成功")
-  }).catch(e => {
-    ElMessage.error("操作失败：" + e.message)
-  })
-}
+  httpGet("/api/suno/publish", { id: item.id, publish: item.publish })
+    .then(() => {
+      ElMessage.success("操作成功");
+    })
+    .catch((e) => {
+      ElMessage.error("操作失败：" + e.message);
+    });
+};
 
 const getShareURL = (item) => {
-  return `${location.protocol}//${location.host}/song/${item.song_id}`
-}
+  return `${location.protocol}//${location.host}/song/${item.song_id}`;
+};
 
 const uploadCover = (file) => {
   // 压缩图片并上传
@@ -594,39 +721,42 @@ const uploadCover = (file) => {
     quality: 0.6,
     success(result) {
       const formData = new FormData();
-      formData.append('file', result, result.name);
+      formData.append("file", result, result.name);
       // 执行上传操作
-      httpPost('/api/upload', formData).then((res) => {
-        editData.value.cover = res.data.url
-        ElMessage.success({message: "上传成功", duration: 500})
-      }).catch((e) => {
-        ElMessage.error('图片上传失败:' + e.message)
-      })
+      httpPost("/api/upload", formData)
+        .then((res) => {
+          editData.value.cover = res.data.url;
+          ElMessage.success({ message: "上传成功", duration: 500 });
+        })
+        .catch((e) => {
+          ElMessage.error("图片上传失败:" + e.message);
+        });
     },
     error(err) {
       console.log(err.message);
-    },
+    }
   });
-}
+};
 
-const isGenerating = ref(false)
+const isGenerating = ref(false);
 const createLyric = () => {
   if (data.value.lyrics === "") {
-    return showMessageError("请输入歌词描述")
+    return showMessageError("请输入歌词描述");
   }
-  isGenerating.value = true
-  httpPost("/api/prompt/lyric", {prompt: data.value.lyrics}).then(res => {
-    const lines = res.data.split('\n');
-    data.value.title = lines.shift().replace(/\*/g,"")
-    lines.shift()
-    data.value.lyrics = lines.join('\n');
-    isGenerating.value = false
-  }).catch(e => {
-    showMessageError("歌词生成失败："+e.message)
-    isGenerating.value = false
-  })
-}
-
+  isGenerating.value = true;
+  httpPost("/api/prompt/lyric", { prompt: data.value.lyrics })
+    .then((res) => {
+      const lines = res.data.split("\n");
+      data.value.title = lines.shift().replace(/\*/g, "");
+      lines.shift();
+      data.value.lyrics = lines.join("\n");
+      isGenerating.value = false;
+    })
+    .catch((e) => {
+      showMessageError("歌词生成失败：" + e.message);
+      isGenerating.value = false;
+    });
+};
 </script>
 
 <style lang="stylus" scoped>
diff --git a/web/src/views/admin/Apps.vue b/web/src/views/admin/Apps.vue
index f4f49450..d45c145f 100644
--- a/web/src/views/admin/Apps.vue
+++ b/web/src/views/admin/Apps.vue
@@ -9,8 +9,8 @@
           <template #default="props">
             <div>
               <el-table :data="props.row.context" :border="childBorder">
-                <el-table-column label="对话应用" prop="role" width="120"/>
-                <el-table-column label="对话内容" prop="content"/>
+                <el-table-column label="对话应用" prop="role" width="120" />
+                <el-table-column label="对话内容" prop="content" />
               </el-table>
             </div>
           </template>
@@ -23,24 +23,39 @@
             </span>
           </template>
         </el-table-column>
-        <el-table-column label="应用类型" prop="type_name"/>
-        <el-table-column label="应用标识" prop="key"/>
-        <el-table-column label="绑定模型" prop="model_name"/>
+        <el-table-column label="应用类型" prop="type_name" />
+        <el-table-column label="应用标识" prop="key" />
+        <el-table-column label="绑定模型" prop="model_name" />
         <el-table-column label="启用状态">
           <template #default="scope">
-            <el-switch v-model="scope.row['enable']" @change="roleSet('enable',scope.row)"/>
+            <el-switch
+              v-model="scope.row['enable']"
+              @change="roleSet('enable', scope.row)"
+            />
           </template>
         </el-table-column>
         <el-table-column label="应用图标" prop="icon">
           <template #default="scope">
-            <el-image :src="scope.row.icon" style="width: 45px; height: 45px; border-radius: 50%"/>
+            <el-image
+              :src="scope.row.icon"
+              style="width: 45px; height: 45px; border-radius: 50%"
+            />
           </template>
         </el-table-column>
-        <el-table-column label="打招呼信息" prop="hello_msg"/>
+        <el-table-column label="打招呼信息" prop="hello_msg" />
         <el-table-column label="操作" width="150">
           <template #default="scope">
-            <el-button size="small" type="primary" @click="rowEdit(scope.$index, scope.row)">编辑</el-button>
-            <el-popconfirm title="确定要删除当前应用吗?" @confirm="removeRole(scope.row)" :width="200">
+            <el-button
+              size="small"
+              type="primary"
+              @click="rowEdit(scope.$index, scope.row)"
+              >编辑</el-button
+            >
+            <el-popconfirm
+              title="确定要删除当前应用吗?"
+              @confirm="removeRole(scope.row)"
+              :width="200"
+            >
               <template #reference>
                 <el-button size="small" type="danger">删除</el-button>
               </template>
@@ -51,48 +66,48 @@
     </el-row>
 
     <el-dialog
-        v-model="showDialog"
-        :title="optTitle"
-        :close-on-click-modal="false"
-        width="50%"
+      v-model="showDialog"
+      :title="optTitle"
+      :close-on-click-modal="false"
+      width="50%"
     >
-      <el-form :model="role" label-width="120px" ref="formRef" label-position="left" :rules="rules">
+      <el-form
+        :model="role"
+        label-width="120px"
+        ref="formRef"
+        label-position="left"
+        :rules="rules"
+      >
         <el-form-item label="应用名称：" prop="name">
-          <el-input
-              v-model="role.name"
-              autocomplete="off"
-          />
+          <el-input v-model="role.name" autocomplete="off" />
         </el-form-item>
         <el-form-item label="应用分类：" prop="tid">
           <el-select
-              v-model="role.tid"
-              filterable
-              placeholder="请选择分类"
-              clearable
+            v-model="role.tid"
+            filterable
+            placeholder="请选择分类"
+            clearable
           >
             <el-option
-                v-for="item in appTypes"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
+              v-for="item in appTypes"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
             />
           </el-select>
         </el-form-item>
 
         <el-form-item label="应用标志：" prop="key">
-          <el-input
-              v-model="role.key"
-              autocomplete="off"
-          />
+          <el-input v-model="role.key" autocomplete="off" />
         </el-form-item>
 
         <el-form-item label="应用图标：" prop="icon">
           <el-input v-model="role.icon">
             <template #append>
               <el-upload
-                  :auto-upload="true"
-                  :show-file-list="false"
-                  :http-request="uploadImg"
+                :auto-upload="true"
+                :show-file-list="false"
+                :http-request="uploadImg"
               >
                 上传
               </el-upload>
@@ -102,25 +117,22 @@
 
         <el-form-item label="绑定模型：" prop="model_id">
           <el-select
-              v-model="role.model_id"
-              filterable
-              placeholder="请选择模型"
-              clearable
+            v-model="role.model_id"
+            filterable
+            placeholder="请选择模型"
+            clearable
           >
             <el-option
-                v-for="item in models"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
+              v-for="item in models"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
             />
           </el-select>
         </el-form-item>
 
         <el-form-item label="打招呼信息：" prop="hello_msg">
-          <el-input
-              v-model="role.hello_msg"
-              autocomplete="off"
-          />
+          <el-input v-model="role.hello_msg" autocomplete="off" />
         </el-form-item>
 
         <el-form-item label="上下文信息：" prop="context">
@@ -130,10 +142,10 @@
                 <template #default="scope">
                   <el-select v-model="scope.row.role" placeholder="Role">
                     <el-option
-                        v-for="value in messageRoles"
-                        :key="value"
-                        :label="value"
-                        :value="value"
+                      v-for="value in messageRoles"
+                      :key="value"
+                      :label="value"
+                      :value="value"
                     />
                   </el-select>
                 </template>
@@ -143,12 +155,16 @@
                   <div class="context-msg-key">
                     <span>对话内容</span>
                     <span class="fr">
-                      <el-button type="primary" @click="addContext" size="small">
-                      <el-icon>
-                        <Plus/>
-                      </el-icon>
-                      增加一行
-                    </el-button>
+                      <el-button
+                        type="primary"
+                        @click="addContext"
+                        size="small"
+                      >
+                        <el-icon>
+                          <Plus />
+                        </el-icon>
+                        增加一行
+                      </el-button>
                     </span>
                   </div>
                 </template>
@@ -156,35 +172,58 @@
                 <template #default="scope">
                   <div class="context-msg-content">
                     <el-input
-                        type="textarea"
-                        :rows="3"
-                        v-model="scope.row.content"
-                        autocomplete="off"
-                        v-loading="isGenerating"
+                      type="textarea"
+                      :rows="3"
+                      v-model="scope.row.content"
+                      autocomplete="off"
+                      v-loading="isGenerating"
                     />
                     <span class="remove-item">
-                      <el-tooltip effect="dark" content="删除当前行" placement="right">
+                      <el-tooltip
+                        effect="dark"
+                        content="删除当前行"
+                        placement="right"
+                      >
                         <el-button circle type="danger" size="small">
-                          <el-icon @click="removeContext(scope.$index)"><Delete /></el-icon>
+                          <el-icon @click="removeContext(scope.$index)"
+                            ><Delete
+                          /></el-icon>
                         </el-button>
                       </el-tooltip>
 
-                      <el-popover placement="right" :width="400" trigger="click">
+                      <el-popover
+                        placement="right"
+                        :width="400"
+                        trigger="click"
+                      >
                         <template #reference>
-                          <el-button type="primary" circle size="small" class="icon-btn">
+                          <el-button
+                            type="primary"
+                            circle
+                            size="small"
+                            class="icon-btn"
+                          >
                             <i class="iconfont icon-linggan"></i>
                           </el-button>
                         </template>
                         <el-input
-                            type="textarea"
-                            :rows="3"
-                            v-model="metaPrompt"
-                            autocomplete="off"
-                            placeholder="请您输入要 AI实现的目标，任务或者需要AI扮演的角色？"
+                          type="textarea"
+                          :rows="3"
+                          v-model="metaPrompt"
+                          autocomplete="off"
+                          placeholder="请您输入要 AI实现的目标，任务或者需要AI扮演的角色？"
                         />
                         <el-row class="text-line">
-                           <el-text class="mx-1" type="info" size="small">使用 AI 生成 System 预设指令</el-text>
-                          <el-button class="generate-btn" size="small" @click="generatePrompt(scope.row)" color="#5865f2" :disabled="isGenerating">
+                          <el-text type="info" size="small"
+                            >使用 AI 生成 System 预设指令</el-text
+                          >
+                          <el-button
+                            class="generate-btn"
+                            size="small"
+                            @click="generatePrompt(scope.row)"
+                            color="#5865f2"
+                            :disabled="isGenerating"
+                          >
                             <i class="iconfont icon-chuangzuo"></i>
                             <span>立即生成</span>
                           </el-button>
@@ -199,175 +238,195 @@
         </el-form-item>
 
         <el-form-item label="启用状态">
-          <el-switch v-model="role.enable"/>
+          <el-switch v-model="role.enable" />
         </el-form-item>
       </el-form>
 
       <template #footer>
-            <span class="dialog-footer">
-              <el-button @click="showDialog = false">取消</el-button>
-              <el-button type="primary" @click="save">保存</el-button>
-            </span>
+        <span class="dialog-footer">
+          <el-button @click="showDialog = false">取消</el-button>
+          <el-button type="primary" @click="save">保存</el-button>
+        </span>
       </template>
     </el-dialog>
   </div>
 </template>
 
 <script setup>
-
-import {Delete, Plus} from "@element-plus/icons-vue";
-import {onMounted, reactive, ref} from "vue";
-import {httpGet, httpPost} from "@/utils/http";
-import {ElMessage} from "element-plus";
-import {copyObj, removeArrayItem} from "@/utils/libs";
-import {Sortable} from "sortablejs"
+import { Delete, Plus } from "@element-plus/icons-vue";
+import { onMounted, reactive, ref } from "vue";
+import { httpGet, httpPost } from "@/utils/http";
+import { ElMessage } from "element-plus";
+import { copyObj, removeArrayItem } from "@/utils/libs";
+import { Sortable } from "sortablejs";
 import Compressor from "compressorjs";
-import {showMessageError} from "@/utils/dialog";
+import { showMessageError } from "@/utils/dialog";
 
-const showDialog = ref(false)
-const parentBorder = ref(true)
-const childBorder = ref(true)
-const tableData = ref([])
-const sortedTableData = ref([])
-const role = ref({context: []})
-const formRef = ref(null)
-const optTitle = ref("")
-const loading = ref(true)
+const showDialog = ref(false);
+const parentBorder = ref(true);
+const childBorder = ref(true);
+const tableData = ref([]);
+const sortedTableData = ref([]);
+const role = ref({ context: [] });
+const formRef = ref(null);
+const optTitle = ref("");
+const loading = ref(true);
 
 const rules = reactive({
-  name: [{required: true, message: '请输入用户名', trigger: 'blur',}],
-  key: [{required: true, message: '请输入应用标识', trigger: 'blur',}],
-  icon: [{required: true, message: '请输入应用图标', trigger: 'blur',}],
+  name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
+  key: [{ required: true, message: "请输入应用标识", trigger: "blur" }],
+  icon: [{ required: true, message: "请输入应用图标", trigger: "blur" }],
   sort: [
-    {required: true, message: '请输入排序数字', trigger: 'blur'},
-    {type: 'number', message: '请输入有效数字'},
+    { required: true, message: "请输入排序数字", trigger: "blur" },
+    { type: "number", message: "请输入有效数字" }
   ],
-  hello_msg: [{required: true, message: '请输入打招呼信息', trigger: 'change',}]
-})
+  hello_msg: [
+    { required: true, message: "请输入打招呼信息", trigger: "change" }
+  ]
+});
 
-const appTypes = ref([])
-const models = ref([])
-const messageRoles = ref(["system", "user", "assistant"])
+const appTypes = ref([]);
+const models = ref([]);
+const messageRoles = ref(["system", "user", "assistant"]);
 onMounted(() => {
-  fetchData()
+  fetchData();
 
   // get chat models
-  httpGet('/api/admin/model/list?enable=1').then((res) => {
-    models.value = res.data
-  }).catch(() => {
-    ElMessage.error("获取AI模型数据失败");
-  })
+  httpGet("/api/admin/model/list?enable=1")
+    .then((res) => {
+      models.value = res.data;
+    })
+    .catch(() => {
+      ElMessage.error("获取AI模型数据失败");
+    });
 
   // get app type
-  httpGet('/api/admin/app/type/list?enable=1').then((res) => {
-    appTypes.value = res.data
-  }).catch(() => {
-    ElMessage.error("获取应用分类数据失败");
-  })
-
-})
+  httpGet("/api/admin/app/type/list?enable=1")
+    .then((res) => {
+      appTypes.value = res.data;
+    })
+    .catch(() => {
+      ElMessage.error("获取应用分类数据失败");
+    });
+});
 
 const fetchData = () => {
   // 获取应用列表
-  httpGet('/api/admin/role/list').then((res) => {
-    // 初始化数据
-    // const arr = res.data;
-    // for (let i = 0; i < arr.length; i++) {
-    //   if(arr[i].model_id == 0){
-    //     arr[i].model_id = ''
-    //   }
-    // }
-    tableData.value = res.data
-    sortedTableData.value = copyObj(tableData.value)
-    loading.value = false
-  }).catch(() => {
-    ElMessage.error("获取聊天应用失败");
-  })
+  httpGet("/api/admin/role/list")
+    .then((res) => {
+      // 初始化数据
+      // const arr = res.data;
+      // for (let i = 0; i < arr.length; i++) {
+      //   if(arr[i].model_id == 0){
+      //     arr[i].model_id = ''
+      //   }
+      // }
+      tableData.value = res.data;
+      sortedTableData.value = copyObj(tableData.value);
+      loading.value = false;
+    })
+    .catch(() => {
+      ElMessage.error("获取聊天应用失败");
+    });
 
-  const drawBodyWrapper = document.querySelector('.el-table__body tbody')
+  const drawBodyWrapper = document.querySelector(".el-table__body tbody");
   // 初始化拖动排序插件
   Sortable.create(drawBodyWrapper, {
     sort: true,
     animation: 500,
-    onEnd({newIndex, oldIndex, from}) {
+    onEnd({ newIndex, oldIndex, from }) {
       if (oldIndex === newIndex) {
-        return
+        return;
       }
 
-      const sortedData = Array.from(from.children).map(row => row.querySelector('.sort').getAttribute('data-id'));
-      const ids = []
-      const sorts = []
+      const sortedData = Array.from(from.children).map((row) =>
+        row.querySelector(".sort").getAttribute("data-id")
+      );
+      const ids = [];
+      const sorts = [];
       sortedData.forEach((id, index) => {
-        ids.push(parseInt(id))
-        sorts.push(index+1)
-        tableData.value[index].sort_num = index + 1
-      })
+        ids.push(parseInt(id));
+        sorts.push(index + 1);
+        tableData.value[index].sort_num = index + 1;
+      });
 
-      httpPost("/api/admin/role/sort", {ids: ids, sorts: sorts}).catch(e => {
-        ElMessage.error("排序失败：" + e.message)
-      })
+      httpPost("/api/admin/role/sort", { ids: ids, sorts: sorts }).catch(
+        (e) => {
+          ElMessage.error("排序失败：" + e.message);
+        }
+      );
     }
-  })
-}
+  });
+};
 
 const roleSet = (filed, row) => {
-  httpPost('/api/admin/role/set', {id: row.id, filed: filed, value: row[filed]}).then(() => {
-    ElMessage.success("操作成功！")
-  }).catch(e => {
-    ElMessage.error("操作失败：" + e.message)
+  httpPost("/api/admin/role/set", {
+    id: row.id,
+    filed: filed,
+    value: row[filed]
   })
-}
+    .then(() => {
+      ElMessage.success("操作成功！");
+    })
+    .catch((e) => {
+      ElMessage.error("操作失败：" + e.message);
+    });
+};
 
 // 编辑
-const curIndex = ref(0)
+const curIndex = ref(0);
 const rowEdit = function (index, row) {
-  optTitle.value = "修改应用"
-  curIndex.value = index
-  role.value = copyObj(row)
-  showDialog.value = true
-}
+  optTitle.value = "修改应用";
+  curIndex.value = index;
+  role.value = copyObj(row);
+  showDialog.value = true;
+};
 
 const addRole = function () {
-  optTitle.value = "添加新应用"
-  role.value = {context: []}
-  showDialog.value = true
-}
+  optTitle.value = "添加新应用";
+  role.value = { context: [] };
+  showDialog.value = true;
+};
 
 const save = function () {
   formRef.value.validate((valid) => {
     if (valid) {
-      showDialog.value = false
-      httpPost('/api/admin/role/save', role.value).then(() => {
-        ElMessage.success('操作成功')
-        fetchData()
-      }).catch((e) => {
-        ElMessage.error('操作失败，' + e.message)
-      })
+      showDialog.value = false;
+      httpPost("/api/admin/role/save", role.value)
+        .then(() => {
+          ElMessage.success("操作成功");
+          fetchData();
+        })
+        .catch((e) => {
+          ElMessage.error("操作失败，" + e.message);
+        });
     }
-  })
-}
+  });
+};
 
 const removeRole = function (row) {
-  httpGet('/api/admin/role/remove?id=' + row.id).then(() => {
-    ElMessage.success("删除成功！")
-    tableData.value = removeArrayItem(tableData.value, row, (v1, v2) => {
-      return v1.id === v2.id
+  httpGet("/api/admin/role/remove?id=" + row.id)
+    .then(() => {
+      ElMessage.success("删除成功！");
+      tableData.value = removeArrayItem(tableData.value, row, (v1, v2) => {
+        return v1.id === v2.id;
+      });
     })
-  }).catch(() => {
-    ElMessage.error("删除失败！")
-  })
-}
+    .catch(() => {
+      ElMessage.error("删除失败！");
+    });
+};
 
 const addContext = function () {
   if (!role.value.context) {
-    role.value.context = []
+    role.value.context = [];
   }
-  role.value.context.push({role: '', content: ''})
-}
+  role.value.context.push({ role: "", content: "" });
+};
 
 const removeContext = function (index) {
   role.value.context.splice(index, 1);
-}
+};
 
 // 图片上传
 const uploadImg = (file) => {
@@ -376,36 +435,40 @@ const uploadImg = (file) => {
     quality: 0.6,
     success(result) {
       const formData = new FormData();
-      formData.append('file', result, result.name);
+      formData.append("file", result, result.name);
       // 执行上传操作
-      httpPost('/api/admin/upload', formData).then((res) => {
-        role.value.icon = res.data.url
-        ElMessage.success('上传成功')
-      }).catch((e) => {
-        ElMessage.error('上传失败:' + e.message)
-      })
+      httpPost("/api/admin/upload", formData)
+        .then((res) => {
+          role.value.icon = res.data.url;
+          ElMessage.success("上传成功");
+        })
+        .catch((e) => {
+          ElMessage.error("上传失败:" + e.message);
+        });
     },
     error(e) {
-      ElMessage.error('上传失败:' + e.message)
-    },
+      ElMessage.error("上传失败:" + e.message);
+    }
   });
-}
+};
 
-const isGenerating = ref(false)
-const metaPrompt = ref("")
+const isGenerating = ref(false);
+const metaPrompt = ref("");
 const generatePrompt = (row) => {
   if (metaPrompt.value === "") {
-    return showMessageError("请输入元提示词")
+    return showMessageError("请输入元提示词");
   }
-  isGenerating.value = true
-  httpPost("/api/prompt/meta", {prompt: metaPrompt.value}).then(res => {
-    row.content = res.data
-    isGenerating.value = false
-  }).catch(e => {
-    showMessageError("生成失败："+e.message)
-    isGenerating.value = false
-  })
-}
+  isGenerating.value = true;
+  httpPost("/api/prompt/meta", { prompt: metaPrompt.value })
+    .then((res) => {
+      row.content = res.data;
+      isGenerating.value = false;
+    })
+    .catch((e) => {
+      showMessageError("生成失败：" + e.message);
+      isGenerating.value = false;
+    });
+};
 </script>
 
 <style lang="stylus" scoped>
@@ -488,4 +551,4 @@ const generatePrompt = (row) => {
     font-size 14px
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/web/src/views/admin/ChatList.vue b/web/src/views/admin/ChatList.vue
index 119b9a7b..f3e630da 100644
--- a/web/src/views/admin/ChatList.vue
+++ b/web/src/views/admin/ChatList.vue
@@ -3,29 +3,48 @@
     <el-tabs v-model="activeName" @tab-change="handleChange">
       <el-tab-pane label="对话列表" name="chat" v-loading="data.chat.loading">
         <div class="handle-box">
-          <el-input v-model.number="data.chat.query.user_id" placeholder="账户ID" class="handle-input mr10"
-                    @keyup="searchChat($event)"></el-input>
-          <el-input v-model="data.chat.query.title" placeholder="对话标题" class="handle-input mr10"
-                    @keyup="searchChat($event)"></el-input>
+          <el-input
+            v-model.number="data.chat.query.user_id"
+            placeholder="账户ID"
+            class="handle-input mr10"
+            @keyup="searchChat($event)"
+          ></el-input>
+          <el-input
+            v-model="data.chat.query.title"
+            placeholder="对话标题"
+            class="handle-input mr10"
+            @keyup="searchChat($event)"
+          ></el-input>
           <el-date-picker
-              v-model="data.chat.query.created_at"
-              type="daterange"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              format="YYYY-MM-DD"
-              value-format="YYYY-MM-DD"
-              style="margin-right: 10px;width: 200px; position: relative;top:3px;"
+            v-model="data.chat.query.created_at"
+            type="daterange"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
+            style="
+              margin-right: 10px;
+              width: 200px;
+              position: relative;
+              top: 3px;
+            "
           />
-          <el-button type="primary" :icon="Search" @click="fetchChatData">搜索</el-button>
+          <el-button type="primary" :icon="Search" @click="fetchChatData"
+            >搜索</el-button
+          >
         </div>
 
         <el-row>
-          <el-table :data="data.chat.items" :row-key="row => row.id" table-layout="auto">
-            <el-table-column prop="user_id" label="账户ID"/>
-            <el-table-column prop="username" label="账户"/>
+          <el-table
+            :data="data.chat.items"
+            :row-key="(row) => row.id"
+            table-layout="auto"
+          >
+            <el-table-column prop="user_id" label="账户ID" />
+            <el-table-column prop="username" label="账户" />
             <el-table-column label="图标">
               <template #default="scope">
-                <el-avatar :size="30" :src="scope.row.role.icon"/>
+                <el-avatar :size="30" :src="scope.row.role.icon" />
               </template>
             </el-table-column>
             <el-table-column label="角色">
@@ -33,21 +52,29 @@
                 <span>{{ scope.row.role.name }}</span>
               </template>
             </el-table-column>
-            <el-table-column prop="model" label="模型"/>
-            <el-table-column prop="title" label="标题"/>
-            <el-table-column prop="msg_num" label="消息数量"/>
-            <el-table-column prop="token" label="消耗算力"/>
+            <el-table-column prop="model" label="模型" />
+            <el-table-column prop="title" label="标题" />
+            <el-table-column prop="msg_num" label="消息数量" />
+            <el-table-column prop="token" label="消耗算力" />
 
             <el-table-column label="创建时间">
               <template #default="scope">
-                <span>{{ dateFormat(scope.row['created_at']) }}</span>
+                <span>{{ dateFormat(scope.row["created_at"]) }}</span>
               </template>
             </el-table-column>
 
             <el-table-column label="操作" width="180">
               <template #default="scope">
-                <el-button size="small" type="primary" @click="showMessages(scope.row)">查看</el-button>
-                <el-popconfirm title="确定要删除当前记录吗?" @confirm="removeChat(scope.row)">
+                <el-button
+                  size="small"
+                  type="primary"
+                  @click="showMessages(scope.row)"
+                  >查看</el-button
+                >
+                <el-popconfirm
+                  title="确定要删除当前记录吗?"
+                  @confirm="removeChat(scope.row)"
+                >
                   <template #reference>
                     <el-button size="small" type="danger">删除</el-button>
                   </template>
@@ -58,67 +85,104 @@
         </el-row>
 
         <div class="pagination">
-          <el-pagination v-if="data.chat.total > 0" background
-                         layout="total,prev, pager, next"
-                         :hide-on-single-page="true"
-                         v-model:current-page="data.chat.page"
-                         v-model:page-size="data.chat.pageSize"
-                         @current-change="fetchChatData()"
-                         :total="data.chat.total"/>
-
+          <el-pagination
+            v-if="data.chat.total > 0"
+            background
+            layout="total,prev, pager, next"
+            :hide-on-single-page="true"
+            v-model:current-page="data.chat.page"
+            v-model:page-size="data.chat.pageSize"
+            @current-change="fetchChatData()"
+            :total="data.chat.total"
+          />
         </div>
       </el-tab-pane>
       <el-tab-pane label="消息记录" name="message">
         <div class="handle-box">
-          <el-input v-model.number="data.message.query.user_id" placeholder="账户ID" class="handle-input mr10"
-                    @keyup="searchMessage($event)"></el-input>
-          <el-input v-model="data.message.query.content" placeholder="消息内容" class="handle-input mr10"
-                    @keyup="searchMessage($event)"></el-input>
-          <el-input v-model="data.message.query.model" placeholder="模型" class="handle-input mr10"
-                    @keyup="searchMessage($event)"></el-input>
+          <el-input
+            v-model.number="data.message.query.user_id"
+            placeholder="账户ID"
+            class="handle-input mr10"
+            @keyup="searchMessage($event)"
+          ></el-input>
+          <el-input
+            v-model="data.message.query.content"
+            placeholder="消息内容"
+            class="handle-input mr10"
+            @keyup="searchMessage($event)"
+          ></el-input>
+          <el-input
+            v-model="data.message.query.model"
+            placeholder="模型"
+            class="handle-input mr10"
+            @keyup="searchMessage($event)"
+          ></el-input>
           <el-date-picker
-              v-model="data.message.query.created_at"
-              type="daterange"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              format="YYYY-MM-DD"
-              value-format="YYYY-MM-DD"
-              style="margin-right: 10px;width: 200px; position: relative;top:3px;"
+            v-model="data.message.query.created_at"
+            type="daterange"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
+            style="
+              margin-right: 10px;
+              width: 200px;
+              position: relative;
+              top: 3px;
+            "
           />
-          <el-button type="primary" :icon="Search" @click="fetchMessageData">搜索</el-button>
+          <el-button type="primary" :icon="Search" @click="fetchMessageData"
+            >搜索</el-button
+          >
         </div>
 
         <el-row>
-          <el-table :data="data.message.items" :row-key="row => row.id" table-layout="auto">
-            <el-table-column prop="user_id" label="账户ID"/>
-            <el-table-column prop="username" label="账户"/>
+          <el-table
+            :data="data.message.items"
+            :row-key="(row) => row.id"
+            table-layout="auto"
+          >
+            <el-table-column prop="user_id" label="账户ID" />
+            <el-table-column prop="username" label="账户" />
             <el-table-column label="角色">
               <template #default="scope">
-                <el-avatar :size="30" :src="scope.row.icon"/>
+                <el-avatar :size="30" :src="scope.row.icon" />
               </template>
             </el-table-column>
-            <el-table-column prop="model" label="模型"/>
+            <el-table-column prop="model" label="模型" />
 
             <el-table-column label="消息内容">
               <template #default="scope">
-                <el-text style="width: 200px" truncated @click="showContent(scope.row.content)">
+                <el-text
+                  style="width: 200px"
+                  truncated
+                  @click="showContent(scope.row.content)"
+                >
                   {{ scope.row.content }}
                 </el-text>
               </template>
             </el-table-column>
 
-            <el-table-column prop="token" label="算力"/>
+            <el-table-column prop="token" label="算力" />
 
             <el-table-column label="创建时间">
               <template #default="scope">
-                <span>{{ dateFormat(scope.row['created_at']) }}</span>
+                <span>{{ dateFormat(scope.row["created_at"]) }}</span>
               </template>
             </el-table-column>
 
             <el-table-column label="操作" width="180">
               <template #default="scope">
-                <el-button size="small" type="primary" @click="showContent(scope.row.content)">查看</el-button>
-                <el-popconfirm title="确定要删除当前记录吗?" @confirm="removeMessage(scope.row)">
+                <el-button
+                  size="small"
+                  type="primary"
+                  @click="showContent(scope.row.content)"
+                  >查看</el-button
+                >
+                <el-popconfirm
+                  title="确定要删除当前记录吗?"
+                  @confirm="removeMessage(scope.row)"
+                >
                   <template #reference>
                     <el-button size="small" type="danger">删除</el-button>
                   </template>
@@ -129,24 +193,25 @@
         </el-row>
 
         <div class="pagination">
-          <el-pagination v-if="data.message.total > 0" background
-                         layout="total,prev, pager, next"
-                         :hide-on-single-page="true"
-                         v-model:current-page="data.message.page"
-                         v-model:page-size="data.message.pageSize"
-                         @current-change="fetchMessageData()"
-                         :total="data.message.total"/>
-
+          <el-pagination
+            v-if="data.message.total > 0"
+            background
+            layout="total,prev, pager, next"
+            :hide-on-single-page="true"
+            v-model:current-page="data.message.page"
+            v-model:page-size="data.message.pageSize"
+            @current-change="fetchMessageData()"
+            :total="data.message.total"
+          />
         </div>
       </el-tab-pane>
     </el-tabs>
 
-
     <el-dialog
-        v-model="showContentDialog"
-        title="消息详情"
-        class="chat-dialog"
-        style="--el-dialog-width:60%"
+      v-model="showContentDialog"
+      title="消息详情"
+      class="chat-dialog"
+      style="--el-dialog-width: 60%"
     >
       <div class="chat-detail">
         <div class="chat-line" v-html="dialogContent"></div>
@@ -154,138 +219,147 @@
     </el-dialog>
 
     <el-dialog
-        v-model="showChatItemDialog"
-        title="对话详情"
-        class="chat-dialog"
-        style="--el-dialog-width:60%"
+      v-model="showChatItemDialog"
+      title="对话详情"
+      class="chat-dialog"
+      style="--el-dialog-width: 60%"
     >
       <div class="chat-box chat-page">
         <div v-for="item in messages" :key="item.id">
-          <chat-prompt
-              v-if="item.type==='prompt'"
-              :data="item"/>
-          <chat-reply v-else-if="item.type==='reply'"
-                      :read-only="true"
-                      :data="item"/>
+          <chat-prompt v-if="item.type === 'prompt'" :data="item" />
+          <chat-reply
+            v-else-if="item.type === 'reply'"
+            :read-only="true"
+            :data="item"
+          />
         </div>
-      </div><!-- end chat box -->
+      </div>
+      <!-- end chat box -->
     </el-dialog>
   </div>
 </template>
 
 <script setup>
-import {onMounted, ref} from "vue";
-import {httpGet, httpPost} from "@/utils/http";
-import {ElMessage} from "element-plus";
-import {dateFormat, processContent} from "@/utils/libs";
-import {Search} from "@element-plus/icons-vue";
-import 'highlight.js/styles/a11y-dark.css'
+import { onMounted, ref } from "vue";
+import { httpGet, httpPost } from "@/utils/http";
+import { ElMessage } from "element-plus";
+import { dateFormat, processContent } from "@/utils/libs";
+import { Search } from "@element-plus/icons-vue";
+import "highlight.js/styles/a11y-dark.css";
 import hl from "highlight.js";
 import ChatPrompt from "@/components/ChatPrompt.vue";
 import ChatReply from "@/components/ChatReply.vue";
 
 // 变量定义
 const data = ref({
-  "chat": {
+  chat: {
     items: [],
-    query: {title: "", created_at: [], page: 1, page_size: 15},
+    query: { title: "", created_at: [], page: 1, page_size: 15 },
     total: 0,
     page: 1,
     pageSize: 15,
     loading: true
   },
-  "message": {
+  message: {
     items: [],
-    query: {title: "", created_at: [], page: 1, page_size: 15},
+    query: { title: "", created_at: [], page: 1, page_size: 15 },
     total: 0,
     page: 1,
     pageSize: 15,
     loading: true
   }
-})
-const activeName = ref("chat")
+});
+const activeName = ref("chat");
 
 onMounted(() => {
-  fetchChatData()
-})
+  fetchChatData();
+});
 
 const handleChange = (tab) => {
   if (tab === "chat") {
-    fetchChatData()
+    fetchChatData();
   } else if (tab === "message") {
-    fetchMessageData()
+    fetchMessageData();
   }
-}
+};
 
 // 搜索对话
 const searchChat = (evt) => {
   if (evt.keyCode === 13) {
-    fetchChatData()
+    fetchChatData();
   }
-}
+};
 
 // 搜索消息
 const searchMessage = (evt) => {
   if (evt.keyCode === 13) {
-    fetchMessageData()
+    fetchMessageData();
   }
-}
+};
 
 // 获取数据
 const fetchChatData = () => {
-  const d = data.value.chat
-  d.query.page = d.page
-  d.query.page_size = d.pageSize
-  httpPost('/api/admin/chat/list', d.query).then((res) => {
-    if (res.data) {
-      d.items = res.data.items
-      d.total = res.data.total
-      d.page = res.data.page
-      d.pageSize = res.data.page_size
-    }
-    d.loading = false
-  }).catch(e => {
-    ElMessage.error("获取数据失败：" + e.message);
-  })
-}
+  const d = data.value.chat;
+  d.query.page = d.page;
+  d.query.page_size = d.pageSize;
+  httpPost("/api/admin/chat/list", d.query)
+    .then((res) => {
+      if (res.data) {
+        d.items = res.data.items;
+        d.total = res.data.total;
+        d.page = res.data.page;
+        d.pageSize = res.data.page_size;
+      }
+      d.loading = false;
+    })
+    .catch((e) => {
+      ElMessage.error("获取数据失败：" + e.message);
+    });
+};
 
 const fetchMessageData = () => {
-  const d = data.value.message
-  d.query.page = d.page
-  d.query.page_size = d.pageSize
-  httpPost('/api/admin/chat/message', d.query).then((res) => {
-    if (res.data) {
-      d.items = res.data.items
-      d.total = res.data.total
-      d.page = res.data.page
-      d.pageSize = res.data.page_size
-    }
-    d.loading = false
-  }).catch(e => {
-    ElMessage.error("获取数据失败：" + e.message);
-  })
-}
+  const d = data.value.message;
+  d.query.page = d.page;
+  d.query.page_size = d.pageSize;
+  httpPost("/api/admin/chat/message", d.query)
+    .then((res) => {
+      if (res.data) {
+        d.items = res.data.items;
+        d.total = res.data.total;
+        d.page = res.data.page;
+        d.pageSize = res.data.page_size;
+      }
+      d.loading = false;
+    })
+    .catch((e) => {
+      ElMessage.error("获取数据失败：" + e.message);
+    });
+};
 
 const removeChat = function (row) {
-  httpGet('/api/admin/chat/remove?chat_id=' + row.chat_id).then(() => {
-    ElMessage.success("删除成功！")
-    fetchChatData()
-  }).catch((e) => {
-    ElMessage.error("删除失败：" + e.message)
-  })
-}
+  httpGet("/api/admin/chat/remove?chat_id=" + row.chat_id)
+    .then(() => {
+      ElMessage.success("删除成功！");
+      fetchChatData();
+    })
+    .catch((e) => {
+      ElMessage.error("删除失败：" + e.message);
+    });
+};
 
 const removeMessage = function (row) {
-  httpGet('/api/admin/chat/message/remove?id=' + row.id).then(() => {
-    ElMessage.success("删除成功！")
-    fetchMessageData()
-  }).catch((e) => {
-    ElMessage.error("删除失败：" + e.message)
-  })
-}
+  httpGet("/api/admin/chat/message/remove?id=" + row.id)
+    .then(() => {
+      ElMessage.success("删除成功！");
+      fetchMessageData();
+    })
+    .catch((e) => {
+      ElMessage.error("删除失败：" + e.message);
+    });
+};
 
-const mathjaxPlugin = require('markdown-it-mathjax3')
-const md = require('markdown-it')({
+const mathjaxPlugin = require("markdown-it-mathjax3");
+const md = require("markdown-it")({
   breaks: true,
   html: true,
   linkify: true,
@@ -293,41 +367,43 @@ const md = require('markdown-it')({
   highlight: function (str, lang) {
     if (lang && hl.getLanguage(lang)) {
       // 处理代码高亮
-      const preCode = hl.highlight(lang, str, true).value
+      const preCode = hl.highlight(lang, str, true).value;
       // 将代码包裹在 pre 中
-      return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code></pre>`
+      return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code></pre>`;
     }
 
     // 处理代码高亮
-    const preCode = md.utils.escapeHtml(str)
+    const preCode = md.utils.escapeHtml(str);
     // 将代码包裹在 pre 中
-    return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code></pre>`
+    return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code></pre>`;
   }
 });
-md.use(mathjaxPlugin)
+md.use(mathjaxPlugin);
 
-const showContentDialog = ref(false)
-const dialogContent = ref("")
+const showContentDialog = ref(false);
+const dialogContent = ref("");
 const showContent = (content) => {
-  showContentDialog.value = true
-  dialogContent.value = md.render(processContent(content))
-}
+  showContentDialog.value = true;
+  dialogContent.value = md.render(processContent(content));
+};
 
-const showChatItemDialog = ref(false)
-const messages = ref([])
+const showChatItemDialog = ref(false);
+const messages = ref([]);
 const showMessages = (row) => {
-  showChatItemDialog.value = true
-  messages.value = []
-  httpGet('/api/admin/chat/history?chat_id=' + row.chat_id).then(res => {
-    const data = res.data
-    for (let i = 0; i < data.length; i++) {
-      messages.value.push(data[i]);
-    }
-  }).catch(e => {
-    // TODO: 显示重新加载按钮
-    ElMessage.error('加载聊天记录失败：' + e.message);
-  })
-}
+  showChatItemDialog.value = true;
+  messages.value = [];
+  httpGet("/api/admin/chat/history?chat_id=" + row.chat_id)
+    .then((res) => {
+      const data = res.data;
+      for (let i = 0; i < data.length; i++) {
+        messages.value.push(data[i]);
+      }
+    })
+    .catch((e) => {
+      // TODO: 显示重新加载按钮
+      ElMessage.error("加载聊天记录失败：" + e.message);
+    });
+};
 </script>
 
 <style lang="stylus" scoped>
diff --git a/web/src/views/admin/ImageList.vue b/web/src/views/admin/ImageList.vue
index 0595ec80..857bf420 100644
--- a/web/src/views/admin/ImageList.vue
+++ b/web/src/views/admin/ImageList.vue
@@ -93,6 +93,7 @@
             <el-pagination v-if="data.mj.total > 0" background
                            layout="total,prev, pager, next"
                            :hide-on-single-page="true"
+                           
                            v-model:current-page="data.mj.page"
                            v-model:page-size="data.mj.pageSize"
                            @current-change="fetchMjData()"
diff --git a/web/src/views/admin/Users.vue b/web/src/views/admin/Users.vue
index 1282ae3a..e170a51e 100644
--- a/web/src/views/admin/Users.vue
+++ b/web/src/views/admin/Users.vue
@@ -1,27 +1,47 @@
 <template>
   <div class="container user-list" v-loading="loading">
     <div class="handle-box">
-      <el-input v-model="query.username" placeholder="账号" class="handle-input mr10"></el-input>
-      <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
-      <el-button type="success" :icon="Plus" @click="addUser">新增用户</el-button>
-      <el-button type="danger" :icon="Delete" @click="multipleDelete">删除</el-button>
+      <el-input
+        v-model="query.username"
+        placeholder="账号"
+        class="handle-input mr10"
+      ></el-input>
+      <el-button type="primary" :icon="Search" @click="handleSearch"
+        >搜索</el-button
+      >
+      <el-button type="success" :icon="Plus" @click="addUser"
+        >新增用户</el-button
+      >
+      <el-button type="danger" :icon="Delete" @click="multipleDelete"
+        >删除</el-button
+      >
     </div>
 
     <el-row>
-      <el-table :data="users.items" border class="table" :row-key="row => row.id"
-                @selection-change="handleSelectionChange" table-layout="auto">
+      <el-table
+        :data="users.items"
+        border
+        class="table"
+        :row-key="(row) => row.id"
+        @selection-change="handleSelectionChange"
+        table-layout="auto"
+      >
         <el-table-column type="selection" width="38"></el-table-column>
-        <el-table-column prop="id" label="ID"/>
+        <el-table-column prop="id" label="ID" />
         <el-table-column label="账号">
           <template #default="scope">
             <span>{{ scope.row.username }}</span>
-            <el-image v-if="scope.row.vip" :src="vipImg" style="height: 20px;position: relative; top:5px; left: 5px"/>
+            <el-image
+              v-if="scope.row.vip"
+              :src="vipImg"
+              style="height: 20px; position: relative; top: 5px; left: 5px"
+            />
           </template>
         </el-table-column>
-        <el-table-column prop="mobile" label="手机"/>
-        <el-table-column prop="email" label="邮箱"/>
-        <el-table-column prop="nickname" label="昵称"/>
-        <el-table-column prop="power" label="剩余算力"/>
+        <el-table-column prop="mobile" label="手机" />
+        <el-table-column prop="email" label="邮箱" />
+        <el-table-column prop="nickname" label="昵称" />
+        <el-table-column prop="power" label="剩余算力" />
         <el-table-column label="状态" width="80">
           <template #default="scope">
             <el-tag v-if="scope.row.status" type="success">正常</el-tag>
@@ -30,337 +50,384 @@
         </el-table-column>
         <el-table-column label="过期时间">
           <template #default="scope">
-            <span v-if="scope.row['expired_time']">{{ scope.row['expired_time'] }}</span>
+            <span v-if="scope.row['expired_time']">{{
+              scope.row["expired_time"]
+            }}</span>
             <el-tag v-else>长期有效</el-tag>
           </template>
         </el-table-column>
 
         <el-table-column label="注册时间">
           <template #default="scope">
-            <span>{{ dateFormat(scope.row['created_at']) }}</span>
+            <span>{{ dateFormat(scope.row["created_at"]) }}</span>
           </template>
         </el-table-column>
 
         <el-table-column fixed="right" label="操作" width="200">
           <template #default="scope">
             <el-button-group class="ml-4">
-              <el-button size="small" type="primary" @click="userEdit(scope.row)">编辑</el-button>
-              <el-button size="small" type="danger" @click="removeUser(scope.row)">删除</el-button>
-              <el-button size="small" type="success" @click="resetPass(scope.row)">重置密码</el-button>
+              <el-button
+                size="small"
+                type="primary"
+                @click="userEdit(scope.row)"
+                >编辑</el-button
+              >
+              <el-button
+                size="small"
+                type="danger"
+                @click="removeUser(scope.row)"
+                >删除</el-button
+              >
+              <el-button
+                size="small"
+                type="success"
+                @click="resetPass(scope.row)"
+                >重置密码</el-button
+              >
             </el-button-group>
           </template>
         </el-table-column>
       </el-table>
 
       <div class="pagination">
-        <el-pagination v-if="users.total > 0"
-                       background
-                       layout="total, prev, pager, next"
-                       v-model:current-page="users.page"
-                       v-model:page-size="users.page_size"
-                       :total="users.total"
-                       @current-change="fetchUserList(users.page, users.page_size)"
+        <el-pagination
+          v-if="users.total > 0"
+          background
+          layout="total, prev, pager, next"
+          v-model:current-page="users.page"
+          v-model:page-size="users.page_size"
+          :total="users.total"
+          @current-change="fetchUserList(users.page, users.page_size)"
         />
-
       </div>
     </el-row>
 
     <el-dialog
-        v-model="showUserEditDialog"
-        :title="title"
-        :close-on-click-modal="false"
-        width="50%"
+      v-model="showUserEditDialog"
+      :title="title"
+      :close-on-click-modal="false"
+      width="50%"
     >
-      <el-form :model="user" label-width="100px" ref="userEditFormRef" :rules="rules">
+      <el-form
+        :model="user"
+        label-width="100px"
+        ref="userEditFormRef"
+        :rules="rules"
+      >
         <el-form-item label="账号：" prop="username">
-          <el-input v-model="user.username" autocomplete="off"/>
+          <el-input v-model="user.username" autocomplete="off" />
         </el-form-item>
         <el-form-item label="手机：" prop="mobile">
-          <el-input v-model="user.mobile" autocomplete="off"/>
+          <el-input v-model="user.mobile" autocomplete="off" />
         </el-form-item>
         <el-form-item label="邮箱：" prop="email">
-          <el-input v-model="user.email" autocomplete="off"/>
+          <el-input v-model="user.email" autocomplete="off" />
         </el-form-item>
         <el-form-item v-if="add" label="密码：" prop="password">
-          <el-input v-model="user.password" autocomplete="off" placeholder="8-16位"/>
+          <el-input
+            v-model="user.password"
+            autocomplete="off"
+            placeholder="8-16位"
+          />
         </el-form-item>
         <el-form-item label="剩余算力：" prop="power">
-          <el-input v-model.number="user.power" autocomplete="off" placeholder="0"/>
+          <el-input
+            v-model.number="user.power"
+            autocomplete="off"
+            placeholder="0"
+          />
         </el-form-item>
 
         <el-form-item label="有效期：" prop="expired_time">
           <el-date-picker
-              v-model="user.expired_time"
-              type="datetime"
-              placeholder="选择日期"
-              format="YYYY-MM-DD HH:mm:ss"
-              value-format="YYYY-MM-DD HH:mm:ss"
-              :disabled-date="disabledDate"
+            v-model="user.expired_time"
+            type="datetime"
+            placeholder="选择日期"
+            format="YYYY-MM-DD HH:mm:ss"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            :disabled-date="disabledDate"
           />
         </el-form-item>
 
         <el-form-item label="聊天角色" prop="chat_roles">
           <el-select
-              v-model="user.chat_roles"
-              multiple
-              :filterable="true"
-              placeholder="选择聊天角色，多选"
+            v-model="user.chat_roles"
+            multiple
+            :filterable="true"
+            placeholder="选择聊天角色，多选"
           >
             <el-option
-                v-for="item in roles"
-                :key="item.key"
-                :label="item.name"
-                :value="item.key"
+              v-for="item in roles"
+              :key="item.key"
+              :label="item.name"
+              :value="item.key"
             />
           </el-select>
         </el-form-item>
 
         <el-form-item label="模型权限" prop="chat_models">
           <el-select
-              v-model="user.chat_models"
-              multiple
-              :filterable="true"
-              placeholder="选择AI模型，多选"
+            v-model="user.chat_models"
+            multiple
+            :filterable="true"
+            placeholder="选择AI模型，多选"
           >
             <el-option
-                v-for="item in models"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
+              v-for="item in models"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
             />
           </el-select>
         </el-form-item>
 
-
         <el-form-item label="启用状态">
-          <el-switch v-model="user.status"/>
+          <el-switch v-model="user.status" />
         </el-form-item>
 
         <el-form-item label="开通VIP">
-          <el-switch v-model="user.vip"/>
+          <el-switch v-model="user.vip" />
         </el-form-item>
       </el-form>
 
       <template #footer>
-            <span class="dialog-footer">
-              <el-button @click="showUserEditDialog = false">取消</el-button>
-              <el-button type="primary" @click="saveUser">提交</el-button>
-            </span>
+        <span class="dialog-footer">
+          <el-button @click="showUserEditDialog = false">取消</el-button>
+          <el-button type="primary" @click="saveUser">提交</el-button>
+        </span>
       </template>
     </el-dialog>
 
-    <el-dialog
-        v-model="showResetPassDialog"
-        title="重置密码"
-        width="50%"
-    >
+    <el-dialog v-model="showResetPassDialog" title="重置密码" width="50%">
       <el-form label-width="100px" ref="userEditFormRef">
         <el-form-item label="账户：">
-          <el-input v-model="pass.username" autocomplete="off" readonly disabled/>
+          <el-input
+            v-model="pass.username"
+            autocomplete="off"
+            readonly
+            disabled
+          />
         </el-form-item>
 
         <el-form-item label="新密码：">
-          <el-input v-model="pass.password" autocomplete="off"/>
+          <el-input v-model="pass.password" autocomplete="off" />
         </el-form-item>
       </el-form>
 
       <template #footer>
-            <span class="dialog-footer">
-              <el-button type="primary" @click="doResetPass">提交</el-button>
-            </span>
+        <span class="dialog-footer">
+          <el-button type="primary" @click="doResetPass">提交</el-button>
+        </span>
       </template>
-
     </el-dialog>
   </div>
 </template>
 
 <script setup>
-import {onMounted, reactive, ref} from "vue";
-import {httpGet, httpPost} from "@/utils/http";
-import {ElMessage, ElMessageBox} from "element-plus";
-import {dateFormat, disabledDate} from "@/utils/libs";
-import {Delete, Plus, Search} from "@element-plus/icons-vue";
+import { onMounted, reactive, ref } from "vue";
+import { httpGet, httpPost } from "@/utils/http";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { dateFormat, disabledDate } from "@/utils/libs";
+import { Delete, Plus, Search } from "@element-plus/icons-vue";
 
 // 变量定义
-const users = ref({page: 1, page_size: 15, items: []})
-const query = ref({username: '', page: 1, page_size: 15})
+const users = ref({ page: 1, page_size: 15, items: [] });
+const query = ref({ username: "", page: 1, page_size: 15 });
 
-const title = ref('添加用户')
-const vipImg = ref("/images/vip.png")
-const add = ref(true)
-const user = ref({chat_roles: [], chat_models: []})
-const pass = ref({username: '', password: '', id: 0})
-const roles = ref([])
-const models = ref([])
-const showUserEditDialog = ref(false)
-const showResetPassDialog = ref(false)
+const title = ref("添加用户");
+const vipImg = ref("/images/menu/member.png");
+const add = ref(true);
+const user = ref({ chat_roles: [], chat_models: [] });
+const pass = ref({ username: "", password: "", id: 0 });
+const roles = ref([]);
+const models = ref([]);
+const showUserEditDialog = ref(false);
+const showResetPassDialog = ref(false);
 const rules = reactive({
-  username: [{required: true, message: '请输入账号', trigger: 'blur',}],
+  username: [{ required: true, message: "请输入账号", trigger: "blur" }],
   password: [
     {
       required: true,
       validator: (rule, value) => {
         return !(value.length > 16 || value.length < 8);
-
-      }, message: '密码必须为8-16',
-      trigger: 'blur'
+      },
+      message: "密码必须为8-16",
+      trigger: "blur"
     }
   ],
   calls: [
-    {required: true, message: '请输入提问次数'},
-    {type: 'number', message: '请输入有效数字'},
+    { required: true, message: "请输入提问次数" },
+    { type: "number", message: "请输入有效数字" }
   ],
-  chat_roles: [{required: true, message: '请选择聊天角色', trigger: 'change'}],
-  chat_models: [{required: true, message: '请选择AI模型', trigger: 'change'}],
-})
-const loading = ref(true)
+  chat_roles: [
+    { required: true, message: "请选择聊天角色", trigger: "change" }
+  ],
+  chat_models: [{ required: true, message: "请选择AI模型", trigger: "change" }]
+});
+const loading = ref(true);
 
-const userEditFormRef = ref(null)
+const userEditFormRef = ref(null);
 
 onMounted(() => {
-  fetchUserList(users.value.page, users.value.page_size)
+  fetchUserList(users.value.page, users.value.page_size);
   // 获取角色列表
-  httpGet('/api/admin/role/list').then((res) => {
-    roles.value = res.data;
-  }).catch(() => {
-    ElMessage.error("获取聊天角色失败");
-  })
+  httpGet("/api/admin/role/list")
+    .then((res) => {
+      roles.value = res.data;
+    })
+    .catch(() => {
+      ElMessage.error("获取聊天角色失败");
+    });
 
-  httpGet('/api/admin/model/list').then(res => {
-    models.value = res.data
-  }).catch(e => {
-    ElMessage.error("获取模型失败：" + e.message)
-  })
-})
+  httpGet("/api/admin/model/list")
+    .then((res) => {
+      models.value = res.data;
+    })
+    .catch((e) => {
+      ElMessage.error("获取模型失败：" + e.message);
+    });
+});
 
 const fetchUserList = function (page, pageSize) {
-  query.value.page = page
-  query.value.page_size = pageSize
-  httpGet('/api/admin/user/list', query.value).then((res) => {
-    if (res.data) {
-      // 初始化数据
-      const arr = res.data.items;
-      for (let i = 0; i < arr.length; i++) {
-        arr[i].expired_time = dateFormat(arr[i].expired_time)
+  query.value.page = page;
+  query.value.page_size = pageSize;
+  httpGet("/api/admin/user/list", query.value)
+    .then((res) => {
+      if (res.data) {
+        // 初始化数据
+        const arr = res.data.items;
+        for (let i = 0; i < arr.length; i++) {
+          arr[i].expired_time = dateFormat(arr[i].expired_time);
+        }
+        users.value.items = arr;
+        users.value.total = res.data.total;
+        users.value.page = res.data.page;
+        user.value.page_size = res.data.page_size;
       }
-      users.value.items = arr
-      users.value.total = res.data.total
-      users.value.page = res.data.page
-      user.value.page_size = res.data.page_size
-    }
-    loading.value = false
-  }).catch(() => {
-    ElMessage.error('加载用户列表失败')
-  })
-}
+      loading.value = false;
+    })
+    .catch(() => {
+      ElMessage.error("加载用户列表失败");
+    });
+};
 
 const handleSearch = () => {
-  fetchUserList(users.value.page, users.value.page_size)
-}
+  fetchUserList(users.value.page, users.value.page_size);
+};
 
 // 删除用户
 const removeUser = function (user) {
   ElMessageBox.confirm(
-      '此操作将会永久删除用户信息和聊天记录，确认操作吗?',
-      '警告',
-      {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-      }
-  ).then(() => {
-    httpGet('/api/admin/user/remove', {id: user.id}).then(() => {
-      ElMessage.success('操作成功！')
-      fetchUserList(users.value.page, users.value.page_size)
-    }).catch((e) => {
-      ElMessage.error('操作失败，' + e.message)
+    "此操作将会永久删除用户信息和聊天记录，确认操作吗?",
+    "警告",
+    {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning"
+    }
+  )
+    .then(() => {
+      httpGet("/api/admin/user/remove", { id: user.id })
+        .then(() => {
+          ElMessage.success("操作成功！");
+          fetchUserList(users.value.page, users.value.page_size);
+        })
+        .catch((e) => {
+          ElMessage.error("操作失败，" + e.message);
+        });
     })
-  }).catch(() => {
-    ElMessage.info('操作被取消')
-  })
-
-}
+    .catch(() => {
+      ElMessage.info("操作被取消");
+    });
+};
 
 const userEdit = function (row) {
-  user.value = row
-  title.value = '编辑用户'
-  showUserEditDialog.value = true
-  add.value = false
-}
+  user.value = row;
+  title.value = "编辑用户";
+  showUserEditDialog.value = true;
+  add.value = false;
+};
 
 const addUser = () => {
-  user.value = {chat_id: 0, chat_roles: [], chat_models: []}
-  title.value = '添加用户'
-  showUserEditDialog.value = true
-  add.value = true
-}
+  user.value = { chat_id: 0, chat_roles: [], chat_models: [] };
+  title.value = "添加用户";
+  showUserEditDialog.value = true;
+  add.value = true;
+};
 
 const saveUser = function () {
   userEditFormRef.value.validate((valid) => {
     if (valid) {
-      showUserEditDialog.value = false
-      console.log(user.value)
-      httpPost('/api/admin/user/save', user.value).then((res) => {
-        ElMessage.success('操作成功！')
-        if (add.value) {
-          users.value.items.push(res.data)
-        }
-      }).catch((e) => {
-        ElMessage.error('操作失败，' + e.message)
-      })
+      showUserEditDialog.value = false;
+      console.log(user.value);
+      httpPost("/api/admin/user/save", user.value)
+        .then((res) => {
+          ElMessage.success("操作成功！");
+          if (add.value) {
+            users.value.items.push(res.data);
+          }
+        })
+        .catch((e) => {
+          ElMessage.error("操作失败，" + e.message);
+        });
     } else {
-      return false
+      return false;
     }
-  })
-}
+  });
+};
 
-const userIds = ref([])
+const userIds = ref([]);
 const handleSelectionChange = function (rows) {
-  userIds.value = []
+  userIds.value = [];
   rows.forEach((row) => {
-    userIds.value.push(row.id)
-  })
-}
+    userIds.value.push(row.id);
+  });
+};
 
 const multipleDelete = function () {
   ElMessageBox.confirm(
-      '此操作将会永久删除用户信息和聊天记录，确认操作吗?',
-      '警告',
-      {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-      }
-  ).then(() => {
-    loading.value = true
-    httpGet('/api/admin/user/remove', {ids: userIds.value}).then(() => {
-      ElMessage.success('操作成功！')
-      fetchUserList(users.value.page, users.value.page_size)
-      loading.value = false
-    }).catch((e) => {
-      ElMessage.error('操作失败，' + e.message)
-      loading.value = false
+    "此操作将会永久删除用户信息和聊天记录，确认操作吗?",
+    "警告",
+    {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning"
+    }
+  )
+    .then(() => {
+      loading.value = true;
+      httpGet("/api/admin/user/remove", { ids: userIds.value })
+        .then(() => {
+          ElMessage.success("操作成功！");
+          fetchUserList(users.value.page, users.value.page_size);
+          loading.value = false;
+        })
+        .catch((e) => {
+          ElMessage.error("操作失败，" + e.message);
+          loading.value = false;
+        });
     })
-  }).catch(() => {
-    ElMessage.info('操作被取消')
-  })
-}
+    .catch(() => {
+      ElMessage.info("操作被取消");
+    });
+};
 
 const resetPass = (row) => {
-  showResetPassDialog.value = true
-  pass.value.id = row.id
-  pass.value.username = row.username
-}
+  showResetPassDialog.value = true;
+  pass.value.id = row.id;
+  pass.value.username = row.username;
+};
 
 const doResetPass = () => {
-  httpPost('/api/admin/user/resetPass', pass.value).then(() => {
-    ElMessage.success('操作成功！')
-    showResetPassDialog.value = false
-  }).catch((e) => {
-    ElMessage.error('操作失败，' + e.message)
-  })
-}
-
+  httpPost("/api/admin/user/resetPass", pass.value)
+    .then(() => {
+      ElMessage.success("操作成功！");
+      showResetPassDialog.value = false;
+    })
+    .catch((e) => {
+      ElMessage.error("操作失败，" + e.message);
+    });
+};
 </script>
 
 <style lang="stylus" scoped>
@@ -398,4 +465,4 @@ const doResetPass = () => {
   }
 
 }
-</style>
\ No newline at end of file
+</style>