wssf-kage-ui 0.1.1 → 0.1.2

package/dist/cjs/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/cjs/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;

package/dist/cjs/Calendar/index.js

@@ -0,0 +1,296 @@
+"use strict";
+
+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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Calendar = void 0;
+var _react = _interopRequireWildcard(require("react"));
+require("./style.less");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } // ============ 日期工具函数 ============
+var formatDate = function formatDate(date) {
+  var format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'YYYY-MM-DD';
+  var year = date.getFullYear();
+  var month = String(date.getMonth() + 1).padStart(2, '0');
+  var day = String(date.getDate()).padStart(2, '0');
+  return format.replace('YYYY', String(year)).replace('MM', month).replace('DD', day);
+};
+var isSameDay = function isSameDay(date1, date2) {
+  return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();
+};
+var isSameMonth = function isSameMonth(date1, date2) {
+  return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth();
+};
+var getDaysInMonth = function getDaysInMonth(year, month) {
+  return new Date(year, month + 1, 0).getDate();
+};
+var getFirstDayOfMonth = function getFirstDayOfMonth(year, month) {
+  return new Date(year, month, 1).getDay();
+};
+
+// ============ Calendar Props ============
+
+// ============ Calendar Component ============
+var Calendar = exports.Calendar = function Calendar(_ref) {
+  var controlledValue = _ref.value,
+    _ref$defaultValue = _ref.defaultValue,
+    defaultValue = _ref$defaultValue === void 0 ? new Date() : _ref$defaultValue,
+    controlledMode = _ref.mode,
+    _ref$fullscreen = _ref.fullscreen,
+    fullscreen = _ref$fullscreen === void 0 ? true : _ref$fullscreen,
+    dateCellRender = _ref.dateCellRender,
+    dateFullCellRender = _ref.dateFullCellRender,
+    monthCellRender = _ref.monthCellRender,
+    monthFullCellRender = _ref.monthFullCellRender,
+    disabledDate = _ref.disabledDate,
+    onSelect = _ref.onSelect,
+    onPanelChange = _ref.onPanelChange,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    style = _ref.style;
+  var _useState = (0, _react.useState)(defaultValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalValue = _useState2[0],
+    setInternalValue = _useState2[1];
+  var _useState3 = (0, _react.useState)('month'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    internalMode = _useState4[0],
+    setInternalMode = _useState4[1];
+  var _useState5 = (0, _react.useState)(defaultValue),
+    _useState6 = _slicedToArray(_useState5, 2),
+    viewDate = _useState6[0],
+    setViewDate = _useState6[1];
+  var value = controlledValue !== undefined ? controlledValue : internalValue;
+  var mode = controlledMode !== undefined ? controlledMode : internalMode;
+
+  // 切换模式
+  var handleModeChange = (0, _react.useCallback)(function (newMode) {
+    if (controlledMode === undefined) {
+      setInternalMode(newMode);
+    }
+    onPanelChange === null || onPanelChange === void 0 || onPanelChange(viewDate, newMode);
+  }, [controlledMode, viewDate, onPanelChange]);
+
+  // 选择日期
+  var handleSelectDate = (0, _react.useCallback)(function (date) {
+    if (disabledDate !== null && disabledDate !== void 0 && disabledDate(date)) return;
+    if (controlledValue === undefined) {
+      setInternalValue(date);
+    }
+    setViewDate(date);
+    onSelect === null || onSelect === void 0 || onSelect(date);
+  }, [controlledValue, disabledDate, onSelect]);
+
+  // 选择月份
+  var handleSelectMonth = (0, _react.useCallback)(function (monthIndex) {
+    var newDate = new Date(viewDate.getFullYear(), monthIndex, 1);
+    setViewDate(newDate);
+    handleModeChange('month');
+    onPanelChange === null || onPanelChange === void 0 || onPanelChange(newDate, 'month');
+  }, [viewDate, handleModeChange, onPanelChange]);
+
+  // 切换到上一月/年
+  var handlePrev = (0, _react.useCallback)(function () {
+    if (mode === 'month') {
+      var newDate = new Date(viewDate.getFullYear(), viewDate.getMonth() - 1, 1);
+      setViewDate(newDate);
+      onPanelChange === null || onPanelChange === void 0 || onPanelChange(newDate, mode);
+    } else {
+      var _newDate = new Date(viewDate.getFullYear() - 1, viewDate.getMonth(), 1);
+      setViewDate(_newDate);
+      onPanelChange === null || onPanelChange === void 0 || onPanelChange(_newDate, mode);
+    }
+  }, [mode, viewDate, onPanelChange]);
+
+  // 切换到下一月/年
+  var handleNext = (0, _react.useCallback)(function () {
+    if (mode === 'month') {
+      var newDate = new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 1);
+      setViewDate(newDate);
+      onPanelChange === null || onPanelChange === void 0 || onPanelChange(newDate, mode);
+    } else {
+      var _newDate2 = new Date(viewDate.getFullYear() + 1, viewDate.getMonth(), 1);
+      setViewDate(_newDate2);
+      onPanelChange === null || onPanelChange === void 0 || onPanelChange(_newDate2, mode);
+    }
+  }, [mode, viewDate, onPanelChange]);
+
+  // 回到今天
+  var handleToday = (0, _react.useCallback)(function () {
+    var today = new Date();
+    setViewDate(today);
+    handleSelectDate(today);
+  }, [handleSelectDate]);
+
+  // 生成日期网格
+  var dateGrid = (0, _react.useMemo)(function () {
+    var year = viewDate.getFullYear();
+    var month = viewDate.getMonth();
+    var daysInMonth = getDaysInMonth(year, month);
+    var firstDay = getFirstDayOfMonth(year, month);
+    var prevMonthDays = getDaysInMonth(year, month - 1);
+    var days = [];
+
+    // 上个月的天数
+    for (var i = firstDay - 1; i >= 0; i--) {
+      days.push({
+        date: new Date(year, month - 1, prevMonthDays - i),
+        isCurrentMonth: false
+      });
+    }
+
+    // 当前月的天数
+    for (var _i = 1; _i <= daysInMonth; _i++) {
+      days.push({
+        date: new Date(year, month, _i),
+        isCurrentMonth: true
+      });
+    }
+
+    // 下个月的天数
+    var remaining = 42 - days.length;
+    for (var _i2 = 1; _i2 <= remaining; _i2++) {
+      days.push({
+        date: new Date(year, month + 1, _i2),
+        isCurrentMonth: false
+      });
+    }
+    return days;
+  }, [viewDate]);
+
+  // 生成月份网格
+  var monthGrid = (0, _react.useMemo)(function () {
+    var months = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
+    return months.map(function (name, index) {
+      return {
+        name: name,
+        index: index,
+        date: new Date(viewDate.getFullYear(), index, 1)
+      };
+    });
+  }, [viewDate]);
+  var weekDays = ['日', '一', '二', '三', '四', '五', '六'];
+  var today = new Date();
+  var classNames = ['kage-calendar', fullscreen ? 'kage-calendar-fullscreen' : 'kage-calendar-card', className].filter(Boolean).join(' ');
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: classNames,
+    style: style,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "kage-calendar-header",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "kage-calendar-header-left",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          className: "kage-calendar-header-btn",
+          onClick: handlePrev,
+          children: "\u2039"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          className: "kage-calendar-header-btn",
+          onClick: handleNext,
+          children: "\u203A"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+          className: "kage-calendar-header-title",
+          onClick: function onClick() {
+            return handleModeChange('year');
+          },
+          children: [viewDate.getFullYear(), "\u5E74", mode === 'month' && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+            onClick: function onClick(e) {
+              e.stopPropagation();
+              handleModeChange('month');
+            },
+            children: [viewDate.getMonth() + 1, "\u6708"]
+          })]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "kage-calendar-header-right",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          className: "kage-calendar-today-btn",
+          onClick: handleToday,
+          children: "\u4ECA\u5929"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
+          className: "kage-calendar-mode-select",
+          value: mode,
+          onChange: function onChange(e) {
+            return handleModeChange(e.target.value);
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+            value: "month",
+            children: "\u6708"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+            value: "year",
+            children: "\u5E74"
+          })]
+        })]
+      })]
+    }), mode === 'month' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "kage-calendar-body",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "kage-calendar-weekdays",
+        children: weekDays.map(function (day) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "kage-calendar-weekday",
+            children: day
+          }, day);
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "kage-calendar-dates",
+        children: dateGrid.map(function (_ref2, index) {
+          var date = _ref2.date,
+            isCurrentMonth = _ref2.isCurrentMonth;
+          var isSelected = isSameDay(date, value);
+          var isToday = isSameDay(date, today);
+          var isDisabled = disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(date);
+          var cellClassNames = ['kage-calendar-date', !isCurrentMonth && 'kage-calendar-date-other', isSelected && 'kage-calendar-date-selected', isToday && 'kage-calendar-date-today', isDisabled && 'kage-calendar-date-disabled'].filter(Boolean).join(' ');
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: cellClassNames,
+            onClick: function onClick() {
+              return !isDisabled && handleSelectDate(date);
+            },
+            children: dateFullCellRender ? dateFullCellRender(date) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: "kage-calendar-date-value",
+                children: date.getDate()
+              }), dateCellRender && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: "kage-calendar-date-content",
+                children: dateCellRender(date)
+              })]
+            })
+          }, index);
+        })
+      })]
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "kage-calendar-months",
+      children: monthGrid.map(function (_ref3) {
+        var name = _ref3.name,
+          index = _ref3.index,
+          date = _ref3.date;
+        var isSelected = isSameMonth(date, value);
+        var isCurrentMonth = isSameMonth(date, today);
+        var cellClassNames = ['kage-calendar-month', isSelected && 'kage-calendar-month-selected', isCurrentMonth && 'kage-calendar-month-current'].filter(Boolean).join(' ');
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: cellClassNames,
+          onClick: function onClick() {
+            return handleSelectMonth(index);
+          },
+          children: monthFullCellRender ? monthFullCellRender(date) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "kage-calendar-month-value",
+              children: name
+            }), monthCellRender && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "kage-calendar-month-content",
+              children: monthCellRender(date)
+            })]
+          })
+        }, index);
+      })
+    })]
+  });
+};
+var _default = exports.default = Calendar;