opt: adjust ItemList component styles

web/src/views/ChatApps.vue

@@ -1,16 +1,30 @@
 <template>
-  <div class="page-apps">
+  <div class="page-apps custom-scroll">
     <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 class="inner" :style="{height: listBoxHeight + 'px'}">
+      <ItemList :items="list" v-if="list.length > 0" gap="20" width="250">
+        <template #default="scope">
+          <div class="app-item" :style="{width: scope.width+'px'}">
+            <el-image :src="scope.item.icon" fit="cover" :style="{height: scope.width+'px'}"/>
+            <div class="title">
+              <span class="name">{{ scope.item.name }}</span>
+              <div class="opt">
+                <el-button size="small"
+                           style="--el-color-primary:#009999"
+                           @click="addRole(scope.item)">
+                  <el-icon>
+                    <Plus/>
+                  </el-icon>
+                  <span>添加应用</span>
+                </el-button>
+              </div>
+            </div>
+            <div class="hello-msg">{{ scope.item['hello_msg'] }}</div>
           </div>
-        </div>
-      </div>
+        </template>
+      </ItemList>
     </div>
   </div>
 </template>
@@ -19,18 +33,31 @@
 import {onMounted, ref} from "vue"
 import {ElMessage} from "element-plus";
 import {httpGet} from "@/utils/http";
+import ItemList from "@/components/ItemList.vue";
+import {Plus} from "@element-plus/icons-vue";
 
+const listBoxHeight = window.innerHeight - 97
 const list = ref([])
 onMounted(() => {
   httpGet("/api/role/list?all=true").then((res) => {
-    list.value = res.data
+    const data = res.data
+    for (let i = 0; i < data.length; i++) {
+      if (data[i].key === 'gpt') {
+        continue
+      }
+      list.value.push(data[i])
+    }
   }).catch(e => {
     ElMessage.error("获取应用失败：" + e.message)
   })
 })
+
+const addRole = (row) => {
+
+}
 </script>
 
-<style lang="stylus" scoped>
+<style lang="stylus">
 @import "@/assets/css/chat-app.styl"
 @import "@/assets/css/custom-scroll.styl"
 </style>

web/src/views/ChatPlus.vue

@@ -553,7 +553,7 @@ const connect = function (chat_id, role_id) {
         content: _role['hello_msg'],
         orgContent: _role['hello_msg'],
       })
-      ElMessage.success({message: "对话连接成功！", duration: 500})
+      ElMessage.success({message: "对话连接成功！", duration: 1000})
     } else { // 加载聊天记录
       loadChatHistory(chat_id);
     }

web/src/views/ImageMj.vue

@@ -286,7 +286,7 @@
 
           <h2>创作记录</h2>
           <div class="finish-job-list">
-            <ItemList :items="finishedJobs" v-if="finishedJobs.length > 0">
+            <ItemList :items="finishedJobs" v-if="finishedJobs.length > 0" width="240">
               <template #default="scope">
                 <div class="job-item">
                   <el-image
@@ -503,7 +503,7 @@ onMounted(() => {
 
   const clipboard = new Clipboard('.copy-prompt');
   clipboard.on('success', () => {
-    ElMessage.success({message: "复制成功！", duration: 500});
+    ElMessage.success("复制成功！");
   })
 
   clipboard.on('error', () => {

web/src/views/ImageSd.vue

@@ -289,7 +289,7 @@
         <div class="task-list-inner" :style="{ height: listBoxHeight + 'px' }">
           <h2>任务列表</h2>
           <div class="running-job-list">
-            <ItemList :items="runningJobs" v-if="runningJobs.length > 0">
+            <ItemList :items="runningJobs" v-if="runningJobs.length > 0" width="240">
               <template #default="scope">
                 <div class="job-item">
                   <el-popover
@@ -645,7 +645,7 @@ onMounted(() => {
 
   const clipboard = new Clipboard('.copy-prompt');
   clipboard.on('success', () => {
-    ElMessage.success({message: "复制成功！", duration: 500});
+    ElMessage.success("复制成功！");
   })
 
   clipboard.on('error', () => {

web/src/views/ImagesWall.vue

@@ -281,7 +281,7 @@ getNext()
 onMounted(() => {
   const clipboard = new Clipboard('.copy-prompt');
   clipboard.on('success', () => {
-    ElMessage.success({message: "复制成功！", duration: 500});
+    ElMessage.success("复制成功！");
   })
 
   clipboard.on('error', () => {
@@ -293,6 +293,7 @@ const changeImgType = () => {
   document.getElementById('waterfall-box').scrollTo(0, 0)
   page.value = 0
   list.value = []
+  loading.value = true
   isOver.value = false
   nextTick(() => getNext())
 }