feat(ui): redesign wallet/transactions views on the landed component layer - #156
Merged
Conversation
…layer Adapt the wallet and transactions views to the new high-fidelity prototype (rant 2026-09-11T16:23:43, section 6/7), keeping every existing behaviour the prototype does not cover. Wallet: - page-head gains a crumb; wallet-hero shows the big balance with unit, the permanent-points hint and primary/secondary action buttons - topup presets become prototype .chip elements (select state .on) and now include the 5000 preset Transactions: - summary bar becomes a .stat-grid of 5 .stat-card entries (expense / income / net / tokens / record count) using the shared component layer; the pager count moves to a toolbar #tx-count - trend card renders the prototype dual-bar .trend chart (consume vs earn) from the same /api/transactions/trend payload; buckets are zero-filled over the requested window so the x axis stays left-to-right chronological with a constant bar pitch (the backend GROUP BY omits days without transactions) - detail card gets a heading and card-sub, and the CSV export button moves to the page head, matching the prototype Preserved on purpose (prototype does not show these): the whole column filter row (stable DOM, delegated events, IME guard), the 24h and custom time range (including the datetime-local inputs), server-side pagination with page size switching, the three-tier token breakdown titles and the withdraw/gift types. CSS: .toolbar > select is width:auto (the column-filter .th-filter inherits width:100%, which stretched the time range dropdown across the whole row), dead .tx-summary/.tx-trend selectors removed. i18n gains the new keys, ZH/EN stay at exact parity (733 keys each).
argszero
added a commit
that referenced
this pull request
Sep 11, 2026
发布 v0.7.21（rant 2026-09-11T21:03:06）。 - Cargo.toml / Cargo.lock: 0.7.20 → 0.7.21 - ui/index.html: cache-bust ?v=20260911-2 → ?v=20260911-3（5 处资源引用） - CHANGELOG.md: 新增 v0.7.21 条目，概括 6 片全站 UI 重设计 （#152 OKLCH 设计 token 层 / #153 登录页左右分栏 + 侧边栏 / #154 共享组件层 / #155 仪表盘·市场·共享 / #156 钱包·交易 / #157 设置·管理·运营） 本次为纯前端改动，后端契约未变；部署结构不变（数据库仍留 NAS，不启用 WAL）。 Gates: cargo test 148 passed / cargo fmt --check clean / cargo clippy clean / node --check x4 / i18n ZH-EN 762=762 exact parity. Co-authored-by: argszero <argszero@argszerodeMac-mini.local>
16 tasks
argszero
added a commit
that referenced
this pull request
Sep 13, 2026
…e's x axis is time (#218) `GET /api/dashboard`'s `series` was a sparse day-bucket list: `GROUP BY date(time)` emits a row only for days that actually have transactions, and `ui/js/app.js::renderMonthChanges` feeds that list straight into `sparkline()`, which places point i at an INDEX-based x (`pad + i*(w - 2*pad)/(len - 1)`) rather than at its date. Days without transactions were therefore collapsed instead of being shown as zero: * a week with a single active day degenerated to a lone `M` command, i.e. no line at all, while the number above it still rendered; * a week with two active days was drawn as one straight line across the full 7-day width, claiming a trend the data does not support. Every sibling time series in this tree is zero-filled to its own window and says why: `routes/ops.rs::runtime` fills hours 0..23 ('若不补零前端柱状图会 整体左移'), `app.js::dashTrendDays` and `app.js::txTrendDays` fill their day buckets, and the guest branch of this very function always hands over 7 points. This was the only consumer that did not, so treat it as the omission it is: `f525242` (#79) wired the sparse series up and the siblings were fixed afterwards (#155/#156 and the ops PR6). Fix: build the window with a recursive CTE (today plus the previous 6 days, UTC) and a LEFT JOIN whose ON clause carries the user filter. The filter has to stay in the JOIN condition: in WHERE it would drop exactly the empty days this change exists to add. Only `src/routes/wallet.rs` changes; the window semantics (a 7-day day-key window anchored on date('now', '-6 days'), UTC) and the `month` / `net` windows of C2049 are untouched. Evidence, all driven through the real router: - `dashboard_series_is_a_zero_filled_seven_day_window`: 7 rows, ascending, the date set compared against chrono (`Utc::now()`) as an independent authority rather than derived from the CTE. - `dashboard_series_zero_fills_inside_the_user_and_the_window`: per-day values equal a plain per-day SUM for the same user; another user's row inside the window and this user's row outside it never appear; a positive control re-checks a zero-filled day after a later transaction lands on it. - `wallet_summary_and_dashboard`'s `!series.is_empty()` (trivially true once the window is filled) is rewritten into the shape assertion it meant. - A/B, each mutation applied alone and reverted with the file's md5 restored: the pre-change sparse query reddens 3 tests (including both new ones); an off-by-one window (`-5 days`) reddens 2, a different set; carrying the user filter in WHERE reddens those same 3; comparing a datetime column against a date key reddens exactly 1 (the value test). Unmutated tree: 222 passed, 0 failed. - jsdom end-to-end (real `ui/index.html` plus the four real scripts, only `fetch` stubbed), fed the exact series the patched handler returns: 7 points / 6 line segments / 7 tooltips, against 1 point / 0 segments for the pre-change shape. The 14-day bar chart on the same page keeps rendering 14 columns in every leg. Display / API shape only: no ledger, balance or settlement change. No `ui/` or i18n key touched, so the i18n gate counts are unchanged. `cargo fmt --check` and `cargo clippy --all-targets -- -D warnings` are clean; `cargo test` goes from 220 to 222.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fifth slice of the full console UI redesign — the wallet and transactions views, adapted to the new prototype (
docs/prototype/aitokenpool-console.html) while keeping every existing behaviour the prototype does not cover.Source instruction (verbatim, for traceability): the host rant
2026-09-11T16:23:43Related Issue
None — this repository currently has zero open issues; the work is driven by the host rant quoted above. Previous slices: #152 (design tokens), #153 (login + sidebar), #154 (component layer), #155 (dashboard / marketplace / sharing).
Changes
wallet-heronow shows the big balance with the点unit plus the permanent-points hint, and splits the actions into primary (top-up) / secondary (raise request, withdraw-disabled) buttons. Top-up presets switched to prototype.chipelements (selected state.on) and gained the5000preset..stat-gridof five.stat-cardentries (expense / income / net / tokens / record count) built on the shared component layer from feat(ui): add shared component layer (stat-card/pill/tag/toolbar/bar-list) + define missing button variants (rant 2026-09-11, PR3) #154; the record count also appears in the toolbar as#tx-count, and the CSV export button moved to the page head as in the prototype.#tx-trendrenders the prototype dual-bar.trend(consume vs earn) from the same/api/transactions/trendpayload. Buckets are zero-filled across the requested window, so the x axis stays left-to-right chronological with a constant bar pitch — the backendGROUP BYonly returns buckets that have transactions, and the missing rows are exactly what shifted the bars in the prototype.24handcustomtime ranges including thedatetime-localinputs, server-side pagination with page-size switching,tokenBrkbreakdown titles, and thewithdraw/giftfilter types..toolbar > selectiswidth:auto; the column-filter.th-filtercarrieswidth:100%for table cells, which stretched the time-range dropdown across the whole row. Dead.tx-summary/.tx-trendselectors removed. Component-only change, no build step.Tests
cargo test— 148 passed / 0 failedcargo fmt --check— clean;cargo clippy --all-targets -- -D warnings— cleannode --checkonapp.js,i18n.js,api.js,data.jsdata-i18nkey resolves<select>is ~109px wide instead of full width, the trend renders 11 left-to-right columns over a 603px chart, and the month rows are presentChecklist
feat/)