tango-ui-cw 0.0.1

package/src/component/TNotice/index.jsx

@@ -0,0 +1,38 @@
+// TNotice.jsx
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import "./TNotice.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);
+      setTimeout(() => {
+        setVisible(false);
+      }, 300);
+    }, 3000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  if (!visible) return null;
+
+  const fadeClass = isFading ? "fade-out" : "";
+
+  return (
+    <div className={`notice ${fadeClass}`}>
+      <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,
+};
+

package/src/component/TNotice/useNotice.jsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { createRoot } from "react-dom/client"; // 使用 React 18 的 createRoot
+import ClayNotice from "./index"; // 引入 ClayNotice 组件
+import successIcon from "../../assets/Notice/成功.png";
+import failIcon from "../../assets/Notice/失败.png";
+import cautionIcon from "../../assets/Notice/警告.png";
+
+// 创建全局通知容器
+let root; // 用于缓存 React 根实例
+
+export function useNotice() {
+  // 初始化通知容器
+  const initializeContainer = () => {
+    let container = document.getElementById("notification-container");
+    if (!container) {
+      container = document.createElement("div");
+      container.id = "notification-container";
+      document.body.appendChild(container);
+    }
+
+    if (!root) {
+      root = createRoot(container); // 仅初始化一次 createRoot
+    }
+
+    return container;
+  };
+
+  // 通知生成函数
+  const addNotice = (type, message) => {
+    initializeContainer(); // 确保容器已初始化
+
+    const iconMap = {
+      success: successIcon,
+      fail: failIcon,
+      caution: cautionIcon,
+    };
+
+    const icon = iconMap[type] || successIcon;
+
+    // 创建通知组件
+    const notice = (
+      <ClayNotice key={Date.now()} type={type} icon={icon} message={message} />
+    );
+
+    // 渲染通知
+    root.render(notice);
+  };
+
+  return {
+    success: (message) => addNotice("success", message),
+    fail: (message) => addNotice("fail", message),
+    caution: (message) => addNotice("caution", message),
+  };
+}

package/src/component/TSearch/TSearch.css

@@ -0,0 +1,90 @@
+.search-input {
+  width: 300px;
+  height: 40px;
+  border-radius: 8px;
+  border: 1px solid #ccc;
+  padding: 8px 12px;
+  font-size: 14px;
+  color: black;
+  outline: none;
+  transition: all 0.3s ease;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  background-color: #fff;
+}
+
+.search-input:hover {
+  border-color: #888;
+}
+
+.search-input:focus {
+  border-color: #4caf50; /* Modern blue accent */
+  box-shadow: 0 0 5px rgba(0, 120, 212, 0.5); /* Subtle glow on focus */
+}
+
+.search-input-small {
+  height: 32px;
+  font-size: 12px;
+  padding: 6px 10px;
+}
+
+.search-input-medium {
+  height: 40px;
+  font-size: 14px;
+}
+
+.search-input-large {
+  height: 48px;
+  font-size: 16px;
+  padding: 10px 14px;
+}
+
+.search-input-huge {
+  height: 56px;
+  font-size: 18px;
+  padding: 12px 16px;
+}
+
+.search-input-disabled {
+  background-color: #f5f5f5;
+  color: #999;
+  border-color: #ddd;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.search-input-error {
+  border-color: #d93025;
+  background-color: #fef2f2;
+  color: #d93025;
+}
+
+.search-input-error:focus {
+  box-shadow: 0 0 5px rgba(217, 48, 37, 0.5);
+}
+.search-button {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-family: Arial, sans-serif;
+  border: none;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 6px;
+  transition: all 0.3s;
+  -webkit-border-radius: 6px;
+  -moz-border-radius: 6px;
+  -ms-border-radius: 6px;
+  -o-border-radius: 6px;
+  letter-spacing: 2px;
+  background: #4caf50;
+  color: white;
+}
+.search-button:hover {
+  transition: 0.3s;
+  -webkit-animation: btn-content 1s;
+  animation: btn-content 1s;
+  outline: 0.1em solid transparent;
+  outline-offset: 0.2em;
+  box-shadow: 0 0 5px #4caf50;
+}

package/src/component/TSearch/index.jsx

@@ -0,0 +1,100 @@
+import React, { useRef } from "react";
+import PropTypes from "prop-types";
+import "./TSearch.css"; // 样式文件
+
+export default function Search(props) {
+  const {
+    size = "medium",
+    sx = {},
+    style: userStyle = {},
+    className: userClassName = "", // 允许用户自定义 className
+    onSearch,
+    value,
+    defaultValue = "",
+    disabled = false,
+    placeholder = "",
+    path = "",
+  } = props;
+
+  const inputRef = useRef(null); // 用于引用输入框的 DOM 节点
+
+  // 使用类名控制输入框的样式
+  const className = `search-input search-input-${size} ${
+    disabled ? "search-input-disabled" : ""
+  } ${userClassName}`;
+
+  // 合并 sx 和 style，确保 style 优先级更高
+  const combinedStyle = { ...sx, ...userStyle };
+
+  // 判断是否走受控模式
+  const isControlled = value !== undefined && onSearch !== undefined;
+
+  // 定义属性类型
+  Search.propTypes = {
+    size: PropTypes.oneOf(["small", "medium", "large", "huge"]),
+    sx: PropTypes.object, // 自定义样式对象
+    style: PropTypes.object, // 用户传入的 style 属性，保证 style 属性优先级最高
+    onSearch: PropTypes.func.isRequired, // 搜索事件回调
+    className: PropTypes.string, // 添加 className PropTypes
+    value: PropTypes.string, // 输入框的值 (受控模式)
+    defaultValue: PropTypes.string, // 输入框的初始值 (非受控模式)
+    disabled: PropTypes.bool, // 是否禁用
+    placeholder: PropTypes.string, // 占位符
+    path: PropTypes.string, // 占位符
+  };
+
+  // 默认属性
+  Search.defaultProps = {
+    size: "medium",
+    sx: {},
+    style: {},
+    onSearch: () => {},
+    className: "", // 默认值为空字符串
+    value: undefined,
+    defaultValue: "",
+    disabled: false,
+    placeholder: "请输入内容",
+    path: "",
+  };
+
+  return (
+    <div
+      className="search-container"
+      style={{ position: "relative", width: 300 }}
+    >
+      <input
+        className={className}
+        style={combinedStyle}
+        ref={!isControlled ? inputRef : undefined} // 仅在非受控模式下绑定 ref
+        onKeyDown={(e) =>
+          e.key === "Enter" &&
+          onSearch(isControlled ? value : inputRef.current.value)
+        } // 回车触发 onSearch
+        value={isControlled ? value : undefined}
+        defaultValue={!isControlled ? defaultValue : undefined}
+        disabled={disabled}
+        placeholder={placeholder}
+      />
+      <button
+        className="search-button"
+        onClick={() => onSearch(isControlled ? value : inputRef.current.value)} // 点击按钮触发 onSearch
+      >
+        {path ? (
+          <img
+            src={path}
+            alt="search-logo"
+            style={{
+              width: 16,
+              height: 16,
+              marginTop: 2,
+              marginBottom: -3,
+            }}
+          />
+        ) : (
+          "搜索"
+        )}
+      </button>
+    </div>
+  );
+};
+

package/src/component/TSpace/TSpace.css

@@ -0,0 +1,43 @@
+.space,.space-default{
+    width: auto;
+    height: auto;;
+}
+.space-inline{
+    display: inline-block;
+}
+.space-fixed{
+    position: fixed
+}
+.space-absolute{
+    position: absolute
+}
+.space-relative{
+    position: relative
+}
+.space-circle{
+    border-radius: 50%;
+    -webkit-border-radius: 50%;
+    -moz-border-radius: 50%;
+    -ms-border-radius: 50%;
+    -o-border-radius: 50%;
+}
+/* 三角形盒子 */
+.space-triangle {
+    width: 0;
+    height: 0;
+    border-left: 50px solid transparent; 
+    border-right: 50px solid transparent;
+    border-bottom: 100px solid #4caf50;
+  }
+  
+  /* 半圆盒子 */
+  .space-halfCircle {
+    width: 100px;
+    height: 50px;
+    background: #4caf50;
+    border-top-left-radius: 100px; 
+    border-top-right-radius: 100px; 
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  

package/src/component/TSpace/index.jsx

@@ -0,0 +1,60 @@
+import React from "react";
+import PropTypes from "prop-types";
+import "./TSpace.css"; // 引入样式文件
+import { useTangoStyle } from "../CSSFab/useTangoStyle"; // 导入 useTStyle 函数
+
+const Space = React.forwardRef((props, ref) => {
+  const {
+    sx = {},
+    style: userStyle = {},
+    className: userClassName = "",
+    onClick,
+    children,
+    type = "default",
+  } = props;
+
+  const className = `space space-${type} ${userClassName}`;
+  const sxStyle = useTangoStyle(sx); // 用于接收 sx 属性设置的样式
+  const combinedStyle = { ...sxStyle, ...userStyle }; // 合并 sx 和 style
+
+  return (
+    <div
+      ref={ref}
+      style={combinedStyle}
+      onClick={onClick}
+      className={className}
+    >
+      {children}
+    </div>
+  );
+});
+
+// 定义 PropTypes
+Space.propTypes = {
+  type: PropTypes.oneOf([
+    "default",
+    "inline",
+    "circle",
+    "triangle",
+    "halfCircle",
+    "fixed",
+    "absolute",
+    "relative",
+  ]),
+  sx: PropTypes.object,
+  style: PropTypes.object,
+  onClick: PropTypes.func,
+  className: PropTypes.string,
+  children: PropTypes.node.isRequired,
+};
+
+// 默认属性
+Space.defaultProps = {
+  type: "default",
+  sx: {},
+  style: {},
+  onClick: () => {},
+  className: "",
+};
+
+export { Space };  // 使用命名导出

package/src/component/TTable/TTable.css

@@ -0,0 +1,26 @@
+.custom-table-wrapper {
+  overflow-x: auto;
+}
+
+.custom-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+  color: #333;
+}
+
+.custom-table thead {
+  background-color: #4caf50;
+  color: white;
+}
+
+.custom-table th,
+.custom-table td {
+  border: 1px solid #ddd;
+  padding: 10px;
+  text-align: left;
+}
+
+.custom-table tbody tr:hover {
+  background-color: #f1f1f1;
+}

package/src/component/TTable/index.jsx

@@ -0,0 +1,77 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useTangoStyle } from "../CSSFab/useTangoStyle";
+import "./TTable.css";
+
+export default function Table({
+  dataSource,
+  columns,
+  sx = {},
+  style = {},
+  className = "",
+}) {
+  const sxStyle = useTangoStyle(sx);
+  const combinedStyle = { ...sxStyle, ...style };
+
+  return (
+    <div
+      className={`custom-table-wrapper ${className}`}
+      style={{
+        ...combinedStyle,
+        borderRadius: combinedStyle.borderRadius || 0,
+        overflow: "hidden",
+        border: "1px solid #ddd",
+      }}
+    >
+      <table className="custom-table">
+        <thead>
+          <tr>
+            {columns?.map((col) => (
+              <th key={col.key || col.dataIndex}>{col.title}</th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {dataSource.map((row) => (
+            <tr key={row.key}>
+              {columns.map((col) => (
+                <td key={col.key || col.dataIndex}>
+                  {col.render
+                    ? col.render(
+                        row[col.dataIndex],
+                        row,
+                        dataSource.indexOf(row)
+                      )
+                    : row[col.dataIndex]}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+Table.propTypes = {
+  dataSource: PropTypes.array.isRequired,
+  columns: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.string.isRequired,
+      dataIndex: PropTypes.string.isRequired,
+      key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      render: PropTypes.func,
+    })
+  ).isRequired,
+  sx: PropTypes.object,
+  style: PropTypes.object,
+  className: PropTypes.string,
+};
+
+Table.defaultProps = {
+  dataSource: [],
+  sx: {},
+  style: {},
+  className: "",
+};
+

package/src/component/TTooltip/TTooltip.css

@@ -0,0 +1,105 @@
+/* Tooltip 容器样式 */
+.tooltip-wrapper {
+  position: relative; /* 相对定位，便于控制 tooltip 的位置 */
+  display: inline-block; /* 适配内联内容 */
+}
+
+/* Tooltip 的默认样式 */
+.tooltip {
+  position: absolute;
+  bottom: 150%; /* 定位到父元素上方 */
+  left: 50%; /* 水平居中 */
+  transform: translateX(-50%);
+  background: black;
+  color: white;
+  font-size: 16px;
+  padding: 8px 15px;
+  border-radius: 8px;
+  white-space: nowrap;
+  display: none; 
+  z-index: 999; /* 确保在顶层 */
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
+}
+
+/* 添加 Tooltip 的倒三角 */
+.tooltip::after {
+  content: ""; /* 空内容用于绘制形状 */
+  position: absolute;
+  top: 100%; /* 定位到 Tooltip 的下方 */
+  left: 50%; /* 水平居中 */
+  transform: translateX(-50%);
+  border-width: 8px; /* 调整三角形大小 */
+  border-style: solid;
+  border-color: black transparent transparent transparent; /* 黑色三角形，透明边框 */
+}
+
+/* Hover 状态时显示 Tooltip */
+.tooltip-wrapper:hover .tooltip {
+  display: block; /* Hover 时显示 */
+}
+
+/* Placement 样式 */
+/* Tooltip 显示在顶部 */
+.tooltip-wrapper.tooltip-top .tooltip {
+  bottom: 130%; /* 提示框在父元素上方 */
+  left: 47%;
+  transform: translateX(-50%);
+  margin-bottom: 8px; /* 与父元素的间距 */
+}
+
+.tooltip-wrapper.tooltip-top .tooltip::after {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-color: black transparent transparent transparent;
+}
+
+/* Tooltip 显示在底部 */
+.tooltip-wrapper.tooltip-bottom .tooltip {
+  top: 130%; /* 提示框在父元素下方 */
+  left: 45%;
+  height: 40px;
+  transform: translateX(-50%);
+  margin-top: 8px;
+}
+
+.tooltip-wrapper.tooltip-bottom .tooltip::after {
+  bottom: 100%;
+  left: 42%;
+  transform: translateY(-351%);
+  border-color: transparent transparent black transparent;
+}
+
+/* Tooltip 显示在左侧，有问题，暂时屏蔽，不提供左侧显示 */
+/* .tooltip-wrapper.tooltip-left .tooltip {
+  right: 130%; 
+  top: 50%;
+  height: 40px;
+
+  transform: translateY(-50%);
+  margin-right: 8px;
+}
+
+.tooltip-wrapper.tooltip-left .tooltip::after {
+  right: -8px;
+  top: 50%;
+  transform: translateY(-50%);
+  border-color: transparent transparent transparent black;
+} */
+
+/* Tooltip 显示在右侧 */
+.tooltip-wrapper.tooltip-right .tooltip {
+  left: 110%; /* 提示框在父元素右侧 */
+  top: 50%;
+  height: 40px;
+
+  transform: translateY(-50%);
+  margin-left: 8px;
+}
+
+.tooltip-wrapper.tooltip-right .tooltip::after {
+  left: -8px;
+  top: 28%;
+  transform: translateX(-52%);
+  border-color: transparent black transparent transparent;
+}

package/src/component/TTooltip/index.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import PropTypes from "prop-types";
+import "./TTooltip.css"; // 引入样式文件
+
+export default function Tooltip({ children, tooltipText, placement = "top" }) {
+  const className = `tooltip-wrapper tooltip-${placement}`;
+
+  return (
+    <div className={className}>
+      {children}
+      <div className="tooltip">{tooltipText}</div>
+    </div>
+  );
+};
+
+Tooltip.propTypes = {
+  children: PropTypes.node.isRequired, // 包裹的子内容
+  tooltipText: PropTypes.string.isRequired, // Tooltip 显示的文字内容
+  placement: PropTypes.oneOf(["top", "bottom", "right"]), // 支持的方向
+};
+
+Tooltip.defaultProps = {
+  placement: "top",
+};
+