feat: use webcomponent replace to markdown

src/app/presentation/design/design.component.html

@@ -1 +1 @@
-<component-path></component-path>
+<component-markdown-render [src]="'assets/docs/design.md'"></component-markdown-render>

src/app/shared/components/markdown-render/markdown-render.component.ts

@@ -94,9 +94,11 @@ export class MarkdownRenderComponent implements OnInit, OnChanges, AfterViewInit
  if (changes.src) {
  this.mindmapIndex = 0;
  this.chartIndex = 0;
+ this.webComponentsIndex = 0;
  this.chartInfos = [];
  this.mermaidData = [];
  this.graphvizData = [];
+ this.webComponentsData = [];
  }
  }
 
@@ -155,7 +157,7 @@ export class MarkdownRenderComponent implements OnInit, OnChanges, AfterViewInit
  setTimeout(() => this.renderEcharts(), 50);
  setTimeout(() => this.gotoHeading(), 500);
 
- setTimeout(() => this.loadWebComponents(), 100);
+ setTimeout(() => this.loadWebComponents(), 50);
  }
 
  private gotoHeading() {
@@ -622,7 +624,7 @@ export class MarkdownRenderComponent implements OnInit, OnChanges, AfterViewInit
  data
  });
 
- return `<${data.name} class="webcomponents-plugins"></${data.name}>`;
+ return `<div class="webcomponents-plugins"><${data.name} id="${id}"></${data.name}></div>`;
  }
 
  private loadWebComponents() {

src/assets/docs/design.md

@@ -0,0 +1,15 @@
+```webcomponents
+{
+ "name": "wc-devops-path",
+ "src": "https://phodal.github.io/devops-path/path.js",
+ "props": []
+}
+```
+
+```webcomponents
+{
+ "name": "wc-devops-periodic",
+ "src": "https://phodal.github.io/devops-periodic/elements.js",
+ "props": []
+}
+```

src/assets/docs/tool.md

@@ -1,13 +1,5 @@
 # 工具
 
-```webcomponents
-{
- "name": "wc-devops-periodic",
- "src": "https://phodal.github.io/devops-periodic/elements.js",
- "props": []
-}
-```
-
 DevOps 工具功能
 
 ```process-step