update

重新封装了表单窗体,支持关闭时变更检测;
优化模版代码及内部注释,更快速开发;
开发文档中的代码片段可以复制成用户片段模版

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

@@ -1,17 +1,23 @@
+import { template } from "lodash"
+
 export default {
     props: {
         code: {
             type: String
+        },
+        copyTemplate: {
+            type: Boolean,
+            default: false
         }
     },
 
     methods: {
-        onCopy() {
+        baseCopy(content) {
             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.value = content
                 $textarea.select()
                 document.execCommand('copy')
                 $textarea.remove()
@@ -21,7 +27,24 @@ export default {
             {
                 this.$message.error('复制失败')
             }
-        }
+        },
+        onCopy() {
+            this.baseCopy(this.code)
+        },
+        onCopyTemplate() {
+            const code = '"' +
+                this.code
+                    // 转义双引号 => \"
+                    .replace(/"/g, '\\"')
+                    // 转义$ => $$
+                    .replace(/\$/g, '$$$$')
+                    // 替换行首 => "
+                    .replace(/\n/g, '"')
+                    // 替换行末 = ",
+                    .replace(/\r/g, '",\r') +
+                '"'
+            this.baseCopy(code)
+        },
     },
 
     render() {
@@ -34,7 +57,26 @@ export default {
             <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>
+                    {this.$scopedSlots.actions && this.$scopedSlots.actions().map(p => {
+                        return (
+                            <span>
+                                {p}
+                                <a-divider type="vertical" />
+                            </span>
+                        )
+                    })}
+                    {
+                        this.copyTemplate &&
+                        <span>
+                            <a-tooltip title="复制用户片段模版">
+                                <a-button size="small" type="dashed" onClick={this.onCopyTemplate} class="mb-xs">Copy template</a-button>
+                            </a-tooltip>
+                            <a-divider type="vertical" />
+                        </span>
+                    }
+                    <a-tooltip title="复制内容">
+                        <a-button size="small" type="dashed" onClick={this.onCopy} class="mb-xs">Copy</a-button>
+                    </a-tooltip>
                 </div>
             </section>
         )

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

@@ -1,20 +1,10 @@
 <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" />
+    <p>
+      当前版本
+      <a-tag>1.2</a-tag>
+    </p>
+    <Highlight :code="codes['/seed/form.vue']" copy-template language="html" />
   </section>
 </template>
 <script>
@@ -30,4 +20,4 @@ export default {
     },
   },
 };
-</script>
+</script>

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

@@ -4,7 +4,7 @@
       当前版本
       <a-tag>1.2</a-tag>
     </p>
-    <Highlight :code="codes['/seed/query.vue']" language="html" />
+    <Highlight :code="codes['/seed/query.vue']" copy-template language="html" />
   </section>
 </template>
 <script>

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

@@ -4,7 +4,7 @@
       当前版本
       <a-tag>1.1</a-tag>
     </p>
-    <Highlight :code="codes['/seed/treeLayout.vue']" language="html" />
+    <Highlight :code="codes['/seed/treeLayout.vue']" copy-template language="html" />
   </section>
 </template>
 <script>