变更首页

2025-07-22 16:28:43 +08:00
parent 4422ca9099
commit 93d2618022
9 changed files with 731 additions and 131 deletions
--- a/klp-ui/src/views/components/AllApplications.vue
+++ b/klp-ui/src/views/components/AllApplications.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="all-applications-container">
+    <h3 class="title">全部应用</h3>
+    <el-tabs v-model="activeTabName" class="app-tabs">
+      <el-tab-pane
+        v-for="menu in filteredMenus"
+        :key="menu.path"
+        :label="menu.meta.title"
+        :name="menu.path"
+      >
+        <div class="app-grid">
+          <div
+            v-for="child in menu.children"
+            :key="child.path"
+            class="app-item"
+            @click="handleAppClick(menu, child)"
+          >
+            <div class="app-icon-wrapper">
+              <svg-icon :icon-class="child.meta.icon || 'documentation'" class="app-icon" />
+            </div>
+            <span class="app-name">{{ child.meta.title }}</span>
+          </div>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import { getRouters } from '@/api/menu'
+import path from 'path'
+
+export default {
+  name: 'AllApplications',
+  data() {
+    return {
+      allMenus: [],
+      activeTabName: ''
+    }
+  },
+  computed: {
+    filteredMenus() {
+      const filterHidden = (menus) => {
+        return menus
+          .filter(menu => menu.hidden !== true)
+          .map(menu => {
+            if (menu.children) {
+              menu.children = filterHidden(menu.children)
+            }
+            return menu
+          })
+      }
+      const topLevelMenus = filterHidden(this.allMenus).filter(
+        menu => menu.children && menu.children.length > 0
+      )
+      return topLevelMenus
+    }
+  },
+  created() {
+    this.fetchMenus()
+  },
+  methods: {
+    fetchMenus() {
+      getRouters().then(response => {
+        this.allMenus = response.data
+        if (this.filteredMenus.length > 0) {
+          this.activeTabName = this.filteredMenus[0].path
+        }
+      })
+    },
+    handleAppClick(parentMenu, childMenu) {
+      const basePath = parentMenu.path
+      const fullPath = path.resolve(basePath, childMenu.path)
+      this.$router.push(fullPath)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.all-applications-container {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  margin-top: 20px;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 16px;
+  color: #303133;
+}
+
+.app-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 20px;
+  padding-top: 10px;
+}
+
+.app-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+  padding: 10px;
+  border-radius: 8px;
+  transition: background-color 0.3s ease;
+
+  &:hover {
+    background-color: #f5f7fa;
+  }
+}
+
+.app-icon-wrapper {
+  width: 56px;
+  height: 56px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 10px;
+  background-color: #f0f5ff;
+}
+
+.app-icon {
+  font-size: 28px;
+  color: #409eff;
+}
+
+.app-name {
+  font-size: 14px;
+  color: #606266;
+  text-align: center;
+}
+
+::v-deep .el-tabs__header {
+  margin-bottom: 0;
+}
+
+::v-deep .el-tabs__nav-wrap::after {
+  height: 1px;
+}
+
+::v-deep .el-tabs__item {
+  font-size: 15px;
+}
+</style>