From d2c438f3d47a2b84293fcae936f2e5d15c046b41 Mon Sep 17 00:00:00 2001
From: Seven <qiqiwatermelon@gmail.com>
Date: Sun, 28 Dec 2025 18:19:56 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=8D=E6=9E=84=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E9=A1=B5=E9=9D=A2=EF=BC=8C=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E5=92=8C=E7=BB=84=E4=BB=B6=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/trade/index.vue          | 214 +++++++++++++++++++++++++++--
 src/views/user-settings/index.vue  | 135 +++++++++---------
 src/views/user-settings/outlet.vue |   6 -
 3 files changed, 275 insertions(+), 80 deletions(-)

diff --git a/src/views/trade/index.vue b/src/views/trade/index.vue
index 23d4d8c..d62b5bf 100644
--- a/src/views/trade/index.vue
+++ b/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">
-          <div>
-            分段控件以水平行的形式显示一组相关的按钮（有时也称为分段控件）。它们可以显示在工具栏或主要内容区域内。
-            它们的功能类似于标签页，选择一个标签页会取消选择其他所有标签页。分段功能用于在内容的不同视图之间切换。当点击控件需要在页面之间导航时，应使用标签页而不是分段功能。
-          </div>
-        </ui-tab-pane>
-        <ui-tab-pane title="卖出" name="sell" />
-      </ui-tabs>
+      <!-- 交易对头部信息 -->
+      <TradingPairHeader />
+
+      <!-- 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>
     </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>
diff --git a/src/views/user-settings/index.vue b/src/views/user-settings/index.vue
index 16eea36..c591405 100644
--- a/src/views/user-settings/index.vue
+++ b/src/views/user-settings/index.vue
@@ -49,86 +49,95 @@ function handleCopyUid() {
 </script>
 
 <template>
-  <ion-content :fullscreen="true" class="ion-padding">
-    <div class="flex flex-col items-center justify-center py-5">
-      <div class="relative">
-        <ui-avatar class="size-25" />
-      </div>
-    </div>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar class="ui-toolbar">
+        <ui-back-button slot="start" />
+        <ion-title>用户设置</ion-title>
+      </ion-toolbar>
+    </ion-header>
 
-    <ion-list class="mt-5" lines="full">
-      <!-- uid -->
-      <ion-item>
-        <div class="flex justify-between w-full items-center">
-          <div class="flex-center space-x-2">
-            <div class="text-sm font-semibold">
-              UID
-            </div>
-          </div>
-          <div class="end" @click="handleCopyUid">
-            <div>{{ userProfile?.uid }}</div>
-            <TdesignCopy />
-          </div>
+    <ion-content :fullscreen="true" class="ion-padding">
+      <div class="flex flex-col items-center justify-center py-5">
+        <div class="relative">
+          <ui-avatar class="size-25" />
         </div>
-      </ion-item>
-      <!-- username -->
-      <!-- <ion-item button @click="router.push('/user/settings/username')">
+      </div>
+
+      <ion-list class="mt-5" lines="full">
+        <!-- uid -->
+        <ion-item>
           <div class="flex justify-between w-full items-center">
             <div class="flex-center space-x-2">
               <div class="text-sm font-semibold">
-                用户名
+                UID
+              </div>
+            </div>
+            <div class="end" @click="handleCopyUid">
+              <div>{{ userProfile?.uid }}</div>
+              <TdesignCopy />
+            </div>
+          </div>
+        </ion-item>
+        <!-- username -->
+        <!-- <ion-item button @click="router.push('/user/settings/username')">
+            <div class="flex justify-between w-full items-center">
+              <div class="flex-center space-x-2">
+                <div class="text-sm font-semibold">
+                  用户名
+                </div>
+              </div>
+              <div class="end">
+                {{ userStore.state.session?.username }}
+              </div>
+            </div>
+          </ion-item> -->
+        <!-- nickname -->
+        <ion-item button @click="router.push('/user/settings/nickname')">
+          <div class="flex justify-between w-full items-center">
+            <div class="flex-center space-x-2">
+              <div class="text-sm font-semibold">
+                昵称
               </div>
             </div>
             <div class="end">
-              {{ userStore.state.session?.username }}
+              {{ userProfile?.nickname }}
             </div>
           </div>
-        </ion-item> -->
-      <!-- nickname -->
-      <ion-item button @click="router.push('/user/settings/nickname')">
-        <div class="flex justify-between w-full items-center">
-          <div class="flex-center space-x-2">
-            <div class="text-sm font-semibold">
-              昵称
-            </div>
-          </div>
-          <div class="end">
-            {{ userProfile?.nickname }}
-          </div>
-        </div>
-      </ion-item>
-      <!-- email -->
-      <ion-item button @click="router.push('/user/settings/email')">
-        <div class="flex justify-between w-full items-center">
-          <div class="flex-center space-x-2">
-            <div class="text-sm font-semibold">
-              邮箱
-            </div>
-          </div>
-          <div class="end">
-            {{ userProfile?.user?.email }}
-          </div>
-        </div>
-      </ion-item>
-      <!-- password -->
-      <!-- <ion-item button @click="router.push('/user/settings/password')">
+        </ion-item>
+        <!-- email -->
+        <ion-item button @click="router.push('/user/settings/email')">
           <div class="flex justify-between w-full items-center">
             <div class="flex-center space-x-2">
               <div class="text-sm font-semibold">
-                修改密码
+                邮箱
               </div>
             </div>
+            <div class="end">
+              {{ userProfile?.user?.email }}
+            </div>
           </div>
-        </ion-item> -->
-    </ion-list>
+        </ion-item>
+        <!-- password -->
+        <!-- <ion-item button @click="router.push('/user/settings/password')">
+            <div class="flex justify-between w-full items-center">
+              <div class="flex-center space-x-2">
+                <div class="text-sm font-semibold">
+                  修改密码
+                </div>
+              </div>
+            </div>
+          </ion-item> -->
+      </ion-list>
 
-    <!-- Action Buttons -->
-    <div class="mt-10">
-      <ion-button expand="block" color="tertiary" @click="handleSignOut">
-        Sign Out
-      </ion-button>
-    </div>
-  </ion-content>
+      <!-- Action Buttons -->
+      <div class="mt-10">
+        <ion-button expand="block" color="tertiary" @click="handleSignOut">
+          Sign Out
+        </ion-button>
+      </div>
+    </ion-content>
+  </ion-page>
 </template>
 
 <style lang='css' scoped>
diff --git a/src/views/user-settings/outlet.vue b/src/views/user-settings/outlet.vue
index 349276a..b612ab2 100644
--- a/src/views/user-settings/outlet.vue
+++ b/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>