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/select/component.js
+4
View File
@@ -0,0 +1,4 @@
(() => {
window.componentRegistry ||= {};
window.componentRegistry["src-web/select/index.html"] = {"showcase":"<div class=\"panel\">\n <div class=\"panel-heading\"><div class=\"panel-title\">Select / TreeSelect / CascaderFilter</div><div class=\"spec-row\"><span class=\"spec-chip captured\">OPEN + FOCUS ROW</span></div></div>\n <div class=\"panel-body\" style=\"display:grid;grid-template-columns:1fr 1.1fr;gap:18px;\">\n <div>\n <div class=\"sample-label\">Select · Closed</div>\n <div class=\"field select-field has-select-icon dnf-ui\" style=\"width:100%\"><span class=\"field-label\">所有部位</span></div>\n <div class=\"sample-label\" style=\"margin-top:14px\">Select · Open</div>\n <div class=\"select-demo is-open\" data-select-demo>\n <div class=\"field select-field has-select-icon focus dnf-ui\" style=\"width:100%\" role=\"combobox\" tabindex=\"0\" aria-expanded=\"true\" aria-controls=\"select-demo-menu\"><span class=\"field-label\" data-select-value>名称</span></div>\n <div class=\"select-menu dnf-ui\" id=\"select-demo-menu\" role=\"listbox\" style=\"width:100%\"><div class=\"select-item selected\" role=\"option\" tabindex=\"0\" aria-selected=\"true\">名称</div><div class=\"select-item focused\" role=\"option\" tabindex=\"0\" aria-selected=\"false\">关键词</div><div class=\"select-item\" role=\"option\" tabindex=\"0\" aria-selected=\"false\">更新时间</div></div>\n </div>\n <div class=\"sample-label\" style=\"margin-top:10px\">CascaderFilter · Open + focused row</div>\n <div class=\"cascader-filter is-open dnf-ui\" data-cascader>\n <div class=\"cascader-fields\">\n <button type=\"button\" class=\"cascader-trigger primary\"><span class=\"cascader-value\">天界</span></button>\n <button type=\"button\" class=\"cascader-trigger secondary\"><span>黄昏之海（寂静城）</span></button>\n </div>\n <div class=\"cascader-menu\" role=\"listbox\">\n <button type=\"button\" class=\"cascader-option focused\" role=\"option\">阿拉德大陆</button>\n <button type=\"button\" class=\"cascader-option\" role=\"option\">天界</button>\n <button type=\"button\" class=\"cascader-option\" role=\"option\">魔界</button>\n <button type=\"button\" class=\"cascader-option\" role=\"option\">神界</button>\n </div>\n </div>\n </div>\n <div>\n <div class=\"sample-label\">TreeSelect · Single-column rarity tree</div>\n <div class=\"tree-select-demo is-open\" data-tree-select>\n <div class=\"field select-field has-select-icon dnf-ui\" style=\"width:100%\" role=\"combobox\" tabindex=\"0\" aria-expanded=\"true\" aria-controls=\"tree-select-demo-menu\"><span class=\"field-label\" data-tree-select-value>稀有</span></div>\n <div class=\"select-menu tree-select-menu dnf-ui\" id=\"tree-select-demo-menu\" role=\"tree\" style=\"width:100%\">\n <div class=\"tree-select-item tree-parent\" role=\"treeitem\" tabindex=\"0\" aria-expanded=\"true\" style=\"--depth:0\">所有稀有度</div>\n <div class=\"tree-select-item q-normal\" role=\"treeitem\" tabindex=\"0\" style=\"--depth:1\">普通</div>\n <div class=\"tree-select-item q-advanced\" role=\"treeitem\" tabindex=\"0\" style=\"--depth:1\">高级</div>\n <div class=\"tree-select-item q-rare is-selected\" role=\"treeitem\" tabindex=\"0\" aria-selected=\"true\" style=\"--depth:1\">稀有</div>\n <div class=\"tree-select-item q-artifact\" role=\"treeitem\" tabindex=\"0\" style=\"--depth:1\">神器</div>\n <div class=\"tree-select-item q-legend\" role=\"treeitem\" tabindex=\"0\" style=\"--depth:1\">传说</div>\n <div class=\"tree-select-item q-epic\" role=\"treeitem\" tabindex=\"0\" style=\"--depth:1\">史诗</div>\n <div class=\"tree-select-item q-myth\" role=\"treeitem\" tabindex=\"0\" style=\"--depth:1\">神话</div>\n <div class=\"tree-select-item q-primeval\" role=\"treeitem\" tabindex=\"0\" style=\"--depth:1\">太初</div>\n </div>\n </div>\n </div>\n </div>\n </div>"};
})();
design/src-web/select/index.html
+62
View File
@@ -0,0 +1,62 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=1920, initial-scale=1">
<base href="../../">
<title>select 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">Select / TreeSelect / CascaderFilter</div><div class="spec-row"><span class="spec-chip captured">OPEN + FOCUS ROW</span></div></div>
<div class="panel-body" style="display:grid;grid-template-columns:1fr 1.1fr;gap:18px;">
<div>
<div class="sample-label">Select · Closed</div>
<div class="field select-field has-select-icon dnf-ui" style="width:100%"><span class="field-label">所有部位</span></div>
<div class="sample-label" style="margin-top:14px">Select · Open</div>
<div class="select-demo is-open" data-select-demo>
<div class="field select-field has-select-icon focus dnf-ui" style="width:100%" role="combobox" tabindex="0" aria-expanded="true" aria-controls="select-demo-menu"><span class="field-label" data-select-value>名称</span></div>
<div class="select-menu dnf-ui" id="select-demo-menu" role="listbox" style="width:100%"><div class="select-item selected" role="option" tabindex="0" aria-selected="true">名称</div><div class="select-item focused" role="option" tabindex="0" aria-selected="false">关键词</div><div class="select-item" role="option" tabindex="0" aria-selected="false">更新时间</div></div>
</div>
<div class="sample-label" style="margin-top:10px">CascaderFilter · Open + focused row</div>
<div class="cascader-filter is-open dnf-ui" data-cascader>
<div class="cascader-fields">
<button type="button" class="cascader-trigger primary"><span class="cascader-value">天界</span></button>
<button type="button" class="cascader-trigger secondary"><span>黄昏之海（寂静城）</span></button>
</div>
<div class="cascader-menu" role="listbox">
<button type="button" class="cascader-option focused" role="option">阿拉德大陆</button>
<button type="button" class="cascader-option" role="option">天界</button>
<button type="button" class="cascader-option" role="option">魔界</button>
<button type="button" class="cascader-option" role="option">神界</button>
</div>
</div>
</div>
<div>
<div class="sample-label">TreeSelect · Single-column rarity tree</div>
<div class="tree-select-demo is-open" data-tree-select>
<div class="field select-field has-select-icon dnf-ui" style="width:100%" role="combobox" tabindex="0" aria-expanded="true" aria-controls="tree-select-demo-menu"><span class="field-label" data-tree-select-value>稀有</span></div>
<div class="select-menu tree-select-menu dnf-ui" id="tree-select-demo-menu" role="tree" style="width:100%">
<div class="tree-select-item tree-parent" role="treeitem" tabindex="0" aria-expanded="true" style="--depth:0">所有稀有度</div>
<div class="tree-select-item q-normal" role="treeitem" tabindex="0" style="--depth:1">普通</div>
<div class="tree-select-item q-advanced" role="treeitem" tabindex="0" style="--depth:1">高级</div>
<div class="tree-select-item q-rare is-selected" role="treeitem" tabindex="0" aria-selected="true" style="--depth:1">稀有</div>
<div class="tree-select-item q-artifact" role="treeitem" tabindex="0" style="--depth:1">神器</div>
<div class="tree-select-item q-legend" role="treeitem" tabindex="0" style="--depth:1">传说</div>
<div class="tree-select-item q-epic" role="treeitem" tabindex="0" style="--depth:1">史诗</div>
<div class="tree-select-item q-myth" role="treeitem" tabindex="0" style="--depth:1">神话</div>
<div class="tree-select-item q-primeval" role="treeitem" tabindex="0" style="--depth:1">太初</div>
</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/select/style/index.css
+229
View File
@@ -0,0 +1,229 @@
/* Source module: select.css */
.select-menu {
width: 230px;
margin-top: 1px;
border: 1px solid #5a4828;
background: #050606;
box-shadow: 0 8px 18px #000;
}
.select-demo {
position: relative;
}
.select-demo:not(.is-open) > .select-menu,
.tree-select-demo:not(.is-open) > .tree-select-menu {
display: none;
}
.select-item {
height: 27px;
padding: 0 10px;
display: flex;
align-items: center;
color: var(--gold);
border-bottom: 1px solid #25231f;
}
.select-item:hover {
color: #f3d777;
background: #101612;
}
.select-item:active {
color: #fff0a4;
background: #07121b;
}
.select-item:focus-visible {
outline: 1px solid var(--focus);
outline-offset: -2px;
background: #091731;
}
.select-item.focused {
outline: 1px solid var(--focus);
outline-offset: -2px;
background: #091731;
}
.select-item.selected {
color: var(--selected);
}
.tree-select-menu {
padding: 2px 3px;
background: #010201;
display: flex;
flex-direction: column;
gap: 2px;
}
.tree-select-item {
min-height: 24px;
padding: 0 7px 0 calc(7px + var(--depth, 0) * 14px);
display: flex;
align-items: center;
gap: 6px;
border: 1px solid #0d0f0d;
background: linear-gradient(180deg, #2c2a2c 0, #202220 16%, #0c0e0c 100%);
color: var(--gold);
box-shadow:
inset 0 1px 0 #3e3c3e,
inset 1px 0 0 #252725,
inset -1px 0 0 #111311,
inset 0 -1px 0 #111311;
}
.tree-select-item:hover {
border-color: #4f4b3c;
color: #f2da85;
filter: brightness(1.12);
cursor: pointer;
}
.tree-select-item:active {
border-color: #806329;
filter: brightness(0.86);
}
.tree-select-item:focus-visible {
outline: 1px solid var(--focus);
outline-offset: -2px;
}
.tree-select-demo.is-tree-collapsed .tree-select-item:not(.tree-parent) {
display: none;
}
.tree-parent {
position: relative;
}
.tree-parent::before {
content: "";
flex: 0 0 auto;
width: 13px;
height: 13px;
border: 1px solid #5f4a2b;
background: linear-gradient(180deg, #272720, #11120f);
box-shadow:
0 0 0 1px #090a09,
inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.tree-parent::after {
content: "";
position: absolute;
left: 11px;
top: 50%;
width: 7px;
height: 1px;
background: #a98b46;
box-shadow: 0 1px #000;
transform: translateY(-50%);
}
.tree-parent[aria-expanded="false"]::after {
height: 7px;
background:
linear-gradient(#a98b46, #a98b46) center / 7px 1px no-repeat,
linear-gradient(#a98b46, #a98b46) center / 1px 7px no-repeat;
box-shadow: 0 1px #000;
}
.tree-select-item.is-selected {
border-color: #efb62f;
box-shadow:
inset 0 0 0 1px #7c5d1d,
inset 0 1px 0 #f1c75f,
0 0 4px rgba(239, 182, 47, 0.48);
}
.tree-select-item.q-myth {
color: #f8c63d !important;
}
.tree-select-item.q-primeval {
color: #5aff62 !important;
}
/* Source module: cascader.css */
.cascader-filter {
width: 100%;
position: relative;
}
.cascader-fields {
height: 30px;
display: flex;
border-bottom: 1px solid #583916;
background: #030403;
}
.cascader-trigger {
appearance: none;
min-width: 0;
height: 29px;
padding: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
border: 1px solid #332a1b;
border-bottom: 0;
border-radius: 0;
background: linear-gradient(180deg, #2b2920 0, #171710 52%, #0b0c0a 100%);
color: #c3a15e;
font:
13px/1 "DCalc",
SimSun,
sans-serif;
text-shadow: 1px 1px 0 #000;
cursor: pointer;
}
.cascader-trigger.primary {
width: 39%;
border-right: 0;
}
.cascader-trigger.secondary {
flex: 1;
}
.cascader-trigger span {
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.cascader-trigger::after {
content: "";
flex: 0 0 auto;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid var(--control-glyph);
filter: drop-shadow(0 1px 0 #000);
transition: transform 90ms ease-out;
}
.cascader-filter.is-open .cascader-trigger.primary::after {
transform: rotate(180deg);
}
.cascader-trigger:hover,
.cascader-trigger.is-hover {
border-color: #756132;
background: linear-gradient(180deg, #817444 0, #514b2b 52%, #252315 100%);
color: #fff1a4;
box-shadow: inset 0 1px 0 #a89a61;
}
.cascader-menu {
display: none;
width: 39%;
margin-top: 1px;
border: 1px solid #432b14;
background: #010201;
box-shadow: 0 8px 16px #000;
}
.cascader-filter.is-open .cascader-menu {
display: block;
}
.cascader-option {
appearance: none;
width: 100%;
height: 22px;
padding: 0 7px;
display: flex;
align-items: center;
border: 0;
background: #010201;
color: #d1ae61;
font:
13px/1 "DCalc",
SimSun,
sans-serif;
text-align: left;
cursor: pointer;
}
.cascader-option:hover,
.cascader-option.focused {
color: #f5d56d;
background: #09284b;
box-shadow: inset 2px 0 0 #3a9ad0;
}