양적 거래 플랫폼 API 인터페이스가 대대적으로 업데이트되면서 플랫폼의 전략 인터페이스 매개변수, 대화형 컨트롤 및 기타 기능이 조정되었고, 많은 새로운 기능이 추가되었습니다. 이전 문서에서는 인터페이스 매개변수와 대화형 컨트롤의 업데이트를 자세히 소개했습니다. 이 문서에서는 FMZ.COM의 새로 도입된 상태 표시줄 버튼의 적용 방법을 계속 살펴보겠습니다.

모든 전략 개발자는 사용하기 쉽고 강력하며 디자인이 간단한 UI 인터페이스를 만들고 싶어합니다. 이러한 기준을 달성하기 위해, FMZ.COM은 플랫폼 기능을 업그레이드하고 사용자 경험을 향상하기 위해 최선을 다하고 있습니다. 전략 페이지의 상태 표시줄에 직접 대화형 컨트롤을 디자인하는 것은 이러한 요구에 따른 업그레이드입니다.

다음으로, 다양한 전략 시나리오에서의 적용을 살펴보겠습니다.

다중 제품 전략 시나리오

완전 자동 다중 상품 차익거래 전략이든, 반수동 다중 상품 타이밍 전략이든 말입니다. 특정 상품에 대해 이익 실현, 손실 중단, 청산, 계획 위탁 등과 같은 기능적인 상호 작용 버튼이 전략 UI 인터페이스에 필요할 것입니다.

그러면 가장 간단한 사용 시나리오를 통해 상태 표시줄 버튼의 새로운 기능을 살펴보겠습니다. 우리의 전략이 여러 심볼을 거래한다고 가정해 보자.

BTC_USDT 영구 계약, ETH_USDT 영구 계약, LTC_USDT 영구 계약, BNB_USDT 영구 계약, SOL_USDT 영구 계약

전략이 자동 거래를 실행하는 동안, 전략 인터페이스의 상태 표시줄에 각 제품에 대한 시작 버튼을 디자인하고자 합니다. 하지만 이 개방형 포지션 버튼에는 다음과 같은 일련의 세부적인 설정이 필요합니다.

• 주문 유형: 지정가 주문/시장가 주문.
• 주문의 주문 수량: 수량.
• 주문의 가격: price.
• 거래 방향: 매수(롱), 매도(숏).

이 플랫폼이 업그레이드되기 전에는 상태 표시줄 버튼이 단순히 버튼 상호작용 메시지를 트리거할 뿐이었습니다. 복잡한 메시지를 설정하기 위해 일련의 컨트롤을 바인딩할 방법은 없습니다. 이 상호작용의 업그레이드는 이러한 필요성을 해결합니다. 코드 디자인을 살펴보겠습니다. 이러한 함수를 빌드하는 방법을 쉽게 이해할 수 있도록 코드에 자세한 주석이 추가되었습니다.

디자인 예시:

// 设置操作的各个品种 BTC_USDT.swap 为FMZ平台定义的品种格式，表示BTC的U本位永续合约
var symbols = ["BTC_USDT.swap", "ETH_USDT.swap", "LTC_USDT.swap", "BNB_USDT.swap", "SOL_USDT.swap"]

// 根据按钮模板构造按钮
function createBtn(tmp, group) {
    var btn = JSON.parse(JSON.stringify(tmp))
    _.each(group, function(eleByGroup) {
        btn["group"].unshift(eleByGroup)
    })

    return btn
}

function main() {
    LogReset(1)

    var arrManager = []
    _.each(symbols, function(symbol) {
        arrManager.push({
            "symbol": symbol,
        })
    })

    // Btn
    var tmpBtnOpen = {
        "type": "button",
        "cmd": "open",
        "name": "开仓下单",
        "group": [{
            "type": "selected",
            "name": "tradeType",
            "label": "下单类型",
            "description": "市价单、限价单",
            "default": 0,
            "group": "交易设置",
            "settings": {
                "options": ["市价单", "限价单"],
                "required": true,
            }
        }, {
            "type": "selected",
            "name": "direction",
            "label": "交易方向",
            "description": "买入、卖出",
            "default": "buy",
            "group": "交易设置",
            "settings": {
                "render": "segment",
                "required": true,
                "options": [{"name": "买入", "value": "buy"}, {"name": "卖出", "value": "sell"}],
            }
        }, {
            "type": "number",
            "name": "price",
            "label": "价格",
            "description": "订单的价格",
            "group": "交易设置",
            "filter": "tradeType==1",
            "settings": {
                "required": true,
            }
        }, {
            "type": "number",
            "name": "amount",
            "label": "下单量",
            "description": "订单的下单量",
            "group": "交易设置",
            "settings": {
                "required": true,
            }
        }],
    }

    while (true) {
        var tbl = {"type": "table", "title": "dashboard", "cols": ["symbol", "actionOpen"], "rows": []}
        _.each(arrManager, function(m) {
            var btnOpen = createBtn(tmpBtnOpen, [{"type": "string", "name": "symbol", "label": "交易品种", "default": m["symbol"], "settings": {"required": true}}])
            tbl["rows"].push([m["symbol"], btnOpen])
        })
        
        var cmd = GetCommand()
        if (cmd) {
            Log("收到交互：", cmd)
            
            // 解析交互消息: open:{"symbol":"LTC_USDT.swap","tradeType":0,"direction":"buy","amount":111}
            // 根据第一个冒号:之前的指令判断是哪种按钮模板触发的消息
            var arrCmd = cmd.split(":", 2)
            if (arrCmd[0] == "open") {
                var msg = JSON.parse(cmd.slice(5))
                Log("交易品种：", msg["symbol"], "，交易方向：", msg["direction"], "，订单类型：", msg["tradeType"] == 0 ? "市价单" : "限价单", msg["tradeType"] == 0 ? "，订单价格：当前市价" : "，订单价格：" + msg["price"], "，订单数量：", msg["amount"])
            }
        }

        // 输出状态栏信息
        LogStatus(_D(), "\n", "`" + JSON.stringify(tbl) + "`")
        Sleep(1000)
    }
}

먼저 달리기 효과를 살펴보고, 이어서 버튼 컨트롤의 디자인을 자세히 설명하겠습니다. 전략 코드는 아래와 같이 실행됩니다.

버튼을 클릭하면 특정 주문 정보를 구성할 수 있는 팝업 창이 나타납니다.

개시정보를 입력한 후, 우리는 디자인을 했습니다.

전략이 메시지를 수신하고 코드에서 메시지를 구문 분석하여 주문에 대한 다양한 설정을 출력하는 것을 볼 수 있습니다. 다음으로, 이 버튼이 어떻게 구성되는지 살펴보겠습니다.

먼저 JSON 객체인 버튼 템플릿을 정의하고 이를 tmpBtnOpen 변수에 할당합니다. 구체적인 지침은 아래 코드 주석에 직접 포함했습니다.

    {
        "type": "button",       // 状态栏输出控件的类型，目前仅支持按钮
        "cmd": "open",          // 当按钮触发时，策略中GetCommand函数收到的消息前缀，例如这个例子：open:{"symbol":"LTC_USDT.swap","tradeType":0,"direction":"buy","amount":111}
        "name": "开仓下单",      // 策略界面，状态栏上的按钮上显示的内容，参考上图
        "group": [{             // 当按钮触发时，弹框中的控件配置设置，这一层的group字段值是一个数组，弹框中的控件根据这个数组顺序自上而下排列
            "type": "selected",               // 第一个控件类型是：selected ，下拉框 
            "name": "tradeType",              // 当状态栏按钮触发时，消息中包含该控件的设置内容，tradeType就是当前这个下拉框控件输入的值的键名。如果选择第一个选项「市价单」GetCommand函数收到的消息中就包含 "tradeType":0 的键值对信息。
            "label": "下单类型",               // 按钮触发时，弹框中当前控件的标题
            "description": "市价单、限价单",    // 当前控件的说明信息，鼠标放在控件右侧“小问号”图标上就会显示这个说明信息。
            "default": 0,                     // 当前控件的默认值，例如当前是下拉框控件，如果不做选择，默认为下拉框第一个选项，通常下拉框的默认值指的是下拉框选项的索引，即第一个是0，然后是1，以此类推。如果下拉框的选项options是key-value形式则默认值指的是value。
            "group": "交易设置",               // 弹框中的控件如果很多，可以分组，这个字段可以设置分组信息
            "settings": {                     // 当前这个下拉框的具体设置
                "options": ["市价单", "限价单"],   // options和下拉框相关的设置，用于设置下拉框中的选项，这个字段值是一个数组，依次排列下拉框中的选项。
                "required": true,                // required表示是否设置为必选（必填）内容。
            }
        }, {
            "type": "selected",         // 这也是一个下拉框类型
            "name": "direction",
            "label": "交易方向",
            "description": "买入、卖出",
            "default": "buy",
            "group": "交易设置",
            "settings": {
                "render": "segment",   // 和默认下拉框控件不同的是，通过render字段可以把下拉框替换为“分段选择器”，如上图中的“买入/卖出”控件。
                "required": true,
                "options": [{"name": "买入", "value": "buy"}, {"name": "卖出", "value": "sell"}],   // 使用 key-value方式设置options
            }
        }, {
            "type": "number",           // 数值输入框类型控件
            "name": "price",
            "label": "价格",
            "description": "订单的价格",
            "group": "交易设置",
            "filter": "tradeType==1",   // 过滤器，可以用于确定是否显示当前控件，当tradeType==1时，表示是市价单，所以不需要该控件设置价格，所以不显示。
            "settings": {
                "required": true,       // 当该控件激活显示时为必选（必填）
            }
        }, {
            "type": "number",
            "name": "amount",
            "label": "下单量",
            "description": "订单的下单量",
            "group": "交易设置",
            "settings": {
                "required": true,
            }
        }],
    }

• group 이는 단지 예시일 뿐이므로, 포지션 개설 시 설정하는 주문 방향, 가격, 수량, 주문 유형에 국한되지 않고 실제 설계 및 사용에는 더 많은 요구사항이 있을 수 있습니다. 이익실현 주문이나 손절매 주문과 같은 종료 규칙이 설계될 수도 있습니다. 그래서 새로운 UI는 다음을 지원합니다.group필드는 팝업 상자에서 여러 컨트롤을 그룹화하여 표시하는 데 편리함을 제공합니다(예: 위 스크린샷의 축소된 “거래 설정” 설정).

• required 버튼 구조group필드에 설정된 컨트롤이 증가되었습니다.required설정 필드는 필수(필수)인지 여부를 설정하는 데 사용됩니다. 필수(필수)로 설정되어 있지만 사용 중에 입력(선택)되지 않은 경우 대화형 정보를 보내기 위해 확인(OK) 버튼을 클릭할 수 없으며 빨간색 프롬프트 메시지가 표시됩니다.

• filter 추가됨filter이 필드는 필터 종속성을 설정하는 데 사용됩니다. 예를 들어, 위의 예에서 시장 주문 유형이 선택된 경우 주문 가격은 필요하지 않습니다.type“숫자”입니다name“가격”에 대한 컨트롤은 숨겨져 있습니다.

• render 다음과 같은 기본 유형의 컨트롤(유형 필드 설정)에 대해: 숫자, 문자열, 선택됨, 부울. 추가된 필드render컨트롤 렌더링을 설정하는 데 사용됩니다. 각 컨트롤에는 고유한 다중 렌더링 구성 요소가 있습니다. 예를 들어, 위의 예에서 드롭다운 상자는 두 번 클릭해야 하기 때문에(처음에는 드롭다운 상자를 확장하기 위해) 선택된 드롭다운 상자 컨트롤을 “세그먼트 선택기”로 렌더링하는 것이 더 적절합니다. , 두 번째로 옵션을 선택합니다). 세그먼트 선택기 구성 요소를 사용하여 원하는 옵션을 클릭하고 선택하기만 하면 됩니다.

마지막으로 주의 깊은 독자들은 위의 스크린샷에서 “거래 유형”을 작성한 팝업 상자에 제어 정보가 보이지 않으며 이 “거래 유형”은 “거래 설정” 그룹에 속하지 않는다고 질문할 수 있습니다. (즉:"group": "交易设置"이 설정은 구현됩니다.

다음은 상태 표시줄 테이블의 버튼을 상태 표시줄의 다른 정보에 연결하는 디자인의 데모입니다.createBtn템플릿 기반 기능tmpBtnOpen최종 버튼 구조를 구축하고, 구축 중에 버튼 구조에 다른 정보를 입력합니다.

// 构造按钮的时候，绑定当前行的品种名称等信息，给按钮的弹框增加一个控件，并排在首位
var btnOpen = createBtn(tmpBtnOpen, [{"type": "string", "name": "symbol", "label": "交易品种", "default": m["symbol"], "settings": {"required": true}}])

따라서 최종 효과는 전략 인터페이스의 상태 표시줄을 클릭할 때입니다.symbol~을 위한BNB_USDT.swap이 행의 버튼을 클릭하면 팝업 창의 “거래 유형” 입력 상자가 자동으로 채워집니다.BNB_USDT.swap。

이 글에서는 새로운 버전의 UI 적용의 일부만을 소개합니다. 전체 길이가 너무 길 수 없으므로 다음 글에서 다른 수요 시나리오의 디자인에 대해 계속 논의하겠습니다.

귀하의 지원에 감사드립니다!