Ivan/xtraderClient
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化：UI调整

Browse Source
This commit is contained in:
ivan 2026-02-14 17:52:48 +08:00
parent 2174abc9d3
commit c0c423b46a
4 changed files with 172 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/OrderBook.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<v-card class="order-book"> <v-card class="order-book" elevation="0">
<!-- Header --> <!-- Header -->
<div class="order-book-header"> <div class="order-book-header">
<h3 class="order-book-title">Order Book</h3> <h3 class="order-book-title">Order Book</h3>
@ -198,7 +198,8 @@ const maxBidsTotal = computed(() => {
width: 100%; width: 100%;
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); box-shadow: none;
border: 1px solid #e7e7e7;
} }
.horizontal-progress-bar { .horizontal-progress-bar {

195
src/components/TradeComponent.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<!-- 桌面端：完整交易卡片 --> <!-- 桌面端：完整交易卡片（扁平化） -->
<v-card v-if="!mobile" class="trade-component"> <v-card v-if="!mobile" class="trade-component" elevation="0">
<!-- Header --> <!-- Header -->
<div class="header"> <div class="header">
<v-tabs v-model="activeTab" class="buy-sell-tabs minimal-tabs" density="compact"> <v-tabs v-model="activeTab" class="buy-sell-tabs minimal-tabs" density="compact">
@ -44,7 +44,7 @@
text text
@click="handleOptionChange('yes')" @click="handleOptionChange('yes')"
> >
Yes {{ yesPriceCents }}¢ {{ yesLabel }} {{ yesPriceCents }}¢
</v-btn> </v-btn>
<v-btn <v-btn
class="no-btn" class="no-btn"
@ -52,7 +52,7 @@
text text
@click="handleOptionChange('no')" @click="handleOptionChange('no')"
> >
No {{ noPriceCents }}¢ {{ noLabel }} {{ noPriceCents }}¢
</v-btn> </v-btn>
</div> </div>
@ -68,7 +68,7 @@
<span class="label">To win</span> <span class="label">To win</span>
<span class="to-win-value"> <span class="to-win-value">
<v-icon size="16" color="green">mdi-currency-usd</v-icon> <v-icon size="16" color="green">mdi-currency-usd</v-icon>
$20 ${{ toWinValue }}
</span> </span>
</div> </div>
</template> </template>
@ -106,7 +106,7 @@
text text
@click="handleOptionChange('yes')" @click="handleOptionChange('yes')"
> >
Yes {{ yesPriceCents }}¢ {{ yesLabel }} {{ yesPriceCents }}¢
</v-btn> </v-btn>
<v-btn <v-btn
class="no-btn" class="no-btn"
@ -114,7 +114,7 @@
text text
@click="handleOptionChange('no')" @click="handleOptionChange('no')"
> >
No {{ noPriceCents }}¢ {{ noLabel }} {{ noPriceCents }}¢
</v-btn> </v-btn>
</div> </div>
@ -135,6 +135,15 @@
<v-btn class="amount-btn" @click="adjustAmount(100)">+$100</v-btn> <v-btn class="amount-btn" @click="adjustAmount(100)">+$100</v-btn>
<v-btn class="amount-btn" @click="setMaxAmount">Max</v-btn> <v-btn class="amount-btn" @click="setMaxAmount">Max</v-btn>
</div> </div>
<!-- To win（份数 × 1U） -->
<div v-if="amount > 0" class="total-row amount-to-win-row">
<span class="label">To win</span>
<span class="to-win-value">
<v-icon size="16" color="green">mdi-currency-usd</v-icon>
${{ toWinValue }}
</span>
</div>
</div> </div>
<!-- Deposit Button --> <!-- Deposit Button -->
@ -152,7 +161,7 @@
text text
@click="handleOptionChange('yes')" @click="handleOptionChange('yes')"
> >
Yes {{ yesPriceCents }}¢ {{ yesLabel }} {{ yesPriceCents }}¢
</v-btn> </v-btn>
<v-btn <v-btn
class="no-btn" class="no-btn"
@ -160,7 +169,7 @@
text text
@click="handleOptionChange('no')" @click="handleOptionChange('no')"
> >
No {{ noPriceCents }}¢ {{ noLabel }} {{ noPriceCents }}¢
</v-btn> </v-btn>
</div> </div>
@ -260,7 +269,7 @@
<span class="label">To win</span> <span class="label">To win</span>
<span class="to-win-value"> <span class="to-win-value">
<v-icon size="16" color="green">mdi-currency-usd</v-icon> <v-icon size="16" color="green">mdi-currency-usd</v-icon>
$20 ${{ toWinValue }}
</span> </span>
</div> </div>
</template> </template>
@ -288,9 +297,9 @@
</template> </template>
</v-card> </v-card>
<!-- 移动端且由首页卡片嵌入：只渲染交易表单，无底部栏、无内部 sheet --> <!-- 移动端且由首页卡片嵌入：只渲染交易表单，无底部栏、无内部 sheet（扁平化） -->
<template v-else-if="embeddedInSheet"> <template v-else-if="embeddedInSheet">
<v-sheet class="trade-sheet-paper trade-sheet-paper--embedded" rounded="lg"> <v-sheet class="trade-sheet-paper trade-sheet-paper--embedded" rounded="lg" elevation="0">
<div class="trade-component trade-sheet-inner"> <div class="trade-component trade-sheet-inner">
<div class="header"> <div class="header">
<v-tabs v-model="activeTab" class="buy-sell-tabs minimal-tabs" density="compact"> <v-tabs v-model="activeTab" class="buy-sell-tabs minimal-tabs" density="compact">
@ -329,14 +338,14 @@
:class="{ active: selectedOption === 'yes' }" :class="{ active: selectedOption === 'yes' }"
text text
@click="handleOptionChange('yes')" @click="handleOptionChange('yes')"
>Yes {{ yesPriceCents }}¢</v-btn >{{ yesLabel }} {{ yesPriceCents }}¢</v-btn
> >
<v-btn <v-btn
class="no-btn" class="no-btn"
:class="{ active: selectedOption === 'no' }" :class="{ active: selectedOption === 'no' }"
text text
@click="handleOptionChange('no')" @click="handleOptionChange('no')"
>No {{ noPriceCents }}¢</v-btn >{{ noLabel }} {{ noPriceCents }}¢</v-btn
> >
</div> </div>
<div class="total-section"> <div class="total-section">
@ -344,11 +353,11 @@
<div class="total-row"> <div class="total-row">
<span class="label">Total</span><span class="total-value">${{ totalPrice }}</span> <span class="label">Total</span><span class="total-value">${{ totalPrice }}</span>
</div> </div>
<div class="total-row"> <div class="total-row">
<span class="label">To win</span <span class="label">To win</span
><span class="to-win-value" ><span class="to-win-value"
><v-icon size="16" color="green">mdi-currency-usd</v-icon> $20</span ><v-icon size="16" color="green">mdi-currency-usd</v-icon> ${{ toWinValue }}</span
> >
</div> </div>
</template> </template>
<template v-else> <template v-else>
@ -378,14 +387,14 @@
:class="{ active: selectedOption === 'yes' }" :class="{ active: selectedOption === 'yes' }"
text text
@click="handleOptionChange('yes')" @click="handleOptionChange('yes')"
>Yes {{ yesPriceCents }}¢</v-btn >{{ yesLabel }} {{ yesPriceCents }}¢</v-btn
> >
<v-btn <v-btn
class="no-btn" class="no-btn"
:class="{ active: selectedOption === 'no' }" :class="{ active: selectedOption === 'no' }"
text text
@click="handleOptionChange('no')" @click="handleOptionChange('no')"
>No {{ noPriceCents }}¢</v-btn >{{ noLabel }} {{ noPriceCents }}¢</v-btn
> >
</div> </div>
<div class="input-group"> <div class="input-group">
@ -402,6 +411,13 @@
<v-btn class="amount-btn" @click="adjustAmount(100)">+$100</v-btn> <v-btn class="amount-btn" @click="adjustAmount(100)">+$100</v-btn>
<v-btn class="amount-btn" @click="setMaxAmount">Max</v-btn> <v-btn class="amount-btn" @click="setMaxAmount">Max</v-btn>
</div> </div>
<div v-if="amount > 0" class="total-row amount-to-win-row">
<span class="label">To win</span>
<span class="to-win-value">
<v-icon size="16" color="green">mdi-currency-usd</v-icon>
${{ toWinValue }}
</span>
</div>
</div> </div>
<v-btn class="deposit-btn" @click="deposit">Deposit</v-btn> <v-btn class="deposit-btn" @click="deposit">Deposit</v-btn>
</template> </template>
@ -413,14 +429,14 @@
:class="{ active: selectedOption === 'yes' }" :class="{ active: selectedOption === 'yes' }"
text text
@click="handleOptionChange('yes')" @click="handleOptionChange('yes')"
>Yes {{ yesPriceCents }}¢</v-btn >{{ yesLabel }} {{ yesPriceCents }}¢</v-btn
> >
<v-btn <v-btn
class="no-btn" class="no-btn"
:class="{ active: selectedOption === 'no' }" :class="{ active: selectedOption === 'no' }"
text text
@click="handleOptionChange('no')" @click="handleOptionChange('no')"
>No {{ noPriceCents }}¢</v-btn >{{ noLabel }} {{ noPriceCents }}¢</v-btn
> >
</div> </div>
<div class="input-group limit-price-group"> <div class="input-group limit-price-group">
@ -503,11 +519,11 @@
<div class="total-row"> <div class="total-row">
<span class="label">Total</span><span class="total-value">${{ totalPrice }}</span> <span class="label">Total</span><span class="total-value">${{ totalPrice }}</span>
</div> </div>
<div class="total-row"> <div class="total-row">
<span class="label">To win</span <span class="label">To win</span
><span class="to-win-value" ><span class="to-win-value"
><v-icon size="16" color="green">mdi-currency-usd</v-icon> $20</span ><v-icon size="16" color="green">mdi-currency-usd</v-icon> ${{ toWinValue }}</span
> >
</div> </div>
</template> </template>
<template v-else> <template v-else>
@ -544,7 +560,7 @@
block block
@click="openSheet('yes')" @click="openSheet('yes')"
> >
Buy Yes {{ yesPriceCents }}¢ Buy {{ yesLabel }} {{ yesPriceCents }}¢
</v-btn> </v-btn>
<v-btn <v-btn
class="mobile-bar-btn mobile-bar-no" class="mobile-bar-btn mobile-bar-no"
@ -554,7 +570,7 @@
block block
@click="openSheet('no')" @click="openSheet('no')"
> >
Buy No {{ noPriceCents }}¢ Buy {{ noLabel }} {{ noPriceCents }}¢
</v-btn> </v-btn>
</div> </div>
@ -598,14 +614,14 @@
:class="{ active: selectedOption === 'yes' }" :class="{ active: selectedOption === 'yes' }"
text text
@click="handleOptionChange('yes')" @click="handleOptionChange('yes')"
>Yes {{ yesPriceCents }}¢</v-btn >{{ yesLabel }} {{ yesPriceCents }}¢</v-btn
> >
<v-btn <v-btn
class="no-btn" class="no-btn"
:class="{ active: selectedOption === 'no' }" :class="{ active: selectedOption === 'no' }"
text text
@click="handleOptionChange('no')" @click="handleOptionChange('no')"
>No {{ noPriceCents }}¢</v-btn >{{ noLabel }} {{ noPriceCents }}¢</v-btn
> >
</div> </div>
<div class="total-section"> <div class="total-section">
@ -614,11 +630,11 @@
<span class="label">Total</span <span class="label">Total</span
><span class="total-value">${{ totalPrice }}</span> ><span class="total-value">${{ totalPrice }}</span>
</div> </div>
<div class="total-row"> <div class="total-row">
<span class="label">To win</span <span class="label">To win</span
><span class="to-win-value" ><span class="to-win-value"
><v-icon size="16" color="green">mdi-currency-usd</v-icon> $20</span ><v-icon size="16" color="green">mdi-currency-usd</v-icon> ${{ toWinValue }}</span
> >
</div> </div>
</template> </template>
<template v-else> <template v-else>
@ -648,14 +664,14 @@
:class="{ active: selectedOption === 'yes' }" :class="{ active: selectedOption === 'yes' }"
text text
@click="handleOptionChange('yes')" @click="handleOptionChange('yes')"
>Yes {{ yesPriceCents }}¢</v-btn >{{ yesLabel }} {{ yesPriceCents }}¢</v-btn
> >
<v-btn <v-btn
class="no-btn" class="no-btn"
:class="{ active: selectedOption === 'no' }" :class="{ active: selectedOption === 'no' }"
text text
@click="handleOptionChange('no')" @click="handleOptionChange('no')"
>No {{ noPriceCents }}¢</v-btn >{{ noLabel }} {{ noPriceCents }}¢</v-btn
> >
</div> </div>
<div class="input-group"> <div class="input-group">
@ -672,6 +688,13 @@
<v-btn class="amount-btn" @click="adjustAmount(100)">+$100</v-btn> <v-btn class="amount-btn" @click="adjustAmount(100)">+$100</v-btn>
<v-btn class="amount-btn" @click="setMaxAmount">Max</v-btn> <v-btn class="amount-btn" @click="setMaxAmount">Max</v-btn>
</div> </div>
<div v-if="amount > 0" class="total-row amount-to-win-row">
<span class="label">To win</span>
<span class="to-win-value">
<v-icon size="16" color="green">mdi-currency-usd</v-icon>
${{ toWinValue }}
</span>
</div>
</div> </div>
<v-btn class="deposit-btn" @click="deposit">Deposit</v-btn> <v-btn class="deposit-btn" @click="deposit">Deposit</v-btn>
</template> </template>
@ -683,14 +706,14 @@
:class="{ active: selectedOption === 'yes' }" :class="{ active: selectedOption === 'yes' }"
text text
@click="handleOptionChange('yes')" @click="handleOptionChange('yes')"
>Yes {{ yesPriceCents }}¢</v-btn >{{ yesLabel }} {{ yesPriceCents }}¢</v-btn
> >
<v-btn <v-btn
class="no-btn" class="no-btn"
:class="{ active: selectedOption === 'no' }" :class="{ active: selectedOption === 'no' }"
text text
@click="handleOptionChange('no')" @click="handleOptionChange('no')"
>No {{ noPriceCents }}¢</v-btn >{{ noLabel }} {{ noPriceCents }}¢</v-btn
> >
</div> </div>
<div class="input-group limit-price-group"> <div class="input-group limit-price-group">
@ -772,11 +795,11 @@
<div class="total-row"> <div class="total-row">
<span class="label">Total</span><span class="total-value">${{ totalPrice }}</span> <span class="label">Total</span><span class="total-value">${{ totalPrice }}</span>
</div> </div>
<div class="total-row"> <div class="total-row">
<span class="label">To win</span <span class="label">To win</span
><span class="to-win-value" ><span class="to-win-value"
><v-icon size="16" color="green">mdi-currency-usd</v-icon> $20</span ><v-icon size="16" color="green">mdi-currency-usd</v-icon> ${{ toWinValue }}</span
> >
</div> </div>
</template> </template>
<template v-else> <template v-else>
@ -812,7 +835,7 @@
content-class="merge-dialog" content-class="merge-dialog"
transition="dialog-transition" transition="dialog-transition"
> >
<v-card class="merge-dialog-card" rounded="lg"> <v-card class="merge-dialog-card" rounded="lg" elevation="0">
<div class="merge-dialog-header"> <div class="merge-dialog-header">
<h3 class="merge-dialog-title">Merge shares</h3> <h3 class="merge-dialog-title">Merge shares</h3>
<v-btn <v-btn
@ -875,7 +898,7 @@
content-class="split-dialog" content-class="split-dialog"
transition="dialog-transition" transition="dialog-transition"
> >
<v-card class="split-dialog-card" rounded="lg"> <v-card class="split-dialog-card" rounded="lg" elevation="0">
<div class="split-dialog-header"> <div class="split-dialog-header">
<h3 class="split-dialog-title">Split</h3> <h3 class="split-dialog-title">Split</h3>
<v-btn <v-btn
@ -981,6 +1004,8 @@ export interface TradeMarketPayload {
title?: string title?: string
/** 与 outcomes/outcomePrices 顺序一致，用于下单 tokenId：0=Yes 1=No */ /** 与 outcomes/outcomePrices 顺序一致，用于下单 tokenId：0=Yes 1=No */
clobTokenIds?: string[] clobTokenIds?: string[]
/** 选项展示文案，如 ["Yes","No"] 或 ["Up","Down"]，用于 Buy Yes/No 按钮文字 */
outcomes?: string[]
} }
const props = withDefaults( const props = withDefaults(
@ -1071,6 +1096,8 @@ defineExpose({ openMergeDialog, openSplitDialog })
const yesPriceCents = computed(() => (props.market ? Math.round(props.market.yesPrice * 100) : 19)) const yesPriceCents = computed(() => (props.market ? Math.round(props.market.yesPrice * 100) : 19))
const noPriceCents = computed(() => (props.market ? Math.round(props.market.noPrice * 100) : 82)) const noPriceCents = computed(() => (props.market ? Math.round(props.market.noPrice * 100) : 82))
const yesLabel = computed(() => props.market?.outcomes?.[0] ?? 'Yes')
const noLabel = computed(() => props.market?.outcomes?.[1] ?? 'No')
function openSheet(option: 'yes' | 'no') { function openSheet(option: 'yes' | 'no') {
handleOptionChange(option) handleOptionChange(option)
@ -1120,8 +1147,22 @@ const totalPrice = computed(() => {
return (limitPrice.value * shares.value).toFixed(2) return (limitPrice.value * shares.value).toFixed(2)
}) })
/** To win = 份数 × 1U = shares × 1 USDC */
const toWinValue = computed(() => {
if (isMarketMode.value) {
const price =
selectedOption.value === 'yes'
? (props.market?.yesPrice ?? 0.5)
: (props.market?.noPrice ?? 0.5)
const sharesFromAmount = price > 0 ? amount.value / price : 0
return sharesFromAmount.toFixed(2)
}
return (shares.value * 1).toFixed(2)
})
const actionButtonText = computed(() => { const actionButtonText = computed(() => {
return `${activeTab.value} ${selectedOption.value.charAt(0).toUpperCase() + selectedOption.value.slice(1)}` const label = selectedOption.value === 'yes' ? yesLabel.value : noLabel.value
return `${activeTab.value} ${label}`
}) })
function applyInitialOption(option: 'yes' | 'no') { function applyInitialOption(option: 'yes' | 'no') {
@ -1373,11 +1414,38 @@ async function submitOrder() {
</script> </script>
<style scoped> <style scoped>
/* 扁平化：移除所有阴影 */
.trade-component,
.trade-sheet-paper,
.merge-dialog-card,
.split-dialog-card {
box-shadow: none !important;
}
.trade-component :deep(.v-btn),
.trade-component :deep(.v-btn::before),
.trade-sheet-inner :deep(.v-btn),
.trade-sheet-inner :deep(.v-btn::before),
.merge-dialog-card .v-btn,
.merge-dialog-card .v-btn::before,
.split-dialog-card .v-btn,
.split-dialog-card .v-btn::before {
box-shadow: none !important;
}
.trade-component :deep(.v-field),
.trade-sheet-inner :deep(.v-field),
.merge-dialog-card :deep(.v-field),
.split-dialog-card :deep(.v-field) {
box-shadow: none !important;
}
.trade-component { .trade-component {
width: 100%; width: 100%;
max-width: 400px; max-width: 400px;
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
border: 1px solid #e7e7e7;
} }
.header { .header {
@ -1410,6 +1478,7 @@ async function submitOrder() {
font-size: 14px; font-size: 14px;
text-transform: none; text-transform: none;
color: #666666; color: #666666;
box-shadow: none !important;
} }
.more-item { .more-item {
@ -1431,6 +1500,7 @@ async function submitOrder() {
border-radius: 4px; border-radius: 4px;
text-transform: none; text-transform: none;
font-size: 14px; font-size: 14px;
box-shadow: none !important;
} }
.yes-btn.active { .yes-btn.active {
@ -1445,11 +1515,12 @@ async function submitOrder() {
border-radius: 4px; border-radius: 4px;
text-transform: none; text-transform: none;
font-size: 14px; font-size: 14px;
box-shadow: none !important;
} }
.no-btn.active { .no-btn.active {
background-color: #cc0000; background-color: #f0b8b8;
color: #ffffff; color: #cc0000;
} }
.input-group { .input-group {
@ -1581,6 +1652,7 @@ async function submitOrder() {
text-transform: none; text-transform: none;
font-size: 12px; font-size: 12px;
padding: 4px; padding: 4px;
box-shadow: none !important;
} }
.matching-info { .matching-info {
@ -1609,6 +1681,10 @@ async function submitOrder() {
border-radius: 4px; border-radius: 4px;
} }
.expiration-select :deep(.v-field) {
box-shadow: none !important;
}
.total-section { .total-section {
padding: 12px; padding: 12px;
border-top: 1px solid #e0e0e0; border-top: 1px solid #e0e0e0;
@ -1638,11 +1714,12 @@ async function submitOrder() {
width: 100%; width: 100%;
background-color: #0066cc; background-color: #0066cc;
color: #ffffff; color: #ffffff;
border-radius: 0; border-radius: 6px;
padding: 16px; padding: 16px;
font-size: 15px; font-size: 15px;
font-weight: 500; font-weight: 500;
text-transform: none; text-transform: none;
box-shadow: none !important;
} }
/* Market Mode Styles */ /* Market Mode Styles */
@ -1685,17 +1762,25 @@ async function submitOrder() {
text-transform: none; text-transform: none;
font-size: 14px; font-size: 14px;
padding: 8px; padding: 8px;
box-shadow: none !important;
}
.amount-to-win-row {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #eee;
} }
.deposit-btn { .deposit-btn {
width: 100%; width: 100%;
background-color: #0066cc; background-color: #0066cc;
color: #ffffff; color: #ffffff;
border-radius: 0; border-radius: 6px;
padding: 16px; padding: 16px;
font-size: 15px; font-size: 15px;
font-weight: 500; font-weight: 500;
text-transform: none; text-transform: none;
box-shadow: none !important;
} }
/* 移动端底部交易栏（红框样式） */ /* 移动端底部交易栏（红框样式） */
@ -1823,6 +1908,7 @@ async function submitOrder() {
.merge-dialog-card { .merge-dialog-card {
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
box-shadow: none !important;
} }
.merge-dialog-header { .merge-dialog-header {
@ -1925,12 +2011,14 @@ async function submitOrder() {
.merge-submit-btn { .merge-submit-btn {
text-transform: none; text-transform: none;
font-weight: 600; font-weight: 600;
box-shadow: none !important;
} }
/* Split dialog */ /* Split dialog */
.split-dialog-card { .split-dialog-card {
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
box-shadow: none !important;
} }
.split-dialog-header { .split-dialog-header {
display: flex; display: flex;
@ -1993,5 +2081,6 @@ async function submitOrder() {
.split-submit-btn { .split-submit-btn {
text-transform: none; text-transform: none;
font-weight: 600; font-weight: 600;
box-shadow: none !important;
} }
</style> </style>

21
src/views/EventMarkets.vue
View File

@ -86,7 +86,7 @@
rounded="sm" rounded="sm"
@click="openTrade(market, index, 'yes')" @click="openTrade(market, index, 'yes')"
> >
Yes {{ yesPrice(market) }} {{ yesLabel(market) }} {{ yesPrice(market) }}
</v-btn> </v-btn>
<v-btn <v-btn
class="buy-no-btn" class="buy-no-btn"
@ -95,7 +95,7 @@
rounded="sm" rounded="sm"
@click="openTrade(market, index, 'no')" @click="openTrade(market, index, 'no')"
> >
No {{ noPrice(market) }} {{ noLabel(market) }} {{ noPrice(market) }}
</v-btn> </v-btn>
</div> </div>
</div> </div>
@ -125,7 +125,7 @@
rounded="sm" rounded="sm"
@click="openSheetWithOption('yes')" @click="openSheetWithOption('yes')"
> >
Yes {{ barMarket ? yesPrice(barMarket) : '0¢' }} {{ barMarket ? yesLabel(barMarket) : 'Yes' }} {{ barMarket ? yesPrice(barMarket) : '0¢' }}
</v-btn> </v-btn>
<v-btn <v-btn
class="mobile-bar-btn mobile-bar-no" class="mobile-bar-btn mobile-bar-no"
@ -133,7 +133,7 @@
rounded="sm" rounded="sm"
@click="openSheetWithOption('no')" @click="openSheetWithOption('no')"
> >
No {{ barMarket ? noPrice(barMarket) : '0¢' }} {{ barMarket ? noLabel(barMarket) : 'No' }} {{ barMarket ? noPrice(barMarket) : '0¢' }}
</v-btn> </v-btn>
<v-menu <v-menu
v-model="mobileMenuOpen" v-model="mobileMenuOpen"
@ -239,6 +239,7 @@ const tradeMarketPayload = computed(() => {
noPrice, noPrice,
title: m.question, title: m.question,
clobTokenIds: m.clobTokenIds, clobTokenIds: m.clobTokenIds,
outcomes: m.outcomes,
} }
}) })
@ -566,6 +567,14 @@ function marketChance(market: PmEventMarketItem): number {
return Math.min(100, Math.max(0, Math.round(yesPrice * 100))) return Math.min(100, Math.max(0, Math.round(yesPrice * 100)))
} }
function yesLabel(market: PmEventMarketItem): string {
return market?.outcomes?.[0] ?? 'Yes'
}
function noLabel(market: PmEventMarketItem): string {
return market?.outcomes?.[1] ?? 'No'
}
function yesPrice(market: PmEventMarketItem): string { function yesPrice(market: PmEventMarketItem): string {
const raw = market?.outcomePrices?.[0] const raw = market?.outcomePrices?.[0]
if (raw == null) return '0¢' if (raw == null) return '0¢'
@ -734,13 +743,14 @@ watch(
} }
} }
/* 分时图卡片 */ /* 分时图卡片（扁平化） */
.chart-card.polymarket-chart { .chart-card.polymarket-chart {
margin-bottom: 24px; margin-bottom: 24px;
padding: 20px 24px 16px; padding: 20px 24px 16px;
background-color: #ffffff; background-color: #ffffff;
border: 1px solid #e7e7e7; border: 1px solid #e7e7e7;
border-radius: 12px; border-radius: 12px;
box-shadow: none;
} }
.chart-header { .chart-header {
@ -884,6 +894,7 @@ watch(
border: 1px solid #e7e7e7; border: 1px solid #e7e7e7;
border-radius: 12px; border-radius: 12px;
overflow: hidden; overflow: hidden;
box-shadow: none;
} }
.markets-list { .markets-list {

16
src/views/TradeDetail.vue
View File

@ -130,7 +130,7 @@
rounded="sm" rounded="sm"
@click="openSheetWithOption('yes')" @click="openSheetWithOption('yes')"
> >
Yes {{ yesPriceCents }}¢ {{ yesLabel }} {{ yesPriceCents }}¢
</v-btn> </v-btn>
<v-btn <v-btn
class="mobile-bar-btn mobile-bar-no" class="mobile-bar-btn mobile-bar-no"
@ -138,7 +138,7 @@
rounded="sm" rounded="sm"
@click="openSheetWithOption('no')" @click="openSheetWithOption('no')"
> >
No {{ noPriceCents }}¢ {{ noLabel }} {{ noPriceCents }}¢
</v-btn> </v-btn>
<v-menu <v-menu
v-model="mobileMenuOpen" v-model="mobileMenuOpen"
@ -332,6 +332,7 @@ const tradeMarketPayload = computed(() => {
noPrice, noPrice,
title: m.question, title: m.question,
clobTokenIds: m.clobTokenIds, clobTokenIds: m.clobTokenIds,
outcomes: m.outcomes,
} }
} }
const qId = route.query.marketId const qId = route.query.marketId
@ -372,6 +373,8 @@ const yesPriceCents = computed(() =>
const noPriceCents = computed(() => const noPriceCents = computed(() =>
tradeMarketPayload.value ? Math.round(tradeMarketPayload.value.noPrice * 100) : 0 tradeMarketPayload.value ? Math.round(tradeMarketPayload.value.noPrice * 100) : 0
) )
const yesLabel = computed(() => currentMarket.value?.outcomes?.[0] ?? 'Yes')
const noLabel = computed(() => currentMarket.value?.outcomes?.[1] ?? 'No')
function openSheetWithOption(side: 'yes' | 'no') { function openSheetWithOption(side: 'yes' | 'no') {
tradeInitialOptionFromBar.value = side tradeInitialOptionFromBar.value = side
@ -921,13 +924,14 @@ onUnmounted(() => {
font-weight: 600; font-weight: 600;
} }
/* Polymarket 样式分时图卡片 */ /* Polymarket 样式分时图卡片（扁平化） */
.chart-card.polymarket-chart { .chart-card.polymarket-chart {
margin-top: 32px; margin-top: 32px;
padding: 20px 24px 16px; padding: 20px 24px 16px;
background-color: #ffffff; background-color: #ffffff;
border: 1px solid #e7e7e7; border: 1px solid #e7e7e7;
border-radius: 12px; border-radius: 12px;
box-shadow: none;
} }
.chart-header { .chart-header {
@ -1027,11 +1031,12 @@ onUnmounted(() => {
color: #111827; color: #111827;
} }
/* Order Book Card Styles */ /* Order Book Card Styles（扁平化） */
.order-book-card { .order-book-card {
padding: 0; padding: 0;
background-color: #ffffff; background-color: #ffffff;
border: 1px solid #e7e7e7; border: 1px solid #e7e7e7;
box-shadow: none;
} }
/* 左右布局：左侧弹性，右侧固定 */ /* 左右布局：左侧弹性，右侧固定 */
@ -1141,11 +1146,12 @@ onUnmounted(() => {
} }
} }
/* Comments / Top Holders / Activity */ /* Comments / Top Holders / Activity（扁平化） */
.activity-card { .activity-card {
margin-top: 32px; margin-top: 32px;
border: 1px solid #e5e7eb; border: 1px solid #e5e7eb;
overflow: hidden; overflow: hidden;
box-shadow: none;
} }
.detail-tabs { .detail-tabs {