蓝湖导出 unocss-preset-weapp

用于将蓝湖的样式转换成 unocss-preset-weapp 适用的样式!
换行
// ==UserScript==
// @name         蓝湖导出 unocss-preset-weapp
// @namespace    http://tampermonkey.net/
// @version      2024-03-27
// @description  用于将蓝湖的样式转换成 unocss-preset-weapp 适用的样式!
// @author       haiyulu
// @match        https://lanhuapp.com/**
// @icon         https://www.google.com/s2/favicons?sz=64&domain=lanhuapp.com
// @grant        none
// @license MIT

// ==/UserScript==


const propertyAtomCssMap = {
    width: 'w',
    height: 'h',
    background: 'bg',
    'border-radius': 'rounded',
    color: 'color',
    'line-height': 'font-leading',
    'font-size': 'text',
    'font-weight': 'fw',
    'text-align': 'text',
    /** border-custom-1-fff */
    'border': 'border',
    /** shadow-[0px_4px_4px_0px_rgba(237,_0,_0,_1)] */
    'box-shadow': 'shadow'
}

function rgbaToHex(rgba) {
    const parts = rgba.substring(rgba.indexOf("(")).split(","),
        r = parseInt(parts[0].substring(1)),
        g = parseInt(parts[1]),
        b = parseInt(parts[2]),
        a = parseFloat(parts[3].substring(0, parts[3].length - 1));

    const hex = `[#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}]/${a * 100}`;
    return hex;
}

function copyToClipboard(text) {
    navigator.clipboard.writeText(text)
        .then(() => {
            console.log('文本已成功复制到剪贴板');
        })
        .catch(err => {
            console.error('复制文本到剪贴板失败: ', err);
        });
}

// linear-gradient(90deg,#FF184B 0%,#FF4300 100%)
const degMap = {
    '0': 'gradient-to-b',
    '90': 'gradient-to-r',
    '180': 'gradient-to-t',
    '270': 'gradient-to-l',
}
const linearGradientRegexp = /^linear-gradient\((\d+)deg,(#[0-9A-Fa-f]{6}|#[0-9A-Fa-f]{3})\s\d+%,(#[0-9A-Fa-f]{6}|#[0-9A-Fa-f]{3})\s\d+%\)$/
function handleBgLinearGradient(text) {
    return text.replace(linearGradientRegexp, (match, p1, p2, p3) => {
        return `${degMap[p1]} from-${p2} to-${p3}`
    })
}


function showToast(text) {
    var toast = document.getElementById('unocssTips');
    toast.innerHTML = text;
    toast.style.visibility = 'visible';
    setTimeout(function () {
        toast.style.visibility = 'hidden';
    }, 2000);
}

(function () {
    'use strict';
    window.onload = () => {
        var popup = document.createElement('div');
        popup.innerHTML = 'Hello World';
        popup.style.position = 'fixed';
        popup.style.top = '10%';
        popup.style.left = '50%';
        popup.style.transform = 'translate(-50%, -50%)';
        popup.style.background = '#fff';
        popup.style.color = 'red';
        popup.style.padding = '20px';
        popup.style.border = '1px solid #ccc';
        popup.style.zIndex = '9999';
        popup.style.visibility = 'hidden';
        popup.id = 'unocssTips'

        // 添加弹窗到页面
        document.body.appendChild(popup);
    }

    addEventListener('mousedown', function (event) {

        if (event.target.closest('.layer_box')) {
            var button = document.createElement("button");
            button.innerHTML = "获取unocss样式";
            button.style.backgroundColor = "#2878ff";
            button.style.width = "256px";
            button.style.height = "40px";
            button.style.borderRadius = "100px";
            button.style.color = "#fff";
            button.style.margin = "0 auto";
            button.style.zIndex = '99999'
            button.style.display = 'flex';
            button.style.alignItems = 'center';
            button.style.justifyContent = 'center';
            button.id = 'copy-unocss'

            button.addEventListener("click", function () {
                // 在这里添加按钮点击后的操作
                const father = [...document.getElementsByClassName(" language-css")[1].childNodes].filter(item => {
                    if (item.innerHTML) {
                        return item.innerHTML !== ';' && item.innerHTML !== ':'
                    }
                    if (item.nodeName === "#text") {
                        return !item.textContent.includes("\n")
                    }
                    return true
                })
                // const propertyList = father.filter(item => item.innerHTML)
                // const valueList = father.filter(item => item.nodeName === "#text")
                let prevKey = ''
                /** {
                    "width": "174rpx",
                    "height": "64rpx",
                    "background": "rgba(255,255,255,0.6)",
                    "border-radius": "50rpx",
                    "border": "1rpx solid rgba(151,151,151,0.2)"
                } */
                const beforeHandleResultObj = father.reduce((prev, curv) => {
                    if (curv.className === 'token property') {
                        prevKey = curv.innerHTML
                        return {
                            ...prev,
                            [prevKey]: ''
                        }
                    }
                    if (curv.className === 'token function') {
                        return {
                            ...prev,
                            [prevKey]: `${prev[prevKey]}${['border', 'linear-gradient', 'box-shadow'].includes(prevKey) ? ' ' : ''}${curv.innerHTML}`
                        }
                    }
                    if (curv.className === 'token punctuation') {
                        const result = {
                            ...prev,
                            [prevKey]: `${prev[prevKey]}${curv.innerHTML}`
                        }
                        if (curv.innerHTML === ')') prevKey = ''
                        return result
                    }

                    if (curv.nodeName === "#text") {
                        return {
                            ...prev,
                            [prevKey]: `${prev[prevKey]}${curv.data.trim()}`
                        }
                    }   
                    return prev
                }, {})
                const valueHandleMap = {
                    /** value = '1px solid #fff' */ 
                    'border': (value) => {
                        const handleValue = (value) => value.map((item, index) => {
                            if(index === 0) return item
                            return item.includes('rgba') ? `border-${rgbaToHex(item)}` : `border-${item}`
                        }).join(' ')
                        return typeof value === 'string' ? handleValue(value.split(' ')) : handleValue(value)
                    } ,
                    /** value = "0rpx -1rpx 10rpx 0rpx rgba(0,0,0,0.2)" */
                    'box-shadow': (value) => `[${value.replaceAll(' ', '_')}]`,
                    'background': (value) => value.includes('linear-gradient') ? handleBgLinearGradient(value) : value
                }
                  const targetList = Object.keys(beforeHandleResultObj).map((label) => {
                      if(['font-family', 'font-style', ','].includes(label)) return null
                      let value = beforeHandleResultObj[label]
                      if(['background', 'color'].includes(label) && value.includes('rgba')) {
                          value = rgbaToHex(value)
                      }
                      if(valueHandleMap[label]) {
                          value = valueHandleMap[label](value)
                      }
                      if(propertyAtomCssMap[label]) {
                          label = propertyAtomCssMap[label]
                      }
                      return { label, value }
                  }).filter(item => item)

                const result = targetList.map(item => `${item.label}-${item.value.replace('#', 'hex-')}`).join(' ')
                console.warn(targetList, result)
                copyToClipboard(result);
                showToast(`复制成功, 结果为：${result}`)
            });
            setTimeout(() => {
                if(document.getElementById('copy-unocss')) return;
                document.getElementsByClassName("annotation_item code_detail")[0].appendChild(button)
            }, 1000)
        }
    });


})();
欢迎访问Greasy Fork镜像
