docs: 📚️ delete design docs in demo (#1153)

* docs: 📚️ delete design docs in demo

* docs: 📚️ delete redundant variables

examples/x6-app-dag/src/layout/header/index.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from 'react'
-import { Layout, Modal, Typography } from 'antd'
+import React from 'react'
+import { Layout } from 'antd'
 import { useObservableState } from '@/common/hooks/useObservableState'
 import { useExperimentGraph } from '@/pages/rx-models/experiment-graph'
 import { GithubOutlined } from '@ant-design/icons'
@@ -9,7 +9,6 @@ import { ExperimentTitle } from './experiment-title'
 import css from './index.less'
 
 const { Header } = Layout
-const { Title, Paragraph, Text } = Typography
 
 interface IProps {
   experimentId: string
@@ -18,7 +17,6 @@ interface IProps {
 export const GuideHeader: React.FC<IProps> = (props) => {
   const expGraph = useExperimentGraph(props.experimentId)
   const [activeExperiment] = useObservableState(expGraph.experiment$)
-  const [designShow, setDesignShow] = useState(true)
 
   const openGithub = () => {
     window.open(
@@ -36,50 +34,9 @@ export const GuideHeader: React.FC<IProps> = (props) => {
         </div>
         <div className={css.headerRight}>
           <div className={css.doc}>
-            <span
-              style={{ marginRight: 16, cursor: 'pointer' }}
-              onClick={() => setDesignShow(true)}
-            >
-              设计指南
-            </span>
             <GithubOutlined onClick={openGithub} />
           </div>
         </div>
-        <Modal
-          width={540}
-          visible={designShow}
-          footer={null}
-          onCancel={() => setDesignShow(false)}
-        >
-          <Typography>
-            <Title level={3}>DAG图</Title>
-            <Paragraph>
-              DAG 是 Directed Acyclic Graph
-              的缩写，即有向无环图，它是指图中一个点经过两种路线到达另一个点没有闭环。
-              它原本是计算机领域一种常用数据结构，因为独特的拓扑结构所带来的优异特性，经常被用于处理动态规划、导航中寻求最短路径、数据压缩等多种算法场景。
-            </Paragraph>
-            <Title level={5}>使用场景</Title>
-            <Paragraph>DAG 图常用来描述业务流程，典型场景：</Paragraph>
-            <Paragraph>
-              <ul>
-                <li>
-                  <Text strong>人工智能产品：</Text>可以通过 DAG
-                  图可以将一个复杂的人工智能实验流程给图形化出来，大大降低理解成本。
-                </li>
-                <li>
-                  <Text strong>系统架构：</Text>
-                  表达一个系统架构各个层各个实例之间的关系，有明确的分层。
-                </li>
-                <li>
-                  <Text strong>交易系统：</Text>表达资金、交易等流转情况。
-                </li>
-              </ul>
-            </Paragraph>
-            <Paragraph style={{ textAlign: 'right' }}>
-              <Text>设计师：不过</Text>
-            </Paragraph>
-          </Typography>
-        </Modal>
       </Header>
     </>
   )

examples/x6-app-er/src/pages/ERGraph/Toolbar/index.tsx

@@ -1,12 +1,11 @@
-import React, { useState } from 'react';
-import { Modal, Typography, Popover } from 'antd';
+import React from 'react';
+import { Popover } from 'antd';
 import {
   CompressOutlined,
   OneToOneOutlined,
   ZoomInOutlined,
   ZoomOutOutlined,
   GithubOutlined,
-  AntDesignOutlined,
 } from '@ant-design/icons';
 import classNames from 'classnames';
 import styles from './index.less';
@@ -19,11 +18,8 @@ interface Props {
   onRealContent: () => void;
 }
 
-const { Title, Paragraph, Text } = Typography;
-
 const GraphToolbar: React.FC<Props> = (props) => {
   const { className, onZoomIn, onZoomOut, onFitContent, onRealContent } = props;
-  const [designShow, setDesignShow] = useState(true);
 
   const onViewSource = () => {
     window.open(
@@ -79,47 +75,6 @@ const GraphToolbar: React.FC<Props> = (props) => {
           <GithubOutlined />
         </li>
       </Popover>
-      <Popover
-        overlayClassName={styles.popover}
-        content="设计指南"
-        placement="left"
-      >
-        <li onClick={() => setDesignShow(true)} className={styles.item}>
-          <AntDesignOutlined />
-        </li>
-      </Popover>
-      <Modal
-        visible={designShow}
-        footer={null}
-        onCancel={() => setDesignShow(false)}
-      >
-        <Typography>
-          <Title level={3}>ER 图</Title>
-          <Paragraph>
-            实体关系图也称ER模型（是指以实体、关系、属性三个基本概念概括数据的基本结构，从而描述静态数据结构的概念模型），
-            全称为实体联系模型或实体关系模型，是概念数据模型的高层描述所使用的数据模型或模式图。
-          </Paragraph>
-          <Title level={5}>使用场景</Title>
-          <Paragraph>
-            一般在逻辑和物理数据库设计中使用，包括信息工程和空间建模。也可以用在两个或更多实体相互如何关联
-          </Paragraph>
-          <Paragraph>
-            <ul>
-              <li>
-                <Text strong>信息系统设计中：</Text>
-                在概念结构设计阶段用来描述信息需求或要存储在数据库中的信息类型，作为用户与分析员之间有效的交流工具。
-              </li>
-              <li>
-                <Text strong>描述感兴趣区域的任何本体：</Text>
-                对使用的术语和它们的联系的概述和分类，用实体、联系和属性这三个概念来理解现实问题。
-              </li>
-            </ul>
-          </Paragraph>
-          <Paragraph style={{ textAlign: 'right' }}>
-            <Text>设计师：源子</Text>
-          </Paragraph>
-        </Typography>
-      </Modal>
     </ul>
   );
 };