Skip to content

Commit

Permalink
add copy button in html report
Browse files Browse the repository at this point in the history
  • Loading branch information
@zan8in
zan8in committed Aug 9, 2024
1 parent f96c3ae commit f368d83
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 38 deletions.
31 changes: 19 additions & 12 deletions pkg/report/default.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,20 +119,24 @@ func defaultHeader() string {
ol,ul{list-style:none}
table{border-collapse:collapse;border-spacing:0}
xmp {
whitewhite-space: pre-wrap; /* css-3 */
whitewhite-space: -moz-pre-wrap; /* Mozilla, since 1999 */
whitewhite-space: -pre-wrap; /* Opera 4-6 */
whitewhite-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
white-space: pre-wrap; /* Firefox */
font-family: 'Consolas', 'Menlo', 'Liberation Mono', 'DejaVu Sans Mono', monospace;
white-space: pre-wrap;
/* 标准的CSS3属性，适用于大多数现代浏览器 */
word-wrap: break-word;
font-size: x-small;
line-height: 1.6;
}
body{
font-family: 0.3em/1em -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,"Microsoft Yahei",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
// font-family: 0.3em/1em -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,"Microsoft Yahei",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
color: #233B46;
background-color: #C3CAC4;
padding: 5px 5px;
min-width: 1220px;
overflow: scroll;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
font-size: 16px;
line-height: 1.6;
}
img{border:none}
.top {
Expand Down Expand Up @@ -161,6 +165,7 @@ func defaultHeader() string {
top:-5px;
left:50%;
cursor: pointer;
line-height: 1.1;
}
.w50 {
width: 50%
Expand All @@ -184,6 +189,7 @@ func defaultHeader() string {
top:-5px;
left:50%;
cursor: pointer;
line-height: 1.1;
}
.vuln {
text-align: left;
Expand Down Expand Up @@ -238,9 +244,10 @@ func defaultHeader() string {
.copy-button {
display: inline-block;
/* 使按钮成为一个块级元素，但可以和其他元素并排显示 */
padding: 3px 5px;
padding: 2px 2px;
/* 按钮内部的内边距 */
background-color: #00b8d4;
background-color: rgba(92, 184, 92, 0.7);
;
/* 按钮的背景颜色 */
color: white;
/* 文本颜色 */
Expand All @@ -250,14 +257,14 @@ func defaultHeader() string {
/* 圆角边框 */
cursor: pointer;
/* 鼠标悬停时显示指针形状 */
transition: background-color 0.3s;
transition: background-color 0.3s ease;
right: 20px;
position: absolute;
font-size: smaller;
font-size: xx-small;
}
.copy-button:hover {
background-color: #008ca6;
background-color: rgba(92, 184, 92, 0.9);
/* 鼠标悬停时的背景颜色 */
}
</style>
Expand Down
48 changes: 22 additions & 26 deletions pkg/web/template/List.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,18 +77,12 @@
}

xmp {
whitewhite-space: pre-wrap;
/* css-3 */
whitewhite-space: -moz-pre-wrap;
/* Mozilla, since 1999 */
whitewhite-space: -pre-wrap;
/* Opera 4-6 */
whitewhite-space: -o-pre-wrap;
/* Opera 7 */
word-wrap: break-word;
/* Internet Explorer 5.5+ */
font-family: 'Consolas', 'Menlo', 'Liberation Mono', 'DejaVu Sans Mono', monospace;
white-space: pre-wrap;
/* Firefox */
/* 标准的CSS3属性，适用于大多数现代浏览器 */
word-wrap: break-word;
font-size: x-small;
line-height: 1.6;
}

body {
Expand All @@ -99,9 +93,10 @@
min-width: 1220px;
overflow: scroll;

font-family: Arial, Helvetica, sans-serif;
/* font-family: Arial, Helvetica, sans-serif; */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
line-height: 1.6;
}

img {
Expand Down Expand Up @@ -139,6 +134,7 @@
top: -5px;
left: 50%;
cursor: pointer;
line-height: 1.1;
}

.w50 {
Expand Down Expand Up @@ -166,11 +162,12 @@
top: -5px;
left: 50%;
cursor: pointer;
line-height: 1.1;
}

.vuln {
text-align: left;
font-weight: bold;
font-weight: 600;
}

.security {
Expand All @@ -179,7 +176,7 @@

.url {
text-align: left;
font-weight: bold;
font-weight: 300;
}

table {
Expand Down Expand Up @@ -427,9 +424,10 @@
.copy-button {
display: inline-block;
/* 使按钮成为一个块级元素，但可以和其他元素并排显示 */
padding: 3px 5px;
padding: 2px 2px;
/* 按钮内部的内边距 */
background-color: #00b8d4;
background-color: rgba(92, 184, 92, 0.7);
;
/* 按钮的背景颜色 */
color: white;
/* 文本颜色 */
Expand All @@ -439,14 +437,14 @@
/* 圆角边框 */
cursor: pointer;
/* 鼠标悬停时显示指针形状 */
transition: background-color 0.3s;
transition: background-color 0.3s ease;
right: 20px;
position: absolute;
font-size: smaller;
font-size: xx-small;
}

.copy-button:hover {
background-color: #008ca6;
background-color: rgba(92, 184, 92, 0.9);
/* 鼠标悬停时的背景颜色 */
}
</style>
Expand All @@ -460,7 +458,7 @@

// 使用 Clipboard API
navigator.clipboard.writeText(xmpElement.text()).then(function () {
that.text('Copy Success');
that.text('Copied');

// 设置3秒后恢复按钮文本
setTimeout(function () {
Expand Down Expand Up @@ -586,16 +584,14 @@
<div class="clr">
<div class="request w50">
<div class="toggleR"
onclick="$(this).parent().next('.response').toggle();if($(this).text()=='→'){$(this).text('←');$(this).css('background','red');$(this).parent().removeClass('w50').addClass('w100')}else{$(this).text('→');$(this).css('background','black');$(this).parent().removeClass('w100').addClass('w50')}">
→</div>
onclick="$(this).parent().next('.response').toggle();if($(this).text()=='→'){$(this).text('←');$(this).css('background','red');$(this).parent().removeClass('w50').addClass('w100')}else{$(this).text('→');$(this).css('background','black');$(this).parent().removeClass('w100').addClass('w50')}">→</div>
<div class="copy-button" onclick="copyXmpContent($(this));">Copy</div>
<xmp>{{.Request}}</xmp>
</div>
<div class="response w50">
<div class="toggleL"
onclick="$(this).parent().prev('.request').toggle();if($(this).text()=='←'){$(this).text('→');$(this).css('background','red');$(this).parent().removeClass('w50').addClass('w100')}else{$(this).text('←');$(this).css('background','black');$(this).parent().removeClass('w100').addClass('w50')}">
←</div>
<div style="position: absolute;right: 0;">{{ .Other.Latency }} ms</div>
onclick="$(this).parent().prev('.request').toggle();if($(this).text()=='←'){$(this).text('→');$(this).css('background','red');$(this).parent().removeClass('w50').addClass('w100')}else{$(this).text('←');$(this).css('background','black');$(this).parent().removeClass('w100').addClass('w50')}">←</div>
<div style="position: absolute;right: 0;font-size: xx-small;">{{ .Other.Latency }} ms</div>
<xmp>{{.Response}}</xmp>
</div>
</div>
Expand Down

0 comments on commit f368d83

Please sign in to comment.