chore: establish V1.1 recovery baseline
This commit is contained in:
@@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<el-row :gutter="16">
|
||||
<!-- 统计卡片 -->
|
||||
<el-col :span="6" v-for="s in stats" :key="s.key">
|
||||
<el-card shadow="hover" class="stat-card">
|
||||
<div class="stat-value" :style="{ color: s.color }">{{ s.value }}</div>
|
||||
<div class="stat-label">{{ s.label }}</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-card shadow="never" style="margin-top:16px">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>举报列表</span>
|
||||
<el-radio-group v-model="statusFilter" size="small" @change="loadData">
|
||||
<el-radio-button label="pending">待处理</el-radio-button>
|
||||
<el-radio-button label="processing">处理中</el-radio-button>
|
||||
<el-radio-button label="resolved">已处理</el-radio-button>
|
||||
<el-radio-button label="dismissed">已驳回</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-table :data="tableData" v-loading="loading" border stripe>
|
||||
<el-table-column prop="reasonText" label="举报原因" width="140" />
|
||||
<el-table-column prop="reportedUserId" label="被举报人ID" width="140" />
|
||||
<el-table-column prop="description" label="说明" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column prop="status" label="状态" width="100">
|
||||
<template #default="{row}">
|
||||
<el-tag :type="statusTagType(row.status)">{{ statusText(row.status) }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createdAt" label="提交时间" width="180">
|
||||
<template #default="{row}">{{ formatTime(row.createdAt) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="120">
|
||||
<template #default="{row}">
|
||||
<el-button
|
||||
v-if="row.status==='pending'||row.status==='processing'"
|
||||
type="primary" size="small"
|
||||
@click="openDetail(row.id)">处理</el-button>
|
||||
<el-button size="small" @click="openDetail(row.id)">查看</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-empty v-if="!loading && tableData.length===0" description="暂无举报记录" />
|
||||
</el-card>
|
||||
|
||||
<!-- 举报详情抽屉 -->
|
||||
<el-drawer v-model="drawerVisible" :title="`举报详情 #${currentReportId?.slice(0,8)||''}`" size="560px">
|
||||
<div v-if="detail">
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item label="举报原因">{{ detail.report?.reasonText }}</el-descriptions-item>
|
||||
<el-descriptions-item label="状态">
|
||||
<el-tag :type="statusTagType(detail.report?.status)">{{ statusText(detail.report?.status) }}</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="补充说明" :span="2">{{ detail.report?.description || '无' }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<h4 style="margin:20px 0 12px;color:#E96B6B">被举报人风险画像</h4>
|
||||
<el-descriptions :column="2" border v-if="detail.riskProfile">
|
||||
<el-descriptions-item label="用户">{{ detail.riskProfile.displayName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="风险分数">{{ detail.riskProfile.totalRiskScore }}</el-descriptions-item>
|
||||
<el-descriptions-item label="风险等级">
|
||||
<el-tag :type="riskLevelTag(detail.riskProfile.riskLevel)">
|
||||
{{ riskLevelText(detail.riskProfile.riskLevel) }}
|
||||
</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="历史举报数">{{ detail.riskProfile.totalReportsCount }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<h4 style="margin:20px 0 12px;color:#E96B6B">处置操作</h4>
|
||||
<el-form label-width="100px">
|
||||
<el-form-item label="处理结果">
|
||||
<el-select v-model="processResult" style="width:100%">
|
||||
<el-option label="举报不成立(无处置)" value="no_action" />
|
||||
<el-option label="警告" value="warning" />
|
||||
<el-option label="限制功能(7天)" value="feature_limit" />
|
||||
<el-option label="暂停账号(30天)" value="temporary_suspend" />
|
||||
<el-option label="封禁账号" value="ban" />
|
||||
<el-option label="转人工进一步调查" value="manual_review" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="处理备注">
|
||||
<el-input v-model="processNote" type="textarea" :rows="3" placeholder="请输入处理说明" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :loading="processing" @click="handleProcess">确认提交</el-button>
|
||||
<el-button @click="drawerVisible=false">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { get, post } from '@/api/client'
|
||||
|
||||
const loading = ref(false)
|
||||
const processing = ref(false)
|
||||
const statusFilter = ref('pending')
|
||||
const tableData = ref<any[]>([])
|
||||
const stats = ref<any[]>([])
|
||||
const drawerVisible = ref(false)
|
||||
const currentReportId = ref('')
|
||||
const detail = ref<any>(null)
|
||||
const processResult = ref('no_action')
|
||||
const processNote = ref('')
|
||||
|
||||
const STATUS_MAP: Record<string, { text: string; type: string }> = {
|
||||
pending: { text: '待处理', type: 'warning' },
|
||||
processing: { text: '处理中', type: 'warning' },
|
||||
resolved: { text: '已处理', type: 'success' },
|
||||
rejected: { text: '未受理', type: 'info' },
|
||||
dismissed: { text: '已驳回', type: 'default' }
|
||||
}
|
||||
|
||||
async function loadData() {
|
||||
loading.value = true
|
||||
try {
|
||||
const token = localStorage.getItem('accessToken')
|
||||
const res: any = await get(`/operator/risk/reports/${statusFilter.value}`, {}, { Authorization: `Bearer ${token}` })
|
||||
tableData.value = res || []
|
||||
loadStats()
|
||||
} catch (e) { console.error(e) }
|
||||
finally { loading.value = false }
|
||||
}
|
||||
|
||||
async function loadStats() {
|
||||
try {
|
||||
const token = localStorage.getItem('accessToken')
|
||||
const res: any = await get('/operator/risk/reports/stats', {}, { Authorization: `Bearer ${token}` })
|
||||
stats.value = [
|
||||
{ key: 'pending', label: '待处理', value: res.pendingCount || 0, color: '#E96B6B' },
|
||||
{ key: 'processing', label: '处理中', value: res.processingCount || 0, color: '#E59A32' },
|
||||
{ key: 'resolved', label: '已处理', value: res.resolvedCount || 0, color: '#67C23A' },
|
||||
{ key: 'dismissed', label: '已驳回', value: res.dismissedCount || 0, color: '#909399' }
|
||||
]
|
||||
} catch {}
|
||||
}
|
||||
|
||||
async function openDetail(reportId: string) {
|
||||
currentReportId.value = reportId
|
||||
drawerVisible.value = true
|
||||
processResult.value = 'no_action'
|
||||
processNote.value = ''
|
||||
try {
|
||||
const token = localStorage.getItem('accessToken')
|
||||
const res: any = await get(`/operator/risk/reports/${reportId}`, {}, { Authorization: `Bearer ${token}` })
|
||||
detail.value = res
|
||||
} catch (e) { console.error(e) }
|
||||
}
|
||||
|
||||
async function handleProcess() {
|
||||
if (!processResult.value) return
|
||||
processing.value = true
|
||||
try {
|
||||
const token = localStorage.getItem('accessToken')
|
||||
await post(`/operator/risk/reports/${currentReportId.value}/process`,
|
||||
{ processResult: processResult.value, processNote: processNote.value },
|
||||
{ Authorization: `Bearer ${token}` })
|
||||
drawerVisible.value = false
|
||||
detail.value = null
|
||||
loadData()
|
||||
} catch (e) { console.error(e) }
|
||||
finally { processing.value = false }
|
||||
}
|
||||
|
||||
function statusTagType(s: string) { return STATUS_MAP[s]?.type || 'info' }
|
||||
function statusText(s: string) { return STATUS_MAP[s]?.text || s }
|
||||
function riskLevelTag(l: string) {
|
||||
return { normal: 'info', watch: '', high: 'warning', critical: 'danger' }[l] || 'info'
|
||||
}
|
||||
function riskLevelText(l: string) {
|
||||
return { normal: '正常', watch: '关注', high: '高风险', critical: '极高风险' }[l] || l
|
||||
}
|
||||
function formatTime(t?: string) { return t ? new Date(t).toLocaleString('zh-CN') : '-' }
|
||||
|
||||
onMounted(loadData)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-container { padding: 24px; }
|
||||
.stat-card { text-align: center; }
|
||||
.stat-value { font-size: 36px; font-weight: bold; }
|
||||
.stat-label { font-size: 14px; color: #666; margin-top: 8px; }
|
||||
.card-header { display: flex; justify-content: space-between; align-items: center; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user