13 changed files with 1411 additions and 59 deletions
-
7package.json
-
807pnpm-lock.yaml
-
100src/app/home/components/HeaderMenu/index.tsx
-
8src/app/home/components/SideMenu/index.tsx
-
22src/app/home/layout.tsx
-
3src/app/home/multTransactions/page.less
-
130src/app/home/multTransactions/page.tsx
-
167src/app/home/permissions/components/MyAccounts.tsx
-
115src/app/home/permissions/components/OtherAccounts.tsx
-
3src/app/home/permissions/page.less
-
54src/app/home/permissions/page.tsx
-
3src/app/home/resources2/page.less
-
51src/app/home/resources2/page.tsx
807
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,100 @@ |
|||||
|
"use client"; |
||||
|
|
||||
|
import React, { useState } from "react"; |
||||
|
import { Button, Modal, Space, Table, Typography } from "antd"; |
||||
|
const { Link } = Typography; |
||||
|
|
||||
|
const HeaderMenu: React.FC = () => { |
||||
|
const [modalOpen, setModalOpen] = useState(false); |
||||
|
const [dataSource, setDataSource] = useState([ |
||||
|
{ |
||||
|
name: "John Brown", |
||||
|
age: 32, |
||||
|
address: "New York No. 1 Lake Park", |
||||
|
}, |
||||
|
{ |
||||
|
name: "Jim Green", |
||||
|
age: 42, |
||||
|
address: "London No. 1 Lake Park", |
||||
|
}, |
||||
|
{ |
||||
|
name: "Joe Black", |
||||
|
age: 32, |
||||
|
address: "Sydney No. 1 Lake Park", |
||||
|
}, |
||||
|
]); |
||||
|
const onShow = () => { |
||||
|
setModalOpen(true); |
||||
|
}; |
||||
|
const onCancel = () => { |
||||
|
setModalOpen(false); |
||||
|
}; |
||||
|
|
||||
|
const subDelect = (record: any) => {}; |
||||
|
const subEdit = (record: any) => {}; |
||||
|
|
||||
|
const handleAdd = () => { |
||||
|
const newData = { |
||||
|
name: "John Brown", |
||||
|
age: 32, |
||||
|
address: "New York No. 1 Lake Park", |
||||
|
}; |
||||
|
setDataSource([...dataSource, newData]); |
||||
|
}; |
||||
|
|
||||
|
const columns = [ |
||||
|
{ |
||||
|
title: "姓名", |
||||
|
dataIndex: "name", |
||||
|
key: "name", |
||||
|
}, |
||||
|
{ |
||||
|
title: "年龄", |
||||
|
dataIndex: "age", |
||||
|
key: "age", |
||||
|
}, |
||||
|
{ |
||||
|
title: "地址", |
||||
|
dataIndex: "address", |
||||
|
key: "address", |
||||
|
}, |
||||
|
{ |
||||
|
title: "操作", |
||||
|
key: "action", |
||||
|
render: (_: any, record: any) => { |
||||
|
return ( |
||||
|
<Space> |
||||
|
<a onClick={() => subEdit(record)}>编辑</a> |
||||
|
<a onClick={() => subDelect(record)}>删除</a> |
||||
|
</Space> |
||||
|
); |
||||
|
}, |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
return ( |
||||
|
<> |
||||
|
<Link onClick={onShow}>JGAJKGASJKAGSJKAGJKSG</Link> |
||||
|
<Modal |
||||
|
title="弹窗标题" |
||||
|
open={modalOpen} |
||||
|
onCancel={onCancel} |
||||
|
footer={null} |
||||
|
width={1000} |
||||
|
height={1000} |
||||
|
> |
||||
|
<Button onClick={handleAdd} type="primary" style={{ marginBottom: 16 }}> |
||||
|
增加一条 |
||||
|
</Button> |
||||
|
<Table |
||||
|
columns={columns as []} |
||||
|
dataSource={dataSource} |
||||
|
bordered |
||||
|
scroll={{ x: 600, y: 600 }} |
||||
|
/> |
||||
|
</Modal> |
||||
|
</> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default HeaderMenu; |
@ -0,0 +1,3 @@ |
|||||
|
.ant-tabs-nav { |
||||
|
margin: 0 !important; |
||||
|
} |
@ -0,0 +1,130 @@ |
|||||
|
"use client"; |
||||
|
import React from "react"; |
||||
|
import { |
||||
|
Button, |
||||
|
Card, |
||||
|
Col, |
||||
|
Dropdown, |
||||
|
Row, |
||||
|
Space, |
||||
|
Table, |
||||
|
Tabs, |
||||
|
Typography, |
||||
|
} from "antd"; |
||||
|
import type { TabsProps } from "antd"; |
||||
|
import { MoreOutlined } from "@ant-design/icons"; |
||||
|
const { Text, Link } = Typography; |
||||
|
|
||||
|
const MultTransactions = () => { |
||||
|
const data = [ |
||||
|
{ |
||||
|
key: "1", |
||||
|
name: "测试数据1111", |
||||
|
age: 32, |
||||
|
address: "测试数据", |
||||
|
additionalInfo: "This is additional information for John Brown.", |
||||
|
}, |
||||
|
{ |
||||
|
key: "2", |
||||
|
name: "测试数据434", |
||||
|
age: 42, |
||||
|
address: "测试数据789", |
||||
|
additionalInfo: "This is additional information for Jim Green.", |
||||
|
}, |
||||
|
]; |
||||
|
const columns_key1 = [ |
||||
|
{ |
||||
|
title: "发起时间", |
||||
|
dataIndex: "name", |
||||
|
key: "name", |
||||
|
}, |
||||
|
{ |
||||
|
title: "交易类型", |
||||
|
dataIndex: "age", |
||||
|
key: "age", |
||||
|
}, |
||||
|
{ |
||||
|
title: "签名发起者", |
||||
|
dataIndex: "address", |
||||
|
key: "address", |
||||
|
}, |
||||
|
{ |
||||
|
title: "签名进度", |
||||
|
dataIndex: "address", |
||||
|
key: "address", |
||||
|
}, |
||||
|
{ |
||||
|
title: "状态", |
||||
|
dataIndex: "address", |
||||
|
key: "address", |
||||
|
}, |
||||
|
{ |
||||
|
title: "操作", |
||||
|
render: () => { |
||||
|
return ( |
||||
|
<Space> |
||||
|
<Button>查看详情</Button> |
||||
|
<Button>查看交易</Button> |
||||
|
</Space> |
||||
|
); |
||||
|
}, |
||||
|
}, |
||||
|
]; |
||||
|
const items: TabsProps["items"] = [ |
||||
|
{ |
||||
|
key: "1", |
||||
|
label: "全部", |
||||
|
children: ( |
||||
|
<Table |
||||
|
dataSource={data} |
||||
|
expandable={{ |
||||
|
expandedRowRender: (record) => ( |
||||
|
<div> |
||||
|
<div> |
||||
|
<strong>Additional Information</strong> |
||||
|
</div> |
||||
|
<div>Age: {record.additionalInfo}</div> |
||||
|
</div> |
||||
|
), |
||||
|
rowExpandable: (record) => true, // 每一行都可以展开
|
||||
|
expandedRowKeys: data.map((item) => item.key), // 默认展开所有行
|
||||
|
expandIcon: () => null, // 隐藏展开/收起按钮
|
||||
|
}} |
||||
|
columns={columns_key1} |
||||
|
/> |
||||
|
), |
||||
|
}, |
||||
|
{ |
||||
|
key: "2", |
||||
|
label: "待签名", |
||||
|
children: <Table dataSource={data} columns={columns_key1} />, |
||||
|
}, |
||||
|
{ |
||||
|
key: "3", |
||||
|
label: "已签名(待执行", |
||||
|
children: <Table dataSource={[]} columns={columns_key1} />, |
||||
|
}, |
||||
|
{ |
||||
|
key: "4", |
||||
|
label: "失败", |
||||
|
children: <Table dataSource={[]} columns={columns_key1} />, |
||||
|
}, |
||||
|
{ |
||||
|
key: "5", |
||||
|
label: "成功", |
||||
|
children: <Table dataSource={[]} columns={columns_key1} />, |
||||
|
}, |
||||
|
]; |
||||
|
return ( |
||||
|
<div className="flex flex-col gap-4"> |
||||
|
<Tabs |
||||
|
type="card" |
||||
|
defaultActiveKey="1" |
||||
|
items={items} |
||||
|
style={{ marginTop: 16 }} |
||||
|
/> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default MultTransactions; |
@ -0,0 +1,167 @@ |
|||||
|
"use client"; |
||||
|
import React from "react"; |
||||
|
import { |
||||
|
Button, |
||||
|
Card, |
||||
|
Col, |
||||
|
Dropdown, |
||||
|
Row, |
||||
|
Space, |
||||
|
Table, |
||||
|
Tabs, |
||||
|
type TabsProps, |
||||
|
Tag, |
||||
|
Typography, |
||||
|
} from "antd"; |
||||
|
import { CalculatorOutlined, MoreOutlined } from "@ant-design/icons"; |
||||
|
import Link from "antd/lib/typography/Link"; |
||||
|
import MyStake from "@/app/home/resources2/components/MyStake"; |
||||
|
|
||||
|
const { Text } = Typography; |
||||
|
|
||||
|
const MyAccounts = () => { |
||||
|
const columns_key1 = [ |
||||
|
{ |
||||
|
title: "资源类型", |
||||
|
dataIndex: "name", |
||||
|
key: "name", |
||||
|
}, |
||||
|
{ |
||||
|
title: "获取资源数量", |
||||
|
dataIndex: "quantity", |
||||
|
key: "quantity", |
||||
|
}, |
||||
|
{ |
||||
|
title: "质押数量", |
||||
|
dataIndex: "name", |
||||
|
key: "name", |
||||
|
}, |
||||
|
{ |
||||
|
title: "最后操作时间 (UTC)", |
||||
|
dataIndex: "quantity", |
||||
|
key: "quantity", |
||||
|
}, |
||||
|
{ |
||||
|
title: "操作", |
||||
|
render: () => { |
||||
|
return ( |
||||
|
<Dropdown menu={{ items }}> |
||||
|
<MoreOutlined /> |
||||
|
</Dropdown> |
||||
|
); |
||||
|
}, |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
const items: TabsProps["items"] = [ |
||||
|
{ |
||||
|
key: "1", |
||||
|
label: "质押获得", |
||||
|
children: <Table dataSource={[]} columns={columns_key1} />, |
||||
|
}, |
||||
|
{ |
||||
|
key: "2", |
||||
|
label: "他人代理给自己", |
||||
|
children: <Table dataSource={[]} columns={columns_key1} />, |
||||
|
}, |
||||
|
{ |
||||
|
key: "3", |
||||
|
label: "代理给他人", |
||||
|
children: <Table dataSource={[]} columns={columns_key1} />, |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
return ( |
||||
|
<Space direction={"vertical"} size={[16, 16]} style={{ width: "100%" }}> |
||||
|
<div |
||||
|
style={{ |
||||
|
display: "flex", |
||||
|
justifyContent: "space-between", |
||||
|
alignItems: "center", |
||||
|
backgroundColor: "white", |
||||
|
padding: 16, |
||||
|
}} |
||||
|
> |
||||
|
<Text strong>我的账户权限</Text> |
||||
|
<Space> |
||||
|
<Link>多签教程</Link> |
||||
|
<Button type={"primary"}>编辑权限</Button> |
||||
|
</Space> |
||||
|
</div> |
||||
|
<Card |
||||
|
style={{ backgroundColor: "#fffbf6" }} |
||||
|
title={ |
||||
|
<Space direction={"vertical"}> |
||||
|
<Text strong>拥有者权限</Text> |
||||
|
<Text> |
||||
|
拥有者权限是账户的最高权限,可以调整账户的权限结构、执行账户所有操作。 |
||||
|
</Text> |
||||
|
</Space> |
||||
|
} |
||||
|
> |
||||
|
<Space direction={"vertical"}> |
||||
|
<Space> |
||||
|
<Text>权限名称:</Text> |
||||
|
<Text>kelis</Text> |
||||
|
</Space> |
||||
|
<Space> |
||||
|
<Text>阀值:</Text> |
||||
|
<Text>0</Text> |
||||
|
</Space> |
||||
|
<Space> |
||||
|
<Text>授权给:</Text> |
||||
|
<Text>0</Text> |
||||
|
</Space> |
||||
|
<Space> |
||||
|
<Text>权重:</Text> |
||||
|
<Text>0</Text> |
||||
|
</Space> |
||||
|
</Space> |
||||
|
</Card> |
||||
|
<Card |
||||
|
style={{ backgroundColor: "#fffbf6" }} |
||||
|
title={ |
||||
|
<Space direction={"vertical"}> |
||||
|
<Text strong>活跃权限(1/8)</Text> |
||||
|
<Text> |
||||
|
活跃权限用于提供一个权限的组合,比如提供一个只能执行 TRX |
||||
|
转账或触发智能合约操作的权限。每个账户最多添加 8 |
||||
|
个活跃权限,每个活跃权限最多添加 5 个地址。 |
||||
|
</Text> |
||||
|
</Space> |
||||
|
} |
||||
|
> |
||||
|
<Space direction={"vertical"}> |
||||
|
<Space> |
||||
|
<Text>权限名称:</Text> |
||||
|
<Text>kelis</Text> |
||||
|
</Space> |
||||
|
<Space> |
||||
|
<Text>操作:</Text> |
||||
|
<div> |
||||
|
<Tag>2312</Tag> |
||||
|
<Tag>2312</Tag> |
||||
|
<Tag>gfh</Tag> |
||||
|
<Tag>2312</Tag> |
||||
|
<Tag>2</Tag> |
||||
|
<Tag>2312</Tag> |
||||
|
<Tag>gh</Tag> |
||||
|
<Tag>2312</Tag> |
||||
|
<Tag>2312</Tag> |
||||
|
</div> |
||||
|
</Space> |
||||
|
<Space> |
||||
|
<Text>授权给:</Text> |
||||
|
<Text>0</Text> |
||||
|
</Space> |
||||
|
<Space> |
||||
|
<Text>权重:</Text> |
||||
|
<Text>0</Text> |
||||
|
</Space> |
||||
|
</Space> |
||||
|
</Card> |
||||
|
</Space> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default MyAccounts; |
@ -0,0 +1,115 @@ |
|||||
|
"use client"; |
||||
|
import React from "react"; |
||||
|
import { |
||||
|
Button, |
||||
|
Card, |
||||
|
Col, |
||||
|
Dropdown, |
||||
|
Row, |
||||
|
Space, |
||||
|
Table, |
||||
|
Tabs, |
||||
|
type TabsProps, |
||||
|
Tag, |
||||
|
Typography, |
||||
|
} from "antd"; |
||||
|
import { CalculatorOutlined, MoreOutlined } from "@ant-design/icons"; |
||||
|
import Link from "antd/lib/typography/Link"; |
||||
|
import MyStake from "@/app/home/resources2/components/MyStake"; |
||||
|
|
||||
|
const { Text } = Typography; |
||||
|
|
||||
|
const OtherAccounts = () => { |
||||
|
const columns_key1 = [ |
||||
|
{ |
||||
|
title: "资源类型", |
||||
|
dataIndex: "name", |
||||
|
key: "name", |
||||
|
}, |
||||
|
{ |
||||
|
title: "获取资源数量", |
||||
|
dataIndex: "quantity", |
||||
|
key: "quantity", |
||||
|
}, |
||||
|
{ |
||||
|
title: "质押数量", |
||||
|
dataIndex: "name", |
||||
|
key: "name", |
||||
|
}, |
||||
|
{ |
||||
|
title: "最后操作时间 (UTC)", |
||||
|
dataIndex: "quantity", |
||||
|
key: "quantity", |
||||
|
}, |
||||
|
{ |
||||
|
title: "操作", |
||||
|
render: () => { |
||||
|
return ( |
||||
|
<Dropdown menu={{ items }}> |
||||
|
<MoreOutlined /> |
||||
|
</Dropdown> |
||||
|
); |
||||
|
}, |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
const items: TabsProps["items"] = [ |
||||
|
{ |
||||
|
key: "1", |
||||
|
label: "质押获得", |
||||
|
children: <Table dataSource={[]} columns={columns_key1} />, |
||||
|
}, |
||||
|
{ |
||||
|
key: "2", |
||||
|
label: "他人代理给自己", |
||||
|
children: <Table dataSource={[]} columns={columns_key1} />, |
||||
|
}, |
||||
|
{ |
||||
|
key: "3", |
||||
|
label: "代理给他人", |
||||
|
children: <Table dataSource={[]} columns={columns_key1} />, |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
return ( |
||||
|
<Space direction={"vertical"} size={[16, 16]} style={{ width: "100%" }}> |
||||
|
<div |
||||
|
style={{ |
||||
|
display: "flex", |
||||
|
justifyContent: "space-between", |
||||
|
alignItems: "center", |
||||
|
backgroundColor: "white", |
||||
|
padding: 16, |
||||
|
}} |
||||
|
> |
||||
|
<Text strong>管理其他账户权限</Text> |
||||
|
</div> |
||||
|
<Card |
||||
|
style={{ backgroundColor: "#fffbf6" }} |
||||
|
title={ |
||||
|
<Space direction={"vertical"}> |
||||
|
<Text strong>持有“拥有者权限”</Text> |
||||
|
<Text> |
||||
|
你持有以下其他账户的最高权限,可以调整账户的权限结构、执行所有操作。 |
||||
|
</Text> |
||||
|
</Space> |
||||
|
} |
||||
|
> |
||||
|
<Table dataSource={[]} columns={columns_key1} /> |
||||
|
</Card> |
||||
|
<Card |
||||
|
style={{ backgroundColor: "#fffbf6" }} |
||||
|
title={ |
||||
|
<Space direction={"vertical"}> |
||||
|
<Text strong>持有“活跃权限”</Text> |
||||
|
<Text>你持有以下其他账户的活跃权限,可以执行被授权的操作。</Text> |
||||
|
</Space> |
||||
|
} |
||||
|
> |
||||
|
<Table dataSource={[]} columns={columns_key1} /> |
||||
|
</Card> |
||||
|
</Space> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default OtherAccounts; |
@ -0,0 +1,3 @@ |
|||||
|
.ant-tabs-nav { |
||||
|
margin: 0 !important; |
||||
|
} |
@ -1,39 +1,39 @@ |
|||||
'use client'; |
|
||||
|
"use client"; |
||||
|
import React from "react"; |
||||
|
import { Button, Card, Col, Row, Space, Tabs, Typography } from "antd"; |
||||
|
import type { TabsProps } from "antd"; |
||||
|
import MyAccounts from "./components/MyAccounts"; |
||||
|
import OtherAccounts from "./components/OtherAccounts"; |
||||
|
import "./page.less"; |
||||
|
const { Text, Link } = Typography; |
||||
|
|
||||
import React from 'react'; |
|
||||
import { Tabs } from 'antd'; |
|
||||
import type { TabsProps } from 'antd'; |
|
||||
|
|
||||
const PermissionsPage: React.FC = () => { |
|
||||
const items: TabsProps['items'] = [ |
|
||||
|
const PermissionsPage = () => { |
||||
|
const items: TabsProps["items"] = [ |
||||
{ |
{ |
||||
key: '1', |
|
||||
label: 'My Account', |
|
||||
children: ( |
|
||||
<div> |
|
||||
<h3>My Account Content</h3> |
|
||||
{/* Add your My Account content here */} |
|
||||
</div> |
|
||||
), |
|
||||
|
key: "1", |
||||
|
label: "我的账户", |
||||
|
children: <MyAccounts />, |
||||
}, |
}, |
||||
{ |
{ |
||||
key: '2', |
|
||||
label: 'Other Accounts', |
|
||||
children: ( |
|
||||
<div> |
|
||||
<h3>Other Accounts Content</h3> |
|
||||
{/* Add your Other Accounts content here */} |
|
||||
</div> |
|
||||
), |
|
||||
|
key: "2", |
||||
|
label: "管理其他账户", |
||||
|
children: <OtherAccounts />, |
||||
}, |
}, |
||||
]; |
]; |
||||
|
|
||||
return ( |
return ( |
||||
<div className="p-6"> |
|
||||
<h2 className="text-2xl font-bold mb-6">Permissions</h2> |
|
||||
<Tabs defaultActiveKey="1" items={items} /> |
|
||||
|
<div className="flex flex-col gap-4"> |
||||
|
<Text> |
||||
|
已连接钱包: <Link>TTiy8U5k37DS2SwNqjfsYCFgokRL1RXPnA</Link> |
||||
|
</Text>{" "} |
||||
|
<Tabs |
||||
|
type="card" |
||||
|
defaultActiveKey="1" |
||||
|
items={items} |
||||
|
style={{ marginTop: 16 }} |
||||
|
/> |
||||
</div> |
</div> |
||||
); |
); |
||||
}; |
}; |
||||
|
|
||||
export default PermissionsPage; |
|
||||
|
export default PermissionsPage; |
@ -0,0 +1,3 @@ |
|||||
|
.ant-tabs-nav { |
||||
|
margin: 0 !important; |
||||
|
} |
@ -1,38 +1,43 @@ |
|||||
'use client'; |
|
||||
import React from 'react'; |
|
||||
import { Card, Tabs } from 'antd'; |
|
||||
import type { TabsProps } from 'antd'; |
|
||||
|
"use client"; |
||||
|
import React from "react"; |
||||
|
import { Button, Card, Col, Row, Space, Tabs, Typography } from "antd"; |
||||
|
import type { TabsProps } from "antd"; |
||||
|
import MyResources from "./components/MyResources"; |
||||
|
import MyStake from "./components/MyStake"; |
||||
|
import "./page.less"; |
||||
|
const { Text, Link } = Typography; |
||||
|
|
||||
const ResourcesPage = () => { |
const ResourcesPage = () => { |
||||
const items: TabsProps['items'] = [ |
|
||||
|
const items: TabsProps["items"] = [ |
||||
{ |
{ |
||||
key: '1', |
|
||||
label: 'My Resources', |
|
||||
children: ( |
|
||||
<div> |
|
||||
My Resources Content |
|
||||
</div> |
|
||||
), |
|
||||
|
key: "1", |
||||
|
label: "我的资源", |
||||
|
children: <MyResources />, |
||||
}, |
}, |
||||
{ |
{ |
||||
key: '2', |
|
||||
label: 'My Stake', |
|
||||
children: ( |
|
||||
<div> |
|
||||
My Stake Content |
|
||||
</div> |
|
||||
), |
|
||||
|
key: "2", |
||||
|
label: "我的质押", |
||||
|
children: <MyStake />, |
||||
}, |
}, |
||||
]; |
]; |
||||
|
|
||||
return ( |
return ( |
||||
<div className="flex flex-col gap-4"> |
<div className="flex flex-col gap-4"> |
||||
<Card title="Stake for Resources"> |
|
||||
Stake for Resources Content |
|
||||
|
<Card title="质押获取资源"> |
||||
|
<Space direction={"vertical"}> |
||||
|
<Space> |
||||
|
<Text>总能量:</Text> |
||||
|
<Text>99999</Text> |
||||
|
</Space> |
||||
|
<Space> |
||||
|
<Text>总带宽:</Text> |
||||
|
<Text>99999</Text> |
||||
|
</Space> |
||||
|
</Space> |
||||
</Card> |
</Card> |
||||
<Tabs defaultActiveKey="1" items={items} /> |
|
||||
|
<Tabs type="card" defaultActiveKey="1" items={items} /> |
||||
</div> |
</div> |
||||
); |
); |
||||
}; |
}; |
||||
|
|
||||
export default ResourcesPage; |
|
||||
|
export default ResourcesPage; |
Write
Preview
Loading…
Cancel
Save
Reference in new issue