# personal-hub

**Repository Path**: ren2004/personal-hub

## Basic Information

- **Project Name**: personal-hub
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-10-10
- **Last Updated**: 2026-10-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Personal Hub · 个人工作台

一个面向日常工作的个人网站：以记笔记为核心，配套代码片段、任务看板、周报生成、开发者工具箱等高频模块。

零依赖、零构建、无后端：所有数据保存在浏览器 IndexedDB，断网可用，不上传任何服务器。

## 快速开始

```bash
cd d:\code\web
python serve.py 8000
```

浏览器打开 <http://localhost:8000> 即可。

Windows 用户可直接双击 `start.bat`（自动打开浏览器并启动服务，关闭窗口即停止）。

`serve.py` 会发送 `no-store` 响应头，改完代码刷新页面就能看到最新效果；若用 `python -m http.server`，浏览器可能缓存旧模块，需要 `Ctrl + Shift + R` 硬刷新。

### 单文件版

```bash
node build-standalone.js     # 生成 personal-hub.html
```

把全部 CSS / JS 内联进一个 HTML，可双击打开或拷给别人。注意部分浏览器在 `file://` 下会限制 IndexedDB，此时用本地服务打开同一文件即可：`http://localhost:8000/personal-hub.html`（与主站同 origin，数据互通）。

> 必须通过 `http://` 访问。直接双击 `index.html` 会失败，因为浏览器的 ES Module 安全策略禁止 `file://` 加载模块。
>
> 需要 Python 3。若没有，可用任意静态服务器替代，例如 `npx serve`、Nginx，或 VS Code 的 Live Server 插件。

首次打开会自动写入示例数据（2 个知识库、3 篇笔记、5 条代码片段、4 个任务、2 条稍后读、8 个导航项），可在设置页一键清空。

## 已实现功能

### 笔记（核心）

- **知识库分类**：可建多个知识库（自定义名称 / emoji 图标 / 说明），笔记归入其中；左侧列支持筛选、重命名、删除（笔记自动落到「未分类」，不会丢失）
- 拖拽笔记到任意知识库即可归类；编辑器顶部下拉框可随时改归属
- **图片粘贴 / 拖入**：`Ctrl+V` 直接粘截图，或把图片文件拖进编辑区（也可点工具栏 🖼 选择）；图片存本地图片库，正文只留短引用，导出 `.md` 时自动内联为 base64
- Markdown 编辑与实时预览，支持三种视图：分栏 / 仅编辑 / 仅预览
- 工具栏 14 个快捷操作：标题、粗体、斜体、删除线、行内代码、代码块、引用、无序列表、有序列表、任务列表、链接、双链、表格、分隔线
- 自动保存（停止输入 900ms 触发）与手动保存 `Ctrl+S`
- 标签系统：正文中的 `#标签` 自动提取，也可在编辑器底部手动填写
- 双向链接：`[[笔记标题]]` 跳转到目标笔记，目标不存在时标注为灰色并可一键创建
- 标题自动从正文首行提取，无需单独维护
- 置顶、复制全文、导出 `.md` 文件、删除
- 列表支持标题 / 正文 / 标签全文搜索，以及按标签筛选
- 语法支持：标题、段落、粗斜体、删除线、行内代码、围栏代码块、引用、有序/无序列表、任务列表、表格、图片、链接、裸链接自动识别、分隔线

### 代码片段库

- 15 种语言语法高亮（JavaScript、TypeScript、Python、Shell、SQL、JSON、HTML、CSS、YAML、Go、Java、Rust、PHP、C++、纯文本）
- 按语言筛选、按名称/说明/代码内容搜索
- 一键复制代码，卡片式网格布局
- 新建、编辑、删除

### 任务看板

- 三列流转：待办 / 进行中 / 已完成，鼠标拖拽即可移动
- 优先级（高/中/低）与截止日期，逾期任务标红提示
- 任务标签与备注
- 搜索过滤、隐藏已完成
- 双击卡片删除，卡片内按钮编辑详情

### 任务日历

- 月视图：周一为起点，每格显示当天计划任务（最多 3 条，超出折叠）与 `已完成/总数`
- 选中某天即可在右侧看到当天清单、完成进度条，勾选方块即切换完成
- 任务按优先级着色，未完成的逾期任务标红
- 顶部显示本月任务数、完成数与完成率；支持上月 / 下月 / 回到今天
- 拖动任务到任意日期即可改期；「未安排日期」区的任务也能直接拖进日历
- 新建 / 编辑任务（含日期、优先级、标签、备注），Alt + 点击删除

### 周报生成器

- 按周聚合：本周完成（按周一至周日分组）、进行中、下周计划、数据概览表格、本周笔记
- 自动计算完成率，生成标准 Markdown 周报
- 可切换本周 / 上一周，或用日期选择器跳到任意一周
- 正文可直接编辑，支持复制、导出 `.md`、一键存为笔记

### 开发者工具箱（10 个）

| 工具 | 能力 |
| --- | --- |
| JSON | 格式化、压缩、转义、反转义、错误定位 |
| 正则测试 | 实时匹配并高亮，显示捕获内容 |
| Base64 | 编码 / 解码，支持中文 |
| URL 编码 | encodeURI、decodeURI、全字符编码 |
| 时间戳 | 当前秒/毫秒、时间戳转日期、日期转时间戳 |
| 文本 Diff | 基于 LCS 的行级差异对比，统计增删行数 |
| 哈希 | SHA-1 / SHA-256 / SHA-512 |
| UUID / 密码 | 批量生成 UUID、密码学安全的强随机密码 |
| 颜色转换 | HEX / RGB / HSL 互转，带取色器 |
| 文本处理 | 字数统计、大小写转换、去空行、排序去重 |

### 快捷导航台

- 分组管理常用系统、文档、工具入口
- 卡片展示站点域名，emoji 图标
- Alt + 点击删除，右上角按钮编辑
- 首页仪表盘同步展示前 8 个入口

### 稍后读 / 剪藏

- 收藏链接，记录标题、备注、标签
- 全部 / 未读 / 已读三态筛选与搜索
- 一键标记已读，直达原站

### 首页仪表盘

- 五项统计：笔记、片段、待办、本周完成、未读
- 本周进度条与整体完成率
- 需要关注：逾期任务优先置顶
- 进行中任务、最近笔记、未读稍后读聚合展示
- 快捷新建入口

### 全局能力

- 命令面板 `Ctrl+K`：跨笔记、片段、任务、导航、页面的全局模糊搜索
- 深色 / 浅色主题切换，默认深色，选择自动记忆
- 设置页：数据导出 JSON 备份、导入（合并模式）、载入示例数据、清空全部数据、存储占用与数据统计
- 响应式布局，窄屏自动收起侧边栏文字

## 技术说明

- **架构**：原生 ES Module，无打包器、无框架、无第三方库
- **存储**：IndexedDB（数据库 `personal-hub`，含 notes / snippets / tasks / reads / navs / kbs / images / kv 八个 store）
- **渲染**：自研 Markdown 解析器（块级扫描 + 行内单次扫描替换）与自研轻量语法高亮（按语言分词着色）
- **路由**：hash 路由（`#/notes`），无需服务端配置，任意静态服务器可托管
- **状态**：内存缓存 + IndexedDB 持久化 + 订阅通知，页面切换时自动保存未提交内容

## 目录结构

```
index.html                  入口
start.bat                   Windows 一键启动脚本
serve.py                    本地静态服务器（禁用缓存，改动即时生效）
css/theme.css               主题变量（深/浅色）、语法高亮配色
css/app.css                 布局与全部组件样式
js/app.js                   入口：侧边栏、路由、全局交互、启动流程
js/pages.js                 页面注册表
js/core/
  db.js                     IndexedDB 封装（含导入导出、超时兜底）
  store.js                  全局状态与各实体 CRUD
  seed.js                   首次运行的示例数据
  md.js                     Markdown 渲染器
  highlight.js              语法高亮
  ui.js                     Toast / Modal / 表单弹窗 / 确认框
  utils.js                  日期、字符串、剪贴板、下载等工具
  router.js                 hash 路由
  theme.js                  主题切换
js/pages/
  dashboard.js  notes.js    snippets.js  kanban.js  calendar.js
  weekly.js     readlater.js nav.js      toolbox.js settings.js
js/widgets/palette.js       命令面板
```

## 快捷键

| 快捷键 | 作用 |
| --- | --- |
| `Ctrl + K` | 打开全局命令面板 |
| `Ctrl + S` | 保存当前笔记 |
| `Esc` | 关闭弹窗 / 命令面板 |
| `Alt + 点击` | 删除导航项 |

## 数据与安全

- 数据存在浏览器 IndexedDB，按站点隔离，清除浏览器数据会一并丢失
- 无网络请求、无第三方脚本、无 Cookie，可完全离线运行
- 建议定期在设置页导出 JSON 备份；换设备时用导入功能恢复
- 若浏览器禁用存储权限，启动时会给出明确提示而不是白屏

## 待做（TODO）

按优先级排列：

1. **数据同步**：接入后端或对象存储，实现多设备同步与冲突合并
2. **笔记版本历史**：保存编辑快照，支持查看与回滚
3. **笔记目录树**：在知识库之下再支持子分组 / 层级目录
4. **图片管理**：查看已占用空间的图片清单、清理无主图片、粘贴时自动压缩
5. **全文搜索增强**：建立倒排索引，支持多关键词、排除词与结果片段高亮
6. **任务增强**：子任务、重复任务、任务与笔记互相关联
7. **PWA 支持**：添加 manifest 与 Service Worker，可安装到桌面并完全离线
8. **移动端适配**：触摸拖拽、手势操作、窄屏编辑体验优化
9. **知识卡片复习**：基于间隔重复（SM-2）的复习提醒
10. **番茄钟与工时统计**：任务计时并汇总到周报
11. **导出能力扩展**：笔记导出 PDF / HTML，支持批量导出
12. **数据加密**：对导出文件与本地敏感内容提供密码保护
13. **AI 辅助**：接入本地或云端模型，做摘要、润色、语义搜索（需用户自行配置密钥）
14. **自定义快捷键与插件机制**：开放模块注册接口，便于扩展新页面