chore: add components

antd-sample/MyComponents1/index.jsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import {
+  DeleteColumnOutlined,
+  ForkOutlined,
+  HolderOutlined,
+  LaptopOutlined,
+  StarOutlined,
+} from '@ant-design/icons';
+import { Button } from 'antd';
+import styles from './index.module.less';
+
+export const MyComponent = () => {
+  const spanText = 'Pinned';
+  const aText = 'Customize pins';
+  const spanText2 = 'ios-app-bootstrap';
+
+  // 按钮处理函数
+  const onButtonClick = e => {};
+  const spanText3 = 'A starting tutorial for iOS application with Swift.';
+  const spanText4 = 'Swift';
+  const spanText5 = '39';
+  const spanText6 = '2o';
+  const spanText7 = '17';
+  const spanText8 = 'android-app-bootstrapPublic';
+  const spanText9 = 'A starting tutorial for Android application.';
+  const spanText10 = 'Java';
+  const spanText11 = '27';
+  const spanText12 = '9';
+
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.div}>
+        <div className={styles.divDep4L1}>
+          <span className={styles.span}>{spanText}</span>
+          <a className={styles.a}>{aText}</a>
+        </div>
+        <div className={styles.divDep4L2}>
+          <div className={styles.divDep5L1}>
+            <div className={styles.divDep6L1}>
+              <div className={styles.divDep7L1}>
+                <div className={styles.divDep8L1}>
+                  <DeleteColumnOutlined className={styles.deleteColumnIcon} />
+                  <span className={styles.spanDep9L1}>{spanText2}</span>
+                  <Button
+                    size="small"
+                    onClick={onButtonClick}
+                    className={styles.button}
+                  >
+                    Public
+                  </Button>
+                  <HolderOutlined className={styles.holderIcon} />
+                </div>
+                <span className={styles.spanDep8L1}>{spanText3}</span>
+                <div className={styles.divDep8L2}>
+                  <div className={styles.divDep9L1} />
+                  <span className={styles.spanDep9L2}>{spanText4}</span>
+                  <StarOutlined className={styles.starIcon} />
+                  <span className={styles.spanDep9L3}>{spanText5}</span>
+                  <span _fecodex_fontSize className={styles.spanDep9L4}>
+                    <ForkOutlined className={styles.forkIcon} />
+                    {spanText6}
+                  </span>
+                  <span className={styles.spanDep9L5}>{spanText7}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className={styles.divDep5L2}>
+            <div className={styles.divDep6L2}>
+              <div className={styles.divDep7L2}>
+                <div className={styles.divDep8L3}>
+                  <div className={styles.divDep9L2}>
+                    <LaptopOutlined className={styles.laptopIcon} />
+                    <span className={styles.spanDep10L1}>{spanText8}</span>
+                  </div>
+                  <span className={styles.spanDep9L6}>{spanText9}</span>
+                  <div className={styles.divDep9L3}>
+                    <div className={styles.divDep10L1} />
+                    <span className={styles.spanDep10L2}>{spanText10}</span>
+                    <StarOutlined className={styles.starIconDep10L1} />
+                    <span className={styles.spanDep10L3}>{spanText11}</span>
+                    <ForkOutlined className={styles.forkIconDep10L1} />
+                    <span className={styles.spanDep10L4}>{spanText12}</span>
+                  </div>
+                </div>
+                <HolderOutlined className={styles.holderIconDep8L1} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

antd-sample/MyComponents1/index.module.less

@@ -0,0 +1,234 @@
+.wrapper {
+  background-color: rgb(255,255,255);
+  padding: 6px 28px 6px 10px;
+
+  .div {
+    display: flex;
+    flex-direction: column;
+
+    .divDep4L1 {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      .span {
+        color: #000000;
+        font-size: 12px;
+      }
+
+      .a {
+        font-size: 12px;
+        margin-left: 756px;
+      }
+    }
+
+    .divDep4L2 {
+      display: flex;
+      flex-direction: row;
+      align-items: stretch;
+      margin-right: 2px;
+      margin-left: 2px;
+      margin-top: 10px;
+
+      .divDep5L1 {
+        flex: 1;
+
+        .divDep6L1 {
+          border: solid 1px #D3D3D3;
+          border-radius: 6px;
+          border-style: solid;
+          background-color: rgb(255,255,255);
+          height: 100%;
+          width: 100%;
+          padding: 18px 16px 18px 16px;
+
+          .divDep7L1 {
+            display: flex;
+            flex-direction: column;
+
+            .divDep8L1 {
+              display: flex;
+              flex-direction: row;
+              align-items: center;
+              margin-left: 2px;
+
+              .deleteColumnIcon {
+                font-size: 12px;
+                margin-top: -2px;
+              }
+
+              .spanDep9L1 {
+                color: #483D8B;
+                font-size: 12px;
+                margin-top: 2px;
+                margin-left: 2px;
+              }
+
+              .button {
+                margin-left: 2px;
+              }
+
+              .holderIcon {
+                margin-top: 2px;
+                margin-left: 188px;
+              }
+            }
+
+            .spanDep8L1 {
+              color: #696969;
+              font-size: 12px;
+              align-self: flex-start;
+              margin-top: 14px;
+            }
+
+            .divDep8L2 {
+              display: flex;
+              flex-direction: row;
+              align-items: center;
+              align-self: flex-start;
+              margin-left: 2px;
+              margin-top: 10px;
+
+              .divDep9L1 {
+                background-color: rgb(254,255,255);
+              }
+
+              .spanDep9L2 {
+                color: #2B2B2B;
+                font-size: 12px;
+                margin-top: 2px;
+                margin-left: 2px;
+              }
+
+              .starIcon {
+                margin-top: 2px;
+                margin-left: 18px;
+              }
+
+              .spanDep9L3 {
+                color: #2B2B2B;
+                font-size: 12px;
+                margin-top: 2px;
+                margin-left: 2px;
+              }
+
+              .spanDep9L4 {
+                font-size: 12px;
+                margin-left: 15px;
+
+                .forkIcon {
+                  margin-right: 5px;
+                }
+              }
+
+              .spanDep9L5 {
+                color: #2B2B2B;
+                font-size: 12px;
+                margin-top: 2px;
+              }
+            }
+          }
+        }
+      }
+
+      .divDep5L2 {
+        flex: 1;
+        margin-left: 16px;
+
+        .divDep6L2 {
+          border: solid 1px #D3D3D3;
+          border-radius: 6px;
+          border-style: solid;
+          background-color: rgb(255,255,255);
+          height: 100%;
+          width: 100%;
+          padding: 18px 16px 18px 16px;
+
+          .divDep7L2 {
+            display: flex;
+            flex-direction: row;
+
+            .divDep8L3 {
+              display: flex;
+              flex-direction: column;
+              align-self: center;
+              flex: 1;
+
+              .divDep9L2 {
+                display: flex;
+                flex-direction: row;
+                align-items: stretch;
+                margin-right: 2px;
+
+                .laptopIcon {
+                  font-size: 12px;
+                  margin-top: -2px;
+                }
+
+                .spanDep10L1 {
+                  color: #483D8B;
+                  font-size: 12px;
+                  margin-top: 2px;
+                  margin-left: 10px;
+                }
+              }
+
+              .spanDep9L6 {
+                color: #696969;
+                font-size: 12px;
+                margin-top: 15px;
+              }
+
+              .divDep9L3 {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                align-self: flex-start;
+                margin-top: 12px;
+
+                .divDep10L1 {
+                  background-color: rgb(254,255,255);
+                  margin-top: -2px;
+                }
+
+                .spanDep10L2 {
+                  color: #2B2B2B;
+                  font-size: 12px;
+                  margin-top: 2px;
+                  margin-left: 2px;
+                }
+
+                .starIconDep10L1 {
+                  margin-top: -2px;
+                  margin-left: 18px;
+                }
+
+                .spanDep10L3 {
+                  color: #483D8B;
+                  font-size: 12px;
+                  margin-left: 2px;
+                }
+
+                .forkIconDep10L1 {
+                  margin-top: -2px;
+                  margin-left: 18px;
+                }
+
+                .spanDep10L4 {
+                  color: #696969;
+                  font-size: 12px;
+                  margin-left: 2px;
+                }
+              }
+            }
+
+            .holderIconDep8L1 {
+              margin-top: 4px;
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}

antd-sample/app.jsx

@@ -10,6 +10,7 @@ import './app.less';
 
 import fetch from './common/fetch';
 import Login from './login.jsx';
+import { MyComponent as MyComponent1 } from './MyComponents1';
 
 import styles from './app.module.less';
 
@@ -98,7 +99,7 @@ class App extends React.Component {
         <Header className="header" />
         <div className={styles.myComponent}>
           <h3>MyComponent</h3>
-          <MyComponent />
+          <MyComponent1 />
         </div>
         <Content style={{ padding: 30 }}>
           <Select

antd-sample/app.module.less

@@ -1,4 +1,5 @@
 .myComponent {
   border: 1px solid black;
   padding: 20px;
+  max-width: 60vw;
 }