@group_wtf_npm/message/src/WtfMessage.js

message提示

/**
 * 图标配置对象
 * 包含不同类型消息的图标颜色和 SVG 路径。
 */
const icons = {
    success: {
        color: '#0BB746',
        paths: `<path fill='currentColor' d='M512 64c247.424 0 448 200.576 448 448S759.424 960 512 960 64 759.424 64 512 264.576 64 512 64z m298.667 224L437.333 586.667l-224-74.667 224 224 373.334-448z'></path>`
    },
    error: {
        color: '#CF2323',
        paths: `<path fill='currentColor' d='M512 0C229.376 0 0 229.376 0 512s229.376 512 512 512 512-229.376 512-512S794.624 0 512 0z m218.624 672.256c15.872 15.872 15.872 41.984 0 57.856-8.192 8.192-18.432 11.776-29.184 11.776s-20.992-4.096-29.184-11.776L512 569.856l-160.256 160.256c-8.192 8.192-18.432 11.776-29.184 11.776s-20.992-4.096-29.184-11.776c-15.872-15.872-15.872-41.984 0-57.856L454.144 512 293.376 351.744c-15.872-15.872-15.872-41.984 0-57.856 15.872-15.872 41.984-15.872 57.856 0L512 454.144l160.256-160.256c15.872-15.872 41.984-15.872 57.856 0 15.872 15.872 15.872 41.984 0 57.856L569.856 512l160.768 160.256z'></path>`
    },
    warn: {
        color: '#E9994B',
        paths: `
            <path fill='currentColor' d='M1019.20384 901.632L546.62784 82.944c-15.36-26.112-52.736-26.112-68.096 0L5.44384 901.632c-15.36 26.112 3.584 58.88 34.304 58.88h945.152c30.208 0 49.152-32.768 34.304-58.88z'></path>
            <path fill='#FFFFFF' d='M462.14784 353.792h0.512c0-26.112 20.992-47.104 47.104-47.104h5.632c26.112 0 47.104 20.992 47.104 47.104v254.464c0 26.112-21.504 47.616-48.128 47.104h-4.608c-26.112 0-47.616-20.992-47.616-47.104V353.792zM569.66784 775.68c-5.12 26.112-20.48 41.984-46.592 47.616-6.144 1.536-12.288 1.536-18.432 0-27.136-5.632-43.52-20.992-49.152-46.592-1.536-6.656-1.536-13.312 0-19.456 5.632-25.6 22.016-40.96 49.152-46.08 6.144-1.024 12.288-1.024 18.432 0 26.112 5.632 41.472 20.992 46.592 47.104 1.024 5.632 1.024 11.776 0 17.408z'></path>
        `
    },
    info: {
        color: '#1875F0',
        paths: `<path fill='currentColor' d='M512 53.248c129.707008 3.412992 237.739008 48.299008 324.096 134.656S967.339008 382.292992 970.752 512c-3.412992 129.707008-48.299008 237.739008-134.656 324.096S641.707008 967.339008 512 970.752c-129.707008-3.412992-237.739008-48.299008-324.096-134.656S56.660992 641.707008 53.248 512c3.412992-129.707008 48.299008-237.739008 134.656-324.096S382.292992 56.660992 512 53.248z m68.608 281.6c17.748992 0 32.427008-5.291008 44.032-15.872 11.604992-10.580992 17.408-24.747008 17.408-42.496s-5.803008-31.915008-17.408-42.496c-11.604992-10.580992-26.112-15.872-43.52-15.872s-31.915008 5.291008-43.52 15.872c-11.604992 10.580992-17.408 24.747008-17.408 42.496s5.803008 31.915008 17.408 42.496c11.604992 10.580992 25.940992 15.872 43.008 15.872z m12.288 368.64c0-4.096 0.340992-9.556992 1.024-16.384s0.683008-13.312 0-19.456l-54.272 62.464c-5.460992 6.144-11.092992 10.923008-16.896 14.336s-10.752 4.436992-14.848 3.072c-6.144-2.731008-8.875008-7.508992-8.192-14.336l90.112-283.648c3.412992-19.115008 0.340992-35.499008-9.216-49.152-9.556992-13.652992-24.916992-21.844992-46.08-24.576-23.892992 0.683008-50.004992 10.752-78.336 30.208S403.115008 450.219008 381.952 480.256v15.36c-0.683008 6.827008-0.683008 13.312 0 19.456l54.272-62.464c5.460992-6.144 11.092992-10.923008 16.896-14.336s10.411008-4.436992 13.824-3.072c6.827008 3.412992 9.216 8.875008 7.168 16.384l-89.088 282.624c-4.779008 17.067008-2.388992 32.256 7.168 45.568s26.283008 22.356992 50.176 27.136c34.132992-0.683008 62.804992-10.580992 86.016-29.696s44.715008-43.691008 64.512-73.728z'></path>`
    },
};

/**
 * WtfMessage 自定义元素类
 *
 * 用于显示消息提示的 Web Component。
 */
class WtfMessage extends HTMLElement {
    /**
     * 构造函数
     * 初始化 shadow DOM。
     */
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
    }

    /**
     * 生命周期回调：connectedCallback
     * 当元素被插入到 DOM 中时调用。
     * 根据 `type` 属性设置消息的样式和内容。
     */
    connectedCallback() {
        const type = this.getAttribute('type');
        const icon_cnf = icons[type] || icons.info;
        const showIcon = this.getAttribute('showIcon');
        const { color, paths } = icon_cnf || {};
        this.shadowRoot.innerHTML = `
            <style>
                :host{
                    display:block;margin-top:0.8em;font-size:calc(100vw / 1920 * 20);color:${color};animation:msg_in 0.5s forwards;
                    position:relative;padding:0.4em 0.8em;border-radius:0.4em;border:0.08em solid currentColor;box-shadow:0 0.4em 0.8em #ddd;background:#fff;
                }
                @media screen and (min-width: 1501px){:host{font-size:calc(100vw / 1920 * 20);}}
                @media screen and (max-width: 1500px){:host{font-size:calc(100vw / 1500 * 20);}}
                @media screen and (max-width: 750px){:host{font-size:calc(100vw / 750 * 26);}}
                .message_background{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:currentColor;opacity:0.082;}
                .message_content{position:relative;z-index:2;display:flex;align-items:center;}
                .message_icon{margin-right:0.5em;width:1.2em;height:1.2em;}
                .message_msg{max-width:20em;word-wrap:break-word;}
                @keyframes msg_in{from{transform: translate(0, 300%);opacity: 0;}to{transform: translate(0, 0);opacity: 1;}}
                @keyframes msg_out{from{transform: translate(0, 0);opacity: 1;}to{transform: translate(0, -300%);opacity: 0;}}
            </style>
            <div class=message_background></div>
            <div class=message_content>
                ${!showIcon ? '' : (`
                    <svg class=message_icon viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg'>
                        ${paths}
                    </svg>
                `)}
                <div class=message_msg><slot></slot></div>
            </div>
        `;
    }
}

export {
    WtfMessage,
    WtfMessage as default
};