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,54 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=1920, initial-scale=1">
+  <base href="../../">
+  <title>autocomplete 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="showcase">
+<div class="panel" style="height:330px;margin-bottom:18px;">
+        <div class="panel-heading"><div class="panel-title">Autocomplete</div><div class="panel-note">Two visual families over the same combobox behavior</div></div>
+        <div class="panel-body autocomplete-grid">
+          <div class="autocomplete-family flat-autocomplete" data-autocomplete>
+            <div class="family-head"><span>ComboboxFlat</span><span class="spec-chip captured">CAPTURED</span></div>
+            <div class="autocomplete-line dnf-ui">
+              <div class="field select-field focus autocomplete-field" role="combobox" tabindex="0" aria-expanded="true" aria-controls="autocomplete-flat-menu"><span class="field-label" data-autocomplete-value>DNF</span></div>
+            </div>
+            <div class="autocomplete-menu dnf-ui" id="autocomplete-flat-menu" role="listbox">
+              <div class="autocomplete-item selected" role="option" tabindex="0" aria-selected="true">DNF Toonies（1天）</div>
+              <div class="autocomplete-item" role="option" tabindex="0" aria-selected="false">DNF Toonies（3天）</div>
+              <div class="autocomplete-item q-epic" role="option" tabindex="0" aria-selected="false">DNF毒战者</div>
+              <div class="autocomplete-item q-rare" role="option" tabindex="0" aria-selected="false">DNF智者</div>
+              <div class="autocomplete-item q-artifact" role="option" tabindex="0" aria-selected="false">闪耀之DNF勇士</div>
+            </div>
+          </div>
+
+          <div class="autocomplete-family search-tree-family">
+            <div class="family-head"><span>SearchTree</span><span class="spec-chip captured">CAPTURED</span></div>
+            <div class="search-toolbar dnf-ui">
+              <img class="search-icon" src="src-web/autocomplete/img/sprite_interface.NPK/windowcommon.chn.img/652.PNG" alt="search">
+              <div class="field select-field has-select-icon focus autocomplete-field"><span class="field-label">西风</span><img class="clear-icon" src="src-web/autocomplete/img/sprite_interface.NPK/windowcommon.chn.img/582.PNG" alt="clear"></div>
+              <div class="btn-shell compact-shell"><div class="dnf-btn normal dnf-ui">搜索</div></div>
+              <div class="btn-shell compact-shell"><div class="dnf-btn normal dnf-ui">刷新</div></div>
+            </div>
+            <div class="search-tree dnf-ui">
+              <div class="search-tree-row root"><img src="src-web/autocomplete/img/sprite_interface.NPK/windowcommon.chn.img/565.PNG">剧情角色名称</div>
+              <div class="search-tree-row branch"><img src="src-web/autocomplete/img/sprite_interface.NPK/windowcommon.chn.img/565.PNG">素喃</div>
+              <div class="search-tree-row leaf selected">西风</div>
+              <div class="search-tree-row leaf">阿斯卡</div>
+              <div class="search-tree-row leaf">小铁柱</div>
+              <div class="search-tree-row branch"><img src="src-web/autocomplete/img/sprite_interface.NPK/windowcommon.chn.img/561.PNG">黄昏之海（寂静城）</div>
+            </div>
+          </div>
+        </div>
+      </div>
+</template>
+  <script>
+    document.querySelectorAll('template').forEach((template) => document.body.append(template.content.cloneNode(true)));
+  </script>
+</body>
+</html>