import { useEffect, useState } from 'react' import { Avatar, Badge, Breadcrumb, Button, Card, Checkbox, Divider, Drawer, Grid, Icon, IconButton, Input, ItemBadge, Modal, Notice, Pagination, Paragraph, ScrollTop, Select, Skeleton, Space, Spinner, Switch, Tag, Text, Title, Toaster, toast, } from '../../src' import styles from './demo.module.css' /** * 拼装示例：用组件库搭一个完整的三栏内容页。 * * 只用 `@stash/ui` 的组件 + 这一页自己的布局样式， * 没有引入任何业务组件；浅色/暗色由 `` 切换。 */ const NAV = ['工作台', '常用推荐', '推荐电影', 'CES 现场报道'] const HOT_POSTS = [ 'iPhone 17e 最全汇总：最便宜的苹果 AI 手机', '二十年磨一剑，微软量子芯片碾压全球超算', '做饭将被 AI 彻底改变！AI 厨电成新风口', '对未来讲话？从 AWE 2024 看未来趋势', ] const POST_TAGS = ['未分类', '苹果新品', '闪电接口'] const GALLERY = [1, 2, 3, 4, 5, 6] function useTheme() { // 支持 ?scheme=dark 直接进深色，方便截图和分享 const [scheme, setScheme] = useState<'light' | 'dark'>(() => new URLSearchParams(window.location.search).get('scheme') === 'dark' ? 'dark' : 'light', ) useEffect(() => { document.documentElement.dataset.scheme = scheme }, [scheme]) return { scheme, toggle: () => setScheme((current) => (current === 'light' ? 'dark' : 'light')), } } /** 刷新时的占位卡片：结构和真实卡片一致，避免加载完成后跳动 */ function SkeletonPost() { return (
) } export function Page() { const { scheme, toggle } = useTheme() const [keyword, setKeyword] = useState('') const [scrolled, setScrolled] = useState(false) const [confirmOpen, setConfirmOpen] = useState(false) const [removed, setRemoved] = useState(false) const [page, setPage] = useState(1) const [loading, setLoading] = useState(false) const [autoSync, setAutoSync] = useState(true) const [showCover, setShowCover] = useState(true) const [notify, setNotify] = useState(false) const [sort, setSort] = useState('new') const [drawerOpen, setDrawerOpen] = useState(false) const [navOpen, setNavOpen] = useState(false) const refreshFeed = () => { setLoading(true) window.setTimeout(() => setLoading(false), 1200) } useEffect(() => { const sync = () => setScrolled(window.scrollY > 40) window.addEventListener('scroll', sync, { passive: true }) return () => window.removeEventListener('scroll', sync) }, []) return (