@lark-apaas/coding-preset-vite-react 0.1.0

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,
+};