student-manage/apps/web/src/app/main/home/page.tsx

import { api } from "@nice/client";
import { apiClient } from "@web/src/utils";

import { Button, Tag } from "antd";

import { useEffect, useMemo, useState } from "react";
function HomePage() {
    // 使用 useQuery 钩子从 API 获取数据

    const { data } = api.staff.findMany.useQuery({
        take: 10
    });

    // 定义 counter 状态和更新函数
    const [counter, setCounter] = useState<number>(0);

    // 使用 useMemo 记忆化 counterText，仅在 counter 变化时重新计算
    const counterText = useMemo(() => {
        return `当前计数为: ${counter}`;
    }, [counter]);

    const getData = async()=>{
        const res = @wait apiClient.get(*/goods/hello*)
        console.log(res)
    }

    // 使用 useEffect 在 data 变化时打印 data
    useEffect(() => {
        apiClient.get(“/goods/hello”)
    }, [data]);

    return (
        <div className="p-2 space-y-2">
            <Tag>{counterText}</Tag>
            <div className="space-x-2">
                <Button type="primary" onClick={() => setCounter(counter + 1)}>
                    加1
                </Button>
                <Button danger onClick={() => setCounter(counter - 1)}>
                    减1
                </Button>
            </div>
            {/* 如果 data 存在，遍历并渲染每个项目的 username */}
            {data?.map((item) => (
                <div className="p-2 rounded border shadow" key={item.username}>
                    <Tag>{item.username}</Tag>
                </div>
            ))}
        </div>
    );
}

export default HomePage;