1<!DOCTYPE html> 2<html lang="en" style="width: 100%; height: 100%;"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 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 var mode = 0; 103 let vscode = acquireVsCodeApi(); 104 let importCheck = false; 105 window.onload = function () { 106 document.getElementById("selectMode").addEventListener("change", function (e) { 107 if (e.target.value == 1) { 108 mode = 1; 109 } else { 110 mode = 0; 111 } 112 }); 113 } 114 115 function sendParamMsg() { 116 var fileNames = document.getElementById("interfaceFile").value; 117 var genDir = document.getElementById("genFile").value; 118 var numberType = document.getElementById("numberTypeid").value; 119 var buttonName = document.getElementById("okButton").textContent; 120 var result = { 121 msg: "param", 122 mode: mode, 123 fileNames: fileNames, 124 genDir: genDir, 125 numberType: numberType, 126 importIsCheck: importCheck, 127 buttonName: buttonName, 128 } 129 vscode.postMessage(result); 130 } 131 132 function sendH2TsParamMsg() { 133 var fileNames = document.getElementById("hFilePath").value; 134 var genDir = document.getElementById("genHResultDir").value; 135 var result = { 136 msg: "h2ts", 137 fileNames: fileNames, 138 genDir: genDir, 139 } 140 vscode.postMessage(result); 141 } 142 143 function selectInterPath() { 144 var result = { 145 msg: "selectInterPath", 146 mode: mode 147 } 148 vscode.postMessage(result); 149 } 150 151 function selectPath(message) { 152 var result = { 153 msg: message 154 } 155 vscode.postMessage(result); 156 } 157 158 function cancel() { 159 var result = { 160 msg: "cancel" 161 } 162 vscode.postMessage(result); 163 } 164 165 function checkbox(obj) { 166 importCheck = obj.checked; 167 } 168 169 window.addEventListener('message', event => { 170 171 const message = event.data.msg; 172 const path = event.data.path; 173 if(message == "selectInterPath") { 174 let regex = new RegExp("[a-zA-Z_0-9]+\.h$"); 175 if(regex.exec(path)){ 176 document.getElementById("tab2").checked = true; 177 document.getElementById("hFilePath").value = path; 178 }else{ 179 document.getElementById("interfaceFile").value = path; 180 } 181 fillInputDir(path, message); 182 } else if(message == "selectGenPath") { 183 document.getElementById("genFile").value = path; 184 } else if(message == "selectBuildPath") { 185 document.getElementById("buildFile").value = path; 186 } else if(message == "selectHFilePath") { 187 document.getElementById("hFilePath").value = path; 188 fillInputDir(path, message); 189 } else if(message == "selectHResultDir") { 190 document.getElementById("genHResultDir").value = path; 191 } 192 else { 193 console.log("param is error"); 194 } 195 }) 196 197 function inputChange() { 198 var fileNames = document.getElementById("interfaceFile").value; 199 fillInputDir(fileNames); 200 } 201 202 function fillInputDir(fileNames, message) { 203 var dir; 204 var fileName; 205 if (mode == 0) { 206 if (fileNames.indexOf(",") != -1) { 207 fileName = fileNames.substring(0, fileNames.indexOf(",")); 208 } else { 209 fileName = fileNames; 210 } 211 dir = fileName.substring(0, fileName.lastIndexOf("\\")); 212 } else { 213 dir = fileNames; 214 } 215 document.getElementById("genFile").value = dir; 216 document.getElementById("buildFile").value = dir; 217 } 218 219</script> 220<body> 221<div class="tabs"> 222 <div class="tab"> 223 <input type="radio" style="display: none;" id="tab" name="group-1"> 224 <label for="tab">Napi-Gen</label> 225 <div class="content"> 226 <table style="border-spacing:0px 5px; margin-left: 20px; margin-top: 38px; width: 500px;"> 227 <tr id="selectMode"> 228 <td width="110px">选择生成方式:</td> 229 <td width="340px"> 230 <input class="radio" type="radio" name="mode" value="0" id="files" checked="checked"> .d.ts文件</input> 231 <input class="radio" type="radio" name="mode" value="1" id="dir"> 文件夹</input> 232 </td> 233 </tr> 234 <tr> 235 <td>选择接口文件:</td> 236 <td> 237 <input class="text" type="text" id="interfaceFile" onchange="inputChange()" onporpertychange="inputChange() "> 238 <img src="./images/file.png" width="20px" height="20px" style="vertical-align:middle;" onclick="selectInterPath()"> 239 </td> 240 </tr> 241 242 <tr> 243 <td>生成框架路径:</td> 244 <td> 245 <input class="text" accept="text" id="genFile"> 246 <img src="./images/path.png" width="20px" height="20px" style="vertical-align:middle;" onclick="selectPath('selectGenPath')"> 247 </td> 248 </tr> 249 <tr> 250 <td>编译脚本路径:</td> 251 <td> 252 <input class="text" type="text" id="buildFile"> 253 <img src="./images/path.png" width="20px" height="20px" style="vertical-align:middle;" onclick="selectPath('selectBuildPath')"> 254 </td> 255 </tr> 256 <tr> 257 <td>number目的类型:</td> 258 <td> 259 <select id="numberTypeid" name = "numberType" style="width: 100px; height: 23px; margin-left: -1px;"> 260 <option selected value = "uint32_t">uint32_t</option> 261 <option value = "int">int</option> 262 <option value = "double">double</option> 263 <option value = "float">float</option> 264 <option value = "char">char</option> 265 <option value = "bool">bool</option> 266 <option value = "void">void</option> 267 <option value = "wchar_t">wchar_t</option> 268 </select> 269 </td> 270 </tr> 271 <tr> 272 <td>启用import功能:</td> 273 <td> 274 <input id= "importCheck" type="checkbox" name="import" style="vertical-align:middle; width: 20px; height: 20px; margin-left: -1px;" onclick="checkbox(this)"> 275 </td> 276 </tr> 277 <tr> 278 <td colspan="2"> 279 <button type="button" class="button" onclick="cancel()" style="background-color: #333333; border: 1px solid #333333; color: #fff;">Cancel</button> 280 <button id="okButton" type="button" class="button" onclick="sendParamMsg()" style="background-color: #4B97D9; border: 1px solid #4B97D9; color: #fff;">Ok</button> 281 <a href="https://gitee.com/openharmony/napi_generator" target="_blank"> 282 <button type="button" style="background-color: #333333; width: 20px; height: 20px; border-radius: 50%;border: none; color: #fff;">?</button> 283 </a> 284 </td> 285 </tr> 286 </table> 287 </div> 288 </div> 289</div> 290</body> 291</html>
