feat: implement frontend-backend configuration linkage

- 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

src/components/sections/news-section.tsx

@@ -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

@@ -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

@@ -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