add

2026-10-15 20:36:59 +08:00
commit 6bf949949c
7923 changed files with 1369582 additions and 0 deletions
@@ -0,0 +1,158 @@
+<template>
+  <div class="page-container">
+    <!-- 查询条件 -->
+    <div class="filter-bar">
+      <el-input
+        v-model="filters.keyword"
+        placeholder="用户 ID / 手机号 / 邮箱"
+        clearable
+        style="width: 220px"
+        @keyup.enter="search"
+      />
+      <el-select v-model="filters.status" placeholder="状态" clearable style="width: 140px">
+        <el-option label="正常" :value="1" />
+        <el-option label="封禁" :value="2" />
+        <el-option label="已注销" :value="3" />
+      </el-select>
+      <el-button type="primary" :icon="Search" @click="search">查询</el-button>
+      <el-button :icon="Refresh" @click="reset">重置</el-button>
+    </div>
+
+    <!-- 用户列表 -->
+    <el-table v-loading="loading" :data="rows" border stripe>
+      <el-table-column prop="user_id" label="ID" width="80" />
+      <el-table-column label="头像" width="80">
+        <template #default="{ row }">
+          <el-avatar :size="36" :src="row.avatar_url || undefined">
+            {{ (row.nickname || '?').charAt(0) }}
+          </el-avatar>
+        </template>
+      </el-table-column>
+      <el-table-column prop="nickname" label="昵称" min-width="140" show-overflow-tooltip />
+      <el-table-column prop="phone" label="手机号" width="130" />
+      <el-table-column prop="email" label="邮箱" min-width="160" show-overflow-tooltip />
+      <el-table-column prop="points" label="积分" width="90" />
+      <el-table-column label="会员" width="90">
+        <template #default="{ row }">
+          <el-tag :type="row.is_member ? 'warning' : 'info'" size="small">
+            {{ row.is_member ? '会员' : '非会员' }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="video_count" label="作品数" width="90" />
+      <el-table-column label="状态" width="100">
+        <template #default="{ row }">
+          <el-tag :type="STATUS_TAG[row.status] || 'info'" size="small">
+            {{ row.status_text || '-' }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="created_at" label="注册时间" width="170" />
+      <el-table-column label="操作" width="170" fixed="right">
+        <template #default="{ row }">
+          <el-button link type="primary" :icon="View" @click="toDetail(row)">详情</el-button>
+          <el-button
+            v-if="row.status === 1"
+            link
+            type="danger"
+            :icon="Lock"
+            @click="toggleStatus(row, 2)"
+          >
+            封禁
+          </el-button>
+          <el-button
+            v-else-if="row.status === 2"
+            link
+            type="success"
+            :icon="Unlock"
+            @click="toggleStatus(row, 1)"
+          >
+            解封
+          </el-button>
+          <el-button v-else link disabled>解封</el-button>
+        </template>
+      </el-table-column>
+      <template #empty><el-empty description="暂无数据" /></template>
+    </el-table>
+
+    <div class="pagination-wrap">
+      <el-pagination
+        v-model:current-page="page"
+        :page-size="pageSize"
+        :total="total"
+        layout="total, prev, pager, next"
+        @current-change="load"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { Lock, Refresh, Search, Unlock, View } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+import { onMounted, reactive, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+import { listUsers, setUserStatus } from '@/api/users'
+import { askReason } from '@/utils/reason'
+
+const STATUS_TAG = { 1: 'success', 2: 'danger', 3: 'info' }
+
+const router = useRouter()
+
+const loading = ref(false)
+const rows = ref([])
+const total = ref(0)
+const page = ref(1)
+const pageSize = ref(20)
+const filters = reactive({ keyword: '', status: '' })
+
+async function load() {
+  loading.value = true
+  try {
+    const data = await listUsers({
+      keyword: filters.keyword,
+      status: filters.status,
+      page: page.value,
+      page_size: pageSize.value,
+    })
+    rows.value = data.list || []
+    total.value = data.total || 0
+  } finally {
+    loading.value = false
+  }
+}
+
+function search() {
+  page.value = 1
+  load()
+}
+
+function reset() {
+  filters.keyword = ''
+  filters.status = ''
+  search()
+}
+
+function toDetail(row) {
+  router.push('/users/' + row.user_id)
+}
+
+async function toggleStatus(row, target) {
+  const isBan = target === 2
+  let reason
+  try {
+    reason = await askReason({
+      title: isBan ? '封禁用户' : '解封用户',
+      message: `${isBan ? '封禁' : '解封'}用户 ${row.nickname || ''} #${row.user_id}`,
+    })
+  } catch {
+    return
+  }
+  await setUserStatus(row.user_id, { status: target, reason })
+  ElMessage.success(isBan ? '已封禁' : '已解封')
+  load()
+}
+
+onMounted(load)
+</script>