yml/hfb_sys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add file upload workflow

Browse Source
This commit is contained in:
yml
2026-05-22 18:50:32 +08:00
parent 6f915b37d3
commit 236518ade4
22 changed files with 819 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/api/files.ts
+33
View File
@@ -0,0 +1,33 @@
import { apiClient } from './client'
export interface UploadedFile {
object_key: string
url: string
filename: string
content_type: string
size: number
}
interface ApiResponse<T> {
code: string
message: string
data: T
}
export async function uploadFile(file: File, scene: string) {
const form = new FormData()
form.append('file', file)
form.append('scene', scene)
const { data } = await apiClient.post<ApiResponse<UploadedFile>>('/files/upload', form, {
headers: { 'Content-Type': 'multipart/form-data' },
})
return data.data
}
export async function fetchAdminFileBlob(key: string) {
const { data } = await apiClient.get<Blob>('/admin/files/object', {
params: { key },
responseType: 'blob',
})
return data
}
frontend/src/api/listings.ts
+2
View File
@@ -13,6 +13,7 @@ export interface Listing {
login_platform: string
rank_level: string
haf_coin_amount: number
screenshot_urls: string[]
price_hourly: number
price_daily: number
price_weekly: number
@@ -34,6 +35,7 @@ export interface ListingPayload {
login_platform: string
rank_level: string
haf_coin_amount: number
screenshot_urls: string[]
price_hourly: number
price_daily: number
price_weekly: number
frontend/src/styles/base.css
+35
View File
@@ -505,6 +505,41 @@ h1 {
margin-top: 14px;
}
.upload-line input {
width: 100%;
}
.upload-stack {
display: grid;
gap: 10px;
width: 100%;
}
.upload-line {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
width: 100%;
}
.evidence-list {
display: grid;
gap: 8px;
}
.evidence-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
}
.evidence-row span {
overflow-wrap: anywhere;
color: #52616f;
}
.full-control {
width: 100%;
}
frontend/src/views/account/OrderDetailView.vue
+22
View File
@@ -4,6 +4,7 @@ import { computed, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { createDispute } from '@/api/disputes'
import { uploadFile } from '@/api/files'
import {
cancelOrder,
confirmReceive,
@@ -27,6 +28,7 @@ const confirming = ref(false)
const returning = ref(false)
const completing = ref(false)
const disputing = ref(false)
const uploadingEvidence = ref(false)
const order = ref<Order | null>(null)
const handoffRecords = ref<HandoffRecord[]>([])
const handoffContent = ref('')
@@ -150,6 +152,23 @@ async function handleCreateDispute() {
}
}
async function handleEvidenceUpload(event: Event) {
const input = event.target as HTMLInputElement
const file = input.files?.[0]
input.value = ''
if (!file) return
uploadingEvidence.value = true
try {
const uploaded = await uploadFile(file, 'dispute')
disputeEvidenceText.value = [disputeEvidenceText.value, uploaded.url].filter(Boolean).join('\n')
ElMessage.success('证据文件已上传')
} catch (error) {
ElMessage.error(readError(error, '上传失败'))
} finally {
uploadingEvidence.value = false
}
}
function readError(error: unknown, fallback: string) {
if (typeof error === 'object' && error && 'response' in error) {
const response = (error as { response?: { data?: { message?: string } } }).response
@@ -257,6 +276,9 @@ function readError(error: unknown, fallback: string) {
:rows="3"
placeholder="证据链接，一行一个。开发阶段可先填截图地址或备注链接"
/>
<div class="panel-action upload-line">
<input type="file" accept="image/jpeg,image/png,image/webp,application/pdf" :disabled="uploadingEvidence" @change="handleEvidenceUpload" />
</div>
<el-button class="panel-action" type="warning" :loading="disputing" @click="handleCreateDispute">提交申诉</el-button>
</div>
</section>
frontend/src/views/admin/AdminDisputesView.vue
+52
View File
@@ -3,11 +3,13 @@ import { ElMessage } from 'element-plus'
import { onMounted, ref } from 'vue'
import { arbitrateDispute, fetchAdminDisputes, type Dispute } from '@/api/disputes'
import { fetchAdminFileBlob } from '@/api/files'
const loading = ref(false)
const submitting = ref(false)
const disputes = ref<Dispute[]>([])
const activeDispute = ref<Dispute | null>(null)
const evidenceDispute = ref<Dispute | null>(null)
const result = ref('release_deposit')
const remark = ref('')
const amount = ref<number | undefined>()
@@ -30,6 +32,38 @@ function openArbitration(row: Dispute) {
amount.value = undefined
}
function evidenceItems(row: Dispute | null) {
const raw = row?.evidence_urls
if (!raw) return []
if (Array.isArray(raw)) return raw
return []
}
function extractObjectKey(url: string) {
try {
const parsed = new URL(url, window.location.origin)
return parsed.searchParams.get('key') || ''
} catch {
return ''
}
}
async function openEvidence(url: string) {
const key = extractObjectKey(url)
if (!key) {
window.open(url, '_blank')
return
}
try {
const blob = await fetchAdminFileBlob(key)
const objectURL = URL.createObjectURL(blob)
window.open(objectURL, '_blank')
window.setTimeout(() => URL.revokeObjectURL(objectURL), 60_000)
} catch (error) {
ElMessage.error(readError(error, '证据文件打开失败'))
}
}
async function handleArbitrate() {
if (!activeDispute.value) return
submitting.value = true
@@ -74,6 +108,11 @@ function readError(error: unknown, fallback: string) {
<el-table-column prop="status" label="状态" width="110" />
<el-table-column prop="description" label="说明" min-width="220" show-overflow-tooltip />
<el-table-column prop="arbitration_result" label="结果" width="150" />
<el-table-column label="证据" width="100">
<template #default="{ row }">
<el-button size="small" :disabled="evidenceItems(row).length === 0" @click="evidenceDispute = row">查看</el-button>
</template>
</el-table-column>
<el-table-column label="操作" width="120">
<template #default="{ row }">
<el-button size="small" :disabled="row.status === 'resolved'" @click="openArbitration(row)">仲裁</el-button>
@@ -111,5 +150,18 @@ function readError(error: unknown, fallback: string) {
<el-button type="primary" :loading="submitting" @click="handleArbitrate">保存裁决</el-button>
</template>
</el-dialog>
<el-dialog :model-value="!!evidenceDispute" title="申诉证据" width="640px" @update:model-value="evidenceDispute = null">
<div v-if="evidenceDispute" class="dialog-body">
<p><strong>{{ evidenceDispute.order_no }}</strong> · {{ evidenceDispute.title }}</p>
<div v-for="item in evidenceItems(evidenceDispute)" :key="item" class="evidence-row">
<span>{{ item }}</span>
<el-button size="small" @click="openEvidence(item)">打开</el-button>
</div>
</div>
<template #footer>
<el-button type="primary" @click="evidenceDispute = null">关闭</el-button>
</template>
</el-dialog>
</section>
</template>
frontend/src/views/admin/AdminListingDetailView.vue
+31
View File
@@ -3,6 +3,7 @@ import { ElMessage } from 'element-plus'
import { computed, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { fetchAdminFileBlob } from '@/api/files'
import { adminMarkListingAbnormal, adminOfflineListing, fetchAdminListing, type Listing } from '@/api/listings'
const route = useRoute()
@@ -54,6 +55,24 @@ function money(value: number) {
return `¥${Number(value || 0).toFixed(2)}`
}
function extractObjectKey(url: string) {
try {
const parsed = new URL(url, window.location.origin)
return parsed.searchParams.get('key') || url
} catch {
return url
}
}
async function openScreenshot(url: string) {
try {
const blob = await fetchAdminFileBlob(extractObjectKey(url))
window.open(URL.createObjectURL(blob), '_blank')
} catch {
window.open(url, '_blank')
}
}
function readError(error: unknown, fallback: string) {
if (typeof error === 'object' && error && 'response' in error) {
const response = (error as { response?: { data?: { message?: string } } }).response
@@ -108,6 +127,7 @@ function readError(error: unknown, fallback: string) {
<p>平台：{{ listing.login_platform }}</p>
<p>段位：{{ listing.rank_level || '-' }}</p>
<p>哈夫币：{{ listing.haf_coin_amount }}</p>
<p>资产截图：{{ listing.screenshot_urls?.length || 0 }} 个</p>
</div>
<div class="order-panel dashboard-panel">
@@ -129,6 +149,17 @@ function readError(error: unknown, fallback: string) {
<p>更新时间：{{ listing.updated_at }}</p>
</div>
<div v-if="listing" class="order-panel dashboard-panel">
<h2>资产截图</h2>
<div v-if="listing.screenshot_urls?.length" class="evidence-list">
<div v-for="url in listing.screenshot_urls" :key="url" class="evidence-row">
<span>{{ url }}</span>
<el-button size="small" @click="openScreenshot(url)">打开</el-button>
</div>
</div>
<p v-else>暂无截图</p>
</div>
<el-dialog :model-value="!!actionType" :title="actionTitle" width="560px" @update:model-value="actionType = ''">
<div v-if="listing" class="dialog-body">
<p><strong>{{ listing.title }}</strong></p>
frontend/src/views/admin/AdminListingReviewView.vue
+47
View File
@@ -2,12 +2,14 @@
import { ElMessage } from 'element-plus'
import { onMounted, ref } from 'vue'
import { fetchAdminFileBlob } from '@/api/files'
import { approveListing, fetchPendingReviewListings, rejectListing, type Listing } from '@/api/listings'
const loading = ref(false)
const submitting = ref(false)
const listings = ref<Listing[]>([])
const activeListing = ref<Listing | null>(null)
const evidenceListing = ref<Listing | null>(null)
const rejectReason = ref('')
onMounted(loadListings)
@@ -55,6 +57,28 @@ async function handleReject() {
}
}
function openEvidence(row: Listing) {
evidenceListing.value = row
}
function extractObjectKey(url: string) {
try {
const parsed = new URL(url, window.location.origin)
return parsed.searchParams.get('key') || url
} catch {
return url
}
}
async function openScreenshot(url: string) {
try {
const blob = await fetchAdminFileBlob(extractObjectKey(url))
window.open(URL.createObjectURL(blob), '_blank')
} catch {
window.open(url, '_blank')
}
}
function readError(error: unknown, fallback: string) {
if (typeof error === 'object' && error && 'response' in error) {
const response = (error as { response?: { data?: { message?: string } } }).response
@@ -84,6 +108,13 @@ function readError(error: unknown, fallback: string) {
<el-table-column prop="rank_level" label="段位" width="110" />
<el-table-column prop="price_hourly" label="时租" width="90" />
<el-table-column prop="deposit_amount" label="押金" width="90" />
<el-table-column label="截图" width="90">
<template #default="{ row }">
<el-button size="small" :disabled="!row.screenshot_urls?.length" @click="openEvidence(row)">
{{ row.screenshot_urls?.length || 0 }} 个
</el-button>
</template>
</el-table-column>
<el-table-column prop="updated_at" label="提交时间" min-width="180" />
<el-table-column label="操作" width="170">
<template #default="{ row }">
@@ -103,5 +134,21 @@ function readError(error: unknown, fallback: string) {
<el-button type="danger" :loading="submitting" @click="handleReject">确认拒绝</el-button>
</template>
</el-dialog>
<el-dialog :model-value="!!evidenceListing" title="账号资产截图" width="680px" @update:model-value="evidenceListing = null">
<div v-if="evidenceListing" class="dialog-body">
<p><strong>{{ evidenceListing.title }}</strong></p>
<div v-if="evidenceListing.screenshot_urls?.length" class="evidence-list">
<div v-for="url in evidenceListing.screenshot_urls" :key="url" class="evidence-row">
<span>{{ url }}</span>
<el-button size="small" @click="openScreenshot(url)">打开</el-button>
</div>
</div>
<p v-else>暂无截图</p>
</div>
<template #footer>
<el-button @click="evidenceListing = null">关闭</el-button>
</template>
</el-dialog>
</section>
</template>
frontend/src/views/seller/SellerListingCreateView.vue
+44 -1
View File
@@ -3,10 +3,13 @@ import { ElMessage } from 'element-plus'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { uploadFile } from '@/api/files'
import { createListing } from '@/api/listings'
const router = useRouter()
const loading = ref(false)
const uploading = ref(false)
const screenshotUrls = ref<string[]>([])
const form = reactive({
title: '',
description: '',
@@ -25,7 +28,7 @@ const form = reactive({
async function handleSubmit() {
loading.value = true
try {
await createListing({ ...form })
await createListing({ ...form, screenshot_urls: screenshotUrls.value })
ElMessage.success('发布已创建')
await router.push('/seller/listings')
} catch (error) {
@@ -35,6 +38,27 @@ async function handleSubmit() {
}
}
async function handleScreenshotUpload(event: Event) {
const input = event.target as HTMLInputElement
const file = input.files?.[0]
if (!file) return
uploading.value = true
try {
const uploaded = await uploadFile(file, 'listing')
screenshotUrls.value = [...screenshotUrls.value, uploaded.url]
ElMessage.success('截图已上传')
} catch (error) {
ElMessage.error(readError(error, '截图上传失败'))
} finally {
uploading.value = false
input.value = ''
}
}
function removeScreenshot(index: number) {
screenshotUrls.value = screenshotUrls.value.filter((_, itemIndex) => itemIndex !== index)
}
function readError(error: unknown, fallback: string) {
if (typeof error === 'object' && error && 'response' in error) {
const response = (error as { response?: { data?: { message?: string } } }).response
@@ -59,6 +83,25 @@ function readError(error: unknown, fallback: string) {
<el-form-item label="账号说明">
<el-input v-model="form.description" type="textarea" :rows="3" />
</el-form-item>
<el-form-item label="账号资产截图">
<div class="upload-stack">
<div class="upload-line">
<input
type="file"
accept="image/jpeg,image/png,image/webp,application/pdf"
:disabled="uploading || screenshotUrls.length >= 12"
@change="handleScreenshotUpload"
/>
<el-button :loading="uploading" disabled>最多 12 个</el-button>
</div>
<div v-if="screenshotUrls.length" class="evidence-list">
<div v-for="(url, index) in screenshotUrls" :key="url" class="evidence-row">
<span>{{ url }}</span>
<el-button size="small" @click="removeScreenshot(index)">移除</el-button>
</div>
</div>
</div>
</el-form-item>
<div class="form-grid">
<el-form-item label="区服">
<el-input v-model="form.server_region" />