Add read-only sharing, API tokens and OpenAPI spec

- Share a note as a live read-only page at /s/{token} with optional password and expiry
- Share page renders with the shared parser (TOC, footnotes, math, Mermaid, code highlighting)
  and only serves images from the note's own .assets directory
- Shares follow renames made through the API or externally
- Manage shares and API tokens from the command palette and file tree
- Accept read/write API tokens as Bearer credentials; management endpoints require a session
- Serve a hand-written openapi.json, checked against the route table in tests

web/src/app/Icon.vue

@@ -14,6 +14,8 @@ const paths = {
   restore: 'M3 12a9 9 0 1 0 3-6.7L3 8M3 3v5h5',
   edit: 'M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z',
   search: 'M11 18a7 7 0 1 0 0-14 7 7 0 0 0 0 14zM21 21l-4.35-4.35',
+  link: 'M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71',
+  key: 'M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.78 7.78 5.5 5.5 0 0 1 7.78-7.78zM15.5 7.5l3 3L22 7l-3-3',
   command: 'M18 3a3 3 0 0 0-3 3v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 0 0 0-6z',
 }
 defineProps<{ name: keyof typeof paths; size?: number }>()

web/src/app/ShareDialog.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { copyText } from '../editor/widgets'
+import { api, ApiError, type Share } from './api'
+import Icon from './Icon.vue'
+import { noteTitle } from './paths'
+import { toast } from './workspace'
+
+// path 为空时列出全部分享（管理列表），否则管理这一篇笔记的分享
+const props = defineProps<{ path: string | null }>()
+const emit = defineEmits<{ close: [] }>()
+
+const EXPIRY_OPTIONS = [
+  { label: '永久有效', seconds: 0 },
+  { label: '1 天', seconds: 86400 },
+  { label: '7 天', seconds: 7 * 86400 },
+  { label: '30 天', seconds: 30 * 86400 },
+]
+
+const shares = ref<Share[] | null>(null)
+const password = ref('')
+const expiresIn = ref(0)
+const busy = ref(false)
+const title = computed(() => (props.path ? `分享“${noteTitle(props.path)}”` : '所有分享'))
+const fmt = new Intl.DateTimeFormat('zh-CN', { dateStyle: 'short', timeStyle: 'short' })
+
+const linkOf = (s: Share) => `${location.origin}/s/${s.token}`
+const expired = (s: Share) => s.expiresAt !== 0 && s.expiresAt <= Date.now()
+
+function errorText(err: unknown) {
+  return err instanceof ApiError ? err.message : '网络错误，请检查连接'
+}
+
+async function load() {
+  try {
+    shares.value = await api.shares(props.path ?? undefined)
+  } catch (err) {
+    toast('读取分享失败：' + errorText(err))
+    emit('close')
+  }
+}
+
+async function create() {
+  busy.value = true
+  try {
+    const s = await api.createShare(props.path!, password.value, expiresIn.value)
+    shares.value = [s, ...(shares.value ?? [])]
+    password.value = ''
+    await copy(s)
+  } catch (err) {
+    toast('创建分享失败：' + errorText(err))
+  } finally {
+    busy.value = false
+  }
+}
+
+async function copy(s: Share) {
+  toast((await copyText(linkOf(s))) ? '链接已复制' : '复制失败，请手动复制链接')
+}
+
+async function revoke(s: Share) {
+  if (!confirm('撤销后该链接立即失效，确定撤销？')) return
+  try {
+    await api.deleteShare(s.token)
+    shares.value = shares.value!.filter((x) => x.token !== s.token)
+  } catch (err) {
+    toast('撤销失败：' + errorText(err))
+  }
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <div class="rm-dialog-backdrop" @click.self="emit('close')">
+    <div class="rm-dialog rm-share-dialog" role="dialog" :aria-label="title">
+      <div class="rm-dialog-head">
+        <h2>{{ title }}</h2>
+        <button class="rm-icon-btn" title="关闭" @click="emit('close')"><Icon name="close" /></button>
+      </div>
+      <form v-if="path" class="rm-share-form" @submit.prevent="create">
+        <input v-model="password" type="text" autocomplete="off" placeholder="访问密码（可选）" aria-label="访问密码" />
+        <select v-model="expiresIn" aria-label="有效期">
+          <option v-for="o in EXPIRY_OPTIONS" :key="o.seconds" :value="o.seconds">{{ o.label }}</option>
+        </select>
+        <button class="rm-btn rm-btn-primary" type="submit" :disabled="busy">创建链接</button>
+      </form>
+      <p class="rm-share-note">分享页只读，显示笔记的当前内容及其 .assets 中的图片；拿到链接的人都能访问。</p>
+      <p v-if="shares && !shares.length" class="rm-tree-empty">{{ path ? '还没有分享链接' : '还没有分享任何笔记' }}</p>
+      <ul v-else class="rm-trash-list">
+        <li v-for="s in shares ?? []" :key="s.token">
+          <Icon name="link" />
+          <div class="rm-trash-info">
+            <span v-if="!path" class="rm-trash-path">{{ s.path.replace(/\.md$/, '') }}</span>
+            <span class="rm-share-link" :class="{ 'rm-trash-path': path }">{{ linkOf(s) }}</span>
+            <span class="rm-trash-time">
+              {{ fmt.format(s.createdAt) }} 创建
+              <template v-if="s.hasPassword"> · 有密码</template>
+              <template v-if="expired(s)"> · <span class="rm-share-bad">已过期</span></template>
+              <template v-else-if="s.expiresAt"> · {{ fmt.format(s.expiresAt) }} 到期</template>
+              <template v-if="!s.exists"> · <span class="rm-share-bad">笔记不存在</span></template>
+            </span>
+          </div>
+          <button class="rm-btn" @click="copy(s)">复制链接</button>
+          <button class="rm-btn rm-btn-danger" @click="revoke(s)">撤销</button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>

web/src/app/TokensDialog.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { copyText } from '../editor/widgets'
+import { api, ApiError, type ApiToken } from './api'
+import Icon from './Icon.vue'
+import { toast } from './workspace'
+
+const emit = defineEmits<{ close: [] }>()
+
+const tokens = ref<ApiToken[] | null>(null)
+const name = ref('')
+const scope = ref<ApiToken['scope']>('read')
+const busy = ref(false)
+// 刚创建的令牌明文，只在本次对话框中显示
+const created = ref<string | null>(null)
+const fmt = new Intl.DateTimeFormat('zh-CN', { dateStyle: 'short', timeStyle: 'short' })
+
+function errorText(err: unknown) {
+  return err instanceof ApiError ? err.message : '网络错误，请检查连接'
+}
+
+async function load() {
+  try {
+    tokens.value = await api.tokens()
+  } catch (err) {
+    toast('读取 API 令牌失败：' + errorText(err))
+    emit('close')
+  }
+}
+
+async function create() {
+  busy.value = true
+  try {
+    const res = await api.createToken(name.value.trim(), scope.value)
+    tokens.value = [res.info, ...(tokens.value ?? [])]
+    created.value = res.token
+    name.value = ''
+  } catch (err) {
+    toast('创建失败：' + errorText(err))
+  } finally {
+    busy.value = false
+  }
+}
+
+async function copy() {
+  toast((await copyText(created.value!)) ? '令牌已复制' : '复制失败，请手动选中复制')
+}
+
+async function revoke(t: ApiToken) {
+  if (!confirm(`吊销“${t.name}”？使用它的脚本将立即无法访问。`)) return
+  try {
+    await api.deleteToken(t.id)
+    tokens.value = tokens.value!.filter((x) => x.id !== t.id)
+  } catch (err) {
+    toast('吊销失败：' + errorText(err))
+  }
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <div class="rm-dialog-backdrop" @click.self="emit('close')">
+    <div class="rm-dialog rm-share-dialog" role="dialog" aria-label="API 令牌">
+      <div class="rm-dialog-head">
+        <h2>API 令牌</h2>
+        <button class="rm-icon-btn" title="关闭" @click="emit('close')"><Icon name="close" /></button>
+      </div>
+      <form class="rm-share-form" @submit.prevent="create">
+        <input v-model="name" type="text" autocomplete="off" placeholder="名称，如：备份脚本" aria-label="名称" required maxlength="100" />
+        <select v-model="scope" aria-label="权限">
+          <option value="read">只读</option>
+          <option value="write">读写</option>
+        </select>
+        <button class="rm-btn rm-btn-primary" type="submit" :disabled="busy">创建</button>
+      </form>
+      <div v-if="created" class="rm-token-created">
+        <p>令牌只显示这一次，请立即保存：</p>
+        <div class="rm-token-value">
+          <code>{{ created }}</code>
+          <button class="rm-btn" @click="copy">复制</button>
+        </div>
+      </div>
+      <p class="rm-share-note">
+        调用时带上请求头 <code>Authorization: Bearer 令牌</code>；只读令牌只能读取。接口说明见
+        <a href="/api/v1/openapi.json" target="_blank" rel="noopener">openapi.json</a>。
+      </p>
+      <p v-if="tokens && !tokens.length" class="rm-tree-empty">还没有 API 令牌</p>
+      <ul v-else class="rm-trash-list">
+        <li v-for="t in tokens ?? []" :key="t.id">
+          <Icon name="key" />
+          <div class="rm-trash-info">
+            <span class="rm-trash-path">{{ t.name }} · {{ t.scope === 'write' ? '读写' : '只读' }}</span>
+            <span class="rm-trash-time">
+              {{ fmt.format(t.createdAt) }} 创建 · {{ t.lastUsedAt ? fmt.format(t.lastUsedAt) + ' 最近使用' : '从未使用' }}
+            </span>
+          </div>
+          <button class="rm-btn rm-btn-danger" @click="revoke(t)">吊销</button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>

web/src/app/TreeNode.vue

@@ -41,13 +41,14 @@ function commitRename() {
   if (target && target !== props.node.path) void move(props.node.path, target)
 }
 
-function runMenu(action: 'note' | 'folder' | 'rename' | 'delete') {
+function runMenu(action: 'note' | 'folder' | 'rename' | 'share' | 'delete') {
   menuOpen.value = false
   const path = props.node.path
   if (action === 'note' || action === 'folder') {
     expanded.add(path)
     void (action === 'note' ? createNote(path) : createFolder(path))
   } else if (action === 'rename') ws.renaming = path
+  else if (action === 'share') ws.shareDialog = { path }
   else void remove(path)
 }
 
@@ -114,6 +115,7 @@ function onDrop(e: DragEvent) {
           <button @click="runMenu('folder')"><Icon name="folderAdd" />新建文件夹</button>
         </template>
         <button @click="runMenu('rename')"><Icon name="edit" />重命名</button>
+        <button v-if="!node.dir" @click="runMenu('share')"><Icon name="link" />分享</button>
         <button class="danger" @click="runMenu('delete')"><Icon name="trash" />删除</button>
       </div>
       <div v-if="menuOpen" class="rm-menu-backdrop" @click.stop="menuOpen = false" @contextmenu.prevent.stop="menuOpen = false" />

web/src/app/Workspace.vue

@@ -6,6 +6,8 @@ import EditorPane from './EditorPane.vue'
 import Icon from './Icon.vue'
 import NoteBanner from './NoteBanner.vue'
 import QuickSwitcher from './QuickSwitcher.vue'
+import ShareDialog from './ShareDialog.vue'
+import TokensDialog from './TokensDialog.vue'
 import { noteTitle } from './paths'
 import Sidebar from './Sidebar.vue'
 import TabBar from './TabBar.vue'
@@ -67,5 +69,7 @@ onBeforeUnmount(() => {
     </main>
     <QuickSwitcher v-if="ws.switcher !== null" />
     <TrashDialog v-if="ws.trashOpen" @close="ws.trashOpen = false" />
+    <ShareDialog v-if="ws.shareDialog" :path="ws.shareDialog.path" @close="ws.shareDialog = null" />
+    <TokensDialog v-if="ws.tokensOpen" @close="ws.tokensOpen = false" />
   </div>
 </template>

web/src/app/api.ts

@@ -21,6 +21,26 @@ export interface SearchResult {
   snippet: string
 }
 
+export interface Share {
+  token: string
+  path: string
+  createdAt: number
+  // 0 为永久
+  expiresAt: number
+  hasPassword: boolean
+  // 笔记是否仍存在
+  exists: boolean
+}
+
+export interface ApiToken {
+  id: string
+  name: string
+  scope: 'read' | 'write'
+  createdAt: number
+  // 0 为从未使用
+  lastUsedAt: number
+}
+
 export class ApiError extends Error {
   constructor(
     readonly status: number,
@@ -106,6 +126,19 @@ export const api = {
     return (await json<{ link: string }>(request('POST', '/api/v1/assets?note=' + encodeURIComponent(note), { body: form }))).link
   },
 
+  shares: async (path?: string) =>
+    (await json<{ shares: Share[] }>(request('GET', '/api/v1/shares' + (path ? '?path=' + encodeURIComponent(path) : '')))).shares,
+  // expiresIn 为有效时长（秒），0 为永久
+  createShare: (path: string, password: string, expiresIn: number) =>
+    json<Share>(request('POST', '/api/v1/shares', { json: { path, password, expiresIn } })),
+  deleteShare: (token: string) => request('DELETE', '/api/v1/shares/' + encodeURIComponent(token)),
+
+  tokens: async () => (await json<{ tokens: ApiToken[] }>(request('GET', '/api/v1/tokens'))).tokens,
+  // 返回的 token 明文只有这一次
+  createToken: (name: string, scope: ApiToken['scope']) =>
+    json<{ token: string; info: ApiToken }>(request('POST', '/api/v1/tokens', { json: { name, scope } })),
+  deleteToken: (id: string) => request('DELETE', '/api/v1/tokens/' + encodeURIComponent(id)),
+
   trash: async () => (await json<{ items: TrashItem[] }>(request('GET', '/api/v1/trash'))).items,
   restore: (id: string) => json<TrashItem>(request('POST', `/api/v1/trash/${id}/restore`)),
   purge: (id: string) => request('DELETE', `/api/v1/trash/${id}`),

web/src/app/app.css

@@ -354,6 +354,30 @@ button {
 }
 .rm-dialog-head { display: flex; align-items: center; padding: 14px 16px 8px 20px; }
 .rm-dialog-head h2 { flex: 1; margin: 0; font-size: 16px; }
+.rm-share-dialog { max-width: 640px; }
+.rm-share-form { display: flex; gap: 8px; padding: 4px 20px 0; }
+.rm-share-form input,
+.rm-share-form select {
+  height: 34px;
+  padding: 0 10px;
+  border: 1px solid var(--rm-divider);
+  border-radius: 6px;
+  background: var(--rm-bg);
+  color: var(--rm-text);
+  font-size: 14px;
+  outline: none;
+}
+.rm-share-form input { flex: 1; min-width: 0; }
+.rm-share-form input:focus,
+.rm-share-form select:focus { border-color: var(--rm-accent); }
+.rm-share-note { margin: 10px 20px 4px; font-size: 12px; color: var(--rm-text-muted); line-height: 1.6; }
+.rm-share-note a { color: var(--rm-accent-strong); }
+.rm-share-link { font-family: var(--rm-font-mono); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.rm-share-bad { color: var(--rm-danger); }
+.rm-token-created { margin: 12px 20px 0; padding: 10px 12px; border-radius: 8px; background: var(--rm-selection); font-size: 13px; }
+.rm-token-created p { margin: 0 0 6px; }
+.rm-token-value { display: flex; align-items: center; gap: 8px; }
+.rm-token-value code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-family: var(--rm-font-mono); font-size: 12px; user-select: all; }
 .rm-trash-list { list-style: none; margin: 0; padding: 0 12px 12px; overflow: auto; }
 .rm-trash-list li { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; color: var(--rm-text-muted); }
 .rm-trash-list li:hover { background: var(--rm-hover); }

web/src/app/workspace.ts

@@ -46,6 +46,9 @@ export const ws = reactive({
   // 快速切换/命令面板的初始输入，null 为关闭；以 > 开头时列出命令
   switcher: null as string | null,
   trashOpen: false,
+  // 分享对话框：path 为笔记路径，null 为全部分享的管理列表
+  shareDialog: null as { path: string | null } | null,
+  tokensOpen: false,
   // 最近打开的笔记，最新的在前
   recent: JSON.parse(localStorage.getItem(RECENT_KEY) ?? '[]') as string[],
   toasts: [] as Toast[],
@@ -758,6 +761,9 @@ function registerBuiltinCommands() {
     // 浏览器不允许网页覆盖 Ctrl+W
     { id: 'tab.close', title: '关闭当前标签页', when: hasNote, run: () => void closeTab(ws.active!) },
     { id: 'app.trash', title: '打开回收站', run: () => (ws.trashOpen = true) },
+    { id: 'note.share', title: '分享当前笔记', when: hasNote, run: () => (ws.shareDialog = { path: ws.active }) },
+    { id: 'app.shares', title: '管理分享链接', run: () => (ws.shareDialog = { path: null }) },
+    { id: 'app.tokens', title: 'API 令牌', run: () => (ws.tokensOpen = true) },
   ]) {
     registerCommand(cmd)
   }