update qrart

src/components/qrart/ConfigPanel.vue

@@ -0,0 +1,70 @@
+<template>
+  <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" />
+    </div>
+    <div class="actions">
+      <el-button type="primary" class="btn" round @click="onGenerate">
+        {{ $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 { ElButton } from 'element-plus';
+
+export default defineComponent({
+  name: 'PresetPanel',
+  components: {
+    TypeSelector,
+    ContentInput,
+    PromptInput,
+    AspectRatioSelector,
+    ElButton
+  },
+  emits: ['generate'],
+  computed: {
+    config() {
+      return this.$store.state.qrart?.config;
+    }
+  },
+  methods: {
+    onGenerate() {
+      this.$emit('generate');
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.panel {
+  height: 100%;
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  .config {
+    width: 100%;
+    height: calc(100% - 50px);
+    flex: 1;
+    overflow-y: scroll;
+  }
+  .actions {
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .btn {
+      width: 100%;
+    }
+  }
+}
+</style>

src/components/qrart/config/AspectRatioSelector.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h2 class="title">{{ $t('qrart.name.ratio') }}</h2>
+    <h2 class="title">{{ $t('qrart.name.aspectRatio') }}</h2>
     <div class="items">
       <div
         v-for="(option, optionKey) in options"
@@ -24,39 +24,39 @@ import { defineComponent } from 'vue';
 import { MIDJOURNEY_DEFAULT_RATIO } from '@/constants';
 
 export default defineComponent({
-  name: 'RatioSelector',
+  name: 'AspectRatioSelector',
   data() {
     return {
       options: [
         {
           value: '1:1',
           label: '1:1',
-          width: 15,
-          height: 15
+          width: 30,
+          height: 30
         },
         {
           value: '4:3',
           label: '4:3',
-          width: 16,
-          height: 12
+          width: 32,
+          height: 24
         },
         {
           value: '3:4',
           label: '3:4',
-          width: 12,
-          height: 16
+          width: 24,
+          height: 32
         },
         {
           value: '16:9',
           label: '16:9',
-          width: 16,
-          height: 9
+          width: 32,
+          height: 18
         },
         {
           value: '9:16',
           label: '9:16',
-          width: 9,
-          height: 16
+          width: 18,
+          height: 32
         }
       ]
     };
@@ -67,13 +67,13 @@ export default defineComponent({
     },
     value: {
       get() {
-        return this.$store.state.qrart.preset?.ratio;
+        return this.$store.state.qrart.config?.aspect_ratio;
       },
       set(val) {
-        console.debug('set ratio', val);
-        this.$store.commit('qrart/setPreset', {
-          ...this.$store.state.qrart.preset,
-          ratio: val
+        console.debug('set aspect ratio', val);
+        this.$store.commit('qrart/setConfig', {
+          ...this.$store.state.qrart.config,
+          aspect_ratio: val
         });
       }
     }
@@ -98,8 +98,8 @@ export default defineComponent({
   justify-content: space-between;
 
   .item {
-    width: 40px;
-    height: 60px;
+    width: 65px;
+    height: 75px;
     border: 2px solid var(--el-border-color);
     display: flex;
     flex-direction: column;

src/components/qrart/config/ContentInput.vue

@@ -1,18 +1,18 @@
 <template>
   <div class="field">
     <h2 class="title">{{ $t('qrart.name.content') }}</h2>
-    <el-input v-model="value" size="small" class="content" />
+    <el-input v-model="value" class="content" :placeholder="$t('qrart.placeholder.content')" />
   </div>
 </template>
 
 <script>
 import { defineComponent } from 'vue';
 import { ElInput } from 'element-plus';
 
-export const DEFAULT_content = '';
+export const DEFAULT_CONTENT = '';
 
 export default defineComponent({
-  name: 'contentInput',
+  name: 'ContentInput',
   components: {
     ElInput
   },
@@ -35,25 +35,19 @@ export default defineComponent({
   },
   mounted() {
     if (!this.value) {
-      this.value = DEFAULT_content;
+      this.value = DEFAULT_CONTENT;
     }
   }
 });
 </script>
 
 <style lang="scss" scoped>
 .field {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-
   .title {
     font-size: 14px;
     margin: 0;
     width: 30%;
-  }
-  .value {
-    flex: 1;
+    margin-bottom: 10px;
   }
 }
 </style>

src/components/qrart/config/PromptInput.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="field">
     <h2 class="title">{{ $t('qrart.name.prompt') }}</h2>
-    <el-input v-model="value" size="small" class="prompt" />
+    <el-input v-model="value" :rows="3" type="textarea" class="prompt" :placeholder="$t('qrart.placeholder.prompt')" />
   </div>
 </template>
 
@@ -43,17 +43,11 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .field {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-
   .title {
     font-size: 14px;
     margin: 0;
     width: 30%;
-  }
-  .value {
-    flex: 1;
+    margin-bottom: 10px;
   }
 }
 </style>

src/components/qrart/config/TypeSelector.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="field">
-    <h2 class="title">{{ $t('qrart.name.version') }}</h2>
+    <h2 class="title">{{ $t('qrart.name.type') }}</h2>
     <el-select v-model="value" class="value" :placeholder="$t('qrart.placeholder.select')">
       <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
     </el-select>
@@ -30,20 +30,20 @@ export default defineComponent({
     return {
       options: [
         {
-          value: 'Text',
-          label: 'text'
+          label: 'Text',
+          value: 'text'
         },
         {
-          value: 'Link',
-          label: 'link'
+          label: 'Link',
+          value: 'link'
         }
       ]
     };
   },
   computed: {
     value: {
       get() {
-        return this.$store.state.midjourney.config?.type;
+        return this.$store.state.qrart.config?.type;
       },
       set(val) {
         console.debug('set type', val);