lanhu/web
2
0
Fork 0
Code Issues Actions Packages Releases 13 Activity

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

Browse Source
This commit is contained in:
luorijun
2025-04-29 18:47:36 +08:00
parent ec7eb7093f
commit 09d6255bd5
13 changed files with 531 additions and 666 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/composites/purchase/_client/right.tsx
View File

@@ -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'

4
src/components/composites/purchase/_client/recharge.tsx → src/components/composites/recharge/index.tsx
View File

@@ -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']),

32
src/components/ui/button.tsx
View File

@@ -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}
/>
)
}

50
src/components/ui/card.tsx
View File

@@ -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}
/>
)

12
src/components/ui/dialog.tsx
View File

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

29
src/components/ui/form.tsx
View File

@@ -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>
)}/>

2
src/components/ui/input.tsx
View File

@@ -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',