perf: report css

pull/14993/head
feng 2025-03-11 15:04:40 +08:00
parent 3a1d3c1f5c
commit 62b9b6883e
6 changed files with 890 additions and 29 deletions

View File

@ -2,7 +2,6 @@ from django.template.loader import render_to_string
from django.utils.translation import gettext_lazy as _
from premailer import transform
from accounts.models import ChangeSecretRecord
from common.tasks import send_mail_attachment_async, upload_backup_to_obj_storage
from notifications.notifications import UserMessage
from terminal.models.component.storage import ReplayStorage
@ -122,8 +121,5 @@ class ChangeSecretReportMsg(UserMessage):
@classmethod
def gen_test_msg(cls):
name = 'test'
user = User.objects.first()
record = ChangeSecretRecord.objects.first()
execution_id = str(record.execution_id)
return cls(user, {})

View File

@ -47,10 +47,6 @@
</section>
</div>
<style>
{% include './css/report.css' %}
</style>
<script>
const toggleButtons = document.querySelectorAll('.collapse-toggle')
@ -70,4 +66,181 @@
}
})
})
</script>
</script>
<style>
html {
font-size: 10px;
}
body,
p {
margin: 0;
padding: 0;
}
.report-container {
display: flex;
flex-direction: column;
row-gap: 16px;
}
.basic-info-section,
.success,
.failed {
display: flex;
flex-direction: column;
height: 100%;
padding: 16px 20px;
margin: 0 20px;
border: 1px solid #dee0e3;
border-radius: 6px;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
transition: all 0.2s ease;
}
.header-container {
display: flex;
justify-content: flex-start;
align-items: center;
height: 32px;
margin-bottom: 12px;
border-bottom: 1px solid #f0f0f0;
padding-bottom: 8px;
}
.header-container h2 {
color: #1f2329;
font: 500 16px/24px 'PingFang SC';
margin: 0;
display: flex;
align-items: center;
width: 100%;
}
.header-container h2 span {
display: inline-flex;
margin-left: 8px;
font-weight: normal;
}
.triangle-right-icon {
display: inline-block;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 8px solid #1f2329;
margin-right: 10px;
cursor: pointer;
}
.triangle-down-icon {
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 8px solid #1f2329;
margin-right: 10px;
cursor: pointer;
}
.container-section {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
row-gap: 16px;
column-gap: 10px;
}
.collapsible-content {
overflow: hidden;
max-height: 1000px;
opacity: 1;
transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.collapsible-content.collapsed {
max-height: 0;
opacity: 0;
margin: 0;
padding: 0;
}
.container-section .item {
display: flex;
flex-basis: calc(33.33% - 10px);
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 4px;
padding: 4px 0;
}
.container-section .item .item-label {
color: #646a73;
font: 400 14px/22px 'PingFang SC';
}
.container-section .item .item-value {
color: #1f2329;
font: 500 14px/22px 'PingFang SC';
}
.custom-table {
margin-bottom: 0;
width: 100%;
border-collapse: collapse;
overflow: hidden;
}
.custom-table th {
background-color: #f5f7fa;
color: #646A73;
font: 500 14px/22px 'PingFang SC';
text-align: left;
padding: 12px 8px;
border-bottom: 1px solid #ebeef5;
}
.custom-table td {
color: #1F2329;
font: 400 14px/22px 'PingFang SC';
padding: 12px 8px;
border-bottom: 1px solid #ebeef5;
}
.custom-table tr:nth-child(even) {
background-color: #f6f6f6;
}
.custom-table tr:last-child td {
border-bottom: none;
}
.no-data {
color: #909399;
font: 400 14px/22px 'PingFang SC';
text-align: center;
padding: 20px;
font-style: italic;
background-color: #f9f9f9;
border-radius: 4px;
margin: 10px 0;
width: 100%;
}
.new-accounts .section-header span {
background: #e8f5e9;
color: #2e7d32;
}
.lost-accounts .section-header span {
background: #fbe9e7;
color: #d84315;
}
</style>

View File

@ -1,7 +1,6 @@
{% load i18n %}
{% load static %}
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<div class="report-container">
<section class="basic-info-section">
@ -137,9 +136,7 @@
</div>
</section>
</div>
<style>
{% include './css/report.css' %}
</style>
<script>
const toggleButtons = document.querySelectorAll('.collapse-toggle')
@ -159,4 +156,181 @@
}
})
})
</script>
</script>
<style>
html {
font-size: 10px;
}
body,
p {
margin: 0;
padding: 0;
}
.report-container {
display: flex;
flex-direction: column;
row-gap: 16px;
}
.basic-info-section,
.success,
.failed {
display: flex;
flex-direction: column;
height: 100%;
padding: 16px 20px;
margin: 0 20px;
border: 1px solid #dee0e3;
border-radius: 6px;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
transition: all 0.2s ease;
}
.header-container {
display: flex;
justify-content: flex-start;
align-items: center;
height: 32px;
margin-bottom: 12px;
border-bottom: 1px solid #f0f0f0;
padding-bottom: 8px;
}
.header-container h2 {
color: #1f2329;
font: 500 16px/24px 'PingFang SC';
margin: 0;
display: flex;
align-items: center;
width: 100%;
}
.header-container h2 span {
display: inline-flex;
margin-left: 8px;
font-weight: normal;
}
.triangle-right-icon {
display: inline-block;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 8px solid #1f2329;
margin-right: 10px;
cursor: pointer;
}
.triangle-down-icon {
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 8px solid #1f2329;
margin-right: 10px;
cursor: pointer;
}
.container-section {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
row-gap: 16px;
column-gap: 10px;
}
.collapsible-content {
overflow: hidden;
max-height: 1000px;
opacity: 1;
transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.collapsible-content.collapsed {
max-height: 0;
opacity: 0;
margin: 0;
padding: 0;
}
.container-section .item {
display: flex;
flex-basis: calc(33.33% - 10px);
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 4px;
padding: 4px 0;
}
.container-section .item .item-label {
color: #646a73;
font: 400 14px/22px 'PingFang SC';
}
.container-section .item .item-value {
color: #1f2329;
font: 500 14px/22px 'PingFang SC';
}
.custom-table {
margin-bottom: 0;
width: 100%;
border-collapse: collapse;
overflow: hidden;
}
.custom-table th {
background-color: #f5f7fa;
color: #646A73;
font: 500 14px/22px 'PingFang SC';
text-align: left;
padding: 12px 8px;
border-bottom: 1px solid #ebeef5;
}
.custom-table td {
color: #1F2329;
font: 400 14px/22px 'PingFang SC';
padding: 12px 8px;
border-bottom: 1px solid #ebeef5;
}
.custom-table tr:nth-child(even) {
background-color: #f6f6f6;
}
.custom-table tr:last-child td {
border-bottom: none;
}
.no-data {
color: #909399;
font: 400 14px/22px 'PingFang SC';
text-align: center;
padding: 20px;
font-style: italic;
background-color: #f9f9f9;
border-radius: 4px;
margin: 10px 0;
width: 100%;
}
.new-accounts .section-header span {
background: #e8f5e9;
color: #2e7d32;
}
.lost-accounts .section-header span {
background: #fbe9e7;
color: #d84315;
}
</style>

View File

@ -109,9 +109,6 @@
</section>
</div>
<style>
{% include './css/report.css' %}
</style>
<script>
const toggleButtons = document.querySelectorAll('.collapse-toggle')
@ -131,4 +128,181 @@
}
})
})
</script>
</script>
<style>
html {
font-size: 10px;
}
body,
p {
margin: 0;
padding: 0;
}
.report-container {
display: flex;
flex-direction: column;
row-gap: 16px;
}
.basic-info-section,
.success,
.failed {
display: flex;
flex-direction: column;
height: 100%;
padding: 16px 20px;
margin: 0 20px;
border: 1px solid #dee0e3;
border-radius: 6px;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
transition: all 0.2s ease;
}
.header-container {
display: flex;
justify-content: flex-start;
align-items: center;
height: 32px;
margin-bottom: 12px;
border-bottom: 1px solid #f0f0f0;
padding-bottom: 8px;
}
.header-container h2 {
color: #1f2329;
font: 500 16px/24px 'PingFang SC';
margin: 0;
display: flex;
align-items: center;
width: 100%;
}
.header-container h2 span {
display: inline-flex;
margin-left: 8px;
font-weight: normal;
}
.triangle-right-icon {
display: inline-block;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 8px solid #1f2329;
margin-right: 10px;
cursor: pointer;
}
.triangle-down-icon {
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 8px solid #1f2329;
margin-right: 10px;
cursor: pointer;
}
.container-section {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
row-gap: 16px;
column-gap: 10px;
}
.collapsible-content {
overflow: hidden;
max-height: 1000px;
opacity: 1;
transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.collapsible-content.collapsed {
max-height: 0;
opacity: 0;
margin: 0;
padding: 0;
}
.container-section .item {
display: flex;
flex-basis: calc(33.33% - 10px);
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 4px;
padding: 4px 0;
}
.container-section .item .item-label {
color: #646a73;
font: 400 14px/22px 'PingFang SC';
}
.container-section .item .item-value {
color: #1f2329;
font: 500 14px/22px 'PingFang SC';
}
.custom-table {
margin-bottom: 0;
width: 100%;
border-collapse: collapse;
overflow: hidden;
}
.custom-table th {
background-color: #f5f7fa;
color: #646A73;
font: 500 14px/22px 'PingFang SC';
text-align: left;
padding: 12px 8px;
border-bottom: 1px solid #ebeef5;
}
.custom-table td {
color: #1F2329;
font: 400 14px/22px 'PingFang SC';
padding: 12px 8px;
border-bottom: 1px solid #ebeef5;
}
.custom-table tr:nth-child(even) {
background-color: #f6f6f6;
}
.custom-table tr:last-child td {
border-bottom: none;
}
.no-data {
color: #909399;
font: 400 14px/22px 'PingFang SC';
text-align: center;
padding: 20px;
font-style: italic;
background-color: #f9f9f9;
border-radius: 4px;
margin: 10px 0;
width: 100%;
}
.new-accounts .section-header span {
background: #e8f5e9;
color: #2e7d32;
}
.lost-accounts .section-header span {
background: #fbe9e7;
color: #d84315;
}
</style>

View File

@ -135,10 +135,6 @@
</section>
</div>
<style>
{% include './css/report.css' %}
</style>
<script>
const toggleButtons = document.querySelectorAll('.collapse-toggle')
@ -159,3 +155,180 @@
})
})
</script>
<style>
html {
font-size: 10px;
}
body,
p {
margin: 0;
padding: 0;
}
.report-container {
display: flex;
flex-direction: column;
row-gap: 16px;
}
.basic-info-section,
.success,
.failed {
display: flex;
flex-direction: column;
height: 100%;
padding: 16px 20px;
margin: 0 20px;
border: 1px solid #dee0e3;
border-radius: 6px;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
transition: all 0.2s ease;
}
.header-container {
display: flex;
justify-content: flex-start;
align-items: center;
height: 32px;
margin-bottom: 12px;
border-bottom: 1px solid #f0f0f0;
padding-bottom: 8px;
}
.header-container h2 {
color: #1f2329;
font: 500 16px/24px 'PingFang SC';
margin: 0;
display: flex;
align-items: center;
width: 100%;
}
.header-container h2 span {
display: inline-flex;
margin-left: 8px;
font-weight: normal;
}
.triangle-right-icon {
display: inline-block;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 8px solid #1f2329;
margin-right: 10px;
cursor: pointer;
}
.triangle-down-icon {
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 8px solid #1f2329;
margin-right: 10px;
cursor: pointer;
}
.container-section {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
row-gap: 16px;
column-gap: 10px;
}
.collapsible-content {
overflow: hidden;
max-height: 1000px;
opacity: 1;
transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.collapsible-content.collapsed {
max-height: 0;
opacity: 0;
margin: 0;
padding: 0;
}
.container-section .item {
display: flex;
flex-basis: calc(33.33% - 10px);
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 4px;
padding: 4px 0;
}
.container-section .item .item-label {
color: #646a73;
font: 400 14px/22px 'PingFang SC';
}
.container-section .item .item-value {
color: #1f2329;
font: 500 14px/22px 'PingFang SC';
}
.custom-table {
margin-bottom: 0;
width: 100%;
border-collapse: collapse;
overflow: hidden;
}
.custom-table th {
background-color: #f5f7fa;
color: #646A73;
font: 500 14px/22px 'PingFang SC';
text-align: left;
padding: 12px 8px;
border-bottom: 1px solid #ebeef5;
}
.custom-table td {
color: #1F2329;
font: 400 14px/22px 'PingFang SC';
padding: 12px 8px;
border-bottom: 1px solid #ebeef5;
}
.custom-table tr:nth-child(even) {
background-color: #f6f6f6;
}
.custom-table tr:last-child td {
border-bottom: none;
}
.no-data {
color: #909399;
font: 400 14px/22px 'PingFang SC';
text-align: center;
padding: 20px;
font-style: italic;
background-color: #f9f9f9;
border-radius: 4px;
margin: 10px 0;
width: 100%;
}
.new-accounts .section-header span {
background: #e8f5e9;
color: #2e7d32;
}
.lost-accounts .section-header span {
background: #fbe9e7;
color: #d84315;
}
</style>

View File

@ -1,8 +1,6 @@
{% load i18n %}
{% load static %}
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<div class="report-container">
<section class="basic-info-section">
<div class="header-container">
@ -138,10 +136,6 @@
</section>
</div>
<style>
{% include './css/report.css' %}
</style>
<script>
const toggleButtons = document.querySelectorAll('.collapse-toggle')
@ -161,4 +155,181 @@
}
})
})
</script>
</script>
<style>
html {
font-size: 10px;
}
body,
p {
margin: 0;
padding: 0;
}
.report-container {
display: flex;
flex-direction: column;
row-gap: 16px;
}
.basic-info-section,
.success,
.failed {
display: flex;
flex-direction: column;
height: 100%;
padding: 16px 20px;
margin: 0 20px;
border: 1px solid #dee0e3;
border-radius: 6px;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
transition: all 0.2s ease;
}
.header-container {
display: flex;
justify-content: flex-start;
align-items: center;
height: 32px;
margin-bottom: 12px;
border-bottom: 1px solid #f0f0f0;
padding-bottom: 8px;
}
.header-container h2 {
color: #1f2329;
font: 500 16px/24px 'PingFang SC';
margin: 0;
display: flex;
align-items: center;
width: 100%;
}
.header-container h2 span {
display: inline-flex;
margin-left: 8px;
font-weight: normal;
}
.triangle-right-icon {
display: inline-block;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 8px solid #1f2329;
margin-right: 10px;
cursor: pointer;
}
.triangle-down-icon {
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 8px solid #1f2329;
margin-right: 10px;
cursor: pointer;
}
.container-section {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
row-gap: 16px;
column-gap: 10px;
}
.collapsible-content {
overflow: hidden;
max-height: 1000px;
opacity: 1;
transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.collapsible-content.collapsed {
max-height: 0;
opacity: 0;
margin: 0;
padding: 0;
}
.container-section .item {
display: flex;
flex-basis: calc(33.33% - 10px);
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 4px;
padding: 4px 0;
}
.container-section .item .item-label {
color: #646a73;
font: 400 14px/22px 'PingFang SC';
}
.container-section .item .item-value {
color: #1f2329;
font: 500 14px/22px 'PingFang SC';
}
.custom-table {
margin-bottom: 0;
width: 100%;
border-collapse: collapse;
overflow: hidden;
}
.custom-table th {
background-color: #f5f7fa;
color: #646A73;
font: 500 14px/22px 'PingFang SC';
text-align: left;
padding: 12px 8px;
border-bottom: 1px solid #ebeef5;
}
.custom-table td {
color: #1F2329;
font: 400 14px/22px 'PingFang SC';
padding: 12px 8px;
border-bottom: 1px solid #ebeef5;
}
.custom-table tr:nth-child(even) {
background-color: #f6f6f6;
}
.custom-table tr:last-child td {
border-bottom: none;
}
.no-data {
color: #909399;
font: 400 14px/22px 'PingFang SC';
text-align: center;
padding: 20px;
font-style: italic;
background-color: #f9f9f9;
border-radius: 4px;
margin: 10px 0;
width: 100%;
}
.new-accounts .section-header span {
background: #e8f5e9;
color: #2e7d32;
}
.lost-accounts .section-header span {
background: #fbe9e7;
color: #d84315;
}
</style>