root/daywork

Fork 0

Files

T

root cfb984627d 初始提交：实习工作日志系统（设计方案 + Vue3 应用 + Electron 打包）

2026-10-15 23:55:27 +08:00

21 KiB

Raw Blame History

实习工作日志系统设计方案

版本：v1.10（Electron 桌面应用）
范围：个人版全量功能；团队版仅作扩展预留

1. 产品定位

面向实习生的轻量工作记录工具，覆盖四个环节：考勤打卡、每日记录、周记沉淀、一键总结。

维度	说明
目标用户	实习生本人（个人版）；扩展支持导师查看（团队版预留）
核心痛点	记录难坚持、总结靠回忆、考勤对不清
核心价值	10 秒记一条；写入即结构化，总结零回忆；数据本地可控、随时导出
产品形态	本地优先 Web 应用，桌面与移动浏览器均可使用

2. 设计原则

写入时结构化，总结时只聚合：记录时多花 2 秒选项目与分类，总结时不再回忆
一切以「天」为聚合键：打卡、日志、周记按日期自然关联，无复杂外键
极致低摩擦：打卡一键完成，记录一句话即可
视觉克制：高级白主题、灰阶文字、唯一强调色、1px 细线分层
无特殊符号、无表情：全部图标自绘 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 建表语句

-- 项目
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

禁用清单：

界面文案纯文字，不出现表情与装饰符号
勾、叉、箭头、展开折叠等视觉指示一律 SVG
导出文档用文字标签「成果」「待跟进」，不用符号
数据层为纯文本，不依赖符号字符做逻辑判断

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	搜索（预留）

示例（定风格基调）：

<!-- 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 安装包与免安装目录；主进程加载本地构建产物，数据存于系统用户目录；窗口禁用菜单栏、外部链接交由系统浏览器打开

21 KiB Raw Blame History Unescape Escape

实习工作日志系统 设计方案