manual save(2026-01-19 16:32)

src/pages/Home.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
+import { Link } from 'react-router-dom'
 import { Header } from '../components/Header'
 import { Footer } from '../components/Footer'
 import { PostCard } from '../components/PostCard'
@@ -6,7 +7,15 @@ import { PostCardSkeleton } from '../components/PostCardSkeleton'
 import { Posts } from '../clientsdk/sdk.gen'
 import { createClient } from '../clientsdk/client'
 import { customQuerySerializer } from '../clientsdk/querySerializer'
-import { TENANT_SLUG, TENANT_API_KEY, API_URL } from '../config'
+import type { Post } from '../clientsdk/types.gen'
+import { TENANT_API_KEY, TENANT_SLUG, API_URL } from '../config'
+import { SITE } from '../site'
+import { isCategory } from '../utils/payload'
+import { useI18n } from '../i18n/useI18n'
+
+type ListResponse<T> = { docs: T[] }
+
+type ListPostsResult = { data?: ListResponse<Post> }
 
 const client = createClient({
   baseUrl: API_URL,
@@ -17,8 +26,35 @@ const client = createClient({
   },
 })
 
+const stripHtml = (html: string): string => {
+  const tmp = document.createElement('div')
+  tmp.innerHTML = html
+  return tmp.textContent || tmp.innerText || ''
+}
+
+const formatDate = (dateString: string): string => {
+  const date = new Date(dateString)
+  return date.toLocaleDateString('th-TH', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  })
+}
+
+const getCategoryTitle = (post: Post): string | undefined => {
+  const first = post.categories?.[0]
+  return isCategory(first) ? first.title : undefined
+}
+
+const FEATURED_KEYS = [
+  { title: 'home.feature.1.title', description: 'home.feature.1.desc' },
+  { title: 'home.feature.2.title', description: 'home.feature.2.desc' },
+  { title: 'home.feature.3.title', description: 'home.feature.3.desc' },
+] as const
+
 export const Home: React.FC = () => {
-  const [posts, setPosts] = useState<any[]>([])
+  const { t, locale } = useI18n()
+  const [posts, setPosts] = useState<Post[]>([])
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
 
@@ -27,87 +63,172 @@ export const Home: React.FC = () => {
       try {
         setLoading(true)
         setError(null)
-        
-        const response = await Posts.listPosts({
+
+        const response = (await Posts.listPosts({
           client,
           query: {
-            limit: 10,
+            limit: 6,
             sort: '-createdAt',
           },
-        })
-        
-        setPosts((response as any)?.data?.docs || [])
+        })) as ListPostsResult
+
+        setPosts(response.data?.docs ?? [])
       } catch (err) {
-        setError(err instanceof Error ? err.message : '加载失败')
-        console.error('获取文章失败:', err)
+        setError(err instanceof Error ? err.message : t('common.loadFailed'))
+        console.error('Fetch posts failed:', err)
       } finally {
         setLoading(false)
       }
     }
 
     fetchPosts()
-  }, [])
+  }, [t])
 
-  const stripHtml = (html: string): string => {
-    const tmp = document.createElement('div')
-    tmp.innerHTML = html
-    return tmp.textContent || tmp.innerText || ''
-  }
-
-  const formatDate = (dateString: string): string => {
-    const date = new Date(dateString)
-    return date.toLocaleDateString('zh-CN', {
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric',
-    })
-  }
-
-  const getCategoryTitle = (post: any): string | undefined => {
-    // categories is an array, get the first one
-    return post.categories?.[0]?.title
-  }
-
-  const handlePostClick = (slug: string) => {
-    window.location.href = `/posts/${slug}`
-  }
+  const items = useMemo(() => posts, [posts])
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-zinc-50 text-zinc-900">
       <Header />
 
-      <main className="container mx-auto px-4 py-8">
-        <section className="mb-12">
-          <h2 className="text-3xl font-bold text-gray-900 mb-2">📚 最新文章</h2>
-          <p className="text-gray-600">探索我们的最新内容</p>
+      <main className="mx-auto w-full max-w-6xl px-4">
+        <section className="grid gap-10 py-12 lg:grid-cols-2 lg:items-center">
+          <div>
+            <p className="text-sm font-semibold tracking-wide text-red-700">
+              {locale === 'zh' ? SITE.nameZh : SITE.nameTh}
+            </p>
+            <h1 className="mt-3 text-5xl font-semibold tracking-tight">
+              {t('home.hero.title')}
+            </h1>
+            <p className="mt-4 max-w-xl text-zinc-600">{t('home.hero.desc')}</p>
+
+            <div className="mt-7 flex flex-wrap gap-3">
+              <Link
+                to="/menu"
+                className="inline-flex items-center justify-center rounded-xl bg-zinc-900 px-5 py-3 text-sm font-semibold text-white"
+              >
+                {t('home.hero.cta.menu')}
+              </Link>
+              <Link
+                to="/contact"
+                className="inline-flex items-center justify-center rounded-xl border border-zinc-200 bg-white px-5 py-3 text-sm font-semibold text-zinc-900 hover:bg-zinc-50"
+              >
+                {t('home.hero.cta.contact')}
+              </Link>
+            </div>
+
+            <dl className="mt-8 grid max-w-xl grid-cols-2 gap-4 text-sm">
+              <div className="rounded-2xl border border-zinc-200 bg-white p-4">
+                <dt className="font-semibold text-zinc-900">{t('common.phone')}</dt>
+                <dd className="mt-1 text-zinc-600">
+                  <a className="underline" href={`tel:${SITE.phone}`}>
+                    {SITE.phone}
+                  </a>
+                </dd>
+              </div>
+              <div className="rounded-2xl border border-zinc-200 bg-white p-4">
+                <dt className="font-semibold text-zinc-900">{t('common.hours')}</dt>
+                <dd className="mt-1 text-zinc-600">
+                  {t('home.hoursPreview')}
+                </dd>
+              </div>
+            </dl>
+          </div>
+
+          <div className="overflow-hidden rounded-3xl border border-zinc-200 bg-white shadow-sm">
+            <img
+              src="https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&w=1400&q=80"
+              alt="อาหารจีนรสจัดเสิร์ฟบนโต๊ะ"
+              className="h-80 w-full object-cover lg:h-[520px]"
+              loading="lazy"
+            />
+          </div>
         </section>
 
-        {error && (
-          <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-6">
-            <strong>错误：</strong> {error}
-          </div>
-        )}
+        <section className="grid gap-6 md:grid-cols-3">
+          {FEATURED_KEYS.map((item) => (
+            <div
+              key={item.title}
+              className="rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm"
+            >
+              <h2 className="text-lg font-semibold">{t(item.title)}</h2>
+              <p className="mt-2 text-sm text-zinc-600">{t(item.description)}</p>
+            </div>
+          ))}
+        </section>
 
-        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-          {loading
-            ? Array.from({ length: 6 }).map((_, i) => <PostCardSkeleton key={i} />)
-            : posts.map((post) => (
-                <PostCard
-                  key={post.id}
-                  title={post.title}
-                  excerpt={stripHtml(post.content_html || post.content?.root?.children?.[0]?.children?.[0]?.text || post.title)}
-                  category={getCategoryTitle(post)}
-                  date={formatDate(post.createdAt)}
-                  onClick={() => handlePostClick(post.slug)}
-                />
-              ))}
-        </div>
-
-        {!loading && posts.length === 0 && !error && (
-          <div className="text-center py-12">
-            <p className="text-gray-500 text-lg">暂无文章</p>
+        <section className="mt-12" aria-labelledby="latest-news">
+          <div className="flex items-end justify-between gap-4">
+            <div>
+              <h2 id="latest-news" className="text-2xl font-semibold tracking-tight">
+                {t('home.section.latestNews')}
+              </h2>
+              <p className="mt-2 text-sm text-zinc-600">
+                {t('home.section.latestNews.desc')}
+              </p>
+            </div>
+            <Link
+              to="/news"
+              className="text-sm font-semibold text-red-700 hover:underline"
+            >
+              {t('home.section.latestNews.more')}
+            </Link>
           </div>
-        )}
+
+          {error ? (
+            <div
+              role="alert"
+              className="mt-6 rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-red-800"
+            >
+              {error}
+            </div>
+          ) : null}
+
+          <div className="mt-6 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+            {loading
+              ? Array.from({ length: 6 }).map((_, i) => (
+                  <PostCardSkeleton key={i} />
+                ))
+              : items.map((post) => (
+                  <PostCard
+                    key={post.id}
+                    title={post.title}
+                    excerpt={stripHtml(post.content_html ?? '') || post.title}
+                    category={getCategoryTitle(post)}
+                    date={formatDate(post.createdAt)}
+                    to={`/news/${post.slug}`}
+                  />
+                ))}
+          </div>
+
+          {!loading && items.length === 0 && !error ? (
+            <div className="py-12 text-center text-zinc-600">
+              {t('home.emptyNews')}
+            </div>
+          ) : null}
+        </section>
+
+        <section className="mt-14 rounded-3xl bg-zinc-900 px-6 py-10 text-white">
+          <h2 className="text-3xl font-semibold tracking-tight">
+            {t('home.cta.title')}
+          </h2>
+          <p className="mt-3 max-w-2xl text-zinc-200">{t('home.cta.desc')}</p>
+          <div className="mt-6 flex flex-wrap gap-3">
+            <a
+              href={`tel:${SITE.phone}`}
+              className="inline-flex items-center justify-center rounded-xl bg-white px-5 py-3 text-sm font-semibold text-zinc-900"
+            >
+              {t('home.cta.call')}
+            </a>
+            <Link
+              to="/contact"
+              className="inline-flex items-center justify-center rounded-xl border border-white/30 px-5 py-3 text-sm font-semibold text-white hover:bg-white/10"
+            >
+              {t('home.cta.map')}
+            </Link>
+          </div>
+        </section>
+
+        <div className="h-14" />
       </main>
 
       <Footer />