Widget:TextArticle

       行距

           正常
           宽松
           二倍

       字号

           小字
           中字
           大字

       字体

           默认
           楷体

   margin-top: 10px;
   display: flex;
   gap: 20px;

}

.control-group {

   position: relative;
   display: inline-block;
   padding: 5px 15px;
   border: 2px solid #9ebac6;
   background: #1b3742;
   border-radius: 10px;
   font-size: 14px;
   font-weight: bold;
   text-align: center;
   cursor: pointer;
   transition: background 0.3s ease-in-out;

}

/* 桌面端：鼠标悬停展开 */ @media (hover: hover) {

   .control-group:hover .options {
       display: block;
   }

}

/* 选项菜单 */ .options {

   display: none;
   position: absolute;
   top: 110%;
   left: 50%;
   transform: translateX(-50%);
   background: #1b3742;
   border: 2px solid #9ebac6;
   border-radius: 10px;
   padding: 5px;
   min-width: 60px;
   box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
   z-index: 100;

}

/* 按钮样式 */ .text-btn {

   display: block;
   padding: 10px 5px;
   border: none;
   background: transparent;
   cursor: pointer;
   font-size: 14px;
   text-align: center;
   width: 100%;

}

.text-btn:hover {

   color: #21fd99;

}

/* 触屏版优化：点击展开菜单 */ .control-group.active .options {

   display: block;

} /* 正文内容 */ .text-article {

   white-space: pre-wrap;
   word-wrap: break-word;
   /*加 transition 让行间距、字号、字体变化时平滑 */
   transition: font-size 0.3s ease-in-out, 
               line-height 0.3s ease-in-out, 
               font-family 0.3s ease-in-out;

}

</style> <script> var nsize = 20; // 默认字号（px） var lineHeight = 1.8; // 默认行间距

// 预设字号映射 var fontSizeMap = {

   small: "14px",
   medium: "20px",
   large: "24px"

};

// 预设行间距映射 var lineHeightMap = {

   small: "1.5",
   medium: "1.8",
   large: "2.0"

};

// 本地存储键名 var STORAGE_KEYS = {

   fontSize: "textControls.fontSize",
   lineHeight: "textControls.lineHeight",
   font: "textControls.font"

};

// 设置字号 function setFontSize(size) {

   var article = document.getElementById("text-article");
   if (article && fontSizeMap[size]) {
       var value = fontSizeMap[size];

       article.style.setProperty("font-size", value, "important");

       // 强制内部子元素也跟随
       article.querySelectorAll("p, li, dl").forEach(function (el) {
           el.style.setProperty("font-size", value, "important");
       });

       // 保存到本地缓存
       try {
           localStorage.setItem(STORAGE_KEYS.fontSize, size);
       } catch (e) {
           // 忽略本地存储错误
       }
   }

}

// 设置行间距 function setLineHeight(line) {

   var article = document.getElementById("text-article");
   if (article && lineHeightMap[line]) {
       article.style.lineHeight = lineHeightMap[line];

       // 保存到本地缓存
       try {
           localStorage.setItem(STORAGE_KEYS.lineHeight, line);
       } catch (e) {
           // 忽略本地存储错误
       }
   }

}

// 设置字体 function setFont(font) {

   var article = document.getElementById("text-article");
   if (article) {
       if (font === "default") {
           article.style.fontFamily = "sans-serif"; // 网页默认字体，如黑体
       } else if (font === "kai") {
           article.style.fontFamily = '"Times New Roman", "KaiTi", serif'; // 楷体 + Times New Roman
       }

       // 保存到本地缓存
       try {
           localStorage.setItem(STORAGE_KEYS.font, font);
       } catch (e) {
           // 忽略本地存储错误
       }
   }

}

// 应用“默认值”（在没有缓存的情况下） function applyDefaultStyles(article) {

   // 默认字号
   var defaultSize = nsize + "px";
   article.style.setProperty("font-size", defaultSize, "important");
   article.querySelectorAll("p, li, dl").forEach(function (el) {
       el.style.setProperty("font-size", defaultSize, "important");
   });

   // 默认行间距
   article.style.lineHeight = lineHeight;

   // 默认字体
   article.style.fontFamily = "sans-serif";

}

// 初始化：从本地缓存恢复，或应用默认 function initTextControls() {

   var article = document.getElementById("text-article");
   if (!article) return;

   var hasStored = false;
   var storedFontSize = null;
   var storedLineHeight = null;
   var storedFont = null;

   try {
       storedFontSize = localStorage.getItem(STORAGE_KEYS.fontSize);
       storedLineHeight = localStorage.getItem(STORAGE_KEYS.lineHeight);
       storedFont = localStorage.getItem(STORAGE_KEYS.font);
   } catch (e) {
       // 如果 localStorage 不可用，直接走默认
   }

   if (storedFontSize && fontSizeMap[storedFontSize]) {
       setFontSize(storedFontSize);
       hasStored = true;
   }

   if (storedLineHeight && lineHeightMap[storedLineHeight]) {
       setLineHeight(storedLineHeight);
       hasStored = true;
   }

   if (storedFont) {
       setFont(storedFont);
       hasStored = true;
   }

   // 没有任何缓存时，应用默认字号/行距/字体
   if (!hasStored) {
       applyDefaultStyles(article);
   }

}

// 切换菜单展开/收起 function toggleMenu(element) {

   // 关闭所有其他菜单
   document.querySelectorAll(".control-group").forEach(function (group) {
       if (group !== element) {
           group.classList.remove("active");
       }
   });

   // 切换当前菜单
   element.classList.toggle("active");

}

// 关闭菜单（防止点击选项后立即关闭） function closeMenu(event) {

   event.stopPropagation(); // 阻止冒泡，防止点击按钮时菜单立即关闭
   setTimeout(function () {
       document.querySelectorAll(".control-group").forEach(function (group) {
           group.classList.remove("active");
       });
   }, 150); // 延迟关闭，确保选项点击后生效

}

// 点击其他地方关闭菜单 document.addEventListener("click", function (event) {

   if (!event.target.closest(".control-group")) {
       document.querySelectorAll(".control-group").forEach(function (group) {
           group.classList.remove("active");
       });
   }

});

// 页面加载完成后初始化（兼容脚本插入时机） if (document.readyState === "loading") {

   document.addEventListener("DOMContentLoaded", initTextControls);

} else {

   initTextControls();

}

</script>