@yqg/slimfit 0.0.1 → 0.0.2

package/lib/esm/color/ColorPalette.js

@@ -0,0 +1,419 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { ConfigProvider, message } from 'antd';
+import React, { useContext, useMemo } from 'react';
+import { colors } from "../constant/colors";
+import { useCopyToClipboard } from "../hooks/useCopyToClipboard";
+import "./style.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var ConfigContext = ConfigProvider.ConfigContext;
+
+// 判断颜色是否为浅色（需要使用深色文字）
+var isLightColor = function isLightColor(hexColor) {
+  // 移除 # 符号
+  var hex = hexColor.replace('#', '');
+
+  // 转换为 RGB
+  var r = parseInt(hex.substr(0, 2), 16);
+  var g = parseInt(hex.substr(2, 2), 16);
+  var b = parseInt(hex.substr(4, 2), 16);
+
+  // 计算亮度 (使用 YIQ 公式)
+  var brightness = (r * 299 + g * 587 + b * 114) / 1000;
+
+  // 亮度大于 128 认为是浅色
+  return brightness > 128;
+};
+
+// 颜色块组件
+var ColorBlock = function ColorBlock(_ref) {
+  var color = _ref.color,
+    copyMode = _ref.copyMode,
+    onClick = _ref.onClick;
+  var _useContext = useContext(ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var prefixCls = getPrefixCls('slimfit-color-block');
+  var copyValue = useMemo(function () {
+    switch (copyMode) {
+      case 'css-var':
+        return color.cssVar;
+      case 'hex':
+        return color.value;
+      case 'tailwind':
+        return "'".concat(color.name, "': '").concat(color.value, "'");
+      default:
+        return color.value;
+    }
+  }, [color, copyMode]);
+
+  // 根据背景色判断文字颜色
+  var textColor = useMemo(function () {
+    return isLightColor(color.value) ? '#171435' : '#ffffff';
+  }, [color.value]);
+  return /*#__PURE__*/_jsx("div", {
+    className: prefixCls,
+    onClick: onClick,
+    title: "\u70B9\u51FB\u590D\u5236: ".concat(copyValue),
+    style: {
+      backgroundColor: color.value,
+      color: textColor
+    },
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "".concat(prefixCls, "-info"),
+      children: [/*#__PURE__*/_jsx("div", {
+        children: /*#__PURE__*/_jsx("div", {
+          className: "".concat(prefixCls, "-name"),
+          children: color.name
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        children: /*#__PURE__*/_jsx("div", {
+          className: "".concat(prefixCls, "-value"),
+          children: color.value
+        })
+      })]
+    })
+  });
+};
+
+// 颜色组组件
+var ColorGroupSection = function ColorGroupSection(_ref2) {
+  var group = _ref2.group,
+    copyMode = _ref2.copyMode,
+    onColorClick = _ref2.onColorClick;
+  var _useContext2 = useContext(ConfigContext),
+    getPrefixCls = _useContext2.getPrefixCls;
+  var prefixCls = getPrefixCls('slimfit-color-group');
+  return /*#__PURE__*/_jsxs("div", {
+    className: prefixCls,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "".concat(prefixCls, "-header"),
+      children: [/*#__PURE__*/_jsx("h3", {
+        className: "".concat(prefixCls, "-title"),
+        children: group.title
+      }), group.description && /*#__PURE__*/_jsx("p", {
+        className: "".concat(prefixCls, "-description"),
+        children: group.description
+      })]
+    }), group.subtitle && /*#__PURE__*/_jsxs("div", {
+      className: "".concat(prefixCls, "-subtitle-section"),
+      children: [/*#__PURE__*/_jsx("h4", {
+        className: "".concat(prefixCls, "-subtitle"),
+        children: group.subtitle
+      }), group.subtitleDescription && /*#__PURE__*/_jsx("p", {
+        className: "".concat(prefixCls, "-subtitle-description"),
+        children: group.subtitleDescription
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: "".concat(prefixCls, "-colors ").concat(group.title.includes('Function') ? "".concat(prefixCls, "-colors-function") : group.title.includes('Neutral') ? "".concat(prefixCls, "-colors-12-per-row") : group.title.includes('Brand') ? "".concat(prefixCls, "-colors-10-per-row") : "".concat(prefixCls, "-colors-extended")),
+      children: group.colors.map(function (color) {
+        return /*#__PURE__*/_jsx(ColorBlock, {
+          color: color,
+          copyMode: copyMode,
+          onClick: function onClick() {
+            return onColorClick(color);
+          }
+        }, color.name);
+      })
+    })]
+  });
+};
+
+// 主颜色面板组件
+export var ColorPalette = function ColorPalette(_ref3) {
+  var _ref3$copyMode = _ref3.copyMode,
+    copyMode = _ref3$copyMode === void 0 ? 'css-var' : _ref3$copyMode,
+    _ref3$showCopyButton = _ref3.showCopyButton,
+    showCopyButton = _ref3$showCopyButton === void 0 ? true : _ref3$showCopyButton,
+    className = _ref3.className,
+    style = _ref3.style,
+    onColorClick = _ref3.onColorClick;
+  var _useContext3 = useContext(ConfigContext),
+    getPrefixCls = _useContext3.getPrefixCls;
+  var prefixCls = getPrefixCls('slimfit-color-palette');
+  var _useCopyToClipboard = useCopyToClipboard(),
+    copyToClipboard = _useCopyToClipboard.copyToClipboard,
+    isCopied = _useCopyToClipboard.isCopied,
+    isLoading = _useCopyToClipboard.isLoading;
+
+  // 转换颜色数据为组件需要的格式
+  var colorGroups = useMemo(function () {
+    return [{
+      title: 'Brand Color 品牌色',
+      description: '',
+      colors: Object.entries(colors.fi).map(function (_ref4) {
+        var _ref5 = _slicedToArray(_ref4, 2),
+          key = _ref5[0],
+          value = _ref5[1];
+        return {
+          name: "FI".concat(key),
+          value: value,
+          cssVar: "var(--color-fi-".concat(key, ")"),
+          description: "FI".concat(key)
+        };
+      })
+    }, {
+      title: 'Neutral Color 中性色',
+      description: '内容层次',
+      subtitle: '冷性灰',
+      subtitleDescription: '使用指南：品牌安全蓝-专用冷性灰',
+      colors: Object.entries(colors.neutral).map(function (_ref6) {
+        var _ref7 = _slicedToArray(_ref6, 2),
+          key = _ref7[0],
+          value = _ref7[1];
+        return {
+          name: "N".concat(key),
+          value: value,
+          cssVar: "var(--color-neutral-".concat(key, ")"),
+          description: "N".concat(key)
+        };
+      })
+    }, {
+      title: 'Function Color 功能色',
+      description: '功能色是指用于特定场景、表达特殊语义的颜色，例如成功、失败、告警、链接等状态。我们定义了4种功能色，在遵循色彩通用含义选取色相的基础上，从视觉一致性的角度选取了与品牌色更具一致关系的色调，并结合WCAG 2.0标准综合考量，使其达到可用性标准。在 Fintopia Design 色彩系统中，每个功能色扩展10级色阶，足够覆盖界面设计中各需求场景。色阶的制定采用了 HCT 色彩空间，结合不同色相下饱和度及亮度插值拟合出优化曲线，保证色彩变化均匀，多色之间亮度均等。',
+      colors: [{
+        name: '蓝色/链接',
+        value: colors.function.link,
+        cssVar: 'var(--color-fi-600)',
+        description: '链接'
+      }, {
+        name: '成功',
+        value: colors.function.success,
+        cssVar: 'var(--color-green-600)',
+        description: '成功'
+      }, {
+        name: '错误',
+        value: colors.function.error,
+        cssVar: 'var(--color-red-600)',
+        description: '错误'
+      }, {
+        name: '告警',
+        value: colors.function.warning,
+        cssVar: 'var(--color-yellow-600)',
+        description: '告警'
+      }]
+    },
+    // Red 红色系
+    {
+      title: 'Red 红色',
+      description: '',
+      colors: Object.entries(colors.red).map(function (_ref8) {
+        var _ref9 = _slicedToArray(_ref8, 2),
+          key = _ref9[0],
+          value = _ref9[1];
+        return {
+          name: key,
+          value: value,
+          cssVar: "var(--color-red-".concat(key, ")"),
+          description: "Red".concat(key)
+        };
+      })
+    },
+    // Tangerine 橘红色系
+    {
+      title: 'Tangerine 橘红色',
+      description: '',
+      colors: Object.entries(colors.tangerine).map(function (_ref10) {
+        var _ref11 = _slicedToArray(_ref10, 2),
+          key = _ref11[0],
+          value = _ref11[1];
+        return {
+          name: key,
+          value: value,
+          cssVar: "var(--color-tangerine-".concat(key, ")"),
+          description: "Tangerine".concat(key)
+        };
+      })
+    },
+    // Orange 橙色系
+    {
+      title: 'Orange 橙色',
+      description: '',
+      colors: Object.entries(colors.orange).map(function (_ref12) {
+        var _ref13 = _slicedToArray(_ref12, 2),
+          key = _ref13[0],
+          value = _ref13[1];
+        return {
+          name: key,
+          value: value,
+          cssVar: "var(--color-orange-".concat(key, ")"),
+          description: "Orange".concat(key)
+        };
+      })
+    },
+    // Yellow 黄色系
+    {
+      title: 'Yellow 黄色',
+      description: '',
+      colors: Object.entries(colors.yellow).map(function (_ref14) {
+        var _ref15 = _slicedToArray(_ref14, 2),
+          key = _ref15[0],
+          value = _ref15[1];
+        return {
+          name: key,
+          value: value,
+          cssVar: "var(--color-yellow-".concat(key, ")"),
+          description: "Yellow".concat(key)
+        };
+      })
+    },
+    // Lemon Yellow 柠檬黄系
+    {
+      title: 'Lemon Yellow 柠檬黄',
+      description: '',
+      colors: Object.entries(colors.lemonYellow).map(function (_ref16) {
+        var _ref17 = _slicedToArray(_ref16, 2),
+          key = _ref17[0],
+          value = _ref17[1];
+        return {
+          name: key,
+          value: value,
+          cssVar: "var(--color-lemonYellow-".concat(key, ")"),
+          description: "Lemon Yellow".concat(key)
+        };
+      })
+    },
+    // Grass Green 草绿色系
+    {
+      title: 'Grass Green 草绿色',
+      description: '',
+      colors: Object.entries(colors.grassGreen).map(function (_ref18) {
+        var _ref19 = _slicedToArray(_ref18, 2),
+          key = _ref19[0],
+          value = _ref19[1];
+        return {
+          name: key,
+          value: value,
+          cssVar: "var(--color-grassGreen-".concat(key, ")"),
+          description: "Grass Green".concat(key)
+        };
+      })
+    },
+    // Green 绿色系
+    {
+      title: 'Green 绿色',
+      description: '',
+      colors: Object.entries(colors.green).map(function (_ref20) {
+        var _ref21 = _slicedToArray(_ref20, 2),
+          key = _ref21[0],
+          value = _ref21[1];
+        return {
+          name: key,
+          value: value,
+          cssVar: "var(--color-green-".concat(key, ")"),
+          description: "Green".concat(key)
+        };
+      })
+    },
+    // Cyan 青色系
+    {
+      title: 'Cyan 青色',
+      description: '',
+      colors: Object.entries(colors.cyan).map(function (_ref22) {
+        var _ref23 = _slicedToArray(_ref22, 2),
+          key = _ref23[0],
+          value = _ref23[1];
+        return {
+          name: key,
+          value: value,
+          cssVar: "var(--color-cyan-".concat(key, ")"),
+          description: "Cyan".concat(key)
+        };
+      })
+    },
+    // Blue 蓝色系
+    {
+      title: 'Blue 蓝色',
+      description: '',
+      colors: Object.entries(colors.blue).map(function (_ref24) {
+        var _ref25 = _slicedToArray(_ref24, 2),
+          key = _ref25[0],
+          value = _ref25[1];
+        return {
+          name: key,
+          value: value,
+          cssVar: "var(--color-blue-".concat(key, ")"),
+          description: "Blue".concat(key)
+        };
+      })
+    },
+    // Purple 紫色系
+    {
+      title: 'Purple 紫色',
+      description: '',
+      colors: Object.entries(colors.purple).map(function (_ref26) {
+        var _ref27 = _slicedToArray(_ref26, 2),
+          key = _ref27[0],
+          value = _ref27[1];
+        return {
+          name: key,
+          value: value,
+          cssVar: "var(--color-purple-".concat(key, ")"),
+          description: "Purple".concat(key)
+        };
+      })
+    },
+    // Magenta 洋红色系
+    {
+      title: 'Magenta 洋红色',
+      description: '',
+      colors: Object.entries(colors.magenta).map(function (_ref28) {
+        var _ref29 = _slicedToArray(_ref28, 2),
+          key = _ref29[0],
+          value = _ref29[1];
+        return {
+          name: key,
+          value: value,
+          cssVar: "var(--color-magenta-".concat(key, ")"),
+          description: "Magenta".concat(key)
+        };
+      })
+    }];
+  }, []);
+  var handleColorClick = /*#__PURE__*/function () {
+    var _ref30 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(color) {
+      var copyValue, result;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (showCopyButton) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return");
+          case 2:
+            copyValue = copyMode === 'css-var' ? color.cssVar : copyMode === 'tailwind' ? "'".concat(color.name, "': '").concat(color.value, "'") : color.value;
+            _context.next = 5;
+            return copyToClipboard(copyValue);
+          case 5:
+            result = _context.sent;
+            if (result.success) {
+              message.success("\u5DF2\u590D\u5236: ".concat(copyValue));
+            } else {
+              message.error('复制失败，请重试');
+            }
+            onColorClick === null || onColorClick === void 0 || onColorClick(color, copyMode);
+          case 8:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleColorClick(_x) {
+      return _ref30.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/_jsx("div", {
+    className: "".concat(prefixCls, " ").concat(className || ''),
+    style: style,
+    children: colorGroups.map(function (group) {
+      return /*#__PURE__*/_jsx(ColorGroupSection, {
+        group: group,
+        copyMode: copyMode,
+        onColorClick: handleColorClick
+      }, group.title);
+    })
+  });
+};
+export default ColorPalette;