feat(ui): refine static content pages

app/(main)/help/page.tsx

@@ -1,25 +1,49 @@
+import { Badge } from "@/components/ui/badge"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import Link from "next/link"
 
 export default function HelpPage() {
   return (
     <div className="container mx-auto max-w-3xl px-4 py-8 space-y-6">
-      <h1 className="text-2xl font-bold tracking-tighter leading-tight">帮助中心</h1>
-      <Card className="hover:shadow-card-hover">
-        <CardHeader>
+      <div className="space-y-3">
+        <Badge variant="outline" className="w-fit text-xs font-normal">
+          帮助
+        </Badge>
+        <div className="space-y-2">
+          <h1 className="text-2xl font-bold tracking-tight leading-tight">帮助中心</h1>
+          <p className="text-sm leading-relaxed text-muted-foreground">
+            了解下单、沟通、结单和评价流程。
+          </p>
+        </div>
+      </div>
+
+      <Card className="overflow-hidden border-border/80 shadow-sm">
+        <CardHeader className="border-b border-border/60">
           <CardTitle className="text-base">常见流程</CardTitle>
         </CardHeader>
-        <CardContent className="space-y-2 text-sm text-muted-foreground">
-          <p>1. 浏览打手或店铺，选择服务并下单。</p>
-          <p>2. 在订单会话中协商时间，服务完成后发起结单。</p>
-          <p>3. 双方提交密封评价后，系统同时揭晓评价。</p>
-          <p>
-            需要规则细节可查看
-            <Link href="/terms" className="text-primary hover:underline">
-              用户协议
-            </Link>
-            。
-          </p>
+        <CardContent className="p-0 text-sm leading-relaxed text-muted-foreground">
+          <section className="border-b border-border/60 p-5">
+            <h2 className="text-sm font-semibold text-foreground">选择服务</h2>
+            <p className="mt-2">浏览打手或店铺，选择合适的服务并下单。</p>
+          </section>
+          <section className="border-b border-border/60 p-5">
+            <h2 className="text-sm font-semibold text-foreground">订单沟通</h2>
+            <p className="mt-2">在订单会话中协商时间，服务完成后发起结单。</p>
+          </section>
+          <section className="border-b border-border/60 p-5">
+            <h2 className="text-sm font-semibold text-foreground">评价揭晓</h2>
+            <p className="mt-2">双方提交密封评价后，系统同时揭晓评价。</p>
+          </section>
+          <section className="p-5">
+            <h2 className="text-sm font-semibold text-foreground">规则说明</h2>
+            <p className="mt-2">
+              需要规则细节可查看
+              <Link href="/terms" className="text-primary hover:underline">
+                用户协议
+              </Link>
+              。
+            </p>
+          </section>
         </CardContent>
       </Card>
     </div>

app/(main)/privacy/page.tsx

@@ -1,18 +1,42 @@
+import { Badge } from "@/components/ui/badge"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 
 export default function PrivacyPage() {
   return (
     <div className="container mx-auto max-w-3xl px-4 py-8 space-y-6">
-      <h1 className="text-2xl font-bold tracking-tighter leading-tight">隐私政策摘要</h1>
-      <Card className="hover:shadow-card-hover">
-        <CardHeader>
+      <div className="space-y-3">
+        <Badge variant="outline" className="w-fit text-xs font-normal">
+          隐私
+        </Badge>
+        <div className="space-y-2">
+          <h1 className="text-2xl font-bold tracking-tight leading-tight">隐私政策摘要</h1>
+          <p className="text-sm leading-relaxed text-muted-foreground">
+            平台仅在服务履约、审核、风控和通知场景中使用必要数据。
+          </p>
+        </div>
+      </div>
+
+      <Card className="overflow-hidden border-border/80 shadow-sm">
+        <CardHeader className="border-b border-border/60">
           <CardTitle className="text-base">数据使用范围</CardTitle>
         </CardHeader>
-        <CardContent className="space-y-2 text-sm text-muted-foreground">
-          <p>认证资料仅用于平台审核，不会展示在公开页面。</p>
-          <p>订单与会话记录用于履约、风控和争议处理。</p>
-          <p>通知与偏好设置用于服务提醒，不用于广告投放。</p>
-          <p>用户可在设置页更新公开资料并管理通知偏好。</p>
+        <CardContent className="p-0 text-sm leading-relaxed text-muted-foreground">
+          <section className="border-b border-border/60 p-5">
+            <h2 className="text-sm font-semibold text-foreground">认证资料</h2>
+            <p className="mt-2">认证资料仅用于平台审核，不会展示在公开页面。</p>
+          </section>
+          <section className="border-b border-border/60 p-5">
+            <h2 className="text-sm font-semibold text-foreground">订单记录</h2>
+            <p className="mt-2">订单与会话记录用于履约、风控和争议处理。</p>
+          </section>
+          <section className="border-b border-border/60 p-5">
+            <h2 className="text-sm font-semibold text-foreground">通知偏好</h2>
+            <p className="mt-2">通知与偏好设置用于服务提醒，不用于广告投放。</p>
+          </section>
+          <section className="p-5">
+            <h2 className="text-sm font-semibold text-foreground">资料管理</h2>
+            <p className="mt-2">用户可在设置页更新公开资料并管理通知偏好。</p>
+          </section>
         </CardContent>
       </Card>
     </div>

app/(main)/terms/page.tsx

@@ -1,26 +1,53 @@
+import { Badge } from "@/components/ui/badge"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import Link from "next/link"
 
 export default function TermsPage() {
   return (
     <div className="container mx-auto max-w-3xl px-4 py-8 space-y-6">
-      <h1 className="text-2xl font-bold tracking-tighter leading-tight">用户协议摘要</h1>
-      <Card className="hover:shadow-card-hover">
-        <CardHeader>
+      <div className="space-y-3">
+        <Badge variant="outline" className="w-fit text-xs font-normal">
+          协议
+        </Badge>
+        <div className="space-y-2">
+          <h1 className="text-2xl font-bold tracking-tight leading-tight">用户协议摘要</h1>
+          <p className="text-sm leading-relaxed text-muted-foreground">
+            平台规则围绕订单沟通、内容发布、争议处理和外部链接展开。
+          </p>
+        </div>
+      </div>
+
+      <Card className="overflow-hidden border-border/80 shadow-sm">
+        <CardHeader className="border-b border-border/60">
           <CardTitle className="text-base">平台规则</CardTitle>
         </CardHeader>
-        <CardContent className="space-y-2 text-sm text-muted-foreground">
-          <p>订单沟通应在平台会话内完成，便于争议举证。</p>
-          <p>秀单帖仅可关联本人已完成订单，引用帖需标注来源。</p>
-          <p>争议进入审核后可申诉一次，最终结果以平台仲裁为准。</p>
-          <p>外部链接请谨慎访问，平台不对第三方站点内容负责。</p>
-          <p>
-            隐私说明见
-            <Link href="/privacy" className="text-primary hover:underline">
-              隐私政策
-            </Link>
-            。
-          </p>
+        <CardContent className="p-0 text-sm leading-relaxed text-muted-foreground">
+          <section className="border-b border-border/60 p-5">
+            <h2 className="text-sm font-semibold text-foreground">订单沟通</h2>
+            <p className="mt-2">订单沟通应在平台会话内完成，便于争议举证。</p>
+          </section>
+          <section className="border-b border-border/60 p-5">
+            <h2 className="text-sm font-semibold text-foreground">内容发布</h2>
+            <p className="mt-2">秀单帖仅可关联本人已完成订单，引用帖需标注来源。</p>
+          </section>
+          <section className="border-b border-border/60 p-5">
+            <h2 className="text-sm font-semibold text-foreground">争议处理</h2>
+            <p className="mt-2">争议进入审核后可申诉一次，最终结果以平台仲裁为准。</p>
+          </section>
+          <section className="border-b border-border/60 p-5">
+            <h2 className="text-sm font-semibold text-foreground">外部链接</h2>
+            <p className="mt-2">外部链接请谨慎访问，平台不对第三方站点内容负责。</p>
+          </section>
+          <section className="p-5">
+            <h2 className="text-sm font-semibold text-foreground">隐私说明</h2>
+            <p className="mt-2">
+              隐私说明见
+              <Link href="/privacy" className="text-primary hover:underline">
+                隐私政策
+              </Link>
+              。
+            </p>
+          </section>
         </CardContent>
       </Card>
     </div>