@leelaa/vitepress-plugin-extended
Version:
VitePress 增强插件集合，提供多种高级功能和组件
527 lines (522 loc) • 29.5 kB
JavaScript
import { defineComponent, useCssVars, ref, computed, onMounted, onUnmounted, createElementBlock, openBlock, normalizeClass, createCommentVNode, createElementVNode, toDisplayString, normalizeStyle, Fragment, renderList } from 'vue';
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 = { class: "image-info" };
const _hoisted_4 = { class: "image-title" };
const _hoisted_5 = {
key: 0,
class: "image-count"
};
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 = { class: "content-area" };
const _hoisted_12 = { class: "image-display-area" };
const _hoisted_13 = ["src", "alt"];
const _hoisted_14 = {
key: 1,
class: "loading-overlay"
};
const _hoisted_15 = {
key: 2,
class: "error-state"
};
const _hoisted_16 = {
key: 3,
class: "empty-state"
};
const _hoisted_17 = {
key: 0,
class: "thumbnail-nav"
};
const _hoisted_18 = { class: "thumbnail-container" };
const _hoisted_19 = ["onClick", "title"];
const _hoisted_20 = ["src", "alt"];
var script = /* @__PURE__ */ defineComponent({
__name: "index",
props: {
images: { type: Array, required: false, default: () => [] },
height: { type: String, required: false, default: "600px" }
},
setup(__props) {
useCssVars((_ctx) => ({
"cdb704d8-height": _ctx.height
}));
const props = __props;
const currentIndex = ref(0);
const isLoading = ref(false);
const hasError = ref(false);
const isFullscreen = ref(false);
const isDragging = ref(false);
const dragStart = ref({ x: 0, y: 0 });
const scale = ref(1);
const translateX = ref(0);
const translateY = ref(0);
const imageContainer = ref();
const currentImage = computed(() => {
return props.images[currentIndex.value] || null;
});
const imageTransformStyle = computed(() => {
return {
transform: `translate(${translateX.value}px, ${translateY.value}px) scale(${scale.value})`,
transformOrigin: "center center",
transition: isDragging.value ? "none" : "transform 0.2s ease"
};
});
const setCurrentImage = (index) => {
if (index >= 0 && index < props.images.length) {
currentIndex.value = index;
resetView();
hasError.value = false;
}
};
const nextImage = () => {
const nextIndex = (currentIndex.value + 1) % props.images.length;
setCurrentImage(nextIndex);
};
const previousImage = () => {
const prevIndex = (currentIndex.value - 1 + props.images.length) % props.images.length;
setCurrentImage(prevIndex);
};
const zoomIn = () => {
scale.value = Math.min(scale.value * 1.2, 5);
};
const zoomOut = () => {
scale.value = Math.max(scale.value * 0.8, 0.1);
};
const resetView = () => {
scale.value = 1;
translateX.value = 0;
translateY.value = 0;
};
const downloadImage = async () => {
if (!currentImage.value) return;
try {
const response = await fetch(currentImage.value.url);
const blob = await response.blob();
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
link.download = currentImage.value.title || `image-${currentIndex.value + 1}`;
link.click();
URL.revokeObjectURL(url);
} catch (error) {
console.error("\u4E0B\u8F7D\u56FE\u7247\u5931\u8D25:", error);
}
};
const toggleFullscreen = () => {
isFullscreen.value = !isFullscreen.value;
};
const exitFullscreen = () => {
isFullscreen.value = false;
};
const retryLoad = () => {
hasError.value = false;
isLoading.value = true;
};
const handleImageLoad = () => {
isLoading.value = false;
hasError.value = false;
resetView();
};
const handleImageError = () => {
isLoading.value = false;
hasError.value = true;
};
const handleThumbnailError = (event) => {
const img = event.target;
img.style.display = "none";
};
const handleMouseDown = (e) => {
if (e.button === 0 && currentImage.value) {
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;
dragStart.value = { x: e.clientX, y: e.clientY };
}
};
const handleMouseUp = () => {
isDragging.value = false;
};
const handleKeydown = (e) => {
if (props.images.length <= 1) return;
switch (e.key) {
case "ArrowLeft":
e.preventDefault();
previousImage();
break;
case "ArrowRight":
e.preventDefault();
nextImage();
break;
case "Escape":
if (isFullscreen.value) {
exitFullscreen();
}
break;
}
};
onMounted(() => {
if (props.images.length > 0) {
isLoading.value = true;
}
window.addEventListener("keydown", handleKeydown);
});
onUnmounted(() => {
window.removeEventListener("keydown", handleKeydown);
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock(
"div",
{
class: normalizeClass(["image-container", { fullscreen: isFullscreen.value }])
},
[
createCommentVNode(" Header Toolbar "),
createElementVNode("div", _hoisted_1, [
createElementVNode("div", _hoisted_2, [
createElementVNode("div", _hoisted_3, [
createElementVNode(
"span",
_hoisted_4,
toDisplayString(currentImage.value?.title || `\u56FE\u7247 ${currentIndex.value + 1}`),
1
/* TEXT */
),
_ctx.images.length > 1 ? (openBlock(), createElementBlock(
"span",
_hoisted_5,
toDisplayString(currentIndex.value + 1) + " / " + toDisplayString(_ctx.images.length),
1
/* TEXT */
)) : createCommentVNode("v-if", true)
])
]),
createElementVNode("div", _hoisted_6, [
createElementVNode("div", { class: "control-group" }, [
createElementVNode("button", {
onClick: zoomIn,
class: "control-button",
title: "\u653E\u5927"
}, _cache[0] || (_cache[0] = [
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[1] || (_cache[1] = [
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[2] || (_cache[2] = [
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, [
_ctx.images.length > 1 ? (openBlock(), createElementBlock("button", {
key: 0,
onClick: previousImage,
class: "control-button",
title: "\u4E0A\u4E00\u5F20"
}, _cache[3] || (_cache[3] = [
createElementVNode(
"svg",
{
class: "icon",
viewBox: "0 0 24 24",
fill: "currentColor"
},
[
createElementVNode("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" })
],
-1
/* HOISTED */
)
]))) : createCommentVNode("v-if", true),
_ctx.images.length > 1 ? (openBlock(), createElementBlock("button", {
key: 1,
onClick: nextImage,
class: "control-button",
title: "\u4E0B\u4E00\u5F20"
}, _cache[4] || (_cache[4] = [
createElementVNode(
"svg",
{
class: "icon",
viewBox: "0 0 24 24",
fill: "currentColor"
},
[
createElementVNode("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" })
],
-1
/* HOISTED */
)
]))) : createCommentVNode("v-if", true),
createElementVNode("button", {
onClick: downloadImage,
class: "control-button",
title: "\u4E0B\u8F7D\u56FE\u7247"
}, _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)
])
])
]),
createCommentVNode(" Content Area "),
createElementVNode("div", _hoisted_11, [
createCommentVNode(" Image Display Area "),
createElementVNode("div", _hoisted_12, [
createElementVNode(
"div",
{
ref_key: "imageContainer",
ref: imageContainer,
class: "image-display",
onMousedown: handleMouseDown,
onMousemove: handleMouseMove,
onMouseup: handleMouseUp,
onMouseleave: handleMouseUp
},
[
currentImage.value ? (openBlock(), createElementBlock("img", {
key: 0,
src: currentImage.value.url,
alt: currentImage.value.title || `\u56FE\u7247 ${currentIndex.value + 1}`,
class: "main-image",
style: normalizeStyle(imageTransformStyle.value),
onLoad: handleImageLoad,
onError: handleImageError
}, null, 44, _hoisted_13)) : createCommentVNode("v-if", true),
createCommentVNode(" Loading State "),
isLoading.value ? (openBlock(), createElementBlock("div", _hoisted_14, _cache[8] || (_cache[8] = [
createElementVNode(
"div",
{ class: "loading-spinner" },
null,
-1
/* HOISTED */
),
createElementVNode(
"p",
null,
"\u6B63\u5728\u52A0\u8F7D\u56FE\u7247...",
-1
/* HOISTED */
)
]))) : createCommentVNode("v-if", true),
createCommentVNode(" Error State "),
hasError.value ? (openBlock(), createElementBlock("div", _hoisted_15, [
_cache[9] || (_cache[9] = createElementVNode(
"div",
{ class: "error-icon" },
"\u274C",
-1
/* HOISTED */
)),
_cache[10] || (_cache[10] = createElementVNode(
"h3",
null,
"\u56FE\u7247\u52A0\u8F7D\u5931\u8D25",
-1
/* HOISTED */
)),
_cache[11] || (_cache[11] = createElementVNode(
"p",
null,
"\u65E0\u6CD5\u52A0\u8F7D\u5F53\u524D\u56FE\u7247\uFF0C\u8BF7\u68C0\u67E5\u56FE\u7247\u94FE\u63A5\u662F\u5426\u6709\u6548",
-1
/* HOISTED */
)),
createElementVNode("button", {
onClick: retryLoad,
class: "retry-button"
}, "\u91CD\u8BD5")
])) : createCommentVNode("v-if", true),
createCommentVNode(" Empty State "),
!_ctx.images.length && !isLoading.value ? (openBlock(), createElementBlock("div", _hoisted_16, _cache[12] || (_cache[12] = [
createElementVNode(
"div",
{ class: "empty-icon" },
"\u{1F5BC}\uFE0F",
-1
/* HOISTED */
),
createElementVNode(
"h3",
null,
"\u6CA1\u6709\u56FE\u7247\u53EF\u663E\u793A",
-1
/* HOISTED */
),
createElementVNode(
"p",
null,
"\u8BF7\u63D0\u4F9B\u6709\u6548\u7684\u56FE\u7247\u94FE\u63A5",
-1
/* HOISTED */
)
]))) : createCommentVNode("v-if", true)
],
544
/* NEED_HYDRATION, NEED_PATCH */
)
]),
createCommentVNode(" Thumbnail Navigation (\u4F7F\u7528\u7EDD\u5BF9\u5B9A\u4F4D\uFF0C\u53EA\u5728\u591A\u56FE\u7247\u65F6\u663E\u793A) "),
_ctx.images.length > 1 ? (openBlock(), createElementBlock("div", _hoisted_17, [
createElementVNode("div", _hoisted_18, [
(openBlock(true), createElementBlock(
Fragment,
null,
renderList(_ctx.images, (image, index) => {
return openBlock(), createElementBlock("button", {
key: index,
onClick: ($event) => setCurrentImage(index),
class: normalizeClass(["thumbnail-button", { active: index === currentIndex.value }]),
title: image.title || `\u56FE\u7247 ${index + 1}`
}, [
createElementVNode("img", {
src: image.url,
alt: image.title || `\u7F29\u7565\u56FE ${index + 1}`,
class: "thumbnail-image",
onError: handleThumbnailError
}, null, 40, _hoisted_20),
_cache[13] || (_cache[13] = createElementVNode(
"div",
{ class: "thumbnail-overlay" },
null,
-1
/* HOISTED */
))
], 10, _hoisted_19);
}),
128
/* KEYED_FRAGMENT */
))
])
])) : createCommentVNode("v-if", true)
]),
createCommentVNode(" Fullscreen Overlay "),
isFullscreen.value ? (openBlock(), createElementBlock("div", {
key: 0,
class: "fullscreen-overlay",
onClick: exitFullscreen
}, _cache[14] || (_cache[14] = [
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-cdb704d8] {\r\n background: #99999980 !important;\n}\n.dark .control-button[data-v-cdb704d8]:hover {\r\n background: #cccccc80 !important;\n}\n.dark .toolbar[data-v-cdb704d8] {\r\n background: #1d1d1d !important;\n}\n.dark .control-group[data-v-cdb704d8]{\r\n background-color: #000 !important;\n}\n.image-container[data-v-cdb704d8] {\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(--cdb704d8-height);\r\n transition: all 0.3s ease;\r\n position: relative;\n}\n.image-container.fullscreen[data-v-cdb704d8] {\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;\r\n border: none;\n}\n.image-container.fullscreen .content-area[data-v-cdb704d8] {\r\n background: white;\r\n height: calc(100vh - 60px);\r\n margin: 0;\r\n padding: 0;\n}\n.fullscreen-overlay[data-v-cdb704d8] {\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-cdb704d8] {\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-cdb704d8] {\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-cdb704d8] {\r\n display: flex;\r\n align-items: center;\n}\n.toolbar-right[data-v-cdb704d8] {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\n}\n.image-info[data-v-cdb704d8] {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 2px;\n}\n.image-title[data-v-cdb704d8] {\r\n font-size: 14px;\r\n font-weight: 600;\r\n color: #374151;\n}\n.image-count[data-v-cdb704d8] {\r\n font-size: 12px;\r\n color: #6b7280;\n}\n.control-group[data-v-cdb704d8] {\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-cdb704d8] {\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-cdb704d8]:last-child {\r\n border-right: none;\n}\n.control-button[data-v-cdb704d8]:first-child {\r\n border-top-left-radius: 6px;\r\n border-bottom-left-radius: 6px;\n}\n.control-button[data-v-cdb704d8]:last-child {\r\n border-top-right-radius: 6px;\r\n border-bottom-right-radius: 6px;\n}\n.control-button[data-v-cdb704d8]:hover {\r\n background: #f9fafb;\r\n color: #374151;\n}\n.icon[data-v-cdb704d8] {\r\n width: 16px;\r\n height: 16px;\n}\n.content-area[data-v-cdb704d8] {\r\n position: relative;\r\n height: calc(100% - 60px);\r\n display: flex;\r\n flex-direction: column;\n}\r\n\r\n/* 主图片显示区域 */\n.image-display-area[data-v-cdb704d8] {\r\n flex: 1;\r\n position: relative;\r\n overflow: hidden;\n}\n.image-display[data-v-cdb704d8] {\r\n width: 100%;\r\n height: 100%;\r\n position: relative;\r\n overflow: hidden;\r\n background: #f9fafb;\r\n cursor: grab;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\n}\n.image-display[data-v-cdb704d8]:active {\r\n cursor: grabbing;\n}\r\n\r\n/* 图片宽度适配模式 */\n.main-image[data-v-cdb704d8] {\r\n width: 100%;\r\n height: auto;\r\n object-fit: contain;\r\n user-select: none;\r\n pointer-events: none;\r\n display: block;\n}\n.loading-overlay[data-v-cdb704d8] {\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-cdb704d8] {\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-cdb704d8 1s linear infinite;\r\n margin-bottom: 16px;\n}\n.error-state[data-v-cdb704d8] {\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-cdb704d8] {\r\n font-size: 48px;\r\n margin-bottom: 16px;\n}\n.error-state h3[data-v-cdb704d8] {\r\n font-size: 18px;\r\n font-weight: 600;\r\n margin-bottom: 8px;\r\n color: #dc2626;\n}\n.error-state p[data-v-cdb704d8] {\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-cdb704d8] {\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-cdb704d8]:hover {\r\n background: #b91c1c;\n}\n.empty-state[data-v-cdb704d8] {\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-cdb704d8] {\r\n font-size: 48px;\r\n margin-bottom: 16px;\n}\n.empty-state h3[data-v-cdb704d8] {\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-cdb704d8] {\r\n font-size: 14px;\n}\r\n\r\n/* 缩略图导航 - 使用绝对定位确保在移动端也能显示 */\n.thumbnail-nav[data-v-cdb704d8] {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n backdrop-filter: blur(10px);\r\n border-top: 1px solid #e5e7eb;\r\n padding: 12px;\r\n z-index: 10;\n}\n.thumbnail-container[data-v-cdb704d8] {\r\n display: flex;\r\n gap: 8px;\r\n overflow-x: auto;\r\n padding: 4px;\r\n scrollbar-width: thin;\r\n justify-content: center;\n}\n.thumbnail-button[data-v-cdb704d8] {\r\n position: relative;\r\n flex-shrink: 0;\r\n width: 60px;\r\n height: 60px;\r\n border-radius: 6px;\r\n overflow: hidden;\r\n border: 2px solid transparent;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n background: white;\n}\n.thumbnail-button[data-v-cdb704d8]:hover {\r\n border-color: #d1d5db;\r\n transform: translateY(-2px);\r\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}\n.thumbnail-button.active[data-v-cdb704d8] {\r\n border-color: #3b82f6;\r\n box-shadow: 0 0 0 1px #3b82f6;\n}\n.thumbnail-image[data-v-cdb704d8] {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\n}\n.thumbnail-overlay[data-v-cdb704d8] {\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.1);\r\n opacity: 0;\r\n transition: opacity 0.2s;\n}\n.thumbnail-button:hover .thumbnail-overlay[data-v-cdb704d8] {\r\n opacity: 1;\n}\n.thumbnail-button.active .thumbnail-overlay[data-v-cdb704d8] {\r\n opacity: 0;\n}\r\n\r\n/* Custom scrollbar for thumbnails */\n.thumbnail-container[data-v-cdb704d8]::-webkit-scrollbar {\r\n height: 6px;\n}\n.thumbnail-container[data-v-cdb704d8]::-webkit-scrollbar-track {\r\n background: #f1f1f1;\r\n border-radius: 3px;\n}\n.thumbnail-container[data-v-cdb704d8]::-webkit-scrollbar-thumb {\r\n background: #c1c1c1;\r\n border-radius: 3px;\n}\n.thumbnail-container[data-v-cdb704d8]::-webkit-scrollbar-thumb:hover {\r\n background: #a1a1a1;\n}\n@keyframes spin-cdb704d8 {\nto {\r\n transform: rotate(360deg);\n}\n}\r\n\r\n/* 移动端优化 */\n@media (max-width: 768px) {\n.toolbar[data-v-cdb704d8] {\r\n flex-direction: column;\r\n gap: 12px;\r\n padding: 16px;\r\n height: auto;\n}\n.toolbar-left[data-v-cdb704d8],\r\n .toolbar-right[data-v-cdb704d8] {\r\n width: 100%;\r\n justify-content: center;\n}\n.image-info[data-v-cdb704d8] {\r\n text-align: center;\n}\n.thumbnail-button[data-v-cdb704d8] {\r\n width: 50px;\r\n height: 50px;\n}\n.thumbnail-nav[data-v-cdb704d8] {\r\n padding: 8px;\n}\n.thumbnail-container[data-v-cdb704d8] {\r\n gap: 6px;\r\n padding: 2px;\n}\r\n\r\n /* 确保移动端缩略图导航可见 */\n.content-area[data-v-cdb704d8] {\r\n padding-bottom: 0;\n}\n.image-display-area[data-v-cdb704d8] {\r\n padding-bottom: 78px; /* 为缩略图导航留出空间 */\n}\n}\r\n\r\n/* 全屏模式下的移动端适配 */\n.image-container.fullscreen .image-display-area[data-v-cdb704d8] {\r\n padding-bottom: 0;\n}\n.image-container.fullscreen .thumbnail-nav[data-v-cdb704d8] {\r\n border-top: 1px solid rgba(255, 255, 255, 0.2);\n}\n@media (max-width: 768px) {\n.image-container.fullscreen .image-display-area[data-v-cdb704d8] {\r\n padding-bottom: 78px;\n}\n}\r\n\r\n/* Print styles */\n@media print {\n.toolbar[data-v-cdb704d8],\r\n .thumbnail-nav[data-v-cdb704d8] {\r\n display: none;\n}\n.image-container[data-v-cdb704d8] {\r\n box-shadow: none;\r\n border: none;\n}\n.image-display-area[data-v-cdb704d8] {\r\n padding-bottom: 0;\n}\n}\r\n";
styleInject(css_248z);
script.__scopeId = "data-v-cdb704d8";
script.__file = "packages/ImagePreview/index.vue";
export { script as default };