Update hailo style (#218)

change/@acedatacloud-nexior-40d15df4-249b-4eee-a38c-ec4b7025f67f.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "update hailuo style",
+  "packageName": "@acedatacloud/nexior",
+  "email": "cqc@cuiqingcai.com",
+  "dependentChangeType": "patch"
+}

src/components/hailuo/config/StartImageUrlInput.vue

@@ -1,26 +1,39 @@
 <template>
-  <div class="field">
-    <h2 class="title font-bold">{{ $t('hailuo.name.startImageUrl') }}</h2>
-    <div class="upload-wrapper">
-      <el-upload
-        v-model:file-list="fileList"
-        accept=".png,.jpg,.jpeg,.gif,.bmp,.webp"
-        name="file"
-        class="value"
-        :show-file-list="true"
-        :limit="1"
-        :multiple="false"
-        :action="uploadUrl"
-        :on-exceed="onExceed"
-        :on-error="onError"
-        :on-remove="onRemove"
-        :on-success="onSuccess"
-        :headers="headers"
-      >
-        <el-button size="small" type="primary" round>{{ $t('hailuo.button.uploadStartImageUrl') }}</el-button>
-      </el-upload>
+  <div class="relative">
+    <div class="flex justify-between">
+      <div class="flex justify-start items-center">
+        <span class="text-sm font-bold">{{ $t('hailuo.name.startImageUrl') }}</span>
+        <info-icon :content="$t('hailuo.description.startImageUrl')" class="info" />
+      </div>
     </div>
-    <info-icon :content="$t('hailuo.description.startImageUrl')" class="info" />
+    <el-upload
+      v-model:file-list="fileList"
+      accept=".png,.jpg,.jpeg,.gif,.bmp,.webp"
+      name="file"
+      class="upload-wrapper"
+      :show-file-list="true"
+      :limit="1"
+      :multiple="false"
+      list-type="picture"
+      :action="uploadUrl"
+      :on-exceed="onExceed"
+      :on-error="onError"
+      :on-remove="onRemove"
+      :on-success="onSuccess"
+      :headers="headers"
+    >
+      <template #file="{ file }">
+        <image-preview
+          :url="file.url || file.response?.file_url"
+          :name="file.name"
+          :percentage="file.percentage"
+          @remove="fileList.splice(fileList.indexOf(file), 1)"
+        />
+      </template>
+      <el-button size="small" type="primary" class="btn btn-upload" round>{{
+        $t('hailuo.button.uploadStartImageUrl')
+      }}</el-button>
+    </el-upload>
   </div>
 </template>
 
@@ -29,6 +42,8 @@ import { defineComponent } from 'vue';
 import { ElButton, ElUpload, ElMessage, UploadFiles } from 'element-plus';
 import { getBaseUrlPlatform } from '@/utils';
 import InfoIcon from '@/components/common/InfoIcon.vue';
+import ImagePreview from '@/components/common/ImagePreview.vue';
+
 export const DEFAULT_CONTENT = '';
 
 interface IData {
@@ -41,7 +56,8 @@ export default defineComponent({
   components: {
     ElUpload,
     ElButton,
-    InfoIcon
+    InfoIcon,
+    ImagePreview
   },
   data(): IData {
     return {
@@ -103,25 +119,14 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.field {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between; // Distribute space evenly
-  .title {
-    font-size: 14px;
-    margin: 0;
-    width: 30%;
-  }
-  .value {
-    flex: 1;
-    margin-left: 60px; // Adjust this value as needed
-  }
-  .upload-wrapper {
-    transform: translate(-26px, 5px); // Move left and down
-  }
-  .info {
-    margin-left: auto; // Pushes the info icon to the right
-  }
+.title {
+  font-size: 14px;
+  margin-bottom: 0;
+  width: 30%;
+}
+.btn.btn-upload {
+  position: absolute;
+  top: 5px;
+  right: 0;
 }
 </style>

src/components/kling/ConfigPanel.vue

@@ -5,8 +5,8 @@
       <model-selector class="mb-4" />
       <mode-selector class="mb-4" />
       <ratio-selector class="mb-4" />
-      <start-image class="mb-4" />
-      <end-image class="mb-4" />
+      <start-image class="mb-2" />
+      <end-image class="mb-2" />
       <cfg-scale-selector class="mb-4" />
       <duration-selector class="mb-4" />
       <negative-prompt-input class="mb-4" />

src/components/kling/config/EndImage.vue

@@ -19,6 +19,14 @@
       :on-success="onSuccess"
       :headers="headers"
     >
+      <template #file="{ file }">
+        <image-preview
+          :url="file.url || file.response?.file_url"
+          :name="file.name"
+          :percentage="file.percentage"
+          @remove="fileList.splice(fileList.indexOf(file), 1)"
+        />
+      </template>
       <el-button round type="primary" size="small" class="btn btn-upload">
         <font-awesome-icon icon="fa-solid fa-upload" class="icon mr-1" />
         {{ $t('kling.button.uploadReferences') }}
@@ -33,6 +41,7 @@ import { ElUpload, ElButton, UploadFiles, UploadFile, ElMessage } from 'element-
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { getBaseUrlPlatform } from '@/utils';
 import InfoIcon from '@/components/common/InfoIcon.vue';
+import ImagePreview from '@/components/common/ImagePreview.vue';
 
 interface IData {
   fileList: UploadFiles;
@@ -44,6 +53,7 @@ export default defineComponent({
   components: {
     ElUpload,
     ElButton,
+    ImagePreview,
     InfoIcon,
     FontAwesomeIcon
   },
@@ -114,14 +124,3 @@ export default defineComponent({
   right: 0;
 }
 </style>
-
-<style lang="scss">
-.upload-wrapper {
-  height: auto;
-  display: flex;
-  .el-upload-list {
-    margin: 0;
-    width: 100%;
-  }
-}
-</style>

src/components/kling/config/StartImage.vue

@@ -19,6 +19,14 @@
       :on-success="onSuccess"
       :headers="headers"
     >
+      <template #file="{ file }">
+        <image-preview
+          :url="file.url || file.response?.file_url"
+          :name="file.name"
+          :percentage="file.percentage"
+          @remove="fileList.splice(fileList.indexOf(file), 1)"
+        />
+      </template>
       <el-button round type="primary" size="small" class="btn btn-upload">
         <font-awesome-icon icon="fa-solid fa-upload" class="icon mr-1" />
         {{ $t('kling.button.uploadReferences') }}
@@ -33,6 +41,7 @@ import { ElUpload, ElButton, UploadFiles, UploadFile, ElMessage } from 'element-
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { getBaseUrlPlatform } from '@/utils';
 import InfoIcon from '@/components/common/InfoIcon.vue';
+import ImagePreview from '@/components/common/ImagePreview.vue';
 
 interface IData {
   fileList: UploadFiles;
@@ -45,7 +54,8 @@ export default defineComponent({
     ElUpload,
     ElButton,
     InfoIcon,
-    FontAwesomeIcon
+    FontAwesomeIcon,
+    ImagePreview
   },
   emits: ['change'],
   data(): IData {

src/components/kling/task/Preview.vue

@@ -71,7 +71,7 @@
             {{ modelValue?.response?.error?.message }}
             <copy-to-clipboard :content="modelValue?.response?.error?.message!" class="btn-copy" />
           </p>
-          <p class="description">
+          <p v-if="modelValue?.response?.trace_id" class="description">
             <font-awesome-icon icon="fa-solid fa-hashtag" class="mr-1" />
             {{ $t('kling.name.traceId') }}:
             {{ modelValue?.response?.trace_id }}
@@ -99,6 +99,12 @@
             {{ modelValue?.id }}
             <copy-to-clipboard :content="modelValue?.id!" class="btn-copy" />
           </p>
+          <p v-if="modelValue?.response?.trace_id" class="description">
+            <font-awesome-icon icon="fa-solid fa-hashtag" class="mr-1" />
+            {{ $t('kling.name.traceId') }}:
+            {{ modelValue?.response?.trace_id }}
+            <copy-to-clipboard :content="modelValue?.response?.trace_id" class="btn-copy" />
+          </p>
         </el-alert>
       </div>
     </div>