bkui-vue 3.0.4 → 3.0.6

package/lib/image/image.css

@@ -1,179 +1,269 @@
-.bk-image-viewer-wrapper {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  background: rgba(0, 0, 0, 0.6);
-  flex-direction: column;
+/* ===== Image 缩略图卡片 ===== */
+.bk-image {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  vertical-align: top;
+  border-radius: 2px;
 }
-.bk-image-viewer-mask {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+.bk-image-error {
+  background: #f5f7fa;
+  border: 1px solid #eaebf0;
 }
-.bk-image-viewer-header {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 9;
+.bk-image-inner {
+  display: block;
+}
+.bk-image-error-content {
   display: flex;
+  align-items: center;
+  justify-content: center;
   width: 100%;
-  height: 52px;
+  height: 100%;
+  font-size: 32px;
+}
+.bk-image-error-icon {
+  width: 24px;
+  height: 24px;
   color: #c4c6cc;
-  background: rgba(0, 0, 0, 0.7);
-  justify-content: space-between;
+}
+.bk-image-error-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: flex;
+  gap: 4px;
   align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: #fff;
+  cursor: pointer;
+  background: rgba(0, 0, 0, 0.6);
+  opacity: 0;
+  transition: opacity 0.2s;
 }
-.bk-image-viewer-header > div {
-  padding: 0 25px;
-  overflow: hidden;
-  font-size: 14px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
+.bk-image-reload-icon {
+  width: 16px;
+  height: 16px;
 }
-.bk-image-viewer-header .quit-box {
+.bk-image-preview-cursor {
+  cursor: zoom-in;
+}
+.bk-image:hover .bk-image-error-overlay {
+  opacity: 1;
+}
+/* ===== ImagePreviewGroup ===== */
+.bk-image-preview-group {
+  display: contents;
+}
+/* ===== ImagePreview 大图浮层 ===== */
+.bk-image-preview {
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
   display: flex;
   align-items: center;
-  justify-content: flex-end;
-}
-.bk-image-viewer-header .quit-tips {
-  font-size: 14px;
-  color: #979ba5;
+  justify-content: center;
+  user-select: none;
+  background: rgba(0, 0, 0, 0.6);
 }
-.bk-image-viewer-btn {
+.bk-image-preview-close {
   position: absolute;
-  z-index: 1;
+  top: 24px;
+  right: 24px;
+  z-index: 2;
   display: flex;
-  color: #dcdee5;
-  background-color: rgba(0, 0, 0, 0.3);
-  border-radius: 50%;
-  opacity: 0.8;
-  box-sizing: border-box;
-  user-select: none;
   align-items: center;
   justify-content: center;
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 50%;
+  transition: background 0.2s;
 }
-.bk-image-viewer-btn:hover {
+.bk-image-preview-close:hover {
+  background: rgba(0, 0, 0, 0.3);
+}
+.bk-image-preview-close-icon {
+  width: 20px;
+  height: 20px;
   color: #fff;
-  background-color: rgba(0, 0, 0, 0.4);
 }
-.bk-image-viewer-close {
-  height: 52px;
-  font-size: 32px;
-  line-height: 48px;
-  color: #c4c6cc;
-  text-align: center;
+.bk-image-preview-arrow {
+  position: absolute;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
   cursor: pointer;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 50%;
+  transition: background 0.2s;
+}
+.bk-image-preview-arrow:hover {
+  background: rgba(0, 0, 0, 0.3);
+}
+.bk-image-preview-arrow-left {
+  left: 64px;
 }
-.bk-image-viewer-close:hover {
+.bk-image-preview-arrow-right {
+  right: 64px;
+}
+.bk-image-preview-arrow-icon {
+  width: 24px;
+  height: 24px;
   color: #fff;
 }
-.bk-image-viewer-canvas {
+.bk-image-preview-body {
+  position: relative;
   display: flex;
+  align-items: center;
+  justify-content: center;
   width: 100%;
   height: 100%;
+  overflow: hidden;
+}
+.bk-image-preview-img {
+  max-width: 80%;
+  max-height: 80%;
+  object-fit: contain;
+  transform-origin: center center;
+}
+.bk-image-preview-img--blur {
+  filter: blur(10px);
+  opacity: 0.6;
+}
+.bk-image-preview-loading {
+  position: absolute;
+  display: flex;
+  align-items: center;
   justify-content: center;
+}
+.bk-image-preview-error {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
   align-items: center;
+  justify-content: center;
 }
-.bk-image-viewer-has-header {
-  padding-top: 52px;
+.bk-image-preview-error-icon {
+  width: 96px;
+  height: 86px;
+  color: #979ba5;
 }
-.bk-image-viewer-error {
+.bk-image-preview-error-text {
+  margin: 0;
   font-size: 14px;
-  color: #313238;
-  text-align: center;
-}
-.bk-image-viewer-error .bk-icon {
-  margin-bottom: 15px;
-  font-size: 85px;
-  line-height: 1;
+  line-height: 22px;
+  color: #979ba5;
 }
-.bk-image-viewer-actions {
-  bottom: 30px;
+/* ===== Toolbar ===== */
+.bk-image-preview-toolbar {
+  position: absolute;
+  bottom: 48px;
   left: 50%;
-  width: 282px;
-  height: 44px;
-  padding: 0 23px;
-  background-color: rgba(0, 0, 0, 0.4);
-  border-color: #fff;
-  border-radius: 22px;
+  z-index: 2;
   transform: translateX(-50%);
 }
-.bk-image-viewer-actions:hover {
+.bk-image-preview-toolbar-inner {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  height: 36px;
+  padding: 0 12px;
   background: rgba(0, 0, 0, 0.5);
+  border-radius: 18px;
 }
-.bk-image-viewer-actions-inner {
+.bk-image-preview-toolbar-btn {
+  position: relative;
   display: flex;
-  width: 100%;
-  height: 100%;
-  font-size: 23px;
-  color: #c4c6cc;
-  text-align: justify;
   align-items: center;
-  justify-content: space-around;
-}
-.bk-image-viewer-actions-inner .bk-icon {
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  font-size: 16px;
+  color: #dcdee5;
   cursor: pointer;
+  border-radius: 2px;
+  transition: color 0.2s, background 0.2s;
 }
-.bk-image-viewer-actions-inner .bk-icon:hover {
+.bk-image-preview-toolbar-btn:hover {
   color: #fff;
+  background: rgba(255, 255, 255, 0.2);
 }
-.bk-image-viewer-next,
-.bk-image-viewer-prev {
-  top: 50%;
-  width: 80px;
-  height: 80px;
-  font-size: 40px;
-  cursor: pointer;
+.bk-image-preview-toolbar-btn[data-tooltip]::before,
+.bk-image-preview-toolbar-btn[data-tooltip]::after {
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.2s;
 }
-.bk-image-viewer-prev {
-  left: 40px;
-  transform: translateY(-50%);
+.bk-image-preview-toolbar-btn[data-tooltip]::before {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  padding: 4px 8px;
+  font-size: 12px;
+  line-height: 16px;
+  color: #fff;
+  white-space: nowrap;
+  content: attr(data-tooltip);
+  background: #4d4f56;
+  border-radius: 2px;
+  transform: translateX(-50%);
 }
-.bk-image-viewer-next {
-  right: 40px;
-  text-indent: 2px;
-  transform: translateY(-50%);
+.bk-image-preview-toolbar-btn[data-tooltip]::after {
+  position: absolute;
+  bottom: calc(100% + 4px);
+  left: 50%;
+  content: '';
+  border-color: #4d4f56 transparent transparent;
+  border-style: solid;
+  border-width: 4px;
+  transform: translateX(-50%);
 }
-.bk-image {
-  position: relative;
-  display: inline-block;
-  overflow: hidden;
+.bk-image-preview-toolbar-btn[data-tooltip]:hover::before,
+.bk-image-preview-toolbar-btn[data-tooltip]:hover::after {
+  opacity: 1;
 }
-.bk-image-inner {
-  width: 100%;
-  height: 100%;
-  vertical-align: top;
+.bk-image-preview-toolbar-pages {
+  padding: 0 8px;
+  font-size: 12px;
+  line-height: 28px;
+  color: #dcdee5;
+  white-space: nowrap;
 }
-.bk-image-inner-center {
-  position: relative;
-  top: 50%;
-  left: 50%;
-  display: block;
-  transform: translate(-50%, -50%);
+.bk-image-preview-toolbar-divider {
+  width: 1px;
+  height: 16px;
+  margin: 0 4px;
+  background: rgba(255, 255, 255, 0.2);
 }
-.bk-image-placeholder {
-  position: absolute;
-  top: 0;
-  left: 0;
+.bk-image-preview-toolbar-info {
   display: flex;
-  width: 100%;
-  height: 100%;
-  font-size: 24px;
-  color: #c4c6cc;
-  vertical-align: middle;
-  background: #f0f1f5;
-  justify-content: center;
+  gap: 4px;
   align-items: center;
+  font-size: 12px;
+  color: #dcdee5;
+  white-space: nowrap;
 }
-.bk-image-placeholder img {
-  width: 100%;
+.bk-image-preview-toolbar-info-icon {
+  width: 14px;
+  height: 14px;
 }
-.bk-image-preview {
-  cursor: pointer;
+.bk-image-preview-toolbar-info-dot {
+  width: 4px;
+  height: 4px;
+  background: #dcdee5;
+  border-radius: 50%;
+}
+/* ===== Transition ===== */
+.bk-image-preview-fade-enter-active,
+.bk-image-preview-fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+.bk-image-preview-fade-enter-from,
+.bk-image-preview-fade-leave-to {
+  opacity: 0;
 }

package/lib/image/image.d.ts

@@ -0,0 +1,99 @@
+import type { ImageItem } from './types';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    src: import("vue-types").VueTypeValidableDef<string, import("vue-types/dist/shared/vue-types.d8e57a80").b<string>> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    alt: import("vue-types").VueTypeValidableDef<string, import("vue-types/dist/shared/vue-types.d8e57a80").b<string>> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    width: import("vue-types").VueTypeDef<string | number>;
+    height: import("vue-types").VueTypeDef<string | number>;
+    fit: {
+        type: import("vue").PropType<"contain" | "cover" | "fill" | "none" | "scale-down">;
+        default: string;
+    };
+    lazy: import("vue-types").VueTypeValidableDef<boolean, import("vue-types/dist/shared/vue-types.d8e57a80").b<boolean>> & {
+        default: boolean;
+    };
+    preview: import("vue-types").VueTypeValidableDef<boolean, import("vue-types/dist/shared/vue-types.d8e57a80").b<boolean>> & {
+        default: boolean;
+    };
+    showInfo: import("vue-types").VueTypeValidableDef<boolean, import("vue-types/dist/shared/vue-types.d8e57a80").b<boolean>> & {
+        default: boolean;
+    };
+    onDownload: {
+        type: import("vue").PropType<(url: string, item: ImageItem) => void>;
+        default: any;
+    };
+    previewProps: {
+        type: import("vue").PropType<import("./types").ImagePreviewMeta>;
+        default: any;
+    };
+    extCls: import("vue-types").VueTypeValidableDef<string, import("vue-types/dist/shared/vue-types.d8e57a80").b<string>> & {
+        default: string;
+    } & {
+        default: string;
+    };
+}>, () => JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    load: (e: Event) => boolean;
+    error: (e: Event) => boolean;
+    preview: () => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    src: import("vue-types").VueTypeValidableDef<string, import("vue-types/dist/shared/vue-types.d8e57a80").b<string>> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    alt: import("vue-types").VueTypeValidableDef<string, import("vue-types/dist/shared/vue-types.d8e57a80").b<string>> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    width: import("vue-types").VueTypeDef<string | number>;
+    height: import("vue-types").VueTypeDef<string | number>;
+    fit: {
+        type: import("vue").PropType<"contain" | "cover" | "fill" | "none" | "scale-down">;
+        default: string;
+    };
+    lazy: import("vue-types").VueTypeValidableDef<boolean, import("vue-types/dist/shared/vue-types.d8e57a80").b<boolean>> & {
+        default: boolean;
+    };
+    preview: import("vue-types").VueTypeValidableDef<boolean, import("vue-types/dist/shared/vue-types.d8e57a80").b<boolean>> & {
+        default: boolean;
+    };
+    showInfo: import("vue-types").VueTypeValidableDef<boolean, import("vue-types/dist/shared/vue-types.d8e57a80").b<boolean>> & {
+        default: boolean;
+    };
+    onDownload: {
+        type: import("vue").PropType<(url: string, item: ImageItem) => void>;
+        default: any;
+    };
+    previewProps: {
+        type: import("vue").PropType<import("./types").ImagePreviewMeta>;
+        default: any;
+    };
+    extCls: import("vue-types").VueTypeValidableDef<string, import("vue-types/dist/shared/vue-types.d8e57a80").b<string>> & {
+        default: string;
+    } & {
+        default: string;
+    };
+}>> & Readonly<{
+    onError?: (e: Event) => any;
+    onLoad?: (e: Event) => any;
+    onPreview?: () => any;
+}>, {
+    extCls: string;
+    showInfo: boolean;
+    onDownload: (url: string, item: ImageItem) => void;
+    preview: boolean;
+    src: string;
+    alt: string;
+    fit: "fill" | "none" | "contain" | "cover" | "scale-down";
+    lazy: boolean;
+    previewProps: import("./types").ImagePreviewMeta;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;