tango-ui-cw 0.1.0 → 0.2.1

package/src/component/TLayout/TLayout.css

@@ -1,88 +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; /* 主内容区域改为竖向排列 */
-  }
-}
+/* 公共样式 */
+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,77 +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,
-};
-
+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.module.css

@@ -0,0 +1,52 @@
+.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,57 +1,48 @@
-// 封装的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>
-  );
-};
-
+import React from "react";
+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>
+  );
+};
+
+TLine.propTypes = {
+  sx: PropTypes.object,
+  size: PropTypes.oneOf(["small", "medium", "large", "huge"]),
+  style: PropTypes.object,
+  onClick: PropTypes.func,
+  className: PropTypes.string,
+  children: PropTypes.node.isRequired,
+};
+
+TLine.defaultProps = {
+  sx: {},
+  size: "medium",
+  style: {},
+  onClick: () => {},
+  className: "",
+};
+

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

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

package/src/component/TMark/index.jsx

@@ -1,78 +1,69 @@
-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,
-};
-
+import React from "react";
+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>
+  );
+};
+
+TMark.propTypes = {
+  color: PropTypes.string,
+  sx: PropTypes.object,
+  style: PropTypes.object,
+  onClick: PropTypes.func,
+  className: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  beauty: PropTypes.bool,
+};
+
+TMark.defaultProps = {
+  color: "default",
+  sx: {},
+  style: {},
+  onClick: () => {},
+  className: "",
+  beauty: false,
+};