diff --git a/frontend/src/pages/business/MeetingPreview.css b/frontend/src/pages/business/MeetingPreview.css index 5bec877..7271648 100644 --- a/frontend/src/pages/business/MeetingPreview.css +++ b/frontend/src/pages/business/MeetingPreview.css @@ -354,19 +354,51 @@ } .meeting-preview-analysis-tabs { - margin: 18px 0 14px; -} - -.meeting-preview-analysis-tabs .ant-segmented { - width: 100%; - padding: 5px; - border-radius: 16px; + display: inline-flex; + align-items: center; background: var(--app-bg-surface-soft); + padding: 5px; + border-radius: 12px; + gap: 4px; + margin: 24px 0 20px; + overflow-x: auto; + scrollbar-width: none; + border: 1px solid var(--app-border-color); + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02); } -.meeting-preview-analysis-tabs .ant-segmented-item { - min-height: 40px; - border-radius: 12px; +.meeting-preview-analysis-tabs::-webkit-scrollbar { + display: none; +} + +.meeting-preview-analysis-tab { + padding: 8px 24px; + border-radius: 8px; + color: var(--app-text-secondary); + font-size: 14px; + font-weight: 500; + cursor: pointer; + white-space: nowrap; + border: 1px solid transparent; + transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); +} + +.meeting-preview-analysis-tab:hover { + color: var(--app-text-main); + background: rgba(255, 255, 255, 0.4); +} + +.meeting-preview-analysis-tab.active { + background: var(--app-bg-surface); + color: var(--app-primary-color); + font-weight: 600; + border-color: rgba(0, 0, 0, 0.04); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); +} + +.meeting-preview-analysis-tab.active:hover { + background: var(--app-bg-surface); + color: var(--app-primary-color); } .meeting-preview-analysis-panel { diff --git a/frontend/src/pages/business/MeetingPreview.tsx b/frontend/src/pages/business/MeetingPreview.tsx index 5f1cac0..0b2eb62 100644 --- a/frontend/src/pages/business/MeetingPreview.tsx +++ b/frontend/src/pages/business/MeetingPreview.tsx @@ -644,16 +644,20 @@ export default function MeetingPreview() {
- setAnalysisTab(value as AnalysisTab)} - options={[ - { label: TEXT.analysisChapters, value: "chapters" }, - { label: TEXT.analysisSpeakers, value: "speakers" }, - { label: TEXT.analysisKeyPoints, value: "actions" }, - { label: TEXT.analysisTodos, value: "todos" }, - ]} - /> + {[ + { label: TEXT.analysisChapters, value: "chapters" }, + { label: TEXT.analysisSpeakers, value: "speakers" }, + { label: TEXT.analysisKeyPoints, value: "actions" }, + { label: TEXT.analysisTodos, value: "todos" }, + ].map((tab) => ( +
setAnalysisTab(tab.value as AnalysisTab)} + > + {tab.label} +
+ ))}