From f3fbc57c148eef27a3396c1b6a5a5d1aa4a4dcc9 Mon Sep 17 00:00:00 2001
From: Vicky <10212746+haifeng-jiang@user.noreply.gitee.com>
Date: Tue, 27 Oct 2026 13:53:53 +0800
Subject: [PATCH] =?UTF-8?q?feat(admin):=20=E7=BB=9F=E4=B8=80=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E5=8D=95=E5=85=83=E6=A0=BC=EF=BC=8C=E5=B1=95=E7=A4=BA?=
 =?UTF-8?q?=E6=B8=B8=E5=AE=A2=E8=AE=BE=E5=A4=87=E5=8F=B7=E4=B8=8E=E5=AE=A2?=
 =?UTF-8?q?=E6=88=B7=E7=AB=AF=E7=B3=BB=E7=BB=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 AppUserCell，游客显示标签+deviceId，第二行统一展示系统与机型
- 收藏、点赞、观看记录三页复用，观看记录去掉重复的系统列
---
 src/api/admin/engagement.ts                   |  6 +-
 src/views/components/AppUserCell.vue          | 63 +++++++++++++++++++
 src/views/userManagement/FavoritesView.vue    | 23 +------
 src/views/userManagement/LikesView.vue        | 23 +------
 src/views/userManagement/WatchHistoryView.vue | 13 ++--
 5 files changed, 78 insertions(+), 50 deletions(-)
 create mode 100644 src/views/components/AppUserCell.vue

diff --git a/src/api/admin/engagement.ts b/src/api/admin/engagement.ts
index c79b63f..e0f511e 100644
--- a/src/api/admin/engagement.ts
+++ b/src/api/admin/engagement.ts
@@ -26,12 +26,16 @@ export interface EngagementItem {
   uid: string | null
   nickname: string | null
   deviceId: string | null
+  /** 客户端系统，来自设备画像；老客户端未上报时为空。 */
+  platform: string | null
+  osVersion: string | null
+  deviceModel: string | null
   anonymous: boolean
   dramaId: string | null
   dramaTitle: string | null
   dramaCover: string | null
   dramaStatus: string | null
-  dramaPublished: boolean
+  dramaPublished: boolean | null
   targetType: string
   targetId: string
   episodeId: string | null
diff --git a/src/views/components/AppUserCell.vue b/src/views/components/AppUserCell.vue
new file mode 100644
index 0000000..d9664ea
--- /dev/null
+++ b/src/views/components/AppUserCell.vue
@@ -0,0 +1,63 @@
+<!-- Author: fruit.com.cn -->
+
+<script setup>
+import { computed } from 'vue'
+
+/**
+ * 后台各列表共用的「用户」单元格。
+ *
+ * 口径：已登录显示昵称 + uid；未登录显示「游客」标签 + deviceId（单行省略，悬浮看全值）。
+ * 第二行统一展示客户端系统，系统缺失（老客户端没上报）时显示横线。
+ */
+const props = defineProps({
+  row: { type: Object, required: true }
+})
+
+const PLATFORM_TEXT = { ANDROID: 'Android', IOS: 'iOS', WEB: 'Web' }
+
+const isGuest = computed(() => props.row?.userId == null)
+
+const systemText = computed(() => {
+  const row = props.row || {}
+  const name = PLATFORM_TEXT[row.platform] || row.platform || ''
+  const version = row.osVersion || ''
+  const text = `${name} ${version}`.trim()
+  if (!text) return '—'
+  return row.deviceModel ? `${text} · ${row.deviceModel}` : text
+})
+</script>
+
+<template>
+  <div class="app-user-meta">
+    <template v-if="isGuest">
+      <el-tag type="info" size="small">游客</el-tag>
+      <span class="app-user-uid app-user-device" :title="row.deviceId || ''">{{
+        row.deviceId || '—'
+      }}</span>
+    </template>
+    <template v-else>
+      <span class="app-user-name" :title="row.nickname || ''">{{
+        row.nickname || '未设置昵称'
+      }}</span>
+      <span class="app-user-uid">{{ row.uid || `用户 #${row.userId}` }}</span>
+    </template>
+    <span class="app-user-system">{{ systemText }}</span>
+  </div>
+</template>
+
+<style scoped>
+.app-user-device {
+  max-width: 150px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.app-user-system {
+  color: #b0adbd;
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>
diff --git a/src/views/userManagement/FavoritesView.vue b/src/views/userManagement/FavoritesView.vue
index 2c63e7a..51f677e 100644
--- a/src/views/userManagement/FavoritesView.vue
+++ b/src/views/userManagement/FavoritesView.vue
@@ -4,6 +4,7 @@
 import { onMounted, reactive, ref } from 'vue'
 import dayjs from 'dayjs'
 import PageHeading from '@/views/components/PageHeading.vue'
+import AppUserCell from '@/views/components/AppUserCell.vue'
 import { pageFavoritesApi } from '@/api/admin/engagement'
 
 const PAGE_SIZES = [10, 20, 50]
@@ -104,20 +105,9 @@ onMounted(load)
       class="drama-el-table"
       empty-text="暂无收藏"
     >
-      <el-table-column label="用户" min-width="180">
+      <el-table-column label="用户" min-width="200">
         <template #default="{ row }">
-          <div class="app-user-meta">
-            <template v-if="row.userId == null">
-              <el-tag type="info" size="small">游客</el-tag>
-              <span class="app-user-uid engagement-device-id" :title="row.deviceId || ''">{{
-                row.deviceId || '—'
-              }}</span>
-            </template>
-            <template v-else>
-              <span class="app-user-name">{{ row.nickname || '未设置昵称' }}</span>
-              <span class="app-user-uid">{{ row.uid || `用户 #${row.userId}` }}</span>
-            </template>
-          </div>
+          <AppUserCell :row="row" />
         </template>
       </el-table-column>
       <el-table-column label="短剧" min-width="220">
@@ -156,13 +146,6 @@ onMounted(load)
 </template>
 
 <style scoped>
-.engagement-device-id {
-  max-width: 150px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .engagement-range {
   width: 360px;
   max-width: 100%;
diff --git a/src/views/userManagement/LikesView.vue b/src/views/userManagement/LikesView.vue
index 569be35..f838288 100644
--- a/src/views/userManagement/LikesView.vue
+++ b/src/views/userManagement/LikesView.vue
@@ -4,6 +4,7 @@
 import { onMounted, reactive, ref } from 'vue'
 import dayjs from 'dayjs'
 import PageHeading from '@/views/components/PageHeading.vue'
+import AppUserCell from '@/views/components/AppUserCell.vue'
 import { pageLikesApi } from '@/api/admin/engagement'
 
 const PAGE_SIZES = [10, 20, 50]
@@ -127,20 +128,9 @@ onMounted(load)
       class="drama-el-table"
       empty-text="暂无点赞"
     >
-      <el-table-column label="用户" min-width="180">
+      <el-table-column label="用户" min-width="200">
         <template #default="{ row }">
-          <div class="app-user-meta">
-            <template v-if="row.userId == null">
-              <el-tag type="info" size="small">游客</el-tag>
-              <span class="app-user-uid engagement-device-id" :title="row.deviceId || ''">{{
-                row.deviceId || '—'
-              }}</span>
-            </template>
-            <template v-else>
-              <span class="app-user-name">{{ row.nickname || '未设置昵称' }}</span>
-              <span class="app-user-uid">{{ row.uid || `用户 #${row.userId}` }}</span>
-            </template>
-          </div>
+          <AppUserCell :row="row" />
         </template>
       </el-table-column>
       <el-table-column label="目标类型" width="110">
@@ -172,13 +162,6 @@ onMounted(load)
 </template>
 
 <style scoped>
-.engagement-device-id {
-  max-width: 150px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .engagement-range {
   width: 360px;
   max-width: 100%;
diff --git a/src/views/userManagement/WatchHistoryView.vue b/src/views/userManagement/WatchHistoryView.vue
index eace7b7..8fd78b4 100644
--- a/src/views/userManagement/WatchHistoryView.vue
+++ b/src/views/userManagement/WatchHistoryView.vue
@@ -3,8 +3,9 @@
 <script setup>
 import { onMounted, reactive, ref } from 'vue'
 import PageHeading from '@/views/components/PageHeading.vue'
+import AppUserCell from '@/views/components/AppUserCell.vue'
 import { pageWatchHistoryApi } from '@/api/admin/appUser'
-import { formatDuration, systemText } from './composables/useAppUsers'
+import { formatDuration } from './composables/useAppUsers'
 
 const SOURCE_OPTIONS = [
   { value: '', label: '全部' },
@@ -168,17 +169,11 @@ onMounted(load)
       empty-text="暂无符合条件的观看记录"
     >
       <el-table-column prop="watchedAt" label="观看时间" min-width="170" show-overflow-tooltip />
-      <el-table-column label="用户" min-width="180">
+      <el-table-column label="用户" min-width="200">
         <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>
+          <AppUserCell :row="row" />
         </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">