init

design/src-web/navigation/component.js

@@ -0,0 +1,4 @@
+(() => {
+  window.componentRegistry ||= {};
+  window.componentRegistry["src-web/navigation/index.html"] = {"favorite-drawer":"<div class=\"panel\">\n          <div class=\"panel-heading\"><div class=\"panel-title\">FavoriteDrawer</div><span class=\"spec-chip captured\">FAMILY A</span></div>\n          <div class=\"panel-body\">\n            <div class=\"disclosure favorite-drawer dnf-ui\" data-favorite-drawer><button type=\"button\" class=\"disclosure-head focus\" aria-expanded=\"true\"><span style=\"color:#d47b22\">★</span><span style=\"flex:1\">收藏</span><span class=\"favorite-drawer-state\">已展开</span><span class=\"favorite-drawer-arrow\" aria-hidden=\"true\">▲</span></button><div class=\"disclosure-body\"><div class=\"tree-row\">神圣的黄金增幅书 <span style=\"margin-left:auto\">×</span></div><div class=\"tree-row\">甜蜜果实收纳箱 <span style=\"margin-left:auto\">×</span></div><div class=\"tree-row\">稀有装备图鉴 <span style=\"margin-left:auto\">×</span></div></div></div>\n            <div class=\"spec-row\" style=\"margin-top:12px\"><span class=\"spec-chip\">Open · Collapsed</span><span class=\"spec-chip\">Remove action</span><span class=\"spec-chip\">Scroll</span></div>\n          </div>\n        </div>","settings-nav":"<div class=\"panel\">\n          <div class=\"panel-heading\"><div class=\"panel-title\">SettingsNav</div><span class=\"spec-chip captured\">FAMILY B</span></div>\n          <div class=\"panel-body\" style=\"display:flex;justify-content:center\">\n            <div class=\"nav-menu dnf-ui\" style=\"width:100%\">\n              <div class=\"nav-row\"><img src=\"src-web/navigation/img/sprite_interface2_option.NPK/option.img/82.PNG\"><span>首页</span></div>\n              <div class=\"nav-row\"><img src=\"src-web/navigation/img/sprite_interface2_option.NPK/option.img/85.PNG\"><span>画面</span><img src=\"src-web/navigation/img/sprite_interface2_option.NPK/option.img/103.PNG\"></div>\n              <div class=\"nav-row selected\"><img src=\"src-web/navigation/img/sprite_interface2_option.NPK/option.img/91.PNG\"><span>特效</span><img src=\"src-web/navigation/img/sprite_interface2_option.NPK/option.img/106.PNG\"></div>\n            </div>\n          </div>\n        </div>"};
+})();

design/src-web/navigation/index.html

@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=1920, initial-scale=1">
+  <base href="../../">
+  <title>navigation component catalog</title>
+  <link rel="stylesheet" href="src-web/index.css">
+</head>
+<body>
+  <!-- Root pages load individual templates through index.html#fragment references. -->
+  <template id="favorite-drawer">
+<div class="panel">
+          <div class="panel-heading"><div class="panel-title">FavoriteDrawer</div><span class="spec-chip captured">FAMILY A</span></div>
+          <div class="panel-body">
+            <div class="disclosure favorite-drawer dnf-ui" data-favorite-drawer><button type="button" class="disclosure-head focus" aria-expanded="true"><span style="color:#d47b22">★</span><span style="flex:1">收藏</span><span class="favorite-drawer-state">已展开</span><span class="favorite-drawer-arrow" aria-hidden="true">▲</span></button><div class="disclosure-body"><div class="tree-row">神圣的黄金增幅书 <span style="margin-left:auto">×</span></div><div class="tree-row">甜蜜果实收纳箱 <span style="margin-left:auto">×</span></div><div class="tree-row">稀有装备图鉴 <span style="margin-left:auto">×</span></div></div></div>
+            <div class="spec-row" style="margin-top:12px"><span class="spec-chip">Open · Collapsed</span><span class="spec-chip">Remove action</span><span class="spec-chip">Scroll</span></div>
+          </div>
+        </div>
+</template>
+<template id="settings-nav">
+<div class="panel">
+          <div class="panel-heading"><div class="panel-title">SettingsNav</div><span class="spec-chip captured">FAMILY B</span></div>
+          <div class="panel-body" style="display:flex;justify-content:center">
+            <div class="nav-menu dnf-ui" style="width:100%">
+              <div class="nav-row"><img src="src-web/navigation/img/sprite_interface2_option.NPK/option.img/82.PNG"><span>首页</span></div>
+              <div class="nav-row"><img src="src-web/navigation/img/sprite_interface2_option.NPK/option.img/85.PNG"><span>画面</span><img src="src-web/navigation/img/sprite_interface2_option.NPK/option.img/103.PNG"></div>
+              <div class="nav-row selected"><img src="src-web/navigation/img/sprite_interface2_option.NPK/option.img/91.PNG"><span>特效</span><img src="src-web/navigation/img/sprite_interface2_option.NPK/option.img/106.PNG"></div>
+            </div>
+          </div>
+        </div>
+</template>
+  <script>
+    document.querySelectorAll('template').forEach((template) => document.body.append(template.content.cloneNode(true)));
+  </script>
+</body>
+</html>

design/src-web/navigation/style/index.css

@@ -0,0 +1,14 @@
+/* Source module: navigation.css */
+.nav-menu { width: 250px; border: 1px solid #20251f; background: #030403; }
+.nav-row { height: 48px; padding: 0 13px; display: grid; grid-template-columns: 24px 1fr 12px; align-items: center; border-bottom: 1px solid #25221a; color: #c5b573; }
+.nav-row.selected { background: linear-gradient(90deg,#80601b,#1b160b 72%); color:#f1d66e; }
+.nav-row img { image-rendering: pixelated; }
+.favorite-drawer .disclosure-head { width:100%;border:0;border-bottom:1px solid #25221b;color:inherit;font:inherit;text-align:left;cursor:pointer; }
+.favorite-drawer .disclosure-head:hover { background:linear-gradient(#35342f,#191a17); }
+.favorite-drawer .disclosure-head:active { background:linear-gradient(#35342f,#191a17); }
+.favorite-drawer .disclosure-head:active > *,
+.favorite-drawer .disclosure-head.is-pressed > * { transform:translateY(1px); }
+.favorite-drawer-state { color:var(--text-3);font-size:10px; }
+.favorite-drawer-arrow { width:12px;color:#c8b36d;text-align:center; }
+.favorite-drawer.is-collapsed .disclosure-head { border-bottom:0; }
+.favorite-drawer.is-collapsed .disclosure-body { display:none; }