一、引用
此前的系列文章已基本完成了Notepad++
的AI插件的功能開發,但是此前使用的配置為JSON
配置文件,不支持界面配置。
本章在此基礎上集成支持配置界面,這樣不需要手工修改配置文件,直接在界面上操作,方便快捷。
注
:項目已開源、鏡像,歡迎Start
、Fork
使用和指正。
二、配置界面設計
在插件的菜單欄中支持參數配置
,用戶點擊該菜單時彈出配置對話框,在該配置界面對配置進行增刪改查。
{"platform": "infini","timeout": 90,"platforms": {"infini": {"enable_ssl": true,"base_url": "cloud.infini-ai.com","authorization": {"type": "Bearer","data": "sk-xxx"},"model_name": "deepseek-r1-distill-qwen-32b","models": [ "deepseek-r1-distill-qwen-32b", "deepseek-r1", "deepseek-v3" ],"generate_endpoint": {"method": "post","api": "/maas/v1/completions","prompt": ""},"chat_endpoint": {"method": "post","api": "/maas/v1/chat/completions","prompt": ""},"models_endpoint": {}}}
}
根據現有的配置文件格式,對配置界面分為兩塊區域,區域一配置插件相關的參數,區域二設計一個AI平臺的下拉列表
框,支持AI平臺相關的參數。
考慮到AI平臺有多個接口(雖然現在只用了對話接口),因此接口部分使用表單
,但表單不方便修改,因此需要新增一個字段編輯對話框,雙擊列表行時支持編輯列表行。
這樣,界面設計差不多這樣了。因為使用原生的Windows編程
,因此需要花費較多的時間處理界面、事件,對Windows接口也是半生不熟,一邊做一邊查,所以還是比較費時間的,整體功能流程如下:
先看下效果圖:
三、參數配置界面
1. 創建對話框資源
- 先在插件的資源文件中新建一個ID為
IDD_DIALOG_PLUG_CONFIG
的對話框,設計菜單界面,如下:
2. 新建一個類,關聯該對話框資源
PluginConfigDlg::PluginConfigDlg(HINSTANCE hInstance, Scintilla::PluginConfig& plugConf) : m_hInstance(hInstance), m_plugConfig(plugConf)
{// 創建無模式對話框m_hDlg = CreateDialogParam(m_hInstance,MAKEINTRESOURCE(IDD_DIALOG_PLUG_CONFIG),nullptr,DlgProc,reinterpret_cast<LPARAM>(this));if (m_hDlg) {InitControls();LoadConfig();}
}
在構造函數中創建對話框,關聯對話框資源ID,并指定消息處理函數為DlgProc
:
INT_PTR CALLBACK PluginConfigDlg::DlgProc(HWND hDlg, UINT uMsg, WPARAM wParam, LPARAM lParam) {if (uMsg == WM_INITDIALOG) {// 關聯類實例指針到窗口SetWindowLongPtr(hDlg, GWLP_USERDATA, lParam);}// 獲取類實例指針PluginConfigDlg* pThis = reinterpret_cast<PluginConfigDlg*>(GetWindowLongPtr(hDlg, GWLP_USERDATA));if (pThis) {return pThis->RealDlgProc(hDlg, uMsg, wParam, lParam);}return FALSE;
}
在DlgProc
中處理WM_INITDIALOG
消息,關聯類實例指針到窗口,并將事件透傳到類的實際消息處理函數RealDlgProc
,RealDlgProc
可以便捷地訪問操作類對象成員變量及函數。
3. 初始化界面
因為界面部分控件是下拉組合框和列表,因此需先初始化該部分,主要是初始化下拉列表數據、表單頭,方便后續直接使用:
void PluginConfigDlg::InitControls()
{// 授權類型HWND hWnd = GetDlgItem(m_hDlg, IDC_COMBO_AUTH_TYPE);SendMessage(hWnd, CB_RESETCONTENT, 0, 0);SendMessageW(hWnd, CB_ADDSTRING, 0, (LPARAM)L"無");SendMessageW(hWnd, CB_ADDSTRING, 0, (LPARAM)L"Basic");SendMessageW(hWnd, CB_ADDSTRING, 0, (LPARAM)L"Bearer");SendMessageW(hWnd, CB_ADDSTRING, 0, (LPARAM)L"ApiKey");// 接口列表HWND hList = GetDlgItem(m_hDlg, IDC_LIST_ENDPOINT);// 1. 設置基礎樣式(必須包含 LVS_REPORT)SetWindowLongW(hList, GWL_STYLE, GetWindowLongW(hList, GWL_STYLE) | LVS_REPORT | // 報表視圖LVS_SINGLESEL // 禁止多選);// 2. 配置擴展樣式ListView_SetExtendedListViewStyle(hList, LVS_EX_GRIDLINES | // 顯示網格線LVS_EX_FULLROWSELECT // 整行選中);// 3. 初始化列頭LVCOLUMNW lvc = {0};lvc.mask = LVCF_FMT | LVCF_WIDTH | LVCF_TEXT;// 批量添加列const struct {int width;const wchar_t* title;} columns[] = {{50, L"名稱"},{50, L"方法"},{300, L"接口"},{150, L"參數"}};for (size_t i = 0; i < _countof(columns); ++i) {lvc.fmt = LVCFMT_CENTER;lvc.cx = columns[i].width;lvc.pszText = const_cast<LPWSTR>(columns[i].title);ListView_InsertColumn(hList, i, &lvc);}
}
然后是將配置文件中的內容在界面上顯示,設置超時、設置當前平臺:
bool PluginConfigDlg::LoadConfig()
{SetDlgItemTextA(m_hDlg, IDC_EDIT_TIMEOUT, std::to_string(m_plugConfig.timeout).c_str());int nSel = 0;HWND hWnd = GetDlgItem(m_hDlg, IDC_COMBO_PLATFORM);SendMessage(hWnd, CB_RESETCONTENT, 0, 0);int nIdx = 0;for (auto& p : m_plugConfig.platforms){SendMessageA(hWnd, CB_ADDSTRING, 0, (LPARAM)p.first.c_str());if (!Scintilla::String::icasecompare(p.first, m_plugConfig.platform)){nSel = nIdx;}nIdx++;}SendMessage(hWnd, CB_SETCURSEL, (WPARAM)nSel, 0);auto& platform = m_plugConfig.Platform();Load(platform);return true;
}
其中平臺配置信息只顯示單個,即當前選中的平臺,啟動時顯示當前配置的平臺信息,然后調用Load
函數加載該平臺信息配置。考慮到配置需要支持增刪改查,因此通過平臺組合框下拉列表
可以切換到不同平臺:
void PluginConfigDlg::Load(const Scintilla::PlatformConfig& platform)
{// SSLCheckDlgButton(m_hDlg, IDC_CHECK_SSL, platform.enable_ssl ? BST_CHECKED : BST_UNCHECKED);// 授權類型HWND hWnd = GetDlgItem(m_hDlg, IDC_COMBO_AUTH_TYPE);SendMessage(hWnd, CB_SETCURSEL, (WPARAM)(int)platform.authorization.eAuthType, 0);// 授權數據SetDlgItemTextA(m_hDlg, IDC_EDIT_AUTH_DATA, platform.authorization.auth_data.c_str());// 根地址SetDlgItemTextA(m_hDlg, IDC_EDIT_ROOT_URL, platform.base_url.c_str());// 模型名稱int nSel = 0;int nIdx = 0;hWnd = GetDlgItem(m_hDlg, IDC_COMBO_MODEL_NAME);SendMessage(hWnd, CB_RESETCONTENT, 0, 0);for (auto& m : platform.models){SendMessageA(hWnd, CB_ADDSTRING, 0, (LPARAM)m.c_str());if (m == platform.model_name){nSel = nIdx;}nIdx++;}SendMessage(hWnd, CB_SETCURSEL, (WPARAM)nSel, 0);hWnd = GetDlgItem(m_hDlg, IDC_LIST_ENDPOINT);ListView_DeleteAllItems(hWnd);if (!platform.base_url.empty()){auto pE = &platform.chat_endpoint;ListViewAddRow(hWnd, { "對話", pE->method, pE->api, pE->prompt});pE = &platform.generate_endpoint;ListViewAddRow(hWnd, { "生成", pE->method, pE->api, pE->prompt});pE = &platform.models_endpoint;ListViewAddRow(hWnd, { "模型", pE->method, pE->api, pE->prompt});}
}
4. 切換平臺
處理平臺切換事件,并顯示切換后平臺信息
#define OnDlgItemEvent(nItemId, nEventId, fnCall) if(LOWORD(wParam) == nItemId && HIWORD(wParam) == nEventId) { fnCall(); return TRUE; }
INT_PTR PluginConfigDlg::RealDlgProc(HWND hDlg, UINT uMsg, WPARAM wParam, LPARAM lParam)
{switch (uMsg) {case WM_CLOSE:DestroyWindow(m_hDlg);return TRUE;case WM_INITDIALOG:return TRUE;case WM_COMMAND:{OnDlgItemEvent(IDC_COMBO_PLATFORM, CBN_SELCHANGE, OnPlatformChange);OnDlgItemEvent(IDC_COMBO_MODEL_NAME, CBN_SELCHANGE, OnModelChange);OnDlgItemEvent(IDC_BUTTON_MODEL_SAVE, BN_CLICKED, OnSaveMode);OnDlgItemEvent(IDC_BUTTON_MODEL_DEL, BN_CLICKED, OnRemoveModel);OnDlgItemEvent(IDC_BUTTON_PLATFORM_SAVE, BN_CLICKED, OnSavePlatform);OnDlgItemEvent(IDC_BUTTON_PLATFORM_DEL, BN_CLICKED, OnRemovePlatform);OnDlgItemEvent(IDCANCEL, BN_CLICKED, LoadConfig);OnDlgItemEvent(IDOK, BN_CLICKED, SaveConfig);}break;case WM_NOTIFY:LPNMITEMACTIVATE pNmItem = (LPNMITEMACTIVATE)lParam;if (pNmItem->hdr.idFrom == IDC_LIST_ENDPOINT && pNmItem->hdr.code == NM_DBLCLK) {OnEndpointListViewDBClick(pNmItem);return TRUE;}break;}return FALSE;
}
在窗口事件處理函數中,處理WM_COMMAND
消息,根據消息參數識別出控件對象和消息類型,處理平臺切換是OnDlgItemEvent(IDC_COMBO_PLATFORM, CBN_SELCHANGE, OnPlatformChange)
,實現內容在函數OnPlatformChange
中:
void PluginConfigDlg::OnPlatformChange()
{std::string name;if (!GetComboSelectedText(GetDlgItem(m_hDlg, IDC_COMBO_PLATFORM), name) || name.empty()){return;}auto e = m_plugConfig.platforms.find(name);if (e == m_plugConfig.platforms.end()){return;}Load(e->second);
}
獲取ComboBox
的當前選中項,注意:不能取當前控件的文本即GetWindowText
,否則取到的是選中前的內容。然后調用Load
函數加載切換后的AI平臺配置信息。
5. 模型刪除
void PluginConfigDlg::OnRemoveModel()
{HWND hCombo = GetDlgItem(m_hDlg, IDC_COMBO_MODEL_NAME);if (hCombo == nullptr){return;}auto name = String::Trim(GetComboSelectedText(IDC_COMBO_MODEL_NAME));if (name.empty()){ShowConfigError("請輸入或選擇當前模型名稱");return;}auto nRet = ShowMsgBox(String::Format("是否要刪除模型【%s】配置?", name.c_str()), "刪除確認", MB_YESNO | MB_ICONQUESTION);if (nRet != IDYES){return;}SendMessageA(hCombo, CB_DELETESTRING, 0, (LPARAM)name.c_str());
}
刪除當前選中項的模型名稱,僅是從列表中刪除,不是從對象的內存中刪除,后續通過保存平臺配置時更新刪除后的列表。
6. 模型添加
void PluginConfigDlg::OnSaveMode()
{HWND hCombo = GetDlgItem(m_hDlg, IDC_COMBO_MODEL_NAME);if (hCombo == nullptr){return;}auto name = String::Trim(GetComboSelectedText(IDC_COMBO_MODEL_NAME));if (name.empty()){ShowConfigError("請輸入或選擇當前模型名稱");return;}SendMessageA(hCombo, CB_ADDSTRING, 0, (LPARAM)name.c_str());
}
刪除當前選中項的模型名稱,和刪除類似,僅是從列表中刪除。
7.刪除平臺配置
void PluginConfigDlg::OnRemovePlatform()
{HWND hPlatform = GetDlgItem(m_hDlg, IDC_COMBO_PLATFORM);if (hPlatform == nullptr){return;}std::string name;auto pPlat = GetCurSelPlatform(name);if (!pPlat){ShowConfigError("請選擇當前平臺名稱");return;}auto nRet = ShowMsgBox(String::Format("是否要刪除平臺【%s】配置?", name.c_str()), "刪除確認", MB_YESNO | MB_ICONQUESTION);if (nRet != IDYES){return;}SendMessageA(hPlatform, CB_DELETESTRING, 0, (LPARAM)name.c_str());m_plugConfig.platforms.erase(name);// 清空數據Load(PlatformConfig());
}
獲取當前選中的平臺配置,然后從列表和內存中刪除該平臺配置,刪除后清空平臺配置信息(通過加載一個空對象實現),此外為防止誤刪,刪除前做了彈框確認。
8.修改或新增平臺配置
bool PluginConfigDlg::OnSavePlatform()
{HWND hPlatform = GetDlgItem(m_hDlg, IDC_COMBO_PLATFORM);if (hPlatform == nullptr){return false;}std::string name;auto pPlat = GetCurSelPlatform(name);if (name.empty()){ShowConfigError("請輸入或選擇當前平臺名稱");return false;}Scintilla::PlatformConfig plat;if (!Save(plat)){return false;}if (pPlat == nullptr){// 新增SendMessageA(hPlatform, CB_ADDSTRING, 0, (LPARAM)name.c_str());m_plugConfig.platforms[name] = plat;}else{*pPlat = plat;}m_plugConfig.Save("");return true;
}
先把界面上平臺信息配置保存到一個臨時變量中(防止保存了部分就返回),然后根據是否已存在該名稱的平臺配置決定是新增還是更新信息。
9. 響應接口列表行雙擊事件
INT_PTR PluginConfigDlg::RealDlgProc(HWND hDlg, UINT uMsg, WPARAM wParam, LPARAM lParam)
{switch (uMsg) {case WM_NOTIFY:LPNMITEMACTIVATE pNmItem = (LPNMITEMACTIVATE)lParam;if (pNmItem->hdr.idFrom == IDC_LIST_ENDPOINT && pNmItem->hdr.code == NM_DBLCLK) {OnEndpointListViewDBClick(pNmItem);return TRUE;}break;}return FALSE;
}
處理窗口的WM_NOTIFY
消息,然后根據控件ID和事件類型識別出是列表雙擊事件,然后列表雙擊編輯函數OnEndpointListViewDBClick
。
四、字段編輯界面
字段編輯框設計為一個通用的編輯窗口,提供一個字段組合,然后界面顯示并支持編輯字段信息。
步驟也是和創建配置對話框差不多,不過這里創建的是一個模態對話框,不使用Show
顯示,而是使用DoModal
模態對話框顯示。
1. 調用編輯窗口更新字段
void PluginConfigDlg::OnEndpointListViewDBClick(LPNMITEMACTIVATE& pNmItem)
{if (pNmItem == nullptr){return;}int nRow = pNmItem->iItem;if (nRow < 0){return;}std::map<std::string, std::string> fields;if (ListViewGetRow(GetDlgItem(m_hDlg, IDC_LIST_ENDPOINT), nRow, fields) <= 0){return;}FieldEditDlg dlg(m_hInstance, m_hDlg);for (auto& [k, v] : fields){dlg.m_mapField[k] = { v };}dlg.m_mapField["方法"].options = { "post", "get" };dlg.m_mapField["方法"].type = FieldEditDlg::FieldType::Combo;dlg.m_strTitle = "接口參數設置";dlg.m_nLabelWidth = 40;if (dlg.DoModal() != IDOK){return;}std::vector<std::string> vs;std::vector<std::string> names = { "名稱", "方法", "接口", "參數" };for (auto& name : names){auto e = dlg.m_mapField.find(name);if (e == dlg.m_mapField.end()){return;}vs.push_back(e->second.val);}ListViewSetRow(GetDlgItem(m_hDlg, IDC_LIST_ENDPOINT), nRow, vs);
}
這里使用map
存儲字段,感覺使用vector
更合適,有序且字段存取方便,后續改一下。
2. 創建模態編輯窗口
#pragma once
#include <windows.h>
#include "PluginConf.h"
#include <commctrl.h>namespace Ui
{class Util{public:// 局長顯示窗口static void Show(HWND hWnd, bool bShow, HWND hParent = nullptr);static std::string GetText(HWND hWnd);};
}class FieldEditDlg
{
public:enum class FieldType{Edit,Combo,};struct Field{std::string val;std::vector<std::string> options;FieldType type = FieldType::Edit;bool readonly = false;};FieldEditDlg(HINSTANCE hInstance, HWND hParent);~FieldEditDlg();static INT_PTR CALLBACK DlgProc(HWND hDlg, UINT uMsg, WPARAM wParam, LPARAM lParam);INT_PTR DoModal();private:INT_PTR RealDlgProc(HWND hDlg, UINT uMsg, WPARAM wParam, LPARAM lParam);void CreateDynamicControls();void OnInitDialog();void OnSave();public:std::map<std::string, Field> m_mapField;int m_nLabelWidth = 100;int m_nBoxWidth = 300;std::string m_strTitle = "字段設置";private:HINSTANCE m_hInstance = nullptr;HWND m_hDlg = nullptr;HWND m_hParent = nullptr;HFONT m_hFont = nullptr;std::map<HWND, std::string> m_hwndMap;
};
注意,這里不在構造函數中初始化創建窗口,而是在DoModal
中創建,并等待窗口結束:
INT_PTR FieldEditDlg::DoModal()
{// 創建模態對話框(需提前定義對話框模板ID,假設為IDD_FIELD_EDIT_DLG)return DialogBoxParam(m_hInstance, MAKEINTRESOURCE(IDD_DIALOG_EDIT_FIELD),m_hParent,FieldEditDlg::DlgProc,reinterpret_cast<LPARAM>(this));
}// 對話框消息處理
INT_PTR CALLBACK FieldEditDlg::DlgProc(HWND hDlg, UINT uMsg, WPARAM wParam, LPARAM lParam)
{if (uMsg == WM_INITDIALOG) {// 關聯類實例指針到窗口SetWindowLongPtr(hDlg, GWLP_USERDATA, lParam);auto* pThis = reinterpret_cast<FieldEditDlg*>(lParam);pThis->m_hDlg = hDlg;pThis->OnInitDialog();Ui::Util::Show(hDlg, true);return TRUE;}// 獲取類實例指針auto pThis = reinterpret_cast<FieldEditDlg*>(GetWindowLongPtr(hDlg, GWLP_USERDATA));if (pThis) {return pThis->RealDlgProc(hDlg, uMsg, wParam, lParam);}return FALSE;
}INT_PTR FieldEditDlg::RealDlgProc(HWND hDlg, UINT uMsg, WPARAM wParam, LPARAM lParam)
{switch (uMsg) {case WM_INITDIALOG: {SetWindowLongPtr(hDlg, GWLP_USERDATA, (LONG_PTR)this);OnInitDialog();return TRUE;}case WM_COMMAND: {int wmId = LOWORD(wParam);int wmEvent = HIWORD(wParam);if (wmId == IDOK && wmEvent == BN_CLICKED) {OnSave();EndDialog(m_hDlg, IDOK);return TRUE;} else if (wmId == IDCANCEL && wmEvent == BN_CLICKED) {EndDialog(m_hDlg, IDCANCEL);return TRUE;}break;}case WM_CLOSE:EndDialog(m_hDlg, IDCLOSE);return TRUE;}return FALSE;
}void FieldEditDlg::OnInitDialog()
{if(!m_mapField.empty()) CreateDynamicControls();SetWindowTextA(m_hDlg, m_strTitle.c_str());
}
3. 更新保存數據
void FieldEditDlg::OnSave()
{for (auto& [k, v] : m_hwndMap){m_mapField[v].val = Ui::Util::GetText(k);}
}
5. 總結說明
這一篇文章主要介紹了關于配置的兩個對話框的實現,完成了手工編輯JSON
配置文件到界面快捷配置的革命轉換,本文主要涉及的技術要點如下: