Fix bug of custom style not work for QRArt (#37)

change/@acedatacloud-hub-b7ea4d64-c94e-4470-ba36-a7cbd4e9bc0b.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix custom style of qrart",
+  "packageName": "@acedatacloud/hub",
+  "email": "cqc@cuiqingcai.com",
+  "dependentChangeType": "patch"
+}

src/components/qrart/config/AspectRatioSelector.vue

@@ -21,7 +21,7 @@
 
 <script>
 import { defineComponent } from 'vue';
-import { QRART_DEFAULT_RATIO } from '@/constants';
+import { QRART_DEFAULT_ASPECT_RATIO } from '@/constants';
 
 export default defineComponent({
   name: 'AspectRatioSelector',
@@ -80,7 +80,7 @@ export default defineComponent({
   },
   mounted() {
     if (!this.value) {
-      this.value = QRART_DEFAULT_RATIO;
+      this.value = QRART_DEFAULT_ASPECT_RATIO;
     }
   }
 });

src/components/qrart/task/Detail.vue

@@ -12,6 +12,24 @@
               fit="contain"
               @error="onReload($event)"
             />
+            <el-alert v-else-if="task?.response?.success === false" :closable="false" class="failure">
+              <template #template>
+                <font-awesome-icon icon="fa-solid fa-exclamation-triangle" class="mr-1" />
+                {{ $t('qrart.name.failure') }}
+              </template>
+              <p class="description">
+                <font-awesome-icon icon="fa-solid fa-circle-info" class="mr-1" />
+                {{ $t('qrart.name.failureReason') }}:
+                {{ task?.response?.error?.message }}
+                <copy-to-clipboard :content="task?.response?.error?.message!" class="btn-copy" />
+              </p>
+              <p class="description">
+                <font-awesome-icon icon="fa-solid fa-hashtag" class="mr-1" />
+                {{ $t('qrart.name.traceId') }}:
+                {{ task?.response?.trace_id }}
+                <copy-to-clipboard :content="task?.response?.trace_id" class="btn-copy" />
+              </p>
+            </el-alert>
             <el-image v-else class="image error">
               <template #error>
                 <div class="image-slot">{{ $t('qrart.message.generating') }}</div>
@@ -68,25 +86,16 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import {
-  ElImage,
-  ElTag,
-  ElButton,
-  ElTooltip,
-  ElSkeleton,
-  ElAlert,
-  ElRow,
-  ElCol,
-  ElDescriptions,
-  ElDescriptionsItem
-} from 'element-plus';
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { ElImage, ElRow, ElCol, ElDescriptions, ElDescriptionsItem, ElAlert } from 'element-plus';
 import CopyToClipboard from '@/components/common/CopyToClipboard.vue';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 export default defineComponent({
   name: 'TaskDetail',
   components: {
     ElImage,
+    ElAlert,
+    FontAwesomeIcon,
     CopyToClipboard,
     ElDescriptions,
     ElDescriptionsItem,
@@ -158,5 +167,10 @@ export default defineComponent({
       transform: translate(-50%, -50%);
     }
   }
+  .failure {
+    background: var(--el-fill-color-light);
+    height: 100%;
+    width: 100%;
+  }
 }
 </style>

src/components/qrart/task/Preview.vue

@@ -1,12 +1,30 @@
 <template>
   <div class="preview">
     <el-image
-      v-if="modelValue?.response"
+      v-if="modelValue?.response?.image_url"
       v-loading="!modelValue?.response?.image_url"
       :src="modelValue?.response?.image_url"
       fit="contain"
       class="image"
     />
+    <el-alert v-else-if="modelValue?.response?.success === false" :closable="false" class="failure">
+      <template #template>
+        <font-awesome-icon icon="fa-solid fa-exclamation-triangle" class="mr-1" />
+        {{ $t('qrart.name.failure') }}
+      </template>
+      <p class="description">
+        <font-awesome-icon icon="fa-solid fa-circle-info" class="mr-1" />
+        {{ $t('qrart.name.failureReason') }}:
+        {{ modelValue?.response?.error?.message }}
+        <copy-to-clipboard :content="modelValue?.response?.error?.message!" class="btn-copy" />
+      </p>
+      <p class="description">
+        <font-awesome-icon icon="fa-solid fa-hashtag" class="mr-1" />
+        {{ $t('qrart.name.traceId') }}:
+        {{ modelValue?.response?.trace_id }}
+        <copy-to-clipboard :content="modelValue?.response?.trace_id" class="btn-copy" />
+      </p>
+    </el-alert>
     <el-image v-else class="image error">
       <template #error>
         <div class="image-slot">{{ $t('qrart.message.generating') }}</div>
@@ -20,13 +38,18 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { ElImage } from 'element-plus';
+import { ElImage, ElAlert } from 'element-plus';
 import { IQrartTask } from '@/models';
+import CopyToClipboard from '@/components/common/CopyToClipboard.vue';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 export default defineComponent({
   name: 'TaskPreview',
   components: {
-    ElImage
+    ElImage,
+    CopyToClipboard,
+    FontAwesomeIcon,
+    ElAlert
   },
   props: {
     modelValue: {
@@ -110,5 +133,10 @@ export default defineComponent({
       transform: translate(-50%, -50%);
     }
   }
+  .failure {
+    background: var(--el-fill-color-light);
+    height: 220px;
+    width: 220px;
+  }
 }
 </style>

src/constants/qrart.ts

@@ -1,10 +1,10 @@
 export const QRART_SERVICE_ID = '38ecf158-36f2-42f2-8e7f-6786cdfc2452';
 
-export const QRART_DEFAULT_QRW = 1.5;
-export const QRART_DEFAULT_STEPS = 16;
+export const QRART_DEFAULT_QRW = 2;
+export const QRART_DEFAULT_STEPS = 20;
 export const QRART_DEFAULT_PRESET = '';
-export const QRART_DEFAULT_TYPE = 'link';
-export const QRART_DEFAULT_RATIO = '1:1';
+export const QRART_DEFAULT_TYPE = 'text';
+export const QRART_DEFAULT_ASPECT_RATIO = '1:1';
 export const QRART_DEFAULT_ADVANCED = false;
 export const QRART_DEFAULT_RAWURL = true;
 export const QRART_DEFAULT_PADDING_LEVEL = 5;