update 增加了开发文档的编写

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

@@ -1,22 +1,51 @@
 <template>
-  <container>
-    <template v-for="(doc, index) in docs">
-      <component :codes="codes" :is="doc.component" :key="index" />
-    </template>
-    <a-anchor>
-      <a-anchor-link href="#components-anchor-demo-basic" title="Basic demo" />
-      <a-anchor-link href="#components-anchor-demo-static" title="Static demo" />
-      <a-anchor-link
-        href="#components-anchor-demo-basic"
-        target="_blank"
-        title="Basic demo with Target"
-      />
-      <a-anchor-link href="#API" title="API">
-        <a-anchor-link href="#Anchor-Props" title="Anchor Props" />
-        <a-anchor-link href="#Link-Props" title="Link Props" />
-      </a-anchor-link>
-    </a-anchor>
-  </container>
+  <a-card :bordered="false" class="mb-none">
+    <container>
+      <a-row :gutter="16" type="flex">
+        <a-col flex="auto">
+          <container mode="container">
+            <section :id="`doc-${index}`" :key="index" v-for="(doc, index) in docs">
+              <h1>{{ doc.title }}</h1>
+              <component :codes="codes" :is="doc.component" v-if="doc.name" />
+              <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.name" />
+                </section>
+              </template>
+            </section>
+          </container>
+        </a-col>
+        <a-col flex="240px">
+          <a-anchor
+            :get-container="()=> $el.parentNode"
+            :offset-top="24"
+            :wrapper-style="{ backgroundColor: 'transparent' }"
+          >
+            <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>
 export default {
@@ -25,7 +54,24 @@ export default {
       docs: [
         {
           title: '开始使用',
-          name: 'use',
+          name: '/usage',
+        },
+        {
+          title: '窗口',
+        },
+        {
+          title: '种子',
+          name: '/seed',
+          children: [
+            {
+              title: '查询表格',
+              name: '/seed/query',
+            },
+            {
+              title: '编辑窗口',
+              name: '/seed/form',
+            },
+          ],
         },
       ],
       codes: {},
@@ -33,15 +79,23 @@ export default {
   },
   mounted() {
     this.docs.forEach((doc) => {
-      this.$set(doc, 'component', () => import(`./${doc.name}`));
+      if (doc.name) {
+        this.$set(doc, 'component', () => import(`.${doc.name}`));
+      }
+      if (doc.children) {
+        doc.children.forEach((_doc) => {
+          this.$set(_doc, 'component', () => import(`.${_doc.name}`));
+        });
+      }
     });
 
-    const files = require.context('@/../public/doc-part', true, /\.(js|html|vue|css|less)(\?.*)?$/);
+    // 读取doc-code下所有文件内容
+    const files = require.context('@/../public/doc-code', true, /\.(js|html|vue|css|less|json)(\?.*)?$/);
     const codes = {};
     files.keys().forEach((p) => {
       const fileName = p.slice(1);
       const xhr = new XMLHttpRequest();
-      xhr.open('GET', `./doc-part${fileName}`, false);
+      xhr.open('GET', `./doc-code${fileName}`, false);
       xhr.overrideMimeType('text/plain;charset=utf-8');
       xhr.send(null);
       codes[fileName] = xhr.responseText;
@@ -49,5 +103,10 @@ export default {
     console.log(codes);
     this.codes = codes;
   },
+  methods: {
+    container() {
+      return this.$el;
+    },
+  },
 };
 </script>