文件上传：R2 对象存储 + 后台文件管理 + 编辑器/封面联动

存储抽象（internal/storage，新包） - BlobStore 接口（Put / Open / Delete）+ 两个实现：R2（aws-sdk-go-v2 走 R2 的 S3 兼容 API，path-style、region auto）与本地磁盘（DataDir/uploads，零配置兜底）。选择：Endpoint / S3Api / Bucket / AccessKey / SecretAccessKey 齐全 → R2，缺任一项回落本地并在启动日志提示缺失的字段名（只报名字不报值） - 端点 URL 里的路径段不交给 SDK：path-style 下它会被折进对象 key，导致「数据库 key」和「实际对象 key」对不上（直链 404，实测复现）。 EndpointKeyPrefix 提取路径段给上传 handler 拼进 key，StripEndpointPath 只取 scheme://host 给 SDK——数据库 / 存储端 / 直链三方一致数据与 API - files 表：id / key(唯一) / name / mime / size / sha256 / store(r2|local) / created_at；URL 不入库，按「store 来源 + PublicBase」响应时解析，切存储端不破坏存量链接 - POST /api/admin/files：multipart 多文件，单文件 ≤50MB（MaxBytesReader 64MB）；类型白名单 = 图片（jpg/png/webp/gif/avif）+ 附件（pdf/zip/txt），扩展名 + http.DetectContentType 双重校验（实测拦截随机字节改名 .png）， SVG 拒绝（同源脚本）；内容 sha256 做 key（2026/09/{哈希前12位}{扩展名}），同内容重复上传自动去重复用 - GET /api/admin/files（分页 + 文件名搜索）、DELETE /{id}（先删对象再删行，存储端失败保留行可重试） - 公开路由 GET /uploads/{key}（main.go 挂载）：按 key 查行、存储层流式返回， Cache-Control immutable + ETag 304；R2 + PublicBase 时 302 直链（后端不出流量） - URL 解析：FileURL(store, key, PublicBase)——R2 且配了公开域名走直链，否则 /uploads/ 流式后台文件管理页（FilesView，「工作台 → 文件」） - 点击 / 拖拽多选上传（uploadFiles 走 FormData 裸 fetch，401 广播与 request() 一致）；缩略图卡片网格（图片出图、其他出类型占位）；复制链接（clipboard，非 https 回落 prompt）/ 打开 / 删除（确认提示）；分页、loading/empty 沿用既有模式编辑器联动（EditorView） - 封面：URL 输入框旁「上传」按钮，选图自动填 cover_url - wysiwyg：Crepe ImageBlock 官方 onUpload 钩子——粘贴 / 拖拽 / 插图全部走上传，返回 URL 后由 Crepe 插节点 - Markdown 模式：插图弹层加「上传」按钮 + 编辑器粘贴 / 拖拽图片，上传后在原光标处插入 ![](url)（异步上传先记光标位，逐张追踪偏移） .env.example - 模板入库（无敏感值）：Endpoint = 公开访问域名（直链）、S3Api = 上传端点、 Bucket / AccessKey / SecretAccessKey 验证 - 本地兜底全流程：上传 201、同内容去重复用、随机字节改名 .png 被内容嗅探拒绝、.svg 拒绝、公开路由 immutable 缓存头 + 内容一致、删除后存储与公开路由双清 404 - R2 真实链路（站主 .env）：上传 store=r2、直链 200（过程中定位并修复 S3Api 路径段折进 key 导致的直链 404，见 EndpointKeyPrefix） - 后端 go build/test/vet 全绿；前端构建通过
2026-09-27 16:26:11 +08:00
parent bc1b0ccce3
commit 34f0faedcc
18 changed files with 1191 additions and 15 deletions
@@ -59,6 +59,7 @@ const crumb = computed(() => {
  const p = route.path
  if (p.endsWith('/new')) return '写新的'
  if (/^\/admin\/\d+/.test(p)) return '编辑文章'
+  if (p.endsWith('/files')) return '文件'
  if (p.endsWith('/tags')) return '标签'
  if (p.endsWith('/settings')) return '设置'
  if (p === '/admin' || p === '/admin/') return '总览'
@@ -119,6 +120,10 @@ watch(() => route.path, () => loadCounts())
          <span class="ic">◈</span>
          <span>作品</span>
        </RouterLink>
+        <RouterLink to="/admin/files" class="item">
+          <span class="ic">▣</span>
+          <span>文件</span>
+        </RouterLink>
        <div class="group">操作</div>
        <RouterLink to="/admin/new" class="item">
          <span class="ic">✎</span>
@@ -141,6 +141,11 @@ async function initEditor() {
    featureConfigs: {
      [CrepeFeature.Placeholder]: {
        text: form.kind === 'short' ? '写点什么…' : '开始写，或按 / 唤出命令菜单'
+      },
+      // 图片上传：wysiwyg 里的粘贴 / 拖拽 / 插图按钮全部走后台文件上传，
+      // onUpload 返回 URL 后由 Crepe 自己插节点
+      [CrepeFeature.ImageBlock]: {
+        onUpload: (file) => uploadOne(file)
      }
    }
  })
@@ -520,6 +525,86 @@ function commitImage() {
  showImageInput.value = false
 }

+// ---------- 上传（封面 / 编辑器插图共用） ----------
+// 后台「高级 → 自定义 JS」无关；走 /api/admin/files（FormData）。
+const uploadingImage = ref(false)
+
+async function uploadOne(file) {
+  const fd = new FormData()
+  fd.append('file', file)
+  try {
+    const data = await adminApi.uploadFiles(fd)
+    const f = Array.isArray(data) ? data[0] : null
+    if (!f || !f.url) throw new Error('上传失败')
+    return f.url
+  } catch (e) {
+    error.value = e.message || '上传失败'
+    throw e
+  }
+}
+
+const coverInput = ref(null)
+async function onCoverPick(e) {
+  const file = e.target.files && e.target.files[0]
+  e.target.value = '' // 允许重复选同一个文件
+  if (!file) return
+  uploadingImage.value = true
+  try {
+    form.cover_url = await uploadOne(file)
+  } finally {
+    uploadingImage.value = false
+  }
+}
+
+const imageInput = ref(null)
+async function onImagePick(e) {
+  const file = e.target.files && e.target.files[0]
+  e.target.value = ''
+  if (!file) return
+  uploadingImage.value = true
+  try {
+    imageUrl.value = await uploadOne(file)
+    if (!imageAlt.value) imageAlt.value = file.name.replace(/\.[^.]+$/, '')
+    commitImage()
+  } finally {
+    uploadingImage.value = false
+  }
+}
+
+// md 面板的粘贴 / 拖拽图片：上传后在原光标处插入 markdown。
+// 上传是异步的，先记光标位置，逐张插入时用 pos 追踪偏移。
+function captureSel() {
+  const el = mdPane.value
+  const s = el ? el.selectionStart : form.content_md.length
+  const e = el ? el.selectionEnd : s
+  return { s, e: Math.max(s, e) }
+}
+async function onMdFiles(files, sel) {
+  let pos = sel.s
+  for (const f of files) {
+    try {
+      const url = await uploadOne(f)
+      const md = `![](${url})\n`
+      insertAtCursor(md, pos, pos)
+      pos += md.length
+    } catch (_) {
+      /* uploadOne 已把错误写进 error */
+    }
+  }
+}
+function onMdPaste(e) {
+  const files = [...(e.clipboardData?.files || [])].filter((f) => f.type.startsWith('image/'))
+  if (!files.length) return
+  e.preventDefault()
+  onMdFiles(files, captureSel())
+}
+function onMdDrop(e) {
+  const files = [...(e.dataTransfer?.files || [])].filter((f) => f.type.startsWith('image/'))
+  if (!files.length) return
+  e.preventDefault()
+  onMdFiles(files, captureSel())
+}
+
 function insertDate() {
  withSelection((s, e) => insertAtCursor(new Date().toISOString().slice(0, 10), s, e))
 }
@@ -670,8 +755,14 @@ const tbGroups = computed(() => [
            aria-label="图片 URL"
            @keydown.enter="commitImage"
          />
-          <button class="btn btn-primary" @click="commitImage">插入</button>
-          <button class="btn" @click="showImageInput = false">取消</button>
+          <div style="display: flex; gap: 6px;">
+            <button class="btn btn-primary" style="flex: 1;" @click="commitImage">插入</button>
+            <button class="btn" style="flex: 1;" :disabled="uploadingImage" @click="imageInput.click()">
+              {{ uploadingImage ? '上传中…' : '上传' }}
+            </button>
+            <button class="btn" @click="showImageInput = false">取消</button>
+          </div>
+          <input ref="imageInput" type="file" accept="image/*" hidden @change="onImagePick" />
        </div>

        <!-- editor area -->
@@ -683,6 +774,8 @@ const tbGroups = computed(() => [
          v-model="form.content_md"
          placeholder="直接写 Markdown…"
          aria-label="Markdown 正文"
+          @paste="onMdPaste"
+          @drop="onMdDrop"
        ></textarea>

        <div class="editor-stats">
@@ -715,15 +808,21 @@ const tbGroups = computed(() => [
            <div v-if="form.cover_url" class="cover-mini" :style="{ backgroundImage: `url(${form.cover_url})` }">
              <button class="x" @click="clearCover" aria-label="移除封面">×</button>
            </div>
-            <input
-              id="cover"
-              v-model="form.cover_url"
-              placeholder="封面图 URL（可省）"
-              type="url"
-              inputmode="url"
-              spellcheck="false"
-              aria-label="封面图 URL"
-            />
+            <div class="cover-row">
+              <input
+                id="cover"
+                v-model="form.cover_url"
+                placeholder="封面图 URL（可省）"
+                type="url"
+                inputmode="url"
+                spellcheck="false"
+                aria-label="封面图 URL"
+              />
+              <button class="btn" type="button" :disabled="uploadingImage" @click="coverInput.click()">
+                {{ uploadingImage ? '上传中…' : '上传' }}
+              </button>
+            </div>
+            <input ref="coverInput" type="file" accept="image/*" hidden @change="onCoverPick" />
            <p style="margin: 4px 0 0; font-size: 12px; color: var(--admin-muted);">回车或失焦即生效；前台卡片与详情页头图会用到。</p>
          </div>

@@ -0,0 +1,292 @@
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { adminApi } from '../api'
+import { relativeDate } from '../utils'
+
+// 文件管理：上传（点击 / 拖拽，多选）、网格缩略图、复制链接、删除。
+// 缩略图与链接都用后端解析好的 f.url（R2 直链或 /uploads 流式路由）。
+
+const route = useRoute()
+const router = useRouter()
+
+const items = ref([])
+const total = ref(0)
+const loading = ref(true)
+const error = ref('')
+const page = computed(() => Number(route.query.page || 1))
+const size = 24
+
+const uploading = ref(false)
+const uploadError = ref('')
+const dragOver = ref(false)
+const copiedId = ref(0)
+const fileInput = ref(null)
+
+let seq = 0
+async function load() {
+  const my = ++seq
+  loading.value = true
+  error.value = ''
+  try {
+    const data = await adminApi.files({ page: page.value, q: String(route.query.q || '') })
+    if (my !== seq) return
+    items.value = data.items || []
+    total.value = data.total || 0
+  } catch (e) {
+    if (my !== seq) return
+    error.value = e.message || '加载失败'
+    items.value = []
+  } finally {
+    if (my === seq) loading.value = false
+  }
+}
+onMounted(load)
+watch(() => route.query.page, load)
+
+const pageCount = computed(() => Math.max(1, Math.ceil(total.value / size)))
+
+// ---------- 上传 ----------
+async function upload(files) {
+  if (!files || !files.length || uploading.value) return
+  uploading.value = true
+  uploadError.value = ''
+  try {
+    const fd = new FormData()
+    for (const f of files) fd.append('file', f)
+    await adminApi.uploadFiles(fd)
+    await load()
+  } catch (e) {
+    uploadError.value = e.message || '上传失败'
+  } finally {
+    uploading.value = false
+  }
+}
+function onPick(e) {
+  upload(e.target.files)
+  e.target.value = '' // 允许重复选同一个文件
+}
+function onDrop(e) {
+  dragOver.value = false
+  upload(e.dataTransfer.files)
+}
+
+// ---------- 操作 ----------
+async function copyUrl(f) {
+  try {
+    await navigator.clipboard.writeText(f.url)
+    copiedId.value = f.id
+    setTimeout(() => {
+      if (copiedId.value === f.id) copiedId.value = 0
+    }, 2000)
+  } catch (_) {
+    // 非 https 环境没有 clipboard API：退回手动复制
+    window.prompt('复制此链接：', f.url)
+  }
+}
+
+async function remove(f) {
+  if (!window.confirm(`删除「${f.name}」？存储里的文件会一并删除，引用它的文章将失效。`)) return
+  try {
+    await adminApi.deleteFile(f.id)
+    // 当前页删空时退一页，其余直接重载
+    if (items.value.length === 1 && page.value > 1) router.replace({ query: { ...route.query, page: page.value - 1 } })
+    else load()
+  } catch (e) {
+    error.value = e.message || '删除失败'
+  }
+}
+
+// ---------- 展示助手 ----------
+function humanSize(n) {
+  if (n < 1024) return n + ' B'
+  if (n < 1048576) return (n / 1024).toFixed(1) + ' KB'
+  if (n < 1073741824) return (n / 1048576).toFixed(1) + ' MB'
+  return (n / 1073741824).toFixed(2) + ' GB'
+}
+function ext(name) {
+  const i = name.lastIndexOf('.')
+  return i < 0 ? '文件' : name.slice(i + 1).toUpperCase()
+}
+
+// 拖拽悬停态在离开窗口时复位
+function onWindowDragEnd() {
+  dragOver.value = false
+}
+onMounted(() => window.addEventListener('dragend', onWindowDragEnd))
+onBeforeUnmount(() => window.removeEventListener('dragend', onWindowDragEnd))
+</script>
+
+<template>
+  <section>
+    <header style="display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px;">
+      <h1 style="font-family: var(--serif); font-size: 22px;">
+        文件 <span style="font-family: var(--sans); font-size: 13px; color: var(--admin-muted); font-weight: 400;">{{ total }}</span>
+      </h1>
+    </header>
+
+    <div
+      class="dropzone"
+      :class="{ over: dragOver, uploading }"
+      role="button"
+      tabindex="0"
+      aria-label="上传文件"
+      @click="fileInput && fileInput.click()"
+      @keydown.enter="fileInput && fileInput.click()"
+      @dragover.prevent="dragOver = true"
+      @dragleave.prevent="dragOver = false"
+      @drop.prevent="onDrop"
+    >
+      <input ref="fileInput" type="file" multiple hidden accept=".jpg,.jpeg,.png,.webp,.gif,.avif,.pdf,.zip,.txt" @change="onPick" />
+      <span v-if="uploading">上传中…</span>
+      <span v-else>点击选择或把文件拖到这里上传 · 图片 / pdf / zip / txt · 单文件 ≤ 50MB</span>
+    </div>
+    <p v-if="uploadError" class="upload-error" role="alert">{{ uploadError }}</p>
+
+    <div v-if="loading" class="loading">载入中…</div>
+    <div v-else-if="error" class="empty">{{ error }}</div>
+    <div v-else-if="!items.length" class="empty">还没有上传过文件。</div>
+
+    <template v-else>
+      <div class="file-grid">
+        <div v-for="f in items" :key="f.id" class="file-card">
+          <div class="thumb">
+            <img
+              v-if="f.mime.startsWith('image/')"
+              :src="f.url"
+              alt=""
+              loading="lazy"
+              decoding="async"
+              referrerpolicy="no-referrer"
+            />
+            <span v-else class="ph" aria-hidden="true">{{ ext(f.name) }}</span>
+          </div>
+          <div class="name" :title="f.name">{{ f.name }}</div>
+          <div class="meta">
+            <span>{{ humanSize(f.size) }}</span>
+            <span style="margin: 0 5px;" aria-hidden="true">·</span>
+            <span :title="f.created_at">{{ relativeDate(f.created_at) }}</span>
+          </div>
+          <div class="actions">
+            <a href="#" @click.prevent="copyUrl(f)">{{ copiedId === f.id ? '已复制 ✓' : '复制链接' }}</a>
+            <a :href="f.url" target="_blank" rel="noopener">打开</a>
+            <a href="#" class="danger" @click.prevent="remove(f)">删除</a>
+          </div>
+        </div>
+      </div>
+
+      <nav
+        v-if="pageCount > 1"
+        aria-label="分页"
+        style="display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px;"
+      >
+        <button class="btn" :disabled="page <= 1" @click="router.replace({ query: { ...route.query, page: page - 1 } })" aria-label="上一页">
+          ← 上一页
+        </button>
+        <span style="font-size: 13px; color: var(--admin-muted);" aria-live="polite">第 {{ page }} / {{ pageCount }} 页</span>
+        <button class="btn" :disabled="page >= pageCount" @click="router.replace({ query: { ...route.query, page: page + 1 } })" aria-label="下一页">
+          下一页 →
+        </button>
+      </nav>
+    </template>
+  </section>
+</template>
+
+<style scoped>
+.dropzone {
+  border: 1.5px dashed var(--admin-line);
+  border-radius: 6px;
+  padding: 22px;
+  text-align: center;
+  color: var(--admin-muted);
+  font-size: 13px;
+  margin-bottom: 16px;
+  cursor: pointer;
+  transition: border-color 0.2s, background-color 0.2s;
+}
+
+.dropzone:hover,
+.dropzone.over {
+  border-color: var(--admin-accent);
+  background: color-mix(in srgb, var(--admin-accent) 6%, transparent);
+}
+
+.dropzone.uploading {
+  cursor: wait;
+}
+
+.upload-error {
+  color: var(--admin-danger);
+  font-size: 13px;
+  margin: -8px 0 12px;
+}
+
+.file-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 12px;
+}
+
+.file-card {
+  border: 1px solid var(--admin-line);
+  border-radius: 6px;
+  background: var(--admin-card);
+  padding: 10px;
+}
+
+.thumb {
+  height: 110px;
+  border-radius: 4px;
+  background: var(--admin-paper-sunken);
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  margin-bottom: 8px;
+}
+
+.thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.thumb .ph {
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  color: var(--admin-faint);
+}
+
+.name {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--admin-ink);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.meta {
+  font-size: 11.5px;
+  color: var(--admin-muted);
+  margin: 3px 0 8px;
+}
+
+.actions {
+  display: flex;
+  gap: 10px;
+  font-size: 12.5px;
+}
+
+.actions a {
+  color: var(--admin-muted);
+}
+
+.actions a:hover {
+  color: var(--admin-accent);
+}
+
+.actions a.danger:hover {
+  color: var(--admin-danger);
+}
+</style>
@@ -82,7 +82,32 @@ export const adminApi = {
  updateProject: (id, body) => request('/api/admin/projects/' + id, { method: 'PUT', body }),
  deleteProject: (id) => request('/api/admin/projects/' + id, { method: 'DELETE' }),
  settings: () => request('/api/admin/settings'),
-  saveSettings: (body) => request('/api/admin/settings', { method: 'PUT', body })
+  saveSettings: (body) => request('/api/admin/settings', { method: 'PUT', body }),
+  // ---------- 文件上传 ----------
+  files: (params = {}) => request('/api/admin/files?' + new URLSearchParams(params)),
+  deleteFile: (id) => request('/api/admin/files/' + id, { method: 'DELETE' }),
+  // 上传走 FormData：request() 是 JSON helper，这里单独 fetch。
+  // 401 同样广播 one:unauthorized，错误消息从 JSON body 里取（与 request 一致）。
+  uploadFiles: async (formData) => {
+    const res = await fetch(base + '/api/admin/files', {
+      method: 'POST',
+      credentials: 'include',
+      body: formData
+    })
+    if (res.status === 401) {
+      window.dispatchEvent(new CustomEvent('one:unauthorized'))
+      const err = new Error('未登录或登录已过期')
+      err.status = 401
+      throw err
+    }
+    const data = await res.json().catch(() => ({}))
+    if (!res.ok) {
+      const err = new Error(data.error || `上传失败（${res.status}）`)
+      err.status = res.status
+      throw err
+    }
+    return data
+  }
 }

 // 读者（评论区）身份。会话是服务端 httpOnly cookie（one_reader），
@@ -17,6 +17,7 @@ const routes = [
      { path: '', name: 'admin-dashboard', component: () => import('./admin/DashboardView.vue') },
      { path: 'posts', name: 'admin-posts', component: () => import('./admin/PostsView.vue') },
      { path: 'new', name: 'admin-new', component: () => import('./admin/EditorView.vue') },
+      { path: 'files', name: 'admin-files', component: () => import('./admin/FilesView.vue') },
      { path: ':id', name: 'admin-edit', component: () => import('./admin/EditorView.vue') },
      { path: 'tags', name: 'admin-tags', component: () => import('./admin/TagsView.vue') },
      { path: 'projects', name: 'admin-projects', component: () => import('./admin/ProjectsView.vue') },
@@ -222,6 +222,12 @@ html.topbar-hidden {--topbar-h: 0px;}
 }
 .btn:disabled {opacity: 0.5;
  cursor: not-allowed;}
+/* 编辑器封面：URL 输入框 + 上传按钮同行 */
+.cover-row {display: flex;
+  gap: 6px;
+  align-items: center;}
+.cover-row > input {flex: 1;
+  min-width: 0;}
 .prose {font-size: 16.5px;
  line-height: var(--lh);
  color: var(--ink);}