@yqg/slimfit 0.0.1 → 0.0.2

package/lib/esm/image/style.less

@@ -0,0 +1,453 @@
+/* SlimFit Image 组件样式 - 基于 Figma 设计规范 */
+@import '../style/index.css';
+
+// 主题 Token 映射
+@color-overlay-dark: var(--ant-color-bg-mask);
+@color-overlay-light: var(--ant-color-fill-tertiary);
+@color-overlay-lighter: var(--ant-color-fill-quaternary);
+@color-overlay-lightest: color-mix(
+  in srgb,
+  var(--ant-color-fill-quaternary) 60%,
+  transparent
+);
+@color-overlay-strong: var(--ant-color-bg-mask);
+
+@color-border-default: var(--ant-color-border);
+@color-bg-elevated: var(--ant-color-bg-elevated);
+@color-text-primary: var(--ant-color-text);
+@color-text-secondary: var(--ant-color-text-secondary);
+@color-text-light: var(--ant-color-text-light-solid);
+@color-white-90: color-mix(in srgb, #ffffff 90%, transparent);
+
+@shadow-popup: var(--ant-box-shadow-tertiary);
+@shadow-elevated: var(--ant-box-shadow-secondary);
+@shadow-focus: 0 0 0 2px
+  color-mix(in srgb, var(--ant-color-primary) 20%, transparent);
+
+.ant-image,
+.ant-image .ant-image-img,
+.ant-image .ant-image-mask,
+.slimfit-image,
+.slimfit-image .ant-image-img,
+.slimfit-image .ant-image-mask {
+  border-radius: var(--ant-border-radius-sm);
+}
+
+.slimfit-image {
+  border-radius: var(--ant-border-radius-sm);
+  overflow: hidden;
+  position: relative;
+  display: inline-block;
+
+  .ant-image-img {
+    border-radius: var(--ant-border-radius-sm);
+    display: block;
+    transition: filter 0.5s cubic-bezier(0.4, 0, 0.2, 1),
+      opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
+      transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+}
+
+/* 自定义预览蒙层 */
+.slimfit-image-mask {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  .anticon {
+    font-size: 16px;
+  }
+}
+
+/* 预览弹窗样式 */
+.ant-image-preview-wrap {
+  overflow: hidden;
+
+  /* 预览图片 */
+  .ant-image-preview-img {
+    position: relative;
+    border-radius: 4px;
+    box-shadow: @shadow-popup;
+  }
+
+  /* 切换按钮 */
+  .ant-image-preview-switch-left,
+  .ant-image-preview-switch-right {
+    color: @color-white-90;
+    background: var(--color-fill-400);
+    border-radius: 999px;
+    width: 40px;
+    height: 40px;
+    padding: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+    cursor: pointer;
+    backdrop-filter: blur(8px);
+  }
+}
+
+/* 图片位置指示器 (1/5) */
+.slimfit-preview-image-position {
+  position: absolute;
+  top: 106px; /* 缩略图查看器下方 */
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 5px 12px;
+  background: var(--color-fill-500);
+  border-radius: 2px;
+  font-size: 14px;
+  font-weight: 400;
+  color: @color-text-light;
+  pointer-events: none;
+  z-index: 1099;
+}
+
+/* 缩略图列表外层容器 - 白色背景 + 折叠功能 */
+.ant-image-preview-wrap .slimfit-gallery-thumbnails-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  transform: none; /* 不需要居中变换 */
+  width: 100%; /* 占满整个宽度 */
+  background: @color-bg-elevated;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 1080;
+  overflow: visible; /* 改为 visible，让按钮可以露出来 */
+}
+
+/* 展开状态 */
+.ant-image-preview-wrap .slimfit-gallery-thumbnails-container.expanded {
+  height: 64px;
+}
+
+/* 折叠状态 */
+.ant-image-preview-wrap .slimfit-gallery-thumbnails-container.collapsed {
+  height: 20px;
+}
+
+.ant-image-preview-wrap
+  .slimfit-gallery-thumbnails-container.collapsed
+  .slimfit-gallery-thumbnails-portal {
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* 折叠/展开按钮 - 位于容器底部中央 */
+.ant-image-preview-wrap .slimfit-thumbnail-toggle-btn {
+  position: absolute;
+  bottom: -12px; /* 向下移动，完全露出按钮 */
+  left: 50%;
+  width: 20px;
+  height: 20px;
+  padding: 2px;
+  background: @color-bg-elevated;
+  border: 0.5px solid @color-border-default;
+  border-radius: 999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 包含旋转动画的过渡 */
+  z-index: 1082;
+  color: @color-text-secondary;
+  outline: none;
+  transform: translateX(-50%) rotate(0deg);
+}
+
+.ant-image-preview-wrap .slimfit-thumbnail-toggle-btn.collapsed {
+  transform: translateX(-50%) rotate(180deg);
+}
+
+.slimfit-thumbnail-toggle-icon {
+  font-size: 12px;
+  color: @color-text-secondary;
+  transition: transform 0.3s ease;
+}
+
+.ant-image-preview-wrap .slimfit-thumbnail-toggle-btn:focus-visible {
+  border-color: var(--color-fi-600);
+  box-shadow: @shadow-focus;
+}
+
+/* 缩略图列表容器 - 内层滚动区域 */
+
+.ant-image-preview-wrap .slimfit-gallery-thumbnails-portal {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ant-padding-xs);
+  padding: 12px 60px;
+  width: 100%;
+  height: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-behavior: smooth;
+  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  box-sizing: border-box; /* 确保 padding 不会增加宽度 */
+  -ms-overflow-style: none; /* IE 和 Edge 隐藏滚动条 */
+  scrollbar-width: none; /* Firefox 隐藏滚动条 */
+}
+
+/* 单个缩略图 */
+.ant-image-preview-wrap .slimfit-gallery-thumbnail {
+  flex-shrink: 0;
+  width: 71.11px;
+  height: 40px;
+  border-radius: 2px;
+  overflow: hidden;
+  cursor: pointer;
+  border: 1px solid @color-border-default;
+  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  background: @color-bg-elevated;
+  position: relative;
+}
+
+.ant-image-preview-wrap .slimfit-gallery-thumbnail img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.ant-image-preview-wrap .slimfit-gallery-thumbnail:hover {
+  border-color: var(--color-fi-600);
+}
+
+/* 当前选中的缩略图 */
+.ant-image-preview-wrap .slimfit-gallery-thumbnail.active {
+  border-color: var(--color-fi-600);
+  border-width: 1.9px;
+}
+
+/* 图片遮罩图标 */
+.slimfit-eye-icon {
+  font-size: 18px;
+}
+
+/* FormMode 只读模式 */
+.slimfit-image[readonly] {
+  pointer-events: none;
+
+  .ant-image-mask {
+    display: none;
+  }
+
+  &:hover .ant-image-img {
+    transform: none;
+  }
+}
+
+/* 工具栏 */
+.ant-image-preview-operations {
+  background: @color-bg-elevated;
+  box-shadow: @shadow-popup;
+  border-radius: 4px;
+  padding: 4px var(--ant-padding-xs);
+  display: flex;
+  align-items: center;
+
+  .ant-image-preview-operations-operation {
+    color: var(--color-neutral-800);
+    width: 32px;
+    height: 32px;
+    border-radius: 2px;
+    transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+    &:hover:not(:disabled) {
+      background: var(--color-fill-300);
+
+      .anticon {
+        color: @color-text-primary;
+      }
+    }
+    .anticon {
+      font-size: 18px;
+    }
+  }
+
+  /* 缩放比例显示 */
+  .ant-image-preview-operations-progress {
+    min-width: 52px;
+    text-align: center;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.5714285714285714;
+    color: @color-text-primary;
+    user-select: none;
+  }
+}
+
+/* 关闭按钮 */
+.ant-image-preview-close {
+  color: @color-text-light;
+  background: var(--color-fill-400);
+  border-radius: 999px;
+  width: 40px;
+  height: 40px;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  top: 84px;
+}
+
+/* 相册封面卡片样式（由组件内部渲染） */
+.slimfit-album-cover {
+  position: relative;
+  display: inline-flex;
+  border-radius: var(--ant-border-radius-sm);
+  overflow: hidden;
+  box-shadow: 0 12px 32px
+    color-mix(in srgb, @color-overlay-strong 24%, transparent);
+  background: @color-bg-elevated;
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 16px;
+    right: 16px;
+    bottom: -10px;
+    height: 12px;
+    border-radius: 999px;
+    background: color-mix(in srgb, @color-overlay-strong 16%, transparent);
+    filter: blur(12px);
+    pointer-events: none;
+  }
+}
+
+.slimfit-album-cover-image {
+  display: block;
+  cursor: pointer;
+
+  .ant-image,
+  .ant-image-img,
+  .ant-image-mask {
+    border-radius: var(--ant-border-radius-sm);
+  }
+}
+
+.slimfit-album-cover-info {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 20px 20px 18px 20px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, #000 0%, transparent) 0%,
+    @color-overlay-strong 100%
+  );
+  color: @color-text-light;
+  pointer-events: none;
+}
+
+.slimfit-album-cover-title {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  letter-spacing: 0.2px;
+  flex: 1;
+  text-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
+}
+
+/* 窗口图片查看器（组件内部渲染） */
+.slimfit-image-dialog {
+  .ant-modal-content {
+    background: @color-bg-elevated;
+    border: 0.5px solid @color-overlay-lighter;
+    border-radius: 4px;
+    box-shadow: @shadow-popup;
+    padding: 0;
+  }
+
+  .ant-modal-header {
+    background: var(--color-fill-200);
+    border-bottom: none;
+    padding: 9px 16px;
+    margin: 0;
+    text-align: center;
+  }
+
+  .ant-modal-close {
+    top: 4px;
+    right: 8px;
+    width: 32px;
+    height: 32px;
+  }
+
+  .ant-modal-body {
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    height: 420px;
+  }
+
+  .ant-modal-title {
+    font-weight: 400;
+  }
+
+  .ant-modal-close-x {
+    color: var(--color-neutral-800);
+  }
+}
+
+.slimfit-image-dialog-viewer {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background: @color-bg-elevated;
+}
+
+.slimfit-image-dialog-img {
+  max-width: 100%;
+  max-height: 100%;
+  transition: transform 0.3s ease;
+  padding-top: var(--ant-padding-xl);
+}
+
+.slimfit-image-dialog-toolbar {
+  display: flex;
+  gap: 2px;
+  justify-content: center;
+  align-items: center;
+  padding: var(--ant-padding-xl) 0 var(--ant-padding-xs) 0;
+  background: @color-bg-elevated;
+  border-top: 0.5px solid @color-overlay-lighter;
+  border-radius: 0 0 4px 4px;
+}
+
+.slimfit-image-dialog-toolbar-btn {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: 2px;
+  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  color: @color-text-secondary;
+
+  &:hover {
+    background: var(--color-fill-300);
+    color: @color-text-primary;
+  }
+}
+
+.slimfit-image-dialog-toolbar-icon {
+  font-size: 18px;
+  color: var(--color-neutral-800);
+}

package/lib/esm/image/thumbnail-list.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { ImagePreviewGroupProps } from './types';
+export interface ThumbnailListProps {
+    items: ImagePreviewGroupProps['items'];
+    currentIndex: number;
+    onIndexChange: (index: number) => void;
+    previewVisible: boolean;
+    groupId: string;
+}
+declare const ThumbnailList: React.NamedExoticComponent<ThumbnailListProps>;
+export default ThumbnailList;

package/lib/esm/image/thumbnail-list.js

@@ -0,0 +1,114 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import classNames from 'classnames';
+import React, { useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { IconExpand2 } from "../icon";
+import { getPreviewItemProps } from "./previewUtils";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var ThumbnailItem = /*#__PURE__*/React.memo(function (_ref) {
+  var src = _ref.src,
+    alt = _ref.alt,
+    index = _ref.index,
+    isActive = _ref.isActive,
+    onIndexChange = _ref.onIndexChange;
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames('slimfit-gallery-thumbnail', {
+      active: isActive
+    }),
+    onClick: function onClick() {
+      return onIndexChange(index);
+    },
+    role: "button",
+    tabIndex: 0,
+    children: /*#__PURE__*/_jsx("img", {
+      src: src,
+      alt: alt
+    })
+  });
+});
+ThumbnailItem.displayName = 'ThumbnailItem';
+var getContainer = function getContainer(groupId) {
+  var wrap = document.querySelector(".ant-image-preview-wrap[data-preview-group=\"".concat(groupId, "\"]"));
+  if (!wrap) return null;
+  var computedStyle = window.getComputedStyle(wrap);
+  var isVisible = computedStyle.display !== 'none' && computedStyle.visibility !== 'hidden' && parseFloat(computedStyle.opacity) > 0;
+  return isVisible ? wrap : null;
+};
+var ThumbnailList = /*#__PURE__*/React.memo(function (_ref2) {
+  var items = _ref2.items,
+    currentIndex = _ref2.currentIndex,
+    onIndexChange = _ref2.onIndexChange,
+    previewVisible = _ref2.previewVisible,
+    groupId = _ref2.groupId;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    container = _useState2[0],
+    setContainer = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isCollapsed = _useState4[0],
+    setIsCollapsed = _useState4[1];
+  useEffect(function () {
+    if (!previewVisible) {
+      setContainer(null);
+      setIsCollapsed(false);
+      return;
+    }
+
+    // 尝试立即获取容器
+    var immediateContainer = getContainer(groupId);
+    if (immediateContainer) {
+      setContainer(immediateContainer);
+      return;
+    }
+    var checkInterval = setInterval(function () {
+      var nextContainer = getContainer(groupId);
+      if (nextContainer) {
+        setContainer(nextContainer);
+        clearInterval(checkInterval);
+      }
+    }, 16);
+    var timeout = setTimeout(function () {
+      clearInterval(checkInterval);
+    }, 200);
+    return function () {
+      clearInterval(checkInterval);
+      clearTimeout(timeout);
+    };
+  }, [previewVisible, groupId]);
+  if (!container || !items || !items.length) return null;
+  return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/_jsxs("div", {
+    className: classNames('slimfit-gallery-thumbnails-container', {
+      collapsed: isCollapsed,
+      expanded: !isCollapsed
+    }),
+    children: [/*#__PURE__*/_jsx("button", {
+      className: classNames('slimfit-thumbnail-toggle-btn', {
+        collapsed: isCollapsed
+      }),
+      onClick: function onClick() {
+        return setIsCollapsed(!isCollapsed);
+      },
+      children: /*#__PURE__*/_jsx(IconExpand2, {
+        className: "slimfit-thumbnail-toggle-icon"
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      className: "slimfit-gallery-thumbnails-portal",
+      children: items.map(function (item, index) {
+        var _getPreviewItemProps = getPreviewItemProps(item),
+          src = _getPreviewItemProps.src,
+          alt = _getPreviewItemProps.alt;
+        return /*#__PURE__*/_jsx(ThumbnailItem, {
+          src: src,
+          alt: alt,
+          index: index,
+          isActive: index === currentIndex,
+          onIndexChange: onIndexChange
+        }, "thumb-".concat(index, "-").concat(src));
+      })
+    })]
+  }), container);
+});
+ThumbnailList.displayName = 'ThumbnailList';
+export default ThumbnailList;

package/lib/esm/image/types.d.ts

@@ -0,0 +1,36 @@
+import type { Image as AntdImage, ModalProps } from 'antd';
+import type { ComponentProps, ReactNode } from 'react';
+import type { ImageProps } from './image-base';
+export type { ImageProps } from './image-base';
+export interface AlbumCoverConfig {
+    title?: ReactNode;
+    cover?: Partial<ImageProps>;
+}
+export interface DialogToolbarOptions {
+    flip?: boolean;
+    rotate?: boolean;
+    zoom?: boolean;
+    download?: boolean;
+}
+export interface DialogViewerProps {
+    image: {
+        src: string;
+        alt?: string;
+        title?: ReactNode;
+    };
+    thumbnail?: Partial<ImageProps>;
+    modalProps?: Omit<ModalProps, 'open' | 'footer' | 'children'>;
+    toolbar?: DialogToolbarOptions;
+    onDownload?: (src: string) => void;
+}
+export type ImagePreviewGroupProps = ComponentProps<typeof AntdImage.PreviewGroup> & {
+    album?: AlbumCoverConfig;
+};
+type BasePreviewItem = NonNullable<ComponentProps<typeof AntdImage.PreviewGroup>['items']>[number];
+export interface PreviewItemWithTitle extends Record<string, unknown> {
+    src?: string;
+    alt?: string;
+    title?: ReactNode;
+    previewTitle?: ReactNode;
+}
+export type PreviewItem = BasePreviewItem | PreviewItemWithTitle;

package/lib/esm/image/types.js

@@ -0,0 +1 @@
+export {};

package/lib/esm/index.d.ts

@@ -0,0 +1,35 @@
+export * from './breadcrumb';
+export * from './button';
+export * from './calendar';
+export * from './cascader';
+export * from './checkbox';
+export * from './config-provider';
+export * from './date-picker';
+export * from './descriptions';
+export * from './drawer';
+export * from './form';
+export * from './form-mode';
+export * from './hooks';
+export * from './icon/component';
+export * from './image';
+export * from './input';
+export * from './locale';
+export * from './menu';
+export * from './message';
+export * from './pagination';
+export * from './popconfirm';
+export * from './popover';
+export * from './radio';
+export * from './select';
+export * from './spin';
+export * from './switch';
+export * from './table';
+export * from './tabs';
+export * from './tag';
+export * from './time-picker';
+export * from './tooltip';
+export * from './tree';
+export * from './tree-select';
+export * from './typography';
+export * from './upload';
+export * from './themes';

package/lib/esm/index.js

@@ -0,0 +1,36 @@
+// 此文件由脚本自动生成，请勿手动修改
+export * from "./breadcrumb";
+export * from "./button";
+export * from "./calendar";
+export * from "./cascader";
+export * from "./checkbox";
+export * from "./config-provider";
+export * from "./date-picker";
+export * from "./descriptions";
+export * from "./drawer";
+export * from "./form";
+export * from "./form-mode";
+export * from "./hooks";
+export * from "./icon/component";
+export * from "./image";
+export * from "./input";
+export * from "./locale";
+export * from "./menu";
+export * from "./message";
+export * from "./pagination";
+export * from "./popconfirm";
+export * from "./popover";
+export * from "./radio";
+export * from "./select";
+export * from "./spin";
+export * from "./switch";
+export * from "./table";
+export * from "./tabs";
+export * from "./tag";
+export * from "./time-picker";
+export * from "./tooltip";
+export * from "./tree";
+export * from "./tree-select";
+export * from "./typography";
+export * from "./upload";
+export * from "./themes";

package/lib/esm/input/assets/textarea-resize-icon-disabled.svg

@@ -0,0 +1,5 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 4V2H10V4H8V6H6V8H4V10H2V12H4V10H6V8H8V6H10V4H12Z" fill="#A5A5BD"/>
+<path d="M12 8V10H10V8H12Z" fill="#A5A5BD"/>
+<path d="M10 10V12H8V10H10Z" fill="#A5A5BD"/>
+</svg>

package/lib/esm/input/assets/textarea-resize-icon.svg

@@ -0,0 +1,5 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 4V2H10V4H8V6H6V8H4V10H2V12H4V10H6V8H8V6H10V4H12Z" fill="#3F405A"/>
+<path d="M12 8V10H10V8H12Z" fill="#3F405A"/>
+<path d="M10 10V12H8V10H10Z" fill="#3F405A"/>
+</svg>

package/lib/esm/input/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Input } from './input';
+export type { InputProps } from './input';

package/lib/esm/input/index.js

@@ -0,0 +1 @@
+export { default as Input } from "./input";