feat(frontend): 首页大盘 Dashboard 布局与样式优化 - #11
Open
JinnanDuan wants to merge 1 commit into
Open
Conversation
- 最新批次：环形图中心展示总用例数，侧栏同系蓝紫配色 - 批次信息右侧面板栅格化、垂直居中与白卡片填充 - 移除冗余标题与操作说明文案 - master / bugfix 趋势图改为纵向堆叠 - 标题字体与全局及侧栏 DT-Report 对齐 Made-with: Cursor
|
Note Currently processing new changes in this PR. This may take a few minutes, please wait... ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment Tip CodeRabbit can use TruffleHog to scan for secrets in your code with verification capabilities.Add a TruffleHog config file (e.g. trufflehog-config.yml, trufflehog.yml) to your project to customize detectors and scanning behavior. The tool runs only when a config file is present. |
|
Note Docstrings generation - SUCCESS |
coderabbitai Bot
added a commit
that referenced
this pull request
Apr 25, 2026
Docstrings generation was requested by @JinnanDuan. * #11 (comment) The following files were modified: * `frontend/src/pages/dashboard/DashboardPage.tsx`
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@frontend/src/pages/dashboard/DashboardPage.tsx`:
- Line 307: The combined boolean branchChartsLoading = masterTrendLoading ||
bugfixTrendLoading hides one branch's chart when the other is still loading;
change the rendering to use each branch's own loading flag (masterTrendLoading
and bugfixTrendLoading) instead of a shared branchChartsLoading. Locate uses of
branchChartsLoading (and the related render blocks for master/bugfix charts,
referenced near the DashboardPage render and the card code around the other
affected region) and replace them so each chart/card shows its ready state
independently (e.g., render master chart when !masterTrendLoading and bugfix
chart when !bugfixTrendLoading, or pass the individual loading props to the
chart components) so one slow request no longer blocks the other chart.
- Around line 32-37: The success detection misses the Chinese word "通过", so
update the logic where raw, fail, and ok are computed in DashboardPage (the
label -> raw conversion and subsequent checks) to treat "通过" as success: add
raw.includes("通过") to the ok condition (the variable named ok) so the Tag color
selection (color={fail ? "error" : ok ? "success" : "processing"}) will render
Chinese success results correctly.
🪄 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 Plus
Run ID: 4759ee08-78a0-4fa7-a7c0-c85226589f4e
📒 Files selected for processing (1)
frontend/src/pages/dashboard/DashboardPage.tsx
Comment on lines
+32
to
+37
| const raw = label.toLowerCase(); | ||
| const fail = raw.includes("fail") || raw.includes("失败") || raw.includes("error"); | ||
| const ok = raw.includes("pass") || raw.includes("成功") || raw === "success"; | ||
| return ( | ||
| <Tag | ||
| color={fail ? "error" : ok ? "success" : "processing"} |
There was a problem hiding this comment.
Treat 通过 as a success state too.
This helper already special-cases 失败, but 通过 currently falls through to processing, so Chinese success results will render with the wrong semantic color.
Suggested fix
- const ok = raw.includes("pass") || raw.includes("成功") || raw === "success";
+ const ok =
+ raw.includes("pass") ||
+ raw.includes("通过") ||
+ raw.includes("成功") ||
+ raw === "success";🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@frontend/src/pages/dashboard/DashboardPage.tsx` around lines 32 - 37, The
success detection misses the Chinese word "通过", so update the logic where raw,
fail, and ok are computed in DashboardPage (the label -> raw conversion and
subsequent checks) to treat "通过" as success: add raw.includes("通过") to the ok
condition (the variable named ok) so the Tag color selection (color={fail ?
"error" : ok ? "success" : "processing"}) will render Chinese success results
correctly.
| [bugfixTrendItems] | ||
| ); | ||
|
|
||
| const branchChartsLoading = masterTrendLoading || bugfixTrendLoading; |
There was a problem hiding this comment.
Don't block both branch charts behind one shared loading gate.
masterTrendLoading || bugfixTrendLoading means one slow branch request hides the other branch's ready chart. This regresses partial-data visibility and makes the combined card feel slower than the old split layout.
Suggested fix
- const branchChartsLoading = masterTrendLoading || bugfixTrendLoading;
+ const noBranchData =
+ !masterTrendLoading &&
+ !bugfixTrendLoading &&
+ masterTrendItems.length === 0 &&
+ bugfixTrendItems.length === 0;
...
- {branchChartsLoading ? (
- <div style={{ textAlign: "center", padding: 48 }}>
- <Spin />
- </div>
- ) : masterTrendItems.length === 0 && bugfixTrendItems.length === 0 ? (
+ {noBranchData ? (
<div style={{ padding: 40, textAlign: "center", color: "#8c8c8c" }}>暂无趋势数据</div>
) : (
<Row gutter={[20, 24]}>
<Col span={24}>
<Typography.Text strong style={{ display: "block", marginBottom: 8, color: "#434343" }}>
master
</Typography.Text>
- {masterOption ? (
+ {masterTrendLoading ? (
+ <div style={{ textAlign: "center", padding: 48 }}>
+ <Spin />
+ </div>
+ ) : masterOption ? (
<ReactECharts
option={masterOption}
style={{ height: 360 }}
onEvents={{
click: createChartClickHandler(masterTrendItems),
}}
/>
) : (
<div style={{ padding: 32, textAlign: "center", color: "#8c8c8c" }}>暂无 master 数据</div>
)}
</Col>
<Col span={24}>
<Typography.Text strong style={{ display: "block", marginBottom: 8, color: "#434343" }}>
bugfix
</Typography.Text>
- {bugfixOption ? (
+ {bugfixTrendLoading ? (
+ <div style={{ textAlign: "center", padding: 48 }}>
+ <Spin />
+ </div>
+ ) : bugfixOption ? (
<ReactECharts
option={bugfixOption}
style={{ height: 360 }}
onEvents={{
click: createChartClickHandler(bugfixTrendItems),
}}
/>Also applies to: 481-521
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@frontend/src/pages/dashboard/DashboardPage.tsx` at line 307, The combined
boolean branchChartsLoading = masterTrendLoading || bugfixTrendLoading hides one
branch's chart when the other is still loading; change the rendering to use each
branch's own loading flag (masterTrendLoading and bugfixTrendLoading) instead of
a shared branchChartsLoading. Locate uses of branchChartsLoading (and the
related render blocks for master/bugfix charts, referenced near the
DashboardPage render and the card code around the other affected region) and
replace them so each chart/card shows its ready state independently (e.g.,
render master chart when !masterTrendLoading and bugfix chart when
!bugfixTrendLoading, or pass the individual loading props to the chart
components) so one slow request no longer blocks the other chart.
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.
变更范围
仅
frontend/src/pages/dashboard/DashboardPage.tsx，不涉及后端与侧栏路由。内容摘要
验证
本地已执行
pnpm exec tsc -b通过。请 Review 后合入；请勿在本 PR 中直接合入生产前未确认的分支策略。
Made with Cursor
Summary by CodeRabbit
New Features
UI/UX Improvements