feat: refactor midjourney image creating page

web/src/assets/css/image-mj.css

@@ -35,7 +35,6 @@
 }
 .page-mj .inner .mj-box .mj-params .param-line .el-icon {
   position: relative;
-  top: 3px;
 }
 .page-mj .inner .mj-box .mj-params .param-line .grid-content {
   background-color: #383838;
@@ -43,26 +42,62 @@
   padding: 8px 14px;
   display: flex;
   cursor: pointer;
+  margin-bottom: 10px;
 }
 .page-mj .inner .mj-box .mj-params .param-line .grid-content:hover {
   background-color: #585858;
 }
+.page-mj .inner .mj-box .mj-params .param-line .grid-content .icon {
+  width: 20px;
+  height: 20px;
+  margin-bottom: 5px;
+}
 .page-mj .inner .mj-box .mj-params .param-line .grid-content .shape {
   width: 16px;
   height: 16px;
-  margin-right: 5px;
+  margin-bottom: 5px;
   border: 1px solid #c4c4c4;
   border-radius: 3px;
 }
-.page-mj .inner .mj-box .mj-params .param-line .grid-content .shape.vertical {
-  width: 12px;
-  height: 20px;
+.page-mj .inner .mj-box .mj-params .param-line .grid-content .shape.size9-16 {
+  width: 9px;
+  height: 16px;
 }
-.page-mj .inner .mj-box .mj-params .param-line .grid-content .shape.horizontal {
-  height: 12px;
-  width: 20px;
+.page-mj .inner .mj-box .mj-params .param-line .grid-content .shape.size16-9 {
+  height: 9px;
+  width: 16px;
   position: relative;
-  top: 3px;
+  margin: 4px 0 7px;
+}
+.page-mj .inner .mj-box .mj-params .param-line .grid-content .shape.size3-4 {
+  width: 12px;
+  height: 16px;
+}
+.page-mj .inner .mj-box .mj-params .param-line .grid-content .shape.size4-3 {
+  height: 12px;
+  width: 16px;
+  position: relative;
+  margin: 4px 0 4px;
+}
+.page-mj .inner .mj-box .mj-params .param-line .grid-content .shape.size2-3 {
+  width: 11px;
+  height: 16px;
+}
+.page-mj .inner .mj-box .mj-params .param-line .grid-content .shape.size3-2 {
+  height: 11px;
+  width: 16px;
+  position: relative;
+  margin: 4px 0 5px;
+}
+.page-mj .inner .mj-box .mj-params .param-line .grid-content .shape.size1-2 {
+  width: 8px;
+  height: 16px;
+}
+.page-mj .inner .mj-box .mj-params .param-line .grid-content .shape.size2-1 {
+  height: 8px;
+  width: 16px;
+  position: relative;
+  margin: 4px 0 8px;
 }
 .page-mj .inner .mj-box .mj-params .param-line .grid-content.active {
   color: #47fff1;
@@ -76,6 +111,7 @@
   border: 1px solid #454545;
   border-radius: 5px;
   padding: 10px;
+  margin-bottom: 10px;
   display: flex;
   flex-flow: column;
   align-items: center;
@@ -98,10 +134,20 @@
 }
 .page-mj .inner .mj-box .mj-params .param-line .form-item-inner {
   display: flex;
+  align-items: center;
+}
+.page-mj .inner .mj-box .mj-params .param-line .form-item-inner .el-select {
+  --el-select-input-focus-border-color: #47fff1;
+  --el-input-focus-border-color: #47fff1;
+}
+.page-mj .inner .mj-box .mj-params .param-line .form-item-inner .el-input__wrapper {
+  background: #383838;
+}
+.page-mj .inner .mj-box .mj-params .param-line .form-item-inner .el-input__inner {
+  color: #fff;
 }
 .page-mj .inner .mj-box .mj-params .param-line .form-item-inner .el-icon {
   margin-left: 10px;
-  margin-top: 2px;
 }
 .page-mj .inner .mj-box .mj-params .param-line .img-uploader .el-upload {
   border: 1px dashed var(--el-border-color);
@@ -123,19 +169,11 @@
   text-align: center;
 }
 .page-mj .inner .mj-box .mj-params .param-line.pt {
+  display: flex;
+  align-items: center;
   padding-top: 5px;
   padding-bottom: 5px;
 }
-.page-mj .inner .mj-box .submit-btn {
-  padding: 10px 15px 0 15px;
-  text-align: center;
-}
-.page-mj .inner .mj-box .submit-btn .el-button {
-  width: 100%;
-}
-.page-mj .inner .mj-box .submit-btn .el-button span {
-  color: #2d3a4b;
-}
 .page-mj .inner .el-form .el-form-item__label {
   color: #fff;
 }
@@ -149,6 +187,86 @@
   color: #fff;
   overflow-x: hidden;
 }
+.page-mj .inner .task-list-box .task-list-inner .el-tabs {
+  --el-tabs-header-height: 55px;
+}
+.page-mj .inner .task-list-box .task-list-inner .el-tabs__item {
+  color: #fff;
+  font-size: 18px;
+}
+.page-mj .inner .task-list-box .task-list-inner .title-tabs .el-tabs__item.is-active {
+  color: #47fff1;
+  font-size: 18px;
+}
+.page-mj .inner .task-list-box .task-list-inner .title-tabs .el-tabs__active-bar {
+  background-color: #47fff1;
+}
+.page-mj .inner .task-list-box .task-list-inner .title-tabs .el-tabs__content {
+  padding: 10px 0;
+}
+.page-mj .inner .task-list-box .task-list-inner .el-textarea {
+  --el-input-focus-border-color: #47fff1;
+}
+.page-mj .inner .task-list-box .task-list-inner .el-textarea__inner {
+  background: transparent;
+  color: #fff;
+}
+.page-mj .inner .task-list-box .task-list-inner .el-input__wrapper {
+  background: transparent;
+  padding: 5px;
+}
+.page-mj .inner .task-list-box .task-list-inner .text {
+  margin-bottom: 10px;
+  color: #6b778c;
+  font-size: 15px;
+}
+.page-mj .inner .task-list-box .task-list-inner .param-line.pt {
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+.page-mj .inner .task-list-box .task-list-inner .form-item-inner {
+  display: flex;
+  align-items: center;
+}
+.page-mj .inner .task-list-box .task-list-inner .form-item-inner .el-icon {
+  margin-left: 10px;
+}
+.page-mj .inner .task-list-box .task-list-inner .el-form-item__label {
+  color: #fff;
+}
+.page-mj .inner .task-list-box .task-list-inner .img-uploader .el-upload {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  width: 300px;
+  transition: var(--el-transition-duration-fast);
+  margin-bottom: 20px;
+}
+.page-mj .inner .task-list-box .task-list-inner .img-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
+.page-mj .inner .task-list-box .task-list-inner .img-uploader .el-upload .el-icon.uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 100%;
+  height: 120px;
+  text-align: center;
+}
+.page-mj .inner .task-list-box .task-list-inner .submit-btn {
+  display: flex;
+  margin: 20px 0;
+}
+.page-mj .inner .task-list-box .task-list-inner .submit-btn .el-button {
+  width: 200px;
+}
+.page-mj .inner .task-list-box .task-list-inner .submit-btn .text-info {
+  width: 100%;
+  display: flex;
+  justify-content: right;
+  align-items: center;
+}
 .page-mj .inner .task-list-box .running-job-list .job-item {
   width: 100%;
   padding: 2px;
@@ -253,5 +371,4 @@
   margin-left: 10px;
   cursor: pointer;
   position: relative;
-  top: 2px;
 }

web/src/assets/css/image-mj.styl

@@ -54,7 +54,7 @@
               background-color #585858
             }
 
-            .icon{
+            .icon {
               width 20px
               height 20px
               margin-bottom 5px
@@ -162,17 +162,20 @@
           .form-item-inner {
             display flex
             align-items: center
-            
+
             .el-select {
               --el-select-input-focus-border-color: #47FFF1;
               --el-input-focus-border-color: #47FFF1;
             }
+
             .el-input__wrapper {
               background: #383838;
             }
+
             .el-input__inner {
               color: #fff
             }
+
             .el-icon {
               margin-left 10px
             }
@@ -211,19 +214,6 @@
           padding-bottom 5px
         }
       }
-
-      .submit-btn {
-        padding 10px 15px 0 15px
-        text-align center
-
-        .el-button {
-          width 100%
-
-          span {
-            color #2D3A4B
-          }
-        }
-      }
     }
 
     .el-form {

web/src/assets/css/image-sd.css

@@ -72,6 +72,86 @@
   color: #fff;
   overflow-x: hidden;
 }
+.page-sd .inner .task-list-box .task-list-inner .el-tabs {
+  --el-tabs-header-height: 55px;
+}
+.page-sd .inner .task-list-box .task-list-inner .el-tabs__item {
+  color: #fff;
+  font-size: 18px;
+}
+.page-sd .inner .task-list-box .task-list-inner .title-tabs .el-tabs__item.is-active {
+  color: #47fff1;
+  font-size: 18px;
+}
+.page-sd .inner .task-list-box .task-list-inner .title-tabs .el-tabs__active-bar {
+  background-color: #47fff1;
+}
+.page-sd .inner .task-list-box .task-list-inner .title-tabs .el-tabs__content {
+  padding: 10px 0;
+}
+.page-sd .inner .task-list-box .task-list-inner .el-textarea {
+  --el-input-focus-border-color: #47fff1;
+}
+.page-sd .inner .task-list-box .task-list-inner .el-textarea__inner {
+  background: transparent;
+  color: #fff;
+}
+.page-sd .inner .task-list-box .task-list-inner .el-input__wrapper {
+  background: transparent;
+  padding: 5px;
+}
+.page-sd .inner .task-list-box .task-list-inner .text {
+  margin-bottom: 10px;
+  color: #6b778c;
+  font-size: 15px;
+}
+.page-sd .inner .task-list-box .task-list-inner .param-line.pt {
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+.page-sd .inner .task-list-box .task-list-inner .form-item-inner {
+  display: flex;
+  align-items: center;
+}
+.page-sd .inner .task-list-box .task-list-inner .form-item-inner .el-icon {
+  margin-left: 10px;
+}
+.page-sd .inner .task-list-box .task-list-inner .el-form-item__label {
+  color: #fff;
+}
+.page-sd .inner .task-list-box .task-list-inner .img-uploader .el-upload {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  width: 300px;
+  transition: var(--el-transition-duration-fast);
+  margin-bottom: 20px;
+}
+.page-sd .inner .task-list-box .task-list-inner .img-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
+.page-sd .inner .task-list-box .task-list-inner .img-uploader .el-upload .el-icon.uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 100%;
+  height: 120px;
+  text-align: center;
+}
+.page-sd .inner .task-list-box .task-list-inner .submit-btn {
+  display: flex;
+  margin: 20px 0;
+}
+.page-sd .inner .task-list-box .task-list-inner .submit-btn .el-button {
+  width: 200px;
+}
+.page-sd .inner .task-list-box .task-list-inner .submit-btn .text-info {
+  width: 100%;
+  display: flex;
+  justify-content: right;
+  align-items: center;
+}
 .page-sd .inner .task-list-box .running-job-list .job-item {
   width: 100%;
   padding: 2px;

web/src/assets/css/task-list.styl

@@ -8,24 +8,29 @@
     .el-tabs {
       --el-tabs-header-height: 55px;
     }
+
     .el-tabs__item {
       color: #fff;
       font-size: 18px;
     }
+
     .title-tabs .el-tabs__item.is-active {
-        color: #47FFF1;
-        font-size: 18px;
+      color: #47FFF1;
+      font-size: 18px;
     }
+
     .title-tabs .el-tabs__active-bar {
-       background-color: #47FFF1;
+      background-color: #47FFF1;
     }
+
     .title-tabs .el-tabs__content {
       padding: 10px 0;
     }
 
     .el-textarea {
-        --el-input-focus-border-color: #47FFF1;
+      --el-input-focus-border-color: #47FFF1;
     }
+
     .el-textarea__inner {
       background: transparent;
       color: #fff;
@@ -36,8 +41,8 @@
       padding 5px
     }
 
-    .text{
-      margin-bottom: 10px;  
+    .text {
+      margin-bottom: 10px;
       color: #6b778c;
       font-size: 15px
     }
@@ -85,16 +90,20 @@
       }
     }
 
-    .submit-btn{
-        margin: 20px 0
+    .submit-btn {
+      display flex
+      margin: 20px 0
 
-        .el-icon.submit-icon {
-          font-size: 28px
-          width 100%
-          height: 100px
-          text-align: center
-          margin-right: 10px
-        }
+      .el-button {
+        width 200px
+      }
+
+      .text-info {
+        width 100%
+        display flex
+        justify-content right
+        align-items center
+      }
     }
   }
 

web/src/views/Home.vue

@@ -1,58 +1,59 @@
 <template>
-	<div class="home">
-		<div class="navigator">
-			<div class="logo">
-				<el-link href="/">
-					<el-image :src="logo" />
-				</el-link>
-				<div class="divider"></div>
-			</div>
-			<ul class="nav-items">
-				<li v-for="item in navs" :key="item.path">
-					<el-tooltip effect="light" :content="item.title" placement="right">
-						<a @click="changeNav(item)" :class="item.path === curPath ? 'active' : ''">
-							<el-image :src="item.icon_path" :width="20" v-if="item.icon_path" />
-							<i :class="'iconfont icon-' + item.icon" v-else></i>
-						</a>
-					</el-tooltip>
-					<div :class="item.path === curPath ? 'title active' : 'title'">{{ item.title }}</div>
-				</li>
-			</ul>
-		</div>
-		<div class="content">
-			<router-view v-slot="{ Component }">
-				<transition name="move" mode="out-in">
-					<component :is="Component"></component>
-				</transition>
-			</router-view>
-		</div>
-	</div>
+  <div class="home">
+    <div class="navigator">
+      <div class="logo">
+        <el-link href="/">
+          <el-image :src="logo"/>
+        </el-link>
+        <div class="divider"></div>
+      </div>
+      <ul class="nav-items">
+        <li v-for="item in navs" :key="item.path">
+          <!--          <el-tooltip effect="light" :content="item.title" placement="right">-->
+          <!--            -->
+          <!--          </el-tooltip>-->
+          <a @click="changeNav(item)" :class="item.path === curPath ? 'active' : ''">
+            <el-image :src="item.icon_path" :width="20" v-if="item.icon_path"/>
+            <i :class="'iconfont icon-' + item.icon" v-else></i>
+          </a>
+          <div :class="item.path === curPath ? 'title active' : 'title'">{{ item.title }}</div>
+        </li>
+      </ul>
+    </div>
+    <div class="content">
+      <router-view v-slot="{ Component }">
+        <transition name="move" mode="out-in">
+          <component :is="Component"></component>
+        </transition>
+      </router-view>
+    </div>
+  </div>
 </template>
 
 <script setup>
 
-import { useRouter } from "vue-router";
-import { checkSession } from "@/action/session";
-import { isMobile } from "@/utils/libs";
-import { ref } from "vue";
+import {useRouter} from "vue-router";
+import {checkSession} from "@/action/session";
+import {isMobile} from "@/utils/libs";
+import {ref} from "vue";
 
 const router = useRouter();
-const logo = '/images/icon-logo.png';
+const logo = '/images/logo.png';
 const navs = ref([
   {path: "/chat", icon_path: "/images/chat.png", title: "对话聊天"},
   {path: "/mj", icon_path: "/images/mj.png", title: "MJ 绘画"},
   {path: "/sd", icon_path: "/images/sd.png", title: "SD 绘画"},
   {path: "/apps", icon: "menu", title: "应用中心"},
   {path: "/images-wall", icon: "image-list", title: "作品展示"},
-  {path: "/knowledge", icon: "book", title: "我的知识库"},
+  {path: "/knowledge", icon: "book", title: "知识库"},
   {path: "/member", icon: "vip-user", title: "会员计划"},
   {path: "/invite", icon: "share", title: "推广计划"},
 ])
 const curPath = ref(router.currentRoute.value.path)
 
 const changeNav = (item) => {
-	curPath.value = item.path
-	router.push(item.path)
+  curPath.value = item.path
+  router.push(item.path)
 }
 </script>
 
@@ -85,9 +86,9 @@ const changeNav = (item) => {
     }
 
     .nav-items {
-		margin-top: 20px;
-		padding-left: 10px;
-		padding-right: 10px;
+      margin-top: 20px;
+      padding-left: 10px;
+      padding-right: 10px;
 
       li {
         margin-bottom 15px
@@ -116,13 +117,14 @@ const changeNav = (item) => {
           color #47fff1
         }
 
-		.title{
-			font-size: 12px
-			padding-top: 5px 
-			color: #e5e7eb;
-			text-align: center;
-		}
-		.active {
+        .title {
+          font-size: 12px
+          padding-top: 5px
+          color: #e5e7eb;
+          text-align: center;
+        }
+
+        .active {
           color #47fff1
         }
       }

web/src/views/admin/ApiKey.vue

@@ -57,7 +57,10 @@
       <el-form :model="item" label-width="120px" ref="formRef" :rules="rules">
         <el-form-item label="所属平台：" prop="platform">
           <el-select v-model="item.platform" placeholder="请选择平台">
-            <el-option v-for="item in platforms" :value="item.value" :key="item.value">{{ item.name }}</el-option>
+            <el-option v-for="item in platforms" :value="item.value" :label="item.name" :key="item.value">{{
+                item.name
+              }}
+            </el-option>
           </el-select>
         </el-form-item>
 
@@ -66,7 +69,10 @@
         </el-form-item>
         <el-form-item label="用途：" prop="type">
           <el-select v-model="item.type" placeholder="请选择用途">
-            <el-option v-for="item in types" :value="item.value" :key="item.value">{{ item.name }}</el-option>
+            <el-option v-for="item in types" :value="item.value" :label="item.name" :key="item.value">{{
+                item.name
+              }}
+            </el-option>
           </el-select>
         </el-form-item>
 

web/src/views/admin/ChatModel.vue

@@ -53,7 +53,10 @@
       <el-form :model="item" label-width="120px" ref="formRef" :rules="rules">
         <el-form-item label="所属平台：" prop="platform">
           <el-select v-model="item.platform" placeholder="请选择平台">
-            <el-option v-for="item in platforms" :value="item.value" :key="item.value">{{ item.name }}</el-option>
+            <el-option v-for="item in platforms" :value="item.value" :label="item.name" :key="item.value">{{
+                item.name
+              }}
+            </el-option>
           </el-select>
         </el-form-item>