feat: 个人博客全栈实现（Rust/Axum + React/Tailwind + PostgreSQL）
后端（Axum + sqlx）： - GitHub OAuth 三层权限（管理员/用户/游客），MOCK_OAUTH 本地调试开关 - 文章 CRUD、草稿自动保存、发布/私有分离，发布时渲染 HTML - 目录（folder 路径分层）、标签、评论、RSS、热门文章（按评论数） - pages 表驱动动态内容：关于页、首页标题、个人名片 - S3 兼容对象存储图片上传接口（rust-s3，未配置时明确报错） - 发布时自动提取正文首图作为封面 cover_url - sqlx migrate 管理 5 个迁移 前端（React + Tailwind）： - 白天 Editorial / 黑夜星空双主题 - 首页（列表 + 热门侧栏 + 可编辑大标题）、文库（目录树+标签+搜索） - Profile 页（GitHub 风格名片卡，全部字段后台可编辑） - 后台：文件树文章管理、CodeMirror 编辑器（实时预览/自动保存/传图） - Markdown 渲染：KaTeX 公式、代码块语言标注 + 双主题语法高亮 - 有封面的文章卡片自动整行展示，全局 ErrorBoundary 部署： - docker-compose 本地三容器（postgres/backend/frontend） - k8s manifests（适配 Caddy 终结 TLS → 隧道 → traefik 明文路由） - 前端静态文件可由 Caddy 直接托管，集群只需 backend + postgres - 可选 postgres 每日备份到 S3 的 CronJob
This commit is contained in:
@@ -0,0 +1,254 @@
|
||||
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 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user