完成个人中心页面功能，公共组件部分调整

README.md

@@ -1,5 +1,9 @@
 ## TODO
 
+验证码读秒用 store 保存到本地，(全局共享读秒时间)？
+
+网页标题根据实际页面变化
+
 检查时间范围选择，限定到一定范围内
 
 将翻页操作反映在路由历史中，可以通过后退返回到上一个翻页状态
@@ -21,3 +25,6 @@
 - [ ] 提取记录
 - [ ] 使用记录
 
+检查扩大服务端组件边界
+
+检查 Card 替换 section 或 div

src/actions/base.ts

@@ -163,6 +163,7 @@ async function postCall<R = undefined>(rawResp: Promise<ApiResponse<R>>) {
   ].some(item => item.test(pathname))
 
   if (match && !resp.success && resp.status === 401) {
+    console.log("!!!!!!!!!redirect", resp.message)
     redirect(pathname === '/' ? '/login' : `/login?redirect=${pathname}`)
   }
 

src/actions/user.ts

@@ -1,5 +1,4 @@
 'use server'
-
 import {callByUser, callPublic} from '@/actions/base'
 
 export async function RechargeByAlipay(props: {
@@ -51,3 +50,20 @@ export async function IdentifyCallback(props: {
     message: string
   }>('/api/user/identify/callback', props)
 }
+
+export async function update(props: {
+  username: string
+  email: string
+  contact_qq: string
+  contact_wechat: string
+}) {
+  return await callByUser('/api/user/update', props)
+}
+
+export async function updatePassword(props: {
+  phone: string
+  code: string
+  password: string
+}) {
+  return await callByUser('/api/user/update/password', props)
+}

src/app/admin/identify/page.tsx

@@ -18,6 +18,8 @@ import personal from './_assets/personal.webp'
 import step1 from './_assets/step1.webp'
 import step2 from './_assets/step2.webp'
 import step3 from './_assets/step3.webp'
+import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@/components/ui/card'
+import {WorkflowIcon} from 'lucide-react'
 
 export type IdentifyPageProps = {}
 
@@ -180,15 +182,21 @@ export default function IdentifyPage(props: IdentifyPageProps) {
         </div>
       </div>
 
-      <section className={`flex-none basis-80 flex flex-col bg-white rounded-lg p-4 gap-6`}>
-        <h3 className={`text-xl font-medium`}>操作引导</h3>
-        <p className={`text-sm text-weak`}>为响应国家相关规定，使用HTTP代理需完成实名认证。认证服务由支付宝提供，您的个人信息将受到严格保护，仅用于账户安全认证</p>
-        <div className={`flex flex-col`}>
+      <Card className={`flex-none basis-80`}>
+        <CardHeader>
+          <CardTitle>
+            <WorkflowIcon size={18}/>操作引导
+          </CardTitle>
+        </CardHeader>
+        <CardContent className={`flex flex-col px-4`}>
+          <p className={`text-sm text-weak mb-4`}>
+            为响应国家相关规定，使用HTTP代理需完成实名认证。认证服务由支付宝提供，您的个人信息将受到严格保护，仅用于账户安全认证
+          </p>
           <p className={`flex gap-2 items-center justify-between w-56 self-center`}>
-            <div className={`flex gap-2`}>
-              <span className={`bg-primary/25 text-primary w-8 h-8 rounded-full flex items-center justify-center`}>01</span>
-              <span>注册账号</span>
-            </div>
+              <span className={`flex gap-2`}>
+                <span className={`bg-primary/25 text-primary w-8 h-8 rounded-full flex items-center justify-center`}>01</span>
+                <span>注册账号</span>
+              </span>
             <Image alt={`步骤配图`} src={step1} aria-hidden/>
           </p>
           <div className={`h-16 w-56 px-4 flex self-center`}>
@@ -198,10 +206,10 @@ export default function IdentifyPage(props: IdentifyPageProps) {
             )}></div>
           </div>
           <p className={`flex gap-2 items-center justify-between w-56 self-center`}>
-            <div className={`flex gap-2`}>
-              <span className={`bg-primary/25 text-primary w-8 h-8 rounded-full flex items-center justify-center`}>02</span>
-              <span>实名认证</span>
-            </div>
+              <span className={`flex gap-2`}>
+                <span className={`bg-primary/25 text-primary w-8 h-8 rounded-full flex items-center justify-center`}>02</span>
+                <span>实名认证</span>
+              </span>
             <Image alt={`步骤配图`} src={step2} aria-hidden/>
           </p>
           <div className={`h-16 w-56 px-4 flex self-center`}>
@@ -211,14 +219,14 @@ export default function IdentifyPage(props: IdentifyPageProps) {
             )}></div>
           </div>
           <p className={`flex gap-2 items-center justify-between w-56 self-center`}>
-            <div className={`flex gap-2`}>
-              <span className={`bg-primary/25 text-primary w-8 h-8 rounded-full flex items-center justify-center`}>03</span>
-              <span>充值、支付</span>
-            </div>
+              <span className={`flex gap-2`}>
+                <span className={`bg-primary/25 text-primary w-8 h-8 rounded-full flex items-center justify-center`}>03</span>
+                <span>充值、支付</span>
+              </span>
             <Image alt={`步骤配图`} src={step3} aria-hidden/>
           </p>
-        </div>
-      </section>
+        </CardContent>
+      </Card>
     </Page>
   )
 }

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

@@ -9,7 +9,7 @@ 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 {useProfileStore} from '@/components/providers/StoreProvider'
-import RechargeModal from '@/components/composites/purchase/_client/recharge'
+import RechargeModal from '@/components/composites/recharge'
 import Pay from '@/components/composites/purchase/_client/pay'
 import {buttonVariants} from '@/components/ui/button'
 import Link from 'next/link'

src/components/composites/recharge/index.tsx

@@ -17,11 +17,11 @@ import {zodResolver} from '@hookform/resolvers/zod'
 import {toast} from 'sonner'
 import wechat from '@/components/composites/purchase/_assets/wechat.svg'
 import alipay from '@/components/composites/purchase/_assets/alipay.svg'
-import {useContext, useRef, useState} from 'react'
+import {useRef, useState} from 'react'
 import {Loader} from 'lucide-react'
 import {RechargeByAlipay, RechargeByAlipayConfirm, RechargeByWechat, RechargeByWechatConfirm} from '@/actions/user'
 import * as qrcode from 'qrcode'
-import {StoreContext, useProfileStore} from '@/components/providers/StoreProvider'
+import {useProfileStore} from '@/components/providers/StoreProvider'
 
 const schema = zod.object({
   method: zod.enum(['alipay', 'wechat']),

src/components/ui/button.tsx

@@ -3,33 +3,33 @@ import {merge} from '@/lib/utils'
 import {cva} from 'class-variance-authority'
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
   {
     variants: {
       variant: {
         default:
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+          'bg-primary text-primary-foreground shadow hover:bg-primary/90',
         destructive:
-          "bg-fail text-fail-foreground shadow-sm hover:bg-destructive/90",
+          'bg-fail text-fail-foreground shadow-sm hover:bg-destructive/90',
         outline:
-          "border border-input shadow-sm hover:bg-secondary hover:text-secondary-foreground bg-card",
+          'border border-input shadow-sm hover:bg-secondary hover:text-secondary-foreground bg-card',
         secondary:
-          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-secondary hover:text-secondary-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
+          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        ghost: 'hover:bg-secondary hover:text-secondary-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
+        default: 'h-9 px-4 py-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'h-9 w-9',
       },
     },
     defaultVariants: {
-      variant: "default",
-      size: "default",
+      variant: 'default',
+      size: 'default',
     },
-  }
+  },
 )
 
 type ButtonProps = React.ComponentProps<'button'> & {
@@ -40,6 +40,7 @@ function Button(rawProps: ButtonProps) {
   const {className, theme, ...props} = rawProps
   return (
     <button
+      {...props}
       className={merge(
         `transition-all duration-200 ease-in-out`,
         `h-10 px-4 rounded-md cursor-pointer`,
@@ -55,11 +56,10 @@ function Button(rawProps: ButtonProps) {
           accent: 'bg-accent text-accent-foreground hover:bg-accent/90',
           error: 'bg-fail text-white hover:bg-fail/90',
           outline: 'border bg-background hover:bg-secondary hover:text-secondary-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
-          ghost: "text-foreground hover:bg-muted",
+          ghost: 'text-foreground hover:bg-muted',
         }[theme ?? 'default'],
         className,
       )}
-      {...props}
     />
   )
 }

src/components/ui/card.tsx

@@ -1,81 +1,85 @@
-import * as React from "react"
+import * as React from 'react'
 
-import { merge } from "@/lib/utils"
+import {merge} from '@/lib/utils'
 
-function Card({ className, ...props }: React.ComponentProps<"div">) {
+function Card({className, ...props}: React.ComponentProps<'div'>) {
   return (
-    <div
+    <article
       data-slot="card"
       className={merge(
-        "bg-card text-card-foreground flex flex-col gap-4 rounded-lg py-4",
-        className
+        'bg-card text-card-foreground flex flex-col gap-4 rounded-lg py-4',
+        className,
       )}
       {...props}
     />
   )
 }
 
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+function CardHeader({className, ...props}: React.ComponentProps<'div'>) {
   return (
-    <div
+    <header
       data-slot="card-header"
       className={merge(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-4 has-[data-slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
-        className
+        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1 px-4 has-[data-slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+        className,
       )}
       {...props}
     />
   )
 }
 
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+function CardTitle({className, ...props}: React.ComponentProps<'div'>) {
   return (
-    <div
+    <h3
       data-slot="card-title"
-      className={merge("leading-none font-semibold", className)}
+      className={merge(
+        'leading-none font-semibold',
+        `flex items-center gap-2`,
+        className,
+      )}
       {...props}
     />
   )
 }
 
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+function CardDescription({className, ...props}: React.ComponentProps<'div'>) {
   return (
-    <div
+    <p
       data-slot="card-description"
-      className={merge("text-muted-foreground text-sm", className)}
+      className={merge('text-muted-foreground text-sm', className)}
       {...props}
     />
   )
 }
 
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+function CardAction({className, ...props}: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="card-action"
       className={merge(
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className
+        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+        className,
       )}
       {...props}
     />
   )
 }
 
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+function CardContent({className, ...props}: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="card-content"
-      className={merge("px-4", className)}
+      className={merge('px-4', className)}
       {...props}
     />
   )
 }
 
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+function CardFooter({className, ...props}: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="card-footer"
-      className={merge("flex items-center px-6 [.border-t]:pt-6", className)}
+      className={merge('flex items-center px-6 [.border-t]:pt-6', className)}
       {...props}
     />
   )

src/components/ui/dialog.tsx

@@ -124,12 +124,10 @@ function DialogDescription({
 export {
   Dialog,
   DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
   DialogTrigger,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogContent,
+  DialogFooter,
 }

src/components/ui/form.tsx

@@ -48,16 +48,21 @@ function Form<T extends FieldValues>(rawProps: FormProps<T>) {
 type FormFieldProps<
   V extends FieldValues = FieldValues,
   N extends FieldPath<V> = FieldPath<V>,
-> = {
+> = Omit<ControllerProps<V, N>, 'control' | 'render'> & Omit<ComponentProps<'div'>, 'children'> & {
   label?: ReactNode
-  className?: string
+  description?: ReactNode
   children: (props: {
     id: string
     field: ControllerRenderProps<V, N>
     fieldState: ControllerFieldState
     formState: UseFormStateReturn<V>
   }) => ReactNode
-} & Omit<ControllerProps<V, N>, 'control' | 'render'>
+  classNames?: {
+    label?: string
+    description?: string
+    message?: string
+  }
+}
 
 function FormField<
   V extends FieldValues = FieldValues,
@@ -68,12 +73,15 @@ function FormField<
   return (
     <Controller<V, N> name={props.name} control={form.control} render={({field, fieldState, formState}) => (
       <div data-slot="form-field" className={merge('grid gap-2', props.className)}>
+
+        {/* label */}
         {!!props.label &&
-          <FormLabel error={fieldState.error}>
+          <FormLabel id={`${id}-label`} error={fieldState.error} className={props.classNames?.label}>
             {props.label}
           </FormLabel>
         }
 
+        {/* control */}
         <Slot
           data-slot="form-control"
           aria-invalid={!!fieldState.error}
@@ -85,8 +93,19 @@ function FormField<
           {props.children({id, field, fieldState, formState})}
         </Slot>
 
+        {/* description */}
+        {!!props.description && (
+          <FormDescription id={`${id}-description`} error={fieldState.error} className={merge(
+            `text-weak`,
+            props.classNames?.description,
+          )}>
+            {props.description}
+          </FormDescription>
+        )}
+
+        {/* message */}
         {!fieldState.error ? null : (
-          <FormMessage error={fieldState.error}/>
+          <FormMessage id={`${id}-message`} error={fieldState.error} className={props.classNames?.message}/>
         )}
       </div>
     )}/>

src/components/ui/input.tsx

@@ -10,7 +10,7 @@ function Input({className, type, ...props}: React.ComponentProps<'input'>) {
       className={merge(
         `transition-[color] duration-200 ease-in-out`,
         `h-10 min-w-0 w-full`,
-        'placeholder:text-muted-foreground',
+        'placeholder:text-weak',
         'selection:bg-primary selection:text-primary-foreground',
         'flex rounded-md border bg-card px-3 py-1 text-base',
         'outline-none focus-visible:ring-4 ring-ring/50',

src/middleware.ts

@@ -30,6 +30,8 @@ export async function middleware(request: NextRequest) {
       }
     }
     catch (error) {
+      console.log(error)
+      console.log("redirect!!!!!!!!!")
       return NextResponse.redirect(`${request.nextUrl.origin}/login?redirect=${request.nextUrl.pathname}`)
     }
   }