添加获取价格响应异常显示loading & 时间显示到秒

src/components/composites/extract/index.tsx

@@ -427,7 +427,7 @@ function SelectResource() {
                           <div className="flex justify-between gap-2 text-xs text-weak">
                             <span>
                               到期时间：
-                              {format(resource.short.expire_at, 'yyyy-MM-dd HH:mm')}
+                              {format(resource.short.expire_at, 'yyyy-MM-dd HH:mm:ss')}
                             </span>
                             <span>{intlFormatDistance(resource.short.expire_at, new Date())}</span>
                           </div>
@@ -469,7 +469,7 @@ function SelectResource() {
                           <div className="flex justify-between gap-2 text-xs text-weak">
                             <span>
                               到期时间：
-                              {format(resource.long.expire_at, 'yyyy-MM-dd HH:mm')}
+                              {format(resource.long.expire_at, 'yyyy-MM-dd HH:mm:ss')}
                             </span>
                             <span>{intlFormatDistance(resource.long.expire_at, new Date())}</span>
                           </div>

src/components/composites/purchase/shared/side-panel.tsx

@@ -15,6 +15,7 @@ import {formatPurchaseLiveLabel} from './sku'
 import {User} from '@/lib/models'
 import {PurchaseFormValues} from './form-values'
 import {IdCard} from 'lucide-react'
+import {Loader2} from 'lucide-react'
 
 const emptyPrice: ExtraResp<typeof getPrice> = {
   price: '0.00',
@@ -43,7 +44,7 @@ export function PurchaseSidePanel(props: PurchaseSidePanelProps) {
     expire,
     dailyLimit,
   }
-  const priceData = usePurchasePrice(profile, selection)
+  const {priceData, isLoading, isError} = usePurchasePrice(profile, selection)
   const {price, actual: discountedPrice = '0.00'} = priceData
   const totalDiscount = getTotalDiscount(price, discountedPrice)
   const hasDiscount = Number(totalDiscount) > 0
@@ -70,9 +71,13 @@ export function PurchaseSidePanel(props: PurchaseSidePanelProps) {
             </li>
             <li className="flex justify-between items-center">
               <span className="text-sm text-gray-500">原价</span>
-              <span className="text-sm">￥{price}</span>
+              { isError ? (
+                <Loader2 className="h-4 w-4 animate-spin text-gray-400"/>
+              ) : (
+                <span className="text-sm">￥{price}</span>
+              )}
             </li>
-            {hasDiscount && (
+            {hasDiscount && !isError && (
               <li className="flex justify-between items-center">
                 <span className="text-sm text-gray-500">总折扣</span>
                 <span className="text-sm">-￥{totalDiscount}</span>
@@ -91,9 +96,13 @@ export function PurchaseSidePanel(props: PurchaseSidePanelProps) {
             </li>
             <li className="flex justify-between items-center">
               <span className="text-sm text-gray-500">原价</span>
-              <span className="text-sm">￥{price}</span>
+              { isError ? (
+                <Loader2 className="h-4 w-4 animate-spin text-gray-400"/>
+              ) : (
+                <span className="text-sm">￥{price}</span>
+              )}
             </li>
-            {hasDiscount && (
+            {hasDiscount && !isError && (
               <li className="flex justify-between items-center">
                 <span className="text-sm text-gray-500">总折扣</span>
                 <span className="text-sm">-￥{totalDiscount}</span>
@@ -105,7 +114,11 @@ export function PurchaseSidePanel(props: PurchaseSidePanelProps) {
       <div className="border-b border-gray-200"></div>
       <p className="flex justify-between items-center">
         <span>实付价格</span>
-        <span className="text-xl text-orange-500">￥{discountedPrice}</span>
+        { isError ? (
+          <Loader2 className="h-5 w-5 animate-spin text-orange-500"/>
+        ) : (
+          <span className="text-xl text-orange-500">￥{discountedPrice}</span>
+        )}
       </p>
       {profile ? (
         profile.id_type !== 0 ? (
@@ -143,6 +156,8 @@ export function PurchaseSidePanel(props: PurchaseSidePanelProps) {
 
 function usePurchasePrice(profile: User | null, selection: PurchaseSelection) {
   const [priceData, setPriceData] = useState<ExtraResp<typeof getPrice>>(emptyPrice)
+  const [isLoading, setIsLoading] = useState(true)
+  const [isError, setIsError] = useState(false)
   const requestIdRef = useRef(0)
   const {kind, mode, live, quota, expire, dailyLimit} = selection
 
@@ -150,6 +165,9 @@ function usePurchasePrice(profile: User | null, selection: PurchaseSelection) {
     const requestId = ++requestIdRef.current
 
     const loadPrice = async () => {
+      setIsLoading(true)
+      setIsError(false)
+
       try {
         const resource = buildPurchaseResource({
           kind,
@@ -176,6 +194,7 @@ function usePurchasePrice(profile: User | null, selection: PurchaseSelection) {
           actual: response.data.actual ?? response.data.price ?? '0.00',
           discounted: response.data.discounted ?? '0.00',
         })
+        setIsError(false)
       }
       catch (error) {
         if (requestId !== requestIdRef.current) {
@@ -184,13 +203,19 @@ function usePurchasePrice(profile: User | null, selection: PurchaseSelection) {
 
         console.error('获取价格失败:', error)
         setPriceData(emptyPrice)
+        setIsError(true)
+      }
+      finally {
+        if (requestId === requestIdRef.current) {
+          setIsLoading(false)
+        }
       }
     }
 
     loadPrice()
   }, [dailyLimit, expire, kind, live, mode, profile, quota])
 
-  return priceData
+  return {priceData, isLoading, isError}
 }
 
 function getTotalDiscount(price: string, discountedPrice: string) {