Update qrart ux flow (#162)

Co-authored-by: AceDataCloud <office@acedata.cloud>

Author: Germey

change/@acedatacloud-nexior-d0cd8b45-22d1-479b-a770-e39c0c0e3dda.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "adjust ux flow for qrart",
+  "packageName": "@acedatacloud/nexior",
+  "email": "office@acedata.cloud",
+  "dependentChangeType": "patch"
+}

src/components/qrart/ConfigPanel.vue

@@ -1,9 +1,12 @@
 <template>
-  <div class="panel">
-    <div class="config">
+  <div class="panel flex flex-col h-full">
+    <div class="flex-1 overflow-y-scroll p-4">
       <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" />
+      <preset-selector class="mb-4" />
       <position-selector class="mb-4" />
       <advanced-selector class="mb-4" />
       <steps-selector v-if="config?.advanced" class="mb-4" />
@@ -16,6 +19,12 @@
       <padding-level-selector v-if="config?.advanced" class="mb-4" />
       <padding-noise-selector v-if="config?.advanced" class="mb-4" />
     </div>
+    <div class="h-12 px-4">
+      <el-button type="primary" class="btn w-full" round @click="$emit('generate')">
+        <font-awesome-icon icon="fa-solid fa-magic" class="mr-2" />
+        {{ $t('qrart.button.generate') }}
+      </el-button>
+    </div>
   </div>
 </template>
 
@@ -35,10 +44,17 @@ 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 PresetSelector from './config/PresetSelector2.vue';
+import ContentInput from './config/ContentInput.vue';
+import PromptInput from './config/PromptInput.vue';
+import { ElButton } from 'element-plus';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 export default defineComponent({
-  name: 'PresetPanel',
+  name: 'ConfigPanel',
   components: {
+    ElButton,
+    FontAwesomeIcon,
     TypeSelector,
     PositionSelector,
     PixelStyleSelector,
@@ -52,7 +68,10 @@ export default defineComponent({
     AdvancedSelector,
     MarkerShapeSelector,
     SubMarkerSelector,
-    RotateSelector
+    RotateSelector,
+    PresetSelector,
+    ContentInput,
+    PromptInput
   },
   emits: ['generate'],
   computed: {
@@ -65,23 +84,6 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .panel {
-  height: 100%;
-  padding: 15px;
-  display: flex;
-  flex-direction: column;
-  .config {
-    width: 100%;
-    height: calc(100% - 50px);
-    flex: 1;
-  }
-  .actions {
-    height: 50px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    .btn {
-      width: 100%;
-    }
-  }
+  border-right: 1px solid var(--el-border-color);
 }
 </style>

src/components/qrart/OperationPanel.vue

@@ -1,10 +1,16 @@
 <template>
   <div class="field">
-    <h2 class="title">{{ $t('qrart.name.content') }}</h2>
-    <el-radio-group v-model="inputWay" class="mb-4">
-      <el-radio-button label="input">{{ $t('qrart.inputWay.input') }} </el-radio-button>
-      <el-radio-button label="upload">{{ $t('qrart.inputWay.upload') }} </el-radio-button>
-    </el-radio-group>
+    <div class="flex justify-between items-center mb-4">
+      <div>
+        <span>{{ $t('qrart.name.content') }}</span>
+      </div>
+      <div class="flex items-center">
+        <el-radio-group v-model="inputWay">
+          <el-radio-button label="input">{{ $t('qrart.inputWay.input') }} </el-radio-button>
+          <el-radio-button label="upload">{{ $t('qrart.inputWay.upload') }} </el-radio-button>
+        </el-radio-group>
+      </div>
+    </div>
     <el-input
       v-if="inputWay == 'input'"
       v-model="value"
@@ -26,7 +32,7 @@
       :on-success="onSuccess"
       :headers="headers"
     >
-      <el-button type="primary" round>{{ $t('qrart.button.uploadQr') }}</el-button>
+      <el-button size="small" type="primary" round>{{ $t('qrart.button.uploadQr') }}</el-button>
     </el-upload>
     <p v-if="inputWay == 'upload'" class="description">
       {{ $t('qrart.message.uploadQr') }}

src/components/qrart/config/ContentInput.vue

@@ -194,17 +194,15 @@ export default defineComponent({
     flex-direction: row;
     justify-content: left;
     align-items: center;
-    flex-wrap: wrap;
-    height: auto;
     max-height: 210px;
     overflow-y: scroll;
 
     @media (max-width: 767px) {
       justify-content: center;
     }
     .item {
-      $height: 100px;
-      $width: 100px;
+      $height: 60px;
+      $width: 60px;
       position: relative;
       width: $width;
       height: $height;
@@ -214,7 +212,7 @@ export default defineComponent({
       border-style: solid;
       border-color: var(--el-border-color);
       border-radius: 5px;
-      overflow: hidden;
+      overflow: initial;
       cursor: pointer;
 
       &.hidden {
@@ -226,8 +224,8 @@ export default defineComponent({
       }
 
       .preview {
-        width: $height;
-        height: $width;
+        width: $height - 8px;
+        height: $width - 8px;
       }
       .name {
         position: absolute;

src/components/qrart/config/PresetSelector2.vue

@@ -1,7 +1,14 @@
 <template>
   <div class="field">
     <h2 class="title">{{ $t('qrart.name.prompt') }}</h2>
-    <el-input v-model="value" :rows="3" type="textarea" class="prompt" :placeholder="$t('qrart.placeholder.prompt')" />
+    <el-input
+      v-model="value"
+      :rows="3"
+      type="textarea"
+      class="prompt"
+      :placeholder="$t('qrart.placeholder.prompt')"
+      resize="none"
+    />
   </div>
 </template>
 

src/components/qrart/config/PromptInput.vue

@@ -43,8 +43,6 @@ export default defineComponent({
   .config {
     width: 300px;
     height: 100%;
-    overflow-y: scroll;
-    border-right: 1px solid var(--el-border-color);
   }
 
   .result {

src/layouts/Qrart.vue

@@ -1,7 +1,7 @@
 <template>
   <layout>
     <template #config>
-      <config-panel />
+      <config-panel @generate="onGenerate" />
     </template>
     <template #result>
       <application-status
@@ -13,7 +13,6 @@
         @refresh="onGetApplication"
       />
       <recent-panel class="panel recent" />
-      <operation-panel class="panel operation" @generate="onGenerate" />
     </template>
   </layout>
 </template>
@@ -27,7 +26,6 @@ import { IApplicationDetailResponse, IQrartGenerateRequest, Status } from '@/mod
 import { ElMessage } from 'element-plus';
 import { ERROR_CODE_DUPLICATION, ERROR_CODE_USED_UP } from '@/constants';
 import ApplicationStatus from '@/components/application/Status.vue';
-import OperationPanel from '@/components/qrart/OperationPanel.vue';
 import RecentPanel from '@/components/qrart/RecentPanel.vue';
 import { IQrartTask } from '@/models';
 
@@ -44,8 +42,7 @@ export default defineComponent({
     ConfigPanel,
     Layout,
     ApplicationStatus,
-    RecentPanel,
-    OperationPanel
+    RecentPanel
   },
   data(): IData {
     return {