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

2025-12-09 18:01:12 +08:00
parent 2f61856ff6
commit a7f4556d9d
9 changed files with 57 additions and 54 deletions
--- a/README.md
+++ b/README.md
@@ -1,11 +1,33 @@
 ## TODO

-提取页面：
-  - 手机端重新调整样式
-    - 类似电商的底部支付栏
-    - 整体边距，尽量一页显示完整
+首页
+- 推荐文章实现动态展示
+- 网站公告内容重新设计

-整体文字替换
+购买页面：
+- 固定套餐与定制套餐
+  
+业务场景页面，部分内容动态展示
+
+文档中心页面，实现动态路由解析静态或动态文章
+
+业务定制页面优化
+
+考虑重新组织导航栏
+
+页尾
+- 公众号二维码与客户经理信息
+- 服务保障跳转企业微信
+- 站点导航 - 企业服务，推广返利
+- 全球代理
+
+后台导航改进，目前过于散乱
+
+IP 管理按长短效分页
+
+购买与提取手机端优化，尽量一页展示全部
+
+### 次要

 全部替换封装时间范围组件，检查结束时间字段手机端适配问题（需要尾部对齐）

@@ -13,8 +35,6 @@

 树组件优化

-IP 管理按长短效分页
-
 ### 架构改进

 考虑使用 swr 或 react query 来代替直接的服务端 react cache 缓存以及客户端 zustand 缓存，以将服务端请求的数据能够水合到客户端，避免重复请求
--- a/src/app/(home)/collect/page.tsx
+++ b/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'},
        ]}/>
--- a/src/app/(home)/footer.tsx
+++ b/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-500 `}>电话/微信:177 9666 8888</p>
-            <p className={`text-sm text-gray-500 `}>QQ号:70177252</p>
+            <p className="text-sm text-gray-400">大客户经理：张经理</p>
+            <p className="text-sm text-gray-400">微信：17796668888</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-500 hidden sm:block">技术支持</p>
+            <p className="text-sm text-gray-400 hidden sm:block">售前服务</p>
+            <p className="text-sm text-gray-400 hidden sm:block">技术支持</p>
          </div>

          <SiteNavList
            title="站点导航"
            items={[
-              {name: `产品订购`, href: `#`},
-              {name: `获取代理`, href: `#`},
-              {name: `帮助中心`, href: `#`},
+              {name: `产品订购`, href: `/product`},
+              {name: `获取代理`, href: `/collect`},
+              {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="获取代理"
-            items={[
-              {name: `API提取`, href: `/collect`},
-              {name: `代码示例`, href: `#`},
-              {name: `热门地区`, href: `#`},
-            ]}
-          />
-          <SiteNavList
-            title="代理资讯"
+            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">
-          <p className="text-sm text-center">
-            蓝狐代理仅提供IP服务，用户使用蓝狐代理IP从事的任何行为均不代表蓝狐代理IP的意志和观点，与蓝狐代理的立场无关。严禁用户使用蓝狐代理从事任何违法犯罪行为， 产生的相关责任用
-            户自负，对此蓝狐代理不承担任何法律责任。
+        <div className="flex-none mt-6 pt-6 border-t border-gray-700 flex flex-col text-gray-300">
+          <p className="text-xs">
+            蓝狐代理仅提供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>
--- a/src/app/(home)/header.tsx
+++ b/src/app/(home)/header.tsx
@@ -130,11 +130,8 @@ export default function Header(props: HeaderProps) {
                  onPointerLeave={exitMenu}
                />
                <LinkItem
-                  text="企业服务"
-                  href="#"/>
-                <LinkItem
-                  text="推广返利"
-                  href="#"/>
+                  text="业务定制"
+                  href="/customized"/>
              </ul>

              {/* 移动端菜单 */}
--- a/src/app/(home)/help/layout.tsx
+++ b/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>
--- a/src/app/(home)/help/sidebar.tsx
+++ b/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}>
--- a/src/app/(home)/page.tsx
+++ b/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"/>
--- a/src/app/globals.css
+++ b/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;
--- a/src/components/composites/extract/index.tsx
+++ b/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>
        )}