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/data-section/component.js
+4
View File
@@ -0,0 +1,4 @@
(() => {
window.componentRegistry ||= {};
window.componentRegistry["src-web/data-section/index.html"] = {"showcase":"<div class=\"panel\">\n <div class=\"panel-heading\"><div class=\"panel-title\">DataSection</div><span class=\"spec-chip captured\">FAMILY C</span></div>\n <div class=\"panel-body\">\n <div class=\"data-section-stack\">\n <div class=\"disclosure dnf-ui\" data-disclosure>\n <button type=\"button\" class=\"disclosure-head\" aria-expanded=\"true\">\n <img src=\"src-web/data-section/img/sprite_interface.NPK/windowcommon.chn.img/565.PNG\" data-expanded-icon=\"src-web/data-section/img/sprite_interface.NPK/windowcommon.chn.img/565.PNG\" data-collapsed-icon=\"src-web/data-section/img/sprite_interface.NPK/windowcommon.chn.img/561.PNG\" alt=\"\">\n <span>基本信息</span>\n <span class=\"disclosure-state\">已展开</span>\n </button>\n <div class=\"disclosure-body\">\n <div class=\"tree-row\"><span class=\"attribute-label-tone\" style=\"flex:1\">魔法暴击</span><span class=\"attribute-value-tone\">+113.5%</span></div>\n <div class=\"tree-row\"><span style=\"flex:1\">技能等级</span><span class=\"attribute-value-tone\">46</span></div>\n <div class=\"tree-row\"><span class=\"disabled-tone\" style=\"flex:1\">精神</span><span class=\"disabled-tone\">不可用</span></div>\n </div>\n </div>\n <div class=\"disclosure dnf-ui is-collapsed\" data-disclosure>\n <button type=\"button\" class=\"disclosure-head\" aria-expanded=\"false\">\n <img src=\"src-web/data-section/img/sprite_interface.NPK/windowcommon.chn.img/561.PNG\" data-expanded-icon=\"src-web/data-section/img/sprite_interface.NPK/windowcommon.chn.img/565.PNG\" data-collapsed-icon=\"src-web/data-section/img/sprite_interface.NPK/windowcommon.chn.img/561.PNG\" alt=\"\">\n <span>详细属性</span>\n <span class=\"disclosure-state\">未展开</span>\n </button>\n <div class=\"disclosure-body\" hidden>\n <div class=\"tree-row\"><span style=\"flex:1\">攻击强化</span><span class=\"attribute-value-tone\">+24.6%</span></div>\n <div class=\"tree-row\"><span style=\"flex:1\">技能范围</span><span class=\"attribute-value-tone\">+15%</span></div>\n </div>\n </div>\n </div>\n <div class=\"spec-row\" style=\"margin-top:12px\"><span class=\"spec-chip\">Expanded</span><span class=\"spec-chip\">Collapsed</span><span class=\"spec-chip\">Interactive</span><span class=\"spec-chip\">Data rows</span></div>\n </div>\n </div>"};
})();
design/src-web/data-section/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/data-section/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/data-section/index.html
+49
View File
@@ -0,0 +1,49 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=1920, initial-scale=1">
<base href="../../">
<title>data-section 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">
<div class="panel-heading"><div class="panel-title">DataSection</div><span class="spec-chip captured">FAMILY C</span></div>
<div class="panel-body">
<div class="data-section-stack">
<div class="disclosure dnf-ui" data-disclosure>
<button type="button" class="disclosure-head" aria-expanded="true">
<img src="src-web/data-section/img/sprite_interface.NPK/windowcommon.chn.img/565.PNG" data-expanded-icon="src-web/data-section/img/sprite_interface.NPK/windowcommon.chn.img/565.PNG" data-collapsed-icon="src-web/data-section/img/sprite_interface.NPK/windowcommon.chn.img/561.PNG" alt="">
<span>基本信息</span>
<span class="disclosure-state">已展开</span>
</button>
<div class="disclosure-body">
<div class="tree-row"><span class="attribute-label-tone" style="flex:1">魔法暴击</span><span class="attribute-value-tone">+113.5%</span></div>
<div class="tree-row"><span style="flex:1">技能等级</span><span class="attribute-value-tone">46</span></div>
<div class="tree-row"><span class="disabled-tone" style="flex:1">精神</span><span class="disabled-tone">不可用</span></div>
</div>
</div>
<div class="disclosure dnf-ui is-collapsed" data-disclosure>
<button type="button" class="disclosure-head" aria-expanded="false">
<img src="src-web/data-section/img/sprite_interface.NPK/windowcommon.chn.img/561.PNG" data-expanded-icon="src-web/data-section/img/sprite_interface.NPK/windowcommon.chn.img/565.PNG" data-collapsed-icon="src-web/data-section/img/sprite_interface.NPK/windowcommon.chn.img/561.PNG" alt="">
<span>详细属性</span>
<span class="disclosure-state">未展开</span>
</button>
<div class="disclosure-body" hidden>
<div class="tree-row"><span style="flex:1">攻击强化</span><span class="attribute-value-tone">+24.6%</span></div>
<div class="tree-row"><span style="flex:1">技能范围</span><span class="attribute-value-tone">+15%</span></div>
</div>
</div>
</div>
<div class="spec-row" style="margin-top:12px"><span class="spec-chip">Expanded</span><span class="spec-chip">Collapsed</span><span class="spec-chip">Interactive</span><span class="spec-chip">Data rows</span></div>
</div>
</div>
</template>
<script>
document.querySelectorAll('template').forEach((template) => document.body.append(template.content.cloneNode(true)));
</script>
</body>
</html>
design/src-web/data-section/style/index.css
+21
View File
@@ -0,0 +1,21 @@
/* Source module: data-section.css */
.disclosure {
border: 1px solid #4b3d26;
background: #070807;
color: var(--gold);
}
.disclosure-head { min-height: 32px; padding: 0 9px; display:flex;align-items:center;gap:7px;background:linear-gradient(#2a2925,#10110f);border-bottom:1px solid #25221b; }
.disclosure-head.focus { outline: 1px solid var(--focus); outline-offset: -2px; }
.disclosure-body { padding: 7px 9px; }
.tree-row { height: 25px; padding-left: calc(var(--depth,0) * 16px); display:flex;align-items:center;gap:6px;color:#c9bb7e;border-bottom:1px solid #24231f; }
.tree-row.focus { outline:1px solid var(--focus); outline-offset:-2px;background:#07131b; }
.tree-row.selected { color:#f1d667;background:#302711; }
.data-section-stack { display:flex;flex-direction:column;gap:7px; }
.disclosure-head { width:100%;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer; }
.disclosure-head:focus-visible { outline:1px solid var(--selected);outline-offset:-2px; }
.disclosure-head img { flex:0 0 auto;max-width:13px;max-height:13px;image-rendering:pixelated; }
.disclosure-state { margin-left:auto;color:var(--text-3);font-size:10px; }
.disclosure.is-collapsed .disclosure-head { border-bottom:0; }
.disclosure.is-collapsed .disclosure-state { color:#857a57; }
.disclosure-body[hidden] { display:none; }