tango-ui-cw 0.0.1

package/src/component/TColorPicker/TColorPicker.css

@@ -0,0 +1,24 @@
+.color-picker {
+    width: 35px;
+    height: 35px;
+    /* border-radius:10px; */
+    padding: 0px 1px;
+    background: white;
+}
+
+.color-picker-disabled {
+    cursor: not-allowed;
+}
+
+.color-picker-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.color-text {
+    display: flex;
+    flex-direction: column;
+    font-size: 12px;
+    color: #555;
+}

package/src/component/TColorPicker/index.jsx

@@ -0,0 +1,106 @@
+// 封装的 ColorPicker 组件
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import "./TColorPicker.css";
+import { useTangoStyle } from "../CSSFab/useTangoStyle";
+
+export default function ColorPicker(props) {
+  const {
+    sx = {},
+    style: userStyle = {},
+    className: userClassName = "",
+    disabled,
+    onChange,
+    showText
+  } = props;
+
+  const [color, setColor] = useState("#4caf50");
+
+  const handleChange = (e) => {
+    const value = e.target.value;
+    setColor(value);
+    if (onChange) onChange(value);
+  };
+
+  const className = `color-picker ${disabled ? "color-picker-disabled" : ""} ${userClassName}`;
+
+  const sxStyle = useTangoStyle(sx);
+  const combinedStyle = { ...sxStyle, ...userStyle };
+
+  ColorPicker.propTypes = {
+    sx: PropTypes.object,
+    style: PropTypes.object,
+    className: PropTypes.string,
+    disabled: PropTypes.bool,
+    onChange: PropTypes.func,
+    showText: PropTypes.bool,
+  };
+
+  ColorPicker.defaultProps = {
+    sx: {},
+    style: {},
+    className: "",
+    disabled: false,
+    onChange: () => {},
+    showText: false,
+  };
+
+  const hexToRgb = (hex) => {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `rgb(${r}, ${g}, ${b})`;
+  };
+  
+  const hexToHsl = (hex) => {
+    let r = parseInt(hex.slice(1, 3), 16) / 255;
+    let g = parseInt(hex.slice(3, 5), 16) / 255;
+    let b = parseInt(hex.slice(5, 7), 16) / 255;
+    let max = Math.max(r, g, b),
+      min = Math.min(r, g, b);
+    let h, s, l = (max + min) / 2;
+  
+    if (max === min) {
+      h = s = 0; // achromatic
+    } else {
+      let d = max - min;
+      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+      switch (max) {
+        case r:
+          h = ((g - b) / d + (g < b ? 6 : 0));
+          break;
+        case g:
+          h = ((b - r) / d + 2);
+          break;
+        case b:
+          h = ((r - g) / d + 4);
+          break;
+      }
+      h /= 6;
+    }
+  
+    return `hsl(${Math.round(h * 360)}, ${Math.round(s * 100)}%, ${Math.round(l * 100)}%)`;
+  };
+
+
+  return (
+    <div className="color-picker-wrapper" style={combinedStyle}>
+      <input
+        type="color"
+        value={color}
+        onChange={handleChange}
+        className={className}
+        disabled={disabled}
+      />
+      {showText && (
+        <div className="color-text">
+          <div>{color.toUpperCase()}</div>
+          <div>{hexToRgb(color)}</div>
+          <div>{hexToHsl(color)}</div>
+        </div>
+      )}
+    </div>
+  );
+  
+};
+

package/src/component/TDate/index.jsx

@@ -0,0 +1,148 @@
+import React from "react";
+import PropTypes from "prop-types";
+import "./TDate.css";
+import { useTangoStyle } from "../CSSFab/useTangoStyle"; // 导入 useFastStyle 函数
+
+export default function Date(props) {
+  const { type, single, sx = {}, style: userStyle = {}, en } = props;
+
+  // 用于接收 sx 属性设置的样式
+  const sxStyle = useTangoStyle(sx);
+
+  // 合并 sx 和 style，确保 style 优先级更高
+  const combinedStyle = { ...sxStyle, ...userStyle };
+
+  Date.propTypes = {
+    type: PropTypes.oneOf([
+      "line",
+      "full",
+      "full-line",
+      "year-week",
+      "year-week-line",
+      "week-time",
+      "no-s",
+      "no-s-line",
+      "us-full",
+      "us-full-line",
+    ]),
+    single: PropTypes.bool, // 控制显示“周”或“星期”
+    sx: PropTypes.object, // 自定义样式对象
+    style: PropTypes.object, // 用户传入的 style 属性
+    en: PropTypes.bool, // 控制英文格式
+  };
+
+  Date.defaultProps = {
+    type: undefined, // 默认无 type 的格式
+    single: false, // 默认显示 "星期"
+    sx: {},
+    style: {},
+    en: false, // 默认不使用英文
+  };
+
+  // 各类时间格式
+  const formatDate = (type) => {
+    const date = new Date();
+    let locale = en ? "en-US" : "zh-CN";
+    let formattedWeekday = date.toLocaleString(locale, { weekday: "long" });
+    
+    // 如果 single 为 true，替换 "星期" 为 "周"，英文模式不需要转换
+    if (!en && single) {
+      formattedWeekday = formattedWeekday.replace("星期", "周");
+    }
+
+    switch (type) {
+      case "line":
+        return date.toLocaleDateString(locale, {
+          year: "numeric",
+          month: "2-digit",
+          day: "2-digit",
+        }).replaceAll("/", "-");
+      case "full":
+        return `${date.toLocaleDateString(locale, {
+          year: "numeric",
+          month: "2-digit",
+          day: "2-digit",
+        })} ${formattedWeekday} ${date.toLocaleTimeString(locale, {
+          hour: "2-digit",
+          minute: "2-digit",
+          second: "2-digit",
+        })}`;
+      case "full-line":
+        return `${date.toLocaleDateString(locale, {
+          year: "numeric",
+          month: "2-digit",
+          day: "2-digit",
+        }).replaceAll("/", "-")} ${formattedWeekday} ${date.toLocaleTimeString(locale, {
+          hour: "2-digit",
+          minute: "2-digit",
+          second: "2-digit",
+        })}`;
+      case "year-week":
+        return `${date.toLocaleDateString(locale, {
+          year: "numeric",
+          month: "2-digit",
+          day: "2-digit",
+        })} ${formattedWeekday}`;
+      case "year-week-line":
+        return `${date.toLocaleDateString(locale, {
+          year: "numeric",
+          month: "2-digit",
+          day: "2-digit",
+        }).replaceAll("/", "-")} ${formattedWeekday}`;
+      case "week-time":
+        return `${formattedWeekday} ${date.toLocaleTimeString(locale, {
+          hour: "2-digit",
+          minute: "2-digit",
+          second: "2-digit",
+        })}`;
+      case "no-s":
+        return `${date.toLocaleDateString(locale, {
+          year: "numeric",
+          month: "2-digit",
+          day: "2-digit",
+        })} ${formattedWeekday} ${date.toLocaleTimeString(locale, {
+          hour: "2-digit",
+          minute: "2-digit",
+        })}`;
+      case "no-s-line":
+        return `${date.toLocaleDateString(locale, {
+          year: "numeric",
+          month: "2-digit",
+          day: "2-digit",
+        }).replaceAll("/", "-")} ${formattedWeekday} ${date.toLocaleTimeString(locale, {
+          hour: "2-digit",
+          minute: "2-digit",
+        })}`;
+      case "us-full":
+        return `${date.toLocaleDateString("en-US", {
+          year: "numeric",
+          month: "2-digit",
+          day: "2-digit",
+        })} ${formattedWeekday} ${date.toLocaleTimeString(locale, {
+          hour: "2-digit",
+          minute: "2-digit",
+          second: "2-digit",
+        })}`;
+      case "us-full-line":
+        return `${date.toLocaleDateString("en-US", {
+          year: "numeric",
+          month: "2-digit",
+          day: "2-digit",
+        }).replaceAll("/", "-")} ${formattedWeekday} ${date.toLocaleTimeString(locale, {
+          hour: "2-digit",
+          minute: "2-digit",
+          second: "2-digit",
+        })}`;
+      default:
+        // 默认格式 年/月/日
+        return date.toLocaleDateString(locale, {
+          year: "numeric",
+          month: "2-digit",
+          day: "2-digit",
+        });
+    }
+  };
+
+  return <div style={combinedStyle}>{formatDate(type)}</div>;
+};
+

package/src/component/TDatePicker/TDatePicker.css

@@ -0,0 +1,13 @@
+.date-picker {
+    padding: 6px 8px;
+    font-size: 14px;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+    outline: none;
+  }
+  
+  .date-picker:disabled {
+    background-color: #f0f0f0;
+    color: #999;
+  }
+  

package/src/component/TDatePicker/index.jsx

@@ -0,0 +1,60 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import "./TDatePicker.css";
+import { useTangoStyle } from "../CSSFab/useTangoStyle";
+
+export default function DatePicker(props) {
+  const {
+    sx = {},
+    style: userStyle = {},
+    className: userClassName = "",
+    disabled,
+    onChange,
+    time,
+  } = props;
+
+  const [value, setValue] = useState("");
+
+  const handleChange = (e) => {
+    const val = e.target.value;
+    setValue(val);
+    if (onChange) onChange(val);
+  };
+
+  const inputType = time ? "datetime-local" : "date";
+
+  const className = `date-picker ${disabled ? "date-picker-disabled" : ""} ${userClassName}`;
+
+  const sxStyle = useTangoStyle(sx);
+  const combinedStyle = { ...sxStyle, ...userStyle };
+
+  return (
+    <input
+      type={inputType}
+      value={value}
+      onChange={handleChange}
+      className={className}
+      style={combinedStyle}
+      disabled={disabled}
+    />
+  );
+};
+
+DatePicker.propTypes = {
+  sx: PropTypes.object,
+  style: PropTypes.object,
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func,
+  time: PropTypes.bool, // 是否启用时间选择
+};
+
+DatePicker.defaultProps = {
+  sx: {},
+  style: {},
+  className: "",
+  disabled: false,
+  onChange: () => {},
+  time: false,
+};
+

package/src/component/TDrawer/TDrawer.css

@@ -0,0 +1,202 @@
+.drawer-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: flex-end;
+}
+
+.drawer-container {
+  background-color: #fff;
+  padding: 20px;
+  width: 320px;
+  height:100vh;
+  position: relative;
+}
+
+.drawer-header {
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 16px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.drawer-content {
+  margin-bottom: 24px;
+}
+
+.drawer-footer {
+  position: absolute;
+  bottom: 0;
+  right: 0; /* 确保按钮贴靠右侧 */
+  display: flex;
+  gap: 10px; /* 按钮间隔 */
+  padding: 10px 20px;
+  background-color: #fff;
+}
+
+.drawer-closeBtn {
+  background-image: url('../../assets/关闭.png');
+  width: 15px;
+  height: 15px;
+  background-size: 100% 100%;
+  cursor: pointer;
+}
+/* Drawer 位置 */
+.drawer-right {
+  height: 100vh;
+  width: 320px;
+  position: fixed;
+  top: 0;
+  right: 0;
+}
+
+.drawer-left {
+  height: 100vh;
+  width: 320px;
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+
+.drawer-top {
+  height: 300px;
+  width: 100vw;
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+
+.drawer-bottom {
+  height: 300px;
+  width: 100vw;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+}
+
+/* 动画 */
+@keyframes come-in-right {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes come-out-right {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+}
+
+@keyframes come-in-left {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes come-out-left {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+}
+
+@keyframes come-in-top {
+  from {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes come-out-top {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+}
+
+@keyframes come-in-bottom {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes come-out-bottom {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+}
+
+.come-in-right {
+  animation: come-in-right 0.3s ease-in-out;
+}
+
+.come-out-right {
+  animation: come-out-right 0.3s ease-in-out;
+}
+
+.come-in-left {
+  animation: come-in-left 0.3s ease-in-out;
+}
+
+.come-out-left {
+  animation: come-out-left 0.3s ease-in-out;
+}
+
+.come-in-top {
+  animation: come-in-top 0.3s ease-in-out;
+}
+
+.come-out-top {
+  animation: come-out-top 0.3s ease-in-out;
+}
+
+.come-in-bottom {
+  animation: come-in-bottom 0.3s ease-in-out;
+}
+
+.come-out-bottom {
+  animation: come-out-bottom 0.3s ease-in-out;
+}

package/src/component/TDrawer/index.jsx

@@ -0,0 +1,74 @@
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import "./TDrawer.css";
+import TButton from "../TButton/index";
+
+export default function Drawer(props) {
+  const { children, title, onText, cancelText, open, onClose, type } = props;
+  const [showAnimation, setShowAnimation] = useState(false);
+  const [closing, setClosing] = useState(false);
+
+  Drawer.propTypes = {
+    children: PropTypes.node.isRequired,
+    title: PropTypes.string,
+    onText: PropTypes.string,
+    cancelText: PropTypes.string,
+    open: PropTypes.bool,
+    onClose: PropTypes.func,
+    type: PropTypes.oneOf(["top", "bottom", "left", "right"]),
+  };
+
+  Drawer.defaultProps = {
+    title: "基础标题",
+    onText: "确定",
+    cancelText: "取消",
+    open: false,
+    onClose: () => {},
+    type: "right",
+  };
+
+  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={`drawer-overlay ${closing ? "fade-out" : "fade-in"}`}>
+          <div
+            className={`drawer-container drawer-${type} ${
+              closing ? `come-out-${type}` : `come-in-${type}`
+            }`}
+          >
+            <div className="drawer-header">
+              <h3>{title}</h3>
+              <div className="drawer-closeBtn" onClick={onClose}></div>
+            </div>
+            <div className="drawer-content">{children}</div>
+            <div className="drawer-footer">
+              <TButton type="success" onClick={ok}>
+                {onText}
+              </TButton>
+              <TButton onClick={onClose}>{cancelText}</TButton>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+

package/src/component/TInput/TInput.css

@@ -0,0 +1,80 @@
+.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;
+}
+
+.input:hover {
+  border-color: #888;
+}
+
+.input:focus {
+  border-color: #4caf50; /* Modern blue accent */
+  box-shadow: 0 0 5px rgba(0, 120, 212, 0.5); /* Subtle glow on focus */
+}
+
+.input-small {
+  height: 32px;
+  font-size: 12px;
+  padding: 6px 10px;
+}
+
+.input-medium {
+  height: 40px;
+  font-size: 14px;
+}
+
+.input-large {
+  height: 48px;
+  font-size: 16px;
+  padding: 10px 14px;
+}
+
+.input-huge {
+  height: 56px;
+  font-size: 18px;
+  padding: 12px 16px;
+}
+
+.input-disabled {
+  background-color: #f5f5f5;
+  color: #999;
+  border-color: #ddd;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.input-textarea {
+  min-height: 32px;
+  font-size: 14px;
+}
+
+.input-error {
+  border-color: #d93025;
+  background-color: #fef2f2;
+  color: #d93025;
+}
+
+.input-error:focus {
+  box-shadow: 0 0 5px rgba(217, 48, 37, 0.5);
+}
+/* .search-button {
+  position: absolute;
+  right: 10px;
+  top: 0%;
+  transform: translateY(-50%);
+  padding: 5px 10px;
+  background: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+} */