's'

2026-03-09 03:45:10 -05:00
parent 7638e4032e
commit 52da06789b
9 changed files with 896 additions and 79 deletions
--- a/app/[locale]/city/[slug]/page.tsx
+++ b/app/[locale]/city/[slug]/page.tsx
@@ -0,0 +1,272 @@
+"use client";
+
+import { use } from "react";
+import { useTranslation, Link } from "@/i18n/navigation";
+import Footer from "@/app/components/Footer";
+
+interface CityGuide {
+  slug: string;
+  nameZh: string;
+  nameEn: string;
+  emoji: string;
+  descriptionZh: string;
+  descriptionEn: string;
+  costOfLiving: {
+    item: string;
+    priceZh: string;
+    priceEn: string;
+  }[];
+  coworking: {
+    name: string;
+    address: string;
+    price: string;
+    rating: number;
+  }[];
+  neighborhoods: {
+    name: string;
+    pros: string;
+    cons: string;
+  }[];
+  tips: string[];
+}
+
+const CITY_GUIDES: CityGuide[] = [
+  {
+    slug: "dali",
+    nameZh: "大理",
+    nameEn: "Dali",
+    emoji: "🏯",
+    descriptionZh: "大理是中国最受欢迎的的数字游民目的地之一，以其悠闲的生活方式、美丽的自然风光和实惠的生活成本著称。",
+    descriptionEn: "Dali is one of China's most popular digital nomad destinations, known for its laid-back lifestyle, beautiful scenery, and affordable cost of living.",
+    costOfLiving: [
+      { item: "租房 (单间)", priceZh: "¥800-1500/月", priceEn: "¥800-1500/month" },
+      { item: "共享办公", priceZh: "¥300-500/月", priceEn: "¥300-500/month" },
+      { item: "餐饮", priceZh: "¥30-50/天", priceEn: "¥30-50/day" },
+      { item: "咖啡", priceZh: "¥15-30/杯", priceEn: "¥15-30/cup" },
+    ],
+    coworking: [
+      { name: "空岛空间", address: "大理古城人民路", price: "¥400/月", rating: 4.8 },
+      { name: "Dreamland", address: "大理古城博爱路", price: "¥350/月", rating: 4.6 },
+      { name: "柴米多", address: "大理古城叶榆路", price: "¥500/月", rating: 4.7 },
+    ],
+    neighborhoods: [
+      { name: "大理古城", pros: "配套设施齐全，咖啡馆多", cons: "游客较多" },
+      { name: "海东", pros: "安静，海景房", cons: "交通不便" },
+      { name: "下关市区", pros: "生活便利，性价比高", cons: "缺乏氛围" },
+    ],
+    tips: [
+      "推荐10月-次年4月前往，天气最佳",
+      "古城内租房建议提前实地看房",
+      "办理民宿短租备案更合规",
+    ],
+  },
+  {
+    slug: "chengdu",
+    nameZh: "成都",
+    nameEn: "Chengdu",
+    emoji: "🐼",
+    descriptionZh: "成都被誉为天府之国，是中国西部的科技中心，也是一座充满生活气息的城市，非常适合数字游民。",
+    descriptionEn: "Chengdu, known as the 'Land of Abundance', is the tech hub of western China and a city full of life, perfect for digital nomads.",
+    costOfLiving: [
+      { item: "租房 (单间)", priceZh: "¥1200-2500/月", priceEn: "¥1200-2500/month" },
+      { item: "共享办公", priceZh: "¥400-800/月", priceEn: "¥400-800/month" },
+      { item: "餐饮", priceZh: "¥40-60/天", priceEn: "¥40-60/day" },
+      { item: "咖啡", priceZh: "¥20-35/杯", priceEn: "¥20-35/cup" },
+    ],
+    coworking: [
+      { name: "Workfrom成都", address: "高新区天府大道", price: "¥600/月", rating: 4.7 },
+      { name: "Feng Coffee", address: "锦江区春熙路", price: "¥500/月", rating: 4.5 },
+      { name: "方糖小镇", address: "武侯区科华北路", price: "¥450/月", rating: 4.6 },
+    ],
+    neighborhoods: [
+      { name: "高新区", pros: "科技公司多，年轻人多", cons: "房价较高" },
+      { name: "锦江区", pros: "美食众多，生活便利", cons: "较拥挤" },
+      { name: "玉林路", pros: "文艺氛围，咖啡馆多", cons: "老小区" },
+    ],
+    tips: [
+      "推荐3-5月或9-11月前往",
+      "高新区互联网公司聚集，便于社交",
+      "美食之都，餐饮选择丰富",
+    ],
+  },
+  {
+    slug: "shenzhen",
+    nameZh: "深圳",
+    nameEn: "Shenzhen",
+    emoji: "🌃",
+    descriptionZh: "深圳是中国最具活力的科技创新城市，毗邻香港，是年轻创业者的天堂。",
+    descriptionEn: "Shenzhen is China's most dynamic tech innovation city, adjacent to Hong Kong, a paradise for young entrepreneurs.",
+    costOfLiving: [
+      { item: "租房 (单间)", priceZh: "¥1500-3500/月", priceEn: "¥1500-3500/month" },
+      { item: "共享办公", priceZh: "¥600-1200/月", priceEn: "¥600-1200/month" },
+      { item: "餐饮", priceZh: "¥50-80/天", priceEn: "¥50-80/day" },
+      { item: "咖啡", priceZh: "¥25-40/杯", priceEn: "¥25-40/cup" },
+    ],
+    coworking: [
+      { name: "WeWork", address: "南山区科技园", price: "¥1000/月", rating: 4.8 },
+      { name: "思微SimplyWork", address: "南山区科兴科学园", price: "¥800/月", rating: 4.6 },
+      { name: "柴火创客空间", address: "南山区高新南七道", price: "¥700/月", rating: 4.7 },
+    ],
+    neighborhoods: [
+      { name: "南山区", pros: "科技公司集中，氛围好", cons: "房价最高" },
+      { name: "福田区", pros: "市中心，交通便利", cons: "缺乏创业氛围" },
+      { name: "龙华区", pros: "性价比高", cons: "较偏远" },
+    ],
+    tips: [
+      "全年气候宜人，随时适合前往",
+      "创业氛围浓厚，便于资源对接",
+      "离香港近，可一日往返",
+    ],
+  },
+  {
+    slug: "hangzhou",
+    nameZh: "杭州",
+    nameEn: "Hangzhou",
+    emoji: "⛲",
+    descriptionZh: "杭州是中国最美的城市之一，阿里巴巴总部所在地，数字经济发达。",
+    descriptionEn: "Hangzhou is one of China's most beautiful cities, home to Alibaba, with a developed digital economy.",
+    costOfLiving: [
+      { item: "租房 (单间)", priceZh: "¥1400-2800/月", priceEn: "¥1400-2800/month" },
+      { item: "共享办公", priceZh: "¥500-900/月", priceEn: "¥500-900/month" },
+      { item: "餐饮", priceZh: "¥45-70/天", priceEn: "¥45-70/day" },
+      { item: "咖啡", priceZh: "¥22-38/杯", priceEn: "¥22-38/cup" },
+    ],
+    coworking: [
+      { name: "Binggo咖啡", address: "西湖区文二路", price: "¥600/月", rating: 4.6 },
+      { name: "创业邦", address: "滨江区江南大道", price: "¥700/月", rating: 4.5 },
+      { name: "福云咖啡", address: "西湖区教工路", price: "¥550/月", rating: 4.4 },
+    ],
+    neighborhoods: [
+      { name: "滨江区", pros: "阿里附近，创业氛围浓", cons: "房价较高" },
+      { name: "西湖区", pros: "环境优美，生活便利", cons: "游客较多" },
+      { name: "余杭区", pros: "性价比高，阿里新总部", cons: "配套不全" },
+    ],
+    tips: [
+      "推荐4-5月前往，西湖景色最美",
+      "阿里巴巴带动数字经济发展",
+      "生活节奏适中，工作生活平衡好",
+    ],
+  },
+];
+
+export default function CityGuidePage({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = use(params);
+  const { t } = useTranslation("cityGuide");
+
+  const city = CITY_GUIDES.find((c) => c.slug === slug);
+
+  if (!city) {
+    return (
+      <div className="min-h-screen bg-[#fafafa] dark:bg-gray-950">
+        <main className="max-w-[1200px] mx-auto px-4 py-16 text-center">
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">城市指南不存在</h1>
+          <Link href="/" className="text-[#ff4d4f] mt-4 inline-block">返回首页</Link>
+        </main>
+        <Footer />
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-[#fafafa] dark:bg-gray-950">
+      <main className="max-w-[1200px] mx-auto px-4 sm:px-6 py-6 sm:py-8">
+        <Link href="/" className="inline-flex items-center gap-1 text-sm text-gray-500 dark:text-gray-400 hover:text-[#ff4d4f] mb-4">
+          ← 返回首页
+        </Link>
+
+        <div className="bg-white dark:bg-gray-900 rounded-2xl overflow-hidden shadow-lg border border-gray-100 dark:border-gray-800">
+          <div className="h-32 sm:h-48 bg-gradient-to-r from-purple-500 to-pink-500 flex items-end p-6 sm:p-8">
+            <span className="text-5xl sm:text-7xl mb-2">{city.emoji}</span>
+            <h1 className="text-3xl sm:text-4xl font-bold text-white ml-4">{city.nameZh}</h1>
+          </div>
+
+          <div className="p-6 sm:p-8">
+            <p className="text-gray-600 dark:text-gray-400 text-base sm:text-lg mb-8">
+              {city.descriptionZh}
+            </p>
+
+            <section className="mb-8">
+              <h2 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center gap-2">
+                💰 生活成本
+              </h2>
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                {city.costOfLiving.map((item, i) => (
+                  <div key={i} className="flex justify-between items-center p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
+                    <span className="text-gray-600 dark:text-gray-400">{item.item}</span>
+                    <span className="font-semibold text-gray-900 dark:text-gray-100">{item.priceZh}</span>
+                  </div>
+                ))}
+              </div>
+            </section>
+
+            <section className="mb-8">
+              <h2 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center gap-2">
+                💻 共享办公推荐
+              </h2>
+              <div className="space-y-3">
+                {city.coworking.map((cw, i) => (
+                  <div key={i} className="flex flex-col sm:flex-row sm:items-center justify-between p-4 bg-gray-50 dark:bg-gray-800 rounded-lg gap-2">
+                    <div>
+                      <div className="font-semibold text-gray-900 dark:text-gray-100">{cw.name}</div>
+                      <div className="text-sm text-gray-500 dark:text-gray-400">{cw.address}</div>
+                    </div>
+                    <div className="flex items-center gap-3">
+                      <span className="text-[#ff4d4f] font-medium">{cw.price}</span>
+                      <span className="text-amber-500">⭐ {cw.rating}</span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </section>
+
+            <section className="mb-8">
+              <h2 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center gap-2">
+                🏠 社区推荐
+              </h2>
+              <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+                {city.neighborhoods.map((n, i) => (
+                  <div key={i} className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
+                    <div className="font-semibold text-gray-900 dark:text-gray-100 mb-2">{n.name}</div>
+                    <div className="text-sm text-green-600 dark:text-green-400 mb-1">✓ {n.pros}</div>
+                    <div className="text-sm text-red-500 dark:text-red-400">✗ {n.cons}</div>
+                  </div>
+                ))}
+              </div>
+            </section>
+
+            <section className="mb-8">
+              <h2 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center gap-2">
+                💡 实用Tips
+              </h2>
+              <ul className="space-y-2">
+                {city.tips.map((tip, i) => (
+                  <li key={i} className="flex items-start gap-2 text-gray-600 dark:text-gray-400">
+                    <span className="text-[#ff4d4f]">•</span>
+                    {tip}
+                  </li>
+                ))}
+              </ul>
+            </section>
+
+            <div className="flex flex-col sm:flex-row gap-3">
+              <Link
+                href="/join"
+                className="flex-1 text-center bg-[#ff4d4f] text-white py-3 px-6 rounded-full font-medium hover:bg-[#ff7a45] transition-colors"
+              >
+                加入当地社群
+              </Link>
+              <Link
+                href="/meetups"
+                className="flex-1 text-center bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 py-3 px-6 rounded-full font-medium hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+              >
+                查看线下活动
+              </Link>
+            </div>
+          </div>
+        </div>
+      </main>
+
+      <Footer />
+    </div>
+  );
+}