Skip to content

feat(token): replace native date picker with Flatpickr #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wjl2023 wants to merge 7 commits into
base: main
Choose a base branch
from
Open

feat(token): replace native date picker with Flatpickr #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5e20cc7
feat(token): replace native datetime-local with Flatpickr datepicker
wjl2023 May 27, 2026
875b5a1
fix(token/flatpickr): dark mode calendar + friendlier date display
wjl2023 May 27, 2026
dd4168a
style(flatpickr): align calendar font-family and font-size with app
wjl2023 May 27, 2026
3b1d647
style(flatpickr): bold month/year header for better visibility
wjl2023 May 27, 2026
615a6b0
style(flatpickr): bold + normalize header font-size to 13px
wjl2023 May 27, 2026
2cdfec6
fix(token): remove duplicate placeholder text from date inputs
wjl2023 May 27, 2026
6752a6e
chore: remove dev notebook from PR branch
wjl2023 May 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
227 changes: 0 additions & 227 deletions FRONTEND_BEAUTY_NOTEBOOK.md
View file
Open in desktop

This file was deleted.

13 changes: 8 additions & 5 deletions frontends/desktop/static/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2352,8 +2352,9 @@ async function tokPollBridge() {

function tokGetFiltered() {
let records = tokLoadHistory();
const since = tokSince?.value ? new Date(tokSince.value).getTime()/1000 : 0;
const until = tokUntil?.value ? new Date(tokUntil.value).getTime()/1000 : 0;
const parseD = v => v ? new Date(v.replace(/\s+/,'T')).getTime()/1000 : 0;
const since = parseD(tokSince?.value);
const until = parseD(tokUntil?.value);
if (since) records = records.filter(r=>r.ts>=since);
if (until) records = records.filter(r=>r.ts<=until);
return records;
Expand Down Expand Up @@ -2405,10 +2406,12 @@ function tokRenderTable(records) {
}

async function loadTokenPage(){await tokPollBridge();const f=tokGetFiltered();const all=tokLoadHistory();tokRenderStats(f,all);tokRenderTable(f);}
if(tokSince)tokSince.addEventListener('change',()=>{_tokPage=0;loadTokenPage();});
if(tokUntil)tokUntil.addEventListener('change',()=>{_tokPage=0;loadTokenPage();});
/* Flatpickr 初始化 */
const _fpOpts = { enableTime:true, time_24hr:true, dateFormat:'Y-m-d H:i', locale:window.flatpickr?.l10ns?.[document.documentElement.lang==='en'?'default':'zh']||'default', allowInput:false, onChange(){ _tokPage=0; loadTokenPage(); } };
const fpSince = tokSince ? flatpickr(tokSince, _fpOpts) : null;
const fpUntil = tokUntil ? flatpickr(tokUntil, _fpOpts) : null;
const tokResetBtn=document.getElementById('tok-reset');
if(tokResetBtn)tokResetBtn.addEventListener('click',()=>{if(tokSince)tokSince.value='';if(tokUntil)tokUntil.value='';_tokPage=0;loadTokenPage();});
if(tokResetBtn)tokResetBtn.addEventListener('click',()=>{if(fpSince)fpSince.clear();if(fpUntil)fpUntil.clear();_tokPage=0;loadTokenPage();});
nav.addEventListener('click',(e)=>{const item=e.target.closest('.nav-item');if(item&&item.dataset.page==='token')loadTokenPage();if(item&&item.dataset.page==='channels')renderChannelList(gaServiceStore.list());if(item&&item.dataset.page==='status')loadStatusPanel();});
/* ═══════════════ 自定义预设 ═══════════════ */
const CP_KEY = 'ga_custom_presets';
Expand Down
8 changes: 6 additions & 2 deletions frontends/desktop/static/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css" crossorigin="anonymous">
<!-- highlight.js: 代码高亮 -->
<link id="hljs-theme" rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css" crossorigin="anonymous">
<!-- Flatpickr: 日期选择器 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.css" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/l10n/zh.js" crossorigin="anonymous"></script>
<!-- DEV 脚手架(标注模式)：删本行 + 下方 annot.js 一行即可彻底移除 -->
<link rel="stylesheet" href="annot.css">
<script>
Expand Down Expand Up @@ -192,9 +196,9 @@
<div class="page-title" data-i18n="page.token.title"></div>
<div class="tok-filter">
<label data-i18n="tok.from"></label>
<input type="datetime-local" id="tok-since">
<input type="text" id="tok-since" class="tok-date" readonly>
<label data-i18n="tok.to"></label>
<input type="datetime-local" id="tok-until">
<input type="text" id="tok-until" class="tok-date" readonly>
<button class="tok-reset" id="tok-reset" data-i18n="tok.reset"></button>
</div>
<div class="stat-row">
Expand Down
36 changes: 33 additions & 3 deletions frontends/desktop/static/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -728,10 +728,40 @@ html[data-boot-has-sessions] .chat-start{ display:none !important; }
/* token 汇总卡 */
.tok-filter{ display:flex; align-items:center; gap:8px; margin:12px 0; flex-wrap:wrap; }
.tok-filter label{ font-size:12px; color:var(--muted); }
.tok-filter input[type="datetime-local"]{
.tok-date{
border:1px solid var(--line); border-radius:6px; padding:5px 8px;
font-size:12px; background:var(--field-bg); color:var(--txt);
}
font-size:12px; background:var(--field-bg); color:var(--txt); cursor:pointer;
width:160px;
}
.tok-date:focus{ border-color:var(--blue); outline:none; }
/* Flatpickr 主题覆盖 — 全部使用项目 CSS 变量 */
.flatpickr-calendar{
background:var(--card) !important; border:1px solid var(--line) !important; border-radius:var(--radius) !important;
box-shadow:var(--shadow-pop) !important; font-family:inherit !important; font-size:13px !important;
}
.flatpickr-months .flatpickr-month,
.flatpickr-current-month{ color:var(--txt) !important; fill:var(--txt) !important; font-weight:600 !important; }
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year{ color:var(--txt) !important; background:var(--field-bg) !important; font-weight:600 !important; font-size:13px !important; }
.flatpickr-weekdays{ background:var(--field-bg) !important; }
span.flatpickr-weekday{ color:var(--muted) !important; font-size:11px; }
.flatpickr-day{
color:var(--txt) !important; border-radius:6px;
}
.flatpickr-day:hover{ background:var(--hover-2) !important; border-color:transparent !important; }
.flatpickr-day.today{ border-color:var(--blue) !important; }
.flatpickr-day.selected{ background:var(--blue) !important; color:var(--on-accent) !important; border-color:var(--blue) !important; }
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay{ color:var(--muted2) !important; }
.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm{ color:var(--txt) !important; background:var(--field-bg) !important; }
.flatpickr-time input:hover,
.flatpickr-time input:focus{ background:var(--hover-2) !important; }
.numInputWrapper:hover{ background:var(--hover-2) !important; }
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month{ fill:var(--txt-2) !important; }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg{ fill:var(--txt) !important; }
.tok-reset{
border:1px solid var(--line); border-radius:6px; padding:5px 10px;
font-size:12px; background:var(--field-bg); color:var(--muted); cursor:pointer;
Expand Down