🏆 Enhanced Open Collaborator Award - Complete TypeScript Integration (90 TQT$ Bounty)#61
Open
macakii327-prog wants to merge 1 commit intoOpen-Source-Bazaar:mainfrom
Conversation
…lementation 🎯 Complete integrated solution beating Flask competitor: ✨ Features: - 🏆 Dedicated Open Collaborator Award page with modern React UI - 📝 Real-time nomination form with Feishu/Lark integration - 💾 Full database integration using existing AwardModel - 📊 Award overview page with statistics and categorization - 🎨 Responsive design with Bootstrap components - 🔗 Seamless integration with existing Next.js infrastructure 🚀 Technical Advantages over Flask competitor: - TypeScript type safety vs Python dynamic typing - Existing infrastructure integration vs standalone implementation - Real Feishu API connectivity vs mock implementation - Modern React components vs basic HTML forms - Server-side rendering with Next.js vs basic Flask templates 💰 Value: 90 TQT$ bounty implementation 🔗 Issue: Open-Source-Bazaar#52 - 重构【开源市集】官网【开放协作人奖】页面
📝 WalkthroughWalkthrough该 PR 为奖励系统实现了完整的前端功能层。添加了开放协作人奖专页、奖励列表页面重构，以及提名表单、投票、数据展示等核心功能。包含服务端数据获取、类型分组和 UI 组件化。 Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~50 minutes 关键审视点：
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 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: 4
🧹 Nitpick comments (10)
pages/award/open-collaborator-award.tsx (4)
164-166:observer()包装但未使用任何 observable 状态当前组件使用
observer()包装，但内部只使用了 React 的useState，没有消费任何 MobX observable。这会增加不必要的开销。如果确实不需要响应式 MobX 状态，建议移除
observer包装：-const OpenCollaboratorAwardPage: FC<Props> = observer(({ nominations, totalNominations }) => { +const OpenCollaboratorAwardPage: FC<Props> = ({ nominations, totalNominations }) => { const [showNominationForm, setShowNominationForm] = useState(false);如果后续需要集成 MobX store，再添加
observer。🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@pages/award/open-collaborator-award.tsx` around lines 164 - 166, 组件 OpenCollaboratorAwardPage 被 observer() 包裹但没有使用任何 MobX observable（只用了 useState），请移除 observer 包裹：在定义或导出 OpenCollaboratorAwardPage 时删除对 observer 的调用（例如将 "observer(...)" 改回普通函数/组件导出），保留现有的 useState 逻辑；如果未来需要响应式 MobX 状态，再重新包装为 observer。
280-284: 避免使用数组索引作为 React key使用
index作为 key 在列表项重新排序或删除时可能导致渲染问题。建议使用 nomination 的唯一标识符。{nominations.map((nomination, index) => ( - <Col key={index}> + <Col key={nomination.nomineeName?.toString() || index}> <NominationCard nomination={nomination} /> </Col> ))}如果 Award 模型有
id字段，优先使用id。🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@pages/award/open-collaborator-award.tsx` around lines 280 - 284, The list is using the array index as the React key in the nominations.map rendering (key={index}) which can cause rendering bugs; update the map to use a stable unique identifier from the nomination object (e.g., nomination.id or another unique field) so change key={index} to key={nomination.id} (or key={nomination.<uniqueField>}) in the nominations.map that renders <NominationCard nomination={nomination} />.
61-63:createdAt类型转换可能产生无效日期如果
createdAt已经是字符串，toString()是多余的；如果是其他类型（如 Lark 的复杂对象），可能需要更健壮的解析。{nomination.createdAt && ( - <> · {new Date(nomination.createdAt.toString()).toLocaleDateString()}</> + <> · {new Date(String(nomination.createdAt)).toLocaleDateString('zh-TW')}</> )}建议添加日期解析的错误处理或使用日期工具库（如 dayjs）确保格式一致。
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@pages/award/open-collaborator-award.tsx` around lines 61 - 63, The rendering of nomination.createdAt using new Date(nomination.createdAt.toString()).toLocaleDateString() can produce invalid dates or unnecessary toString() calls; update the logic around nomination.createdAt in the component so it robustly normalizes/parses values (handle Date instances, ISO strings, and other shapes), validate the parsed date (e.g., isValid) and only call toLocaleDateString when valid, and consider using a date library like dayjs (or a safe parse + fallback) to ensure a consistent formatted output and avoid rendering "Invalid Date".
187-190: 使用window.location.reload()不是 Next.js 的惯用方式在 Next.js 中应使用
router.replace()或router.refresh()来刷新页面数据，以保持 SPA 体验和状态。♻️ 建议使用 Next.js Router
+import { useRouter } from 'next/router'; const OpenCollaboratorAwardPage: FC<Props> = ({ nominations, totalNominations }) => { + const router = useRouter(); const [showNominationForm, setShowNominationForm] = useState(false); // ... setSubmitSuccess(true); setShowNominationForm(false); // Refresh page after successful submission setTimeout(() => { - window.location.reload(); + router.replace(router.asPath); }, 2000);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@pages/award/open-collaborator-award.tsx` around lines 187 - 190, The current submit flow uses setTimeout(() => window.location.reload(), 2000) which is not idiomatic in Next.js; replace this with the Next.js Router API by obtaining the router (useRouter) in the component and calling router.refresh() or router.replace(router.asPath) after the successful submission instead of window.location.reload(), and remove the artificial 2s setTimeout delay so the refresh happens immediately once the submission promise resolves; update references to setTimeout and window.location.reload accordingly.pages/award/index.tsx (4)
159-159:observer()包装但组件未消费任何 MobX observable与
open-collaborator-award.tsx相同的问题，组件只使用 props，没有订阅任何 observable store。-const AwardPage: FC<Props> = observer(({ awards, awardTypes, totalNominations }) => { +const AwardPage: FC<Props> = ({ awards, awardTypes, totalNominations }) => {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@pages/award/index.tsx` at line 159, The AwardPage component is wrapped with observer but does not consume any MobX observables; remove the unnecessary observer wrapper around the AwardPage function (and the corresponding import) or, if you intended to react to a store, update AwardPage to read the specific observable(s) instead; locate the AwardPage declaration and either change "const AwardPage: FC<Props> = observer(({ awards, awardTypes, totalNominations }) => {" to a plain component definition without observer or add the required observable usage inside the component.
100-107: 复杂的日期计算逻辑应提取为辅助函数在 JSX 中内联
Math.max(...map(...))的复杂计算影响可读性，且在每次渲染时都会重新计算。♻️ 建议提取为辅助函数
const getLatestNominationDate = (nominations: Award[]): string => { if (nominations.length === 0) return '無'; const latestTime = Math.max( ...nominations.map(n => new Date(n.createdAt?.toString() || 0).getTime()) ); return new Date(latestTime).toLocaleDateString('zh-TW'); };然后在 JSX 中使用：
<small className="text-muted"> - 最新推薦: {awardType.nominations.length > 0 - ? new Date(Math.max(...awardType.nominations.map(n => - new Date(n.createdAt?.toString() || 0).getTime() - ))).toLocaleDateString() - : '無' - } + 最新推薦: {getLatestNominationDate(awardType.nominations)} </small>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@pages/award/index.tsx` around lines 100 - 107, Extract the inline date-calculation into a helper function (e.g. getLatestNominationDate) and replace the complex expression inside the JSX small tag with a call to that function; implement getLatestNominationDate to return '無' for empty nominations, compute the max createdAt timestamp via nominations.map(...).getTime(), then format the result with new Date(...).toLocaleDateString('zh-TW') (or desired locale) so the JSX simply renders getLatestNominationDate(awardType.nominations).
141-146:Link包裹Button可能导致嵌套<a>标签问题在 Next.js 中，
Link组件会渲染<a>标签，而Button带有href或作为链接时也可能渲染<a>，导致 HTML 嵌套无效。♻️ 建议的修改方案
方案一：使用
Link的legacyBehavior并传递passHref：<Link href="/award/open-collaborator-award" passHref legacyBehavior> <Button as="a" variant="primary" size="sm" className="flex-grow-1"> <FontAwesomeIcon icon={faEye} className="me-2" /> 查看詳情 </Button> </Link>方案二：直接使用 Button 的 href 属性（推荐）：
-<Link href="/award/open-collaborator-award" passHref> - <Button variant="primary" size="sm" className="flex-grow-1"> - <FontAwesomeIcon icon={faEye} className="me-2" /> - 查看詳情 - </Button> -</Link> +<Button + href="/award/open-collaborator-award" + variant="primary" + size="sm" + className="flex-grow-1" +> + <FontAwesomeIcon icon={faEye} className="me-2" /> + 查看詳情 +</Button>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@pages/award/index.tsx` around lines 141 - 146, The Link wrapper currently nests a Button which can produce nested <a> tags; replace the Link+Button pattern by giving the Button the link behavior directly (use Button's href prop with the destination "/award/open-collaborator-award" and remove the surrounding Link) or alternatively use Link with legacyBehavior plus passHref so Link passes the href to Button; update the JSX to use either Button href="/award/open-collaborator-award" (preferred) or Link legacyBehavior passHref to avoid nested anchors (refer to the Link and Button components in this component).
248-258: 避免使用数组索引作为 React key与
open-collaborator-award.tsx相同的问题，建议使用awardType.name作为 key，因为奖项名称应该是唯一的。{awardTypes.map((awardType, index) => ( - <Col key={index}> + <Col key={awardType.name}> <AwardTypeCard awardType={awardType}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@pages/award/index.tsx` around lines 248 - 258, The map over awardTypes uses the array index as the React key which can cause rendering bugs; change the key in the awardTypes.map callback to a stable unique identifier such as awardType.name (e.g. replace key={index} with key={awardType.name}) in the component that renders AwardTypeCard inside the map so each <Col> has a consistent key.pages/article/open-collaborator-award.mdx (2)
38-44: iframe 使用了非标准 HTML 属性
border和framespacing不是标准 HTML5 iframe 属性，可能在某些浏览器中无效。建议使用 CSS 类或样式来控制边框。♻️ 建议修改
<iframe src="//player.bilibili.com/player.html?aid=978564817&bvid=BV1c44y1x7ij&cid=494424932&page=1&high_quality=1&danmaku=0" title="开放协作人奖提名倡议" scrolling="no" - border="0" - framespacing="0" + style={{ border: 0 }} />🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@pages/article/open-collaborator-award.mdx` around lines 38 - 44, The iframe element uses non-standard attributes `border` and `framespacing`; remove those attributes from the <iframe> element and control presentation via CSS instead (e.g., add a CSS class or inline style such as border:0 and any spacing/margin rules). Locate the <iframe> in the file (the iframe with title "开放协作人奖提名倡议") and replace the deprecated attributes with a className or style attribute, then add corresponding CSS rules to your stylesheet or component styles to achieve the same visual effect.
17-33: 应使用 React Bootstrap Button 组件替代内联样式当前使用内联样式的
<a>标签作为 CTA 按钮，违反了项目规范。建议使用 React Bootstrap 的Button组件以保持 UI 一致性。♻️ 建议的改进方案
-<div style={{ textAlign: 'center', margin: '2rem 0' }}> - <a - href="/award/open-collaborator-award" - style={{ - display: 'inline-block', - backgroundColor: '#667eea', - color: 'white', - padding: '12px 24px', - textDecoration: 'none', - borderRadius: '8px', - fontWeight: 'bold', - fontSize: '1.1rem' - }} - > - 🏆 前往开放协作人奖专页 - </a> -</div> +import { Button } from 'react-bootstrap'; + +<div className="text-center my-4"> + <Button href="/award/open-collaborator-award" variant="primary" size="lg"> + 🏆 前往开放协作人奖专页 + </Button> +</div>根据编码规范：
ALWAYS use React Bootstrap components instead of custom HTML elements in UI code。🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@pages/article/open-collaborator-award.mdx` around lines 17 - 33, Replace the inline-styled <a> CTA with the React Bootstrap Button component: import Button from 'react-bootstrap/Button' and replace the anchor element with <Button variant="primary" size="lg" href="/award/open-collaborator-award" className="d-inline-block" style={{ borderRadius: '8px', fontWeight: 'bold' }}> to preserve appearance (or use Button's variant/size/className to match styles) so the CTA uses the Button component instead of a raw <a>; ensure any inline style pieces that conflict with Bootstrap are moved to className or removed and that accessibility (aria-label) and existing text "🏆 前往开放协作人奖专页" remain unchanged.
🤖 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/award/index.tsx`:
- Around line 69-157: The component currently contains hardcoded Chinese UI
strings (e.g., "推薦數", "總票數", "最新推薦", "未具名候選人", "還有 X 位候選人...", "查看詳情", "Featured
Award", and the '無' fallback), violating i18n rules; import the i18next t()
function (import { t } from 'i18next') at the top and replace every user-facing
literal in the AwardTypeCard (e.g., the Badge label, small labels, the nominee
fallback in the map, the "還有 ... 位候選人..." message using a count placeholder, the
"查看詳情" button text, and the date fallback) with t('key') calls (use plural/count
placeholders where appropriate and ensure
getAwardDescription/getAwardColor/getAwardIcon remain unchanged), and update
tests/fixtures to expect t() keys.
- Around line 122-127: Badge is using an invalid React-Bootstrap variant
bg="outline-success"; update the Badge usage around nomination.votes (the Badge
component that wraps FontAwesomeIcon and {nomination.votes}) to use a valid
variant such as bg="success" and set a contrasting text color via the text prop
(e.g., text="light") or adjust className for border/outline styling (e.g.,
bg="light" className="border border-success text-success") so the Badge renders
correctly.
In `@pages/award/open-collaborator-award.tsx`:
- Line 70: 为 NominationForm 及其提交处理器去除 any：在组件外定义一个明确的表单数据接口（例如
NominationFormData）描述所有表单字段，然后把组件的 props 改为 onSubmit: (data: NominationFormData)
=> void；同时在实现 handleNominationSubmit 的参数和内部使用处将参数类型从 any 改为 NominationFormData
并确保相关字段名一致，更新所有调用点以匹配新类型（NominationForm、onSubmit、handleNominationSubmit
三者需保持一致）。
- Around line 39-65: Replace all hard-coded Chinese UI strings in this component
with i18n calls: wrap the defaults and labels that reference nomination fields
(nomination.nomineeName, nomination.nomineeDesc, nomination.reason,
nomination.nominator, createdAt) using the t() function and appropriate
translation keys (e.g., t('award.anonymous'), t('award.noDescription'),
t('award.reasonLabel'), t('award.noReason'), t('award.nomineeUnnamed') or
project-standard keys); ensure every user-facing literal (badges, headings,
small text, and any form/button labels in this file) uses t() instead of raw
strings so the component fully conforms to the "All user-facing text MUST use
the i18n t() function" rule.
---
Nitpick comments:
In `@pages/article/open-collaborator-award.mdx`:
- Around line 38-44: The iframe element uses non-standard attributes `border`
and `framespacing`; remove those attributes from the <iframe> element and
control presentation via CSS instead (e.g., add a CSS class or inline style such
as border:0 and any spacing/margin rules). Locate the <iframe> in the file (the
iframe with title "开放协作人奖提名倡议") and replace the deprecated attributes with a
className or style attribute, then add corresponding CSS rules to your
stylesheet or component styles to achieve the same visual effect.
- Around line 17-33: Replace the inline-styled <a> CTA with the React Bootstrap
Button component: import Button from 'react-bootstrap/Button' and replace the
anchor element with <Button variant="primary" size="lg"
href="/award/open-collaborator-award" className="d-inline-block" style={{
borderRadius: '8px', fontWeight: 'bold' }}> to preserve appearance (or use
Button's variant/size/className to match styles) so the CTA uses the Button
component instead of a raw <a>; ensure any inline style pieces that conflict
with Bootstrap are moved to className or removed and that accessibility
(aria-label) and existing text "🏆 前往开放协作人奖专页" remain unchanged.
In `@pages/award/index.tsx`:
- Line 159: The AwardPage component is wrapped with observer but does not
consume any MobX observables; remove the unnecessary observer wrapper around the
AwardPage function (and the corresponding import) or, if you intended to react
to a store, update AwardPage to read the specific observable(s) instead; locate
the AwardPage declaration and either change "const AwardPage: FC<Props> =
observer(({ awards, awardTypes, totalNominations }) => {" to a plain component
definition without observer or add the required observable usage inside the
component.
- Around line 100-107: Extract the inline date-calculation into a helper
function (e.g. getLatestNominationDate) and replace the complex expression
inside the JSX small tag with a call to that function; implement
getLatestNominationDate to return '無' for empty nominations, compute the max
createdAt timestamp via nominations.map(...).getTime(), then format the result
with new Date(...).toLocaleDateString('zh-TW') (or desired locale) so the JSX
simply renders getLatestNominationDate(awardType.nominations).
- Around line 141-146: The Link wrapper currently nests a Button which can
produce nested <a> tags; replace the Link+Button pattern by giving the Button
the link behavior directly (use Button's href prop with the destination
"/award/open-collaborator-award" and remove the surrounding Link) or
alternatively use Link with legacyBehavior plus passHref so Link passes the href
to Button; update the JSX to use either Button
href="/award/open-collaborator-award" (preferred) or Link legacyBehavior
passHref to avoid nested anchors (refer to the Link and Button components in
this component).
- Around line 248-258: The map over awardTypes uses the array index as the React
key which can cause rendering bugs; change the key in the awardTypes.map
callback to a stable unique identifier such as awardType.name (e.g. replace
key={index} with key={awardType.name}) in the component that renders
AwardTypeCard inside the map so each <Col> has a consistent key.
In `@pages/award/open-collaborator-award.tsx`:
- Around line 164-166: 组件 OpenCollaboratorAwardPage 被 observer() 包裹但没有使用任何 MobX
observable（只用了 useState），请移除 observer 包裹：在定义或导出 OpenCollaboratorAwardPage 时删除对
observer 的调用（例如将 "observer(...)" 改回普通函数/组件导出），保留现有的 useState 逻辑；如果未来需要响应式 MobX
状态，再重新包装为 observer。
- Around line 280-284: The list is using the array index as the React key in the
nominations.map rendering (key={index}) which can cause rendering bugs; update
the map to use a stable unique identifier from the nomination object (e.g.,
nomination.id or another unique field) so change key={index} to
key={nomination.id} (or key={nomination.<uniqueField>}) in the nominations.map
that renders <NominationCard nomination={nomination} />.
- Around line 61-63: The rendering of nomination.createdAt using new
Date(nomination.createdAt.toString()).toLocaleDateString() can produce invalid
dates or unnecessary toString() calls; update the logic around
nomination.createdAt in the component so it robustly normalizes/parses values
(handle Date instances, ISO strings, and other shapes), validate the parsed date
(e.g., isValid) and only call toLocaleDateString when valid, and consider using
a date library like dayjs (or a safe parse + fallback) to ensure a consistent
formatted output and avoid rendering "Invalid Date".
- Around line 187-190: The current submit flow uses setTimeout(() =>
window.location.reload(), 2000) which is not idiomatic in Next.js; replace this
with the Next.js Router API by obtaining the router (useRouter) in the component
and calling router.refresh() or router.replace(router.asPath) after the
successful submission instead of window.location.reload(), and remove the
artificial 2s setTimeout delay so the refresh happens immediately once the
submission promise resolves; update references to setTimeout and
window.location.reload 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: f3c0a659-9c7f-4975-8974-347ff051d96b
📒 Files selected for processing (3)
pages/article/open-collaborator-award.mdxpages/award/index.tsxpages/award/open-collaborator-award.tsx
Comment on lines
+69
to
157
| return ( | ||
| <Card className={`h-100 shadow-sm hover-shadow-lg transition-shadow ${isOpenCollaborator ? 'border-primary' : ''}`}> | ||
| <Card.Body> | ||
| <div className="d-flex align-items-center mb-3"> | ||
| <div className={`bg-${getAwardColor(awardType.name)} bg-gradient text-white rounded-circle p-3 me-3`}> | ||
| <FontAwesomeIcon icon={getAwardIcon(awardType.name)} size="lg" /> | ||
| </div> | ||
| <div className="flex-grow-1"> | ||
| <h4 className="card-title mb-1">{awardType.name}</h4> | ||
| {isOpenCollaborator && ( | ||
| <Badge bg="primary" className="mb-2">Featured Award</Badge> | ||
| )} | ||
| </div> | ||
| </div> | ||
|
|
||
| <p className="card-text text-muted mb-4"> | ||
| {getAwardDescription(awardType.name)} | ||
| </p> | ||
|
|
||
| <div className="d-flex justify-content-between align-items-center mb-3"> | ||
| <div className="d-flex gap-3"> | ||
| <div className="text-center"> | ||
| <div className="fw-bold text-primary fs-5">{awardType.nominations.length}</div> | ||
| <small className="text-muted">推薦數</small> | ||
| </div> | ||
| <div className="text-center"> | ||
| <div className="fw-bold text-success fs-5">{awardType.totalVotes}</div> | ||
| <small className="text-muted">總票數</small> | ||
| </div> | ||
| </div> | ||
| <div className="text-end"> | ||
| <small className="text-muted"> | ||
| 最新推薦: {awardType.nominations.length > 0 | ||
| ? new Date(Math.max(...awardType.nominations.map(n => | ||
| new Date(n.createdAt?.toString() || 0).getTime() | ||
| ))).toLocaleDateString() | ||
| : '無' | ||
| } | ||
| </small> | ||
| </div> | ||
| </div> | ||
|
|
||
| {/* Recent nominations preview */} | ||
| {awardType.nominations.length > 0 && ( | ||
| <div className="border-top pt-3 mb-3"> | ||
| <small className="text-muted fw-bold">最新推薦:</small> | ||
| <div className="mt-2"> | ||
| {awardType.nominations.slice(0, 2).map((nomination, index) => ( | ||
| <div key={index} className="d-flex align-items-center mb-1"> | ||
| <FontAwesomeIcon icon={faUsers} className="text-muted me-2" size="sm" /> | ||
| <span className="small text-truncate"> | ||
| {nomination.nomineeName || '未具名候選人'} | ||
| </span> | ||
| {nomination.votes && Number(nomination.votes) > 0 && ( | ||
| <Badge bg="outline-success" className="ms-auto"> | ||
| <FontAwesomeIcon icon={faHeart} className="me-1" size="sm" /> | ||
| {nomination.votes} | ||
| </Badge> | ||
| )} | ||
| </div> | ||
| ))} | ||
| {awardType.nominations.length > 2 && ( | ||
| <small className="text-muted"> | ||
| 還有 {awardType.nominations.length - 2} 位候選人... | ||
| </small> | ||
| )} | ||
| </div> | ||
| </div> | ||
| )} | ||
|
|
||
| <div className="d-flex gap-2"> | ||
| {isOpenCollaborator ? ( | ||
| <Link href="/award/open-collaborator-award" passHref> | ||
| <Button variant="primary" size="sm" className="flex-grow-1"> | ||
| <FontAwesomeIcon icon={faEye} className="me-2" /> | ||
| 查看詳情 | ||
| </Button> | ||
| </Link> | ||
| ) : ( | ||
| <Button variant="outline-primary" size="sm" className="flex-grow-1"> | ||
| <FontAwesomeIcon icon={faEye} className="me-2" /> | ||
| 查看詳情 | ||
| </Button> | ||
| )} | ||
| </div> | ||
| </Card.Body> | ||
| </Card> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
AwardTypeCard 组件中所有 UI 文本需要国际化
组件中大量硬编码的中文文本违反 i18n 规范，包括：
- "表彰在開源領域展現卓越協作精神..."
- "推薦數"、"總票數"、"最新推薦"
- "未具名候選人"、"還有 X 位候選人..."
- "查看詳情"、"Featured Award"
建议使用 t() 函数：
import { t } from 'i18next';
// 示例
<small className="text-muted">{t('nomination_count')}</small>
<span>{nomination.nomineeName || t('unnamed_candidate')}</span>根据编码规范：All user-facing text MUST use the i18n t() function (no hardcoded strings)。
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@pages/award/index.tsx` around lines 69 - 157, The component currently
contains hardcoded Chinese UI strings (e.g., "推薦數", "總票數", "最新推薦", "未具名候選人", "還有
X 位候選人...", "查看詳情", "Featured Award", and the '無' fallback), violating i18n
rules; import the i18next t() function (import { t } from 'i18next') at the top
and replace every user-facing literal in the AwardTypeCard (e.g., the Badge
label, small labels, the nominee fallback in the map, the "還有 ... 位候選人..."
message using a count placeholder, the "查看詳情" button text, and the date
fallback) with t('key') calls (use plural/count placeholders where appropriate
and ensure getAwardDescription/getAwardColor/getAwardIcon remain unchanged), and
update tests/fixtures to expect t() keys.
Comment on lines
+122
to
+127
| {nomination.votes && Number(nomination.votes) > 0 && ( | ||
| <Badge bg="outline-success" className="ms-auto"> | ||
| <FontAwesomeIcon icon={faHeart} className="me-1" size="sm" /> | ||
| {nomination.votes} | ||
| </Badge> | ||
| )} |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
What are the valid variant values for React Bootstrap Badge bg prop in version 2.10?
💡 Result:
The valid variant values for the React Bootstrap Badge bg prop in version 2.10 are: "primary", "secondary", "success", "danger", "warning", "info", "light", "dark". Any string is technically accepted due to TypeScript union with string for custom variants, but the standard Bootstrap-provided styles use these 8 values.
Citations:
- 1: https://react-bootstrap.netlify.app/docs/components/badge
- 2: https://react-bootstrap-v5.netlify.app/components/badge/
- 3: https://www.jsdocs.io/package/react-bootstrap
- 4: https://react-bootstrap.github.io/docs/components/buttons/
- 5: https://react-bootstrap.github.io/docs/components/alerts
- 6: https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Card.tsx
🏁 Script executed:
cd /tmp && find . -name "index.tsx" -path "*/award/*" 2>/dev/null | head -5Repository: Open-Source-Bazaar/Open-Source-Bazaar.github.io
Length of output: 73
🏁 Script executed:
git ls-files | grep -E "(pages/award|components)" | head -20Repository: Open-Source-Bazaar/Open-Source-Bazaar.github.io
Length of output: 979
🏁 Script executed:
# Check for the award index file
fd "index.tsx" pages/award 2>/dev/null || fd "index" pages/award 2>/dev/nullRepository: Open-Source-Bazaar/Open-Source-Bazaar.github.io
Length of output: 112
🏁 Script executed:
cat -n pages/award/index.tsx | sed -n '120,130p'Repository: Open-Source-Bazaar/Open-Source-Bazaar.github.io
Length of output: 661
🏁 Script executed:
cat -n pages/award/index.tsx | head -50Repository: Open-Source-Bazaar/Open-Source-Bazaar.github.io
Length of output: 2043
🏁 Script executed:
rg "t\(" pages/award/index.tsx | head -10Repository: Open-Source-Bazaar/Open-Source-Bazaar.github.io
Length of output: 182
🏁 Script executed:
rg "Badge|Button|Link" pages/award/index.tsx -A 2 -B 1Repository: Open-Source-Bazaar/Open-Source-Bazaar.github.io
Length of output: 2311
🏁 Script executed:
cat -n pages/award/index.tsx | sed -n '140,160p'Repository: Open-Source-Bazaar/Open-Source-Bazaar.github.io
Length of output: 948
🏁 Script executed:
wc -l pages/award/index.tsxRepository: Open-Source-Bazaar/Open-Source-Bazaar.github.io
Length of output: 116
🏁 Script executed:
cat -n pages/award/index.tsx | tail -50Repository: Open-Source-Bazaar/Open-Source-Bazaar.github.io
Length of output: 2237
🏁 Script executed:
cat -n pages/award/index.tsx | sed -n '1,15p'Repository: Open-Source-Bazaar/Open-Source-Bazaar.github.io
Length of output: 870
React Bootstrap Badge 不支持 outline-* 变体
bg="outline-success" 不是有效的 React Bootstrap 2.10 Badge 变体。Badge 仅支持 8 个标准变体：primary、secondary、success、danger、warning、info、light、dark。
修复建议
使用 bg="success" 配合 text 属性：
-<Badge bg="outline-success" className="ms-auto">
+<Badge bg="success" text="dark" className="ms-auto">或使用浅色背景搭配边框：
-<Badge bg="outline-success" className="ms-auto">
+<Badge bg="light" text="success" className="ms-auto border border-success">📝 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
| {nomination.votes && Number(nomination.votes) > 0 && ( | |
| <Badge bg="outline-success" className="ms-auto"> | |
| <FontAwesomeIcon icon={faHeart} className="me-1" size="sm" /> | |
| {nomination.votes} | |
| </Badge> | |
| )} | |
| {nomination.votes && Number(nomination.votes) > 0 && ( | |
| <Badge bg="success" text="dark" className="ms-auto"> | |
| <FontAwesomeIcon icon={faHeart} className="me-1" size="sm" /> | |
| {nomination.votes} | |
| </Badge> | |
| )} |
Suggested change
| {nomination.votes && Number(nomination.votes) > 0 && ( | |
| <Badge bg="outline-success" className="ms-auto"> | |
| <FontAwesomeIcon icon={faHeart} className="me-1" size="sm" /> | |
| {nomination.votes} | |
| </Badge> | |
| )} | |
| {nomination.votes && Number(nomination.votes) > 0 && ( | |
| <Badge bg="light" text="success" className="ms-auto border border-success"> | |
| <FontAwesomeIcon icon={faHeart} className="me-1" size="sm" /> | |
| {nomination.votes} | |
| </Badge> | |
| )} |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@pages/award/index.tsx` around lines 122 - 127, Badge is using an invalid
React-Bootstrap variant bg="outline-success"; update the Badge usage around
nomination.votes (the Badge component that wraps FontAwesomeIcon and
{nomination.votes}) to use a valid variant such as bg="success" and set a
contrasting text color via the text prop (e.g., text="light") or adjust
className for border/outline styling (e.g., bg="light" className="border
border-success text-success") so the Badge renders correctly.
Comment on lines
+39
to
+65
| {nomination.nomineeName || '未具名被推薦者'} | ||
| </h5> | ||
| <Badge bg="success" className="fs-6"> | ||
| <FontAwesomeIcon icon={faHeart} className="me-1" /> | ||
| {nomination.votes || 0} | ||
| </Badge> | ||
| </div> | ||
|
|
||
| <p className="card-text text-muted mb-3"> | ||
| {nomination.nomineeDesc || '暫無描述'} | ||
| </p> | ||
|
|
||
| <div className="border-top pt-3"> | ||
| <h6 className="text-secondary mb-2">推薦理由</h6> | ||
| <p className="small text-dark"> | ||
| {nomination.reason || '暫無推薦理由'} | ||
| </p> | ||
| </div> | ||
|
|
||
| <div className="border-top pt-2 mt-3"> | ||
| <small className="text-muted"> | ||
| 推薦人: {nomination.nominator || '匿名'} | ||
| {nomination.createdAt && ( | ||
| <> · {new Date(nomination.createdAt.toString()).toLocaleDateString()}</> | ||
| )} | ||
| </small> | ||
| </div> |
There was a problem hiding this comment.
所有用户界面文本必须使用 i18n t() 函数
当前组件中的所有中文文本都是硬编码的，违反了项目国际化规范。这影响了应用的多语言支持能力。
示例修改：
+import { t } from 'i18next';
<h5 className="card-title text-primary mb-0">
<FontAwesomeIcon icon={faUsers} className="me-2" />
- {nomination.nomineeName || '未具名被推薦者'}
+ {nomination.nomineeName || t('unnamed_nominee')}
</h5>需要将所有硬编码文本替换为 t() 调用，包括：
- "未具名被推薦者"、"暫無描述"、"推薦理由"、"暫無推薦理由"
- "推薦人:"、"匿名"
- 表单标签、按钮文本、提示信息等
根据编码规范：All user-facing text MUST use the i18n t() function (no hardcoded strings)。
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@pages/award/open-collaborator-award.tsx` around lines 39 - 65, Replace all
hard-coded Chinese UI strings in this component with i18n calls: wrap the
defaults and labels that reference nomination fields (nomination.nomineeName,
nomination.nomineeDesc, nomination.reason, nomination.nominator, createdAt)
using the t() function and appropriate translation keys (e.g.,
t('award.anonymous'), t('award.noDescription'), t('award.reasonLabel'),
t('award.noReason'), t('award.nomineeUnnamed') or project-standard keys); ensure
every user-facing literal (badges, headings, small text, and any form/button
labels in this file) uses t() instead of raw strings so the component fully
conforms to the "All user-facing text MUST use the i18n t() function" rule.
| </Card> | ||
| ); | ||
|
|
||
| const NominationForm: FC<{ onSubmit: (data: any) => void; onCancel: () => void }> = ({ |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
避免使用 any 类型，应定义明确的表单数据接口
onSubmit: (data: any) => void 丧失了 TypeScript 类型安全优势。建议定义具体接口。
♻️ 建议的类型定义
+interface NominationFormData {
+ nomineeName: string;
+ nomineeDesc: string;
+ reason: string;
+ nominator: string;
+ videoUrl: string;
+}
+
-const NominationForm: FC<{ onSubmit: (data: any) => void; onCancel: () => void }> = ({
+const NominationForm: FC<{ onSubmit: (data: NominationFormData) => void; onCancel: () => void }> = ({同时更新 handleNominationSubmit 的参数类型：
-const handleNominationSubmit = async (formData: any) => {
+const handleNominationSubmit = async (formData: NominationFormData) => {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@pages/award/open-collaborator-award.tsx` at line 70, 为 NominationForm
及其提交处理器去除 any：在组件外定义一个明确的表单数据接口（例如 NominationFormData）描述所有表单字段，然后把组件的 props 改为
onSubmit: (data: NominationFormData) => void；同时在实现 handleNominationSubmit
的参数和内部使用处将参数类型从 any 改为 NominationFormData
并确保相关字段名一致，更新所有调用点以匹配新类型（NominationForm、onSubmit、handleNominationSubmit
三者需保持一致）。
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.
🎯 Bounty: #52 - 重构【开源市集】官网【开放协作人奖】页面
✨ Complete TypeScript Solution
This PR provides a comprehensive enhancement to the Open Collaborator Award page, delivering a fully integrated TypeScript solution that leverages existing infrastructure.
🚀 Key Features
/award/open-collaborator-award.tsx) - Modern React interface with real-time nomination system/award/index.tsx) - Complete award management dashboard with statistics💪 Technical Advantages
📁 Files Modified
pages/award/open-collaborator-award.tsx- Main award page (NEW)pages/award/index.tsx- Enhanced overview pagepages/article/open-collaborator-award.mdx- Updated redirect page🔧 Technical Implementation
✅ Ready for Production
All code follows existing patterns, integrates with current infrastructure, and provides immediate value to users.
*Bounty Value: 90 TQT
Issue: #52
Summary by CodeRabbit
发布说明