@yqg/slimfit 0.0.1 → 0.0.2

package/lib/esm/menu/menu.js

@@ -0,0 +1,27 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className"];
+import { Menu as AntdMenu } from 'antd';
+import classnames from 'classnames';
+import React from 'react';
+import { useInline } from "./hooks";
+import "./style.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+var Menu = function Menu(props) {
+  var className = props.className,
+    antdProps = _objectWithoutProperties(props, _excluded);
+  var _useInline = useInline(antdProps),
+    inlineClassName = _useInline.inlineClassName,
+    inlineTriggerSubMenuAction = _useInline.inlineTriggerSubMenuAction,
+    inlineExpandIcon = _useInline.inlineExpandIcon,
+    inlineItems = _useInline.inlineItems,
+    inlineSelectedKeys = _useInline.inlineSelectedKeys;
+  return /*#__PURE__*/_jsx(AntdMenu, _objectSpread(_objectSpread({}, antdProps), {}, {
+    selectedKeys: inlineSelectedKeys,
+    triggerSubMenuAction: inlineTriggerSubMenuAction,
+    items: inlineItems,
+    expandIcon: inlineExpandIcon,
+    className: classnames(className, 'slimfit-menu', inlineClassName && inlineClassName)
+  }));
+};
+export default Menu;

package/lib/esm/menu/slide-menu.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './slide-menu.less';
+import type { SlideMenuProps } from './typings';
+export declare const SlideMenu: React.FC<SlideMenuProps>;
+export default SlideMenu;

package/lib/esm/menu/slide-menu.js

@@ -0,0 +1,75 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { Button } from "../button";
+import { IconMenuCollapse, IconMenuExpand } from "../icon";
+import { Popover } from 'antd';
+import classnames from 'classnames';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocale } from "../hooks";
+import Menu from "./menu";
+import "./slide-menu.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var SlideMenu = function SlideMenu(props) {
+  var _menuProps$inlineColl;
+  var _props$width = props.width,
+    width = _props$width === void 0 ? function (inlineCollapsed) {
+      return inlineCollapsed ? 60 : 256;
+    } : _props$width;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var $t = function $t(key) {
+    return t("SlideMenu.".concat(key));
+  };
+  useLocale();
+  var className = props.className,
+    menuProps = props.menuProps;
+  var _useState = useState((_menuProps$inlineColl = menuProps === null || menuProps === void 0 ? void 0 : menuProps.inlineCollapsed) !== null && _menuProps$inlineColl !== void 0 ? _menuProps$inlineColl : false),
+    _useState2 = _slicedToArray(_useState, 2),
+    inlineCollapsed = _useState2[0],
+    setInlineCollapsed = _useState2[1];
+  var handleInlineCollapsedChange = function handleInlineCollapsedChange(collapsed) {
+    setInlineCollapsed(collapsed);
+  };
+  var menuIcon = inlineCollapsed ? /*#__PURE__*/_jsx(IconMenuExpand, {
+    style: {
+      fontSize: 20
+    }
+  }) : /*#__PURE__*/_jsx(IconMenuCollapse, {
+    style: {
+      fontSize: 20
+    }
+  });
+  var popoverContent = inlineCollapsed ? $t('expand') : $t('collapse');
+  return /*#__PURE__*/_jsxs("div", {
+    style: {
+      width: width(inlineCollapsed)
+    },
+    className: classnames('slimfit-slide-menu', className, inlineCollapsed && 'slimfit-slide-menu-collapsed'),
+    children: [/*#__PURE__*/_jsx(Menu, _objectSpread(_objectSpread({}, menuProps), {}, {
+      mode: "inline",
+      inlineCollapsed: inlineCollapsed
+    })), /*#__PURE__*/_jsx("div", {
+      className: "slimfit-slide-menu-divider"
+    }), /*#__PURE__*/_jsx("div", {
+      className: "slimfit-slide-menu-footer",
+      children: /*#__PURE__*/_jsx(Popover, {
+        content: popoverContent,
+        trigger: "hover",
+        placement: "right",
+        children: /*#__PURE__*/_jsx("div", {
+          className: "slimfit-slide-menu-footer-icon",
+          children: /*#__PURE__*/_jsx(Button, {
+            icon: menuIcon,
+            type: "text",
+            onClick: function onClick() {
+              return handleInlineCollapsedChange(!inlineCollapsed);
+            }
+          })
+        })
+      })
+    })]
+  });
+};
+export default SlideMenu;

package/lib/esm/menu/slide-menu.less

@@ -0,0 +1,41 @@
+.slimfit-slide-menu {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: #f1f5ff;
+  padding: 20px 0 10px 0;
+  box-sizing: border-box;
+
+  transition: width var(--ant-motion-duration-slow) var(--ant-motion-ease-out);
+
+  .slimfit-menu {
+    flex: 1;
+  }
+
+  .slimfit-slide-menu-footer {
+    padding: 0 10px;
+
+    .slimfit-slide-menu-footer-icon {
+      width: 40px;
+      height: 40px;
+
+      button {
+        width: 100%;
+        height: 100%;
+        &:hover {
+          // 问题：目前无法读取到 antd 内部的 css 变量
+          // 原因：因为 antd 的 css 变量有作用域限制， .css-var-r1.ant-menu-css-var,
+          // TODO：需要优化，使用CSS变量替代硬编码 background-color: var(--ant-menu-item-hover-bg);
+          background-color: #c4ceff80;
+        }
+      }
+    }
+  }
+
+  .slimfit-slide-menu-divider {
+    height: 1px;
+    background-color: #1c14351f;
+    padding: 0 10px;
+    margin: 0 10px 1px 10px;
+  }
+}

package/lib/esm/menu/style.less

@@ -0,0 +1,281 @@
+@import '../style/index.css';
+
+.slimfit-menu-inline {
+  padding: 0 10px;
+  box-sizing: border-box;
+
+  &.slimfit-menu {
+    // 容器（ul）样式
+    &.slimfit-menu-collapsed {
+      display: flex;
+      flex-direction: column;
+      width: 60px;
+
+      .ant-menu-item,
+      .ant-menu-submenu {
+        height: 40px;
+        overflow: hidden;
+      }
+
+      // 调整一级菜单项的高度
+      > .ant-menu-item {
+        margin: 4px 0;
+      }
+
+      .ant-menu-submenu {
+        margin: 4px 0;
+      }
+
+      .ant-menu-submenu-title {
+        margin: 0;
+      }
+    }
+
+    &.slimfit-menu-expanded {
+      // 调整二级（末级）菜单项的高度
+      .ant-menu-item,
+      .ant-menu-submenu-title {
+        padding-right: 16px !important;
+        height: 40px;
+        margin: 0px;
+      }
+
+      // 调整一级菜单项的高度
+      > .ant-menu-item {
+        height: 48px;
+      }
+
+      .ant-menu-submenu-title {
+        height: 48px;
+      }
+    }
+
+    .ant-menu-item {
+      &.ant-menu-item-selected {
+        background-color: transparent;
+        &:hover {
+          background-color: var(--ant-menu-item-hover-bg);
+        }
+      }
+    }
+
+    .ant-menu-submenu-selected {
+      .ant-menu-submenu-title {
+        background-color: transparent;
+        &:hover {
+          background-color: var(--ant-menu-item-hover-bg);
+        }
+      }
+      &.ant-menu-submenu-open {
+        .ant-menu-submenu-title {
+          color: var(--color-neutral-950) !important;
+        }
+      }
+    }
+
+    .ant-menu-item-disabled {
+      background-color: transparent !important;
+    }
+
+    .ant-menu-submenu-disabled {
+      .ant-menu-submenu-title {
+        background-color: transparent !important;
+      }
+    }
+
+    .ant-menu-item,
+    .ant-menu-submenu-title {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      padding: 0px !important;
+    }
+
+    .slimfit-menu-item-label {
+      transition: opacity var(--ant-motion-duration-slow)
+        var(--ant-motion-ease-out);
+    }
+
+    .slimfit-menu-item-icon {
+      transition: padding var(--ant-motion-duration-slow)
+        var(--ant-motion-ease-out);
+
+      svg {
+        font-size: 20px !important;
+      }
+
+      &:empty {
+        display: none;
+      }
+
+      .slimfit-menu-item-icon-indent {
+        position: relative;
+        width: 20px;
+        height: 20px;
+
+        &::before {
+          content: '';
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translateY(-50%) translateX(-50%);
+          width: 4px;
+          height: 4px;
+          border-radius: 50%;
+          background-color: var(--color-neutral-500); /* 默认灰色圆点 */
+          transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
+        }
+      }
+    }
+
+    .slimfit-menu-item-content-extra {
+      color: var(--ant-menu-group-title-color) !important;
+    }
+
+    .slimfit-menu-item-content {
+      font-weight: 500;
+    }
+
+    .slimfit-menu-item-content-indent {
+      font-weight: 400;
+    }
+
+    .ant-menu-item-selected {
+      .slimfit-menu-item-icon-indent {
+        &::before {
+          background-color: var(--ant-menu-item-selected-color);
+        }
+      }
+
+      .slimfit-menu-item-content-indent {
+        font-weight: 500;
+      }
+    }
+
+    .anticon {
+      display: inline-flex !important;
+    }
+
+    .slimfit-menu-item-expanded-wrapper {
+      width: 100%;
+
+      .slimfit-menu-item-content {
+        display: flex;
+        align-items: center;
+
+        .slimfit-menu-item-box {
+          flex: 1;
+          display: flex;
+          font-size: 14px;
+
+          .slimfit-menu-item-icon {
+            padding-left: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-right: 10px;
+
+            &:empty {
+              margin-right: 0;
+            }
+          }
+
+          .slimfit-menu-item-label {
+            opacity: 1;
+          }
+        }
+      }
+    }
+
+    .slimfit-menu-item-collapsed-wrapper {
+      .slimfit-menu-item-content {
+        .slimfit-menu-item-box {
+          display: flex;
+
+          .slimfit-menu-item-icon {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            padding: 0 10px;
+          }
+
+          .slimfit-menu-item-label {
+            opacity: 0;
+          }
+        }
+      }
+    }
+
+    // 去掉右侧的 border
+    border-inline-end: 0 !important;
+  }
+}
+
+.slimfit-menu-inline-dropdown {
+  .ant-dropdown-menu {
+    padding: 0 !important;
+
+    .ant-dropdown-menu-item {
+      padding: 0 !important;
+      background-color: transparent !important;
+    }
+  }
+
+  .slimfit-menu-inline-dropdown-title {
+    font-size: 12px;
+    line-height: 40px;
+  }
+
+  .slimfit-menu-inline-dropdown-item {
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    line-height: 40px;
+    padding: 0 16px;
+    min-width: 112px;
+
+    &:hover {
+      background-color: var(--color-fill-300);
+    }
+
+    &.slimfit-menu-inline-dropdown-item-disabled {
+      background-color: transparent;
+    }
+
+    &.slimfit-menu-inline-dropdown-title {
+      color: var(--color-neutral-500);
+      background-color: transparent !important;
+    }
+
+    &.slimfit-menu-inline-dropdown-item-selected {
+      color: var(--color-fi-600) !important;
+
+      .slimfit-menu-inline-dropdown-item-indent {
+        &::before {
+          background-color: var(--color-fi-600) !important;
+        }
+      }
+    }
+
+    .slimfit-menu-inline-dropdown-item-indent {
+      position: relative;
+      width: 16px;
+      height: 16px;
+      margin-right: 8px;
+
+      &::before {
+        content: '';
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translateY(-50%) translateX(-50%);
+        width: 4px;
+        height: 4px;
+        border-radius: 50%;
+        background-color: var(--color-neutral-400); /* 默认灰色圆点 */
+        transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
+      }
+    }
+  }
+}

package/lib/esm/menu/typings.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { MenuProps as AntdMenuProps } from 'antd';
+import type { MenuItemType, SubMenuType } from 'antd/es/menu/interface';
+export type MenuItem = MenuItemType & SubMenuType<MenuItemType>;
+export interface MenuInfo {
+    key: string;
+    keyPath: string[];
+    item: React.ReactInstance;
+    domEvent: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;
+}
+export interface SelectInfo extends MenuInfo {
+    selectedKeys: string[];
+}
+export interface MenuProps extends AntdMenuProps {
+    className?: string;
+}
+export interface SlideMenuProps {
+    className?: string;
+    menuProps?: MenuProps;
+    width?: (inlineCollapsed: boolean) => number;
+}
+export type { AntdMenuProps };

package/lib/esm/menu/typings.js

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

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

@@ -0,0 +1,2 @@
+export { Message } from './message';
+export type { MessageApi, MessageProps } from './message';

package/lib/esm/message/index.js

@@ -0,0 +1 @@
+export { Message } from "./message";

package/lib/esm/message/message.d.ts

@@ -0,0 +1,17 @@
+import type { ArgsProps, ConfigOptions, MessageType } from 'antd/es/message/interface';
+import React from 'react';
+import './style.css';
+export interface MessageProps extends ArgsProps {
+    type?: 'success' | 'error' | 'warning' | 'info' | 'loading';
+}
+export interface MessageApi {
+    success: (content: React.ReactNode, duration?: number) => MessageType;
+    error: (content: React.ReactNode, duration?: number) => MessageType;
+    warning: (content: React.ReactNode, duration?: number) => MessageType;
+    info: (content: React.ReactNode, duration?: number) => MessageType;
+    loading: (content: React.ReactNode, duration?: number) => MessageType;
+    open: (config: MessageProps) => MessageType;
+    destroy: () => void;
+    config: (options: ConfigOptions) => void;
+}
+export declare const Message: MessageApi;

package/lib/esm/message/message.js

@@ -0,0 +1,95 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { message as antdMessage } from 'antd';
+import React from 'react';
+import { CheckCircleFilled, ExclamationCircleFilled, IconLoadingConic } from "../icon";
+import "./style.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+// 自定义图标映射
+var customIcons = {
+  info: /*#__PURE__*/_jsx(ExclamationCircleFilled, {
+    style: {
+      color: 'var(--color-fi-600)'
+    }
+  }),
+  error: /*#__PURE__*/_jsx(ExclamationCircleFilled, {
+    style: {
+      color: 'var(--color-red-600)'
+    }
+  }),
+  success: /*#__PURE__*/_jsx(CheckCircleFilled, {
+    style: {
+      color: 'var(--color-green-600)'
+    }
+  }),
+  warning: /*#__PURE__*/_jsx(ExclamationCircleFilled, {
+    style: {
+      color: 'var(--color-orange-600)'
+    }
+  }),
+  loading: /*#__PURE__*/_jsx(IconLoadingConic, {
+    spin: true,
+    style: {
+      fontSize: '16px',
+      color: 'var(--color-fi-600)'
+    }
+  })
+};
+
+// 包装配置，自动注入自定义图标
+var wrapConfig = function wrapConfig(config) {
+  // 如果用户没有自定义 icon，则根据 type 自动注入
+  if (!config.icon && config.type && customIcons[config.type]) {
+    return _objectSpread(_objectSpread({}, config), {}, {
+      icon: customIcons[config.type]
+    });
+  }
+  return config;
+};
+
+// Message 作为静态 API 对象（全局消息）
+export var Message = {
+  success: function success(content, duration) {
+    return antdMessage.success({
+      content: content,
+      duration: duration,
+      icon: customIcons.success
+    });
+  },
+  error: function error(content, duration) {
+    return antdMessage.error({
+      content: content,
+      duration: duration,
+      icon: customIcons.error
+    });
+  },
+  warning: function warning(content, duration) {
+    return antdMessage.warning({
+      content: content,
+      duration: duration,
+      icon: customIcons.warning
+    });
+  },
+  info: function info(content, duration) {
+    return antdMessage.info({
+      content: content,
+      duration: duration,
+      icon: customIcons.info
+    });
+  },
+  loading: function loading(content, duration) {
+    return antdMessage.loading({
+      content: content,
+      duration: duration,
+      icon: customIcons.loading
+    });
+  },
+  open: function open(config) {
+    return antdMessage.open(wrapConfig(config));
+  },
+  destroy: function destroy() {
+    antdMessage.destroy();
+  },
+  config: function config(options) {
+    antdMessage.config(options);
+  }
+};

package/lib/esm/message/style.css

@@ -0,0 +1,16 @@
+.ant-message .ant-message-notice .ant-message-notice-content {
+  display: inline-flex !important;
+  align-items: center;
+  width: auto !important;
+  max-width: none !important;
+  padding: 8px 20px !important;
+  border-radius: 0 !important; /* 取消圆角 */
+  box-shadow: 0px 2px 8px 0px var(--color-line-100),
+    0px -1px 3px 0px var(--color-line-300);
+  font-size: 12px !important;
+}
+
+.ant-message .ant-message-notice .ant-message-notice-content .anticon {
+  margin-right: 8px;
+  font-size: 16px;
+}

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

@@ -0,0 +1,2 @@
+export { default as Pagination } from './pagination';
+export type { PaginationProps } from './pagination';

package/lib/esm/pagination/index.js

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

package/lib/esm/pagination/pagination.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { SelectProps } from '../select';
+import './style.less';
+export interface PaginationProps {
+    className?: string;
+    current?: number;
+    defaultCurrent?: number;
+    pageSize?: number;
+    defaultPageSize?: number;
+    disabled?: boolean;
+    pageSizeOptions?: SelectProps['options'];
+    total?: number;
+    onChange?: (page: number, pageSize: number) => void;
+    onPageSizeChange?: (pageSize: number) => void;
+    showTotal?: (total: number, range: [number, number]) => React.ReactNode;
+}
+declare const Pagination: React.FC<PaginationProps>;
+export default Pagination;