这个项目其实非常适合做成一个 "Personal Life OS" 的前后端分离项目。你现在这个 HTML 不应该直接翻译成 Vue,而应该把它抽象成:
事件记录层 → 感受记录层 → 状态聚合层 → 时间连续性层 → AI 解释层
这样以后你接 AI、统计、长期趋势都会比较顺。
一、先定产品架构
我建议第一版做成:
text
Life OS
│
├── 今日 Dashboard
│ ├── 今天状态
│ ├── 昨日回放
│ ├── 当前感受
│ ├── 能量状态
│ ├── 7天趋势
│ ├── 昨天 → 今天
│ ├── 生活领域
│ ├── 最近记忆
│ └── AI观察
│
├── 时间线 Timeline
│ └── 所有事件 / 感受 / 快速记录
│
├── 感受 Feelings
│ └── 情绪趋势 / 感受变化
│
├── 生活领域 Domains
│ └── 工作 / 技术 / 身体 / 社交 / 家庭 / 娱乐...
│
├── 连续性 Continuity
│ └── 昨天 → 今天 → 最近7天 → 最近30天
│
└── AI复盘 AI Reflection
└── 自动总结 / 趋势 / 异常 / 长期变化
一个非常重要的产品原则:
不要把"记录"做成日记。
你的输入应该尽量是:
text
发生了什么?
↓
产生了什么感受?
↓
现在状态如何?
↓
属于哪个生活领域?
而不是:
text
请写一篇今天的日记
二、产品功能提示词
这个是你可以直接丢给 AI 编程 Agent,让它理解整个产品是什么。
你现在要开发一个个人生活管理系统,项目名称暂定为:
Life OS / Personal Life Dashboard
它不是传统 Todo、日记或笔记软件,而是一个用于解决"人的生活感受不连续、昨天发生过什么容易忘记、长期状态无法形成上下文"的个人生活状态系统。
一、核心产品目标
用户每天会经历很多事件,但事件发生之后很快会从意识中消失。
系统要解决的问题:
-
用户记不住昨天发生了什么
-
用户记不住昨天的情绪和感受
-
用户只能感受到"现在",无法感受到生活的连续变化
-
工作、学习、身体、社交等生活领域彼此割裂
-
用户无法回答:
- 我最近到底过得怎么样?
- 为什么最近感觉状态发生变化?
- 最近让我产生较强感受的事情是什么?
- 昨天的状态为什么会影响今天?
- 最近7天、30天发生了什么变化?
因此系统不是单纯保存数据,而是帮助用户构建:
"事件 → 感受 → 状态 → 时间连续性 → 长期模式"
二、产品核心对象
系统至少包含以下核心对象:
- User 用户
- Timeline Event 时间事件
- Feeling 感受
- Energy 状态 / 能量
- Life Domain 生活领域
- Memory 记忆
- Daily Snapshot 每日状态快照
- AI Insight AI观察
- Reflection 复盘
三、首页 Dashboard
首页叫:
今日 / Today
顶部显示:
- 当前日期
- 星期
- 页面标题
- 当前整体状态
- 快速记录按钮
- 昨日回放按钮
首页包含以下模块:
1. 昨日回放
显示昨天的重要事件。
每个事件包括:
- 时间
- 标题
- 描述
- 所属生活领域
- 相关感受
- 能量值
2. 当前感受
使用较轻量的情绪选择:
- 压抑
- 平静
- 还不错
- 兴奋
- 空
允许以后扩展更多感受。
3. 今日状态
展示:
- 综合状态 0~100
- 与昨天相比的变化
- 当前能量
- 当前专注
- 当前社交状态
- 当前身体状态
4. 7天感受趋势
折线图展示最近7天状态变化。
5. 昨天 → 今天
非常重要。
系统需要把昨天和今天进行并列比较:
昨天留下来的东西:
- 昨天的重要事件
- 昨天的感受
- 未解决事项
- 昨天留下的想法
今天接住了什么:
- 今天发生的相关事情
- 状态变化
- 延续事件
目标不是做统计,而是帮助用户形成"时间连续性"。
6. 生活领域
至少包含:
- 工作
- 技术学习
- 身体
- 社交
- 家庭
- 娱乐
- 其他
展示每个领域最近状态。
7. 最近记忆
显示最近几天最重要的信息。
8. AI观察
第一阶段先预留模块。
以后由后端 AI 服务生成:
- 最近状态变化
- 连续事件
- 情绪趋势
- 生活结构变化
- 值得关注的异常
暂时不要真的实现大型 AI 模型调用,可以先设计接口和数据结构。
四、快速记录
必须非常快。
用户不应该写长篇日记。
输入字段:
- 发生了什么
- 所属领域
- 当前感受
- 能量 1~10
点击:
"保存这个瞬间"
即可保存。
五、时间线
Timeline 页面以时间顺序展示所有记录。
支持:
- 今天
- 昨天
- 最近7天
- 最近30天
- 自定义时间范围
支持筛选:
- 生活领域
- 感受
- 事件类型
六、感受页面
展示:
- 最近7天
- 最近30天
- 最近90天
感受趋势。
支持:
- 情绪趋势
- 能量趋势
- 专注趋势
- 身体状态趋势
- 社交状态趋势
七、生活领域页面
以领域为中心分析。
例如:
技术学习:
- 最近记录
- 活跃程度
- 平均状态
- 最近趋势
社交:
- 最近记录
- 活跃程度
- 状态变化
八、连续性页面
这是产品的核心页面。
允许用户查看:
今天 ← 昨天 ← 前天 ← 最近7天
并自动整理:
- 发生了什么
- 感受是什么
- 哪些事情持续发生
- 哪些事情已经结束
- 哪些事情从昨天延续到了今天
九、AI复盘页面
第一阶段只实现:
- AI复盘任务列表
- AI总结结果
- 分析时间范围
- 创建时间
以后支持:
"帮我复盘最近7天"
"帮我看看最近为什么状态下降"
"帮我总结最近一个月生活发生了什么变化"
十、交互原则
整体风格:
- 克制
- 安静
- 轻量
- 有技术系统感
- 不要做成传统后台管理系统
- 不要过度使用卡片
- 不要视觉噪音
- 不要大量渐变
- 数据可视化简洁
核心体验:
让用户感觉:
"我终于可以看到自己的生活是连续的。"
十一、第一阶段
第一阶段先做:
- 登录
- Dashboard
- 快速记录
- 时间线
- 感受趋势
- 生活领域
- 连续性
- AI观察占位模块
暂时不做:
- 多人协作
- 社交功能
- 复杂权限
- 商业化功能
- 大规模 AI 工作流
整个项目按"个人长期使用"的方向设计。
三、Vue3 前端提示词
这里我建议直接定技术栈:
text
Vue 3
TypeScript
Vite
Vue Router
Pinia
Element Plus
Axios
ECharts
SCSS
不要一上来搞微前端、qiankun、复杂组件库。
请为 Life OS 开发 Vue3 前端项目。
一、技术栈
必须使用:
- Vue 3
- TypeScript
- Vite
- Vue Router
- Pinia
- Element Plus
- Axios
- ECharts
- SCSS
禁止使用 Vue 2。
二、前端定位
这是一个个人生活状态系统,不是传统企业后台。
整体视觉需要:
- 极简
- 克制
- 轻量
- 留白
- 安静
- 偏个人操作系统
- 类似现代 Productivity / Personal OS 产品
不要做成传统:
"左侧菜单 + 密集表格 + 大量按钮"的后台。
三、目录结构
请按照以下方向搭建:
src/
├── api/
│ ├── auth.ts
│ ├── dashboard.ts
│ ├── timeline.ts
│ ├── feeling.ts
│ ├── domain.ts
│ ├── memory.ts
│ └── insight.ts
│
├── components/
│ ├── LifeCard.vue
│ ├── Timeline.vue
│ ├── FeelingSelector.vue
│ ├── EnergyBar.vue
│ ├── MoodChart.vue
│ ├── DomainTags.vue
│ ├── DailyCompare.vue
│ └── QuickCapture.vue
│
├── layouts/
│ └── MainLayout.vue
│
├── views/
│ ├── Dashboard/
│ │ └── index.vue
│ ├── Timeline/
│ │ └── index.vue
│ ├── Feelings/
│ │ └── index.vue
│ ├── Domains/
│ │ └── index.vue
│ ├── Continuity/
│ │ └── index.vue
│ ├── Reflection/
│ │ └── index.vue
│ └── Login/
│ └── index.vue
│
├── stores/
│ ├── user.ts
│ └── dashboard.ts
│
├── router/
│ └── index.ts
│
├── utils/
│ ├── request.ts
│ ├── auth.ts
│ └── date.ts
│
├── types/
│ ├── user.ts
│ ├── timeline.ts
│ ├── feeling.ts
│ ├── dashboard.ts
│ └── domain.ts
│
├── App.vue
└── main.ts
四、页面路由
配置:
/login
/
/dashboard
/timeline
/feelings
/domains
/continuity
/reflection
五、Dashboard
Dashboard 必须按照 Life OS HTML 原型实现。
包括:
- Header
- 昨日回放
- 当前感受
- 今日状态
- 7天趋势
- 昨天 → 今天
- 生活领域
- 最近记忆
- AI观察
- 快速记录
不要把这些区域简单堆成 Element Plus Card。
应该自己设计布局。
六、数据状态
Pinia 管理:
用户信息
Dashboard:
- todaySnapshot
- yesterdayEvents
- currentFeeling
- energy
- weeklyTrend
- domainStats
- recentMemories
- aiInsights
Timeline:
- timelineList
- pagination
- filters
七、API设计
所有 API 使用 Axios。
统一配置:
/api
支持:
Authorization: Bearer TOKEN
统一处理:
- 401
- 403
- 500
- 网络异常
八、图表
ECharts 实现:
- 7天感受趋势
- 能量趋势
- 生活领域状态趋势
图表需要:
- 轻量
- 无过度装饰
- tooltip
- 时间轴
- 空数据状态
- loading状态
九、快速记录组件
QuickCapture.vue
字段:
eventTitle
eventContent
domainId
feeling
energy
happenedAt
提交后:
- 保存数据
- 刷新 Timeline
- 刷新 Dashboard
- 显示成功反馈
十、前端工程质量
必须:
- TypeScript 严格类型
- API 类型与后端 DTO 对齐
- 组件职责单一
- 不允许在页面中大量堆业务逻辑
- 不允许写死大量 mock 数据
- mock 数据必须集中管理
- 后续切换真实接口不能重构页面
十一、第一阶段原则
先完成:
"能运行 → 能登录 → 能记录 → 能查看 → 能统计"
不要第一阶段过度开发 AI。
AI 模块只预留:
API
Store
页面
数据结构
暂时使用 mock insight。
四、Spring Boot 后端提示词
后端我建议直接走:
text
Spring Boot 3
Java 17+
MyBatis-Plus
MySQL 8
Lombok
Validation
JWT
如果你已经习惯 Ruoyi,也可以把这个架构直接塞进 Ruoyi 的业务模块思想里。
请为 Life OS 开发 Spring Boot 后端项目。
一、技术栈
必须使用:
- Java 17+
- Spring Boot 3
- Spring Web
- Spring Validation
- MyBatis-Plus
- MySQL 8
- Lombok
- JWT
- Jackson
项目采用 RESTful API。
二、架构
采用经典分层:
Controller
↓
Service
↓
Mapper
↓
MySQL
目录:
com.lifeos
├── controller
│ ├── AuthController
│ ├── DashboardController
│ ├── TimelineController
│ ├── FeelingController
│ ├── DomainController
│ ├── MemoryController
│ └── InsightController
│
├── service
├── service.impl
├── mapper
├── entity
├── dto
├── vo
├── enums
├── config
├── security
├── exception
└── common
三、统一返回结构
所有接口统一:
{
"code": 200,
"message": "success",
"data": {}
}
分页统一:
{
"records": \[\],
"total": 0,
"page": 1,
"size": 20
}
四、核心接口
登录
POST /api/auth/login
POST /api/auth/register
GET /api/auth/me
Dashboard
GET /api/dashboard/today
返回:
todaySnapshot
yesterdayEvents
currentFeeling
energy
weeklyTrend
domainStats
recentMemories
aiInsights
Timeline
GET /api/timeline
POST /api/timeline
GET /api/timeline/{id}
PUT /api/timeline/{id}
DELETE /api/timeline/{id}
参数支持:
startDate
endDate
domainId
feeling
page
size
Feeling
POST /api/feelings
GET /api/feelings/trend
GET /api/feelings/recent
Domain
GET /api/domains
GET /api/domains/{id}
GET /api/domains/{id}/stats
Memory
GET /api/memories
POST /api/memories
Continuity
GET /api/continuity
参数:
date
返回:
yesterday
today
continuity
unresolved
relatedEvents
AI Insight
GET /api/insights
POST /api/insights/generate
第一阶段:
generate 接口可以先返回 mock 数据。
但 Service 层必须预留 AI provider 抽象:
AiProvider
未来可以接:
OpenAI
Claude
Gemini
本地模型
五、核心业务逻辑
Timeline Event
一个事件至少包含:
title
content
domain
feeling
energy
happenedAt
Feeling
感受是独立数据。
不要直接硬编码在 Event 表里。
因为未来可能出现:
一个事件对应多个感受。
例如:
事件:
"完成项目上线"
感受:
紧张
→
释放
→
满足
因此设计:
timeline_event
feeling_record
两个实体。
六、Daily Snapshot
系统每天可以生成一个 Daily Snapshot。
包括:
moodScore
energyScore
focusScore
socialScore
bodyScore
summary
Daily Snapshot 不是原始事实。
它是:
"当天状态的聚合结果"。
因此以后允许重新计算。
七、AI Insight
AI Insight 表保存:
分析范围
例如:
2026-09-27 ~ 2026-10-03
以及:
summary
patterns
suggestions
同时保存:
provider
model
createdAt
这样未来可以替换 AI 模型。
八、异常处理
统一处理:
BusinessException
ValidationException
AuthenticationException
DatabaseException
统一返回:
code
message
data
九、安全
登录后:
JWT
请求:
Authorization: Bearer xxx
用户数据必须按:
user_id
隔离。
任何查询都不能直接查询全表。
例如:
timelineService.list()
必须自动带:
userId
十、开发顺序
第一阶段:
- 数据库
- Entity
- Mapper
- Service
- Controller
- 登录
- Timeline CRUD
- Feeling
- Dashboard
- Continuity
第二阶段:
AI Insight
第三阶段:
长期趋势分析
暂时不要实现复杂微服务。
使用单体 Spring Boot。
代码必须保证后续可以拆模块。
五、MySQL 怎么设计
这里是这个项目最关键的地方。
不要设计成一张 life_record 表把所有东西塞进去。
我建议:
text
sys_user
│
├──────────────┐
│ │
timeline_event daily_snapshot
│
├──── feeling_record
│
└──── domain
│
└──── domain_daily_stat
memory
ai_insight
reflection
1. 用户表
sql
CREATE TABLE sys_user (
id BIGINT PRIMARY KEY AUTO_INCREMENT,
username VARCHAR(50) NOT NULL UNIQUE,
password VARCHAR(255) NOT NULL,
nickname VARCHAR(100),
avatar VARCHAR(500),
status TINYINT NOT NULL DEFAULT 1,
created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);
2. 生活领域
比如:
text
技术学习
工作
身体
社交
家庭
娱乐
其他
sql
CREATE TABLE life_domain (
id BIGINT PRIMARY KEY AUTO_INCREMENT,
user_id BIGINT NOT NULL,
name VARCHAR(50) NOT NULL,
code VARCHAR(50) NOT NULL,
description VARCHAR(255),
sort_order INT DEFAULT 0,
status TINYINT DEFAULT 1,
created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
INDEX idx_user_id (user_id)
);
3. 核心:时间事件
这是整个系统最重要的一张表。
sql
CREATE TABLE timeline_event (
id BIGINT PRIMARY KEY AUTO_INCREMENT,
user_id BIGINT NOT NULL,
domain_id BIGINT,
title VARCHAR(200) NOT NULL,
content TEXT,
event_type VARCHAR(30) DEFAULT 'NORMAL',
energy_score TINYINT,
happened_at DATETIME NOT NULL,
created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
INDEX idx_user_happened (user_id, happened_at),
INDEX idx_domain (domain_id)
);
例如:
text
10:20
完成接口开发
domain = 技术
energy = 8
happened_at = 2026-10-03 10:20
4. 感受表
这个一定建议独立。
sql
CREATE TABLE feeling_record (
id BIGINT PRIMARY KEY AUTO_INCREMENT,
user_id BIGINT NOT NULL,
event_id BIGINT,
feeling_code VARCHAR(50) NOT NULL,
feeling_name VARCHAR(50),
intensity TINYINT,
recorded_at DATETIME NOT NULL,
created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
INDEX idx_user_recorded (user_id, recorded_at),
INDEX idx_event_id (event_id)
);
例如:
text
event
完成项目上线
feelings
紧张 7
释放 8
满足 6
这就比:
text
event.feeling = "开心"
强很多。
5. 每日状态快照
这是 Dashboard 的核心数据。
sql
CREATE TABLE daily_snapshot (
id BIGINT PRIMARY KEY AUTO_INCREMENT,
user_id BIGINT NOT NULL,
snapshot_date DATE NOT NULL,
mood_score TINYINT,
energy_score TINYINT,
focus_score TINYINT,
social_score TINYINT,
body_score TINYINT,
summary TEXT,
created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
UNIQUE KEY uk_user_date (user_id, snapshot_date)
);
比如:
text
2026-10-03
mood = 72
energy = 68
focus = 84
social = 34
body = 65
然后你的 ECharts 就很好取。
6. 最近记忆
这个和 Timeline 不完全一样。
Timeline:
今天 10:30 干了什么
Memory:
这几天我需要记住什么
所以单独设计。
sql
CREATE TABLE life_memory (
id BIGINT PRIMARY KEY AUTO_INCREMENT,
user_id BIGINT NOT NULL,
title VARCHAR(200),
content TEXT,
memory_type VARCHAR(30) DEFAULT 'NORMAL',
memory_date DATE,
importance TINYINT DEFAULT 1,
created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
INDEX idx_user_date (user_id, memory_date)
);
7. AI 观察
sql
CREATE TABLE ai_insight (
id BIGINT PRIMARY KEY AUTO_INCREMENT,
user_id BIGINT NOT NULL,
insight_type VARCHAR(50),
start_date DATE,
end_date DATE,
title VARCHAR(200),
summary TEXT,
content JSON,
provider VARCHAR(50),
model VARCHAR(100),
created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
INDEX idx_user_date (user_id, start_date, end_date)
);
例如:
json
{
"patterns": [
"技术投入连续增加",
"社交活动减少"
],
"observations": [
"过去7天晚上记录频率较高"
]
}
8. 生活领域每日统计
这个是后面做统计分析用的。
sql
CREATE TABLE domain_daily_stat (
id BIGINT PRIMARY KEY AUTO_INCREMENT,
user_id BIGINT NOT NULL,
domain_id BIGINT NOT NULL,
stat_date DATE NOT NULL,
event_count INT DEFAULT 0,
total_minutes INT DEFAULT 0,
avg_energy DECIMAL(5,2),
avg_feeling DECIMAL(5,2),
created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
UNIQUE KEY uk_user_domain_date (
user_id,
domain_id,
stat_date
)
);
这样以后你就可以画:
text
技术
████████████████
工作
██████████
社交
████
身体
██████
六、再往后,你真正会用到的一张表
我建议提前留:
sql
CREATE TABLE reflection (
id BIGINT PRIMARY KEY AUTO_INCREMENT,
user_id BIGINT NOT NULL,
reflection_type VARCHAR(30),
start_date DATE,
end_date DATE,
title VARCHAR(200),
content TEXT,
created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP
);
它和 AI Insight 不一样:
text
AI Insight
↓
AI 给你的观察
Reflection
↓
你自己对生活的理解
这个以后会非常有价值。
因为最终系统不应该变成:
"AI 告诉你怎么生活"
而应该变成:
"AI 帮你看见生活,你自己形成判断。"
七、最终数据关系
你可以直接把整个系统理解成:
text
┌──────────────┐
│ sys_user │
└──────┬───────┘
│
┌────────────────┼─────────────────┐
│ │ │
▼ ▼ ▼
timeline_event daily_snapshot life_memory
│
│
├───────────────┐
│ │
▼ ▼
feeling_record life_domain
│
▼
domain_daily_stat
sys_user
│
├────────── ai_insight
│
└────────── reflection
八、前端和后端真正连接起来以后
你的 Dashboard 最终会变成一个接口:
http
GET /api/dashboard/today
返回:
json
{
"today": {
"date": "2026-10-03",
"moodScore": 72,
"energyScore": 68,
"focusScore": 84,
"socialScore": 34,
"bodyScore": 65
},
"yesterdayEvents": [],
"currentFeeling": {
"code": "GOOD",
"intensity": 7
},
"weeklyTrend": [],
"domainStats": [],
"recentMemories": [],
"continuity": {
"fromYesterday": [],
"toToday": []
},
"aiInsights": []
}
这时候你的 Vue 页面其实就非常干净了:
text
Dashboard.vue
↓
dashboardStore
↓
dashboardApi
↓
Spring Boot
↓
DashboardService
↓
MySQL
这就是比较标准的前后端分层。
九、我反而建议你第一版先别做"AI"
你这个项目真正的核心不是 AI。
第一版应该先把:
text
记录
↓
时间
↓
感受
↓
状态
↓
趋势
↓
连续性
这条链打通。
等数据库里真正有了:
text
30天
60天
90天
的生活数据以后,再接 AI。
那时候 AI 才有东西可分析:
text
原始生活数据
↓
统计聚合
↓
时间模式
↓
AI
↓
"最近发生了什么"
"为什么会这样"
"哪些事情一直在重复"
这样你的 Life OS 才会真正从一个漂亮的 Dashboard ,变成一个个人生活数据系统。