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

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>