eric/gitlab-instance-0a899031_cnomadcna
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

's'

Browse Source
This commit is contained in:
eric
2026-03-09 01:44:13 -05:00
parent 8eef28536e
commit 7638e4032e
18 changed files with 1038 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
app/[locale]/page.tsx
View File

@@ -1,60 +1,17 @@
"use client";
import { useState, useMemo } from "react";
import { Link } from "@/i18n/navigation";
import { Link, useLocale } from "@/i18n/navigation";
import { useTranslation } from "@/i18n/navigation";
import HeroSection from "../components/HeroSection";
import FilterBar from "../components/FilterBar";
import CityCard from "../components/CityCard";
import CityModal from "../components/CityModal";
import Footer from "../components/Footer";
import { cities, type City } from "../data/cities";
import { HOME_CONFIG } from "@/config";
const memberPhotos = [
{ name: "林晓", photo: "https://i.pravatar.cc/150?img=5" },
{ name: "张浩", photo: "https://i.pravatar.cc/150?img=3" },
{ name: "陈悦", photo: "https://i.pravatar.cc/150?img=9" },
{ name: "周杰", photo: "https://i.pravatar.cc/150?img=7" },
{ name: "吴婷", photo: "https://i.pravatar.cc/150?img=1" },
{ name: "杨帅", photo: "https://i.pravatar.cc/150?img=12" },
{ name: "赵琪", photo: "https://i.pravatar.cc/150?img=16" },
{ name: "黄磊", photo: "https://i.pravatar.cc/150?img=11" },
{ name: "孙莉", photo: "https://i.pravatar.cc/150?img=20" },
];
const travelingNow = [
{ name: "小明", photo: "https://i.pravatar.cc/150?img=52", dest: "大理" },
{ name: "雨晴", photo: "https://i.pravatar.cc/150?img=44", dest: "成都" },
{ name: "阿杰", photo: "https://i.pravatar.cc/150?img=53", dest: "深圳" },
{ name: "小燕", photo: "https://i.pravatar.cc/150?img=47", dest: "杭州" },
{ name: "大伟", photo: "https://i.pravatar.cc/150?img=55", dest: "厦门" },
{ name: "佳琪", photo: "https://i.pravatar.cc/150?img=48", dest: "昆明" },
{ name: "志远", photo: "https://i.pravatar.cc/150?img=57", dest: "丽江" },
{ name: "心怡", photo: "https://i.pravatar.cc/150?img=49", dest: "三亚" },
{ name: "凯文", photo: "https://i.pravatar.cc/150?img=59", dest: "上海" },
{ name: "子豪", photo: "https://i.pravatar.cc/150?img=60", dest: "北京" },
{ name: "浩然", photo: "https://i.pravatar.cc/150?img=61", dest: "广州" },
{ name: "雅琪", photo: "https://i.pravatar.cc/150?img=21", dest: "南京" },
{ name: "天翔", photo: "https://i.pravatar.cc/150?img=67", dest: "长沙" },
{ name: "美玲", photo: "https://i.pravatar.cc/150?img=23", dest: "苏州" },
{ name: "俊杰", photo: "https://i.pravatar.cc/150?img=68", dest: "青岛" },
{ name: "晓华", photo: "https://i.pravatar.cc/150?img=26", dest: "珠海" },
];
const meetups = [
{ city: "大理", emoji: "🏯", date: "3月9日", count: 12 },
{ city: "成都", emoji: "🐼", date: "3月12日", count: 8 },
{ city: "深圳", emoji: "🌃", date: "3月14日", count: 15 },
{ city: "厦门", emoji: "🌊", date: "3月16日", count: 6 },
{ city: "杭州", emoji: "⛲", date: "3月20日", count: 23 },
];
const hotTopics = [
{ title: "大理最佳共享办公空间推荐 Top 10", views: 2340 },
{ title: "2026年数字游民友好城市排名", views: 1890 },
{ title: "远程工作者的税务规划指南", views: 1560 },
{ title: "成都 vs 大理：哪个更适合游民？", views: 1230 },
{ title: "新手游民必备工具与装备清单", views: 980 },
];
const { memberPhotos, travelingNow, meetups: homeMeetups, hotTopics, routes, stats, communityStats } = HOME_CONFIG;
function safetyOrder(s: string): number {
const o: Record<string, number> = { 极好: 5, 很好: 4, 好: 3, 一般: 2, 差: 1 };
@@ -65,6 +22,9 @@ export default function Home() {
const [activeFilter, setActiveFilter] = useState("全部");
const [sortBy, setSortBy] = useState("score");
const [cityModal, setCityModal] = useState<City | null>(null);
const locale = useLocale();
const { t } = useTranslation("home");
const { t: tNav } = useTranslation("nav");
const filteredCities = useMemo(() => {
let result = [...cities];
@@ -99,23 +59,23 @@ export default function Home() {
<div className="border-y border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-900">
<div className="max-w-[1400px] mx-auto px-5 sm:px-10 py-4 flex flex-wrap items-center justify-center gap-6 sm:gap-12 text-center">
<div>
<span className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100">18</span>
<p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">个城市</p>
<span className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100">{stats.cities}</span>
<p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">{t("stats.cities")}</p>
</div>
<div className="w-px h-8 bg-gray-100 dark:bg-gray-700 hidden sm:block" />
<div>
<span className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100">5,000+</span>
<p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">位游民</p>
<span className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100">{stats.nomads}</span>
<p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">{t("stats.nomads")}</p>
</div>
<div className="w-px h-8 bg-gray-100 dark:bg-gray-700 hidden sm:block" />
<div>
<span className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100">8+</span>
<p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">场聚会/月</p>
<span className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100">{stats.homeMeetups}</span>
<p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">{t("stats.meetups")}</p>
</div>
<div className="w-px h-8 bg-gray-100 dark:bg-gray-700 hidden sm:block" />
<div>
<span className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100">¥3,000</span>
<p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">起/月生活费</p>
<span className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100">{stats.cost}</span>
<p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">{t("stats.cost")}</p>
</div>
</div>
</div>
@@ -132,23 +92,23 @@ export default function Home() {
<div className="items-grid">
<Link href="/join" className="right-item block">
<div className="right-item-header">加入社群</div>
<div className="right-item-header">{t("joinCommunity")}</div>
<div className="flex flex-col items-center justify-center text-center p-2 sm:p-5 h-[calc(100%-38px)] sm:h-[calc(100%-42px)]">
<span className="text-2xl sm:text-5xl mb-1 sm:mb-3">💬</span>
<p className="text-[10px] sm:text-sm text-gray-600 dark:text-gray-400 mb-0.5">
加入数字游民微信社群
{t("joinCommunityDesc")}
</p>
<p className="text-[9px] sm:text-xs text-gray-400 dark:text-gray-500 mb-1.5 sm:mb-4">
3,200+ 在线成员
{communityStats.onlineMembers} {t("membersOnline")}
</p>
<span className="bg-[#ff4d4f] text-white px-2.5 sm:px-6 py-1 sm:py-2 rounded-lg text-[10px] sm:text-sm font-semibold whitespace-nowrap">
加入社群 →
{t("joinCommunity")} →
</span>
</div>
</Link>
<Link href="/dating" className="right-item block">
<div className="right-item-header">新成员</div>
<div className="right-item-header">{t("newMembers")}</div>
<div className="p-2 sm:p-5 flex flex-wrap gap-1 sm:gap-2 content-start">
{memberPhotos.map((m) => (
<img
@@ -160,13 +120,13 @@ export default function Home() {
/>
))}
<div className="w-full mt-0.5 text-[9px] sm:text-xs text-gray-400 dark:text-gray-500 text-center">
本月 86 人加入
{locale === "zh" ? "本月 86 人加入" : "86 joined this month"}
</div>
</div>
</Link>
<Link href="/meetups" className="right-item block">
<div className="right-item-header">最新活动</div>
<Link href="/homeMeetups" className="right-item block">
<div className="right-item-header">{t("latestEvents")}</div>
<div className="p-1.5 sm:p-4 flex flex-col gap-0.5 sm:gap-2.5 text-[10px] sm:text-sm text-gray-700 dark:text-gray-300 h-[calc(100%-38px)] sm:h-[calc(100%-42px)]">
<div className="flex items-center gap-1 bg-[#f5f6f7] dark:bg-gray-800 rounded-lg px-1.5 py-1 sm:px-3 sm:py-2 font-medium text-gray-900 dark:text-gray-100">
🗓 3月15日
@@ -175,7 +135,7 @@ export default function Home() {
📍 深圳南山
</div>
<div className="flex items-center gap-1 bg-[#f5f6f7] dark:bg-gray-800 rounded-lg px-1.5 py-1 sm:px-3 sm:py-2 font-medium text-gray-900 dark:text-gray-100">
👥 12人
👥 12{t("people")}
</div>
<div className="flex -space-x-1 mt-auto">
{memberPhotos.slice(0, 5).map((m) => (
@@ -204,13 +164,13 @@ export default function Home() {
<div className="text-center py-16 sm:py-20">
<span className="text-4xl sm:text-5xl mb-4 block">🏜️</span>
<p className="text-gray-500 dark:text-gray-400 text-base sm:text-lg">
没有找到匹配的城市
{t("noMatch")}
</p>
<button
onClick={() => setActiveFilter("全部")}
className="mt-4 text-sm text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 px-5 py-2 rounded-full hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
>
显示全部城市
{t("showAll")}
</button>
</div>
)}
@@ -218,38 +178,10 @@ export default function Home() {
<section className="max-w-[1500px] mx-auto px-3 sm:px-6 md:px-10 pt-8 sm:pt-12 pb-4">
<h2 className="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100 mb-5 sm:mb-6 flex items-center gap-2">
<span className="w-1 h-5 bg-[#ff4d4f] rounded-full" />
热门路线
{t("hotRoutes")}
</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5">
{[
{
title: "云南慢生活线",
cities: ["昆明", "大理", "丽江"],
emojis: ["🌸", "🏯", "🏔️"],
duration: "3-6个月",
cost: "¥3,200/月起",
desc: "从春城昆明出发，沿着滇西北一路感受最纯粹的慢生活",
gradient: "from-purple-500 to-pink-500",
},
{
title: "科技创业线",
cities: ["深圳", "杭州", "上海"],
emojis: ["🌃", "⛲", "🏙️"],
duration: "2-4个月",
cost: "¥7,000/月起",
desc: "穿越中国三大科技中心，连接最前沿的创业生态",
gradient: "from-blue-500 to-cyan-500",
},
{
title: "美食文化线",
cities: ["成都", "重庆", "长沙"],
emojis: ["🐼", "🌶️", "🎪"],
duration: "2-3个月",
cost: "¥4,000/月起",
desc: "巴蜀到湘楚，用味蕾丈量中国最火辣的城市",
gradient: "from-orange-500 to-red-500",
},
].map((route) => (
{routes.map((route) => (
<div
key={route.title}
className="community-card group cursor-pointer"
@@ -295,7 +227,7 @@ export default function Home() {
<section id="community" className="max-w-[1500px] mx-auto px-3 sm:px-6 md:px-10 py-8 sm:py-12">
<h2 className="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100 mb-5 sm:mb-6 flex items-center gap-2">
<span className="w-1 h-5 bg-[#ff4d4f] rounded-full" />
社区动态
{t("communityDynamics")}
</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5">
@@ -303,14 +235,14 @@ export default function Home() {
<div className="p-4 sm:p-5">
<div className="flex items-center justify-between mb-4">
<h3 className="font-bold text-gray-900 dark:text-gray-100 text-sm flex items-center gap-1.5">
🍹 近期聚会
🍹 {t("recentMeetups")}
</h3>
<span className="text-[11px] text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-800 rounded-full px-2 py-0.5">
8场/月
{homeMeetups.length}{t("perMonth")}
</span>
</div>
<div className="space-y-2.5">
{meetups.map((m) => (
{homeMeetups.map((m) => (
<div key={m.city} className="flex items-center justify-between py-1.5">
<div className="flex items-center gap-2">
<span className="text-base">{m.emoji}</span>
@@ -320,16 +252,16 @@ export default function Home() {
</div>
</div>
<span className="text-[11px] text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-800 rounded-full px-2 py-0.5">
{m.count}人
{m.count}{t("people")}
</span>
</div>
))}
</div>
<Link
href="/meetups"
href="/homeMeetups"
className="block w-full text-center text-xs font-medium text-[#ff4d4f] hover:text-[#ff7a45] mt-4 pt-3 border-t border-gray-100 dark:border-gray-700 transition-colors"
>
查看全部聚会 →
{t("viewMore")}
</Link>
</div>
</div>
@@ -338,10 +270,10 @@ export default function Home() {
<div className="p-4 sm:p-5">
<div className="flex items-center justify-between mb-4">
<h3 className="font-bold text-gray-900 dark:text-gray-100 text-sm flex items-center gap-1.5">
🛩️ 正在旅行
🛩️ {t("travelingNow")}
</h3>
<span className="text-[11px] text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-800 rounded-full px-2 py-0.5">
{travelingNow.length}人
{travelingNow.length}{t("people")}
</span>
</div>
<div className="flex flex-wrap gap-2">
@@ -361,27 +293,27 @@ export default function Home() {
<div className="community-card">
<div className="p-4 sm:p-5">
<h3 className="font-bold text-gray-900 dark:text-gray-100 text-sm flex items-center gap-1.5 mb-4">
🔥 热门讨论
🔥 {t("hotDiscussions")}
</h3>
<div className="space-y-3">
{hotTopics.map((t, i) => (
<a key={t.title} href="#" className="flex items-start gap-2.5 group">
{hotTopics.map((t_item, i) => (
<a key={t_item.title} href="#" className="flex items-start gap-2.5 group">
<span className={`text-xs font-bold mt-0.5 w-4 shrink-0 ${i < 3 ? "text-[#ff4d4f]" : "text-gray-300 dark:text-gray-600"}`}>
{i + 1}
</span>
<div className="flex-1 min-w-0">
<p className="text-sm text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-gray-100 transition-colors line-clamp-1 leading-snug">
{t.title}
<div className="flex-1">
<p min-w-0 className="text-sm text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-gray-100 transition-colors line-clamp-1 leading-snug">
{t_item.title}
</p>
<p className="text-[11px] text-gray-400 dark:text-gray-500 mt-0.5">
{t.views.toLocaleString()} 次浏览
{t_item.views.toLocaleString()} {t("views")}
</p>
</div>
</a>
))}
</div>
<button className="w-full text-center text-xs font-medium text-[#ff4d4f] hover:text-[#ff7a45] mt-4 pt-3 border-t border-gray-100 dark:border-gray-700 transition-colors">
查看更多话题 →
{t("viewMore")}
</button>
</div>
</div>
@@ -391,15 +323,15 @@ export default function Home() {
<div className="flex items-start gap-3 mb-3">
<span className="text-2xl">🛡️</span>
<div>
<h3 className="font-bold text-gray-900 dark:text-gray-100 text-sm">旅行保险</h3>
<p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">数字游民定制方案</p>
<h3 className="font-bold text-gray-900 dark:text-gray-100 text-sm">{t("travelInsurance")}</h3>
<p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{t("travelInsuranceDesc")}</p>
</div>
</div>
<p className="text-xs text-emerald-700 dark:text-emerald-400 bg-emerald-100/50 dark:bg-emerald-900/30 rounded-lg px-3 py-2 mb-3">
覆盖全国 + 境外，远程工作专属条款，¥15/天起
{t("insuranceCoverage")}
</p>
<button className="w-full text-center text-sm font-semibold text-emerald-700 dark:text-emerald-400 hover:text-emerald-800 dark:hover:text-emerald-300 bg-white/80 dark:bg-gray-800/80 hover:bg-white dark:hover:bg-gray-800 border border-emerald-200 dark:border-emerald-800 rounded-full py-2 transition-colors">
了解更多 →
{t("learnMore")}
</button>
</div>
</div>
@@ -409,8 +341,8 @@ export default function Home() {
<div className="flex items-start gap-3 mb-3">
<span className="text-2xl">💬</span>
<div>
<h3 className="font-bold text-gray-900 dark:text-gray-100 text-sm">社区聊天</h3>
<p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">本月 3,200+ 条消息</p>
<h3 className="font-bold text-gray-900 dark:text-gray-100 text-sm">{t("communityChat")}</h3>
<p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{locale === "zh" ? `本月 ${communityStats.messagesPerMonth} 条消息` : `${communityStats.messagesPerMonth} messages this month`}</p>
</div>
</div>
<div className="flex items-center gap-2 mb-4">
@@ -424,10 +356,10 @@ export default function Home() {
/>
))}
</div>
<span className="text-xs text-gray-400 dark:text-gray-500">在线中</span>
<span className="text-xs text-gray-400 dark:text-gray-500">{t("onlineNow")}</span>
</div>
<button className="w-full text-center text-sm font-semibold text-violet-700 dark:text-violet-400 hover:text-violet-800 dark:hover:text-violet-300 bg-white/80 dark:bg-gray-800/80 hover:bg-white dark:hover:bg-gray-800 border border-violet-200 dark:border-violet-800 rounded-full py-2 transition-colors">
加入聊天 →
{t("joinChat")}
</button>
</div>
</div>
@@ -437,9 +369,9 @@ export default function Home() {
<div className="flex items-start gap-3 mb-3">
<span className="text-2xl">🏛️</span>
<div>
<h3 className="font-bold text-gray-900 dark:text-gray-100 text-sm">落地指南</h3>
<h3 className="font-bold text-gray-900 dark:text-gray-100 text-sm">{t("landingGuide")}</h3>
<p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
租房 · 共享办公 · 本地攻略
{t("landingGuideDesc")}
</p>
</div>
</div>
@@ -454,7 +386,7 @@ export default function Home() {
))}
</div>
<button className="w-full text-center text-sm font-semibold text-amber-700 dark:text-amber-400 hover:text-amber-800 dark:hover:text-amber-300 bg-white/80 dark:bg-gray-800/80 hover:bg-white dark:hover:bg-gray-800 border border-amber-200 dark:border-amber-800 rounded-full py-2 transition-colors">
查看攻略 →
{t("viewGuides")}
</button>
</div>
</div>

20
app/[locale]/tools/page.tsx
View File

@@ -123,6 +123,26 @@ export default function ToolsPage() {
</div>
</div>
</section>
<section className="rounded-2xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 p-6">
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
🌱 {t("fireCalculator")}
</h2>
<p className="text-sm text-gray-500 dark:text-gray-400 mb-4">{t("fireDesc")}</p>
<div className="p-4 rounded-xl bg-gray-50 dark:bg-gray-800 text-center text-sm text-gray-500 dark:text-gray-400">
{t("comingSoon")}
</div>
</section>
<section className="rounded-2xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 p-6">
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
🌤️ {t("climateFinder")}
</h2>
<p className="text-sm text-gray-500 dark:text-gray-400 mb-4">{t("climateDesc")}</p>
<div className="p-4 rounded-xl bg-gray-50 dark:bg-gray-800 text-center text-sm text-gray-500 dark:text-gray-400">
{t("comingSoon")}
</div>
</section>
</div>
</div>
<Footer />

27
app/components/CityCard.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { useState } from "react";
import { memo, useState } from "react";
import { City } from "../data/cities";
function ratingToPercent(rating: string): number {
@@ -20,17 +20,14 @@ function getBarColor(p: number): string {
return "#ef4444";
}
function ScoreBar({
icon,
label,
percent,
animate,
}: {
interface ScoreBarProps {
icon: string;
label: string;
percent: number;
animate: boolean;
}) {
}
const ScoreBar = memo(function ScoreBar({ icon, label, percent, animate }: ScoreBarProps) {
return (
<div className="flex items-center gap-2 sm:gap-3">
<span className="text-white/80 text-xs sm:text-sm w-14 sm:w-16 shrink-0 flex items-center gap-1">
@@ -48,17 +45,15 @@ function ScoreBar({
</div>
</div>
);
}
});
export default function CityCard({
city,
rank,
onClick,
}: {
interface CityCardProps {
city: City;
rank: number;
onClick?: () => void;
}) {
}
function CityCardComponent({ city, rank, onClick }: CityCardProps) {
const [hovered, setHovered] = useState(false);
const scores = [
@@ -194,3 +189,5 @@ export default function CityCard({
</div>
);
}
export default memo(CityCardComponent);

31
app/components/FilterBar.tsx
View File

@@ -1,6 +1,7 @@
"use client";
import { allTags } from "../data/cities";
import { memo } from "react";
import { allTags, FILTER_OPTIONS } from "../data/cities";
interface FilterBarProps {
activeFilter: string;
@@ -10,16 +11,6 @@ interface FilterBarProps {
resultCount: number;
}
const sortOptions = [
{ value: "score", label: "综合评分" },
{ value: "cost-asc", label: "费用最低" },
{ value: "cost-desc", label: "费用最高" },
{ value: "internet", label: "网速最快" },
{ value: "safety", label: "最安全" },
{ value: "nomads", label: "游民最多" },
{ value: "temperature", label: "最温暖" },
];
const tagIcons: Record<string, string> = {
全部: "🌍",
热门: "🔥",
@@ -40,7 +31,7 @@ const tagIcons: Record<string, string> = {
户外运动: "🏄",
};
export default function FilterBar({
function FilterBarComponent({
activeFilter,
onFilterChange,
sortBy,
@@ -52,21 +43,21 @@ export default function FilterBar({
{/* Top bar: result count + sort */}
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-2">
<h2 className="text-lg font-bold text-gray-900">
<h2 className="text-lg font-bold text-gray-900 dark:text-gray-100">
发现目的地
</h2>
<span className="text-sm text-gray-400">
<span className="text-sm text-gray-400 dark:text-gray-500">
{resultCount} 个城市
</span>
</div>
<div className="flex items-center gap-2">
<span className="text-xs text-gray-400 hidden sm:block">排序:</span>
<span className="text-xs text-gray-400 dark:text-gray-500 hidden sm:block">排序:</span>
<select
value={sortBy}
onChange={(e) => onSortChange(e.target.value)}
className="text-sm bg-white border border-gray-200 rounded-lg px-3 py-1.5 text-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-200 cursor-pointer"
className="text-sm bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg px-3 py-1.5 text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:focus:ring-gray-700 cursor-pointer"
>
{sortOptions.map((opt) => (
{FILTER_OPTIONS.map((opt) => (
<option key={opt.value} value={opt.value}>
{opt.label}
</option>
@@ -83,8 +74,8 @@ export default function FilterBar({
onClick={() => onFilterChange(tag)}
className={`filter-btn shrink-0 flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium border transition-all ${
activeFilter === tag
? "active border-gray-900"
: "border-gray-200 text-gray-600 hover:border-gray-300"
? "active border-gray-900 dark:border-gray-100"
: "border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:border-gray-300 dark:hover:border-gray-600"
}`}
>
<span className="text-xs">{tagIcons[tag] || "🏷️"}</span>
@@ -95,3 +86,5 @@ export default function FilterBar({
</div>
);
}
export default memo(FilterBarComponent);

57
app/components/Footer.tsx
View File

@@ -1,59 +1,18 @@
"use client";
import { memo } from "react";
import { Link, useTranslation } from "@/i18n/navigation";
import { FOOTER_SECTIONS } from "@/config";
const footerSections = [
{
titleKey: "community" as const,
links: [
{ labelKey: "join" as const, href: "/join" },
{ labelKey: "meetups" as const, href: "/meetups" },
{ labelKey: "dating" as const, href: "/dating" },
{ labelKey: "map" as const, href: "#" },
],
},
{
titleKey: "tools" as const,
links: [
{ labelKey: "dashboard" as const, href: "/dashboard" },
{ labelKey: "cost" as const, href: "/tools" },
{ labelKey: "ai" as const, href: "/ai" },
{ labelKey: "coworking" as const, href: "#" },
{ labelKey: "compare" as const, href: "#" },
],
},
{
titleKey: "resources" as const,
links: [
{ labelKey: "guide" as const, href: "#" },
{ labelKey: "cityGuide" as const, href: "#" },
{ labelKey: "stories" as const, href: "#" },
{ labelKey: "report" as const, href: "/report" },
{ labelKey: "faq" as const, href: "#" },
],
},
{
titleKey: "about" as const,
links: [
{ labelKey: "aboutUs" as const, href: "/about" },
{ labelKey: "pricing" as const, href: "/pricing" },
{ labelKey: "gigs" as const, href: "/gigs" },
{ labelKey: "recruit" as const, href: "/jobs" },
{ labelKey: "terms" as const, href: "#" },
{ labelKey: "privacy" as const, href: "#" },
{ labelKey: "contact" as const, href: "#" },
],
},
];
export default function Footer() {
function FooterComponent() {
const { t } = useTranslation("footer");
const { t: tCommon } = useTranslation("common");
return (
<footer className="border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
<div className="max-w-[1400px] mx-auto px-5 sm:px-10 py-10 sm:py-12">
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 sm:gap-8 mb-8">
{footerSections.map((section) => (
{FOOTER_SECTIONS.map((section) => (
<div key={section.titleKey}>
<h4 className="font-bold text-gray-900 dark:text-gray-100 text-sm mb-3">
{t(section.titleKey)}
@@ -85,13 +44,13 @@ export default function Footer() {
<div className="pt-8 border-t border-gray-200 dark:border-gray-800 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="flex items-center gap-2">
<span className="text-xl">🌏</span>
<span className="text-sm font-bold text-gray-900 dark:text-gray-100">游牧中国</span>
<span className="text-sm font-bold text-gray-900 dark:text-gray-100">{tCommon("siteNameShort")}</span>
</div>
<p className="text-xs text-gray-400 dark:text-gray-500">
{t("copyright")}
</p>
<div className="flex items-center gap-4 text-xs text-gray-400 dark:text-gray-500">
<span>CNY ¥</span>
<span>{tCommon("currency") || "CNY ¥"}</span>
<span>°C</span>
</div>
</div>
@@ -99,3 +58,5 @@ export default function Footer() {
</footer>
);
}
export default memo(FooterComponent);

69
app/components/Navbar.tsx
View File

@@ -1,47 +1,40 @@
"use client";
import { useState, useEffect } from "react";
import { useState, useEffect, useCallback } from "react";
import { Link, useLocale, usePathname, useRouter, useTranslation } from "@/i18n/navigation";
import { getStoredUserEmail, pbLogout } from "@/app/lib/pocketbase";
import { getNavLinks } from "@/config";
import AuthModal from "./AuthModal";
import ThemeToggle from "./ThemeToggle";
import SiteMenu from "./SiteMenu";
const navLinks = [
{ labelKey: "cities" as const, icon: "🏙️", href: "/" },
{ labelKey: "dashboard" as const, icon: "📍", href: "/dashboard" },
{ labelKey: "travel" as const, icon: "✈️", href: "/meetups" },
{ labelKey: "community" as const, icon: "💬", href: "/dating" },
{ labelKey: "tools" as const, icon: "📊", href: "/tools" },
{ labelKey: "ai" as const, icon: "🤖", href: "/ai" },
{ labelKey: "gigs" as const, icon: "💰", href: "/gigs" },
{ labelKey: "pricing" as const, icon: "👑", href: "/pricing" },
{ labelKey: "explore" as const, icon: "🎒", href: "/#community" },
];
export default function Navbar() {
export default function NavbarComponent() {
const { t } = useTranslation("common");
const { t: tNav } = useTranslation("nav");
const locale = useLocale();
const pathname = usePathname();
const router = useRouter();
const [mobileOpen, setMobileOpen] = useState(false);
const [menuOpen, setMenuOpen] = useState(false);
const [authOpen, setAuthOpen] = useState(false);
const [userEmail, setUserEmail] = useState<string | null>(null);
const navLinks = getNavLinks();
useEffect(() => {
setUserEmail(getStoredUserEmail());
}, []);
const handleLogout = () => {
const handleLogout = useCallback(() => {
pbLogout();
setUserEmail(null);
};
}, []);
function isActive(href: string) {
const isActive = useCallback((href: string) => {
if (href.startsWith("/#")) return false;
if (href === "/") return pathname === "/";
return pathname.startsWith(href);
}
}, [pathname]);
return (
<nav className="sticky top-0 z-50 bg-white/80 dark:bg-gray-900/80 backdrop-blur-lg border-b border-gray-100 dark:border-gray-800">
@@ -53,24 +46,41 @@ export default function Navbar() {
</span>
</Link>
<div className="hidden md:flex items-center gap-1 overflow-x-auto max-w-[calc(100vw-280px)] scrollbar-hide">
{navLinks.map((link) => (
<div className="hidden lg:flex items-center gap-1 overflow-x-auto max-w-[calc(100vw-400px)] scrollbar-hide">
<button
onClick={() => setMenuOpen(true)}
className="flex items-center gap-1.5 px-3 py-2 rounded-full text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors border border-gray-200 dark:border-gray-700 whitespace-nowrap"
>
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
</svg>
<span className="hidden xl:inline">{tNav("menu")}</span>
</button>
{navLinks.slice(0, 5).map((link) => (
<Link
key={link.labelKey}
href={link.href}
className={`flex items-center gap-1.5 px-4 py-2 rounded-full text-sm font-medium transition-colors ${
className={`flex items-center gap-1.5 px-3 py-2 rounded-full text-sm font-medium transition-colors whitespace-nowrap ${
isActive(link.href)
? "text-gray-900 dark:text-gray-100 bg-gray-100 dark:bg-gray-800"
: "text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-800"
}`}
>
<span>{link.icon}</span>
<span>{tNav(link.labelKey)}</span>
<span className="hidden 2xl:inline">{tNav(link.labelKey)}</span>
</Link>
))}
</div>
<div className="flex items-center gap-2 sm:gap-3">
<div className="flex items-center gap-1 sm:gap-2">
<button
className="lg:hidden p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800"
onClick={() => setMenuOpen(true)}
>
<svg className="w-5 h-5 text-gray-600 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
{userEmail ? (
<div className="flex items-center gap-2">
<span className="hidden sm:block max-w-[120px] truncate text-sm text-gray-600 dark:text-gray-400">
@@ -78,7 +88,7 @@ export default function Navbar() {
</span>
<button
onClick={handleLogout}
className="rounded-full border border-gray-200 dark:border-gray-700 px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
className="rounded-full border border-gray-200 dark:border-gray-700 px-2 sm:px-4 py-2 text-xs sm:text-sm font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors whitespace-nowrap"
>
{t("logout")}
</button>
@@ -86,7 +96,7 @@ export default function Navbar() {
) : (
<button
onClick={() => setAuthOpen(true)}
className="hidden sm:block text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 px-3 py-2 rounded-full hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
className="hidden md:block text-xs sm:text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 px-2 sm:px-3 py-2 rounded-full hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors whitespace-nowrap"
>
{t("loginRegister")}
</button>
@@ -94,7 +104,7 @@ export default function Navbar() {
<button
type="button"
onClick={() => router.replace(pathname, { locale: locale === "zh" ? "en" : "zh" })}
className="inline-flex shrink-0 items-center justify-center rounded-lg p-2 text-sm font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
className="inline-flex shrink-0 items-center justify-center rounded-lg p-2 text-xs sm:text-sm font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
aria-label={locale === "zh" ? "Switch to English" : "切换到中文"}
title={locale === "zh" ? "EN" : "中文"}
>
@@ -103,7 +113,7 @@ export default function Navbar() {
<ThemeToggle />
<Link
href="/join"
className="text-sm bg-[#ff4d4f] text-white px-4 py-2 rounded-full hover:bg-[#ff7a45] transition-colors font-medium"
className="text-xs sm:text-sm bg-[#ff4d4f] text-white px-3 sm:px-4 py-2 rounded-full hover:bg-[#ff7a45] transition-colors font-medium whitespace-nowrap"
>
{t("explore")}
</Link>
@@ -172,6 +182,11 @@ export default function Navbar() {
onClose={() => setAuthOpen(false)}
onSuccess={(email) => setUserEmail(email)}
/>
<SiteMenu
isOpen={menuOpen}
onClose={() => setMenuOpen(false)}
onLoginClick={() => { setMenuOpen(false); setAuthOpen(true); }}
/>
</nav>
);
}

257
app/components/SiteMenu.tsx Normal file
View File

@@ -0,0 +1,257 @@
"use client";
import { memo, useState, useEffect, useRef } from "react";
import { Link, usePathname, useTranslation } from "@/i18n/navigation";
import { getStoredUserEmail, pbLogout } from "@/app/lib/pocketbase";
import ThemeToggle from "./ThemeToggle";
interface MenuItem {
labelKey: string;
href: string;
icon: string;
new?: boolean;
ad?: boolean;
}
interface MenuSection {
titleKey: string;
items: MenuItem[];
}
export default memo(function SiteMenu({
isOpen,
onClose,
onLoginClick,
}: {
isOpen: boolean;
onClose: () => void;
onLoginClick: () => void;
}) {
const { t } = useTranslation("menu");
const pathname = usePathname();
const ref = useRef<HTMLDivElement>(null);
const [search, setSearch] = useState("");
const [userEmail, setUserEmail] = useState<string | null>(null);
useEffect(() => {
setUserEmail(getStoredUserEmail());
}, []);
useEffect(() => {
const handleClickOutside = (e: MouseEvent) => {
if (ref.current && !ref.current.contains(e.target as Node)) onClose();
};
const handleEscape = (e: KeyboardEvent) => {
if (e.key === "Escape") onClose();
};
if (isOpen) {
document.addEventListener("mousedown", handleClickOutside);
document.addEventListener("keydown", handleEscape);
}
return () => {
document.removeEventListener("mousedown", handleClickOutside);
document.removeEventListener("keydown", handleEscape);
};
}, [isOpen, onClose]);
const sections: MenuSection[] = [
{
titleKey: "community",
items: [
{ labelKey: "dating", href: "/dating", icon: "❤️" },
{ labelKey: "chat", href: "/join", icon: "💬" },
{ labelKey: "hostMeetup", href: "/meetups", icon: "🎤", new: true },
{ labelKey: "friendFinder", href: "/dating", icon: "💛" },
{ labelKey: "membersMap", href: "#", icon: "🌐" },
{ labelKey: "attendMeetup", href: "/meetups", icon: "🍹" },
],
},
{
titleKey: "tools",
items: [
{ labelKey: "explore", href: "/", icon: "📍" },
{ labelKey: "nextStop", href: "/dashboard", icon: "🗺️" },
{ labelKey: "climateFinder", href: "/tools", icon: "🌤️" },
{ labelKey: "fireCalculator", href: "/tools", icon: "🌱" },
{ labelKey: "aiAssistant", href: "/ai", icon: "🤖", new: true },
{ labelKey: "yearInReview", href: "/report", icon: "🥂" },
{ labelKey: "nomadStats", href: "/report", icon: "📊", new: true },
{ labelKey: "gigBoard", href: "/gigs", icon: "💰" },
{ labelKey: "costCalculator", href: "/tools", icon: "💱" },
],
},
{
titleKey: "help",
items: [
{ labelKey: "ideasBugs", href: "#", icon: "💡" },
{ labelKey: "faq", href: "#", icon: "🆘" },
{ labelKey: "terms", href: "#", icon: "📄" },
{ labelKey: "changelog", href: "#", icon: "🚀" },
],
},
{
titleKey: "other",
items: [
{ labelKey: "remoteJobs", href: "#", icon: "💼" },
{ labelKey: "coworking", href: "#", icon: "🏢" },
],
},
];
const profileItems: MenuItem[] = [
{ labelKey: "yourProfile", href: "/join", icon: "👤" },
{ labelKey: "settings", href: "/join", icon: "⚙️" },
{ labelKey: "favorites", href: "/", icon: "❤️" },
{ labelKey: "pricing", href: "/pricing", icon: "👑" },
{ labelKey: "nomadInsurance", href: "#", icon: "🛡️", ad: true },
];
const filteredSections = sections.map((sec) => ({
...sec,
items: search
? sec.items.filter((i) =>
t(i.labelKey).toLowerCase().includes(search.toLowerCase())
)
: sec.items,
})).filter((sec) => sec.items.length > 0);
if (!isOpen) return null;
return (
<>
<div className="fixed inset-0 z-40 bg-black/20 backdrop-blur-sm md:bg-transparent md:backdrop-blur-none" aria-hidden />
<div
ref={ref}
className="fixed left-4 right-4 top-20 md:left-auto md:right-4 md:top-16 md:w-[480px] z-50 rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-2xl overflow-hidden"
>
{/* Header */}
<div className="p-4 border-b border-gray-100 dark:border-gray-800 space-y-3">
<div className="flex items-center gap-2">
{userEmail ? (
<div className="flex items-center gap-2 flex-1 min-w-0">
<div className="w-9 h-9 rounded-full bg-gradient-to-br from-[#ff4d4f] to-orange-500 flex items-center justify-center text-white text-sm font-bold shrink-0">
{userEmail[0].toUpperCase()}
</div>
<span className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
{userEmail}
</span>
</div>
) : (
<button
onClick={onLoginClick}
className="px-4 py-2 rounded-lg bg-[#ff4d4f] text-white text-sm font-medium hover:bg-[#ff3333] transition-colors"
>
{t("login")}
</button>
)}
<Link
href="/dashboard"
onClick={onClose}
className="px-4 py-2 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-sm font-medium hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
>
{t("filters")}
</Link>
<Link
href="/join"
onClick={onClose}
className="w-9 h-9 rounded-full bg-[#ff4d4f] text-white flex items-center justify-center hover:bg-[#ff3333] transition-colors shrink-0"
aria-label={t("add")}
>
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
</svg>
</Link>
</div>
<div className="relative">
<svg className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
<input
type="text"
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder={t("searchPlaceholder")}
className="w-full pl-10 pr-4 py-2.5 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 text-sm focus:outline-none focus:ring-2 focus:ring-[#ff4d4f]/20 focus:border-[#ff4d4f]"
/>
</div>
</div>
{/* Profile + Dark mode */}
<div className="px-4 py-3 border-b border-gray-100 dark:border-gray-800 flex flex-wrap items-center gap-2">
{profileItems.map((item) => (
<Link
key={item.labelKey}
href={item.href}
onClick={onClose}
className="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100 transition-colors"
>
<span>{item.icon}</span>
<span>{t(item.labelKey)}</span>
</Link>
))}
<div className="ml-auto flex items-center gap-2">
<span className="text-xs text-gray-500 dark:text-gray-400">{t("darkMode")}</span>
<ThemeToggle />
</div>
</div>
{/* Sections */}
<div className="max-h-[60vh] overflow-y-auto p-4">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
{filteredSections.map((section) => (
<div key={section.titleKey}>
<h3 className="text-xs font-bold uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-3">
{t(section.titleKey)}
</h3>
<ul className="space-y-1">
{section.items.map((item) => (
<li key={item.labelKey}>
<Link
href={item.href}
onClick={onClose}
className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors ${
item.href !== "#" && (pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href)))
? "bg-[#ff4d4f]/10 text-[#ff4d4f]"
: "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800"
}`}
>
<span className="w-5 text-center">{item.icon}</span>
<span className="flex-1">{t(item.labelKey)}</span>
{item.new && (
<span className="px-2 py-0.5 rounded-full bg-[#ff4d4f] text-white text-[10px] font-medium">
NEW
</span>
)}
{item.ad && (
<span className="px-2 py-0.5 rounded bg-gray-200 dark:bg-gray-700 text-[10px] text-gray-500">
Ad
</span>
)}
</Link>
</li>
))}
</ul>
</div>
))}
</div>
</div>
{/* Footer */}
{userEmail && (
<div className="p-4 border-t border-gray-100 dark:border-gray-800">
<button
onClick={() => {
pbLogout();
onClose();
}}
className="flex items-center gap-2 w-full px-3 py-2 rounded-lg text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
>
<span>🚪</span>
<span>{t("logout")}</span>
</button>
</div>
)}
</div>
</>
);
});

27
app/components/ThemeToggle.tsx
View File

@@ -1,19 +1,38 @@
"use client";
import { useTheme } from "../context/ThemeContext";
import { useTheme } from "@/app/context/ThemeContext";
import { useState, useEffect } from "react";
export default function ThemeToggle() {
const { theme, toggleTheme } = useTheme();
const isDark = theme === "dark";
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
if (!mounted) {
return (
<button
type="button"
className="rounded-lg p-2 text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100"
aria-label="切换主题"
>
<div className="h-5 w-5" />
</button>
);
}
return (
<button
type="button"
onClick={toggleTheme}
className="rounded-lg p-2 text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100"
aria-label={theme === "dark" ? "切换到日间模式" : "切换到夜间模式"}
title={theme === "dark" ? "日间模式" : "夜间模式"}
aria-label={isDark ? "切换到日间模式" : "切换到夜间模式"}
title={isDark ? "日间模式" : "夜间模式"}
>
{theme === "dark" ? (
{isDark ? (
<svg
className="h-5 w-5"
fill="none"

21
app/context/ThemeContext.tsx
View File

@@ -21,14 +21,25 @@ type ThemeContextValue = {
const ThemeContext = createContext<ThemeContextValue | null>(null);
function getInitialTheme(): Theme {
if (typeof window === "undefined") return "light";
try {
const stored = localStorage.getItem(STORAGE_KEY) as Theme | null;
if (stored === "dark" || stored === "light") return stored;
if (window.matchMedia("(prefers-color-scheme: dark)").matches) return "dark";
} catch {
/* ignore */
}
return "light";
}
export function ThemeProvider({ children }: { children: ReactNode }) {
const [theme, setThemeState] = useState<Theme>("light");
const [mounted, setMounted] = useState(false);
useEffect(() => {
setThemeState(getInitialTheme());
setMounted(true);
const hasDark = document.documentElement.classList.contains("dark");
setThemeState(hasDark ? "dark" : "light");
}, []);
useEffect(() => {
@@ -39,7 +50,11 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
} else {
root.classList.remove("dark");
}
localStorage.setItem(STORAGE_KEY, theme);
try {
localStorage.setItem(STORAGE_KEY, theme);
} catch {
/* ignore */
}
}, [theme, mounted]);
const setTheme = useCallback((newTheme: Theme) => {

10
app/data/cities.ts
View File

@@ -439,3 +439,13 @@ export const allTags = [
"友好社区",
"户外运动",
];
export const FILTER_OPTIONS = [
{ value: "score", label: "综合评分" },
{ value: "cost-asc", label: "费用最低" },
{ value: "cost-desc", label: "费用最高" },
{ value: "internet", label: "网速最快" },
{ value: "safety", label: "最安全" },
{ value: "nomads", label: "游民最多" },
{ value: "temperature", label: "最温暖" },
];