first commit

2026-10-12 17:35:07 +08:00
commit db15eb3ee0
@@ -0,0 +1,44 @@
+<script setup>
+import { computed, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import { dramas } from '@/data/dramas'
+import { episodeData } from '@/data/episodes'
+import { useRbac } from '@/stores/rbac'
+import { statusClass } from '@/utils/status'
+
+const route = useRoute()
+const { can } = useRbac()
+const selectedDramaId = ref(Number(route.query.drama) || dramas[0]?.id)
+const dialogVisible = ref(false)
+const form = ref({ title: '', fileName: '' })
+const selectedDrama = computed(() => dramas.find(item => item.id === selectedDramaId.value) || dramas[0])
+const episodes = computed(() => episodeData.filter(item => item.dramaId === selectedDramaId.value).sort((a,b) => a.number-b.number))
+function pickVideo(file) { form.value.fileName = file.name }
+function saveEpisode() {
+  if (!form.value.title || !form.value.fileName) return ElMessage.warning('请填写标题并选择视频文件')
+  episodeData.push({ id: Date.now(), dramaId: selectedDramaId.value, number: episodes.value.length + 1, title: form.value.title, duration: '待处理', status: '待发布', views: '—', fileName: form.value.fileName })
+  selectedDrama.value.episodes += 1
+  form.value = { title: '', fileName: '' }
+  dialogVisible.value = false
+  ElMessage.success('剧集已加入本地上传队列')
+}
+</script>
+
+<template>
+  <div class="page-heading"><div><div class="eyebrow">内容管理</div><h1>剧集管理</h1><p>为短剧添加视频剧集并维护播放顺序。</p></div><el-button v-if="can('上传剧集视频')" type="primary" class="primary-button" @click="dialogVisible=true"><el-icon><Plus /></el-icon>上传剧集</el-button></div>
+  <section class="panel episode-panel">
+    <div class="episode-context"><div class="episode-context-copy"><span>选择短剧</span><b>{{selectedDrama?.title}}</b></div><el-select v-model="selectedDramaId" class="drama-select"><el-option v-for="item in dramas" :key="item.id" :label="item.title" :value="item.id" /></el-select></div>
+    <div class="episode-toolbar"><div><h2>剧集列表（{{episodes.length}}）</h2><p>按剧集编号顺序播放</p></div></div>
+    <el-table :data="episodes" row-key="id" empty-text="该短剧暂无剧集" class="drama-el-table episode-el-table">
+      <el-table-column label="集数" width="100"><template #default="{row}">{{String(row.number).padStart(2,'0')}}</template></el-table-column>
+      <el-table-column label="剧集名称" min-width="280"><template #default="{row}"><div class="episode-table-title"><b>{{row.title}}</b><small v-if="row.fileName">{{row.fileName}}</small></div></template></el-table-column>
+      <el-table-column prop="duration" label="时长" width="140" />
+      <el-table-column prop="views" label="播放量" width="180"><template #default="{row}">{{row.views}}<span v-if="row.views !== '—'"> 次</span></template></el-table-column>
+      <el-table-column label="状态" width="150"><template #default="{row}"><el-tag :class="['status-badge',statusClass(row.status)]" effect="light">{{row.status}}</el-tag></template></el-table-column>
+      <el-table-column label="操作" width="150" fixed="right"><template #default><el-button v-if="can('管理剧集排序')" type="primary" link>调整顺序</el-button></template></el-table-column>
+    </el-table>
+  </section>
+  <el-dialog v-model="dialogVisible" title="上传剧集" width="560px"><el-form label-position="top"><el-form-item label="剧集标题" required><el-input v-model="form.title" placeholder="例如：命运的相遇" /></el-form-item><el-form-item label="视频文件" required><el-upload drag action="#" :auto-upload="false" accept="video/mp4,video/quicktime" :on-change="pickVideo"><div class="upload-copy">拖放视频文件到此处，或点击选择<br/><small>支持 MP4、MOV</small></div></el-upload></el-form-item><p v-if="form.fileName" class="selected-file">已选择：{{form.fileName}}</p></el-form><template #footer><el-button @click="dialogVisible=false">取消</el-button><el-button type="primary" @click="saveEpisode">加入上传队列</el-button></template></el-dialog>
+</template>