Flomo Sidebar Notes（仿 flomo 便签

September 3, 2026 · View on GitHub

DeepSeek Harness（DSH）的动态 Cordis 插件：在应用侧边栏放置一个仿 flomo 的便签面板，支持便签记录、标签、时间看板、便签关联与可视化知识图谱。

🔧 安装到 DSH（持久化包插件）

本插件同时以 DSH 持久化包插件 形式发布：仓库即插件包源码（package.json："type": "module"，exports 映射 . → ./host.js、./client → ./client.js，dsh.client.platform: "web"）。安装后随 dsh web 启动自动加载，无需再每次粘贴动态插件代码。

① 安装命令

在任意终端执行：

dsh plugin --profile web add file:C:/Users/16323/.dsh/profiles/web/plugins/flomo
  • file: 指向插件在 web profile 下的已安装副本目录：C:\Users\16323\.dsh\profiles\web\plugins\flomo\（该目录是规范安装源）。
  • pnpm 会将其物化到 C:\Users\16323\.dsh\profiles\web\node_modules\flomo-dsh-plugin（该副本在源文件改动后会过期，需按下文「同步流程」刷新）。

② cordis.patch.yml 注册

安装后，web profile 的 C:\Users\16323\.dsh\profiles\web\cordis.patch.yml 中会登记一条 insert 记录：

- insert:
    - id: flomo
      name: 'flomo-dsh-plugin'

③ 修改文件后的同步流程

  1. 将仓库中的 host.js、client.js、package.json，以及 fonts\ 目录（内含 canger-yunhei-03.ttf，7.1MB，随插件内嵌）复制到 C:\Users\16323\.dsh\profiles\web\plugins\flomo\；
  2. 重新执行第 ① 步的安装命令（或在 profile 目录内运行 pnpm install），使 node_modules 中的包刷新；
  3. 重启 dsh web 生效。

💡 一键完成：运行仓库根目录的 install-flomo.cmd（复制文件 + 重新注册，一条龙）。

④ 自动加载

安装完成后，插件会在每次 dsh web 启动时自动加载，并出现在 设置 → 插件 → 插件列表 中。

✨ 功能

  • 🔤 字号可调：工具行 A− / A+ 调节正文/输入框/回顾卡片字号（12–20px），偏好自动保存，刷新不丢失
  • 🅰️ 仓耳云黑 W03 字体：fonts/canger-yunhei-03.ttf（7.1MB）随插件内嵌，无需安装系统字体；由配套插件 flfont-4 读取 → base64 → Blob → @font-face 注入，!important 覆盖面板/按钮字体栈（回退链 TsangerYunHei W03 → 微软雅黑）
  • 🕐 时间线分组：便签按「今天 / 昨天 / N 天前 / 日期」分组展示，长文可展开/收起
  • 📌 置顶：任意历史便签可一键置顶——置顶便签独立成「置顶」区挂在列表顶部（按置顶时间倒序），卡片带蓝色方块标记，再点一次取消置顶
  • 🎨 强调颜色：给便签设置 6 色强调（红 / 橙 / 黄 / 绿 / 蓝 / 紫）——左侧 3px 块条 + 底色高亮（低透明度，文字保持原有对比度），列表与放大阅读都生效；「颜色」按钮弹出网格色板，可随时清除
  • 🔎 全文搜索：顶栏搜索框即时过滤便签
  • 🎲 随机回顾：flomo 同款「回顾」——随机翻出一条旧 MEMO，可下一条 / 查看原文
  • 🕐 时间看板：14 周方形格子热力图，点击某天查看当日便签
  • 🏷️ 标签管理：标签筛选；编辑历史便签、增删标签、选择已有标签
  • 🔗 便签关联：箭头式链接（→ 我引用 / ← 引用我），点击跳转，梳理知识脉络
  • 🕸️ 可视化知识图谱：彩色节点（按标签着色、按关联数定大小）+ 箭头连线；悬停高亮关联网络、拖拽节点整理布局、点击节点跳转查看
  • 🔍 图谱缩放平移：滚轮缩放（以光标为中心）、`+ / − / 适应$ 按钮、拖拽空白平移
  • 🧵 功能主义网格视觉（2026-08 重设计）：「格与线」母题——零圆角卡片、1\text{px} 发丝线分隔的格子流、2 \times 2 点阵区块标记、\text{DeepSeek} 蓝 $#4d6bfe为唯一彩色；浅深主题经--fp-令牌层承接宿主--dsw-alias-` 变量自动适配
  • 📌 右侧停靠侧边栏：面板停靠在应用右侧的 details 列，展开时主内容区自动让位、不遮挡主页面；右侧边缘浮动「MEMO」按钮一键展开 / 收起，宽度可用应用自带拖拽手柄调整（300–520px）

📸 预览

Flomo Sidebar Notes 面板预览（左侧：列表视图；右侧：知识图谱视图）

预览图为插件 UI 的真实渲染（示例数据），由 preview.html 生成。

📦 安装（DSH 动态插件 · 旧方案）

⚠️ 以下为历史安装方式（在运行时粘贴代码的动态插件）。新安装请改用上方「安装到 DSH（持久化包插件）」。

插件以 DSH「动态 Cordis 插件」形式运行，整个文件内容即 cordis_define 的代码。

  1. 在 DSH 会话中调用 cordis_define（kind: new，idPrefix: flomo）：
    • code.host ← 粘贴 host.js 的全部内容
    • code.client ← 粘贴 client.js 的全部内容
  2. 调用 cordis_run 激活（首次 run；后续修改请定义新 Package 后以 update 模式运行）。

也可以把两份代码改造成文件插件，挂载进你的 cordis.yml。

🚀 使用

  • 点击屏幕右侧边缘的「MEMO」按钮展开面板；面板头部「✕」或再次点击该按钮收起
  • 面板头部「列表 | 图谱」切换视图
  • 便签操作：关联 / 编辑 / 删除；编辑时可增删标签、添加新标签
  • 图谱操作：滚轮缩放、拖拽空白平移、拖拽节点布局、点击节点跳转查看

💾 数据

  • 便签持久化在 {workspaceRoot}/.dsh-flomo-notes.json
  • 结构：{ "version": 2, "notes": [{ "id", "text", "tags": [], "links": [], "pinnedAt"?, "color"?, "createdAt" }], "settings": {} }（pinnedAt 为置顶时间戳，color 为强调色键，均可选）
  • 旧数据自动兼容（缺失字段按空值处理），删除便签时自动清理其它便签指向它的链接

🚀 发布新版本（GitHub Actions）

推送形如 v1.12.0 的 git 标签，即可自动触发 release.yml 打包并创建 GitHub Release（zip 附件包含 host.js / client.js / README / LICENSE / preview）：

git tag v1.12.0
git push origin v1.12.0

🧩 兼容性

  • 宿主：DeepSeek Harness（DSH）
  • 仅使用平台内置能力：
    • Host：harness（Package 私有 RPC）、fs、sandboxPolicy（可选）
    • Client：React.createElement、styles.insert、slots（shell.overlay 浮动按钮 + details 右侧停靠列）、layout（展开 / 收起右侧列）
  • 不依赖任何外部库；纯 JavaScript，无 TS / JSX / 打包器

🏗️ 版本演进

版本内容
pkg-1基础便签面板（侧边栏）
pkg-2便签时间戳
pkg-3DeepSeek 风格配色
pkg-4顶部时间看板（方块热力图）
pkg-5编辑便签、标签管理
pkg-6 ~ 9侧边栏顶部按钮、尺寸优化、垂直拖动
pkg-10便签关联（→ / ← 链接跳转）
pkg-11可视化知识图谱
pkg-12图谱缩放 / 平移，节点与文字放大
v1.13界面重设计：功能主义网格（零圆角卡片、发丝线、点阵母题、蓝唯一彩色，方向 A 落地）
v1.14置顶（独立置顶区 + 蓝色方块标记）与强调颜色（6 色块条 + 底色高亮，可清除）

📄 许可证

MIT