佈局、組件功能說明
目標
桌面端的組件工具操作使用說明及佈局（自定義佈局、自適應佈局）操作介紹
名詞解釋
術語 / 縮略詞 | 說明 |
單元組件 | 或稱“原子組件”，最小化承載一個功能的組件。 |
業務組件 | 基於多個單元組件組合，承載某個業務的組件。 |
主窗口 | 桌面端啟動的主窗體。 |
面板窗口 | 根據投資者的實操需求，利用單元組件或業務組件，根據自身習慣和喜好，自定義佈局拼接出針對某種使用場景的面板。 |
組件窗口 | 也是窗口的一種，用於承載獨立組件的顯示。如組件脫離後顯示的窗口為單獨的組件窗口。 |
系統面板 | 系統默認的自選、個股、行情、交易面板，其中系統面板標題目前不可編輯、不可刪除，但可以自定義修改面板內的組件內容排版。 |
自適應佈局 | 組件拉升時會自動擠壓周圍其他組件，若頁面只有一個組件會默認全部佔滿當前屏幕，好處在於會自動適配大小屏，組件之間大小會自適應。 |
自定義佈局 | 又可稱為：畫布佈局。 |
1.組件說明
1.1 單元組件
單元組件或稱“原子組件”，最小化承載一個功能的組件。目前我們的行情報價、逐筆成交等單個功能模塊都是單元組件。
好處在於，用戶可以以單元組件拼出自己需要的場景，或者在脫離主窗口的情況下，單元組件同樣能夠發揮出價值或作用，比如在看新聞資訊的時候拖個自選列表或者個股的圖表放旁邊同時觀看。
1.2 業務組件
- 業務組件是基於多個單元組件組合，承載某個業務的組件。
- 業務組件的好處在於業務組件能夠滿足大多數場景下，用戶需要添加一個組件就能滿足目的，而不是一次一次添加多個。
- 如迷你報價為業務組件，集合了行情報價、逐筆成交、買賣盤口和經紀席位功能。
2.組件操作說明
2.1 單個組件操作說明
2.1.1 添加組件
右上角增加工具箱入口，集合了所有的功能組件，用戶可以單擊添加組件，拖拽到當前面板中；
2.1.2 組件大小可隨意拖拉
每個組件的大小都可以隨意拖拉調整大小寬高，在組件邊緣範圍內可隨意拖拉擠壓。
2.1.3 組件右上角操作
- 複製：點擊複製，會復制當前組件生成一個新的組件，以組件脫離的窗口顯示出來。
- 最大化：點擊組件會將當前組件最大化撐滿，點擊右上角恢復按鈕，會自動恢復到當前組件默認大小；
- 脫離：點擊脫離，組件支持脫離當前窗口為獨立窗口；方便使用其他軟件的時候，保留小視圖觀看。
- 移除：點擊移除，會移除當前組件。 如果是發現移除錯或拖動錯，在系統的自選、個股、行情、交易、選股器面板下，可點擊組件工具箱底部的“重置佈局”。其中自定义面板不允許重置佈局。
2.2 組件聯動說明
2.2.1 自定義聯動分組
系統面板中的組件默認為聯動，目前不支持設置聯動分組。而新開的自定義面板以及脫離的組件允許用戶自定義設置聯動分組，分為以下幾個分組：
- 默認聯動，所有組件都聯動，不用設置分組；
- 不聯動，所選組件、標的無聯動；
- 聯動分組 1、聯動分組 2……聯動分組 9，點擊聯動後，組件右上角頭部會標識當前聯動分組，相同分組的組件會自動聯動。
- 新建佈局內的組件默認默認不聯動，需要用戶自行決定是否需要設置聯動分組；
2.2.2 聯動參數
- 股票聯動，如圖表和交易組件，進行股票聯動，目前大部分組件都是股票聯動。
- 幣種聯動，如資產總覽的幣種和融資狀態、現金明細組件的幣種默認聯動；
2.2.3 單向聯動和雙向聯動
- 目前現有聯動方向都是雙向聯動，點擊組件 A，組件 B 也跟隨聯動，反之點擊組件 B，組件 A 也跟隨聯動；
- 單向聯動，組件之間單方向聯動，點擊組件 A，組件 B 也跟隨聯動，反之則不會；目前暫無業務場景，後續會逐步增加。
2.3 組件頭部搜索
組件頭部帶有搜索，分為如以下情況：
- 有些組件帶有股票標的屬性的，如圖表、盤口、行情報價、逐筆成交、迷你報價等組件。
- 這些帶有股票標的屬性的組件脫離後，組件頭部自帶股票搜索功能，方便進行股票標的切換。
- 新開的自定義頁面，帶有股票標的屬性的組件頭部自帶搜索，方便進行股票標的切換。
2.4 組件釘住操作
組件脫離後，點擊其他軟件或者主窗口，容易把當前組件蓋住，若有組件層級置頂需要，可點擊組件右上角的釘住功能，可以固定懸浮在頂部。
若想取消釘住功能，可再次點擊釘住，取消組件層級置頂。
3.頁面佈局
3.1 系統面板、自定義佈局、自適應面板
- 系統面板：系統默認的自選、個股、行情、交易、選股器面板，其中系統面板菜單不可編輯、不可刪除，但可以自主修改面板內的組件內容排版。
- 自適應佈局：拖動組件進自適應佈局內，組件拉升時會自動擠壓周圍其他組件，若頁面只有一個組件會默認全部佔滿當前屏幕，會自動適配大小屏，組件之間大小會自適應。
- 自定義面板（畫布佈局）：用戶可進行自定義面板佈局，將組件根據個人喜好擺放在佈局內，組件大小相較固定，窗口大小可拖動使用。
佈局 | 自適應佈局 | 自定義佈局（畫布佈局） |
支持範圍 | 現有的系統面板 | 新開標籤頁 - 自定義佈局； |
是否大小屏適配 | 是會根據屏幕大小自動適配組件大小 | 否若組件大小超過當前屏幕了，可以滑動查看完整組件大小 |
組件之間是否可重疊展示 | 否不可重疊展示，會擠壓其他組件 | 可以重疊展示組件大小不受擠壓 |
好處 | 根據屏幕自動適配大小，適配性較好；適合小白用戶； | 組件大小及數量不受屏幕限制，可隨意擺放，不影響組件功能使用佈局的自定義性比較強，適合自定義頁面佈局 |
不足 | 受屏幕大小限制，多個大組件放一起時，會被擠壓的比較小，影響組件功能使用 | 存在一定學習成本，適合專業投資者 |
畫面效果（預覽） |  |  |
3.2 自適應佈局
- 自適應佈局入口：點擊新開標籤頁，兩種佈局選擇，選擇“自適應佈局”，點擊空佈局可打開自適應佈局畫面。
具體操作如下：
（1）點擊菜單欄右側的“+”，可以佈局選擇；（2）選擇“自適應佈局”；（3）選擇“空佈局”。 
3.3 自定義佈局（畫布佈局）
- 自定義佈局（畫布佈局）入口：點擊新開標籤頁，兩種佈局選擇，選擇“自定義佈局”，點擊空佈局可打開自定義佈局畫面。 具體操作如下： （1）點擊菜單欄右側的“+”，可以佈局選擇；（2）選擇“自定義佈局”；（3）選擇“空佈局”。
3.4 添加組件進佈局內
- 自定義佈局：新開標籤頁後，頁面中將出現組件工具箱，可選擇需要的組件，將組件拖動進佈局頁面內
- 自適應佈局：
（1）點擊添加相應的組件，喚起功能模塊。如點擊“圖表”組件，喚起圖表功能組件彈窗。
（2）可直接鼠標選中“圖表”組件，拖拽到當前自定義面板中。若面板只有 1 個組件的話，目前是鋪滿當前面板。
（3）以此類推，可以添加別的組件拖拽到當前面板中，會有高亮顯示即將拖動的位置。
如添加行情報價組件，拖拽到圖表頭部，圖表頭部會顯示高亮邊框，鬆開拖拽，行情報價會顯示在圖表的上方。點擊行情報價組件和圖表組件的中間部分，可擠壓調整彼此組件的大小。
（4）也可以結合上文講的組件操作、組件聯動、組件頭部搜索、組件釘住等各種功能，基於自己需要，進行各種聯合操作。