wssf-kage-ui 0.1.1 → 0.1.3

package/dist/esm/Popover/style.less

@@ -0,0 +1,279 @@
+// Popover 气泡卡片组件样式
+
+@prefix: kage-popover;
+
+// 颜色变量
+@popover-bg: #fff;
+@popover-border-color: rgba(0, 0, 0, 0.06);
+@popover-title-color: rgba(0, 0, 0, 0.85);
+@popover-content-color: rgba(0, 0, 0, 0.65);
+@popover-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
+  0 6px 16px 0 rgba(0, 0, 0, 0.08),
+  0 9px 28px 8px rgba(0, 0, 0, 0.05);
+
+// 尺寸变量
+@popover-arrow-size: 8px;
+@popover-distance: 12px;
+
+// ============ 容器 ============
+.@{prefix}-wrapper {
+  position: relative;
+  display: inline-block;
+
+  * {
+    box-sizing: border-box;
+  }
+}
+
+.@{prefix}-trigger {
+  display: inline-block;
+  cursor: pointer;
+}
+
+// ============ 气泡卡片 ============
+.@{prefix} {
+  position: absolute;
+  z-index: 1050;
+  background-color: @popover-bg;
+  border: 1px solid @popover-border-color;
+  border-radius: 8px;
+  box-shadow: @popover-shadow;
+  min-width: 150px;
+  max-width: 350px;
+  font-size: 14px;
+  line-height: 1.5715;
+  animation: popoverFadeIn 0.2s ease forwards;
+  word-wrap: break-word;
+  word-break: break-word;
+}
+
+.@{prefix}-open {
+  opacity: 1;
+}
+
+// ============ 内容 ============
+.@{prefix}-inner {
+  padding: 12px 16px;
+}
+
+.@{prefix}-title {
+  color: @popover-title-color;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.@{prefix}-content {
+  color: @popover-content-color;
+}
+
+// ============ 箭头 ============
+.@{prefix}-arrow {
+  position: absolute;
+  width: @popover-arrow-size * 2;
+  height: @popover-arrow-size * 2;
+  background-color: @popover-bg;
+  border: 1px solid @popover-border-color;
+  transform: rotate(45deg);
+  pointer-events: none;
+}
+
+// ============ 位置 - 上方 ============
+.@{prefix}-placement-top,
+.@{prefix}-placement-topLeft,
+.@{prefix}-placement-topRight {
+  bottom: 100%;
+  margin-bottom: @popover-distance;
+  transform-origin: center bottom;
+
+  .@{prefix}-arrow {
+    bottom: -(@popover-arrow-size + 1px);
+    border-top: none;
+    border-left: none;
+  }
+}
+
+.@{prefix}-placement-top {
+  left: 50%;
+  transform: translateX(-50%);
+
+  .@{prefix}-arrow {
+    left: 50%;
+    transform: translateX(-50%) rotate(45deg);
+  }
+}
+
+.@{prefix}-placement-topLeft {
+  left: 0;
+
+  .@{prefix}-arrow {
+    left: 16px;
+  }
+}
+
+.@{prefix}-placement-topRight {
+  right: 0;
+
+  .@{prefix}-arrow {
+    right: 16px;
+  }
+}
+
+// ============ 位置 - 下方 ============
+.@{prefix}-placement-bottom,
+.@{prefix}-placement-bottomLeft,
+.@{prefix}-placement-bottomRight {
+  top: 100%;
+  margin-top: @popover-distance;
+  transform-origin: center top;
+
+  .@{prefix}-arrow {
+    top: -(@popover-arrow-size + 1px);
+    border-bottom: none;
+    border-right: none;
+  }
+}
+
+.@{prefix}-placement-bottom {
+  left: 50%;
+  transform: translateX(-50%);
+
+  .@{prefix}-arrow {
+    left: 50%;
+    transform: translateX(-50%) rotate(45deg);
+  }
+}
+
+.@{prefix}-placement-bottomLeft {
+  left: 0;
+
+  .@{prefix}-arrow {
+    left: 16px;
+  }
+}
+
+.@{prefix}-placement-bottomRight {
+  right: 0;
+
+  .@{prefix}-arrow {
+    right: 16px;
+  }
+}
+
+// ============ 位置 - 左侧 ============
+.@{prefix}-placement-left,
+.@{prefix}-placement-leftTop,
+.@{prefix}-placement-leftBottom {
+  right: 100%;
+  margin-right: @popover-distance;
+  transform-origin: right center;
+
+  .@{prefix}-arrow {
+    right: -(@popover-arrow-size + 1px);
+    border-left: none;
+    border-bottom: none;
+  }
+}
+
+.@{prefix}-placement-left {
+  top: 50%;
+  transform: translateY(-50%);
+
+  .@{prefix}-arrow {
+    top: 50%;
+    transform: translateY(-50%) rotate(45deg);
+  }
+}
+
+.@{prefix}-placement-leftTop {
+  top: 0;
+
+  .@{prefix}-arrow {
+    top: 16px;
+  }
+}
+
+.@{prefix}-placement-leftBottom {
+  bottom: 0;
+
+  .@{prefix}-arrow {
+    bottom: 16px;
+  }
+}
+
+// ============ 位置 - 右侧 ============
+.@{prefix}-placement-right,
+.@{prefix}-placement-rightTop,
+.@{prefix}-placement-rightBottom {
+  left: 100%;
+  margin-left: @popover-distance;
+  transform-origin: left center;
+
+  .@{prefix}-arrow {
+    left: -(@popover-arrow-size + 1px);
+    border-right: none;
+    border-top: none;
+  }
+}
+
+.@{prefix}-placement-right {
+  top: 50%;
+  transform: translateY(-50%);
+
+  .@{prefix}-arrow {
+    top: 50%;
+    transform: translateY(-50%) rotate(45deg);
+  }
+}
+
+.@{prefix}-placement-rightTop {
+  top: 0;
+
+  .@{prefix}-arrow {
+    top: 16px;
+  }
+}
+
+.@{prefix}-placement-rightBottom {
+  bottom: 0;
+
+  .@{prefix}-arrow {
+    bottom: 16px;
+  }
+}
+
+// ============ 动画 ============
+@keyframes popoverFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+// ============ 暗色模式适配 ============
+[data-theme='dark'],
+[data-prefers-color-scheme='dark'],
+[data-prefers-color='dark'] {
+  .@{prefix} {
+    background-color: #1f1f1f;
+    border-color: #434343;
+    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.48),
+      0 6px 16px 0 rgba(0, 0, 0, 0.32),
+      0 9px 28px 8px rgba(0, 0, 0, 0.2);
+  }
+
+  .@{prefix}-arrow {
+    background-color: #1f1f1f;
+    border-color: #434343;
+  }
+
+  .@{prefix}-title {
+    color: rgba(255, 255, 255, 0.85);
+  }
+
+  .@{prefix}-content {
+    color: rgba(255, 255, 255, 0.65);
+  }
+}
+

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

@@ -0,0 +1,43 @@
+import React, { ReactNode, CSSProperties } from 'react';
+import './style.less';
+/** Progress 类型 */
+export type ProgressType = 'line' | 'circle' | 'dashboard';
+/** Progress 状态 */
+export type ProgressStatus = 'success' | 'exception' | 'active' | 'normal';
+/** Progress 属性 */
+export interface ProgressProps {
+    /** 进度百分比，范围 0-100 */
+    percent?: number;
+    /** 是否显示进度数值或状态图标 */
+    showInfo?: boolean;
+    /** 进度条状态 */
+    status?: ProgressStatus;
+    /** 进度条类型 */
+    type?: ProgressType;
+    /** 进度条尺寸（仅对 circle 和 dashboard 类型有效） */
+    size?: number | 'default' | 'small';
+    /** 进度条颜色 */
+    strokeColor?: string | {
+        from: string;
+        to: string;
+    };
+    /** 未完成部分的颜色 */
+    trailColor?: string;
+    /** 进度条宽度（仅对 line 类型有效） */
+    strokeWidth?: number;
+    /** 自定义格式函数 */
+    format?: (percent?: number) => ReactNode;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: CSSProperties;
+    /** 是否显示步骤进度 */
+    steps?: number;
+    /** 步骤进度条中成功的步数 */
+    success?: {
+        percent: number;
+        strokeColor?: string;
+    };
+}
+export declare const Progress: React.FC<ProgressProps>;
+export default Progress;

package/dist/esm/Progress/index.js

@@ -0,0 +1,208 @@
+import React from 'react';
+import "./style.less";
+
+// ============ 类型定义 ============
+
+/** Progress 类型 */
+
+/** Progress 状态 */
+
+/** Progress 属性 */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+// ============ Progress 组件 ============
+export var Progress = function Progress(_ref) {
+  var _ref$percent = _ref.percent,
+    percent = _ref$percent === void 0 ? 0 : _ref$percent,
+    _ref$showInfo = _ref.showInfo,
+    showInfo = _ref$showInfo === void 0 ? true : _ref$showInfo,
+    _ref$status = _ref.status,
+    status = _ref$status === void 0 ? 'normal' : _ref$status,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'line' : _ref$type,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'default' : _ref$size,
+    strokeColor = _ref.strokeColor,
+    trailColor = _ref.trailColor,
+    strokeWidth = _ref.strokeWidth,
+    format = _ref.format,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    style = _ref.style,
+    steps = _ref.steps,
+    success = _ref.success;
+  // 计算实际百分比
+  var validPercent = Math.min(Math.max(percent, 0), 100);
+  var successPercent = success ? Math.min(Math.max(success.percent, 0), 100) : 0;
+
+  // 格式化显示内容
+  var renderInfo = function renderInfo() {
+    if (!showInfo) return null;
+    if (format) {
+      return /*#__PURE__*/_jsx("span", {
+        className: "kage-progress-text",
+        children: format(validPercent)
+      });
+    }
+    if (status === 'success') {
+      return /*#__PURE__*/_jsx("span", {
+        className: "kage-progress-text",
+        children: "\u2713"
+      });
+    }
+    if (status === 'exception') {
+      return /*#__PURE__*/_jsx("span", {
+        className: "kage-progress-text",
+        children: "\u2715"
+      });
+    }
+    return /*#__PURE__*/_jsxs("span", {
+      className: "kage-progress-text",
+      children: [validPercent, "%"]
+    });
+  };
+
+  // 获取状态颜色
+  var getStatusColor = function getStatusColor() {
+    if (strokeColor) {
+      if (typeof strokeColor === 'string') {
+        return strokeColor;
+      }
+      // 渐变颜色，返回第一个颜色
+      return strokeColor.from;
+    }
+    switch (status) {
+      case 'success':
+        return '#52c41a';
+      case 'exception':
+        return '#ff4d4f';
+      default:
+        return '#1890ff';
+    }
+  };
+
+  // 线形进度条
+  var renderLine = function renderLine() {
+    var sizeMap = {
+      default: 8,
+      small: 6
+    };
+    var width = strokeWidth || sizeMap[size] || 8;
+
+    // 步骤进度条
+    if (steps) {
+      var stepWidth = 100 / steps;
+      return /*#__PURE__*/_jsx("div", {
+        className: "kage-progress-steps",
+        children: Array.from({
+          length: steps
+        }).map(function (_, index) {
+          var stepPercent = (index + 1) * stepWidth / 100;
+          var isActive = validPercent >= stepPercent * 100;
+          var isSuccess = successPercent >= stepPercent * 100;
+          return /*#__PURE__*/_jsx("div", {
+            className: "kage-progress-step ".concat(isSuccess ? 'kage-progress-step-success' : isActive ? 'kage-progress-step-active' : ''),
+            style: {
+              width: "".concat(stepWidth, "%"),
+              backgroundColor: isSuccess ? (success === null || success === void 0 ? void 0 : success.strokeColor) || '#52c41a' : isActive ? getStatusColor() : trailColor || '#f0f0f0'
+            }
+          }, index);
+        })
+      });
+    }
+
+    // 普通线形进度条
+    return /*#__PURE__*/_jsx("div", {
+      className: "kage-progress-outer",
+      style: {
+        height: width
+      },
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "kage-progress-inner",
+        style: {
+          backgroundColor: trailColor || '#f0f0f0'
+        },
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "kage-progress-bg ".concat(status === 'active' ? 'kage-progress-bg-active' : ''),
+          style: {
+            width: "".concat(validPercent, "%"),
+            backgroundColor: getStatusColor()
+          }
+        }), success && success.percent > 0 && /*#__PURE__*/_jsx("div", {
+          className: "kage-progress-success-bg",
+          style: {
+            width: "".concat(success.percent, "%"),
+            backgroundColor: success.strokeColor || '#52c41a'
+          }
+        })]
+      })
+    });
+  };
+
+  // 圆形进度条
+  var renderCircle = function renderCircle() {
+    var sizeMap = {
+      default: 120,
+      small: 80
+    };
+    var circleSize = typeof size === 'number' ? size : sizeMap[size] || 120;
+    var strokeWidthValue = strokeWidth || 6;
+    var radius = (circleSize - strokeWidthValue) / 2;
+    var circumference = 2 * Math.PI * radius;
+    var offset = circumference - validPercent / 100 * circumference;
+    var isDashboard = type === 'dashboard';
+    var dashArray = isDashboard ? circumference * 0.75 : circumference;
+    var dashOffset = isDashboard ? circumference * 0.75 - validPercent / 100 * circumference * 0.75 : offset;
+    return /*#__PURE__*/_jsxs("div", {
+      className: "kage-progress-circle",
+      style: {
+        width: circleSize,
+        height: circleSize
+      },
+      children: [/*#__PURE__*/_jsxs("svg", {
+        width: circleSize,
+        height: circleSize,
+        viewBox: "0 0 ".concat(circleSize, " ").concat(circleSize),
+        children: [/*#__PURE__*/_jsx("circle", {
+          className: "kage-progress-circle-trail",
+          cx: circleSize / 2,
+          cy: circleSize / 2,
+          r: radius,
+          fill: "none",
+          stroke: trailColor || '#f0f0f0',
+          strokeWidth: strokeWidthValue,
+          strokeDasharray: isDashboard ? "".concat(dashArray, " ").concat(circumference) : undefined,
+          transform: isDashboard ? "rotate(-90 ".concat(circleSize / 2, " ").concat(circleSize / 2, ")") : undefined
+        }), /*#__PURE__*/_jsx("circle", {
+          className: "kage-progress-circle-path",
+          cx: circleSize / 2,
+          cy: circleSize / 2,
+          r: radius,
+          fill: "none",
+          stroke: getStatusColor(),
+          strokeWidth: strokeWidthValue,
+          strokeLinecap: "round",
+          strokeDasharray: dashArray,
+          strokeDashoffset: dashOffset,
+          transform: isDashboard ? "rotate(-90 ".concat(circleSize / 2, " ").concat(circleSize / 2, ")") : "rotate(-90 ".concat(circleSize / 2, " ").concat(circleSize / 2, ")")
+        })]
+      }), showInfo && /*#__PURE__*/_jsx("div", {
+        className: "kage-progress-circle-text",
+        children: renderInfo()
+      })]
+    });
+  };
+  var classNames = ['kage-progress', "kage-progress-".concat(type), "kage-progress-status-".concat(status), className].filter(Boolean).join(' ');
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames,
+    style: style,
+    children: type === 'line' ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [renderLine(), showInfo && /*#__PURE__*/_jsx("div", {
+        className: "kage-progress-text",
+        children: renderInfo()
+      })]
+    }) : renderCircle()
+  });
+};
+export default Progress;