up

admin/src/layout/MainLayout.vue

@@ -32,7 +32,8 @@
         <div class="header-right">
           <el-tag size="small" type="info">{{ auth.roleText }}</el-tag>
           <span class="admin-name">{{ auth.adminName }}</span>
-          <el-button link type="primary" @click="handleLogout">退出登录</el-button>
+          <el-button link type="primary" @click="router.push('/account/password')">修改密码</el-button>
+          <el-button link type="danger" @click="handleLogout">退出登录</el-button>
         </div>
       </el-header>
 
@@ -67,7 +68,9 @@ const menuConfig = [
     icon: 'VideoCamera',
     children: [
       { title: '视频审核', path: '/videos/pending', icon: 'VideoPlay', roles: ['reviewer'] },
+      { title: '发布视频', path: '/videos/create', icon: 'Upload', roles: [] },
       { title: '视频管理', path: '/videos', icon: 'Film', roles: [] },
+      { title: '系列管理', path: '/series', icon: 'CollectionTag', roles: [] },
       { title: '评论管理', path: '/comments', icon: 'ChatDotRound', roles: [] },
       { title: '举报处理', path: '/reports', icon: 'Warning', roles: [] },
     ],

admin/src/router/index.js

@@ -40,12 +40,24 @@ const routes = [
         component: () => import('@/views/VideoPending.vue'),
         meta: { title: '视频审核', icon: 'VideoPlay', roles: ['reviewer'] },
       },
+      {
+        path: 'videos/create',
+        name: 'video-create',
+        component: () => import('@/views/CreateVideo.vue'),
+        meta: { title: '发布视频', icon: 'Upload', roles: [] },
+      },
       {
         path: 'videos',
         name: 'video-list',
         component: () => import('@/views/VideoList.vue'),
         meta: { title: '视频管理', icon: 'Film', roles: [] },
       },
+      {
+        path: 'series',
+        name: 'series-manage',
+        component: () => import('@/views/SeriesManage.vue'),
+        meta: { title: '系列管理', icon: 'CollectionTag', roles: [] },
+      },
       {
         path: 'comments',
         name: 'comment-list',
@@ -124,6 +136,12 @@ const routes = [
         component: () => import('@/views/LogList.vue'),
         meta: { title: '操作日志', icon: 'Document', roles: [] },
       },
+      {
+        path: 'account/password',
+        name: 'change-password',
+        component: () => import('@/views/ChangePassword.vue'),
+        meta: { title: '修改密码', icon: 'Lock', roles: ['operator'], hidden: true },
+      },
     ],
   },
   { path: '/:pathMatch(.*)*', redirect: '/dashboard' },

admin/src/views/ChangePassword.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="change-password">
+    <el-card shadow="never">
+      <template #header>
+        <span>修改管理员密码</span>
+      </template>
+      <el-form
+        ref="formRef"
+        :model="form"
+        :rules="rules"
+        label-width="120px"
+        style="max-width: 520px"
+      >
+        <el-form-item label="原密码" prop="old_password">
+          <el-input v-model="form.old_password" type="password" show-password placeholder="请输入当前密码" />
+        </el-form-item>
+        <el-form-item label="新密码" prop="new_password">
+          <el-input v-model="form.new_password" type="password" show-password placeholder="至少 6 位" />
+        </el-form-item>
+        <el-form-item label="确认新密码" prop="confirm">
+          <el-input v-model="form.confirm" type="password" show-password placeholder="再次输入新密码" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" :loading="submitting" @click="submit">确认修改</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import request from '@/api/request'
+
+const formRef = ref()
+const submitting = ref(false)
+const form = reactive({
+  old_password: '',
+  new_password: '',
+  confirm: '',
+})
+
+const rules = {
+  old_password: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
+  new_password: [
+    { required: true, message: '请输入新密码', trigger: 'blur' },
+    { min: 6, message: '至少 6 位', trigger: 'blur' },
+  ],
+  confirm: [
+    { required: true, message: '请再次输入新密码', trigger: 'blur' },
+    {
+      validator: (_, v, cb) => (v === form.new_password ? cb() : cb(new Error('两次输入不一致'))),
+      trigger: 'blur',
+    },
+  ],
+}
+
+async function submit() {
+  await formRef.value.validate()
+  submitting.value = true
+  try {
+    await request({
+      url: '/admin/auth/password',
+      method: 'put',
+      data: { old_password: form.old_password, new_password: form.new_password },
+    })
+    ElMessage.success('密码修改成功')
+    formRef.value.resetFields()
+  } catch (e) {
+    // request.js 里已经 toast 了
+  } finally {
+    submitting.value = false
+  }
+}
+</script>

admin/src/views/CreateVideo.vue

@@ -0,0 +1,248 @@
+<template>
+  <div class="create-video">
+    <el-card shadow="never">
+      <template #header>
+        <span>发布视频</span>
+      </template>
+
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
+        <!-- 标题 / 分类 / 简介 -->
+        <el-form-item label="标题" prop="title">
+          <el-input v-model="form.title" maxlength="100" show-word-limit placeholder="视频标题" />
+        </el-form-item>
+        <el-form-item label="分类" prop="category_id">
+          <el-select v-model="form.category_id" placeholder="请选择分类" style="width: 240px">
+            <el-option v-for="c in categories" :key="c.id" :label="c.name" :value="c.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="简介">
+          <el-input v-model="form.description" type="textarea" :rows="3" maxlength="500" show-word-limit placeholder="视频描述（可选）" />
+        </el-form-item>
+
+        <!-- 两种模式切换 -->
+        <el-form-item label="视频来源">
+          <el-radio-group v-model="mode">
+            <el-radio-button label="upload">上传文件（自动转码 HLS）</el-radio-button>
+            <el-radio-button label="url">填 m3u8 地址</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+
+        <!-- 模式 A：上传 -->
+        <template v-if="mode === 'upload'">
+          <el-form-item label="视频文件" required>
+            <el-upload
+              :auto-upload="true"
+              :show-file-list="false"
+              :http-request="uploadFile"
+              accept=".mp4,.mov,.mkv,.avi"
+              :disabled="!!form.upload_token"
+            >
+              <el-button type="primary" :loading="uploading">
+                {{ uploading ? '上传中…' : '选择视频上传' }}
+              </el-button>
+              <span v-if="form.upload_token" class="ml8 ok">✓ 已上传：{{ uploadedName }}</span>
+              <span v-else class="ml8 hint">支持 mp4/mov/mkv/avi，最大由服务器 nginx 限制</span>
+            </el-upload>
+          </el-form-item>
+        </template>
+
+        <!-- 模式 B：URL -->
+        <template v-else>
+          <el-form-item label="m3u8 地址" prop="video_url">
+            <el-input v-model="form.video_url" placeholder="https://xxx.com/videos/xxx/index.m3u8" />
+          </el-form-item>
+          <el-form-item label="封面图 URL" prop="cover_url">
+            <el-input v-model="form.cover_url" placeholder="https://xxx.com/cover.jpg" />
+          </el-form-item>
+          <el-form-item label="时长(秒)">
+            <el-input-number v-model="form.duration" :min="1" :max="36000" :step="10" placeholder="可选" />
+          </el-form-item>
+        </template>
+
+        <el-form-item label="发布状态">
+          <el-radio-group v-model="form.status">
+            <el-radio :label="1">待审核</el-radio>
+            <el-radio :label="2">直接发布</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item label="归属系列">
+          <el-select v-model="form.series_id" clearable placeholder="不归属系列"
+                    style="width: 240px" @change="onSeriesChange">
+            <el-option v-for="s in seriesList" :key="s.id" :label="s.title" :value="s.id" />
+          </el-select>
+          <el-input-number v-if="form.series_id" v-model="form.episode_no"
+                           :min="1" :step="1" placeholder="第几集" style="margin-left: 8px; width: 120px" />
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="primary" :loading="submitting" @click="submit">提交</el-button>
+          <el-button @click="reset">重置</el-button>
+          <span v-if="resultMsg" class="ml8 ok">提交成功，video_id={{ resultMsg }}</span>
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import request from '@/api/request'
+
+const formRef = ref()
+const uploading = ref(false)
+const submitting = ref(false)
+const mode = ref('upload') // 'upload' | 'url'
+const uploadedName = ref('')
+const resultMsg = ref('')
+const categories = ref([])
+const seriesList = ref([])
+
+const form = reactive({
+  title: '',
+  description: '',
+  category_id: null,
+  upload_token: '',
+  video_url: '',
+  cover_url: '',
+  duration: null,
+  status: 1,
+  series_id: null,
+  episode_no: null,
+})
+
+const rules = {
+  title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
+  category_id: [{ required: true, message: '请选择分类', trigger: 'change' }],
+  video_url: [
+    {
+      validator: (_, v, cb) => {
+        if (mode.value !== 'url') return cb()
+        if (!v) return cb(new Error('请填 m3u8 地址'))
+        if (!v.startsWith('http')) return cb(new Error('必须 http(s) 开头'))
+        cb()
+      },
+      trigger: 'blur',
+    },
+  ],
+  cover_url: [
+    {
+      validator: (_, v, cb) => {
+        if (mode.value !== 'url') return cb()
+        if (!v) return cb(new Error('URL 模式必须填封面'))
+        cb()
+      },
+      trigger: 'blur',
+    },
+  ],
+}
+
+onMounted(async () => {
+  try {
+    const res = await request({ url: '/categories', method: 'get' })
+    categories.value = res.data || []
+  } catch (e) {}
+  try {
+    const s = await request({ url: '/admin/series', method: 'get', params: { page_size: 200 } })
+    seriesList.value = s.data?.list || []
+  } catch (e) {}
+})
+
+function onSeriesChange() {
+  if (!form.series_id) form.episode_no = null
+}
+
+async function uploadFile({ file }) {
+  uploading.value = true
+  try {
+    // 1) 先拿上传凭证
+    const t = await request({ url: '/admin/videos/upload', method: 'post' })
+    const token = t.data.token
+    const uploadUrl = t.data.upload_url
+    // 2) 上传文件（multipart/form-data，带 token query）
+    const fd = new FormData()
+    fd.append('file', file)
+    const res = await fetch(uploadUrl + (uploadUrl.includes('?') ? '&' : '?') + 'token=' + token, {
+      method: 'POST',
+      headers: { Authorization: 'Bearer ' + localStorage.getItem('admin_token') },
+      body: fd,
+    })
+    const json = await res.json()
+    if (json.code === 0) {
+      form.upload_token = json.data.upload_token
+      uploadedName.value = file.name + '（' + (json.data.file_size / 1024 / 1024).toFixed(1) + 'MB）'
+      ElMessage.success('上传成功')
+    } else {
+      ElMessage.error(json.message || '上传失败')
+    }
+  } catch (e) {
+    ElMessage.error('上传异常：' + (e.message || e))
+  } finally {
+    uploading.value = false
+  }
+}
+
+async function submit() {
+  await formRef.value.validate()
+  if (mode.value === 'upload' && !form.upload_token) {
+    ElMessage.warning('请先上传视频文件')
+    return
+  }
+  if (mode.value === 'url' && !form.video_url) {
+    ElMessage.warning('请填 m3u8 地址')
+    return
+  }
+  submitting.value = true
+  try {
+    const payload = {
+      title: form.title,
+      description: form.description,
+      category_id: form.category_id,
+      status: form.status,
+    }
+    if (mode.value === 'upload') {
+      payload.upload_token = form.upload_token
+    } else {
+      payload.video_url = form.video_url
+      payload.cover_url = form.cover_url
+      if (form.duration) payload.duration = form.duration
+    }
+    const res = await request({ url: '/admin/videos', method: 'post', data: payload })
+    const newVideoId = res.data?.video_id
+    resultMsg.value = newVideoId
+    // 如果选了系列 + 集数，绑定进去
+    if (newVideoId && form.series_id && form.episode_no) {
+      try {
+        await request({
+          url: `/admin/videos/${newVideoId}/series`, method: 'post',
+          data: { series_id: form.series_id, episode_no: form.episode_no },
+        })
+      } catch (e) {}
+    }
+    ElMessage.success('提交成功')
+    reset()
+  } catch (e) {} finally {
+    submitting.value = false
+  }
+}
+
+function reset() {
+  formRef.value.resetFields()
+  form.upload_token = ''
+  form.video_url = ''
+  form.cover_url = ''
+  form.duration = null
+  form.status = 1
+  form.series_id = null
+  form.episode_no = null
+  uploadedName.value = ''
+  resultMsg.value = ''
+}
+</script>
+
+<style scoped>
+.ml8 { margin-left: 8px; }
+.hint { color: #909399; font-size: 12px; }
+.ok { color: #67c23a; }
+</style>

admin/src/views/SeriesManage.vue

@@ -0,0 +1,184 @@
+<template>
+  <div class="series-manage">
+    <el-card shadow="never">
+      <template #header>
+        <div class="header">
+          <span>系列管理</span>
+          <div>
+            <el-input v-model="keyword" placeholder="搜索系列标题" clearable
+                      style="width: 200px; margin-right: 8px" @keyup.enter="load" />
+            <el-button type="primary" @click="showCreate">+ 新建系列</el-button>
+          </div>
+        </div>
+      </template>
+
+      <el-table :data="list" v-loading="loading" stripe>
+        <el-table-column prop="id" label="ID" width="70" />
+        <el-table-column prop="title" label="系列标题" min-width="160">
+          <template #default="{ row }">
+            <div class="title-col">
+              <img v-if="row.cover_url" :src="row.cover_url" class="cover" />
+              <span>{{ row.title }}</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="total_episodes" label="集数" width="90" />
+        <el-table-column label="状态" width="80">
+          <template #default="{ row }">
+            <el-tag :type="row.status === 1 ? 'success' : 'info'" size="small">
+              {{ row.status === 1 ? '正常' : '隐藏' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="created_at" label="创建时间" width="170" />
+        <el-table-column label="操作" width="180" fixed="right">
+          <template #default="{ row }">
+            <el-button link type="primary" @click="showEdit(row)">编辑</el-button>
+            <el-button link type="primary" @click="toggleStatus(row)">
+              {{ row.status === 1 ? '隐藏' : '恢复' }}
+            </el-button>
+            <el-button link type="danger" @click="del(row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination
+        v-model:current-page="page"
+        :page-size="pageSize"
+        :total="total"
+        layout="total, prev, pager, next"
+        style="margin-top: 12px; text-align: right"
+        @current-change="load"
+      />
+    </el-card>
+
+    <!-- 新建/编辑弹窗 -->
+    <el-dialog v-model="dialogVisible" :title="editing ? '编辑系列' : '新建系列'" width="480px">
+      <el-form :model="form" label-width="90px">
+        <el-form-item label="标题">
+          <el-input v-model="form.title" maxlength="100" show-word-limit />
+        </el-form-item>
+        <el-form-item label="封面图 URL">
+          <el-input v-model="form.cover_url" placeholder="https://..." />
+        </el-form-item>
+        <el-form-item label="分类">
+          <el-select v-model="form.category_id" placeholder="请选择" style="width: 100%">
+            <el-option v-for="c in categories" :key="c.id" :label="c.name" :value="c.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="简介">
+          <el-input v-model="form.description" type="textarea" :rows="3" maxlength="500" show-word-limit />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitting" @click="save">保存</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import request from '@/api/request'
+
+const list = ref([])
+const total = ref(0)
+const page = ref(1)
+const pageSize = 20
+const loading = ref(false)
+const keyword = ref('')
+const categories = ref([])
+const dialogVisible = ref(false)
+const editing = ref(null)
+const submitting = ref(false)
+
+const form = reactive({
+  title: '', cover_url: '', description: '', category_id: 0,
+})
+
+onMounted(async () => {
+  load()
+  try {
+    const r = await request({ url: '/categories', method: 'get' })
+    categories.value = r.data || []
+  } catch (e) {}
+})
+
+async function load() {
+  loading.value = true
+  try {
+    const r = await request({
+      url: '/admin/series', method: 'get',
+      params: { keyword: keyword.value, page: page.value, page_size: pageSize },
+    })
+    list.value = r.data.list
+    total.value = r.data.total
+  } catch (e) {} finally {
+    loading.value = false
+  }
+}
+
+function showCreate() {
+  editing.value = null
+  Object.assign(form, { title: '', cover_url: '', description: '', category_id: 0 })
+  dialogVisible.value = true
+}
+
+function showEdit(row) {
+  editing.value = row
+  Object.assign(form, {
+    title: row.title, cover_url: row.cover_url,
+    description: row.description, category_id: row.category_id ?? 0,
+  })
+  dialogVisible.value = true
+}
+
+async function save() {
+  if (!form.title) { ElMessage.warning('请填标题'); return }
+  submitting.value = true
+  try {
+    if (editing.value) {
+      await request({
+        url: `/admin/series/${editing.value.id}`, method: 'put', data: form,
+      })
+      ElMessage.success('已更新')
+    } else {
+      await request({ url: '/admin/series', method: 'post', data: form })
+      ElMessage.success('已创建')
+    }
+    dialogVisible.value = false
+    load()
+  } catch (e) {} finally {
+    submitting.value = false
+  }
+}
+
+async function toggleStatus(row) {
+  const next = row.status === 1 ? 0 : 1
+  try {
+    await request({
+      url: `/admin/series/${row.id}`, method: 'put',
+      data: { status: next },
+    })
+    ElMessage.success('已更新')
+    load()
+  } catch (e) {}
+}
+
+async function del(row) {
+  await ElMessageBox.confirm(`确认删除「${row.title}」？`, '警告', { type: 'warning' })
+  try {
+    await request({ url: `/admin/series/${row.id}`, method: 'delete' })
+    ElMessage.success('已删除')
+    load()
+  } catch (e) {}
+}
+</script>
+
+<style scoped>
+.header { display: flex; justify-content: space-between; align-items: center; }
+.title-col { display: flex; align-items: center; gap: 8px; }
+.cover { width: 40px; height: 40px; border-radius: 4px; object-fit: cover; }
+</style>