novalon/novalon-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement frontend-backend configuration linkage

Browse Source 
- Create public config API for frontend consumption
- Add configuration fetching to homepage
- Implement module show/hide logic based on config
- Add support for Services items filtering
- Add support for Products featured products and pricing display
- Add support for News display count, categories, and sort order
- Fix table name from 'configs' to 'siteConfig' in API route
- Update type definitions for proper TypeScript support
This commit is contained in:
张翔
2026-03-13 13:11:20 +08:00
parent f93f802427
commit 4fdfc2d8b4
100 changed files with 894 additions and 316 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/footer.test.tsx
+39 -4
View File
@@ -102,16 +102,40 @@ describe('Footer', () => {
it('should render contact details', () => {
render(<Footer />);
expect(screen.getByText('contact@novalon.cn')).toBeInTheDocument();
expect(screen.getByText('028-88888888')).toBeInTheDocument();
expect(screen.getByText('中国四川省成都市龙泉驿区幸福路12号')).toBeInTheDocument();
});
});
describe('Card Layout', () => {
it('should render three card sections', () => {
render(<Footer />);
const cards = screen.getAllByTestId(/card/);
expect(cards.length).toBeGreaterThanOrEqual(3);
});
it('should render brand card with logo and description', () => {
render(<Footer />);
expect(screen.getByAltText('四川睿新致远科技有限公司')).toBeInTheDocument();
expect(screen.getByText('以智慧连接数字趋势，以伙伴身份陪您成长')).toBeInTheDocument();
});
it('should render navigation card with quick links and services', () => {
render(<Footer />);
expect(screen.getByText('快速链接')).toBeInTheDocument();
expect(screen.getByText('服务项目')).toBeInTheDocument();
});
it('should render contact card with contact info and QR code', () => {
render(<Footer />);
expect(screen.getByText('联系方式')).toBeInTheDocument();
expect(screen.getByText('企业微信业务咨询')).toBeInTheDocument();
});
});
describe('Icons', () => {
it('should render contact icons', () => {
render(<Footer />);
expect(screen.getByTestId('mail-icon')).toBeInTheDocument();
expect(screen.getByTestId('phone-icon')).toBeInTheDocument();
expect(screen.getByTestId('map-pin-icon')).toBeInTheDocument();
});
});
@@ -169,15 +193,26 @@ describe('Footer', () => {
});
describe('QR Code Section', () => {
it('should render QR code image', () => {
it('should render WeChat QR code image', () => {
render(<Footer />);
const qrCode = screen.getByAltText('微信公众号二维码');
expect(qrCode).toBeInTheDocument();
});
it('should render QR code description', () => {
it('should render WeChat QR code description', () => {
render(<Footer />);
expect(screen.getByText('扫码关注获取最新资讯')).toBeInTheDocument();
});
it('should render Enterprise WeChat QR code image', () => {
render(<Footer />);
const qrCode = screen.getByAltText('企业微信业务咨询二维码');
expect(qrCode).toBeInTheDocument();
});
it('should render Enterprise WeChat QR code description', () => {
render(<Footer />);
expect(screen.getByText('扫码添加企业微信客服')).toBeInTheDocument();
});
});
});
src/components/layout/footer.tsx
+70 -59
View File
@@ -1,30 +1,30 @@
import Link from 'next/link';
import Image from 'next/image';
import { Mail, Phone, MapPin } from 'lucide-react';
import { Mail, MapPin } from 'lucide-react';
import { COMPANY_INFO, NAVIGATION } from '@/lib/constants';
export function Footer() {
return (
<footer className="bg-[#F5F5F5] border-t border-[#E5E5E5] py-12" data-testid="footer" role="contentinfo">
<div className="container-wide">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
<div className="lg:col-span-1">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
<div className="bg-white rounded-xl p-6 border border-[#E5E5E5] shadow-sm hover:shadow-md hover:-translate-y-1 transition-all duration-300" data-testid="card-brand">
<div className="flex items-center mb-6">
<Image
src="/logo.svg"
alt={COMPANY_INFO.name}
width={40}
height={40}
className="h-10 w-auto"
width={48}
height={48}
className="h-12 w-auto transition-transform duration-200 hover:scale-105"
loading="lazy"
/>
</div>
<p className="text-[#5C5C5C] text-sm leading-relaxed mb-6">
{COMPANY_INFO.description}
</p>
<div className="mt-6 pt-6 border-t border-[#E5E5E5]">
<p className="text-sm text-[#5C5C5C] mb-3 font-medium">关注公众号</p>
<div className="inline-block bg-white p-3 rounded-lg border border-[#E5E5E5] shadow-sm hover:shadow-md transition-shadow duration-200">
<div className="pt-6 border-t border-[#E5E5E5]">
<p className="text-sm text-[#5C5C5C] mb-4 font-medium">关注公众号</p>
<div className="inline-block bg-white p-4 rounded-lg border border-[#E5E5E5] shadow-sm hover:shadow-md transition-shadow duration-200">
<Image
src="/images/qrcode_for_gh_a297181ff548_258.jpg"
alt="微信公众号二维码"
@@ -38,64 +38,75 @@ export function Footer() {
</div>
</div>
<div>
<h3 className="font-semibold text-lg mb-6 text-[#1C1C1C]">快速链接</h3>
<ul className="space-y-3">
{NAVIGATION.map((item) => (
<li key={item.id}>
<Link
href={item.href}
className="text-[#3D3D3D] hover:text-[#C41E3A] transition-colors"
>
{item.label}
<div className="bg-white rounded-xl p-6 border border-[#E5E5E5] shadow-sm hover:shadow-md hover:-translate-y-1 transition-all duration-300" data-testid="card-navigation">
<div className="mb-6">
<h3 className="font-semibold text-lg mb-4 text-[#1C1C1C]">快速链接</h3>
<ul className="space-y-2.5">
{NAVIGATION.map((item) => (
<li key={item.id}>
<Link
href={item.href}
className="text-[#3D3D3D] hover:text-[#C41E3A] transition-colors duration-200 inline-block hover:translate-x-1 transition-transform"
>
{item.label}
</Link>
</li>
))}
</ul>
</div>
<div className="pt-6 border-t border-[#E5E5E5]">
<h3 className="font-semibold text-lg mb-4 text-[#1C1C1C]">服务项目</h3>
<ul className="space-y-2.5">
<li>
<Link href="/services/software" className="text-[#3D3D3D] hover:text-[#C41E3A] transition-colors duration-200 inline-block hover:translate-x-1 transition-transform">
软件开发
</Link>
</li>
))}
</ul>
<li>
<Link href="/services/cloud" className="text-[#3D3D3D] hover:text-[#C41E3A] transition-colors duration-200 inline-block hover:translate-x-1 transition-transform">
云服务
</Link>
</li>
<li>
<Link href="/services/data" className="text-[#3D3D3D] hover:text-[#C41E3A] transition-colors duration-200 inline-block hover:translate-x-1 transition-transform">
数据分析
</Link>
</li>
<li>
<Link href="/services/security" className="text-[#3D3D3D] hover:text-[#C41E3A] transition-colors duration-200 inline-block hover:translate-x-1 transition-transform">
信息安全
</Link>
</li>
</ul>
</div>
</div>
<div>
<h3 className="font-semibold text-lg mb-6 text-[#1C1C1C]">服务项目</h3>
<ul className="space-y-3">
<li>
<Link href="/services/software" className="text-[#3D3D3D] hover:text-[#C41E3A] transition-colors">
软件开发
</Link>
</li>
<li>
<Link href="/services/cloud" className="text-[#3D3D3D] hover:text-[#C41E3A] transition-colors">
云服务
</Link>
</li>
<li>
<Link href="/services/data" className="text-[#3D3D3D] hover:text-[#C41E3A] transition-colors">
数据分析
</Link>
</li>
<li>
<Link href="/services/security" className="text-[#3D3D3D] hover:text-[#C41E3A] transition-colors">
信息安全
</Link>
</li>
</ul>
</div>
<div>
<div className="bg-white rounded-xl p-6 border border-[#E5E5E5] shadow-sm hover:shadow-md hover:-translate-y-1 transition-all duration-300" data-testid="card-contact">
<h3 className="font-semibold text-lg mb-6 text-[#1C1C1C]">联系方式</h3>
<ul className="space-y-4">
<li className="flex items-start gap-3">
<MapPin className="w-5 h-5 text-[#C41E3A] mt-0.5" />
<MapPin className="w-5 h-5 text-[#C41E3A] mt-0.5 flex-shrink-0" />
<span className="text-[#3D3D3D]">{COMPANY_INFO.address}</span>
</li>
<li className="flex items-center gap-3">
<Phone className="w-5 h-5 text-[#C41E3A]" />
<span className="text-[#3D3D3D]">{COMPANY_INFO.phone}</span>
</li>
<li className="flex items-center gap-3">
<Mail className="w-5 h-5 text-[#C41E3A]" />
<Mail className="w-5 h-5 text-[#C41E3A] flex-shrink-0" />
<span className="text-[#3D3D3D]">{COMPANY_INFO.email}</span>
</li>
</ul>
<div className="mt-6 pt-6 border-t border-[#E5E5E5]">
<p className="text-sm text-[#5C5C5C] mb-4 font-medium">企业微信业务咨询</p>
<div className="inline-block bg-white p-4 rounded-lg border border-[#E5E5E5] shadow-sm hover:shadow-md transition-shadow duration-200">
<Image
src="/images/149A1D2F-D9FD-49C7-B139-142C50C5FE8B_1_201_a.jpeg"
alt="企业微信业务咨询二维码"
width={120}
height={120}
className="w-30 h-30"
loading="lazy"
/>
</div>
<p className="text-xs text-[#718096] mt-2">扫码添加企业微信客服</p>
</div>
</div>
</div>
@@ -105,22 +116,22 @@ export function Footer() {
© {new Date().getFullYear()} {COMPANY_INFO.name}. All rights reserved.
</p>
<div className="flex gap-6">
<Link href="/privacy" className="text-[#5C5C5C] hover:text-[#C41E3A] text-sm transition-colors">
<Link href="/privacy" className="text-[#5C5C5C] hover:text-[#C41E3A] text-sm transition-colors duration-200">
隐私政策
</Link>
<Link href="/terms" className="text-[#5C5C5C] hover:text-[#C41E3A] text-sm transition-colors">
<Link href="/terms" className="text-[#5C5C5C] hover:text-[#C41E3A] text-sm transition-colors duration-200">
服务条款
</Link>
</div>
</div>
<div className="text-center mt-4 pt-4 border-t border-[#E5E5E5]">
<div className="text-center mt-6 pt-6 border-t border-[#E5E5E5]">
<div className="flex flex-col sm:flex-row justify-center items-center gap-2 sm:gap-4 text-xs text-[#718096]">
<a
href="https://beian.miit.gov.cn/"
target="_blank"
rel="noopener noreferrer"
className="hover:text-[#C41E3A] transition-colors"
className="hover:text-[#C41E3A] transition-colors duration-200"
>
{COMPANY_INFO.icp}
</a>
@@ -129,7 +140,7 @@ export function Footer() {
href="http://www.beian.gov.cn/"
target="_blank"
rel="noopener noreferrer"
className="hover:text-[#C41E3A] transition-colors"
className="hover:text-[#C41E3A] transition-colors duration-200"
>
{COMPANY_INFO.police}
</a>
src/components/layout/header.tsx
+1 -2
View File
@@ -200,9 +200,8 @@ function HeaderContent() {
<Button
size="sm"
asChild
data-testid="consult-button"
>
<Link href="/contact">立即咨询</Link>
<Link href="/contact" data-testid="consult-button">立即咨询</Link>
</Button>
</div>
src/components/sections/news-section.tsx
+28 -2
View File
@@ -8,11 +8,37 @@ import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/com
import { ArrowRight, Calendar } from 'lucide-react';
import { NEWS } from '@/lib/constants';
export function NewsSection() {
interface NewsConfig {
enabled?: boolean;
displayCount?: number;
categories?: string[];
sortOrder?: 'asc' | 'desc';
}
interface NewsSectionProps {
config?: NewsConfig;
}
export function NewsSection({ config }: NewsSectionProps) {
const ref = useRef(null);
const isInView = useInView(ref, { once: true, margin: '-100px' });
const displayedNews = useMemo(() => NEWS.slice(0, 4), []);
const displayedNews = useMemo(() => {
let filtered = NEWS;
if (config?.categories && config.categories.length > 0) {
filtered = filtered.filter(news => config.categories?.includes(news.category));
}
if (config?.sortOrder === 'asc') {
filtered = [...filtered].sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
} else {
filtered = [...filtered].sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
}
const count = config?.displayCount || 4;
return filtered.slice(0, count);
}, [config]);
return (
<section id="news" role="region" aria-labelledby="news-heading" className="py-24 bg-[#F5F5F5]" ref={ref}>
src/components/sections/products-section.tsx
+33 -3
View File
@@ -2,7 +2,7 @@
import { motion } from 'framer-motion';
import { useInView } from 'framer-motion';
import { useRef } from 'react';
import { useRef, useMemo } from 'react';
import Link from 'next/link';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
@@ -10,10 +10,27 @@ import { Badge } from '@/components/ui/badge';
import { ArrowRight, Check, TrendingUp } from 'lucide-react';
import { PRODUCTS } from '@/lib/constants';
export function ProductsSection() {
interface ProductsConfig {
enabled?: boolean;
showPricing?: boolean;
featuredProducts?: string[];
}
interface ProductsSectionProps {
config?: ProductsConfig;
}
export function ProductsSection({ config }: ProductsSectionProps) {
const ref = useRef(null);
const isInView = useInView(ref, { once: true, margin: '-100px' });
const filteredProducts = useMemo(() => {
if (!config?.featuredProducts || config.featuredProducts.length === 0) {
return PRODUCTS;
}
return PRODUCTS.filter(product => config.featuredProducts?.includes(product.id));
}, [config]);
return (
<section id="products" role="region" aria-labelledby="products-heading" className="py-24 bg-[#F5F7FA] relative overflow-hidden" ref={ref}>
<div className="absolute top-1/2 left-0 w-[400px] h-[400px] bg-[rgba(79,70,229,0.03)] rounded-full blur-3xl" />
@@ -34,7 +51,7 @@ export function ProductsSection() {
</motion.div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{PRODUCTS.map((product, idx) => (
{filteredProducts.map((product, idx) => (
<motion.div
key={product.id}
initial={{ opacity: 0, y: 20 }}
@@ -84,6 +101,19 @@ export function ProductsSection() {
</ul>
</div>
{config?.showPricing && product.pricing && (
<div className="mb-4 p-3 bg-[#F5F7FA] rounded-lg">
<p className="text-sm font-medium text-[#1C1C1C] mb-2">价格方案</p>
<div className="space-y-1">
{Object.entries(product.pricing).map(([key, value]) => (
<p key={key} className="text-xs text-[#5C5C5C]">
{value}
</p>
))}
</div>
</div>
)}
<Button variant="outline" className="w-full mt-auto group-hover:bg-[#A01830] group-hover:text-white group-hover:border-[#A01830] transition-colors">
了解详情
<ArrowRight className="ml-2 w-4 h-4" />
src/components/sections/services-section.tsx
+19 -3
View File
@@ -2,7 +2,7 @@
import { motion } from 'framer-motion';
import { useInView } from 'framer-motion';
import { useRef } from 'react';
import { useRef, useMemo } from 'react';
import Link from 'next/link';
import { Code, Cloud, BarChart3, Shield, ArrowRight } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
@@ -16,10 +16,26 @@ const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
Shield,
};
export function ServicesSection() {
interface ServicesConfig {
enabled?: boolean;
items?: string[];
}
interface ServicesSectionProps {
config?: ServicesConfig;
}
export function ServicesSection({ config }: ServicesSectionProps) {
const ref = useRef(null);
const isInView = useInView(ref, { once: true, margin: '-100px' });
const filteredServices = useMemo(() => {
if (!config?.items || config.items.length === 0) {
return SERVICES;
}
return SERVICES.filter(service => config.items?.includes(service.id));
}, [config]);
return (
<section id="services" aria-labelledby="services-heading" className="py-24 bg-white relative overflow-hidden" ref={ref}>
<div className="absolute top-1/3 left-0 w-[400px] h-[400px] bg-[rgba(196,30,58,0.03)] rounded-full blur-3xl" />
@@ -41,7 +57,7 @@ export function ServicesSection() {
</motion.div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
{SERVICES.map((service, index) => {
{filteredServices.map((service, index) => {
const Icon = iconMap[service.icon];
return (
<motion.div