# yao-iw

**Repository Path**: yao-coder/yao-iw

## Basic Information

- **Project Name**: yao-iw
- **Description**: **A collection of projects, tools, and ideas by Yao.**
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-13
- **Last Updated**: 2026-06-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Yao Works — yaoiw.com

**中文 | [English](README.en.md)**

> **A collection of projects, tools, and ideas by Yao.**
>
> 产品矩阵门户：在品牌主域 [yaoiw.com](https://yaoiw.com) 统一展示 Yao 的全部产品，
> 每个产品有独立介绍页与**实时在线状态**。与 [yao-info.me](https://yao-info.me)（个人作品集）分工互补——**本站讲产品，info 讲人**。

**线上地址**：<https://yaoiw.com>（默认中文 + 暗色；`/en` 英文版）

![Yao Works 首页](docs/preview.png)

---

## 目录

- [功能总览](#功能总览)
- [技术栈](#技术栈)
- [设计系统](#设计系统)
- [项目结构](#项目结构)
- [本地开发](#本地开发)
- [内容维护](#内容维护)
  - [增改产品](#增改产品)
  - [更换预览截图](#更换预览截图)
  - [修改文案 / 翻译](#修改文案--翻译)
- [实时探活系统](#实时探活系统)
- [部署与运维](#部署与运维)
  - [一键部署](#一键部署)
  - [线上架构](#线上架构)
  - [回滚](#回滚)
  - [服务器初始化（重建时）](#服务器初始化重建时)
- [产品清单](#产品清单)

---

## 功能总览

- **产品矩阵首页**：8 个产品的编辑式索引大行（幽灵编号视差、悬停强调色辉光、64px 圆形箭头 CTA）
- **产品详情页** `/[locale]/products/[slug]`：双语简介、编号特性列表、技术栈、高清界面截图、上一个/下一个导航，全部 SSG 预渲染
- **实时在线状态**：服务端探活各产品站点，HUD 遥测徽标显示 `LIVE · 87MS`（真实延迟）/ `OFFLINE` / `RELEASED`（桌面应用）/ `COMING SOON`，60 秒轮询
- **中英双语**：next-intl，`/zh`（默认）与 `/en`，切换带两段式淡入淡出过渡且保持滚动位置
- **暗 / 亮双主题**：暗色默认（品牌色），亮色参考 Trajectory 蓝调；切换走 View Transitions 交叉淡入；**入口永远是 中文 + 暗色**（不做持久化，刻意为之）
- **签名级交互**：
  - 英雄区**粒子标题**——按 Tosh A 真实字形采样成粒子场，鼠标隐形圆驱散（含涡流 + 跟手搅动的水流物理），粒子蜿蜒回位重组
  - 首屏**流星雨**——8 颗统一节拍错峰接力（零空窗），每颗有独立的燃尽距离与峰值亮度
  - 页脚巨型字标——桌面端 6 层 3D 挤出 + 鼠标跟随倾斜；移动端自动切换为横向滚动描边字带
  - 产品名走马灯——可点击进详情，悬停 3D 上翘 + 强调色中分展开横线，无缝循环
- **SEO**：sitemap.xml（双语全路由）、robots.txt、hreflang alternates、逐页 metadata、OG 分享图
- **可访问性**：全站动效尊重 `prefers-reduced-motion`；触屏自动禁用指针特效；语义化 HTML + 焦点样式；走马灯重复序列对读屏隐藏

## 技术栈

| 层 | 选型 |
|---|---|
| 框架 | Next.js 16 (App Router) · React 19 · TypeScript 5 |
| 样式 | Tailwind CSS v4（实际以手写 CSS 设计系统为主，见 `app/globals.css`） |
| i18n | next-intl 4（`localePrefix: always`，`localeDetection: false`） |
| 动效 | 原生 Canvas（粒子）· CSS 动画（流星/走马灯）· Lenis（平滑滚动，桌面端） |
| 字体 | **Tosh A**（自有品牌字体，`public/fonts/`）· JetBrains Mono · 中文回退系统字体 |
| 部署 | `output: 'standalone'` 产物 + systemd + Nginx + Cloudflare |

## 设计系统

**「Atmospheric Editorial」**——深色世界 + 每产品强调色 + 巨型编辑级排版。灵感参考 farmminerals.com / hubtown.co.in / trajectorywebdesign.com（亮色）。

核心规则（改样式前必读）：

- **字体**：全站英文一律 `'Tosh A', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif`，**`font-weight: 500` + `letter-spacing: -0.02em`**——层级靠字号不靠字重，禁用衬线点缀。Tosh A 只有 400/500/700 三档（无 600）。等宽层（域名/状态/HUD）用 JetBrains Mono，`letter-spacing: normal`
- **命名**：产品展示名一律驼峰 + 空格，**禁用 `-` 和 `.`**（Yao Dev、Yao Nav，非 Yao.Dev/YAO-NAV）；品牌字标统一 "Yao Works"
- **颜色**：所有颜色走 CSS 变量（`:root` 暗色默认 + `html[data-theme='light']` 覆盖块），产品强调色经 `--accent` 注入卡片/详情页；新增主题相关颜色必须两个主题都定义
- **状态色**：`--live`（绿）/ `--soon`（琥珀）/ `--down`（红），HUD 徽标 = 取景角括号 + 4 条信号柱
- 动效参数集中在各组件顶部常量区（粒子物理在 `HeroParticles.tsx`，流星在 `Meteors.tsx` + `globals.css` keyframes）

## 项目结构

```
yaoiw/
├── app/
│   ├── [locale]/                  # zh / en 路由段（含根布局）
│   │   ├── layout.tsx             # html/body、字体、主题、Provider 装配
│   │   ├── page.tsx               # 首页
│   │   ├── products/[slug]/page.tsx  # 产品详情（SSG × 16）
│   │   ├── [...rest]/page.tsx     # 404 兜底
│   │   └── not-found.tsx
│   ├── api/status/route.ts       # 实时探活接口
│   ├── globals.css                # ★ 全站设计系统（主题/组件/动效/响应式）
│   ├── sitemap.ts · robots.ts · icon.svg · apple-icon.png
├── components/
│   ├── Hero.tsx · HeroParticles.tsx   # 英雄区 + 粒子标题引擎
│   ├── Meteors.tsx                # 流星雨（确定参数，SSR 安全）
│   ├── Marquee.tsx                # 产品走马灯（4 拷贝无缝循环）
│   ├── ProductIndex.tsx           # 产品索引大行
│   ├── StatusProvider.tsx · StatusBadge.tsx  # 探活轮询 + HUD 徽标
│   ├── Statement.tsx · Footer.tsx · Nav.tsx
│   ├── LangToggle.tsx · ThemeToggle.tsx      # 滑块式分段开关
│   ├── MotionManager.tsx          # ★ 动效中枢：入场/视差/3D tilt/Lenis（随路由重绑定）
│   ├── CopyChip.tsx               # 微信点击复制
│   └── ArrowCta.tsx
├── data/products.ts               # ★ 产品注册表（唯一数据源）
├── i18n/ + messages/{zh,en}.json  # next-intl 配置与界面文案
├── lib/status.ts                  # 服务端探活（超时/缓存/并发去重）
├── public/
│   ├── fonts/ToshA-*.woff2        # 品牌字体
│   ├── products/<slug>/*.png      # 各产品预览截图
│   ├── products/manifest.json     # ★ 截图清单（文件名+像素尺寸）
│   └── og.png                     # 分享图 (1200×630)
├── proxy.ts                       # next-intl 中间件（Next 16 的 middleware）
├── deploy.ps1                     # ★ 一键部署脚本（Windows）
├── deploy/                        # 服务器侧基础设施配置（见部署章节）
└── PLAN.md                        # 项目规划与里程碑记录
```

## 本地开发

```powershell
npm install
npm run dev          # http://localhost:3000
npm run build        # 生产构建（standalone 产物在 .next/standalone）
```

> 注意：`next.config.ts` 配置了 `output: 'standalone'`，本地预览生产构建用
> `node .next\standalone\server.js`（记得把 `.next/static` 与 `public` 拷进 standalone，或直接用 `deploy.ps1` 的打包逻辑）。

## 内容维护

### 增改产品

唯一数据源：[`data/products.ts`](data/products.ts)。每个产品一个对象（双语 oneliner/description/features、技术栈、强调色、域名、状态）。增删产品后**首页行、走马灯、统计数字、详情页、sitemap、探活全部自动跟随**，无需改其他文件。

- `status: 'live'` 需要 `domain` + `url`（探活按 `url` 进行）；`'released'`（桌面/原生应用）用 `downloadUrl` + `releaseNote`（不探活）；`'coming-soon'` 用 `statusNote`
- `accent` 选一个站内未占用的色相（现有：紫/青/琥珀/灰/蓝/红/玫粉/绿）
- 记得同步 `siteStats`（products/live/released/comingSoon/servers）

### 更换预览截图

1. 把图放进 `public/products/<slug>/`（文件名随意，支持 png/jpg/webp，建议 2x retina）
2. 更新 `public/products/manifest.json` ——每张图一条 `{ "file", "width", "height" }`（真实像素尺寸，`next/image` 依赖它防布局抖动）
3. `.\deploy.ps1`（manifest 是构建期读取的）

> 大图无需担心体积：`next/image` 按访问端宽度自动压缩出图（3MB 原图 → 访客约 200KB）。

### 修改文案 / 翻译

- 界面文案：`messages/zh.json` / `messages/en.json`
- 产品文案：`data/products.ts` 内各自的 `{ zh, en }` 字段
- 英雄区标题（"Projects, tools & ideas / by Yao."）在 `components/Hero.tsx` 的 `HEADLINE_LINES`——改了它粒子字形自动跟随

## 实时探活系统

```
浏览器 StatusProvider（60s 轮询，页面隐藏暂停）
  → GET /api/status
    → lib/status.ts：并发探测所有 live 产品的 url
       · 6s 超时 · 60s 内存缓存 · 并发去重 · 4xx 算在线，网络错误/5xx/超时算离线
  → StatusBadge：LIVE · <延迟>MS（绿，信号柱跳动）/ OFFLINE（红，瘫平）/ RELEASED（绿，满柱稳定，桌面应用不探活）/ COMING SOON（琥珀，慢波浪）

点击 LIVE/OFFLINE 徽标 = 对该产品即时单独探测并原地刷新延迟（GET /api/status?slug=x，绕过缓存）；
频控双层：客户端 1 秒节流 + 服务端按 slug 限 1 次/秒。探测期间信号柱加速、延迟显示 …。
```

## 部署与运维

### 一键部署

```powershell
cd E:\java-code\yaoiw
.\deploy.ps1
```

四步全自动（约 90–130 秒）：本地构建 standalone → 打包 ~19MB → scp 上传 → 远端 `/opt/yaoiw/deploy-remote.sh`（解压新 release → 安装 Linux 版 sharp → **原子切换软链** → 重启服务 → **健康检查**，失败自动打印日志并退出非零）。

参数：`.\deploy.ps1 -KeyPath E:\ec2.pem -Target ec2-user@52.64.47.53`（默认即此值）。

### 线上架构

```
Cloudflare（DNS 代理 + HTTPS + 缓存）
  → Nginx @ 52.64.47.53（/etc/nginx/conf.d/yaoiw.com.conf）
     · CF Origin 证书：yaoiw.com + *.yaoiw.com（/etc/pki/tls/，2041 到期）
     · /_next/static/ 缓存 30 天 immutable
  → systemd yaoiw.service（Next standalone，127.0.0.1:3002，崩溃自拉起 + 开机自启）
  → /opt/yaoiw/current → releases/<时间戳>/（保留最近 3 个版本）
```

- 同机邻居：prompt.yaoiw.com、love.yaoiw.com、blog.yaoiw.com、yao-coder.com、iambeyouare.com 等——**改 Nginx 全局配置前先 `nginx -t`**
- `www.yaoiw.com`：Nginx 已配好 www→apex 301，但 Cloudflare 需有一条代理状态的 CNAME `www → yaoiw.com`
- 常用排查：`sudo journalctl -u yaoiw -n 50` · `sudo systemctl status yaoiw` · `curl -s 127.0.0.1:3002/zh -o /dev/null -w '%{http_code}'`

### 回滚

```bash
ssh -i E:\ec2.pem ec2-user@52.64.47.53
ls -dt /opt/yaoiw/releases/*            # 找上一个版本
ln -sfn /opt/yaoiw/releases/<旧版本> /opt/yaoiw/current
sudo systemctl restart yaoiw
```

### 服务器初始化（重建时）

`deploy/` 目录是全部服务器侧配置，按以下落位后即可用 `deploy.ps1` 发布：

| 文件 | 目标位置 | 动作 |
|---|---|---|
| `deploy-remote.sh` | `/opt/yaoiw/deploy-remote.sh` | `chmod +x`；`mkdir -p /opt/yaoiw/releases` |
| `yaoiw.service` | `/etc/systemd/system/` | `systemctl daemon-reload && systemctl enable yaoiw` |
| `yaoiw.com.conf` | `/etc/nginx/conf.d/` | `nginx -t && systemctl reload nginx` |

前置依赖：Node ≥ 20（`/usr/bin/node`）、npm、Nginx、`/etc/pki/tls/` 下的 yaoiw.com 证书对。

## 产品清单

| # | 产品 | 域名 | 类型 | 部署 |
|---|---|---|---|---|
| 01 | Yao Admin | yao-admin.com | 企业级后台管理系统 | Spring Boot + Next.js |
| 02 | Yao Dev | yao-coder.com | 开发者官网 + AI 日报 | Spring Boot + Vue 3 |
| 03 | DevStation | （桌面应用 · v0.3.1 已发布，Gitee 下载） | Windows 开发环境管理器 | Tauri 2 + Rust |
| 04 | Portfolio | yao-info.me | 个人作品集 | Next.js |
| 05 | Yao Nav | yao-nav.com | 网站导航 + AI 采集 | Spring Boot + Next.js |
| 06 | Prompt Atlas | prompt.yaoiw.com | AI 提示词资产库 | Spring Boot + Next.js |
| 07 | Love Wall | love.yaoiw.com（双入口 iambeyouare.com） | 情侣便签墙 | 原生前端 + Java API |
| 08 | Yao Blog | blog.yaoiw.com | Hexo 博客（Gitee 推送自动发布） | Hexo + Nginx |

---

## 联系

- Gitee：<https://gitee.com/yao-coder>
- Email：<talent_liyao@163.com>
- WeChat：`YaoCoder0626`

© Yao Works 2026 · 字体 Tosh A 为自有授权资产，请勿随包外发