124 lines
4.7 KiB
HTML
124 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>我的工作台 · 路由拓扑</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body class="admin-page">
|
||
|
||
<div class="console" id="console">
|
||
<!-- ================= 左侧深蓝可收缩侧栏 ================= -->
|
||
<aside class="console-nav">
|
||
<div class="console-brand">
|
||
<div class="logo" id="navLogo">R</div>
|
||
<div class="cb-text"><b>我的工作台</b><i id="navUser">—</i></div>
|
||
<button class="cnav-toggle" id="btnCollapseNav" title="收起 / 展开侧栏">☰</button>
|
||
</div>
|
||
|
||
<div class="cnav-item active" data-view="overview"><span class="ci">📊</span><span class="cl">概览</span></div>
|
||
<div class="cnav-item" data-view="mine"><span class="ci">🗺️</span><span class="cl">我的拓扑</span></div>
|
||
<div class="cnav-item" data-view="shared"><span class="ci">🤝</span><span class="cl">共享给我</span></div>
|
||
<div class="cnav-item" data-view="groups"><span class="ci">👥</span><span class="cl">我的分组</span></div>
|
||
|
||
<div class="cnav-foot">
|
||
<div class="cnav-close" id="btnGotoAdmin" hidden><span class="ci">🛠️</span><span class="cl">管理控制台</span></div>
|
||
<div class="cnav-close" id="btnBackEditor"><span class="ci">←</span><span class="cl">返回拓扑</span></div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- ================= 右侧主区域 ================= -->
|
||
<main class="console-main">
|
||
|
||
<!-- 概览 -->
|
||
<section class="view" id="view-overview">
|
||
<div class="view-head"><h2>概览</h2></div>
|
||
<div class="cards" id="statCards"></div>
|
||
<div class="split">
|
||
<div class="panel">
|
||
<div class="panel-title">我的拓扑 · 最近更新</div>
|
||
<div class="mini-list" id="recentMine"></div>
|
||
</div>
|
||
<div class="panel">
|
||
<div class="panel-title">共享给我</div>
|
||
<div class="mini-list" id="recentShared"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 我的拓扑 -->
|
||
<section class="view" id="view-mine" hidden>
|
||
<div class="view-head">
|
||
<h2>我的拓扑</h2>
|
||
<div class="view-tools">
|
||
<input class="search" id="mineSearch" placeholder="搜索拓扑名称" spellcheck="false">
|
||
<input class="search" id="newTopoName" placeholder="新建拓扑名称" spellcheck="false">
|
||
<select class="search" id="newTopoTemplate"></select>
|
||
<button class="btn primary" id="btnCreateTopo">＋ 新建</button>
|
||
</div>
|
||
</div>
|
||
<div class="table-wrap">
|
||
<table class="grid">
|
||
<thead><tr>
|
||
<th>名称</th><th>可见性</th><th>共享</th><th>节点 / 连线</th><th>更新时间</th><th>操作</th>
|
||
</tr></thead>
|
||
<tbody id="mineRows"></tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 共享给我 -->
|
||
<section class="view" id="view-shared" hidden>
|
||
<div class="view-head">
|
||
<h2>共享给我</h2>
|
||
<div class="view-tools">
|
||
<input class="search" id="sharedSearch" placeholder="搜索拓扑名称" spellcheck="false">
|
||
</div>
|
||
</div>
|
||
<div class="table-wrap">
|
||
<table class="grid">
|
||
<thead><tr>
|
||
<th>名称</th><th>所有者</th><th>我的权限</th><th>节点 / 连线</th><th>更新时间</th><th>操作</th>
|
||
</tr></thead>
|
||
<tbody id="sharedRows"></tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 我的分组 -->
|
||
<section class="view" id="view-groups" hidden>
|
||
<div class="view-head"><h2>我的分组</h2></div>
|
||
<div class="table-wrap">
|
||
<table class="grid">
|
||
<thead><tr><th>分组名称</th><th>描述</th><th>成员数</th></tr></thead>
|
||
<tbody id="groupRows"></tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
</div>
|
||
|
||
<!-- ================= 站内确认 / 输入弹窗 ================= -->
|
||
<div class="overlay" id="confirmOverlay" hidden>
|
||
<div class="dialog">
|
||
<div class="dlg-head"><h2 id="confirmTitle">请确认</h2><span class="dlg-close" id="confirmClose">×</span></div>
|
||
<div class="dlg-msg" id="confirmMsg"></div>
|
||
<label id="confirmFieldWrap" hidden><span id="confirmFieldLabel"></span>
|
||
<input id="confirmField" type="text" spellcheck="false" autocomplete="off">
|
||
</label>
|
||
<div class="dlg-err" id="confirmErr"></div>
|
||
<div class="dlg-actions">
|
||
<button class="btn" id="confirmCancel" type="button">取消</button>
|
||
<button class="btn primary" id="confirmOk" type="button">确定</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="toast" id="toast"></div>
|
||
|
||
<script src="user.js"></script>
|
||
</body>
|
||
</html>
|