tango-ui-cw 0.2.5 → 0.2.7

package/src/component/TInput/index.jsx

@@ -1,94 +0,0 @@
-import PropTypes from "prop-types";
-import styles from "./TInput.module.css"; // 模块化 CSS
-import { useTangoStyle } from "../CSSFab/useTangoStyle";
-
-export default function Input(props) {
-  const {
-    type = "default",
-    size = "medium",
-    sx = {},
-    style: userStyle = {},
-    className: userClassName = "", // 允许用户自定义 className
-    onClick,
-    onChange,
-    value,
-    defaultValue = "",
-    disabled = false,
-    placeholder = "",
-    maxlength
-  } = props;
-
-  
-  const isControlled = value !== undefined && onChange !== undefined;
-
-  const baseClass = styles.input;
-  const sizeClass = styles[`input${size.charAt(0).toUpperCase() + size.slice(1)}`] || "";
-  const disabledClass = disabled ? styles.inputDisabled : "";
-  const combinedClassName = `${baseClass} ${sizeClass} ${disabledClass} ${userClassName}`.trim();
-
-  const sxStyle = useTangoStyle(sx);
-  const combinedStyle = { ...sxStyle, ...userStyle };
-
-  const inputType = type === "password" ? "password" : "text";
-
-  return (
-    <div>
-      {type === "textarea" ? (
-        <textarea
-          className={combinedClassName}
-          style={combinedStyle}
-          onClick={onClick}
-          onChange={onChange && ((e) => onChange(e.target.value))}
-          value={isControlled ? value : undefined}
-          defaultValue={!isControlled ? defaultValue : undefined}
-          disabled={disabled}
-          placeholder={placeholder}
-          maxLength={maxlength}
-        />
-      ) : (
-        <input
-          className={combinedClassName}
-          style={combinedStyle}
-          type={inputType}
-          onClick={onClick}
-          onChange={onChange && ((e) => onChange(e.target.value))}
-          value={isControlled ? value : undefined}
-          defaultValue={!isControlled ? defaultValue : undefined}
-          disabled={disabled}
-          placeholder={placeholder}
-          maxLength={maxlength}
-        />
-      )}
-    </div>
-  );
-};
-
-Input.propTypes = {
-  type: PropTypes.oneOf(["default", "textarea", "password"]),
-  size: PropTypes.oneOf(["small", "medium", "large", "huge"]),
-  sx: PropTypes.object,
-  style: PropTypes.object,
-  onClick: PropTypes.func,
-  onChange: PropTypes.func,
-  className: PropTypes.string,
-  value: PropTypes.string,
-  defaultValue: PropTypes.string,
-  disabled: PropTypes.bool,
-  placeholder: PropTypes.string,
-  maxlength: PropTypes.number,
-};
-
-Input.defaultProps = {
-  type: "default",
-  size: "medium",
-  sx: {},
-  style: {},
-  onClick: () => {},
-  className: "",
-  onChange: undefined,
-  value: undefined,
-  defaultValue: "",
-  disabled: false,
-  placeholder: "",
-  maxlength: 524288,
-};

package/src/component/TLayout/TLayout.css

@@ -1,88 +0,0 @@
-/* 公共样式 */
-html,
-body {
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-.ultra {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  background-color: #f0f2f5;
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.clay-header {
-  background-color: #96d498;
-  color: #fff;
-  text-align: center;
-  height: 64px;
-  line-height: 64px;
-}
-
-.clay-main {
-  display: flex;
-  flex: 1; /* 占据剩余高度 */
-  width: 100%; /* 确保子元素水平分布 */
-  min-height: 120px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #4caf50;
-  color: #fff;
-
-}
-
-.clay-aside {
-  background-color: #6ccb6f;
-  color: #fff;
-  text-align: center;
-  padding: 16px;
-  min-width: 120px;
-min-height: 120px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.clay-right {
-  flex: 3;
-  display: flex;
-  flex-direction: column; /* 确保右侧是上下布局 */
-}
-
-.clay-content {
-  background-color: #4caf50;
-  color: #fff;
-  flex: 1;
-  text-align: center;
-  padding: 16px;
-min-height: 120px;
-display: flex;
-  align-items: center;
-  justify-content: center;
-
-}
-
-.clay-footer {
-  background-color: #96d498;
-  color: #fff;
-  text-align: center;
-  height: 64px;
-  line-height: 64px;
-}
-
-/* 支持自适应布局 */
-@media (max-width: 768px) {
-  .ultra {
-    flex-direction: column;
-  }
-  .clay-main {
-    flex-direction: column; /* 主内容区域改为竖向排列 */
-  }
-}

package/src/component/TLayout/index.jsx

@@ -1,76 +0,0 @@
-import PropTypes from "prop-types";
-import "./TLayout.css";
-
-// 定义基本组件
-export const Header = ({ children }) => <header>{children}</header>;
-export const Aside = ({ children }) => <aside>{children}</aside>;
-export const Content = ({ children }) => <div>{children}</div>;
-export const Footer = ({ children }) => <footer>{children}</footer>;
-
-export default function Layout(props) {
-  const { children, type, className: userClassName = "" } = props;
-  const className = `clay-layout clay-layout-${type} ${userClassName}`;
-
-  return (
-    <div className={className}>
-      {/* 第一种：上中下布局 */}
-      {type === "top-middle-bottom" && (
-        <div className="ultra">
-          <header className="clay-header">{children[0]}</header>
-          <main className="clay-main">{children[1]}</main>
-          <footer className="clay-footer">{children[2]}</footer>
-        </div>
-      )}
-
-      {/* 第二种：上下布局，下部分是左右布局 */}
-      {type === "top-bottom-split" && (
-        <div className="ultra">
-          <header className="clay-header">{children[0]}</header>
-          <main className="clay-main">
-            <aside className="clay-aside">{children[1]}</aside>
-            <div className="clay-content">{children[2]}</div>
-          </main>
-        </div>
-      )}
-
-      {/* 第三种：左右布局，右侧分为上下布局 */}
-      {type === "left-right-top-bottom" && (
-        <>
-          <header className="clay-header">{children[0]}</header>
-          <div className="clay-main">
-            <aside className="clay-aside">{children[1]}</aside>
-            <div className="clay-right">
-              <header className="clay-header">{children[2]}</header>
-              <div className="clay-content">{children[3]}</div>
-            </div>
-          </div>
-        </>
-      )}
-
-      {/* 第四种：左右布局，右侧分为上中下布局 */}
-      {type === "left-right-three-parts" && (
-        <div className="ultra">
-          <aside className="clay-aside">{children[0]}</aside>
-          <div className="clay-right">
-            <header className="clay-header">{children[1]}</header>
-            <main className="clay-main">{children[2]}</main>
-            <footer className="clay-footer">{children[3]}</footer>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-Layout.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string, // 添加 className PropTypes
-
-  type: PropTypes.oneOf([
-    "top-middle-bottom",
-    "top-bottom-split",
-    "left-right-top-bottom",
-    "left-right-three-parts",
-  ]).isRequired,
-};
-

package/src/component/TLine/TLine.module.css

@@ -1,52 +0,0 @@
-.line {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  width: 100%;
-}
-
-.lineSmall {
-  margin: 2px 0;
-}
-
-.lineMedium {
-  margin: 6px 0;
-}
-
-.lineLarge {
-  margin: 10px 0;
-}
-
-.lineHuge {
-  margin: 15px 0;
-}
-
-.line::before,
-.line::after {
-  content: "";
-  flex: 1;
-  height: 1px;
-  background-color: #b2b2b2;
-}
-
-.line::before {
-  margin-right: 10px;
-}
-
-.line::after {
-  margin-left: 10px;
-}
-
-.lineNoText::before,
-.lineNoText::after {
-  margin: 0;
-}
-
-.lineText {
-  padding: 0 5px;
-  color: inherit;
-  background-color: transparent;
-  white-space: nowrap;
-  z-index: 1;
-}

package/src/component/TLine/index.jsx

@@ -1,47 +0,0 @@
-import PropTypes from "prop-types";
-import styles from "./TLine.module.css"; // 使用 CSS Modules
-import { useTangoStyle } from "../CSSFab/useTangoStyle";
-
-export default function Line(props) {
-  // 接收属性参数，调整Space样式
-  const {
-    sx = {},
-    style: userStyle = {},
-    className: userClassName = "",
-    onClick,
-    children,
-    size = "medium",
-  } = props;
-
-  const hasText = !!children;
-  const sizeClass = styles[`line${size.charAt(0).toUpperCase() + size.slice(1)}`] || "";
-  const textClass = hasText ? styles.lineHasText : styles.lineNoText;
-  const combinedClassName = `${styles.line} ${sizeClass} ${textClass} ${userClassName}`.trim();
-
-  const sxStyle = useTangoStyle(sx);
-  const combinedStyle = { ...sxStyle, ...userStyle };
-
-  return (
-    <div style={combinedStyle} onClick={onClick} className={combinedClassName}>
-      {hasText && <div className={styles.lineText}>{children}</div>}
-    </div>
-  );
-};
-
-Line.propTypes = {
-  sx: PropTypes.object,
-  size: PropTypes.oneOf(["small", "medium", "large", "huge"]),
-  style: PropTypes.object,
-  onClick: PropTypes.func,
-  className: PropTypes.string,
-  children: PropTypes.node.isRequired,
-};
-
-Line.defaultProps = {
-  sx: {},
-  size: "medium",
-  style: {},
-  onClick: () => {},
-  className: "",
-};
-

package/src/component/TMark/TMark.module.css

@@ -1,6 +0,0 @@
-.mark {
-  width: auto;
-  height: auto;
-  display: inline-block;
-
-}

package/src/component/TMark/index.jsx

@@ -1,68 +0,0 @@
-import PropTypes from "prop-types";
-import styles from "./TMark.module.css"; // 使用 CSS Modules
-import { useTangoStyle } from "../CSSFab/useTangoStyle";
-
-export default function Mark(props) {
-  const {
-    sx = {},
-    style: userStyle = {},
-    className: userClassName = "",
-    onClick,
-    children,
-    color = "default",
-    beauty = false, // 是否使用新样式
-  } = props;
- const sxStyle = useTangoStyle(sx);
-
-  const backgroundColor = color === "default" ? "#ffe28d" : color;
-
-  const defaultStyle = {
-    width: "auto",
-    height: "auto",
-    display: "inline-block",
-  };
-
-  const newStyle = beauty
-    ? {
-        padding: "4px 8px",
-        borderRadius: "4px",
-      }
-    : {};
-
-  const combinedStyle = {
-    backgroundColor,
-    ...defaultStyle,
-    ...newStyle,
-    ...sxStyle,
-    ...userStyle,
-  };
-
-  return (
-    <div
-      style={combinedStyle}
-      onClick={onClick}
-      className={`${styles.mark} ${userClassName}`}
-    >
-      {children}
-    </div>
-  );
-};
-
-Mark.propTypes = {
-  color: PropTypes.string,
-  sx: PropTypes.object,
-  style: PropTypes.object,
-  onClick: PropTypes.func,
-  className: PropTypes.string,
-  children: PropTypes.node.isRequired,
-  beauty: PropTypes.bool,
-};
-
-Mark.defaultProps = {
-  color: "default",
-  sx: {},
-  style: {},
-  onClick: () => {},
-  className: "",
-  beauty: false,
-};

package/src/component/TModal/TModal.module.css

@@ -1,109 +0,0 @@
-.modalOverlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 999;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.modalContainer {
-  background-color: #fff;
-  padding: 20px;
-  border-radius: 8px;
-  width: 520px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-  position: relative;
-  margin-top: -350px;
-}
-
-.modalHeader {
-  font-size: 18px;
-  font-weight: bold;
-  margin-bottom: 16px;
-  display: flex;
-  justify-content: space-between;
-}
-
-.modalContent {
-  margin-bottom: 24px;
-}
-
-.modalFooter {
-  display: flex;
-  justify-content: flex-end;
-  gap: 10px;
-}
-
-.modalCloseBtn {
-  background-image: url('../../assets/关闭.png');
-  width: 15px;
-  height: 15px;
-  background-size: 100% 100%;
-  cursor: pointer;
-}
-
-/* 过渡动画 */
-@keyframes fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes fade-out {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-@keyframes scale-in {
-  from {
-    transform: scale(0.8);
-    opacity: 0;
-  }
-  to {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-@keyframes scale-out {
-  from {
-    transform: scale(1);
-    opacity: 1;
-  }
-  to {
-    transform: scale(0.8);
-    opacity: 0;
-  }
-}
-
-.fadeIn {
-  animation: fade-in 0.3s ease-in-out;
-  -webkit-animation: fade-in 0.3s ease-in-out;
-}
-
-.fadeOut {
-  animation: fade-out 0.3s ease-in-out;
-  -webkit-animation: fade-out 0.3s ease-in-out;
-}
-
-.scaleIn {
-  animation: scale-in 0.3s ease-in-out;
-  -webkit-animation: scale-in 0.3s ease-in-out;
-}
-
-.scaleOut {
-  animation: scale-out 0.3s ease-in-out;
-  -webkit-animation: scale-out 0.3s ease-in-out;
-}

package/src/component/TModal/index.jsx

@@ -1,75 +0,0 @@
-import React, { useEffect, useState } from "react";
-import PropTypes from "prop-types";
-import styles from "./TModal.module.css"; // CSS Modules 导入
-import TButton from "../TButton/index";
-
-export default function Modal(props) {
-  const { children, title, onText, cancelText, open, onClose } = props;
-  const [showAnimation, setShowAnimation] = useState(false); // 控制是否展示 Modal
-  const [closing, setClosing] = useState(false); // 标志是否在关闭动画中
-
-   useEffect(() => {
-    if (open) {
-      setShowAnimation(true);
-      setClosing(false);
-    } else if (showAnimation) {
-      setClosing(true);
-      setTimeout(() => {
-        setShowAnimation(false);
-        setClosing(false);
-      }, 300);
-    }
-  }, [open]);
-
-  function ok() {
-    console.log("确定按钮");
-    if (onClose) onClose();
-  }
-
-  return (
-    <>
-      {showAnimation && (
-        <div
-          className={`${styles.modalOverlay} ${
-            closing ? styles.fadeOut : styles.fadeIn
-          }`}
-        >
-          <div
-            className={`${styles.modalContainer} ${
-              closing ? styles.scaleOut : styles.scaleIn
-            }`}
-          >
-            <div className={styles.modalHeader}>
-              <h3>{title}</h3>
-              <div className={styles.modalCloseBtn} onClick={onClose}></div>
-            </div>
-            <div className={styles.modalContent}>{children}</div>
-            <div className={styles.modalFooter}>
-              <TButton type="success" onClick={ok}>
-                {onText}
-              </TButton>
-              <TButton onClick={onClose}>{cancelText}</TButton>
-            </div>
-          </div>
-        </div>
-      )}
-    </>
-  );
-};
-
-Modal.propTypes = {
-  children: PropTypes.node.isRequired,
-  title: PropTypes.string,
-  onText: PropTypes.string,
-  cancelText: PropTypes.string,
-  open: PropTypes.bool,
-  onClose: PropTypes.func,
-};
-
-Modal.defaultProps = {
-  title: "基础标题",
-  onText: "确定",
-  cancelText: "取消",
-  open: false,
-  onClose: () => {},
-};

package/src/component/TNotice/TNotice.module.css

@@ -1,50 +0,0 @@
-.notice {
-  display: inline-flex;
-  align-items: center;
-  justify-content: start;
-  padding: 8px 10px 8px 11px;
-  text-align: left;
-  border-radius: 8px;
-  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
-    0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
-  background-color: white;
-  color: black;
-  position: absolute;
-  top: 20px;
-  left: 50%;
-  transform: translateX(-50%);
-  animation: slideDown 0.1s ease-out;
-  transition: opacity 0.3s ease-out, transform 0.5s ease-out;
-}
-
-.notice img {
-  width: 20px;
-  height: 20px;
-  margin-right: 8px;
-  flex-shrink: 0;
-}
-
-.notice span {
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.fadeOut {
-  opacity: 0;
-  transform: translateX(-50%) translateY(-20px);
-}
-
-@keyframes slideDown {
-  0% {
-    transform: translateX(-50%) translateY(-50px);
-    opacity: 0;
-  }
-  90% {
-    transform: translateX(-50%) translateY(8px);
-    opacity: 1;
-  }
-  100% {
-    transform: translateX(-50%) translateY(0);
-    opacity: 1;
-  }
-}

package/src/component/TNotice/index.jsx

@@ -1,37 +0,0 @@
-import React, { useEffect, useState } from "react";
-import PropTypes from "prop-types";
-import styles from "./TNotice.module.css";
-
-export default function Notice({ type = "success", icon, message }) { // 使用默认参数
-  const [visible, setVisible] = useState(true);
-  const [isFading, setIsFading] = useState(false);
-
- useEffect(() => {
-    const timer = setTimeout(() => {
-      setIsFading(true);
-      const timer2 = setTimeout(() => {
-        setVisible(false);
-      }, 300);
-      return () => clearTimeout(timer2);
-    }, 3000);
-
-    return () => clearTimeout(timer);
-  }, []);
-
-  if (!visible) return null;
-
-  return (
-    <div className={`${styles.notice} ${isFading ? styles.fadeOut : ""}`}>
-      <img src={icon} alt={type} />
-      <span>{message}</span>
-    </div>
-  );
-};
-
-Notice.propTypes = {
-  type: PropTypes.oneOf(["success", "fail", "caution"]),
-  icon: PropTypes.string.isRequired,
-  message: PropTypes.string.isRequired,
-};
-
-