njk-tool 0.0.26 → 0.0.27

package/dist/bundle/app.min.js

@@ -13294,794 +13294,794 @@ var TagType;
     TagType["Table"] = "table";
 })(TagType || (TagType = {}));
 
-const styleText = `<style>/* Components.css */
-/* END-Components.css */
-/* ContentTitle.css */
-.collapsible-container {
---margin: 36px 0 20px;
-width: 100%;
-overflow: hidden;
-margin: var(--margin);
-}
-.collapsible-input {
-display: none;
-}
-.content-title:hover {
-color: #409EFF;
-}
-.collapsible-label {
-display: flex;
-justify-content: space-between;
-align-items: center;
-cursor: pointer;
-}
-.collapsible-label:hover {
-color: #409EFF;
-}
-.collapsible-input:checked~.collapsible-arrow {
-transform: rotate(90deg);
-}
-.collapsible-content {
-max-height: 0;
-overflow: hidden;
-transition: max-height 0.3s cubic-bezier(0, 1, 0, 1) 0.3s ease;
-}
-.collapsible-hover-content {
-max-height: 0;
-overflow: hidden;
-transition: max-height 0.3s cubic-bezier(0, 1, 0, 1) 0.3s ease;
-}
-.collapsible-container:hover>.collapsible-hover-content {
-max-height: 500px;
-}
-.collapsible-input:checked~.collapsible-content {
-max-height: 500px;
-/* 根据内容调整 */
-}
-.title-tag,
-.title-tag-small {
-align-items: center;
-margin-left: 4px;
-border-radius: 4px;
-color: white;
-background-color: #2196F3
-}
-.title-tag-titile-container{
-display: flex;
-align-items: center
-}
-.title-tag-small {
-font-size: 10px;
-padding: 2px 8px;
-}
-.title-tag {
-font-size: 10px;
-padding: 6px 10px;
-}
-/* END-ContentTitle.css */
-/* Divider.css */
-.divider-base {
-border: none;
-height: 1px;
-background: #e0e0e0;
-background-size: 100% 100%;
-margin: 20px 0;
-}
-/* END-Divider.css */
-/* TOC.css */
-/* 基础样式 */
-.article-toc {
-position: fixed;
-top: 50px;
-right: 2rem;
-max-height: calc(100vh - 4rem);
-margin-left: 2rem;
-font-size: 0.95rem;
-}
-/* 隐藏 checkbox */
-.toc-toggle-checkbox {
-position: absolute;
-opacity: 0;
-height: 0;
-width: 0;
-}
-/* 切换按钮样式 */
-.toc-toggle-label {
-display: flex;
-align-items: center;
-background: #f8f9fa;
-padding: 0.3rem 0.6rem;
-border-radius: 4px;
-cursor: pointer;
-margin-bottom: 0.5rem;
-}
-.toc-icon {
-font-size: 1.2rem;
-margin-right: 0.3rem;
-}
-/* 目录导航 */
-.toc-nav {
-padding: 0.5rem;
-background: white;
-border-radius: 6px;
-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-}
-.toc-section {
-margin-bottom: 0.8rem;
-}
-.toc-heading {
-font-size: 1rem;
-margin: 0 0 0.4rem 0;
-padding-bottom: 0.2rem;
-border-bottom: 1px solid #eee;
-}
-.toc-list {
-list-style: none;
-padding-left: 0.4rem;
-margin: 0;
-}
-.toc-item {
-margin: 0.2rem 0;
-}
-.toc-link {
-display: block;
-padding: 0.2rem 0.4rem;
-color: #495057;
-text-decoration: none;
-border-radius: 3px;
-transition: all 0.2s;
-}
-.toc-link:hover {
-background: #f0f0f0;
-color: #007bff;
-}
-/* 层级缩进 */
-.toc-link[data-level="2"] {
-padding-left: 0.8rem;
-}
-.toc-link[data-level="3"] {
-padding-left: 1.6rem;
-}
-/* 激活状态 */
-.toc-link.active {
-background: #e7f5ff;
-color: #0066cc;
-font-weight: 500;
-}
-/* 折叠功能实现 */
-.toc-toggle-checkbox:not(:checked) ~ .toc-nav {
-display: none;
-}
-/* 响应式设计 */
-@media (max-width: 768px) {
-.article-toc {
-margin-left: 1rem;
-font-size: 0.9rem;
-}
-}
-/* END-TOC.css */
-/* Text.css */
-/* END-Text.css */
-/* Title.css */
-.title-base {
-text-align: center;
-font-weight: bolder;
-}
-.njk-title-h1 {
-position: relative;
-padding: 0 0 4.8px;
-}
-.njk-title-h2 {
-position: relative;
-}
-.njk-title-h3 {
-position: relative;
-margin-bottom: 10px;
-}
-/* .njk-title-h2::before,
-.njk-title-h1::before {
-display: none;
-position: absolute;
-content: "# ";
-color: #007bff;
-}
-.njk-title-h1::before {
-left: -26px;
-}
-.njk-title-h2::before {
-left: -18px;
-}
-.njk-title-h1:hover::before,
-.njk-title-h2:hover::before {
-display: inline-block;
-} */
-/* END-Title.css */
-/* Notice.css */
-/* Notice */
-.notice {
-margin: 16px 0;
-padding: 12px 16px;
-margin-bottom: 1rem;
-border-radius: 4px;
-font-size: 14px;
-line-height: 1.5rem;
-}
-.notice-title {
-font-weight: bold;
-margin-bottom: 4px;
-}
-/* 不同类型的通知样式 */
-.notice-info {
-background-color: #e8f4ff;
-border-left: 4px solid #1890ff;
-}
-.notice-warning {
-background-color: #fff7e6;
-border-left: 4px solid #faad14;
-}
-.notice-success {
-background-color: #f6ffed;
-border-left: 4px solid #52c41a;
-}
-.notice-error {
-background-color: #fff2f0;
-border-left: 4px solid #f5222d;
-}
-/* END-Notice.css */
-/* Table.css */
-.my-daframe-default {
-margin: 0 auto 20px;
-border-collapse: collapse;
-border: 2px solid black;
-/* 合并边框 */
-font-family: Arial, Helvetica, sans-serif;
-font-size: 14px;
-color: #444444;
-}
-.my-daframe-default a {
-text-decoration: none !important;
-color: #444444 !important;
-font-family: Arial, Helvetica, sans-serif;
-font-size: 14px;
-}
-.thead-light th {
-white-space: nowrap;
-background-color: #e0e3e8;
-/* background-color: #f5f7fa; */
-color: #333333;
-font-weight: 600;
-padding: 12px 16px;
-text-align: left;
-border-right: 1px solid rgba(19, 18, 18, 0.6);
-border-bottom: 2px solid black;
-font-size: 16px;
-}
-.my-daframe-default tr {
-border-bottom: 1px solid black;
-}
-.my-daframe-default td {
-border-right: 1px solid rgba(19, 18, 18, 0.6);
-/* color: #333333; */
-/* font-weight: 600; */
-/* text-align: left; */
-}
-.default-row {
-border: 1px solid #eee;
-background-color: #fff;
-}
-.default-row:hover {
-background-color: #f0f4f8;
-color: rebeccapurple;
-}
-.default-cell {
-padding: 10px 16px;
-/* border: 1px solid #e1e4e8; */
-font-weight: 400;
-font-size: 14px;
-color: #444;
-background-color: transparent;
-}
-/* END-Table.css */
-/* Block.css */
-/* Block.njk */
-.code-block {
---block-margin: 0px
-margin: var(--block-margin) 0;
-border-radius: 4px;
-overflow: hidden;
-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-.code-block pre {
-margin: 0;
-padding: 1rem;
-background-color: #f5f5f5;
-font-family: 'Courier New', monospace;
-font-size: 14px;
-line-height: 1.5;
-white-space: pre-wrap;
-}
-.code-block code {
-display: block;
-overflow-x: auto;
-}
-/* END-Block.css */
-/* Date.css */
-.center-info-box {
-margin-top: -20px;
-margin-bottom: 20px;
-text-align: center;
-color: black;
-}
-/* END-Date.css */
-/* Tab.css */
-/* Tab 容器 */
-.tab-container {
-max-width: 600px;
-margin: 0 auto;
-}
-/* 隐藏 Radio 按钮 */
-.tab-radio {
-display: none;
-}
-/* Tab 按钮样式 */
-.tab-labels {
-display: flex;
-border-bottom: 1px solid #ccc;
-}
-.tab-label {
-padding: 5px 10px;
-cursor: pointer;
-background-color: #f1f1f1;
-border: 1px solid #ccc;
-border-bottom: none;
-margin-right: 2px;
-border-radius: 5px 5px 0 0;
-}
-.tab-label:hover {
-background-color: #ddd;
-}
-.tab-radio:checked+.tab-label {
-background-color: #fff;
-border-bottom: 1px solid #fff;
-margin-bottom: -1px;
-}
-/* Tab 内容区域 */
-.tab-content {
-display: none;
-padding: 20px;
-border: 1px solid #ccc;
-border-top: none;
-}
-/* END-Tab.css */
-/* Base.css */
-body {
-margin: 0;
-padding: 0;
-font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
-}
-/* PC端样式 */
-a {
-text-decoration: none;
-}
-a:hover {
-color: #409EFF;
-}
-.email-main-container {
-margin: 0;
-min-width: 1000px;
-padding: 0 5rem;
-}
-:root {
---njk-title-color: black;
---njk-title-align: center;
---njk-title-position: relative;
---njk-title-margin: 36px 0 20px;
---njk-table-margin: 0 auto 20px;
-}
-/* END-Base.css */
+const styleText = `<style>/* Components.css */
+/* END-Components.css */
+/* ContentTitle.css */
+.collapsible-container {
+--margin: 36px 0 20px;
+width: 100%;
+overflow: hidden;
+margin: var(--margin);
+}
+.collapsible-input {
+display: none;
+}
+.content-title:hover {
+color: #409EFF;
+}
+.collapsible-label {
+display: flex;
+justify-content: space-between;
+align-items: center;
+cursor: pointer;
+}
+.collapsible-label:hover {
+color: #409EFF;
+}
+.collapsible-input:checked~.collapsible-arrow {
+transform: rotate(90deg);
+}
+.collapsible-content {
+max-height: 0;
+overflow: hidden;
+transition: max-height 0.3s cubic-bezier(0, 1, 0, 1) 0.3s ease;
+}
+.collapsible-hover-content {
+max-height: 0;
+overflow: hidden;
+transition: max-height 0.3s cubic-bezier(0, 1, 0, 1) 0.3s ease;
+}
+.collapsible-container:hover>.collapsible-hover-content {
+max-height: 500px;
+}
+.collapsible-input:checked~.collapsible-content {
+max-height: 500px;
+/* 根据内容调整 */
+}
+.title-tag,
+.title-tag-small {
+align-items: center;
+margin-left: 4px;
+border-radius: 4px;
+color: white;
+background-color: #2196F3
+}
+.title-tag-titile-container{
+display: flex;
+align-items: center
+}
+.title-tag-small {
+font-size: 10px;
+padding: 2px 8px;
+}
+.title-tag {
+font-size: 10px;
+padding: 6px 10px;
+}
+/* END-ContentTitle.css */
+/* Divider.css */
+.divider-base {
+border: none;
+height: 1px;
+background: #e0e0e0;
+background-size: 100% 100%;
+margin: 20px 0;
+}
+/* END-Divider.css */
+/* TOC.css */
+/* 基础样式 */
+.article-toc {
+position: fixed;
+top: 50px;
+right: 2rem;
+max-height: calc(100vh - 4rem);
+margin-left: 2rem;
+font-size: 0.95rem;
+}
+/* 隐藏 checkbox */
+.toc-toggle-checkbox {
+position: absolute;
+opacity: 0;
+height: 0;
+width: 0;
+}
+/* 切换按钮样式 */
+.toc-toggle-label {
+display: flex;
+align-items: center;
+background: #f8f9fa;
+padding: 0.3rem 0.6rem;
+border-radius: 4px;
+cursor: pointer;
+margin-bottom: 0.5rem;
+}
+.toc-icon {
+font-size: 1.2rem;
+margin-right: 0.3rem;
+}
+/* 目录导航 */
+.toc-nav {
+padding: 0.5rem;
+background: white;
+border-radius: 6px;
+box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+.toc-section {
+margin-bottom: 0.8rem;
+}
+.toc-heading {
+font-size: 1rem;
+margin: 0 0 0.4rem 0;
+padding-bottom: 0.2rem;
+border-bottom: 1px solid #eee;
+}
+.toc-list {
+list-style: none;
+padding-left: 0.4rem;
+margin: 0;
+}
+.toc-item {
+margin: 0.2rem 0;
+}
+.toc-link {
+display: block;
+padding: 0.2rem 0.4rem;
+color: #495057;
+text-decoration: none;
+border-radius: 3px;
+transition: all 0.2s;
+}
+.toc-link:hover {
+background: #f0f0f0;
+color: #007bff;
+}
+/* 层级缩进 */
+.toc-link[data-level="2"] {
+padding-left: 0.8rem;
+}
+.toc-link[data-level="3"] {
+padding-left: 1.6rem;
+}
+/* 激活状态 */
+.toc-link.active {
+background: #e7f5ff;
+color: #0066cc;
+font-weight: 500;
+}
+/* 折叠功能实现 */
+.toc-toggle-checkbox:not(:checked) ~ .toc-nav {
+display: none;
+}
+/* 响应式设计 */
+@media (max-width: 768px) {
+.article-toc {
+margin-left: 1rem;
+font-size: 0.9rem;
+}
+}
+/* END-TOC.css */
+/* Text.css */
+/* END-Text.css */
+/* Title.css */
+.title-base {
+text-align: center;
+font-weight: bolder;
+}
+.njk-title-h1 {
+position: relative;
+padding: 0 0 4.8px;
+}
+.njk-title-h2 {
+position: relative;
+}
+.njk-title-h3 {
+position: relative;
+margin-bottom: 10px;
+}
+/* .njk-title-h2::before,
+.njk-title-h1::before {
+display: none;
+position: absolute;
+content: "# ";
+color: #007bff;
+}
+.njk-title-h1::before {
+left: -26px;
+}
+.njk-title-h2::before {
+left: -18px;
+}
+.njk-title-h1:hover::before,
+.njk-title-h2:hover::before {
+display: inline-block;
+} */
+/* END-Title.css */
+/* Notice.css */
+/* Notice */
+.notice {
+margin: 16px 0;
+padding: 12px 16px;
+margin-bottom: 1rem;
+border-radius: 4px;
+font-size: 14px;
+line-height: 1.5rem;
+}
+.notice-title {
+font-weight: bold;
+margin-bottom: 4px;
+}
+/* 不同类型的通知样式 */
+.notice-info {
+background-color: #e8f4ff;
+border-left: 4px solid #1890ff;
+}
+.notice-warning {
+background-color: #fff7e6;
+border-left: 4px solid #faad14;
+}
+.notice-success {
+background-color: #f6ffed;
+border-left: 4px solid #52c41a;
+}
+.notice-error {
+background-color: #fff2f0;
+border-left: 4px solid #f5222d;
+}
+/* END-Notice.css */
+/* Table.css */
+.my-daframe-default {
+margin: 0 auto 20px;
+border-collapse: collapse;
+border: 2px solid black;
+/* 合并边框 */
+font-family: Arial, Helvetica, sans-serif;
+font-size: 14px;
+color: #444444;
+}
+.my-daframe-default a {
+text-decoration: none !important;
+color: #444444 !important;
+font-family: Arial, Helvetica, sans-serif;
+font-size: 14px;
+}
+.thead-light th {
+white-space: nowrap;
+background-color: #e0e3e8;
+/* background-color: #f5f7fa; */
+color: #333333;
+font-weight: 600;
+padding: 12px 16px;
+text-align: left;
+border-right: 1px solid rgba(19, 18, 18, 0.6);
+border-bottom: 2px solid black;
+font-size: 16px;
+}
+.my-daframe-default tr {
+border-bottom: 1px solid black;
+}
+.my-daframe-default td {
+border-right: 1px solid rgba(19, 18, 18, 0.6);
+/* color: #333333; */
+/* font-weight: 600; */
+/* text-align: left; */
+}
+.default-row {
+border: 1px solid #eee;
+background-color: #fff;
+}
+.default-row:hover {
+background-color: #f0f4f8;
+color: rebeccapurple;
+}
+.default-cell {
+padding: 10px 16px;
+/* border: 1px solid #e1e4e8; */
+font-weight: 400;
+font-size: 14px;
+color: #444;
+background-color: transparent;
+}
+/* END-Table.css */
+/* Block.css */
+/* Block.njk */
+.code-block {
+--block-margin: 0px
+margin: var(--block-margin) 0;
+border-radius: 4px;
+overflow: hidden;
+box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+.code-block pre {
+margin: 0;
+padding: 1rem;
+background-color: #f5f5f5;
+font-family: 'Courier New', monospace;
+font-size: 14px;
+line-height: 1.5;
+white-space: pre-wrap;
+}
+.code-block code {
+display: block;
+overflow-x: auto;
+}
+/* END-Block.css */
+/* Date.css */
+.center-info-box {
+margin-top: -20px;
+margin-bottom: 20px;
+text-align: center;
+color: black;
+}
+/* END-Date.css */
+/* Tab.css */
+/* Tab 容器 */
+.tab-container {
+max-width: 600px;
+margin: 0 auto;
+}
+/* 隐藏 Radio 按钮 */
+.tab-radio {
+display: none;
+}
+/* Tab 按钮样式 */
+.tab-labels {
+display: flex;
+border-bottom: 1px solid #ccc;
+}
+.tab-label {
+padding: 5px 10px;
+cursor: pointer;
+background-color: #f1f1f1;
+border: 1px solid #ccc;
+border-bottom: none;
+margin-right: 2px;
+border-radius: 5px 5px 0 0;
+}
+.tab-label:hover {
+background-color: #ddd;
+}
+.tab-radio:checked+.tab-label {
+background-color: #fff;
+border-bottom: 1px solid #fff;
+margin-bottom: -1px;
+}
+/* Tab 内容区域 */
+.tab-content {
+display: none;
+padding: 20px;
+border: 1px solid #ccc;
+border-top: none;
+}
+/* END-Tab.css */
+/* Base.css */
+body {
+margin: 0;
+padding: 0;
+font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
+}
+/* PC端样式 */
+a {
+text-decoration: none;
+}
+a:hover {
+color: #409EFF;
+}
+.email-main-container {
+margin: 0;
+min-width: 1000px;
+padding: 0 5rem;
+}
+:root {
+--njk-title-color: black;
+--njk-title-align: center;
+--njk-title-position: relative;
+--njk-title-margin: 36px 0 20px;
+--njk-table-margin: 0 auto 20px;
+}
+/* END-Base.css */
 </style>`;
 
-const templateText = `<!-- Head.njk -->
-{% macro use_head(ctx) %}
-<head>
-<meta charset="UTF-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<title>{{ ctx.title }}</title>
-{% if ctx.jsFiles%}
-{% for css in ctx.cssFiles %}
-<link rel="stylesheet" href="{{ css }}" />
-{% endfor %}
-{% endif %}
-</head>
-{% if ctx.jsFiles%}
-{% for js in ctx.jsFiles %}
-<script src="{{ js }}"></script>
-{% endfor %}
-{% endif %}
-{% endmacro %}
-{% macro use_comp_start(ctx) %}
-<table style="width: 100%;table-layout: auto">
-<tr>
-<td>
-{% endmacro %}
-{% macro use_comp_end(ctx) %}
-</td>
-</tr>
-</table>
-{% endmacro %}
-<!-- /Head.njk -->
-<!-- TOC.njk -->
-{% macro use_toc(ctx) %}
-<div class="article-toc">
-<input type="checkbox" id="toc-toggle" class="toc-toggle-checkbox">
-<label for="toc-toggle" class="toc-toggle-label">
-<span class="toc-icon">≡</span>
-<span class="toc-text">目录</span>
-</label>
-<nav class="toc-nav">
-{% for section in ctx.data %}
-<section class="toc-section">
-{% if section.link %}
-<h3 class="toc-heading">
-<a href="{{ section.link }}" class="toc-link">{{ section.text }}</a>
-</h3>
-{% else%}
-<h3 class="toc-heading">{{ section.text }}</h3>
-{% endif %}
-<ul class="toc-list">
-{% for item in section.items %}
-<li class="toc-item">
-<a href="{{ item.link }}" class="toc-link" data-level="{{ loop.depth }}">
-{% if loop.depth > 1 %}•{% endif %}
-{{ item.text }}
-</a>
-</li>
-{% endfor %}
-</ul>
-</section>
-{% endfor %}
-</nav>
-</div>
-{% endmacro %}
-<!-- /TOC.njk -->
-<!-- Divider.njk -->
-{% macro use_divider(ctx) %}
-<hr class="divider-base">
-{% endmacro %}
-<!-- /Divider.njk -->
-<!-- Tag.njk -->
-{% macro use_tag(ctx) %}
-{% set tagClass = "smart-tag" %}
-{% set defaultColor = "#4CAF50" %}
-{% set defaultSize = "medium" %}
-{% set finalColor = defaultColor %}
-{% set finalSize = defaultSize %}
-<span class="{{ tagClass }} {{ finalSize }}" style="background-color: {{ finalColor }};">
-{{ ctx.text }}
-</span>
-<style>
-.smart-tag {
-display: inline-flex;
-align-items: center;
-padding: 4px 12px;
-border-radius: 4px;
-font-family: Arial, sans-serif;
-color: white;
-white-space: nowrap;
-transition: all 0.3s ease;
-}
-/* 尺寸控制 */
-.smart-tag.small {
-font-size: 12px;
-padding: 2px 8px;
-}
-.smart-tag.medium {
-font-size: 14px;
-padding: 4px 12px;
-}
-.smart-tag.large {
-font-size: 16px;
-padding: 6px 16px;
-}
-/* 颜色扩展支持 */
-.smart-tag.blue { background-color: #2196F3 !important; }
-.smart-tag.red { background-color: #f44336 !important; }
-.smart-tag.green { background-color: #4CAF50 !important; }
-</style>
-{% endmacro %}
-<!-- /Tag.njk -->
-<!-- Title.njk -->
-{% macro use_table_wrapper(macro) %}
-<table style="width: 100%;table-layout: auto">
-<th>
-<td>{{ macro }}</td>
-</th>
-</table>
-{% endmacro %}
-{% macro title_default(ctx) %}
-<h1 class="title-base">{{ ctx.text }}</h1>
-{% endmacro %}
-{% macro title_h1(ctx) %}
-<h1 class="title-base njk-title-h1" id="{{ ctx.text }}" style="{{ ctx.style }}">
-{{ ctx.text }}
-</h1>
-{% endmacro %}
-{% macro title_h2(ctx) %}
-<h2 class="title-base njk-title-h2" id="{{ ctx.text }}" class="" style="{{ ctx.style }}">
-{{ ctx.text }}
-</h2>
-{% endmacro %}
-{% macro title_h3(ctx) %}
-<h3 class="title-base njk-title-h3" id="{{ ctx.text }}" class="" style="{{ ctx.style }}">
-{{ ctx.text }}
-</h3>
-{% endmacro %}
-{% macro title_table_default(ctx) %}
-{{ use_comp_start() }}
-<h3 class="title-base njk-title-h3" id="{{ ctx.text }}">
-{{ ctx.text }}
-</h3>
-{{ use_comp_end() }}
-{% endmacro %}
-{% macro use_title(ctx) %}
-{% if ctx.type == "h1" %}
-{{ title_h1(ctx) }}
-{% elif ctx.type == "h2" %}
-{{ title_h2(ctx) }}
-{% elif ctx.type == "h3" %}
-{{ title_h3(ctx) }}
-{% else %}
-{{ title_default(ctx) }}
-{% endif %}
-{% endmacro %}
-<!-- /Title.njk -->
-<!-- Notice.njk -->
-{% macro use_notice(ctx) %}
-{% if ctx.type %}
-{% set type = ctx.type %}
-{% else %}
-{% set type = "info" %}
-{% endif %}
-<div class="notice notice-{{ type }}">
-<div class="notice-title">{{ type|capitalize }}:</div>
-<pre class="notice-content">{{ ctx.text }}</pre>
-</div>
-{% endmacro %}
-<!-- /Notice.njk -->
-<!-- Block.njk -->
-{% macro use_block(ctx) %}
-<div class="code-block">
-<pre><code>{{ ctx.text }}</code></pre>
-</div>
-{% endmacro %}
-<!-- /Block.njk -->
-<!-- Date.njk -->
-{% macro use_date(ctx) %}
-<div class="center-info-box" style="text-align: center;"><span style="font-weight:bolder;">Date：</span>{{ ctx.text}}</div>
-{% endmacro %}
-{% macro use_checker(ctx) %}
-<div class="center-info-box" style="text-align: center;"><span style="font-weight:bolder;">Checker：</span>{{ ctx.text}}</div>
-{% endmacro %}
-<!-- /Date.njk -->
-<!-- Table.njk -->
-{% macro td_default(ctx) %}
-{% if ctx.text %}
-{% set text = ctx.text %}
-{% else %}
-{% set text = ctx %}
-{% endif %}
-<td class="default-cell">{{ text | replace("false", "❌")| replace("False", "❌")| replace("True", "✔️") | replace("true", "✔️") }}</td>
-{% endmacro %}
-{% macro table_default(ctx) %}
-{% if ctx.columns %}
-{% set columns = ctx.columns %}
-{% elif ctx.th %}
-{% set columns = ctx.th %}
-{% else %}
-{% set columns = [] %}
-{% endif %}
-{% if ctx.data %}
-{% set data = ctx.data %}
-{% elif ctx.tbody %}
-{% set data = ctx.tbody %}
-{% endif %}
-{% if ctx.title %}
-{% set title = {text:ctx.title} %}
-{{ use_comp_start() }}
-{{ title_h2(title) }}
-{{ use_comp_end() }}
-{% endif %}
-<table class="my-daframe-default">
-<thead class="thead-light">
-<tr>
-{% for column in columns %}
-<th>{{ column }}</th>
-{% endfor %}
-</tr>
-</thead>
-<tbody>
-{% for row in data %}
-<tr class="default-row">
-{% if ctx.data %}
-{% for column in columns %}
-{{ td_default(row[column]) }}
-{% endfor %}
-{% else %}
-{% for value in row %}
-{{ td_default(value) }}
-{% endfor %}
-{% endif %}
-</tr>
-{% endfor %}
-</tbody>
-</table>
-{% endmacro %}
-{% macro use_table(ctx) %}
-{% if ctx.title %}
-{{ table_default(ctx) }}
-{% else %}
-{{ table_default(ctx) }}
-{% endif %}
-{% endmacro %}
-<!-- /Table.njk -->
-<!-- Tab.njk -->
-{% macro useTab(tabs) %}
-<style>
-/* 显示选中的 Tab 内容 */
-{% for tab in tabs %}
-#{{tab.id}}:checked~#{{tab.content_id}} {
-display: block;
-}
-{% endfor %}
-</style>
-<div class="tab-container">
-{% for tab in tabs %}
-<!-- Radio 按钮（隐藏） -->
-<input {% if loop.first %} checked {% endif %} type="radio" name="tabs" id="{{ tab.id }}" class="tab-radio">
-{% endfor %}
-<!-- Tab 按钮（用 label 包裹） -->
-<div class="tab-labels">
-{% for tab in tabs %}
-<label for="{{ tab.id }}" class="tab-label">{{ tab.title }}
-</label>
-{% endfor %}
-</div>
-<!-- Tab 内容 -->
-{% for tab in tabs %}
-<div id="{{ tab.content_id }}" class="tab-content">
-{{ tab.content }}
-</div>
-{% endfor %}
-</div>
-{% endmacro %}
-<!-- /Tab.njk -->
-<!-- ContentTitle.njk -->
-{% macro h3_handler(ctx) %}
-<div class="title-tag-titile-container">
-{% if ctx.h3 %}
-<h3 style="margin: 0;" class="content-title">{{ ctx.title }}</h3>
-{% else %}
-<h2 style="margin: 0;" class="content-title">{{ ctx.title }}</h3>
-{% endif %}
-<span class="title-tag-small">注释</span>
-</div>
-{% endmacro %}
-{% macro content_title_click(ctx) %}
-<div class="collapsible-container">
-<input type="checkbox" id="{{ ctx.title }}" class="collapsible-input" hidden>
-<label for="{{ ctx.title }}" class="collapsible-label">
-{{ h3_handler(ctx) }}
-</label>
-<div class="collapsible-content">
-{{ use_block(ctx) }}
-</div>
-</div>
-{% endmacro %}
-{% macro content_title_hover(ctx) %}
-<div class="collapsible-container">
-<div class="collapsible-label">
-{{ h3_handler(ctx) }}
-</div>
-<div class="collapsible-hover-content">
-{{ use_block(ctx) }}
-</div>
-</div>
-{% endmacro %}
-{% macro content_title_remain(ctx) %}
-<div class="collapsible-container">
-{{ h3_handler(ctx) }}
-<div>
-{{ use_block(ctx) }}
-</div>
-</div>
-{% endmacro %}
-{% macro pick_content_title(ctx) %}
-{% if ctx.hover %}
-{{ content_title_hover(ctx) }}
-{% elif ctx.remain %}
-{{ content_title_remain(ctx) }}
-{% else %}
-{{ content_title_click(ctx) }}
-{% endif %}
-{% endmacro %}
-{% macro use_content_title(ctx) %}
-{% if ctx.type == "h3" or ctx.type == "hover_h3" or ctx.type == "remain_h3" %}
-{% set h3 = true %}
-{% endif %}
-{% if ctx.type == "hover_h3" or ctx.type == "hover" %}
-{% set hover = true %}
-{% endif %}
-{% if ctx.type == "remain_h3" or ctx.type == "remain" %}
-{% set remain = true %}
-{% endif %}
-{% set param = {title:ctx.title, text:ctx.text, h3:h3, hover:hover, remain:remain} %}
-{{ pick_content_title(param) }}
-{% endmacro %}
-<!-- /ContentTitle.njk -->
-<!-- Component.njk -->
-{% macro pick_component(ctx) %}
-{% if ctx.tag == "head" %}
-{{ use_head(ctx) }}
-{% elif ctx.tag == "text" %}
-{{ use_text(ctx) }}
-{% elif ctx.tag == "title" %}
-{{ use_title(ctx) }}
-{% elif ctx.tag == "table" %}
-{{ use_table(ctx) }}
-{% elif ctx.tag == "toc" %}
-{{ use_toc(ctx) }}
-{% elif ctx.tag == "notice" %}
-{{ use_notice(ctx) }}
-{% elif ctx.tag == "block" %}
-{{ use_block(ctx) }}
-{% elif ctx.tag == "date" %}
-{{ use_date(ctx) }}
-{% elif ctx.tag == "checker" %}
-{{ use_checker(ctx) }}
-{% elif ctx.tag == "divider" %}
-{{ use_divider(ctx) }}
-{% elif ctx.tag == "tag" %}
-{{ use_tag(ctx) }}
-{% elif ctx.tag == "title_content" %}
-{{ use_content_title(ctx) }}
-{% else %}
-{{ title_default(ctx) }}
-{% endif %}
-{% endmacro %}
-{% macro use_component(ctx) %}
-{% if ctx.tag %}
-{{ use_comp_start() }}
-{{ pick_component(ctx) }}
-{{ use_comp_end() }}
-{% else %}
-{% for i in ctx %}
-{% if i.tag != 'table' %}
-{{ use_comp_start() }}
-{{ pick_component(i) }}
-{{ use_comp_end() }}
-{% else %}
-{{ pick_component(i) }}
-{% endif %}
-{% endfor %}
-{% endif %}
-{% endmacro %}
-{{ use_component(ctx) }}</tr>
-<!-- /Component.njk -->
-<!-- Text.njk -->
-{% macro text_default(ctx) %}
-{{ ctx.text | replace("false", "❌") | replace("true", "✔️") }}
-{% endmacro %}
-{% macro bool_text(ctx) %}
-{{ ctx.text | replace("false", "❌") | replace("true", "✔️") }}
-{% endmacro %}
-{% macro use_text(ctx) %}
-{% if ctx.type == "h1" %}
-{{ title_h1(ctx) }}
-{% else %}
-{{ text_default(ctx) }}
-{% endif %}
-{% endmacro %}
-<!-- /Text.njk -->
+const templateText = `<!-- Head.njk -->
+{% macro use_head(ctx) %}
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>{{ ctx.title }}</title>
+{% if ctx.jsFiles%}
+{% for css in ctx.cssFiles %}
+<link rel="stylesheet" href="{{ css }}" />
+{% endfor %}
+{% endif %}
+</head>
+{% if ctx.jsFiles%}
+{% for js in ctx.jsFiles %}
+<script src="{{ js }}"></script>
+{% endfor %}
+{% endif %}
+{% endmacro %}
+{% macro use_comp_start(ctx) %}
+<table style="width: 100%;table-layout: auto">
+<tr>
+<td>
+{% endmacro %}
+{% macro use_comp_end(ctx) %}
+</td>
+</tr>
+</table>
+{% endmacro %}
+<!-- /Head.njk -->
+<!-- TOC.njk -->
+{% macro use_toc(ctx) %}
+<div class="article-toc">
+<input type="checkbox" id="toc-toggle" class="toc-toggle-checkbox">
+<label for="toc-toggle" class="toc-toggle-label">
+<span class="toc-icon">≡</span>
+<span class="toc-text">目录</span>
+</label>
+<nav class="toc-nav">
+{% for section in ctx.data %}
+<section class="toc-section">
+{% if section.link %}
+<h3 class="toc-heading">
+<a href="{{ section.link }}" class="toc-link">{{ section.text }}</a>
+</h3>
+{% else%}
+<h3 class="toc-heading">{{ section.text }}</h3>
+{% endif %}
+<ul class="toc-list">
+{% for item in section.items %}
+<li class="toc-item">
+<a href="{{ item.link }}" class="toc-link" data-level="{{ loop.depth }}">
+{% if loop.depth > 1 %}•{% endif %}
+{{ item.text }}
+</a>
+</li>
+{% endfor %}
+</ul>
+</section>
+{% endfor %}
+</nav>
+</div>
+{% endmacro %}
+<!-- /TOC.njk -->
+<!-- Divider.njk -->
+{% macro use_divider(ctx) %}
+<hr class="divider-base">
+{% endmacro %}
+<!-- /Divider.njk -->
+<!-- Tag.njk -->
+{% macro use_tag(ctx) %}
+{% set tagClass = "smart-tag" %}
+{% set defaultColor = "#4CAF50" %}
+{% set defaultSize = "medium" %}
+{% set finalColor = defaultColor %}
+{% set finalSize = defaultSize %}
+<span class="{{ tagClass }} {{ finalSize }}" style="background-color: {{ finalColor }};">
+{{ ctx.text }}
+</span>
+<style>
+.smart-tag {
+display: inline-flex;
+align-items: center;
+padding: 4px 12px;
+border-radius: 4px;
+font-family: Arial, sans-serif;
+color: white;
+white-space: nowrap;
+transition: all 0.3s ease;
+}
+/* 尺寸控制 */
+.smart-tag.small {
+font-size: 12px;
+padding: 2px 8px;
+}
+.smart-tag.medium {
+font-size: 14px;
+padding: 4px 12px;
+}
+.smart-tag.large {
+font-size: 16px;
+padding: 6px 16px;
+}
+/* 颜色扩展支持 */
+.smart-tag.blue { background-color: #2196F3 !important; }
+.smart-tag.red { background-color: #f44336 !important; }
+.smart-tag.green { background-color: #4CAF50 !important; }
+</style>
+{% endmacro %}
+<!-- /Tag.njk -->
+<!-- Title.njk -->
+{% macro use_table_wrapper(macro) %}
+<table style="width: 100%;table-layout: auto">
+<th>
+<td>{{ macro }}</td>
+</th>
+</table>
+{% endmacro %}
+{% macro title_default(ctx) %}
+<h1 class="title-base">{{ ctx.text }}</h1>
+{% endmacro %}
+{% macro title_h1(ctx) %}
+<h1 class="title-base njk-title-h1" id="{{ ctx.text }}" style="{{ ctx.style }}">
+{{ ctx.text }}
+</h1>
+{% endmacro %}
+{% macro title_h2(ctx) %}
+<h2 class="title-base njk-title-h2" id="{{ ctx.text }}" class="" style="{{ ctx.style }}">
+{{ ctx.text }}
+</h2>
+{% endmacro %}
+{% macro title_h3(ctx) %}
+<h3 class="title-base njk-title-h3" id="{{ ctx.text }}" class="" style="{{ ctx.style }}">
+{{ ctx.text }}
+</h3>
+{% endmacro %}
+{% macro title_table_default(ctx) %}
+{{ use_comp_start() }}
+<h3 class="title-base njk-title-h3" id="{{ ctx.text }}">
+{{ ctx.text }}
+</h3>
+{{ use_comp_end() }}
+{% endmacro %}
+{% macro use_title(ctx) %}
+{% if ctx.type == "h1" %}
+{{ title_h1(ctx) }}
+{% elif ctx.type == "h2" %}
+{{ title_h2(ctx) }}
+{% elif ctx.type == "h3" %}
+{{ title_h3(ctx) }}
+{% else %}
+{{ title_default(ctx) }}
+{% endif %}
+{% endmacro %}
+<!-- /Title.njk -->
+<!-- Notice.njk -->
+{% macro use_notice(ctx) %}
+{% if ctx.type %}
+{% set type = ctx.type %}
+{% else %}
+{% set type = "info" %}
+{% endif %}
+<div class="notice notice-{{ type }}">
+<div class="notice-title">{{ type|capitalize }}:</div>
+<pre class="notice-content">{{ ctx.text }}</pre>
+</div>
+{% endmacro %}
+<!-- /Notice.njk -->
+<!-- Block.njk -->
+{% macro use_block(ctx) %}
+<div class="code-block">
+<pre><code>{{ ctx.text }}</code></pre>
+</div>
+{% endmacro %}
+<!-- /Block.njk -->
+<!-- Date.njk -->
+{% macro use_date(ctx) %}
+<div class="center-info-box" style="text-align: center;"><span style="font-weight:bolder;">Date：</span>{{ ctx.text}}</div>
+{% endmacro %}
+{% macro use_checker(ctx) %}
+<div class="center-info-box" style="text-align: center;"><span style="font-weight:bolder;">Checker：</span>{{ ctx.text}}</div>
+{% endmacro %}
+<!-- /Date.njk -->
+<!-- Table.njk -->
+{% macro td_default(ctx) %}
+{% if ctx.text %}
+{% set text = ctx.text %}
+{% else %}
+{% set text = ctx %}
+{% endif %}
+<td class="default-cell">{{ text | replace("false", "❌")| replace("False", "❌")| replace("True", "✔️") | replace("true", "✔️") | replace("Pass", "✔️") | replace("pass", "✔️") }}</td>
+{% endmacro %}
+{% macro table_default(ctx) %}
+{% if ctx.columns %}
+{% set columns = ctx.columns %}
+{% elif ctx.th %}
+{% set columns = ctx.th %}
+{% else %}
+{% set columns = [] %}
+{% endif %}
+{% if ctx.data %}
+{% set data = ctx.data %}
+{% elif ctx.tbody %}
+{% set data = ctx.tbody %}
+{% endif %}
+{% if ctx.title %}
+{% set title = {text:ctx.title} %}
+{{ use_comp_start() }}
+{{ title_h2(title) }}
+{{ use_comp_end() }}
+{% endif %}
+<table class="my-daframe-default">
+<thead class="thead-light">
+<tr>
+{% for column in columns %}
+<th>{{ column }}</th>
+{% endfor %}
+</tr>
+</thead>
+<tbody>
+{% for row in data %}
+<tr class="default-row">
+{% if ctx.data %}
+{% for column in columns %}
+{{ td_default(row[column]) }}
+{% endfor %}
+{% else %}
+{% for value in row %}
+{{ td_default(value) }}
+{% endfor %}
+{% endif %}
+</tr>
+{% endfor %}
+</tbody>
+</table>
+{% endmacro %}
+{% macro use_table(ctx) %}
+{% if ctx.title %}
+{{ table_default(ctx) }}
+{% else %}
+{{ table_default(ctx) }}
+{% endif %}
+{% endmacro %}
+<!-- /Table.njk -->
+<!-- Tab.njk -->
+{% macro useTab(tabs) %}
+<style>
+/* 显示选中的 Tab 内容 */
+{% for tab in tabs %}
+#{{tab.id}}:checked~#{{tab.content_id}} {
+display: block;
+}
+{% endfor %}
+</style>
+<div class="tab-container">
+{% for tab in tabs %}
+<!-- Radio 按钮（隐藏） -->
+<input {% if loop.first %} checked {% endif %} type="radio" name="tabs" id="{{ tab.id }}" class="tab-radio">
+{% endfor %}
+<!-- Tab 按钮（用 label 包裹） -->
+<div class="tab-labels">
+{% for tab in tabs %}
+<label for="{{ tab.id }}" class="tab-label">{{ tab.title }}
+</label>
+{% endfor %}
+</div>
+<!-- Tab 内容 -->
+{% for tab in tabs %}
+<div id="{{ tab.content_id }}" class="tab-content">
+{{ tab.content }}
+</div>
+{% endfor %}
+</div>
+{% endmacro %}
+<!-- /Tab.njk -->
+<!-- ContentTitle.njk -->
+{% macro h3_handler(ctx) %}
+<div class="title-tag-titile-container">
+{% if ctx.h3 %}
+<h3 style="margin: 0;" class="content-title">{{ ctx.title }}</h3>
+{% else %}
+<h2 style="margin: 0;" class="content-title">{{ ctx.title }}</h3>
+{% endif %}
+<span class="title-tag-small">注释</span>
+</div>
+{% endmacro %}
+{% macro content_title_click(ctx) %}
+<div class="collapsible-container">
+<input type="checkbox" id="{{ ctx.title }}" class="collapsible-input" hidden>
+<label for="{{ ctx.title }}" class="collapsible-label">
+{{ h3_handler(ctx) }}
+</label>
+<div class="collapsible-content">
+{{ use_block(ctx) }}
+</div>
+</div>
+{% endmacro %}
+{% macro content_title_hover(ctx) %}
+<div class="collapsible-container">
+<div class="collapsible-label">
+{{ h3_handler(ctx) }}
+</div>
+<div class="collapsible-hover-content">
+{{ use_block(ctx) }}
+</div>
+</div>
+{% endmacro %}
+{% macro content_title_remain(ctx) %}
+<div class="collapsible-container">
+{{ h3_handler(ctx) }}
+<div>
+{{ use_block(ctx) }}
+</div>
+</div>
+{% endmacro %}
+{% macro pick_content_title(ctx) %}
+{% if ctx.hover %}
+{{ content_title_hover(ctx) }}
+{% elif ctx.remain %}
+{{ content_title_remain(ctx) }}
+{% else %}
+{{ content_title_click(ctx) }}
+{% endif %}
+{% endmacro %}
+{% macro use_content_title(ctx) %}
+{% if ctx.type == "h3" or ctx.type == "hover_h3" or ctx.type == "remain_h3" %}
+{% set h3 = true %}
+{% endif %}
+{% if ctx.type == "hover_h3" or ctx.type == "hover" %}
+{% set hover = true %}
+{% endif %}
+{% if ctx.type == "remain_h3" or ctx.type == "remain" %}
+{% set remain = true %}
+{% endif %}
+{% set param = {title:ctx.title, text:ctx.text, h3:h3, hover:hover, remain:remain} %}
+{{ pick_content_title(param) }}
+{% endmacro %}
+<!-- /ContentTitle.njk -->
+<!-- Component.njk -->
+{% macro pick_component(ctx) %}
+{% if ctx.tag == "head" %}
+{{ use_head(ctx) }}
+{% elif ctx.tag == "text" %}
+{{ use_text(ctx) }}
+{% elif ctx.tag == "title" %}
+{{ use_title(ctx) }}
+{% elif ctx.tag == "table" %}
+{{ use_table(ctx) }}
+{% elif ctx.tag == "toc" %}
+{{ use_toc(ctx) }}
+{% elif ctx.tag == "notice" %}
+{{ use_notice(ctx) }}
+{% elif ctx.tag == "block" %}
+{{ use_block(ctx) }}
+{% elif ctx.tag == "date" %}
+{{ use_date(ctx) }}
+{% elif ctx.tag == "checker" %}
+{{ use_checker(ctx) }}
+{% elif ctx.tag == "divider" %}
+{{ use_divider(ctx) }}
+{% elif ctx.tag == "tag" %}
+{{ use_tag(ctx) }}
+{% elif ctx.tag == "title_content" %}
+{{ use_content_title(ctx) }}
+{% else %}
+{{ title_default(ctx) }}
+{% endif %}
+{% endmacro %}
+{% macro use_component(ctx) %}
+{% if ctx.tag %}
+{{ use_comp_start() }}
+{{ pick_component(ctx) }}
+{{ use_comp_end() }}
+{% else %}
+{% for i in ctx %}
+{% if i.tag != 'table' %}
+{{ use_comp_start() }}
+{{ pick_component(i) }}
+{{ use_comp_end() }}
+{% else %}
+{{ pick_component(i) }}
+{% endif %}
+{% endfor %}
+{% endif %}
+{% endmacro %}
+{{ use_component(ctx) }}</tr>
+<!-- /Component.njk -->
+<!-- Text.njk -->
+{% macro text_default(ctx) %}
+{{ ctx.text | replace("false", "❌") | replace("true", "✔️") }}
+{% endmacro %}
+{% macro bool_text(ctx) %}
+{{ ctx.text | replace("false", "❌") | replace("true", "✔️") }}
+{% endmacro %}
+{% macro use_text(ctx) %}
+{% if ctx.type == "h1" %}
+{{ title_h1(ctx) }}
+{% else %}
+{{ text_default(ctx) }}
+{% endif %}
+{% endmacro %}
+<!-- /Text.njk -->
 `;
 
 const externalTemplatesDir = fileURLToPath(new URL("../bundle/src", `${import.meta.url}`));