tango-ui-cw 0.2.0 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tango-ui-cw",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "A lightweight ui library with ClayW",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/component/TButton/index.jsx

@@ -40,7 +40,7 @@ export default function Button(props) {
     const combinedStyle = { ...sxStyle, ...userStyle };
 
   // 定义属性类型
-  TButton.propTypes = {
+  Button.propTypes = {
     type: PropTypes.oneOf(["default", "transparent", "danger", "success"]), // 按钮类型:默认、透明、警告、成功
     size: PropTypes.oneOf(["small", "medium", "large", "huge"]), // 按钮大小
     sx: PropTypes.object, // 自定义样式对象
@@ -54,7 +54,7 @@ export default function Button(props) {
   };
 
   // 默认属性
-  TButton.defaultProps = {
+  Button.defaultProps = {
     type: "default",
     size: "medium",
     sx: {},

package/src/component/TDate/index.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { useTangoStyle } from "../CSSFab/useTangoStyle"; // 导入 useFastStyle 函数
 

package/src/component/TDrawer/index.jsx

@@ -60,7 +60,7 @@ export default function Drawer(props) {
   );
 };
 
-TDrawer.propTypes = {
+Drawer.propTypes = {
   children: PropTypes.node.isRequired,
   title: PropTypes.string,
   onText: PropTypes.string,
@@ -70,7 +70,7 @@ TDrawer.propTypes = {
   type: PropTypes.oneOf(["top", "bottom", "left", "right"]),
 };
 
-TDrawer.defaultProps = {
+Drawer.defaultProps = {
   title: "基础标题",
   onText: "确定",
   cancelText: "取消",

package/src/component/TInput/index.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import styles from "./TInput.module.css"; // 模块化 CSS
 import { useTangoStyle } from "../CSSFab/useTangoStyle";
@@ -64,7 +63,7 @@ export default function Input(props) {
   );
 };
 
-TInput.propTypes = {
+Input.propTypes = {
   type: PropTypes.oneOf(["default", "textarea", "password"]),
   size: PropTypes.oneOf(["small", "medium", "large", "huge"]),
   sx: PropTypes.object,
@@ -79,7 +78,7 @@ TInput.propTypes = {
   maxlength: PropTypes.number,
 };
 
-TInput.defaultProps = {
+Input.defaultProps = {
   type: "default",
   size: "medium",
   sx: {},

package/src/component/TLayout/index.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import "./TLayout.css";
 

package/src/component/TLine/index.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import styles from "./TLine.module.css"; // 使用 CSS Modules
 import { useTangoStyle } from "../CSSFab/useTangoStyle";
@@ -29,7 +28,7 @@ export default function Line(props) {
   );
 };
 
-TLine.propTypes = {
+Line.propTypes = {
   sx: PropTypes.object,
   size: PropTypes.oneOf(["small", "medium", "large", "huge"]),
   style: PropTypes.object,
@@ -38,7 +37,7 @@ TLine.propTypes = {
   children: PropTypes.node.isRequired,
 };
 
-TLine.defaultProps = {
+Line.defaultProps = {
   sx: {},
   size: "medium",
   style: {},

package/src/component/TMark/index.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import styles from "./TMark.module.css"; // 使用 CSS Modules
 import { useTangoStyle } from "../CSSFab/useTangoStyle";
@@ -49,7 +48,7 @@ export default function Mark(props) {
   );
 };
 
-TMark.propTypes = {
+Mark.propTypes = {
   color: PropTypes.string,
   sx: PropTypes.object,
   style: PropTypes.object,
@@ -59,7 +58,7 @@ TMark.propTypes = {
   beauty: PropTypes.bool,
 };
 
-TMark.defaultProps = {
+Mark.defaultProps = {
   color: "default",
   sx: {},
   style: {},

package/src/component/TModal/index.jsx

@@ -57,7 +57,7 @@ export default function Modal(props) {
   );
 };
 
-TModal.propTypes = {
+Modal.propTypes = {
   children: PropTypes.node.isRequired,
   title: PropTypes.string,
   onText: PropTypes.string,
@@ -66,7 +66,7 @@ TModal.propTypes = {
   onClose: PropTypes.func,
 };
 
-TModal.defaultProps = {
+Modal.defaultProps = {
   title: "基础标题",
   onText: "确定",
   cancelText: "取消",

package/src/component/TNotice/index.jsx

@@ -28,7 +28,7 @@ export default function Notice({ type = "success", icon, message }) { // 使用
   );
 };
 
-TNotice.propTypes = {
+Notice.propTypes = {
   type: PropTypes.oneOf(["success", "fail", "caution"]),
   icon: PropTypes.string.isRequired,
   message: PropTypes.string.isRequired,

package/src/component/TSearch/index.jsx

@@ -58,7 +58,7 @@ export default function Search(props) {
   );
 };
 
-TSearch.propTypes = {
+Search.propTypes = {
   size: PropTypes.oneOf(["small", "medium", "large", "huge"]),
   sx: PropTypes.object,
   style: PropTypes.object,
@@ -71,7 +71,7 @@ TSearch.propTypes = {
   path: PropTypes.string,
 };
 
-TSearch.defaultProps = {
+Search.defaultProps = {
   size: "medium",
   sx: {},
   style: {},

package/src/component/TTable/index.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { useTangoStyle } from "../CSSFab/useTangoStyle";
 import styles from "./TTable.module.css";
@@ -49,7 +48,7 @@ export default function Table({
   );
 };
 
-TTable.propTypes = {
+Table.propTypes = {
   dataSource: PropTypes.array.isRequired,
   columns: PropTypes.arrayOf(
     PropTypes.shape({
@@ -64,7 +63,7 @@ TTable.propTypes = {
   className: PropTypes.string,
 };
 
-TTable.defaultProps = {
+Table.defaultProps = {
   dataSource: [],
   sx: {},
   style: {},

package/src/component/TTooltip/index.jsx

@@ -21,13 +21,13 @@ export default function Tooltip({ children, tooltipText, placement = "top" }) {
   );
 };
 
-TTooltip.propTypes = {
+Tooltip.propTypes = {
   children: PropTypes.node.isRequired,
   tooltipText: PropTypes.string.isRequired,
   placement: PropTypes.oneOf(["top", "bottom", "right"]),
 };
 
-TTooltip.defaultProps = {
+Tooltip.defaultProps = {
   placement: "top",
 };
 

package/src/component/Tango/store.js

@@ -1,105 +0,0 @@
-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 +0,0 @@
-// 加水印组件
-/**
- * 为图片添加水印并返回处理后的图片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));
-    };
-  });
-};