zhaoxi
693e08d67b
- 编辑器初始化等待文章和草稿两个查询都返回，此前草稿接口先返回 空内容时会用默认文本初始化并被自动保存覆盖真实草稿 - CodeMirror 容器加 min-h-0（flex 子项默认 min-height:auto 会被 内容撑开），并约束 .cm-editor 高度为 100% 使内部滚动生效 - 修复规则必须放在 @layer 外，否则被 Tailwind 当作未使用样式裁剪
255 lines
11 KiB
TypeScript
255 lines
11 KiB
TypeScript
import { useEffect, useRef, useState } from 'react';
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { ArrowLeft, Check, Loader2, ImagePlus, IdCard } from 'lucide-react';
|
|
import CodeMirror, { type ReactCodeMirrorRef } from '@uiw/react-codemirror';
|
|
import { markdown } from '@codemirror/lang-markdown';
|
|
import { oneDark } from '@codemirror/theme-one-dark';
|
|
import { motion } from 'framer-motion';
|
|
import { api } from '../../api';
|
|
import { Markdown } from '../../components/Markdown';
|
|
import { useThemeStore } from '../../store/theme';
|
|
import { defaultProfile, parseProfile, type ProfileContent } from '../../config/profile';
|
|
|
|
/** 后台"个人主页"编辑：名片信息（头像/联系方式）+ Markdown 正文 */
|
|
export function AdminProfilePage() {
|
|
const navigate = useNavigate();
|
|
const queryClient = useQueryClient();
|
|
const { theme } = useThemeStore();
|
|
|
|
const [content, setContent] = useState('');
|
|
const [card, setCard] = useState<ProfileContent>(defaultProfile);
|
|
const [initialized, setInitialized] = useState(false);
|
|
const [savedAt, setSavedAt] = useState<Date | null>(null);
|
|
const [showCard, setShowCard] = useState(false);
|
|
const editorRef = useRef<ReactCodeMirrorRef>(null);
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
const avatarInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
const { data: page, isLoading } = useQuery({
|
|
queryKey: ['page', 'profile'],
|
|
queryFn: () => api.getPage('profile'),
|
|
});
|
|
|
|
const { data: cardPage } = useQuery({
|
|
queryKey: ['page', 'profile-card'],
|
|
queryFn: () => api.getPage('profile-card'),
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (!initialized && page && cardPage) {
|
|
setContent(page.content_md || '# 关于我\n\n');
|
|
setCard(parseProfile(cardPage.content_md));
|
|
setInitialized(true);
|
|
}
|
|
}, [page, cardPage, initialized]);
|
|
|
|
const saveMutation = useMutation({
|
|
mutationFn: () => api.savePage('profile', content),
|
|
onSuccess: () => {
|
|
setSavedAt(new Date());
|
|
queryClient.invalidateQueries({ queryKey: ['page', 'profile'] });
|
|
},
|
|
});
|
|
|
|
const saveCardMutation = useMutation({
|
|
mutationFn: () => api.savePage('profile-card', JSON.stringify(card)),
|
|
onSuccess: () => {
|
|
setSavedAt(new Date());
|
|
queryClient.invalidateQueries({ queryKey: ['page', 'profile-card'] });
|
|
},
|
|
});
|
|
|
|
const uploadMutation = useMutation({
|
|
mutationFn: (file: File) => api.uploadImage(file),
|
|
onSuccess: ({ url }, file) => {
|
|
// 在光标处插入图片 Markdown，没有光标就追加到末尾
|
|
const view = editorRef.current?.view;
|
|
const snippet = ``;
|
|
if (view) {
|
|
const pos = view.state.selection.main.head;
|
|
view.dispatch({ changes: { from: pos, insert: snippet } });
|
|
} else {
|
|
setContent((c) => `${c}\n${snippet}\n`);
|
|
}
|
|
},
|
|
onError: (e) => alert(`上传失败：${e.message}`),
|
|
});
|
|
|
|
const avatarUploadMutation = useMutation({
|
|
mutationFn: (file: File) => api.uploadImage(file),
|
|
onSuccess: ({ url }) => setCard((c) => ({ ...c, avatar_url: url })),
|
|
onError: (e) => alert(`上传失败：${e.message}`),
|
|
});
|
|
|
|
if (isLoading || !initialized) {
|
|
return (
|
|
<div className="flex h-screen items-center justify-center">
|
|
<Loader2 className="animate-spin text-indigo-500" size={32} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const inputCls =
|
|
'w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm outline-none focus:border-indigo-500 dark:border-indigo-500/20 dark:bg-space-800 dark:text-star';
|
|
const labelCls = 'mb-1 block text-xs font-medium text-slate-500 dark:text-star-dim';
|
|
const setCardField = (key: keyof ProfileContent) => (e: React.ChangeEvent<HTMLInputElement>) =>
|
|
setCard({ ...card, [key]: e.target.value });
|
|
|
|
return (
|
|
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="flex h-screen flex-col pt-16">
|
|
<header className="flex items-center justify-between border-b border-slate-200 bg-white/90 px-4 py-3 backdrop-blur dark:border-indigo-500/10 dark:bg-space-900/90">
|
|
<div className="flex items-center gap-3">
|
|
<button
|
|
onClick={() => navigate('/admin')}
|
|
className="rounded-lg p-2 text-slate-500 hover:bg-slate-100 dark:text-star-dim dark:hover:bg-space-800"
|
|
>
|
|
<ArrowLeft size={18} />
|
|
</button>
|
|
<span className="text-lg font-bold text-slate-900 dark:text-star">个人主页</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={() => setShowCard(!showCard)}
|
|
className={`inline-flex items-center gap-1 rounded-lg border px-3 py-2 text-sm transition-colors ${
|
|
showCard
|
|
? 'border-indigo-500 bg-indigo-50 text-indigo-700 dark:border-nebula dark:bg-indigo-500/10 dark:text-nebula-glow'
|
|
: 'border-slate-200 bg-white text-slate-600 hover:border-indigo-500 dark:border-indigo-500/20 dark:bg-space-800 dark:text-star-dim'
|
|
}`}
|
|
>
|
|
<IdCard size={14} /> 名片信息
|
|
</button>
|
|
<input
|
|
ref={fileInputRef}
|
|
type="file"
|
|
accept="image/*"
|
|
className="hidden"
|
|
onChange={(e) => {
|
|
const file = e.target.files?.[0];
|
|
if (file) uploadMutation.mutate(file);
|
|
e.target.value = '';
|
|
}}
|
|
/>
|
|
<button
|
|
onClick={() => fileInputRef.current?.click()}
|
|
disabled={uploadMutation.isPending}
|
|
className="inline-flex items-center gap-1 rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-600 transition-colors hover:border-indigo-500 dark:border-indigo-500/20 dark:bg-space-800 dark:text-star-dim"
|
|
>
|
|
{uploadMutation.isPending ? <Loader2 size={14} className="animate-spin" /> : <ImagePlus size={14} />}
|
|
上传图片
|
|
</button>
|
|
<button
|
|
onClick={() => saveMutation.mutate()}
|
|
disabled={saveMutation.isPending}
|
|
className="inline-flex items-center gap-1 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-50 dark:bg-nebula"
|
|
>
|
|
{saveMutation.isPending ? <Loader2 size={14} className="animate-spin" /> : <Check size={14} />}
|
|
保存正文
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
{/* 名片信息面板 */}
|
|
{showCard && (
|
|
<motion.div
|
|
initial={{ height: 0, opacity: 0 }}
|
|
animate={{ height: 'auto', opacity: 1 }}
|
|
className="border-b border-slate-200 bg-slate-50 px-6 py-4 dark:border-indigo-500/10 dark:bg-space-900"
|
|
>
|
|
<div className="grid gap-4 md:grid-cols-3">
|
|
<div className="md:col-span-1">
|
|
<label className={labelCls}>头像</label>
|
|
<div className="flex items-center gap-3">
|
|
{card.avatar_url ? (
|
|
<img src={card.avatar_url} alt="avatar" className="h-12 w-12 rounded-full object-cover" />
|
|
) : (
|
|
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 text-lg font-bold text-white">
|
|
{card.name.charAt(0).toUpperCase()}
|
|
</div>
|
|
)}
|
|
<input
|
|
ref={avatarInputRef}
|
|
type="file"
|
|
accept="image/*"
|
|
className="hidden"
|
|
onChange={(e) => {
|
|
const file = e.target.files?.[0];
|
|
if (file) avatarUploadMutation.mutate(file);
|
|
e.target.value = '';
|
|
}}
|
|
/>
|
|
<button
|
|
onClick={() => avatarInputRef.current?.click()}
|
|
disabled={avatarUploadMutation.isPending}
|
|
className="rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-xs text-slate-600 hover:border-indigo-500 dark:border-indigo-500/20 dark:bg-space-800 dark:text-star-dim"
|
|
>
|
|
{avatarUploadMutation.isPending ? '上传中...' : '上传头像'}
|
|
</button>
|
|
</div>
|
|
<input
|
|
value={card.avatar_url}
|
|
onChange={setCardField('avatar_url')}
|
|
className={`${inputCls} mt-2`}
|
|
placeholder="或直接粘贴图片 URL"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className={labelCls}>名字</label>
|
|
<input value={card.name} onChange={setCardField('name')} className={inputCls} />
|
|
<label className={`${labelCls} mt-3`}>GitHub</label>
|
|
<input value={card.github} onChange={setCardField('github')} className={inputCls} placeholder="https://github.com/..." />
|
|
</div>
|
|
<div>
|
|
<label className={labelCls}>一句话简介</label>
|
|
<input value={card.bio} onChange={setCardField('bio')} className={inputCls} />
|
|
<div className="mt-3 grid grid-cols-2 gap-3">
|
|
<div>
|
|
<label className={labelCls}>邮箱</label>
|
|
<input value={card.email} onChange={setCardField('email')} className={inputCls} />
|
|
</div>
|
|
<div>
|
|
<label className={labelCls}>个人网站</label>
|
|
<input value={card.website} onChange={setCardField('website')} className={inputCls} placeholder="留空不显示" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={() => saveCardMutation.mutate()}
|
|
disabled={saveCardMutation.isPending}
|
|
className="mt-4 inline-flex items-center gap-1 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-50 dark:bg-nebula"
|
|
>
|
|
{saveCardMutation.isPending ? <Loader2 size={14} className="animate-spin" /> : <Check size={14} />}
|
|
保存名片
|
|
</button>
|
|
</motion.div>
|
|
)}
|
|
|
|
<div className="relative flex flex-1 overflow-hidden">
|
|
<div className="flex w-1/2 flex-col border-r border-slate-200 dark:border-indigo-500/20">
|
|
<CodeMirror
|
|
ref={editorRef}
|
|
value={content}
|
|
height="100%"
|
|
theme={theme === 'dark' ? oneDark : 'light'}
|
|
extensions={[markdown()]}
|
|
onChange={(value) => setContent(value)}
|
|
className="flex-1 min-h-0 text-sm"
|
|
basicSetup={{ lineNumbers: true, highlightActiveLineGutter: true, highlightActiveLine: true, foldGutter: false }}
|
|
/>
|
|
</div>
|
|
<div className="w-1/2 overflow-y-auto bg-slate-50 dark:bg-space-950">
|
|
<div className="prose prose-lg max-w-none p-8 dark:prose-invert">
|
|
<Markdown content={content} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer className="flex items-center justify-between border-t border-slate-200 bg-white px-4 py-2 text-xs text-slate-500 dark:border-indigo-500/10 dark:bg-space-900 dark:text-star-dim">
|
|
<span>{content.length} 字符</span>
|
|
{savedAt && <span>已保存 {savedAt.toLocaleTimeString()}</span>}
|
|
</footer>
|
|
</motion.div>
|
|
);
|
|
}
|