CSAPP/src/index.ts

import { ipcRenderer, WebviewTag } from "electron";

// 菜单项
interface MenuItem {
    ShowName: string;
    Url: string;
    IconConfig: IconConfig;
    Children: MenuItem[] | null;
}

// 图标配置
interface IconConfig {
    _1x: {
        Default: string;
        Selected: string;
    };
    _2x: {
        Default: string;
        Selected: string;
    };
}

// API响应接口
interface ApiResponse<T> {
    status: number;
    code: number;
    msg: string;
    data: T;
}

// Tab management
interface Tab {
    id: string;
    title: string;
    url: string;
    webview: WebviewTag;
}

let tabs: Tab[] = [];
let activeTabId: string | null = null;

// Create a new tab
function createTab(title: string, url: string): Tab {
    const id = `tab-${Date.now()}`;
    const tabPane = document.createElement('div');
    tabPane.className = 'tab-pane';
    tabPane.id = `pane-${id}`;

    const webview = document.createElement('webview');
    webview.className = 'page-content';
    webview.setAttribute('autosize', 'on');
    webview.setAttribute('allowpopups', 'true');
    webview.setAttribute('webpreferences', 'contextIsolation=yes, nodeIntegration=no');
    webview.src = url;

    tabPane.appendChild(webview);
    document.getElementById('tabsContent')?.appendChild(tabPane);

    const tab: Tab = {
        id,
        title,
        url,
        webview
    };

    tabs.push(tab);
    return tab;
}

// Create tab header
function createTabHeader(tab: Tab): HTMLLIElement {
    const li = document.createElement('li');
    li.className = 'tab-item';
    li.dataset.tabId = tab.id;

    const titleSpan = document.createElement('span');
    titleSpan.className = 'tab-title';
    titleSpan.textContent = tab.title;

    const closeButton = document.createElement('span');
    closeButton.className = 'tab-close';
    closeButton.textContent = '×';
    closeButton.addEventListener('click', (e) => {
        e.stopPropagation();
        closeTab(tab.id);
    });

    li.appendChild(titleSpan);
    li.appendChild(closeButton);

    li.addEventListener('click', () => {
        activateTab(tab.id);
    });

    return li;
}

// Activate a tab
function activateTab(tabId: string) {
    const tab = tabs.find(t => t.id === tabId);
    if (!tab) return;

    // Update active states
    document.querySelectorAll('.tab-item').forEach(item => {
        item.classList.remove('active');
    });
    document.querySelectorAll('.tab-pane').forEach(pane => {
        pane.classList.remove('active');
    });

    // Activate the selected tab
    const tabElement = document.querySelector(`.tab-item[data-tab-id="${tabId}"]`);
    const paneElement = document.getElementById(`pane-${tabId}`);
    if (tabElement && paneElement) {
        tabElement.classList.add('active');
        paneElement.classList.add('active');
    }

    activeTabId = tabId;
}

// Close a tab
function closeTab(tabId: string) {
    const tabIndex = tabs.findIndex(t => t.id === tabId);
    if (tabIndex === -1) return;

    const tab = tabs[tabIndex];
    const tabElement = document.querySelector(`.tab-item[data-tab-id="${tabId}"]`);
    const paneElement = document.getElementById(`pane-${tabId}`);

    if (tabElement) tabElement.remove();
    if (paneElement) paneElement.remove();

    tabs.splice(tabIndex, 1);

    // If we closed the active tab, activate another one
    if (activeTabId === tabId) {
        if (tabs.length > 0) {
            activateTab(tabs[Math.min(tabIndex, tabs.length - 1)].id);
        } else {
            activeTabId = null;
        }
    }
}

// 检查登录状态
function checkLoginStatus() {
    const cookie = window.electronAPI.getSessionStorage('cookie');
    if (!cookie) {
        window.location.href = 'login.html';
        return;
    }

    // 显示用户信息
    const userInfo = document.getElementById('userInfo');
    if (userInfo) {
        userInfo.textContent = '欢迎使用';
    }
}

// 处理退出登录
function handleLogout() {
    window.electronAPI.removeSessionStorage('cookie');
    window.location.href = 'login.html';
}

// 获取菜单列表
async function getMenuList(): Promise<MenuItem[]> {
    try {
        const response = await fetch('http://1.12.73.211:8848/EIAC_Desktop_Api/api/Menu/GetMenu', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json; charset=utf-8'
            }
        });

        const result = await response.json() as ApiResponse<MenuItem[]>;
        if (result.status === 0) {
            return result.data;
        } else {
            throw new Error(result.msg || '获取菜单失败');
        }
    } catch (error) {
        console.error('获取菜单失败:', error);
        throw error;
    }
}

// Modify the createMenuItem function to handle new tab creation
function createMenuItem(item: MenuItem, menuList: MenuItem[]): HTMLLIElement {
    const li = document.createElement('li');
    li.className = 'menu-item';

    const icon = document.createElement('img');
    icon.src = item.IconConfig._1x.Default;
    icon.alt = item.ShowName;
    icon.className = 'menu-icon';

    const span = document.createElement('span');
    span.textContent = item.ShowName;

    li.appendChild(icon);
    li.appendChild(span);

    if (item.Url) {
        li.addEventListener('click', async () => {
            // Remove active state from other menu items
            document.querySelectorAll('.menu-item').forEach(menuItem => {
                menuItem.classList.remove('active');
                const menuIcon = menuItem.querySelector('.menu-icon') as HTMLImageElement;
                if (menuIcon) {
                    const menuItemData = menuList.find((m: MenuItem) => m.ShowName === menuItem.querySelector('span')?.textContent);
                    if (menuItemData) {
                        menuIcon.src = menuItemData.IconConfig._1x.Default;
                    }
                }
            });

            // Add active state to current menu item
            li.classList.add('active');
            icon.src = item.IconConfig._1x.Selected;

            const url: string = item.Url.startsWith("http") ? item.Url : `http://${item.Url}`;
            const result = await window.electronAPI.checkUrlAvailable(url);
            if (result.ok && result.status >= 200 && result.status < 400) {
                console.log('✅ URL 可访问:', result.status);
                const cookies: string = window.electronAPI.getSessionStorage('cookie');
                await window.electronAPI.setWebviewCookie(url, cookies);

                // Create new tab
                const tab = createTab(item.ShowName, url);
                const tabHeader = createTabHeader(tab);
                document.getElementById('tabsList')?.appendChild(tabHeader);
                activateTab(tab.id);
            } else {
                console.warn('❌ URL 不可访问:', result.error ?? `status ${result.status}`);
                showErrorModal(`无法访问 ${url}\r\n异常原因：${result.error ?? `status ${result.status}`}\r\n请联系10000技术支持。`);
            }
        });
    }

    return li;
}

// 渲染菜单
function renderMenu(menuList: MenuItem[]) {
    const menuContainer = document.getElementById('menuList');
    if (!menuContainer) return;

    menuList.forEach(item => {
        const menuItem = createMenuItem(item, menuList);
        menuContainer.appendChild(menuItem);

        if (item.Children) {
            const subMenu = document.createElement('ul');
            subMenu.className = 'submenu';
            item.Children.forEach(child => {
                const childItem = createMenuItem(child, menuList);
                subMenu.appendChild(childItem);
            });
            menuContainer.appendChild(subMenu);
        }
    });
}

// 显示故障窗口
function showErrorModal(message: string) {
    const errorModal = document.getElementById('errorModal') as HTMLDivElement;
    const errorMessage = document.getElementById('errorMessage') as HTMLParagraphElement;
    errorMessage.textContent = message;
    errorModal.style.display = 'block';
}

// Modify the initialize function to create the first tab
async function initialize() {
    // Check login status
    checkLoginStatus();

    try {
        const menuList = await getMenuList();
        renderMenu(menuList);

        // Create initial tab
        const initialTab = createTab('首页', 'about:blank');
        const tabHeader = createTabHeader(initialTab);
        document.getElementById('tabsList')?.appendChild(tabHeader);
        activateTab(initialTab.id);

        // Bind logout event
        const logoutBtn = document.getElementById('btnLogout');
        if (logoutBtn) {
            logoutBtn.addEventListener('click', handleLogout);
        }

        const errorModal = document.getElementById('errorModal') as HTMLDivElement;
        const closeErrorModal = document.getElementById('closeErrorModal') as HTMLButtonElement;
        // Close button click event
        closeErrorModal.addEventListener('click', (event) => {
            errorModal.style.display = 'none';
        });

        // Click outside to close
        window.addEventListener('click', (event) => {
            if (event.target === errorModal) {
                errorModal.style.display = 'none';
            }
        });
    } catch (error) {
        console.error('初始化失败:', error);
    }
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', initialize);