mirror of
https://github.com/long2icc/sonicnote-sync.git
synced 2026-07-22 07:45:14 +00:00
252 lines
8.9 KiB
HTML
252 lines
8.9 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.0.0</div>
|
||
<h1>SonicNote Sync</h1>
|
||
<p>将 SonicNote 妙记的录音、转录、总结同步到 Obsidian，以 Markdown 文件管理。</p>
|
||
<a class="download-btn" href="sonicnote-sync.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>
|
||
<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.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>转录内容</td><td>AI 转写文本（含说话人、时间戳）</td></tr>
|
||
<tr><td>AI 总结</td><td>智能总结内容（要点、行动项等）</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>
|
||
</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>
|