onesight-charts 0.0.1

package/dist/utils/chartUtils.js

@@ -0,0 +1,215 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function isZH() {
+  //   return getLocale() === 'zh-CN';
+  return true;
+}
+
+// 判断是否为浮点数
+function isFloat(n) {
+  return /^-?\d*\.\d+$/.test(n);
+}
+function changeDataTypeEn(s) {
+  var number = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
+  var n = number;
+  if (s === null) {
+    return '-';
+  }
+  if (!s && s !== 0 && s !== '0') {
+    return '0';
+  }
+  // 千位符 计算 s 是传入参数 n 是要保留的位数
+  var f = '';
+  if (Number(s) < 0) {
+    f = '-';
+  }
+  n = n >= 0 && n <= 20 ? n : 2;
+  s = parseFloat((s + '').replace(/[^\d\.]/g, ''));
+  var bese = Math.pow(10, n);
+  s = s * bese;
+  s = s.toFixed() / bese + '';
+  if (isFloat(s)) {
+    // start
+    var rs = s.indexOf('.');
+    if (rs < 0) {
+      rs = s.length;
+      s += '.';
+    }
+    while (s.length <= rs + n) {
+      s += '0';
+    }
+    // end
+  }
+  var l = s.split('.')[0].split('').reverse();
+  var r = s.split('.')[1];
+  var t = '';
+  for (var i = 0; i < l.length; i++) {
+    t += l[i] + ((i + 1) % 3 === 0 && i + 1 !== l.length ? ',' : '');
+  }
+  var sendStr = '';
+  if (n !== 0 && r) {
+    sendStr = t.split('').reverse().join('') + '.' + r;
+  } else {
+    sendStr = t.split('').reverse().join('');
+  }
+  return f + sendStr;
+}
+function numberFormatMust(num, fixed) {
+  var value = num;
+  var fixedNum = isZH() ? 2 : 1;
+  var originNum = num;
+  if (num < 0) {
+    num = Math.abs(num);
+  }
+  isZH() ? num >= 100000000 ? value = changeDataTypeEn(num / 100000000, fixedNum) + '亿' : num >= 10000 ? value = changeDataTypeEn(num / 10000, fixedNum) + '万' : value = changeDataTypeEn(num, fixedNum) : num >= 1000000000 ? value = changeDataTypeEn(num / 1000000000, fixedNum) + 'B' : num >= 1000000 ? value = changeDataTypeEn(num / 1000000, fixedNum) + 'M' : num >= 1000 ? value = changeDataTypeEn(num / 1000, fixedNum) + 'K' : value = changeDataTypeEn(num, fixedNum);
+  if (originNum < 0) {
+    return "-".concat(value);
+  }
+  return value;
+}
+
+// 判断数值是否为空
+function isNumNull(num) {
+  return num === null || num === undefined || isNaN(num);
+}
+function computeFloatNull(num) {
+  var per = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100;
+  var unit = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '%';
+  if (isNumNull(num)) {
+    return '-';
+  } else if (num === 0) {
+    return '0' + unit;
+  } else {
+    return (num >= 0.00004 ? changeDataTypeEn(num * per, 2) : '＜0.01') + unit;
+  }
+}
+
+// 数值处理，null的话为-
+function numberFormatNull(num, fixed) {
+  return isNumNull(num) ? '-' : numberFormatMust(num, fixed);
+}
+
+// 处理图表图例模糊的问题
+function dealPath(elementId) {
+  var sawtooth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  // 获取所有path元素
+  var paths = document.querySelectorAll('#' + elementId + ' path');
+  // 遍历每个path元素
+  paths.forEach(function (path) {
+    // 获取当前元素的transform属性
+    var transform = path.getAttribute('transform');
+    // 检查transform属性是否包含translate函数
+    if (transform && transform.includes('translate')) {
+      // 使用正则表达式提取translate中的数字
+      var matches = transform.match(/translate\(([^)]+)\)/);
+      if (matches && matches[1]) {
+        // 将提取的值分割成数组，并进行四舍五入
+        var values = matches[1].split(' ').map(function (value) {
+          return Math.round(parseFloat(value));
+        });
+        // 构造新的translate函数，并更新transform属性
+        var newTransform = 'translate(' + values.join(' ') + ')';
+        path.setAttribute('transform', newTransform);
+      }
+    } else {
+      if (sawtooth) {
+        path.style.shapeRendering = 'crispEdges';
+      }
+    }
+  });
+}
+function modifyStyle(leftValue, currentWidth) {
+  var style = document.createElement('style');
+  style.innerHTML = "\n    .onesight-line-tooltip .triangle-down {\n      width: ".concat(currentWidth, "px !important;\n    }\n    .onesight-line-tooltip .triangle-down::after {\n      left: ").concat(leftValue, " !important;\n    }\n  ");
+  document.head.appendChild(style);
+}
+function computePos(xPoint, currentWidth) {
+  if (currentWidth) {
+    var res = xPoint - currentWidth / 2;
+    var leftValue = 0;
+    if (currentWidth === 340) {
+      leftValue = 50;
+    } else {
+      leftValue = 30;
+    }
+    if (res < 35) {
+      res = xPoint - leftValue;
+      modifyStyle("".concat(leftValue, "px"), currentWidth);
+    } else if (res > 730) {
+      var val = currentWidth - leftValue;
+      res = xPoint - val;
+      modifyStyle("".concat(val, "px"), currentWidth);
+    } else {
+      modifyStyle('50%', currentWidth);
+    }
+    return res;
+  }
+}
+var calculateSeriesTotal = function calculateSeriesTotal(data) {
+  return Object.entries(data).reduce(function (acc, _ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      key = _ref2[0],
+      values = _ref2[1];
+    acc[key] = values.reduce(function (sum, value) {
+      return sum + value;
+    }, 0);
+    return acc;
+  }, {});
+};
+var convertSeriesData = function convertSeriesData(seriesData) {
+  return Object.entries(seriesData).map(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+      name = _ref4[0],
+      data = _ref4[1];
+    return {
+      type: 'line',
+      symbol: 'emptyCircle',
+      symbolSize: 8,
+      showSymbol: false,
+      connectNulls: true,
+      lineStyle: {
+        width: 3
+      },
+      smooth: true,
+      triggerLineEvent: false,
+      emphasis: {
+        focus: 'series',
+        itemStyle: {
+          borderWidth: 2,
+          color: '#fff'
+        }
+      },
+      z: 2,
+      name: name,
+      data: data.map(function (value) {
+        return {
+          value: value,
+          itemStyle: {
+            opacity: 1
+          },
+          select: {
+            itemStyle: {
+              opacity: 1
+            }
+          }
+        };
+      })
+    };
+  });
+};
+function toggleAxisPointer(myChart, show) {
+  myChart.setOption({
+    tooltip: {
+      axisPointer: {
+        lineStyle: {
+          color: show ? 'rgba(0, 0, 0, 0.24)' : 'rgba(0, 0, 0, 0)'
+        }
+      }
+    }
+  });
+}
+export { calculateSeriesTotal, changeDataTypeEn, computeFloatNull, computePos, convertSeriesData, dealPath, numberFormatMust, numberFormatNull, toggleAxisPointer };

package/dist/utils/colors.js

@@ -0,0 +1,26 @@
+var defaultChartColors = ['#1DA9A0', '#5274E8', '#F8AF1D', '#D54CB6', '#51A6E6', '#CB3432', '#EE6666', '#6C5CCE', '#57C464', '#FFED49', '#8FE6D1', '#71B3D2', '#814F9E', '#E85D9F', '#78FA3C', '#F8C6A4', '#166364', '#E1A1FE', '#D0F52B', '#9ECCF6'];
+
+// 在这里定义浅色主题的颜色
+var lightThemeColors = [];
+
+// 在这里定义深色主题的颜色
+var darkThemeColors = [];
+
+// 你也可以为特定类型的图表定义特殊的颜色方案
+
+// 为饼图定义的特殊颜色方案
+var pieChartColors = [];
+
+// 可以导出一个函数来根据不同的图表类型或主题获取颜色
+function getChartColors(chartType) {
+  var theme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'light';
+  switch (chartType) {
+    case 'pie':
+      return pieChartColors;
+    case 'line':
+    case 'bar':
+    default:
+      return theme === 'light' ? lightThemeColors : darkThemeColors;
+  }
+}
+export { darkThemeColors, defaultChartColors, getChartColors, lightThemeColors, pieChartColors };

package/lib/components/line/demo.js

@@ -0,0 +1,42 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/line/demo.jsx
+var demo_exports = {};
+__export(demo_exports, {
+  default: () => demo_default
+});
+module.exports = __toCommonJS(demo_exports);
+var import_react = __toESM(require("react"));
+var import_index = __toESM(require("./index.jsx"));
+var xAxis = ["07/25", "07/26", "07/27", "07/28", "07/29", "07/30", "07/31"];
+var seriesData = {
+  Facebook: [1002, 831, 960, 750, 1451, 1717, 903],
+  X: [22094, 20075, 17410, 12374, 13413, 13904, 6895]
+};
+var demo_default = () => /* @__PURE__ */ import_react.default.createElement(import_index.default, { xAxis, seriesData });

package/lib/components/line/index.js

@@ -0,0 +1,307 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/line/index.jsx
+var line_exports = {};
+__export(line_exports, {
+  default: () => line_default
+});
+module.exports = __toCommonJS(line_exports);
+var echarts = __toESM(require("echarts"));
+var import_react = require("react");
+var import_chartUtils = require("../../utils/chartUtils");
+var import_colors = require("../../utils/colors");
+var import_tooltipConfig = require("./tooltipConfig");
+var import_style = require("./style.scss");
+function Line(props) {
+  const {
+    id = "lineId",
+    width = "100%",
+    height = "400px",
+    color,
+    xAxis,
+    seriesData,
+    tooltipClassName,
+    legendValue = true,
+    showRate = true,
+    tooltipTotalName = "总计",
+    tooltipPosition = true
+  } = props;
+  const chartRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    ceartChart();
+  }, [seriesData]);
+  const seriesTotal = legendValue ? (0, import_chartUtils.calculateSeriesTotal)(seriesData) : {};
+  const ceartChart = () => {
+    const chartColor = color || import_colors.defaultChartColors;
+    let myChart = echarts.init(chartRef.current, null, {
+      renderer: "svg"
+    });
+    const tooltipConfig = (0, import_tooltipConfig.createCustomTooltip)({
+      id,
+      tooltipClassName,
+      myChart,
+      seriesData,
+      tooltipTotalName,
+      showRate,
+      tooltipPosition
+    });
+    const series = (0, import_chartUtils.convertSeriesData)(seriesData);
+    const legendData = Object.keys(seriesData).map((item) => ({
+      name: item
+    }));
+    let option = {
+      legend: {
+        data: legendData,
+        x: "center",
+        type: "plain",
+        bottom: 0,
+        padding: 0,
+        left: "center",
+        icon: "rect",
+        itemWidth: 16,
+        itemHeight: 4,
+        itemGap: 8,
+        formatter: function(name) {
+          const value = legendValue ? (0, import_chartUtils.numberFormatMust)(seriesTotal[name] || 0) : 0;
+          let showName = name;
+          if (seriesData.length >= 4) {
+            const strLen = 15;
+            if (name.length > strLen) {
+              showName = name.substring(0, strLen) + "...";
+            }
+          }
+          return legendValue ? `{labelName|${showName}}
+{labelMark|${value}}` : `{labelName|${showName}}`;
+        },
+        textStyle: {
+          fontWeight: 500,
+          fontSize: 12,
+          color: "#364141",
+          lineHeight: 6,
+          rich: {
+            // 给labelName添加样式
+            labelName: {
+              fontWeight: 500,
+              fontSize: 12,
+              padding: [6, 6, 0, 0]
+            },
+            // 给labelMark添加样式
+            labelMark: {
+              color: "#7A8283",
+              fontSize: 12,
+              padding: [30, 0, 0, 0]
+            }
+          }
+        }
+      },
+      tooltip: tooltipConfig,
+      color: chartColor,
+      animation: false,
+      grid: {
+        top: "24px",
+        bottom: 40,
+        left: 4,
+        containLabel: true
+      },
+      xAxis: {
+        type: "category",
+        axisLine: {
+          lineStyle: {
+            color: "#e5e5e5"
+          }
+        },
+        axisTick: {
+          show: true,
+          alignWithLabel: true,
+          length: 5
+        },
+        axisLabel: {
+          interval: "auto",
+          margin: 12,
+          color: "#515E5F",
+          fontWeight: 500,
+          fontSize: 12,
+          lineHeight: 20
+        },
+        splitLine: {
+          show: false,
+          interval: 0
+        },
+        boundaryGap: false,
+        data: xAxis
+      },
+      yAxis: {
+        type: "value",
+        minInterval: 1,
+        axisLabel: {
+          formatter: function(value) {
+            let formatted = (0, import_chartUtils.numberFormatNull)(value);
+            if (formatted.length < 4) {
+              formatted = "   " + formatted;
+            }
+            return formatted;
+          },
+          margin: 14,
+          color: "#515E5F",
+          fontSize: 12,
+          lineHeight: 20
+        },
+        splitLine: {
+          lineStyle: {
+            type: "dashed",
+            color: "#E5E5E5"
+          }
+        }
+      },
+      series
+    };
+    myChart.off("mouseover");
+    myChart.on("mouseover", function(params) {
+      const updateOption = {
+        series: [],
+        legend: {
+          data: []
+        }
+      };
+      option.series.forEach((item) => {
+        if (params.seriesName === item.name) {
+          item.showSymbol = true;
+          item.data.forEach((val, index) => {
+            if (index === params.dataIndex) {
+              val.symbolSize = 12;
+            } else {
+              val.symbolSize = 0;
+            }
+          });
+        }
+      });
+      option.legend.data.forEach((item) => {
+        if (params.seriesName !== item.name) {
+          item.textStyle = {};
+          item.itemStyle = {};
+          item.textStyle.opacity = 0.2;
+          item.itemStyle.opacity = 0.2;
+        }
+      });
+      updateOption.series = option.series;
+      updateOption.legend.data = option.legend.data;
+      myChart.setOption(updateOption);
+    });
+    myChart.off("mouseout");
+    myChart.on("mouseout", function(params) {
+      const updateOption = {
+        series: [],
+        legend: {
+          data: []
+        }
+      };
+      option.series.forEach((item) => {
+        if (params.seriesName === item.name) {
+          item.showSymbol = false;
+          item.data.forEach((val) => {
+            val.symbolSize = 8;
+          });
+        }
+      });
+      option.legend.data.forEach((item) => {
+        item.textStyle = {};
+        item.itemStyle = {};
+        item.textStyle.opacity = 1;
+        item.itemStyle.opacity = 1;
+      });
+      updateOption.series = option.series;
+      updateOption.legend.data = option.legend.data;
+      myChart.setOption(updateOption);
+      let flag = false;
+      let pixelPoint = myChart.convertToPixel(
+        { seriesIndex: params.seriesIndex },
+        [params.dataIndex, params.value]
+      );
+      if (params && params.event && params.event.offsetX) {
+        if (params.dataIndex === 0 && params.event.offsetX >= pixelPoint[0]) {
+          flag = true;
+        } else if (params.dataIndex === xAxis.length - 1 && params.event.offsetX <= pixelPoint[0]) {
+          flag = true;
+        } else if (params.dataIndex !== 0 && params.dataIndex !== xAxis.length - 1) {
+          flag = true;
+        }
+      }
+      if (flag) {
+        myChart.dispatchAction({
+          type: "highlight",
+          dataIndex: params.dataIndex
+        });
+      }
+      let mouseoutFlag = true;
+      myChart.on("hideTip", function(event) {
+        if (mouseoutFlag) {
+          myChart.dispatchAction({
+            type: "downplay",
+            dataIndex: params.dataIndex
+          });
+          mouseoutFlag = false;
+        }
+      });
+    });
+    let currentIndex = 0;
+    let flagIndex = 0;
+    myChart.off("showTip");
+    myChart.on("showTip", function(event) {
+      if (flagIndex !== event.dataIndex) {
+        (0, import_chartUtils.toggleAxisPointer)(myChart, true);
+        myChart.dispatchAction({
+          type: "highlight",
+          dataIndex: event.dataIndex
+        });
+        currentIndex = event.dataIndex;
+        flagIndex = event.dataIndex;
+      }
+    });
+    myChart.setOption(option, true);
+    myChart.off("rendered");
+    myChart.on("rendered", () => {
+      (0, import_chartUtils.dealPath)(id);
+    });
+    const element = document.querySelector(`.${id}`);
+    if (element) {
+      element.addEventListener("mouseleave", function(event) {
+        if (event && element.offsetHeight && event.offsetY < element.offsetHeight - 2) {
+          (0, import_chartUtils.toggleAxisPointer)(myChart, false);
+          flagIndex = 0;
+          myChart.dispatchAction({
+            type: "downplay",
+            dataIndex: currentIndex
+          });
+        }
+      });
+    }
+  };
+  return /* @__PURE__ */ React.createElement("div", { ref: chartRef, id, style: { width, height } });
+}
+var line_default = Line;

package/lib/components/line/style.scss

@@ -0,0 +1,110 @@
+.onesight-line-tooltip {
+  min-width: 280px;
+  border-color: #dddddd;
+  box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.13);
+  border-radius: 8px;
+  padding: 0;
+  .tooltip-wrap {
+    position: relative;
+  }
+  .tooltip-head {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    border-bottom: 1px solid #eeeeee;
+    padding: 10px 16px 10px;
+    font-weight: bold;
+    font-size: 15px;
+    color: #364141;
+    line-height: 22px;
+  }
+  .tooltip-body {
+    padding: 0 0 0 8px;
+    max-height: 213.64px;
+    overflow-y: auto;
+    .total {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      line-height: 20px;
+      font-size: 14px;
+      font-weight: 600;
+      color: #364141;
+      padding: 14px 8px 2px 8px;
+    }
+    .item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      line-height: 20px;
+      font-weight: 400;
+      font-size: 14px;
+      color: #515e5f;
+      cursor: pointer;
+      border-radius: 6px;
+      margin-top: 8px;
+      margin-right: 1px;
+      height: 32px;
+      padding: 0 8px;
+      .l {
+        flex-grow: 1;
+        flex-shrink: 1;
+        flex-basis: auto;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .l-color {
+        display: inline-block;
+        margin-right: 6px;
+        margin-left: 2px;
+        margin-bottom: 3px;
+        width: 16px;
+        height: 4px;
+        vertical-align: middle;
+      }
+      .r {
+        padding-left: 6px;
+        flex-grow: 0;
+        flex-shrink: 0;
+        white-space: nowrap;
+        .num {
+          vertical-align: baseline;
+          font-weight: bold;
+        }
+      }
+    }
+    .item:last-child {
+      margin-bottom: 8px;
+      border-bottom: none;
+    }
+    .item:only-child {
+      line-height: 32px;
+    }
+    .item:hover {
+      background: #f3f4f4;
+    }
+  }
+  .triangle-down {
+    width: 280px;
+    height: 12px;
+    background: transparent;
+    position: absolute; /* 使用绝对定位 */
+    bottom: -12px; /* 将三角形移动到div的外部 */
+    left: 50%; /* 水平居中 */
+    transform: translateX(-50%); /* 精确调整以确保居中 */
+  }
+
+  .triangle-down::after {
+    content: '';
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-top: 8px solid white;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    filter: drop-shadow(0 1px 0 #dddddd);
+  }
+}