init

design/src-web/dialog/index.html

@@ -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>

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

@@ -0,0 +1,298 @@
+/* Source module: dialog.css */
+.window {
+  border: 1px solid #6c5a37;
+  background: #050606;
+  box-shadow:
+    0 18px 38px rgba(0, 0, 0, 0.8),
+    inset 0 0 0 1px #0e1418;
+  overflow: hidden;
+}
+.window-titlebar {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  height: 28px;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  padding: 0 8px;
+  background: linear-gradient(#5a7099, #415272 55%, #313e58);
+  border-bottom: 1px solid #1d2735;
+  color: #f0f2ef;
+  text-shadow: 0 1px 1px #000;
+  font-size: 13px;
+  transition:
+    background 0.12s linear,
+    color 0.12s linear;
+}
+.window-titlebar > :not(.window-title-effect) {
+  position: relative;
+  z-index: 2;
+}
+.window-titlebar .title {
+  grid-column: 2;
+}
+.window-titlebar .close {
+  width: 10px;
+  height: 9px;
+  image-rendering: auto;
+}
+.window-titlebar > .dialog-icon-button {
+  grid-column: 3;
+  justify-self: end;
+}
+.window-titlebar .title-actions {
+  grid-column: 3;
+  justify-self: end;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.window-titlebar .title-actions img {
+  flex: 0 0 auto;
+  image-rendering: pixelated;
+  object-fit: contain;
+}
+.dialog-icon-button {
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  background: none;
+  box-shadow: none;
+  cursor: pointer;
+}
+.dialog-icon-button > img {
+  display: block;
+  transform: translateY(0);
+  filter: brightness(1);
+}
+.dialog-icon-button:hover > img,
+.dialog-icon-button:focus-visible > img,
+.dialog-icon-button:active > img {
+  filter: brightness(1.28);
+}
+.dialog-icon-button:focus-visible {
+  outline: 1px solid rgba(225, 204, 135, 0.72);
+  outline-offset: -2px;
+}
+.dialog-icon-button:active > img {
+  transform: translateY(1px);
+}
+.dialog-icon-button[aria-pressed="true"] > img {
+  filter: brightness(1.28);
+}
+.window.is-unfocused > .window-titlebar {
+  background: linear-gradient(#303b50, #263247 56%, #1d2839);
+  color: #8993a0;
+  text-shadow: 0 1px 1px #0a0d12;
+}
+.window.is-focused > .window-titlebar {
+  background: linear-gradient(#6079a5, #435a80 55%, #30425f);
+  color: #f4f6f2;
+}
+.window-title-effect {
+  position: absolute;
+  z-index: 1;
+  left: 50%;
+  top: 0;
+  width: 1100px;
+  height: 100%;
+  max-width: none;
+  transform: translateX(-50%);
+  object-fit: fill;
+  pointer-events: none;
+  mix-blend-mode: screen;
+  filter: brightness(1.55) contrast(1.06);
+  opacity: 0.72;
+  image-rendering: auto;
+}
+.window.is-unfocused > .window-titlebar .window-title-effect {
+  display: none;
+}
+.window-content {
+  min-height: 230px;
+  padding: 14px;
+  background: linear-gradient(
+    135deg,
+    rgba(31, 36, 40, 0.82),
+    rgba(4, 5, 5, 0.98)
+  );
+}
+.window-footer {
+  height: 38px;
+  padding: 4px 8px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  border-top: 1px solid #332c22;
+  background: linear-gradient(#20201d, #11110f);
+}
+.dialog-body-shell {
+  padding: 10px !important;
+  background: rgba(4, 5, 5, 0.82) !important;
+}
+.dialog-content-well {
+  min-height: 0;
+  padding: 0;
+  border: 1px solid #262824;
+  background: #000;
+  color: var(--gold);
+}
+.dialog-body-shell > .dialog-content-well {
+  min-height: 248px;
+}
+.dialog-footer {
+  position: relative;
+  background: rgba(4, 5, 5, 0.82);
+  border-top-color: #2b2924;
+}
+.dialog-status {
+  min-width: 0;
+  margin-right: auto;
+  color: #8fc885;
+  font-size: 11px;
+  line-height: 1;
+  white-space: nowrap;
+}
+.dialog-status:empty { display: none; }
+.dialog-status.is-updated { animation: dialog-status-pulse 0.32s ease-out; }
+@keyframes dialog-status-pulse {
+  from { opacity: 0.35; transform: translateY(1px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.window.is-demo-dismissed { animation: dialog-dismiss-feedback 0.28s ease-out; }
+@keyframes dialog-dismiss-feedback {
+  50% { opacity: 0.58; }
+}
+
+.sheet-filter-button {
+  appearance: none;
+  padding: 2px 3px;
+  border: 0;
+  background: none;
+  color: #9c8e64;
+  font: inherit;
+  cursor: pointer;
+}
+.sheet-filter-button:hover,
+.sheet-filter-button:focus-visible,
+.sheet-filter-button:active,
+.sheet-filter-button[aria-pressed="true"] {
+  color: #d9c78a;
+  outline: none;
+}
+.sheet-filter-button:active { transform: translateY(1px); }
+
+.sheet {
+  width: 390px;
+}
+.sheet .window-content {
+  min-height: 340px;
+}
+.sheet-tabs {
+  display: flex;
+  height: 30px;
+  border-bottom: 1px solid #7b6439;
+}
+.sheet-tab {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #b8a36b;
+  border-right: 1px solid #322b20;
+}
+.sheet-tab.selected {
+  color: #f2d97c;
+  background: #271e0d;
+}
+.inventory-grid {
+  display: grid;
+  grid-template-columns: repeat(6, 38px);
+  gap: 4px;
+  margin-top: 12px;
+}
+.item-slot {
+  position: relative;
+  width: 38px;
+  height: 38px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #080909;
+  border: 1px solid #3e3524;
+}
+.item-slot.rare,
+.item-slot.epic {
+  border-color: #3e3524;
+  box-shadow: none;
+}
+.item-slot.rare::after,
+.item-slot.epic::after {
+  content: "";
+  position: absolute;
+  z-index: 2;
+  left: 50%;
+  top: 50%;
+  width: 28px;
+  height: 28px;
+  transform: translate(-50%, -50%);
+  background-repeat: no-repeat;
+  background-size: 28px 28px;
+  pointer-events: none;
+  image-rendering: pixelated;
+}
+.item-slot.rare::after {
+  background-image: url("../img/equipment-rarity/rare.png");
+}
+.item-slot.epic::after {
+  background-image: url("../img/equipment-rarity/epic.png");
+}
+.item-slot img {
+  width: 28px;
+  height: 28px;
+  image-rendering: pixelated;
+}
+
+.popover {
+  width: 420px;
+  padding: 12px 14px;
+  border: 1px solid #5e4d2d;
+  background: rgba(4, 5, 4, 0.97);
+  color: var(--gold);
+  box-shadow: 0 12px 26px #000;
+}
+.popover-cols {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+}
+.popover h4 {
+  margin: 0 0 7px;
+  color: #d8bd5d;
+  font-size: 13px;
+}
+
+.tooltip {
+  padding: 5px 7px;
+  border: 1px solid #6c5c3d;
+  background: #020302;
+  color: #f5f5ef;
+  box-shadow: 0 6px 14px #000;
+  font-size: 12px;
+}
+.tooltip.rich {
+  width: 310px;
+  padding: 10px;
+  color: #e8e5da;
+  line-height: 1.35;
+}
+.tooltip.rich strong {
+  color: #e2c962;
+}