完善支付页面与路由的交互实现

README.md

@@ -1,27 +1,12 @@
 ## TODO
 
-支付等待轮询需要使用 abortcontroller，以便在手动点击时能中断轮询请求
-
-长短效切换 url 没有重写
-
-手机支付后原页面保留完成等待弹窗
-
-支付接口 sse 向客户端推送通知与支付结果等事件
-
-微信支付渠道无法完成支付
+提取页面：
+  - 手机端重新调整样式
+    - 类似电商的底部支付栏
+    - 整体边距，尽量一页显示完整
 
 整体文字替换
 
-后台首页 ：
-- 接口联调
-- banner 拉伸问题
-- 图表组件高度和查询按钮越界问题
-- 公告查看更多跳转实现
-
-手机端支付页面样式调整为类似电商的底部支付栏
-
-MDX code 块语法高亮
-
 全部替换封装时间范围组件，检查结束时间字段手机端适配问题（需要尾部对齐）
 
 页尾链接完善跳转地址
@@ -30,12 +15,6 @@ MDX code 块语法高亮
 
 IP 管理按长短效分页
 
-调整页面大小优化：如果单页大小不超过预期大小，不需要刷新数据
-
-翻页优化：调整页面大小后检查是否需要重置页面到最后一页（需要后端实现）
-
-切换 eslint 到 biome
-
 ### 架构改进
 
 考虑使用 swr 或 react query 来代替直接的服务端 react cache 缓存以及客户端 zustand 缓存，以将服务端请求的数据能够水合到客户端，避免重复请求

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

@@ -15,7 +15,7 @@ export default async function ProductPage(props: ProductPageProps) {
         <BreadCrumb items={[
           {label: '产品中心', href: '/product'},
         ]}/>
-        <Purchase defaultTab={(await props.searchParams)?.type ?? 'short'}/>
+        <Purchase/>
       </Wrap>
     </main>
   )

src/app/admin/purchase/page.tsx

@@ -10,7 +10,7 @@ export type PurchasePageProps = {
 export default async function PurchasePage(props: PurchasePageProps) {
   return (
     <Page className="flex-col">
-      <Purchase defaultTab={(await props.searchParams)?.type ?? 'short'}/>
+      <Purchase/>
     </Page>
   )
 }

src/components/composites/purchase/index.tsx

@@ -1,25 +1,23 @@
 'use client'
-import {ReactNode, useState} from 'react'
+import {ReactNode} from 'react'
 import {merge} from '@/lib/utils'
 import {Tabs, TabsContent, TabsList, TabsTrigger} from '@/components/ui/tabs'
 import LongForm from '@/components/composites/purchase/long/form'
 import ShortForm from '@/components/composites/purchase/short/form'
-import {useSearchParams} from 'next/navigation'
+import {usePathname, useRouter, useSearchParams} from 'next/navigation'
 export type TabType = 'short' | 'long' | 'fixed' | 'custom'
 
-type PurchaseProps = {
-  defaultTab: TabType
-}
-
-export default function Purchase(props: PurchaseProps) {
-  const [tab, setTab] = useState(props.defaultTab)
-
+export default function Purchase() {
+  const router = useRouter()
+  const path = usePathname()
   const params = useSearchParams()
+
+  const tab = params.get('type') as TabType || 'short'
+
   const updateTab = async (tab: string) => {
-    setTab(tab as TabType)
     const newParams = new URLSearchParams(params)
     newParams.set('type', tab)
-    window.history.pushState({}, '', `?${newParams.toString()}`)
+    router.push(`${path}?${newParams.toString()}`)
   }
 
   return (

src/proxy.ts

@@ -29,20 +29,10 @@ export async function proxy(request: NextRequest) {
   }
 
   // 验证访问令牌
-  if (request.cookies.get('auth_token')) {
-    // 如果刷新访问令牌成功，则继续访问之前的页面
-    const isLogin = request.nextUrl.pathname === '/login'
-    const hasRedirect = request.nextUrl.searchParams.get('redirect')
-    if (isLogin && hasRedirect) {
-      return NextResponse.redirect(`${request.nextUrl.origin}${hasRedirect}`)
-    }
-  }
-  else {
-    // 没有访问令牌不允许访问 admin 页面
-    const isAdmin = request.nextUrl.pathname.startsWith('/admin')
-    if (isAdmin) {
-      return NextResponse.redirect(`${request.nextUrl.origin}/login?redirect=${request.nextUrl.pathname}`)
-    }
+  const hasToken = !!request.cookies.get('auth_token')
+  const isToAdmin = request.nextUrl.pathname.startsWith('/admin')
+  if (!hasToken && isToAdmin) {
+    return NextResponse.redirect(`${request.nextUrl.origin}/login?redirect=${request.nextUrl.pathname}`)
   }
 
   return NextResponse.next({request})