wip: list

frontend/src/page/home/home.css

@@ -37,7 +37,8 @@ input.body-connections-search-input {
     outline: none;
     text-indent: 5px;
 }
-div.body-connections-search-dismiss{
+
+div.body-connections-search-dismiss {
     border: none;
     background: none;
     outline: none;
@@ -48,3 +49,35 @@ div.body-connections-search-dismiss{
     justify-content: center;
     align-items: center;
 }
+
+div.body-connections-list-item {
+    height: 36px;
+}
+
+div.body-connections-list-item.active {
+    background: aquamarine;
+}
+
+div.body-connections-list-item:first-child {
+    margin-top: 2px;
+}
+
+button.body-connections-list-item-button {
+    background: none;
+    border: none;
+    height: 100%;
+    width: 100%;
+    padding: 0 6px;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    cursor: pointer;
+    font-size: 14px;
+}
+
+button.body-connections-list-item-button:hover {
+    background-color: var(--colorBrandBackground);
+    color: rgba(245, 245, 245, 1);
+}
+
+

frontend/src/page/home/home.tsx

@@ -26,6 +26,23 @@ function Home() {
         })
     }, []);
 
+    async function handleConnect(item: Connection) {
+        console.log('[DEBUG] db click item =', item)
+        for (const c of connectionList) {
+            if(c.active) {
+                return
+            }
+        }
+
+        let res = await Dial("/api/connection/connect", {id: item.id})
+        if (res.status === 200) {
+            dispatchMessage("连接成功", "success")
+            for (const c of connectionList) {
+                c.active = c.id === item.id;
+            }
+        }
+    }
+
     return (
         <div className="container">
             <div className="header">
@@ -47,7 +64,14 @@ function Home() {
                             <DismissRegular/>
                         </div>
                     </div>
-                    <div className="body-connections-list"></div>
+                    <div className="body-connections-list">
+                        {connectionList.map(item => {
+                            return <div key={item.id} className={item.active?'body-connections-list-item active':'body-connections-list-item'}>
+                                <button onDoubleClick={() => handleConnect(item)}
+                                        className='body-connections-list-item-button'>{item.name}</button>
+                            </div>
+                        })}
+                    </div>
                 </div>
                 <div className="body-content"></div>
             </div>

frontend/wailsjs/go/controller/App.d.ts

@@ -1,4 +1,7 @@
 // Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
 // This file is automatically generated. DO NOT EDIT
+import {context} from '../models';
+
+export function Init(arg1:context.Context):Promise<void>;
 
 export function Invoke(arg1:string,arg2:string):Promise<string>;

frontend/wailsjs/go/controller/App.js

@@ -2,6 +2,10 @@
 // Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
 // This file is automatically generated. DO NOT EDIT
 
+export function Init(arg1) {
+  return window['go']['controller']['App']['Init'](arg1);
+}
+
 export function Invoke(arg1, arg2) {
   return window['go']['controller']['App']['Invoke'](arg1, arg2);
 }