Add About settings with build identity and API documentation

web/src/app/Icon.vue

@@ -21,6 +21,7 @@ const paths = {
   user: 'M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z',
   outline: 'M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01',
   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',
+  info: 'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 11v6M12 7h.01',
 }
 export type IconName = keyof typeof paths
 defineProps<{ name: IconName; size?: number }>()

web/src/app/SettingsDialog.vue

@@ -20,8 +20,12 @@ const SECTIONS: { id: SettingsSection; title: string; icon: IconName }[] = [
   { id: 'shares', title: '分享链接', icon: 'link' },
   { id: 'tokens', title: 'API 令牌', icon: 'key' },
   { id: 'trash', title: '回收站', icon: 'trash' },
+  { id: 'about', title: '关于', icon: 'info' },
 ]
 
+const buildVersion = import.meta.env.DEV ? '开发版' : document.querySelector<HTMLMetaElement>('meta[name="rawmark-version"]')?.content
+if (!buildVersion) throw new Error('缺少应用构建版本信息')
+
 // 编辑器内置的按键（不在命令注册表中）
 const EDITOR_KEYS = [
   { title: '粗体', keys: 'Mod+B' },
@@ -177,6 +181,19 @@ async function changePassword() {
           <SharePanel v-else-if="section === 'shares'" :path="null" />
           <TokensPanel v-else-if="section === 'tokens'" />
           <TrashPanel v-else-if="section === 'trash'" />
+          <template v-else-if="section === 'about'">
+            <div class="rm-setting"><h3>RawMark</h3></div>
+            <p class="rm-share-note">纯 Markdown 笔记编辑器，文件即真源。</p>
+            <div class="rm-setting">
+              <span class="rm-setting-label">构建版本</span>
+              <code>{{ buildVersion }}</code>
+            </div>
+            <div class="rm-setting">
+              <span class="rm-setting-label">API 文档</span>
+              <a class="rm-btn" href="/api/v1/openapi.json" target="_blank" rel="noopener">查看 OpenAPI 文档</a>
+            </div>
+            <p class="rm-share-note">在「API 令牌」中创建令牌后，可通过 REST API 读取或写入笔记。</p>
+          </template>
         </div>
       </section>
     </div>

web/src/app/workspace.ts

@@ -30,7 +30,7 @@ export interface Tab {
   conflictRev?: string
 }
 
-export type SettingsSection = 'appearance' | 'editor' | 'account' | 'shortcuts' | 'shares' | 'tokens' | 'trash' | 'plugins'
+export type SettingsSection = 'appearance' | 'editor' | 'account' | 'shortcuts' | 'shares' | 'tokens' | 'trash' | 'plugins' | 'about'
 
 export interface Toast {
   id: number

web/vite.config.ts

@@ -22,8 +22,13 @@ export default defineConfig({
           version.update(readFileSync(new URL('./public/' + name, import.meta.url)))
           files.push(name)
         }
+        const buildVersion = version.digest('hex').slice(0, 16)
+        const entry = bundle['index.html']
+        if (!entry || entry.type !== 'asset' || typeof entry.source !== 'string') throw new Error('缺少应用入口 HTML，无法写入构建版本')
+        // 入口与离线外壳使用同一构建标识，旧页面仍显示其自身的版本。
+        entry.source = entry.source.replace('</head>', `<meta name="rawmark-version" content="${buildVersion}" />\n  </head>`)
         const source = readFileSync(new URL('./src/service-worker.js', import.meta.url), 'utf8')
-          .replace('__VERSION__', version.digest('hex').slice(0, 16))
+          .replace('__VERSION__', buildVersion)
           .replace('__PRECACHE__', JSON.stringify(files.map((name) => '/' + name)))
         this.emitFile({ type: 'asset', fileName: 'sw.js', source })
       },