feat(settings): 设置与个人信息模块审计重构 — i18n + 服务注入解耦 + Error Boundary + 流式渲染

- 新增 SettingsService 接口 + Context 注入，组件层不再直接 import users/messaging actions

- 新增 resolveRoleSettingsConfig 配置驱动角色路由，删除 parent/student/teacher-settings-view 冗余文件

- 新增 SettingsSectionErrorBoundary，每个 TabsContent + profile 角色概览区块均包裹

- 新增 ProfileStudentOverview/ProfileTeacherOverview 异步 Server Component + 骨架屏，支持流式渲染

- 抽取 buildStudentOverviewData 等纯函数到 lib/student-overview-data.ts，便于单元测试

- 新增 settings.json 翻译文件（zh-CN + en），所有组件改用 useTranslations/getTranslations

- 重构 profile/page.tsx：i18n 适配 + Suspense 分区加载 + 业务逻辑抽离

- 同步更新架构图 004/005

src/app/(dashboard)/profile/error.tsx

@@ -1,18 +1,20 @@
 "use client"
 
 import { AlertCircle } from "lucide-react"
+import { useTranslations } from "next-intl"
 
 import { EmptyState } from "@/shared/components/ui/empty-state"
 
 export default function ProfileError({ reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  const t = useTranslations("settings.errors")
   return (
     <div className="flex h-full flex-col items-center justify-center space-y-4 p-8">
       <EmptyState
         icon={AlertCircle}
-        title="页面加载失败"
-        description="抱歉，个人资料页面加载时发生了意外错误。请稍后重试。"
+        title={t("loadFailed")}
+        description={t("loadFailedDesc")}
         action={{
-          label: "重试",
+          label: t("retry"),
           onClick: () => reset(),
         }}
         className="border-none shadow-none h-auto"

src/app/(dashboard)/profile/page.tsx

@@ -1,138 +1,58 @@
 import Link from "next/link"
 import { redirect } from "next/navigation"
+import { Suspense, type ReactElement } from "react"
+import { getTranslations } from "next-intl/server"
+import { User, Mail, Phone, MapPin, Calendar, Clock, Shield } from "lucide-react"
 
 import { requireAuth } from "@/shared/lib/auth-guard"
-import { getStudentClasses, getStudentSchedule, getTeacherClasses, getTeacherTeachingSubjects } from "@/modules/classes/data-access"
-import { StudentGradesCard } from "@/modules/dashboard/components/student-dashboard/student-grades-card"
-import { StudentStatsGrid } from "@/modules/dashboard/components/student-dashboard/student-stats-grid"
-import { StudentTodayScheduleCard } from "@/modules/dashboard/components/student-dashboard/student-today-schedule-card"
-import { StudentUpcomingAssignmentsCard } from "@/modules/dashboard/components/student-dashboard/student-upcoming-assignments-card"
-import { getStudentDashboardGrades, getStudentHomeworkAssignments } from "@/modules/homework/data-access"
 import { getUserProfile } from "@/modules/users/data-access"
+import { ProfileStudentOverview, ProfileStudentOverviewSkeleton } from "@/modules/settings/components/profile-student-overview"
+import { ProfileTeacherOverview, ProfileTeacherOverviewSkeleton } from "@/modules/settings/components/profile-teacher-overview"
+import { SettingsSectionErrorBoundary } from "@/modules/settings/components/settings-section-error-boundary"
 import { Avatar, AvatarFallback, AvatarImage } from "@/shared/components/ui/avatar"
 import { Badge } from "@/shared/components/ui/badge"
 import { Button } from "@/shared/components/ui/button"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/shared/components/ui/card"
 import { PageHeader } from "@/shared/components/ui/page-header"
-import { Separator } from "@/shared/components/ui/separator"
 import { formatDate } from "@/shared/lib/utils"
-import { User, Mail, Phone, MapPin, Calendar, Clock, Shield } from "lucide-react"
 
 export const dynamic = "force-dynamic"
 
-export const metadata = {
-  title: "Profile",
+export async function generateMetadata() {
+  const t = await getTranslations("settings.profilePage")
+  return { title: t("title") }
 }
 
-const WEEKDAY_MAP = [7, 1, 2, 3, 4, 5, 6] as const
-type Weekday = 1 | 2 | 3 | 4 | 5 | 6 | 7
-
-const toWeekday = (d: Date): Weekday => {
-  const day = d.getDay()
-  const result = WEEKDAY_MAP[day]
-  if (result < 1 || result > 7) throw new Error("Invalid weekday")
-  return result
-}
-
-export default async function ProfilePage() {
+export default async function ProfilePage(): Promise<ReactElement> {
   const ctx = await requireAuth()
 
   const userId = ctx.userId
   const userProfile = await getUserProfile(userId)
 
   if (!userProfile) {
-      redirect("/login")
+    redirect("/login")
   }
 
   const roles = ctx.roles
   const isStudent = roles.includes("student")
   const isTeacher = roles.includes("teacher")
-
-  const studentData =
-    isStudent
-      ? await (async () => {
-          const [classes, schedule, assignmentsAll, grades] = await Promise.all([
-            getStudentClasses(userId),
-            getStudentSchedule(userId),
-            getStudentHomeworkAssignments(userId),
-            getStudentDashboardGrades(userId),
-          ])
-
-          const now = new Date()
-          const in7Days = new Date(now)
-          in7Days.setDate(in7Days.getDate() + 7)
-
-          const dueSoonCount = assignmentsAll.filter((a) => {
-            if (!a.dueAt) return false
-            const due = new Date(a.dueAt)
-            return due >= now && due <= in7Days && a.progressStatus !== "graded"
-          }).length
-
-          const overdueCount = assignmentsAll.filter((a) => {
-            if (!a.dueAt) return false
-            const due = new Date(a.dueAt)
-            return due < now && a.progressStatus !== "graded"
-          }).length
-
-          const gradedCount = assignmentsAll.filter((a) => a.progressStatus === "graded").length
-
-          const upcomingAssignments = [...assignmentsAll]
-            .sort((a, b) => {
-              const aTime = a.dueAt ? new Date(a.dueAt).getTime() : Number.POSITIVE_INFINITY
-              const bTime = b.dueAt ? new Date(b.dueAt).getTime() : Number.POSITIVE_INFINITY
-              if (aTime !== bTime) return aTime - bTime
-              return a.id.localeCompare(b.id)
-            })
-            .slice(0, 8)
-
-          const todayWeekday = toWeekday(now)
-          const todayScheduleItems = schedule
-            .filter((s) => s.weekday === todayWeekday)
-            .map((s) => ({
-              id: s.id,
-              classId: s.classId,
-              className: s.className,
-              course: s.course,
-              startTime: s.startTime,
-              endTime: s.endTime,
-              location: s.location ?? null,
-            }))
-
-          return {
-            enrolledClassCount: classes.length,
-            dueSoonCount,
-            overdueCount,
-            gradedCount,
-            todayScheduleItems,
-            upcomingAssignments,
-            grades,
-          }
-        })()
-      : null
-
-  const teacherData =
-    isTeacher
-      ? await (async () => {
-          const [subjects, classes] = await Promise.all([getTeacherTeachingSubjects(), getTeacherClasses()])
-          return { subjects, classes }
-        })()
-      : null
+  const t = await getTranslations("settings.profilePage")
 
   return (
     <div className="flex h-full flex-col gap-8 p-8">
       <PageHeader
-        title="Profile"
-        description="Manage your personal and account information."
+        title={t("title")}
+        description={t("description")}
         actions={
           <Button asChild variant="outline">
-            <Link href="/settings">Edit Profile</Link>
+            <Link href="/settings">{t("editProfile")}</Link>
           </Button>
         }
       />
 
       <div className="flex items-center gap-4">
         <Avatar className="h-20 w-20">
-          {userProfile.image ? <AvatarImage src={userProfile.image} alt={userProfile.name ?? "User avatar"} /> : null}
+          {userProfile.image ? <AvatarImage src={userProfile.image} alt={userProfile.name ?? t("title")} /> : null}
           <AvatarFallback className="text-xl font-semibold">
             {(userProfile.name ?? userProfile.email).slice(0, 2).toUpperCase()}
           </AvatarFallback>
@@ -148,36 +68,36 @@ export default async function ProfilePage() {
           <CardHeader>
             <CardTitle className="flex items-center gap-2">
               <User className="h-5 w-5" />
-              Personal Information
+              {t("personalInfo.title")}
             </CardTitle>
-            <CardDescription>Basic personal details.</CardDescription>
+            <CardDescription>{t("personalInfo.description")}</CardDescription>
           </CardHeader>
           <CardContent className="space-y-4">
             <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
               <div className="space-y-1">
-                <div className="text-sm font-medium text-muted-foreground">Full Name</div>
+                <div className="text-sm font-medium text-muted-foreground">{t("personalInfo.fullName")}</div>
                 <div className="text-sm font-medium">{userProfile.name ?? "-"}</div>
               </div>
               <div className="space-y-1">
-                <div className="text-sm font-medium text-muted-foreground">Gender</div>
+                <div className="text-sm font-medium text-muted-foreground">{t("personalInfo.gender")}</div>
                 <div className="text-sm capitalize">{userProfile.gender ?? "-"}</div>
               </div>
               <div className="space-y-1">
-                <div className="text-sm font-medium text-muted-foreground">Age</div>
+                <div className="text-sm font-medium text-muted-foreground">{t("personalInfo.age")}</div>
                 <div className="text-sm">{userProfile.age ?? "-"}</div>
               </div>
-               <div className="space-y-1">
-                <div className="text-sm font-medium text-muted-foreground">Phone</div>
+              <div className="space-y-1">
+                <div className="text-sm font-medium text-muted-foreground">{t("personalInfo.phone")}</div>
                 <div className="flex items-center gap-2 text-sm">
-                   {userProfile.phone ? <Phone className="h-3 w-3 text-muted-foreground" /> : null}
-                   {userProfile.phone ?? "-"}
+                  {userProfile.phone ? <Phone className="h-3 w-3 text-muted-foreground" /> : null}
+                  {userProfile.phone ?? "-"}
                 </div>
               </div>
               <div className="col-span-1 sm:col-span-2 space-y-1">
-                <div className="text-sm font-medium text-muted-foreground">Address</div>
+                <div className="text-sm font-medium text-muted-foreground">{t("personalInfo.address")}</div>
                 <div className="flex items-center gap-2 text-sm">
-                   {userProfile.address ? <MapPin className="h-3 w-3 text-muted-foreground" /> : null}
-                   {userProfile.address ?? "-"}
+                  {userProfile.address ? <MapPin className="h-3 w-3 text-muted-foreground" /> : null}
+                  {userProfile.address ?? "-"}
                 </div>
               </div>
             </div>
@@ -188,37 +108,37 @@ export default async function ProfilePage() {
           <CardHeader>
             <CardTitle className="flex items-center gap-2">
               <Shield className="h-5 w-5" />
-              Account Information
+              {t("accountInfo.title")}
             </CardTitle>
-            <CardDescription>System account details.</CardDescription>
+            <CardDescription>{t("accountInfo.description")}</CardDescription>
           </CardHeader>
           <CardContent className="space-y-4">
             <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-               <div className="col-span-1 sm:col-span-2 space-y-1">
-                <div className="text-sm font-medium text-muted-foreground">Email</div>
+              <div className="col-span-1 sm:col-span-2 space-y-1">
+                <div className="text-sm font-medium text-muted-foreground">{t("accountInfo.email")}</div>
                 <div className="flex items-center gap-2 text-sm">
-                   <Mail className="h-3 w-3 text-muted-foreground" />
-                   {userProfile.email}
+                  <Mail className="h-3 w-3 text-muted-foreground" />
+                  {userProfile.email}
                 </div>
               </div>
               <div className="space-y-1">
-                <div className="text-sm font-medium text-muted-foreground">Role</div>
+                <div className="text-sm font-medium text-muted-foreground">{t("accountInfo.role")}</div>
                 <Badge variant="secondary" className="capitalize">
                   {userProfile.role}
                 </Badge>
               </div>
               <div className="space-y-1">
-                <div className="text-sm font-medium text-muted-foreground">Member Since</div>
+                <div className="text-sm font-medium text-muted-foreground">{t("accountInfo.memberSince")}</div>
                 <div className="flex items-center gap-2 text-sm">
-                   <Calendar className="h-3 w-3 text-muted-foreground" />
-                   {formatDate(userProfile.createdAt)}
+                  <Calendar className="h-3 w-3 text-muted-foreground" />
+                  {formatDate(userProfile.createdAt)}
                 </div>
               </div>
-               <div className="space-y-1">
-                <div className="text-sm font-medium text-muted-foreground">Onboarded At</div>
-                 <div className="flex items-center gap-2 text-sm">
-                   <Clock className="h-3 w-3 text-muted-foreground" />
-                   {userProfile.onboardedAt ? formatDate(userProfile.onboardedAt) : "-"}
+              <div className="space-y-1">
+                <div className="text-sm font-medium text-muted-foreground">{t("accountInfo.onboardedAt")}</div>
+                <div className="flex items-center gap-2 text-sm">
+                  <Clock className="h-3 w-3 text-muted-foreground" />
+                  {userProfile.onboardedAt ? formatDate(userProfile.onboardedAt) : "-"}
                 </div>
               </div>
             </div>
@@ -226,91 +146,20 @@ export default async function ProfilePage() {
         </Card>
       </div>
 
-      {studentData ? (
-        <div className="space-y-6">
-          <Separator />
-          <div className="space-y-1">
-            <h2 className="text-xl font-semibold tracking-tight">Student Overview</h2>
-            <div className="text-sm text-muted-foreground">Your academic performance and schedule.</div>
-          </div>
-
-          <StudentStatsGrid
-            enrolledClassCount={studentData.enrolledClassCount}
-            dueSoonCount={studentData.dueSoonCount}
-            overdueCount={studentData.overdueCount}
-            gradedCount={studentData.gradedCount}
-            ranking={studentData.grades.ranking}
-          />
-
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-            <div className="lg:col-span-2 space-y-6">
-              <StudentUpcomingAssignmentsCard upcomingAssignments={studentData.upcomingAssignments} />
-              <StudentGradesCard grades={studentData.grades} />
-            </div>
-            <div className="space-y-6">
-              <StudentTodayScheduleCard items={studentData.todayScheduleItems} />
-            </div>
-          </div>
-        </div>
+      {isStudent ? (
+        <SettingsSectionErrorBoundary>
+          <Suspense fallback={<ProfileStudentOverviewSkeleton />}>
+            <ProfileStudentOverview userId={userId} />
+          </Suspense>
+        </SettingsSectionErrorBoundary>
       ) : null}
 
-      {teacherData ? (
-        <div className="space-y-6">
-          <Separator />
-          <div className="space-y-1">
-            <h2 className="text-xl font-semibold tracking-tight">Teacher Overview</h2>
-            <div className="text-sm text-muted-foreground">Your teaching subjects and classes.</div>
-          </div>
-
-          <div className="grid gap-6 lg:grid-cols-2">
-            <Card>
-              <CardHeader>
-                <CardTitle>Teaching Subjects</CardTitle>
-                <CardDescription>Subjects you are currently assigned to teach.</CardDescription>
-              </CardHeader>
-              <CardContent>
-                {teacherData.subjects.length === 0 ? (
-                  <div className="text-sm text-muted-foreground">No subjects assigned yet.</div>
-                ) : (
-                  <div className="flex flex-wrap gap-2">
-                    {teacherData.subjects.map((subject) => (
-                      <Badge key={subject} variant="secondary">
-                        {subject}
-                      </Badge>
-                    ))}
-                  </div>
-                )}
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader>
-                <CardTitle>Teaching Classes</CardTitle>
-                <CardDescription>Classes you are currently managing.</CardDescription>
-              </CardHeader>
-              <CardContent className="space-y-3">
-                {teacherData.classes.length === 0 ? (
-                  <div className="text-sm text-muted-foreground">No classes assigned yet.</div>
-                ) : (
-                  teacherData.classes.map((cls) => (
-                    <div key={cls.id} className="flex items-center justify-between gap-4 rounded-md border px-3 py-2">
-                      <div className="min-w-0">
-                        <div className="truncate text-sm font-medium">{cls.name}</div>
-                        <div className="text-xs text-muted-foreground">
-                          {cls.grade}
-                          {cls.homeroom ? ` • ${cls.homeroom}` : ""}
-                        </div>
-                      </div>
-                      <Button asChild variant="outline" size="sm">
-                        <Link href={`/teacher/classes/my/${encodeURIComponent(cls.id)}`}>View</Link>
-                      </Button>
-                    </div>
-                  ))
-                )}
-              </CardContent>
-            </Card>
-          </div>
-        </div>
+      {isTeacher ? (
+        <SettingsSectionErrorBoundary>
+          <Suspense fallback={<ProfileTeacherOverviewSkeleton />}>
+            <ProfileTeacherOverview />
+          </Suspense>
+        </SettingsSectionErrorBoundary>
       ) : null}
     </div>
   )

src/app/(dashboard)/settings/error.tsx

@@ -1,18 +1,20 @@
 "use client"
 
 import { AlertCircle } from "lucide-react"
+import { useTranslations } from "next-intl"
 
 import { EmptyState } from "@/shared/components/ui/empty-state"
 
 export default function SettingsError({ reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  const t = useTranslations("settings.errors")
   return (
     <div className="flex h-full flex-col items-center justify-center space-y-4 p-8">
       <EmptyState
         icon={AlertCircle}
-        title="页面加载失败"
-        description="抱歉，设置页面加载时发生了意外错误。请稍后重试。"
+        title={t("loadFailed")}
+        description={t("loadFailedDesc")}
         action={{
-          label: "重试",
+          label: t("retry"),
           onClick: () => reset(),
         }}
         className="border-none shadow-none h-auto"

src/app/(dashboard)/settings/page.tsx

@@ -1,12 +1,16 @@
 import { redirect } from "next/navigation"
+import { getTranslations } from "next-intl/server"
 
 import { requireAuth } from "@/shared/lib/auth-guard"
 import { SettingsView } from "@/modules/settings/components/settings-view"
-import { StudentSettingsView } from "@/modules/settings/components/student-settings-view"
-import { TeacherSettingsView } from "@/modules/settings/components/teacher-settings-view"
-import { ParentSettingsView } from "@/modules/settings/components/parent-settings-view"
+import { SettingsServiceProvider } from "@/modules/settings/components/settings-service-context"
+import { resolveRoleSettingsConfig } from "@/modules/settings/config/role-settings-config"
+import type { SettingsService } from "@/modules/settings/types"
 import { getUserProfile } from "@/modules/users/data-access"
+import { updateUserProfile } from "@/modules/users/actions"
 import { getNotificationPreferences } from "@/modules/notifications/preferences"
+import { updateNotificationPreferencesAction } from "@/modules/messaging/actions"
+import type { UpdateNotificationPreferencesInput } from "@/modules/notifications/types"
 
 export const dynamic = "force-dynamic"
 
@@ -14,6 +18,32 @@ export const metadata = {
   title: "Settings",
 }
 
+/**
+ * 将通知偏好输入对象转换为 FormData，适配 updateNotificationPreferencesAction 的签名。
+ * Action 内部通过 formData.get(key) === "on" 解析布尔值。
+ */
+function buildNotificationFormData(input: UpdateNotificationPreferencesInput): FormData {
+  const formData = new FormData()
+  const booleanFields: Array<keyof UpdateNotificationPreferencesInput> = [
+    "emailEnabled",
+    "smsEnabled",
+    "pushEnabled",
+    "homeworkNotifications",
+    "gradeNotifications",
+    "announcementNotifications",
+    "messageNotifications",
+    "attendanceNotifications",
+    "quietHoursEnabled",
+  ]
+  for (const field of booleanFields) {
+    const value = input[field]
+    if (value === true) formData.set(field, "on")
+  }
+  if (input.quietHoursStart) formData.set("quietHoursStart", input.quietHoursStart)
+  if (input.quietHoursEnd) formData.set("quietHoursEnd", input.quietHoursEnd)
+  return formData
+}
+
 export default async function SettingsPage() {
   const ctx = await requireAuth()
 
@@ -24,22 +54,36 @@ export default async function SettingsPage() {
 
   const roles = ctx.roles
   const notificationPrefs = await getNotificationPreferences(userId)
+  const t = await getTranslations("settings")
 
-  if (roles.includes("admin")) {
-    return (
+  const config = resolveRoleSettingsConfig(roles)
+  const description = t(config?.descriptionKey ?? "title")
+  const backHref = config?.backHref ?? "/dashboard"
+  const generalExtra = config?.generalExtra
+
+  // 构建 SettingsService 实现，注入到 SettingsServiceProvider
+  // 组件层通过 useSettingsService() 消费，不直接 import users/messaging actions
+  const service: SettingsService = {
+    profile: {
+      getProfile: async () => getUserProfile(userId),
+      updateProfile: async (input) => updateUserProfile(input),
+    },
+    notifications: {
+      getPreferences: async () => getNotificationPreferences(userId),
+      updatePreferences: async (input) =>
+        updateNotificationPreferencesAction(null, buildNotificationFormData(input)),
+    },
+  }
+
+  return (
+    <SettingsServiceProvider service={service}>
       <SettingsView
-        description="Manage your admin preferences and account access."
-        backHref="/admin/dashboard"
+        description={description}
+        backHref={backHref}
         user={userProfile}
         notificationPreferences={notificationPrefs}
+        generalExtra={generalExtra}
       />
-    )
-  }
-  if (roles.includes("student")) {
-    return <StudentSettingsView user={userProfile} notificationPreferences={notificationPrefs} />
-  }
-  if (roles.includes("parent")) {
-    return <ParentSettingsView user={userProfile} notificationPreferences={notificationPrefs} />
-  }
-  return <TeacherSettingsView user={userProfile} notificationPreferences={notificationPrefs} />
+    </SettingsServiceProvider>
+  )
 }

src/app/(dashboard)/settings/security/error.tsx

@@ -1,18 +1,20 @@
 "use client"
 
 import { AlertCircle } from "lucide-react"
+import { useTranslations } from "next-intl"
 
 import { EmptyState } from "@/shared/components/ui/empty-state"
 
 export default function SecuritySettingsError({ reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  const t = useTranslations("settings.errors")
   return (
     <div className="flex h-full flex-col items-center justify-center space-y-4 p-8">
       <EmptyState
         icon={AlertCircle}
-        title="页面加载失败"
-        description="抱歉，安全设置页面加载时发生了意外错误。请稍后重试。"
+        title={t("loadFailed")}
+        description={t("loadFailedDesc")}
         action={{
-          label: "重试",
+          label: t("retry"),
           onClick: () => reset(),
         }}
         className="border-none shadow-none h-auto"

src/app/(dashboard)/settings/security/page.tsx

@@ -1,4 +1,5 @@
 import { Lock } from "lucide-react"
+import { getTranslations } from "next-intl/server"
 
 import { requireAuth } from "@/shared/lib/auth-guard"
 import { PasswordChangeForm } from "@/modules/settings/components/password-change-form"
@@ -13,12 +14,13 @@ export const metadata = {
 
 export default async function SecuritySettingsPage() {
   await requireAuth()
+  const t = await getTranslations("settings")
 
   return (
     <div className="flex h-full flex-col gap-8 p-8">
       <PageHeader
-        title="Security"
-        description="Manage your password and account security settings."
+        title={t("tabs.security")}
+        description={t("security.changePassword.description")}
         icon={Lock}
       />
 
@@ -27,15 +29,15 @@ export default async function SecuritySettingsPage() {
 
         <Card>
           <CardHeader>
-            <CardTitle>Security Tips</CardTitle>
-            <CardDescription>Best practices to keep your account safe.</CardDescription>
+            <CardTitle>{t("security.tips.title")}</CardTitle>
+            <CardDescription>{t("security.tips.description")}</CardDescription>
           </CardHeader>
           <CardContent>
             <ul className="space-y-2 text-sm text-muted-foreground">
-              <li>Use a unique password that you don&apos;t reuse across other sites.</li>
-              <li>Avoid common words, names, or sequential patterns.</li>
-              <li>Change your password periodically.</li>
-              <li>Your account will be temporarily locked after multiple failed login attempts.</li>
+              <li>{t("security.tips.tip1")}</li>
+              <li>{t("security.tips.tip2")}</li>
+              <li>{t("security.tips.tip3")}</li>
+              <li>{t("security.tips.tip4")}</li>
             </ul>
           </CardContent>
         </Card>