Add midjourney pagination (#172)

AceDataCloud · Feb 9, 2025 · 31fc4b4 · 31fc4b4
1 parent 49b2a58
commit 31fc4b4
Show file tree

Hide file tree

Showing 10 changed files with 137 additions and 32 deletions.
diff --git a/change/@acedatacloud-nexior-b46fd4a1-fed1-4828-abdc-7b451ae0094d.json b/change/@acedatacloud-nexior-b46fd4a1-fed1-4828-abdc-7b451ae0094d.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "add mj pagination",
+  "packageName": "@acedatacloud/nexior",
+  "email": "1348977728@qq.com",
+  "dependentChangeType": "patch"
+}
diff --git a/src/components/midjourney/tasks/TaskList.vue b/src/components/midjourney/tasks/TaskList.vue
@@ -21,7 +21,7 @@
   <div v-else-if="tasks && tasks?.length === 0">
     <p class="p-5 description">{{ $t('midjourney.message.noTasks') }}</p>
   </div>
-  <div v-else-if="tasks.length > 0" class="tasks">
+  <div v-else-if="tasks.length > 0" ref="panel" class="tasks" @scroll="onHandleScroll">
     <div v-for="(task, taskKey) in tasks" :key="taskKey" class="task">
       <task-item :full="false" :model-value="task" @custom="$emit('custom', $event)" />
     </div>
@@ -41,7 +41,7 @@ export default defineComponent({
     ElSkeleton,
     ElSkeletonItem
   },
-  emits: ['update:modelValue', 'custom', 'refresh'],
+  emits: ['update:modelValue', 'custom', 'refresh', 'reach-top'],
   data() {
     return {
       job: 0
@@ -55,6 +55,16 @@ export default defineComponent({
     application() {
       return this.$store.state.midjourney.application;
     }
+  },
+  methods: {
+    onHandleScroll() {
+      const el = this.$refs.panel as HTMLElement;
+      console.log('onHandleScroll  ', el.scrollTop);
+      if (el.scrollTop === 0) {
+        console.log('reach-top reach-top');
+        this.$emit('reach-top');
+      }
+    }
   }
 });
 </script>

diff --git a/src/components/suno/RecentPanel.vue b/src/components/suno/RecentPanel.vue
@@ -66,6 +66,7 @@ export default defineComponent({
   methods: {
     onHandleScroll() {
       const el = this.$refs.panel as HTMLElement;
+      console.log('reach-top reach-top reach-top');
       if (el.scrollTop === 0) {
         this.$emit('reach-top');
       }

diff --git a/src/models/midjourney.ts b/src/models/midjourney.ts
@@ -91,7 +91,7 @@ export interface IMidjourneyDescribeResponse {
 export interface IMidjourneyImagineTask {
   id: string;
   type: 'imagine';
-  created_at?: string;
+  created_at?: number;
   request?: IMidjourneyImagineRequest;
   response?: IMidjourneyImagineResponse;
   state?: MidjourneyImagineState;
@@ -100,7 +100,7 @@ export interface IMidjourneyImagineTask {
 export interface IMidjourneyDescribeTask {
   id: string;
   type: 'describe';
-  created_at?: string;
+  created_at?: number;
   request?: IMidjourneyDescribeRequest;
   response?: IMidjourneyDescribeResponse;
 }

diff --git a/src/operators/midjourney.ts b/src/operators/midjourney.ts
@@ -28,7 +28,16 @@ class MidjourneyOperator {
   }
 
   async tasks(
-    filter: { ids?: string[]; applicationId?: string; userId?: string; limit?: number; offset?: number },
+    filter: {
+      ids?: string[];
+      applicationId?: string;
+      userId?: string;
+      type?: string;
+      limit?: number;
+      offset?: number;
+      createdAtMax?: number;
+      createdAtMin?: number;
+    },
     options: { token: string }
   ): Promise<AxiosResponse<IMidjourneyTasksResponse>> {
     return await axios.post(
@@ -50,6 +59,11 @@ class MidjourneyOperator {
               user_id: filter.userId
             }
           : {}),
+        ...(filter.type
+          ? {
+              type: filter.type
+            }
+          : {}),
         ...(filter.limit !== undefined
           ? {
               limit: filter.limit
@@ -59,6 +73,16 @@ class MidjourneyOperator {
           ? {
               offset: filter.offset
             }
+          : {}),
+        ...(filter.createdAtMax !== undefined
+          ? {
+              created_at_max: filter.createdAtMax
+            }
+          : {}),
+        ...(filter.createdAtMin !== undefined
+          ? {
+              created_at_min: filter.createdAtMin
+            }
           : {})
       },
       {

diff --git a/src/pages/midjourney/Index.vue b/src/pages/midjourney/Index.vue
@@ -12,7 +12,7 @@
           :need-apply="needApply"
           @refresh="onGetApplication"
         />
-        <task-list @custom="onCustom" />
+        <task-list @custom="onCustom" @reach-top="onReachTop" />
       </div>
     </template>
   </layout>
@@ -41,6 +41,7 @@ import {
 interface IData {
   operating: boolean;
   job: number;
+  timer: NodeJS.Timer;
 }
 
 const CALLBACK_URL = 'https://webhook.acedata.cloud/midjourney';
@@ -56,7 +57,9 @@ export default defineComponent({
   data(): IData {
     return {
       operating: false,
-      job: 0
+      job: 0,
+      // @ts-ignore
+      timer: undefined
     };
   },
   computed: {
@@ -159,9 +162,11 @@ export default defineComponent({
   },
   watch: {
     tasks: {
-      handler(val, oldVal) {
-        if (oldVal === undefined && val) {
-          this.onScrollDown();
+      handler(value, oldValue) {
+        // scroll down if new tasks are added
+        if (value?.items?.length > oldValue?.items?.length) {
+          console.debug('new tasks detected');
+          // this.onScrollDown();
         }
       },
       deep: true
@@ -172,16 +177,23 @@ export default defineComponent({
     await this.onGetApplication();
     await this.onScrollDown();
     await this.onGetTasks();
-    await this.onScrollDown();
+    // await this.onScrollDown();
     // @ts-ignore
     this.job = setInterval(() => {
       this.onGetTasks();
     }, 5000);
   },
   async unmounted() {
     clearInterval(this.job);
+    clearInterval(this.timer);
   },
   methods: {
+    async onReachTop() {
+      console.debug('ddasdasdreached top');
+      await this.onGetTasks({
+        createdAtMax: this.tasks?.items?.[0]?.created_at
+      });
+    },
     async onGetService() {
       console.debug('start onGetService');
       await this.$store.dispatch('midjourney/getService');
@@ -232,8 +244,12 @@ export default defineComponent({
           }
         })
         .finally(async () => {
-          await this.onGetTasks();
-          await this.onScrollDown();
+          setTimeout(async () => {
+            await this.onGetTasks();
+            await this.onScrollDown();
+          }, 1000);
+          // await this.onGetTasks();
+          // await this.onScrollDown();
         });
     },
     async onCustom(payload: { image_id: string; action: MidjourneyImagineAction }) {
@@ -256,23 +272,33 @@ export default defineComponent({
       await this.onStartTask(request);
     },
     async onScrollDown() {
+      await this.$nextTick(); // 确保 DOM 更新完成后再执行滚动操作
       setTimeout(() => {
         // scroll to bottom for `.tasks`
         const el = document.querySelector('.tasks');
+
         if (el) {
           el.scrollTop = el.scrollHeight;
         }
       }, 500);
     },
-    async onGetTasks() {
+    async onGetTasks(payload?: { limit?: number; createdAtMin?: number; createdAtMax?: number }) {
       if (this.loading) {
         console.debug('loading');
         return;
       }
+      console.debug('start onGetTasks', payload);
+      const { limit = 5, createdAtMin, createdAtMax } = payload || {};
+      console.debug('limit', limit, 'createdAtMin', createdAtMin, 'createdAtMax', createdAtMax);
       await this.$store.dispatch('midjourney/getTasks', {
-        limit: 30,
-        offset: 0
+        limit,
+        createdAtMin,
+        createdAtMax
       });
+      // await this.$store.dispatch('midjourney/getTasks', {
+      //   limit: 30,
+      //   offset: 0
+      // });
     }
   }
 });

diff --git a/src/pages/suno/Index.vue b/src/pages/suno/Index.vue
@@ -149,8 +149,10 @@ export default defineComponent({
       setTimeout(() => {
         // scroll to bottom for `.recent`
         const el = document.querySelector('.recent');
+        console.log('onScrollDown  ', el, el.scrollTop, el.scrollHeight);
         if (el) {
           el.scrollTop = el.scrollHeight;
+          console.log('onScrollDown  ', el.scrollTop, el.scrollHeight);
         }
       }, 1000);
     },

diff --git a/src/store/midjourney/actions.ts b/src/store/midjourney/actions.ts
@@ -13,11 +13,20 @@ import {
 } from '@/models';
 import { Status } from '@/models/common';
 import { MIDJOURNEY_SERVICE_ID } from '@/constants';
+import { mergeAndSortLists } from '@/utils/merge';
 
 export const resetAll = ({ commit }: ActionContext<IMidjourneyState, IRootState>): void => {
   commit('resetAll');
 };
 
+export const setTasksItems = ({ commit }: any, payload: IMidjourneyTask[]) => {
+  commit('setTasksItems', payload);
+};
+
+export const setTasksTotal = ({ commit }: any, payload: number) => {
+  commit('setTasksTotal', payload);
+};
+
 export const setCredential = async ({ commit }: any, payload: ICredential): Promise<void> => {
   console.debug(setCredential, 'set credential', payload);
   commit('setCredential', payload);
@@ -113,10 +122,15 @@ export const getService = async ({ commit, state }: ActionContext<IMidjourneySta
 
 export const getTasks = async (
   { commit, state, rootState }: ActionContext<IMidjourneyState, IRootState>,
-  { offset, limit }: { offset?: number; limit?: number }
-): Promise<IMidjourneyTasksResponse> => {
+  {
+    offset,
+    limit,
+    createdAtMin,
+    createdAtMax
+  }: { offset?: number; limit?: number; createdAtMin?: number; createdAtMax?: number }
+): Promise<IMidjourneyTask[]> => {
   return new Promise((resolve, reject) => {
-    console.debug('start to get tasks', offset, limit);
+    console.debug('start to get tasks', offset, limit, createdAtMax, createdAtMin);
     const credential = state.credential;
     const token = credential?.token;
     if (!token) {
@@ -126,17 +140,26 @@ export const getTasks = async (
       .tasks(
         {
           userId: rootState?.user?.id,
-          offset,
-          limit
+          createdAtMin,
+          createdAtMax,
+          type: 'imagine'
         },
         {
           token
         }
       )
       .then((response) => {
-        console.debug('get tasks success', response.data);
-        commit('setTasks', response.data);
-        resolve(response.data);
+        console.debug('get imagine tasks success', response.data.items);
+        // merge with existing tasks
+        const existingItems = state?.tasks?.items || [];
+        console.debug('existing items', existingItems);
+        const newItems = response.data.items || [];
+        console.debug('new items', newItems);
+        // sort and de-duplicate using created_at
+        const mergedItems = mergeAndSortLists(existingItems, newItems);
+        commit('setTasksItems', mergedItems);
+        commit('setTasksTotal', response.data.count);
+        resolve(response.data.items);
       })
       .catch((error) => {
         return reject(error);

diff --git a/src/store/midjourney/mutations.ts b/src/store/midjourney/mutations.ts
@@ -1,4 +1,4 @@
-import { IApplication, ICredential, IMidjourneyConfig, IService } from '@/models';
+import { IApplication, ICredential, IMidjourneyConfig, IService, IMidjourneyTask } from '@/models';
 import { IMidjourneyState } from './models';
 
 export const resetAll = (state: IMidjourneyState): void => {
@@ -11,6 +11,22 @@ export const resetAll = (state: IMidjourneyState): void => {
   };
 };
 
+export const setTasksItems = (state: IMidjourneyState, payload: IMidjourneyTask[]): void => {
+  const newPayload = {
+    ...state.tasks,
+    items: payload
+  } as typeof state.tasks;
+  state.tasks = newPayload;
+};
+
+export const setTasksTotal = (state: IMidjourneyState, payload: number): void => {
+  const newPayload = {
+    ...state.tasks,
+    total: payload
+  } as typeof state.tasks;
+  state.tasks = newPayload;
+};
+
 export const setService = (state: IMidjourneyState, payload: IService): void => {
   state.service = payload;
 };
@@ -39,6 +55,8 @@ export default {
   setApplication,
   setApplications,
   setConfig,
+  setTasksItems,
+  setTasksTotal,
   setCredential,
   setService,
   setTasks,

diff --git a/src/store/midjourney/persist.ts b/src/store/midjourney/persist.ts
@@ -1,7 +1 @@
-export default [
-  'midjourney.config',
-  'midjourney.credential',
-  'midjourney.mode',
-  'midjourney.application',
-  'midjourney.tasks'
-];
+export default ['midjourney.config', 'midjourney.credential', 'midjourney.mode', 'midjourney.application'];