SEEC-IDE/src/extensions/init.tsx

import molecule from "@dtinsight/molecule";
import {ColorThemeMode, IActivityMenuItemProps, IEditorGroup} from "@dtinsight/molecule/esm/model";
import {
    DRAWER_MENU_ENUM,
    FOLDERTREE_SUBMIT_TOOLBAR,
    ID_COLLECTIONS,
    OPEN_IN_NEW_GROUP,
    QUESTION_LIST_PANEL
} from "../constant";
import {UniqueId} from "@dtinsight/molecule/esm/common/types";
import {IExtension} from "@dtinsight/molecule/esm/model/extension";
import LogPane from "@/components/logPane";
import {store} from "@/redux/store";
import {jumpToLogin} from "@/services/auth";
import Api from "@/api";
import {history} from "umi";
import notification from "@/components/notification";
import {deleteCookie, getQuestion, goToLogin, randomId, submitQuestion, updateAccountContext} from "@/utils";
import {loadUser} from "@/redux/action/action";
import {QuickTogglePanelAction} from "@dtinsight/molecule/esm/monaco/quickTogglePanelAction";
import {Button} from "antd";
import {jumpToCoder} from "@/services/exam";
import classNames from "classnames";
import {transformToEditorTab} from "@/common";
import {QuestionList} from "@/components/questionListPanel";

function loadStyles(url: string) {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = url;
    link.id = 'antd_dark';
    if (!document.getElementById('antd_dark')) {
        const head = document.getElementsByTagName('head')[0];
        head.appendChild(link);
    }
}

function removeStyles() {
    const darkStyle = document.querySelector('#antd_dark');
    darkStyle?.remove();
}

export default class InitializeExtension implements IExtension {
    id: UniqueId = 'initialize';
    name: string = 'initialize';

    activate(): void {
        const { CONTEXT_MENU_SEARCH } = molecule.builtin.getConstants();
        molecule.activityBar.remove([CONTEXT_MENU_SEARCH!]);
        initializeColorTheme();
        initMenuBar();
        initLogin();
        initializeEntry();
        initExpandCollapse();
        initExplorer();
        // 默认不展示 Panel
    }

    dispose(): void {
        throw new Error('Method not implemented.');
    }
}

function initializeColorTheme() {
    const defaultThemeId = localStorage.getItem(ID_COLLECTIONS.COLOR_THEME_ID);
    const defaultTheme = defaultThemeId && molecule.colorTheme.getThemeById(defaultThemeId);
    if (defaultTheme) {
        molecule.colorTheme.setTheme(defaultTheme.id);
    } else {
        molecule.colorTheme.setTheme('Default Light+');
    }

    const currentThemeMode = molecule.colorTheme.getColorThemeMode();
    if (currentThemeMode === ColorThemeMode.dark) {
        loadStyles('https://unpkg.com/antd@4.20.3/dist/antd.dark.css');
    }
    document.documentElement.setAttribute('data-prefers-color', currentThemeMode);

    molecule.colorTheme.onChange((_, nextTheme, themeMode) => {
        localStorage.setItem(ID_COLLECTIONS.COLOR_THEME_ID, nextTheme.id);
        document.documentElement.setAttribute('data-prefers-color', themeMode);

        if (themeMode === ColorThemeMode.dark) {
            loadStyles('https://unpkg.com/antd@4.20.3/dist/antd.dark.css');
        } else {
            removeStyles();
        }
    });
}

function initMenuBar() {
    molecule.menuBar.remove('Run');
    molecule.menuBar.remove('Help');
    molecule.menuBar.remove('workbench.action.quickCreateFile')
    molecule.menuBar.remove(QuickTogglePanelAction.ID)
    molecule.layout.setMenuBarMode('horizontal');
    const state = molecule.menuBar.getState();
    const nextData = state.data.concat();
    nextData.splice(1, 0, {
        id: 'seecoder',
        name: 'Seecoder',
        data: [
            {
                id: DRAWER_MENU_ENUM.RESULT,
                name: 'Result'
            },
            {
                id: DRAWER_MENU_ENUM.SUBMIT,
                name: 'Submit'
            }
        ],
    });
    molecule.menuBar.setState({
        data: nextData,
    });
}

function initExpandCollapse() {
    const { SAMPLE_FOLDER_PANEL_ID } = molecule.builtin.getConstants();
    molecule.explorer.setExpandedPanels([SAMPLE_FOLDER_PANEL_ID!, QUESTION_LIST_PANEL.id]);
}

function initExplorer() {
    molecule.explorer.addPanel({
        ...QUESTION_LIST_PANEL,
        renderPanel:() => (
            <QuestionList store={store}/>
        ),
    })
    const explorerData = molecule.explorer.getState().data?.concat() || [];
    const { SAMPLE_FOLDER_PANEL_ID } = molecule.builtin.getConstants();
    const folderTreePane = explorerData.find((item) => item.id === SAMPLE_FOLDER_PANEL_ID);

    molecule.explorer.onPanelToolbarClick((panel, toolbarId)=>{
        switch (toolbarId) {
            case FOLDERTREE_SUBMIT_TOOLBAR.id:
                submitQuestion()
                break;
            default:
                break;
        }
    })
    if (folderTreePane?.toolbar) {
        folderTreePane.toolbar[0] = folderTreePane.toolbar[2]
        folderTreePane.toolbar[1] = folderTreePane.toolbar[3]
        folderTreePane.toolbar[2] = FOLDERTREE_SUBMIT_TOOLBAR
        folderTreePane.toolbar.pop()
    }
    molecule.explorer.setState({
        data: explorerData,
    });
    molecule.explorer.onPanelToolbarClick((panel, toolbarId) => {
        if (toolbarId === "refresh" && store.getState().loadQuestion.examId) {
            const groups = molecule.editor.getState().groups
            groups?.forEach((group) => {
                molecule.editor.closeAll(group.id)
            })
            getQuestion(store.getState().loadQuestion.examId as unknown as string, "");
        }
    })
    molecule.explorer.onCollapseAllFolders(() => {
        molecule.folderTree.setExpandKeys([]);
    });
    molecule.editorTree.onCloseSaved((groupId) => {
        molecule.editor.closeAll(groupId);
    });
    molecule.folderTree.setFileContextMenu([OPEN_IN_NEW_GROUP])
    molecule.folderTree.onContextMenu((contextMenu, treeNode) => {
        switch (contextMenu.id) {
            case OPEN_IN_NEW_GROUP.id: {
                const { groups = [] } = molecule.editor.getState();
                const id = randomId();
                const initialTab = Object.assign({}, transformToEditorTab(treeNode!));
                const newGroup: IEditorGroup = Object.assign({})
                newGroup.data = [initialTab];
                newGroup.tab = initialTab;
                newGroup.activeTab = initialTab.id;
                newGroup.id = id;
                molecule.editor.setState({
                    current: newGroup,
                    groups: [...groups, newGroup]
                })
                break;
            }
            default:
                break;
        }
    })
    molecule.folderTree.setFolderContextMenu([])
    const folderTreeState = molecule.folderTree.getState()
    const folderTree = folderTreeState?.folderTree
    if (folderTree && folderTreeState && folderTree.contextMenu) folderTree.contextMenu = []
}

function initializeEntry() {
    molecule.folderTree.setEntry(
        <div className={classNames('mt-20px', 'text-center')}>
            {'Go to '}
            <Button
                type="link"
                onClick={() => jumpToCoder()}
                style={{padding: 0}}
            >
                Coder
            </Button>
            {' to select an exam'}
        </div>,
    );
}

function initLogin() {
    const userName = store.getState().loadUser.username
    updateAccountContext(
        userName?
            [
                {
                    id: 'username',
                    disabled: !!userName,
                    icon: 'person',
                    name: userName,
            },
                {
                    id: 'divider',
                    type: 'divider',
                },
                {
                    id: 'logout',
                    icon: 'log-out',
                    name: 'Log Out',
                    onClick: () => {
                        store.dispatch(loadUser({}))
                        deleteCookie('token')
                        window.location.reload();
                    }
                }]
            :[
                {
                id: 'login',
                name: 'Log In',
                icon: 'log-in',
                onClick: () => {
                    goToLogin();
                    },
                }
            ]
    );
}