update style

src/components/midjourney/ChaosSelector.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="field">
+    <h2 class="title">变异度</h2>
+    <el-slider v-model="value" :min="0" :max="100" :step="1" class="value" />
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import { ElSlider } from 'element-plus';
+const DEFAULT_CHAOS = 0;
+
+export default defineComponent({
+  name: 'ChaosSelector',
+  components: {
+    ElSlider
+  },
+  props: {
+    modelValue: {
+      type: String,
+      default: undefined
+    }
+  },
+  emits: ['update:modelValue'],
+  data() {
+    return {
+      value: this.modelValue
+    };
+  },
+  watch: {
+    modelValue(val) {
+      if (val !== this.value) {
+        this.value = val;
+      }
+    },
+    value(val) {
+      this.$emit('update:modelValue', val);
+    }
+  },
+  mounted() {
+    if (!this.value) {
+      this.value = DEFAULT_CHAOS;
+    }
+    this.$emit('update:modelValue', this.value);
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.field {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  .title {
+    font-size: 14px;
+    margin-bottom: 0;
+    width: 30%;
+  }
+  .value {
+    flex: 1;
+  }
+}
+</style>

src/components/midjourney/ModelSelector.vue

@@ -0,0 +1,116 @@
+<template>
+  <div>
+    <h2 class="title">模型</h2>
+    <div class="items">
+      <div
+        v-for="(option, optionKey) in options"
+        :key="optionKey"
+        :class="{ active: active === optionKey, item: true }"
+        @click="
+          active = optionKey;
+          value = option.value;
+        "
+      >
+        <el-image :src="option.image" fit="cover" class="image" />
+        <p class="name">
+          {{ option.label }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import { ElImage } from 'element-plus';
+export default defineComponent({
+  name: 'ModelSelector',
+  components: {
+    ElImage
+  },
+  props: {
+    modelValue: {
+      type: String,
+      default: undefined
+    }
+  },
+  emits: ['update:modelValue'],
+  data() {
+    return {
+      value: this.modelValue,
+      active: 0,
+      options: [
+        {
+          value: 'MJ',
+          label: '通用',
+          image: 'https://cdn.zhishuyun.com/2023-10-06-174633.png'
+        },
+        {
+          value: 'NIJI',
+          label: '动漫',
+          image: 'https://cdn.zhishuyun.com/2023-10-06-174008.png'
+        }
+      ]
+    };
+  },
+  watch: {
+    modelValue(val) {
+      if (val !== this.value) {
+        this.value = val;
+      }
+    },
+    value(val) {
+      this.$emit('update:modelValue', val);
+    }
+  },
+  mounted() {
+    this.$emit('update:modelValue', this.value);
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.title {
+  font-size: 14px;
+  margin-bottom: 10px;
+}
+.items {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+
+  .item {
+    width: 115px;
+    height: 60px;
+    border: 2px solid #eee;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    cursor: pointer;
+    border-radius: 5px;
+    position: relative;
+
+    .image {
+      width: 100%;
+      height: 100%;
+    }
+
+    .name {
+      display: block;
+      font-size: 18px;
+      color: white;
+      position: absolute;
+      top: 12px;
+      text-align: center;
+    }
+
+    &.active {
+      border-color: var(--el-color-primary);
+      .rect {
+        border-color: var(--el-color-primary);
+      }
+    }
+  }
+}
+</style>

src/components/midjourney/PresetPanel.vue

@@ -1,32 +1,51 @@
 <template>
-  <ratio-selector />
+  <div class="panel">
+    <model-selector v-model="preset.model" class="block" />
+    <ratio-selector v-model="preset.ratio" class="block" />
+    <version-selector v-model="preset.version" class="block" />
+
+    <stylize-selector v-model="preset.stylize" class="block" />
+    <chaos-selector v-model="preset.chaos" class="block" />
+  </div>
 </template>
 
 <script>
 import { defineComponent } from 'vue';
-import RatioSelector from './RatioSelecor.vue';
-
+import RatioSelector from './RatioSelector.vue';
+import VersionSelector from './VersionSelector.vue';
+import StylizeSelector from './StylizeSelector.vue';
+import ChaosSelector from './ChaosSelector.vue';
+import ModelSelector from './ModelSelector.vue';
 export default defineComponent({
   name: 'PresetPanel',
   components: {
-    RatioSelector
+    ModelSelector,
+    RatioSelector,
+    VersionSelector,
+    StylizeSelector,
+    ChaosSelector
   },
   data() {
     return {
-      options: [
-        {
-          value: '1:1',
-          label: '1:1'
-        }
-      ]
+      preset: {
+        ratio: undefined,
+        version: undefined,
+        stylize: undefined,
+        chaos: undefined
+      }
     };
   }
 });
 </script>
 
-<style lang="scss">
-.item {
-  width: 60px;
-  height: 100px;
+<style lang="scss" scoped>
+.panel {
+  border-right: 1px solid var(--el-border-color);
+  height: 100%;
+  padding: 10px;
+  background-color: var(--el-bg-color);
+  .block {
+    margin-bottom: 15px;
+  }
 }
 </style>