wssf-kage-ui 0.1.0 → 0.1.1

package/dist/esm/Steps/index.js

@@ -0,0 +1,174 @@
+import React from 'react';
+import "./style.less";
+
+// ============ Step Item Type ============
+
+// ============ Steps Props ============
+
+// ============ Step Component ============
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Step = function Step(_ref) {
+  var item = _ref.item,
+    index = _ref.index,
+    status = _ref.status,
+    isLast = _ref.isLast,
+    direction = _ref.direction,
+    size = _ref.size,
+    progressDot = _ref.progressDot,
+    labelPlacement = _ref.labelPlacement,
+    clickable = _ref.clickable,
+    onClick = _ref.onClick;
+  var title = item.title,
+    description = item.description,
+    subTitle = item.subTitle,
+    icon = item.icon,
+    disabled = item.disabled;
+  var handleClick = function handleClick() {
+    if (clickable && !disabled && onClick) {
+      onClick();
+    }
+  };
+  var classNames = ['kage-steps-item', "kage-steps-item-".concat(status), isLast && 'kage-steps-item-last', disabled && 'kage-steps-item-disabled', clickable && !disabled && 'kage-steps-item-clickable'].filter(Boolean).join(' ');
+
+  // 渲染图标
+  var renderIcon = function renderIcon() {
+    // 自定义图标
+    if (icon) {
+      return /*#__PURE__*/_jsx("span", {
+        className: "kage-steps-icon-custom",
+        children: icon
+      });
+    }
+
+    // 点状
+    if (progressDot) {
+      var _dot = /*#__PURE__*/_jsx("span", {
+        className: "kage-steps-dot"
+      });
+      if (typeof progressDot === 'function') {
+        return progressDot(_dot, {
+          index: index,
+          status: status
+        });
+      }
+      return _dot;
+    }
+
+    // 默认图标
+    if (status === 'finish') {
+      return /*#__PURE__*/_jsx("span", {
+        className: "kage-steps-icon-check",
+        children: "\u2713"
+      });
+    }
+    if (status === 'error') {
+      return /*#__PURE__*/_jsx("span", {
+        className: "kage-steps-icon-error",
+        children: "\u2715"
+      });
+    }
+    return /*#__PURE__*/_jsx("span", {
+      className: "kage-steps-icon-number",
+      children: index + 1
+    });
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: classNames,
+    onClick: handleClick,
+    children: [!isLast && /*#__PURE__*/_jsx("div", {
+      className: "kage-steps-item-tail"
+    }), /*#__PURE__*/_jsx("div", {
+      className: "kage-steps-item-icon",
+      children: renderIcon()
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "kage-steps-item-content",
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "kage-steps-item-title",
+        children: [title, subTitle && /*#__PURE__*/_jsx("span", {
+          className: "kage-steps-item-subtitle",
+          children: subTitle
+        })]
+      }), description && /*#__PURE__*/_jsx("div", {
+        className: "kage-steps-item-description",
+        children: description
+      })]
+    })]
+  });
+};
+
+// ============ Steps Component ============
+export var Steps = function Steps(_ref2) {
+  var items = _ref2.items,
+    _ref2$current = _ref2.current,
+    current = _ref2$current === void 0 ? 0 : _ref2$current,
+    _ref2$direction = _ref2.direction,
+    direction = _ref2$direction === void 0 ? 'horizontal' : _ref2$direction,
+    _ref2$type = _ref2.type,
+    type = _ref2$type === void 0 ? 'default' : _ref2$type,
+    _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? 'default' : _ref2$size,
+    _ref2$progressDot = _ref2.progressDot,
+    progressDot = _ref2$progressDot === void 0 ? false : _ref2$progressDot,
+    _ref2$labelPlacement = _ref2.labelPlacement,
+    labelPlacement = _ref2$labelPlacement === void 0 ? 'horizontal' : _ref2$labelPlacement,
+    _ref2$initial = _ref2.initial,
+    initial = _ref2$initial === void 0 ? 0 : _ref2$initial,
+    globalStatus = _ref2.status,
+    onChange = _ref2.onChange,
+    _ref2$clickable = _ref2.clickable,
+    clickable = _ref2$clickable === void 0 ? false : _ref2$clickable,
+    _ref2$className = _ref2.className,
+    className = _ref2$className === void 0 ? '' : _ref2$className,
+    style = _ref2.style;
+  // 计算每个步骤的状态
+  var getStatus = function getStatus(index, item) {
+    // 优先使用 item 自身的 status
+    if (item.status) return item.status;
+
+    // 当前步骤
+    if (index === current) {
+      return globalStatus || 'process';
+    }
+    // 已完成步骤
+    if (index < current) {
+      return 'finish';
+    }
+    // 等待中步骤
+    return 'wait';
+  };
+  var classNames = ['kage-steps', "kage-steps-".concat(direction), "kage-steps-".concat(type), "kage-steps-".concat(size), progressDot && 'kage-steps-dot', "kage-steps-label-".concat(labelPlacement), className].filter(Boolean).join(' ');
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames,
+    style: style,
+    children: items.map(function (item, index) {
+      return /*#__PURE__*/_jsx(Step, {
+        item: item,
+        index: index + initial,
+        status: getStatus(index, item),
+        isLast: index === items.length - 1,
+        direction: direction,
+        size: size,
+        progressDot: progressDot,
+        labelPlacement: labelPlacement,
+        clickable: clickable || !!onChange,
+        onClick: onChange ? function () {
+          return onChange(index);
+        } : undefined
+      }, index);
+    })
+  });
+};
+
+// ============ Step 单独组件（用于 JSX 方式）============
+
+export var StepComponent = function StepComponent() {
+  return null;
+};
+StepComponent.displayName = 'Step';
+
+// 挂载子组件
+
+var ExportSteps = Steps;
+ExportSteps.Step = StepComponent;
+export default ExportSteps;

package/dist/esm/Steps/style.less

@@ -0,0 +1,507 @@
+// Steps 步骤条组件样式
+
+@prefix: kage-steps;
+
+// 颜色变量
+@steps-primary-color: #6366f1;
+@steps-wait-color: rgba(0, 0, 0, 0.45);
+@steps-finish-color: #6366f1;
+@steps-process-color: #6366f1;
+@steps-error-color: #ff4d4f;
+@steps-text-color: rgba(0, 0, 0, 0.88);
+@steps-description-color: rgba(0, 0, 0, 0.45);
+@steps-tail-color: rgba(0, 0, 0, 0.06);
+@steps-icon-bg: #fff;
+@steps-icon-size: 32px;
+@steps-icon-size-small: 24px;
+@steps-dot-size: 8px;
+
+// ============ 基础样式 ============
+.@{prefix} {
+  display: flex;
+  font-size: 14px;
+  line-height: 1.5;
+
+  * {
+    box-sizing: border-box;
+  }
+}
+
+// ============ 水平方向 ============
+.@{prefix}-horizontal {
+  flex-direction: row;
+
+  .@{prefix}-item {
+    flex: 1;
+    overflow: hidden;
+    position: relative;
+    padding-right: 16px;
+
+    &:last-child {
+      flex: none;
+      padding-right: 0;
+    }
+  }
+
+  .@{prefix}-item-tail {
+    position: absolute;
+    top: 16px;
+    left: @steps-icon-size + 8px;
+    right: 0;
+    height: 1px;
+    background: @steps-tail-color;
+
+    &::after {
+      content: '';
+      display: block;
+      width: 0;
+      height: 100%;
+      background: @steps-finish-color;
+      transition: width 0.3s ease;
+    }
+  }
+
+  .@{prefix}-item-finish .@{prefix}-item-tail::after {
+    width: 100%;
+  }
+}
+
+// ============ 垂直方向 ============
+.@{prefix}-vertical {
+  flex-direction: column;
+
+  .@{prefix}-item {
+    display: flex;
+    position: relative;
+    padding-bottom: 24px;
+
+    &:last-child {
+      padding-bottom: 0;
+    }
+  }
+
+  .@{prefix}-item-tail {
+    position: absolute;
+    top: @steps-icon-size + 8px;
+    left: 15px;
+    width: 1px;
+    height: calc(100% - @steps-icon-size - 8px);
+    background: @steps-tail-color;
+
+    &::after {
+      content: '';
+      display: block;
+      width: 100%;
+      height: 0;
+      background: @steps-finish-color;
+      transition: height 0.3s ease;
+    }
+  }
+
+  .@{prefix}-item-finish .@{prefix}-item-tail::after {
+    height: 100%;
+  }
+
+  .@{prefix}-item-content {
+    min-height: 48px;
+    padding-top: 4px;
+  }
+}
+
+// ============ 步骤项 ============
+.@{prefix}-item {
+  display: inline-flex;
+  align-items: flex-start;
+  white-space: nowrap;
+}
+
+.@{prefix}-item-clickable {
+  cursor: pointer;
+
+  &:hover .@{prefix}-item-title {
+    color: @steps-primary-color;
+  }
+}
+
+.@{prefix}-item-disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+// ============ 图标 ============
+.@{prefix}-item-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: @steps-icon-size;
+  height: @steps-icon-size;
+  margin-right: 8px;
+  font-size: 16px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  transition: all 0.3s ease;
+}
+
+.@{prefix}-icon-number {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border: 1px solid @steps-wait-color;
+  border-radius: 50%;
+  color: @steps-wait-color;
+  font-size: 14px;
+}
+
+.@{prefix}-icon-check,
+.@{prefix}-icon-error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  color: #fff;
+  font-size: 14px;
+}
+
+.@{prefix}-icon-check {
+  background: @steps-finish-color;
+}
+
+.@{prefix}-icon-error {
+  background: @steps-error-color;
+}
+
+.@{prefix}-icon-custom {
+  font-size: 24px;
+}
+
+// ============ 内容 ============
+.@{prefix}-item-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.@{prefix}-item-title {
+  font-size: 16px;
+  font-weight: 500;
+  color: @steps-text-color;
+  line-height: @steps-icon-size;
+  transition: color 0.3s ease;
+}
+
+.@{prefix}-item-subtitle {
+  margin-left: 8px;
+  font-size: 14px;
+  font-weight: normal;
+  color: @steps-description-color;
+}
+
+.@{prefix}-item-description {
+  font-size: 14px;
+  color: @steps-description-color;
+  margin-top: 4px;
+}
+
+// ============ 状态样式 ============
+.@{prefix}-item-wait {
+  .@{prefix}-icon-number {
+    border-color: @steps-wait-color;
+    color: @steps-wait-color;
+  }
+
+  .@{prefix}-item-title {
+    color: @steps-wait-color;
+  }
+}
+
+.@{prefix}-item-process {
+  .@{prefix}-icon-number {
+    border-color: @steps-process-color;
+    background: @steps-process-color;
+    color: #fff;
+  }
+
+  .@{prefix}-item-title {
+    color: @steps-text-color;
+    font-weight: 600;
+  }
+}
+
+.@{prefix}-item-finish {
+  .@{prefix}-icon-number {
+    border-color: @steps-finish-color;
+    color: @steps-finish-color;
+  }
+
+  .@{prefix}-item-title {
+    color: @steps-text-color;
+  }
+}
+
+.@{prefix}-item-error {
+  .@{prefix}-item-title {
+    color: @steps-error-color;
+  }
+
+  .@{prefix}-item-description {
+    color: @steps-error-color;
+  }
+}
+
+// ============ 小尺寸 ============
+.@{prefix}-small {
+  .@{prefix}-item-icon {
+    width: @steps-icon-size-small;
+    height: @steps-icon-size-small;
+    font-size: 12px;
+  }
+
+  .@{prefix}-icon-number {
+    font-size: 12px;
+  }
+
+  .@{prefix}-item-title {
+    font-size: 14px;
+    line-height: @steps-icon-size-small;
+  }
+
+  .@{prefix}-item-description {
+    font-size: 12px;
+  }
+
+  &.@{prefix}-horizontal .@{prefix}-item-tail {
+    top: 12px;
+    left: @steps-icon-size-small + 8px;
+  }
+
+  &.@{prefix}-vertical .@{prefix}-item-tail {
+    top: @steps-icon-size-small + 8px;
+    left: 11px;
+    height: calc(100% - @steps-icon-size-small - 8px);
+  }
+}
+
+// ============ 点状步骤条 ============
+.@{prefix}-dot {
+  .@{prefix}-item-icon {
+    width: @steps-dot-size;
+    height: @steps-dot-size;
+  }
+
+  .@{prefix}-dot {
+    display: block;
+    width: @steps-dot-size;
+    height: @steps-dot-size;
+    border-radius: 50%;
+    background: @steps-wait-color;
+    transition: all 0.3s ease;
+  }
+
+  .@{prefix}-item-process .@{prefix}-dot {
+    background: @steps-process-color;
+    transform: scale(1.5);
+  }
+
+  .@{prefix}-item-finish .@{prefix}-dot {
+    background: @steps-finish-color;
+  }
+
+  .@{prefix}-item-error .@{prefix}-dot {
+    background: @steps-error-color;
+  }
+
+  &.@{prefix}-horizontal {
+    .@{prefix}-item-tail {
+      top: 4px;
+      left: @steps-dot-size + 8px;
+    }
+
+    .@{prefix}-item-content {
+      margin-top: 8px;
+    }
+
+    .@{prefix}-item-title {
+      line-height: 1.5;
+    }
+  }
+
+  &.@{prefix}-vertical {
+    .@{prefix}-item-tail {
+      top: @steps-dot-size + 8px;
+      left: 3px;
+      height: calc(100% - @steps-dot-size - 8px);
+    }
+  }
+}
+
+// ============ 导航类型 ============
+.@{prefix}-navigation {
+  padding: 0;
+  background: transparent;
+
+  &.@{prefix}-horizontal {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+
+    .@{prefix}-item {
+      padding: 12px 32px;
+      margin-right: 0;
+      position: relative;
+      flex: none;
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: -1px;
+        left: 0;
+        right: 0;
+        height: 2px;
+        background: transparent;
+        transition: background 0.3s ease;
+      }
+    }
+
+    .@{prefix}-item-process::after {
+      background: @steps-process-color;
+    }
+
+    .@{prefix}-item-tail {
+      display: none;
+    }
+
+    .@{prefix}-item-icon {
+      display: none;
+    }
+
+    .@{prefix}-item-title {
+      line-height: 1.5;
+    }
+  }
+}
+
+// ============ 标签垂直布局 ============
+.@{prefix}-label-vertical {
+  &.@{prefix}-horizontal {
+    .@{prefix}-item {
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .@{prefix}-item-icon {
+      margin-right: 0;
+      margin-bottom: 8px;
+    }
+
+    .@{prefix}-item-content {
+      align-items: center;
+      text-align: center;
+    }
+
+    .@{prefix}-item-tail {
+      top: 16px;
+      left: 50%;
+      right: auto;
+      width: 100%;
+      margin-left: 16px;
+    }
+  }
+}
+
+// ============ 暗色模式适配 ============
+[data-theme='dark'],
+[data-prefers-color-scheme='dark'],
+[data-prefers-color='dark'] {
+  .@{prefix}-item-title {
+    color: rgba(255, 255, 255, 0.85);
+  }
+
+  .@{prefix}-item-subtitle,
+  .@{prefix}-item-description {
+    color: rgba(255, 255, 255, 0.45);
+  }
+
+  .@{prefix}-item-tail {
+    background: rgba(255, 255, 255, 0.12);
+  }
+
+  .@{prefix}-item-wait {
+    .@{prefix}-icon-number {
+      border-color: rgba(255, 255, 255, 0.45);
+      color: rgba(255, 255, 255, 0.45);
+    }
+
+    .@{prefix}-item-title {
+      color: rgba(255, 255, 255, 0.45);
+    }
+  }
+
+  .@{prefix}-item-process {
+    .@{prefix}-icon-number {
+      border-color: #818cf8;
+      background: #818cf8;
+    }
+
+    .@{prefix}-item-title {
+      color: rgba(255, 255, 255, 0.85);
+    }
+  }
+
+  .@{prefix}-item-finish {
+    .@{prefix}-icon-number {
+      border-color: #818cf8;
+      color: #818cf8;
+    }
+
+    .@{prefix}-icon-check {
+      background: #818cf8;
+    }
+
+    .@{prefix}-item-tail::after {
+      background: #818cf8;
+    }
+  }
+
+  .@{prefix}-item-error {
+    .@{prefix}-item-title,
+    .@{prefix}-item-description {
+      color: #ff7875;
+    }
+
+    .@{prefix}-icon-error {
+      background: #ff7875;
+    }
+  }
+
+  .@{prefix}-dot {
+    .@{prefix}-dot {
+      background: rgba(255, 255, 255, 0.45);
+    }
+
+    .@{prefix}-item-process .@{prefix}-dot {
+      background: #818cf8;
+    }
+
+    .@{prefix}-item-finish .@{prefix}-dot {
+      background: #818cf8;
+    }
+
+    .@{prefix}-item-error .@{prefix}-dot {
+      background: #ff7875;
+    }
+  }
+
+  .@{prefix}-navigation.@{prefix}-horizontal {
+    border-bottom-color: rgba(255, 255, 255, 0.12);
+
+    .@{prefix}-item-process::after {
+      background: #818cf8;
+    }
+  }
+
+  .@{prefix}-item-clickable:hover .@{prefix}-item-title {
+    color: #818cf8;
+  }
+}
+