naiveui2rem/index.js

const Puppeteer = require('puppeteer');
const sleep = (ms) => { return new Promise((resolve) => { setTimeout(resolve, ms) }) };
const { components, unit } = require(process.cwd() + '/config.js');
const fs = require('fs');
// main
(async () => {
    try {
        console.log('start px2rem...');
        // init
        const browser = await Puppeteer.launch({
            headless: true,
            timeout: 0,
            devtools: false,
            executablePath: process.cwd() + '/chrome/chrome.exe'
        });
        // 打开naive 官网
        const page = await browser.newPage();
        await page.goto(`https://www.naiveui.com/zh-CN/os-theme/docs/installation`);
        await sleep(1000)
        await page.click('div.n-element');
        const newArr = components.map(el => {
            const N = el.indexOf('N');
            if (N !== -1) el = el.substring(N + 1);
            return el
        })
        // 需要导出组件配置
        await sleep(1000)
        const objs = {}
        for (let zd = 0; zd < newArr.length; zd++) {
            const cname = newArr[zd];
            const input = await page.$('.n-popover__content>.n-space>div:nth-child(3) input');
            await input.click({ clickCount: 2 }); // 双击清空
            await input.type(cname, { delay: 100 });
            await page.keyboard.press('Enter');
            const keys = await page.$$eval('.n-collapse-item--left-arrow-placement', async (divs, prams) => {
                const obj = {}
                for (let k = 0; k < divs.length; k++) {
                    const child = divs[k];
                    const clickDiv = child.children[0].children[0];
                    const { unit, cname } = prams;
                    try {
                        if (cname === clickDiv.textContent) {
                            clickDiv.click();
                            await new Promise((resolve) => { setTimeout(resolve, 1000) });
                            const list = child.children[1].children[0].children[0].children;
                            for (let j = 0; j < list.length; j++) {
                                const es = list[j];
                                const key = es.children[0].textContent;
                                const value = es.children[1].children[0].children[0].children[0].getAttribute('placeholder');
                                if (value && value.includes('px')) {
                                    const arr = value.split(' ');
                                    const newValue = arr.map(el => el.includes('px') ? el = parseInt(el) / unit + 'rem' : el);
                                    obj[key] = newValue.join(' ');
                                }
                            }
                            clickDiv.click();
                        }
                    } catch (error) {
                        continue
                    }
                }
                return obj
            }, { unit: unit, cname: cname })
            if (!Object.keys(keys).length) continue
            objs[cname] = keys;
        }
        // 输出json 数据
        const jsonContent = JSON.stringify(objs);
        fs.writeFile(process.cwd() + "/output.json", jsonContent, 'utf8', (err) => {
            if (err) return console.log("out data error");
            console.log("JSON file has been saved.");
            page.close()
            browser.close()
            process.exit(1)
        });
    } catch (error) {
        console.error(error)
        process.exit(1)
    }
})()