initial commit

2026-05-23 09:11:46 +08:00
commit 5d08480921
42 changed files with 10615 additions and 0 deletions
--- a/web/src/pages/app/layout.ts
+++ b/web/src/pages/app/layout.ts
@@ -0,0 +1,109 @@
+import { w2layout, w2ui } from "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";
+  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>
+          <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>
+              <h2>模型列表</h2>
+              <p id="modelCount">0 个模型</p>
+            </div>
+            <div class="content-actions">
+              ${isAdmin ? `<button id="manageUsersBtn" type="button">人员权限</button>` : ""}
+              ${isAdmin ? `<button id="manageDictionariesBtn" type="button">字典维护</button>` : ""}
+              ${isAdmin ? `<button id="addModelBtn" class="primary-btn" type="button">增加模型</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>
+          </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: 300,
+        minSize: 220,
+        resizable: true,
+        overflow: "hidden",
+        html: treeTemplate.innerHTML
+      },
+      {
+        type: "main",
+        overflow: "hidden",
+        html: modelTemplate.innerHTML
+      }
+    ]
+  });
+
+  layout.render(workspace);
+}