first commit

src/components/Footer.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+export const Footer: React.FC = () => {
+  return (
+    <footer className="bg-gray-50 border-t border-gray-200 py-8 mt-12">
+      <div className="container mx-auto px-4 text-center text-gray-600">
+        <p>Powered by TenantCMS</p>
+        <p className="text-sm mt-2">
+          Using X-Tenant-Slug for multi-tenant authentication
+        </p>
+      </div>
+    </footer>
+  )
+}

src/components/Header.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+export const Header: React.FC = () => {
+  return (
+    <header className="bg-white border-b border-gray-200 sticky top-0 z-10">
+      <div className="container mx-auto px-4 py-4">
+        <div className="flex items-center justify-between">
+          <h1 className="text-2xl font-bold text-gray-900">
+            TenantCMS <span className="text-blue-600">Demo</span>
+          </h1>
+          <nav className="flex items-center gap-4">
+            <a href="/" className="text-gray-600 hover:text-gray-900">首页</a>
+            <a href="/categories" className="text-gray-600 hover:text-gray-900">分类</a>
+          </nav>
+        </div>
+      </div>
+    </header>
+  )
+}

src/components/PostCard.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+
+interface PostCardProps {
+  title: string
+  excerpt: string
+  category?: string
+  date: string
+  onClick?: () => void
+}
+
+export const PostCard: React.FC<PostCardProps> = ({
+  title,
+  excerpt,
+  category,
+  date,
+  onClick,
+}) => {
+  return (
+    <article
+      className="border border-gray-200 rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow cursor-pointer bg-white"
+      onClick={onClick}
+    >
+      <div className="flex items-center gap-2 mb-2">
+        {category && (
+          <span className="px-2 py-1 text-xs font-medium bg-blue-100 text-blue-700 rounded-full">
+            {category}
+          </span>
+        )}
+        <span className="text-sm text-gray-500">{date}</span>
+      </div>
+      <h2 className="text-xl font-semibold text-gray-900 mb-2">{title}</h2>
+      <p className="text-gray-600 line-clamp-3">{excerpt}</p>
+      <div className="mt-4 text-blue-600 text-sm font-medium flex items-center gap-1">
+        阅读更多
+        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+        </svg>
+      </div>
+    </article>
+  )
+}

src/components/PostCardSkeleton.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+export const PostCardSkeleton: React.FC = () => {
+  return (
+    <div className="border border-gray-200 rounded-lg p-6 shadow-sm bg-white animate-pulse">
+      <div className="flex items-center gap-2 mb-2">
+        <div className="w-16 h-5 bg-gray-200 rounded-full"></div>
+        <div className="w-20 h-4 bg-gray-200 rounded"></div>
+      </div>
+      <div className="h-6 bg-gray-200 rounded w-3/4 mb-3"></div>
+      <div className="space-y-2">
+        <div className="h-4 bg-gray-200 rounded w-full"></div>
+        <div className="h-4 bg-gray-200 rounded w-5/6"></div>
+        <div className="h-4 bg-gray-200 rounded w-4/6"></div>
+      </div>
+      <div className="mt-4 h-4 bg-gray-200 rounded w-20"></div>
+    </div>
+  )
+}