71 lines
2.4 KiB
TypeScript
71 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useEffect, useState } from "react";
|
|
import { CommunityTimeline } from "../components/CommunityTimeline";
|
|
import { CommunityPageHero } from "../components/CommunityPageHero";
|
|
import styles from "../components/memos.module.css";
|
|
|
|
function getStorage(key: string): string | null {
|
|
if (typeof window === "undefined") {
|
|
return null;
|
|
}
|
|
return localStorage.getItem(key);
|
|
}
|
|
|
|
export default function ArchivedPage() {
|
|
const [userId, setUserId] = useState<string | null>(null);
|
|
const [isVip, setIsVip] = useState(false);
|
|
const [showLoginPrompt, setShowLoginPrompt] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const uid = getStorage("userId") || getStorage("memosAccount");
|
|
const type = getStorage("paidType");
|
|
setUserId(uid || null);
|
|
setIsVip(type === "vip");
|
|
}, []);
|
|
|
|
return (
|
|
<div className={styles.pageStack}>
|
|
<CommunityPageHero
|
|
eyebrow="Archive"
|
|
title="归档但不丢失"
|
|
description="把已经沉淀完成的内容移入归档，保持首页干净，同时保留随时可查的历史记录。"
|
|
chips={["历史沉淀", "仍可检索", "适合经验总结"]}
|
|
actions={[{ href: "/community", label: "返回首页", secondary: true }]}
|
|
/>
|
|
|
|
{showLoginPrompt ? (
|
|
<section className={styles.vipBanner}>
|
|
<p>归档页仅对会员开放。</p>
|
|
<Link href="/" className={styles.ctaLink}>
|
|
立即加入会员
|
|
</Link>
|
|
</section>
|
|
) : null}
|
|
|
|
{isVip && userId ? (
|
|
<CommunityTimeline
|
|
userId={userId}
|
|
onVipRequired={() => setShowLoginPrompt(true)}
|
|
state="ARCHIVED"
|
|
emptyText="目前还没有归档内容。"
|
|
/>
|
|
) : (
|
|
<section className={styles.lockedPanel}>
|
|
<div className={styles.lockedPanelCopy}>
|
|
<span className={styles.lockedPanelEyebrow}>Members Only</span>
|
|
<h2 className={styles.lockedPanelTitle}>归档页需要会员权限</h2>
|
|
<p className={styles.lockedPanelDesc}>这里会存放长期有价值、但不需要持续顶在首页的内容。</p>
|
|
</div>
|
|
<div className={styles.lockedPanelActions}>
|
|
<Link href="/" className={styles.heroPrimaryAction}>
|
|
去开通会员
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|