@pubinfo-pr/devtools 0.189.2 → 0.203.2

package/dist/client/assets/component-Qe9twpoz.js

@@ -0,0 +1,468 @@
+import { B as withCtx, D as onBeforeUnmount, G as isRef, M as renderSlot, N as resolveComponent, Y as ref, b as defineComponent, f as computed, g as createElementBlock, h as createCommentVNode, it as toDisplayString, j as renderList, k as openBlock, m as createBlock, nt as normalizeClass, p as createBaseVNode, tt as unref, u as Fragment, v as createTextVNode, y as createVNode } from "./index-ByOJyids.js";
+import { a as Icon_default, i as SectionBlock_default, r as Button_default, t as Navbar_default } from "./Navbar-DCdslOKs.js";
+import { l as useClipboard, n as componentUsageFetch, o as Badge_default } from "./fetch-CwAFBmMG.js";
+import { n as FilepathItem_default, t as SelectTabs_default } from "./SelectTabs-Chnu7x16.js";
+var NUMBER_CHAR_RE = /\d/;
+var STR_SPLITTERS = [
+	"-",
+	"_",
+	"/",
+	"."
+];
+function isUppercase(char = "") {
+	if (NUMBER_CHAR_RE.test(char)) return;
+	return char !== char.toLowerCase();
+}
+function splitByCase(str, separators) {
+	const splitters = separators ?? STR_SPLITTERS;
+	const parts = [];
+	if (!str || typeof str !== "string") return parts;
+	let buff = "";
+	let previousUpper;
+	let previousSplitter;
+	for (const char of str) {
+		const isSplitter = splitters.includes(char);
+		if (isSplitter === true) {
+			parts.push(buff);
+			buff = "";
+			previousUpper = void 0;
+			continue;
+		}
+		const isUpper = isUppercase(char);
+		if (previousSplitter === false) {
+			if (previousUpper === false && isUpper === true) {
+				parts.push(buff);
+				buff = char;
+				previousUpper = isUpper;
+				continue;
+			}
+			if (previousUpper === true && isUpper === false && buff.length > 1) {
+				const lastChar = buff.at(-1);
+				parts.push(buff.slice(0, Math.max(0, buff.length - 1)));
+				buff = lastChar + char;
+				previousUpper = isUpper;
+				continue;
+			}
+		}
+		buff += char;
+		previousUpper = isUpper;
+		previousSplitter = isSplitter;
+	}
+	parts.push(buff);
+	return parts;
+}
+function upperFirst(str) {
+	return str ? str[0].toUpperCase() + str.slice(1) : "";
+}
+function pascalCase(str, opts) {
+	return str ? (Array.isArray(str) ? str : splitByCase(str)).map((p) => upperFirst(opts?.normalize ? p.toLowerCase() : p)).join("") : "";
+}
+var _hoisted_1$3 = { class: "text-sm font-mono" };
+var ComponentName_default = /* @__PURE__ */ defineComponent({
+	__name: "ComponentName",
+	props: { component: {} },
+	setup(__props) {
+		const props = __props;
+		const name = computed(() => props.component.pascalName || pascalCase(props.component.name || props.component.kebabName || ""));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("code", _hoisted_1$3, [
+				_cache[0] || (_cache[0] = createBaseVNode("span", { class: "mr1 op20" }, "<", -1)),
+				createTextVNode(toDisplayString(name.value), 1),
+				_cache[1] || (_cache[1] = createBaseVNode("span", { class: "ml1 op20" }, "/>", -1))
+			]);
+		};
+	}
+});
+var _hoisted_1$2 = { class: "flex flex-col gap-1 items-start of-hidden" };
+var _hoisted_2$2 = { class: "flex gap-2 items-center px-3" };
+var _hoisted_3$1 = {
+	key: 0,
+	class: "border-t n-border-base max-h-60 w-full of-auto px3 py3"
+};
+var _hoisted_4$1 = { "text-sm": "" };
+var _hoisted_5$1 = { "text-primary": "" };
+var _hoisted_6$1 = {
+	key: 0,
+	flex: "~ col gap-2",
+	"items-start": "",
+	pt3: "",
+	"text-sm": "",
+	op75: ""
+};
+var ComponentDetails_default = /* @__PURE__ */ defineComponent({
+	__name: "ComponentDetails",
+	props: {
+		component: {},
+		dependents: {},
+		locations: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const referenceEntries = computed(() => {
+			const rawLocations = props.locations ?? props.component.locations ?? [];
+			if (rawLocations.length) return rawLocations.map((location) => ({
+				filepath: location.file,
+				line: location.line,
+				column: location.column
+			}));
+			return (props.dependents ?? props.component.dependents ?? []).map((filepath) => ({ filepath }));
+		});
+		const sortedReferenceEntries = computed(() => {
+			return [...referenceEntries.value].sort((a, b) => {
+				if (a.filepath === b.filepath) return (a.line ?? 0) - (b.line ?? 0);
+				return a.filepath.localeCompare(b.filepath);
+			});
+		});
+		const referencesCount = computed(() => sortedReferenceEntries.value.length);
+		const showDependentsPanel = computed(() => referencesCount.value > 0);
+		const componentNameForCopy = computed(() => {
+			if (props.component.pascalName) return props.component.pascalName;
+			if (props.component.name) return props.component.name;
+			if (props.component.kebabName) return pascalCase(props.component.kebabName);
+			return "";
+		});
+		const { copy: copyToClipboard } = useClipboard({ legacy: true });
+		const copyState = ref("idle");
+		let copyResetHandle;
+		const canCopyName = computed(() => Boolean(componentNameForCopy.value));
+		const nameCopyTooltip = computed(() => {
+			if (!canCopyName.value) return "Component name unavailable";
+			if (copyState.value === "copied") return "Copied component name";
+			if (copyState.value === "error") return "Failed to copy name";
+			return "Copy component name";
+		});
+		const nameCopyLabel = computed(() => {
+			if (copyState.value === "copied") return "Copied";
+			if (copyState.value === "error") return "Retry";
+			return "Copy";
+		});
+		const nameCopyIcon = computed(() => {
+			if (copyState.value === "copied") return "i-carbon-checkmark";
+			if (copyState.value === "error") return "i-carbon-warning-alt";
+			return "i-carbon-copy";
+		});
+		function resetCopyState() {
+			if (copyResetHandle) clearTimeout(copyResetHandle);
+			copyResetHandle = setTimeout(() => {
+				copyState.value = "idle";
+				copyResetHandle = void 0;
+			}, 2e3);
+		}
+		async function copyComponentName() {
+			if (!componentNameForCopy.value || !canCopyName.value) return;
+			try {
+				await copyToClipboard(componentNameForCopy.value);
+				copyState.value = "copied";
+			} catch (error) {
+				console.error("Failed to copy component name:", error);
+				copyState.value = "error";
+			} finally {
+				resetCopyState();
+			}
+		}
+		onBeforeUnmount(() => {
+			if (copyResetHandle) clearTimeout(copyResetHandle);
+		});
+		return (_ctx, _cache) => {
+			const _component_ComponentName = ComponentName_default;
+			const _component_Badge = Badge_default;
+			const _component_FilepathItem = FilepathItem_default;
+			return openBlock(), createElementBlock("div", _hoisted_1$2, [
+				createBaseVNode("div", _hoisted_2$2, [
+					createVNode(_component_ComponentName, { component: __props.component }, null, 8, ["component"]),
+					__props.component.meta?.docs && typeof __props.component.meta.docs === "string" ? (openBlock(), createBlock(unref(Button_default), {
+						key: 0,
+						title: "Open docs",
+						class: "flex-none n-xs",
+						to: __props.component.meta.docs,
+						target: "_blank",
+						icon: "i-carbon-catalog"
+					}, {
+						default: withCtx(() => [..._cache[0] || (_cache[0] = [createTextVNode(" Docs ", -1)])]),
+						_: 1
+					}, 8, ["to"])) : createCommentVNode("", true),
+					createVNode(unref(Button_default), {
+						class: "flex-none n-xs",
+						disabled: !canCopyName.value,
+						icon: nameCopyIcon.value,
+						title: nameCopyTooltip.value,
+						onClick: copyComponentName
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(nameCopyLabel.value), 1)]),
+						_: 1
+					}, 8, [
+						"disabled",
+						"icon",
+						"title"
+					]),
+					__props.component.meta?.category ? (openBlock(), createBlock(_component_Badge, {
+						key: 1,
+						class: "n-blue",
+						title: `Category: ${__props.component.meta.category}`
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(__props.component.meta.category), 1)]),
+						_: 1
+					}, 8, ["title"])) : createCommentVNode("", true),
+					__props.component.global ? (openBlock(), createBlock(_component_Badge, {
+						key: 2,
+						class: "n-green",
+						title: "Registered at runtime as a global component"
+					}, {
+						default: withCtx(() => [..._cache[1] || (_cache[1] = [createTextVNode(" runtime ", -1)])]),
+						_: 1
+					})) : createCommentVNode("", true)
+				]),
+				showDependentsPanel.value ? (openBlock(), createElementBlock("div", _hoisted_3$1, [createBaseVNode("div", _hoisted_4$1, [createBaseVNode("strong", _hoisted_5$1, toDisplayString(referencesCount.value), 1), _cache[2] || (_cache[2] = createBaseVNode("span", { op50: "" }, " references", -1))]), referencesCount.value ? (openBlock(), createElementBlock("div", _hoisted_6$1, [(openBlock(true), createElementBlock(Fragment, null, renderList(sortedReferenceEntries.value, (item) => {
+					return openBlock(), createBlock(_component_FilepathItem, {
+						key: `${item.filepath}-${item.line ?? 0}-${item.column ?? 0}`,
+						filepath: item.filepath,
+						line: item.line,
+						column: item.column
+					}, null, 8, [
+						"filepath",
+						"line",
+						"column"
+					]);
+				}), 128))])) : createCommentVNode("", true)])) : createCommentVNode("", true),
+				renderSlot(_ctx.$slots, "default")
+			]);
+		};
+	}
+});
+var _hoisted_1$1 = { class: "group flex gap-2 w-full items-center rounded px-2 py-1 hoverLbg-active" };
+var _hoisted_2$1 = {
+	key: 0,
+	class: "ml--1 text-primary"
+};
+var ComponentItem_default = /* @__PURE__ */ defineComponent({
+	__name: "ComponentItem",
+	props: {
+		component: {},
+		dependents: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const dependentsList = computed(() => props.dependents ?? props.component.dependents ?? []);
+		const referenceLocations = computed(() => props.component.locations ?? []);
+		const referenceCount = computed(() => referenceLocations.value.length || dependentsList.value.length);
+		return (_ctx, _cache) => {
+			const _component_ComponentName = ComponentName_default;
+			const _component_ComponentDetails = ComponentDetails_default;
+			const _component_VDropdown = resolveComponent("VDropdown");
+			const _component_Badge = Badge_default;
+			return openBlock(), createElementBlock("div", _hoisted_1$1, [
+				createVNode(_component_VDropdown, null, {
+					popper: withCtx(() => [createVNode(_component_ComponentDetails, {
+						component: __props.component,
+						dependents: dependentsList.value,
+						locations: referenceLocations.value,
+						class: "w-100 py3"
+					}, null, 8, [
+						"component",
+						"dependents",
+						"locations"
+					])]),
+					default: withCtx(() => [createBaseVNode("button", { class: normalizeClass(["hover:text-primary", referenceCount.value === 0 ? "op50" : ""]) }, [createVNode(_component_ComponentName, { component: __props.component }, null, 8, ["component"])], 2)]),
+					_: 1
+				}),
+				referenceCount.value ? (openBlock(), createElementBlock("sup", _hoisted_2$1, " x" + toDisplayString(referenceCount.value), 1)) : createCommentVNode("", true),
+				__props.component.meta?.category ? (openBlock(), createBlock(_component_Badge, {
+					key: 1,
+					class: "n-blue",
+					title: `Category: ${__props.component.meta.category}`
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(__props.component.meta.category), 1)]),
+					_: 1
+				}, 8, ["title"])) : createCommentVNode("", true),
+				__props.component.global ? (openBlock(), createBlock(_component_Badge, {
+					key: 2,
+					class: "n-green",
+					title: "Registered at runtime as a global component"
+				}, {
+					default: withCtx(() => [..._cache[0] || (_cache[0] = [createTextVNode(" runtime ", -1)])]),
+					_: 1
+				})) : createCommentVNode("", true),
+				renderSlot(_ctx.$slots, "default")
+			]);
+		};
+	}
+});
+var _hoisted_1 = { class: "relative h-full flex flex-col of-hidden" };
+var _hoisted_2 = { class: "flex items-center gap-2" };
+var _hoisted_3 = { class: "flex-1 of-auto" };
+var _hoisted_4 = { class: "flex flex-col gap-2 px4 py3" };
+var _hoisted_5 = {
+	key: 0,
+	class: "text-sm text-red op75"
+};
+var _hoisted_6 = {
+	key: 1,
+	class: "text-sm op50 px2 py1"
+};
+var component_default = /* @__PURE__ */ defineComponent({
+	name: "ComponentPage",
+	__name: "component",
+	setup(__props) {
+		const search = ref("");
+		const filterMode = ref("all");
+		const { execute, data, error, isFetching } = componentUsageFetch;
+		if (!data.value) execute();
+		computed(() => data.value?.stats ?? {
+			total: 0,
+			used: 0,
+			unused: 0
+		});
+		const components = computed(() => data.value?.components ?? []);
+		const normalizedSearch = computed(() => search.value.trim().toLowerCase());
+		const packageStats = computed(() => {
+			const map = /* @__PURE__ */ new Map();
+			components.value.forEach((component) => {
+				if (!map.has(component.package)) map.set(component.package, {
+					total: 0,
+					used: 0,
+					unused: 0
+				});
+				const stats = map.get(component.package);
+				stats.total += 1;
+				if (component.count > 0) stats.used += 1;
+				else stats.unused += 1;
+			});
+			return map;
+		});
+		function matchesFilter(component, mode) {
+			if (mode === "using") return component.count > 0;
+			if (mode === "not-used") return component.count === 0;
+			return true;
+		}
+		function matchesQuery(component, query) {
+			if (!query) return true;
+			return [
+				component.name,
+				component.kebabName,
+				component.package,
+				...component.dependents
+			].join(" ").toLowerCase().includes(query);
+		}
+		const filteredComponents = computed(() => {
+			const query = normalizedSearch.value;
+			const mode = filterMode.value;
+			return [...components.value].sort((a, b) => {
+				if (a.count === b.count) return a.name.localeCompare(b.name);
+				return b.count - a.count;
+			}).filter((component) => matchesFilter(component, mode) && matchesQuery(component, query));
+		});
+		computed(() => filteredComponents.value.length);
+		const FALLBACK_GROUP_ORDER = Number.MAX_SAFE_INTEGER;
+		function resolvePackageGroupMeta(pkg) {
+			return {
+				label: pkg,
+				icon: "i-carbon-cube",
+				order: FALLBACK_GROUP_ORDER
+			};
+		}
+		const groupedComponents = computed(() => {
+			const grouped = /* @__PURE__ */ new Map();
+			filteredComponents.value.forEach((component) => {
+				if (!grouped.has(component.package)) grouped.set(component.package, []);
+				grouped.get(component.package).push(component);
+			});
+			return Array.from(grouped.entries()).map(([pkg, items]) => {
+				const meta = resolvePackageGroupMeta(pkg);
+				const stats = packageStats.value.get(pkg) ?? {
+					total: items.length,
+					used: items.filter((item) => item.count > 0).length,
+					unused: items.filter((item) => item.count === 0).length
+				};
+				return {
+					id: pkg,
+					label: meta.label,
+					icon: meta.icon,
+					order: meta.order ?? Number.MAX_SAFE_INTEGER,
+					items,
+					stats
+				};
+			}).sort((a, b) => {
+				if (a.order === b.order) return a.label.localeCompare(b.label);
+				return a.order - b.order;
+			});
+		});
+		const emptyStateMessage = computed(() => {
+			if (isFetching.value && !components.value.length) return "正在扫描组件使用情况...";
+			if (!components.value.length) return "还没有可追踪的组件。";
+			return "没有符合条件的组件。";
+		});
+		const requestError = computed(() => {
+			const raw = error.value;
+			if (!raw) return "";
+			if (typeof raw === "string") return raw;
+			if (raw instanceof Error) return raw.message;
+			try {
+				return JSON.stringify(raw);
+			} catch {
+				return "获取组件使用数据失败";
+			}
+		});
+		return (_ctx, _cache) => {
+			const _component_Icon = Icon_default;
+			const _component_SelectTabs = SelectTabs_default;
+			const _component_Navbar = Navbar_default;
+			const _component_ComponentItem = ComponentItem_default;
+			const _component_SectionBlock = SectionBlock_default;
+			return openBlock(), createElementBlock("div", _hoisted_1, [createVNode(_component_Navbar, {
+				search: unref(search),
+				"onUpdate:search": _cache[1] || (_cache[1] = ($event) => isRef(search) ? search.value = $event : null),
+				class: "pb3 flex-none"
+			}, {
+				default: withCtx(() => [createBaseVNode("div", _hoisted_2, [createVNode(_component_Icon, {
+					icon: "i-carbon-filter",
+					class: "op50"
+				}), createVNode(_component_SelectTabs, {
+					modelValue: unref(filterMode),
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(filterMode) ? filterMode.value = $event : null),
+					class: "n-primary n-sm",
+					options: [
+						{
+							label: "All",
+							value: "all"
+						},
+						{
+							label: "Using",
+							value: "using"
+						},
+						{
+							label: "Not used",
+							value: "not-used"
+						}
+					]
+				}, null, 8, ["modelValue"])])]),
+				_: 1
+			}, 8, ["search"]), createBaseVNode("div", _hoisted_3, [createBaseVNode("div", _hoisted_4, [unref(requestError) ? (openBlock(), createElementBlock("div", _hoisted_5, toDisplayString(unref(requestError)), 1)) : !unref(filteredComponents).length ? (openBlock(), createElementBlock("div", _hoisted_6, toDisplayString(unref(emptyStateMessage)), 1)) : (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(unref(groupedComponents), (group) => {
+				return openBlock(), createBlock(_component_SectionBlock, {
+					key: group.id,
+					text: group.label,
+					description: `Total components: ${group.stats.total}`,
+					icon: group.icon
+				}, {
+					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(group.items, (componentEntry) => {
+						return openBlock(), createBlock(_component_ComponentItem, {
+							key: `${componentEntry.package}-${componentEntry.name}`,
+							component: componentEntry,
+							dependencies: componentEntry.dependencies,
+							dependents: componentEntry.dependents
+						}, null, 8, [
+							"component",
+							"dependencies",
+							"dependents"
+						]);
+					}), 128))]),
+					_: 2
+				}, 1032, [
+					"text",
+					"description",
+					"icon"
+				]);
+			}), 128))])])]);
+		};
+	}
+});
+export { component_default as default };