# dev-projects

**Repository Path**: jht7702/dev-projects

## Basic Information

- **Project Name**: dev-projects
- **Description**: 程序开发项目合集（子项目：warm-companion 温暖陪伴）
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-09-02
- **Last Updated**: 2026-09-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 程序开发项目合集

个人程序开发项目的统一仓库，用于收纳和版本管理各类小程序项目。每个独立项目以子目录形式收录，目录即子项目边界。

- 仓库地址：`git@gitee.com:jht7702/dev-projects.git`

- 默认分支：`master`

- 收录方式：每个子项目一个独立子目录，互不干扰、可独立演进

## 目录结构

```
dev-projects/
├── .gitignore          # 通用忽略规则（系统文件 / 依赖 / 构建产物 / 密钥等）
├── README.md           # 本文件
├── index.html          # ★ 总界面（启动器）：所有小程序的入口
├── apps.js             # 小程序清单（配置驱动，新增项目只需改这个文件）
├── portal.css          # 总界面样式
├── portal.js           # 总界面交互（渲染卡片 / 搜索 / 标签筛选）
├── warm-companion/       # 子项目：温暖陪伴（情感聊天原型）
├── habit-checkin/        # 子项目：习惯打卡台（四页打卡工作台）
├── llm-from-scratch/     # 子项目：从零构建大模型（Python 训练 + 网页推理演示）
├── rnn-from-scratch/     # 子项目：最简 RNN（20×20 记忆矩阵，逐字生成演示）
├── baobao-learning-park/   # 子项目：宝贝学习乐园（4 岁幼儿启蒙，5 大互动模块）
├── css-loading-animations/  # 子项目：CSS 加载动画合集（8 种纯 CSS Loading，可复制）
├── gargantua/               # 子项目：GARGANTUA 黑洞（WebGL 实时相对论光线追踪）
├── hermes-panorama/         # 子项目：爱马仕 20 年全景（经营与股价数据看板）
├── todo-h5-app/             # 子项目：待办清单 H5（深色手机端待办，月历 + 统计闭环）
└── starship-engineering-lab/  # 子项目：星舰工程实验室（Starship 交互式三维拆解，React + Three.js）
```

## 总界面（入口）

打开仓库根目录的 `index.html`，即为所有小程序的**统一入口**：卡片式启动器，点击卡片进入对应小程序，子项目页右上角有返回入口可回到总界面。

同样保持零依赖、零构建、离线可用。

**功能**

- 卡片网格：图标 / 名称 / 定位 / 描述 / 标签，卡片主色调由配置中的 `theme` 渐变决定
- 实时搜索：按名称、副标题、描述、标签过滤；`/` 聚焦搜索框，`Esc` 清空
- 标签筛选：自动汇总清单里的所有标签生成筛选条（新增标签无需改代码）
- 状态区分：`online` 可点击进入；`wip` 显示「开发中」并置灰，点击提示敬请期待
- 顶部统计：已上线 / 开发中的小程序数量，随清单自动更新
- 「新增小程序」占位卡：点击查看新增步骤
- 响应式：宽屏多列，窄屏自动单列

**扩展方式：配置驱动**

所有小程序都登记在根目录 `apps.js` 的 `APPS` 数组中，总界面从中读取并自动渲染。新增一个小程序**不需要改动 `portal.js`**，见下方「如何新增一个子项目」。

## 子项目

### warm-companion · 温暖陪伴

情感陪伴类聊天应用的纯前端可运行原型。通过虚拟角色「蓉蓉」提供日常问候、情绪疏导、鼓励打气等健康正向的陪伴对话，措辞积极温暖、保持恰当分寸。

**技术形态**：纯 HTML + CSS + Vanilla JS，零依赖、零构建、离线可运行，双击 `index.html` 即可打开体验。

**核心功能**

- 三栏全屏布局：左侧会话历史（头像 / 摘要 / 时间）、中间聊天区、右侧可折叠话题模板面板

- 虚拟角色「蓉蓉」：阳光、温柔、善于倾听的黏人妹妹人设，内联 SVG 头像，在线陪伴状态标识

- 逐字打字机回复 + 气泡渐入动画，支持 `**粗体**`、行内代码、代码块等轻量富文本渲染

- 聊天话题模板：一键发起暖心开场白（心情陪伴 / 生活分享 / 随便唠唠）

- 会话历史与搜索、开始新对话、回复前 loading 三点跳动

- 情绪引导兜底：识别敏感表达时温柔引导寻求专业帮助（如心理援助热线 12356）

**架构分层**（便于后期无缝替换真实 AI 接口）

| 文件                          | 职责                                         |
| --------------------------- | ------------------------------------------ |
| `mock.js`                   | 数据源：会话历史 + 话题模板                            |
| `api.js`                    | 接口桩：`api.askRongRong()`，模拟流式分段回复，签名与真实接口一致 |
| `app.js`                    | 交互逻辑：渲染、状态管理、打字机、话题面板、发送流程                 |
| `index.html` / `styles.css` | 页面结构与温柔治愈风样式                               |

> 未来可将 `api.js` 的桩实现替换为真实后端（如 SSE 流式 `POST /api/chat/stream`），前端无需改动。

### habit-checkin · 习惯打卡台

习惯养成打卡工作台，四页结构（今日打卡 / 习惯管理 / 数据统计 / 个人设置），单文件全内联，数据存 localStorage。

**技术形态**：单文件 HTML，CSS / JS / SVG 图表与图标全内联，零依赖、零构建、断网可用。

**核心功能**

- 四种打卡方式：打勾（完成即打卡）、计数（累加次数）、时长（记录分钟）、时间段（起止时间自动算时长）

- 今日页：进度环、连续天数、心情选择、"今天还差 N 个"置顶提醒（含顺延提示）

- 习惯管理：新增 / 编辑 / 删除，可选 24 个图标、10 种颜色、方形或长条卡片尺寸

- 统计页：30 天热力图、本周完成柱图、本月心情曲线、10 枚成就徽章（按真实数据点亮）

- 设置页：头像与昵称、6 套波点主题配色、晚间提醒、音效震动、导出 / 导入备份、清空示例

- 数据安全：localStorage 自动保存（key 前缀 `wb_habit_`），支持导出 JSON 与导入恢复

> 完整交付说明见 [habit-checkin/README.md](habit-checkin/README.md)。

### llm-from-scratch · 从零构建大模型（最小可运行示例）

一个 11.8 万参数的极简 GPT，用来讲清大模型到底是怎么构建的：字符级分词 → 嵌入 → 多头因果自注意力 → FFN → 残差 + LayerNorm，**前向传播、反向传播、Adam 优化器全部用 NumPy 手写**，并用数值梯度校验（误差 ~1e-7）证明梯度公式正确。训练后模型能续写古诗。

**技术形态**：Python 命令行项目（依赖 `numpy`，可选 `torch`）负责训练；同时提供 `index.html` 网页入口，已登记到 `apps.js`，可从总界面直接进入。

**网页版**：`index.html` 加载的是 Python 训练出来的同一份权重（`weights.js`，float32 + base64），用 `mini-gpt.js` 在浏览器里重新实现前向传播 —— 可以直接输入提示词让模型续写古诗，并查看注意力权重热力图与下一个字的概率分布。零依赖、离线可用。

**运行方式**：

```bash
cd llm-from-scratch
pip install -r requirements.txt
python 03_train_numpy.py --gradcheck   # 校验手写梯度
python 03_train_numpy.py               # 训练 + 生成
python 06_export_web_model.py          # 导出权重给网页用
# 然后双击 index.html 即可体验网页版
```

> 完整教学文档见 [llm-from-scratch/README.md](llm-from-scratch/README.md)。

### rnn-from-scratch · 最简 RNN（最小可运行示例）

一个 **5791 参数**的极简循环神经网络语言模型，用来讲清"神经网络怎么生成文字"的最短路径：字符级分词 → 一个 `h_t = tanh(W·x + W_hh·h + b)` 的循环单元 → 自回归逐字采样。**前向传播、BPTT 反向传播、梯度裁剪全部用 NumPy 手写**，并用数值梯度校验（误差 ~1e-11）证明 BPTT 正确。训练后模型能一个字一个字地续写古诗。

**技术形态**：Python 命令行项目（仅依赖 `numpy`）负责训练；同时提供 `index.html` 网页入口，已登记到 `apps.js`，可从总界面直接进入。

**网页版**：`index.html` 加载的是 Python 训练出来的同一份权重（`weights.js`，float32 + base64，仅 33 KB），用 `mini-rnn.js` 在浏览器里重新实现前向传播 —— 可以看模型逐字蹦出古诗，并实时观察 20 维记忆向量随每个字的激活变化与下一个字的概率分布。零依赖、离线可用。

**运行方式**：

```bash
cd rnn-from-scratch
python 01_rnn_numpy.py        # 梯度校验：手写 BPTT vs 数值梯度
python 02_train_numpy.py      # 训练 3000 步（CPU 约 6 秒），边训边看生成
python 03_export_web_model.py # 导出权重给网页用
# 然后双击 index.html 即可体验网页版
```

> 完整教学文档见 [rnn-from-scratch/README.md](rnn-from-scratch/README.md)。

### baobao-learning-park · 宝贝学习乐园

为 4 岁幼儿打造的纯前端互动启蒙工作台，彩虹糖果配色、活泼可爱，PC 侧边栏 + 手机底部 Tab 双端适配，按钮 ≥44px 方便小手点击。

五大模块：

- **字母乐园**：26 个英文字母卡片点击用 Web Speech API 发音，大小写配对游戏
- **古诗花园**：8 首经典幼儿古诗带拼音，点诗句中文朗读
- **数字王国**：0–20 数字认知 + 10 以内加减法随机出题 + 数数小游戏
- **逻辑挑战**：找规律 / 图形配对 / 排序题，每题 3–4 个选项
- **闯关冒险**：综合随机出题，每题 1 星，集满解锁成就徽章墙

进度、星星与徽章存浏览器 `localStorage` 持久化；同时已通过 WorkBuddy 资料库发布为在线版，手机扫码即用：https://workbuddy.link/p/99ItNcXBjlNV2bsLVmgkGF

> 完整说明见 [baobao-learning-park/README.md](baobao-learning-park/README.md)。

### css-loading-animations · CSS 加载动画合集

8 种纯 CSS 加载动画的预览与取用工具，全部动画**仅用 `@keyframes` + `transform` 驱动**，不依赖 JavaScript，卡片上「复制 CSS」即可粘贴到任意项目使用。

**技术形态**：单文件 HTML，CSS / JS 全内联，零依赖、零构建、离线可运行，已登记到 `apps.js`，可从总界面直接进入。

**收录的 8 种动画**

| 动画 | 说明 |
| --- | --- |
| 旋转圆环 | 渐变描边持续旋转，最经典通用的加载指示器 |
| 脉冲圆点 | 三点依次缩放呼吸，节奏轻盈、体量小巧 |
| 弹跳柱条 | 五根柱条交错弹跳，音频可视化风格的动感 |
| 波纹圆圈 | 涟漪由内向外扩散，雷达探测般的层次感 |
| 渐变锥形旋转器 | 锥形渐变扫过整圈，现代质感的旋转加载 |
| 打字指示器 | 气泡内三点上下跳动，对话 UI 的标配组件 |
| 骨架屏微光 | 占位内容横向扫光，内容加载时自然过渡 |
| DNA 双螺旋 | 双链在三维空间绕轴旋转，科技与生物感兼备 |

**其他特性**

- 实时预览舞台：每张卡片独立展示动画运行效果，深色背景更易观察细节
- 一键复制：复制按钮带「已复制 ✓」反馈，取用的是该动画完整可用的 CSS 片段
- 无障碍降级：尊重 `prefers-reduced-motion`，开启减弱动效时自动降级为静态 / 微光展示

### gargantua · GARGANTUA 黑洞

史瓦西黑洞的实时相对论光线追踪演示：不做任何"假透镜"贴图，而是让片元着色器对每条视线积分零测地线方程，光线弯曲、光子环、吸积盘的上下镜像都由此自然产生。

**技术形态**：Three.js + 自写 GLSL，依赖全部内置（`vendor/` 放 Three.js 与所需 addons，`audio/` 放 opus / ogg / mp3 三种音频格式）。源码（`js/main.js` + `js/shaders.js`）已通过 `build-bundle.mjs`（esbuild）打成单脚本 `js/gargantua.bundle.js`，**双击 `index.html` 即可直接渲染，无需本地服务器**。

**核心能力**

- 真实测地线积分：可调步数（精度 / 性能权衡），视界内判定为黑，逃逸光线采样星空背景
- 相对论吸积盘：多普勒频移（蓝移 / 红移）+ 引力红移 + 相对论集束效应，盘面在天体背面被透镜"翻折"到上方
- 五种机位：电影运镜序列 / POSTER 38° / EDGE-ON / POLAR / CLOSE PASS，一键平滑飞行
- 实时参数面板（P）：视界尺度、盘内外径、倾角、湍流、曝光、泛光强度等，可一键 RESET
- 后处理：UnrealBloom 泛光 + 色调映射，三档画质（STD / HIGH / CINE）并按帧率自动降级
- HUD 遥测：观测距离、盘倾角、测地线步数、渲染档位、帧率与任务计时
- 键鼠操作：拖拽环绕、滚轮 / 双指缩放，`1-4` 视角、`C` 电影、`R` 自动环绕、`P` 参数、`M` 声音、`H` HUD

**改完源码怎么重新打包**

```bash
npm install -g esbuild
cd gargantua
node build-bundle.mjs
```

或者想直接用 ES Module 在 `http://` 下调试（实时编辑源码、浏览器刷新即可），打开同目录的 `dev.html` 即可（依赖本地 HTTP 服务器，例如 `python -m http.server 8000`）。

> 目录内的 `_dev/` 是开发期调试产物（截图、日志、探针脚本与 v1 备份），不影响运行，可随时删除。

### hermes-panorama · 爱马仕 20 年全景

把爱马仕（RMS.PA）2006—2025 二十年的市场与经营数据整理成一块可交互看板，并保留全部原始数据文件供二次分析。

**技术形态**：单页 HTML + 自绘 SVG 图表，零依赖、零构建、离线可用；数据由 `build_data.py` 从目录内的 CSV 预生成 `data.js`（`window.HERMES_DATA`），因此双击 `index.html` 即可查看。

**看板内容**

- KPI：最新收盘价、20 年累计涨幅（约 37 倍）、年化收益 CAGR、HER / LVMH 比价、最大回撤（-44.9%，2008 金融危机）、最新年度净利率
- 五个视角：累计收益对比（对数轴，2006 年 = 100）/ 绝对股价 / HER-LVMH 比价 / 年度涨跌幅 / 营收与净利润
- 年度明细表：20 年的开盘、收盘、最高、最低、涨跌幅、LVMH 对照与年成交量
- 经营表：营业收入、毛利润、经营利润、EBITDA、净利润与毛利率 / 经营利润率 / 净利率、稀释 EPS
- 数据包文件：Excel 全景工作簿、全量日线 CSV、比价 CSV、利润表 CSV 与 5 张配套图表，均可下载或预览

**数据文件**

| 文件 | 内容 |
| --- | --- |
| `Hermes_20Year_Panorama_2006_2025.xlsx` | 20 年经营全景工作簿 |
| `hermes_all_prices.csv` | 爱马仕 2006—2025 日线 OHLCV（5110 行） |
| `lvmh_price_*.csv` | LVMH 日线，按两年一个文件分卷 |
| `ratio_data.csv` | 双方收盘价、成交量与 HER / LVMH 比价 |
| `hermes_income_stmt.csv` | 年度利润表明细（2022—2025） |

重新生成数据：`python build_data.py`（会覆盖 `data.js`）。

### todo-h5-app · 待办清单 H5

深色模式的手机端待办清单，3 页可交互闭环：日历待办首页 / 新增任务编辑页 / 任务数据统计页。原独立仓库已并入本统一仓库，作为子项目收纳。

**技术形态**：纯 HTML + CSS + Vanilla JS，零依赖、零构建、离线可运行，已登记到 `apps.js`，可从总界面直接进入；双击 `todo-h5-app/index.html` 也能单独使用。

**核心功能**

- 首页：月历点选过滤、月/周切换、按今天/明天/本周/已完成分组
- 新增：标题、日期、时间、标签、优先级、定时提醒
- 完成：勾选自动归档，实时更新统计
- 统计：完成率环形图、近 7 天柱状图、分类分布、已归档数量，周/月切换
- 数据存 localStorage，刷新不丢；损坏自动重建示例数据

> 完整说明见 [todo-h5-app/README.md](todo-h5-app/README.md)。

### starship-engineering-lab · 星舰工程实验室

`Inside Starship` —— 面向 SpaceX Starship 下一代航天器的**交互式工程数字孪生拆解学习平台**。用 React + react-three-fiber（Three.js）在浏览器里实时渲染一颗可拆解的星舰，配套工程讲解，无需任何插件。

**技术形态**：Vite + React + Three.js 构建的网页应用。源码在 `src/`，构建产物（已登记到 `apps.js`，可从总界面直接进入）为 `dist/index.html`，资源路径已改为相对引用，可在仓库子路径下直接访问。

**核心能力**

- 可交互三维星舰：鼠标左键选择零件、拖拽旋转、滚轮缩放；提供「爆炸分解」滑块逐层展开结构、「幽灵模式」半透明透视
- 六大视图：首页（Home）/ 拆解探索（Explorer）/ 工程（Engineering）/ 任务（Mission）/ 手册（Manual）/ 科学（Science），顶栏一键切换
- 逐零件讲解：点选后展示该部件的结构、用途与工程要点
- 工程手册与科学原理：整流罩、贮箱、猛禽发动机、热防护系统等关键系统的说明
- 任务剖面：发射、级间分离、入轨、再入回收等任务阶段的演示与讲解

**运行方式**

```bash
cd starship-engineering-lab
npm install
npm run dev        # 本地开发预览（Vite 热更新）
# 或构建静态产物：
npm run build      # 产物输出到 dist/（已纳入仓库，可直接被总面板引用）
npm run preview    # 预览构建产物
```

> 注意：该子项目为 ES Module 应用，需经 HTTP 服务（如 `npm run preview`、本地服务器或 Pages 部署）访问，直接以 `file://` 双击打开会被浏览器的模块跨域策略拦截。

## 如何新增一个子项目

1. 在仓库根目录下新建子目录，例如 `dev-projects/新项目名/`，入口页面放在该目录内（如 `新项目名/index.html`）

2. 按需补充或修改根目录 `.gitignore` 的忽略规则

3. 在根目录 `apps.js` 的 `APPS` 数组中追加一条配置（各字段说明见该文件头部注释）：

```js
{
  id: '新项目名',                   // 建议与子目录同名
  name: '小程序标题',
  subtitle: '一句话定位',
  desc: '这个小程序做什么、解决什么问题。',
  icon: 'sparkles',                // 图标名，取值见 portal.js 的 ICONS
  theme: ['#7aa8ff', '#a8d8ff'],   // 图标渐变色，决定卡片主色调
  tags: ['工具', '纯前端'],         // 自动汇总成总界面的标签筛选条
  status: 'online',                // 'online' 可体验 / 'wip' 开发中（置灰）
  path: './新项目名/index.html'
}
```

4. 提交并推送：

```bash
git add -A
git commit -m "feat: 新增子项目 新项目名"
git push
```

推送走 SSH 密钥认证，无需输入密码。若远程仓库尚未创建，先用 Gitee API（私人令牌）建仓后再关联推送。

> 提示：Windows 控制台（GBK）下直接执行 `git commit -m "中文"` 容易导致提交信息乱码，建议先 `chcp 65001` 切换代码页，或改用 VS Code / Git GUI 等 UTF-8 客户端提交。

## 常用命令

```bash
git status                # 查看工作区状态
git add -A                # 暂存全部改动
git commit -m "说明"      # 提交
git push                  # 推送到 Gitee
git pull                  # 拉取远程更新
git log --oneline         # 查看提交历史
```

## 环境说明

- Git 全局身份：`jht0680` / `jht0680@noreply.gitcode.com`（仓库级身份同上）

- 远程认证：Gitee SSH 密钥（`~/.ssh/id_rsa`），账号 `jht7702`（Jasper Kiang）

- 运行环境：Windows / 现代浏览器（Chrome、Edge 等）

## 开源协议

本项目采用 [Apache License 2.0](http://www.apache.org/licenses/LICENSE-2.0) 开源协议，完整协议文本见 [LICENSE](LICENSE)。

Copyright 2026 Jasper Kiang (jht7702)

> Apache 2.0 允许自由使用、修改和分发（含商用），但须保留版权声明与协议副本；修改后的文件须标注变更说明。不提供任何担保。