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 @@
<component name="JavaScriptSettings">
<option name="languageLevel" value="JSX" />
</component>
<component name="ProjectPlainTextFileTypeManager">
<file url="file://$PROJECT_DIR$/src/Router.tsx" />
</component>
</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 @@
}
}
},
"@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": {
"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",
......@@ -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": {
"version": "0.0.8",
"resolved": "https://registry.npm.taobao.org/@types/resolve/download/@types/resolve-0.0.8.tgz",
......
public/index.html
View file @ ea75a93a
<!DOCTYPE html>
<html lang="en">
<html lang="zh">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
......
src/App.less
View file @ ea75a93a
......@@ -5,21 +5,6 @@
background-color: #fff;
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 {
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 './App.less';
......@@ -11,45 +11,52 @@ import AppSearch from "./Component/AppSearch/AppSearch";
import {VerticalAlignTopOutlined} from "@ant-design/icons";
import Details from "./Pages/Details/Details";
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 {
this.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，否则会导致页面高度改变
});
private setHeaderEffect() {
}
public render(): ReactNode {
return (
<div>
{/* app */}
<div className='app'>
<div className='header' ref='searchDiv'>
<AppHeader/>
<div className='search'>
<AppSearch/>
</div>
</div>
{/* main */}
<div className='main'>
<Index/>
{/*<SearchList/>*/}
{/*<Details/>*/}
<BasicRoute ref='route'/>
</div>
{/* footer */}
<div className='footer'>
<AppFooter/>
</div>
</div>
{/* BackTop */}
<BackTop
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 @@
*/
import React, {ReactNode} from 'react';
import React, {ChangeEvent, ReactNode} from 'react';
import './AppSearch.less';
import {Button, Input} from 'antd';
import logo from "../../logo.svg";
import {SearchOutlined} from '@ant-design/icons';
import {Tools} from "../../Tools";
export default class AppSearch extends React.Component<any> {
public state: any = {}
public value: string = '';
private input: Input | undefined;
constructor(props: any, context: any) {
super(props, context);
}
public componentDidMount(): void {
this.input = this.refs.input as Input;
}
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 {
const {packageQuery} = this.props;
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>
<Input className='app-search-input'
ref='input'
size="large"
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>
......
src/Component/SearchListItem/SearchListItem.tsx
View file @ ea75a93a
......@@ -26,17 +26,18 @@ export default class SearchListItem extends React.Component<any> {
}
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 (
<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>
<a href={link}><h3 className='search-item-title'>{name}</h3></a>
<p className='search-item-description'>{remark}</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'>{date}</div>
<div className='search-item-info-date'>{gmt_modified}</div>
</div>
</div>
</div>
......
src/Element/AppHeader/AppHeader.less
View file @ ea75a93a
......@@ -4,28 +4,43 @@
* Copyright © 2020 haiyoucuv. All rights reserved.
*/
.app-header {
display: flex;
align-items: center;
padding: 1em 3em;
.header {
position: sticky;
top: 0;
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;
//top: 0;
//left: 0;
//height: auto;
//width: 100%;
//position: sticky;
//top: 0;
//left: 0;
//height: auto;
//width: 100%;
border-color: rgba(0,0,0,.2);
box-shadow: 0 4px 13px -3px rgba(0, 0, 0, 0.10196);
border-color: rgba(0,0,0,.2);
box-shadow: 0 4px 13px -3px rgba(0, 0, 0, 0.10196);
.app-logo {
height: 50px;
.app-logo {
height: 50px;
&:hover {
animation: spin 1s;
&:hover {
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";
import {Menu} from "antd";
import './AppHeader.less';
import AppSearch from "../../Component/AppSearch/AppSearch";
import ReactDOM from "react-dom";
export default class AppHeader extends React.Component<any> {
......@@ -20,7 +22,12 @@ export default class AppHeader extends React.Component<any> {
}
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 {
......@@ -28,14 +35,24 @@ export default class AppHeader extends React.Component<any> {
}
public render(): ReactNode {
const {history} = this.props;
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 className='header' ref='searchDiv'>
<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>
<div className='search'>
<AppSearch
history={history}
ref={'appSearch'}
packageQuery={'this.packageQuery'}
/>
</div>
</div>
);
}
......
src/Element/SearchLIst/SearchList.tsx
View file @ ea75a93a
......@@ -28,27 +28,13 @@ export default class SearchList extends React.Component<any> {
}
public componentDidMount(): void {
for (let i = 0; i < 500; i++) {
this.totalData.push({
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
`,
});
}
const {data} = this.props;
this.totalData = data.data.packages;
this.setState({
total: this.totalData.length,
});
this.showPage(1);
}
public componentWillUnmount(): void {
......
src/Pages/Index/Index.less
View file @ ea75a93a
......@@ -10,7 +10,6 @@
background-color: #000;
.index-bg {
--percentage: 0;
position: sticky;
top: 0;
......@@ -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-size: 300% 100%;
background-position-x: calc(100% - var(--percentage));
background-clip: text;
-webkit-background-clip: text;
//height: 796px;
background-image: url("https://static.npmjs.com/attachments/ck3uwvv67mydydr74ea00ip4j-bg-stripes.png");
//background-position: center center;
//background-repeat: no-repeat;
......@@ -39,6 +36,12 @@
.index-txt-h1 {
color: transparent;
transition: .5s;
&:hover {
color: #ffffffaa;
}
margin: .67em 0;
box-sizing: border-box;
line-height: 1.25;
......@@ -60,6 +63,14 @@
margin-right: auto;
}
.index-txt-cont > div {
transition: .5s;
&:hover {
color: #ffffffaa;
}
}
.index-txt-cont-center {
color: transparent;
......@@ -69,6 +80,12 @@
margin-inline-end: 0;
font-size: 1.7rem;
font-weight: 600;
transition: .5s;
&:hover {
color: #ffffffaa;
}
}
.index-btn {
......@@ -85,6 +102,12 @@
text-decoration: none;
margin-left: auto;
margin-right: auto;
transition: .5s;
&:hover {
color: #ffffffaa;
}
}
& > a > div {
......
src/Pages/Index/Index.tsx
View file @ ea75a93a
......@@ -9,6 +9,7 @@ import React, {ReactNode} from 'react';
import ReactDOM from 'react-dom';
import './Index.less';
import AppHeader from "../../Element/AppHeader/AppHeader";
export default class Index extends React.Component<any> {
......@@ -21,10 +22,10 @@ export default class Index extends React.Component<any> {
public componentDidMount(): void {
const indexTxt = ReactDOM.findDOMNode(this.refs.indexTxt) as HTMLDivElement;
document.addEventListener('scroll', (e) => {
let scrolled = document.documentElement.scrollTop / (document.documentElement.scrollHeight - document.documentElement.clientHeight)
indexTxt.style.setProperty('--percentage', `${scrolled * 100}%`)
indexTxt.style.setProperty('--percentage', `${0}%`);
document.addEventListener('scroll', () => {
let scrolled = document.documentElement.scrollTop / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
indexTxt.style.setProperty('--percentage', `${scrolled * 100}%`);
})
}
......@@ -33,9 +34,17 @@ export default class Index extends React.Component<any> {
}
public render(): ReactNode {
const {history} = this.props;
return (
<div className='index'>
<div className='index-bg' ref='indexTxt'>
<AppHeader
ref='searchDiv'
history={history}
/>
<div className='index-bg' ref='indexTxt'>
<div className="index-txt">
<h1 className="index-txt-h1">
Build amazing things
......@@ -58,7 +67,7 @@ export default class Index extends React.Component<any> {
</div>
<div className="index-btn">
<a href="/start">
<a href="#">
Let's Get To Start
<div>____________________</div>
</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