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

components.d.ts

@@ -42,6 +42,7 @@ declare module 'vue' {
     IonPage: typeof import('@ionic/vue')['IonPage']
     IonRadio: typeof import('@ionic/vue')['IonRadio']
     IonRadioGroup: typeof import('@ionic/vue')['IonRadioGroup']
+    IonRange: typeof import('@ionic/vue')['IonRange']
     IonRefresher: typeof import('@ionic/vue')['IonRefresher']
     IonRefresherContent: typeof import('@ionic/vue')['IonRefresherContent']
     IonRouterOutlet: typeof import('@ionic/vue')['IonRouterOutlet']
@@ -95,6 +96,7 @@ declare global {
   const IonPage: typeof import('@ionic/vue')['IonPage']
   const IonRadio: typeof import('@ionic/vue')['IonRadio']
   const IonRadioGroup: typeof import('@ionic/vue')['IonRadioGroup']
+  const IonRange: typeof import('@ionic/vue')['IonRange']
   const IonRefresher: typeof import('@ionic/vue')['IonRefresher']
   const IonRefresherContent: typeof import('@ionic/vue')['IonRefresherContent']
   const IonRouterOutlet: typeof import('@ionic/vue')['IonRouterOutlet']

src/theme/variables.css

@@ -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: #ffffff;
-  --ion-color-danger-contrast-rgb: 0, 0, 0;
+  --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;
 }

src/ui/tag/index.vue

@@ -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>

src/views/trade/components/orders-panel.vue

@@ -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;

src/views/trade/components/trade-switch.vue

@@ -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>

src/views/trade/components/trade-way.vue

@@ -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>

src/views/trade/index.vue

@@ -1,302 +1,89 @@
 <script setup lang="ts">
-import type { VolumeData } from "@/composables/useTradingView";
+import { caretDownOutline, ellipsisHorizontal } from "ionicons/icons";
-import OrderBook from "./components/order-book.vue";
+import MaterialSymbolsCandlestickChartOutline from "~icons/material-symbols/candlestick-chart-outline";
 import OrdersPanel from "./components/orders-panel.vue";
-import TradeForm from "./components/trade-form.vue";
+import TradeSwitch from "./components/trade-switch.vue";
-import TradingPairHeader from "./components/trading-pair-header.vue";
+import TradeWay from "./components/trade-way.vue";
 
-const tradingViewContainer = useTemplateRef<HTMLElement>("tradingViewContainer");
+const mode = ref<"buy" | "sell">("buy");
-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,
-    },
-  },
-});
 </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">
+    <ion-content :fullscreen="true" class="ion-padding">
-      <!-- 交易对头部信息 -->
+      <div class="grid grid-cols-5">
-      <TradingPairHeader />
+        <div class="col-span-3 space-y-2">
-
+          <TradeSwitch v-model:active="mode" />
-      <!-- K线图表 -->
+          <TradeWay />
-      <div ref="tradingViewContainer" class="chart-container" />
+          <ion-input label="金额" class="count" inputmode="decimal" type="number" placeholder="请输入交易金额">
-
+            <span slot="end">USDT</span>
-      <!-- 订单簿 -->
+          </ion-input>
-      <div class="order-book-section">
+          <ion-range class="range" aria-label="Range with ticks" :pin="true" :ticks="true" :snaps="true" :min="0" :max="5" />
-        <OrderBook />
+          <ion-button expand="block" size="small" shape="round" :color="mode === 'buy' ? 'success' : 'danger'">
+            {{ mode === 'buy' ? '买入' : '卖出' }}
+          </ion-button>
         </div>
-
+        <div class="col-span-2" />
-      <!-- 买卖切换 -->
-      <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>
-
+      <div class="mt-6">
-      <!-- 交易表单 -->
-      <TradeForm :action="tradeAction" />
-
-      <!-- 当前委托和历史记录 -->
-      <div class="orders-section">
         <OrdersPanel />
       </div>
     </ion-content>
   </ion-page>
 </template>
 
-<style scoped>
+<style lang="css" scoped>
-.chart-controls {
+@reference "tailwindcss";
-  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;
-}
 
-.interval-selector {
+ion-input.count {
-  display: flex;
+  --background: var(--ion-color-faint);
-  gap: 4px;
+  --padding-start: 16px;
-  flex: 1;
+  --padding-end: 16px;
-  overflow-x: auto;
+  --padding-top: 4px;
-  scrollbar-width: none;
+  --padding-bottom: 4px;
-  -ms-overflow-style: none;
+  --border-radius: 6px;
+  font-size: 12px;
+  min-height: 40px;
 }
-
+ion-range.range {
-.interval-selector::-webkit-scrollbar {
+  --bar-height: 3px;
-  display: none;
+  --knob-size: 14px;
+  --pin-color: #fff;
+  --bar-background-active: #3e3e3e;
+  --bar-background: rgb(226, 226, 226);
+  padding: 0 8px;
 }
-
+ion-range.range::part(tick) {
-.interval-btn {
+  z-index: 1;
-  padding: 6px 12px;
+  border-radius: 100%;
-  border: none;
+  background: #dcdcdc;
-  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>

tailwind.config.ts

@@ -14,6 +14,7 @@ const config: Config = {
         light: "var(--ion-color-light)",
         medium: "var(--ion-color-medium)",
         dark: "var(--ion-color-dark)",
+        faint: "var(--ion-color-faint)",
         text: {
           50: "var(--ion-text-color-step-50)",
           100: "var(--ion-text-color-step-100)",