Move nav chrome to top-right and refresh README.

Cluster language, theme, and notifications in nav-utils on the right; document three-ring product IA and stack in README. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-30 19:19:41 -05:00 · 2026-08-30 19:19:41 -05:00 · 47bbc7dd0f
commit 47bbc7dd0f
parent 969a0b037a
4 changed files with 189 additions and 217 deletions
--- a/README.md
+++ b/README.md
@ -1,50 +1,64 @@
 # nomadro · 数字游民旅居平台

-全栈数字游民旅居指南，品牌 **nomadro** — 用一行代码环游世界 🌏
+品牌 **nomadro** — 用一行代码环游世界 🌏

 **线上：** [https://nomadweb.nomadro.com](https://nomadweb.nomadro.com)

-核心产品闭环：**发现目的地 → 智能匹配 / 城市对比 → 旅居计划中心 → 登录云端同步**
+## 产品路径（环环相扣）
+
+功能很多，但**不一次全部展示**。导航与首页按三条环串联，每页只露出「接下来」：
+
+| 环 | 做什么 | 主要入口 |
+|----|--------|----------|
+| **探索 Explore** | 发现去哪 | 目的地、地图、下一站、签证；（离首页后再出现计划 / 对比） |
+| **连接 Connect** | 遇见同行 | 活动 → 社区 → 匹配 → 私信 |
+| **成长 Grow** | 路上做事 | 学院 → 赏金 → 工具箱（按需）→ 电子书 |
+
+```
+发现城市 ──► 写入计划 / 同城活动 ──► 社区 / 匹配 ──► 学院 / 赏金
+```
+
+- 顶栏：**探索 / 连接 / 成长** 三组下拉，**EN · 主题 · 通知** 固定在右上
+- `Ctrl+K` 空态只给三环捷径；次要页面要搜索才出现
+- 工具箱默认精选 +「展开全部」，不再当全站站点地图

 ## 技术栈

 | 层级 | 技术 | 说明 |
 |------|------|------|
-| 前端 | Next.js 16 + React 19 | App Router、ISR、Turbopack、standalone |
-| 后端 | FastAPI | REST API、业务逻辑、账号计划同步 |
-| 数据 | PocketBase + Mock 降级 | 内容库；用户收藏/计划可落盘 |
-| 部署 | Caddy + systemd（原生优先） | 生产非 Docker 跑 Web/API |
+| 前端 | Next.js 16 + React 19 | **仅 UI**；App Router、standalone |
+| 后端 | FastAPI | **全部业务逻辑**（无 Next.js 业务 API Route） |
+| 数据 | PocketBase | 主存储；本地可 Mock 降级 |
+| 对象存储 | S3 兼容（生产 SeaweedFS） | 媒体上传 |
+| 部署 | Caddy + systemd | 原生进程；勿与同机 dylive 业务互相干扰 |

 ## 项目结构

 ```
 nomadweb/
-├── frontend/                 # Next.js
-│   ├── src/app/              # 路由：/ /plan /compare /tools /profile …
-│   ├── src/components/       # UI 与工具组件
-│   └── src/lib/              # API、auth、trip/plan 存储与同步
+├── frontend/                 # Next.js（页面与组件）
+│   ├── src/app/              # 路由
+│   ├── src/components/       # UI（含 RingNext 下一步条）
+│   └── src/lib/              # api / auth / i18n / rings
 ├── backend/                  # FastAPI
-│   ├── app/routers/          # API 路由
-│   ├── app/services/         # PocketBase、Auth（含计划同步）
-│   └── app/data/             # Mock 降级 + user_store（运行时）
-├── deploy/                   # Caddy、systemd 单元
-├── scripts/                  # 本地开发、生产部署脚本
-├── pocketbase/               # PocketBase 数据目录
-└── docker-compose*.yml       # 本地 / 备选生产 Compose
+│   ├── app/routers/          # REST
+│   ├── app/services/         # PocketBase、S3、城市深度等
+│   └── app/data/             # Mock 降级（开发）
+├── deploy/                   # Caddy、systemd、env 模板
+├── scripts/                  # 本地开发与生产更新
+└── pocketbase/               # PB 数据目录（本地可选）
 ```

 ## 快速开始

 ### 1. PocketBase（可选）

-不启动则 API 自动使用 `backend/app/data/mock_data.py`。
+不启动则 API 使用 Mock。

 ```bash
 docker run -d -p 8090:8090 -v ./pocketbase/pb_data:/pb_data ghcr.io/muchobien/pocketbase:latest
 ```

-管理后台：http://localhost:8090/_/
-
 ### 2. FastAPI

 ```bash
@ -67,190 +81,109 @@ npm run dev

 访问：http://localhost:3000

-### 其他方式
-
 ```powershell
 .\scripts\dev.ps1   # Windows 一键
-docker compose up -d       # Compose 全栈
 ```

-## 核心产品
+## 核心功能一览

-| 能力 | 路径 / 入口 | 说明 |
-|------|-------------|------|
-| 🗺️ 地图 & 目的地 | `/#map` `/#destinations` | 筛选、收藏、勾选对比（最多 4 城） |
-| 🎯 智能匹配 | FAB / `M` | 4 步问卷；偏好本地保存；Top 结果可写入计划 / 对比 |
-| ⚖️ 城市对比台 | `/compare` | 可分享 `?cities=`；指标并排；写入计划 |
-| 🗓️ 旅居计划中心 | `/plan` | 多城时间轴、出发月、预算、站内备注、签证方案与超期提醒、就绪清单、MD / ICS 导出、分享链接 |
-| ☁️ 账号同步 | `/login?next=/plan` | 登录后合并本机与云端计划；收藏同步；服务重启落盘保留 |
-| 👤 个人中心 | `/profile` | 计划仪表盘、就绪度、收藏写入计划、成就 |
+按环归类（深度页会互相引导，避免平铺）：
+
+### 探索
+| 能力 | 路径 |
+|------|------|
+| 地图 / 目的地 | `/#map` `/#destinations` `/destinations/[slug]` |
+| 智能匹配 | 首页 CTA / `M` |
+| 下一站决策 | `/next-stop` |
+| 城市对比 | `/compare` |
+| 旅居计划 | `/plan`（时间轴、预算、签证提醒、清单、ICS） |
+| 签证指南 | `/#visa` |
+
+### 连接
+| 能力 | 路径 |
+|------|------|
+| 活动 RSVP / 直播间 | `/meetups` `/meetups/[id]/live` |
+| 社区讨论 | `/community` |
+| 游民匹配 | `/dating` |
+| 私信 | `/chat` |
+| 通知 | `/notifications` |
+
+### 成长
+| 能力 | 路径 |
+|------|------|
+| 游民学院 | `/digital` |
+| 赏金任务 | `/gigs` |
+| 工具箱 | `/tools`（实用小工具，非功能总览） |
+| 电子书 | `/book` |
+| 会员 | `/join` `/pricing` |

 演示账号：`demo@nomadro.com` / `demo123`

-## 首页与工具箱
-
-首页仍聚合大量旅居工具（按视口懒加载），完整列表见 `/tools` 与 `/changelog`。常见能力包括：
-
- 费用计算器、多币种、启动金 / 跑道、落地首月成本
- 时区看板、会议重叠、日照办公窗、时差估算
- 签证指南 + 停留倒计时、保险、税居天数
- 联合办公、住宿、SIM、电源、紧急联系、防坑与取现
- 行李清单、到站清单、专注时钟、博客与 FAQ 等
-
-导航、Hero、快捷条、底栏与新手引导优先导向 **计划 / 对比**，小工具集中在工具箱。
-
-## 体验与性能
-
- 首屏：地图 + 目的地；中屏及以下 `WhenVisible` + 动态拆包
- Outfit 自托管；中文系统字体；缩短 Loader；粒子延后、无连线
- 深浅色主题、`Ctrl+K` 全局搜索、Toast、Cookie 提示
- 响应式布局；`.section` 使用 `content-visibility`
-
-## 页面路由
-
-| 路径 | 说明 |
-|------|------|
-| `/` | 首页 |
-| `/plan` | 旅居计划中心 |
-| `/compare` | 城市对比台 |
-| `/tools` | 工具箱 |
-| `/destinations/[slug]` | 目的地详情（画像、停留月数、加入计划） |
-| `/login` | 登录 / 注册（`?next=` 回流，默认 `/plan`） |
-| `/profile` | 用户中心 |
-| `/blog/[slug]` | 博客 |
-| `/about` `/privacy` `/changelog` | 关于 / 隐私 / 更新日志 |
-| `/sitemap.xml` | 含 `/plan`、`/compare` 等 |
-
-## 后端 API（节选）
-
-| 端点 | 方法 | 说明 |
-|------|------|------|
-| `/api/v1/destinations` | GET | 列表（region / search / sort） |
-| `/api/v1/destinations/{slug}` | GET | 详情 |
-| `/api/v1/destinations/compare` | POST | 按 slug 取城 |
-| `/api/v1/calculator` | POST | 费用估算 |
-| `/api/v1/search` | GET | 全局搜索 |
-| `/api/v1/visas` 等 | GET | 签证 / FAQ / 博客 / 图表 |
-| `/api/v1/auth/register` | POST | 注册 |
-| `/api/v1/auth/login` | POST | 登录 |
-| `/api/v1/auth/demo` | GET | 演示登录 |
-| `/api/v1/auth/favorites` | GET/POST | 收藏 |
-| `/api/v1/auth/plan` | GET/PUT | **旅居计划云端读写** |
-| `/api/v1/auth/profile/stats` | GET | 个人统计 |
-| `/api/v1/subscribe` | POST | 邮件订阅 |
-| `/api/v1/health` | GET | 健康检查 |
-
-PocketBase 不可用时内容接口降级 Mock。用户收藏与计划写入 `backend/app/data/user_store.json`（运行时生成，勿提交密钥与生产数据）。
-
 ## 环境变量

-**Backend `backend/.env`**
+**Backend**

 ```env
 POCKETBASE_URL=http://127.0.0.1:8090
-POCKETBASE_ADMIN_EMAIL=admin@nomadro.com
-POCKETBASE_ADMIN_PASSWORD=admin123456
+POCKETBASE_ADMIN_EMAIL=...
+POCKETBASE_ADMIN_PASSWORD=...
 CORS_ORIGINS=http://localhost:3000
+# S3（生产见服务器 deploy/nomadro-api.env）
 ```

-**Frontend `frontend/.env.local`**
+**Frontend**

 ```env
 NEXT_PUBLIC_API_URL=http://localhost:8000/api/v1
 NEXT_PUBLIC_SITE_URL=http://localhost:3000
 ```

-生产前端构建时：
+生产构建：

 ```env
 NEXT_PUBLIC_API_URL=https://nomadweb.nomadro.com/api/v1
 NEXT_PUBLIC_SITE_URL=https://nomadweb.nomadro.com
 ```

-## Git 工作流
+## Git 与部署

-仓库：[gitea.dsx2020.com/eric/nomadweb](https://gitea.dsx2020.com/eric/nomadweb) · 主开发分支 **`dev1`**
+仓库：[gitea.dsx2020.com/eric/nomadweb](https://gitea.dsx2020.com/eric/nomadweb) · 分支 **`dev1`**

 ```bash
-# 日常开发
 git checkout dev1
 git pull origin dev1
 # … 改代码 …
-git add -A
-git status          # 确认未包含 .env、密钥、运行时 json
-git commit -m "feat: 简述改动"
 git push origin dev1
-
-# 部署到生产（服务器 git pull + 增量构建）
-python scripts/deploy_update.py
+python scripts/deploy_update.py   # 服务器 pull + 增量构建重启
 ```

-| 步骤 | 说明 |
-|------|------|
-| `dev1` | 功能开发、联调、上线均在此分支 |
-| `main` | 稳定快照，按需从 `dev1` 合并 |
-| 密钥 | `deploy/nomadro-api.env` 仅放服务器，模板见 `deploy/nomadro-api.env.example` |
-| 运行时数据 | `user_store.json` / `social_store.json` / `community_store.json` 不提交 |
-
-**不要用 SFTP 全量同步当主流程** — `deploy_direct_sync.py` 仅作 Gitea 不可用时的应急备份（慢且易漏文件）。
-
-## 部署
-
-### 生产（已上线）
-
-| 项目 | 地址 |
-|------|------|
+| 生产进程 | 地址 |
+|----------|------|
 | 网站 | https://nomadweb.nomadro.com |
-| API 健康检查 | https://nomadweb.nomadro.com/api/v1/health |
-| API 文档 | https://nomadweb.nomadro.com/docs |
-| 仓库 | https://gitea.dsx2020.com/eric/nomadweb |
-
-**架构（原生 systemd，Caddy 反代）：**
-
-| 进程 | 地址 |
-|------|------|
-| Caddy | HTTPS → 见 `deploy/caddy/nomadweb.caddy` |
-| `nomadro-web` | `127.0.0.1:3055`（Next standalone） |
-| `nomadro-api` | `127.0.0.1:8055`（uvicorn） |
+| `nomadro-web` | `127.0.0.1:3055` |
+| `nomadro-api` | `127.0.0.1:8055` |
 | PocketBase | `127.0.0.1:8090` |
+| S3 | `s3.nomadro.com` → SeaweedFS |

-单元：`deploy/systemd/nomadro-web.service`、`nomadro-api.service`。
+**注意：** 同机还跑有 [dylive.nomadro.com](https://dylive.nomadro.com/)（`/opt/douyinWEB`）。更新 nomadweb 时**不要**改动 / 限流 / 杀掉直播相关进程。

-**推荐更新（Git）：**
-
-```bash
-git push origin dev1
-python scripts/deploy_update.py
-```
-
-服务器执行 `git pull` → 按变更只重建前端或后端 → `systemctl restart`；比 SFTP 全量同步快且可回滚。
-
-**应急（Gitea 不可用 / 未 push 的本地提交）：**
-
-```bash
-python scripts/deploy_direct_sync.py
-```
-
-SFTP 同步变更文件 → 重建前端（并重启 API）→ 健康检查。
-
-**备选 Docker Compose：** 见 `docker-compose.prod.yml`（生产默认以原生为准）。
+密钥仅放服务器 `deploy/nomadro-api.env`（模板见 `*.env.example`），勿提交。

 ## 快捷键

 | 按键 | 功能 |
 |------|------|
-| `Ctrl+K` | 全局搜索 |
+| `Ctrl+K` | 全局搜索（三环捷径） |
 | `M` | 智能匹配 |
-| `P` | 打开旅居计划中心 |
-| `T` | 打开工具箱 |
-| `G` | 命运转盘（首页） |
-| `?` | 快捷键帮助 |
+| `P` | 旅居计划 |
+| `T` | 工具箱 |
+| `?` | 帮助 |
 | `Esc` | 关闭弹窗 |

-## 相关文档
+## 相关

- 产品迭代：[`/changelog`](https://nomadweb.nomadro.com/changelog)
- 本地变更记录：`frontend/src/app/changelog/page.tsx`
+- 迭代说明：[/changelog](https://nomadweb.nomadro.com/changelog)
+- 前端脚手架说明：`frontend/README.md`（以本文件为准）

 ## License

--- a/frontend/README.md
+++ b/frontend/README.md
@ -1,36 +1,20 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# frontend · nomadro

-## Getting Started
+Next.js App Router UI for [nomadro](https://nomadweb.nomadro.com).

-First, run the development server:
+**业务逻辑全部在 FastAPI**（`../backend`）。本目录只负责页面与交互。
+
+完整架构、三环产品路径、环境变量与部署说明见仓库根目录 **[README.md](../README.md)**。

 ```bash
+cp .env.local.example .env.local
+npm install --legacy-peer-deps
 npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
 ```

-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+生产构建需设置：

-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+```env
+NEXT_PUBLIC_API_URL=https://nomadweb.nomadro.com/api/v1
+NEXT_PUBLIC_SITE_URL=https://nomadweb.nomadro.com
+```
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@ -141,7 +141,42 @@ img { max-width: 100%; display: block; }
  height: 100%;
  display: flex;
  align-items: center;
-  justify-content: space-between;
+  gap: 16px;
+}
+
+.nav-container > .logo {
+  flex-shrink: 0;
+}
+
+.nav-container > .nav-links {
+  flex: 1;
+  justify-content: center;
+  min-width: 0;
+}
+
+.nav-utils {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+.nav-utils .nav-lang-btn,
+.nav-utils .nav-cta,
+.nav-utils .nav-notify {
+  flex-shrink: 0;
+}
+
+.nav-utils .nav-cta {
+  width: 36px;
+  height: 36px;
+  font-size: 1.05rem;
+}
+
+.nav-notify-guest {
+  opacity: 0.85;
 }

 .logo {
@ -9477,17 +9512,20 @@ img { max-width: 100%; display: block; }
  padding-top: 12px;
  border-top: var(--border-glass);
 }
-.nav-lang-desktop { margin-left: 4px; }
-.nav-login-desktop { margin-left: 4px; }

@media (max-width: 768px) {
-  .nav-lang-desktop,
-  .nav-login-desktop { display: none; }
+  .nav-login-desktop,
+  .nav-user-desktop { display: none; }
  .nav-mobile-extras { display: flex; }
  .nav-mobile-extras .nav-login-btn {
    text-align: center;
    display: block;
  }
+  .nav-utils { gap: 6px; }
+  .nav-utils .nav-lang-btn {
+    min-width: 40px;
+    padding: 6px 8px;
+  }

  .plan-page,
  .compare-page,
@ -10743,7 +10781,7 @@ img { max-width: 100%; display: block; }
  .live-chat { border-left: none; border-top: var(--border-glass); min-height: 320px; }
 }

-/* —— Feature rings / progressive IA —— */
+/* -- Feature rings / progressive IA -- */
 .nav-group {
  position: relative;
 }
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@ -197,9 +197,6 @@ export default function Navbar() {
          ))}

          <div className="nav-mobile-extras">
-            <button type="button" className="nav-lang-btn" onClick={toggleLocale} aria-label={t.nav.lang}>
-              {locale === "zh" ? t.lang.en : t.lang.zh}
-            </button>
            {!user && (
              <Link
                href={`/login?next=${encodeURIComponent(loginNext)}`}
@ -209,27 +206,46 @@ export default function Navbar() {
                {t.nav.login}
              </Link>
            )}
+            {user && (
+              <Link href="/profile" className="nav-login-btn" onClick={closeAll}>
+                {t.footer.profile}
+              </Link>
+            )}
          </div>
        </nav>

-        <button type="button" className="nav-lang-btn nav-lang-desktop" onClick={toggleLocale} aria-label={t.nav.lang}>
+        {/* Right chrome: language / theme / notifications — always top-right */}
+        <div className="nav-utils" aria-label="preferences">
+          <button type="button" className="nav-lang-btn" onClick={toggleLocale} aria-label={t.nav.lang}>
            {locale === "zh" ? "EN" : "中文"}
          </button>
          <button type="button" className="nav-cta" onClick={toggleTheme} aria-label={t.nav.theme}>
            <span className="theme-icon">{theme === "dark" ? "🌙" : "☀️"}</span>
          </button>
          {user ? (
-          <>
            <Link href="/notifications" className="nav-notify" aria-label={t.nav.notifications}>
              🔔{unread > 0 && <em className="nav-notify-badge">{unread}</em>}
            </Link>
-            <Link href="/profile" className="nav-user">
+          ) : (
+            <Link
+              href={`/login?next=${encodeURIComponent(loginNext)}`}
+              className="nav-notify nav-notify-guest"
+              aria-label={t.nav.notifications}
+              title={t.nav.login}
+            >
+              🔔
+            </Link>
+          )}
+          {user ? (
+            <Link href="/profile" className="nav-user nav-user-desktop">
              <span>{user.avatar}</span>
              <span className="nav-user-name">{user.name}</span>
            </Link>
-          </>
          ) : (
-          <Link href={`/login?next=${encodeURIComponent(loginNext)}`} className="nav-login-btn nav-login-desktop">
+            <Link
+              href={`/login?next=${encodeURIComponent(loginNext)}`}
+              className="nav-login-btn nav-login-desktop"
+            >
              {t.nav.login}
            </Link>
          )}
@ -244,6 +260,7 @@ export default function Navbar() {
            <span />
          </button>
        </div>
+      </div>
    </header>
  );
 }