56 lines
1.4 KiB
TypeScript
Executable File
56 lines
1.4 KiB
TypeScript
Executable File
import { api } from "@nice/client"
|
|
import { apiClient } from "@web/src/utils"
|
|
import { Button, Tag } from "antd"
|
|
import { useEffect, useMemo, useState } from "react"
|
|
|
|
function HomePage() {
|
|
const { data: staffData } = api.staff.findMany.useQuery({
|
|
take: 10
|
|
})
|
|
// 建议为不同的查询结果使用不同的变量名
|
|
const { data: goodsData } = api.goods.hello.useQuery({
|
|
name: "123"
|
|
})
|
|
|
|
const [counter, setCounter] = useState<number>(0)
|
|
const counterText = useMemo(() => {
|
|
return `当前计数为：${counter}`
|
|
}, [counter])
|
|
|
|
const getData = async () => {
|
|
// 第一种写法
|
|
// const res = await apiClient.get("/goods/hello")
|
|
// console.log(res)
|
|
//第二种写法
|
|
apiClient.get("/goods/hello")
|
|
.then(res => {
|
|
console.log(res)
|
|
})
|
|
}
|
|
useEffect(() => { getData() }, [])
|
|
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>
|
|
|
|
<div className="flex flex-wrap">{
|
|
staffData?.map(i => {
|
|
return <div className="p-2 rounded border shadow" key={i.id}>
|
|
<Tag>{i.username}</Tag>
|
|
</div>
|
|
})
|
|
} </div>
|
|
<Tag className="text-2xl">{goodsData}</Tag>
|
|
</div>
|
|
}
|
|
// export { HomePage }
|
|
export default HomePage
|