wmp/juip-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

动静态IP & 帮助教程 手机端适配

Browse Source
This commit is contained in:
Eamon
2026-08-26 16:55:22 +08:00
parent 5007cd9f51
commit ff56fbd7c3
9 changed files with 63 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/admin/dashboard/page.tsx
View File

@@ -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"

5
src/components/composites/dialogs/editInfoDialog.tsx
View File

@@ -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>

4
src/home/_components/header/menu-mobile.tsx
View File

@@ -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 && (
<>

6
src/home/header.tsx
View File

@@ -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>
{/* 桌面端菜单 */}

25
src/home/help/index.tsx
View File

@@ -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}

20
src/home/product/index.tsx
View File

@@ -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>
)}

33
src/home/product/productSidebar.tsx
View File

@@ -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>
)
}

10
src/home/product/purchaseInfo.tsx
View File

@@ -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>

8
src/index.css
View File

@@ -262,3 +262,11 @@ code {
@apply font-sans;
}
}
@utility scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}