除了弹窗意外的UI做完

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbopack",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
@@ -22,10 +22,15 @@
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "css-loader": "^7.1.2",
     "eslint": "^9",
     "eslint-config-next": "15.1.2",
+    "less": "^4.2.1",
+    "less-loader": "^12.2.0",
+    "next-with-less": "^3.0.1",
     "postcss": "^8",
     "prettier": "^3.4.2",
+    "style-loader": "^4.0.0",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }

src/app/home/components/HeaderMenu/index.tsx

@@ -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;

src/app/home/components/SideMenu/index.tsx

@@ -32,6 +32,11 @@ const items: MenuProps["items"] = [
     icon: <LockOutlined />,
     label: "权限管理",
   },
+  {
+    key: "MultTransactions",
+    icon: <LockOutlined />,
+    label: "多签交易",
+  },
 ];
 
 const SideMenu: React.FC = () => {
@@ -48,6 +53,9 @@ const SideMenu: React.FC = () => {
       case "permissions":
         router.push("/home/permissions");
         break;
+      case "MultTransactions":
+        router.push("/home/multTransactions");
+        break;
       default:
         break;
     }

src/app/home/layout.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import { AntdRegistry } from "@ant-design/nextjs-registry";
-import { Layout } from "antd";
+import { Layout, Modal, Typography } from "antd";
 import Sider from "antd/es/layout/Sider";
 import SideMenu from "@/app/home/components/SideMenu";
-import { Content } from "antd/lib/layout/layout";
+import { Content, Header } from "antd/lib/layout/layout";
+import HeaderMenu from "./components/HeaderMenu";
 
 const RootLayout = ({ children }: React.PropsWithChildren) => (
   <div
@@ -17,12 +18,17 @@ const RootLayout = ({ children }: React.PropsWithChildren) => (
     <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>
+      <Header>
+        <HeaderMenu></HeaderMenu>
+      </Header>
+      <Layout>
+        <Sider width="25%" style={{ backgroundColor: "#fff", padding: 20 }}>
+          <SideMenu></SideMenu>
+        </Sider>
+        <Content style={{ padding: 20 }}>
+          <AntdRegistry>{children}</AntdRegistry>
+        </Content>
+      </Layout>
     </Layout>
   </div>
 );

src/app/home/multTransactions/page.less

@@ -0,0 +1,3 @@
+.ant-tabs-nav {
+  margin: 0 !important;
+}

src/app/home/multTransactions/page.tsx

@@ -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;

src/app/home/permissions/components/MyAccounts.tsx

@@ -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;

src/app/home/permissions/components/OtherAccounts.tsx

@@ -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;

src/app/home/permissions/page.less

@@ -0,0 +1,3 @@
+.ant-tabs-nav {
+  margin: 0 !important;
+}

src/app/home/permissions/page.tsx

@@ -1,37 +1,37 @@
-'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 (
-    <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>
   );
 };

src/app/home/resources2/page.less

@@ -0,0 +1,3 @@
+.ant-tabs-nav {
+  margin: 0 !important;
+}

src/app/home/resources2/page.tsx

@@ -1,36 +1,41 @@
-'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 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 (
     <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>
-      <Tabs defaultActiveKey="1" items={items} />
+      <Tabs type="card" defaultActiveKey="1" items={items} />
     </div>
   );
 };