feat(admin): batch ops, transfer, watermark, usage and qr share pages
Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
浅念
@@ -18,3 +18,7 @@ VITE_OPEN_ROUTE_INFO = false
|
||||
|
||||
# 锁屏加密密钥
|
||||
VITE_LOCK_ENCRYPT_KEY = change-me-lock-key
|
||||
|
||||
# viewer 部署基址（相册详情「分享」卡拼 viewer URL 与二维码；缺省兜底
|
||||
# http://127.0.0.1:5175 —— 本机 dev 端口，apps/viewer vite 固定 5175）
|
||||
VITE_VIEWER_BASE = http://127.0.0.1:5175
|
||||
|
||||
@@ -0,0 +1,281 @@
|
||||
// 相册治理增量 e2e（P4a Task 9，真实后端 + compose 基础设施）：批量隐藏
|
||||
// （多选 2 → toast 成功汇总 + 行原位已隐藏 + cn 公开列表仅剩 1）→ 负责人交接
|
||||
// （前缀搜索 staff → API 断言 ownerId 变更）→ 水印（配置保存 → 任务受理 →
|
||||
// fixture 直驱 worker 核心到 done → UI 轮询见已完成 + 公开 browse URL 指向
|
||||
// /watermark.jpg）→ 用量（阈值调小触发告警 → 上调解除）→ 分享二维码
|
||||
// （canvas 非空 + URL 复制）。选择器一律 data-test；文案断言仅用稳定短语。
|
||||
import { expect, test, type Page } from '@playwright/test'
|
||||
import { adminCredentials, loginAsAdmin, seedFixture } from './helpers'
|
||||
|
||||
test.use({ testIdAttribute: 'data-test' })
|
||||
|
||||
test.beforeAll(() => {
|
||||
// 幂等种子 staff 账号（交接目标；密码占位不可登录，仅用于查询与交接）
|
||||
seedFixture('staff', 'staff-e2e', 'Staff E2E')
|
||||
})
|
||||
|
||||
/** UI 创建相册（zh+en 标题），返回标题后缀（同 albums.spec 模式） */
|
||||
async function createAlbumViaUi(page: Page): Promise<string> {
|
||||
const suffix = Date.now().toString(36) + Math.random().toString(36).slice(2, 6)
|
||||
await page.getByTestId('album-create-btn').click()
|
||||
await expect(page.getByTestId('album-form-dialog')).toBeVisible()
|
||||
await page.getByTestId('album-form-title-zh-CN').fill(`E2E治理相册 ${suffix}`)
|
||||
await page.getByRole('tab', { name: '英文' }).click()
|
||||
await page.getByTestId('album-form-title-en').fill(`E2E Gov Album ${suffix}`)
|
||||
await page.getByTestId('album-form-start-at').locator('input').fill('2026-10-01 10:00:00')
|
||||
await page.keyboard.press('Enter')
|
||||
await page.getByTestId('album-form-submit').click()
|
||||
await expect(page.getByTestId('album-form-dialog')).toBeHidden()
|
||||
await expect(
|
||||
page.getByTestId('album-list-table').getByText(`E2E治理相册 ${suffix}`)
|
||||
).toBeVisible()
|
||||
return suffix
|
||||
}
|
||||
|
||||
/** 列表内定位目标相册行 */
|
||||
function albumRow(page: Page, suffix: string) {
|
||||
return page.getByTestId('album-list-table').locator('tr', { hasText: `E2E治理相册 ${suffix}` })
|
||||
}
|
||||
|
||||
/** 进入详情页，返回 albumId */
|
||||
async function openAlbumDetail(page: Page, suffix: string): Promise<string> {
|
||||
await albumRow(page, suffix).getByTestId('album-detail-btn').click()
|
||||
await expect(page.getByTestId('album-detail-card')).toBeVisible()
|
||||
const albumId = /\/albums\/detail\/([^/?#]+)/.exec(page.url())?.[1] ?? ''
|
||||
expect(albumId).not.toBe('')
|
||||
return albumId
|
||||
}
|
||||
|
||||
/** API 登录（UI 之外的断言用）：返回 Bearer 会话令牌 */
|
||||
async function apiLogin(page: Page): Promise<string> {
|
||||
const { account, password } = adminCredentials()
|
||||
const res = await page.request.post('/v1/auth/password', { data: { account, password } })
|
||||
expect(res.ok()).toBeTruthy()
|
||||
const body = (await res.json()) as { sessionToken: string }
|
||||
return body.sessionToken
|
||||
}
|
||||
|
||||
/** cn 公开列表条数（批量隐藏的观众侧断言） */
|
||||
async function publicPhotoCount(page: Page, token: string): Promise<number> {
|
||||
const res = await page.request.get(`/v1/public/albums/${token}/photos`)
|
||||
expect(res.ok()).toBeTruthy()
|
||||
const body = (await res.json()) as { items: unknown[] }
|
||||
return body.items.length
|
||||
}
|
||||
|
||||
/** ElSwitch 幂等设到目标态（is-checked 类为准；已同态不点击）。 */
|
||||
async function setSwitchState(page: Page, testId: string, on: boolean): Promise<void> {
|
||||
const isOn = await page.getByTestId(testId).evaluate((el) => el.classList.contains('is-checked'))
|
||||
if (isOn !== on) {
|
||||
await page.getByTestId(testId).click()
|
||||
}
|
||||
}
|
||||
|
||||
test('批量隐藏：多选 2 → 汇总 toast + 行原位已隐藏 + 公开列表仅剩 1', async ({ page }) => {
|
||||
await loginAsAdmin(page)
|
||||
const suffix = await createAlbumViaUi(page)
|
||||
const albumId = await openAlbumDetail(page, suffix)
|
||||
|
||||
seedFixture('gov-photos', albumId, adminCredentials().account, '3')
|
||||
await page.reload()
|
||||
await expect(page.getByTestId('photo-list-table')).toBeVisible()
|
||||
const rows = page.getByTestId('photo-list-table').locator('tbody tr')
|
||||
await expect(rows).toHaveCount(3)
|
||||
for (const row of await rows.all()) {
|
||||
await expect(row.getByTestId('photo-visibility-tag')).toHaveText('已发布')
|
||||
}
|
||||
|
||||
// 勾选前两行 → 批量按钮亮起（计数 2）→ 确认
|
||||
await rows.nth(0).locator('.el-checkbox').click()
|
||||
await rows.nth(1).locator('.el-checkbox').click()
|
||||
const batchBtn = page.getByTestId('photo-batch-hide-btn')
|
||||
await expect(batchBtn).toBeEnabled()
|
||||
await expect(batchBtn).toContainText('2')
|
||||
await batchBtn.click()
|
||||
await page.getByRole('button', { name: '确定' }).click()
|
||||
|
||||
// 汇总 toast（全部成功分支）+ 两行原位已隐藏、一行保持已发布
|
||||
await expect(page.locator('.el-message').filter({ hasText: '成功 2 张' })).toBeVisible()
|
||||
await expect(rows.nth(0).getByTestId('photo-visibility-tag')).toHaveText('已隐藏')
|
||||
await expect(rows.nth(1).getByTestId('photo-visibility-tag')).toHaveText('已隐藏')
|
||||
await expect(rows.nth(2).getByTestId('photo-visibility-tag')).toHaveText('已发布')
|
||||
|
||||
// 观众侧：公开列表 3 → 1
|
||||
const token = await page.getByTestId('album-detail-token').textContent()
|
||||
expect(await publicPhotoCount(page, token ?? '')).toBe(1)
|
||||
})
|
||||
|
||||
test('负责人交接：搜索 staff → 交接 → ownerId 变更（API + 详情回显）', async ({ page }) => {
|
||||
await loginAsAdmin(page)
|
||||
const suffix = await createAlbumViaUi(page)
|
||||
const albumId = await openAlbumDetail(page, suffix)
|
||||
|
||||
const sessionToken = await apiLogin(page)
|
||||
// 交接前 owner 是 admin 自己
|
||||
const before = (await (
|
||||
await page.request.get(`/v1/albums/${albumId}`, {
|
||||
headers: { Authorization: `Bearer ${sessionToken}` }
|
||||
})
|
||||
).json()) as { ownerId: string }
|
||||
const staffId = (
|
||||
(
|
||||
(await (
|
||||
await page.request.get('/v1/admin/users', {
|
||||
params: { accountPrefix: 'staff-e2e' },
|
||||
headers: { Authorization: `Bearer ${sessionToken}` }
|
||||
})
|
||||
).json()) as { items: { id: string }[] }
|
||||
).items[0] ?? { id: '' }
|
||||
).id
|
||||
expect(staffId).not.toBe('')
|
||||
expect(before.ownerId).not.toBe(staffId)
|
||||
|
||||
// 交接对话框：前缀搜索（≥2 字符）→ 选中 → 保留协作者开关默认开 → 提交
|
||||
await page.getByTestId('album-detail-transfer').click()
|
||||
await expect(page.getByTestId('transfer-dialog')).toBeVisible()
|
||||
const targetSelect = page.getByTestId('transfer-target-select')
|
||||
await targetSelect.click()
|
||||
await targetSelect.locator('input').fill('staff-e2e')
|
||||
await page.getByTestId('transfer-option-staff-e2e').click()
|
||||
await expect(page.getByTestId('transfer-keep-switch')).toHaveClass(/is-checked/)
|
||||
await page.getByTestId('transfer-submit').click()
|
||||
await expect(page.getByTestId('transfer-dialog')).toBeHidden()
|
||||
await expect(page.locator('.el-message').filter({ hasText: '负责人已交接' })).toBeVisible()
|
||||
|
||||
// 详情回显 + API 权威断言
|
||||
await expect(page.getByTestId('album-detail-owner-id')).toHaveText(staffId)
|
||||
const after = (await (
|
||||
await page.request.get(`/v1/albums/${albumId}`, {
|
||||
headers: { Authorization: `Bearer ${sessionToken}` }
|
||||
})
|
||||
).json()) as { ownerId: string }
|
||||
expect(after.ownerId).toBe(staffId)
|
||||
})
|
||||
|
||||
test('水印：配置保存 → 任务受理 → 直驱到已完成 → 公开 browse URL 指向水印图', async ({ page }) => {
|
||||
await loginAsAdmin(page)
|
||||
const suffix = await createAlbumViaUi(page)
|
||||
const albumId = await openAlbumDetail(page, suffix)
|
||||
const token = ((await page.getByTestId('album-detail-token').textContent()) ?? '').trim()
|
||||
|
||||
// 真实对象照片先行（任务 total=3，非空相册 autoDone 分支不触发）
|
||||
seedFixture('wm-photos', albumId, adminCredentials().account, '3')
|
||||
|
||||
await page.getByTestId('album-watermark-tab').click()
|
||||
await expect(page.getByTestId('watermark-panel')).toBeVisible()
|
||||
await setSwitchState(page, 'watermark-enabled-switch', true)
|
||||
await page.getByTestId('watermark-text-content').fill(`E2E水印 ${suffix}`)
|
||||
|
||||
// 保存 → 202 受理（v1）→ 任务行进入列表（pending/running）
|
||||
await page.getByTestId('watermark-save-btn').click()
|
||||
await expect(page.locator('.el-message').filter({ hasText: 'v1' })).toBeVisible()
|
||||
const stateTag = page.getByTestId('watermark-jobs-table').locator('[data-state]')
|
||||
await expect(stateTag.first()).toBeVisible()
|
||||
await expect(stateTag.first()).toHaveText(/等待中|进行中/)
|
||||
|
||||
// e2e 无常驻 worker：fixture 直驱 worker dist 服务核心把任务跑到终态
|
||||
// （页面进程独立，轮询不受 execSync 阻塞影响）
|
||||
seedFixture('watermark-run', albumId)
|
||||
|
||||
// UI 3s 轮询翻到已完成；配置卡回显开启
|
||||
await expect(stateTag.first()).toHaveText('已完成')
|
||||
await expect(page.getByTestId('watermark-current-tag')).toBeVisible()
|
||||
|
||||
// 公开侧：album.watermarkEnabled + watermark 行存在 → browse 现签水印键
|
||||
// （SignedUrlResponse 形状：{url, expiresAt}）
|
||||
const res = await page.request.get(`/v1/public/albums/${token}/photos`)
|
||||
expect(res.ok()).toBeTruthy()
|
||||
const body = (await res.json()) as { items: { browse: { url: string } }[] }
|
||||
expect(body.items.length).toBe(3)
|
||||
for (const item of body.items) {
|
||||
expect(item.browse.url).toContain('/watermark.jpg')
|
||||
}
|
||||
})
|
||||
|
||||
test('用量：阈值调小触发告警 → 上调解除；合计与相册表可见', async ({ page }) => {
|
||||
await loginAsAdmin(page)
|
||||
|
||||
// 独立数据：API 建相册 + 大字节照片（2MB > 0.00001GB 阈值），与 UI 顺序解耦
|
||||
const sessionToken = await apiLogin(page)
|
||||
const created = (await (
|
||||
await page.request.post('/v1/albums', {
|
||||
headers: { Authorization: `Bearer ${sessionToken}` },
|
||||
data: {
|
||||
defaultLocale: 'zh-CN',
|
||||
startAt: '2026-10-01T10:00:00.000Z',
|
||||
translations: [{ locale: 'zh-CN', title: `E2E用量相册 ${Date.now().toString(36)}` }]
|
||||
}
|
||||
})
|
||||
).json()) as { id: string }
|
||||
seedFixture('gov-photos', created.id, adminCredentials().account, '2', '2097152')
|
||||
|
||||
await page.goto('/#/system/usage')
|
||||
await expect(page.getByTestId('usage-totals')).toBeVisible()
|
||||
await expect(page.getByTestId('usage-albums-table')).toBeVisible()
|
||||
// 合计已加载（种子照片计入，非空占位）
|
||||
await expect(page.getByTestId('usage-total-photos')).not.toHaveText('-')
|
||||
|
||||
// 阈值调小（perAlbum 0.00001 GB ≈ 10KB < 2MB）→ 即刻评估出未解决告警。
|
||||
// 开关状态感知：共享开发库可能残留上次运行的已存阈值（开关已开）——
|
||||
// 幂等设到目标态而非盲目点击。
|
||||
await page.getByTestId('usage-thresholds-btn').click()
|
||||
await expect(page.getByTestId('thresholds-dialog')).toBeVisible()
|
||||
await setSwitchState(page, 'thresholds-per-album-switch', true)
|
||||
await page.getByTestId('thresholds-per-album-input').locator('input').fill('0.00001')
|
||||
await page.keyboard.press('Enter')
|
||||
await page.getByTestId('thresholds-submit').click()
|
||||
await expect(page.getByTestId('thresholds-dialog')).toBeHidden()
|
||||
|
||||
await expect(
|
||||
page.getByTestId('usage-alerts-table').locator('.alert-row-active').first()
|
||||
).toBeVisible()
|
||||
await expect(
|
||||
page
|
||||
.getByTestId('usage-alerts-table')
|
||||
.locator('.alert-row-active')
|
||||
.first()
|
||||
.getByTestId('alert-state-tag')
|
||||
).toHaveText('未解决')
|
||||
|
||||
// 上调到 100GB（storage 保持关闭=显式清除，避免历史阈值残留干扰）→ 解除
|
||||
await page.getByTestId('usage-thresholds-btn').click()
|
||||
await expect(page.getByTestId('thresholds-dialog')).toBeVisible()
|
||||
await setSwitchState(page, 'thresholds-per-album-switch', true)
|
||||
await setSwitchState(page, 'thresholds-storage-switch', false)
|
||||
await page.getByTestId('thresholds-per-album-input').locator('input').fill('100')
|
||||
await page.keyboard.press('Enter')
|
||||
await page.getByTestId('thresholds-submit').click()
|
||||
await expect(page.getByTestId('thresholds-dialog')).toBeHidden()
|
||||
|
||||
await expect(page.getByTestId('usage-alerts-table').locator('.alert-row-active')).toHaveCount(0)
|
||||
await expect(
|
||||
page.getByTestId('usage-alerts-table').locator('.alert-row-resolved').first()
|
||||
).toBeVisible()
|
||||
})
|
||||
|
||||
test('分享二维码：canvas 非空 + viewer URL + 复制链接', async ({ page, context }) => {
|
||||
await loginAsAdmin(page)
|
||||
const suffix = await createAlbumViaUi(page)
|
||||
await openAlbumDetail(page, suffix)
|
||||
const token = ((await page.getByTestId('album-detail-token').textContent()) ?? '').trim()
|
||||
|
||||
await page.getByTestId('album-share-tab').click()
|
||||
await expect(page.getByTestId('share-panel')).toBeVisible()
|
||||
|
||||
// URL = VITE_VIEWER_BASE + /a/{token}
|
||||
const urlText = ((await page.getByTestId('share-url').textContent()) ?? '').trim()
|
||||
expect(urlText).toBe(`http://127.0.0.1:5175/a/${token}`)
|
||||
|
||||
// canvas 已绘制（空白 canvas 的 dataURL 约几十字节，绘制后远大于 100）
|
||||
const dataUrlLength = await page
|
||||
.getByTestId('share-qr-canvas')
|
||||
.evaluate((canvas: HTMLCanvasElement) => canvas.toDataURL().length)
|
||||
expect(dataUrlLength).toBeGreaterThan(100)
|
||||
|
||||
// 复制 → toast + 剪贴板内容一致（授 chromium 剪贴板权限）
|
||||
await context.grantPermissions(['clipboard-read', 'clipboard-write'])
|
||||
await page.getByTestId('share-copy-btn').click()
|
||||
await expect(page.locator('.el-message').filter({ hasText: '已复制' })).toBeVisible()
|
||||
const clipped = await page.evaluate(() => navigator.clipboard.readText())
|
||||
expect(clipped).toBe(urlText)
|
||||
})
|
||||
@@ -43,19 +43,33 @@ export async function loginAsAdmin(page: Page): Promise<void> {
|
||||
await expect(page).toHaveURL(/\/albums\/manage/, { timeout: 20_000 })
|
||||
}
|
||||
|
||||
/** 直种夹具（seed-fixture.cjs）：staff 账号 / 相册种子照片（幂等） */
|
||||
export function seedFixture(mode: 'staff' | 'photos', ...args: string[]): void {
|
||||
/** 直种夹具（seed-fixture.cjs）：staff 账号 / 相册种子照片 / 治理批量照片 /
|
||||
* 水印旅程真实对象照片 / 水印任务直驱（详见 seed-fixture.cjs 文件头） */
|
||||
export function seedFixture(
|
||||
mode: 'staff' | 'photos' | 'gov-photos' | 'wm-photos' | 'watermark-run',
|
||||
...args: string[]
|
||||
): void {
|
||||
const vars = rootEnv()
|
||||
const databaseUrl = vars.get('DATABASE_URL_CN')
|
||||
if (!databaseUrl) {
|
||||
throw new Error('[admin e2e] 根 .env 缺少 DATABASE_URL_CN')
|
||||
}
|
||||
// @photo/db-cn 绝对路径：apps/admin 不依赖该包，借 services/api 的 node_modules
|
||||
// @photo/db-cn / @photo/storage 绝对路径：apps/admin 不依赖这些包，借
|
||||
// services/api 的 node_modules（node 从 e2e 目录解析不到 workspace 链接）
|
||||
const dbCn = join(repoRoot, 'services', 'api', 'node_modules', '@photo', 'db-cn')
|
||||
const storage = join(repoRoot, 'services', 'api', 'node_modules', '@photo', 'storage')
|
||||
// 全量根 .env 注入（S3_* 供水印对象直写与 worker 直驱；process.env 覆盖
|
||||
// 优先级更高——playwright 进程自身的环境变量优先于文件值）
|
||||
execSync(`node seed-fixture.cjs ${mode} ${args.join(' ')}`, {
|
||||
cwd: fileURLToPath(new URL('.', import.meta.url)),
|
||||
stdio: 'inherit',
|
||||
shell: true,
|
||||
env: { ...process.env, PHOTO_DB_CN: dbCn, DATABASE_URL_CN: databaseUrl }
|
||||
env: {
|
||||
...Object.fromEntries(vars),
|
||||
...process.env,
|
||||
PHOTO_DB_CN: dbCn,
|
||||
PHOTO_STORAGE: storage,
|
||||
DATABASE_URL_CN: databaseUrl
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
+232
-11
@@ -2,24 +2,50 @@
|
||||
// 为什么不用 API 造数：目标照片需要 published/processing_failed 等终态，
|
||||
// 真实链路要 worker 处理流水线；e2e 只验证管理页展示与操作，直插 DB 行
|
||||
// （uploadedAt 置位即可入管理列表，见 services/api listAlbumPhotos 过滤条件）。
|
||||
// 依赖经 PHOTO_DB_CN 环境变量注入 @photo/db-cn 绝对路径（apps/admin 不依赖
|
||||
// 该包，node 从文件位置解析不到；services/api 的 node_modules 里有现成链接）。
|
||||
// 用法：
|
||||
// node seed-fixture.cjs staff <account> <displayName>
|
||||
// node seed-fixture.cjs photos <albumId> <uploaderAccount>
|
||||
// 幂等：账号存在即跳过；照片按 objectKey upsert（同相册重复种不重复建行）。
|
||||
const db_cn = process.env.PHOTO_DB_CN
|
||||
// 依赖经环境变量注入包绝对路径（apps/admin 不依赖这些包，node 从文件位置
|
||||
// 解析不到；services/api 的 node_modules 里有现成链接）：
|
||||
// PHOTO_DB_CN=@photo/db-cn（必填） PHOTO_STORAGE=@photo/storage（水印模式）
|
||||
// 模式：
|
||||
// staff <account> <displayName> 员工账号（不可登录）
|
||||
// photos <albumId> <uploaderAccount> published/failed 各 1 张
|
||||
// gov-photos <albumId> <uploaderAccount> <count> [bytes] 批量隐藏/用量旅程：
|
||||
// N 张 published/ready
|
||||
// DB 直种（含 thumb/browse
|
||||
// 变体行——cn 公开列表计入；
|
||||
// bytes 可调大以跨阈值）
|
||||
// wm-photos <albumId> <uploaderAccount> <count> 水印旅程：N 张已发布
|
||||
// 照片 + 真实 MinIO 对象
|
||||
// （原图/browse/thumb，键
|
||||
// 对齐 worker 发布后形态）
|
||||
// watermark-run <albumId> 直驱 worker dist 的
|
||||
// WatermarkRegenService 把
|
||||
// 最新任务跑到终态（e2e 无
|
||||
// 常驻 worker，同 services/
|
||||
// api/test/watermark.e2e-
|
||||
// spec.ts 直驱模式）
|
||||
// 幂等：账号存在即跳过；照片按确定性 photoId/objectKey upsert（同相册重复种
|
||||
// 不重复建行）；watermark-run 对已 done 的任务返回 skipped 视为成功。
|
||||
/* eslint-disable @typescript-eslint/no-require-imports */
|
||||
const path = require('node:path')
|
||||
const { execSync } = require('node:child_process')
|
||||
const { existsSync, statSync } = require('node:fs')
|
||||
const { createHash } = require('node:crypto')
|
||||
|
||||
const dbCn = process.env.PHOTO_DB_CN
|
||||
const databaseUrl = process.env.DATABASE_URL_CN
|
||||
if (!db_cn || !databaseUrl) {
|
||||
if (!dbCn || !databaseUrl) {
|
||||
console.error('seed-fixture: PHOTO_DB_CN and DATABASE_URL_CN env vars are required')
|
||||
process.exit(1)
|
||||
}
|
||||
|
||||
// CommonJS（node 直跑，无构建步骤）：动态 require 经环境变量注入的包路径
|
||||
// eslint-disable-next-line @typescript-eslint/no-require-imports
|
||||
const { PrismaClient } = require(db_cn)
|
||||
|
||||
const { PrismaClient } = require(dbCn)
|
||||
const prisma = new PrismaClient({ datasources: { db: { url: databaseUrl } } })
|
||||
|
||||
/** worker 包根（sharp / dist 直驱均从这里解析）。 */
|
||||
const workerRoot = path.resolve(__dirname, '..', '..', '..', 'services', 'worker')
|
||||
|
||||
async function seedStaff(account, displayName) {
|
||||
const existing = await prisma.users.findUnique({ where: { account } })
|
||||
if (existing) {
|
||||
@@ -88,12 +114,207 @@ async function seedPhotos(albumId, uploaderAccount) {
|
||||
console.log(`seed-fixture: 2 photos seeded for album ${albumId}`)
|
||||
}
|
||||
|
||||
/** 确定性 photoId（同相册同序号重复种不重复建行；长度/字符集适配 cuid 列）。 */
|
||||
function deterministicPhotoId(scope, index) {
|
||||
return `e2e${createHash('md5').update(`${scope}:${index}`).digest('hex')}`
|
||||
}
|
||||
|
||||
async function findUploader(account) {
|
||||
const uploader = await prisma.users.findUnique({ where: { account } })
|
||||
if (!uploader) {
|
||||
throw new Error(`seed-fixture: uploader "${account}" not found`)
|
||||
}
|
||||
return uploader
|
||||
}
|
||||
|
||||
/**
|
||||
* gov-photos：N 张 published/ready 照片 DB 直种。带 thumb/browse 变体行
|
||||
* （cn 公开列表计入的必要条件——服务端只现签行上的键，不校验对象存在，
|
||||
* 故无需真实对象）；bytes 可调（用量旅程用大值跨 perAlbum 阈值）。
|
||||
*/
|
||||
async function seedGovPhotos(albumId, uploaderAccount, count, bytesEach) {
|
||||
const uploader = await findUploader(uploaderAccount)
|
||||
const total = Math.max(1, Number(count) || 1)
|
||||
const bytes = Math.max(1, Number(bytesEach) || 2048)
|
||||
const now = new Date()
|
||||
for (let i = 0; i < total; i++) {
|
||||
const photoId = deterministicPhotoId(`${albumId}:gov`, i)
|
||||
const objectKey = `e2e-gov/albums/${albumId}/originals/${photoId}.jpg`
|
||||
await prisma.photos.upsert({
|
||||
where: { objectKey },
|
||||
update: { visibility: 'published', processingState: 'ready' },
|
||||
create: {
|
||||
id: photoId,
|
||||
albumId,
|
||||
uploaderId: uploader.id,
|
||||
objectKey,
|
||||
bytes,
|
||||
width: 1200,
|
||||
height: 800,
|
||||
uploadedAt: now,
|
||||
publishedAt: now,
|
||||
processingState: 'ready',
|
||||
visibility: 'published'
|
||||
}
|
||||
})
|
||||
// 变体行（thumb/browse）：公开列表计入 + 现签 URL 可用；对象不落（e2e 不取图）
|
||||
const variants = [
|
||||
{ variant: 'thumb', width: 480, height: 320 },
|
||||
{ variant: 'browse', width: 1200, height: 800 }
|
||||
]
|
||||
for (const v of variants) {
|
||||
await prisma.photo_variants.upsert({
|
||||
where: { photoId_variant: { photoId, variant: v.variant } },
|
||||
update: {},
|
||||
create: {
|
||||
photoId,
|
||||
variant: v.variant,
|
||||
objectKey: `e2e-gov/albums/${albumId}/variants/${photoId}/1/${v.variant}.jpg`,
|
||||
bytes: Math.round(bytes / 4),
|
||||
version: 1,
|
||||
width: v.width,
|
||||
height: v.height
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
console.log(`seed-fixture: ${total} gov photos seeded for album ${albumId} (${bytes} B each)`)
|
||||
}
|
||||
|
||||
/** 测试内生成真实 JPEG（带纹理；与 worker test makeJpeg 同法，水印差异可观测）。 */
|
||||
function makeJpegBuffer(sharp, width, height) {
|
||||
const svg = Buffer.from(
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">` +
|
||||
Array.from(
|
||||
{ length: 12 },
|
||||
(_, i) =>
|
||||
`<rect x="${(i * 83) % width}" y="${(i * 47) % height}" width="${50 + i * 9}" height="${35 + i * 7}" fill="#${(0x50 + i * 7).toString(16).padStart(2, '0')}6030" fill-opacity="0.85"/>`
|
||||
).join('') +
|
||||
'</svg>'
|
||||
)
|
||||
return sharp(svg).jpeg({ quality: 85 }).toBuffer()
|
||||
}
|
||||
|
||||
/**
|
||||
* wm-photos：N 张已发布照片（原图 + browse/thumb 对象与行，形状对齐 worker
|
||||
* 发布后形态——watermark regen 读原图、公开列表需 thumb/browse 行）。
|
||||
* 键布局走 @photo/storage OBJECT_KEY_ROOT 约定（photo-live/dev）。
|
||||
*/
|
||||
async function seedWmPhotos(albumId, uploaderAccount, count) {
|
||||
const storagePath = process.env.PHOTO_STORAGE
|
||||
if (!storagePath) {
|
||||
throw new Error('seed-fixture: PHOTO_STORAGE env var is required for wm-photos')
|
||||
}
|
||||
|
||||
const { OBJECT_KEY_ROOT, createStorageFromEnv } = require(storagePath)
|
||||
|
||||
const sharp = require(path.join(workerRoot, 'node_modules', 'sharp'))
|
||||
const uploader = await findUploader(uploaderAccount)
|
||||
const storage = createStorageFromEnv()
|
||||
const total = Math.max(1, Number(count) || 1)
|
||||
const now = new Date()
|
||||
for (let i = 0; i < total; i++) {
|
||||
const photoId = deterministicPhotoId(`${albumId}:wm`, i)
|
||||
const objectKey = `${OBJECT_KEY_ROOT}/albums/${albumId}/originals/${photoId}.jpg`
|
||||
const browseKey = `${OBJECT_KEY_ROOT}/albums/${albumId}/variants/${photoId}/1/browse.jpg`
|
||||
const thumbKey = `${OBJECT_KEY_ROOT}/albums/${albumId}/variants/${photoId}/1/thumb.jpg`
|
||||
const original = await makeJpegBuffer(sharp, 900, 600)
|
||||
// browse/thumb 与原图同缓冲即可（e2e 断言 URL 指向，不比对变体字节）
|
||||
await storage.put(objectKey, original, 'image/jpeg')
|
||||
await storage.put(browseKey, original, 'image/jpeg')
|
||||
await storage.put(thumbKey, original, 'image/jpeg')
|
||||
await prisma.photos.upsert({
|
||||
where: { objectKey },
|
||||
update: {},
|
||||
create: {
|
||||
id: photoId,
|
||||
albumId,
|
||||
uploaderId: uploader.id,
|
||||
objectKey,
|
||||
bytes: original.length,
|
||||
width: 900,
|
||||
height: 600,
|
||||
uploadedAt: now,
|
||||
publishedAt: now,
|
||||
processingState: 'ready',
|
||||
visibility: 'published'
|
||||
}
|
||||
})
|
||||
const variants = [
|
||||
{ variant: 'thumb', key: thumbKey, width: 480, height: 320 },
|
||||
{ variant: 'browse', key: browseKey, width: 900, height: 600 }
|
||||
]
|
||||
for (const v of variants) {
|
||||
await prisma.photo_variants.upsert({
|
||||
where: { photoId_variant: { photoId, variant: v.variant } },
|
||||
update: {},
|
||||
create: {
|
||||
photoId,
|
||||
variant: v.variant,
|
||||
objectKey: v.key,
|
||||
bytes: original.length,
|
||||
version: 1,
|
||||
width: v.width,
|
||||
height: v.height
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
console.log(`seed-fixture: ${total} wm photos (with real objects) seeded for album ${albumId}`)
|
||||
}
|
||||
|
||||
/**
|
||||
* watermark-run：把相册最新水印任务直驱到终态。e2e 环境无常驻 worker
|
||||
* （Playwright 只起 api + admin dev），借 worker dist 的服务核心直跑——与
|
||||
* services/api/test/watermark.e2e-spec.ts 同一入口（processJob），API 侧
|
||||
* POST 已落好 config/job 行。dist 过期（缺文件或源更新）则先 tsc 构建。
|
||||
*/
|
||||
async function runWatermark(albumId) {
|
||||
const distService = path.join(workerRoot, 'dist', 'watermark.service.js')
|
||||
const srcService = path.join(workerRoot, 'src', 'watermark.service.ts')
|
||||
const stale =
|
||||
!existsSync(distService) ||
|
||||
(existsSync(srcService) && statSync(srcService).mtimeMs > statSync(distService).mtimeMs)
|
||||
if (stale) {
|
||||
console.log('seed-fixture: building services/worker dist (stale or missing)...')
|
||||
execSync('npx tsc -p tsconfig.build.json', { cwd: workerRoot, stdio: 'inherit' })
|
||||
}
|
||||
|
||||
const { WatermarkRegenService } = require(distService)
|
||||
const storagePath = process.env.PHOTO_STORAGE
|
||||
if (!storagePath) {
|
||||
throw new Error('seed-fixture: PHOTO_STORAGE env var is required for watermark-run')
|
||||
}
|
||||
|
||||
const { createStorageFromEnv } = require(storagePath)
|
||||
const storage = createStorageFromEnv()
|
||||
const job = await prisma.watermark_jobs.findFirst({
|
||||
where: { albumId },
|
||||
orderBy: { createdAt: 'desc' }
|
||||
})
|
||||
if (!job) {
|
||||
throw new Error(`seed-fixture: no watermark job found for album ${albumId}`)
|
||||
}
|
||||
const service = new WatermarkRegenService(prisma, storage)
|
||||
const outcome = await service.processJob(job.id)
|
||||
console.log(`seed-fixture: watermark job ${job.id} → ${outcome}`)
|
||||
if (outcome === 'failed') {
|
||||
throw new Error('seed-fixture: watermark job failed (task-level abort)')
|
||||
}
|
||||
}
|
||||
|
||||
async function main() {
|
||||
const [mode, argA, argB] = process.argv.slice(2)
|
||||
const [mode, argA, argB, argC, argD] = process.argv.slice(2)
|
||||
if (mode === 'staff') {
|
||||
await seedStaff(argA, argB)
|
||||
} else if (mode === 'photos') {
|
||||
await seedPhotos(argA, argB)
|
||||
} else if (mode === 'gov-photos') {
|
||||
await seedGovPhotos(argA, argB, argC, argD)
|
||||
} else if (mode === 'wm-photos') {
|
||||
await seedWmPhotos(argA, argB, argC)
|
||||
} else if (mode === 'watermark-run') {
|
||||
await runWatermark(argA)
|
||||
} else {
|
||||
throw new Error(`seed-fixture: unknown mode "${mode}"`)
|
||||
}
|
||||
|
||||
@@ -31,6 +31,7 @@
|
||||
"ohash": "^2.0.11",
|
||||
"pinia": "^3.0.3",
|
||||
"pinia-plugin-persistedstate": "^4.3.0",
|
||||
"qrcode": "^1.5.4",
|
||||
"tailwindcss": "^4.1.14",
|
||||
"vue": "3.5.22",
|
||||
"vue-draggable-plus": "^0.6.0",
|
||||
@@ -41,6 +42,7 @@
|
||||
"@eslint/js": "^9.9.1",
|
||||
"@playwright/test": "^1.48.0",
|
||||
"@types/node": "^24.0.5",
|
||||
"@types/qrcode": "^1.5.6",
|
||||
"@typescript-eslint/eslint-plugin": "^8.3.0",
|
||||
"@typescript-eslint/parser": "^8.3.0",
|
||||
"@vitejs/plugin-vue": "^6.0.1",
|
||||
|
||||
@@ -121,3 +121,34 @@ export function fetchUpdatePhotoVisibility(photoId: string, visibility: 'hidden'
|
||||
export function fetchDeletePhoto(photoId: string) {
|
||||
return request.del<void>({ url: `/v1/photos/${photoId}` })
|
||||
}
|
||||
|
||||
/** 批量隐藏（P4a A16：逐项结果部分成功；单批上限 200） */
|
||||
export function fetchHidePhotosBatch(albumId: string, photoIds: string[]) {
|
||||
return request.post<Api.Album.BatchHideResult>({
|
||||
url: `/v1/albums/${albumId}/photos/hide-batch`,
|
||||
data: { photoIds }
|
||||
})
|
||||
}
|
||||
|
||||
/** 相册负责人交接（P4a A17：仅 admin；历史上传人不变） */
|
||||
export function fetchTransferAlbum(albumId: string, data: Api.Album.TransferPayload) {
|
||||
return request.post<Api.Album.Detail>({
|
||||
url: `/v1/admin/albums/${albumId}/transfer`,
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
/** 水印配置与任务状态（current 从未配置为 null） */
|
||||
export function fetchWatermarkJobs(albumId: string) {
|
||||
return request.get<Api.Album.WatermarkJobsStatus>({
|
||||
url: `/v1/albums/${albumId}/watermark-jobs`
|
||||
})
|
||||
}
|
||||
|
||||
/** 保存水印配置并发起历史重生成（202 受理；进度经 GET 轮询） */
|
||||
export function fetchCreateWatermarkJob(albumId: string, config: Api.Album.WatermarkConfig) {
|
||||
return request.post<Api.Album.WatermarkJobCreated>({
|
||||
url: `/v1/albums/${albumId}/watermark-jobs`,
|
||||
data: config
|
||||
})
|
||||
}
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
/**
|
||||
* 用量统计接口（对齐 @photo/contracts tags [admin]：getUsageSummary /
|
||||
* updateUsageThresholds，P4a Task 5 / A23 后台侧）
|
||||
*
|
||||
* - summary 为实时聚合（相册按 totalBytes 降序）+ 阈值 + 告警列表
|
||||
* （未解决在前，含近期已解除）
|
||||
* - PUT thresholds：字段缺省=保持不变，显式 null=清除该维度（告警停用）；
|
||||
* 服务端保存后即刻重新评估（超阈产生新告警/阈值上调解除旧告警）
|
||||
*/
|
||||
import request from '@/utils/http'
|
||||
|
||||
/** 用量汇总（相册聚合 + 合计 + 阈值 + 告警） */
|
||||
export function fetchUsageSummary() {
|
||||
return request.get<Api.Usage.SummaryResponse>({ url: '/v1/admin/usage/summary' })
|
||||
}
|
||||
|
||||
/** 更新用量阈值（修改后服务端即刻重新评估告警） */
|
||||
export function fetchUpdateUsageThresholds(data: Api.Usage.ThresholdsUpdatePayload) {
|
||||
return request.put<Api.Usage.Thresholds>({
|
||||
url: '/v1/admin/usage/thresholds',
|
||||
data
|
||||
})
|
||||
}
|
||||
Vendored
+10
@@ -1,5 +1,15 @@
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
// Vite 环境变量类型增补（vite/client 的 ImportMetaEnv 声明合并）
|
||||
interface ImportMetaEnv {
|
||||
/** viewer 部署基址（分享链接卡；缺省兜底 http://127.0.0.1:5175） */
|
||||
readonly VITE_VIEWER_BASE?: string
|
||||
}
|
||||
|
||||
interface ImportMeta {
|
||||
readonly env: ImportMetaEnv
|
||||
}
|
||||
|
||||
declare module 'nprogress'
|
||||
|
||||
declare module 'crypto-js'
|
||||
|
||||
@@ -233,7 +233,8 @@
|
||||
"system": {
|
||||
"title": "Accounts & Sync",
|
||||
"users": "Account Management",
|
||||
"userSync": "User Sync"
|
||||
"userSync": "User Sync",
|
||||
"usage": "Usage"
|
||||
},
|
||||
"albums": {
|
||||
"title": "Albums",
|
||||
@@ -339,6 +340,8 @@
|
||||
"tabPhotos": "Photos",
|
||||
"tabMembers": "Members",
|
||||
"tabCategories": "Categories",
|
||||
"tabWatermark": "Watermark",
|
||||
"tabShare": "Share",
|
||||
"loadFailed": "Failed to load album",
|
||||
"retry": "Retry",
|
||||
"fieldTitle": "Title",
|
||||
@@ -348,7 +351,10 @@
|
||||
"fieldStartAt": "Start",
|
||||
"fieldEndAt": "End",
|
||||
"fieldCreatedAt": "Created",
|
||||
"fieldUpdatedAt": "Updated"
|
||||
"fieldUpdatedAt": "Updated",
|
||||
"fieldStatsSyncedAt": "Stats Synced At",
|
||||
"statsNotSynced": "Not synced yet",
|
||||
"fieldOwnerId": "Owner"
|
||||
},
|
||||
"banner": {
|
||||
"kind": "Asset Kind",
|
||||
@@ -438,7 +444,114 @@
|
||||
"hidden": "Photo hidden",
|
||||
"restored": "Photo restored",
|
||||
"deleted": "Photo deleted",
|
||||
"empty": "No photos"
|
||||
"empty": "No photos",
|
||||
"colLikeCount": "Likes",
|
||||
"batchHide": "Batch Hide",
|
||||
"batchHideConfirm": "Batch hide the {count} selected photos? They become invisible to the public immediately.",
|
||||
"batchResult": "Batch hide finished: {ok} succeeded / {fail} failed",
|
||||
"batchResultAllOk": "Batch hide finished: {ok} succeeded",
|
||||
"batchFailuresTitle": "Failures (per item)",
|
||||
"batchColPhoto": "Photo ID",
|
||||
"batchColReason": "Reason"
|
||||
},
|
||||
"transfer": {
|
||||
"entry": "Transfer Owner",
|
||||
"title": "Transfer Album Owner",
|
||||
"targetLabel": "New Owner",
|
||||
"searchPlaceholder": "Type an account prefix (min 2 chars) to search",
|
||||
"keepLabel": "Keep as collaborator",
|
||||
"keepHint": "On: the previous owner becomes a collaborator; Off: removed from members",
|
||||
"historyHint": "Transfer only moves the owner role: upload attribution of existing photos stays unchanged.",
|
||||
"submit": "Transfer",
|
||||
"success": "Owner transferred"
|
||||
},
|
||||
"watermark": {
|
||||
"loadFailed": "Failed to load watermark config",
|
||||
"retry": "Retry",
|
||||
"currentVersion": "Current Config",
|
||||
"versionTag": "v{version} · {state}",
|
||||
"neverConfigured": "Never configured",
|
||||
"enabled": "Enabled",
|
||||
"disabled": "Disabled",
|
||||
"switchLabel": "Browse watermark",
|
||||
"positionLabel": "Position",
|
||||
"position_topLeft": "Top Left",
|
||||
"position_topRight": "Top Right",
|
||||
"position_bottomLeft": "Bottom Left",
|
||||
"position_bottomRight": "Bottom Right",
|
||||
"position_center": "Center",
|
||||
"opacityLabel": "Opacity",
|
||||
"scaleLabel": "Scale",
|
||||
"textContentLabel": "Text",
|
||||
"textContentPlaceholder": "Leave empty for no text",
|
||||
"fontSizeLabel": "Font Size",
|
||||
"save": "Save & Regenerate",
|
||||
"saveHint": "Saving creates a new config version and starts regeneration for all existing photos (atomic switch — old images stay available until done)",
|
||||
"accepted": "Config saved (v{version}), regeneration job accepted",
|
||||
"previewTitle": "Test Watermark (schematic)",
|
||||
"previewHint": "CSS overlay schematic; actual result follows the regenerated browse images",
|
||||
"jobsTitle": "Version History",
|
||||
"regen": "Regenerate",
|
||||
"colVersion": "Version",
|
||||
"colState": "State",
|
||||
"colProgress": "Progress",
|
||||
"colCreatedAt": "Created",
|
||||
"state_pending": "Pending",
|
||||
"state_running": "Running",
|
||||
"state_done": "Done",
|
||||
"state_failed": "Failed",
|
||||
"failedCount": "{count} failed",
|
||||
"jobsEmpty": "No regeneration jobs"
|
||||
},
|
||||
"share": {
|
||||
"viewerUrl": "Viewer URL",
|
||||
"copy": "Copy Link",
|
||||
"hint": "Guests open the public album page via this link; it stops working when \"Publicly visible\" is off.",
|
||||
"qrTitle": "Scan to open",
|
||||
"publicOffHint": "\"Publicly visible\" is off for this album — the viewer link is currently unreachable"
|
||||
}
|
||||
},
|
||||
"usage": {
|
||||
"loadFailed": "Failed to load usage",
|
||||
"retry": "Retry",
|
||||
"totals": {
|
||||
"photoCount": "Total Photos",
|
||||
"totalBytes": "Total Storage",
|
||||
"thresholds": "Alert Thresholds"
|
||||
},
|
||||
"albums": {
|
||||
"title": "Album Usage",
|
||||
"colTitle": "Album",
|
||||
"colPhotoCount": "Photos",
|
||||
"colOriginal": "Originals",
|
||||
"colVariant": "Variants",
|
||||
"colTotal": "Total",
|
||||
"empty": "No albums"
|
||||
},
|
||||
"thresholds": {
|
||||
"entry": "Thresholds",
|
||||
"title": "Usage Alert Thresholds",
|
||||
"storageLabel": "Storage threshold",
|
||||
"storageShort": "Storage",
|
||||
"perAlbumLabel": "Per-album threshold",
|
||||
"perAlbumShort": "Per album",
|
||||
"off": "Not set",
|
||||
"hint": "Turning a switch off clears that threshold (alerts disabled); saving re-evaluates immediately — new alerts appear when exceeded, raising a threshold resolves old alerts.",
|
||||
"submit": "Save",
|
||||
"saved": "Thresholds saved"
|
||||
},
|
||||
"alerts": {
|
||||
"title": "Alerts",
|
||||
"colState": "State",
|
||||
"colKind": "Kind",
|
||||
"colMessage": "Message",
|
||||
"colCreatedAt": "Raised",
|
||||
"colResolvedAt": "Resolved",
|
||||
"active": "Active",
|
||||
"resolved": "Resolved",
|
||||
"kind_storage": "Storage",
|
||||
"kind_perAlbum": "Per album",
|
||||
"empty": "No alerts"
|
||||
}
|
||||
},
|
||||
"usersManage": {
|
||||
@@ -594,6 +707,7 @@
|
||||
"MEMBER_CONFLICT": "This user is already a member",
|
||||
"ALBUM_NOT_FOUND": "Album not found or not visible",
|
||||
"PHOTO_NOT_FOUND": "Photo not found",
|
||||
"PHOTO_NOT_PUBLIC": "Photo state cannot be hidden (not published)",
|
||||
"UPLOAD_VERIFY_FAILED": "Upload verification failed, please retry",
|
||||
"UPLOAD_SESSION_CONFLICT": "Upload session conflict, please start over",
|
||||
"ALBUM_UPLOAD_DISABLED": "Upload is disabled for this album"
|
||||
|
||||
@@ -233,7 +233,8 @@
|
||||
"system": {
|
||||
"title": "账号与同步",
|
||||
"users": "账号管理",
|
||||
"userSync": "用户同步"
|
||||
"userSync": "用户同步",
|
||||
"usage": "用量统计"
|
||||
},
|
||||
"albums": {
|
||||
"title": "相册管理",
|
||||
@@ -339,6 +340,8 @@
|
||||
"tabPhotos": "照片管理",
|
||||
"tabMembers": "成员管理",
|
||||
"tabCategories": "分类管理",
|
||||
"tabWatermark": "水印管理",
|
||||
"tabShare": "分享",
|
||||
"loadFailed": "相册加载失败",
|
||||
"retry": "重试",
|
||||
"fieldTitle": "标题",
|
||||
@@ -348,7 +351,10 @@
|
||||
"fieldStartAt": "开始时间",
|
||||
"fieldEndAt": "结束时间",
|
||||
"fieldCreatedAt": "创建时间",
|
||||
"fieldUpdatedAt": "更新时间"
|
||||
"fieldUpdatedAt": "更新时间",
|
||||
"fieldStatsSyncedAt": "统计同步时间",
|
||||
"statsNotSynced": "尚无回传",
|
||||
"fieldOwnerId": "负责人"
|
||||
},
|
||||
"banner": {
|
||||
"kind": "资产类型",
|
||||
@@ -438,7 +444,114 @@
|
||||
"hidden": "照片已隐藏",
|
||||
"restored": "照片已恢复发布",
|
||||
"deleted": "照片已删除",
|
||||
"empty": "暂无照片"
|
||||
"empty": "暂无照片",
|
||||
"colLikeCount": "点赞数",
|
||||
"batchHide": "批量隐藏",
|
||||
"batchHideConfirm": "确定批量隐藏选中的 {count} 张照片？隐藏后公开端即刻不可见。",
|
||||
"batchResult": "批量隐藏完成：成功 {ok} 张 / 失败 {fail} 张",
|
||||
"batchResultAllOk": "批量隐藏完成：成功 {ok} 张",
|
||||
"batchFailuresTitle": "失败明细（逐项原因）",
|
||||
"batchColPhoto": "照片 ID",
|
||||
"batchColReason": "原因"
|
||||
},
|
||||
"transfer": {
|
||||
"entry": "负责人交接",
|
||||
"title": "相册负责人交接",
|
||||
"targetLabel": "新负责人",
|
||||
"searchPlaceholder": "输入账号前缀（至少 2 字符）搜索",
|
||||
"keepLabel": "保留原负责人",
|
||||
"keepHint": "开启则原负责人转为协作者，关闭则移出成员表",
|
||||
"historyHint": "交接仅转移负责人角色：历史照片的上传人保持不变。",
|
||||
"submit": "交接",
|
||||
"success": "负责人已交接"
|
||||
},
|
||||
"watermark": {
|
||||
"loadFailed": "水印配置加载失败",
|
||||
"retry": "重试",
|
||||
"currentVersion": "当前配置",
|
||||
"versionTag": "v{version} · {state}",
|
||||
"neverConfigured": "从未配置",
|
||||
"enabled": "已开启",
|
||||
"disabled": "已关闭",
|
||||
"switchLabel": "浏览图水印",
|
||||
"positionLabel": "位置",
|
||||
"position_topLeft": "左上",
|
||||
"position_topRight": "右上",
|
||||
"position_bottomLeft": "左下",
|
||||
"position_bottomRight": "右下",
|
||||
"position_center": "居中",
|
||||
"opacityLabel": "不透明度",
|
||||
"scaleLabel": "尺寸占比",
|
||||
"textContentLabel": "文字内容",
|
||||
"textContentPlaceholder": "留空则不绘制文字",
|
||||
"fontSizeLabel": "字号",
|
||||
"save": "保存并发起重生成",
|
||||
"saveHint": "保存即创建新配置版本，并为全部历史照片发起重生成（原子切换，完成前旧图可用）",
|
||||
"accepted": "配置已保存（v{version}），重生成任务已受理",
|
||||
"previewTitle": "测试水印（示意预览）",
|
||||
"previewHint": "CSS 叠加示意，实际效果以重生成后的浏览图为准",
|
||||
"jobsTitle": "版本历史",
|
||||
"regen": "发起重生成",
|
||||
"colVersion": "版本",
|
||||
"colState": "状态",
|
||||
"colProgress": "进度",
|
||||
"colCreatedAt": "创建时间",
|
||||
"state_pending": "等待中",
|
||||
"state_running": "进行中",
|
||||
"state_done": "已完成",
|
||||
"state_failed": "已失败",
|
||||
"failedCount": "失败 {count} 张",
|
||||
"jobsEmpty": "暂无重生成任务"
|
||||
},
|
||||
"share": {
|
||||
"viewerUrl": "观众端链接",
|
||||
"copy": "复制链接",
|
||||
"hint": "观众经此链接访问相册公开页；关闭「公开可见」开关后链接失效。",
|
||||
"qrTitle": "扫码打开",
|
||||
"publicOffHint": "该相册已关闭「公开可见」，观众端链接当前不可访问"
|
||||
}
|
||||
},
|
||||
"usage": {
|
||||
"loadFailed": "用量加载失败",
|
||||
"retry": "重试",
|
||||
"totals": {
|
||||
"photoCount": "照片总数",
|
||||
"totalBytes": "存储总量",
|
||||
"thresholds": "告警阈值"
|
||||
},
|
||||
"albums": {
|
||||
"title": "相册用量",
|
||||
"colTitle": "相册",
|
||||
"colPhotoCount": "照片数",
|
||||
"colOriginal": "原图",
|
||||
"colVariant": "变体",
|
||||
"colTotal": "合计",
|
||||
"empty": "暂无相册"
|
||||
},
|
||||
"thresholds": {
|
||||
"entry": "阈值设置",
|
||||
"title": "用量告警阈值",
|
||||
"storageLabel": "全库存储阈值",
|
||||
"storageShort": "全库",
|
||||
"perAlbumLabel": "单相册阈值",
|
||||
"perAlbumShort": "单相册",
|
||||
"off": "未设置",
|
||||
"hint": "开关关闭即清除该阈值（告警停用）；保存后立即重新评估——超阈产生新告警、阈值上调解除旧告警。",
|
||||
"submit": "保存",
|
||||
"saved": "阈值已保存"
|
||||
},
|
||||
"alerts": {
|
||||
"title": "告警列表",
|
||||
"colState": "状态",
|
||||
"colKind": "维度",
|
||||
"colMessage": "描述",
|
||||
"colCreatedAt": "产生时间",
|
||||
"colResolvedAt": "解除时间",
|
||||
"active": "未解决",
|
||||
"resolved": "已解决",
|
||||
"kind_storage": "全库存储",
|
||||
"kind_perAlbum": "单相册",
|
||||
"empty": "暂无告警"
|
||||
}
|
||||
},
|
||||
"usersManage": {
|
||||
@@ -594,6 +707,7 @@
|
||||
"MEMBER_CONFLICT": "该用户已是相册成员",
|
||||
"ALBUM_NOT_FOUND": "相册不存在或不可见",
|
||||
"PHOTO_NOT_FOUND": "照片不存在",
|
||||
"PHOTO_NOT_PUBLIC": "照片状态不可隐藏（非已发布）",
|
||||
"UPLOAD_VERIFY_FAILED": "上传核验失败，请重试",
|
||||
"UPLOAD_SESSION_CONFLICT": "上传会话状态冲突，请重新开始",
|
||||
"ALBUM_UPLOAD_DISABLED": "该相册已关闭上传"
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/**
|
||||
* 账号治理路由（P4a Task 8：账号管理 + 用户同步）
|
||||
* 账号治理路由（P4a Task 8：账号管理 + 用户同步；Task 9：用量统计）
|
||||
*/
|
||||
import { AppRouteRecord } from '@/types/router'
|
||||
|
||||
@@ -31,6 +31,16 @@ export const systemRoutes: AppRouteRecord = {
|
||||
icon: 'ri:refresh-line',
|
||||
keepAlive: false
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'usage',
|
||||
name: 'SystemUsage',
|
||||
component: '/system/usage',
|
||||
meta: {
|
||||
title: 'menus.system.usage',
|
||||
icon: 'ri:pie-chart-line',
|
||||
keepAlive: false
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Vendored
+71
@@ -44,6 +44,8 @@ declare namespace Api {
|
||||
translations: Translation[]
|
||||
createdAt: string
|
||||
updatedAt: string
|
||||
/** 统计副本最近同步时间（P2 A27 ov→cn 快照应用时刻；null=尚无回传） */
|
||||
statsSyncedAt: string | null
|
||||
}
|
||||
|
||||
/** 分类（相册详情内嵌，按 sortOrder 升序） */
|
||||
@@ -214,5 +216,74 @@ declare namespace Api {
|
||||
interface PhotoVisibilityUpdatePayload {
|
||||
visibility: 'hidden' | 'published'
|
||||
}
|
||||
|
||||
/** 批量隐藏单项结果（P4a A16：逐项部分成功语义） */
|
||||
interface BatchHideItem {
|
||||
photoId: string
|
||||
ok: boolean
|
||||
/** ok=false 时必有（PHOTO_NOT_PUBLIC / PHOTO_NOT_FOUND …） */
|
||||
code?: string
|
||||
}
|
||||
|
||||
/** 批量隐藏结果（results 与请求 photoIds 同序） */
|
||||
interface BatchHideResult {
|
||||
results: BatchHideItem[]
|
||||
}
|
||||
|
||||
/** 负责人交接请求（A17：owner 转移、历史上传人不变） */
|
||||
interface TransferPayload {
|
||||
targetUserId: string
|
||||
keepAsCollaborator: boolean
|
||||
}
|
||||
|
||||
/** 水印位置（契约 WatermarkConfig.position） */
|
||||
type WatermarkPosition = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'center'
|
||||
|
||||
/** 文字水印参数（SVG 渲染实现） */
|
||||
interface WatermarkTextConfig {
|
||||
content: string
|
||||
fontSize?: number
|
||||
}
|
||||
|
||||
/** 水印配置（创建请求与当前配置响应共用；enabled=false 其余字段被忽略） */
|
||||
interface WatermarkConfig {
|
||||
enabled: boolean
|
||||
position?: WatermarkPosition
|
||||
opacity?: number
|
||||
scalePercent?: number
|
||||
text?: WatermarkTextConfig
|
||||
}
|
||||
|
||||
/** 水印任务受理结果（202；configVersion 即本次保存版本） */
|
||||
interface WatermarkJobCreated {
|
||||
jobId: string
|
||||
configVersion: number
|
||||
}
|
||||
|
||||
type WatermarkJobState = 'pending' | 'running' | 'done' | 'failed'
|
||||
|
||||
/** 历史重生成任务条目（进度供前端轮询） */
|
||||
interface WatermarkJob {
|
||||
jobId: string
|
||||
configVersion: number
|
||||
state: WatermarkJobState
|
||||
progress: number
|
||||
total: number
|
||||
failed: number
|
||||
errorCode?: string
|
||||
createdAt: string
|
||||
}
|
||||
|
||||
/** 当前生效配置（从未配置为 null，watermarkVersion=0） */
|
||||
interface WatermarkCurrent {
|
||||
configVersion: number
|
||||
config: WatermarkConfig
|
||||
}
|
||||
|
||||
/** 水印配置与任务状态 */
|
||||
interface WatermarkJobsStatus {
|
||||
current: WatermarkCurrent | null
|
||||
jobs: WatermarkJob[]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Vendored
+69
@@ -0,0 +1,69 @@
|
||||
/**
|
||||
* 用量统计域接口类型（对齐 @photo/contracts openapi.yaml tags [admin]：
|
||||
* getUsageSummary / updateUsageThresholds，P4a Task 5 / A23 后台侧）
|
||||
*
|
||||
* 与 api.d.ts 同用全局 Api 命名空间（declare namespace 自动合并）。
|
||||
* 契约要点：
|
||||
* - int64 字段经 openapi-typescript 生成 number（BigInt 运输决策见
|
||||
* services/api usage.dto；前端仅展示与 GB 换算，均在安全整数范围内）
|
||||
* - thresholds null 表示该维度未设置（告警停用）；更新载荷字段缺省=保持
|
||||
* 不变，显式 null=清除
|
||||
* - 告警超阈写入一次直到回落（kind+albumId 活跃告警唯一），resolvedAt
|
||||
* 非空为已解除
|
||||
*
|
||||
* @module types/api/usage
|
||||
*/
|
||||
|
||||
declare namespace Api {
|
||||
/** 用量域 */
|
||||
namespace Usage {
|
||||
/** 单相册用量聚合（实时 SUM） */
|
||||
interface AlbumItem {
|
||||
albumId: string
|
||||
title: string
|
||||
photoCount: number
|
||||
originalBytes: number
|
||||
variantBytes: number
|
||||
totalBytes: number
|
||||
}
|
||||
|
||||
/** 全库用量合计 */
|
||||
interface Totals {
|
||||
photoCount: number
|
||||
totalBytes: number
|
||||
}
|
||||
|
||||
/** 用量阈值（null = 未设置/停用） */
|
||||
interface Thresholds {
|
||||
storageBytes: number | null
|
||||
perAlbumBytes: number | null
|
||||
}
|
||||
|
||||
/** 阈值更新载荷（缺省=不变，显式 null=清除） */
|
||||
interface ThresholdsUpdatePayload {
|
||||
storageBytes?: number | null
|
||||
perAlbumBytes?: number | null
|
||||
}
|
||||
|
||||
/** 告警维度 */
|
||||
type AlertKind = 'storage' | 'perAlbum'
|
||||
|
||||
/** 阈值告警条目 */
|
||||
interface AlertItem {
|
||||
id: string
|
||||
kind: AlertKind
|
||||
albumId: string | null
|
||||
message: string
|
||||
createdAt: string
|
||||
resolvedAt: string | null
|
||||
}
|
||||
|
||||
/** 用量汇总响应 */
|
||||
interface SummaryResponse {
|
||||
albums: AlbumItem[]
|
||||
totals: Totals
|
||||
thresholds: Thresholds
|
||||
alerts: AlertItem[]
|
||||
}
|
||||
}
|
||||
}
|
||||
+2
@@ -80,11 +80,13 @@ declare module 'vue' {
|
||||
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
|
||||
ElOption: typeof import('element-plus/es')['ElOption']
|
||||
ElPopover: typeof import('element-plus/es')['ElPopover']
|
||||
ElProgress: typeof import('element-plus/es')['ElProgress']
|
||||
ElRadio: typeof import('element-plus/es')['ElRadio']
|
||||
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
|
||||
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
|
||||
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
|
||||
ElSelect: typeof import('element-plus/es')['ElSelect']
|
||||
ElSlider: typeof import('element-plus/es')['ElSlider']
|
||||
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
|
||||
ElSwitch: typeof import('element-plus/es')['ElSwitch']
|
||||
ElTable: typeof import('element-plus/es')['ElTable']
|
||||
|
||||
@@ -0,0 +1,68 @@
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import { indexOfPhotoId, localizeBatchHideCode, summarizeBatchHideResults } from './batchHide'
|
||||
|
||||
/** 构造管理照片行（仅批量逻辑消费的字段） */
|
||||
function photoOf(photoId: string): Api.Album.AdminPhoto {
|
||||
return {
|
||||
photoId,
|
||||
albumId: 'a1',
|
||||
categoryId: null,
|
||||
uploaderId: 'u1',
|
||||
visibility: 'published',
|
||||
processingState: 'ready',
|
||||
bytes: 1024,
|
||||
width: 100,
|
||||
height: 80,
|
||||
shotAt: null,
|
||||
uploadedAt: '2026-09-01T00:00:00.000Z',
|
||||
publishedAt: '2026-09-01T00:00:00.000Z',
|
||||
likeCount: 0,
|
||||
uploader: { userId: 'u1', account: 'staff', displayName: 'Staff' }
|
||||
}
|
||||
}
|
||||
|
||||
describe('summarizeBatchHideResults 批量隐藏结果归集', () => {
|
||||
it('部分成功：计数与失败明细逐项对应（缺 code 兜底 UNKNOWN）', () => {
|
||||
const summary = summarizeBatchHideResults([
|
||||
{ photoId: 'p1', ok: true },
|
||||
{ photoId: 'p2', ok: false, code: 'PHOTO_NOT_PUBLIC' },
|
||||
{ photoId: 'p3', ok: true },
|
||||
{ photoId: 'p4', ok: false }
|
||||
])
|
||||
expect(summary.okCount).toBe(2)
|
||||
expect(summary.failCount).toBe(2)
|
||||
expect(summary.failures).toEqual([
|
||||
{ photoId: 'p2', code: 'PHOTO_NOT_PUBLIC' },
|
||||
{ photoId: 'p4', code: 'UNKNOWN' }
|
||||
])
|
||||
})
|
||||
|
||||
it('全部成功：failures 为空（toast 走 AllOk 文案分支）', () => {
|
||||
const summary = summarizeBatchHideResults([
|
||||
{ photoId: 'p1', ok: true },
|
||||
{ photoId: 'p2', ok: true }
|
||||
])
|
||||
expect(summary.okCount).toBe(2)
|
||||
expect(summary.failCount).toBe(0)
|
||||
expect(summary.failures).toEqual([])
|
||||
})
|
||||
})
|
||||
|
||||
describe('localizeBatchHideCode 失败码本地化', () => {
|
||||
it('apiMsg 有词条返回译文；未知码原样返回', () => {
|
||||
const dict: Record<string, string> = {
|
||||
'apiMsg.PHOTO_NOT_PUBLIC': '照片状态不可隐藏（非已发布）'
|
||||
}
|
||||
const t = (key: string) => dict[key] ?? key
|
||||
expect(localizeBatchHideCode(t, 'PHOTO_NOT_PUBLIC')).toBe('照片状态不可隐藏（非已发布）')
|
||||
expect(localizeBatchHideCode(t, 'SOME_FUTURE_CODE')).toBe('SOME_FUTURE_CODE')
|
||||
})
|
||||
})
|
||||
|
||||
describe('indexOfPhotoId 行内回显定位', () => {
|
||||
it('命中返回索引；不在当前页返回 -1（换页/过滤竞态兜底）', () => {
|
||||
const items = [photoOf('p1'), photoOf('p2'), photoOf('p3')]
|
||||
expect(indexOfPhotoId(items, 'p2')).toBe(1)
|
||||
expect(indexOfPhotoId(items, 'pX')).toBe(-1)
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,47 @@
|
||||
/**
|
||||
* 批量隐藏结果汇总（P4a A16 逐项部分成功语义，纯函数供 vitest 覆盖）
|
||||
*
|
||||
* - 汇总：成功/失败计数 + 失败明细（photoId + 错误码）——toast 文案与
|
||||
* 失败详情弹窗共用同一份归集结果
|
||||
* - 错误码本地化：apiMsg 有词条用词条（PHOTO_NOT_PUBLIC/PHOTO_NOT_FOUND），
|
||||
* 未知码原样展示（契约 code 为开放枚举，服务端后续扩充不破前端）
|
||||
* - 行内回显归集：结果 photoId → 列表行索引（shallowRef 列表整行替换用）
|
||||
*/
|
||||
import type { useI18n } from 'vue-i18n'
|
||||
|
||||
/** 批量隐藏结果归集 */
|
||||
export interface BatchHideSummary {
|
||||
/** 成功项数 */
|
||||
okCount: number
|
||||
/** 失败项数 */
|
||||
failCount: number
|
||||
/** 失败明细（与结果同序） */
|
||||
failures: Array<{ photoId: string; code: string }>
|
||||
}
|
||||
|
||||
/** 逐项结果 → 汇总（ok 计成功；ok=false 收 code，缺 code 兜底 UNKNOWN） */
|
||||
export function summarizeBatchHideResults(results: Api.Album.BatchHideItem[]): BatchHideSummary {
|
||||
const failures: BatchHideSummary['failures'] = []
|
||||
let okCount = 0
|
||||
for (const item of results) {
|
||||
if (item.ok) {
|
||||
okCount += 1
|
||||
} else {
|
||||
failures.push({ photoId: item.photoId, code: item.code ?? 'UNKNOWN' })
|
||||
}
|
||||
}
|
||||
return { okCount, failCount: failures.length, failures }
|
||||
}
|
||||
|
||||
/** 失败码 → 本地化文案（apiMsg 词条优先，未知码原样；t 为 i18n 翻译函数） */
|
||||
export function localizeBatchHideCode(t: ReturnType<typeof useI18n>['t'], code: string): string {
|
||||
const key = `apiMsg.${code}`
|
||||
const text = t(key)
|
||||
// vue-i18n 缺词条时回退键名本身（apiMsg.${code}）——非词条原样展示 code
|
||||
return text === key ? code : text
|
||||
}
|
||||
|
||||
/** 结果 photoId → 列表行索引（不在当前页的结果忽略——换页/过滤竞态兜底） */
|
||||
export function indexOfPhotoId(items: Api.Album.AdminPhoto[], photoId: string): number {
|
||||
return items.findIndex((item) => item.photoId === photoId)
|
||||
}
|
||||
@@ -11,10 +11,12 @@ export function formatDateTime(iso: string | null | undefined): string {
|
||||
return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`
|
||||
}
|
||||
|
||||
/** 字节数 → 人类可读 */
|
||||
/** 字节数 → 人类可读（B/KB/MB/GB/TB；用量页大容量场景覆盖到 GB+） */
|
||||
export function formatBytes(bytes: number | null | undefined): string {
|
||||
if (bytes === null || bytes === undefined) return '-'
|
||||
if (bytes < 1024) return `${bytes} B`
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
|
||||
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
|
||||
if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
|
||||
if (bytes < 1024 * 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`
|
||||
return `${(bytes / (1024 * 1024 * 1024 * 1024)).toFixed(2)} TB`
|
||||
}
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
import { describe, expect, it, vi } from 'vitest'
|
||||
import {
|
||||
buildViewerAlbumUrl,
|
||||
renderShareQr,
|
||||
viewerBaseFromEnv,
|
||||
VIEWER_BASE_FALLBACK,
|
||||
type QrDraw
|
||||
} from './shareLink'
|
||||
|
||||
describe('buildViewerAlbumUrl viewer 分享链接', () => {
|
||||
it('base + /a/{token}（尾斜杠容忍）', () => {
|
||||
expect(buildViewerAlbumUrl('http://127.0.0.1:5175', 'abc123')).toBe(
|
||||
'http://127.0.0.1:5175/a/abc123'
|
||||
)
|
||||
expect(buildViewerAlbumUrl('https://view.example.com/', 'abc123')).toBe(
|
||||
'https://view.example.com/a/abc123'
|
||||
)
|
||||
expect(buildViewerAlbumUrl('https://view.example.com//', 'abc123')).toBe(
|
||||
'https://view.example.com/a/abc123'
|
||||
)
|
||||
})
|
||||
|
||||
it('环境基址：VITE_VIEWER_BASE 缺省/空白兜底本机 dev', () => {
|
||||
expect(viewerBaseFromEnv({})).toBe(VIEWER_BASE_FALLBACK)
|
||||
expect(viewerBaseFromEnv({ VITE_VIEWER_BASE: ' ' })).toBe(VIEWER_BASE_FALLBACK)
|
||||
expect(viewerBaseFromEnv({ VITE_VIEWER_BASE: ' https://x.example.com ' })).toBe(
|
||||
'https://x.example.com'
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
describe('renderShareQr 二维码渲染（注入实现）', () => {
|
||||
it('以 canvas + URL + 尺寸出参调用绘制函数', async () => {
|
||||
const draw = vi.fn().mockResolvedValue(undefined) as unknown as QrDraw
|
||||
const canvas = {} as HTMLCanvasElement
|
||||
await renderShareQr(canvas, 'http://127.0.0.1:5175/a/tok', draw)
|
||||
expect(draw).toHaveBeenCalledTimes(1)
|
||||
expect(draw).toHaveBeenCalledWith(canvas, 'http://127.0.0.1:5175/a/tok', {
|
||||
width: 200,
|
||||
margin: 2
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,39 @@
|
||||
/**
|
||||
* 分享链接与二维码纯逻辑（P4a Task 9，依赖注入 qrcode 实现供 vitest 覆盖）
|
||||
*
|
||||
* - viewer URL：VITE_VIEWER_BASE + /a/{publicToken}（viewer 路由
|
||||
* /a/:token；base 缺省兜底本机 dev 5175，尾斜杠容忍）
|
||||
* - 二维码：node-qrcode canvas 渲染；实现经参数注入（单测不拉真库），
|
||||
* 组件侧默认传 QRCode.toCanvas
|
||||
*/
|
||||
|
||||
/** viewer 部署基址（缺省兜底本机 dev） */
|
||||
export const VIEWER_BASE_FALLBACK = 'http://127.0.0.1:5175'
|
||||
|
||||
/** 部署基址 + 公开令牌 → viewer 相册页 URL（尾斜杠容忍） */
|
||||
export function buildViewerAlbumUrl(base: string, publicToken: string): string {
|
||||
return `${base.replace(/\/+$/, '')}/a/${publicToken}`
|
||||
}
|
||||
|
||||
/** 环境基址（VITE_VIEWER_BASE 缺省兜底；Vite 注入 import.meta.env） */
|
||||
export function viewerBaseFromEnv(env: { VITE_VIEWER_BASE?: string }): string {
|
||||
const base = env.VITE_VIEWER_BASE?.trim()
|
||||
return base && base !== '' ? base : VIEWER_BASE_FALLBACK
|
||||
}
|
||||
|
||||
/** 二维码单点绘制函数（注入边界：组件包 QRCode.toCanvas，单测传假实现——
|
||||
@types/qrcode 的 callback 重载使整模块注入不可赋值，收窄到本签名） */
|
||||
export type QrDraw = (
|
||||
canvas: HTMLCanvasElement,
|
||||
text: string,
|
||||
options: { width: number; margin: number }
|
||||
) => Promise<unknown> | void
|
||||
|
||||
/** URL → 二维码 canvas（组件 watch 相册变化时调用） */
|
||||
export async function renderShareQr(
|
||||
canvas: HTMLCanvasElement,
|
||||
url: string,
|
||||
draw: QrDraw
|
||||
): Promise<void> {
|
||||
await draw(canvas, url, { width: 200, margin: 2 })
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import { formatBytes } from './format'
|
||||
import {
|
||||
alertTagType,
|
||||
buildThresholdsPayload,
|
||||
bytesToGb,
|
||||
draftFromThresholds,
|
||||
gbToBytes,
|
||||
isAlertActive
|
||||
} from './usageStorage'
|
||||
|
||||
describe('formatBytes 人类可读（含 GB/TB，用量页大容量）', () => {
|
||||
it('B/KB/MB/GB/TB 阶梯与缺省', () => {
|
||||
expect(formatBytes(null)).toBe('-')
|
||||
expect(formatBytes(512)).toBe('512 B')
|
||||
expect(formatBytes(2048)).toBe('2.0 KB')
|
||||
expect(formatBytes(5 * 1024 * 1024)).toBe('5.0 MB')
|
||||
expect(formatBytes(2.5 * 1024 * 1024 * 1024)).toBe('2.50 GB')
|
||||
expect(formatBytes(3 * 1024 ** 4)).toBe('3.00 TB')
|
||||
})
|
||||
})
|
||||
|
||||
describe('GB ↔ bytes 换算', () => {
|
||||
it('GB → bytes 取整；负数/非法兜底 0；bytes → GB 回显', () => {
|
||||
expect(gbToBytes(1)).toBe(1024 ** 3)
|
||||
expect(gbToBytes(0.001)).toBe(Math.round(0.001 * 1024 ** 3))
|
||||
expect(gbToBytes(null)).toBe(0)
|
||||
expect(gbToBytes(-5)).toBe(0)
|
||||
expect(bytesToGb(null)).toBeNull()
|
||||
expect(bytesToGb(2 * 1024 ** 3)).toBe(2)
|
||||
})
|
||||
})
|
||||
|
||||
describe('阈值表单 ↔ 契约载荷', () => {
|
||||
it('null 阈值 → 关闭态草稿；开启态回填 GB 值', () => {
|
||||
const draft = draftFromThresholds({ storageBytes: null, perAlbumBytes: 2 * 1024 ** 3 })
|
||||
expect(draft.storage).toEqual({ enabled: false, gb: null })
|
||||
expect(draft.perAlbum).toEqual({ enabled: true, gb: 2 })
|
||||
})
|
||||
|
||||
it('开启 → bytes；关闭 → 显式 null 清除（告警停用）；未填值兜底 0', () => {
|
||||
const payload = buildThresholdsPayload({
|
||||
storage: { enabled: true, gb: 10 },
|
||||
perAlbum: { enabled: false, gb: null }
|
||||
})
|
||||
expect(payload).toEqual({ storageBytes: 10 * 1024 ** 3, perAlbumBytes: null })
|
||||
expect(
|
||||
buildThresholdsPayload({
|
||||
storage: { enabled: true, gb: null },
|
||||
perAlbum: { enabled: true, gb: 0.5 }
|
||||
})
|
||||
).toEqual({ storageBytes: 0, perAlbumBytes: Math.round(0.5 * 1024 ** 3) })
|
||||
})
|
||||
})
|
||||
|
||||
describe('告警条目展示态', () => {
|
||||
it('未解决 danger（红）/ 已解决 info（灰）', () => {
|
||||
expect(alertTagType({ resolvedAt: null })).toBe('danger')
|
||||
expect(alertTagType({ resolvedAt: '2026-09-01T00:00:00.000Z' })).toBe('info')
|
||||
expect(isAlertActive({ resolvedAt: null })).toBe(true)
|
||||
expect(isAlertActive({ resolvedAt: '2026-09-01T00:00:00.000Z' })).toBe(false)
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,66 @@
|
||||
/**
|
||||
* 用量页纯逻辑（P4a Task 9 / A23，无组件依赖供 vitest 覆盖）
|
||||
*
|
||||
* - GB ↔ bytes 换算：阈值表单以 GB 为单位（运营口径），契约传输 bytes；
|
||||
* GB 输入按 1024^3 取整（契约 integer）
|
||||
* - 阈值载荷：开关关闭=显式 null（清除该维度=告警停用）；开启=bytes。
|
||||
* 两维度一并提交（对未触碰的维度等值重放，幂等无噪音——服务端只在
|
||||
* 值变化时评估出告警差异）
|
||||
* - 告警条目 → 展示态：未解决 danger / 已解决 info（灰）
|
||||
*/
|
||||
|
||||
/** 1 GB 的字节数（阈值换算基准） */
|
||||
export const BYTES_PER_GB = 1024 * 1024 * 1024
|
||||
|
||||
/** GB 输入 → bytes（负数/非法值兜底 0；契约 minimum: 0） */
|
||||
export function gbToBytes(gb: number | null | undefined): number {
|
||||
if (gb === null || gb === undefined || Number.isNaN(gb) || gb <= 0) return 0
|
||||
return Math.round(gb * BYTES_PER_GB)
|
||||
}
|
||||
|
||||
/** bytes → GB 展示值（null → null：未设置态回填表单） */
|
||||
export function bytesToGb(bytes: number | null): number | null {
|
||||
if (bytes === null) return null
|
||||
return bytes / BYTES_PER_GB
|
||||
}
|
||||
|
||||
/** 阈值表单草稿（开关表达「启用/清除」，输入以 GB 为单位） */
|
||||
export interface ThresholdFieldDraft {
|
||||
enabled: boolean
|
||||
/** GB 值（enabled 时应 > 0） */
|
||||
gb: number | null
|
||||
}
|
||||
|
||||
export interface ThresholdsDraft {
|
||||
storage: ThresholdFieldDraft
|
||||
perAlbum: ThresholdFieldDraft
|
||||
}
|
||||
|
||||
/** 当前阈值 → 表单草稿（null → 关闭态） */
|
||||
export function draftFromThresholds(thresholds: Api.Usage.Thresholds): ThresholdsDraft {
|
||||
return {
|
||||
storage: { enabled: thresholds.storageBytes !== null, gb: bytesToGb(thresholds.storageBytes) },
|
||||
perAlbum: {
|
||||
enabled: thresholds.perAlbumBytes !== null,
|
||||
gb: bytesToGb(thresholds.perAlbumBytes)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** 表单草稿 → PUT 载荷（关闭=显式 null 清除；开启但未填值兜底 0） */
|
||||
export function buildThresholdsPayload(draft: ThresholdsDraft): Api.Usage.ThresholdsUpdatePayload {
|
||||
return {
|
||||
storageBytes: draft.storage.enabled ? gbToBytes(draft.storage.gb) : null,
|
||||
perAlbumBytes: draft.perAlbum.enabled ? gbToBytes(draft.perAlbum.gb) : null
|
||||
}
|
||||
}
|
||||
|
||||
/** 告警 → ElTag type（未解决 danger 红 / 已解决 info 灰） */
|
||||
export function alertTagType(alert: Pick<Api.Usage.AlertItem, 'resolvedAt'>) {
|
||||
return alert.resolvedAt === null ? 'danger' : 'info'
|
||||
}
|
||||
|
||||
/** 告警是否未解决 */
|
||||
export function isAlertActive(alert: Pick<Api.Usage.AlertItem, 'resolvedAt'>): boolean {
|
||||
return alert.resolvedAt === null
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import {
|
||||
buildWatermarkPayload,
|
||||
defaultWatermarkForm,
|
||||
formFromConfig,
|
||||
hasRunningWatermarkJob,
|
||||
previewTextStyle,
|
||||
watermarkProgressPercent
|
||||
} from './watermarkForm'
|
||||
|
||||
describe('buildWatermarkPayload 表单 → 契约载荷', () => {
|
||||
it('关闭态仅送 {enabled:false}（契约：其余字段此时被忽略）', () => {
|
||||
const form = { ...defaultWatermarkForm(), textContent: '遗留文字' }
|
||||
expect(buildWatermarkPayload(form)).toEqual({ enabled: false })
|
||||
})
|
||||
|
||||
it('开启 + 文字：全量参数 + text（content 去首尾空白）', () => {
|
||||
const form = {
|
||||
...defaultWatermarkForm(),
|
||||
enabled: true,
|
||||
position: 'topRight' as const,
|
||||
opacity: 70,
|
||||
scalePercent: 30,
|
||||
textContent: ' © Photo Live ',
|
||||
fontSize: 32
|
||||
}
|
||||
expect(buildWatermarkPayload(form)).toEqual({
|
||||
enabled: true,
|
||||
position: 'topRight',
|
||||
opacity: 70,
|
||||
scalePercent: 30,
|
||||
text: { content: '© Photo Live', fontSize: 32 }
|
||||
})
|
||||
})
|
||||
|
||||
it('开启但文字为空：不送 text（服务端要求 content 非空）', () => {
|
||||
const form = { ...defaultWatermarkForm(), enabled: true, textContent: ' ' }
|
||||
const payload = buildWatermarkPayload(form)
|
||||
expect(payload.enabled).toBe(true)
|
||||
expect(payload.text).toBeUndefined()
|
||||
})
|
||||
|
||||
it('GET current 回包（缺省字段）→ 表单填齐服务端默认口径', () => {
|
||||
const form = formFromConfig({ enabled: true, text: { content: 'x' } })
|
||||
expect(form).toEqual({
|
||||
enabled: true,
|
||||
position: 'bottomRight',
|
||||
opacity: 50,
|
||||
scalePercent: 20,
|
||||
textContent: 'x',
|
||||
fontSize: 24
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('hasRunningWatermarkJob 轮询决策', () => {
|
||||
it('任一 pending/running → 继续轮询；全终态 → 停', () => {
|
||||
const job = (state: Api.Album.WatermarkJobState): Api.Album.WatermarkJob => ({
|
||||
jobId: 'j1',
|
||||
configVersion: 1,
|
||||
state,
|
||||
progress: 0,
|
||||
total: 3,
|
||||
failed: 0,
|
||||
createdAt: '2026-09-01T00:00:00.000Z'
|
||||
})
|
||||
expect(hasRunningWatermarkJob([job('pending'), job('done')])).toBe(true)
|
||||
expect(hasRunningWatermarkJob([job('running')])).toBe(true)
|
||||
expect(hasRunningWatermarkJob([job('done'), job('failed')])).toBe(false)
|
||||
expect(hasRunningWatermarkJob([])).toBe(false)
|
||||
})
|
||||
|
||||
it('进度百分比：total=0 视为 100（空相册即建即 done）', () => {
|
||||
const base = { jobId: 'j', configVersion: 1, failed: 0, createdAt: '' }
|
||||
expect(watermarkProgressPercent({ ...base, state: 'running', progress: 0, total: 0 })).toBe(100)
|
||||
expect(watermarkProgressPercent({ ...base, state: 'running', progress: 1, total: 4 })).toBe(25)
|
||||
// progress 可超 total（发布中途新照片纳入处理）——封顶 100
|
||||
expect(watermarkProgressPercent({ ...base, state: 'running', progress: 5, total: 4 })).toBe(100)
|
||||
})
|
||||
})
|
||||
|
||||
describe('previewTextStyle 示意预览样式映射', () => {
|
||||
it('不透明度百分比 → CSS opacity；位置锚点随 position 变化', () => {
|
||||
const style = previewTextStyle({
|
||||
...defaultWatermarkForm(),
|
||||
enabled: true,
|
||||
opacity: 50,
|
||||
position: 'bottomRight'
|
||||
})
|
||||
expect(style.opacity).toBe('0.5')
|
||||
expect(style.bottom).toBe('8px')
|
||||
expect(style.right).toBe('8px')
|
||||
|
||||
const center = previewTextStyle({
|
||||
...defaultWatermarkForm(),
|
||||
position: 'center'
|
||||
})
|
||||
expect(center.transform).toBe('translate(-50%, -50%)')
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,108 @@
|
||||
/**
|
||||
* 水印卡纯逻辑（P4a Task 9，无组件依赖供 vitest 覆盖）
|
||||
*
|
||||
* - 表单草稿与缺省值：对齐服务端缺省（position=bottomRight / opacity=50 /
|
||||
* scalePercent=20 / fontSize=24，watermark e2e ① 的填齐口径）——GET current
|
||||
* 回包可直接喂表单，POST 载荷保持全量显式（值即所见）
|
||||
* - 载荷构建：enabled=false 仅送 {enabled:false}（契约：其余字段此时被忽略）；
|
||||
* enabled=true 且文字非空才送 text（服务端要求 content 必填非空）
|
||||
* - 轮询决策：任一任务 pending/running 即继续轮询（3s），全终态即停
|
||||
* - 预览样式映射：CSS 叠加示意（位置/不透明度/字号），明确标注非实际渲染
|
||||
*/
|
||||
|
||||
/** 水印表单草稿（全量字段；UI 可用性由 enabled 派生） */
|
||||
export interface WatermarkFormState {
|
||||
enabled: boolean
|
||||
position: Api.Album.WatermarkPosition
|
||||
opacity: number
|
||||
scalePercent: number
|
||||
textContent: string
|
||||
fontSize: number
|
||||
}
|
||||
|
||||
/** 服务端缺省对齐的表单初值（从未配置时） */
|
||||
export function defaultWatermarkForm(): WatermarkFormState {
|
||||
return {
|
||||
enabled: false,
|
||||
position: 'bottomRight',
|
||||
opacity: 50,
|
||||
scalePercent: 20,
|
||||
textContent: '',
|
||||
fontSize: 24
|
||||
}
|
||||
}
|
||||
|
||||
/** 当前生效配置 → 表单草稿（GET current 回包适配） */
|
||||
export function formFromConfig(config: Api.Album.WatermarkConfig): WatermarkFormState {
|
||||
return {
|
||||
enabled: config.enabled,
|
||||
position: config.position ?? 'bottomRight',
|
||||
opacity: config.opacity ?? 50,
|
||||
scalePercent: config.scalePercent ?? 20,
|
||||
textContent: config.text?.content ?? '',
|
||||
fontSize: config.text?.fontSize ?? 24
|
||||
}
|
||||
}
|
||||
|
||||
/** 表单 → 请求载荷（enabled=false 仅送开关；文字非空才送 text） */
|
||||
export function buildWatermarkPayload(form: WatermarkFormState): Api.Album.WatermarkConfig {
|
||||
if (!form.enabled) return { enabled: false }
|
||||
const content = form.textContent.trim()
|
||||
return {
|
||||
enabled: true,
|
||||
position: form.position,
|
||||
opacity: form.opacity,
|
||||
scalePercent: form.scalePercent,
|
||||
...(content !== '' ? { text: { content, fontSize: form.fontSize } } : {})
|
||||
}
|
||||
}
|
||||
|
||||
/** 是否仍有进行中的任务（pending/running → 继续轮询） */
|
||||
export function hasRunningWatermarkJob(jobs: Api.Album.WatermarkJob[]): boolean {
|
||||
return jobs.some((job) => job.state === 'pending' || job.state === 'running')
|
||||
}
|
||||
|
||||
/** 任务进度百分比（total=0 视为 100——空相册 POST 即建即 done） */
|
||||
export function watermarkProgressPercent(job: Api.Album.WatermarkJob): number {
|
||||
if (job.total <= 0) return 100
|
||||
return Math.min(100, Math.round((job.progress / job.total) * 100))
|
||||
}
|
||||
|
||||
/** 预览框宽度（px；示意尺寸，等比缩放实际效果） */
|
||||
export const WATERMARK_PREVIEW_WIDTH = 280
|
||||
/** 预览框高度（px） */
|
||||
export const WATERMARK_PREVIEW_HEIGHT = 180
|
||||
|
||||
/** 位置 → 预览叠加层的定位方式（absolute 锚点） */
|
||||
export function previewPositionStyle(
|
||||
position: Api.Album.WatermarkPosition
|
||||
): Record<string, string> {
|
||||
switch (position) {
|
||||
case 'topLeft':
|
||||
return { top: '8px', left: '8px' }
|
||||
case 'topRight':
|
||||
return { top: '8px', right: '8px' }
|
||||
case 'bottomLeft':
|
||||
return { bottom: '8px', left: '8px' }
|
||||
case 'bottomRight':
|
||||
return { bottom: '8px', right: '8px' }
|
||||
case 'center':
|
||||
return { top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 表单 → 预览文字叠加样式（CSS 示意，非 sharp 实际渲染）。
|
||||
* 字号按预览框与常用浏览图宽（1400px）等比缩放；scalePercent 体现为
|
||||
* 文字最大宽度占预览框的百分比。
|
||||
*/
|
||||
export function previewTextStyle(form: WatermarkFormState): Record<string, string> {
|
||||
const scale = WATERMARK_PREVIEW_WIDTH / 1400
|
||||
return {
|
||||
...previewPositionStyle(form.position),
|
||||
opacity: String(form.opacity / 100),
|
||||
fontSize: `${Math.max(8, Math.round(form.fontSize * scale))}px`,
|
||||
maxWidth: `${form.scalePercent}%`,
|
||||
position: 'absolute'
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,10 @@
|
||||
<!-- 照片管理（listAlbumPhotos）：全状态可见 + uploader 脱敏 + 可见性/分类过滤。
|
||||
单条操作：隐藏（published→hidden）/恢复发布（hidden→published）/软删除；
|
||||
批量隐藏属 P4a，此处仅单条。操作结果按条回显（行内状态即时更新 + 消息）。 -->
|
||||
单条操作：隐藏/恢复发布/软删除（行内回显）；P4a Task 9 增量：
|
||||
· 多选（仅 published 可选——批量隐藏的状态机前置）+ 批量隐藏（逐项结果
|
||||
toast 汇总 成功x/失败y + 失败详情弹窗逐条错误码本地化；成功行原位
|
||||
置 hidden，失败行不动——A16 部分成功语义）
|
||||
· likeCount 副本列（P2 PhotoRecord 回传；相册级 statsSyncedAt 在详情
|
||||
信息卡展示，照片行无单行同步时间）。 -->
|
||||
<template>
|
||||
<div data-test="photos-panel">
|
||||
<div class="flex flex-wrap items-center gap-3 mb-4">
|
||||
@@ -32,13 +36,31 @@
|
||||
:label="categoryLabel(category)"
|
||||
/>
|
||||
</ElSelect>
|
||||
<ElButton
|
||||
type="warning"
|
||||
plain
|
||||
:disabled="selectedPublished.length === 0"
|
||||
:loading="batchHiding"
|
||||
data-test="photo-batch-hide-btn"
|
||||
@click="batchHide"
|
||||
>
|
||||
{{ t('albumsManage.photos.batchHide') }}
|
||||
<span v-if="selectedPublished.length" class="ml-1">({{ selectedPublished.length }})</span>
|
||||
</ElButton>
|
||||
</div>
|
||||
|
||||
<ElAlert v-if="error && !items.length" type="error" :closable="false">
|
||||
{{ error.message }}
|
||||
</ElAlert>
|
||||
|
||||
<ElTable v-else v-loading="loading" :data="items" data-test="photo-list-table">
|
||||
<ElTable
|
||||
v-else
|
||||
v-loading="loading"
|
||||
:data="items"
|
||||
data-test="photo-list-table"
|
||||
@selection-change="onSelectionChange"
|
||||
>
|
||||
<ElTableColumn type="selection" width="44" :selectable="batchSelectable" />
|
||||
<ElTableColumn :label="t('albumsManage.photos.colState')" width="120">
|
||||
<template #default="{ row }">
|
||||
<ElTag :type="stateTagType(row.processingState)" data-test="photo-state-tag">
|
||||
@@ -70,6 +92,11 @@
|
||||
<span>{{ row.uploader.displayName || row.uploader.account }}</span>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn :label="t('albumsManage.photos.colLikeCount')" width="90">
|
||||
<template #default="{ row }">
|
||||
<span class="text-gray-500" data-test="photo-like-count">{{ row.likeCount }}</span>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn :label="t('albumsManage.photos.colUploadedAt')" width="160">
|
||||
<template #default="{ row }">
|
||||
<span>{{ formatDateTime(row.uploadedAt) }}</span>
|
||||
@@ -116,16 +143,59 @@
|
||||
{{ $t('albumsManage.list.loadMore') }}
|
||||
</ElButton>
|
||||
</div>
|
||||
|
||||
<!-- 批量隐藏失败详情（逐条错误码本地化；成功行已原位回显） -->
|
||||
<ElDialog
|
||||
v-model="failuresVisible"
|
||||
:title="t('albumsManage.photos.batchFailuresTitle')"
|
||||
width="480px"
|
||||
data-test="photo-batch-failures-dialog"
|
||||
>
|
||||
<ElTable :data="batchSummary?.failures ?? []" size="small">
|
||||
<ElTableColumn :label="t('albumsManage.photos.batchColPhoto')" min-width="160">
|
||||
<template #default="{ row }">
|
||||
<span class="font-mono text-xs break-all">{{ row.photoId }}</span>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn :label="t('albumsManage.photos.batchColReason')" min-width="160">
|
||||
<template #default="{ row }">
|
||||
<ElTag type="danger" effect="plain" size="small">
|
||||
{{ localizeBatchHideCode(t, row.code) }}
|
||||
</ElTag>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
</ElTable>
|
||||
<template #footer>
|
||||
<ElButton
|
||||
type="primary"
|
||||
data-test="photo-batch-failures-close"
|
||||
@click="failuresVisible = false"
|
||||
>
|
||||
{{ t('common.confirm') }}
|
||||
</ElButton>
|
||||
</template>
|
||||
</ElDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { fetchAlbumPhotos, fetchDeletePhoto, fetchUpdatePhotoVisibility } from '@/api/albums'
|
||||
import {
|
||||
fetchAlbumPhotos,
|
||||
fetchDeletePhoto,
|
||||
fetchHidePhotosBatch,
|
||||
fetchUpdatePhotoVisibility
|
||||
} from '@/api/albums'
|
||||
import { useCursorList } from '@/views/albums/composables/useCursorList'
|
||||
import { formatBytes, formatDateTime } from '@/utils/albums/format'
|
||||
import {
|
||||
indexOfPhotoId,
|
||||
localizeBatchHideCode,
|
||||
summarizeBatchHideResults,
|
||||
type BatchHideSummary
|
||||
} from '@/utils/albums/batchHide'
|
||||
|
||||
const props = defineProps<{
|
||||
album: Api.Album.Detail
|
||||
@@ -245,4 +315,69 @@
|
||||
}
|
||||
ElMessage.success(t('albumsManage.photos.deleted'))
|
||||
}
|
||||
|
||||
// ── 批量隐藏（P4a A16：逐项结果部分成功） ──
|
||||
|
||||
/** 仅 published 可选（批量隐藏的目标态前置；其余状态行勾选禁用） */
|
||||
function batchSelectable(row: Api.Album.AdminPhoto): boolean {
|
||||
return row.visibility === 'published'
|
||||
}
|
||||
|
||||
const selection = ref<Api.Album.AdminPhoto[]>([])
|
||||
|
||||
function onSelectionChange(rows: Api.Album.AdminPhoto[]) {
|
||||
selection.value = rows
|
||||
}
|
||||
|
||||
/** selection 经 selectable 约束本就全为 published；过滤一层兜底 */
|
||||
const selectedPublished = computed(() =>
|
||||
selection.value.filter((row) => row.visibility === 'published')
|
||||
)
|
||||
|
||||
const batchHiding = ref(false)
|
||||
const failuresVisible = ref(false)
|
||||
const batchSummary = ref<BatchHideSummary | null>(null)
|
||||
|
||||
async function batchHide() {
|
||||
const targets = selectedPublished.value
|
||||
if (targets.length === 0) return
|
||||
if (!(await confirmBox(t('albumsManage.photos.batchHideConfirm', { count: targets.length })))) {
|
||||
return
|
||||
}
|
||||
batchHiding.value = true
|
||||
try {
|
||||
const result = await fetchHidePhotosBatch(
|
||||
props.album.id,
|
||||
targets.map((row) => row.photoId)
|
||||
)
|
||||
const summary = summarizeBatchHideResults(result.results)
|
||||
batchSummary.value = summary
|
||||
// 成功项原位置 hidden（结果与请求同序；失败行保持原样）；过滤条件下
|
||||
// 与目标态不符则移除
|
||||
for (const item of result.results) {
|
||||
if (!item.ok) continue
|
||||
const index = indexOfPhotoId(items.value, item.photoId)
|
||||
if (index < 0) continue
|
||||
const row = items.value[index]!
|
||||
if (visibilityFilter.value !== '' && visibilityFilter.value !== 'hidden') {
|
||||
list.removeItem(index)
|
||||
} else {
|
||||
list.replaceItem(index, { ...row, visibility: 'hidden' as const })
|
||||
}
|
||||
}
|
||||
if (summary.failCount > 0) {
|
||||
failuresVisible.value = true
|
||||
ElMessage.warning(
|
||||
t('albumsManage.photos.batchResult', {
|
||||
ok: summary.okCount,
|
||||
fail: summary.failCount
|
||||
})
|
||||
)
|
||||
} else {
|
||||
ElMessage.success(t('albumsManage.photos.batchResultAllOk', { ok: summary.okCount }))
|
||||
}
|
||||
} finally {
|
||||
batchHiding.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,92 @@
|
||||
<!-- 分享链接与二维码卡（P4a Task 9，评审缺口补齐）：viewer URL
|
||||
（VITE_VIEWER_BASE + /a/{publicToken}）+ qrcode canvas 渲染（相册切换
|
||||
重绘）+ 复制链接。公开开关关闭时提示不可分享（链接仍展示——开关由
|
||||
编辑表单控制，此处只读提示）。 -->
|
||||
<template>
|
||||
<div data-test="share-panel" class="max-w-xl">
|
||||
<ElAlert
|
||||
v-if="!album.publicEnabled"
|
||||
type="info"
|
||||
:closable="false"
|
||||
:title="t('albumsManage.share.publicOffHint')"
|
||||
class="mb-4"
|
||||
data-test="share-public-off-hint"
|
||||
/>
|
||||
|
||||
<div class="flex flex-wrap items-start gap-6">
|
||||
<div class="flex-1 min-w-260px">
|
||||
<div class="text-gray-500 mb-1">{{ t('albumsManage.share.viewerUrl') }}</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<code
|
||||
class="bg-gray-100 dark:bg-gray-800 px-3 py-2 rounded text-sm font-mono break-all"
|
||||
data-test="share-url"
|
||||
>
|
||||
{{ viewerUrl }}
|
||||
</code>
|
||||
<ElButton type="primary" plain data-test="share-copy-btn" @click="copyLink">
|
||||
{{ t('albumsManage.share.copy') }}
|
||||
</ElButton>
|
||||
</div>
|
||||
<div class="text-gray-400 text-xs mt-2">{{ t('albumsManage.share.hint') }}</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<canvas ref="qrCanvas" width="200" height="200" data-test="share-qr-canvas" />
|
||||
<div class="text-gray-400 text-xs mt-1">{{ t('albumsManage.share.qrTitle') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import QRCode from 'qrcode'
|
||||
import {
|
||||
buildViewerAlbumUrl,
|
||||
renderShareQr,
|
||||
viewerBaseFromEnv,
|
||||
type QrDraw
|
||||
} from '@/utils/albums/shareLink'
|
||||
|
||||
const props = defineProps<{
|
||||
album: Api.Album.Detail
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const viewerUrl = computed(() =>
|
||||
buildViewerAlbumUrl(viewerBaseFromEnv(import.meta.env), props.album.publicToken)
|
||||
)
|
||||
|
||||
const qrCanvas = ref<HTMLCanvasElement | null>(null)
|
||||
|
||||
/** QRCode.toCanvas 适配到注入签名（callback 重载在箭头内按实参解析） */
|
||||
const drawQrCode: QrDraw = (canvas, text, options) => QRCode.toCanvas(canvas, text, options)
|
||||
|
||||
async function drawQr(): Promise<void> {
|
||||
if (!qrCanvas.value) return
|
||||
try {
|
||||
await renderShareQr(qrCanvas.value, viewerUrl.value, drawQrCode)
|
||||
} catch {
|
||||
// 渲染失败保留空 canvas（复制链接仍可用）；不打断页面
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
void drawQr()
|
||||
})
|
||||
|
||||
/** 相册变化（路由复用组件）即重绘二维码 */
|
||||
watch(
|
||||
() => props.album.publicToken,
|
||||
() => {
|
||||
void drawQr()
|
||||
}
|
||||
)
|
||||
|
||||
async function copyLink(): Promise<void> {
|
||||
await navigator.clipboard.writeText(viewerUrl.value)
|
||||
ElMessage.success(t('albumsManage.list.copied'))
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,140 @@
|
||||
<!-- 负责人交接对话框（P4a A17）：账号前缀搜索目标用户（fetchLookupUsers，
|
||||
≥2 字符）+ 是否保留原 owner 为协作者开关。警告：历史上传人不变。
|
||||
POST /admin/albums/{id}/transfer → 200 相册详情（ownerId 已变更），
|
||||
成功后 emit saved 由详情页刷新。 -->
|
||||
<template>
|
||||
<ElDialog
|
||||
v-model="visible"
|
||||
:title="$t('albumsManage.transfer.title')"
|
||||
width="520px"
|
||||
destroy-on-close
|
||||
data-test="transfer-dialog"
|
||||
>
|
||||
<ElAlert
|
||||
type="warning"
|
||||
:closable="false"
|
||||
:title="$t('albumsManage.transfer.historyHint')"
|
||||
data-test="transfer-history-hint"
|
||||
/>
|
||||
<ElForm label-width="140px" class="mt-4">
|
||||
<ElFormItem :label="$t('albumsManage.transfer.targetLabel')">
|
||||
<ElSelect
|
||||
v-model="targetUserId"
|
||||
filterable
|
||||
remote
|
||||
clearable
|
||||
:remote-method="searchUsers"
|
||||
:loading="searching"
|
||||
:placeholder="t('albumsManage.transfer.searchPlaceholder')"
|
||||
style="width: 100%"
|
||||
data-test="transfer-target-select"
|
||||
>
|
||||
<ElOption
|
||||
v-for="user in options"
|
||||
:key="user.id"
|
||||
:value="user.id"
|
||||
:label="`${user.account}（${user.displayName}）`"
|
||||
:data-test="`transfer-option-${user.account}`"
|
||||
/>
|
||||
<template #empty>
|
||||
<span class="px-4 py-2 text-gray-400 text-sm">
|
||||
{{
|
||||
query.length < 2
|
||||
? t('albumsManage.transfer.searchPlaceholder')
|
||||
: searching
|
||||
? t('albumsManage.members.searching')
|
||||
: t('albumsManage.members.noMatch')
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
</ElSelect>
|
||||
</ElFormItem>
|
||||
<ElFormItem :label="$t('albumsManage.transfer.keepLabel')">
|
||||
<div class="flex items-center gap-2">
|
||||
<ElSwitch v-model="keepAsCollaborator" data-test="transfer-keep-switch" />
|
||||
<span class="text-gray-400 text-sm">{{ t('albumsManage.transfer.keepHint') }}</span>
|
||||
</div>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
|
||||
<template #footer>
|
||||
<ElButton data-test="transfer-cancel" @click="visible = false">
|
||||
{{ t('common.cancel') }}
|
||||
</ElButton>
|
||||
<ElButton
|
||||
type="primary"
|
||||
:disabled="!targetUserId"
|
||||
:loading="transferring"
|
||||
data-test="transfer-submit"
|
||||
@click="submit"
|
||||
>
|
||||
{{ t('albumsManage.transfer.submit') }}
|
||||
</ElButton>
|
||||
</template>
|
||||
</ElDialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { fetchLookupUsers, fetchTransferAlbum } from '@/api/albums'
|
||||
|
||||
const props = defineProps<{
|
||||
album: Api.Album.Detail
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
/** 交接成功（回传新相册详情，ownerId 已变更） */
|
||||
saved: [album: Api.Album.Detail]
|
||||
}>()
|
||||
|
||||
const visible = defineModel<boolean>({ default: false })
|
||||
const { t } = useI18n()
|
||||
|
||||
// ── 目标账号前缀搜索（≥2 字符才发起；同成员邀请模式） ──
|
||||
const query = ref('')
|
||||
const options = ref<Api.Album.UserLookupItem[]>([])
|
||||
const searching = ref(false)
|
||||
const targetUserId = ref('')
|
||||
const keepAsCollaborator = ref(true)
|
||||
const transferring = ref(false)
|
||||
|
||||
watch(visible, (open) => {
|
||||
if (open) {
|
||||
query.value = ''
|
||||
options.value = []
|
||||
targetUserId.value = ''
|
||||
keepAsCollaborator.value = true
|
||||
}
|
||||
})
|
||||
|
||||
async function searchUsers(prefix: string) {
|
||||
query.value = prefix
|
||||
options.value = []
|
||||
if (prefix.trim().length < 2) return
|
||||
searching.value = true
|
||||
try {
|
||||
const result = await fetchLookupUsers(prefix.trim())
|
||||
options.value = result.items
|
||||
} finally {
|
||||
searching.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function submit(): Promise<void> {
|
||||
if (!targetUserId.value) return
|
||||
transferring.value = true
|
||||
try {
|
||||
const album = await fetchTransferAlbum(props.album.id, {
|
||||
targetUserId: targetUserId.value,
|
||||
keepAsCollaborator: keepAsCollaborator.value
|
||||
})
|
||||
ElMessage.success(t('albumsManage.transfer.success'))
|
||||
visible.value = false
|
||||
emit('saved', album)
|
||||
} finally {
|
||||
transferring.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,350 @@
|
||||
<!-- 水印管理卡（P4a Task 9 / A18 A20）：当前配置展示 + 开关参数表单 →
|
||||
POST watermark-jobs（202 受理）→ 版本历史（进度条轮询 3s，任一任务
|
||||
pending/running 即续轮，全终态停）+ 发起重生成（=以当前表单再次 POST）。
|
||||
「测试水印」为 CSS 叠加示意预览（非 sharp 实际渲染，明确标注）。 -->
|
||||
<template>
|
||||
<div data-test="watermark-panel">
|
||||
<ElAlert v-if="error && !status" type="error" :closable="false">
|
||||
<div class="flex items-center gap-2">
|
||||
<span>{{ t('albumsManage.watermark.loadFailed') }}：{{ error.message }}</span>
|
||||
<ElButton size="small" data-test="watermark-retry" @click="load">
|
||||
{{ t('albumsManage.watermark.retry') }}
|
||||
</ElButton>
|
||||
</div>
|
||||
</ElAlert>
|
||||
|
||||
<template v-else>
|
||||
<!-- ── 当前配置 ── -->
|
||||
<div class="mb-4" data-test="watermark-current">
|
||||
<span class="text-gray-500">{{ t('albumsManage.watermark.currentVersion') }}</span>
|
||||
<ElTag
|
||||
class="ml-2"
|
||||
:type="form.enabled ? 'success' : 'info'"
|
||||
data-test="watermark-current-tag"
|
||||
>
|
||||
{{
|
||||
status?.current
|
||||
? t('albumsManage.watermark.versionTag', {
|
||||
version: status.current.configVersion,
|
||||
state: form.enabled
|
||||
? t('albumsManage.watermark.enabled')
|
||||
: t('albumsManage.watermark.disabled')
|
||||
})
|
||||
: t('albumsManage.watermark.neverConfigured')
|
||||
}}
|
||||
</ElTag>
|
||||
<span v-if="status?.current" class="ml-3 text-gray-400 text-sm">
|
||||
{{ configSummary(status.current.config) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-6 lg:grid-cols-2">
|
||||
<!-- ── 参数表单 ── -->
|
||||
<div>
|
||||
<ElForm label-width="130px">
|
||||
<ElFormItem :label="t('albumsManage.watermark.switchLabel')">
|
||||
<ElSwitch v-model="form.enabled" data-test="watermark-enabled-switch" />
|
||||
</ElFormItem>
|
||||
<ElFormItem :label="t('albumsManage.watermark.positionLabel')">
|
||||
<ElSelect
|
||||
v-model="form.position"
|
||||
:disabled="!form.enabled"
|
||||
style="width: 180px"
|
||||
data-test="watermark-position"
|
||||
>
|
||||
<ElOption
|
||||
v-for="pos in POSITIONS"
|
||||
:key="pos"
|
||||
:value="pos"
|
||||
:label="t(`albumsManage.watermark.position_${pos}`)"
|
||||
/>
|
||||
</ElSelect>
|
||||
</ElFormItem>
|
||||
<ElFormItem :label="t('albumsManage.watermark.opacityLabel')">
|
||||
<div class="flex items-center gap-3 w-full">
|
||||
<ElSlider
|
||||
v-model="form.opacity"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:disabled="!form.enabled"
|
||||
data-test="watermark-opacity"
|
||||
/>
|
||||
<span class="text-gray-500 w-10 text-right">{{ form.opacity }}%</span>
|
||||
</div>
|
||||
</ElFormItem>
|
||||
<ElFormItem :label="t('albumsManage.watermark.scaleLabel')">
|
||||
<div class="flex items-center gap-3 w-full">
|
||||
<ElSlider
|
||||
v-model="form.scalePercent"
|
||||
:min="5"
|
||||
:max="50"
|
||||
:disabled="!form.enabled"
|
||||
data-test="watermark-scale"
|
||||
/>
|
||||
<span class="text-gray-500 w-10 text-right">{{ form.scalePercent }}%</span>
|
||||
</div>
|
||||
</ElFormItem>
|
||||
<ElFormItem :label="t('albumsManage.watermark.textContentLabel')">
|
||||
<ElInput
|
||||
v-model="form.textContent"
|
||||
:disabled="!form.enabled"
|
||||
maxlength="64"
|
||||
:placeholder="t('albumsManage.watermark.textContentPlaceholder')"
|
||||
data-test="watermark-text-content"
|
||||
/>
|
||||
</ElFormItem>
|
||||
<ElFormItem :label="t('albumsManage.watermark.fontSizeLabel')">
|
||||
<ElInputNumber
|
||||
v-model="form.fontSize"
|
||||
:min="8"
|
||||
:max="72"
|
||||
:disabled="!form.enabled || form.textContent.trim() === ''"
|
||||
data-test="watermark-font-size"
|
||||
/>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
<div class="flex items-center gap-2">
|
||||
<ElButton
|
||||
type="primary"
|
||||
:loading="submitting"
|
||||
data-test="watermark-save-btn"
|
||||
@click="save"
|
||||
>
|
||||
{{ t('albumsManage.watermark.save') }}
|
||||
</ElButton>
|
||||
<span class="text-gray-400 text-sm">{{ t('albumsManage.watermark.saveHint') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── 示意预览（CSS 叠加，非实际渲染） ── -->
|
||||
<div>
|
||||
<div class="text-gray-500 mb-1">{{ t('albumsManage.watermark.previewTitle') }}</div>
|
||||
<div
|
||||
class="relative overflow-hidden rounded border border-gray-200 dark:border-gray-700 bg-gradient-to-br from-sky-200 via-indigo-200 to-rose-200"
|
||||
:style="{
|
||||
width: `${WATERMARK_PREVIEW_WIDTH}px`,
|
||||
height: `${WATERMARK_PREVIEW_HEIGHT}px`
|
||||
}"
|
||||
data-test="watermark-preview-box"
|
||||
>
|
||||
<span
|
||||
class="text-slate-800 select-none whitespace-nowrap"
|
||||
:style="previewTextStyle(form)"
|
||||
data-test="watermark-preview-text"
|
||||
>
|
||||
{{ previewText }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-gray-400 text-xs mt-1">
|
||||
{{ t('albumsManage.watermark.previewHint') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── 版本历史 ── -->
|
||||
<div class="mt-6">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="font-medium">{{ t('albumsManage.watermark.jobsTitle') }}</span>
|
||||
<ElButton
|
||||
plain
|
||||
:loading="submitting"
|
||||
:disabled="!status?.current"
|
||||
data-test="watermark-regen-btn"
|
||||
@click="save"
|
||||
>
|
||||
{{ t('albumsManage.watermark.regen') }}
|
||||
</ElButton>
|
||||
</div>
|
||||
<ElTable
|
||||
v-loading="loading"
|
||||
:data="status?.jobs ?? []"
|
||||
size="small"
|
||||
data-test="watermark-jobs-table"
|
||||
>
|
||||
<ElTableColumn :label="t('albumsManage.watermark.colVersion')" width="90">
|
||||
<template #default="{ row }">
|
||||
<span>v{{ row.configVersion }}</span>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn :label="t('albumsManage.watermark.colState')" width="110">
|
||||
<template #default="{ row }">
|
||||
<ElTag :type="jobTagType(row.state)" :data-state="row.state">
|
||||
{{ t(`albumsManage.watermark.state_${row.state}`) }}
|
||||
</ElTag>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn :label="t('albumsManage.watermark.colProgress')" min-width="200">
|
||||
<template #default="{ row }">
|
||||
<ElProgress
|
||||
:percentage="watermarkProgressPercent(row)"
|
||||
:status="row.state === 'failed' ? 'exception' : undefined"
|
||||
data-test="watermark-job-progress"
|
||||
/>
|
||||
<span class="text-gray-400 text-xs">
|
||||
{{ row.progress }} / {{ row.total }}
|
||||
<template v-if="row.failed > 0">
|
||||
· {{ t('albumsManage.watermark.failedCount', { count: row.failed }) }}
|
||||
</template>
|
||||
</span>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn :label="t('albumsManage.watermark.colCreatedAt')" width="160">
|
||||
<template #default="{ row }">
|
||||
<span>{{ formatDateTime(row.createdAt) }}</span>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<template #empty>
|
||||
<ElEmpty v-if="!loading" :description="$t('albumsManage.watermark.jobsEmpty')" />
|
||||
</template>
|
||||
</ElTable>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, onUnmounted, reactive, ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { fetchCreateWatermarkJob, fetchWatermarkJobs } from '@/api/albums'
|
||||
import { formatDateTime } from '@/utils/albums/format'
|
||||
import {
|
||||
buildWatermarkPayload,
|
||||
defaultWatermarkForm,
|
||||
formFromConfig,
|
||||
hasRunningWatermarkJob,
|
||||
previewTextStyle,
|
||||
watermarkProgressPercent,
|
||||
WATERMARK_PREVIEW_HEIGHT,
|
||||
WATERMARK_PREVIEW_WIDTH,
|
||||
type WatermarkFormState
|
||||
} from '@/utils/albums/watermarkForm'
|
||||
|
||||
const props = defineProps<{
|
||||
album: Api.Album.Detail
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const POSITIONS: Api.Album.WatermarkPosition[] = [
|
||||
'topLeft',
|
||||
'topRight',
|
||||
'bottomLeft',
|
||||
'bottomRight',
|
||||
'center'
|
||||
]
|
||||
|
||||
const status = ref<Api.Album.WatermarkJobsStatus | null>(null)
|
||||
const loading = ref(false)
|
||||
const error = ref<Error | null>(null)
|
||||
const submitting = ref(false)
|
||||
|
||||
const form = reactive<WatermarkFormState>(defaultWatermarkForm())
|
||||
|
||||
/** 预览文案：表单文字缺省用相册标题示意 */
|
||||
const previewText = computed(() => {
|
||||
const content = form.textContent.trim()
|
||||
if (content !== '') return content
|
||||
const preferred = props.album.translations.find(
|
||||
(item) => item.locale === props.album.defaultLocale
|
||||
)
|
||||
return preferred?.title ?? 'Watermark'
|
||||
})
|
||||
|
||||
function jobTagType(
|
||||
state: Api.Album.WatermarkJobState
|
||||
): 'success' | 'warning' | 'danger' | 'info' {
|
||||
switch (state) {
|
||||
case 'done':
|
||||
return 'success'
|
||||
case 'running':
|
||||
return 'warning'
|
||||
case 'failed':
|
||||
return 'danger'
|
||||
default:
|
||||
return 'info'
|
||||
}
|
||||
}
|
||||
|
||||
/** 当前配置参数摘要（一行文本） */
|
||||
function configSummary(config: Api.Album.WatermarkConfig): string {
|
||||
const parts = [
|
||||
t(`albumsManage.watermark.position_${config.position ?? 'bottomRight'}`),
|
||||
`${t('albumsManage.watermark.opacityLabel')} ${config.opacity ?? 50}%`,
|
||||
`${t('albumsManage.watermark.scaleLabel')} ${config.scalePercent ?? 20}%`
|
||||
]
|
||||
if (config.text?.content) {
|
||||
parts.push(`${t('albumsManage.watermark.fontSizeLabel')} ${config.text.fontSize ?? 24}`)
|
||||
}
|
||||
return parts.join(' · ')
|
||||
}
|
||||
|
||||
async function load(): Promise<void> {
|
||||
loading.value = true
|
||||
error.value = null
|
||||
try {
|
||||
status.value = await fetchWatermarkJobs(props.album.id)
|
||||
if (status.value.current) {
|
||||
Object.assign(form, formFromConfig(status.value.current.config))
|
||||
}
|
||||
syncPolling()
|
||||
} catch (e) {
|
||||
error.value = e as Error
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 保存配置并发起历史重生成（202 受理 → 刷新状态进入进度模式） */
|
||||
async function save(): Promise<void> {
|
||||
submitting.value = true
|
||||
try {
|
||||
const created = await fetchCreateWatermarkJob(
|
||||
props.album.id,
|
||||
buildWatermarkPayload({ ...form })
|
||||
)
|
||||
ElMessage.success(t('albumsManage.watermark.accepted', { version: created.configVersion }))
|
||||
await load()
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// ── 进度轮询：任一 pending/running 每 3s 刷新，全终态即停 ──
|
||||
let pollTimer: ReturnType<typeof setInterval> | null = null
|
||||
let polling = false
|
||||
|
||||
function syncPolling(): void {
|
||||
const running = hasRunningWatermarkJob(status.value?.jobs ?? [])
|
||||
if (running && pollTimer === null) {
|
||||
pollTimer = setInterval(() => void pollTick(), 3000)
|
||||
} else if (!running && pollTimer !== null) {
|
||||
clearInterval(pollTimer)
|
||||
pollTimer = null
|
||||
}
|
||||
}
|
||||
|
||||
async function pollTick(): Promise<void> {
|
||||
if (polling) return
|
||||
polling = true
|
||||
try {
|
||||
status.value = await fetchWatermarkJobs(props.album.id)
|
||||
syncPolling()
|
||||
} catch {
|
||||
// 单次轮询失败静默（下一周期重试；持续失败由用户手动刷新兜底）
|
||||
} finally {
|
||||
polling = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
void load()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (pollTimer !== null) {
|
||||
clearInterval(pollTimer)
|
||||
pollTimer = null
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -21,9 +21,19 @@
|
||||
<span class="font-medium">{{ titleOf(album) }}</span>
|
||||
<ElTag size="small" type="info">{{ album?.defaultLocale }}</ElTag>
|
||||
</div>
|
||||
<ElButton type="primary" plain data-test="album-detail-edit" @click="editVisible = true">
|
||||
{{ $t('albumsManage.detail.edit') }}
|
||||
</ElButton>
|
||||
<div class="flex items-center gap-2">
|
||||
<ElButton plain data-test="album-detail-transfer" @click="transferVisible = true">
|
||||
{{ $t('albumsManage.transfer.entry') }}
|
||||
</ElButton>
|
||||
<ElButton
|
||||
type="primary"
|
||||
plain
|
||||
data-test="album-detail-edit"
|
||||
@click="editVisible = true"
|
||||
>
|
||||
{{ $t('albumsManage.detail.edit') }}
|
||||
</ElButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -82,6 +92,18 @@
|
||||
<ElDescriptionsItem :label="$t('albumsManage.detail.fieldUpdatedAt')">
|
||||
{{ formatDateTime(album.updatedAt) }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem :label="$t('albumsManage.detail.fieldStatsSyncedAt')">
|
||||
<span data-test="album-detail-stats-synced-at">
|
||||
{{
|
||||
album.statsSyncedAt
|
||||
? formatDateTime(album.statsSyncedAt)
|
||||
: $t('albumsManage.detail.statsNotSynced')
|
||||
}}
|
||||
</span>
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem :label="$t('albumsManage.detail.fieldOwnerId')">
|
||||
<span data-test="album-detail-owner-id">{{ album.ownerId }}</span>
|
||||
</ElDescriptionsItem>
|
||||
</ElDescriptions>
|
||||
|
||||
<div v-if="album" class="mt-5">
|
||||
@@ -111,10 +133,30 @@
|
||||
</template>
|
||||
<AlbumCategories :album="album" @changed="load" />
|
||||
</ElTabPane>
|
||||
<ElTabPane name="watermark">
|
||||
<template #label>
|
||||
<span data-test="album-watermark-tab">
|
||||
{{ $t('albumsManage.detail.tabWatermark') }}
|
||||
</span>
|
||||
</template>
|
||||
<AlbumWatermark :album="album" />
|
||||
</ElTabPane>
|
||||
<ElTabPane name="share">
|
||||
<template #label>
|
||||
<span data-test="album-share-tab">{{ $t('albumsManage.detail.tabShare') }}</span>
|
||||
</template>
|
||||
<AlbumShareCard :album="album" />
|
||||
</ElTabPane>
|
||||
</ElTabs>
|
||||
</ElCard>
|
||||
|
||||
<AlbumFormDialog v-if="album" v-model="editVisible" :album="album" @saved="onAlbumSaved" />
|
||||
<AlbumTransferDialog
|
||||
v-if="album"
|
||||
v-model="transferVisible"
|
||||
:album="album"
|
||||
@saved="onTransferred"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -129,6 +171,9 @@
|
||||
import AlbumMembers from './AlbumMembers.vue'
|
||||
import AlbumCategories from './AlbumCategories.vue'
|
||||
import AlbumPhotos from './AlbumPhotos.vue'
|
||||
import AlbumWatermark from './AlbumWatermark.vue'
|
||||
import AlbumShareCard from './AlbumShareCard.vue'
|
||||
import AlbumTransferDialog from './AlbumTransferDialog.vue'
|
||||
import { fetchAlbum } from '@/api/albums'
|
||||
import { formatDateTime } from '@/utils/albums/format'
|
||||
|
||||
@@ -144,6 +189,7 @@
|
||||
const loading = ref(false)
|
||||
const error = ref<Error | null>(null)
|
||||
const editVisible = ref(false)
|
||||
const transferVisible = ref(false)
|
||||
const activeTab = ref('photos')
|
||||
|
||||
async function load() {
|
||||
@@ -163,6 +209,11 @@
|
||||
album.value = saved
|
||||
}
|
||||
|
||||
/** 交接成功：回包 ownerId 已变更，原位替换相册详情 */
|
||||
function onTransferred(transferred: Api.Album.Detail) {
|
||||
album.value = transferred
|
||||
}
|
||||
|
||||
function titleOf(target: Api.Album.Detail | null): string {
|
||||
if (!target) return ''
|
||||
const preferred = target.translations.find((item) => item.locale === target.defaultLocale)
|
||||
|
||||
@@ -0,0 +1,102 @@
|
||||
<!-- 阈值设置对话框（P4a Task 9 / A23）：两维度各以「启用开关 + GB 输入」
|
||||
表达——开关关闭=显式 null 清除（告警停用），开启=GB→bytes 提交。
|
||||
保存后服务端即刻重新评估（超阈产生新告警/阈值上调解除旧告警）。 -->
|
||||
<template>
|
||||
<ElDialog
|
||||
v-model="visible"
|
||||
:title="$t('usage.thresholds.title')"
|
||||
width="520px"
|
||||
destroy-on-close
|
||||
data-test="thresholds-dialog"
|
||||
>
|
||||
<ElForm label-width="150px">
|
||||
<ElFormItem :label="$t('usage.thresholds.storageLabel')">
|
||||
<div class="flex items-center gap-3">
|
||||
<ElSwitch v-model="draft.storage.enabled" data-test="thresholds-storage-switch" />
|
||||
<!-- key 随开关重挂：element-plus 2.11 的 input-number 只在 mount 时写
|
||||
内层 input 的 aria-disabled，prop 后续变化不重写——重挂保持无障碍
|
||||
状态与实际一致（e2e fill 亦据此判定可编辑） -->
|
||||
<ElInputNumber
|
||||
:key="`storage-${draft.storage.enabled}`"
|
||||
v-model="draft.storage.gb"
|
||||
:min="0"
|
||||
:precision="3"
|
||||
:step="1"
|
||||
:disabled="!draft.storage.enabled"
|
||||
data-test="thresholds-storage-input"
|
||||
/>
|
||||
<span class="text-gray-400">GB</span>
|
||||
</div>
|
||||
</ElFormItem>
|
||||
<ElFormItem :label="$t('usage.thresholds.perAlbumLabel')">
|
||||
<div class="flex items-center gap-3">
|
||||
<ElSwitch v-model="draft.perAlbum.enabled" data-test="thresholds-per-album-switch" />
|
||||
<ElInputNumber
|
||||
:key="`per-album-${draft.perAlbum.enabled}`"
|
||||
v-model="draft.perAlbum.gb"
|
||||
:min="0"
|
||||
:precision="9"
|
||||
:step="1"
|
||||
:disabled="!draft.perAlbum.enabled"
|
||||
data-test="thresholds-per-album-input"
|
||||
/>
|
||||
<span class="text-gray-400">GB</span>
|
||||
</div>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
<div class="text-gray-400 text-sm">{{ t('usage.thresholds.hint') }}</div>
|
||||
|
||||
<template #footer>
|
||||
<ElButton data-test="thresholds-cancel" @click="visible = false">
|
||||
{{ t('common.cancel') }}
|
||||
</ElButton>
|
||||
<ElButton type="primary" :loading="submitting" data-test="thresholds-submit" @click="submit">
|
||||
{{ t('usage.thresholds.submit') }}
|
||||
</ElButton>
|
||||
</template>
|
||||
</ElDialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { fetchUpdateUsageThresholds } from '@/api/usage'
|
||||
import {
|
||||
buildThresholdsPayload,
|
||||
draftFromThresholds,
|
||||
type ThresholdsDraft
|
||||
} from '@/utils/albums/usageStorage'
|
||||
|
||||
const props = defineProps<{
|
||||
/** 当前阈值（打开时回填表单） */
|
||||
thresholds: Api.Usage.Thresholds
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
/** 保存成功（回传服务端确认后的阈值） */
|
||||
saved: [thresholds: Api.Usage.Thresholds]
|
||||
}>()
|
||||
|
||||
const visible = defineModel<boolean>({ default: false })
|
||||
const { t } = useI18n()
|
||||
|
||||
const draft = reactive<ThresholdsDraft>(draftFromThresholds(props.thresholds))
|
||||
const submitting = ref(false)
|
||||
|
||||
watch(visible, (open) => {
|
||||
if (open) Object.assign(draft, draftFromThresholds(props.thresholds))
|
||||
})
|
||||
|
||||
async function submit(): Promise<void> {
|
||||
submitting.value = true
|
||||
try {
|
||||
const saved = await fetchUpdateUsageThresholds(buildThresholdsPayload(draft))
|
||||
ElMessage.success(t('usage.thresholds.saved'))
|
||||
visible.value = false
|
||||
emit('saved', saved)
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,204 @@
|
||||
<!-- 用量页（P4a Task 9 / A23 后台侧）：合计头卡（照片数/总存储/阈值）+
|
||||
相册用量表（title/photoCount/originalBytes/variantBytes/totalBytes
|
||||
人类可读）+ 阈值设置对话框 + 告警列表（未解决红/已解决灰，含信息与时间）。 -->
|
||||
<template>
|
||||
<div class="p-5">
|
||||
<!-- ── 合计头卡 ── -->
|
||||
<div class="grid gap-4 mb-4 sm:grid-cols-3" data-test="usage-totals">
|
||||
<ElCard shadow="never">
|
||||
<div class="text-gray-500 text-sm">{{ $t('usage.totals.photoCount') }}</div>
|
||||
<div class="text-2xl font-medium mt-1" data-test="usage-total-photos">
|
||||
{{ summary?.totals.photoCount ?? '-' }}
|
||||
</div>
|
||||
</ElCard>
|
||||
<ElCard shadow="never">
|
||||
<div class="text-gray-500 text-sm">{{ $t('usage.totals.totalBytes') }}</div>
|
||||
<div class="text-2xl font-medium mt-1" data-test="usage-total-bytes">
|
||||
{{ summary ? formatBytes(summary.totals.totalBytes) : '-' }}
|
||||
</div>
|
||||
</ElCard>
|
||||
<ElCard shadow="never">
|
||||
<div class="text-gray-500 text-sm">{{ $t('usage.totals.thresholds') }}</div>
|
||||
<div class="mt-1 flex flex-wrap gap-2" data-test="usage-threshold-tags">
|
||||
<ElTag size="small" :type="summary?.thresholds.storageBytes ? 'success' : 'info'">
|
||||
{{ $t('usage.thresholds.storageShort') }}
|
||||
{{
|
||||
summary?.thresholds.storageBytes
|
||||
? formatBytes(summary.thresholds.storageBytes)
|
||||
: $t('usage.thresholds.off')
|
||||
}}
|
||||
</ElTag>
|
||||
<ElTag size="small" :type="summary?.thresholds.perAlbumBytes ? 'success' : 'info'">
|
||||
{{ $t('usage.thresholds.perAlbumShort') }}
|
||||
{{
|
||||
summary?.thresholds.perAlbumBytes
|
||||
? formatBytes(summary.thresholds.perAlbumBytes)
|
||||
: $t('usage.thresholds.off')
|
||||
}}
|
||||
</ElTag>
|
||||
</div>
|
||||
</ElCard>
|
||||
</div>
|
||||
|
||||
<!-- ── 相册用量 + 告警 ── -->
|
||||
<ElCard data-test="usage-albums-card">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<span>{{ $t('usage.albums.title') }}</span>
|
||||
<ElButton
|
||||
type="primary"
|
||||
plain
|
||||
data-test="usage-thresholds-btn"
|
||||
@click="thresholdsVisible = true"
|
||||
>
|
||||
{{ $t('usage.thresholds.entry') }}
|
||||
</ElButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<ElAlert v-if="error && !summary" type="error" :closable="false" data-test="usage-error">
|
||||
<div class="flex items-center gap-2">
|
||||
<span>{{ $t('usage.loadFailed') }}：{{ error.message }}</span>
|
||||
<ElButton size="small" data-test="usage-retry" @click="load">
|
||||
{{ $t('usage.retry') }}
|
||||
</ElButton>
|
||||
</div>
|
||||
</ElAlert>
|
||||
|
||||
<ElTable
|
||||
v-else
|
||||
v-loading="loading"
|
||||
:data="summary?.albums ?? []"
|
||||
data-test="usage-albums-table"
|
||||
>
|
||||
<ElTableColumn :label="$t('usage.albums.colTitle')" min-width="180">
|
||||
<template #default="{ row }">
|
||||
<span>{{ row.title || row.albumId }}</span>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn :label="$t('usage.albums.colPhotoCount')" width="110">
|
||||
<template #default="{ row }">
|
||||
<span>{{ row.photoCount }}</span>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn :label="$t('usage.albums.colOriginal')" min-width="120">
|
||||
<template #default="{ row }">
|
||||
<span class="text-gray-500">{{ formatBytes(row.originalBytes) }}</span>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn :label="$t('usage.albums.colVariant')" min-width="120">
|
||||
<template #default="{ row }">
|
||||
<span class="text-gray-500">{{ formatBytes(row.variantBytes) }}</span>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn :label="$t('usage.albums.colTotal')" min-width="120">
|
||||
<template #default="{ row }">
|
||||
<span class="font-medium">{{ formatBytes(row.totalBytes) }}</span>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<template #empty>
|
||||
<ElEmpty v-if="!loading" :description="$t('usage.albums.empty')" />
|
||||
</template>
|
||||
</ElTable>
|
||||
</ElCard>
|
||||
|
||||
<!-- ── 告警列表 ── -->
|
||||
<ElCard class="mt-4" data-test="usage-alerts-card">
|
||||
<template #header>
|
||||
<span>{{ $t('usage.alerts.title') }}</span>
|
||||
</template>
|
||||
<ElTable
|
||||
:data="summary?.alerts ?? []"
|
||||
data-test="usage-alerts-table"
|
||||
:row-class-name="alertRowClass"
|
||||
>
|
||||
<ElTableColumn :label="$t('usage.alerts.colState')" width="110">
|
||||
<template #default="{ row }">
|
||||
<ElTag
|
||||
:type="alertTagType(row)"
|
||||
:effect="isAlertActive(row) ? 'light' : 'plain'"
|
||||
data-test="alert-state-tag"
|
||||
>
|
||||
{{ isAlertActive(row) ? $t('usage.alerts.active') : $t('usage.alerts.resolved') }}
|
||||
</ElTag>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn :label="$t('usage.alerts.colKind')" width="110">
|
||||
<template #default="{ row }">
|
||||
<ElTag :type="row.kind === 'storage' ? 'warning' : 'info'" effect="plain">
|
||||
{{ $t(`usage.alerts.kind_${row.kind}`) }}
|
||||
</ElTag>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn :label="$t('usage.alerts.colMessage')" min-width="220">
|
||||
<template #default="{ row }">
|
||||
<span class="text-sm break-all" data-test="alert-message">{{ row.message }}</span>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn :label="$t('usage.alerts.colCreatedAt')" width="160">
|
||||
<template #default="{ row }">
|
||||
<span>{{ formatDateTime(row.createdAt) }}</span>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn :label="$t('usage.alerts.colResolvedAt')" width="160">
|
||||
<template #default="{ row }">
|
||||
<span class="text-gray-500">{{ formatDateTime(row.resolvedAt) }}</span>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<template #empty>
|
||||
<ElEmpty v-if="!loading" :description="$t('usage.alerts.empty')" />
|
||||
</template>
|
||||
</ElTable>
|
||||
</ElCard>
|
||||
|
||||
<ThresholdsDialog
|
||||
v-if="summary"
|
||||
v-model="thresholdsVisible"
|
||||
:thresholds="summary.thresholds"
|
||||
@saved="onThresholdsSaved"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { fetchUsageSummary } from '@/api/usage'
|
||||
import { formatBytes, formatDateTime } from '@/utils/albums/format'
|
||||
import { alertTagType, isAlertActive } from '@/utils/albums/usageStorage'
|
||||
import ThresholdsDialog from './ThresholdsDialog.vue'
|
||||
|
||||
defineOptions({ name: 'SystemUsage' })
|
||||
|
||||
const summary = ref<Api.Usage.SummaryResponse | null>(null)
|
||||
const loading = ref(false)
|
||||
const error = ref<Error | null>(null)
|
||||
const thresholdsVisible = ref(false)
|
||||
|
||||
async function load(): Promise<void> {
|
||||
loading.value = true
|
||||
error.value = null
|
||||
try {
|
||||
summary.value = await fetchUsageSummary()
|
||||
} catch (e) {
|
||||
error.value = e as Error
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 阈值保存后刷新整页（服务端保存即评估——新告警/解除即时可见） */
|
||||
function onThresholdsSaved(thresholds: Api.Usage.Thresholds): void {
|
||||
if (summary.value) summary.value = { ...summary.value, thresholds }
|
||||
void load()
|
||||
}
|
||||
|
||||
/** 告警行 class（e2e 锚点：未解决/已解决行区分）。ElTable row-class-name
|
||||
* 回调载荷是 {row, rowIndex}——解构取行，直接收行会把整个载荷当行判态。 */
|
||||
function alertRowClass({ row }: { row: Api.Usage.AlertItem }): string {
|
||||
return isAlertActive(row) ? 'alert-row-active' : 'alert-row-resolved'
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
void load()
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user