feat: make process table works

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

@@ -1,5 +1,7 @@
 import {Component, Input, OnInit} from '@angular/core';
 import {MarkdownService} from 'ngx-markdown';
+import marked from 'marked';
+import { zip } from 'lodash-es';
 
 @Component({
  selector: 'component-markdown-render',
@@ -59,6 +61,8 @@ export class MarkdownRenderComponent implements OnInit {
 
  if (lang === 'process') {
  return this.buildCodeProcess(code);
+ } else if (lang === 'process-table') {
+ return this.buildTableProcess(code);
  }
 
  if (options.highlight) {
@@ -106,21 +110,59 @@ export class MarkdownRenderComponent implements OnInit {
  for (let index = 0; index < length; index++) {
  let str = splitCode[index];
  str = str.substr(1, str.length - 2);
- items += `
+ items += this.buildProcessHeaderItem(index, str);
+ }
+
+ return this.buildProcessHeader(items);
+ }
+
+ private buildProcessHeaderItem(index: number, str: string) {
+ return `
  <div class="flex-row cell type_${index}">
  ${str}
  </div>
  `;
-  }
+ }
 
-  return `
-  <div class="process-table">
+ private buildProcessHeader(items: string) {
+ return `<div class="process-table">
  <div class="table-container" role="table" aria-label="Destinations">
  <div class="flex-table header" role="rowgroup">
  ${items}
  </div>
  </div>
- </div>
- `;
+ </div>`;
+ }
+
+ private buildTableProcess(code: any) {
+ let resultStr = '';
+ let headers = [];
+ let cells = [];
+
+ const tokens = marked.lexer(code);
+ for (const token of tokens) {
+ if (token.type === 'table') {
+ headers = token.header;
+ cells = this.transpose(token.cells);
+ }
+ }
+ resultStr += this.buildProcessHeader(this.buildHeaderItem(headers));
+
+ return resultStr;
+ }
+
+ private buildHeaderItem(headers: any[]) {
+ let headerStr = '';
+ const length = headers.length;
+ for (let index = 0; index < length; index++) {
+ const header = headers[index];
+ headerStr += this.buildProcessHeaderItem(index, header);
+ }
+
+ return headerStr;
+ }
+
+ transpose(arr: any[][]) {
+ return zip.apply(this, arr);
  }
 }

src/assets/docs/casestudies/daocloud.md

@@ -4,11 +4,13 @@
 
 ### DevOps 典型工具链
 
+```process-table
 | 项目管理 | 持续集成 | 持续部署 | 发布 | 质量 | 测试 | 运维 | 协作 | 
 |---|---|---|---|---|---|---|---|
 | 任务管理：Jira | 源码：GitHub 企业版 | 发布：DCS | 制品仓库：Nexus| 代码质量管理：SonarQube | 单元测试：JUnit | 应用监控： APM | 知识库：Confluence | 
 | 问题管理：Jira | 代码评审：GitHub 企业版 | | | 代码安全扫描： CheckMarx | 接口测试: RTF | 系统运维：DCE | |
 |||||||压力测试：JMeter|日志管理: GrayLog||
+```
 
 ### DevSecOps 典型工具链
 

src/assets/docs/pattern.md

@@ -22,3 +22,7 @@ based on: MDB & [https://martinfowler.com/articles/agileFluency.html](https://ma
 | 执行 | 掌握实践 | 组织职能 | 企业级流程、实践、技术和工具，与客户价值交付相一致。 | 产品/服务周期时间缩短，部署更多数字服务（例如IoT）能力的增强。频繁变更并快速获取数据的能力，促成更具适应性的商业模式。 | 设计思维、数据战略、人才招聘、技术战略和路线图 | 6 - 18 个月 |
 | 优化 | 消除约束 | 组织结构 | 关键业务能力投放在最需要的地方，模糊性和自主性影响领导力风格。 | 价值交付的速度和技术采用的简便性带来了更高的回报，高价值的新业务模式逐步浮现。 | 适应性领导力、产品专业知识、适应性架构、开发者体验 | +1-3 年 |
 | 强化 | 强化整体 | 组织节奏 | 新的工作方式变得制度化，但组织的迭代和持续演进成为新常态。规划通过数据自动流转、测试和验证。 | 创新和产品卓越重塑市场，形成独特的收入模式。组织在各个方面的高响应力成为其核心能力，创造出亲密的客户互动。 | 平台商业模式、实验文化、智能生态 | 迭代改进，持续进行 |
+
+## 架构适应度函数
+
+