From d52835886731b80fa7569bf351705528750eb72e Mon Sep 17 00:00:00 2001
From: congsh <congsh@jiulu-gameplay.com.cn>
Date: Sun, 19 Apr 2026 13:03:55 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=8E=A9=E5=AE=B6=E9=BB=91=E5=90=8D?=
 =?UTF-8?q?=E5=8D=95=20-=20=E8=AE=B0=E5=BD=95=E5=A4=96=E9=83=A8=E5=B9=B3?=
 =?UTF-8?q?=E5=8F=B0=E5=9D=91=E7=8E=A9=E5=AE=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 player_blacklist collection 迁移
- 添加 PlayerTag/PlayerBlacklistEntry 类型定义和 API
- 创建 PlayerBlacklistMain + CreatePlayerBlacklistDialog 组件
- BlacklistView 支持 Tab 切换游戏/玩家黑名单
- 支持搜索、标签筛选、严重程度筛选、实时订阅

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../1776530001_created_player_blacklist.js    | 124 ++++
 frontend/src/api/playerBlacklist.ts           |  59 ++
 .../CreatePlayerBlacklistDialog.vue           | 220 ++++++
 .../playerBlacklist/PlayerBlacklistMain.vue   | 694 ++++++++++++++++++
 frontend/src/types/index.ts                   |  33 +
 frontend/src/views/BlacklistView.vue          |  76 +-
 6 files changed, 1202 insertions(+), 4 deletions(-)
 create mode 100644 backend/pb_migrations/1776530001_created_player_blacklist.js
 create mode 100644 frontend/src/api/playerBlacklist.ts
 create mode 100644 frontend/src/components/playerBlacklist/CreatePlayerBlacklistDialog.vue
 create mode 100644 frontend/src/components/playerBlacklist/PlayerBlacklistMain.vue

diff --git a/backend/pb_migrations/1776530001_created_player_blacklist.js b/backend/pb_migrations/1776530001_created_player_blacklist.js
new file mode 100644
index 0000000..676677d
--- /dev/null
+++ b/backend/pb_migrations/1776530001_created_player_blacklist.js
@@ -0,0 +1,124 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((db) => {
+  const collection = new Collection({
+    "id": "pblacklist_col",
+    "created": "2026-04-19 10:00:01.000Z",
+    "updated": "2026-04-19 10:00:01.000Z",
+    "name": "player_blacklist",
+    "type": "base",
+    "system": false,
+    "schema": [
+      {
+        "system": false,
+        "id": "pb_group",
+        "name": "group",
+        "type": "relation",
+        "required": true,
+        "options": {
+          "collectionId": "es63bkyiblpnxdf",
+          "cascadeDelete": true,
+          "minSelect": null,
+          "maxSelect": 1,
+          "displayFields": null
+        }
+      },
+      {
+        "system": false,
+        "id": "pb_reporter",
+        "name": "reporter",
+        "type": "relation",
+        "required": true,
+        "options": {
+          "collectionId": "_pb_users_auth_",
+          "cascadeDelete": true,
+          "minSelect": null,
+          "maxSelect": 1,
+          "displayFields": null
+        }
+      },
+      {
+        "system": false,
+        "id": "pb_playerid",
+        "name": "playerId",
+        "type": "text",
+        "required": true,
+        "options": {
+          "min": 1,
+          "max": 200,
+          "pattern": ""
+        }
+      },
+      {
+        "system": false,
+        "id": "pb_platform",
+        "name": "platform",
+        "type": "text",
+        "required": true,
+        "options": {
+          "min": 1,
+          "max": 100,
+          "pattern": ""
+        }
+      },
+      {
+        "system": false,
+        "id": "pb_tags",
+        "name": "tags",
+        "type": "select",
+        "required": true,
+        "options": {
+          "maxSelect": 5,
+          "values": ["afk", "feeder", "toxic", "cheater", "quitter", "noob", "fragile", "other"]
+        }
+      },
+      {
+        "system": false,
+        "id": "pb_customtag",
+        "name": "customTag",
+        "type": "text",
+        "required": false,
+        "options": {
+          "min": null,
+          "max": 50,
+          "pattern": ""
+        }
+      },
+      {
+        "system": false,
+        "id": "pb_desc",
+        "name": "description",
+        "type": "text",
+        "required": true,
+        "options": {
+          "min": 1,
+          "max": 500,
+          "pattern": ""
+        }
+      },
+      {
+        "system": false,
+        "id": "pb_severity",
+        "name": "severity",
+        "type": "select",
+        "required": true,
+        "options": {
+          "maxSelect": 1,
+          "values": ["mild", "medium", "severe"]
+        }
+      }
+    ],
+    "indexes": [],
+    "listRule": "@request.auth.id != \"\" && group.members ~ @request.auth.id",
+    "viewRule": "@request.auth.id != \"\" && group.members ~ @request.auth.id",
+    "createRule": "@request.auth.id != \"\" && group.members ~ @request.auth.id",
+    "updateRule": null,
+    "deleteRule": "reporter = @request.auth.id || group.owner = @request.auth.id",
+    "options": {}
+  });
+
+  return Dao(db).saveCollection(collection);
+}, (db) => {
+  const dao = new Dao(db);
+  const collection = dao.findCollectionByNameOrId("pblacklist_col");
+  return dao.deleteCollection(collection);
+})
diff --git a/frontend/src/api/playerBlacklist.ts b/frontend/src/api/playerBlacklist.ts
new file mode 100644
index 0000000..e14c83f
--- /dev/null
+++ b/frontend/src/api/playerBlacklist.ts
@@ -0,0 +1,59 @@
+import { pb } from './pocketbase'
+import type { PlayerBlacklistEntry } from '@/types'
+
+export async function createPlayerBlacklistEntry(data: {
+  group: string
+  playerId: string
+  platform: string
+  tags: string[]
+  customTag?: string
+  description: string
+  severity: string
+}): Promise<PlayerBlacklistEntry> {
+  const user = pb.authStore.model
+  if (!user) throw new Error('未登录')
+
+  const payload: Record<string, any> = {
+    group: data.group,
+    reporter: user.id,
+    playerId: data.playerId,
+    platform: data.platform,
+    tags: data.tags,
+    description: data.description,
+    severity: data.severity,
+  }
+  if (data.customTag) payload.customTag = data.customTag
+
+  const record = await pb.collection('player_blacklist').create(payload)
+  return record as unknown as PlayerBlacklistEntry
+}
+
+export async function listPlayerBlacklist(
+  groupId: string,
+  options?: { tag?: string; severity?: string }
+): Promise<PlayerBlacklistEntry[]> {
+  let filter = `group="${groupId}"`
+  if (options?.tag) filter += ` && tags~"${options.tag}"`
+  if (options?.severity) filter += ` && severity="${options.severity}"`
+
+  const result = await pb.collection('player_blacklist').getFullList({
+    filter,
+    sort: '-created',
+    expand: 'reporter',
+    $autoCancel: false,
+  })
+  return result as unknown as PlayerBlacklistEntry[]
+}
+
+export async function deletePlayerBlacklistEntry(entryId: string): Promise<void> {
+  await pb.collection('player_blacklist').delete(entryId)
+}
+
+export async function subscribePlayerBlacklist(
+  groupId: string,
+  callback: (data: any) => void
+): Promise<() => void> {
+  return pb.collection('player_blacklist').subscribe('*', (data) => {
+    if (data.record?.group === groupId) callback(data)
+  })
+}
diff --git a/frontend/src/components/playerBlacklist/CreatePlayerBlacklistDialog.vue b/frontend/src/components/playerBlacklist/CreatePlayerBlacklistDialog.vue
new file mode 100644
index 0000000..f4e7df3
--- /dev/null
+++ b/frontend/src/components/playerBlacklist/CreatePlayerBlacklistDialog.vue
@@ -0,0 +1,220 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { createPlayerBlacklistEntry } from '@/api/playerBlacklist'
+import { useGroupStore } from '@/stores/group'
+import { PlayerTagMap, BlacklistSeverityMap } from '@/types'
+import type { PlayerTag, BlacklistSeverity } from '@/types'
+
+const visible = defineModel<boolean>({ default: false })
+
+const emit = defineEmits<{
+  created: []
+}>()
+
+const groupStore = useGroupStore()
+
+const form = ref({
+  playerId: '',
+  platform: '',
+  tags: [] as PlayerTag[],
+  customTag: '',
+  severity: '' as BlacklistSeverity | '',
+  description: '',
+})
+
+const loading = ref(false)
+
+function resetForm() {
+  form.value = {
+    playerId: '',
+    platform: '',
+    tags: [],
+    customTag: '',
+    severity: '',
+    description: '',
+  }
+}
+
+async function handleSubmit() {
+  if (!form.value.playerId.trim()) {
+    ElMessage.warning('请输入玩家ID')
+    return
+  }
+  if (!form.value.platform.trim()) {
+    ElMessage.warning('请输入游戏/平台')
+    return
+  }
+  if (form.value.tags.length === 0) {
+    ElMessage.warning('请至少选择一个标签')
+    return
+  }
+  if (!form.value.severity) {
+    ElMessage.warning('请选择严重程度')
+    return
+  }
+  if (!form.value.description.trim()) {
+    ElMessage.warning('请填写描述')
+    return
+  }
+
+  const groupId = groupStore.currentGroupId
+  if (!groupId) {
+    ElMessage.error('请先选择群组')
+    return
+  }
+
+  loading.value = true
+  try {
+    await createPlayerBlacklistEntry({
+      group: groupId,
+      playerId: form.value.playerId.trim(),
+      platform: form.value.platform.trim(),
+      tags: form.value.tags,
+      customTag: form.value.customTag.trim() || undefined,
+      description: form.value.description.trim(),
+      severity: form.value.severity,
+    })
+
+    visible.value = false
+    resetForm()
+    ElMessage.success('标记成功')
+    emit('created')
+  } catch (error: any) {
+    ElMessage.error(error.message || '标记失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+function handleOpen() {
+  resetForm()
+}
+</script>
+
+<template>
+  <el-dialog
+    v-model="visible"
+    title="标记坑玩家"
+    width="460px"
+    @open="handleOpen"
+  >
+    <div class="create-form">
+      <div class="form-field">
+        <label>玩家ID <span class="required">*</span></label>
+        <el-input
+          v-model="form.playerId"
+          placeholder="输入玩家的游戏内ID或昵称"
+          maxlength="200"
+          show-word-limit
+        />
+      </div>
+
+      <div class="form-field">
+        <label>游戏/平台 <span class="required">*</span></label>
+        <el-input
+          v-model="form.platform"
+          placeholder="如：英雄联盟、Steam、绝地求生"
+          maxlength="100"
+        />
+      </div>
+
+      <div class="form-field">
+        <label>标签 <span class="required">*</span></label>
+        <el-checkbox-group v-model="form.tags">
+          <el-checkbox
+            v-for="(label, key) in PlayerTagMap"
+            :key="key"
+            :value="key"
+            :label="label"
+          />
+        </el-checkbox-group>
+      </div>
+
+      <div class="form-field">
+        <label>自定义标签</label>
+        <el-input
+          v-model="form.customTag"
+          placeholder="补充标签（选填）"
+          maxlength="50"
+        />
+      </div>
+
+      <div class="form-field">
+        <label>严重程度 <span class="required">*</span></label>
+        <el-select v-model="form.severity" placeholder="选择严重程度" style="width: 100%">
+          <el-option
+            v-for="(label, key) in BlacklistSeverityMap"
+            :key="key"
+            :label="label"
+            :value="key"
+          />
+        </el-select>
+      </div>
+
+      <div class="form-field">
+        <label>描述 <span class="required">*</span></label>
+        <el-input
+          v-model="form.description"
+          type="textarea"
+          placeholder="描述一下遇到的情况"
+          :rows="3"
+          maxlength="500"
+          show-word-limit
+        />
+      </div>
+    </div>
+
+    <template #footer>
+      <el-button @click="visible = false">取消</el-button>
+      <button class="submit-btn" :disabled="loading" @click="handleSubmit">
+        {{ loading ? '提交中...' : '提交' }}
+      </button>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+.create-form {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.form-field label {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--gg-text);
+}
+
+.required {
+  color: var(--gg-danger);
+}
+
+.submit-btn {
+  padding: 8px 20px;
+  border: none;
+  border-radius: var(--gg-radius-sm);
+  background: var(--gg-primary);
+  color: #fff;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.submit-btn:hover {
+  opacity: 0.85;
+}
+
+.submit-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+</style>
diff --git a/frontend/src/components/playerBlacklist/PlayerBlacklistMain.vue b/frontend/src/components/playerBlacklist/PlayerBlacklistMain.vue
new file mode 100644
index 0000000..fdb7c46
--- /dev/null
+++ b/frontend/src/components/playerBlacklist/PlayerBlacklistMain.vue
@@ -0,0 +1,694 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
+import { useGroupStore } from '@/stores/group'
+import { listPlayerBlacklist, subscribePlayerBlacklist } from '@/api/playerBlacklist'
+import { deletePlayerBlacklistEntry } from '@/api/playerBlacklist'
+import { ElMessage, ElPopconfirm } from 'element-plus'
+import { pb } from '@/api/pocketbase'
+import { displayName } from '@/types'
+import { PlayerTagMap, BlacklistSeverityMap } from '@/types'
+import type { PlayerBlacklistEntry, PlayerTag, BlacklistSeverity } from '@/types'
+import CreatePlayerBlacklistDialog from './CreatePlayerBlacklistDialog.vue'
+
+const groupStore = useGroupStore()
+
+const allEntries = ref<PlayerBlacklistEntry[]>([])
+const loading = ref(false)
+const showCreate = ref(false)
+
+// 筛选
+const filterTag = ref<PlayerTag | ''>('')
+const filterSeverity = ref<BlacklistSeverity | ''>('')
+
+// 搜索
+const searchPlayerId = ref('')
+
+let unsubscribeFn: (() => void) | null = null
+
+// 按玩家ID聚合
+const groupedByPlayer = computed(() => {
+  let filtered = allEntries.value
+  if (searchPlayerId.value.trim()) {
+    const q = searchPlayerId.value.trim().toLowerCase()
+    filtered = filtered.filter(e => e.playerId.toLowerCase().includes(q))
+  }
+
+  const map = new Map<string, PlayerBlacklistEntry[]>()
+  for (const entry of filtered) {
+    const key = `${entry.playerId}|${entry.platform}`
+    if (!map.has(key)) map.set(key, [])
+    map.get(key)!.push(entry)
+  }
+  for (const entries of map.values()) {
+    entries.sort((a, b) => new Date(b.created).getTime() - new Date(a.created).getTime())
+  }
+  return map
+})
+
+// 玩家列表（按被标记次数降序）
+const playerGroups = computed(() => {
+  const groups: { playerId: string; platform: string; entries: PlayerBlacklistEntry[] }[] = []
+  for (const [key, entries] of groupedByPlayer.value) {
+    const [playerId, platform] = key.split('|')
+    groups.push({ playerId, platform, entries })
+  }
+  groups.sort((a, b) => b.entries.length - a.entries.length)
+  return groups
+})
+
+// 展开的玩家
+const expandedPlayer = ref<string | null>(null)
+
+async function loadEntries() {
+  const groupId = groupStore.currentGroupId
+  if (!groupId) return
+  loading.value = true
+  try {
+    const options: { tag?: string; severity?: string } = {}
+    if (filterTag.value) options.tag = filterTag.value
+    if (filterSeverity.value) options.severity = filterSeverity.value
+    allEntries.value = await listPlayerBlacklist(groupId, options)
+  } catch (error) {
+    console.error('加载玩家黑名单失败:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+async function startSubscription() {
+  const groupId = groupStore.currentGroupId
+  if (!groupId) return
+  unsubscribeFn = await subscribePlayerBlacklist(groupId, () => loadEntries())
+}
+
+function stopSubscription() {
+  if (unsubscribeFn) {
+    unsubscribeFn()
+    unsubscribeFn = null
+  }
+}
+
+function togglePlayer(key: string) {
+  expandedPlayer.value = expandedPlayer.value === key ? null : key
+}
+
+function handleCreated() {
+  showCreate.value = false
+  loadEntries()
+}
+
+const currentUserId = computed(() => pb.authStore.model?.id)
+const isOwner = computed(() => groupStore.isGroupOwner)
+
+function canDelete(entry: PlayerBlacklistEntry): boolean {
+  return entry.reporter === currentUserId.value || isOwner.value
+}
+
+async function handleDelete(entryId: string) {
+  try {
+    await deletePlayerBlacklistEntry(entryId)
+    ElMessage.success('已删除')
+    loadEntries()
+  } catch (error: any) {
+    ElMessage.error(error.message || '删除失败')
+  }
+}
+
+function formatTime(dateStr: string): string {
+  const date = new Date(dateStr)
+  const now = new Date()
+  const diffMs = now.getTime() - date.getTime()
+  const diffMinutes = Math.floor(diffMs / (1000 * 60))
+  const diffHours = Math.floor(diffMinutes / 60)
+  const diffDays = Math.floor(diffHours / 24)
+  if (diffDays > 30) return `${date.getMonth() + 1}月${date.getDate()}日`
+  if (diffDays > 0) return `${diffDays}天前`
+  if (diffHours > 0) return `${diffHours}小时前`
+  if (diffMinutes > 0) return `${diffMinutes}分钟前`
+  return '刚刚'
+}
+
+function reporterName(entry: PlayerBlacklistEntry): string {
+  return entry.expand?.reporter ? displayName(entry.expand.reporter) : '未知用户'
+}
+
+function severityClass(severity: BlacklistSeverity): string {
+  return `severity--${severity}`
+}
+
+onMounted(() => {
+  if (groupStore.currentGroupId) {
+    loadEntries()
+    startSubscription()
+  }
+})
+
+watch(() => groupStore.currentGroupId, (newId, oldId) => {
+  if (newId && newId !== oldId) {
+    expandedPlayer.value = null
+    stopSubscription()
+    loadEntries()
+    startSubscription()
+  }
+})
+
+watch([filterTag, filterSeverity], () => loadEntries())
+
+onUnmounted(() => stopSubscription())
+</script>
+
+<template>
+  <div class="player-blacklist-main">
+    <div class="player-blacklist-main__header">
+      <h3 class="player-blacklist-main__title">玩家黑名单</h3>
+      <div class="player-blacklist-main__actions">
+        <div class="player-blacklist-main__filters">
+          <el-input
+            v-model="searchPlayerId"
+            placeholder="搜索玩家ID"
+            clearable
+            size="small"
+            class="player-blacklist-main__search"
+          />
+          <el-select
+            v-model="filterTag"
+            placeholder="标签筛选"
+            clearable
+            size="small"
+            class="player-blacklist-main__filter-select"
+          >
+            <el-option
+              v-for="(label, key) in PlayerTagMap"
+              :key="key"
+              :label="label"
+              :value="key"
+            />
+          </el-select>
+          <el-select
+            v-model="filterSeverity"
+            placeholder="严重程度"
+            clearable
+            size="small"
+            class="player-blacklist-main__filter-select"
+          >
+            <el-option
+              v-for="(label, key) in BlacklistSeverityMap"
+              :key="key"
+              :label="label"
+              :value="key"
+            />
+          </el-select>
+        </div>
+        <button class="player-blacklist-main__create-btn" @click="showCreate = true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="player-blacklist-main__create-icon">
+            <line x1="12" y1="5" x2="12" y2="19" />
+            <line x1="5" y1="12" x2="19" y2="12" />
+          </svg>
+          标记玩家
+        </button>
+      </div>
+    </div>
+
+    <CreatePlayerBlacklistDialog v-model="showCreate" @created="handleCreated" />
+
+    <!-- 玩家卡片列表 -->
+    <div v-if="playerGroups.length > 0" class="player-blacklist-main__content">
+      <div v-for="group in playerGroups" :key="group.playerId + group.platform" class="player-blacklist-main__player-group">
+        <!-- 玩家卡片 -->
+        <div class="player-card" @click="togglePlayer(group.playerId + group.platform)">
+          <div class="player-card__info">
+            <div class="player-card__name-row">
+              <span class="player-card__name">{{ group.playerId }}</span>
+              <span class="player-card__platform">{{ group.platform }}</span>
+              <span class="player-card__badge">{{ group.entries.length }} 次标记</span>
+            </div>
+            <div class="player-card__tags">
+              <span
+                v-for="tag in [...new Set(group.entries.flatMap(e => e.tags))].slice(0, 4)"
+                :key="tag"
+                class="player-card__tag"
+              >
+                {{ PlayerTagMap[tag] }}
+              </span>
+              <span
+                v-for="entry in [...new Set(group.entries.map(e => e.customTag).filter(Boolean))].slice(0, 2)"
+                :key="entry"
+                class="player-card__tag player-card__tag--custom"
+              >
+                {{ entry }}
+              </span>
+            </div>
+            <div v-if="group.entries[0]?.description" class="player-card__desc">
+              {{ group.entries[0].description }}
+            </div>
+          </div>
+          <div class="player-card__arrow">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="player-card__arrow-icon">
+              <polyline points="6 9 12 15 18 9" />
+            </svg>
+          </div>
+        </div>
+
+        <!-- 展开的详细记录 -->
+        <div v-if="expandedPlayer === group.playerId + group.platform" class="player-blacklist-main__expanded">
+          <div
+            v-for="(entry, index) in group.entries"
+            :key="entry.id"
+            :class="['entry', { 'entry--bordered': index > 0 }]"
+          >
+            <div class="entry__header">
+              <div class="entry__reporter">
+                <div class="entry__avatar">{{ reporterName(entry).charAt(0) }}</div>
+                <span class="entry__name">{{ reporterName(entry) }}</span>
+              </div>
+              <div class="entry__header-right">
+                <span class="entry__time">{{ formatTime(entry.created) }}</span>
+                <el-popconfirm
+                  v-if="canDelete(entry)"
+                  title="确定删除？"
+                  confirm-button-text="删除"
+                  cancel-button-text="取消"
+                  @confirm="handleDelete(entry.id)"
+                >
+                  <template #reference>
+                    <button class="entry__delete-btn" title="删除" @click.stop>
+                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="entry__delete-icon">
+                        <polyline points="3 6 5 6 21 6" />
+                        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+                      </svg>
+                    </button>
+                  </template>
+                </el-popconfirm>
+              </div>
+            </div>
+            <div class="entry__tags">
+              <span v-for="tag in entry.tags" :key="tag" class="entry__tag">{{ PlayerTagMap[tag] }}</span>
+              <span v-if="entry.customTag" class="entry__tag entry__tag--custom">{{ entry.customTag }}</span>
+              <span class="entry__severity" :class="severityClass(entry.severity)">{{ BlacklistSeverityMap[entry.severity] }}</span>
+            </div>
+            <div class="entry__desc">{{ entry.description }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-else-if="loading" class="player-blacklist-main__loading">
+      <p class="player-blacklist-main__loading-text">加载中...</p>
+    </div>
+
+    <div v-else class="player-blacklist-main__empty">
+      <svg class="player-blacklist-main__empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+        <circle cx="12" cy="7" r="4" />
+      </svg>
+      <p class="player-blacklist-main__empty-text">暂无玩家黑名单记录</p>
+      <p class="player-blacklist-main__empty-hint">标记坑人的玩家，下次遇到有准备</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.player-blacklist-main {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.player-blacklist-main__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.player-blacklist-main__title {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--gg-text);
+  margin: 0;
+}
+
+.player-blacklist-main__actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.player-blacklist-main__filters {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.player-blacklist-main__search {
+  width: 140px;
+}
+
+.player-blacklist-main__filter-select {
+  width: 110px;
+}
+
+.player-blacklist-main__create-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 16px;
+  border: none;
+  border-radius: var(--gg-radius-sm);
+  background: var(--gg-primary);
+  color: #ffffff;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.player-blacklist-main__create-btn:hover {
+  opacity: 0.85;
+}
+
+.player-blacklist-main__create-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.player-blacklist-main__content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.player-blacklist-main__player-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.player-blacklist-main__expanded {
+  padding: 0 16px;
+  background: var(--gg-bg-elevated);
+  border: 1px solid var(--gg-border);
+  border-top: none;
+  border-radius: 0 0 var(--gg-radius-md) var(--gg-radius-md);
+}
+
+/* 玩家卡片 */
+.player-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  background: var(--gg-bg-card);
+  border: 1px solid var(--gg-border);
+  border-radius: var(--gg-radius-md);
+  padding: 16px 18px;
+  cursor: pointer;
+  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
+}
+
+.player-card:hover {
+  border-color: var(--gg-primary-light);
+  box-shadow: 0 0 20px rgba(5, 150, 105, 0.1);
+  transform: translateY(-1px);
+}
+
+.player-card__info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.player-card__name-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.player-card__name {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--gg-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.player-card__platform {
+  flex-shrink: 0;
+  padding: 1px 8px;
+  border-radius: 10px;
+  font-size: 11px;
+  font-weight: 600;
+  background: rgba(99, 102, 241, 0.1);
+  color: #6366f1;
+}
+
+.player-card__badge {
+  flex-shrink: 0;
+  padding: 1px 8px;
+  border-radius: 10px;
+  font-size: 11px;
+  font-weight: 600;
+  background: rgba(239, 68, 68, 0.1);
+  color: var(--gg-danger);
+}
+
+.player-card__tags {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.player-card__tag {
+  padding: 2px 8px;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 18px;
+  background: rgba(245, 158, 11, 0.1);
+  color: var(--gg-warning);
+}
+
+.player-card__tag--custom {
+  background: rgba(99, 102, 241, 0.1);
+  color: #6366f1;
+}
+
+.player-card__desc {
+  font-size: 13px;
+  color: var(--gg-text-secondary);
+  line-height: 1.5;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.player-card__arrow {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+.player-card__arrow-icon {
+  width: 18px;
+  height: 18px;
+  color: var(--gg-text-muted);
+  transition: transform 0.2s;
+}
+
+.player-card:hover .player-card__arrow-icon {
+  color: var(--gg-primary);
+}
+
+/* 记录条目 */
+.entry {
+  padding: 12px 0;
+}
+
+.entry--bordered {
+  border-top: 1px solid var(--gg-border);
+}
+
+.entry__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.entry__reporter {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.entry__avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: var(--gg-primary);
+  color: #ffffff;
+  font-size: 12px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.entry__name {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--gg-text);
+}
+
+.entry__header-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.entry__time {
+  font-size: 12px;
+  color: var(--gg-text-muted);
+}
+
+.entry__delete-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: var(--gg-radius-sm);
+  background: transparent;
+  color: var(--gg-text-muted);
+  cursor: pointer;
+  transition: color 0.2s, background 0.2s;
+}
+
+.entry__delete-btn:hover {
+  color: var(--gg-danger);
+  background: rgba(239, 68, 68, 0.08);
+}
+
+.entry__delete-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.entry__tags {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 8px;
+  flex-wrap: wrap;
+}
+
+.entry__tag {
+  padding: 2px 8px;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 18px;
+  background: rgba(245, 158, 11, 0.1);
+  color: var(--gg-warning);
+}
+
+.entry__tag--custom {
+  background: rgba(99, 102, 241, 0.1);
+  color: #6366f1;
+}
+
+.entry__severity {
+  padding: 2px 8px;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 18px;
+}
+
+.severity--mild {
+  background: rgba(16, 185, 129, 0.1);
+  color: var(--gg-success);
+}
+
+.severity--medium {
+  background: rgba(245, 158, 11, 0.1);
+  color: var(--gg-warning);
+}
+
+.severity--severe {
+  background: rgba(239, 68, 68, 0.1);
+  color: var(--gg-danger);
+}
+
+.entry__desc {
+  font-size: 13px;
+  color: var(--gg-text-secondary);
+  line-height: 1.6;
+}
+
+/* 加载/空状态 */
+.player-blacklist-main__loading {
+  display: flex;
+  justify-content: center;
+  padding: 40px 20px;
+}
+
+.player-blacklist-main__loading-text {
+  font-size: 14px;
+  color: var(--gg-text-muted);
+}
+
+.player-blacklist-main__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 20px;
+  text-align: center;
+}
+
+.player-blacklist-main__empty-icon {
+  width: 48px;
+  height: 48px;
+  color: var(--gg-text-muted);
+  margin-bottom: 12px;
+  opacity: 0.5;
+}
+
+.player-blacklist-main__empty-text {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--gg-text-secondary);
+  margin: 0 0 4px;
+}
+
+.player-blacklist-main__empty-hint {
+  font-size: 13px;
+  color: var(--gg-text-muted);
+  margin: 0;
+}
+
+@media (max-width: 640px) {
+  .player-blacklist-main__header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .player-blacklist-main__search {
+    width: 100px;
+  }
+
+  .player-blacklist-main__filter-select {
+    width: 90px;
+  }
+}
+</style>
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index 2c20b8c..75a03b3 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -345,6 +345,20 @@ export const BlacklistReasonMap: Record<BlacklistReason, string> = {
   other: '其他'
 }
 
+// 玩家黑名单标签
+export type PlayerTag = 'afk' | 'feeder' | 'toxic' | 'cheater' | 'quitter' | 'noob' | 'fragile' | 'other'
+
+export const PlayerTagMap: Record<PlayerTag, string> = {
+  afk: '挂机',
+  feeder: '送人头',
+  toxic: '喷人',
+  cheater: '外挂',
+  quitter: '始乱终弃',
+  noob: '坑货',
+  fragile: '玻璃心',
+  other: '其他'
+}
+
 // 黑名单严重程度
 export type BlacklistSeverity = 'mild' | 'medium' | 'severe'
 
@@ -373,6 +387,25 @@ export interface BlacklistEntry {
   }
 }
 
+// 玩家黑名单
+export interface PlayerBlacklistEntry {
+  id: string
+  group: string
+  reporter: string
+  playerId: string
+  platform: string
+  tags: PlayerTag[]
+  customTag?: string
+  description: string
+  severity: BlacklistSeverity
+  created: string
+  updated: string
+  expand?: {
+    reporter?: User
+    group?: Group
+  }
+}
+
 // 竞猜状态
 export type BetStatus = 'open' | 'closed' | 'settled'
 
diff --git a/frontend/src/views/BlacklistView.vue b/frontend/src/views/BlacklistView.vue
index 3133043..0459557 100644
--- a/frontend/src/views/BlacklistView.vue
+++ b/frontend/src/views/BlacklistView.vue
@@ -1,9 +1,10 @@
 <!-- src/views/BlacklistView.vue -->
 <script setup lang="ts">
-import { onMounted, computed } from 'vue'
+import { onMounted, computed, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { useGroupStore } from '@/stores/group'
 import BlacklistMain from '@/components/gameBlacklist/BlacklistMain.vue'
+import PlayerBlacklistMain from '@/components/playerBlacklist/PlayerBlacklistMain.vue'
 import { ArrowLeft } from '@element-plus/icons-vue'
 
 const route = useRoute()
@@ -12,6 +13,8 @@ const groupId = route.params.groupId as string
 
 const group = computed(() => groupStore.currentGroup)
 
+const activeTab = ref<'game' | 'player'>('game')
+
 onMounted(async () => {
   await groupStore.setCurrentGroup(groupId)
 })
@@ -25,13 +28,39 @@ onMounted(async () => {
         <el-icon><ArrowLeft /></el-icon> 返回群组
       </router-link>
       <div class="header-content">
-        <h1 class="page-title">游戏黑名单</h1>
+        <h1 class="page-title">黑名单</h1>
         <span class="group-badge">{{ group?.name }}</span>
       </div>
     </section>
 
-    <!-- 黑名单内容 -->
-    <BlacklistMain />
+    <!-- Tab 切换 -->
+    <div class="blacklist-tabs">
+      <button
+        :class="['blacklist-tab', { 'blacklist-tab--active': activeTab === 'game' }]"
+        @click="activeTab = 'game'"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="blacklist-tab__icon">
+          <rect x="2" y="6" width="20" height="12" rx="2" />
+          <path d="M6 12h4" />
+          <path d="M6 9h4" />
+        </svg>
+        游戏黑名单
+      </button>
+      <button
+        :class="['blacklist-tab', { 'blacklist-tab--active': activeTab === 'player' }]"
+        @click="activeTab = 'player'"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="blacklist-tab__icon">
+          <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+          <circle cx="12" cy="7" r="4" />
+        </svg>
+        玩家黑名单
+      </button>
+    </div>
+
+    <!-- 内容 -->
+    <BlacklistMain v-if="activeTab === 'game'" />
+    <PlayerBlacklistMain v-else />
   </div>
 </template>
 
@@ -99,4 +128,43 @@ onMounted(async () => {
   color: var(--gg-primary-light);
   font-weight: 500;
 }
+
+/* Tab */
+.blacklist-tabs {
+  display: flex;
+  gap: 8px;
+}
+
+.blacklist-tab {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 20px;
+  border: 1px solid var(--gg-border);
+  border-radius: var(--gg-radius-md);
+  background: var(--gg-bg-card);
+  color: var(--gg-text-secondary);
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.blacklist-tab:hover {
+  border-color: var(--gg-primary-light);
+  color: var(--gg-primary);
+}
+
+.blacklist-tab--active {
+  border-color: var(--gg-primary);
+  background: rgba(5, 150, 105, 0.08);
+  color: var(--gg-primary);
+  font-weight: 600;
+}
+
+.blacklist-tab__icon {
+  width: 16px;
+  height: 16px;
+}
 </style>