mirror of
https://github.com/long2icc/sonicnote-sync.git
synced 2026-07-22 07:45:14 +00:00
278 lines
10 KiB
HTML
278 lines
10 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>SonicNote Sync — Obsidian 插件</title>
|
||
<style>
|
||
:root {
|
||
--bg: #f7f8fa;
|
||
--surface: #ffffff;
|
||
--border: #ebedf0;
|
||
--text: #1d2129;
|
||
--text-secondary: #656a72;
|
||
--accent: #333;
|
||
--accent-light: #f0f1f3;
|
||
--code-bg: #1e1e2e;
|
||
--code-text: #cdd6f4;
|
||
--radius: 8px;
|
||
}
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
line-height: 1.65;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
.header {
|
||
background: var(--surface);
|
||
border-bottom: 1px solid var(--border);
|
||
padding: 36px 24px 28px;
|
||
text-align: center;
|
||
}
|
||
.header .version {
|
||
display: inline-block;
|
||
background: var(--accent-light);
|
||
padding: 2px 10px;
|
||
border-radius: 4px;
|
||
font-size: 0.78rem;
|
||
color: var(--text-secondary);
|
||
margin-bottom: 10px;
|
||
}
|
||
.header h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.3px; margin-bottom: 6px; }
|
||
.header p { font-size: 0.92rem; color: var(--text-secondary); margin-bottom: 18px; }
|
||
.download-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
background: var(--accent);
|
||
color: #fff;
|
||
padding: 9px 28px;
|
||
border-radius: 6px;
|
||
font-size: 0.92rem;
|
||
font-weight: 500;
|
||
text-decoration: none;
|
||
transition: opacity 0.15s;
|
||
}
|
||
.download-btn:hover { opacity: 0.82; }
|
||
.download-btn svg { width: 16px; height: 16px; }
|
||
.container { max-width: 700px; margin: 0 auto; padding: 24px 20px 60px; }
|
||
.card {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
padding: 22px 26px;
|
||
margin-bottom: 14px;
|
||
}
|
||
.card h2 {
|
||
font-size: 1.05rem;
|
||
margin-bottom: 14px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.card h3 { font-size: 0.92rem; margin: 16px 0 6px; font-weight: 600; }
|
||
.card p, .card li { color: var(--text-secondary); font-size: 0.9rem; }
|
||
.card ol, .card ul { padding-left: 18px; margin: 4px 0; }
|
||
.card li { margin-bottom: 2px; }
|
||
.code-wrap {
|
||
position: relative;
|
||
margin: 8px 0;
|
||
}
|
||
.code-wrap pre {
|
||
background: var(--code-bg);
|
||
color: var(--code-text);
|
||
padding: 12px 16px;
|
||
border-radius: 6px;
|
||
overflow-x: auto;
|
||
font-size: 0.82rem;
|
||
line-height: 1.55;
|
||
margin: 0;
|
||
}
|
||
.copy-btn {
|
||
position: absolute;
|
||
top: 6px;
|
||
right: 6px;
|
||
background: rgba(255,255,255,0.1);
|
||
border: none;
|
||
border-radius: 4px;
|
||
padding: 4px 7px;
|
||
cursor: pointer;
|
||
opacity: 0;
|
||
transition: opacity 0.15s;
|
||
color: #aaa;
|
||
line-height: 1;
|
||
}
|
||
.code-wrap:hover .copy-btn { opacity: 1; }
|
||
.copy-btn:hover { background: rgba(255,255,255,0.2); color: #fff; }
|
||
.copy-btn.copied { opacity: 1; color: #4ade80; }
|
||
code { font-family: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace; }
|
||
.inline-code {
|
||
background: var(--accent-light);
|
||
padding: 1px 5px;
|
||
border-radius: 3px;
|
||
font-size: 0.85em;
|
||
color: var(--text);
|
||
}
|
||
table { width: 100%; border-collapse: collapse; margin: 8px 0; }
|
||
th { text-align: left; padding: 7px 12px; background: var(--accent-light); font-weight: 600; font-size: 0.85rem; }
|
||
td { padding: 7px 12px; border-bottom: 1px solid var(--border); font-size: 0.88rem; }
|
||
footer {
|
||
text-align: center;
|
||
padding: 20px;
|
||
color: var(--text-secondary);
|
||
font-size: 0.8rem;
|
||
}
|
||
@media (max-width: 640px) {
|
||
.header { padding: 28px 16px 22px; }
|
||
.header h1 { font-size: 1.35rem; }
|
||
.card { padding: 18px 16px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="header">
|
||
<div class="version">v1.1.3</div>
|
||
<h1>SonicNote Sync</h1>
|
||
<p>将 SonicNote 妙记的录音、转录、总结同步到 Obsidian,以 Markdown 文件管理。</p>
|
||
<a class="download-btn" href="sonicnote-sync-v1.1.3.zip" download>
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
||
下载插件
|
||
</a>
|
||
</header>
|
||
|
||
<div class="container">
|
||
|
||
<div class="card">
|
||
<h2>更新记录</h2>
|
||
<h3>v1.1.3</h3>
|
||
<ul>
|
||
<li>同步时间显示跟随系统时区</li>
|
||
</ul>
|
||
<h3>v1.1.2</h3>
|
||
<ul>
|
||
<li>已同步的录音不会被覆盖更新,删除文件后重新同步即可获取最新内容</li>
|
||
<li>唯一例外:录音尚未生成总结时文件名为原始名称(如 Note-xxx.mp3),生成总结标题后再次同步会自动覆盖并重命名为总结标题</li>
|
||
</ul>
|
||
<ul>
|
||
<li>已同步的录音不会被覆盖更新,删除文件后重新同步即可获取最新内容</li>
|
||
<li>唯一例外:录音尚未生成总结时文件名为原始名称(如 Note-xxx.mp3),生成总结标题后再次同步会自动覆盖并重命名为总结标题</li>
|
||
</ul>
|
||
<h3>v1.1.0</h3>
|
||
<ul>
|
||
<li>修复录音进行中重复创建文件的问题</li>
|
||
<li>AI 总结移至转录内容之前,优先阅读</li>
|
||
<li>新增"包含转录内容"开关,可按需关闭</li>
|
||
<li>文件名去除日期前缀,直接使用录音原始名称</li>
|
||
<li>切换为 HTTPS 接口</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h2>前置要求</h2>
|
||
<ul>
|
||
<li>Obsidian 桌面版 v0.15.0 及以上(<a href="https://obsidian.md/download" target="_blank">下载地址</a>)</li>
|
||
<li>SonicNote 妙记账号</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h2>安装</h2>
|
||
<ol>
|
||
<li>点击上方按钮下载 <span class="inline-code">sonicnote-sync-v1.1.3.zip</span></li>
|
||
<li>解压 zip 文件,得到以下文件:
|
||
<ul style="margin-top:4px;">
|
||
<li><span class="inline-code">main.js</span></li>
|
||
<li><span class="inline-code">manifest.json</span></li>
|
||
<li><span class="inline-code">styles.css</span></li>
|
||
</ul>
|
||
</li>
|
||
<li>打开 Obsidian Vault 所在文件夹,进入插件目录:</li>
|
||
</ol>
|
||
<div class="code-wrap"><button class="copy-btn" title="复制"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg></button><pre><code>.obsidian/plugins/</code></pre></div>
|
||
<ol start="4">
|
||
<li>在 <span class="inline-code">plugins</span> 目录下新建文件夹 <span class="inline-code">sonicnote-sync</span>,将解压的 3 个文件放进去:</li>
|
||
</ol>
|
||
<div class="code-wrap"><button class="copy-btn" title="复制"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg></button><pre><code>.obsidian/plugins/sonicnote-sync/
|
||
├── main.js
|
||
├── manifest.json
|
||
└── styles.css</code></pre></div>
|
||
<ol start="5">
|
||
<li>重启 Obsidian,进入 <strong>设置 → 第三方/社区插件</strong>,在列表中找到 <strong>SonicNote Sync</strong> 并启用</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h2>使用方法</h2>
|
||
<h3>登录</h3>
|
||
<ol>
|
||
<li>进入 <strong>设置 → SonicNote Sync</strong></li>
|
||
<li>点击"登录"按钮</li>
|
||
<li>输入 SonicNote 妙记的手机号和密码(使用 APP 验证码或者申领长期密码)</li>
|
||
</ol>
|
||
|
||
<h3>同步录音</h3>
|
||
<p>登录成功后,通过以下任一方式触发同步:</p>
|
||
<ul>
|
||
<li>点击左侧功能区的 <strong>耳机图标</strong></li>
|
||
<li>命令面板(Ctrl/Cmd + P)输入 <strong>"SonicNote: 同步录音"</strong></li>
|
||
</ul>
|
||
<p style="margin-top:6px;">同步完成后,Vault 中会生成 <span class="inline-code">SonicNoteSync/</span> 文件夹,每条录音对应一个 Markdown 文件。</p>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h2>同步内容</h2>
|
||
<p>每个录音文件包含:</p>
|
||
<table>
|
||
<thead><tr><th>内容</th><th>说明</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Frontmatter</td><td>录音元数据(ID、时间、时长、设备名、标签等)</td></tr>
|
||
<tr><td>笔记</td><td>你在 App 中手写的笔记内容</td></tr>
|
||
<tr><td>AI 总结</td><td>智能总结内容(要点、行动项等)</td></tr>
|
||
<tr><td>转录内容</td><td>AI 转写文本(含说话人、时间戳,可在设置中关闭)</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h2>设置项</h2>
|
||
<table>
|
||
<thead><tr><th>设置</th><th>默认值</th><th>说明</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>同步文件夹</td><td><span class="inline-code">SonicNoteSync</span></td><td>Markdown 文件存放目录</td></tr>
|
||
<tr><td>包含转录内容</td><td>开启</td><td>关闭后同步文件中不包含逐字转录</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h2>卸载</h2>
|
||
<ol>
|
||
<li>进入 <strong>设置 → 社区插件</strong>,找到 SonicNote Sync,点击禁用并卸载</li>
|
||
<li>手动删除 <span class="inline-code">.obsidian/plugins/sonicnote-sync/</span> 文件夹</li>
|
||
</ol>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<footer>SonicNote Sync © 2026</footer>
|
||
|
||
<script>
|
||
document.querySelectorAll('.copy-btn').forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
const code = btn.parentElement.querySelector('code');
|
||
navigator.clipboard.writeText(code.textContent).then(() => {
|
||
btn.classList.add('copied');
|
||
btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>';
|
||
setTimeout(() => {
|
||
btn.classList.remove('copied');
|
||
btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>';
|
||
}, 1500);
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|