chore(merge): 合并协议设置与用户系统展示

src/api/admin/dramaClassification.ts

@@ -51,10 +51,7 @@ export const deleteClassificationApi = (id: number) => {
 }
 
 /** 分类下已关联的短剧 */
-export const listClassificationDramasApi = (
-  id: number,
-  params: ClassificationDramaPageParams
-) => {
+export const listClassificationDramasApi = (id: number, params: ClassificationDramaPageParams) => {
   return request.get<PageResult<ClassificationDramaItem>>({
     url: `/admin/drama-classifications/${id}/dramas`,
     params

src/api/admin/legalDocument.ts

@@ -0,0 +1,18 @@
+// Author: fruit.com.cn
+
+import request from '@/axios'
+
+export interface LegalDocument {
+  docCode: 'terms' | 'privacy' | string
+  lang: 'zh' | 'en' | 'id' | string
+  title: string
+  content: string
+}
+
+export const listLegalDocumentsApi = () => {
+  return request.get<LegalDocument[]>({ url: '/admin/legal-documents' })
+}
+
+export const saveLegalDocumentsApi = (items: LegalDocument[]) => {
+  return request.put<void>({ url: '/admin/legal-documents', data: items })
+}

src/api/admin/types.ts

@@ -386,6 +386,10 @@ export interface AppUserItem {
   maskedTarget: string
   createdAt?: string
   lastLoginAt?: string
+  /** ANDROID / IOS / WEB */
+  platform?: string
+  /** 系统版本，例如 Android 16 */
+  osVersion?: string
   /** 预留：会员等级与到期（第二阶段） */
   vipLevel?: number
   vipExpireAt?: string
@@ -425,6 +429,8 @@ export interface WatchHistoryItem {
   finished?: boolean
   source: string
   deviceId: string
+  platform?: string
+  osVersion?: string
   watchedAt?: string
 }
 

src/router/index.ts

@@ -211,6 +211,14 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
         meta: {
           title: '操作日志'
         }
+      },
+      {
+        path: 'legal-documents',
+        name: 'legal-documents',
+        component: () => import('@/views/systemManagement/LegalDocumentView.vue'),
+        meta: {
+          title: '协议设置'
+        }
       }
     ]
   }

src/views/contentManagement/CategoryDramaView.vue

@@ -249,12 +249,7 @@ onMounted(loadClassifications)
     title="分类管理"
     description="分类是运营自定义的分组，与「类型」无关；一个分类可以关联任意多部短剧。"
   >
-    <el-button
-      v-if="can('drama:create')"
-      type="primary"
-      class="primary-button"
-      @click="openCreate"
-    >
+    <el-button v-if="can('drama:create')" type="primary" class="primary-button" @click="openCreate">
       <AppIcon :icon="AppIcons.add" />
       新建分类
     </el-button>
@@ -277,7 +272,13 @@ onMounted(loadClassifications)
               <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)">
+              <el-button
+                v-if="can('drama:update')"
+                text
+                circle
+                size="small"
+                @click="openEdit(item)"
+              >
                 <AppIcon :icon="AppIcons.edit" :size="15" />
               </el-button>
               <el-button
@@ -314,11 +315,7 @@ onMounted(loadClassifications)
             @clear="search"
           />
           <el-button type="primary" plain @click="search">查询</el-button>
-          <el-button
-            v-if="can('drama:update')"
-            :disabled="!activeId"
-            @click="openCandidates"
-          >
+          <el-button v-if="can('drama:update')" :disabled="!activeId" @click="openCandidates">
             <AppIcon :icon="AppIcons.add" />
             添加短剧
           </el-button>
@@ -379,11 +376,7 @@ onMounted(loadClassifications)
     </section>
   </div>
 
-  <el-dialog
-    v-model="dialogVisible"
-    :title="editingId ? '编辑分类' : '新建分类'"
-    width="460px"
-  >
+  <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="例如：本周必看" />
@@ -475,20 +468,20 @@ onMounted(loadClassifications)
 }
 
 .classification-list {
-  margin: 0;
   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;
-  padding: 8px 12px 8px 16px;
-  cursor: pointer;
-  color: var(--el-text-color-regular);
-  border-left: 3px solid transparent;
 }
 
 .classification-list__item:hover {
@@ -496,10 +489,10 @@ onMounted(loadClassifications)
 }
 
 .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);
-  color: var(--el-color-primary);
-  font-weight: 600;
 }
 
 .classification-list__main {
@@ -520,10 +513,10 @@ onMounted(loadClassifications)
   padding: 0 6px;
   font-size: 12px;
   line-height: 18px;
-  text-align: center;
-  border-radius: 9px;
-  background: var(--el-fill-color);
   color: var(--el-text-color-secondary);
+  text-align: center;
+  background: var(--el-fill-color);
+  border-radius: 9px;
 }
 
 .classification-list__actions {
@@ -537,8 +530,8 @@ onMounted(loadClassifications)
 
 .classification-list__empty {
   padding: 16px;
-  color: var(--el-text-color-secondary);
   line-height: 1.6;
+  color: var(--el-text-color-secondary);
 }
 
 .classification-layout__main {

src/views/contentManagement/DramaPlaylistView.vue

@@ -259,12 +259,7 @@ onMounted(loadCategories)
     title="剧单管理"
     description="剧单使用自己的分类体系（与「分类管理」无关），每个分类下直接选择短剧。"
   >
-    <el-button
-      v-if="can('drama:create')"
-      type="primary"
-      class="primary-button"
-      @click="openCreate"
-    >
+    <el-button v-if="can('drama:create')" type="primary" class="primary-button" @click="openCreate">
       <AppIcon :icon="AppIcons.add" />
       新建分类
     </el-button>
@@ -287,7 +282,13 @@ onMounted(loadCategories)
               <span class="playlist-list__count">{{ item.dramaCount || 0 }}</span>
             </div>
             <div class="playlist-list__actions" @click.stop>
-              <el-button v-if="can('drama:update')" text circle size="small" @click="openEdit(item)">
+              <el-button
+                v-if="can('drama:update')"
+                text
+                circle
+                size="small"
+                @click="openEdit(item)"
+              >
                 <AppIcon :icon="AppIcons.edit" :size="15" />
               </el-button>
               <el-button
@@ -492,20 +493,20 @@ onMounted(loadCategories)
 }
 
 .playlist-list {
-  margin: 0;
   padding: 0;
+  margin: 0;
   list-style: none;
 }
 
 .playlist-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;
-  padding: 8px 12px 8px 16px;
-  cursor: pointer;
-  color: var(--el-text-color-regular);
-  border-left: 3px solid transparent;
 }
 
 .playlist-list__item:hover {
@@ -513,10 +514,10 @@ onMounted(loadCategories)
 }
 
 .playlist-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);
-  color: var(--el-color-primary);
-  font-weight: 600;
 }
 
 .playlist-list__main {
@@ -537,10 +538,10 @@ onMounted(loadCategories)
   padding: 0 6px;
   font-size: 12px;
   line-height: 18px;
-  text-align: center;
-  border-radius: 9px;
-  background: var(--el-fill-color);
   color: var(--el-text-color-secondary);
+  text-align: center;
+  background: var(--el-fill-color);
+  border-radius: 9px;
 }
 
 .playlist-list__actions {
@@ -554,8 +555,8 @@ onMounted(loadCategories)
 
 .playlist-list__empty {
   padding: 16px;
-  color: var(--el-text-color-secondary);
   line-height: 1.6;
+  color: var(--el-text-color-secondary);
 }
 
 .playlist-layout__main {

src/views/contentManagement/upload/RenditionPlayerDialog.vue

@@ -90,7 +90,7 @@ onBeforeUnmount(destroy)
     @closed="destroy"
   >
     <div class="rendition-player">
-      <video ref="videoRef" class="rendition-player__video" controls playsinline />
+      <video ref="videoRef" class="rendition-player__video" controls playsinline></video>
       <p v-if="errorMsg" class="rendition-player__error">{{ errorMsg }}</p>
       <p class="rendition-player__url" :title="url">{{ url }}</p>
     </div>
@@ -113,14 +113,14 @@ onBeforeUnmount(destroy)
 
 .rendition-player__error {
   margin: 0;
-  color: var(--el-color-danger);
   font-size: 13px;
+  color: var(--el-color-danger);
 }
 
 .rendition-player__url {
   margin: 0;
-  color: var(--el-text-color-secondary);
   font-size: 12px;
+  color: var(--el-text-color-secondary);
   word-break: break-all;
 }
 </style>

src/views/systemManagement/LegalDocumentView.vue

@@ -0,0 +1,119 @@
+<!-- Author: fruit.com.cn -->
+
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import {
+  listLegalDocumentsApi,
+  saveLegalDocumentsApi,
+  type LegalDocument
+} from '@/api/admin/legalDocument'
+
+const languages = [
+  { code: 'zh', label: '中文' },
+  { code: 'en', label: 'English' },
+  { code: 'id', label: 'Indonesia' }
+]
+
+const documents = [
+  { code: 'terms', label: '服务条款', path: '/terms' },
+  { code: 'privacy', label: '隐私协议', path: '/privacy' }
+]
+
+const loading = ref(false)
+const saving = ref(false)
+const activeDoc = ref('terms')
+const form = reactive<Record<string, LegalDocument>>({})
+
+const blank = (docCode: string, lang: string): LegalDocument => ({
+  docCode,
+  lang,
+  title: '',
+  content: ''
+})
+
+const fieldKey = (docCode: string, lang: string) => `${docCode}:${lang}`
+
+function ensureFields() {
+  for (const doc of documents) {
+    for (const lang of languages) {
+      const key = fieldKey(doc.code, lang.code)
+      if (!form[key]) form[key] = blank(doc.code, lang.code)
+    }
+  }
+}
+
+async function load() {
+  loading.value = true
+  try {
+    ensureFields()
+    const res = await listLegalDocumentsApi()
+    for (const item of res.data || []) {
+      form[fieldKey(item.docCode, item.lang)] = { ...item }
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+async function save() {
+  saving.value = true
+  try {
+    ensureFields()
+    const items = documents.flatMap((doc) =>
+      languages.map((lang) => ({ ...form[fieldKey(doc.code, lang.code)], title: '' }))
+    )
+    await saveLegalDocumentsApi(items)
+    ElMessage.success('协议已保存')
+    await load()
+  } finally {
+    saving.value = false
+  }
+}
+
+onMounted(load)
+ensureFields()
+</script>
+
+<template>
+  <div class="page-heading">
+    <div>
+      <div class="eyebrow">系统管理</div>
+      <h1>协议设置</h1>
+      <p>服务条款与隐私协议各维护中文、英文、印尼语。正文用 Markdown，打开后的页面不另加标题。</p>
+    </div>
+  </div>
+  <section v-loading="loading" class="panel settings-panel">
+    <el-tabs v-model="activeDoc">
+      <el-tab-pane v-for="doc in documents" :key="doc.code" :name="doc.code" :label="doc.label" />
+    </el-tabs>
+    <template v-for="doc in documents" :key="doc.code">
+      <div v-show="activeDoc === doc.code">
+        <p class="legal-path"
+          >公开地址：{{ doc.path }}/zh 、{{ doc.path }}/en 、{{ doc.path }}/id</p
+        >
+        <div v-for="lang in languages" :key="`${doc.code}-${lang.code}`" class="legal-block">
+          <h2>{{ lang.label }}</h2>
+          <el-input
+            v-model="form[`${doc.code}:${lang.code}`].content"
+            type="textarea"
+            :rows="14"
+            placeholder="直接写 Markdown，页面不再另加标题"
+          />
+        </div>
+      </div>
+    </template>
+    <el-button type="primary" :loading="saving" @click="save">保存</el-button>
+  </section>
+</template>
+
+<style scoped>
+.legal-path {
+  margin: 0 0 12px;
+  color: var(--el-text-color-secondary);
+}
+
+.legal-block + .legal-block {
+  margin-top: 8px;
+}
+</style>

src/views/userManagement/AppUsersView.vue

@@ -11,6 +11,7 @@ import {
   COUNTRY_OPTIONS,
   formatDuration,
   statusMeta,
+  systemText,
   useAppUsers
 } from './composables/useAppUsers'
 
@@ -172,6 +173,9 @@ function canBeBanned(row) {
           </div>
         </template>
       </el-table-column>
+      <el-table-column label="系统" width="130" show-overflow-tooltip>
+        <template #default="{ row }">{{ systemText(row) }}</template>
+      </el-table-column>
       <el-table-column label="手机 / 邮箱" min-width="150" show-overflow-tooltip>
         <template #default="{ row }">
           <span class="app-user-mono">{{ row.maskedTarget || '—' }}</span>
@@ -268,6 +272,7 @@ function canBeBanned(row) {
             <el-descriptions-item label="最后登录">{{
               detail.lastLoginAt || '—'
             }}</el-descriptions-item>
+            <el-descriptions-item label="系统">{{ systemText(detail) }}</el-descriptions-item>
             <el-descriptions-item label="会员">
               {{ detail.vipLevel ? `等级 ${detail.vipLevel}` : '未开通（第二阶段）' }}
             </el-descriptions-item>
@@ -299,6 +304,9 @@ function canBeBanned(row) {
             <el-table-column label="完成" width="70">
               <template #default="{ row }">{{ row.finished ? '是' : '否' }}</template>
             </el-table-column>
+            <el-table-column label="系统" width="120" show-overflow-tooltip>
+              <template #default="{ row }">{{ systemText(row) }}</template>
+            </el-table-column>
             <el-table-column label="来源" width="80">
               <template #default="{ row }">{{
                 SOURCE_TEXT[row.source] || row.source || '—'

src/views/userManagement/WatchHistoryView.vue

@@ -4,7 +4,7 @@
 import { onMounted, reactive, ref } from 'vue'
 import PageHeading from '@/views/components/PageHeading.vue'
 import { pageWatchHistoryApi } from '@/api/admin/appUser'
-import { formatDuration } from './composables/useAppUsers'
+import { formatDuration, systemText } from './composables/useAppUsers'
 
 const SOURCE_OPTIONS = [
   { value: '', label: '全部' },
@@ -176,6 +176,9 @@ onMounted(load)
           </div>
         </template>
       </el-table-column>
+      <el-table-column label="系统" width="130" show-overflow-tooltip>
+        <template #default="{ row }">{{ systemText(row) }}</template>
+      </el-table-column>
       <el-table-column label="短剧" min-width="190">
         <template #default="{ row }">
           <el-tooltip :content="contentTooltip(row)" placement="top">

src/views/userManagement/composables/useAppUsers.js

@@ -34,6 +34,16 @@ export function statusMeta(status) {
   )
 }
 
+const PLATFORM_TEXT = { ANDROID: 'Android', IOS: 'iOS', WEB: 'Web' }
+
+/** 登录会话上的系统，例如 Android 16。没有记录时显示横线。 */
+export function systemText(row) {
+  const name = PLATFORM_TEXT[row?.platform] || row?.platform || ''
+  const version = row?.osVersion || ''
+  const text = `${name} ${version}`.trim()
+  return text || '—'
+}
+
 /** 毫秒转 mm:ss，观看流水里的进度用 */
 export function formatDuration(ms) {
   const total = Math.max(0, Math.floor((ms || 0) / 1000))