tango-ui-cw 0.0.2 → 0.2.0

package/src/component/TModal/{TModal.css → TModal.module.css}

@@ -1,108 +1,109 @@
-.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;
-}
+.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,69 +1,75 @@
-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>
-      )}
-    </>
-  );
-};
-
+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>
+      )}
+    </>
+  );
+};
+
+TModal.propTypes = {
+  children: PropTypes.node.isRequired,
+  title: PropTypes.string,
+  onText: PropTypes.string,
+  cancelText: PropTypes.string,
+  open: PropTypes.bool,
+  onClose: PropTypes.func,
+};
+
+TModal.defaultProps = {
+  title: "基础标题",
+  onText: "确定",
+  cancelText: "取消",
+  open: false,
+  onClose: () => {},
+};

package/src/component/TNotice/{TNotice.css → TNotice.module.css}

@@ -1,52 +1,50 @@
-.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;
-  }
-}
+.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,38 +1,37 @@
-// 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,
-};
-
+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>
+  );
+};
+
+TNotice.propTypes = {
+  type: PropTypes.oneOf(["success", "fail", "caution"]),
+  icon: PropTypes.string.isRequired,
+  message: PropTypes.string.isRequired,
+};
+
+

package/src/component/TNotice/useNotice.jsx

@@ -1,54 +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),
-  };
-}
+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),
+  };
+}