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 { 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 DataTable from "@/components/data-table"
import Page from "@/components/page" import Page from "@/components/page"
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"

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

@@ -110,10 +110,7 @@ export function EditInfoDialog({
name="taobao" name="taobao"
control={form.control} control={form.control}
render={({ field }) => ( render={({ field }) => (
<Input <Input {...field} className="h-11 bg-gray-50 border-gray-200" />
{...field}
className="h-11 bg-gray-50 border-gray-200"
/>
)} )}
/> />
</div> </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 to="/help" onNavigate={onClose}>
帮助/教程 帮助/教程
</MobileNavLink> </MobileNavLink>
<MobileNavLink to="/client" onNavigate={onClose}> {/* <MobileNavLink to="/client" onNavigate={onClose}>
下载客户端 下载客户端
</MobileNavLink> </MobileNavLink> */}
{authed && ( {authed && (
<> <>

6
src/home/header.tsx
View File

@@ -53,7 +53,7 @@ export default function Header() {
: `bg-transparent shadow-none`, : `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"> <nav className="flex items-center gap-4 lg:gap-8">
{/* logo + 网站名称 */} {/* logo + 网站名称 */}
<NavLink to="/" className="flex items-center gap-2 shrink-0"> <NavLink to="/" className="flex items-center gap-2 shrink-0">
@@ -62,9 +62,7 @@ export default function Header() {
alt="聚IP" alt="聚IP"
className="w-10 h-10 max-md:w-8 max-md:h-8 object-contain" 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"> <span className="text-2xl max-md:text-xl font-bold">聚IP</span>
聚IP
</span>
</NavLink> </NavLink>
{/* 桌面端菜单 */} {/* 桌面端菜单 */}

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

@@ -108,19 +108,19 @@ export default function HelpPage() {
</div> </div>
</div> </div>
<div className="flex gap-8"> <div className="flex flex-col md:flex-row gap-6 md:gap-8">
<aside className="w-52 shrink-0"> <aside className="w-full md:w-52 md:shrink-0">
<nav className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden sticky top-28"> <nav className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden md:sticky md:top-28">
<ul> <ul className="flex overflow-x-auto scrollbar-hide md:block">
{CATEGORIES.map(cat => ( {CATEGORIES.map(cat => (
<li key={cat.id}> <li key={cat.id} className="shrink-0">
<button <button
onClick={() => { onClick={() => {
setActiveCategoryId(cat.id) setActiveCategoryId(cat.id)
setSelectedArticle(null) setSelectedArticle(null)
}} }}
className={cn( 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 activeCategoryId === cat.id
? "bg-blue-50 text-blue-600 font-medium cursor-pointer" ? "bg-blue-50 text-blue-600 font-medium cursor-pointer"
: "text-gray-600 hover:bg-gray-50 cursor-pointer", : "text-gray-600 hover:bg-gray-50 cursor-pointer",
@@ -194,7 +194,7 @@ function ArticleList({
onArticleClick: (article: Article) => void onArticleClick: (article: Article) => void
}) { }) {
return ( 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 ? ( {articles.length === 0 ? (
<div className="text-center py-16 text-gray-400"> <div className="text-center py-16 text-gray-400">
<SearchIcon className="size-12 mx-auto mb-4 opacity-30" /> <SearchIcon className="size-12 mx-auto mb-4 opacity-30" />
@@ -250,7 +250,7 @@ function ArticleDetail({
}, [article.content]) }, [article.content])
return ( 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"> <nav className="flex items-center gap-2 text-sm text-gray-400 mb-6">
{categoryName && ( {categoryName && (
<> <>
@@ -268,9 +268,8 @@ function ArticleDetail({
{/* biome-ignore lint/a11y/useMediaCaption: 教程视频无字幕文件 */} {/* biome-ignore lint/a11y/useMediaCaption: 教程视频无字幕文件 */}
<video <video
controls controls
height={500}
src={videoUrl} src={videoUrl}
className="max-w-full mx-auto rounded-lg" className="w-full h-auto max-w-full mx-auto rounded-lg"
/> />
</div> </div>
)} )}
@@ -278,8 +277,8 @@ function ArticleDetail({
ref={contentRef} 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" 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="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="flex-1 min-w-0"> <div className="min-w-0">
{prev ? ( {prev ? (
<button <button
onClick={onPrev} onClick={onPrev}
@@ -292,7 +291,7 @@ function ArticleDetail({
<span className="text-sm text-gray-300">已是第一篇</span> <span className="text-sm text-gray-300">已是第一篇</span>
)} )}
</div> </div>
<div className="flex-1 min-w-0 text-right"> <div className="min-w-0 md:text-right">
{next ? ( {next ? (
<button <button
onClick={onNext} onClick={onNext}

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

@@ -154,16 +154,18 @@ export default function ProductPage() {
} }
return ( 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"> <div className="flex flex-col">
<ProductTabs <ProductTabs
tabs={tabs} tabs={tabs}
activeId={activeTabId} activeId={activeTabId}
onTabChange={handleTabChange} onTabChange={handleTabChange}
/> />
<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">
<div className="flex mt-8 mb-8 mx-auto w-full"> 需求5个以上，可以联系客服设置优惠价
<div className="shrink-0 border-r border-gray-200"> </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 <ProductSidebar
brands={currentTab.brands} brands={currentTab.brands}
activeId={currentBrand?.id || ""} activeId={currentBrand?.id || ""}
@@ -174,7 +176,7 @@ export default function ProductPage() {
<div className="flex-1 flex flex-col"> <div className="flex-1 flex flex-col">
{!isPurchaseInfo ? ( {!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"> <ul className="space-y-2">
<li className="flex items-start gap-2"> <li className="flex items-start gap-2">
<span className="w-2 h-2 mt-1.5 bg-emerald-400 rounded-full shrink-0" /> <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> </li>
</ul> </ul>
</div> </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个以上，可以联系客服设置优惠价 需求5个以上，可以联系客服设置优惠价
</div> </div>
{currentBrand?.versions && currentBrand.versions.length > 0 && ( {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"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{currentBrand.versions.map(v => ( {currentBrand.versions.map(v => (
<button <button
@@ -219,7 +221,7 @@ export default function ProductPage() {
</div> </div>
</div> </div>
)} )}
<main className="pl-6"> <main className="pl-3 md:pl-6">
{displayProducts.length > 0 ? ( {displayProducts.length > 0 ? (
<ProductGrid products={displayProducts} /> <ProductGrid products={displayProducts} />
) : ( ) : (
@@ -230,7 +232,7 @@ export default function ProductPage() {
</main> </main>
</> </>
) : ( ) : (
<div className="pl-6 pr-6"> <div className="px-3 md:pl-6 md:pr-6">
<PurchaseInfo /> <PurchaseInfo />
</div> </div>
)} )}

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

@@ -13,21 +13,24 @@ export default function ProductSidebar({
onSelect, onSelect,
}: ProductSidebarProps) { }: ProductSidebarProps) {
return ( return (
<aside className="w-30"> <aside className="w-full md:w-30 overflow-visible">
{brands.map(brand => ( <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">
<button {brands.map(brand => (
key={brand.id} <button
onClick={() => onSelect(brand.id)} key={brand.id}
className={cn( onClick={() => onSelect(brand.id)}
"w-full text-left px-4 py-3 rounded-lg text-sm transition-colors", className={cn(
activeId === brand.id "shrink-0 whitespace-nowrap px-5 py-1.5 rounded-full text-sm font-medium transition-colors",
? "bg-blue-50 text-blue-600 font-semibold" "md:w-full md:text-left md:px-4 md:py-3 md:rounded-lg md:whitespace-normal",
: "text-gray-600 hover:bg-gray-50 hover:text-gray-900", 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> >
))} {brand.name}
</button>
))}
</div>
</aside> </aside>
) )
} }

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

@@ -1,15 +1,15 @@
export default function PurchaseInfo() { export default function PurchaseInfo() {
return ( return (
<div className="flex w-full max-w-6xl mx-auto"> <div className="flex flex-col md:flex-row w-full max-w-6xl mx-auto">
<div className="flex-1 space-y-3 pr-3 border-r"> <div className="flex-1 space-y-3 md:pr-3 md:border-r">
<div> <div>
<h3 className="text-lg font-bold text-orange-400 mb-3">重磅打造：</h3> <h3 className="text-lg font-bold text-orange-400 mb-3">重磅打造：</h3>
<ul className="space-y-2 text-sm text-gray-600"> <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" /> <span className="w-2 h-2 mt-1.5 bg-emerald-400 rounded-full shrink-0" />
极光IP（聚IP池子最大的动态产品），240城市纯净住宅IP；现推广期，天卡1毛体验 极光IP（聚IP池子最大的动态产品），240城市纯净住宅IP；现推广期，天卡1毛体验
</li> </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" /> <span className="w-2 h-2 mt-1.5 bg-emerald-400 rounded-full shrink-0" />
极狐IP（聚IP网速最快的动态产品），260城市纯净住宅IP；现推广期，天卡1毛体验 极狐IP（聚IP网速最快的动态产品），260城市纯净住宅IP；现推广期，天卡1毛体验
</li> </li>
@@ -40,7 +40,7 @@ export default function PurchaseInfo() {
</div> </div>
</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"> <h3 className="text-lg font-bold text-orange-400 mb-2">
1V1定制化企业级业务场景 1V1定制化企业级业务场景
</h3> </h3>

8
src/index.css
View File

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