Antd pro 组件构造器

Antd pro 组件构造器

因为antd pro 框架 内置 dva，以往每次新建页面都需要新建 model service ui 这些文件。方便开发，今天写了个脚本

/**
 * pages模版快速生成脚本,执行命令 npm run tep
 */
const fs = require('fs');
const readline = require('readline');
console.log("\033[32m ***欢迎使用自助组件构造器*** \033[0m")
const dirName = process.argv[2];
const dirName2 = process.argv[3];
if (!dirName || !dirName2) {
    console.log("\033[31m 参数有误！ \033[0m")
    console.log("\033[32m 示例：node page.js memeda keai \033[0m")
    process.exit(0);
}

if (fs.existsSync(`./src/pages/src/${dirName}/${dirName2}`)) {
    console.log("\033[31m 第二个参数和现有组件名称重复！ \033[0m")
    process.exit(0);
}

// 页面模版 ui层
const indexTep = `
import React, { useEffect, useState } from 'react';
import style from './index.less';
import { IntrinsicElements } from './data.d';
import { connect } from 'dva';
import ConnectState from './connect';
const ${titleCase(dirName2)}: React.FC<IntrinsicElements> = props => {
    const { ${dirName2}, dispatch, loading } = props;
    useEffect(()=>{
        console.log(props)
    },[])
    return (
        <>
        <h1 className='${dirName2}-page'>
        如你所见，这是你的${dirName2}页面。
        </h1>
        </>
    );
};
export default connect(
    ({
        ${dirName2},
        loading,
    }: {
        ${dirName2}: ConnectState;
        loading: { effects: { [key: string]: boolean } };
    }) => ({
        ${dirName2},
        loading,
    }),
)(${titleCase(dirName2)});

`;
// less文件模版
const lessTep = `
.${dirName2}-page {
}
`;

// model文件模版
const modelTep = `
import { demo } from './service';
import { StateType, ModelType } from './data';
import { message } from 'antd';
//初始状态
const defaultState: StateType = {
    ceshi:'测试数据666'
};
const Model: ModelType = {
    namespace: '${dirName2}',
    state: defaultState,
    effects: {
        //改成自己的
        *getCompanyList({ callback }, { call, put }) {
            // const response = yield call(getCompanyList);
            // let payload = { data: response.content.data.data };
            // yield put({ type: 'save', payload });
        },
    },
    reducers: {
        save(state = { ...defaultState }, action) {
            return {
                ...state,
                ...action.payload,
            };
        },
    },
};
//Link to dva warehouse Ts declaration type
export type AdminState = Readonly<typeof defaultState>;
//Export the nodelist module(automatically register to the global)
export default Model;

`;


// service页面模版
const serviceTep = `
import request from '@/utils/request';
//demo
export async function demo() {
  return request('/admin/company', {
    method: 'GET',
  });
}
`;
//dva 中间件 connect.d.ts

const connect = `
//链接dva仓库声明类型用
import { AdminState } from './model';

interface ConnectState {
    ${dirName2}: AdminState;
}

export default ConnectState;
`
const dataType = `
import { EffectsCommandMap, Model } from 'dva';
import { AnyAction, Reducer } from 'redux';
//jsx节点
export interface IntrinsicElements {
    [elemName: string]: any;
}
//dva ts定义
export interface StateType {
    ceshi:string
}
export type Effect = (
    action: AnyAction,
    effects: EffectsCommandMap & { select: <T>(func: (state: StateType) => T) => T },
) => void;

export interface ModelType {
    namespace: string;
    state: StateType;
    effects: {
        getCompanyList: Effect;
    };
    reducers: {
        save: Reducer<StateType>;
    };
}
//dva ts定义结束

`

fs.mkdirSync(`./src/pages/src/${titleCase(dirName)}`); //创建文件夹
// process.chdir(`./src/pages/src/${titleCase(dirName)}`);
fs.mkdirSync(`./src/pages/src/${titleCase(dirName)}/${dirName2}`);//创建文件夹
process.chdir(`./src/pages/src/${titleCase(dirName)}/${dirName2}`);//cd
fs.writeFileSync('index.tsx', indexTep);
console.log("\033[32m index.tsx 创建成功！ \033[0m")
fs.writeFileSync('index.less', lessTep);
console.log("\033[32m index.less 创建成功！ \033[0m")
fs.writeFileSync('model.ts', modelTep);
console.log("\033[32m model.ts 创建成功！ \033[0m")
fs.writeFileSync('service.ts', serviceTep);
console.log("\033[32m service.ts 创建成功！ \033[0m")
fs.writeFileSync('connect.d.ts', connect);
console.log("\033[32m connect.d.ts 创建成功！ \033[0m")
fs.writeFileSync('data.d.ts', dataType);
console.log("\033[32m 恭喜 页面创建成功！ \033[0m")

function titleCase(str) {
    const array = str.toLowerCase().split(' ');
    for (let i = 0; i < array.length; i++) {
        array[i] = array[i][0].toUpperCase() + array[i].substring(1, array[i].length);
    }
    const string = array.join(' ');
    return string;
}
process.exit(0);

node page.js memeda keai   //用法 

上面的 ./src/pages/src/ 为你组件的根目录 ，不一样可以改成自己的目录地址，我这个脚本默认创建

二级页面，如果不想创建二级页面，对应修改规则即可。