93 lines
3.1 KiB
TypeScript
93 lines
3.1 KiB
TypeScript
"use client";
|
||
|
||
import Link from "next/link";
|
||
import type { MouseEvent } from "react";
|
||
import styles from "./memos.module.css";
|
||
|
||
type MemoExplorerProps = {
|
||
userId: string | null;
|
||
isVip: boolean;
|
||
pathname: string;
|
||
onVipRequired?: () => void;
|
||
};
|
||
|
||
const ROUTES = {
|
||
HOME: "/community",
|
||
EXPLORE: "/community/explore",
|
||
ARCHIVED: "/community/archived",
|
||
ATTACHMENTS: "/community/attachments",
|
||
} as const;
|
||
|
||
export function MemoExplorer({ userId, isVip, pathname, onVipRequired }: MemoExplorerProps) {
|
||
const navItems = [
|
||
{ href: ROUTES.HOME, label: "星球首页", icon: "主" },
|
||
{ href: ROUTES.EXPLORE, label: "发现话题", icon: "搜" },
|
||
{ href: ROUTES.ARCHIVED, label: "归档内容", icon: "档" },
|
||
{ href: ROUTES.ATTACHMENTS, label: "附件资料", icon: "图" },
|
||
];
|
||
|
||
const handleNavClick = (event: MouseEvent, href: string) => {
|
||
if (!isVip && href !== ROUTES.HOME) {
|
||
event.preventDefault();
|
||
onVipRequired?.();
|
||
}
|
||
};
|
||
|
||
return (
|
||
<nav className={styles.explorer}>
|
||
<div className={styles.explorerBrand}>
|
||
<Link href="/" className={styles.brandBackLink}>
|
||
返回主站
|
||
</Link>
|
||
<h2 className={styles.explorerBrandTitle}>异度星球</h2>
|
||
<p className={styles.explorerBrandDesc}>像知识星球一样沉淀动态、讨论和资料。</p>
|
||
</div>
|
||
|
||
<div className={styles.explorerSection}>
|
||
<h3 className={styles.explorerTitle}>导航</h3>
|
||
<ul className={styles.explorerList}>
|
||
{navItems.map((item) => {
|
||
const isActive =
|
||
pathname === item.href || (item.href !== ROUTES.HOME && pathname.startsWith(item.href));
|
||
return (
|
||
<li key={item.href}>
|
||
<Link
|
||
href={item.href}
|
||
className={`${styles.explorerLink} ${isActive ? styles.explorerLinkActive : ""}`}
|
||
onClick={(event) => handleNavClick(event, item.href)}
|
||
>
|
||
<span className={styles.explorerIcon}>{item.icon}</span>
|
||
<span>{item.label}</span>
|
||
</Link>
|
||
</li>
|
||
);
|
||
})}
|
||
</ul>
|
||
</div>
|
||
|
||
<div className={styles.explorerSection}>
|
||
<h3 className={styles.explorerTitle}>规则</h3>
|
||
<div className={styles.explorerRules}>
|
||
<span>优先沉淀经验、方法和实操记录。</span>
|
||
<span>发帖尽量带标签，方便后续检索。</span>
|
||
<span>图片会自动进入附件资料库。</span>
|
||
</div>
|
||
</div>
|
||
|
||
{userId ? (
|
||
<div className={styles.explorerUser}>
|
||
<span className={styles.userLabel}>当前账号</span>
|
||
<span className={styles.userId}>{userId}</span>
|
||
<span className={styles.userState}>{isVip ? "VIP 已解锁完整社群" : "当前仅可预览社群结构"}</span>
|
||
</div>
|
||
) : (
|
||
<div className={styles.explorerUser}>
|
||
<span className={styles.userLabel}>当前状态</span>
|
||
<span className={styles.userId}>未登录</span>
|
||
<span className={styles.userState}>登录并开通会员后可查看完整内容</span>
|
||
</div>
|
||
)}
|
||
</nav>
|
||
);
|
||
}
|