重写复现方法

src/main/java/com/mini/capi/sys/controller/LoginController.java

@@ -4,11 +4,11 @@ import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
 import com.mini.capi.biz.domain.ApiMenus;
 import com.mini.capi.biz.domain.ApiModule;
 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.auth.Result;
-import com.mini.capi.sys.service.PortalService;
 import jakarta.annotation.Resource;
-import jakarta.servlet.http.HttpServletRequest;
 import jakarta.servlet.http.HttpSession;
 import lombok.Data;
 import org.springframework.web.bind.annotation.*;
@@ -27,7 +27,10 @@ public class LoginController {
     private ApiUserService userService;
 
     @Resource
-    private PortalService portalService;
+    private ApiModuleService moduleService;
+
+    @Resource
+    private ApiMenusService menusService;
 
 
     @Data
@@ -72,16 +75,18 @@ public class LoginController {
 
     @GetMapping("/modules")
     public List<ApiModule> modules() {
-        return portalService.listModules();
+        return moduleService.list();
     }
 
     @GetMapping("/menus")
     public List<ApiMenus> menus(@RequestParam String moduleCode) {
-        return portalService.listMenus(moduleCode);
+        QueryWrapper<ApiMenus> queryWrapper = new QueryWrapper<>();
+        queryWrapper.eq("module_code", moduleCode);
+        return menusService.list(queryWrapper);
     }
 
     @GetMapping("/me")
-    public ApiUser me(HttpServletRequest request) {
-        return portalService.currentUser(request);
+    public ApiUser me(HttpSession session) {
+        return (ApiUser) session.getAttribute("Authorization");
     }
 }

src/main/java/com/mini/capi/sys/controller/LoginPageController.java

@@ -13,10 +13,18 @@ public class LoginPageController {
 
 
     /**
-     * 首页
+     * 主页
      */
     @GetMapping("/welcome")
     public String welcomePage() {
         return "forward:/views/demo.html";
     }
+
+    /**
+     * 系统首页-控制台
+     */
+    @GetMapping("/home")
+    public String homePage() {
+        return "forward:/views/home.html";
+    }
 }

src/main/java/com/mini/capi/sys/service/PortalService.java

@@ -1,95 +0,0 @@
-package com.mini.capi.sys.service;
-
-import com.mini.capi.biz.domain.ApiMenus;
-import com.mini.capi.biz.domain.ApiModule;
-import com.mini.capi.biz.domain.ApiUser;
-import jakarta.servlet.http.HttpServletRequest;
-import jakarta.servlet.http.HttpSession;
-import org.springframework.stereotype.Service;
-
-import java.util.Arrays;
-import java.util.List;
-import java.util.stream.Collectors;
-
-@Service
-public class PortalService {
-
-
-    private final List<ApiModule> modules = Arrays.asList(
-            createModule("m1","API管理","API","fa-code","#api"),
-            createModule("m2","邮件管理","MAIL","fa-envelope","#mail"),
-            createModule("m3","数据管理","DATA","fa-database","#data"),
-            createModule("m4","系统管理","SYS","fa-cog","#system")
-    );
-
-    private final List<ApiMenus> menus = Arrays.asList(
-            // API
-            createMenu("m1-1","新增API","API_ADD","fa-plus-circle","#api/add","API"),
-            createMenu("m1-2","API列表","API_LIST","fa-list","#api/list","API"),
-            createMenu("m1-3","调用统计","API_STAT","fa-bar-chart","#api/stat","API"),
-            createMenu("m1-4","密钥管理","API_KEY","fa-key","#api/key","API"),
-            createMenu("m1-5","权限设置","API_PERM","fa-shield","#api/perm","API"),
-            createMenu("m1-6","调用记录","API_LOG","fa-history","#api/log","API"),
-
-            // MAIL
-            createMenu("m2-1","发送邮件","MAIL_SEND","fa-pencil","#mail/send","MAIL"),
-            createMenu("m2-2","收件箱","MAIL_INBOX","fa-inbox","#mail/inbox","MAIL"),
-            createMenu("m2-3","已发送","MAIL_SENT","fa-paper-plane","#mail/sent","MAIL"),
-            createMenu("m2-4","垃圾箱","MAIL_TRASH","fa-trash","#mail/trash","MAIL"),
-            createMenu("m2-5","星标邮件","MAIL_STAR","fa-star","#mail/star","MAIL"),
-            createMenu("m2-6","邮件设置","MAIL_SET","fa-cog","#mail/set","MAIL"),
-
-            // DATA
-            createMenu("m3-1","数据列表","DATA_LIST","fa-table","#data/list","DATA"),
-            createMenu("m3-2","数据筛选","DATA_FILTER","fa-filter","#data/filter","DATA"),
-            createMenu("m3-3","数据导出","DATA_EXPORT","fa-download","#data/export","DATA"),
-            createMenu("m3-4","数据导入","DATA_IMPORT","fa-upload","#data/import","DATA"),
-            createMenu("m3-5","数据分析","DATA_ANALYZE","fa-bar-chart","#data/analyze","DATA"),
-            createMenu("m3-6","操作记录","DATA_LOG","fa-history","#data/log","DATA"),
-
-            // SYS
-            createMenu("m4-1","用户管理","SYS_USER","fa-user","#sys/user","SYS"),
-            createMenu("m4-2","角色权限","SYS_ROLE","fa-users","#sys/role","SYS"),
-            createMenu("m4-3","系统设置","SYS_SET","fa-sliders","#sys/set","SYS"),
-            createMenu("m4-4","插件管理","SYS_PLUGIN","fa-plug","#sys/plugin","SYS"),
-            createMenu("m4-5","安全中心","SYS_SECURE","fa-shield","#sys/secure","SYS"),
-            createMenu("m4-6","关于系统","SYS_ABOUT","fa-info-circle","#sys/about","SYS")
-    );
-
-    public List<ApiModule> listModules() {
-        return modules;
-    }
-
-    public List<ApiMenus> listMenus(String moduleCode) {
-        return menus.stream()
-                .filter(m -> m.getModuleCode().equalsIgnoreCase(moduleCode))
-                .collect(Collectors.toList());
-    }
-
-    public ApiUser currentUser(HttpServletRequest request) {
-        HttpSession session = request.getSession();
-        return (ApiUser) session.getAttribute("Authorization");
-    }
-
-    /* ---------- helper ---------- */
-    private ApiModule createModule(String id, String name, String code, String icon, String href) {
-        ApiModule m = new ApiModule();
-        m.setModuleId(id);
-        m.setModuleName(name);
-        m.setModuleCode(code);
-        m.setCIcon(icon);
-        m.setCHref(href);
-        return m;
-    }
-
-    private ApiMenus createMenu(String id, String name, String code, String icon, String href, String moduleCode) {
-        ApiMenus m = new ApiMenus();
-        m.setMenuId(id);
-        m.setMenuName(name);
-        m.setMenuCode(code);
-        m.setCIcon(icon);
-        m.setCHref(href);
-        m.setModuleCode(moduleCode);
-        return m;
-    }
-}

src/main/resources/static/views/demo.html

@@ -56,6 +56,14 @@
                 animation: fadeOut 0.3s ease-in forwards;
             }
 
+            .tab-active {
+                @apply bg-white text-primary border-b-2 border-primary;
+            }
+
+            .tab-inactive {
+                @apply bg-gray-100 text-gray-600 hover:bg-gray-200;
+            }
+
             @keyframes fadeIn {
                 from {
                     opacity: 0;
@@ -80,9 +88,8 @@
     </style>
 </head>
 <body class="bg-neutral min-h-screen font-sans text-dark overflow-x-hidden">
-<!-- 顶部导航栏 - 优化Flex布局，确保Logo左、用户右、菜单居中 -->
 <!-- 顶部导航栏 -->
-<header class="bg-white shadow-sm sticky top-0 z-40 h-16">
+<header class="bg-gradient-to-r from-blue-100 to-sky-200 shadow-sm sticky top-0 z-40 h-16">
     <div class="flex items-center h-full px-6">
         <!-- 1. 系统 Logo + 名称：最左侧固定 -->
         <div class="flex items-center space-x-3 flex-shrink-0">
@@ -93,8 +100,7 @@
         </div>
 
         <!-- 2. 模块导航：中间自适应 -->
-        <nav class="flex-1 flex justify-center items-center space-x-1"
-             id="moduleContainer">
+        <nav class="flex-1 flex justify-center items-center space-x-1" id="moduleContainer">
             <!-- 动态加载的模块 -->
             <div class="menu-item menu-item-inactive" id="loadingModules">
                 <i class="fa fa-spinner fa-spin text-lg"></i>
@@ -111,10 +117,8 @@
             </div>
 
             <!-- 下拉菜单内容 -->
-            <div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 hidden z-50 border border-gray-100"
-                 id="adminMenu">
-                <a href="#"
-                   class="flex items-center gap-2 px-4 py-2 text-sm hover:bg-light transition-colors duration-200">
+            <div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 hidden z-50 border border-gray-100" id="adminMenu">
+                <a href="#" id="logoutBtn" class="flex items-center gap-2 px-4 py-2 text-sm hover:bg-light transition-colors duration-200">
                     <i class="fa fa-sign-out text-gray-500"></i>
                     <span>退出系统</span>
                 </a>
@@ -123,28 +127,42 @@
     </div>
 </header>
 
-<!-- 主内容区 - 保持不变 -->
-<main class="container mx-auto px-6 py-8">
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+<!-- 标签栏 -->
+<div class="bg-gradient-to-r from-blue-50 to-sky-100 border-b">
+    <div class="flex items-center">
+        <div class="flex-1 flex items-center space-x-1 px-4" id="tabContainer">
+            <!-- 默认显示控制台标签 -->
+            <div class="tab-active px-4 py-2 cursor-pointer flex items-center space-x-2" data-tab-id="console">
+                <span>控制台</span>
+                <i class="fa fa-home"></i>
+            </div>
+        </div>
+        <button id="closeAllTabs" class="px-4 py-2 text-red-600 hover:bg-red-50 transition-colors">
+            <i class="fa fa-times-circle"></i> 关闭全部
+        </button>
+    </div>
+</div>
+
+<!-- 主内容区 -->
+<main class="flex-1 bg-white">
+    <div class="h-full">
+        <iframe id="contentFrame" src="home" class="w-full h-[calc(100vh-120px)] border-0"></iframe>
     </div>
 </main>
 
-<!-- 弹窗背景遮罩 - 保持不变 -->
-<div id="modalOverlay"
-     class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 hidden opacity-0 transition-opacity duration-300"></div>
+<!-- 弹窗背景遮罩 -->
+<div id="modalOverlay" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 hidden opacity-0 transition-opacity duration-300"></div>
 
-<!-- 动态菜单弹窗 - 保持不变 -->
-<div id="dynamicModal" class="fixed w-[600px] bg-white rounded-xl shadow-xl z-50 hidden">
-    <div class="p-6 border-b">
-        <div class="flex justify-between items-center">
-            <h3 class="text-lg font-semibold flex items-center" id="modalTitle">
-                <i class="modal-icon fa text-primary mr-2"></i>
-                <span id="modalModuleName"></span>
-            </h3>
-            <button class="modal-close text-gray-400 hover:text-gray-600">
-                <i class="fa fa-times"></i>
-            </button>
-        </div>
+<!-- 动态菜单弹窗 -->
+<div id="dynamicModal" class="fixed bg-white rounded-xl shadow-xl z-50 hidden" style="width: 70%; left: 15%; top: 10%;">
+    <div class="p-6 border-b flex justify-between items-center">
+        <h3 class="text-lg font-semibold flex items-center" id="modalTitle">
+            <i class="modal-icon fa text-primary mr-2"></i>
+            <span id="modalModuleName"></span>
+        </h3>
+        <button class="modal-close text-gray-400 hover:text-gray-600">
+            <i class="fa fa-times"></i>
+        </button>
     </div>
     <div class="p-6" id="menuContainer">
         <!-- 菜单将在这里动态加载 -->
@@ -154,8 +172,27 @@
     </div>
 </div>
 
+<!-- 退出确认弹窗 -->
+<div id="logoutModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-[60] hidden flex items-center justify-center">
+    <div class="bg-white rounded-xl shadow-xl w-96 p-6">
+        <h3 class="text-lg font-semibold mb-4 flex items-center">
+            <i class="fa fa-exclamation-triangle text-yellow-500 mr-2"></i>
+            确认退出
+        </h3>
+        <p class="text-gray-600 mb-6">您确定要退出系统吗？</p>
+        <div class="flex justify-end space-x-3">
+            <button id="cancelLogout" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors">
+                取消
+            </button>
+            <button id="confirmLogout" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
+                确认退出
+            </button>
+        </div>
+    </div>
+</div>
+
 <script>
-    // 模拟API请求函数 - 保持不变
+    // 模拟API请求函数
     const api = {
         getModules: () =>
             fetch('Sys/login/modules').then(res => res.json()),
@@ -167,7 +204,13 @@
             fetch('Sys/login/me').then(res => res.json())
     };
 
-    // 页面逻辑 - 仅优化管理员区域渲染时的对齐方式
+    // 标签管理
+    let tabs = [
+        { id: 'console', name: '控制台', url: 'home', closable: false }
+    ];
+    let activeTabId = 'console';
+
+    // 页面逻辑
     document.addEventListener('DOMContentLoaded', function () {
         const moduleContainer = document.getElementById('moduleContainer');
         const adminContainer = document.getElementById('adminContainer');
@@ -178,13 +221,38 @@
         const dynamicModal = document.getElementById('dynamicModal');
         const modalOverlay = document.getElementById('modalOverlay');
         const modalCloseButtons = document.querySelectorAll('.modal-close');
+        const tabContainer = document.getElementById('tabContainer');
+        const contentFrame = document.getElementById('contentFrame');
+        const closeAllTabsBtn = document.getElementById('closeAllTabs');
+        const logoutBtn = document.getElementById('logoutBtn');
+        const logoutModal = document.getElementById('logoutModal');
+        const cancelLogout = document.getElementById('cancelLogout');
+        const confirmLogout = document.getElementById('confirmLogout');
 
-        // 加载模块列表 - 保持不变
+        // 加载模块列表
         loadModules();
 
-        // 加载当前用户信息 - 优化用户区域对齐（右对齐）
+        // 加载当前用户信息
         loadCurrentUser();
 
+        // 关闭全部标签页事件
+        closeAllTabsBtn.addEventListener('click', closeAllTabs);
+
+        // 退出系统相关事件
+        logoutBtn.addEventListener('click', function(e) {
+            e.preventDefault();
+            document.getElementById('adminMenu').classList.add('hidden');
+            logoutModal.classList.remove('hidden');
+        });
+
+        cancelLogout.addEventListener('click', function() {
+            logoutModal.classList.add('hidden');
+        });
+
+        confirmLogout.addEventListener('click', function() {
+            window.location.href = '/logout';
+        });
+
         async function loadModules() {
             try {
                 const modules = await api.getModules();
@@ -198,9 +266,9 @@
                     moduleElement.setAttribute('data-module-icon', module.cicon);
 
                     moduleElement.innerHTML = `
-              <i class="fa ${module.cicon} text-lg"></i>
-              <span>${module.moduleName}</span>
-            `;
+                        <i class="fa ${module.cicon} text-lg"></i>
+                        <span>${module.moduleName}</span>
+                    `;
 
                     moduleElement.addEventListener('click', function () {
                         const moduleCode = this.getAttribute('data-module-code');
@@ -213,67 +281,70 @@
                 });
             } catch (error) {
                 moduleContainer.innerHTML = `
-            <div class="menu-item menu-item-inactive text-red-500">
-              <i class="fa fa-exclamation-circle text-lg"></i>
-              <span>模块加载失败</span>
-            </div>
-          `;
+                    <div class="menu-item menu-item-inactive text-red-500">
+                        <i class="fa fa-exclamation-circle text-lg"></i>
+                        <span>模块加载失败</span>
+                    </div>
+                `;
                 console.error('加载模块失败:', error);
             }
         }
 
-        // 优化点：管理员区域渲染时保持右对齐
         async function loadCurrentUser() {
             try {
                 const user = await api.getCurrentUser();
 
-                // 关键优化：用户信息区域采用justify-end右对齐
                 adminContainer.innerHTML = `
-            <div class="menu-item menu-item-inactive flex items-center justify-end cursor-pointer" id="adminUser">
-              <i class="fa fa-user-circle text-xl"></i>
-              <span class="ml-2">${user.uname}</span>
-              <i class="fa fa-angle-down ml-1"></i>
-            </div>
+                    <div class="menu-item menu-item-inactive flex items-center justify-end cursor-pointer" id="adminUser">
+                        <i class="fa fa-user-circle text-xl"></i>
+                        <span class="ml-2">${user.uname}</span>
+                        <i class="fa fa-angle-down ml-1"></i>
+                    </div>
 
-            <div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 hidden z-50 border border-gray-100" id="adminMenu">
-              <a href="#" class="flex items-center gap-2 px-4 py-2 text-sm hover:bg-light transition-colors duration-200">
-                <i class="fa fa-sign-out text-gray-300"></i>
-                <span>退出系统</span>
-              </a>
-            </div>
-          `;
+                    <div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 hidden z-50 border border-gray-100" id="adminMenu">
+                        <a href="#" id="logoutBtn" class="flex items-center gap-2 px-4 py-2 text-sm hover:bg-light transition-colors duration-200">
+                            <i class="fa fa-sign-out text-gray-300"></i>
+                            <span>退出系统</span>
+                        </a>
+                    </div>
+                `;
 
-                // 重新绑定管理员下拉菜单事件
                 const adminUser = document.getElementById('adminUser');
                 const adminMenu = document.getElementById('adminMenu');
+                const newLogoutBtn = document.getElementById('logoutBtn');
 
                 adminUser.addEventListener('click', function (e) {
                     e.stopPropagation();
                     adminMenu.classList.toggle('hidden');
                 });
+
+                newLogoutBtn.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    adminMenu.classList.add('hidden');
+                    logoutModal.classList.remove('hidden');
+                });
             } catch (error) {
                 adminContainer.innerHTML = `
-            <div class="menu-item menu-item-inactive flex items-center justify-end text-red-500">
-              <i class="fa fa-user-circle text-xl"></i>
-              <span class="ml-2">用户信息加载失败</span>
-              <i class="fa fa-angle-down ml-1"></i>
-            </div>
-          `;
+                    <div class="menu-item menu-item-inactive flex items-center justify-end text-red-500">
+                        <i class="fa fa-user-circle text-xl"></i>
+                        <span class="ml-2">用户信息加载失败</span>
+                        <i class="fa fa-angle-down ml-1"></i>
+                    </div>
+                `;
                 console.error('加载用户信息失败:', error);
             }
         }
 
-        // 显示模块菜单 - 保持不变
         async function showModuleMenus(moduleCode, moduleName, moduleIcon, menuItemElement) {
             try {
                 modalModuleName.textContent = `${moduleName}菜单`;
                 modalIcon.className = `modal-icon fa ${moduleIcon} text-primary mr-2`;
 
                 menuContainer.innerHTML = `
-            <div class="flex justify-center items-center h-40">
-              <i class="fa fa-spinner fa-spin text-2xl text-gray-400"></i>
-            </div>
-          `;
+                    <div class="flex justify-center items-center h-40">
+                        <i class="fa fa-spinner fa-spin text-2xl text-gray-400"></i>
+                    </div>
+                `;
 
                 const menus = await api.getMenusByModuleCode(moduleCode);
 
@@ -282,23 +353,23 @@
 
                     menus.forEach(menu => {
                         menuHtml += `
-                <button class="flex flex-col items-center justify-center p-4 border border-gray-100 rounded-lg hover:border-primary hover:bg-primary/5 transition-colors"
-                        onclick="window.location.href='${menu.chref}'">
-                  <i class="fa ${menu.cicon} text-primary text-2xl mb-2"></i>
-                  <span>${menu.menuName}</span>
-                </button>
-              `;
+                            <button class="flex flex-col items-center justify-center p-4 border border-gray-100 rounded-lg hover:border-primary hover:bg-primary/5 transition-colors"
+                                    onclick="openTab('${menu.menuCode}', '${menu.menuName}', '${menu.chref}')">
+                                <i class="fa ${menu.cicon} text-primary text-2xl mb-2"></i>
+                                <span>${menu.menuName}</span>
+                            </button>
+                        `;
                     });
 
                     menuHtml += '</div>';
                     menuContainer.innerHTML = menuHtml;
                 } else {
                     menuContainer.innerHTML = `
-              <div class="flex flex-col justify-center items-center h-40 text-gray-500">
-                <i class="fa fa-folder-open-o text-3xl mb-2"></i>
-                <p>该模块暂无菜单</p>
-              </div>
-            `;
+                        <div class="flex flex-col justify-center items-center h-40 text-gray-500">
+                            <i class="fa fa-folder-open-o text-3xl mb-2"></i>
+                            <p>该模块暂无菜单</p>
+                        </div>
+                    `;
                 }
 
                 document.querySelectorAll('.menu-item').forEach(item => {
@@ -308,17 +379,6 @@
                 menuItemElement.classList.remove('menu-item-inactive');
                 menuItemElement.classList.add('menu-item-active');
 
-                const rect = menuItemElement.getBoundingClientRect();
-                const windowWidth = window.innerWidth;
-
-                let leftPos = rect.left + window.scrollX;
-                if (leftPos + 600 > windowWidth) {
-                    leftPos = windowWidth - 620;
-                }
-
-                dynamicModal.style.top = (rect.bottom + window.scrollY + 10) + 'px';
-                dynamicModal.style.left = leftPos + 'px';
-
                 dynamicModal.classList.remove('hidden');
                 dynamicModal.classList.add('modal-enter');
                 modalOverlay.classList.remove('hidden');
@@ -330,39 +390,100 @@
                 document.body.style.overflow = 'hidden';
             } catch (error) {
                 menuContainer.innerHTML = `
-            <div class="flex flex-col justify-center items-center h-40 text-red-500">
-              <i class="fa fa-exclamation-circle text-3xl mb-2"></i>
-              <p>菜单加载失败</p>
-            </div>
-          `;
+                    <div class="flex flex-col justify-center items-center h-40 text-red-500">
+                        <i class="fa fa-exclamation-circle text-3xl mb-2"></i>
+                        <p>菜单加载失败</p>
+                    </div>
+                `;
                 console.error('加载菜单失败:', error);
             }
         }
 
-        // 关闭弹窗 - 保持不变
-        function closeModal() {
-            const activeModal = document.querySelector('.modal-enter');
-            if (activeModal) {
-                activeModal.classList.remove('modal-enter');
-                activeModal.classList.add('modal-exit');
+        function openTab(id, name, url) {
+            // 检查是否已存在该标签
+            const existingTab = tabs.find(tab => tab.id === id);
+            if (existingTab) {
+                switchTab(id);
+            } else {
+                // 添加新标签
+                tabs.push({ id, name, url, closable: true });
+                renderTabs();
+                switchTab(id);
+            }
+            closeModal();
+        }
 
-                modalOverlay.style.opacity = '0';
+        function renderTabs() {
+            tabContainer.innerHTML = '';
+            tabs.forEach(tab => {
+                const tabElement = document.createElement('div');
+                tabElement.className = `px-4 py-2 cursor-pointer flex items-center space-x-2 border-b-2 transition-colors ${
+                    tab.id === activeTabId ? 'bg-white text-primary border-primary' : 'bg-gray-100 text-gray-600 hover:bg-gray-200 border-transparent'
+                }`;
+                tabElement.setAttribute('data-tab-id', tab.id);
 
-                setTimeout(() => {
-                    activeModal.classList.add('hidden');
-                    activeModal.classList.remove('modal-exit');
-                    modalOverlay.classList.add('hidden');
-                    document.body.style.overflow = '';
+                tabElement.innerHTML = `
+                    <span>${tab.name}</span>
+                    ${tab.closable ? `<i class="fa fa-times text-xs hover:bg-red-100 hover:text-red-600 rounded-full p-1" onclick="event.stopPropagation(); closeTab('${tab.id}')"></i>` : `<i class="fa fa-home"></i>`}
+                `;
 
-                    document.querySelectorAll('.menu-item').forEach(menu => {
-                        menu.classList.remove('menu-item-active');
-                        menu.classList.add('menu-item-inactive');
-                    });
-                }, 300);
+                tabElement.addEventListener('click', () => switchTab(tab.id));
+                tabContainer.appendChild(tabElement);
+            });
+        }
+
+        function switchTab(id) {
+            activeTabId = id;
+            const activeTab = tabs.find(tab => tab.id === id);
+            if (activeTab) {
+                contentFrame.src = activeTab.url;
+                renderTabs();
             }
         }
 
-        // 弹窗关闭事件 - 保持不变
+        function closeTab(id) {
+            if (id === 'console') return; // 控制台不能关闭
+
+            const tabIndex = tabs.findIndex(tab => tab.id === id);
+            if (tabIndex !== -1) {
+                tabs.splice(tabIndex, 1);
+
+                if (activeTabId === id) {
+                    // 如果关闭的是当前标签，切换到控制台
+                    activeTabId = 'console';
+                    contentFrame.src = 'home';
+                }
+
+                renderTabs();
+            }
+        }
+
+        function closeAllTabs() {
+            tabs = tabs.filter(tab => tab.id === 'console');
+            activeTabId = 'console';
+            contentFrame.src = 'home';
+            renderTabs();
+        }
+
+        function closeModal() {
+            dynamicModal.classList.add('hidden');
+            dynamicModal.classList.remove('modal-enter');
+            modalOverlay.classList.add('hidden');
+            modalOverlay.style.opacity = '0';
+            document.body.style.overflow = 'auto';
+
+            // 移除所有模块的激活状态
+            document.querySelectorAll('.menu-item').forEach(item => {
+                item.classList.remove('menu-item-active');
+                item.classList.add('menu-item-inactive');
+            });
+        }
+
+        // 将函数暴露到全局作用域
+        window.openTab = openTab;
+        window.closeTab = closeTab;
+
+        // 弹窗关闭事件
         modalCloseButtons.forEach(button => {
             button.addEventListener('click', closeModal);
         });
@@ -372,36 +493,17 @@
         document.addEventListener('keydown', function (e) {
             if (e.key === 'Escape') {
                 closeModal();
+                logoutModal.classList.add('hidden');
             }
         });
 
-        // 下拉菜单关闭事件 - 保持不变
+        // 下拉菜单关闭事件
         document.addEventListener('click', function () {
             const adminMenu = document.getElementById('adminMenu');
             if (adminMenu) {
                 adminMenu.classList.add('hidden');
             }
         });
-
-        // 窗口 resize 事件 - 保持不变
-        window.addEventListener('resize', function () {
-            const activeModal = document.querySelector('.modal-enter');
-            if (activeModal) {
-                const activeMenuItem = document.querySelector('.menu-item-active');
-                if (activeMenuItem) {
-                    const rect = activeMenuItem.getBoundingClientRect();
-                    const windowWidth = window.innerWidth;
-
-                    let leftPos = rect.left + window.scrollX;
-                    if (leftPos + 600 > windowWidth) {
-                        leftPos = windowWidth - 620;
-                    }
-
-                    activeModal.style.top = (rect.bottom + window.scrollY + 10) + 'px';
-                    activeModal.style.left = leftPos + 'px';
-                }
-            }
-        });
     });
 </script>
 </body>

src/main/resources/static/views/home.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+
+</body>
+</html>