修改

web/src/App.vue

@@ -39,4 +39,157 @@ html, body {
   }
 }
 
+/* 省略显示 */
+.ellipsis {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.sl {
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 2;
+	overflow: hidden;
+}
+.sl3 {
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 3;
+	overflow: hidden;
+}
+.sl4 {
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 3;
+	overflow: hidden;
+}
+
+/* 居中布局 */
+.auto_center{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+}
+.h_center{
+    width: 100%;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    -webkit-transform: translateY(-50%);
+}
+.w_center{
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    -webkit-transform: translateX(-50%);
+}
+
+/* flex布局 */
+.flex-row {
+	display: flex;
+	flex-direction: row;
+}
+
+.flex-col {
+	display: flex;
+	flex-direction: column;
+}
+
+.justify-start {
+	justify-content: flex-start;
+}
+
+.justify-end {
+	justify-content: flex-end;
+}
+
+.justify-center {
+	justify-content: center;
+}
+
+.justify-between {
+	justify-content: space-between;
+}
+
+.justify-around {
+	justify-content: space-around;
+}
+
+.justify-evenly {
+	justify-content: space-evenly;
+}
+
+.items-start {
+	align-items: flex-start;
+}
+
+.items-end {
+	align-items: flex-end;
+}
+
+.items-center {
+	align-items: center;
+}
+
+.items-baseline {
+	align-items: baseline;
+}
+
+.items-stretch {
+	align-items: stretch;
+}
+
+.self-start {
+	align-self: flex-start;
+}
+
+.self-end {
+	align-self: flex-end;
+}
+
+.self-center {
+	align-self: center;
+}
+
+.self-baseline {
+	align-self: baseline;
+}
+
+.self-stretch {
+	align-self: stretch;
+}
+
+.flex-1 {
+	flex: 1 1 0%;
+}
+
+.flex-auto {
+	flex: 1 1 auto;
+}
+
+.grow {
+	flex-grow: 1;
+}
+
+.grow-0 {
+	flex-grow: 0;
+}
+
+.shrink {
+	flex-shrink: 1;
+}
+
+.shrink-0 {
+	flex-shrink: 0;
+}
+
+.shrink-1 {
+	flex-shrink: 1;
+}
+
+.relative {
+	position: relative;
+}
+
 </style>

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

@@ -40,7 +40,6 @@
 
           .el-icon {
             position relative
-            top 3px
           }
 
           .grid-content {
@@ -49,29 +48,72 @@
             padding 8px 14px
             display flex
             cursor pointer
+            margin-bottom: 10px;
 
             &:hover {
               background-color #585858
             }
 
+            .icon{
+              width 20px
+              height 20px
+              margin-bottom 5px
+            }
+
             .shape {
               width 16px
               height 16px
-              margin-right 5px
+              margin-bottom 5px
               border 1px solid #C4C4C4
               border-radius 3px
             }
 
-            .shape.vertical {
-              width 12px
-              height 20px
+            .shape.size9-16 {
+              width 9px
+              height 16px
             }
 
-            .shape.horizontal {
-              height 12px
-              width 20px
+            .shape.size16-9 {
+              height 9px
+              width 16px
               position relative
-              top 3px
+              margin 4px 0 7px
+            }
+
+            .shape.size3-4 {
+              width 12px
+              height 16px
+            }
+
+            .shape.size4-3 {
+              height 12px
+              width 16px
+              position relative
+              margin 4px 0 4px
+            }
+
+            .shape.size2-3 {
+              width 11px
+              height 16px
+            }
+
+            .shape.size3-2 {
+              height 11px
+              width 16px
+              position relative
+              margin 4px 0 5px
+            }
+
+            .shape.size1-2 {
+              width 8px
+              height 16px
+            }
+
+            .shape.size2-1 {
+              height 8px
+              width 16px
+              position relative
+              margin 4px 0 8px
             }
           }
 
@@ -90,6 +132,7 @@
             border 1px solid #454545
             border-radius 5px
             padding 10px
+            margin-bottom 10px
             display flex
             flex-flow column
             align-items center
@@ -118,14 +161,23 @@
 
           .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
-              margin-top 2px
             }
           }
 
-
           .img-uploader {
             .el-upload {
               border: 1px dashed var(--el-border-color);
@@ -153,6 +205,8 @@
         }
 
         .param-line.pt {
+          display: flex
+          align-items: center
           padding-top 5px
           padding-bottom 5px
         }
@@ -192,6 +246,5 @@
     margin-left 10px
     cursor pointer
     position relative
-    top 2px
   }
 }

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

@@ -4,6 +4,99 @@
   color #ffffff
   overflow-x hidden
 
+  .task-list-inner {
+    .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;
+    }
+    .title-tabs .el-tabs__active-bar {
+       background-color: #47FFF1;
+    }
+    .title-tabs .el-tabs__content {
+      padding: 10px 0;
+    }
+
+    .el-textarea {
+        --el-input-focus-border-color: #47FFF1;
+    }
+    .el-textarea__inner {
+      background: transparent;
+      color: #fff;
+    }
+
+    .el-input__wrapper {
+      background: transparent;
+      padding 5px
+    }
+
+    .text{
+      margin-bottom: 10px;  
+      color: #6b778c;
+      font-size: 15px
+    }
+
+    .param-line.pt {
+      padding-top 5px
+      padding-bottom 5px
+    }
+
+    .form-item-inner {
+      display flex
+      align-items: center
+
+      .el-icon {
+        margin-left 10px
+      }
+    }
+
+    .el-form-item__label {
+      color #ffffff
+    }
+
+    .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;
+
+        &:hover {
+          border-color: var(--el-color-primary);
+        }
+
+        .el-icon.uploader-icon {
+          font-size: 28px
+          color: #8c939d
+          width 100%
+          height: 120px
+          text-align: center
+        }
+      }
+    }
+
+    .submit-btn{
+        margin: 20px 0
+
+        .el-icon.submit-icon {
+          font-size: 28px
+          width 100%
+          height: 100px
+          text-align: center
+          margin-right: 10px
+        }
+    }
+  }
 
   .running-job-list {
     .job-item {

web/src/views/Home.vue

@@ -1,43 +1,43 @@
 <template>
-  <div class="home">
-    <div class="navigator">
-      <div class="logo">
-        <el-image :src="logo"/>
-        <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>
-        </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">
+						<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>
 </template>
 
 <script setup>
 
-import {useRouter} from "vue-router";
-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/logo.png';
+const logo = '/images/icon-logo.png';
 const navs = ref([
   {path: "/chat", icon_path: "/images/chat.png", title: "对话聊天"},
   {path: "/mj", icon_path: "/images/mj.png", title: "MJ 绘画"},
@@ -51,8 +51,8 @@ const navs = ref([
 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>
 
@@ -67,7 +67,7 @@ const changeNav = (item) => {
   .navigator {
     display flex
     flex-flow column
-    width 48px
+    width 70px
     padding 10px 6px
     border-right: 1px solid #3c3c3c
 
@@ -75,7 +75,7 @@ const changeNav = (item) => {
       display flex
       flex-flow column
       align-items center
-      height 60px
+
 
       .divider {
         border-bottom 1px solid #4A4A4A
@@ -85,7 +85,9 @@ const changeNav = (item) => {
     }
 
     .nav-items {
-      margin-top 10px
+		margin-top: 20px;
+		padding-left: 10px;
+		padding-right: 10px;
 
       li {
         margin-bottom 15px
@@ -94,8 +96,8 @@ const changeNav = (item) => {
           color #DADBDC
           background-color #40444A
           border-radius 10px
-          width 44px
-          height 44px
+          width 48px
+          height 48px
           display flex
           justify-content center
           align-items center
@@ -112,6 +114,16 @@ const changeNav = (item) => {
 
         a:hover, a.active {
           color #47fff1
+        }
+
+		.title{
+			font-size: 12px
+			padding-top: 5px 
+			color: #e5e7eb;
+			text-align: center;
+		}
+		.active {
+          color #47fff1
         }
       }
     }

web/vue.config.js

@@ -3,6 +3,7 @@ let webpack = require('webpack')
 module.exports = defineConfig({
     transpileDependencies: true,
     lintOnSave: false,   //关闭eslint校验
+    productionSourceMap: false, //在生产模式中禁用 Source Map，既可以减少包大小，也可以加密源码
     configureWebpack: {
         // disable performance hints
         performance: {