我的白标Perp DEX的手机版UI适配完成了

关于我的白标Perp DEX，之前已经分享过五篇文章：

前几天，我刚发布最新文章宣布我的白标 Perp DEX 完成 桌面版 UI 了，这也说明端到端的交易全流程已经完全跑通了。

这几天，我就忙着开发 手机版 UI 了。今天，也终于开发完了。以下就是在我的手机上演示的效果图：

因为手机端和 PC 端的排版完全不同，所以手机端每一个页面都是重新设计和开发的。

PC 端导航栏的三个菜单，在手机端就改为了底部的三个 Tab。

Trade 页面是最复杂的，整体布局上，和几大主流交易所是差不多的，细节上的排版有些差异。值得一提的是，我对于 Positions 的卡片设计，每一个仓位卡片，左边有一条红色或绿色的边条，红色代表这是一个空仓，绿色代表多仓。通过这么大的颜色边条进行区分，识别度很高。

盘口的高度会随着右边下单区的高度而自动调整，保持左右高度的一致性，这一点细节其实让我调试了挺久的。

每个仓位卡片下面都有三个按钮，分别用于调整杠杆、设置止盈止损、平仓，这三个弹窗效果如下：

设置止盈止损时，如果勾选上了 Close entire position 的勾选框，则是整个仓位级的止盈止损，否则，可以指定平仓数量。

平仓时则提供了三种方式：市价平仓、限价平仓、反向仓位。市价和限价平仓还支持部分平仓。

再来看 K 线图页面，画图组件和 PC 端一样，依然集成了 TradingView。Hover 具体 K 线，可看到每一根 K 线的具体数据，包括高开低收价格等。K 线周期也和 PC 端的一样，总共可查看 14 种周期。移动平均线也同样可查看 MA7、MA25、MA99。

盘口上，买卖盘分别展示出了 25 档。PC 端默认只展示 7 档。

Markets 页面展示的字段相比 PC 端的会少了不少，只展示了几个核心字段。但搜索功能和排序功能依然保留了。

充值和提现按钮则是在 Portfolio 页面里，展示的数据和 PC 端的保持一致，只是排版不同。下面有多个 Tab，可以查看仓位、当前委托、历史委托、成交记录等，包括充提记录也在这里可以查看。

目前，这个手机端的 UI 主要就是这些了。因为具体的接口和数据，都在开发 PC 端时调试过了，而且一开始的架构设计上就是 PC 端和手机端的 UI 页面是分开的，所以，这次手机端的适配开发相对快很多。