{{ index + 1 }}
+ {{ item.title || item.original_name || itemKind(item.kind) }}
{{ itemKind(item.kind) }}
+
+
{{ item.title }}
+ {{ item.original_name }} +
+
{{ item.text }}
@@ -65,6 +72,10 @@ export default {
safeURL(value) { return safeExternalURL(value) },
downloadURL(value) { return `${value}${String(value).includes('?') ? '&' : '?'}download=1` },
itemKind(kind) { return {image: '图片', pdf: 'PDF', text: '文本', url: '网页链接'}[kind] || '资料' },
+ pdfViewerTitle(item) {
+ const label = item?.title || item?.original_name || '说明书'
+ return `${label} PDF 阅读器`
+ },
accessText(mode) { return {owner: '仅自己可见', authenticated: '登录用户可见', public: '所有人可见'}[mode] || mode },
},
}
@@ -73,3 +84,7 @@ export default {
+
+
diff --git a/front_vue/src/views/ManualEditor.vue b/front_vue/src/views/ManualEditor.vue
index 066ba6a..33c8c4d 100644
--- a/front_vue/src/views/ManualEditor.vue
+++ b/front_vue/src/views/ManualEditor.vue
@@ -46,17 +46,26 @@
-
-
-
-
-
+ 上移 下移 删除
@@ -130,6 +143,9 @@ export default {
this.fatalError = error.message || '编辑器加载失败'
} finally { this.loading = false }
},
+ beforeUnmount() {
+ this.releaseQueuePreviews()
+ },
methods: {
requireAccess() {
const user = this.$store.state.userInfo
@@ -156,7 +172,9 @@ export default {
},
appendFiles(event) {
if (this.saving || this.uploading) { if (event?.target) event.target.value = ''; return }
+ const existing = new Set(this.queue.map(item => item.local_id))
const result = appendFileItems(this.queue, event.target.files, this.manual?.items?.length || 0)
+ result.items.filter(item => !existing.has(item.local_id)).forEach(item => this.createQueuePreview(item))
this.queue = result.items
event.target.value = ''
if (result.errors.length) this.showNotice(result.errors.join('；'), 'error')
@@ -169,12 +187,39 @@ export default {
if (result.errors.length) this.showNotice(result.errors.join('；'), 'error')
},
moveQueue(index, offset) { if (this.saving || this.uploading) return; this.queue = moveItem(this.queue, index, offset) },
- removeQueue(index) { if (this.saving || this.uploading) return; this.queue.splice(index, 1); this.updateInterruptedMarker() },
+ removeQueue(index) {
+ if (this.saving || this.uploading) return
+ const [removed] = this.queue.splice(index, 1)
+ this.releaseQueuePreview(removed)
+ this.updateInterruptedMarker()
+ },
moveSaved(index, offset) { if (this.saving || this.uploading) return; this.manual.items = moveItem(this.manual.items, index, offset) },
editableQueueItem(item) { return !this.saving && !this.uploading && ['waiting', 'failed'].includes(item.status) },
editableQueueContent(item) { return !this.saving && !this.uploading && item.status === 'waiting' && !item.attempted },
queueStatus(status) { return {waiting: '等待上传', uploading: '上传中', success: '已成功', failed: '上传失败'}[status] || status },
- queueKind(item) { return {image: '图片', file: item.file?.name?.toLowerCase().endsWith('.txt') ? 'TXT 文本' : item.file?.name?.toLowerCase().endsWith('.pdf') ? 'PDF' : '文件', pdf: 'PDF', text: '文本', url: '网页链接'}[item.kind] || '资料' },
+ queueKind(item) { return {image: '图片', file: item.file?.name?.toLowerCase().endsWith('.txt') ? 'TXT 文本' : String(item.file?.type || '').toLowerCase() === 'application/pdf' || item.file?.name?.toLowerCase().endsWith('.pdf') ? 'PDF' : '文件', pdf: 'PDF', text: '文本', url: '网页链接'}[item.kind] || '资料' },
+ isQueuePDF(item) {
+ if (item?.kind === 'pdf') return true
+ return String(item?.file?.type || '').toLowerCase() === 'application/pdf'
+ },
+ pdfPreviewURL(value) {
+ if (!value) return ''
+ return `${value}#page=1&view=FitH&toolbar=0&navpanes=0&scrollbar=0`
+ },
+ createQueuePreview(item) {
+ if (!item?.file || (item.kind !== 'image' && !this.isQueuePDF(item)) || typeof URL === 'undefined' || typeof URL.createObjectURL !== 'function') return
+ try { item.preview_url = URL.createObjectURL(item.file) }
+ catch { item.preview_url = '' }
+ },
+ releaseQueuePreview(item) {
+ if (!item?.preview_url || typeof URL === 'undefined' || typeof URL.revokeObjectURL !== 'function') return
+ URL.revokeObjectURL(item.preview_url)
+ item.preview_url = ''
+ },
+ releaseQueuePreviews(items = this.queue) {
+ if (!items?.length) return
+ items.forEach(item => this.releaseQueuePreview(item))
+ },
formatBytes(bytes) { const size = Number(bytes || 0); return size < 1024 * 1024 ? `${(size / 1024).toFixed(1)} KiB` : `${(size / 1024 / 1024).toFixed(1)} MiB` },
showNotice(message, type = 'info') { this.notice = message; this.noticeType = type },
validateBeforeSave() {
@@ -258,6 +303,7 @@ export default {
const publishing = this.manual.status === 'draft'
if (publishing) await this.applyPatch(this.patchPayload(itemIDs, true))
else await this.applyPatch(this.patchPayload(itemIDs, false))
+ this.releaseQueuePreviews()
this.queue = []
this.clearInterruptedMarkers()
this.showNotice(publishing ? '说明书已发布' : '资料已上传，设置与顺序已保存', 'success')
@@ -302,6 +348,7 @@ export default {
try {
await manualsApi.deleteItem(this.manual.id, String(item.id), Number(this.manual.revision))
const latest = await manualsApi.getManual(this.manual.id)
+ this.queue.filter(queueItem => String(queueItem.server_item?.id || '') === String(item.id)).forEach(queueItem => this.releaseQueuePreview(queueItem))
this.queue = this.queue.filter(queueItem => String(queueItem.server_item?.id || '') !== String(item.id))
this.applyManual(latest)
this.form = draft
@@ -331,3 +378,7 @@ export default {
+
+
diff --git a/front_vue/test/manuals-browser.cjs b/front_vue/test/manuals-browser.cjs
index 3402206..5eab160 100644
--- a/front_vue/test/manuals-browser.cjs
+++ b/front_vue/test/manuals-browser.cjs
@@ -11,6 +11,26 @@ if (!playwrightPath) {
const {chromium} = require(playwrightPath)
const root = path.join(__dirname, '../src')
let browser, server, origin
+
+function fixturePDF() {
+ const stream = 'BT /F1 24 Tf 28 100 Td (Manual preview) Tj ET\n'
+ const objects = [
+ '1 0 obj\n<< /Type /Catalog /Pages 2 0 R >>\nendobj\n',
+ '2 0 obj\n<< /Type /Pages /Kids [3 0 R] /Count 1 >>\nendobj\n',
+ '3 0 obj\n<< /Type /Page /Parent 2 0 R /MediaBox [0 0 240 180] /Resources << /Font << /F1 5 0 R >> >> /Contents 4 0 R >>\nendobj\n',
+ `4 0 obj\n<< /Length ${Buffer.byteLength(stream)} >>\nstream\n${stream}endstream\nendobj\n`,
+ '5 0 obj\n<< /Type /Font /Subtype /Type1 /BaseFont /Helvetica >>\nendobj\n',
+ ]
+ let body = '%PDF-1.4\n'
+ const offsets = [0]
+ for (const object of objects) { offsets.push(Buffer.byteLength(body)); body += object }
+ const xref = Buffer.byteLength(body)
+ body += `xref\n0 ${objects.length + 1}\n0000000000 65535 f \n`
+ for (const offset of offsets.slice(1)) body += `${String(offset).padStart(10, '0')} 00000 n \n`
+ body += `trailer\n<< /Size ${objects.length + 1} /Root 1 0 R >>\nstartxref\n${xref}\n%%EOF\n`
+ return Buffer.from(body)
+}
+
const artifacts = {
'/vue.js': fs.readFileSync(require.resolve('vue/dist/vue.global.prod.js')),
'/element.js': fs.readFileSync(require.resolve('element-plus/dist/index.full.js')),
@@ -50,13 +70,20 @@ app.use(ElementPlus);app.component('RouterLink',RouterLink);Object.assign(app.co
artifacts['/manuals.js'] = Buffer.from(script)
artifacts['/manuals.css'] = Buffer.from(css)
artifacts['/content/front.png'] = Buffer.from('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=', 'base64')
+artifacts['/thumb/saved-image.png'] = artifacts['/content/front.png']
+artifacts['/thumb/saved-pdf.png'] = artifacts['/content/front.png']
+artifacts['/content/guide.pdf'] = fixturePDF()
const html = ''
before(async () => {
server = http.createServer((req, res) => {
const artifact = artifacts[req.url]
- const contentType = req.url.endsWith('.css') ? 'text/css' : req.url.endsWith('.png') ? 'image/png' : 'application/javascript'
+ const contentType = req.url.endsWith('.css') ? 'text/css' : req.url.endsWith('.png') ? 'image/png' : req.url.endsWith('.pdf') ? 'application/pdf' : 'application/javascript'
res.setHeader('Content-Type', artifact ? contentType : 'text/html; charset=utf-8')
+ if (req.url.endsWith('.pdf')) {
+ res.setHeader('Content-Disposition', 'inline; filename="manual.pdf"')
+ res.setHeader('Content-Security-Policy', 'sandbox')
+ }
res.end(artifact || html)
})
await new Promise(resolve => server.listen(0, '127.0.0.1', resolve))
@@ -367,10 +394,56 @@ test('删除资料和说明书的真实请求体保持数字 revision', async ()
} finally { await context.close() }
})
+test('编辑器为待上传和已保存文件显示缩略图，排序保持预览对应并释放移除项 URL', async () => {
+ const savedImage = {id: 'image-1', kind: 'image', title: '正面', original_name: 'front.png', position: 1, thumbnail_url: '/thumb/saved-image.png', preview_status: 'ready'}
+ const savedPDF = {id: 'pdf-1', kind: 'pdf', title: '完整手册', original_name: 'guide.pdf', position: 2, thumbnail_url: '/thumb/saved-pdf.png', preview_status: 'ready'}
+ const handler = async ({route, request, url}) => {
+ if (url.pathname === '/api/manuals/categories') { await route.fulfill({json: {code: 0, data: {items: []}}}); return true }
+ if (url.pathname === '/api/manuals/500' && request.method() === 'GET') {
+ await route.fulfill({json: {code: 0, data: baseManual({id: '500', can_edit: true, items: [savedImage, savedPDF], item_count: 2})}}); return true
+ }
+ return false
+ }
+ const {page, context} = await setup({path: '/manuals/500/edit?as=owner', width: 320, handler})
+ try {
+ await page.evaluate(() => {
+ window.__revokedManualPreviewURLs = []
+ const revoke = URL.revokeObjectURL.bind(URL)
+ URL.revokeObjectURL = value => { window.__revokedManualPreviewURLs.push(value); revoke(value) }
+ })
+ const png = Buffer.from('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=', 'base64')
+ await page.getByLabel('选择图片').setInputFiles({name: 'local.png', mimeType: 'image/png', buffer: png})
+ await page.getByLabel('选择 PDF 或 TXT').setInputFiles({name: 'local-manual', mimeType: 'application/pdf', buffer: fixturePDF()})
+ await page.getByLabel('选择 PDF 或 TXT').setInputFiles({name: 'attack.pdf', mimeType: 'text/html', buffer: Buffer.from('')})
+
+ assert.equal(await page.locator('.queue-preview-image').count(), 1)
+ assert.match(await page.locator('.queue-preview-image').getAttribute('src'), /^blob:/)
+ const localPDFCard = page.locator('.upload-queue-item').filter({hasText: 'local-manual'})
+ assert.equal(await localPDFCard.locator('.queue-preview-pdf').count(), 1)
+ assert.match(await localPDFCard.locator('.queue-preview-pdf').getAttribute('src'), /^blob:/)
+ const attackPDFCard = page.locator('.upload-queue-item').filter({hasText: 'attack.pdf'})
+ assert.equal(await attackPDFCard.locator('.queue-preview-pdf').count(), 0)
+ assert.equal(await page.evaluate(() => window.__manualEditorXSS), undefined)
+ assert.equal(await page.locator('.saved-thumbnail').count(), 2)
+ const savedPDFCard = page.locator('.saved-item').filter({hasText: '完整手册'})
+ await savedPDFCard.getByRole('button', {name: '上移', exact: true}).click()
+ assert.match(await page.locator('.saved-item').first().locator('.saved-thumbnail').getAttribute('src'), /saved-pdf\.png$/)
+
+ const pdfCard = page.locator('.upload-queue-item').filter({hasText: 'local-manual'})
+ const pdfPreview = await pdfCard.locator('.queue-preview-pdf').getAttribute('src')
+ await pdfCard.getByRole('button', {name: '上移', exact: true}).click()
+ assert.match(await page.locator('.upload-queue-item').first().innerText(), /local-manual/)
+ assert.equal(await page.locator('.upload-queue-item').first().locator('.queue-preview-pdf').getAttribute('src'), pdfPreview)
+ await page.locator('.upload-queue-item').first().getByRole('button', {name: '移除', exact: true}).click()
+ assert.equal(await page.evaluate(() => window.__revokedManualPreviewURLs.length), 1)
+ assert.equal(await page.evaluate(() => document.documentElement.scrollWidth > innerWidth), false)
+ } finally { await context.close() }
+})
+
test('匿名详情按顺序安全展示图片、PDF、纯文本和 HTTP(S) 链接', async () => {
const manual = baseManual({items: [
{id: '1', kind: 'image', title: '正面', content_url: '/content/front.png', thumbnail_url: '/thumb/front.png', preview_status: 'ready'},
- {id: '2', kind: 'pdf', title: '完整手册', content_url: '/content/guide.pdf', preview_status: 'ready'},
+ {id: '2', kind: 'pdf', title: '完整手册', original_name: 'guide.pdf', content_url: '/content/guide.pdf', preview_status: 'ready'},
{id: '3', kind: 'text', title: '保养', text: '\n用清水冲洗'},
{id: '4', kind: 'url', title: '官网支持', url: 'https://example.com/help'},
{id: '5', kind: 'url', title: '无效链接', url: 'javascript:alert(1)'},
@@ -391,6 +464,16 @@ test('匿名详情按顺序安全展示图片、PDF、纯文本和 HTTP(S) 链
assert.match(await external.getAttribute('rel'), /noopener/)
assert.match(await external.getAttribute('rel'), /noreferrer/)
assert.equal(await page.getByRole('link', {name: '打开无效链接'}).count(), 0)
+ const pdfCard = page.locator('.manual-item').filter({hasText: '完整手册'})
+ assert.equal(await pdfCard.locator('.item-meta').textContent(), '资料 2 · PDF')
+ assert.equal(await pdfCard.locator('.item-filename').textContent(), 'guide.pdf')
+ assert.equal(await page.locator('.item-heading > span').count(), 0)
+ assert.equal(await pdfCard.locator('iframe.pdf-viewer').count(), 1)
+ assert.match(await pdfCard.locator('iframe.pdf-viewer').getAttribute('src'), /\/content\/guide\.pdf$/)
+ assert.equal(await pdfCard.locator('iframe.pdf-viewer').getAttribute('title'), '完整手册 PDF 阅读器')
+ if (!page.frames().some(frame => frame.url().startsWith('chrome-extension://mhjfbmdgcfjbbpaeojofohoefgiehjai/'))) {
+ await page.waitForEvent('framenavigated', {predicate: frame => frame.url().startsWith('chrome-extension://mhjfbmdgcfjbbpaeojofohoefgiehjai/')})
+ }
assert.equal(await page.getByRole('link', {name: '打开 PDF'}).getAttribute('target'), '_blank')
assert.match(await page.getByRole('link', {name: '下载 PDF'}).getAttribute('href'), /download=1/)
assert.equal(await page.evaluate(() => document.documentElement.scrollWidth > innerWidth), false)
{{ index + 1 }}. {{ queueKind(item) }}{{ item.file.name }}·{{ formatBytes(item.file.size) }}
{{ queueStatus(item.status) }}这个文件与队列中的名称、大小和修改时间相同，仍已保留。
- -{{ item.error }}
-
- 上移
- 下移
- 移除
+
@@ -71,6 +80,10 @@
+
+ ![]()
+
+ {{ queueKind(item) }}
+
+
+
+
+
+
+
{{ index + 1 }}. {{ queueKind(item) }}{{ item.file.name }} · {{ formatBytes(item.file.size) }}
{{ queueStatus(item.status) }}这个文件与队列中的名称、大小和修改时间相同，仍已保留。
+ +{{ item.error }}
+
+ 上移
+ 下移
+ 移除
+
+
+ ![]()
+ {{ queueKind(item) }}
+
{{ index + 1 }}. {{ item.title || item.original_name || queueKind(item) }}{{ queueKind(item) }}