njk-tool 0.0.11 → 0.0.13

package/dist/bundle/app.min.js

@@ -5,7 +5,6 @@ import require$$0$3 from 'path';
 import require$$2 from 'util';
 import require$$1 from 'stream';
 import require$$2$1 from 'os';
-import { join } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
 function getDefaultExportFromCjs (x) {
@@ -13295,622 +13294,783 @@ var TagType;
     TagType["Table"] = "table";
 })(TagType || (TagType = {}));
 
-const styleText = `
-<style>
-/* Components.css */
-
-/* END-Components.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 {
-  --align: left;
-  --text-color: black;
-  --font-weight: 800;
-  --font-size: 18px;
-  color: var(--text-color);
-  text-align: var(--align);
-  font-weight: var(--font-weight);
-  font-size: var(--font-size);
-  padding: 8px 30px;
-}
-
-h1 {
-  --align: left;
-  --text-color: #606266;
-  --margin: 36px 0 20px;
-  position: relative;
-  font-size: 35.2px;
-  padding: 0 0 4.8px;
-  margin: var(--margin);
-  color: var(--text-color);
-  text-align: var(--align);
-}
-
-h2 {
-  --align: left;
-  --text-color: #606266;
-  --margin: 36px 0 20px;
-  position: relative;
-  font-size: 26.4px;
-  padding: 0 0 4.8px;
-  margin: var(--margin);
-  color: var(--text-color);
-  text-align: var(--align);
-}
-
-h2::before,
-h1::before {
-  display: none;
-  position: absolute;
-  content: "#";
-  color: #007bff;
-}
-
-h1::before {
-  left: -26px;
-}
-
-h2::before {
-  left: -18px;
-}
-
-h1:hover::before,
-h2:hover::before {
-  display: inline-block;
-}
-
-.title-main {
-  --align: left;
-  --text-color: black;
-  --font-weight: 800;
-  --font-size: 28px;
-  color: var(--text-color);
-  text-align: var(--align);
-  font-weight: var(--font-weight);
-  font-size: var(--font-size);
-  padding: 8px 30px;
-  margin-bottom: 20px;
-}
-
-/* END-Title.css */
-
-/* Notice.css */
-/* Notice */
-.notice {
-  margin: 16px 0;
-  padding: 12px 16px;
-  margin-bottom: 1rem;
-  border-radius: 4px;
-  font-size: 14px;
-}
-
-.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 */
-
-/* Block.css */
-/* Block.njk */
-.code-block {
-  margin: 16px 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 */
-
-/* Table.css */
-.default-table {
-  margin: 0;
-  width: 80%;
-  border-collapse: collapse;
-  /* 合并边框 */
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: 14px;
-  color: #444444;
-}
-
-.thead-light th {
-  background-color: #f5f7fa;
-  color: #333333;
-  font-weight: 600;
-  padding: 12px 16px;
-  text-align: left;
-  border: 1px solid #e1e4e8;
-  font-size: 16px;
-}
-
-.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 */
-
-/* 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: 50px;
-}
-/* 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 %}
-<!-- /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 -->
-
-<!-- Title.njk -->
-{% macro title_default(ctx) %}
-    <h1 style="text-align: center">{{ ctx.text }}</h1>
-{% endmacro %}
-{% macro title_h1(ctx) %}
-    <h1 id="{{ ctx.text }}" class="title-color" style="{{ ctx.style }}">
-        {{ ctx.text }}
-    </h1>
-{% endmacro %}
-{% macro title_h2(ctx) %}
-    <h2 id="{{ ctx.text }}" class="title-color" style="{{ ctx.style }}">
-        {{ ctx.text }}
-    </h2>
-{% endmacro %}
-{% macro title_h3(ctx) %}
-    <h3 id="{{ ctx.text }}" class="title-color" style="{{ ctx.style }}">
-        {{ ctx.text }}
-    </h3>
-{% endmacro %}
-{% macro title_table_default(ctx) %}
-    <h3 id="{{ ctx.text }}" class="title_table_default" style="{{ ctx.style }}">
-        {{ ctx.text }}
-    </h3>
-{% 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>Date：{{ ctx.text}}</div>
-{% endmacro %}
-{% macro use_checker(ctx) %}
-<div>Checker：{{ ctx.text}}</div>
-{% endmacro %}
-<!-- /Date.njk -->
-
-<!-- Table.njk -->
-{% 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} %}
-        {{ title_h2(title) }}
-    {% endif %}
-    <table class="default-table">
-        <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 class="default-cell">{{ row[column] | replace("false", "❌") | replace("true", "✔️") }}</td>
-                        {% endfor %}
-                    {% else %}
-                        {% for value in row %}
-                            <td class="default-cell">{{ value | replace("false", "❌") | replace("true", "✔️") }}</td>
-                        {% endfor %}
-                    {% endif %}
-                </tr>
-            {% endfor %}
-        </tbody>
-    </table>
-{% endmacro %}
-{% macro use_table(ctx) %}
-    {% if ctx.type == "h1" %}
-        {{ title_h1(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 -->
-
-<!-- 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) }}
-    {% else %}
-        {{ title_default(ctx) }}
-    {% endif %}
-{% endmacro %}
-{% macro use_component(ctx) %}
-    {% if ctx.tag %}
-        {{ pick_component(ctx) }}
-    {% else %}
-        {% for i in ctx %}
-            {{ pick_component(i) }}
-        {% endfor %}
-    {% endif %}
-{% endmacro %}
-
-{{ use_component(ctx) }}
-<!-- /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 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 {
+--align: left;
+--text-color: black;
+--font-weight: 800;
+--font-size: 18px;
+color: var(--text-color);
+text-align: var(--align);
+font-weight: var(--font-weight);
+font-size: var(--font-size);
+padding: 8px 30px;
+}
+h1 {
+--align: left;
+--text-color: #606266;
+--margin: 36px 0 20px;
+position: relative;
+font-size: 35.2px;
+padding: 0 0 4.8px;
+margin: var(--margin);
+color: var(--text-color);
+text-align: var(--align);
+}
+h2 {
+--align: left;
+--text-color: #606266;
+--margin: 36px 0 20px;
+position: relative;
+font-size: 26.4px;
+padding: 0 0 4.8px;
+margin: var(--margin);
+color: var(--text-color);
+text-align: var(--align);
+}
+h3{
+--align: left;
+--text-color: #606266;
+--margin: 36px 0 20px;
+position: relative;
+padding: 0 0 4.8px;
+margin: var(--margin);
+color: var(--text-color);
+text-align: var(--align);
+}
+h2::before,
+h1::before {
+display: none;
+position: absolute;
+content: "#";
+color: #007bff;
+}
+h1::before {
+left: -26px;
+top: 5px;
+}
+h2::before {
+left: -18px;
+top: 5px;
+}
+h1:hover::before,
+h2:hover::before {
+display: inline-block;
+}
+.title-main {
+--align: left;
+--text-color: black;
+--font-weight: 800;
+--font-size: 28px;
+color: var(--text-color);
+text-align: var(--align);
+font-weight: var(--font-weight);
+font-size: var(--font-size);
+padding: 8px 30px;
+margin-bottom: 20px;
+}
+.title-center {
+text-align: center;
+}
+/* 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 */
+/* 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 */
+/* END-Date.css */
+/* Table.css */
+.default-table {
+margin: 0;
+width: 80%;
+border-collapse: collapse;
+border-radius: 15px;
+/* 合并边框 */
+font-family: Arial, Helvetica, sans-serif;
+font-size: 14px;
+color: #444444;
+}
+.thead-light th {
+background-color: #f5f7fa;
+color: #333333;
+font-weight: 600;
+padding: 12px 16px;
+text-align: left;
+border: 1px solid #e1e4e8;
+font-size: 16px;
+}
+.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 */
+/* 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;
+}
+a {
+text-decoration: none;
+}
+a:hover {
+color: #409EFF;
+}
+.email-main-container {
+margin: 0;
+min-width: 1000px;
+padding: 0 5rem;
+}
+/* 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 %}
+<!-- /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 title_default(ctx) %}
+<h1 style="text-align: center">{{ ctx.text }}</h1>
+{% endmacro %}
+{% macro title_h1(ctx) %}
+<h1 id="{{ ctx.text }}" style="{{ ctx.style }}">
+{{ ctx.text }}
+</h1>
+{% endmacro %}
+{% macro title_h2(ctx) %}
+<h2 id="{{ ctx.text }}" class="" style="{{ ctx.style }}">
+{{ ctx.text }}
+</h2>
+{% endmacro %}
+{% macro title_h3(ctx) %}
+<h3 id="{{ ctx.text }}" class="" style="{{ ctx.style }}">
+{{ ctx.text }}
+</h3>
+{% endmacro %}
+{% macro title_table_default(ctx) %}
+<h3 id="{{ ctx.text }}" class="title_table_default" style="{{ ctx.style }}">
+{{ ctx.text }}
+</h3>
+{% 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"><span style="font-weight:bolder;color:#606266;">Date：</span>{{ ctx.text}}</div>
+{% endmacro %}
+{% macro use_checker(ctx) %}
+<div class="center-info-box"><span style="font-weight:bolder;color:#606266;">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("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} %}
+{{ title_h2(title) }}
+{% endif %}
+<table class="default-table">
+<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.type == "h1" %}
+{{ title_h1(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 %}
+{{ pick_component(ctx) }}
+{% else %}
+{% for i in ctx %}
+{{ pick_component(i) }}
+{% endfor %}
+{% endif %}
+{% endmacro %}
+<body style="margin: 0; padding: 0;">
+<div class="email-main-container" style="margin: 0 auto; padding: 0 3rem; border: solid 1px silver;box-sizing: border-box; max-width: 1000px;">
+{{ use_component(ctx) }}
+</div>
+</body>
+<!-- /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}`));
@@ -13918,8 +14078,6 @@ nunjucks.configure(externalTemplatesDir, {
     autoescape: true,
     noCache: true
 });
-join(externalTemplatesDir, "base.style");
-const TEMPLATES_DIR = join(externalTemplatesDir, "index.html");
 // 样式注入逻辑优化
 const processConfig = (config, cssUrls) => {
     const headConf = {
@@ -13930,33 +14088,8 @@ const processConfig = (config, cssUrls) => {
         ? [headConf, ...config]
         : [headConf, config];
 };
-// 主渲染函数
-// export const njkRender = async (
-//     config: ConfItem | ConfItem[],
-//     options: Options = {}
-// ): Promise<string> => {
-//     const { cssUrl, templateDir = TEMPLATES_DIR } = options;
-//     // 配置验证
-//     validateConfig(config);
-//     // 处理配置
-//     const processedConfig = Array.isArray(config)
-//         ? processConfig(config, cssUrl as string[])
-//         : processConfig([config], cssUrl as string[]);
-//     // 动态配置nunjucks
-//     nunjucks.configure(templateDir, {
-//         autoescape: true,
-//         noCache: process.env.NODE_ENV !== "production" // 生产环境启用缓存
-//     });
-//     // 异步加载样式
-//     const styleContent = await getStyleContent();
-//     return nunjucks.render("index.html", {
-//         ctx: processedConfig,
-//         style: styleContent || ""
-//     });
-// };
-// 同步版本（保留备用）
 const njkRenderSync = (config, options = {}) => {
-    const { cssUrl, templateDir = TEMPLATES_DIR } = options;
+    const { cssUrl } = options;
     const processedConfig = Array.isArray(config)
         ? processConfig(config, cssUrl)
         : processConfig([config], cssUrl);