master

Branches (1)

Manage

Manage

master

md2html
/
生成html.js

const fs = require("fs");
const path = require("path");

const collect = require("./收集数据依赖");


/**
 * @param {Array<Doc>} dependence
 */
const createTemplate = (dependence, projectName="") => `<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>${projectName}文档</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.8.2/lib/theme-chalk/index.css" />
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.8.2/lib/index.min.js"></script>
    <style>
        article {
            padding-left:2em;
        }
        .key {
            font-weight: bold;
            margin-right:0.5em;
        }
        h1 {
            font-size: 2em;
        }
        .part {
            border-bottom: dashed 1px #999;
        }
        pre {
            background: #ccc;
            padding-left:1em;
        }
    </style>
</head>
<body>
    <div id="root"></div>
    <script type="text/template" id="zmr">
        <el-container>
            <el-header>
                <h1 style="color:#409EFF;margin:0;">${projectName}接口文档</h1>
            </el-header>
            <el-container>
                <el-aside>
                    <el-menu>
                        <el-submenu v-for="(doc, i) in list" :key="doc.filename" :index="i">
                            <template slot="title"><i class="el-icon-menu"></i>{{doc.title}}</template>
                            <el-menu-item-group>
                                <el-menu-item v-for="(chunk,j) in doc.docChunks" index="i+'-'+j">
                                    <el-link :href="'#'+chunk.name">{{chunk.name}}</el-link>
                                </el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-container>
                    <el-main>
                        <article v-for="doc in list" :key="doc.filename">
                            <h2 :id="doc.title">{{doc.title}}</h2>
                            <section v-for="chunk in doc.docChunks" :key="chunk.name" class="part">
                                <h3 :id="chunk.name">{{chunk.name}}</h3>
                                <p>
                                    <span class="key">URL:</span>
                                    <span>{{chunk.url}}</span>
                                </p>
                                <p>
                                    <span class="key">Type:</span>
                                    <span>{{chunk.type}}</span>
                                </p>
                                <p>
                                    <span class="key">Content-Type:</span>
                                    <span>{{chunk.contentType}}</span>
                                </p>
                                <p class="key">Request-headers:</p>
                                <el-table :data="chunk.reqHeadersData">
                                    <el-table-column v-for="keyName in chunk.reqHeadersKeys" :key="keyName" :prop="keyName" :label="keyName" />
                                </el-table>
                                <p class="key">Request-parameters:</p>
                                <el-table :data="chunk.reqBodyData">
                                    <el-table-column v-for="keyName in chunk.reqBodyKeys" :key="keyName" :prop="keyName" :label="keyName" />
                                </el-table>
                                <p class="key">请求示例:</p>
                                <pre>{{chunk.reqExample}}</pre>
                                <p class="key">响应数据::</p>
                                <el-table :data="chunk.resBodyData">
                                    <el-table-column v-for="keyName in chunk.resBodyKeys" :key="keyName" :prop="keyName" :label="keyName" />
                                </el-table>
                                <p class="key">返回示例:</p>
                                <pre>{{chunk.resExample}}</pre>
                            </section>
                        </articele>
                    </el-main>
                    <el-footer style="text-align:center;">powered by zmr</el-footer>
                </el-container>
            </el-container>
        </el-container>
    </script>
    <script>
        var dependence = ${JSON.stringify(dependence)};

        Vue.use(ELEMENT);
        new Vue({
            el:"#root",
            template:"#zmr",
            data:function(){
                return {
                    list: dependence
                }
            }
        });
    </script>
</body>
</html>`;

(async () => {
    const dependence = await collect();
    fs.writeFileSync(
        path.join(__dirname, "output", "index.html"),
        // 在这里填入你的项目名
        createTemplate(dependence, "xxx项目"),
        { encoding: "utf-8" }
    );
})();