fix: 修复余额溢出，添加省略号处理

[auuunya]

余额较长会导致溢出，添加 text-truncate style. 修改后效果如上。

后续：
是否考虑是否需要添加鼠标移动上去展示完整内容

Summary by CodeRabbit

• Style
  • Standardized CSS formatting across stylesheets, including font declarations, pseudo-elements, and property declarations.
  • Added new text truncation utility class for handling text overflow.
  • Applied text truncation styling to balance display element for improved layout handling.

[coderabbitai]

📝 Walkthrough

Walkthrough

CSS formatting standards are applied across the stylesheet with the addition of a new .text-truncate utility class. This utility is subsequently applied to the balance stat display in the Dashboard component to handle text overflow with truncation.

Changes

Cohort / File(s)	Summary
CSS Styling Updates src/web/index.css	Standardized font declarations, pseudo-element content values (single to double quotes), and multi-line formatting for color-mix and transition declarations. Added new .text-truncate utility class for text overflow handling. Removed extra whitespace from keyframes blocks.
Dashboard Integration src/web/pages/Dashboard.tsx	Applied text-truncate CSS class to the balance stat value element alongside existing stat-value and animate-count-up classes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

A utility class hops into view,
With text-truncate magic, both shiny and new,
The balance stat dons its elegant cloak,
Where overflow ends with an ellipsis stroke... 🐰✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title clearly describes the main change: fixing balance overflow and adding ellipsis handling, which matches the core modification (adding text-truncate class to handle long balance values).

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

src/web/index.css (1)

1615-1620: Consider making the .text-truncate utility more flexible.

The utility currently forces display: block, which may not work well in all contexts (e.g., inline or flex layouts where inline-block behavior is needed). While it works for the current usage in Dashboard.tsx, future uses might encounter layout issues.

♻️ Proposed enhancement for flexibility

 .text-truncate {
-  display: block;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  /* Let the element's natural display work, or use with inline-block/block as needed */
+  min-width: 0; /* Helps with flex containers */
 }

Alternatively, provide explicit variants if block display is required:

.text-truncate-block {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-truncate-inline {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/web/index.css` around lines 1615 - 1620, The .text-truncate utility
currently forces display: block which can break inline or flex contexts; update
the stylesheet so .text-truncate does not hardcode display (use only
white-space, overflow, and text-overflow) and add explicit variants for contexts
that need a specific display: create .text-truncate-block (keeps display: block)
and .text-truncate-inline (uses display: inline-block and max-width: 100%) so
callers can choose the appropriate class instead of relying on a fixed display
behavior.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/web/pages/Dashboard.tsx`:
- Around line 656-658: The balance display div using className "stat-value
animate-count-up text-truncate" hides the full amount; update the element that
renders ${totalBalance.toFixed(2)} (the balance display in Dashboard.tsx) to
include a tooltip/title attribute showing the full formatted value (e.g.,
totalBalance.toFixed(2) or totalBalance.toLocaleString with decimals) so users
can see the exact amount on hover; alternatively, replace/add a proper Tooltip
component around the same element but ensure the tooltip content uses the same
formatted full value (reference the totalBalance variable and the stat-value
element).

---

Nitpick comments:
In `@src/web/index.css`:
- Around line 1615-1620: The .text-truncate utility currently forces display:
block which can break inline or flex contexts; update the stylesheet so
.text-truncate does not hardcode display (use only white-space, overflow, and
text-overflow) and add explicit variants for contexts that need a specific
display: create .text-truncate-block (keeps display: block) and
.text-truncate-inline (uses display: inline-block and max-width: 100%) so
callers can choose the appropriate class instead of relying on a fixed display
behavior.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: c6d04a03-99eb-4b78-acc6-ae3544ccd525

📥 Commits

Reviewing files that changed from the base of the PR and between 8cf78a5 and 8502dd3.

📒 Files selected for processing (2)

• src/web/index.css
• src/web/pages/Dashboard.tsx

[coderabbitai]

⚠️ Potential issue | 🟠 Major

Add a tooltip to show the full balance value.

The text-truncate class will hide overflow with ellipsis, but users currently have no way to see the complete balance amount. This creates an accessibility issue, especially for financial data where precision matters.

♿ Proposed fix to add a title attribute

-              <div className="stat-value animate-count-up text-truncate">
+              <div className="stat-value animate-count-up text-truncate" title={`$${totalBalance.toFixed(2)}`}>
                 ${totalBalance.toFixed(2)}
               </div>

Alternatively, consider implementing a proper tooltip component (as mentioned in the PR description) for better UX.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	<div className="stat-value animate-count-up text-truncate">
	${totalBalance.toFixed(2)}
	</div>
	<div className="stat-value animate-count-up text-truncate" title={`$${totalBalance.toFixed(2)}`}>
	${totalBalance.toFixed(2)}
	</div>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/web/pages/Dashboard.tsx` around lines 656 - 658, The balance display div
using className "stat-value animate-count-up text-truncate" hides the full
amount; update the element that renders ${totalBalance.toFixed(2)} (the balance
display in Dashboard.tsx) to include a tooltip/title attribute showing the full
formatted value (e.g., totalBalance.toFixed(2) or totalBalance.toLocaleString
with decimals) so users can see the exact amount on hover; alternatively,
replace/add a proper Tooltip component around the same element but ensure the
tooltip content uses the same formatted full value (reference the totalBalance
variable and the stat-value element).

[cita-777]

也许可以考虑在展示层对超大金额进行合理的单位换算与缩写处理，比如将长串数字格式化为“$12.5M”或“$10.4K”的形式？直接省略用户无法查看具体金额