1<!DOCTYPE html> 2<html lang="en" style="width: 100%; height: 100%;"> 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<style type="text/css"> 10 body { 11 background-color: #000000; 12 margin: 0 auto; 13 font-family: Consolas, sans-serif; 14 } 15 16 a { 17 text-decoration: none; 18 } 19 20 button.button { 21 background-color: #ffffff; 22 font-family: Consolas, sans-serif; 23 font-size: 16px; 24 border-radius: 3px; 25 border-color: #C4C4C4; 26 align-self: center; 27 border: 1px solid #C4C4C4; 28 outline: none; 29 width: 100px; 30 height: 24px 31 } 32 33 button.button:hover { 34 background: #4B97D9; 35 color: #fff; 36 border: 0px; 37 font-family: Consolas, sans-serif; 38 font-size: 16px; 39 width: 100px; 40 height: 24px 41 } 42 43 input.text:focus { 44 outline: 2px solid #4B97D9; 45 border: 0px; 46 } 47 48 input.text { 49 outline: 2px solid #C4C4C4; 50 border: 0px; 51 } 52 53 .tabs { 54 position: relative; 55 height: 800px; 56 min-height: 800px; 57 max-height: 800px; 58 clear: both; 59 margin: 25px 0; 60 overflow: hidden; 61 } 62 63 .tab { 64 float: left; 65 margin: 25px 0; 66 } 67 68 .tab label { 69 background: #eee; 70 padding: 10px 20px; 71 position: relative; 72 left: 1px; 73 border: 0px solid; 74 margin-left: -1px; 75 z-index: 2; 76 color: #333333; 77 background: white; 78 } 79 80 input.text { 81 width: 250px; 82 height: 18px; 83 vertical-align: middle; 84 } 85 86 .content { 87 position: absolute; 88 top: 61px; 89 left: 0; 90 right: 0; 91 bottom: 0; 92 background: black; 93 padding: 20px 20px; 94 border: 0px solid #ccc; 95 max-height: 800px; 96 overflow: scroll; 97 } 98 99 [type=radio]:checked~label { 100 color: white; 101 background: #3288e9; 102 border: 0px solid #ccc; 103 z-index: 3; 104 } 105 106 [type=radio]:checked~label~.content { 107 z-index: 1; 108 } 109</style> 110<script type="text/javascript"> 111 let mode = 0; 112 let vscode = acquireVsCodeApi(); 113 function sendApiscanParamMsg() { 114 let fileNames = document.getElementById('asFilePath').value; 115 let genDir = document.getElementById('genASResultDir').value; 116 let buttonName = document.getElementById('okButton').textContent; 117 let result = { 118 msg: 'api_scan', 119 fileNames: fileNames, 120 genDir: genDir, 121 buttonName: buttonName, 122 }; 123 vscode.postMessage(result); 124 } 125 126 function selectASFilePath() { 127 let fileNames = document.getElementById('asFilePath').value; 128 let result = { 129 msg: 'selectASFilePath', 130 filePath: fileNames, 131 }; 132 vscode.postMessage(result); 133 } 134 135 function selectPath(message) { 136 let genDir = document.getElementById('genASResultDir').value; 137 let result = { 138 msg: message, 139 filePath: genDir 140 }; 141 vscode.postMessage(result); 142 } 143 144 function cancel() { 145 let result = { 146 msg: 'cancel' 147 }; 148 vscode.postMessage(result); 149 } 150 151 window.addEventListener('message', event => { 152 153 const message = event.data.msg; 154 const path = event.data.path; 155 156 if (message === 'selectASFilePath') { 157 document.getElementById('asFilePath').value = path; 158 document.getElementById('genASResultDir').value = path; 159 } else if (message === 'selectASResultDir') { 160 document.getElementById('genASResultDir').value = path; 161 } else { 162 console.log('param is error'); 163 } 164 }); 165 166</script> 167 168<body> 169 <div class="tabs"> 170 <div class="tab"> 171 <input type="radio" style="display: none;" id="tab" name="group-1"> 172 <label for="tab">api-scan</label> 173 <div class="content"> 174 <div id="interface" style="margin-top: 10px;"> 175 扫描项目路径: 176 <input class="text" accept="text" id="asFilePath"> 177 <img src="./images/file.png" width="20px" height="20px" style="vertical-align:middle;" 178 onclick="selectASFilePath('selectASFilePath')"> 179 </div> 180 181 <div style="margin-top: 10px;"> 182 结果输出路径: 183 <input class="text" accept="text" id="genASResultDir"> 184 <img src="./images/path.png" width="20px" height="20px" style="vertical-align:middle;" 185 onclick="selectPath('selectASResultDir')"> 186 </div> 187 188 <div style="margin-top: 20px; text-align: left;"> 189 <button type="button" class="button" onclick="cancel()" 190 style="background-color: #333333; border: 1px solid #333333; color: #fff;">Cancel</button> 191 <button id="okButton" type="button" class="button" onclick="sendApiscanParamMsg()" 192 style="background-color: #4B97D9; border: 1px solid #4B97D9; color: #fff;">Ok</button> 193 <a href="https://gitee.com/openharmony/napi_generator" target="_blank"> 194 <button type="button" 195 style="background-color: #333333; width: 20px; height: 20px; border-radius: 50%;border: none; color: #fff;">?</button> 196 </a> 197 </div> 198 </div> 199 </div> 200 </div> 201</body> 202 203</html>
