318 lines
9.4 KiB
TypeScript
318 lines
9.4 KiB
TypeScript
|
'use client';
|
|||
|
|
|
|||
|
|
import { useEffect, useState } from 'react';
|
|||
|
|
import {
|
|||
|
|
Building2,
|
|||
|
|
Phone,
|
|||
|
|
Mail,
|
|||
|
|
MapPin,
|
|||
|
|
ShieldCheck,
|
|||
|
|
FileText,
|
|||
|
|
Loader2,
|
|||
|
|
} from 'lucide-react';
|
|||
|
|
import { AdminHeader } from '@/components/admin/AdminHeader';
|
|||
|
|
import { Button } from '@/components/ui/button';
|
|||
|
|
import { Input } from '@/components/ui/input';
|
|||
|
|
import { Label } from '@/components/ui/label';
|
|||
|
|
import { Textarea } from '@/components/ui/textarea';
|
|||
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|||
|
|
import { ImageUpload } from '@/components/admin/ImageUpload';
|
|||
|
|
import { RichEditor } from '@/components/admin/RichEditor';
|
|||
|
|
import { adminApi } from '@/lib/admin-services';
|
|||
|
|
import type { SiteConfig } from '@/lib/types';
|
|||
|
|
|
|||
|
|
interface FormState {
|
|||
|
|
siteName: string;
|
|||
|
|
logo: string;
|
|||
|
|
tel: string;
|
|||
|
|
address: string;
|
|||
|
|
email: string;
|
|||
|
|
copyright: string;
|
|||
|
|
icp: string;
|
|||
|
|
aboutTitle: string;
|
|||
|
|
aboutContent: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const DEFAULT: FormState = {
|
|||
|
|
siteName: '',
|
|||
|
|
logo: '',
|
|||
|
|
tel: '',
|
|||
|
|
address: '',
|
|||
|
|
email: '',
|
|||
|
|
copyright: '',
|
|||
|
|
icp: '',
|
|||
|
|
aboutTitle: '',
|
|||
|
|
aboutContent: '',
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function SectionHead({
|
|||
|
|
icon,
|
|||
|
|
title,
|
|||
|
|
desc,
|
|||
|
|
}: {
|
|||
|
|
icon: React.ReactNode;
|
|||
|
|
title: string;
|
|||
|
|
desc: string;
|
|||
|
|
}) {
|
|||
|
|
return (
|
|||
|
|
<div className="mb-5 flex items-center gap-3">
|
|||
|
|
<span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-slate-800 to-slate-900 text-white shadow-md shadow-slate-900/20 ring-1 ring-inset ring-white/10">
|
|||
|
|
{icon}
|
|||
|
|
</span>
|
|||
|
|
<div>
|
|||
|
|
<div className="text-sm font-semibold text-slate-900">{title}</div>
|
|||
|
|
<div className="text-xs text-slate-400">{desc}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function Field({
|
|||
|
|
label,
|
|||
|
|
required,
|
|||
|
|
children,
|
|||
|
|
}: {
|
|||
|
|
label: string;
|
|||
|
|
required?: boolean;
|
|||
|
|
children: React.ReactNode;
|
|||
|
|
}) {
|
|||
|
|
return (
|
|||
|
|
<div className="space-y-1.5">
|
|||
|
|
<Label className="text-xs font-medium text-slate-600">
|
|||
|
|
{label}
|
|||
|
|
{required && <span className="ml-0.5 text-brand-600">*</span>}
|
|||
|
|
</Label>
|
|||
|
|
{children}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function SiteConfigAdminPage() {
|
|||
|
|
const [hydrated, setHydrated] = useState(false);
|
|||
|
|
const [form, setForm] = useState<FormState>(DEFAULT);
|
|||
|
|
const [saving, setSaving] = useState(false);
|
|||
|
|
const [loaded, setLoaded] = useState(false);
|
|||
|
|
|
|||
|
|
useEffect(() => setHydrated(true), []);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (!hydrated) return;
|
|||
|
|
adminApi
|
|||
|
|
.siteConfigGet()
|
|||
|
|
.then((c: SiteConfig) => {
|
|||
|
|
setForm({
|
|||
|
|
siteName: c.siteName,
|
|||
|
|
logo: c.logo,
|
|||
|
|
tel: c.tel,
|
|||
|
|
address: c.address,
|
|||
|
|
email: c.email,
|
|||
|
|
copyright: c.copyright,
|
|||
|
|
icp: c.icp,
|
|||
|
|
aboutTitle: c.aboutTitle,
|
|||
|
|
aboutContent: c.aboutContent ?? '',
|
|||
|
|
});
|
|||
|
|
setLoaded(true);
|
|||
|
|
})
|
|||
|
|
.catch((e) => alert((e as Error).message));
|
|||
|
|
}, [hydrated]);
|
|||
|
|
|
|||
|
|
const onSave = async () => {
|
|||
|
|
if (!form.siteName) {
|
|||
|
|
alert('请填写网站名称');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setSaving(true);
|
|||
|
|
try {
|
|||
|
|
await adminApi.siteConfigUpdate(form);
|
|||
|
|
alert('保存成功');
|
|||
|
|
} catch (e) {
|
|||
|
|
alert((e as Error).message);
|
|||
|
|
} finally {
|
|||
|
|
setSaving(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
if (!loaded) {
|
|||
|
|
return (
|
|||
|
|
<div className="flex h-40 items-center justify-center text-sm text-slate-400">
|
|||
|
|
<Loader2 className="mr-2 h-5 w-5 animate-spin" /> 加载中…
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const cardCls =
|
|||
|
|
'border-slate-200/70 bg-white shadow-[0_1px_3px_rgba(15,23,42,0.04),0_8px_24px_-12px_rgba(79,70,229,0.12)]';
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div>
|
|||
|
|
<AdminHeader
|
|||
|
|
title="网站配置"
|
|||
|
|
description="管理全站基础信息、联系方式、底部版权与企业简介"
|
|||
|
|
actions={
|
|||
|
|
<Button onClick={onSave} disabled={saving}>
|
|||
|
|
{saving ? (
|
|||
|
|
<>
|
|||
|
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
|||
|
|
保存中…
|
|||
|
|
</>
|
|||
|
|
) : (
|
|||
|
|
'保存配置'
|
|||
|
|
)}
|
|||
|
|
</Button>
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<div className="grid gap-5 lg:grid-cols-2">
|
|||
|
|
{/* ===== 品牌标识 ===== */}
|
|||
|
|
<Card className={cardCls}>
|
|||
|
|
<CardContent className="p-6">
|
|||
|
|
<SectionHead
|
|||
|
|
icon={<Building2 className="h-4 w-4" />}
|
|||
|
|
title="品牌标识"
|
|||
|
|
desc="站点名称与 Logo"
|
|||
|
|
/>
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
<Field label="网站名称" required>
|
|||
|
|
<Input
|
|||
|
|
className="h-10"
|
|||
|
|
value={form.siteName}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
setForm({ ...form, siteName: e.target.value })
|
|||
|
|
}
|
|||
|
|
placeholder="如：智管物业"
|
|||
|
|
/>
|
|||
|
|
</Field>
|
|||
|
|
<Field label="Logo 图片">
|
|||
|
|
<ImageUpload
|
|||
|
|
value={form.logo}
|
|||
|
|
onChange={(url) => setForm({ ...form, logo: url })}
|
|||
|
|
hint="透明背景 PNG 最佳，建议 200x48"
|
|||
|
|
/>
|
|||
|
|
</Field>
|
|||
|
|
</div>
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
{/* ===== 联系方式 ===== */}
|
|||
|
|
<Card className={cardCls}>
|
|||
|
|
<CardContent className="p-6">
|
|||
|
|
<SectionHead
|
|||
|
|
icon={<Phone className="h-4 w-4" />}
|
|||
|
|
title="联系方式"
|
|||
|
|
desc="客户咨询与对外联络"
|
|||
|
|
/>
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|||
|
|
<Field label="联系电话">
|
|||
|
|
<div className="relative">
|
|||
|
|
<Phone className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
|
|||
|
|
<Input
|
|||
|
|
className="h-10 pl-9"
|
|||
|
|
value={form.tel}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
setForm({ ...form, tel: e.target.value })
|
|||
|
|
}
|
|||
|
|
placeholder="400-000-0000"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</Field>
|
|||
|
|
<Field label="商务邮箱">
|
|||
|
|
<div className="relative">
|
|||
|
|
<Mail className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
|
|||
|
|
<Input
|
|||
|
|
className="h-10 pl-9"
|
|||
|
|
value={form.email}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
setForm({ ...form, email: e.target.value })
|
|||
|
|
}
|
|||
|
|
placeholder="business@example.com"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</Field>
|
|||
|
|
</div>
|
|||
|
|
<Field label="公司地址">
|
|||
|
|
<div className="relative">
|
|||
|
|
<MapPin className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
|
|||
|
|
<Input
|
|||
|
|
className="h-10 pl-9"
|
|||
|
|
value={form.address}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
setForm({ ...form, address: e.target.value })
|
|||
|
|
}
|
|||
|
|
placeholder="省市区详细地址"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</Field>
|
|||
|
|
</div>
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
{/* ===== 版权与备案 ===== */}
|
|||
|
|
<Card className={cardCls}>
|
|||
|
|
<CardContent className="p-6">
|
|||
|
|
<SectionHead
|
|||
|
|
icon={<ShieldCheck className="h-4 w-4" />}
|
|||
|
|
title="版权与备案"
|
|||
|
|
desc="底部声明与合规信息"
|
|||
|
|
/>
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
<Field label="底部版权">
|
|||
|
|
<Textarea
|
|||
|
|
rows={2}
|
|||
|
|
className="resize-none"
|
|||
|
|
value={form.copyright}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
setForm({ ...form, copyright: e.target.value })
|
|||
|
|
}
|
|||
|
|
placeholder="© 2026 企业名称 版权所有"
|
|||
|
|
/>
|
|||
|
|
</Field>
|
|||
|
|
<Field label="备案号">
|
|||
|
|
<Input
|
|||
|
|
className="h-10"
|
|||
|
|
value={form.icp}
|
|||
|
|
onChange={(e) => setForm({ ...form, icp: e.target.value })}
|
|||
|
|
placeholder="如：京ICP备 00000000 号"
|
|||
|
|
/>
|
|||
|
|
</Field>
|
|||
|
|
</div>
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
{/* ===== 企业简介 ===== */}
|
|||
|
|
<Card className={`${cardCls} lg:col-span-2`}>
|
|||
|
|
<CardContent className="p-6">
|
|||
|
|
<SectionHead
|
|||
|
|
icon={<FileText className="h-4 w-4" />}
|
|||
|
|
title="企业简介"
|
|||
|
|
desc="关于我们页面的标题与正文"
|
|||
|
|
/>
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|||
|
|
<Field label="简介标题">
|
|||
|
|
<Input
|
|||
|
|
className="h-10"
|
|||
|
|
value={form.aboutTitle}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
setForm({ ...form, aboutTitle: e.target.value })
|
|||
|
|
}
|
|||
|
|
placeholder="如：关于我们"
|
|||
|
|
/>
|
|||
|
|
</Field>
|
|||
|
|
</div>
|
|||
|
|
<Field label="简介正文（富文本）">
|
|||
|
|
<RichEditor
|
|||
|
|
value={form.aboutContent}
|
|||
|
|
onChange={(html) =>
|
|||
|
|
setForm({ ...form, aboutContent: html })
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
</Field>
|
|||
|
|
</div>
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|