[refactor] use Time & Time Range components to render all Date Time texts#74
Merged
[refactor] use Time & Time Range components to render all Date Time texts#74
Conversation
|
Caution Review failedPull request was closed or merged during review 📝 WalkthroughWalkthrough将本地实现的倒计时与生肖条组件迁移至外部库 Changes
Sequence Diagram(s)sequenceDiagram
participant Client
participant HackathonHero as Hero (页面)
participant AgendaCountdown as AgendaCountdown (组件)
participant IdeaReact as idea-react Countdown
Client->>Hero: 请求页面（客户端渲染）
Hero->>AgendaCountdown: 动态导入（ssr: false）
AgendaCountdown->>IdeaReact: 渲染 Countdown (itemClassName, units)
IdeaReact-->>AgendaCountdown: 倒计时渲染与更新
AgendaCountdown-->>Hero: 渲染完成（包含时间 UI）
Hero-->>Client: 返回已渲染内容
Estimated code review effort🎯 3 (中等) | ⏱️ ~20 分钟 Possibly related PRs
Suggested labels
诗一首
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Review rate limit: 0/1 reviews remaining, refill in 60 minutes.Comment |
There was a problem hiding this comment.
Pull request overview
Refactors date/time-related UI to rely on idea-react components (notably Countdown and ZodiacBar), while updating dependencies to idea-react@2.2 and related packages.
Changes:
- Upgraded
idea-reactto^2.2.0(plus small dependency bumps likemarked,web-utility,eslint). - Replaced local
Countdown/ZodiacBarimplementations withidea-reactequivalents and updated call sites. - Switched Hackathon countdown rendering to a client-only dynamic import and adjusted styling hooks.
Reviewed changes
Copilot reviewed 8 out of 9 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| pnpm-lock.yaml | Locks upgraded dependencies (idea-react, eslint, marked, web-utility, etc.). |
| package.json | Bumps runtime/dev dependency versions to align with the refactor and migration. |
| pages/hackathon/[id].tsx | Uses idea-react’s TimeUnit for countdown unit construction. |
| pages/NGO/index.tsx | Migrates ZodiacBar usage to idea-react. |
| components/Activity/Hackathon/Hero.tsx | Loads AgendaCountdown via next/dynamic (SSR disabled) and updates TimeUnit typing source. |
| components/Activity/Hackathon/AgendaCountdown.tsx | Uses idea-react Countdown and exports the component as default for dynamic import. |
| components/Activity/Hackathon/AgendaCountdown.module.less | Moves countdown item styling to a class hook (.item) to match itemClassName. |
| components/Base/ZodiacBar.tsx | Removes in-repo ZodiacBar implementation (replaced by idea-react). |
| components/Base/Countdown.tsx | Removes in-repo Countdown implementation (replaced by idea-react). |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
Comment on lines
+11
to
+12
| const AgendaCountdown = dynamic(() => import('./AgendaCountdown'), { ssr: false }); | ||
|
|
There was a problem hiding this comment.
dynamic(() => import('./AgendaCountdown')) loses the component’s prop typing (it becomes ComponentType<any>), which can hide incorrect props being passed from this file. Consider exporting/importing AgendaCountdownProps and providing it as the generic to dynamic<AgendaCountdownProps>(...) (or otherwise typing the dynamic component) to keep type-safety.
Comment on lines
+23
to
25
| .item { | ||
| gap: 0.7rem; | ||
| box-shadow: |
There was a problem hiding this comment.
The countdown item styling was switched from li to .item, but the mobile override in the @media (max-width: 767px) block still targets li. To avoid relying on the underlying DOM tag (especially after switching to itemClassName), update the media-query selector to target .item as well so the responsive styles keep applying.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
components/Activity/Hackathon/AgendaCountdown.module.less (1)
23-31:⚠️ Potential issue | 🟡 Minor | ⚡ Quick win把移动端选择器也同步到
.item。基础样式已经切到
.item了，但媒体查询里还在写li，这会让小屏下的最小高度和字号回退跟新结构脱节。建议把这里也改成.item，保持桌面和移动端一致。建议修复
`@media` (max-width: 767px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); - li { + .item { min-height: 96px; strong { font-size: 2rem;Also applies to: 51-63
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@components/Activity/Hackathon/AgendaCountdown.module.less` around lines 23 - 31, Mobile breakpoint selectors still target "li" while base styles moved to ".item", causing small-screen min-height and font-size to fall back; update the media query rules (the blocks currently selecting "li" around the mobile styles, referenced in the same file and again at the 51-63 region) to target ".item" instead so the min-height, font-size and other responsive adjustments apply to the new ".item" element consistently.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@components/Activity/Hackathon/Hero.tsx`:
- Line 11: Hero 的客户端懒加载 AgendaCountdown 会导致首屏缺少高度、内容被下移；在动态导入（const
AgendaCountdown = dynamic(...)) 时提供一个固定高度的 loading shell 或在 Hero
里渲染占位元素以稳住布局，确保加载完成前 CTA/视觉区块不会位移；定位到 AgendaCountdown 动态导入和 Hero 组件，将 loading
占位返回一个与实际倒计时高度相同的静态占位 DOM（或样式化容器）以保持布局稳定。
---
Outside diff comments:
In `@components/Activity/Hackathon/AgendaCountdown.module.less`:
- Around line 23-31: Mobile breakpoint selectors still target "li" while base
styles moved to ".item", causing small-screen min-height and font-size to fall
back; update the media query rules (the blocks currently selecting "li" around
the mobile styles, referenced in the same file and again at the 51-63 region) to
target ".item" instead so the min-height, font-size and other responsive
adjustments apply to the new ".item" element consistently.
🪄 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: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 2e26ec5b-fc56-430c-8d5a-ed073ae6f1ba
⛔ Files ignored due to path filters (2)
package.jsonis excluded by none and included by nonepnpm-lock.yamlis excluded by!**/pnpm-lock.yaml,!pnpm-lock.yamland included by none
📒 Files selected for processing (7)
components/Activity/Hackathon/AgendaCountdown.module.lesscomponents/Activity/Hackathon/AgendaCountdown.tsxcomponents/Activity/Hackathon/Hero.tsxcomponents/Base/Countdown.tsxcomponents/Base/ZodiacBar.tsxpages/NGO/index.tsxpages/hackathon/[id].tsx
💤 Files with no reviewable changes (2)
- components/Base/ZodiacBar.tsx
- components/Base/Countdown.tsx
| import { TimeUnit } from '../../Base/Countdown'; | ||
| import styles from './Hero.module.less'; | ||
|
|
||
| const AgendaCountdown = dynamic(() => import('./AgendaCountdown'), { ssr: false }); |
There was a problem hiding this comment.
给倒计时补一个首屏占位，避免 hydration 后推挤 hero 内容。
这里把 AgendaCountdown 切成了客户端懒加载，首屏会先少掉一块高度，CTA 和视觉区块会在 chunk 到达后下移。建议保留一个固定高度的 loading shell，至少把布局占位先稳住。
建议修复
const AgendaCountdown = dynamic(() => import('./AgendaCountdown'), {
ssr: false,
+ loading: () => <div style={{ minHeight: 120 }} />,
});🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@components/Activity/Hackathon/Hero.tsx` at line 11, Hero 的客户端懒加载
AgendaCountdown 会导致首屏缺少高度、内容被下移；在动态导入（const AgendaCountdown = dynamic(...))
时提供一个固定高度的 loading shell 或在 Hero 里渲染占位元素以稳住布局，确保加载完成前 CTA/视觉区块不会位移；定位到
AgendaCountdown 动态导入和 Hero 组件，将 loading 占位返回一个与实际倒计时高度相同的静态占位
DOM（或样式化容器）以保持布局稳定。
…exts Co-authored-by: Copilot <copilot@github.com>
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
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 by CodeRabbit
新功能
样式
重构