shalu-dashboard-ui/utils/transStyle.ts

/**
 * 转换样式对象
 * @param style
 */
export function transformStyle(style: Record<string, any>) {
  const styleObj: Record<string, any> = {};
  for (const key in style) {
    if (typeof style[key] === "object") {
      switch (key) {
        // 背景色对象
        case "background":
          if (style[key].type === "none") styleObj[key] = "none";
          if (style[key].type === "color") styleObj[key] = style[key].color;
          if (style[key].type === "image") {
            styleObj[
              key + "-image"
            ] = `url(${style[key].image}) no-repeat center center`;
            styleObj[key + "-size"] = style[key].fillType;
          }
          break;
        // 颜色对象
        case "border":
          if (style[key].type === "none") styleObj[key] = "none";
          else
            styleObj[
              key
            ] = `${style[key].width}px ${style[key].type} ${style[key].color}`;
          break;
        // 边框对象
        case "borderRadius":
          if (style[key].type === "all")
            styleObj[key] = `${style[key].value}${style[key].unit}`;
          else
            styleObj[
              key
            ] = `${style[key].topLeft}${style[key].unit} ${style[key].topRight}${style[key].unit} ${style[key].bottomLeft}${style[key].unit} ${style[key].bottomRight}${style[key].unit}`;
          break;
        // 阴影对象
        case "boxShadow":
          if (style[key].enabled) {
            styleObj[key] = `${style[key].offsetX}px ${style[key].offsetY}px ${
              style[key].blurRadius
            }px ${style[key].spreadRadius}px ${style[key].color} ${
              style[key].inset ? "inset" : ""
            }`;
          }
          break;
        // 毛玻璃对象
        case "backdropFilter":
          if (style[key].enabled) styleObj[key] = `blur(${style[key].blur}px)`;
          break;
      }
    } else if (typeof style[key] === "number") {
      styleObj[key] = style[key] + "px";
    } else if (typeof style[key] === "string") {
      styleObj[key] = style[key];
    }
  }

  return styleObj;
}