feat: hide more navigator items

CHANGELOG.md

@@ -8,6 +8,7 @@
 * Bug修复：修复思维导图格式乱码问题
 * 功能新增：支持从应用列表直接和某个应用对话
 * 功能优化：优化算力日志的页面和首页的UI
+* 功能新增：支持思维导图导出 PNG 图片下载
 
 ## v4.0.3
 

web/src/assets/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4125778 */
-  src: url('iconfont.woff2?t=1713751571578') format('woff2'),
+  src: url('iconfont.woff2?t=1713766977199') format('woff2'),
-       url('iconfont.woff?t=1713751571578') format('woff'),
+       url('iconfont.woff?t=1713766977199') format('woff'),
-       url('iconfont.ttf?t=1713751571578') format('truetype');
+       url('iconfont.ttf?t=1713766977199') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-more:before {
+  content: "\e63c";
+}
+
 .icon-mj:before {
   content: "\e643";
 }

web/src/assets/iconfont/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "1421807",
+      "name": "更多",
+      "font_class": "more",
+      "unicode": "e63c",
+      "unicode_decimal": 58940
+    },
     {
       "icon_id": "36264781",
       "name": "MidJourney",

web/src/views/Home.vue

@@ -6,12 +6,36 @@
         <div class="divider"></div>
       </div>
       <ul class="nav-items">
-        <li v-for="item in navs" :key="item.url">
+        <li v-for="item in mainNavs" :key="item.url">
           <a @click="changeNav(item)" :class="item.url === curPath ? 'active' : ''">
             <el-image :src="item.icon" style="width: 30px;height: 30px"/>
           </a>
           <div :class="item.url === curPath ? 'title active' : 'title'">{{ item.name }}</div>
         </li>
+
+        <el-popover
+            v-if="moreNavs.length > 0"
+            placement="right-end"
+            trigger="hover"
+        >
+          <template #reference>
+            <li>
+              <a class="active">
+                <el-image src="/images/menu/more.png" style="width: 30px;height: 30px"/>
+              </a>
+            </li>
+          </template>
+          <template #default>
+            <ul class="more-menus">
+              <li v-for="item in moreNavs" :key="item.url" :class="item.url === curPath ? 'active' : ''">
+                <a @click="changeNav(item)">
+                  <el-image :src="item.icon" style="width: 20px;height: 20px"/>
+                  <span :class="item.url === curPath ? 'title active' : 'title'">{{ item.name }}</span>
+                </a>
+              </li>
+            </ul>
+          </template>
+        </el-popover>
       </ul>
     </div>
     <div class="content">
@@ -33,7 +57,8 @@ import {ElMessage} from "element-plus";
 
 const router = useRouter();
 const logo = ref('/images/logo.png');
-const navs = ref([])
+const mainNavs = ref([])
+const moreNavs = ref([])
 const curPath = ref(router.currentRoute.value.path)
 
 const changeNav = (item) => {
@@ -49,7 +74,11 @@ onMounted(() => {
   })
   // 获取菜单
   httpGet("/api/menu/list").then(res => {
-    navs.value = res.data
+    mainNavs.value = res.data
+    if (res.data.length > 7) {
+      mainNavs.value = res.data.slice(0, 7)
+      moreNavs.value = res.data.slice(7)
+    }
   }).catch(e => {
     ElMessage.error("获取系统菜单失败：" + e.message)
   })
@@ -132,6 +161,7 @@ onMounted(() => {
         }
       }
     }
+
   }
 
   .content {
@@ -142,4 +172,29 @@ onMounted(() => {
   }
 
 }
+
+.el-popper {
+  .more-menus {
+    li {
+      padding 10px 15px
+      cursor pointer
+      border-radius 5px
+      margin 5px 0
+
+      .el-image {
+        position: relative
+        top 5px
+        right 5px
+      }
+
+      &:hover {
+        background-color #f1f1f1
+      }
+    }
+
+    li.active {
+      background-color #f1f1f1
+    }
+  }
+}
 </style>

web/src/views/PowerLog.vue

@@ -69,7 +69,7 @@
 <script setup>
 import {onMounted, ref} from "vue"
 import {dateFormat} from "@/utils/libs";
-import {Back, DocumentCopy, Search} from "@element-plus/icons-vue";
+import {Search} from "@element-plus/icons-vue";
 import Clipboard from "clipboard";
 import {ElMessage} from "element-plus";
 import {httpPost} from "@/utils/http";
@@ -84,7 +84,7 @@ const query = ref({
   model: "",
   date: []
 })
-const tagColors = ref(["", "success", "primary", "danger", "info", "warning"])
+const tagColors = ref(["", "success", "", "danger", "info", "warning"])
 
 onMounted(() => {
   fetchData()