feat(theme-4): sync inbox/announcements/presence/deposit from main
This commit is contained in:
@@ -7,6 +7,9 @@ import { usePermissions } from '../composables/usePermissions';
|
||||
import { AdminPerm } from '../constants/permissions';
|
||||
import api from '../api';
|
||||
import AdminTableEmpty from '../components/AdminTableEmpty.vue';
|
||||
import ContentImageField from '../components/ContentImageField.vue';
|
||||
import ContentRichEditor from '../components/ContentRichEditor.vue';
|
||||
import { stripHtml } from '../utils/html';
|
||||
import {
|
||||
normalizeStartTimeForApi,
|
||||
normalizeStartTimeForPicker,
|
||||
@@ -16,91 +19,8 @@ const { t, localeTag } = useAdminLocale();
|
||||
const { hasPermission } = usePermissions();
|
||||
const canManageContent = computed(() => hasPermission(AdminPerm.content));
|
||||
|
||||
/* ── Image upload helpers ── */
|
||||
const IMAGE_ACCEPT = 'image/png,image/jpeg,image/webp,image/gif,image/svg+xml';
|
||||
const MAX_UPLOAD_SIZE = 5 * 1024 * 1024;
|
||||
|
||||
interface MediaFile {
|
||||
id: string;
|
||||
filename: string;
|
||||
category: string;
|
||||
mimeType: string;
|
||||
size: number;
|
||||
url: string;
|
||||
inUse: boolean;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
/** Per-locale uploading state */
|
||||
const uploadingLocale = ref<string | null>(null);
|
||||
|
||||
/** Media picker state */
|
||||
const mediaPickerVisible = ref(false);
|
||||
const mediaPickerLocale = ref('');
|
||||
const mediaFiles = ref<MediaFile[]>([]);
|
||||
const mediaLoading = ref(false);
|
||||
|
||||
async function uploadBannerImage(locale: string, file: File) {
|
||||
if (file.size > MAX_UPLOAD_SIZE) {
|
||||
ElMessage.error(t('content.upload.size_error'));
|
||||
return;
|
||||
}
|
||||
uploadingLocale.value = locale;
|
||||
try {
|
||||
const fd = new FormData();
|
||||
fd.append('file', file);
|
||||
const { data } = await api.post('/admin/uploads?category=banners', fd, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
});
|
||||
const url = data.data?.url as string;
|
||||
if (url) {
|
||||
const tr = form.value.translations.find((item) => item.locale === locale);
|
||||
if (tr) tr.imageUrl = url;
|
||||
ElMessage.success(t('content.upload.success'));
|
||||
}
|
||||
} catch (err: any) {
|
||||
const msg = err?.response?.data?.message || t('content.upload.failed');
|
||||
ElMessage.error(String(msg));
|
||||
} finally {
|
||||
uploadingLocale.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
function onBannerFileChange(e: Event, locale: string) {
|
||||
const input = e.target as HTMLInputElement;
|
||||
if (input.files?.[0]) {
|
||||
void uploadBannerImage(locale, input.files[0]);
|
||||
input.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
function removeBannerImage(locale: string) {
|
||||
const tr = form.value.translations.find((item) => item.locale === locale);
|
||||
if (tr) tr.imageUrl = '';
|
||||
}
|
||||
|
||||
async function openMediaPicker(locale: string) {
|
||||
mediaPickerLocale.value = locale;
|
||||
mediaPickerVisible.value = true;
|
||||
mediaLoading.value = true;
|
||||
try {
|
||||
const res = await api.get('/admin/files', { params: { category: 'banners', pageSize: 200 } });
|
||||
mediaFiles.value = res.data.data.items ?? [];
|
||||
} catch {
|
||||
mediaFiles.value = [];
|
||||
} finally {
|
||||
mediaLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function pickMediaFile(file: MediaFile) {
|
||||
const tr = form.value.translations.find((item) => item.locale === mediaPickerLocale.value);
|
||||
if (tr) tr.imageUrl = file.url;
|
||||
mediaPickerVisible.value = false;
|
||||
}
|
||||
|
||||
type StoredContentType = 'BANNER' | 'NOTICE' | 'TICKER';
|
||||
type AdminTab = 'BANNER' | 'ANNOUNCEMENT';
|
||||
type AdminTab = 'BANNER' | 'ANNOUNCEMENT' | 'INBOX_NOTIFY';
|
||||
type ContentStatus = 'DRAFT' | 'ACTIVE' | 'INACTIVE';
|
||||
|
||||
interface TranslationForm {
|
||||
@@ -126,7 +46,7 @@ interface ContentItem {
|
||||
translations: TranslationForm[];
|
||||
}
|
||||
|
||||
const ADMIN_TABS: AdminTab[] = ['BANNER', 'ANNOUNCEMENT'];
|
||||
const ADMIN_TABS: AdminTab[] = ['BANNER', 'ANNOUNCEMENT', 'INBOX_NOTIFY'];
|
||||
const LOCALES = ['zh-CN', 'en-US', 'ms-MY'] as const;
|
||||
|
||||
const activeType = ref<AdminTab>('BANNER');
|
||||
@@ -142,9 +62,24 @@ const selectedRows = ref<ContentItem[]>([]);
|
||||
|
||||
const hasSelection = computed(() => selectedRows.value.length > 0);
|
||||
|
||||
const dialogVisible = ref(false);
|
||||
const bannerDialogVisible = ref(false);
|
||||
const announcementDialogVisible = ref(false);
|
||||
const bannerEditorRef = ref<InstanceType<typeof ContentRichEditor> | null>(null);
|
||||
const editingId = ref<string | null>(null);
|
||||
const editingContentType = ref<StoredContentType>('NOTICE');
|
||||
const editingContentType = ref<StoredContentType>('TICKER');
|
||||
const activeLocale = ref<string>('zh-CN');
|
||||
const notifyInbox = ref(false);
|
||||
|
||||
interface InboxNotifySettings {
|
||||
inboxEnabled: boolean;
|
||||
deposit: boolean;
|
||||
}
|
||||
|
||||
const inboxNotifySettings = ref<InboxNotifySettings>({
|
||||
inboxEnabled: true,
|
||||
deposit: true,
|
||||
});
|
||||
const inboxNotifySaving = ref(false);
|
||||
|
||||
const form = ref({
|
||||
sortOrder: 0,
|
||||
@@ -200,12 +135,63 @@ function formatTime(v: string | null) {
|
||||
});
|
||||
}
|
||||
|
||||
const isBanner = computed(() => activeType.value === 'BANNER');
|
||||
const isAnnouncement = computed(() => activeType.value === 'ANNOUNCEMENT');
|
||||
const dialogTitle = computed(() =>
|
||||
editingId.value ? t('content.dialog.edit') : t('content.dialog.create'),
|
||||
function previewText(row: ContentItem) {
|
||||
const raw = row.previewTitle || row.translations.find((tr) => tr.body)?.body || '';
|
||||
return stripHtml(raw) || '—';
|
||||
}
|
||||
|
||||
const isBannerTab = computed(() => activeType.value === 'BANNER');
|
||||
const isInboxNotifyTab = computed(() => activeType.value === 'INBOX_NOTIFY');
|
||||
|
||||
const activeTranslation = computed(
|
||||
() =>
|
||||
form.value.translations.find((tr) => tr.locale === activeLocale.value) ??
|
||||
form.value.translations[0],
|
||||
);
|
||||
|
||||
const bannerDialogTitle = computed(() =>
|
||||
editingId.value ? t('content.dialog.edit_banner') : t('content.dialog.create_banner'),
|
||||
);
|
||||
|
||||
const announcementDialogTitle = computed(() =>
|
||||
editingId.value ? t('content.dialog.edit_notice') : t('content.dialog.create_notice'),
|
||||
);
|
||||
|
||||
async function loadInboxNotifySettings() {
|
||||
try {
|
||||
const { data } = await api.get('/admin/contents/inbox-notify-settings');
|
||||
inboxNotifySettings.value = {
|
||||
inboxEnabled: data.data?.inboxEnabled !== false,
|
||||
deposit: Boolean(data.data?.deposit),
|
||||
};
|
||||
} catch (e: unknown) {
|
||||
const err = e as { response?: { data?: { error?: string } } };
|
||||
ElMessage.error(err.response?.data?.error ?? t('msg.load_failed'));
|
||||
}
|
||||
}
|
||||
|
||||
async function saveInboxNotifySettings() {
|
||||
if (!canManageContent.value) return;
|
||||
inboxNotifySaving.value = true;
|
||||
try {
|
||||
const { data } = await api.put('/admin/contents/inbox-notify-settings', {
|
||||
inboxEnabled: inboxNotifySettings.value.inboxEnabled,
|
||||
deposit: inboxNotifySettings.value.deposit,
|
||||
});
|
||||
inboxNotifySettings.value = {
|
||||
inboxEnabled: data.data?.inboxEnabled !== false,
|
||||
deposit: Boolean(data.data?.deposit),
|
||||
};
|
||||
ElMessage.success(t('msg.saved'));
|
||||
} catch (e: unknown) {
|
||||
const err = e as { response?: { data?: { error?: string } } };
|
||||
ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
|
||||
await loadInboxNotifySettings();
|
||||
} finally {
|
||||
inboxNotifySaving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function load() {
|
||||
loading.value = true;
|
||||
try {
|
||||
@@ -244,6 +230,10 @@ watch([activeType, filterStatus], () => {
|
||||
page.value = 1;
|
||||
selectedRows.value = [];
|
||||
tableRef.value?.clearSelection();
|
||||
if (activeType.value === 'INBOX_NOTIFY') {
|
||||
void loadInboxNotifySettings();
|
||||
return;
|
||||
}
|
||||
void load();
|
||||
});
|
||||
|
||||
@@ -311,6 +301,8 @@ function batchDelete() {
|
||||
}
|
||||
|
||||
function resetForm() {
|
||||
activeLocale.value = 'zh-CN';
|
||||
notifyInbox.value = false;
|
||||
form.value = {
|
||||
sortOrder: 0,
|
||||
status: 'DRAFT',
|
||||
@@ -322,15 +314,7 @@ function resetForm() {
|
||||
};
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
editingId.value = null;
|
||||
resetForm();
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
|
||||
function openEdit(row: ContentItem) {
|
||||
editingId.value = row.id;
|
||||
editingContentType.value = row.contentType;
|
||||
function loadRowIntoForm(row: ContentItem, plainBody = false) {
|
||||
const byLocale = new Map(row.translations.map((tr) => [tr.locale, tr]));
|
||||
form.value = {
|
||||
sortOrder: row.sortOrder,
|
||||
@@ -341,33 +325,57 @@ function openEdit(row: ContentItem) {
|
||||
endTime: normalizeStartTimeForPicker(row.endTime ?? undefined),
|
||||
translations: LOCALES.map((locale) => {
|
||||
const tr = byLocale.get(locale);
|
||||
const rawBody = tr?.body ?? '';
|
||||
return {
|
||||
locale,
|
||||
title: tr?.title ?? '',
|
||||
body: tr?.body ?? '',
|
||||
body: plainBody ? stripHtml(rawBody) : rawBody,
|
||||
imageUrl: tr?.imageUrl ?? '',
|
||||
};
|
||||
}),
|
||||
};
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
|
||||
function buildPayload() {
|
||||
const contentType: StoredContentType = editingId.value
|
||||
? editingContentType.value
|
||||
: isBanner.value
|
||||
? 'BANNER'
|
||||
: 'NOTICE';
|
||||
function openCreate() {
|
||||
editingId.value = null;
|
||||
resetForm();
|
||||
if (isBannerTab.value) {
|
||||
editingContentType.value = 'BANNER';
|
||||
bannerDialogVisible.value = true;
|
||||
} else {
|
||||
editingContentType.value = 'TICKER';
|
||||
announcementDialogVisible.value = true;
|
||||
}
|
||||
}
|
||||
|
||||
function openEdit(row: ContentItem) {
|
||||
editingId.value = row.id;
|
||||
editingContentType.value = row.contentType;
|
||||
activeLocale.value = 'zh-CN';
|
||||
if (row.contentType === 'BANNER') {
|
||||
loadRowIntoForm(row, false);
|
||||
bannerDialogVisible.value = true;
|
||||
} else {
|
||||
loadRowIntoForm(row, true);
|
||||
announcementDialogVisible.value = true;
|
||||
}
|
||||
}
|
||||
|
||||
function buildScheduleFields() {
|
||||
return {
|
||||
contentType,
|
||||
sortOrder: form.value.sortOrder,
|
||||
status: form.value.status,
|
||||
linkType: isBanner.value && form.value.linkType ? form.value.linkType : null,
|
||||
linkTarget:
|
||||
isBanner.value && form.value.linkType ? form.value.linkTarget.trim() : null,
|
||||
startTime: form.value.startTime ? normalizeStartTimeForApi(form.value.startTime) : null,
|
||||
endTime: form.value.endTime ? normalizeStartTimeForApi(form.value.endTime) : null,
|
||||
};
|
||||
}
|
||||
|
||||
function buildBannerPayload() {
|
||||
const payload = {
|
||||
contentType: 'BANNER' as const,
|
||||
...buildScheduleFields(),
|
||||
linkType: form.value.linkType ? form.value.linkType : null,
|
||||
linkTarget: form.value.linkType ? form.value.linkTarget.trim() : null,
|
||||
translations: form.value.translations.map((tr) => ({
|
||||
locale: tr.locale,
|
||||
title: tr.title.trim() || undefined,
|
||||
@@ -375,25 +383,94 @@ function buildPayload() {
|
||||
imageUrl: tr.imageUrl.trim() || undefined,
|
||||
})),
|
||||
};
|
||||
if (!editingId.value) {
|
||||
return { ...payload, notifyInbox: notifyInbox.value };
|
||||
}
|
||||
return payload;
|
||||
}
|
||||
|
||||
async function submitForm() {
|
||||
if (uploadingLocale.value) {
|
||||
ElMessage.warning(t('content.upload.uploading'));
|
||||
return;
|
||||
function buildAnnouncementPayload() {
|
||||
const contentType: StoredContentType = editingId.value ? editingContentType.value : 'TICKER';
|
||||
const payload = {
|
||||
contentType,
|
||||
...buildScheduleFields(),
|
||||
linkType: null,
|
||||
linkTarget: null,
|
||||
translations: form.value.translations.map((tr) => ({
|
||||
locale: tr.locale,
|
||||
title: tr.title.trim() || undefined,
|
||||
body: tr.body.trim() || undefined,
|
||||
})),
|
||||
};
|
||||
if (!editingId.value) {
|
||||
return { ...payload, notifyInbox: notifyInbox.value };
|
||||
}
|
||||
return payload;
|
||||
}
|
||||
|
||||
async function submitBannerForm() {
|
||||
saving.value = true;
|
||||
try {
|
||||
const payload = buildPayload();
|
||||
const editor = bannerEditorRef.value;
|
||||
if (editor) {
|
||||
activeTranslation.value.body = editor.getHtml();
|
||||
for (const tr of form.value.translations) {
|
||||
tr.body = await editor.uploadPendingImages(tr.body);
|
||||
}
|
||||
}
|
||||
|
||||
const payload = buildBannerPayload();
|
||||
const isCreate = !editingId.value;
|
||||
if (editingId.value) {
|
||||
const { contentType: _type, ...updateBody } = payload;
|
||||
const { contentType: _type, notifyInbox: _notify, ...updateBody } = payload as ReturnType<typeof buildBannerPayload> & { notifyInbox?: boolean };
|
||||
await api.put(`/admin/contents/${editingId.value}`, updateBody);
|
||||
ElMessage.success(t('msg.saved'));
|
||||
} else {
|
||||
await api.post('/admin/contents', payload);
|
||||
const { data } = await api.post('/admin/contents', payload);
|
||||
const notifiedCount = Number(data.data?.notifiedCount ?? 0);
|
||||
if (notifyInbox.value && notifiedCount > 0) {
|
||||
ElMessage.success(t('content.msg.notify_sent', { count: notifiedCount }));
|
||||
} else {
|
||||
ElMessage.success(t('msg.saved'));
|
||||
}
|
||||
}
|
||||
ElMessage.success(t('msg.saved'));
|
||||
dialogVisible.value = false;
|
||||
bannerDialogVisible.value = false;
|
||||
if (isCreate) page.value = 1;
|
||||
await load();
|
||||
} catch (e: unknown) {
|
||||
const err = e as { response?: { data?: { error?: string; message?: string | string[] } } };
|
||||
const msg = err.response?.data?.error
|
||||
?? (Array.isArray(err.response?.data?.message)
|
||||
? err.response?.data?.message.join(', ')
|
||||
: err.response?.data?.message)
|
||||
?? (e instanceof Error ? e.message : t('msg.save_failed'));
|
||||
ElMessage.error(String(msg));
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function submitAnnouncementForm() {
|
||||
saving.value = true;
|
||||
try {
|
||||
const payload = buildAnnouncementPayload();
|
||||
const isCreate = !editingId.value;
|
||||
if (editingId.value) {
|
||||
const { contentType: _type, notifyInbox: _notify, ...updateBody } = payload as ReturnType<
|
||||
typeof buildAnnouncementPayload
|
||||
> & { notifyInbox?: boolean };
|
||||
await api.put(`/admin/contents/${editingId.value}`, updateBody);
|
||||
ElMessage.success(t('msg.saved'));
|
||||
} else {
|
||||
const { data } = await api.post('/admin/contents', payload);
|
||||
const notifiedCount = Number(data.data?.notifiedCount ?? 0);
|
||||
if (notifyInbox.value && notifiedCount > 0) {
|
||||
ElMessage.success(t('content.msg.notify_sent', { count: notifiedCount }));
|
||||
} else {
|
||||
ElMessage.success(t('msg.saved'));
|
||||
}
|
||||
}
|
||||
announcementDialogVisible.value = false;
|
||||
if (isCreate) page.value = 1;
|
||||
await load();
|
||||
} catch (e: unknown) {
|
||||
@@ -426,7 +503,7 @@ async function setStatus(row: ContentItem, status: ContentStatus) {
|
||||
async function removeItem(row: ContentItem) {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
t('content.confirm_delete', { title: row.previewTitle || row.id }),
|
||||
t('content.confirm_delete', { title: previewText(row) }),
|
||||
{ type: 'warning' },
|
||||
);
|
||||
} catch {
|
||||
@@ -459,8 +536,42 @@ void load();
|
||||
:name="tp"
|
||||
/>
|
||||
</el-tabs>
|
||||
<p v-if="isAnnouncement" class="type-hint">{{ t('content.hint.announcement') }}</p>
|
||||
<el-form inline class="filter-row">
|
||||
|
||||
<template v-if="isInboxNotifyTab">
|
||||
<div class="inbox-notify-panel">
|
||||
<div class="inbox-notify-row">
|
||||
<div class="inbox-notify-row-text">
|
||||
<span class="inbox-notify-label">{{ t('content.inbox_notify.inbox_enabled') }}</span>
|
||||
<span class="inbox-notify-hint">{{ t('content.inbox_notify.inbox_enabled_hint') }}</span>
|
||||
</div>
|
||||
<el-switch
|
||||
v-model="inboxNotifySettings.inboxEnabled"
|
||||
:disabled="!canManageContent || inboxNotifySaving"
|
||||
@change="saveInboxNotifySettings"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-show="inboxNotifySettings.inboxEnabled" class="inbox-notify-row">
|
||||
<div class="inbox-notify-row-text">
|
||||
<span class="inbox-notify-label">{{ t('content.inbox_notify.deposit') }}</span>
|
||||
<span class="inbox-notify-hint">{{ t('content.inbox_notify.deposit_hint') }}</span>
|
||||
</div>
|
||||
<el-switch
|
||||
v-model="inboxNotifySettings.deposit"
|
||||
:disabled="!canManageContent || inboxNotifySaving"
|
||||
@change="saveInboxNotifySettings"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p v-show="inboxNotifySettings.inboxEnabled" class="inbox-notify-notes-title">{{ t('content.inbox_notify.manual_title') }}</p>
|
||||
<ul v-show="inboxNotifySettings.inboxEnabled" class="inbox-notify-notes">
|
||||
<li>{{ t('content.inbox_notify.banner_note') }}</li>
|
||||
<li>{{ t('content.inbox_notify.announcement_note') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-form v-else inline class="filter-row">
|
||||
<el-form-item :label="t('common.status')">
|
||||
<el-select v-model="filterStatus" clearable style="width: 140px">
|
||||
<el-option :label="t('common.all')" value="" />
|
||||
@@ -478,38 +589,24 @@ void load();
|
||||
{{ t('content.btn.create') }}
|
||||
</el-button>
|
||||
<template v-if="canManageContent">
|
||||
<span v-if="hasSelection" class="batch-hint">
|
||||
{{ t('content.batch.selected', { n: selectedRows.length }) }}
|
||||
</span>
|
||||
<el-button
|
||||
size="small"
|
||||
:disabled="!hasSelection || saving"
|
||||
@click="batchEnable"
|
||||
>
|
||||
{{ t('content.batch.enable') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
:disabled="!hasSelection || saving"
|
||||
@click="batchDisable"
|
||||
>
|
||||
{{ t('content.batch.disable') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
size="small"
|
||||
:disabled="!hasSelection || saving"
|
||||
@click="batchDelete"
|
||||
>
|
||||
{{ t('content.batch.delete') }}
|
||||
</el-button>
|
||||
<span v-if="hasSelection" class="batch-hint">
|
||||
{{ t('content.batch.selected', { n: selectedRows.length }) }}
|
||||
</span>
|
||||
<el-button size="small" :disabled="!hasSelection || saving" @click="batchEnable">
|
||||
{{ t('content.batch.enable') }}
|
||||
</el-button>
|
||||
<el-button size="small" :disabled="!hasSelection || saving" @click="batchDisable">
|
||||
{{ t('content.batch.disable') }}
|
||||
</el-button>
|
||||
<el-button type="danger" plain size="small" :disabled="!hasSelection || saving" @click="batchDelete">
|
||||
{{ t('content.batch.delete') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<el-card v-loading="loading" class="data-card" shadow="never">
|
||||
<el-card v-if="!isInboxNotifyTab" v-loading="loading" class="data-card" shadow="never">
|
||||
<div class="table-wrap">
|
||||
<el-table
|
||||
ref="tableRef"
|
||||
@@ -523,21 +620,17 @@ void load();
|
||||
<AdminTableEmpty />
|
||||
</template>
|
||||
<el-table-column type="selection" width="44" :selectable="() => !saving" />
|
||||
<el-table-column type="index" :index="(i: number) => (page - 1) * pageSize + i + 1" :label="t('common.seq')" width="70" align="center" />
|
||||
<el-table-column prop="sortOrder" :label="t('content.col.sort')" width="64" align="center" />
|
||||
<el-table-column v-if="isBanner" :label="t('content.col.preview')" width="88" align="center">
|
||||
<el-table-column :label="t('content.col.preview')" width="88" align="center">
|
||||
<template #default="{ row }">
|
||||
<img
|
||||
v-if="row.previewImageUrl"
|
||||
:src="row.previewImageUrl"
|
||||
alt=""
|
||||
class="thumb"
|
||||
/>
|
||||
<img v-if="row.previewImageUrl" :src="row.previewImageUrl" alt="" class="thumb" />
|
||||
<span v-else class="thumb-empty">—</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('content.col.title')" min-width="160">
|
||||
<el-table-column :label="t('content.col.title')" min-width="180">
|
||||
<template #default="{ row }">
|
||||
<span class="preview-title">{{ row.previewTitle || '—' }}</span>
|
||||
<span class="preview-title">{{ previewText(row) }}</span>
|
||||
<p v-if="!row.playerVisible && row.playerHiddenReason" class="hidden-tip">
|
||||
{{ hiddenTip(row.playerHiddenReason) }}
|
||||
</p>
|
||||
@@ -564,7 +657,7 @@ void load();
|
||||
<span class="schedule-line">{{ formatTime(row.endTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="isBanner" :label="t('content.col.link')" min-width="120">
|
||||
<el-table-column :label="t('content.col.link')" min-width="120">
|
||||
<template #default="{ row }">
|
||||
<template v-if="row.linkType">
|
||||
{{ row.linkType }} · {{ row.linkTarget || '—' }}
|
||||
@@ -586,13 +679,7 @@ void load();
|
||||
>
|
||||
{{ t('content.btn.enable') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
v-else
|
||||
link
|
||||
type="warning"
|
||||
:disabled="saving"
|
||||
@click="setStatus(row, 'INACTIVE')"
|
||||
>
|
||||
<el-button v-else link type="warning" :disabled="saving" @click="setStatus(row, 'INACTIVE')">
|
||||
{{ t('content.btn.disable') }}
|
||||
</el-button>
|
||||
<el-button link type="danger" :disabled="saving" @click="removeItem(row)">
|
||||
@@ -616,134 +703,261 @@ void load();
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="640px" destroy-on-close>
|
||||
<el-form label-width="96px" size="small">
|
||||
<el-form-item :label="t('content.col.sort')">
|
||||
<el-input-number v-model="form.sortOrder" :min="0" :step="1" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('common.status')">
|
||||
<el-select v-model="form.status" style="width: 160px">
|
||||
<el-option
|
||||
v-for="st in ['DRAFT', 'ACTIVE', 'INACTIVE']"
|
||||
:key="st"
|
||||
:label="statusLabel(st)"
|
||||
:value="st"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<template v-if="isBanner">
|
||||
<el-form-item :label="t('content.field.link_type')">
|
||||
<el-select v-model="form.linkType" clearable style="width: 160px">
|
||||
<el-option :label="t('content.link.none')" value="" />
|
||||
<el-option label="ROUTE" value="ROUTE" />
|
||||
<el-option label="URL" value="URL" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.linkType" :label="t('content.field.link_target')">
|
||||
<el-input
|
||||
v-model="form.linkTarget"
|
||||
:placeholder="form.linkType === 'ROUTE' ? '/football' : 'https://'"
|
||||
/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<el-form-item :label="t('content.field.start_time')">
|
||||
<el-date-picker
|
||||
v-model="form.startTime"
|
||||
type="datetime"
|
||||
value-format="YYYY-MM-DDTHH:mm:ss"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('content.field.end_time')">
|
||||
<el-date-picker
|
||||
v-model="form.endTime"
|
||||
type="datetime"
|
||||
value-format="YYYY-MM-DDTHH:mm:ss"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-dialog
|
||||
v-model="bannerDialogVisible"
|
||||
:title="bannerDialogTitle"
|
||||
width="1000px"
|
||||
class="content-publish-dialog"
|
||||
destroy-on-close
|
||||
>
|
||||
<el-form label-width="84px" size="small" class="publish-form">
|
||||
<div class="publish-layout">
|
||||
<aside class="publish-meta">
|
||||
<section class="publish-section publish-section--compact">
|
||||
<div class="publish-section-head">{{ t('content.section.publish') }}</div>
|
||||
|
||||
<div v-for="tr in form.translations" :key="tr.locale" class="locale-block">
|
||||
<div class="locale-head">{{ localeLabel(tr.locale) }}</div>
|
||||
<el-form-item :label="t('content.field.title')">
|
||||
<el-input v-model="tr.title" :placeholder="t('content.field.title_ph')" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="isBanner"
|
||||
:label="t('content.field.image_url')"
|
||||
:required="form.status === 'ACTIVE'"
|
||||
>
|
||||
<div class="banner-upload-field">
|
||||
<p class="banner-size-hint">{{ t('content.upload.recommended_size') }}</p>
|
||||
<!-- Image preview -->
|
||||
<div v-if="tr.imageUrl" class="banner-preview">
|
||||
<img :src="tr.imageUrl" alt="" class="banner-preview-img" />
|
||||
<button type="button" class="banner-preview-remove" :title="t('content.upload.remove')" @click="removeBannerImage(tr.locale)">×</button>
|
||||
</div>
|
||||
<!-- Upload actions -->
|
||||
<div class="banner-upload-actions">
|
||||
<label
|
||||
class="banner-upload-btn"
|
||||
:class="{ 'is-uploading': uploadingLocale === tr.locale }"
|
||||
<el-row :gutter="8" class="publish-grid">
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="t('common.status')" label-position="top" class="publish-field">
|
||||
<el-select v-model="form.status" style="width: 100%">
|
||||
<el-option
|
||||
v-for="st in ['DRAFT', 'ACTIVE', 'INACTIVE']"
|
||||
:key="st"
|
||||
:label="statusLabel(st)"
|
||||
:value="st"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="t('content.col.sort')" label-position="top" class="publish-field">
|
||||
<el-input-number
|
||||
v-model="form.sortOrder"
|
||||
:min="0"
|
||||
:step="1"
|
||||
controls-position="right"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="8" class="publish-grid">
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="t('content.field.start_time')" label-position="top" class="publish-field">
|
||||
<el-date-picker
|
||||
v-model="form.startTime"
|
||||
type="datetime"
|
||||
value-format="YYYY-MM-DDTHH:mm:ss"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="t('content.field.end_time')" label-position="top" class="publish-field">
|
||||
<el-date-picker
|
||||
v-model="form.endTime"
|
||||
type="datetime"
|
||||
value-format="YYYY-MM-DDTHH:mm:ss"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-form-item :label="t('content.field.link_type')" label-position="top" class="publish-field">
|
||||
<el-select v-model="form.linkType" clearable style="width: 100%">
|
||||
<el-option :label="t('content.link.none')" value="" />
|
||||
<el-option label="ROUTE" value="ROUTE" />
|
||||
<el-option label="URL" value="URL" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="form.linkType"
|
||||
:label="t('content.field.link_target')"
|
||||
label-position="top"
|
||||
class="publish-field"
|
||||
>
|
||||
<el-input
|
||||
v-model="form.linkTarget"
|
||||
:placeholder="form.linkType === 'ROUTE' ? '/bet' : 'https://'"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="!editingId" label-position="top" class="publish-field notify-inbox-field">
|
||||
<template #label>{{ t('content.field.notify_inbox') }}</template>
|
||||
<div class="notify-inbox-block">
|
||||
<el-switch v-model="notifyInbox" :disabled="form.status !== 'ACTIVE'" />
|
||||
<p class="notify-inbox-hint">{{ t('content.field.notify_inbox_hint') }}</p>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</section>
|
||||
|
||||
<section class="publish-section publish-meta-fields">
|
||||
<h3 class="section-title">{{ t('content.section.content') }}</h3>
|
||||
<el-tabs v-model="activeLocale" class="locale-tabs">
|
||||
<el-tab-pane
|
||||
v-for="tr in form.translations"
|
||||
:key="tr.locale"
|
||||
:label="localeLabel(tr.locale)"
|
||||
:name="tr.locale"
|
||||
>
|
||||
<input
|
||||
type="file"
|
||||
:accept="IMAGE_ACCEPT"
|
||||
style="display: none"
|
||||
:disabled="uploadingLocale === tr.locale"
|
||||
@change="onBannerFileChange($event, tr.locale)"
|
||||
/>
|
||||
{{ uploadingLocale === tr.locale ? t('content.upload.uploading') : t('content.upload.upload_btn') }}
|
||||
</label>
|
||||
<button type="button" class="banner-pick-btn" @click="openMediaPicker(tr.locale)">
|
||||
{{ t('content.upload.pick_media') }}
|
||||
</button>
|
||||
</div>
|
||||
<!-- Manual URL fallback -->
|
||||
<el-input
|
||||
v-model="tr.imageUrl"
|
||||
:placeholder="t('content.upload.url_placeholder')"
|
||||
size="small"
|
||||
class="banner-url-input"
|
||||
/>
|
||||
<el-form-item
|
||||
:label="t('content.field.title')"
|
||||
:required="form.status === 'ACTIVE'"
|
||||
>
|
||||
<el-input v-model="tr.title" :placeholder="t('content.field.title_ph')" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
:label="t('content.field.cover_image')"
|
||||
:required="form.status === 'ACTIVE'"
|
||||
>
|
||||
<ContentImageField
|
||||
v-model="tr.imageUrl"
|
||||
category="banners"
|
||||
size-hint-key="content.upload.recommended_size"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</section>
|
||||
</aside>
|
||||
|
||||
<div class="publish-body">
|
||||
<div class="publish-body-head">
|
||||
<span class="publish-body-label">
|
||||
{{ t('content.field.body') }}
|
||||
<span v-if="form.status === 'ACTIVE'" class="required-mark">*</span>
|
||||
</span>
|
||||
<span class="locale-badge">{{ localeLabel(activeLocale) }}</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="isAnnouncement ? t('content.field.announce_text') : t('content.field.body')"
|
||||
:required="isAnnouncement && form.status === 'ACTIVE'"
|
||||
>
|
||||
<el-input v-model="tr.body" type="textarea" :rows="isAnnouncement ? 2 : 3" />
|
||||
</el-form-item>
|
||||
|
||||
<ContentRichEditor
|
||||
ref="bannerEditorRef"
|
||||
v-model="activeTranslation.body"
|
||||
fill
|
||||
upload-category="banners"
|
||||
:placeholder="t('content.editor.placeholder')"
|
||||
class="publish-rich-editor"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">{{ t('common.cancel') }}</el-button>
|
||||
<el-button type="primary" :loading="saving" :disabled="!!uploadingLocale" @click="submitForm">
|
||||
<el-button @click="bannerDialogVisible = false">{{ t('common.cancel') }}</el-button>
|
||||
<el-button type="primary" :loading="saving" @click="submitBannerForm">
|
||||
{{ t('common.save') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- Media picker dialog -->
|
||||
<el-dialog v-model="mediaPickerVisible" :title="t('content.upload.pick_media_title')" width="680px" destroy-on-close append-to-body>
|
||||
<div v-if="mediaLoading" class="media-picker-loading">{{ t('common.loading') }}</div>
|
||||
<div v-else-if="mediaFiles.length === 0" class="media-picker-empty">{{ t('content.upload.no_media') }}</div>
|
||||
<div v-else class="media-picker-grid">
|
||||
<div
|
||||
v-for="file in mediaFiles"
|
||||
:key="file.id"
|
||||
class="media-picker-card"
|
||||
@click="pickMediaFile(file)"
|
||||
>
|
||||
<div class="media-picker-thumb">
|
||||
<img v-if="file.mimeType !== 'image/svg+xml'" :src="file.url" :alt="file.filename" loading="lazy" />
|
||||
<div v-else class="media-picker-svg">SVG</div>
|
||||
</div>
|
||||
<div class="media-picker-name" :title="file.filename">{{ file.filename }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog
|
||||
v-model="announcementDialogVisible"
|
||||
:title="announcementDialogTitle"
|
||||
width="640px"
|
||||
class="announcement-dialog"
|
||||
destroy-on-close
|
||||
>
|
||||
<p class="announcement-hint">{{ t('content.hint.announcement') }}</p>
|
||||
<el-form label-width="96px" size="small" class="announcement-form">
|
||||
<section class="announcement-publish">
|
||||
<div class="publish-section-head">{{ t('content.section.publish') }}</div>
|
||||
<el-row :gutter="8" class="announcement-publish-row">
|
||||
<el-col :xs="12" :sm="6">
|
||||
<el-form-item :label="t('common.status')" label-position="top" class="publish-field">
|
||||
<el-select v-model="form.status" style="width: 100%">
|
||||
<el-option
|
||||
v-for="st in ['DRAFT', 'ACTIVE', 'INACTIVE']"
|
||||
:key="st"
|
||||
:label="statusLabel(st)"
|
||||
:value="st"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="6">
|
||||
<el-form-item :label="t('content.col.sort')" label-position="top" class="publish-field">
|
||||
<el-input-number
|
||||
v-model="form.sortOrder"
|
||||
:min="0"
|
||||
:step="1"
|
||||
controls-position="right"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="6">
|
||||
<el-form-item :label="t('content.field.start_time')" label-position="top" class="publish-field">
|
||||
<el-date-picker
|
||||
v-model="form.startTime"
|
||||
type="datetime"
|
||||
value-format="YYYY-MM-DDTHH:mm:ss"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="6">
|
||||
<el-form-item :label="t('content.field.end_time')" label-position="top" class="publish-field">
|
||||
<el-date-picker
|
||||
v-model="form.endTime"
|
||||
type="datetime"
|
||||
value-format="YYYY-MM-DDTHH:mm:ss"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-form-item v-if="!editingId" label-position="top" class="publish-field notify-inbox-field">
|
||||
<template #label>{{ t('content.field.notify_inbox') }}</template>
|
||||
<div class="notify-inbox-block">
|
||||
<el-switch v-model="notifyInbox" :disabled="form.status !== 'ACTIVE'" />
|
||||
<p class="notify-inbox-hint">{{ t('content.field.notify_inbox_hint') }}</p>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</section>
|
||||
|
||||
<section class="announcement-content">
|
||||
<h3 class="section-title">{{ t('content.section.content') }}</h3>
|
||||
<el-tabs v-model="activeLocale" class="locale-tabs">
|
||||
<el-tab-pane
|
||||
v-for="tr in form.translations"
|
||||
:key="tr.locale"
|
||||
:label="localeLabel(tr.locale)"
|
||||
:name="tr.locale"
|
||||
>
|
||||
<el-form-item :label="t('content.field.title')">
|
||||
<el-input v-model="tr.title" :placeholder="t('content.field.ticker_title_ph')" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="t('content.field.announce_text')"
|
||||
:required="form.status === 'ACTIVE'"
|
||||
>
|
||||
<el-input
|
||||
v-model="tr.body"
|
||||
type="textarea"
|
||||
:rows="4"
|
||||
:placeholder="t('content.field.ticker_body_ph')"
|
||||
/>
|
||||
<p class="field-hint compact-hint">{{ t('content.field.ticker_hint') }}</p>
|
||||
</el-form-item>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</section>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="announcementDialogVisible = false">{{ t('common.cancel') }}</el-button>
|
||||
<el-button type="primary" :loading="saving" @click="submitAnnouncementForm">
|
||||
{{ t('common.save') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
@@ -753,11 +967,27 @@ void load();
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.type-hint {
|
||||
margin: 0 0 8px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
.field-hint,
|
||||
.batch-hint,
|
||||
.schedule-line,
|
||||
.schedule-sep,
|
||||
.thumb-empty {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.field-hint {
|
||||
margin: 4px 0 0;
|
||||
font-size: 11px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.field-hint.inline-hint,
|
||||
.field-hint.compact-hint {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.field-hint.inline-hint {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
@@ -766,7 +996,6 @@ void load();
|
||||
|
||||
.batch-hint {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
margin: 0 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -776,313 +1005,257 @@ void load();
|
||||
height: 32px;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
background: #222;
|
||||
}
|
||||
|
||||
.thumb-empty {
|
||||
color: #555;
|
||||
font-size: 12px;
|
||||
background: #f4f0e8;
|
||||
}
|
||||
|
||||
.preview-title {
|
||||
font-size: 13px;
|
||||
color: #ccc;
|
||||
color: var(--text);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.hidden-tip {
|
||||
margin: 4px 0 0;
|
||||
font-size: 11px;
|
||||
color: #c9a227;
|
||||
color: var(--warning-text);
|
||||
}
|
||||
|
||||
.schedule-line {
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.schedule-sep {
|
||||
margin: 0 4px;
|
||||
color: #555;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.locale-block {
|
||||
margin-top: 12px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid #252525;
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
.content-publish-dialog :deep(.el-dialog__body) {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.locale-head {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #888;
|
||||
margin-bottom: 8px;
|
||||
.content-publish-dialog :deep(.el-dialog__footer) {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
/* ── Banner image upload widget ── */
|
||||
.banner-upload-field {
|
||||
.publish-layout {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
align-items: stretch;
|
||||
min-height: 480px;
|
||||
}
|
||||
|
||||
.publish-meta {
|
||||
flex: 0 0 380px;
|
||||
max-width: 400px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.banner-size-hint {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
color: #777;
|
||||
.publish-meta-fields {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.banner-preview {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
aspect-ratio: 43 / 18;
|
||||
.publish-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 480px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #252525;
|
||||
background: #111;
|
||||
}
|
||||
|
||||
.banner-preview-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.banner-preview-remove {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: #fff;
|
||||
border: 1px solid #333;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.banner-preview-remove:hover {
|
||||
background: rgba(224, 85, 85, 0.85);
|
||||
}
|
||||
|
||||
.banner-upload-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.banner-upload-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 6px 14px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
border: 1px solid rgba(212, 175, 55, 0.5);
|
||||
background: rgba(212, 175, 55, 0.1);
|
||||
color: var(--gold-text);
|
||||
font-weight: 600;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.banner-upload-btn:hover {
|
||||
background: rgba(212, 175, 55, 0.2);
|
||||
}
|
||||
|
||||
.banner-upload-btn.is-uploading {
|
||||
opacity: 0.6;
|
||||
cursor: wait;
|
||||
}
|
||||
|
||||
.banner-pick-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 6px 14px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
border: 1px solid #2a2a2a;
|
||||
background: transparent;
|
||||
color: #888;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.banner-pick-btn:hover {
|
||||
border-color: #444;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.banner-url-input {
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
.banner-url-input :deep(.el-input__wrapper) {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* ── Media picker ── */
|
||||
.media-picker-loading,
|
||||
.media-picker-empty {
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
color: #555;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.media-picker-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
|
||||
gap: 12px;
|
||||
max-height: 420px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.media-picker-card {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid #1e1e1e;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
}
|
||||
|
||||
.media-picker-card:hover {
|
||||
border-color: rgba(212, 175, 55, 0.5);
|
||||
box-shadow: 0 2px 12px rgba(212, 175, 55, 0.15);
|
||||
}
|
||||
|
||||
.media-picker-thumb {
|
||||
height: 80px;
|
||||
background: #111;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.media-picker-thumb img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.media-picker-svg {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #666;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.media-picker-name {
|
||||
padding: 6px 8px;
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.contents-page {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.type-hint,
|
||||
.batch-hint,
|
||||
.banner-size-hint,
|
||||
.schedule-line,
|
||||
.schedule-sep,
|
||||
.media-picker-loading,
|
||||
.media-picker-empty,
|
||||
.media-picker-name,
|
||||
.thumb-empty,
|
||||
.locale-head {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.preview-title {
|
||||
color: var(--text);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.hidden-tip {
|
||||
color: var(--warning-text);
|
||||
}
|
||||
|
||||
.thumb,
|
||||
.banner-preview,
|
||||
.media-picker-thumb {
|
||||
background: #f4f0e8;
|
||||
}
|
||||
|
||||
.banner-preview,
|
||||
.locale-block {
|
||||
border-color: var(--border);
|
||||
background: #fbfaf7;
|
||||
}
|
||||
|
||||
.banner-preview-remove {
|
||||
border-color: rgba(255, 255, 255, 0.36);
|
||||
background: rgba(31, 35, 32, 0.78);
|
||||
.publish-body-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.banner-preview-remove:hover {
|
||||
background: rgba(159, 47, 45, 0.92);
|
||||
}
|
||||
|
||||
.banner-upload-btn,
|
||||
.banner-pick-btn {
|
||||
border-radius: 7px;
|
||||
.publish-body-label {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.banner-upload-btn {
|
||||
border-color: var(--primary);
|
||||
background: var(--primary);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.banner-upload-btn:hover {
|
||||
background: var(--primary-light);
|
||||
}
|
||||
|
||||
.banner-pick-btn {
|
||||
border-color: var(--border);
|
||||
background: #ffffff;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.banner-pick-btn:hover {
|
||||
border-color: #d5cfc3;
|
||||
background: var(--accent-hover);
|
||||
color: var(--text);
|
||||
.required-mark {
|
||||
color: var(--el-color-danger);
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.media-picker-card {
|
||||
border-color: var(--border);
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.media-picker-card:hover {
|
||||
border-color: #d5cfc3;
|
||||
box-shadow: 0 8px 22px rgba(56, 49, 37, 0.08);
|
||||
}
|
||||
|
||||
.media-picker-svg {
|
||||
.locale-badge {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
padding: 2px 8px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.publish-rich-editor {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.publish-form :deep(.el-form-item) {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.publish-form :deep(.el-form-item__label) {
|
||||
padding-right: 8px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.publish-section {
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: #fbfaf7;
|
||||
}
|
||||
|
||||
.publish-section--compact {
|
||||
padding: 10px 12px 8px;
|
||||
}
|
||||
|
||||
.publish-section:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin: 0 0 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.publish-section-head {
|
||||
margin: 0 0 8px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.publish-section--compact :deep(.publish-field.el-form-item) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.publish-section--compact :deep(.publish-field.el-form-item:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.publish-section--compact :deep(.publish-field .el-form-item__label) {
|
||||
padding: 0 0 4px;
|
||||
line-height: 1.35;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.publish-section--compact :deep(.publish-field .el-form-item__content) {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.publish-grid {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.publish-grid :deep(.publish-field.el-form-item) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.notify-inbox-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.notify-inbox-hint {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
color: var(--text-muted);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.notify-inbox-field {
|
||||
margin-top: 4px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px dashed var(--border);
|
||||
}
|
||||
|
||||
.publish-grid--secondary {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.announcement-dialog :deep(.el-dialog__body) {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.announcement-hint {
|
||||
margin: 0 0 12px;
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.announcement-publish {
|
||||
margin-bottom: 12px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: #fbfaf7;
|
||||
}
|
||||
|
||||
.announcement-content {
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: #fbfaf7;
|
||||
}
|
||||
|
||||
.announcement-form :deep(.el-form-item) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.announcement-publish-row {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.publish-layout {
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.publish-meta {
|
||||
flex: none;
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.publish-body {
|
||||
min-height: 420px;
|
||||
}
|
||||
}
|
||||
|
||||
.locale-tabs :deep(.el-tabs__header) {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.locale-tabs :deep(.el-tabs__content) {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
@@ -1091,10 +1264,56 @@ void load();
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-preview,
|
||||
.banner-url-input {
|
||||
max-width: 100%;
|
||||
}
|
||||
.inbox-notify-panel {
|
||||
padding: 4px 0 12px;
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
.inbox-notify-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.inbox-notify-row-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.inbox-notify-label {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.inbox-notify-hint {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.inbox-notify-notes-title {
|
||||
margin: 14px 0 6px;
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.inbox-notify-notes {
|
||||
margin: 0 0 16px;
|
||||
padding-left: 18px;
|
||||
font-size: 13px;
|
||||
color: var(--text);
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.inbox-notify-notes li {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user