From 019ad90085b8fc47b7e3e3b61f096548d6d9d602 Mon Sep 17 00:00:00 2001
From: carter <1978127466@qq.com>
Date: Mon, 19 Aug 2024 09:56:38 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BA=86MJ=E7=95=8C=E9=9D=A2?=
 =?UTF-8?q?=EF=BC=8C=E7=9B=AE=E5=89=8D=E8=BF=98=E6=98=AF=E9=9D=99=E6=80=81?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .idea/inspectionProfiles/Project_Default.xml  |   7 +
 chat/src/assets/images/MidjourneyBot.png      | Bin 0 -> 2209 bytes
 chat/src/main.ts                              |   2 +
 .../midjourney/components/historyItem.vue     |  18 +
 .../views/midjourney/components/mjRatio.vue   |  69 ++
 .../views/midjourney/components/mjfooter.vue  |  37 +
 chat/src/views/midjourney/components/mjp.vue  |  37 +
 .../midjourney/components/modelSelect.vue     |  49 ++
 .../views/midjourney/components/txtToImg.vue  | 256 +++++++
 chat/src/views/midjourney/index.vue           | 657 +++++-------------
 10 files changed, 662 insertions(+), 470 deletions(-)
 create mode 100644 .idea/inspectionProfiles/Project_Default.xml
 create mode 100644 chat/src/assets/images/MidjourneyBot.png
 create mode 100644 chat/src/views/midjourney/components/historyItem.vue
 create mode 100644 chat/src/views/midjourney/components/mjRatio.vue
 create mode 100644 chat/src/views/midjourney/components/mjfooter.vue
 create mode 100644 chat/src/views/midjourney/components/mjp.vue
 create mode 100644 chat/src/views/midjourney/components/modelSelect.vue
 create mode 100644 chat/src/views/midjourney/components/txtToImg.vue

diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
new file mode 100644
index 0000000..7c4836f
--- /dev/null
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -0,0 +1,7 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+    <inspection_tool class="Stylelint" enabled="true" level="ERROR" enabled_by_default="true" />
+  </profile>
+</component>
\ No newline at end of file
diff --git a/chat/src/assets/images/MidjourneyBot.png b/chat/src/assets/images/MidjourneyBot.png
new file mode 100644
index 0000000000000000000000000000000000000000..eeee63d17f0f8ebdbcdc6bf514a4b8e819ff8db6
GIT binary patch
literal 2209
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

literal 0
HcmV?d00001

diff --git a/chat/src/main.ts b/chat/src/main.ts
index 8525f22..1feae15 100644
--- a/chat/src/main.ts
+++ b/chat/src/main.ts
@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import { useMessage } from 'naive-ui'
+import naive from 'naive-ui'
 import '@/styles/lib/viewer.css'
 import VueViewer from 'v-viewer'
 import App from './App.vue'
@@ -17,6 +18,7 @@ window.$message = useMessage()
 async function bootstrap() {
   const app = createApp(App)
   app.use(VueViewer)
+	app.use(naive)
 	app.use(MotionPlugin)
   setupAssets()
   setupScrollbarStyle()
diff --git a/chat/src/views/midjourney/components/historyItem.vue b/chat/src/views/midjourney/components/historyItem.vue
new file mode 100644
index 0000000..a2894ab
--- /dev/null
+++ b/chat/src/views/midjourney/components/historyItem.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import MjBot from '@/assets/images/MidjourneyBot.png'
+</script>
+
+<template>
+  <n-flex vertical class="p-2">
+    <!--		header 头 -->
+    <n-flex align="start">
+      <n-avatar round size="large" :src="MjBot" />
+
+    </n-flex>
+    <!--		content -->
+  </n-flex>
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/chat/src/views/midjourney/components/mjRatio.vue b/chat/src/views/midjourney/components/mjRatio.vue
new file mode 100644
index 0000000..24903e9
--- /dev/null
+++ b/chat/src/views/midjourney/components/mjRatio.vue
@@ -0,0 +1,69 @@
+<script setup>
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+  ratios: {
+    type: Array,
+    default: () => [
+      { value: '1:1', name: '头像' },
+      { value: '3:2', name: '文章配图' },
+      { value: '3:4', name: '社交媒体' },
+      { value: '4:3', name: '公众号配图' },
+      { value: '9:16', name: '海报图' },
+    ],
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const selectedRatio = ref('')
+const customRatio = ref({ width: 1, height: 2 })
+
+const selectRatio = (ratio) => {
+  selectedRatio.value = ratio
+  emit('update:modelValue', ratio)
+}
+
+watch(customRatio, (newValue) => {
+  const ratio = `${newValue.width}:${newValue.height}`
+  selectRatio(ratio)
+}, { deep: true })
+
+const onlyAllowNumber = value => !value || /^\d+$/.test(value)
+</script>
+
+<template>
+  <div class=" p-1 rounded-lg">
+    <div class="grid grid-cols-5 gap-1 mb-2">
+      <button
+        v-for="(ratio, index) in ratios" :key="index"
+        class=" rounded  border-gray-400 text-sm min-w-10 flex flex-col justify-center items-center"
+        :class="{ 'text-blue-400': selectedRatio === ratio.value }"
+        style="font-size: 10px; border-width: 1px ;"
+        @click="selectRatio(ratio.value)"
+      >
+        <span>{{ ratio.value }}</span>
+        <span>{{ ratio.name }}</span>
+      </button>
+    </div>
+    <div class="grid grid-cols-2 gap-1 ">
+      <button
+        class=" rounded  border-gray-500  text-sm min-w-10 flex flex-col justify-center items-center"
+        :class="{ 'text-blue-400': selectedRatio === '16:9' }"
+        style="font-size: 10px; border-width: 1px ;"
+        @click="selectRatio('16:9')"
+      >
+        <span>16:9</span>
+        <span>电脑壁纸</span>
+      </button>
+      <div class="flex flex-col justify-center items-center border-gray-500  rounded px-2" style="border-width: 1px; font-size: 10px;">
+        <span class="mr-2" :class="{ 'text-blue-400': ratios.map(item => item.value).includes(selectedRatio) === -1 && selectedRatio !== '16:9' }">自定义</span>
+        <div class="grid grid-cols-9 items-center">
+          <n-input v-model:value="customRatio.width" type="text" :allow-input="onlyAllowNumber" class=" col-span-4" size="tiny" />
+          <span class="mx-1">:</span>
+          <n-input v-model:value="customRatio.height" type="text" :allow-input="onlyAllowNumber" class=" col-span-4" size="tiny" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/chat/src/views/midjourney/components/mjfooter.vue b/chat/src/views/midjourney/components/mjfooter.vue
new file mode 100644
index 0000000..82720d0
--- /dev/null
+++ b/chat/src/views/midjourney/components/mjfooter.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { ArrowRedoCircle } from '@vicons/ionicons5'
+</script>
+
+<template>
+  <n-thing class="relative">
+    <n-input
+      placeholder="输入你想要生成的图片内容，中文也可以"
+      class="w-full pt-2 pr-2 pl-2 pb-12 rounded"
+      size="small"
+      type="textarea"
+      clearable
+      :autosize="{
+        minRows: 2,
+        maxRows: 2,
+      }"
+    />
+    <n-flex class="absolute bottom-0  w-full p-2 rounded" justify="space-between">
+      <n-flex>
+        <n-select />
+      </n-flex>
+      <br>
+      <n-button color="#3074F8FF">
+        <template #icon>
+          <n-icon>
+            <ArrowRedoCircle />
+          </n-icon>
+        </template>
+        发送
+      </n-button>
+    </n-flex>
+  </n-thing>
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/chat/src/views/midjourney/components/mjp.vue b/chat/src/views/midjourney/components/mjp.vue
new file mode 100644
index 0000000..07865d8
--- /dev/null
+++ b/chat/src/views/midjourney/components/mjp.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { InformationCircle } from '@vicons/ionicons5'
+const prop = defineProps({
+  title: {
+    type: String,
+    require: true,
+  },
+  descriptions: {
+    type: Array as () => string[],
+    require: true,
+  },
+})
+</script>
+
+<template>
+  <div class="flex items-center space-x-2 ">
+    <n-text>
+      {{ prop.title }}
+    </n-text>
+    <n-popover trigger="hover" placement="right">
+      <template #trigger>
+        <n-icon size="18">
+          <InformationCircle />
+        </n-icon>
+      </template>
+      <div class="flex flex-col">
+        <span v-for="(description, index) in prop.descriptions" :key="index">
+          {{ description }}
+        </span>
+      </div>
+    </n-popover>
+  </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/chat/src/views/midjourney/components/modelSelect.vue b/chat/src/views/midjourney/components/modelSelect.vue
new file mode 100644
index 0000000..82aaa14
--- /dev/null
+++ b/chat/src/views/midjourney/components/modelSelect.vue
@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import nijiImg from '@/assets/images/niji.png'
+import mjImg from '@/assets/images/mj.png'
+interface Option {
+  title: string
+  image: string
+	v: string
+}
+
+const emit = defineEmits<{
+  (e: 'select', v: string): void
+}>()
+
+const options: Option[] = [
+  { title: 'Midjourney', image: mjImg, v: 'MJ' },
+  { title: 'Niji', image: nijiImg, v: 'NIJI' },
+]
+
+const selected = ref<number | null>(0)
+
+const selectOption = (index: number) => {
+  selected.value = index
+  emit('select', options[index].v)
+}
+</script>
+
+<template>
+  <div class="flex space-x-4">
+    <div
+      v-for="(option, index) in options"
+      :key="index"
+      class="relative cursor-pointer transition-all duration-300 ease-in-out rounded-lg border-2 p-4 w-32 h-12"
+      :class="[
+        selected === index ? 'border-blue-500' : 'border-gray-300',
+      ]"
+      @click="selectOption(index)"
+    >
+      <div
+        class="absolute inset-0 bg-cover bg-center transition-opacity duration-300 ease-in-out rounded"
+        :style="{ backgroundImage: `url(${option.image})` }"
+        :class="[selected === index ? 'opacity-100' : 'opacity-50']"
+      />
+      <div class="relative z-10 text-white font-bold flex justify-center">
+        {{ option.title }}
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/chat/src/views/midjourney/components/txtToImg.vue b/chat/src/views/midjourney/components/txtToImg.vue
new file mode 100644
index 0000000..26774db
--- /dev/null
+++ b/chat/src/views/midjourney/components/txtToImg.vue
@@ -0,0 +1,256 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { UploadFileInfo } from 'naive-ui'
+import modelSelect from './modelSelect.vue'
+import Mjp from '@/views/midjourney/components/mjp.vue'
+import MjRatio from '@/views/midjourney/components/mjRatio.vue'
+
+// const modelList = [
+// 	{ name: 'MJ', img: mjImg, val: 'mj' },
+// 	{ name: 'NIJI', img: nijiImg, val: 'niji' },
+// ]
+interface modelVersion {
+  MJ: string[]
+  NIJI: string[]
+}
+
+interface MjParamter {
+  model: string
+  version: string
+  selectedRatio: string
+  feature: string
+  chaos: number
+  stylize: number
+  base64Array: string[]
+  iw: number
+  cref: number
+  sref: number
+}
+const containerRef = ref<HTMLElement | undefined>(undefined)
+const mjParamter = ref<MjParamter>({
+  model: 'MJ',
+  version: 'V6.1',
+  selectedRatio: '1:1',
+  feature: '',
+  chaos: 0,
+  stylize: 1,
+  base64Array: [],
+  iw: 0.3,
+  cref: 100,
+  sref: 180,
+})
+
+const featureList = [
+  { label: '普通', vallue: '.25' },
+  { label: '一般', vallue: '.5' },
+  { label: '高清', vallue: '1' },
+  { label: '超高清', vallue: '2' },
+]
+
+const defaultImages = ref<UploadFileInfo[]>([])
+
+const crefImages = ref<UploadFileInfo[]>([])
+
+const modelVersionList = ref<modelVersion>({
+  MJ: ['V6.1', 'V6', 'V5.2', 'V5.1', 'V5'],
+  NIJI: ['V6.1', 'V6', 'V5'],
+})
+const onlyAllowNumber = (value: string | number): boolean => {
+  if (typeof value === 'number')
+    return value <= 4294967295
+
+  return !value || /^\d+$/.test(value)
+}
+</script>
+
+<template>
+  <div ref="containerRef" class="min-h-screen light:text-gray-400 flex-col space-y-4 relative">
+    <div class="space-y-1">
+      <Mjp title="模型选择" :descriptions="['MJ: 偏真实通用模型', 'NIJI: 偏动漫风格、适用于二次元模型']" />
+      <div>
+        <modelSelect @select="v => { mjParamter.model = v }" />
+      </div>
+    </div>
+    <div>
+      <n-grid cols="6" class="flex items-center">
+        <n-grid-item span="1">
+          <n-text>
+            版本
+          </n-text>
+        </n-grid-item>
+        <n-grid-item span="5">
+          <n-radio-group v-model:value="mjParamter.version" name="radio" class="rounded" size="small">
+            <n-radio-button v-for="item in modelVersionList[mjParamter.model]" :key="item" size="small" :value="item" :label="item" />
+          </n-radio-group>
+        </n-grid-item>
+      </n-grid>
+    </div>
+    <div class="space-y-1">
+      <Mjp title="图片比例" :descriptions="['参数释义：生成图片尺寸比例']" />
+      <div>
+        <MjRatio />
+      </div>
+    </div>
+    <div>
+      <n-grid cols="16" class="items-center">
+        <n-grid-item span="4">
+          <n-text>
+            品质
+          </n-text>
+        </n-grid-item>
+        <n-grid-item span="12" class="flex justify-end">
+          <n-radio-group v-model:value="mjParamter.feature" name="featureRadio" class="rounded" size="small">
+            <n-radio-button v-for="item in featureList" :key="item.vallue" :value="item.vallue" size="small" :label="item.label" />
+          </n-radio-group>
+        </n-grid-item>
+      </n-grid>
+    </div>
+    <div class="space-y-1">
+      <n-flex justify="space-between">
+        <Mjp title="混乱程度" :descriptions="['取值范围：0-100、 --chaos 或 --c', '混乱级别，可以理解为让AI天马行空的空间', '值越小越可靠、默认0最为精准']" />
+        <br>
+        <n-flex>
+          <n-text>
+            当前程度:
+          </n-text>
+          <div class="w-20">
+            <n-input-number v-model:value="mjParamter.chaos" size="tiny" :max="100" :min="0" />
+          </div>
+        </n-flex>
+      </n-flex>
+      <div>
+        <n-slider v-model:value="mjParamter.chaos" style="--n-fill-color:rgb(90, 145, 252);--n-fill-color-hover:rgb(62,116,222)" size="small" />
+      </div>
+    </div>
+    <div class="space-y-1">
+      <n-flex justify="space-between">
+        <Mjp title="风格化程度" :descriptions="['风格化：--stylize 或 --s，范围 1-', '1000参数释义：数值越高，画面表现', '也会更具丰富性和艺术性']" />
+        <br>
+        <n-flex>
+          <n-text>
+            当前程度:
+          </n-text>
+          <div class="w-20">
+            <n-input-number v-model:value="mjParamter.stylize" size="tiny" :max="1000" :min="0" />
+          </div>
+        </n-flex>
+      </n-flex>
+      <div>
+        <n-slider v-model:value="mjParamter.stylize" :max="1000" :min="0" style="--n-fill-color:rgb(90, 145, 252);--n-fill-color-hover:rgb(62,116,222)" size="small" />
+      </div>
+    </div>
+    <div>
+      <n-flex justify="space-between">
+        <Mjp title="Seed" :descriptions="['种子数是为每个图像随机生成的，', '如果您使用相同的种子号和提示，', '您将获得相似的最终图像。', '范围为0–4294967295的整数。', '您可以在右侧找到喜欢的图片获取到此值！']" />
+        <br>
+        <div>
+          <n-input :allow-input="onlyAllowNumber" size="tiny" class="text-center" />
+        </div>
+      </n-flex>
+    </div>
+    <div class="space-y-2">
+      <Mjp title="垫图生图（普通参考图)" :descriptions="['普通参考图、数量最多五张', '参数的范围是0-3，3代表与原图最接近']" />
+      <n-upload
+        :default-file-list="defaultImages"
+        list-type="image-card"
+        :max="5"
+      >
+        点击上传
+      </n-upload>
+    </div>
+    <div class="space-y-2">
+      <n-flex justify="space-between">
+        <Mjp title="普通参考图权重" :descriptions="['数值越大对绘制结果影响越大']" />
+        <br>
+        <n-flex>
+          <n-text>
+            当前程度:
+          </n-text>
+          <div class="w-20">
+            <n-input-number v-model:value="mjParamter.iw" size="tiny" :max="3" :min="0" :step="0.01" />
+          </div>
+        </n-flex>
+      </n-flex>
+      <div>
+        <n-slider v-model:value="mjParamter.iw" :max="3" :step="0.01" :min="0" style="--n-fill-color:rgb(90, 145, 252);--n-fill-color-hover:rgb(62,116,222)" size="small" />
+      </div>
+    </div>
+    <div class="space-y-2">
+      <Mjp title="垫图生图（角色一致参考图)" :descriptions="['角色一致参考图、数量最多两张', '参数的范围是0-100', '0表示人脸，100表示脸、头发和全身']" />
+      <n-upload
+        :default-file-list="crefImages"
+        list-type="image-card"
+        :max="2"
+      >
+        点击上传
+      </n-upload>
+    </div>
+    <div class="space-y-2">
+      <n-flex justify="space-between">
+        <Mjp title="角色一致参考图权重" :descriptions="['数值越大对绘制结果影响越大']" />
+        <br>
+        <n-flex>
+          <n-text>
+            当前程度:
+          </n-text>
+          <div class="w-16">
+            <n-input-number v-model:value="mjParamter.cref" size="tiny" :max="100" :min="0" />
+          </div>
+        </n-flex>
+      </n-flex>
+      <div>
+        <n-slider v-model:value="mjParamter.cref" :max="100" :min="0" style="--n-fill-color:rgb(90, 145, 252);--n-fill-color-hover:rgb(62,116,222)" size="small" />
+      </div>
+    </div>
+    <div class="space-y-2">
+      <Mjp title="垫图生图（风格一致参考图)" :descriptions="['风格一致参考图', '参数的范围是0-1000', '0表示不使用风格', '不能和角色一致垫图一起使用！']" />
+      <n-upload
+        :default-file-list="crefImages"
+        list-type="image-card"
+        :max="2"
+      >
+        点击上传
+      </n-upload>
+    </div>
+    <div class="space-y-2 pb-6">
+      <n-flex justify="space-between">
+        <Mjp title="风格一致参考图权重" :descriptions="['数值越大对绘制结果影响越大']" />
+        <br>
+        <n-flex>
+          <n-text>
+            当前程度:
+          </n-text>
+          <div class="w-16">
+            <n-input-number v-model:value="mjParamter.sref" size="tiny" :max="1000" :min="0" />
+          </div>
+        </n-flex>
+      </n-flex>
+      <div>
+        <n-slider v-model:value="mjParamter.sref" :max="1000" :min="0" style="--n-fill-color:rgb(90, 145, 252);--n-fill-color-hover:rgb(62,116,222)" size="small" />
+      </div>
+    </div>
+<!--    <div>-->
+<!--      <n-affix :bottom="0" :trigger-bottom="50" class="w-72 bg-[#f8f8f8] dark:bg-[#18181c] left-16 h-16" position="fixed" :listen-to="() => containerRef">-->
+<!--        <n-flex>-->
+<!--          <n-text>-->
+<!--            绘画积分余额-->
+<!--          </n-text>-->
+<!--        </n-flex>-->
+<!--      </n-affix>-->
+<!--    </div>-->
+  </div>
+</template>
+
+<style scoped>
+.absolute-anchor-container {
+	width: 100%;
+	height: 200px;
+	position: relative;
+}
+.containerRef {
+	height: 200px;
+	background-color: rgba(128, 128, 128, 0.3);
+	border-radius: 3px;
+	overflow: auto;
+}
+</style>
diff --git a/chat/src/views/midjourney/index.vue b/chat/src/views/midjourney/index.vue
index ed66358..2e4a129 100644
--- a/chat/src/views/midjourney/index.vue
+++ b/chat/src/views/midjourney/index.vue
@@ -1,22 +1,12 @@
 <script lang="ts" setup>
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import {
-  NButton,
-  NInput,
-  NInputNumber,
-  NScrollbar,
-  NSelect,
-  NSpace,
-  NSwitch,
-  NTooltip,
   useDialog,
   useMessage,
 } from 'naive-ui'
 import axios from 'axios'
 import { useRoute, useRouter } from 'vue-router'
-import cardItem from './components/cardItem.vue'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
-import { SvgIcon } from '@/components/common'
 import nijiImg from '@/assets/images/niji.png'
 import mjImg from '@/assets/images/mj.png'
 import {
@@ -30,9 +20,10 @@ import {
   fetchGetMjPromptAssociateApi,
   fetchGetMjPromptFanyiApi,
 } from '@/api/index'
-import Loading from '@/components/base/Loading.vue'
 import { useAppStore, useAuthStore } from '@/store'
-import marketImg from '@/assets/market.png'
+import TxtToImg from '@/views/midjourney/components/txtToImg.vue'
+import Mjfooter from '@/views/midjourney/components/mjfooter.vue'
+import HistoryItem from "@/views/midjourney/components/historyItem.vue";
 
 interface PromptItem {
   status: boolean
@@ -472,299 +463,18 @@ onMounted(() => {
 <template>
   <div class="grow flex h-screen flex-col lg:pt-0">
     <div class="flex grow flex-col sm:flex-row h-full">
-      <div
-        class="p-4 sm:pt-6 bg-[#f8f8f8] p-4 dark:bg-[#18181c] overflow-y-auto w-full sm:w-[20rem] shrink-0 border-r-2 border-[#ffffff17]"
-      >
-        <div class="mt-4 text-sm flex items-center">
-          <div class="text-sm mr-1">
-            图片尺寸
-          </div>
-
-          <div data-tool-target="tooltip-default">
-            <NTooltip placement="right-end" trigger="hover">
-              <template #trigger>
-                <SvgIcon icon="ri:error-warning-line" class="text-base" />
-              </template>
-              参数释义：生成图片尺寸比例
-            </NTooltip>
-          </div>
-        </div>
-        <div
-          class="flex mt-2 py-1 pb-2 space-x-1 overflow-x-auto justify-between scrollbar-none"
-        >
-          <button
-            v-for="(item, index) in sizeList"
-            :key="index"
-            class="flex-1 p-[2px] rounded-md"
-            @click="aspect = item.aspect"
-          >
-            <div
-              class="border-2 border-gray-300 box-borde rounded-md dark:bg-black flex flex-col items-center"
-              :class="[
-                activeAspect(item.aspect) ? 'aspect-active' : '',
-                isMobile ? 'py-3' : 'py-2',
-              ]"
-            >
-              <div class="flex items-center justify-center w-6 h-6">
-                <div
-                  class="border-gray-300 rounded border-2"
-                  :class="[activeAspect(item.aspect) ? 'aspect-active' : '']"
-                  :style="{ width: item.width, height: item.height }"
-                />
-              </div>
-              <div class="mt-2 text-center text-xs leading-none text-current">
-                {{ item.aspect }}
-              </div>
-            </div>
-          </button>
-        </div>
-
-        <!-- 模型 -->
-        <div class="mt-4 text-sm flex items-center">
-          <div class="mr-1">
-            模型选择
-          </div>
-          <div data-tool-target="tooltip-default">
-            <NTooltip placement="right-end" trigger="hover">
-              <template #trigger>
-                <SvgIcon icon="ri:error-warning-line" class="text-base" />
-              </template>
-              <div style="width: 240px">
-                <p>MJ: 偏真实通用模型</p>
-                <p>NIJI: 偏动漫风格、适用于二次元模型</p>
-              </div>
-            </NTooltip>
-          </div>
-        </div>
-        <ul class="mt-2 flex justify-between">
-          <li
-            v-for="(item, index) in modelList"
-            :key="index"
-            class="flex border-[3px] border-transparent justify-center items-center rounded-md m-1 m-bg-gradient"
-            :class="[activeModel(item.name) ? 'model-active' : '']"
-            @click="setModel(item.name)"
-          >
-            <button
-              class="relative w-full h-full dark:bg-black rounded"
-              type="button"
-            >
-              <div
-                class="absolute w-full h-full flex justify-center items-center"
-              >
-                <div
-                  class="text-2xl text-white font-bold absolute left-5 top-1"
-                >
-                  {{ item.name }}
-                </div>
-              </div>
-              <img
-                :src="item.img"
-                class="rounded aspect-[3/1] w-full object-cover"
-              >
-            </button>
-          </li>
-        </ul>
-        <div class="mt-4">
-          <div class="mt-2 flex justify-between items-center space-x-2 text-xs">
-            <span class="w-[65px] block text-sm">版本</span>
-            <span class="flex-1">
-              <NSelect
-                v-model:value="version"
-                size="small"
-                :options="versionOptions"
-              />
-            </span>
-          </div>
-          <div
-            v-if="model === 'NIJI'"
-            class="mt-2 flex justify-between items-center space-x-2 text-xs"
-          >
-            <span class="w-[65px] block text-sm">风格</span>
-            <span class="flex-1">
-              <NSelect
-                v-model:value="style"
-                size="small"
-                :options="styleOptions"
-              />
-            </span>
-          </div>
-          <!-- <div class="block text-sm mt-2 flex items-center">
-            参数
-            <NTooltip placement="right-end" trigger="hover">
-              <template #trigger>
-                <SvgIcon icon="ri:error-warning-line" class="text-base ml-2" />
-              </template>
-              <div style="width: 240px">
-                <p>合理使用参数绘制更为理想的结果！</p>
-              </div>
-            </NTooltip>
-          </div> -->
-          <div class="mt-3 flex justify-between items-center space-x-2 text-xs">
-            <span class="w-[65px] block text-sm">品质</span>
-            <span class="flex-1">
-              <NSelect
-                v-model:value="quality"
-                size="small"
-                :options="qualityOptions"
-              />
-            </span>
-          </div>
-          <div class="mt-3 flex justify-between items-center space-x-2 text-xs">
-            <span class="w-[65px] block text-sm">混乱</span>
-            <span class="flex-1">
-              <NInputNumber
-                v-model:value="chaos"
-                :min="0"
-                :max="100"
-                size="small"
-              />
-            </span>
-            <NTooltip placement="right-end" trigger="hover">
-              <template #trigger>
-                <SvgIcon icon="ri:error-warning-line" class="text-base ml-2" />
-              </template>
-              <div style="width: 270px">
-                <p>取值范围：0-100、 --chaos 或 --c</p>
-                <p>混乱级别，可以理解为让AI天马行空的空间</p>
-                <p>值越小越可靠、默认0最为精准</p>
-              </div>
-            </NTooltip>
-          </div>
-
-          <div
-            v-if="model === 'MJ'"
-            class="mt-3 flex justify-between items-center space-x-2 text-xs"
-          >
-            <span class="w-[65px] block text-sm">风格化</span>
-            <span class="flex-1">
-              <NInputNumber
-                v-model:value="stylize"
-                :min="0"
-                :max="1000"
-                size="small"
-              />
-            </span>
-            <NTooltip placement="right-end" trigger="hover">
-              <template #trigger>
-                <SvgIcon icon="ri:error-warning-line" class="text-base ml-2" />
-              </template>
-              <div style="width: 270px">
-                <p>风格化：--stylize 或 --s，范围 1-1000</p>
-                <p>参数释义：数值越高，画面表现也会更具丰富性和艺术性</p>
-              </div>
-            </NTooltip>
-          </div>
-
-          <!-- <div class="block text-sm mt-2 flex items-center">设定</div> -->
-          <div class="mt-3 flex justify-between items-center space-x-2 text-xs">
-            <span class="w-[65px] block text-sm">携带参数</span>
-            <span class="flex-1">
-              <NSwitch
-                v-model:value="carryOptions"
-                size="small"
-                :checked-value="1"
-                :unchecked-value="0"
-              />
-            </span>
-            <NTooltip placement="right-end" trigger="hover">
-              <template #trigger>
-                <SvgIcon icon="ri:error-warning-line" class="text-base ml-2" />
-              </template>
-              <div style="width: 240px">
-                <p>是否自动携带参数</p>
-                <p>打开：携带上述我们配置的参数</p>
-                <p>关闭：使用指令中的我们自定义的参数</p>
-              </div>
-            </NTooltip>
-          </div>
-        </div>
-
-        <div class="mt-5">
-          <div class="block text-base">
-            以图生图
-          </div>
-          <div class="ant-spin-nested-loading css-4fssqp mt-5">
-            <div class="ant-spin-container">
-              <div
-                class="mt-2 flex justify-center items-center dark:bg-black p-5 rounded-md"
-              >
-                <label v-if="!dataBase64" for="upload-file">
-                  <div
-                    class="upload cursor-pointer"
-                    @dragover.prevent
-                    @dragenter.prevent
-                    @dragleave.prevent
-                    @drop="handleDrop"
-                  >
-                    <input
-                      id="upload-file"
-                      type="file"
-                      accept=".png, .jpg, .jpeg"
-                      style="display: none"
-                      @change="handleFileSelect($event)"
-                    >
-                    <div class="upload-container">
-                      <img
-                        class="mx-auto py-2 w-11"
-                        src="data:image/png;base64,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"
-                      >
-                      <p class="mt-3">点击或拖拽一个图片到这里作为输入</p>
-                      <p class="text-center dark:text-[#ffffff73]">
-                        支持PNG和JPG格式
-                      </p>
-                    </div>
-                  </div>
-                </label>
-                <div v-if="dataBase64" class="w-full h-full relative">
-                  <img :src="dataBase64" alt="">
-                  <img
-                    class="absolute bottom-1 right-1 cursor-pointer"
-                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAD0klEQVRIiY2WS2xWRRTHf/+ZryimPqLhocEAMbrQqBvYK4G2ArJxw0YxqLSo3bgQceFKo4mJywoYUBFZAilNRKVEN8ZoF2xYoiUhaSISExsVtJxj5n5z+917ez/xTk7uPM+Z8/qf0cnxWQxhru6/ToOOHja02dAGQ+sN3WNIjn4zdNHQjKNpQxcMzTsUPDzzKceaHP+5x7wnbJmhJw2NGtqWxzUGVXL0t6EvDQ5kodebgjqh6OZPgLMK2A+MAreSp0sy6l+eWwY8DYw4HALecZgjC0kyOrGrWG7hfokJwXZ5f+ZV4d01L0ZCAwavAA847AVmy9WQpGVaFbCJgG0PGEFG8a9QrFB9zYk9PolGAn4g4PeV6yF2N90S8X0R357HXVKlX2dUoz5rwwF/M+DLi3GWuCngr7ZstiC/0WTapECxx6p7un3bG/EtpUa3RWw0YgOxbh6P2LGIvR7lc6V2LZe5EvD9Af844jfqZvXkmpcDfnvqPBLwoRYGCwH/IeAfBGwsYL9U/ZYv82ssbm3vR+y7gFmLSZO1Hu9EfEiwXI0wFgwI3hBcEkwK/hIclVidItLgCrAbmAKGgLeAgaURWcwNJR9taEZXhdYE/EjW+OuAvxDw+Sj/M8r3RHwq4psi/mnE1/YLmohvTBqtb9GmQrZC6DOhF4VOCz1nqAM6hTSC6wiE1S2plnl4ytR1CRnubtvUSMyVguOCXYITeW5HNuWd8mrS95otXpfBJEil5AQWTY0qqBCBDm1j5fTvf1klCEoovKbHti4qt6tCe4ROCG1NUCN0UoSdgsOFxsonfKn5DeaTRj8BjzbBs7LpKvB8jq4twOdZk51gU6BnQcdAK7p3F/gSTrMpj2b+A2LmAovR9UTEP4n4XREfjPjhiA9H/KuI74745X7QFfGZhAwpbK/Xw7FIxoWIvRexEwF7KmDHA9YDyQKE/WjAdwR8KuNaj48W+f2TUiOZ7gJwFnxb6ZFutBCAx+jC/j7g3krIl75bKXRQaK3Qg0KdSskh++0bOed1cfz7dGyro0lDsVE5zbrUaSnzVVpI5b15Pp99xtCpsh6dC/hEE6EzKHZuht4RT4kfW+Y/Sq5J/YKJ4JrBu8BDguF6RfU+SdiPQnnwHPA28AeNCpsibCzgZ3ItySjdv9i1UxFI0xF7KWKXy7ITGgxmA747YB+mMtEU8j+qbSoThwK+K+Vnda0wXTJVqXB+vbwm+MJgLJeAzk0eKQuCacFBwZlcUmrGXXxulVDl3RfNNYfTwLcpxAWbDTYC68DvyP6aF7pk6EfQWdB50O+tvkP8C8uzPO7HeTXiAAAAAElFTkSuQmCC"
-                    @click="dataBase64 = null"
-                  >
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="mt-5">
-          <div class="block flex justify-between">
-            <span class="text-base py-1">钱包余额(<b class="text-[#3076fd]">{{ sumDrawMjCount || 0 }}</b>
-              积分)</span>
-            <span class="flex items-center">
-              <NButton
-                text
-                size="tiny"
-                type="primary"
-                :loading="refreshLoading"
-                @click="refreshUserInfo"
-              >刷新</NButton>
-              <NTooltip placement="right-end" trigger="hover">
-                <template #trigger>
-                  <SvgIcon
-                    icon="ri:error-warning-line"
-                    class="text-base ml-2"
-                  />
-                </template>
-                绘画账户信息
-              </NTooltip>
-            </span>
-          </div>
-          <div class="mt-3 space-y-1 items-center text-[#3076fd]">
-            <div class="flex justify-between">
-              <span class="w-[120px] block text-sm">绘画单次消耗：</span>
-              <span class="text-sm pr-2"> 4积分 </span>
-            </div>
-            <div class="flex justify-between">
-              <span class="w-[120px] block text-sm">图生图单次消耗：</span>
-              <span class="text-sm pr-2"> 4积分 </span>
-            </div>
-            <div class="flex justify-between">
-              <span class="w-[120px] block text-sm">放大单次消耗：</span>
-              <span class="text-sm pr-2"> 1积分 </span>
-            </div>
-          </div>
-        </div>
+      <div class="pl-4 pb-2 pr-4 pt-2 sm:pt-2 bg-[#f8f8f8] dark:bg-[#18181c] overflow-y-auto w-full sm:w-[19.5rem] shrink-0 border-r-2 border-[#ffffff17] ">
+        <NTabs type="line" animated justify-content="center">
+          <NTabPane name="t2i" tab="文生图">
+            <TxtToImg />
+          </NTabPane>
+          <NTabPane name="iai" tab="混图">
+            混图
+          </NTabPane>
+          <NTabPane name="upface" tab="换脸">
+            换脸
+          </NTabPane>
+        </NTabs>
       </div>
 
       <!-- 右 -->
@@ -773,175 +483,182 @@ onMounted(() => {
         :class="[isMobile ? '' : 'overflow-y-auto overflow-hidden']"
       >
         <div class="m-auto max-w-screen-4xl">
-          <div class="space-y-6 p-4">
-            <h3 class="text-lg sm:text-2xl font-bold leading-6">
-              Midjourney
-            </h3>
-            <!-- <p>图生图：生成类似风格或类型图像；图生文：上传一张图片生成对应的提示词；融图：融合图片风格</p> -->
-            <div>
-              <div class="flex justify-between items-end">
-                <b>你想生成什么图像?</b>
-                <NSpace>
-                  <NButton
-                    type="primary"
-                    :loading="translateLoading"
-                    @click="handleFanyiPrompt"
-                  >
-                    <template #icon>
-                      <SvgIcon icon="ri:translate" class="text-base" />
-                    </template>
-                    翻译
-                  </NButton>
-                  <NButton
-                    type="primary"
-                    :loading="associateLoading"
-                    @click="handleAssociatePrompt"
-                  >
-                    <template #icon>
-                      <SvgIcon
-                        icon="material-symbols:mindfulness-outline-rounded"
-                        class="text-base"
-                      />
-                    </template>
-                    联想
-                  </NButton>
-                </NSpace>
-              </div>
-              <div class="mt-4">
-                <NInput
-                  v-model:value="prompt"
-                  type="textarea"
-                  :disabled="associateLoading || translateLoading"
-                  :autosize="{
-                    minRows: 4,
-                    maxRows: 6,
-                  }"
-                  placeholder="例如: A cute little cat (Midjourney对中文描述词有一定限制、我们建议您点击右侧翻译将您的描述词转为英文再进行提交、联想则是会将您的描述词交由GPT让其发挥想象空间为您在此基础创建更为详细的描述！)"
-                />
-                <div
-                  v-if="Number(authStore.globalConfig.mjHideNotBlock) !== 1"
-                  class="mt-4"
-                >
-                  <div class="mb-3 flex justify-between items-end">
-                    <b>不需要的元素</b>
-                    <NButton
-                      type="primary"
-                      :loading="translateNoLoading"
-                      @click="handleFanyiNoPrompt"
-                    >
-                      <template #icon>
-                        <SvgIcon icon="ri:translate" class="text-base" />
-                      </template>
-                      翻译
-                    </NButton>
-                  </div>
-                  <NInput
-                    v-model:value="noPrompt"
-                    type="textarea"
-                    :rows="1"
-                    placeholder="例：生成房间图片、但是不要床、你可以填bed！"
-                  />
-                </div>
-              </div>
-              <div
-                v-if="promptList.length"
-                class="w-full dark:bg-transparent"
-                :class="isMobile ? 'py-3' : 'py-6'"
-              >
-                <NScrollbar x-scrollable>
-                  <div
-                    class="flex items-center space-x-3 whitespace-nowrap pb-[15px]"
-                  >
-                    <NButton
-                      v-for="(item, index) in promptList"
-                      :key="index"
-                      size="small"
-                      @click="handleSelectPrompt(item)"
-                    >
-                      {{ item.title }}
-                    </NButton>
-                  </div>
-                </NScrollbar>
-              </div>
-              <div class="mt-3">
-                <NButton
-                  type="primary"
-                  :loading="false"
-                  :disabled="submitDisabled"
-                  @click="handleSubmit()"
-                >
-                  <template #icon>
-                    <SvgIcon icon="ri:ai-generate" class="text-base" />
-                  </template>
-                  提交绘画任务
-                </NButton>
-              </div>
-            </div>
-          </div>
+          <!--                  <div class="space-y-6 p-4"> -->
+          <!--                    <h3 class="text-lg sm:text-2xl font-bold leading-6"> -->
+          <!--                      Midjourney -->
+          <!--                    </h3> -->
+          <!--                    &lt;!&ndash; <p>图生图：生成类似风格或类型图像；图生文：上传一张图片生成对应的提示词；融图：融合图片风格</p> &ndash;&gt; -->
+          <!--                    <div> -->
+          <!--                      <div class="flex justify-between items-end"> -->
+          <!--                        <b>你想生成什么图像?</b> -->
+          <!--                        <NSpace> -->
+          <!--                          <NButton -->
+          <!--                            type="primary" -->
+          <!--                            :loading="translateLoading" -->
+          <!--                            @click="handleFanyiPrompt" -->
+          <!--                          > -->
+          <!--                            <template #icon> -->
+          <!--                              <SvgIcon icon="ri:translate" class="text-base" /> -->
+          <!--                            </template> -->
+          <!--                            翻译 -->
+          <!--                          </NButton> -->
+          <!--                          <NButton -->
+          <!--                            type="primary" -->
+          <!--                            :loading="associateLoading" -->
+          <!--                            @click="handleAssociatePrompt" -->
+          <!--                          > -->
+          <!--                            <template #icon> -->
+          <!--                              <SvgIcon -->
+          <!--                                icon="material-symbols:mindfulness-outline-rounded" -->
+          <!--                                class="text-base" -->
+          <!--                              /> -->
+          <!--                            </template> -->
+          <!--                            联想 -->
+          <!--                          </NButton> -->
+          <!--                        </NSpace> -->
+          <!--                      </div> -->
+          <!--                      <div class="mt-4"> -->
+          <!--                        <NInput -->
+          <!--                          v-model:value="prompt" -->
+          <!--                          type="textarea" -->
+          <!--                          :disabled="associateLoading || translateLoading" -->
+          <!--                          :autosize="{ -->
+          <!--                            minRows: 4, -->
+          <!--                            maxRows: 6, -->
+          <!--                          }" -->
+          <!--                          placeholder="例如: A cute little cat (Midjourney对中文描述词有一定限制、我们建议您点击右侧翻译将您的描述词转为英文再进行提交、联想则是会将您的描述词交由GPT让其发挥想象空间为您在此基础创建更为详细的描述！)" -->
+          <!--                        /> -->
+          <!--                        <div -->
+          <!--                          v-if="Number(authStore.globalConfig.mjHideNotBlock) !== 1" -->
+          <!--                          class="mt-4" -->
+          <!--                        > -->
+          <!--                          <div class="mb-3 flex justify-between items-end"> -->
+          <!--                            <b>不需要的元素</b> -->
+          <!--                            <NButton -->
+          <!--                              type="primary" -->
+          <!--                              :loading="translateNoLoading" -->
+          <!--                              @click="handleFanyiNoPrompt" -->
+          <!--                            > -->
+          <!--                              <template #icon> -->
+          <!--                                <SvgIcon icon="ri:translate" class="text-base" /> -->
+          <!--                              </template> -->
+          <!--                              翻译 -->
+          <!--                            </NButton> -->
+          <!--                          </div> -->
+          <!--                          <NInput -->
+          <!--                            v-model:value="noPrompt" -->
+          <!--                            type="textarea" -->
+          <!--                            :rows="1" -->
+          <!--                            placeholder="例：生成房间图片、但是不要床、你可以填bed！" -->
+          <!--                          /> -->
+          <!--                        </div> -->
+          <!--                      </div> -->
+          <!--                      <div -->
+          <!--                        v-if="promptList.length" -->
+          <!--                        class="w-full dark:bg-transparent" -->
+          <!--                        :class="isMobile ? 'py-3' : 'py-6'" -->
+          <!--                      > -->
+          <!--                        <NScrollbar x-scrollable> -->
+          <!--                          <div -->
+          <!--                            class="flex items-center space-x-3 whitespace-nowrap pb-[15px]" -->
+          <!--                          > -->
+          <!--                            <NButton -->
+          <!--                              v-for="(item, index) in promptList" -->
+          <!--                              :key="index" -->
+          <!--                              size="small" -->
+          <!--                              @click="handleSelectPrompt(item)" -->
+          <!--                            > -->
+          <!--                              {{ item.title }} -->
+          <!--                            </NButton> -->
+          <!--                          </div> -->
+          <!--                        </NScrollbar> -->
+          <!--                      </div> -->
+          <!--                      <div class="mt-3"> -->
+          <!--                        <NButton -->
+          <!--                          type="primary" -->
+          <!--                          :loading="false" -->
+          <!--                          :disabled="submitDisabled" -->
+          <!--                          @click="handleSubmit()" -->
+          <!--                        > -->
+          <!--                          <template #icon> -->
+          <!--                            <SvgIcon icon="ri:ai-generate" class="text-base" /> -->
+          <!--                          </template> -->
+          <!--                          提交绘画任务 -->
+          <!--                        </NButton> -->
+          <!--                      </div> -->
+          <!--                    </div> -->
+          <!--                  </div> -->
 
-          <div class="space-y-2 p-4">
-            <div v-if="Number(authStore.globalConfig.mjHideWorkIn) !== 1">
-              <div class="mt-6 mb-4 flex flex-col">
-                <span class="text-xl font-bold flex items-end">
-                  <b>工作中的内容</b>
-                  <span v-if="countQueue" class="text-xs font-family ml-2">当前系统进行中任务[{{ countQueue }}]</span>
-                </span>
-              </div>
-              <div
-                v-if="!curDrawTask.length"
-                class="h-[10vh] flex flex-col justify-center items-center text-gray-500 relative"
-              >
-                <img class="w-18" :src="marketImg">
-                <span class="mt-4">
-                  <NButton text size="small" @click="readMore">点击前往市场看看别人的作品吧！</NButton>
-                </span>
-              </div>
+          <div class="space-y-2 pt-2 pl-2 pr-2 ">
+            <!--                    <div v-if="Number(authStore.globalConfig.mjHideWorkIn) !== 1"> -->
+            <!--                      <div class="mt-6 mb-4 flex flex-col"> -->
+            <!--                        <span class="text-xl font-bold flex items-end"> -->
+            <!--                          <b>工作中的内容</b> -->
+            <!--                          <span v-if="countQueue" class="text-xs font-family ml-2">当前系统进行中任务[{{ countQueue }}]</span> -->
+            <!--                        </span> -->
+            <!--                      </div> -->
+            <!--                      <div -->
+            <!--                        v-if="!curDrawTask.length" -->
+            <!--                        class="h-[10vh] flex flex-col justify-center items-center text-gray-500 relative" -->
+            <!--                      > -->
+            <!--                        <img class="w-18" :src="marketImg"> -->
+            <!--                        <span class="mt-4"> -->
+            <!--                          <NButton text size="small" @click="readMore">点击前往市场看看别人的作品吧！</NButton> -->
+            <!--                        </span> -->
+            <!--                      </div> -->
 
-              <div
-                v-if="curDrawTask.length"
-                class="h-[10vh] flex flex-col justify-center items-center text-gray-500 relative"
-              >
-                <div class="w-56 h-14 relative">
-                  <Loading :text-color="loadingTextColor" />
-                </div>
-                <p class="mb-3">
-                  当前{{
-                    curDrawTask.length
-                  }}个任务正在进行中、请耐心等候绘制完成、您可以前往其他页面稍后回来查看结果！
-                </p>
-              </div>
-            </div>
+            <!--                      <div -->
+            <!--                        v-if="curDrawTask.length" -->
+            <!--                        class="h-[10vh] flex flex-col justify-center items-center text-gray-500 relative" -->
+            <!--                      > -->
+            <!--                        <div class="w-56 h-14 relative"> -->
+            <!--                          <Loading :text-color="loadingTextColor" /> -->
+            <!--                        </div> -->
+            <!--                        <p class="mb-3"> -->
+            <!--                          当前{{ -->
+            <!--                            curDrawTask.length -->
+            <!--                          }}个任务正在进行中、请耐心等候绘制完成、您可以前往其他页面稍后回来查看结果！ -->
+            <!--                        </p> -->
+            <!--                      </div> -->
+            <!--                    </div> -->
             <!-- working -->
-            <div class="min-h-[500px] mt-5">
-              <div class="mt-6 mb-10 flex flex-col">
-                <span class="text-xl font-bold">我的绘图
-                  <span class="text-base text-[gray]">[{{ drawList.length }}]</span></span>
-                <span class="mt-2 text-xs font-bold text-[#444]">点击下面的编号按钮以获取升级版（U:
-                  放大图片更细节）或变化版（V:
-                  在此基础上变体）。绘画失败不扣除积分，请重试直到绘画成功为止。</span>
-              </div>
-              <div v-if="!drawList || !drawList.length" class="w-full py-28">
-                <img
-                  class="mx-auto"
-                  src="data:image/png;base64,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"
-                  alt=""
-                >
-              </div>
-
-              <div v-if="drawList && drawList.length">
-                <div
-                  class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 4xl:grid-cols-5 gap-4"
-                >
-                  <cardItem
-                    v-for="item in drawList"
-                    :key="item.id"
-                    :draw-item-info="item"
-                    @query-data="queryDrawResult"
-                  />
-                </div>
-              </div>
-            </div>
+            <!--                    <div class="min-h-[500px] mt-5"> -->
+            <!--                      <div class="mt-6 mb-10 flex flex-col"> -->
+            <!--                        <span class="text-xl font-bold">我的绘图 -->
+            <!--                          <span class="text-base text-[gray]">[{{ drawList.length }}]</span></span> -->
+            <!--                        <span class="mt-2 text-xs font-bold text-[#444]">点击下面的编号按钮以获取升级版（U: -->
+            <!--                          放大图片更细节）或变化版（V: -->
+            <!--                          在此基础上变体）。绘画失败不扣除积分，请重试直到绘画成功为止。</span> -->
+            <!--                      </div> -->
+            <!--                      <div v-if="!drawList || !drawList.length" class="w-full py-28"> -->
+            <!--                        <img -->
+            <!--                          class="mx-auto" -->
+            <!--                          src="data:image/png;base64,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" -->
+            <!--                          alt="" -->
+            <!--                        > -->
+            <!--                      </div> -->
 
+            <!--                      <div v-if="drawList && drawList.length"> -->
+            <!--                        <div -->
+            <!--                          class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 4xl:grid-cols-5 gap-4" -->
+            <!--                        > -->
+            <!--                          <cardItem -->
+            <!--                            v-for="item in drawList" -->
+            <!--                            :key="item.id" -->
+            <!--                            :draw-item-info="item" -->
+            <!--                            @query-data="queryDrawResult" -->
+            <!--                          /> -->
+            <!--                        </div> -->
+            <!--                      </div> -->
+            <!--                    </div> -->
+            <n-layout style="height: 97.5vh;">
+              <n-layout-content style="height: 86%;">
+                <HistoryItem/>
+              </n-layout-content>
+              <n-layout-footer>
+                <Mjfooter />
+              </n-layout-footer>
+            </n-layout>
             <div id="footer" ref="containerRef" />
           </div>
         </div>