refactor: 优化会议预览页面的分享设置样式和功能

- 更新 `MeetingPreviewView.css`,移除未使用的类并优化样式
- 在 `MeetingPreviewView.tsx` 中添加密码修改模态框,支持访问密码的设置和修改
- 优化分享设置的显示逻辑,新增紧凑模式和密码显示功能
dev_na
chenhao 2026-06-12 17:36:52 +08:00
parent 877a4a0654
commit 236176d5ff
2 changed files with 103 additions and 38 deletions

View File

@ -72,7 +72,6 @@
}
.meeting-preview-collapsible-section,
.meeting-preview-share-settings,
.meeting-preview-content-card {
background: var(--bg-surface);
border-radius: 20px;
@ -155,29 +154,53 @@
font-weight: 600;
}
.meeting-preview-share-settings {
padding: 20px;
.meeting-preview-share-settings-compact {
padding: 16px 20px;
margin-bottom: 20px;
}
.meeting-preview-share-settings-title {
font-size: 18px;
font-weight: 800;
margin-bottom: 4px;
}
.meeting-preview-share-settings-desc {
color: var(--text-secondary);
margin-bottom: 16px;
}
.meeting-preview-share-settings-row {
background: var(--bg-surface);
border-radius: 20px;
border: 1px solid var(--border-color);
box-shadow: var(--card-shadow);
display: flex;
gap: 12px;
align-items: center;
justify-content: center;
}
.meeting-preview-share-settings-row .ant-input-affix-wrapper {
.share-password-display {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
}
.share-password-label {
color: var(--text-secondary);
font-weight: 600;
display: flex;
align-items: center;
flex-shrink: 0;
}
.share-password-value {
font-family: monospace;
font-weight: 800;
font-size: 15px;
background: #f8faff;
padding: 4px 12px;
border-radius: 8px;
border: 1px dashed var(--primary-blue);
color: var(--primary-blue);
flex: 1;
text-align: center;
}
.set-password-btn {
width: 100%;
border-radius: 14px;
height: 48px;
font-weight: 600;
color: var(--primary-blue);
border-color: var(--primary-blue);
}
.meeting-preview-share-bar {
@ -539,14 +562,11 @@
}
.meeting-preview-share-bar,
.meeting-preview-share-settings-row,
.meeting-preview-catalog-item-title-row {
flex-direction: column;
}
.meeting-preview-share-bar .ant-btn,
.meeting-preview-share-settings-row .ant-btn,
.meeting-preview-share-settings-row .ant-input-affix-wrapper {
.meeting-preview-share-bar .ant-btn {
width: 100%;
}

View File

@ -16,7 +16,7 @@ import {
UpOutlined,
UserOutlined,
} from "@ant-design/icons";
import {Alert, Button, Empty, Input, Tabs, message} from "antd";
import {Alert, Button, Empty, Input, Tabs, message, Modal} from "antd";
import dayjs from "dayjs";
import ReactMarkdown from "react-markdown";
@ -45,7 +45,7 @@ interface MeetingPreviewViewProps {
sharePasswordDraft?: string;
shareSaving?: boolean;
onSharePasswordDraftChange?: (value: string) => void;
onSaveSharePassword?: () => void;
onSaveSharePassword?: () => void | Promise<void>;
onCopyShareLink?: () => void | Promise<void>;
}
@ -174,6 +174,7 @@ export default function MeetingPreviewView({
const [isMetricsExpanded, setIsMetricsExpanded] = useState(false);
const [linkedTranscriptIds, setLinkedTranscriptIds] = useState<number[]>([]);
const [linkedChapterKey, setLinkedChapterKey] = useState<string | null>(null);
const [isPasswordModalVisible, setIsPasswordModalVisible] = useState(false);
const analysis = useMemo(
() => buildMeetingAnalysis(meeting?.analysis, meeting?.summaryContent, meeting?.tags || ""),
@ -397,20 +398,34 @@ export default function MeetingPreviewView({
</div>
{editableShare ? (
<div className="meeting-preview-share-settings">
<div className="meeting-preview-share-settings-title">{TEXT.shareSettings}</div>
<div className="meeting-preview-share-settings-desc">{TEXT.shareSettingsHint}</div>
<div className="meeting-preview-share-settings-row">
<Input.Password
value={sharePasswordDraft}
placeholder={TEXT.passwordPlaceholder}
prefix={<LockOutlined/>}
onChange={(event) => onSharePasswordDraftChange?.(event.target.value)}
/>
<Button type="primary" loading={shareSaving} onClick={onSaveSharePassword}>
{TEXT.saveSharePassword}
<div className="meeting-preview-share-settings-compact">
{meeting.accessPassword ? (
<div className="share-password-display">
<span className="share-password-label">
<LockOutlined style={{marginRight: 6}}/>
访
</span>
<span className="share-password-value">{meeting.accessPassword}</span>
<Button type="link" size="small" onClick={() => {
onSharePasswordDraftChange?.(meeting.accessPassword || "");
setIsPasswordModalVisible(true);
}}>
/
</Button>
</div>
) : (
<Button
type="dashed"
icon={<LockOutlined/>}
onClick={() => {
onSharePasswordDraftChange?.("");
setIsPasswordModalVisible(true);
}}
className="set-password-btn"
>
访
</Button>
</div>
)}
</div>
) : null}
@ -566,6 +581,36 @@ export default function MeetingPreviewView({
</div>
</div>
<Modal
title="设置访问密码"
open={isPasswordModalVisible}
onOk={async () => {
if (onSaveSharePassword) {
await onSaveSharePassword();
}
setIsPasswordModalVisible(false);
}}
onCancel={() => {
setIsPasswordModalVisible(false);
onSharePasswordDraftChange?.(meeting.accessPassword || "");
}}
confirmLoading={shareSaving}
okText="保存"
cancelText="取消"
destroyOnClose
>
<div style={{marginBottom: 16, color: "var(--text-secondary)"}}>
{TEXT.shareSettingsHint}
</div>
<Input.Password
value={sharePasswordDraft}
placeholder={TEXT.passwordPlaceholder}
prefix={<LockOutlined/>}
onChange={(event) => onSharePasswordDraftChange?.(event.target.value)}
allowClear
/>
</Modal>
{playbackAudioUrl ? (
<div className="meeting-preview-audio-player-inline"
style={{display: pageTab === "transcript" ? "flex" : "none"}}>