style(frontend): 统一会议中心页面样式与布局
调整会议中心页面的卡片与布局结构，使用一致的样式类名并优化间距。 移除 List.Item 的底部边距，使卡片间距完全由网格控制。 将分页组件移至内容卡片内部，提升整体布局一致性。dev_na
parent
276f9aa188
commit
4194b9afe6
|
|
@ -848,8 +848,8 @@ body::after {
|
|||
flex: 1 1 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 12px 24px;
|
||||
border-top: 1px solid var(--app-border-color);
|
||||
background: var(--app-bg-card);
|
||||
border-top: 1px solid var(--app-border-color);
|
||||
border-radius: 0 0 16px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -121,9 +121,9 @@ const MeetingCardItem: React.FC<{ item: MeetingVO, config: any, fetchData: () =>
|
|||
const isPaused = effectiveStatus === PAUSED_DISPLAY_STATUS;
|
||||
|
||||
return (
|
||||
<List.Item style={{ marginBottom: 24 }}>
|
||||
<Card hoverable onClick={() => onOpenMeeting(item)} className="meeting-card" style={{ borderRadius: 16, border: '1px solid var(--app-border-color)', background: 'var(--app-bg-card)', backdropFilter: 'blur(16px)', height: '220px', position: 'relative', boxShadow: 'var(--app-shadow)', transition: 'all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)' }} styles={{ body: { padding: 0, display: 'flex', height: '100%' } }}>
|
||||
<div className={isProcessing ? 'status-bar-active' : ''} style={{ width: 6, backgroundColor: config.color, borderRadius: '16px 0 0 16px', flexShrink: 0 }}></div>
|
||||
<List.Item>
|
||||
<Card hoverable onClick={() => onOpenMeeting(item)} className="meeting-card" style={{ borderRadius: 16, border: '1px solid var(--app-border-color)', background: 'var(--app-bg-card)', backdropFilter: 'blur(16px)', height: '220px', position: 'relative', boxShadow: 'var(--app-shadow)', transition: 'all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)' }} styles={{ body: { padding: 0, display: 'flex', flexDirection: 'row', height: '100%' } }}>
|
||||
<div className={isProcessing ? 'status-bar-active' : ''} style={{ width: 6, height: '100%', backgroundColor: config.color, borderRadius: '16px 0 0 16px', flexShrink: 0 }}></div>
|
||||
<div style={{ flex: 1, padding: '20px 24px', position: 'relative', display: 'flex', flexDirection: 'column', minWidth: 0 }}>
|
||||
<div className="card-actions" style={{ position: 'absolute', top: 16, right: 16, zIndex: 10, background: 'var(--app-bg-card)', borderRadius: 8, padding: '4px' }} onClick={e => e.stopPropagation()}>
|
||||
<Space size={8}>
|
||||
|
|
@ -336,37 +336,41 @@ const Meetings: React.FC = () => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div style={{ height: 'calc(100vh - 64px)', display: 'flex', flexDirection: 'column', background: 'var(--app-bg-page)', padding: '24px', overflow: 'hidden' }}>
|
||||
<div style={{ maxWidth: 1600, margin: '0 auto', width: '100%', height: '100%', display: 'flex', flexDirection: 'column' }}>
|
||||
<Card variant="borderless" style={{ marginBottom: 20, borderRadius: 16, flexShrink: 0, boxShadow: 'var(--app-shadow)', background: 'var(--app-bg-card)', border: '1px solid var(--app-border-color)', backdropFilter: 'blur(16px)' }} styles={{ body: { padding: '16px 28px' } }}>
|
||||
<Row justify="space-between" align="middle">
|
||||
<Col><Space size={12}><div style={{ width: 8, height: 24, background: '#1890ff', borderRadius: 4 }}></div><Title level={4} style={{ margin: 0 }}>会议中心</Title></Space></Col>
|
||||
<Col>
|
||||
<Space size={16}>
|
||||
<Radio.Group value={viewType} onChange={e => { setViewType(e.target.value); setCurrent(1); }} buttonStyle="solid">
|
||||
<Radio.Button value="all">全部</Radio.Button><Radio.Button value="created">我发起</Radio.Button><Radio.Button value="involved">我参与</Radio.Button>
|
||||
</Radio.Group>
|
||||
<Input placeholder="搜索会议标题" prefix={<SearchOutlined style={{ color: '#bfbfbf' }} />} allowClear onPressEnter={(e) => { setSearchTitle((e.target as any).value); setCurrent(1); }} style={{ width: 220, borderRadius: 8 }} />
|
||||
<Button type="primary" icon={<PlusOutlined />} onClick={() => {
|
||||
setCreateDrawerType('upload');
|
||||
setCreateDrawerVisible(true);
|
||||
}} style={{ borderRadius: 8, height: 36, fontWeight: 500 }}>创建会议</Button>
|
||||
</Space>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
|
||||
<div style={{ flex: 1, overflowY: 'auto', overflowX: 'hidden', padding: '4px 8px 4px 4px' }}>
|
||||
<div className="app-page">
|
||||
<Card
|
||||
className="app-page__content-card shadow-sm"
|
||||
style={{ flex: 1, minHeight: 0 }}
|
||||
styles={{ body: { padding: 0, flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" } }}
|
||||
title={
|
||||
<Space size={12}>
|
||||
<div style={{ width: 8, height: 24, background: '#1890ff', borderRadius: 4 }}></div>
|
||||
<Title level={4} style={{ margin: 0 }}>会议中心</Title>
|
||||
</Space>
|
||||
}
|
||||
extra={
|
||||
<Space size={16} wrap>
|
||||
<Radio.Group value={viewType} onChange={e => { setViewType(e.target.value); setCurrent(1); }} buttonStyle="solid">
|
||||
<Radio.Button value="all">全部</Radio.Button><Radio.Button value="created">我发起</Radio.Button><Radio.Button value="involved">我参与</Radio.Button>
|
||||
</Radio.Group>
|
||||
<Input placeholder="搜索会议标题" prefix={<SearchOutlined style={{ color: '#bfbfbf' }} />} allowClear onPressEnter={(e) => { setSearchTitle((e.target as any).value); setCurrent(1); }} style={{ width: 220, borderRadius: 8 }} />
|
||||
<Button type="primary" icon={<PlusOutlined />} onClick={() => {
|
||||
setCreateDrawerType('upload');
|
||||
setCreateDrawerVisible(true);
|
||||
}} style={{ borderRadius: 8, height: 36, fontWeight: 500 }}>创建会议</Button>
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
<div className="app-page__table-wrap" style={{ flex: 1, minHeight: 0, overflowX: "hidden", overflowY: "auto", padding: "24px" }}>
|
||||
<Skeleton loading={loading} active paragraph={{ rows: 10 }}>
|
||||
<List grid={{ gutter: 24, xs: 1, sm: 2, md: 2, lg: 3, xl: 4, xxl: 4 }} dataSource={data} renderItem={(item) => {
|
||||
<List grid={{ gutter: [24, 24], xs: 1, sm: 2, md: 2, lg: 3, xl: 4, xxl: 4 }} dataSource={data} renderItem={(item) => {
|
||||
const config = statusConfig[item.displayStatus ?? item.status] || statusConfig[0];
|
||||
return <MeetingCardItem item={item} config={config} fetchData={fetchData} t={t} onEditParticipants={openEditParticipants} onOpenMeeting={handleOpenMeeting} />;
|
||||
}} locale={{ emptyText: <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="开启您的第一场会议分析" /> }} />
|
||||
</Skeleton>
|
||||
</div>
|
||||
|
||||
{total > 0 && <AppPagination current={current} pageSize={size} total={total} onChange={(p, s) => { setCurrent(p); setSize(s); }} />}
|
||||
</div>
|
||||
<AppPagination current={current} pageSize={size} total={total} onChange={(p, s) => { setCurrent(p); setSize(s); }} />
|
||||
</Card>
|
||||
|
||||
<MeetingCreateDrawer
|
||||
open={createDrawerVisible}
|
||||
|
|
|
|||
Loading…
Reference in New Issue