From bedae029460065c56846e09d1fdea749bc8a4c86 Mon Sep 17 00:00:00 2001
From: Vicky <10212746+haifeng-jiang@user.noreply.gitee.com>
Date: Tue, 27 Oct 2026 15:45:23 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20phase1=20UI=20prep=20=E2=80=94=20?=
 =?UTF-8?q?=E5=90=8E=E5=8F=B0=20App=20=E7=94=A8=E6=88=B7=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E7=B3=BB=E7=BB=9F=E7=AD=9B=E9=80=89=20+=20?=
 =?UTF-8?q?=E5=9B=BD=E5=AE=B6=E4=B8=AD=E6=96=87=E5=90=8D=20+=20=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=E8=AF=AD=E4=B9=89=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增: 系统下拉 (ANDROID/IOS)、国家中文名映射、用户列昵称/UID 冒号标签
详情抽屉: 同步系统/国家/标签展示
---
 src/api/admin/appUser.ts                      |  2 +
 src/styles/business/app-user-management.css   |  3 +-
 src/views/userManagement/AppUsersView.vue     | 54 +++++++++----
 .../userManagement/composables/useAppUsers.js | 77 ++++++++++++++++---
 4 files changed, 111 insertions(+), 25 deletions(-)

diff --git a/src/api/admin/appUser.ts b/src/api/admin/appUser.ts
index 7879b04..82cbe9f 100644
--- a/src/api/admin/appUser.ts
+++ b/src/api/admin/appUser.ts
@@ -11,6 +11,8 @@ export interface AppUserPageParams {
   status?: string
   countryCode?: string
   registerSource?: string
+  /** 客户端平台：ANDROID / IOS / WEB */
+  platform?: string
 }
 
 export interface WatchHistoryPageParams {
diff --git a/src/styles/business/app-user-management.css b/src/styles/business/app-user-management.css
index 90a7fbf..6b18b3d 100644
--- a/src/styles/business/app-user-management.css
+++ b/src/styles/business/app-user-management.css
@@ -18,7 +18,8 @@
 }
 
 .app-user-toolbar .app-user-status,
-.app-user-toolbar .app-user-country {
+.app-user-toolbar .app-user-country,
+.app-user-toolbar .app-user-platform {
   width: 150px;
   flex: 0 0 150px;
 }
diff --git a/src/views/userManagement/AppUsersView.vue b/src/views/userManagement/AppUsersView.vue
index 07cb670..2f7fae7 100644
--- a/src/views/userManagement/AppUsersView.vue
+++ b/src/views/userManagement/AppUsersView.vue
@@ -9,10 +9,11 @@ import { useRbac } from '@/stores/rbac'
 import {
   APP_USER_STATUS,
   COUNTRY_OPTIONS,
+  countryText,
   formatDateTime,
   formatDuration,
+  platformText,
   statusMeta,
-  systemText,
   useAppUsers
 } from './composables/useAppUsers'
 
@@ -26,6 +27,7 @@ const {
   keyword,
   statusFilter,
   countryFilter,
+  platformFilter,
   currentPage,
   pageSize,
   detailVisible,
@@ -54,6 +56,11 @@ const SOURCE_TEXT = {
   FAVORITE: '收藏'
 }
 const BAN_TYPE_TEXT = { BAN: '封禁', LIMIT: '限制', MUTE: '禁言' }
+const PLATFORM_OPTIONS = [
+  { value: '', label: '全部系统' },
+  { value: 'ANDROID', label: 'Android' },
+  { value: 'IOS', label: 'iOS' }
+]
 const APPEAL_TEXT = {
   none: '未申诉',
   pending: '待处理',
@@ -117,6 +124,20 @@ function canBeBanned(row) {
           :value="item.value"
         />
       </el-select>
+      <el-select
+        v-model="platformFilter"
+        class="app-user-platform"
+        clearable
+        placeholder="全部系统"
+        @change="queryUsers"
+      >
+        <el-option
+          v-for="item in PLATFORM_OPTIONS"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
       <el-select
         v-model="countryFilter"
         class="app-user-country"
@@ -166,24 +187,24 @@ function canBeBanned(row) {
               <template v-else>{{ avatarText(row) }}</template>
             </span>
             <div class="app-user-meta">
-              <span class="app-user-name" :title="row.nickname">{{
-                row.nickname || '未设置昵称'
-              }}</span>
-              <span class="app-user-uid" :title="row.uid">{{ row.uid }}</span>
+              <span class="app-user-name" :title="row.nickname || ''">
+                昵称: {{ row.nickname || '未设置昵称' }}
+              </span>
+              <span class="app-user-uid">UID: {{ row.uid }}</span>
             </div>
           </div>
         </template>
       </el-table-column>
-      <el-table-column label="系统" width="130" show-overflow-tooltip>
-        <template #default="{ row }">{{ systemText(row) }}</template>
+      <el-table-column label="系统" width="110" show-overflow-tooltip>
+        <template #default="{ row }">{{ platformText(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>
         </template>
       </el-table-column>
-      <el-table-column label="国家" width="90">
-        <template #default="{ row }">{{ row.countryCode || '—' }}</template>
+      <el-table-column label="国家" width="110">
+        <template #default="{ row }">{{ countryText(row.countryCode) }}</template>
       </el-table-column>
       <el-table-column label="状态" width="90">
         <template #default="{ row }">
@@ -249,8 +270,8 @@ function canBeBanned(row) {
             <template v-else>{{ avatarText(detail) }}</template>
           </span>
           <div class="app-user-meta">
-            <span class="app-user-name">{{ detail.nickname || '未设置昵称' }}</span>
-            <span class="app-user-uid">{{ detail.uid }}</span>
+            <span class="app-user-name"> 昵称: {{ detail.nickname || '未设置昵称' }} </span>
+            <span class="app-user-uid">UID: {{ detail.uid }}</span>
           </div>
           <el-tag :type="statusMeta(detail.status).tag" effect="light" style="margin-left: auto">
             {{ statusMeta(detail.status).label }}
@@ -263,7 +284,10 @@ function canBeBanned(row) {
               {{ detail.maskedTarget || '—' }}
             </el-descriptions-item>
             <el-descriptions-item label="国家 / 地区">
-              {{ detail.countryCode || '—' }} / {{ detail.regionCode || '—' }}
+              {{ countryText(detail.countryCode) }}
+              <template v-if="detail.regionCode && detail.regionCode !== detail.countryCode">
+                / {{ countryText(detail.regionCode) }}
+              </template>
             </el-descriptions-item>
             <el-descriptions-item label="语言">{{ detail.language || '—' }}</el-descriptions-item>
             <el-descriptions-item label="时区">{{ detail.timezone || '—' }}</el-descriptions-item>
@@ -273,7 +297,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="系统">{{ platformText(detail) }}</el-descriptions-item>
             <el-descriptions-item label="会员">
               {{ detail.vipLevel ? `等级 ${detail.vipLevel}` : '未开通（第二阶段）' }}
             </el-descriptions-item>
@@ -305,8 +329,8 @@ 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 label="系统" width="100" show-overflow-tooltip>
+              <template #default="{ row }">{{ platformText(row) }}</template>
             </el-table-column>
             <el-table-column label="来源" width="80">
               <template #default="{ row }">{{
diff --git a/src/views/userManagement/composables/useAppUsers.js b/src/views/userManagement/composables/useAppUsers.js
index 2d15ef5..8bda1d3 100644
--- a/src/views/userManagement/composables/useAppUsers.js
+++ b/src/views/userManagement/composables/useAppUsers.js
@@ -29,6 +29,69 @@ export const COUNTRY_OPTIONS = [
   { value: 'CN', label: '中国' }
 ]
 
+/** 国家码 → 中文名，与后端 CountryProfile 保持一致；未收录的仍显示原码 */
+const COUNTRY_TEXT = {
+  ID: '印度尼西亚',
+  MY: '马来西亚',
+  SG: '新加坡',
+  TH: '泰国',
+  VN: '越南',
+  PH: '菲律宾',
+  KH: '柬埔寨',
+  MM: '缅甸',
+  LA: '老挝',
+  BN: '文莱',
+  CN: '中国',
+  TW: '中国台湾',
+  HK: '中国香港',
+  MO: '中国澳门',
+  JP: '日本',
+  KR: '韩国',
+  IN: '印度',
+  PK: '巴基斯坦',
+  BD: '孟加拉国',
+  LK: '斯里兰卡',
+  NP: '尼泊尔',
+  US: '美国',
+  CA: '加拿大',
+  MX: '墨西哥',
+  BR: '巴西',
+  AR: '阿根廷',
+  CL: '智利',
+  CO: '哥伦比亚',
+  PE: '秘鲁',
+  VE: '委内瑞拉',
+  EC: '厄瓜多尔',
+  GT: '危地马拉',
+  DO: '多米尼加',
+  GB: '英国',
+  DE: '德国',
+  FR: '法国',
+  ES: '西班牙',
+  IT: '意大利',
+  NL: '荷兰',
+  PL: '波兰',
+  RU: '俄罗斯',
+  UA: '乌克兰',
+  TR: '土耳其',
+  SA: '沙特阿拉伯',
+  AE: '阿联酋',
+  IL: '以色列',
+  EG: '埃及',
+  NG: '尼日利亚',
+  ZA: '南非',
+  KE: '肯尼亚',
+  MA: '摩洛哥',
+  AU: '澳大利亚',
+  NZ: '新西兰'
+}
+
+/** 国家列统一展示中文名，无值时显示横线 */
+export function countryText(code) {
+  const value = (code || '').toUpperCase()
+  return COUNTRY_TEXT[value] || value || '—'
+}
+
 export function statusMeta(status) {
   return (
     APP_USER_STATUS.find((item) => item.value === status) || { label: status || '-', tag: 'info' }
@@ -43,14 +106,6 @@ export function platformText(row) {
   return PLATFORM_TEXT[platform] || platform || '—'
 }
 
-/** 登录会话上的系统，例如 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 || '—'
-}
-
 /** 后端返回 ISO 时间串，统一格式化成后台可读的本地时间 */
 export function formatDateTime(value) {
   return value && dayjs(value).isValid() ? dayjs(value).format('YYYY-MM-DD HH:mm:ss') : '—'
@@ -72,6 +127,7 @@ export function useAppUsers() {
   const keyword = ref('')
   const statusFilter = ref(undefined)
   const countryFilter = ref(undefined)
+  const platformFilter = ref(undefined)
   const currentPage = ref(1)
   const pageSize = ref(10)
 
@@ -94,7 +150,8 @@ export function useAppUsers() {
         pageSize: pageSize.value,
         keyword: keyword.value.trim() || undefined,
         status: statusFilter.value,
-        countryCode: countryFilter.value
+        countryCode: countryFilter.value,
+        platform: platformFilter.value || undefined
       })
       users.value = res.data?.list || []
       total.value = res.data?.total || 0
@@ -112,6 +169,7 @@ export function useAppUsers() {
     keyword.value = ''
     statusFilter.value = undefined
     countryFilter.value = undefined
+    platformFilter.value = undefined
     queryUsers()
   }
 
@@ -198,6 +256,7 @@ export function useAppUsers() {
     keyword,
     statusFilter,
     countryFilter,
+    platformFilter,
     currentPage,
     pageSize,
     detailVisible,