feat: update 「sites/docs」更新官方文档

Author: boyongjiong

pnpm-lock.yaml

@@ -24,10 +24,8 @@ export default function Introduction() {
   return (
     <div className="intro-container">
       <div className="title-part">
-        <h1>Design language and development framework</h1>
-        <div>
-          upporting ecology that allows you to quickly build web applications
-        </div>
+        <h1>Design Process and Execution Engine</h1>
+        <div>Supporting community to get your process built quickly</div>
       </div>
       <div className="dumi-default-features intro-inner" data-cols="3">
         {inner.map((domItem, domIdx) => {

sites/docs/.dumi/favicon.png

@@ -1,9 +1,19 @@
 import React from 'react';
 import Introduction from './components/Introduction';
 import Demo from '../index/components/demo';
+import MobileDemo from '../index/components/demo2/index';
 import Animation from '../index/components/animation';
+import '../index/index.less';
 
 const Homepage: React.FC = () => {
+  const isMobile = () => {
+    let flag =
+      /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+        navigator.userAgent,
+      );
+    return flag;
+  };
+
   return (
     <section className="home-page">
       <div className="home-title">
@@ -18,9 +28,13 @@ const Homepage: React.FC = () => {
               LogicFlow
             </span>
           </h1>
-          <p>Visualize your logic and enhance your workflow</p>
+          <p>
+            Low-cost implementation for simpler,
+            <br />
+            more efficient logic management
+          </p>
           <div className="dumi-default-hero-actions">
-            <a href="/tutorial">Start</a>
+            <a href="/tutorial">Get Started</a>
             <a href="https://github.com/didi/LogicFlow" target="_blank">
               Github
             </a>
@@ -29,7 +43,7 @@ const Homepage: React.FC = () => {
         <Animation />
       </div>
       {/* 首页 demo */}
-      <Demo></Demo>
+      {isMobile() ? <MobileDemo /> : <Demo />}
       {/* 介绍 */}
       <Introduction></Introduction>
     </section>

sites/docs/.dumi/pages/enUS/components/Introduction/index.tsx

@@ -32,8 +32,8 @@ export default function Introduction() {
   return (
     <div className="intro-container">
       <div className="title-part">
-        <h1>设计语言与研发框架</h1>
-        <div>配套生态，让你快速搭建网站应用</div>
+        <h1>设计流程与执行引擎</h1>
+        <div>配套社区，让你快速完成流程搭建</div>
       </div>
       {/* TODO: 增加 Star 数、weekly Installs 以及 License，参考 [ReactFlow](https://reactflow.dev/) 官网样式 */}
 

sites/docs/.dumi/pages/enUS/index.tsx

@@ -8,7 +8,7 @@
   margin-bottom: 90px;
   overflow: hidden;
   border-radius: 12px;
-  box-shadow: -5px 5px 15px #0000001a;
+  // box-shadow: -5px 5px 15px #0000001a;
 
   .app-content {
     height: 440px;
@@ -21,38 +21,50 @@
     font-weight: bolder;
     font-size: 15px;
 
-    span {
+    button {
       padding: 5px 20px;
-      color: #fff;
+      color: #3487fc;
       text-align: center;
-      background: #3487fc;
+      background: #fff;
       border: 1px solid #3487fc;
       border-radius: 26px;
       cursor: pointer;
+      user-select: none;
     }
 
-    span:last-child {
+    button:last-child {
       margin-left: 20px;
-      padding: 5px 15px;
-      color: #3487fc;
-      background: #fff;
     }
-  }
 
-  .run-btn > span:hover {
-    opacity: 0.8;
+    button:hover {
+      opacity: 0.8;
+    }
+
+    button.is-disabled {
+      color: #c0c4cc;
+      border-color: #ebeef5;
+      cursor: not-allowed;
+      opacity: 1;
+    }
+
+    button.active {
+      color: #fff;
+      background: #a0cfff;
+      border-color: #a0cfff;
+    }
   }
 
   // 元素
   .step-wrapper {
     position: relative;
     width: calc(100% - 4px);
     height: calc(100% - 4px);
-    background: #fafafa;
+    color: #747e92;
+    background: #f9f9f9;
     // background: rgb(255 255 255 / 70%);
-    border-radius: 1rem;
+    border-radius: 8px;
 
-    box-shadow: inset 0 0 0 2px rgb(229 231 235);
+    box-shadow: inset 0 0 0 2px #d4d5d6;
 
     .text {
       width: 100%;
@@ -65,7 +77,7 @@
       box-sizing: inherit;
       width: calc(100% - 4px);
       height: calc(100% - 4px);
-      border-radius: 1rem;
+      border-radius: 8px;
       content: '';
     }
   }