# Shadow-Time

**Repository Path**: luli1314520/shadow-time

## Basic Information

- **Project Name**: Shadow-Time
- **Description**: 来自稀土掘金vibe coding大赛的鼓舞 ，该项目采取vibe coding的编码方式， 旨在追求coding的情绪价值，同时也是一场技术挑战，打通各个链路(web端、移动端、服务端)需具备一定设计能力 ，由此可知 ， 该项目和我以往项目相比 ， 更具备宏观视角， 在技术实现上倾向使用现成库和第三方服务。在开始项目前 ， 我会对各个功能块进行技术调研， 逐步拆解.......
- **Primary Language**: TypeScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: https://gitee.com/luli1314520/shadow-time
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-11-18
- **Last Updated**: 2025-11-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 流影时光 [**Shadow Tim**e] — 「跨端氛围日记 + AI 记忆图谱」—— 不止是日记，更是「有温度的个人时光博物馆」

## 🎯 核心定位

- ✨ 打破传统日记“纯文字记录”的冰冷感，用「视觉氛围 + 多端联动 + AI 数据化」重构记录体验，让每一次记录都像“给时光盖章”
- 🧪 技术上：前端负责氛围交互、移动端负责便捷采集、后端负责数据同步 + AI 分析，全栈链路轻量化但闭环，突出“技术服务于体验”
- 👥 受众：自己用（高频刚需） + 技术展示（全栈 + 跨端 + AI 融合），兼顾实用性和技术亮点

## 🧩 具体需求想法（分模块，含技术落地+氛围设计）

### 🔗 一、 多端联动·便捷记录模块（移动端+Web端，核心是“无门槛采集”）

#### 📱 1. 移动端：主打“随手记”，适配碎片场景

- **记录方式（3种核心，覆盖不同场景）**：
  - ✍️ 「快速文字」：输入框默认带“场景标签”（早/午/晚/工作/学习/娱乐），点击标签自动补全开头（比如选“晚间”→ 自动生成“2025.11.17 晚间，今天…”），支持语音转文字（调用原生 `语音识别API`，离线可用）
  - 🖼️ 「图文组合」：拍一张照片（比如晚餐、风景、手写笔记），自动关联拍摄时间/地点（调用原生 `定位` + `相册API`），文字区默认生成“今天在[地点]拍了这张照片，想记录…”，支持涂鸦标注（用 `Canvas` 实现简单画笔，颜色匹配当前氛围主题）
  - 😊 「情绪速记」：不用打字，点击“情绪图标”（开心/平静/emo/疲惫/兴奋），选择 1-2 个“关键词标签”（比如“代码调通”“和朋友聚餐”“下雨”），系统自动生成一句“氛围文案”（比如“2025.11.17 下午，带着「开心」的情绪，因为「代码调通」，空气都变轻快了～”）
- **交互氛围**：
  - 🌬️ 输入时键盘弹出带“呼吸动画”（浅色调渐变），文字输入有“打字机轻微震动反馈”（移动端调用原生 `震动API`，强度可调节）
  - 🎞️ 拍照后自动加“氛围滤镜”（根据时间/天气匹配：清晨 = 暖光滤镜，雨天 = 冷调模糊，夜晚 = 暗角 + 星光特效），滤镜强度可手动微调

#### 💻 2. Web端：主打“深度整理”，适配专注场景

- **同步联动**：移动端记录后 1 秒内 Web 端实时同步（用 `WebSocket` 实现即时更新，弱网下用长轮询兜底），Web 端编辑后移动端自动刷新
- **富文本编辑**：支持 `Markdown` 语法（标题/列表/引用）、插入本地文件（文档/视频）、调整文字排版（字体/行间距），编辑区背景支持“场景化皮肤”（比如“书房模式” = 米黄纸张 + 轻微纹理，“深夜模式” = 深黑背景 + 荧光文字）
- **拖拽整理**：日记卡片支持拖拽排序（按时间/情绪/标签分类），批量选中后可“合并成合集”（比如“2025 年 11 月旅行合集”），合集封面自动提取其中最具代表性的图片

### 🎨 二、 视觉氛围·主题与展示模块（全端统一，核心是“沉浸感”）

#### 1. 场景化主题系统

- **自动匹配主题**：系统根据“记录时间 + 天气 + 情绪”自动推荐主题（后端调用免费 `天气API`，结合用户输入的情绪标签）
  - 例：清晨 + 晴天 + 开心 → 「晨光暖调」（浅橙 + 米白配色，文字带轻微阴影，背景有缓慢移动的光斑动画）
  - 例：深夜 + 阴天 + 平静 → 「静谧深蓝」（深蓝 + 浅灰配色，背景有微弱的星空闪烁，文字输入时带“荧光轨迹”）
- **自定义主题**：支持调整配色（2–3 色渐变）、背景纹理（纸张/布料/星空）、动画强度（关闭/轻微/明显），自定义主题自动同步多端（后端存储主题配置 `JSON`）

#### 2. 日记展示：“时光轴+卡片式”结合

- 💻 Web 端：左侧是「垂直时光轴」（按年月分组，hover 显示当月情绪分布小气泡），右侧是日记卡片（卡片大小随内容长度自适应；图文日记显示图片缩略图；纯文字日记显示首行文案 + 情绪图标）
- 📱 移动端：「横向滑动时光轴」（左右滑动切换年月），下方是卡片网格（点击卡片展开详情，下滑收起，展开/收起带“渐入 + 缩放”动画）
- ✨ 交互惊喜：
  - hover 日记卡片时，卡片轻微上浮（`transform: translateY(-3px)`），边框出现主题色渐变
  - 点击情绪图标，弹出“情绪小气泡”（比如 开心 = 粉色气泡 + 笑脸；emo = 蓝色气泡 + 雨滴），气泡会缓慢上浮消失
  - 翻到“去年今日”的日记时，卡片自动加“时光滤镜”（轻微模糊 + 怀旧色调），并弹出提示“一年前的今天，你在记录…”

### 🧠 三、 AI 记忆图谱·数据化模块（后端+前端可视化，核心是“让记忆可追溯”）

#### 1. AI 分析：把日记变成“个人数据资产”

- 后端逻辑：用 Nodejs +  express 封装轻量 `NLP` 模型（调用免费 AI 接口, 如: 百度智能云 NLP、Deepseek），对日记内容做 3 类分析
  - **情绪趋势**：提取每日核心情绪，生成周/月情绪折线图（例如“11 月开心占比 60%，平静占比 30%，emo 占比 10%”）
  - **关键词云**：提取高频词汇（如“代码”“朋友”“旅行”“咖啡”），生成个性化词云（词云颜色匹配当前主题）
  - **记忆关联**：识别日记中的人物/地点/事件（如“和小李去西湖”），自动建立关联（点击“小李” → 显示所有提到“小李”的日记；点击“西湖” → 显示所有在西湖记录的内容）

#### 2. 可视化展示：

- 💻 Web 端：顶部导航栏“记忆图谱”入口，进入后显示「全景看板」
  - 左侧：情绪趋势图（`ECharts` 实现，支持切换 周/⽉/年）
  - 中间：关键词云（`Canvas` 实现，鼠标点击关键词可筛选对应日记）
  - 右侧：关联图谱（`D3.js` 实现，人物/地点/事件用节点表示，连线表示关联关系；拖拽节点可调整布局）
- 📱 移动端：“记忆图谱”页面简化为「Tab 切换」（情绪趋势/关键词/关联列表），图表适配竖屏显示，支持双击放大查看细节

#### 3. 实用功能：

- 「智能搜索」：支持按“情绪/关键词/时间/地点”搜索日记（比如搜索“开心+咖啡”→ 显示所有提到“咖啡”且情绪为“开心”的日记）；
- 「年度总结」：每年12月31日自动生成“年度记忆报告”（AI提取当年核心事件、情绪变化、高频关键词，搭配可视化图表，支持导出为图片/文档）；
- 「记忆提醒」：系统识别到“重复事件”（比如每年3月去春游），在对应日期前3天推送提醒“去年你去春游了，今年要不要记录新的旅程？”（移动端推送用极光推送，Web端用浏览器通知）。

### 🔒 四、 数据安全与扩展模块（后端+全端，核心是“可靠+灵活”）

#### 1. 数据存储与安全：

- 后端：用 Supasebase 存储日记内容（文字/图片 URL/标签）、用户配置（主题/偏好）、AI 分析结果，客户端 , 缓存最近访问的日记和用户状态（这里最好使用服务端缓存Redis , 目前简单处理为客户端缓存 ）
- 数据安全：用户注册登录用 `JWT` 鉴权（支持手机号验证码/邮箱登录），日记内容支持“加密存储”（用户可选择部分日记设为“私密”，加密后存储，解密需要密码）
- 备份与导出：支持批量导出日记（`PDF`/`Markdown`/`JSON` 格式），自动备份（每周一次，可手动触发备份)

#### 2. 扩展功能（可选，根据精力添加）：

- 「好友共享」：邀请好友加入“时光圈”，可互相查看公开日记，支持给好友日记点赞/评论（评论带“情绪气泡”特效）；
- 「语音日记」：Web端支持录制语音（HTML5 Audio API），移动端调用原生录音API，AI自动转文字+分析情绪；
- 「桌面小组件」：移动端支持添加桌面小组件（显示今日日记/情绪状态/记忆提醒），点击直接跳转APP。

## 🧰 技术栈明细（贴合全栈+移动端经验，轻量化选型）

| 模块        | 技术选型                                                                                   |
| ----------- | ------------------------------------------------------------------------------------------ |
| 前端（Web） | React + TypeScript + Tailwind CSS + Framer Motion（动画）+ ECharts（可视化）               |
| 移动端      | React Native  + expo（调研可适配两端的组件库）[只是适配安卓端，因为我是安卓人😁]          |
| 后端        | Node.js(业务逻辑)  + Express（接口）+ Orm(drizzle) + supsebase (云存储）                 |
| 第三方服务  | 天气API（和风天气免费版）+ AI NLP接口（Deepseek）+ 推送服务（极光推送 [待调研]）           |
| 部署        | Docker（前后端+数据库容器化 [待定] ）+ 云服务器（阿里云应用服务器）+ 阿里云OSS（图片存储） |

## 核心亮点（为什么适合“Vibe Code”）

1. **氛围与技术融合**：视觉氛围不是“花架子”，而是和记录场景、情绪、数据深度绑定（比如开心时的暖调、深夜的深蓝），技术服务于“有温度的体验”；
2. **全栈链路闭环但不复杂**：后端不用做复杂业务逻辑，重点是“数据同步+AI轻分析”，前端/移动端聚焦交互和视觉，每个模块都能快速看到效果，写起来有成就感；
3. **高频实用+技术展示**：自己每天都能用（记录生活/工作），同时能体现全栈开发、跨端联动、AI接口融合、数据可视化等技术能力，作品集里亮眼；
4. **可扩展性强**：先实现核心功能（多端记录+氛围主题+AI情绪分析），后续可逐步添加好友共享、语音日记、桌面小组件等，不会一开始陷入复杂逻辑。