顶部菜单

src/api/modules/system/menu-top.js

@@ -37,4 +37,12 @@ export default {
             },
         }, false)
     },
+    //获取菜单数据
+    async getData() {
+        return HcApi({
+            url: '/api/blade-system/menu/top-menu',
+            method: 'get',
+            params: {},
+        }, false)
+    },
 }

src/layout/index.scss

@@ -57,6 +57,22 @@
             .el-scrollbar__view {
                 height: 100%;
             }
+            .hc-top-menu-bar-item {
+                position: relative;
+                height: 100%;
+                display: inline-flex;
+                align-items: center;
+                padding: 0 6px;
+                cursor: pointer;
+                transition: background .2s;
+                .hc-icon-i {
+                    margin-right: 3px;
+                    font-size: 18px;
+                }
+                &:hover {
+                    background: var(--el-color-primary-light-8);
+                }
+            }
         }
         .header-content-bar {
             position: relative;

src/layout/index.vue

@@ -9,7 +9,9 @@
                 <hc-icon v-if="isCollapse" name="menu-unfold" />
                 <hc-icon v-else name="menu-fold" />
             </div>
-            <div class="header-top-menu-bar" />
+            <div class="header-top-menu-bar">
+                <TopMenu />
+            </div>
             <div class="header-content-bar">
                 <HcRefresh />
                 <HcColor />
@@ -44,6 +46,7 @@ const router = useRouter()
 const store = useAppStore()
 
 //子组件
+import TopMenu from './modules/TopMenu.vue'
 import MenuBar from './modules/MenuBar.vue'
 import HcRefresh from './modules/Refresh.vue'
 import HcColor from './modules/Color.vue'

src/layout/modules/TopMenu.vue

@@ -0,0 +1,41 @@
+<template>
+    <el-scrollbar>
+        <div v-for="item in topMenuData" :key="item.key" class="hc-top-menu-bar-item" @click="barMenuClick(item)">
+            <hc-icon v-if="item?.source" :name="item.source" />
+            <span class="name">{{ item.name }}</span>
+        </div>
+    </el-scrollbar>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue'
+import { getArrValue, newWindow } from 'js-fast-way'
+import { isPathUrl } from '~uti/tools'
+import mainApi from '~api/system/menu-top'
+
+//渲染完成
+onMounted(() => {
+    getTopMenuData()
+})
+
+//获取顶部菜单
+const topMenuData = ref([])
+const getTopMenuData = async () => {
+    let menuData = []
+    const { data } = await mainApi.getData()
+    const res = getArrValue(data)
+    for (let i = 0; i < res.length; i++) {
+        if (isPathUrl(res[i].code)) {
+            menuData.push(res[i])
+        }
+    }
+    topMenuData.value = menuData
+}
+
+//菜单被点击
+const barMenuClick = (item) => {
+    if (isPathUrl(item.code)) {
+        newWindow(item.code)
+    }
+}
+</script>

src/views/system/menu-top.vue

@@ -89,7 +89,7 @@ const tableRef = ref(null)
 const tableColumn = ref([
     { key: 'name', name: '菜单名称' },
     { key: 'code', name: '跳转地址' },
-    { key: 'sort', name: '排序', width: 80, align: 'center' },
+    { key: 'sort', name: '排序' },
     { key: 'action', name: '操作', width: 200, align: 'center' },
 ])
 
@@ -207,7 +207,7 @@ const dialogSubmit = async () => {
     //发起请求
     const { error, code, msg } = await mainApi.submit(formModel.value)
     if (!error && code === 200) {
-        submitLoading.value = false
+        dialogClose()
         window?.$message?.success('操作成功')
         reloadPage()
     } else {