feat: Generate reverse host list

src/renderer/index.ts

@@ -8,6 +8,41 @@ import {
 } from './components';
 import StyleRaw from './style.css?raw';
 
+const buildHostList = (hosts: string[], type: string) => {
+    const result: HTMLElement[] = [];
+
+    hosts.forEach((host, index) => {
+        const dom = {
+            container: document.createElement('setting-item'),
+            input: document.createElement('input'),
+            inputContainer: document.createElement('div'),
+            deleteBtn: document.createElement('setting-button'),
+        };
+
+        dom.container.classList.add('setting-host-list-item');
+        dom.container.dataset.direction = 'row';
+        dom.container.dataset.configArrayKey = type;
+        dom.container.dataset.configArrayIndex = `${index}`;
+
+        dom.input.classList.add('q-input__inner');
+        dom.input.type = 'url';
+        dom.input.value = host;
+
+        dom.inputContainer.classList.add('q-input');
+        dom.inputContainer.appendChild(dom.input);
+
+        dom.deleteBtn.innerHTML = '删除';
+        dom.deleteBtn.dataset.type = 'secondary';
+
+        dom.container.appendChild(dom.inputContainer);
+        dom.container.appendChild(dom.deleteBtn);
+
+        result.push(dom.container);
+    });
+
+    return result;
+}
+
 // 打开设置界面时触发
 
 async function onSettingWindowCreated(view: Element) {
@@ -46,10 +81,15 @@ async function onSettingWindowCreated(view: Element) {
             SettingItem('启用 HTTP 事件上报', null,
                 SettingSwitch('ob11.enableHttpPost', config.ob11.enableHttpPost, { 'control-display-id': 'config-ob11-httpPost' }),
             ),
-            SettingItem('HTTP 事件上报地址', null,
-                '<div></div>',
-                'config-ob11-httpPost', config.ob11.enableHttpPost
-            ),
+            `<div class="config-host-list" id="config-ob11-httpPost" ${config.ob11.enableHttpPost ? '' : 'is-hidden'}>
+                <setting-item data-direction="row">
+                    <div>
+                        <setting-text>HTTP 事件上报地址</setting-text>
+                    </div>
+                    <setting-button data-type="primary">添加</setting-button>
+                </setting-item>
+                <div id="config-ob11-httpPost-list"></div>
+            </div>`,
             SettingItem('启用正向 WebSocket 服务', null,
                 SettingSwitch('ob11.enableWs', config.ob11.enableWs, { 'control-display-id': 'config-ob11-wsPort' }),
             ),
@@ -60,14 +100,19 @@ async function onSettingWindowCreated(view: Element) {
             SettingItem('启用反向 WebSocket 服务', null,
                 SettingSwitch('ob11.enableWsReverse', config.ob11.enableWsReverse, { 'control-display-id': 'config-ob11-wsHosts' }),
             ),
+            `<div class="config-host-list" id="config-ob11-wsHosts" ${config.ob11.enableWsReverse ? '' : 'is-hidden'}>
+                <setting-item data-direction="row">
+                    <div>
+                        <setting-text>反向 WebSocket 监听地址</setting-text>
+                    </div>
+                    <setting-button data-type="primary">添加</setting-button>
+                </setting-item>
+                <div id="config-ob11-wsHosts-list"></div>
+            </div>`,
             SettingItem('反向 WebSocket 服务心跳间隔',
                 '控制每隔多久发送一个心跳包，单位为毫秒',
                 `<div class="q-input"><input class="q-input__inner" data-config-key="heartInterval" type="number" min="1000" value="${config.heartInterval}" placeholder="${config.heartInterval}" /></div>`,
             ),
-            SettingItem('反向 WebSocket 监听地址', null,
-                '<div></div>',
-                'config-ob11-wsHosts', config.ob11.enableWsReverse
-            ),
             SettingItem('Access token', null,
                 `<div class="q-input" style="width:210px;"><input class="q-input__inner" data-config-key="token" type="text" value="${config.token}" placeholder="未设置" /></div>`,
             ),
@@ -169,6 +214,17 @@ async function onSettingWindowCreated(view: Element) {
         });
     });
 
+    // 生成反向地址列表
+    const httpHostContainerDom = doc.querySelector('#config-ob11-httpPost-list');
+    buildHostList(ob11Config.httpHosts, 'httpHosts').forEach(dom => {
+        httpHostContainerDom.appendChild(dom);
+    });
+
+    const wsHostContainerDom = doc.querySelector('#config-ob11-wsHosts-list');
+    buildHostList(ob11Config.wsHosts, 'wsHosts').forEach(dom => {
+        wsHostContainerDom.appendChild(dom);
+    });
+
     // 保存按钮
     doc.querySelector('#config-ob11-save').addEventListener('click', () => {
         config.ob11 = ob11Config;

src/renderer/style.css

@@ -3,6 +3,16 @@ setting-item[is-hidden] + setting-divider {
   display: none !important;
 }
 
+.config-host-list {
+  width: 100%;
+  padding-left: 16px;
+  box-sizing: border-box;
+}
+.config-host-list[is-hidden],
+.config-host-list[is-hidden] + setting-divider {
+  display: none !important;
+}
+
 setting-item .q-input {
   height: 24px;
   width: 100px;
@@ -37,3 +47,7 @@ setting-item .q-input input[type=number].q-input__inner::-webkit-inner-spin-butt
   -webkit-appearance: none;
   margin: 0;
 }
+
+.config-host-list setting-item.setting-host-list-item .q-input {
+  width: 260px;
+}