优化资源调用，减少页面大小

next.config.ts

@@ -9,6 +9,9 @@ export default createMDX({
 })({
   output: 'standalone',
   pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
+  allowedDevOrigins: [
+    '192.168.3.42',
+  ],
   experimental: {
     mdxRs: {
       mdxType: 'gfm',

public/collect/warn.svg

@@ -1,10 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_152_604)">
-<path d="M10 -8.74228e-07C15.5225 -3.91435e-07 20 4.4775 20 10C20 15.5225 15.5225 20 10 20C4.4775 20 3.91435e-07 15.5225 8.74228e-07 10C1.35702e-06 4.4775 4.4775 -1.35702e-06 10 -8.74228e-07ZM10 1.66667C5.3975 1.66666 1.66667 5.3975 1.66667 10C1.66667 14.6025 5.3975 18.3333 10 18.3333C14.6025 18.3333 18.3333 14.6025 18.3333 10C18.3333 5.3975 14.6025 1.66667 10 1.66667ZM10.8333 10.8333C10.8333 11.0543 10.7455 11.2663 10.5893 11.4226C10.433 11.5789 10.221 11.6667 10 11.6667C9.77899 11.6667 9.56703 11.5789 9.41075 11.4226C9.25446 11.2663 9.16667 11.0543 9.16667 10.8333L9.16667 5C9.16667 4.77899 9.25447 4.56702 9.41075 4.41074C9.56703 4.25446 9.77899 4.16667 10 4.16667C10.221 4.16667 10.433 4.25446 10.5893 4.41074C10.7455 4.56702 10.8333 4.77899 10.8333 5L10.8333 10.8333ZM10.0833 13.5C10.3928 13.5 10.6895 13.6229 10.9083 13.8417C11.1271 14.0605 11.25 14.3572 11.25 14.6667C11.25 14.9761 11.1271 15.2728 10.9083 15.4916C10.6895 15.7104 10.3928 15.8333 10.0833 15.8333C9.77391 15.8333 9.47717 15.7104 9.25838 15.4916C9.03958 15.2728 8.91667 14.9761 8.91667 14.6667C8.91667 14.3572 9.03958 14.0605 9.25838 13.8417C9.47717 13.6229 9.77391 13.5 10.0833 13.5Z" fill="#FF6B00"/>
-</g>
-<defs>
-<clipPath id="clip0_152_604">
-<rect width="20" height="20" fill="white" transform="translate(20 20) rotate(-180)"/>
-</clipPath>
-</defs>
-</svg>

public/logo.svg

@@ -1,16 +0,0 @@
-<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
-  <!-- Background Circle -->
-  <circle cx="50" cy="50" r="45" fill="#2563eb" />
-
-  <!-- Inner Circle -->
-  <circle cx="50" cy="50" r="35" fill="#1d4ed8" />
-
-  <!-- Abstract "A" shape -->
-  <path d="M50 20 L30 70 L40 70 L45 55 L55 55 L60 70 L70 70 L50 20Z" fill="white" />
-  <path d="M45 45 L55 45 L50 30 L45 45Z" fill="#1d4ed8" />
-
-  <!-- Small Decorative Elements -->
-  <circle cx="50" cy="80" r="5" fill="white" />
-  <circle cx="30" cy="30" r="3" fill="#93c5fd" opacity="0.7" />
-  <circle cx="70" cy="30" r="3" fill="#93c5fd" opacity="0.7" />
-</svg>

src/app/(home)/customized/page.tsx

@@ -9,7 +9,7 @@ import {useForm} from 'react-hook-form'
 import {z} from 'zod'
 import {zodResolver} from '@hookform/resolvers/zod'
 import Image from 'next/image'
-import check from './_assets/check.svg'
+import check from '@/assets/check-accent.svg'
 import banner from './_assets/Mask-group.webp'
 import group from './_assets/Group.webp'
 import {merge} from '@/lib/utils'

src/app/(home)/data-capture/page.tsx

@@ -3,7 +3,6 @@ import BreadCrumb from '@/components/bread-crumb'
 import Wrap from '@/components/wrap'
 import {ReactNode} from 'react'
 import Image from 'next/image'
-import React, {useState} from 'react'
 import {useRouter} from 'next/navigation'
 import s1 from './_assets/1.webp'
 import s2 from './_assets/2.webp'
@@ -17,7 +16,8 @@ import s9 from './_assets/9.webp'
 import s10 from './_assets/10.webp'
 import s11 from './_assets/11.webp'
 import s12 from './_assets/12.webp'
-import check from '../customized/_assets/check.svg'
+import check_main from '@/assets/check-main.svg'
+import check_accent from '@/assets/check-accent.svg'
 import {Button} from '@/components/ui/button'
 import {merge} from '@/lib/utils'
 export type CollectPageProps = {}
@@ -40,15 +40,15 @@ export default function CollectPage(props: CollectPageProps) {
                 <p className="mt-10 text-gray-500">从多元网络源精准捕获数据，为洞察市场、优化策略筑牢根基借前沿技术 高效抓取海量信息，解锁数据价值、赋能业务增长新征程</p>
                 <div className="mt-24 max-md:mt-14 flex gap-8 max-md:flex-col">
                   <p className="flex gap-4 items-center">
-                    <Image src="/check.svg" alt="checkbox" width={24} height={24}/>
+                    <Image src={check_main} alt="checkbox" width={24} height={24}/>
                     <span className={`lg:text-md `}>广泛的数据样本</span>
                   </p>
                   <p className="flex gap-4 items-center">
-                    <Image src="/check.svg" alt="checkbox" width={24} height={24}/>
+                    <Image src={check_main} alt="checkbox" width={24} height={24}/>
                     <span className={`lg:text-md `}>实现高频次抓取</span>
                   </p>
                   <p className="flex gap-4 items-center">
-                    <Image src="/check.svg" alt="checkbox" width={24} height={24}/>
+                    <Image src={check_main} alt="checkbox" width={24} height={24}/>
                     <span className={`lg:text-md `}>保护隐私安全</span>
                   </p>
                 </div>
@@ -242,27 +242,27 @@ export default function CollectPage(props: CollectPageProps) {
 
                 <div className="grid grid-cols-3 gap-4">
                   <div className="flex gap-2 items-center">
-                    <Image src={check} alt="特性" width={20} height={20}/>
+                    <Image src={check_accent} alt="特性" width={20} height={20}/>
                     <span>IP时效3-30分钟(可定制)</span>
                   </div>
                   <div className="flex gap-2 items-center">
-                    <Image src={check} alt="特性" width={20} height={20}/>
+                    <Image src={check_accent} alt="特性" width={20} height={20}/>
                     <span>IP覆盖全国各地</span>
                   </div>
                   <div className="flex gap-2 items-center">
-                    <Image src={check} alt="特性" width={20} height={20}/>
+                    <Image src={check_accent} alt="特性" width={20} height={20}/>
                     <span>稳定长输不掉线</span>
                   </div>
                   <div className="flex gap-2 items-center">
-                    <Image src={check} alt="特性" width={20} height={20}/>
+                    <Image src={check_accent} alt="特性" width={20} height={20}/>
                     <span>支持高并发提取</span>
                   </div>
                   <div className="flex gap-2 items-center">
-                    <Image src={check} alt="特性" width={20} height={20}/>
+                    <Image src={check_accent} alt="特性" width={20} height={20}/>
                     <span>平均响应时长：0.03s</span>
                   </div>
                   <div className="flex gap-2 items-center">
-                    <Image src={check} alt="特性" width={20} height={20}/>
+                    <Image src={check_accent} alt="特性" width={20} height={20}/>
                     <span>全国热门静态IP线路</span>
                   </div>
                 </div>

src/app/(home)/footer.tsx

@@ -1,4 +1,5 @@
 import Wrap from '@/components/wrap'
+import Image from 'next/image'
 
 export type FooterProps = {}
 
@@ -8,7 +9,7 @@ export default function Footer(props: FooterProps) {
       <Wrap className="flex flex-col px-4 py-8 lg:p-12">
         <div className="flex-auto overflow-hidden flex flex-wrap justify-between">
           <div className="flex flex-col lg:items-center gap-2 lg:gap-6 max-lg:w-1/2">
-            <img src="/qrcode.svg" alt="logo" className="flex-none w-20 h-20 sm:w-44 sm:h-44 bg-gray-100"/>
+            <Image src="/qrcode.svg" alt="logo" width={80} height={80} className="flex-none size-20 sm:size-44 bg-gray-100"/>
             <span className="text-sm ">关注我们查看更多资讯</span>
           </div>
 

src/app/(home)/page.tsx

@@ -1,10 +1,28 @@
 'use client'
 import {ReactNode} from 'react'
 import Wrap from '@/components/wrap'
-import Image from 'next/image'
+import Image, {StaticImageData} from 'next/image'
 import React from 'react'
 import {useRouter} from 'next/navigation'
 import {useProfileStore} from '@/components/stores-provider'
+import check_main from '@/assets/check-main.svg'
+import banner from './_assets/banner.webp'
+import map from './_assets/map.webp'
+import next from './_assets/next.svg'
+import s1_1 from './_assets/s1-1.webp'
+import s1_2 from './_assets/s1-2.webp'
+import s1_3 from './_assets/s1-3.webp'
+import s1_4 from './_assets/s1-4.webp'
+import s1_check from './_assets/s1-check.svg'
+import s3_main from './_assets/s3-main.webp'
+import s4_1_main from './_assets/s4-1-main.webp'
+import s4_2_main from './_assets/s4-2-main.webp'
+import s4_1_1 from './_assets/s4-1-1.webp'
+import s4_1_2 from './_assets/s4-1-2.webp'
+import s4_1_3 from './_assets/s4-1-3.webp'
+import s4_2_1 from './_assets/s4-2-1.webp'
+import s4_2_2 from './_assets/s4-2-2.webp'
+import s4_2_3 from './_assets/s4-2-3.webp'
 
 export default function Home() {
   const router = useRouter()
@@ -15,22 +33,23 @@ export default function Home() {
     <main className="flex flex-col gap-16 lg:gap-32 mb-16 lg:mb-32">
 
       {/* banner */}
-      <section className={`w-full bg-[url('/banner.webp')] bg-cover bg-position-[center_right_40%]`}>
-        <Wrap className="pt-64 pb-48 max-md:pt-32 max-md:pb-24">
+      <section className="w-full relative">
+        <Image src={banner} alt="banner" className="absolute inset-0 h-full object-cover"/>
+        <Wrap className="relative pt-64 pb-48 max-md:pt-32 max-md:pb-24">
           <h1 className="text-4xl">安全，稳定，快速，合规的代理服务器</h1>
           <p className="mt-10 text-gray-500">遍布全国的代理服务器节点为用户提供智能可靠的IP代理服务</p>
 
           <div className="mt-24 max-md:mt-14 flex gap-8 max-md:flex-col">
             <p className="flex gap-4 items-center">
-              <Image src="/check.svg" alt="checkbox" width={24} height={24}/>
+              <Image src={check_main} alt="checkbox" width={24} height={24}/>
               <span className={`lg:text-lg `}>全国200+城市节点</span>
             </p>
             <p className="flex gap-4 items-center">
-              <Image src="/check.svg" alt="checkbox" width={24} height={24}/>
+              <Image src={check_main} alt="checkbox" width={24} height={24}/>
               <span className={`lg:text-lg `}>300+城市级精准定位</span>
             </p>
             <p className="flex gap-4 items-center">
-              <Image src="/check.svg" alt="checkbox" width={24} height={24}/>
+              <Image src={check_main} alt="checkbox" width={24} height={24}/>
               <span className={`lg:text-lg `}>低延迟&高并发提取</span>
             </p>
           </div>
@@ -77,7 +96,8 @@ export default function Home() {
             <p className="mt-9 max-lg:mt-2 text-5xl bg-linear-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2">99%</p>
           </li>
         </ul>
-        <img src="/map.webp" alt="map" className="w-[1200px]"/>
+        <Image src={map} alt="map" className="w-[1200px]"/>
+
       </Section>
 
       {/* 优势 1 */}
@@ -87,32 +107,32 @@ export default function Home() {
             `grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8`,
           ].join(' ')}>
           <Sec3Item
-            icon="s1-1"
+            icon={s1_1}
             title="短期动态IP池"
             terms={[
-              {icon: `s1-check`, text: `IP时效3-30分钟(可定制)`},
-              {icon: `s1-check`, text: `支持高并发提取`},
+              {icon: s1_check, text: `IP时效3-30分钟(可定制)`},
+              {icon: s1_check, text: `支持高并发提取`},
             ]}/>
           <Sec3Item
-            icon="s1-2"
+            icon={s1_2}
             title="长期静态IP池"
             terms={[
-              {icon: `s1-check`, text: `IP覆盖全国各地`},
-              {icon: `s1-check`, text: `平均响应时长：0.03s`},
+              {icon: s1_check, text: `IP覆盖全国各地`},
+              {icon: s1_check, text: `平均响应时长：0.03s`},
             ]}/>
           <Sec3Item
-            icon="s1-3"
+            icon={s1_3}
             title="固定IP池"
             terms={[
-              {icon: `s1-check`, text: `稳定长输不掉线`},
-              {icon: `s1-check`, text: `全国热门静态IP线路`},
+              {icon: s1_check, text: `稳定长输不掉线`},
+              {icon: s1_check, text: `全国热门静态IP线路`},
             ]}/>
           <Sec3Item
-            icon="s1-4"
+            icon={s1_4}
             title="企业级定制池"
             terms={[
-              {icon: `s1-check`, text: `可视化监控设计`},
-              {icon: `s1-check`, text: `技术团队现场支持`},
+              {icon: s1_check, text: `可视化监控设计`},
+              {icon: s1_check, text: `技术团队现场支持`},
             ]}/>
         </ul>
       </Section>
@@ -121,19 +141,19 @@ export default function Home() {
       <Section title="HTTP 产品优势">
         <div className="flex gap-36">
           <ul className="flex-1 flex flex-col gap-6">
-            <Sec4Item icon="s4-1-1" title="安全合规" description="国内三大运营商支持"/>
-            <Sec4Item icon="s4-1-2" title="稳定链接" description="IP纯净度高达99.9%"/>
-            <Sec4Item icon="s4-1-3" title="超匿名性" description="稳定传输，保护隐私安全"/>
+            <Sec4Item icon={s4_1_1} title="安全合规" description="国内三大运营商支持"/>
+            <Sec4Item icon={s4_1_2} title="稳定链接" description="IP纯净度高达99.9%"/>
+            <Sec4Item icon={s4_1_3} title="超匿名性" description="稳定传输，保护隐私安全"/>
           </ul>
-          <img src="/s4-1-main.webp" alt="s2-1-main" className="w-0 flex-1 object-contain max-lg:hidden"/>
+          <Image src={s4_1_main} alt="s2-1-main" className="w-0 flex-1 object-contain max-lg:hidden"/>
         </div>
 
         <div className="flex gap-36">
-          <img src="/s4-2-main.webp" alt="s2-1-main" className="w-0 flex-1 object-contain max-lg:hidden"/>
+          <Image src={s4_2_main} alt="s2-1-main" className="w-0 flex-1 object-contain max-lg:hidden"/>
           <ul className="flex-1 flex flex-col gap-6">
-            <Sec4Item icon="s4-2-1" title="API接口文档" description="与第三方软件轻松集成"/>
-            <Sec4Item icon="s4-2-2" title="多种编程语言代码" description="C语言、GO语言、Python..."/>
-            <Sec4Item icon="s4-2-3" title="双重认证方式" description="API提取+账密认证"/>
+            <Sec4Item icon={s4_2_1} title="API接口文档" description="与第三方软件轻松集成"/>
+            <Sec4Item icon={s4_2_2} title="多种编程语言代码" description="C语言、GO语言、Python..."/>
+            <Sec4Item icon={s4_2_3} title="双重认证方式" description="API提取+账密认证"/>
           </ul>
         </div>
       </Section>
@@ -142,7 +162,7 @@ export default function Home() {
       <Section title="行业资讯">
         <div className="flex gap-8 max-md:gap-4">
           <button className="px-4 max-md:-mx-4">
-            <img src="/next.svg" alt="prev" className="rotate-180"/>
+            <Image src={next} alt="prev" className="rotate-180"/>
           </button>
 
           <div
@@ -150,7 +170,7 @@ export default function Home() {
               `shadow-[4px_4px_20px_4px] shadow-blue-50 rounded-lg`,
               `flex p-14 md:gap-14 max-md:flex-col max-md:p-4`,
             ].join(' ')}>
-            <img src="/s3-main.webp" alt="tumb" className="w-2/3 md:flex-1 md:w-0 object-cover max-md:self-center"/>
+            <Image src={s3_main} alt="tumb" className="w-2/3 md:flex-1 md:w-0 object-cover max-md:self-center"/>
             <div className="flex-2 flex flex-col justify-between gap-4">
               <h3 className="flex justify-between">
                 <span className="text-xl">我是标题</span>
@@ -162,14 +182,14 @@ export default function Home() {
               <div className="flex justify-end">
                 <a href="#" className="text-sm text-gray-500 flex items-center gap-4">
                   更多详情
-                  <img src="/next.svg" alt="more" className="h-4 fill-gray-400"/>
+                  <Image src={next} alt="more" className="h-4 fill-gray-400"/>
                 </a>
               </div>
             </div>
           </div>
 
           <button className="px-4 max-md:-mx-4">
-            <img src="/next.svg" alt="prev"/>
+            <Image src={next} alt="prev"/>
           </button>
         </div>
       </Section>
@@ -192,10 +212,10 @@ function Section(props: {
 }
 
 function Sec3Item(props: {
-  icon: string
+  icon: StaticImageData
   title: string
   terms: {
-    icon: string
+    icon: StaticImageData
     text: string
   }[]
 }) {
@@ -205,13 +225,13 @@ function Sec3Item(props: {
         `p-8 flex flex-col gap-5 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white rounded-lg`,
         `max-md:items-center`,
       ].join(' ')}>
-      <img src={`/${props.icon}.webp`} alt="s1-1" aria-hidden className="w-44 h-44 object-cover"/>
+      <Image src={props.icon} alt="s1-1" aria-hidden className="self-center w-44 h-44 object-cover"/>
       <h3 className="text-xl">{props.title}</h3>
       <div className="flex flex-col gap-3">
         {props.terms.map((item, index) => {
           return (
             <p key={index} className="text-sm text-gray-500 flex gap-3 items-center">
-              <img src={`/${item.icon}.svg`} alt="check" aria-hidden className="w-5 h-5"/>
+              <Image src={item.icon} alt="check" aria-hidden className="w-5 h-5"/>
               <span>{item.text}</span>
             </p>
           )
@@ -222,13 +242,13 @@ function Sec3Item(props: {
 }
 
 function Sec4Item(props: {
-  icon: string
+  icon: StaticImageData
   title: string
   description: string
 }) {
   return (
     <li className="flex gap-8 items-center p-4 lg:p-8 shadow-[4px_4px_20px_4px] shadow-blue-50 rounded-lg">
-      <img src={`/${props.icon}.webp`} alt="s2-1-1" aria-hidden className="w-24 h-24 object-contain"/>
+      <Image src={props.icon} alt="s2-1-1" aria-hidden className="w-24 h-24 object-contain"/>
       <div className="flex flex-col gap-3">
         <h3 className="text-xl">{props.title}</h3>
         <p>{props.description}</p>

src/app/admin/(dashboard)/_client/charts.tsx

@@ -15,7 +15,7 @@ import {useState} from 'react'
 import {statisticsResourceUsage} from '@/actions/dashboard'
 import {ExtraResp} from '@/lib/api'
 import {toast} from 'sonner'
-import {addDays, compareAsc, format, subDays} from 'date-fns'
+import {compareAsc, format, subDays} from 'date-fns'
 import {Label} from '@/components/ui/label'
 import {ChartConfig, ChartContainer} from '@/components/ui/chart'
 import {CartesianGrid, XAxis, YAxis, Tooltip, Area, AreaChart, Legend} from 'recharts'

src/app/layout.tsx

@@ -2,15 +2,9 @@
 import {ReactNode} from 'react'
 import {Metadata} from 'next'
 import './globals.css'
-import localFont from 'next/font/local'
 import {Toaster} from '@/components/ui/sonner'
 import StoresProvider from '@/components/stores-provider'
 import Effects from '@/app/effects'
-import {getProfile} from '@/actions/auth'
-
-const font = localFont({
-  src: './NotoSansSC-VariableFont_wght.ttf',
-})
 
 export async function generateMetadata(): Promise<Metadata> {
   return {
@@ -25,7 +19,7 @@ export default async function RootLayout({
 }>) {
   return (
     <html lang="zh-CN">
-      <body className={`${font.className}`}>
+      <body>
         <StoresProvider>
           <Effects>{children}</Effects>
         </StoresProvider>

src/components/composites/purchase/long/center.tsx

@@ -6,11 +6,10 @@ import {Button} from '@/components/ui/button'
 import {Minus, Plus} from 'lucide-react'
 import FormOption from '@/components/composites/purchase/option'
 import Image from 'next/image'
-import check from '@/components/composites/purchase/_assets/check.svg'
+import check from '../_assets/check.svg'
 import {Schema} from '@/components/composites/purchase/long/form'
 import {useFormContext} from 'react-hook-form'
 import {Card} from '@/components/ui/card'
-import {min} from 'date-fns'
 
 export default function Center() {
   const form = useFormContext<Schema>()

src/components/composites/purchase/long/right.tsx

@@ -5,9 +5,9 @@ import {RadioGroup} from '@/components/ui/radio-group'
 import {FormField} from '@/components/ui/form'
 import FormOption from '@/components/composites/purchase/option'
 import Image from 'next/image'
-import alipay from '@/components/composites/purchase/_assets/alipay.svg'
-import wechat from '@/components/composites/purchase/_assets/wechat.svg'
-import balance from '@/components/composites/purchase/_assets/balance.svg'
+import alipay from '../_assets/alipay.svg'
+import wechat from '../_assets/wechat.svg'
+import balance from '../_assets/balance.svg'
 import {useProfileStore} from '@/components/stores-provider'
 import RechargeModal from '@/components/composites/recharge'
 import Pay from '@/components/composites/purchase/pay'

src/components/composites/purchase/short/center.tsx

@@ -6,7 +6,7 @@ import {Button} from '@/components/ui/button'
 import {Minus, Plus} from 'lucide-react'
 import FormOption from '@/components/composites/purchase/option'
 import Image from 'next/image'
-import check from '@/components/composites/purchase/_assets/check.svg'
+import check from '../_assets/check.svg'
 import {useFormContext} from 'react-hook-form'
 import {Schema} from '@/components/composites/purchase/short/form'
 import {Card} from '@/components/ui/card'

src/components/composites/purchase/short/right.tsx

@@ -5,9 +5,9 @@ import {RadioGroup} from '@/components/ui/radio-group'
 import {FormField} from '@/components/ui/form'
 import FormOption from '@/components/composites/purchase/option'
 import Image from 'next/image'
-import alipay from '@/components/composites/purchase/_assets/alipay.svg'
-import wechat from '@/components/composites/purchase/_assets/wechat.svg'
-import balance from '@/components/composites/purchase/_assets/balance.svg'
+import alipay from '../_assets/alipay.svg'
+import wechat from '../_assets/wechat.svg'
+import balance from '../_assets/balance.svg'
 import {useProfileStore} from '@/components/stores-provider'
 import RechargeModal from '@/components/composites/recharge'
 import {buttonVariants} from '@/components/ui/button'