mirror of
https://github.com/APIParkLab/APIPark.git
synced 2026-06-12 18:11:34 +08:00
scarqin
46 lines
2.1 KiB
Plaintext
46 lines
2.1 KiB
Plaintext
Create detailed components with these requirements:
|
||
1. Use 'use client' directive for client-side components
|
||
2. Style with Tailwind CSS utility classes for responsive design
|
||
3. Use React Router for navigation
|
||
4. Use Ant Design for UI components
|
||
5. Use iconify React for icons (from @iconify/react package). Do NOT use other UI libraries unless requested
|
||
6. Use local photos from public folder where appropriate, only valid URLs you know exist
|
||
7. Create root layout.tsx page that wraps necessary navigation items to all pages
|
||
8. MUST implement the navigation elements items in their rightful place i.e. Left sidebar, Top header
|
||
9. Accurately implement necessary grid layouts
|
||
10. Follow proper import practices:
|
||
- Use @/ path aliases
|
||
- Keep component imports organized
|
||
- Update current packages/core/src/pages/Root.tsx with new comprehensive code
|
||
- Don't forget root route (page.tsx) handling
|
||
- You MUST complete the entire prompt before stopping
|
||
11. Table component should use `import PageList from "@common/components/aoplatform/PageList.tsx"`
|
||
12. PageList component MUST use addNewBtnTitle for add button, NOT toolBarRender. Example:
|
||
<PageList
|
||
id="global_team"
|
||
className="pl-btnbase"
|
||
ref={pageListRef}
|
||
columns = {[...columns]}
|
||
request = {()=>getTeamList()}
|
||
showPagination={false}
|
||
addNewBtnTitle={$t('添加团队')}
|
||
addNewBtnAccess = "system.organization.team.add"
|
||
searchPlaceholder={$t("输入名称、ID、负责人查找团队")}
|
||
onAddNewBtnClick={()=>{openModal('add')}}
|
||
onSearchWordChange={(e)=>{setSearchWord(e.target.value)}}
|
||
onRowClick={(row:TeamTableListItem)=>(navigate(`../inside/${row.id}/setting`))}
|
||
/>
|
||
13. use `const { fetchData } = useFetch()` to fetch http data,such as
|
||
```tsx
|
||
fetchData<BasicResponse<{ profile: UserInfoType }>>('account/profile', { method: 'GET' }).then((response) => {
|
||
const { code, data, msg } = response
|
||
if (code === STATUS_CODE.SUCCESS) {
|
||
setUserInfo(data.profile)
|
||
dispatch({ type: 'UPDATE_USERDATA', userData: data.profile })
|
||
} else {
|
||
message.error(msg || $t(RESPONSE_TIPS.error))
|
||
}
|
||
})
|
||
```
|
||
14. can't not import new package!
|