Update qrart style (#61)

Co-authored-by: AceDataCloud <office@acedata.cloud> Co-authored-by: Germey <germey@acedata.cloud>
AceDataCloud · Jun 30, 2024 · c3176e4 · c3176e4
1 parent a0a7cd9
commit c3176e4
Show file tree

Hide file tree

Showing 80 changed files with 4,533 additions and 3,120 deletions.
diff --git a/change/@acedatacloud-nexior-93500e09-0308-4814-a0d7-146384869683.json b/change/@acedatacloud-nexior-93500e09-0308-4814-a0d7-146384869683.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "update translation files",
+  "packageName": "@acedatacloud/nexior",
+  "email": "office@acedata.cloud",
+  "dependentChangeType": "patch"
+}
diff --git a/src/components/midjourney/tasks/TaskItem.vue b/src/components/midjourney/tasks/TaskItem.vue
@@ -50,15 +50,24 @@
       </div>
       <!-- response success -->
       <div v-if="modelValue?.response?.success === true" :class="{ content: true, full: full }">
-        <el-image
-          v-if="modelValue?.response?.image_url"
-          :src="modelValue?.response?.image_url"
-          :preview-src-list="[modelValue?.response?.raw_image_url as string]"
-          fit="contain"
-          class="image"
-          :lazy="true"
-          @error="onReload($event)"
-        />
+        <div class="image-wrapper">
+          <img
+            v-if="modelValue?.response?.image_url"
+            :src="modelValue?.response?.image_url"
+            :preview-src-list="[modelValue?.response?.raw_image_url as string]"
+            class="image"
+            @error="onReload($event)"
+          />
+          <el-button
+            v-if="modelValue?.response?.image_url"
+            type="info"
+            round
+            class="btn-raw"
+            @click="onOpenUrl(modelValue?.response?.raw_image_url)"
+          >
+            {{ $t('common.button.seeRawImage') }}
+          </el-button>
+        </div>
         <div v-if="modelValue?.response?.actions" :class="{ operations: true, full, 'mt-2': true }">
           <el-tooltip
             v-for="(action, actionKey) in modelValue?.response?.actions"
@@ -78,21 +87,21 @@
               {{ actionMapping[action] }}
             </el-button>
           </el-tooltip>
-          <el-alert :closable="false" class="mt-2 success">
-            <p class="description">
-              <font-awesome-icon icon="fa-solid fa-magic" class="mr-1" />
-              {{ $t('midjourney.field.taskId') }}:
-              {{ modelValue?.id }}
-              <copy-to-clipboard :content="modelValue?.id!" class="btn-copy" />
-            </p>
-            <p class="description">
-              <font-awesome-icon icon="fa-solid fa-image" class="mr-1" />
-              {{ $t('midjourney.field.imageId') }}:
-              {{ modelValue?.response?.image_id }}
-              <copy-to-clipboard :content="modelValue?.response?.image_id" class="btn-copy" />
-            </p>
-          </el-alert>
         </div>
+        <el-alert :closable="false" class="mt-2 success">
+          <p class="description">
+            <font-awesome-icon icon="fa-solid fa-magic" class="mr-1" />
+            {{ $t('midjourney.field.taskId') }}:
+            {{ modelValue?.id }}
+            <copy-to-clipboard :content="modelValue?.id!" class="btn-copy" />
+          </p>
+          <p class="description">
+            <font-awesome-icon icon="fa-solid fa-image" class="mr-1" />
+            {{ $t('midjourney.field.imageId') }}:
+            {{ modelValue?.response?.image_id }}
+            <copy-to-clipboard :content="modelValue?.response?.image_id" class="btn-copy" />
+          </p>
+        </el-alert>
       </div>
       <!-- response pending -->
       <div v-if="!modelValue?.response">
@@ -237,6 +246,9 @@ export default defineComponent({
         image_id: this.modelValue?.response?.image_id
       });
     },
+    onOpenUrl(url: string) {
+      window.open(url, '_blank');
+    },
     onDownload(url: string) {
       // download image using javascript
       const link = document.createElement('a');
@@ -333,23 +345,30 @@ $left-width: 70px;
           min-height: 200px;
         }
       }
-      &.failed {
+      .image-wrapper {
+        position: relative;
+        width: fit-content;
+        min-height: 50px;
+        min-width: 100px;
         .image {
-          .image-slot {
-            font-size: 16px;
-            padding: 20px;
-          }
+          max-height: 400px;
+          max-width: 300px;
         }
-      }
-      .image {
-        height: 350px;
-        .image-slot {
-          display: flex;
-          justify-content: left;
-          width: 100%;
-          height: 100%;
-          background: var(--el-fill-color-light);
-          color: var(--el-text-color-regular);
+        .btn-raw {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+          z-index: 1000;
+          display: none;
+        }
+        &:hover {
+          .image {
+            filter: brightness(0.6);
+          }
+          .btn-raw {
+            display: block;
+          }
         }
       }
       .progress {

diff --git a/src/components/qrart/ConfigPanel.vue b/src/components/qrart/ConfigPanel.vue
@@ -2,15 +2,12 @@
   <div class="panel">
     <div class="config">
       <type-selector class="mb-4" />
-      <content-input class="mb-4" />
-      <prompt-input class="mb-4" />
       <aspect-ratio-selector class="mb-4" />
       <qrw-selector class="mb-4" />
-      <steps-selector class="mb-4" />
-      <preset-selector class="mb-4" />
+      <position-selector class="mb-4" />
       <advanced-selector class="mb-4" />
+      <steps-selector v-if="config?.advanced" class="mb-4" />
       <seed-input v-if="config?.advanced" class="mb-4" />
-      <position-selector v-if="config?.advanced" class="mb-4" />
       <pixel-style-selector v-if="config?.advanced" class="mb-4" />
       <marker-shape-selector v-if="config?.advanced" class="mb-4" />
       <sub-marker-selector v-if="config?.advanced" class="mb-4" />
@@ -19,24 +16,15 @@
       <padding-level-selector v-if="config?.advanced" class="mb-4" />
       <padding-noise-selector v-if="config?.advanced" class="mb-4" />
     </div>
-    <div class="actions">
-      <el-button type="primary" class="btn" round @click="onGenerate">
-        <font-awesome-icon icon="fa-solid fa-magic" class="mr-2" />
-        {{ $t('qrart.button.generate') }}
-      </el-button>
-    </div>
   </div>
 </template>
 
 <script>
 import { defineComponent } from 'vue';
 import TypeSelector from './config/TypeSelector.vue';
-import ContentInput from './config/ContentInput.vue';
-import PromptInput from './config/PromptInput.vue';
 import AspectRatioSelector from './config/AspectRatioSelector.vue';
 import QrwSelector from './config/QrwSelector.vue';
 import StepsSelector from './config/StepsSelector.vue';
-import PresetSelector from './config/PresetSelector.vue';
 import AdvancedSelector from './config/AdvancedSelector.vue';
 import MarkerShapeSelector from './config/MarkerShapeSelector.vue';
 import SubMarkerSelector from './config/SubMarkerSelector.vue';
@@ -47,27 +35,20 @@ import PaddingLevelSelector from './config/PaddingLevelSelector.vue';
 import PaddingNoiseSelector from './config/PaddingNoiseSelector.vue';
 import PixelStyleSelector from './config/PixelStyleSelector.vue';
 import SeedInput from './config/SeedInput.vue';
-import { ElButton } from 'element-plus';
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 export default defineComponent({
   name: 'PresetPanel',
   components: {
     TypeSelector,
-    FontAwesomeIcon,
-    ContentInput,
     PositionSelector,
     PixelStyleSelector,
     PaddingLevelSelector,
     SeedInput,
-    PromptInput,
     AspectRatioSelector,
-    ElButton,
     QrwSelector,
     EclSelector,
     StepsSelector,
     PaddingNoiseSelector,
-    PresetSelector,
     AdvancedSelector,
     MarkerShapeSelector,
     SubMarkerSelector,
@@ -78,11 +59,6 @@ export default defineComponent({
     config() {
       return this.$store.state.qrart?.config;
     }
-  },
-  methods: {
-    onGenerate() {
-      this.$emit('generate');
-    }
   }
 });
 </script>

diff --git a/src/components/qrart/OperationPanel.vue b/src/components/qrart/OperationPanel.vue
@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <el-card v-show="operating">
+      <content-input class="mb-4" />
+      <prompt-input class="mb-4" />
+      <preset-selector class="mb-4" />
+      <div class="actions">
+        <el-button type="primary" class="btn w-full" round @click="onGenerate">
+          <font-awesome-icon icon="fa-solid fa-magic" class="mr-2" />
+          {{ $t('qrart.button.generate') }}
+        </el-button>
+      </div>
+    </el-card>
+    <div>
+      <el-button type="primary" class="btn btn-operate" @click="operating = !operating">+</el-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { ElButton, ElCard } from 'element-plus';
+import PresetSelector from './config/PresetSelector2.vue';
+import ContentInput from './config/ContentInput.vue';
+import PromptInput from './config/PromptInput.vue';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+
+export default defineComponent({
+  name: 'OperationPanel',
+  components: {
+    ElButton,
+    ElCard,
+    PresetSelector,
+    ContentInput,
+    PromptInput,
+    FontAwesomeIcon
+  },
+  emits: ['generate'],
+  data() {
+    return {
+      operating: false
+    };
+  },
+  methods: {
+    onGenerate() {
+      this.$emit('generate');
+      this.operating = false;
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.el-card {
+  width: 580px;
+  height: fit-content;
+  overflow-y: scroll;
+  position: absolute;
+  bottom: 70px;
+  left: calc(50% - 300px);
+  @media (max-width: 767px) {
+    width: 100%;
+    left: 0;
+  }
+}
+
+.btn-operate {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  font-size: 24px;
+  line-height: 40px;
+  padding: 0;
+  margin: auto;
+  display: block;
+}
+</style>
diff --git a/src/components/qrart/RecentPanel.vue b/src/components/qrart/RecentPanel.vue
@@ -1,12 +1,6 @@
 <template>
-  <div class="panel recent">
-    <task-preview
-      v-for="(task, taskIndex) in tasks?.items"
-      :key="taskIndex"
-      :model-value="task"
-      class="preview"
-      @click="onSelectTask(task)"
-    />
+  <div class="panel recent tasks">
+    <task-preview v-for="(task, taskIndex) in tasks?.items" :key="taskIndex" :model-value="task" class="preview" />
     <p v-if="tasks?.items?.length === 0">
       {{ $t('qrart.message.noTasks') }}
     </p>
@@ -16,14 +10,13 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import TaskPreview from './task/Preview.vue';
-import { Status, IQrartTask } from '@/models';
+import { Status } from '@/models';
 
 export default defineComponent({
   name: 'RecentPanel',
   components: {
     TaskPreview
   },
-  emits: ['select'],
   data() {
     return {
       job: 0
@@ -34,31 +27,42 @@ export default defineComponent({
       return this.$store.state.qrart?.status?.getApplication === Status.Request;
     },
     tasks() {
-      return this.$store.state.qrart?.tasks;
+      // reverse the order of the tasks.items
+      return {
+        ...this.$store.state.qrart?.tasks,
+        items: this.$store.state.qrart?.tasks?.items?.slice().reverse()
+      };
     }
   },
   async mounted() {
     await this.$store.dispatch('qrart/setTasks', undefined);
-    this.getTasks();
+    await this.getTasks();
+    await this.onScrollDown();
     // @ts-ignore
     this.job = setInterval(() => {
       this.getTasks();
     }, 5000);
   },
+  async unmounted() {
+    clearInterval(this.job);
+  },
   methods: {
-    async onLoadHistory() {
-      // this.$router.push({ name: ROUTE_MIDJOURNEY_HISTORY });
-    },
-    async onSelectTask(task: IQrartTask) {
-      this.$store.dispatch('qrart/setTasksActive', task);
+    async onScrollDown() {
+      setTimeout(() => {
+        // scroll to bottom for `.tasks`
+        const el = document.querySelector('.tasks');
+        if (el) {
+          el.scrollTop = el.scrollHeight;
+        }
+      }, 500);
     },
     async getTasks() {
       // ensure that the previous request has been completed
       if (this.loading) {
         return;
       }
       await this.$store.dispatch('qrart/getTasks', {
-        limit: 12,
+        limit: 50,
         offset: 0
       });
     }
@@ -75,11 +79,10 @@ export default defineComponent({
   height: 100%;
   &.recent {
     width: 100%;
-    height: 300px;
+    height: 100%;
     display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    overflow-x: scroll;
+    overflow-y: auto;
+    flex-direction: column;
     .preview {
       margin-right: 15px;
     }