diff --git a/capi-ui/src/api/menu.ts b/capi-ui/src/api/menu.ts
new file mode 100644
index 0000000..f5d6062
--- /dev/null
+++ b/capi-ui/src/api/menu.ts
@@ -0,0 +1,45 @@
+import request from '@/utils/request'
+
+/**
+ * 菜单模块接口定义
+ */
+export interface MenuItem {
+  menuId: string
+  menuName: string
+  menuCode: string
+  moduleCode: string
+  cicon: string
+  chref: string
+  ftenantId: string
+  fflowId: string | null
+  fflowTaskId: string | null
+  fflowState: string | null
+}
+
+export interface ModuleItem {
+  moduleName: string
+  moduleCode: string
+  icon: string
+  href: string
+  menus: MenuItem[]
+}
+
+export interface MenuResponse {
+  code: number
+  message: string
+  result: ModuleItem[]
+}
+
+/**
+ * 获取模块菜单数据
+ */
+export const getModuleMenus = async (): Promise<ModuleItem[]> => {
+  const response = await request.get<MenuResponse>('/Sys/login/getModules')
+  
+  if (response.code !== 200) {
+    console.error('获取菜单数据失败:', response.message)
+    throw new Error(`获取菜单失败: ${response.message}`)
+  }
+  
+  return response.result || []
+}
diff --git a/capi-ui/src/components/HelloWorld.vue b/capi-ui/src/components/HelloWorld.vue
deleted file mode 100644
index 4e67297..0000000
--- a/capi-ui/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-
-defineProps({
-  msg: String
-})
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <p>
-    Welcome:
-    <a href="https://hx.dcloud.net.cn/" target="_blank">HBuilderX</a>
-  </p>
-
-  <p>
-    <a href="https://vitejs.dev/guide/features.html" target="_blank">
-      Vite Documentation
-    </a>
-    |
-    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
-  </p>
-
-  <button type="button" @click="count++">count is: {{ count }}</button>
-  <p>
-    Edit
-    <code>components/HelloWorld.vue</code> to test hot module replacement.
-  </p>
-</template>
-
-<style scoped>
-a {
-  color: #42b983;
-}
-</style>
diff --git a/capi-ui/src/components/Layout/AdminLayout.vue b/capi-ui/src/components/Layout/AdminLayout.vue
deleted file mode 100644
index 6f7803b..0000000
--- a/capi-ui/src/components/Layout/AdminLayout.vue
+++ /dev/null
@@ -1,1083 +0,0 @@
-<template>
-  <div class="app-container" :style="containerStyle">
-    <a-layout style="min-height: 100%;">
-      <!-- 顶部导航栏：支持自定义Logo、系统名、主色调 -->
-      <a-layout-header class="header" :style="headerStyle">
-        <!-- 左侧Logo和系统名称 -->
-        <div class="logo">
-          <img :src="logoSrc" class="logo-img" :alt="systemName + 'Logo'" />
-          <span class="system-name">{{ systemName }}</span>
-        </div>
-
-        <!-- 主导航菜单：支持自定义菜单配置 -->
-        <a-menu
-          theme="light"
-          mode="horizontal"
-          :selectedKeys="selectedKey"
-          class="main-menu"
-          @click="handleMenuClick"
-        >
-          <a-menu-item 
-            v-for="(menu, idx) in mainMenuList" 
-            :key="menu.key" 
-            :class="['menu-button', menu.class]"
-            :disabled="menu.disabled"
-          >
-            <component :is="menu.icon" class="menu-icon" />
-            <span>{{ menu.title }}</span>
-          </a-menu-item>
-        </a-menu>
-
-        <!-- 右侧功能区：搜索框、功能图标、用户头像（支持自定义头像） -->
-        <div class="header-actions">
-          <!-- 搜索框（支持隐藏） -->
-          <div class="search-box" v-if="showSearch">
-            <SearchOutlined class="search-icon" />
-            <input 
-              type="text" 
-              :placeholder="searchPlaceholder" 
-              class="search-input"
-              v-model="searchValue"
-              @input="handleSearchInput"
-            />
-          </div>
-          
-          <!-- 功能图标区（支持自定义图标） -->
-          <div class="action-icons" v-if="actionIcons.length > 0">
-            <a-tooltip 
-              v-for="(icon, idx) in actionIcons" 
-              :key="idx" 
-              :title="icon.tooltip"
-              :placement="icon.placement || 'bottom'"
-            >
-              <component 
-                :is="icon.component" 
-                class="action-icon"
-                @click="() => handleActionIconClick(icon.key)"
-              />
-            </a-tooltip>
-          </div>
-          
-          <!-- 用户头像（支持自定义头像地址、隐藏用户入口） -->
-          <a-dropdown
-            v-if="showUser"
-            placement="bottomRight"
-            :auto-adjust-overflow="true"
-            @visible-change="handleDropdownVisible"
-          >
-            <div class="user-avatar">
-              <img :src="avatarSrc" :alt="userName || '用户头像'" class="avatar-img" />
-            </div>
-            <template #overlay>
-              <a-menu class="user-menu" @click="handleUserMenuClick">
-                <a-menu-item 
-                  v-for="(item, idx) in userMenuList" 
-                  :key="item.key"
-                  :disabled="item.disabled"
-                >
-                  <component :is="item.icon" class="mr-2" v-if="item.icon" />
-                  {{ item.title }}
-                </a-menu-item>
-              </a-menu>
-            </template>
-          </a-dropdown>
-        </div>
-      </a-layout-header>
-
-      <!-- 标签栏：支持自定义初始标签、标签交互 -->
-      <div class="tab-bar" :style="tabBarStyle">
-        <!-- 控制台标签（固定） -->
-        <a-tag
-          :class="['console-tab', activeTabKey === consoleTabKey ? 'console-tab--active' : '']"
-          @click="switchToConsole"
-        >
-          <HomeOutlined class="console-tab-icon" />
-          <span>{{ consoleTabTitle }}</span>
-        </a-tag>
-
-        <!-- 标签导航按钮（前后切换） -->
-        <a-button
-          size="small"
-          class="tab-nav-btn"
-          @click="switchTab('prev')"
-          :disabled="currentTabIndex === 0 || otherTabs.length === 0"
-          ghost
-        >
-          &lt;
-        </a-button>
-
-        <!-- 动态标签列表 -->
-        <a-tabs
-          v-model:activeKey="activeTabKey"
-          @change="handleTabChange"
-          class="google-tabs"
-          :animated="false"
-          hide-add
-        >
-          <a-tab-pane
-            v-for="tab in otherTabs"
-            :key="tab.key"
-            :tab="renderTabTitle(tab)"
-          />
-        </a-tabs>
-
-        <!-- 标签导航按钮（前后切换） -->
-        <a-button
-          size="small"
-          class="tab-nav-btn"
-          @click="switchTab('next')"
-          :disabled="currentTabIndex === otherTabs.length - 1 || otherTabs.length === 0"
-          ghost
-        >
-          &gt;
-        </a-button>
-
-        <!-- 关闭所有标签按钮 -->
-        <a-button
-          size="small"
-          class="close-all-btn"
-          @click="closeAllTabs"
-          :disabled="otherTabs.length === 0"
-          ghost
-        >
-          <CloseOutlined class="close-icon" /> {{ closeAllText }}
-        </a-button>
-      </div>
-
-      <!-- 内容区域：支持自定义组件映射 -->
-      <a-layout-content class="content" :style="contentStyle">
-        <div class="home-content" :style="homeContentStyle">
-          <component
-            :is="currentMainComponent"
-            :key="activeTabKey"
-            v-bind="currentComponentProps"
-          />
-        </div>
-      </a-layout-content>
-    </a-layout>
-
-    <!-- 模块菜单弹窗：基于自定义菜单配置渲染 -->
-    <a-modal
-      v-model:open="moduleModalVisible"
-      :title="currentModuleName"
-      :width="moduleModalWidth"
-      :centered="true"
-      :mask-closable="false"
-      @cancel="moduleModalVisible = false"
-      wrap-class-name="module-modal-wrapper"
-      :ok-button-props="{ style: { display: 'none' } }"
-      :cancel-button-props="{ style: { display: 'none' } }"
-    >
-      <div class="module-menu-container">
-        <a-row :gutter="[{ xs: 16, sm: 24 }, { xs: 16, sm: 24 }]">
-          <a-col
-            v-for="menu in currentModuleMenus"
-            :key="menu.key"
-            :xs="12"
-            :sm="8"
-            :md="6"
-            :lg="4"
-            :xl="3"
-          >
-            <a-card
-              class="menu-card"
-              @click="() => handleMenuCardClick(menu)"
-              hoverable
-              bordered
-            >
-              <div class="menu-card-inner">
-                <component :is="menu.icon" class="menu-icon" />
-                <div class="menu-title">{{ menu.title }}</div>
-              </div>
-            </a-card>
-          </a-col>
-        </a-row>
-      </div>
-    </a-modal>
-
-    <!-- 退出确认对话框：支持自定义文案 -->
-    <a-modal
-      v-model:open="logoutVisible"
-      :centered="true"
-      :closable="false"
-      :mask-closable="false"
-      :footer="null"
-      :width="logoutModalWidth"
-      wrap-class-name="logout-modal-wrapper"
-    >
-      <div class="logout-body">
-        <p class="logout-title">
-          <ExclamationCircleOutlined style="color: var(--warning-color); margin-right:8px;" />
-          {{ logoutTitle }}
-        </p>
-        <p class="logout-desc">{{ logoutDesc }}</p>
-    
-        <div class="logout-actions">
-          <a-button size="large" @click="logoutVisible = false">{{ logoutCancelText }}</a-button>
-          <a-button
-            type="primary"
-            size="large"
-            style="margin-left: 16px"
-            @click="handleDoLogout"
-          >
-            {{ logoutConfirmText }}
-          </a-button>
-        </div>
-      </div>
-    </a-modal>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, h, watch } from 'vue';
-import { Layout, Menu, Button, Tabs, Card, Tag, Dropdown, Modal, Row, Col, Tooltip } from 'ant-design-vue';
-import {
-  ApiOutlined, UserOutlined, CloseOutlined, LinkOutlined, LogoutOutlined,
-  ExclamationCircleOutlined, BarChartOutlined, DownloadOutlined, SettingOutlined,
-  FormOutlined, HistoryOutlined, UserAddOutlined, HomeOutlined, DatabaseOutlined,
-  SearchOutlined, StarOutlined, BellOutlined, QuestionCircleOutlined
-} from '@ant-design/icons-vue';
-
-// ========================== 组件Props（可配置项）==========================
-const props = defineProps({
-  /** Logo图片地址 */
-  logoSrc: {
-    type: String,
-    default: '/my.png'
-  },
-  /** 系统名称 */
-  systemName: {
-    type: String,
-    default: 'cApi 管理'
-  },
-  /** 用户头像地址 */
-  avatarSrc: {
-    type: String,
-    default: 'https://picsum.photos/id/1005/200/200'
-  },
-  /** 用户名（用于头像alt文本） */
-  userName: {
-    type: String,
-    default: ''
-  },
-  /** 主色调（用于主题色统一） */
-  primaryColor: {
-    type: String,
-    default: '#1890ff'
-  },
-  /** 警告色（用于退出弹窗等） */
-  warningColor: {
-    type: String,
-    default: '#faad14'
-  },
-  /** 主导航菜单配置（格式：[{key, title, icon, disabled, class}]） */
-  mainMenuList: {
-    type: Array,
-    default: () => [
-      { key: 'app', title: '应用中心', icon: ApiOutlined, disabled: false },
-      { key: 'data', title: '数据中心', icon: DatabaseOutlined, disabled: false },
-      { key: 'integration', title: '集成中心', icon: LinkOutlined, disabled: false },
-      { key: 'system', title: '系统管理', icon: SettingOutlined, disabled: false }
-    ]
-  },
-  /** 模块菜单配置（核心：映射导航与页面组件） */
-  moduleMenusConfig: {
-    type: Object,
-    default: () => ({
-      app: {
-        name: '应用中心',
-        menus: [
-          { key: 'app-list', title: '应用列表', icon: ApiOutlined, component: () => h('div', '应用列表页面'), closable: true },
-          { key: 'app-create', title: '创建应用', icon: FormOutlined, component: () => h('div', '创建应用页面'), closable: true }
-        ]
-      },
-      data: {
-        name: '数据中心',
-        menus: [
-          { key: 'data-analytics', title: '数据分析', icon: BarChartOutlined, component: () => h('div', '数据分析页面'), closable: true },
-          { key: 'data-export', title: '数据导出', icon: DownloadOutlined, component: () => h('div', '数据导出页面'), closable: true }
-        ]
-      },
-      integration: {
-        name: '集成中心',
-        menus: [
-          { key: 'api-list', title: 'API列表', icon: ApiOutlined, component: () => h('div', 'API列表页面'), closable: true },
-          { key: 'integration-history', title: '集成记录', icon: HistoryOutlined, component: () => h('div', '集成记录页面'), closable: true }
-        ]
-      },
-      system: {
-        name: '系统管理',
-        menus: [
-          { key: 'system-settings', title: '系统设置', icon: SettingOutlined, component: () => h('div', '系统设置页面'), closable: true },
-          { key: 'user-manage', title: '用户管理', icon: UserOutlined, component: () => h('div', '用户管理页面'), closable: true }
-        ]
-      }
-    })
-  },
-  /** 控制台组件（默认页面） */
-  consoleComponent: {
-    type: [Object, Function],
-    default: () => h('div', { style: { padding: '20px' } }, '控制台首页')
-  },
-  /** 控制台标签Key */
-  consoleTabKey: {
-    type: String,
-    default: 'console'
-  },
-  /** 控制台标签标题 */
-  consoleTabTitle: {
-    type: String,
-    default: '控制台'
-  },
-  /** 是否显示搜索框 */
-  showSearch: {
-    type: Boolean,
-    default: true
-  },
-  /** 搜索框占位符 */
-  searchPlaceholder: {
-    type: String,
-    default: '搜索'
-  },
-  /** 功能图标配置（格式：[{key, component, tooltip, placement}]） */
-  actionIcons: {
-    type: Array,
-    default: () => [
-      { key: 'star', component: StarOutlined, tooltip: '收藏' },
-      { key: 'bell', component: BellOutlined, tooltip: '通知' },
-      { key: 'help', component: QuestionCircleOutlined, tooltip: '帮助' },
-      { key: 'setting', component: SettingOutlined, tooltip: '设置' }
-    ]
-  },
-  /** 是否显示用户入口（头像+下拉菜单） */
-  showUser: {
-    type: Boolean,
-    default: true
-  },
-  /** 用户下拉菜单配置（格式：[{key, title, icon, disabled}]） */
-  userMenuList: {
-    type: Array,
-    default: () => [
-      { key: 'profile', title: '个人资料', icon: UserOutlined, disabled: false },
-      { key: 'settings', title: '账户设置', icon: SettingOutlined, disabled: false },
-      { key: 'divider1', type: 'divider' }, // 分割线
-      { key: 'logout', title: '退出登录', icon: LogoutOutlined, disabled: false }
-    ]
-  },
-  /** 模块弹窗宽度 */
-  moduleModalWidth: {
-    type: [String, Number],
-    default: '80%'
-  },
-  /** 退出弹窗宽度 */
-  logoutModalWidth: {
-    type: [String, Number],
-    default: 420
-  },
-  /** 退出弹窗标题 */
-  logoutTitle: {
-    type: String,
-    default: '温馨提示'
-  },
-  /** 退出弹窗描述 */
-  logoutDesc: {
-    type: String,
-    default: '是否确认退出系统？'
-  },
-  /** 退出弹窗取消按钮文本 */
-  logoutCancelText: {
-    type: String,
-    default: '取消'
-  },
-  /** 退出弹窗确认按钮文本 */
-  logoutConfirmText: {
-    type: String,
-    default: '确定'
-  },
-  /** 关闭所有标签按钮文本 */
-  closeAllText: {
-    type: String,
-    default: '关闭所有'
-  },
-  /** 内容区样式（自定义padding、背景等） */
-  contentStyle: {
-    type: Object,
-    default: () => ({})
-  },
-  /** 当前标签页组件的props（用于给页面传参） */
-  currentComponentProps: {
-    type: Object,
-    default: () => ({})
-  }
-});
-
-// ========================== 组件Emit（事件回调）==========================
-const emit = defineEmits([
-  /** 退出登录触发 */
-  'logout',
-  /** 标签页切换触发（参数：当前标签key） */
-  'tab-change',
-  /** 主导航菜单点击触发（参数：菜单key） */
-  'menu-click',
-  /** 用户下拉菜单点击触发（参数：菜单key，排除logout） */
-  'user-menu-click',
-  /** 功能图标点击触发（参数：图标key） */
-  'action-icon-click',
-  /** 搜索输入触发（参数：输入值） */
-  'search-input'
-]);
-
-// ========================== 组件内部状态 ==========================
-// 导航选中key
-const selectedKey = ref([props.consoleTabKey]);
-// 模块弹窗显示状态
-const moduleModalVisible = ref(false);
-// 当前模块key（对应mainMenuList的key）
-const currentModuleKey = ref(props.consoleTabKey);
-// 活跃标签key
-const activeTabKey = ref(props.consoleTabKey);
-// 搜索框输入值
-const searchValue = ref('');
-// 退出弹窗显示状态
-const logoutVisible = ref(false);
-// 所有标签列表（初始包含控制台）
-const allTabs = ref([
-  {
-    key: props.consoleTabKey,
-    title: props.consoleTabTitle,
-    component: props.consoleComponent,
-    closable: false
-  }
-]);
-
-// ========================== 计算属性 ==========================
-/** 排除控制台的其他标签 */
-const otherTabs = computed(() => 
-  allTabs.value.filter(tab => tab.key !== props.consoleTabKey)
-);
-
-/** 当前标签在otherTabs中的索引 */
-const currentTabIndex = computed(() => 
-  otherTabs.value.findIndex(tab => tab.key === activeTabKey.value)
-);
-
-/** 当前模块名称（用于弹窗标题） */
-const currentModuleName = computed(() => 
-  props.moduleMenusConfig[currentModuleKey.value]?.name || '功能菜单'
-);
-
-/** 当前模块的菜单列表（用于弹窗渲染） */
-const currentModuleMenus = computed(() => 
-  props.moduleMenusConfig[currentModuleKey.value]?.menus || []
-);
-
-/** 当前显示的组件（根据活跃标签匹配） */
-const currentMainComponent = computed(() => {
-  try {
-    const targetTab = allTabs.value.find(tab => tab.key === activeTabKey.value);
-    return targetTab ? targetTab.component : null;
-  } catch (error) {
-    console.error('【AdminLayout】组件加载失败:', error);
-    return () => h('div', '组件加载失败，请检查配置');
-  }
-});
-
-/** 容器样式（注入CSS变量） */
-const containerStyle = computed(() => ({
-  '--primary-color': props.primaryColor,
-  '--warning-color': props.warningColor
-}));
-
-/** 顶部导航样式（渐变背景基于主色调） */
-const headerStyle = computed(() => ({
-  background: `linear-gradient(90deg, ${props.primaryColor}1a 0%, ${props.primaryColor}0a 100%)`
-}));
-
-/** 标签栏样式 */
-const tabBarStyle = computed(() => ({
-  borderBottomColor: `${props.primaryColor}10`
-}));
-
-/** 内容区样式（合并用户自定义样式） */
-const contentStyle = computed(() => ({
-  background: '#f8f9fa',
-  padding: '16px',
-  ...props.contentStyle
-}));
-
-/** 首页内容区样式 */
-const homeContentStyle = computed(() => ({
-  background: '#fff',
-  padding: '24px',
-  borderRadius: '8px',
-  boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)',
-  height: '100%',
-  overflow: 'auto'
-}));
-
-// ========================== 事件处理 ==========================
-/** 渲染标签标题（带关闭按钮） */
-const renderTabTitle = (tab) => {
-  return h('div', { class: 'tab-title-container' }, [
-    h('span', { class: 'tab-title-text' }, tab.title),
-    tab.closable && h(
-      'span',
-      {
-        class: 'tab-close-btn',
-        onClick: (e) => {
-          e.stopPropagation();
-          deleteTab(tab.key);
-        }
-      },
-      h(CloseOutlined, { size: 12 })
-    )
-  ]);
-};
-
-/** 切换到控制台标签 */
-const switchToConsole = () => {
-  activeTabKey.value = props.consoleTabKey;
-  selectedKey.value = [props.consoleTabKey];
-  emit('tab-change', props.consoleTabKey);
-};
-
-/** 切换标签（前后导航） */
-const switchTab = (direction) => {
-  if (direction === 'prev' && currentTabIndex.value > 0) {
-    activeTabKey.value = otherTabs.value[currentTabIndex.value - 1].key;
-  } else if (
-    direction === 'next' &&
-    currentTabIndex.value < otherTabs.value.length - 1
-  ) {
-    activeTabKey.value = otherTabs.value[currentTabIndex.value + 1].key;
-  }
-};
-
-/** 删除标签 */
-const deleteTab = (key) => {
-  if (key === props.consoleTabKey) return; // 控制台标签不可删
-  const tabIndex = allTabs.value.findIndex(tab => tab.key === key);
-  if (tabIndex === -1) return;
-
-  // 删除标签
-  allTabs.value = allTabs.value.filter(tab => tab.key !== key);
-  
-  // 若删除的是当前活跃标签，切换到前一个标签或控制台
-  if (key === activeTabKey.value) {
-    const targetTab = allTabs.value[tabIndex - 1] || allTabs.value.find(tab => tab.key === props.consoleTabKey);
-    activeTabKey.value = targetTab.key;
-    emit('tab-change', targetTab.key);
-  }
-};
-
-/** 关闭所有标签（保留控制台） */
-const closeAllTabs = () => {
-  allTabs.value = allTabs.value.filter(tab => tab.key === props.consoleTabKey);
-  activeTabKey.value = props.consoleTabKey;
-  emit('tab-change', props.consoleTabKey);
-};
-
-/** 标签切换事件 */
-const handleTabChange = (key) => {
-  activeTabKey.value = key;
-  emit('tab-change', key);
-
-  // 自动匹配标签对应的模块（更新导航选中状态）
-  const tabToModuleMap = {};
-  // 遍历模块配置，生成标签->模块的映射
-  Object.entries(props.moduleMenusConfig).forEach(([moduleKey, config]) => {
-    config.menus.forEach(menu => {
-      tabToModuleMap[menu.key] = moduleKey;
-    });
-  });
-  selectedKey.value = [tabToModuleMap[key] || props.consoleTabKey];
-};
-
-/** 主导航菜单点击事件（打开模块弹窗） */
-const handleMenuClick = ({ key }) => {
-  if (key === props.consoleTabKey) {
-    switchToConsole();
-    return;
-  }
-  currentModuleKey.value = key;
-  moduleModalVisible.value = true;
-  selectedKey.value = [key];
-  emit('menu-click', key);
-};
-
-/** 模块菜单卡片点击事件（打开对应标签） */
-const handleMenuCardClick = (menuItem) => {
-  moduleModalVisible.value = false;
-  const isTabExists = allTabs.value.some(tab => tab.key === menuItem.key);
-
-  // 若标签不存在，新增标签
-  if (!isTabExists) {
-    allTabs.value.push({
-      key: menuItem.key,
-      title: menuItem.title,
-      component: menuItem.component,
-      closable: menuItem.closable ?? true
-    });
-  }
-
-  // 切换到目标标签
-  activeTabKey.value = menuItem.key;
-  emit('tab-change', menuItem.key);
-};
-
-/** 用户下拉菜单显示/隐藏事件 */
-const handleDropdownVisible = (visible) => {
-  console.log('【AdminLayout】用户下拉菜单状态:', visible ? '显示' : '隐藏');
-};
-
-/** 用户下拉菜单点击事件 */
-const handleUserMenuClick = ({ key }) => {
-  // 退出登录单独处理，其他事件通过emit暴露
-  if (key === 'logout') {
-    logoutVisible.value = true;
-  } else {
-    emit('user-menu-click', key);
-  }
-};
-
-/** 执行退出登录（触发父组件回调） */
-const handleDoLogout = () => {
-  logoutVisible.value = false;
-  emit('logout');
-};
-
-/** 功能图标点击事件 */
-const handleActionIconClick = (key) => {
-  emit('action-icon-click', key);
-};
-
-/** 搜索输入事件 */
-const handleSearchInput = (e) => {
-  emit('search-input', e.target.value);
-};
-
-// ========================== 样式注入（确保主题色生效）==========================
-watch([() => props.primaryColor, () => props.warningColor], () => {
-  document.documentElement.style.setProperty('--primary-color', props.primaryColor);
-  document.documentElement.style.setProperty('--warning-color', props.warningColor);
-}, { immediate: true });
-</script>
-
-<style scoped>
-/* 基础样式 */
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-html,
-body,
-.app-container {
-  height: 100vh;
-  overflow: hidden;
-}
-.app-container {
-  display: flex;
-  flex-direction: column;
-  --primary-color: #1890ff; /* 默认主色调 */
-  --warning-color: #faad14; /* 默认警告色 */
-}
-
-/* 顶部导航 */
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 20px;
-  height: 64px;
-  width: 100%;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
-}
-
-/* Logo和系统名称 */
-.logo {
-  display: flex;
-  align-items: center;
-  padding-right: 20px;
-  border-right: 1px solid var(--primary-color)10;
-  gap: 10px;
-}
-.logo-img {
-  width: 32px;
-  height: 32px;
-  object-fit: contain;
-  vertical-align: middle;
-}
-.system-name {
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--primary-color);
-}
-
-/* 主导航菜单 */
-.main-menu {
-  flex: 1;
-  margin: 0 25px;
-  justify-content: flex-start;
-}
-:deep(.ant-menu-horizontal) {
-  background: transparent !important;
-  border-bottom: none !important;
-}
-.menu-button {
-  border-radius: 4px;
-  margin: 0 8px !important;
-  transition: all 0.3s ease;
-}
-:deep(.ant-menu-item) {
-  color: var(--primary-color)e0 !important;
-  font-size: 13px;
-  padding: 0 12px !important;
-  height: 36px !important;
-  line-height: 36px !important;
-  background-color: rgba(255, 255, 255, 0.8) !important;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-}
-:deep(.ant-menu-item-selected) {
-  background-color: #fff !important;
-  color: var(--primary-color) !important;
-  box-shadow: 0 2px 6px var(--primary-color)20;
-}
-:deep(.ant-menu-item:hover:not(.ant-menu-item-selected)) {
-  background-color: #fff !important;
-  color: var(--primary-color) !important;
-  transform: translateY(-1px);
-  box-shadow: 0 2px 5px var(--primary-color)15;
-}
-.menu-icon {
-  margin-right: 6px;
-  font-size: 14px;
-}
-
-/* 右侧功能区 */
-.header-actions {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-/* 搜索框 */
-.search-box {
-  display: flex;
-  align-items: center;
-  background: rgba(255, 255, 255, 0.8);
-  border-radius: 4px;
-  padding: 0 12px;
-  height: 36px;
-  width: 240px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-}
-.search-icon {
-  color: #8c8c8c;
-  margin-right: 8px;
-}
-.search-input {
-  background: transparent;
-  border: none;
-  outline: none;
-  color: #333;
-  width: 100%;
-  font-size: 14px;
-}
-.search-input::placeholder {
-  color: #b3b3b3;
-}
-
-/* 功能图标区 */
-.action-icons {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding-right: 16px;
-  border-right: 1px solid var(--primary-color)10;
-}
-.action-icon {
-  color: var(--primary-color);
-  font-size: 18px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-.action-icon:hover {
-  color: var(--primary-color)d0;
-  transform: scale(1.1);
-}
-
-/* 用户头像 */
-.user-avatar {
-  cursor: pointer;
-}
-.avatar-img {
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  object-fit: cover;
-  border: 2px solid transparent;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-  transition: all 0.2s;
-}
-.user-avatar:hover .avatar-img {
-  border-color: var(--primary-color);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 8px var(--primary-color)20;
-}
-
-/* 用户菜单 */
-.user-menu {
-  width: 160px;
-  border-radius: 6px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-}
-:deep(.ant-menu-item[key="logout"]) {
-  color: #f5222d !important;
-}
-
-/* 标签栏 */
-.tab-bar {
-  background: #fff;
-  border-bottom: 1px solid #e0e0e0;
-  padding: 0 20px;
-  height: 44px;
-  margin-top: 2px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
-  transition: all 0.3s ease;
-}
-.console-tab {
-  height: 32px;
-  padding: 0 16px;
-  border-radius: 6px 6px 0 0;
-  border: none;
-  cursor: pointer;
-  font-size: 14px;
-  display: flex;
-  align-items: center;
-  color: #666;
-  background: transparent;
-  transition: all 0.2s ease;
-}
-.console-tab-icon {
-  margin-right: 6px;
-  font-size: 14px;
-}
-.console-tab--active {
-  background: var(--primary-color)15 !important;
-  color: var(--primary-color);
-  font-weight: 500;
-  box-shadow: 0 1px 2px var(--primary-color)10;
-}
-.console-tab:hover:not(.console-tab--active) {
-  background: var(--primary-color)0a;
-  color: var(--primary-color);
-}
-
-/* 标签导航按钮 */
-.tab-nav-btn {
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  color: #666;
-  margin: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
-}
-.tab-nav-btn:hover {
-  background: var(--primary-color)0a;
-  color: var(--primary-color);
-}
-.tab-nav-btn:disabled {
-  color: #ccc !important;
-  cursor: not-allowed;
-  background: transparent !important;
-}
-
-/* 标签页样式 */
-.google-tabs {
-  flex: 1;
-  overflow: hidden;
-}
-:deep(.ant-tabs-nav) {
-  height: 100%;
-  margin: 0 !important;
-}
-:deep(.ant-tabs-nav-list) {
-  height: 100%;
-  align-items: center;
-}
-:deep(.ant-tabs-tab) {
-  height: 36px;
-  padding: 0 16px;
-  margin: 0 2px;
-  border-radius: 6px 6px 0 0;
-  background: transparent;
-  transition: all 0.2s ease;
-  font-size: 14px;
-  color: #666;
-}
-:deep(.ant-tabs-tab:hover:not(.ant-tabs-tab-active)) {
-  background: var(--primary-color)0a;
-  color: var(--primary-color);
-}
-:deep(.ant-tabs-tab.ant-tabs-tab-active) {
-  background: var(--primary-color)15 !important;
-  color: var(--primary-color) !important;
-  font-weight: 500;
-  box-shadow: 0 1px 2px var(--primary-color)10;
-  border-bottom: 2px solid var(--primary-color);
-}
-:deep(.ant-tabs-ink-bar) {
-  display: none;
-}
-
-/* 标签标题容器 */
-.tab-title-container {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  height: 100%;
-  padding: 0 4px;
-}
-.tab-title-text {
-  white-space: nowrap;
-}
-.tab-close-btn {
-  width: 16px;
-  height: 16px;
-  display: none;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  color: #999;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-.tab-title-container:hover .tab-close-btn {
-  display: inline-flex;
-}
-:deep(.ant-tabs-tab-active) .tab-close-btn {
-  color: var(--primary-color);
-}
-.tab-close-btn:hover {
-  background: var(--primary-color)10;
-  color: var(--primary-color);
-}
-
-/* 关闭所有按钮 */
-.close-all-btn {
-  color: #666;
-  margin-left: 2px;
-  font-size: 13px;
-  display: flex;
-  align-items: center;
-  border-radius: 4px;
-  padding: 0 10px;
-}
-.close-all-btn:hover {
-  color: var(--primary-color);
-  background: var(--primary-color)0a;
-}
-.close-all-btn:disabled {
-  color: #ccc !important;
-  cursor: not-allowed;
-  background: transparent !important;
-}
-.close-icon {
-  margin-right: 4px;
-  font-size: 12px;
-}
-
-/* 内容区域 */
-.content {
-  flex-grow: 1;
-  overflow-y: auto;
-  width: 100%;
-}
-.home-content {
-  height: 100%;
-  overflow: auto;
-}
-
-/* 模块菜单弹窗 */
-:deep(.module-modal-wrapper .ant-modal-content) {
-  border-radius: 8px;
-}
-.module-menu-container {
-  padding: 24px 0;
-}
-.menu-card {
-  height: 160px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  border-color: #e8e8e8;
-}
-.menu-card:hover {
-  border-color: var(--primary-color);
-  box-shadow: 0 4px 16px var(--primary-color)15;
-  transform: translateY(-2px);
-}
-.menu-card-inner {
-  text-align: center;
-}
-.menu-icon {
-  font-size: 32px;
-  color: var(--primary-color);
-  margin-bottom: 16px;
-  transition: color 0.3s;
-}
-.menu-card:hover .menu-icon {
-  color: var(--primary-color)d0;
-}
-.menu-title {
-  font-size: 16px;
-  color: #333;
-  font-weight: 500;
-}
-
-/* 退出对话框 */
-:deep(.logout-modal-wrapper .ant-modal) {
-  width: 480px !important;
-}
-.logout-body {
-  text-align: center;
-  padding: 8px 0 4px;
-}
-.logout-title {
-  font-size: 20px;
-  font-weight: 600;
-  margin-bottom: 12px;
-  text-align: left;
-  color: #333;
-}
-.logout-desc {
-  font-size: 16px;
-  color: #555;
-  margin-bottom: 32px;
-  text-align: left;
-}
-.logout-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  margin-top: 24px;
-}
-
-/* 分割线样式（用户菜单） */
-:deep(.ant-menu-item[type="divider"]) {
-  height: 1px !important;
-  margin: 4px 0 !important;
-  padding: 0 !important;
-  background: #f0f0f0;
-}
-</style>
\ No newline at end of file
diff --git a/capi-ui/src/components/Layout/AppLayout.vue b/capi-ui/src/components/Layout/AppLayout.vue
new file mode 100644
index 0000000..614c92f
--- /dev/null
+++ b/capi-ui/src/components/Layout/AppLayout.vue
@@ -0,0 +1,652 @@
+<template>
+  <div class="app-container">
+    <a-layout style="min-height: 100vh;">
+      <!-- 顶部导航栏 -->
+      <a-layout-header class="header">
+        <div class="logo">
+          <img src="/my.png" class="logo-img" alt="系统Logo" />
+          <span class="system-name">cApi</span>
+        </div>
+
+        <div class="header-actions">
+          <div class="search-box">
+            <SearchOutlined class="search-icon" />
+            <input type="text" placeholder="搜索" class="search-input" />
+          </div>
+          
+          <div class="action-icons">
+            <a-tooltip title="收藏">
+              <StarOutlined class="action-icon" />
+            </a-tooltip>
+            <a-tooltip title="通知">
+              <BellOutlined class="action-icon" />
+            </a-tooltip>
+            <a-tooltip title="帮助">
+              <QuestionCircleOutlined class="action-icon" />
+            </a-tooltip>
+            <a-tooltip title="设置">
+              <SettingOutlined class="action-icon" />
+            </a-tooltip>
+          </div>
+          
+          <a-dropdown
+            placement="bottomRight"
+            :auto-adjust-overflow="true"
+            @visible-change="handleDropdownVisible"
+          >
+            <div class="user-avatar">
+              <img src="https://picsum.photos/id/1005/200/200" alt="用户头像" class="avatar-img" />
+            </div>
+            <template #overlay>
+              <a-menu class="user-menu" @click="handleUserMenuClick">
+                <a-menu-item key="profile">个人资料</a-menu-item>
+                <a-menu-item key="settings">账户设置</a-menu-item>
+                <a-menu-divider />
+                <a-menu-item key="logout" class="logout-menu-item">
+                  <LogoutOutlined class="mr-2" /> 退出登录
+                </a-menu-item>
+              </a-menu>
+            </template>
+          </a-dropdown>
+        </div>
+      </a-layout-header>
+
+      <!-- 中间主体布局 -->
+      <a-layout style="flex: 1; height: calc(100vh - 64px);">
+        <!-- 左侧菜单：折叠时悬浮子菜单，展开时点击展开 -->
+        <a-layout-sider 
+          class="side-menu-container" 
+          width="200" 
+          :collapsed="collapsed" 
+          :trigger="null"
+          collapsible
+          :class="{ 'sider-collapsed': collapsed }"
+        >
+          <!-- 加载状态 -->
+          <div v-if="loading" class="menu-loading">
+            <a-spin size="large" />
+          </div>
+          
+          <!-- 菜单内容 -->
+          <div v-else class="menu-scroll-container">
+            <!-- 父级菜单列表：根据折叠状态切换交互 -->
+            <div 
+              v-for="(module, moduleKey) in moduleMenusConfig" 
+              :key="module.moduleCode"
+              class="parent-menu-item"
+            >
+              <!-- 折叠状态：使用Dropdown实现悬浮子菜单 -->
+              <a-dropdown
+                v-if="collapsed"
+                placement="right"
+                :auto-adjust-overflow="true"
+                :open="collapsedMenuVisible[module.moduleCode]"
+                @openChange="(visible) => handleCollapsedMenuVisible(visible, module.moduleCode)"
+              >
+                <!-- 折叠时的父级菜单触发按钮 -->
+                <div class="parent-menu-header collapsed-mode" @click.stop>
+                  <component :is="getIconComponent(module.icon)" class="parent-menu-icon" />
+                  <!-- 折叠时显示模块名称tooltip -->
+                  <a-tooltip :title="module.moduleName" placement="right">
+                    <span class="collapsed-tooltip-placeholder" />
+                  </a-tooltip>
+                </div>
+
+                <!-- 折叠时的悬浮子菜单内容 -->
+                <template #overlay>
+                  <a-menu 
+                    class="collapsed-sub-menu"
+                    @click="(e) => handleCollapsedSubMenuClick(e, module.menus)"
+                  >
+                    <a-menu-item
+                      v-for="menu in module.menus"
+                      :key="menu.menuCode"
+                      :selected="selectedKey === menu.menuCode"
+                    >
+                      <component :is="getIconComponent(menu.cicon)" class="sub-menu-icon" />
+                      <span>{{ menu.menuName }}</span>
+                    </a-menu-item>
+                  </a-menu>
+                </template>
+              </a-dropdown>
+
+              <!-- 展开状态：原点击展开子菜单逻辑 -->
+              <div v-else>
+                <!-- 父级菜单标题（点击展开/关闭子菜单） -->
+                <div 
+                  class="parent-menu-header"
+                  @click="toggleSubMenu(module.moduleCode)"
+                >
+                  <component :is="getIconComponent(module.icon)" class="parent-menu-icon" />
+                  <span class="parent-menu-title">{{ module.moduleName }}</span>
+                  <component 
+                    :is="isSubMenuOpen(module.moduleCode) ? CaretUpOutlined : CaretDownOutlined" 
+                    class="parent-menu-caret"
+                  />
+                </div>
+                
+                <!-- 子菜单列表（根据状态显示/隐藏） -->
+                <div 
+                  class="sub-menu-list"
+                  :class="{ 'sub-menu-visible': isSubMenuOpen(module.moduleCode) }"
+                >
+                  <div
+                    v-for="menu in module.menus"
+                    :key="menu.menuCode"
+                    class="sub-menu-item"
+                    :class="{ 'sub-menu-item-active': selectedKey === menu.menuCode }"
+                    @click="handleSubMenuItemClick(menu)"
+                  >
+                    <component :is="getIconComponent(menu.cicon)" class="sub-menu-icon" />
+                    <span>{{ menu.menuName }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 折叠/展开按钮 -->
+          <div class="collapse-trigger" @click="collapsed = !collapsed">
+            <component :is="collapsed ? MenuUnfoldOutlined : MenuFoldOutlined" />
+          </div>
+        </a-layout-sider>
+
+        <!-- 右侧内容区 -->
+        <a-layout-content class="right-content">
+          <div class="tab-bar">
+            <a-tag
+              :class="['console-tab', activeTabKey === 'console' ? 'console-tab--active' : '']"
+              @click="switchToConsole"
+            >
+              <HomeOutlined class="console-tab-icon" />
+              <span>控制台</span>
+            </a-tag>
+
+            <a-button
+              size="small"
+              class="tab-nav-btn"
+              @click="switchTab('prev')"
+              :disabled="currentTabIndex === 0 || otherTabs.length === 0"
+              ghost
+            >
+              &lt;
+            </a-button>
+
+            <a-tabs
+              v-model:activeKey="activeTabKey"
+              @change="handleTabChange"
+              class="google-tabs"
+              :animated="false"
+              hide-add
+            >
+              <a-tab-pane
+                v-for="tab in otherTabs"
+                :key="tab.key"
+                :tab="renderTabTitle(tab)"
+              />
+            </a-tabs>
+
+            <a-button
+              size="small"
+              class="tab-nav-btn"
+              @click="switchTab('next')"
+              :disabled="currentTabIndex === otherTabs.length - 1 || otherTabs.length === 0"
+              ghost
+            >
+              &gt;
+            </a-button>
+
+            <a-button
+              size="small"
+              class="close-all-btn"
+              @click="closeAllTabs"
+              :disabled="otherTabs.length === 0"
+              ghost
+            >
+              <CloseOutlined class="close-icon" /> 关闭所有
+            </a-button>
+          </div>
+
+          <a-layout-content class="main-content">
+            <div class="home-content">
+              <!-- 加载状态显示 -->
+              <div v-if="contentLoading" class="content-loading">
+                <a-spin size="large" />
+              </div>
+              
+              <!-- 组件内容显示 -->
+              <component
+                v-else
+                :is="currentMainComponent"
+                :key="activeTabKey"
+              />
+              
+              <!-- 组件加载失败提示 -->
+              <div v-if="componentError" class="component-error">
+                <ExclamationCircleOutlined class="error-icon" />
+                <p>组件加载失败，请检查路径是否正确</p>
+                <p class="error-path">{{ errorPath }}</p>
+              </div>
+            </div>
+          </a-layout-content>
+        </a-layout-content>
+      </a-layout>
+    </a-layout>
+
+    <!-- 退出确认对话框 -->
+    <a-modal
+      v-model:open="logoutVisible"
+      :centered="true"
+      :closable="false"
+      :mask-closable="false"
+      :footer="null"
+      :width="420"
+      wrap-class-name="logout-modal-wrapper"
+    >
+      <div class="logout-body">
+        <p class="logout-title">
+          <ExclamationCircleOutlined style="color:#faad14; margin-right:8px;" />
+          温馨提示
+        </p>
+        <p class="logout-desc">是否确认退出系统？</p>
+    
+        <div class="logout-actions">
+          <a-button size="large" @click="logoutVisible = false">取消</a-button>
+          <a-button
+            type="primary"
+            size="large"
+            style="margin-left: 16px"
+            @click="doLogout"
+          >
+            确定
+          </a-button>
+        </div>
+      </div>
+    </a-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, h, reactive, watch, onMounted, defineAsyncComponent } from 'vue';
+import { Layout, Menu, Button, Tabs, Card, Tag, Dropdown, Modal, Tooltip, Spin } from 'ant-design-vue';
+import { getModuleMenus, ModuleItem, MenuItem } from '@/api/menu'
+
+import {
+  ApiOutlined,
+  UserOutlined,
+  CloseOutlined,
+  LinkOutlined,
+  LogoutOutlined,
+  ExclamationCircleOutlined,
+  BarChartOutlined,
+  DownloadOutlined,
+  SettingOutlined,
+  FormOutlined,
+  HistoryOutlined,
+  HomeOutlined,
+  DatabaseOutlined,
+  SearchOutlined,
+  StarOutlined,
+  BellOutlined,
+  QuestionCircleOutlined,
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+  CaretUpOutlined,
+  CaretDownOutlined
+} from '@ant-design/icons-vue';
+
+// 导入控制台组件
+import Main from './Main.vue';
+
+// 状态管理
+const collapsed = ref(false); // 菜单折叠状态
+const activeTabKey = ref('console'); // 当前激活的标签页
+const logoutVisible = ref(false); // 退出确认框显示状态
+const selectedKey = ref(''); // 当前选中的子菜单项
+const expandedParentMenus = ref<string[]>([]); // 展开状态下的子菜单展开记录
+const loading = ref(true); // 菜单加载状态
+const contentLoading = ref(false); // 内容区加载状态
+const componentError = ref(false); // 组件加载错误状态
+const errorPath = ref(''); // 错误路径记录
+
+// 状态定义
+const moduleMenusConfig = ref<ModuleItem[]>([])
+// 初始化折叠状态下的菜单显示状态
+const collapsedMenuVisible = reactive<Record<string, boolean>>({})
+
+// 标签页数据类型定义
+interface TabItem {
+  key: string;
+  title: string;
+  component: any;
+  closable: boolean;
+  chref: string; // 存储组件路径
+}
+
+// 标签页数据
+const allTabs = ref<TabItem[]>([
+  { key: 'console', title: '控制台', component: Main, closable: false, chref: '' }
+]);
+
+// 计算属性
+const otherTabs = computed(() => allTabs.value.filter(tab => tab.key !== 'console'));
+const currentTabIndex = computed(() => otherTabs.value.findIndex(tab => tab.key === activeTabKey.value));
+const currentMainComponent = computed(() => {
+  try {
+    const targetTab = allTabs.value.find(tab => tab.key === activeTabKey.value);
+    return targetTab ? targetTab.component : null;
+  } catch (error) {
+    console.error('组件加载失败:', error);
+    return null;
+  }
+});
+
+// 从接口获取菜单数据
+const fetchMenuData = async () => {
+  try {
+    loading.value = true;
+    const modules = await getModuleMenus()
+	
+	moduleMenusConfig.value = modules
+    // 初始化折叠状态下的菜单显示状态
+	modules.forEach(module => {
+	  collapsedMenuVisible[module.moduleCode] = false
+	})
+  } catch (error) {
+    console.error('菜单接口请求失败:', error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 页面加载时获取菜单数据
+onMounted(() => {
+  fetchMenuData();
+});
+
+// 根据图标名称获取图标组件
+const getIconComponent = (iconName: string) => {
+  const iconMap: Record<string, any> = {
+    ApiOutlined,
+    UserOutlined,
+    BarChartOutlined,
+    DownloadOutlined,
+    SettingOutlined,
+    FormOutlined,
+    HistoryOutlined,
+    HomeOutlined,
+    DatabaseOutlined,
+    LinkOutlined
+  };
+  
+  return iconMap[iconName] || ApiOutlined;
+};
+
+// 根据chref路径获取组件
+const getComponentByPath = async (chref: string) => {
+  try {
+    // 显示加载状态
+    contentLoading.value = true;
+    componentError.value = false;
+    
+    // 添加@vite-ignore注释告诉Vite忽略动态导入分析
+    const component = defineAsyncComponent(() => 
+      import(/* @vite-ignore */ `@/views/${chref}.vue`)
+    );
+    
+    return component;
+  } catch (error) {
+    console.error(`加载组件失败: @/views/${chref}.vue`, error);
+    componentError.value = true;
+    errorPath.value = `@/views/${chref}.vue`;
+    return null;
+  } finally {
+    contentLoading.value = false;
+  }
+};
+
+
+// 检查展开状态下子菜单是否打开
+const isSubMenuOpen = (moduleCode: string) => {
+  return expandedParentMenus.value.includes(moduleCode);
+};
+
+// 【优化核心】展开状态：切换子菜单展开/关闭，点击当前父级时关闭其他父级
+const toggleSubMenu = (moduleCode: string) => {
+  if (isSubMenuOpen(moduleCode)) {
+    // 当前父级已展开，点击则关闭
+    expandedParentMenus.value = [];
+  } else {
+    // 当前父级未展开，点击则打开当前并关闭其他所有父级
+    expandedParentMenus.value = [moduleCode];
+  }
+};
+
+// 折叠状态：控制悬浮菜单显示/隐藏
+const handleCollapsedMenuVisible = (visible: boolean, moduleCode: string) => {
+  // 关闭其他所有悬浮菜单
+  Object.keys(collapsedMenuVisible).forEach(key => {
+    if (key !== moduleCode) collapsedMenuVisible[key] = false;
+  });
+  // 更新当前菜单状态
+  collapsedMenuVisible[moduleCode] = visible;
+};
+
+// 标签页标题渲染
+const renderTabTitle = (tab: TabItem) => {
+  return h('div', { class: 'tab-title-container' }, [
+    h('span', { class: 'tab-title-text' }, tab.title),
+    tab.closable && h(
+      'span',
+      {
+        class: 'tab-close-btn',
+        onClick: (e: Event) => { 
+          e.stopPropagation(); 
+          deleteTab(tab.key); 
+        }
+      },
+      h(CloseOutlined, { size: 12 })
+    )
+  ]);
+};
+
+// 切换到控制台
+const switchToConsole = () => { 
+  activeTabKey.value = 'console'; 
+  selectedKey.value = '';
+  componentError.value = false;
+  // 关闭所有展开的子菜单
+  expandedParentMenus.value = [];
+  // 关闭所有折叠状态的悬浮菜单
+  Object.keys(collapsedMenuVisible).forEach(key => collapsedMenuVisible[key] = false);
+};
+
+// 标签页切换（上一个/下一个）
+const switchTab = (direction: 'prev' | 'next') => {
+  componentError.value = false;
+  if (direction === 'prev' && currentTabIndex.value > 0) {
+    activeTabKey.value = otherTabs.value[currentTabIndex.value - 1].key;
+  } else if (direction === 'next' && currentTabIndex.value < otherTabs.value.length - 1) {
+    activeTabKey.value = otherTabs.value[currentTabIndex.value + 1].key;
+  }
+};
+
+// 关闭单个标签页
+const deleteTab = (key: string) => {
+  if (key === 'console') return;
+  const tabIndex = allTabs.value.findIndex(tab => tab.key === key);
+  if (tabIndex === -1) return;
+  
+  allTabs.value = allTabs.value.filter(tab => tab.key !== key);
+  
+  if (key === activeTabKey.value) {
+    const targetTab = allTabs.value[tabIndex - 1] || allTabs.value.find(tab => tab.key === 'console');
+    activeTabKey.value = targetTab.key;
+    componentError.value = false;
+  }
+};
+
+// 关闭所有标签页
+const closeAllTabs = () => {
+  allTabs.value = allTabs.value.filter(tab => tab.key === 'console');
+  activeTabKey.value = 'console';
+  selectedKey.value = '';
+  expandedParentMenus.value = [];
+  Object.keys(collapsedMenuVisible).forEach(key => collapsedMenuVisible[key] = false);
+  componentError.value = false;
+};
+
+// 展开状态：子菜单项点击
+const handleSubMenuItemClick = async (menu: MenuItem) => {
+  selectedKey.value = menu.menuCode;
+  componentError.value = false;
+  
+  try {
+    // 检查标签页是否已存在
+    const existingTab = allTabs.value.find(tab => tab.key === menu.menuCode);
+    
+    if (existingTab) {
+      // 标签页已存在，直接切换
+      activeTabKey.value = menu.menuCode;
+      return;
+    }
+    
+    // 动态加载组件
+    const component = await getComponentByPath(menu.chref);
+    
+    if (component) {
+      // 添加新标签页
+      allTabs.value.push({
+        key: menu.menuCode,
+        title: menu.menuName,
+        component: component,
+        closable: true,
+        chref: menu.chref
+      });
+      activeTabKey.value = menu.menuCode;
+    }
+  } catch (error) {
+    console.error('处理菜单点击失败:', error);
+  }
+};
+
+// 折叠状态：悬浮子菜单项点击
+const handleCollapsedSubMenuClick = async (e: { key: string }, menus: MenuItem[]) => {
+  const menuCode = e.key;
+  const menu = menus.find(item => item.menuCode === menuCode);
+  
+  if (menu) {
+    selectedKey.value = menuCode;
+    componentError.value = false;
+    
+    try {
+      // 检查标签页是否已存在
+      const existingTab = allTabs.value.find(tab => tab.key === menuCode);
+      
+      if (existingTab) {
+        // 标签页已存在，直接切换
+        activeTabKey.value = menuCode;
+        // 关闭所有悬浮菜单
+        Object.keys(collapsedMenuVisible).forEach(key => collapsedMenuVisible[key] = false);
+        return;
+      }
+      
+      // 动态加载组件
+      const component = await getComponentByPath(menu.chref);
+      
+      if (component) {
+        // 添加新标签页
+        allTabs.value.push({
+          key: menu.menuCode,
+          title: menu.menuName,
+          component: component,
+          closable: true,
+          chref: menu.chref
+        });
+        activeTabKey.value = menu.menuCode;
+      }
+    } catch (error) {
+      console.error('处理菜单点击失败:', error);
+    } finally {
+      // 点击后关闭所有悬浮菜单
+      Object.keys(collapsedMenuVisible).forEach(key => collapsedMenuVisible[key] = false);
+    }
+  }
+};
+
+// 标签页切换时同步菜单状态
+const handleTabChange = (key: string) => {
+  activeTabKey.value = key;
+  componentError.value = false;
+  
+  if (key === 'console') {
+    selectedKey.value = '';
+    expandedParentMenus.value = [];
+    Object.keys(collapsedMenuVisible).forEach(k => collapsedMenuVisible[k] = false);
+    return;
+  }
+
+  // 同步选中状态
+  selectedKey.value = key;
+  
+  // 展开状态：同步展开对应父菜单，关闭其他父菜单
+  if (!collapsed.value) {
+    moduleMenusConfig.value.forEach(module => {
+      const hasKey = module.menus.some(menu => menu.menuCode === key);
+      if (hasKey) {
+        // 只展开当前子菜单所属的父级
+        expandedParentMenus.value = [module.moduleCode];
+      }
+    });
+  }
+};
+
+// 用户菜单相关方法
+const handleDropdownVisible = (visible: boolean) => { 
+  console.log('用户下拉菜单状态：', visible ? '显示' : '隐藏'); 
+};
+
+const handleUserMenuClick = ({ key }: { key: string }) => {
+  if (key === 'logout') {
+    handleLogout();
+  } else {
+    console.log('用户菜单点击：', key);
+  }
+};
+
+const handleLogout = () => { 
+  logoutVisible.value = true; 
+};
+
+const doLogout = () => {
+  localStorage.removeItem('token');
+  localStorage.removeItem('userInfo');
+  logoutVisible.value = false;
+  alert('退出登录成功，即将跳转到登录页');
+  // 实际项目中替换为：router.push('/login');
+};
+
+// 监听折叠状态变化，重置菜单状态
+watch(collapsed, (newVal) => {
+  if (newVal) {
+    // 切换到折叠状态：关闭所有展开的子菜单
+    expandedParentMenus.value = [];
+  } else {
+    // 切换到展开状态：关闭所有悬浮菜单
+    Object.keys(collapsedMenuVisible).forEach(key => collapsedMenuVisible[key] = false);
+    // 如果有选中的子菜单，展开对应父菜单，关闭其他父菜单
+    if (selectedKey.value) {
+      moduleMenusConfig.value.forEach(module => {
+        const hasKey = module.menus.some(menu => menu.menuCode === selectedKey.value);
+        if (hasKey) {
+          expandedParentMenus.value = [module.moduleCode];
+        }
+      });
+    }
+  }
+});
+</script>
+
+<style scoped>
+@import "styles/app-layout.css";
+</style>
diff --git a/capi-ui/src/components/Layout/Main.vue b/capi-ui/src/components/Layout/Main.vue
new file mode 100644
index 0000000..4949d2a
--- /dev/null
+++ b/capi-ui/src/components/Layout/Main.vue
@@ -0,0 +1,9 @@
+<template>
+	jjjjjjjjj
+</template>
+
+<script>
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/capi-ui/src/components/Layout/styles/app-layout.css b/capi-ui/src/components/Layout/styles/app-layout.css
new file mode 100644
index 0000000..bbd7e6a
--- /dev/null
+++ b/capi-ui/src/components/Layout/styles/app-layout.css
@@ -0,0 +1,511 @@
+/* 基础样式 */
+* { margin: 0; padding: 0; box-sizing: border-box; }
+html, body, .app-container { height: 100vh; overflow: hidden; }
+.app-container { display: flex; flex-direction: column; }
+
+/* 顶部导航栏样式 */
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+  height: 64px;
+  width: 100%;
+  background: linear-gradient(90deg, #e6f7ff 0%, #f0f9ff 100%);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  padding-right: 52px;
+  border-right: 0px solid rgba(24, 144, 255, 0.1);
+  gap: 10px;
+}
+
+.logo-img {
+  width: 65px;
+  height: 65px;
+  object-fit: contain;
+  vertical-align: middle;
+}
+
+.system-name {
+  font-size: 18px;
+  font-weight: 600;
+  color: #1890ff;
+}
+
+.header-actions { display: flex; align-items: center; gap: 16px; }
+
+.search-box {
+  display: flex;
+  align-items: center;
+  background: rgba(255, 255, 255, 0.8);
+  border-radius: 4px;
+  padding: 0 12px;
+  height: 36px;
+  width: 240px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.search-icon { color: #8c8c8c; margin-right: 8px; }
+.search-input {
+  background: transparent;
+  border: none;
+  outline: none;
+  color: #333;
+  width: 100%;
+  font-size: 14px;
+}
+.search-input::placeholder { color: #b3b3b3; }
+
+.action-icons {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding-right: 16px;
+  border-right: 1px solid rgba(24, 144, 255, 0.1);
+}
+
+.action-icon {
+  color: #1890ff;
+  font-size: 18px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.action-icon:hover { color: #096dd9; transform: scale(1.1); }
+
+.user-avatar { cursor: pointer; }
+.avatar-img {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 2px solid transparent;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  transition: all 0.2s;
+}
+.user-avatar:hover .avatar-img {
+  border-color: #1890ff;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(24, 144, 255, 0.2);
+}
+
+.user-menu { width: 160px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
+.logout-menu-item { color: #f5222d !important; }
+
+/* 左侧菜单样式 - 核心区域 */
+.side-menu-container {
+  background: #fff;
+  border-right: 1px solid #e0e0e0;
+  transition: all 0.3s ease;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  z-index: 10; /* 确保菜单在内容上方 */
+}
+
+/* 折叠状态的侧边栏 */
+.sider-collapsed {
+  width: 64px !important;
+}
+
+/* 菜单加载状态 */
+.menu-loading {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+/* 菜单滚动容器 */
+.menu-scroll-container {
+  flex: 1;
+  padding: 16px 0;
+  overflow-y: auto;
+  padding-bottom: 60px; /* 为底部按钮留出空间 */
+}
+
+/* 父级菜单项容器 */
+.parent-menu-item {
+  margin-bottom: 4px;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+/* 父级菜单标题基础样式 */
+.parent-menu-header {
+  height: 44px;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  background-color: #fff;
+  transition: all 0.2s ease;
+  border-left: 3px solid transparent;
+}
+
+/* 展开状态父菜单交互 */
+.parent-menu-header:hover {
+  background-color: #f5f9ff;
+  border-left-color: #1890ff;
+}
+
+/* 折叠状态父菜单样式 */
+.parent-menu-header.collapsed-mode {
+  justify-content: center;
+  padding: 0;
+  border-left: none;
+  height: 48px; /* 增大点击区域 */
+  width: 100%;
+}
+.parent-menu-header.collapsed-mode:hover {
+  background-color: #f5f9ff;
+  border-left: none;
+}
+
+/* 折叠状态tooltip占位元素 */
+.collapsed-tooltip-placeholder {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+}
+
+/* 父级菜单图标 */
+.parent-menu-icon {
+  color: #1890ff;
+  font-size: 16px;
+  margin-right: 12px;
+}
+/* 折叠状态图标 */
+.parent-menu-header.collapsed-mode .parent-menu-icon {
+  margin-right: 0;
+  font-size: 20px; /* 折叠时图标放大 */
+}
+
+/* 父级菜单文字 */
+.parent-menu-title {
+  flex: 1;
+  font-size: 14px;
+  color: #333;
+  font-weight: 500;
+}
+
+/* 父级菜单箭头 */
+.parent-menu-caret {
+  color: #888;
+  font-size: 14px;
+  transition: transform 0.2s ease;
+}
+
+/* 展开状态子菜单列表容器 */
+.sub-menu-list {
+  background-color: #fafafa;
+  overflow: hidden;
+  max-height: 0;
+  transition: max-height 0.3s ease-out;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
+}
+
+/* 展开状态子菜单显示 */
+.sub-menu-visible {
+  max-height: 500px;
+  transition: max-height 0.3s ease-in;
+}
+
+/* 展开状态子菜单项样式 */
+.sub-menu-item {
+  height: 38px;
+  padding: 0 16px 0 44px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 14px;
+  color: #666;
+  border-left: 2px solid transparent;
+}
+
+/* 子菜单图标 */
+.sub-menu-icon {
+  color: #666;
+  font-size: 14px;
+  margin-right: 10px;
+}
+
+/* 展开状态子菜单项交互 */
+.sub-menu-item:hover {
+  background-color: #f0f7ff;
+  color: #1890ff;
+  padding-left: 42px;
+  border-left-color: #1890ff;
+}
+.sub-menu-item:hover .sub-menu-icon {
+  color: #1890ff;
+}
+
+/* 子菜单项选中样式 */
+.sub-menu-item-active {
+  background-color: #e6f4ff;
+  color: #1890ff;
+  font-weight: 500;
+  padding-left: 42px;
+  border-left-color: #1890ff;
+}
+.sub-menu-item-active .sub-menu-icon {
+  color: #1890ff;
+}
+
+/* 折叠状态：悬浮子菜单样式 */
+:deep(.collapsed-sub-menu) {
+  min-width: 180px !important;
+  border-radius: 6px !important;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15) !important;
+  padding: 6px 0 !important;
+  z-index: 999 !important; /* 确保悬浮菜单在最上层 */
+}
+:deep(.collapsed-sub-menu .ant-menu-item) {
+  height: 40px !important;
+  line-height: 40px !important;
+  padding: 0 16px !important;
+  transition: all 0.2s ease !important;
+  display: flex !important;
+  align-items: center !important;
+  gap: 8px !important;
+}
+:deep(.collapsed-sub-menu .ant-menu-item:hover) {
+  background-color: #f5f9ff !important;
+  color: #1890ff !important;
+}
+:deep(.collapsed-sub-menu .ant-menu-item-selected) {
+  background-color: #e6f4ff !important;
+  color: #1890ff !important;
+}
+:deep(.collapsed-sub-menu .ant-menu-item .anticon) {
+  font-size: 14px !important;
+}
+
+/* 折叠/展开按钮 */
+.collapse-trigger {
+  position: absolute;
+  bottom: 16px;
+  right: -18px;
+  background: #fff;
+  border: 1px solid #e0e0e0;
+  border-radius: 50%;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  z-index: 11; /* 确保按钮在菜单上方 */
+  color: #1890ff;
+  transition: all 0.2s ease;
+}
+.collapse-trigger:hover {
+  color: #096dd9;
+  box-shadow: 0 2px 4px rgba(24, 144, 255, 0.15);
+  transform: scale(1.05);
+}
+
+/* 右侧内容区样式 */
+.right-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  background: #f8f9fa;
+}
+
+.tab-bar {
+  background: #fff;
+  border-bottom: 1px solid #e0e0e0;
+  padding: 0 20px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+  transition: all 0.3s ease;
+}
+
+.console-tab {
+  height: 32px;
+  padding: 0 16px;
+  border-radius: 6px 6px 0 0;
+  border: none;
+  cursor: pointer;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  color: #666;
+  background: transparent;
+  transition: all 0.2s ease;
+}
+
+.console-tab-icon { margin-right: 6px; font-size: 14px; }
+.console-tab--active {
+  background: #e8f4ff !important;
+  color: #1890ff;
+  font-weight: 500;
+  box-shadow: 0 1px 2px rgba(24, 144, 255, 0.1);
+}
+.console-tab:hover:not(.console-tab--active) {
+  background: #f5f9ff;
+  color: #1890ff;
+}
+
+.tab-nav-btn {
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  color: #666;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+}
+.tab-nav-btn:hover { background: #f5f9ff; color: #1890ff; }
+.tab-nav-btn:disabled { color: #ccc !important; cursor: not-allowed; background: transparent !important; }
+
+.google-tabs { flex: 1; overflow: hidden; }
+:deep(.ant-tabs-nav) { height: 100%; margin: 0 !important; }
+:deep(.ant-tabs-nav-list) { height: 100%; align-items: center; }
+:deep(.ant-tabs-tab) {
+  height: 36px;
+  padding: 0 16px;
+  margin: 0 2px;
+  border-radius: 6px 6px 0 0;
+  background: transparent;
+  transition: all 0.2s ease;
+  font-size: 14px;
+  color: #666;
+}
+:deep(.ant-tabs-tab:hover:not(.ant-tabs-tab-active)) { background: #f5f9ff; color: #1890ff; }
+:deep(.ant-tabs-tab.ant-tabs-tab-active) {
+  background: #e8f4ff !important;
+  color: #1890ff !important;
+  font-weight: 500;
+  box-shadow: 0 1px 2px rgba(24, 144, 255, 0.1);
+  border-bottom: 2px solid #1890ff;
+}
+:deep(.ant-tabs-ink-bar) { display: none; }
+
+.tab-title-container {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 100%;
+  padding: 0 4px;
+}
+.tab-title-text { white-space: nowrap; }
+.tab-close-btn {
+  width: 16px;
+  height: 16px;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  color: #999;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.tab-title-container:hover .tab-close-btn { display: inline-flex; }
+:deep(.ant-tabs-tab-active) .tab-close-btn { color: #1890ff; }
+.tab-close-btn:hover { background: #d1eaff; color: #1890ff; }
+
+.close-all-btn {
+  color: #666;
+  margin-left: 2px;
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  border-radius: 4px;
+  padding: 0 10px;
+}
+.close-all-btn:hover { color: #1890ff; background: #f5f9ff; }
+.close-all-btn:disabled { color: #ccc !important; cursor: not-allowed; background: transparent !important; }
+.close-icon { margin-right: 4px; font-size: 12px; }
+
+.main-content {
+  flex: 1;
+  padding: 16px;
+  overflow-y: auto;
+}
+
+.home-content {
+  background: #fff;
+  padding: 24px;
+  border-radius: 8px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  height: 100%;
+  overflow: auto;
+  min-height: calc(100vh - 64px - 44px - 32px);
+}
+
+/* 内容加载状态 */
+.content-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 300px;
+}
+
+/* 组件加载错误样式 */
+.component-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 300px;
+  color: #f5222d;
+  padding: 20px;
+  text-align: center;
+}
+
+.error-icon {
+  font-size: 48px;
+  margin-bottom: 16px;
+}
+
+.error-path {
+  font-family: monospace;
+  margin-top: 8px;
+  color: #8c8c8c;
+  background: #f5f5f5;
+  padding: 4px 8px;
+  border-radius: 4px;
+  word-break: break-all;
+  max-width: 90%;
+}
+
+/* 退出对话框样式 */
+:deep(.logout-modal-wrapper .ant-modal) { width: 480px !important; }
+.logout-body { text-align: center; padding: 8px 0 4px; }
+.logout-title {
+  font-size: 20px;
+  font-weight: 600;
+  margin-bottom: 12px;
+  text-align: left;
+  color: #333;
+}
+.logout-desc {
+  font-size: 16px;
+  color: #555;
+  margin-bottom: 32px;
+  text-align: left;
+}
+.logout-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-top: 24px;
+}
\ No newline at end of file
diff --git a/capi-ui/src/router/index.ts b/capi-ui/src/router/index.ts
index 83542aa..bf8dc57 100644
--- a/capi-ui/src/router/index.ts
+++ b/capi-ui/src/router/index.ts
@@ -1,26 +1,30 @@
-import { createRouter, createWebHistory } from 'vue-router'
+// router/index.ts
+import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 
-const routes = [
-  {
-    path: '/',
-    redirect: '/login'
-  },
+/* 1. 固定路由 */
+const constantRoutes: RouteRecordRaw[] = [
+  { path: '/', redirect: '/login' },
   {
     path: '/login',
     name: 'Login',
     component: () => import('@/views/login/Login.vue')
   },
   {
-    path: '/dashboard',
-    name: 'Dashboard',
-    component: () => import('@/views/sys/Dashboard.vue'),
+    path: '/index',
+    name: 'Index',
+    component: () => import('@/views/sys/index.vue'),
     meta: { requiresAuth: true }
+  },
+  {
+    path: '/biz/data/index', // 路由PATH，与chref对应
+    name: 'DataIndex',
+    component: () => import('@/biz/data/index.vue') // 对应的组件
   }
 ]
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  routes
+  routes: [...constantRoutes]
 })
 
 export default router
\ No newline at end of file
diff --git a/capi-ui/src/views/biz/data/index.vue b/capi-ui/src/views/biz/data/index.vue
new file mode 100644
index 0000000..eef08bc
--- /dev/null
+++ b/capi-ui/src/views/biz/data/index.vue
@@ -0,0 +1,162 @@
+<template>
+  <!-- 根容器：100%填充父容器（home-content），确保自适应 -->
+  <div class="empty-page-container">
+    <!-- 空白页核心内容区：垂直居中 -->
+    <div class="empty-content">
+      <!-- 空状态图标 -->
+      <div class="empty-icon">
+        <FileTextOutlined />
+      </div>
+      
+      <!-- 标题与描述 -->
+      <h2 class="empty-title">这是一个空白页面</h2>
+      <p class="empty-desc">
+        你可以在这里扩展功能，比如添加数据展示、表单提交、图表分析等内容<br>
+        页面已适配父容器尺寸，支持高度/宽度自适应
+      </p>
+      
+      <!-- 操作按钮：提供基础交互入口 -->
+      <div class="empty-actions">
+        <a-button type="primary" @click="handleCreate">
+          <PlusOutlined class="mr-2" /> 创建内容
+        </a-button>
+        <a-button @click="handleGuide" style="margin-left: 12px;">
+          <QuestionCircleOutlined class="mr-2" /> 查看使用指南
+        </a-button>
+      </div>
+      
+      <!-- 辅助提示：展示页面基础信息 -->
+      <div class="empty-meta">
+        <span class="meta-item">页面路径：@/views/EmptyTemplatePage.vue</span>
+        <span class="meta-item">适配场景：列表页、详情页、表单页等初始模板</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+// 引入必要组件（与原项目组件库一致）
+import { Button } from 'ant-design-vue';
+import { FileTextOutlined, PlusOutlined, QuestionCircleOutlined } from '@ant-design/icons-vue';
+
+// 页面基础状态（可根据需求扩展）
+const pageName = ref('空白模板页面');
+
+// 按钮交互事件（示例：可根据业务逻辑修改）
+const handleCreate = () => {
+  console.log(`[${pageName.value}] 触发「创建内容」操作`);
+  // 实际场景可扩展：打开创建弹窗、跳转表单页面等
+  alert('可在此处实现「创建内容」的业务逻辑');
+};
+
+const handleGuide = () => {
+  console.log(`[${pageName.value}] 查看使用指南`);
+  // 实际场景可扩展：打开帮助文档、显示引导弹窗等
+  alert('使用指南：\n1. 此页面已适配父容器自适应尺寸\n2. 可在 empty-content 内添加业务组件\n3. 样式可参考原项目规范调整');
+};
+</script>
+
+<style scoped>
+/* 根容器：100%填充父容器，确保自适应 */
+.empty-page-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+/* 空白页内容区：居中展示，控制宽高比例 */
+.empty-content {
+  width: 100%;
+  max-width: 600px;
+  padding: 48px 24px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+}
+
+/* 空状态图标：突出显示，统一风格 */
+.empty-icon {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  background-color: #e8f4ff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #1890ff;
+}
+
+.empty-icon :deep(svg) {
+  width: 40px;
+  height: 40px;
+}
+
+/* 标题样式：与原项目标题层级一致 */
+.empty-title {
+  font-size: 18px;
+  font-weight: 500;
+  color: #333;
+  margin: 0;
+}
+
+/* 描述文本：浅色、易读 */
+.empty-desc {
+  font-size: 14px;
+  color: #666;
+  line-height: 1.6;
+  margin: 0;
+}
+
+/* 操作按钮区：间距控制 */
+.empty-actions {
+  display: flex;
+  gap: 12px;
+  margin-top: 8px;
+}
+
+/* 辅助信息：弱化显示，底部对齐 */
+.empty-meta {
+  margin-top: 16px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 16px;
+  font-size: 12px;
+  color: #999;
+}
+
+/* 响应式：小屏幕适配 */
+@media (max-width: 768px) {
+  .empty-content {
+    padding: 32px 16px;
+    gap: 16px;
+  }
+  
+  .empty-icon {
+    width: 64px;
+    height: 64px;
+  }
+  
+  .empty-icon :deep(svg) {
+    width: 32px;
+    height: 32px;
+  }
+  
+  .empty-title {
+    font-size: 16px;
+  }
+  
+  .empty-meta {
+    flex-direction: column;
+    gap: 8px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/capi-ui/src/views/sys/Dashboard.vue b/capi-ui/src/views/sys/Dashboard.vue
index 7783308..41e5bbf 100644
--- a/capi-ui/src/views/sys/Dashboard.vue
+++ b/capi-ui/src/views/sys/Dashboard.vue
@@ -1,48 +1,20 @@
 <template>
   <div class="app-container">
-    <a-layout style="min-height: 100%;">
-      <!-- 顶部导航栏：使用渐变淡蓝色背景 -->
+    <a-layout style="min-height: 100vh;">
+      <!-- 顶部导航栏 -->
       <a-layout-header class="header">
-        <!-- 左侧Logo和系统名称 - 增加了图标 -->
+        <!-- 顶部导航内容保持不变 -->
         <div class="logo">
-			<img src="/my.png" class="logo-img" />
-          <span class="system-name">cApi </span>
+          <img src="/my.png" class="logo-img" alt="系统Logo" />
+          <span class="system-name">cApi</span>
         </div>
-        <!-- 主导航菜单：调整按钮大小和间距 -->
-        <a-menu
-          theme="light"
-          mode="horizontal"
-          :selectedKeys="selectedKey"
-          class="main-menu"
-          @click="handleMenuClick"
-        >
-          <a-menu-item key="app" class="menu-button">
-            <ApiOutlined class="menu-icon" />
-            <span>应用中心</span>
-          </a-menu-item>
-          <a-menu-item key="data" class="menu-button">
-            <DatabaseOutlined class="menu-icon" />
-            <span>数据中心</span>
-          </a-menu-item>
-          <a-menu-item key="integration" class="menu-button">
-            <LinkOutlined class="menu-icon" />
-            <span>集成中心</span>
-          </a-menu-item>
-          <a-menu-item key="system" class="menu-button">
-            <SettingOutlined class="menu-icon" />
-            <span>系统管理</span>
-          </a-menu-item>
-        </a-menu>
 
-        <!-- 右侧功能区：搜索框、图标和用户 -->
         <div class="header-actions">
-          <!-- 搜索框 -->
           <div class="search-box">
             <SearchOutlined class="search-icon" />
             <input type="text" placeholder="搜索" class="search-input" />
           </div>
           
-          <!-- 功能图标区 -->
           <div class="action-icons">
             <a-tooltip title="收藏">
               <StarOutlined class="action-icon" />
@@ -58,7 +30,6 @@
             </a-tooltip>
           </div>
           
-          <!-- 用户头像 -->
           <a-dropdown
             placement="bottomRight"
             :auto-adjust-overflow="true"
@@ -81,110 +52,193 @@
         </div>
       </a-layout-header>
 
-      <!-- 标签栏：保持原有功能 -->
-      <div class="tab-bar">
-        <a-tag
-          :class="['console-tab', activeTabKey === 'console' ? 'console-tab--active' : '']"
-          @click="switchToConsole"
+      <!-- 中间主体布局 -->
+      <a-layout style="flex: 1; height: calc(100vh - 64px);">
+        <!-- 左侧菜单（保持不变） -->
+        <a-layout-sider 
+          class="side-menu-container" 
+          width="200" 
+          :collapsed="collapsed" 
+          :trigger="null"
+          collapsible
+          :class="{ 'sider-collapsed': collapsed }"
         >
-          <HomeOutlined class="console-tab-icon" />
-          <span>控制台</span>
-        </a-tag>
+          <!-- 加载状态 -->
+          <div v-if="loading" class="menu-loading">
+            <a-spin size="large" />
+          </div>
+          
+          <!-- 菜单内容 -->
+          <div v-else class="menu-scroll-container">
+            <div 
+              v-for="(module, moduleKey) in moduleMenusConfig" 
+              :key="module.moduleCode"
+              class="parent-menu-item"
+            >
+              <!-- 折叠状态菜单 -->
+              <a-dropdown
+                v-if="collapsed"
+                placement="right"
+                :auto-adjust-overflow="true"
+                :open="collapsedMenuVisible[module.moduleCode]"
+                @openChange="(visible) => handleCollapsedMenuVisible(visible, module.moduleCode)"
+              >
+                <div class="parent-menu-header collapsed-mode" @click.stop>
+                  <component :is="getIconComponent(module.icon)" class="parent-menu-icon" />
+                  <a-tooltip :title="module.moduleName" placement="right">
+                    <span class="collapsed-tooltip-placeholder" />
+                  </a-tooltip>
+                </div>
+                <template #overlay>
+                  <a-menu 
+                    class="collapsed-sub-menu"
+                    @click="(e) => handleCollapsedSubMenuClick(e, module.menus)"
+                  >
+                    <a-menu-item
+                      v-for="menu in module.menus"
+                      :key="menu.menuCode"
+                      :selected="selectedKey === menu.menuCode"
+                    >
+                      <component :is="getIconComponent(menu.cicon)" class="sub-menu-icon" />
+                      <span>{{ menu.menuName }}</span>
+                    </a-menu-item>
+                  </a-menu>
+                </template>
+              </a-dropdown>
 
-        <a-button
-          size="small"
-          class="tab-nav-btn"
-          @click="switchTab('prev')"
-          :disabled="currentTabIndex === 0 || otherTabs.length === 0"
-          ghost
-        >
-          &lt;
-        </a-button>
+              <!-- 展开状态菜单 -->
+              <div v-else>
+                <div 
+                  class="parent-menu-header"
+                  @click="toggleSubMenu(module.moduleCode)"
+                >
+                  <component :is="getIconComponent(module.icon)" class="parent-menu-icon" />
+                  <span class="parent-menu-title">{{ module.moduleName }}</span>
+                  <component 
+                    :is="isSubMenuOpen(module.moduleCode) ? CaretUpOutlined : CaretDownOutlined" 
+                    class="parent-menu-caret"
+                  />
+                </div>
+                
+                <div 
+                  class="sub-menu-list"
+                  :class="{ 'sub-menu-visible': isSubMenuOpen(module.moduleCode) }"
+                >
+                  <div
+                    v-for="menu in module.menus"
+                    :key="menu.menuCode"
+                    class="sub-menu-item"
+                    :class="{ 'sub-menu-item-active': selectedKey === menu.menuCode }"
+                    @click="handleSubMenuItemClick(menu)"
+                  >
+                    <component :is="getIconComponent(menu.cicon)" class="sub-menu-icon" />
+                    <span>{{ menu.menuName }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
 
-        <a-tabs
-          v-model:activeKey="activeTabKey"
-          @change="handleTabChange"
-          class="google-tabs"
-          :animated="false"
-          hide-add
-        >
-          <a-tab-pane
-            v-for="tab in otherTabs"
-            :key="tab.key"
-            :tab="renderTabTitle(tab)"
-          />
-        </a-tabs>
+          <div class="collapse-trigger" @click="collapsed = !collapsed">
+            <component :is="collapsed ? MenuUnfoldOutlined : MenuFoldOutlined" />
+          </div>
+        </a-layout-sider>
 
-        <a-button
-          size="small"
-          class="tab-nav-btn"
-          @click="switchTab('next')"
-          :disabled="currentTabIndex === otherTabs.length - 1 || otherTabs.length === 0"
-          ghost
-        >
-          &gt;
-        </a-button>
+        <!-- 右侧内容区（核心优化部分） -->
+        <a-layout-content class="right-content-container">
+          <!-- 标签栏 -->
+          <div class="tab-bar">
+            <a-tag
+              :class="['console-tab', route.path === '/' ? 'console-tab--active' : '']"
+              @click="switchToConsole"
+            >
+              <HomeOutlined class="console-tab-icon" />
+              <span>控制台</span>
+            </a-tag>
 
-        <a-button
-          size="small"
-          class="close-all-btn"
-          @click="closeAllTabs"
-          :disabled="otherTabs.length === 0"
-          ghost
-        >
-          <CloseOutlined class="close-icon" /> 关闭所有
-        </a-button>
-      </div>
+            <a-button
+              size="small"
+              class="tab-nav-btn"
+              @click="switchTab('prev')"
+              :disabled="currentTabIndex === 0 || otherTabs.length === 0"
+              ghost
+            >
+              <
+            </a-button>
 
-      <!-- 内容区域：保持原有功能 -->
-      <a-layout-content class="content">
-        <div class="home-content">
-          <component
-            :is="currentMainComponent"
-            :key="activeTabKey"
-          />
-        </div>
-      </a-layout-content>
+            <a-tabs
+              v-model:activeKey="activeTabKey"
+              @change="handleTabChange"
+              class="google-tabs"
+              :animated="false"
+              hide-add
+            >
+              <a-tab-pane
+                v-for="tab in otherTabs"
+                :key="tab.key"
+                :tab="renderTabTitle(tab)"
+              />
+            </a-tabs>
+
+            <a-button
+              size="small"
+              class="tab-nav-btn"
+              @click="switchTab('next')"
+              :disabled="currentTabIndex === otherTabs.length - 1 || otherTabs.length === 0"
+              ghost
+            >
+              >
+            </a-button>
+
+            <a-button
+              size="small"
+              class="close-all-btn"
+              @click="closeAllTabs"
+              :disabled="otherTabs.length === 0"
+              ghost
+            >
+              <CloseOutlined class="close-icon" /> 关闭所有
+            </a-button>
+          </div>
+
+          <!-- 内容渲染容器（重点优化） -->
+          <div class="content-render-container">
+            <!-- 加载状态 -->
+            <div v-if="contentLoading" class="content-loading">
+              <a-spin size="large" />
+              <p class="loading-text">加载中...</p>
+            </div>
+            
+            <!-- 路由组件渲染区 -->
+            <div v-else-if="!componentError" class="router-view-wrapper">
+              <router-view
+                :key="route.path"
+                @hook:mounted="contentLoading = false"
+                @hook:errorCaptured="handleRouteError"
+              />
+            </div>
+            
+            <!-- 错误状态 -->
+            <div v-else class="component-error">
+              <ExclamationCircleOutlined class="error-icon" />
+              <p class="error-title">组件加载失败</p>
+              <p class="error-message">请检查路由配置或网络连接</p>
+              <p class="error-path">路由路径: {{ errorPath }}</p>
+              <a-button 
+                type="primary" 
+                size="small" 
+                @click="retryLoadComponent"
+                class="retry-button"
+              >
+                重试加载
+              </a-button>
+            </div>
+          </div>
+        </a-layout-content>
+      </a-layout>
     </a-layout>
 
-    <!-- 模块菜单弹窗：保持原有功能 -->
-    <a-modal
-      v-model:open="moduleModalVisible"
-      :title="currentModuleName"
-      :width="`80%`"
-      :centered="true"
-      :mask-closable="false"
-      @cancel="moduleModalVisible = false"
-      wrap-class-name="module-modal-wrapper"
-    >
-      <div class="module-menu-container">
-        <a-row :gutter="[{ xs: 16, sm: 24 }, { xs: 16, sm: 24 }]">
-          <a-col
-            v-for="menu in currentModuleMenus"
-            :key="menu.key"
-            :xs="12"
-            :sm="8"
-            :md="6"
-            :lg="4"
-            :xl="3"
-          >
-            <a-card
-              class="menu-card"
-              @click="handleMenuCardClick(menu)"
-              hoverable
-              bordered
-            >
-              <div class="menu-card-inner">
-                <component :is="menu.icon" class="menu-icon" />
-                <div class="menu-title">{{ menu.title }}</div>
-              </div>
-            </a-card>
-          </a-col>
-        </a-row>
-      </div>
-    </a-modal>
-
-    <!-- 退出确认对话框：保持原有功能 -->
+    <!-- 退出确认对话框 -->
     <a-modal
       v-model:open="logoutVisible"
       :centered="true"
@@ -217,175 +271,171 @@
   </div>
 </template>
 
-<script setup>
-import { ref, computed, h } from 'vue';
-import { Layout, Menu, Button, Tabs, Card, Tag, Dropdown, Modal, Row, Col, Tooltip } from 'ant-design-vue';
+<script setup lang="ts">
+import { ref, computed, h, reactive, watch, onMounted } from 'vue';
+import { useRouter, useRoute, NavigationGuardNext } from 'vue-router';
+import { Layout, Menu, Button, Tabs, Card, Tag, Dropdown, Modal, Tooltip, Spin } from 'ant-design-vue';
+import { getModuleMenus, ModuleItem, MenuItem } from '@/api/menu';
+
 import {
-  ApiOutlined,
-  UserOutlined,
-  CloseOutlined,
-  LinkOutlined,
-  LogoutOutlined,
-  ExclamationCircleOutlined,
-  BarChartOutlined,
-  DownloadOutlined,
-  SettingOutlined,
-  FormOutlined,
-  HistoryOutlined,
-  UserAddOutlined,
-  HomeOutlined,
-  DatabaseOutlined,  // 用于系统名称前的图标
-  SearchOutlined,
-  StarOutlined,
-  BellOutlined,
-  QuestionCircleOutlined
+  ApiOutlined, UserOutlined, CloseOutlined, LinkOutlined, LogoutOutlined,
+  ExclamationCircleOutlined, BarChartOutlined, DownloadOutlined, SettingOutlined,
+  FormOutlined, HistoryOutlined, HomeOutlined, DatabaseOutlined, SearchOutlined,
+  StarOutlined, BellOutlined, QuestionCircleOutlined, MenuFoldOutlined,
+  MenuUnfoldOutlined, CaretUpOutlined, CaretDownOutlined
 } from '@ant-design/icons-vue';
 
-// 导入Main组件（控制台要展示的内容）
-import Main from './main.vue';
-
-// 模拟业务组件
-const MockComponent = (props) => {
-  return h('div', { style: { padding: '20px' } }, [
-    h('h3', `这是${props.title}页面`),
-    h('p', '此处将展示该功能模块的具体内容')
-  ]);
-};
-
-// 模块与菜单映射配置
-const moduleMenusConfig = {
-  app: {
-    name: '应用中心',
-    menus: [
-      {
-        key: 'app-list',
-        title: '应用列表',
-        icon: ApiOutlined,
-        component: () => h(MockComponent, { title: '应用列表' }),
-        closable: true
-      },
-      {
-        key: 'app-create',
-        title: '创建应用',
-        icon: FormOutlined,
-        component: () => h(MockComponent, { title: '创建应用' }),
-        closable: true
-      }
-    ]
-  },
-  data: {
-    name: '数据中心',
-    menus: [
-      {
-        key: 'data-analytics',
-        title: '数据分析',
-        icon: BarChartOutlined,
-        component: () => h(MockComponent, { title: '数据分析' }),
-        closable: true
-      },
-      {
-        key: 'data-export',
-        title: '数据导出',
-        icon: DownloadOutlined,
-        component: () => h(MockComponent, { title: '数据导出' }),
-        closable: true
-      }
-    ]
-  },
-  integration: {
-    name: '集成中心',
-    menus: [
-      {
-        key: 'api-list',
-        title: 'API列表',
-        icon: ApiOutlined,
-        component: () => h(MockComponent, { title: 'API列表' }),
-        closable: true
-      },
-      {
-        key: 'integration-history',
-        title: '集成记录',
-        icon: HistoryOutlined,
-        component: () => h(MockComponent, { title: '集成记录' }),
-        closable: true
-      }
-    ]
-  },
-  system: {
-    name: '系统管理',
-    menus: [
-      {
-        key: 'system-settings',
-        title: '系统设置',
-        icon: SettingOutlined,
-        component: () => h(MockComponent, { title: '系统设置' }),
-        closable: true
-      },
-      {
-        key: 'user-manage',
-        title: '用户管理',
-        icon: UserOutlined,
-        component: () => h(MockComponent, { title: '用户管理' }),
-        closable: true
-      }
-    ]
-  }
-};
+// 路由实例
+const router = useRouter();
+const route = useRoute();
 
 // 状态管理
-const selectedKey = ref(['console']);
-const moduleModalVisible = ref(false);
-const currentModuleKey = ref('console');
-const activeTabKey = ref('console');
+const collapsed = ref(false);
+const logoutVisible = ref(false);
+const selectedKey = ref('');
+const expandedParentMenus = ref<string[]>([]);
+const loading = ref(true);
+const contentLoading = ref(false);
+const componentError = ref(false);
+const errorPath = ref('');
+
+// 菜单配置
+const moduleMenusConfig = ref<ModuleItem[]>([]);
+const collapsedMenuVisible = reactive<Record<string, boolean>>({});
+
+// 标签页数据类型
+interface TabItem {
+  key: string;
+  title: string;
+  path: string;
+  closable: boolean;
+}
 
 // 标签页数据
-const allTabs = ref([
-  {
-    key: 'console',
-    title: '控制台',
-    component: Main,
-    closable: false
-  }
+const allTabs = ref<TabItem[]>([
+  { key: 'console', title: '控制台', path: '/', closable: false }
 ]);
 
 // 计算属性
-const otherTabs = computed(() => 
-  allTabs.value.filter(tab => tab.key !== 'console')
-);
-
-const currentTabIndex = computed(() => 
-  otherTabs.value.findIndex(tab => tab.key === activeTabKey.value)
-);
-
-const currentModuleName = computed(() => 
-  moduleMenusConfig[currentModuleKey.value]?.name || '功能菜单'
-);
-
-const currentModuleMenus = computed(() => 
-  moduleMenusConfig[currentModuleKey.value]?.menus || []
-);
-
-const currentMainComponent = computed(() => {
-  try {
-    const targetTab = allTabs.value.find(tab => tab.key === activeTabKey.value);
-    return targetTab ? targetTab.component : null;
-  } catch (error) {
-    console.error('组件加载失败:', error);
-    return null;
+const otherTabs = computed(() => allTabs.value.filter(tab => tab.key !== 'console'));
+const currentTabIndex = computed(() => otherTabs.value.findIndex(tab => tab.path === route.path));
+const activeTabKey = computed({
+  get() {
+    const matchedTab = allTabs.value.find(tab => tab.path === route.path);
+    return matchedTab ? matchedTab.key : 'console';
+  },
+  set(key) {
+    const targetTab = allTabs.value.find(tab => tab.key === key);
+    if (targetTab) router.push(targetTab.path);
   }
 });
 
-// 事件处理
-const renderTabTitle = (tab) => {
+// 初始化路由导航守卫（控制加载状态）
+router.beforeEach((to, from, next) => {
+  // 非初始加载且目标路由存在时显示加载状态
+  if (from.path !== '' || to.path !== '/') {
+    contentLoading.value = true;
+    componentError.value = false;
+  }
+  next();
+});
+
+// 获取菜单数据
+const fetchMenuData = async () => {
+  try {
+    loading.value = true;
+    const modules = await getModuleMenus();
+    moduleMenusConfig.value = modules;
+    
+    modules.forEach(module => {
+      collapsedMenuVisible[module.moduleCode] = false;
+    });
+    
+    syncRouteAndMenu();
+  } catch (error) {
+    console.error('菜单接口请求失败:', error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 同步路由与菜单状态
+const syncRouteAndMenu = () => {
+  if (route.path === '/') {
+    selectedKey.value = '';
+    expandedParentMenus.value = [];
+    return;
+  }
+
+  moduleMenusConfig.value.forEach(module => {
+    const matchedMenu = module.menus.find(menu => menu.chref === route.path);
+    if (matchedMenu) {
+      selectedKey.value = matchedMenu.menuCode;
+      expandedParentMenus.value = [module.moduleCode];
+      
+      const tabExists = allTabs.value.some(tab => tab.path === route.path);
+      if (!tabExists) {
+        allTabs.value.push({
+          key: matchedMenu.menuCode,
+          title: matchedMenu.menuName,
+          path: matchedMenu.chref,
+          closable: true
+        });
+      }
+    }
+  });
+};
+
+// 页面加载时初始化
+onMounted(() => {
+  fetchMenuData();
+  // 监听路由完成事件，确保加载状态正确关闭
+  router.afterEach(() => {
+    setTimeout(() => {
+      if (contentLoading.value) contentLoading.value = false;
+    }, 300);
+  });
+});
+
+// 图标组件映射
+const getIconComponent = (iconName: string) => {
+  const iconMap: Record<string, any> = {
+    ApiOutlined, UserOutlined, BarChartOutlined, DownloadOutlined,
+    SettingOutlined, FormOutlined, HistoryOutlined, HomeOutlined,
+    DatabaseOutlined, LinkOutlined
+  };
+  return iconMap[iconName] || ApiOutlined;
+};
+
+// 子菜单展开状态检查
+const isSubMenuOpen = (moduleCode: string) => {
+  return expandedParentMenus.value.includes(moduleCode);
+};
+
+// 切换子菜单展开状态
+const toggleSubMenu = (moduleCode: string) => {
+  expandedParentMenus.value = isSubMenuOpen(moduleCode) ? [] : [moduleCode];
+};
+
+// 折叠菜单显示控制
+const handleCollapsedMenuVisible = (visible: boolean, moduleCode: string) => {
+  Object.keys(collapsedMenuVisible).forEach(key => {
+    if (key !== moduleCode) collapsedMenuVisible[key] = false;
+  });
+  collapsedMenuVisible[moduleCode] = visible;
+};
+
+// 渲染标签页标题
+const renderTabTitle = (tab: TabItem) => {
   return h('div', { class: 'tab-title-container' }, [
     h('span', { class: 'tab-title-text' }, tab.title),
     tab.closable && h(
       'span',
       {
         class: 'tab-close-btn',
-        onClick: (e) => {
-          e.stopPropagation();
-          deleteTab(tab.key);
+        onClick: (e: Event) => { 
+          e.stopPropagation(); 
+          deleteTab(tab.key); 
         }
       },
       h(CloseOutlined, { size: 12 })
@@ -393,121 +443,173 @@ const renderTabTitle = (tab) => {
   ]);
 };
 
-const switchToConsole = () => {
-  activeTabKey.value = 'console';
+// 切换到控制台
+const switchToConsole = () => { 
+  router.push('/');
+  selectedKey.value = '';
+  componentError.value = false;
+  expandedParentMenus.value = [];
+  Object.keys(collapsedMenuVisible).forEach(key => collapsedMenuVisible[key] = false);
 };
 
-const switchTab = (direction) => {
+// 标签页切换（上一个/下一个）
+const switchTab = (direction: 'prev' | 'next') => {
+  componentError.value = false;
   if (direction === 'prev' && currentTabIndex.value > 0) {
-    activeTabKey.value = otherTabs.value[currentTabIndex.value - 1].key;
-  } else if (
-    direction === 'next' &&
-    currentTabIndex.value < otherTabs.value.length - 1
-  ) {
-    activeTabKey.value = otherTabs.value[currentTabIndex.value + 1].key;
+    router.push(otherTabs.value[currentTabIndex.value - 1].path);
+  } else if (direction === 'next' && currentTabIndex.value < otherTabs.value.length - 1) {
+    router.push(otherTabs.value[currentTabIndex.value + 1].path);
   }
 };
 
-const deleteTab = (key) => {
+// 关闭单个标签页
+const deleteTab = (key: string) => {
   if (key === 'console') return;
   const tabIndex = allTabs.value.findIndex(tab => tab.key === key);
   if (tabIndex === -1) return;
+  
+  const tabToDelete = allTabs.value[tabIndex];
   allTabs.value = allTabs.value.filter(tab => tab.key !== key);
-  if (key === activeTabKey.value) {
-    const targetTab = allTabs.value[tabIndex - 1] || allTabs.value.find(tab => tab.key === 'console');
-    activeTabKey.value = targetTab.key;
+  
+  if (tabToDelete.path === route.path) {
+    const targetTab = allTabs.value[tabIndex - 1] || allTabs.value[0];
+    router.push(targetTab.path);
   }
 };
 
+// 关闭所有标签页
 const closeAllTabs = () => {
   allTabs.value = allTabs.value.filter(tab => tab.key === 'console');
-  activeTabKey.value = 'console';
+  router.push('/');
+  selectedKey.value = '';
+  expandedParentMenus.value = [];
+  Object.keys(collapsedMenuVisible).forEach(key => collapsedMenuVisible[key] = false);
+  componentError.value = false;
 };
 
-const handleTabChange = (key) => {
-  activeTabKey.value = key;
-  // 根据标签页映射到对应的模块
-  const tabToModuleMap = {
-    'dashboard': 'console',
-    'tasks': 'console',
-    'app-list': 'app',
-    'app-create': 'app',
-    'data-analytics': 'data',
-    'data-export': 'data',
-    'api-list': 'integration',
-    'integration-history': 'integration',
-    'system-settings': 'system',
-    'user-manage': 'system'
-  };
-  selectedKey.value = [tabToModuleMap[key] || 'console'];
-};
-
-const handleMenuClick = ({ key }) => {
-  currentModuleKey.value = key;
-  moduleModalVisible.value = true;
-  selectedKey.value = [key];
-};
-
-const handleMenuCardClick = (menuItem) => {
-  moduleModalVisible.value = false;
-  const isTabExists = allTabs.value.some(tab => tab.key === menuItem.key);
-  if (!isTabExists) {
-    allTabs.value.push({
-      key: menuItem.key,
-      title: menuItem.title,
-      component: menuItem.component,
-      closable: menuItem.closable
-    });
-  }
-  activeTabKey.value = menuItem.key;
-};
-
-const handleDropdownVisible = (visible) => {
-  console.log('下拉菜单状态：', visible ? '显示' : '隐藏');
-};
-
-const handleUserMenuClick = ({ key }) => {
-  if (key === 'logout') {
-    handleLogout();
+// 子菜单项点击处理
+const handleSubMenuItemClick = (menu: MenuItem) => {
+  if (!menu.chref) return; // 过滤无效路由
+  
+  selectedKey.value = menu.menuCode;
+  componentError.value = false;
+  contentLoading.value = true;
+  
+  const existingTab = allTabs.value.find(tab => tab.path === menu.chref);
+  
+  if (existingTab) {
+    router.push(menu.chref);
   } else {
-    console.log('用户菜单点击：', key);
+    allTabs.value.push({
+      key: menu.menuCode,
+      title: menu.menuName,
+      path: menu.chref,
+      closable: true
+    });
+    router.push(menu.chref);
   }
 };
 
-const logoutVisible = ref(false);
-const handleLogout = () => {
-  logoutVisible.value = true;
+// 折叠状态子菜单点击处理
+const handleCollapsedSubMenuClick = (e: { key: string }, menus: MenuItem[]) => {
+  const menuCode = e.key;
+  const menu = menus.find(item => item.menuCode === menuCode);
+  
+  try {
+    if (menu?.chref) {
+      selectedKey.value = menuCode;
+      componentError.value = false;
+      contentLoading.value = true;
+      
+      const existingTab = allTabs.value.find(tab => tab.path === menu.chref);
+      
+      if (existingTab) {
+        router.push(menu.chref);
+      } else {
+        allTabs.value.push({
+          key: menu.menuCode,
+          title: menu.menuName,
+          path: menu.chref,
+          closable: true
+        });
+        router.push(menu.chref);
+      }
+    }
+  } finally {
+    Object.keys(collapsedMenuVisible).forEach(key => collapsedMenuVisible[key] = false);
+  }
+};
+
+// 标签页切换处理
+const handleTabChange = (key: string) => {
+  activeTabKey.value = key;
+  componentError.value = false;
+};
+
+// 路由错误处理
+const handleRouteError = (err: Error) => {
+  console.error('路由组件加载错误:', err);
+  componentError.value = true;
+  errorPath.value = route.path;
+  contentLoading.value = false;
+  return false;
+};
+
+// 重试加载组件
+const retryLoadComponent = () => {
+  componentError.value = false;
+  contentLoading.value = true;
+  // 重新导航到当前路由
+  router.push(route.path).catch(err => {
+    console.error('重试加载失败:', err);
+    componentError.value = true;
+    contentLoading.value = false;
+  });
+};
+
+// 用户菜单处理
+const handleDropdownVisible = (visible: boolean) => { 
+  console.log('用户下拉菜单状态：', visible); 
+};
+
+const handleUserMenuClick = ({ key }: { key: string }) => {
+  if (key === 'logout') {
+    logoutVisible.value = true;
+  }
 };
 
 const doLogout = () => {
   localStorage.removeItem('token');
   localStorage.removeItem('userInfo');
   logoutVisible.value = false;
-  alert('退出登录成功，即将跳转到登录页');
-  // 实际项目中应该使用路由跳转
-  // router.push('/login');
+  router.push('/login');
 };
+
+// 路由变化监听
+watch(() => route.path, () => {
+  syncRouteAndMenu();
+}, { immediate: true });
+
+// 折叠状态监听
+watch(collapsed, (newVal) => {
+  if (newVal) {
+    expandedParentMenus.value = [];
+  } else {
+    Object.keys(collapsedMenuVisible).forEach(key => collapsedMenuVisible[key] = false);
+    if (selectedKey.value) {
+      syncRouteAndMenu();
+    }
+  }
+});
 </script>
 
 <style scoped>
 /* 基础样式 */
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-html,
-body,
-.app-container {
-  height: 100vh;
-  overflow: hidden;
-}
-.app-container {
-  display: flex;
-  flex-direction: column;
-}
+* { margin: 0; padding: 0; box-sizing: border-box; }
+html, body, .app-container { height: 100vh; overflow: hidden; }
+.app-container { display: flex; flex-direction: column; }
 
-/* 顶部导航：使用渐变淡蓝色背景 */
+/* 顶部导航栏样式 */
 .header {
   display: flex;
   align-items: center;
@@ -519,24 +621,19 @@ body,
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
 }
 
-/* Logo和系统名称 - 添加了图标样式 */
 .logo {
   display: flex;
   align-items: center;
-  padding-right: 20px;
-  border-right: 1px solid rgba(24, 144, 255, 0.1);
-  gap: 10px; /* 图标与文字间距 */
-}
-.logo-icon {
-  color: #1890ff;
-  font-size: 22px;
+  padding-right: 52px;
+  border-right: 0px solid rgba(24, 144, 255, 0.1);
+  gap: 10px;
 }
 
 .logo-img {
-  width: 65px; /* 与文字高度匹配，可根据图片比例调整 */
+  width: 65px;
   height: 65px;
-  object-fit: contain; /* 关键：保持图片比例，避免拉伸变形 */
-  vertical-align: middle; /* 与文字垂直居中对齐 */
+  object-fit: contain;
+  vertical-align: middle;
 }
 
 .system-name {
@@ -545,56 +642,8 @@ body,
   color: #1890ff;
 }
 
-/* 主导航菜单：优化按钮样式 */
-.main-menu {
-  flex: 1;
-  margin: 0 25px;
-  justify-content: flex-start;
-}
-:deep(.ant-menu-horizontal) {
-  background: transparent !important;
-  border-bottom: none !important;
-}
-/* 调整按钮大小和间距 */
-.menu-button {
-  border-radius: 4px;
-  margin: 110 120px !important; 
-  transition: all 0.3s ease;
-  margin-top: 12px;
-}
-:deep(.ant-menu-item) {
-  color: #096dd9 !important; /* 加深文字颜色，增强对比 */
-  font-size: 13px; /* 缩小字体 */
-  padding: 0 12px !important; /* 减小内边距 */
-  height: 36px !important; /* 减小按钮高度 */
-  line-height: 36px !important;
-  background-color: rgba(255, 255, 255, 0.8) !important; /* 调整背景透明度 */
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-}
-:deep(.ant-menu-item-selected) {
-  background-color: #fff !important;
-  color: #096dd9 !important;
-  box-shadow: 0 2px 6px rgba(24, 144, 255, 0.2);
-}
-:deep(.ant-menu-item:hover:not(.ant-menu-item-selected)) {
-  background-color: #fff !important;
-  color: #096dd9 !important;
-  transform: translateY(-1px);
-  box-shadow: 0 2px 5px rgba(24, 144, 255, 0.15);
-}
-.menu-icon {
-  margin-right: 6px; /* 减小图标与文字间距 */
-  font-size: 14px; /* 缩小图标 */
-}
+.header-actions { display: flex; align-items: center; gap: 16px; }
 
-/* 右侧功能区 */
-.header-actions {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-/* 搜索框 */
 .search-box {
   display: flex;
   align-items: center;
@@ -605,10 +654,8 @@ body,
   width: 240px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
 }
-.search-icon {
-  color: #8c8c8c;
-  margin-right: 8px;
-}
+
+.search-icon { color: #8c8c8c; margin-right: 8px; }
 .search-input {
   background: transparent;
   border: none;
@@ -617,11 +664,8 @@ body,
   width: 100%;
   font-size: 14px;
 }
-.search-input::placeholder {
-  color: #b3b3b3;
-}
+.search-input::placeholder { color: #b3b3b3; }
 
-/* 功能图标区 */
 .action-icons {
   display: flex;
   align-items: center;
@@ -629,21 +673,16 @@ body,
   padding-right: 16px;
   border-right: 1px solid rgba(24, 144, 255, 0.1);
 }
+
 .action-icon {
   color: #1890ff;
   font-size: 18px;
   cursor: pointer;
   transition: all 0.2s;
 }
-.action-icon:hover {
-  color: #096dd9;
-  transform: scale(1.1);
-}
+.action-icon:hover { color: #096dd9; transform: scale(1.1); }
 
-/* 用户头像 */
-.user-avatar {
-  cursor: pointer;
-}
+.user-avatar { cursor: pointer; }
 .avatar-img {
   width: 36px;
   height: 36px;
@@ -659,30 +698,248 @@ body,
   box-shadow: 0 4px 8px rgba(24, 144, 255, 0.2);
 }
 
-/* 用户菜单 */
-.user-menu {
-  width: 160px;
-  border-radius: 6px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-}
-.logout-menu-item {
-  color: #f5222d !important;
+.user-menu { width: 160px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
+.logout-menu-item { color: #f5222d !important; }
+
+/* 左侧菜单样式 - 核心区域 */
+.side-menu-container {
+  background: #fff;
+  border-right: 1px solid #e0e0e0;
+  transition: all 0.3s ease;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  z-index: 10; /* 确保菜单在内容上方 */
+}
+
+/* 折叠状态的侧边栏 */
+.sider-collapsed {
+  width: 64px !important;
+}
+
+/* 菜单加载状态 */
+.menu-loading {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+/* 菜单滚动容器 */
+.menu-scroll-container {
+  flex: 1;
+  padding: 16px 0;
+  overflow-y: auto;
+  padding-bottom: 60px; /* 为底部按钮留出空间 */
+}
+
+/* 父级菜单项容器 */
+.parent-menu-item {
+  margin-bottom: 4px;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+/* 父级菜单标题基础样式 */
+.parent-menu-header {
+  height: 44px;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  background-color: #fff;
+  transition: all 0.2s ease;
+  border-left: 3px solid transparent;
+}
+
+/* 展开状态父菜单交互 */
+.parent-menu-header:hover {
+  background-color: #f5f9ff;
+  border-left-color: #1890ff;
+}
+
+/* 折叠状态父菜单样式 */
+.parent-menu-header.collapsed-mode {
+  justify-content: center;
+  padding: 0;
+  border-left: none;
+  height: 48px; /* 增大点击区域 */
+  width: 100%;
+}
+.parent-menu-header.collapsed-mode:hover {
+  background-color: #f5f9ff;
+  border-left: none;
+}
+
+/* 折叠状态tooltip占位元素 */
+.collapsed-tooltip-placeholder {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+}
+
+/* 父级菜单图标 */
+.parent-menu-icon {
+  color: #1890ff;
+  font-size: 16px;
+  margin-right: 12px;
+}
+/* 折叠状态图标 */
+.parent-menu-header.collapsed-mode .parent-menu-icon {
+  margin-right: 0;
+  font-size: 20px; /* 折叠时图标放大 */
+}
+
+/* 父级菜单文字 */
+.parent-menu-title {
+  flex: 1;
+  font-size: 14px;
+  color: #333;
+  font-weight: 500;
+}
+
+/* 父级菜单箭头 */
+.parent-menu-caret {
+  color: #888;
+  font-size: 14px;
+  transition: transform 0.2s ease;
+}
+
+/* 展开状态子菜单列表容器 */
+.sub-menu-list {
+  background-color: #fafafa;
+  overflow: hidden;
+  max-height: 0;
+  transition: max-height 0.3s ease-out;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
+}
+
+/* 展开状态子菜单显示 */
+.sub-menu-visible {
+  max-height: 500px;
+  transition: max-height 0.3s ease-in;
+}
+
+/* 展开状态子菜单项样式 */
+.sub-menu-item {
+  height: 38px;
+  padding: 0 16px 0 44px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 14px;
+  color: #666;
+  border-left: 2px solid transparent;
+}
+
+/* 子菜单图标 */
+.sub-menu-icon {
+  color: #666;
+  font-size: 14px;
+  margin-right: 10px;
+}
+
+/* 展开状态子菜单项交互 */
+.sub-menu-item:hover {
+  background-color: #f0f7ff;
+  color: #1890ff;
+  padding-left: 42px;
+  border-left-color: #1890ff;
+}
+.sub-menu-item:hover .sub-menu-icon {
+  color: #1890ff;
+}
+
+/* 子菜单项选中样式 */
+.sub-menu-item-active {
+  background-color: #e6f4ff;
+  color: #1890ff;
+  font-weight: 500;
+  padding-left: 42px;
+  border-left-color: #1890ff;
+}
+.sub-menu-item-active .sub-menu-icon {
+  color: #1890ff;
+}
+
+/* 折叠状态：悬浮子菜单样式 */
+:deep(.collapsed-sub-menu) {
+  min-width: 180px !important;
+  border-radius: 6px !important;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15) !important;
+  padding: 6px 0 !important;
+  z-index: 999 !important; /* 确保悬浮菜单在最上层 */
+}
+:deep(.collapsed-sub-menu .ant-menu-item) {
+  height: 40px !important;
+  line-height: 40px !important;
+  padding: 0 16px !important;
+  transition: all 0.2s ease !important;
+  display: flex !important;
+  align-items: center !important;
+  gap: 8px !important;
+}
+:deep(.collapsed-sub-menu .ant-menu-item:hover) {
+  background-color: #f5f9ff !important;
+  color: #1890ff !important;
+}
+:deep(.collapsed-sub-menu .ant-menu-item-selected) {
+  background-color: #e6f4ff !important;
+  color: #1890ff !important;
+}
+:deep(.collapsed-sub-menu .ant-menu-item .anticon) {
+  font-size: 14px !important;
+}
+
+/* 折叠/展开按钮 */
+.collapse-trigger {
+  position: absolute;
+  bottom: 16px;
+  right: -18px;
+  background: #fff;
+  border: 1px solid #e0e0e0;
+  border-radius: 50%;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  z-index: 11; /* 确保按钮在菜单上方 */
+  color: #1890ff;
+  transition: all 0.2s ease;
+}
+.collapse-trigger:hover {
+  color: #096dd9;
+  box-shadow: 0 2px 4px rgba(24, 144, 255, 0.15);
+  transform: scale(1.05);
+}
+
+/* 右侧内容区样式 */
+.right-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  background: #f8f9fa;
 }
 
-/* 标签栏：保持原有样式 */
 .tab-bar {
   background: #fff;
   border-bottom: 1px solid #e0e0e0;
   padding: 0 20px;
   height: 44px;
-  margin-top: 2px;
   display: flex;
   align-items: center;
   gap: 8px;
-  width: 100%;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
   transition: all 0.3s ease;
 }
+
 .console-tab {
   height: 32px;
   padding: 0 16px;
@@ -696,10 +953,8 @@ body,
   background: transparent;
   transition: all 0.2s ease;
 }
-.console-tab-icon {
-  margin-right: 6px;
-  font-size: 14px;
-}
+
+.console-tab-icon { margin-right: 6px; font-size: 14px; }
 .console-tab--active {
   background: #e8f4ff !important;
   color: #1890ff;
@@ -711,7 +966,6 @@ body,
   color: #1890ff;
 }
 
-/* 标签导航按钮 */
 .tab-nav-btn {
   width: 28px;
   height: 28px;
@@ -723,30 +977,13 @@ body,
   justify-content: center;
   border-radius: 4px;
 }
-.tab-nav-btn:hover {
-  background: #f5f9ff;
-  color: #1890ff;
-}
-.tab-nav-btn:disabled {
-  color: #ccc !important;
-  cursor: not-allowed;
-  background: transparent !important;
-}
+.tab-nav-btn:hover { background: #f5f9ff; color: #1890ff; }
+.tab-nav-btn:disabled { color: #ccc !important; cursor: not-allowed; background: transparent !important; }
 
-/* 标签页样式 */
-.google-tabs {
-  flex: 1;
-  overflow: hidden;
-}
-.ant-tabs-nav {
-  height: 100%;
-  margin: 0 !important;
-}
-.ant-tabs-nav-list {
-  height: 100%;
-  align-items: center;
-}
-.ant-tabs-tab {
+.google-tabs { flex: 1; overflow: hidden; }
+:deep(.ant-tabs-nav) { height: 100%; margin: 0 !important; }
+:deep(.ant-tabs-nav-list) { height: 100%; align-items: center; }
+:deep(.ant-tabs-tab) {
   height: 36px;
   padding: 0 16px;
   margin: 0 2px;
@@ -756,22 +993,16 @@ body,
   font-size: 14px;
   color: #666;
 }
-.ant-tabs-tab:hover:not(.ant-tabs-tab-active) {
-  background: #f5f9ff;
-  color: #1890ff;
-}
-.ant-tabs-tab.ant-tabs-tab-active {
+:deep(.ant-tabs-tab:hover:not(.ant-tabs-tab-active)) { background: #f5f9ff; color: #1890ff; }
+:deep(.ant-tabs-tab.ant-tabs-tab-active) {
   background: #e8f4ff !important;
   color: #1890ff !important;
   font-weight: 500;
   box-shadow: 0 1px 2px rgba(24, 144, 255, 0.1);
   border-bottom: 2px solid #1890ff;
 }
-.ant-tabs-ink-bar {
-  display: none;
-}
+:deep(.ant-tabs-ink-bar) { display: none; }
 
-/* 标签标题容器 */
 .tab-title-container {
   display: flex;
   align-items: center;
@@ -779,9 +1010,7 @@ body,
   height: 100%;
   padding: 0 4px;
 }
-.tab-title-text {
-  white-space: nowrap;
-}
+.tab-title-text { white-space: nowrap; }
 .tab-close-btn {
   width: 16px;
   height: 16px;
@@ -793,18 +1022,10 @@ body,
   cursor: pointer;
   transition: all 0.2s;
 }
-.tab-title-container:hover .tab-close-btn {
-  display: inline-flex;
-}
-.ant-tabs-tab-active .tab-close-btn {
-  color: #1890ff;
-}
-.tab-close-btn:hover {
-  background: #d1eaff;
-  color: #1890ff;
-}
+.tab-title-container:hover .tab-close-btn { display: inline-flex; }
+:deep(.ant-tabs-tab-active) .tab-close-btn { color: #1890ff; }
+.tab-close-btn:hover { background: #d1eaff; color: #1890ff; }
 
-/* 关闭所有按钮 */
 .close-all-btn {
   color: #666;
   margin-left: 2px;
@@ -814,28 +1035,16 @@ body,
   border-radius: 4px;
   padding: 0 10px;
 }
-.close-all-btn:hover {
-  color: #1890ff;
-  background: #f5f9ff;
-}
-.close-all-btn:disabled {
-  color: #ccc !important;
-  cursor: not-allowed;
-  background: transparent !important;
-}
-.close-icon {
-  margin-right: 4px;
-  font-size: 12px;
+.close-all-btn:hover { color: #1890ff; background: #f5f9ff; }
+.close-all-btn:disabled { color: #ccc !important; cursor: not-allowed; background: transparent !important; }
+.close-icon { margin-right: 4px; font-size: 12px; }
+
+.main-content {
+  flex: 1;
+  padding: 16px;
+  overflow-y: auto;
 }
 
-/* 内容区域：保持原有样式 */
-.content {
-  background: #f8f9fa;
-  padding: 16px;
-  flex-grow: 1;
-  overflow-y: auto;
-  width: 100%;
-}
 .home-content {
   background: #fff;
   padding: 24px;
@@ -843,55 +1052,50 @@ body,
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
   height: 100%;
   overflow: auto;
+  min-height: calc(100vh - 64px - 44px - 32px);
 }
 
-/* 模块菜单弹窗：保持原有样式 */
-.module-modal-wrapper .ant-modal-content {
-  border-radius: 8px;
-}
-.module-menu-container {
-  padding: 24px 0;
-}
-.menu-card {
-  height: 160px;
+/* 内容加载状态 */
+.content-loading {
   display: flex;
   align-items: center;
   justify-content: center;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  border-color: #e8e8e8;
-}
-.menu-card:hover {
-  border-color: #1890ff;
-  box-shadow: 0 4px 16px rgba(24, 144, 255, 0.15);
-  transform: translateY(-2px);
-}
-.menu-card-inner {
-  text-align: center;
-}
-.menu-icon {
-  font-size: 32px;
-  color: #1890ff;
-  margin-bottom: 16px;
-  transition: color 0.3s;
-}
-.menu-card:hover .menu-icon {
-  color: #096dd9;
-}
-.menu-title {
-  font-size: 16px;
-  color: #333;
-  font-weight: 500;
+  height: 100%;
+  min-height: 300px;
 }
 
-/* 退出对话框：保持原有样式 */
-.logout-modal-wrapper .ant-modal {
-  width: 480px !important;
-}
-.logout-body {
+/* 组件加载错误样式 */
+.component-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 300px;
+  color: #f5222d;
+  padding: 20px;
   text-align: center;
-  padding: 8px 0 4px;
 }
+
+.error-icon {
+  font-size: 48px;
+  margin-bottom: 16px;
+}
+
+.error-path {
+  font-family: monospace;
+  margin-top: 8px;
+  color: #8c8c8c;
+  background: #f5f5f5;
+  padding: 4px 8px;
+  border-radius: 4px;
+  word-break: break-all;
+  max-width: 90%;
+}
+
+/* 退出对话框样式 */
+:deep(.logout-modal-wrapper .ant-modal) { width: 480px !important; }
+.logout-body { text-align: center; padding: 8px 0 4px; }
 .logout-title {
   font-size: 20px;
   font-weight: 600;
diff --git a/capi-ui/src/views/sys/index.vue b/capi-ui/src/views/sys/index.vue
new file mode 100644
index 0000000..ea0a234
--- /dev/null
+++ b/capi-ui/src/views/sys/index.vue
@@ -0,0 +1,12 @@
+<!-- src/views/sys/index.vue -->
+<template>
+  <AppLayout />
+</template>
+
+<script setup lang="ts">
+import AppLayout from '@/components/Layout/AppLayout.vue'
+</script>
+
+<style scoped>
+/* 可选：局部样式覆盖 */
+</style>
\ No newline at end of file
diff --git a/capi-ui/src/views/sys/main.vue b/capi-ui/src/views/sys/main.vue
index 02409e3..eb28630 100644
--- a/capi-ui/src/views/sys/main.vue
+++ b/capi-ui/src/views/sys/main.vue
@@ -1,4 +1,6 @@
 <template>
+	
+	ffffffffffffffffffff
 </template>
 
 <script>
diff --git a/src/main/java/com/mini/capi/biz/domain/ApiModule.java b/src/main/java/com/mini/capi/biz/domain/ApiModule.java
index 739f1a3..4020ea7 100644
--- a/src/main/java/com/mini/capi/biz/domain/ApiModule.java
+++ b/src/main/java/com/mini/capi/biz/domain/ApiModule.java
@@ -59,4 +59,5 @@ public class ApiModule implements Serializable {
      */
     @TableField("f_flow_state")
     private Integer fFlowState;
+
 }
diff --git a/src/main/java/com/mini/capi/sys/domain/ModuleMenuDTO.java b/src/main/java/com/mini/capi/sys/domain/ModuleMenuDTO.java
new file mode 100644
index 0000000..a8a5933
--- /dev/null
+++ b/src/main/java/com/mini/capi/sys/domain/ModuleMenuDTO.java
@@ -0,0 +1,31 @@
+package com.mini.capi.sys.domain;
+
+import com.mini.capi.biz.domain.ApiMenus;
+import com.mini.capi.biz.domain.ApiModule;
+import lombok.Data;
+
+import java.io.Serializable;
+import java.util.ArrayList;
+import java.util.List;
+
+@Data
+public class ModuleMenuDTO implements Serializable {
+
+    private String moduleName;
+    private String moduleCode;
+    private String icon;
+    private String href;
+
+    List<ApiMenus> menus = new ArrayList<>();
+
+    public ModuleMenuDTO() {
+    }
+
+    public ModuleMenuDTO(String moduleName,String moduleCode,String icon,String href,List<ApiMenus> menus){
+        this.moduleName = moduleName;
+        this.moduleCode = moduleCode;
+        this.icon = icon;
+        this.href = href;
+        this.menus = menus;
+    }
+}
diff --git a/src/main/java/com/mini/capi/sys/pageController/loginPageController.java b/src/main/java/com/mini/capi/sys/pageController/loginPageController.java
index bc86a24..d13ed94 100644
--- a/src/main/java/com/mini/capi/sys/pageController/loginPageController.java
+++ b/src/main/java/com/mini/capi/sys/pageController/loginPageController.java
@@ -1,6 +1,5 @@
 package com.mini.capi.sys.pageController;
 
-import com.baomidou.mybatisplus.annotation.TableField;
 import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
 import com.mini.capi.biz.domain.ApiMenus;
 import com.mini.capi.biz.domain.ApiModule;
@@ -8,13 +7,16 @@ import com.mini.capi.biz.domain.ApiUser;
 import com.mini.capi.biz.service.ApiMenusService;
 import com.mini.capi.biz.service.ApiModuleService;
 import com.mini.capi.biz.service.ApiUserService;
+import com.mini.capi.model.ApiResult;
 import com.mini.capi.model.auth.Result;
+import com.mini.capi.sys.domain.ModuleMenuDTO;
 import jakarta.annotation.Resource;
 import jakarta.servlet.http.HttpSession;
 import lombok.Data;
 import org.springframework.web.bind.annotation.*;
 
 import java.io.Serializable;
+import java.util.ArrayList;
 import java.util.List;
 import java.util.Objects;
 
@@ -98,20 +100,21 @@ public class loginPageController {
     }
 
 
-    @GetMapping("/modules")
-    public List<ApiModule> modules() {
-        return moduleService.list();
+    @GetMapping("/getModules")
+    public ApiResult<List<ModuleMenuDTO>> getModules() {
+        List<ApiModule> apiModules = moduleService.list();
+        List<ModuleMenuDTO> menuDTOList = new ArrayList<>();
+        for (ApiModule apiModule : apiModules) {
+            ModuleMenuDTO menuDTO = new ModuleMenuDTO(apiModule.getModuleName(), apiModule.getModuleCode(), apiModule.getCIcon(), apiModule.getCHref(), getMenus(apiModule.getModuleCode()));
+            menuDTOList.add(menuDTO);
+        }
+        return ApiResult.success(menuDTOList);
     }
 
-    @GetMapping("/menus")
-    public List<ApiMenus> menus(@RequestParam String moduleCode) {
+
+    public List<ApiMenus> getMenus(String moduleCode) {
         QueryWrapper<ApiMenus> queryWrapper = new QueryWrapper<>();
         queryWrapper.eq("module_code", moduleCode);
         return menusService.list(queryWrapper);
     }
-
-    @GetMapping("/me")
-    public ApiUser me(HttpSession session) {
-        return (ApiUser) session.getAttribute("Authorization");
-    }
 }