dnftools/dcalc
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

init

Browse Source
This commit is contained in:
imelon
2026-08-04 17:57:01 +08:00
parent 768fd4a3a9
commit f77034edd7
641 changed files with 26137 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
design/src-web/autocomplete/component.js
+4
View File
@@ -0,0 +1,4 @@
(() => {
window.componentRegistry ||= {};
window.componentRegistry["src-web/autocomplete/index.html"] = {"showcase":"<div class=\"panel\" style=\"height:330px;margin-bottom:18px;\">\n <div class=\"panel-heading\"><div class=\"panel-title\">Autocomplete</div><div class=\"panel-note\">Two visual families over the same combobox behavior</div></div>\n <div class=\"panel-body autocomplete-grid\">\n <div class=\"autocomplete-family flat-autocomplete\" data-autocomplete>\n <div class=\"family-head\"><span>ComboboxFlat</span><span class=\"spec-chip captured\">CAPTURED</span></div>\n <div class=\"autocomplete-line dnf-ui\">\n <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>\n </div>\n <div class=\"autocomplete-menu dnf-ui\" id=\"autocomplete-flat-menu\" role=\"listbox\">\n <div class=\"autocomplete-item selected\" role=\"option\" tabindex=\"0\" aria-selected=\"true\">DNF Toonies（1天）</div>\n <div class=\"autocomplete-item\" role=\"option\" tabindex=\"0\" aria-selected=\"false\">DNF Toonies（3天）</div>\n <div class=\"autocomplete-item q-epic\" role=\"option\" tabindex=\"0\" aria-selected=\"false\">DNF毒战者</div>\n <div class=\"autocomplete-item q-rare\" role=\"option\" tabindex=\"0\" aria-selected=\"false\">DNF智者</div>\n <div class=\"autocomplete-item q-artifact\" role=\"option\" tabindex=\"0\" aria-selected=\"false\">闪耀之DNF勇士</div>\n </div>\n </div>\n\n <div class=\"autocomplete-family search-tree-family\">\n <div class=\"family-head\"><span>SearchTree</span><span class=\"spec-chip captured\">CAPTURED</span></div>\n <div class=\"search-toolbar dnf-ui\">\n <img class=\"search-icon\" src=\"src-web/autocomplete/img/sprite_interface.NPK/windowcommon.chn.img/652.PNG\" alt=\"search\">\n <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>\n <div class=\"btn-shell compact-shell\"><div class=\"dnf-btn normal dnf-ui\">搜索</div></div>\n <div class=\"btn-shell compact-shell\"><div class=\"dnf-btn normal dnf-ui\">刷新</div></div>\n </div>\n <div class=\"search-tree dnf-ui\">\n <div class=\"search-tree-row root\"><img src=\"src-web/autocomplete/img/sprite_interface.NPK/windowcommon.chn.img/565.PNG\">剧情角色名称</div>\n <div class=\"search-tree-row branch\"><img src=\"src-web/autocomplete/img/sprite_interface.NPK/windowcommon.chn.img/565.PNG\">素喃</div>\n <div class=\"search-tree-row leaf selected\">西风</div>\n <div class=\"search-tree-row leaf\">阿斯卡</div>\n <div class=\"search-tree-row leaf\">小铁柱</div>\n <div class=\"search-tree-row branch\"><img src=\"src-web/autocomplete/img/sprite_interface.NPK/windowcommon.chn.img/561.PNG\">黄昏之海（寂静城）</div>\n </div>\n </div>\n </div>\n </div>"};
})();
design/src-web/autocomplete/img/sprite_interface.NPK/windowcommon.chn.img/561.PNG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 690 B

design/src-web/autocomplete/img/sprite_interface.NPK/windowcommon.chn.img/565.PNG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 555 B

design/src-web/autocomplete/img/sprite_interface.NPK/windowcommon.chn.img/582.PNG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 232 B

design/src-web/autocomplete/img/sprite_interface.NPK/windowcommon.chn.img/652.PNG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 990 B

design/src-web/autocomplete/index.html
+54
View File
@@ -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>
design/src-web/autocomplete/style/index.css
+23
View File
@@ -0,0 +1,23 @@
/* Source module: autocomplete.css */
.autocomplete-grid { display:grid;grid-template-columns:.9fr 1.1fr;gap:22px;height:calc(100% - 46px); }
.autocomplete-family { min-width:0;padding:10px 12px;border:1px solid #292b27;background:#070807; }
.family-head { height:24px;display:flex;align-items:center;justify-content:space-between;color:var(--gold);font-size:13px; }
.autocomplete-line,.search-toolbar { display:flex;align-items:center;gap:6px; }
.search-icon { flex:0 0 auto;width:auto;height:auto;max-width:18px;max-height:18px;image-rendering:pixelated; }
.autocomplete-field { min-width:0;flex:1; }
.clear-icon { flex:0 0 auto;width:9px;height:9px;margin:0 1px 0 4px;image-rendering:pixelated; }
.autocomplete-menu { margin:1px 0 0 24px;border:1px solid #5c4a2c;background:#010201;box-shadow:0 8px 18px #000; }
.flat-autocomplete .autocomplete-menu { margin-left:0; }
.autocomplete-item { height:27px;padding:0 9px;display:flex;align-items:center;border-bottom:1px solid #24231f;color:var(--gold);background:#030403; }
.autocomplete-item:hover { color:#f3d777;background:#101612;cursor:pointer; }
.autocomplete-item:active { color:#fff0a4;background:#07121b; }
.autocomplete-item:focus-visible { outline:1px solid var(--focus);outline-offset:-2px; }
.autocomplete-item.selected { color:var(--selected);background:#1b1508;box-shadow:inset 2px 0 0 var(--selected); }
.compact-shell { padding:2px;border-radius:0; }
.compact-shell .dnf-btn { min-width:58px;height:30px;padding:0 8px; }
.search-tree { height:170px;margin:4px 0 0 24px;padding:3px 0;border:1px solid #4f4229;background:#010201;overflow:hidden; }
.search-tree-row { height:26px;padding:0 9px;display:flex;align-items:center;gap:6px;border-bottom:1px solid #24231f;color:var(--gold); }
.search-tree-row img { max-width:12px;max-height:12px;image-rendering:pixelated; }
.search-tree-row.branch { padding-left:28px;color:#c6b46f; }
.search-tree-row.leaf { padding-left:50px; }
.search-tree-row.selected { color:var(--selected);background:#1a1509;box-shadow:inset 2px 0 0 var(--selected); }