From a80d01209c7a642bff8fb7699ec1f1f98681a136 Mon Sep 17 00:00:00 2001 From: RockYang Date: Mon, 16 Oct 2023 10:46:10 +0800 Subject: [PATCH] opt: adjust styles for ItemList component, cut string for chat role's hello message --- README.md | 2 +- api/handler/chat_role_handler.go | 4 +- api/handler/sd_handler.go | 9 +--- api/main.go | 2 +- web/src/assets/css/chat-app.css | 42 ++++++++++++++-- web/src/assets/css/chat-app.styl | 3 -- web/src/assets/css/image-mj.css | 20 ++++++-- web/src/assets/css/image-sd.css | 29 +++++++++-- web/src/assets/css/images-wall.css | 9 ++++ web/src/assets/css/task-list.styl | 11 ++++- web/src/utils/libs.js | 29 +++++++++++ web/src/views/ChatApps.vue | 47 ++++++++++++------ web/src/views/ImageMj.vue | 79 ++++++++++++------------------ web/src/views/ImageSd.vue | 74 +++++++++++----------------- 14 files changed, 221 insertions(+), 139 deletions(-) diff --git a/README.md b/README.md index 48bab1ba..f70aa821 100644 --- a/README.md +++ b/README.md @@ -51,7 +51,7 @@ ChatGLM,讯飞星火，文心一言等多个平台的大语言模型。集成了 ![Mobile chat list](/docs/imgs/mobile_chat_list.png) ![Mobile chat session](/docs/imgs/mobile_chat_session.png) ![Mobile chat setting](/docs/imgs/mobile_user_profile.png) -![Mobile chat setting](/docs/imgs/mobile_user_profile.png) +![Mobile chat setting](/docs/imgs/mobile_pay.png) ### 7. 体验地址 diff --git a/api/handler/chat_role_handler.go b/api/handler/chat_role_handler.go index c4b76bd4..6750f2b5 100644 --- a/api/handler/chat_role_handler.go +++ b/api/handler/chat_role_handler.go @@ -78,8 +78,8 @@ func (h *ChatRoleHandler) List(c *gin.Context) { resp.SUCCESS(c, roleVos) } -// AddRole 为用户添加角色 -func (h *ChatRoleHandler) AddRole(c *gin.Context) { +// UpdateRole 更新用户聊天角色 +func (h *ChatRoleHandler) UpdateRole(c *gin.Context) { user, err := utils.GetLoginUser(c, h.db) if err != nil { resp.NotAuth(c) diff --git a/api/handler/sd_handler.go b/api/handler/sd_handler.go index ee80802d..c98eeb05 100644 --- a/api/handler/sd_handler.go +++ b/api/handler/sd_handler.go @@ -8,7 +8,6 @@ import ( "chatplus/store/vo" "chatplus/utils" "chatplus/utils/resp" - "encoding/base64" "fmt" "github.com/gin-gonic/gin" "github.com/go-redis/redis/v8" @@ -160,7 +159,7 @@ func (h *SdJobHandler) Image(c *gin.Context) { resp.SUCCESS(c) } -// JobList 获取 MJ 任务列表 +// JobList 获取 stable diffusion 任务列表 func (h *SdJobHandler) JobList(c *gin.Context) { status := h.GetInt(c, "status", 0) userId := h.GetInt(c, "user_id", 0) @@ -201,12 +200,6 @@ func (h *SdJobHandler) JobList(c *gin.Context) { h.db.Delete(&item) continue } - if item.ImgURL != "" { // 正在运行中任务使用代理访问图片 - image, err := utils.DownloadImage(item.ImgURL, h.App.Config.ProxyURL) - if err == nil { - job.ImgURL = "data:image/png;base64," + base64.StdEncoding.EncodeToString(image) - } - } } jobs = append(jobs, job) } diff --git a/api/main.go b/api/main.go index 94cfeba9..139fedd7 100644 --- a/api/main.go +++ b/api/main.go @@ -185,7 +185,7 @@ func main() { fx.Invoke(func(s *core.AppServer, h *handler.ChatRoleHandler) { group := s.Engine.Group("/api/role/") group.GET("list", h.List) - group.POST("add", h.AddRole) + group.POST("update", h.UpdateRole) }), fx.Invoke(func(s *core.AppServer, h *handler.UserHandler) { group := s.Engine.Group("/api/user/") diff --git a/web/src/assets/css/chat-app.css b/web/src/assets/css/chat-app.css index 0a9387a2..064cd4c2 100644 --- a/web/src/assets/css/chat-app.css +++ b/web/src/assets/css/chat-app.css @@ -13,8 +13,44 @@ .page-apps .inner { display: flex; color: #fff; - padding: 20px; + padding: 15px; + overflow-y: visible; + overflow-x: hidden; } -.page-apps .inner .left-menu { - width: 160px; +.page-apps .inner .list-box .app-item { + border: 1px solid #666; + border-radius: 6px; + overflow: hidden; + transition: all 0.3s ease; /* 添加过渡效果 */ +} +.page-apps .inner .list-box .app-item .el-image { + padding: 6px; +} +.page-apps .inner .list-box .app-item .el-image .el-image__inner { + border-radius: 10px; +} +.page-apps .inner .list-box .app-item .title { + display: flex; + padding: 10px; +} +.page-apps .inner .list-box .app-item .title .name { + width: 100%; + text-align: left; + font-size: 16px; + font-weight: bold; + color: #47fff1; +} +.page-apps .inner .list-box .app-item .title .opt { + position: relative; + top: -5px; +} +.page-apps .inner .list-box .app-item .hello-msg { + height: 60px; + padding: 10px; + font-size: 14px; + color: #999; +} +.page-apps .inner .list-box .app-item:hover { + box-shadow: 0 0 10px rgba(71,255,241,0.6); /* 添加阴影效果 */ + transform: translateY(-10px); /* 向上移动10像素 */ } diff --git a/web/src/assets/css/chat-app.styl b/web/src/assets/css/chat-app.styl index c3b191e6..daafa42c 100644 --- a/web/src/assets/css/chat-app.styl +++ b/web/src/assets/css/chat-app.styl @@ -52,9 +52,6 @@ } .hello-msg { - overflow: hidden; - white-space normal - text-overflow: ellipsis; height 60px padding 10px font-size 14px diff --git a/web/src/assets/css/image-mj.css b/web/src/assets/css/image-mj.css index dfe095ee..1264073b 100644 --- a/web/src/assets/css/image-mj.css +++ b/web/src/assets/css/image-mj.css @@ -176,6 +176,11 @@ .page-mj .inner .task-list-box .finish-job-list .job-item { width: 100%; height: 100%; + border: 1px solid #666; + padding: 6px; + overflow: hidden; + border-radius: 6px; + transition: all 0.3s ease; /* 添加过渡效果 */ } .page-mj .inner .task-list-box .finish-job-list .job-item .opt .opt-line { margin: 6px 0; @@ -185,11 +190,11 @@ flex-flow: row; } .page-mj .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul li { - margin-right: 10px; + margin-right: 6px; } .page-mj .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul li a { padding: 3px 0; - width: 44px; + width: 40px; text-align: center; border-radius: 5px; display: block; @@ -204,10 +209,14 @@ font-size: 20px; cursor: pointer; } +.page-mj .inner .task-list-box .finish-job-list .job-item:hover { + box-shadow: 0 0 10px rgba(71,255,241,0.6); /* 添加阴影效果 */ + transform: translateY(-10px); /* 向上移动10像素 */ +} .page-mj .inner .task-list-box .el-image { width: 100%; height: 100%; - max-height: 240px; + overflow: visible; } .page-mj .inner .task-list-box .el-image img { height: 240px; @@ -224,16 +233,17 @@ height: 100%; min-height: 200px; color: #fff; + height: 240px; } .page-mj .inner .task-list-box .el-image .image-slot .iconfont { font-size: 50px; margin-bottom: 10px; } .page-mj .inner .task-list-box .el-image.upscale { - max-height: 304px; + max-height: 310px; } .page-mj .inner .task-list-box .el-image.upscale img { - height: 304px; + height: 310px; } .page-mj .inner .task-list-box .el-image.upscale .el-image-viewer__wrapper img { width: auto; diff --git a/web/src/assets/css/image-sd.css b/web/src/assets/css/image-sd.css index 3b6b89cb..6a9e72ed 100644 --- a/web/src/assets/css/image-sd.css +++ b/web/src/assets/css/image-sd.css @@ -99,6 +99,11 @@ .page-sd .inner .task-list-box .finish-job-list .job-item { width: 100%; height: 100%; + border: 1px solid #666; + padding: 6px; + overflow: hidden; + border-radius: 6px; + transition: all 0.3s ease; /* 添加过渡效果 */ } .page-sd .inner .task-list-box .finish-job-list .job-item .opt .opt-line { margin: 6px 0; @@ -108,11 +113,11 @@ flex-flow: row; } .page-sd .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul li { - margin-right: 10px; + margin-right: 6px; } .page-sd .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul li a { padding: 3px 0; - width: 44px; + width: 40px; text-align: center; border-radius: 5px; display: block; @@ -127,10 +132,14 @@ font-size: 20px; cursor: pointer; } +.page-sd .inner .task-list-box .finish-job-list .job-item:hover { + box-shadow: 0 0 10px rgba(71,255,241,0.6); /* 添加阴影效果 */ + transform: translateY(-10px); /* 向上移动10像素 */ +} .page-sd .inner .task-list-box .el-image { width: 100%; height: 100%; - max-height: 240px; + overflow: visible; } .page-sd .inner .task-list-box .el-image img { height: 240px; @@ -147,16 +156,17 @@ height: 100%; min-height: 200px; color: #fff; + height: 240px; } .page-sd .inner .task-list-box .el-image .image-slot .iconfont { font-size: 50px; margin-bottom: 10px; } .page-sd .inner .task-list-box .el-image.upscale { - max-height: 304px; + max-height: 310px; } .page-sd .inner .task-list-box .el-image.upscale img { - height: 304px; + height: 310px; } .page-sd .inner .task-list-box .el-image.upscale .el-image-viewer__wrapper img { width: auto; @@ -180,6 +190,15 @@ display: flex; justify-content: center; } +.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .img-container .image-slot { + display: flex; + height: 100vh; + align-items: center; + justify-content: center; +} +.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .img-container .image-slot .el-icon { + font-size: 60px; +} .page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info { background-color: #25262b; padding: 1rem 1.5rem; diff --git a/web/src/assets/css/images-wall.css b/web/src/assets/css/images-wall.css index ccdcdebc..d313ec8a 100644 --- a/web/src/assets/css/images-wall.css +++ b/web/src/assets/css/images-wall.css @@ -102,6 +102,15 @@ display: flex; justify-content: center; } +.page-images-wall .el-overlay-dialog .el-dialog .el-dialog__body .el-row .img-container .image-slot { + display: flex; + height: 100vh; + align-items: center; + justify-content: center; +} +.page-images-wall .el-overlay-dialog .el-dialog .el-dialog__body .el-row .img-container .image-slot .el-icon { + font-size: 60px; +} .page-images-wall .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info { background-color: #25262b; padding: 1rem 1.5rem; diff --git a/web/src/assets/css/task-list.styl b/web/src/assets/css/task-list.styl index 0b5d6702..c89bc225 100644 --- a/web/src/assets/css/task-list.styl +++ b/web/src/assets/css/task-list.styl @@ -44,6 +44,7 @@ padding 6px overflow hidden border-radius 6px + transition: all 0.3s ease; /* 添加过渡效果 */ .opt { .opt-line { @@ -54,7 +55,7 @@ flex-flow row li { - margin-right 10px + margin-right 6px a { padding 3px 0 @@ -80,6 +81,11 @@ } } + + &:hover { + box-shadow: 0 0 10px rgba(71, 255, 241, 0.6); /* 添加阴影效果 */ + transform: translateY(-10px); /* 向上移动10像素 */ + } } } @@ -87,7 +93,7 @@ .el-image { width 100% height 100% - max-height 240px + overflow visible img { height 240px @@ -108,6 +114,7 @@ height 100% min-height 200px color #ffffff + height 240px .iconfont { font-size 50px diff --git a/web/src/utils/libs.js b/web/src/utils/libs.js index 056881a4..f43f3770 100644 --- a/web/src/utils/libs.js +++ b/web/src/utils/libs.js @@ -128,3 +128,32 @@ export function copyObj(origin) { export function disabledDate(time) { return time.getTime() < Date.now() } + +// 字符串截取 +export function substr(str, length) { + let result = '' + let count = 0 + + for (let i = 0; i < str.length; i++) { + const char = str.charAt(i) + const charCode = str.charCodeAt(i); + + // 判断字符是否为中文字符 + if (charCode >= 0x4e00 && charCode <= 0x9fff) { + // 中文字符算两个字符 + count += 2 + } else { + count++ + } + + if (count <= length) { + result += char + } else { + result += " ..." + break + } + } + + return result +} + diff --git a/web/src/views/ChatApps.vue b/web/src/views/ChatApps.vue index 10a47ba7..d93058f2 100644 --- a/web/src/views/ChatApps.vue +++ b/web/src/views/ChatApps.vue @@ -12,7 +12,8 @@ {{ scope.item.name }}
- + @@ -20,7 +21,7 @@ + @click="updateRole(scope.item, 'add')"> @@ -28,7 +29,7 @@
-
{{ scope.item['hello_msg'] }}
+
{{ scope.item.intro }}
@@ -39,22 +40,28 @@