✨ feat: 编写首页

gear-ui3/src/components/AllApplications.vue

@@ -0,0 +1,241 @@
+<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 class="app-actions">
+              <el-dropdown 
+                trigger="hover" 
+                @click.native.stop
+                @command="(command) => handleCommand(command, menu, child)"
+              >
+                <span class="actions-icon">
+                  <More />
+                </span>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item command="addFavorites">
+                      添加到常用
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </div>
+          </div>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import { getRouters } from '@/api/menu'
+import { More } from '@element-plus/icons-vue'
+
+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 = `${basePath}/${childMenu.path}`
+      this.$router.push(fullPath)
+    },
+    // 处理添加到常用功能
+    handleAddToFavorites(parentMenu, childMenu) {
+      // 构建完整的应用信息
+      const appInfo = {
+        parent: parentMenu,
+        child: childMenu,
+        fullPath: `${parentMenu.path}/${childMenu.path}`,
+        timestamp: new Date().getTime()
+      }
+      console.log(appInfo)
+      // 向父组件发送事件
+      this.$emit('addFavorites', appInfo)
+    },
+    handleCommand(command, parentMenu, childMenu) {
+      if (command === 'addFavorites') {
+        this.handleAddToFavorites(parentMenu, childMenu)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.all-applications-container {
+  padding: 20px;
+  border-radius: 8px;
+  margin-top: 20px;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 16px;
+  color: #303133;
+}
+
+/* 应用列表容器改为 flex 横向布局 */
+.app-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px; 
+  padding-top: 10px;
+  margin: 10px 0;
+}
+
+/* 每个应用 item 样式 */
+.app-item {
+  display: flex;
+  flex-direction: row; /* 横向排列 */
+  align-items: center;
+  cursor: pointer;
+  border-radius: 8px;
+  padding: 20px;
+  width: 160px;
+  transition: all 0.3s ease;
+  background-color: #ffffff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); /* 初始阴影更浅 */
+  position: relative; /* 为三点菜单定位做准备 */
+
+  &:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); /* 悬停加深阴影 */
+    transform: translateY(-2px); /* 轻微上浮增强交互感 */
+  }
+}
+
+/* 图标区域 */
+.app-icon-wrapper {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 12px; /* 与文字保持间距 */
+  background-color: #f5f7fa; /* 浅背景突出图标 */
+  transition: background-color 0.3s ease;
+
+  /*  hover 时图标区域背景变化 */
+  .app-item:hover & {
+    background-color: #e6f0ff; 
+  }
+}
+
+/* 图标样式 */
+.app-icon {
+  font-size: 24px; 
+  color: #409eff;
+}
+
+/* 应用名称样式 */
+.app-name {
+  font-size: 14px;
+  color: #606266;
+  flex: 1; /* 占满剩余空间，让三点菜单靠右 */
+}
+
+/* 三点菜单样式 */
+.app-actions {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  opacity: 0; /* 默认隐藏 */
+  transition: opacity 0.3s ease;
+}
+
+/* 鼠标悬停在卡片上时显示三点菜单 */
+.app-item:hover .app-actions {
+  opacity: 1;
+}
+
+.actions-icon {
+  cursor: pointer;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+}
+
+/* Tabs 样式优化 */
+:deep(.el-tabs__header) {
+  margin-bottom: 12px;
+}
+
+:deep(.el-tabs__nav-wrap::after) {
+  height: 1px;
+}
+
+:deep(.el-tabs__item) {
+  font-size: 15px;
+}
+
+/* 下拉菜单样式调整 */
+:deep(.el-dropdown-menu) {
+  min-width: 120px;
+}
+
+:deep(.el-dropdown-item) {
+  padding: 6px 16px;
+  font-size: 14px;
+}
+</style>

gear-ui3/src/router/index.js

@@ -66,7 +66,7 @@ export const constantRoutes = [
         path: '/index',
         component: () => import('@/views/index'),
         name: 'Index',
-        meta: { title: '首页', icon: 'dashboard', affix: true }
+        meta: { title: '工作台', icon: 'dashboard', affix: true }
       }
     ]
   },

gear-ui3/src/views/components/Hello.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="user-greeting-row">
+    <img :src="avatar" class="user-avatar" alt="用户头像" />
+    <div class="greeting-text">
+      <div class="greeting-title">{{ greeting }}，{{ name }}</div>
+      <div class="greeting-desc">愿你天黑有灯，下雨有伞</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import useUserStore from '@/store/modules/user';
+
+// 接收父组件传递的props（可选，也可内部获取）
+const props = defineProps({
+  // 允许父组件自定义问候语描述
+  greetingDesc: {
+    type: String,
+    default: '愿你天黑有灯，下雨有伞'
+  }
+});
+
+// 响应式数据
+const avatar = ref('');
+const name = ref('');
+const greeting = ref('');
+
+// 用户Store
+const userStore = useUserStore();
+
+// 获取问候语
+const getGreeting = () => {
+  const hour = new Date().getHours();
+  if (hour < 6) return '凌晨好';
+  if (hour < 9) return '早上好';
+  if (hour < 12) return '上午好';
+  if (hour < 14) return '中午好';
+  if (hour < 18) return '下午好';
+  if (hour < 21) return '晚上好';
+  return '夜深了';
+};
+
+// 生命周期钩子
+onMounted(() => {
+  // 从用户Store获取用户信息
+  avatar.value = userStore.avatar;
+  name.value = userStore.name;
+  // 获取问候语
+  greeting.value = getGreeting();
+});
+</script>
+
+<style scoped>
+.user-greeting-row {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  margin-bottom: 24px;
+}
+
+.user-avatar {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 2px solid #e0e0e0;
+  background: #fff;
+}
+
+.greeting-text {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.greeting-title {
+  font-size: 28px;
+  font-weight: 600;
+  color: #333;
+}
+
+.greeting-desc {
+  font-size: 16px;
+  color: #888;
+  margin-top: 4px;
+}
+</style>