Merge branch 'main' of github.com:AceDataCloud/HubFrontend into germe…

…y/align-locale-thtme

CHANGELOG.json

@@ -1,6 +1,21 @@
 {
   "name": "@acedatacloud/hub",
   "entries": [
+    {
+      "date": "Sun, 05 May 2024 06:16:02 GMT",
+      "version": "1.1.1",
+      "tag": "@acedatacloud/hub_v1.1.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "cqc@cuiqingcai.com",
+            "package": "@acedatacloud/hub",
+            "commit": "c883d490c511b298d18eebff9ee5ee46a5e2965d",
+            "comment": "fix custom style of qrart"
+          }
+        ]
+      }
+    },
     {
       "date": "Fri, 03 May 2024 10:01:48 GMT",
       "version": "1.1.0",

CHANGELOG.md

@@ -1,9 +1,17 @@
 # Change Log - @acedatacloud/hub
 
-This log was last generated on Fri, 03 May 2024 10:01:48 GMT and should not be manually modified.
+This log was last generated on Sun, 05 May 2024 06:16:02 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.1.1
+
+Sun, 05 May 2024 06:16:02 GMT
+
+### Patches
+
+- fix custom style of qrart (cqc@cuiqingcai.com)
+
 ## 1.1.0
 
 Fri, 03 May 2024 10:01:48 GMT

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acedatacloud/hub",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "author": "Germey Technology <dev@germey.cn>",
   "repository": {
     "type": "git",

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;