1<!DOCTYPE html> 2<html lang="en" style="width: 100%; height: 100%; text-align: center;"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Napi</title> 8</head> 9 10<body> 11 <style type="text/css"> 12 body { 13 background-color: #000000; 14 margin:0 auto; 15 position:absolute; 16 left:35%; 17 top:30%; 18 font-family: Consolas, sans-serif; 19 } 20 21 a { 22 text-decoration: none; 23 } 24 25 button.button { 26 background-color: #ffffff; 27 font-family: Consolas, sans-serif; 28 font-size: 16px; 29 border-radius: 3px; 30 border-color: #C4C4C4; 31 align-self: center; 32 border: 1px solid #C4C4C4; 33 outline: none; 34 width: 100px; 35 height:24px 36 } 37 38 button.button:hover { 39 background: #4B97D9; 40 color: #fff; 41 border: 0px; 42 font-family: Consolas, sans-serif; 43 font-size: 16px; 44 width: 100px; 45 height: 24px 46 } 47 48 input.text:focus { 49 outline: 2px solid #4B97D9; 50 border: 0px; 51 } 52 53 input.text { 54 outline: 2px solid #C4C4C4; 55 border: 0px; 56 } 57 58 input.radio { 59 outline: none; 60 } 61 62 div { 63 font-size: 16px; 64 color: #ffffff; 65 /* font-weight: bold; */ 66 width: 400px; 67 height: 50px; 68 text-align: left; 69 } 70 71 </style> 72 <script type="text/javascript"> 73 var mode = 0; 74 let vscode = acquireVsCodeApi(); 75 let importCheck = false; 76 window.onload = function () { 77 document.getElementById("selectMode").addEventListener("change", function (e) { 78 if (e.target.value == 1) { 79 mode = 1; 80 } else { 81 mode = 0; 82 } 83 }); 84 } 85 86 function sendParamMsg() { 87 var fileNames = document.getElementById("interfaceFile").value; 88 var genDir = document.getElementById("genFile").value; 89 var result = { 90 msg: "param", 91 mode: mode, 92 fileNames: fileNames, 93 genDir: genDir, 94 importIsCheck: importCheck, 95 } 96 vscode.postMessage(result); 97 } 98 99 function selectInterPath() { 100 var result = { 101 msg: "selectInterPath", 102 mode: mode 103 } 104 vscode.postMessage(result); 105 } 106 107 function selectPath(message) { 108 var result = { 109 msg: message 110 } 111 vscode.postMessage(result); 112 } 113 114 function cancel() { 115 var result = { 116 msg: "cancel" 117 } 118 vscode.postMessage(result); 119 } 120 121 function checkbox(obj) { 122 importCheck = obj.checked; 123 } 124 125 window.addEventListener('message', event => { 126 const message = event.data.msg; 127 const path = event.data.path; 128 if(message == "selectInterPath") { 129 document.getElementById("interfaceFile").value = path; 130 fillInputDir(path); 131 } else if(message == "selectGenPath") { 132 document.getElementById("genFile").value = path; 133 } else if(message == "selectBuildPath") { 134 document.getElementById("buildFile").value = path; 135 } 136 else { 137 console.log("param is error"); 138 } 139 }) 140 141 function inputChange() { 142 var fileNames = document.getElementById("interfaceFile").value; 143 fillInputDir(fileNames); 144 } 145 146 function fillInputDir(fileNames) { 147 var dir; 148 var fileName; 149 if (mode == 0) { 150 if (fileNames.indexOf(",") != -1) { 151 fileName = fileNames.substring(0, fileNames.indexOf(",")); 152 } else { 153 fileName = fileNames; 154 } 155 dir = fileName.substring(0, fileName.lastIndexOf("\\")); 156 } else { 157 dir = fileNames; 158 } 159 document.getElementById("genFile").value = dir; 160 document.getElementById("buildFile").value = dir; 161 } 162 163 </script> 164 <div id="selectMode"> 165 选择生成方式： 166 <div style="margin-left: 110px; margin-top: -20px;"> 167 <input class="radio" type="radio" name="mode" value="0" id="files" checked="checked"> .d.ts文件(多个文件之间用,号分割)</input><br> 168 <br> 169 <input class="radio" type="radio" name="mode" value="1" id="dir"> 文件夹</input> 170 </div> 171 </div> 172 </br> 173 <div id="interface" style="margin-top: 10px;"> 174 选择接口文件： 175 <input class="text" style="width: 250px; height: 18px;" type="text" id="interfaceFile" onchange="inputChange()" onporpertychange="inputChange() "> 176 <img src="./images/file.png" width="16px" height="16px" onclick="selectInterPath()"> 177 </div> 178 179 <div style="margin-top: 10px;"> 180 生成框架路径： 181 <input class="text" style="width: 250px; height: 18px;" accept="text" id="genFile"> 182 <img src="./images/path.png" width="16px" height="16px" onclick="selectPath('selectGenPath')"> 183 </div> 184 <div style="margin-top: 10px;"> 185 编译脚本路径： 186 <input class="text" style="width: 250px; height: 18px;" type="text" id="buildFile"> 187 <img src="./images/path.png" width="16px" height="16px" onclick="selectPath('selectBuildPath')"> 188 </div> 189 <div> 190 <input id= "importCheck" type="checkbox" name="import" onclick="checkbox(this)">启用import功能 191 </div> 192 <div style="margin-top: 10px; text-align: right;"> 193 <button type="button" class="button" onclick="cancel()" style="background-color: #333333; border: 1px solid #333333; color: #fff;">Cancel</button> 194 <button type="button" class="button" onclick="sendParamMsg()" style="background-color: #4B97D9; border: 1px solid #4B97D9; color: #fff;">Ok</button> 195 <a href="https://gitee.com/openharmony/napi_generator" target="_blank"> 196 <button type="button" style="background-color: #333333; width: 20px; height: 20px; border-radius: 50%;border: none; color: #fff;">?</button> 197 </a> 198 </div> 199</body> 200 201</html>
