commit
534310faf1
30 changed files with 5198 additions and 0 deletions
-
41.gitignore
-
36README.md
-
16eslint.config.mjs
-
5next-env.d.ts
-
7next.config.ts
-
32package.json
-
4470pnpm-lock.yaml
-
8postcss.config.mjs
-
1public/file.svg
-
1public/globe.svg
-
1public/next.svg
-
1public/vercel.svg
-
1public/window.svg
-
BINsrc/app/favicon.ico
-
21src/app/globals.css
-
86src/app/home/assets/components/AssetListCard.tsx
-
37src/app/home/assets/components/ResourceCard.tsx
-
41src/app/home/assets/components/TransferCard.tsx
-
57src/app/home/assets/components/VoteCard.tsx
-
29src/app/home/assets/components/WalletCard.tsx
-
56src/app/home/assets/page.tsx
-
68src/app/home/components/SideMenu/index.tsx
-
30src/app/home/layout.tsx
-
9src/app/home/page.tsx
-
39src/app/home/permissions/page.tsx
-
38src/app/home/resources2/page.tsx
-
12src/app/layout.tsx
-
10src/app/page.tsx
-
18tailwind.config.ts
-
27tsconfig.json
@ -0,0 +1,41 @@ |
|||||
|
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. |
||||
|
|
||||
|
# dependencies |
||||
|
/node_modules |
||||
|
/.pnp |
||||
|
.pnp.* |
||||
|
.yarn/* |
||||
|
!.yarn/patches |
||||
|
!.yarn/plugins |
||||
|
!.yarn/releases |
||||
|
!.yarn/versions |
||||
|
|
||||
|
# testing |
||||
|
/coverage |
||||
|
|
||||
|
# next.js |
||||
|
/.next/ |
||||
|
/out/ |
||||
|
|
||||
|
# production |
||||
|
/build |
||||
|
|
||||
|
# misc |
||||
|
.DS_Store |
||||
|
*.pem |
||||
|
|
||||
|
# debug |
||||
|
npm-debug.log* |
||||
|
yarn-debug.log* |
||||
|
yarn-error.log* |
||||
|
.pnpm-debug.log* |
||||
|
|
||||
|
# env files (can opt-in for committing if needed) |
||||
|
.env* |
||||
|
|
||||
|
# vercel |
||||
|
.vercel |
||||
|
|
||||
|
# typescript |
||||
|
*.tsbuildinfo |
||||
|
next-env.d.ts |
||||
@ -0,0 +1,36 @@ |
|||||
|
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). |
||||
|
|
||||
|
## Getting Started |
||||
|
|
||||
|
First, run the development server: |
||||
|
|
||||
|
```bash |
||||
|
npm run dev |
||||
|
# or |
||||
|
yarn dev |
||||
|
# or |
||||
|
pnpm dev |
||||
|
# or |
||||
|
bun dev |
||||
|
``` |
||||
|
|
||||
|
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. |
||||
|
|
||||
|
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. |
||||
|
|
||||
|
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. |
||||
|
|
||||
|
## Learn More |
||||
|
|
||||
|
To learn more about Next.js, take a look at the following resources: |
||||
|
|
||||
|
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. |
||||
|
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. |
||||
|
|
||||
|
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! |
||||
|
|
||||
|
## Deploy on Vercel |
||||
|
|
||||
|
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. |
||||
|
|
||||
|
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. |
||||
@ -0,0 +1,16 @@ |
|||||
|
import { dirname } from "path"; |
||||
|
import { fileURLToPath } from "url"; |
||||
|
import { FlatCompat } from "@eslint/eslintrc"; |
||||
|
|
||||
|
const __filename = fileURLToPath(import.meta.url); |
||||
|
const __dirname = dirname(__filename); |
||||
|
|
||||
|
const compat = new FlatCompat({ |
||||
|
baseDirectory: __dirname, |
||||
|
}); |
||||
|
|
||||
|
const eslintConfig = [ |
||||
|
...compat.extends("next/core-web-vitals", "next/typescript"), |
||||
|
]; |
||||
|
|
||||
|
export default eslintConfig; |
||||
@ -0,0 +1,5 @@ |
|||||
|
/// <reference types="next" />
|
||||
|
/// <reference types="next/image-types/global" />
|
||||
|
|
||||
|
// NOTE: This file should not be edited
|
||||
|
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
|
||||
@ -0,0 +1,7 @@ |
|||||
|
import type { NextConfig } from "next"; |
||||
|
|
||||
|
const nextConfig: NextConfig = { |
||||
|
/* config options here */ |
||||
|
}; |
||||
|
|
||||
|
export default nextConfig; |
||||
@ -0,0 +1,32 @@ |
|||||
|
{ |
||||
|
"name": "tron-v1", |
||||
|
"version": "0.1.0", |
||||
|
"private": true, |
||||
|
"scripts": { |
||||
|
"dev": "next dev --turbopack", |
||||
|
"build": "next build", |
||||
|
"start": "next start", |
||||
|
"lint": "next lint" |
||||
|
}, |
||||
|
"dependencies": { |
||||
|
"@ant-design/cssinjs": "^1.22.1", |
||||
|
"@ant-design/icons": "^5.5.2", |
||||
|
"@ant-design/nextjs-registry": "^1.0.2", |
||||
|
"antd": "^5.22.6", |
||||
|
"next": "15.1.2", |
||||
|
"react": "^19.0.0", |
||||
|
"react-dom": "^19.0.0" |
||||
|
}, |
||||
|
"devDependencies": { |
||||
|
"@eslint/eslintrc": "^3", |
||||
|
"@types/node": "^20", |
||||
|
"@types/react": "^19", |
||||
|
"@types/react-dom": "^19", |
||||
|
"eslint": "^9", |
||||
|
"eslint-config-next": "15.1.2", |
||||
|
"postcss": "^8", |
||||
|
"prettier": "^3.4.2", |
||||
|
"tailwindcss": "^3.4.1", |
||||
|
"typescript": "^5" |
||||
|
} |
||||
|
} |
||||
4470
pnpm-lock.yaml
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,8 @@ |
|||||
|
/** @type {import('postcss-load-config').Config} */ |
||||
|
const config = { |
||||
|
plugins: { |
||||
|
tailwindcss: {}, |
||||
|
}, |
||||
|
}; |
||||
|
|
||||
|
export default config; |
||||
@ -0,0 +1 @@ |
|||||
|
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg> |
||||
@ -0,0 +1 @@ |
|||||
|
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg> |
||||
@ -0,0 +1 @@ |
|||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg> |
||||
@ -0,0 +1 @@ |
|||||
|
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg> |
||||
@ -0,0 +1 @@ |
|||||
|
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg> |
||||
@ -0,0 +1,21 @@ |
|||||
|
@tailwind base; |
||||
|
@tailwind components; |
||||
|
@tailwind utilities; |
||||
|
|
||||
|
:root { |
||||
|
--background: #ffffff; |
||||
|
--foreground: #171717; |
||||
|
} |
||||
|
|
||||
|
@media (prefers-color-scheme: dark) { |
||||
|
:root { |
||||
|
--background: #0a0a0a; |
||||
|
--foreground: #ededed; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
body { |
||||
|
color: var(--foreground); |
||||
|
background: var(--background); |
||||
|
font-family: Arial, Helvetica, sans-serif; |
||||
|
} |
||||
@ -0,0 +1,86 @@ |
|||||
|
import React from "react"; |
||||
|
import { Button, Card, Dropdown, List, Space, Switch, Table } from "antd"; |
||||
|
import { MoreOutlined, UnorderedListOutlined } from "@ant-design/icons"; |
||||
|
import Link from "antd/lib/typography/Link"; |
||||
|
import Text from "antd/lib/typography/Text"; |
||||
|
import Search from "antd/lib/input/Search"; |
||||
|
|
||||
|
const AssetListCard: React.FC = () => { |
||||
|
const dataSource = [ |
||||
|
{ |
||||
|
key: "1", |
||||
|
name: "胡彦斌", |
||||
|
quantity: 32, |
||||
|
}, |
||||
|
{ |
||||
|
key: "2", |
||||
|
name: "胡彦祖", |
||||
|
quantity: 42, |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
const items = [ |
||||
|
{ |
||||
|
key: "1", |
||||
|
label: <Button>转账</Button>, |
||||
|
}, |
||||
|
{ |
||||
|
key: "2", |
||||
|
label: <Button>收款</Button>, |
||||
|
}, |
||||
|
{ |
||||
|
key: "3", |
||||
|
label: <Button>多签转账</Button>, |
||||
|
}, |
||||
|
{ |
||||
|
key: "4", |
||||
|
label: <Button>兑换</Button>, |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
const columns = [ |
||||
|
{ |
||||
|
title: "通证", |
||||
|
dataIndex: "name", |
||||
|
key: "name", |
||||
|
}, |
||||
|
{ |
||||
|
title: "数量", |
||||
|
dataIndex: "quantity", |
||||
|
key: "quantity", |
||||
|
}, |
||||
|
{ |
||||
|
title: "操作", |
||||
|
render: () => { |
||||
|
return ( |
||||
|
<Dropdown menu={{ items }}> |
||||
|
<MoreOutlined /> |
||||
|
</Dropdown> |
||||
|
); |
||||
|
}, |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
return ( |
||||
|
<Card |
||||
|
title={ |
||||
|
<Space> |
||||
|
<UnorderedListOutlined /> 资产列表 |
||||
|
<Link>增加资产</Link> |
||||
|
<Switch></Switch> |
||||
|
<Text>隐藏 <$0.5 通证</Text> |
||||
|
<Search |
||||
|
placeholder="input search text" |
||||
|
onSearch={() => {}} |
||||
|
style={{ width: 200 }} |
||||
|
/> |
||||
|
</Space> |
||||
|
} |
||||
|
hoverable |
||||
|
> |
||||
|
<Table dataSource={dataSource} columns={columns} /> |
||||
|
</Card> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default AssetListCard; |
||||
@ -0,0 +1,37 @@ |
|||||
|
import React from "react"; |
||||
|
import { Card, List, Space } from "antd"; |
||||
|
import { AppstoreOutlined } from "@ant-design/icons"; |
||||
|
import Link from "antd/lib/typography/Link"; |
||||
|
|
||||
|
const ResourceCard: React.FC = () => { |
||||
|
return ( |
||||
|
<Card |
||||
|
title={ |
||||
|
<div |
||||
|
style={{ |
||||
|
display: "flex", |
||||
|
justifyContent: "space-between", |
||||
|
alignItems: "center", |
||||
|
}} |
||||
|
> |
||||
|
<div> |
||||
|
<AppstoreOutlined /> 我的资源 |
||||
|
</div> |
||||
|
<Link>去管理</Link> |
||||
|
</div> |
||||
|
} |
||||
|
hoverable |
||||
|
> |
||||
|
<List> |
||||
|
<List.Item>总能量: 0</List.Item> |
||||
|
<List.Item>总带宽: 0</List.Item> |
||||
|
</List> |
||||
|
<Space> |
||||
|
<button>获取资源</button> |
||||
|
<button>租用能量</button> |
||||
|
</Space> |
||||
|
</Card> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default ResourceCard; |
||||
@ -0,0 +1,41 @@ |
|||||
|
import React from "react"; |
||||
|
import { Button, Card, List, Row, Switch, Tooltip } from "antd"; |
||||
|
import { |
||||
|
FilterOutlined, |
||||
|
QuestionCircleOutlined, |
||||
|
SwapOutlined, |
||||
|
} from "@ant-design/icons"; |
||||
|
import Text from "antd/lib/typography/Text"; |
||||
|
import Link from "antd/lib/typography/Link"; |
||||
|
|
||||
|
const TransferCard: React.FC = () => { |
||||
|
return ( |
||||
|
<Card |
||||
|
title={ |
||||
|
<> |
||||
|
<SwapOutlined /> 最新转账 |
||||
|
</> |
||||
|
} |
||||
|
hoverable |
||||
|
> |
||||
|
<Row justify="space-between"> |
||||
|
<div> |
||||
|
<Switch></Switch> |
||||
|
<Text>隐藏 <$0.5 通证</Text> |
||||
|
<Tooltip |
||||
|
title={ |
||||
|
"开启选项后，价值小于 $0.5 的转账将被隐藏。如果未进行日期筛选，则仅显示近 180 天的记录；如果进行日期筛选，则仅显示最多 180 天的记录。" |
||||
|
} |
||||
|
> |
||||
|
<QuestionCircleOutlined /> |
||||
|
</Tooltip> |
||||
|
</div> |
||||
|
<Link> |
||||
|
<FilterOutlined /> |
||||
|
</Link> |
||||
|
</Row> |
||||
|
</Card> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default TransferCard; |
||||
@ -0,0 +1,57 @@ |
|||||
|
import React from "react"; |
||||
|
import { Card, Progress, Row, Space, Tooltip, Typography } from "antd"; |
||||
|
import { AppstoreOutlined, QuestionCircleOutlined } from "@ant-design/icons"; |
||||
|
import Link from "antd/lib/typography/Link"; |
||||
|
|
||||
|
const { Title } = Typography; |
||||
|
|
||||
|
const VoteCard: React.FC = () => { |
||||
|
return ( |
||||
|
<Card |
||||
|
title={ |
||||
|
<div |
||||
|
style={{ |
||||
|
display: "flex", |
||||
|
justifyContent: "space-between", |
||||
|
alignItems: "center", |
||||
|
}} |
||||
|
> |
||||
|
<div> |
||||
|
<AppstoreOutlined /> 我的投票 |
||||
|
</div> |
||||
|
<Link>去投票</Link> |
||||
|
</div> |
||||
|
} |
||||
|
hoverable |
||||
|
> |
||||
|
<Row justify="space-between"> |
||||
|
<div> |
||||
|
投票权 |
||||
|
<Tooltip |
||||
|
title={ |
||||
|
"投票权 (TP) 用来给 TRON SR 投票,用户可以通过质押 TRX 来获得投票权。" |
||||
|
} |
||||
|
> |
||||
|
<QuestionCircleOutlined /> |
||||
|
</Tooltip> |
||||
|
</div> |
||||
|
<div>0.0</div> |
||||
|
</Row> |
||||
|
<Progress percent={30} size="small" /> |
||||
|
<Row justify="space-between"> |
||||
|
<div>投票权APY</div> |
||||
|
<div>0.0%</div> |
||||
|
</Row> |
||||
|
<Row justify="space-between"> |
||||
|
<div>投票权奖励</div> |
||||
|
<div>0TRX</div> |
||||
|
</Row> |
||||
|
<Space> |
||||
|
<button>获取投票权</button> |
||||
|
<button>领取奖励</button> |
||||
|
</Space> |
||||
|
</Card> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default VoteCard; |
||||
@ -0,0 +1,29 @@ |
|||||
|
import React from "react"; |
||||
|
import { Card, Space, Typography } from "antd"; |
||||
|
import { WalletOutlined } from "@ant-design/icons"; |
||||
|
|
||||
|
const { Title } = Typography; |
||||
|
|
||||
|
const WalletCard: React.FC = () => { |
||||
|
return ( |
||||
|
<Card |
||||
|
title={ |
||||
|
<> |
||||
|
<WalletOutlined /> 钱包资产 |
||||
|
</> |
||||
|
} |
||||
|
hoverable |
||||
|
> |
||||
|
<div className="text-center"> |
||||
|
<Title level={3}>0.00 TRX</Title> |
||||
|
<p>总资产价值</p> |
||||
|
</div> |
||||
|
<Space> |
||||
|
<button>转账</button> |
||||
|
<button>收款</button> |
||||
|
</Space> |
||||
|
</Card> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default WalletCard; |
||||
@ -0,0 +1,56 @@ |
|||||
|
"use client"; |
||||
|
import React from "react"; |
||||
|
import { Row, Col, Space } from "antd"; |
||||
|
import WalletCard from "./components/WalletCard"; |
||||
|
import ResourceCard from "./components/ResourceCard"; |
||||
|
import VoteCard from "./components/VoteCard"; |
||||
|
import AssetListCard from "./components/AssetListCard"; |
||||
|
import TransferCard from "./components/TransferCard"; |
||||
|
import { Radio, Typography } from "antd"; |
||||
|
import { QrcodeOutlined } from "@ant-design/icons"; |
||||
|
|
||||
|
const { Text, Link } = Typography; |
||||
|
|
||||
|
const AssetsPage: React.FC = () => { |
||||
|
return ( |
||||
|
<> |
||||
|
<div |
||||
|
style={{ |
||||
|
display: "flex", |
||||
|
justifyContent: "space-between", |
||||
|
alignItems: "center", |
||||
|
}} |
||||
|
> |
||||
|
<Space> |
||||
|
<Text editable={{ onChange: (value) => console.log(value) }}> |
||||
|
未设置名称 |
||||
|
</Text> |
||||
|
<Link copyable>ASGHJBJASLKKASKLJSKLAJKL</Link> |
||||
|
<QrcodeOutlined /> |
||||
|
</Space> |
||||
|
<Link>stUSDT 质押 USDT 获取 stUSDT，坐享 4.05% 年化收益</Link> |
||||
|
</div> |
||||
|
<div className="p-6"> |
||||
|
<Row gutter={[16, 16]}> |
||||
|
<Col xs={24} sm={12} lg={8}> |
||||
|
<WalletCard /> |
||||
|
</Col> |
||||
|
<Col xs={24} sm={12} lg={8}> |
||||
|
<ResourceCard /> |
||||
|
</Col> |
||||
|
<Col xs={24} sm={12} lg={8}> |
||||
|
<VoteCard /> |
||||
|
</Col> |
||||
|
<Col xs={24} sm={12} lg={16}> |
||||
|
<AssetListCard /> |
||||
|
</Col> |
||||
|
<Col xs={24} sm={12} lg={8}> |
||||
|
<TransferCard /> |
||||
|
</Col> |
||||
|
</Row> |
||||
|
</div> |
||||
|
</> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default AssetsPage; |
||||
@ -0,0 +1,68 @@ |
|||||
|
"use client"; |
||||
|
|
||||
|
import React from "react"; |
||||
|
import { Menu } from "antd"; |
||||
|
import type { MenuProps } from "antd"; |
||||
|
import { |
||||
|
WalletOutlined, |
||||
|
AppstoreOutlined, |
||||
|
LockOutlined, |
||||
|
} from "@ant-design/icons"; |
||||
|
import { useRouter } from "next/navigation"; |
||||
|
|
||||
|
const items: MenuProps["items"] = [ |
||||
|
{ |
||||
|
key: "assets", |
||||
|
icon: <WalletOutlined />, |
||||
|
label: "资产", |
||||
|
}, |
||||
|
{ |
||||
|
key: "resources", |
||||
|
icon: <AppstoreOutlined />, |
||||
|
label: "资源", |
||||
|
children: [ |
||||
|
{ |
||||
|
key: "pledge2.0", |
||||
|
label: "质押2.0", |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
key: "permissions", |
||||
|
icon: <LockOutlined />, |
||||
|
label: "权限管理", |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
const SideMenu: React.FC = () => { |
||||
|
const router = useRouter(); |
||||
|
|
||||
|
const onClick: MenuProps["onClick"] = ({ key }) => { |
||||
|
switch (key) { |
||||
|
case "assets": |
||||
|
router.push("/home/assets"); |
||||
|
break; |
||||
|
case "pledge2.0": |
||||
|
router.push("/home/resources2"); |
||||
|
break; |
||||
|
case "permissions": |
||||
|
router.push("/home/permissions"); |
||||
|
break; |
||||
|
default: |
||||
|
break; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
return ( |
||||
|
<Menu |
||||
|
onClick={onClick} |
||||
|
style={{ width: "100%" }} |
||||
|
defaultSelectedKeys={["assets"]} |
||||
|
defaultOpenKeys={["resources"]} |
||||
|
mode="inline" |
||||
|
items={items} |
||||
|
/> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default SideMenu; |
||||
@ -0,0 +1,30 @@ |
|||||
|
import React from "react"; |
||||
|
import { AntdRegistry } from "@ant-design/nextjs-registry"; |
||||
|
import { Layout } from "antd"; |
||||
|
import Sider from "antd/es/layout/Sider"; |
||||
|
import SideMenu from "@/app/home/components/SideMenu"; |
||||
|
import { Content } from "antd/lib/layout/layout"; |
||||
|
|
||||
|
const RootLayout = ({ children }: React.PropsWithChildren) => ( |
||||
|
<div |
||||
|
style={{ |
||||
|
display: "flex", |
||||
|
justifyContent: "center", |
||||
|
alignItems: "center", |
||||
|
height: "100vh", |
||||
|
}} |
||||
|
> |
||||
|
<Layout |
||||
|
style={{ minWidth: 100, maxWidth: 1800, minHeight: 100, height: "100vh" }} |
||||
|
> |
||||
|
<Sider width="25%" style={{ backgroundColor: "#fff", padding: 20 }}> |
||||
|
<SideMenu></SideMenu> |
||||
|
</Sider> |
||||
|
<Content style={{ padding: 20 }}> |
||||
|
<AntdRegistry>{children}</AntdRegistry> |
||||
|
</Content> |
||||
|
</Layout> |
||||
|
</div> |
||||
|
); |
||||
|
|
||||
|
export default RootLayout; |
||||
@ -0,0 +1,9 @@ |
|||||
|
import React from "react"; |
||||
|
import { Button } from "antd"; |
||||
|
|
||||
|
const Home = () => ( |
||||
|
<div className="App"> |
||||
|
</div> |
||||
|
); |
||||
|
|
||||
|
export default Home; |
||||
@ -0,0 +1,39 @@ |
|||||
|
'use client'; |
||||
|
|
||||
|
import React from 'react'; |
||||
|
import { Tabs } from 'antd'; |
||||
|
import type { TabsProps } from 'antd'; |
||||
|
|
||||
|
const PermissionsPage: React.FC = () => { |
||||
|
const items: TabsProps['items'] = [ |
||||
|
{ |
||||
|
key: '1', |
||||
|
label: 'My Account', |
||||
|
children: ( |
||||
|
<div> |
||||
|
<h3>My Account Content</h3> |
||||
|
{/* Add your My Account content here */} |
||||
|
</div> |
||||
|
), |
||||
|
}, |
||||
|
{ |
||||
|
key: '2', |
||||
|
label: 'Other Accounts', |
||||
|
children: ( |
||||
|
<div> |
||||
|
<h3>Other Accounts Content</h3> |
||||
|
{/* Add your Other Accounts content here */} |
||||
|
</div> |
||||
|
), |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
return ( |
||||
|
<div className="p-6"> |
||||
|
<h2 className="text-2xl font-bold mb-6">Permissions</h2> |
||||
|
<Tabs defaultActiveKey="1" items={items} /> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default PermissionsPage; |
||||
@ -0,0 +1,38 @@ |
|||||
|
'use client'; |
||||
|
import React from 'react'; |
||||
|
import { Card, Tabs } from 'antd'; |
||||
|
import type { TabsProps } from 'antd'; |
||||
|
|
||||
|
const ResourcesPage = () => { |
||||
|
const items: TabsProps['items'] = [ |
||||
|
{ |
||||
|
key: '1', |
||||
|
label: 'My Resources', |
||||
|
children: ( |
||||
|
<div> |
||||
|
My Resources Content |
||||
|
</div> |
||||
|
), |
||||
|
}, |
||||
|
{ |
||||
|
key: '2', |
||||
|
label: 'My Stake', |
||||
|
children: ( |
||||
|
<div> |
||||
|
My Stake Content |
||||
|
</div> |
||||
|
), |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
return ( |
||||
|
<div className="flex flex-col gap-4"> |
||||
|
<Card title="Stake for Resources"> |
||||
|
Stake for Resources Content |
||||
|
</Card> |
||||
|
<Tabs defaultActiveKey="1" items={items} /> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default ResourcesPage; |
||||
@ -0,0 +1,12 @@ |
|||||
|
import React from "react"; |
||||
|
import { AntdRegistry } from "@ant-design/nextjs-registry"; |
||||
|
|
||||
|
const RootLayout = ({ children }: React.PropsWithChildren) => ( |
||||
|
<html lang="en"> |
||||
|
<body style={{ backgroundColor: "#cccccc", margin: 0 }}> |
||||
|
<AntdRegistry>{children}</AntdRegistry> |
||||
|
</body> |
||||
|
</html> |
||||
|
); |
||||
|
|
||||
|
export default RootLayout; |
||||
@ -0,0 +1,10 @@ |
|||||
|
import React from "react"; |
||||
|
import { Button } from "antd"; |
||||
|
|
||||
|
const Home = () => ( |
||||
|
<div className="App"> |
||||
|
<Button type="primary">Button</Button> |
||||
|
</div> |
||||
|
); |
||||
|
|
||||
|
export default Home; |
||||
@ -0,0 +1,18 @@ |
|||||
|
import type { Config } from "tailwindcss"; |
||||
|
|
||||
|
export default { |
||||
|
content: [ |
||||
|
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}", |
||||
|
"./src/components/**/*.{js,ts,jsx,tsx,mdx}", |
||||
|
"./src/app/**/*.{js,ts,jsx,tsx,mdx}", |
||||
|
], |
||||
|
theme: { |
||||
|
extend: { |
||||
|
colors: { |
||||
|
background: "var(--background)", |
||||
|
foreground: "var(--foreground)", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
plugins: [], |
||||
|
} satisfies Config; |
||||
@ -0,0 +1,27 @@ |
|||||
|
{ |
||||
|
"compilerOptions": { |
||||
|
"target": "ES2017", |
||||
|
"lib": ["dom", "dom.iterable", "esnext"], |
||||
|
"allowJs": true, |
||||
|
"skipLibCheck": true, |
||||
|
"strict": true, |
||||
|
"noEmit": true, |
||||
|
"esModuleInterop": true, |
||||
|
"module": "esnext", |
||||
|
"moduleResolution": "bundler", |
||||
|
"resolveJsonModule": true, |
||||
|
"isolatedModules": true, |
||||
|
"jsx": "preserve", |
||||
|
"incremental": true, |
||||
|
"plugins": [ |
||||
|
{ |
||||
|
"name": "next" |
||||
|
} |
||||
|
], |
||||
|
"paths": { |
||||
|
"@/*": ["./src/*"] |
||||
|
} |
||||
|
}, |
||||
|
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], |
||||
|
"exclude": ["node_modules"] |
||||
|
} |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue