a
This commit is contained in:
薇薇安
parent
685e12220d
commit
84c1b2889f
|
|
@ -2,7 +2,7 @@
|
||||||
<html lang="zh-CN">
|
<html lang="zh-CN">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes" />
|
||||||
<title>自动交易系统</title>
|
<title>自动交易系统</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
|
|
@ -12,28 +12,64 @@
|
||||||
.nav-container {
|
.nav-container {
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 0 2rem;
|
padding: 0 1rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
flex-direction: column;
|
||||||
align-items: center;
|
gap: 0.75rem;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.nav-container {
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 2rem;
|
||||||
|
gap: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-title {
|
.nav-title {
|
||||||
font-size: 1.5rem;
|
font-size: 1.25rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.nav-title {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.nav-links {
|
.nav-links {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 2rem;
|
flex-wrap: wrap;
|
||||||
|
gap: 0.5rem;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.nav-links {
|
||||||
|
width: auto;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-links a {
|
.nav-links a {
|
||||||
color: white;
|
color: white;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
padding: 0.5rem 1rem;
|
padding: 0.5rem 0.75rem;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
transition: background-color 0.3s;
|
transition: background-color 0.3s;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
display: block;
|
||||||
|
touch-action: manipulation;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.nav-links a {
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-links a:hover {
|
.nav-links a:hover {
|
||||||
|
|
@ -42,6 +78,13 @@
|
||||||
|
|
||||||
.main-content {
|
.main-content {
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
margin: 2rem auto;
|
margin: 1rem auto;
|
||||||
padding: 0 2rem;
|
padding: 0 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.main-content {
|
||||||
|
margin: 2rem auto;
|
||||||
|
padding: 0 2rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,36 @@
|
||||||
.config-panel {
|
.config-panel {
|
||||||
background: white;
|
background: white;
|
||||||
padding: 2rem;
|
padding: 1rem;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.config-panel {
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.config-header {
|
.config-header {
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-top {
|
.header-top {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
flex-direction: column;
|
||||||
align-items: center;
|
gap: 0.75rem;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.header-top {
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.guide-link {
|
.guide-link {
|
||||||
color: #2196F3;
|
color: #2196F3;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
@ -33,18 +48,32 @@
|
||||||
|
|
||||||
.preset-section {
|
.preset-section {
|
||||||
background: #f8f9fa;
|
background: #f8f9fa;
|
||||||
padding: 1.5rem;
|
padding: 1rem;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
margin-top: 1.5rem;
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.preset-section {
|
||||||
|
padding: 1.5rem;
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.preset-header {
|
.preset-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
flex-direction: column;
|
||||||
align-items: center;
|
gap: 0.75rem;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
flex-wrap: wrap;
|
}
|
||||||
gap: 1rem;
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.preset-header {
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.preset-section h3 {
|
.preset-section h3 {
|
||||||
|
|
@ -87,13 +116,19 @@
|
||||||
|
|
||||||
.preset-buttons {
|
.preset-buttons {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 1rem;
|
flex-direction: column;
|
||||||
flex-wrap: wrap;
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.preset-buttons {
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.preset-btn {
|
.preset-btn {
|
||||||
flex: 1;
|
width: 100%;
|
||||||
min-width: 200px;
|
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border: 2px solid #dee2e6;
|
border: 2px solid #dee2e6;
|
||||||
background: white;
|
background: white;
|
||||||
|
|
@ -101,6 +136,14 @@
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
touch-action: manipulation;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.preset-btn {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 200px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.preset-btn:hover:not(:disabled) {
|
.preset-btn:hover:not(:disabled) {
|
||||||
|
|
@ -213,14 +256,98 @@
|
||||||
|
|
||||||
.config-grid {
|
.config-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
grid-template-columns: 1fr;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.config-grid {
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.config-item {
|
.config-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
|
padding: 1rem;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.config-item-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-btn {
|
||||||
|
padding: 0.25rem 0.75rem;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
background: #2196F3;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-btn:hover {
|
||||||
|
background: #1976D2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-btn:active {
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
.config-detail-popup {
|
||||||
|
background: white;
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 1px solid #dee2e6;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: #555;
|
||||||
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.config-input-wrapper {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.config-input-wrapper input {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-btn {
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
background: #4CAF50;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.3s;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-btn:hover:not(:disabled) {
|
||||||
|
background: #45a049;
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-btn:active:not(:disabled) {
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-btn:disabled {
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
.config-item label {
|
.config-item label {
|
||||||
|
|
@ -231,11 +358,21 @@
|
||||||
|
|
||||||
.config-item input,
|
.config-item input,
|
||||||
.config-item select {
|
.config-item select {
|
||||||
padding: 0.5rem;
|
padding: 0.75rem;
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #ddd;
|
||||||
border-radius: 4px;
|
border-radius: 6px;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
transition: border-color 0.3s, box-shadow 0.3s;
|
transition: border-color 0.3s, box-shadow 0.3s;
|
||||||
|
width: 100%;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.config-item input,
|
||||||
|
.config-item select {
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.config-item input:focus,
|
.config-item input:focus,
|
||||||
|
|
@ -270,7 +407,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.25rem;
|
gap: 0.25rem;
|
||||||
cursor: help;
|
margin-top: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.help-icon {
|
.help-icon {
|
||||||
|
|
@ -284,3 +421,36 @@
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
color: #666;
|
color: #666;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 移动端优化 */
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.config-item label {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.config-section h3 {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preset-btn {
|
||||||
|
min-height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guide-link {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
padding: 0.75rem;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.config-info {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
padding: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 确保按钮有足够的触摸区域 */
|
||||||
|
button, .help-btn, .save-btn {
|
||||||
|
min-height: 44px;
|
||||||
|
min-width: 44px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -246,6 +246,7 @@ const ConfigItem = ({ label, config, onUpdate, disabled }) => {
|
||||||
const [value, setValue] = useState(config.value)
|
const [value, setValue] = useState(config.value)
|
||||||
const [localValue, setLocalValue] = useState(config.value)
|
const [localValue, setLocalValue] = useState(config.value)
|
||||||
const [isEditing, setIsEditing] = useState(false)
|
const [isEditing, setIsEditing] = useState(false)
|
||||||
|
const [showDetail, setShowDetail] = useState(false)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setValue(config.value)
|
setValue(config.value)
|
||||||
|
|
@ -257,7 +258,7 @@ const ConfigItem = ({ label, config, onUpdate, disabled }) => {
|
||||||
setIsEditing(true)
|
setIsEditing(true)
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleBlur = () => {
|
const handleSave = () => {
|
||||||
setIsEditing(false)
|
setIsEditing(false)
|
||||||
if (localValue !== value) {
|
if (localValue !== value) {
|
||||||
// 值发生变化，保存
|
// 值发生变化，保存
|
||||||
|
|
@ -266,7 +267,7 @@ const ConfigItem = ({ label, config, onUpdate, disabled }) => {
|
||||||
finalValue = parseFloat(localValue) || 0
|
finalValue = parseFloat(localValue) || 0
|
||||||
// 百分比配置需要转换
|
// 百分比配置需要转换
|
||||||
if (label.includes('PERCENT')) {
|
if (label.includes('PERCENT')) {
|
||||||
finalValue = finalValue / 100
|
finalValue = finalValue
|
||||||
}
|
}
|
||||||
} else if (config.type === 'boolean') {
|
} else if (config.type === 'boolean') {
|
||||||
finalValue = localValue === 'true' || localValue === true
|
finalValue = localValue === 'true' || localValue === true
|
||||||
|
|
@ -275,9 +276,16 @@ const ConfigItem = ({ label, config, onUpdate, disabled }) => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const handleBlur = () => {
|
||||||
|
// 移动端不自动保存，需要点击保存按钮
|
||||||
|
if (window.innerWidth > 768) {
|
||||||
|
handleSave()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const handleKeyPress = (e) => {
|
const handleKeyPress = (e) => {
|
||||||
if (e.key === 'Enter') {
|
if (e.key === 'Enter') {
|
||||||
handleBlur()
|
handleSave()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -288,7 +296,23 @@ const ConfigItem = ({ label, config, onUpdate, disabled }) => {
|
||||||
if (config.type === 'boolean') {
|
if (config.type === 'boolean') {
|
||||||
return (
|
return (
|
||||||
<div className="config-item">
|
<div className="config-item">
|
||||||
<label>{label}</label>
|
<div className="config-item-header">
|
||||||
|
<label>{label}</label>
|
||||||
|
{config.description && (
|
||||||
|
<button
|
||||||
|
className="help-btn"
|
||||||
|
onClick={() => setShowDetail(!showDetail)}
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
{showDetail ? '收起' : '说明'}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{showDetail && (
|
||||||
|
<div className="config-detail-popup">
|
||||||
|
{getConfigDetail(label)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
<select
|
<select
|
||||||
value={localValue ? 'true' : 'false'}
|
value={localValue ? 'true' : 'false'}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
|
|
@ -302,9 +326,8 @@ const ConfigItem = ({ label, config, onUpdate, disabled }) => {
|
||||||
<option value="false">否</option>
|
<option value="false">否</option>
|
||||||
</select>
|
</select>
|
||||||
{config.description && (
|
{config.description && (
|
||||||
<span className="description" title={getConfigDetail(label)}>
|
<span className="description">
|
||||||
{config.description}
|
{config.description}
|
||||||
<span className="help-icon" title="悬停查看详细说明">ℹ️</span>
|
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -315,7 +338,23 @@ const ConfigItem = ({ label, config, onUpdate, disabled }) => {
|
||||||
const options = ['1m', '3m', '5m', '15m', '30m', '1h', '2h', '4h', '1d']
|
const options = ['1m', '3m', '5m', '15m', '30m', '1h', '2h', '4h', '1d']
|
||||||
return (
|
return (
|
||||||
<div className="config-item">
|
<div className="config-item">
|
||||||
<label>{label}</label>
|
<div className="config-item-header">
|
||||||
|
<label>{label}</label>
|
||||||
|
{config.description && (
|
||||||
|
<button
|
||||||
|
className="help-btn"
|
||||||
|
onClick={() => setShowDetail(!showDetail)}
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
{showDetail ? '收起' : '说明'}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{showDetail && (
|
||||||
|
<div className="config-detail-popup">
|
||||||
|
{getConfigDetail(label)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
<select
|
<select
|
||||||
value={localValue}
|
value={localValue}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
|
|
@ -330,9 +369,8 @@ const ConfigItem = ({ label, config, onUpdate, disabled }) => {
|
||||||
))}
|
))}
|
||||||
</select>
|
</select>
|
||||||
{config.description && (
|
{config.description && (
|
||||||
<span className="description" title={getConfigDetail(label)}>
|
<span className="description">
|
||||||
{config.description}
|
{config.description}
|
||||||
<span className="help-icon" title="悬停查看详细说明">ℹ️</span>
|
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -341,27 +379,54 @@ const ConfigItem = ({ label, config, onUpdate, disabled }) => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="config-item">
|
<div className="config-item">
|
||||||
<label>{label}</label>
|
<div className="config-item-header">
|
||||||
<input
|
<label>{label}</label>
|
||||||
type={config.type === 'number' ? 'number' : 'text'}
|
{config.description && (
|
||||||
value={label.includes('PERCENT') ? displayValue : localValue}
|
<button
|
||||||
onChange={(e) => {
|
className="help-btn"
|
||||||
const newValue = config.type === 'number' && label.includes('PERCENT')
|
onClick={() => setShowDetail(!showDetail)}
|
||||||
? parseFloat(e.target.value) / 100
|
type="button"
|
||||||
: e.target.value
|
>
|
||||||
handleChange(newValue)
|
{showDetail ? '收起' : '说明'}
|
||||||
}}
|
</button>
|
||||||
onBlur={handleBlur}
|
)}
|
||||||
onKeyPress={handleKeyPress}
|
</div>
|
||||||
disabled={disabled}
|
{showDetail && (
|
||||||
step={config.type === 'number' ? '0.01' : undefined}
|
<div className="config-detail-popup">
|
||||||
className={isEditing ? 'editing' : ''}
|
{getConfigDetail(label)}
|
||||||
/>
|
</div>
|
||||||
{isEditing && <span className="edit-hint">按Enter保存</span>}
|
)}
|
||||||
|
<div className="config-input-wrapper">
|
||||||
|
<input
|
||||||
|
type={config.type === 'number' ? 'number' : 'text'}
|
||||||
|
value={label.includes('PERCENT') ? displayValue : localValue}
|
||||||
|
onChange={(e) => {
|
||||||
|
const newValue = config.type === 'number' && label.includes('PERCENT')
|
||||||
|
? parseFloat(e.target.value) / 100
|
||||||
|
: e.target.value
|
||||||
|
handleChange(newValue)
|
||||||
|
}}
|
||||||
|
onBlur={handleBlur}
|
||||||
|
onKeyPress={handleKeyPress}
|
||||||
|
disabled={disabled}
|
||||||
|
step={config.type === 'number' ? '0.01' : undefined}
|
||||||
|
className={isEditing ? 'editing' : ''}
|
||||||
|
/>
|
||||||
|
{isEditing && (
|
||||||
|
<button
|
||||||
|
className="save-btn"
|
||||||
|
onClick={handleSave}
|
||||||
|
disabled={disabled}
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
保存
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{isEditing && window.innerWidth > 768 && <span className="edit-hint">按Enter保存</span>}
|
||||||
{config.description && (
|
{config.description && (
|
||||||
<span className="description" title={getConfigDetail(label)}>
|
<span className="description">
|
||||||
{config.description}
|
{config.description}
|
||||||
<span className="help-icon" title="悬停查看详细说明">ℹ️</span>
|
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,27 +1,54 @@
|
||||||
.dashboard {
|
.dashboard {
|
||||||
background: white;
|
background: white;
|
||||||
padding: 2rem;
|
padding: 1rem;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.dashboard {
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.dashboard h2 {
|
.dashboard h2 {
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 1rem;
|
||||||
color: #2c3e50;
|
color: #2c3e50;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.dashboard h2 {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard-grid {
|
.dashboard-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
grid-template-columns: 1fr;
|
||||||
gap: 2rem;
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.dashboard-grid {
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard-card {
|
.dashboard-card {
|
||||||
background: #f8f9fa;
|
background: #f8f9fa;
|
||||||
padding: 1.5rem;
|
padding: 1rem;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.dashboard-card {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.dashboard-card h3 {
|
.dashboard-card h3 {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
color: #34495e;
|
color: #34495e;
|
||||||
|
|
@ -36,10 +63,17 @@
|
||||||
.info-item {
|
.info-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 0.5rem 0;
|
align-items: center;
|
||||||
|
padding: 0.75rem 0;
|
||||||
border-bottom: 1px solid #dee2e6;
|
border-bottom: 1px solid #dee2e6;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.info-item {
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.info-item:last-child {
|
.info-item:last-child {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
|
|
@ -47,11 +81,26 @@
|
||||||
.info-item .label {
|
.info-item .label {
|
||||||
color: #666;
|
color: #666;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.info-item .label {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-item .value {
|
.info-item .value {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #2c3e50;
|
color: #2c3e50;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.info-item .value {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-item .value.positive {
|
.info-item .value.positive {
|
||||||
|
|
@ -70,26 +119,52 @@
|
||||||
|
|
||||||
.trade-item {
|
.trade-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
flex-direction: column;
|
||||||
align-items: center;
|
padding: 1rem;
|
||||||
padding: 0.75rem;
|
|
||||||
background: white;
|
background: white;
|
||||||
border-radius: 4px;
|
border-radius: 8px;
|
||||||
gap: 1rem;
|
gap: 0.75rem;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
border: 1px solid #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.trade-item {
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.trade-info {
|
.trade-info {
|
||||||
display: flex;
|
display: grid;
|
||||||
flex-direction: column;
|
grid-template-columns: repeat(2, 1fr);
|
||||||
gap: 0.25rem;
|
gap: 0.5rem;
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
color: #666;
|
color: #666;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.trade-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.trade-symbol {
|
.trade-symbol {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #2c3e50;
|
color: #2c3e50;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.trade-symbol {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.trade-side {
|
.trade-side {
|
||||||
|
|
@ -111,6 +186,19 @@
|
||||||
|
|
||||||
.trade-pnl {
|
.trade-pnl {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
font-size: 1rem;
|
||||||
|
text-align: right;
|
||||||
|
padding: 0.5rem;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.trade-pnl {
|
||||||
|
background: transparent;
|
||||||
|
padding: 0;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.loading {
|
.loading {
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,47 @@
|
||||||
.trade-list {
|
.trade-list {
|
||||||
background: white;
|
background: white;
|
||||||
padding: 2rem;
|
padding: 1rem;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.trade-list {
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.trade-list h2 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.trade-list h2 {
|
||||||
|
font-size: 2rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.filter-panel {
|
.filter-panel {
|
||||||
background: #f8f9fa;
|
background: #f8f9fa;
|
||||||
padding: 1.5rem;
|
padding: 1rem;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 1rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-direction: column;
|
||||||
gap: 1.5rem;
|
gap: 1rem;
|
||||||
align-items: flex-end;
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.filter-panel {
|
||||||
|
padding: 1.5rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 1.5rem;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-section {
|
.filter-section {
|
||||||
|
|
@ -32,19 +60,35 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.period-buttons {
|
.period-buttons {
|
||||||
display: flex;
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
flex-wrap: wrap;
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.period-buttons {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.period-buttons button {
|
.period-buttons button {
|
||||||
padding: 0.5rem 1rem;
|
padding: 0.75rem 1rem;
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #ddd;
|
||||||
background: white;
|
background: white;
|
||||||
border-radius: 4px;
|
border-radius: 6px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
|
touch-action: manipulation;
|
||||||
|
min-height: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.period-buttons button {
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
min-height: auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.period-buttons button:hover {
|
.period-buttons button:hover {
|
||||||
|
|
@ -60,15 +104,30 @@
|
||||||
|
|
||||||
.date-inputs {
|
.date-inputs {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
flex-direction: column;
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.date-inputs {
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.date-inputs input[type="date"] {
|
.date-inputs input[type="date"] {
|
||||||
padding: 0.5rem;
|
padding: 0.75rem;
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #ddd;
|
||||||
border-radius: 4px;
|
border-radius: 6px;
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.date-inputs input[type="date"] {
|
||||||
|
padding: 0.5rem;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.date-inputs span {
|
.date-inputs span {
|
||||||
|
|
@ -78,27 +137,57 @@
|
||||||
|
|
||||||
.filter-section input[type="text"],
|
.filter-section input[type="text"],
|
||||||
.filter-section select {
|
.filter-section select {
|
||||||
padding: 0.5rem;
|
padding: 0.75rem;
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #ddd;
|
||||||
border-radius: 4px;
|
border-radius: 6px;
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
|
width: 100%;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.filter-section input[type="text"],
|
||||||
|
.filter-section select {
|
||||||
|
padding: 0.5rem;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-actions {
|
.filter-actions {
|
||||||
display: flex;
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
margin-left: auto;
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.filter-actions {
|
||||||
|
display: flex;
|
||||||
|
margin-left: auto;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary,
|
.btn-primary,
|
||||||
.btn-secondary {
|
.btn-secondary {
|
||||||
padding: 0.5rem 1.5rem;
|
padding: 0.75rem 1.5rem;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 4px;
|
border-radius: 6px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
|
touch-action: manipulation;
|
||||||
|
min-height: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.btn-primary,
|
||||||
|
.btn-secondary {
|
||||||
|
padding: 0.5rem 1.5rem;
|
||||||
|
min-height: auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary {
|
.btn-primary {
|
||||||
|
|
@ -128,9 +217,17 @@
|
||||||
|
|
||||||
.stats-summary {
|
.stats-summary {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
grid-template-columns: repeat(2, 1fr);
|
||||||
gap: 1rem;
|
gap: 0.75rem;
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.stats-summary {
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-card {
|
.stat-card {
|
||||||
|
|
@ -164,6 +261,13 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.trades-table {
|
||||||
|
display: table;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.trades-table th {
|
.trades-table th {
|
||||||
|
|
@ -172,17 +276,104 @@
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
font-size: 0.9rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.trades-table td {
|
.trades-table td {
|
||||||
padding: 0.75rem 1rem;
|
padding: 0.75rem 1rem;
|
||||||
border-bottom: 1px solid #eee;
|
border-bottom: 1px solid #eee;
|
||||||
|
font-size: 0.9rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.trades-table tr:hover {
|
.trades-table tr:hover {
|
||||||
background-color: #f8f9fa;
|
background-color: #f8f9fa;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 移动端卡片式布局 */
|
||||||
|
.trades-cards {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.trades-cards {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.trade-card {
|
||||||
|
background: #f8f9fa;
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trade-card-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
padding-bottom: 0.75rem;
|
||||||
|
border-bottom: 1px solid #dee2e6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trade-card-symbol {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: #2c3e50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trade-card-side {
|
||||||
|
padding: 0.25rem 0.75rem;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trade-card-side.buy {
|
||||||
|
background-color: #d4edda;
|
||||||
|
color: #155724;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trade-card-side.sell {
|
||||||
|
background-color: #f8d7da;
|
||||||
|
color: #721c24;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trade-card-body {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 0.75rem;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trade-card-field {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trade-card-label {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trade-card-value {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #2c3e50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trade-card-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 0.75rem;
|
||||||
|
border-top: 1px solid #dee2e6;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
.buy {
|
.buy {
|
||||||
color: #27ae60;
|
color: #27ae60;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
|
||||||
|
|
@ -204,38 +204,81 @@ const TradeList = () => {
|
||||||
{trades.length === 0 ? (
|
{trades.length === 0 ? (
|
||||||
<div className="no-data">暂无交易记录</div>
|
<div className="no-data">暂无交易记录</div>
|
||||||
) : (
|
) : (
|
||||||
<table className="trades-table">
|
<>
|
||||||
<thead>
|
{/* 桌面端表格 */}
|
||||||
<tr>
|
<table className="trades-table">
|
||||||
<th>交易对</th>
|
<thead>
|
||||||
<th>方向</th>
|
<tr>
|
||||||
<th>数量</th>
|
<th>交易对</th>
|
||||||
<th>入场价</th>
|
<th>方向</th>
|
||||||
<th>出场价</th>
|
<th>数量</th>
|
||||||
<th>盈亏</th>
|
<th>入场价</th>
|
||||||
<th>状态</th>
|
<th>出场价</th>
|
||||||
<th>时间</th>
|
<th>盈亏</th>
|
||||||
</tr>
|
<th>状态</th>
|
||||||
</thead>
|
<th>时间</th>
|
||||||
<tbody>
|
|
||||||
{trades.map(trade => (
|
|
||||||
<tr key={trade.id}>
|
|
||||||
<td>{trade.symbol}</td>
|
|
||||||
<td className={trade.side === 'BUY' ? 'buy' : 'sell'}>{trade.side}</td>
|
|
||||||
<td>{parseFloat(trade.quantity).toFixed(4)}</td>
|
|
||||||
<td>{parseFloat(trade.entry_price).toFixed(4)}</td>
|
|
||||||
<td>{trade.exit_price ? parseFloat(trade.exit_price).toFixed(4) : '-'}</td>
|
|
||||||
<td className={parseFloat(trade.pnl) >= 0 ? 'positive' : 'negative'}>
|
|
||||||
{parseFloat(trade.pnl).toFixed(2)} USDT
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<span className={`status ${trade.status}`}>{trade.status}</span>
|
|
||||||
</td>
|
|
||||||
<td>{new Date(trade.entry_time).toLocaleString('zh-CN')}</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{trades.map(trade => (
|
||||||
|
<tr key={trade.id}>
|
||||||
|
<td>{trade.symbol}</td>
|
||||||
|
<td className={trade.side === 'BUY' ? 'buy' : 'sell'}>{trade.side}</td>
|
||||||
|
<td>{parseFloat(trade.quantity).toFixed(4)}</td>
|
||||||
|
<td>{parseFloat(trade.entry_price).toFixed(4)}</td>
|
||||||
|
<td>{trade.exit_price ? parseFloat(trade.exit_price).toFixed(4) : '-'}</td>
|
||||||
|
<td className={parseFloat(trade.pnl) >= 0 ? 'positive' : 'negative'}>
|
||||||
|
{parseFloat(trade.pnl).toFixed(2)} USDT
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span className={`status ${trade.status}`}>{trade.status}</span>
|
||||||
|
</td>
|
||||||
|
<td>{new Date(trade.entry_time).toLocaleString('zh-CN')}</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
{/* 移动端卡片 */}
|
||||||
|
<div className="trades-cards">
|
||||||
|
{trades.map(trade => (
|
||||||
|
<div key={trade.id} className="trade-card">
|
||||||
|
<div className="trade-card-header">
|
||||||
|
<span className="trade-card-symbol">{trade.symbol}</span>
|
||||||
|
<span className={`trade-card-side ${trade.side === 'BUY' ? 'buy' : 'sell'} status ${trade.status}`}>
|
||||||
|
{trade.side === 'BUY' ? '买入' : '卖出'} · {trade.status === 'open' ? '持仓中' : trade.status === 'closed' ? '已平仓' : '已取消'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="trade-card-body">
|
||||||
|
<div className="trade-card-field">
|
||||||
|
<span className="trade-card-label">数量</span>
|
||||||
|
<span className="trade-card-value">{parseFloat(trade.quantity).toFixed(4)}</span>
|
||||||
|
</div>
|
||||||
|
<div className="trade-card-field">
|
||||||
|
<span className="trade-card-label">入场价</span>
|
||||||
|
<span className="trade-card-value">{parseFloat(trade.entry_price).toFixed(4)}</span>
|
||||||
|
</div>
|
||||||
|
<div className="trade-card-field">
|
||||||
|
<span className="trade-card-label">出场价</span>
|
||||||
|
<span className="trade-card-value">{trade.exit_price ? parseFloat(trade.exit_price).toFixed(4) : '-'}</span>
|
||||||
|
</div>
|
||||||
|
<div className="trade-card-field">
|
||||||
|
<span className="trade-card-label">盈亏</span>
|
||||||
|
<span className={`trade-card-value ${parseFloat(trade.pnl) >= 0 ? 'positive' : 'negative'}`}>
|
||||||
|
{parseFloat(trade.pnl).toFixed(2)} USDT
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="trade-card-footer">
|
||||||
|
<span>{new Date(trade.entry_time).toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })}</span>
|
||||||
|
{trade.exit_time && (
|
||||||
|
<span>平仓: {new Date(trade.exit_time).toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
))}
|
))}
|
||||||
</tbody>
|
</div>
|
||||||
</table>
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,20 @@ body {
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
background-color: #f5f5f5;
|
background-color: #f5f5f5;
|
||||||
|
/* 移动端优化 */
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
touch-action: manipulation;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 移动端全局样式优化 */
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
* {
|
||||||
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
input, select, textarea, button {
|
||||||
|
font-size: 16px; /* 防止iOS自动缩放 */
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
code {
|
code {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user