18 changed files with 1026 additions and 121 deletions
-
2package.json
-
79pnpm-lock.yaml
-
105src/api/client.ts
-
7src/api/services/index.ts
-
44src/api/services/transactionService.ts
-
58src/api/services/userService.ts
-
39src/api/types.ts
-
1src/app/home/assets/components/AssetListCard.tsx
-
1src/app/home/assets/components/ResourceCard.tsx
-
35src/app/home/assets/components/TransferCard.tsx
-
57src/app/home/assets/components/VoteCard.tsx
-
162src/app/home/assets/components/WalletCard.tsx
-
14src/app/home/assets/page.tsx
-
43src/app/home/components/HeaderMenu/api.ts
-
206src/app/home/components/HeaderMenu/groupManager.tsx
-
261src/app/home/components/HeaderMenu/index.tsx
-
2src/app/home/layout.tsx
-
31src/store/userAtoms.ts
@ -0,0 +1,105 @@ |
|||
import axios, { AxiosInstance, AxiosRequestConfig } from "axios"; |
|||
|
|||
/** |
|||
* API客户端类 |
|||
* 封装了基于axios的HTTP请求方法，提供统一的接口调用方式 |
|||
*/ |
|||
export class ApiClient { |
|||
private client: AxiosInstance; |
|||
|
|||
// constructor(baseURL: string = process.env.NEXT_PUBLIC_API_BASE_URL || 'https://api.example.com') {
|
|||
constructor(baseURL: string = " http://192.168.31.65:6600") { |
|||
this.client = axios.create({ |
|||
baseURL, |
|||
timeout: 10000, // 请求超时时间：10秒
|
|||
headers: { |
|||
"Content-Type": "application/json", |
|||
}, |
|||
}); |
|||
|
|||
// 请求拦截器
|
|||
this.client.interceptors.request.use( |
|||
(config) => { |
|||
// 在这里添加认证token
|
|||
const token = localStorage.getItem("token"); |
|||
if (token) { |
|||
config.headers.Authorization = `Bearer ${token}`; |
|||
} |
|||
return config; |
|||
}, |
|||
(error) => { |
|||
return Promise.reject(error); |
|||
}, |
|||
); |
|||
|
|||
// 响应拦截器
|
|||
this.client.interceptors.response.use( |
|||
(response) => response, |
|||
(error) => { |
|||
// 在这里处理常见错误
|
|||
if (error.response?.status === 401) { |
|||
// 处理未授权访问
|
|||
console.error("未授权访问"); |
|||
} |
|||
return Promise.reject(error); |
|||
}, |
|||
); |
|||
} |
|||
|
|||
/** |
|||
* 发送GET请求 |
|||
* @param url 请求地址 |
|||
* @param config 请求配置 |
|||
* @returns 返回请求数据 |
|||
*/ |
|||
async get<T>(url: string, config?: AxiosRequestConfig): Promise<T> { |
|||
const response = await this.client.get<T>(url, config); |
|||
return response.data; |
|||
} |
|||
|
|||
/** |
|||
* 发送POST请求 |
|||
* @param url 请求地址 |
|||
* @param data 请求数据 |
|||
* @param config 请求配置 |
|||
* @returns 返回请求数据 |
|||
*/ |
|||
async post<T>( |
|||
url: string, |
|||
data?: any, |
|||
config?: AxiosRequestConfig, |
|||
): Promise<T> { |
|||
const response = await this.client.post<T>(url, data, config); |
|||
return response.data; |
|||
} |
|||
|
|||
/** |
|||
* 发送PUT请求 |
|||
* @param url 请求地址 |
|||
* @param data 请求数据 |
|||
* @param config 请求配置 |
|||
* @returns 返回请求数据 |
|||
*/ |
|||
async put<T>( |
|||
url: string, |
|||
data?: any, |
|||
config?: AxiosRequestConfig, |
|||
): Promise<T> { |
|||
const response = await this.client.put<T>(url, data, config); |
|||
return response.data; |
|||
} |
|||
|
|||
/** |
|||
* 发送DELETE请求 |
|||
* @param url 请求地址 |
|||
* @param config 请求配置 |
|||
* @returns 返回请求数据 |
|||
*/ |
|||
async delete<T>(url: string, config?: AxiosRequestConfig): Promise<T> { |
|||
const response = await this.client.delete<T>(url, config); |
|||
return response.data; |
|||
} |
|||
} |
|||
|
|||
// 导出API客户端实例
|
|||
export const apiClient = new ApiClient(); |
|||
@ -0,0 +1,7 @@ |
|||
/** |
|||
* 服务模块导出文件 |
|||
* 统一导出所有服务类，方便其他模块引用 |
|||
*/ |
|||
|
|||
export * from './userService'; |
|||
export * from './transactionService'; |
|||
@ -0,0 +1,44 @@ |
|||
import { apiClient } from '../client'; |
|||
import { ApiResponse, Transaction, CreateTransactionRequest } from '../types'; |
|||
|
|||
/** |
|||
* 交易服务类 - 处理所有与交易相关的API请求 |
|||
*/ |
|||
export class TransactionService { |
|||
// 交易API的基础路径
|
|||
private static readonly BASE_PATH = '/transactions'; |
|||
|
|||
/** |
|||
* 创建新交易 |
|||
* @param data 创建交易所需的数据 |
|||
* @returns 返回创建的交易信息 |
|||
*/ |
|||
static async createTransaction(data: CreateTransactionRequest): Promise<ApiResponse<Transaction>> { |
|||
return apiClient.post<ApiResponse<Transaction>>(this.BASE_PATH, data); |
|||
} |
|||
|
|||
/** |
|||
* 获取指定ID的交易详情 |
|||
* @param id 交易ID |
|||
* @returns 返回交易详细信息 |
|||
*/ |
|||
static async getTransaction(id: string): Promise<ApiResponse<Transaction>> { |
|||
return apiClient.get<ApiResponse<Transaction>>(`${this.BASE_PATH}/${id}`); |
|||
} |
|||
|
|||
/** |
|||
* 获取交易列表 |
|||
* @param params 查询参数对象 |
|||
* @param params.page 页码 |
|||
* @param params.limit 每页数量 |
|||
* @param params.status 交易状态过滤 |
|||
* @returns 返回交易列表数据 |
|||
*/ |
|||
static async listTransactions(params?: { |
|||
page?: number; |
|||
limit?: number; |
|||
status?: Transaction['status']; |
|||
}): Promise<ApiResponse<Transaction[]>> { |
|||
return apiClient.get<ApiResponse<Transaction[]>>(this.BASE_PATH, { params }); |
|||
} |
|||
} |
|||
@ -0,0 +1,58 @@ |
|||
import { apiClient } from '../client'; |
|||
import { ApiResponse, LoginRequest, LoginResponse, User } from '../types'; |
|||
|
|||
/** |
|||
* 用户服务类 - 处理所有与用户相关的API请求 |
|||
*/ |
|||
export class UserService { |
|||
// 用户API的基础路径
|
|||
private static readonly BASE_PATH = '/users'; |
|||
|
|||
/** |
|||
* 用户登录 |
|||
* @param credentials 登录凭证，包含邮箱和密码 |
|||
* @returns 返回登录响应，包含用户token和用户信息 |
|||
*/ |
|||
static async login(credentials: LoginRequest): Promise<ApiResponse<LoginResponse>> { |
|||
return apiClient.post<ApiResponse<LoginResponse>>(`${this.BASE_PATH}/login`, credentials); |
|||
} |
|||
|
|||
/** |
|||
* 获取当前登录用户信息 |
|||
* @returns 返回当前用户的详细信息 |
|||
*/ |
|||
static async getCurrentUser(): Promise<ApiResponse<User>> { |
|||
return apiClient.get<ApiResponse<User>>(`${this.BASE_PATH}/me`); |
|||
} |
|||
|
|||
/** |
|||
* 更新用户资料 |
|||
* @param userId 用户ID |
|||
* @param data 需要更新的用户数据 |
|||
* @returns 返回更新后的用户信息 |
|||
*/ |
|||
static async updateProfile(userId: string, data: Partial<User>): Promise<ApiResponse<User>> { |
|||
return apiClient.put<ApiResponse<User>>(`${this.BASE_PATH}/${userId}`, data); |
|||
} |
|||
} |
|||
|
|||
// 使用示例：
|
|||
/* |
|||
try { |
|||
// 尝试用户登录
|
|||
const response = await UserService.login({ |
|||
email: 'user@example.com', |
|||
password: 'password123' |
|||
}); |
|||
|
|||
if (response.success) { |
|||
const { token, user } = response.data; |
|||
// 将token存储在localStorage中
|
|||
localStorage.setItem('token', token); |
|||
// 处理用户数据
|
|||
console.log('登录用户:', user); |
|||
} |
|||
} catch (error) { |
|||
console.error('登录失败:', error); |
|||
} |
|||
*/ |
|||
@ -0,0 +1,39 @@ |
|||
// Common API response wrapper
|
|||
export interface ApiResponse<T> { |
|||
success: boolean; |
|||
data: T; |
|||
message?: string; |
|||
} |
|||
|
|||
// User related types
|
|||
export interface User { |
|||
id: string; |
|||
username: string; |
|||
email: string; |
|||
createdAt: string; |
|||
} |
|||
|
|||
export interface LoginRequest { |
|||
email: string; |
|||
password: string; |
|||
} |
|||
|
|||
export interface LoginResponse { |
|||
token: string; |
|||
user: User; |
|||
} |
|||
|
|||
// Transaction related types
|
|||
export interface Transaction { |
|||
id: string; |
|||
amount: number; |
|||
currency: string; |
|||
status: 'pending' | 'completed' | 'failed'; |
|||
timestamp: string; |
|||
} |
|||
|
|||
export interface CreateTransactionRequest { |
|||
amount: number; |
|||
currency: string; |
|||
recipientAddress: string; |
|||
} |
|||
@ -1,28 +1,150 @@ |
|||
import React from "react"; |
|||
import { Card, Space, Typography } from "antd"; |
|||
import { WalletOutlined } from "@ant-design/icons"; |
|||
import React, { useState } from "react"; |
|||
import { |
|||
Card, |
|||
Space, |
|||
Typography, |
|||
Modal, |
|||
Input, |
|||
Select, |
|||
Button, |
|||
QRCode, |
|||
message, |
|||
} from "antd"; |
|||
import { |
|||
WalletOutlined, |
|||
QrcodeOutlined, |
|||
TransactionOutlined, |
|||
} from "@ant-design/icons"; |
|||
|
|||
const { Title } = Typography; |
|||
const { TextArea } = Input; |
|||
|
|||
const WalletCard: React.FC = () => { |
|||
const [isTransferModalOpen, setIsTransferModalOpen] = useState(false); |
|||
const [isReceiveModalOpen, setIsReceiveModalOpen] = useState(false); |
|||
const [receiverAddress, setReceiverAddress] = useState(""); |
|||
const [selectedToken, setSelectedToken] = useState("TRX"); |
|||
const [transferNote, setTransferNote] = useState(""); |
|||
|
|||
// 示例钱包地址
|
|||
const walletAddress = "TRx1234567890abcdefghijklmnopqrstuvwxyz"; |
|||
|
|||
const handleTransfer = () => { |
|||
if (!receiverAddress) { |
|||
message.error("请输入接收账户地址"); |
|||
return; |
|||
} |
|||
// 这里添加转账逻辑
|
|||
message.success("转账请求已提交"); |
|||
setIsTransferModalOpen(false); |
|||
// 重置表单
|
|||
setReceiverAddress(""); |
|||
setSelectedToken("TRX"); |
|||
setTransferNote(""); |
|||
}; |
|||
|
|||
const handleSaveQRCode = () => { |
|||
message.success("二维码已保存"); |
|||
}; |
|||
|
|||
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> |
|||
<> |
|||
<Card |
|||
title={ |
|||
<> |
|||
<WalletOutlined /> 钱包资产 |
|||
</> |
|||
} |
|||
hoverable |
|||
style={{ minHeight: "240px" }} |
|||
> |
|||
<div className="text-center"> |
|||
<Title level={3}>0.00 TRX</Title> |
|||
<p>总资产价值</p> |
|||
</div> |
|||
<Space> |
|||
<Button |
|||
type="primary" |
|||
icon={<TransactionOutlined />} |
|||
onClick={() => setIsTransferModalOpen(true)} |
|||
> |
|||
转账 |
|||
</Button> |
|||
<Button |
|||
icon={<QrcodeOutlined />} |
|||
onClick={() => setIsReceiveModalOpen(true)} |
|||
> |
|||
收款 |
|||
</Button> |
|||
</Space> |
|||
</Card> |
|||
|
|||
{/* 转账弹窗 */} |
|||
<Modal |
|||
title="转账" |
|||
open={isTransferModalOpen} |
|||
onOk={handleTransfer} |
|||
onCancel={() => setIsTransferModalOpen(false)} |
|||
centered |
|||
> |
|||
<Space direction="vertical" style={{ width: "100%" }} size="large"> |
|||
<div> |
|||
<p>接收账户</p> |
|||
<Input |
|||
placeholder="请输入接收账户地址" |
|||
value={receiverAddress} |
|||
onChange={(e) => setReceiverAddress(e.target.value)} |
|||
/> |
|||
</div> |
|||
<div> |
|||
<p>选择通证</p> |
|||
<Select |
|||
style={{ width: "100%" }} |
|||
value={selectedToken} |
|||
onChange={setSelectedToken} |
|||
options={[ |
|||
{ value: "TRX", label: "TRX" }, |
|||
{ value: "USDT", label: "USDT" }, |
|||
]} |
|||
/> |
|||
</div> |
|||
<div> |
|||
<p>转账备注</p> |
|||
<TextArea |
|||
rows={4} |
|||
placeholder="请输入转账备注" |
|||
value={transferNote} |
|||
onChange={(e) => setTransferNote(e.target.value)} |
|||
/> |
|||
</div> |
|||
</Space> |
|||
</Modal> |
|||
|
|||
{/* 收款弹窗 */} |
|||
<Modal |
|||
title="收款" |
|||
open={isReceiveModalOpen} |
|||
onCancel={() => setIsReceiveModalOpen(false)} |
|||
footer={[ |
|||
<Button key="save" type="primary" onClick={handleSaveQRCode}> |
|||
保存二维码 |
|||
</Button>, |
|||
]} |
|||
centered |
|||
> |
|||
<Space |
|||
direction="vertical" |
|||
style={{ width: "100%", alignItems: "center" }} |
|||
size="large" |
|||
> |
|||
<div style={{ wordBreak: "break-all", textAlign: "center" }}> |
|||
<p>钱包地址</p> |
|||
<p>{walletAddress}</p> |
|||
</div> |
|||
<QRCode value={walletAddress} size={200} /> |
|||
</Space> |
|||
</Modal> |
|||
</> |
|||
); |
|||
}; |
|||
|
|||
|
|||
@ -0,0 +1,43 @@ |
|||
import { apiClient } from "@/api/client"; |
|||
|
|||
export class Api { |
|||
private static readonly BASE_PATH = "/transactions"; |
|||
|
|||
//http://192.168.31.65:6600/api/v1/group/add
|
|||
static async addGroupArr(data: any) { |
|||
return apiClient.post("/api/v1/group/add", data); |
|||
} |
|||
|
|||
//http://192.168.31.65:6600/api/v1/group/list
|
|||
static async getGroupArr() { |
|||
return apiClient.get("/api/v1/group/list"); |
|||
} |
|||
//http://192.168.31.65:6600/api/v1/group/update
|
|||
static async updateGroupArr(data: any) { |
|||
return apiClient.put("/api/v1/group/update", data); |
|||
} |
|||
//http://192.168.31.65:6600/api/v1/group/{id}
|
|||
static async deleteGroupArr(id: string) { |
|||
return apiClient.delete(`/api/v1/group/${id}`); |
|||
} |
|||
|
|||
//http://192.168.31.65:6600/api/v1/address/add
|
|||
static async addAddressArr(data: any) { |
|||
return apiClient.post("/api/v1/address/add", data); |
|||
} |
|||
|
|||
//http://192.168.31.65:6600/api/v1/address/list
|
|||
static async getAddressArr() { |
|||
return apiClient.get("/api/v1/address/list"); |
|||
} |
|||
|
|||
//http://192.168.31.65:6600/api/v1/address/update
|
|||
static async updateAddressArr(data: any) { |
|||
return apiClient.put("/api/v1/address/update", data); |
|||
} |
|||
|
|||
//http://192.168.31.65:6600/api/v1/address/{id}
|
|||
static async deleteAddressArr(id: string) { |
|||
return apiClient.delete(`/api/v1/address/${id}`); |
|||
} |
|||
} |
|||
@ -0,0 +1,206 @@ |
|||
"use client"; |
|||
|
|||
import React, { useEffect, useState } from "react"; |
|||
import { Button, Form, Modal, Space, Table, Typography } from "antd"; |
|||
import { BetaSchemaForm } from "@ant-design/pro-components"; |
|||
import { Api } from "./api"; |
|||
const { Link } = Typography; |
|||
|
|||
interface GroupManagerProps { |
|||
modalOpen: boolean; |
|||
setModalOpen: React.Dispatch<React.SetStateAction<boolean>>; |
|||
dataSource: any[]; |
|||
setDataSource: React.Dispatch<React.SetStateAction<any[]>>; |
|||
getGroupArr: Function; |
|||
} |
|||
|
|||
const GroupManager: React.FC<GroupManagerProps> = ({ |
|||
modalOpen, |
|||
setModalOpen, |
|||
dataSource, |
|||
setDataSource, |
|||
getGroupArr, |
|||
}) => { |
|||
const [createOpen, setCreate] = useState(false); |
|||
const [editorOpen, setEditorOpen] = useState(false); |
|||
const [createForm] = Form.useForm(); // 只取 Form 实例
|
|||
const [editForm] = Form.useForm(); // 只取 Form 实例
|
|||
|
|||
const onCancel = () => { |
|||
setModalOpen(false); |
|||
}; |
|||
|
|||
const openCreateForm = () => { |
|||
createForm.resetFields(); |
|||
setCreate(true); |
|||
}; |
|||
|
|||
const openEditForm = (record: any) => { |
|||
editForm.setFieldsValue(record); |
|||
setEditorOpen(true); |
|||
}; |
|||
|
|||
const closeCreateForm = () => { |
|||
setCreate(false); |
|||
}; |
|||
const closeEditForm = () => { |
|||
setEditorOpen(false); |
|||
}; |
|||
|
|||
//============================================通信====================================================
|
|||
|
|||
const handleAdd = async () => { |
|||
const reqData = createForm.getFieldsValue(); |
|||
await Api.addGroupArr(reqData); |
|||
getGroupArr(); |
|||
closeCreateForm(); |
|||
}; |
|||
const subDelect = async (id: string) => { |
|||
await Api.deleteGroupArr(id); |
|||
getGroupArr(); |
|||
}; |
|||
const subEdit = async () => { |
|||
const reqData = editForm.getFieldsValue(); |
|||
await Api.updateGroupArr(reqData); |
|||
getGroupArr(); |
|||
closeEditForm(); |
|||
}; |
|||
//===================================================================================================
|
|||
|
|||
const columns = [ |
|||
{ |
|||
title: "ID", |
|||
dataIndex: "id", |
|||
key: "id", |
|||
formItemProps: { |
|||
hidden: true, |
|||
}, |
|||
}, |
|||
{ |
|||
title: "分组名称", |
|||
dataIndex: "name", |
|||
key: "name", |
|||
formItemProps: { |
|||
rules: [{ required: true, message: "必填项" }], |
|||
}, |
|||
}, |
|||
{ |
|||
title: "排序", |
|||
dataIndex: "sort", |
|||
key: "sort", |
|||
formItemProps: { |
|||
rules: [{ required: true, message: "必填项" }], |
|||
}, |
|||
}, |
|||
{ |
|||
title: "操作", |
|||
hideInForm: true, |
|||
render: (_: any, record: any) => { |
|||
return ( |
|||
<Space> |
|||
<a onClick={() => openEditForm(record)}>编辑</a> |
|||
<a onClick={() => subDelect(record.id)}>删除</a> |
|||
</Space> |
|||
); |
|||
}, |
|||
}, |
|||
]; |
|||
|
|||
return ( |
|||
<> |
|||
<Modal |
|||
title="分组管理" |
|||
open={modalOpen} |
|||
onCancel={onCancel} |
|||
footer={null} |
|||
width={1000} |
|||
height={1000} |
|||
> |
|||
<Button |
|||
onClick={() => { |
|||
openCreateForm(); |
|||
}} |
|||
type="primary" |
|||
style={{ marginBottom: 16 }} |
|||
> |
|||
增加分组 |
|||
</Button> |
|||
<Table |
|||
columns={columns as []} |
|||
dataSource={dataSource} |
|||
bordered |
|||
scroll={{ x: 600, y: 600 }} |
|||
/> |
|||
</Modal> |
|||
|
|||
<Modal |
|||
title="添加" |
|||
open={createOpen} |
|||
onCancel={closeCreateForm} |
|||
footer={null} |
|||
> |
|||
<BetaSchemaForm |
|||
form={createForm} |
|||
layoutType="Form" |
|||
onFinish={handleAdd} |
|||
columns={columns as any[]} |
|||
submitter={{ |
|||
render: (props) => { |
|||
return [ |
|||
<Button |
|||
key="submit" |
|||
type="primary" |
|||
onClick={() => props.submit()} |
|||
> |
|||
提交 |
|||
</Button>, |
|||
<Button |
|||
key="cancel" |
|||
onClick={closeCreateForm} |
|||
style={{ marginLeft: 8 }} |
|||
> |
|||
取消 |
|||
</Button>, |
|||
]; |
|||
}, |
|||
}} |
|||
/> |
|||
</Modal> |
|||
<Modal |
|||
title="编辑" |
|||
open={editorOpen} |
|||
onCancel={closeEditForm} |
|||
footer={null} |
|||
> |
|||
<BetaSchemaForm |
|||
form={editForm} |
|||
layoutType="Form" |
|||
onFinish={subEdit} |
|||
columns={columns as any[]} |
|||
submitter={{ |
|||
render: (props) => { |
|||
return [ |
|||
<Button |
|||
key="submit" |
|||
type="primary" |
|||
onClick={() => props.submit()} |
|||
> |
|||
提交 |
|||
</Button>, |
|||
<Button |
|||
key="cancel" |
|||
onClick={closeEditForm} |
|||
style={{ marginLeft: 8 }} |
|||
> |
|||
取消 |
|||
</Button>, |
|||
]; |
|||
}, |
|||
}} |
|||
/> |
|||
</Modal> |
|||
</> |
|||
); |
|||
}; |
|||
|
|||
export default GroupManager; |
|||
@ -0,0 +1,31 @@ |
|||
import { atom } from "jotai"; |
|||
|
|||
interface UserInfo { |
|||
address: string; |
|||
} |
|||
|
|||
// 创建初始用户信息
|
|||
const initialUserInfo: UserInfo = { |
|||
address: "AAAAAAAAAAAAAAAAAAA", |
|||
}; |
|||
|
|||
// 用户信息 atom
|
|||
export const userInfoAtom = atom<UserInfo>(initialUserInfo); |
|||
|
|||
// 登录状态 atom
|
|||
export const isLoggedInAtom = atom<boolean>(false); |
|||
|
|||
// 派生的 atom，用于更新用户信息
|
|||
export const userInfoActionsAtom = atom( |
|||
(get) => get(userInfoAtom), |
|||
(get, set, updates: Partial<UserInfo>) => { |
|||
const currentInfo = get(userInfoAtom); |
|||
set(userInfoAtom, { ...currentInfo, ...updates }); |
|||
}, |
|||
); |
|||
|
|||
// 清除用户信息的 atom
|
|||
export const clearUserInfoAtom = atom(null, (get, set) => { |
|||
set(userInfoAtom, initialUserInfo); |
|||
set(isLoggedInAtom, false); |
|||
}); |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue