refactor(web): base content and pilltab

pull/13/head
moonrailgun 4 years ago
parent 7055b1f195
commit 0623753ac3

@ -0,0 +1,18 @@
root = true
[*]
charset = utf-8
end_of_line = lf
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[.gitconfig]
indent_style = tab
[Makefile]
indent_style = tab
[*.md]
trim_trailing_whitespace = false

@ -1,12 +1,14 @@
import { request } from '../api/request';
export interface UserLoginInfo {
export interface UserBaseInfo {
_id: string;
email: string;
nickname: string;
password: string;
token: string;
avatar: string | null;
}
export interface UserLoginInfo extends UserBaseInfo {
token: string;
createdAt: string;
}

@ -1,11 +1,12 @@
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import type { UserLoginInfo } from '../../model/user';
import type { UserBaseInfo, UserLoginInfo } from '../../model/user';
interface UserState {
info: UserLoginInfo | null;
friends: UserBaseInfo[];
}
const initialState: UserState = { info: null };
const initialState: UserState = { info: null, friends: [] };
const userSlice = createSlice({
name: 'user',

@ -0,0 +1,34 @@
.pill-tabs.ant-tabs.ant-tabs-card {
// color: ${(props) => props.theme.color.textNormal};
@apply text-gray-100;
.ant-tabs-nav {
@apply px-2 py-3 m-0 text-base;
&::before {
@apply border-0;
}
.ant-tabs-tab {
border: 0;
margin: 2px;
padding: 2px 8px;
@apply text-gray-200 bg-opacity-0 bg-white;
&.ant-tabs-tab-active,
&:hover,
&:active {
@apply rounded bg-opacity-20;
.ant-tabs-tab-btn {
@apply text-white;
}
}
}
}
.ant-tabs-content-holder {
overflow-x: hidden;
overflow-y: auto;
}
}

@ -0,0 +1,15 @@
import { Tabs } from 'antd';
import React from 'react';
import './PillTabs.less';
export const PillTabs = React.memo((props) => {
return (
<Tabs className="pill-tabs" type="card" animated={true}>
{props.children}
</Tabs>
);
});
PillTabs.displayName = 'PillTabs';
export const PillTabPane = Tabs.TabPane;

@ -0,0 +1,24 @@
import React from 'react';
import { PillTabs, PillTabPane } from '../../components/PillTabs';
import { useAppSelector } from '../../hooks/useAppSelector';
/**
*
*/
export const Content: React.FC = React.memo(() => {
const friends = useAppSelector((state) => state.user.friends);
return (
<div className="flex-auto bg-gray-700">
<PillTabs>
<PillTabPane tab={'全部'} key="1">
<div className="py-2.5 px-5">
<div></div>
<div>{JSON.stringify(friends)}</div>
</div>
</PillTabPane>
</PillTabs>
</div>
);
});
Content.displayName = 'Content';

@ -1,4 +1,5 @@
import React from 'react';
import { Content } from './Content';
import { Navbar } from './Navbar';
import { MainProvider } from './Provider';
import { Sidebar } from './Sidebar';
@ -11,7 +12,7 @@ export const MainRoute: React.FC = React.memo(() => {
<Sidebar />
<div className="flex-auto bg-gray-700">{/* Main Content */}</div>
<Content />
</MainProvider>
</div>
);

Loading…
Cancel
Save