	ID	{{ locale.cardCode }}	{{ locale.status }}	{{ locale.note }}	{{ locale.time }}	{{ locale.actions }}
	{{ item.id }}	{{ item.code }}	{{ statusMeta(item.status).label }} {{ getLocaleMessage('lockedAt', formatDate(item.lockedAt)) }} {{ item.lockedAt ? ' · ' : '' }}{{ getLocaleMessage('redeemedAt', formatDate(item.redeemedAt)) }}	<button class="text-[10px] font-black uppercase tracking-[0.2em] text-primary hover:text-primary transition-colors" @click="saveNote(item)"> {{ locale.saveNote }} </button> </div> </td> <td class="px-3 py-3 align-top text-[11px] text-text-tertiary leading-relaxed"> <p>{{ getLocaleMessage('createdAt', formatDate(item.createdAt)) }}</p> <p>{{ getLocaleMessage('updatedAt', formatDate(item.updatedAt)) }}</p> </td> <td class="px-3 py-3 align-top"> <div class="flex flex-wrap gap-2"> <button class="rounded-lg border border-border-secondary bg-bg-primary px-2.5 py-1.5 text-[11px] font-bold text-text-secondary" @click="updateStatus([item.id], 'AVAILABLE')">{{ locale.available }}</button> <button class="rounded-lg border border-border-secondary bg-bg-primary px-2.5 py-1.5 text-[11px] font-bold text-warning" @click="updateStatus([item.id], 'LOCKED')">{{ locale.locked }}</button> <button class="rounded-lg border border-border-secondary bg-bg-primary px-2.5 py-1.5 text-[11px] font-bold text-success" @click="updateStatus([item.id], 'REDEEMED')">{{ locale.redeemed }}</button> <button class="rounded-lg border border-border-secondary bg-bg-primary px-2.5 py-1.5 text-[11px] font-bold text-error" @click="updateStatus([item.id], 'INVALID')">{{ locale.invalid }}</button> </div> </td> </tr> <tr v-if="!codes.length"> <td colspan="7" class="px-3 py-10 text-center text-sm text-text-tertiary">{{ locale.empty }}</td> </tr> </tbody> </table> </div> <Pagination v-model:current-page="pagination.page" :total-pages="pagination.totalPages" :total-items="pagination.total" :item-name="locale.itemName" @change="fetchCodes" /> </section> <section class="space-y-4"> <div class="rounded-2xl border border-border-secondary bg-bg-secondary-40 p-4 space-y-3"> <div class="flex items-center justify-between gap-3"> <div> <h3 class="text-sm font-black text-text-primary">{{ locale.createTitle }}</h3> <p class="mt-1 text-[11px] text-text-tertiary">{{ locale.createDesc }}</p> </div> <div class="inline-flex shrink-0 rounded-xl border border-border-secondary bg-bg-primary p-1"> <button :class="['min-w-[72px] whitespace-nowrap px-2.5 py-1.5 rounded-lg text-xs font-bold transition-colors', createMode === 'manual' ? 'bg-bg-tertiary text-text-primary' : 'text-text-tertiary']" @click="createMode = 'manual'" > {{ locale.manualImport }} </button> <button :class="['min-w-[72px] whitespace-nowrap px-2.5 py-1.5 rounded-lg text-xs font-bold transition-colors', createMode === 'generate' ? 'bg-bg-tertiary text-text-primary' : 'text-text-tertiary']" @click="createMode = 'generate'" > {{ locale.autoGenerate }} </button> </div> </div> <div v-if="createMode === 'manual'" class="space-y-3"> <textarea v-model="manualCodes" rows="4" :placeholder="locale.manualPlaceholder" class="w-full resize-none rounded-xl border border-border-secondary bg-bg-primary px-3 py-2.5 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:border-primary-40" /> </div> <div v-else class="grid grid-cols-2 gap-2.5"> <div> <label class="mb-1.5 block text-[10px] font-black uppercase tracking-[0.2em] text-text-tertiary">{{ locale.generateCount }}</label> <input v-model.number="generateForm.count" type="number" min="1" class="w-full rounded-xl border border-border-secondary bg-bg-primary px-3 py-2 text-sm text-text-primary focus:outline-none focus:border-primary-40"> </div> <div> <label class="mb-1.5 block text-[10px] font-black uppercase tracking-[0.2em] text-text-tertiary">{{ locale.prefix }}</label> <input v-model="generateForm.prefix" type="text" :placeholder="locale.prefixPlaceholder" class="w-full rounded-xl border border-border-secondary bg-bg-primary px-3 py-2 text-sm text-text-primary focus:outline-none focus:border-primary-40"> </div> <div> <label class="mb-1.5 block text-[10px] font-black uppercase tracking-[0.2em] text-text-tertiary">{{ locale.randomLength }}</label> <input v-model.number="generateForm.length" type="number" min="4" max="32" class="w-full rounded-xl border border-border-secondary bg-bg-primary px-3 py-2 text-sm text-text-primary focus:outline-none focus:border-primary-40"> </div> <div> <label class="mb-1.5 block text-[10px] font-black uppercase tracking-[0.2em] text-text-tertiary">{{ locale.charset }}</label> <input v-model="generateForm.charset" type="text" class="w-full rounded-xl border border-border-secondary bg-bg-primary px-3 py-2 text-sm text-text-primary focus:outline-none focus:border-primary-40"> </div> </div> <div> <label class="mb-1.5 block text-[10px] font-black uppercase tracking-[0.2em] text-text-tertiary">{{ locale.note }}</label> <input v-model="createNote" type="text" :placeholder="locale.bulkNotePlaceholder" class="w-full rounded-xl border border-border-secondary bg-bg-primary px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:border-primary-40"> </div> <div class="flex flex-wrap gap-2"> <button class="flex items-center gap-2 rounded-xl bg-primary-hover px-3.5 py-2 text-xs font-black text-text-primary hover:bg-primary transition-colors disabled:opacity-50" :disabled="saving" @click="createCodes" > <Plus :size="14" /> {{ locale.createCardCode }} </button> <button class="rounded-xl border border-border-secondary bg-bg-primary px-3.5 py-2 text-xs font-bold text-text-secondary" @click="fillDemoCodes"> {{ locale.fillDemo }} </button> </div> <div v-if="createMode === 'generate' && lastGeneratedCodes.length" class="rounded-2xl border border-border-secondary bg-bg-primary-60 p-3 space-y-3" > <div class="flex flex-wrap items-center justify-between gap-2"> <div> <p class="text-xs font-black text-text-primary">{{ getLocaleMessage('lastGeneratedTitle', lastGeneratedCodes.length) }}</p> <p class="mt-1 text-[11px] text-text-tertiary">{{ locale.lastGeneratedDesc }}</p> </div> <button class="flex items-center gap-2 rounded-xl border border-border-secondary bg-bg-primary px-3 py-2 text-xs font-bold text-text-secondary hover:border-border-tertiary hover:text-text-primary transition-colors" @click="copyLastGeneratedCodes" > <Copy :size="14" /> {{ locale.copyAll }} </button> </div> <div class="max-h-32 overflow-y-auto rounded-xl border border-border-secondary bg-bg-primary p-3 font-mono text-xs leading-relaxed text-text-primary"> <p v-for="code in lastGeneratedCodes" :key="code" class="break-all">{{ code }}</p> </div> </div> </div> <div class="rounded-2xl border border-border-secondary bg-bg-secondary-40 p-4 space-y-3"> <h3 class="text-sm font-black text-text-primary uppercase tracking-[0.24em]">{{ locale.quickTipsTitle }}</h3> <ul class="space-y-2 text-[12px] leading-relaxed text-text-tertiary"> <li v-for="tip in locale.quickTips" :key="tip" class="flex items-start gap-2"> <span class="shrink-0 text-text-disabled">·</span> <span>{{ tip }}</span> </li> </ul> </div> </section> </div> <section class="rounded-2xl border border-border-secondary bg-bg-secondary-40 p-5 space-y-4"> <div class="flex items-center justify-between gap-3"> <div> <h3 class="text-sm font-black text-text-primary uppercase tracking-[0.24em]">{{ locale.redeemLogsTitle }}</h3> <p class="mt-1 text-[11px] text-text-tertiary">{{ locale.redeemLogsDesc }}</p> </div> <button class="rounded-xl border border-border-secondary bg-bg-primary px-3 py-2 text-xs font-bold text-text-secondary" @click="fetchRedeemLogs" > {{ locale.refreshLogs }} </button> </div> <div class="grid grid-cols-1 gap-3 xl:grid-cols-6"> <div class="xl:col-span-2"> <label class="mb-2 block text-[10px] font-black uppercase tracking-[0.2em] text-text-tertiary">{{ locale.keyword }}</label> <input v-model="logFilters.q" type="text" :placeholder="locale.logSearchPlaceholder" class="w-full rounded-xl border border-border-secondary bg-bg-primary px-3 py-2.5 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:border-primary-40" @keyup.enter="fetchRedeemLogs" > </div> <div> <label class="mb-2 block text-[10px] font-black uppercase tracking-[0.2em] text-text-tertiary">{{ locale.source }}</label> <select v-model="logFilters.source" class="w-full rounded-xl border border-border-secondary bg-bg-primary px-3 py-2.5 text-sm text-text-primary focus:outline-none focus:border-primary-40" > <option value="">{{ locale.allSources }}</option> <option value="ADMIN_MANUAL">{{ locale.sources?.adminManual \|\| '手动核销' }}</option> <option value="SCHEDULE_AUTO">{{ locale.sources?.scheduleAuto \|\| '排期自动' }}</option> <option value="SCHEDULE_REMOVE">{{ locale.sources?.scheduleRemove \|\| '移除排期' }}</option> </select> </div> <div> <label class="mb-2 block text-[10px] font-black uppercase tracking-[0.2em] text-text-tertiary">{{ locale.redeemer }}</label> <input v-model="logFilters.redeemer" type="text" :placeholder="locale.redeemerPlaceholder" class="w-full rounded-xl border border-border-secondary bg-bg-primary px-3 py-2.5 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:border-primary-40" > </div> <div> <label class="mb-2 block text-[10px] font-black uppercase tracking-[0.2em] text-text-tertiary">{{ locale.startDate }}</label> <input v-model="logFilters.startDate" type="date" class="w-full rounded-xl border border-border-secondary bg-bg-primary px-3 py-2.5 text-sm text-text-primary focus:outline-none focus:border-primary-40" > </div> <div> <label class="mb-2 block text-[10px] font-black uppercase tracking-[0.2em] text-text-tertiary">{{ locale.endDate }}</label> <input v-model="logFilters.endDate" type="date" class="w-full rounded-xl border border-border-secondary bg-bg-primary px-3 py-2.5 text-sm text-text-primary focus:outline-none focus:border-primary-40" > </div> </div> <div class="flex flex-wrap gap-2"> <button class="rounded-xl bg-primary-hover px-4 py-2 text-xs font-black text-text-primary hover:bg-primary transition-colors" @click="fetchRedeemLogs" > {{ locale.queryLogs }} </button> <button class="rounded-xl border border-border-secondary bg-bg-primary px-4 py-2 text-xs font-bold text-text-secondary" @click="resetLogFilters" > {{ locale.clearConditions }} </button> </div> <div v-if="logsLoading" class="rounded-xl border border-border-secondary bg-bg-primary-60 p-6 text-center text-sm text-text-tertiary"> {{ locale.loadingLogs }} </div> <div v-else class="overflow-hidden rounded-2xl border border-border-secondary"> <table class="min-w-full text-left text-sm"> <thead class="bg-bg-primary-80 text-text-tertiary"> <tr> <th class="px-3 py-3 w-20">{{ locale.logId }}</th> <th class="px-3 py-3">{{ locale.cardCode }}</th> <th class="px-3 py-3 w-28">{{ locale.source }}</th> <th class="px-3 py-3 w-56">{{ locale.redeemer }}</th> <th class="px-3 py-3 w-40">{{ locale.redeemedTime }}</th> <th class="px-3 py-3">{{ locale.relatedSong }}</th> </tr> </thead> <tbody> <tr v-for="item in redeemLogs" :key="item.id" class="border-t border-border-secondary-80 hover:bg-bg-primary-70 transition-colors" > <td class="px-3 py-3 text-text-tertiary">{{ item.id }}</td> <td class="px-3 py-3 font-mono text-text-primary break-all">{{ item.code \|\| item.codeSnapshot }}</td> <td class="px-3 py-3"> <span :class="['inline-flex items-center rounded-full px-2.5 py-1 text-[10px] font-black tracking-[0.2em]', logSourceMeta(item.source).class]"> {{ logSourceMeta(item.source).label }} </span> </td> <td class="px-3 py-3 text-text-secondary"> {{ item.redeemer?.name \|\| locale.unknownUser }} <span class="text-text-tertiary">({{ item.redeemer?.username \|\| 'unknown' }})</span> </td> <td class="px-3 py-3 text-text-tertiary">{{ formatDate(item.redeemedAt) }}</td> <td class="px-3 py-3 text-text-secondary"> <span v-if="item.song">{{ item.song.title }}<span class="text-text-tertiary">{{ item.song.artist ? ` · ${item.song.artist}` : '' }}</span></span> <span v-else class="text-text-tertiary">—</span> </td> </tr> <tr v-if="!redeemLogs.length"> <td colspan="6" class="px-3 py-8 text-center text-sm text-text-tertiary">{{ locale.noRedeemLogs }}</td> </tr> </tbody> </table> </div> </section> </div> </template> <script setup> import { computed, onMounted, ref } from 'vue' import { Copy, Download, Plus, RefreshCw, Search } from '@lucide/vue' import CustomSelect from '~/components/UI/Common/CustomSelect.vue' import Pagination from '~/components/UI/Common/Pagination.vue' import { useToast } from '~/composables/useToast' import { useLocale } from '~/utils/locale' const { showToast } = useToast() const { admin } = useLocale() const locale = computed(() => admin.value?.cardCodesManager \|\| {}) const { msg: getLocaleMessage, nested: getNestedMessage } = useLocaleText(locale) const codes = ref([]) const redeemLogs = ref([]) const loading = ref(false) const logsLoading = ref(false) const saving = ref(false) const exporting = ref(false) const selectedIds = ref([]) const bulkStatus = ref('AVAILABLE') const pagination = ref({ page: 1, limit: 10, total: 0, totalPages: 1 }) const cardStats = ref({ total: 0, available: 0, locked: 0, redeemed: 0 }) const filters = ref({ q: '', status: '' }) const logFilters = ref({ q: '', source: '', redeemer: '', startDate: '', endDate: '' }) const createMode = ref('manual') const manualCodes = ref('') const createNote = ref('') const generateForm = ref({ count: 20, prefix: 'VH-', length: 10, charset: 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789' }) const lastGeneratedCodes = ref([]) const statusFilterOptions = computed(() => [ { label: locale.value?.allStatus \|\| 'All Status', value: '' }, { label: locale.value?.available \|\| 'Available', value: 'AVAILABLE' }, { label: locale.value?.lockedStatus \|\| 'Locked', value: 'LOCKED' }, { label: locale.value?.redeemedStatus \|\| 'Redeemed', value: 'REDEEMED' }, { label: locale.value?.invalidStatus \|\| 'Invalid', value: 'INVALID' } ]) const bulkStatusOptions = computed(() => [ { label: locale.value?.setAvailable \|\| 'Set Available', value: 'AVAILABLE' }, { label: locale.value?.setLocked \|\| 'Set Locked', value: 'LOCKED' }, { label: locale.value?.setRedeemed \|\| 'Set Redeemed', value: 'REDEEMED' }, { label: locale.value?.setInvalid \|\| 'Set Invalid', value: 'INVALID' } ]) const statusMeta = (status) => { const statusMap = { AVAILABLE: { label: locale.value?.available \|\| 'Available', class: 'bg-success-10 text-success border border-success-20' }, LOCKED: { label: locale.value?.locked \|\| 'Locked', class: 'bg-warning-10 text-warning border border-warning-20' }, REDEEMED: { label: locale.value?.redeemed \|\| 'Redeemed', class: 'bg-primary-10 text-primary border border-primary-20' }, INVALID: { label: locale.value?.invalid \|\| 'Invalid', class: 'bg-error-10 text-error border border-error-20' } } return statusMap[status] \|\| { label: status \|\| locale.value?.unknown \|\| 'Unknown', class: 'bg-bg-quaternary-10 text-text-secondary border border-border-tertiary-20' } } const logSourceMeta = (source) => { const sourceMap = { ADMIN_MANUAL: { label: locale.value?.sources?.adminManual \|\| 'Manual Redeem', class: 'bg-primary-10 text-primary border border-primary-20' }, ADMIN: { label: locale.value?.sources?.admin \|\| 'Admin Action', class: 'bg-primary-10 text-primary border border-primary-20' }, SCHEDULE_AUTO: { label: locale.value?.sources?.scheduleAuto \|\| 'Schedule Auto', class: 'bg-success-10 text-success border border-success-20' }, SCHEDULE_REMOVE: { label: locale.value?.sources?.scheduleRemove \|\| 'Schedule Remove', class: 'bg-warning-10 text-warning border border-warning-20' }, SCHEDULE: { label: locale.value?.sources?.schedule \|\| 'Schedule', class: 'bg-success-10 text-success border border-success-20' }, WITHDRAW: { label: locale.value?.sources?.withdraw \|\| 'Withdraw', class: 'bg-warning-10 text-warning border border-warning-20' }, UNKNOWN: { label: locale.value?.unknown \|\| 'Unknown', class: 'bg-bg-quaternary-10 text-text-secondary border border-border-tertiary-20' } } return sourceMap[source] \|\| sourceMap.UNKNOWN } const stats = computed(() => { const total = cardStats.value?.total ?? 0 const available = cardStats.value?.available ?? 0 const locked = cardStats.value?.locked ?? 0 const redeemed = cardStats.value?.redeemed ?? 0 return [ { label: locale.value?.stats?.total \|\| 'Total', value: total, hint: locale.value?.stats?.all \|\| 'All', badgeClass: 'bg-bg-tertiary text-text-primary' }, { label: locale.value?.stats?.available \|\| 'Available', value: available, hint: locale.value?.stats?.unused \|\| 'Unused', badgeClass: 'bg-success-10 text-success' }, { label: locale.value?.stats?.locked \|\| 'Locked', value: locked, hint: locale.value?.stats?.pendingRedeem \|\| 'Pending redeem', badgeClass: 'bg-warning-10 text-warning' }, { label: locale.value?.stats?.redeemed \|\| 'Redeemed', value: redeemed, hint: locale.value?.stats?.completed \|\| 'Completed', badgeClass: 'bg-primary-10 text-primary' } ] }) const allVisibleSelected = computed(() => codes.value.length > 0 && codes.value.every((item) => selectedIds.value.includes(item.id))) const someVisibleSelected = computed(() => codes.value.some((item) => selectedIds.value.includes(item.id))) const exportButtonText = computed(() => (selectedIds.value.length ? getLocaleMessage('exportSelected', selectedIds.value.length) : getLocaleMessage('exportFiltered'))) const queryString = computed(() => { const query = new URLSearchParams() if (filters.value.q.trim()) query.set('q', filters.value.q.trim()) if (filters.value.status) query.set('status', filters.value.status) query.set('page', String(pagination.value.page)) query.set('limit', String(pagination.value.limit)) return query.toString() }) const normalizeRows = (rows) => rows.map((row) => { const existing = codes.value.find((item) => item.id === row.id) const hasUnsavedNote = existing && existing.noteDraft !== (existing.note \|\| '') return { ...row, noteDraft: hasUnsavedNote ? existing.noteDraft : (row.note \|\| '') } }) const fetchCodes = async (page = pagination.value.page) => { const nextPage = Number(page) pagination.value.page = Number.isFinite(nextPage) && nextPage > 0 ? nextPage : 1 loading.value = true try { const res = await $fetch(`/api/admin/card-codes?${queryString.value}`) if (res?.success) { codes.value = normalizeRows(res.data \|\| []) pagination.value = { ...pagination.value, ...(res.pagination \|\| {}), totalPages: Math.max(1, Number(res.pagination?.totalPages \|\| 1)) } cardStats.value = { total: Number(res.stats?.total \|\| 0), available: Number(res.stats?.available \|\| 0), locked: Number(res.stats?.locked \|\| 0), redeemed: Number(res.stats?.redeemed \|\| 0) } } } catch (error) { console.error('获取点歌券失败', error) showToast(getNestedMessage('messages', 'fetchFailed'), 'error') } finally { loading.value = false } } const fetchRedeemLogs = async () => { logsLoading.value = true try { const query = new URLSearchParams() query.set('limit', '80') if (logFilters.value.q.trim()) query.set('q', logFilters.value.q.trim()) if (logFilters.value.source) query.set('source', logFilters.value.source) if (logFilters.value.redeemer.trim()) query.set('redeemer', logFilters.value.redeemer.trim()) if (logFilters.value.startDate) query.set('startDate', logFilters.value.startDate) if (logFilters.value.endDate) query.set('endDate', logFilters.value.endDate) const res = await $fetch(`/api/admin/card-codes/redeem-logs?${query.toString()}`) if (res?.success) { redeemLogs.value = Array.isArray(res.data) ? res.data : [] } } catch (error) { console.error('获取点歌券兑换日志失败', error) showToast(getNestedMessage('messages', 'fetchLogsFailed'), 'error') } finally { logsLoading.value = false } } const resetLogFilters = async () => { logFilters.value = { q: '', source: '', redeemer: '', startDate: '', endDate: '' } await fetchRedeemLogs() } const refreshAll = async () => { await Promise.all([fetchCodes(), fetchRedeemLogs()]) } const resetFilters = async () => { filters.value = { q: '', status: '' } await fetchCodes(1) } const clearSelection = () => { selectedIds.value = [] } const toggleSelect = (id) => { if (selectedIds.value.includes(id)) { selectedIds.value = selectedIds.value.filter((itemId) => itemId !== id) return } selectedIds.value = [...selectedIds.value, id] } const toggleSelectAll = () => { if (allVisibleSelected.value) { selectedIds.value = selectedIds.value.filter((id) => !codes.value.some((item) => item.id === id)) return } const next = new Set(selectedIds.value) codes.value.forEach((item) => next.add(item.id)) selectedIds.value = [...next] } const formatDate = (value) => { if (!value) return '—' try { return new Intl.DateTimeFormat('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' }).format(new Date(value)) } catch { return String(value) } } const copyCode = async (code) => { try { await navigator.clipboard.writeText(code) showToast(getNestedMessage('messages', 'copied'), 'success') } catch (error) { console.error('复制失败', error) showToast(getNestedMessage('messages', 'copyFailed'), 'error') } } const copyLastGeneratedCodes = async () => { if (!lastGeneratedCodes.value.length) { showToast(getNestedMessage('messages', 'noGeneratedToCopy'), 'warning') return } try { await navigator.clipboard.writeText(lastGeneratedCodes.value.join('\n')) showToast(getNestedMessage('messages', 'copiedGenerated', lastGeneratedCodes.value.length), 'success') } catch (error) { console.error('批量复制点歌券失败', error) showToast(getNestedMessage('messages', 'copyFailed'), 'error') } } const buildExportQuery = () => { const query = new URLSearchParams() if (selectedIds.value.length) { query.set('ids', selectedIds.value.join(',')) return query } if (filters.value.q.trim()) query.set('q', filters.value.q.trim()) if (filters.value.status) query.set('status', filters.value.status) return query } const exportCodes = async () => { exporting.value = true try { const query = buildExportQuery() const response = await fetch(`/api/admin/card-codes/export?${query.toString()}`, { credentials: 'same-origin' }) if (!response.ok) { let message = getNestedMessage('messages', 'exportFailed') try { const errorBody = await response.json() message = errorBody?.message \|\| errorBody?.statusMessage \|\| message } catch { // CSV 接口错误响应不一定是 JSON。 } throw new Error(message) } const blob = await response.blob() const url = URL.createObjectURL(blob) const a = document.createElement('a') a.href = url a.download = `card-codes-${new Date().toISOString().replaceAll(':', '-').slice(0, 19)}.csv` document.body.appendChild(a) a.click() a.remove() URL.revokeObjectURL(url) showToast(selectedIds.value.length ? getNestedMessage('messages', 'exportSelectedSuccess') : getNestedMessage('messages', 'exportFilteredSuccess'), 'success') } catch (error) { console.error('导出点歌券失败', error) showToast(error?.message \|\| getNestedMessage('messages', 'exportFailed'), 'error') } finally { exporting.value = false } } const updateStatus = async (ids, status) => { saving.value = true try { if (Array.isArray(ids) && ids.length === 1) { // 单条更新走新的 PUT 接口，便于更精细的审计 const id = ids[0] await $fetch(`/api/admin/card-codes/${id}`, { method: 'PUT', body: { status } }) } else { await $fetch('/api/admin/card-codes/update', { method: 'POST', body: { ids, status } }) } showToast(getNestedMessage('messages', 'statusUpdated'), 'success') await Promise.all([fetchCodes(), fetchRedeemLogs()]) } catch (error) { console.error('更新点歌券状态失败', error) showToast(getNestedMessage('messages', 'updateStatusFailed'), 'error') } finally { saving.value = false } } const saveNote = async (item) => { saving.value = true try { await $fetch('/api/admin/card-codes/update', { method: 'POST', body: { id: item.id, note: item.noteDraft } }) showToast(getNestedMessage('messages', 'noteSaved'), 'success') item.note = item.noteDraft \|\| null } catch (error) { console.error('保存备注失败', error) showToast(getNestedMessage('messages', 'saveNoteFailed'), 'error') } finally { saving.value = false } } const applyBulkStatus = async () => { if (!selectedIds.value.length) return await updateStatus(selectedIds.value, bulkStatus.value) clearSelection() } const createCodes = async () => { saving.value = true try { let body = { note: createNote.value.trim() } if (createMode.value === 'manual') { const list = manualCodes.value .split(/[，,\n\s]+/) .map((value) => value.trim()) .filter(Boolean) if (!list.length) { showToast(getNestedMessage('messages', 'inputRequired'), 'warning') return } body = { ...body, codes: [...new Set(list)] } } else { body = { ...body, count: Math.max(1, Number(createFormCount.value)), prefix: generateForm.value.prefix, length: Math.max(4, Number(generateForm.value.length)), charset: generateForm.value.charset } } const res = await $fetch('/api/admin/card-codes/create', { method: 'POST', body }) const inserted = Array.isArray(res?.data) ? res.data.length : 0 const skipped = Number(res?.skipped \|\| 0) lastGeneratedCodes.value = createMode.value === 'generate' ? (Array.isArray(res?.data) ? res.data.map((item) => item.code).filter(Boolean) : []) : [] showToast(skipped ? getNestedMessage('messages', 'createDone', inserted, skipped) : getNestedMessage('messages', 'createSuccess', inserted), 'success') manualCodes.value = '' createNote.value = '' await fetchCodes() } catch (error) { console.error('创建点歌券失败', error) showToast(error?.data?.message \|\| error?.message \|\| getNestedMessage('messages', 'createFailed'), 'error') } finally { saving.value = false } } const createFormCount = computed(() => generateForm.value.count) const fillDemoCodes = () => { createMode.value = 'manual' manualCodes.value = ['DEMO-2026-A001', 'DEMO-2026-A002', 'DEMO-2026-A003'].join('\n') createNote.value = getLocaleMessage('demoNote') } onMounted(refreshAll) </script> <style scoped> textarea { scrollbar-width: thin; scrollbar-color: var(--panel-bg-hover) transparent; } textarea::-webkit-scrollbar { width: 4px; } textarea::-webkit-scrollbar-thumb { background: var(--panel-bg-hover); border-radius: 9999px; } </style>

{{ locale.title }}