tango-ui-cw 0.0.1

package/src/component/TInput/index.jsx

@@ -0,0 +1,102 @@
+import React from "react";
+import PropTypes from "prop-types";
+import "./TInput.css"; // 引入样式文件
+import { useTangoStyle } from "../CSSFab/useTangoStyle"; // 导入 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 className = `input input-${type} input-${size} ${
+    disabled ? "input-disabled" : ""
+  } ${userClassName}` ;
+
+  // 用于接收 sx 属性设置的属性样式
+  const sxStyle = useTangoStyle(sx);
+
+  // 合并 sx 和 style，确保 style 优先级更高
+  const combinedStyle = { ...sxStyle, ...userStyle };
+
+  // 定义 HTML 的 input type 属性
+  const inputType = type === "password" ? "password" : "text";
+
+  // 判断是否走受控模式
+  const isControlled = value !== undefined && onChange !== undefined;
+
+  // 定义属性类型
+  Input.propTypes = {
+    type: PropTypes.oneOf(["default", "textarea", "password"]),
+    size: PropTypes.oneOf(["small", "medium", "large", "huge"]),
+    sx: PropTypes.object, // 自定义样式对象
+    style: PropTypes.object, // 用户传入的 style 属性，保证 style 属性优先级最高
+    onClick: PropTypes.func, // 点击事件
+    onChange: PropTypes.func, // 输入值变化事件
+        className: PropTypes.string, // 添加 className PropTypes
+    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,
+  };
+
+  return (
+    <div>
+      {type === "textarea" ? (
+        <textarea
+          className={className}
+          style={combinedStyle} // 应用解析后的内联样式
+          onClick={onClick}
+          onChange={onChange && ((e) => onChange(e.target.value))} // 如果提供 onChange，则绑定事件
+          value={isControlled ? value : undefined} // 受控模式
+          defaultValue={!isControlled ? defaultValue : undefined} // 非受控模式
+          disabled={disabled}
+          placeholder={placeholder}
+          maxLength={maxlength} 
+        />
+      ) : (
+        <input
+          className={className}
+          style={combinedStyle} // 应用解析后的内联样式
+          type={inputType}
+          onClick={onClick}
+          onChange={onChange && ((e) => onChange(e.target.value))} // 如果提供 onChange，则绑定事件
+          value={isControlled ? value : undefined} // 受控模式
+          defaultValue={!isControlled ? defaultValue : undefined} // 非受控模式
+          disabled={disabled}
+          placeholder={placeholder}
+          maxLength={maxlength} 
+        />
+      )}
+    </div>
+  );
+};
+

package/src/component/TLayout/TLayout.css

@@ -0,0 +1,88 @@
+/* 公共样式 */
+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

@@ -0,0 +1,77 @@
+import React from "react";
+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.css

@@ -0,0 +1,54 @@
+.line {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    width: 100%;
+  }
+  
+  .line-small {
+    margin: 2px 0;
+  }
+  
+  .line-medium {
+    margin: 6px 0;
+  }
+  
+  .line-large {
+    margin: 10px 0;
+  }
+  
+  .line-huge {
+    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;
+  }
+  
+  /* 如果没有文字，移除伪元素的间隔 */
+  .line:not(:has(.line-text))::before,
+  .line:not(:has(.line-text))::after {
+    margin: 0;
+  }
+  
+  .line-text {
+    padding: 0 5px;
+    color: inherit; /* 继承文本颜色 */
+    background-color: transparent;
+    white-space: nowrap;
+    z-index: 1;
+  }
+  

package/src/component/TLine/index.jsx

@@ -0,0 +1,57 @@
+// 封装的hr组件
+import React from "react";
+import PropTypes from "prop-types";
+import "./TLine.css"; // 引入样式文件
+import { useTangoStyle } from "../CSSFab/useTangoStyle"; // 导入 useTangoStyle 函数
+
+export default function Line(props) {
+  // 接收属性参数，调整Space样式
+  const {
+    sx = {},
+    style: userStyle = {},
+    className: userClassName = "",
+    onClick,
+    children,
+    size = "medium",
+  } = props;
+
+  const className = `line line-${size} ${
+    children ? "line-has-text" : "line-no-text"
+  } ${userClassName}`;
+
+  // 用于接收 sx 属性设置的属性样式
+  const sxStyle = useTangoStyle(sx);
+
+  // 合并 sx 和 style，确保 style 优先级更高
+  const combinedStyle = { ...sxStyle, ...userStyle };
+
+  // 定义属性类型
+  Line.propTypes = {
+    sx: PropTypes.object, // 自定义样式对象
+    size: PropTypes.oneOf(["small", "medium", "large", "huge"]), // 间隔间隙
+    style: PropTypes.object, // 用户传入的 style 属性，保证style属性优先级最高
+    onClick: PropTypes.func, // 点击事件
+    className: PropTypes.string, // 添加 className PropTypes
+    children: PropTypes.node.isRequired, // 按钮内容
+  };
+
+  // 默认属性
+  Line.defaultProps = {
+    sx: {},
+    size: "medium",
+    style: {},
+    onClick: () => {},
+    className: "", // 默认值为空字符串
+  };
+
+  return (
+    <div
+      style={combinedStyle} // 应用合并后的内联样式
+      onClick={onClick}
+      className={className}
+    >
+      {children && <div className="line-text">{children}</div>}
+    </div>
+  );
+};
+

package/src/component/TMark/TMark.css

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

package/src/component/TMark/index.jsx

@@ -0,0 +1,78 @@
+import React from "react";
+import PropTypes from "prop-types";
+import "./TMark.css"; // 引入样式文件
+import { useTangoStyle } from "../CSSFab/useTangoStyle"; // 导入 useTStyle 函数
+
+export default function Mark(props) {
+  const {
+    sx = {},
+    style: userStyle = {},
+    className: userClassName = "",
+    onClick,
+    children,
+    color = "default",
+    beauty = false, // 是否使用新样式
+  } = props;
+
+  // 用于接收 sx 属性设置的属性样式
+  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",
+      }
+    : {};
+
+  // 合并样式，确保 style 最高优先级
+  const combinedStyle = {
+    backgroundColor,
+    ...defaultStyle,
+    ...newStyle,
+    ...sxStyle,
+    ...userStyle,
+  };
+
+  return (
+    <div
+      style={combinedStyle}
+      onClick={onClick}
+      className={`mark ${userClassName}`} // 仅保留通用 className
+    >
+      {children}
+    </div>
+  );
+};
+
+// 定义属性类型
+Mark.propTypes = {
+  color: PropTypes.string, // color 支持颜色单词、#999、rgb
+  sx: PropTypes.object, // 自定义样式对象
+  style: PropTypes.object, // 用户传入的 style，保证 style 最高优先级
+  onClick: PropTypes.func, // 点击事件
+  className: PropTypes.string, // 自定义 className
+  children: PropTypes.node.isRequired, // 内容
+  beauty: PropTypes.bool, // 是否应用新样式
+};
+
+// 默认属性
+Mark.defaultProps = {
+  color: "default",
+  sx: {},
+  style: {},
+  onClick: () => {},
+  className: "",
+  beauty: false,
+};
+

package/src/component/TModal/TModal.css

@@ -0,0 +1,108 @@
+.modal-overlay {
+  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;
+}
+
+.modal-container {
+  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;
+}
+
+.modal-header {
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 16px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.modal-content {
+  margin-bottom: 24px;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.modal-closeBtn {
+  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;
+  }
+}
+
+.fade-in {
+  animation: fade-in 0.3s ease-in-out;
+  -webkit-animation: fade-in 0.3s ease-in-out;
+}
+
+.fade-out {
+  animation: fade-out 0.3s ease-in-out;
+  -webkit-animation: fade-out 0.3s ease-in-out;
+}
+
+.scale-in {
+  animation: scale-in 0.3s ease-in-out;
+  -webkit-animation: scale-in 0.3s ease-in-out;
+}
+
+.scale-out {
+  animation: scale-out 0.3s ease-in-out;
+  -webkit-animation: scale-out 0.3s ease-in-out;
+}

package/src/component/TModal/index.jsx

@@ -0,0 +1,69 @@
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import "./TModal.css";
+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); // 标志是否在关闭动画中
+
+  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: () => {},
+  };
+
+  // 监听 open 状态的变化
+  useEffect(() => {
+    if (open) {
+      setShowAnimation(true);
+      setClosing(false); // 取消关闭状态
+    } else if (showAnimation) {
+      setClosing(true); // 触发关闭动画
+      setTimeout(() => {
+        setShowAnimation(false); // 关闭动画完成后隐藏
+        setClosing(false);
+      }, 300); // 动画时长 300ms
+    }
+  }, [open]);
+
+  function ok() {
+    console.log("确定按钮");
+    if (onClose) onClose();
+  }
+
+  return (
+    <>
+      {showAnimation && (
+        <div className={`modal-overlay ${closing ? "fade-out" : "fade-in"}`}>
+          <div className={`modal-container ${closing ? "scale-out" : "scale-in"}`}>
+            <div className="modal-header">
+              <h3>{title}</h3>
+              <div className="modal-closeBtn" onClick={onClose}></div>
+            </div>
+            <div className="modal-content">{children}</div>
+            <div className="modal-footer">
+              <TButton type="success" onClick={ok}>
+                {onText}
+              </TButton>
+              <TButton onClick={onClose}>{cancelText}</TButton>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+

package/src/component/TNotice/TNotice.css

@@ -0,0 +1,52 @@
+.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: slide-down 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;
+}
+
+/* 淡出动画 */
+.notice.fade-out {
+  opacity: 0; 
+  transform: translateX(-50%) translateY(-20px);
+}
+
+/* 定义从上到下的进入动画 */
+@keyframes slide-down {
+  0% {
+    transform: translateX(-50%) translateY(-50px);
+    opacity: 0;
+  }
+  90% {
+    transform: translateX(-50%) translateY(8px);
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(-50%) translateY(0);
+    opacity: 1;
+  }
+}