wip feat(cashier): cashier modal

app/(dashboard)/components/side-bar.tsx

@@ -10,6 +10,7 @@ import { IconType } from "react-icons";
 import { FaImage, FaFolder } from "react-icons/fa";
 import { HiOutlineArrowsUpDown } from "react-icons/hi2";
 import { UploadProgress } from "./upload-progress";
+import UserGroup from "./user-group";
 
 export interface SideBarItem {
     href: string;
@@ -72,6 +73,7 @@ export function SideBar(){
                     </Popover> : null
                 }
                 <ThemeSwitch />
+                <UserGroup />
             </div>
         </aside>
     )

app/(dashboard)/components/user-group.tsx

@@ -0,0 +1,11 @@
+import { showPayModal } from '@/app/store';
+import {Button} from '@nextui-org/button';
+import { useAtom } from 'jotai';
+export default function UserGroup(){
+  const [isShow, setShow] = useAtom(showPayModal);
+  return (
+    <Button onPress={()=>setShow(true)}>
+      升级用户组
+    </Button>
+  )
+}

app/(dashboard)/dashboard/page.tsx

@@ -6,11 +6,12 @@ import { useEffect, useMemo, useState } from "react"
 import { PictureList } from "./components/picture-list";
 import { Folder } from "./components/folder";
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
-import { currentFolderId, folderId } from "@/app/store";
+import { currentFolderId, folderId, profile } from "@/app/store";
 import { Fold as IFold } from "@/providers/folder";
 import { AxiosResponse } from "axios";
 import { Upload } from "@/components/upload";
 import { Message } from "@/components/message";
+import { UserAPI } from "@/interface/userAPI";
 
 const foldCache = new Map<string, IFold>();
 const cache = new Map<string, string[]>();
@@ -20,8 +21,8 @@ export default function Files(){
     const setFoldIdStack = useSetAtom(folderId);
     const [folderInfo, setFolderInfo] = useState<IFold[]>([])
     const [children, setChildren] = useState<string[]>([])
+    const [,setProfile] = useAtom(profile);
     useEffect(()=>{
-        Message.success('test')
         if (cache.has(id)){
             setChildren(cache.get(id)!);
             return;
@@ -38,6 +39,10 @@ export default function Files(){
             })
         }
     }, [id])
+    useEffect(()=>{
+        UserAPI.getExtendedInformation()
+        .then((val) => val ? setProfile(val) : null)
+    }, [])
     useEffect(()=>{
         const folderInfo = [];
         const promiseStack = [];

app/(dashboard)/layout.tsx

@@ -1,4 +1,5 @@
 'use client'
+import "@/styles/globals.css";
 import { 
     BreadcrumbItem,
     Breadcrumbs,
@@ -21,6 +22,9 @@ import IOC from "@/providers";
 import { Message } from "@/components/message";
 import { usePathname } from "next/navigation";
 import { ToastProvider } from "../providers";
+import { PayModal } from "@/components/pay-modal";
+import { Toaster } from "react-hot-toast";
+import { rgba } from "color2k";
 export default function DashboardLayout({
     children,
   }: {
@@ -59,10 +63,22 @@ export default function DashboardLayout({
         })
     }
     return (
-        <section className="
-        flex min-w-0 h-full w-full max-w-full
-        absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
-        xl:max-w-6xl xl:h-[calc(100vh_-_40px)]
+        <ToastProvider>
+            <Toaster toastOptions={{
+                className: '',
+                duration: 5000,
+                style: {
+                    background: rgba(0, 0, 0, 0),
+                    color: rgba(0, 0, 0, 0),
+                    borderStyle: 'none',
+                    boxShadow: 'none'
+                }
+            }
+            } gutter={-15}/>
+            <section className="
+            flex min-w-0 h-full w-full max-w-full
+            absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
+            xl:max-w-6xl xl:h-[calc(100vh_-_40px)]
             ">
                 <section className="w-full flex bg-default-50 overflow-hidden xl:rounded-3xl">
                     <SideBar />
@@ -79,7 +95,7 @@ export default function DashboardLayout({
                                         }
                                     </Breadcrumbs>
                                 </div>
-                                {children}
+                                {/* {children} */}
                             </div>
                         </div>
                     </section>
@@ -121,6 +137,8 @@ export default function DashboardLayout({
                         </ModalFooter>
                     </ModalContent>
                 </Modal>
+                <PayModal />
             </section>
+        </ToastProvider>
     )
 }

app/(root)/authenticate/page.tsx

@@ -12,6 +12,8 @@ import { useRouter } from 'next/navigation';
 import { SetLoggedInState } from '@/interface/hooks';
 import { UserAPI } from '@/interface/userAPI';
 import { useDebounceFn } from 'ahooks';
+import { useAtom } from 'jotai';
+import { profile } from '@/app/store';
 
 export type Colors = "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
 export type PageType = 'wait-check' | 'login' | 'register'
@@ -20,6 +22,7 @@ export default function Page(){
     const [account, setAccount] = useState('')
     const [password, setPassword] = useState('');
     const [confirmPassword, setConfirmPassword] = useState('');
+    const [,setProfile] = useAtom(profile);
     const [accountExists, setAccountExists] = useState(false);
     const [code, setCode] = useState('');
     const [passwordRobustness, setPasswordRobustness] = useState(new Array(6).fill(false));
@@ -127,13 +130,19 @@ export default function Page(){
             UserAPI.login(account, password)
             .then((r) => {
                 const [state, text] = r;
-                if (state) {
+                if (!state) {
+                    Message.error(text);
+                    setLoading(false)
+                }
+                return state
+            })
+            .then((val) => val ? UserAPI.getExtendedInformation() : null)
+            .then((val) => {
+                if (val){
                     Message.success("登录成功");
                     SetLoggedInState(true);
+                    setProfile(val);
                     router.push("/dashboard");
-                } else {
-                    Message.error(text);
-                    setLoading(false)
                 }
             })
         }

app/(root)/page.tsx

@@ -5,13 +5,15 @@ import {Link} from "@nextui-org/link";
 import {button as buttonStyles} from "@nextui-org/theme";
 import {siteConfig} from "@/config/site";
 import {subtitle, title} from "@/components/primitives";
-import {Card, CardFooter, CardHeader, Image} from "@nextui-org/react";
+import {Card, CardFooter, CardHeader, Image, useDisclosure, useModal} from "@nextui-org/react";
 import {Button} from "@nextui-org/button";
 import {HiOutlineNewspaper} from "react-icons/hi";
 import {FaLocationArrow} from "react-icons/fa6";
-import {BsLightbulb} from "react-icons/bs";
+import {BsLightbulb, BsOpencollective} from "react-icons/bs";
 import {IsLoggedIn} from "@/interface/hooks";
 import ClientOnly from "@/components/ClientOnly";
+import { PayModal } from "@/components/pay-modal";
+import React, { useEffect } from "react";
 
 export default function Home() {
     return (

app/store.ts

@@ -15,4 +15,5 @@ export const profile = atom<null | UserModel>(null);
 export const verify = atom<boolean>(true);
 export const uploadStack = atom<UploadProgressItem[]>([]);
 export const currentFolderId = atom<string>('1');
-export const folderId = atom<NavItem[]>([{id: '1', name: 'root'}])
+export const folderId = atom<NavItem[]>([{id: '1', name: 'root'}])
+export const showPayModal = atom<boolean>(false);