ph-utils 0.20.0 → 1.0.0

package/lib/browser.js

@@ -0,0 +1,858 @@
+import { t as adjust } from "./color-CUZrwrjD.js";
+//#region src/dom.ts
+function elem(selector, dom) {
+	if (typeof selector === "string") return (dom || document).querySelectorAll(selector);
+	else return [selector];
+}
+/**
+* 根据选择器获取 DOM 元素。
+* @param selector - 选择器字符串或 HTMLElement 实例。
+* @param dom - 可选参数，指定在哪个 DOM 节点下查找元素，默认为 document。
+* @returns 返回匹配到的 HTMLElement 实例。
+*/
+function $(selector, dom) {
+	return elem(selector, dom);
+}
+/**
+* 创建一个 HTML 元素，支持通过标签名或 HTML 字符串创建。
+* @param tag - 元素标签名或 HTML 字符串。
+* @param option - 元素的属性、样式、文本内容等配置。所有不是指定的属性，都会通过 setAttribute 设置
+* @param children - 子节点
+* @returns 创建的 HTML 元素。
+*/
+function create(tag, option = {}, children) {
+	let $el;
+	if (tag.startsWith("<") && tag.endsWith(">")) $el = new DOMParser().parseFromString(tag, "text/html").body.firstElementChild;
+	else $el = document.createElement(tag);
+	if ($el) {
+		if (option) for (const key in option) {
+			const value = option[key];
+			if (value != null) {
+				if (key === "class") $el.className = formatClass(value);
+				else if (key === "style") $el.style.cssText = formatStyle(value);
+				else if (key === "textContent" && value) $el.textContent = value;
+				else if (key === "innerHTML" && value) $el.innerHTML = value;
+				else if (key === "outerHTML" && value) $el.outerHTML = value;
+				else if (typeof value === "boolean" && value === true) $el.setAttribute(key, "");
+				else $el.setAttribute(key, value);
+			}
+		}
+		if (children) {
+			if (children instanceof HTMLElement || children instanceof DocumentFragment) $el.appendChild(children);
+			else {
+				let len = children.length;
+				const fragment = document.createDocumentFragment();
+				for (let i = 0; i < len; i++) {
+					const child = children[i];
+					if (child instanceof HTMLElement) fragment.appendChild(child);
+				}
+				if (len > 0) $el.appendChild(fragment);
+			}
+		}
+	}
+	return $el;
+}
+/** 创建节点 */
+function $$(tag, option = {}, children) {
+	return create(tag, option, children);
+}
+/**
+* 根据选择器获取匹配的第一个 DOM 元素。
+* @param selector - 选择器字符串或直接的 HTMLElement。
+* @param dom - 可选的父级 DOM 元素，默认为当前文档。
+* @returns 返回匹配的第一个 HTMLElement，如果没有找到则返回 null。
+*/
+function $one(selector, dom) {
+	if (typeof selector === "string") return (dom || document).querySelector(selector);
+	return selector;
+}
+/**
+* 为节点添加 class
+* @param {HTMLElement} elem 待添加 class 的节点
+* @param {string} clazz     需要添加的 class
+*/
+function addClass(elem, clazz) {
+	elem.classList.add(clazz);
+}
+/**
+* 节点移除 class
+* @param {HTMLElement} elem 待移除 class 的节点
+* @param {string} clazz     需要移除的 class
+*/
+function removeClass(elem, clazz) {
+	elem.classList.remove(clazz);
+}
+/**
+* 判断节点是否包含某个 class
+* @param elem  待判断 class 的节点
+* @param clazz 待判断的 class
+* @returns
+*/
+function hasClass(elem, clazz) {
+	return elem.classList.contains(clazz);
+}
+/**
+* 切换指定元素的类名。
+* 如果元素已包含该类名，则移除它；否则添加它。
+* @param el - 要操作的 HTML 元素。
+* @param clazz - 要切换的类名。
+*/
+function toggleClass(el, clazz) {
+	if (hasClass(el, clazz)) removeClass(el, clazz);
+	else addClass(el, clazz);
+}
+/**
+* 替换指定元素的 CSS 类
+*
+* 该函数用于根据给定的旧类名或类索引，将其替换为新类名。
+* 如果旧类不存在，则不会进行替换。
+*
+* @param el - 目标 HTML 元素，将对其类进行操作
+* @param oldClazz - 要替换的旧类名或类索引（基于数字时对应 classList 的索引位置）
+* @param newClazz - 新的类名，用于替换旧的类
+* @returns void
+*/
+function replaceClass(el, oldClazz, newClazz) {
+	let old = typeof oldClazz === "number" ? el.classList.item(oldClazz) : oldClazz;
+	if (old) el.classList.replace(old, newClazz);
+}
+/**
+* 为节点添加事件处理
+* @param {HTMLElement} element   添加事件的节点
+* @param {string}      listener  事件名称
+* @param {function}    fn     事件处理函数
+* @param {boolean}     option  是否是只运行一次的处理函数或者配置，其中 eventFlag 为 string，如果配置该项，则表明为委托事件
+*/
+function on(element, listener, fn, option) {
+	const addListener = (el) => {
+		if (typeof option === "object" && option?.eventFlag && el instanceof Element) el.setAttribute(option.eventFlag, "__stop__");
+		el.addEventListener(listener, fn, option);
+	};
+	if (element instanceof Node) addListener(element);
+	else iterate(element, addListener);
+}
+/**
+* 移除指定元素的事件监听器。
+* @param el - 要移除监听器的 HTML 元素。
+* @param listener - 事件名称。
+* @param fn - 要移除的事件监听器函数。
+*/
+function off(el, listener, fn, option) {
+	const removeListener = (target) => {
+		target.removeEventListener(listener, fn, option);
+	};
+	if (el instanceof Node) removeListener(el);
+	else iterate(el, removeListener);
+}
+/**
+* 判断事件是否应该继续传递。
+* 从事件目标开始向上遍历DOM树，检查每个节点上是否存在指定的属性。
+* 如果找到该属性且其值不为'__stop__'，则返回true，表示事件可以继续传递。
+* 否则，返回false，表示事件应该停止传递。
+* 通常用于事件委托时判断是否继续传递事件。
+*
+* @param e - 触发的事件对象
+* @param eventFlag - 需要检查的属性名
+* @param endRoot - 可选，如果传递该参数，则表示停止遍历的节点，如果未传递，则表示遍历到文档根节点为止
+* @returns 包含三个元素的数组：[是否继续传递事件, 属性值, 当前检查的DOM节点]
+*/
+function shouldEventNext(e, eventFlag, endRoot) {
+	let target = e.target;
+	let flag = "";
+	do {
+		if (endRoot && endRoot.isSameNode(target) || target.tagName === "BODY") break;
+		if (target.getAttribute) flag = target.getAttribute(eventFlag) || "";
+		if (flag === "") target = target.parentNode;
+		if (!target) break;
+	} while (flag === "");
+	return [
+		flag !== "__stop__" && flag !== "",
+		flag,
+		target
+	];
+}
+/**
+* 设置或获取节点的 innerHTML 属性
+* @param element
+* @param htmlstr 可选，如果传递该参数，则表示设置；否则表示获取
+* @returns
+*/
+function html(element, htmlstr) {
+	if (htmlstr == null) return element.innerHTML;
+	else {
+		element.innerHTML = htmlstr;
+		return;
+	}
+}
+/**
+* 设置或获取节点的 textContent 属性
+* @param element
+* @param textstr 可选，如果传递该参数，则表示设置；否则表示获取
+* @returns
+*/
+function text(element, textstr) {
+	if (textstr == null) return element.textContent;
+	else {
+		element.textContent = textstr;
+		return;
+	}
+}
+/**
+* 节点列表遍历
+* @param elems
+* @param fn 遍历到节点时的回调，回调第一个参数为遍历到的节点，第2个参数为 index；如果回调函数返回 true，则会终止遍历(break)
+*/
+function iterate(elems, fn) {
+	for (let i = 0, len = elems.length; i < len; i++) if (fn(elems[i], i) === true) break;
+}
+/**
+* 设置或获取节点 data-* 属性
+* @param elem
+* @param key data- 后面跟随的值
+* @param value 如果传递该值表示获取；否则表示设置
+* @returns
+*/
+function attr(elem, key, value) {
+	if (value != null) elem.setAttribute("data-" + key, value);
+	else return elem.getAttribute("data-" + key);
+}
+function getAttr(el, key, defaultValue) {
+	const value = el.getAttribute(key);
+	if (defaultValue == null) return value;
+	const valueType = typeof defaultValue;
+	if (value == null) return defaultValue;
+	if (valueType === "bigint" || valueType === "number") {
+		if (value === "") return defaultValue;
+		return Number(value);
+	}
+	if (valueType === "boolean") {
+		if (value === "" || value === "1" || value === "true" || value === key) return true;
+		return false;
+	}
+	if (valueType === "object") {
+		if (value === "") return defaultValue;
+		return JSON.parse(value);
+	}
+	return value;
+}
+/**
+* 获取指定节点的父节点
+* @param el
+* @returns
+*/
+function parent(el) {
+	return el.parentNode;
+}
+/**
+* 获取隐藏节点的尺寸, 如果 parent 传空, 且 hideNode 为节点，则会通过修改原始样式方式计算
+* @param {string | HTMLElement} hideNode - The node to hide.
+* @param parent - 添加临时节点的父节点, 如果传递 null, 则通过修改原始样式方式计算，默认为: body.
+* @returns The DOMRect of the element.
+*/
+function queryHideNodeSize(hideNode, parent = document.body) {
+	if (parent == null && typeof hideNode !== "string") {
+		const originalDisplay = hideNode.style.display;
+		const originalVisibility = hideNode.style.visibility;
+		const originalPosition = hideNode.style.position;
+		hideNode.style.position = "absolute";
+		hideNode.style.visibility = "hidden";
+		hideNode.style.display = "block";
+		const rect = hideNode.getBoundingClientRect();
+		hideNode.style.display = originalDisplay;
+		hideNode.style.visibility = originalVisibility;
+		hideNode.style.position = originalPosition;
+		return {
+			width: rect.width,
+			height: rect.height
+		};
+	}
+	let $tmp = document.createElement("div");
+	$tmp.style.cssText = "position:fixed;left:-1000px;top:-1000px;opacity:0;";
+	let $tmpInner = document.createElement("div");
+	$tmpInner.style.cssText = "position:relative;";
+	if (typeof hideNode === "string") $tmpInner.innerHTML = hideNode;
+	else $tmpInner.appendChild(hideNode.cloneNode(true));
+	$tmp.appendChild($tmpInner);
+	(parent || document.body).appendChild($tmp);
+	let rect = $tmpInner.children[0].getBoundingClientRect();
+	(parent || document.body).removeChild($tmp);
+	return {
+		width: rect.width,
+		height: rect.height
+	};
+}
+/**
+* 判断元素是否在父元素的可视区域内。
+*
+* @param el 要检查的元素
+* @param parent 元素的父元素，默认为document.body
+* @param direction 检查的方向，默认为"horizontal"
+* @returns 如果元素在父元素的可视区域内，则返回true；否则返回false。
+*/
+function isVisible(el, parent = null, direction = "horizontal") {
+	if (parent == null) parent = el.offsetParent;
+	const containerRect = parent.getBoundingClientRect();
+	const elementRect = el.getBoundingClientRect();
+	let elStart = direction === "horizontal" ? elementRect.left : elementRect.top;
+	let elEnd = direction === "horizontal" ? elementRect.right : elementRect.bottom;
+	let containerStart = direction === "horizontal" ? containerRect.left : containerRect.top;
+	let containerEnd = direction === "horizontal" ? containerRect.right : containerRect.bottom;
+	return elStart >= containerStart && elEnd <= containerEnd;
+}
+/**
+* 判断当前设备是否为移动设备。
+*
+* 本函数通过检查用户代理字符串和屏幕尺寸来判断设备是否为移动设备。
+* 这对于需要根据设备类型进行不同布局或功能调整的应用非常有用。
+*
+* @returns {boolean} 如果设备是移动设备，则返回true；否则返回false。
+*/
+function isMobile() {
+	const isMobile = /Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+	const screenWidth = window.innerWidth;
+	const screenHeight = window.innerHeight;
+	return isMobile || screenWidth <= 800 || screenHeight <= 600;
+}
+/**
+* 格式化类名，支持数组和对象两种形式。
+* - 数组形式：数组中的每个元素代表一个类名，非空元素将被添加到结果字符串中。
+* - 对象形式：对象的键代表类名，值为真（非空、非undefined、非null）时，键将被添加到结果字符串中。
+* @param classObj - 类名对象或数组
+* @returns 格式化后的类名字符串
+*/
+function formatClass(classObj) {
+	let classes = "";
+	if (Array.isArray(classObj)) for (let i = 0, len = classObj.length; i < len; i++) {
+		const item = classObj[i];
+		if (item) classes += `${item} `;
+	}
+	else if (typeof classObj === "string") classes = classObj;
+	else for (const key in classObj) if (classObj[key]) classes += `${key} `;
+	return classes.trim();
+}
+/**
+* 将样式对象格式化为 CSS 样式字符串。
+* @param styleObj - 样式对象，可以是字符串数组或键值对对象。
+* @returns 格式化后的 CSS 样式字符串。
+*/
+function formatStyle(styleObj) {
+	let styleStr = "";
+	if (Array.isArray(styleObj)) for (let i = 0, len = styleObj.length; i < len; i++) {
+		const item = styleObj[i];
+		if (item) styleStr += `${item};`;
+	}
+	else if (typeof styleObj === "string") styleStr = styleObj;
+	else for (const key in styleObj) {
+		const value = styleObj[key];
+		if (value) styleStr += `${key}:${value};`;
+	}
+	return styleStr;
+}
+function toggleCssProperty(el, properties, method = "set") {
+	for (let i = 0, len = properties.length; i < len; i++) {
+		const rec = properties[i];
+		if (method === "set") el.style.setProperty(rec[0], rec[1]);
+		else el.style.removeProperty(rec[0]);
+	}
+}
+/**
+* 执行元素的过渡动画。
+*
+* 如果是名称类似于 Vue.js 的过渡动画，通过添加 `*-active`、`*-from|to` class 类名。
+*
+* @param el - 需要执行过渡动画的 HTML 元素。
+* @param nameOrProperties - 过渡动画的名称或属性数组。可以是字符串表示的动画名称，或者是包含属性名称、初始值或目标值、持续时间。eg. [['opacity', '0.5']] | 'nt-opacity'
+* @param dir - 过渡动画的方向，"leave" 表示离开，"enter" 表示进入。默认值为 "enter"。
+* @param finish - 过渡动画结束时的回调函数。
+*
+* @example <caption>执行 `nt-opacity` 名称动画</caption>
+* // css
+* .nt-opacity-enter-active,
+* .nt-opacity-leave-active {
+*  transition: opacity 0.3s ease;
+* }
+* .nt-opacity-enter-from,
+* .nt-opacity-leave-to {
+*   opacity: 0;
+* }
+* // js
+* transition($el, "nt-opacity", "enter");
+*
+* @example <caption>执行 `style` 属性动画</caption>
+* transition($el, [["opacity", "0", "0.3s"]], "enter");
+*
+* @example <caption>动画结束后移除节点</caption>
+* transition($el, [["opacity", "0", "0.3s"]], "leave", () => {  $el.remove(); });
+*/
+function transition(el, nameOrProperties, dir = "enter", finish) {
+	const p = dir === "enter" ? "from" : "to";
+	let nameClass = "", activeClass = "";
+	/** 动画状态, -1 - 准备, 0 - 进行中, 1 - 完成 */
+	let status = -1;
+	const trans = [];
+	if (typeof nameOrProperties === "string") {
+		nameClass = `${nameOrProperties}-${dir}-${p}`;
+		activeClass = `${nameOrProperties}-${dir}-active`;
+	} else for (let i = 0, len = nameOrProperties.length; i < len; i++) {
+		const rec = nameOrProperties[i];
+		if (rec.length >= 3) trans.push(`${rec[0]} ${rec[2]}`);
+	}
+	status = 0;
+	if (dir === "enter") {
+		if (nameClass) {
+			el.classList.add(nameClass);
+			setTimeout(() => {
+				el.classList.add(activeClass);
+				requestAnimationFrame(() => {
+					el.classList.remove(nameClass);
+				});
+			}, 0);
+		} else {
+			toggleCssProperty(el, nameOrProperties, "set");
+			setTimeout(() => {
+				if (trans.length > 0) el.style.setProperty("transition", trans.join(", "));
+				requestAnimationFrame(() => {
+					toggleCssProperty(el, nameOrProperties, "remove");
+				});
+			}, 0);
+		}
+	} else if (nameClass) {
+		el.classList.add(activeClass);
+		requestAnimationFrame(() => {
+			el.classList.add(nameClass);
+		});
+	} else {
+		if (trans.length > 0) el.style.setProperty("transition", trans.join(", "));
+		requestAnimationFrame(() => {
+			toggleCssProperty(el, nameOrProperties, "set");
+		});
+	}
+	el.addEventListener("transitionend", () => {
+		if (status === 0) {
+			status = 1;
+			if (nameClass) {
+				el.classList.remove(activeClass);
+				requestAnimationFrame(() => {
+					el.classList.remove(nameClass);
+				});
+			} else {
+				if (trans) el.style.removeProperty("transition");
+				requestAnimationFrame(() => {
+					toggleCssProperty(el, nameOrProperties, "remove");
+				});
+			}
+			if (finish) finish();
+		}
+	}, { once: true });
+}
+/**
+* 计算光标位置
+*
+* 根据输入值的变化计算新的光标位置，主要用于输入框内容变化时的光标位置调整
+*
+* @param start - 光标起始位置，通常为: input.selectionStart
+* @param end - 光标结束位置（通常与起始位置相同，用于选择范围），通常为: input.selectionEnd
+* @param oldValue - 变化前的值
+* @param newValue - 变化后的值
+* @returns 新的光标位置对象，包含新的起始和结束位置
+*
+* @example
+* // 删除字符时，光标向前移动
+* calcuteCursorPosition(2, 2, "abc", "ac"); // 返回 { start: 1, end: 1 }
+*
+* @example
+* // 添加字符时，光标向后移动
+* calcuteCursorPosition(2, 2, "ac", "abc"); // 返回 { start: 3, end: 3 }
+*
+* @example
+* // 替换字符时，保持位置
+* calcuteCursorPosition(2, 2, "abc", "axc"); // 返回 { start: 2, end: 2 }
+*/
+function calcuteCursorPosition(start, end, oldValue, newValue) {
+	let newStart = start;
+	let newEnd = end;
+	if (newValue.length < oldValue.length) {
+		newStart = Math.max(0, start - (oldValue.length - newValue.length));
+		newEnd = newStart;
+	} else if (newValue.length > oldValue.length) {
+		newStart = Math.min(newValue.length, start + (newValue.length - oldValue.length));
+		newEnd = newStart;
+	} else {
+		newStart = Math.min(newValue.length, start);
+		newEnd = newStart;
+	}
+	return {
+		start: newStart,
+		end: newEnd
+	};
+}
+//#endregion
+//#region src/copy.ts
+/**
+* 创建一个临时节点缓存待复制数据
+* @param {String} value
+* @return {HTMLElement}
+*/
+function createFakeElement(value) {
+	const fakeElement = document.createElement("textarea");
+	fakeElement.style.position = "fixed";
+	fakeElement.style.left = "-9999px";
+	fakeElement.style.top = "0";
+	fakeElement.style.opacity = "0";
+	fakeElement.style.pointerEvents = "none";
+	fakeElement.style.border = "0";
+	fakeElement.style.padding = "0";
+	fakeElement.style.margin = "0";
+	fakeElement.readOnly = true;
+	fakeElement.setAttribute("aria-hidden", "true");
+	fakeElement.value = value;
+	return fakeElement;
+}
+/** 通过执行 execCommand 来执行复制 */
+function copyFromCommand(text) {
+	const fakeEl = createFakeElement(text);
+	document.body.append(fakeEl);
+	fakeEl.focus();
+	fakeEl.select();
+	fakeEl.setSelectionRange(0, fakeEl.value.length);
+	const res = document.execCommand("copy");
+	fakeEl.remove();
+	return Promise.resolve(res);
+}
+/** 使用 navigator.clipboard 复制 */
+async function copyFromClipboard(text) {
+	const theClipboard = navigator.clipboard;
+	if (theClipboard != null) try {
+		theClipboard.writeText(text);
+		return true;
+	} catch (error) {
+		return false;
+	}
+	return false;
+}
+/** 解析待复制的文本 */
+function parseCopyText(source) {
+	let copyText = null;
+	let sourceEl = null;
+	if (typeof source === "string") {
+		if (source.startsWith("#") || source.startsWith(".")) {
+			sourceEl = document.querySelector(source);
+			if (sourceEl == null) copyText = source;
+		} else copyText = source;
+	}
+	if (source instanceof HTMLElement) sourceEl = source;
+	if (sourceEl != null) {
+		if (sourceEl.hasAttribute("data-copy-text")) copyText = sourceEl.getAttribute("data-copy-text");
+		else {
+			const tagName = sourceEl.tagName;
+			if (tagName === "INPUT" || tagName === "TEXTAREA") copyText = sourceEl.value;
+			else copyText = sourceEl.textContent;
+		}
+	}
+	return copyText;
+}
+/**
+* 复制数据, 可以从多种类型的数据
+*    1. 直接复制文本: await copy("待复制的文本")
+*    2. 复制节点上的 data-copy-text:
+*      <button data-copy-text="这是待复制的文本">复制</button>
+*      await copy(e.target) // or await copy("#a") or await copy(document.querySelector('#a'))
+*    3. 直接复制节点本身数据: await copy('#a')
+* @param {string | HTMLElement} source 复制源, 从中解析待复制的数据
+* @returns {Promise<boolean>} 是否复制成功
+*/
+async function copy(source) {
+	const copyText = parseCopyText(source);
+	if (copyText == null) return false;
+	if (!await copyFromClipboard(copyText)) return copyFromCommand(copyText);
+	return true;
+}
+//#endregion
+//#region src/storage.ts
+function getStorage(storage = "session") {
+	return storage === "session" ? sessionStorage : localStorage;
+}
+/**
+* 存储值到 Storage 中
+* @param key 设置的 key
+* @param value 设置的值
+* @param [option.storage] session 或 local, 默认: session
+* @param [option.expire] 数据有效期, 单位秒, 默认: -1 - 永久存储
+*
+* @example <caption>1. 存储到 SessionStorage</caption>
+* set("key", "value");
+*
+* @example <caption>2. 存储到 LocalStorage</caption>
+* set("key", "value", { storage: "local" });
+*/
+function set(key, value, option) {
+	const opts = {
+		expire: -1,
+		storage: "session",
+		...option
+	};
+	const saveData = JSON.stringify({
+		value,
+		time: Date.now(),
+		expire: opts.expire === -1 ? -1 : Math.floor(Date.now() / 1e3) + opts.expire
+	});
+	getStorage(opts.storage).setItem(key, saveData);
+}
+/**
+* 清空所有的缓存内容
+* @param storage 待清空的缓存对象
+*/
+function clear(storage) {
+	getStorage(storage).clear();
+}
+/**
+* 删除存储到 Storage 中的数据
+* @param key
+* @param storage
+*/
+function remove(key, storage) {
+	getStorage(storage).removeItem(key);
+}
+/**
+* 从 Storage 中取出数据
+* @param key 保存时的 key
+* @param defaultValue 没有数据时的默认值
+* @param [option.delete] 是否在取出后，删除数据，默认：false - 取出后删除数据
+* @param [option.storage] 使用的 Storage ，可以是 localStorage、sessionStorage, 默认: localStorage、sessionStorage
+* @returns Storage 中 key 对应的数据
+*/
+function get(key, defaultValue, option) {
+	const opts = option || { delete: false };
+	const storage = getStorage(opts.storage);
+	let data = storage.getItem(key);
+	if (data == null) return defaultValue || null;
+	data = JSON.parse(data);
+	let d = data.value;
+	if (data.expire !== -1) {
+		if (Math.floor(Date.now() / 1e3) > data.expire) {
+			d = null;
+			storage.removeItem(key);
+		}
+	}
+	if (opts.delete) storage.removeItem(key);
+	return d || defaultValue;
+}
+//#endregion
+//#region src/theme.ts
+/** 获取当前系统的主题 */
+function getSystemTheme() {
+	if (window.matchMedia("(prefers-color-scheme: dark)").matches) return "dark";
+	else if (window.matchMedia("(prefers-color-scheme: light)").matches) return "light";
+	return "auto";
+}
+/**
+* 初始化主题, 让网页能够适应系统主题, 同时根据缓存的主题切换主题
+* @returns 当前应用的主题
+*/
+async function initTheme() {
+	let $themeStyle = document.getElementById("theme-style");
+	if ($themeStyle == null) {
+		$themeStyle = document.createElement("style");
+		$themeStyle.id = "theme-style";
+		$themeStyle.innerHTML = ":root{color-scheme:light dark;}html.light{color-scheme: light;}html.dark {color-scheme: dark;}";
+		document.head.appendChild($themeStyle);
+	}
+	return toggleTheme(localStorage.getItem("web-theme-appearance"));
+}
+/**
+* 切换主题, 通常用于预览
+* @param theme 切换的主题
+* @param transition 是否使用过渡动画, 注意浏览器必须支持 document.startViewTransition, 默认: true
+* @returns 切换后的主题
+*/
+async function toggleTheme(theme, transition = true) {
+	return new Promise((resolve) => {
+		const classList = document.documentElement.classList;
+		if (theme == null) theme = getSystemTheme();
+		function updateThemeClass() {
+			if (theme === "light") {
+				classList.add("light");
+				classList.remove("dark");
+			} else if (theme === "dark") {
+				classList.add("dark");
+				classList.remove("light");
+			} else classList.remove("light", "dark");
+		}
+		if (transition && document.startViewTransition) document.startViewTransition(() => {
+			updateThemeClass();
+			resolve(theme);
+		});
+		else {
+			updateThemeClass();
+			resolve(theme);
+		}
+	});
+}
+/** 获取当前主题 */
+function getTheme() {
+	let theme = document.documentElement.className.match(/light|dark/);
+	if (theme != null) theme = theme[0];
+	if (theme == null) theme = localStorage.getItem("web-theme-appearance");
+	if (theme == null) theme = getSystemTheme();
+	return theme;
+}
+/**
+* 应用主题
+* @param theme 待应用的主题
+* @param cache 是否缓存应用的主题, 让应用下一次启动的时候, 可以应用主题, 默认: true
+* @param transition 是否使用过渡动画, 注意浏览器必须支持 document.startViewTransition, 默认: true
+* @returns 应用的主题
+*/
+async function applyTheme(theme, cache = true, transition = true) {
+	if (cache === true) localStorage.setItem("web-theme-appearance", theme == null ? "auto" : theme);
+	return toggleTheme(theme, transition);
+}
+/** 获取当前主题色 */
+function getColorTheme(defaultValue) {
+	const root = document.documentElement;
+	const match = root.className.match(/color-([0-9a-fA-F]{6})/);
+	if (match == null) {
+		let color = getComputedStyle(root).getPropertyValue("--l-primary-color");
+		if (color === "") color = localStorage.getItem("web-theme-color");
+		return color ? color : defaultValue;
+	}
+	return `#${match[1]}`;
+}
+/**
+* 初始化主题色, 让网页能够适应系统主题色, 同时根据缓存的主题色切换主题色
+* @returns 当前应用的主题色
+*/
+function initColorTheme() {
+	const color = localStorage.getItem("web-theme-color");
+	if (color != null) return toggleColorTheme(color);
+	return color;
+}
+/**
+* 切换主题色, 通常用于预览
+* @param color 待切换的主题色
+* @returns 切换后的主题色
+*/
+async function toggleColorTheme(color) {
+	const vars = [`--l-primary-color: ${color};`, `--l-primary-color-dark1: ${adjust(color, 1, false)};`];
+	for (let i = 1; i <= 5; i++) vars.push(`--l-primary-color-light${i}: ${adjust(color, i)};`);
+	let $style = document.getElementById("color-theme-style");
+	if ($style == null) {
+		$style = document.createElement("style");
+		$style.id = "color-theme-style";
+		document.head.appendChild($style);
+	}
+	$style.innerHTML = `:root{${vars.join("")}}`;
+	return color;
+}
+/**
+* 应用主题色
+* @param color 主题色
+* @param cache 是否缓存主题色, 让应用下一次启动的时候, 可以应用主题色, 默认: true
+* @returns 切换后的主题色
+*/
+function applyColorTheme(color, cache = true) {
+	if (cache === true) localStorage.setItem("web-theme-color", color);
+	return toggleColorTheme(color);
+}
+//#endregion
+//#region src/web.ts
+/**
+* 解析 Form 表单中的 input 元素的数据为 JSON 格式，key: input-name；value: input-value
+* @param form {object} Form 节点对象
+*/
+const formJson = function(form) {
+	const value = {};
+	const elements = form.elements;
+	for (let i = 0; i < elements.length; i++) {
+		const item = elements[i];
+		if (!item.name) continue;
+		if (item instanceof HTMLInputElement || item instanceof HTMLTextAreaElement) {
+			const val = item.value.trim();
+			if (!val) continue;
+			switch (item.dataset.type) {
+				case "number":
+					value[item.name] = Number(val);
+					break;
+				case "boolean":
+					value[item.name] = val === "true" || val === "1";
+					break;
+				default: value[item.name] = val;
+			}
+		} else if (item instanceof HTMLSelectElement) value[item.name] = item.options[item.selectedIndex]?.value ?? "";
+	}
+	return value;
+};
+/**
+* 获取 url query 参数 (get 请求的参数)
+* @param search 如果是 React 应用就需要传递 useLocation().search
+* @returns
+*/
+function query(search) {
+	const searchStr = search ?? location.search;
+	const searchParams = new URLSearchParams(searchStr);
+	const result = {};
+	for (const key of new Set(searchParams.keys())) {
+		const values = searchParams.getAll(key);
+		result[key] = values.length > 1 ? values : values[0];
+	}
+	return result;
+}
+/**
+* 函数节流 - 每隔单位时间，只执行一次
+* @param cb    待节流的函数
+* @param wait  间隔时间
+* @returns
+*/
+function throttle(fn, wait = 500) {
+	let last = 0;
+	let timer = null;
+	const throttled = function(...args) {
+		const now = Date.now();
+		const remaining = wait - (now - last);
+		if (remaining <= 0 || remaining > wait) {
+			if (timer) {
+				clearTimeout(timer);
+				timer = null;
+			}
+			last = now;
+			fn.apply(this, args);
+		} else if (!timer) timer = setTimeout(() => {
+			last = Date.now();
+			timer = null;
+			fn.apply(this, args);
+		}, remaining);
+	};
+	throttled.cancel = function() {
+		if (timer) {
+			clearTimeout(timer);
+			timer = null;
+		}
+		last = 0;
+	};
+	return throttled;
+}
+/**
+* 函数防抖 - 当重复触发某一个行为（事件时），只执行最后一次触发
+* @param fn        防抖函数
+* @param interval  间隔时间段
+* @returns
+*/
+function debounce(fn, interval = 500) {
+	let timer = null;
+	const debounced = function(...args) {
+		if (timer) clearTimeout(timer);
+		timer = setTimeout(() => {
+			fn.apply(this, args);
+			timer = null;
+		}, interval);
+	};
+	debounced.cancel = function() {
+		if (timer) {
+			clearTimeout(timer);
+			timer = null;
+		}
+	};
+	return debounced;
+}
+//#endregion
+export { $, $$, $one, addClass, applyColorTheme, applyTheme, attr, calcuteCursorPosition, clear, copy, create, debounce, elem, formJson, formatClass, formatStyle, get, getAttr, getColorTheme, getSystemTheme, getTheme, hasClass, html, initColorTheme, initTheme, isMobile, isVisible, iterate, off, on, parent, query, queryHideNodeSize, remove, removeClass, replaceClass, set, shouldEventNext, text, throttle, toggleClass, toggleColorTheme, toggleTheme, transition };