📝 feat: demo catalogue (#36)

* 📝 feat: demo catalogue * 📝 feat: annotation indexmd --------- Co-authored-by: jiangchu <[email protected]>
ant-design · Nov 27, 2023 · e469a9f · e469a9f
1 parent ec2ea67
commit e469a9f
Show file tree

Hide file tree

Showing 8 changed files with 336 additions and 22 deletions.
diff --git a/.dumirc.ts b/.dumirc.ts
@@ -11,10 +11,12 @@ export default defineConfig({
   base: isProdSite ? '/pro-flow/' : '/',
   publicPath: isProdSite ? '/pro-flow/' : '/',
   outputPath: 'docs-dist',
-  favicons: ['https://gw.alipayobjects.com/zos/antfincdn/upvrAjAPQX/Logo_Tech%252520UI.svg'],
+  favicons: [
+    'https://mdn.alipayobjects.com/huamei_d2ejos/afts/img/A*j10nRoiMh0MAAAAAAAAAAAAADvl6AQ/original',
+  ],
   themeConfig: {
     name: 'Pro Flow',
-    logo: 'https://gw.alipayobjects.com/zos/antfincdn/upvrAjAPQX/Logo_Tech%252520UI.svg',
+    logo: 'https://mdn.alipayobjects.com/huamei_d2ejos/afts/img/A*j10nRoiMh0MAAAAAAAAAAAAADvl6AQ/original',
     socialLinks: {
       github: homepage,
     },

diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 <p align="center">
-  <img width="160" src="https://gw.alipayobjects.com/zos/antfincdn/upvrAjAPQX/Logo_Tech%252520UI.svg">
+  <img width="160" src="https://mdn.alipayobjects.com/huamei_d2ejos/afts/img/A*j10nRoiMh0MAAAAAAAAAAAAADvl6AQ/original">
 </p>
 <h1 align="center">Pro Flow</h1>
 

diff --git a/docs/useDocs/pipleLineDemo.md → docs/caseShow/cicdPipeLine.md b/docs/useDocs/pipleLineDemo.md → docs/caseShow/cicdPipeLine.md
@@ -1,9 +1,9 @@
 ---
-nav: 使用文档
+nav: 案例展示
 group:
-  title: 案例展示
+  title: pipeLine
   order: 10
-title: 雨燕 PipeLine
+title: CI/CD PipeLine
 description:
 ---
 

diff --git a/docs/caseShow/demos/index.less b/docs/caseShow/demos/index.less
@@ -0,0 +1,205 @@
+.pipeNodeWrap {
+  width: 260px;
+  min-height: 100px;
+  background-color: #f6f8fa;
+  padding: 16px;
+  box-sizing: border-box;
+  border-radius: 8px;
+
+  .handle {
+    top: 0;
+  }
+
+  .stepTitle {
+    overflow: hidden;
+    color: #8c8c8c;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .pipeNode {
+    margin-top: 10px;
+    width: 232px;
+    box-sizing: border-box;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    border-radius: 8px;
+
+    .mainBox {
+      width: 100%;
+      padding: 12px;
+      height: 70px;
+      background-color: white;
+      display: flex;
+      border-bottom: none;
+      border-radius: 8px;
+      box-sizing: border-box;
+      .logo {
+        img {
+          width: 16px;
+          height: 16px;
+          margin-top: 4px;
+        }
+      }
+      .wrap {
+        margin-left: 8px;
+        display: flex;
+        flex-direction: column;
+        .title {
+          color: #000;
+          font-weight: 500;
+          font-size: 14px;
+          line-height: 22px;
+          white-space: nowrap;
+        }
+        .des {
+          margin-top: 8px;
+          color: #00000073;
+          font-size: 12px;
+        }
+      }
+    }
+  }
+
+  .children {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-bottom: 10px;
+
+    .childrenBox {
+      width: 200px;
+      padding: 12px;
+      height: 70px;
+      background-color: white;
+      display: flex;
+      border: 1px solid rgba(0, 0, 0, 0.08);
+      border-radius: 8px;
+      box-sizing: border-box;
+      margin-top: 10px;
+
+      .logo {
+        img {
+          width: 16px;
+          height: 16px;
+          margin-top: 4px;
+        }
+      }
+      .wrap {
+        margin-left: 8px;
+        display: flex;
+        flex-direction: column;
+        .title {
+          color: #000;
+          font-weight: 500;
+          font-size: 14px;
+          line-height: 22px;
+          white-space: nowrap;
+        }
+        .des {
+          margin-top: 8px;
+          color: #00000073;
+          font-size: 12px;
+        }
+      }
+    }
+  }
+}
+.container {
+  width: 100%;
+  height: 600px;
+}
+
+.techUIpipeNodeWrap {
+  width: 260px;
+  min-height: 100px;
+  background-color: #f6f8fa;
+  padding: 12px 6px;
+  box-sizing: border-box;
+  border-radius: 8px;
+
+  .pipeNode {
+    width: 100%;
+    border-radius: 4px;
+    background-color: white;
+    padding-bottom: 12px;
+
+    .mainBox {
+      width: 100%;
+      padding: 12px;
+      height: 45px;
+      background-color: white;
+      display: flex;
+      border-bottom: none;
+      border-radius: 8px;
+      box-sizing: border-box;
+      position: relative;
+      .logo {
+        img {
+          width: 16px;
+          height: 16px;
+          margin-top: 4px;
+        }
+      }
+      .title {
+        margin-left: 8px;
+        color: #000;
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 22px;
+        white-space: nowrap;
+      }
+      .subLogo {
+        position: absolute;
+        right: 6px;
+        top: 8px;
+        img {
+          width: 80px;
+          height: 25px;
+        }
+      }
+    }
+
+    .children {
+      padding-bottom: 8px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      .childrenBox {
+        width: 220px;
+        height: 30px;
+        margin-top: 3px;
+        border: 1px solid #f1f1f1;
+        box-sizing: border-box;
+        padding-left: 5px;
+        display: flex;
+        align-items: center;
+        border-radius: 3px;
+        position: relative;
+
+        .logo {
+          display: flex;
+          align-items: center;
+          img {
+            width: 16px;
+            height: 16px;
+          }
+        }
+        .title {
+          margin-left: 8px;
+          color: #000;
+          font-weight: 500;
+          font-size: 14px;
+          line-height: 22px;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+
+  .des {
+    margin-left: 16px;
+
+    color: #00000073;
+    font-size: 10px;
+  }
+}
diff --git a/docs/useDocs/demos/pipelineDemo.tsx → docs/caseShow/demos/pipelineDemo.tsx b/docs/useDocs/demos/pipelineDemo.tsx → docs/caseShow/demos/pipelineDemo.tsx
@@ -114,8 +114,8 @@ const nodes = [
     width: nodeWidth,
     height: nodeHeight,
     data: {
-      stepTitle: '阶段 1: 部署平台 tnpmregistry@...',
-      title: 'tnpmregistry@DEFAULT ...',
+      stepTitle: '阶段 1: 部署平台 npmregistry@...',
+      title: 'npmregistry@DEFAULT ...',
       logo: 'https://mdn.alipayobjects.com/huamei_d2ejos/afts/img/A*sko9RoPu-HgAAAAAAAAAAAAADvl6AQ/original',
       des: '34秒',
       needSwitch: true,
@@ -150,8 +150,8 @@ const nodes = [
     width: nodeWidth,
     height: nodeHeight,
     data: {
-      stepTitle: '阶段 2: 部署平台 hitu@DEFAULT ...',
-      title: 'hitu@DEFAULT 初始化',
+      stepTitle: '阶段 2: 部署平台 xxx@DEFAULT ...',
+      title: 'xxx@DEFAULT 初始化',
       logo: 'https://mdn.alipayobjects.com/huamei_d2ejos/afts/img/A*sko9RoPu-HgAAAAAAAAAAAAADvl6AQ/original',
       des: '2秒',
       needSwitch: true,

diff --git a/docs/useDocs/demos/techPipeline.tsx → docs/caseShow/demos/techPipeline.tsx b/docs/useDocs/demos/techPipeline.tsx → docs/caseShow/demos/techPipeline.tsx
@@ -45,7 +45,7 @@ const PipeNode: FC<{
           <div className="subLogo">
             <img
               src={
-                'https://mdn.alipayobjects.com/huamei_d2ejos/afts/img/A*KS0vRrmHia8AAAAAAAAAAAAADvl6AQ/original'
+                'https://mdn.alipayobjects.com/huamei_d2ejos/afts/img/A*Rg0cQpidn8cAAAAAAAAAAAAADvl6AQ/original'
               }
               alt=""
             />

diff --git a/docs/useDocs/techPileline.md → docs/caseShow/techPileline.md b/docs/useDocs/techPileline.md → docs/caseShow/techPileline.md
@@ -1,9 +1,10 @@
 ---
 nav: 使用文档
 group:
-  title: 案例展示
+  title: pipeLine
   order: 10
-title: TechUI PipeLine
+title: MultiConnect
+
 description:
 ---