9 |
10 |
安全设置
11 |
12 | 配置邮箱验证和内容审核等安全功能
13 |
14 |
15 |
16 | {/* 邮箱验证开关 */}
17 | {settings.email_verification_required && (
18 |
19 |
20 |
21 |
22 |
25 |
26 | {settings.email_verification_required.description}
27 |
28 |
29 |
33 | handleBooleanChange('email_verification_required', checked)
34 | }
35 | disabled={saving}
36 | />
37 |
38 |
39 |
40 | )}
41 |
42 | {/* 内容审核开关 */}
43 | {settings.content_moderation_enabled && (
44 |
45 |
46 |
47 |
48 |
51 |
52 | {settings.content_moderation_enabled.description}
53 |
54 |
55 |
59 | handleBooleanChange('content_moderation_enabled', checked)
60 | }
61 | disabled={saving}
62 | />
63 |
64 |
65 |
66 | )}
67 |
|
69 | );
70 | }
71 |
72 | function TableHead({
73 | className,
74 | ...props
75 | }) {
76 | return (
77 | [role=checkbox]]:translate-y-[2px]",
81 | className
82 | )}
83 | {...props} />
84 | );
85 | }
86 |
87 | function TableCell({
88 | className,
89 | ...props
90 | }) {
91 | return (
92 | | [role=checkbox]]:translate-y-[2px]",
96 | className
97 | )}
98 | {...props} />
99 | );
100 | }
101 |
102 | function TableCaption({
103 | className,
104 | ...props
105 | }) {
106 | return (
107 |
111 | );
112 | }
113 |
114 | export {
115 | Table,
116 | TableHeader,
117 | TableBody,
118 | TableFooter,
119 | TableHead,
120 | TableRow,
121 | TableCell,
122 | TableCaption,
123 | }
124 |
--------------------------------------------------------------------------------
/apps/web/src/extensions/badges/components/BadgesList.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react';
2 | import { badgesApi } from '../api';
3 | import BadgeCard from './BadgeCard';
4 |
5 | export default function BadgesList({ userId }) {
6 | const [allBadges, setAllBadges] = useState([]);
7 | const [loading, setLoading] = useState(true);
8 |
9 | useEffect(() => {
10 | async function fetchData() {
11 | try {
12 | const badgesRes = await badgesApi.getAll({ limit: 100 });
13 | setAllBadges(badgesRes.items || []);
14 | } catch (error) {
15 | console.error('Failed to fetch badges', error);
16 | } finally {
17 | setLoading(false);
18 | }
19 | }
20 |
21 | fetchData();
22 | }, [userId]);
23 |
24 | // derived state
25 | const ownedCount = allBadges.filter(b => b.isOwned).length;
26 | const totalCount = allBadges.length;
27 | const progressPercentage = totalCount > 0 ? (ownedCount / totalCount) * 100 : 0;
28 |
29 | // Sort: Owned first, then by displayOrder/id
30 | const sortedBadges = [...allBadges].sort((a, b) => {
31 | if (a.isOwned && !b.isOwned) return -1;
32 | if (!a.isOwned && b.isOwned) return 1;
33 | return (a.displayOrder || 0) - (b.displayOrder || 0);
34 | });
35 |
36 | if (loading) return (
37 |
38 |
39 | 正在加载荣誉勋章...
40 |
45 | {/* Header */}
46 |
47 |
48 |
49 |
50 | 勋章收藏家
51 |
52 |
53 | 收集勋章，展示你的成就与贡献
54 |
55 |
56 |
57 |
58 | {ownedCount} / {totalCount}
59 |
60 |
61 | 已获得
62 |
63 |
64 |
65 |
66 |
67 | {/* Grid */}
68 |
69 | {sortedBadges.map(badge => (
70 |
75 | ))}
76 |
77 | |