From 8711d1022473e16a79d0204599d440b79b8c6eab Mon Sep 17 00:00:00 2001 From: jiangchu Date: Mon, 27 Nov 2023 11:27:33 +0800 Subject: [PATCH 1/2] :memo: feat: demo catalogue --- .dumirc.ts | 6 +- README.md | 2 +- .../cicdPipeLine.md} | 6 +- docs/caseShow/demos/index.less | 205 ++++++++++++++++++ .../demos/pipelineDemo.tsx | 8 +- .../demos/techPipeline.tsx | 2 +- docs/{useDocs => caseShow}/techPileline.md | 5 +- docs/index.md | 63 ++++++ 8 files changed, 284 insertions(+), 13 deletions(-) rename docs/{useDocs/pipleLineDemo.md => caseShow/cicdPipeLine.md} (58%) create mode 100644 docs/caseShow/demos/index.less rename docs/{useDocs => caseShow}/demos/pipelineDemo.tsx (97%) rename docs/{useDocs => caseShow}/demos/techPipeline.tsx (99%) rename docs/{useDocs => caseShow}/techPileline.md (70%) diff --git a/.dumirc.ts b/.dumirc.ts index 2bdabac..e79bdfa 100644 --- 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 index f5ed05d..e58ee0c 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@

- +

Pro Flow

diff --git a/docs/useDocs/pipleLineDemo.md b/docs/caseShow/cicdPipeLine.md similarity index 58% rename from docs/useDocs/pipleLineDemo.md rename to docs/caseShow/cicdPipeLine.md index 2e03487..e52c159 100644 --- a/docs/useDocs/pipleLineDemo.md +++ b/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 new file mode 100644 index 0000000..05ed87f --- /dev/null +++ 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 b/docs/caseShow/demos/pipelineDemo.tsx similarity index 97% rename from docs/useDocs/demos/pipelineDemo.tsx rename to docs/caseShow/demos/pipelineDemo.tsx index 592c157..d9e87a7 100644 --- a/docs/useDocs/demos/pipelineDemo.tsx +++ b/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 b/docs/caseShow/demos/techPipeline.tsx similarity index 99% rename from docs/useDocs/demos/techPipeline.tsx rename to docs/caseShow/demos/techPipeline.tsx index f08d487..934f558 100644 --- a/docs/useDocs/demos/techPipeline.tsx +++ b/docs/caseShow/demos/techPipeline.tsx @@ -45,7 +45,7 @@ const PipeNode: FC<{
diff --git a/docs/useDocs/techPileline.md b/docs/caseShow/techPileline.md similarity index 70% rename from docs/useDocs/techPileline.md rename to docs/caseShow/techPileline.md index 6bc4ab9..ef7972c 100644 --- a/docs/useDocs/techPileline.md +++ b/docs/caseShow/techPileline.md @@ -1,9 +1,10 @@ --- nav: 使用文档 group: - title: 案例展示 + title: pipeLine order: 10 -title: TechUI PipeLine +title: MultiConnect + description: --- diff --git a/docs/index.md b/docs/index.md index 2e776cb..0457e3b 100644 --- a/docs/index.md +++ b/docs/index.md @@ -7,6 +7,69 @@ hero: link: /use-docs/quick-doc - text: Github link: https://github.com/ant-design/pro-flow + +features: + - title: Compatible Style Engines + image: https://mdn.alipayobjects.com/huamei_rqvucu/afts/img/A*MvKkQqXEyfQAAAAAAAAAAAAADoN6AQ/original + description: Ant Design Style is compatible with various style engines such as styled-components, emotion-styled, etc., and has rich writing capabilities. + link: /guide/strategy + imageType: light + + - title: One-click Dark Mode Switch + link: /guide/switch-theme + description: We have encapsulated dynamic theme configuration and dark theme algorithm based on antd v5 cssinjs, providing easy-to-use light and dark theme switching capabilities for application-level scenarios, making it easier to use. + image: https://mdn.alipayobjects.com/huamei_rqvucu/afts/img/A*8KE7T7l39J0AAAAAAAAAAAAADoN6AQ/original + imageType: primary + row: 8 + + - title: Flexible Theme Extension + description: Ant Design Style provides custom token and stylish functionality. When the default antd token does not meet the styling requirements, you can flexibly extend your own theme system and freely consume it in CSS in JS. + link: /guide/custom-theme + image: https://mdn.alipayobjects.com/huamei_rqvucu/afts/img/A*6sjjRa7lLhAAAAAAAAAAAAAADoN6AQ/original + imageType: primary + row: 8 + + - title: Ant Design Token System + link: /guide/switch-theme + description: Integrated with Ant Design V5 Token System by default, making theme customization easy and flexible token consumption in CSS in JS. + image: https://gw.alipayobjects.com/zos/hitu-asset/c88e3678-6900-4289-8538-31367c2d30f2/hitu-1609235995955-image.png + imageType: light + row: 7 + hero: true + + - title: Compound Styles - Stylish + description: Ant Design Style provides the ability to create compound styles, which we call Stylish. Stylish can organize complex interactive styles by combining multiple atomic tokens, achieving high reusability. Sound familiar? Yes, it is highly consistent with the ideology of tailwindcss, but stylish will have a more explicit design semantics and easier maintenance. + link: /guide/stylish + image: https://mdn.alipayobjects.com/huamei_rqvucu/afts/img/A*_in2RLf5pY8AAAAAAAAAAAAADoN6AQ/original + imageType: primary + row: 10 + + - title: Smooth Migration from less + description: Need to migrate from an old project? Using antd-style can smoothly migrate less in the project to CSS in JS at a lower cost, and provide a better user experience and development experience. + link: /guide/migrate-from-less + image: https://mdn.alipayobjects.com/huamei_rqvucu/afts/img/A*5H2ySLO-X4cAAAAAAAAAAAAADoN6AQ/original + imageType: primary + row: 8 + + - title: Good Compatibility with Micro Apps + description: Ant Design Style is compatible with qiankun micro apps by default (with a slight performance sacrifice). It also provides performance optimization options for scenarios that do not require micro apps. + image: https://mdn.alipayobjects.com/huamei_rqvucu/afts/img/A*tZNeQIUYx_4AAAAAAAAAAAAADoN6AQ/original + imageType: primary + row: 8 + + - title: Application Cases + description: Showcases various cases of components and applications using Ant Design Style, helping developers get started quickly. This documentation is also built using Ant Design Style and can serve as a reference for static site construction. + link: /case + image: https://mdn.alipayobjects.com/huamei_rqvucu/afts/img/A*5H2ySLO-X4cAAAAAAAAAAAAADoN6AQ/original + imageType: soon + row: 9 + + - title: Easy Responsive Adaptation + description: Ant Design Style will provide convenient utility functions for responsive applications, helping developers quickly complete responsive theme development. + image: https://mdn.alipayobjects.com/huamei_rqvucu/afts/img/A*5H2ySLO-X4cAAAAAAAAAAAAADoN6AQ/original + row: 7 +--- + --- From e8d9d2e4e79a0c4a746d76f817ebc84a95d4d3f8 Mon Sep 17 00:00:00 2001 From: jiangchu Date: Mon, 27 Nov 2023 11:29:52 +0800 Subject: [PATCH 2/2] :memo: feat: annotation indexmd --- docs/index.md | 185 +++++++++++++++++++++++++++++++------------------- 1 file changed, 114 insertions(+), 71 deletions(-) diff --git a/docs/index.md b/docs/index.md index 0457e3b..d7c86eb 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,75 +1,118 @@ --- + hero: - title: Pro Flow - description: 一款功能强大、易用灵活的流程编辑器框架，帮助你轻松构建复杂的工作流和流程产品。 - actions: - - text: 快速上手 - link: /use-docs/quick-doc - - text: Github - link: https://github.com/ant-design/pro-flow - -features: - - title: Compatible Style Engines - image: https://mdn.alipayobjects.com/huamei_rqvucu/afts/img/A*MvKkQqXEyfQAAAAAAAAAAAAADoN6AQ/original - description: Ant Design Style is compatible with various style engines such as styled-components, emotion-styled, etc., and has rich writing capabilities. - link: /guide/strategy - imageType: light - - - title: One-click Dark Mode Switch - link: /guide/switch-theme - description: We have encapsulated dynamic theme configuration and dark theme algorithm based on antd v5 cssinjs, providing easy-to-use light and dark theme switching capabilities for application-level scenarios, making it easier to use. - image: https://mdn.alipayobjects.com/huamei_rqvucu/afts/img/A*8KE7T7l39J0AAAAAAAAAAAAADoN6AQ/original - imageType: primary - row: 8 - - - title: Flexible Theme Extension - description: Ant Design Style provides custom token and stylish functionality. When the default antd token does not meet the styling requirements, you can flexibly extend your own theme system and freely consume it in CSS in JS. - link: /guide/custom-theme - image: https://mdn.alipayobjects.com/huamei_rqvucu/afts/img/A*6sjjRa7lLhAAAAAAAAAAAAAADoN6AQ/original - imageType: primary - row: 8 - - - title: Ant Design Token System - link: /guide/switch-theme - description: Integrated with Ant Design V5 Token System by default, making theme customization easy and flexible token consumption in CSS in JS. - image: https://gw.alipayobjects.com/zos/hitu-asset/c88e3678-6900-4289-8538-31367c2d30f2/hitu-1609235995955-image.png - imageType: light - row: 7 - hero: true - - - title: Compound Styles - Stylish - description: Ant Design Style provides the ability to create compound styles, which we call Stylish. Stylish can organize complex interactive styles by combining multiple atomic tokens, achieving high reusability. Sound familiar? Yes, it is highly consistent with the ideology of tailwindcss, but stylish will have a more explicit design semantics and easier maintenance. - link: /guide/stylish - image: https://mdn.alipayobjects.com/huamei_rqvucu/afts/img/A*_in2RLf5pY8AAAAAAAAAAAAADoN6AQ/original - imageType: primary - row: 10 - - - title: Smooth Migration from less - description: Need to migrate from an old project? Using antd-style can smoothly migrate less in the project to CSS in JS at a lower cost, and provide a better user experience and development experience. - link: /guide/migrate-from-less - image: https://mdn.alipayobjects.com/huamei_rqvucu/afts/img/A*5H2ySLO-X4cAAAAAAAAAAAAADoN6AQ/original - imageType: primary - row: 8 - - - title: Good Compatibility with Micro Apps - description: Ant Design Style is compatible with qiankun micro apps by default (with a slight performance sacrifice). It also provides performance optimization options for scenarios that do not require micro apps. - image: https://mdn.alipayobjects.com/huamei_rqvucu/afts/img/A*tZNeQIUYx_4AAAAAAAAAAAAADoN6AQ/original - imageType: primary - row: 8 - - - title: Application Cases - description: Showcases various cases of components and applications using Ant Design Style, helping developers get started quickly. This documentation is also built using Ant Design Style and can serve as a reference for static site construction. - link: /case - image: https://mdn.alipayobjects.com/huamei_rqvucu/afts/img/A*5H2ySLO-X4cAAAAAAAAAAAAADoN6AQ/original - imageType: soon - row: 9 - - - title: Easy Responsive Adaptation - description: Ant Design Style will provide convenient utility functions for responsive applications, helping developers quickly complete responsive theme development. - image: https://mdn.alipayobjects.com/huamei_rqvucu/afts/img/A*5H2ySLO-X4cAAAAAAAAAAAAADoN6AQ/original - row: 7 ---- +title: Pro Flow +description: 一款功能强大、易用灵活的流程编辑器框架，帮助你轻松构建复杂的工作流和流程产品。 +actions: - text: 快速上手 +link: /use-docs/quick-doc - text: Github +link: https://github.com/ant-design/pro-flow ---- +# features: + +# - title: Compatible Style Engines + +# image: https://mdn.alipayobjects.com/huamei_rqvucu/afts/img/A*MvKkQqXEyfQAAAAAAAAAAAAADoN6AQ/original + +# description: Ant Design Style is compatible with various style engines such as styled-components, emotion-styled, etc., and has rich writing capabilities. + +# link: /guide/strategy + +# imageType: light + +# - title: One-click Dark Mode Switch + +# link: /guide/switch-theme + +# description: We have encapsulated dynamic theme configuration and dark theme algorithm based on antd v5 cssinjs, providing easy-to-use light and dark theme switching capabilities for application-level scenarios, making it easier to use. + +# image: https://mdn.alipayobjects.com/huamei_rqvucu/afts/img/A*8KE7T7l39J0AAAAAAAAAAAAADoN6AQ/original + +# imageType: primary + +# row: 8 + +# - title: Flexible Theme Extension + +# description: Ant Design Style provides custom token and stylish functionality. When the default antd token does not meet the styling requirements, you can flexibly extend your own theme system and freely consume it in CSS in JS. + +# link: /guide/custom-theme + +# image: https://mdn.alipayobjects.com/huamei_rqvucu/afts/img/A*6sjjRa7lLhAAAAAAAAAAAAAADoN6AQ/original + +# imageType: primary + +# row: 8 + +# - title: Ant Design Token System + +# link: /guide/switch-theme + +# description: Integrated with Ant Design V5 Token System by default, making theme customization easy and flexible token consumption in CSS in JS. + +# image: https://gw.alipayobjects.com/zos/hitu-asset/c88e3678-6900-4289-8538-31367c2d30f2/hitu-1609235995955-image.png + +# imageType: light + +# row: 7 + +# hero: true + +# - title: Compound Styles - Stylish + +# description: Ant Design Style provides the ability to create compound styles, which we call Stylish. Stylish can organize complex interactive styles by combining multiple atomic tokens, achieving high reusability. Sound familiar? Yes, it is highly consistent with the ideology of tailwindcss, but stylish will have a more explicit design semantics and easier maintenance. + +# link: /guide/stylish + +# image: https://mdn.alipayobjects.com/huamei_rqvucu/afts/img/A*_in2RLf5pY8AAAAAAAAAAAAADoN6AQ/original + +# imageType: primary + +# row: 10 + +# - title: Smooth Migration from less + +# description: Need to migrate from an old project? Using antd-style can smoothly migrate less in the project to CSS in JS at a lower cost, and provide a better user experience and development experience. + +# link: /guide/migrate-from-less + +# image: https://mdn.alipayobjects.com/huamei_rqvucu/afts/img/A*5H2ySLO-X4cAAAAAAAAAAAAADoN6AQ/original + +# imageType: primary + +# row: 8 + +# - title: Good Compatibility with Micro Apps + +# description: Ant Design Style is compatible with qiankun micro apps by default (with a slight performance sacrifice). It also provides performance optimization options for scenarios that do not require micro apps. + +# image: https://mdn.alipayobjects.com/huamei_rqvucu/afts/img/A*tZNeQIUYx_4AAAAAAAAAAAAADoN6AQ/original + +# imageType: primary + +# row: 8 + +# - title: Application Cases + +# description: Showcases various cases of components and applications using Ant Design Style, helping developers get started quickly. This documentation is also built using Ant Design Style and can serve as a reference for static site construction. + +# link: /case + +# image: https://mdn.alipayobjects.com/huamei_rqvucu/afts/img/A*5H2ySLO-X4cAAAAAAAAAAAAADoN6AQ/original + +# imageType: soon + +# row: 9 + +# - title: Easy Responsive Adaptation + +# description: Ant Design Style will provide convenient utility functions for responsive applications, helping developers quickly complete responsive theme development. + +# image: https://mdn.alipayobjects.com/huamei_rqvucu/afts/img/A*5H2ySLO-X4cAAAAAAAAAAAAADoN6AQ/original + +# row: 7 + +# --- + +# --- - +#