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

8
src/theme/variables.css
View File

@@ -38,8 +38,8 @@ html.ion-palette-light {
--ion-color-danger: #ff3344;
--ion-color-danger-rgb: 255, 51, 68;
--ion-color-danger-contrast: #000000;
--ion-color-danger-contrast-rgb: 0, 0, 0;
--ion-color-danger-contrast: #ffffff;
--ion-color-danger-contrast-rgb: 255, 255, 255;
--ion-color-danger-shade: #e02d3c;
--ion-color-danger-tint: #ff4757;
@@ -110,6 +110,8 @@ html.ion-palette-light {
--ion-background-color-step-900: #191919;
--ion-background-color-step-950: #0d0d0d;
--ion-color-faint: #f8fafb;
--ion-font-family:
-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
"Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -186,4 +188,6 @@ html.ion-palette-dark {
--ui-input-background: #1e1e1e;
--ui-input-color: #ffffff;
--ion-color-faint: #626262;
}

17
src/ui/tag/index.vue
View File

@@ -1,13 +1,13 @@
<script lang='ts' setup>
const { type = "primary", size = "medium", round = false } = defineProps<{
type?: "primary" | "secondary" | "tertiary" | "success" | "warning" | "danger";
size?: "small" | "medium" | "large";
size?: "mini" | "small" | "medium" | "large";
round?: boolean;
}>();
</script>
<template>
<div class="ui-tag rounded-md inline-block" :class="[type, size, { 'rounded-full': round }]">
<div class="ui-tag" :class="[type, size, { 'rounded-full': round }]">
<slot />
</div>
</template>
@@ -16,7 +16,7 @@ const { type = "primary", size = "medium", round = false } = defineProps<{
@reference "tailwindcss";
.ui-tag {
@apply px-3 py-1 text-xs;
@apply px-3 py-1 text-xs rounded-md inline-block;
}
.ui-tag.primary {
@apply bg-(--ion-color-dark) text-white;
@@ -25,7 +25,7 @@ const { type = "primary", size = "medium", round = false } = defineProps<{
@apply bg-(--ion-color-medium-shade) text-white;
}
.ui-tag.tertiary {
@apply bg-(--ion-color-medium-tint) text-white;
@apply bg-(--ion-color-light-shade) text-black;
}
.ui-tag.success {
@apply bg-(--ion-color-success) text-white;
@@ -36,13 +36,16 @@ const { type = "primary", size = "medium", round = false } = defineProps<{
.ui-tag.danger {
@apply bg-(--ion-color-danger) text-white;
}
.ui-tag.mini {
@apply text-[10px] px-1 py-0.5 rounded-sm;
}
.ui-tag.small {
@apply text-xs px-2 py-0.5;
@apply text-xs px-2 py-0.5 rounded-sm;
}
.ui-tag.medium {
@apply text-sm px-3 py-1;
@apply text-sm px-3 py-1 rounded-md;
}
.ui-tag.large {
@apply text-base px-4 py-2;
@apply text-base px-4 py-2 rounded-md;
}
</style>

6
src/views/trade/components/orders-panel.vue
View File

@@ -120,7 +120,7 @@ async function cancelOrder(orderId: string) {
<template>
<div class="orders-panel">
<!-- Tab切换 -->
<ui-tabs v-model="activeTab" size="small" class="px-4">
<ui-tabs v-model="activeTab" size="small">
<ui-tab-pane
title="当前委托"
name="current"
@@ -239,10 +239,6 @@ async function cancelOrder(orderId: string) {
padding: 40px 20px;
}
.orders-content {
padding: 12px;
}
.order-item {
background: var(--ion-color-light);
border-radius: 12px;

35
src/views/trade/components/trade-switch.vue Normal file
View File

@@ -0,0 +1,35 @@
<script lang='ts' setup>
import type { PropType } from "vue";
type Active = "buy" | "sell";
const active = defineModel<Active>("active", { type: String as PropType<Active>, default: "buy" });
</script>
<template>
<div class="container">
<div class="btn" :class="[active === 'buy' && 'buy']" @click="active = 'buy'">
买入
</div>
<div class="btn" :class="[active === 'sell' && 'sell']" @click="active = 'sell'">
卖出
</div>
</div>
</template>
<style lang='css' scoped>
@reference "tailwindcss";
.container {
@apply flex rounded-full overflow-hidden p-0.5 bg-(--ion-color-faint);
}
.btn {
@apply flex-1 text-center py-0.5 cursor-pointer select-none text-sm font-medium rounded-full transition-all text-(--ion-text-color-step-550);
}
.btn.buy {
@apply bg-(--ion-color-success-tint) text-white;
}
.btn.sell {
@apply bg-(--ion-color-danger-tint) text-white;
}
</style>

19
src/views/trade/components/trade-way.vue Normal file
View File

@@ -0,0 +1,19 @@
<script lang='ts' setup>
import { caretDownOutline } from "ionicons/icons";
</script>
<template>
<div class="bg-faint flex items-center justify-between px-4 py-2 rounded-md">
<div class="text-xs font-medium text-text-300">
市场
</div>
<ion-icon :icon="caretDownOutline" />
</div>
<div class="bg-faint flex items-center justify-between px-4 py-2 rounded-md">
<div class="text-xs font-medium text-text-400">
市场价格
</div>
</div>
</template>
<style lang='css' scoped></style>

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>