feat: midjourney page task and image list component is ready

web/src/components/ChatMidJourney.vue

@@ -109,6 +109,7 @@ const send = (url, index) => {
   emits('disable-input')
   httpPost(url, {
     index: index,
+    src: "chat",
     message_id: data.value?.["message_id"],
     message_hash: data.value?.["image"]?.hash,
     session_id: getSessionId(),

web/src/components/ItemList.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="waterfall" ref="container">
+    <div class="waterfall-inner">
+      <div
+          class="waterfall-item"
+          v-for="(item, index) in items"
+          :key="index"
+          :style="{width:itemWidth + 'px', height:height+'px', marginBottom: margin*2+'px'}"
+      >
+        <div :style="{marginLeft: margin+'px', marginRight: margin+'px'}">
+          <div class="item-wrapper">
+            <slot :item="item" :index="index"></slot>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+// 列表组件
+import {onMounted, ref} from "vue";
+
+const props = defineProps({
+  items: {
+    type: Array,
+    required: true
+  },
+  gap: {
+    type: Number,
+    default: 10
+  },
+  width: {
+    type: Number,
+    default: 240
+  },
+  height: {
+    type: Number,
+    default: 240
+  }
+});
+
+const container = ref(null)
+const itemWidth = ref(props.width)
+const margin = ref(props.gap)
+
+onMounted(() => {
+  computeSize()
+})
+
+const computeSize = () => {
+  const w = container.value.offsetWidth - 10 // 减去滚动条的宽度
+  let cols = Math.floor(w / props.width)
+  itemWidth.value = w / cols
+  while (itemWidth.value < props.width && cols > 1) {
+    cols -= 1
+    itemWidth.value = w / cols
+  }
+
+  if (props.gap > 0) {
+    margin.value = props.gap / 2
+  }
+}
+
+window.onresize = () => {
+  computeSize()
+}
+</script>
+
+<style scoped lang="stylus">
+
+.waterfall {
+
+  .waterfall-inner {
+    display flex
+    flex-wrap wrap
+
+    .waterfall-item {
+
+      div {
+        display flex
+        height 100%
+        overflow hidden
+
+        .item-wrapper {
+          height 100%
+          width 100%
+        }
+      }
+    }
+  }
+}
+
+</style>

web/src/components/mobile/ChatMidJourney.vue

@@ -69,6 +69,8 @@ import {showNotify} from "vant";
 const props = defineProps({
   content: Object,
   icon: String,
+  chatId: String,
+  roleId: Number,
   createdAt: String
 });
 
@@ -104,11 +106,15 @@ const send = (url, index) => {
   emits('disable-input')
   httpPost(url, {
     index: index,
+    src: "chat",
     message_id: data.value?.["message_id"],
     message_hash: data.value?.["image"]?.hash,
     session_id: getSessionId(),
     key: data.value?.["key"],
     prompt: data.value?.["prompt"],
+    chat_id: props.chatId,
+    role_id: props.roleId,
+    icon: props.icon,
   }).then(() => {
     showNotify({type: "success", message: "任务推送成功，请耐心等待任务执行..."})
     loading.value = false