Update mj style (#161)

Co-authored-by: AceDataCloud <[email protected]>

change/@acedatacloud-nexior-fa09da0a-3543-46f5-b71a-b85c03f6aceb.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "update mj style",
+  "packageName": "@acedatacloud/nexior",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

src/assets/scss/_common.scss

@@ -44,19 +44,26 @@ html.dark,
   }
 
   .el-radio-group {
-    --el-border-radius-base: 15px;
+    --el-border-radius-base: 5px;
+  }
+
+  .el-slider {
+    --el-slider-button-wrapper-size: 14px;
+    --el-slider-button-wrapper-offset: -9px;
+    --el-slider-height: 6px;
+    --el-slider-button-size: 18px;
   }
 
   .el-textarea {
-    border-radius: 10px;
+    border-radius: 5px;
     textarea {
-      border-radius: 10px;
+      border-radius: 5px;
     }
   }
 
   .el-input {
     .el-input__wrapper {
-      border-radius: 10px;
+      border-radius: 5px;
       width: 100%;
       &.is-focus {
         box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;

src/assets/scss/_element.scss

@@ -1,3 +1,13 @@
+@forward 'element-plus/theme-chalk/src/common/var.scss' with (
+  $colors: (
+    'primary': (
+      'base': #277186
+    ),
+    'danger': (
+      'base': #ec4450
+    )
+  )
+);
 $--font-path: 'element-plus/theme-chalk/src/fonts';
 
 @import 'element-plus/theme-chalk/src/index.scss';

src/components/common/InfoIcon.vue

@@ -26,7 +26,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .icon {
-  display: block;
+  display: inline-block;
   width: 20px;
   border: 3px solid #aaa;
   border-radius: 50%;

src/components/midjourney/ConfigPanel.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="panel flex flex-col h-full">
+    <div class="flex-1 overflow-y-scroll p-4">
+      <model-selector class="mb-2" />
+      <prompt-input class="mb-2" />
+      <ratio-selector class="mb-4" />
+      <quality-selector class="mb-4" />
+      <version-selector class="mb-4" />
+      <reference-image class="mb-2" />
+      <elements-selector class="mb-2" />
+      <stylize-selector class="mb-2" />
+      <weird-selector class="mb-2" />
+      <chaos-selector class="mb-2" />
+      <image-weight-selector class="mb-2" />
+      <style-selector class="mb-2" />
+    </div>
+    <div class="h-12 px-4">
+      <div class="flex gap-1">
+        <mode-selector />
+        <el-button type="primary" class="btn w-full" round @click="$emit('generate')">
+          <font-awesome-icon icon="fa-solid fa-magic" class="mr-2" />
+          {{ $t('midjourney.button.generate') }}
+        </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import RatioSelector from './config/RatioSelector.vue';
+import VersionSelector from './config/VersionSelector.vue';
+import StylizeSelector from './config/StylizeSelector.vue';
+import ChaosSelector from './config/ChaosSelector.vue';
+import ModelSelector from './config/ModelSelector.vue';
+import QualitySelector from './config/QualitySelector.vue';
+import ImageWeightSelector from './config/ImageWeightSelector.vue';
+import WeirdSelector from './config/WeirdSelector.vue';
+import StyleSelector from './config/StyleSelector.vue';
+import ElementsSelector from './config/ElementsSelector.vue';
+import ModeSelector from './config/ModeSelector2.vue';
+import PromptInput from './config/PromptInput.vue';
+import ReferenceImage from './config/ReferenceImage.vue';
+import { ElButton } from 'element-plus';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+
+export default defineComponent({
+  name: 'ConfigPanel',
+  components: {
+    FontAwesomeIcon,
+    ElButton,
+    PromptInput,
+    ModeSelector,
+    ModelSelector,
+    ElementsSelector,
+    StyleSelector,
+    QualitySelector,
+    RatioSelector,
+    VersionSelector,
+    StylizeSelector,
+    ChaosSelector,
+    WeirdSelector,
+    ImageWeightSelector,
+    ReferenceImage
+  },
+  emits: ['generate'],
+  computed: {
+    config() {
+      return this.$store.state.midjourney.config;
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.panel {
+  border-right: 1px solid var(--el-border-color);
+}
+</style>