wssf-kage-ui 0.1.2 → 0.1.3

package/dist/esm/Popconfirm/style.less

@@ -0,0 +1,417 @@
+// Popconfirm 气泡确认框组件样式
+
+@prefix: kage-popconfirm;
+
+// 颜色变量
+@popconfirm-bg: #fff;
+@popconfirm-border-color: rgba(0, 0, 0, 0.06);
+@popconfirm-title-color: rgba(0, 0, 0, 0.85);
+@popconfirm-content-color: rgba(0, 0, 0, 0.65);
+@popconfirm-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);
+
+// 尺寸变量
+@popconfirm-arrow-size: 8px;
+@popconfirm-distance: 12px;
+
+// ============ 容器 ============
+.@{prefix}-wrapper {
+  position: relative;
+  display: inline-block;
+
+  &-disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+}
+
+// ============ 气泡确认框 ============
+.@{prefix} {
+  position: absolute;
+  top: 0;           // 显式声明，防止定位偏移
+  left: 0;          // 显式声明
+  z-index: 1050;
+  // 1. 显式声明高度自适应，防止被某些全局样式或计算逻辑干扰
+  height: auto !important; 
+  
+  // 2. 确保 display 模式允许内容撑开
+  display: block; 
+  
+  // 3. 宽度保持之前的优化
+  width: max-content;
+  min-width: 200px;
+  max-width: 350px;
+  
+  background-color: @popconfirm-bg;
+  border: 1px solid @popconfirm-border-color;
+  border-radius: 8px;
+  box-shadow: @popconfirm-shadow;
+  
+  font-size: 14px;
+  line-height: 1.5715;
+  
+  // --- 状态控制优化 ---
+  // 初始隐藏状态：不建议在初始状态就使用 scale(0.95)，
+  // 如果容器在隐藏时位置计算错误，可以尝试先去掉 display: inline-block 改为 block
+  display: block;    
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none; // 隐藏时禁止鼠标事件
+  
+  transform: scale(0.95);
+  transform-origin: center;
+  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
+  
+  word-wrap: break-word;
+  word-break: break-word;
+  box-sizing: border-box;
+}
+
+.@{prefix}-open {
+  opacity: 1;
+  visibility: visible;
+  transform: scale(1);
+  pointer-events: auto; // 显示时恢复鼠标事件
+}
+
+// ============ 内容 ============
+.@{prefix}-inner {
+  display: flex;
+  padding: 12px 16px;
+  gap: 12px;
+  
+  // 1. 关键修改：不要让宽度死锁
+  // width: 100%;       <-- 建议删掉，或改为 min-content/max-content
+  min-width: max-content; // 确保内部 flex 元素（图标+文字）能把这一层撑开
+  
+  // 2. 布局优化
+  align-items: flex-start;
+  box-sizing: border-box;
+  position: relative; // 必须是 relative，不能是 absolute！
+  z-index: 1;
+  
+  // 3. 防止文字在极窄空间下换行导致的坍塌
+  flex-wrap: nowrap; 
+}
+
+.@{prefix}-icon {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  margin-top: 2px;
+  font-size: 16px;
+  line-height: 1;
+  color: #faad14;
+  flex-shrink: 0;
+}
+
+.@{prefix}-content {
+  flex: 1;
+  min-width: 0;
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.@{prefix}-title {
+  color: @popconfirm-title-color;
+  font-weight: 500;
+  margin-bottom: 4px;
+  line-height: 1.5;
+  display: block;
+  word-wrap: break-word;
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+
+.@{prefix}-description {
+  color: @popconfirm-content-color;
+  font-size: 14px;
+  line-height: 1.5715;
+  margin-bottom: 12px;
+  display: block;
+  word-wrap: break-word;
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+
+// ============ 按钮 ============
+.@{prefix}-buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 8px;
+  flex-shrink: 0;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.@{prefix}-ok-btn,
+.@{prefix}-cancel-btn {
+  padding: 4px 15px;
+  font-size: 14px;
+  line-height: 1.5715;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+  border: 1px solid #d9d9d9;
+  background: #fff;
+  color: rgba(0, 0, 0, 0.85);
+
+  &:hover {
+    color: #1890ff;
+    border-color: #1890ff;
+  }
+
+  &:active {
+    color: #0958d9;
+    border-color: #0958d9;
+  }
+
+  &:disabled {
+    color: rgba(0, 0, 0, 0.25);
+    background: #f5f5f5;
+    border-color: #d9d9d9;
+    cursor: not-allowed;
+
+    &:hover {
+      color: rgba(0, 0, 0, 0.25);
+      border-color: #d9d9d9;
+    }
+  }
+}
+
+.@{prefix}-ok-btn-primary {
+  background: #1890ff;
+  border-color: #1890ff;
+  color: #fff;
+
+  &:hover {
+    background: #40a9ff;
+    border-color: #40a9ff;
+    color: #fff;
+  }
+
+  &:active {
+    background: #0958d9;
+    border-color: #0958d9;
+    color: #fff;
+  }
+
+  &:disabled {
+    background: #f5f5f5;
+    border-color: #d9d9d9;
+    color: rgba(0, 0, 0, 0.25);
+  }
+}
+
+// ============ 箭头 ============
+.@{prefix}-arrow {
+  position: absolute;
+  width: @popconfirm-arrow-size * 2;
+  height: @popconfirm-arrow-size * 2;
+  background-color: @popconfirm-bg;
+  border: 1px solid @popconfirm-border-color;
+  pointer-events: none;
+  z-index: 1;
+}
+
+// ============ 位置 - 上方 ============
+.@{prefix}-placement-top,
+.@{prefix}-placement-topLeft,
+.@{prefix}-placement-topRight {
+  .@{prefix}-arrow {
+    bottom: -(@popconfirm-arrow-size + 1px);
+    border-top: none;
+    border-left: none;
+    transform: rotate(45deg);
+  }
+}
+
+.@{prefix}-placement-top {
+  .@{prefix}-arrow {
+    left: 50%;
+    transform: translateX(-50%) rotate(45deg);
+  }
+}
+
+.@{prefix}-placement-topLeft {
+  .@{prefix}-arrow {
+    left: 16px;
+  }
+}
+
+.@{prefix}-placement-topRight {
+  .@{prefix}-arrow {
+    right: 16px;
+  }
+}
+
+// ============ 位置 - 下方 ============
+.@{prefix}-placement-bottom,
+.@{prefix}-placement-bottomLeft,
+.@{prefix}-placement-bottomRight {
+  .@{prefix}-arrow {
+    top: -(@popconfirm-arrow-size + 1px);
+    border-bottom: none;
+    border-right: none;
+    transform: rotate(45deg);
+  }
+}
+
+.@{prefix}-placement-bottom {
+  .@{prefix}-arrow {
+    left: 50%;
+    transform: translateX(-50%) rotate(45deg);
+  }
+}
+
+.@{prefix}-placement-bottomLeft {
+  .@{prefix}-arrow {
+    left: 16px;
+  }
+}
+
+.@{prefix}-placement-bottomRight {
+  .@{prefix}-arrow {
+    right: 16px;
+  }
+}
+
+// ============ 位置 - 左侧 ============
+.@{prefix}-placement-left,
+.@{prefix}-placement-leftTop,
+.@{prefix}-placement-leftBottom {
+  .@{prefix}-arrow {
+    right: -(@popconfirm-arrow-size + 1px);
+    border-left: none;
+    border-bottom: none;
+    transform: rotate(45deg);
+  }
+}
+
+.@{prefix}-placement-left {
+  .@{prefix}-arrow {
+    top: 50%;
+    transform: translateY(-50%) rotate(45deg);
+  }
+}
+
+.@{prefix}-placement-leftTop {
+  .@{prefix}-arrow {
+    top: 16px;
+  }
+}
+
+.@{prefix}-placement-leftBottom {
+  .@{prefix}-arrow {
+    bottom: 16px;
+  }
+}
+
+// ============ 位置 - 右侧 ============
+.@{prefix}-placement-right,
+.@{prefix}-placement-rightTop,
+.@{prefix}-placement-rightBottom {
+  .@{prefix}-arrow {
+    left: -(@popconfirm-arrow-size + 1px);
+    border-right: none;
+    border-top: none;
+    transform: rotate(45deg);
+  }
+}
+
+.@{prefix}-placement-right {
+  .@{prefix}-arrow {
+    top: 50%;
+    transform: translateY(-50%) rotate(45deg);
+  }
+}
+
+.@{prefix}-placement-rightTop {
+  .@{prefix}-arrow {
+    top: 16px;
+  }
+}
+
+.@{prefix}-placement-rightBottom {
+  .@{prefix}-arrow {
+    bottom: 16px;
+  }
+}
+
+// ============ 暗色模式适配 ============
+[data-theme='dark'],
+[data-prefers-color-scheme='dark'],
+[data-prefers-color='dark'],
+html.dark,
+body.dark,
+.dark {
+  .@{prefix} {
+    background-color: #1f1f1f;
+    border-color: rgba(255, 255, 255, 0.1);
+    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.32),
+      0 6px 16px 0 rgba(0, 0, 0, 0.48),
+      0 9px 28px 8px rgba(0, 0, 0, 0.2);
+  }
+
+  .@{prefix}-title {
+    color: rgba(255, 255, 255, 0.85);
+  }
+
+  .@{prefix}-description {
+    color: rgba(255, 255, 255, 0.65);
+  }
+
+  .@{prefix}-icon {
+    color: #faad14;
+  }
+
+  .@{prefix}-arrow {
+    background-color: #1f1f1f;
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+
+  .@{prefix}-cancel-btn {
+    background: #1f1f1f;
+    border-color: rgba(255, 255, 255, 0.3);
+    color: rgba(255, 255, 255, 0.85);
+
+    &:hover {
+      color: #1890ff;
+      border-color: #1890ff;
+    }
+
+    &:disabled {
+      background: rgba(255, 255, 255, 0.08);
+      border-color: rgba(255, 255, 255, 0.15);
+      color: rgba(255, 255, 255, 0.25);
+    }
+  }
+
+  .@{prefix}-ok-btn-primary {
+    background: #1890ff;
+    border-color: #1890ff;
+    color: #fff;
+
+    &:hover {
+      background: #40a9ff;
+      border-color: #40a9ff;
+    }
+
+    &:disabled {
+      background: rgba(255, 255, 255, 0.08);
+      border-color: rgba(255, 255, 255, 0.15);
+      color: rgba(255, 255, 255, 0.25);
+    }
+  }
+}
+

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;