优化多个页面样式与展示文本

README.md

@@ -1,11 +1,33 @@
 ## TODO
 
-提取页面：
+首页
-  - 手机端重新调整样式
+- 推荐文章实现动态展示
-    - 类似电商的底部支付栏
+- 网站公告内容重新设计
-    - 整体边距，尽量一页显示完整
 
-整体文字替换
+购买页面：
+- 固定套餐与定制套餐
+  
+业务场景页面，部分内容动态展示
+
+文档中心页面，实现动态路由解析静态或动态文章
+
+业务定制页面优化
+
+考虑重新组织导航栏
+
+页尾
+- 公众号二维码与客户经理信息
+- 服务保障跳转企业微信
+- 站点导航 - 企业服务，推广返利
+- 全球代理
+
+后台导航改进，目前过于散乱
+
+IP 管理按长短效分页
+
+购买与提取手机端优化，尽量一页展示全部
+
+### 次要
 
 全部替换封装时间范围组件，检查结束时间字段手机端适配问题（需要尾部对齐）
 
@@ -13,8 +35,6 @@
 
 树组件优化
 
-IP 管理按长短效分页
-
 ### 架构改进
 
 考虑使用 swr 或 react query 来代替直接的服务端 react cache 缓存以及客户端 zustand 缓存，以将服务端请求的数据能够水合到客户端，避免重复请求

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

@@ -7,7 +7,7 @@ export type CollectPageProps = {}
 export default function CollectPage(props: CollectPageProps) {
   return (
     <main className="mt-20 flex flex-col gap-4">
-      <Wrap className="flex flex-col py-8 gap-8">
+      <Wrap className="flex flex-col py-8 gap-4">
         <BreadCrumb items={[
           {label: '短效IP 提取', href: '/collect'},
         ]}/>

src/app/(home)/footer.tsx

@@ -8,27 +8,27 @@ export default function Footer(props: FooterProps) {
     <footer className="bg-gray-900 text-white overflow-hidden">
       <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">
+          <div className="flex flex-col lg:items-center gap-2 max-lg:w-1/2">
             <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>
+            <span className="text-sm text-gray-400">关注我们查看更多资讯</span>
           </div>
 
           <div className="flex flex-col gap-2 lg:gap-4 max-lg:w-1/2">
             <h3>商务合作</h3>
-            <p className={`text-sm text-gray-500 `}>大客户经理:张经理</p>
+            <p className="text-sm text-gray-400">大客户经理：张经理</p>
-            <p className={`text-sm text-gray-500 `}>电话/微信:177 9666 8888</p>
+            <p className="text-sm text-gray-400">微信：17796668888</p>
-            <p className={`text-sm text-gray-500 `}>QQ号:70177252</p>
+            <p className="text-sm text-gray-400">QQ： 70177252</p>
             <h3 className="hidden sm:block">服务保障</h3>
-            <p className="text-sm text-gray-500 hidden sm:block">售前服务</p>
+            <p className="text-sm text-gray-400 hidden sm:block">售前服务</p>
-            <p className="text-sm text-gray-500 hidden sm:block">技术支持</p>
+            <p className="text-sm text-gray-400 hidden sm:block">技术支持</p>
           </div>
 
           <SiteNavList
             title="站点导航"
             items={[
-              {name: `产品订购`, href: `#`},
+              {name: `产品订购`, href: `/product`},
-              {name: `获取代理`, href: `#`},
+              {name: `获取代理`, href: `/collect`},
-              {name: `帮助中心`, href: `#`},
+              {name: `帮助中心`, href: `/docs`},
               {name: `企业服务`, href: `#`},
               {name: `推广返利`, href: `#`},
             ]}
@@ -41,13 +41,6 @@ export default function Footer(props: FooterProps) {
               {name: `固定IP代理`, href: `/product?type=fixed`},
             ]}
           />
-          <SiteNavList
-            title="全球代理"
-            items={[
-              {name: `动态代理`, href: `#`},
-              {name: `静态代理`, href: `#`},
-            ]}
-          />
           <SiteNavList
             title="使用案例"
             items={[
@@ -62,15 +55,7 @@ export default function Footer(props: FooterProps) {
             ]}
           />
           <SiteNavList
-            title="获取代理"
+            title="帮助文档"
-            items={[
-              {name: `API提取`, href: `/collect`},
-              {name: `代码示例`, href: `#`},
-              {name: `热门地区`, href: `#`},
-            ]}
-          />
-          <SiteNavList
-            title="代理资讯"
             items={[
               {name: `产品功能`, href: `#`},
               {name: `使用教程`, href: `#`},
@@ -79,12 +64,11 @@ export default function Footer(props: FooterProps) {
           />
         </div>
 
-        <div className="flex-none mt-6 pt-6 border-t border-gray-300 flex flex-col items-center">
+        <div className="flex-none mt-6 pt-6 border-t border-gray-700 flex flex-col text-gray-300">
-          <p className="text-sm text-center">
+          <p className="text-xs">
-            蓝狐代理仅提供IP服务，用户使用蓝狐代理IP从事的任何行为均不代表蓝狐代理IP的意志和观点，与蓝狐代理的立场无关。严禁用户使用蓝狐代理从事任何违法犯罪行为， 产生的相关责任用
+            蓝狐代理仅提供IP服务，用户使用蓝狐代理IP从事的任何行为均不代表蓝狐代理IP的意志和观点，与蓝狐代理的立场无关。严禁用户使用蓝狐代理从事任何违法犯罪行为， 产生的相关责任用户自负，对此蓝狐代理不承担任何法律责任。
-            户自负，对此蓝狐代理不承担任何法律责任。
           </p>
-          <p className={`text-sm mt-3 `}>版权所有 河南华连网络科技有限公司 | 豫ICP备17004061号-17 | 增值电信业务经营许可证：B1-20190663</p>
+          <p className={`text-xs mt-3 `}>版权所有 河南华连网络科技有限公司 | 豫ICP备17004061号-17 | 增值电信业务经营许可证：B1-20190663</p>
         </div>
       </Wrap>
     </footer>
@@ -108,7 +92,7 @@ function SiteNavList(props: {
         ].join(' ')}>
         {props.items.map((item, index) => (
           <li key={index}>
-            <a href={item.href} className="text-sm text-gray-500">{item.name}</a>
+            <a href={item.href} className="text-sm text-gray-400">{item.name}</a>
           </li>
         ))}
       </ul>

src/app/(home)/header.tsx

@@ -130,11 +130,8 @@ export default function Header(props: HeaderProps) {
                   onPointerLeave={exitMenu}
                 />
                 <LinkItem
-                  text="企业服务"
+                  text="业务定制"
-                  href="#"/>
+                  href="/customized"/>
-                <LinkItem
-                  text="推广返利"
-                  href="#"/>
               </ul>
 
               {/* 移动端菜单 */}

src/app/(home)/help/layout.tsx

@@ -14,7 +14,7 @@ export default function HelpLayout(props: {
         ]}/>
         <div className="flex gap-6">
           <Sidebar/>
-          <div className="flex-1 bg-white border rounded p-6 min-h-[420px]">
+          <div className="flex-1 bg-white  rounded p-6 min-h-[420px]">
             {props.children}
           </div>
         </div>

src/app/(home)/help/sidebar.tsx

@@ -48,7 +48,7 @@ export default function Sidebar({collapsed = false, selected, onSelect, onToggle
   }
 
   return (
-    <aside className={`bg-white border rounded p-3 transition-all duration-200 flex-shrink-0 ${collapsed ? 'w-20' : 'w-72'}`}>
+    <aside className={`bg-white  rounded p-3 transition-all duration-200 flex-shrink-0 ${collapsed ? 'w-20' : 'w-72'}`}>
       <nav className="space-y-2">
         {MENU.map(section => (
           <div key={section.title}>

src/app/(home)/page.tsx

@@ -30,7 +30,7 @@ export default function Home() {
   const profile = useProfileStore(store => store.profile)
 
   return (
-    <main className="flex flex-col gap-16 lg:gap-32 mb-16 lg:mb-32">
+    <main className="flex flex-col gap-16 lg:gap-32 pb-16 lg:pb-32 bg-white">
 
       {/* banner */}
       <section className="w-full relative">
@@ -158,8 +158,8 @@ export default function Home() {
         </div>
       </Section>
 
-      {/* 行业资讯 */}
+      {/* 推荐文章 */}
-      <Section title="行业资讯">
+      <Section title="推荐文章">
         <div className="flex gap-8 max-md:gap-4">
           <button className="px-4 max-md:-mx-4">
             <Image src={next} alt="prev" className="rotate-180"/>

src/app/globals.css

@@ -141,6 +141,7 @@
   }
 }
 
+/* 默认样式覆盖 */
 @layer base {
   * {
     @apply border-border outline-ring/50;
@@ -155,6 +156,7 @@
   }
 }
 
+/* highlight.js 样式覆盖 */
 pre code.hljs {
     background: inherit;
     padding: 0;

src/components/composites/extract/index.tsx

@@ -246,7 +246,7 @@ const FormFields = memo(() => {
             </FormLabel>
             <FormLabel htmlFor={`${id}-v-space`} className="px-3 h-10 border rounded-md flex items-center text-sm">
               <RadioGroupItem value="9" id={`${id}-v-space`} className="mr-2"/>
-              <span>制表符 ( \t )</span>
+              <span>制表符 (\t)</span>
             </FormLabel>
           </RadioGroup>
         )}
@@ -261,15 +261,15 @@ const FormFields = memo(() => {
             className="grid grid-cols-2 md:grid-cols-3 gap-4">
             <FormLabel htmlFor={`${id}-v-newline2`} className="px-3 h-10 border rounded-md flex items-center text-sm">
               <RadioGroupItem value="13,10" id={`${id}-v-newline2`} className="mr-2"/>
-              <span>回车换行 ( \r\n )</span>
+              <span>回车换行 (\r\n)</span>
             </FormLabel>
             <FormLabel htmlFor={`${id}-v-newline`} className="px-3 h-10 border rounded-md flex items-center text-sm">
               <RadioGroupItem value="10" id={`${id}-v-newline`} className="mr-2"/>
-              <span>换行 ( \n )</span>
+              <span>换行 (\n)</span>
             </FormLabel>
             <FormLabel htmlFor={`${id}-v-newline3`} className="px-3 h-10 border rounded-md flex items-center text-sm">
               <RadioGroupItem value="13" id={`${id}-v-newline3`} className="mr-2"/>
-              <span>回车 ( \r )</span>
+              <span>回车 (\r)</span>
             </FormLabel>
           </RadioGroup>
         )}