feat: 计费功能

src/app/MainArea/Antechamber/index.tsx

@@ -5,45 +5,45 @@ import AntechamberScore from "@/components/AntechamberScore";
 import { useContext, useEffect, useState } from "react";
 import { RealtimeClientContext } from "@/components/Provider/RealtimeClientProvider";
 import { useSearchParams } from "react-router-dom";
-import {  fetchUserToken } from "@/apis/user";
+import { fetchUserToken } from "@/apis/user";
 import { useToast } from "@/hooks/use-toast";
 import { useAbortController } from "@/hooks/useAbortController";
 import AntechamberFile from "@/components/AntechamberFile";
 import AntechamberReport from "@/components/AntechamberReport";
 import AntechamberWishList from "@/components/AntechamberWishList";
 import { ReportContext } from "@/components/Provider/ReportResolveProvider";
+import ReceiveTime from "/icons/receive-time.png";
+import { ReceiveDialog } from "@/components/ReceiveDialog";
 
 export default function Antechamber() {
-
+  const { handleConnect } = useContext(RealtimeClientContext);
-  const { handleConnect} = useContext(RealtimeClientContext);
   const { hasHandledReport } = useContext(ReportContext);
-  
 
   const [searchParams] = useSearchParams();
-  const [disable,setDisable] = useState(true);
+  const [disable, setDisable] = useState(true);
-  const [isLoading,setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const token = searchParams.get("token") || "";
 
-  const token = searchParams.get("token") || '';
-  
   const { toast } = useToast();
   const { getSignal } = useAbortController();
 
   const getUserToken = async () => {
     try {
-      const { result, message } = await fetchUserToken({ 
+      const { result, message } = await fetchUserToken({
-        options: { 
+        options: {
           signal: getSignal(),
           headers: {
-            "Authorization": `Bearer ${encodeURIComponent(token)}`
+            Authorization: `Bearer ${encodeURIComponent(token)}`,
-          } 
+          },
-        } 
+        },
       });
       if (message) {
         console.log(message);
       } else {
-        const _result = result as {isExpired:boolean;msg:string};      
+        const _result = result as { isExpired: boolean; msg: string };
         setDisable(!_result.isExpired);
-        if(!_result.isExpired &&_result.msg){          
+        if (!_result.isExpired && _result.msg) {
           toast({
             title: _result.msg,
             description: "请重新登录",
@@ -51,42 +51,60 @@ export default function Antechamber() {
         }
       }
     } catch (error: any) {
-      if (error.name !== 'AbortError') {
+      if (error.name !== "AbortError") {
-        console.error('获取用户令牌失败:', error);
+        console.error("获取用户令牌失败:", error);
       }
     }
   };
 
-  
   useEffect(() => {
     getUserToken();
   }, [token]);
 
-
+  const toRoom = (params: { initMessage?: string; fileUrl?: string }) => {
-  const toRoom = (params:{initMessage?:string,fileUrl?:string}) => {
+    if (!hasHandledReport && (disable || isLoading)) {
-    if(!hasHandledReport && (disable || isLoading)){
       return;
     }
-    setIsLoading(true)
+    setIsLoading(true);
     handleConnect(params).then(() => {
       setIsLoading(false);
     });
   };
-  
+
+  const [isReceiveDialogOpen, setIsReceiveDialogOpen] = useState(true);
+
   return (
     <div className="flex flex-col items-center h-full overflow-y-auto relative">
       <AntechamberHeader />
       <AntechamberScore />
-      <AntechamberWishList handleLoading={setIsLoading}/>
+      <AntechamberWishList handleLoading={setIsLoading} />
       <AntechamberFile handleLoading={setIsLoading} />
       <AntechamberReport handleLoading={setIsLoading} />
       <InvokeButton disable={disable} onClick={() => toRoom({})} />
-      {
+      <img
-        isLoading ? <div className="absolute w-full h-full bg-red"><div className="w-[108px] h-[108px] absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] bg-black/60 rounded-[20px] flex flex-col items-center justify-center">
+        src={ReceiveTime}
-        <img src="/icons/loading.gif" alt="loading" className="w-[68px] h-[68px]" />
+        alt="receive-item"
-        <span className="text-[14px] text-[#fff]">加载中</span>
+        className="w-[100px] h-[100px] absolute right-[12px] bottom-[80px]"
-      </div></div> : <></>
+        onClick={() => setIsReceiveDialogOpen(true)}
-      }
+      />
+      {isLoading ? (
+        <div className="absolute w-full h-full bg-red">
+          <div className="w-[108px] h-[108px] absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] bg-black/60 rounded-[20px] flex flex-col items-center justify-center">
+            <img
+              src="/icons/loading.gif"
+              alt="loading"
+              className="w-[68px] h-[68px]"
+            />
+            <span className="text-[14px] text-[#fff]">加载中</span>
+          </div>
+        </div>
+      ) : (
+        <></>
+      )}
+      <ReceiveDialog
+        isOpen={isReceiveDialogOpen}
+        onOpenChange={setIsReceiveDialogOpen}
+      />
     </div>
   );
 }

src/app/MainArea/index.tsx

@@ -8,6 +8,7 @@ import {
 import { ReportProvider } from "@/components/Provider/ReportResolveProvider";
 // import { RealtimeUtils } from "@coze/realtime-api";
 import { useLocation } from "react-router-dom";
+import { CountdownProvider } from "@/components/Provider/CountdownProvider";
 
 function MainContent() {
   const { isConnected, handleDisconnect } = useContext(RealtimeClientContext);
@@ -28,9 +29,14 @@ function MainContent() {
   }, [location.pathname]);
 
   return (
-    <ReportProvider>
+    <CountdownProvider>
-      {isConnected ? <Room /> : <Antechamber />}
+      <ReportProvider>
-    </ReportProvider>
+        <>
+          {/* {isConnected ? <Room /> : <Antechamber />} */}
+          {isConnected ? <Antechamber /> : <Room/>}
+        </>
+      </ReportProvider>
+    </CountdownProvider>
   );
 }
 

src/components/AntechamberHeader/index.tsx

@@ -8,7 +8,7 @@ import styles from "./index.module.css";
 import { fetchQuestions } from "@/apis/questions";
 import { useAbortController } from "@/hooks/useAbortController";
 import { RealtimeClientContext } from "../Provider/RealtimeClientProvider";
-
+import Countdown from "../Countdown";
 
 export default function HeaderGroup() {
   const [isRotating, setIsRotating] = useState(false);
@@ -69,6 +69,7 @@ export default function HeaderGroup() {
 
   return (
     <div className={styles.headerWrapper}>
+      <Countdown />
       <div className={styles.wrapper}>
         <img className={styles.img} src={HelloGIF} alt="hello" />
         <div className={styles.text}>Hey,我是您的六纬AI小助手</div>

src/components/Countdown/index.tsx

@@ -0,0 +1,45 @@
+import {  useEffect } from 'react';
+import { useCountdown } from '../Provider/CountdownProvider';
+
+/**
+ * 将秒数转换为"分钟秒"格式
+ * @param totalSeconds 总秒数
+ * @returns 格式化后的字符串，如"10分00秒"
+ */
+const formatTime = (totalSeconds: number): string => {
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  
+  // 确保秒数显示为两位数
+  const formattedSeconds = seconds < 10 ? `0${seconds}` : `${seconds}`;
+  
+  return `${minutes}分${formattedSeconds}秒`;
+};
+
+interface CountdownProps {
+
+}
+
+export default function Countdown({ }: CountdownProps) {
+  const { countdown, setCountdown } = useCountdown();
+  
+  useEffect(() => {
+    // 只有当秒数大于0时才启动倒计时
+    if (countdown <= 0) return;
+    
+    const timer = setInterval(() => {
+      setCountdown(countdown - 1)
+    }, 1000);
+    
+    
+    // 清理定时器
+    return () => clearInterval(timer);
+  }, [countdown]);
+  
+  return (
+    <div className="w-max h-[23px] rounded-full bg-[#EAF0FE] flex items-center ml-auto px-[10px] py-[3px] mb-[5px]">
+      <div className="w-[6px] h-[6px] rounded-full bg-[#1580FF] mr-[5px]"></div>
+      <div className="text-[12px] text-[#000]">剩余可用：{formatTime(countdown)}</div>
+    </div>
+  );
+}

src/components/Provider/CountdownProvider.tsx

@@ -0,0 +1,25 @@
+import { createContext, useContext, useState } from "react"
+
+export const CountdownContext = createContext<{
+    countdown: number;
+    setCountdown: (countdown: number) => void;
+}>({
+    countdown: 0,
+    setCountdown: () => {}
+})
+
+export const useCountdown = () => {
+    const ctx = useContext(CountdownContext);
+    if (!ctx) throw new Error("useCountdown 必须在 CountdownProvider 内部使用");
+    return ctx;
+}
+
+export const CountdownProvider = ({ children }: { children: React.ReactNode }) => {
+    const [countdown, setCountdown] = useState(0);
+
+    return (
+        <CountdownContext.Provider value={{ countdown, setCountdown }}>
+            {children}
+        </CountdownContext.Provider>
+    )
+}

src/components/ReceiveDialog/index.css

@@ -0,0 +1,3 @@
+.custom-bg {
+    background: linear-gradient(0deg,  #FFFFFF 30%,transparent 100%);
+}

src/components/ReceiveDialog/index.tsx

@@ -0,0 +1,56 @@
+import { 
+  Dialog, 
+  DialogContent, 
+  DialogTitle, 
+  DialogDescription,
+  DialogClose
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { X } from "lucide-react";
+import "./index.css";
+
+export const ReceiveDialog = ({ 
+  isOpen = false, 
+  onOpenChange,
+  onConfirm 
+}: { 
+  isOpen?: boolean; 
+  onOpenChange?: (open: boolean) => void;
+  onConfirm?: () => void;
+}) => {
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md border-none bg-transparent p-0 shadow-none">
+        <DialogTitle className="sr-only">接收新消息</DialogTitle>
+        <DialogDescription className="sr-only">您有一条新的消息，是否立即查看？</DialogDescription>
+        <DialogClose className="absolute right-[38px] top-2 z-10 rounded-full w-[28px] h-[28px] bg-[#acacad] flex items-center justify-center bg-[#FFFFFF33]">
+        <X  className="w-[12px] h-[12px] text-white"/>
+          <span className="sr-only" onClick={() => onOpenChange?.(false)}>关闭</span>
+        </DialogClose>
+        <div className="relative flex flex-col items-center">
+          <img 
+            src="/icons/receive.png" 
+            alt="接收" 
+            className="rounded-lg w-full h-[286px] px-[48px]"
+          />
+          <div className="absolute top-1/2 left-0 right-0 flex flex-col items-center px-[20px] py-[17px] text-center mx-[48px] rounded-[40px] custom-bg">
+            <h3 className="font-[600] text-[18px] text-black mb-[7px]">AI通话时长送你啦～</h3>
+            <p className="text-sm text-white/90 mb-6 text-[#666]">志愿怎么选？分数能上哪？六维AI填报师来帮你解答~</p>
+            <div className="flex space-x-4 w-full justify-center">
+
+              <Button 
+                className="bg-[#1580FF] text-white w-full rounded-[50px] text-[16px] py-[11px]"
+                onClick={() => {
+                  onConfirm?.();
+                  onOpenChange?.(false);
+                }}
+              >
+                领取时长
+              </Button>
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};

src/components/RoomConversation/index.tsx

@@ -96,6 +96,10 @@ export default function RoomConversation() {
         <div ref={messagesEndRef} />
       </div>
       <div className="text-[12px] text-[#999] font-[400] text-center mt-auto mb-[7px]">AI也会犯错，请考虑核实重要信息。</div>
+      <div className="mx-[8px] rounded-full bg-[#ffeede] py-[7px] pl-[18px] pr-[3px] flex items-center justify-between">
+        <span className="text-[#FA8E23] text-[12px]">您的剩余时间不足3分钟，请续费畅聊生涯~</span>
+        <button className="rounded-full bg-[#FA8E23] py-[6px] px-[13px] text-[13px] text-white font-[500]">立即续费</button>
+      </div>
     </div>
   );
 }

src/components/ui/dialog.tsx

@@ -0,0 +1,119 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { cn } from "@/lib/utils"
+import { Cross2Icon } from "@radix-ui/react-icons"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <Cross2Icon className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}