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,
            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 values = await new Promise(async (resolve, reject) => {
                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.$$eval('.n-popover__content>.n-space', (divs) => divs[0].children[2].children[0].children[0].children[0].children[0].blur())
                const keys = await page.$$eval('.n-collapse-item--left-arrow-placement', async (divs,unit) => {
                    const obj = {}
                    for (let k = 0; k < divs.length; k++) {
                        const child = divs[k];
                        child.children[0].children[0].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(' ')
                            }
                        }
                    }
                    return obj
                },unit)
                resolve(keys)
            })
            objs[cname] = values
        }
        // 输出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)
    }
})()