第一次提交

frontend/src/components/MainLayout.vue

@@ -0,0 +1,173 @@
+<template>
+  <div class="main-layout">
+    <el-container>
+      <el-header>
+        <div class="header-content">
+          <h1>低代码智能体平台</h1>
+          <div class="header-actions">
+            <span v-if="userStore.user">欢迎，{{ userStore.user.username }}</span>
+            <el-button @click="handleLogout">退出</el-button>
+          </div>
+        </div>
+      </el-header>
+      <el-main>
+        <!-- 导航菜单 -->
+        <el-menu
+          :default-active="activeMenu"
+          class="nav-menu"
+          mode="horizontal"
+          :ellipsis="false"
+          @select="handleMenuSelect"
+        >
+          <el-menu-item index="workflows">
+            <el-icon><Document /></el-icon>
+            <span>工作流管理</span>
+          </el-menu-item>
+          <el-menu-item index="agents">
+            <el-icon><User /></el-icon>
+            <span>Agent管理</span>
+          </el-menu-item>
+          <el-menu-item index="executions">
+            <el-icon><List /></el-icon>
+            <span>执行历史</span>
+          </el-menu-item>
+          <el-menu-item index="data-sources" @click="router.push('/data-sources')">
+            <el-icon><Connection /></el-icon>
+            <span>数据源管理</span>
+          </el-menu-item>
+          <el-menu-item index="model-configs" @click="router.push('/model-configs')">
+            <el-icon><Setting /></el-icon>
+            <span>模型配置管理</span>
+          </el-menu-item>
+          <el-menu-item index="node-templates" @click="router.push('/node-templates')">
+            <el-icon><Document /></el-icon>
+            <span>节点模板</span>
+          </el-menu-item>
+          <el-menu-item index="template-market" @click="router.push('/template-market')">
+            <el-icon><Star /></el-icon>
+            <span>模板市场</span>
+          </el-menu-item>
+          <el-menu-item 
+            v-if="userStore.user?.role === 'admin'"
+            index="permissions" 
+            @click="router.push('/permissions')"
+          >
+            <el-icon><Lock /></el-icon>
+            <span>权限管理</span>
+          </el-menu-item>
+          <el-menu-item index="monitoring" @click="router.push('/monitoring')">
+            <el-icon><Monitor /></el-icon>
+            <span>系统监控</span>
+          </el-menu-item>
+          <el-menu-item index="alert-rules" @click="router.push('/alert-rules')">
+            <el-icon><Bell /></el-icon>
+            <span>告警规则</span>
+          </el-menu-item>
+        </el-menu>
+        
+        <!-- 页面内容 -->
+        <slot />
+      </el-main>
+    </el-container>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { useUserStore } from '@/stores/user'
+import { Document, User, List, Connection, Setting, Star, Lock, Monitor, Bell } from '@element-plus/icons-vue'
+
+const router = useRouter()
+const route = useRoute()
+const userStore = useUserStore()
+
+// 当前激活的菜单
+const activeMenu = computed(() => {
+  if (route.path === '/' || route.path === '/workflow' || route.path.startsWith('/workflow/')) return 'workflows'
+  if (route.path === '/agents' || route.path.startsWith('/agents/')) return 'agents'
+  if (route.path === '/executions' || route.path.startsWith('/executions/')) return 'executions'
+  if (route.path === '/data-sources') return 'data-sources'
+  if (route.path === '/model-configs') return 'model-configs'
+  if (route.path === '/node-templates') return 'node-templates'
+  if (route.path === '/permissions') return 'permissions'
+  if (route.path === '/template-market') return 'template-market'
+  if (route.path === '/monitoring') return 'monitoring'
+  if (route.path === '/alert-rules') return 'alert-rules'
+  return 'workflows'
+})
+
+// 菜单选择
+const handleMenuSelect = (key: string) => {
+  if (key === 'workflows') {
+    router.push('/')
+  } else if (key === 'agents') {
+    router.push('/agents')
+  } else if (key === 'executions') {
+    router.push('/executions')
+  } else if (key === 'data-sources') {
+    router.push('/data-sources')
+  } else if (key === 'model-configs') {
+    router.push('/model-configs')
+  } else if (key === 'node-templates') {
+    router.push('/node-templates')
+  } else if (key === 'template-market') {
+    router.push('/template-market')
+  } else if (key === 'permissions') {
+    router.push('/permissions')
+  } else if (key === 'monitoring') {
+    router.push('/monitoring')
+  } else if (key === 'alert-rules') {
+    router.push('/alert-rules')
+  }
+}
+
+// 退出登录
+const handleLogout = () => {
+  userStore.logout()
+  router.push('/login')
+}
+</script>
+
+<style scoped>
+.main-layout {
+  width: 100%;
+  height: 100vh;
+}
+
+.header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 100%;
+  padding: 0 20px;
+  background: #409eff;
+  color: white;
+}
+
+.header-content h1 {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 500;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.nav-menu {
+  margin-bottom: 20px;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+:deep(.el-menu--horizontal) {
+  border-bottom: 1px solid #e4e7ed;
+}
+
+:deep(.el-menu-item) {
+  height: 50px;
+  line-height: 50px;
+}
+</style>