chenxuan/react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

no message

Browse Source
This commit is contained in:
chenxuan
2024-04-22 13:42:58 +08:00
parent 57cb484781
commit 3fbd99d130
7 changed files with 13569 additions and 7229 deletions
Download Patch File Download Diff File Expand all files Collapse all files
chenxuan1/package-lock.json
Generated
+10268 -4090
View File
File diff suppressed because it is too large Load Diff
chenxuan1/src/pages/github/dist/style.css
Vendored
+53
View File
@@ -0,0 +1,53 @@
.github {
box-sizing: border-box;
width: 100%;
padding-top: 24px !important;
}
.github .github-search {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.github .github-list {
box-sizing: border-box;
width: 1200px;
margin: 0 auto;
height: calc(100vh - 150px);
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
padding: 36px 100px 0 100px;
}
.github .github-list .item {
width: 72px;
text-align: center;
margin: 0 24px;
}
.github .github-list .item .img {
box-sizing: border-box;
width: 72px;
height: 72px;
border: 1px solid #eee;
border-radius: 50%;
overflow: hidden;
}
.github .github-list .item .name {
width: 100%;
margin-top: 12px;
font-size: 14px;
color: #333;
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
.github .github-list_ {
width: 100%;
height: calc(100vh - 150px);
display: flex;
justify-content: center;
align-items: center;
}
chenxuan1/src/pages/github/list/index.jsx
+7 -6
View File
@@ -1,5 +1,6 @@
import React from 'react';
import PubSub from 'pubsub-js'
import { Empty } from 'antd';
class List extends React.Component {
state={
list:[],
@@ -13,18 +14,18 @@ class List extends React.Component {
}
render() {
return (
<div className='github-list'>
<div className={this.state.list.length>0 ? 'github-list':'github-list_' }>
{
this.state.list.map((i)=>{
this.state.list.length>0 && this.state.list.map((i)=>{
return (
<a key={i.id} className='item' href='i.html_url'>
<img alt="" src={i.avatar_url}/>
<li>{i.login}</li>
<a target='blank_' className='item' href={i.html_url} key={i.id} >
<img className='img' alt="" src={i.avatar_url}/>
<li className='name'>{i.login}</li>
</a>
)
})
}
{this.state.isLoading && <Empty description="暂无用户数据,请输入关键字并搜索!" />}
</div>
);
}
chenxuan1/src/pages/github/search/index.jsx
+12 -4
View File
@@ -8,15 +8,23 @@ class Search extends React.Component {
state = {
list: []
};
go = async (keyword) => {
componentDidMount(){
this.go()
}
go = async (keyword="chen") => {
PubSub.publish('github',{isLoading:true})
let a=await axios.get(`search/users?q=${keyword}`)
PubSub.publish('github',{isLoading:false,list:a.data.items})
await axios.get(`search/users?q=${keyword}`)
.then((res)=>{
PubSub.publish('github',{isLoading:false,list:res.data.items})
})
.catch((err)=>{
PubSub.publish('github',{isLoading:false,list:[]})
})
}
render(){
return (
<div className="github-search">
<SearchInput placeholder="请输入关键字" onSearch={this.go} style={{width: 400}}/>
<SearchInput size="large" placeholder="请输入关键字" onSearch={this.go} style={{width: 400}}/>
</div>
)
}
chenxuan1/src/pages/github/style.css
+59
View File
@@ -0,0 +1,59 @@
.github {
box-sizing: border-box;
width: 100%;
padding-top: 24px !important;
}
.github .github-search {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.github .github-list {
box-sizing: border-box;
width: 1200px;
margin: 0 auto;
height: calc(100vh - 150px);
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
padding: 36px 100px 0 100px;
}
.github .github-list .item {
width: 72px;
text-align: center;
margin: 0 24px;
}
.github .github-list .item .img {
box-sizing: border-box;
width: 72px;
height: 72px;
border: 1px solid #eee;
border-radius: 50%;
overflow: hidden;
}
.github .github-list .item .name {
width: 100%;
margin-top: 12px;
font-size: 14px;
color: #333;
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
.github .github-list_ {
width: 100%;
height: calc(100vh - 150px);
display: flex;
justify-content: center;
align-items: center;
}
chenxuan1/src/pages/github/style.min.css
Vendored
+1
View File
@@ -0,0 +1 @@
.github{box-sizing:border-box;width:100%;padding-top:24px !important}.github .github-search{width:100%;display:flex;justify-content:center;align-items:center}.github .github-list{box-sizing:border-box;width:1200px;margin:0 auto;height:calc(100vh - 150px);display:flex;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;padding:36px 100px 0 100px}.github .github-list .item{width:72px;text-align:center;margin:0 24px}.github .github-list .item .img{box-sizing:border-box;width:72px;height:72px;border:1px solid #eee;border-radius:50%;overflow:hidden}.github .github-list .item .name{width:100%;margin-top:12px;font-size:14px;color:#333;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.github .github-list_{width:100%;height:calc(100vh - 150px);display:flex;justify-content:center;align-items:center}
chenxuan1/src/pages/github/style.scss
+40
View File
@@ -9,6 +9,46 @@
align-items: center;
}
.github-list{
box-sizing: border-box;
width: 1200px;
margin: 0 auto;
height: calc(100vh - 150px);
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
padding: 36px 100px 0 100px;
.item{
width: 72px;
text-align: center;
margin: 0 24px;
.img{
box-sizing: border-box;
width: 72px;
height: 72px;
border: 1px solid #eee;
border-radius: 50%;
overflow: hidden;
}
.name{
width: 100%;
margin-top: 12px;
font-size: 14px;
color: #333;
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
}
}
.github-list_{
width: 100%;
height: calc(100vh - 150px);
display: flex;
justify-content: center;
align-items: center;
}
}