добавлена оптимизированная версия нового дизайна
This commit is contained in:
FrigaT
@@ -0,0 +1,148 @@
|
||||
using SQLLinter.Common;
|
||||
using SQLLinter.Infrastructure.Diagram;
|
||||
using System.Text;
|
||||
|
||||
namespace SQLLinter.Infrastructure.Reporters.Formatters.Html.v1;
|
||||
|
||||
public class HtmlReportFormatter : IReportFormatter
|
||||
{
|
||||
public string Format(List<IRuleViolation> violations)
|
||||
=> Format(violations, null);
|
||||
|
||||
public string Format(List<IRuleViolation> violations, BpmnDiagram? diagram)
|
||||
{
|
||||
if (violations.Count == 0)
|
||||
{
|
||||
return "<p><em>Нет нарушений</em></p>";
|
||||
}
|
||||
|
||||
var groupedByFile = violations
|
||||
.GroupBy(v => v.FileName)
|
||||
.OrderBy(g => g.Key);
|
||||
|
||||
var sb = new StringBuilder();
|
||||
sb.AppendLine("<!DOCTYPE html>");
|
||||
sb.AppendLine("<html lang=\"ru\">");
|
||||
sb.AppendLine("<head>");
|
||||
sb.AppendLine("<meta charset=\"UTF-8\">");
|
||||
sb.AppendLine("<title>Отчёт по SQL‑проверкам</title>");
|
||||
sb.AppendLine("<style>");
|
||||
sb.AppendLine("body { font-family: 'Segoe UI', Arial, sans-serif; background-color: #f5f5f5; margin: 0; padding: 0; color: #000; }");
|
||||
sb.AppendLine("h1 { padding: 20px; margin: 0; background-color: #0078d4; color: white; }");
|
||||
sb.AppendLine("h2 { margin-top: 20px; color: #333; }");
|
||||
sb.AppendLine("h3 { margin-top: 15px; color: #555; }");
|
||||
sb.AppendLine("table { border-collapse: collapse; width: 100%; margin: 20px 0; box-shadow: 0 2px 6px rgba(0,0,0,0.1); background-color: white; border-radius: 4px; overflow: hidden; }");
|
||||
sb.AppendLine("th, td { border: 1px solid #e0e0e0; padding: 4px 8px; text-align: left; line-height: 1.2; }");
|
||||
sb.AppendLine("th { background-color: #fafafa; font-weight: 600; }");
|
||||
sb.AppendLine("td.line, td.column { width: 60px; text-align: center; }");
|
||||
sb.AppendLine("td.rule { width: 300px; text-align: left; }");
|
||||
sb.AppendLine("td.index { width: 40px; text-align: center; }");
|
||||
sb.AppendLine(".critical { border-left: 4px solid #d13438; padding: 10px; margin-bottom: 20px; margin-top: 20px; background-color: #fde7e9; }");
|
||||
sb.AppendLine(".warning { border-left: 4px solid #ffaa44; padding: 10px; margin-bottom: 20px; background-color: #fff4ce; }");
|
||||
sb.AppendLine(".info { border-left: 4px solid #0078d4; padding: 10px; margin-bottom: 20px; background-color: #deecf9; }");
|
||||
sb.AppendLine(".tabs { position: fixed; bottom: 0; left: 0; right: 0; background-color: #ffffff; border-top: 1px solid #ccc; padding: 10px; display: flex; overflow-x: auto; scrollbar-width: thin; justify-content: flex-start; box-shadow: 0 -2px 6px rgba(0,0,0,0.1); }");
|
||||
sb.AppendLine(".tab { margin-right: 10px; padding: 8px 16px; border-radius: 4px; background-color: #f3f2f1; cursor: pointer; transition: background-color 0.2s; }");
|
||||
sb.AppendLine(".tab:hover { background-color: #e1dfdd; }");
|
||||
sb.AppendLine(".tab.active { background-color: #0078d4; color: white; }");
|
||||
sb.AppendLine(".file-report { display: none; padding: 0 0; }");
|
||||
sb.AppendLine(".file-report.active { display: block; }");
|
||||
|
||||
// Тёмная тема
|
||||
sb.AppendLine("@media (prefers-color-scheme: dark) {");
|
||||
sb.AppendLine(" body { background-color: #1e1e1e; color: #ddd; }");
|
||||
sb.AppendLine(" h1 { background-color: #005a9e; }");
|
||||
sb.AppendLine(" h2, h3 { color: #ddd; }");
|
||||
sb.AppendLine(" table { background-color: #2d2d2d; box-shadow: none; }");
|
||||
sb.AppendLine(" th { background-color: #3c3c3c; color: #fff; }");
|
||||
sb.AppendLine(" td { border: 1px solid #444; }");
|
||||
sb.AppendLine(" .tabs { background-color: #2d2d2d; border-top: 1px solid #444; }");
|
||||
sb.AppendLine(" .tab { background-color: #3c3c3c; color: #ddd; }");
|
||||
sb.AppendLine(" .tab:hover { background-color: #555; }");
|
||||
sb.AppendLine(" .tab.active { background-color: #0078d4; color: white; }");
|
||||
sb.AppendLine(" .critical { background-color: #4d1f1f; border-left-color: #d13438; }");
|
||||
sb.AppendLine(" .warning { background-color: #4d3b1f; border-left-color: #ffaa44; }");
|
||||
sb.AppendLine(" .info { background-color: #1f3b4d; border-left-color: #0078d4; }");
|
||||
sb.AppendLine("}");
|
||||
sb.AppendLine("</style>");
|
||||
sb.AppendLine("</head>");
|
||||
sb.AppendLine("<body>");
|
||||
//sb.AppendLine("<h1>Отчёт по SQL‑проверкам</h1>");
|
||||
|
||||
int fileIndex = 0;
|
||||
foreach (var fileGroup in groupedByFile)
|
||||
{
|
||||
string divId = $"file_{fileIndex}";
|
||||
sb.AppendLine($"<div id=\"{divId}\" class=\"file-report{(fileIndex == 0 ? " active" : "")}\">");
|
||||
sb.AppendLine($"<h1>Файл: {fileGroup.Key}</h1>");
|
||||
|
||||
var groupedBySeverity = fileGroup
|
||||
.GroupBy(v => v.Severity)
|
||||
.OrderByDescending(g => g.Key);
|
||||
|
||||
foreach (var severityGroup in groupedBySeverity)
|
||||
{
|
||||
string severityClass = severityGroup.Key switch
|
||||
{
|
||||
RuleViolationSeverity.Critical => "critical",
|
||||
RuleViolationSeverity.Warning => "warning",
|
||||
RuleViolationSeverity.Info => "info",
|
||||
_ => ""
|
||||
};
|
||||
|
||||
sb.AppendLine($"<div class=\"{severityClass}\">");
|
||||
sb.AppendLine($"<h3>{severityGroup.Key}</h3>");
|
||||
sb.AppendLine("<table>");
|
||||
sb.AppendLine("<thead>");
|
||||
sb.AppendLine("<tr><th>#</th><th>Строка</th><th>Колонка</th><th>Правило</th><th>Описание</th></tr>");
|
||||
sb.AppendLine("</thead>");
|
||||
sb.AppendLine("<tbody>");
|
||||
|
||||
int rowIndex = 1;
|
||||
foreach (var v in severityGroup
|
||||
.OrderBy(x => x.Line)
|
||||
.ThenBy(x => x.Column))
|
||||
{
|
||||
sb.AppendLine($"<tr><td class=\"index\">{rowIndex}</td><td class=\"line\">{v.Line}</td><td class=\"column\">{v.Column}</td><td class=\"rule\">{v.RuleName}</td><td>{v.Text}</td></tr>");
|
||||
rowIndex++;
|
||||
}
|
||||
|
||||
sb.AppendLine("</tbody>");
|
||||
sb.AppendLine("</table>");
|
||||
sb.AppendLine("</div>");
|
||||
}
|
||||
|
||||
sb.AppendLine("</div>");
|
||||
fileIndex++;
|
||||
}
|
||||
|
||||
// Табы снизу
|
||||
sb.AppendLine("<div class=\"tabs\">");
|
||||
fileIndex = 0;
|
||||
foreach (var fileGroup in groupedByFile)
|
||||
{
|
||||
sb.AppendLine($"<div class=\"tab{(fileIndex == 0 ? " active" : "")}\" onclick=\"showReport('file_{fileIndex}', this)\">{fileGroup.Key}</div>");
|
||||
fileIndex++;
|
||||
}
|
||||
sb.AppendLine("</div>");
|
||||
|
||||
// JS для переключения
|
||||
sb.AppendLine("<script>");
|
||||
sb.AppendLine("function showReport(id, tab) {");
|
||||
sb.AppendLine(" document.querySelectorAll('.file-report').forEach(el => el.classList.remove('active'));");
|
||||
sb.AppendLine(" document.getElementById(id).classList.add('active');");
|
||||
sb.AppendLine(" document.querySelectorAll('.tab').forEach(el => el.classList.remove('active'));");
|
||||
sb.AppendLine(" tab.classList.add('active');");
|
||||
sb.AppendLine(" window.scrollTo({ top: 0, behavior: 'smooth' });");
|
||||
sb.AppendLine("}");
|
||||
sb.AppendLine("document.querySelector('.tabs').addEventListener('wheel', function(e) {");
|
||||
sb.AppendLine(" e.preventDefault();");
|
||||
sb.AppendLine(" this.scrollLeft += e.deltaY;");
|
||||
sb.AppendLine("});");
|
||||
sb.AppendLine("</script>");
|
||||
|
||||
sb.AppendLine("</body>");
|
||||
sb.AppendLine("</html>");
|
||||
|
||||
return HtmlMinifier.MinifyHtml(sb.ToString());
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,282 @@
|
||||
using SQLLinter.Common;
|
||||
using SQLLinter.Infrastructure.Diagram;
|
||||
using SQLLinter.Infrastructure.Rules.RuleViolations;
|
||||
using System.Data;
|
||||
using System.Reflection;
|
||||
using System.Text;
|
||||
using System.Text.Json;
|
||||
using System.Text.Json.Serialization;
|
||||
|
||||
namespace SQLLinter.Infrastructure.Reporters.Formatters.Html.v2;
|
||||
|
||||
public class HtmlReportFormatter : IReportFormatter
|
||||
{
|
||||
public string Format(List<IRuleViolation> violations)
|
||||
=> Format(violations, null);
|
||||
|
||||
public string Format(List<IRuleViolation> violations, BpmnDiagram? diagram)
|
||||
{
|
||||
var sb = new StringBuilder();
|
||||
GenerateBeginningHtml(sb);
|
||||
|
||||
// Подготовка данных для передачи в JS
|
||||
var reportData = PrepareReportData(violations, diagram);
|
||||
var jsonData = JsonSerializer.Serialize(reportData, new JsonSerializerOptions
|
||||
{
|
||||
PropertyNamingPolicy = JsonNamingPolicy.CamelCase,
|
||||
DefaultIgnoreCondition = JsonIgnoreCondition.WhenWritingNull
|
||||
});
|
||||
|
||||
if (violations.Count == 0 && diagram == null)
|
||||
{
|
||||
// Случай без нарушений
|
||||
sb.AppendLine("<div class=\"no-violations\">");
|
||||
sb.AppendLine("<div class=\"no-violations-content\">");
|
||||
sb.AppendLine("<div class=\"no-violations-icon\">✅</div>");
|
||||
sb.AppendLine("<h3 class=\"no-violations-title\">Проверка завершена</h3>");
|
||||
sb.AppendLine("<p class=\"no-violations-description\">Нарушений правил SQL не обнаружено.</p>");
|
||||
sb.AppendLine("</div>");
|
||||
sb.AppendLine("</div>");
|
||||
|
||||
GenerateEndingHtml(sb, false, HtmlMinifier.CompressJson(jsonData));
|
||||
return sb.ToString();
|
||||
}
|
||||
|
||||
// Основной контейнер для отчета
|
||||
sb.AppendLine("""
|
||||
<div id="reports-container"></div>
|
||||
<div id="tabs-container" class="tabs-container">
|
||||
<div class="tabs" id="tabs-list"></div>
|
||||
</div>
|
||||
""");
|
||||
|
||||
GenerateEndingHtml(sb, diagram != null, jsonData);
|
||||
|
||||
var html = HtmlMinifier.MinifyHtml(sb.ToString());
|
||||
return html;
|
||||
}
|
||||
|
||||
private ReportData PrepareReportData(List<IRuleViolation> violations, BpmnDiagram? diagram)
|
||||
{
|
||||
var reportData = new ReportData();
|
||||
|
||||
// Группировка по файлам
|
||||
var groupedByFile = violations
|
||||
.GroupBy(v => v.FileName)
|
||||
.OrderBy(g => g.Key)
|
||||
.ToList();
|
||||
|
||||
foreach (var fileGroup in groupedByFile)
|
||||
{
|
||||
var fileData = new FileReport
|
||||
{
|
||||
Name = fileGroup.Key,
|
||||
};
|
||||
|
||||
|
||||
// Группировка по severity
|
||||
var severityGroups = fileGroup
|
||||
.GroupBy(v => v.Severity)
|
||||
.OrderByDescending(g => g.Key)
|
||||
.ToList();
|
||||
|
||||
foreach (var violation in fileGroup.Select(t => t).OrderBy(v => v.Line).ThenBy(v => v.Column))
|
||||
{
|
||||
int ruleId;
|
||||
List<string> args = new();
|
||||
|
||||
if (violation is RuleTemplateViolation templateRule)
|
||||
{
|
||||
args = templateRule.Params.Select(p => EscapeHtml(p)).ToList();
|
||||
|
||||
if (reportData.Rules.Any(t => t.Value.Name == templateRule.RuleName))
|
||||
{
|
||||
ruleId = reportData.Rules.First(t => t.Value.Name == templateRule.RuleName).Key;
|
||||
}
|
||||
else
|
||||
{
|
||||
ruleId = reportData.Rules.Count + 1;
|
||||
reportData.Rules.Add(ruleId, new Rule
|
||||
{
|
||||
Name = templateRule.RuleName,
|
||||
Template = templateRule.RuleTemplate
|
||||
});
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
ruleId = reportData.Rules.Count + 1;
|
||||
reportData.Rules.Add(ruleId, new Rule
|
||||
{
|
||||
Name = violation.RuleName,
|
||||
Template = violation.Text,
|
||||
});
|
||||
}
|
||||
|
||||
var v = new Violation()
|
||||
{
|
||||
RuleId = ruleId,
|
||||
Args = args,
|
||||
Column = violation.Column,
|
||||
Line = violation.Line,
|
||||
};
|
||||
|
||||
if (violation.Severity == RuleViolationSeverity.Critical)
|
||||
{
|
||||
v.Index = fileData.Violations.Critical.Count + 1;
|
||||
fileData.Violations.Critical.Add(v);
|
||||
}
|
||||
|
||||
else if (violation.Severity == RuleViolationSeverity.Warning)
|
||||
{
|
||||
v.Index = fileData.Violations.Warning.Count + 1;
|
||||
fileData.Violations.Warning.Add(v);
|
||||
}
|
||||
|
||||
else if (violation.Severity == RuleViolationSeverity.Info)
|
||||
{
|
||||
v.Index = fileData.Violations.Info.Count + 1;
|
||||
fileData.Violations.Info.Add(v);
|
||||
}
|
||||
}
|
||||
|
||||
reportData.Files.Add(fileData);
|
||||
}
|
||||
|
||||
// Добавление диаграммы, если есть
|
||||
if (diagram != null)
|
||||
{
|
||||
reportData.Diagram = new Diagram
|
||||
{
|
||||
Content = MermaidRenderer.ToMermaidContent(diagram),
|
||||
HasDiagram = true
|
||||
};
|
||||
}
|
||||
|
||||
return reportData;
|
||||
}
|
||||
|
||||
private void GenerateBeginningHtml(StringBuilder sb)
|
||||
{
|
||||
sb.AppendLine("""
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Отчёт по SQL‑проверкам</title>
|
||||
<style>
|
||||
""");
|
||||
|
||||
sb.AppendLine(LoadResource("HtmlFormatter_v2.css"));
|
||||
sb.AppendLine("</style></head><body><main id=\"main-content\">");
|
||||
}
|
||||
|
||||
private void GenerateEndingHtml(StringBuilder sb, bool hasDiagram, string jsonData)
|
||||
{
|
||||
// Вставка JSON данных
|
||||
sb.AppendLine($"""
|
||||
<script id="report-data" type="application/json">
|
||||
{jsonData}
|
||||
</script>
|
||||
""");
|
||||
|
||||
sb.AppendLine("""
|
||||
<script type="module">
|
||||
""");
|
||||
|
||||
// Загружаем основной JS
|
||||
sb.AppendLine(LoadResource("HtmlFormatter_v2.js"));
|
||||
|
||||
sb.AppendLine("""
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
""");
|
||||
}
|
||||
|
||||
private static string LoadResource(string endsWith)
|
||||
{
|
||||
var assembly = Assembly.GetExecutingAssembly();
|
||||
var name = assembly.GetManifestResourceNames()
|
||||
.First(n => n.EndsWith(endsWith, StringComparison.OrdinalIgnoreCase));
|
||||
using var stream = assembly.GetManifestResourceStream(name);
|
||||
using var reader = new StreamReader(stream);
|
||||
return reader.ReadToEnd();
|
||||
}
|
||||
|
||||
private static string EscapeHtml(string text)
|
||||
{
|
||||
return System.Net.WebUtility.HtmlEncode(text);
|
||||
}
|
||||
|
||||
// Классы для сериализации
|
||||
private class ReportData
|
||||
{
|
||||
[JsonPropertyName("f")] // files
|
||||
public List<FileReport> Files { get; set; } = new();
|
||||
|
||||
[JsonPropertyName("r")] // rules
|
||||
public Dictionary<int, Rule> Rules { get; set; } = new();
|
||||
|
||||
[JsonPropertyName("d")] // diagram
|
||||
public Diagram Diagram { get; set; } = new();
|
||||
}
|
||||
|
||||
private class FileReport
|
||||
{
|
||||
[JsonPropertyName("n")] // name
|
||||
public string Name { get; set; } = string.Empty;
|
||||
|
||||
[JsonPropertyName("v")] // violations
|
||||
public Violations Violations { get; set; } = new();
|
||||
}
|
||||
|
||||
private class Violations
|
||||
{
|
||||
[JsonPropertyName("c")] // critical
|
||||
public List<Violation> Critical { get; set; } = new();
|
||||
|
||||
[JsonPropertyName("w")] // warning
|
||||
public List<Violation> Warning { get; set; } = new();
|
||||
|
||||
[JsonPropertyName("i")] // info
|
||||
public List<Violation> Info { get; set; } = new();
|
||||
}
|
||||
|
||||
private class Violation
|
||||
{
|
||||
[JsonPropertyName("i")] // index
|
||||
public int Index { get; set; }
|
||||
|
||||
[JsonPropertyName("l")] // line
|
||||
public int Line { get; set; }
|
||||
|
||||
[JsonPropertyName("c")] // column
|
||||
public int Column { get; set; }
|
||||
|
||||
[JsonPropertyName("r")] // ruleId
|
||||
public int RuleId { get; set; }
|
||||
|
||||
[JsonPropertyName("a")] // args (optional)
|
||||
public List<string>? Args { get; set; }
|
||||
}
|
||||
|
||||
private class Rule
|
||||
{
|
||||
[JsonPropertyName("n")] // name
|
||||
public string Name { get; set; } = string.Empty;
|
||||
|
||||
[JsonPropertyName("t")] // template
|
||||
public string Template { get; set; } = string.Empty;
|
||||
}
|
||||
|
||||
private class Diagram
|
||||
{
|
||||
[JsonPropertyName("c")] // content
|
||||
public string Content { get; set; } = string.Empty;
|
||||
|
||||
[JsonPropertyName("h")] // hasDiagram
|
||||
public bool HasDiagram { get; set; }
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,542 @@
|
||||
/* ---------------------------------------------------------
|
||||
FLUENT UI 2 — BASE VARIABLES
|
||||
--------------------------------------------------------- */
|
||||
:root {
|
||||
--color-primary: #0f6cbd;
|
||||
--color-primary-hover: #115ea3;
|
||||
--color-primary-light: #d0e7ff;
|
||||
--color-bg: #ffffff;
|
||||
--color-bg-alt: #f5f5f5;
|
||||
--color-bg-neutral: #f3f2f1;
|
||||
--color-border: #d1d1d1;
|
||||
--color-border-strong: #b5b5b5;
|
||||
--color-text: #1a1a1a;
|
||||
--color-text-secondary: #5e5e5e;
|
||||
--color-text-tertiary: #8a8a8a;
|
||||
--color-critical: #d13438;
|
||||
--color-critical-bg: #f8d7da;
|
||||
--color-warning: #ffaa44;
|
||||
--color-warning-bg: #fff4ce;
|
||||
--color-info: #0f6cbd;
|
||||
--color-info-bg: #d0e7ff;
|
||||
--radius-s: 4px;
|
||||
--radius-m: 6px;
|
||||
--radius-l: 8px;
|
||||
--space-xs: 4px;
|
||||
--space-s: 8px;
|
||||
--space-m: 12px;
|
||||
--space-l: 16px;
|
||||
--space-xl: 20px;
|
||||
--space-xxl: 28px;
|
||||
--font-s: 12px;
|
||||
--font-m: 14px;
|
||||
--font-l: 16px;
|
||||
--font-xl: 18px;
|
||||
--z-tabs: 1000;
|
||||
--z-header: 900;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
RESET
|
||||
--------------------------------------------------------- */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Segoe UI", sans-serif;
|
||||
background: var(--color-bg-neutral);
|
||||
color: var(--color-text);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
FILE REPORT WRAPPER
|
||||
--------------------------------------------------------- */
|
||||
.file-report {
|
||||
display: none;
|
||||
padding-bottom: 120px;
|
||||
}
|
||||
|
||||
.file-report.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
FILE TITLE (STICKY)
|
||||
--------------------------------------------------------- */
|
||||
.file-title-container {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: var(--z-header);
|
||||
background: var(--color-bg);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
padding: var(--space-l) var(--space-xl);
|
||||
}
|
||||
|
||||
.file-title {
|
||||
font-size: var(--font-xl);
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
SEVERITY SECTIONS (FLUENT UI 2 STYLE)
|
||||
--------------------------------------------------------- */
|
||||
.severity-section {
|
||||
background: var(--color-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-l);
|
||||
padding: var(--space-xl);
|
||||
margin: var(--space-xl) var(--space-xl);
|
||||
}
|
||||
|
||||
.severity-section.critical {
|
||||
border-left: 4px solid var(--color-critical);
|
||||
}
|
||||
|
||||
.severity-section.warning {
|
||||
border-left: 4px solid var(--color-warning);
|
||||
}
|
||||
|
||||
.severity-section.info {
|
||||
border-left: 4px solid var(--color-info);
|
||||
}
|
||||
|
||||
.severity-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--space-l);
|
||||
padding-bottom: var(--space-s);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.severity-title h2 {
|
||||
font-size: var(--font-l);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.severity-count {
|
||||
background: var(--color-bg-alt);
|
||||
padding: var(--space-xs) var(--space-s);
|
||||
border-radius: var(--radius-s);
|
||||
font-size: var(--font-s);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
GRID TABLE (REPLACES <table>)
|
||||
--------------------------------------------------------- */
|
||||
.grid-table {
|
||||
display: grid;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.grid-header,
|
||||
.grid-row {
|
||||
display: grid;
|
||||
grid-template-columns: 40px 60px 60px 250px 1fr;
|
||||
gap: var(--space-xs);
|
||||
padding: var(--space-s);
|
||||
border-radius: var(--radius-s);
|
||||
}
|
||||
|
||||
.grid-header {
|
||||
background: var(--color-bg-alt);
|
||||
font-weight: 600;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-s);
|
||||
}
|
||||
|
||||
.grid-row {
|
||||
background: var(--color-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
font-size: var(--font-m);
|
||||
transition: background-color 0.15s ease;
|
||||
}
|
||||
|
||||
.grid-row:hover {
|
||||
background: var(--color-bg-alt);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
SUMMARY SECTION
|
||||
--------------------------------------------------------- */
|
||||
.summary-section {
|
||||
background: var(--color-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-l);
|
||||
padding: var(--space-xl);
|
||||
margin: var(--space-xl);
|
||||
}
|
||||
|
||||
.summary-header h2 {
|
||||
font-size: var(--font-l);
|
||||
margin-bottom: var(--space-m);
|
||||
}
|
||||
|
||||
.summary-stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||||
gap: var(--space-m);
|
||||
margin-bottom: var(--space-l);
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: var(--color-bg-alt);
|
||||
border-radius: var(--radius-m);
|
||||
padding: var(--space-m);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: var(--font-xl);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: var(--font-s);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* Progress bar */
|
||||
.progress-bar {
|
||||
display: flex;
|
||||
height: 8px;
|
||||
border-radius: var(--radius-s);
|
||||
overflow: hidden;
|
||||
background: var(--color-border);
|
||||
}
|
||||
|
||||
.progress-fill.critical {
|
||||
background: var(--color-critical);
|
||||
}
|
||||
|
||||
.progress-fill.warning {
|
||||
background: var(--color-warning);
|
||||
}
|
||||
|
||||
.progress-fill.info {
|
||||
background: var(--color-info);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
FILE CARDS IN SUMMARY
|
||||
--------------------------------------------------------- */
|
||||
.files-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: var(--space-m);
|
||||
}
|
||||
|
||||
.file-card {
|
||||
background: var(--color-bg-alt);
|
||||
border-radius: var(--radius-m);
|
||||
padding: var(--space-m);
|
||||
transition: background-color 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.file-card:hover {
|
||||
transform: translateY(-2px);
|
||||
background: var(--color-bg-neutral);
|
||||
}
|
||||
|
||||
.file-name-small {
|
||||
font-weight: 600;
|
||||
font-size: var(--font-m);
|
||||
}
|
||||
|
||||
.file-card-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: var(--space-s);
|
||||
}
|
||||
|
||||
.file-violations {
|
||||
display: flex;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.violation-badge {
|
||||
padding: var(--space-xs) var(--space-s);
|
||||
border-radius: var(--radius-s);
|
||||
font-size: var(--font-s);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.violation-badge.critical {
|
||||
background: var(--color-critical-bg);
|
||||
color: var(--color-critical);
|
||||
}
|
||||
|
||||
.violation-badge.warning {
|
||||
background: var(--color-warning-bg);
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.violation-badge.info {
|
||||
background: var(--color-info-bg);
|
||||
color: var(--color-info);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
TABS CONTAINER (STICKY BOTTOM)
|
||||
--------------------------------------------------------- */
|
||||
.tabs-container {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--color-bg);
|
||||
border-top: 1px solid var(--color-border);
|
||||
padding: var(--space-s) var(--space-l);
|
||||
z-index: var(--z-tabs);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
TABS — HORIZONTAL SCROLL + VISIBLE SCROLLBAR
|
||||
--------------------------------------------------------- */
|
||||
.tabs {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: var(--space-s);
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
white-space: nowrap;
|
||||
scroll-behavior: smooth;
|
||||
padding-bottom: 4px;
|
||||
/* Firefox scrollbar */
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--color-border-strong) var(--color-bg-alt);
|
||||
}
|
||||
|
||||
/* Chrome / Edge / Safari scrollbar */
|
||||
.tabs::-webkit-scrollbar {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.tabs::-webkit-scrollbar-track {
|
||||
background: var(--color-bg-alt);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.tabs::-webkit-scrollbar-thumb {
|
||||
background: var(--color-border-strong);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.tabs::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
TAB BASE STYLES (COMPACT, AUTO WIDTH, MAX 2 LINES)
|
||||
--------------------------------------------------------- */
|
||||
.tab {
|
||||
flex: 0 0 auto; /* растягивается под контент, не ломая одну линию */
|
||||
min-width: 0;
|
||||
padding: 6px 12px;
|
||||
line-height: 1.25;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
background: var(--color-bg-alt);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-m);
|
||||
cursor: pointer;
|
||||
font-size: var(--font-m);
|
||||
font-weight: 500;
|
||||
color: var(--color-text-secondary);
|
||||
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
|
||||
}
|
||||
|
||||
.tab:hover {
|
||||
background: var(--color-bg-neutral);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
background: var(--color-primary-light);
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Внутренний layout таба */
|
||||
.tab-inner {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 6px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Текст таба — максимум 2 строки, с переносами */
|
||||
.tab-text {
|
||||
font-size: 13px;
|
||||
line-height: 1.25;
|
||||
white-space: normal;
|
||||
word-break: break-word;
|
||||
overflow-wrap: break-word;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
max-height: calc(1.25em * 2);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Счётчики — компактные */
|
||||
.tab-counters {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tab-counter {
|
||||
font-size: 10px;
|
||||
min-width: 14px;
|
||||
height: 14px;
|
||||
padding: 0 3px;
|
||||
line-height: 14px;
|
||||
border-radius: var(--radius-s);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tab-counter.critical {
|
||||
background: var(--color-critical-bg);
|
||||
color: var(--color-critical);
|
||||
}
|
||||
|
||||
.tab-counter.warning {
|
||||
background: var(--color-warning-bg);
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.tab-counter.info {
|
||||
background: var(--color-info-bg);
|
||||
color: var(--color-info);
|
||||
}
|
||||
|
||||
.tab-counter.empty {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
/* Мобильная компактность */
|
||||
@media (max-width: 480px) {
|
||||
.tab {
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.tab-text {
|
||||
font-size: 12px;
|
||||
max-height: calc(1.2em * 2);
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.tab-counter {
|
||||
min-width: 12px;
|
||||
height: 12px;
|
||||
font-size: 9px;
|
||||
padding: 0 2px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
FLUENT UI 2 — DARK THEME (PREFERS-COLOR-SCHEME)
|
||||
--------------------------------------------------------- */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-bg: #1f1f1f;
|
||||
--color-bg-alt: #2a2a2a;
|
||||
--color-bg-neutral: #2d2d2d;
|
||||
--color-text: #f3f3f3;
|
||||
--color-text-secondary: #c8c8c8;
|
||||
--color-text-tertiary: #9a9a9a;
|
||||
--color-border: #3a3a3a;
|
||||
--color-border-strong: #4a4a4a;
|
||||
--color-primary: #3aa0f3;
|
||||
--color-primary-hover: #2899f5;
|
||||
--color-primary-light: #0f2b4d;
|
||||
--color-critical-bg: #4c191b;
|
||||
--color-warning-bg: #4c3b1a;
|
||||
--color-info-bg: #0f2b4d;
|
||||
}
|
||||
|
||||
.file-title-container {
|
||||
background: var(--color-bg);
|
||||
}
|
||||
|
||||
.severity-section {
|
||||
background: var(--color-bg);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
.grid-row {
|
||||
background: var(--color-bg-alt);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
.grid-row:hover {
|
||||
background: var(--color-bg-neutral);
|
||||
}
|
||||
|
||||
.summary-section {
|
||||
background: var(--color-bg);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
.file-card {
|
||||
background: var(--color-bg-alt);
|
||||
}
|
||||
|
||||
.tabs-container {
|
||||
background: var(--color-bg);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
.tab {
|
||||
background: var(--color-bg-alt);
|
||||
border-color: var(--color-border);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
background: var(--color-primary-light);
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* Dark scrollbar colors */
|
||||
.tabs {
|
||||
scrollbar-color: var(--color-border-strong) var(--color-bg);
|
||||
}
|
||||
|
||||
.tabs::-webkit-scrollbar-track {
|
||||
background: var(--color-bg);
|
||||
}
|
||||
|
||||
.tabs::-webkit-scrollbar-thumb {
|
||||
background: var(--color-border-strong);
|
||||
}
|
||||
|
||||
.tabs::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--color-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
TAB TRANSITIONS & FILE REPORT ANIMATION
|
||||
--------------------------------------------------------- */
|
||||
.file-report {
|
||||
opacity: 0;
|
||||
transform: translateY(6px);
|
||||
transition: opacity 0.25s ease, transform 0.25s ease;
|
||||
}
|
||||
|
||||
.file-report.active {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
@@ -0,0 +1,486 @@
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const dataEl = document.getElementById("report-data");
|
||||
if (!dataEl) return console.error("report-data not found");
|
||||
|
||||
const data = JSON.parse(dataEl.textContent || "{}");
|
||||
const files = data.files || data.f || [];
|
||||
const rules = data.rules || data.r || {};
|
||||
|
||||
const tabsList = document.getElementById("tabs-list");
|
||||
const reportsContainer = document.getElementById("reports-container");
|
||||
|
||||
if (!tabsList || !reportsContainer) {
|
||||
console.error("Missing tabs-list or reports-container");
|
||||
return;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
UTILS
|
||||
--------------------------------------------------------- */
|
||||
|
||||
function escapeHtml(str) {
|
||||
if (str == null) return "";
|
||||
return String(str)
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """);
|
||||
}
|
||||
|
||||
function countViolations(v) {
|
||||
return {
|
||||
c: v?.c?.length || 0,
|
||||
w: v?.w?.length || 0,
|
||||
i: v?.i?.length || 0
|
||||
};
|
||||
}
|
||||
|
||||
const rendered = new Set(); // ленивый рендер
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
RENDER TABS
|
||||
--------------------------------------------------------- */
|
||||
|
||||
function renderTabs() {
|
||||
const frag = document.createDocumentFragment();
|
||||
|
||||
files.forEach((file, index) => {
|
||||
const v = countViolations(file.v);
|
||||
|
||||
const btn = document.createElement("button");
|
||||
btn.className = "tab";
|
||||
btn.dataset.target = `file_${index}`;
|
||||
btn.dataset.index = index;
|
||||
|
||||
const inner = document.createElement("div");
|
||||
inner.className = "tab-inner";
|
||||
|
||||
const text = document.createElement("span");
|
||||
text.className = "tab-text";
|
||||
text.title = file.n;
|
||||
text.textContent = file.n;
|
||||
|
||||
const counters = document.createElement("div");
|
||||
counters.className = "tab-counters";
|
||||
|
||||
const c1 = document.createElement("span");
|
||||
c1.className = "tab-counter critical" + (v.c ? "" : " empty");
|
||||
c1.textContent = v.c || "";
|
||||
|
||||
const c2 = document.createElement("span");
|
||||
c2.className = "tab-counter warning" + (v.w ? "" : " empty");
|
||||
c2.textContent = v.w || "";
|
||||
|
||||
const c3 = document.createElement("span");
|
||||
c3.className = "tab-counter info" + (v.i ? "" : " empty");
|
||||
c3.textContent = v.i || "";
|
||||
|
||||
counters.append(c1, c2, c3);
|
||||
inner.append(text, counters);
|
||||
btn.append(inner);
|
||||
frag.append(btn);
|
||||
});
|
||||
|
||||
// Summary tab
|
||||
const summaryBtn = document.createElement("button");
|
||||
summaryBtn.className = "tab";
|
||||
summaryBtn.dataset.target = "summary_report";
|
||||
|
||||
const inner = document.createElement("div");
|
||||
inner.className = "tab-inner";
|
||||
|
||||
const text = document.createElement("span");
|
||||
text.className = "tab-text";
|
||||
text.textContent = "Summary";
|
||||
|
||||
inner.append(text);
|
||||
summaryBtn.append(inner);
|
||||
frag.append(summaryBtn);
|
||||
|
||||
tabsList.innerHTML = "";
|
||||
tabsList.append(frag);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
GRID ROW CREATOR (VIOLATIONS)
|
||||
--------------------------------------------------------- */
|
||||
|
||||
function createGridRow(v, rule) {
|
||||
const row = document.createElement("div");
|
||||
row.className = "grid-row";
|
||||
|
||||
const cIndex = document.createElement("div");
|
||||
cIndex.textContent = v.i;
|
||||
|
||||
const cLine = document.createElement("div");
|
||||
cLine.textContent = v.l;
|
||||
|
||||
const cCol = document.createElement("div");
|
||||
cCol.textContent = v.c;
|
||||
|
||||
const cRule = document.createElement("div");
|
||||
cRule.textContent = rule.n;
|
||||
|
||||
let text = rule.t || "";
|
||||
const args = v.a || v.args;
|
||||
if (Array.isArray(args)) {
|
||||
for (let i = 0; i < args.length; i++) {
|
||||
text = text.replace(`{${i}}`, args[i]);
|
||||
}
|
||||
}
|
||||
|
||||
const cDesc = document.createElement("div");
|
||||
cDesc.textContent = text;
|
||||
|
||||
row.append(cIndex, cLine, cCol, cRule, cDesc);
|
||||
return row;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
FILE REPORT
|
||||
--------------------------------------------------------- */
|
||||
|
||||
function renderFileReport(index) {
|
||||
const file = files[index];
|
||||
const v = file.v || {};
|
||||
|
||||
const root = document.createElement("div");
|
||||
|
||||
// Title
|
||||
const titleWrap = document.createElement("div");
|
||||
titleWrap.className = "file-title-container";
|
||||
|
||||
const title = document.createElement("div");
|
||||
title.className = "file-title";
|
||||
|
||||
const name = document.createElement("span");
|
||||
name.className = "file-name";
|
||||
name.textContent = file.n;
|
||||
|
||||
title.append(name);
|
||||
titleWrap.append(title);
|
||||
root.append(titleWrap);
|
||||
|
||||
// Sections
|
||||
function addSection(label, list, cls) {
|
||||
if (!Array.isArray(list) || list.length === 0) return;
|
||||
|
||||
const section = document.createElement("div");
|
||||
section.className = `severity-section ${cls}`;
|
||||
|
||||
const header = document.createElement("div");
|
||||
header.className = "severity-header";
|
||||
|
||||
const hTitle = document.createElement("div");
|
||||
hTitle.className = "severity-title";
|
||||
|
||||
const h2 = document.createElement("h2");
|
||||
h2.textContent = label;
|
||||
|
||||
const count = document.createElement("span");
|
||||
count.className = "severity-count";
|
||||
count.textContent = list.length;
|
||||
|
||||
hTitle.append(h2, count);
|
||||
header.append(hTitle);
|
||||
section.append(header);
|
||||
|
||||
const grid = document.createElement("div");
|
||||
grid.className = "grid-table";
|
||||
|
||||
// header row
|
||||
const headerRow = document.createElement("div");
|
||||
headerRow.className = "grid-header";
|
||||
|
||||
["#", "Строка", "Колонка", "Правило", "Описание"].forEach(t => {
|
||||
const cell = document.createElement("div");
|
||||
cell.textContent = t;
|
||||
headerRow.append(cell);
|
||||
});
|
||||
|
||||
grid.append(headerRow);
|
||||
|
||||
// rows
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
const vItem = list[i];
|
||||
const rule = rules[vItem.r] || { n: "Unknown", t: "Описание отсутствует" };
|
||||
grid.append(createGridRow(vItem, rule));
|
||||
}
|
||||
|
||||
section.append(grid);
|
||||
root.append(section);
|
||||
}
|
||||
|
||||
addSection("Critical", v.c, "critical");
|
||||
addSection("Warning", v.w, "warning");
|
||||
addSection("Info", v.i, "info");
|
||||
|
||||
return root;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
SUMMARY
|
||||
--------------------------------------------------------- */
|
||||
|
||||
function renderSummary() {
|
||||
let totalC = 0, totalW = 0, totalI = 0;
|
||||
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
const v = countViolations(files[i].v);
|
||||
totalC += v.c;
|
||||
totalW += v.w;
|
||||
totalI += v.i;
|
||||
}
|
||||
|
||||
const total = totalC + totalW + totalI || 1;
|
||||
|
||||
const root = document.createElement("div");
|
||||
|
||||
// Title
|
||||
const titleWrap = document.createElement("div");
|
||||
titleWrap.className = "file-title-container";
|
||||
|
||||
const title = document.createElement("div");
|
||||
title.className = "file-title";
|
||||
|
||||
const name = document.createElement("span");
|
||||
name.className = "file-name";
|
||||
name.textContent = "Сводный отчет";
|
||||
|
||||
title.append(name);
|
||||
titleWrap.append(title);
|
||||
root.append(titleWrap);
|
||||
|
||||
// Stats
|
||||
const section = document.createElement("div");
|
||||
section.className = "summary-section";
|
||||
|
||||
const header = document.createElement("div");
|
||||
header.className = "summary-header";
|
||||
|
||||
const hTitle = document.createElement("div");
|
||||
hTitle.className = "summary-title";
|
||||
|
||||
const h2 = document.createElement("h2");
|
||||
h2.textContent = "Общая статистика";
|
||||
|
||||
hTitle.append(h2);
|
||||
header.append(hTitle);
|
||||
section.append(header);
|
||||
|
||||
const grid = document.createElement("div");
|
||||
grid.className = "summary-stats-grid";
|
||||
|
||||
function statCard(cls, value, label) {
|
||||
const card = document.createElement("div");
|
||||
card.className = `stat-card ${cls}`;
|
||||
|
||||
const v = document.createElement("div");
|
||||
v.className = "stat-value";
|
||||
v.textContent = value;
|
||||
|
||||
const l = document.createElement("div");
|
||||
l.className = "stat-label";
|
||||
l.textContent = label;
|
||||
|
||||
card.append(v, l);
|
||||
return card;
|
||||
}
|
||||
|
||||
grid.append(
|
||||
statCard("success", files.length, "Всего файлов"),
|
||||
statCard("critical", totalC, "Critical нарушений"),
|
||||
statCard("warning", totalW, "Warning нарушений"),
|
||||
statCard("info", totalI, "Info нарушений")
|
||||
);
|
||||
|
||||
section.append(grid);
|
||||
|
||||
// Progress
|
||||
const dist = document.createElement("div");
|
||||
dist.className = "violation-distribution";
|
||||
|
||||
const bar = document.createElement("div");
|
||||
bar.className = "progress-bar";
|
||||
|
||||
const pc = (totalC / total) * 100;
|
||||
const pw = (totalW / total) * 100;
|
||||
const pi = (totalI / total) * 100;
|
||||
|
||||
const f1 = document.createElement("div");
|
||||
f1.className = "progress-fill critical";
|
||||
f1.style.width = pc + "%";
|
||||
|
||||
const f2 = document.createElement("div");
|
||||
f2.className = "progress-fill warning";
|
||||
f2.style.width = pw + "%";
|
||||
|
||||
const f3 = document.createElement("div");
|
||||
f3.className = "progress-fill info";
|
||||
f3.style.width = pi + "%";
|
||||
|
||||
bar.append(f1, f2, f3);
|
||||
dist.append(bar);
|
||||
|
||||
section.append(dist);
|
||||
root.append(section);
|
||||
|
||||
// Files overview
|
||||
const section2 = document.createElement("div");
|
||||
section2.className = "summary-section files-overview";
|
||||
|
||||
const header2 = document.createElement("div");
|
||||
header2.className = "summary-header";
|
||||
|
||||
const hTitle2 = document.createElement("div");
|
||||
hTitle2.className = "summary-title";
|
||||
|
||||
const h22 = document.createElement("h2");
|
||||
h22.textContent = "Статистика файлов";
|
||||
|
||||
const count = document.createElement("span");
|
||||
count.className = "severity-count";
|
||||
count.textContent = files.length;
|
||||
|
||||
hTitle2.append(h22, count);
|
||||
header2.append(hTitle2);
|
||||
section2.append(header2);
|
||||
|
||||
const filesGrid = document.createElement("div");
|
||||
filesGrid.className = "files-grid";
|
||||
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
const f = files[i];
|
||||
const v = countViolations(f.v);
|
||||
const t = v.c + v.w + v.i || 1;
|
||||
|
||||
const card = document.createElement("div");
|
||||
card.className = "file-card";
|
||||
|
||||
const header = document.createElement("div");
|
||||
header.className = "file-card-header";
|
||||
|
||||
const name = document.createElement("span");
|
||||
name.className = "file-name-small";
|
||||
name.textContent = f.n;
|
||||
|
||||
header.append(name);
|
||||
card.append(header);
|
||||
|
||||
const bar = document.createElement("div");
|
||||
bar.className = "progress-bar small";
|
||||
|
||||
const fc = document.createElement("div");
|
||||
fc.className = "progress-fill critical";
|
||||
fc.style.width = (v.c / t * 100) + "%";
|
||||
|
||||
const fw = document.createElement("div");
|
||||
fw.className = "progress-fill warning";
|
||||
fw.style.width = (v.w / t * 100) + "%";
|
||||
|
||||
const fi = document.createElement("div");
|
||||
fi.className = "progress-fill info";
|
||||
fi.style.width = (v.i / t * 100) + "%";
|
||||
|
||||
bar.append(fc, fw, fi);
|
||||
card.append(bar);
|
||||
|
||||
const bottom = document.createElement("div");
|
||||
bottom.className = "file-card-bottom";
|
||||
|
||||
const total = document.createElement("span");
|
||||
total.className = "file-total";
|
||||
total.textContent = "Total: " + (v.c + v.w + v.i);
|
||||
|
||||
const badges = document.createElement("div");
|
||||
badges.className = "file-violations";
|
||||
|
||||
function badge(cls, val) {
|
||||
const b = document.createElement("span");
|
||||
b.className = `violation-badge ${cls}`;
|
||||
b.textContent = val;
|
||||
return b;
|
||||
}
|
||||
|
||||
badges.append(
|
||||
badge("critical", v.c),
|
||||
badge("warning", v.w),
|
||||
badge("info", v.i)
|
||||
);
|
||||
|
||||
bottom.append(total, badges);
|
||||
card.append(bottom);
|
||||
|
||||
filesGrid.append(card);
|
||||
}
|
||||
|
||||
section2.append(filesGrid);
|
||||
root.append(section2);
|
||||
|
||||
return root;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
TAB HANDLER
|
||||
--------------------------------------------------------- */
|
||||
|
||||
tabsList.addEventListener("click", function (e) {
|
||||
const tab = e.target.closest(".tab");
|
||||
if (!tab) return;
|
||||
|
||||
const targetId = tab.dataset.target;
|
||||
|
||||
// activate tab
|
||||
tabsList.querySelectorAll(".tab").forEach(t => t.classList.remove("active"));
|
||||
tab.classList.add("active");
|
||||
|
||||
// hide all reports
|
||||
reportsContainer.innerHTML = "";
|
||||
|
||||
// lazy render
|
||||
let content;
|
||||
if (!rendered.has(targetId)) {
|
||||
if (targetId === "summary_report") {
|
||||
content = renderSummary();
|
||||
} else {
|
||||
const index = Number(tab.dataset.index);
|
||||
content = renderFileReport(index);
|
||||
}
|
||||
rendered.add(targetId);
|
||||
} else {
|
||||
// already rendered → but we removed DOM → re-render
|
||||
if (targetId === "summary_report") {
|
||||
content = renderSummary();
|
||||
} else {
|
||||
const index = Number(tab.dataset.index);
|
||||
content = renderFileReport(index);
|
||||
}
|
||||
}
|
||||
|
||||
reportsContainer.append(content);
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
});
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
INIT
|
||||
--------------------------------------------------------- */
|
||||
|
||||
renderTabs();
|
||||
|
||||
const first = tabsList.querySelector(".tab");
|
||||
if (first) first.click();
|
||||
|
||||
const tabs = document.querySelector('.tabs');
|
||||
|
||||
tabs.addEventListener('wheel', (e) => {
|
||||
if (e.deltaY !== 0) {
|
||||
e.preventDefault();
|
||||
tabs.scrollBy({
|
||||
left: e.deltaY * 4,
|
||||
behavior: "smooth"
|
||||
});
|
||||
}
|
||||
}, { passive: false });
|
||||
|
||||
|
||||
});
|
||||
@@ -0,0 +1,291 @@
|
||||
using SQLLinter.Common;
|
||||
using SQLLinter.Infrastructure.Diagram;
|
||||
using SQLLinter.Infrastructure.Rules.RuleViolations;
|
||||
using System.Data;
|
||||
using System.Reflection;
|
||||
using System.Text;
|
||||
using System.Text.Json;
|
||||
using System.Text.Json.Serialization;
|
||||
|
||||
namespace SQLLinter.Infrastructure.Reporters.Formatters.Html.v3;
|
||||
|
||||
public class HtmlReportFormatter : IReportFormatter
|
||||
{
|
||||
public string Format(List<IRuleViolation> violations)
|
||||
=> Format(violations, null);
|
||||
|
||||
public string Format(List<IRuleViolation> violations, BpmnDiagram? diagram)
|
||||
{
|
||||
var sb = new StringBuilder();
|
||||
GenerateBeginningHtml(sb);
|
||||
|
||||
// Подготовка данных для передачи в JS
|
||||
var reportData = PrepareReportData(violations, diagram);
|
||||
var jsonData = JsonSerializer.Serialize(reportData, new JsonSerializerOptions
|
||||
{
|
||||
PropertyNamingPolicy = JsonNamingPolicy.CamelCase,
|
||||
DefaultIgnoreCondition = JsonIgnoreCondition.WhenWritingNull
|
||||
});
|
||||
|
||||
if (violations.Count == 0 && diagram == null)
|
||||
{
|
||||
// Случай без нарушений
|
||||
sb.AppendLine("<div class=\"no-violations\">");
|
||||
sb.AppendLine("<div class=\"no-violations-content\">");
|
||||
sb.AppendLine("<div class=\"no-violations-icon\">✅</div>");
|
||||
sb.AppendLine("<h3 class=\"no-violations-title\">Проверка завершена</h3>");
|
||||
sb.AppendLine("<p class=\"no-violations-description\">Нарушений правил SQL не обнаружено.</p>");
|
||||
sb.AppendLine("</div>");
|
||||
sb.AppendLine("</div>");
|
||||
|
||||
GenerateEndingHtml(sb, false, HtmlMinifier.CompressJson(jsonData));
|
||||
return sb.ToString();
|
||||
}
|
||||
|
||||
// Основной контейнер для отчета
|
||||
sb.AppendLine("""
|
||||
<!-- Основной контейнер отчёта -->
|
||||
<main id="main-content">
|
||||
|
||||
<!-- Контейнер для всех отчётов -->
|
||||
<div id="reports-container"></div>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- Sticky Tabs -->
|
||||
<div class="tabs-container">
|
||||
<div class="tabs" id="tabs-list"></div>
|
||||
</div>
|
||||
|
||||
""");
|
||||
|
||||
GenerateEndingHtml(sb, diagram != null, jsonData);
|
||||
|
||||
var html = HtmlMinifier.MinifyHtml(sb.ToString());
|
||||
return html;
|
||||
}
|
||||
|
||||
private ReportData PrepareReportData(List<IRuleViolation> violations, BpmnDiagram? diagram)
|
||||
{
|
||||
var reportData = new ReportData();
|
||||
|
||||
// Группировка по файлам
|
||||
var groupedByFile = violations
|
||||
.GroupBy(v => v.FileName)
|
||||
.OrderBy(g => g.Key)
|
||||
.ToList();
|
||||
|
||||
foreach (var fileGroup in groupedByFile)
|
||||
{
|
||||
var fileData = new FileReport
|
||||
{
|
||||
Name = fileGroup.Key,
|
||||
};
|
||||
|
||||
|
||||
// Группировка по severity
|
||||
var severityGroups = fileGroup
|
||||
.GroupBy(v => v.Severity)
|
||||
.OrderByDescending(g => g.Key)
|
||||
.ToList();
|
||||
|
||||
foreach (var violation in fileGroup.Select(t => t).OrderBy(v => v.Line).ThenBy(v => v.Column))
|
||||
{
|
||||
int ruleId;
|
||||
List<string> args = new();
|
||||
|
||||
if (violation is RuleTemplateViolation templateRule)
|
||||
{
|
||||
args = templateRule.Params.Select(p => EscapeHtml(p)).ToList();
|
||||
|
||||
if (reportData.Rules.Any(t => t.Value.Name == templateRule.RuleName))
|
||||
{
|
||||
ruleId = reportData.Rules.First(t => t.Value.Name == templateRule.RuleName).Key;
|
||||
}
|
||||
else
|
||||
{
|
||||
ruleId = reportData.Rules.Count + 1;
|
||||
reportData.Rules.Add(ruleId, new Rule
|
||||
{
|
||||
Name = templateRule.RuleName,
|
||||
Template = templateRule.RuleTemplate
|
||||
});
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
ruleId = reportData.Rules.Count + 1;
|
||||
reportData.Rules.Add(ruleId, new Rule
|
||||
{
|
||||
Name = violation.RuleName,
|
||||
Template = violation.Text,
|
||||
});
|
||||
}
|
||||
|
||||
var v = new Violation()
|
||||
{
|
||||
RuleId = ruleId,
|
||||
Args = args,
|
||||
Column = violation.Column,
|
||||
Line = violation.Line,
|
||||
};
|
||||
|
||||
if (violation.Severity == RuleViolationSeverity.Critical)
|
||||
{
|
||||
v.Index = fileData.Violations.Critical.Count + 1;
|
||||
fileData.Violations.Critical.Add(v);
|
||||
}
|
||||
|
||||
else if (violation.Severity == RuleViolationSeverity.Warning)
|
||||
{
|
||||
v.Index = fileData.Violations.Warning.Count + 1;
|
||||
fileData.Violations.Warning.Add(v);
|
||||
}
|
||||
|
||||
else if (violation.Severity == RuleViolationSeverity.Info)
|
||||
{
|
||||
v.Index = fileData.Violations.Info.Count + 1;
|
||||
fileData.Violations.Info.Add(v);
|
||||
}
|
||||
}
|
||||
|
||||
reportData.Files.Add(fileData);
|
||||
}
|
||||
|
||||
// Добавление диаграммы, если есть
|
||||
if (diagram != null)
|
||||
{
|
||||
reportData.Diagram = new Diagram
|
||||
{
|
||||
Content = MermaidRenderer.ToMermaidContent(diagram),
|
||||
HasDiagram = true
|
||||
};
|
||||
}
|
||||
|
||||
return reportData;
|
||||
}
|
||||
|
||||
private void GenerateBeginningHtml(StringBuilder sb)
|
||||
{
|
||||
sb.AppendLine("""
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Отчёт по SQL‑проверкам</title>
|
||||
<style>
|
||||
""");
|
||||
|
||||
sb.AppendLine(LoadResource("HtmlFormatter_v3.css"));
|
||||
sb.AppendLine("</style></head><body><main id=\"main-content\">");
|
||||
}
|
||||
|
||||
private void GenerateEndingHtml(StringBuilder sb, bool hasDiagram, string jsonData)
|
||||
{
|
||||
// Вставка JSON данных
|
||||
sb.AppendLine($"""
|
||||
<script id="report-data" type="application/json">
|
||||
{jsonData}
|
||||
</script>
|
||||
""");
|
||||
|
||||
sb.AppendLine("""
|
||||
<script type="module">
|
||||
""");
|
||||
|
||||
// Загружаем основной JS
|
||||
sb.AppendLine(LoadResource("HtmlFormatter_v3.js"));
|
||||
|
||||
sb.AppendLine("""
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
""");
|
||||
}
|
||||
|
||||
private static string LoadResource(string endsWith)
|
||||
{
|
||||
var assembly = Assembly.GetExecutingAssembly();
|
||||
var name = assembly.GetManifestResourceNames()
|
||||
.First(n => n.EndsWith(endsWith, StringComparison.OrdinalIgnoreCase));
|
||||
using var stream = assembly.GetManifestResourceStream(name);
|
||||
using var reader = new StreamReader(stream);
|
||||
return reader.ReadToEnd();
|
||||
}
|
||||
|
||||
private static string EscapeHtml(string text)
|
||||
{
|
||||
return System.Net.WebUtility.HtmlEncode(text);
|
||||
}
|
||||
|
||||
// Классы для сериализации
|
||||
private class ReportData
|
||||
{
|
||||
[JsonPropertyName("f")] // files
|
||||
public List<FileReport> Files { get; set; } = new();
|
||||
|
||||
[JsonPropertyName("r")] // rules
|
||||
public Dictionary<int, Rule> Rules { get; set; } = new();
|
||||
|
||||
[JsonPropertyName("d")] // diagram
|
||||
public Diagram Diagram { get; set; } = new();
|
||||
}
|
||||
|
||||
private class FileReport
|
||||
{
|
||||
[JsonPropertyName("n")] // name
|
||||
public string Name { get; set; } = string.Empty;
|
||||
|
||||
[JsonPropertyName("v")] // violations
|
||||
public Violations Violations { get; set; } = new();
|
||||
}
|
||||
|
||||
private class Violations
|
||||
{
|
||||
[JsonPropertyName("c")] // critical
|
||||
public List<Violation> Critical { get; set; } = new();
|
||||
|
||||
[JsonPropertyName("w")] // warning
|
||||
public List<Violation> Warning { get; set; } = new();
|
||||
|
||||
[JsonPropertyName("i")] // info
|
||||
public List<Violation> Info { get; set; } = new();
|
||||
}
|
||||
|
||||
private class Violation
|
||||
{
|
||||
[JsonPropertyName("i")] // index
|
||||
public int Index { get; set; }
|
||||
|
||||
[JsonPropertyName("l")] // line
|
||||
public int Line { get; set; }
|
||||
|
||||
[JsonPropertyName("c")] // column
|
||||
public int Column { get; set; }
|
||||
|
||||
[JsonPropertyName("r")] // ruleId
|
||||
public int RuleId { get; set; }
|
||||
|
||||
[JsonPropertyName("a")] // args (optional)
|
||||
public List<string>? Args { get; set; }
|
||||
}
|
||||
|
||||
private class Rule
|
||||
{
|
||||
[JsonPropertyName("n")] // name
|
||||
public string Name { get; set; } = string.Empty;
|
||||
|
||||
[JsonPropertyName("t")] // template
|
||||
public string Template { get; set; } = string.Empty;
|
||||
}
|
||||
|
||||
private class Diagram
|
||||
{
|
||||
[JsonPropertyName("c")] // content
|
||||
public string Content { get; set; } = string.Empty;
|
||||
|
||||
[JsonPropertyName("h")] // hasDiagram
|
||||
public bool HasDiagram { get; set; }
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user