wssf-kage-ui 0.1.1 → 0.1.2

package/dist/esm/Avatar/style.less

@@ -0,0 +1,193 @@
+// Avatar 头像组件样式
+
+@prefix: kage-avatar;
+
+// 颜色变量
+@avatar-bg: #f5f5f5;
+@avatar-color: rgba(0, 0, 0, 0.88);
+@avatar-border: transparent;
+@avatar-size-default: 40px;
+@avatar-size-large: 48px;
+@avatar-size-small: 32px;
+
+// ============ 基础样式 ============
+.@{prefix} {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: @avatar-size-default;
+  height: @avatar-size-default;
+  font-size: 18px;
+  line-height: @avatar-size-default;
+  background: @avatar-bg;
+  color: @avatar-color;
+  border-radius: 50%;
+  overflow: hidden;
+  user-select: none;
+  vertical-align: middle;
+  flex-shrink: 0;
+
+  * {
+    box-sizing: border-box;
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+}
+
+// ============ 尺寸变体 ============
+.@{prefix}-large {
+  width: @avatar-size-large;
+  height: @avatar-size-large;
+  font-size: 24px;
+  line-height: @avatar-size-large;
+}
+
+.@{prefix}-small {
+  width: @avatar-size-small;
+  height: @avatar-size-small;
+  font-size: 14px;
+  line-height: @avatar-size-small;
+}
+
+// ============ 形状变体 ============
+.@{prefix}-square {
+  border-radius: 6px;
+}
+
+// ============ 内容类型 ============
+.@{prefix}-icon-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1em;
+}
+
+.@{prefix}-text-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 500;
+  text-transform: uppercase;
+}
+
+.@{prefix}-image {
+  background: transparent;
+}
+
+// ============ Avatar Group ============
+.@{prefix}-group {
+  display: inline-flex;
+  align-items: center;
+
+  .@{prefix} {
+    margin-left: -8px;
+    border: 2px solid #fff;
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:first-child {
+      margin-left: 0;
+    }
+
+    &:hover {
+      z-index: 1;
+      transform: translateY(-2px);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    }
+  }
+}
+
+.@{prefix}-group-excess {
+  background: #fafafa;
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 14px;
+  cursor: default;
+
+  &:hover {
+    transform: none;
+    box-shadow: none;
+  }
+}
+
+// ============ 颜色变体（可选） ============
+.@{prefix}[data-color='primary'] {
+  background: #6366f1;
+  color: #fff;
+}
+
+.@{prefix}[data-color='success'] {
+  background: #52c41a;
+  color: #fff;
+}
+
+.@{prefix}[data-color='warning'] {
+  background: #faad14;
+  color: #fff;
+}
+
+.@{prefix}[data-color='error'] {
+  background: #ff4d4f;
+  color: #fff;
+}
+
+.@{prefix}[data-color='info'] {
+  background: #1890ff;
+  color: #fff;
+}
+
+// ============ 暗色模式适配 ============
+[data-theme='dark'],
+[data-prefers-color-scheme='dark'],
+[data-prefers-color='dark'] {
+  .@{prefix} {
+    background: #262626;
+    color: rgba(255, 255, 255, 0.88);
+  }
+
+  .@{prefix}-group {
+    .@{prefix} {
+      border-color: #1f1f1f;
+
+      &:hover {
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
+      }
+    }
+  }
+
+  .@{prefix}-group-excess {
+    background: #141414;
+    color: rgba(255, 255, 255, 0.45);
+  }
+
+  .@{prefix}[data-color='primary'] {
+    background: #6366f1;
+    color: #fff;
+  }
+
+  .@{prefix}[data-color='success'] {
+    background: #52c41a;
+    color: #fff;
+  }
+
+  .@{prefix}[data-color='warning'] {
+    background: #faad14;
+    color: #fff;
+  }
+
+  .@{prefix}[data-color='error'] {
+    background: #ff4d4f;
+    color: #fff;
+  }
+
+  .@{prefix}[data-color='info'] {
+    background: #1890ff;
+    color: #fff;
+  }
+}
+

package/dist/esm/Badge/index.d.ts

@@ -0,0 +1,48 @@
+import React, { CSSProperties } from 'react';
+import './style.less';
+export type BadgeStatus = 'success' | 'processing' | 'default' | 'error' | 'warning';
+export interface BadgeProps {
+    /** 展示的数字，大于 overflowCount 时显示为 ${overflowCount}+ */
+    count?: number | React.ReactNode;
+    /** 展示封顶的数字值 */
+    overflowCount?: number;
+    /** 不展示数字，只有一个小红点 */
+    dot?: boolean;
+    /** 设置状态点 */
+    status?: BadgeStatus;
+    /** 设置状态点的文本 */
+    text?: React.ReactNode;
+    /** 自定义小圆点的颜色 */
+    color?: string;
+    /** 是否显示 Badge */
+    showZero?: boolean;
+    /** 设置 Badge 为状态点 */
+    offset?: [number, number];
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: CSSProperties;
+    /** 子元素 */
+    children?: React.ReactNode;
+}
+export declare const Badge: React.FC<BadgeProps>;
+export interface BadgeRibbonProps {
+    /** 缎带的文本 */
+    text?: React.ReactNode;
+    /** 缎带的颜色 */
+    color?: string;
+    /** 缎带的位置 */
+    placement?: 'start' | 'end';
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: CSSProperties;
+    /** 子元素 */
+    children?: React.ReactNode;
+}
+declare const BadgeRibbon: React.FC<BadgeRibbonProps>;
+export interface BadgeComponent extends React.FC<BadgeProps> {
+    Ribbon: typeof BadgeRibbon;
+}
+declare const BadgeWithRibbon: BadgeComponent;
+export default BadgeWithRibbon;

package/dist/esm/Badge/index.js

@@ -0,0 +1,137 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from 'react';
+import "./style.less";
+
+// ============ Badge Props ============
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+// ============ Badge Component ============
+export var Badge = function Badge(_ref) {
+  var _ref$count = _ref.count,
+    count = _ref$count === void 0 ? 0 : _ref$count,
+    _ref$overflowCount = _ref.overflowCount,
+    overflowCount = _ref$overflowCount === void 0 ? 99 : _ref$overflowCount,
+    _ref$dot = _ref.dot,
+    dot = _ref$dot === void 0 ? false : _ref$dot,
+    status = _ref.status,
+    text = _ref.text,
+    color = _ref.color,
+    _ref$showZero = _ref.showZero,
+    showZero = _ref$showZero === void 0 ? false : _ref$showZero,
+    offset = _ref.offset,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    style = _ref.style,
+    children = _ref.children;
+  // 计算显示的内容
+  var getDisplayCount = function getDisplayCount() {
+    if (typeof count === 'number') {
+      if (count === 0 && !showZero) {
+        return null;
+      }
+      if (count > overflowCount) {
+        return "".concat(overflowCount, "+");
+      }
+      return count;
+    }
+    return count;
+  };
+  var displayCount = getDisplayCount();
+  var shouldShowBadge = dot || displayCount !== null;
+
+  // 状态点样式
+  if (status || !children && text) {
+    var statusClassNames = ['kage-badge-status', status && "kage-badge-status-".concat(status), className].filter(Boolean).join(' ');
+    var dotStyle = color ? {
+      backgroundColor: color
+    } : {};
+    return /*#__PURE__*/_jsxs("span", {
+      className: statusClassNames,
+      style: style,
+      children: [/*#__PURE__*/_jsx("span", {
+        className: "kage-badge-status-dot",
+        style: dotStyle
+      }), text && /*#__PURE__*/_jsx("span", {
+        className: "kage-badge-status-text",
+        children: text
+      })]
+    });
+  }
+
+  // 如果没有子元素，直接显示数字
+  if (!children) {
+    if (!shouldShowBadge) return null;
+    var standaloneClassNames = ['kage-badge-standalone', dot && 'kage-badge-dot', className].filter(Boolean).join(' ');
+    var badgeStyle = color ? {
+      backgroundColor: color
+    } : {};
+    return /*#__PURE__*/_jsx("span", {
+      className: standaloneClassNames,
+      style: _objectSpread(_objectSpread({}, badgeStyle), style),
+      children: !dot && displayCount
+    });
+  }
+
+  // 带子元素的徽章
+  var wrapperClassNames = ['kage-badge', className].filter(Boolean).join(' ');
+  var supClassNames = ['kage-badge-count', dot && 'kage-badge-dot', !shouldShowBadge && 'kage-badge-hidden'].filter(Boolean).join(' ');
+  var supStyle = _objectSpread(_objectSpread({}, color ? {
+    backgroundColor: color
+  } : {}), offset ? {
+    right: -offset[0],
+    top: offset[1]
+  } : {});
+  return /*#__PURE__*/_jsxs("span", {
+    className: wrapperClassNames,
+    style: style,
+    children: [children, shouldShowBadge && /*#__PURE__*/_jsx("sup", {
+      className: supClassNames,
+      style: supStyle,
+      children: !dot && displayCount
+    })]
+  });
+};
+
+// ============ Badge.Ribbon Props ============
+
+// ============ Badge.Ribbon Component ============
+var BadgeRibbon = function BadgeRibbon(_ref2) {
+  var text = _ref2.text,
+    color = _ref2.color,
+    _ref2$placement = _ref2.placement,
+    placement = _ref2$placement === void 0 ? 'end' : _ref2$placement,
+    _ref2$className = _ref2.className,
+    className = _ref2$className === void 0 ? '' : _ref2$className,
+    style = _ref2.style,
+    children = _ref2.children;
+  var ribbonClassNames = ['kage-badge-ribbon', "kage-badge-ribbon-".concat(placement), className].filter(Boolean).join(' ');
+  var ribbonStyle = color ? {
+    backgroundColor: color
+  } : {};
+  return /*#__PURE__*/_jsxs("div", {
+    className: "kage-badge-ribbon-wrapper",
+    style: style,
+    children: [children, /*#__PURE__*/_jsxs("div", {
+      className: ribbonClassNames,
+      style: ribbonStyle,
+      children: [/*#__PURE__*/_jsx("span", {
+        className: "kage-badge-ribbon-text",
+        children: text
+      }), /*#__PURE__*/_jsx("div", {
+        className: "kage-badge-ribbon-corner",
+        style: ribbonStyle
+      })]
+    })]
+  });
+};
+
+// 将 Ribbon 组件附加到 Badge 上
+Badge.displayName = 'Badge';
+var BadgeWithRibbon = Badge;
+BadgeWithRibbon.Ribbon = BadgeRibbon;
+export default BadgeWithRibbon;

package/dist/esm/Badge/style.less

@@ -0,0 +1,237 @@
+// Badge 徽章组件样式
+
+@prefix: kage-badge;
+
+// 颜色变量
+@badge-color: #ff4d4f;
+@badge-text-color: #fff;
+@badge-font-size: 12px;
+@badge-dot-size: 6px;
+@badge-height: 20px;
+@badge-status-dot-size: 6px;
+
+// 状态颜色
+@badge-success: #52c41a;
+@badge-processing: #1890ff;
+@badge-default: #d9d9d9;
+@badge-error: #ff4d4f;
+@badge-warning: #faad14;
+
+// ============ 基础样式 ============
+.@{prefix} {
+  position: relative;
+  display: inline-block;
+  line-height: 1;
+
+  * {
+    box-sizing: border-box;
+  }
+}
+
+// ============ 徽章数字 ============
+.@{prefix}-count {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+  transform-origin: 100% 0;
+  z-index: 10;
+  min-width: @badge-height;
+  height: @badge-height;
+  padding: 0 6px;
+  background: @badge-color;
+  color: @badge-text-color;
+  font-size: @badge-font-size;
+  font-weight: 400;
+  line-height: @badge-height;
+  text-align: center;
+  border-radius: 10px;
+  white-space: nowrap;
+  box-shadow: 0 0 0 1px #fff;
+  transition: all 0.3s ease;
+}
+
+// ============ 小红点 ============
+.@{prefix}-dot {
+  min-width: @badge-dot-size;
+  width: @badge-dot-size;
+  height: @badge-dot-size;
+  padding: 0;
+  border-radius: 50%;
+  box-shadow: 0 0 0 1px #fff;
+}
+
+// ============ 隐藏状态 ============
+.@{prefix}-hidden {
+  display: none;
+}
+
+// ============ 独立徽章 ============
+.@{prefix}-standalone {
+  display: inline-block;
+  min-width: @badge-height;
+  height: @badge-height;
+  padding: 0 6px;
+  background: @badge-color;
+  color: @badge-text-color;
+  font-size: @badge-font-size;
+  line-height: @badge-height;
+  text-align: center;
+  border-radius: 10px;
+  white-space: nowrap;
+  transition: all 0.3s ease;
+
+  &.@{prefix}-dot {
+    min-width: @badge-dot-size;
+    width: @badge-dot-size;
+    height: @badge-dot-size;
+    padding: 0;
+    border-radius: 50%;
+  }
+}
+
+// ============ 状态点 ============
+.@{prefix}-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  line-height: inherit;
+  vertical-align: baseline;
+}
+
+.@{prefix}-status-dot {
+  position: relative;
+  display: inline-block;
+  width: @badge-status-dot-size;
+  height: @badge-status-dot-size;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.@{prefix}-status-text {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.88);
+}
+
+// 状态点颜色
+.@{prefix}-status-success .@{prefix}-status-dot {
+  background: @badge-success;
+}
+
+.@{prefix}-status-processing .@{prefix}-status-dot {
+  background: @badge-processing;
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: -1px;
+    left: -1px;
+    width: 100%;
+    height: 100%;
+    border: 1px solid @badge-processing;
+    border-radius: 50%;
+    animation: badgeProcessing 1.2s infinite ease-in-out;
+  }
+}
+
+@keyframes badgeProcessing {
+  0% {
+    transform: scale(0.8);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(2.4);
+    opacity: 0;
+  }
+}
+
+.@{prefix}-status-default .@{prefix}-status-dot {
+  background: @badge-default;
+}
+
+.@{prefix}-status-error .@{prefix}-status-dot {
+  background: @badge-error;
+}
+
+.@{prefix}-status-warning .@{prefix}-status-dot {
+  background: @badge-warning;
+}
+
+// ============ Badge.Ribbon 缎带 ============
+.@{prefix}-ribbon-wrapper {
+  position: relative;
+}
+
+.@{prefix}-ribbon {
+  position: absolute;
+  top: 8px;
+  height: 22px;
+  padding: 0 8px;
+  background: @badge-color;
+  color: @badge-text-color;
+  font-size: @badge-font-size;
+  line-height: 22px;
+  white-space: nowrap;
+  border-radius: 2px;
+  z-index: 10;
+}
+
+.@{prefix}-ribbon-text {
+  color: @badge-text-color;
+}
+
+.@{prefix}-ribbon-corner {
+  position: absolute;
+  top: 100%;
+  width: 8px;
+  height: 8px;
+  background: currentColor;
+  filter: brightness(0.75);
+  clip-path: polygon(0 0, 100% 100%, 100% 0);
+}
+
+// 缎带位置
+.@{prefix}-ribbon-end {
+  right: -8px;
+  border-bottom-right-radius: 0;
+
+  .@{prefix}-ribbon-corner {
+    right: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+.@{prefix}-ribbon-start {
+  left: -8px;
+  border-bottom-left-radius: 0;
+
+  .@{prefix}-ribbon-corner {
+    left: 0;
+    transform: scaleX(-1);
+    border-bottom-left-radius: 0;
+  }
+}
+
+// ============ 暗色模式适配 ============
+[data-theme='dark'],
+[data-prefers-color-scheme='dark'],
+[data-prefers-color='dark'] {
+  .@{prefix}-count,
+  .@{prefix}-standalone {
+    box-shadow: 0 0 0 1px #1f1f1f;
+  }
+
+  .@{prefix}-dot {
+    box-shadow: 0 0 0 1px #1f1f1f;
+  }
+
+  .@{prefix}-status-text {
+    color: rgba(255, 255, 255, 0.88);
+  }
+
+  .@{prefix}-status-default .@{prefix}-status-dot {
+    background: #434343;
+  }
+}
+

package/dist/esm/Calendar/index.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import './style.less';
+export type CalendarMode = 'month' | 'year';
+export interface CalendarProps {
+    /** 当前选中的日期 */
+    value?: Date;
+    /** 默认选中的日期 */
+    defaultValue?: Date;
+    /** 模式 */
+    mode?: CalendarMode;
+    /** 是否全屏显示 */
+    fullscreen?: boolean;
+    /** 自定义渲染日期单元格 */
+    dateCellRender?: (date: Date) => React.ReactNode;
+    /** 自定义渲染日期单元格内容 */
+    dateFullCellRender?: (date: Date) => React.ReactNode;
+    /** 自定义渲染月单元格 */
+    monthCellRender?: (date: Date) => React.ReactNode;
+    /** 自定义渲染月单元格内容 */
+    monthFullCellRender?: (date: Date) => React.ReactNode;
+    /** 不可选择的日期 */
+    disabledDate?: (date: Date) => boolean;
+    /** 日期选择回调 */
+    onSelect?: (date: Date) => void;
+    /** 面板变化回调 */
+    onPanelChange?: (date: Date, mode: CalendarMode) => void;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+}
+export declare const Calendar: React.FC<CalendarProps>;
+export default Calendar;