-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdashboard.html
More file actions
296 lines (284 loc) · 18.8 KB
/
Copy pathdashboard.html
File metadata and controls
296 lines (284 loc) · 18.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>MCard</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Sora:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="dashboard.css" />
<script src="theme-bootstrap.js"></script>
<script src="lang-bootstrap.js"></script>
</head>
<body>
<!-- 启动揭幕：开箱抽卡（卡背悬浮→翻面→白闪→金光跑圈→金字→冲屏揭幕；数据就绪/超时/点击 触发，见 dashboard.js dismissSplash。
平时压缩时间轴；首次保存令牌成功播完整仪式（种 sessionStorage 标记 + #splash.full 放宽时间变量） -->
<div id="splash" role="presentation">
<div class="sp-scene">
<div class="sp-card">
<div class="sp-inner">
<div class="sp-face sp-back" aria-hidden="true"></div>
<div class="sp-face sp-front">
<img class="sp-logo" src="logo.png" alt="" />
<div class="sp-word" aria-label="MCard"><span>M</span><span>C</span><span>a</span><span>r</span><span>d</span></div>
</div>
</div>
<div class="sp-ring" aria-hidden="true"></div>
<div class="sp-flash" aria-hidden="true"></div>
</div>
</div>
</div>
<div class="bg-fx" aria-hidden="true"></div>
<header class="topbar">
<div class="brand">
<img class="logo" src="logo.png" alt="MCard" />
<div class="brand-text">
<div class="title">MCard</div>
<div class="subtitle" data-i18n="nav.subtitle"></div>
</div>
</div>
<div id="budgetBar" class="budget-bar-wrap" style="display:none"></div>
<div class="sidebar-tools">
<button id="themeBtn" class="theme-toggle" type="button" data-i18n-title="nav.themeToggle" data-i18n-aria-label="nav.themeToggle">
<svg class="theme-icon theme-icon-dark" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><g clip-path="url(#clip0_745_8087)"><path d="M8 2C4.68667 2 2 4.68667 2 8C2 11.3133 4.68667 14 8 14C11.3133 14 14 11.3133 14 8C14 7.69333 13.9733 7.38667 13.9333 7.09333C13.28 8.00667 12.2133 8.6 11 8.6C9.01333 8.6 7.4 6.98667 7.4 5C7.4 3.79333 7.99333 2.72 8.90667 2.06667C8.61333 2.02667 8.30667 2 8 2Z" fill="currentColor"></path></g><defs><clipPath id="clip0_745_8087"><rect width="16" height="16" fill="currentColor"></rect></clipPath></defs></svg>
<svg class="theme-icon theme-icon-light" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><g clip-path="url(#clip0_744_2320)"><path d="M7.33329 2.6665V1.33317C7.33329 0.966504 7.63329 0.666504 7.99996 0.666504C8.36663 0.666504 8.66663 0.966504 8.66663 1.33317V2.6665C8.66663 3.03317 8.36663 3.33317 7.99996 3.33317C7.63329 3.33317 7.33329 3.03317 7.33329 2.6665ZM12.24 4.69984L13.18 3.75317C13.44 3.49317 13.44 3.07317 13.18 2.81317C12.92 2.55317 12.5 2.55317 12.24 2.81317L11.3 3.75984C11.04 4.01984 11.04 4.43984 11.3 4.69984C11.56 4.95984 11.98 4.95984 12.24 4.69984ZM14.6666 7.33317H13.3333C12.9666 7.33317 12.6666 7.63317 12.6666 7.99984C12.6666 8.3665 12.9666 8.6665 13.3333 8.6665H14.6666C15.0333 8.6665 15.3333 8.3665 15.3333 7.99984C15.3333 7.63317 15.0333 7.33317 14.6666 7.33317ZM7.99996 12.6665C7.63329 12.6665 7.33329 12.9665 7.33329 13.3332V14.6665C7.33329 15.0332 7.63329 15.3332 7.99996 15.3332C8.36663 15.3332 8.66663 15.0332 8.66663 14.6665V13.3332C8.66663 12.9665 8.36663 12.6665 7.99996 12.6665ZM3.75996 4.69984L2.81329 3.75984C2.55329 3.49984 2.55329 3.07317 2.81329 2.81984C3.07329 2.5665 3.49996 2.55984 3.75329 2.81984L4.69329 3.75984C4.95329 4.01984 4.95329 4.4465 4.69329 4.69984C4.43329 4.95317 4.01329 4.95984 3.75996 4.69984ZM11.3 11.2998C11.04 11.5598 11.04 11.9865 11.3 12.2398L12.24 13.1798C12.5 13.4398 12.9266 13.4398 13.18 13.1798C13.44 12.9198 13.44 12.4932 13.18 12.2398L12.24 11.2998C11.9866 11.0398 11.56 11.0398 11.3 11.2998ZM1.33329 8.6665H2.66663C3.03329 8.6665 3.33329 8.3665 3.33329 7.99984C3.33329 7.63317 3.03329 7.33317 2.66663 7.33317H1.33329C0.966626 7.33317 0.666626 7.63317 0.666626 7.99984C0.666626 8.3665 0.966626 8.6665 1.33329 8.6665ZM3.75996 13.1865L4.69996 12.2465C4.95996 11.9865 4.95996 11.5598 4.69996 11.3065C4.43996 11.0532 4.01329 11.0465 3.75996 11.3065L2.81996 12.2465C2.55996 12.5065 2.55996 12.9332 2.81996 13.1865C3.07329 13.4465 3.49996 13.4465 3.75996 13.1865ZM7.99996 3.99984C5.79329 3.99984 3.99996 5.79317 3.99996 7.99984C3.99996 10.2065 5.79329 11.9998 7.99996 11.9998C10.2066 11.9998 12 10.2065 12 7.99984C12 5.79317 10.2066 3.99984 7.99996 3.99984Z" fill="currentColor"></path></g><defs><clipPath id="clip0_744_2320"><rect width="16" height="16" fill="currentColor"></rect></clipPath></defs></svg>
</button>
<button id="langBtn" class="theme-toggle lang-toggle" type="button" data-i18n-title="nav.langToggle" data-i18n-aria-label="nav.langToggle"><span class="lang-label"></span></button>
</div>
</header>
<div class="layout">
<aside class="sidebar">
<section class="panel" id="myPanel">
<div class="panel-title" data-i18n="panel.profile"></div>
<div class="profile-card" id="profileCard"></div>
<div class="my-trades-row">
<button id="buyHistoryBtn" class="btn ghost my-trades-btn" type="button" data-i18n-title="panel.viewTrades">
<span class="my-trades-label" data-i18n="panel.tradeHistory"></span><span id="buyCount" class="mono">0</span>
</button>
<button id="ordersBtn" class="btn ghost my-trades-btn" type="button" data-i18n-title="panel.viewOrders">
<span class="my-trades-label" data-i18n="panel.openOrders"></span><span id="ordersCount" class="mono">0</span>
</button>
<button id="inventoryBtn" class="btn ghost my-trades-btn" type="button" data-i18n-title="panel.viewHoldings">
<span class="my-trades-label" data-i18n="panel.holdings"></span><span id="inventoryCount" class="mono">0</span>
</button>
<button id="cardBookBtn" class="btn ghost my-trades-btn" type="button" data-i18n-title="panel.viewCardBook">
<span class="my-trades-label" data-i18n="panel.cardBook"></span><span id="cardBookCount" class="mono">0</span>
</button>
<button id="dropStatsBtn" class="btn ghost my-trades-btn" type="button" data-i18n-title="panel.viewDropStats">
<span class="my-trades-label" data-i18n="panel.dropStats"></span><span id="dropStatsCount" class="mono">0</span>
</button>
<button id="marketDataBtn" class="btn ghost my-trades-btn" type="button" data-i18n-title="panel.viewMarketData">
<span class="my-trades-label" data-i18n="panel.marketData"></span><span id="marketDataCount" class="mono">0</span>
</button>
</div>
</section>
<section class="panel collapsed" id="configPanel">
<div class="panel-title panel-collapse-head" id="configToggle">
<span data-i18n="cfg.budgetPool"></span>
<span class="collapse-caret"></span>
</div>
<div class="panel-body" id="budgetBody">
<div class="th-group-title" data-i18n="cfg.budgetTotal"></div>
<div class="budget-row">
<input id="budgetTotal" class="th-input" type="number" min="0" data-i18n-placeholder="cfg.budgetTotalPh" />
</div>
<button id="budgetReset" class="seg-btn mini" type="button" data-i18n-title="cfg.budgetResetHint" data-i18n="cfg.budgetReset" style="width:100%; margin-top:10px"></button>
<div class="panel-hint" data-i18n="cfg.budgetDesc"></div>
</div>
</section>
<section class="panel">
<div class="panel-title" data-i18n="panel.dataMgmt"></div>
<div class="actions-row">
<button id="exportBtn" class="btn ghost" type="button" data-i18n="panel.export"></button>
<button id="importBtn" class="btn ghost" type="button" data-i18n="panel.import"></button>
</div>
</section>
<section class="panel collapsed" id="tokenPanel">
<div class="panel-title panel-collapse-head" id="tokenToggle">
<span data-i18n="token.title">API 令牌</span>
<span class="token-badge" id="tokenBadge" data-i18n="token.unset">未设置</span>
<span class="collapse-caret"></span>
</div>
<div class="panel-body" id="tokenBody">
<div class="site-row">
<label class="site-label" data-i18n="site.label"></label>
<select id="siteSelect" class="th-input site-select"></select>
<span class="site-api" id="siteApi"></span>
</div>
<div class="token-input-wrap">
<input id="tokenField" class="th-input token-field" type="text" readonly data-i18n-placeholder="token.placeholderEmpty" autocomplete="off" spellcheck="false">
<button id="tokenEditIcon" class="token-icon-btn" type="button" data-i18n-title="token.edit" data-i18n-aria-label="token.edit">✎</button>
</div>
<div class="actions-row token-edit-actions" id="tokenEditActions" hidden>
<button id="tokenSaveBtn" class="btn primary" type="button" data-i18n="token.save">保存并验证</button>
</div>
<div class="token-msg" id="tokenMsg"></div>
</div>
</section>
<div id="versionBox" class="signature version-box"></div>
</aside>
<main class="main" id="mainArea">
<!-- 回到顶部按钮（absolute 浮于主区右下角，滚动后由 JS 显隐） -->
<button id="backTopBtn" class="back-top" type="button" data-i18n-title="nav.backToTop" data-i18n-aria-label="nav.backToTop">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M8 2L13 9L10 9L10 14L6 14L6 9L3 9Z" fill="currentColor"/></svg>
<span class="back-top-label" data-i18n="nav.backToTop"></span>
</button>
<div class="main-toolbar">
<div id="resultSummary" class="result-summary" data-i18n="card.empty"></div>
<div class="toolbar-right">
<button id="backToMarketBtn" class="btn ghost back-btn" type="button" style="display:none" data-i18n="card.backToMarket"></button>
<div id="budgetBarMobile" class="budget-mobile"></div>
</div>
</div>
<!-- 市场 view 筛选区（原 sidebar「市场设置」面板迁入；仅 market view 显示） -->
<div id="marketFilter" class="market-filter" style="display:none">
<div class="mf-row">
<span class="chip-group-label" data-i18n="search.directed"></span>
<div id="searchTagBox" class="chips search-tag-box"></div>
</div>
<div class="mf-row mf-filter-row">
<span class="chip-group-label" data-i18n="cfg.rarity"></span>
<div id="rarityBox" class="chips"></div>
<span class="chip-group-label" data-i18n="cfg.mech"></span>
<div id="mechBox" class="chips"></div>
<button id="thresholdToggle" class="mf-th-entry" type="button">
<span data-i18n="cfg.priceThreshold"></span>
<span id="thresholdCurrent" class="mf-th-current"></span>
<span class="mf-caret">▾</span>
</button>
</div>
<div class="mf-row mf-filter-row">
<span class="chip-group-label" data-i18n="search.titleLabel"></span>
<div id="titleFilterBox" class="chips"></div>
</div>
<div class="mf-row">
<span class="chip-group-label" data-i18n="cfg.pageSize"></span>
<div id="pageSizeBox" class="seg mini"></div>
</div>
</div>
<div id="tradeStats" class="trade-stats" style="display:none"></div>
<div id="ordersStats" class="trade-stats" style="display:none"></div>
<div id="ordersSearch" class="trades-search" style="display:none">
<div id="orderRarityBox" class="chips"></div>
<label class="ts-exact" data-i18n-title="search.exactHint">
<input id="orderExact" type="checkbox" />
<span data-i18n="search.exact"></span>
</label>
<input id="orderSearchText" class="th-input ts-grow" type="search" data-i18n-placeholder="search.orderPh" />
<input id="orderDateFrom" class="th-input ts-date" type="date" data-i18n-title="search.dateFrom" />
<span class="ts-sep">~</span>
<input id="orderDateTo" class="th-input ts-date" type="date" data-i18n-title="search.dateTo" />
<button id="orderSearchClear" class="seg-btn mini" type="button" data-i18n="search.clear"></button>
<button id="ordersSortBtn" class="seg-btn mini" type="button"></button>
</div>
<div id="tradesSearch" class="trades-search" style="display:none">
<div id="tradeRarityBox" class="chips"></div>
<label class="ts-exact" data-i18n-title="search.exactHint">
<input id="tradeExact" type="checkbox" />
<span data-i18n="search.exact"></span>
</label>
<input id="tradeSearchText" class="th-input ts-grow" type="search" data-i18n-placeholder="search.tradePh" />
<input id="tradeDateFrom" class="th-input ts-date" type="date" data-i18n-title="search.dateFrom" />
<span class="ts-sep">~</span>
<input id="tradeDateTo" class="th-input ts-date" type="date" data-i18n-title="search.dateTo" />
<button id="tradeSearchClear" class="seg-btn mini" type="button" data-i18n="search.clear"></button>
<button id="tradesSortBtn" class="seg-btn mini" type="button"></button>
</div>
<div id="inventoryStats" class="trade-stats" style="display:none"></div>
<div id="cardBookView" class="card-book" style="display:none"></div>
<div id="inventorySearch" class="trades-search" style="display:none">
<div id="inventoryRarityBox" class="chips"></div>
<label class="ts-exact" data-i18n-title="search.exactHint">
<input id="inventoryExact" type="checkbox" />
<span data-i18n="search.exact"></span>
</label>
<input id="inventorySearchText" class="th-input ts-grow" type="search" data-i18n-placeholder="search.invPh" />
<button id="inventorySearchClear" class="seg-btn mini" type="button" data-i18n="search.clear"></button>
<button id="inventorySortBtn" class="seg-btn mini" type="button"></button>
</div>
<div id="dropStatsView" class="drop-stats" style="display:none"></div>
<div id="portraitView" class="portrait-view" style="display:none"></div>
<div id="marketDataView" class="market-data-view" style="display:none"></div>
<div id="gridToolbar" class="grid-toolbar">
<button id="refreshBtn" class="grid-refresh" type="button" data-i18n-title="market.refresh" data-i18n-aria-label="market.refresh">
<svg class="refresh-icon" width="14" height="14" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M13.5 8a5.5 5.5 0 1 1-1.6-3.9" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/><path d="M13.8 1.8v2.7h-2.7" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<div id="modeBox" class="seg mini"></div>
</div>
<div id="grid" class="grid"></div>
</main>
</div>
<!-- 价格阈值 + 预设方案 模态窗（市场筛选条「价格阈值」入口弹出） -->
<div id="thresholdModal" class="modal-mask" hidden>
<div class="modal th-modal">
<div class="modal-head">
<div class="modal-icon">$</div>
<div class="modal-title" data-i18n="cfg.priceThreshold"></div>
</div>
<div class="modal-body">
<div class="threshold-card">
<span class="th-card-tag" data-i18n="cfg.thresholdInstant"></span>
<div id="thresholdBox" class="threshold-list"></div>
</div>
<div class="preset-card">
<div class="th-group-title" data-i18n="cfg.preset"></div>
<div class="preset-row">
<input id="presetName" class="th-input" type="text" data-i18n-placeholder="cfg.presetNamePh" />
<button id="presetSave" class="seg-btn mini" data-i18n="common.save"></button>
</div>
<div id="presetList" class="preset-list"></div>
</div>
</div>
</div>
</div>
<!-- 批量操作模态（卖出/取消/改价共用；遮罩不关，只能 × 关） -->
<div id="batchModal" class="modal-mask" hidden>
<div class="modal batch-dialog">
<div class="modal-head">
<div class="modal-title" id="batchModalTitle"></div>
<button id="batchModalClose" class="modal-x" type="button">✕</button>
</div>
<div id="batchModalBody" class="modal-body"></div>
<div id="batchModalFooter" class="modal-foot"></div>
</div>
</div>
<!-- 批量选择悬浮面板（点卡片选择后浮现：计数 + 批量操作 + 清除） -->
<div id="batchFloating" class="batch-floating" hidden>
<div id="batchFloatCount" class="batch-float-count"></div>
<div id="batchFloatActions" class="batch-float-actions"></div>
<button id="batchFloatClear" class="seg-btn mini" type="button" data-i18n="batch.clear"></button>
</div>
<div id="tokenModal" class="token-modal" hidden>
<div class="token-modal-box">
<div class="token-modal-title" data-i18n="token.modalTitle"></div>
<div class="token-modal-hint">
<span data-i18n="token.modalHintPre"></span>
<a id="labUrl" href="https://kp.m-team.cc/usercp?tab=laboratory" target="_blank" rel="noopener">https://kp.m-team.cc/usercp?tab=laboratory</a>
<span data-i18n="token.modalHintPost"></span>
</div>
<div class="token-modal-site">
<label class="site-pick-label" data-i18n="site.pickPrompt"></label>
<select id="tokenModalSite" class="th-input site-select">
<option value="kp.m-team.cc">https://kp.m-team.cc/</option>
<option value="zp.m-team.io">https://zp.m-team.io/</option>
</select>
</div>
<label class="token-modal-consent-row">
<input id="tokenModalConsent" type="checkbox" />
<span data-i18n="token.modalConsent"></span>
</label>
<input id="tokenModalInput" class="th-input" type="password" data-i18n-placeholder="token.modalPlaceholder" autocomplete="off" spellcheck="false">
<div class="token-msg" id="tokenModalMsg"></div>
<div class="token-modal-actions">
<button id="tokenModalSave" class="btn primary" type="button" data-i18n="token.modalSave" disabled></button>
</div>
</div>
</div>
<script src="shared.js"></script>
<script src="portrait.js"></script>
<script src="marketStats.js"></script>
<script src="locales/zh.js"></script>
<script src="locales/en.js"></script>
<script src="dashboard.js"></script>
</body>
</html>