278 lines
8.9 KiB
TypeScript
278 lines
8.9 KiB
TypeScript
import { useEffect, useMemo, useState } from "react";
|
||
import {
|
||
AudioOutlined,
|
||
ArrowRightOutlined,
|
||
VideoCameraOutlined,
|
||
VideoCameraAddOutlined
|
||
} from "@ant-design/icons";
|
||
import { Button, Empty, Skeleton, Tag, Typography } from "antd";
|
||
import { useNavigate } from "react-router-dom";
|
||
import dayjs from "dayjs";
|
||
import { getRecentTasks } from "@/api/business/dashboard";
|
||
import type { MeetingVO } from "@/api/business/meeting";
|
||
import "./index.less";
|
||
import RightVisual from "./RightVisual";
|
||
|
||
const { Text, Title } = Typography;
|
||
|
||
type QuickEntry = {
|
||
title: string;
|
||
icon: React.ReactNode;
|
||
description: string[];
|
||
accent: string;
|
||
badge: string;
|
||
onClick: () => void;
|
||
};
|
||
|
||
type RecentCard = {
|
||
id: number | string;
|
||
title: string;
|
||
duration: string;
|
||
time: string;
|
||
tags: string[];
|
||
};
|
||
|
||
const RECENT_CARD_READ_STORAGE_KEY = "home_recent_card_read_ids";
|
||
|
||
const fallbackRecentCards: RecentCard[] = [
|
||
{
|
||
id: "sample-1",
|
||
title: "2026-03-25 16:05 记录",
|
||
duration: "01:10",
|
||
time: "今天 16:05",
|
||
tags: ["发言人", "降噪", "速度", "模仿", "暂停"]
|
||
},
|
||
{
|
||
id: "sample-2",
|
||
title: "【示例】开会用通义听悟，高效又省心",
|
||
duration: "02:14",
|
||
time: "2026-03-24 11:04",
|
||
tags: ["会议日程", "笔记", "发言人", "协同", "纪要"]
|
||
},
|
||
{
|
||
id: "sample-3",
|
||
title: "【示例】上课用通义听悟，学习效率 UPUP",
|
||
duration: "02:01",
|
||
time: "2026-03-23 11:04",
|
||
tags: ["转写", "笔记", "学习", "教学音频", "课程音频"]
|
||
}
|
||
];
|
||
|
||
function buildRecentCards(tasks: MeetingVO[]): RecentCard[] {
|
||
if (!tasks.length) {
|
||
return fallbackRecentCards;
|
||
}
|
||
|
||
return tasks.slice(0, 3).map((task, index) => ({
|
||
id: task.id,
|
||
title: task.title,
|
||
duration: `0${index + 1}:${10 + index * 12}`,
|
||
time: dayjs(task.meetingTime || task.createdAt).format("YYYY-MM-DD HH:mm"),
|
||
tags: task.tags?.split(",").filter(Boolean).slice(0, 5) || []
|
||
}));
|
||
}
|
||
|
||
export default function HomePage() {
|
||
const navigate = useNavigate();
|
||
const [recentTasks, setRecentTasks] = useState<MeetingVO[]>([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [readCardIds, setReadCardIds] = useState<string[]>(() => {
|
||
if (typeof window === "undefined") {
|
||
return [];
|
||
}
|
||
|
||
try {
|
||
const rawValue = window.localStorage.getItem(RECENT_CARD_READ_STORAGE_KEY);
|
||
if (!rawValue) {
|
||
return [];
|
||
}
|
||
const parsed = JSON.parse(rawValue);
|
||
return Array.isArray(parsed) ? parsed.map(String) : [];
|
||
} catch {
|
||
return [];
|
||
}
|
||
});
|
||
|
||
const [wordIndex, setWordIndex] = useState(0);
|
||
const ROTATING_WORDS = useMemo(() => ["都有迹可循", "都能被听见", "都值得记录", "都清晰可见"], []);
|
||
|
||
useEffect(() => {
|
||
const interval = setInterval(() => {
|
||
setWordIndex((prev) => (prev + 1) % ROTATING_WORDS.length);
|
||
}, 3000);
|
||
return () => clearInterval(interval);
|
||
}, [ROTATING_WORDS.length]);
|
||
|
||
useEffect(() => {
|
||
const fetchRecentTasks = async () => {
|
||
try {
|
||
const response = await getRecentTasks();
|
||
const payload: any = (response as any).data || response;
|
||
setRecentTasks(payload?.data || payload || []);
|
||
} catch (error) {
|
||
console.error("Home recent tasks load failed", error);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
void fetchRecentTasks();
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (typeof window === "undefined") {
|
||
return;
|
||
}
|
||
|
||
window.localStorage.setItem(RECENT_CARD_READ_STORAGE_KEY, JSON.stringify(readCardIds));
|
||
}, [readCardIds]);
|
||
|
||
const quickEntries = useMemo<QuickEntry[]>(
|
||
() => [
|
||
{
|
||
title: "开启实时记录",
|
||
icon: <AudioOutlined />,
|
||
description: ["实时语音转文字", "同步翻译，智能总结要点"],
|
||
accent: "violet",
|
||
badge: "会议神器",
|
||
onClick: () => navigate("/meetings?action=create&type=realtime")
|
||
},
|
||
{
|
||
title: "上传音视频",
|
||
icon: <VideoCameraAddOutlined />,
|
||
description: ["音视频转文字", "区分发言人，一键导出"],
|
||
accent: "cyan",
|
||
badge: "iMeeting",
|
||
onClick: () => navigate("/meetings?create=true")
|
||
}
|
||
],
|
||
[navigate]
|
||
);
|
||
|
||
const recentCards = useMemo(() => buildRecentCards(recentTasks), [recentTasks]);
|
||
|
||
const handleRecentCardClick = (card: RecentCard) => {
|
||
const cardId = String(card.id);
|
||
setReadCardIds((prev) => (prev.includes(cardId) ? prev : [...prev, cardId]));
|
||
|
||
if (typeof card.id === "number") {
|
||
navigate(`/meetings/${card.id}`);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<main className="home-container">
|
||
{/* Massive Abstract Background Sphere matching the design/img.png */}
|
||
<div className="home-bg-visual" aria-hidden="true">
|
||
<div className="home-bg-sphere" />
|
||
<RightVisual />
|
||
</div>
|
||
|
||
<div className="home-content-wrapper">
|
||
<header className="home-hero">
|
||
<Title level={1} className="home-title">
|
||
每一次交流，
|
||
<span className="home-title-accent-wrapper">
|
||
<span
|
||
className="home-title-accent-scroller"
|
||
style={{ transform: `translateY(-${wordIndex * 1.2}em)` }}
|
||
>
|
||
{ROTATING_WORDS.map((word) => (
|
||
<span key={word} className="home-title-accent">
|
||
{word}
|
||
</span>
|
||
))}
|
||
</span>
|
||
</span>
|
||
</Title>
|
||
|
||
<div className="home-quick-actions">
|
||
{quickEntries.map((entry) => (
|
||
<div
|
||
className={`home-action-item home-action-item--${entry.accent}`}
|
||
onClick={entry.onClick}
|
||
key={entry.title}
|
||
>
|
||
<div className="home-action-badge">{entry.badge}</div>
|
||
<div className="home-action-icon-wrapper">
|
||
<div className="home-action-icon">{entry.icon}</div>
|
||
<div className="home-action-icon-glow" />
|
||
<div className="home-action-icon-circle" />
|
||
</div>
|
||
<Title level={3} className="home-action-title">{entry.title}</Title>
|
||
<div className="home-action-desc">
|
||
{entry.description.map((line) => (
|
||
<Text key={line} className="home-action-line">
|
||
{line}
|
||
</Text>
|
||
))}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</header>
|
||
|
||
<section className="home-recent-section">
|
||
<div className="home-section-header">
|
||
<Title level={3}>最近</Title>
|
||
<Button type="link" onClick={() => navigate("/meetings")} className="home-view-all">
|
||
查看全部 <ArrowRightOutlined />
|
||
</Button>
|
||
</div>
|
||
|
||
{loading ? (
|
||
<div className="home-recent-grid">
|
||
{[...Array(3)].map((_, i) => (
|
||
<div key={i} className="home-recent-skeleton">
|
||
<Skeleton active paragraph={{ rows: 2 }} title={{ width: "60%" }} />
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : recentCards.length ? (
|
||
<div className="home-recent-grid">
|
||
{recentCards.map((card) => (
|
||
<article
|
||
key={card.id}
|
||
className="home-recent-card"
|
||
onClick={() => handleRecentCardClick(card)}
|
||
onKeyDown={(event) => {
|
||
if (event.key === "Enter" || event.key === " ") {
|
||
event.preventDefault();
|
||
handleRecentCardClick(card);
|
||
}
|
||
}}
|
||
role="button"
|
||
tabIndex={0}
|
||
>
|
||
{!readCardIds.includes(String(card.id)) && <span className="home-recent-card-dot" />}
|
||
<div className="home-recent-card-head">
|
||
<Title level={4} className="home-recent-card-title">{card.title}</Title>
|
||
<div className="home-recent-card-icon">
|
||
<VideoCameraOutlined className="home-recent-card-play-icon" />
|
||
</div>
|
||
</div>
|
||
<div className="home-recent-card-tags">
|
||
{card.tags.slice(0, 4).map((tag) => (
|
||
<Tag key={`${card.id}-${tag}`} className="home-recent-card-tag" bordered={false}>
|
||
{tag}
|
||
</Tag>
|
||
))}
|
||
</div>
|
||
<div className="home-recent-card-footer">
|
||
<span className="home-recent-card-duration">{card.duration}</span>
|
||
<span className="home-recent-card-time">{card.time}</span>
|
||
</div>
|
||
</article>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<div className="home-empty-state">
|
||
<Empty description="暂无最近记录" />
|
||
</div>
|
||
)}
|
||
</section>
|
||
</div>
|
||
</main>
|
||
);
|
||
}
|