94 lines
3.8 KiB
JavaScript
94 lines
3.8 KiB
JavaScript
'use client';
|
||
|
||
import { useState, useEffect } from 'react';
|
||
import { motion, AnimatePresence } from 'framer-motion';
|
||
|
||
const ANNOUNCEMENT_KEY = 'hasClosedAnnouncement_v11';
|
||
|
||
export default function Announcement() {
|
||
const [isVisible, setIsVisible] = useState(false);
|
||
|
||
useEffect(() => {
|
||
const hasClosed = localStorage.getItem(ANNOUNCEMENT_KEY);
|
||
if (!hasClosed) {
|
||
setIsVisible(true);
|
||
}
|
||
}, []);
|
||
|
||
const handleClose = () => {
|
||
localStorage.setItem(ANNOUNCEMENT_KEY, 'true');
|
||
setIsVisible(false);
|
||
};
|
||
|
||
return (
|
||
<AnimatePresence>
|
||
{isVisible && (
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
exit={{ opacity: 0 }}
|
||
style={{
|
||
position: 'fixed',
|
||
inset: 0,
|
||
zIndex: 100,
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
background: 'rgba(0, 0, 0, 0.6)',
|
||
backdropFilter: 'blur(4px)',
|
||
padding: '20px',
|
||
}}
|
||
>
|
||
<motion.div
|
||
initial={{ scale: 0.95, opacity: 0, y: 10 }}
|
||
animate={{ scale: 1, opacity: 1, y: 0 }}
|
||
exit={{ scale: 0.95, opacity: 0, y: 10 }}
|
||
className="glass"
|
||
style={{
|
||
width: '100%',
|
||
maxWidth: '400px',
|
||
padding: '24px',
|
||
position: 'relative',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
gap: '16px',
|
||
}}
|
||
>
|
||
<div className="title" style={{ display: 'flex', alignItems: 'center', gap: '12px', fontWeight: 700, fontSize: '18px', color: 'var(--accent)' }}>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
|
||
<line x1="12" y1="9" x2="12" y2="13"></line>
|
||
<line x1="12" y1="17" x2="12.01" y2="17"></line>
|
||
</svg>
|
||
<span>公告</span>
|
||
</div>
|
||
<div style={{ color: 'var(--text)', lineHeight: '1.6', fontSize: '15px' }}>
|
||
为了增加更多用户方便访问, 新增国内加速地址：<a className="link-button"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
style={{ color: 'var(--primary)', textDecoration: 'underline', padding: '0 4px', fontWeight: 600 }} href="https://fund.cc.cd/">https://fund.cc.cd/</a>
|
||
<p>v0.1.9 版本更新内容如下：</p>
|
||
<p>1. 新增亮色主题。</p>
|
||
<p>2. PC、移动表格模式重构，支持自定义布局。</p>
|
||
<p>3. PC端设置弹框支持修改页面容器宽度。</p>
|
||
<p>3. 分组下自定义布局数据相互独立（旧数据需重新配置）。</p>
|
||
感谢以下用户上月对项目赞助支持（排名不分顺序）：
|
||
<p>*业、M*.、S*o、b*g、*落、D*A、*山、匿名、*🍍、*啦、L*.、*洛、大大方块先生、带火星的小木条、F、無芯、广告制作装饰、**中、**礼</p>
|
||
</div>
|
||
|
||
<div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '8px' }}>
|
||
<button
|
||
className="button"
|
||
onClick={handleClose}
|
||
style={{ width: '100%', justifyContent: 'center', display: 'flex', alignItems: 'center' }}
|
||
>
|
||
我知道了
|
||
</button>
|
||
</div>
|
||
</motion.div>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
);
|
||
}
|