feat(admin): 观看记录独立菜单与治理状态全部筛选

src/views/governance/ContentGovernanceView.vue

@@ -26,12 +26,14 @@ const canWordUpdate = can('sensitive-word:update')
 const activeTab = ref('comments')
 
 const COMMENT_STATUS = [
+  { value: '', label: '全部状态', tag: 'info' },
   { value: 'pending', label: '待审核', tag: 'warning' },
   { value: 'published', label: '已发布', tag: 'success' },
   { value: 'rejected', label: '已驳回', tag: 'danger' },
   { value: 'deleted', label: '已删除', tag: 'info' }
 ]
 const REPORT_STATUS = [
+  { value: '', label: '全部状态', tag: 'info' },
   { value: 'pending', label: '待处理', tag: 'warning' },
   { value: 'handled', label: '已处理', tag: 'success' },
   { value: 'rejected', label: '已驳回', tag: 'info' }
@@ -48,6 +50,13 @@ function meta(list, value) {
 function levelText(level) {
   return WORD_LEVELS.find((item) => item.value === level)?.label || level
 }
+function commentEpisodeText(row) {
+  if (row.episodeNo) return `第 ${row.episodeNo} 集`
+  return row.episodeId ? `分集 #${row.episodeId}` : '未关联分集'
+}
+function commentContentTooltip(row) {
+  return `短剧 ID：${row.dramaId} / 分集 ID：${row.episodeId || '未关联'}`
+}
 
 const comments = reactive({
   rows: [],
@@ -55,7 +64,7 @@ const comments = reactive({
   loading: false,
   page: 1,
   size: 10,
-  status: 'pending',
+  status: '',
   keyword: ''
 })
 async function loadComments() {
@@ -123,7 +132,7 @@ const reports = reactive({
   loading: false,
   page: 1,
   size: 10,
-  status: 'pending'
+  status: ''
 })
 async function loadReports() {
   reports.loading = true
@@ -325,7 +334,17 @@ const handleTargetText = computed(() => {
           <el-table-column prop="id" label="ID" width="80" />
           <el-table-column prop="nickname" label="用户" min-width="120" show-overflow-tooltip />
           <el-table-column prop="content" label="内容" min-width="220" show-overflow-tooltip />
-          <el-table-column prop="dramaId" label="短剧ID" width="90" />
+          <el-table-column label="短剧 / 分集" min-width="190">
+            <template #default="{ row }">
+              <el-tooltip :content="commentContentTooltip(row)" placement="top">
+                <div class="episode-table-title">
+                  <b>{{ row.dramaTitle || `短剧 #${row.dramaId}` }}</b>
+                  <small>{{ commentEpisodeText(row) }}</small>
+                  <small v-if="row.episodeTitle">{{ row.episodeTitle }}</small>
+                </div>
+              </el-tooltip>
+            </template>
+          </el-table-column>
           <el-table-column label="状态" width="100">
             <template #default="{ row }">
               <el-tag :type="meta(COMMENT_STATUS, row.status).tag" effect="light">{{

src/views/userManagement/WatchHistoryView.vue

@@ -0,0 +1,239 @@
+<!-- Author: fruit.com.cn -->
+
+<script setup>
+import { onMounted, reactive, ref } from 'vue'
+import PageHeading from '@/views/components/PageHeading.vue'
+import { pageWatchHistoryApi } from '@/api/admin/appUser'
+import { formatDuration } from './composables/useAppUsers'
+
+const SOURCE_OPTIONS = [
+  { value: '', label: '全部' },
+  { value: 'HOME', label: '首页' },
+  { value: 'DETAIL', label: '详情页' },
+  { value: 'SEARCH', label: '搜索' },
+  { value: 'FAVORITE', label: '收藏' }
+]
+
+const FINISHED_OPTIONS = [
+  { value: '', label: '全部' },
+  { value: true, label: '已看完' },
+  { value: false, label: '未看完' }
+]
+
+const filters = reactive({
+  keyword: '',
+  dramaTitle: '',
+  source: '',
+  finished: '',
+  range: null
+})
+const rows = ref([])
+const total = ref(0)
+const loading = ref(false)
+const pageIndex = ref(1)
+const pageSize = ref(10)
+
+async function load() {
+  loading.value = true
+  try {
+    const res = await pageWatchHistoryApi({
+      pageIndex: pageIndex.value,
+      pageSize: pageSize.value,
+      keyword: filters.keyword.trim() || undefined,
+      dramaTitle: filters.dramaTitle.trim() || undefined,
+      source: filters.source || undefined,
+      finished: filters.finished === '' ? undefined : filters.finished,
+      startTime: filters.range?.[0] || undefined,
+      endTime: filters.range?.[1] || undefined
+    })
+    rows.value = res.data?.list || []
+    total.value = res.data?.total || 0
+  } finally {
+    loading.value = false
+  }
+}
+
+function search() {
+  pageIndex.value = 1
+  load()
+}
+
+function resetFilters() {
+  filters.keyword = ''
+  filters.dramaTitle = ''
+  filters.source = ''
+  filters.finished = ''
+  filters.range = null
+  search()
+}
+
+function handleSizeChange() {
+  pageIndex.value = 1
+  load()
+}
+
+function sourceText(source) {
+  return SOURCE_OPTIONS.find((item) => item.value === source)?.label || source || '—'
+}
+
+function episodeText(row) {
+  if (row.episodeNo) return `第 ${row.episodeNo} 集`
+  return row.episodeId ? `分集 #${row.episodeId}` : '未关联分集'
+}
+
+function progressText(row) {
+  if (!row.durationMs) return '—'
+  return `${formatDuration(row.positionMs)} / ${formatDuration(row.durationMs)}`
+}
+
+function contentTooltip(row) {
+  return `短剧 ID：${row.dramaId} / 分集 ID：${row.episodeId || '未关联'}`
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <PageHeading
+    eyebrow="用户管理"
+    title="观看记录"
+    description="跨用户检索观看流水，核对短剧、分集、进度与来源。"
+  />
+
+  <section class="panel">
+    <div class="console-toolbar">
+      <el-input
+        v-model="filters.keyword"
+        class="console-keyword"
+        clearable
+        placeholder="uid / 昵称"
+        @keyup.enter="search"
+        @clear="search"
+      />
+      <el-input
+        v-model="filters.dramaTitle"
+        class="console-keyword"
+        clearable
+        placeholder="短剧名称"
+        @keyup.enter="search"
+        @clear="search"
+      />
+      <el-select
+        v-model="filters.source"
+        class="console-select"
+        placeholder="全部来源"
+        @change="search"
+      >
+        <el-option
+          v-for="item in SOURCE_OPTIONS"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+      <el-select
+        v-model="filters.finished"
+        class="console-select"
+        placeholder="全部完成状态"
+        @change="search"
+      >
+        <el-option
+          v-for="item in FINISHED_OPTIONS"
+          :key="String(item.value)"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+      <el-date-picker
+        v-model="filters.range"
+        class="watch-history-range"
+        type="datetimerange"
+        value-format="YYYY-MM-DD HH:mm:ss"
+        range-separator="至"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="search"
+      />
+      <el-button type="primary" @click="search">查询</el-button>
+      <el-button @click="resetFilters">重置</el-button>
+      <span class="console-count">共 {{ total }} 条</span>
+    </div>
+
+    <el-table
+      v-loading="loading"
+      :data="rows"
+      row-key="id"
+      border
+      class="drama-el-table"
+      empty-text="暂无符合条件的观看记录"
+    >
+      <el-table-column prop="watchedAt" label="观看时间" min-width="170" show-overflow-tooltip />
+      <el-table-column label="用户" min-width="180">
+        <template #default="{ row }">
+          <div class="app-user-meta">
+            <span class="app-user-name">{{ row.nickname || '未设置昵称' }}</span>
+            <span class="app-user-uid">{{ row.uid || `用户 #${row.userId || '—'}` }}</span>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="短剧" min-width="190">
+        <template #default="{ row }">
+          <el-tooltip :content="contentTooltip(row)" placement="top">
+            <div class="episode-table-title">
+              <b>{{ row.dramaTitle || `短剧 #${row.dramaId}` }}</b>
+              <el-tag v-if="row.dramaPublished === false" type="info" size="small" effect="plain"
+                >已下线</el-tag
+              >
+            </div>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+      <el-table-column label="分集" min-width="180" show-overflow-tooltip>
+        <template #default="{ row }">
+          <div class="episode-table-title">
+            <b>{{ episodeText(row) }}</b>
+            <small v-if="row.episodeTitle">{{ row.episodeTitle }}</small>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="进度" min-width="120">
+        <template #default="{ row }">
+          <span class="app-user-mono">{{ progressText(row) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="完成" width="92">
+        <template #default="{ row }">
+          <el-tag :type="row.finished ? 'success' : 'info'" effect="light">
+            {{ row.finished ? '已看完' : '未看完' }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="来源" width="96">
+        <template #default="{ row }">{{ sourceText(row.source) }}</template>
+      </el-table-column>
+      <el-table-column prop="deviceId" label="设备" min-width="150" show-overflow-tooltip>
+        <template #default="{ row }">{{ row.deviceId || '—' }}</template>
+      </el-table-column>
+    </el-table>
+
+    <div class="pagination">
+      <el-pagination
+        v-model:current-page="pageIndex"
+        v-model:page-size="pageSize"
+        :page-sizes="[10, 20, 50]"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        background
+        @current-change="load"
+        @size-change="handleSizeChange"
+      />
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.watch-history-range {
+  width: 360px;
+  max-width: 100%;
+}
+</style>