gamegroup2/frontend/src/components-mobile/game/GameDetailSheetMobile.vue

<!-- src/components-mobile/game/GameDetailSheetMobile.vue -->
<!-- 游戏详情底部面板：封面/名称/别名/标签/收藏/编辑/删除/快速组队 + 评论评分 -->
<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import type { Game, GamePlatform, GameComment } from '@/types'
import {
  toggleFavorite, isFavorite, deleteGame, updateGame, getGameCoverUrl, getAllPlatforms,
  getGameComments, addComment
} from '@/api/games'
import { useGroupStore } from '@/stores/group'
import { createTeamSession } from '@/api/sessions'
import { useTeamStore } from '@/stores/team'
import { pb } from '@/api/pocketbase'
import { showSuccessToast, showFailToast, showConfirmDialog } from 'vant'

const props = defineProps<{
  show: boolean
  game: Game | null
  groupId?: string
}>()

const emit = defineEmits<{
  'update:show': [value: boolean]
  'deleted': []
}>()

const router = useRouter()
const groupStore = useGroupStore()
const teamStore = useTeamStore()
const platforms = getAllPlatforms()

const visible = computed({
  get: () => props.show,
  set: (val) => emit('update:show', val)
})

const favorited = ref(false)
const editing = ref(false)
const editName = ref('')
const editAliases = ref('')
const editPlatform = ref<GamePlatform | ''>('')
const editTags = ref('')
const saving = ref(false)

// 评论
const comments = ref<GameComment[]>([])
const newContent = ref('')
const newRating = ref(0)
const commentLoading = ref(false)
const commentSubmitting = ref(false)

const canModify = computed(() => {
  if (!props.game) return false
  const userId = pb.authStore.model?.id
  if (!userId) return false
  if (groupStore.isGroupOwner) return true
  if (groupStore.isGroupAdmin) return true
  if (props.game.addedBy === userId) return true
  return false
})

// 打开时初始化
watch(() => props.show, async (val) => {
  if (val && props.game) {
    editing.value = false
    try {
      favorited.value = await isFavorite(props.game.id)
    } catch { /* ignore */ }
    await loadComments()
  }
})

async function loadComments() {
  if (!props.game) return
  try {
    commentLoading.value = true
    comments.value = await getGameComments(props.game.id)
  } catch { /* ignore */ } finally {
    commentLoading.value = false
  }
}

function startEdit() {
  if (!props.game) return
  editName.value = props.game.name
  editAliases.value = (props.game.aliases || []).join(', ')
  editPlatform.value = props.game.platform || ''
  editTags.value = (props.game.tags || []).join(', ')
  editing.value = true
}

async function handleSave() {
  if (!props.game || !editName.value.trim()) {
    showFailToast('请输入游戏名称')
    return
  }
  try {
    saving.value = true
    const aliases = editAliases.value.split(',').map(t => t.trim()).filter(Boolean)
    const tags = editTags.value.split(',').map(t => t.trim()).filter(Boolean)
    await updateGame(props.game.id, {
      name: editName.value.trim(),
      aliases: aliases.length > 0 ? aliases : undefined,
      platform: editPlatform.value || undefined,
      tags: tags.length > 0 ? tags : undefined
    })
    showSuccessToast('修改成功')
    editing.value = false
    emit('deleted') // 触发父组件重新加载
  } catch (e: any) {
    showFailToast(e.message || '修改失败')
  } finally {
    saving.value = false
  }
}

async function handleFavorite() {
  if (!props.game) return
  try {
    favorited.value = await toggleFavorite(props.game.id)
  } catch (e: any) {
    showFailToast(e.message || '操作失败')
  }
}

async function handleDelete() {
  if (!props.game) return
  const game = props.game
  showConfirmDialog({
    title: '删除游戏',
    message: `确定要删除「${game.name}」吗？`
  }).then(async () => {
    try {
      await deleteGame(game.id)
      showSuccessToast('删除成功')
      visible.value = false
      emit('deleted')
    } catch (e: any) {
      showFailToast(e.message || '删除失败')
    }
  }).catch(() => {})
}

async function handleCreateTeam() {
  if (!props.game || !props.groupId) return
  try {
    const me = pb.authStore.model?.id
    if (!me) return
    const session = await createTeamSession({
      sourceGroup: props.groupId,
      name: `${props.game.name}小队`,
      gameName: props.game.name,
      members: [me]
    })
    await teamStore.loadActiveSession()
    showSuccessToast('已发起组队')
    visible.value = false
    router.push({
      name: 'VoiceRoom',
      params: { groupId: props.groupId, sessionId: session.id }
    })
  } catch (e: any) {
    showFailToast(e.message || '组队失败')
  }
}

async function handleSubmitComment() {
  if (!props.game) return
  if (!newContent.value.trim()) {
    showFailToast('请输入评论内容')
    return
  }
  try {
    commentSubmitting.value = true
    await addComment(props.game.id, newContent.value.trim(), newRating.value || undefined)
    newContent.value = ''
    newRating.value = 0
    await loadComments()
    showSuccessToast('评论成功')
  } catch (e: any) {
    showFailToast(e.message || '评论失败')
  } finally {
    commentSubmitting.value = false
  }
}

function formatDate(dateStr: string): string {
  return new Date(dateStr).toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' })
}
</script>

<template>
  <van-popup
    v-model:show="visible"
    position="bottom"
    round
    closeable
    :style="{ height: '85%' }"
  >
    <div v-if="game" class="detail-sheet">
      <!-- 编辑模式 -->
      <template v-if="editing">
        <div class="sheet-title">编辑游戏</div>
        <van-cell-group inset>
          <van-field v-model="editName" label="名称" placeholder="游戏名称" required />
          <van-field v-model="editAliases" label="别名" placeholder="逗号分隔" />
          <van-field name="platform" label="平台">
            <template #input>
              <select v-model="editPlatform" class="native-select">
                <option value="">不指定</option>
                <option v-for="p in platforms" :key="p" :value="p">{{ p }}</option>
              </select>
            </template>
          </van-field>
          <van-field v-model="editTags" label="标签" placeholder="逗号分隔" />
        </van-cell-group>
        <div class="edit-actions">
          <van-button block round @click="editing = false">取消</van-button>
          <van-button type="primary" block round :loading="saving" @click="handleSave">保存</van-button>
        </div>
      </template>

      <!-- 详情模式 -->
      <template v-else>
        <div class="detail-cover-wrap">
          <img
            :src="getGameCoverUrl(game) || '/game-placeholder.svg'"
            :alt="game.name"
            class="detail-cover"
          />
        </div>

        <h2 class="detail-name">{{ game.name }}</h2>

        <div v-if="game.aliases?.length" class="detail-aliases">
          <span v-for="alias in game.aliases" :key="alias" class="alias-tag">{{ alias }}</span>
        </div>

        <div class="detail-meta">
          <van-tag v-if="game.platform" type="primary" size="medium">{{ game.platform }}</van-tag>
          <span class="popularity">🔥 {{ game.popularCount }} 人游玩</span>
        </div>

        <div v-if="game.tags?.length" class="detail-tags">
          <van-tag v-for="tag in game.tags" :key="tag" plain size="medium">{{ tag }}</van-tag>
        </div>

        <!-- 操作按钮 -->
        <div class="detail-actions">
          <van-button
            :type="favorited ? 'warning' : 'default'"
            size="small"
            round
            :icon="favorited ? 'star' : 'star-o'"
            @click="handleFavorite"
          >{{ favorited ? '已收藏' : '收藏' }}</van-button>
          <van-button v-if="canModify" size="small" round icon="edit" @click="startEdit">编辑</van-button>
          <van-button v-if="canModify" size="small" round plain type="danger" icon="delete-o" @click="handleDelete">删除</van-button>
        </div>

        <van-button type="primary" block round class="team-btn" @click="handleCreateTeam">
          快速组队
        </van-button>

        <!-- 评论区 -->
        <div class="comments-section">
          <div class="comments-title">评论 ({{ comments.length }})</div>

          <!-- 评论输入 -->
          <div class="comment-form">
            <div class="rating-row">
              <span class="rating-label">评分</span>
              <div class="stars">
                <van-icon
                  v-for="star in 5"
                  :key="star"
                  name="star"
                  :class="{ active: star <= newRating }"
                  size="18"
                  @click="newRating = star"
                />
              </div>
            </div>
            <van-field
              v-model="newContent"
              type="textarea"
              placeholder="写下你的评价..."
              rows="2"
              autosize
              class="comment-input"
            />
            <van-button
              type="primary"
              size="small"
              round
              :loading="commentSubmitting"
              @click="handleSubmitComment"
            >发表</van-button>
          </div>

          <!-- 评论列表 -->
          <div v-if="commentLoading" class="comment-loading">
            <van-loading size="20px">加载中...</van-loading>
          </div>
          <div v-else-if="comments.length === 0" class="comment-empty">
            暂无评论，快来抢沙发
          </div>
          <div v-else class="comment-list">
            <div v-for="c in comments" :key="c.id" class="comment-item">
              <img
                :src="c.expand?.author?.avatar || '/default-avatar.svg'"
                class="comment-avatar"
                alt=""
              />
              <div class="comment-body">
                <div class="comment-head">
                  <span class="comment-author">{{ c.expand?.author?.name || c.expand?.author?.username || '匿名' }}</span>
                  <span v-if="c.rating" class="comment-rating">
                    <van-icon v-for="s in c.rating" :key="s" name="star" class="star-filled" size="12" />
                  </span>
                </div>
                <div class="comment-content">{{ c.content }}</div>
                <div class="comment-time">{{ formatDate(c.created) }}</div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
  </van-popup>
</template>

<style scoped>
.detail-sheet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 16px 0 24px;
  height: 100%;
  overflow-y: auto;
}

.sheet-title {
  font-size: 16px;
  font-weight: 600;
  padding: 4px 0 8px;
}

.native-select {
  border: 1px solid var(--gg-border);
  border-radius: var(--gg-radius-sm);
  padding: 6px 10px;
  font-size: 14px;
  background: var(--gg-bg-card);
  width: 100%;
}

.edit-actions {
  display: flex;
  gap: 10px;
  width: 100%;
  padding: 0 16px;
}

.detail-cover-wrap {
  width: 160px;
  height: 210px;
  border-radius: var(--gg-radius-md);
  overflow: hidden;
  background: var(--gg-bg-elevated);
  border: 1px solid var(--gg-border);
}

.detail-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-name {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--gg-text);
  text-align: center;
  padding: 0 16px;
}

.detail-aliases {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  padding: 0 16px;
}

.alias-tag {
  padding: 3px 10px;
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
}

.detail-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.popularity {
  font-size: 13px;
  color: var(--gg-text-secondary);
}

.detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  padding: 0 16px;
}

.detail-actions {
  display: flex;
  gap: 10px;
}

.team-btn {
  width: calc(100% - 32px);
}

/* 评论区 */
.comments-section {
  width: 100%;
  padding: 8px 16px 0;
  border-top: 8px solid var(--gg-bg);
}

.comments-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--gg-text);
  margin-bottom: 12px;
}

.comment-form {
  background: var(--gg-bg);
  border-radius: var(--gg-radius-sm);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.rating-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rating-label {
  font-size: 13px;
  color: var(--gg-text-secondary);
}

.stars {
  display: flex;
  gap: 2px;
}

.stars .van-icon {
  color: var(--gg-text-muted);
}

.stars .van-icon.active {
  color: var(--gg-warning);
}

.comment-input {
  background: transparent;
  padding: 0;
}

.comment-form .van-button {
  align-self: flex-end;
}

.comment-loading, .comment-empty {
  text-align: center;
  padding: 20px;
  font-size: 13px;
  color: var(--gg-text-muted);
}

.comment-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.comment-item {
  display: flex;
  gap: 10px;
}

.comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.comment-body {
  flex: 1;
  min-width: 0;
}

.comment-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.comment-author {
  font-size: 13px;
  font-weight: 600;
  color: var(--gg-text);
}

.comment-rating .star-filled {
  color: var(--gg-warning);
}

.comment-content {
  font-size: 13px;
  color: var(--gg-text);
  line-height: 1.5;
  margin-top: 4px;
  word-break: break-word;
}

.comment-time {
  font-size: 11px;
  color: var(--gg-text-muted);
  margin-top: 4px;
}
</style>