root/riwa-ionic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加 IonRange 组件类型声明；更新 CSS 变量以优化样式；重构交易界面，添加交易切换和市场信息组件

Browse Source
This commit is contained in:
Seven
2025-12-29 16:58:32 +07:00
parent e0d64261e1
commit 7f10d4f4e4
8 changed files with 141 additions and 294 deletions
Download Patch File Download Diff File Expand all files Collapse all files

347
src/views/trade/index.vue
View File

@@ -1,302 +1,89 @@
<script setup lang="ts">
import type { VolumeData } from "@/composables/useTradingView";
import OrderBook from "./components/order-book.vue";
import { caretDownOutline, ellipsisHorizontal } from "ionicons/icons";
import MaterialSymbolsCandlestickChartOutline from "~icons/material-symbols/candlestick-chart-outline";
import OrdersPanel from "./components/orders-panel.vue";
import TradeForm from "./components/trade-form.vue";
import TradingPairHeader from "./components/trading-pair-header.vue";
import TradeSwitch from "./components/trade-switch.vue";
import TradeWay from "./components/trade-way.vue";
const tradingViewContainer = useTemplateRef<HTMLElement>("tradingViewContainer");
const tradeAction = ref<"buy" | "sell">("buy");
// 时间周期选项
const timeIntervals = [
{ label: "分时", value: "1m" },
{ label: "1分", value: "1m" },
{ label: "5分", value: "5m" },
{ label: "15分", value: "15m" },
{ label: "30分", value: "30m" },
{ label: "1时", value: "1h" },
{ label: "4时", value: "4h" },
{ label: "日线", value: "1d" },
{ label: "周线", value: "1w" },
];
const selectedInterval = ref("15m");
// 技术指标选项
const indicators = [
{ label: "MA", value: "ma" },
{ label: "EMA", value: "ema" },
{ label: "BOLL", value: "boll" },
{ label: "SAR", value: "sar" },
];
const selectedIndicator = ref("");
const showIndicatorMenu = ref(false);
// K线数据和成交量数据
// TODO: 后续从API获取K线数据
const klineData = ref([
{ time: "2024-01-01", open: 42000, high: 43100, low: 41800, close: 42500 },
{ time: "2024-01-02", open: 42500, high: 43500, low: 42200, close: 43000 },
{ time: "2024-01-03", open: 43000, high: 44200, low: 42800, close: 43800 },
{ time: "2024-01-04", open: 43800, high: 44500, low: 43500, close: 44200 },
{ time: "2024-01-05", open: 44200, high: 44800, low: 43900, close: 44500 },
{ time: "2024-01-06", open: 44500, high: 45000, low: 44200, close: 44800 },
{ time: "2024-01-07", open: 44800, high: 45500, low: 44500, close: 45250 },
{ time: "2024-01-08", open: 45250, high: 46000, low: 45100, close: 45800 },
{ time: "2024-01-09", open: 45800, high: 46200, low: 45500, close: 45600 },
{ time: "2024-01-10", open: 45600, high: 45900, low: 45200, close: 45400 },
{ time: "2024-01-11", open: 45400, high: 45800, low: 44900, close: 45100 },
{ time: "2024-01-12", open: 45100, high: 45500, low: 44700, close: 45200 },
{ time: "2024-01-13", open: 45200, high: 45800, low: 45000, close: 45600 },
{ time: "2024-01-14", open: 45600, high: 46500, low: 45500, close: 46300 },
{ time: "2024-01-15", open: 46300, high: 47000, low: 46200, close: 46800 },
]);
// 成交量数据（与K线对应）
const volumeData = computed<VolumeData[]>(() => {
return klineData.value.map((item, index) => {
const prevClose = index > 0 ? klineData.value[index - 1].close : item.open;
const isUp = item.close >= prevClose;
return {
time: item.time,
value: Math.random() * 1000000 + 500000, // 模拟成交量
color: isUp ? "rgba(38, 166, 154, 0.5)" : "rgba(239, 83, 80, 0.5)",
};
});
});
useTradingView(tradingViewContainer, {
data: klineData,
volumeData,
showVolume: true,
weightChartOptions: {
height: 200,
layout: {
textColor: "#d1d4dc",
fontSize: 12,
},
rightPriceScale: {
borderVisible: false,
},
},
});
const mode = ref<"buy" | "sell">("buy");
</script>
<template>
<ion-page>
<ion-header class="ion-no-border">
<ion-header>
<ion-toolbar class="ui-toolbar">
<ion-title>交易</ion-title>
<div slot="start" class="flex items-center gap-1 px-4">
<div class="text-md font-bold">
BTC/USDT
</div>
<ui-tag size="mini" type="tertiary">
现货
</ui-tag>
<ion-icon :icon="caretDownOutline" />
</div>
<ion-buttons slot="end">
<ion-button>
<MaterialSymbolsCandlestickChartOutline class="text-xl" />
</ion-button>
<ion-button>
<ion-icon :icon="ellipsisHorizontal" />
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true">
<!-- 交易对头部信息 -->
<TradingPairHeader />
<!-- K线图表 -->
<div ref="tradingViewContainer" class="chart-container" />
<!-- 订单簿 -->
<div class="order-book-section">
<OrderBook />
<ion-content :fullscreen="true" class="ion-padding">
<div class="grid grid-cols-5">
<div class="col-span-3 space-y-2">
<TradeSwitch v-model:active="mode" />
<TradeWay />
<ion-input label="金额" class="count" inputmode="decimal" type="number" placeholder="请输入交易金额">
<span slot="end">USDT</span>
</ion-input>
<ion-range class="range" aria-label="Range with ticks" :pin="true" :ticks="true" :snaps="true" :min="0" :max="5" />
<ion-button expand="block" size="small" shape="round" :color="mode === 'buy' ? 'success' : 'danger'">
{{ mode === 'buy' ? '买入' : '卖出' }}
</ion-button>
</div>
<div class="col-span-2" />
</div>
<!-- 买卖切换 -->
<div class="trade-action-tabs">
<button
:class="{ active: tradeAction === 'buy' }"
class="buy-tab"
@click="tradeAction = 'buy'"
>
买入
</button>
<button
:class="{ active: tradeAction === 'sell' }"
class="sell-tab"
@click="tradeAction = 'sell'"
>
卖出
</button>
</div>
<!-- 交易表单 -->
<TradeForm :action="tradeAction" />
<!-- 当前委托和历史记录 -->
<div class="orders-section">
<div class="mt-6">
<OrdersPanel />
</div>
</ion-content>
</ion-page>
</template>
<style scoped>
.chart-controls {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
background: var(--ion-background-color);
border-bottom: 1px solid var(--ion-border-color);
gap: 12px;
<style lang="css" scoped>
@reference "tailwindcss";
ion-input.count {
--background: var(--ion-color-faint);
--padding-start: 16px;
--padding-end: 16px;
--padding-top: 4px;
--padding-bottom: 4px;
--border-radius: 6px;
font-size: 12px;
min-height: 40px;
}
.interval-selector {
display: flex;
gap: 4px;
flex: 1;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
ion-range.range {
--bar-height: 3px;
--knob-size: 14px;
--pin-color: #fff;
--bar-background-active: #3e3e3e;
--bar-background: rgb(226, 226, 226);
padding: 0 8px;
}
.interval-selector::-webkit-scrollbar {
display: none;
ion-range.range::part(tick) {
z-index: 1;
border-radius: 100%;
background: #dcdcdc;
}
.interval-btn {
padding: 6px 12px;
border: none;
background: transparent;
color: var(--ion-text-color-step-400);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
border-radius: 4px;
white-space: nowrap;
flex-shrink: 0;
}
.interval-btn.active {
background: var(--ion-color-primary);
color: white;
}
.interval-btn:hover {
background: var(--ion-color-light);
}
.indicator-selector {
position: relative;
}
.indicator-btn {
display: flex;
align-items: center;
gap: 4px;
padding: 6px 12px;
border: 1px solid var(--ion-border-color);
background: var(--ion-background-color);
color: var(--ion-text-color);
font-size: 13px;
font-weight: 500;
cursor: pointer;
border-radius: 4px;
transition: all 0.2s;
}
.indicator-btn:hover {
background: var(--ion-color-light);
}
.indicator-menu {
position: absolute;
top: calc(100% + 4px);
right: 0;
background: var(--ion-background-color);
border: 1px solid var(--ion-border-color);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 100;
min-width: 120px;
overflow: hidden;
}
.indicator-item {
display: block;
width: 100%;
padding: 10px 16px;
border: none;
background: transparent;
color: var(--ion-text-color);
font-size: 14px;
font-weight: 500;
cursor: pointer;
text-align: left;
transition: all 0.2s;
}
.indicator-item:hover {
background: var(--ion-color-light);
}
.indicator-item.active {
color: var(--ion-color-primary);
background: var(--ion-color-primary-tint);
}
.chart-container {
height: 200px;
width: 100%;
background: var(--ion-background-color);
}
.order-book-section {
margin: 16px 0;
}
.trade-action-tabs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
padding: 0 16px;
margin-bottom: 8px;
}
.trade-action-tabs button {
padding: 12px 0;
border: none;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
background: var(--ion-color-light);
color: var(--ion-text-color);
}
.trade-action-tabs .buy-tab {
border-radius: 8px 0 0 8px;
}
.trade-action-tabs .sell-tab {
border-radius: 0 8px 8px 0;
}
.trade-action-tabs button.active.buy-tab {
background: var(--ion-color-success);
color: white;
}
.trade-action-tabs button.active.sell-tab {
background: var(--ion-color-danger);
color: white;
}
.orders-section {
margin-top: 16px;
min-height: 300px;
}
/* 深色模式优化 */
@media (prefers-color-scheme: dark) {
.chart-container {
background: #1a1a1a;
}
.indicator-menu {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
ion-range.range::part(tick),
ion-range.range::part(tick-active) {
height: 6px;
width: 6px;
top: 18px;
border-radius: 100%;
}
</style>