tango-ui-cw 0.1.0 → 0.2.0

package/src/component/TTable/index.jsx

@@ -1,77 +1,73 @@
-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: "",
-};
-
+import React from "react";
+import PropTypes from "prop-types";
+import { useTangoStyle } from "../CSSFab/useTangoStyle";
+import styles from "./TTable.module.css";
+
+export default function Table({
+  dataSource,
+  columns,
+  sx = {},
+  style = {},
+  className = "",
+}) {
+ const sxStyle = useTangoStyle(sx);
+  const combinedStyle = { ...sxStyle, ...style };
+
+  return (
+    <div
+      className={`${styles.wrapper} ${className}`}
+      style={{
+        ...combinedStyle,
+        borderRadius: combinedStyle.borderRadius || 0,
+        overflow: "hidden",
+        border: "1px solid #ddd",
+      }}
+    >
+      <table className={styles.table}>
+        <thead className={styles.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>
+  );
+};
+
+TTable.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,
+};
+
+TTable.defaultProps = {
+  dataSource: [],
+  sx: {},
+  style: {},
+  className: "",
+};
+

package/src/component/TTooltip/TTooltip.module.css

@@ -0,0 +1,66 @@
+.tooltipWrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.tooltip {
+  position: absolute;
+  padding: 8px 15px;
+  font-size: 16px;
+  color: white;
+  background-color: black;
+  border-radius: 8px;
+  white-space: nowrap;
+  z-index: 999;
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+/* 添加 Tooltip 的倒三角 */
+.tooltip::after {
+  content: "";
+  position: absolute;
+  border-width: 8px;
+  border-style: solid;
+}
+
+/* Placement 样式：top */
+.tooltipTop .tooltip {
+  bottom: 130%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: 8px;
+}
+.tooltipTop .tooltip::after {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-color: black transparent transparent transparent;
+}
+
+/* Placement 样式：bottom */
+.tooltipBottom .tooltip {
+  top: 130%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 8px;
+}
+.tooltipBottom .tooltip::after {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-color: transparent transparent black transparent;
+}
+
+/* Placement 样式：right */
+.tooltipRight .tooltip {
+  top: 50%;
+  left: 110%;
+  transform: translateY(-50%);
+  margin-left: 8px;
+}
+.tooltipRight .tooltip::after {
+  top: 50%;
+  left: -8px;
+  transform: translateY(-50%);
+  border-color: transparent black transparent transparent;
+}

package/src/component/TTooltip/index.jsx

@@ -1,25 +1,33 @@
-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",
-};
-
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import styles from "./TTooltip.module.css";
+
+export default function Tooltip({ children, tooltipText, placement = "top" }) {
+ const [hovered, setHovered] = useState(false);
+
+  return (
+    <div
+      className={`${styles.tooltipWrapper} ${styles[`tooltip${placement[0].toUpperCase() + placement.slice(1)}`]}`}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
+      {children}
+      {hovered && (
+        <div className={styles.tooltip}>
+          {tooltipText}
+        </div>
+      )}
+    </div>
+  );
+};
+
+TTooltip.propTypes = {
+  children: PropTypes.node.isRequired,
+  tooltipText: PropTypes.string.isRequired,
+  placement: PropTypes.oneOf(["top", "bottom", "right"]),
+};
+
+TTooltip.defaultProps = {
+  placement: "top",
+};
+

package/src/component/Tango/store.js

@@ -1,105 +1,105 @@
-import { useState, useEffect } from 'react';
-
-class TangoStore extends EventTarget {
-  constructor(initialState, options = {}, persistentFields = []) {
-    super();
-    this.state = { ...initialState };
-    this.storageKey = options.storageKey || 'tango-store-state'; // 存储键名
-    this.Eternity = options.Eternity || false; // 是否启用持久化
-    this.storageType = options.Storage || 'local'; // 默认为 'local', 可以选择 'session'
-    this.persistentFields = new Set(persistentFields); // 将数组转换为 Set，便于查找
-
-    // 根据选择的存储类型来决定使用哪种存储
-    this.storage = this.storageType === 'session' ? sessionStorage : localStorage;
-
-    // 加载本地存储的状态
-    if (this.Eternity) {
-      const storedState = this.storage.getItem(this.storageKey);
-      if (storedState) {
-        try {
-          const parsedState = JSON.parse(storedState);
-          this.state = { ...this.state, ...parsedState };
-        } catch (e) {
-          console.error('Failed to load persisted state:', e);
-        }
-      }
-    }
-  }
-
-  setState(newState) {
-    const hasChanged = Object.keys(newState).some(
-      (key) => this.state[key] !== newState[key]
-    );
-
-    if (!hasChanged) {
-      return; // 状态未改变，不派发事件
-    }
-
-    this.state = { ...this.state, ...newState };
-
-    if (this.Eternity) {
-      // 如果启用了持久化
-      if (this.persistentFields.size > 0) {
-        // 仅持久化指定字段
-        const filteredState = Object.keys(this.state).reduce((acc, key) => {
-          if (this.persistentFields.has(key)) {
-            acc[key] = this.state[key];
-          }
-          return acc;
-        }, {});
-        try {
-          this.storage.setItem(this.storageKey, JSON.stringify(filteredState));
-        } catch (e) {
-          console.error('Failed to persist state:', e);
-        }
-      } else {
-        // 默认持久化所有字段
-        try {
-          this.storage.setItem(this.storageKey, JSON.stringify(this.state));
-        } catch (e) {
-          console.error('Failed to persist state:', e);
-        }
-      }
-    }
-
-    // 通知订阅者状态变化
-    this.dispatchEvent(new CustomEvent('change', { detail: this.state }));
-  }
-
-  getState() {
-    return this.state;
-  }
-
-  subscribe(callback) {
-    const listener = (e) => callback(e.detail);
-    this.addEventListener('change', listener);
-    return () => this.removeEventListener('change', listener); // 取消订阅
-  }
-}
-
-// 提供创建 store 的方法
-export const createTangoStore = (initialState = {}, options = {}, persistentFields = []) => {
-  return new TangoStore(initialState, options, persistentFields);
-};
-
-// 提供 `useTango` Hook，供用户直接使用
-export const useTango = (store, key, defaultValue = undefined) => {
-  // 增强安全机制，确保 key 不存在时返回默认值
-  const [state, setState] = useState(() => {
-    const currentState = store.getState();
-    return currentState.hasOwnProperty(key) ? currentState[key] : defaultValue;
-  });
-
-  useEffect(() => {
-    const unsubscribe = store.subscribe((newState) => {
-      if (newState.hasOwnProperty(key)) {
-        setState(newState[key]);
-      } else {
-        setState(defaultValue); // key 不存在时返回默认值
-      }
-    });
-    return () => unsubscribe();
-  }, [store, key, defaultValue]);
-
-  return state;
-};
+import { useState, useEffect } from 'react';
+
+class TangoStore extends EventTarget {
+  constructor(initialState, options = {}, persistentFields = []) {
+    super();
+    this.state = { ...initialState };
+    this.storageKey = options.storageKey || 'tango-store-state'; // 存储键名
+    this.Eternity = options.Eternity || false; // 是否启用持久化
+    this.storageType = options.Storage || 'local'; // 默认为 'local', 可以选择 'session'
+    this.persistentFields = new Set(persistentFields); // 将数组转换为 Set，便于查找
+
+    // 根据选择的存储类型来决定使用哪种存储
+    this.storage = this.storageType === 'session' ? sessionStorage : localStorage;
+
+    // 加载本地存储的状态
+    if (this.Eternity) {
+      const storedState = this.storage.getItem(this.storageKey);
+      if (storedState) {
+        try {
+          const parsedState = JSON.parse(storedState);
+          this.state = { ...this.state, ...parsedState };
+        } catch (e) {
+          console.error('Failed to load persisted state:', e);
+        }
+      }
+    }
+  }
+
+  setState(newState) {
+    const hasChanged = Object.keys(newState).some(
+      (key) => this.state[key] !== newState[key]
+    );
+
+    if (!hasChanged) {
+      return; // 状态未改变，不派发事件
+    }
+
+    this.state = { ...this.state, ...newState };
+
+    if (this.Eternity) {
+      // 如果启用了持久化
+      if (this.persistentFields.size > 0) {
+        // 仅持久化指定字段
+        const filteredState = Object.keys(this.state).reduce((acc, key) => {
+          if (this.persistentFields.has(key)) {
+            acc[key] = this.state[key];
+          }
+          return acc;
+        }, {});
+        try {
+          this.storage.setItem(this.storageKey, JSON.stringify(filteredState));
+        } catch (e) {
+          console.error('Failed to persist state:', e);
+        }
+      } else {
+        // 默认持久化所有字段
+        try {
+          this.storage.setItem(this.storageKey, JSON.stringify(this.state));
+        } catch (e) {
+          console.error('Failed to persist state:', e);
+        }
+      }
+    }
+
+    // 通知订阅者状态变化
+    this.dispatchEvent(new CustomEvent('change', { detail: this.state }));
+  }
+
+  getState() {
+    return this.state;
+  }
+
+  subscribe(callback) {
+    const listener = (e) => callback(e.detail);
+    this.addEventListener('change', listener);
+    return () => this.removeEventListener('change', listener); // 取消订阅
+  }
+}
+
+// 提供创建 store 的方法
+export const createTangoStore = (initialState = {}, options = {}, persistentFields = []) => {
+  return new TangoStore(initialState, options, persistentFields);
+};
+
+// 提供 `useTango` Hook，供用户直接使用
+export const useTango = (store, key, defaultValue = undefined) => {
+  // 增强安全机制，确保 key 不存在时返回默认值
+  const [state, setState] = useState(() => {
+    const currentState = store.getState();
+    return currentState.hasOwnProperty(key) ? currentState[key] : defaultValue;
+  });
+
+  useEffect(() => {
+    const unsubscribe = store.subscribe((newState) => {
+      if (newState.hasOwnProperty(key)) {
+        setState(newState[key]);
+      } else {
+        setState(defaultValue); // key 不存在时返回默认值
+      }
+    });
+    return () => unsubscribe();
+  }, [store, key, defaultValue]);
+
+  return state;
+};

package/src/component/Tools/WaterMark/WaterMark.jsx

@@ -1,78 +1,78 @@
-// 加水印组件
-/**
- * 为图片添加水印并返回处理后的图片URL
- * @param {string} imageUrl - 图片的URL
- * @param {Object} watermarkConfig - 水印配置对象
- * @param {string} watermarkConfig.text - 水印内容
- * @param {number} [watermarkConfig.fontSize=30] - 水印文字大小
- * @param {string} [watermarkConfig.color='rgba(255, 255, 255, 0.5)'] - 水印文字颜色
- * @param {number} [watermarkConfig.rotate=30] - 水印文字旋转度数
- * @param {number} [watermarkConfig.spacing=100] - 水印文字间距
- * @param {number} [watermarkConfig.lineHeight=30] - 水印文字行高
- * @param {number} [watermarkConfig.opacity=0.5] - 水印文字透明度
- * @returns {Promise<string>} - 返回处理后的图片URL
- */
-export const addWatermarkToImage = (imageUrl, watermarkConfig) => {
-  return new Promise((resolve, reject) => {
-    const img = new Image();
-    img.crossOrigin = "anonymous"; // 解决跨域问题
-    img.src = imageUrl;
-
-    img.onload = () => {
-      const canvas = document.createElement("canvas");
-      const ctx = canvas.getContext("2d");
-
-      canvas.width = img.width;
-      canvas.height = img.height;
-
-      ctx.drawImage(img, 0, 0);
-
-      // 设置水印样式
-      ctx.font = `${watermarkConfig.fontSize || 30}px Arial`;
-      ctx.fillStyle = watermarkConfig.color || "rgba(255, 255, 255, 0.5)";
-      ctx.globalAlpha = watermarkConfig.opacity || 0.5;
-
-      const textWidth = ctx.measureText(watermarkConfig.text).width;
-      const textHeight = watermarkConfig.lineHeight || 30;
-      const spacing = watermarkConfig.spacing || 100;
-      const angle = ((watermarkConfig.rotate || 30) * Math.PI) / 180; // 将角度转换为弧度
-
-      // 保存初始状态
-      ctx.save();
-      // 将画布中心移到原点
-      ctx.translate(canvas.width / 2, canvas.height / 2);
-      // 旋转画布
-      ctx.rotate(angle);
-      // 将画布移回左上角
-      ctx.translate(-canvas.width / 2, -canvas.height / 2);
-
-      // 计算覆盖整个画布所需的起始点和步长
-      const diagonal = Math.sqrt(
-        canvas.width * canvas.width + canvas.height * canvas.height
-      );
-      const startX = -diagonal;
-      const startY = -diagonal;
-      const stepX = textWidth + spacing;
-      const stepY = textHeight + spacing;
-
-      for (let y = startY; y < canvas.height + diagonal; y += stepY) {
-        for (let x = startX; x < canvas.width + diagonal; x += stepX) {
-          ctx.fillText(watermarkConfig.text, x, y);
-        }
-      }
-
-      // 恢复画布到初始状态
-      ctx.restore();
-
-      // 根据图片URL的扩展名确定输出格式
-      const format = imageUrl.toLowerCase().endsWith(".png")
-        ? "image/png"
-        : "image/jpeg";
-      resolve(canvas.toDataURL(format));
-    };
-
-    img.onerror = (error) => {
-      reject(new Error("图片加载失败", error));
-    };
-  });
-};
+// 加水印组件
+/**
+ * 为图片添加水印并返回处理后的图片URL
+ * @param {string} imageUrl - 图片的URL
+ * @param {Object} watermarkConfig - 水印配置对象
+ * @param {string} watermarkConfig.text - 水印内容
+ * @param {number} [watermarkConfig.fontSize=30] - 水印文字大小
+ * @param {string} [watermarkConfig.color='rgba(255, 255, 255, 0.5)'] - 水印文字颜色
+ * @param {number} [watermarkConfig.rotate=30] - 水印文字旋转度数
+ * @param {number} [watermarkConfig.spacing=100] - 水印文字间距
+ * @param {number} [watermarkConfig.lineHeight=30] - 水印文字行高
+ * @param {number} [watermarkConfig.opacity=0.5] - 水印文字透明度
+ * @returns {Promise<string>} - 返回处理后的图片URL
+ */
+export const addWatermarkToImage = (imageUrl, watermarkConfig) => {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = "anonymous"; // 解决跨域问题
+    img.src = imageUrl;
+
+    img.onload = () => {
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+
+      canvas.width = img.width;
+      canvas.height = img.height;
+
+      ctx.drawImage(img, 0, 0);
+
+      // 设置水印样式
+      ctx.font = `${watermarkConfig.fontSize || 30}px Arial`;
+      ctx.fillStyle = watermarkConfig.color || "rgba(255, 255, 255, 0.5)";
+      ctx.globalAlpha = watermarkConfig.opacity || 0.5;
+
+      const textWidth = ctx.measureText(watermarkConfig.text).width;
+      const textHeight = watermarkConfig.lineHeight || 30;
+      const spacing = watermarkConfig.spacing || 100;
+      const angle = ((watermarkConfig.rotate || 30) * Math.PI) / 180; // 将角度转换为弧度
+
+      // 保存初始状态
+      ctx.save();
+      // 将画布中心移到原点
+      ctx.translate(canvas.width / 2, canvas.height / 2);
+      // 旋转画布
+      ctx.rotate(angle);
+      // 将画布移回左上角
+      ctx.translate(-canvas.width / 2, -canvas.height / 2);
+
+      // 计算覆盖整个画布所需的起始点和步长
+      const diagonal = Math.sqrt(
+        canvas.width * canvas.width + canvas.height * canvas.height
+      );
+      const startX = -diagonal;
+      const startY = -diagonal;
+      const stepX = textWidth + spacing;
+      const stepY = textHeight + spacing;
+
+      for (let y = startY; y < canvas.height + diagonal; y += stepY) {
+        for (let x = startX; x < canvas.width + diagonal; x += stepX) {
+          ctx.fillText(watermarkConfig.text, x, y);
+        }
+      }
+
+      // 恢复画布到初始状态
+      ctx.restore();
+
+      // 根据图片URL的扩展名确定输出格式
+      const format = imageUrl.toLowerCase().endsWith(".png")
+        ? "image/png"
+        : "image/jpeg";
+      resolve(canvas.toDataURL(format));
+    };
+
+    img.onerror = (error) => {
+      reject(new Error("图片加载失败", error));
+    };
+  });
+};