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
-
10src/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
-
52src/app/home/permissions/page.tsx
-
3src/app/home/resources2/page.less
-
49src/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; |
|||
} |
|||
@ -0,0 +1,3 @@ |
|||
.ant-tabs-nav { |
|||
margin: 0 !important; |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue