@ebiz/designer-components 0.0.47 → 0.0.49

package/src/components/charts/feature/expandLegend/mutiSelectLegend/index.js

@@ -1,97 +0,0 @@
-/**
- * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
- * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
-import paging from "./paging";
-import group from "./group";
-import more from "./more";
-import scroll from "./scroll";
-import throttle from "../../../util/throttle";
-const DEFAULT_OPTION = {
-    data: [],
-    onclick: () => {},
-};
-const THROTTLE_INTERVAL = 500;
-class MutiSelectLegend {
-    constructor(element) {
-
-        // 根节点
-        this.root = element;
-
-        // 所有的图例
-        this.item = [];
-
-        // 当前主题下的配色
-        this.color = [];
-
-        // 所有图例的分组情况
-        this.group = [];
-
-        // 当前所在页码，从0开始
-        this.current = 0;
-
-        // 当前的数据
-        this.data = [];
-
-        // 图例的点击事件
-        this.onclick = () => {};
-    }
-
-    setOption(option) {
-        option = option || DEFAULT_OPTION;
-        this.onclick = option.onclick;
-        this.itemStyle = option.itemStyle;
-        this.color = option.color;
-        this.onLegendClick = option.onLegendClick;
-        this.initData(option.data);
-        this.setResizeObserver();
-    }
-
-    // 组装数据
-    initData(data) {
-        this.data = [];
-        if (Array.isArray(data)) {
-            for (let i = 0; i < data.length; i++) {
-                this.data.push({
-                    name: data[i]["name"] === undefined ? data[i] : data[i]["name"],
-                    value: data[i]["value"] === undefined ? data[i] : data[i]["value"],
-                    selected: data[i]["selected"] === undefined ? true : data[i]["selected"],
-                    show: data[i]["show"] === undefined ? true : data[i]["show"],
-                    color: this.color.length === 0 ? "#000" : this.color[i % this.color.length],
-                });
-            }
-        }
-    }
-
-    // 创建整个图例滚动框
-    create() {
-        const scrollDom = scroll.call(this);
-        const pagingDom = paging.call(this);
-        const moreDom = more.call(this);
-        this.root.append(scrollDom, pagingDom, moreDom);
-        group.call(this);
-    }
-
-    getData() {
-        return this.data;
-    }
-
-    // 响应式监听
-    setResizeObserver() {
-        this.resizeObserver = new ResizeObserver(() => {
-            throttle(THROTTLE_INTERVAL, () => {
-                this.root.innerHTML = "";
-                this.create();
-            })();
-        });
-        this.resizeObserver.observe(this.root);
-    }
-}
-export default MutiSelectLegend;

package/src/components/charts/feature/expandLegend/mutiSelectLegend/item.js

@@ -1,115 +0,0 @@
-/**
- * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
- * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
-import { CSS_CLASS,SVG_ICON } from "./constants";
-import { uuid } from "../../../util/math";
-import { getTextWidth } from "../../../util/dom";
-import { svgTransform } from "../../../util/convert";
-// 图例的默认宽度
-const DEFAULT_WIDTH = "160px"
-
-// tips文字大小
-const TEXT_SIZE = 14;
-
-// 创建每个图例
-function item(data, index) {
-
-    // 创建整个图例的盒子
-    const item = document.createElement("div");
-    item.classList.add(CSS_CLASS.ITEM);
-    item.id = `${CSS_CLASS.ITEM}_${uuid()}`;
-    item.dataset.id = index;
-
-    // 创建图例文字前面的图标
-    const itemIcon = document.createElement("div");
-    itemIcon.classList.add(CSS_CLASS.ITEM_ICON)
-    itemIcon.style.backgroundColor = data.color;
-    if(this?.itemStyle?.icon === "line"){
-        itemIcon.classList.add(CSS_CLASS.ITEM_ICON_LINE);
-    }else{
-        itemIcon.classList.add(CSS_CLASS.ITEM_ICON_CIRCLE);
-    }
-
-    // 创建图例的文字
-    const itemText = document.createElement("span");
-    itemText.classList.add(CSS_CLASS.ITEM_TEXT);
-    itemText.innerText = data.name;
-    itemText.title = data.name;
-
-    // 如果设置了图例最大宽度就设置
-    if (this.itemStyle) {
-        this.itemStyle.maxTextWidth && (itemText.style.maxWidth = this.itemStyle.maxTextWidth)
-        if (this.itemStyle.showTips) {
-            let maxTextWidth = this.itemStyle.maxTextWidth || DEFAULT_WIDTH
-            maxTextWidth = maxTextWidth.split('px')[0] - 0
-
-            // 如果图例超出了最大宽度就增加hover触发的tips
-            if (getTextWidth(data.name,TEXT_SIZE) > maxTextWidth) {
-                let tips = new Tips(item);
-                tips.setOption({
-                    data: data.name,
-                    onclick: () => { },
-                });
-            }
-        }
-    }
-
-    const copy = document.createElement('img')
-    copy.classList.add('copy')
-    if(this?.itemStyle?.copy){
-        const svg1 = svgTransform(SVG_ICON.COPY1)
-        const svg2 = svgTransform(SVG_ICON.COPY2)
-        copy.src = svg1
-
-        copy.addEventListener('mouseover', (e) => {
-            e.stopPropagation()
-            copy.src = svg2
-        })
-        copy.addEventListener('mouseleave', (e) => {
-            e.stopPropagation()
-            copy.src = svg1
-        })
-        copy.addEventListener('click', async (e) => {
-            e.stopPropagation()
-            let clipboard = navigator.clipboard || {
-                writeText: (text) => {
-                    let copyInput = document.createElement('input');
-                    copyInput.value = text;
-                    document.body.appendChild(copyInput);
-                    copyInput.select();
-                    document.execCommand('copy');
-                    document.body.removeChild(copyInput);
-                }
-            }
-            if (clipboard) {
-                await clipboard.writeText(data.name);
-            }
-        })
-    }
-    item.append(itemIcon, itemText, copy);
-
-    // 图例是否未激活
-    if (data.show === false) {
-        itemIcon.classList.toggle(CSS_CLASS.ITEM_ICON_UNACTIVE);
-        itemText.classList.toggle(CSS_CLASS.ITEM_TEXT_UNACTIVE);
-    }
-    
-    // 图例添加点击事件切换样式
-    item.addEventListener("click", (e) => {
-        e.stopPropagation();
-        data.show = !data.show
-        itemIcon.classList.toggle(CSS_CLASS.ITEM_ICON_UNACTIVE);
-        itemText.classList.toggle(CSS_CLASS.ITEM_TEXT_UNACTIVE);
-        this.onLegendClick && this.onLegendClick(this.data[index]);
-    });
-    return item;
-}
-export default item;

package/src/components/charts/feature/expandLegend/mutiSelectLegend/more.js

@@ -1,101 +0,0 @@
-/**
- * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
- * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
-import MutiSelect from "../mutiSelect";
-import item from "./item";
-import group from "./group";
-import { CSS_CLASS, SVG_ICON } from "./constants";
-import { uuid } from "../../../util/math";
-import { svgTransform } from "../../../util/convert";
-
-// 创建更多按钮
-function more() {
-    const more = document.createElement("div");
-    const moreIcon = document.createElement("img");
-    more.id = `more-${uuid()}`;
-    moreIcon.src = svgTransform(SVG_ICON.EVEN_MORE);
-    more.classList.add(CSS_CLASS.MORE);
-    more.appendChild(moreIcon);
-    let dropdown = new MutiSelect(more);
-    dropdown.setOption({
-        data: this.data,
-        itemStyle:this.itemStyle,
-        // 点击触发的事件
-        onclick: (index) => {
-
-            this.paging.style.opacity = 1;
-            this.paging.style.zIndex = 1;
-            this.data.forEach((item) => (item.show = true));
-
-            // 如果多选框中某个选项被激活
-            if (this.data[index].selected) {
-
-                // 创建对应的图例
-                let itemDom = item.call(this, this.data[index], index);
-                this.item.push(itemDom);
-
-                // 将图例进行排序
-                this.item.sort((item1, item2) => {
-                    return item1.dataset.id - item2.dataset.id;
-                });
-            } else {
-
-                // 如果条目被取消
-                this.item = [...this.item.filter((item) => item.dataset.id != index)];
-            }
-
-            // 先去掉之前加的空白占位
-            this.item = [...this.item.filter((item) => !item.classList.contains(CSS_CLASS.PLACEHOLDER))];
-
-            // 重置其他图例的状态
-            this.item.forEach((item, cur) => {
-                if (cur !== index) {
-                    removeUnactiveState(item);
-                }
-            });
-
-            // 替换目前选择的图例dom
-            this.scroll.replaceChildren(...this.item);
-
-            // 对它们分组
-            group.call(this);
-            this.current = 0;
-
-            // 分页按钮状态判断
-            this.pagingText.innerText = `${this.current + 1}/${this.group.length > 0 ? this.group.length : 1}`;
-            this.pagingLeftIcon.src = svgTransform(SVG_ICON.LEFT_ARROW);
-            this.pagingLeftIcon.classList.remove(CSS_CLASS.PAGING_ICON_ROTATE);
-            if (this.current + 1 === this.group.length || this.group.length === 0) {
-                this.pagingRightIcon.src = svgTransform(SVG_ICON.LEFT_ARROW);
-                this.pagingRightIcon.classList.add(CSS_CLASS.PAGING_ICON_ROTATE);
-            } else {
-                this.pagingRightIcon.src = svgTransform(SVG_ICON.RIGHT_ARROW);
-                this.pagingRightIcon.classList.remove(CSS_CLASS.PAGING_ICON_ROTATE);
-            }
-            this.onclick(this.data[index], this.data);
-        },
-    });
-    return more;
-}
-
-// 重置其他图例的状态
-function removeUnactiveState(item) {
-    let icon = item.querySelector(`.${CSS_CLASS.ITEM_ICON}`);
-    let text = item.querySelector(`.${CSS_CLASS.ITEM_TEXT}`);
-    if (icon) {
-        icon.classList.remove(CSS_CLASS.ITEM_ICON_UNACTIVE);
-    }
-    if (text) {
-        text.classList.remove(CSS_CLASS.ITEM_TEXT_UNACTIVE);
-    }
-}
-
-export default more;

package/src/components/charts/feature/expandLegend/mutiSelectLegend/paging.js

@@ -1,103 +0,0 @@
-/**
- * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
- * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
-import { CSS_CLASS, SVG_ICON } from "./constants";
-import { svgTransform } from "../../../util/convert";
-
-// 创建分页
-function createPaging() {
-
-    // 默认初始位置
-    this.current = 0;
-
-    // 创建paing
-    const paging = document.createElement("div");
-    paging.classList.add(CSS_CLASS.PAGING);
-
-    // paing中间的文字
-    const pagingText = document.createElement("span");
-    pagingText.classList.add(CSS_CLASS.PAGING_TEXT);
-    pagingText.innerText = `1/2`;
-
-    // paging左右按钮的盒子
-    const pagingLeft = document.createElement("div");
-    const pagingRight = document.createElement("div");
-    pagingLeft.classList.add(CSS_CLASS.PAGING_LEFT);
-    pagingRight.classList.add(CSS_CLASS.PAGING_RIGHT);
-
-    // paing的左右按钮
-    const pagingLeftIcon = document.createElement("img");
-    const pagingRightIcon = document.createElement("img");
-    pagingLeftIcon.src = svgTransform(SVG_ICON.LEFT_ARROW);
-    pagingRightIcon.src = svgTransform(SVG_ICON.RIGHT_ARROW);
-    pagingLeftIcon.classList.add(CSS_CLASS.PAGING_ICON);
-    pagingRightIcon.classList.add(CSS_CLASS.PAGING_ICON);
-    pagingLeft.append(pagingLeftIcon);
-    pagingRight.append(pagingRightIcon);
-
-    // paing左按钮点击事件
-    pagingLeft.addEventListener("click", (e) => {
-        e.stopPropagation();
-        if (this.current >= 1) {
-            this.current--;
-
-            // 展示当前分组页的图例
-            this.group[this.current][this.group[this.current].length - 1].scrollIntoView({
-                behavior: "smooth",
-                block: "nearest",
-                inline: "end",
-            });
-            pagingText.innerText = `${this.current + 1}/${this.group.length}`;
-
-            // 左按钮是否置灰
-            if (this.current === 0) {
-                pagingLeftIcon.src = svgTransform(SVG_ICON.LEFT_ARROW);
-                pagingLeftIcon.classList.remove(CSS_CLASS.PAGING_ICON_ROTATE);
-            }
-            pagingRightIcon.src = svgTransform(SVG_ICON.RIGHT_ARROW);
-            pagingRightIcon.classList.remove(CSS_CLASS.PAGING_ICON_ROTATE);
-        }
-    });
-
-    // paing右按钮点击事件
-    pagingRight.addEventListener("click", (e) => {
-        e.stopPropagation();
-        if (this.current < this.group.length - 1) {
-            this.current++;
-
-            // 展示当前分组页的图例
-            this.group[this.current][this.group[this.current].length - 1].scrollIntoView({
-                behavior: "smooth",
-                block: "nearest",
-                inline: "end",
-            });
-            pagingText.innerText = `${this.current + 1}/${this.group.length}`;
-
-            // 右按钮是否置灰
-            if (this.current + 1 === this.group.length) {
-                pagingRightIcon.src = svgTransform(SVG_ICON.LEFT_ARROW);
-                pagingRightIcon.classList.add(CSS_CLASS.PAGING_ICON_ROTATE);
-            }
-            pagingLeftIcon.src = svgTransform(SVG_ICON.RIGHT_ARROW);
-            pagingLeftIcon.classList.add(CSS_CLASS.PAGING_ICON_ROTATE);
-        }
-    });
-
-    // 插入paign的dom
-    paging.append(pagingLeft, pagingText, pagingRight);
-    this.paging = paging;
-    this.pagingText = pagingText;
-    this.pagingLeftIcon = pagingLeftIcon;
-    this.pagingRightIcon = pagingRightIcon;
-    return paging;
-}
-
-export default createPaging;

package/src/components/charts/feature/expandLegend/mutiSelectLegend/scroll.js

@@ -1,33 +0,0 @@
-/**
- * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
- * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
-import item from "./item";
-import { CSS_CLASS } from "./constants";
-
-// 创建图例框
-function scroll() {
-    const scrollDom = document.createElement("div");
-    scrollDom.classList.add(CSS_CLASS.SCROLL);
-    this.item = [];
-    
-    // 根据数据循环创造图例
-    this.data.forEach((element, index) => {
-        if (element.selected) {
-            let itemDom = item.call(this, element, index);
-            this.item.push(itemDom);
-            scrollDom.append(itemDom);
-        }
-    });
-    this.scroll = scrollDom;
-    return scrollDom;
-}
-
-export default scroll;

package/src/components/charts/feature/expandLegend/mutiSelectList/constants.js

@@ -1,34 +0,0 @@
-/**
- * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
- * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
-export const CSS_CLASS = {
-    LIST: "hui_expand_legend_list",
-    ITEM: "hui_expand_legend_list_item",
-    ICON_LINE: "hui_expand_legend_list_item_icon_line",
-    ICON_CIRCLE: "hui_expand_legend_list_item_icon_circle",
-    ITEM_TEXT: "hui_expand_legend_list_item_text",
-    ITEM_COPY:"hui_expand_legend_list_item_copy",
-    ICON_UNACTIVE: "hui_expand_legend_list_item_icon_unactive",
-    ITEM_UNACTIVE: "hui_expand_legend_list_item_unactive",
-    TABLE:"hui_expand_legend_table",
-    HEAD:"hui_expand_legend_table_head",
-    TABLE_ITEM:"hui_expand_legend_table_item",
-    OTHER_TABLE_ITEM:"hui_expand_legend_table_other_item"
-};
-
-export const SVG_ICON = {
-    COPY1:`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path fill="#808080" d="m14.25,6c2.07,0,3.75,1.68,3.75,3.75v9c0,2.07-1.68,3.75-3.75,3.75H5.25c-2.07,0-3.75-1.68-3.75-3.75v-9c0-2.07,1.68-3.75,3.75-3.75h9Zm0,1.5H5.25c-1.24,0-2.25,1.01-2.25,2.25v9c0,1.24,1.01,2.25,2.25,2.25h9c1.24,0,2.25-1.01,2.25-2.25v-9c0-1.24-1.01-2.25-2.25-2.25Zm4.5-5.99c2.07,0,3.75,1.68,3.75,3.75v7.5c0,.41-.34.75-.75.75s-.75-.34-.75-.75v-7.5c0-1.24-1.01-2.25-2.25-2.25h-7.5c-.41,0-.75-.34-.75-.75s.34-.75.75-.75h7.5Z"></path>
-  </svg>`,
-    COPY2:`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path fill="#000000" d="m14.25,6c2.07,0,3.75,1.68,3.75,3.75v9c0,2.07-1.68,3.75-3.75,3.75H5.25c-2.07,0-3.75-1.68-3.75-3.75v-9c0-2.07,1.68-3.75,3.75-3.75h9Zm0,1.5H5.25c-1.24,0-2.25,1.01-2.25,2.25v9c0,1.24,1.01,2.25,2.25,2.25h9c1.24,0,2.25-1.01,2.25-2.25v-9c0-1.24-1.01-2.25-2.25-2.25Zm4.5-5.99c2.07,0,3.75,1.68,3.75,3.75v7.5c0,.41-.34.75-.75.75s-.75-.34-.75-.75v-7.5c0-1.24-1.01-2.25-2.25-2.25h-7.5c-.41,0-.75-.34-.75-.75s.34-.75.75-.75h7.5Z"></path>
-  </svg>`,
-};

package/src/components/charts/feature/expandLegend/mutiSelectList/index.js

@@ -1,181 +0,0 @@
-/**
- * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
- * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
-import Tips from "../tips";
-import { CSS_CLASS,SVG_ICON } from "./constants";
-import { uuid } from "../../../util/math";
-import throttle from "../../../util/throttle";
-import { getTextWidth } from "../../../util/dom";
-import statisticsList from "./statisticList";
-import { svgTransform } from "../../../util/convert";
-
-// 节流间隔
-const THROTTLE_INTERVAL = 500;
-
-// tips文字大小
-const TEXT_SIZE = 14;
-
-const DEFAULT_OPTION = {
-    data: [],
-    onclick: () => {},
-    style: {
-        sign: "circle",
-    },
-};
-class MutiSelectList {
-    constructor(root) {
-
-        // 根元素
-        this.root = root;
-
-        // 数据
-        this.data = null;
-    }
-
-    setOption(option) {
-        option = option || DEFAULT_OPTION;
-
-        // 主题颜色
-        this.color = option.color;
-
-        // 整个图例占父元素的高度
-        this.height = option.height;
-
-        // 图例的点击事件
-        this.onclick = option.onclick
-
-        // 图例的一些样式
-        this.itemStyle = option.itemStyle;
-
-        this.statistics = option.statistics
-        this.initData(option.data);
-        this.setResizeObserver();
-    }
-
-    // 组装数据
-    initData(data) {
-        this.data = [];
-        if (Array.isArray(data)) {
-            for (let i = 0; i < data.length; i++) {
-                this.data.push({
-                    name: data[i]["name"] === undefined ? data[i] : data[i]["name"],
-                    value: data[i]["value"] === undefined ? data[i] : data[i]["value"],
-                    selected: data[i]["selected"] === undefined ? true : data[i]["selected"],
-                    color: this.color.length === 0 ? "#000" : this.color[i % this.color.length],
-                });
-            }
-        }
-    }
-
-    // 创建列表
-    create(onclick) {
-        let list = document.createElement("div");
-        list.classList.add(CSS_CLASS.LIST);
-        list.style.height = this.height;
-        if(this.statistics){
-            list.style.display = "flex"
-            list.style.alignItems="center"
-            list.append(statisticsList.call(this))
-        }
-        else{
-            let maxWidth = this.root.getBoundingClientRect().width
-            this.data.forEach((data, index) => {
-                let item = document.createElement("div");
-                item.id = `${CSS_CLASS.ITEM}_${uuid()}`;
-                item.classList.add(CSS_CLASS.ITEM);
-                let icon = document.createElement("div");
-    
-                // icon是展示为线还是小圆点
-                if (this?.itemStyle?.icon === "line") {
-                    icon.classList.add(CSS_CLASS.ICON_LINE);
-                } else {
-                    icon.classList.add(CSS_CLASS.ICON_CIRCLE);
-                }
-                icon.style.background = data.color;
-                let text = document.createElement("span");
-                text.innerText = data.name;
-                text.classList.add(CSS_CLASS.ITEM_TEXT);
-
-                const copy = document.createElement('img')
-                copy.classList.add('copy')
-                if(this?.itemStyle?.copy){
-                    const svg1 = svgTransform(SVG_ICON.COPY1)
-                    const svg2 = svgTransform(SVG_ICON.COPY2)
-                    copy.src = svg1
-                    copy.addEventListener('mouseover', (e) => {
-                        e.stopPropagation()
-                        copy.src = svg2
-                    })
-                    copy.addEventListener('mouseleave', (e) => {
-                        e.stopPropagation()
-                        copy.src = svg1
-                    })
-                    copy.addEventListener('click', async (e) => {
-                        e.stopPropagation()
-                        let clipboard = navigator.clipboard || {
-                            writeText: (text) => {
-                                let copyInput = document.createElement('input');
-                                copyInput.value = text;
-                                document.body.appendChild(copyInput);
-                                copyInput.select();
-                                document.execCommand('copy');
-                                document.body.removeChild(copyInput);
-                            }
-                        }
-                        if (clipboard) {
-                            await clipboard.writeText(data.name);
-                        }
-                    })
-                }
-                // 是否要展示tips
-                if (this?.itemStyle?.showTips) {
-                    if (getTextWidth(data.name, TEXT_SIZE) > maxWidth) {
-                        let tips = new Tips(item);
-                        tips.setOption({
-                            data: data.name,
-                            onclick: () => {},
-                        });
-                    }
-                }
-                item.append(icon, text, copy);
-    
-                // 每个图例的点击事件
-                item.addEventListener("click", (e) => {
-                    e.stopPropagation();
-                    icon.classList.toggle(CSS_CLASS.ICON_UNACTIVE);
-                    text.classList.toggle(CSS_CLASS.ITEM_UNACTIVE);
-                    onclick && onclick(this.data[index]);
-                });
-                list.append(item);
-            });
-        }
-       
-        // 列表滚动时立刻销毁所有tips
-        list.addEventListener("scroll", (e) => {
-            e.stopPropagation();
-            Tips.destoryImmediately();
-        });
-        this.root.append(list);
-    }
-
-    // 响应式监听
-    setResizeObserver() {
-        this.resizeObserver = new ResizeObserver(() => {
-            throttle(THROTTLE_INTERVAL, () => {
-                this.root.innerHTML = "";
-                this.create(this.onclick);
-            })();
-        });
-        this.resizeObserver.observe(this.root);
-    }
-}
-
-export default MutiSelectList;