zsxt_nbzs_h5/Web/src/pages/system/doc/index.vue

<template>
  <a-card :bordered="false" class="mb-none">
    <container>
      <a-row :gutter="16" align="middle" class="text-center mb-lg" justify="center" type="flex">
        <a-col :span="4" class="mt-lg mb-lg">
          <a href="https://dotnet.microsoft.com/" target="_blank">
            <img
              src="https://dotnet.microsoft.com/static/images/redesign/downloads-dot-net-core.svg?v=p6MWQNHwEtnnx0MWJ-i7vCMt-sZmoBf6h-7XmdSs5RE"
              width="128"
            />
          </a>
        </a-col>
        <a-col :span="4" class="mt-lg mb-lg">
          <a href="https://dotnetchina.gitee.io/furion/" target="_blank">
            <img src="https://dotnetchina.gitee.io/furion/img/furionlogo.png" width="128" />
          </a>
        </a-col>
        <a-col :span="4" class="mt-lg mb-lg">
          <a href="https://cn.vuejs.org/index.html" target="_blank">
            <img src="https://cn.vuejs.org/images/logo.png" width="128" />
          </a>
        </a-col>
        <a-col :span="4" class="mt-lg mb-lg">
          <a href="https://www.antdv.com/docs/vue/introduce" target="_blank">
            <img src="https://pro.antdv.com/logo.png" width="128" />
          </a>
        </a-col>
        <a-col :span="4" class="mt-lg mb-lg">
          <a href="https://echarts.apache.org/zh/index.html" target="_blank">
            <img
              src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"
              width="128"
            />
          </a>
        </a-col>
        <a-col :span="4" class="mt-lg mb-lg">
          <a href="http://lesscss.cn/" target="_blank">
            <img src="http://s.nodejs.cn/less/img/logo.png" width="128" />
          </a>
        </a-col>
        <a-col :span="4" class="mt-lg mb-lg">
          <a href="https://www.lodashjs.com/" target="_blank">
            <img src="https://www.lodashjs.com/img/lodash.png" width="128" />
          </a>
        </a-col>
        <a-col :span="4" class="mt-lg mb-lg">
          <a href="http://www.axios-js.com/zh-cn/" target="_blank">
            <img src="http://www.axios-js.com/logo.svg" width="128" />
          </a>
        </a-col>
      </a-row>
      <a-row :gutter="16" type="flex">
        <a-col flex="auto">
          <container
            :id="`doc-${index}`"
            :key="index"
            mode="container-fluid"
            v-for="(doc, index) in docs"
          >
            <section>
              <h1>{{ doc.title }}</h1>
              <component :codes="codes" :is="doc.component" v-if="doc.path" />
              <template v-if="doc.children">
                <section
                  :id="`doc-${index}-${_index}`"
                  :key="_index"
                  v-for="(_doc, _index) in doc.children"
                >
                  <h3>{{ _doc.title }}</h3>
                  <component :codes="codes" :is="_doc.component" v-if="_doc.path" />
                </section>
              </template>
            </section>
            <a-divider v-if="index < docs.length - 1" />
          </container>
        </a-col>
        <a-col flex="240px">
          <a-anchor
            :get-container="()=> $el.parentNode"
            :offset-top="24"
            :wrapper-style="{ backgroundColor: 'transparent' }"
            @click.prevent
          >
            <a-anchor-link
              :href="`#doc-${index}`"
              :key="index"
              :title="doc.title"
              v-for="(doc, index) in docs"
            >
              <template v-if="doc.children">
                <a-anchor-link
                  :href="`#doc-${index}-${_index}`"
                  :key="_index"
                  :title="_doc.title"
                  v-for="(_doc, _index) in doc.children"
                />
              </template>
            </a-anchor-link>
          </a-anchor>
        </a-col>
      </a-row>
    </container>
  </a-card>
</template>
<script>
const docs = [
  {
    title: '数据库',
    path: '/database',
    children: [
      {
        title: '实体(N)',
      },
      {
        title: '迁移',
        path: '/database/migrations',
      },
    ],
  },
  {
    title: '数据传输对象',
  },
  {
    title: '窗口',
    path: '/window',
    children: [
      {
        title: '打开窗口',
        path: '/window/open',
      },
      {
        title: '关闭窗口',
        path: '/window/close',
      },
    ],
  },
  {
    title: '全局函数',
    path: '/functions',
  },
  {
    title: '接口',
    path: '/api',
    children: [
      {
        title: '配置',
        path: '/api/setting',
      },
      {
        title: '调用',
        path: '/api/usage',
      },
      {
        title: '队列',
        path: '/api/queue',
      },
    ],
  },
  {
    title: '权限渲染',
    path: '/auth',
  },
  {
    title: '种子',
    path: '/seed',
    children: [
      {
        title: '查询表格',
        path: '/seed/query',
      },
      {
        title: '编辑窗口',
        path: '/seed/form',
      },
      {
        title: '树-查询表格',
        path: '/seed/treeLayout',
      },
    ],
  },
  {
    title: '全局用户信息',
    path: '/globalinfo',
  },
  {
    title: '内置组件(N)',
  },
  {
    title: '本地存储(N)',
    path: '/storage',
  },
  {
    title: '工具(N)',
  },
];

export default {
  data() {
    return {
      docs: null,

      codes: {},
    };
  },
  mounted() {
    docs.forEach((doc) => {
      if (doc.path) {
        doc.component = () => import(`.${doc.path}`);
      }
      if (doc.children) {
        doc.children.forEach((_doc) => {
          _doc.component = () => import(`.${_doc.path}`);
        });
      }
    });

    this.docs = docs;

    // 读取doc-code下所有文件内容
    const files = require.context('@/../public/doc-code', true, /\.(js|jsx|html|vue|css|less|json|cs)(\?.*)?$/);
    const codes = {};
    files.keys().forEach((p) => {
      const filepath = p.slice(1);
      const xhr = new XMLHttpRequest();
      xhr.open('GET', `./doc-code${filepath}`, false);
      xhr.overrideMimeType('text/plain;charset=utf-8');
      xhr.send(null);
      codes[filepath] = xhr.responseText;
    });
    this.codes = codes;
  },
  methods: {
    container() {
      return this.$el;
    },
  },
};
</script>