update frontend

Author: bufsnake

.images/image-20220106122454872.png

@@ -133,11 +133,25 @@ body
 - host="127.0.0.1" && body="test"
 - (icp="京" || icp="沪") && title="404"
 
+## 操作
+
+- TLS 面板
+
+  > 双击关闭
+
+- Screenshot 面板
+
+  > 单击关闭
+
+- -rebuild 选项
+
+  > 重新排序资产(只会排序一次)
+
 ## Screenshot
 
 > 模板改自xray模板
 
-![image-20211201103007866](.images/image-20211201103007866.png)
+![image-20220106122454872](.images/image-20220106122454872.png)
 
 ![image-20210723135945748](.images/image-20210723135945748.png)
 
@@ -158,5 +172,3 @@ body
 - [ ] 未发出请求的链接进行手动发送
 - [ ] 常见信息提取 github.com/mingrammer/commonregex
 - [x] 二维码识别、APK链接提取(需-get-path)
-- [ ] http2 detect
-- [ ] 功能整合: JSFinder

README.md

@@ -33,9 +33,11 @@
         <div
           slot="expandedRowRender"
           slot-scope="record"
-          style="background-color: #ececec; padding: 0px;"
+          style="background-color: #fbfbfb; padding: 0px;"
         >
+          <!-- 420px -->
           <div
+            v-if="record.fingers != null && record.fingers.length > 0"
             hoverable
             style="
               overflow-y: auto;
@@ -59,13 +61,16 @@
               </li>
             </ol>
           </div>
+          <!-- 600px -->
           <a-card
+            v-if="record.image != null && record.image.length > 0"
             hoverable
             :style="{
               'vertical-align': 'top',
               display: 'inline-block',
               width: '600px',
             }"
+            @click="showScreenshot(record.image)"
           >
             <img
               v-if="record.image !== ''"
@@ -75,12 +80,54 @@
               style="height: 345px; width: 600px;"
             />
           </a-card>
+          <!-- width - 600 - 420 - 50 - 50 -->
           <a-card
+            v-if="
+              (record.fingers == null || record.fingers.length <= 0) &&
+              (record.image == null || record.image.length <= 0)
+            "
+            hoverable
+            :style="{
+              'vertical-align': 'top',
+              display: 'inline-block',
+              width: width - 100 + 'px',
+            }"
+          >
+            <pre class="response">{{ record.httpdump }}</pre>
+          </a-card>
+          <a-card
+            v-else-if="(record.fingers == null || record.fingers.length <= 0) && (record.image != null && record.image.length > 0)"
+            hoverable
+            :style="{
+              'vertical-align': 'top',
+              display: 'inline-block',
+              width: width - 600 - 100 + 'px',
+            }"
+          >
+            <pre class="response">{{ record.httpdump }}</pre>
+          </a-card>
+          <a-card
+            v-else-if="
+              record.fingers != null &&
+              record.fingers.length > 0 &&
+              (record.image == null || record.image.length <= 0)
+            "
             hoverable
             :style="{
               'vertical-align': 'top',
               display: 'inline-block',
-              width: width - 650 - 435 + 'px',
+              width: width - 420 - 100 + 'px',
+            }"
+          >
+            <pre class="response">{{ record.httpdump }}</pre>
+          </a-card>
+          <a-card
+            v-else
+            hoverable
+            :style="{
+              'vertical-align': 'top',
+              display: 'inline-block',
+              width: width - 600 - 420 - 50 - 50 + 'px',
             }"
           >
             <pre class="response">{{ record.httpdump }}</pre>
@@ -205,9 +252,30 @@
         </a-table-column>
       </a-table>
     </a-card>
-    <a-modal v-model="tls_show" closable :footer="null" width="1400px">
+    <a-modal
+      v-model="tls_show"
+      :dialog-style="{ top: '20px' }"
+      closable
+      :footer="null"
+      width="1400px"
+      class="tls-show"
+    >
       <p class="tls">{{ tls }}</p>
     </a-modal>
+    <a-modal
+      v-model="image_show"
+      closable
+      :dialog-style="{ top: '20px' }"
+      :footer="null"
+      :width="width - 40"
+    >
+      <img
+        class="image-show"
+        alt="screenshot"
+        :src="image"
+        style="height: 100%; width: 100%;"
+      />
+    </a-modal>
   </div>
 </template>
 
@@ -227,6 +295,9 @@ export default {
       searchModel: false,
       current: -1,
 
+      image: '',
+      image_show: false,
+
       pagination: {
         pageSize: 20, // 默认每页显示数量
         position: 'top',
@@ -253,6 +324,27 @@ export default {
   },
   mounted() {
     this.getData(this.pagination.defaultCurrent, this.pagination.pageSize)
+
+    window.addEventListener(
+      'click',
+      (e) => {
+        console.log('click', e)
+        if (e.target.className === 'image-show') {
+          this.image_show = false
+        }
+      },
+      false,
+    )
+    window.addEventListener(
+      'dblclick',
+      (e) => {
+        console.log('dbclick', e)
+        if (e.target.className === 'tls') {
+          this.tls_show = false
+        }
+      },
+      false,
+    )
   },
 
   methods: {
@@ -267,6 +359,7 @@ export default {
           console.log(JSON.stringify(err))
         })
     },
+
     copyall(data) {
       const input = document.createElement('textarea')
       input.value = data
@@ -278,6 +371,7 @@ export default {
       document.body.removeChild(input)
       this.$message.success('copy success')
     },
+
     search() {
       if (!this.searchModel) {
         this.pagination.current = 1
@@ -311,6 +405,7 @@ export default {
           console.log(err)
         })
     },
+
     onExpand(expanded, record) {
       console.log('extend:' + expanded)
       console.log('record: ' + record.id)
@@ -319,6 +414,7 @@ export default {
         this.expandedRowKeys.push(this.datas[i].id)
       }
     },
+
     change(id) {
       this.pagination.current = id
       if (this.searchModel) {
@@ -327,6 +423,7 @@ export default {
         this.getData(id, this.pagination.pageSize)
       }
     },
+
     sizeChange(current, pageSize) {
       this.pagination.current = 1
       this.pagination.pageSize = pageSize
@@ -364,6 +461,11 @@ export default {
       this.tls = tls
       this.tls_show = true
     },
+
+    showScreenshot(img) {
+      this.image = img
+      this.image_show = true
+    },
   },
 }
 </script>