init

2026-08-04 17:57:01 +08:00
parent 768fd4a3a9
commit f77034edd7
641 changed files with 26137 additions and 0 deletions
@@ -0,0 +1,67 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=1920, initial-scale=1">
+  <base href="../../">
+  <title>dialog 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="construction">
+<div class="panel">
+          <div class="panel-heading"><div class="panel-title">9-slice window surface</div><div class="spec-chip derived">NORMALIZED</div></div>
+          <div class="panel-body">
+            <div style="display:flex;gap:22px;align-items:center;">
+              <div class="nine-grid" aria-label="nine slice diagram">
+                <div></div><div></div><div></div>
+                <div></div><div class="center"></div><div></div>
+                <div></div><div></div><div></div>
+              </div>
+              <div class="anatomy-list" style="flex:1">
+                <div class="anatomy-line"><strong>Corners</strong><span>4 个角保持原尺寸</span></div>
+                <div class="anatomy-line"><strong>Edges</strong><span>沿单轴平铺或拉伸</span></div>
+                <div class="anatomy-line"><strong>Center</strong><span>语义 Surface token</span></div>
+                <div class="anatomy-line"><strong>Titlebar</strong><span>钢蓝渐变独立构造</span></div>
+              </div>
+            </div>
+            <div class="divider"></div>
+            <div class="window" style="width:100%;">
+              <div class="window-titlebar dnf-ui"><span class="title">组件预览窗口</span><button type="button" class="dialog-icon-button dialog-close-button" aria-label="关闭组件预览窗口" data-dialog-action="关闭请求已触发"><img class="close asset-2x" src="src-web/dialog/img/sprite_interface.NPK/windowcommon_2x.img/6.PNG" alt=""></button></div>
+              <div class="window-content" style="min-height:112px;display:flex;align-items:center;justify-content:center;color:#81775b;">Content Slot / Auto Layout</div>
+            </div>
+          </div>
+        </div>
+</template>
+<template id="showcase">
+<div class="panel">
+          <div class="panel-heading"><div class="panel-title">WindowDialog / UtilitySheet</div><div class="panel-note">Shared chrome, separate visual families</div></div>
+          <div class="panel-body" style="display:flex;gap:22px;align-items:flex-start">
+            <div class="window" style="flex:1">
+              <div class="window-titlebar dnf-ui"><span class="title">游戏设置</span><button type="button" class="dialog-icon-button dialog-close-button" aria-label="关闭游戏设置" data-dialog-action="关闭请求已触发"><img class="close asset-2x" src="src-web/dialog/img/sprite_interface.NPK/windowcommon_2x.img/6.PNG" alt=""></button></div>
+              <div class="window-content dialog-body-shell" style="min-height:268px">
+                <div class="dialog-content-well" style="display:grid;grid-template-columns:160px 1fr;gap:10px">
+                  <div class="nav-menu dnf-ui" style="width:160px"><div class="nav-row selected"><img src="src-web/dialog/img/sprite_interface2_option.NPK/option.img/82.PNG"><span>首页</span></div><div class="nav-row"><img src="src-web/dialog/img/sprite_interface2_option.NPK/option.img/94.PNG"><span>声音</span></div><div class="nav-row"><img src="src-web/dialog/img/sprite_interface2_option.NPK/option.img/97.PNG"><span>游戏</span></div></div>
+                  <div class="settings-group dnf-ui"><div class="section-row">简易设置</div><div class="setting-row" style="grid-template-columns:1fr 1fr"><span>画面品质</span><div class="check-row"><span class="checkbox-control is-checked"></span>高品质</div></div><div class="setting-row alt" style="grid-template-columns:1fr 1fr"><span>UI 大小</span><div class="slider surface" style="--value:39%;width:180px"><div class="slider-track"><span class="slider-range"></span><i class="slider-thumb"></i></div><span class="slider-value">39%</span></div></div></div>
+                </div>
+              </div>
+              <div class="window-footer dialog-footer"><output class="dialog-status" aria-live="polite"></output><div class="btn-shell"><button type="button" class="dnf-btn disabled dnf-ui" style="min-width:72px" disabled>保存</button></div><div class="btn-shell"><button type="button" class="dnf-btn normal dnf-ui" style="min-width:72px" data-dialog-action="已取消未保存的修改">取消</button></div></div>
+            </div>
+
+            <div class="window sheet" style="width:310px">
+              <div class="window-titlebar dnf-ui"><span class="title">装扮栏</span><span class="title-actions"><button type="button" class="dialog-icon-button" aria-label="切换装扮栏显示模式" aria-pressed="false" data-dialog-toggle><img src="src-web/dialog/img/sprite_interface.NPK/windowcommon.chn.img/618.PNG" alt=""></button><button type="button" class="dialog-icon-button dialog-close-button" aria-label="关闭装扮栏" data-dialog-action="关闭请求已触发"><img class="close asset-2x" src="src-web/dialog/img/sprite_interface.NPK/windowcommon_2x.img/6.PNG" alt=""></button></span></div>
+              <div class="window-content" style="min-height:268px;padding:8px"><div class="sheet-tabs dnf-ui"><div class="sheet-tab">物品栏</div><div class="sheet-tab selected">装扮</div><div class="sheet-tab">宠物</div></div><div class="inventory-grid">
+                <div class="item-slot rare"><img src="src-web/dialog/img/sprite_item.NPK/equipmentskill.img/0.PNG"></div><div class="item-slot epic"><img src="src-web/dialog/img/sprite_item.NPK/equipmentskill.img/1.PNG"></div><div class="item-slot rare"><img src="src-web/dialog/img/sprite_item.NPK/equipmentskill.img/2.PNG"></div><div class="item-slot"><img src="src-web/dialog/img/sprite_item.NPK/equipmentskill.img/3.PNG"></div><div class="item-slot epic"><img src="src-web/dialog/img/sprite_item.NPK/equipmentskill.img/4.PNG"></div><div class="item-slot rare"><img src="src-web/dialog/img/sprite_item.NPK/equipmentskill.img/7.PNG"></div>
+                <div class="item-slot"><img src="src-web/dialog/img/sprite_item.NPK/equipmentskill.img/8.PNG"></div><div class="item-slot rare"><img src="src-web/dialog/img/sprite_item.NPK/equipmentskill.img/9.PNG"></div><div class="item-slot"></div><div class="item-slot"></div><div class="item-slot"></div><div class="item-slot"></div>
+              </div></div>
+              <div class="window-footer dnf-ui" style="justify-content:space-between"><span style="color:#d2b85c">3,341 个</span><output class="dialog-status" aria-live="polite"></output><button type="button" class="sheet-filter-button" aria-pressed="false" data-dialog-toggle>筛选 ▾</button></div>
+            </div>
+          </div>
+        </div>
+</template>
+  <script>
+    document.querySelectorAll('template').forEach((template) => document.body.append(template.content.cloneNode(true)));
+  </script>
+</body>
+</html>