update 增加了开发文档的编写

Web/src/pages/system/doc/highlight.js

@@ -6,15 +6,37 @@ export default {
     },
 
     methods: {
-
+        onCopy() {
+            try {
+                const $textarea = document.createElement('textarea')
+                $textarea.style = 'opacity: 0;position: fixed;top: -10000;left: -10000'
+                document.body.append($textarea)
+                $textarea.value = this.code
+                $textarea.select()
+                document.execCommand('copy')
+                $textarea.remove()
+                this.$message.success('已复制到剪贴板')
+            }
+            catch
+            {
+                this.$message.error('复制失败')
+            }
+        }
     },
 
     render() {
         const props = {
             ...this.$props,
-            ...this.$attrs
+            ...this.$attrs,
         }
 
-        return props.code && <highlightjs {...{ props }} />
+        return props.code && (
+            <section>
+                <highlightjs {...{ props }} style={{ maxHeight: '400px', overflow: 'auto' }} />
+                <div class="text-right">
+                    <a-button size="small" type="dashed" onClick={this.onCopy} class="mb-xs">Copy</a-button>
+                </div>
+            </section>
+        )
     }
 }

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>

Web/src/pages/system/doc/seed/form.vue

@@ -0,0 +1,33 @@
+<template>
+  <section>
+    <h4>
+      新增
+      <a-tag>1.0</a-tag>
+    </h4>
+    <Highlight :code="codes['/seed/addForm.vue']" language="html" />
+    <h4>
+      编辑
+      <a-tag>1.0</a-tag>
+    </h4>
+    <Highlight :code="codes['/seed/editForm.vue']" language="html" />
+    <h4>
+      表单主体
+      <a-tag>1.0</a-tag>
+    </h4>
+    <Highlight :code="codes['/seed/form.vue']" language="html" />
+  </section>
+</template>
+<script>
+import Highlight from '../highlight';
+
+export default {
+  components: {
+    Highlight,
+  },
+  props: {
+    codes: {
+      type: Object,
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,45 @@
+<template>
+  <section>
+    <p>种子文件已经提供了业务组件通用的架构，可以通过以下几种方式快速获取架构代码。</p>
+    <ul>
+      <li>
+        <p>
+          从
+          <a-tag class="mr-none" color="orange">@/src/pages/system/_seed</a-tag>中找到，并复制内容。
+        </p>
+      </li>
+      <li>
+        <p>
+          <b>用户片段</b>达到快速生成的目的。
+        </p>
+        <p>
+          在VSCode中，选择
+          <a-breadcrumb separator=">">
+            <a-breadcrumb-item>文件</a-breadcrumb-item>
+            <a-breadcrumb-item>首选项</a-breadcrumb-item>
+            <a-breadcrumb-item>用户片段</a-breadcrumb-item>
+          </a-breadcrumb>输入
+          <a-tag class="mr-none" color="orange">vue.json</a-tag>并回车，将会打开针对vue文件的用户片段配置JSON。
+        </p>
+      </li>
+    </ul>
+    <Highlight :code="codes['/seed/vue.json']" language="json" />
+    <ul>
+      <li>在下方直接复制代码。</li>
+    </ul>
+  </section>
+</template>
+<script>
+import Highlight from '../highlight';
+
+export default {
+  components: {
+    Highlight,
+  },
+  props: {
+    codes: {
+      type: Object,
+    },
+  },
+};
+</script>

Web/src/pages/system/doc/seed/query.vue

@@ -0,0 +1,19 @@
+<template>
+  <section>
+    <Highlight :code="codes['/seed/query.vue']" language="html" />
+  </section>
+</template>
+<script>
+import Highlight from '../highlight';
+
+export default {
+  components: {
+    Highlight,
+  },
+  props: {
+    codes: {
+      type: Object,
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,17 @@
+<template>
+  <section></section>
+</template>
+<script>
+import Highlight from './highlight';
+
+export default {
+  components: {
+    Highlight,
+  },
+  props: {
+    codes: {
+      type: Object,
+    },
+  },
+};
+</script>

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

@@ -1,21 +0,0 @@
-<template>
-  <section>
-    <h3>开始使用</h3>
-    <Highlight :code="codes['/use/a.js'] || ''" language="javascript" />
-    <Highlight :code="codes['/use/test.vue'] || ''" language="javascript" />
-  </section>
-</template>
-<script>
-import Highlight from './highlight';
-
-export default {
-  components: {
-    Highlight,
-  },
-  props: {
-    codes: {
-      type: Object,
-    },
-  },
-};
-</script>