feat: 重构用户设置页面，优化布局和组件结构

src/views/trade/index.vue

@@ -81,7 +81,6 @@ useTradingView(tradingViewContainer, {
     },
   },
 });
-const activeTab = ref("buy");
 </script>
 
 <template>
@@ -92,19 +91,212 @@ const activeTab = ref("buy");
       </ion-toolbar>
     </ion-header>
     <ion-content :fullscreen="true">
-      <ui-tabs v-model="activeTab" type="segment">
+      <!-- 交易对头部信息 -->
-        <ui-tab-pane title="买入" name="buy">
+      <TradingPairHeader />
-          <div>
+
-            分段控件以水平行的形式显示一组相关的按钮（有时也称为分段控件）。它们可以显示在工具栏或主要内容区域内。
+      <!-- K线图表 -->
-            它们的功能类似于标签页，选择一个标签页会取消选择其他所有标签页。分段功能用于在内容的不同视图之间切换。当点击控件需要在页面之间导航时，应使用标签页而不是分段功能。
+      <div ref="tradingViewContainer" class="chart-container" />
+
+      <!-- 订单簿 -->
+      <div class="order-book-section">
+        <OrderBook />
+      </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">
+        <OrdersPanel />
       </div>
-        </ui-tab-pane>
-        <ui-tab-pane title="卖出" name="sell" />
-      </ui-tabs>
     </ion-content>
   </ion-page>
 </template>
 
-<style lang="css" scoped>
+<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;
+}
 
+.interval-selector {
+  display: flex;
+  gap: 4px;
+  flex: 1;
+  overflow-x: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.interval-selector::-webkit-scrollbar {
+  display: none;
+}
+
+.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);
+  }
+}
 </style>

src/views/user-settings/index.vue

@@ -49,6 +49,14 @@ function handleCopyUid() {
 </script>
 
 <template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar class="ui-toolbar">
+        <ui-back-button slot="start" />
+        <ion-title>用户设置</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
     <ion-content :fullscreen="true" class="ion-padding">
       <div class="flex flex-col items-center justify-center py-5">
         <div class="relative">
@@ -129,6 +137,7 @@ function handleCopyUid() {
         </ion-button>
       </div>
     </ion-content>
+  </ion-page>
 </template>
 
 <style lang='css' scoped>

src/views/user-settings/outlet.vue

@@ -2,12 +2,6 @@
 
 <template>
   <ion-page>
-    <ion-header>
-      <ion-toolbar class="ui-toolbar">
-        <ui-back-button slot="start" />
-        <ion-title>用户设置</ion-title>
-      </ion-toolbar>
-    </ion-header>
     <ion-router-outlet />
   </ion-page>
 </template>