109 lines
3.7 KiB
TypeScript
109 lines
3.7 KiB
TypeScript
import { w2layout, w2ui } from "../../vendor/w2ui";
|
|
import { getCurrentUser, clearSession } from "../../services/authState";
|
|
import { loadFolders } from "./modules/folders";
|
|
import { bindModelActions } from "./modules/models";
|
|
import { renderLogin } from "../login/login";
|
|
import "./app.css";
|
|
import "./dialogs.css";
|
|
|
|
export async function renderApp() {
|
|
const currentUser = getCurrentUser();
|
|
const isAdmin = currentUser?.role === "admin";
|
|
const isFixedLogin = document.body.dataset.authMode === "fixed";
|
|
document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
|
|
<div class="app-shell">
|
|
<header class="topbar">
|
|
<div>
|
|
<strong>DMT 模型库</strong>
|
|
<span id="folderCrumb">未选择目录</span>
|
|
</div>
|
|
<div class="topbar-actions">
|
|
<span>${currentUser?.username ?? ""}</span>
|
|
${isFixedLogin ? "" : `<button id="logoutBtn" class="icon-text-btn">退出</button>`}
|
|
</div>
|
|
</header>
|
|
<section id="workspaceLayout" class="workspace"></section>
|
|
<template id="treePanelTemplate">
|
|
<aside class="tree-pane">
|
|
<div id="folderTree"></div>
|
|
</aside>
|
|
</template>
|
|
<template id="modelPanelTemplate">
|
|
<main class="content-pane">
|
|
<div class="content-toolbar">
|
|
<div class="content-actions">
|
|
${isAdmin ? `<button id="manageUsersBtn" type="button">人员权限</button>` : ""}
|
|
${isAdmin ? `<button id="manageDictionariesBtn" type="button">字典维护</button>` : ""}
|
|
${isAdmin ? `<button id="addProcessModelBtn" type="button" hidden>上传工艺模型</button>` : ""}
|
|
${isAdmin ? `<button id="addModelBtn1" class="primary-btn" type="button" hidden>增加模型</button>` : ""}
|
|
</div>
|
|
</div>
|
|
<div class="filter-toolbar">
|
|
<label>
|
|
<span>品牌</span>
|
|
<select id="brandFilter">
|
|
<option value="">全部品牌</option>
|
|
</select>
|
|
</label>
|
|
<label>
|
|
<span>类型</span>
|
|
<select id="typeFilter">
|
|
<option value="">全部类型</option>
|
|
</select>
|
|
</label>
|
|
<label class="keyword-filter">
|
|
<span>关键字</span>
|
|
<input id="keywordFilter" placeholder="模型名 / 文件名 / 属性" />
|
|
</label>
|
|
<button id="resetFilterBtn" type="button">重置</button>
|
|
<button id="addModelBtn" class="primary-btn" type="button">增加模型</button>
|
|
</div>
|
|
<div id="modelGrid" class="model-grid"></div>
|
|
<footer id="modelPagination" class="pagination"></footer>
|
|
</main>
|
|
</template>
|
|
</div>
|
|
`;
|
|
|
|
renderWorkspaceLayout();
|
|
|
|
document.querySelector("#logoutBtn")?.addEventListener("click", () => {
|
|
clearSession();
|
|
renderLogin(renderApp);
|
|
});
|
|
|
|
bindModelActions();
|
|
await loadFolders();
|
|
}
|
|
|
|
function renderWorkspaceLayout() {
|
|
const workspace = document.querySelector<HTMLDivElement>("#workspaceLayout")!;
|
|
const treeTemplate = document.querySelector<HTMLTemplateElement>("#treePanelTemplate")!;
|
|
const modelTemplate = document.querySelector<HTMLTemplateElement>("#modelPanelTemplate")!;
|
|
const existingLayout = w2ui.modelLibraryLayout;
|
|
if (existingLayout?.destroy) {
|
|
existingLayout.destroy();
|
|
}
|
|
const layout = new w2layout({
|
|
name: "modelLibraryLayout",
|
|
padding: 0,
|
|
panels: [
|
|
{
|
|
type: "left",
|
|
size: 180,
|
|
minSize: 150,
|
|
resizable: true,
|
|
overflow: "hidden",
|
|
html: treeTemplate.innerHTML
|
|
},
|
|
{
|
|
type: "main",
|
|
overflow: "hidden",
|
|
html: modelTemplate.innerHTML
|
|
}
|
|
]
|
|
});
|
|
|
|
layout.render(workspace);
|
|
}
|