Skip to content

S
spark-packages-web-platform
Commit ea75a93a authored by qiuxu's avatar qiuxu
Browse files
Options

fk

parent c0c660e1
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 476 additions and 3506 deletions
.idea/misc.xml
View file @ ea75a93a
...@@ -3,4 +3,7 @@ ...@@ -3,4 +3,7 @@
<component name="JavaScriptSettings"> <component name="JavaScriptSettings">
<option name="languageLevel" value="JSX" /> <option name="languageLevel" value="JSX" />
</component> </component>
<component name="ProjectPlainTextFileTypeManager">
<file url="file://$PROJECT_DIR$/src/Router.tsx" />
</component>
</project> </project>
\ No newline at end of file
aaa.html deleted 100644 → 0
View file @ c0c660e1
This source diff could not be displayed because it is too large. You can view the blob instead.
aaa.js deleted 100644 → 0
View file @ c0c660e1
This diff is collapsed.
aaa.json deleted 100644 → 0
View file @ c0c660e1
[
{
"images": [
{
"src": "https://i0.hdslb.com/bfs/vc/8e084d67aa18ed9c42dce043e06e16b79cbb50ef.png"
}
],
"initial": {
"scale": 1,
"blur": 4
},
"offset": {
"blur": 4
},
"offsetCurve": {
"blur": [
0,
0,
1,
1
]
}
},
{
"images": [
{
"src": "https://i0.hdslb.com/bfs/vc/082e39ef757826401ef82da818310d42e05bc2de.png",
"duration": 5000
},
{
"src": "https://i0.hdslb.com/bfs/vc/ddad7c909e4c2cf933473e971373d825e6f06519.png",
"duration": 60
},
{
"src": "https://i0.hdslb.com/bfs/vc/173eafe211b4671e5aff059a1834f3e4579c7a5d.png",
"duration": 200
},
{
"src": "https://i0.hdslb.com/bfs/vc/f1892bc119b722c3cda5b26269c292a90a9f5f06.png",
"duration": 60
}
],
"initial": {
"scale": 0.6,
"blur": 0
},
"offset": {
"translate": [
15,
0
],
"blur": 10
},
"offsetCurve": {
"blur": [
0.3,
0.7,
0.5,
0.5
]
}
},
{
"images": [
{
"src": "https://i0.hdslb.com/bfs/vc/dbd5c17c4315714de9e4ee119694d2e9efaf9639.png"
}
],
"initial": {
"scale": 1,
"translate": [
-50,
0
],
"blur": 1
},
"offset": {
"translate": [
30,
0
],
"blur": -5
},
"offsetCurve": {
"blur": [
0.25,
1,
1,
0
]
}
},
{
"images": [
{
"src": "https://i0.hdslb.com/bfs/vc/cd9be0a2716adbae85fd899259381c4b2c2893c7.png"
}
],
"initial": {
"scale": 0.6,
"translate": [
0,
7
],
"blur": 4
},
"offset": {
"translate": [
60,
0
],
"blur": -10
},
"offsetCurve": {
"blur": [
0.4,
1,
1,
0
]
}
},
{
"images": [
{
"src": "https://i0.hdslb.com/bfs/vc/88537437a7916ecde847fa46652b44fbd3cbbb06.png"
}
],
"initial": {
"scale": 0.6,
"translate": [
0,
-3
],
"blur": 5
},
"offset": {
"translate": [
130,
0
],
"blur": -10
},
"offsetCurve": {
"blur": [
0.5,
1,
1,
0
]
}
},
{
"images": [
{
"src": "https://i0.hdslb.com/bfs/vc/37d9a93baa55870506a6f3e6308e7a0c386b97c7.png"
}
],
"initial": {
"scale": 0.65,
"blur": 6
},
"offset": {
"translate": [
150,
0
],
"blur": -6
},
"offsetCurve": {}
}
]
\ No newline at end of file
package-lock.json
View file @ ea75a93a
...@@ -2134,6 +2134,11 @@ ...@@ -2134,6 +2134,11 @@
} }
} }
}, },
"@types/history": {
"version": "4.7.8",
"resolved": "https://registry.npm.taobao.org/@types/history/download/@types/history-4.7.8.tgz?cache=0&sync_timestamp=1600295937543&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fhistory%2Fdownload%2F%40types%2Fhistory-4.7.8.tgz",
"integrity": "sha1-STSDh5gwdXBf6PTgL7Z/farsSTQ="
},
"@types/html-minifier-terser": { "@types/html-minifier-terser": {
"version": "5.1.1", "version": "5.1.1",
"resolved": "https://registry.npm.taobao.org/@types/html-minifier-terser/download/@types/html-minifier-terser-5.1.1.tgz?cache=0&sync_timestamp=1600889078076&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fhtml-minifier-terser%2Fdownload%2F%40types%2Fhtml-minifier-terser-5.1.1.tgz", "resolved": "https://registry.npm.taobao.org/@types/html-minifier-terser/download/@types/html-minifier-terser-5.1.1.tgz?cache=0&sync_timestamp=1600889078076&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fhtml-minifier-terser%2Fdownload%2F%40types%2Fhtml-minifier-terser-5.1.1.tgz",
...@@ -2219,6 +2224,47 @@ ...@@ -2219,6 +2224,47 @@
} }
} }
}, },
"@types/react-router": {
"version": "5.1.8",
"resolved": "https://registry.npm.taobao.org/@types/react-router/download/@types/react-router-5.1.8.tgz",
"integrity": "sha1-RhTlunVZZXQ44Xdmu5Xvbtasw/o=",
"requires": {
"@types/history": "*",
"@types/react": "*"
},
"dependencies": {
"@types/react": {
"version": "16.9.56",
"resolved": "https://registry.npm.taobao.org/@types/react/download/@types/react-16.9.56.tgz?cache=0&sync_timestamp=1604651667761&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Freact%2Fdownload%2F%40types%2Freact-16.9.56.tgz",
"integrity": "sha1-6iWEe1PFvsBkkzCV/DZrFGLirfA=",
"requires": {
"@types/prop-types": "*",
"csstype": "^3.0.2"
}
}
}
},
"@types/react-router-dom": {
"version": "5.1.6",
"resolved": "https://registry.npm.taobao.org/@types/react-router-dom/download/@types/react-router-dom-5.1.6.tgz?cache=0&sync_timestamp=1601999494005&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Freact-router-dom%2Fdownload%2F%40types%2Freact-router-dom-5.1.6.tgz",
"integrity": "sha1-B7FOerGJOoN8hWVjSWDcOYVksfs=",
"requires": {
"@types/history": "*",
"@types/react": "*",
"@types/react-router": "*"
},
"dependencies": {
"@types/react": {
"version": "16.9.56",
"resolved": "https://registry.npm.taobao.org/@types/react/download/@types/react-16.9.56.tgz?cache=0&sync_timestamp=1604651667761&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Freact%2Fdownload%2F%40types%2Freact-16.9.56.tgz",
"integrity": "sha1-6iWEe1PFvsBkkzCV/DZrFGLirfA=",
"requires": {
"@types/prop-types": "*",
"csstype": "^3.0.2"
}
}
}
},
"@types/resolve": { "@types/resolve": {
"version": "0.0.8", "version": "0.0.8",
"resolved": "https://registry.npm.taobao.org/@types/resolve/download/@types/resolve-0.0.8.tgz", "resolved": "https://registry.npm.taobao.org/@types/resolve/download/@types/resolve-0.0.8.tgz",
......
public/index.html
View file @ ea75a93a
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="zh">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
......
src/App.less
View file @ ea75a93a
...@@ -5,21 +5,6 @@ ...@@ -5,21 +5,6 @@
background-color: #fff; background-color: #fff;
text-align: center; text-align: center;
.header {
position: sticky;
top: 0;
left: 0;
height: 175px;
width: 100%;
z-index: 2;
.search {
display: block;
opacity: 1;
z-index: 3;
}
}
.main { .main {
background-color: #fff; background-color: #fff;
} }
......
src/App.tsx
View file @ ea75a93a
import React, {ReactInstance, ReactNode} from 'react'; import React, {Component, ReactNode} from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import './App.less'; import './App.less';
...@@ -11,45 +11,52 @@ import AppSearch from "./Component/AppSearch/AppSearch"; ...@@ -11,45 +11,52 @@ import AppSearch from "./Component/AppSearch/AppSearch";
import {VerticalAlignTopOutlined} from "@ant-design/icons"; import {VerticalAlignTopOutlined} from "@ant-design/icons";
import Details from "./Pages/Details/Details"; import Details from "./Pages/Details/Details";
import Index from "./Pages/Index/Index"; import Index from "./Pages/Index/Index";
import {Tools} from "./Tools";
import BasicRoute from "./BasicRoute";
import {HashRouter, Route, Switch} from "react-router-dom";
class App extends React.Component { export enum PAGE {
INDEX = 'index',
SEARCH = 'search',
DETAILS = 'details',
}
export let changePage = function (page: PAGE, data: any = null) {
}
class App extends HashRouter {
public state: any = {
page: PAGE.INDEX,
pageData: null,
}
public componentDidMount(): void { public componentDidMount(): void {
this.setHeaderEffect(); this.setHeaderEffect();
} }
private setHeaderEffect(){ private setHeaderEffect() {
const searchDiv = ReactDOM.findDOMNode(this.refs.searchDiv) as HTMLDivElement;
document.addEventListener('scroll', (e) => {
let scrolled = document.documentElement.scrollTop / (searchDiv.clientHeight + 30);
searchDiv.style.opacity = (1 - scrolled) + '';
searchDiv.style.zIndex = (scrolled >= 1) ? '-1' : '2'; // 不用display，否则会导致页面高度改变
});
} }
public render(): ReactNode { public render(): ReactNode {
return ( return (
<div> <div>
{/* app */}
<div className='app'> <div className='app'>
<div className='header' ref='searchDiv'> {/* main */}
<AppHeader/>
<div className='search'>
<AppSearch/>
</div>
</div>
<div className='main'> <div className='main'>
<Index/> <BasicRoute ref='route'/>
{/*<SearchList/>*/}
{/*<Details/>*/}
</div> </div>
{/* footer */}
<div className='footer'> <div className='footer'>
<AppFooter/> <AppFooter/>
</div> </div>
</div> </div>
{/* BackTop */}
<BackTop <BackTop
visibilityHeight={100} visibilityHeight={100}
> >
......
src/BasicRoute.tsx 0 → 100644
View file @ ea75a93a
import React, { Component } from 'react';
import {HashRouter, Route, Switch, Redirect} from 'react-router-dom';
import Index from "./Pages/Index/Index";
import SearchList from "./Element/SearchLIst/SearchList";
import Details from "./Pages/Details/Details";
class BasicRoute extends Component {
render() {
return (
<HashRouter>
<Switch>
<Route exact path="/" component={Index}/>
<Route exact path="seacrh" component={SearchList}/>
<Route exact path="details" component={Details}/>
</Switch>
</HashRouter>
);
}
}
export default BasicRoute;
src/Component/AppSearch/AppSearch.tsx
View file @ ea75a93a
...@@ -5,41 +5,80 @@ ...@@ -5,41 +5,80 @@
*/ */
import React, {ReactNode} from 'react'; import React, {ChangeEvent, ReactNode} from 'react';
import './AppSearch.less'; import './AppSearch.less';
import {Button, Input} from 'antd'; import {Button, Input} from 'antd';
import logo from "../../logo.svg"; import logo from "../../logo.svg";
import {SearchOutlined} from '@ant-design/icons'; import {SearchOutlined} from '@ant-design/icons';
import {Tools} from "../../Tools";
export default class AppSearch extends React.Component<any> { export default class AppSearch extends React.Component<any> {
public state: any = {} public state: any = {}
public value: string = '';
private input: Input | undefined;
constructor(props: any, context: any) { constructor(props: any, context: any) {
super(props, context); super(props, context);
} }
public componentDidMount(): void { public componentDidMount(): void {
this.input = this.refs.input as Input;
} }
public componentWillUnmount(): void { public componentWillUnmount(): void {
} }
/**
* 点击搜索按钮查询包
*/
private packageQuery = async () => {
console.log(this.input);
const keyword = this.input!.state.value;
const res = await Tools.packageQuery({
keyword,
});
// @ts-ignore
this.props.history.push('/search');
}
private async updateTempList() {
const res = await Tools.packageQuery();
console.log(res);
}
private onInputChange = (event: ChangeEvent<HTMLInputElement>) => {
this.value = event.target.value;
}
public render(): ReactNode { public render(): ReactNode {
const {packageQuery} = this.props;
return ( return (
<div className='app-search'> <div className='app-search'>
<div className="app-search-cont"> <div className="app-search-cont">
<img src={logo} className="app-search-logo" alt="logo"/> <img src={logo} className="app-search-logo" alt="logo"/>
<div className='app-search-div'> <div className='app-search-div'>
<Input className='app-search-input' size="large" placeholder="Search packages" prefix={ <Input className='app-search-input'
<SearchOutlined className='app-search-input-icon'/> ref='input'
}/> size="large"
<Button className='app-search-btn' type="primary">Search</Button> onChange={this.onInputChange}
placeholder="Search packages"
prefix={
<SearchOutlined className='app-search-input-icon'/>
}
/>
<Button
onClick={this.packageQuery}
className='app-search-btn'
type="primary"
>
Search
</Button>
</div> </div>
</div> </div>
......
src/Component/SearchListItem/SearchListItem.tsx
View file @ ea75a93a
...@@ -26,17 +26,18 @@ export default class SearchListItem extends React.Component<any> { ...@@ -26,17 +26,18 @@ export default class SearchListItem extends React.Component<any> {
} }
public render(): ReactNode { public render(): ReactNode {
const {title, link, description, userNick, date} = this.props.data; const {id, name, type, remark, versions, gmt_create, gmt_modified, link, userNick} = this.props.data;
console.log(this.props.data);
return ( return (
<div className='search-item'> <div className='search-item'>
<div className='search-item-left'> <div className='search-item-left'>
<a href={link}><h3 className='search-item-title'>{title}</h3></a> <a href={link}><h3 className='search-item-title'>{name}</h3></a>
<p className='search-item-description'>{description}</p> <p className='search-item-description'>{remark}</p>
<div className='search-item-info'> <div className='search-item-info'>
<img className='search-item-info-avatar' <img className='search-item-info-avatar'
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/> src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/>
<div className='search-item-info-user'>{userNick}</div> <div className='search-item-info-user'>{userNick}</div>
<div className='search-item-info-date'>{date}</div> <div className='search-item-info-date'>{gmt_modified}</div>
</div> </div>
</div> </div>
</div> </div>
......
src/Element/AppHeader/AppHeader.less
View file @ ea75a93a
...@@ -4,28 +4,43 @@ ...@@ -4,28 +4,43 @@
* Copyright © 2020 haiyoucuv. All rights reserved. * Copyright © 2020 haiyoucuv. All rights reserved.
*/ */
.app-header { .header {
display: flex; position: sticky;
align-items: center; top: 0;
padding: 1em 3em; left: 0;
height: 175px;
width: 100%;
z-index: 2;
background-color: #fff; .search {
display: block;
opacity: 1;
z-index: 3;
}
.app-header {
display: flex;
align-items: center;
padding: 1em 3em;
background-color: #fff;
//position: sticky; //position: sticky;
//top: 0; //top: 0;
//left: 0; //left: 0;
//height: auto; //height: auto;
//width: 100%; //width: 100%;
border-color: rgba(0,0,0,.2); border-color: rgba(0,0,0,.2);
box-shadow: 0 4px 13px -3px rgba(0, 0, 0, 0.10196); box-shadow: 0 4px 13px -3px rgba(0, 0, 0, 0.10196);
.app-logo { .app-logo {
height: 50px; height: 50px;
&:hover { &:hover {
animation: spin 1s; animation: spin 1s;
}
} }
}
} }
\ No newline at end of file }
src/Element/AppHeader/AppHeader.tsx
View file @ ea75a93a
...@@ -10,6 +10,8 @@ import logo from "../../logo.svg"; ...@@ -10,6 +10,8 @@ import logo from "../../logo.svg";
import {Menu} from "antd"; import {Menu} from "antd";
import './AppHeader.less'; import './AppHeader.less';
import AppSearch from "../../Component/AppSearch/AppSearch";
import ReactDOM from "react-dom";
export default class AppHeader extends React.Component<any> { export default class AppHeader extends React.Component<any> {
...@@ -20,7 +22,12 @@ export default class AppHeader extends React.Component<any> { ...@@ -20,7 +22,12 @@ export default class AppHeader extends React.Component<any> {
} }
public componentDidMount(): void { public componentDidMount(): void {
const searchDiv = ReactDOM.findDOMNode(this.refs.searchDiv) as HTMLDivElement;
document.addEventListener('scroll', (e) => {
let scrolled = document.documentElement.scrollTop / (searchDiv.clientHeight + 30);
searchDiv.style.opacity = (1 - scrolled) + '';
searchDiv.style.zIndex = (scrolled >= 1) ? '-1' : '2'; // 不用display，否则会导致页面高度改变
});
} }
public componentWillUnmount(): void { public componentWillUnmount(): void {
...@@ -28,14 +35,24 @@ export default class AppHeader extends React.Component<any> { ...@@ -28,14 +35,24 @@ export default class AppHeader extends React.Component<any> {
} }
public render(): ReactNode { public render(): ReactNode {
const {history} = this.props;
return ( return (
<div className='app-header'> <div className='header' ref='searchDiv'>
<img src={logo} className="app-logo" alt="logo"/> <div className='app-header'>
<Menu theme="light" mode="horizontal" defaultSelectedKeys={['1']}> <img src={logo} className="app-logo" alt="logo"/>
<Menu.Item key="1">nav 1</Menu.Item> <Menu theme="light" mode="horizontal" defaultSelectedKeys={['1']}>
<Menu.Item key="2">nav 2</Menu.Item> <Menu.Item key="1">nav 1</Menu.Item>
<Menu.Item key="3">nav 3</Menu.Item> <Menu.Item key="2">nav 2</Menu.Item>
</Menu> <Menu.Item key="3">nav 3</Menu.Item>
</Menu>
</div>
<div className='search'>
<AppSearch
history={history}
ref={'appSearch'}
packageQuery={'this.packageQuery'}
/>
</div>
</div> </div>
); );
} }
......
src/Element/SearchLIst/SearchList.tsx
View file @ ea75a93a
...@@ -28,27 +28,13 @@ export default class SearchList extends React.Component<any> { ...@@ -28,27 +28,13 @@ export default class SearchList extends React.Component<any> {
} }
public componentDidMount(): void { public componentDidMount(): void {
for (let i = 0; i < 500; i++) { const {data} = this.props;
this.totalData.push({ this.totalData = data.data.packages;
title: `Ant Design Title ${i}`,
userNick: `userNick${i}`,
date: 'publish 2020年10月31日',
link: 'https://www.baidu.com/',
description: `Ant Design, a design language for background applications, is refined by Ant UED Team
Ant Design, a design language for background applications, is refined by Ant UED Team
Ant Design, a design language for background applications, is refined by Ant UED Team
Ant Design, a design language for background applications, is refined by Ant UED Team
Ant Design, a design language for background applications, is refined by Ant UED Team
Ant Design, a design language for background applications, is refined by Ant UED Team
Ant Design, a design language for background applications, is refined by Ant UED Team
`,
});
}
this.setState({ this.setState({
total: this.totalData.length, total: this.totalData.length,
}); });
this.showPage(1); this.showPage(1);
} }
public componentWillUnmount(): void { public componentWillUnmount(): void {
......
src/Pages/Index/Index.less
View file @ ea75a93a
...@@ -10,7 +10,6 @@ ...@@ -10,7 +10,6 @@
background-color: #000; background-color: #000;
.index-bg { .index-bg {
--percentage: 0; --percentage: 0;
position: sticky; position: sticky;
top: 0; top: 0;
...@@ -18,10 +17,8 @@ ...@@ -18,10 +17,8 @@
//background-image: linear-gradient(75deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 33.33%, rgba(255, 255, 255, 0) 66.67%, rgba(255, 255, 255, 0) 100%); //background-image: linear-gradient(75deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 33.33%, rgba(255, 255, 255, 0) 66.67%, rgba(255, 255, 255, 0) 100%);
background-size: 300% 100%; background-size: 300% 100%;
background-position-x: calc(100% - var(--percentage)); background-position-x: calc(100% - var(--percentage));
background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
//height: 796px;
background-image: url("https://static.npmjs.com/attachments/ck3uwvv67mydydr74ea00ip4j-bg-stripes.png"); background-image: url("https://static.npmjs.com/attachments/ck3uwvv67mydydr74ea00ip4j-bg-stripes.png");
//background-position: center center; //background-position: center center;
//background-repeat: no-repeat; //background-repeat: no-repeat;
...@@ -39,6 +36,12 @@ ...@@ -39,6 +36,12 @@
.index-txt-h1 { .index-txt-h1 {
color: transparent; color: transparent;
transition: .5s;
&:hover {
color: #ffffffaa;
}
margin: .67em 0; margin: .67em 0;
box-sizing: border-box; box-sizing: border-box;
line-height: 1.25; line-height: 1.25;
...@@ -60,6 +63,14 @@ ...@@ -60,6 +63,14 @@
margin-right: auto; margin-right: auto;
} }
.index-txt-cont > div {
transition: .5s;
&:hover {
color: #ffffffaa;
}
}
.index-txt-cont-center { .index-txt-cont-center {
color: transparent; color: transparent;
...@@ -69,6 +80,12 @@ ...@@ -69,6 +80,12 @@
margin-inline-end: 0; margin-inline-end: 0;
font-size: 1.7rem; font-size: 1.7rem;
font-weight: 600; font-weight: 600;
transition: .5s;
&:hover {
color: #ffffffaa;
}
} }
.index-btn { .index-btn {
...@@ -85,6 +102,12 @@ ...@@ -85,6 +102,12 @@
text-decoration: none; text-decoration: none;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
transition: .5s;
&:hover {
color: #ffffffaa;
}
} }
& > a > div { & > a > div {
......
src/Pages/Index/Index.tsx
View file @ ea75a93a
...@@ -9,6 +9,7 @@ import React, {ReactNode} from 'react'; ...@@ -9,6 +9,7 @@ import React, {ReactNode} from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import './Index.less'; import './Index.less';
import AppHeader from "../../Element/AppHeader/AppHeader";
export default class Index extends React.Component<any> { export default class Index extends React.Component<any> {
...@@ -21,10 +22,10 @@ export default class Index extends React.Component<any> { ...@@ -21,10 +22,10 @@ export default class Index extends React.Component<any> {
public componentDidMount(): void { public componentDidMount(): void {
const indexTxt = ReactDOM.findDOMNode(this.refs.indexTxt) as HTMLDivElement; const indexTxt = ReactDOM.findDOMNode(this.refs.indexTxt) as HTMLDivElement;
document.addEventListener('scroll', (e) => { indexTxt.style.setProperty('--percentage', `${0}%`);
let scrolled = document.documentElement.scrollTop / (document.documentElement.scrollHeight - document.documentElement.clientHeight) document.addEventListener('scroll', () => {
let scrolled = document.documentElement.scrollTop / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
indexTxt.style.setProperty('--percentage', `${scrolled * 100}%`) indexTxt.style.setProperty('--percentage', `${scrolled * 100}%`);
}) })
} }
...@@ -33,9 +34,17 @@ export default class Index extends React.Component<any> { ...@@ -33,9 +34,17 @@ export default class Index extends React.Component<any> {
} }
public render(): ReactNode { public render(): ReactNode {
const {history} = this.props;
return ( return (
<div className='index'> <div className='index'>
<div className='index-bg' ref='indexTxt'>
<AppHeader
ref='searchDiv'
history={history}
/>
<div className='index-bg' ref='indexTxt'>
<div className="index-txt"> <div className="index-txt">
<h1 className="index-txt-h1"> <h1 className="index-txt-h1">
Build amazing things Build amazing things
...@@ -58,7 +67,7 @@ export default class Index extends React.Component<any> { ...@@ -58,7 +67,7 @@ export default class Index extends React.Component<any> {
</div> </div>
<div className="index-btn"> <div className="index-btn">
<a href="/start"> <a href="#">
Let's Get To Start Let's Get To Start
<div>____________________</div> <div>____________________</div>
</a> </a>
......
src/Tools.ts 0 → 100644
View file @ ea75a93a
/*
* Tools.ts
* Created by 还有醋v on 2020/11/10.
* Copyright © 2020 haiyoucuv. All rights reserved.
*/
import Request from "./request/Request";
import {apiList} from "./request/apiList";
export class Tools {
constructor() {
}
public static async packageQuery(
params: {
keyword?: string,
searchType?: 'id' | 'name' | 'remark',
pkgType?: 1 | 2 | 3,
pageNum?: string,
pageSize?: string,
} = {}
) {
const res = await Request.api(apiList.packageQuery, params);
if (!res) {
return null;
}
return res;
}
}
\ No newline at end of file
src/request/Request.ts 0 → 100644
View file @ ea75a93a
/*
* Request.ts
* Created by 还有醋v on 2020/11/10.
* Copyright © 2020 haiyoucuv. All rights reserved.
*/
import {AxiosResponse} from "axios";
const axios = require('axios');
export default class Request {
constructor() {
}
/**
* 请求个接口
* @param url
* @param params
* @param type
*/
public static api(
url: string,
params: any = {},
type: 'get' | 'post' = 'get'
) {
return new Promise((resolve, reject) => {
Request[type](url, params)
.then((res) => {
resolve(res.data);
})
.catch((err) => {
resolve(null);
});
})
}
public static get<T = any, R = AxiosResponse<T>>(
url: string,
params: any = {}
): Promise<R> {
return axios.get(url, {
params: {
__timestamp__: Date.now(),
...params
}
});
}
public static post<T = any, R = AxiosResponse<T>>(
url: string,
params: any = {}
): Promise<R> {
return axios.post(url, {
__timestamp__: Date.now(),
...params
});
}
// public static file(
// url: string,
// params: any = {},
// ) {
//
// }
}
\ No newline at end of file
src/request/apiList.ts 0 → 100644
View file @ ea75a93a
/*
* apiList.ts
* Created by 还有醋v on 2020/11/10.
* Copyright © 2020 haiyoucuv. All rights reserved.
*/
export const apiList = {
packageQuery: 'http://spark.duiba.com.cn/package/query'
}
\ No newline at end of file
yarn.lock
View file @ ea75a93a
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment