更新分享页面基础信息显示与隐藏
parent
9480d0e4bf
commit
b1fd9de87d
|
|
@ -15,6 +15,8 @@ import {
|
||||||
ShareAltOutlined,
|
ShareAltOutlined,
|
||||||
TeamOutlined,
|
TeamOutlined,
|
||||||
UserOutlined,
|
UserOutlined,
|
||||||
|
DownOutlined,
|
||||||
|
UpOutlined,
|
||||||
} from "@ant-design/icons";
|
} from "@ant-design/icons";
|
||||||
import dayjs from "dayjs";
|
import dayjs from "dayjs";
|
||||||
import ReactMarkdown from "react-markdown";
|
import ReactMarkdown from "react-markdown";
|
||||||
|
|
@ -177,6 +179,7 @@ export default function MeetingPreview() {
|
||||||
const [audioCurrentTime, setAudioCurrentTime] = useState(0);
|
const [audioCurrentTime, setAudioCurrentTime] = useState(0);
|
||||||
const [audioDuration, setAudioDuration] = useState(0);
|
const [audioDuration, setAudioDuration] = useState(0);
|
||||||
const [audioPlaybackRate, setAudioPlaybackRate] = useState(1);
|
const [audioPlaybackRate, setAudioPlaybackRate] = useState(1);
|
||||||
|
const [isMetricsExpanded, setIsMetricsExpanded] = useState(false);
|
||||||
const [isMobile, setIsMobile] = useState(() =>
|
const [isMobile, setIsMobile] = useState(() =>
|
||||||
typeof window !== "undefined" ? window.matchMedia("(max-width: 767px)").matches : false,
|
typeof window !== "undefined" ? window.matchMedia("(max-width: 767px)").matches : false,
|
||||||
);
|
);
|
||||||
|
|
@ -786,63 +789,77 @@ export default function MeetingPreview() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="meeting-preview-metrics">
|
<div style={{ display: isMetricsExpanded ? 'block' : 'none' }}>
|
||||||
<div className="meeting-preview-metric">
|
<div className="meeting-preview-metrics">
|
||||||
<span className="meeting-preview-metric-label">{TEXT.meetingTime}</span>
|
<div className="meeting-preview-metric">
|
||||||
<span className="meeting-preview-metric-value">
|
<span className="meeting-preview-metric-label">{TEXT.meetingTime}</span>
|
||||||
{meeting.meetingTime ? dayjs(meeting.meetingTime).format("YYYY.MM.DD HH:mm") : TEXT.notSet}
|
<span className="meeting-preview-metric-value">
|
||||||
</span>
|
{meeting.meetingTime ? dayjs(meeting.meetingTime).format("YYYY.MM.DD HH:mm") : TEXT.notSet}
|
||||||
</div>
|
</span>
|
||||||
<div className="meeting-preview-metric">
|
</div>
|
||||||
<span className="meeting-preview-metric-label">{TEXT.createdAt}</span>
|
<div className="meeting-preview-metric">
|
||||||
<span className="meeting-preview-metric-value">
|
<span className="meeting-preview-metric-label">{TEXT.createdAt}</span>
|
||||||
{meeting.createdAt ? dayjs(meeting.createdAt).format("YYYY.MM.DD HH:mm") : TEXT.notSet}
|
<span className="meeting-preview-metric-value">
|
||||||
</span>
|
{meeting.createdAt ? dayjs(meeting.createdAt).format("YYYY.MM.DD HH:mm") : TEXT.notSet}
|
||||||
</div>
|
</span>
|
||||||
<div className="meeting-preview-metric">
|
</div>
|
||||||
<span className="meeting-preview-metric-label">{TEXT.creator}</span>
|
<div className="meeting-preview-metric">
|
||||||
<span className="meeting-preview-metric-value">{meeting.creatorName || TEXT.notSet}</span>
|
<span className="meeting-preview-metric-label">{TEXT.creator}</span>
|
||||||
</div>
|
<span className="meeting-preview-metric-value">{meeting.creatorName || TEXT.notSet}</span>
|
||||||
<div className="meeting-preview-metric">
|
</div>
|
||||||
<span className="meeting-preview-metric-label">{TEXT.host}</span>
|
<div className="meeting-preview-metric">
|
||||||
<span className="meeting-preview-metric-value">{meeting.hostName || TEXT.notSet}</span>
|
<span className="meeting-preview-metric-label">{TEXT.host}</span>
|
||||||
</div>
|
<span className="meeting-preview-metric-value">{meeting.hostName || TEXT.notSet}</span>
|
||||||
<div className="meeting-preview-metric">
|
</div>
|
||||||
<span className="meeting-preview-metric-label">{TEXT.participantsCount}</span>
|
<div className="meeting-preview-metric">
|
||||||
<span className="meeting-preview-metric-value">{participantCountValue || TEXT.notFilled}</span>
|
<span className="meeting-preview-metric-label">{TEXT.participantsCount}</span>
|
||||||
</div>
|
<span className="meeting-preview-metric-value">{participantCountValue || TEXT.notFilled}</span>
|
||||||
<div className="meeting-preview-metric">
|
</div>
|
||||||
<span className="meeting-preview-metric-label">会议时长</span>
|
<div className="meeting-preview-metric">
|
||||||
<span className="meeting-preview-metric-value">{meetingDuration > 0 ? formatDurationRange(0, meetingDuration).split(' - ')[1] : TEXT.noDuration}</span>
|
<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>
|
</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>
|
</div>
|
||||||
|
|
||||||
{participants.length > 0 ? (
|
<div style={{ textAlign: 'center', marginTop: 12 }}>
|
||||||
<div className="meeting-preview-overview" style={{ marginTop: 20 }}>
|
<Button
|
||||||
<div className="meeting-preview-overview-label">{TEXT.participants}</div>
|
type="text"
|
||||||
<div className="meeting-preview-tags">
|
block
|
||||||
{participants.map((item) => (
|
onClick={() => setIsMetricsExpanded(!isMetricsExpanded)}
|
||||||
<span key={item} className="meeting-preview-tag">
|
style={{ color: 'var(--preview-muted)', height: 40, backgroundColor: 'rgba(0, 0, 0, 0.02)' }}
|
||||||
<TeamOutlined style={{ marginRight: 8 }} />
|
icon={isMetricsExpanded ? <UpOutlined /> : <DownOutlined />}
|
||||||
{item}
|
>
|
||||||
</span>
|
{isMetricsExpanded ? '收起基础信息' : '展开基础信息'}
|
||||||
))}
|
</Button>
|
||||||
</div>
|
</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}
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div className="meeting-preview-panels">
|
<div className="meeting-preview-panels">
|
||||||
|
|
|
||||||
|
|
@ -14,11 +14,11 @@ export default defineConfig({
|
||||||
server: {
|
server: {
|
||||||
port: 5174,
|
port: 5174,
|
||||||
proxy: {
|
proxy: {
|
||||||
"/auth": "http://10.100.52.13:8081",
|
"/auth": "http://10.100.51.199:8080",
|
||||||
"/sys": "http://10.100.52.13:8081",
|
"/sys": "http://10.100.51.199:8080",
|
||||||
"/api": "http://10.100.52.13:8081",
|
"/api": "http://10.100.51.199:8080",
|
||||||
"/ws": {
|
"/ws": {
|
||||||
target: "ws://10.100.52.13:8081",
|
target: "ws://10.100.51.199:8080",
|
||||||
ws: true
|
ws: true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue