1<!DOCTYPE html> 2<html lang="en" style="width: 100%; height: 100%;"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport3" content="width=device-width, initial-scale=1.0"> 6 <title>Napi</title> 7</head> 8<style type="text/css"> 9 body { 10 background-color: #000000; 11 margin:0 auto; 12 font-family: Consolas, sans-serif; 13 } 14 a { 15 text-decoration: none; 16 } 17 18 button.button { 19 background-color: #ffffff; 20 font-family: Consolas, sans-serif; 21 font-size: 16px; 22 border-radius: 3px; 23 border-color: #C4C4C4; 24 align-self: center; 25 border: 1px solid #C4C4C4; 26 outline: none; 27 width: 100px; 28 height:24px 29 } 30 31 button.button:hover { 32 background: #4B97D9; 33 color: #fff; 34 border: 0px; 35 font-family: Consolas, sans-serif; 36 font-size: 16px; 37 width: 100px; 38 height: 24px 39 } 40 41 input.text:focus { 42 outline: 2px solid #4B97D9; 43 border: 0px; 44 } 45 46 input.text { 47 outline: 2px solid #C4C4C4; 48 border: 0px; 49 } 50 .tabs{ 51 position: relative; 52 height: 800px; 53 min-height: 800px; 54 max-height: 800px; 55 clear: both; 56 margin: 25px 0; 57 overflow: hidden; 58 } 59 .tab{ 60 float: left; 61 margin: 25px 0; 62 } 63 .tab label{ 64 background: #eee; 65 padding: 10px 20px; 66 position: relative; 67 left: 1px; 68 border: 0px solid; 69 margin-left: -1px; 70 z-index: 2; 71 color: #333333; 72 background: white; 73 } 74 input.text { 75 width: 250px; 76 height: 18px; 77 vertical-align:middle; 78 } 79 .content{ 80 position: absolute; 81 top: 61px; 82 left: 0; 83 right: 0; 84 bottom: 0; 85 background: black; 86 padding: 20px 20px; 87 border: 0px solid #ccc; 88 max-height: 800px; 89 overflow: scroll; 90 } 91 [type=radio]:checked ~ label{ 92 color: white; 93 background: #3288e9; 94 border: 0px solid #ccc; 95 z-index: 3; 96 } 97 [type=radio]:checked ~ label ~ .content{ 98 z-index: 1; 99 } 100</style> 101<script type="text/javascript"> 102 let vscode = acquireVsCodeApi(); 103 let clickIndex = -1; 104 let type = ''; 105 106 function sendCfgParamMsg() { 107 let includeName = document.getElementById('includeName').value; 108 let cppName = document.getElementById('cppName').value; 109 let interfaceName = document.getElementById('interfaceName').value; 110 let serviceCode = document.getElementById('serviceCode').value; 111 let data = {includeName, cppName, interfaceName, serviceCode}; 112 vscode.postMessage({ 113 msg: 'saveData', 114 cfgInfo: data, 115 type: type, 116 index: getIndex() 117 }); 118 } 119 120 // 数据是否为空 121 function validate(includeName, cppName, interfaceName, serviceCode) { 122 if (!isEmptyStr(includeName) && !isEmptyStr(cppName) && !isEmptyStr(interfaceName) && !isEmptyStr(serviceCode)) { 123 return true; 124 } else { 125 return false; 126 } 127 } 128 129 function isEmptyStr(str) { 130 if (str.length !== 0) { 131 return false; 132 } else { 133 return true; 134 } 135 } 136 137 function selectIncludeName() { 138 let result = { 139 msg: 'selectIncludeName', 140 mode: 2 141 }; 142 vscode.postMessage(result); 143 } 144 145 function selectCppName() { 146 let result = { 147 msg: 'selectCppName', 148 mode: 3 149 }; 150 vscode.postMessage(result); 151 } 152 153 function cancel() { 154 let result = { 155 msg: 'cancelShowInfo' 156 }; 157 vscode.postMessage(result); 158 } 159 160 function setIndex(index) { 161 clickIndex = index; 162 } 163 164 function getIndex() { 165 return clickIndex; 166 } 167 168 window.addEventListener('message', event => { 169 const message = event.data.msg; 170 const path = event.data.path; 171 172 if (message === 'selectIncludeName') { 173 document.getElementById('includeName').value = path; 174 } else if (message === 'selectCppName') { 175 document.getElementById('cppName').value = path; 176 } else if (message === 'updateData') { 177 type = event.data.type; 178 document.getElementById('genPath').value = event.data.genPath; 179 // 从showInfo界面过来，显示要修改的那一项数据 180 if (event.data.type === 'update') { 181 // 界面显示要修改的那一项数据 182 setIndex(event.data.index); 183 document.getElementById('includeName').value = event.data.updateInfo.updateIncludeName; 184 document.getElementById('cppName').value = event.data.updateInfo.updateCppName; 185 document.getElementById('interfaceName').value = event.data.updateInfo.updateInterfaceName; 186 document.getElementById('serviceCode').value = event.data.updateInfo.updateServiceCode; 187 } 188 } 189 }); 190 191</script> 192<body> 193<div class="tabs"> 194 <div class="tab"> 195 <input type="radio" style="display: none;" id="tab" name="group-1"> 196 <label for="tab">Config</label> 197 <div class="content"> 198 <table style="border-spacing:0px 5px; margin-left: 20px; margin-top: 38px; width: 500px;"> 199 <tr> 200 <td>genPath:</td> 201 <td> 202 <input class="text" type="text" id="genPath" readonly = "true"> 203 </td> 204 </tr> 205 206 <tr> 207 <td>includeName:</td> 208 <td> 209 <input class="text" type="text" id="includeName"> 210 <img src="./images/file.png" width="20px" height="20px" style="vertical-align:middle;" onclick="selectIncludeName()"> 211 </td> 212 </tr> 213 214 <tr> 215 <td>cppName:</td> 216 <td> 217 <input class="text" accept="text" id="cppName"> 218 <img src="./images/file.png" width="20px" height="20px" style="vertical-align:middle;" onclick="selectCppName()"> 219 </td> 220 </tr> 221 222 <tr> 223 <td>interfaceName:</td> 224 <td> 225 <input class="text" type="string" id="interfaceName" placeholder="请配置接口名"/> 226 </td> 227 </tr> 228 229 <tr> 230 <td>serviceCode:</td> 231 <td> 232 <input class="text" type="string" id="serviceCode" placeholder="请配置业务代码"/> 233 </td> 234 </tr> 235 236 <tr> 237 <td colspan="2"> 238 <button type="button" class="button" onclick="cancel()" style="background-color: #333333; border: 1px solid #333333; color: #fff;">Cancel</button> 239 <button id="okButton" type="button" class="button" onclick="sendCfgParamMsg()" style="background-color: #4B97D9; border: 1px solid #4B97D9; color: #fff;">Ok</button> 240 <a href="https://gitee.com/openharmony/napi_generator" target="_blank"> 241 <button type="button" style="background-color: #333333; width: 20px; height: 20px; border-radius: 50%;border: none; color: #fff;">?</button> 242 </a> 243 </td> 244 </tr> 245 </table> 246 </div> 247 </div> 248</div> 249</body> 250</html>
