蓝湖样式代码转原子化类名

蓝湖样式代码转原子化类名，为了更方便开发时使用windicss
Wrap lines
// ==UserScript==
// @name         蓝湖样式代码转原子化类名
// @namespace    kk
// @version      0.1
// @description  蓝湖样式代码转原子化类名，为了更方便开发时使用windicss
// @author       Sweet_KK
// @require     https://cdn.bootcss.com/jquery/2.1.2/jquery.min.js
// @match        *://lanhuapp.com/web/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=lanhuapp.com
// @grant        none
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    const main = () => {

        // 把css代码转换成class并归类
        const transformCss = (css) => {
            const windiClass = []
            const unSurport = []
            css.map(item => {
                const [name, value] = item.split(': ')
                const findRule = rules.find(rule => rule[0] === name)
                if (findRule) {
                    const findRuleValue = findRule[1]
                    if (typeof findRuleValue === 'string') {
                        windiClass.push(findRuleValue.replace('#', value))
                    } else {
                        windiClass.push(findRuleValue(value))
                    }
                } else {
                    unSurport.push(item)
                }
            })
            return {
                windiClass,
                unSurport
            }
        }

        // 把转换后的json转换成显示的html内容
        const parseHtml = (json) => {
            let classText = '';
            let unSurportText = '';
            json.windiClass.map(item => {
                classText += `${item} `
            })
            json.unSurport.map(item => {
                unSurportText += `<div class="un-surport"><input type="text" value="${item};" style="width:100%;"/></div>`
            })
            return `<h3>转化后的类名</h3><textarea id="classText" style="width:100%;padding:0;" rows="3">${classText.trim()}</textarea><button id="copyClass" style="background:#67c23a;color:#fff;padding: 7px 15px;cursor:pointer;">复制</button><p> </p><h3>暂不支持转换的样式(选中即复制)</h3><div>${unSurportText}</div>`
        }

        // 转换规则
        const rules = [
            ['width', 'w-[#]'],
            ['height', 'h-[#]'],
            ['font-size', 'text-[#]'],
            ['font-style', '#'],
            ['font-weight', 'font-#'],
            ['color', 'text-[#]'],
            ['line-height', 'leading-[#]'],
            ['border-radius', 'rounded-[#]'],
            ['border', (value) => {
                const [width, style, color] = value.split(' ')
                return `border-[${width}] border-${style} border-[${color}]`
            }],
            ['letter-spacing', 'tracking-[#]'],
            ['opacity', (value) => `opacity-${value * 100}`],
            ['text-decoration', '#'],
            ['text-align', 'text-#'],
            // ['background', ''],
            // ['font-family', ''],
            // ['-webkit-background-clip', ''],
            // ['-webkit-text-fill-color', ''],
            // ['box-shadow', ''],
        ]

        if (document.getElementById('transformCssDialog')) return

        // 按钮点击事件定义
        const action = () => {
            if (!location.hash.startsWith('#/item/project/detailDetach?')) {
                alert('没有打开设计稿')
                return
            }
            const isIOSOrAndroid = document.querySelector('.title.type.phone');
            if (isIOSOrAndroid) {
                alert('请先选择元素并把平台切换到Web')
                return
            }
            const code = document.querySelector('code.language-css');
            if (!code) {
                alert('没有选择元素 或 所选元素没有样式')
                return
            }
            const styles = code.innerText.split(';\n').filter(item => item)

            const dialog = $('#transformCssDialog')[0];
            document.querySelector('#dialogContent').innerHTML = parseHtml(transformCss(styles))
            dialog.showModal()
        }

        // 创建一个dialog
        const dialog = document.createElement('dialog');
        dialog.id = 'transformCssDialog';
        dialog.style = 'margin:0 auto;top:10vh;width:30%;border:none;';
        dialog.innerHTML = '<div id="dialogContent" style="min-height:200px;margin-bottom:20px;white-space: pre-wrap;">显示原子化class</div><form method="dialog" style="text-align:center;"><button value="cancel" style="background:#409eff;color:#fff;padding: 7px 15px;">关闭</button></form>';
        document.body.append(dialog)

        // 创建一个操作按钮
        const btn = document.createElement('button');
        btn.innerText = '显示原子化class';
        btn.style = "position:fixed;z-index:9999;bottom:30px;right:20px;cursor:pointer;background:#f56c6c;color:#fff;padding: 3px 6px;";
        document.body.append(btn)
        btn.onclick = action

        // 复制全部class
        $('#transformCssDialog').on('click', '#copyClass', () => {
            document.getElementById('classText').select()
            document.execCommand('Copy')
        })

        // 复制单条样式
        $('#transformCssDialog').on('click', '.un-surport input', (event) => {
            event.target.select()
            document.execCommand('Copy')
        })
    }

    setTimeout(() => {
        main();
    }, 500)
})();