更新分享页面基础信息显示与隐藏

dev_na
alanpaine 2026-04-17 11:30:22 +08:00
parent 9480d0e4bf
commit b1fd9de87d
2 changed files with 75 additions and 58 deletions

View File

@ -15,6 +15,8 @@ import {
ShareAltOutlined,
TeamOutlined,
UserOutlined,
DownOutlined,
UpOutlined,
} from "@ant-design/icons";
import dayjs from "dayjs";
import ReactMarkdown from "react-markdown";
@ -177,6 +179,7 @@ export default function MeetingPreview() {
const [audioCurrentTime, setAudioCurrentTime] = useState(0);
const [audioDuration, setAudioDuration] = useState(0);
const [audioPlaybackRate, setAudioPlaybackRate] = useState(1);
const [isMetricsExpanded, setIsMetricsExpanded] = useState(false);
const [isMobile, setIsMobile] = useState(() =>
typeof window !== "undefined" ? window.matchMedia("(max-width: 767px)").matches : false,
);
@ -786,63 +789,77 @@ export default function MeetingPreview() {
</div>
</div>
<div className="meeting-preview-metrics">
<div className="meeting-preview-metric">
<span className="meeting-preview-metric-label">{TEXT.meetingTime}</span>
<span className="meeting-preview-metric-value">
{meeting.meetingTime ? dayjs(meeting.meetingTime).format("YYYY.MM.DD HH:mm") : TEXT.notSet}
</span>
</div>
<div className="meeting-preview-metric">
<span className="meeting-preview-metric-label">{TEXT.createdAt}</span>
<span className="meeting-preview-metric-value">
{meeting.createdAt ? dayjs(meeting.createdAt).format("YYYY.MM.DD HH:mm") : TEXT.notSet}
</span>
</div>
<div className="meeting-preview-metric">
<span className="meeting-preview-metric-label">{TEXT.creator}</span>
<span className="meeting-preview-metric-value">{meeting.creatorName || TEXT.notSet}</span>
</div>
<div className="meeting-preview-metric">
<span className="meeting-preview-metric-label">{TEXT.host}</span>
<span className="meeting-preview-metric-value">{meeting.hostName || TEXT.notSet}</span>
</div>
<div className="meeting-preview-metric">
<span className="meeting-preview-metric-label">{TEXT.participantsCount}</span>
<span className="meeting-preview-metric-value">{participantCountValue || TEXT.notFilled}</span>
</div>
<div className="meeting-preview-metric">
<span className="meeting-preview-metric-label"></span>
<span className="meeting-preview-metric-value">{meetingDuration > 0 ? formatDurationRange(0, meetingDuration).split(' - ')[1] : TEXT.noDuration}</span>
<div style={{ display: isMetricsExpanded ? 'block' : 'none' }}>
<div className="meeting-preview-metrics">
<div className="meeting-preview-metric">
<span className="meeting-preview-metric-label">{TEXT.meetingTime}</span>
<span className="meeting-preview-metric-value">
{meeting.meetingTime ? dayjs(meeting.meetingTime).format("YYYY.MM.DD HH:mm") : TEXT.notSet}
</span>
</div>
<div className="meeting-preview-metric">
<span className="meeting-preview-metric-label">{TEXT.createdAt}</span>
<span className="meeting-preview-metric-value">
{meeting.createdAt ? dayjs(meeting.createdAt).format("YYYY.MM.DD HH:mm") : TEXT.notSet}
</span>
</div>
<div className="meeting-preview-metric">
<span className="meeting-preview-metric-label">{TEXT.creator}</span>
<span className="meeting-preview-metric-value">{meeting.creatorName || TEXT.notSet}</span>
</div>
<div className="meeting-preview-metric">
<span className="meeting-preview-metric-label">{TEXT.host}</span>
<span className="meeting-preview-metric-value">{meeting.hostName || TEXT.notSet}</span>
</div>
<div className="meeting-preview-metric">
<span className="meeting-preview-metric-label">{TEXT.participantsCount}</span>
<span className="meeting-preview-metric-value">{participantCountValue || TEXT.notFilled}</span>
</div>
<div className="meeting-preview-metric">
<span className="meeting-preview-metric-label"></span>
<span className="meeting-preview-metric-value">{meetingDuration > 0 ? formatDurationRange(0, meetingDuration).split(' - ')[1] : TEXT.noDuration}</span>
</div>
</div>
{participants.length > 0 ? (
<div className="meeting-preview-overview" style={{ marginTop: 20 }}>
<div className="meeting-preview-overview-label">{TEXT.participants}</div>
<div className="meeting-preview-tags">
{participants.map((item) => (
<span key={item} className="meeting-preview-tag">
<TeamOutlined style={{ marginRight: 8 }} />
{item}
</span>
))}
</div>
</div>
) : null}
{tags.length > 0 ? (
<div className="meeting-preview-overview" style={{ marginTop: participants.length > 0 ? 12 : 20 }}>
<div className="meeting-preview-overview-label">{TEXT.tags}</div>
<div className="meeting-preview-tags">
{tags.map((item) => (
<Tag key={item} bordered={false} className="meeting-preview-tag">
{item}
</Tag>
))}
</div>
</div>
) : null}
</div>
{participants.length > 0 ? (
<div className="meeting-preview-overview" style={{ marginTop: 20 }}>
<div className="meeting-preview-overview-label">{TEXT.participants}</div>
<div className="meeting-preview-tags">
{participants.map((item) => (
<span key={item} className="meeting-preview-tag">
<TeamOutlined style={{ marginRight: 8 }} />
{item}
</span>
))}
</div>
</div>
) : null}
{tags.length > 0 ? (
<div className="meeting-preview-overview" style={{ marginTop: participants.length > 0 ? 12 : 20 }}>
<div className="meeting-preview-overview-label">{TEXT.tags}</div>
<div className="meeting-preview-tags">
{tags.map((item) => (
<Tag key={item} bordered={false} className="meeting-preview-tag">
{item}
</Tag>
))}
</div>
</div>
) : null}
<div style={{ textAlign: 'center', marginTop: 12 }}>
<Button
type="text"
block
onClick={() => setIsMetricsExpanded(!isMetricsExpanded)}
style={{ color: 'var(--preview-muted)', height: 40, backgroundColor: 'rgba(0, 0, 0, 0.02)' }}
icon={isMetricsExpanded ? <UpOutlined /> : <DownOutlined />}
>
{isMetricsExpanded ? '收起基础信息' : '展开基础信息'}
</Button>
</div>
</section>
<div className="meeting-preview-panels">

View File

@ -14,11 +14,11 @@ export default defineConfig({
server: {
port: 5174,
proxy: {
"/auth": "http://10.100.52.13:8081",
"/sys": "http://10.100.52.13:8081",
"/api": "http://10.100.52.13:8081",
"/auth": "http://10.100.51.199:8080",
"/sys": "http://10.100.51.199:8080",
"/api": "http://10.100.51.199:8080",
"/ws": {
target: "ws://10.100.52.13:8081",
target: "ws://10.100.51.199:8080",
ws: true
}
}