完成个人中心页面功能，公共组件部分调整

src/app/admin/identify/page.tsx

@@ -18,6 +18,8 @@ import personal from './_assets/personal.webp'
 import step1 from './_assets/step1.webp'
 import step2 from './_assets/step2.webp'
 import step3 from './_assets/step3.webp'
+import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@/components/ui/card'
+import {WorkflowIcon} from 'lucide-react'
 
 export type IdentifyPageProps = {}
 
@@ -180,15 +182,21 @@ export default function IdentifyPage(props: IdentifyPageProps) {
         </div>
       </div>
 
-      <section className={`flex-none basis-80 flex flex-col bg-white rounded-lg p-4 gap-6`}>
-        <h3 className={`text-xl font-medium`}>操作引导</h3>
-        <p className={`text-sm text-weak`}>为响应国家相关规定，使用HTTP代理需完成实名认证。认证服务由支付宝提供，您的个人信息将受到严格保护，仅用于账户安全认证</p>
-        <div className={`flex flex-col`}>
+      <Card className={`flex-none basis-80`}>
+        <CardHeader>
+          <CardTitle>
+            <WorkflowIcon size={18}/>操作引导
+          </CardTitle>
+        </CardHeader>
+        <CardContent className={`flex flex-col px-4`}>
+          <p className={`text-sm text-weak mb-4`}>
+            为响应国家相关规定，使用HTTP代理需完成实名认证。认证服务由支付宝提供，您的个人信息将受到严格保护，仅用于账户安全认证
+          </p>
           <p className={`flex gap-2 items-center justify-between w-56 self-center`}>
-            <div className={`flex gap-2`}>
-              <span className={`bg-primary/25 text-primary w-8 h-8 rounded-full flex items-center justify-center`}>01</span>
-              <span>注册账号</span>
-            </div>
+              <span className={`flex gap-2`}>
+                <span className={`bg-primary/25 text-primary w-8 h-8 rounded-full flex items-center justify-center`}>01</span>
+                <span>注册账号</span>
+              </span>
             <Image alt={`步骤配图`} src={step1} aria-hidden/>
           </p>
           <div className={`h-16 w-56 px-4 flex self-center`}>
@@ -198,10 +206,10 @@ export default function IdentifyPage(props: IdentifyPageProps) {
             )}></div>
           </div>
           <p className={`flex gap-2 items-center justify-between w-56 self-center`}>
-            <div className={`flex gap-2`}>
-              <span className={`bg-primary/25 text-primary w-8 h-8 rounded-full flex items-center justify-center`}>02</span>
-              <span>实名认证</span>
-            </div>
+              <span className={`flex gap-2`}>
+                <span className={`bg-primary/25 text-primary w-8 h-8 rounded-full flex items-center justify-center`}>02</span>
+                <span>实名认证</span>
+              </span>
             <Image alt={`步骤配图`} src={step2} aria-hidden/>
           </p>
           <div className={`h-16 w-56 px-4 flex self-center`}>
@@ -211,14 +219,14 @@ export default function IdentifyPage(props: IdentifyPageProps) {
             )}></div>
           </div>
           <p className={`flex gap-2 items-center justify-between w-56 self-center`}>
-            <div className={`flex gap-2`}>
-              <span className={`bg-primary/25 text-primary w-8 h-8 rounded-full flex items-center justify-center`}>03</span>
-              <span>充值、支付</span>
-            </div>
+              <span className={`flex gap-2`}>
+                <span className={`bg-primary/25 text-primary w-8 h-8 rounded-full flex items-center justify-center`}>03</span>
+                <span>充值、支付</span>
+              </span>
             <Image alt={`步骤配图`} src={step3} aria-hidden/>
           </p>
-        </div>
-      </section>
+        </CardContent>
+      </Card>
     </Page>
   )
 }