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/scrollbar/component.js
+4
View File
@@ -0,0 +1,4 @@
(() => {
window.componentRegistry ||= {};
window.componentRegistry["src-web/scrollbar/index.html"] = {"showcase":"<div class=\"panel\">\n <div class=\"panel-heading\"><div class=\"panel-title\">Popover / Tooltip / Scrollbar</div><div class=\"panel-note\">No generic floating white cards</div></div>\n <div class=\"panel-body\" style=\"display:grid;grid-template-columns:1fr 250px;gap:20px\">\n <div>\n <div class=\"sample-label\">Popover · Placement = Top</div>\n <div class=\"popover dnf-ui\" style=\"width:100%\"><div class=\"popover-cols\"><div><h4>物品设置</h4><div class=\"radio-row\">锁定排序</div><div class=\"radio-row\">按部位</div></div><div><h4>排序方式</h4><div class=\"check-row\"><span class=\"checkbox-control is-checked\"></span>名望对比</div><div class=\"check-row\"><span class=\"checkbox-control is-checked\"></span>相同装备优先</div></div><div><h4>其他支持</h4><div class=\"check-row\"><span class=\"checkbox-control\"></span>显示帮助</div></div></div></div>\n <div style=\"display:flex;gap:14px;margin-top:18px;align-items:flex-start\"><div><div class=\"sample-label\">SimpleTooltip</div><div class=\"tooltip dnf-ui\">恢复游戏设置前的状态</div></div><div><div class=\"sample-label\">RichHelp</div><div class=\"tooltip rich dnf-ui\"><strong>▣ 排序锁定</strong><br>锁定后固定该物品。排序时不会移动物品位置。<br><strong>▣ 交易锁定</strong><br>锁定后无法交易、强化、分解。</div></div></div>\n </div>\n <div>\n <div class=\"sample-label\">Scrollbar · Style = Plain</div>\n <div class=\"scroll-demo\"><div class=\"scrollbar\"><div class=\"scroll-arrow\" aria-hidden=\"true\"></div><div class=\"scroll-track\"><div class=\"scroll-thumb\"></div></div><div class=\"scroll-arrow\" aria-hidden=\"true\"></div></div></div>\n <div class=\"spec-row\" style=\"margin-top:16px\"><span class=\"spec-chip captured\">Plain vertical captured</span></div>\n </div>\n </div>\n </div>"};
})();
design/src-web/scrollbar/index.html
+33
View File
@@ -0,0 +1,33 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=1920, initial-scale=1">
<base href="../../">
<title>scrollbar 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">Popover / Tooltip / Scrollbar</div><div class="panel-note">No generic floating white cards</div></div>
<div class="panel-body" style="display:grid;grid-template-columns:1fr 250px;gap:20px">
<div>
<div class="sample-label">Popover · Placement = Top</div>
<div class="popover dnf-ui" style="width:100%"><div class="popover-cols"><div><h4>物品设置</h4><div class="radio-row">锁定排序</div><div class="radio-row">按部位</div></div><div><h4>排序方式</h4><div class="check-row"><span class="checkbox-control is-checked"></span>名望对比</div><div class="check-row"><span class="checkbox-control is-checked"></span>相同装备优先</div></div><div><h4>其他支持</h4><div class="check-row"><span class="checkbox-control"></span>显示帮助</div></div></div></div>
<div style="display:flex;gap:14px;margin-top:18px;align-items:flex-start"><div><div class="sample-label">SimpleTooltip</div><div class="tooltip dnf-ui">恢复游戏设置前的状态</div></div><div><div class="sample-label">RichHelp</div><div class="tooltip rich dnf-ui"><strong>▣ 排序锁定</strong><br>锁定后固定该物品。排序时不会移动物品位置。<br><strong>▣ 交易锁定</strong><br>锁定后无法交易、强化、分解。</div></div></div>
</div>
<div>
<div class="sample-label">Scrollbar · Style = Plain</div>
<div class="scroll-demo"><div class="scrollbar"><div class="scroll-arrow" aria-hidden="true"></div><div class="scroll-track"><div class="scroll-thumb"></div></div><div class="scroll-arrow" aria-hidden="true"></div></div></div>
<div class="spec-row" style="margin-top:16px"><span class="spec-chip captured">Plain vertical captured</span></div>
</div>
</div>
</div>
</template>
<script>
document.querySelectorAll('template').forEach((template) => document.body.append(template.content.cloneNode(true)));
</script>
</body>
</html>
design/src-web/scrollbar/style/index.css
+8
View File
@@ -0,0 +1,8 @@
/* Source module: scrollbar.css */
.scroll-demo { display:flex;gap:28px;justify-content:center;align-items:flex-start; }
.scrollbar { width:15px;height:250px;display:grid;grid-template-rows:18px 1fr 18px;border:1px solid #2b2924;background:#050606; }
.scroll-arrow { display:flex;align-items:center;justify-content:center;background:linear-gradient(#24241f,#10110f); }
.scroll-arrow::before { content:"";width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:5px solid #a98b46;filter:drop-shadow(0 1px 0 #000); }
.scroll-arrow:last-child::before { border-bottom:0;border-top:5px solid #a98b46; }
.scroll-track { position:relative;background:linear-gradient(90deg,#080908,#151513,#070807); }
.scroll-thumb { position:absolute;left:2px;right:2px;top:44px;height:64px;border:1px solid #68532d;background:linear-gradient(90deg,#1b1d1c,#363530,#161817); }