feat: 优化仓位管理页面功能和样式

- 添加卡片和列表视图切换功能
- 移动端支持卡片折叠/展开,默认只显示关键信息
- 历史仓位不显示盈亏和平仓收益
- 优化账户筛选:移除搜索功能,按账户名称排序
- 移动端强制使用卡片视图,隐藏视图切换按钮
- 优化侧边栏布局:固定高度,内容区域可滚动
- 优化当前仓位/历史仓位切换组件样式
- 修复账户筛选全部账户选项不生效的问题
This commit is contained in:
WrBug
2025-11-27 01:13:52 +08:00
parent 389a758c89
commit f53ba1ca49
10 changed files with 1083 additions and 19 deletions
+28 -8
View File
@@ -41,9 +41,9 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
label: '跟单配置'
},
{
key: '/orders',
key: '/positions',
icon: <UnorderedListOutlined />,
label: '订单管理'
label: '仓位管理'
},
{
key: '/statistics',
@@ -108,8 +108,18 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
// 桌面端布局
return (
<AntLayout style={{ minHeight: '100vh' }}>
<Sider width={200} style={{ background: '#001529' }}>
<AntLayout style={{ height: '100vh', overflow: 'hidden' }}>
<Sider
width={200}
style={{
background: '#001529',
height: '100vh',
position: 'fixed',
left: 0,
top: 0,
overflow: 'hidden'
}}
>
<div style={{
height: '64px',
display: 'flex',
@@ -117,7 +127,8 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
justifyContent: 'center',
color: '#fff',
fontSize: '18px',
fontWeight: 'bold'
fontWeight: 'bold',
flexShrink: 0
}}>
Polymarket
</div>
@@ -126,11 +137,20 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
selectedKeys={[location.pathname]}
items={menuItems}
onClick={({ key }) => handleMenuClick(key)}
style={{ height: 'calc(100vh - 64px)', borderRight: 0 }}
style={{
height: 'calc(100vh - 64px)',
borderRight: 0,
overflowY: 'auto'
}}
/>
</Sider>
<AntLayout>
<Content style={{ padding: '24px', background: '#f0f2f5', minHeight: '100vh' }}>
<AntLayout style={{ marginLeft: 200, height: '100vh' }}>
<Content style={{
padding: '24px',
background: '#f0f2f5',
height: '100vh',
overflowY: 'auto'
}}>
{children}
</Content>
</AntLayout>