初始提交:实习工作日志系统(设计方案 + Vue3 应用 + Electron 打包)

This commit is contained in:
root
2026-10-15 23:55:27 +08:00
commit cfb984627d
50 changed files with 9223 additions and 0 deletions
+484
View File
@@ -0,0 +1,484 @@
# 实习工作日志系统 设计方案
- 版本:v1.10(Electron 桌面应用)
- 范围:个人版全量功能;团队版仅作扩展预留
## 1. 产品定位
面向实习生的轻量工作记录工具,覆盖四个环节:考勤打卡、每日记录、周记沉淀、一键总结。
| 维度 | 说明 |
|---|---|
| 目标用户 | 实习生本人(个人版);扩展支持导师查看(团队版预留) |
| 核心痛点 | 记录难坚持、总结靠回忆、考勤对不清 |
| 核心价值 | 10 秒记一条;写入即结构化,总结零回忆;数据本地可控、随时导出 |
| 产品形态 | 本地优先 Web 应用,桌面与移动浏览器均可使用 |
## 2. 设计原则
1. 写入时结构化,总结时只聚合:记录时多花 2 秒选项目与分类,总结时不再回忆
2. 一切以「天」为聚合键:打卡、日志、周记按日期自然关联,无复杂外键
3. 极致低摩擦:打卡一键完成,记录一句话即可
4. 视觉克制:高级白主题、灰阶文字、唯一强调色、1px 细线分层
5. 无特殊符号、无表情:全部图标自绘 SVG,导出文档用文字标签
## 3. 功能设计
### 3.1 打卡
| 功能 | 说明 |
|---|---|
| 上班打卡 | 一键记录时间戳;当日重复点击时按钮置灰并显示打卡时间 |
| 下班打卡 | 仅当日已有上班打卡后可用 |
| 考勤状态 | 运行时按规则实时计算,不落库(规则见 4.3) |
| 补卡 | 近 30 天内任选日期补录上下班时间,kind 记为 makeup,原因写入 note |
| 规则配置 | 上班时间、下班时间、迟到宽限分钟、午休扣除分钟 |
| 上班地点 | 打卡与补卡时可选可输入(公司、客户现场、出差、居家办公等,支持自由输入城市),存于 attendance.location,记住上次选择 |
### 3.2 日历(月视图)
| 元素 | 表达方式 |
|---|---|
| 出勤状态 | 6px 圆点:正常(ok) / 缺卡(warn) / 缺勤(danger) / 无记录(dot-empty) |
| 已写日志 | 12px check-circle 小图标 |
| 成果日 | 小 star 图标,表示当日存在星标条目 |
| 今天 | 日期数字用强调色,其余日期灰阶 |
| 周末 | 文字降为辅助色,不填色块 |
| 交互 | 点击日期打开当日抽屉(桌面右侧 / 移动整页);月份切换;回到今天 |
### 3.3 工作日志
快速记录控件状态:
| 控件 | 默认状态 |
|---|---|
| 内容输入框 | 常显,placeholder「做了什么」,回车即提交 |
| 项目下拉 | 常显,记住上次选择 |
| 分类下拉 | 常显,记住上次选择 |
| 耗时 / 备注 / 收获 | 默认折叠,点击展开 |
| 星标 / 待跟进 | 条目上的图标按钮,点击切换 |
三个文本位分工(防重复):
| 字段 | 回答的问题 | 总结去向 |
|---|---|---|
| content | 做了什么 | 总结正文 |
| takeaway | 学到了什么 | 「学习与成长」章节 |
| remark | 背景、链接、未决事项 | 可检索;带旗标的进「待跟进」章节 |
### 3.4 周记
- 每周五(可配置开关)顶部提示补填:本周亮点 / 踩的坑 / 下周计划,三个文本位
- 周报草稿 = 周记 + 当周日志自动聚合
- 周定义:周一为一周开始
### 3.5 总结生成
范围:本周 / 本月 / 自定义区间 / 全部实习期。
流程:选范围 → 按模板聚合 → 生成可编辑草稿 → 导出 Markdown。
模板结构:
```
实习工作总结(起 ~ 止)
一、考勤概况
出勤 N 天,累计工时 H 小时,补卡 M 次
地点分布:公司 N 天,客户现场 M 天
二、工作内容分布
开发 45%,BUG修复 20%,学习 15%,会议 10%,文档 10%
三、项目投入
项目A 32 条,项目B 11 条
四、主要成果
1. 星标条目逐条列出
五、待跟进事项
带旗标且未勾销的备注
六、学习与成长
takeaway 汇总 + 各周 highlights
```
Markdown 导出节选示例(成果与待跟进均用文字标签,不用符号):
```
## 四、主要成果
- 【成果】独立完成订单列表分页接口并上线(2025-03-04)
- 【成果】排查并修复订单金额精度丢失问题(2025-03-05)
## 五、待跟进事项
- 【待跟进】订单并发场景未覆盖测试(2025-03-06 备注)
```
AI 润色为可选进阶:将统计、成果、周记交给大模型按四段式输出,结果仍可编辑;前提是原料已结构化。
### 3.6 统计
| 卡片 | 指标 |
|---|---|
| 考勤 | 出勤天数 / 累计工时 / 补卡次数 |
| 记录 | 总条数 / 连续记录天数 |
| 分布 | 分类横向条形、项目投入横向条形(灰阶 + 单一强调色) |
| 趋势 | 近 12 周记录热力图(绿色单阶,克制) |
### 3.7 备忘录
双栏结构:左侧列表(标题、内容摘要、更新时间),右侧编辑器(标题 + 内容)。带未保存修改守卫(切换、新建前确认)、删除确认弹窗。
### 3.8 密码库
企业账号密码管理:字段为系统名称、账号、密码、备注。
| 项 | 说明 |
|---|---|
| 加密 | 主密码经 PBKDF2-SHA256(150000 次迭代)派生 AES-256-GCM 密钥;密码字段以密文落库(enc:v1:iv:cipher) |
| 解锁 | 主密钥仅存内存,页面刷新或手动锁定后需重新解锁;首次使用时设置主密码 |
| 表格 | 系统名称 / 账号 / 密码(掩码显示、显示切换、一键复制)/ 备注 / 操作;支持按名称、账号、备注搜索 |
| 其他 | 新增与编辑弹窗(必填校验、一键生成随机密码)、删除确认、修改主密码(全量重新加密)、5 分钟无操作自动锁定 |
### 3.9 全局搜索
顶栏搜索框(Ctrl+K 聚焦),覆盖工作记录(内容、收获、备注)与备忘录(标题、内容)。结果分组展示,点击跳转:工作记录定位到日历当月并打开当日抽屉,备忘录定位并选中。
### 3.10 数据导出与 AI 润色
- CSV 导出:工作记录(日期、分类、项目、内容、耗时、成果、待跟进、收获、备注)与考勤(日期、星期、状态、上下班、地点、类型、说明),UTF-8 BOM,Excel 直接打开
- 报表支持复制到剪贴板
- AI 润色:设置页配置 OpenAI 兼容接口(地址、API Key、模型名,仅存本机),总结页一键润色草稿,保留结构与事实数据,可一键还原润色前版本
- 考勤支持休假标记:标记后该日状态为请假并清空打卡时间,统计与总结含请假天数
### 3.11 用户系统与数据隔离
| 项 | 说明 |
|---|---|
| 数据隔离 | 每位用户独立一个 IndexedDB 数据库(intern_worklog_u_用户ID),工作日志、考勤、备忘录、密码库物理隔离;用户注册表为独立小库,仅存用户名与密码哈希 |
| 身份校验 | 登录密码经 PBKDF2-SHA256(150000 次迭代、随机盐)哈希后存储,系统不保存明文;会话存 sessionStorage,关闭标签页即退出 |
| 会话安全 | 30 分钟无操作自动退出;退出即断开数据库连接并清空内存密钥 |
| 账号管理 | 设置页可修改登录密码、删除用户(连同其全部数据,二次确认) |
| 旧数据迁移 | 首次创建用户时可勾选迁移升级前单机数据,迁移仅复制、原库保留兜底 |
## 4. 数据模型(SQLite)
### 4.1 建表语句
```sql
-- 项目
CREATE TABLE project (
id INTEGER PRIMARY KEY AUTOINCREMENT,
name TEXT NOT NULL UNIQUE,
archived INTEGER NOT NULL DEFAULT 0,
created_at TEXT NOT NULL DEFAULT (datetime('now','localtime'))
);
-- 工作日志(以天为单位)
CREATE TABLE work_log (
id INTEGER PRIMARY KEY AUTOINCREMENT,
date TEXT NOT NULL UNIQUE,
created_at TEXT NOT NULL DEFAULT (datetime('now','localtime'))
);
-- 日志条目(随手记)
CREATE TABLE log_item (
id INTEGER PRIMARY KEY AUTOINCREMENT,
work_log_id INTEGER NOT NULL REFERENCES work_log(id) ON DELETE CASCADE,
content TEXT NOT NULL,
project_id INTEGER REFERENCES project(id) ON DELETE SET NULL,
category TEXT NOT NULL DEFAULT 'other',
minutes INTEGER,
is_milestone INTEGER NOT NULL DEFAULT 0,
needs_followup INTEGER NOT NULL DEFAULT 0,
takeaway TEXT,
remark TEXT,
sort_order INTEGER NOT NULL DEFAULT 0,
created_at TEXT NOT NULL DEFAULT (datetime('now','localtime'))
);
-- 打卡
CREATE TABLE attendance (
id INTEGER PRIMARY KEY AUTOINCREMENT,
date TEXT NOT NULL UNIQUE,
clock_in_at TEXT,
clock_out_at TEXT,
kind TEXT NOT NULL DEFAULT 'normal',
note TEXT,
location TEXT,
created_at TEXT NOT NULL DEFAULT (datetime('now','localtime'))
);
-- 周记
CREATE TABLE weekly_note (
id INTEGER PRIMARY KEY AUTOINCREMENT,
week_start TEXT NOT NULL UNIQUE,
highlights TEXT,
challenges TEXT,
plan_next TEXT,
created_at TEXT NOT NULL DEFAULT (datetime('now','localtime'))
);
-- 备忘录
CREATE TABLE memo (
id INTEGER PRIMARY KEY AUTOINCREMENT,
title TEXT NOT NULL,
content TEXT NOT NULL,
created_at TEXT NOT NULL,
updated_at TEXT NOT NULL
);
-- 账号密码(password 为 AES-256-GCM 密文,主密码派生密钥加密)
CREATE TABLE credential (
id INTEGER PRIMARY KEY AUTOINCREMENT,
system TEXT NOT NULL,
account TEXT NOT NULL,
password TEXT NOT NULL,
remark TEXT,
created_at TEXT NOT NULL,
updated_at TEXT NOT NULL
);
-- 设置
CREATE TABLE setting (
key TEXT PRIMARY KEY,
value TEXT NOT NULL
);
CREATE INDEX idx_log_item_log ON log_item(work_log_id);
CREATE INDEX idx_work_log_date ON work_log(date);
CREATE INDEX idx_attendance_date ON attendance(date);
```
setting 预置键:work_start(09:00)、work_end(18:00)、grace_minutes(10)、lunch_minutes(60)、remind_weekly(friday/off)、last_project、last_category。
### 4.2 分类枚举(固定,不开放自定义标签)
dev 开发 / bugfix BUG修复 / test 测试 / learning 学习成长 / meeting 会议沟通 / doc 文档输出 / other 其他
### 4.3 考勤状态计算规则(运行时,不落库)
```
输入:attendance 记录 + setting 规则
1. 工作日无任何打卡 缺勤
2. 有上班、无下班 未完成
3. 上班时间晚于 上班时刻+宽限 迟到
4. 下班时间早于 下班时刻 早退
5. kind 为 makeup 按正常计,附加「补卡」标记
其余 正常
```
### 4.4 约束要点
- work_log.date、attendance.date、weekly_note.week_start 均 UNIQUE,保证一天一条
- 时间一律存 ISO 本地时间文本,展示层不做时区换算
- log_item 通过外键级联删除,删天即清条目
## 5. 页面结构
整体布局:左侧 56px 图标导航,顶部 56px 工具栏(视图标题 + 打卡主按钮 + 周记提醒点),主内容区最大宽 1200px 居中。
```
+------+-------------------------------+
| 导航 | 工具栏:标题 · 打卡按钮 · 提醒 |
| 日历 +-------------------------------+
| 今日 | |
| 统计 | 主内容区 |
| 总结 | |
| 设置 | |
+------+-------------------------------+
```
| 视图 | 内容 |
|---|---|
| 日历(默认首页) | 月历网格;点击日期开右侧当日抽屉:打卡时间线 + 条目列表 + 快速记录 |
| 今日 | 打卡状态卡 / 快速记录区 / 今日条目列表 / 自动小结(x 条 · y 小时) |
| 统计 | 概览卡片行 / 记录热力图 / 分类与项目条形图 |
| 总结 | 范围选择 + 左侧草稿编辑 + 右侧数据摘要 + 导出 Markdown |
| 设置 | 打卡规则 / 项目管理 / 周记提醒 / JSON 备份导入导出 |
## 6. 交互细节
- 打卡点击后按钮原地变为文字状态「已打卡 09:02」,无弹窗
- 快速记录回车提交,新条目插入列表顶部,150ms 透明度过渡
- 删除、备份覆盖导入等不可逆操作:统一确认弹窗,明确说明操作对象与不可恢复性
- 操作结果(打卡、保存、删除、导入等)以右上角轻提示统一反馈,2 秒自动消失
- 空状态:居中灰字「暂无记录」
- 备注中的 URL 自动识别为链接
- 历史列表按月分页加载
## 7. 视觉设计规范(高级白)
色彩:
```
--bg-page #FFFFFF 页面底色
--bg-subtle #F7F8FA 卡片内分区
--bg-hover #F2F3F5 悬停态
--border #EBEDF0 1px 分隔线
--border-strong #DCDEE3 输入框描边
--text-1 #1D2129 主文本
--text-2 #4E5969 次要文本
--text-3 #86909C 辅助与占位
--accent #3370FF 唯一强调色:主按钮、当前日期、链接
--accent-bg #F0F5FF 选中态浅底
--ok #23A757 出勤正常(状态点)
--warn #E8842C 缺卡、待跟进(状态点)
--danger #E5484D 缺勤(状态点)
--dot-empty #C9CDD4 无记录(状态点)
```
排版:
```
font-family -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif
字号 12 辅助 / 13 正文 / 14 小标题 / 20 页面标题
字重 400 正文 / 500 次强调 / 600 仅页面标题
数字 font-variant-numeric: tabular-nums,打卡时间与统计数字严格对齐
```
形状与层级:
```
圆角 6px 输入框与按钮 / 8px 卡片 / 12px 弹层
阴影 常态无阴影,靠 1px 边框分层;仅浮层 0 4px 16px rgba(29,33,41,0.08)
间距 4 的倍数(4/8/12/16/24);内容区最大宽 1200px 居中
强调色面积小于 5%;不使用渐变与大面积色块
日历:白底 + 1px 细线网格,状态用 6px 圆点,不填色块
```
交互态:
```
hover:--bg-hover
选中:--accent-bg 浅底 + 文字 --accent
过渡:仅透明度与背景色,不超过 150ms
```
禁用清单:
1. 界面文案纯文字,不出现表情与装饰符号
2. 勾、叉、箭头、展开折叠等视觉指示一律 SVG
3. 导出文档用文字标签「成果」「待跟进」,不用符号
4. 数据层为纯文本,不依赖符号字符做逻辑判断
## 8. SVG 图标体系
绘制规则:
```
画布 viewBox 0 0 24 24
风格 线性描边,fill none
线宽 stroke-width 1.5
端点 linecap 与 linejoin 均 round
颜色 stroke currentColor,激活态由 CSS 切色
```
图标清单(14 个,覆盖全部界面):
| 图标 | 用途 | 图标 | 用途 |
|---|---|---|---|
| calendar | 日历 | flag | 待跟进 |
| clock | 打卡 | chart | 统计 |
| check-circle | 完成 | export | 导出 |
| edit | 日志 | chevron-left / chevron-right | 月份切换 |
| tag | 项目分类 | chevron-down | 展开 |
| star | 成果 | plus | 新增 |
| close | 关闭 | search | 搜索(预留) |
示例(定风格基调):
```svg
<!-- calendar -->
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<rect x="4" y="5.5" width="16" height="14" rx="2"/>
<path d="M8.5 3.5v3.5M15.5 3.5v3.5M4 10.5h16"/>
</svg>
<!-- clock -->
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="8.25"/>
<path d="M12 7.75V12l2.75 1.75"/>
</svg>
<!-- check-circle -->
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="8.25"/>
<path d="M8.5 12.4l2.4 2.4 4.6-5.2"/>
</svg>
<!-- star 成果 -->
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 4l2.5 5.1 5.6.8-4 3.9.9 5.6-5-2.7-5 2.7.9-5.6-4-3.9 5.6-.8L12 4z"/>
</svg>
<!-- flag 待跟进 -->
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M6.5 21V4"/>
<path d="M6.5 4.5h10.8l-2.6 3.7 2.6 3.7H6.5"/>
</svg>
```
工程化:全部图标集中在 components/icons.ts,以常量字符串导出、内联渲染,不引入任何第三方图标库。
## 9. 技术方案
| 层 | 选型 | 理由 |
|---|---|---|
| 框架 | Vue 3 + TypeScript + Vite | 轻量、构建快、单页够用 |
| 存储 M1 | Dexie.js(IndexedDB) | 零部署、本地优先、打开即用 |
| 存储 M2 | Tauri 2 + SQLite | 日用稳定后桌面化,schema 不变仅换持久层 |
| 图标 | 自绘 SVG 内联 | 视觉完全自控 |
| 导出 | 前端生成 Markdown / JSON 下载 | 无后端依赖 |
| 应用化 | PWA(清单 + Service Worker + 自绘图标) | Edge/Chrome 一键安装为独立窗口应用,离线可用,数据仍在浏览器本地 |
| 桌面安装包 | Electron 33 + electron-builder(NSIS 安装包与免安装目录) | 数据存储于用户目录(userData),不受浏览器影响,双击即用 |
路线:M1 纯前端交付;稳定后 Tauri 桌面化;团队版再加服务端与账号。
工程结构:
```
src/
main.ts 入口
App.vue 布局:导航 + 工具栏 + 路由视图
router.ts 五个视图路由
db/schema.ts 建表与迁移
db/repo.ts 数据访问:attendance / log / weekly / project / setting
domain/attendance.ts 考勤状态计算
domain/report.ts 总结聚合与模板渲染
components/calendar/ 月历、格子、当日抽屉
components/log/ 快速记录、条目列表、行内编辑
components/icons.ts 自绘 SVG 图标
styles/tokens.css 设计令牌(第 7 节)
```
## 10. 备份与导出
- JSON 全量备份:五表整包,含 schema 版本号,导入时校验版本
- Markdown:总结草稿、单日记录
- Excel 导出列入后续需求,M1 不做
## 11. 边界情况
| 场景 | 处理 |
|---|---|
| 凌晨下班 | 04:00 前的下班打卡归属前一日;之后仍无下班记「未完成」,次日补卡 |
| 重复打卡 | 已有上班打卡时按钮置灰并显示时间 |
| 补卡超期 | 仅允许近 30 天 |
| 历史修改 | 个人版信任模式,任意条目可编辑;补卡记录保留 makeup 标记 |
| 缺周记 | 总结对应周显示「无周记」占位文字,不影响其余聚合 |
## 12. 开发路线图
| 阶段 | 内容 | 预估 |
|---|---|---|
| M1 MVP | 打卡 + 月历 + 快速记录(项目/分类)+ 今日列表 | 1-2 天 |
| M2 | 星标、旗标、备注、收获 + 周记 + 统计页 | 1-2 天 |
| M3 | 总结生成 + Markdown 导出 + JSON 备份 + 设置页 | 1-2 天 |
| M4 可选 | AI 润色 / 提醒 / Tauri 桌面化 / 团队版 | 按需 |
## 13. 扩展预留(本期不做)
团队版(账号、导师只读、周报提交)、截图附件、系统级提醒、多端同步。
## 变更记录
- v1.1:新增上班地点(attendance.location):打卡、补卡可选填并记住上次选择;设置页支持常用地点预设;统计页与总结报告增加地点分布
- v1.2:打卡时间支持行内直接修改(点击当日详情中的上班/下班时间即可编辑,可补录下班时间),修改后考勤状态运行时自动重算
- v1.3:上班地点支持自定义输入并自动记忆:输入新地点保存后自动加入常用地点列表(可在设置中删减)
- v1.4:企业级表单与确认规范——当日详情重构为分区结构(出勤信息、补卡登记、新增工作记录、记录列表),字段全部带标签、必填校验与错误提示;时间编辑采用显式确认/取消;删除与备份覆盖导入使用统一确认弹窗;操作结果统一轻提示反馈
- v1.5:已有工作记录支持完整信息编辑——点击条目或编辑图标,屏幕中央弹窗编辑全部字段(内容、项目、分类、耗时、收获、备注、成果标记、待跟进),带必填校验与归档项目回显
- v1.6:新增备忘录(双栏列表与编辑、未保存守卫)与加密密码库(主密码 PBKDF2 派生 AES-256-GCM,密码密文落库,解锁、锁定、搜索、一键复制、随机密码生成、修改主密码全量重加密);备份兼容 v1 与 v2 格式
- v1.7:全局搜索(Ctrl+K,跨工作记录与备忘录并跳转定位);考勤支持休假标记并纳入统计与总结;工作记录与考勤 CSV 导出;总结草稿一键复制;AI 润色(OpenAI 兼容接口,本机保存配置,可还原);密码库 5 分钟无操作自动锁定;日历格子悬停显示状态与地点
- v1.7.1:考勤数据全视图实时同步——打卡、修改时间、补卡、休假、地点变更后,顶栏按钮、今日面板、日历抽屉、月历格子与统计页通过全局变更信号即时刷新,无需切换视图
- v1.8:新增用户系统——每位用户独立 IndexedDB 数据库物理隔离数据;登录密码仅存 PBKDF2 哈希;会话存 sessionStorage 并支持 30 分钟无操作自动退出;设置页支持修改登录密码与删除用户;首次创建用户可一键迁移升级前单机数据(原库保留兜底)
- v1.9:PWA 应用化——新增 Web 应用清单、Service Worker 离线缓存与自绘应用图标;在 Edge/Chrome 中可一键安装为独立窗口应用(桌面图标、开始菜单入口),离线可用,数据随浏览器配置文件存储
- v1.10:Electron 桌面应用——pnpm dist 一键产出 NSIS 安装包与免安装目录;主进程加载本地构建产物,数据存于系统用户目录;窗口禁用菜单栏、外部链接交由系统浏览器打开