From ff56fbd7c35b90684bba5f63260646fe41eb85fe Mon Sep 17 00:00:00 2001
From: Eamon <17516219072@163.com>
Date: Wed, 26 Aug 2026 16:55:22 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=A8=E9=9D=99=E6=80=81IP=20&=20=E5=B8=AE?=
 =?UTF-8?q?=E5=8A=A9=E6=95=99=E7=A8=8B=20=E6=89=8B=E6=9C=BA=E7=AB=AF?=
 =?UTF-8?q?=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/admin/dashboard/page.tsx                  |  5 ++-
 .../composites/dialogs/editInfoDialog.tsx     |  5 +--
 src/home/_components/header/menu-mobile.tsx   |  4 +--
 src/home/header.tsx                           |  6 ++--
 src/home/help/index.tsx                       | 25 +++++++-------
 src/home/product/index.tsx                    | 20 ++++++-----
 src/home/product/productSidebar.tsx           | 33 ++++++++++---------
 src/home/product/purchaseInfo.tsx             | 10 +++---
 src/index.css                                 |  8 +++++
 9 files changed, 63 insertions(+), 53 deletions(-)

diff --git a/src/admin/dashboard/page.tsx b/src/admin/dashboard/page.tsx
index 6af13a1..952346d 100644
--- a/src/admin/dashboard/page.tsx
+++ b/src/admin/dashboard/page.tsx
@@ -1,5 +1,8 @@
 import { useState } from "react"
-import { EditInfoDialog, type EditInfoValues } from "@/components/composites/dialogs/editInfoDialog"
+import {
+  EditInfoDialog,
+  type EditInfoValues,
+} from "@/components/composites/dialogs/editInfoDialog"
 import DataTable from "@/components/data-table"
 import Page from "@/components/page"
 import { Button } from "@/components/ui/button"
diff --git a/src/components/composites/dialogs/editInfoDialog.tsx b/src/components/composites/dialogs/editInfoDialog.tsx
index 70cd5ff..7aaadd5 100644
--- a/src/components/composites/dialogs/editInfoDialog.tsx
+++ b/src/components/composites/dialogs/editInfoDialog.tsx
@@ -110,10 +110,7 @@ export function EditInfoDialog({
               name="taobao"
               control={form.control}
               render={({ field }) => (
-                <Input
-                  {...field}
-                  className="h-11 bg-gray-50 border-gray-200"
-                />
+                <Input {...field} className="h-11 bg-gray-50 border-gray-200" />
               )}
             />
           </div>
diff --git a/src/home/_components/header/menu-mobile.tsx b/src/home/_components/header/menu-mobile.tsx
index 18fe543..9302adf 100644
--- a/src/home/_components/header/menu-mobile.tsx
+++ b/src/home/_components/header/menu-mobile.tsx
@@ -112,9 +112,9 @@ export default function MobileMenu({
           <MobileNavLink to="/help" onNavigate={onClose}>
             帮助/教程
           </MobileNavLink>
-          <MobileNavLink to="/client" onNavigate={onClose}>
+          {/* <MobileNavLink to="/client" onNavigate={onClose}>
             下载客户端
-          </MobileNavLink>
+          </MobileNavLink> */}
 
           {authed && (
             <>
diff --git a/src/home/header.tsx b/src/home/header.tsx
index 4f402bd..d7b49d8 100644
--- a/src/home/header.tsx
+++ b/src/home/header.tsx
@@ -53,7 +53,7 @@ export default function Header() {
             : `bg-transparent shadow-none`,
         )}
       >
-        <Wrap className="h-20 max-md:h-16 flex justify-between pl-15 pr-15 max-md:pl-4 max-md:pr-4">
+        <Wrap className="h-20 max-md:h-20 flex text-center justify-between max-md:pl-4 max-md:pr-4">
           <nav className="flex items-center gap-4 lg:gap-8">
             {/* logo + 网站名称 */}
             <NavLink to="/" className="flex items-center gap-2 shrink-0">
@@ -62,9 +62,7 @@ export default function Header() {
                 alt="聚IP"
                 className="w-10 h-10 max-md:w-8 max-md:h-8 object-contain"
               />
-              <span className="text-2xl max-md:text-xl font-bold bg-linear-to-r from-blue-600 to-cyan-500 bg-clip-text text-transparent">
-                聚IP
-              </span>
+              <span className="text-2xl max-md:text-xl font-bold">聚IP</span>
             </NavLink>
 
             {/* 桌面端菜单 */}
diff --git a/src/home/help/index.tsx b/src/home/help/index.tsx
index 4e5ab51..bb35027 100644
--- a/src/home/help/index.tsx
+++ b/src/home/help/index.tsx
@@ -108,19 +108,19 @@ export default function HelpPage() {
           </div>
         </div>
 
-        <div className="flex gap-8">
-          <aside className="w-52 shrink-0">
-            <nav className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden sticky top-28">
-              <ul>
+        <div className="flex flex-col md:flex-row gap-6 md:gap-8">
+          <aside className="w-full md:w-52 md:shrink-0">
+            <nav className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden md:sticky md:top-28">
+              <ul className="flex overflow-x-auto scrollbar-hide md:block">
                 {CATEGORIES.map(cat => (
-                  <li key={cat.id}>
+                  <li key={cat.id} className="shrink-0">
                     <button
                       onClick={() => {
                         setActiveCategoryId(cat.id)
                         setSelectedArticle(null)
                       }}
                       className={cn(
-                        "w-full text-left px-5 py-3 text-sm transition-colors flex items-center justify-between",
+                        "w-full text-left px-5 py-3 text-sm transition-colors flex items-center justify-between whitespace-nowrap",
                         activeCategoryId === cat.id
                           ? "bg-blue-50 text-blue-600 font-medium cursor-pointer"
                           : "text-gray-600 hover:bg-gray-50 cursor-pointer",
@@ -194,7 +194,7 @@ function ArticleList({
   onArticleClick: (article: Article) => void
 }) {
   return (
-    <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-8">
+    <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-4 md:p-8">
       {articles.length === 0 ? (
         <div className="text-center py-16 text-gray-400">
           <SearchIcon className="size-12 mx-auto mb-4 opacity-30" />
@@ -250,7 +250,7 @@ function ArticleDetail({
   }, [article.content])
 
   return (
-    <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-8">
+    <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-4 md:p-8">
       <nav className="flex items-center gap-2 text-sm text-gray-400 mb-6">
         {categoryName && (
           <>
@@ -268,9 +268,8 @@ function ArticleDetail({
           {/* biome-ignore lint/a11y/useMediaCaption: 教程视频无字幕文件 */}
           <video
             controls
-            height={500}
             src={videoUrl}
-            className="max-w-full mx-auto rounded-lg"
+            className="w-full h-auto max-w-full mx-auto rounded-lg"
           />
         </div>
       )}
@@ -278,8 +277,8 @@ function ArticleDetail({
         ref={contentRef}
         className="prose prose-sm max-w-none text-gray-700 leading-relaxed [&_h3]:text-lg [&_h3]:font-semibold [&_h3]:text-gray-800 [&_h3]:mt-6 [&_h3]:mb-3 [&_h4]:text-base [&_h4]:font-medium [&_h4]:text-gray-800 [&_h4]:mt-4 [&_h4]:mb-2 [&_p]:mb-3 [&_pre]:bg-gray-50 [&_pre]:p-4 [&_pre]:rounded-lg [&_pre]:text-sm [&_code]:bg-gray-100 [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-sm [&_strong]:text-gray-800"
       />
-      <div className="mt-12 pt-6 border-t border-gray-100 flex items-center justify-between">
-        <div className="flex-1 min-w-0">
+      <div className="mt-12 pt-6 border-t border-gray-100 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+        <div className="min-w-0">
           {prev ? (
             <button
               onClick={onPrev}
@@ -292,7 +291,7 @@ function ArticleDetail({
             <span className="text-sm text-gray-300">已是第一篇</span>
           )}
         </div>
-        <div className="flex-1 min-w-0 text-right">
+        <div className="min-w-0 md:text-right">
           {next ? (
             <button
               onClick={onNext}
diff --git a/src/home/product/index.tsx b/src/home/product/index.tsx
index ed228ce..aae834f 100644
--- a/src/home/product/index.tsx
+++ b/src/home/product/index.tsx
@@ -154,16 +154,18 @@ export default function ProductPage() {
   }
 
   return (
-    <Wrap className="flex flex-col gap-16 pt-30 bg-white">
+    <Wrap className="flex flex-col gap-16 pt-30  bg-white">
       <div className="flex flex-col">
         <ProductTabs
           tabs={tabs}
           activeId={activeTabId}
           onTabChange={handleTabChange}
         />
-
-        <div className="flex mt-8 mb-8 mx-auto w-full">
-          <div className="shrink-0 border-r border-gray-200">
+        <div className="bg-orange-50 border block md:hidden border-orange-100 text-orange-400 p-3 text-center font-bold text-sm w-full mt-4">
+          需求5个以上，可以联系客服设置优惠价
+        </div>
+        <div className="flex flex-col md:flex-row md:mt-8 md:mb-8 mx-auto w-full">
+          <div className="shrink-0 md:border-r md:border-gray-200">
             <ProductSidebar
               brands={currentTab.brands}
               activeId={currentBrand?.id || ""}
@@ -174,7 +176,7 @@ export default function ProductPage() {
           <div className="flex-1 flex flex-col">
             {!isPurchaseInfo ? (
               <>
-                <div className="grid grid-cols-2 pl-3 text-sm gap-2 text-gray-600 leading-relaxed">
+                <div className="grid grid-cols-1 md:grid-cols-2 pl-3 text-sm gap-2 text-gray-600 leading-relaxed">
                   <ul className="space-y-2">
                     <li className="flex items-start gap-2">
                       <span className="w-2 h-2 mt-1.5 bg-emerald-400 rounded-full shrink-0" />
@@ -196,11 +198,11 @@ export default function ProductPage() {
                     </li>
                   </ul>
                 </div>
-                <div className="bg-orange-50 border gap-3 border-orange-100 text-orange-400 p-3 text-center font-bold mt-3 mb-3 text-sm  w-full">
+                <div className="bg-orange-50 border gap-3 border-orange-100  hidden md:block text-orange-400 p-3 text-center font-bold mt-3 mb-3 text-sm  w-full">
                   需求5个以上，可以联系客服设置优惠价
                 </div>
                 {currentBrand?.versions && currentBrand.versions.length > 0 && (
-                  <div className="w-full mt-2 pl-6">
+                  <div className="w-full mt-2 px-3 md:pl-6 md:pr-0">
                     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                       {currentBrand.versions.map(v => (
                         <button
@@ -219,7 +221,7 @@ export default function ProductPage() {
                     </div>
                   </div>
                 )}
-                <main className="pl-6">
+                <main className="pl-3 md:pl-6">
                   {displayProducts.length > 0 ? (
                     <ProductGrid products={displayProducts} />
                   ) : (
@@ -230,7 +232,7 @@ export default function ProductPage() {
                 </main>
               </>
             ) : (
-              <div className="pl-6 pr-6">
+              <div className="px-3 md:pl-6 md:pr-6">
                 <PurchaseInfo />
               </div>
             )}
diff --git a/src/home/product/productSidebar.tsx b/src/home/product/productSidebar.tsx
index b10d690..6ef68ed 100644
--- a/src/home/product/productSidebar.tsx
+++ b/src/home/product/productSidebar.tsx
@@ -13,21 +13,24 @@ export default function ProductSidebar({
   onSelect,
 }: ProductSidebarProps) {
   return (
-    <aside className="w-30">
-      {brands.map(brand => (
-        <button
-          key={brand.id}
-          onClick={() => onSelect(brand.id)}
-          className={cn(
-            "w-full text-left px-4 py-3 rounded-lg text-sm transition-colors",
-            activeId === brand.id
-              ? "bg-blue-50 text-blue-600 font-semibold"
-              : "text-gray-600 hover:bg-gray-50 hover:text-gray-900",
-          )}
-        >
-          {brand.name}
-        </button>
-      ))}
+    <aside className="w-full md:w-30 overflow-visible">
+      <div className="flex gap-2 overflow-x-auto px-4 py-3 scrollbar-hide md:flex-col md:gap-0 md:overflow-visible md:px-0 md:py-0">
+        {brands.map(brand => (
+          <button
+            key={brand.id}
+            onClick={() => onSelect(brand.id)}
+            className={cn(
+              "shrink-0 whitespace-nowrap px-5 py-1.5 rounded-full text-sm font-medium transition-colors",
+              "md:w-full md:text-left md:px-4 md:py-3 md:rounded-lg md:whitespace-normal",
+              activeId === brand.id
+                ? "bg-blue-50 text-blue-600 font-semibold"
+                : "text-gray-600 hover:bg-gray-50 hover:text-gray-900",
+            )}
+          >
+            {brand.name}
+          </button>
+        ))}
+      </div>
     </aside>
   )
 }
diff --git a/src/home/product/purchaseInfo.tsx b/src/home/product/purchaseInfo.tsx
index 1cdd6c6..83b4488 100644
--- a/src/home/product/purchaseInfo.tsx
+++ b/src/home/product/purchaseInfo.tsx
@@ -1,15 +1,15 @@
 export default function PurchaseInfo() {
   return (
-    <div className="flex w-full max-w-6xl mx-auto">
-      <div className="flex-1 space-y-3 pr-3 border-r">
+    <div className="flex flex-col md:flex-row w-full max-w-6xl mx-auto">
+      <div className="flex-1 space-y-3 md:pr-3 md:border-r">
         <div>
           <h3 className="text-lg font-bold text-orange-400 mb-3">重磅打造：</h3>
           <ul className="space-y-2 text-sm text-gray-600">
-            <li className="flex items-start gap-2 whitespace-nowrap">
+            <li className="flex items-start gap-2">
               <span className="w-2 h-2 mt-1.5 bg-emerald-400 rounded-full shrink-0" />
               极光IP（聚IP池子最大的动态产品），240城市纯净住宅IP；现推广期，天卡1毛体验
             </li>
-            <li className="flex items-start gap-2 whitespace-nowrap">
+            <li className="flex items-start gap-2">
               <span className="w-2 h-2 mt-1.5 bg-emerald-400 rounded-full shrink-0" />
               极狐IP（聚IP网速最快的动态产品），260城市纯净住宅IP；现推广期，天卡1毛体验
             </li>
@@ -40,7 +40,7 @@ export default function PurchaseInfo() {
         </div>
       </div>
 
-      <div className="flex-none w-90 pl-6 space-y-6">
+      <div className="flex-none md:w-90 md:pl-6 space-y-6 mt-6 md:mt-0">
         <h3 className="text-lg font-bold text-orange-400 mb-2">
           1V1定制化企业级业务场景
         </h3>
diff --git a/src/index.css b/src/index.css
index 34fc304..f88af24 100644
--- a/src/index.css
+++ b/src/index.css
@@ -262,3 +262,11 @@ code {
     @apply font-sans;
   }
 }
+
+@utility scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}