fangguo-component 1.2.0 → 1.2.2

package/dist/ViewImgPreview.css

@@ -22,6 +22,26 @@
   opacity: 1 !important;
 }
 
+/* 仅展示左侧箭头 */
+.el-image-viewer__wrapper.fg-view-img-preview--has-nav-prev .el-image-viewer__prev {
+  display: inline-flex !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+}
+.el-image-viewer__wrapper.fg-view-img-preview--has-nav-prev .el-image-viewer__next {
+  display: none !important;
+}
+
+/* 仅展示右侧箭头 */
+.el-image-viewer__wrapper.fg-view-img-preview--has-nav-next .el-image-viewer__next {
+  display: inline-flex !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+}
+.el-image-viewer__wrapper.fg-view-img-preview--has-nav-next .el-image-viewer__prev {
+  display: none !important;
+}
+
 /* 保证预览图在视口内居中适配（避免业务全局 img { width/height: 100% } 导致铺满） */
 .el-image-viewer__wrapper .el-image-viewer__canvas {
   display: flex;
@@ -38,16 +58,22 @@
 
 /* 画布置于蒙层之上 */
 .el-image-viewer__wrapper.fg-view-img-preview--has-nav .el-image-viewer__mask,
+.el-image-viewer__wrapper.fg-view-img-preview--has-nav-prev .el-image-viewer__mask,
+.el-image-viewer__wrapper.fg-view-img-preview--has-nav-next .el-image-viewer__mask,
 .el-image-viewer__wrapper.fg-view-img-preview--hide-nav .el-image-viewer__mask,
 .el-image-viewer__wrapper.fg-view-img-preview--hide-toolbar .el-image-viewer__mask {
   z-index: 1;
 }
 .el-image-viewer__wrapper.fg-view-img-preview--has-nav .el-image-viewer__canvas,
+.el-image-viewer__wrapper.fg-view-img-preview--has-nav-prev .el-image-viewer__canvas,
+.el-image-viewer__wrapper.fg-view-img-preview--has-nav-next .el-image-viewer__canvas,
 .el-image-viewer__wrapper.fg-view-img-preview--hide-nav .el-image-viewer__canvas,
 .el-image-viewer__wrapper.fg-view-img-preview--hide-toolbar .el-image-viewer__canvas {
   z-index: 2;
 }
 .el-image-viewer__wrapper.fg-view-img-preview--has-nav .el-image-viewer__img,
+.el-image-viewer__wrapper.fg-view-img-preview--has-nav-prev .el-image-viewer__img,
+.el-image-viewer__wrapper.fg-view-img-preview--has-nav-next .el-image-viewer__img,
 .el-image-viewer__wrapper.fg-view-img-preview--hide-nav .el-image-viewer__img,
 .el-image-viewer__wrapper.fg-view-img-preview--hide-toolbar .el-image-viewer__img {
   z-index: 2;
@@ -55,6 +81,12 @@
 .el-image-viewer__wrapper.fg-view-img-preview--has-nav .el-image-viewer__btn,
 .el-image-viewer__wrapper.fg-view-img-preview--has-nav .el-image-viewer__close,
 .el-image-viewer__wrapper.fg-view-img-preview--has-nav .el-image-viewer__actions,
+.el-image-viewer__wrapper.fg-view-img-preview--has-nav-prev .el-image-viewer__btn,
+.el-image-viewer__wrapper.fg-view-img-preview--has-nav-prev .el-image-viewer__close,
+.el-image-viewer__wrapper.fg-view-img-preview--has-nav-prev .el-image-viewer__actions,
+.el-image-viewer__wrapper.fg-view-img-preview--has-nav-next .el-image-viewer__btn,
+.el-image-viewer__wrapper.fg-view-img-preview--has-nav-next .el-image-viewer__close,
+.el-image-viewer__wrapper.fg-view-img-preview--has-nav-next .el-image-viewer__actions,
 .el-image-viewer__wrapper.fg-view-img-preview--hide-nav .el-image-viewer__btn,
 .el-image-viewer__wrapper.fg-view-img-preview--hide-nav .el-image-viewer__close,
 .el-image-viewer__wrapper.fg-view-img-preview--hide-toolbar .el-image-viewer__btn,

package/dist/{ViewImgPreview.vue_vue_type_style_index_0_lang-CYuLovBR.js → ViewImgPreview.vue_vue_type_style_index_0_lang-C2i0p5IK.js}

@@ -1,7 +1,7 @@
 import { defineComponent, shallowRef, watch, nextTick, computed, openBlock, createBlock, unref, withCtx, createElementVNode, toDisplayString, createElementBlock, normalizeStyle, Fragment, renderList, resolveDynamicComponent, createCommentVNode } from "vue";
 import { ElImageViewer, ElIcon } from "element-plus";
 import { Refresh, RefreshRight, RefreshLeft, ZoomIn, ZoomOut, DArrowRight, DArrowLeft, Right, Back } from "@element-plus/icons-vue";
-import { D as DEFAULT_ORIGINAL_TOOLBAR, g as DEFAULT_PREVIEW_SHOW_PROGRESS, d as DEFAULT_PREVIEW_MAX_SCALE, e as DEFAULT_PREVIEW_MIN_SCALE, f as DEFAULT_PREVIEW_SCALE, i as DEFAULT_PREVIEW_ZOOM_RATE, h as DEFAULT_PREVIEW_TELEPORTED, a as DEFAULT_PREVIEW_CLOSE_ON_PRESS_ESCAPE, b as DEFAULT_PREVIEW_HIDE_ON_CLICK_MODAL, k as DEFAULT_TOOLBAR_ICON_COLOR, j as DEFAULT_TOOLBAR_BG_COLOR, c as DEFAULT_PREVIEW_INFINITE } from "./types-BNFeGRer.js";
+import { h as DEFAULT_PREVIEW_SIDE_NAV, D as DEFAULT_ORIGINAL_TOOLBAR, g as DEFAULT_PREVIEW_SHOW_PROGRESS, d as DEFAULT_PREVIEW_MAX_SCALE, e as DEFAULT_PREVIEW_MIN_SCALE, f as DEFAULT_PREVIEW_SCALE, j as DEFAULT_PREVIEW_ZOOM_RATE, i as DEFAULT_PREVIEW_TELEPORTED, a as DEFAULT_PREVIEW_CLOSE_ON_PRESS_ESCAPE, b as DEFAULT_PREVIEW_HIDE_ON_CLICK_MODAL, l as DEFAULT_TOOLBAR_ICON_COLOR, k as DEFAULT_TOOLBAR_BG_COLOR, c as DEFAULT_PREVIEW_INFINITE, r as resolvePreviewSideNav } from "./types-Ccn_sb6f.js";
 import './ViewImgPreview.css';const _hoisted_1 = {
   class: "fg-view-img-preview__toolbar-capture",
   "aria-hidden": "true"
@@ -26,7 +26,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     showProgress: { type: Boolean, default: DEFAULT_PREVIEW_SHOW_PROGRESS },
     simpleExtraTools: { default: () => [] },
     renderExtraTools: { default: null },
-    originalToolbar: { default: () => [...DEFAULT_ORIGINAL_TOOLBAR] }
+    originalToolbar: { default: () => [...DEFAULT_ORIGINAL_TOOLBAR] },
+    previewSideNav: { type: [Boolean, String], default: DEFAULT_PREVIEW_SIDE_NAV }
   },
   emits: ["close", "switch", "show"],
   setup(__props, { emit: __emit }) {
@@ -44,12 +45,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       wrapper.classList.remove(
         "fg-view-img-preview--hide-toolbar",
         "fg-view-img-preview--hide-nav",
-        "fg-view-img-preview--has-nav"
+        "fg-view-img-preview--has-nav",
+        "fg-view-img-preview--has-nav-prev",
+        "fg-view-img-preview--has-nav-next"
       );
       if (!props.visible) return;
       if (!showToolbar.value) wrapper.classList.add("fg-view-img-preview--hide-toolbar");
-      if (showSideNav.value) wrapper.classList.add("fg-view-img-preview--has-nav");
-      else wrapper.classList.add("fg-view-img-preview--hide-nav");
+      const sideNav = resolvedSideNav.value;
+      if (sideNav === "none") wrapper.classList.add("fg-view-img-preview--hide-nav");
+      else if (sideNav === "both") wrapper.classList.add("fg-view-img-preview--has-nav");
+      else if (sideNav === "prev") wrapper.classList.add("fg-view-img-preview--has-nav-prev");
+      else wrapper.classList.add("fg-view-img-preview--has-nav-next");
     }
     function resetViewerOnce() {
       var _a;
@@ -135,15 +141,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         });
       }
     );
-    const NAV_TOOLBAR_KEYS = ["prev", "next", "fistImg", "lastImg"];
     const showToolbar = computed(
       () => props.originalToolbar.length > 0 || props.simpleExtraTools.length > 0 || !!props.renderExtraTools
     );
-    const showSideNav = computed(
-      () => props.urlList.length > 1 && props.originalToolbar.some((key) => NAV_TOOLBAR_KEYS.includes(key))
+    const resolvedSideNav = computed(
+      () => resolvePreviewSideNav(
+        props.previewSideNav,
+        props.urlList.length,
+        props.originalToolbar,
+        props.simpleExtraTools.length > 0 || !!props.renderExtraTools
+      )
     );
     watch(
-      [showToolbar, showSideNav, () => props.urlList.length],
+      [showToolbar, resolvedSideNav, () => props.urlList.length],
       () => {
         if (props.visible) nextTick(syncViewerWrapperFlags);
       }

package/dist/components/cascader/index.js

@@ -1,4 +1,4 @@
-import { _ } from "../../FgCascader.vue_vue_type_style_index_0_lang-Bm4HR37D.js";
+import { _ } from "../../FgCascader.vue_vue_type_style_index_0_lang-CstlYwHs.js";
 export {
   _ as FgCascader
 };

package/dist/components/imgViewerHost/imgViewerStore.d.ts

@@ -1,5 +1,5 @@
 import { VNode } from 'vue';
-import { OriginalToolbarItem, SimpleCustomTool, PreviewShowPayload, ViewImgPreviewViewerOptions } from '../viewImgPreview/types';
+import { OriginalToolbarItem, SimpleCustomTool, PreviewShowPayload, ViewImgPreviewViewerOptions, PreviewSideNav } from '../viewImgPreview/types';
 export interface ShowImgViewerOptions extends ViewImgPreviewViewerOptions {
     previewImgList?: string[];
     defImgPreviewIndex?: number;
@@ -10,6 +10,8 @@ export interface ShowImgViewerOptions extends ViewImgPreviewViewerOptions {
     simpleExtraTools?: SimpleCustomTool[];
     renderExtraTools?: VNode | null;
     originalToolbar?: OriginalToolbarItem[];
+    /** 多图预览两侧箭头：`false` 隐藏；`'prev'` / `'next'` 仅一侧；`'both'` 两侧（默认） */
+    previewSideNav?: PreviewSideNav;
     /** 预览层打开时触发 */
     onShow?: (payload: PreviewShowPayload) => void;
     /** 预览层关闭时触发 */
@@ -37,6 +39,7 @@ export interface ImgViewerStoreInstance {
     readonly simpleExtraTools: SimpleCustomTool[];
     readonly renderExtraTools: VNode | null;
     readonly originalToolbar: OriginalToolbarItem[];
+    readonly previewSideNav: PreviewSideNav;
     showImgViewer: (options?: ShowImgViewerOptions) => void;
     hideImgViewer: () => void;
     setDefImgPreviewIndex: (defImgPreviewIndex: number) => void;
@@ -189,6 +192,7 @@ export declare function useImgViewerState(): {
     }[];
     renderExtraTools: VNode | null;
     originalToolbar: OriginalToolbarItem[];
+    previewSideNav: PreviewSideNav;
     onShow: ((payload: PreviewShowPayload) => void) | null;
     onClose: (() => void) | null;
     onSwitch: ((index: number) => void) | null;

package/dist/components/imgViewerHost/index.js

@@ -1,5 +1,5 @@
-import { _ } from "../../ImgViewerHost.vue_vue_type_script_setup_true_lang-CMoh7eWo.js";
-import { I, P, g, u, a } from "../../imgViewerStore-C5n16uYa.js";
+import { _ } from "../../ImgViewerHost.vue_vue_type_script_setup_true_lang-DBs42WOq.js";
+import { I, P, g, u, a } from "../../imgViewerStore-DK3zvGf4.js";
 export {
   _ as FgImgViewerHost,
   I as ImgViewerStore,

package/dist/components/index.js

@@ -1,11 +1,11 @@
 import { _ } from "../ArgHover.vue_vue_type_style_index_0_lang-CSymSDRl.js";
-import { _ as _2 } from "../FgCascader.vue_vue_type_style_index_0_lang-Bm4HR37D.js";
+import { _ as _2 } from "../FgCascader.vue_vue_type_style_index_0_lang-CstlYwHs.js";
 import { _ as _3 } from "../CitySelect.vue_vue_type_script_setup_true_lang-DZp6834K.js";
 import { _ as _4 } from "../DragResizable.vue_vue_type_style_index_0_lang-BePpQHve.js";
 import { _ as _5 } from "../HSelectAll.vue_vue_type_script_setup_true_lang-C6qzdQT-.js";
 import { _ as _6 } from "../IdentifyAddress.vue_vue_type_script_setup_true_lang-BCIOF-Oy.js";
 import { _ as _7 } from "../ImageLoupe.vue_vue_type_script_setup_true_lang-BaXHYlDu.js";
-import { _ as _8 } from "../ImgViewerHost.vue_vue_type_script_setup_true_lang-CMoh7eWo.js";
+import { _ as _8 } from "../ImgViewerHost.vue_vue_type_script_setup_true_lang-DBs42WOq.js";
 import { _ as _9 } from "../LazyComponent.vue_vue_type_script_setup_true_lang-D5KGqlj4.js";
 import { _ as _10 } from "../NoRender.vue_vue_type_script_setup_true_lang-B0G6jxPg.js";
 import { _ as _11 } from "../SelectAll.vue_vue_type_script_setup_true_lang-CyzY8ams.js";
@@ -13,8 +13,8 @@ import { _ as _12 } from "../SelectAll2.vue_vue_type_script_setup_true_lang-Crsa
 import { _ as _13 } from "../SelectCustomAll.vue_vue_type_style_index_0_lang-BEZwlGXa.js";
 import { _ as _14 } from "../SelectTimePicker.vue_vue_type_script_setup_true_lang-Dk4TpTBN.js";
 import { _ as _15 } from "../TextEllipsisTooltip.vue_vue_type_script_setup_true_lang-DVE1CxPm.js";
-import { _ as _16 } from "../ViewImgPreview.vue_vue_type_style_index_0_lang-CYuLovBR.js";
-import { D, a, b, c, d, e, f, g, h, i, j, k } from "../types-BNFeGRer.js";
+import { _ as _16 } from "../ViewImgPreview.vue_vue_type_style_index_0_lang-C2i0p5IK.js";
+import { D, a, b, c, d, e, f, g, h, i, j, k, l, N, r, s } from "../types-Ccn_sb6f.js";
 import { B } from "../ButtonGroup-DqViorHX.js";
 import { C } from "../ContentTitle-By0Zk1u7.js";
 import { C as C2 } from "../CustomInputV2-BqhBSO53.js";
@@ -31,9 +31,9 @@ import { S } from "../SelectAddress-CCepDxu8.js";
 import { S as S2 } from "../SelectTree-DUH92Iwr.js";
 import { S as S3 } from "../SvgIcon-DIg0upEk.js";
 import { T } from "../TextCopy-lpbeqOUI.js";
-import { F as F2 } from "../ViewImg-Bg1AQ0T6.js";
-import { V } from "../ViewImgPopover-b9PDEYbP.js";
-import { I, P, g as g2, u, a as a2 } from "../imgViewerStore-C5n16uYa.js";
+import { F as F2 } from "../ViewImg-DXhF20SL.js";
+import { V } from "../ViewImgPopover-QblZG0z5.js";
+import { I, P, g as g2, u, a as a2 } from "../imgViewerStore-DK3zvGf4.js";
 import { V as V2 } from "../VirtualTable-Cm_L7q9W.js";
 export {
   D as DEFAULT_ORIGINAL_TOOLBAR,
@@ -44,10 +44,11 @@ export {
   e as DEFAULT_PREVIEW_MIN_SCALE,
   f as DEFAULT_PREVIEW_SCALE,
   g as DEFAULT_PREVIEW_SHOW_PROGRESS,
-  h as DEFAULT_PREVIEW_TELEPORTED,
-  i as DEFAULT_PREVIEW_ZOOM_RATE,
-  j as DEFAULT_TOOLBAR_BG_COLOR,
-  k as DEFAULT_TOOLBAR_ICON_COLOR,
+  h as DEFAULT_PREVIEW_SIDE_NAV,
+  i as DEFAULT_PREVIEW_TELEPORTED,
+  j as DEFAULT_PREVIEW_ZOOM_RATE,
+  k as DEFAULT_TOOLBAR_BG_COLOR,
+  l as DEFAULT_TOOLBAR_ICON_COLOR,
   _ as FgArgHover,
   B as FgButtonGroup,
   _2 as FgCascader,
@@ -83,9 +84,12 @@ export {
   V as FgViewImgPopover,
   _16 as FgViewImgPreview,
   I as ImgViewerStore,
+  N as NAV_TOOLBAR_KEYS,
   P as PREVIEW_BASE_Z_INDEX,
   V2 as VirtualTable,
   g2 as getDialogZindex,
+  r as resolvePreviewSideNav,
+  s as shouldShowPreviewSideNav,
   u as useImgViewerState,
   a2 as useImgViewerStore
 };

package/dist/components/viewImg/ViewImg.vue.d.ts

@@ -1,6 +1,6 @@
 import { VNode } from 'vue';
 import { ImgSizeOptions } from '../../tools/imgUrl';
-import { OriginalToolbarItem, SimpleCustomTool, PreviewShowPayload } from '../viewImgPreview/types';
+import { OriginalToolbarItem, SimpleCustomTool, PreviewShowPayload, PreviewSideNav } from '../viewImgPreview/types';
 type ObjectFit = "fill" | "contain" | "cover" | "none" | "scale-down" | "";
 type __VLS_Props = {
     src?: string;
@@ -64,7 +64,13 @@ type __VLS_Props = {
     imgSize?: ImgSizeOptions;
     /** 点击预览是否去掉 URL 查询参数（与主图加载失败去参重试逻辑一致） */
     previewStripQuery?: boolean;
+    /** 多图预览两侧箭头：`false` 隐藏；`'prev'` / `'next'` 仅一侧；`'both'` 两侧（默认） */
+    previewSideNav?: PreviewSideNav;
 };
+/**
+ * 打开预览大图
+ */
+declare function openPreview(): void;
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
@@ -78,6 +84,7 @@ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {
     displaySrc: import('vue').Ref<string, string>;
     retried: import('vue').Ref<boolean, boolean>;
+    openPreview: typeof openPreview;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     switch: (index: number) => any;
     show: (payload: PreviewShowPayload) => any;
@@ -119,6 +126,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {
     simpleExtraTools: SimpleCustomTool[];
     renderExtraTools: VNode | null;
     originalToolbar: OriginalToolbarItem[];
+    previewSideNav: PreviewSideNav;
     zoomRate: number;
     minScale: number;
     maxScale: number;

package/dist/components/viewImg/index.js

@@ -1,4 +1,4 @@
-import { F } from "../../ViewImg-Bg1AQ0T6.js";
+import { F } from "../../ViewImg-DXhF20SL.js";
 export {
   F as FgViewImg
 };

package/dist/components/viewImgPopover/ViewImgPopover.vue.d.ts

@@ -77,6 +77,8 @@ type __VLS_Props = {
     isShowWatermark?: boolean;
     /** 水印标题 */
     waterMarkTitle?: string;
+    /** 是否在缩略图右上角显示预览图标，点击图标打开大图预览 */
+    showPreviewIcon?: boolean;
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -85,6 +87,8 @@ declare function __VLS_template(): {
         error?(_: {}): any;
         error?(_: {}): any;
         error?(_: {}): any;
+        error?(_: {}): any;
+        error?(_: {}): any;
     };
     refs: {
         viewImgRef: {
@@ -111,6 +115,7 @@ declare function __VLS_template(): {
                 simpleExtraTools: SimpleCustomTool[];
                 renderExtraTools: VNode | null;
                 originalToolbar: OriginalToolbarItem[];
+                previewSideNav: import('..').PreviewSideNav;
                 zoomRate: number;
                 minScale: number;
                 maxScale: number;
@@ -156,6 +161,7 @@ declare function __VLS_template(): {
                 readonly ossLinks?: string[];
                 readonly imgSize?: ImgSizeOptions;
                 readonly previewStripQuery?: boolean;
+                readonly previewSideNav?: import('..').PreviewSideNav;
                 readonly onSwitch?: (index: number) => any;
                 readonly onShow?: (payload: PreviewShowPayload) => any;
                 readonly onClose?: () => any;
@@ -165,7 +171,7 @@ declare function __VLS_template(): {
                     from: string;
                     to: string;
                 }) => any;
-            } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, "backgroundColor" | "scale" | "zIndex" | "infinite" | "lazy" | "teleported" | "loading" | "preview" | "closeOnPressEscape" | "src" | "hideOnClickModal" | "previewSrcList" | "previewTeleported" | "fit" | "defImgPreviewIndex" | "toolbarBgColor" | "toolbarIconColor" | "simpleExtraTools" | "renderExtraTools" | "originalToolbar" | "zoomRate" | "minScale" | "maxScale" | "showProgress" | "initialIndex" | "errorColor" | "errorOffset" | "errorText" | "ossProcess" | "ossLinks" | "imgSize" | "previewStripQuery">;
+            } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, "backgroundColor" | "scale" | "zIndex" | "infinite" | "lazy" | "teleported" | "loading" | "preview" | "closeOnPressEscape" | "src" | "hideOnClickModal" | "previewSrcList" | "previewTeleported" | "fit" | "defImgPreviewIndex" | "toolbarBgColor" | "toolbarIconColor" | "simpleExtraTools" | "renderExtraTools" | "originalToolbar" | "previewSideNav" | "zoomRate" | "minScale" | "maxScale" | "showProgress" | "initialIndex" | "errorColor" | "errorOffset" | "errorText" | "ossProcess" | "ossLinks" | "imgSize" | "previewStripQuery">;
             $attrs: import('vue').Attrs;
             $refs: {
                 [x: string]: unknown;
@@ -214,6 +220,7 @@ declare function __VLS_template(): {
                 ossLinks?: string[];
                 imgSize?: ImgSizeOptions;
                 previewStripQuery?: boolean;
+                previewSideNav?: import('..').PreviewSideNav;
             }> & Readonly<{
                 onSwitch?: (index: number) => any;
                 onShow?: (payload: PreviewShowPayload) => any;
@@ -227,6 +234,7 @@ declare function __VLS_template(): {
             }>, {
                 displaySrc: import('vue').Ref<string, string>;
                 retried: import('vue').Ref<boolean, boolean>;
+                openPreview: () => void;
             }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
                 switch: (index: number) => any;
                 show: (payload: PreviewShowPayload) => any;
@@ -258,6 +266,7 @@ declare function __VLS_template(): {
                 simpleExtraTools: SimpleCustomTool[];
                 renderExtraTools: VNode | null;
                 originalToolbar: OriginalToolbarItem[];
+                previewSideNav: import('..').PreviewSideNav;
                 zoomRate: number;
                 minScale: number;
                 maxScale: number;
@@ -311,6 +320,7 @@ declare function __VLS_template(): {
             simpleExtraTools: SimpleCustomTool[];
             renderExtraTools: VNode | null;
             originalToolbar: OriginalToolbarItem[];
+            previewSideNav: import('..').PreviewSideNav;
             zoomRate: number;
             minScale: number;
             maxScale: number;
@@ -356,6 +366,7 @@ declare function __VLS_template(): {
             ossLinks?: string[];
             imgSize?: ImgSizeOptions;
             previewStripQuery?: boolean;
+            previewSideNav?: import('..').PreviewSideNav;
         }> & Readonly<{
             onSwitch?: (index: number) => any;
             onShow?: (payload: PreviewShowPayload) => any;
@@ -366,9 +377,10 @@ declare function __VLS_template(): {
                 from: string;
                 to: string;
             }) => any;
-        }>, "displaySrc" | "retried" | ("backgroundColor" | "scale" | "zIndex" | "infinite" | "lazy" | "teleported" | "loading" | "preview" | "closeOnPressEscape" | "src" | "hideOnClickModal" | "previewSrcList" | "previewTeleported" | "fit" | "defImgPreviewIndex" | "toolbarBgColor" | "toolbarIconColor" | "simpleExtraTools" | "renderExtraTools" | "originalToolbar" | "zoomRate" | "minScale" | "maxScale" | "showProgress" | "initialIndex" | "errorColor" | "errorOffset" | "errorText" | "ossProcess" | "ossLinks" | "imgSize" | "previewStripQuery")> & {
+        }>, "displaySrc" | "retried" | "openPreview" | ("backgroundColor" | "scale" | "zIndex" | "infinite" | "lazy" | "teleported" | "loading" | "preview" | "closeOnPressEscape" | "src" | "hideOnClickModal" | "previewSrcList" | "previewTeleported" | "fit" | "defImgPreviewIndex" | "toolbarBgColor" | "toolbarIconColor" | "simpleExtraTools" | "renderExtraTools" | "originalToolbar" | "previewSideNav" | "zoomRate" | "minScale" | "maxScale" | "showProgress" | "initialIndex" | "errorColor" | "errorOffset" | "errorText" | "ossProcess" | "ossLinks" | "imgSize" | "previewStripQuery")> & {
             displaySrc: string;
             retried: boolean;
+            openPreview: () => void;
         } & {} & import('vue').ComponentCustomProperties & {} & {
             $slots: {
                 placeholder?(_: {}): any;
@@ -406,6 +418,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
     hoverPopoverProps: Record<string, unknown>;
     isShowWatermark: boolean;
     waterMarkTitle: string;
+    showPreviewIcon: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
     viewImgRef: {
         $: import('vue').ComponentInternalInstance;
@@ -431,6 +444,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
             simpleExtraTools: SimpleCustomTool[];
             renderExtraTools: VNode | null;
             originalToolbar: OriginalToolbarItem[];
+            previewSideNav: import('..').PreviewSideNav;
             zoomRate: number;
             minScale: number;
             maxScale: number;
@@ -476,6 +490,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
             readonly ossLinks?: string[];
             readonly imgSize?: ImgSizeOptions;
             readonly previewStripQuery?: boolean;
+            readonly previewSideNav?: import('..').PreviewSideNav;
             readonly onSwitch?: (index: number) => any;
             readonly onShow?: (payload: PreviewShowPayload) => any;
             readonly onClose?: () => any;
@@ -485,7 +500,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
                 from: string;
                 to: string;
             }) => any;
-        } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, "backgroundColor" | "scale" | "zIndex" | "infinite" | "lazy" | "teleported" | "loading" | "preview" | "closeOnPressEscape" | "src" | "hideOnClickModal" | "previewSrcList" | "previewTeleported" | "fit" | "defImgPreviewIndex" | "toolbarBgColor" | "toolbarIconColor" | "simpleExtraTools" | "renderExtraTools" | "originalToolbar" | "zoomRate" | "minScale" | "maxScale" | "showProgress" | "initialIndex" | "errorColor" | "errorOffset" | "errorText" | "ossProcess" | "ossLinks" | "imgSize" | "previewStripQuery">;
+        } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, "backgroundColor" | "scale" | "zIndex" | "infinite" | "lazy" | "teleported" | "loading" | "preview" | "closeOnPressEscape" | "src" | "hideOnClickModal" | "previewSrcList" | "previewTeleported" | "fit" | "defImgPreviewIndex" | "toolbarBgColor" | "toolbarIconColor" | "simpleExtraTools" | "renderExtraTools" | "originalToolbar" | "previewSideNav" | "zoomRate" | "minScale" | "maxScale" | "showProgress" | "initialIndex" | "errorColor" | "errorOffset" | "errorText" | "ossProcess" | "ossLinks" | "imgSize" | "previewStripQuery">;
         $attrs: import('vue').Attrs;
         $refs: {
             [x: string]: unknown;
@@ -534,6 +549,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
             ossLinks?: string[];
             imgSize?: ImgSizeOptions;
             previewStripQuery?: boolean;
+            previewSideNav?: import('..').PreviewSideNav;
         }> & Readonly<{
             onSwitch?: (index: number) => any;
             onShow?: (payload: PreviewShowPayload) => any;
@@ -547,6 +563,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
         }>, {
             displaySrc: import('vue').Ref<string, string>;
             retried: import('vue').Ref<boolean, boolean>;
+            openPreview: () => void;
         }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
             switch: (index: number) => any;
             show: (payload: PreviewShowPayload) => any;
@@ -578,6 +595,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
             simpleExtraTools: SimpleCustomTool[];
             renderExtraTools: VNode | null;
             originalToolbar: OriginalToolbarItem[];
+            previewSideNav: import('..').PreviewSideNav;
             zoomRate: number;
             minScale: number;
             maxScale: number;
@@ -631,6 +649,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
         simpleExtraTools: SimpleCustomTool[];
         renderExtraTools: VNode | null;
         originalToolbar: OriginalToolbarItem[];
+        previewSideNav: import('..').PreviewSideNav;
         zoomRate: number;
         minScale: number;
         maxScale: number;
@@ -676,6 +695,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
         ossLinks?: string[];
         imgSize?: ImgSizeOptions;
         previewStripQuery?: boolean;
+        previewSideNav?: import('..').PreviewSideNav;
     }> & Readonly<{
         onSwitch?: (index: number) => any;
         onShow?: (payload: PreviewShowPayload) => any;
@@ -686,9 +706,10 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
             from: string;
             to: string;
         }) => any;
-    }>, "displaySrc" | "retried" | ("backgroundColor" | "scale" | "zIndex" | "infinite" | "lazy" | "teleported" | "loading" | "preview" | "closeOnPressEscape" | "src" | "hideOnClickModal" | "previewSrcList" | "previewTeleported" | "fit" | "defImgPreviewIndex" | "toolbarBgColor" | "toolbarIconColor" | "simpleExtraTools" | "renderExtraTools" | "originalToolbar" | "zoomRate" | "minScale" | "maxScale" | "showProgress" | "initialIndex" | "errorColor" | "errorOffset" | "errorText" | "ossProcess" | "ossLinks" | "imgSize" | "previewStripQuery")> & {
+    }>, "displaySrc" | "retried" | "openPreview" | ("backgroundColor" | "scale" | "zIndex" | "infinite" | "lazy" | "teleported" | "loading" | "preview" | "closeOnPressEscape" | "src" | "hideOnClickModal" | "previewSrcList" | "previewTeleported" | "fit" | "defImgPreviewIndex" | "toolbarBgColor" | "toolbarIconColor" | "simpleExtraTools" | "renderExtraTools" | "originalToolbar" | "previewSideNav" | "zoomRate" | "minScale" | "maxScale" | "showProgress" | "initialIndex" | "errorColor" | "errorOffset" | "errorText" | "ossProcess" | "ossLinks" | "imgSize" | "previewStripQuery")> & {
         displaySrc: string;
         retried: boolean;
+        openPreview: () => void;
     } & {} & import('vue').ComponentCustomProperties & {} & {
         $slots: {
             placeholder?(_: {}): any;

package/dist/components/viewImgPopover/index.js

@@ -1,4 +1,4 @@
-import { V } from "../../ViewImgPopover-b9PDEYbP.js";
+import { V } from "../../ViewImgPopover-QblZG0z5.js";
 export {
   V as FgViewImgPopover
 };

package/dist/components/viewImgPreview/ViewImgPreview.vue.d.ts

@@ -1,4 +1,4 @@
-import { OriginalToolbarItem, SimpleCustomTool, PreviewShowPayload } from './types';
+import { OriginalToolbarItem, SimpleCustomTool, PreviewShowPayload, PreviewSideNav } from './types';
 type __VLS_Props = {
     visible?: boolean;
     urlList?: string[];
@@ -18,6 +18,8 @@ type __VLS_Props = {
     simpleExtraTools?: SimpleCustomTool[];
     renderExtraTools?: import('vue').VNode | null;
     originalToolbar?: OriginalToolbarItem[];
+    /** 多图预览两侧箭头：`false` 隐藏；`'prev'` / `'next'` 仅一侧；`'both'` 两侧（默认） */
+    previewSideNav?: PreviewSideNav;
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     switch: (index: number) => any;
@@ -40,6 +42,7 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
     simpleExtraTools: SimpleCustomTool[];
     renderExtraTools: import('vue').VNode | null;
     originalToolbar: OriginalToolbarItem[];
+    previewSideNav: PreviewSideNav;
     zoomRate: number;
     minScale: number;
     maxScale: number;

package/dist/components/viewImgPreview/index.d.ts

@@ -1,3 +1,3 @@
 export { default as FgViewImgPreview } from './ViewImgPreview.vue';
-export type { OriginalToolbarItem, SimpleCustomTool, ToolHandlerParams, ViewImgPreviewProps, ViewImgPreviewViewerOptions, PreviewShowPayload, } from './types';
-export { DEFAULT_ORIGINAL_TOOLBAR, DEFAULT_TOOLBAR_BG_COLOR, DEFAULT_TOOLBAR_ICON_COLOR, DEFAULT_PREVIEW_HIDE_ON_CLICK_MODAL, DEFAULT_PREVIEW_CLOSE_ON_PRESS_ESCAPE, DEFAULT_PREVIEW_TELEPORTED, DEFAULT_PREVIEW_INFINITE, DEFAULT_PREVIEW_ZOOM_RATE, DEFAULT_PREVIEW_SCALE, DEFAULT_PREVIEW_MIN_SCALE, DEFAULT_PREVIEW_MAX_SCALE, DEFAULT_PREVIEW_SHOW_PROGRESS, } from './types';
+export type { OriginalToolbarItem, SimpleCustomTool, ToolHandlerParams, ViewImgPreviewProps, ViewImgPreviewViewerOptions, PreviewShowPayload, PreviewSideNav, ResolvedPreviewSideNav, } from './types';
+export { DEFAULT_ORIGINAL_TOOLBAR, NAV_TOOLBAR_KEYS, resolvePreviewSideNav, shouldShowPreviewSideNav, DEFAULT_PREVIEW_SIDE_NAV, DEFAULT_TOOLBAR_BG_COLOR, DEFAULT_TOOLBAR_ICON_COLOR, DEFAULT_PREVIEW_HIDE_ON_CLICK_MODAL, DEFAULT_PREVIEW_CLOSE_ON_PRESS_ESCAPE, DEFAULT_PREVIEW_TELEPORTED, DEFAULT_PREVIEW_INFINITE, DEFAULT_PREVIEW_ZOOM_RATE, DEFAULT_PREVIEW_SCALE, DEFAULT_PREVIEW_MIN_SCALE, DEFAULT_PREVIEW_MAX_SCALE, DEFAULT_PREVIEW_SHOW_PROGRESS, } from './types';

package/dist/components/viewImgPreview/index.js

@@ -1,5 +1,5 @@
-import { _ } from "../../ViewImgPreview.vue_vue_type_style_index_0_lang-CYuLovBR.js";
-import { D, a, b, c, d, e, f, g, h, i, j, k } from "../../types-BNFeGRer.js";
+import { _ } from "../../ViewImgPreview.vue_vue_type_style_index_0_lang-C2i0p5IK.js";
+import { D, a, b, c, d, e, f, g, h, i, j, k, l, N, r, s } from "../../types-Ccn_sb6f.js";
 export {
   D as DEFAULT_ORIGINAL_TOOLBAR,
   a as DEFAULT_PREVIEW_CLOSE_ON_PRESS_ESCAPE,
@@ -9,9 +9,13 @@ export {
   e as DEFAULT_PREVIEW_MIN_SCALE,
   f as DEFAULT_PREVIEW_SCALE,
   g as DEFAULT_PREVIEW_SHOW_PROGRESS,
-  h as DEFAULT_PREVIEW_TELEPORTED,
-  i as DEFAULT_PREVIEW_ZOOM_RATE,
-  j as DEFAULT_TOOLBAR_BG_COLOR,
-  k as DEFAULT_TOOLBAR_ICON_COLOR,
-  _ as FgViewImgPreview
+  h as DEFAULT_PREVIEW_SIDE_NAV,
+  i as DEFAULT_PREVIEW_TELEPORTED,
+  j as DEFAULT_PREVIEW_ZOOM_RATE,
+  k as DEFAULT_TOOLBAR_BG_COLOR,
+  l as DEFAULT_TOOLBAR_ICON_COLOR,
+  _ as FgViewImgPreview,
+  N as NAV_TOOLBAR_KEYS,
+  r as resolvePreviewSideNav,
+  s as shouldShowPreviewSideNav
 };

package/dist/components/viewImgPreview/types.d.ts

@@ -23,6 +23,19 @@ export interface SimpleCustomTool extends Record<string, unknown> {
     handler: (params: ToolHandlerParams) => void;
 }
 export declare const DEFAULT_ORIGINAL_TOOLBAR: OriginalToolbarItem[];
+/** 左右切换类工具栏项 */
+export declare const NAV_TOOLBAR_KEYS: OriginalToolbarItem[];
+/** 多图预览两侧箭头：`false` 隐藏；`'prev'` / `'next'` 仅一侧；`'both'` 两侧（默认） */
+export type PreviewSideNav = false | "prev" | "next" | "both";
+export declare const DEFAULT_PREVIEW_SIDE_NAV: PreviewSideNav;
+export type ResolvedPreviewSideNav = "none" | "prev" | "next" | "both";
+/**
+ * 解析多图预览两侧箭头的展示方式。
+ * `both` 时与默认行为一致：多图且底部工具栏/自定义工具未全关才展示两侧箭头。
+ */
+export declare function resolvePreviewSideNav(previewSideNav: PreviewSideNav, imageCount: number, toolbar: OriginalToolbarItem[], hasExtraTools?: boolean): ResolvedPreviewSideNav;
+/** @deprecated 使用 resolvePreviewSideNav */
+export declare function shouldShowPreviewSideNav(imageCount: number, toolbar: OriginalToolbarItem[], hasExtraTools?: boolean): boolean;
 /** 预览工具栏默认背景色（与 Element Plus ImageViewer 工具栏一致） */
 export declare const DEFAULT_TOOLBAR_BG_COLOR = "#606266";
 /** 预览工具栏默认图标色 */
@@ -68,6 +81,8 @@ export type ViewImgPreviewProps = ViewImgPreviewViewerOptions & {
     simpleExtraTools?: SimpleCustomTool[];
     renderExtraTools?: VNode | null;
     originalToolbar?: OriginalToolbarItem[];
+    /** 多图预览两侧箭头：`false` 隐藏；`'prev'` / `'next'` 仅一侧；`'both'` 两侧（默认） */
+    previewSideNav?: PreviewSideNav;
 };
 /** 预览层打开时回调参数 */
 export type PreviewShowPayload = {

package/dist/{imgViewerStore-C5n16uYa.js → imgViewerStore-DK3zvGf4.js}

@@ -1,5 +1,5 @@
 import { reactive } from "vue";
-import { D as DEFAULT_ORIGINAL_TOOLBAR, g as DEFAULT_PREVIEW_SHOW_PROGRESS, d as DEFAULT_PREVIEW_MAX_SCALE, e as DEFAULT_PREVIEW_MIN_SCALE, f as DEFAULT_PREVIEW_SCALE, i as DEFAULT_PREVIEW_ZOOM_RATE, h as DEFAULT_PREVIEW_TELEPORTED, a as DEFAULT_PREVIEW_CLOSE_ON_PRESS_ESCAPE, b as DEFAULT_PREVIEW_HIDE_ON_CLICK_MODAL, k as DEFAULT_TOOLBAR_ICON_COLOR, j as DEFAULT_TOOLBAR_BG_COLOR, c as DEFAULT_PREVIEW_INFINITE } from "./types-BNFeGRer.js";
+import { h as DEFAULT_PREVIEW_SIDE_NAV, D as DEFAULT_ORIGINAL_TOOLBAR, g as DEFAULT_PREVIEW_SHOW_PROGRESS, d as DEFAULT_PREVIEW_MAX_SCALE, e as DEFAULT_PREVIEW_MIN_SCALE, f as DEFAULT_PREVIEW_SCALE, j as DEFAULT_PREVIEW_ZOOM_RATE, i as DEFAULT_PREVIEW_TELEPORTED, a as DEFAULT_PREVIEW_CLOSE_ON_PRESS_ESCAPE, b as DEFAULT_PREVIEW_HIDE_ON_CLICK_MODAL, l as DEFAULT_TOOLBAR_ICON_COLOR, k as DEFAULT_TOOLBAR_BG_COLOR, c as DEFAULT_PREVIEW_INFINITE } from "./types-Ccn_sb6f.js";
 const PREVIEW_BASE_Z_INDEX = 2e3;
 function getDialogZindex() {
   const dialogs = Array.from(document.querySelectorAll(".el-overlay"));
@@ -30,6 +30,7 @@ const state = reactive({
   simpleExtraTools: [],
   renderExtraTools: null,
   originalToolbar: [...DEFAULT_ORIGINAL_TOOLBAR],
+  previewSideNav: DEFAULT_PREVIEW_SIDE_NAV,
   onShow: null,
   onClose: null,
   onSwitch: null
@@ -112,6 +113,9 @@ function createImgViewerStore() {
     get originalToolbar() {
       return state.originalToolbar;
     },
+    get previewSideNav() {
+      return state.previewSideNav;
+    },
     /**
      * 显示预览层
      * @param options 配置选项
@@ -157,6 +161,7 @@ function createImgViewerStore() {
         simpleExtraTools = [],
         renderExtraTools = null,
         originalToolbar = [...DEFAULT_ORIGINAL_TOOLBAR],
+        previewSideNav = DEFAULT_PREVIEW_SIDE_NAV,
         onShow,
         onClose,
         onSwitch
@@ -183,6 +188,7 @@ function createImgViewerStore() {
       state.simpleExtraTools = simpleExtraTools;
       state.renderExtraTools = renderExtraTools;
       state.originalToolbar = originalToolbar;
+      state.previewSideNav = previewSideNav;
       state.onShow = onShow != null ? onShow : null;
       state.onClose = onClose != null ? onClose : null;
       state.onSwitch = onSwitch != null ? onSwitch : null;