@lark-apaas/coding-vite-preset 0.1.0

package/src/module-alias/echarts-for-react.mjs

@@ -0,0 +1,129 @@
+import React from 'react';
+import OriginalReactECharts from 'echarts-for-react';
+import Color from 'colorjs.io';
+
+/**
+ * Convert HSL/HSLA color to hex or rgba
+ */
+export function convertColorToHex(color) {
+  if (typeof color !== 'string') return color;
+
+  const trimmed = color.trim();
+  if (!trimmed.startsWith('hsl')) {
+    return color;
+  }
+
+  try {
+    const colorObj = new Color(trimmed);
+
+    if (colorObj.alpha < 1) {
+      return colorObj.to('srgb').toString({ format: 'rgba' });
+    } else {
+      return colorObj.to('srgb').toString({ format: 'hex' });
+    }
+  } catch (error) {
+    console.warn(`Failed to convert color: ${color}`, error);
+    return color;
+  }
+}
+
+function convertColorValue(propValue, visited) {
+  if (typeof propValue === 'string') {
+    return convertColorToHex(propValue);
+  }
+  if (Array.isArray(propValue)) {
+    return propValue.map((item) =>
+      typeof item === 'string' ? convertColorToHex(item) : transformColors(item, visited)
+    );
+  }
+  return transformColors(propValue, visited);
+}
+
+/**
+ * Deep traverse object to transform all HSL colors in 'color' property
+ */
+export function transformColors(value, visited = new WeakSet()) {
+  if (value === null || value === undefined) return value;
+  if (typeof value !== 'object') return value;
+  if (visited.has(value)) return value;
+  if (value instanceof Date || value instanceof RegExp) return value;
+
+  visited.add(value);
+
+  if (Array.isArray(value)) {
+    return value.map((item) => transformColors(item, visited));
+  }
+
+  const result = {};
+  for (const key in value) {
+    if (!Object.prototype.hasOwnProperty.call(value, key)) continue;
+
+    const propValue = value[key];
+
+    if (key === 'color') {
+      if (typeof propValue === 'function') {
+        result[key] = (...args) => convertColorValue(propValue(...args), visited);
+      } else {
+        result[key] = convertColorValue(propValue, visited);
+      }
+    } else {
+      result[key] = transformColors(propValue, visited);
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Remove label.color and emphasis.label.color from funnel series
+ * to let ECharts use default contrast colors
+ */
+function removeFunnelLabelColor(option) {
+  if (!Array.isArray(option.series)) return option;
+
+  const series = option.series.map((item) => {
+    if (item?.type !== 'funnel') return item;
+
+    let result = { ...item };
+
+    // remove label.color
+    if (result.label && typeof result.label === 'object') {
+      const { color: _, ...labelRest } = result.label;
+      result = { ...result, label: labelRest };
+    }
+
+    // remove emphasis.label.color
+    const emphasis = result.emphasis;
+    if (emphasis?.label && typeof emphasis.label === 'object') {
+      const { color: _, ...emphasisLabelRest } = emphasis.label;
+      result = { ...result, emphasis: { ...emphasis, label: emphasisLabelRest } };
+    }
+
+    return result;
+  });
+
+  return { ...option, series };
+}
+
+/**
+ * EChartsReact wrapper component
+ * - Automatically converts HSL colors to hex in option
+ * - Removes label.color from funnel series
+ */
+export class EChartsReact extends React.Component {
+  render() {
+    const { option, ...rest } = this.props;
+
+    const transformedOption = option
+      ? removeFunnelLabelColor(transformColors(option))
+      : option;
+
+    return React.createElement(OriginalReactECharts, {
+      option: transformedOption,
+      ...rest,
+    });
+  }
+}
+
+export * from 'echarts-for-react';
+export default EChartsReact;

package/src/module-alias/echarts.mjs

@@ -0,0 +1,43 @@
+import * as echartsNamespace from 'echarts';
+export { echartsNamespace as echarts };
+export * from 'echarts';
+
+import * as echarts from 'echarts';
+import { registerTheme } from 'echarts';
+import { getShadcnEChartsTheme } from './registry_echarts_theme.mjs';
+
+let isRegistered = false;
+let isWindowMounted = false;
+
+/**
+ * Mount echarts to window for debugging
+ */
+export function registerEchartsToWindow() {
+  if (isWindowMounted || typeof globalThis.window === 'undefined') {
+    return;
+  }
+  isWindowMounted = true;
+  globalThis.echarts = echarts;
+}
+
+export function resgisterEchartsTheme() {
+  // Register ud theme, only register once globally
+  if (isRegistered) {
+    return;
+  }
+  isRegistered = true;
+  // After bundling main.js defer execution, css will be loaded
+  registerTheme('ud', getShadcnEChartsTheme());
+
+  if (process.env.NODE_ENV === 'development') {
+    // Listen for HMR update completion to re-register theme
+    if (import.meta.hot) {
+      import.meta.hot.on('vite:afterUpdate', () => {
+        registerTheme('ud', getShadcnEChartsTheme());
+      });
+    }
+  }
+}
+
+registerEchartsToWindow();
+resgisterEchartsTheme();

package/src/module-alias/registry_echarts_theme.mjs

@@ -0,0 +1,390 @@
+import Color from 'colorjs.io';
+
+/**
+ * Get the value of a CSS variable and convert it to sRGB color space hex string
+ * @param varName CSS variable name
+ * @param element Optional element, defaults to document.body
+ * @returns sRGB color space hex string
+ */
+export function getCssVariable(varName, element = document.body) {
+  const value = window
+    .getComputedStyle(element)
+    .getPropertyValue(varName)
+    .trim();
+  if (!value) {
+    return '';
+  }
+  return new Color(value).to('srgb').toString({ format: 'hex' });
+}
+
+// Generate ECharts theme configuration
+export function generateEChartsTheme(element = document.body) {
+  // Get chart colors
+  const chartColors = [
+    getCssVariable('--chart-1', element),
+    getCssVariable('--chart-2', element),
+    getCssVariable('--chart-3', element),
+    getCssVariable('--chart-4', element),
+    getCssVariable('--chart-5', element),
+  ];
+
+  // Get other color variables
+  const background = getCssVariable('--background', element);
+  const foreground = getCssVariable('--foreground', element);
+  const muted = getCssVariable('--muted', element);
+  const mutedForeground = getCssVariable('--muted-foreground', element);
+  const border = getCssVariable('--border', element);
+  const primary = getCssVariable('--primary', element);
+
+  const fullTheme = {
+    color: chartColors,
+    backgroundColor: 'transparent',
+    textStyle: {
+      // color: foreground,
+    },
+    title: {
+      textStyle: {
+        color: foreground,
+      },
+      subtextStyle: {
+        color: mutedForeground,
+      },
+    },
+    line: {
+      itemStyle: {
+        borderWidth: 1,
+      },
+      lineStyle: {
+        width: 2,
+      },
+      symbolSize: 4,
+      symbol: 'circle',
+      smooth: false,
+    },
+    radar: {
+      itemStyle: {
+        borderWidth: 1,
+      },
+      lineStyle: {
+        width: 2,
+      },
+      symbolSize: 4,
+      symbol: 'circle',
+      smooth: false,
+    },
+    bar: {
+      itemStyle: {
+        barBorderWidth: 0,
+        barBorderColor: border,
+      },
+    },
+    pie: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: border,
+      },
+    },
+    scatter: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: border,
+      },
+    },
+    boxplot: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: border,
+      },
+    },
+    parallel: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: border,
+      },
+    },
+    sankey: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: border,
+      },
+    },
+    funnel: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: border,
+      },
+    },
+    gauge: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: border,
+      },
+    },
+    candlestick: {
+      itemStyle: {
+        color: chartColors[0],
+        color0: chartColors[1],
+        borderColor: chartColors[0],
+        borderColor0: chartColors[1],
+        borderWidth: 1,
+      },
+    },
+    graph: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: border,
+      },
+      lineStyle: {
+        width: 1,
+        color: mutedForeground,
+      },
+      symbolSize: 4,
+      symbol: 'circle',
+      smooth: false,
+      color: chartColors,
+      label: {
+        color: foreground,
+      },
+    },
+    map: {
+      itemStyle: {
+        areaColor: muted,
+        borderColor: border,
+        borderWidth: 0.5,
+      },
+      label: {
+        color: foreground,
+      },
+      emphasis: {
+        itemStyle: {
+          areaColor: chartColors[0],
+          borderColor: chartColors[1],
+          borderWidth: 1,
+        },
+        label: {
+          color: foreground,
+        },
+      },
+    },
+    geo: {
+      itemStyle: {
+        areaColor: muted,
+        borderColor: border,
+        borderWidth: 0.5,
+      },
+      label: {
+        color: foreground,
+      },
+      emphasis: {
+        itemStyle: {
+          areaColor: chartColors[0],
+          borderColor: chartColors[1],
+          borderWidth: 1,
+        },
+        label: {
+          color: foreground,
+        },
+      },
+    },
+    categoryAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: border,
+        },
+      },
+      axisTick: {
+        show: true,
+        lineStyle: {
+          color: border,
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: mutedForeground,
+      },
+      splitLine: {
+        show: false,
+        lineStyle: {
+          color: [border],
+        },
+      },
+      splitArea: {
+        show: false,
+      },
+    },
+    valueAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: border,
+        },
+      },
+      axisTick: {
+        show: true,
+        lineStyle: {
+          color: border,
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: mutedForeground,
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: [border],
+        },
+      },
+      splitArea: {
+        show: false,
+      },
+    },
+    logAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: border,
+        },
+      },
+      axisTick: {
+        show: true,
+        lineStyle: {
+          color: border,
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: mutedForeground,
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: [border],
+        },
+      },
+      splitArea: {
+        show: false,
+      },
+    },
+    timeAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: border,
+        },
+      },
+      axisTick: {
+        show: true,
+        lineStyle: {
+          color: border,
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: mutedForeground,
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: [border],
+        },
+      },
+      splitArea: {
+        show: false,
+      },
+    },
+    toolbox: {
+      iconStyle: {
+        borderColor: mutedForeground,
+      },
+      emphasis: {
+        iconStyle: {
+          borderColor: primary,
+        },
+      },
+    },
+    legend: {
+      textStyle: {
+        color: foreground,
+      },
+    },
+    tooltip: {
+      axisPointer: {
+        lineStyle: {
+          color: border,
+          width: 1,
+        },
+        crossStyle: {
+          color: border,
+          width: 1,
+        },
+      },
+    },
+    timeline: {
+      lineStyle: {
+        color: primary,
+        width: 1,
+      },
+      itemStyle: {
+        color: primary,
+        borderWidth: 1,
+      },
+      controlStyle: {
+        color: primary,
+        borderColor: primary,
+        borderWidth: 0.5,
+      },
+      checkpointStyle: {
+        color: chartColors[1],
+        borderColor: chartColors[1],
+      },
+      label: {
+        color: mutedForeground,
+      },
+      emphasis: {
+        itemStyle: {
+          color: chartColors[1],
+        },
+        controlStyle: {
+          color: primary,
+          borderColor: primary,
+          borderWidth: 0.5,
+        },
+        label: {
+          color: mutedForeground,
+        },
+      },
+    },
+    visualMap: {
+      color: [chartColors[0], chartColors[2]],
+    },
+    dataZoom: {
+      backgroundColor: background,
+      dataBackgroundColor: border,
+      fillerColor: `${chartColors[0]}40`, // 25% opacity
+      handleColor: primary,
+      handleSize: '100%',
+      textStyle: {
+        color: foreground,
+      },
+    },
+    markPoint: {
+      label: {
+        color: foreground,
+      },
+      emphasis: {
+        label: {
+          color: foreground,
+        },
+      },
+    },
+  };
+  return fullTheme;
+}
+
+// Get current theme's ECharts configuration
+export function getShadcnEChartsTheme() {
+  // body
+  return generateEChartsTheme(document.body);
+}

package/src/overlay/components.js

@@ -0,0 +1,94 @@
+/**
+ * 错误容器组件
+ * @param {*} document
+ * @param {*} root
+ * @param {string} errorTitle 错误标题
+ */
+function ErrorContainer(document, root, errorTitle) {
+  // 创建容器元素
+  const container = document.createElement('div');
+  container.className = 'overlay-container';
+
+  // 创建内容元素
+  const content = document.createElement('div');
+  content.className = 'overlay-content';
+  container.appendChild(content);
+
+  // 创建图片元素
+  const img = document.createElement('img');
+  img.src =
+    'https://lf3-static.bytednsdoc.com/obj/eden-cn/ylcylz_fsph_ryhs/ljhwZthlaukjlkulzlp/feisuda/template/illustration_empty_negative_error.svg';
+  img.alt = 'Error';
+  // 图片占位
+  img.width = 100;
+  img.height = 100;
+  img.className = 'overlay-error-image';
+  content.appendChild(img);
+
+  // 创建标题元素
+  const title = document.createElement('p');
+  title.className = 'overlay-title';
+  title.textContent = errorTitle;
+  content.appendChild(title);
+
+  // 添加到根元素
+  root.appendChild(container);
+}
+
+function RootStyle(document, root) {
+  const style = document.createElement('style');
+  style.id = 'react-refresh-overlay-style';
+  style.textContent = `
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+        sans-serif;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+
+    .overlay-container {
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #fff;
+    }
+
+    .overlay-content {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+    }
+
+    .overlay-error-image {
+      margin-bottom: 12px; /* mb-3 */
+      width: 100px; /* w-[100px] */
+      height: auto;
+    }
+
+    .overlay-title {
+      color: #1F2329;
+      text-align: center;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 22px;
+    }
+
+  `;
+  root.appendChild(style);
+}
+
+module.exports = {
+  ErrorContainer,
+  RootStyle,
+};