JiaJun/playX
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): 添加动画效果并优化界面样式

Browse Source
This commit is contained in:
JiaJun
2026-04-15 17:47:50 +08:00
parent bc87ef721a
commit dcc9395b25
15 changed files with 284 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/views/record/index.tsx
View File

@@ -6,10 +6,11 @@ import PageLayout from '@/components/layout'
import {ORDER_STATUS} from '@/constant'
import i18n from '@/lib/i18n'
import { cn } from '@/lib'
import {MotionButton, MotionDiv, tapMotionPropsIcon, tapMotionPropsSoft} from '@/lib/motion'
import Modal from '@/components/modal'
import Button from '@/components/button'
import type { OrderCardProps, OrderRecord, PointsCardProps, RecordButtonType, TabButtonProps } from '@/types'
import { Link } from 'react-router-dom'
import {Link} from 'react-router-dom'
import { ArrowLeft, ChevronRight, Coins, PackageSearch } from 'lucide-react'
import {orders, pointsLogs} from '@/api/business.ts'
import {queryKeys} from '@/lib/queryKeys.ts'
@@ -266,7 +267,7 @@ function getOrderStatusClassName(status: string) {
function TabButton({ active, label, icon: Icon, onClick }: TabButtonProps) {
return (
<button
<MotionButton
type="button"
className={cn(
'inline-flex min-w-[140px] cursor-pointer items-center justify-center gap-[8px] rounded-[10px] border px-[14px] py-[9px] text-[13px] transition-colors focus-visible:ring-2 focus-visible:ring-[#FE9F00] focus-visible:ring-offset-2 focus-visible:ring-offset-[#08070E]',
@@ -275,10 +276,11 @@ function TabButton({ active, label, icon: Icon, onClick }: TabButtonProps) {
: 'border-white/35 bg-white/3 text-[#B8B1AA] hover:bg-white/6',
)}
onClick={onClick}
{...tapMotionPropsSoft}
>
<Icon className="h-[15px] w-[15px]" aria-hidden="true" />
{label}
</button>
</MotionButton>
)
}
@@ -297,14 +299,15 @@ function OrderCard({ record, onOpenDetails }: OrderCardProps) {
{t('record.trackingNumber')}&nbsp;&nbsp;{record.trackingNumber}
</div>
) : null}
<button
<MotionButton
type="button"
className="mt-[10px] inline-flex items-center gap-[5px] text-[13px] text-[#FA6A00] focus-visible:ring-2 focus-visible:ring-[#FE9F00] focus-visible:ring-offset-2 focus-visible:ring-offset-[#08070E]"
onClick={() => onOpenDetails(record)}
{...tapMotionPropsSoft}
>
{t('record.checkDetails')}
<ChevronRight className="h-[14px] w-[14px]" aria-hidden="true" />
</button>
</MotionButton>
</div>
<div className="flex shrink-0 flex-col items-end gap-[10px]">
@@ -450,7 +453,9 @@ function RecordPage() {
className="mt-[12px] flex h-[44px] items-center justify-between rounded-[12px] bg-[#08070E]/72 px-[14px] text-[#F56E10] transition-colors hover:bg-[#0D0A14]/80 focus-visible:ring-2 focus-visible:ring-[#FE9F00] focus-visible:ring-offset-2 focus-visible:ring-offset-[#08070E] sm:mt-[16px]"
>
<div className="flex items-center gap-[8px]">
<ArrowLeft className="h-[16px] w-[16px]" aria-hidden="true" />
<MotionDiv {...tapMotionPropsIcon}>
<ArrowLeft className="h-[16px] w-[16px]" aria-hidden="true" />
</MotionDiv>
<span className="text-[14px] font-medium text-white/92">{t('common.back')}</span>
</div>
<div className="text-[15px] font-semibold text-[#F56E10]">{t('record.title')}</div>