Initial commit

.idea/inspectionProfiles/Project_Default.xml

 <component name="InspectionProjectProfileManager">
   <profile version="1.0">
     <option name="myName" value="Project Default" />
-    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+    <inspection_tool class="CssUnknownProperty" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myCustomPropertiesEnabled" value="true" />
+      <option name="myIgnoreVendorSpecificProperties" value="false" />
+      <option name="myCustomPropertiesList">
+        <value>
+          <list size="1">
+            <item index="0" class="java.lang.String" itemvalue="lineheight" />
+          </list>
+        </value>
+      </option>
+    </inspection_tool>
   </profile>
 </component>
\ No newline at end of file

.idea/watcherTasks.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectTasksOptions" suppressed-tasks="Less" />
+</project>
\ No newline at end of file

craco.config.js

@@ -8,7 +8,7 @@ module.exports = {
             options: {
                 lessLoaderOptions: {
                     lessOptions: {
-                        modifyVars: { '@primary-color': '#1DA57A' },
+                        modifyVars: { '@primary-color': '#09f' },
                         javascriptEnabled: true,
                     },
                 },

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@ant-design/icons": "^4.2.2",
     "@craco/craco": "^5.7.0",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",

scripts/build.js

@@ -74,7 +74,7 @@ checkBrowsers(paths.appPath, isInteractive)
         console.log(chalk.yellow('Compiled with warnings.\n'));
         console.log(warnings.join('\n\n'));
         console.log(
-          '\nSearch for the ' +
+          '\nAppSearch for the ' +
             chalk.underline(chalk.yellow('keywords')) +
             ' to learn more about each warning.'
         );

src/App.less

 @import '~antd/dist/antd.less';
 
-.App {
+.app {
+  background-color: #fff;
   text-align: center;
-}
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
+  .header {
+    background-color: #fff;
+  }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
+  .main {
+    background-color: #fff;
   }
-}
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+  .footer {
+    background-color: #fff;
+  }
 }
 
-.App-link {
-  color: #61dafb;
+.logo {
+  height: 50px;
+  pointer-events: none;
 }
 
-@keyframes App-logo-spin {
+@keyframes app-logo-spin {
   from {
     transform: rotate(0deg);
   }

src/App.test.tsx

-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

src/App.tsx

 import React from 'react';
-import logo from './logo.svg';
-import { Button } from 'antd';
-
 import './App.less';
 
+import Index from "./Pages/Index/Index";
+import {Layout, Divider, BackTop} from "antd";
+import AppHeader from "./Element/AppHeader/AppHeader";
+import AppFooter from "./Element/AppFooter/AppFooter";
+import AppSearch from "./Component/AppSearch/AppSearch";
+import SearchList from "./Element/SearchLIst/SearchList";
+
+const {Header, Footer, Content} = Layout;
+
+
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-
-        <Button type="primary">Learn React</Button>
-      </header>
-    </div>
-  );
+    return (
+        <div>
+            <Layout className='app'>
+                <Header className='header'>
+                    <AppHeader/>
+                </Header>
+
+
+                <AppSearch/>
+
+                <Content className='main'>
+                    {/*<Index/>*/}
+                    <SearchList/>
+                </Content>
+
+                <Footer className='footer'>
+                    <AppFooter/>
+                </Footer>
+            </Layout>
+
+            <BackTop>
+                <div style={{
+                    height: 40,
+                    width: 40,
+                    lineHeight: '40px',
+                    borderRadius: 4,
+                    backgroundColor: '#101010',
+                    color: '#fff',
+                    textAlign: 'center',
+                    fontSize: 14,
+                }}>UP
+                </div>
+            </BackTop>
+        </div>
+    );
 }
 
 export default App;

src/Component/AppSearch/AppSearch.less

+/*
+ * AppSearch.less
+ * Created by 还有醋v on 2020/11/6.
+ * Copyright © 2020 haiyoucuv. All rights reserved.
+ */
+
+.app-search {
+  border-top-style: solid;
+  border-top-width: 1px;
+  border-color: rgba(0, 0, 0, .1);
+  padding: 10px 0;
+
+  .app-search-cont {
+    display: flex;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 2rem;
+    padding-right: 2rem;
+
+    .app-search-logo {
+      width: 80px;
+      margin-right: 0.5rem;
+
+      &:hover {
+        animation: index-logo-spin 1s;
+      }
+
+    }
+
+    .app-search-div {
+      display: flex;
+      flex: 1 1 auto;
+      padding-top: .5rem;
+      padding-bottom: .5rem;
+
+
+      .app-search-input {
+        font-size: 20px;
+        padding: 5px;
+        border-radius: 0;
+
+        &:active {
+          border: black solid 1px;
+        }
+      }
+
+      .app-search-btn {
+        border-radius: 0;
+        background-color: black;
+        font-size: 20px;
+        height: 52px;
+        padding: 5px 35px;
+        text-align: center;
+        align-items: center;
+
+        &:hover {
+          background-color: #767676;
+          color: white;
+        }
+      }
+    }
+
+    .app-search-input-icon {
+      width: 50px;
+      color: #767676;
+    }
+  }
+}
\ No newline at end of file

src/Component/AppSearch/AppSearch.tsx

+/*
+ * AppSearch.tsx
+ * Created by 还有醋v on 2020/11/6.
+ * Copyright © 2020 haiyoucuv. All rights reserved.
+ */
+
+
+import React, {ReactNode} from 'react';
+import './AppSearch.less';
+
+import {Button, Input} from 'antd';
+import logo from "../../logo.svg";
+
+import {SearchOutlined} from '@ant-design/icons';
+
+
+export default class AppSearch extends React.Component<any> {
+
+    public state: any = {}
+
+    constructor(props: any, context: any) {
+        super(props, context);
+    }
+
+    public componentDidMount(): void {
+
+    }
+
+    public componentWillUnmount(): void {
+
+    }
+
+    public render(): ReactNode {
+        return (
+            <div className='app-search'>
+                <div className="app-search-cont">
+                    <img src={logo} className="app-search-logo" alt="logo"/>
+                    <div className='app-search-div'>
+                        <Input className='app-search-input' size="large" placeholder="Search packages" prefix={
+                            <SearchOutlined className='app-search-input-icon'/>
+                        }/>
+                        <Button className='app-search-btn' type="primary">Search</Button>
+                    </div>
+
+                </div>
+            </div>
+        );
+    }
+}
\ No newline at end of file

src/Component/SearchListItem/SearchListItem.less

+/*
+ * SearchListItem.less
+ * Created by 还有醋v on 2020/11/6.
+ * Copyright © 2020 haiyoucuv. All rights reserved.
+ */
+
+.search-item {
+  display: flex;
+  padding: 1rem .25rem .5rem;
+  flex: 1 1 auto;
+
+  .search-item-left {
+    text-align: left;
+
+    .search-item-title {
+      color: black;
+      display: inline-block;
+      font-weight: 600;
+      color: rgba(0, 0, 0, .9);
+      margin: 0;
+      text-decoration: none;
+      font-size: 1.25rem;
+    }
+
+    .search-item-description {
+      color: rgba(0, 0, 0, .6);
+      padding-top: .25rem;
+      padding-bottom: .25rem;
+      margin-bottom: 0;
+      margin-top: .25rem;
+      text-decoration: none;
+      font-size: 1rem;
+    }
+
+    .search-item-info {
+      flex-direction: row;
+      line-height: 1.5;
+      color: rgba(0, 0, 0, .8);
+      margin-bottom: .25rem;
+      margin-top: .25rem;
+      font-size: .875rem;
+      display: flex;
+      align-items: center;
+
+      .search-item-info-avatar {
+        width: 22px;
+      }
+
+      .search-item-info-user {
+        background-color: transparent;
+        box-sizing: border-box;
+        display: block;
+        font-weight: 600;
+        color: rgba(0, 0, 0, .7);
+        padding-left: .5rem;
+        padding-right: .5rem;
+      }
+
+      .search-item-info-date {
+        --wombat-red-hover: #c40b0a;
+        font-size: .875rem;
+        color: rgba(0, 0, 0, .5);
+      }
+    }
+
+  }
+}
\ No newline at end of file

src/Component/SearchListItem/SearchListItem.tsx

+/*
+ * SearchListItem.tsx
+ * Created by 还有醋v on 2020/11/6.
+ * Copyright © 2020 haiyoucuv. All rights reserved.
+ */
+
+
+import React, {ReactNode} from 'react';
+
+import './SearchListItem.less';
+
+export default class SearchListItem extends React.Component<any> {
+
+    public state: any = {}
+
+    constructor(props: any, context: any) {
+        super(props, context);
+    }
+
+    public componentDidMount(): void {
+
+    }
+
+    public componentWillUnmount(): void {
+
+    }
+
+    public render(): ReactNode {
+        const {title, link, description, userNick} = this.props.data;
+        return (
+            <div className='search-item'>
+                <div className='search-item-left'>
+                    <a href={link}><h3 className='search-item-title'>{title}</h3></a>
+                    <p className='search-item-description'>{description}</p>
+                    <div className='search-item-info'>
+                        <img className='search-item-info-avatar' src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/>
+                        <div className='search-item-info-user'>{userNick}</div>
+                        <div className='search-item-info-date'>{userNick}</div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
\ No newline at end of file

src/Element/AppFooter/AppFooter.less

+/*
+ * AppFooter.less
+ * Created by 还有醋v on 2020/11/6.
+ * Copyright © 2020 haiyoucuv. All rights reserved.
+ */
+
+.app-footer {
+
+}
\ No newline at end of file

src/Element/AppFooter/AppFooter.tsx

+/*
+ * AppFooter.tsx
+ * Created by 还有醋v on 2020/11/6.
+ * Copyright © 2020 haiyoucuv. All rights reserved.
+ */
+
+
+import React, {ReactNode} from 'react';
+
+import './AppFooter.less';
+
+export default class AppFooter extends React.Component<any> {
+
+    public state: any = {}
+
+    constructor(props: any, context: any) {
+        super(props, context);
+    }
+
+    public componentDidMount(): void {
+
+    }
+
+    public componentWillUnmount(): void {
+
+    }
+
+    public render(): ReactNode {
+        return (
+            <div className='app-footer'>
+                Footer
+            </div>
+        );
+    }
+}
\ No newline at end of file

src/Element/AppHeader/AppHeader.less

+/*
+ * AppFooter.less
+ * Created by 还有醋v on 2020/11/6.
+ * Copyright © 2020 haiyoucuv. All rights reserved.
+ */
+
+.app-header {
+  display: flex;
+  align-items: center;
+
+  .app-logo {
+    height: 50px;
+    //pointer-events: none;
+
+    &:hover {
+      animation: index-logo-spin 1s;
+    }
+  }
+
+}
\ No newline at end of file

src/Element/AppHeader/AppHeader.tsx

+/*
+ * AppFooter.tsx
+ * Created by 还有醋v on 2020/11/6.
+ * Copyright © 2020 haiyoucuv. All rights reserved.
+ */
+
+
+import React, {ReactNode} from 'react';
+import logo from "../../logo.svg";
+import {Menu} from "antd";
+
+import './AppHeader.less';
+
+export default class AppHeader extends React.Component<any> {
+
+    public state: any = {}
+
+    constructor(props: any, context: any) {
+        super(props, context);
+    }
+
+    public componentDidMount(): void {
+
+    }
+
+    public componentWillUnmount(): void {
+
+    }
+
+    public render(): ReactNode {
+        return (
+            <div className='app-header'>
+                <img src={logo} className="app-logo" alt="logo"/>
+                <Menu theme="light" mode="horizontal" defaultSelectedKeys={['1']}>
+                    <Menu.Item key="1">nav 1</Menu.Item>
+                    <Menu.Item key="2">nav 2</Menu.Item>
+                    <Menu.Item key="3">nav 3</Menu.Item>
+                </Menu>
+            </div>
+        );
+    }
+}
\ No newline at end of file

src/Element/SearchLIst/SearchList.less

+/*
+ * SearchList.less
+ * Created by 还有醋v on 2020/11/6.
+ * Copyright © 2020 haiyoucuv. All rights reserved.
+ */
+
+
+.search-list{
+  .search-list-pagination-top{
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+    border-color: rgba(0,0,0,.1);
+    background-color: #f9f9f9;
+
+    .search-list-pagination{
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      font-weight: 400;
+      max-width: 96rem;
+      margin: 0 auto;
+      padding: 0 2rem;
+
+      .search-list-num{
+        box-sizing: border-box;
+        float: left;
+        font-weight: 600;
+        color: #000;
+        padding-top: .5rem;
+        font-size: 1.25rem;
+        margin-left: 0;
+      }
+    }
+
+  }
+
+}
\ No newline at end of file

src/Element/SearchLIst/SearchList.tsx

+/*
+ * SearchList.tsx
+ * Created by 还有醋v on 2020/11/6.
+ * Copyright © 2020 haiyoucuv. All rights reserved.
+ */
+
+
+import React, {ReactNode} from 'react';
+
+import './SearchList.less';
+import {Card, List, Pagination} from "antd";
+import SearchListItem from "../../Component/SearchListItem/SearchListItem";
+
+export default class SearchList extends React.Component<any> {
+
+    public state: any = {
+        showData: [],
+        totalLength: 0,
+        pageIndex: 1,
+        pageSize: 10,
+        current: 1,
+    }
+
+    private totalData: any[] = [];
+
+    constructor(props: any, context: any) {
+        super(props, context);
+    }
+
+    public componentDidMount(): void {
+        for (let i = 0; i < 50; i++) {
+            this.totalData.push({
+                title: `Ant Design Title ${i}`,
+                userNick: `${i} 1111`,
+                date: `${i} 1111`,
+                link: 'https://www.baidu.com/',
+                description: "Ant Design, a design language for background applications, is refined by Ant UED Team",
+            });
+        }
+
+        this.setState({
+            totalLength: this.totalData.length,
+        });
+        this.showPage(1);
+    }
+
+    public componentWillUnmount(): void {
+
+    }
+
+    private showPage(page: number, pageSize: number = this.state.pageSize) {
+        const showData = this.totalData.slice((page - 1) * pageSize, page * pageSize);
+        this.setState({
+            current: page,
+            showData,
+            pageSize
+        });
+    }
+
+    private onPageChange = (page: number, pageSize?: number) => {
+        this.showPage(page, pageSize);
+    }
+
+    private onShowSizeChange = (current: number, pageSize?: number) => {
+        this.showPage(current, pageSize);
+    }
+
+    public render(): ReactNode {
+        const {showData, totalLength, pageSize, current} = this.state;
+
+        return (
+            <div className='search-list'>
+                <div className='search-list-pagination-top'>
+                    <div className='search-list-pagination'>
+                        <div>
+                            <h2 className="search-list-num">143147 packages found</h2>
+                        </div>
+                        <Pagination
+                            current={current}
+                            total={totalLength}
+                            pageSize={pageSize}
+                            hideOnSinglePage={false}
+                            showSizeChanger
+                            onChange={this.onPageChange}
+                            onShowSizeChange={this.onShowSizeChange}
+                        />
+                    </div>
+
+                </div>
+                <Card>
+                    <List
+                        itemLayout="horizontal"
+                        dataSource={showData}
+                        renderItem={(item) => (
+                            <List.Item>
+                                <SearchListItem data={item}/>
+                            </List.Item>
+                        )}
+                    />
+                </Card>
+
+                <Pagination
+                    total={totalLength}
+                    pageSize={pageSize}
+                    hideOnSinglePage={false}
+                    showSizeChanger
+                    onChange={this.onPageChange}
+                    onShowSizeChange={this.onShowSizeChange}
+                />
+            </div>
+        );
+    }
+}
\ No newline at end of file

src/Pages/Index/Index.less

+/*
+ * Index.less
+ * Created by 还有醋v on 2020/11/6.
+ * Copyright © 2020 haiyoucuv. All rights reserved.
+ */
+
+.index {
+
+  .index-bg {
+    height: 796px;
+    background-image: url("https://static.npmjs.com/attachments/ck3uwvv67mydydr74ea00ip4j-bg-stripes.png");
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+
+    .index-txt {
+      max-width: 48rem;
+      padding-top: 4rem;
+      padding-bottom: 4rem;
+      padding-left: 1rem;
+      padding-right: 1rem;
+      text-align: center;
+      margin-left: auto;
+      margin-right: auto;
+
+      .index-txt-h1 {
+        color: #fff;
+        margin: .67em 0;
+        box-sizing: border-box;
+        line-height: 1.25;
+        font-size: 5rem;
+        font-family: Poppins, sans-serif;
+        font-weight: 600;
+      }
+
+      .index-txt-cont {
+        font-family: 'Arimo', sans-serif;
+        color: #fff;
+        text-align: center;
+        box-sizing: border-box;
+        line-height: 1.5;
+        max-width: 32rem;
+        margin-left: auto;
+        margin-right: auto;
+      }
+
+      .index-txt-cont-center {
+        margin-block-start: 0.83em;
+        margin-block-end: 0.83em;
+        margin-inline-start: 0;
+        margin-inline-end: 0;
+        color: #fff;
+        font-size: 1.5rem;
+        font-weight: 600;
+      }
+
+      .index-btn-group {
+        text-align: center;
+        box-sizing: border-box;
+        display: flex;
+        flex-wrap: wrap;
+        margin-top: 4rem;
+
+        a {
+          display: block;
+          font-weight: 700;
+          color: #fff;
+          padding-top: 1rem;
+          padding-bottom: 1rem;
+          padding-left: 2rem;
+          padding-right: 2rem;
+          text-decoration: none;
+          margin-left: auto;
+          margin-right: auto;
+          max-width: 16rem;
+          border-bottom: solid 5px;
+          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
+        }
+
+        .a-left {
+          background: #c12127;
+          border-color: #fa8717;
+        }
+
+        .a-right {
+          background: #e81aa8;
+          border-color: #b30ad2;
+        }
+
+        .index-btn {
+          padding-bottom: 1rem;
+          width: 50%;
+          padding-right: 1rem;
+        }
+      }
+    }
+  }
+
+  .index-header {
+    display: flex;
+    justify-content: left;
+    align-items: center;
+
+    .index-logo {
+      height: 50px;
+      pointer-events: none;
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      .index-logo {
+        animation: index-logo-spin infinite 20s linear;
+      }
+    }
+
+    @keyframes index-logo-spin {
+      from {
+        transform: rotate(0deg);
+      }
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+  }
+
+  .index-main {
+
+  }
+
+  .index-footer {
+
+  }
+}
+
+
+

src/Pages/Index/Index.tsx

+/*
+ * Index.tsx
+ * Created by 还有醋v on 2020/11/6.
+ * Copyright © 2020 haiyoucuv. All rights reserved.
+ */
+
+
+import React, {ReactNode} from 'react';
+
+import './Index.less';
+
+import {Button} from "antd";
+
+export default class Index extends React.Component<any> {
+
+    public state: any = {}
+
+    constructor(props: any, context: any) {
+        super(props, context);
+    }
+
+    public componentDidMount(): void {
+
+    }
+
+    public componentWillUnmount(): void {
+
+    }
+
+    public render(): ReactNode {
+        return (
+            <div className='index'>
+                <div className='index-bg'>
+                    <div className="index-txt">
+                        <h1 className="index-txt-h1">
+                            Build amazing things
+                        </h1>
+
+                        <div className="index-txt-cont">
+                            <div>
+                                We're npm, Inc., the company behind Node package manager, the npm
+                                Registry, and npm CLI. We offer those to the community for free, but
+                                our day job is building and selling useful tools for developers like you.
+                            </div>
+
+                            <h2 className="index-txt-cont-center">
+                                Take your JavaScript development up a notch
+                            </h2>
+
+                            <div>
+                                Get started today for free, or step up to npm Pro to enjoy a premium
+                                JavaScript development experience, with features like private packages.
+                            </div>
+
+                            <div className="index-btn-group">
+                                <div className="index-btn">
+                                    <a href="/signup"
+                                       className="a-left">
+                                        Sign up for free
+                                    </a>
+                                </div>
+
+                                <div className="index-btn">
+                                    <a href="/products/pro"
+                                       className="a-right">
+                                        Learn about Pro
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
\ No newline at end of file

src/index.tsx

 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.less';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
@@ -9,6 +8,7 @@ ReactDOM.render(
     document.getElementById('root')
 );
 
+
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals