新增: 分享链接闭环——OSS 静态发布与观众查看器

src/App.vue

@@ -7,6 +7,8 @@ import { store } from './core/store'
 import { readAsDataURL, fileToImageElement } from './core/importer'
 import { checkImageQuota } from './core/ai'
 import { putAsset, isOssEnabled } from './core/assets'
+import { publishDeck } from './core/share'
+import { appAlert } from './core/dialog'
 import { isTauri, readLocalFiles } from './core/bridge'
 import AppDialog from './components/common/AppDialog.vue'
 import FileDock from './components/common/FileDock.vue'
@@ -167,6 +169,24 @@ function onHome() {
   mode.value = 'home'
 }
 
+/* ---------- 分享：发布 deck 到 OSS,生成公开只读链接 ---------- */
+async function onShare() {
+  try {
+    const { url } = await publishDeck()
+    try { await navigator.clipboard.writeText(url) } catch (e) { /* 剪贴板失败不阻断展示 */ }
+    await appAlert('分享链接已生成' + '（已复制到剪贴板）', url)
+  } catch (e: any) {
+    const msg = e?.message || String(e)
+    // 未配置云存储时引导到设置页
+    if (msg.includes('云存储') || msg.includes('OSS')) {
+      await appAlert('无法分享', msg)
+      ossVisible.value = true
+    } else {
+      await appAlert('分享失败', msg)
+    }
+  }
+}
+
 function onImportClose() {
   importVisible.value = false
   if (mode.value === 'home') {
@@ -469,6 +489,7 @@ onUnmounted(() => {
       @export-json="onExportJson"
       @import-materials="onImportMaterials"
       @home="onHome"
+      @share="onShare"
       @import-json="onImportJson"
       @export-pdf="onExportPdf"
     />

src/components/editor/Toolbar.vue

@@ -20,6 +20,7 @@ const emit = defineEmits<{
   (e: 'import-materials'): void
   (e: 'export-pdf'): void
   (e: 'home'): void
+  (e: 'share'): void
 }>()
 
 const themeKeys = Object.keys(themes)
@@ -71,6 +72,7 @@ function fileAction(a: string) {
     case 'import-materials': emit('import-materials'); break
     case 'import-json': emit('import-json'); break
     case 'export-pdf': emit('export-pdf'); break
+    case 'share': emit('share'); break
     case 'reset': action('reset'); break
   }
 }
@@ -148,6 +150,9 @@ defineProps<{ disabledActions?: string[] }>()
             <button class="menu-item" role="menuitem" @click="fileAction('export-pdf')">
               <span class="mi-icon">🖨</span><span class="mi-label">导出 PDF</span><span class="mi-hint">打印 / 另存</span>
             </button>
+            <button class="menu-item" role="menuitem" @click="fileAction('share')">
+              <span class="mi-icon">🔗</span><span class="mi-label">生成分享链接</span><span class="mi-hint">公开只读 · 云端</span>
+            </button>
             <div class="menu-sep"></div>
             <button class="menu-item danger" role="menuitem" :disabled="disabledActions?.includes('reset')" @click="fileAction('reset')">
               <span class="mi-icon">⟲</span><span class="mi-label">重置为示例</span>

src/components/modals/OssSettingsModal.vue

@@ -17,7 +17,8 @@ const emit = defineEmits<{
 const form = ref<OssCfg>({
   enabled: false, provider: 'aliyun', dir: 'u-ppt',
   aliAccessKeyId: '', aliAccessKeySecret: '', aliEndpoint: '', aliBucket: '',
-  qiniuAccessKey: '', qiniuSecretKey: '', qiniuBucket: '', qiniuUpHost: '', qiniuDomain: ''
+  qiniuAccessKey: '', qiniuSecretKey: '', qiniuBucket: '', qiniuUpHost: '', qiniuDomain: '',
+  viewerBase: ''
 })
 
 function loadFromStore() {
@@ -42,7 +43,8 @@ function save() {
     qiniuSecretKey: c.qiniuSecretKey.trim(),
     qiniuBucket: c.qiniuBucket.trim(),
     qiniuUpHost: c.qiniuUpHost.trim(),
-    qiniuDomain: c.qiniuDomain.trim()
+    qiniuDomain: c.qiniuDomain.trim(),
+    viewerBase: c.viewerBase.trim()
   })
   emit('toast', c.enabled ? '已保存云存储设置（已启用）' : '已保存云存储设置（未启用）')
   emit('close')
@@ -87,6 +89,11 @@ async function manualSync() {
         <input type="text" v-model="form.dir" placeholder="如 u-ppt/images，可留空" />
       </div>
 
+      <div class="form-row">
+        <label>查看器地址</label>
+        <input type="text" v-model="form.viewerBase" placeholder="如 https://img.1216.top，生成分享链接必填" />
+      </div>
+
       <!-- 阿里云 -->
       <template v-if="form.provider === 'aliyun'">
         <div class="section-title">阿里云 OSS</div>

src/core/assets.ts

@@ -129,7 +129,7 @@ function blobToBase64(blob: Blob): Promise<string> {
 }
 
 /** 由 OSS 配置构造上传请求（不含 key/data） */
-function buildUploadReq(cfg: OssCfg, key: string, dataBase64: string, contentType: string): OssUploadReq {
+export function buildUploadReq(cfg: OssCfg, key: string, dataBase64: string, contentType: string): OssUploadReq {
   if (cfg.provider === 'aliyun') {
     return {
       provider: 'aliyun', key, dataBase64, contentType,

src/core/bg.ts

@@ -0,0 +1,72 @@
+/* =====================================================================
+ * bg.ts — 背景解析纯函数：编辑器/演示/分享查看器共用
+ * 独立成模块避免 viewer 引入整个 store（会拉进全部编辑器状态）
+ * ===================================================================== */
+import { themes } from './sample'
+
+/* ---------- 颜色工具 ---------- */
+
+export function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
+  const c = String(hex).replace('#', '')
+  const full = c.length === 3 ? c[0] + c[0] + c[1] + c[1] + c[2] + c[2] : c
+  const r = parseInt(full.substr(0, 2), 16)
+  const g = parseInt(full.substr(2, 2), 16)
+  const b = parseInt(full.substr(4, 2), 16)
+  return (isNaN(r) || isNaN(g) || isNaN(b)) ? null : { r, g, b }
+}
+
+export function isDarkHex(hex: string): boolean {
+  const rgb = hexToRgb(hex); if (!rgb) return false
+  return (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) < 145
+}
+
+export function shade(hex: string, pct: number): string {
+  const rgb = hexToRgb(hex); if (!rgb) return hex
+  const f = pct < 0 ? 0 : 255, p = Math.abs(pct) / 100
+  const r = Math.round((f - rgb.r) * p + rgb.r)
+  const g = Math.round((f - rgb.g) * p + rgb.g)
+  const b = Math.round((f - rgb.b) * p + rgb.b)
+  return '#' + [r, g, b].map(x => { const s = x.toString(16); return s.length < 2 ? '0' + s : s }).join('')
+}
+
+export function isValidHex(s: string): boolean {
+  return typeof s === 'string' && /^#[0-9a-f]{3,8}$/i.test(s)
+}
+
+/* ---------- 自定义主题读取（与 store 共用同一 localStorage 键） ---------- */
+export const CUSTOM_THEME_KEY = 'u-ppt.themes.v1'
+
+/** 内置 + 自定义主题全量返回（自定义优先在前） */
+export function getAllThemes(): Record<string, import('./types').Theme> {
+  let custom: Record<string, import('./types').Theme> = {}
+  try { custom = JSON.parse(localStorage.getItem(CUSTOM_THEME_KEY) || '{}') || {} } catch (e) {}
+  return { ...custom, ...themes }
+}
+
+/* ---------- 当前主题注入：store 初始化时注册，viewer 无需引入 store ---------- */
+let getTheme: () => string = () => 'indigo'
+
+/** 由 store 注入当前主题 getter（避免 bg.ts 反向依赖 store 造成循环/viewer 拉入编辑器状态） */
+export function registerBgThemeGetter(fn: () => string): void {
+  getTheme = fn
+}
+
+/** 背景是否深色：primary/accent/渐变键视为深；bg/panel 视为浅；hex 按亮度判断 */
+export function isDarkBg(bg: string): boolean {
+  if (!bg) return false
+  if (bg.charAt(0) === '#') return isDarkHex(bg)
+  if (bg === 'primary' || bg === 'accent') return true
+  if (bg.indexOf('g-') === 0) return true
+  return false
+}
+
+/** 背景解析：渐变键 → CSS gradient；其余 → 主题色或合法 hex；未知键回退白 */
+export function resolveBg(key: string): string {
+  const t = (getAllThemes()[getTheme()] || {}) as unknown as Record<string, string>
+  if (!key) return '#ffffff'
+  if (key.charAt(0) === '#') return isValidHex(key) ? key : '#ffffff'
+  if (key === 'g-primary') return 'linear-gradient(135deg, ' + t.primary + ' 0%, ' + t.accent + ' 100%)'
+  if (key === 'g-deep')    return 'linear-gradient(160deg, ' + shade(t.primary, -28) + ' 0%, ' + t.primary + ' 100%)'
+  if (key === 'g-soft')    return 'linear-gradient(135deg, ' + (t.panel || '#f8fafc') + ' 0%, ' + (t.bg || '#ffffff') + ' 100%)'
+  return t[key] || '#ffffff'
+}

src/core/share.ts

@@ -0,0 +1,107 @@
+/* =====================================================================
+ * share.ts — 分享发布：deck JSON 上传 OSS，生成公开只读链接（零后端）
+ * 链接形态：<qiniuDomain 或 aliyun bucket 域名>#/p/<shareId> 由 viewer 页解析拉取
+ * 阿里云 URL：<bucket>.<endpoint>/<dir>/share/<id>.json
+ * 七牛 URL：<domain>/<dir>/share/<id>.json
+ * ===================================================================== */
+import { store } from './store'
+import { ossUpload, isTauri } from './bridge'
+import { canUploadNow, isOssEnabled, buildUploadReq } from './assets'
+import type { OssCfg } from './types'
+
+/** 分享发布前置校验：不满足时返回中文原因 */
+export function shareReady(): { ok: boolean; reason?: string } {
+  if (!isOssEnabled()) return { ok: false, reason: '请先在 ☁ 云存储中配置并启用 OSS 后再分享' }
+  if (!canUploadNow()) {
+    if (!isTauri()) return { ok: false, reason: '分享发布仅支持桌面版，请在桌面应用中操作' }
+    return { ok: false, reason: '当前离线，请联网后再分享' }
+  }
+  const cfg = store.getOssCfg()
+  if (cfg.provider === 'qiniu' && !(cfg.qiniuDomain || '').trim()) {
+    return { ok: false, reason: '七牛云分享需配置绑定的公开访问域名（Bucket 绑定的 CDN 域名）' }
+  }
+  return { ok: true }
+}
+
+/** 生成分享 id：'p' + 时间戳36进制 + 随机后缀 */
+function genShareId(): string {
+  return 'p' + Date.now().toString(36) + Math.random().toString(36).slice(2, 6)
+}
+
+/** 按 dir 规则（trim + 去首尾斜杠）拼分享对象 key */
+function shareKey(cfg: OssCfg, shareId: string): string {
+  const dir = (cfg.dir || '').trim().replace(/^\/+|\/+$/g, '')
+  return [dir, 'share', `${shareId}.json`].filter(Boolean).join('/')
+}
+
+/** 由 OSS 配置 + key 反推公开访问 URL */
+function jsonUrlFor(cfg: OssCfg, key: string): string {
+  if (cfg.provider === 'qiniu') {
+    return `${(cfg.qiniuDomain || '').trim().replace(/\/+$/, '')}/${key}`
+  }
+  // 阿里云：<bucket>.<endpoint host>/<key>（endpoint 规整同 oss.rs：去协议、去尾斜杠）
+  const host = (cfg.aliEndpoint || '').trim().replace(/^https?:\/\//, '').replace(/\/+$/, '')
+  const bucket = (cfg.aliBucket || '').trim()
+  return `https://${bucket}.${host}/${key}`
+}
+
+/* ---------- hash 编解码：JSON 地址随链接分发，观众端零配置 ----------
+ * 观众浏览器没有发布者的 OSS 配置，shareId 反推不出拉取地址，
+ * 所以发布时把完整 JSON URL（base64url 编码）放进 hash：
+ *   #/p/<shareId>            旧格式（回退本地配置反推，仅同机可用）
+ *   #/p/<shareId>:<b64url>   新格式（观众直接用，推荐）
+ */
+function b64urlEncode(s: string): string {
+  return btoa(unescape(encodeURIComponent(s))).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '')
+}
+
+function b64urlDecode(s: string): string {
+  const std = s.replace(/-/g, '+').replace(/_/g, '/')
+  return decodeURIComponent(escape(atob(std + '='.repeat((4 - std.length % 4) % 4))))
+}
+
+/** 解析 location.hash，返回 { shareId, jsonUrl }；jsonUrl 为 null 时由调用方回退反推。非法格式返回 null */
+export function parseShareHash(): { shareId: string; jsonUrl: string | null } | null {
+  if (typeof location === 'undefined') return null
+  const m = /^#\/p\/([A-Za-z0-9]+)(?::([A-Za-z0-9_-]+))?$/.exec(location.hash || '')
+  if (!m) return null
+  return { shareId: m[1], jsonUrl: m[2] ? b64urlDecode(m[2]) : null }
+}
+
+/** 由分享 id 反推 JSON 地址（旧格式回退：仅当本机存有相同 OSS 配置时可用） */
+export function shareJsonUrlOf(shareId: string): string {
+  return jsonUrlFor(store.getOssCfg(), shareKey(store.getOssCfg(), shareId))
+}
+export async function publishDeck(): Promise<{ url: string; jsonUrl: string }> {
+  const ready = shareReady()
+  if (!ready.ok) throw new Error(ready.reason)
+
+  // 资产检查：本地暂存未上云的图片/视频会让观众看不到
+  let unsynced = 0
+  for (const slide of store.getDeck().slides || []) {
+    for (const el of slide.elements || []) {
+      if ((el.type === 'image' || el.type === 'video') && (el.content || '').startsWith('asset:')) unsynced++
+    }
+  }
+  if (unsynced > 0) {
+    throw new Error(`有 ${unsynced} 张图片/视频还未同步到云端，请先在 ☁ 云存储中「立即同步」后再分享`)
+  }
+
+  // viewerBase：查看器页的公开基地址（如 https://img.1216.top），
+  // 分享链接必须指向渲染页而非 JSON 文件（否则观众看到的是 JSON 源码）
+  const cfg = store.getOssCfg()
+  const base = (cfg.viewerBase || '').trim().replace(/\/+$/, '')
+  if (!base) {
+    throw new Error('未配置查看器地址：请在 ☁ 云存储设置的「查看器地址」填入 viewer 页的公开网址')
+  }
+
+  const shareId = genShareId()
+  const key = shareKey(cfg, shareId)
+  const dataBase64 = btoa(unescape(encodeURIComponent(JSON.stringify(store.getDeck()))))
+  const url = await ossUpload(buildUploadReq(cfg, key, dataBase64, 'application/json'))
+  if (!url) throw new Error('上传分享数据失败：ossUpload 未返回 URL')
+  const jsonUrl = url.split('#')[0]
+  // JSON 地址编码进 hash：观众端零配置拉取
+  const hash = `${shareId}:${b64urlEncode(jsonUrl)}`
+  return { url: `${base}/viewer.html#/p/${hash}`, jsonUrl }
+}

src/core/store.ts

@@ -235,42 +235,12 @@ function syncActiveLibItem() {
   setLibrary(lib)
 }
 
-/* ---------- 颜色/背景解析（纯函数，供组件调用） ---------- */
+/* ---------- 颜色/背景解析：纯函数已抽至 ./bg，此处再导出保持调用方 import 路径不变 ---------- */
-export function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
+export { isDarkBg, resolveBg, isDarkHex, isValidHex } from './bg'
-  const c = String(hex).replace('#', '')
+import { isDarkHex, isValidHex, getAllThemes, registerBgThemeGetter, CUSTOM_THEME_KEY } from './bg'
-  const full = c.length === 3 ? c[0] + c[0] + c[1] + c[1] + c[2] + c[2] : c
-  const r = parseInt(full.substr(0, 2), 16)
-  const g = parseInt(full.substr(2, 2), 16)
-  const b = parseInt(full.substr(4, 2), 16)
-  return (isNaN(r) || isNaN(g) || isNaN(b)) ? null : { r, g, b }
-}
 
-export function isDarkHex(hex: string): boolean {
+// 注入当前主题 getter，bg.ts 解析背景时读取（viewer 侧无需引入本 store）
-  const rgb = hexToRgb(hex); if (!rgb) return false
+registerBgThemeGetter(() => state.deck.theme)
-  return (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) < 145
-}
-
-export function shade(hex: string, pct: number): string {
-  const rgb = hexToRgb(hex); if (!rgb) return hex
-  const f = pct < 0 ? 0 : 255, p = Math.abs(pct) / 100
-  const r = Math.round((f - rgb.r) * p + rgb.r)
-  const g = Math.round((f - rgb.g) * p + rgb.g)
-  const b = Math.round((f - rgb.b) * p + rgb.b)
-  return '#' + [r, g, b].map(x => { const s = x.toString(16); return s.length < 2 ? '0' + s : s }).join('')
-}
-
-/** 背景是否深色：primary/accent/渐变键视为深；bg/panel 视为浅；hex 按亮度判断 */
-export function isDarkBg(bg: string): boolean {
-  if (!bg) return false
-  if (bg.charAt(0) === '#') return isDarkHex(bg)
-  if (bg === 'primary' || bg === 'accent') return true
-  if (bg.indexOf('g-') === 0) return true
-  return false
-}
-
-export function isValidHex(s: string): boolean {
-  return typeof s === 'string' && /^#[0-9a-f]{3,8}$/i.test(s)
-}
 
 /**
  * 颜色解析：dark=true 时把深色文字键反相为浅色，确保深底可见。
@@ -293,17 +263,6 @@ export function resolveColor(key: string | undefined, dark: boolean): string {
   return t[key] || t.text || '#1e293b'
 }
 
-/** 背景解析：渐变键 → CSS gradient；其余 → 主题色或合法 hex；未知键回退白 */
-export function resolveBg(key: string): string {
-  const t = (getAllThemes()[state.deck.theme] || {}) as unknown as Record<string, string>
-  if (!key) return '#ffffff'
-  if (key.charAt(0) === '#') return isValidHex(key) ? key : '#ffffff'
-  if (key === 'g-primary') return 'linear-gradient(135deg, ' + t.primary + ' 0%, ' + t.accent + ' 100%)'
-  if (key === 'g-deep')    return 'linear-gradient(160deg, ' + shade(t.primary, -28) + ' 0%, ' + t.primary + ' 100%)'
-  if (key === 'g-soft')    return 'linear-gradient(135deg, ' + (t.panel || '#f8fafc') + ' 0%, ' + (t.bg || '#ffffff') + ' 100%)'
-  return t[key] || '#ffffff'
-}
-
 /* ---------- 内部：执行 Op 并推入历史 ---------- */
 
 /** 执行一个 Op，计算逆 Op，推入历史栈。返回是否执行成功 */
@@ -855,7 +814,8 @@ const LS_OSS = 'u-ppt.oss-cfg.v1'
 const DEFAULT_OSS: OssCfg = {
   enabled: false, provider: 'aliyun', dir: 'u-ppt',
   aliAccessKeyId: '', aliAccessKeySecret: '', aliEndpoint: '', aliBucket: '',
-  qiniuAccessKey: '', qiniuSecretKey: '', qiniuBucket: '', qiniuUpHost: '', qiniuDomain: ''
+  qiniuAccessKey: '', qiniuSecretKey: '', qiniuBucket: '', qiniuUpHost: '', qiniuDomain: '',
+  viewerBase: ''
 }
 
 function getOssCfg(): OssCfg {
@@ -881,15 +841,7 @@ function rewriteAssetRef(oldRef: string, newUrl: string) {
   return changed
 }
 
-/* ---------- 自定义主题：AI 配色建议应用后存储 ---------- */
+/* ---------- 自定义主题：AI 配色建议应用后存储（全量读取复用 bg.ts） ---------- */
-const CUSTOM_THEME_KEY = 'u-ppt.themes.v1'
-
-/** 内置 + 自定义主题全量返回（自定义优先在前） */
-function getAllThemes(): Record<string, import('./types').Theme> {
-  let custom: Record<string, import('./types').Theme> = {}
-  try { custom = JSON.parse(localStorage.getItem(CUSTOM_THEME_KEY) || '{}') || {} } catch (e) {}
-  return { ...custom, ...themes }
-}
 
 /** 获取自定义主题列表（仅自定义的） */
 function getCustomThemes(): Record<string, import('./types').Theme> {

src/core/types.ts

@@ -213,6 +213,9 @@ export interface OssCfg {
   qiniuUpHost: string
   /** 绑定的公开访问域名，如 https://cdn.example.com */
   qiniuDomain: string
+
+  /** 分享查看器页的公开基地址（如 https://img.1216.top），分享链接 = <viewerBase>/viewer.html#/p/<id> */
+  viewerBase: string
 }
 
 /** 文库条目 */

src/viewer/ViewerApp.vue

@@ -0,0 +1,217 @@
+<!-- =====================================================================
+  ViewerApp.vue — 分享查看器（观众版，独立入口）
+  数据源：分享 JSON（不连 store），仅静态渲染当前页
+  ===================================================================== -->
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+
+import type { Deck, Slide } from '../core/types'
+import { parseShareHash, shareJsonUrlOf } from '../core/share'
+import { resolveBg, registerBgThemeGetter } from '../core/bg'
+import { CANVAS_W, CANVAS_H } from '../core/sample'
+import ElementView from '../components/editor/ElementView.vue'
+
+type Status = 'loading' | 'ready' | 'error' | 'invalid'
+
+const status = ref<Status>('loading')
+const errMsg = ref('')
+const deck = ref<Deck | null>(null)
+const index = ref(0)
+const scale = ref(1)
+const idle = ref(false)
+
+const slides = computed<Slide[]>(() => deck.value?.slides ?? [])
+const total = computed(() => slides.value.length)
+const currentSlide = computed<Slide | null>(() => {
+  const arr = slides.value
+  if (!arr.length) return null
+  return arr[Math.max(0, Math.min(index.value, arr.length - 1))]
+})
+
+/* ---------- 加载分享 JSON ---------- */
+onMounted(async () => {
+  const parsed = parseShareHash()
+  if (!parsed) {
+    status.value = 'invalid'
+    return
+  }
+  try {
+    // 优先用链接内嵌的 JSON 地址（观众零配置）；旧格式链接回退本地配置反推
+    const jsonUrl = parsed.jsonUrl || shareJsonUrlOf(parsed.shareId)
+    const res = await fetch(jsonUrl)
+    if (!res.ok) throw new Error('HTTP ' + res.status)
+    deck.value = JSON.parse(await res.text()) as Deck
+    if (!deck.value?.slides?.length) throw new Error('分享内容为空')
+    // 注入 deck 自带主题，让 resolveBg 按分享内容的主题解析背景/元素色
+    registerBgThemeGetter(() => String(deck.value?.theme || 'indigo'))
+    status.value = 'ready'
+    fit()
+  } catch (e: any) {
+    errMsg.value = e?.message || String(e)
+    status.value = 'error'
+  }
+})
+
+/* ---------- 缩放适配 ---------- */
+function fit() {
+  scale.value = Math.min(window.innerWidth / CANVAS_W, window.innerHeight / CANVAS_H)
+}
+
+/* ---------- 翻页 ---------- */
+function next() {
+  if (index.value < total.value - 1) index.value++
+  wake()
+}
+function prev() {
+  if (index.value > 0) index.value--
+  wake()
+}
+
+/* ---------- 键盘 ---------- */
+function onKey(e: KeyboardEvent) {
+  switch (e.key) {
+    case 'ArrowRight': case ' ': case 'PageDown':
+      e.preventDefault(); next(); break
+    case 'ArrowLeft': case 'PageUp':
+      e.preventDefault(); prev(); break
+  }
+}
+
+/* ---------- 点击：左半屏上一页 / 右半屏下一页 ---------- */
+function onClick(e: MouseEvent) {
+  const stage = stageEl.value
+  if (!stage) return
+  const rect = stage.getBoundingClientRect()
+  if (e.clientX - rect.left > rect.width / 2) next()
+  else prev()
+}
+
+/* ---------- 触摸滑动 ---------- */
+let touchX = 0
+function onTouchStart(e: TouchEvent) {
+  touchX = e.changedTouches[0].clientX
+}
+function onTouchEnd(e: TouchEvent) {
+  const dx = e.changedTouches[0].clientX - touchX
+  if (dx > 40) prev()
+  else if (dx < -40) next()
+}
+
+/* ---------- 页码 HUD：3 秒无操作淡出 ---------- */
+let idleTimer: ReturnType<typeof setTimeout> | null = null
+function wake() {
+  idle.value = false
+  if (idleTimer) clearTimeout(idleTimer)
+  idleTimer = setTimeout(() => { idle.value = true }, 3000)
+}
+
+function bindEvents() {
+  document.addEventListener('keydown', onKey)
+  window.addEventListener('resize', fit)
+}
+function unbindEvents() {
+  document.removeEventListener('keydown', onKey)
+  window.removeEventListener('resize', fit)
+  if (idleTimer) clearTimeout(idleTimer)
+}
+
+const stageEl = ref<HTMLElement | null>(null)
+
+onMounted(bindEvents)
+onUnmounted(unbindEvents)
+</script>
+
+<template>
+  <!-- 无效链接 -->
+  <div v-if="status === 'invalid'" class="viewer-state">
+    <div class="viewer-state-title">链接无效</div>
+  </div>
+
+  <!-- 加载失败 -->
+  <div v-else-if="status === 'error'" class="viewer-state">
+    <div class="viewer-state-title">加载失败，链接可能已失效</div>
+    <div v-if="errMsg" class="viewer-state-detail">{{ errMsg }}</div>
+  </div>
+
+  <!-- 加载中 -->
+  <div v-else-if="status === 'loading'" class="viewer-state">
+    <div class="viewer-spinner"></div>
+    <div class="viewer-state-title">加载中…</div>
+  </div>
+
+  <!-- 渲染 -->
+  <div v-else class="viewer-stage" :class="{ idle }" ref="stageEl" @click="onClick" @touchstart.passive="onTouchStart" @touchend.passive="onTouchEnd" @mousemove="wake">
+    <!-- 沉浸背景：当前页主色放大铺满 + 模糊，消除黑边（手机竖屏尤甚） -->
+    <div class="viewer-backdrop" :style="{ background: resolveBg(currentSlide?.background || 'bg') }"></div>
+    <div class="slide-layer" :style="{ transform: 'scale(' + scale + ')' }">
+      <div v-if="currentSlide" class="slide-inner" :style="{ background: resolveBg(currentSlide.background) }">
+        <ElementView
+          v-for="el in currentSlide.elements"
+          :key="el.id"
+          :el="el"
+          :bg="currentSlide.background"
+        />
+      </div>
+    </div>
+    <div class="viewer-hud">{{ (index + 1) + ' / ' + total }}</div>
+  </div>
+</template>
+
+<style scoped>
+.viewer-state {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  color: var(--text-secondary, #888);
+  font-size: 15px;
+  user-select: none;
+}
+.viewer-state-title { font-weight: 500; }
+.viewer-state-detail { font-size: 12px; opacity: 0.6; }
+.viewer-spinner {
+  width: 28px;
+  height: 28px;
+  border: 3px solid rgba(128, 128, 128, 0.25);
+  border-top-color: var(--accent, #5b8def);
+  border-radius: 50%;
+  animation: viewer-spin 0.9s linear infinite;
+}
+@keyframes viewer-spin { to { transform: rotate(360deg); } }
+
+.viewer-stage {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background: #000;
+  cursor: pointer;
+}
+/* 沉浸背景层：幻灯片背景色的同色柔和延伸，不做明暗/饱和处理，过渡平缓 */
+.viewer-backdrop {
+  position: absolute;
+  inset: -40px;
+  filter: blur(48px);
+}
+.viewer-backdrop + .slide-layer { box-shadow: 0 12px 40px rgba(0, 0, 0, .25); }
+.viewer-hud {
+  position: fixed;
+  bottom: 14px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 4px 12px;
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.45);
+  color: #fff;
+  font-size: 12px;
+  user-select: none;
+  pointer-events: none;
+  transition: opacity 0.5s;
+}
+.viewer-stage.idle .viewer-hud { opacity: 0; }
+</style>

src/viewer/main.ts

@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import ViewerApp from './ViewerApp.vue'
+
+createApp(ViewerApp).mount('#app')

viewer.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <title>u-ppt · 演示</title>
+  <link rel="stylesheet" href="/src/styles/base.css" />
+  <!-- editor.css 含 .el 系列元素样式（定位/字体/形状/表格等），与编辑器/演示保持同一渲染 -->
+  <link rel="stylesheet" href="/src/styles/editor.css" />
+  <link rel="stylesheet" href="/src/styles/present.css" />
+</head>
+<body data-mode="present">
+  <div id="app"></div>
+  <script type="module" src="/src/viewer/main.ts"></script>
+</body>
+</html>

vite.config.ts

@@ -5,6 +5,12 @@ export default defineConfig(({ mode }) => ({
   plugins: [vue()],
   build: {
     chunkSizeWarningLimit: 800,
+    rollupOptions: {
+      input: {
+        main: 'index.html',
+        viewer: 'viewer.html',
+      },
+    },
   },
   // npm run dev:web（mode=web）→ 浏览器模式，端口 8080
   // npm run tauri:dev → 默认 mode，端口 5173