mirror of https://github.com/msgbyte/tailchat
refactor(web): base content and pilltab
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
|
@ -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';
|
Loading…
Reference in New Issue