From 58f344db8517c98cb28b789d41bde4bb5ff64b68 Mon Sep 17 00:00:00 2001
From: Fam Zheng <fam@euphon.net>
Date: Tue, 5 May 2026 10:57:38 +0100
Subject: [PATCH] =?UTF-8?q?piano-sheet(upload):=20mobile/pad=20first?=
 =?UTF-8?q?=EF=BC=8C=E4=B8=BB=E5=85=A5=E5=8F=A3=E7=9B=B4=E8=B0=83=E5=90=8E?=
 =?UTF-8?q?=E7=BD=AE=E6=91=84=E5=83=8F=E5=A4=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 主 CTA「拍下一页」+ capture=environment，副 CTA「从相册」multiple
- 底部 sticky 上传按钮，iOS safe area 兜住刘海/Home indicator
- 客户端压缩 1800px JPEG 0.85（createImageBitmap + EXIF 自动旋转）
- 页码 ↑↓ 移动 + ✕ 删除替代旧拖拽
---
 apps/piano-sheet/frontend/src/lib/compress.js |  32 ++
 .../frontend/src/views/UploadView.vue         | 382 ++++++++++++------
 2 files changed, 282 insertions(+), 132 deletions(-)
 create mode 100644 apps/piano-sheet/frontend/src/lib/compress.js

diff --git a/apps/piano-sheet/frontend/src/lib/compress.js b/apps/piano-sheet/frontend/src/lib/compress.js
new file mode 100644
index 0000000..a9389a7
--- /dev/null
+++ b/apps/piano-sheet/frontend/src/lib/compress.js
@@ -0,0 +1,32 @@
+// 移动端拍照原图常 5–12MB，1500–1800px 长边 + JPEG 0.85 已经够看清楚音符。
+// 用 createImageBitmap 的 imageOrientation: 'from-image' 自动按 EXIF 旋转，
+// 否则横拍照在 canvas 里会变成竖图。
+
+export async function compressImage(file, { maxEdge = 1800, quality = 0.85 } = {}) {
+  if (!file || !file.type || !file.type.startsWith('image/')) return file
+
+  let bitmap
+  try {
+    bitmap = await createImageBitmap(file, { imageOrientation: 'from-image' })
+  } catch {
+    return file
+  }
+
+  const { width, height } = bitmap
+  const scale = Math.min(1, maxEdge / Math.max(width, height))
+  const w = Math.max(1, Math.round(width * scale))
+  const h = Math.max(1, Math.round(height * scale))
+
+  const canvas = document.createElement('canvas')
+  canvas.width = w
+  canvas.height = h
+  const ctx = canvas.getContext('2d')
+  ctx.drawImage(bitmap, 0, 0, w, h)
+  bitmap.close?.()
+
+  const blob = await new Promise((res) => canvas.toBlob(res, 'image/jpeg', quality))
+  if (!blob || blob.size >= file.size) return file
+
+  const baseName = file.name?.replace(/\.[^.]+$/, '') || 'photo'
+  return new File([blob], `${baseName}.jpg`, { type: 'image/jpeg', lastModified: Date.now() })
+}
diff --git a/apps/piano-sheet/frontend/src/views/UploadView.vue b/apps/piano-sheet/frontend/src/views/UploadView.vue
index 01f86c9..4b23609 100644
--- a/apps/piano-sheet/frontend/src/views/UploadView.vue
+++ b/apps/piano-sheet/frontend/src/views/UploadView.vue
@@ -1,115 +1,149 @@
 <template>
-  <div class="upload-page">
+  <div class="upload">
     <header class="topbar">
-      <router-link to="/" class="btn-ghost back">← 返回</router-link>
+      <router-link to="/" class="back" aria-label="返回">←</router-link>
       <h1>上传琴谱</h1>
       <span class="spacer" />
     </header>
 
     <main class="content">
-      <form @submit.prevent="submit" class="form">
-        <label class="field">
-          <span class="label">曲名</span>
-          <input
-            v-model="title"
-            type="text"
-            placeholder="例如：Clair de Lune"
-            maxlength="120"
-            required
-            class="input"
-          />
-        </label>
+      <label class="field">
+        <span class="label">曲名</span>
+        <input
+          v-model="title"
+          type="text"
+          placeholder="例如：Clair de Lune"
+          maxlength="120"
+          required
+          enterkeyhint="done"
+          class="input"
+        />
+      </label>
 
-        <label
-          class="dropzone"
-          :class="{ dragging }"
-          @dragenter.prevent="dragging = true"
-          @dragover.prevent="dragging = true"
-          @dragleave.prevent="dragging = false"
-          @drop.prevent="onDrop"
-        >
-          <input
-            type="file"
-            accept="image/*"
-            multiple
-            @change="onPick"
-            class="file-input"
-          />
-          <div class="dz-inner">
-            <div class="dz-icon">🎼</div>
-            <div class="dz-title">点击或拖拽图片到这里</div>
-            <div class="dz-sub">支持多张，按选择顺序作为页码 · 单张 ≤ 10MB</div>
+      <section class="actions-add">
+        <button type="button" class="btn-camera" @click="cameraInput?.click()" :disabled="processing">
+          <span class="icon">📷</span>
+          <span class="title">拍下一页</span>
+          <span class="hint">{{ items.length === 0 ? '主入口：调用摄像头' : `已拍 ${items.length} 页，继续` }}</span>
+        </button>
+        <input
+          ref="cameraInput"
+          type="file"
+          accept="image/*"
+          capture="environment"
+          @change="onCamera"
+          hidden
+        />
+
+        <button type="button" class="btn-album" @click="albumInput?.click()" :disabled="processing">
+          <span class="icon">📁</span>
+          <span class="text">从相册选择（可多张）</span>
+        </button>
+        <input
+          ref="albumInput"
+          type="file"
+          accept="image/*"
+          multiple
+          @change="onAlbum"
+          hidden
+        />
+      </section>
+
+      <p v-if="processing" class="msg info">压缩中…</p>
+
+      <ul v-if="items.length" class="pages">
+        <li v-for="(it, i) in items" :key="it.key" class="page">
+          <span class="no">P{{ i + 1 }}</span>
+          <img :src="it.preview" alt="" class="thumb" />
+          <div class="meta">
+            <div class="fname">{{ it.file.name }}</div>
+            <div class="fsize">{{ formatSize(it.file.size) }}</div>
           </div>
-        </label>
+          <div class="ops">
+            <button type="button" class="op" :disabled="i === 0" @click="move(i, -1)" aria-label="上移">↑</button>
+            <button type="button" class="op" :disabled="i === items.length - 1" @click="move(i, 1)" aria-label="下移">↓</button>
+            <button type="button" class="op rm" @click="remove(i)" aria-label="移除">✕</button>
+          </div>
+        </li>
+      </ul>
 
-        <ul v-if="files.length" class="filelist">
-          <li v-for="(f, i) in files" :key="i" class="fileitem">
-            <span class="page-no">P{{ i + 1 }}</span>
-            <img :src="previews[i]" alt="" class="thumb" />
-            <span class="fname">{{ f.name }}</span>
-            <span class="fsize">{{ formatSize(f.size) }}</span>
-            <button type="button" class="rm" @click="remove(i)" aria-label="移除">✕</button>
-          </li>
-        </ul>
-
-        <p v-if="error" class="msg error">{{ error }}</p>
-        <p v-if="success" class="msg success">{{ success }}</p>
-
-        <div class="actions">
-          <button type="submit" class="btn-primary" :disabled="!canSubmit">
-            {{ submitting ? '上传中…' : `上传 ${files.length} 页` }}
-          </button>
-        </div>
-      </form>
+      <p v-if="error" class="msg error">{{ error }}</p>
+      <p v-if="success" class="msg success">{{ success }}</p>
     </main>
+
+    <footer v-if="items.length" class="bottombar">
+      <button type="button" class="btn-submit" :disabled="!canSubmit" @click="submit">
+        {{ submitting ? '上传中…' : `上传 ${items.length} 页` }}
+      </button>
+    </footer>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, watch } from 'vue'
+import { ref, computed, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { uploadSheet } from '../lib/api.js'
+import { compressImage } from '../lib/compress.js'
 
 const router = useRouter()
 
 const title = ref('')
-const files = ref([])
-const previews = ref([])
-const dragging = ref(false)
+const items = ref([]) // { key, file, preview }
+const cameraInput = ref(null)
+const albumInput = ref(null)
+const processing = ref(false)
 const submitting = ref(false)
 const error = ref('')
 const success = ref('')
 
+let nextKey = 0
+
 const canSubmit = computed(
-  () => !submitting.value && title.value.trim() && files.value.length > 0,
+  () => !submitting.value && !processing.value && title.value.trim() && items.value.length > 0,
 )
 
-watch(
-  files,
-  (list) => {
-    previews.value.forEach((u) => URL.revokeObjectURL(u))
-    previews.value = list.map((f) => URL.createObjectURL(f))
-  },
-  { deep: false },
-)
-
-function addFiles(incoming) {
-  const imgs = incoming.filter((f) => f.type.startsWith('image/'))
-  files.value = [...files.value, ...imgs]
+async function addFiles(incoming) {
+  const imgs = incoming.filter((f) => f.type && f.type.startsWith('image/'))
+  if (imgs.length === 0) return
+  processing.value = true
+  error.value = ''
+  try {
+    const compressed = await Promise.all(
+      imgs.map((f) => compressImage(f).catch(() => f)),
+    )
+    const fresh = compressed.map((f) => ({
+      key: ++nextKey,
+      file: f,
+      preview: URL.createObjectURL(f),
+    }))
+    items.value = [...items.value, ...fresh]
+  } finally {
+    processing.value = false
+  }
 }
 
-function onPick(e) {
+function onCamera(e) {
   addFiles(Array.from(e.target.files || []))
   e.target.value = ''
 }
 
-function onDrop(e) {
-  dragging.value = false
-  addFiles(Array.from(e.dataTransfer.files || []))
+function onAlbum(e) {
+  addFiles(Array.from(e.target.files || []))
+  e.target.value = ''
+}
+
+function move(i, delta) {
+  const j = i + delta
+  if (j < 0 || j >= items.value.length) return
+  const next = items.value.slice()
+  ;[next[i], next[j]] = [next[j], next[i]]
+  items.value = next
 }
 
 function remove(i) {
-  files.value = files.value.filter((_, idx) => idx !== i)
+  const it = items.value[i]
+  URL.revokeObjectURL(it.preview)
+  items.value = items.value.filter((_, idx) => idx !== i)
 }
 
 function formatSize(n) {
@@ -124,7 +158,7 @@ async function submit() {
   error.value = ''
   success.value = ''
   try {
-    const r = await uploadSheet(title.value.trim(), files.value)
+    const r = await uploadSheet(title.value.trim(), items.value.map((x) => x.file))
     success.value = `已上传：${r.title}（${r.pages} 页）`
     router.push({ name: 'reader', params: { id: r.id } })
   } catch (e) {
@@ -133,129 +167,213 @@ async function submit() {
     submitting.value = false
   }
 }
+
+onUnmounted(() => {
+  for (const it of items.value) URL.revokeObjectURL(it.preview)
+})
 </script>
 
 <style scoped>
-.upload-page {
+.upload {
   min-height: 100%;
   display: flex;
   flex-direction: column;
+  /* 给底部 sticky 按钮留 safe area（iOS 刘海/底部条） */
+  padding-bottom: env(safe-area-inset-bottom);
 }
+
 .topbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 16px 24px;
+  padding: 12px 16px;
+  padding-top: calc(12px + env(safe-area-inset-top));
   border-bottom: 1px solid var(--border);
   background: var(--bg-card);
   position: sticky;
   top: 0;
   z-index: 10;
 }
-.topbar h1 { font-size: 20px; font-weight: 700; }
-.back { text-decoration: none; }
-.back:hover { text-decoration: none; }
-.spacer { width: 80px; }
+.topbar h1 { font-size: 18px; font-weight: 700; }
+.back {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius);
+  font-size: 20px;
+  text-decoration: none;
+  color: var(--text-primary);
+}
+.back:hover { background: var(--bg-hover); text-decoration: none; }
+.spacer { width: 40px; }
 
 .content {
   flex: 1;
-  padding: 32px 24px 80px;
-  display: flex;
-  justify-content: center;
-}
-.form {
-  width: 100%;
-  max-width: 720px;
+  padding: 16px 16px 120px;
   display: flex;
   flex-direction: column;
-  gap: 22px;
+  gap: 18px;
+  width: 100%;
+  max-width: 720px;
+  margin: 0 auto;
 }
-.field { display: flex; flex-direction: column; gap: 8px; }
-.label { font-size: 14px; color: var(--text-secondary); font-weight: 500; }
+
+.field { display: flex; flex-direction: column; gap: 6px; }
+.label { font-size: 13px; color: var(--text-secondary); font-weight: 500; }
 .input {
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   color: var(--text-primary);
-  font-size: 18px;
+  font-size: 17px;
   padding: 14px 16px;
   outline: none;
   font-family: inherit;
+  /* iOS 默认会放大到 16px+ 才不缩放，这里 17px 安全 */
 }
 .input:focus { border-color: var(--accent); }
 
-.dropzone {
-  position: relative;
-  border: 2px dashed var(--border);
-  border-radius: var(--radius-lg);
-  padding: 40px 20px;
-  text-align: center;
-  background: var(--bg-card);
-  cursor: pointer;
-  transition: border-color 0.15s, background 0.15s;
-  display: block;
-}
-.dropzone.dragging { border-color: var(--accent); background: var(--bg-surface); }
-.file-input {
-  position: absolute;
-  inset: 0;
-  opacity: 0;
-  cursor: pointer;
-}
-.dz-inner { pointer-events: none; }
-.dz-icon { font-size: 42px; margin-bottom: 8px; }
-.dz-title { font-size: 18px; font-weight: 600; }
-.dz-sub { color: var(--text-muted); margin-top: 6px; font-size: 14px; }
+.actions-add { display: flex; flex-direction: column; gap: 12px; }
 
-.filelist {
+.btn-camera {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 28px 16px;
+  border: 0;
+  border-radius: var(--radius-lg);
+  background: var(--accent);
+  color: #fff;
+  cursor: pointer;
+  transition: transform 0.05s, opacity 0.15s;
+  font-family: inherit;
+}
+.btn-camera:active { transform: scale(0.98); }
+.btn-camera:disabled { opacity: 0.5; cursor: not-allowed; }
+.btn-camera .icon { font-size: 36px; line-height: 1; }
+.btn-camera .title { font-size: 20px; font-weight: 700; }
+.btn-camera .hint { font-size: 13px; opacity: 0.9; }
+
+.btn-album {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 14px 16px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-card);
+  color: var(--text-primary);
+  cursor: pointer;
+  font-size: 15px;
+  font-family: inherit;
+}
+.btn-album:hover { background: var(--bg-hover); }
+.btn-album:disabled { opacity: 0.5; cursor: not-allowed; }
+.btn-album .icon { font-size: 18px; }
+
+.pages {
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
-.fileitem {
-  display: flex;
+.page {
+  display: grid;
+  grid-template-columns: 36px 64px 1fr auto;
   align-items: center;
   gap: 12px;
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: var(--radius);
-  padding: 8px 12px;
+  padding: 8px 10px;
 }
-.page-no {
+.no {
   background: var(--bg-surface);
   color: var(--text-secondary);
   font-weight: 600;
   border-radius: 6px;
-  padding: 4px 8px;
+  padding: 6px 0;
   font-size: 13px;
-  min-width: 38px;
   text-align: center;
 }
 .thumb {
-  width: 44px;
-  height: 44px;
+  width: 64px;
+  height: 64px;
   object-fit: cover;
   border-radius: 6px;
+  background: var(--bg-surface);
 }
+.meta { min-width: 0; }
 .fname {
-  flex: 1;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  font-size: 14px;
 }
-.fsize { color: var(--text-muted); font-size: 13px; }
-.rm {
-  background: transparent;
-  color: var(--text-muted);
-  padding: 6px 10px;
+.fsize { color: var(--text-muted); font-size: 12px; margin-top: 2px; }
+.ops { display: flex; gap: 4px; }
+.op {
+  width: 36px;
+  height: 36px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-surface);
+  color: var(--text-secondary);
+  border: 0;
   border-radius: 6px;
+  font-size: 16px;
+  cursor: pointer;
 }
-.rm:hover { background: var(--bg-hover); color: var(--accent-red); }
+.op:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); }
+.op:disabled { opacity: 0.3; cursor: not-allowed; }
+.op.rm:hover { color: var(--accent-red); }
 
 .msg { font-size: 14px; padding: 10px 14px; border-radius: var(--radius); }
+.msg.info { background: var(--bg-surface); color: var(--text-secondary); }
 .msg.error { background: rgba(239, 68, 68, 0.1); color: var(--accent-red); }
 .msg.success { background: rgba(16, 185, 129, 0.1); color: var(--accent-green); }
 
-.actions { display: flex; justify-content: flex-end; }
+.bottombar {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 12px 16px;
+  padding-bottom: calc(12px + env(safe-area-inset-bottom));
+  background: var(--bg-card);
+  border-top: 1px solid var(--border);
+  z-index: 10;
+}
+.btn-submit {
+  width: 100%;
+  padding: 16px;
+  border: 0;
+  border-radius: var(--radius);
+  background: var(--accent);
+  color: #fff;
+  font-size: 17px;
+  font-weight: 600;
+  cursor: pointer;
+  font-family: inherit;
+}
+.btn-submit:active:not(:disabled) { opacity: 0.9; }
+.btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* 平板及以上：拍照与相册按钮并排 */
+@media (min-width: 720px) {
+  .actions-add { flex-direction: row; }
+  .btn-camera { flex: 2; }
+  .btn-album { flex: 1; padding: 28px 16px; flex-direction: column; gap: 4px; }
+  .btn-album .text { font-size: 15px; font-weight: 600; }
+  .btn-album .icon { font-size: 28px; }
+  .topbar { padding: 16px 24px; padding-top: calc(16px + env(safe-area-inset-top)); }
+  .topbar h1 { font-size: 20px; }
+  .content { padding: 24px 24px 140px; }
+}
 </style>