feat: create chat app list page, build the layout of page

api/handler/chat_role_handler.go

@@ -24,6 +24,7 @@ func NewChatRoleHandler(app *core.AppServer, db *gorm.DB) *ChatRoleHandler {
 
 // List get user list
 func (h *ChatRoleHandler) List(c *gin.Context) {
+	all := h.GetBool(c, "all")
 	var roles []model.ChatRole
 	res := h.db.Where("enable", true).Order("sort_num ASC").Find(&roles)
 	if res.Error != nil {
@@ -31,6 +32,22 @@ func (h *ChatRoleHandler) List(c *gin.Context) {
 		return
 	}
 
+	// 获取所有角色
+	if all {
+		// 转成 vo
+		var roleVos = make([]vo.ChatRole, 0)
+		for _, r := range roles {
+			var v vo.ChatRole
+			err := utils.CopyObject(r, &v)
+			if err == nil {
+				v.Id = r.Id
+				roleVos = append(roleVos, v)
+			}
+		}
+		resp.SUCCESS(c, roleVos)
+		return
+	}
+
 	user, err := utils.GetLoginUser(c, h.db)
 	if err != nil {
 		resp.NotAuth(c)

web/src/assets/css/chat-app.css

@@ -0,0 +1,20 @@
+.page-apps {
+  background-color: #282c34;
+  height: 100vh;
+}
+.page-apps .title {
+  text-align: center;
+  background-color: #25272d;
+  font-size: 24px;
+  color: #fff;
+  padding: 10px;
+  border-bottom: 1px solid #3c3c3c;
+}
+.page-apps .inner {
+  display: flex;
+  color: #fff;
+  padding: 20px;
+}
+.page-apps .inner .left-menu {
+  width: 160px;
+}

web/src/assets/css/chat-app.styl

@@ -0,0 +1,25 @@
+.page-apps {
+  background-color: #282c34;
+  height 100vh
+
+  .title {
+    text-align center
+    background-color #25272d
+    font-size 24px
+    color #ffffff
+    padding 10px
+    border-bottom 1px solid #3c3c3c
+  }
+
+  .inner {
+    display flex
+    color #ffffff
+    padding 20px;
+
+    .left-menu {
+      width 160px
+    }
+
+  }
+
+}

web/src/assets/css/images-wall.css

@@ -50,6 +50,9 @@
   border-top-right-radius: 10px;
   background-color: rgba(10,10,10,0.7);
 }
+.page-images-wall .inner .waterfall .list-item .prompt span {
+  word-break: break-all;
+}
 .page-images-wall .inner .waterfall .list-item .prompt .el-icon {
   position: absolute;
   bottom: 10px;

web/src/assets/css/images-wall.styl

@@ -69,6 +69,10 @@
           border-top-right-radius 10px
           background-color rgba(10, 10, 10, 0.7)
 
+          span {
+            word-break break-all
+          }
+
           .el-icon {
             position absolute
             bottom 10px

web/src/views/ChatApps.vue

@@ -1,41 +1,36 @@
 <template>
-  <div class="page-apps" :style="{ height: winHeight + 'px' }">
-    <div class="inner">
-      <h1>应用中心</h1>
-      <h2>页面正在紧锣密鼓开发中，敬请期待！</h2>
+  <div class="page-apps">
+    <div class="title">
+      AI 助手应用中心
+    </div>
+    <div class="inner custom-scroll">
+      <div class="app-list">
+        <div class="list-item" v-for="item in list" :key="item.id">
+          <div v-if="item.key !=='gpt'">
+            <el-image :src="item.icon"/>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import {ref} from "vue"
+import {onMounted, ref} from "vue"
+import {ElMessage} from "element-plus";
+import {httpGet} from "@/utils/http";
 
-const winHeight = ref(window.innerHeight)
+const list = ref([])
+onMounted(() => {
+  httpGet("/api/role/list?all=true").then((res) => {
+    list.value = res.data
+  }).catch(e => {
+    ElMessage.error("获取应用失败：" + e.message)
+  })
+})
 </script>
 
 <style lang="stylus" scoped>
-.page-apps {
-  display: flex;
-  justify-content: center;
-  align-items center
-  background-color: #282c34;
-
-  .inner {
-    text-align center
-
-    h1 {
-      color: #202020;
-      font-size: 80px;
-      font-weight: bold;
-      letter-spacing: 0.1em;
-      text-shadow: -1px -1px 1px #111111, 2px 2px 1px #363636;
-    }
-
-    h2 {
-      color #ffffff;
-      font-weight: bold;
-    }
-  }
-
-}
+@import "@/assets/css/chat-app.styl"
+@import "@/assets/css/custom-scroll.styl"
 </style>

web/src/views/Home.vue

@@ -109,7 +109,7 @@ const changeNav = (item) => {
         }
 
         a:hover, a.active {
-          color #58D3FF
+          color #47fff1
         }
       }
     }