jianghaifeng/ReelShortWeb
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(admin): 内容管理支持多语言和标签

Browse Source
This commit is contained in:
Zhou Weidong committed 2026-10-24 17:30:52 +08:00
1 parent eaee765239
commit 2b2c6bd708
14 files changed
+1080 -458
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/api/admin/contentTag.ts
+41
View File
@@ -0,0 +1,41 @@
// Author: fruit.com.cn
import request from '@/axios'
export interface ContentTagItem {
id: number
name: string
nameEn: string
nameId: string
locales?: Record<string, string>
bgColor?: string
sort: number
status: number
}
export interface ContentTagSaveData {
name: string
locales: Record<string, string>
bgColor?: string
sort?: number
status?: number
}
export const listContentTagsApi = (enabledOnly = false) => {
return request.get<ContentTagItem[]>({
url: '/admin/content-tags',
params: enabledOnly ? { enabledOnly: true } : undefined
})
}
export const createContentTagApi = (data: ContentTagSaveData) => {
return request.post<number>({ url: '/admin/content-tags', data })
}
export const updateContentTagApi = (id: number, data: ContentTagSaveData) => {
return request.put<void>({ url: `/admin/content-tags/${id}`, data })
}
export const deleteContentTagApi = (id: number) => {
return request.delete<void>({ url: `/admin/content-tags/${id}` })
}
src/api/admin/drama.ts
+1
View File
@@ -52,6 +52,7 @@ export const listDramaCategoryOptionsApi = () => {
export interface DramaCategorySaveData {
name: string
locales: Record<string, string>
sort?: number
status?: number
}
src/api/admin/dramaClassification.ts
+4
View File
@@ -6,6 +6,9 @@ import type { PageResult } from './types'
export interface DramaClassificationItem {
id: number
name: string
nameEn: string
nameId: string
locales?: Record<string, string>
sort: number
status: number
dramaCount: number
@@ -14,6 +17,7 @@ export interface DramaClassificationItem {
export interface DramaClassificationSaveData {
name: string
locales: Record<string, string>
sort?: number
status?: number
}
src/api/admin/dramaPlaylistCategory.ts
+8 -1
View File
@@ -7,7 +7,13 @@ import type { ClassificationDramaItem } from './dramaClassification'
export interface DramaPlaylistCategoryItem {
id: number
name: string
nameEn: string
nameId: string
description: string
descriptionEn: string
descriptionId: string
locales?: Record<string, string>
descriptionLocales?: Record<string, string>
sort: number
status: number
dramaCount: number
@@ -15,7 +21,8 @@ export interface DramaPlaylistCategoryItem {
export interface DramaPlaylistCategorySaveData {
name: string
description?: string
locales: Record<string, string>
descriptionLocales?: Record<string, string>
sort?: number
status?: number
}
src/api/admin/types.ts
+3
View File
@@ -8,6 +8,9 @@ export interface PageResult<T> {
export interface DramaCategory {
id: number
name: string
nameEn?: string
nameId?: string
locales?: Record<string, string>
sort?: number
status?: number
/** 该类型下的短剧数量，管理列表才有 */
src/constants/contentLanguages.ts
+46
View File
@@ -0,0 +1,46 @@
// Author: fruit.com.cn
export interface ContentLanguage {
code: string
label: string
}
export const CONTENT_LANGUAGES: ContentLanguage[] = [
{ code: 'zh', label: '中文' },
{ code: 'en', label: '英文' },
{ code: 'id', label: '印尼语' }
]
export function languageLabel(code: string) {
return CONTENT_LANGUAGES.find((item) => item.code === code)?.label || code
}
export function languageCodes(locales?: Record<string, string> | null) {
const source = locales || {}
return CONTENT_LANGUAGES.map((item) => item.code).filter((code) => source[code])
}
export function localesFromColumns(
locales: Record<string, string> | null | undefined,
zh?: string,
en?: string,
id?: string
) {
if (locales && Object.keys(locales).length) {
return { ...locales }
}
const result: Record<string, string> = {}
if (zh) result.zh = zh
if (en) result.en = en
if (id) result.id = id
if (!result.zh) result.zh = ''
return result
}
export function payloadLocales(locales: Record<string, string>, codes: string[]) {
const result: Record<string, string> = {}
codes.forEach((code) => {
result[code] = String(locales[code] || '').trim()
})
return result
}
src/views/components/LocaleTextFields.vue
+67
View File
@@ -0,0 +1,67 @@
<!-- Author: fruit.com.cn -->
<!-- 先勾选语言，再填写对应文案。中文始终保留。 -->
<script setup>
import { CONTENT_LANGUAGES, languageLabel } from '@/constants/contentLanguages'
const props = defineProps({
languages: { type: Array, required: true },
locales: { type: Object, required: true },
label: { type: String, default: '名称' },
maxlength: { type: Number, default: 64 },
multiline: { type: Boolean, default: false },
showLanguages: { type: Boolean, default: true },
required: { type: Boolean, default: true }
})
const emit = defineEmits(['update:languages'])
function changeLanguages(codes) {
const next = codes.includes('zh') ? codes : ['zh', ...codes]
next.forEach((code) => {
if (props.locales[code] == null) props.locales[code] = ''
})
emit('update:languages', next)
}
</script>
<template>
<el-form-item v-if="showLanguages" label="语言" required>
<el-select
:model-value="languages"
multiple
placeholder="选择语言"
style="width: 100%"
@change="changeLanguages"
>
<el-option
v-for="item in CONTENT_LANGUAGES"
:key="item.code"
:label="item.label"
:value="item.code"
:disabled="item.code === 'zh'"
/>
</el-select>
</el-form-item>
<el-form-item
v-for="code in languages"
:key="label + code"
:label="languageLabel(code) + label"
:required="required"
>
<el-input
v-if="!multiline"
v-model="locales[code]"
:maxlength="maxlength"
:placeholder="'请填写' + languageLabel(code) + label"
/>
<el-input
v-else
v-model="locales[code]"
type="textarea"
:rows="2"
:maxlength="maxlength"
show-word-limit
:placeholder="'请填写' + languageLabel(code) + label"
/>
</el-form-item>
</template>
src/views/contentManagement/CategoryDramaView.vue
+58 -202
View File
@@ -6,6 +6,12 @@ import { computed, onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { AppIcon } from '@/components/AppIcon'
import { AppIcons } from '@/constants/icons'
import {
languageCodes,
languageLabel,
localesFromColumns,
payloadLocales
} from '@/constants/contentLanguages'
import {
bindClassificationDramasApi,
createClassificationApi,
@@ -18,6 +24,8 @@ import {
} from '@/api/admin/dramaClassification'
import { statusClass } from '@/utils/status'
import { useRbac } from '@/stores/rbac'
import ClassificationDramaDialogs from './ClassificationDramaDialogs.vue'
import ClassificationSideList from './ClassificationSideList.vue'
import PageHeading from '@/views/components/PageHeading.vue'
const { can } = useRbac()
@@ -46,7 +54,9 @@ const keyword = ref('')
const dialogVisible = ref(false)
const saving = ref(false)
const editingId = ref(null)
const form = reactive({ name: '', sort: 1, status: 1 })
const languages = ref(['zh'])
const emptyForm = () => ({ locales: { zh: '' }, sort: 1, status: 1 })
const form = reactive(emptyForm())
const candidateVisible = ref(false)
const candidateLoading = ref(false)
@@ -110,25 +120,39 @@ function changePage(value) {
function openCreate() {
editingId.value = null
languages.value = ['zh']
const maxSort = classifications.value.reduce((max, item) => Math.max(max, item.sort || 0), 0)
Object.assign(form, { name: '', sort: maxSort + 1, status: 1 })
Object.assign(form, emptyForm(), { sort: maxSort + 1 })
dialogVisible.value = true
}
function openEdit(row) {
editingId.value = row.id
Object.assign(form, { name: row.name, sort: row.sort ?? 0, status: row.status ?? 1 })
const locales = localesFromColumns(row.locales, row.name, row.nameEn, row.nameId)
languages.value = languageCodes(locales)
Object.assign(form, {
locales,
sort: row.sort ?? 0,
status: row.status ?? 1
})
dialogVisible.value = true
}
async function saveClassification() {
if (!form.name.trim()) {
ElMessage.warning('请填写分类名称')
const locales = payloadLocales(form.locales, languages.value)
const missing = languages.value.find((code) => !locales[code])
if (!locales.zh || missing) {
ElMessage.warning(missing ? `请填写${languageLabel(missing)}名称` : '请填写中文名称')
return
}
saving.value = true
try {
const payload = { name: form.name.trim(), sort: form.sort, status: form.status }
const payload = {
name: locales.zh,
locales,
sort: form.sort,
status: form.status
}
if (editingId.value) {
await updateClassificationApi(editingId.value, payload)
ElMessage.success('分类已更新')
@@ -256,48 +280,13 @@ onMounted(loadClassifications)
</PageHeading>
<div class="classification-layout">
<aside class="panel classification-layout__side">
<div class="classification-layout__side-title">全部分类</div>
<el-scrollbar height="560px">
<ul class="classification-list">
<li
v-for="item in classifications"
:key="item.id"
class="classification-list__item"
:class="{ 'is-active': item.id === activeId }"
@click="selectClassification(item)"
>
<div class="classification-list__main">
<span class="classification-list__name">{{ item.name }}</span>
<span class="classification-list__count">{{ item.dramaCount || 0 }}</span>
</div>
<div class="classification-list__actions" @click.stop>
<el-button
v-if="can('drama:update')"
text
circle
size="small"
@click="openEdit(item)"
>
<AppIcon :icon="AppIcons.edit" :size="15" />
</el-button>
<el-button
v-if="can('drama:delete')"
text
circle
size="small"
@click="confirmDelete(item)"
>
<AppIcon :icon="AppIcons.delete" :size="15" />
</el-button>
</div>
</li>
<li v-if="!classifications.length" class="classification-list__empty">
还没有分类，点右上角「新建分类」开始
</li>
</ul>
</el-scrollbar>
</aside>
<ClassificationSideList
:classifications="classifications"
:active-id="activeId"
@select="selectClassification"
@edit="openEdit"
@remove="confirmDelete"
/>
<section class="panel classification-layout__main">
<div class="classification-toolbar">
@@ -376,77 +365,27 @@ onMounted(loadClassifications)
</section>
</div>
<el-dialog v-model="dialogVisible" :title="editingId ? '编辑分类' : '新建分类'" width="460px">
<el-form label-position="top">
<el-form-item label="分类名称" required>
<el-input v-model="form.name" maxlength="20" placeholder="例如：本周必看" />
</el-form-item>
<div class="classification-form-row">
<el-form-item label="排序">
<el-input-number v-model="form.sort" :min="0" :max="999" />
</el-form-item>
<el-form-item label="状态">
<el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
</el-form-item>
</div>
</el-form>
<template #footer>
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" :loading="saving" @click="saveClassification">保存</el-button>
</template>
</el-dialog>
<el-dialog v-model="candidateVisible" title="添加关联短剧" width="760px">
<div class="classification-toolbar__search" style="margin-bottom: 12px">
<el-input
v-model="candidateKeyword"
placeholder="搜索短剧名称"
clearable
style="width: 220px"
@keyup.enter="candidateSearch"
@clear="candidateSearch"
/>
<el-button type="primary" plain @click="candidateSearch">查询</el-button>
</div>
<el-table
v-loading="candidateLoading"
:data="candidates"
row-key="id"
border
max-height="380"
empty-text="没有可关联的短剧"
@selection-change="onSelectionChange"
>
<el-table-column type="selection" width="48" />
<el-table-column prop="title" label="短剧名称" min-width="220" />
<el-table-column label="集数" width="90">
<template #default="{ row }">{{ row.totalEpisodes || 0 }}</template>
</el-table-column>
<el-table-column label="状态" width="110">
<template #default="{ row }">
<span class="status-dot" :class="statusClass(row.status)">
{{ STATUS_TEXT[row.status] || row.status }}
</span>
</template>
</el-table-column>
<el-table-column prop="sort" label="排序" width="90" />
</el-table>
<div class="classification-pagination">
<el-pagination
:current-page="candidatePage"
:page-size="candidatePageSize"
:total="candidateTotal"
layout="total, prev, pager, next"
@current-change="changeCandidatePage"
/>
</div>
<template #footer>
<el-button @click="candidateVisible = false">取消</el-button>
<el-button type="primary" :loading="binding" @click="confirmBind">
确定关联{{ selectedDramas.length ? `（${selectedDramas.length}）` : '' }}
</el-button>
</template>
</el-dialog>
<ClassificationDramaDialogs
v-model:editor-visible="dialogVisible"
v-model:languages="languages"
v-model:candidate-visible="candidateVisible"
v-model:candidate-keyword="candidateKeyword"
:editing-id="editingId"
:form="form"
:saving="saving"
:candidate-loading="candidateLoading"
:candidates="candidates"
:candidate-page="candidatePage"
:candidate-page-size="candidatePageSize"
:candidate-total="candidateTotal"
:binding="binding"
:selected-count="selectedDramas.length"
@save="saveClassification"
@search="candidateSearch"
@page="changeCandidatePage"
@selection="onSelectionChange"
@confirm="confirmBind"
/>
</template>
<style scoped>
@@ -457,83 +396,6 @@ onMounted(loadClassifications)
align-items: start;
}
.classification-layout__side {
padding: 12px 0 8px;
}
.classification-layout__side-title {
padding: 0 16px 10px;
font-weight: 600;
color: var(--el-text-color-primary);
}
.classification-list {
padding: 0;
margin: 0;
list-style: none;
}
.classification-list__item {
display: flex;
padding: 8px 12px 8px 16px;
color: var(--el-text-color-regular);
cursor: pointer;
border-left: 3px solid transparent;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.classification-list__item:hover {
background: var(--el-fill-color-light);
}
.classification-list__item.is-active {
font-weight: 600;
color: var(--el-color-primary);
background: var(--el-color-primary-light-9);
border-left-color: var(--el-color-primary);
}
.classification-list__main {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.classification-list__name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.classification-list__count {
min-width: 24px;
padding: 0 6px;
font-size: 12px;
line-height: 18px;
color: var(--el-text-color-secondary);
text-align: center;
background: var(--el-fill-color);
border-radius: 9px;
}
.classification-list__actions {
display: none;
gap: 2px;
}
.classification-list__item:hover .classification-list__actions {
display: flex;
}
.classification-list__empty {
padding: 16px;
line-height: 1.6;
color: var(--el-text-color-secondary);
}
.classification-layout__main {
padding: 16px;
}
@@ -585,10 +447,4 @@ onMounted(loadClassifications)
justify-content: flex-end;
margin-top: 14px;
}
.classification-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
</style>
src/views/contentManagement/CategoryManagementView.vue
+48 -10
View File
@@ -4,6 +4,12 @@
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { AppIcons } from '@/constants/icons'
import {
languageCodes,
languageLabel,
localesFromColumns,
payloadLocales
} from '@/constants/contentLanguages'
import {
createDramaCategoryApi,
deleteDramaCategoryApi,
@@ -11,6 +17,7 @@ import {
updateDramaCategoryApi
} from '@/api/admin/drama'
import { useRbac } from '@/stores/rbac'
import LocaleTextFields from '@/views/components/LocaleTextFields.vue'
import PageHeading from '@/views/components/PageHeading.vue'
const { can } = useRbac()
@@ -20,7 +27,8 @@ const list = ref([])
const dialogVisible = ref(false)
const saving = ref(false)
const editingId = ref(null)
const form = reactive({ name: '', sort: 1, status: 1 })
const languages = ref(['zh'])
const form = reactive({ locales: { zh: '' }, sort: 1, status: 1 })
async function load() {
loading.value = true
@@ -38,21 +46,29 @@ function nextSort() {
function openCreate() {
editingId.value = null
Object.assign(form, { name: '', sort: nextSort(), status: 1 })
languages.value = ['zh']
Object.assign(form, { locales: { zh: '' }, sort: nextSort(), status: 1 })
dialogVisible.value = true
}
function openEdit(row) {
editingId.value = row.id
Object.assign(form, { name: row.name, sort: row.sort ?? 0, status: row.status ?? 1 })
const locales = localesFromColumns(row.locales, row.name, row.nameEn, row.nameId)
languages.value = languageCodes(locales)
Object.assign(form, { locales, sort: row.sort ?? 0, status: row.status ?? 1 })
dialogVisible.value = true
}
async function saveCategory() {
if (!form.name.trim()) return ElMessage.warning('请填写类型名称')
const locales = payloadLocales(form.locales, languages.value)
const missing = languages.value.find((code) => !locales[code])
if (!locales.zh || missing) {
ElMessage.warning(missing ? `请填写${languageLabel(missing)}名称` : '请填写中文名称')
return
}
saving.value = true
try {
const payload = { name: form.name.trim(), sort: form.sort, status: form.status }
const payload = { name: locales.zh, locales, sort: form.sort, status: form.status }
if (editingId.value) {
await updateDramaCategoryApi(editingId.value, payload)
ElMessage.success('类型已更新')
@@ -115,7 +131,20 @@ onMounted(load)
empty-text="还没有短剧类型"
>
<el-table-column type="index" label="序号" width="80" />
<el-table-column prop="name" label="类型名称" min-width="200" />
<el-table-column prop="name" label="类型名称" min-width="160" />
<el-table-column label="语言" min-width="180">
<template #default="{ row }">
<el-tag
v-for="code in languageCodes(
row.locales || localesFromColumns(null, row.name, row.nameEn, row.nameId)
)"
:key="code"
effect="light"
class="locale-tag"
>{{ languageLabel(code) }}</el-tag
>
</template>
</el-table-column>
<el-table-column label="短剧数" width="110">
<template #default="{ row }">{{ row.dramaCount || 0 }} 部</template>
</el-table-column>
@@ -146,11 +175,14 @@ onMounted(load)
</el-table>
</section>
<el-dialog v-model="dialogVisible" :title="editingId ? '编辑类型' : '新建类型'" width="460px">
<el-dialog v-model="dialogVisible" :title="editingId ? '编辑类型' : '新建类型'" width="560px">
<el-form label-position="top">
<el-form-item label="类型名称" required>
<el-input v-model="form.name" maxlength="20" placeholder="例如：都市情感" />
</el-form-item>
<LocaleTextFields
v-model:languages="languages"
:locales="form.locales"
label="名称"
:maxlength="64"
/>
<div class="form-row">
<el-form-item label="排序">
<el-input-number v-model="form.sort" :min="0" :max="999" />
@@ -166,3 +198,9 @@ onMounted(load)
</template>
</el-dialog>
</template>
<style scoped>
.locale-tag + .locale-tag {
margin-left: 6px;
}
</style>
src/views/contentManagement/ClassificationDramaDialogs.vue
+158
View File
@@ -0,0 +1,158 @@
<!-- Author: fruit.com.cn -->
<!-- 分类管理弹窗：编辑分类，以及把短剧关联进分类。 -->
<script setup>
import { statusClass } from '@/utils/status'
import LocaleTextFields from '@/views/components/LocaleTextFields.vue'
import { AppIcon } from '@/components/AppIcon'
import { AppIcons } from '@/constants/icons'
const SORT_MAX = 9999
const STATUS_TEXT = {
draft: '草稿',
reviewing: '审核中',
approved: '待发布',
published: '已上线',
offline: '已下线'
}
defineProps({
editorVisible: { type: Boolean, default: false },
editingId: { type: [String, Number], default: null },
languages: { type: Array, default: () => ['zh'] },
form: { type: Object, required: true },
saving: { type: Boolean, default: false },
candidateVisible: { type: Boolean, default: false },
candidateLoading: { type: Boolean, default: false },
candidates: { type: Array, default: () => [] },
candidateKeyword: { type: String, default: '' },
candidatePage: { type: Number, default: 1 },
candidatePageSize: { type: Number, default: 10 },
candidateTotal: { type: Number, default: 0 },
binding: { type: Boolean, default: false },
selectedCount: { type: Number, default: 0 }
})
const emit = defineEmits([
'update:editorVisible',
'update:languages',
'update:candidateVisible',
'update:candidateKeyword',
'save',
'search',
'page',
'selection',
'confirm'
])
</script>
<template>
<el-dialog
:model-value="editorVisible"
:title="editingId ? '编辑分类' : '新建分类'"
width="560px"
@update:model-value="emit('update:editorVisible', $event)"
>
<el-form label-position="top">
<LocaleTextFields
:languages="languages"
:locales="form.locales"
label="名称"
:maxlength="64"
@update:languages="emit('update:languages', $event)"
/>
<div class="classification-form-row">
<el-form-item label="排序">
<el-input-number v-model="form.sort" :min="0" :max="SORT_MAX" controls-position="right" />
</el-form-item>
<el-form-item label="状态">
<el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
</el-form-item>
</div>
</el-form>
<template #footer>
<el-button @click="emit('update:editorVisible', false)">取消</el-button>
<el-button type="primary" :loading="saving" @click="emit('save')">保存</el-button>
</template>
</el-dialog>
<el-dialog
:model-value="candidateVisible"
title="添加关联短剧"
width="760px"
@update:model-value="emit('update:candidateVisible', $event)"
>
<div class="classification-toolbar__search">
<el-input
:model-value="candidateKeyword"
placeholder="搜索短剧名称"
clearable
style="width: 220px"
@update:model-value="emit('update:candidateKeyword', $event)"
@keyup.enter="emit('search')"
@clear="emit('search')"
/>
<el-button type="primary" plain @click="emit('search')">查询</el-button>
</div>
<el-table
v-loading="candidateLoading"
:data="candidates"
row-key="id"
border
max-height="380"
empty-text="没有可关联的短剧"
@selection-change="emit('selection', $event)"
>
<el-table-column type="selection" width="48" />
<el-table-column prop="title" label="短剧名称" min-width="220" />
<el-table-column label="集数" width="90">
<template #default="{ row }">{{ row.totalEpisodes || 0 }}</template>
</el-table-column>
<el-table-column label="状态" width="110">
<template #default="{ row }">
<span class="status-dot" :class="statusClass(row.status)">
{{ STATUS_TEXT[row.status] || row.status }}
</span>
</template>
</el-table-column>
<el-table-column prop="sort" label="排序" width="90" />
</el-table>
<div class="classification-pagination">
<el-pagination
:current-page="candidatePage"
:page-size="candidatePageSize"
:total="candidateTotal"
layout="total, prev, pager, next"
@current-change="emit('page', $event)"
/>
</div>
<template #footer>
<el-button @click="emit('update:candidateVisible', false)">取消</el-button>
<el-button type="primary" :loading="binding" @click="emit('confirm')">
确定关联{{ selectedCount ? `（${selectedCount}）` : '' }}
</el-button>
</template>
</el-dialog>
</template>
<style scoped>
.classification-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.classification-toolbar__search {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.classification-pagination {
display: flex;
justify-content: flex-end;
margin-top: 14px;
}
</style>
src/views/contentManagement/ClassificationSideList.vue
+140
View File
@@ -0,0 +1,140 @@
<!-- Author: fruit.com.cn -->
<!-- 分类管理左侧列表：切换、编辑、删除。 -->
<script setup>
import { AppIcon } from '@/components/AppIcon'
import { AppIcons } from '@/constants/icons'
import { useRbac } from '@/stores/rbac'
defineProps({
classifications: { type: Array, default: () => [] },
activeId: { type: [String, Number], default: null }
})
const emit = defineEmits(['select', 'edit', 'remove'])
const { can } = useRbac()
</script>
<template>
<aside class="panel classification-layout__side">
<div class="classification-layout__side-title">全部分类</div>
<el-scrollbar height="560px">
<ul class="classification-list">
<li
v-for="item in classifications"
:key="item.id"
class="classification-list__item"
:class="{ 'is-active': item.id === activeId }"
@click="emit('select', item)"
>
<div class="classification-list__main">
<span class="classification-list__name">{{ item.name }}</span>
<span class="classification-list__count">{{ item.dramaCount || 0 }}</span>
</div>
<div class="classification-list__actions" @click.stop>
<el-button
v-if="can('drama:update')"
text
circle
size="small"
@click="emit('edit', item)"
>
<AppIcon :icon="AppIcons.edit" :size="15" />
</el-button>
<el-button
v-if="can('drama:delete')"
text
circle
size="small"
@click="emit('remove', item)"
>
<AppIcon :icon="AppIcons.delete" :size="15" />
</el-button>
</div>
</li>
<li v-if="!classifications.length" class="classification-list__empty">
还没有分类，点右上角「新建分类」开始
</li>
</ul>
</el-scrollbar>
</aside>
</template>
<style scoped>
.classification-layout__side {
padding: 12px 0 8px;
}
.classification-layout__side-title {
padding: 0 16px 10px;
font-weight: 600;
color: var(--el-text-color-primary);
}
.classification-list {
padding: 0;
margin: 0;
list-style: none;
}
.classification-list__item {
display: flex;
padding: 8px 12px 8px 16px;
color: var(--el-text-color-regular);
cursor: pointer;
border-left: 3px solid transparent;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.classification-list__item:hover {
background: var(--el-fill-color-light);
}
.classification-list__item.is-active {
font-weight: 600;
color: var(--el-color-primary);
background: var(--el-color-primary-light-9);
border-left-color: var(--el-color-primary);
}
.classification-list__main {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.classification-list__name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.classification-list__count {
min-width: 24px;
padding: 0 6px;
font-size: 12px;
line-height: 18px;
color: var(--el-text-color-secondary);
text-align: center;
background: var(--el-fill-color);
border-radius: 9px;
}
.classification-list__actions {
display: none;
gap: 2px;
}
.classification-list__item:hover .classification-list__actions {
display: flex;
}
.classification-list__empty {
padding: 16px;
line-height: 1.6;
color: var(--el-text-color-secondary);
}
</style>
src/views/contentManagement/DramaManagementView.vue
+207 -223
View File
@@ -5,6 +5,13 @@ import { computed, nextTick, onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { AppIcons } from '@/constants/icons'
import {
languageLabel,
languageCodes,
localesFromColumns,
payloadLocales
} from '@/constants/contentLanguages'
import LocaleTextFields from '@/views/components/LocaleTextFields.vue'
import { AppImage } from '@/components/AppImage'
import {
changeDramaStatusApi,
@@ -16,6 +23,7 @@ import {
} from '@/api/admin/drama'
import { useRbac } from '@/stores/rbac'
import { formatCount } from '@/utils/format'
import { listContentTagsApi } from '@/api/admin/contentTag'
import { statusClass } from '@/utils/status'
import { uploadFile } from '@/utils/uploader'
@@ -30,8 +38,7 @@ const categories = ref([])
const keyword = ref('')
const statusFilter = ref(undefined)
const categoryIds = ref([])
const dramaTypes = ref([])
const hotFilter = ref(undefined)
const tags = ref([])
const pageIndex = ref(1)
const pageSize = ref(10)
@@ -45,11 +52,14 @@ const editingId = ref(null)
const editingCommentCount = ref(0)
const editingLikeCount = ref(0)
const formRef = ref()
const textLanguages = ref(['zh'])
const form = reactive({
title: '',
titleLocales: { zh: '' },
categoryIds: [],
dramaTypes: ['LIVE'],
tagId: null,
description: '',
synopsisLocales: { zh: '' },
freeEpisodes: 3,
unlockCoin: 0,
favoriteCount: 0,
@@ -62,16 +72,6 @@ const form = reactive({
const MAX_COVER_SIZE = 5 * 1024 * 1024
const COVER_TYPES = ['image/jpeg', 'image/png', 'image/webp']
const formRules = {
title: [{ required: true, message: '请输入短剧名称', trigger: 'blur' }],
categoryIds: [
{ type: 'array', required: true, min: 1, message: '请至少选择一个类型', trigger: 'change' }
],
dramaTypes: [
{ type: 'array', required: true, min: 1, message: '请至少选择一个内容类型', trigger: 'change' }
]
}
const coverDisplayName = computed(
() => coverFileName.value || (form.cover ? coverBasename(form.cover) : '尚未选择封面')
)
@@ -90,11 +90,6 @@ const statusOptions = [
{ code: 'offline', text: '已下线' }
]
const dramaTypeOptions = [
{ value: 'ANIME', label: '漫剧' },
{ value: 'LIVE', label: '真人剧' }
]
const actionMeta = {
submit: { label: '提交审核', done: '已提交审核' },
approve: { label: '审核通过', done: '已通过审核' },
@@ -111,9 +106,7 @@ async function load() {
pageSize: pageSize.value,
keyword: keyword.value.trim() || undefined,
status: statusFilter.value || undefined,
categoryIds: categoryIds.value.length ? categoryIds.value : undefined,
dramaTypes: dramaTypes.value.length ? dramaTypes.value : undefined,
isHot: hotFilter.value
categoryIds: categoryIds.value.length ? categoryIds.value : undefined
})
list.value = res.data?.list || []
total.value = res.data?.total || 0
@@ -127,6 +120,11 @@ async function loadCategories() {
categories.value = res.data || []
}
async function loadTags() {
const res = await listContentTagsApi(true)
tags.value = res.data || []
}
function search() {
pageIndex.value = 1
load()
@@ -136,8 +134,6 @@ function resetFilters() {
keyword.value = ''
statusFilter.value = undefined
categoryIds.value = []
dramaTypes.value = []
hotFilter.value = undefined
search()
}
@@ -146,24 +142,50 @@ function handleSizeChange() {
load()
}
function selectedCategoryIds(row) {
const values =
Array.isArray(row.categoryIds) && row.categoryIds.length
? row.categoryIds
: row.categoryId
? [row.categoryId]
: []
return values.filter((id) => Number(id) > 0)
}
function coverBasename(path) {
if (!path) return ''
const clean = path.split('?')[0].split('#')[0]
return decodeURIComponent(clean.split('/').pop() || clean)
}
/** 长整型计数字段在接口里是字符串，数字输入框只接受 number。 */
function toCount(value) {
const count = Number(value)
return Number.isFinite(count) ? count : 0
}
async function resetValidation() {
await nextTick()
formRef.value?.clearValidate()
}
function changeTextLanguages(codes) {
textLanguages.value = codes
codes.forEach((code) => {
if (form.synopsisLocales[code] == null) form.synopsisLocales[code] = ''
})
}
function openCreate() {
editingId.value = null
textLanguages.value = ['zh']
Object.assign(form, {
title: '',
titleLocales: { zh: '' },
categoryIds: [],
dramaTypes: ['LIVE'],
tagId: null,
description: '',
synopsisLocales: { zh: '' },
freeEpisodes: 3,
unlockCoin: 0,
favoriteCount: 0,
@@ -182,41 +204,35 @@ function openCreate() {
function openEdit(row) {
editingId.value = row.id
const titleLocales = localesFromColumns(row.titleLocales, row.title)
const synopsisLocales = localesFromColumns(row.synopsisLocales, row.description)
textLanguages.value = languageCodes(titleLocales)
textLanguages.value.forEach((code) => {
if (synopsisLocales[code] == null) synopsisLocales[code] = ''
})
Object.assign(form, {
title: row.title,
categoryIds:
Array.isArray(row.categoryIds) && row.categoryIds.length
? row.categoryIds
: row.categoryId
? [row.categoryId]
: [],
dramaTypes:
Array.isArray(row.dramaTypes) && row.dramaTypes.length
? row.dramaTypes
: row.dramaType
? [row.dramaType]
: ['LIVE'],
titleLocales,
categoryIds: selectedCategoryIds(row),
tagId: Number(row.tagId) > 0 ? row.tagId : null,
description: row.description || '',
freeEpisodes: row.freeEpisodes ?? 3,
unlockCoin: row.unlockCoin ?? 0,
favoriteCount: row.favoriteCount ?? 0,
heat: row.views ?? 0,
synopsisLocales,
freeEpisodes: toCount(row.freeEpisodes ?? 3),
unlockCoin: toCount(row.unlockCoin),
favoriteCount: toCount(row.favoriteCount),
heat: toCount(row.views),
isHot: !!row.isHot,
sort: row.sort ?? 0,
sort: toCount(row.sort),
cover: row.cover || ''
})
coverFileName.value = row.cover ? coverBasename(row.cover) : ''
coverError.value = ''
editingCommentCount.value = row.commentCount ?? 0
editingLikeCount.value = row.likeCount ?? 0
editingCommentCount.value = toCount(row.commentCount)
editingLikeCount.value = toCount(row.likeCount)
dialogVisible.value = true
resetValidation()
}
function dramaTypeLabel(value) {
return dramaTypeOptions.find((item) => item.value === value)?.label || '真人剧'
}
function rowCategoryList(row) {
if (Array.isArray(row.categoryNames) && row.categoryNames.length) {
return row.categoryNames.filter(Boolean)
@@ -228,25 +244,26 @@ function rowCategoryList(row) {
.filter(Boolean)
}
function rowDramaTypes(row) {
if (Array.isArray(row.dramaTypes) && row.dramaTypes.length) return row.dramaTypes
return row.dramaType ? [row.dramaType] : []
}
async function saveDrama() {
if (saving.value || uploadingCover.value) return
try {
await formRef.value?.validate()
} catch {
const titles = payloadLocales(form.titleLocales, textLanguages.value)
const missing = textLanguages.value.find((code) => !titles[code])
if (!titles.zh || missing) {
ElMessage.warning(missing ? `请填写${languageLabel(missing)}名称` : '请输入短剧名称')
return
}
const synopses = payloadLocales(form.synopsisLocales, textLanguages.value)
const categoryNames = form.categoryIds
.map((id) => categories.value.find((item) => item.id === id)?.name)
.filter(Boolean)
const payload = {
...form,
title: form.title.trim(),
genre: categoryNames.join(' / ')
title: titles.zh,
titleLocales: titles,
description: synopses.zh || '',
synopsisLocales: synopses,
genre: categoryNames.join(' / '),
tagId: form.tagId || 0
}
saving.value = true
try {
@@ -370,7 +387,7 @@ function reviewActions(row) {
}
onMounted(async () => {
await loadCategories()
await Promise.all([loadCategories(), loadTags()])
await load()
})
</script>
@@ -413,22 +430,6 @@ onMounted(async () => {
:key="item.id"
:label="item.name"
:value="item.id" /></el-select
><el-select
v-model="dramaTypes"
class="drama-multi-select"
multiple
clearable
placeholder="全部内容类型"
@change="search"
><el-option
v-for="item in dramaTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value" /></el-select
><el-select v-model="hotFilter" clearable placeholder="全部热度" @change="search"
><el-option label="仅热门" :value="true" /><el-option
label="非热门"
:value="false" /></el-select
><el-button @click="resetFilters">重置</el-button></div
><span class="table-result-count">共 {{ total }} 部短剧</span></div
>
@@ -465,24 +466,17 @@ onMounted(async () => {
>
<el-table-column label="类型" min-width="200"
><template #default="{ row }"
><div class="tag-wrap"
><div v-if="rowCategoryList(row).length" class="tag-wrap"
><el-tag v-for="name in rowCategoryList(row)" :key="name" type="info" effect="light">{{
name
}}</el-tag></div
></template
><span v-else class="table-empty-text">—</span></template
>
</el-table-column>
<el-table-column label="内容类型" min-width="180"
<el-table-column label="标签" min-width="120"
><template #default="{ row }"
><div class="tag-wrap"
><el-tag
v-for="type in rowDramaTypes(row)"
:key="type"
:type="type === 'ANIME' ? 'warning' : 'info'"
effect="light"
>{{ dramaTypeLabel(type) }}</el-tag
></div
></template
><span v-if="row.tagName">{{ row.tagName }}</span
><span v-else class="table-empty-text">—</span></template
></el-table-column
>
<el-table-column label="集数" width="90"
@@ -513,12 +507,6 @@ onMounted(async () => {
}}</el-tag></template
></el-table-column
>
<el-table-column label="热门" width="90"
><template #default="{ row }"
><el-tag v-if="row.isHot" type="danger" effect="light">热门</el-tag
><span v-else class="table-empty-text">—</span></template
></el-table-column
>
<el-table-column prop="updatedAt" label="更新时间" width="160" />
<el-table-column label="审核" width="140"
><template #default="{ row }"
@@ -576,141 +564,12 @@ onMounted(async () => {
<el-dialog
v-model="dialogVisible"
:title="editingId ? '编辑短剧' : '新建短剧'"
width="680px"
width="760px"
class="drama-editor-dialog"
:close-on-click-modal="false"
:before-close="beforeDialogClose"
>
<el-form
ref="formRef"
:model="form"
:rules="formRules"
label-position="top"
class="drama-editor-form"
>
<section class="editor-section">
<h3 class="editor-section-title">基础信息</h3>
<div class="editor-grid editor-grid--two">
<el-form-item label="短剧名称" prop="title">
<el-input v-model="form.title" maxlength="80" placeholder="请输入短剧名称" />
</el-form-item>
<el-form-item label="类型" prop="categoryIds">
<el-select
v-model="form.categoryIds"
class="drama-multi-select"
multiple
filterable
placeholder="请选择类型"
>
<el-option
v-for="item in categories"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="内容类型" prop="dramaTypes">
<el-select
v-model="form.dramaTypes"
class="drama-multi-select"
multiple
filterable
placeholder="请选择内容类型"
>
<el-option
v-for="item in dramaTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</div>
<el-form-item label="简介">
<el-input
v-model="form.description"
type="textarea"
:rows="3"
maxlength="1000"
show-word-limit
placeholder="简要介绍剧情"
/>
</el-form-item>
</section>
<section class="editor-section">
<h3 class="editor-section-title">付费设置</h3>
<div class="editor-grid editor-grid--two">
<el-form-item label="免费集数">
<el-input-number
v-model="form.freeEpisodes"
class="editor-number"
controls-position="right"
:min="0"
:max="200"
/>
</el-form-item>
<el-form-item label="单集解锁金币">
<el-input-number
v-model="form.unlockCoin"
class="editor-number"
controls-position="right"
:min="0"
:max="9999"
/>
</el-form-item>
</div>
<div class="editor-grid editor-grid--two">
<el-form-item label="是否热门">
<el-switch v-model="form.isHot" />
</el-form-item>
<el-form-item label="排序权重">
<el-input-number
v-model="form.sort"
class="editor-number"
controls-position="right"
:min="0"
:max="99999"
:precision="0"
/>
<p class="readonly-stat-hint">数值越大越靠前，相同权重按 ID 倒序</p>
</el-form-item>
</div>
</section>
<section class="editor-section">
<h3 class="editor-section-title">互动数据</h3>
<div class="editor-grid editor-grid--two">
<el-form-item label="收藏数">
<el-input-number
v-model="form.favoriteCount"
class="editor-number"
controls-position="right"
:min="0"
:precision="0"
/>
</el-form-item>
<el-form-item label="点赞数">
<div class="readonly-stat">{{ formatCount(editingLikeCount) }}</div>
<p class="readonly-stat-hint">全剧分集汇总，只读</p>
</el-form-item>
<el-form-item label="热度">
<el-input-number
v-model="form.heat"
class="editor-number"
controls-position="right"
:min="0"
:precision="0"
/>
</el-form-item>
<el-form-item label="评论数">
<div class="readonly-stat">{{ formatCount(editingCommentCount) }}</div>
<p class="readonly-stat-hint">全剧汇总，实时统计，只读</p>
</el-form-item>
</div>
</section>
<el-form ref="formRef" :model="form" label-position="top" class="drama-editor-form">
<section class="editor-section">
<h3 class="editor-section-title">封面</h3>
<div class="cover-editor">
@@ -776,6 +635,117 @@ onMounted(async () => {
</div>
</div>
</section>
<section class="editor-section">
<h3 class="editor-section-title">基础信息</h3>
<LocaleTextFields
:languages="textLanguages"
:locales="form.titleLocales"
label="名称"
:maxlength="80"
@update:languages="changeTextLanguages"
/>
<div class="editor-grid editor-grid--two">
<el-form-item label="类型">
<el-select
v-model="form.categoryIds"
class="drama-multi-select"
multiple
filterable
clearable
placeholder="可不选"
>
<el-option
v-for="item in categories"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="标签">
<el-select v-model="form.tagId" clearable filterable placeholder="可不选">
<el-option v-for="item in tags" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
</div>
<LocaleTextFields
:languages="textLanguages"
:locales="form.synopsisLocales"
label="简介"
:maxlength="1000"
multiline
:show-languages="false"
:required="false"
/>
</section>
<section class="editor-section">
<h3 class="editor-section-title">付费设置</h3>
<div class="editor-grid editor-grid--two">
<el-form-item label="免费集数">
<el-input-number
v-model="form.freeEpisodes"
class="editor-number"
controls-position="right"
:min="0"
:max="200"
/>
</el-form-item>
<el-form-item label="单集解锁金币">
<el-input-number
v-model="form.unlockCoin"
class="editor-number"
controls-position="right"
:min="0"
:max="9999"
/>
</el-form-item>
<el-form-item label="排序">
<el-input-number
v-model="form.sort"
class="editor-number"
controls-position="right"
:min="0"
:max="99999"
:precision="0"
/>
<p class="readonly-stat-hint">数值越大越靠前，相同权重按 ID 倒序</p>
</el-form-item>
</div>
</section>
<section class="editor-section">
<h3 class="editor-section-title">互动数据</h3>
<div class="editor-grid editor-grid--two">
<el-form-item label="收藏数">
<el-input-number
v-model="form.favoriteCount"
class="editor-number"
controls-position="right"
:min="0"
:precision="0"
/>
</el-form-item>
<el-form-item label="点赞数">
<div class="readonly-stat">{{ formatCount(editingLikeCount) }}</div>
<p class="readonly-stat-hint">全剧分集汇总，只读</p>
</el-form-item>
<el-form-item label="热度">
<el-input-number
v-model="form.heat"
class="editor-number"
controls-position="right"
:min="0"
:precision="0"
/>
</el-form-item>
<el-form-item label="评论数">
<div class="readonly-stat">{{ formatCount(editingCommentCount) }}</div>
<p class="readonly-stat-hint">全剧汇总，实时统计，只读</p>
</el-form-item>
</div>
</section>
</el-form>
<template #footer>
@@ -816,6 +786,20 @@ onMounted(async () => {
min-width: 0;
}
.drama-editor-form :deep(.el-form-item) {
margin-right: 0;
}
.drama-editor-form :deep(.el-form-item__content) {
min-width: 0;
}
.drama-editor-form :deep(.el-input),
.drama-editor-form :deep(.el-textarea),
.drama-editor-form :deep(.el-select) {
width: 100%;
}
.tag-wrap {
display: flex;
flex-wrap: wrap;
src/views/contentManagement/DramaPlaylistView.vue
+61 -22
View File
@@ -6,6 +6,12 @@ import { computed, onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { AppIcon } from '@/components/AppIcon'
import { AppIcons } from '@/constants/icons'
import {
languageCodes,
languageLabel,
localesFromColumns,
payloadLocales
} from '@/constants/contentLanguages'
import {
bindPlaylistCategoryDramasApi,
createPlaylistCategoryApi,
@@ -18,6 +24,7 @@ import {
} from '@/api/admin/dramaPlaylistCategory'
import { statusClass } from '@/utils/status'
import { useRbac } from '@/stores/rbac'
import LocaleTextFields from '@/views/components/LocaleTextFields.vue'
import PageHeading from '@/views/components/PageHeading.vue'
const { can } = useRbac()
@@ -46,7 +53,14 @@ const keyword = ref('')
const dialogVisible = ref(false)
const saving = ref(false)
const editingId = ref(null)
const form = reactive({ name: '', description: '', sort: 1, status: 1 })
const languages = ref(['zh'])
const emptyForm = () => ({
locales: { zh: '' },
descriptionLocales: { zh: '' },
sort: 1,
status: 1
})
const form = reactive(emptyForm())
const candidateVisible = ref(false)
const candidateLoading = ref(false)
@@ -108,18 +122,37 @@ function changePage(value) {
loadDramas()
}
function changeLanguages(codes) {
languages.value = codes
codes.forEach((code) => {
if (form.descriptionLocales[code] == null) form.descriptionLocales[code] = ''
})
}
function openCreate() {
editingId.value = null
languages.value = ['zh']
const maxSort = categories.value.reduce((max, item) => Math.max(max, item.sort || 0), 0)
Object.assign(form, { name: '', description: '', sort: maxSort + 1, status: 1 })
Object.assign(form, emptyForm(), { sort: maxSort + 1 })
dialogVisible.value = true
}
function openEdit(row) {
editingId.value = row.id
const locales = localesFromColumns(row.locales, row.name, row.nameEn, row.nameId)
languages.value = languageCodes(locales)
const descriptionLocales = localesFromColumns(
row.descriptionLocales,
row.description,
row.descriptionEn,
row.descriptionId
)
languages.value.forEach((code) => {
if (descriptionLocales[code] == null) descriptionLocales[code] = ''
})
Object.assign(form, {
name: row.name,
description: row.description || '',
locales,
descriptionLocales,
sort: row.sort ?? 0,
status: row.status ?? 1
})
@@ -127,15 +160,18 @@ function openEdit(row) {
}
async function saveCategory() {
if (!form.name.trim()) {
ElMessage.warning('请填写剧单分类名称')
const locales = payloadLocales(form.locales, languages.value)
const missing = languages.value.find((code) => !locales[code])
if (!locales.zh || missing) {
ElMessage.warning(missing ? `请填写${languageLabel(missing)}名称` : '请填写中文名称')
return
}
saving.value = true
try {
const payload = {
name: form.name.trim(),
description: form.description.trim(),
name: locales.zh,
locales,
descriptionLocales: payloadLocales(form.descriptionLocales, languages.value),
sort: form.sort,
status: form.status
}
@@ -390,22 +426,25 @@ onMounted(loadCategories)
<el-dialog
v-model="dialogVisible"
:title="editingId ? '编辑剧单分类' : '新建剧单分类'"
width="460px"
width="640px"
>
<el-form label-position="top">
<el-form-item label="分类名称" required>
<el-input v-model="form.name" maxlength="20" placeholder="例如：本周必看" />
</el-form-item>
<el-form-item label="描述">
<el-input
v-model="form.description"
type="textarea"
:rows="2"
maxlength="255"
show-word-limit
placeholder="分类用途说明"
/>
</el-form-item>
<LocaleTextFields
:languages="languages"
:locales="form.locales"
label="名称"
:maxlength="64"
@update:languages="changeLanguages"
/>
<LocaleTextFields
:languages="languages"
:locales="form.descriptionLocales"
label="描述"
:maxlength="255"
multiline
:show-languages="false"
:required="false"
/>
<div class="playlist-form-row">
<el-form-item label="排序">
<el-input-number v-model="form.sort" :min="0" :max="999" />
src/views/contentManagement/TagManagementView.vue
+238
View File
@@ -0,0 +1,238 @@
<!-- Author: fruit.com.cn -->
<!-- 标签管理：名称分中文、英文、印尼语。短剧编辑时单选一个标签。 -->
<script setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { AppIcons } from '@/constants/icons'
import {
languageCodes,
languageLabel,
localesFromColumns,
payloadLocales
} from '@/constants/contentLanguages'
import {
createContentTagApi,
deleteContentTagApi,
listContentTagsApi,
updateContentTagApi
} from '@/api/admin/contentTag'
import { useRbac } from '@/stores/rbac'
import LocaleTextFields from '@/views/components/LocaleTextFields.vue'
import PageHeading from '@/views/components/PageHeading.vue'
const { can } = useRbac()
const tags = ref([])
const loading = ref(false)
const saving = ref(false)
const dialogVisible = ref(false)
const editingId = ref(null)
const languages = ref(['zh'])
const DEFAULT_TAG_COLOR = '#E5484D'
const emptyForm = () => ({
locales: { zh: '' },
bgColor: DEFAULT_TAG_COLOR,
sort: 1,
status: 1
})
const form = reactive(emptyForm())
async function load() {
loading.value = true
try {
const res = await listContentTagsApi()
tags.value = res.data || []
} finally {
loading.value = false
}
}
function nextSort() {
return tags.value.reduce((max, item) => Math.max(max, item.sort || 0), 0) + 1
}
function openCreate() {
editingId.value = null
languages.value = ['zh']
Object.assign(form, emptyForm(), { sort: nextSort() })
dialogVisible.value = true
}
function openEdit(row) {
editingId.value = row.id
const locales = localesFromColumns(row.locales, row.name, row.nameEn, row.nameId)
languages.value = languageCodes(locales)
Object.assign(form, {
locales,
bgColor: row.bgColor || DEFAULT_TAG_COLOR,
sort: row.sort ?? 0,
status: row.status ?? 1
})
dialogVisible.value = true
}
async function save() {
const locales = payloadLocales(form.locales, languages.value)
if (!locales.zh) {
ElMessage.warning('请填写中文名称')
return
}
const missing = languages.value.find((code) => !locales[code])
if (missing) {
ElMessage.warning(`请填写${languageLabel(missing)}名称`)
return
}
saving.value = true
try {
const payload = {
name: locales.zh,
locales,
bgColor: form.bgColor || DEFAULT_TAG_COLOR,
sort: form.sort,
status: form.status
}
if (editingId.value) {
await updateContentTagApi(editingId.value, payload)
ElMessage.success('标签已更新')
} else {
await createContentTagApi(payload)
ElMessage.success('标签已创建')
}
dialogVisible.value = false
await load()
} finally {
saving.value = false
}
}
async function confirmDelete(row) {
try {
await ElMessageBox.confirm(
`确定删除标签「${row.name}」吗？已选该标签的短剧会取消选择。`,
'删除确认',
{
confirmButtonText: '确认删除',
cancelButtonText: '取消',
type: 'warning',
confirmButtonClass: 'el-button--danger'
}
)
} catch {
return
}
await deleteContentTagApi(row.id)
ElMessage.success('标签已删除')
await load()
}
onMounted(load)
</script>
<template>
<PageHeading
eyebrow="内容管理"
title="标签管理"
description="维护短剧标签。名称分中文、英文、印尼语，短剧编辑时单选一个。"
>
<el-button v-if="can('drama:create')" type="primary" class="primary-button" @click="openCreate">
<AppIcon :icon="AppIcons.add" />
新建标签
</el-button>
</PageHeading>
<section class="panel">
<el-table
v-loading="loading"
:data="tags"
row-key="id"
border
class="drama-el-table"
empty-text="还没有标签"
>
<el-table-column type="index" label="序号" width="80" />
<el-table-column prop="name" label="中文名称" min-width="160" />
<el-table-column label="语言" min-width="220">
<template #default="{ row }">
<el-tag
v-for="code in languageCodes(
row.locales || localesFromColumns(null, row.name, row.nameEn, row.nameId)
)"
:key="code"
effect="light"
class="locale-tag"
>{{ languageLabel(code) }}</el-tag
>
</template>
</el-table-column>
<el-table-column label="背景色" width="100">
<template #default="{ row }">
<span class="tag-color" :style="{ background: row.bgColor || DEFAULT_TAG_COLOR }"></span>
</template>
</el-table-column>
<el-table-column prop="sort" label="排序" width="100" />
<el-table-column label="状态" width="110">
<template #default="{ row }">
<el-tag :type="row.status === 1 ? 'success' : 'info'" effect="light">{{
row.status === 1 ? '启用' : '停用'
}}</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="200" fixed="right">
<template #default="{ row }">
<div class="table-actions">
<el-button v-if="can('drama:update')" type="primary" size="small" @click="openEdit(row)"
>编辑</el-button
>
<el-button
v-if="can('drama:delete')"
type="danger"
size="small"
@click="confirmDelete(row)"
>删除</el-button
>
</div>
</template>
</el-table-column>
</el-table>
</section>
<el-dialog v-model="dialogVisible" :title="editingId ? '编辑标签' : '新建标签'" width="560px">
<el-form label-position="top">
<LocaleTextFields
v-model:languages="languages"
:locales="form.locales"
label="名称"
:maxlength="64"
/>
<el-form-item label="背景色">
<el-color-picker v-model="form.bgColor" color-format="hex" />
</el-form-item>
<div class="form-row">
<el-form-item label="排序">
<el-input-number v-model="form.sort" :min="0" :max="999" />
</el-form-item>
<el-form-item label="状态">
<el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
</el-form-item>
</div>
</el-form>
<template #footer>
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" :loading="saving" @click="save">保存</el-button>
</template>
</el-dialog>
</template>
<style scoped>
.locale-tag + .locale-tag {
margin-left: 6px;
}
.tag-color {
display: inline-block;
width: 28px;
height: 16px;
border-radius: 4px;
}
</style>