start conv

src/components/application/Confirm.vue

@@ -97,11 +97,13 @@ export default defineComponent({
 .content {
   padding: 10px 40px;
 
+  .btn-apply {
+    border-radius: 20px;
+  }
+
   .policy {
     margin-bottom: 10px;
-    .btn-apply {
-      border-radius: 20px;
-    }
+
     .policy-checkbox {
       margin-right: 10px !important;
     }

src/components/chat/Sidebar.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="sidebar">
-    <el-skeleton v-if="loading && conversations.length === 0" />
+    <el-skeleton v-if="loading && conversations === undefined" />
+    <div v-else-if="conversations?.length === 0">
+      <p class="p-5 description">{{ $t('chat.message.noConversations') }}</p>
+    </div>
     <div v-else class="conversations">
       <div
         v-for="(conversation, conversationIndex) in conversations"
@@ -58,15 +61,15 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { ElTooltip, ElButton, ElSkeleton, ElInput } from 'element-plus';
+import { ElSkeleton, ElInput } from 'element-plus';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { ROUTE_CHAT_CONVERSATION } from '@/router/constants';
 import { apiUsageOperator, IApplication, chatOperator } from '@/operators';
 import { IChatConversation } from '@/operators/chat/models';
 
 interface IData {
   loading: boolean;
-  conversations: IChatConversation[];
+  conversations: IChatConversation[] | undefined;
 }
 
 export default defineComponent({
@@ -86,7 +89,7 @@ export default defineComponent({
   data(): IData {
     return {
       loading: false,
-      conversations: []
+      conversations: undefined
     };
   },
   watch: {

src/components/common/ApiStatus.vue

@@ -1,5 +1,12 @@
 <template>
-  <div v-if="application" class="status">
+  <div v-if="initializing && application === undefined">
+    <el-skeleton :rows="1" class="text-center">
+      <template #template>
+        <el-skeleton-item variant="p" class="shimmer" />
+      </template>
+    </el-skeleton>
+  </div>
+  <div v-else-if="application" class="status">
     <span class="info">
       {{ $t('common.message.usedCount') }}: {{ application?.used_amount }} {{ $t('common.message.remainingCount') }}:
       {{ application?.remaining_amount }}
@@ -23,7 +30,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { IApplication, IApplicationDetailResponse, applicationOperator } from '@/operators';
-import { ElButton, ElMessage } from 'element-plus';
+import { ElButton, ElMessage, ElSkeleton, ElSkeletonItem } from 'element-plus';
 import ApplicationConfirm from '@/components/application/Confirm.vue';
 import { IApplicationType } from '@/operators';
 import { apiOperator } from '@/operators/api/operator';
@@ -38,7 +45,7 @@ export interface IData {
 
 export default defineComponent({
   name: 'ApiStatus',
-  components: { ElButton, ApplicationConfirm },
+  components: { ElButton, ApplicationConfirm, ElSkeleton, ElSkeletonItem },
   props: {
     application: {
       type: Object as () => IApplication | undefined,
@@ -47,6 +54,10 @@ export default defineComponent({
     apiId: {
       type: String,
       required: true
+    },
+    initializing: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['apply', 'refresh'],
@@ -58,12 +69,20 @@ export default defineComponent({
     };
   },
   computed: {},
+  watch: {
+    apiId() {
+      this.onFetchApi();
+    }
+  },
   mounted() {
-    apiOperator.get(this.apiId).then(({ data: data }: { data: IApiDetailResponse }) => {
-      this.api = data;
-    });
+    this.onFetchApi();
   },
   methods: {
+    onFetchApi() {
+      apiOperator.get(this.apiId).then(({ data: data }: { data: IApiDetailResponse }) => {
+        this.api = data;
+      });
+    },
     onBuy() {
       const url = `https://data.zhishuyun.com/console/applications/${this.application?.id}/buy`;
       window.open(url, '_blank');
@@ -75,7 +94,6 @@ export default defineComponent({
           api_id: this.apiId
         })
         .then(({ data: data }: { data: IApplicationDetailResponse }) => {
-          // this.application = data;
           ElMessage.success(this.$t('application.message.applySuccessfully'));
           setTimeout(() => {
             this.$emit('refresh');
@@ -94,6 +112,10 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+.shimmer {
+  width: 300px;
+  margin: auto;
+}
 .status {
   display: block;
   width: fit-content;

src/components/midjourney/tasks/TaskBriefList.vue

@@ -1,11 +1,5 @@
 <template>
-  <div v-if="tasks?.length > 0" class="tasks">
-    <div v-for="(task, taskKey) in tasks" :key="taskKey" class="task">
-      <task-preview :full="false" :model-value="task" :applications="applications" @custom="$emit('custom', $event)" />
-    </div>
-    <el-button type="primary" class="btn mb-4" @click="onLoadHistory">{{ $t('midjourney.button.history') }}</el-button>
-  </div>
-  <div v-else class="tasks">
+  <div v-if="tasks === undefined" class="tasks">
     <el-card v-for="_ in 3" :key="_" class="task">
       <el-skeleton animated>
         <template #template>
@@ -15,6 +9,15 @@
       </el-skeleton>
     </el-card>
   </div>
+  <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-for="(task, taskKey) in tasks" :key="taskKey" class="task">
+      <task-preview :full="false" :model-value="task" :applications="applications" @custom="$emit('custom', $event)" />
+    </div>
+    <el-button type="primary" class="btn mb-4" @click="onLoadHistory">{{ $t('midjourney.button.history') }}</el-button>
+  </div>
 </template>
 
 <script lang="ts">
@@ -25,7 +28,7 @@ import { ROUTE_MIDJOURNEY_HISTORY } from '@/router';
 import { ElButton, ElCard, ElSkeleton, ElSkeletonItem } from 'element-plus';
 
 interface IData {
-  tasks: IMidjourneyImagineTask[];
+  tasks: IMidjourneyImagineTask[] | undefined;
   mounted: boolean;
   loading: boolean;
 }
@@ -48,7 +51,7 @@ export default defineComponent({
   emits: ['update:modelValue', 'custom'],
   data(): IData {
     return {
-      tasks: [],
+      tasks: undefined,
       mounted: false,
       loading: false
     };
@@ -105,13 +108,18 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+.description {
+  font-size: 14px;
+  color: #333;
+}
+
 .tasks {
   padding-top: 20px;
   overflow-y: scroll;
-  border-left: 1px solid var(--el-border-color);
   display: flex;
   flex-direction: column;
   align-items: center;
+
   .task {
     margin-bottom: 15px;
     width: 350px;

src/components/midjourney/tasks/TaskFullList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="tasks.length > 0" class="tasks">
+  <div v-if="tasks" class="tasks">
     <div v-for="(task, taskKey) in tasks" :key="taskKey" class="task">
       <task-preview :full="true" :model-value="task" :applications="applications" @custom="onCustom($event)" />
     </div>

src/i18n/zh/chat/message.ts

@@ -23,5 +23,6 @@ export default {
   errorUsedUp: '您的套餐次数已经用完，请购买更多次数继续使用',
   errorUnknown: '服务器出现未知错误，请稍后重试或联系客服',
   errorTimeout: '回答问题超时，请稍后重试',
-  howToBreakLine: '按 Shift+Enter 键可以换行'
+  howToBreakLine: '按 Shift+Enter 键可以换行',
+  noConversations: '没有历史会话，请先发起一个新的会话'
 };

src/i18n/zh/midjourney/message.ts

@@ -5,5 +5,6 @@ export default {
   startTaskSuccess: '发起绘图任务成功',
   startTaskFailed: '发起绘图任务失败',
   generating: '生成中...',
-  noOperations: '没有可用操作'
+  noOperations: '没有可用操作',
+  noTasks: '没有历史任务，请先发起一个新的任务'
 };

src/pages/chat/Conversation.vue

@@ -3,7 +3,12 @@
     <sidebar class="left" :applications="applications" @click="onFetchHistory" />
     <div class="main">
       <model-selector v-model="model" class="model-selector" @select="onSelectModel" />
-      <api-status :application="application" :api-id="model.apiId" />
+      <api-status
+        :initializing="initializing"
+        :application="application"
+        :api-id="model.apiId"
+        @refresh="onFetchApplications"
+      />
       <div class="dialogue">
         <introduction v-if="messages && messages.length === 0" />
         <div v-else class="messages">

src/pages/midjourney/History.vue

@@ -5,7 +5,13 @@
     </div>
     <div class="main">
       <channel-selector v-model="channel" class="mb-4" @select="onSelectChannel" />
-      <api-status :application="application" class="mb-4" :api-id="channel.apiId" @refresh="onFetchApplications" />
+      <api-status
+        :initializing="initializing"
+        :application="application"
+        class="mb-4"
+        :api-id="channel.apiId"
+        @refresh="onFetchApplications"
+      />
       <task-full-list :applications="applications" @custom="onCustom" />
       <el-button type="primary" class="btn btn-generate" @click="onGenerateNew">
         <font-awesome-icon icon="fa-solid fa-chevron-left" class="icon icon-rotate mr-1" />

src/pages/midjourney/Index.vue

@@ -5,7 +5,13 @@
     </div>
     <div class="main">
       <channel-selector v-model="channel" class="mb-4" @select="onSelectChannel" />
-      <api-status :application="application" :api-id="channel.apiId" class="mb-4" @apply="onFetchApplications" />
+      <api-status
+        :initializing="initializing"
+        :application="application"
+        :api-id="channel.apiId"
+        class="mb-4"
+        @apply="onFetchApplications"
+      />
       <div class="pt-4">
         <reference-image class="mb-4" @change="references = $event" />
         <prompt-input v-model="prompt" class="mb-4" />
@@ -248,6 +254,7 @@ export default defineComponent({
     overflow-y: scroll;
     width: 400px;
     height: 100%;
+    border-left: 1px solid var(--el-border-color);
   }
 }
 </style>