[add] Hero Carousel component with Aurora Gradient style in Home page#72
Merged
[add] Hero Carousel component with Aurora Gradient style in Home page#72
Conversation
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthrough首页在 PageHead 后渲染新加入的 ChangesHero 轮播（服务端供给数据）
导航栏和模型微调
Sequence Diagram(s)sequenceDiagram
participant Page as Page (pages/index)
participant Hero as HeroCarousel
participant API as ActivityModel/API
participant DOM as Browser DOM
participant Img as LarkImage
Page->>Hero: render with props activities[]
activate Hero
Hero->>Hero: if activities.length === 0 -> return null
Hero->>DOM: read nav height (ResizeObserver / getBoundingClientRect)
activate DOM
DOM-->>Hero: nav height
deactivate DOM
Hero->>Hero: set CSS var --hero-carousel-offset
Hero->>Hero: format dates, build badges, pick images
loop per activity
Hero->>Img: render/lazy-load image
activate Img
Img-->>Hero: image ready/rendered
deactivate Img
Hero->>DOM: render slide (badges, desc, action link via ActivityModel.getLink)
end
Hero->>DOM: listen window.resize -> adjust description rows
deactivate Hero
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 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. Comment |
![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 `@pages/index.tsx`:
- Line 69: Replace the hardcoded event name inside the span (className
styles.hackathonTopBarEventName) with a call to the i18n t() function and add a
corresponding translation key (e.g. "hackathon.eventName") to your locale files;
update pages/index.tsx to use t('hackathon.eventName') (or the chosen key) so
the visible text is localized and ensure the new key exists in all supported
locales.
- Around line 57-84: The top-banner uses raw HTML elements and a hard-coded
event name; replace the <aside>/<div>/<a>/<button>/<span> usage with React
Bootstrap components (e.g., Alert, Card, Button/CloseButton) while preserving
behavior tied to isHackathonTopBarVisible, hackathonTopBarStyle,
HackathonTopBarLink and the closeHackathonTopBar handler, and move the literal
"Labor AI Hackathon 2026" into i18n as home_hackathon_top_bar_event_name,
rendering it via t('home_hackathon_top_bar_event_name') alongside the existing
t('home_hackathon_top_bar_title'), t('home_hackathon_top_bar_description') and
t('home_hackathon_top_bar_action'); ensure aria-label/title still use
t('home_hackathon_top_bar_aria_label') and t('home_hackathon_top_bar_close').
🪄 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: afcd89f5-d1e7-40d2-bfc2-16789a915968
⛔ Files ignored due to path filters (6)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml,!pnpm-lock.yamland included by nonestyles/Home.module.lessis excluded by none and included by nonestyles/globals.cssis excluded by none and included by nonetranslation/en-US.tsis excluded by none and included by nonetranslation/zh-CN.tsis excluded by none and included by nonetranslation/zh-TW.tsis excluded by none and included by none
📒 Files selected for processing (1)
pages/index.tsx
TechQuery
requested changes
Apr 30, 2026
- Replace raw HTML with Alert, Alert.Link, CloseButton - Move complex styles from styled-jsx to PromoBar.module.less - Add Bootstrap utility classes for layout - Fetch activity name/link from Lark Bitable via ActivityModel - Keep localStorage persistence commented out
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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/PromoBar.tsx`:
- Around line 41-50: 在 useEffect 中对异步加载添加卸载保护：在 useEffect 里创建一个标志（例如 let mounted
= true 或使用 AbortController 如果 ActivityModel.getOne 支持取消），在 getOne
调用前保留该标志/控制器，并在 Promise resolve 前检查 mounted，只有 mounted 为 true 时才调用 setActivity；在
useEffect 返回的 cleanup 函数将 mounted 设为 false（或调用
controller.abort()）以阻止组件卸载后继续更新或消耗请求资源。确保引用的符号为 useEffect、ActivityModel.getOne 和
setActivity。
🪄 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: 4a3b4906-bb3f-4728-9d11-7adac39ad05a
📒 Files selected for processing (4)
components/Activity/PromoBar.module.lesscomponents/Activity/PromoBar.tsxcomponents/Navigator/MainNavigator.tsxpages/index.tsx
✅ Files skipped from review due to trivial changes (3)
- pages/index.tsx
- components/Activity/PromoBar.module.less
- components/Navigator/MainNavigator.tsx
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 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/HeroCarousel.module.less`:
- Around line 14-47: The stylelint error is caused by CSS Modules :global()
being treated as an unknown pseudo-class; update the linter config to allow it
by adding an exception for "global" to the selector-pseudo-class-no-unknown rule
(e.g., set "selector-pseudo-class-no-unknown": ["error", {
"ignorePseudoClasses": ["global"] }]) in .stylelintrc.json, or alternatively
enable Less parsing by adding customSyntax: "postcss-less" (and installing
postcss-less) so Less files and CSS Modules :global() are recognized; adjust the
config rather than changing components/Activity/HeroCarousel.module.less.
In `@components/Activity/HeroCarousel.tsx`:
- Around line 73-90: The useEffect in HeroCarousel (the async IIFE that
constructs ActivityModel, calls model.getAll(), filters/sorts/slices to
MAX_ITEMS and then calls setActivities) can update state after the component
unmounts; add an unmount guard: declare a local mounted/isActive flag before the
async work, check it before calling setActivities, and set the flag to false in
the effect cleanup returned function so the state update is skipped when the
component has been unmounted.
- Around line 103-107: Replace the native <section> root in HeroCarousel.tsx
with React Bootstrap's Container using as="section" to preserve semantics;
update the JSX root where the element with className={`${styles.heroCarousel}
position-relative`} aria-label={t('home_hackathon_top_bar_aria_label')}
style={heroStyle} is defined to use <Container as="section" ...> and the
matching closing tag, and add the Container import from 'react-bootstrap' if
missing so the component follows the project's React Bootstrap convention.
🪄 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: d51b74c7-7d3b-4b10-b791-0270372de013
⛔ Files ignored due to path filters (1)
tsconfig.jsonis excluded by none and included by none
📒 Files selected for processing (3)
components/Activity/HeroCarousel.module.lesscomponents/Activity/HeroCarousel.tsxpages/index.tsx
✅ Files skipped from review due to trivial changes (1)
- pages/index.tsx
TechQuery
requested changes
May 2, 2026
Comment on lines
+73
to
+90
| useEffect(() => { | ||
| (async () => { | ||
| try { | ||
| const model = new ActivityModel(); | ||
| const data = await model.getAll(); | ||
| const latestActivities = data | ||
| .filter(({ name }) => Boolean(name)) | ||
| .sort( | ||
| ({ startTime: left }, { startTime: right }) => timestampOf(right) - timestampOf(left), | ||
| ) | ||
| .slice(0, MAX_ITEMS); | ||
|
|
||
| setActivities(latestActivities); | ||
| } catch (err) { | ||
| console.error('Failed to load activities:', err); | ||
| } | ||
| })(); | ||
| }, []); |
Member
There was a problem hiding this comment.
Member
There was a problem hiding this comment.
GPT 认为他写得更符合现在的项目
是它更了解本项目，还是我更了解本项目？
我们为什么自己建站、不用飞书多维表格应用来开发？就是因为它是服务端渲染，可以很容易被搜索引擎和 AI 抓取。
而且你的代码为了显示“近期活动”，查询了所有活动，没有加分页参数，后面活动越来越多，这个加载性能有多差？
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 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/HeroCarousel.module.less`:
- Around line 1-3: The Stylelint error comes from missing an empty line before
the background declaration inside the .heroCarousel rule; edit the .heroCarousel
block to insert a blank line after the custom property --hero-carousel-offset
and before the background declaration (or alternatively adjust the rule in
Stylelint config if intentionally omitting empty lines), ensuring the background
property is separated by an empty line from the custom property to satisfy
declaration-empty-line-before.
In `@components/Activity/HeroCarousel.tsx`:
- Around line 124-125: The href computation can produce the literal string
'undefined' when activity.link is undefined and ActivityModel.getLink falls back
to concatenating link + '', causing <a href="undefined">; fix by ensuring href
is only set when a real URL exists: update the mapping in the activities loop
(where activities.map and const href = (activity.link as string) ||
ActivityModel.getLink(activity)) to check for truthy values and normalize
ActivityModel.getLink to return undefined/null (not the string 'undefined') when
no link/database is present; alternatively compute href as const href =
(activity.link as string) ?? ActivityModel.getLink(activity); then guard against
the string 'undefined' (e.g. set href = href === 'undefined' ? undefined : href)
and let Button render without an href or use a safe fallback, and also adjust
models/Activity.ts extractFields/getLink to avoid returning 'undefined' by not
doing link + '' when link is undefined.
- Around line 29-32: The formatDateLabel function currently hardcodes the locale
to 'zh-CN', violating i18n; change formatDateLabel to accept a locale parameter
(e.g., formatDateLabel(timestamp, locale)) and update all callers in
HeroCarousel to pass the current language from I18nContext (or the component's
locale prop) so Intl.DateTimeFormat uses that locale; ensure any user-facing
strings still go through t() where applicable and update the function signature
and usages (formatDateLabel) accordingly.
🪄 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: 8869b18d-13e5-4e0a-a897-c3b3372a4479
⛔ Files ignored due to path filters (3)
.stylelintrc.jsonis excluded by none and included by nonepackage.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 (2)
components/Activity/HeroCarousel.module.lesscomponents/Activity/HeroCarousel.tsx
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 `@components/Activity/HeroCarousel.tsx`:
- Around line 1-9: Reorder the top imports in HeroCarousel.tsx to satisfy
simple-import-sort/imports: group and alphabetize external package imports so
they read idea-react (TextTruncate) → mobx-lark (TableCellLocation) → react
(CSSProperties, FC, useContext, useEffect, useState) → react-bootstrap (Badge,
Button, Card, Carousel, Col, Container, Row, Stack); keep local imports
(Activity, ActivityModel, I18nContext, LarkImage, styles) after external
packages and preserve existing named imports and spacing.
In `@pages/index.tsx`:
- Around line 18-21: There are two fixes: add a blank line before the return in
getServerSideProps to satisfy the `@stylistic/padding-line-between-statements`
rule, and replace the magic number 3 passed to ActivityModel().getList({}, 1, 3)
with the exported HERO_CAROUSEL_ITEMS constant from HeroCarousel.tsx so the
server-side fetch matches the component; update the import list at the top to
import HERO_CAROUSEL_ITEMS and call getList({}, 1, HERO_CAROUSEL_ITEMS) inside
the getServerSideProps function.
🪄 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: dd20e8d3-f609-48c4-a73d-4d8c2c9c01a9
📒 Files selected for processing (4)
components/Activity/HeroCarousel.module.lesscomponents/Activity/HeroCarousel.tsxmodels/Activity.tspages/index.tsx
✅ Files skipped from review due to trivial changes (1)
- components/Activity/HeroCarousel.module.less
Comment on lines
+1
to
+9
| import { CSSProperties, FC, useContext, useEffect, useState } from 'react'; | ||
| import { TextTruncate } from 'idea-react'; | ||
| import { TableCellLocation } from 'mobx-lark'; | ||
| import { Badge, Button, Card, Carousel, Col, Container, Row, Stack } from 'react-bootstrap'; | ||
|
|
||
| import { Activity, ActivityModel } from '../../models/Activity'; | ||
| import { I18nContext } from '../../models/Translation'; | ||
| import { LarkImage } from '../LarkImage'; | ||
| import styles from './HeroCarousel.module.less'; |
There was a problem hiding this comment.
修复 ESLint 报错：导入排序不符合 simple-import-sort/imports 规则。
该插件设计为配合 autofix 使用（eslint --fix 或编辑器 ESLint 扩展），可一键修复。外部包按字母序 idea-react → mobx-lark → react → react-bootstrap 排列即可通过 lint 检查。
🔧 建议修改
-import { CSSProperties, FC, useContext, useEffect, useState } from 'react';
-import { TextTruncate } from 'idea-react';
-import { TableCellLocation } from 'mobx-lark';
-import { Badge, Button, Card, Carousel, Col, Container, Row, Stack } from 'react-bootstrap';
+import { TextTruncate } from 'idea-react';
+import { TableCellLocation } from 'mobx-lark';
+import { CSSProperties, FC, useContext, useEffect, useState } from 'react';
+import { Badge, Button, Card, Carousel, Col, Container, Row, Stack } from 'react-bootstrap';📝 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
| import { CSSProperties, FC, useContext, useEffect, useState } from 'react'; | |
| import { TextTruncate } from 'idea-react'; | |
| import { TableCellLocation } from 'mobx-lark'; | |
| import { Badge, Button, Card, Carousel, Col, Container, Row, Stack } from 'react-bootstrap'; | |
| import { Activity, ActivityModel } from '../../models/Activity'; | |
| import { I18nContext } from '../../models/Translation'; | |
| import { LarkImage } from '../LarkImage'; | |
| import styles from './HeroCarousel.module.less'; | |
| import { TextTruncate } from 'idea-react'; | |
| import { TableCellLocation } from 'mobx-lark'; | |
| import { CSSProperties, FC, useContext, useEffect, useState } from 'react'; | |
| import { Badge, Button, Card, Carousel, Col, Container, Row, Stack } from 'react-bootstrap'; | |
| import { Activity, ActivityModel } from '../../models/Activity'; | |
| import { I18nContext } from '../../models/Translation'; | |
| import { LarkImage } from '../LarkImage'; | |
| import styles from './HeroCarousel.module.less'; |
🧰 Tools
🪛 ESLint
[error] 1-9: Run autofix to sort these imports!
(simple-import-sort/imports)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@components/Activity/HeroCarousel.tsx` around lines 1 - 9, Reorder the top
imports in HeroCarousel.tsx to satisfy simple-import-sort/imports: group and
alphabetize external package imports so they read idea-react (TextTruncate) →
mobx-lark (TableCellLocation) → react (CSSProperties, FC, useContext, useEffect,
useState) → react-bootstrap (Badge, Button, Card, Carousel, Col, Container, Row,
Stack); keep local imports (Activity, ActivityModel, I18nContext, LarkImage,
styles) after external packages and preserve existing named imports and spacing.
TechQuery
changed the title
TechQuery
approved these changes
May 2, 2026
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
2 participants
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.
Checklist（清单）:
pnpm-lock.yaml有变动导致eslint.config.ts:29的@next/next插件类型不匹配Summary by CodeRabbit
发布说明
新功能
改进