调整桌面端产品订购的菜单栏布局

src/app/(home)/_components/header/menu-product.tsx

@@ -1,12 +1,13 @@
 'use client'
 import {ReactNode, useContext, useState} from 'react'
 import Wrap from '@/components/wrap'
+import Image, {StaticImageData} from 'next/image'
 import Link from 'next/link'
 import {merge} from '@/lib/utils'
 import prod from '@/assets/header/product/prod.svg'
 import custom from '@/assets/header/product/custom.svg'
 import {useRouter} from 'next/navigation'
-import {FragmentTitle, HeaderContext} from './common'
+import {HeaderContext} from './common'
 
 type TabType = 'domestic' | 'oversea'
 
@@ -53,33 +54,34 @@ export function Tab(props: {
 
 export function Domestic(props: {}) {
   return (
-    <section role="tabpanel" className="flex-auto flex flex-col lg:flex-row justify-evenly gap-3 lg:gap-0">
-      <div className="w-full lg:w-64 flex flex-col">
-        <FragmentTitle img={prod} text="短效 IP"/>
-        <DomesticLink
+    <section role="tabpanel" className="flex-auto">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
+        <div className="grid grid-cols-1 gap-3">
+          <ProductCard
+            icon={prod}
             label="短效动态 IP"
+            discount="最低4.5折"
             desc="全国 300+ 城市级定位节点，IP 池资源充足，自动高频切换。适用于数据采集、市场调研、SEO 优化等高并发场景。稳定可靠，响应迅速，助力业务高效运转。"
             href="/product?type=short"
-          discount={45}
           />
-      </div>
-      <div className="w-full lg:w-64 flex flex-col">
-        <FragmentTitle img={prod} text="长效 IP"/>
-        <DomesticLink
-          label="长效动态 IP"
+          <ProductCard
+            icon={prod}
+            label="长效静态 IP"
+            discount="最低4.5折"
             desc="IP 存活时长可达数小时至数天，连接稳定不掉线。适用于账号养号、社交运营、电商管理等需要持续在线的场景。优质线路保障，为您的长期业务保驾护航。"
             href="/product?type=long"
-          discount={45}
           />
         </div>
-      <div className="w-full lg:w-64 flex flex-col">
-        <FragmentTitle img={custom} text="业务定制"/>
-        <DomesticLink
-          label="优质/企业/精选IP"
+        <div className="flex flex-col gap-3">
+          <ProductCard
+            icon={custom}
+            label="业务定制"
+            discount="1V1 专属服务"
             desc="超 1000 家企业共同信赖之选！大客户经理全程 1 对 1 沟通，随时为您排忧解难，提供 24 小时不间断支持"
             href="/custom"
           />
         </div>
+      </div>
     </section>
   )
 }
@@ -92,11 +94,12 @@ export function Oversea(props: {}) {
   )
 }
 
-export function DomesticLink(props: {
+export function ProductCard(props: {
+  icon: StaticImageData
   label: string
+  discount: string
   desc: string
   href: string
-  discount?: number
 }) {
   const router = useRouter()
   const ctx = useContext(HeaderContext)
@@ -116,18 +119,24 @@ export function DomesticLink(props: {
         `transition-colors duration-150 ease-in-out`,
         `p-4 rounded-lg flex flex-col gap-1 hover:bg-blue-50`,
       )}
-      onClick={onClick}>
-      <p className="flex gap-2">
-        <span>{props.label}</span>
-        {props.discount && (
-          <span className="text-orange-500 text-xs text-light px-2 py-1 bg-orange-50 rounded-full">
-            折扣 {props.discount}%
+      onClick={onClick}
+    >
+      <div className="flex items-start gap-3">
+        <div className="flex-none">
+          <Image src={props.icon} alt="" width={30} height={30}/>
+        </div>
+        <div className="flex-1">
+          <div className="flex items-center justify-between gap-3">
+            <span className="font-bold">{props.label}</span>
+            <span className="text-xs font-medium text-orange-600 bg-orange-50 px-2 py-1 rounded-full">
+              {props.discount}
             </span>
-        )}
-      </p>
-      <p className="text-gray-400 text-sm">
+          </div>
+          <div className="mt-2 text-sm text-gray-400 space-y-1">
             {props.desc}
-      </p>
+          </div>
+        </div>
+      </div>
     </Link>
   )
 }

src/app/admin/identify/page.tsx

@@ -176,7 +176,7 @@ export default function IdentifyPage(props: IdentifyPageProps) {
                         <canvas ref={canvas} width={256} height={256}/>
                         <p className="text-sm text-gray-600">请扫码完成认证</p>
                         <Button onClick={() => handleDialogOpenChange(false)}>
-                          已完成认证
+                          已完成扫脸认证
                         </Button>
                       </div>
                     )}