tango-ui-cw 0.0.1

package/src/component/CSSFab/useTangoStyle.jsx

@@ -0,0 +1,182 @@
+// 封装sx属性值
+export const useTangoStyle = (sx) => {
+  return Object.entries(sx).reduce((acc, [key, value]) => {
+    const pxValue = `${value}px`;
+
+    switch (key) {
+      case "mt":
+        acc.marginTop = typeof value === "number" ? `${value}px` : value;
+        break;
+      case "mr":
+        acc.marginRight = typeof value === "number" ? `${value}px` : value;
+        break;
+      case "mb":
+        acc.marginBottom = typeof value === "number" ? `${value}px` : value;
+        break;
+      case "ml":
+        acc.marginLeft = typeof value === "number" ? `${value}px` : value;
+        break;
+      case "m":
+        acc.margin = typeof value === "number" ? `${value}px` : value;
+        break;
+
+      case "pt":
+        acc.paddingTop = pxValue;
+        break;
+      case "pr":
+        acc.paddingRight = pxValue;
+        break;
+      case "pb":
+        acc.paddingBottom = pxValue;
+        break;
+      case "pl":
+        acc.paddingLeft = pxValue;
+        break;
+      case "p":
+        acc.padding = pxValue;
+        break;
+      case "br":
+        acc.borderRadius = typeof value === "number" ? `${value}px` : value;
+        break;
+      case "bg":
+        acc.background = value; // 直接使用传入的背景值
+        break;
+      case "c":
+        acc.color = value;
+        break;
+      case "b":
+        acc.border = value === 1 ? "1px solid red" : value; // 如果值是 1，则设置为 "1px solid red"
+        break;
+      case "center":
+        acc.position = "absolute"; // 设置绝对定位
+        acc.inset = 0; // 设置inset为0
+        acc.margin = "auto"; // 设置margin为auto，保证元素居中
+        break;
+      case "pot":
+        acc.top = pxValue;
+        break;
+      case "por":
+        acc.right = pxValue;
+        break;
+      case "pob":
+        acc.bottom = pxValue;
+        break;
+      case "pol":
+        acc.left = pxValue;
+        break;
+      case "rel":
+        acc.position = "relative"; // 设置相对定位
+        break;
+      case "ab":
+        acc.position = "absolute"; // 设置绝对定位
+        break;
+      case "fixed":
+        acc.position = "fixed"; // 设置窗口定位
+        break;
+      case "w":
+        acc.width = pxValue;
+        break;
+      case "h":
+        acc.height = pxValue;
+        break;
+      case "vw":
+        acc.width = `${value}vw`; // 将宽度值转换为 vw 单位
+        break;
+      case "vh":
+        acc.height = `${value}vh`; // 将高度值转换为 vh 单位
+        break;
+      case "presentw":
+        acc.width = `${value}%`; // 将宽度值转换为 % 单位
+        break;
+      case "presenth":
+        acc.height = `${value}%`; // 将高度值转换为 % 单位
+        break;
+      case "mw":
+        acc.minWidth = pxValue;
+        break;
+      case "mh":
+        acc.minHieght = pxValue;
+        break;
+      case "fl":
+        acc.float = "left";
+        break;
+      case "fr":
+        acc.float = "right";
+        break;
+      case "size":
+        acc.fontSize = pxValue;
+        break;
+      case "tac":
+        acc.textAlign = "center";
+        break;
+      case "z":
+        acc.zIndex = value;
+        break;
+      case "tran":
+        acc.transition = `${value}s`;
+        break;
+      case "flex":
+        acc.display = "flex";
+        break;
+      case "aic":
+        acc.alignItems = "center";
+        break;
+      case "jcc":
+        acc.justifyContent = "center";
+        break;
+      case "jc":
+        acc.justifyContent = value;
+        break;
+      case "oh":
+        acc.overflow = "hidden";
+        break;
+      case "ohauto":
+        acc.overflow = "auto";
+        break;
+      case "op":
+        acc.opacity = value;
+        break;
+      case "none":
+        acc.display = "none";
+        break;
+      case "ar":
+        acc.aspectRatio = value;
+        break;
+      case "ls":
+        acc.letterSpacing = pxValue;
+        break;
+      case "lh":
+        acc.lineHeight = pxValue;
+        break;
+      case "fwb":
+        acc.fontWeight = "bold";
+        break;
+      case "boxsizing":
+        acc.boxSizing = "border-box";
+        break;
+      case "boxshadow":
+        acc.boxShadow = value;
+        break;
+
+      case "f":
+        acc.flex = typeof value === "number" ? value : `${value}`; // 支持数字或字符串
+        break;
+      case "bColor":
+        acc.borderColor = value; // 直接使用传入的背景值
+        break;
+      case "bgSize":
+        acc.backgroundSize = value; // 直接使用传入的背景值
+        break;
+      case "bgPosition":
+        acc.backgroundPosition = value; // 直接使用传入的背景值
+        break;
+      case "bgRepeat":
+        acc.backgroundRepeat = value; // 直接使用传入的背景值
+        break;
+      default:
+        acc[key] = value; // 允许其他样式直接传入，理论上可以支持所有的CSS样式传入
+    }
+
+    return acc;
+  }, {});
+};

package/src/component/MaterialButton/MaterialButton.css

@@ -0,0 +1,64 @@
+.material-btn {
+  position: relative;
+  overflow: hidden;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-family: Arial, sans-serif;
+  font-weight: 500;
+  color: white;
+  background-color: #4caf50;
+  transition: background-color 0.3s ease;
+  user-select: none;
+  outline: none;
+  padding: 10px 20px;
+}
+
+.material-btn:hover:not(.material-btn-disabled) {
+  background-color: #45a047;
+}
+
+.material-btn:active:not(.material-btn-disabled) {
+  background-color: #388e3c;
+}
+
+/* 不同大小 */
+.material-btn-small {
+  font-size: 12px;
+  padding: 6px 12px;
+}
+
+.material-btn-medium {
+  font-size: 14px;
+  padding: 10px 20px;
+}
+
+.material-btn-large {
+  font-size: 18px;
+  padding: 14px 28px;
+}
+
+/* 禁用 */
+.material-btn-disabled {
+  background-color: #e0e0e0;
+  color: #a0a0a0;
+  cursor: not-allowed;
+}
+
+/* 波纹效果 */
+.ripple {
+  position: absolute;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.6);
+  transform: scale(0);
+  animation: ripple-effect 600ms linear;
+  pointer-events: none;
+  z-index: 0;
+}
+
+@keyframes ripple-effect {
+  to {
+    transform: scale(4);
+    opacity: 0;
+  }
+}

package/src/component/MaterialButton/index.jsx

@@ -0,0 +1,58 @@
+import React, { useRef } from "react";
+import "./MaterialButton.css"
+import { useTangoStyle } from "../CSSFab/useTangoStyle"; // 继续导入
+
+export default function MaterialButton({
+  size = "medium",
+  sx = {},
+  style = {},
+  className = "",
+  onClick,
+  children,
+  disabled = false,
+  ...rest
+}) {
+  const buttonRef = useRef(null);
+
+  const sxStyle = useTangoStyle(sx);  // 用你的自定义hook解析sx样式
+  const combinedStyle = { ...sxStyle, ...style }; // style优先
+
+  function handleRipple(e) {
+    if (disabled) return;
+
+    const button = buttonRef.current;
+    const circle = document.createElement("span");
+    const diameter = Math.max(button.clientWidth, button.clientHeight);
+    const radius = diameter / 2;
+
+    circle.classList.add("ripple");
+    circle.style.width = circle.style.height = `${diameter}px`;
+    circle.style.left = `${e.clientX - button.getBoundingClientRect().left - radius}px`;
+    circle.style.top = `${e.clientY - button.getBoundingClientRect().top - radius}px`;
+
+    const ripple = button.querySelector(".ripple");
+    if (ripple) ripple.remove();
+
+    button.appendChild(circle);
+  }
+
+  const sizeClass = `material-btn-${size}`;
+  const combinedClassName = `material-btn ${sizeClass} ${className} ${disabled ? "material-btn-disabled" : ""}`;
+
+  return (
+    <button
+      ref={buttonRef}
+      className={combinedClassName}
+      style={combinedStyle}
+      onClick={(e) => {
+        handleRipple(e);
+        onClick && onClick(e);
+      }}
+      disabled={disabled}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+}
+

package/src/component/MaterialInput/MaterialInput.css

@@ -0,0 +1,33 @@
+.materialInput .inputWrapper {
+  position: relative;
+  margin: 10px 0;
+  width: 100%;
+}
+
+.materialInputField {
+  width: 100%;
+  padding: 16px 8px 8px 8px;
+  font-size: 16px;
+  border: none;
+  border-bottom: 1px solid grey;
+  background: transparent;
+  outline: none;
+}
+
+.materialLabel {
+  position: absolute;
+  left: 8px;
+  top: 16px;
+  font-size: 16px;
+  color: grey;
+  transition: all 0.2s ease;
+  pointer-events: none;
+}
+
+/* label 上浮时 */
+.filled ~ .materialLabel,
+.float {
+  top: 2px;
+  font-size: 12px;
+  color: #45a047;
+}

package/src/component/MaterialInput/index.jsx

@@ -0,0 +1,29 @@
+// Material风格Input
+import { useState } from "react";
+import './MaterialInput.css';
+
+export default function FloatInput({ label, type = "text" }) {
+  const [focused, setFocused] = useState(false);
+  const [value, setValue] = useState("");
+
+  const isFloating = focused || value;
+
+  return (
+    <div className="materialInput">
+      <div className="inputWrapper">
+        <input
+          type={type}
+          className={`materialInputField ${isFloating ? "filled" : ""}`}
+          onFocus={() => setFocused(true)}
+          onBlur={() => setFocused(false)}
+          onChange={(e) => setValue(e.target.value)}
+          value={value}
+        />
+        <label className={`materialLabel ${isFloating ? "float" : ""}`}>
+          {label}
+        </label>
+      </div>
+    </div>
+  );
+}
+

package/src/component/TButton/TButton.css

@@ -0,0 +1,270 @@
+/* 默认按钮样式 */
+.btn {
+  font-family: Arial, sans-serif;
+  border: none;
+  cursor: pointer;
+  padding: 8px 16px;
+  border-radius: 8px;
+  transition: all 0.3s;
+  -webkit-border-radius: 8px;
+  -moz-border-radius: 8px;
+  -ms-border-radius: 8px;
+  -o-border-radius: 8px;
+  letter-spacing: 2px;
+}
+
+.btn:hover {
+  transition: 0.5s;
+  -webkit-animation: btn-content 1s;
+  animation: btn-content 1s;
+  outline: 0.1em solid transparent;
+  outline-offset: 0.2em;
+}
+
+/* 类型样式 */
+.btn-default {
+  background-color: rgb(213, 213, 213);
+  color: #000;
+}
+
+.btn-default:hover {
+  box-shadow: 0 0 0.4em 0 rgb(213, 213, 213);
+}
+
+.btn-transparent {
+  background-color: transparent;
+  color: black;
+}
+
+.btn-transparent:hover {
+  box-shadow: 0 0 0.4em 0 rgb(213, 213, 213);
+}
+
+.btn-danger {
+  background-color: #dc3545;
+  color: #fff;
+}
+
+.btn-danger:hover {
+  box-shadow: 0 0 0.4em 0 #dc3545;
+}
+
+.btn-success {
+  background-color: #4caf50;
+  color: #fff;
+}
+
+.btn-success:hover {
+  box-shadow: 0 0 0.4em 0 #4caf50;
+}
+
+/* 默认轮廓按钮 */
+.btn-outline {
+  background-color: transparent;
+  border-width: 1px;
+  border-color: #000;
+}
+
+/* 默认类型 */
+.btn-default.btn-outline {
+  color: #000;
+  border: 1px solid #d5d5d5;
+}
+
+.btn-default.btn-outline:hover {
+  box-shadow: 0 0 0.4em 0 #d5d5d5;
+}
+
+/* 成功类型 */
+.btn-success.btn-outline {
+  color: #28a745;
+  border: 1px solid #28a745;
+}
+
+.btn-success.btn-outline:hover {
+  box-shadow: 0 0 0.4em 0 #28a745;
+}
+
+/* 警告类型 */
+.btn-danger.btn-outline {
+  color: #dc3545;
+  border: 1px solid #dc3545;
+}
+
+.btn-danger.btn-outline:hover {
+  box-shadow: 0 0 0.4em 0 #dc3545;
+}
+
+/* 透明类型 */
+.btn-transparent.btn-outline {
+  color: black;
+  border: 1px solid #6c757d;
+}
+
+.btn-transparent.btn-outline:hover {
+  box-shadow: 0 0 0.4em 0 #6c757d;
+}
+
+/* 新拟态风格默认按钮 */
+.btn-Neumorphism {
+  font-family: Arial, sans-serif;
+  border: none;
+  cursor: pointer;
+  padding: 8px 16px;
+  border-radius: 8px;
+  background: #e0e0e0;
+  box-shadow:
+    4px 4px 8px #bebebe,
+    -4px -4px 8px #ffffff;
+  transition: all 0.2s ease-in-out;
+  color: white;
+}
+
+/* hover时的效果 */
+.btn-Neumorphism:hover {
+  box-shadow:
+    inset 4px 4px 8px rgba(190, 190, 190, 0.6),
+    inset -4px -4px 8px rgba(255, 255, 255, 0.8),
+    4px 4px 8px rgba(190, 190, 190, 0.6),
+    -4px -4px 8px rgba(255, 255, 255, 0.8);
+  transform: translateY(-2px);
+}
+
+
+/* 按下时的内凹效果 */
+.btn-Neumorphism:active {
+  box-shadow:
+    inset 4px 4px 8px #bebebe,
+    inset -4px -4px 8px #ffffff;
+    transform: translateY(1px);
+}
+
+/* 新拟态风格-成功类型 */
+.btn-success.btn-Neumorphism {
+  background-color: #28a745;
+  color: #ffffff;
+  box-shadow:
+    inset 4px 4px 8px rgba(20, 90, 37, 0.6),
+    inset -4px -4px 8px rgba(50, 200, 100, 0.8),
+    4px 4px 8px rgba(20, 90, 37, 0.3),
+    -4px -4px 8px rgba(50, 200, 100, 0.5);
+  border-radius: 8px;
+  transition: all 0.3s ease;
+}
+
+.btn-success.btn-Neumorphism:hover {
+  box-shadow:
+    inset 3px 3px 6px rgba(20, 90, 37, 0.8),
+    inset -3px -3px 6px rgba(50, 200, 100, 0.9),
+    3px 3px 6px rgba(20, 90, 37, 0.5),
+    -3px -3px 6px rgba(50, 200, 100, 0.7);
+  transform: translateY(-2px);
+}
+
+.btn-success.btn-Neumorphism:active {
+  box-shadow:
+    inset 4px 4px 8px rgba(20, 90, 37, 0.9),
+    inset -4px -4px 8px rgba(50, 200, 100, 1);
+  transform: translateY(1px);
+}
+
+/* 新拟态风格-透明按钮 */
+.btn-transparent.btn-Neumorphism {
+  background-color: transparent;
+  color: white;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  box-shadow:
+    4px 4px 8px rgba(190, 190, 190, 0.6),
+    -4px -4px 8px rgba(255, 255, 255, 0.8);
+  padding: 8px 16px;
+  font-family: Arial, sans-serif;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+
+/* 悬停状态 */
+.btn-transparent.btn-Neumorphism:hover {
+  box-shadow:
+    inset 4px 4px 8px rgba(190, 190, 190, 0.6),
+    inset -4px -4px 8px rgba(255, 255, 255, 0.8),
+    0 0 0.4em rgba(213, 213, 213, 0.8);
+  transform: translateY(-2px);
+}
+
+/* 按下状态 */
+.btn-transparent.btn-Neumorphism:active {
+  box-shadow:
+    inset 6px 6px 12px rgba(190, 190, 190, 0.8),
+    inset -6px -6px 12px rgba(255, 255, 255, 1);
+  transform: translateY(1px);
+}
+
+/* 新拟态风格-警告按钮 */
+.btn-danger.btn-Neumorphism {
+  background-color: #dc3545;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  box-shadow:
+    4px 4px 8px rgba(145, 40, 50, 0.6),
+    -4px -4px 8px rgba(255, 102, 112, 0.8);
+  padding: 8px 16px;
+  font-family: Arial, sans-serif;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+
+/* 悬停状态 */
+.btn-danger.btn-Neumorphism:hover {
+  box-shadow:
+    inset 4px 4px 8px rgba(145, 40, 50, 0.6),
+    inset -4px -4px 8px rgba(255, 102, 112, 0.8),
+    0 0 0.4em rgba(220, 53, 69, 0.8);
+  transform: translateY(-2px);
+}
+
+/* 按下状态 */
+.btn-danger.btn-Neumorphism:active {
+  box-shadow:
+    inset 6px 6px 12px rgba(145, 40, 50, 0.8),
+    inset -6px -6px 12px rgba(255, 102, 112, 1);
+  transform: translateY(1px);
+}
+
+
+
+
+
+/* 大小样式 */
+.btn-small {
+  font-size: 12px;
+  padding: 4px 8px;
+}
+
+.btn-medium {
+  font-size: 14px;
+  padding: 8px 16px;
+}
+
+.btn-large {
+  font-size: 16px;
+  padding: 12px 20px;
+}
+
+.btn-huge {
+  font-size: 25px;
+  padding: 18px 45px;
+}
+
+/* 禁用状态 */
+.btn-disabled {
+  background-color: #e0e0e0;
+  color: #a0a0a0;
+  cursor: not-allowed;
+}
+
+.btn-disabled:hover {
+  transition: 0s;
+  box-shadow: none;
+}

package/src/component/TButton/index.jsx

@@ -0,0 +1,74 @@
+// 封装的button组件
+import React from "react";
+import PropTypes from "prop-types";
+import "./TButton.css"; // 引入样式文件
+import { useTangoStyle } from "../CSSFab/useTangoStyle"; // 导入 useFastStyle 函数
+
+export default function Button(props) {
+  // 接收属性参数，调整按钮样式
+  const {
+    type = "default",
+    size = "medium",
+    sx = {},
+    style: userStyle = {},
+    className: userClassName = "", // 允许用户自定义 className
+    onClick,
+    children,
+    disabled,
+    outline,
+    Neumorphism,
+  } = props;
+
+  // 使用类名控制按钮的样式：按钮类型，按钮尺寸，按钮是否禁用
+  const className = `btn btn-${type} btn-${size} ${
+    disabled ? "btn-disabled" : ""
+  } ${outline ? "btn-outline" : ""} ${
+    Neumorphism ? "btn-Neumorphism" : ""
+  } ${userClassName}`; // 合并用户传入的 className
+
+  // 用于接收sx属性设置的属性样式
+  const sxStyle = useTangoStyle(sx);
+
+  // 合并 sx 和 style，确保 style 优先级更高
+  const combinedStyle = { ...sxStyle, ...userStyle };
+
+  // 定义属性类型
+  Button.propTypes = {
+    type: PropTypes.oneOf(["default", "transparent", "danger", "success"]), // 按钮类型:默认、透明、警告、成功
+    size: PropTypes.oneOf(["small", "medium", "large", "huge"]), // 按钮大小
+    sx: PropTypes.object, // 自定义样式对象
+    style: PropTypes.object, // 用户传入的 style 属性，保证style属性优先级最高
+    onClick: PropTypes.func, // 点击事件
+    className: PropTypes.string, // 添加 className PropTypes
+    children: PropTypes.node.isRequired, // 按钮内容
+    disabled: PropTypes.bool, // 是否禁用
+    outline: PropTypes.bool, // 是否为轮廓按钮
+    Neumorphism: PropTypes.bool, // 是否为新拟态风格按钮
+  };
+
+  // 默认属性
+  Button.defaultProps = {
+    type: "default",
+    size: "medium",
+    sx: {},
+    style: {},
+    onClick: () => {},
+    className: "", // 默认值为空字符串
+    disabled: false,
+    outline: false,
+    Neumorphism: false,
+  };
+
+  return (
+    <button
+      className={className}
+      style={combinedStyle} // 应用解析后的内联样式
+      onClick={onClick}
+      disabled={disabled}
+      outline={outline}
+      Neumorphism={Neumorphism}
+    >
+      {children}
+    </button>
+  );
+};