393 lines
9.0 KiB
Vue
393 lines
9.0 KiB
Vue
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
|
||
const activeTab = ref('wallet-creation')
|
||
</script>
|
||
|
||
<template>
|
||
<div class="tools-view">
|
||
<div class="page-header">
|
||
<h1 class="page-title">工具集合</h1>
|
||
<p class="page-description">一系列实用的加密货币工具，助您高效管理数字资产</p>
|
||
</div>
|
||
|
||
<div class="tools-tabs">
|
||
<button
|
||
class="tab-button"
|
||
:class="{ active: activeTab === 'wallet-creation' }"
|
||
@click="activeTab = 'wallet-creation'"
|
||
>
|
||
批量钱包创建
|
||
</button>
|
||
<button
|
||
class="tab-button"
|
||
:class="{ active: activeTab === 'wallet-collection' }"
|
||
@click="activeTab = 'wallet-collection'"
|
||
>
|
||
钱包归集
|
||
</button>
|
||
<button
|
||
class="tab-button"
|
||
:class="{ active: activeTab === 'other-tools' }"
|
||
@click="activeTab = 'other-tools'"
|
||
>
|
||
其他工具
|
||
</button>
|
||
</div>
|
||
|
||
<div class="tool-content card">
|
||
<!-- 批量钱包创建工具 -->
|
||
<div v-if="activeTab === 'wallet-creation'" class="tool-panel">
|
||
<h2 class="tool-title">批量钱包创建</h2>
|
||
<p class="tool-desc">批量创建以太坊兼容的钱包地址和私钥</p>
|
||
|
||
<div class="tool-form">
|
||
<div class="form-group">
|
||
<label>创建钱包数量</label>
|
||
<input
|
||
type="number"
|
||
class="form-input"
|
||
placeholder="输入需要创建的钱包数量"
|
||
min="1"
|
||
max="100"
|
||
value="10"
|
||
/>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>钱包类型</label>
|
||
<select class="form-select">
|
||
<option value="eth">以太坊 (ETH)</option>
|
||
<option value="bsc">币安智能链 (BSC)</option>
|
||
<option value="polygon">Polygon</option>
|
||
<option value="arbitrum">Arbitrum</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>导出格式</label>
|
||
<select class="form-select">
|
||
<option value="json">JSON</option>
|
||
<option value="csv">CSV</option>
|
||
<option value="txt">TXT</option>
|
||
</select>
|
||
</div>
|
||
|
||
<button class="btn btn-primary btn-block">开始创建</button>
|
||
</div>
|
||
|
||
<div class="results-preview">
|
||
<h3>预览结果</h3>
|
||
<div class="preview-content">
|
||
<p>暂无数据，请先创建钱包</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 钱包归集工具 -->
|
||
<div v-if="activeTab === 'wallet-collection'" class="tool-panel">
|
||
<h2 class="tool-title">钱包归集</h2>
|
||
<p class="tool-desc">将多个钱包中的资产归集到一个目标钱包</p>
|
||
|
||
<div class="tool-form">
|
||
<div class="form-group">
|
||
<label>目标钱包地址</label>
|
||
<input type="text" class="form-input" placeholder="输入归集目标钱包地址" />
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>源钱包私钥列表</label>
|
||
<textarea class="form-textarea" placeholder="每行输入一个私钥..."></textarea>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>网络</label>
|
||
<select class="form-select">
|
||
<option value="eth">以太坊 (ETH)</option>
|
||
<option value="bsc">币安智能链 (BSC)</option>
|
||
<option value="polygon">Polygon</option>
|
||
<option value="arbitrum">Arbitrum</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>GAS设置</label>
|
||
<div class="gas-settings">
|
||
<input type="text" class="form-input" placeholder="Gas Price (Gwei)" />
|
||
<input type="text" class="form-input" placeholder="Gas Limit" value="21000" />
|
||
</div>
|
||
</div>
|
||
|
||
<button class="btn btn-primary btn-block">开始归集</button>
|
||
</div>
|
||
|
||
<div class="results-preview">
|
||
<h3>归集状态</h3>
|
||
<div class="preview-content">
|
||
<p>暂无数据，请先开始归集</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 其他工具 -->
|
||
<div v-if="activeTab === 'other-tools'" class="tool-panel">
|
||
<h2 class="tool-title">其他工具</h2>
|
||
<p class="tool-desc">更多实用的加密货币工具</p>
|
||
|
||
<div class="tools-grid">
|
||
<div class="tool-card card">
|
||
<h3>Token授权查询</h3>
|
||
<p>查询并撤销钱包中的Token授权</p>
|
||
<button class="btn btn-secondary">使用工具</button>
|
||
</div>
|
||
|
||
<div class="tool-card card">
|
||
<h3>交易解码</h3>
|
||
<p>解码链上交易数据，了解交易详情</p>
|
||
<button class="btn btn-secondary">使用工具</button>
|
||
</div>
|
||
|
||
<div class="tool-card card">
|
||
<h3>Gas计算器</h3>
|
||
<p>计算不同网络的Gas费用</p>
|
||
<button class="btn btn-secondary">使用工具</button>
|
||
</div>
|
||
|
||
<div class="tool-card card">
|
||
<h3>Merkle Tree生成器</h3>
|
||
<p>为空投活动生成Merkle Tree</p>
|
||
<button class="btn btn-secondary">使用工具</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.tools-view {
|
||
width: 100%;
|
||
}
|
||
|
||
.page-header {
|
||
margin-bottom: 2rem;
|
||
width: 100%;
|
||
}
|
||
|
||
.page-title {
|
||
font-size: 2.2rem;
|
||
font-weight: 700;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.page-description {
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.tools-tabs {
|
||
display: flex;
|
||
gap: 1rem;
|
||
margin-bottom: 2rem;
|
||
background-color: var(--color-bg-secondary);
|
||
padding: 0.5rem;
|
||
border-radius: var(--border-radius);
|
||
width: 100%;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.tab-button {
|
||
background: transparent;
|
||
border: none;
|
||
color: var(--color-text-secondary);
|
||
padding: 0.8rem 1.5rem;
|
||
font-size: 1rem;
|
||
cursor: pointer;
|
||
border-radius: var(--border-radius);
|
||
transition: all 0.2s ease;
|
||
font-weight: 500;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.tab-button:hover {
|
||
color: var(--color-text-primary);
|
||
background-color: var(--color-bg-elevated);
|
||
}
|
||
|
||
.tab-button.active {
|
||
color: var(--color-text-primary);
|
||
background-color: var(--color-bg-card);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.tool-content {
|
||
background-color: var(--color-bg-card);
|
||
border: 1px solid var(--color-border);
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||
width: 100%;
|
||
}
|
||
|
||
.tool-panel {
|
||
padding: 2rem;
|
||
width: 100%;
|
||
}
|
||
|
||
.tool-title {
|
||
font-size: 1.5rem;
|
||
font-weight: 600;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.tool-desc {
|
||
color: var(--color-text-secondary);
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.tool-form {
|
||
margin-bottom: 2rem;
|
||
max-width: 800px;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.form-group label {
|
||
display: block;
|
||
margin-bottom: 0.5rem;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.form-input,
|
||
.form-select,
|
||
.form-textarea {
|
||
width: 100%;
|
||
padding: 0.8rem 1rem;
|
||
background-color: var(--color-bg-primary);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--border-radius);
|
||
color: var(--color-text-primary);
|
||
font-size: 1rem;
|
||
transition:
|
||
border-color 0.2s ease,
|
||
box-shadow 0.2s ease;
|
||
}
|
||
|
||
.form-input:focus,
|
||
.form-select:focus,
|
||
.form-textarea:focus {
|
||
border-color: var(--color-accent);
|
||
box-shadow: 0 0 0 2px var(--color-accent-light);
|
||
outline: none;
|
||
}
|
||
|
||
.form-textarea {
|
||
min-height: 120px;
|
||
resize: vertical;
|
||
}
|
||
|
||
.gas-settings {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.gas-settings .form-input {
|
||
flex: 1;
|
||
min-width: 200px;
|
||
}
|
||
|
||
.btn-block {
|
||
width: 100%;
|
||
}
|
||
|
||
.results-preview {
|
||
background-color: var(--color-bg-primary);
|
||
padding: 1.5rem;
|
||
border-radius: var(--border-radius);
|
||
border: 1px solid var(--color-border);
|
||
max-width: 800px;
|
||
}
|
||
|
||
.results-preview h3 {
|
||
margin-bottom: 1rem;
|
||
font-size: 1.2rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.preview-content {
|
||
color: var(--color-text-secondary);
|
||
min-height: 100px;
|
||
}
|
||
|
||
.tools-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 1.5rem;
|
||
width: 100%;
|
||
}
|
||
|
||
.tool-card {
|
||
flex: 1;
|
||
min-width: 280px;
|
||
background-color: var(--color-bg-primary);
|
||
padding: 1.5rem;
|
||
border: 1px solid var(--color-border);
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
height: 100%;
|
||
border-radius: var(--border-radius);
|
||
}
|
||
|
||
.tool-card:hover {
|
||
border-color: var(--color-accent);
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 7px 14px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.tool-card h3 {
|
||
font-size: 1.2rem;
|
||
margin-bottom: 0.5rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.tool-card p {
|
||
color: var(--color-text-secondary);
|
||
margin-bottom: 1.2rem;
|
||
font-size: 0.9rem;
|
||
flex-grow: 1;
|
||
}
|
||
|
||
@media (max-width: 980px) {
|
||
.tool-card {
|
||
min-width: calc(50% - 1rem);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.tools-tabs {
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.tab-button {
|
||
text-align: left;
|
||
border-radius: var(--border-radius);
|
||
}
|
||
|
||
.tool-card {
|
||
min-width: 100%;
|
||
}
|
||
|
||
.tool-panel {
|
||
padding: 1.5rem 1rem;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.page-title {
|
||
font-size: 1.8rem;
|
||
}
|
||
}
|
||
</style>
|