@leelaa/vitepress-plugin-extended
Version:
VitePress 增强插件集合，提供多种高级功能和组件
622 lines (617 loc) • 31.6 kB
JavaScript
import { defineComponent, useCssVars, ref, watch, nextTick, onMounted, onUnmounted, createElementBlock, openBlock, normalizeClass, createCommentVNode, createElementVNode, Fragment, renderList, createTextVNode, toDisplayString, withDirectives, vShow } from 'vue';
import mermaid from 'mermaid';
import { d as downloadFunc } from './utils-B3XjiJac.js';
import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
const _hoisted_1 = { class: "toolbar" };
const _hoisted_2 = { class: "toolbar-left" };
const _hoisted_3 = ["onClick"];
const _hoisted_4 = {
key: 0,
class: "icon",
viewBox: "0 0 24 24",
fill: "currentColor"
};
const _hoisted_5 = {
key: 1,
class: "icon",
viewBox: "0 0 24 24",
fill: "currentColor"
};
const _hoisted_6 = { class: "toolbar-right" };
const _hoisted_7 = { class: "control-group" };
const _hoisted_8 = ["title"];
const _hoisted_9 = {
key: 0,
class: "icon",
viewBox: "0 0 24 24",
fill: "currentColor"
};
const _hoisted_10 = {
key: 1,
class: "icon",
viewBox: "0 0 24 24",
fill: "currentColor"
};
const _hoisted_11 = {
key: 1,
class: "control-group"
};
const _hoisted_12 = ["title"];
const _hoisted_13 = {
key: 0,
class: "icon",
viewBox: "0 0 24 24",
fill: "currentColor"
};
const _hoisted_14 = {
key: 1,
class: "icon",
viewBox: "0 0 24 24",
fill: "currentColor"
};
const _hoisted_15 = { class: "content-area" };
const _hoisted_16 = { class: "code-panel" };
const _hoisted_17 = { class: "code-viewer" };
const _hoisted_18 = { class: "code-content" };
const _hoisted_19 = { class: "preview-panel" };
const _hoisted_20 = {
key: 0,
class: "loading-overlay"
};
const _hoisted_21 = {
key: 1,
class: "error-state"
};
const _hoisted_22 = { class: "error-message" };
const _hoisted_23 = {
key: 2,
class: "empty-state"
};
var script = /* @__PURE__ */ defineComponent({
__name: "index",
props: {
content: { type: String, required: false, default: "" },
height: { type: String, required: false, default: "600px" },
theme: { type: String, required: false, default: "default" }
},
setup(__props) {
useCssVars((_ctx) => ({
"01b08bd0-height": _ctx.height
}));
const props = __props;
const componentId = `mermaid-${Math.random().toString(36).substr(2, 9)}`;
const activeTab = ref("preview");
const mermaidContent = ref(props.content);
const mermaidContainer = ref();
const isLoading = ref(false);
const isFullscreen = ref(false);
const renderError = ref("");
const isDragging = ref(false);
const dragStart = ref({ x: 0, y: 0 });
const scale = ref(1);
const translateX = ref(0);
const translateY = ref(0);
const tabs = [
{ key: "preview", label: "\u9884\u89C8" },
{ key: "code", label: "\u4EE3\u7801" }
];
const renderMermaid = async () => {
if (!mermaidContainer.value || !mermaidContent.value.trim()) return;
isLoading.value = true;
renderError.value = "";
try {
const container = mermaidContainer.value;
container.innerHTML = "";
const diagramId = `${componentId}-${Date.now()}`;
const { svg } = await mermaid.render(diagramId, mermaidContent.value);
container.innerHTML = svg;
const svgElement = container.querySelector("svg");
if (svgElement) {
svgElement.style.maxWidth = "none";
svgElement.style.maxHeight = "none";
svgElement.style.width = "auto";
svgElement.style.height = "auto";
setTimeout(() => {
centerDiagram();
}, 50);
}
} catch (error) {
console.error("Mermaid rendering error:", error);
renderError.value = error instanceof Error ? error.message : "\u672A\u77E5\u9519\u8BEF";
} finally {
isLoading.value = false;
}
};
const centerDiagram = () => {
if (!mermaidContainer.value) return;
const container = mermaidContainer.value;
const svg = container.querySelector("svg");
if (!svg) return;
svg.style.transform = "";
const containerRect = container.getBoundingClientRect();
const svgRect = svg.getBoundingClientRect();
const centerX = (containerRect.width - svgRect.width) / 2;
const centerY = (containerRect.height - svgRect.height) / 2;
scale.value = 1;
translateX.value = Math.max(0, centerX);
translateY.value = Math.max(0, centerY);
applyTransform();
};
const applyTransform = () => {
if (!mermaidContainer.value) return;
const svg = mermaidContainer.value.querySelector("svg");
if (!svg) return;
svg.style.transform = `translate(${translateX.value}px, ${translateY.value}px) scale(${scale.value})`;
svg.style.transformOrigin = "0 0";
};
const zoomIn = () => {
scale.value = Math.min(scale.value * 1.2, 3);
applyTransform();
};
const zoomOut = () => {
scale.value = Math.max(scale.value * 0.8, 0.1);
applyTransform();
};
const resetView = () => {
centerDiagram();
};
const downloadSVG = () => {
if (!mermaidContainer.value) return;
const svg = mermaidContainer.value.querySelector("svg");
if (!svg) return;
const serializer = new XMLSerializer();
const svgString = serializer.serializeToString(svg);
const blob = new Blob([svgString], { type: "image/svg+xml" });
downloadFunc(URL.createObjectURL(blob), "mermaid-diagram.svg");
};
const downloadMermaid = () => {
const blob = new Blob([mermaidContent.value], { type: "text/plain" });
downloadFunc(URL.createObjectURL(blob), "mermaid-diagram.md");
};
const copyCode = async () => {
try {
await navigator.clipboard.writeText(mermaidContent.value);
} catch (err) {
console.error("\u590D\u5236\u5931\u8D25:", err);
}
};
const retryRender = () => {
renderError.value = "";
renderMermaid();
};
const toggleFullscreen = () => {
isFullscreen.value = !isFullscreen.value;
nextTick(() => {
setTimeout(() => {
if (activeTab.value === "preview") {
renderMermaid();
}
}, 100);
});
};
const exitFullscreen = () => {
isFullscreen.value = false;
nextTick(() => {
setTimeout(() => {
if (activeTab.value === "preview") {
renderMermaid();
}
}, 100);
});
};
const handleMouseDown = (e) => {
if (e.button === 0) {
isDragging.value = true;
dragStart.value = { x: e.clientX, y: e.clientY };
e.preventDefault();
}
};
const handleMouseMove = (e) => {
if (isDragging.value) {
const deltaX = e.clientX - dragStart.value.x;
const deltaY = e.clientY - dragStart.value.y;
translateX.value += deltaX;
translateY.value += deltaY;
applyTransform();
dragStart.value = { x: e.clientX, y: e.clientY };
}
};
const handleMouseUp = () => {
isDragging.value = false;
};
const resizeHandler = () => {
if (activeTab.value === "preview") {
nextTick(() => {
setTimeout(() => {
renderMermaid();
}, 100);
});
}
};
watch(activeTab, (newTab) => {
if (newTab === "preview") {
nextTick(() => {
renderMermaid();
});
}
});
onMounted(() => {
renderMermaid();
window.addEventListener("resize", resizeHandler);
});
onUnmounted(() => {
window.removeEventListener("resize", resizeHandler);
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock(
"div",
{
class: normalizeClass(["mermaid-container", { fullscreen: isFullscreen.value }])
},
[
createCommentVNode(" Header Toolbar "),
createElementVNode("div", _hoisted_1, [
createElementVNode("div", _hoisted_2, [
(openBlock(), createElementBlock(
Fragment,
null,
renderList(tabs, (tab) => {
return createElementVNode("button", {
key: tab.key,
onClick: ($event) => activeTab.value = tab.key,
class: normalizeClass(["tab-button", { active: activeTab.value === tab.key }])
}, [
tab.key === "preview" ? (openBlock(), createElementBlock("svg", _hoisted_4, [..._cache[0] || (_cache[0] = [
createElementVNode(
"path",
{ d: "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" },
null,
-1
/* HOISTED */
)
])])) : createCommentVNode("v-if", true),
tab.key === "code" ? (openBlock(), createElementBlock("svg", _hoisted_5, [..._cache[1] || (_cache[1] = [
createElementVNode(
"path",
{ d: "M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0L19.2 12l-4.6-4.6L16 6l6 6-6 6-1.4-1.4z" },
null,
-1
/* HOISTED */
)
])])) : createCommentVNode("v-if", true),
createTextVNode(
" " + toDisplayString(tab.label),
1
/* TEXT */
)
], 10, _hoisted_3);
}),
64
/* STABLE_FRAGMENT */
))
]),
createElementVNode("div", _hoisted_6, [
createCommentVNode(" \u9884\u89C8\u6A21\u5F0F\u7684\u5DE5\u5177\u680F "),
activeTab.value === "preview" ? (openBlock(), createElementBlock(
Fragment,
{ key: 0 },
[
createElementVNode("div", { class: "control-group" }, [
createElementVNode("button", {
onClick: zoomIn,
class: "control-button",
title: "\u653E\u5927"
}, _cache[2] || (_cache[2] = [
createElementVNode(
"svg",
{
class: "icon",
viewBox: "0 0 24 24",
fill: "currentColor"
},
[
createElementVNode("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }),
createElementVNode("path", { d: "M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z" })
],
-1
/* HOISTED */
)
])),
createElementVNode("button", {
onClick: zoomOut,
class: "control-button",
title: "\u7F29\u5C0F"
}, _cache[3] || (_cache[3] = [
createElementVNode(
"svg",
{
class: "icon",
viewBox: "0 0 24 24",
fill: "currentColor"
},
[
createElementVNode("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }),
createElementVNode("path", { d: "M7 9h5v1H7z" })
],
-1
/* HOISTED */
)
])),
createElementVNode("button", {
onClick: resetView,
class: "control-button",
title: "\u91CD\u7F6E\u89C6\u56FE"
}, _cache[4] || (_cache[4] = [
createElementVNode(
"svg",
{
class: "icon",
viewBox: "0 0 24 24",
fill: "currentColor"
},
[
createElementVNode("path", { d: "M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" })
],
-1
/* HOISTED */
)
]))
]),
createElementVNode("div", _hoisted_7, [
createElementVNode("button", {
onClick: downloadSVG,
class: "control-button",
title: "\u4E0B\u8F7DSVG"
}, _cache[5] || (_cache[5] = [
createElementVNode(
"svg",
{
class: "icon",
viewBox: "0 0 24 24",
fill: "currentColor"
},
[
createElementVNode("path", { d: "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" })
],
-1
/* HOISTED */
)
])),
createElementVNode("button", {
onClick: toggleFullscreen,
class: "control-button",
title: isFullscreen.value ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F"
}, [
!isFullscreen.value ? (openBlock(), createElementBlock("svg", _hoisted_9, _cache[6] || (_cache[6] = [
createElementVNode(
"path",
{ d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" },
null,
-1
/* HOISTED */
)
]))) : (openBlock(), createElementBlock("svg", _hoisted_10, _cache[7] || (_cache[7] = [
createElementVNode(
"path",
{ d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" },
null,
-1
/* HOISTED */
)
])))
], 8, _hoisted_8)
])
],
64
/* STABLE_FRAGMENT */
)) : createCommentVNode("v-if", true),
createCommentVNode(" \u4EE3\u7801\u6A21\u5F0F\u7684\u5DE5\u5177\u680F "),
activeTab.value === "code" ? (openBlock(), createElementBlock("div", _hoisted_11, [
createElementVNode("button", {
onClick: copyCode,
class: "control-button",
title: "\u590D\u5236\u4EE3\u7801"
}, _cache[8] || (_cache[8] = [
createElementVNode(
"svg",
{
class: "icon",
viewBox: "0 0 24 24",
fill: "currentColor"
},
[
createElementVNode("path", { d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" })
],
-1
/* HOISTED */
)
])),
createElementVNode("button", {
onClick: downloadMermaid,
class: "control-button",
title: "\u4E0B\u8F7DMermaid"
}, _cache[9] || (_cache[9] = [
createElementVNode(
"svg",
{
class: "icon",
viewBox: "0 0 24 24",
fill: "currentColor"
},
[
createElementVNode("path", { d: "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" })
],
-1
/* HOISTED */
)
])),
createElementVNode("button", {
onClick: toggleFullscreen,
class: "control-button",
title: isFullscreen.value ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F"
}, [
!isFullscreen.value ? (openBlock(), createElementBlock("svg", _hoisted_13, _cache[10] || (_cache[10] = [
createElementVNode(
"path",
{ d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" },
null,
-1
/* HOISTED */
)
]))) : (openBlock(), createElementBlock("svg", _hoisted_14, _cache[11] || (_cache[11] = [
createElementVNode(
"path",
{ d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" },
null,
-1
/* HOISTED */
)
])))
], 8, _hoisted_12)
])) : createCommentVNode("v-if", true)
])
]),
createCommentVNode(" Content Area "),
createElementVNode("div", _hoisted_15, [
createCommentVNode(" Code Viewer "),
withDirectives(createElementVNode(
"div",
_hoisted_16,
[
createElementVNode("div", _hoisted_17, [
createElementVNode(
"pre",
_hoisted_18,
toDisplayString(mermaidContent.value),
1
/* TEXT */
)
])
],
512
/* NEED_PATCH */
), [
[vShow, activeTab.value === "code"]
]),
createCommentVNode(" Mermaid Preview "),
withDirectives(createElementVNode(
"div",
_hoisted_19,
[
createElementVNode(
"div",
{
ref_key: "mermaidContainer",
ref: mermaidContainer,
class: "mermaid-diagram-container",
onMousedown: handleMouseDown,
onMousemove: handleMouseMove,
onMouseup: handleMouseUp,
onMouseleave: handleMouseUp
},
null,
544
/* NEED_HYDRATION, NEED_PATCH */
),
createCommentVNode(" Loading State "),
isLoading.value ? (openBlock(), createElementBlock("div", _hoisted_20, _cache[12] || (_cache[12] = [
createElementVNode(
"div",
{ class: "loading-spinner" },
null,
-1
/* HOISTED */
),
createElementVNode(
"p",
null,
"\u6B63\u5728\u6E32\u67D3\u56FE\u8868...",
-1
/* HOISTED */
)
]))) : createCommentVNode("v-if", true),
createCommentVNode(" Error State "),
renderError.value ? (openBlock(), createElementBlock("div", _hoisted_21, [
_cache[13] || (_cache[13] = createElementVNode(
"div",
{ class: "error-icon" },
"\u26A0\uFE0F",
-1
/* HOISTED */
)),
_cache[14] || (_cache[14] = createElementVNode(
"h3",
null,
"\u56FE\u8868\u6E32\u67D3\u5931\u8D25",
-1
/* HOISTED */
)),
createElementVNode(
"p",
_hoisted_22,
toDisplayString(renderError.value),
1
/* TEXT */
),
createElementVNode("button", {
onClick: retryRender,
class: "retry-button"
}, "\u91CD\u8BD5")
])) : createCommentVNode("v-if", true),
createCommentVNode(" Empty State "),
!mermaidContent.value.trim() && !isLoading.value && !renderError.value ? (openBlock(), createElementBlock("div", _hoisted_23, _cache[15] || (_cache[15] = [
createElementVNode(
"div",
{ class: "empty-icon" },
"\u{1F4CA}",
-1
/* HOISTED */
),
createElementVNode(
"h3",
null,
"\u5F00\u59CB\u521B\u5EFA\u4F60\u7684\u56FE\u8868",
-1
/* HOISTED */
),
createElementVNode(
"p",
null,
"\u5207\u6362\u5230\u4EE3\u7801\u6A21\u5F0F\u67E5\u770BMermaid\u6E90\u7801",
-1
/* HOISTED */
)
]))) : createCommentVNode("v-if", true)
],
512
/* NEED_PATCH */
), [
[vShow, activeTab.value === "preview"]
])
]),
createCommentVNode(" Fullscreen Overlay (when in fullscreen mode) "),
isFullscreen.value ? (openBlock(), createElementBlock("div", {
key: 0,
class: "fullscreen-overlay",
onClick: exitFullscreen
}, _cache[16] || (_cache[16] = [
createElementVNode(
"div",
{ class: "fullscreen-close-hint" },
"\u70B9\u51FB\u4EFB\u610F\u4F4D\u7F6E\u6216\u6309 ESC \u9000\u51FA\u5168\u5C4F",
-1
/* HOISTED */
)
]))) : createCommentVNode("v-if", true)
],
2
/* CLASS */
);
};
}
});
var css_248z = "\n.dark .content-area[data-v-01b08bd0] {\r\n background: #99999980 !important;\n}\n.dark .code-viewer[data-v-01b08bd0] {\r\n background: #99999980 !important;\n}\n.dark .control-button[data-v-01b08bd0]:hover {\r\n background: #cccccc80 !important;\n}\n.dark .toolbar[data-v-01b08bd0] {\r\n background: #1d1d1d !important;\n}\n.dark .control-group[data-v-01b08bd0]{\r\n background-color: #000 !important;\n}\n.dark .toolbar .tab-button.active[data-v-01b08bd0]{\r\n background-color: #dbeafe80 !important;\n}\n.dark .toolbar .tab-button[data-v-01b08bd0]:hover{\r\n background-color: #9299a380 !important;\r\n color: white;\n}\n.mermaid-container[data-v-01b08bd0] {\r\n background: white;\r\n border-radius: 8px;\r\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),\r\n 0 4px 6px -2px rgba(0, 0, 0, 0.05);\r\n border: 1px solid #e5e7eb;\r\n overflow: hidden;\r\n height: var(--01b08bd0-height);\r\n transition: all 0.3s ease;\r\n position: relative;\n}\n.mermaid-container.fullscreen[data-v-01b08bd0] {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n z-index: 1000;\r\n border-radius: 0;\r\n height: 100vh !important;\r\n margin: 0;\r\n padding: 0;\n}\n.mermaid-container.fullscreen .content-area[data-v-01b08bd0] {\r\n background: white;\r\n height: calc(100vh - 60px);\r\n margin: 0;\r\n padding: 0;\n}\n.fullscreen-overlay[data-v-01b08bd0] {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: rgba(0, 0, 0, 0.8);\r\n z-index: -1;\r\n cursor: pointer;\n}\n.fullscreen-close-hint[data-v-01b08bd0] {\r\n position: absolute;\r\n top: 10px;\r\n right: 20px;\r\n color: white;\r\n font-size: 14px;\r\n padding: 8px 12px;\r\n background: rgba(0, 0, 0, 0.6);\r\n border-radius: 4px;\r\n z-index: 1001;\n}\n.toolbar[data-v-01b08bd0] {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 12px 16px;\r\n background: #f9fafb;\r\n border-bottom: 1px solid #e5e7eb;\r\n height: 60px;\n}\n.toolbar-left[data-v-01b08bd0] {\r\n display: flex;\r\n gap: 4px;\n}\n.toolbar-right[data-v-01b08bd0] {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\n}\n.tab-button[data-v-01b08bd0] {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 8px 16px;\r\n border-radius: 6px;\r\n font-size: 14px;\r\n font-weight: 500;\r\n transition: all 0.2s;\r\n color: #6b7280;\r\n background: transparent;\r\n border: none;\r\n cursor: pointer;\n}\n.tab-button[data-v-01b08bd0]:hover {\r\n color: #374151;\r\n background: white;\n}\n.tab-button.active[data-v-01b08bd0] {\r\n background: #dbeafe;\r\n color: #1d4ed8;\r\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n}\n.control-group[data-v-01b08bd0] {\r\n display: flex;\r\n align-items: center;\r\n background: white;\r\n border-radius: 6px;\r\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\r\n border: 1px solid #e5e7eb;\n}\n.control-button[data-v-01b08bd0] {\r\n padding: 8px;\r\n background: transparent;\r\n border: none;\r\n color: #6b7280;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n border-right: 1px solid #e5e7eb;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\n}\n.control-button[data-v-01b08bd0]:last-child {\r\n border-right: none;\n}\n.control-button[data-v-01b08bd0]:first-child {\r\n border-top-left-radius: 6px;\r\n border-bottom-left-radius: 6px;\n}\n.control-button[data-v-01b08bd0]:last-child {\r\n border-top-right-radius: 6px;\r\n border-bottom-right-radius: 6px;\n}\n.control-button[data-v-01b08bd0]:hover {\r\n background: #f9fafb;\r\n color: #374151;\n}\n.icon[data-v-01b08bd0] {\r\n width: 16px;\r\n height: 16px;\n}\n.content-area[data-v-01b08bd0] {\r\n flex: 1;\r\n position: relative;\r\n height: calc(100% - 60px);\n}\n.code-panel[data-v-01b08bd0] {\r\n height: 100%;\r\n overflow: hidden;\n}\n.code-viewer[data-v-01b08bd0] {\r\n height: 100%;\r\n overflow: auto;\r\n background: #f9fafb;\n}\n.code-content[data-v-01b08bd0] {\r\n width: 100%;\r\n height: 100%;\r\n margin: 0;\r\n padding: 16px;\r\n font-family: \"Fira Code\", \"Monaco\", \"Consolas\", monospace;\r\n font-size: 14px;\r\n color: #374151;\r\n line-height: 1.6;\r\n white-space: pre-wrap;\r\n background: transparent;\r\n border: none;\r\n outline: none;\n}\n.preview-panel[data-v-01b08bd0] {\r\n height: 100%;\r\n position: relative;\r\n overflow: hidden;\n}\n.mermaid-diagram-container[data-v-01b08bd0] {\r\n width: 100%;\r\n height: 100%;\r\n cursor: grab;\r\n overflow: hidden;\r\n background: #fafafa;\n}\n.mermaid-diagram-container[data-v-01b08bd0]:active {\r\n cursor: grabbing;\n}\n.loading-overlay[data-v-01b08bd0] {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n background: rgba(255, 255, 255, 0.8);\r\n color: #6b7280;\n}\n.loading-spinner[data-v-01b08bd0] {\r\n width: 32px;\r\n height: 32px;\r\n border: 4px solid #dbeafe;\r\n border-top: 4px solid #2563eb;\r\n border-radius: 50%;\r\n animation: spin 1s linear infinite;\r\n margin-bottom: 16px;\n}\n.error-state[data-v-01b08bd0] {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n color: #dc2626;\r\n padding: 20px;\n}\n.error-icon[data-v-01b08bd0] {\r\n font-size: 48px;\r\n margin-bottom: 16px;\n}\n.error-state h3[data-v-01b08bd0] {\r\n font-size: 18px;\r\n font-weight: 600;\r\n margin-bottom: 8px;\r\n color: #dc2626;\n}\n.error-message[data-v-01b08bd0] {\r\n font-size: 14px;\r\n color: #6b7280;\r\n text-align: center;\r\n margin-bottom: 16px;\r\n max-width: 400px;\n}\n.retry-button[data-v-01b08bd0] {\r\n padding: 8px 16px;\r\n background: #dc2626;\r\n color: white;\r\n border: none;\r\n border-radius: 6px;\r\n font-size: 14px;\r\n cursor: pointer;\r\n transition: background 0.2s;\n}\n.retry-button[data-v-01b08bd0]:hover {\r\n background: #b91c1c;\n}\n.empty-state[data-v-01b08bd0] {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n color: #6b7280;\n}\n.empty-icon[data-v-01b08bd0] {\r\n font-size: 48px;\r\n margin-bottom: 16px;\n}\n.empty-state h3[data-v-01b08bd0] {\r\n font-size: 18px;\r\n font-weight: 600;\r\n margin-bottom: 8px;\r\n color: #374151;\n}\n.empty-state p[data-v-01b08bd0] {\r\n font-size: 14px;\n}\r\n\r\n/* Mermaid diagram styles */\n[data-v-01b08bd0] .mermaid {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\n}\n[data-v-01b08bd0] .mermaid svg {\r\n max-width: none !important;\r\n max-height: none !important;\r\n transition: transform 0.2s ease;\n}\r\n\r\n/* Custom scrollbar */\n.code-viewer[data-v-01b08bd0]::-webkit-scrollbar {\r\n width: 8px;\r\n height: 8px;\n}\n.code-viewer[data-v-01b08bd0]::-webkit-scrollbar-track {\r\n background: #f1f1f1;\r\n border-radius: 4px;\n}\n.code-viewer[data-v-01b08bd0]::-webkit-scrollbar-thumb {\r\n background: #c1c1c1;\r\n border-radius: 4px;\n}\n.code-viewer[data-v-01b08bd0]::-webkit-scrollbar-thumb:hover {\r\n background: #a1a1a1;\n}\r\n\r\n/* Responsive adjustments */\n@media (max-width: 768px) {\n.toolbar[data-v-01b08bd0] {\r\n flex-direction: column;\r\n gap: 12px;\r\n padding: 16px;\r\n height: auto;\n}\n.toolbar-left[data-v-01b08bd0],\r\n .toolbar-right[data-v-01b08bd0] {\r\n width: 100%;\r\n justify-content: center;\n}\n.tab-button[data-v-01b08bd0] {\r\n flex: 1;\r\n justify-content: center;\n}\n}\r\n\r\n/* Print styles */\n@media print {\n.toolbar[data-v-01b08bd0] {\r\n display: none;\n}\n.mermaid-container[data-v-01b08bd0] {\r\n box-shadow: none;\r\n border: none;\n}\n}\r\n";
styleInject(css_248z);
script.__scopeId = "data-v-01b08bd0";
script.__file = "packages/Mermaid/index.vue";
export { script as default };