@lxzy/code-snippet 0.0.1

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@lxzy/code-snippet",
+  "version": "0.0.1",
+  "description": "none",
+  "license": "MIT",
+  "author": "ywwb",
+  "main": "./dist/esm/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "files": [
+    "src",
+    "public"
+  ],
+  "scripts": {
+    "build": "father build",
+    "prepublishOnly": "",
+    "pub": "npm publish"
+  },
+  "dependencies": {},
+  "devDependencies": {},
+  "peerDependencies": {},
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "authors": []
+}

package/src/ly/chart/index.less

@@ -0,0 +1,101 @@
+.page {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #f5f7fa 0%, #e4ecf7 100%);
+  padding: 32px 24px;
+  box-sizing: border-box;
+}
+
+.header {
+  text-align: center;
+  margin-bottom: 24px;
+
+  h1 {
+    font-size: 28px;
+    font-weight: 700;
+    color: #1a1a2e;
+    margin: 0 0 8px;
+    letter-spacing: 2px;
+  }
+
+  p {
+    font-size: 14px;
+    color: #888;
+    margin: 0;
+  }
+}
+
+.toolbar {
+  max-width: 1400px;
+  margin: 0 auto 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 12px;
+  background: #fff;
+  border-radius: 12px;
+  padding: 14px 20px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
+}
+
+.toolbarLeft {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.toolbarRight {
+  display: flex;
+  align-items: center;
+}
+
+.label {
+  font-size: 14px;
+  color: #555;
+  font-weight: 500;
+}
+
+.info {
+  font-size: 13px;
+  color: #666;
+  background: #f0f5ff;
+  padding: 5px 14px;
+  border-radius: 6px;
+  border: 1px solid #d6e4ff;
+
+  strong {
+    color: #1677ff;
+    font-size: 15px;
+    margin: 0 2px;
+  }
+}
+
+.chartWrapper {
+  max-width: 1400px;
+  margin: 0 auto;
+  background: #fff;
+  border-radius: 16px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
+  padding: 24px 16px 16px;
+}
+
+.chart {
+  width: 100%;
+  height: 520px;
+}
+
+.tips {
+  max-width: 1400px;
+  margin: 16px auto 0;
+  text-align: center;
+
+  span {
+    display: inline-block;
+    background: #fffbe6;
+    color: #ad6800;
+    font-size: 13px;
+    padding: 8px 20px;
+    border-radius: 8px;
+    border: 1px solid #ffe58f;
+  }
+}

package/src/ly/chart/index.tsx

@@ -0,0 +1,272 @@
+import { useEffect, useRef, useState, useCallback } from "react";
+import * as echarts from "echarts";
+import { DatePicker } from "antd";
+import dayjs, { Dayjs } from "dayjs";
+import s from "./index.less";
+
+const { RangePicker } = DatePicker;
+
+// 根据小时生成模拟随机数（带日间波动规律）
+function generateData(startDate: Dayjs, endDate: Dayjs) {
+  const xData: string[] = [];
+  const temperatureData: number[] = [];
+  const humidityData: number[] = [];
+  const powerData: number[] = [];
+
+  const totalDays = endDate.diff(startDate, "day") + 1;
+
+  for (let d = 0; d < totalDays; d++) {
+    const currentDay = startDate.add(d, "day");
+    const dateStr = currentDay.format("YYYY-MM-DD");
+
+    for (let h = 0; h < 24; h++) {
+      const hour = h.toString().padStart(2, "0");
+      xData.push(`${dateStr} ${hour}:00`);
+
+      // 温度：夜间低(14-18°C)，日间高(24-32°C)
+      const tempBase = h >= 8 && h <= 18 ? 24 : 16;
+      const tempRange = h >= 8 && h <= 18 ? 8 : 4;
+      temperatureData.push(
+        +(tempBase + Math.random() * tempRange).toFixed(1)
+      );
+
+      // 湿度：与温度大致相反，夜间高(65-80%)，日间低(40-58%)
+      const humBase = h >= 8 && h <= 18 ? 40 : 65;
+      const humRange = h >= 8 && h <= 18 ? 18 : 15;
+      humidityData.push(
+        +(humBase + Math.random() * humRange).toFixed(1)
+      );
+
+      // 用电量：工作时间高(300-500kWh)，夜间低(80-160kWh)
+      const powBase = h >= 8 && h <= 20 ? 300 : 80;
+      const powRange = h >= 8 && h <= 20 ? 200 : 80;
+      powerData.push(
+        +(powBase + Math.random() * powRange).toFixed(0)
+      );
+    }
+  }
+
+  return { xData, temperatureData, humidityData, powerData };
+}
+
+// 默认时间：当前时间前三天
+const defaultRange: [Dayjs, Dayjs] = [
+  dayjs().subtract(2, "day").startOf("day"),
+  dayjs().startOf("day"),
+];
+
+export default function ChartPage() {
+  const chartRef = useRef<HTMLDivElement>(null);
+  const chartInstance = useRef<echarts.ECharts | null>(null);
+  const [dateRange, setDateRange] = useState<[Dayjs, Dayjs]>(defaultRange);
+
+  // 构建 ECharts 配置
+  const buildOption = useCallback(
+    (data: ReturnType<typeof generateData>): echarts.EChartsOption => {
+      const totalPoints = data.xData.length;
+      // 默认展示约 24 个数据点（1天）的宽度
+      const visiblePercent = Math.min(100, (24 / totalPoints) * 100);
+
+      return {
+        title: {
+          text: `${dateRange[0].format("MM-DD")} 至 ${dateRange[1].format("MM-DD")} 环境监测统计图`,
+          subtext: `共 ${totalPoints} 个数据点 · 温度 / 湿度 / 用电量（每小时采样）`,
+          left: "center",
+          textStyle: { color: "#333", fontSize: 20, fontWeight: "bold" },
+          subtextStyle: { color: "#999", fontSize: 13 },
+          top: 16,
+        },
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(255,255,255,0.96)",
+          borderColor: "#eee",
+          textStyle: { color: "#333" },
+          axisPointer: { type: "cross", crossStyle: { color: "#999" } },
+        },
+        legend: {
+          data: ["温度 (°C)", "湿度 (%)", "用电量 (kWh)"],
+          top: 80,
+          itemGap: 32,
+          textStyle: { fontSize: 13 },
+        },
+        grid: {
+          left: 60,
+          right: 60,
+          top: 130,
+          bottom: 120,
+        },
+        xAxis: {
+          type: "category",
+          data: data.xData,
+          axisLabel: {
+            rotate: 45,
+            fontSize: 11,
+            interval: Math.max(0, Math.floor(totalPoints / 24) - 1),
+            formatter: (value: string) => {
+              const parts = value.split(" ");
+              return `${parts[0].slice(5)}\n${parts[1]}`;
+            },
+          },
+          axisTick: { alignWithLabel: true },
+          boundaryGap: false,
+          splitLine: { show: true, lineStyle: { type: "dashed", color: "#eee" } },
+        },
+        yAxis: [
+          {
+            type: "value",
+            name: "温度(°C) / 湿度(%)",
+            position: "left",
+            axisLabel: { formatter: "{value}" },
+            splitLine: { lineStyle: { type: "dashed", color: "#eee" } },
+          },
+          {
+            type: "value",
+            name: "用电量(kWh)",
+            position: "right",
+            axisLabel: { formatter: "{value}" },
+            splitLine: { show: false },
+          },
+        ],
+        dataZoom: [
+          {
+            type: "slider",
+            xAxisIndex: 0,
+            start: 0,
+            end: visiblePercent,
+            bottom: 20,
+            height: 30,
+            borderColor: "#ddd",
+            fillerColor: "rgba(64,136,255,0.15)",
+            handleStyle: { color: "#4088ff" },
+            textStyle: { fontSize: 11 },
+          },
+          {
+            type: "inside",
+            xAxisIndex: 0,
+            start: 0,
+            end: visiblePercent,
+          },
+        ],
+        series: [
+          {
+            name: "温度 (°C)",
+            type: "line",
+            data: data.temperatureData,
+            smooth: true,
+            symbol: "circle",
+            symbolSize: 6,
+            lineStyle: { width: 2.5, color: "#ff6b6b" },
+            itemStyle: { color: "#ff6b6b" },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "rgba(255,107,107,0.25)" },
+                { offset: 1, color: "rgba(255,107,107,0.02)" },
+              ]),
+            },
+          },
+          {
+            name: "湿度 (%)",
+            type: "line",
+            data: data.humidityData,
+            smooth: true,
+            symbol: "circle",
+            symbolSize: 6,
+            lineStyle: { width: 2.5, color: "#4ecdc4" },
+            itemStyle: { color: "#4ecdc4" },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "rgba(78,205,196,0.25)" },
+                { offset: 1, color: "rgba(78,205,196,0.02)" },
+              ]),
+            },
+          },
+          {
+            name: "用电量 (kWh)",
+            type: "line",
+            yAxisIndex: 1,
+            data: data.powerData,
+            smooth: true,
+            symbol: "circle",
+            symbolSize: 6,
+            lineStyle: { width: 2.5, color: "#4088ff" },
+            itemStyle: { color: "#4088ff" },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "rgba(64,136,255,0.25)" },
+                { offset: 1, color: "rgba(64,136,255,0.02)" },
+              ]),
+            },
+          },
+        ],
+      };
+    },
+    [dateRange]
+  );
+
+  // 初始化图表
+  useEffect(() => {
+    if (!chartRef.current) return;
+    chartInstance.current = echarts.init(chartRef.current);
+
+    const handleResize = () => chartInstance.current?.resize();
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      chartInstance.current?.dispose();
+    };
+  }, []);
+
+  // 时间区间变化时更新图表
+  useEffect(() => {
+    if (!chartInstance.current) return;
+    const data = generateData(dateRange[0], dateRange[1]);
+    chartInstance.current.setOption(buildOption(data), true);
+  }, [dateRange, buildOption]);
+
+  const onRangeChange = (dates: [Dayjs | null, Dayjs | null] | null) => {
+    if (dates && dates[0] && dates[1]) {
+      setDateRange([dates[0].startOf("day"), dates[1].startOf("day")]);
+    }
+  };
+
+  return (
+    <div className={s.page}>
+      <div className={s.header}>
+        <h1>数据统计看板</h1>
+        <p>环境监测数据 · 每小时采样一次 · 拖动下方滑块或鼠标滚轮可浏览全部数据</p>
+      </div>
+      <div className={s.toolbar}>
+        <div className={s.toolbarLeft}>
+          <span className={s.label}>时间区间：</span>
+          <RangePicker
+            value={dateRange}
+            onChange={onRangeChange}
+            allowClear={false}
+            format="YYYY-MM-DD"
+            disabledDate={(current) => current && current > dayjs().endOf("day")}
+            presets={[
+              { label: "近 1 天", value: [dayjs().subtract(0, "day").startOf("day"), dayjs().startOf("day")] },
+              { label: "近 3 天", value: [dayjs().subtract(2, "day").startOf("day"), dayjs().startOf("day")] },
+              { label: "近 7 天", value: [dayjs().subtract(6, "day").startOf("day"), dayjs().startOf("day")] },
+              { label: "近 15 天", value: [dayjs().subtract(14, "day").startOf("day"), dayjs().startOf("day")] },
+              { label: "近 30 天", value: [dayjs().subtract(29, "day").startOf("day"), dayjs().startOf("day")] },
+            ]}
+          />
+        </div>
+        <div className={s.toolbarRight}>
+          <span className={s.info}>
+            共 <strong>{dateRange[1].diff(dateRange[0], "day") + 1}</strong> 天 /
+            <strong>{(dateRange[1].diff(dateRange[0], "day") + 1) * 24}</strong> 个数据点
+          </span>
+        </div>
+      </div>
+      <div className={s.chartWrapper}>
+        <div ref={chartRef} className={s.chart} />
+      </div>
+      <div className={s.tips}>
+        <span>💡 提示：拖动图表下方滑块可左右浏览数据，也可在图表区域内使用鼠标滚轮缩放</span>
+      </div>
+    </div>
+  );
+}