optimize index page UI

web/src/assets/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4125778 */
-  src: url('iconfont.woff2?t=1712306070700') format('woff2'),
-       url('iconfont.woff?t=1712306070700') format('woff'),
-       url('iconfont.ttf?t=1712306070700') format('truetype');
+  src: url('iconfont.woff2?t=1713751571578') format('woff2'),
+       url('iconfont.woff?t=1713751571578') format('woff'),
+       url('iconfont.ttf?t=1713751571578') format('truetype');
 }
 
 .iconfont {
@@ -13,11 +13,23 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-mj:before {
+  content: "\e643";
+}
+
+.icon-dalle:before {
+  content: "\e646";
+}
+
+.icon-xmind:before {
+  content: "\e610";
+}
+
 .icon-version:before {
   content: "\e68d";
 }
 
-.icon-huihua:before {
+.icon-sd:before {
   content: "\e62b";
 }
 

web/src/assets/iconfont/iconfont.json

@@ -5,6 +5,27 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "36264781",
+      "name": "MidJourney",
+      "font_class": "mj",
+      "unicode": "e643",
+      "unicode_decimal": 58947
+    },
+    {
+      "icon_id": "37677137",
+      "name": "DALL·E 3",
+      "font_class": "dalle",
+      "unicode": "e646",
+      "unicode_decimal": 58950
+    },
+    {
+      "icon_id": "2629858",
+      "name": "逻辑图",
+      "font_class": "xmind",
+      "unicode": "e610",
+      "unicode_decimal": 58896
+    },
     {
       "icon_id": "1061336",
       "name": "version",
@@ -15,7 +36,7 @@
     {
       "icon_id": "3901033",
       "name": "绘画",
-      "font_class": "huihua",
+      "font_class": "sd",
       "unicode": "e62b",
       "unicode_decimal": 58923
     },

web/src/views/ImageMj.vue

@@ -33,7 +33,7 @@
               <el-form-item label="图片画质">
                 <template #default>
                   <div class="form-item-inner flex-row items-center">
-                    <el-select v-model="params.quality" placeholder="请选择" style="width:150px">
+                    <el-select v-model="params.quality" placeholder="请选择" style="width:175px">
                       <el-option v-for="item in options"
                                  :key="item.value"
                                  :label="item.label"

web/src/views/ImagesWall.vue

@@ -5,9 +5,9 @@
         <h2>AI 绘画作品墙</h2>
         <div class="settings">
           <el-radio-group v-model="imgType" @change="changeImgType">
-            <el-radio value="mj" size="large">MidJourney</el-radio>
-            <el-radio value="sd" size="large">Stable Diffusion</el-radio>
-            <el-radio value="dall" size="large">DALL-E</el-radio>
+            <el-radio label="mj" size="large">MidJourney</el-radio>
+            <el-radio label="sd" size="large">Stable Diffusion</el-radio>
+            <el-radio label="dall" size="large">DALL-E</el-radio>
           </el-radio-group>
         </div>
       </div>
@@ -338,6 +338,7 @@ const getNext = () => {
   loading.value = true
   page.value = page.value + 1
   let url = ""
+  console.log(imgType.value)
   switch (imgType.value) {
     case "mj":
       url = "/api/mj/imgWall"

web/src/views/Index.vue

@@ -2,9 +2,24 @@
   <div class="index-page" :style="{height: winHeight+'px'}">
     <div class="content">
       <h1>欢迎使用 {{ title }}</h1>
-      <p>{{slogan}}</p>
-      <button class="btn" @click="router.push('/chat')">立即使用</button>
+      <p>{{ slogan }}</p>
+      <el-button @click="router.push('/chat')" color="#ffffff" style="color:#007bff" :dark="false">
+        <i class="iconfont icon-chat"></i>
+        <span>AI聊天</span>
+      </el-button>
+      <el-button @click="router.push('/mj')" color="#C4CCFD" style="color:#424282" :dark="false">
+        <i class="iconfont icon-mj"></i>
+        <span>AI-MJ绘画</span>
+      </el-button>
 
+      <el-button @click="router.push('/sd')" color="#4AE6DF" style="color:#424282" :dark="false">
+        <i class="iconfont icon-sd"></i>
+        <span>AI-SD绘画</span>
+      </el-button>
+      <el-button @click="router.push('/xmind')" color="#FFFD55" style="color:#424282" :dark="false">
+        <i class="iconfont icon-xmind"></i>
+        <span>思维导图</span>
+      </el-button>
       <div id="animation-container"></div>
     </div>
 
@@ -84,7 +99,7 @@ const init = () => {
           requestAnimationFrame(animate);
 
           // 使地球自转和公转
-          earth.rotation.y += 0.001;
+          earth.rotation.y += 0.0006;
 
           renderer.render(scene, camera);
         };
@@ -117,27 +132,25 @@ const init = () => {
   .content {
     text-align: center;
     position relative
+
     h1 {
       font-size: 5rem;
       margin-bottom: 1rem;
     }
+
     p {
       font-size: 1.5rem;
       margin-bottom: 2rem;
     }
 
-    .btn {
-      padding: 10px 20px;
-      background-color: #fff;
-      color: #007bff;
-      border: none;
-      border-radius: 5px;
+    .el-button {
+      padding: 25px 20px;
       font-size: 1.3rem;
-      cursor: pointer;
       transition: all 0.3s ease;
 
-      &:hover {
-        background-color: #e6e6e6;
+      .iconfont {
+        font-size 1.6rem
+        margin-right 10px
       }
     }
 

web/src/views/MarkMap.vue

@@ -23,7 +23,7 @@
                 请选择生成思维导图的AI模型
               </div>
               <div class="param-line">
-                <el-select v-model="modelID" placeholder="请选择模型" @change="changeModel">
+                <el-select v-model="modelID" placeholder="请选择模型" @change="changeModel" style="width:100%">
                   <el-option
                       v-for="item in models"
                       :key="item.id"